@charset "utf-8";
/* ==========================================================================
   오토랩모터스 — P2 블루프린트 / 액센트 앰버 #F08C1A / ★아키타입 C 가로 스크롤
   모티프: 20px 도면 그리드 · 치수선(양끝 틱) · SHEET 번호 · 각진 모서리(≤4px) · 절취선
   구조: 히어로 → ★시그니처(엔진룸 치수선 핀) → 가로 트랙(.hx-viewport 핀 + .hx-track x이동:
        진단순서→앰버브리지→공임표→장비→부품) → 선언 → 기록 → 예약/FAQ → 방문 → 푸터
   ≤1023px: 핀 전부 해제, 레일은 overflow-x:auto.
   ⚠ scroll-behavior:smooth 전역 금지(Lenis 충돌) — 모바일 미디어쿼리에만
   ========================================================================== */

:root{
  --paper:#F4F3EF;
  --paper-2:#E8E6E0;
  --ink:#12161C;
  --ink-2:#1A2027;
  --accent:#F08C1A;
  --accent-dk:#C86F0C;
  --accent-lt:#FFB055;
  --deep:#16304C;
  --deep-dk:#0C1B2B;

  --ink-72:rgba(18,22,28,.72);
  --ink-52:rgba(18,22,28,.52);
  --line:rgba(18,22,28,.14);
  --line-dk:rgba(18,22,28,.22);
  --line-lt:rgba(244,243,239,.16);

  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'Roboto Mono','SF Mono',Consolas,monospace;

  --wrap:1320px;
  --gut:clamp(20px,4vw,52px);
  --pad:clamp(90px,13vw,190px);
  --head-h:74px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.7;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--ink)}
table{border-collapse:collapse}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono)}
.pc-br{display:none}
@media(min-width:768px){.pc-br{display:inline}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 사진 통일 처리 — 전 이미지 동일 그레이딩 (톤 제각각 = 저품질 1순위) */
.hero-media img,.bp-photo,.ritem img,.part-fig img,.visit-fig img{
  filter:contrast(1.09) saturate(.82) brightness(.98);
}
.ritem figure,.part-fig,.visit-fig{position:relative}
.ritem figure::after,.part-fig::after,.visit-fig::after{
  content:"";position:absolute;inset:0;background:var(--deep);
  opacity:.10;mix-blend-mode:multiply;pointer-events:none;
}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:200;background:var(--deep-dk);display:grid;place-items:center}
.curtain-inner{text-align:center}
.curtain-dim{width:min(280px,58vw);height:26px;display:block;margin:0 auto 18px}
.curtain-txt{font-size:10px;letter-spacing:.4em;color:var(--accent);opacity:0;padding-left:.4em}

/* ---------- 타이포 ---------- */
.display{font-weight:800;font-size:clamp(40px,8vw,118px);line-height:1.04;letter-spacing:-.04em}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--accent);font-weight:600}
/* 밝은 배경 섹션에서는 앰버가 대비 미달(2.2:1) → 어두운 앰버로 내린다 */
.decl .label,.book .label,.visit .label,.hxp-rate .label{color:#A65A08}
em{font-style:normal;color:var(--accent);font-weight:700}
.sec-lead{color:var(--ink-72);font-size:clamp(14.5px,1.6vw,17.5px);max-width:60ch;line-height:1.85}
.sub-h{font-weight:800;font-size:clamp(26px,3.4vw,44px);line-height:1.14;letter-spacing:-.032em}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:2px;font-size:14.5px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s;will-change:transform;
}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent-lt)}
.btn-line{border:1px solid rgba(244,243,239,.42);color:#fff}
.btn-line:hover{border-color:var(--accent);color:var(--accent);background:rgba(240,140,26,.08)}
.visit-body .btn-line{border-color:var(--line-dk);color:var(--ink)}
.visit-body .btn-line:hover{border-color:var(--accent);color:var(--accent-dk)}
.btn-mini{padding:10px 18px;font-size:13px;background:var(--accent);color:var(--ink);border-radius:2px}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s}
.site-head.is-stuck{background:rgba(12,27,43,.92);border-bottom-color:rgba(240,140,26,.28);
  backdrop-filter:saturate(1.25) blur(10px)}
