/* 넘버원세차장 — 다크 스튜디오 톤. 검정 #0B0B0C · 종이색 #F4F3EF · 시그널 S 오렌지 #F06E00(면·바·칩 전용) */
@font-face{font-family:"Gmarket Sans";font-weight:300;font-style:normal;font-display:swap;src:url(/fonts/GmarketSansLight.woff2) format("woff2")}
@font-face{font-family:"Gmarket Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/GmarketSansMedium.woff2) format("woff2")}
@font-face{font-family:"Gmarket Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/GmarketSansBold.woff2) format("woff2")}

:root{
  --dock:0px;               /* 하단 고정바 높이. 모바일에서만 값이 생긴다 */
  /* 무채색 스펙트럼 — 화면의 99%. #000 은 쓰지 않는다(화면에서 구멍처럼 보인다) */
  --grey-0:#ffffff; --grey-1:#fafafb; --grey-2:#f5f5f5; --grey-10:#eaeaeb;
  --grey-20:#ceced0; --grey-40:#929296; --grey-60:#69696e; --grey-70:#535356;
  --grey-90:#252527; --grey-100:#111111;
  /* 아래 다섯은 '역할 이름'이다. 밝은 섹션(.on-light)은 이 값만 뒤집는다 */
  --ink:var(--grey-100); --ink-2:var(--grey-90); --ink-3:#1A1A1D;
  --paper:#ffffff; --mute:#b0b0b0; --faint:var(--grey-40);
  --line:rgba(255,255,255,.15); --line-2:rgba(255,255,255,.28);
  --signal:#F06E00; --signal-ink:#111111;
  --font:"Gmarket Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --wrap:1920px; --gutter:clamp(20px,-40px + 6.25vw,80px);
  --r:2px; --r-lg:4px;                       /* 버튼 2px · 이미지 4px */
  --ease:cubic-bezier(.45,0,.31,1);          /* 기본 이징 */
  --ease-ui:cubic-bezier(.5,0,0,.75);        /* 눌러서 반응하는 것 */
  --sb:env(safe-area-inset-bottom,0px);
}
@media(max-width:960px){:root{--gutter:32px}}
@media(max-width:600px){:root{--gutter:20px}}

/* 밝은 섹션 — 역할 변수만 뒤집는다. 안쪽 요소를 하나하나 다시 칠하지 않는다 */
.on-light{
  --ink:var(--grey-0); --ink-2:var(--grey-1); --ink-3:var(--grey-2);
  --paper:var(--grey-100); --mute:var(--grey-70); --faint:var(--grey-60);
  --line:var(--grey-10); --line-2:var(--grey-20);
  background:var(--ink); color:var(--paper);
}
.on-light-2{ --ink:var(--grey-2) }          /* 한 단 내린 밝은 섹션 */

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font:400 16px/1.6 var(--font);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong,b{font-weight:700}
::selection{background:var(--signal);color:var(--signal-ink)}
.skip{position:absolute;left:-999px;top:0;background:var(--signal);color:var(--signal-ink);padding:10px 14px;z-index:99;font-weight:500}
.skip:focus{left:12px;top:12px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* ★ .wrap 안쪽 여백을 덮어쓸 때는 반드시 padding-block 을 쓴다.
   `padding: 위 0 아래` 한 줄이면 좌우 여백까지 0이 되어 글자가 화면 끝에 붙는다(2026-09-16 여섯 페이지에서 발생). */
.chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--signal);color:var(--signal-ink);font-weight:500;font-size:13px;letter-spacing:.01em;white-space:nowrap}
.chip.ghost{background:transparent;color:var(--paper);border:1px solid var(--line-2)}
.eyebrow{font-size:16px;font-weight:400;letter-spacing:normal;color:var(--faint);text-transform:none}
.eyebrow.ko{letter-spacing:normal;text-transform:none}
@media(max-width:960px){.eyebrow{font-size:14px}}
.bar{width:44px;height:3px;background:var(--signal);border-radius:2px}
.h1{font-weight:300;font-size:clamp(32px,5vw,48px);line-height:1.29;letter-spacing:-.01em;text-wrap:balance}
.h2{font-weight:300;font-size:clamp(28px,3.4vw,40px);line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
.h3{font-weight:500;font-size:clamp(20px,1.6vw,22px);line-height:1.45;letter-spacing:normal}
.lead{font-size:clamp(14px,1.3vw,18px);line-height:1.56;color:var(--mute);text-wrap:pretty;max-width:34em}
.small{font-size:14px;line-height:1.57;color:var(--faint)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--r);font-weight:500;font-size:15px;white-space:nowrap;border:1px solid transparent;transition:background .2s var(--ease-ui),border-color .2s var(--ease-ui),color .2s var(--ease-ui)}

.btn.fill{background:var(--paper);color:var(--ink)}
.btn.accent{background:var(--signal);color:#111}

.btn.ghost{border-color:var(--line-2);color:var(--paper);background:transparent}

.btn.link{height:auto;min-height:44px;padding:0;border-radius:0;color:var(--mute);font-weight:300;font-size:14px;gap:6px}

.btn svg{width:18px;height:18px;flex:none}

/* 헤더 */
.hd{position:fixed;inset:0 0 auto 0;z-index:40;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.hd.on{background:rgba(11,11,12,.78);backdrop-filter:blur(14px);border-color:var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand b{font-size:19px;letter-spacing:-.01em}
.brand span{font-size:10.5px;letter-spacing:.22em;color:var(--signal);font-weight:500;margin-top:5px}
.nav{display:none;gap:30px;font-size:14px;font-weight:500;color:var(--mute)}
.nav a{padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--signal);transition:right .35s var(--ease)}


.hd-cta{display:flex;gap:8px}
.hd-cta .btn{height:40px;padding:0 16px;font-size:14px}
.hd-cta .ghost{display:none}
@media(min-width:900px){.nav{display:flex}.hd-cta .ghost{display:inline-flex}.hd .wrap{height:76px}}

/* 히어로 */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero video,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.05) 32%,rgba(11,11,12,.12) 60%,rgba(11,11,12,.92) 100%)}
.hero .wrap{padding-block:0 clamp(56px,10vh,110px);position:relative;z-index:2}
.hero-eyebrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hero .h1{max-width:12em;margin-bottom:18px}
.hero .lead{margin-bottom:30px;color:rgba(244,243,239,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-cta .link{margin-left:6px}
.cue{position:absolute;right:var(--gutter);bottom:26px;display:none;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.cue i{width:1px;height:44px;background:linear-gradient(var(--faint),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(min-width:900px){.cue{display:flex}}
/* 로드 리빌 */
.rise{--d:20px;opacity:0;transform:translateY(var(--d));animation:rise .8s var(--ease) forwards}
.rise.d1{--d:40px}.rise.d2{--d:60px}.rise.d3{--d:80px}.rise.d4{--d:100px}
@keyframes rise{to{opacity:1;transform:none}}

/* 신뢰 스트립 */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)}
.trust .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.trust div{padding:18px 0;display:flex;flex-direction:column;gap:2px}
.trust div+div{border-left:1px solid var(--line);padding-left:18px}
.trust div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}
.trust div:nth-child(4){border-top:1px solid var(--line)}
.trust b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.trust span{font-size:12.5px;color:var(--faint)}
@media(min-width:900px){.trust .wrap{grid-template-columns:repeat(4,1fr)}.trust div{padding:26px 0}.trust div+div{padding-left:28px}.trust div:nth-child(3){border-left:1px solid var(--line);padding-left:28px;border-top:0}.trust div:nth-child(4){border-top:0}.trust b{font-size:19px}}

/* 섹션 공통 */
.sec{padding:140px 0}
@media(max-width:960px){.sec{padding:64px 0}}
@media(max-width:600px){.sec{padding:80px 0}}
.sec-hd{display:grid;gap:6px;margin-bottom:clamp(32px,4.5vw,56px)}
.sec-hd .lead{margin-top:12px}
@media(min-width:900px){.sec-hd{grid-template-columns:1fr 1fr;align-items:end}.sec-hd .lead{justify-self:end;margin:0}}

/* 서비스 — 영상 카드 3장 */
.svc{display:grid;gap:14px}
.card{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/4.6;background:var(--ink-2);isolation:isolate;display:flex;align-items:flex-end}
.card video,.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.4s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,12,0) 30%,rgba(11,11,12,.55) 70%,rgba(11,11,12,.94) 100%)}

