/* VISION-PARTS — page.css
 * 서브 9페이지 전용. core.css -> components.css -> page.css 순으로 로드된다.
 * 시안에 없던 컴포넌트만 정의하고, 섹션 배경 리듬(.about/.items/.why/.process/.reviews)과
 * 카드·칩·버튼은 components.css / core.css 의 것을 그대로 재사용한다.
 */

/* ---------- 서브 히어로 ----------
   헤더는 스크롤 0에서 완전 투명이고 GNB 글자색이 #EAF2FF 다.
   따라서 모든 서브페이지는 반드시 다크 히어로로 시작해야 메뉴가 보인다.
   (vp_sync.py --check 가 이 불변식을 강제한다) */
.page-hero{position:relative;display:flex;align-items:flex-end;min-height:420px;
  background:var(--navy-950);isolation:isolate;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:-2}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.page-hero-ov{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(820px 460px at 14% 64%,rgba(11,31,58,.40) 0%,rgba(6,13,31,.90) 60%,rgba(6,13,31,.97) 100%),
  linear-gradient(180deg,rgba(6,13,31,.80) 0%,rgba(6,13,31,.50) 42%,rgba(6,13,31,.95) 100%)}
.page-hero .circuit-svg{right:-6%;bottom:-16%;width:46%;opacity:.34}
.page-hero-inner{position:relative;padding:158px 0 76px}
.page-hero h1{margin-top:14px;font-size:clamp(28px,3.9vw,48px);font-weight:900;color:#fff;
  line-height:1.22;letter-spacing:-.025em}
.page-hero h1 .accent{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lead{margin-top:18px;font-size:clamp(15px,1.5vw,18px);color:#B9C9E4;max-width:680px;line-height:1.75}
.page-hero .hero-iso{margin-top:32px}

/* ---------- 브레드크럼 ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;color:#7E93B6;flex-wrap:wrap}
.crumb a{transition:.2s}
.crumb a:hover{color:var(--cyan)}
.crumb i{font-style:normal;opacity:.4}
.crumb b{color:#C9D8F0;font-weight:600}

/* ---------- 라이트 배경용 세컨더리 버튼 ----------
   .btn-ghost 는 반투명 흰색이라 다크 전용이다. 흰 배경에서는 보이지 않는다.
   시안이 이미 쓰는 .chip:hover 언어(시안 테두리 + #EDF9FF)를 버튼으로 승격.
   높이는 .btn-primary(61.2px) / .btn-quote(48px) 와 정확히 맞춘다. */
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--white);border:1.5px solid var(--line);color:var(--navy-800);
  font-size:17px;font-weight:700;padding:15.5px 30.5px;border-radius:14px;transition:.25s}
.btn-line:hover{border-color:var(--cyan);background:#EDF9FF;color:var(--navy-900);
  box-shadow:0 10px 26px rgba(0,150,255,.14);transform:translateY(-2px)}
.btn-line svg{width:18px;height:18px;color:var(--cyan)}
.btn-line.sm{font-size:15px;padding:10.5px 20.5px;border-radius:12px}

/* ---------- 본문 타이포 ---------- */
.rich{max-width:860px}
.rich p{font-size:16px;line-height:1.85;color:#3d4655;margin-bottom:18px}
.rich p:last-child{margin-bottom:0}
.rich p strong,.rich strong{color:var(--navy-800);font-weight:700}
.rich h3{font-size:19px;font-weight:800;color:var(--navy-800);margin:34px 0 12px;letter-spacing:-.01em}
.rich ul{margin:0 0 18px;display:grid;gap:9px}
.rich ul li{position:relative;padding-left:19px;font-size:15.5px;line-height:1.75;color:#3d4655}
.rich ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--grad-brand)}

/* ---------- 품목 탭 (chip 을 가로 배열로) ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip-row .chip{padding:11px 18px}
.chip-row .chip:hover{transform:translateY(-2px)}
.chip-row .chip.on{border-color:var(--cyan);background:#EDF9FF;color:var(--navy-800)}

/* ---------- 스펙/분류 표 ---------- */
.spec-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:34px}
.spec-table th,.spec-table td{padding:16px 20px;font-size:14.8px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.7}
.spec-table thead th{background:var(--navy-900);color:#fff;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-bottom:none}
.spec-table tbody th{width:26%;font-weight:700;color:var(--navy-800);background:var(--bg-soft)}
.spec-table td{color:var(--gray)}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:none}
.spec-table em{font-style:normal;font-family:var(--mono);color:var(--blue);font-weight:700}

/* ---------- FAQ (details 기반, JS 0줄 — FAQPage 스키마와 1:1) ---------- */
.faq{display:grid;gap:12px;margin-top:44px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;transition:.25s}
.faq details[open]{border-color:rgba(0,194,255,.45);box-shadow:0 10px 26px rgba(6,13,31,.07)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;
  padding:20px 22px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--mono);font-size:15px;font-weight:800;
  color:var(--cyan);line-height:1.6;flex-shrink:0}
.faq summary::after{content:"";width:10px;height:10px;margin-left:auto;flex-shrink:0;align-self:center;
  border-right:2px solid var(--gray);border-bottom:2px solid var(--gray);
  transform:rotate(45deg) translate(-2px,-2px);transition:.25s}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--cyan)}
.faq .a{padding:0 22px 22px 55px;font-size:14.8px;color:var(--gray);line-height:1.85}

/* ---------- 지도 ---------- */
.map-wrap{margin-top:34px;height:440px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 10px 30px rgba(6,13,31,.08)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 하단 CTA (시안 case-banner 재활용) ---------- */
.case-banner .case-actions .btn-primary,
.case-banner .case-actions .btn-ghost{white-space:nowrap}

/* ---------- 유틸 (시안이 인라인 style 로 하던 것) ---------- */
.tac{text-align:center}
.tac .eyebrow{justify-content:center}
.tac .sec-desc{margin-left:auto;margin-right:auto}

@media (max-width:1100px){
  .page-hero{min-height:360px}
  .page-hero-inner{padding:140px 0 64px}
}
@media (max-width:768px){
  .page-hero{min-height:0}
  .page-hero-inner{padding:112px 0 52px}
  .page-hero h1{font-size:clamp(25px,7vw,32px)}
  .page-hero .circuit-svg{display:none}
  .btn-line{width:100%}
  .btn-line.sm{width:auto}
  .rich p{font-size:15.3px}
  .spec-table thead{display:none}
  .spec-table tr,.spec-table th,.spec-table td{display:block;width:auto}
  .spec-table tbody th{border-bottom:none;width:auto}
  .spec-table td{padding-top:6px}
  .faq summary{font-size:15.3px;padding:17px 18px}
  .faq .a{padding:0 18px 18px 46px;font-size:14.2px}
  .map-wrap{height:320px}
}