@charset "utf-8";
/* ==========================================================================
   정산세무회계 — P1 차트 에디토리얼 / 액센트 변주: 딥 버건디 #5C2430
   명세서: AIPM v2.5 / 프리셋 P1 / 히어로 A안
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일에서만
   ⚠ 미소본(딥 파인)과 레이아웃·시그니처 차별화: 가로 타임라인 / 비대칭 2열 선언부
   ========================================================================== */

:root{
  --porcelain:#FAF8F4;
  --surface:#F2EFE9;
  --ink:#17201D;
  --accent:#5C2430;          /* 딥 버건디 */
  --accent-lt:#B98793;       /* 다크 배경용 밝은 버건디 */
  --accent-dk:#481B25;
  --night:#1A1215;           /* 버건디 계열 딥 나이트 */

  --ink-70:rgba(23,32,29,.70);
  --ink-50:rgba(23,32,29,.50);
  --line:rgba(23,32,29,.13);

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

  --wrap:1280px;
  --gut:clamp(20px,4vw,48px);
}

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

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:840px}
.mono{font-family:var(--mono)}
.pc-br{display:none}
@media(min-width:768px){.pc-br{display:inline}}

/* 사진 톤 통일 — 명세서 §03 (버건디 multiply 오버레이는 ::after로) */
.hero-media img,.svc-fig img,.office-media img,.place-fig img,.miss-fig img{
  filter:saturate(.72) contrast(1.03) sepia(.06);
}
.svc-fig,.place-fig,.miss-fig,.office-media{position:relative}
.svc-fig::after,.place-fig::after,.miss-fig::after,.office-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--accent);opacity:.12;mix-blend-mode:multiply;
}

/* 자리표시자 표기 */
.ph{color:var(--accent);font-family:var(--mono);font-size:.86em;letter-spacing:.04em}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:200;background:var(--night);display:grid;place-items:center}
.curtain-inner{text-align:center}
.curtain-rule{width:min(240px,52vw);height:26px;display:block;margin:0 auto 14px}
.curtain-txt{font-size:10px;letter-spacing:.42em;color:var(--accent-lt);opacity:0;padding-left:.42em}
html.loaded .curtain{pointer-events:none}

/* ---------- 타이포 ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,8.2vw,118px);line-height:1.06;letter-spacing:-.035em;
}
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,5vw,64px);line-height:1.18;letter-spacing:-.03em;
}
.label{font-size:10.5px;letter-spacing:.34em;color:var(--accent);font-weight:500}
em{font-style:normal;color:var(--accent);font-weight:500}
.sec-lead{margin-top:18px;color:var(--ink-70);font-size:clamp(14.5px,1.6vw,17px);max-width:60ch}
.sec-lead.note{font-size:12.5px;color:var(--ink-50);line-height:1.8}
.sec-lead.note b{color:var(--accent)}

.sec{padding:clamp(90px,13vw,190px) 0}
.sec-head{margin-bottom:clamp(40px,6vw,80px)}
.sec-head .h2{margin-top:14px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:3px;font-size:14.5px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s;will-change:transform;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-line{border:1px solid rgba(255,255,255,.4);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.place-body .btn-line{border-color:var(--line);color:var(--ink)}
.place-body .btn-line:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-kakao{background:#FEE500;color:#191600}
.btn-kakao:hover{background:#EDD600}
.btn-mini{padding:10px 18px;font-size:13px;background:var(--accent);color:#fff;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(250,248,244,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.4) blur(10px);
}
.head-inner{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:9px;color:#fff;transition:color .4s}
.site-head.is-stuck .logo{color:var(--ink)}
.logo-mark{color:var(--accent-lt);display:flex;transition:color .4s}
.site-head.is-stuck .logo-mark{color:var(--accent)}
.logo-txt{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:-.01em}
.gnb{display:none;gap:30px;margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.82);transition:color .4s}
.site-head.is-stuck .gnb{color:var(--ink-70)}
@media(min-width:900px){.gnb{display:flex}}
.gnb a{position:relative;padding:4px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s}
.gnb a:hover::after{right:0}
@media(max-width:899px){.btn-mini{margin-left:auto}}

/* ---------- 01 히어로 ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(40px,7vw,90px);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* 2중 그라데이션 스크림 — 좌하단 텍스트 대비 확보 */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(20,12,14,.80) 0%,rgba(20,12,14,.52) 34%,rgba(20,12,14,.06) 66%,rgba(20,12,14,.24) 100%),
    linear-gradient(180deg,rgba(20,12,14,.42) 0%,rgba(20,12,14,.04) 42%,rgba(20,12,14,.72) 100%);
}
.hero-inner{position:relative;z-index:2;color:#fff;width:100%;padding-bottom:clamp(24px,4vw,44px)}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.28em;color:var(--accent-lt);margin-bottom:26px}
.eyebrow .rule{display:block;width:52px;height:1px;background:var(--accent-lt)}
.hero-h1{color:#fff;max-width:15ch;text-shadow:0 2px 40px rgba(20,12,14,.4)}
.hero-lead{margin-top:clamp(16px,2.2vh,26px);font-size:clamp(15px,1.9vw,19px);
  color:rgba(255,255,255,.87);max-width:54ch;line-height:1.75}
.hero-lead em{color:var(--accent-lt)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(22px,3.2vh,38px)}
.hero-trust{margin-top:clamp(14px,2vh,24px);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.52)}
.hero-trust span{color:var(--accent-lt)}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;
  align-items:center;color:rgba(255,255,255,.55);font-size:10.5px;letter-spacing:.2em;
  border-top:1px solid rgba(255,255,255,.18);padding-top:16px;width:100%}