.card-body{padding:clamp(22px,4vw,34px);display:grid;gap:10px;width:100%;position:relative;z-index:2}
.card-body .no{font-size:12px;letter-spacing:.2em;color:var(--signal);font-weight:500}
.card-body .h3{margin-top:2px}
.card-body p{color:var(--mute);font-size:14.5px;line-height:1.75;max-width:30em}
.card-body .btn{margin-top:8px;justify-self:start}
.card-tag{position:absolute;top:18px;left:18px;z-index:3}
@media(min-width:720px){.svc{grid-template-columns:repeat(3,1fr);gap:18px}.card{aspect-ratio:3/4.4}}
@media(min-width:1100px){.card{aspect-ratio:3/4.1}}

/* 스튜디오 — 풀블리드 영상 */
.studio{position:relative;min-height:64vh;min-height:64svh;display:grid;align-items:center;isolation:isolate;overflow:hidden}
.studio video,.studio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.studio::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 20% 80%,rgba(11,11,12,.9) 0%,rgba(11,11,12,.55) 45%,rgba(11,11,12,.25) 100%)}
.studio .wrap{padding-block:clamp(56px,10vw,120px);display:grid;gap:26px;position:relative;z-index:2}
.studio .h2{max-width:11em}
.studio .lead{color:rgba(244,243,239,.82)}
.facts{display:grid;gap:10px;margin-top:8px}
.facts div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r);background:rgba(11,11,12,.42);backdrop-filter:blur(8px)}
.facts b{font-size:12px;letter-spacing:.06em;color:var(--signal);padding-top:4px;white-space:nowrap}
.facts p{font-size:14.5px;line-height:1.7;color:var(--paper)}
@media(min-width:900px){.studio .wrap{grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr;align-items:start;gap:18px 60px}.studio .h2{grid-column:1;grid-row:1}.studio .lead{grid-column:1;grid-row:2;align-self:start}.facts{grid-column:2;grid-row:1/3;align-self:end;margin-top:0}}

/* 시공 장면 — 가로 스냅 갤러리 */
.gal{padding:140px 0;overflow:hidden}
.gal-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 10px;margin:0 calc(var(--gutter) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-track figure{flex:0 0 min(72vw,420px);scroll-snap-align:start;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);position:relative}
.gal-track figure.wide{flex-basis:min(92vw,560px);aspect-ratio:4/3}
.gal-track img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}

.gal-track figcaption{position:absolute;left:16px;bottom:14px;font-size:12px;letter-spacing:.04em;color:rgba(244,243,239,.85);background:rgba(11,11,12,.5);backdrop-filter:blur(6px);padding:6px 10px;border-radius:999px}
.gal-nav{display:none;gap:8px}
.gal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .25s,background .25s}

.gal-nav svg{width:18px;height:18px}
@media(min-width:900px){.gal-nav{display:flex;justify-self:end}.gal .sec-hd{grid-template-columns:1fr auto}.gal-track{margin:0;padding:0 0 10px;gap:16px}}

/* 예약 안내 — 영상 배경 + 3단계 */
.book{position:relative;isolation:isolate;overflow:hidden}
.book video,.book>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9}
.book::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.8) 50%,rgba(11,11,12,.35) 100%)}
.book .wrap{padding-block:clamp(56px,10vw,130px);display:grid;gap:34px;position:relative;z-index:2}
.steps{display:grid;gap:12px;counter-reset:s}
.steps li{list-style:none;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--line-2)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps li::before{counter-increment:s;content:"0" counter(s);font-weight:700;font-size:22px;color:var(--signal);line-height:1.1;letter-spacing:-.02em}
.steps b{display:block;font-size:16px;font-weight:700;margin-bottom:4px}
.steps p{font-size:14.5px;line-height:1.75;color:var(--mute)}
.book-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:rgba(240,110,0,.1);border:1px solid rgba(240,110,0,.35);font-size:14px;line-height:1.7;color:var(--paper)}
.note i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-top:9px}
@media(min-width:900px){.book .wrap{grid-template-columns:1fr 1fr;gap:70px;align-items:center}.book-left{display:grid;gap:26px}.book-right{display:grid;gap:22px}}

