/* 적용 설비 상세페이지 — c6.css 위에 얹는 스타일 */

/* 상단 메뉴가 고정이라 본문을 그만큼 내린다 */
.page { padding-top: 76px; }

/* 상세페이지는 첫 화면이 사진 전면이 아니다.
   공용 스크립트가 맨 위에서 solid 클래스를 떼어내므로, 여기서 흰 메뉴로 고정한다. */
.header, .header.solid { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.header:not(.solid) .nav a:hover { color: var(--teal); text-decoration: none; }

/* 서브 히어로 */
.sub-hero { position: relative; overflow: hidden; background: #0b1a2b; color: #fff; }
.sub-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.sub-inner { position: relative; padding-top: 72px; padding-bottom: 64px; }
.crumb { font-size: 14px; color: #93a7b6; }
.crumb a { color: #93a7b6; }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 6px; }
.sub-hero h1 { margin-top: 14px; font-size: 46px; line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.sub-lead { margin-top: 20px; max-width: 760px; font-size: 18px; line-height: 1.8; color: #cddde3; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chips a { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); font-size: 14px; font-weight: 600; color: #e7f2f2; }
.chips a:hover { background: rgba(10, 165, 160, .25); border-color: var(--teal); }

/* 요약 띠 */
.sum-bar { border-bottom: 1px solid var(--line); background: #fff; }
.sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 28px 32px; }
.sum-grid div { padding-left: 16px; border-left: 3px solid var(--teal); }
.sum-grid b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sum-grid span { font-size: 14px; color: var(--sub); }

/* 설비별 블록 */
.eq-block { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.eq-block.rev .eq-photo { order: 2; }
.eq-photo { position: relative; margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: #dbe4e9; }
.eq-photo img { width: 100%; height: 100%; object-fit: cover; }
.eq-photo figcaption { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 26, 43, .6); color: #fff; font-size: 12px; }
.eq-body h2 { margin-top: 6px; font-size: 34px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; }
.eq-body > p { margin-top: 16px; font-size: 17px; line-height: 1.85; color: var(--ink-2); }

.eq-dl { margin-top: 26px; border-top: 1px solid var(--line); }
.eq-dl div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.eq-dl dt { font-size: 14px; font-weight: 700; color: var(--sub); }
.eq-dl dd { margin: 0; font-size: 15px; line-height: 1.75; }
.eq-good { margin-top: 22px; padding: 18px 22px; border-radius: 16px; background: var(--teal-soft); font-size: 15px; line-height: 1.75; color: #0c4b49; }
.eq-good b { display: block; font-size: 13px; font-weight: 800; color: var(--teal-dark); margin-bottom: 4px; }

/* 적합도 3구간 */
.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.range-card { padding: 30px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--line); }
.range-card.go { border-top-color: var(--teal); }
.range-card.maybe { border-top-color: #e0a12c; }
.range-card.no { border-top-color: #9aa9b4; }
.range-card b { font-size: 15px; font-weight: 800; color: var(--sub); }
.range-card h3 { margin-top: 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.range-card.go h3 { color: var(--teal-dark); }
.range-card p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }

/* 계산기 영역 간격 */
.fit-check { margin-top: 64px; }

/* 표 */
.blk-sub { margin: 72px 0 20px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.table-box { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.case-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
.case-table th, .case-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.case-table thead th { font-size: 13px; font-weight: 700; color: var(--sub); background: var(--soft); }
.case-table tbody th { font-weight: 700; }
.case-table tbody th span { display: block; font-size: 13px; font-weight: 500; color: var(--sub); }
.case-table tbody tr:last-child th, .case-table tbody tr:last-child td { border-bottom: 0; }
.case-table td { font-variant-numeric: tabular-nums; }
.case-table em { font-style: normal; display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.v-go { background: var(--teal-soft); color: var(--teal-dark); }
.v-no { background: #eef1f3; color: #5d6b76; }
.table-note { margin-top: 14px; font-size: 14px; color: var(--sub); }
/* 표 가로 스크롤 안내: 좁은 화면에서만 */
.table-swipe { display: none; margin-top: 10px; font-size: 13px; color: var(--sub); }

/* 신중 검토 / 제외 */
.lim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lim-card { padding: 32px 34px; border-radius: 20px; background: var(--soft); }
.lim-card.stop { background: #fdf1ee; }
.lim-card h3 { font-size: 21px; font-weight: 800; }
.lim-card p { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.lim-card .x-list li { background: #fff; font-size: 15px; }

/* 현장 조사 준비 */
.survey { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.survey-copy h2 { font-size: 34px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; }
.survey-copy p { margin: 16px 0 26px; font-size: 17px; line-height: 1.8; color: var(--ink-2); }
.survey-list { margin-top: 0; }
.survey-list li { font-size: 15px; }

/* 상담 띠 오른쪽: 이어서 볼 내용 */
.next-box { padding: 30px 32px; border-radius: 24px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
.next-box h3 { font-size: 15px; font-weight: 800; color: #cfeceb; }
.next-link { display: block; margin-top: 12px; padding: 18px 20px; border-radius: 16px; background: #fff; color: var(--ink); }
.next-link:hover { background: #f0fbfa; }
.next-link b { display: block; font-size: 17px; font-weight: 800; }
.next-link span { font-size: 14px; color: var(--sub); }

/* 태블릿 */
@media (max-width: 1080px) {
  .sub-hero h1 { font-size: 38px; }
  .sum-grid { grid-template-columns: 1fr 1fr; }
  .range-grid { grid-template-columns: 1fr; }
  .eq-block { gap: 40px; }
}

/* 좁은 화면 */
@media (max-width: 900px) {
  .eq-block, .survey, .lim-grid { grid-template-columns: 1fr; gap: 32px; }
  .eq-block.rev .eq-photo { order: 0; }
  .blk-sub { margin-top: 56px; }
  .fit-check { margin-top: 48px; }
}

/* 휴대폰 */
@media (max-width: 600px) {
  .page { padding-top: 64px; }
  .sub-inner { padding-top: 48px; padding-bottom: 40px; }
  .sub-hero h1 { font-size: 29px; }
  .sub-hero h1 br, .survey-copy h2 br, .eq-body h2 br { display: none; }
  .sub-lead { font-size: 16px; }
  .chips { margin-top: 24px; }
  .sum-grid { grid-template-columns: 1fr; gap: 14px; padding: 22px 16px; }
  .eq-body h2 { font-size: 26px; }
  .eq-body > p { font-size: 16px; }
  .eq-dl div { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; }
  .eq-good { padding: 16px 18px; }
  .range-card { padding: 24px 20px; }
  .blk-sub { font-size: 20px; margin: 48px 0 16px; }
  .lim-card { padding: 24px 20px; }
  .survey-copy h2 { font-size: 26px; }
  .next-box { padding: 22px 18px; border-radius: 20px; }
  .table-swipe { display: block; }
}