@charset "utf-8";
/* ==========================================================================
   처음클린케어 — P2 블루프린트 / ★아키타입 A: 스티키 사이드바 2단
   모티프: 24px 도면 그리드 · 치수선 · 부품번호 태그 · 각진 모서리(≤6px) · 절취선

   레이아웃 원칙
   - .split = grid 38% / 62%. 좌측 .dock 이 position:sticky 로 고정된다.
   - 우측 .feed 만 스크롤되며, 각 .chap 진입 시 dock 내용(도면번호·제목·부품 썸네일)이 교체된다.
   - <1024px 에서는 dock을 display:none 하고 각 .chap 안의 .chap-head 가 그 역할을 대신한다.
     ⚠ 함정 4: sticky/핀에 의존하는 요소를 모바일에서 죽이지 않는다 — chap-head는 항상 흐름 안에 있다.
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일에서만
   ========================================================================== */

:root{
  --paper:#F6F5F1;
  --paper-2:#EBE9E3;
  --ink:#14171C;
  --accent:#E8590C;
  --accent-dk:#C6480A;
  --deep:#17324F;
  --deep-dk:#0E2135;

  --ink-70:rgba(20,23,28,.70);
  --ink-50:rgba(20,23,28,.50);
  --line:rgba(20,23,28,.14);
  --line-lt:rgba(246,245,241,.16);

  --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);
  --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:#fff}

.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}}

.hero-media img,.svc-fig img,.place-fig img,.cmp-img{
  filter:contrast(1.08) saturate(.85);
}
.hero-media,.svc-fig,.place-fig{position:relative}
.svc-fig::after,.place-fig::after{
  content:"";position:absolute;inset:0;background:var(--deep);
  opacity:.08;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(260px,56vw);height:24px;display:block;margin:0 auto 16px}
.curtain-txt{font-size:10.5px;letter-spacing:.42em;color:var(--accent);opacity:0;padding-left:.42em}
html.loaded .curtain{pointer-events:none}

/* ---------- 타이포 ---------- */
.display{font-weight:800;font-size:clamp(40px,8vw,112px);line-height:1.06;letter-spacing:-.035em}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--accent);font-weight:600}
em{font-style:normal;color:var(--accent);font-weight:700}
.sec-lead{color:var(--ink-70);font-size:clamp(14.5px,1.6vw,17px);max-width:58ch}
.sec-lead.note{font-size:12.5px;color:var(--ink-50)}
.sub-h{font-weight:800;font-size:clamp(24px,3.2vw,40px);line-height:1.16;letter-spacing:-.03em}

/* ---------- 버튼 ---------- */
.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,.42);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-naver{background:#03C75A;color:#fff}
.btn-naver:hover{background:#02A64B}
.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(246,245,241,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.3) 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:10px;color:#fff;transition:color .4s}
.site-head.is-stuck .logo{color:var(--ink)}
.logo-mark{color:var(--accent);display:flex}
.logo-txt{font-weight:800;font-size:18px;letter-spacing:-.02em}
.gnb{display:none;gap:26px;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:1000px){.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:999px){.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;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:60% 50%;will-change:transform}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(10,20,32,.90) 0%,rgba(10,20,32,.66) 36%,rgba(10,20,32,.20) 66%,rgba(10,20,32,.34) 100%),
    linear-gradient(180deg,rgba(10,20,32,.56) 0%,rgba(10,20,32,.12) 38%,rgba(10,20,32,.82) 100%);
}
.hero-grid-ov{position:absolute;inset:0;opacity:.30;
  background-image:
    linear-gradient(rgba(246,245,241,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,245,241,.16) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 62%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 62%);
}
.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:.26em;color:var(--accent);margin-bottom:26px}
.eyebrow .rule{display:block;width:52px;height:1px;background:var(--accent)}
.hero-h1{color:#fff;max-width:15ch;text-shadow:0 2px 40px rgba(10,20,32,.4)}
.hero-lead{margin-top:26px;font-size:clamp(15px,1.9vw,19px);color:rgba(255,255,255,.86);max-width:50ch;line-height:1.75}
.hero-lead em{color:var(--accent)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.hero-trust{margin-top:26px;font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.55)}
.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,.2);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);
  animation:sweep 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ==========================================================================
   ★ 아키타입 A — 스티키 2단 레이아웃
   ========================================================================== */
