/* 상세페이지: 제품 구성 (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; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 서브 히어로 */
.sub-hero { background: #0b1a2b; color: #fff; padding: 64px 0 56px; }
.crumb { font-size: 13px; color: #8fa6b3; margin-bottom: 22px; }
.crumb a:hover { color: #fff; }
.crumb span { margin: 0 6px; }
.sub-hero h1 { margin-top: 20px; font-size: 48px; line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.sub-lead { margin-top: 20px; max-width: 760px; font-size: 18px; color: #cddde3; }
.sub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.sub-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: #e4eef0; }
.sub-jump a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }

/* 표 공통 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.p-table th, .p-table td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.p-table thead th { font-size: 13px; font-weight: 600; color: var(--sub); background: var(--soft); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.p-table tbody th { width: 24%; font-weight: 800; font-size: 16px; color: var(--ink); }
.p-table td { color: var(--ink-2); }
.p-table tbody tr:last-child th, .p-table tbody tr:last-child td { border-bottom: 0; }
.p-table td:last-child { width: 118px; white-space: nowrap; }

.mark-in, .mark-opt, .mark-free, .mark-etc { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.mark-in { background: var(--teal-soft); color: var(--teal-dark); }
.mark-opt { background: #fff2de; color: #92610d; }
.mark-free { background: #0b1a2b; color: #7fe0da; }
.mark-etc { background: var(--soft); color: var(--ink-2); border: 1px solid var(--line); }
.mark-etc a { text-decoration: underline; text-underline-offset: 3px; }

/* 1. 패키지 구성 */
.parts-wrap { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: start; }
.parts-visual img { border-radius: var(--radius); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }
.parts-visual figcaption { margin-top: 10px; font-size: 13px; color: var(--sub); }
.parts-wrap .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.parts-wrap .p-table { min-width: 560px; }

/* 2. 제어 흐름 */
.flow-fig svg { width: 100%; height: auto; }
.flow-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--sub); }
.pf-box rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.pf-box.pf-key rect { fill: var(--teal-soft); stroke: var(--teal); }
.pf-box.pf-guard rect { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.pf-t { font-size: 17px; font-weight: 800; fill: var(--ink); text-anchor: middle; }
.pf-s { font-size: 14px; fill: var(--sub); text-anchor: middle; }
.pf-line { fill: none; stroke: var(--ink-2); stroke-width: 1.8; }
.pf-line.pf-back { stroke: #9bb0bd; stroke-dasharray: 6 5; }
.pf-head { fill: var(--ink-2); }
.pf-note rect { fill: var(--ink); }
.pf-n { font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }

.flow-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.flow-notes div { padding: 26px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.flow-notes h3 { font-size: 18px; font-weight: 800; }
.flow-notes p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }

/* 3. 제어 모드 표 */
.mode-table tbody th { width: 18%; white-space: nowrap; }
.mode-table tbody th b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 800; vertical-align: middle; }
.mode-table td:last-child { width: auto; white-space: normal; }
.mode-table .row-now { background: var(--teal-soft); }
.mode-table .row-now th { color: var(--teal-dark); }
.note-line { margin-top: 22px; font-size: 14px; color: var(--sub); }

/* 4. 표준 용량 */
.cap-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cap-chips li { padding: 26px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-align: center; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.cap-chips span { font-size: 15px; font-weight: 700; color: var(--sub); margin-left: 3px; }
.cap-check { margin-top: 40px; padding: 34px 36px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.cap-check h3 { font-size: 20px; font-weight: 800; }
.cap-check .check-list { grid-template-columns: 1fr 1fr; }
.cap-check .check-list li { background: var(--soft); box-shadow: none; }
.cap-check .small { margin-top: 16px; }

/* 5. 기존 인버터 */
.exist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.exist-box { display: flex; flex-direction: column; padding: 32px 34px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.exist-box h3 { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: 8px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.exist-box .small { margin-top: auto; padding-top: 18px; }
.step-list { display: grid; gap: 14px; }
.step-list li { display: flex; gap: 16px; align-items: flex-start; }
.step-list b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 14px; font-weight: 800; }
.step-list h4 { font-size: 16px; font-weight: 800; }
.step-list p { margin-top: 2px; font-size: 15px; color: var(--sub); }

.warn-box { margin-top: 24px; padding: 30px 34px; border-radius: var(--radius); background: #0b1a2b; color: #cddde3; }
.warn-box h3 { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.45; }
.warn-box p { margin-top: 12px; font-size: 15px; max-width: 900px; }

/* 5-1. 단일 견적(턴키) — 앞 영역과 같은 흰 배경이라 윗선으로 구분한다 */
.tk-sec { border-top: 1px solid var(--line); }
.tk-body { display: grid; gap: 14px; max-width: 900px; margin-bottom: 40px; }
.tk-body p { font-size: 17px; color: var(--ink-2); }
.tk-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tk-col { padding: 30px 32px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.tk-col h3 { font-size: 19px; font-weight: 800; }
.tk-old h3 { color: var(--sub); }
.tk-new { border-color: var(--teal); box-shadow: 0 16px 34px -24px rgba(10, 165, 160, .5); }
.tk-new h3 { color: var(--teal-dark); }
.tk-col .x-list, .tk-col .check-list { margin-top: 18px; }
.tk-col .x-list li, .tk-col .check-list li { background: var(--soft); box-shadow: none; font-size: 15px; }

/* 7. 운영 화면 */
.scr { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 28px 56px -34px rgba(11, 26, 43, .45); }
.scr-bar { display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: var(--soft); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.scr-dots { display: inline-flex; gap: 6px; }
.scr-dots i { width: 10px; height: 10px; border-radius: 50%; background: #c6d2da; }
.scr-demo { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fff2de; color: #92610d; font-size: 12px; font-weight: 700; }
.scr-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding: 24px; }
.scr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.scr-kpis div { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); }
.scr-kpis span { font-size: 13px; color: var(--sub); }
.scr-kpis strong { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.scr-kpis strong small { font-size: 14px; font-weight: 700; color: var(--sub); margin-left: 3px; }
.scr-kpis strong.mode { font-size: 22px; color: var(--teal-dark); }
.scr-log { padding: 18px 20px; border-radius: 14px; background: var(--soft); }
.scr-sub { font-size: 14px; font-weight: 800; }
.scr-log ol { margin-top: 10px; }
.scr-log li { display: grid; grid-template-columns: 50px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.scr-log time { color: var(--sub); font-variant-numeric: tabular-nums; }

/* 9. 관련 페이지 */
.next-sec { padding-top: 96px; padding-bottom: 96px; }
.next-head { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; }
.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.next-card { display: block; padding: 30px 28px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: border-color .15s, box-shadow .15s; }
.next-card:hover { border-color: var(--teal); box-shadow: 0 16px 34px -22px rgba(11, 26, 43, .4); }
.next-card h3 { margin-top: 2px; font-size: 20px; font-weight: 800; }
.next-card p { margin-top: 10px; font-size: 15px; color: var(--sub); }
.next-go { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 800; color: var(--teal); }
.next-card:hover .next-go { color: var(--teal-dark); }

/* 태블릿 */
@media (max-width: 1080px) {
  .sub-hero h1 { font-size: 40px; }
  .parts-wrap { grid-template-columns: 1fr; }
  .flow-notes, .next-grid { grid-template-columns: 1fr; }
  .cap-chips { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  main { padding-top: 64px; }
  .exist-grid, .scr-body, .tk-compare { grid-template-columns: 1fr; }
  .mode-table { min-width: 720px; }
  .p-table { min-width: 620px; }
}

/* 휴대폰 */
@media (max-width: 600px) {
  .sub-hero { padding: 40px 0 44px; }
  .sub-hero h1 { font-size: 30px; }
  .sub-hero h1 br { display: none; }
  .sub-lead { font-size: 16px; }
  .sub-lead br { display: none; }
  .flow-fig { margin: 0 -16px; padding: 0 16px; overflow-x: auto; }
  .flow-fig svg { min-width: 760px; }
  .cap-chips { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cap-chips li { padding: 20px 8px; font-size: 26px; }
  .cap-check { padding: 24px 20px; }
  .cap-check .check-list { grid-template-columns: 1fr; }
  .exist-box, .warn-box, .tk-col { padding: 24px 20px; }
  .tk-body p { font-size: 16px; }
  .warn-box h3 { font-size: 18px; }
  .scr-body { padding: 16px; }
  .scr-kpis strong { font-size: 24px; }
  .next-sec { padding-top: 64px; padding-bottom: 64px; }
  .next-card { padding: 24px 20px; }
}