/* 오시는 길·문의 */
.visit{position:relative;isolation:isolate;overflow:hidden}
.visit>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.visit::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,12,.75),rgba(11,11,12,.92))}
.visit .wrap{padding-block:clamp(48px,8vw,120px);display:grid;gap:30px;position:relative;z-index:2}
.vcard{display:grid;gap:0;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:rgba(18,18,20,.72);backdrop-filter:blur(10px)}
.vcard>div{padding:22px 22px;display:grid;gap:6px;border-top:1px solid var(--line)}
.vcard>div:first-child{border-top:0}
.vcard .k{font-size:12px;letter-spacing:.16em;color:var(--signal);font-weight:500}
.vcard .v{font-size:17px;font-weight:500;line-height:1.5}
.vcard .v small{display:block;font-size:13px;color:var(--mute);font-weight:300;margin-top:2px}
.row{display:flex;flex-wrap:wrap;gap:10px}
.vcard .row{margin-top:8px;gap:8px}
.vcard .row .btn{height:42px;padding:0 16px;font-size:14px}
.amen{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:900px){.visit .wrap{grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}.vcard{grid-template-columns:1fr 1fr}.vcard>div{border-top:0;border-left:1px solid var(--line)}.vcard>div:nth-child(2n+1){border-left:0}.vcard>div:nth-child(n+3){border-top:1px solid var(--line)}}

/* FAQ */
.faq{background:var(--ink-2)}
.faq .wrap{padding-block:140px;display:grid;gap:30px}
.qa{border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:16px;align-items:center;padding:20px 0;font-weight:500;font-size:16px;line-height:1.5}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font:inherit;margin:0;font-weight:500}
.qa summary i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .35s var(--ease),background .25s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--paper);transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.qa details[open] summary i{background:var(--signal);border-color:var(--signal)}
.qa details[open] summary i::before,.qa details[open] summary i::after{background:var(--signal-ink)}
.qa details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.qa .a{padding:0 0 22px;color:var(--mute);font-size:15px;line-height:1.8;max-width:40em}
@media(min-width:900px){.faq .wrap{grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}.qa summary{font-size:17px;padding:22px 0}}

/* 푸터 */
.ft{border-top:1px solid var(--line);padding:44px 0 calc(40px + var(--sb))}
.ft .wrap{display:grid;gap:22px}
.ft .brand b{font-size:17px}
.ft p{font-size:13px;line-height:1.8;color:var(--faint)}
.ft-links{display:flex;flex-wrap:wrap;gap:0 18px;font-size:13px;color:var(--mute)}
.ft-links a,.ft-links span{display:inline-flex;align-items:center;min-height:44px}

@media(min-width:900px){.ft .wrap{grid-template-columns:1fr 1fr;align-items:end}.ft-links{justify-self:end}}
@media(max-width:899px){.ft{padding-bottom:calc(112px + var(--sb))}}

/* 모바일 하단 고정 CTA */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gutter) calc(10px + var(--sb));background:rgba(11,11,12,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;transform:translateY(110%);transition:transform .45s var(--ease)}
.dock.on{transform:none}
.dock .btn{height:46px;padding:0 12px;font-size:14px}
@media(min-width:900px){.dock{display:none}}

/* 스크롤 리빌 */
/* 스크롤 리빌은 JS가 살아 있을 때(.js)만 숨긴다. boot.js 가 head에서 .js 를 붙인다.
   스크립트가 막히거나 깨지면 .js 가 없어 처음부터 전부 보인다 — 검은 화면 방지. */
.js .rv{--d:20px;opacity:0;transform:translateY(var(--d));transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{--d:40px}.rv.d2{--d:60px}.rv.d3{--d:80px}
@media(max-width:600px){.js .rv{--d:40px}.rv.d1{--d:60px}.rv.d2{--d:80px}.rv.d3{--d:100px}.rise{--d:40px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.rv{opacity:1;transform:none;animation:none;transition:none}
  .cue i{animation:none}
  .card:hover video,.card:hover img,.gal-track figure:hover img{transform:none}
}

.mt14{margin-top:14px}

/* 앵커 이동 시 고정 헤더에 가리지 않게 */
section[id],[id="services"],[id="studio"],[id="gallery"],[id="booking"],[id="visit"],[id="faq"]{scroll-margin-top:84px}

/* FAQ 더 보기 */
.qa details.more>summary{color:var(--mute)}
.qa details.more>summary h3{font-weight:300}
.qa .a-more details{border-top:1px solid var(--line);border-bottom:0}
/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px 20px}
.nf .h2{margin:14px 0 18px}.nf .lead{margin:0 auto 28px}.nf-cta{display:flex;gap:10px;justify-content:center}

/* ══════════════════════════════════════════════════════════
   하위 페이지 (서비스·작업장·오시는 길)
   ══════════════════════════════════════════════════════════ */
/* 페이지 히어로 — 홈보다 낮게. svh 미지원(구형 iOS) 대비 vh 폴백 */
.pgh{position:relative;min-height:72vh;min-height:72svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.pgh video,.pgh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pgh::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.42) 42%,rgba(11,11,12,.93) 100%)}
.pgh .wrap{position:relative;z-index:2;padding-block:clamp(92px,14vh,140px) clamp(30px,5vh,60px);display:grid;gap:12px}
.pgh .lead{max-width:32em}
.pgh .hero-eyebrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* 현재 위치 */
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint)}

.crumb i{font-style:normal;opacity:.55}
.crumb b{font-weight:500;color:var(--paper)}

/* 이런 분이 찾아오십니다 */
.who{display:grid;gap:12px}
.who div{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2)}
.who b{display:block;font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.4}
.who p{font-size:14.5px;line-height:1.75;color:var(--mute)}
@media(min-width:900px){.who{grid-template-columns:repeat(3,1fr);gap:16px}}

/* 진행 순서 — 단계마다 영상 또는 사진 */
.flow{list-style:none;display:grid;gap:clamp(14px,2.4vw,26px)}
.flow li{display:grid;gap:16px;align-items:center}
.flow-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;background:var(--ink-2);isolation:isolate}
.flow-media video,.flow-media img{width:100%;height:100%;object-fit:cover}
.flow-txt .no{display:inline-block;font-size:12px;letter-spacing:.2em;color:var(--signal);font-weight:500;margin-bottom:6px}
.flow-txt p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--mute);max-width:34em}
@media(min-width:900px){
  .flow li{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px)}
  .flow li:nth-child(even) .flow-media{order:2}
}

/* 한눈에 / 영업 정보 */
.spec{display:grid;border-top:1px solid var(--line)}
.spec>div{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--line)}
.spec dt{font-size:13px;letter-spacing:.04em;color:var(--signal);font-weight:500}
.spec dd{font-size:15px;line-height:1.8;color:var(--paper)}
@media(min-width:760px){.spec>div{grid-template-columns:210px 1fr;gap:28px;align-items:baseline}}