.split{position:relative;background:var(--paper)}
.dock{display:none}

@media(min-width:1024px){
  .split{
    display:grid;grid-template-columns:38fr 62fr;
    align-items:start;max-width:1800px;margin:0 auto;
  }
  .dock{
    display:block;position:sticky;top:0;height:100svh;
    background:var(--deep-dk);color:var(--paper);overflow:hidden;
  }
  /* 도면 그리드 — 도크 배경 */
  .dock::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:
      linear-gradient(rgba(246,245,241,.10) 1px,transparent 1px),
      linear-gradient(90deg,rgba(246,245,241,.10) 1px,transparent 1px);
    background-size:24px 24px;}
  /* 우측 절취선 — 도면 시트 경계 */
  .dock::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;
    background:repeating-linear-gradient(180deg,var(--accent) 0 7px,transparent 7px 15px);opacity:.5}
  .dock-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
    padding:calc(var(--head-h) + clamp(28px,3.6vw,54px)) clamp(28px,3vw,52px) clamp(26px,3vw,44px)}
  .feed{min-width:0;background:var(--paper)}
}

/* ---------- 도크 내용 ---------- */
.dock-dwg{font-size:10.5px;letter-spacing:.34em;color:var(--accent);font-weight:600;margin-bottom:20px}
.dock-titles{position:relative;min-height:clamp(112px,13vh,168px)}
.dock-title{position:absolute;left:0;top:0;right:0;opacity:0;pointer-events:none;
  font-weight:800;font-size:clamp(34px,3.4vw,58px);line-height:1.04;letter-spacing:-.04em;color:#fff}
.dock-title.is-on{opacity:1}
.dock-sub{margin-top:18px;color:rgba(246,245,241,.6);font-size:14px;line-height:1.75;max-width:34ch;
  border-left:1px solid var(--accent);padding-left:14px}

/* 부품 썸네일 — 분해 진행에 따라 하이라이트 */
.dock-parts{margin-top:auto;padding-top:clamp(24px,3vw,40px)}
.dock-parts-lbl{font-size:9.5px;letter-spacing:.34em;color:rgba(246,245,241,.42);margin-bottom:14px}
.thumbs{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.thumb{position:relative;border:1px solid rgba(246,245,241,.16);border-radius:3px;
  padding:8px 8px 10px;background:#000;transition:border-color .35s,background .35s}
.thumb-img{display:block;aspect-ratio:1/1;overflow:hidden;position:relative}
.thumb-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;
  filter:grayscale(1) brightness(.55);transition:filter .45s;will-change:filter}
.thumb-meta{display:block;margin-top:8px;line-height:1.35}
.thumb-meta b{display:block;font-size:9px;letter-spacing:.16em;color:rgba(246,245,241,.42);font-weight:600;transition:color .35s}
.thumb-meta i{display:block;font-style:normal;font-size:11px;color:rgba(246,245,241,.5);transition:color .35s}
/* 활성 부품 */
.thumb.is-on{border-color:var(--accent);background:rgba(232,89,12,.08)}
.thumb.is-on .thumb-img img{filter:grayscale(0) brightness(1)}
.thumb.is-on .thumb-meta b{color:var(--accent)}
.thumb.is-on .thumb-meta i{color:var(--paper)}
.thumb.is-on::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}

.dock-foot{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2.4vw,28px);
  padding-top:16px;border-top:1px solid rgba(246,245,241,.14)}
.dock-bar{display:block;flex:1;height:2px;background:rgba(246,245,241,.18)}
.dock-bar i{display:block;height:100%;width:0;background:var(--accent)}
.dock-idx{font-size:10.5px;letter-spacing:.2em;color:rgba(246,245,241,.5)}
.dock-idx b{color:var(--accent);font-weight:600}