.hero-scroll{display:flex;align-items:center;gap:10px}
.hero-scroll i{display:block;width:34px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent-lt);
  animation:sweep 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- 02 공감 — 비대칭 2열 (미소본은 중앙 정렬 단일 컬럼) ---------- */
.statement{padding:clamp(100px,15vw,220px) 0 clamp(80px,12vw,180px);background:var(--porcelain)}
.statement-grid{display:grid;gap:clamp(36px,5vw,72px)}
@media(min-width:1000px){.statement-grid{grid-template-columns:7fr 5fr;align-items:end}}
.st-label{display:block;margin-bottom:clamp(26px,4vw,50px)}
.statement-h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,9.5vw,140px);line-height:1.0;letter-spacing:-.045em;
}
.st-line{display:block}
.st-line:last-child{color:var(--accent)}
.statement-lead{font-size:clamp(15px,1.7vw,18px);color:var(--ink-70);line-height:1.85;
  padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--line)}
.pain-list{list-style:none;margin-top:clamp(24px,3vw,34px);display:grid;gap:14px}
.pain-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  font-size:14.5px;color:var(--ink-70)}
.pain-list span{font-size:10.5px;letter-spacing:.16em;color:var(--accent)}


/* ==========================================================================
   03 ★ 시그니처 — 아키타입 C: 가로 스크롤 주도형
   페이지 중반을 핀 + containerAnimation 가로 트랙으로 처리한다.
   세로 스크롤이 가로 이동을 만든다.
   ⚠ 모바일(<=1023px)에서는 핀을 해제하고 overflow-x:auto 로 바꿔
     손으로 밀 수 있게 한다 (함정 8 — 세로 스크롤을 절대 막지 않는다)
   ========================================================================== */
.track{background:var(--night);color:var(--porcelain);position:relative}
.track-stage{position:relative;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(84px,10vw,120px) 0 clamp(40px,5vw,64px)}
/* 다층 radial-gradient (대형 blur 애니메이션 금지 대체) */
.track-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 52% at 22% 26%,rgba(92,36,48,.34) 0%,transparent 64%),
    radial-gradient(56% 48% at 82% 76%,rgba(92,36,48,.20) 0%,transparent 62%);
}