.head-inner{display:flex;align-items:center;gap:24px;height:var(--head-h);
  padding:0 var(--gut);max-width:1800px;margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;color:#fff}
.logo-mark{color:var(--accent);display:flex}
.logo-txt{font-weight:800;font-size:18.5px;letter-spacing:-.025em}
.gnb{display:none;gap:26px;margin-left:auto;font-size:13.5px;color:rgba(244,243,239,.8)}
@media(min-width:1040px){.gnb{display:flex}}
.gnb a{position:relative;padding:5px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .3s}
.gnb a:hover{color:var(--accent)}
.gnb a:hover::after{right:0}
@media(max-width:1039px){.btn-mini{margin-left:auto}}

/* ---------- 01 히어로 — 풀블리드 + 2중 그라데이션 스크림 ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(40px,7vw,90px);overflow:hidden;background:var(--deep-dk)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;will-change:transform}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(9,18,29,.92) 0%,rgba(9,18,29,.70) 34%,rgba(9,18,29,.18) 64%,rgba(9,18,29,.38) 100%),
    linear-gradient(180deg,rgba(9,18,29,.60) 0%,rgba(9,18,29,.10) 36%,rgba(9,18,29,.86) 100%);
}
.hero-grid-ov{position:absolute;inset:0;opacity:.34;
  background-image:
    linear-gradient(rgba(240,140,26,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,140,26,.18) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 58%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.95),transparent 58%);
}
.hero-inner{position:relative;z-index:2;color:#fff;width:100%;padding-bottom:clamp(26px,4vw,46px)}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.26em;color:var(--accent);margin-bottom:26px}
.eyebrow .rule{display:block;width:56px;height:1px;background:var(--accent)}
.hero-h1{color:#fff;max-width:16ch;text-shadow:0 2px 44px rgba(9,18,29,.46)}
.hero-lead{margin-top:28px;font-size:clamp(15px,1.9vw,19.5px);color:rgba(255,255,255,.86);
  max-width:52ch;line-height:1.78}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.hero-trust{margin-top:28px;font-size:10.5px;letter-spacing:.34em;color:rgba(240,140,26,.68)}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  color:rgba(244,243,239,.52);font-size:10px;letter-spacing:.22em;
  border-top:1px solid rgba(244,243,239,.2);padding-top:16px;width:100%}
.hero-scroll{display:flex;align-items:center;gap:10px}
.hero-scroll i{display:block;width:36px;height:1px;background:rgba(244,243,239,.34);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:sweep 2.1s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- ★ 02 시그니처 — 엔진룸 치수선 드로잉 ---------- */
.bp{background:var(--deep-dk);color:var(--paper);padding:var(--pad) 0 0;position:relative;overflow:hidden}
.bp::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(240,140,26,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(240,140,26,.10) 1px,transparent 1px);
  background-size:20px 20px}
.bp > *{position:relative;z-index:1}
.bp-head{max-width:var(--wrap)}
.bp-title{font-weight:800;font-size:clamp(30px,5vw,68px);line-height:1.06;
  letter-spacing:-.04em;margin:16px 0 22px}
.bp .sec-lead{color:rgba(244,243,239,.68)}