/* ---------- 챕터 공통 (우측 본문) ---------- */
.chap{position:relative;padding:clamp(70px,9vw,132px) var(--gut)}
@media(min-width:1024px){
  .chap{padding:clamp(96px,9vw,150px) clamp(40px,4.4vw,88px)}
}
.chap + .chap{border-top:1px solid var(--line)}

/* 모바일 챕터 헤더 = 도크 대체물 (⚠ 함정 4) */
.chap-head{margin-bottom:clamp(30px,4.4vw,52px)}
.chap-dwg{font-size:10.5px;letter-spacing:.34em;color:var(--accent);font-weight:600}
.chap-title{font-weight:800;font-size:clamp(30px,6.4vw,46px);line-height:1.08;
  letter-spacing:-.035em;margin-top:12px}
.chap-sub{margin-top:12px;color:var(--ink-70);font-size:14.5px;max-width:44ch}
@media(min-width:1024px){
  /* 데스크톱에서는 도크가 같은 정보를 보여주므로 챕터 헤더를 감춘다 */
  .chap-head{display:none}
}

/* ---------- CH.01 분해도 (시그니처) ---------- */
/* 부품 소스가 순수 검정 컷아웃 → screen 블렌드가 정확히 지워지려면 배경이 #000 */
.chap-td{background:#000;color:var(--paper)}
.chap-td .chap-sub{color:rgba(246,245,241,.6)}
.td-stage{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(360px,52vh,560px)}
/* 데스크톱: 무대를 sticky로 붙여 두고 여유 스크롤을 줘야 분해가 천천히 읽힌다 */
@media(min-width:1024px){
  .td-stage{position:sticky;top:calc(var(--head-h) + 12px);
    height:calc(100svh - var(--head-h) - 40px);min-height:0}
  .chap-td{padding-bottom:0}
  /* 무대 아래 여유 구간 — 이 높이만큼 스크롤되며 분해가 진행된다 */
  .td-scrub{height:70vh}
}
.td-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(23,50,79,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,50,79,.55) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(78% 72% at 50% 50%,#000,transparent 84%);
  mask-image:radial-gradient(78% 72% at 50% 50%,#000,transparent 84%);}
.td-parts{position:relative;width:min(360px,74vw);margin:0 auto;aspect-ratio:1/1;z-index:1}
.td-part{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;
  will-change:transform;mix-blend-mode:screen;z-index:2}
.td-dims{position:absolute;inset:-4% -8%;width:116%;height:108%;z-index:3;pointer-events:none;overflow:visible}
.td-done{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);z-index:5;
  opacity:0;pointer-events:none;white-space:nowrap}
.td-done-mark{display:inline-block;border:2px solid var(--accent);color:var(--accent);
  padding:11px 20px;border-radius:3px;font-size:clamp(12.5px,1.6vw,16px);font-weight:600;
  letter-spacing:.14em;background:#000}

.td-specs{list-style:none;display:grid;gap:clamp(11px,1.5vw,16px);margin-top:clamp(34px,4.6vw,60px)}
@media(min-width:640px){.td-specs{grid-template-columns:repeat(2,1fr);gap:14px 26px}}
.td-spec{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:baseline;
  padding-bottom:13px;border-bottom:1px solid var(--line-lt)}
.td-spec .sp-no{grid-row:span 2;font-size:10.5px;color:var(--accent);font-weight:600;letter-spacing:.1em}
.td-spec b{font-weight:800;font-size:clamp(16px,2vw,21px);letter-spacing:-.02em}
.td-spec i{grid-column:2;font-style:normal;font-size:13px;color:rgba(246,245,241,.56)}
/* 도크 썸네일과 연동 — 현재 분해 중인 부품 라벨을 함께 밝힌다 */
.td-spec.is-on{border-bottom-color:var(--accent)}
.td-spec.is-on b{color:var(--accent)}

.td-outro{margin-top:clamp(32px,4.4vw,56px);padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--line-lt)}
.outro-h{font-weight:800;font-size:clamp(26px,3.6vw,44px);line-height:1.06;
  letter-spacing:-.035em;margin-top:12px}
.outro-sub{margin-top:14px;color:rgba(246,245,241,.62);font-size:14px;line-height:1.8;max-width:48ch}

/* ---------- CH.02 공감 ---------- */
.chap-why{background:var(--paper)}
.chap-why::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(23,50,79,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,50,79,.07) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(88% 62% at 40% 26%,#000,transparent 80%);
  mask-image:radial-gradient(88% 62% at 40% 26%,#000,transparent 80%);}
.chap-why > *{position:relative;z-index:1}
.statement-h{font-weight:800;font-size:clamp(32px,5.4vw,66px);line-height:1.06;letter-spacing:-.04em}
.statement-sub{margin-top:clamp(22px,3vw,34px);max-width:52ch;
  font-size:clamp(14.5px,1.7vw,17px);color:var(--ink-70);line-height:1.85}
.pain-list{list-style:none;display:grid;gap:clamp(16px,2vw,22px);margin-top:clamp(40px,5.4vw,72px)}
@media(min-width:700px){.pain-list{grid-template-columns:repeat(3,1fr)}}
.pain{background:#fff;border:1px solid var(--line);border-radius:4px;
  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:11px;letter-spacing:.2em;color:var(--accent);font-weight:600}
.pain h4{font-weight:800;font-size:clamp(17px,1.9vw,21px);line-height:1.34;
  margin:12px 0 12px;letter-spacing:-.025em}
.pain p{font-size:13.5px;color:var(--ink-70);margin-top:auto}

/* ---------- CH.03 서비스 — Flip 그리드↔상세 ---------- */
.chap-svc{background:var(--paper-2)}
.svc-hint{margin-top:20px;font-size:10.5px;letter-spacing:.2em;color:var(--accent)}
.svc-grid{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(26px,3.4vw,44px)}
@media(min-width:760px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
/* Flip 목적지 — 카드가 여기로 이동하면 1칼럼 대형으로 펼쳐진다 */
.svc-detail{display:none;margin-top:clamp(26px,3.4vw,44px)}
.svc-detail:not(:empty){display:block}

.svc{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  will-change:transform}
.svc-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer}
.svc-fig{overflow:hidden;background:#fff}
.svc-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.svc:hover .svc-fig img{transform:scale(1.05)}
.svc-body{padding:20px clamp(18px,2vw,24px) 22px}
.svc-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--accent);font-weight:600}
.svc h3{font-weight:800;font-size:clamp(18px,2.1vw,24px);margin:10px 0 11px;letter-spacing:-.025em}
.svc-brief{font-size:13.5px;color:var(--ink-70)}
/* 상세 내용 — 그리드 상태에서는 접혀 있고, 상세로 이동하면 펼쳐진다 */
.svc-more{display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.svc-more ul{list-style:none;display:grid;gap:9px}
.svc-more li{position:relative;padding-left:18px;font-size:14px;color:var(--ink-70)}
.svc-more li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--accent)}
.svc-price{margin-top:16px;font-size:12.5px;letter-spacing:.1em;color:var(--accent);font-weight:600}
.svc-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:10.5px;letter-spacing:.2em;color:var(--accent);font-weight:600}
.svc-toggle i{display:block;width:14px;height:1px;background:currentColor;position:relative}
.svc-toggle i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}

