/* =========================================================
   ARI:THAI — 아리타이 태국음식점
   Deep indigo × brass gold. Bangkok street food, plated well.
   ========================================================= */

/* ---------- Webfonts ---------- */
/* MaruBuri — Naver, 자체 호스팅. 제목 전용이라 Bold/SemiBold 두 벌만 싣습니다. */
@font-face{
  font-family:"MaruBuri";
  src:url("../fonts/MaruBuri-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"MaruBuri";
  src:url("../fonts/MaruBuri-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Ground: the storefront at night */
  --ink:      #090F2B;
  --ink-2:    #0E1739;
  --ink-3:    #141F4B;
  --ink-4:    #1B2960;

  /* The signage blue, straight off 대봉로 240 */
  --royal:    #1E3FA8;
  --royal-lo: #16307F;

  /* Brass, not yellow */
  --gold:     #C8A44B;
  --gold-2:   #E4C88A;
  --gold-dim: rgba(200,164,75,.30);
  --gold-hair:rgba(200,164,75,.24);

  /* Paper for the menu card */
  --bone:     #F2EDE2;
  --bone-2:   #E6DFCE;
  --bone-ink: #1A2148;

  /* Sriracha. Used four times on the whole page. */
  --chili:    #D6452A;

  --text:     #EFEBE1;
  --text-mid: rgba(239,235,225,.68);
  --text-low: rgba(239,235,225,.44);

  /* Type */
  --f-display-ko: "MaruBuri", "Nanum Myeongjo", serif;
  --f-display-en: "Marcellus", "MaruBuri", serif;
  --f-thai: "Noto Serif Thai", "MaruBuri", serif;
  --f-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
            "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1280px;
  --maxw-narrow: 760px;
  --sec-y: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --steel-cell: 24px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(.95rem,.92rem + .18vw,1.0625rem);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold); color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- Shared atoms ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:var(--maxw-narrow); }

.section{ padding-block:var(--sec-y); position:relative; }

.eyebrow{
  font-size:.6875rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.35rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{
  content:""; flex:1; height:1px; max-width:120px;
  background:linear-gradient(90deg,var(--gold-dim),transparent);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{
  content:""; flex:1; height:1px; max-width:120px;
  background:linear-gradient(270deg,var(--gold-dim),transparent);
}

.h-sec{
  font-family:var(--f-display-ko);
  font-weight:700;
  font-size:clamp(1.85rem,1.25rem + 2.6vw,3.35rem);
  line-height:1.3;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
  white-space:pre-line;
}
/* 제목은 언어와 무관하게 MaruBuri 700 — 토글해도 무게가 튀지 않게. */
html[lang="en"] .h-sec{ letter-spacing:-.015em; }

.lead{ color:var(--text-mid); font-size:1.0625rem; max-width:46ch; }
.rule{ height:1px; background:var(--gold-hair); border:0; margin:0; }

/* Buttons */
.btn{
  --btn-fg:var(--ink); --btn-bg:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95rem 1.9rem; min-height:52px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:.875rem; font-weight:600; letter-spacing:.06em;
  border:1px solid var(--btn-bg); border-radius:2px; cursor:pointer;
  transition:transform .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ background:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); border-color:var(--gold-dim); }
.btn--ghost:hover{ background:rgba(200,164,75,.10); border-color:var(--gold); color:var(--gold-2); }
.btn--wide{ width:100%; }

/* Reveal on scroll */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s } .rv-d2{ transition-delay:.18s }
.rv-d3{ transition-delay:.27s } .rv-d4{ transition-delay:.36s }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }


/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background-color .5s var(--ease), backdrop-filter .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(9,15,43,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--gold-hair);
}
.nav__in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.75rem);
  height:74px;
}
.nav.stuck .nav__in{ height:66px; }
.nav__in{ transition:height .5s var(--ease); }

.mark{ display:flex; flex-direction:column; line-height:1; margin-right:auto; }
.mark__en{
  font-family:var(--f-display-en);
  font-size:1.0625rem; letter-spacing:.30em; color:var(--text);
  padding-left:.06em;
}
.mark__th{
  font-family:var(--f-thai); font-size:.75rem; color:var(--gold);
  letter-spacing:.02em; margin-top:.35rem;
}

.nav__links{ display:flex; gap:clamp(1rem,2.2vw,2rem); }
.nav__link{
  position:relative; font-size:.8125rem; font-weight:500;
  letter-spacing:.09em; color:var(--text-mid); padding:.35rem 0;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="true"]{ color:var(--text); }
.nav__link:hover::after,.nav__link[aria-current="true"]::after{ width:100%; }

.nav__side{ display:flex; align-items:center; gap:.9rem; }

.lang{ display:flex; align-items:center; border:1px solid var(--gold-hair); border-radius:2px; overflow:hidden; }
.lang__b{
  background:none; border:0; cursor:pointer;
  padding:.42rem .62rem; font-size:.6875rem; font-weight:600; letter-spacing:.1em;
  color:var(--text-low); transition:background-color .3s var(--ease), color .3s var(--ease);
}
.lang__b[aria-pressed="true"]{ background:var(--gold); color:var(--ink); }
.lang__b:hover:not([aria-pressed="true"]){ color:var(--text); }

.nav__cta{ padding:.62rem 1.3rem; min-height:0; font-size:.8125rem; }

.burger{
  display:none; width:44px; height:44px; background:none; border:0; cursor:pointer;
  padding:0; place-items:center;
}
.burger span{ display:block; width:22px; height:1.5px; background:var(--text); transition:transform .4s var(--ease), opacity .3s; }
.burger span+span{ margin-top:6px; }
.nav.open .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ opacity:0; }
.nav.open .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:940px){
  .burger{ display:grid; }
  .nav__links{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; gap:0;
    background:rgba(9,15,43,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-block:1px solid var(--gold-hair);
    padding:.5rem var(--gut) 1.4rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .nav.open .nav__links{ opacity:1; transform:none; pointer-events:auto; }
  .nav__link{ padding:.95rem 0; font-size:1rem; border-bottom:1px solid rgba(200,164,75,.12); }
  .nav__link::after{ display:none; }
  .nav__cta{ display:none; }
}


/* =========================================================
   HERO — the dolly-in. You are walking to the door.
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden;
  /* 우측 영상 패널 폭, 그리고 .wrap 의 좌측 거터와 같은 값 */
  --media-w: clamp(400px, 48%, 700px);
  --edge: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__copy{ max-width:100%; }
.hero__media video,.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(9,15,43,.70) 0%, rgba(9,15,43,.30) 24%, rgba(9,15,43,.58) 60%, var(--ink) 100%),
    linear-gradient(90deg, rgba(9,15,43,.82) 0%, rgba(9,15,43,.34) 52%, rgba(9,15,43,.16) 100%);
}
.hero__body{
  position:relative; z-index:2; flex:1;
  display:flex; align-items:center;
  padding-top:100px; padding-bottom:clamp(5.5rem,10vw,7rem);
}