/* 톡톡 문의 블록 */
.talk{padding:140px 0;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.talk-in{display:grid;gap:28px}
.talk-cta{display:grid;gap:12px;align-content:start}
.talk-cta .btn{width:100%}
.talk-note{font-size:13px;color:var(--faint);margin-top:2px;text-align:center}
.btn.lg{height:60px;font-size:16px}
@media(min-width:900px){.talk-in{grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,80px);align-items:center}}

/* 함께 보시면 좋습니다 */
.nextsvc .svc{display:grid;gap:14px}
@media(min-width:760px){.nextsvc .svc{grid-template-columns:1fr 1fr;gap:18px}}
.nextsvc .card{aspect-ratio:16/11}

/* 전면 영상 밴드 — 하위 페이지의 영상 비중을 올리는 큰 화면 */
.band{position:relative;min-height:82vh;min-height:82svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.1) 45%,rgba(11,11,12,.88) 100%)}
.band .wrap{position:relative;z-index:2;padding-block:0 calc(clamp(36px,7vh,72px) + var(--dock))}
.band-t{font-weight:700;font-size:clamp(22px,3.4vw,38px);line-height:1.3;letter-spacing:-.015em;max-width:18em;text-wrap:balance}
@media(min-width:900px){.flow-media{aspect-ratio:16/11}}

/* 정의문 — AI 검색이 인용할 자족 문단 (페이지 위쪽) */
.define .def-body{margin-top:14px;font-size:clamp(16px,1.7vw,19px);line-height:1.85;color:var(--paper);max-width:40em}
/* 비교표 — 좁은 화면에서는 표만 가로로 스크롤 */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.cmp{width:100%;min-width:460px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:12px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:13px;letter-spacing:.04em;color:var(--signal);font-weight:500;background:var(--ink-2);white-space:nowrap}
.cmp thead th span{opacity:0}
.cmp tbody th{font-weight:500;color:var(--paper);white-space:nowrap;width:22%}
.cmp td{color:var(--mute);line-height:1.7}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* 표를 옆으로 밀 수 있다는 표시 — 가장자리 그림자는 스크롤 여지가 있을 때만 보인다 */
.cmp-wrap{background:
  linear-gradient(to right,var(--ink-2) 30%,rgba(18,18,20,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--ink-2) 30%,rgba(18,18,20,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.6),transparent) left center/16px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.6),transparent) right center/16px 100% no-repeat scroll}
.cmp-hint{margin-top:10px;font-size:13px;color:var(--faint)}
@media(min-width:760px){.cmp-hint{display:none}.cmp{min-width:0}}
@media(max-width:420px){.cmp{font-size:13.5px}.cmp th,.cmp td{padding:11px 10px}}

/* 푸터 페이지 내비 — 모바일엔 헤더 내비가 없어 여기가 전체 이동 경로다 */
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 4px;font-size:14.5px;font-weight:500}
.ft-nav a{color:var(--paper);padding:6px 0;border-bottom:1px solid transparent}


/* ══════════════════════════════════════════════════════════
   공정 — 영상이 고정된 채 스크롤에 따라 단계가 바뀐다
   JS가 없으면 그냥 세로로 읽히는 목록이 된다 (검은 화면 방지 규칙과 동일)
   ══════════════════════════════════════════════════════════ */