/* 펼쳐진 상태 */
.svc.is-open{border-color:var(--accent)}
.svc.is-open .svc-more{display:block}
.svc.is-open .svc-toggle::before{content:"접기 — ";letter-spacing:.2em}
.svc.is-open .svc-toggle{font-size:0}
.svc.is-open .svc-toggle::before{font-size:10.5px}
.svc.is-open .svc-toggle i{display:none}
@media(min-width:760px){
  .svc.is-open{display:grid;grid-template-columns:1fr 1fr}
  .svc.is-open .svc-btn{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .svc.is-open .svc-fig{height:100%}
  .svc.is-open .svc-fig img{height:100%;aspect-ratio:auto;object-fit:cover}
  .svc.is-open .svc-body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
  .svc.is-open h3{font-size:clamp(24px,2.8vw,34px)}
}
/* 그리드에 남은 카드가 눌리지 않게 — 상세가 열리면 나머지는 흐리게 */
.svc-grid.has-open .svc:not(.is-open){opacity:.42;transition:opacity .4s}
.svc-grid.has-open .svc:not(.is-open):hover{opacity:.75}

/* ---------- CH.04 비포&애프터 — 드래그 비교 슬라이더 ---------- */
.chap-cmp{background:var(--deep);color:var(--paper)}
.chap-cmp .chap-sub{color:rgba(246,245,241,.6)}
.chap-cmp .sec-lead{color:rgba(246,245,241,.7)}
.cmp{margin-top:clamp(26px,3.4vw,44px)}
.cmp-frame{position:relative;overflow:hidden;border-radius:4px;
  border:1px solid rgba(246,245,241,.2);background:#000;
  aspect-ratio:16/10;
  /* ⚠ 함정 8: 트랙 자체는 터치를 가로채지 않는다. 손잡이에만 touch-action을 건다 */
  touch-action:pan-y;
}
@media(min-width:1024px){.cmp-frame{aspect-ratio:16/9}}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;pointer-events:none}
/* 비포 레이어는 clip-path로 잘린다 — 손잡이 위치에 따라 --cmp 가 바뀐다 */
.cmp-clip{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--cmp,50%)) 0 0);will-change:clip-path}
.cmp-tag{position:absolute;bottom:14px;z-index:4;font-size:10px;letter-spacing:.28em;
  padding:7px 12px;border-radius:2px;background:rgba(14,33,53,.8);
  border:1px solid rgba(246,245,241,.28);color:var(--paper);pointer-events:none}
