/* 감나무집 v7 — 숯색 바탕 · 얇은 고딕 · 감빛 한 가지 포인트 (DESIGN.md) */
:root{
  --bg:#141517;--bg2:#1A1B1F;--plate:#2A2C34;--tx:#EEE7DC;--tx2:#A9A196;--ln:rgba(238,231,220,.14);--ln2:rgba(238,231,220,.26);--ac:#DD7F51;
  --f:'PretendardSub',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --hd:72px;--gut:40px;--ease:cubic-bezier(.2,.7,.2,1);
  /* 아주 옅은 잡음(CSS 데이터 URI — 생성 이미지 아님)과 숯불빛 */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .86 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glow:radial-gradient(ellipse 46% 38% at 88% 0%,rgba(221,127,81,.055),rgba(221,127,81,0) 72%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--hd)}
body{margin:0;background:var(--noise),var(--bg);color:var(--tx);font-family:var(--f);font-size:16px;line-height:1.7;font-weight:400;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html[lang="zh-CN"] body{font-family:'NotoSCSub','PingFang SC','Microsoft YaHei',var(--f);word-break:normal;line-break:strict}
html[lang="ja"] body{font-family:'NotoJPSub','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,var(--f);word-break:auto-phrase;line-break:strict}
html:is([lang="ja"],[lang="zh-CN"]) body{text-wrap:pretty}
[lang="ko"]{font-family:var(--f);word-break:keep-all}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd,figure,blockquote,p,h1,h2,h3{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
svg{display:block}
.nw{white-space:nowrap}
.tn{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ac);color:var(--bg);padding:10px 16px;border-radius:2px}
.skip:focus{top:12px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dk{color:var(--tx2);font-size:.82em;font-weight:400;margin-left:.6em;letter-spacing:0;white-space:nowrap}

/* ---------- 머리 */
.hd{position:sticky;top:0;z-index:40;background:var(--bg);background-image:var(--noise);border-bottom:1px solid var(--ln)}
.hd-row{display:flex;align-items:center;gap:24px;height:var(--hd)}
.wm{display:inline-flex;align-items:baseline;gap:10px;flex:none;min-height:44px;align-items:center}
.wm-m{width:22px;height:22px;flex:none;color:var(--tx);align-self:center}
.wm b{font-size:22px;font-weight:300;letter-spacing:.22em;margin-right:-.22em}
.wm small{font-size:12px;color:var(--tx2);letter-spacing:.14em}
.gnb{flex:1 1 auto;min-width:0}
.gnb ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 2px}
.gnb a{display:block;padding:10px 12px;font-size:15px;color:var(--tx2);white-space:nowrap;transition:color .2s}
.gnb a:hover{color:var(--tx)}
.hd-tel{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--ln2);border-radius:999px;font-size:15px;flex:none;transition:border-color .2s,background .2s}
.hd-tel:hover{border-color:var(--ac)}
.hd-tel svg{width:17px;height:17px;color:var(--ac)}
.lsw{display:flex;align-items:center;flex:none}
.lsw a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 6px;font-size:13px;color:var(--tx2);transition:color .2s}
.lsw a:hover{color:var(--tx)}
.lsw a[aria-current]{color:var(--tx);text-decoration:underline;text-decoration-color:var(--ac);text-underline-offset:6px}
.lsel{display:none;position:relative;flex:none}
.lsel summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--ln2);border-radius:999px;font-size:13px;cursor:pointer}
.lsel summary::-webkit-details-marker{display:none}
.lsel summary svg{width:16px;height:16px;color:var(--tx2)}
.lsel-m{position:absolute;right:0;top:48px;display:flex;flex-direction:column;min-width:128px;background:var(--bg2);border:1px solid var(--ln2);border-radius:4px;padding:6px 0;z-index:5}
.lsel-m a{display:flex;align-items:center;min-height:44px;padding:0 18px;font-size:15px;color:var(--tx2)}
.lsel-m a[aria-current]{color:var(--tx)}
.burger{display:none;flex:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.burger i{display:block;width:22px;height:1.5px;background:var(--tx);transition:transform .25s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
html.gnb-fold .gnb{display:none}
html.gnb-fold .burger{display:flex}
html.gnb-fold .wm{margin-right:auto}
.drawer{position:fixed;left:0;right:0;top:var(--hd);bottom:0;z-index:39;background:var(--bg);overflow:auto;padding:24px var(--gut) 48px}
.drawer[hidden]{display:none}
.dr-nav a{display:block;padding:16px 0;font-size:26px;font-weight:300;border-bottom:1px solid var(--ln)}
.dr-act{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.dr-lsw{margin-top:28px;margin-left:-6px}
body.dr-open{overflow:hidden}

/* ---------- 버튼 */
.btn-call{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;min-height:64px;padding:10px 30px 10px 24px;border-radius:999px;background:var(--ac);color:var(--bg);font-size:18px;font-weight:500;transition:background .2s,transform .2s var(--ease)}
.btn-call:hover{background:#E8916A}
.btn-call svg{width:22px;height:22px;flex:none}
.bc-n{font-weight:400;letter-spacing:.02em;display:inline-flex;align-items:center}
.bc-n::before{content:'';width:1px;height:18px;background:rgba(20,21,23,.35);margin-right:14px}
.btn-call-s{min-height:56px;font-size:16px;padding:8px 24px 8px 20px}
.dirs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dirs-l{font-size:14px;color:var(--tx2);margin-right:6px}
.btn-ln{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:1px solid var(--ln2);border-radius:999px;font-size:14px;transition:border-color .2s,color .2s}
.btn-ln:hover{border-color:var(--tx)}
.btn-ln svg{width:16px;height:16px;flex:none}
.btn-ln svg:last-child{width:13px;height:13px;color:var(--tx2)}

/* ---------- 사진 — 같은 보정(밝은 낮 사진을 숯색에 맞춤) + 가장자리 비네트 */
.ph{position:relative;overflow:hidden;border-radius:2px;background:#0E0F11}
.ph img,.dial-ph{filter:brightness(.93) contrast(1.05) saturate(.95)}
.ph::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(238,231,220,.06),inset 0 0 70px rgba(8,8,10,.42)}

/* ---------- 첫 화면 */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 48% 62% at 74% 46%,rgba(221,127,81,.08),rgba(20,21,23,0) 70%)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:40px;align-items:center;min-height:min(calc(100svh - var(--hd)),920px);padding-top:40px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--ln2);border-radius:999px;font-size:13px;color:var(--tx2)}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac)}
h1{margin-top:28px;font-weight:300}
.h1-n{display:inline-block;font-size:28px;letter-spacing:.24em;margin-right:-.24em}
.h1-r{font-size:14px;color:var(--tx2);letter-spacing:.14em;margin-left:16px}
.h1-c{display:block;margin-top:8px;font-size:16px;color:var(--tx2);letter-spacing:.04em;font-weight:400}
.hero-big{margin-top:24px;font-size:clamp(64px,8.6vw,132px);font-weight:200;line-height:1.02;letter-spacing:-.02em}
html:not([lang="ko"]) .hero-big{font-size:clamp(52px,6.6vw,104px);letter-spacing:-.025em}
.hero-lead{margin-top:24px;max-width:28em;font-size:19px;line-height:1.7;color:var(--tx2);font-weight:300}
.hero-cta{margin-top:36px}
.hero .dirs{margin-top:18px}
.hero-v{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-v::before{content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(221,127,81,.17),rgba(221,127,81,.06) 55%,rgba(221,127,81,0))}
/* 문자판 620(SVG — 키워도 흐려지지 않음) · 사진 원은 282 CSS px 이하(436px 원본을 2× 화면 1.29배) */
.dial{position:relative;width:min(620px,100%);aspect-ratio:1}
.dial::before{content:'';position:absolute;left:50%;top:50%;width:min(60%,370px);aspect-ratio:1;transform:translate(-50%,-50%);background:#0C0D0F;border:1px solid rgba(238,231,220,.1);border-radius:50%;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.dial-s{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial-s .ring{fill:none;stroke:rgba(238,231,220,.2);stroke-width:1}
.dial-s .ticks line{stroke:rgba(238,231,220,.28);stroke-width:1.2}
.dial-s .ticks .tk-h{stroke:rgba(221,127,81,.7)}
.dial-s .arc{fill:none;stroke:var(--ac);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.dial-s .arc-dot{fill:var(--ac)}
.dial-pw{position:absolute;left:50%;top:50%;width:min(46%,282px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}
.dial-pw::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(238,231,220,.08),inset 0 0 50px rgba(8,8,10,.5)}
.dial-ph{width:100%;height:100%;object-fit:cover}
.dial-l{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;color:var(--tx2);letter-spacing:.06em;white-space:nowrap}
.dial-0{top:10%}
.dial-30{bottom:9.5%;color:var(--ac);font-size:14px}
.hero-info{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 0;margin-top:40px;padding:18px 0 22px;border-top:1px solid var(--ln);font-size:14px;color:var(--tx2)}
.hero-info li+li::before{content:'';display:inline-block;width:1px;height:12px;background:var(--ln2);margin:0 16px;vertical-align:-1px}
.hero-info li:first-child{color:var(--tx)}
.hero-info .hi-c{margin-left:auto}
.hero-info .hi-c::before{display:none}

/* 첫 화면 움직임(JS 없이) — 줄마다 떠오르기 · 30분 호 긋기 · 사진 가라앉기 */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes settle{from{transform:scale(.96)}to{transform:none}}   /* 1 보다 키우지 않는다(2× 화면 1.3배 규칙) */
.js .hero-t>*{animation:rise .9s var(--ease) both}
.js .hero-t>:nth-child(2){animation-delay:.08s}
.js .hero-t>:nth-child(3){animation-delay:.16s}
.js .hero-t>:nth-child(4){animation-delay:.24s}
.js .hero-t>:nth-child(5){animation-delay:.32s}
.js .hero-t>:nth-child(6){animation-delay:.4s}
.js .dial-s .arc{animation:draw 1.8s var(--ease) .35s both}
.js .dial-s .arc-dot,.js .dial-30{animation:fade .5s ease 1.9s both}
.js .dial-ph{animation:settle 1.4s var(--ease) .1s both}

/* ---------- 섹션 공통(머리는 섹션마다 다르게) */
.sec{padding:112px 0;border-top:1px solid var(--ln);background:var(--glow)}
.sec-2{background:var(--noise),var(--glow),var(--bg2)}
.eb{font-size:12px;letter-spacing:.24em;color:var(--tx2);display:flex;align-items:center;gap:14px}
.eb::before{content:'';width:28px;height:1px;background:var(--ac)}
.sh{margin-bottom:56px}
.sh h2,.if-head h2,.vc-head h2{margin-top:14px;font-size:clamp(32px,3.6vw,46px);font-weight:300;line-height:1.25;letter-spacing:-.01em}
.sh-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.sh-n{margin-top:12px;font-size:14px;color:var(--tx2)}
.eb-s{font-size:12px;letter-spacing:.24em;color:var(--ac)}
.h3s{font-size:13px;letter-spacing:.12em;color:var(--tx2);font-weight:400;margin-bottom:14px}
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv:not(.in){opacity:0;transform:translateY(16px)}
.js .hero .rv:not(.in){opacity:1;transform:none}
.tel-l{display:inline-block;padding:9px 0;text-decoration:underline;text-decoration-color:var(--ac);text-decoration-thickness:1px;text-underline-offset:5px;margin:-9px 0}

/* ---------- 한 점 띠 — 다른 장면 두 장 + 맛 한 줄 */
.band{padding:8px 0 96px}
.bd-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}
.bd-ph{display:grid;grid-template-columns:repeat(2,340px);gap:16px}
.bd-c img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bd-cap{display:flex;flex-direction:column;gap:14px;max-width:24em;font-size:clamp(19px,1.6vw,23px);font-weight:300;line-height:1.75}
.bd-cap .eb-s{font-size:12px;line-height:1.4}

/* ---------- 메뉴 */
.mn-row{display:grid;grid-template-columns:450px minmax(0,1fr);gap:72px;align-items:center}
.mn-row-2{margin-top:72px;grid-template-columns:minmax(0,1fr) 340px}
.mn-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mn-ph-s{width:min(340px,100%);justify-self:end}
.mn-ph-s img{aspect-ratio:3/2}
.mn-g{background:var(--plate);padding:40px 44px 44px;border-radius:2px}
.mn-h{margin-top:10px;font-size:clamp(28px,2.8vw,38px);font-weight:300;line-height:1.25}
.mn-h .dk{display:block;margin:6px 0 0;font-size:15px}
.mn-ja{margin-top:10px;font-size:14px;color:var(--tx2)}
.mn-two{margin-top:18px;font-size:14px;letter-spacing:.06em;color:var(--tx2)}
.mn-list{margin-top:14px}
.mi{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:baseline;column-gap:16px;padding:16px 0;border-top:1px solid var(--ln)}
.mi:last-child{border-bottom:1px solid var(--ln)}
.mi-n{font-size:20px}
.mi-n .dk{font-size:14px}
.mi-dots{align-self:end;margin-bottom:.55em;border-bottom:1px dotted var(--ln2)}
.pr{font-size:15px;color:var(--tx2);white-space:nowrap}
.pr b{font-size:21px;font-weight:300;color:var(--tx);font-variant-numeric:lining-nums tabular-nums;margin:0 2px}
.mi-d,.mi-w{grid-column:1/-1;margin-top:6px;font-size:14px;color:var(--tx2)}
.mi-w{margin-top:2px;color:var(--ac)}
.mn-var{margin-top:14px;font-size:14px;color:var(--tx2);display:flex;align-items:center;gap:10px}
.mn-var i{width:6px;height:6px;border-radius:50%;background:var(--ac);flex:none}
.mn-ment{margin-top:72px;padding-top:24px;border-top:1px solid var(--ln);display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 40px}
.mm-h{font-size:14px;color:var(--tx2)}
.mm-h small{font-size:13px}
.mn-ment ul{display:flex;flex-wrap:wrap;gap:10px 32px}
.mn-ment li{font-size:16px;display:inline-flex;align-items:baseline}
.mn-ment li b{margin-left:10px;font-weight:400;color:var(--ac)}

/* ---------- 예약 안내 — 큰 숫자가 머리 */
.rs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:'head quote' 'head act';gap:56px 80px}
.rs-l{grid-area:head;align-self:start}
.rs-q{grid-area:quote;align-self:end}
.rs-act{grid-area:act}
.rs-cta{margin-top:32px}
.rs-h{font-size:22px;font-weight:300}
.rs-num{margin-top:8px;display:flex;align-items:baseline;gap:14px;font-size:clamp(120px,14vw,208px);font-weight:200;line-height:.9;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.rs-num small{font-size:20px;font-weight:300;letter-spacing:0;color:var(--ac)}
.rs-q{padding-left:24px;border-left:1px solid var(--ac);font-size:clamp(19px,1.7vw,23px);line-height:1.8;font-weight:300}
.rs-dl>div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:8px 24px;padding:20px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.rs-dl dt{font-size:14px;color:var(--tx2);padding-top:3px}
.rs-dl dd{font-size:17px}

/* ---------- 시간과 자리 — 소개 한 단락 + 세 칸 판 */
.if-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 80px;align-items:end;margin-bottom:56px}
.hs-lead{font-size:clamp(18px,1.6vw,21px);font-weight:300;line-height:1.8}
.hs-mean{margin-top:10px;font-size:15px;color:var(--tx2)}
.board{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.2fr);border-top:1px solid var(--ln2)}
.bd-col{padding:32px 36px 8px 0}
.bd-col+.bd-col{padding-left:36px;border-left:1px solid var(--ln)}
.hrs{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:16px}
.hrs li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:4px;padding:6px 0;font-size:17px}
.hr-d{white-space:nowrap}
.hr-t small{display:block;font-size:14px;color:var(--tx2)}
.hrs .is-off{color:var(--tx2)}
.rs-note{margin-top:16px;font-size:14px;color:var(--tx2);display:flex;align-items:baseline;gap:10px}
.rs-note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac);flex:none;align-self:center}
.seat li{display:grid;grid-template-columns:5em minmax(0,1fr);gap:12px;padding:8px 0}
.st-k{color:var(--tx2);font-size:15px}
.st-v{font-size:17px}
.seat-n{margin-top:14px;font-size:15px;color:var(--tx2);line-height:1.9}
.chip{display:inline-block;margin-left:4px;padding:2px 12px;border:1px solid var(--ln2);border-radius:999px;font-size:13px;color:var(--tx);white-space:nowrap}
.inf>div{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:12px;padding:8px 0}
.inf dt{font-size:15px;color:var(--tx2)}
@media (min-width:761px){html[lang="en"] .inf>div{grid-template-columns:minmax(0,9.5em) minmax(0,1fr)}}
.inf dd{font-size:16px}