.bp-stage{margin-top:clamp(40px,6vw,80px);padding:0 var(--gut)}
.bp-frame{position:relative;max-width:1120px;margin:0 auto;aspect-ratio:4/3;
  border:1px solid rgba(240,140,26,.34);background:#050B12;overflow:hidden}
.bp-photo{width:100%;height:100%;object-fit:cover;opacity:.62}
.bp-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 66% at 50% 48%,rgba(5,11,18,0) 30%,rgba(5,11,18,.72) 100%)}
.bp-dims{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.bp-node{filter:drop-shadow(0 0 8px rgba(240,140,26,.6))}

/* 지시선 끝 라벨 */
.bp-labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.bp-lbl{position:absolute;display:flex;flex-direction:column;gap:3px;
  background:rgba(5,11,18,.78);border-left:2px solid var(--accent);
  padding:8px 12px 9px;min-width:clamp(120px,15vw,178px)}
.bp-lbl-tl{left:2.4%;top:12.6%}
.bp-lbl-tr{right:2.4%;top:20%;border-left:0;border-right:2px solid var(--accent);text-align:right;align-items:flex-end}
.bp-lbl-bl{left:2.4%;top:66.4%}
.bp-lbl-br{right:2.4%;top:63.6%;border-left:0;border-right:2px solid var(--accent);text-align:right;align-items:flex-end}
.bp-code{font-size:9px;letter-spacing:.24em;color:rgba(240,140,26,.72);font-weight:600}
.bp-name{font-size:clamp(12px,1.4vw,15px);font-weight:700;letter-spacing:-.01em;color:#fff}
.bp-spec{font-style:normal;font-size:10.5px;color:rgba(244,243,239,.58);letter-spacing:.01em}

/* 진행 HUD */
.bp-hud{position:absolute;left:16px;right:16px;bottom:14px;z-index:6;
  display:flex;align-items:center;gap:14px;pointer-events:none}
.bp-hud-lbl{font-size:9.5px;letter-spacing:.24em;color:var(--accent);font-weight:600;flex:0 0 auto}
.bp-hud-bar{flex:1 1 auto;height:2px;background:rgba(244,243,239,.2)}
.bp-hud-bar i{display:block;height:100%;width:0;background:var(--accent)}
.bp-hud-note{font-size:9.5px;letter-spacing:.24em;color:rgba(244,243,239,.44);flex:0 0 auto}

/* 데스크톱: 무대를 핀하고 여유 구간만큼 스크럽 */
@media(min-width:1024px){
  .bp-scrub{height:180vh}
}
.bp-legend{padding-top:clamp(46px,7vw,88px);padding-bottom:var(--pad)}
.bp-list{list-style:none;display:grid;gap:clamp(16px,2vw,24px)}
@media(min-width:720px){.bp-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.bp-list{grid-template-columns:repeat(4,1fr)}}
.bp-item{border-top:2px solid rgba(240,140,26,.3);padding-top:18px;transition:border-color .4s}
.bp-item span{display:block;font-size:9.5px;letter-spacing:.22em;color:rgba(240,140,26,.7);font-weight:600}
.bp-item b{display:block;font-weight:800;font-size:clamp(17px,2vw,22px);
  letter-spacing:-.025em;margin:9px 0 11px}
.bp-item p{font-size:13.5px;color:rgba(244,243,239,.62)}
.bp-item.is-on{border-top-color:var(--accent)}
.bp-item.is-on b{color:var(--accent)}
.bp-outro{margin-top:clamp(44px,6vw,80px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line-lt)}
.bp-outro-h{font-weight:800;font-size:clamp(24px,3.4vw,42px);line-height:1.08;
  letter-spacing:-.035em;margin-top:12px}
.bp-outro-sub{margin-top:14px;color:rgba(244,243,239,.6);font-size:14.5px;line-height:1.85;max-width:52ch}

/* ---------- ★ 아키타입 C — 가로 트랙 ---------- */
.hx-intro{background:var(--ink);color:var(--paper);padding:clamp(70px,10vw,124px) 0 clamp(50px,7vw,84px)}
.hx-intro-h{margin-top:18px;font-weight:800;font-size:clamp(23px,3.8vw,50px);
  line-height:1.16;letter-spacing:-.032em}
.hx-hand{display:block;margin-top:16px;font-weight:600;font-size:clamp(10.5px,1.3vw,12.5px);
  letter-spacing:.24em;color:rgba(244,243,239,.44)}
/* 방향 안내 문구 — 데스크톱(가로 트랙) / 모바일(세로 스택) 교체 */
.hx-dir-mo{display:none}
@media(max-width:1023px){
  .hx-dir-pc{display:none}
  .hx-dir-mo{display:inline}
  span.hx-dir-mo{display:block}
  .hx-arrow{transform:rotate(90deg);transform-origin:left center;margin-left:18px}
}
.hx-arrow{display:flex;gap:16px;margin-top:clamp(26px,4vw,42px)}
.hxa{font-family:var(--mono);font-size:clamp(28px,5vw,58px);line-height:1;color:var(--accent);opacity:.26}
.hx-arrow-down{justify-content:center;margin-top:0}
.hx-outro{background:var(--ink);padding:clamp(48px,7vw,84px) 0 clamp(30px,4vw,52px)}
.hx-outro-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.hx-outro .label{letter-spacing:.3em;color:rgba(244,243,239,.4)}

.hx{background:var(--ink);position:relative}
.hx-viewport{position:relative;overflow:hidden}
/* ⚠ 트랙 기본 글자색은 페이퍼. 안 주면 body 의 --ink(near-black)를 상속받아
   다크 패널에서 제목이 배경에 묻힌다(실측 확인된 버그). */
.hx-track{display:flex;align-items:stretch;will-change:transform;color:var(--paper)}

/* 패널 공통 — 세로 흐름(모바일) 기본값. 데스크톱 값은 아래 min-width:1024 에서 */
.hxp{flex:0 0 auto;position:relative;background:var(--ink);
  border-bottom:1px solid var(--line-lt)}
.hxp-inner{height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(60px,9vw,104px) clamp(22px,4vw,68px)}
.hxp-head{margin-bottom:clamp(28px,3.8vw,52px);flex:0 0 auto}
.hxp-h{font-weight:800;font-size:clamp(28px,4.4vw,62px);line-height:1.04;
  letter-spacing:-.04em;margin-top:15px}
.hxp-lead{margin-top:18px;color:rgba(244,243,239,.62);
  font-size:clamp(14px,1.5vw,17px);max-width:58ch;line-height:1.82}

/* ---- 패널 1: 진단 순서 ---- */
.hxp-flow{background:var(--ink)}
.flow-rail{list-style:none;display:flex;gap:clamp(16px,1.8vw,26px);align-items:stretch}
.fitem{flex:0 0 clamp(252px,23vw,326px);position:relative;
  border:1px solid var(--line-lt);background:var(--ink-2);
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column}
.fitem::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(240,140,26,.34)}
.fitem::after{content:"";position:absolute;right:-1px;top:26px;bottom:26px;width:1px;
  background:repeating-linear-gradient(180deg,rgba(240,140,26,.5) 0 5px,transparent 5px 11px)}
.fitem:last-child::after{display:none}
.fno{font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:600}
.fitem h3{font-weight:800;font-size:clamp(19px,2.2vw,26px);margin:12px 0 12px;letter-spacing:-.03em;line-height:1.14}
.fitem p{font-size:13.5px;color:rgba(244,243,239,.62)}
.fmeta{list-style:none;margin-top:auto;padding-top:20px;display:grid;gap:9px;
  border-top:1px solid var(--line-lt)}
.fmeta li{position:relative;padding-left:17px;font-size:12.5px;color:rgba(244,243,239,.72)}
.fmeta li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--accent)}