.cmp-tag-b{left:14px;border-color:rgba(246,245,241,.38)}
.cmp-tag-a{right:14px;border-color:var(--accent);color:var(--accent)}
.cmp-handle{position:absolute;top:0;bottom:0;left:0;width:56px;margin-left:-28px;z-index:6;
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;
  /* ⚠ 손잡이만 가로 제스처를 잡는다. 세로 스와이프는 브라우저에 넘긴다 */
  touch-action:pan-y;will-change:transform}
.cmp-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:var(--accent);box-shadow:0 0 0 1px rgba(14,33,53,.45)}
.cmp-grip{position:relative;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  box-shadow:0 4px 18px rgba(10,20,32,.45)}
.cmp-handle:focus-visible .cmp-grip{outline:2px solid #fff;outline-offset:3px}
.cmp-note{margin-top:14px;font-size:10.5px;letter-spacing:.24em;color:rgba(246,245,241,.5)}

/* ---------- CH.05 작업 과정 — MotionPath ---------- */
.chap-proc{background:var(--paper)}
.proc-wrap{position:relative;margin-top:clamp(24px,3.2vw,40px)}
.proc-path{display:none}
.proc-dot{display:none}
@media(min-width:1024px){
  .proc-path{display:block;position:absolute;inset:0;width:100%;height:100%;
    z-index:0;pointer-events:none;overflow:visible}
  .proc-dot{display:block;position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;
    background:var(--accent);z-index:2;pointer-events:none;
    box-shadow:0 0 0 5px rgba(232,89,12,.2),0 0 16px rgba(232,89,12,.7);will-change:transform}
}
.steps{list-style:none;display:grid;gap:clamp(14px,1.8vw,20px);position:relative;z-index:1}
@media(min-width:600px){.steps{grid-template-columns:repeat(2,1fr)}}
/* 곡선이 카드 사이로 보이도록 데스크톱에서는 간격을 넓힌다 */
@media(min-width:1024px){
  .steps{gap:clamp(30px,3.6vw,52px) clamp(46px,5vw,84px)}
}
.step{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:clamp(20px,2.4vw,28px);transition:border-color .4s,box-shadow .4s}
.step-no{font-size:11px;letter-spacing:.2em;color:var(--accent);font-weight:600}
.step h3{font-weight:800;font-size:clamp(17px,2vw,22px);margin:11px 0 11px;letter-spacing:-.02em}
.step p{font-size:13.5px;color:var(--ink-70)}
/* 점이 지나갈 때 해당 단계가 밝아진다 */
.step.is-on{border-color:var(--accent);box-shadow:0 6px 26px rgba(232,89,12,.14)}

/* ---------- CH.06 기록 + 후기 ---------- */
.chap-rec{background:var(--deep-dk);color:var(--paper)}
.chap-rec .chap-sub{color:rgba(246,245,241,.6)}
.stat-row{display:grid;gap:clamp(22px,3vw,36px);margin-top:clamp(10px,2vw,20px)}
@media(min-width:700px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{padding-top:20px;border-top:2px solid rgba(232,89,12,.6)}
.stat .count{display:block;font-size:clamp(46px,6vw,84px);font-weight:600;line-height:1;
  letter-spacing:-.045em;color:var(--accent)}
.stat p{font-size:13.5px;color:rgba(246,245,241,.7);margin-top:14px}
.stat-note{margin-top:clamp(24px,3vw,36px);font-size:10.5px;color:rgba(246,245,241,.46);letter-spacing:.06em}

.voices-lead{margin-top:clamp(46px,6vw,80px);padding-top:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--line-lt);color:rgba(246,245,241,.46)}
.voice-grid{display:grid;gap:clamp(20px,2.6vw,32px);margin-top:clamp(20px,2.6vw,32px)}
@media(min-width:760px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.voice{border-top:2px solid rgba(246,245,241,.4);padding-top:20px}
.voice p{font-size:clamp(15px,1.7vw,17px);line-height:1.75;font-weight:500;letter-spacing:-.02em}
.voice cite{display:block;margin-top:16px;font-size:10.5px;color:rgba(246,245,241,.45);
  font-style:normal;letter-spacing:.14em}

/* ---------- CH.07 FAQ + 견적 + 오시는 길 ---------- */
.chap-res{background:var(--paper-2)}
.acc{border-top:1px solid var(--line);margin-top:clamp(20px,2.6vw,32px)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(14.5px,1.7vw,17px);font-weight:700}
.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 24px}
.qa-body p{font-size:14px;color:var(--ink-70);max-width:66ch}

.reserve{margin-top:clamp(56px,7vw,96px);background:var(--deep-dk);color:var(--paper);
  border-radius:4px;padding:clamp(30px,4vw,58px)}
.reserve .label{color:var(--accent)}
.reserve-h{font-weight:800;font-size:clamp(24px,3.2vw,42px);line-height:1.14;letter-spacing:-.035em}
.reserve .sec-lead{color:rgba(246,245,241,.68);margin-top:18px}
.quote-card{display:grid;gap:1px;background:rgba(246,245,241,.14);
  border:1.5px dashed rgba(246,245,241,.34);border-radius:4px;
  margin:clamp(26px,3.4vw,40px) 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(246,245,241,.66)}
.quote-card dd{font-weight:700;letter-spacing:.02em;color:var(--accent)}
.reserve .mini-note{margin-top:15px;font-size:11.5px;color:rgba(246,245,241,.46)}
.reserve-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}
.reserve .btn-line{border-color:rgba(246,245,241,.4);color:var(--paper)}

