/* 주방기기 지원 MAIN (Figma: 주방기기 지원 main pc·tablet·mobile 1:2131 / 1:2067 / 1:2003) */

.kitchen-wrap { width: 900px; margin: 0 auto; }
.kitchen-sec { padding-top: 150px; }

.kitchen-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.kitchen-label { font-size: 20px; font-weight: 500; line-height: normal; color: #707070; }

/* ── 1. 메인 비주얼 ── */
.kitchen-hero { position: relative; height: 500px; overflow: hidden; color: #fff; isolation: isolate; }
.kitchen-hero-bg { position: absolute; inset: 0; z-index: -1; }
.kitchen-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.kitchen-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 1280px;
  margin: 0 auto;
  padding: 330px 0 0 250px;
  white-space: nowrap;
}
.kitchen-hero-title { font-size: 40px; font-weight: 700; line-height: 40px; }
.kitchen-hero-sub { font-size: 20px; font-weight: 600; line-height: 25px; }

/* ── 2. 제품 목록 ── */
.kitchen-head { display: grid; gap: 10px; text-align: center; }
.kitchen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 15px;
  height: 469px;
  margin-top: 38px; /* Figma PC: 제목 아래 카드 시작 위치가 50 간격보다 12px 위 (렌더 기준 측정) */
}
.kitchen-grid > li { display: flex; }
.kitchen-eq {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 25px 30px 25px 31px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.kitchen-eq-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.kitchen-eq-pic { flex: none; width: 150px; height: 120px; }
.kitchen-eq strong,
.kitchen-eq-more { flex: 1 0 0; min-height: 1px; display: flex; align-items: center; justify-content: center; line-height: normal; }
.kitchen-eq strong { font-size: 20px; font-weight: 600; color: #000; }
.kitchen-eq-more { font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, 0.5); }
.kitchen-eq--etc { justify-content: center; background: #f7f9fb; }
.kitchen-eq--etc strong,
.kitchen-eq--etc .kitchen-eq-more { flex: none; height: 22px; }

/* ── 3. 렌탈 장점 ── */
.kitchen-steps { padding-top: 162px; }
.kitchen-steps .kitchen-wrap { display: flex; flex-direction: column; gap: 50px; }
.kitchen-step { display: flex; align-items: center; gap: 70px; }
.kitchen-step-img { flex: none; width: 495px; height: 293px; border-radius: 20px; object-fit: cover; }
.kitchen-step:first-child .kitchen-step-img { height: 300px; }
.kitchen-step-text { display: grid; align-items: start; white-space: nowrap; }
.kitchen-step-text > * { grid-area: 1 / 1; }
.kitchen-step-text h3 { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.kitchen-step-text p { margin-top: 102px; font-size: 20px; font-weight: 500; line-height: 1.3; color: #707070; }

/* ── 4. 진행 프로세스 ── */
.kitchen-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  height: 400px;
  margin: 150px 0;
  background: #f7f9fb;
}
.kitchen-process-title { width: 900px; font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.kitchen-process-pic { display: block; width: 900px; }
.kitchen-process-pic img { width: 100%; height: auto; }

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .kitchen-wrap { width: min(650px, 100% - 40px); }
  .kitchen-sec { padding-top: 100px; }
  .kitchen-title { font-size: 25px; }
  .kitchen-label { font-size: 18px; }

  .kitchen-hero-inner { width: min(800px, 100%); padding: 330px 100px 0; }
  .kitchen-hero-title { font-size: 35px; }
  .kitchen-hero-sub { font-size: 18px; }

  .kitchen-grid { gap: 10.833px; height: 338.722px; margin-top: 30px; }
  .kitchen-eq { gap: 3.611px; padding: 18.056px 21.667px 18.056px 22.389px; border-radius: 14.444px; }
  .kitchen-eq-pic { width: 108.333px; height: 86.667px; }
  .kitchen-eq strong { font-size: 17px; }
  .kitchen-eq-more { font-size: 12px; }
  .kitchen-eq--etc strong,
  .kitchen-eq--etc .kitchen-eq-more { height: 15.889px; }

  .kitchen-steps .kitchen-wrap { gap: 25px; }
  .kitchen-step { gap: 50.548px; }
  .kitchen-step-img { width: 357.444px; height: 211.578px; }
  .kitchen-step:first-child .kitchen-step-img { height: 216.633px; }
  .kitchen-step-text h3 { font-size: 25px; }
  .kitchen-step-text p { margin-top: 70px; font-size: 18px; }

  .kitchen-process { gap: 30px; height: 300px; margin: 100px 0; }
  .kitchen-process-title { width: min(650px, 100% - 40px); font-size: 25px; }
  .kitchen-process-pic { width: min(650px, 100% - 40px); padding: 12.5px 0; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .kitchen-wrap { width: calc(100% - 55px); }
  .kitchen-sec { padding-top: 50px; }
  .kitchen-title { font-size: 20px; }
  .kitchen-label { font-size: 15px; }

  .kitchen-hero-inner { width: 100%; padding: 330px 40px 0; }
  .kitchen-hero-title { font-size: 30px; }
  .kitchen-hero-sub { font-size: 15px; }

  .kitchen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10.847px;
    height: 689.175px;
  }
  .kitchen-eq { gap: 3.616px; padding: 18.079px 21.695px 18.079px 22.418px; border-radius: 14.463px; }
  .kitchen-eq-pic { width: 108.475px; height: 86.78px; }
  .kitchen-eq strong { font-size: 15px; }
  .kitchen-eq--etc strong,
  .kitchen-eq--etc .kitchen-eq-more { height: 15.91px; }

  .kitchen-steps .kitchen-wrap { gap: 35px; }
  .kitchen-step { flex-direction: column-reverse; align-items: flex-start; gap: 15px; }
  .kitchen-step-img { width: 100%; height: 195px; }
  .kitchen-step:first-child .kitchen-step-img { height: 199px; }
  .kitchen-step:last-child .kitchen-step-img { height: 194px; }
  .kitchen-step-text h3 { font-size: 20px; }
  .kitchen-step-text p { margin-top: 57px; font-size: 15px; } /* Figma 58 — 렌더 결과 행마다 1px 짧아 57 로 맞춤 */

  .kitchen-process { height: 650px; margin: 50px 0; }
  .kitchen-process-title { width: calc(100% - 54px); font-size: 20px; }
  .kitchen-process-pic { width: calc(100% - 54px); padding: 0; }
}