/* ---------- 리뷰 키워드 — 큰 숫자 64 머리 */
.vc-head{margin-bottom:48px}
.vc-head h2{margin-top:0}
.vc-src{margin-top:12px;font-size:14px;color:var(--tx2)}
.vc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:80px;align-items:start}
.kw-list li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(48px,1fr) 6.5em;align-items:center;column-gap:20px;padding:16px 0;border-top:1px solid var(--ln)}
.kw-list li:last-child{border-bottom:1px solid var(--ln)}
.kw-t{font-size:17px}
.kw-list .is-hl .kw-t{color:var(--ac)}
.kw-list .kw-top{padding:18px 0 20px;border-top-color:var(--ln2)}
.kw-top .kw-t{font-size:20px}
.kw-top .kw-v{color:var(--ac)}
.kw-top .kw-v b{font-size:48px;font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--tx);margin-right:4px}
.kw-list .dk,.kw-chips .dk{display:block;margin:2px 0 0;font-size:13px}
.kw-bar{position:relative;height:1px;background:var(--ln)}
.kw-bar i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--ac);transform-origin:left;transform:scaleX(var(--v));transition:transform 1.4s var(--ease) .2s}
.js .kw-list li:not(.in) .kw-bar i{transform:scaleX(0)}
.kw-v{text-align:right;font-size:16px}
.kw-more{margin-top:32px}
.kw-chips{display:flex;flex-wrap:wrap;gap:8px}
.kw-chips li{display:inline-flex;align-items:baseline;gap:10px;padding:7px 14px;border:1px solid var(--ln2);border-radius:999px}
.kw-chips .kw-t{font-size:15px}
.kw-chips .kw-l{display:inline-flex;flex-direction:column}
.kw-chips b{font-weight:400;font-size:14px;color:var(--tx2)}
.kw-note{margin-top:20px;font-size:14px;color:var(--tx2)}
.vc-sdh{font-size:15px;color:var(--tx2);margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.vc-sdh b{color:var(--ac);font-weight:400}
.tb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tg-c img{width:100%;aspect-ratio:1;object-fit:cover}

/* ---------- 오시는 길 */
.vs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.vs-dl>div{padding:20px 0;border-top:1px solid var(--ln)}
.vs-dl dt{font-size:13px;color:var(--tx2);letter-spacing:.06em}
.vs-dl dd{margin-top:6px;font-size:18px}
.vs-ko{margin-top:8px}
.vs-ko small{display:block;font-size:13px;color:var(--tx2)}
.vs-ko span{font-size:16px}
.vs-btn{margin-top:24px}
.map{position:relative;overflow:hidden;border-radius:2px;background:#101113}
.map img{width:100%}
.pin{position:absolute;transform:translate(-50%,-50%)}
.pin i{display:block;width:16px;height:16px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 6px rgba(221,127,81,.22),0 0 0 14px rgba(221,127,81,.08)}
.pin b{position:absolute;left:26px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 12px;background:var(--bg);border:1px solid var(--ln2);border-radius:2px;font-size:14px;font-weight:400}
.osm{display:block;margin-top:10px;font-size:12px;color:var(--tx2)}
.vs-ph{margin-top:32px;max-width:520px}
.vs-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
.vs-ph figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px 16px 12px;font-size:13px;color:var(--tx);background:linear-gradient(rgba(10,10,12,0),rgba(10,10,12,.82))}
.film{margin-top:72px;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:8px 0 22px}
.film-b{display:flex;align-items:center;gap:24px;width:100%;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer}
.play{flex:none;width:64px;height:64px;border-radius:50%;border:1px solid rgba(238,231,220,.7);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s}
.play svg{width:24px;height:24px;margin-left:3px}
.film-b:hover .play{background:var(--ac);color:var(--bg);border-color:var(--ac)}
.film-t{display:flex;flex-direction:column;gap:4px;line-height:1.5}
.film-h{font-size:22px;font-weight:300}
.film-c{font-size:14px;color:var(--tx2)}
.film-n{margin-top:4px;padding-left:88px;font-size:13px;color:var(--tx2);line-height:1.7}
.film-v .film-if{display:block;width:100%;max-width:720px;margin:16px 0 8px;aspect-ratio:16/9;border:0;background:#000}

/* ---------- 맨 아래 */
.ft{padding:0 0 36px;background:var(--glow)}
.ft-band{background:var(--ac);color:#141517;padding:112px 0 104px}
.ft-band .ft-lead{color:#141517;font-weight:400}
.ft-band .btn-call{background:#141517;color:var(--tx)}
.ft-band .btn-call:hover{background:#2A2C34}
.ft-band .btn-call svg{color:var(--ac)}
.ft-band .bc-n::before{background:rgba(238,231,220,.3)}
.ft-band .btn-ln{border-color:rgba(20,21,23,.5);color:#141517}
.ft-band .btn-ln:hover{border-color:#141517;background:rgba(20,21,23,.06)}
.ft-band .btn-ln svg:last-child,.ft-band .dirs-l{color:#141517}
.ft-band :focus-visible{outline-color:#141517}
.ft-cta{text-align:center;display:flex;flex-direction:column;align-items:center}
.ft-big{font-size:clamp(52px,7.4vw,112px);font-weight:200;line-height:1.05;letter-spacing:-.02em}
html:not([lang="ko"]) .ft-big{font-size:clamp(44px,6vw,92px)}
.ft-lead{margin-top:18px;font-size:18px;color:var(--tx2);font-weight:300;max-width:32em}
.ft-btn{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:18px}
.ft-btn .dirs{justify-content:center}
.ft-info{margin-top:72px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px 56px;align-items:start}
.ft-wm .wm-m{display:inline-block;width:20px;height:20px;margin-right:10px;vertical-align:-3px;color:var(--tx)}
.ft-wm b{font-size:20px;font-weight:300;letter-spacing:.22em}
.ft-wm small{display:block;margin-top:2px;font-size:12px;color:var(--tx2);letter-spacing:.14em}
.ft-l li{font-size:14px;color:var(--tx2);line-height:1.9}
.ft-l a{color:var(--tx)}
.ft-lsw{margin-top:-8px}
.ft-lsw a{justify-content:flex-start;min-width:0;padding:0 24px 0 0}
.ft-bot{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.credit{font-size:13px;color:var(--tx2)}
.to-top{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--tx2)}
.to-top svg{width:16px;height:16px}

/* ---------- 반응형 */
@media (max-width:1199px){
  .hd-tel span{display:none}.hd-tel{width:40px;padding:0;justify-content:center}
  .bd-row{grid-template-columns:minmax(0,1fr);gap:28px}
  .bd-ph{grid-template-columns:repeat(2,minmax(0,340px))}
  .mn-row{grid-template-columns:400px minmax(0,1fr);gap:48px}
  .mn-row-2{grid-template-columns:minmax(0,1fr) 340px}
  .vc-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px}
  .kw-list li{grid-template-columns:minmax(0,1.7fr) minmax(40px,1fr) 6.5em;column-gap:14px}
  .bd-col{padding-right:24px}.bd-col+.bd-col{padding-left:24px}
}
@media (max-width:1023px){
  .gnb{display:none}.burger{display:flex}.wm{margin-right:auto}
  /* 태블릿: 글 왼쪽 · 문자판 오른쪽(전화 버튼이 첫 화면 안에) */
  .hero-in{grid-template-columns:minmax(0,1fr) 280px;column-gap:28px;min-height:0;padding-top:48px}
  .hero-info .hi-c{margin-left:0}
  .dial-pw{width:68%}
  .dial::before{width:72%}
  .dial-0{display:none}
  .dial-30{bottom:5.5%}
  .mn-row,.mn-row-2{grid-template-columns:minmax(0,1fr);gap:28px}
  .mn-row-2 .mn-ph{order:-1}
  .mn-ph{max-width:450px}
  .mn-ph-s{justify-self:start}
  .if-head,.vs-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .rs-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'quote' 'act';gap:36px}
  .board{grid-template-columns:minmax(0,1fr)}
  .bd-col,.bd-col+.bd-col{padding:28px 0 20px;border-left:0}
  .bd-col+.bd-col{border-top:1px solid var(--ln)}
  .vc-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .vc-sd{max-width:560px}
  .vs-ph{max-width:560px}
  .ft-info{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  :root{--hd:60px;--gut:20px}
  .hd-row{gap:8px}
  .wm b{font-size:20px}
  .wm small{display:none}
  .hd-lsw{display:none}.lsel{display:block}
  .hero-in{grid-template-columns:minmax(0,1fr);padding-top:20px}
  .hero-v{order:-1;margin-bottom:18px}
  .dial{width:min(340px,100%,max(220px,100svh - 486px))}
  .hero-v::before{width:120%}
  .dial-l{font-size:12px}
  .dial-0{display:none}
  .dial-30{bottom:6.5%}
  .badge{font-size:12.5px;padding:6px 12px}
  h1{margin-top:14px}
  .h1-n{font-size:24px}.h1-c{font-size:15px}
  .hero-big{margin-top:14px;font-size:clamp(48px,14vw,60px)}
  html:not([lang="ko"]) .hero-big{font-size:clamp(40px,11vw,52px)}
  .hero-lead{margin-top:14px;font-size:16.5px}
  .hero-cta{margin-top:22px}
  .hero-info{margin-top:36px;flex-direction:column;gap:4px;padding:16px 0 20px}
  .hero-info li+li::before{display:none}
  .btn-call{min-height:58px;font-size:17px;padding:8px 22px 8px 18px;gap:12px}
  .bc-n::before{margin-right:12px}
  .sec{padding:72px 0}
  .sh{margin-bottom:36px}
  .band{padding:4px 0 64px}
  /* 한 점 띠: 두 장 나란히 4:5 — 359px 높이 원본이라 칸 폭 186 까지(2× 화면 1.3배 이하) */
  .bd-ph{grid-template-columns:repeat(2,minmax(0,186px));gap:12px}
  .bd-c img{aspect-ratio:4/5}
  .bd-cap{font-size:17px}
  .mn-row-2{margin-top:56px}
  .mn-g{padding:28px 22px 30px}
  .mi-n{font-size:18px}
  html:not([lang="ko"]) .mi-dots{visibility:hidden}
  html:not([lang="ko"]) .mi-n .dk{display:block;margin:2px 0 0}
  .pr b{font-size:19px}
  .mn-ment{margin-top:56px}
  .rs-num{font-size:120px}
  .rs-q{font-size:17px}
  .rs-dl>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:16px 0}
  .if-head{margin-bottom:36px}
  .seat li{grid-template-columns:4.5em minmax(0,1fr)}
  .inf>div{grid-template-columns:minmax(0,7em) minmax(0,1fr)}
  .vc-head{margin-bottom:32px}
  .kw-list li{grid-template-columns:minmax(0,1fr) 6.5em;row-gap:10px}
  .kw-top .kw-v b{font-size:40px}
  .kw-bar{grid-column:1/-1;grid-row:2}
  .tb-grid{gap:8px}
  .film{margin-top:56px}
  .film-b{gap:16px}
  .play{width:56px;height:56px}
  .film-h{font-size:19px}
  .film-n{padding-left:0}
  .ft-band{padding:80px 0 76px}
  .ft-info{margin-top:56px}
  .ft-bot{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px) and (max-height:700px){
  .hero-v{order:2;margin:24px 0 0}
}
@media (max-width:374px){
  .btn-call{font-size:16px;gap:10px;padding:8px 18px 8px 16px}
  .bc-n::before{margin-right:10px}
  .lsel summary{padding:0 10px}
}
@media (max-width:339px){
  .hd-row{gap:4px}.lsel summary svg{display:none}
  .btn-call{font-size:15px;gap:8px;padding:8px 14px 8px 12px}
  .bc-n::before{margin-right:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv:not(.in){opacity:1;transform:none}
  .js .kw-list li:not(.in) .kw-bar i{transform:scaleX(var(--v))}
}
/* 낮은 노트북 화면(1366×657·1280×720 등): 첫 화면 글을 줄여 전화·길찾기 버튼이 화면 안에 */
@media (min-width:1024px) and (max-height:800px){
  .hero-in{padding-top:28px}
  h1{margin-top:18px}
  .hero-big{margin-top:14px;font-size:clamp(56px,7.4vw,112px)}
  html:not([lang="ko"]) .hero-big{font-size:clamp(48px,5.8vw,88px)}
  .hero-lead{margin-top:14px}
  .hero-cta{margin-top:24px}
  .dial{width:min(480px,100%)}
  .hero-info{margin-top:24px;padding:14px 0 16px}
}
/* 큰 화면(1680 이상): 첫 화면 폭 1400 · 문자판 680(사진 원은 282 상한 그대로) */
@media (min-width:1680px){
  .hero .wrap{max-width:1480px}
  .dial{width:min(680px,100%)}
}