.place{margin-top:clamp(56px,7vw,96px);display:grid;gap:clamp(24px,3.4vw,44px);align-items:center}
@media(min-width:760px){.place{grid-template-columns:5fr 6fr}}
.place-fig{overflow:hidden}
.place-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.dwg-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 .sub-h{margin:12px 0 18px}
.place-body address{font-style:normal;color:var(--ink-70);font-size:14.5px;line-height:1.95}
.place-list{list-style:none;margin:22px 0 26px;display:grid;gap:10px}
.place-list li{position:relative;padding-left:18px;font-size:13.5px;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(--ink);color:rgba(246,245,241,.68);padding:clamp(56px,7vw,90px) 0 120px;
  border-top:1px solid rgba(246,245,241,.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(--paper);font-size:21px}
.foot-brand .mono{font-size:10px;letter-spacing:.22em;color:rgba(246,245,241,.4);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.95}
.foot-note{grid-column:1/-1;border-top:1px solid rgba(246,245,241,.12);padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(246,245,241,.46);line-height:1.8}
.demo-badge{display:inline-block;border:1px solid var(--accent);color:var(--accent) !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(246,245,241,.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(20,23,28,.16)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:700}
  .mb-call{background:var(--accent);color:#fff}
  .mb-naver{background:#03C75A;color:#fff}
  .site-foot{padding-bottom:130px}
  .head-inner{height:62px}
}

/* ---------- 애니메이션 초기 상태 (js-anim 하위에만) ----------
   ⚠ 함정 5: GSAP 실패 시 html.js-anim 제거만으로 콘텐츠가 전부 복구되어야 한다 */
html.js-anim .fade-up{opacity:0}
html.js-anim .pain{opacity:0}
html.js-anim .svc{opacity:0}
html.js-anim .step{opacity:0}
html.js-anim .voice{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .stat{opacity:0}
html.js-anim .quote-card>div{opacity:0}
html.js-anim .place-list li{opacity:0}
html.js-anim .td-spec{opacity:0}
html.js-anim .td-dim,html.js-anim .td-tick{visibility:hidden}

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

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.chap-td :focus-visible,.chap-cmp :focus-visible,.chap-rec :focus-visible,
.reserve :focus-visible,.site-foot :focus-visible,.hero :focus-visible{outline-color:var(--accent)}

/* ==========================================================================
   모바일·태블릿 (<1024px) — 도크 해제
   ⚠ 함정 4: 도크가 사라져도 정보는 .chap-head 로 이미 흐름 안에 있다.
   분해도는 핀이 없으므로 부품을 정적으로 벌려 둔다.
   ========================================================================== */
@media(max-width:1023px){
  .td-stage{min-height:0;padding:10px 0}
  .td-parts{width:min(300px,72vw);aspect-ratio:1/1.75;margin-bottom:16px}
  .td-part{height:auto;top:50%;transform:translateY(-50%)}
  .td-dims{display:none}
  /* 완료 도장을 부품 아래로 내려 겹침을 없앤다 (.td-parts 기준 하단 바깥) */
  .td-parts{margin-bottom:64px}
  .td-done{left:50%;top:auto;bottom:-58px;transform:translateX(-50%);opacity:1;
    white-space:nowrap}
  /* 서비스 카드 — 상세 목적지가 없으므로 아코디언처럼 제자리에서 펼친다 */
  .svc-detail{display:none !important}
}

/* ---------- 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 .pain,html.js-anim .svc,html.js-anim .step,
  html.js-anim .voice,html.js-anim .qa,html.js-anim .stat,html.js-anim .quote-card>div,
  html.js-anim .place-list li,html.js-anim .td-spec{opacity:1 !important}
  html.js-anim .td-dim,html.js-anim .td-tick{visibility:visible}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}
  /* 분해도를 정적으로 세로 나열 */
  .td-parts{aspect-ratio:auto;height:auto;display:grid;gap:10px;width:min(300px,78vw)}
  .td-part{position:relative;height:auto;transform:none;top:auto}
  .td-dims{display:none}
  .td-done{position:relative;left:auto;bottom:auto;transform:none;opacity:1;
    display:flex;justify-content:center;margin-top:14px;white-space:normal}
  .proc-dot{display:none}
  .cmp-clip{clip-path:inset(0 50% 0 0)}
}