/* ---- 패널 2: 앰버 브리지 마퀴 ---- */
.hxp-bridge{background:var(--accent);display:flex;align-items:center;overflow:hidden}
.hx-bridge-inner{width:100%;overflow:hidden}
.mq-row{display:flex;align-items:center;gap:26px;white-space:nowrap;will-change:transform}
.mq-row span{font-weight:800;font-size:clamp(28px,4.2vw,62px);color:var(--deep-dk);letter-spacing:-.035em}
.mq-row b{color:rgba(12,27,43,.4);font-size:clamp(14px,2vw,28px)}

/* ---- 패널 3: 공임표 (밝은 패널 — 리듬 반전) ---- */
.hxp-rate{background:var(--paper);color:var(--ink)}
.hxp-rate .label{color:var(--accent-dk)}
.hxp-rate .hxp-lead{color:var(--ink-72)}
.rate-wrap{width:100%;overflow-x:auto}
.rate{width:100%;min-width:min(620px,84vw)}
.rate thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  color:var(--ink-52);font-weight:600;text-align:left;padding:0 14px 14px 0;
  border-bottom:2px solid var(--ink)}
.rate thead th:nth-child(3){text-align:right;padding-right:0}
.rate-row td{padding:clamp(13px,1.5vw,19px) 14px clamp(13px,1.5vw,19px) 0;
  border-bottom:1px solid var(--line);vertical-align:baseline}
.rt-name{font-weight:700;font-size:clamp(14.5px,1.7vw,18px);letter-spacing:-.02em}
.rt-fee{font-size:clamp(16px,2vw,25px);font-weight:600;letter-spacing:-.02em;
  width:1%;white-space:nowrap;color:var(--accent-dk)}
.rt-note{font-size:12.5px;color:var(--ink-52);text-align:right;padding-right:0}
.rt-tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  background:var(--deep);color:var(--accent);padding:3px 7px;margin-left:8px;
  vertical-align:middle;font-weight:600}
