/* ═══════════════════════════════════════════════════════════
   금조온 金照溫 — Design System
   Brand colors: Clay Hearth #301e15 · Rice Paper #f2e9df
                 Wild Herb #8c8a54 · Stone Steam #231f20 / #f1f2f2
   Type: Paperlogy (페이퍼로지)
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:Paperlogy;font-weight:300;font-display:swap;src:url(/assets/fonts/paperlogy-300.woff2) format("woff2")}
@font-face{font-family:Paperlogy;font-weight:400;font-display:swap;src:url(/assets/fonts/paperlogy-400.woff2) format("woff2")}
@font-face{font-family:Paperlogy;font-weight:600;font-display:swap;src:url(/assets/fonts/paperlogy-600.woff2) format("woff2")}
@font-face{font-family:Paperlogy;font-weight:800;font-display:swap;src:url(/assets/fonts/paperlogy-800.woff2) format("woff2")}

:root{
  --hearth:#301e15;
  --hearth-2:#3b271c;
  --hearth-3:#4a3426;
  --ink:#231f20;
  --paper:#f2e9df;
  --paper-2:#eadfd2;
  --paper-3:#e2d4c4;
  --steam:#f1f2f2;
  --herb:#8c8a54;
  --herb-deep:#626033;
  --herb-soft:#b9b78a;
  --text:#301e15;
  --muted:#6e5a4c;
  --muted-2:#786452;
  --on-dark:#f2e9df;
  --on-dark-muted:#bfae9d;
  --line:rgba(48,30,21,.14);
  --line-strong:rgba(48,30,21,.28);
  --line-dark:rgba(242,233,223,.14);

  --font:Paperlogy,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --hanja:"Noto Serif KR","Nanum Myeongjo","Batang",serif;

  --wrap:1240px;
  --gut:clamp(20px,4.4vw,48px);
  --sec:clamp(88px,12vw,168px);
  --r:2px;

  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --intro:0s;

  --grain: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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .19 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.intro{--intro:1.55s}

/* ── base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);font-weight:400;font-size:16px;line-height:1.75;color:var(--text);
  background:var(--paper) var(--grain);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--herb);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--hearth);color:var(--paper);padding:10px 16px;border-radius:var(--r);transition:top .2s}
.skip:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0;position:relative}
.dark{background:var(--hearth);color:var(--on-dark)}
.ink{background:var(--ink);color:var(--on-dark)}
.paper-2{background:var(--paper-2) var(--grain)}

/* ── type ─────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--herb-deep);text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.dark .eyebrow,.ink .eyebrow{color:var(--herb-soft)}
.h2{font-size:clamp(30px,4.6vw,58px);font-weight:300;line-height:1.28;letter-spacing:-.02em;margin-top:20px}
.h2 b,.h2 strong{font-weight:600}
.h3{font-size:clamp(20px,2vw,24px);font-weight:600;line-height:1.45;letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.35vw,18px);line-height:1.9;color:var(--muted);max-width:640px}
.dark .lead,.ink .lead{color:var(--on-dark-muted)}
.muted{color:var(--muted)}
.hanja{font-family:var(--hanja);font-weight:400}
.num{font-variant-numeric:tabular-nums}
.sec-head{display:grid;gap:22px;margin-bottom:clamp(44px,6vw,80px)}
.sec-head--split{grid-template-columns:1fr;align-items:end}
@media(min-width:960px){.sec-head--split{grid-template-columns:1.1fr .9fr;gap:60px}}
.prose p+p{margin-top:1.1em}
.prose{font-size:17px;line-height:1.95;color:var(--muted)}
.dark .prose,.ink .prose{color:var(--on-dark-muted)}
.prose strong{color:var(--text);font-weight:600}
.dark .prose strong,.ink .prose strong{color:var(--on-dark)}

/* ── buttons ──────────────────────────────────────────── */
.btn{--bg:var(--hearth);--fg:var(--paper);--fill:var(--herb-deep);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;font-size:15px;font-weight:600;letter-spacing:.02em;border-radius:var(--r);background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),transform .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--fill);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--light{--bg:var(--paper);--fg:var(--hearth);--fill:var(--steam)}
.btn--naver{--bg:#03c75a;--fg:#fff;--fill:#02a64b}
.btn--line{--bg:transparent;--fg:currentColor;--fill:rgba(140,138,84,.18);box-shadow:inset 0 0 0 1px currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link-arrow:hover{background-size:0 1px;background-position:100% 100%}
.link-arrow svg{width:15px;height:15px}

/* ── header ───────────────────────────────────────────── */
.hd{position:fixed;inset:0 0 auto;z-index:90;color:var(--paper);transition:transform .5s var(--ease),background-color .4s,color .4s,box-shadow .4s}
.hd__in{display:flex;align-items:center;justify-content:space-between;height:68px}
.hd.is-solid{background:rgba(242,233,223,.9);color:var(--hearth);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hd.is-hidden{transform:translateY(-100%)}
.hd--paper{color:var(--hearth)}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{fill:currentColor}
.logo__mark{width:38px;height:31px}
.logo__word{width:66px;height:22px}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__sub{font-size:9.5px;letter-spacing:.34em;margin-top:5px;opacity:.72;font-weight:600}
.nav{display:none}
.nav__list{display:flex;align-items:center;gap:6px}
.nav a,.nav__drop>button{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;font-size:15px;font-weight:600;letter-spacing:.01em;position:relative}
.nav a::after,.nav__drop>button::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav__drop>button:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__drop{position:relative}
.nav__drop svg{width:10px;height:10px;transition:transform .3s}
.nav__panel{position:absolute;top:100%;left:-8px;min-width:260px;padding:10px;background:var(--paper);color:var(--hearth);border-radius:var(--r);box-shadow:0 20px 50px -20px rgba(48,30,21,.35),0 0 0 1px var(--line);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .35s var(--ease),visibility .3s}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel{opacity:1;visibility:visible;transform:none}
.nav__drop:hover svg{transform:rotate(180deg)}
.nav__panel a{height:auto;padding:12px 14px;display:flex;justify-content:space-between;border-radius:var(--r);font-weight:400}
.nav__panel a::after{display:none}
.nav__panel a:hover{background:var(--paper-2)}
.nav__panel small{color:var(--muted-2);font-size:12px}
.hd__cta{display:none}
.burger{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:transform .4s var(--ease),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1024px){
  .hd__in{height:84px}
  .nav{display:block}
  .hd__cta{display:inline-flex;min-height:44px;padding:0 20px;font-size:14px}
  .burger{display:none}
}
.hd:not(.is-solid) .hd__cta{--bg:var(--paper);--fg:var(--hearth);--fill:var(--steam)}
.hd--paper:not(.is-solid) .hd__cta{--bg:var(--hearth);--fg:var(--paper);--fill:var(--herb-deep)}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:85;background:var(--hearth);color:var(--paper);padding:100px var(--gut) 40px;display:flex;flex-direction:column;gap:28px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-io);visibility:hidden;overflow-y:auto}
.menu-open .mnav{clip-path:inset(0);visibility:visible}
.menu-open{overflow:hidden}
.menu-open .hd{color:var(--paper);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.mnav__main a{display:block;font-size:34px;font-weight:300;line-height:1.5;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .6s var(--ease)}
.menu-open .mnav__main a{opacity:1;transform:none}
.menu-open .mnav__main li:nth-child(2) a{transition-delay:.06s}
.menu-open .mnav__main li:nth-child(3) a{transition-delay:.12s}
.menu-open .mnav__main li:nth-child(4) a{transition-delay:.18s}
.mnav__sub{border-top:1px solid var(--line-dark);padding-top:22px}
.mnav__sub p{font-size:12px;letter-spacing:.24em;color:var(--herb-soft);font-weight:600;margin-bottom:10px}
.mnav__sub a{display:flex;justify-content:space-between;padding:10px 0;font-size:17px;border-bottom:1px solid var(--line-dark)}
.mnav .btn-row{margin-top:auto}
@media(min-width:1024px){.mnav{display:none}}

/* ── hero (home) ──────────────────────────────────────── */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--on-dark);overflow:hidden;display:flex;flex-direction:column}
.hero__media{position:relative;height:64svh;min-height:420px;overflow:hidden}
.hero__media img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transform:scale(1.14);animation:heroZoom 2.8s var(--ease) calc(var(--intro) + .05s) both;will-change:transform}
.hero__video{background:var(--ink)}
.vbtn{position:absolute;right:16px;bottom:16px;z-index:3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--paper);background:rgba(35,31,32,.45);box-shadow:inset 0 0 0 1px rgba(242,233,223,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,transform .4s var(--ease)}
.vbtn:hover{background:rgba(35,31,32,.75);transform:scale(1.06)}
.vbtn svg{width:16px;height:16px}
.vbtn .i-play,.vbtn.is-paused .i-pause{display:none}
.vbtn.is-paused .i-play{display:block}
@media(min-width:960px){.vbtn{right:28px;bottom:28px}}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,31,32,.35) 0%,rgba(35,31,32,0) 30%,rgba(35,31,32,.2) 60%,var(--ink) 100%)}
.hero__body{position:relative;z-index:2;margin-top:-120px;padding-bottom:64px}
.hero h1{font-weight:300}
.hero__brand{display:block;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--herb-soft);margin-bottom:22px;animation:fadeUp 1s var(--ease) calc(var(--intro) + .2s) both}
.hero__display{display:block;font-size:clamp(44px,8.2vw,112px);line-height:1.12;letter-spacing:-.035em}
.hero__display b{font-weight:600}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:inline-block;animation:lineUp 1.2s var(--ease) both;animation-delay:calc(var(--intro) + .32s + var(--i,0) * .12s)}
.hero__p{margin-top:28px;max-width:520px;font-size:clamp(16px,1.3vw,18px);line-height:1.85;color:var(--on-dark-muted);animation:fadeUp 1s var(--ease) calc(var(--intro) + .75s) both}
.hero .btn-row{margin-top:34px;animation:fadeUp 1s var(--ease) calc(var(--intro) + .9s) both}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dark);font-size:14px;color:var(--on-dark-muted);animation:fadeUp 1s var(--ease) calc(var(--intro) + 1.05s) both}
.hero__facts li{display:flex;align-items:center;gap:8px}
.hero__facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--herb)}
.hero__cue{display:none}
@media(min-width:960px){
  .hero{flex-direction:row;align-items:stretch}
  .hero__media{position:absolute;right:0;top:0;bottom:0;width:48%;height:auto}
  .hero__media::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(35,31,32,.55) 18%,rgba(35,31,32,0) 45%),linear-gradient(0deg,rgba(35,31,32,.5),rgba(35,31,32,0) 30%)}
  .hero__body{flex:1 1 auto;width:100%;margin:0;display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding-top:120px;padding-bottom:110px}
  .hero__facts{max-width:600px}
  .hero__cue{display:flex;position:absolute;left:50%;bottom:28px;z-index:3;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;color:var(--on-dark-muted);animation:fadeIn 1s calc(var(--intro) + 1.6s) both}
  .hero__cue i{width:1px;height:48px;background:linear-gradient(var(--on-dark-muted),transparent);position:relative;overflow:hidden}
  .hero__cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--paper);animation:cue 2.2s var(--ease-io) infinite}
}