.hero__th{
  font-family:var(--f-thai); font-size:clamp(1.1rem,1.6vw,1.4rem);
  color:var(--gold-2); letter-spacing:.02em; margin-bottom:.5rem;
}
.hero__kicker{
  font-size:.6875rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text-mid); margin-bottom:1.9rem;
}
.hero__h{
  font-family:var(--f-display-ko); font-weight:700;
  font-size:clamp(2.4rem,1.5rem + 4.4vw,4.6rem);
  line-height:1.22; letter-spacing:-.02em;
  white-space:pre-line;
  margin:0 0 1.75rem; max-width:16ch;
  text-shadow:0 2px 40px rgba(9,15,43,.55);
}
html[lang="en"] .hero__h{ letter-spacing:-.015em; }
.hero__h em{ font-style:normal; color:var(--gold-2); }

.hero__line{
  height:1px; width:0; max-width:210px;
  background:linear-gradient(90deg,var(--gold),rgba(200,164,75,0));
  margin-bottom:1.75rem;
}
.hero__sub{ color:var(--text-mid); max-width:38ch; margin-bottom:2.5rem; font-size:1.0625rem; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* Bottom operating strip — real information, not decoration */
.hero__strip{
  position:relative; z-index:3;
  border-top:1px solid var(--gold-hair);
  background:rgba(9,15,43,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.hero__strip .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem clamp(1rem,3vw,2.75rem);
  padding-block:1.15rem;
  font-size:.75rem; letter-spacing:.14em; color:var(--text-mid);
}
.hero__strip b{ color:var(--gold); font-weight:600; }
.hero__strip .dot{ color:var(--gold-dim); }
.hero__strip a:hover{ color:var(--gold-2); }

.scrollcue{
  position:absolute; z-index:3; left:50%; bottom:calc(1.15rem + 3.6rem);
  translate:-50% 0; width:1px; height:46px; background:var(--gold-dim); overflow:hidden;
}
.scrollcue::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (max-width:940px){ .scrollcue{ display:none; } }


/* ---- Split hero: 글은 왼쪽 잉크 면에, 영상은 오른쪽 세로 패널에 ----
   영상이 9:16 세로라 풀블리드로 깔면 위아래가 크게 잘립니다.
   우측 풀하이트 패널이면 원본 프레이밍이 거의 그대로 살아납니다. */
@media (min-width:901px){
  .hero__media{ inset:0 0 0 auto; width:var(--media-w); }
  .hero__media video,.hero__media img{ object-position:center 45%; }

  /* 잉크 면과 만나는 이음매: 왼쪽으로 갈수록 녹아들고, 그 위에 골드 헤어라인 한 줄 */
  .hero__media::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      /* 이음매: 좁고 선명하게 — 넓게 풀면 탁해집니다 */
      linear-gradient(90deg, var(--ink) 0%, rgba(9,15,43,.50) 4%, rgba(9,15,43,0) 14%),
      /* 상단: 내비게이션이 밝은 간판 위에서도 읽히도록 확실히 눌러 둡니다 */
      linear-gradient(180deg, rgba(9,15,43,.88) 0%, rgba(9,15,43,.78) 6%, rgba(9,15,43,.30) 13%,
                              rgba(9,15,43,0) 26%, rgba(9,15,43,0) 74%, rgba(9,15,43,.55) 100%);
  }
  .hero__media::after{
    content:""; position:absolute; z-index:2; left:0; top:0; bottom:0; width:1px;
    background:linear-gradient(180deg,
      rgba(200,164,75,0) 0%, var(--gold-dim) 18%, var(--gold-dim) 82%, rgba(200,164,75,0) 100%);
  }

  .hero__scrim{ display:none; }

  .hero__copy{ max-width:clamp(19rem, 37vw, 36rem); }
  .hero__h{ font-size:clamp(2.1rem, .5rem + 3.3vw, 4rem); text-shadow:none; }
  .hero__sub{ max-width:34ch; }

  /* 스크롤 큐를 본문 좌측 거터에 맞춰, hero__line 의 연장선처럼 */
  .scrollcue{ left:var(--edge); translate:none; }
}

/* Orchestrated page-load */
.hero__th,.hero__kicker,.hero__h,.hero__sub,.hero__acts{
  opacity:0; transform:translateY(22px);
  animation:rise 1.05s var(--ease) forwards;
}
.hero__th{ animation-delay:.20s } .hero__kicker{ animation-delay:.30s }
.hero__h{ animation-delay:.40s }  .hero__sub{ animation-delay:.62s }
.hero__acts{ animation-delay:.74s }
.hero__line{ animation:draw 1.1s var(--ease) .54s forwards; }
.hero__strip{ opacity:0; animation:rise 1s var(--ease) .9s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes draw{ to{ width:210px; } }
@media (prefers-reduced-motion:reduce){
  .hero__th,.hero__kicker,.hero__h,.hero__sub,.hero__acts,.hero__strip{ opacity:1; transform:none; animation:none; }
  .hero__line{ width:210px; animation:none; }
  .scrollcue::after{ animation:none; }
}


/* =========================================================
   ABOUT — 낯선 맛을 즐겁게 고르도록
   ========================================================= */
.about__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } }

.about__fig{ position:relative; }
.about__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
.about__fig::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--gold-hair); border-radius:2px;
  transform:translate(14px,14px); pointer-events:none;
}
.about__cap{
  margin-top:1.4rem; font-size:.75rem; letter-spacing:.11em;
  color:var(--text-low); display:flex; gap:.7rem; align-items:baseline;
}
.about__cap::before{ content:""; width:22px; height:1px; background:var(--gold-dim); flex:none; translate:0 -.32em; }