/* 강조 행 — 앰버 틴트 위에서 금액 대비를 확보하려면 더 어두운 앰버가 필요하다 */
.rate-row.is-key{background:rgba(240,140,26,.11)}
.rate-row.is-key .rt-fee{color:#6E3B02}
.rate-note{margin-top:22px;font-size:10.5px;letter-spacing:.04em;color:var(--ink-52)}

/* ---- 패널 4: 보유 장비 ---- */
.hxp-rig{background:var(--deep-dk)}
.rig-rail{display:flex;gap:clamp(16px,1.8vw,26px);align-items:stretch}
.ritem{flex:0 0 clamp(250px,23vw,330px);border:1px solid var(--line-lt);
  display:flex;flex-direction:column;background:var(--ink-2)}
.ritem figure{overflow:hidden;border-bottom:1px solid var(--line-lt)}
.ritem figure img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.ritem:hover figure img{transform:scale(1.06)}
.rbody{padding:clamp(19px,2.1vw,27px);display:flex;flex-direction:column;flex:1}
.rno{font-size:10px;letter-spacing:.22em;color:var(--accent);font-weight:600}
.ritem h3{font-weight:800;font-size:clamp(18px,2.1vw,25px);margin:11px 0 12px;
  letter-spacing:-.03em;line-height:1.1}
.ritem p{font-size:13.5px;color:rgba(244,243,239,.62)}
.rmeta{list-style:none;margin-top:auto;padding-top:18px;display:grid;gap:8px;
  border-top:1px solid var(--line-lt)}
.rmeta li{position:relative;padding-left:17px;font-size:12.5px;color:rgba(244,243,239,.7)}
.rmeta li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--accent)}

/* ---- 패널 5: 부품 원칙 ---- */
.hxp-part{background:var(--deep)}
.part-grid{display:grid;gap:clamp(24px,3vw,48px);align-items:center}
@media(min-width:820px){.part-grid{grid-template-columns:5fr 6fr}}
.part-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dwg-cap{display:flex;justify-content:space-between;gap:12px;margin-top:11px;
  font-size:9.5px;color:rgba(244,243,239,.44);border-top:1px solid var(--line-lt);
  padding-top:10px;letter-spacing:.2em}
.part-list{list-style:none;display:grid;gap:clamp(18px,2.2vw,28px)}
.part-list li{border-left:2px solid rgba(240,140,26,.42);padding-left:clamp(16px,2vw,22px)}
.part-list b{display:block;font-weight:800;font-size:clamp(17px,2vw,23px);
  letter-spacing:-.028em;margin-bottom:9px}
.part-list p{font-size:13.5px;color:rgba(244,243,239,.66)}

/* ---- 가로 HUD ---- */
.hx-hud{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(18px,3vh,32px);
  z-index:12;display:flex;align-items:center;gap:16px;pointer-events:none;opacity:0}
.hx-viewport.is-live .hx-hud{opacity:1;transition:opacity .4s}
.hx-hud-lbl{font-size:10px;letter-spacing:.28em;color:var(--accent);font-weight:600;
  flex:0 0 auto;min-width:116px}
.hx-hud-bar{flex:1 1 auto;height:2px;background:rgba(244,243,239,.22)}
.hx-hud-bar span{display:block;height:100%;width:0;background:var(--accent)}
.hx-hud-drag{font-size:9.5px;letter-spacing:.26em;color:rgba(244,243,239,.5);flex:0 0 auto}
/* 밝은 패널·앰버 패널 위에서 HUD가 묻힌다 → 다크 알약 */
.hx-hud::before{content:"";position:absolute;inset:-10px -14px;
  background:rgba(6,12,20,.62);z-index:-1;border-radius:2px}
/* 드래그 커서 (데스크톱 가로 모드에서만 JS가 is-grab 부여) */
.hx-viewport.is-grab .hx-track{cursor:grab}
.hx-viewport.is-grab .hx-track:active{cursor:grabbing}