.stage{position:relative}
.stage-sticky{position:relative;overflow:hidden;isolation:isolate}
.stage-media{position:relative;height:62vh;height:62svh}
.stage-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage-media video+video{display:none}                 /* JS 없을 때는 첫 컷만 */
.stage-sticky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.12) 38%,rgba(11,11,12,.92) 100%)}
.stage-hud{position:relative;z-index:2;padding:26px 0 calc(clamp(30px,6vh,64px) + var(--dock))}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage-nav{list-style:none;display:flex;gap:6px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.stage-nav li{flex:none;display:grid;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;opacity:.5;transition:opacity .4s,border-color .4s}
.stage-nav li b{font-size:11px;letter-spacing:.14em;color:var(--signal)}
.stage-nav li span{font-size:12.5px;white-space:nowrap}
.stage-cap .no{display:inline-block;font-size:12px;letter-spacing:.2em;color:var(--signal);font-weight:500;margin-bottom:6px}
.stage-cap p{margin-top:8px;font-size:15px;line-height:1.8;color:var(--mute);max-width:32em}
.stage-cap+.stage-cap{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}

/* JS가 살아 있을 때만 스크롤 고정 연출로 바뀐다 */
.js .stage{height:320vh;height:320svh}
/* minmax(0,1fr): 그리드 항목의 자동 최소너비는 min-content라, 안쪽 .stage-nav(5칸 가로줄)가
   화면보다 넓어지면 항목 전체가 같이 넓어져 설명 문장이 오른쪽에서 잘린다(실측 524px vs 화면 390px). */
.js .stage-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.stage-hud{min-width:0}
.stage-nav{min-width:0;max-width:100%}
.js .stage-media{position:absolute;inset:0;height:auto}
.js .stage-media video{display:block;opacity:0;transition:opacity .8s var(--ease)}
.js .stage-media video.on{opacity:1}
.js .stage-nav li.on{opacity:1;border-color:var(--line-2)}
.js .stage-cap{display:none}
.js .stage-cap.on{display:block;animation:capin .55s var(--ease) both}
.js .stage-cap+.stage-cap{margin-top:0;padding-top:0;border-top:0}
@keyframes capin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:900px){
  .stage-hud{padding-bottom:clamp(48px,8vh,90px)}
  .stage-nav{gap:8px;margin-bottom:24px}
  .stage-cap p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .js .stage{height:auto}
  .js .stage-sticky{position:relative;height:auto;display:block}
  .js .stage-media{position:relative;height:56svh}
  .js .stage-media video+video{display:none}
  .js .stage-cap{display:block}
  .js .stage-cap+.stage-cap{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
}

/* 모바일: 세 가지 서비스가 스크롤 2번 안에 들어오게 조인다 (실측 2.45화면 → 2.0 이하)
   가로 스크롤로 바꾸면 2·3번째를 놓칠 수 있어 세로 쌓기를 유지하고 높이만 줄인다 */
@media(max-width:719px){
  /* 히어로를 화면 꽉 채우지 않고 88%만 — 아래 내용이 살짝 보여 스크롤을 유도하고,
     세 서비스가 스크롤 2번 안에 들어온다 (실측 2.45 → 1.97화면) */
  /* 하단 고정바가 fixed라 글이 그 밑으로 들어간다. 그만큼 아래 여백을 준다 */
  :root{--dock:78px}
  .hero .wrap{padding-bottom:calc(clamp(56px,10vh,110px) + var(--dock))}
  .hero{min-height:88vh;min-height:88svh}
  .trust b{font-size:16px}
  .card{aspect-ratio:4/3.1}
  .card-body{padding:16px 18px;gap:6px}
  .card-body p{font-size:14px;line-height:1.65}
  .trust div{padding:13px 0}
  .trust div+div{padding-left:14px}
  .sec-hd{margin-bottom:18px}
  #services{padding-top:30px}
}

/* ══════════════════════════════════════════════════════════
   브랜드 모션 — 검수 조명 반사선 (.nol-*)
   흐리고 끊긴 반사선이, 검수 조명이 판 한가운데를 지나는 순간 이어진 한 줄로 또렷해진다.
   · 움직이는 속성은 transform·opacity 둘뿐 — 프레임마다 다시 칠하는 곳이 없다
   · 화면에 들어와 있는 동안만 애니메이션 '이름'과 will-change 를 붙인다.
     나가면 둘 다 떼므로 합성 승격의 근거가 남지 않는다
     (animation-play-state:paused 로 하면 이름도 will-change 도 남아 GPU 메모리를 안 놓는다)
   · 정지 기본값은 '검수를 통과한 화면'이다. 애니메이션이 아예 안 걸려도 빈 판이 되지 않는다
   ══════════════════════════════════════════════════════════ */
.nol .wrap{display:grid;gap:clamp(18px,2.6vw,30px)}
.nol-hd{display:grid;gap:12px}

/* 판(도장면) — 배경 그러데이션은 정지. 한 번만 칠해진다.
   pointer-events:none — 장식이라 그 위의 클릭은 그대로 통과시킨다 */
.nol-panel{
  position:relative;overflow:hidden;isolation:isolate;pointer-events:none;
  height:clamp(300px,42vw,460px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 50% 118%,rgba(244,243,239,.07) 0%,rgba(244,243,239,0) 60%),
    linear-gradient(180deg,#101014 0%,#0B0B0C 54%,#0D0D10 100%);
}

/* 두 겹은 판 위에 정확히 포개진다.
   preserveAspectRatio="none" 이라 viewBox(760×560)가 판에 그대로 대응한다 —
   잘려 나가는 영역이 없으므로 폭이 달라져도 '무엇이 보이는가'가 변하지 않고,
   stroke 그러데이션의 좌우 스러짐이 항상 판 모서리에 정확히 걸린다.
   선 굵기는 vector-effect="non-scaling-stroke" 로 화면 픽셀에 고정해 늘어나지 않게 한다 */
.nol-svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}

/* 흐린 겹 — 같은 선이 여러 겹으로 어긋나 보이는 상태.
   blur를 쓰지 않고 '어긋난 다섯 가닥 + 불규칙하게 끊긴 심지'로 초점이 안 맞은 상을 만든다
   (filter를 쓰면 애니메이션이 아니어도 레이어 다시 칠하기 위험을 지고 갈 이유가 없다) */
.nol-haze .bed{stroke-width:20;opacity:.026}
.nol-haze .s0,.nol-haze .s1,.nol-haze .s2{stroke-width:1.5;stroke-dasharray:6 9 16 5 3 11 9 4}
.nol-haze .s0{opacity:.24}
.nol-haze .s1{opacity:.15}
.nol-haze .s2{opacity:.085}
/* 가닥마다 끊김 시작점을 어긋나게 — 같은 자리에서 끊기면 사다리처럼 각지게 읽힌다 */
.nol-haze .k0{stroke-dashoffset:0}
.nol-haze .k1{stroke-dashoffset:19}
.nol-haze .k2{stroke-dashoffset:37}
.nol-haze .k3{stroke-dashoffset:11}
.nol-haze .k4{stroke-dashoffset:28}

/* 또렷한 겹 — 가늘고 끊기지 않은 한 줄. 검수를 통과한 상태 = 정지 기본값 */
.nol-crisp .halo{stroke-width:5;opacity:.055}
.nol-crisp .core{stroke-width:1.1;opacity:.74}

/* 검수 조명 — 판 위를 위에서 아래로 지나가는 띠. 반사선이 가로로 흐르므로 띠가 선을 가로지른다.
   정지값은 2D transform 하나뿐이라 그 자체로는 합성 레이어를 만들지 않는다
   (translate3d·backface-visibility 를 쓰면 정지 상태에서도 레이어가 남는다) */
.nol-beam{
  position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(184deg,
    rgba(244,243,239,0) 0%,
    rgba(244,243,239,.028) 30%,
    rgba(244,243,239,.085) 46%,
    rgba(244,243,239,.11) 52%,
    rgba(244,243,239,.03) 72%,
    rgba(244,243,239,0) 100%);
  transform:translateY(-100%);opacity:0;
}
.nol-legend b{color:var(--paper);font-weight:500}

/* ── 움직임 ────────────────────────────────────────────────
   초점이 맞는 순간: 흐린 겹은 위아래로 살짝 벌어진 채 사라지고(scaleY 1.055→1),
   또렷한 겹은 살짝 좁은 데서 제자리로 들어오며 나타난다(scaleY .972→1).
   두 겹이 반대 방향에서 한 자리로 모이므로 '초점이 잡힌다'로 읽힌다.
   조명 띠는 사이클 28.8% 에 판 한가운데를 지난다 = 초점이 잡히는 18~32% 구간 안이다 */
@keyframes nol-defocus{
  0%,18%   {opacity:.95;transform:scaleY(1.055)}
  32%,62%  {opacity:.06;transform:scaleY(1)}
  84%,100% {opacity:.95;transform:scaleY(1.055)}
}
@keyframes nol-focus{
  0%,18%   {opacity:0;transform:scaleY(.972)}
  32%,62%  {opacity:1;transform:scaleY(1)}
  82%,100% {opacity:0;transform:scaleY(.972)}
}
@keyframes nol-sweep{
  0%   {transform:translateY(-100%);opacity:0}
  6%   {opacity:.9}
  52%  {opacity:.9}
  58%  {transform:translateY(240%);opacity:0}
  100% {transform:translateY(240%);opacity:0}
}

/* JS가 없으면(.js 없음) 그냥 돈다 — 관찰자가 없어도 화면은 정상이다 */
.nol-haze{transform-origin:50% 50%;animation:nol-defocus 7.6s var(--ease) infinite}
.nol-crisp{transform-origin:50% 50%;animation:nol-focus 7.6s var(--ease) infinite}
.nol-beam{animation:nol-sweep 7.6s linear infinite}

/* JS가 있으면: 화면 밖에서는 애니메이션 이름과 will-change 를 함께 뗀다.
   .on 은 app.js 의 전용 관찰자가 붙였다 뗀다
   (리빌 클래스 .in 은 붙자마자 unobserve라 한 번 붙으면 안 떨어져 게이트로 못 쓴다 — 실측) */
.js .nol-panel .nol-haze,
.js .nol-panel .nol-crisp,
.js .nol-panel .nol-beam{animation-name:none}
.js .nol-panel.on .nol-haze{animation-name:nol-defocus;will-change:transform,opacity}
.js .nol-panel.on .nol-crisp{animation-name:nol-focus;will-change:transform,opacity}
.js .nol-panel.on .nol-beam{animation-name:nol-sweep;will-change:transform,opacity}

/* 동작 줄이기: 멈추되 '검수를 통과한 화면'으로 세워 둔다.
   조명 띠는 판 아래쪽에 옅게 걸쳐 둔다 — 최대 알파 .11이라 얼룩으로 보이지 않는다 */
@media(prefers-reduced-motion:reduce){
  .nol-haze,.nol-crisp,.nol-beam,
  .js .nol-panel.on .nol-haze,.js .nol-panel.on .nol-crisp,.js .nol-panel.on .nol-beam{
    animation:none;will-change:auto}
  .nol-haze{opacity:.06;transform:none}
  .nol-crisp{opacity:1;transform:none}
  .nol-beam{opacity:1;transform:translateY(112%)}
}

/* ── 푸터 서명선 ──────────────────────────────────────────
   판 위에서 또렷해진 그 선이, 페이지 맨 끝 상호 아래에 한 줄로 놓인다. 6개 페이지 공통.
   기본값은 '보임' — JS가 죽으면 그냥 정적인 밑줄이다 (검은 화면 규칙과 같은 철학, 방향만 반대) */
.ft .brand::after{content:"";display:block;width:96px;height:1px;margin-top:13px;
  background:var(--paper);opacity:.5;transform-origin:0 50%}
.js .ft .rv .brand::after{transform:scaleX(0);opacity:0;
  transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.js .ft .rv.in .brand::after{transform:none;opacity:.5;transition-delay:.15s}
@media(prefers-reduced-motion:reduce){
  .js .ft .rv .brand::after,.js .ft .rv.in .brand::after{transform:none;opacity:.5;transition:none}
}

/* 작업 전 / 작업 후 비교 — 같은 차·같은 패널·같은 카메라·같은 조명으로 찍은 두 장이 있을 때 쓴다.
   손잡이는 <input type=range>. JS가 없어도 두 장이 그대로 보이고, 슬라이더만 안 움직인다. */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--ink-2);isolation:isolate}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .ba-b{clip-path:inset(0 0 0 var(--ba,50%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;background:var(--paper);opacity:.9;pointer-events:none;z-index:2}
.ba-line::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:2px solid var(--paper);background:rgba(11,11,12,.5)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.ba-tag{position:absolute;bottom:14px;z-index:2;font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:rgba(11,11,12,.72);border:1px solid var(--line-2)}
.ba-tag-a{left:14px}.ba-tag-b{right:14px}
@media(prefers-reduced-motion:reduce){.ba .ba-b{transition:none}}

/* 인쇄·PDF: 스크롤로 드러나는 요소가 빈 채로 나오지 않게 전부 보이게 한다 */
@media print{
  .rise,.rv,.js .rv,.stage-cap,.js .stage-cap{opacity:1!important;transform:none!important;animation:none!important;display:block!important}
  .js .stage{height:auto!important}
  .js .stage-sticky{position:relative!important;height:auto!important;display:block!important}
  .js .stage-media{position:relative!important;height:auto!important;aspect-ratio:16/9}
  .js .stage-media video+video{display:none!important}
  .dock,.hd,.cue,.nol-beam,.gal-nav{display:none!important}
  .hero,.pgh,.band{min-height:0!important}
  body{background:#fff;color:#111}
  .cmp caption{position:static!important;width:auto!important;height:auto!important;clip:auto!important;
    text-align:left;font-weight:700;padding:0 0 8px}
}

.cmp td a{color:var(--paper);border-bottom:1px solid var(--line-2)}

/* ══════════════════════════════════════════════════════════
   인트로 — 실제 차 사진 위로 빛이 두 번 스치고(광택면 반짝) 상호가 뜬 뒤 본화면으로 열린다. 3.1초, 한 세션 1회.
   transform·opacity만 움직인다. JS가 살아 있을 때(.js)만 뜨고, 본 세션(.intro-seen)·동작 줄이기에선 안 뜬다.
   ══════════════════════════════════════════════════════════ */
.intro{display:none}
.js .intro{display:block;position:fixed;inset:0;z-index:100;background:var(--ink);overflow:hidden;cursor:pointer;
  animation:intro-out .5s var(--ease) 2.6s forwards}
.js .intro.off,.intro-seen .intro{display:none!important}
.intro-bg,.intro-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.intro-bg{transform:scale(1.08);opacity:0;animation:intro-bg 2.3s var(--ease) .05s forwards}
.intro-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.45) 0%,rgba(11,11,12,.62) 55%,rgba(11,11,12,.9) 100%)}
.intro-sweep{position:absolute;top:-30%;bottom:-30%;left:-60vw;width:34vw;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,243,239,0) 0%,rgba(244,243,239,.28) 50%,rgba(244,243,239,0) 100%);
  transform:skewX(-18deg) translate3d(0,0,0)}