/* ---- 트랙 상단 헤더 (캘린더 라인 시그니처가 여기 산다) ---- */
.track-head{position:relative;z-index:3;flex:0 0 auto}
.track-head-inner{display:grid;gap:clamp(18px,2.4vw,30px)}
@media(min-width:1024px){
  .track-head-inner{grid-template-columns:minmax(200px,1fr) minmax(0,2.1fr) minmax(180px,.9fr);
    align-items:end;gap:clamp(20px,2.6vw,40px)}
}
.track .label{color:var(--accent-lt)}
.track-title{font-family:var(--serif);font-weight:300;margin-top:14px;
  font-size:clamp(28px,4.4vw,54px);line-height:1.08;letter-spacing:-.035em}

/* 가로 타임라인 (DrawSVG 시그니처 유지) */
.tl-wrap{position:relative}
.tl{width:100%;height:clamp(64px,7.4vw,104px);display:block;overflow:visible}
.tl-months{list-style:none;position:relative;height:34px;margin-top:-4px}
.tl-month{position:absolute;left:var(--x);transform:translateX(-50%);text-align:center;white-space:nowrap;
  transition:opacity .4s}
.tl-month b{display:block;font-size:11px;letter-spacing:.2em;color:var(--accent-lt);font-weight:500}
.tl-month span{display:block;margin-top:3px;font-size:11.5px;color:rgba(250,248,244,.5)}
.tl-month.is-on b{color:#fff}
.tl-month.is-on span{color:rgba(250,248,244,.85)}

/* ★ MotionPath — 서류가 곡선 경로를 따라 이동한다 */
.doc-mover{
  position:absolute;left:0;top:0;z-index:4;
  display:grid;place-items:center;width:30px;height:30px;border-radius:2px;
  background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.45);
  pointer-events:none;opacity:0;
}

/* 진행 게이지 */
.track-gauge{display:grid;gap:10px;align-content:end}
.tg-bar{height:1px;background:rgba(250,248,244,.18);overflow:hidden}
.tg-bar span{display:block;height:100%;width:0;background:var(--accent-lt)}
.tg-idx{display:flex;align-items:baseline;gap:6px;font-size:11px;letter-spacing:.12em;
  color:rgba(250,248,244,.5)}
.tg-idx b{font-size:22px;font-weight:500;color:var(--accent-lt);letter-spacing:-.02em}
.tg-idx i{font-style:normal}
.track-hint{font-size:9.5px;letter-spacing:.26em;color:rgba(250,248,244,.42)}

/* ---- 가로 레일 ---- */
.track-viewport{position:relative;z-index:2;overflow:hidden;
  margin-top:clamp(26px,3.4vw,46px);cursor:grab}
.track-viewport.is-drag{cursor:grabbing}
/* align-items:start 로 두어 패널이 뷰포트 높이만큼 늘어나지 않게 한다.
   (stretch 로 두면 margin-top:auto 인 하단 블록이 아래로 밀려 큰 빈 공간이 생긴다) */
.track-rail{display:flex;gap:clamp(16px,2vw,26px);align-items:start;
  width:max-content;padding-left:var(--gut);will-change:transform}

/* 패널 공통 */
.panel{
  flex:0 0 clamp(258px,80vw,360px);display:flex;flex-direction:column;
  background:rgba(250,248,244,.045);border:1px solid rgba(185,135,147,.22);
  border-radius:3px;padding:clamp(20px,2.4vw,30px);
}
@media(min-width:1024px){.panel{flex:0 0 clamp(340px,26vw,410px)}}
.panel.is-on{border-color:rgba(185,135,147,.55);background:rgba(250,248,244,.075)}
.panel h3,.pn-h{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:1.3}
.panel h3{font-size:clamp(18px,2.1vw,23px);margin-bottom:10px}
.pn-h{font-size:clamp(20px,2.5vw,28px);margin:14px 0 12px}
.pn-desc{font-size:13.5px;color:rgba(250,248,244,.62);line-height:1.75}
.pn-note{margin-top:auto;padding-top:18px;font-size:10.5px;letter-spacing:.04em;
  color:rgba(250,248,244,.38);line-height:1.7}
