/* 수전합리화 페이지 전용 스타일 (C6 공통 c6.css 위에 얹는다) */

/* 고정 머리말 높이만큼 본문을 내린다 */
main { 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; }
.nav a[aria-current="page"] { color: var(--teal); opacity: 1; }

/* 서브 히어로 */
.sub-hero { position: relative; overflow: hidden; background: #0b1a2b; color: #fff; }
.sub-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.sub-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 26, 43, .92) 0%, rgba(11, 26, 43, .72) 60%, rgba(11, 26, 43, .5) 100%); }
.sub-hero-inner { position: relative; z-index: 1; padding: 72px 0 64px; }
.crumb { font-size: 14px; color: #93a7b6; }
.crumb a:hover { color: #fff; }
.sub-hero h1 { margin-top: 16px; font-size: 46px; line-height: 1.28; font-weight: 800; letter-spacing: -.03em; }
.sub-lead { margin-top: 20px; max-width: 700px; font-size: 18px; line-height: 1.8; color: #cddde3; }
.sub-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sj-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.sj-jump a { display: inline-block; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); font-size: 14px; font-weight: 600; color: #dceaea; }
.sj-jump a:hover { border-color: var(--teal); background: rgba(10, 165, 160, .2); color: #fff; }

/* 비교 그림 */
.dg { margin-bottom: 40px; }
.dg svg { width: 100%; height: auto; }
.dg figcaption { margin-top: 10px; font-size: 13px; color: var(--sub); }
.dg-row { font-size: 15px; font-weight: 800; fill: var(--ink); }
.dg-box rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.dg-box.cust rect { fill: #fff; stroke: #93a7b6; stroke-width: 1.5; stroke-dasharray: 6 4; }
.dg-box.key rect { fill: var(--teal-soft); stroke: var(--teal); stroke-width: 2; }
.dg-t { font-size: 17px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.dg-s { font-size: 13px; fill: var(--sub); text-anchor: middle; }
.dg-line { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.dg-arrow { fill: var(--ink-2); }

/* 표 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sj-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: 16px; overflow: hidden; }
.sj-table th, .sj-table td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sj-table thead th { font-size: 13px; font-weight: 700; color: var(--sub); background: var(--soft); border-bottom: 1px solid var(--ink); }
.sj-table tbody th { width: 22%; font-weight: 800; }
.sj-table.change td:last-child { color: var(--teal-dark); font-weight: 700; }
.sj-table.who tbody th { width: 26%; }
.sj-table.who tbody th span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--sub); }

/* 안내 박스 */
.notice { margin-top: 32px; padding: 28px 32px; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); }
.notice h3 { font-size: 19px; font-weight: 800; }
.notice p { margin-top: 10px; color: var(--ink-2); max-width: 880px; }

/* 두 칸 비교(줄어듦 / 늘어남, 비용 부담 방식) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.col { padding: 32px 34px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.col h3 { font-size: 21px; font-weight: 800; }
.col > p { margin-top: 10px; color: var(--ink-2); }
.col.down { border-top: 4px solid var(--teal); }
.col.up { border-top: 4px solid #d6402f; }
.col ul { margin-top: 16px; }
.col li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.col li strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.col .dash li { position: relative; padding-left: 16px; }
.col .dash li::before { content: ""; position: absolute; left: 0; top: 24px; width: 8px; height: 2px; background: var(--teal); }
.foot-line { margin-top: 20px; font-size: 14px; color: var(--sub); }

/* 검토 대상 */
.target { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; }
.sub-h { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.pick li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pick li::before { content: "✓"; position: absolute; left: 0; top: 14px; color: var(--teal); font-weight: 800; }
.cond, .cond dt, .cond dd { margin: 0; }
.cond div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.cond div:last-child { border-bottom: 1px solid var(--line); }
.cond dt { font-weight: 800; }
.cond dd { color: var(--ink-2); font-size: 15px; }

/* 진행 절차 */
.steps { border-top: 1px solid var(--ink); }
.steps > li { display: grid; grid-template-columns: 56px 1fr 300px; gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.steps .no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--teal-soft); color: var(--teal); font-size: 17px; font-weight: 800; }
.steps h3 { font-size: 19px; font-weight: 800; }
.steps p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.steps .gate { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--soft); font-size: 14px; color: var(--sub); }
.steps .gate b { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 2px; }

/* 효과 계산 (어두운 영역) */
.dark-sec { background: #0b1a2b; color: #fff; }
.dark-sec .sec-head h2 { color: #fff; }
.dark-sec .sec-head p { color: #cddde3; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.calc-card { padding: 32px; border-radius: var(--radius); background: #12263d; }
.calc-card span { font-size: 14px; color: #93a7b6; }
.calc-card strong { display: block; margin: 8px 0 14px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.calc-card p { font-size: 14px; color: #a9bcc6; line-height: 1.8; }
.calc-sep { margin-top: 32px; padding-top: 30px; border-top: 1px solid #20374a; max-width: 900px; }
.calc-sep h3 { font-size: 21px; font-weight: 800; }
.calc-sep p { margin-top: 10px; color: #cddde3; }
.link-light { display: inline-block; margin-top: 16px; font-weight: 700; color: #57d6ce; border-bottom: 1px solid currentColor; }

/* 준비 자료 */
.prep { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.prep-title { font-size: 32px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; }
.prep-desc { margin-top: 14px; color: var(--ink-2); }
.prep-list { display: grid; gap: 10px; }
.prep-list li { position: relative; padding: 16px 20px 16px 50px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.prep-list li::before { content: "✓"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.status { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: #fff4e0; color: #8a5300; font-size: 13px; font-weight: 700; }

@media (max-width: 1080px) {
  .sub-hero h1 { font-size: 38px; }
  .steps > li { grid-template-columns: 56px 1fr; }
  .steps .gate { grid-column: 2; }
}
@media (max-width: 900px) {
  .two-col, .target, .calc-grid, .prep { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  main { padding-top: 64px; }
  .sub-hero-inner { padding: 48px 0 44px; }
  .sub-hero h1 { font-size: 29px; }
  .sub-hero h1 br { display: none; }
  .sub-lead { font-size: 16px; }
  .sub-btns .pill { flex: 1 1 100%; }
  .dg { margin: 0 -16px 32px; padding: 0 16px; overflow-x: auto; }
  .dg svg { min-width: 760px; }
  .sj-table { min-width: 560px; }
  .col { padding: 24px 20px; }
  .notice { padding: 22px 20px; }
  .cond div { grid-template-columns: 1fr; gap: 4px; }
  .steps > li { grid-template-columns: 44px 1fr; gap: 16px; }
  .steps .no { width: 38px; height: 38px; font-size: 15px; }
  .calc-card { padding: 24px 20px; }
  .calc-card strong { font-size: 20px; }
}