.intro-sweep.a{animation:intro-sweep 1.25s cubic-bezier(.45,0,.2,1) .4s forwards}
.intro-sweep.b{width:12vw;opacity:.75;animation:intro-sweep 1.05s cubic-bezier(.45,0,.2,1) 1.15s forwards}
.intro-mark{position:absolute;left:0;right:0;top:56%;text-align:center;opacity:0;transform:translateY(12px);
  animation:intro-mark .7s var(--ease) 1.45s forwards}
.intro-mark b{display:block;font-size:clamp(28px,6.8vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.1;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.intro-mark span{display:block;margin-top:8px;font-size:12px;letter-spacing:.22em;color:var(--mute)}
.intro-mark i{display:block;width:44px;height:4px;margin:16px auto 0;background:var(--signal);transform:scaleX(0);animation:intro-bar .5s var(--ease) 1.9s forwards}
.intro-skip{position:absolute;left:0;right:0;bottom:calc(28px + var(--sb));text-align:center;font-size:12px;color:var(--faint);opacity:0;animation:intro-skip .6s ease 1.1s forwards}
@keyframes intro-bg{to{opacity:1;transform:scale(1)}}
@keyframes intro-sweep{to{transform:skewX(-18deg) translate3d(170vw,0,0)}}
@keyframes intro-mark{to{opacity:1;transform:none}}
@keyframes intro-bar{to{transform:scaleX(1)}}
@keyframes intro-skip{to{opacity:1}}
@keyframes intro-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.js .intro{display:none!important}}
@media print{.intro{display:none!important}}

/* 자동재생이 막힌 기기(저전력 모드 등)에서만 뜨는 안내 칩 — 한 번 재생되면 사라진다 */
.play-hint{display:none;position:absolute;left:50%;bottom:calc(84px + var(--dock));transform:translateX(-50%);z-index:3;
  align-items:center;height:38px;padding:0 14px;border-radius:999px;background:rgba(11,11,12,.74);border:1px solid var(--line-2);
  color:var(--paper);font-size:13px;white-space:nowrap;backdrop-filter:blur(6px)}
.noautoplay .play-hint{display:inline-flex}

/* 폰 스크롤 버벅임 대책(9/7): 영상 위에 얹힌 backdrop-filter 는 매 프레임 배경을 다시 읽어 폰 GPU가 가장 힘들어한다.
   900px 미만에서는 블러를 전부 끄고 진한 반투명 배경으로 대신한다. */
@media(max-width:899px){
  .hd,.hd.on,.dock,.play-hint,.facts div,.note{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .hd.on{background:rgba(11,11,12,.92)}
  .dock{background:rgba(11,11,12,.94)}
}
@media(max-width:899px){
  /* 갤러리 캡션·오시는 길 카드도 블러 없이 — 폰에서 영상·사진 위 블러 0개 */
  .gal-track figcaption,.vcard{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(11,11,12,.78)}
}

/* 고객 시점 검수 미세조정(9/7): 본문 회색 66→74%(폰 실외 가독), 하위 페이지 히어로 리드 84%, 히어로 버튼 줄, 홈 사실칸 줄바꿈 균형,
   한눈에 표 안 링크, PC에서 4칸 카드가 3+1로 깨지던 것 → 한 줄 4칸(900~1099px는 2×2) */
.pgh .lead{color:rgba(244,243,239,.84)}
.pgh .hero-cta{margin-top:6px}
.trust span{text-wrap:balance}
.spec dd a{color:var(--paper);border-bottom:1px solid var(--line-2)}
@media(min-width:900px){.who.n4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.who.n4{grid-template-columns:repeat(4,1fr)}}

/* ══ 제네시스 규격 추가 블록 (2026-09-16) ══
   영상 전면(.reel) · 선언문(.statement) · 예약 구분(.booking2) · 사실 4칸(.facts4) */

/* 영상 전면 — 글자를 올리지 않는다. 글자를 얹으면 영상을 어둡게 덮어야 하고 둘 다 반씩 죽는다 */
.reel{position:relative;height:clamp(420px,86svh,900px);overflow:hidden;background:var(--grey-100)}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.2),transparent 20%,transparent 82%,rgba(17,17,17,.25))}