/* ---------- 04 선언 — 페이지 최대 타이포(정확히 1곳) ---------- */
.decl{background:var(--paper);padding:var(--pad) 0;position:relative;overflow:hidden}
.decl::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(rgba(22,48,76,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,48,76,.07) 1px,transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(86% 60% at 34% 24%,#000,transparent 78%);
  mask-image:radial-gradient(86% 60% at 34% 24%,#000,transparent 78%)}
.decl > *{position:relative;z-index:1}
.decl-h{font-weight:800;font-size:clamp(38px,9.5vw,140px);line-height:.94;
  letter-spacing:-.05em;margin-top:18px}
.decl-sub{margin-top:clamp(26px,3.4vw,44px);max-width:56ch;
  font-size:clamp(15px,1.8vw,18.5px);color:var(--ink-72);line-height:1.88}
.pain-list{list-style:none;display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(48px,6.4vw,88px)}
@media(min-width:640px){.pain-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.pain-list{grid-template-columns:repeat(4,1fr)}}
.pain{background:#fff;border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;position:relative}
.pain::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}
.pain-no{font-size:10px;letter-spacing:.22em;color:var(--accent-dk);font-weight:600;font-family:var(--mono)}
.pain h3{font-weight:800;font-size:clamp(16.5px,1.9vw,20px);line-height:1.36;
  margin:13px 0 13px;letter-spacing:-.028em}
.pain p{font-size:13.5px;color:var(--ink-72);margin-top:auto}

/* ---------- 05 기록 스트립(컴팩트 — 리듬용) ---------- */
.log{background:var(--deep);color:var(--paper);padding:clamp(56px,7vw,96px) 0}
.log-row{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(24px,3vw,38px)}
@media(min-width:560px){.log-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.log-row{grid-template-columns:repeat(4,1fr)}}
.log-cell{border-top:2px solid rgba(240,140,26,.56);padding-top:18px}
.log-fig{display:block;font-size:clamp(22px,3vw,38px);font-weight:700;line-height:1.08;
  letter-spacing:-.035em;color:var(--accent)}
.log-cell p{font-size:13px;color:rgba(244,243,239,.68);margin-top:14px}

/* ---------- 06 예약 흐름 + FAQ ---------- */
.book{background:var(--paper-2);padding:var(--pad) 0}
.book-h{font-weight:800;font-size:clamp(30px,5vw,72px);line-height:1.04;
  letter-spacing:-.04em;margin:16px 0 24px}
.book-steps{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);margin:clamp(40px,5vw,70px) 0 clamp(52px,7vw,96px)}
@media(min-width:640px){.book-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.book-steps{grid-template-columns:repeat(4,1fr)}}
.bstep{background:#fff;padding:clamp(20px,2.4vw,30px);position:relative}
.bstep span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--accent-dk);font-weight:600}
.bstep b{display:block;font-weight:800;font-size:clamp(17px,2vw,22px);
  letter-spacing:-.028em;margin:11px 0 10px}
.bstep p{font-size:13px;color:var(--ink-72)}

.acc{border-top:1px solid var(--line-dk)}
.qa{border-bottom:1px solid var(--line-dk)}
.qa summary{list-style:none;cursor:pointer;padding:clamp(20px,2.4vw,27px) 46px clamp(20px,2.4vw,27px) 0;
  position:relative;font-size:clamp(14.5px,1.8vw,18px);font-weight:700;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:2px;
  background:var(--accent-dk);transform:translateY(-50%)}
.qa summary::before{content:"";position:absolute;right:14px;top:50%;width:2px;height:14px;
  background:var(--accent-dk);transform:translateY(-50%);transition:transform .3s}
.qa[open] summary::before{transform:translateY(-50%) scaleY(0)}
.qa summary:hover{color:var(--accent-dk)}
.qa-body{padding:0 0 clamp(22px,2.6vw,30px)}
.qa-body p{font-size:14px;color:var(--ink-72);max-width:66ch}

.reserve{margin-top:clamp(56px,7vw,100px);background:var(--deep-dk);color:var(--paper);
  padding:clamp(30px,4.2vw,62px);border-left:3px solid var(--accent)}
.reserve-h{font-weight:800;font-size:clamp(25px,3.4vw,46px);line-height:1.1;letter-spacing:-.038em}
.reserve .sec-lead{color:rgba(244,243,239,.68);margin-top:18px}
.quote-card{display:grid;gap:1px;background:rgba(244,243,239,.14);
  border:1.5px dashed rgba(244,243,239,.32);margin:clamp(26px,3.4vw,42px) 0 0;overflow:hidden}
@media(min-width:560px){.quote-card{grid-template-columns:1fr 1fr}}
.quote-card>div{background:var(--deep-dk);padding:16px 20px;display:flex;
  justify-content:space-between;gap:12px;font-size:14px}
.quote-card dt{color:rgba(244,243,239,.66)}
.quote-card dd{font-weight:700;letter-spacing:.02em;color:var(--accent)}
.reserve-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}