/* ── page hero (keyword pages) ────────────────────────── */
.phero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden}
.phero__media{position:relative;height:52svh;min-height:340px;overflow:hidden}
.phero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:heroZoom 2.6s var(--ease) both}
.phero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,31,32,.45),rgba(35,31,32,0) 35%,rgba(35,31,32,.25) 65%,var(--ink))}
.phero__body{position:relative;z-index:2;margin-top:-96px;padding-bottom:64px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--on-dark-muted);margin-bottom:22px;animation:fadeUp .9s var(--ease) .15s both}
.crumbs a:hover{color:var(--paper)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.phero h1{font-weight:300;font-size:clamp(40px,7vw,96px);line-height:1.12;letter-spacing:-.035em}
.phero h1 b{font-weight:600}
.phero__sub{display:block;font-size:clamp(18px,2.1vw,26px);font-weight:300;letter-spacing:-.01em;color:var(--on-dark-muted);margin-top:18px;animation:fadeUp 1s var(--ease) .7s both}
.phero__p{margin-top:24px;max-width:560px;color:var(--on-dark-muted);font-size:17px;line-height:1.9;animation:fadeUp 1s var(--ease) .85s both}
.phero .btn-row{margin-top:32px;animation:fadeUp 1s var(--ease) 1s both}
.phero__tag{position:absolute;right:var(--gut);bottom:28px;z-index:3;font-size:12px;letter-spacing:.3em;color:var(--on-dark-muted);writing-mode:vertical-rl;display:none}
@media(min-width:960px){
  .phero{min-height:88svh;display:flex;align-items:center}
  .phero__media{position:absolute;inset:0 0 0 auto;width:52%;height:auto}
  .phero__media::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(35,31,32,.5) 20%,rgba(35,31,32,0) 50%)}
  .phero__body{margin:0;padding:150px 0 110px;width:100%}
  .phero__body .wrap>*{max-width:620px}
  .phero__tag{display:block}
}

/* ── marquee ──────────────────────────────────────────── */
.marquee{background:var(--hearth);color:var(--paper);overflow:hidden;border-block:1px solid var(--line-dark);padding:22px 0}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__group span{font-size:clamp(20px,2.4vw,30px);font-weight:300;letter-spacing:-.01em;padding:0 28px;white-space:nowrap}
.marquee__group span.hanja{color:var(--herb-soft)}
.marquee__group i{width:7px;height:7px;background:var(--herb);transform:rotate(45deg);flex:none}

/* ── story ────────────────────────────────────────────── */
.story{display:grid;gap:56px}
.story__fig{position:relative}
.story__portrait{width:min(300px,70%);margin:0 auto;filter:sepia(.35) contrast(1.02);mix-blend-mode:multiply}
.story__fig figcaption{text-align:center;font-size:13px;color:var(--muted-2);margin-top:14px;letter-spacing:.08em}
.story__stamp{position:absolute;top:6%;right:6%;width:74px;height:74px;border:1px solid var(--herb);border-radius:50%;display:grid;place-items:center;color:var(--herb-deep);font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.35;text-align:center;transform:rotate(-8deg);background:rgba(242,233,223,.7)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong);margin-top:48px}
.stat{padding:26px 8px 0 0}
.stat+.stat{padding-left:16px;border-left:1px solid var(--line)}
.stat__n{font-size:clamp(40px,5.6vw,72px);font-weight:300;line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;gap:4px}
.stat__n small{font-size:.36em;font-weight:600;letter-spacing:0}
.stat__l{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5}
@media(min-width:960px){
  .story{grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center}
}

/* ── statement (word-lit) ─────────────────────────────── */
.statement{font-size:clamp(30px,5.4vw,72px);font-weight:300;line-height:1.35;letter-spacing:-.03em;max-width:1100px}
.statement b{font-weight:600}
.js .statement .w{opacity:.14;transition:opacity .5s var(--ease)}
.js .statement .w.on{opacity:1}
.compare{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line-dark)}
.compare__row{display:grid;grid-template-columns:1fr 32px 1.2fr;align-items:center;padding:20px 0;border-bottom:1px solid var(--line-dark);font-size:clamp(16px,1.6vw,20px)}
.compare__row>:first-child{color:var(--on-dark-muted);text-decoration:line-through;text-decoration-color:rgba(191,174,157,.45);text-decoration-thickness:1px}
.compare__row>:last-child{font-weight:600}
.compare__row svg{width:18px;height:18px;color:var(--herb)}
.compare__head{font-size:12px!important;letter-spacing:.2em;color:var(--herb-soft);font-weight:600}
.compare__head>*{text-decoration:none!important;color:var(--herb-soft)!important;font-weight:600!important}