/* Three operational guarantees — each one is something the kitchen actually does */
.guides{ margin-top:2.75rem; display:grid; gap:0; border-top:1px solid var(--gold-hair); }
.guide{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding:1.4rem 0; border-bottom:1px solid var(--gold-hair);
}
.guide__k{
  font-family:var(--f-thai); font-size:1.0625rem; color:var(--gold);
  min-width:3.4rem; line-height:1.6;
}
.guide__t{ font-size:.9375rem; font-weight:600; margin-bottom:.3rem; letter-spacing:-.01em; }
.guide__d{ font-size:.875rem; color:var(--text-mid); line-height:1.7; }


/* =========================================================
   SIGNATURE — 뿌님팟퐁커리
   ========================================================= */
.sig{ background:var(--ink-2); border-block:1px solid rgba(200,164,75,.14); }
.sig__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
@media (max-width:900px){ .sig__grid{ grid-template-columns:1fr; } }

.sig__media{ position:relative; border-radius:2px; overflow:hidden; background:var(--ink-3); }
.sig__media video{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.sig__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--gold-hair);
  background:linear-gradient(180deg,rgba(9,15,43,0) 62%,rgba(9,15,43,.45));
}
.sig__thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.7rem; }
.sig__thumbs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; opacity:.86; transition:opacity .4s var(--ease); }
.sig__thumbs img:hover{ opacity:1; }

.sig__price{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:2rem 0 1.9rem; padding-top:1.5rem; border-top:1px solid var(--gold-hair);
}
.sig__won{
  font-family:var(--f-display-en); font-size:clamp(2rem,1.4rem + 2vw,2.9rem);
  color:var(--gold-2); line-height:1; font-variant-numeric:tabular-nums;
}
.sig__unit{ font-size:.8125rem; letter-spacing:.1em; color:var(--text-low); }
.sig__alt{
  font-size:.8125rem; color:var(--text-mid); letter-spacing:.02em;
  padding-left:1rem; border-left:1px solid var(--gold-hair);
}
.sig__note{
  font-size:.8125rem; color:var(--text-low); letter-spacing:.02em;
  display:flex; gap:.6rem; align-items:flex-start;
}
.sig__note::before{ content:"※"; color:var(--gold); flex:none; }
.sig__acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }


/* =========================================================
   SIGNATURE FIVE — 3D coverflow
   스튜디오 컷의 배경(#e8e4e1~#f2f2f2)이 --bone 과 거의 같아,
   카드를 본지로 두면 접시만 종이 위에 떠 있는 것처럼 붙습니다.
   ========================================================= */
.picks{ background:var(--ink-2); border-block:1px solid rgba(200,164,75,.14); overflow:hidden; }
.picks__head{ text-align:center; margin-bottom:clamp(2rem,5vw,3.25rem); }
.picks__head .lead{ margin-inline:auto; }

.cf{
  position:relative;
  --cf-w:340px;      /* 카드 폭   */
  --cf-h:452px;      /* 카드 높이 */
  --cf-x1:292px;     /* 1칸 옆 이동 */
  --cf-x2:520px;     /* 2칸 옆 이동 */
}

/* JS 없을 때: 그냥 가로 스크롤 목록으로 읽힙니다 */
.cf__stage{
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.cf__stage > .cf__card{ flex:0 0 var(--cf-w); scroll-snap-align:center; }

/* JS 준비되면 3D 무대로 전환 */
.cf--ready .cf__stage{
  display:block; position:relative; overflow:visible; padding:0;
  height:var(--cf-h); perspective:1400px;
}
.cf--ready .cf__card{
  position:absolute; top:0; left:50%; margin-left:calc(var(--cf-w) / -2);
  width:var(--cf-w); height:var(--cf-h);
  transform-origin:center center;
  transition:transform .8s cubic-bezier(.25,1,.5,1),
             opacity .8s cubic-bezier(.25,1,.5,1),
             filter .8s cubic-bezier(.25,1,.5,1),
             box-shadow .8s cubic-bezier(.25,1,.5,1);
}

/* 위치별 상태 — 원 컴포넌트의 좌표계를 그대로 옮겼습니다 */
.cf--ready .cf__card[data-pos]{ opacity:0; transform:scale(.4); z-index:0; filter:brightness(.4) blur(2px); pointer-events:none; }
.cf--ready .cf__card[data-pos="0"]{
  transform:translateX(0) scale(1) rotateY(0deg); opacity:1; z-index:30;
  filter:none; pointer-events:auto; cursor:default;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.85), 0 0 0 1px var(--gold-dim), 0 0 42px rgba(200,164,75,.16);
}
.cf--ready .cf__card[data-pos="1"]{
  transform:translateX(var(--cf-x1)) scale(.84) rotateY(-24deg); opacity:.72; z-index:20;
  filter:brightness(.7) saturate(.85); pointer-events:auto; cursor:pointer;
}
.cf--ready .cf__card[data-pos="2"]{
  transform:translateX(var(--cf-x2)) scale(.68) rotateY(-38deg); opacity:.3; z-index:10;
  filter:brightness(.45) saturate(.6) blur(1.6px); pointer-events:auto; cursor:pointer;
}
.cf--ready .cf__card[data-pos="-1"]{
  transform:translateX(calc(var(--cf-x1) * -1)) scale(.84) rotateY(24deg); opacity:.72; z-index:20;
  filter:brightness(.7) saturate(.85); pointer-events:auto; cursor:pointer;
}
.cf--ready .cf__card[data-pos="-2"]{
  transform:translateX(calc(var(--cf-x2) * -1)) scale(.68) rotateY(38deg); opacity:.3; z-index:10;
  filter:brightness(.45) saturate(.6) blur(1.6px); pointer-events:auto; cursor:pointer;
}

/* 카드 */
.cf__card{
  background:var(--bone); color:var(--bone-ink);
  border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
}
.cf__shot{ position:relative; aspect-ratio:3/2; background:var(--bone); flex:none; }
.cf__shot img{ width:100%; height:100%; object-fit:cover; }
/* 스튜디오 배경과 본지 사이 경계를 지웁니다 */
.cf__shot::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34px;
  background:linear-gradient(180deg, rgba(242,237,226,0), var(--bone));
  pointer-events:none;
}

