/* 업소용 음식물 처리기 (Figma: 8 업소용 음식물 처리기 pc 1:2521 · tablet 1:2479 · mobile 1:2440) */

.fw-body { padding-bottom: 150px; }
.fw-wrap { width: 900px; margin: 0 auto; }
.fw-sec + .fw-sec { margin-top: 150px; }

/* 화면별 줄바꿈 (Figma 텍스트 줄바꿈 그대로) */
.fw-body br[class] { display: none; }
@media (min-width: 1024px) { .fw-body br.fw-bp { display: inline; } }
@media (min-width: 768px) and (max-width: 1023px) { .fw-body br.fw-bt { display: inline; } }
@media (max-width: 767px) { .fw-body br.fw-bm { display: inline; } }

.fw-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }

/* ── 1. 제품 정보 ── */
.fw-name { text-align: center; }
.fw-prod { display: flex; align-items: center; gap: 50px; width: 800px; margin: 50px auto 0; }
.fw-pic { flex: none; width: 350px; height: 350px; border-radius: 20px; overflow: hidden; }
.fw-pic img { width: 100%; height: 100%; object-fit: contain; }
.fw-spec { flex: none; display: flex; margin: 0; flex-direction: column; gap: 20px; width: 420px; font-size: 15px; }
.fw-row { display: grid; grid-template-columns: 110px 300px; column-gap: 10px; align-items: start; }
.fw-row dt { height: 18px; font-weight: 600; line-height: 20px; letter-spacing: -0.12px; color: #000; }
.fw-row dd { margin: 0; font-weight: 500; line-height: 20px; letter-spacing: -0.12px; color: #707070; }
.fw-row:first-child dt { letter-spacing: 0.196px; }
.fw-row--a dt { line-height: 18px; }
.fw-row--a dd { line-height: 16px; }
.fw-row--b dt { line-height: 16px; }

/* ── 2. 특징 카드 ── */
.fw-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  height: 564px;
  margin-top: 50px;
}
.fw-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 35px 30px;
  border-radius: 20px;
  overflow: hidden;
}
.fw-card-bg { position: absolute; inset: 0; z-index: -1; }
.fw-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.fw-card h3 { width: 100%; font-size: 20px; font-weight: 600; line-height: normal; color: #000; }
.fw-card p { width: 100%; font-size: 15px; font-weight: 500; line-height: 1.3; color: #707070; }

/* ── 3. 비교표 ── */
.fw-compare { display: block; margin-top: 50px; }
.fw-compare img { width: 100%; height: auto; }

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

  .fw-prod { gap: 36.111px; width: 592px; max-width: 100%; margin-top: 36.111px; }
  .fw-pic { width: 252.778px; height: 252.778px; border-radius: 14.444px; }
  .fw-spec { gap: 14.444px; width: 303.333px; font-size: 13px; }
  .fw-row { grid-template-columns: 79.444px 216.667px; column-gap: 7.222px; }
  .fw-row dt { height: 13px; }

  .fw-feat-grid { gap: 15px; height: 407.333px; margin-top: 30px; }
  .fw-card { gap: 7.222px; padding: 25.278px 21.667px; }
  .fw-card h3 { font-size: 15px; }
  .fw-card p { font-size: 12px; }

  .fw-compare { margin-top: 30px; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .fw-body { padding-bottom: 50px; }
  .fw-wrap { width: calc(100% - 54px); }
  .fw-sec + .fw-sec { margin-top: 50px; }
  .fw-title { font-size: 20px; }

  .fw-prod { flex-direction: column; align-items: flex-start; justify-content: center; width: 250px; }
  .fw-spec { width: 251px; }

  .fw-feat-grid { gap: 10px 11px; height: 332px; }
  .fw-card { border-radius: 14.444px; }
}