/* ---------- 07 방문 안내 ---------- */
.visit{background:var(--paper);padding:var(--pad) 0}
.visit-grid{display:grid;gap:clamp(28px,4vw,60px);align-items:center}
@media(min-width:900px){.visit-grid{grid-template-columns:6fr 5fr}}
.visit-fig{overflow:hidden}
.visit-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;will-change:transform}
.visit-fig .dwg-cap{color:var(--ink-52);border-top-color:var(--line)}
.visit-body .sub-h{margin:13px 0 20px}
.visit-body address{font-style:normal;color:var(--ink-72);font-size:14.5px;line-height:1.95}
.visit-list{list-style:none;margin:24px 0 28px;display:grid;gap:11px}
.visit-list li{position:relative;padding-left:18px;font-size:13.5px;color:var(--ink-72)}
.visit-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--accent)}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--ink);color:rgba(244,243,239,.68);
  padding:clamp(56px,7vw,90px) 0 120px;border-top:1px solid rgba(240,140,26,.2)}
.foot-inner{display:grid;gap:30px}
@media(min-width:900px){.foot-inner{grid-template-columns:1fr 1fr;align-items:start}}
.foot-brand .logo-txt{color:var(--paper);font-size:21px}
.foot-brand .mono{font-size:9.5px;letter-spacing:.24em;color:rgba(240,140,26,.5);margin-top:9px}
.foot-info p{font-size:13px;line-height:1.95}
.foot-note{grid-column:1/-1;border-top:1px solid rgba(244,243,239,.12);padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(244,243,239,.46);line-height:1.8}
.demo-badge{display:inline-block;border:1px solid var(--accent);color:var(--accent) !important;
  padding:9px 16px;font-size:12.5px !important}