.cf__body{
  flex:1; display:flex; flex-direction:column;
  padding:.35rem clamp(1.1rem,1.6vw,1.4rem) clamp(1.15rem,1.8vw,1.4rem);
}
.cf__row{ display:flex; align-items:baseline; gap:.6rem; }
.cf__name{
  font-family:var(--f-display-ko); font-weight:700;
  font-size:1.3rem; letter-spacing:-.02em; line-height:1.3; margin:0;
}
.cf__price{
  margin-left:auto; font-size:1rem; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap;
}
.cf__price--ask{ font-size:.75rem; font-weight:600; letter-spacing:.1em; color:var(--royal); }
.cf__alt{
  font-family:var(--f-thai);
  font-size:.75rem; color:rgba(26,33,72,.58); letter-spacing:.01em;
  margin:.3rem 0 0; line-height:1.5;
}
.cf__desc{
  font-size:.8125rem; line-height:1.68; color:rgba(26,33,72,.76);
  margin:.7rem 0 0; padding-top:.7rem; border-top:1px solid rgba(30,63,168,.18);
}
.cf__cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius:9999px;
  background:var(--royal); color:#fff;
  font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.cf__cta svg{ flex:none; }
.cf__cta:hover{ background:var(--ink-4); transform:translateX(2px); }

/* 화살표 · 닷 */
.cf__nav{
  position:absolute; top:calc(var(--cf-h) / 2); translate:0 -50%;
  width:46px; height:46px; border-radius:50%;
  background:rgba(9,15,43,.6); border:1px solid var(--gold-hair); color:var(--text);
  display:grid; place-items:center; cursor:pointer; z-index:40;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.cf__nav:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.cf__nav--prev{ left:0; }
.cf__nav--next{ right:0; }
.cf:not(.cf--ready) .cf__nav{ display:none; }

.cf__dots{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:2.25rem; }
.cf:not(.cf--ready) .cf__dots{ display:none; }
.cf__dot{
  height:8px; width:8px; border-radius:9999px; border:0; padding:0; cursor:pointer;
  background:rgba(239,235,225,.25);
  transition:width .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.cf__dot[aria-selected="true"]{ width:30px; background:var(--gold); box-shadow:0 0 12px rgba(200,164,75,.5); }
.cf__dot:hover:not([aria-selected="true"]){ background:rgba(239,235,225,.5); }

@media (max-width:1100px){ .cf{ --cf-x1:250px; --cf-x2:430px; } }
@media (max-width:900px){
  .cf{ --cf-w:300px; --cf-h:450px; --cf-x1:212px; --cf-x2:352px; }
}
@media (max-width:640px){
  .cf{ --cf-w:266px; --cf-h:438px; --cf-x1:158px; --cf-x2:255px; }
  .cf__name{ font-size:1.15rem; }
  .cf__nav{ width:40px; height:40px; }
  .cf__nav--prev{ left:-6px; } .cf__nav--next{ right:-6px; }
}

@media (prefers-reduced-motion:reduce){
  .cf--ready .cf__card{ transition:opacity .2s linear; }
}

/* =========================================================
   MENU — the card sits on the restaurant's own steel table
   ========================================================= */
.menu{ position:relative; overflow:hidden; }
.steel{ position:absolute; inset:0; z-index:0; background-color:#121A3C; }
.steel::before,.steel::after{ content:""; position:absolute; inset:0; }
/* stamped studs, two interlocking grids */
/* Grid one: studs on the even rows */
.steel::before{
  background-image:
    radial-gradient(circle closest-side at 38% 36%, rgba(190,212,255,.16), rgba(190,212,255,0)),
    radial-gradient(circle closest-side at 62% 66%, rgba(0,0,0,.42),       rgba(0,0,0,0));
  background-size:var(--steel-cell) var(--steel-cell);
  background-position:0 0;
}
/* Grid two: offset by half a cell, so the studs interlock like the real sheet */
.steel::after{
  background-image:
    radial-gradient(circle closest-side at 38% 36%, rgba(190,212,255,.13), rgba(190,212,255,0)),
    radial-gradient(circle closest-side at 62% 66%, rgba(0,0,0,.34),       rgba(0,0,0,0)),
    /* one soft sheen, not a stripe pattern */
    radial-gradient(150% 80% at 22% 0%, rgba(226,236,255,.10), rgba(226,236,255,0) 62%);
  background-size:var(--steel-cell) var(--steel-cell),
                  var(--steel-cell) var(--steel-cell),
                  100% 100%;
  background-position:calc(var(--steel-cell)/2) calc(var(--steel-cell)/2),
                      calc(var(--steel-cell)/2) calc(var(--steel-cell)/2),
                      0 0;
}
.menu__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 40%, rgba(9,15,43,0) 30%, rgba(9,15,43,.72) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(9,15,43,0) 14%, rgba(9,15,43,0) 86%, var(--ink) 100%);
}
.menu .wrap{ position:relative; z-index:2; }
.menu__head{ text-align:center; margin-bottom:clamp(2rem,5vw,3.25rem); }
.menu__head .lead{ margin-inline:auto; text-align:center; }

/* Category tabs */
.tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.tab{
  background:rgba(9,15,43,.5); border:1px solid var(--gold-hair); border-radius:2px;
  padding:.55rem 1.05rem; cursor:pointer;
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mid);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover{ color:var(--text); border-color:var(--gold-dim); }
.tab[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* The card */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 30%),
    var(--bone);
  color:var(--bone-ink);
  border-radius:2px;
  padding:clamp(1.75rem,4.5vw,3.75rem) clamp(1.35rem,4vw,3.5rem);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.72), 0 2px 0 rgba(255,255,255,.28) inset;
  position:relative;
}
.card::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(30,63,168,.16);
  pointer-events:none; border-radius:1px;
}
.card__brand{
  text-align:center; padding-bottom:1.75rem; margin-bottom:2.25rem;
  border-bottom:1px solid rgba(30,63,168,.22);
}
.card__brand .th{ font-family:var(--f-thai); font-size:1.6rem; color:var(--royal); line-height:1.3; }
.card__brand .en{
  font-family:var(--f-display-en); font-size:.8125rem; letter-spacing:.42em;
  color:rgba(26,33,72,.62); margin-top:.5rem; padding-left:.42em;
}

.menu__cols{ columns:2; column-gap:clamp(2rem,5vw,4.5rem); }
@media (max-width:820px){ .menu__cols{ columns:1; } }