/* 선언문 — 가장 중요한 한 줄. 글자를 키우는 대신 주변을 가장 크게 비운다 */
.statement{padding:160px 0;text-align:center}
.statement .h2{max-width:15em;margin-inline:auto}
.statement .lead{max-width:30em;margin:20px auto 0}
@media(max-width:960px){.statement{padding:80px 0}}
@media(max-width:600px){.statement{padding:100px 0}}

/* 사실 4칸 */
.facts4{display:grid;border-top:1px solid var(--line)}
.facts4 div{padding:24px 0;border-bottom:1px solid var(--line)}
.facts4 b{display:block;font-weight:300;font-size:clamp(20px,2vw,22px);line-height:1.55;letter-spacing:-.01em}
.facts4 span{display:block;margin-top:4px;font-size:14px;line-height:1.57;color:var(--mute)}
@media(min-width:961px){
  .facts4{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
  .facts4 div{padding:32px 24px;border-bottom:0;border-left:1px solid var(--line)}
  .facts4 div:first-child{border-left:0;padding-left:0}
}

/* 예약 구분 2단 — 이 사이트에서 가장 중요한 구분 */
.booking2{display:grid;gap:20px}
.booking2>div{border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 28px}
.booking2 .mark{display:inline-block;font-size:13px;line-height:1.54;font-weight:500;color:var(--faint);
  border:1px solid var(--line);border-radius:var(--r);padding:4px 10px}
.booking2 h3{margin-top:16px;font-weight:300;font-size:clamp(24px,2.4vw,28px);line-height:1.43;letter-spacing:-.01em}
.booking2 p{margin-top:10px;font-size:16px;line-height:1.63;color:var(--mute)}
.booking2 ul{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);list-style:none}
.booking2 li{font-size:15px;line-height:2}
.booking2 .no-book{background:var(--ink-3)}
.booking2 .no-book .mark{border-color:var(--signal);color:#B85400}
@media(min-width:961px){.booking2{grid-template-columns:repeat(2,1fr);gap:24px}}

/* 호버 효과는 마우스가 있는 화면에서만 — 없으면 폰에서 탭한 뒤 효과가 그대로 남는다 */
@media (hover:hover) and (pointer:fine){
  .btn.accent:hover{background:#FF8420}
  .btn.ghost:hover{border-color:var(--paper)}
  .btn.link:hover{color:var(--paper);transform:none}
  .nav a:hover{color:var(--paper)}
  .nav a:hover::after{right:0}
  .card:hover video,.card:hover img{transform:scale(1.04)}
  .gal-track figure:hover img{transform:scale(1.04)}
  .gal-nav button:hover{border-color:var(--paper);background:rgba(244,243,239,.06)}
  .ft-links a:hover{color:var(--paper)}
  .crumb a:hover{color:var(--paper)}
  .ft-nav a:hover{border-bottom-color:var(--signal)}
}

/* 폰 헤더 버튼도 터치 목표 48px 를 지킨다 */
@media(max-width:899px){ .hd-cta .btn{height:48px;padding:0 18px} }

/* ── 밝은 섹션 안의 '어두운 조각' ──
   영상·사진 위에 얹힌 요소는 밝은 섹션 안에 있어도 어두운 테마를 유지해야 한다.
   안 그러면 검은 영상 위에 검은 글자가 올라가 안 보인다. */
.on-light .card{
  --paper:#ffffff; --mute:rgba(255,255,255,.78); --faint:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.15); --line-2:rgba(255,255,255,.28);
  background:var(--grey-100); color:#fff;
}
.on-light .card .btn.link{color:rgba(255,255,255,.78)}

/* 오시는 길·기다리는 동안 카드 — 배경을 테마에 맡긴다(예전엔 검정으로 박혀 있었다) */
.vcard{background:var(--ink-2);backdrop-filter:none}
.on-light .vcard{border-color:var(--line)}
.visit .wrap{padding-block:0}          /* 섹션 여백(140px)을 쓰고 자체 여백은 없앤다 */
.on-light.visit::before{display:none}  /* 어두운 그라데이션은 밝은 섹션에서 끈다 */

/* ── 헤더: 첫 화면 위에서는 투명·흰 글자, 스크롤하면 흰 배경·검은 글자 ──
   밝은 섹션이 생겼으므로 검은 띠로 남으면 안 된다. 역할 변수만 뒤집는다. */
.hd.on{
  --ink:var(--grey-0); --ink-2:var(--grey-1); --ink-3:var(--grey-2);
  --paper:var(--grey-100); --mute:var(--grey-70); --faint:var(--grey-60);
  --line:var(--grey-10); --line-2:var(--grey-20);
  background:var(--grey-0);backdrop-filter:none;border-color:var(--grey-10);
  color:var(--paper)   /* 변수만 바꾸면 안 된다 — body 의 흰 글자색이 그대로 내려온다 */
}
.hd.on .brand span{color:var(--signal)}      /* 상호 밑 영문만 브랜드색 유지 */

/* 오시는 길: 원래 .wrap 좌우 여백이 0으로 박혀 있어 버튼이 화면 밖으로 나갔다 */
.visit .wrap{padding-inline:var(--gutter)}

/* == 하위 페이지 리듬 (2026-09-16) - 홈과 같은 규칙으로 맞춘다 == */

/* 덩어리 안은 절반, 덩어리 사이는 전부.
   밝은 칸이 연달아 오면 둘 사이를 반으로 줄인다. 어두운 칸이나 영상이 끼면 다시 벌어진다.
   이 한 줄이 페이지를 '칸의 나열'이 아니라 '문단'으로 읽히게 만든다. */
/* (2026-09-16 철회) 밝은 칸을 전부 절반으로 붙였더니 여덟 칸이 한 덩어리로 읽혔다.
   기본은 140px 그대로 두고, 절반(70px)은 진짜 한 덩어리일 때만 손으로 지정한다. */

/* 흰 바탕 위 오렌지 글씨 금지 - 오렌지는 면/바/칩/버튼 전용이다.
   라벨은 회색으로 내린다(밝은 배경에서 읽히고, 브랜드색을 아껴 쓰면 더 눈에 띈다). */
.on-light .spec dt,
.on-light .cmp thead th,
.on-light .flow-txt .no,
.on-light .vcard .k,
.hd.on .brand span{color:var(--grey-60)}

/* 표 가장자리 '더 있음' 그림자도 밝은 칸에서는 검정이 아니라 회색으로 */
.on-light .cmp-wrap{background:
  linear-gradient(to right,var(--grey-0) 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--grey-0) 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(17,17,17,.16),transparent) left center/16px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(17,17,17,.16),transparent) right center/16px 100% no-repeat scroll}