/* ── signature (sticky steps) ─────────────────────────── */
.sig{display:grid;gap:40px}
.sig__media{display:none}
.step{padding:36px 0;border-top:1px solid var(--line)}
.step__n{font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--herb-deep)}
.step h3{font-size:clamp(26px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.3;margin:14px 0 16px}
.step h3 b{font-weight:600}
.step__img{margin-top:26px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--paper-3)}
.step__img img,.step__img video{width:100%;height:100%;object-fit:cover}
@media(min-width:960px){
  .sig{grid-template-columns:1fr 1fr;gap:90px;align-items:start}
  .sig__media{display:block;position:sticky;top:12vh;height:76vh;border-radius:var(--r);overflow:hidden;background:var(--paper-3)}
  .sig__media>img,.sig__media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
  .sig__media>.on{opacity:1;transform:none}
  .sig__bar{position:absolute;left:24px;right:24px;bottom:24px;height:2px;background:rgba(242,233,223,.3);z-index:2}
  .sig__bar i{position:absolute;inset:0;background:var(--paper);transform-origin:left;transform:scaleX(var(--p,0))}
  .sig__label{position:absolute;left:20px;top:20px;z-index:2;color:var(--paper);background:rgba(35,31,32,.72);padding:7px 12px;border-radius:var(--r);font-size:11px;letter-spacing:.24em;font-weight:600}
  .step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:0}
  .step__img{display:none}
  .js .step{opacity:.28;transition:opacity .6s var(--ease)}
  .js .step.on{opacity:1}
}

/* ── menu ─────────────────────────────────────────────── */
.dishes{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 18px;scrollbar-width:none}
.dishes::-webkit-scrollbar{display:none}
.dish{scroll-snap-align:start;position:relative}
.dish__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#dcd8d2;border-radius:var(--r)}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.dish:hover .dish__img img{transform:scale(1.06)}
.dish__tag{position:absolute;left:14px;top:14px;background:var(--hearth);color:var(--paper);font-size:12px;font-weight:600;letter-spacing:.08em;padding:5px 10px;border-radius:var(--r)}
.dish__tag--herb{background:var(--herb-deep)}
.dish__body{padding-top:18px;display:grid;gap:6px}
.dish__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;position:relative;padding-bottom:10px}
.dish__top::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-strong);transform-origin:left;transform:scaleX(.18);transition:transform .8s var(--ease)}
.dish:hover .dish__top::after{transform:scaleX(1)}
.dish h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.4}
.dish__price{font-size:15px;font-weight:600;white-space:nowrap;color:var(--herb-deep)}
.dish p{font-size:14.5px;color:var(--muted);line-height:1.7}
@media(min-width:720px){.dishes{grid-auto-columns:44%}}
@media(min-width:1024px){
  /* 사진은 사진끼리, 설명은 설명끼리 같은 줄에 맞춤 (subgrid) */
  .dishes{grid-auto-flow:row;grid-template-columns:repeat(12,1fr);grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:0 28px}
  .dish{grid-column:span 4;grid-row:span 2;display:grid;grid-template-rows:subgrid}
  .dish__body{padding:18px 0 48px;align-content:start}
  .dish--half{grid-column:span 3}
  .dish--feature{grid-column:1/span 6;grid-row:1/span 4}
  .dish--feature .dish__img{grid-row:1/4;aspect-ratio:auto;height:auto;min-height:0}
  .dish--feature .dish__img img{position:absolute;inset:0}
  .dish--feature .dish__body{grid-row:4}
  .dish--feature h3{font-size:24px}
  .dish:not(.dish--feature) p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

.board{margin-top:clamp(64px,8vw,110px);background:var(--paper) var(--grain);border:1px solid var(--line-strong);padding:clamp(28px,5vw,64px);position:relative}
.board::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.board__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin-bottom:36px}
.board__head h3{font-size:clamp(26px,3vw,36px);font-weight:300;letter-spacing:-.02em}
.board__head p{font-size:13px;color:var(--muted-2)}
.board__cols{display:grid;gap:40px}
@media(min-width:900px){.board__cols{grid-template-columns:repeat(3,1fr);gap:56px}}
.board__cat{font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--herb-deep);padding-bottom:12px;border-bottom:1px solid var(--line-strong);margin-bottom:6px}
.mrow{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;padding:12px 0;font-size:16px}
.mrow__lead{height:1px;border-bottom:1px dotted var(--line-strong);transform-origin:left;transform:scaleX(1)}
.js .board .mrow__lead{transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .board.is-in .mrow__lead{transform:scaleX(1)}
.mrow__name{font-weight:600}
.mrow__name small{display:block;font-weight:400;font-size:12.5px;color:var(--muted-2);margin-top:2px}
.mrow__price{font-weight:600;font-variant-numeric:tabular-nums}
.mrow__price small{font-weight:400;color:var(--muted-2);font-size:13px;margin-right:6px}

/* ── space / gallery ──────────────────────────────────── */
.hs{position:relative}
.hs__sticky{overflow:hidden}
.hs__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 12px;scrollbar-width:none}
.hs__track::-webkit-scrollbar{display:none}
.shot{flex:none;scroll-snap-align:center;position:relative;height:min(62svh,520px);overflow:hidden;border-radius:var(--r);background:var(--hearth-2)}
.shot img{height:100%;width:auto;max-width:none;object-fit:cover}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;font-size:13px;letter-spacing:.04em;color:var(--paper);background:linear-gradient(transparent,rgba(35,31,32,.72))}
.hs__intro{flex:none;width:min(84vw,420px);display:flex;flex-direction:column;justify-content:flex-end;padding-right:20px}
.hs.is-pinned .hs__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.hs.is-pinned .hs__track{overflow:visible;will-change:transform;padding-left:calc((100vw - var(--wrap))/2 + var(--gut));scroll-snap-type:none}
.hs.is-pinned .shot{height:min(62vh,580px)}
.hs__progress{height:1px;background:var(--line-dark);margin:28px var(--gut) 0;position:relative}
.hs__progress i{position:absolute;inset:0;background:var(--herb-soft);transform-origin:left;transform:scaleX(var(--p,0))}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:clamp(48px,6vw,80px)}
.facts>div{background:var(--hearth);padding:26px 22px}
.facts dt{font-size:13px;color:var(--on-dark-muted);letter-spacing:.06em}
.facts dd{font-size:clamp(22px,2.6vw,32px);font-weight:300;margin-top:8px;letter-spacing:-.02em}
.facts dd small{font-size:14px;color:var(--on-dark-muted);margin-left:4px}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}}

/* ── keyword hub cards ────────────────────────────────── */
.guides{display:grid;gap:16px}
.guide{position:relative;display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:16px;border:1px solid var(--line);background:rgba(242,233,223,.5);border-radius:var(--r);transition:background .5s var(--ease),border-color .5s,transform .6s var(--ease)}
.guide:hover{background:var(--paper);border-color:var(--line-strong);transform:translateY(-4px)}
.guide__img{aspect-ratio:1;overflow:hidden;border-radius:var(--r)}
.guide__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.guide:hover .guide__img img{transform:scale(1.08)}
.guide__k{font-size:12px;letter-spacing:.18em;color:var(--herb-deep);font-weight:600}
.guide h3{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.01em;margin:4px 0}
.guide p{font-size:14px;color:var(--muted);line-height:1.6}
.guide__go{position:absolute;right:18px;top:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:background .4s,color .4s,transform .5s var(--ease)}
.guide__go svg{width:14px;height:14px}
.guide:hover .guide__go{background:var(--hearth);color:var(--paper);transform:rotate(-45deg)}
@media(min-width:900px){
  .guides{grid-template-columns:repeat(2,1fr);gap:20px}
  .guide{grid-template-columns:150px 1fr;padding:20px;gap:26px}
}