.mgroup{ break-inside:avoid; margin-bottom:2.5rem; }
.mgroup__h{
  display:flex; align-items:baseline; gap:.75rem;
  font-family:var(--f-display-en); font-size:1.35rem; color:var(--royal);
  letter-spacing:.02em; margin-bottom:1.1rem;
}
.mgroup__h .ko{
  font-family:var(--f-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.2em; color:rgba(26,33,72,.5);
}
.mgroup__h::after{ content:""; flex:1; height:1px; background:rgba(30,63,168,.2); }

.mitem{ margin-bottom:1.15rem; break-inside:avoid; }
.mitem__top{ display:flex; align-items:baseline; gap:.55rem; }
.mitem__name{ font-size:.9688rem; font-weight:700; letter-spacing:-.015em; }
.mitem__lead{ flex:1; border-bottom:1px dotted rgba(26,33,72,.34); translate:0 -.28em; min-width:1.5rem; }
.mitem__price{ font-size:.9688rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.mitem__alt{ font-size:.75rem; color:rgba(26,33,72,.56); letter-spacing:.02em; margin-top:.12rem; }
.mitem__desc{ font-size:.8125rem; color:rgba(26,33,72,.72); line-height:1.62; margin-top:.32rem; max-width:42ch; }
.mitem__combo{ font-size:.6875rem; color:var(--royal); letter-spacing:.04em; margin-top:.22rem; font-weight:600; }

.chip{
  display:inline-block; vertical-align:.08em; margin-left:.4rem;
  font-size:.625rem; font-weight:700; letter-spacing:.08em;
  padding:.14em .5em; border-radius:2px;
  background:rgba(214,69,42,.1); color:var(--chili); border:1px solid rgba(214,69,42,.28);
}
/* 캐러셀에 올린 다섯 접시를 메뉴판에서도 알아볼 수 있게 */
.chip--sig{
  background:rgba(200,164,75,.14); color:#8A6E1E; border-color:rgba(200,164,75,.55);
  letter-spacing:.1em;
}
.chip--sig::before{ content:"\2605"; margin-right:.3em; font-size:.9em; letter-spacing:0; }

.menu__foot{
  margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid rgba(30,63,168,.22);
  display:grid; gap:1.1rem;
}
.allergy{
  background:var(--royal); color:#fff; border-radius:2px;
  padding:.95rem 1.25rem; text-align:center;
  font-size:.8125rem; letter-spacing:.02em; line-height:1.7;
}
.origin{ font-size:.6875rem; color:rgba(26,33,72,.55); line-height:1.75; letter-spacing:.01em; }
.origin b{ color:rgba(26,33,72,.78); font-weight:600; letter-spacing:.14em; display:block; margin-bottom:.3rem; }

.menu__board{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
.menu__board a{ position:relative; display:block; border:1px solid var(--gold-hair); border-radius:2px; overflow:hidden; }
.menu__board img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; opacity:.82; transition:opacity .45s var(--ease), transform .8s var(--ease); }
.menu__board a:hover img{ opacity:1; transform:scale(1.03); }
.menu__board figcaption{
  position:absolute; inset:auto 0 0 0; padding:.7rem .9rem;
  background:linear-gradient(180deg,rgba(9,15,43,0),rgba(9,15,43,.9));
  font-size:.6875rem; letter-spacing:.14em; color:var(--text);
}


/* =========================================================
   GALLERY
   ========================================================= */
.gal{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(58px,5.6vw,92px);
  gap:clamp(.5rem,1.2vw,.9rem);
}
.gal figure{ position:relative; overflow:hidden; border-radius:2px; background:var(--ink-2); }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s var(--ease); }
.gal figure:hover img{ transform:scale(1.045); }
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:1rem 1.1rem .95rem;
  background:linear-gradient(180deg,rgba(9,15,43,0),rgba(9,15,43,.88));
  font-size:.75rem; letter-spacing:.09em; color:var(--text);
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.gal figure:hover figcaption, .gal figure:focus-within figcaption{ opacity:1; transform:none; }

/* Row 1 — 5 + 4 + 3 = 12 · Row 2 — 7 + 5 = 12 · Row 3 — 4 + 4 + 4 = 12 */
.g-a{ grid-column:span 5; grid-row:span 6; }
.g-c{ grid-column:span 3; grid-row:span 6; }
.g-w{ grid-column:span 7; grid-row:span 5; }
.g-h{ grid-column:span 5; grid-row:span 5; }
.g-t{ grid-column:span 4; grid-row:span 4; }
@media (max-width:860px){
  .g-a{ grid-column:span 12; grid-row:span 7; }
  .g-c{ grid-column:span 6; grid-row:span 6; }
  .g-w{ grid-column:span 12; grid-row:span 6; }
  .g-h{ grid-column:span 6; grid-row:span 6; }
  .g-t{ grid-column:span 6; grid-row:span 5; }
}

/* Film tile */
.film{ grid-column:span 4; grid-row:span 6; position:relative; border-radius:2px; overflow:hidden; background:#000; }
@media (max-width:860px){ .film{ grid-column:span 6; grid-row:span 6; } }
.film video{ width:100%; height:100%; object-fit:cover; }
.film__btn{
  position:absolute; inset:0; z-index:2; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:.5rem;
  padding:1.5rem; cursor:pointer;
  background:linear-gradient(180deg,rgba(9,15,43,.15),rgba(9,15,43,.82));
  border:1px solid var(--gold-hair); border-radius:2px;
  text-align:left; transition:background-color .45s var(--ease);
}
.film__btn:hover{ background:linear-gradient(180deg,rgba(9,15,43,.05),rgba(9,15,43,.7)); }
.film.playing .film__btn{ opacity:0; pointer-events:none; }
.film__play{
  width:50px; height:50px; flex:none;
  border:1px solid var(--gold); border-radius:50%;
  display:grid; place-items:center; margin-bottom:.65rem; padding-left:3px;
  color:var(--gold-2); transition:background-color .4s var(--ease), color .4s var(--ease);
}
.film__btn:hover .film__play{ background:var(--gold); color:var(--ink); }
.film__ttl{ font-family:var(--f-display-ko); font-weight:700; font-size:1.2rem; letter-spacing:-.02em; }
.film__meta{ font-size:.6875rem; letter-spacing:.18em; color:var(--gold); }


/* =========================================================
   SPACE
   ========================================================= */
.space{ background:var(--ink-2); border-block:1px solid rgba(200,164,75,.14); }
.space__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .space__grid{ grid-template-columns:1fr; } }
.space__stack{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.space__stack img{ width:100%; object-fit:cover; border-radius:2px; }
.space__stack img:nth-child(1){ grid-column:1/-1; aspect-ratio:16/10; }
.space__stack img:nth-child(2),.space__stack img:nth-child(3){ aspect-ratio:1/1; }

.hours{ margin-top:2.25rem; border-top:1px solid var(--gold-hair); }
.hours__row{
  display:flex; align-items:baseline; gap:1rem;
  padding:.95rem 0; border-bottom:1px solid var(--gold-hair);
  font-size:.9375rem;
}
.hours__k{ font-size:.75rem; letter-spacing:.16em; color:var(--gold); min-width:6.5rem; flex:none; }
.hours__v{ font-variant-numeric:tabular-nums; }
.hours__v small{ display:block; font-size:.8125rem; color:var(--text-low); letter-spacing:.02em; margin-top:.15rem; }
.badge{
  display:inline-block; margin-left:.5rem; padding:.16em .55em;
  font-size:.625rem; font-weight:700; letter-spacing:.1em;
  border:1px solid var(--gold-dim); border-radius:2px; color:var(--gold-2);
}


/* =========================================================
   RESERVE
   ========================================================= */
.res__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.25rem,5vw,4.5rem); align-items:start; }
@media (max-width:960px){ .res__grid{ grid-template-columns:1fr; } }