/* 한 줄짜리 선언 칸은 줄바꿈 균형을 잡는다 */
.statement .h2{text-wrap:balance}

/* 섹션 상하 여백은 한 숫자로 — 140 / 태블릿 64 / 모바일 80.
   태블릿이 모바일보다 좁은 건 오타가 아니다: 모바일은 한 화면에 한 덩어리만 보여서
   구분을 여백으로 줘야 하고, 태블릿은 가로로 넓어 이미 구분이 된다. */
@media(max-width:960px){ .talk,.gal,.faq .wrap{padding-block:64px} }
@media(max-width:600px){ .talk,.gal,.faq .wrap{padding-block:80px} }

/* 마지막 줄에 한 낱말만 덩그러니 남는 것(고아 줄)을 막는다.
   짧은 제목·단서 줄에만 건다 — 긴 본문에 걸면 줄 길이가 들쭉날쭉해진다.
   실측(2026-09-16): 갤럭시 360px '…원하시는 / 분', 412px '…플레이스 / 공지 기준' 두 건이 잡혔다. */
.who b,.facts4 b,.booking2 h3,.h3,.talk-note,.cmp-hint,small{text-wrap:balance}

/* 오시는 길 카드의 단서 줄 — <small> 은 인라인이라 text-wrap:balance 가 안 먹는다.
   블록으로 세워야 줄 나눔이 균형을 잡는다(410px 대에서 '공지 기준' 두 글자만 남던 줄). */
.vcard small{display:block;font-size:13px;line-height:1.55;color:var(--mute);font-weight:300;margin-top:4px;text-wrap:balance}

/* 머리띠: 상호가 눌려 찌그러지지 않게 하고, 폰에서는 버튼 앞말을 감춘다.
   실측(2026-09-16) 320·360·375px 에서 상호 끝과 버튼 시작 사이가 0px 이었다 — 영문 상호가 잘렸다. */
.hd .brand{flex:none}

@media(max-width:340px){ .hd-cta .btn{padding:0 12px;font-size:13px} }   /* 320px 대에서 사이가 8px 밖에 안 남던 것 */

/* 폰에서는 하단 바가 톡톡·오시는 길·예약하기를 늘 보여주므로 본문 속 톡톡 안내 칸은 감춘다.
   같은 말이 다섯 페이지에 반복되던 것(실측) — PC 에는 하단 바가 없어 그대로 둔다. */
@media(max-width:899px){ .talk{display:none} }

/* .wrap 에 폭(width:100%)이 없으면, 격자(display:grid) 안에서 좌우 margin:auto 가 상자를 글자 폭만큼 줄이고 가운데로 민다.
   홈 첫 화면에서 리드 문장을 뺐더니 글 상자가 좁아져 제목이 로고보다 80px 안쪽에서 시작했다(2026-09-16 실측). */

/* 첫 화면 영상 위 작은 글 — 회색(--faint)은 영상의 밝은 부분(수건) 위에서 흐려진다 */
.hero .eyebrow{color:rgba(255,255,255,.82)}