.pn-warn{margin-top:auto;padding-top:18px;border-top:1px solid rgba(185,135,147,.2);
  font-size:11.5px;color:rgba(250,248,244,.5);line-height:1.75}

/* 신고 시점 패널 */
.pn-when{display:flex;align-items:baseline;gap:5px;color:var(--accent-lt);margin-bottom:14px}
.pn-when b{font-size:26px;font-weight:500;color:#fff;letter-spacing:-.02em}
.pn-when span{font-size:11px;letter-spacing:.14em}
/* ★ ScrambleText 대상 — 마감일 */
.pn-due{margin-top:14px;font-size:11.5px;letter-spacing:.08em;color:rgba(250,248,244,.55)}
.pn-due b{color:var(--accent-lt);font-weight:500;font-size:14px}
.pn-docs{margin-top:auto;padding-top:16px;border-top:1px solid rgba(185,135,147,.2)}
.pn-docs-t{font-size:9.5px;letter-spacing:.26em;color:var(--accent-lt);margin-bottom:9px}
.pn-docs ul{list-style:none;display:grid;gap:6px}
.pn-docs li{position:relative;padding-left:13px;font-size:12.5px;color:rgba(250,248,244,.52);line-height:1.6}
.pn-docs li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--accent-lt)}

/* ★ Flip — 업무 범위 카드가 그리드 ↔ 상세로 전환된다 */
.svc-flip{display:grid;gap:8px;margin-top:16px}
.svc-card{
  text-align:left;display:grid;gap:6px;cursor:pointer;
  background:rgba(250,248,244,.05);border:1px solid rgba(185,135,147,.22);
  border-radius:2px;padding:12px 14px;transition:border-color .3s,background .3s;
}
.svc-card:hover{border-color:rgba(185,135,147,.5);background:rgba(250,248,244,.09)}
.svc-card .svc-no{font-size:9.5px;letter-spacing:.24em;color:var(--accent-lt)}
.svc-card .svc-t{font-family:var(--serif);font-size:15px;color:var(--porcelain);letter-spacing:-.02em}
/* 상세는 열린 카드에만 보인다 — Flip이 이 레이아웃 변화를 애니메이션한다 */
.svc-card .svc-d{display:none;font-size:12.5px;color:rgba(250,248,244,.6);line-height:1.7;margin-top:4px}
.svc-card.is-open{background:rgba(185,135,147,.14);border-color:rgba(185,135,147,.6)}
.svc-card.is-open .svc-d{display:block}

/* 진행 방식 패널 */
.step-list{list-style:none;display:grid;gap:14px;margin-top:6px}
.step-list li{display:grid;gap:3px;padding-bottom:14px;border-bottom:1px solid rgba(185,135,147,.18)}
.step-list li:last-child{border-bottom:0;padding-bottom:0}
.step-no{font-size:9.5px;letter-spacing:.26em;color:var(--accent-lt)}
.step-list b{font-family:var(--serif);font-weight:500;font-size:15.5px;letter-spacing:-.02em}
.step-list span:last-child{font-size:12.5px;color:rgba(250,248,244,.56);line-height:1.65}

/* 요금 패널 */
.fee-list{display:grid;gap:1px;background:rgba(185,135,147,.2);margin:16px 0;
  border:1px solid rgba(185,135,147,.2)}
.fee-list>div{background:#1E1519;padding:11px 14px;display:flex;justify-content:space-between;
  gap:10px;font-size:13px}
.fee-list dt{color:rgba(250,248,244,.6)}
.fee-list dd{font-weight:600;letter-spacing:.02em}
.track .ph{color:var(--accent-lt)}

/* 마무리 패널 */
.p-end .btn{margin-top:18px;align-self:start}