.form{ display:grid; gap:1.4rem; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .frow{ grid-template-columns:1fr; } }

.field{ display:grid; gap:.55rem; }
.field label,.fieldset__lg{
  font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.field input,.field select,.field textarea{
  width:100%; background:rgba(255,255,255,.028);
  border:0; border-bottom:1px solid var(--gold-hair); border-radius:0;
  padding:.8rem .1rem; font-size:.9375rem; color:var(--text);
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:2rem;
}
.field select option{ background:var(--ink-3); color:var(--text); }
.field textarea{ resize:vertical; min-height:92px; line-height:1.7; }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-low); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--gold); background:rgba(255,255,255,.05); outline:none;
}
/* 아직 손대지 않은 빈 칸을 오류로 보이게 하지 않습니다 */
.field input:not(:placeholder-shown):invalid{ border-bottom-color:rgba(214,69,42,.7); }

/* ---- 날짜 피커: 한 주씩 넘기는 스트립 ----
   식당 예약은 대부분 2~3주 안입니다. 네이티브 달력보다 손이 덜 갑니다. */
.picker__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:.9rem; flex-wrap:wrap;
}
.picker__nav{ display:flex; align-items:center; gap:.35rem; }
.picker__month{
  font-size:.8125rem; color:var(--text); letter-spacing:.04em;
  font-variant-numeric:tabular-nums; min-width:8.5rem; text-align:center;
}
.picker__btn{
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  background:none; border:1px solid var(--gold-hair); border-radius:2px;
  color:var(--text-mid); cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.picker__btn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold-2); }
.picker__btn:disabled{ opacity:.28; cursor:not-allowed; }