/* ── reviews ──────────────────────────────────────────── */
.rv__head{margin-bottom:clamp(36px,5vw,56px)}
.rv__grid{display:grid;gap:16px}
.rv__sum,.rv__likes{background:#fbf8f3;border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:clamp(24px,3vw,36px)}
.rv__sum{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.rv__label{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--herb-deep)}
.rv__big{display:flex;align-items:baseline;gap:8px;line-height:1}
.rv__big span{font-size:clamp(64px,8vw,96px);font-weight:300;letter-spacing:-.05em}
.rv__big small{font-size:20px;color:var(--muted-2)}
.stars{position:relative;display:inline-block;width:150px;height:26px;background:#e2d4c4;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M15 1.5l3.9 8 8.6 1.1-6.3 6 1.6 8.5L15 21l-7.8 4.1 1.6-8.5-6.3-6 8.6-1.1z'/%3E%3C/svg%3E") 0 0/30px 26px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M15 1.5l3.9 8 8.6 1.1-6.3 6 1.6 8.5L15 21l-7.8 4.1 1.6-8.5-6.3-6 8.6-1.1z'/%3E%3C/svg%3E") 0 0/30px 26px repeat-x}
.stars span{position:absolute;inset:0 auto 0 0;background:#e8a93a}
.js .stars span{transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.js .rv__sum.is-in .stars span{transform:none}
.rv__cnt{font-size:15px;color:var(--muted)}
.rv__cnt b{color:var(--text);font-size:17px}
.rv__more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#027236}
.rv__more svg{width:13px;height:13px}
.rv__t{font-size:17px;font-weight:600;margin-bottom:16px}
.likes{display:grid;gap:8px}
.like{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:10px;background:var(--paper);overflow:hidden;font-size:15.5px}
.like__fill{position:absolute;inset:0 auto 0 0;width:var(--v);background:linear-gradient(90deg,rgba(140,138,84,.26),rgba(140,138,84,.14));border-radius:10px}
.js .like__fill{transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.js .rv__likes.is-in .like__fill{transform:none}
.like__e,.like__k,.like__n{position:relative}
.like__e{font-size:18px;text-align:center}
.like__k{font-weight:600}
.like__n{font-size:15px;color:var(--herb-deep)}
.rv__cards{display:grid;gap:14px;margin-top:16px}
.rcard{margin:0;background:#fbf8f3;border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:22px 24px 26px;transition:transform .5s var(--ease),box-shadow .5s}
.rcard:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-strong),0 18px 32px -22px rgba(48,30,21,.4)}
.rcard__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rcard__av{width:36px;height:36px;border-radius:50%;background:#03c75a;color:#fff;display:grid;place-items:center;flex:none}
.rcard__av svg{width:14px;height:14px}
.rcard__who{display:grid;line-height:1.35}
.rcard__who b{font-size:14px}
.rcard__who small{font-size:12.5px;color:var(--muted-2)}
.rcard blockquote{margin:0}
.rcard p{font-size:clamp(17px,1.5vw,19px);line-height:1.65;letter-spacing:-.01em}
@media(min-width:960px){
  .rv__grid{grid-template-columns:4fr 7fr;gap:20px}
  .rv__cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}
}

/* ── visit / location ─────────────────────────────────── */
.visit{display:grid;gap:28px}
.map,.floor{position:relative;background:var(--paper) var(--grain);border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;aspect-ratio:560/400}
.floor{aspect-ratio:412/406;background:#f7f1e8}
.map svg,.floor svg{width:100%;height:100%;display:block}
.map .road{fill:#e3d7c8}
.map .road--s{fill:#e8ddd0}
.map .road-line{stroke:#fbf7f1;stroke-width:1.5;stroke-dasharray:14 12}
.map .road-name{font-size:12px;font-weight:600;fill:#8d7a6b;letter-spacing:.1em}
.map .road-name--s{font-size:10px;letter-spacing:.04em}
.map .goal{fill:var(--hearth)}
.map .poi{fill:#00704a;stroke:#fff;stroke-width:2}
.map .lbl-xs{font-size:11px;fill:var(--muted)}
.map .t-white{fill:#fff}
.map .road-edge{stroke:var(--line-strong);stroke-width:28;fill:none;stroke-linecap:round}
.map .block{fill:var(--paper-2);stroke:var(--line);stroke-width:1}
.map .park{fill:rgba(140,138,84,.16);stroke:rgba(140,138,84,.35)}
.map .route{fill:none;stroke:var(--hearth);stroke-width:4.5;stroke-dasharray:1 10;stroke-linecap:round}
.map .route-mask{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2.6s var(--ease-io) .3s}
.map.is-in .route-mask{stroke-dashoffset:0}
.map text{font-family:var(--font);fill:var(--hearth)}
.map .lbl{font-size:15px;font-weight:600}
.map .t-w{fill:#f2e9df}.map .t-s{fill:#bfae9d}
.map .lbl-s{font-size:12px;fill:var(--muted)}
.map .pin{fill:var(--hearth)}
.map .pulse{fill:var(--herb);transform-box:fill-box;transform-origin:center;animation:pulse 2.4s var(--ease) infinite}
.map .walker{fill:var(--herb-deep);opacity:0}
.map.is-in .walker{opacity:1;transition:opacity .4s 2.9s}
.map__note{position:absolute;left:14px;bottom:10px;font-size:11px;color:var(--muted-2)}
.map__badge{position:absolute;right:14px;top:14px;background:var(--hearth);color:var(--paper);font-size:13px;padding:8px 12px;border-radius:var(--r);font-weight:600;opacity:0;transform:translateY(-6px);transition:opacity .6s 2.6s,transform .6s var(--ease) 2.6s}
.map.is-in .map__badge{opacity:1;transform:none}
.info{display:grid}
.info__row{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.75}
.info__row:first-child{border-top:1px solid var(--line-strong)}
.info__row dt{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--herb-deep);padding-top:3px}
.info__row dd small{display:block;color:var(--muted);font-size:13.5px}
.hours{width:100%;font-size:15px}
.hours th{text-align:left;font-weight:600;padding:2px 14px 2px 0;white-space:nowrap;vertical-align:top}
.hours td{padding:2px 0;color:var(--text)}
.hours td small{color:var(--muted);font-size:13px}
.visit .btn-row{margin-top:28px}

.tel{font-size:22px;font-weight:600;letter-spacing:.01em}
@media(min-width:1024px){.visit{grid-template-columns:7fr 5fr;gap:40px;align-items:start}.visit__side{position:sticky;top:100px}}

/* ── faq ──────────────────────────────────────────────── */
.faq{display:grid;gap:12px;max-width:980px}
.qa{border-radius:14px;background:rgba(251,248,243,.55);box-shadow:0 0 0 1px var(--line);transition:background .4s,box-shadow .4s}
.qa:hover{background:#fbf8f3}
.qa[open]{background:#fbf8f3;box-shadow:0 0 0 1px rgba(140,138,84,.55),0 20px 40px -28px rgba(48,30,21,.35)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr 36px;gap:14px;align-items:center;padding:20px 20px 20px 22px}
.qa summary::-webkit-details-marker{display:none}
.qa__q{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--hearth);font-size:14px;font-weight:800;transition:background .4s,color .4s}
.qa[open] .qa__q{background:var(--hearth);color:var(--paper)}
.qa__t{font-size:clamp(16.5px,1.5vw,18.5px);font-weight:600;line-height:1.5;margin:0;letter-spacing:-.01em}
.qa__pm{position:relative;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);transition:transform .5s var(--ease),background .4s}
.qa__pm::before,.qa__pm::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--ease)}
.qa__pm::after{transform:rotate(90deg)}
.qa[open] .qa__pm{transform:rotate(180deg);background:var(--herb);color:#fff;box-shadow:none}
.qa[open] .qa__pm::after{transform:rotate(0)}
.qa__body{overflow:hidden}
.qa__in{display:grid;grid-template-columns:34px 1fr;gap:14px;margin:0 22px 22px;padding:18px 20px 20px 0;border-top:1px dashed var(--line-strong)}
.qa__a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--herb);color:#fff;font-size:14px;font-weight:800}
.qa__in p{font-size:16.5px;line-height:1.9;color:var(--text);padding-top:3px}
.qa__in a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media(max-width:640px){.qa summary{grid-template-columns:30px 1fr 32px;gap:10px;padding:16px}.qa__q,.qa__a{width:30px;height:30px;font-size:13px}.qa__pm{width:32px;height:32px}.qa__in{grid-template-columns:30px 1fr;gap:10px;margin:0 16px 16px}.qa__in p{font-size:16px}}

/* ── content blocks for keyword pages ─────────────────── */
.split{display:grid;gap:40px}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:88px;align-items:center}.split--rev>:first-child{order:2}}
.frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--paper-3)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
.frame--tall{aspect-ratio:4/5}
.frame--wide{aspect-ratio:16/10}
.frame__cap{position:absolute;left:16px;bottom:14px;color:var(--paper);font-size:12.5px;letter-spacing:.06em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--paper);padding:30px 26px;display:grid;gap:12px;align-content:start;transition:background .5s}
.card:hover{background:var(--paper-2)}
.card__n{font-size:13px;font-weight:600;color:var(--herb-deep);letter-spacing:.16em}
.card h3{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.45}
.card p{font-size:15px;color:var(--muted);line-height:1.8}
.card ul{display:grid;gap:6px;font-size:14.5px;color:var(--muted)}
.card li{display:flex;gap:8px}
.card li::before{content:"";flex:none;width:4px;height:4px;margin-top:11px;background:var(--herb);transform:rotate(45deg)}
.dark .cards,.ink .cards{background:var(--line-dark);border-color:var(--line-dark)}
.dark .card{background:var(--hearth)}
.dark .card:hover{background:var(--hearth-2)}
.dark .card p,.dark .card ul{color:var(--on-dark-muted)}
.dark .card__n{color:var(--herb-soft)}
@media(min-width:720px){.cards--2{grid-template-columns:repeat(2,1fr)}.cards--3,.cards--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards--3{grid-template-columns:repeat(3,1fr)}.cards--4{grid-template-columns:repeat(4,1fr)}}

.combo{display:grid;gap:14px}
.combo__row{display:grid;grid-template-columns:1fr;gap:10px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:rgba(242,233,223,.6);transition:border-color .4s,transform .5s var(--ease)}
.combo__row:hover{border-color:var(--line-strong);transform:translateX(4px)}
.combo__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.combo__who b{white-space:nowrap}
.combo__who b{font-size:clamp(26px,3vw,36px);font-weight:300;letter-spacing:-.03em}
.combo__who span{font-size:13px;color:var(--herb-deep);font-weight:600;letter-spacing:.08em}
.combo__items{font-size:16px;line-height:1.75}
.combo__sum{font-size:14px;color:var(--muted)}
.combo__sum b{color:var(--text);font-size:17px}
@media(min-width:900px){.combo__row{grid-template-columns:200px 1fr 200px;align-items:center;gap:28px}.combo__sum{text-align:right}}

.ring40{position:relative;width:180px;height:180px;margin:36px 0 30px}
.ring40 svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring40 circle{fill:none;stroke:var(--line);stroke-width:2}
.ring40 .ring40__fg{stroke:var(--herb-deep);stroke-width:3;stroke-linecap:round;stroke-dasharray:565.5;stroke-dashoffset:565.5;transition:stroke-dashoffset 2.2s var(--ease-io) .2s}
.ring40.is-in .ring40__fg{stroke-dashoffset:0}
.ring40 p{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring40 p span{font-size:64px;font-weight:300;letter-spacing:-.04em}
.ring40 p small{font-size:11px;letter-spacing:.3em;color:var(--herb-deep);font-weight:600;margin-top:8px}

.how{display:grid;gap:28px;align-items:start}
.how__arrow{align-self:center}
.how__step{display:grid;gap:10px}
.how__step .frame{margin-bottom:12px}
.how__arrow{display:grid;place-items:center;color:var(--herb-deep)}
.how__arrow svg{width:44px;height:44px;transform:rotate(90deg);animation:nudge 2.4s var(--ease-io) infinite}
@media(min-width:900px){
  .how{grid-template-columns:1fr 90px 1fr;gap:20px}
  .how__arrow svg{transform:none;animation-name:nudgeX}
}
@keyframes nudge{0%,100%{translate:0 -4px}50%{translate:0 6px}}
@keyframes nudgeX{0%,100%{translate:-4px 0}50%{translate:8px 0}}

.glist{border-top:1px solid var(--line-dark)}
.gitem{display:grid;grid-template-columns:76px 1fr;gap:6px 18px;padding:22px 0;border-bottom:1px solid var(--line-dark);align-items:center;transition:background .5s}
.gitem:hover{background:rgba(242,233,223,.03)}
.gitem__img{grid-row:span 3;width:76px;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--hearth-3);display:grid;place-items:center;align-self:start}
.gitem__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gitem:hover .gitem__img img{transform:scale(1.1)}
.gitem__ph{width:56%;height:56%;fill:var(--herb-soft);opacity:.5}
.gitem h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.gitem p{font-size:14.5px;color:var(--on-dark-muted);line-height:1.65;margin-top:4px}
.gitem__tags{display:flex;flex-wrap:wrap;gap:6px}
.gitem__tags em{font-style:normal;font-size:12.5px;padding:4px 10px;border:1px solid var(--line-dark);border-radius:30px;color:var(--on-dark-muted)}
.gitem__price{font-size:17px;font-weight:600;color:var(--paper)}
@media(min-width:900px){
  .gitem{grid-template-columns:120px 1.4fr 1fr 150px;gap:32px;padding:26px 0}
  .gitem__img{grid-row:auto;width:120px}
  .gitem__price{text-align:right;font-size:19px}
}

.route-steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line-strong)}
.route-steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.route-steps li::before{content:counter(s,decimal-leading-zero);font-size:24px;font-weight:300;color:var(--herb-deep);line-height:1.2}
.route-steps b{display:block;font-size:17px;font-weight:600}
.route-steps span{color:var(--muted);font-size:15px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 14px;border:1px solid var(--line-strong);border-radius:40px;font-size:13.5px}
.dark .chips li,.ink .chips li{border-color:var(--line-dark)}

.related{display:grid;gap:12px}
.related a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid var(--line-dark);font-size:clamp(22px,3vw,34px);font-weight:300;letter-spacing:-.02em;transition:padding .5s var(--ease),color .3s}
.related a:hover{padding-left:14px;color:var(--herb-soft)}
.related a small{display:block;font-size:14px;color:var(--on-dark-muted);letter-spacing:0;margin-top:4px}
.related svg{width:22px;height:22px;flex:none;transition:transform .5s var(--ease)}
.related a:hover svg{transform:rotate(-45deg)}

.cta-band{position:relative;overflow:hidden;text-align:center}
.cta-band .h2{margin-inline:auto;max-width:900px}
.cta-band .btn-row{justify-content:center;margin-top:36px}
.cta-band__mark{width:92px;height:76px;margin:0 auto 28px;fill:var(--paper);opacity:.9}

/* ── footer ───────────────────────────────────────────── */
.ft{background:var(--ink);color:var(--on-dark-muted);padding:clamp(72px,9vw,120px) 0 40px;position:relative;overflow:hidden;font-size:14.5px}
.ft__top{display:grid;gap:44px}
.ft__brand svg{fill:var(--paper)}
.ft__brand .ft__mark{width:70px;height:58px}
.ft__brand .ft__word{width:120px;height:40px;margin-top:14px}
.ft__brand p{margin-top:16px;max-width:320px;line-height:1.8}
.ft h2{font-size:12px;letter-spacing:.24em;color:var(--herb-soft);font-weight:600;margin-bottom:16px}
.ft li{padding:4px 0}
.ft a:hover{color:var(--paper)}
.ft__biz{margin-top:56px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:#9c8b7c}
.ft__giant{font-size:clamp(88px,23vw,320px);font-weight:800;line-height:1;letter-spacing:.04em;color:rgba(242,233,223,.05);margin:56px 0 -.18em;white-space:nowrap;user-select:none;text-align:center}
@media(min-width:900px){.ft__top{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ── mobile action bar ────────────────────────────────── */
.abar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:80;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:6px;padding:6px;border-radius:12px;background:rgba(35,31,32,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -12px rgba(0,0,0,.45);
  transform:translateY(140%);transition:transform .6s var(--ease)}
.abar.is-on{transform:none}
.abar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:8px;color:var(--paper);font-size:12px;font-weight:600}
.abar a svg{width:19px;height:19px}
.abar a.primary{background:#03c75a;color:#fff;flex-direction:row;font-size:14px;gap:8px}
@media(min-width:1024px){.abar{display:none}}
@media(max-width:1023px){.ft{padding-bottom:110px}}

/* ── intro (home, first visit) ────────────────────────── */
.intro-screen{display:none}
.intro .intro-screen{display:flex;position:fixed;inset:0;z-index:300;background:var(--paper) var(--grain);color:var(--hearth);align-items:center;justify-content:center;flex-direction:column;gap:22px;
  animation:introOut .9s var(--ease-io) 1.15s forwards;pointer-events:none}
.intro-screen svg{fill:currentColor}
.intro-screen .im{width:120px;height:100px;animation:stamp 1s var(--ease) .05s both}
.intro-screen .iw{width:110px;height:36px;animation:fadeUp .8s var(--ease) .35s both}
.intro-screen .ih{font-size:12px;font-weight:600;letter-spacing:.5em;color:var(--herb-deep);animation:fadeIn .8s .55s both}

/* ── reveal system ────────────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="left"]{transform:translateX(-30px)}
.js [data-reveal="img"]{opacity:1;transform:none;clip-path:inset(12% 0 12% 0);transition:clip-path 1.4s var(--ease-io);transition-delay:var(--d,0s)}
.js [data-reveal="img"] img{transform:scale(1.18);transition:transform 1.8s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal="img"].is-in{clip-path:inset(0)}
.js [data-reveal="img"].is-in img{transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="lines"]{opacity:1;transform:none}
.js [data-reveal="lines"] .ln>span{transform:translateY(105%);transition:transform 1.2s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0) * .1s);animation:none}
.js [data-reveal="lines"].is-in .ln>span{transform:none}

/* ── keyframes ────────────────────────────────────────── */
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes steam{0%{opacity:0;transform:translate(0,30px) scale(.7)}25%{opacity:.9}100%{opacity:0;transform:translate(var(--x1,20px),-240px) scale(1.9)}}
@keyframes cue{0%{top:-40%}100%{top:110%}}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.35);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .steam,.intro-screen{display:none!important}
  .js [data-reveal],.js [data-reveal] img,.js .statement .w,.js .step{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ── 빠른 정보 바 ─────────────────────────────────────── */
.qi{background:var(--paper) var(--grain);border-bottom:1px solid var(--line)}
.qi__list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:0 calc(var(--gut)*-1)}
.qi__list li{display:flex;align-items:center;gap:12px;padding:20px var(--gut);background:var(--paper)}
.qi__ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--herb-deep);box-shadow:inset 0 0 0 1px rgba(140,138,84,.5)}
.qi__ic svg{width:18px;height:18px}
.qi__tx{display:grid;gap:2px;line-height:1.4}
.qi__tx b{font-size:14.5px;font-weight:600}
.qi__tx small{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.qi__list li{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px}.qi__tx b{font-size:13.5px}}
@media(min-width:1024px){.qi__list{grid-template-columns:repeat(4,1fr);margin:0;background:none;gap:0}.qi__list li{padding:30px 24px;background:none}.qi__list li+li{box-shadow:inset 1px 0 0 var(--line)}}

/* ── 메뉴판 (원본 이미지, 가운데 크게) ─────────────────── */
.sheet{margin-top:clamp(72px,9vw,120px);display:flex;flex-direction:column;align-items:center;gap:22px}
.sheet__head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sheet__k{font-size:12px;font-weight:800;letter-spacing:.4em;color:var(--herb-deep)}
.sheet__head p{font-size:15px;color:var(--muted)}
#guide .h2{max-width:none}
.sheet__fig{position:relative;margin:0;width:min(100%,760px)}
.sheet__zoom{display:block;position:relative;cursor:zoom-in;border-radius:4px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(48,30,21,.45),0 0 0 1px var(--line)}
.sheet__zoom img{width:100%;height:auto;display:block}
.js .sheet__fig .sheet__zoom{clip-path:inset(0 0 100% 0);transition:clip-path 1.8s var(--ease-io)}
.js .sheet__fig.is-in .sheet__zoom{clip-path:inset(0 0 0 0)}
.sheet__roll{position:absolute;left:-10px;right:-10px;top:-8px;height:18px;border-radius:9px;background:linear-gradient(180deg,#f3e9dc,#cdbba4 70%,#b9a58c);box-shadow:0 8px 16px -6px rgba(48,30,21,.4);pointer-events:none}
.js .sheet__roll{transition:top 1.8s var(--ease-io),opacity .5s 1.7s}
.js .sheet__fig.is-in .sheet__roll{top:calc(100% - 10px);opacity:0}
.sheet__btn{margin-top:6px}
.sheet__btn svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.js .sheet__fig .sheet__zoom{clip-path:none}.sheet__roll{display:none}}

/* 메뉴판 크게 보기 */
.lb{padding:0;border:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:auto}
.lb::backdrop{background:rgba(20,16,14,.92)}
.lb img{display:block;width:min(100% - 32px,1100px);height:auto;margin:56px auto 40px;border-radius:var(--r)}
.lb__close{position:fixed;right:16px;top:16px;width:48px;height:48px;border-radius:50%;background:var(--paper);color:var(--hearth);font-size:26px;line-height:1;display:grid;place-items:center}

/* ── 네이버 예약 카드 (홀 · 룸) ────────────────────────── */
.bk{display:grid;gap:14px;margin-top:clamp(40px,5vw,64px)}
.bk__card{display:grid;grid-template-columns:1fr 112px;gap:16px;align-items:center;padding:18px;border-radius:12px;background:#fbf8f3;color:var(--hearth);box-shadow:0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bk__card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 26px 44px -24px rgba(0,0,0,.55)}
.bk__body{display:grid;gap:6px;align-content:start}
.bk__tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#027236}
.bk__tag svg{width:11px;height:11px}
.bk__t{font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.01em;color:#1b50c8}
.bk__d{font-size:14px;line-height:1.6;color:var(--muted)}
.bk__go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:600}
.bk__go svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.bk__card:hover .bk__go svg{transform:translateX(4px)}
.bk__img{width:112px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--paper-3)}
.bk__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.bk__card:hover .bk__img img{transform:scale(1.08)}
@media(min-width:900px){.bk{grid-template-columns:1fr 1fr;gap:20px}.bk__card{grid-template-columns:1fr 168px;padding:22px 22px 22px 28px}.bk__img{width:168px}}

/* ── 약도 + 안내도 ── */
.loc__note{margin-top:12px;font-size:12.5px;color:var(--muted-2);line-height:1.6}
.loc__note a{text-decoration:underline;text-underline-offset:3px}

/* 여의도 파라곤 지하 2층 안내도 */
.floor text{font-family:var(--font)}
.floor .fp-shell{fill:#d9cdbd}
.floor .fp-outline{fill:none;stroke:var(--hearth);stroke-width:3.5;stroke-linejoin:round}
.floor .fp-hall{fill:#fdfaf5}
.floor .fp-room{fill:#efe5d8;stroke:rgba(48,30,21,.35);stroke-width:1}
.floor .fp-svc{fill:#cbbdab;stroke:rgba(48,30,21,.25);stroke-width:1}
.floor .fp-ev{fill:#a8957e;stroke:rgba(48,30,21,.3);stroke-width:1}
.floor .fp-wc{fill:#d5d3ae;stroke:rgba(48,30,21,.3);stroke-width:1}
.floor .fp-shop{fill:var(--hearth);transform-box:fill-box;transform-origin:center bottom}
.js .floor .fp-shop{transform:scaleY(0);transition:transform 1.1s var(--ease-io) .2s}
.js .floor.is-in .fp-shop{transform:none}
.floor .fp-shop-ring{fill:none;stroke:var(--herb);stroke-width:3;opacity:0}
.floor.is-in .fp-shop-ring{animation:ring 2.4s var(--ease) 1.3s infinite}
.floor .fp-t{font-size:13px;fill:#6e5a4c;font-weight:600}
.floor .fp-t--b{font-size:15px}
.floor .fp-t--xs{font-size:10px}
.floor .fp-ev-t{font-size:12px;font-weight:800;fill:#fff}
.floor .fp-shop-t{font-size:19px;font-weight:800;fill:var(--paper)}
.js .floor .fp-shop-t{opacity:0;transition:opacity .6s 1s}
.js .floor.is-in .fp-shop-t{opacity:1}
.js .floor .map__badge{opacity:0;transform:translateY(-6px);transition:opacity .6s 1.2s,transform .6s var(--ease) 1.2s}
.js .floor.is-in .map__badge{opacity:1;transform:none}
@keyframes ring{0%{opacity:.9;stroke-width:2}100%{opacity:0;stroke-width:14}}
@media (prefers-reduced-motion:reduce){.js .floor .fp-shop{transform:none}.js .floor .fp-shop-t,.js .floor .map__badge{opacity:1}}

/* 모바일: 약도 글씨 키우기 · 영상 버튼 위치 */
@media(max-width:640px){
  .map .lbl{font-size:20px}
  .map .lbl-s{font-size:16px}
  .map .lbl-xs{font-size:14px}
  .map .road-name{font-size:16px}
  .map .road-name--s{font-size:13px}
  .map .t-w{font-size:17px}
  .map .t-s{font-size:13px}
  .map__badge{font-size:11px;padding:6px 9px;right:8px;top:8px}
  .hide-m{display:none}
  .floor .fp-t--xs{font-size:12px}
}
@media(max-width:959px){.vbtn{top:78px;bottom:auto}}

/* ── 약도 + 지하 2층 안내도 (세로 배치) ───────────────── */
.locs{display:grid;gap:16px}
.loc-card{margin:0;background:#fbf8f3;border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:14px}
.loc-card__h{display:flex;align-items:center;gap:12px;padding:6px 6px 14px}
.loc-card__h>span:last-child{display:grid;line-height:1.4}
.loc-card__h b{font-size:16px}
.loc-card__h small{font-size:13px;color:var(--muted)}
.loc-card__n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--hearth);color:var(--paper);display:grid;place-items:center;font-size:13px;font-weight:800}
.loc-card .map,.loc-card .floor{border-radius:10px}
.loc-card__floor{display:grid;gap:14px;align-items:center}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 6px 4px;font-size:13.5px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.sw--shop{background:var(--hearth)}.sw--ev{background:#a8957e}.sw--wc{background:#d5d3ae}
@media(min-width:640px){.loc-card__floor{grid-template-columns:minmax(0,1.35fr) 1fr;gap:20px}}
.floor-side{display:grid;gap:18px;padding:0 6px 6px}
.floor-steps{counter-reset:f;display:grid;gap:12px}
.floor-steps li{counter-increment:f;display:grid;grid-template-columns:26px 1fr;column-gap:10px;line-height:1.45}
.floor-steps li::before{content:counter(f);grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--hearth);box-shadow:inset 0 0 0 1.5px var(--hearth)}
.floor-steps b{font-size:15px}
.floor-steps span{font-size:12.5px;color:var(--muted)}
.floor-side .legend{padding:14px 0 0;border-top:1px dashed var(--line-strong)}
.loc__note{font-size:12.5px;color:var(--muted-2);line-height:1.6;padding:0 4px}
.loc__note a{text-decoration:underline;text-underline-offset:3px}

/* 매장 정보 카드 */
.ics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ic{display:block;background:#fbf8f3;border-radius:14px;box-shadow:0 0 0 1px var(--line);padding:18px 18px 20px;transition:box-shadow .4s,transform .5s var(--ease)}
.ic--hours,.ic--wide{grid-column:1/-1}
.ic__h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ic__h b{font-size:14px;font-weight:600;color:var(--muted)}
.ic__i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--hearth);color:var(--paper);display:grid;place-items:center}
.ic__i svg{width:16px;height:16px}
.ic__main{font-size:16.5px;font-weight:600;line-height:1.55;letter-spacing:-.01em}
.ic__main em{font-style:normal;color:#fff;background:var(--herb-deep);padding:1px 8px;border-radius:6px;font-size:14px;margin-left:4px;white-space:nowrap}
.ic__sub{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:4px}
.line9{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#b5a36b;color:#fff;font-size:12px;font-weight:800;margin-right:8px;vertical-align:2px}
.busno{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.busno li{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:#e9f1e3;color:#2f6b2a}
.busno li:nth-child(n+2){background:#e3edf9;color:#2253a3}
.copy{margin-left:auto;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .3s,color .3s}
.copy:hover{background:var(--hearth);color:var(--paper)}
.copy.done{background:var(--herb-deep);color:#fff;box-shadow:none}
.ic--tel{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ic--tel .ic__h{margin:0}
.ic--tel .ic__main{font-size:22px}
.ic--tel:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),0 14px 28px -20px rgba(48,30,21,.45)}
.status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:20px;background:var(--paper-2);color:var(--muted)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.open{background:#e3f4e6;color:#146b2c}
.status.open::before{animation:blink 1.6s ease-in-out infinite}
.status.break{background:#fbf0dc;color:#8a5409}
.week{display:grid;gap:6px}
.week li{display:grid;grid-template-columns:52px 1fr;column-gap:12px;padding:10px 12px;border-radius:10px;background:var(--paper);font-size:15.5px;font-weight:600;transition:background .3s}
.week li small{grid-column:2;font-size:12.5px;font-weight:400;color:var(--muted)}
.week li.off{color:var(--muted-2)}
.week li.today{background:var(--hearth);color:var(--paper)}
.week li.today small{color:var(--on-dark-muted)}
.visit__side .btn-row{margin-top:16px}
@keyframes blink{50%{opacity:.35}}

/* 3컷 (손질 · 달임 · 한 그릇) */
.tri{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:clamp(48px,6vw,88px) calc(var(--gut)*-1) 0;padding:0 var(--gut) 8px;scrollbar-width:none}
.tri::-webkit-scrollbar{display:none}
.tri__item{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);scroll-snap-align:start;background:var(--hearth-2)}
.tri__item img{width:100%;height:100%;object-fit:cover}
.tri__item img{transition:transform 1.4s var(--ease)}
.tri__item:hover img{transform:scale(1.06)}
.tri__item figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:90px 26px 26px;color:var(--paper);background:linear-gradient(transparent,rgba(20,16,14,.85) 70%)}
.tri__item figcaption span{font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--herb-soft)}
.tri__item figcaption b{position:relative;justify-self:start;font-size:clamp(28px,2.6vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.2;padding-bottom:8px}
.tri__item figcaption b::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--herb);transform-origin:left;transform:scaleX(.25);transition:transform .9s var(--ease) .5s}
.tri__item figcaption small{font-size:14.5px;color:var(--on-dark-muted);margin-top:4px}
.js .tri__item figcaption>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .tri__item.is-in figcaption>*{opacity:1;transform:none}
.js .tri__item.is-in figcaption span{transition-delay:calc(var(--d,0s) + .45s)}
.js .tri__item.is-in figcaption b{transition-delay:calc(var(--d,0s) + .55s)}
.js .tri__item.is-in figcaption small{transition-delay:calc(var(--d,0s) + .7s)}
.tri__item.is-in figcaption b::after,.tri__item:hover figcaption b::after{transform:scaleX(1)}
.tri__item:hover figcaption b::after{transition-delay:0s}
@media(min-width:900px){.tri{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;margin:clamp(56px,6vw,88px) 0 0;padding:0;gap:20px;align-items:start}}

/* 시그니처: 맛있게 먹는 법 */
.sig__shot{margin:0}
@media(min-width:960px){
  .sig__media>.sig__shot{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 1.6s var(--ease);pointer-events:none}
  .sig__media>.sig__shot.on{opacity:1;transform:none;pointer-events:auto}
  .sig__shot figcaption{position:absolute;left:20px;bottom:44px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:30px;background:rgba(251,248,243,.94);color:var(--hearth);font-size:15px;font-weight:600;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);transform:translateY(12px);opacity:0;transition:opacity .6s .35s,transform .7s var(--ease) .35s}
  .sig__shot.on figcaption{transform:none;opacity:1}
  .sig__shot figcaption span{font-size:12px;font-weight:800;color:var(--herb-deep);letter-spacing:.1em}
}
.step__img{aspect-ratio:4/5}

/* 먹는 법 3단계 (여의도 흑염소) */
@media(min-width:900px){.how--3{grid-template-columns:1fr 48px 1fr 48px 1fr;gap:12px}}

/* 가독성: 한국어 줄바꿈 다듬기 */
.lead,.prose p,.qa__in p,.hero__p,.phero__p{text-wrap:pretty}
.h2,.qa__t{text-wrap:balance}

/* ── 먹는 법 무대 (사진이 잘리지 않게) ────────────────── */
.stage{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:radial-gradient(120% 90% at 50% 38%,#533b2b 0%,#301e15 52%,#1f1a1b 100%);isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.55;pointer-events:none;z-index:3}
.stage--static{aspect-ratio:4/5}
.step__img .stage{height:100%}
.stage__glow{position:absolute;left:50%;top:56%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(232,169,90,.32),rgba(232,169,90,0));z-index:0}
.stage__bowl{position:absolute;left:50%;top:57%;width:76%;transform:translate(-50%,-50%);z-index:1;filter:drop-shadow(0 28px 26px rgba(0,0,0,.6));animation:bowlFloat 6s ease-in-out infinite}
.stage__bowl img{display:block;width:100%;height:auto}
.stage .steam{position:absolute;left:50%;top:2%;width:62%;height:44%;transform:translateX(-50%);z-index:2;pointer-events:none;mix-blend-mode:screen}
.stage .steam span{position:absolute;bottom:0;left:calc(50% + var(--x0,0%));width:36%;aspect-ratio:1;margin-left:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(242,233,223,.42),rgba(242,233,223,0));filter:blur(10px);opacity:0;animation:steam var(--t,7s) ease-out infinite;animation-delay:var(--dl,0s)}
.print{position:absolute;left:50%;top:46%;width:66%;transform:translate(-50%,-50%) rotate(var(--rot,0deg));z-index:1;background:#fbf8f3;padding:9px 9px 34px;border-radius:3px;box-shadow:0 30px 50px -18px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.2) inset}
.print img{display:block;width:100%;height:auto;border-radius:1px}
.print__cap{position:absolute;left:12px;bottom:9px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.print__cap svg{width:10px;height:10px;color:#03c75a}
.stage figcaption{position:absolute;left:18px;bottom:18px;z-index:4;display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:30px;background:rgba(251,248,243,.95);color:var(--hearth);font-size:14px;font-weight:600;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.stage figcaption span{font-size:11.5px;font-weight:800;color:var(--herb-deep);letter-spacing:.1em}
@keyframes bowlFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 7px))}}
@media(min-width:960px){
  .sig__media{background:#1f1a1b}
  .sig__media>.stage{border-radius:0}
  .sig__media .stage figcaption{bottom:44px;left:22px;font-size:15px}
  .sig__media .print{width:62%;top:45%}
  .sig__media .stage--print .print{transform:translate(-50%,-38%) rotate(calc(var(--rot) + 7deg));opacity:0;transition:transform 1.1s var(--ease),opacity .7s var(--ease)}
  .sig__media .stage--print.on .print{transform:translate(-50%,-50%) rotate(var(--rot));opacity:1}
  .sig__media .stage--hero .stage__bowl{transition:opacity 1s var(--ease)}
}
@media(prefers-reduced-motion:reduce){.stage__bowl{animation:none}.stage .steam{display:none}}

/* 처음 드시는 분: 사진 카드 */
.fcs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fc{display:flex;flex-direction:column;background:#fbf8f3;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:transform .6s var(--ease),box-shadow .5s}
.fc:hover{transform:translateY(-5px);box-shadow:0 0 0 1px var(--line-strong),0 24px 40px -26px rgba(48,30,21,.45)}
.fc__img{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#dcd8d2}
.fc__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease)}
.fc:hover .fc__img img{transform:scale(1.2)}
.fc__tag{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:20px;background:var(--hearth);color:var(--paper);font-size:12px;font-weight:600}
.fc__n{position:absolute;right:12px;bottom:6px;font-size:40px;font-weight:800;line-height:1;color:rgba(255,255,255,.85);text-shadow:0 2px 12px rgba(0,0,0,.25)}
.fc__body{padding:18px 18px 22px;display:grid;gap:8px}
.fc__body h3{font-size:clamp(16px,1.6vw,19px);font-weight:600;letter-spacing:-.01em;line-height:1.4}
.fc__body p{font-size:14px;line-height:1.75;color:var(--muted)}
@media(min-width:1024px){.fcs{grid-template-columns:repeat(4,1fr);gap:20px}}
@media(max-width:520px){.fc__body{padding:14px 14px 18px}.fc__body p{font-size:13.5px}.fc__n{font-size:30px}}

/* 새로운 시선: 사진 + 전환 카드 */
.view__grid{display:grid;gap:36px;align-items:center}
.view__img{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.view__img img{width:100%;height:100%;object-fit:cover}
.view__img figcaption{position:absolute;left:0;right:0;bottom:0;padding:90px 26px 26px;font-size:clamp(18px,1.8vw,22px);font-weight:300;line-height:1.55;color:var(--paper);background:linear-gradient(transparent,rgba(20,16,14,.85) 65%)}
.view__img figcaption b{font-weight:600}
.shift{display:grid;gap:10px;margin-top:32px}
.shift__row{display:grid;grid-template-columns:34px 1fr 30px 1.3fr;align-items:center;gap:12px;padding:18px 20px;border-radius:12px;background:rgba(242,233,223,.05);box-shadow:inset 0 0 0 1px var(--line-dark);transition:background .4s}
.shift__row:hover{background:rgba(242,233,223,.09)}
.shift__i{font-size:12px;font-weight:700;color:var(--herb-soft);letter-spacing:.1em}
.shift__from{position:relative;justify-self:start;font-size:15.5px;color:var(--on-dark-muted)}
.shift__from::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:rgba(191,174,157,.8);transform-origin:left;transform:scaleX(1)}
.js .shift__from::after{transform:scaleX(0);transition:transform .7s var(--ease);transition-delay:calc(var(--d,0s) + .45s)}
.js .shift__row.is-in .shift__from::after{transform:scaleX(1)}
.shift__arrow{color:var(--herb)}
.shift__arrow svg{width:20px;height:20px}
.js .shift__arrow{opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .7s var(--ease);transition-delay:calc(var(--d,0s) + .75s)}
.js .shift__row.is-in .shift__arrow{opacity:1;transform:none}
.shift__to{font-size:clamp(18px,1.9vw,22px);font-weight:600;color:var(--paper);letter-spacing:-.01em}
.js .shift__to{opacity:0;transform:translateX(-12px);transition:opacity .6s,transform .8s var(--ease);transition-delay:calc(var(--d,0s) + .95s)}
.js .shift__row.is-in .shift__to{opacity:1;transform:none}
@media(min-width:960px){.view__grid{grid-template-columns:.9fr 1.1fr;gap:72px}.view__img{position:sticky;top:110px}}
@media(max-width:520px){.shift__row{grid-template-columns:26px 1fr 22px 1.25fr;gap:8px;padding:14px}.shift__from{font-size:14px}.shift__to{font-size:16px}}
@media(prefers-reduced-motion:reduce){.js .shift__from::after,.js .shift__arrow,.js .shift__to{transform:none!important;opacity:1!important}}

/* 모바일 자동 슬라이드 · 위치 점 */
[data-autoslide]{position:relative}
.slide-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.slide-dots i{width:7px;height:7px;border-radius:7px;background:var(--line-strong);transition:width .4s var(--ease),background .4s}
.slide-dots i.on{width:22px;background:var(--hearth)}
.dark .slide-dots i,.ink .slide-dots i{background:rgba(242,233,223,.25)}
.dark .slide-dots i.on,.ink .slide-dots i.on{background:var(--paper)}
.slide-dots[hidden]{display:none}

.dishes,.tri{scroll-padding-inline:var(--gut)}

/* 디자인 검수 보완 (2026-09-29) */
::selection{background:var(--herb-soft);color:var(--hearth)}
/* 주소 복사: 보이는 크기는 그대로, 누르는 영역만 44px 이상 */
.copy{position:relative}
.copy::after{content:"";position:absolute;inset:-6px -4px}
/* 휴대폰: 통계 3칸을 글 길이에 맞춰 나눠 한 글자만 다음 줄로 떨어지지 않게 */
@media(max-width:600px){.stats{grid-template-columns:auto auto auto}}
@media(max-width:400px){.stat__l{font-size:13px}.stat+.stat{padding-left:12px}}