/* 모바일·태블릿: 핀 해제 → 손으로 미는 가로 스크롤 (세로 스크롤은 살아 있다) */
@media(max-width:1023px){
  .track-stage{min-height:0;padding:clamp(76px,10vw,110px) 0 clamp(40px,6vw,60px)}
  .track-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x pan-y}
  .track-viewport::-webkit-scrollbar{display:none}
  .track-rail{padding-right:var(--gut)}
  .panel{scroll-snap-align:start}
  .tl{height:56px}
  .tl-months{height:30px}
  .tl-month b{font-size:10px}
  .tl-month span{font-size:10.5px}
}
/* ---------- 06 사무실 풀블리드 ---------- */
.office{position:relative;height:clamp(400px,66vh,700px);overflow:hidden;display:flex;align-items:flex-end}
.office-media{position:absolute;inset:-12% 0;z-index:0}
.office-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.office::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,18,21,.18),rgba(26,18,21,.82))}
.office-cap{position:relative;z-index:2;color:#fff;padding-bottom:clamp(36px,6vw,80px);width:100%}
.office-cap .label{color:var(--accent-lt)}
.office-cap .h2{margin-top:14px;color:#fff}

/* ---------- 07 자주 놓치는 것 (액센트 챕터) ---------- */
.miss{background:var(--accent);color:#fff;padding:clamp(80px,12vw,170px) 0}
.miss .label{color:rgba(255,255,255,.62)}
.miss .h2{margin-top:14px;color:#fff}
.miss .sec-lead{color:rgba(255,255,255,.74)}
.miss-grid{display:grid;gap:clamp(30px,4.4vw,64px);align-items:center}
@media(min-width:960px){.miss-grid{grid-template-columns:7fr 5fr}}
.miss-list{list-style:none;margin:clamp(28px,3.6vw,42px) 0 24px;display:grid;gap:16px}
.miss-list li{position:relative;padding-left:22px;font-size:14px;color:rgba(255,255,255,.76);line-height:1.75}
.miss-list li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1px;background:rgba(255,255,255,.6)}
.miss-list b{color:#fff;font-weight:600}
.miss-warn{font-size:12px;color:rgba(255,255,255,.56);line-height:1.8;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.22);max-width:64ch}
.miss-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px}
.miss-fig .chart-cap{color:rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.24)}

/* ---------- 08 후기 ---------- */
.voices{padding:clamp(90px,13vw,190px) 0;background:var(--surface)}
.voice-grid{display:grid;gap:clamp(24px,3vw,40px)}
@media(min-width:860px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.voice{border-top:1px solid var(--line);padding-top:24px}
.voice p{font-family:var(--serif);font-size:clamp(15.5px,1.9vw,19px);line-height:1.78;font-weight:300;letter-spacing:-.015em}
.voice cite{display:block;margin-top:20px;font-size:11px;color:var(--ink-50);font-style:normal;letter-spacing:.14em}

/* ---------- 09 FAQ ---------- */
.faq{background:var(--porcelain)}
.acc{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-size:clamp(15px,1.8vw,18px);font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa-body{padding:0 0 28px}
.qa-body p{font-size:14.5px;color:var(--ink-70);max-width:66ch}
.qa-body b{color:var(--accent);font-weight:600}

/* ---------- 10 상담 CTA ---------- */
.contact{background:var(--night);color:var(--porcelain);padding:clamp(90px,13vw,190px) 0;text-align:center;
  position:relative;overflow:hidden}
/* 사무실 전경을 어둡게 깔아 CTA 구간에 깊이를 준다 (패럴랙스 대상) */
.contact-media{position:absolute;inset:-10% 0;z-index:0}
.contact-media img{width:100%;height:100%;object-fit:cover;opacity:.20;
  filter:saturate(.72) contrast(1.03) sepia(.06);will-change:transform}
.contact::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 45%,rgba(26,18,21,.55) 0%,rgba(26,18,21,.93) 74%)}
.contact > .wrap{position:relative;z-index:2}
.contact .label{color:var(--accent-lt)}
.contact-h{font-family:var(--serif);font-weight:300;margin:18px 0 0;
  font-size:clamp(28px,5.4vw,68px);line-height:1.16;letter-spacing:-.035em}
.contact .sec-lead{color:rgba(250,248,244,.66);margin:20px auto 0}
.hours{display:grid;gap:1px;background:rgba(250,248,244,.14);
  border:1px solid rgba(250,248,244,.14);margin:clamp(34px,4.6vw,54px) 0;text-align:left}
@media(min-width:640px){.hours{grid-template-columns:1fr 1fr}}
.hours>div{background:var(--night);padding:17px 22px;display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hours dt{color:rgba(250,248,244,.55)}
.hours dd{font-weight:600;letter-spacing:.02em}
.contact-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mini-note{margin-top:20px;font-size:12.5px;color:rgba(250,248,244,.46);max-width:52ch;margin-left:auto;margin-right:auto}

/* ---------- 11 오시는 길 ---------- */
.place{background:var(--porcelain)}
.place-grid{display:grid;gap:clamp(30px,4.4vw,64px);align-items:center}
@media(min-width:900px){.place-grid{grid-template-columns:5fr 6fr}}
.place-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.chart-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-size:10px;color:var(--ink-50);border-top:1px solid var(--line);padding-top:10px;letter-spacing:.14em}
.place-body .h2{margin:14px 0 20px}
.place-body address{font-style:normal;color:var(--ink-70);font-size:15px;line-height:1.95}
.place-list{list-style:none;margin:24px 0 30px;display:grid;gap:10px}
.place-list li{position:relative;padding-left:18px;font-size:14px;color:var(--ink-70)}
.place-list li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--accent)}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--night);color:rgba(250,248,244,.68);padding:clamp(56px,7vw,90px) 0 120px;
  border-top:1px solid rgba(250,248,244,.1)}