.demo-badge b{color:#fff}
.made-by{letter-spacing:.2em;font-size:9.5px !important;color:rgba(244,243,239,.3) !important}

/* ---------- 모바일 고정 CTA ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;
    left:0;right:0;bottom:0;z-index:95;background:rgba(18,22,28,.2)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:700}
  .mb-call{background:var(--accent);color:var(--ink)}
  .mb-kakao{background:#FEE500;color:#191600}
  .site-foot{padding-bottom:132px}
  .head-inner{height:62px}
}

/* 애니메이션 초기 상태 — ⚠ 반드시 html.js-anim 하위에만.
   GSAP 실패 시 js-anim 제거만으로 콘텐츠 전부 복구된다(staticFallback) */
html.js-anim .fade-up{opacity:0}
html.js-anim .fitem{opacity:0}
html.js-anim .ritem{opacity:0}
html.js-anim .rate-row{opacity:0}
html.js-anim .part-list li{opacity:0}
html.js-anim .pain{opacity:0}
html.js-anim .bstep{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .log-cell{opacity:0}
html.js-anim .visit-list li{opacity:0}
html.js-anim .quote-card>div{opacity:0}
html.js-anim .bp-item{opacity:0}
/* 치수선·라벨 초기 숨김 (DrawSVG 대상) */
html.js-anim .bp-lead,html.js-anim .bp-dim,html.js-anim .bp-tick,
html.js-anim .bp-node,html.js-anim .bp-frame-line{visibility:hidden}
html.js-anim .bp-lbl{opacity:0}

@media(max-width:1023px){html{scroll-behavior:smooth}}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hxp-rate :focus-visible,.decl :focus-visible,.book :focus-visible,
.visit :focus-visible{outline-color:var(--deep)}

/* ★ 데스크톱(≥1024px) — 가로 트랙 활성 치수. 밖에서는 세로로 쌓인다 */
@media(min-width:1024px){
  .hx-track{align-items:stretch}
  .hxp{height:100svh;border-bottom:0;border-right:1px solid var(--line-lt)}
  .hxp-flow{width:min(1520px,168vw)}
  .hxp-bridge{width:min(760px,72vw)}
  .hxp-rate{width:min(1080px,104vw)}
  .hxp-rig{width:min(1500px,166vw)}
  .hxp-part{width:min(1120px,108vw)}
  .hxp-inner{padding:calc(var(--head-h) + clamp(40px,5vw,80px)) clamp(34px,4vw,72px) clamp(70px,8vh,110px)}
  .rate-wrap{overflow:visible}
  /* ⚠ 내용이 100svh 를 넘는 패널(공임표)은 center 정렬 시 헤드라인이
     고정 헤더 위로 잘려 올라간다 → 위 정렬로 고정한다. */
  .hxp-rate .hxp-inner,.hxp-flow .hxp-inner{justify-content:flex-start}
  .hxp-rate .hxp-head{margin-bottom:clamp(16px,2vw,28px)}
  .hxp-rate .hxp-lead{margin-top:12px}
  .hxp-rate .rt-fee{font-size:clamp(15px,1.6vw,20px)}
  /* 세로 여유가 적은 화면(≤900px 높이)에서 표가 넘치지 않게 행 높이를 줄인다 */
  .hxp-rate .rate-row td{padding-top:clamp(8px,1vh,15px);padding-bottom:clamp(8px,1vh,15px)}
  .hxp-rate .rt-name{font-size:clamp(13.5px,1.5vw,17px)}
  .hxp-rate .rate-note{margin-top:14px}
  /* 장비 패널도 짧은 화면에서 카드가 넘친다 → 이미지 비율을 낮춘다 */
  .hxp-rig .ritem figure img{aspect-ratio:16/10}
}
/* 세로가 짧은 데스크톱(≤860px)에서 패널 내용이 100svh 를 넘지 않게 압축 */
@media(min-width:1024px) and (max-height:860px){
  .hxp-inner{padding-top:calc(var(--head-h) + 28px);padding-bottom:56px}
  .hxp-h{font-size:clamp(26px,3.4vw,42px)}
  .hxp-head{margin-bottom:20px}
  .hxp-lead{margin-top:12px}
  .hxp-rig .ritem figure img{aspect-ratio:2/1}
  .hxp-rate .rate-row td{padding-top:7px;padding-bottom:7px}
}

/* 모바일·태블릿(≤1023px) — ⚠ 함정 3: 핀 해제 + 가로 스트립을 CSS로 살린다.
   트랙은 세로로 쌓이고, 패널 안 레일만 네이티브 overflow-x 로 민다. */
@media(max-width:1023px){
  .hx-viewport{overflow:visible}
  .hx-track{display:block;transform:none !important}
  .hxp{width:auto;height:auto}
  .hx-hud{display:none}

  /* 레일: 손으로 밀 수 있는 네이티브 가로 스크롤 */
  .flow-rail,.rig-rail{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    padding-bottom:16px;margin-right:calc(var(--gut) * -1);padding-right:var(--gut);
  }
  .flow-rail > *,.rig-rail > *{scroll-snap-align:start}
  .flow-rail::-webkit-scrollbar,.rig-rail::-webkit-scrollbar{height:3px}
  .flow-rail::-webkit-scrollbar-thumb,.rig-rail::-webkit-scrollbar-thumb{background:rgba(240,140,26,.5)}
  .flow-rail::-webkit-scrollbar-track,.rig-rail::-webkit-scrollbar-track{background:rgba(244,243,239,.12)}
  .fitem::after{display:none}

  .hxp-bridge{padding:clamp(30px,6vw,50px) 0}

  /* 시그니처: 핀 없음 → 무대를 흐름 안에 두고 라벨을 사진 아래로 내린다 */
  .bp-scrub{height:0}
  .bp-frame{aspect-ratio:1/1}
  .bp-lbl{min-width:0;padding:6px 9px 7px}
  .bp-lbl-tl{left:2%;top:6%}
  .bp-lbl-tr{right:2%;top:6%}
  .bp-lbl-bl{left:2%;bottom:9%;top:auto}
  .bp-lbl-br{right:2%;bottom:9%;top:auto}
  .bp-hud{left:10px;right:10px;bottom:auto;top:10px}
}
@media(max-width:560px){
  /* 좁은 화면에서 라벨이 사진을 다 덮는다 → 치수선만 남기고 라벨은 목록으로 대체 */
  .bp-labels{display:none}
  .bp-frame{aspect-ratio:4/5}
}

/* reduced-motion — 모션 제거, 콘텐츠는 최종 상태로 즉시 표시 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js-anim .fade-up,html.js-anim .fitem,html.js-anim .ritem,html.js-anim .rate-row,
  html.js-anim .part-list li,html.js-anim .pain,html.js-anim .bstep,html.js-anim .qa,
  html.js-anim .log-cell,html.js-anim .visit-list li,html.js-anim .quote-card>div,
  html.js-anim .bp-item{opacity:1 !important}
  html.js-anim .bp-lead,html.js-anim .bp-dim,html.js-anim .bp-tick,
  html.js-anim .bp-node,html.js-anim .bp-frame-line{visibility:visible}
  html.js-anim .bp-lbl{opacity:1}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}
  /* 가로 트랙을 세로로 되돌린다 */
  .hx-viewport{overflow:visible}
  .hx-track{display:block;transform:none !important}
  .hxp{width:auto !important;height:auto}
  .hx-hud{display:none}
  .flow-rail,.rig-rail{overflow-x:auto}
  .bp-scrub{height:0}
}