.days{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; }
.day{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.65rem .15rem .55rem;
  background:rgba(255,255,255,.028); border:1px solid var(--gold-hair); border-radius:2px;
  cursor:pointer; color:var(--text-mid); text-align:center;
  transition:background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.day:hover:not(:disabled):not([aria-pressed="true"]){ border-color:var(--gold-dim); background:rgba(255,255,255,.06); }
.day__w{ font-size:.6875rem; letter-spacing:.05em; line-height:1; }
.day__d{ font-size:1.0625rem; font-weight:600; line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; }
.day__t{ font-size:.5625rem; letter-spacing:.06em; line-height:1; color:var(--gold); min-height:.7em; }
.day--sun .day__w{ color:#E0806C; }
.day--sat .day__w{ color:#8FAEE8; }
.day[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.day[aria-pressed="true"] .day__d,
.day[aria-pressed="true"] .day__t,
.day[aria-pressed="true"] .day__w{ color:var(--ink); }
.day:disabled{ opacity:.26; cursor:not-allowed; }
/* 정기휴무 — 지난 날과 달리 '닫혀 있다'가 읽혀야 합니다 */
.day--off{ opacity:.5; }
.day--off .day__d{ color:var(--text-low); text-decoration:line-through; text-decoration-thickness:1px; }
.day--off .day__t{ color:#E0806C; }

/* ---- 시간 피커: 낮/저녁으로 나눈 칩 격자 ---- */
.slots{ display:grid; gap:.9rem; }
.slotgrp{ display:grid; grid-template-columns:3.1rem 1fr; gap:.85rem; align-items:start; }
.slotgrp__k{
  font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  color:var(--gold); padding-top:.72rem;
}
.slotgrp__v{ display:flex; flex-wrap:wrap; gap:.4rem; }
.slot{
  position:relative; padding:.55rem .8rem;
  background:rgba(255,255,255,.028); border:1px solid var(--gold-hair); border-radius:2px;
  color:var(--text-mid); font-size:.8125rem; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; cursor:pointer;
  transition:background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.slot:hover:not(:disabled):not([aria-pressed="true"]){ border-color:var(--gold-dim); color:var(--text); background:rgba(255,255,255,.06); }
.slot[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600; }
.slot:disabled{ opacity:.24; cursor:not-allowed; text-decoration:line-through; }
.slot em{
  font-style:normal; font-size:.5625rem; letter-spacing:.08em;
  color:var(--gold); margin-left:.35rem;
}
.slot[aria-pressed="true"] em{ color:var(--ink); }
.slot:disabled em{ color:inherit; }
.slots__note{
  font-size:.8125rem; color:var(--chili); letter-spacing:.01em; margin-top:.2rem;
}

@media (max-width:560px){
  .days{ gap:.3rem; }
  .day{ padding:.55rem .1rem .5rem; }
  .day__d{ font-size:.9375rem; }
  .slotgrp{ grid-template-columns:1fr; gap:.45rem; }
  .slotgrp__k{ padding-top:0; }
}

/* Preference chips — the kitchen actually adjusts these */
.fieldset{ border:0; padding:0; margin:0; display:grid; gap:.7rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips input{ position:absolute; opacity:0; width:0; height:0; }
.chips label{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1rem; cursor:pointer;
  border:1px solid var(--gold-hair); border-radius:2px;
  font-size:.8125rem; font-weight:500; letter-spacing:.02em; color:var(--text-mid);
  text-transform:none;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chips label:hover{ border-color:var(--gold-dim); color:var(--text); }
.chips input:checked + label{ background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600; }
.chips input:focus-visible + label{ outline:2px solid var(--gold-2); outline-offset:3px; }

.res__out{
  margin-top:.5rem; border:1px solid var(--gold-hair); border-radius:2px;
  background:rgba(255,255,255,.028); padding:1.35rem 1.4rem;
}
.res__out h4{
  font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.85rem;
}
.res__sum{
  font-size:.9375rem; line-height:1.9; color:var(--text); white-space:pre-line;
  font-variant-numeric:tabular-nums;
}
.res__sum.empty{ color:var(--text-low); }
.res__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem; }
.res__acts .btn{ flex:1 1 150px; padding-inline:1rem; }
/* 주 행동은 맨 위 한 줄을 다 씁니다 (JS 가 DOM 순서도 맨 앞으로 옮깁니다) */
.res__acts .btn.is-primary{ flex:1 1 100%; }
.res__acts .btn[hidden]{ display:none; }
@media (max-width:420px){ .res__acts .btn{ flex:1 1 100%; } }

.res__where{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--gold-hair);
  font-size:.8125rem; color:var(--text-mid); line-height:1.75; letter-spacing:.01em;
}
.res__where b{ color:var(--gold-2); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.res__where a{ color:var(--gold-2); }
.res__where a:hover{ text-decoration:underline; }
.res__where small{ display:block; color:var(--text-low); font-size:.75rem; margin-top:.25rem; }

.res__disclaim{
  font-size:.75rem; color:var(--text-low); letter-spacing:.02em; line-height:1.8;
  display:flex; gap:.55rem; align-items:flex-start;
}
.res__disclaim::before{ content:"※"; color:var(--gold-dim); flex:none; }

.res__aside{ position:sticky; top:100px; }
@media (max-width:960px){ .res__aside{ position:static; } }
.res__steps{ display:grid; gap:0; margin-top:2rem; border-top:1px solid var(--gold-hair); }
.res__step{ padding:1.15rem 0; border-bottom:1px solid var(--gold-hair); display:grid; grid-template-columns:auto 1fr; gap:1rem; }
.res__step b{
  font-family:var(--f-display-en); font-size:.8125rem; color:var(--gold);
  letter-spacing:.1em; padding-top:.15rem;
}
.res__step p{ font-size:.875rem; color:var(--text-mid); line-height:1.7; }
.res__step p strong{ color:var(--text); font-weight:600; display:block; margin-bottom:.2rem; font-size:.9375rem; }


/* ---------------------------------------------------------
   예약 / 포장 모드
   섹션의 data-mode 하나로 양쪽 문구와 필드를 갈아 끼웁니다.
   --------------------------------------------------------- */
#reserve[data-mode="reserve"] [data-for="togo"],
#reserve[data-mode="togo"]    [data-for="reserve"]{ display:none; }

/* 모드 전환은 고수 칩보다 위계가 높아야 해서 한 줄을 반씩 채웁니다 */
.chips--mode{ gap:.6rem; }
.chips--mode label{
  flex:1 1 9rem; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.8rem 1.1rem;
}
.chips--mode label b{ font-size:.9375rem; font-weight:600; letter-spacing:.02em; color:var(--text); }
.chips--mode label small{ font-size:.75rem; font-weight:400; color:var(--text-low); letter-spacing:.01em; }
.chips--mode input:checked + label b,
.chips--mode input:checked + label small{ color:var(--ink); }

/* 날짜 안내는 경고가 아니라 참고이므로 붉게 두지 않습니다 */
.slots__note--soft{ color:var(--text-mid); }

/* ---- 포장 메뉴 담기 ----
   메뉴 섹션의 .mitem 을 그대로 읽어 만듭니다. 품목·가격을 두 번 적지 않습니다. */
.tomenu{
  border:1px solid var(--gold-hair); border-radius:2px;
  background:rgba(255,255,255,.028);
}
.tocat + .tocat{ border-top:1px solid var(--gold-hair); }
.tocat__b{
  width:100%; display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1rem; background:none; border:0; cursor:pointer; text-align:left;
}
.tocat__n{
  flex:1 1 auto; font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.tocat__c{
  flex:none; font-size:.6875rem; font-weight:600; color:var(--ink);
  background:var(--gold); border-radius:2px; padding:.1rem .42rem;
  font-variant-numeric:tabular-nums;
}
.tocat__c[hidden]{ display:none; }
.tocat__i{ flex:none; color:var(--text-low); transition:transform .3s var(--ease); }
.tocat__b:hover .tocat__i{ color:var(--gold-2); }
.tocat__b[aria-expanded="true"] .tocat__i{ transform:rotate(180deg); }
.tocat__b[aria-expanded="false"] + .tocat__l{ display:none; }

.toitem{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.85rem;
  padding:.55rem 1rem; border-top:1px solid rgba(255,255,255,.05);
}
.toitem__n{ font-size:.875rem; line-height:1.5; color:var(--text-mid); }
.toitem__p{ font-size:.8125rem; color:var(--text-low); font-variant-numeric:tabular-nums; }
/* 곁들임을 골라야 하는 품목의 안내 — 수량은 아래 .tovar 줄에서 셉니다 */
.toitem__o{ display:block; font-size:.6875rem; line-height:1.5; color:var(--gold); margin-top:.2rem; letter-spacing:.01em; }
.toitem__c{
  min-width:1.8rem; text-align:center; font-size:.875rem; font-weight:600;
  color:var(--gold-2); font-variant-numeric:tabular-nums;
}
.toitem.on .toitem__n{ color:var(--text); }
.toitem.on .toitem__p{ color:var(--text-mid); }

.qty{ display:inline-flex; align-items:center; border:1px solid var(--gold-hair); border-radius:2px; }
.toitem.on .qty{ border-color:var(--gold-dim); }
.qty__b{
  width:30px; height:30px; display:grid; place-items:center;
  background:none; border:0; color:var(--text-mid); cursor:pointer;
  font-size:.9375rem; line-height:1; transition:color .25s var(--ease);
}
.qty__b:hover:not(:disabled){ color:var(--gold-2); }
.qty__b:disabled{ opacity:.24; cursor:not-allowed; }
.qty__v{
  min-width:1.8rem; text-align:center; font-size:.875rem; font-weight:600;
  color:var(--text); font-variant-numeric:tabular-nums;
}
/* 담기지 않은 줄의 0 은 눈에 걸리지 않게 낮춥니다 */
.toitem:not(.on) .qty__v{ color:var(--text-low); font-weight:400; }

/* 곁들임 줄 — 똠얌꿍 2개를 '밥 1 · 면&숙주 1' 로 섞어 담을 수 있게
   수량을 선택마다 따로 셉니다 */
.tovar{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.85rem;
  padding:.4rem 1rem .4rem 2rem; background:rgba(255,255,255,.022);
  border-top:1px solid rgba(255,255,255,.04);
}
.tovar__n{ font-size:.8125rem; color:var(--text-mid); }
.tovar__n::before{
  content:"\21B3"; margin-right:.45rem; color:var(--text-low); font-size:.875em;
}
.tovar__p{ font-size:.75rem; color:var(--text-low); font-variant-numeric:tabular-nums; }
.tovar.on{ background:rgba(200,164,75,.07); }
.tovar.on .tovar__n{ color:var(--text); }
.tovar.on .tovar__p{ color:var(--gold-2); }
.tovar.on .qty{ border-color:var(--gold-dim); }
.tovar:not(.on) .qty__v{ color:var(--text-low); font-weight:400; }

.tomenu__foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; border-top:1px solid var(--gold-hair); font-size:.8125rem;
}
.tomenu__cnt{ color:var(--text-mid); }
.tomenu__sum{ color:var(--gold-2); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.tomenu__hint{ font-size:.75rem; color:var(--text-low); line-height:1.7; letter-spacing:.01em; }

@media (max-width:420px){
  .toitem{ grid-template-columns:1fr auto; gap:.2rem .85rem; padding:.65rem 1rem; }
  .toitem__n{ grid-column:1; grid-row:1; }
  .toitem__p{ grid-column:1; grid-row:2; }
  .qty{ grid-column:2; grid-row:1 / span 2; }
  .toitem__c{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .tovar{ grid-template-columns:1fr auto; gap:.15rem .85rem; padding-left:1.6rem; }
  .tovar__n{ grid-column:1; grid-row:1; }
  .tovar__p{ grid-column:1; grid-row:2; }
  .tovar .qty{ grid-column:2; grid-row:1 / span 2; }
}

/* ---- 포장 안내 ---- */
.res__notice{
  display:grid; gap:.5rem; list-style:none; margin:0;
  padding:1.1rem 1.25rem;
  border:1px solid var(--gold-hair); border-left:2px solid var(--gold-dim); border-radius:2px;
  background:rgba(255,255,255,.02);
}
.res__notice li{
  position:relative; padding-left:.85rem;
  font-size:.8125rem; line-height:1.75; color:var(--text-mid); letter-spacing:.01em;
}
.res__notice li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:4px; height:4px; border-radius:50%; background:var(--gold-dim);
}



/* =========================================================
   VISIT
   ========================================================= */
.visit{ background:var(--ink-2); border-top:1px solid rgba(200,164,75,.14); }
.visit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.25rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .visit__grid{ grid-template-columns:1fr; } }

.addr{ display:grid; gap:0; border-top:1px solid var(--gold-hair); margin-bottom:2rem; }
.addr__row{ display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--gold-hair); }
.addr__k{ font-size:.6875rem; letter-spacing:.18em; color:var(--gold); padding-top:.28em; }
.addr__v{ font-size:.9375rem; line-height:1.7; }
.addr__v small{ display:block; color:var(--text-low); font-size:.8125rem; margin-top:.2rem; }
.addr__v a:hover{ color:var(--gold-2); }

.maps{ display:flex; flex-wrap:wrap; gap:.7rem; }
.maps .btn{ flex:1 1 160px; }

.visit__fig img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; }


/* =========================================================
   FOOTER
   ========================================================= */
.foot{ background:var(--ink); padding-block:clamp(3rem,6vw,4.5rem) 2.5rem; border-top:1px solid var(--gold-hair); }
.foot__top{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-end; justify-content:space-between; }
.foot__mark .th{ font-family:var(--f-thai); font-size:2rem; color:var(--gold); line-height:1.25; }
.foot__mark .en{ font-family:var(--f-display-en); font-size:.8125rem; letter-spacing:.42em; color:var(--text-mid); margin-top:.5rem; padding-left:.42em; }
.foot__links{ display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.8125rem; letter-spacing:.1em; color:var(--text-mid); }
.foot__links a:hover{ color:var(--gold-2); }
.foot__bot{
  margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--gold-hair);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.6875rem; letter-spacing:.08em; color:var(--text-low); line-height:1.9;
}
.foot__bot p{ max-width:62ch; }
.foot__credit a{ color:inherit; }
.foot__credit a:hover{ color:var(--gold-2); }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:2rem; translate:-50% 0; z-index:120;
  background:var(--gold); color:var(--ink); border-radius:2px;
  padding:.85rem 1.5rem; font-size:.875rem; font-weight:600; letter-spacing:.02em;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.show{ opacity:1; transform:none; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--gold); color:var(--ink); padding:.7rem 1.2rem; border-radius:2px;
  font-size:.8125rem; font-weight:600; transition:top .3s var(--ease);
}
.skip:focus{ top:.75rem; }


/* =========================================================
   PRINT — the menu, on paper
   ========================================================= */
@media print{
  :root{ --sec-y:0; }
  body{ background:#fff; color:#111; }
  .nav,.hero,#about,#signature,#picks,#gallery,#space,#reserve,.foot,.toast,.skip,
  .tabs,.menu__board,.scrollcue{ display:none !important; }
  .menu,.section{ padding:0; }
  .steel,.menu__vignette{ display:none; }
  .card{ box-shadow:none; background:#fff; padding:0; }
  .card::after{ display:none; }
  .menu__cols{ columns:2; column-gap:18mm; }
  .mgroup__h,.mitem__name,.mitem__price{ color:#000; }
  .mitem__desc,.mitem__alt{ color:#444; }
  .allergy{ background:#fff; color:#000; border:1px solid #000; }
  #visit{ page-break-before:always; background:#fff; }
  #visit .h-sec,#visit .addr__v{ color:#000; }
  #visit .addr__k,#visit .eyebrow{ color:#666; }
  .maps,.visit__fig{ display:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.7em; color:#666; }
}