.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(--porcelain);font-size:21px}
.foot-brand .mono{font-size:10px;letter-spacing:.22em;color:rgba(250,248,244,.4);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.95}
.foot-warn{font-size:11.5px !important;color:rgba(250,248,244,.44);margin-top:10px;line-height:1.8}
.foot-note{grid-column:1/-1;border-top:1px solid rgba(250,248,244,.12);padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(250,248,244,.46);line-height:1.8}
.demo-badge{display:inline-block;border:1px solid var(--accent-lt);color:var(--accent-lt) !important;
  padding:9px 16px;border-radius:3px;font-size:12.5px !important}
.demo-badge b{color:#fff}
.made-by{letter-spacing:.2em;font-size:10px !important;color:rgba(250,248,244,.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(23,32,29,.14)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:700}
  .mb-call{background:var(--accent);color:#fff}
  .mb-kakao{background:#FEE500;color:#191600}
  .site-foot{padding-bottom:130px}
  .head-inner{height:62px}
}

/* ---------- 애니메이션 초기 상태 (js-anim 하위에만) ---------- */
html.js-anim .fade-up{opacity:0}
html.js-anim .voice{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .panel{opacity:0}
html.js-anim .pain-list li{opacity:0}
html.js-anim .miss-list li{opacity:0}
html.js-anim .hours>div{opacity:0}
html.js-anim .place-list li{opacity:0}
html.js-anim #tlPath{visibility:hidden}

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

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.track :focus-visible,.contact :focus-visible,.site-foot :focus-visible,
.hero :focus-visible,.office :focus-visible{outline-color:var(--accent-lt)}
.miss :focus-visible{outline-color:#fff}

@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 .voice,html.js-anim .qa,html.js-anim .panel,
  html.js-anim .pain-list li,html.js-anim .miss-list li,
  html.js-anim .hours>div,html.js-anim .place-list li{opacity:1 !important}
  html.js-anim #tlPath{visibility:visible}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}
  /* 핀 없이 손으로 미는 가로 스크롤로 대체 */
  .track-viewport{overflow-x:auto}
  .doc-mover{display:none}
}