/* =========================================================
   수라상 — 햇살 차양 (Sunny Awning)
   단일 라이트 테마 · 모바일 퍼스트
   ========================================================= */

:root {
  color-scheme: light;

  /* 차양 노랑 */
  --yellow: #FFC72C;
  --yellow-sun: #FFD545;
  --yellow-2: #FFE07A;
  --yellow-deep: #F2A900;
  --yellow-soft: #FFEDA8;
  --yellow-pale: #FFF6D3;
  --cream: #FFFAEB;
  --paper: #FFFFFF;

  /* 먹 */
  --ink: #1F1A15;
  --ink-2: #463D33;
  --ink-3: #6B5F52;

  /* 낙관 · 고추장 */
  --red: #D7261E;
  --red-deep: #A8180F;
  --red-soft: #FFE5E0;

  /* 영업중 네온 */
  --green: #14B85A;
  --green-ink: #0A7337;
  --green-soft: #E1F7E9;

  /* 간판 창살 */
  --plum: #7B2D2B;

  /* 나무 상 */
  --wood-1: #F6DCB0;
  --wood-2: #ECC690;
  --wood-3: #DDAE72;
  --wood-edge: #C68A4B;

  --line: #F0E4C4;
  --line-2: #E3D09C;

  --shadow-1: 0 1px 2px rgba(90, 55, 0, .07), 0 6px 18px rgba(130, 85, 0, .10);
  --shadow-2: 0 2px 6px rgba(90, 55, 0, .08), 0 18px 40px rgba(130, 85, 0, .16);
  --plate-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 3px 4px rgba(96, 58, 10, .16), 0 14px 26px rgba(96, 58, 10, .26);

  --f-head: "Hahmlet", "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --f-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --f-pen: "Nanum Pen Script", "Apple SD Gothic Neo", cursive;

  --header-h: 60px;
  --gutter: 16px;
  --container: 1240px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* 타입 스케일 — 글자 크기는 이 값만 씀 */
  --fs-12: 12px;  /* 숫자 배지 */
  --fs-13: 13px;  /* 라벨 · 태그 · 출처 */
  --fs-15: 15px;  /* UI · 짧은 본문 · 주석 */
  --fs-17: 17px;  /* 본문 */
  --fs-20: 20px;  /* 카드 제목 · 작은 가격 */
  --fs-24: 24px;  /* 소제목 · 카드 가격 */
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-h1: clamp(40px, 11.2vw, 84px);
  --fs-h2: clamp(31px, 8vw, 54px);
  --fs-h3: clamp(24px, 6.4vw, 38px);
  --fs-display: clamp(36px, 9.4vw, 62px);
  /* 본문 굵기: 400 글 · 600 라벨 · 800 강조 (Hahmlet 제목만 900) */

  /* 모서리 */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* 사진이 오기 전 접시를 채우는 음식 빛깔 (빈 흰 원이 보이지 않게) */
  --photo-ph: radial-gradient(circle at 45% 40%, #F8D7A4, #E9A766 78%);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
/* 스크롤하면 헤더가 줄어든 높이(54px)를 모든 붙박이 요소가 함께 씀 */
html.is-compact { --header-h: 54px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-17);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
/* 본문: 마지막 줄에 한 낱말만 남지 않게 (제목·리드는 balance) */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
h1, h2, h3, .sec-lead, .final__lead, .hero__lead { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a, button, [role="tab"], [role="radio"] { -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; }
q { quotes: none; }
mark { background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* 눌러도 동작하지 않는 상태 (disabled 대신 써서 키보드 포커스를 잃지 않음) */
[aria-disabled="true"] { opacity: .4; cursor: default; }
.nowrap { white-space: nowrap; }
::selection { background: var(--yellow); color: var(--ink); }

.i { width: 20px; height: 20px; flex: none; }
.i--sm { width: 15px; height: 15px; }
[hidden] { display: none !important; }
.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; }
.br-sm { display: inline; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 76px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- 공통 버튼 ---------- */
.btn {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  font-weight: 800; font-size: var(--fs-15); letter-spacing: -0.01em; line-height: 1.2;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-edge); border-radius: var(--r-sm);
  box-shadow: 0 4px 0 var(--btn-edge);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .2s;
  white-space: nowrap; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--btn-edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn--red { --btn-bg: var(--red); --btn-fg: #fff; --btn-edge: var(--red-deep); }
.btn--ink { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: var(--ink); }
.btn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--ink); --btn-edge: var(--ink); }
.btn--ghost { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-edge: #D9C9A0; box-shadow: 0 3px 0 #E9DBB5; font-weight: 600; border-width: 1.5px; }
.btn--ghost:hover { box-shadow: 0 4px 0 #E9DBB5; }
.btn--ghost:active { box-shadow: 0 0 0 #E9DBB5; }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: var(--fs-15); border-radius: var(--r-sm); }
.btn--lg { min-height: 56px; padding: 0 24px; font-size: var(--fs-17); border-radius: var(--r-md); }
.btn--block { width: 100%; }

/* ---------- 낙관(도장) ---------- */
.seal {
  display: inline-grid; place-items: center;
  background: var(--red); color: #fff;
  font-family: var(--f-head); font-weight: 900; line-height: 1;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
  transform: rotate(-4deg);
  letter-spacing: -0.02em;
}
.seal--xs { width: 28px; height: 28px; font-size: 15px; border-radius: 6px; }
.seal--badge { padding: 7px 11px 6px; font-size: 13px; transform: rotate(-2deg); }
.seal--tag { padding: 7px 10px 6px; font-size: 13px; }
.seal--price { width: 58px; height: 58px; font-size: var(--fs-13); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4.5px rgba(255,255,255,.9); transform: rotate(-10deg); padding: 6px; text-align: center; line-height: 1.1; }
.seal--stamp { width: 74px; height: 74px; font-size: 40px; border-radius: 12px; transform: rotate(-6deg); flex: none; padding-bottom: 4px; }
.seal--sticker {
  position: absolute; z-index: 3;
  width: 96px; height: 96px; border-radius: 50%; font-size: 17px; line-height: 1.05; text-align: center; padding: 10px;
  align-content: center; row-gap: 0;
  box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 6px rgba(255,255,255,.9), 0 8px 18px rgba(168,24,15,.28);
  transform: rotate(10deg);
}
.seal--sticker small { display: block; font-size: 13px; margin-top: 2px; }

/* ---------- 태그 / 배지 ---------- */
.tag, .badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-13); font-weight: 600; line-height: 1;
  padding: 6px 9px; border-radius: 8px; white-space: nowrap;
}
.tag .i { width: 14px; height: 14px; }
.tag--hot { background: var(--red-soft); color: var(--red-deep); }
.tag--mild { background: var(--green-soft); color: var(--green-ink); }
.tag--warm { background: #FFEBC2; color: #8A5300; }
.badge { background: var(--yellow-pale); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.badge--red { background: var(--red); color: #fff; box-shadow: none; }
.badge--line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- 섹션 헤드 ---------- */
.sec-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-15); color: var(--red); letter-spacing: -0.01em; }
.sec-title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h2); line-height: 1.16; letter-spacing: -0.03em; color: var(--ink); }
.sec-lead { font-size: var(--fs-17); color: var(--ink-2); max-width: 38em; }
.sec-cite { margin-top: -6px; font-size: var(--fs-15); font-weight: 800; color: var(--ink-3); }
.sec-lead b { color: var(--red); }

/* =========================================================
   1. 티커
   ========================================================= */
.ticker {
  position: relative; z-index: 60;
  background: var(--red); color: #fff;
  overflow: hidden; height: 32px;
  font-size: var(--fs-13); font-weight: 600; letter-spacing: -0.01em;
}
.ticker { cursor: pointer; }
.ticker__track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:focus-within .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
/* 마우스를 올리면 멈춤은 진짜 마우스가 있는 기기에서만 (터치 화면은 톡 누른 뒤 :hover 가 남아 다시 흐르지 않음) */
@media (hover: hover) and (pointer: fine) { .ticker:hover .ticker__track { animation-play-state: paused; } }
/* 멈춤 표시 */
.ticker.is-paused::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) 8px 7px / 3px 10px no-repeat, linear-gradient(var(--ink), var(--ink)) 13px 7px / 3px 10px no-repeat, var(--yellow);
  box-shadow: 0 0 0 2px var(--red);
}
.ticker__toggle.sr-only:focus { position: absolute !important; z-index: 2; left: 8px; top: 3px; width: auto; height: 26px; margin: 0; clip: auto; overflow: visible; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-weight: 800; font-size: var(--fs-13); white-space: nowrap; }
.ticker__list { display: flex; flex: none; }
.ticker__list li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 18px; white-space: nowrap; position: relative; }
.ticker__list li.is-hot { height: 24px; margin: 4px 8px; padding: 0 12px; border-radius: var(--r-pill); background: var(--yellow); color: var(--ink); font-weight: 800; }
.ticker__list li.is-hot::after { right: -12px; }
.ticker .is-hot .i { color: var(--red-deep); }
.ticker__list li::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--yellow); border-radius: 2px; transform: rotate(45deg); }
.ticker .i { width: 16px; height: 16px; color: var(--yellow); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =========================================================
   2. 헤더
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, box-shadow .3s, border-color .3s;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: rgba(227, 208, 156, .7);
  box-shadow: 0 6px 24px rgba(130, 85, 0, .10);
}
.header__inner { display: flex; align-items: center; gap: 6px; height: var(--header-h); transition: height .3s var(--ease-out); }
.site-header.is-scrolled .header__inner { height: 54px; }
.header__logo { flex: 0 1 auto; display: flex; align-items: center; min-height: 44px; min-width: 64px; }
.header__logo img { width: 100px; max-width: 100%; height: auto; transition: width .3s var(--ease-out); }
.site-header.is-scrolled .header__logo img { width: 90px; }
.header__nav { display: none; }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.header__call { padding: 0 11px; gap: 5px; box-shadow: 0 3px 0 var(--btn-edge); }
.header__call .i { width: 18px; height: 18px; }

/* 모바일 섹션 바로가기 */
.nav-toggle {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink);
  transition: transform .12s var(--ease-out), box-shadow .12s;
}
.nav-toggle:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ink); }
.nav-toggle .i { width: 22px; height: 22px; }
.nav-toggle .i--close, .nav-toggle[aria-expanded="true"] .i--open { display: none; }
.nav-toggle[aria-expanded="true"] .i--close { display: block; }
.nav-toggle[aria-expanded="true"] { background: var(--yellow); }
.mnav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 18px 30px rgba(130, 85, 0, .18);
  padding: 12px 0 16px;
  animation: mnav-in .28s var(--ease-out);
}
@keyframes mnav-in { from { transform: translateY(-10px); } to { transform: none; } }
.mnav__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* 한 줄의 두 칸은 늘 같은 높이 (글이 두 줄이 되는 칸이 생겨도 옆 칸이 함께 늘어남) */
.mnav__grid li { display: flex; min-width: 0; }
.mnav a {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px;
  border-radius: var(--r-sm); background: var(--yellow-pale); font-weight: 800; font-size: var(--fs-15); letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.mnav a:active { background: var(--yellow-soft); }
.mnav a[aria-current="page"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.mnav__ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper); color: var(--red); }
.header__call-full { display: none; }

/* 상태 배지 */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 11px 0 10px;
  border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 800; letter-spacing: -0.03em;
  background: var(--yellow-pale); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  white-space: nowrap;
}
.status-pill__text { display: grid; line-height: 1.12; text-align: left; }
.status-pill__text b { font-weight: 800; font-size: var(--fs-13); }
.status-pill__text small { font-weight: 600; font-size: var(--fs-12); }
.status-pill__sep { display: none; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; position: relative; }
[data-state="open"] .status-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(20, 184, 90, .22), 0 0 10px var(--green); }
[data-state="last"] .status-dot { background: #FF8A00; box-shadow: 0 0 0 3px rgba(255, 138, 0, .22), 0 0 10px #FF8A00; }
/* 깜빡이는 점은 헤더 배지 하나만 (히어로·영업시간 점은 은은한 고정 빛) */
.status-pill[data-state="open"] .status-dot { animation: pulse 1.8s ease-in-out infinite; }
.status-pill[data-state="last"] .status-dot { animation: pulse 1.2s ease-in-out infinite; }
[data-state="ordersclosed"] .status-dot, [data-state="closed"] .status-dot, [data-state="holiday"] .status-dot { background: var(--red); box-shadow: 0 0 0 3px rgba(215, 38, 30, .18); }
[data-state="soon"] .status-dot, [data-state="before"] .status-dot { background: var(--yellow-deep); box-shadow: 0 0 0 3px rgba(242, 169, 0, .25); }
.status-pill[data-state="open"] { background: var(--green-soft); color: var(--green-ink); box-shadow: inset 0 0 0 1.5px #B5EBC8; }
.status-pill[data-state="last"] { background: #FFF0DA; color: #8F4A00; box-shadow: inset 0 0 0 1.5px #FFD39A; }
.status-pill[data-state="closed"], .status-pill[data-state="holiday"], .status-pill[data-state="ordersclosed"] { background: var(--red-soft); color: var(--red-deep); box-shadow: inset 0 0 0 1.5px #FFC2B8; }
@keyframes pulse { 50% { transform: scale(.78); opacity: .75; } }

/* 붓글씨 로고 드러내기 */
.brush-in { animation: brush 1.25s cubic-bezier(.65, .05, .3, 1) both; }
.js .brush-in--view { animation: none; }
.js .brush-in--view.is-inview { animation: brush 1.4s cubic-bezier(.65, .05, .3, 1) both; }
@keyframes brush {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* =========================================================
   3. 히어로
   ========================================================= */
.hero {
  position: relative;
  background:
    repeating-conic-gradient(from -8deg at 78% -6%, rgba(255, 255, 255, .22) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 13deg),
    radial-gradient(120% 70% at 80% 0%, #FFE27A 0%, rgba(255, 226, 122, 0) 60%),
    var(--yellow);
  padding-bottom: 54px;
  isolation: isolate;
  /* 가로로 삐져나온 장식(칩 줄·가격표)이 페이지 폭을 넓히지 않게 이 구역에서 자름 (세로는 아래 물결이 보이도록 그대로) */
  overflow-x: clip;
}

/* 차양 */
.awning {
  --aw: 26px;
  position: relative; z-index: 4;
  height: calc(var(--aw) + 2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%, rgba(160, 100, 0, .08)),
    repeating-linear-gradient(90deg, #FFB800 0 var(--aw), #FFFFFF var(--aw) calc(var(--aw) * 2));
  box-shadow: 0 1px 0 rgba(150, 90, 0, .25);
}
.awning__bar { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(#FFFDF4, #F3E6C2); box-shadow: 0 1px 0 rgba(120, 70, 0, .2); }
.awning::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--aw) / 2);
  background:
    radial-gradient(circle at calc(var(--aw) / 2) 0, #FFB800 0 calc(var(--aw) / 2 - .5px), rgba(255, 184, 0, 0) calc(var(--aw) / 2)) 0 0 / calc(var(--aw) * 2) calc(var(--aw) / 2) repeat-x,
    radial-gradient(circle at calc(var(--aw) * 1.5) 0, #FFFFFF 0 calc(var(--aw) / 2 - .5px), rgba(255, 255, 255, 0) calc(var(--aw) / 2)) 0 0 / calc(var(--aw) * 2) calc(var(--aw) / 2) repeat-x;
  filter: drop-shadow(0 5px 3px rgba(150, 90, 0, .22));
}

.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 24px; }
.hero__title .nowrap { display: inline-block; }
.hero__copy { display: grid; gap: 12px; align-content: start; }
.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
.neon {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-weight: 800; font-size: var(--fs-13);
  box-shadow: 0 2px 0 rgba(150, 90, 0, .18);
}
.neon[data-state="open"] { color: var(--green-ink); text-shadow: 0 0 10px rgba(20, 184, 90, .35); }
.neon[data-state="last"] { color: #8F4A00; }
.neon[data-state="closed"], .neon[data-state="holiday"], .neon[data-state="ordersclosed"] { color: var(--red-deep); }

.hero__title {
  font-family: var(--f-head); font-weight: 900;
  font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.035em;
  color: var(--ink);
}
.hero__title-em {
  position: relative; display: inline-block; color: var(--red);
  padding: 0 .06em;
}
.hero__title-em::before {
  content: ""; position: absolute; z-index: -1;
  left: -.02em; right: -.06em; bottom: .04em; height: .36em;
  background: #FFFFFF; border-radius: .2em .5em .3em .6em;
  transform: rotate(-1.5deg) skewX(-8deg);
  transform-origin: 0 50%;
  opacity: .95;
  animation: swash .75s var(--ease-out) .85s both;
}
@keyframes swash {
  from { transform: rotate(-1.5deg) skewX(-8deg) scaleX(0); }
  to { transform: rotate(-1.5deg) skewX(-8deg) scaleX(1); }
}
.hero__lead { font-size: var(--fs-17); line-height: 1.55; color: var(--ink-2); max-width: 30em; font-weight: 400; }
.hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.fact {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .9); border-radius: var(--r-md);
  padding: 10px 12px; min-height: 66px;
  box-shadow: 0 3px 0 rgba(150, 90, 0, .16);
  position: relative;
}
.fact__text { display: grid; line-height: 1.3; min-width: 0; }
.fact b { font-size: var(--fs-15); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.fact small { font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.fact .i { width: 26px; height: 26px; color: var(--red); }
.fact--price { padding-left: 14px; }
.fact--price b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); color: var(--red-deep); }
.fact--price .seal--price { position: absolute; right: -8px; top: -14px; width: 48px; height: 48px; font-size: 12px; flex: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero__cta .btn { flex: 1 1 auto; }
.hero__cta .btn--red { flex-grow: 1.6; }
.hero__sub-links { display: none; align-items: center; gap: 8px; margin-top: -6px; font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
.hero__sub-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(31, 26, 21, .35); padding: 6px 0; }
.hero__sub-links a:hover { text-decoration-color: var(--red); color: var(--red-deep); }

/* 나무 상 */
.sang { position: relative; }
.sang__top {
  position: relative;
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 22% 6% at 72% 22%, rgba(198, 138, 75, .22), rgba(198, 138, 75, 0) 70%),
    radial-gradient(ellipse 30% 5% at 20% 78%, rgba(198, 138, 75, .18), rgba(198, 138, 75, 0) 70%),
    repeating-linear-gradient(176deg, rgba(198, 138, 75, 0) 0 13px, rgba(198, 138, 75, .13) 13px 14px, rgba(198, 138, 75, 0) 14px 29px, rgba(198, 138, 75, .09) 29px 31px),
    linear-gradient(165deg, #FBE6C0, var(--wood-2) 70%, #E8BE85);
  box-shadow:
    inset 0 0 0 5px #F1CF9A,
    inset 0 0 0 6.5px rgba(160, 95, 30, .28),
    inset 0 2px 0 7px rgba(255, 255, 255, .35),
    0 12px 0 -2px var(--wood-edge),
    0 14px 0 -2px #A96E36,
    0 34px 40px -14px rgba(120, 70, 0, .45);
}

.sang--hero .sang__top { aspect-ratio: 1.24 / 1; }
.hero__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 10px; }
.hero-plate {
  position: absolute; left: 5%; top: 7%; width: 64%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 62%, #F1ECE2 64%, #FFFFFF 68%, #FBF8F2 100%);
  box-shadow: var(--plate-shadow);
}
.hero-dish {
  position: absolute; inset: 6.5%; margin: 0;
  border-radius: 50%; overflow: hidden;
  opacity: 0; transform: rotate(-38deg) scale(.86);
  transition: opacity .7s ease, transform 1s var(--ease-out);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.hero-dish.is-active { opacity: 1; transform: none; }
.hero-dish.is-leaving { opacity: 0; transform: rotate(32deg) scale(.9); }
.hero-dish img { width: 100%; height: 100%; object-fit: cover; }
.hero-dish:not(.is-active):not(.is-leaving) { visibility: hidden; }

.dish-bowl {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 60%, #EEE8DC 63%, #FFFFFF 68%);
  box-shadow: 0 3px 3px rgba(96, 58, 10, .14), 0 10px 18px rgba(96, 58, 10, .22);
}
.dish-bowl::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; }
.dish-bowl--rice { width: 21%; aspect-ratio: 1; right: 16%; bottom: 5%; }
.dish-bowl--rice::before { background: radial-gradient(circle, #FFFFFF 0 1.3px, rgba(255,255,255,0) 1.8px) 0 0 / 7px 7px, radial-gradient(circle at 40% 35%, #FFFFFF, #F1ECDF); box-shadow: inset 0 -3px 6px rgba(160, 140, 100, .25); }
.dish-bowl--banchan { width: 16.5%; aspect-ratio: 1; }
.b-green { right: 6%; top: 30%; }
.b-green::before { background: repeating-linear-gradient(35deg, #3E7F23 0 3px, #6DAA3A 3px 5px, #2F6A1A 5px 7px); }
.b-red { right: 5%; top: 55%; width: 15%; }
.b-red::before { background: radial-gradient(circle at 35% 35%, #F27A4E, #D43A1D 70%); box-shadow: inset 4px 3px 0 rgba(255, 245, 220, .55); }
.b-yellow { left: 47%; bottom: .5%; width: 14%; }
.b-yellow::before { background: repeating-linear-gradient(90deg, #FFD54F 0 6px, #F7B928 6px 8px); }
.sujeo { position: absolute; width: 7%; right: 35%; bottom: 6%; height: auto; transform: rotate(8deg); filter: drop-shadow(0 4px 4px rgba(96,58,10,.25)); display: none; }

.steam { position: absolute; left: 50%; top: 18%; width: 46%; height: 52%; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.steam span {
  position: absolute; bottom: 0; width: 22%; height: 80%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 65%);
  filter: blur(7px); border-radius: 50%;
  opacity: 0; animation: steam 4.2s ease-in-out infinite;
}
.steam span:nth-child(1) { left: 12%; animation-delay: 0s; }
.steam span:nth-child(2) { left: 40%; animation-delay: 1.4s; height: 95%; }
.steam span:nth-child(3) { left: 66%; animation-delay: 2.7s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(20%) scaleX(.8); }
  25% { opacity: .9; }
  60% { opacity: .55; transform: translateY(-30%) scaleX(1.3) translateX(8%); }
  100% { opacity: 0; transform: translateY(-75%) scaleX(1.6) translateX(-6%); }
}

.hero-tag {
  position: absolute; right: -6px; top: -18px; z-index: 5;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px;
  max-width: 58%;
  padding: 10px 14px 10px 12px;
  background: var(--paper); border-radius: var(--r-sm);
  box-shadow: 0 4px 0 rgba(31, 26, 21, .9), 0 14px 26px rgba(96, 58, 10, .2);
  border: 2px solid var(--ink);
  transform: rotate(4deg); transform-origin: 80% 0;
}
.hero-tag__hole { position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.hero-tag .seal--tag { padding: 6px 8px 5px; font-size: var(--fs-13); }
.hero-tag strong { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-17); letter-spacing: -0.03em; line-height: 1.2; white-space: nowrap; }
.hero-tag__price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; }
.hero-tag__price b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); letter-spacing: -0.03em; color: var(--red); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-tag__price small { font-size: var(--fs-13); font-weight: 800; color: var(--ink-3); }
.hero-tag.is-swapping { animation: tag-swing .7s var(--ease-spring); }
@keyframes tag-swing { 0% { transform: rotate(-8deg) scale(.94); } 55% { transform: rotate(7deg); } 100% { transform: rotate(4deg); } }

.hero-sticker {
  position: absolute; left: -8px; bottom: -18px; z-index: 6;
  width: 106px; height: 106px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1px;
  background: var(--red); color: #fff;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 5px rgba(255, 255, 255, .9), 0 8px 18px rgba(168, 24, 15, .3);
  transform: rotate(-10deg);
}
.hero-sticker b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); line-height: 1; letter-spacing: -0.02em; }
.hero-sticker span { font-size: var(--fs-12); font-weight: 800; line-height: 1.18; letter-spacing: -0.03em; }
.hero-sticker small { font-size: var(--fs-12); font-weight: 600; line-height: 1; margin-top: 2px; letter-spacing: -0.02em; }

/* 자동 넘김 멈춤 — 상 위 왼쪽 위 동그란 버튼 */
.hero-pause {
  position: absolute; left: 10px; top: 10px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink);
  transition: transform .12s var(--ease-out), box-shadow .12s;
}
.hero-pause:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ink); }
.hero-pause .i { width: 18px; height: 18px; }
.hero-pause .i--play, .hero-pause[aria-pressed="true"] .i--pause { display: none; }
.hero-pause[aria-pressed="true"] .i--play { display: block; }
.hero-pause[aria-pressed="true"] { background: var(--yellow); }
.no-js .hero-pause { display: none; }

/* 대표 요리 칩: 한 줄. 넘치면 옆으로 밀어 보는 줄 (페이지 가로 스크롤 없음) */
.hero__chips {
  position: relative; display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
}
.hero__chips::-webkit-scrollbar { display: none; }
/* 넘칠 때만 가장자리를 흐리게. 맨 앞/맨 끝까지 밀었으면 그쪽은 흐리지 않음 (끝 칩·포커스 테두리가 흐림에 가리지 않게) */
.hero__chips { --fl: 12px; --fr: 36px; }
.hero__chips.at-start { --fl: 0px; }
.hero__chips.at-end { --fr: 0px; }
.hero__chips.is-overflow { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.hchip {
  flex: none; scroll-snap-align: start;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-weight: 800; font-size: var(--fs-15); letter-spacing: -0.02em;
  box-shadow: 0 3px 0 rgba(150, 90, 0, .28);
  transition: transform .15s var(--ease-out), background-color .2s, color .2s;
}
.hchip:hover { background: #fff; transform: translateY(-1px); }
.hchip.is-active { background: var(--ink); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.no-js .hero__chips { display: none; }

/* 히어로 아래 물결 */
.hero__scallop {
  position: absolute; left: 0; right: 0; bottom: -15px; height: 16px; z-index: 3;
  background: radial-gradient(circle at 18px 0, var(--yellow) 0 15.5px, rgba(255,199,44,0) 16px) 0 0 / 36px 16px repeat-x;
}

/* =========================================================
   4. 신뢰 스트립
   ========================================================= */
.trust { background: var(--cream); padding: 46px 0 38px; border-bottom: 1px dashed var(--line-2); }
.trust__inner { display: grid; gap: 18px; }
.trust__main { display: flex; align-items: center; gap: 16px; }
.trust__headline { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.03em; }
.trust__headline b { display: inline-block; color: var(--red); font-variant-numeric: tabular-nums; }
/* 사실 문장 속 숫자(리뷰 6건, 6/6)는 0·1·2…로 바꾸지 않고, 보일 때 한 번 '톡' 튀어나오기만 함 */
[data-pop].is-pop { animation: num-pop .75s var(--ease-spring) both; }
@keyframes num-pop { 0% { transform: none; } 38% { transform: scale(1.4) rotate(-6deg); } 100% { transform: none; } }
.hl { background: linear-gradient(transparent 58%, var(--yellow-2) 58%, var(--yellow-2) 92%, transparent 92%); padding: 0 2px; }
.trust__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  position: relative; overflow: hidden;
  display: grid; gap: 4px; align-content: start;
  padding: 16px 16px 15px; border-radius: var(--r-md); background: var(--paper);
  box-shadow: var(--shadow-1);
}
.stat__num { display: flex; align-items: baseline; gap: 1px; line-height: 1; padding-top: 4px; }
.stat__num b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-36); color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.stat__num small { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-20); color: var(--ink-3); }
.stat__label { font-size: var(--fs-15); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.35;  text-wrap: balance; }
.stat--green .stat__num b { color: var(--green-ink); }
.trust__src { font-size: var(--fs-15); color: var(--ink-3); font-weight: 600; }

/* =========================================================
   5. 왜 수라상
   ========================================================= */
.why { background: var(--cream); }
/* 사장님 소개글: 카드 없이 큰 따옴표로 여는 인용 */
.owner-quote { position: relative; margin: 6px 0 0; padding: 22px 0 0 2px; }
.owner-quote::before {
  content: "“"; position: absolute; left: -4px; top: -18px;
  font-family: var(--f-head); font-weight: 900; font-size: 72px; line-height: 1; color: var(--red);
}
.owner-quote p { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-20); line-height: 1.55; color: var(--ink); letter-spacing: -0.03em; }
.owner-quote figcaption { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-3); }
.owner-quote figcaption .seal--xs { width: 24px; height: 24px; font-size: 13px; }




.seat { width: var(--s, 22px); height: var(--s, 22px); border-radius: calc(var(--s, 22px) * .3); background: var(--paper); box-shadow: 0 2px 0 var(--wood-edge); display: inline-block; }
.seat--one { background: var(--red); box-shadow: 0 2px 0 var(--red-deep); }

/* =========================================================
   6. 시그니처
   ========================================================= */
.signature { background: var(--paper); }
.sig { display: grid; gap: 30px; align-items: center; }
.sig + .sig { margin-top: 64px; }
.sig__visual { position: relative; }
.sang--sig .sang__top { aspect-ratio: 1.15 / 1; display: grid; place-items: center; }
.plate { position: relative; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 62%, #F1ECE2 64%, #FFFFFF 68%, #FBF8F2 100%); box-shadow: var(--plate-shadow); }
.plate img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; background: var(--photo-ph); }
.plate--xl { width: 76%; aspect-ratio: 1; padding: 5.5%; }
.plate--xl.plate--wide { width: 88%; aspect-ratio: 1.38; padding: 4.5%; border-radius: 50%; }
.plate--wide img { border-radius: 50%; transform: none; }
.plate .steam { top: -4%; height: 70%; }
.seal--sticker-a { right: 3%; top: 4%; }
.seal--sticker-b { left: 3%; top: 2%; transform: rotate(-10deg); }
.sig__body { display: grid; gap: 14px; align-content: start; }
.sig__badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sig__name { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-display); letter-spacing: -0.04em; line-height: 1.08; }
.sig__quote { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-20); color: var(--red-deep); line-height: 1.5; letter-spacing: -0.02em; }
.sig__text { color: var(--ink-2); font-size: var(--fs-17); max-width: 34em; }
.sig__price { display: flex; align-items: baseline; gap: 10px; }
.sig__price b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-30); letter-spacing: -0.03em; }
.sig__price span { font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; }
.sig__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sig__cta .btn { flex: 1 1 auto; }

/* 가격 리본 */
.ribbon {
  position: relative; z-index: 2; overflow: hidden; overflow: clip;
  padding: 20px 0 22px; margin-block: -6px;
  background: linear-gradient(var(--paper) 50%, var(--yellow-pale) 50%);
}
.ribbon__band { margin-inline: -24px; background: var(--red); transform: rotate(-1.6deg); box-shadow: 0 5px 0 var(--red-deep), 0 14px 24px rgba(168, 24, 15, .18); }
/* 가격 띠는 움직이지 않음 (첫 화면 티커 하나만 흐름) */
.ribbon__row { display: flex; width: max-content; }
.ribbon__row span { position: relative; padding: 13px 22px; color: #fff; font-weight: 800; font-size: var(--fs-17); letter-spacing: -0.02em; white-space: nowrap; }
.ribbon__row span::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--yellow); border-radius: 2px; transform: rotate(45deg); }

/* =========================================================
   7. 전체 메뉴
   ========================================================= */
.menu { background: linear-gradient(180deg, var(--yellow-pale), #FFFBEA 60%, var(--yellow-pale)); padding-bottom: 20px; }
/* 붙어 다니는 탭이 마지막 카드를 덮지 않도록 여유 공간 */
.menu > .container::after { content: ""; display: block; height: 64px; }
.menuboard-btn {
  display: grid; gap: 10px;
  padding: 10px; border-radius: var(--r-md);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s var(--ease-out), box-shadow .15s;
  max-width: 560px;
}
.menuboard-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.menuboard-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.menuboard-btn__img { position: relative; display: block; width: 100%; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 7; background: linear-gradient(135deg, #EFE3CC, #E2D2B2); }
.menuboard-btn__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.menuboard-btn__pen { position: absolute; right: 8px; bottom: 8px; padding: 2px 10px 0; border-radius: 4px; background: var(--yellow); color: var(--ink); font-family: var(--f-pen); font-size: 21px; line-height: 1.2; transform: rotate(-3deg); box-shadow: 0 3px 8px rgba(96, 58, 10, .25); }
.menuboard-btn__text { display: grid; gap: 2px; font-weight: 800; font-size: var(--fs-17); grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 0 6px 4px; }
.menuboard-btn__text .i { color: var(--red); }
.menuboard-btn__text small { grid-column: 1 / -1; font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; }

/* 탭: 화면 폭 전체 띠가 헤더 바로 아래에 붙어 다님 (띠 배경이 아래 카드를 가려 틈이 비치지 않게).
   컨테이너보다 넓은 화면(1440 등)에서도 띠가 화면 양 끝까지 닿도록 (50% − 화면 폭의 절반)만큼 밖으로 늘리고 같은 만큼 안쪽 여백을 줌 (탭 자리는 그대로).
   화면 폭은 100vw 대신 섹션 폭(100cqw): 윈도처럼 스크롤바가 자리를 차지하는 화면에서 100vw 는 스크롤바만큼 넘쳐서 */
.menu, .reviews { container-type: inline-size; }
.tabs-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  margin: 0 calc(var(--gutter) * -1) 20px; padding: 6px var(--gutter);
  margin-inline: calc(50% - 50cqw); padding-inline: calc(50cqw - 50%);
  transition: background-color .2s, box-shadow .2s;
}
.tabs-bar.is-stuck {
  background: rgba(255, 248, 221, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 rgba(227, 208, 156, .8), 0 8px 18px rgba(130, 85, 0, .08);
}
.tabs {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 5px; border-radius: var(--r-md); background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-2), 0 6px 18px rgba(130, 85, 0, .14);
}
.tab-long { display: none; }
.tabs [role="tab"] {
  position: relative; z-index: 1;
  min-height: 52px; padding: 6px 4px; border-radius: var(--r-sm);
  font-size: var(--fs-15); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink-3);
  display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center;
  transition: color .25s;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs__count { display: none; font-size: var(--fs-13); min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--yellow-pale); align-items: center; justify-content: center; color: var(--ink-2); }
.tabs [aria-selected="true"] .tabs__count { background: var(--paper); }
.tabs__ink {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0;
  border-radius: var(--r-sm); background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-deep);
  transition: transform .45s var(--ease-spring), width .45s var(--ease-spring);
}
.no-js .tabs__ink { display: none; }
.tabpanel + .tabpanel { margin-top: 40px; }
/* 키보드로 담기 버튼에 갈 때 붙어 다니는 헤더·탭 띠에 가리지 않게 */
.menu .tabpanel :is(a, button) { scroll-margin-top: calc(var(--header-h) + 84px); }
.js .tabpanel + .tabpanel { margin-top: 0; }
.panel-title { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-24); margin-bottom: 16px; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.panel-title small { font-family: var(--f-body); font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; }
.js .panel-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabpanel.is-entering .menu-grid > *, .tabpanel.is-entering .price-list > * { animation: card-in .5s var(--ease-out) both; }
.tabpanel.is-entering .menu-grid > *:nth-child(2), .tabpanel.is-entering .price-list > *:nth-child(2) { animation-delay: .04s; }
.tabpanel.is-entering .menu-grid > *:nth-child(3), .tabpanel.is-entering .price-list > *:nth-child(3) { animation-delay: .08s; }
.tabpanel.is-entering .menu-grid > *:nth-child(4), .tabpanel.is-entering .price-list > *:nth-child(4) { animation-delay: .12s; }
.tabpanel.is-entering .menu-grid > *:nth-child(5), .tabpanel.is-entering .price-list > *:nth-child(5) { animation-delay: .16s; }
.tabpanel.is-entering .menu-grid > *:nth-child(n+6), .tabpanel.is-entering .price-list > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes card-in { from { transform: translateY(14px); } to { transform: none; } }

/* 메뉴 카드 */
.menu-grid { display: grid; gap: 14px; }
.dish {
  position: relative; display: grid; grid-template-columns: 136px 1fr; gap: 0;
  background: var(--paper); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.dish__plate {
  position: relative; display: grid; place-items: center; padding: 10px;
  background:
    repeating-linear-gradient(176deg, rgba(198, 138, 75, 0) 0 11px, rgba(198, 138, 75, .14) 11px 12px, rgba(198, 138, 75, 0) 12px 23px),
    linear-gradient(165deg, #FBE6C0, var(--wood-2));
}
/* 접시(원) 안에 음식이 꽉 차도록: 테두리는 감싸는 원에, 사진은 안에서 확대 */
.dish__photo {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 5px solid #fff; box-shadow: var(--plate-shadow); background: var(--photo-ph);
  transition: transform .6s var(--ease-out);
}
.dish__photo img { width: 100%; height: 100%; object-fit: cover; }
.dish:hover .dish__photo { transform: rotate(-10deg) scale(1.04); }
/* 사진 없는 메뉴: 차림표처럼 이름을 크게 쓴 글자 카드 */
.dish__plate--type {
  container-type: inline-size;
  align-content: center; justify-items: center; gap: 6px; text-align: center;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .5) 0 10px, rgba(255, 255, 255, 0) 10px 20px),
    var(--yellow-pale);
  box-shadow: inset 0 0 0 1px rgba(227, 208, 156, .6);
}
/* 이름은 히어로 가격표와 같은 '흰 꼬리표' 모양 + 모서리에 수라 낙관. 넓은 화면에선 접시 칸 폭에 맞춰 글자가 커지고 가격 줄이 붙음 */
.dish__type {
  position: relative;
  display: grid; justify-items: center; padding: 8px 12px 9px; border-radius: var(--r-sm);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-2deg);
  font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); line-height: 1.1; letter-spacing: -0.04em; color: var(--ink);
}
.dish__type small { font-size: var(--fs-13); font-weight: 800; letter-spacing: -0.02em; color: var(--ink-3); margin-bottom: 2px; }
.dish__type-name { font-weight: 900; }
.dish__type-price { display: none; }
.dish__pen { font-family: var(--f-pen); font-size: 19px; line-height: 1.05; color: #2B55C8; transform: rotate(-3deg); max-width: 11em; }
.dish__han {
  position: absolute; right: -11px; top: -12px; z-index: 1;
  font-family: var(--f-head); font-weight: 900; font-size: 13px; color: #fff;
  background: var(--red); border-radius: 5px; padding: 4px 4px 3px; line-height: 1; letter-spacing: -0.04em;
  transform: rotate(-6deg); box-shadow: inset 0 0 0 1.5px var(--red), inset 0 0 0 2.5px rgba(255,255,255,.85);
}
.dish__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px 16px; min-width: 0; }
.dish__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dish__name { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-20); letter-spacing: -0.03em; line-height: 1.25; }
.dish__desc { font-size: var(--fs-15); color: var(--ink-2); line-height: 1.5; }
.dish__who { display: inline-block; font-size: var(--fs-13); font-weight: 600; color: var(--ink-3); }
.dish__foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
/* 가격은 한 가지 글꼴 규칙: Hahmlet 900 + 자릿수 맞춤, '원'만 본문 글꼴 */
.price, .price-row__price, .preset__price { font-family: var(--f-head); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.price { font-size: var(--fs-24); white-space: nowrap; }
.price small { font-family: var(--f-body); font-size: var(--fs-13); font-weight: 600; margin-left: 1px; }
.dish--star { box-shadow: 0 0 0 2.5px var(--yellow), var(--shadow-1); }
.handnote { font-family: var(--f-pen); font-size: 22px; line-height: 1.1; color: #2B55C8; transform: rotate(-2deg); transform-origin: left; }

.add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  border-radius: var(--r-sm); background: var(--yellow); color: var(--ink);
  font-weight: 800; font-size: var(--fs-15);
  box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink);
  transition: transform .15s var(--ease-out), box-shadow .15s, background-color .2s;
}
.add-btn .i { width: 18px; height: 18px; }
.add-btn:hover { background: var(--yellow-2); }
.add-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 var(--ink); }
.add-btn.is-added { background: var(--green-ink); color: #fff; box-shadow: inset 0 0 0 2px var(--green-ink), 0 3px 0 #064F26; }
.add-btn--icon { padding: 0; width: 44px; }

/* 요리 사진: 접시 원 안이 음식으로 차도록 사진별 확대·위치 + 밝고 따뜻하게 (어둡게 하지 않음) */
img[data-food] { object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); filter: saturate(1.08) brightness(1.04); background: var(--photo-ph); }
[data-food="jeyuk"] { --zoom: 1.42; }
[data-food="ojingeo"] { --zoom: 1.85; --pos: 50% 52%; filter: saturate(1.1) brightness(1.1); }
[data-food="doenjang"] { --zoom: 1.38; --pos: 51% 51%; }
[data-food="aehobak"] { --zoom: 1.18; --pos: 50% 48%; }
[data-food="dakbokkeum"] { --zoom: 1.1; }
[data-food="bossam"] { --zoom: 1.04; }
/* 시그니처 큰 접시는 테두리 안에 사진이 그대로 들어감 (확대 없음) */
.plate img[data-food] { transform: none; }
.btn.is-added { --btn-bg: var(--green-ink); --btn-fg: #fff; --btn-edge: #064F26; }

/* CSS 음식 일러스트 (사진 없는 메뉴) */
.food-art {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 60%, #EEE8DC 63%, #FFFFFF 68%, #FAF6EE 100%);
  box-shadow: var(--plate-shadow);
}
.food-art::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; }
.food-art--kimchi::before {
  background:
    linear-gradient(#FFF8EC, #FFF8EC) 28% 30% / 17% 17% no-repeat,
    linear-gradient(#FFF8EC, #FFF8EC) 66% 56% / 16% 16% no-repeat,
    linear-gradient(#FFF8EC, #FFF8EC) 40% 72% / 15% 15% no-repeat,
    radial-gradient(ellipse 12% 6% at 68% 28%, #4E9A35 0 90%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 18% 10% at 22% 62%, #F4D9A2 0 90%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 10% 14% at 52% 44%, #B9472F 0 90%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at 40% 35%, #EF6E43, #C9361A 75%);
  box-shadow: inset 0 0 0 3px rgba(150, 40, 10, .25);
}
.food-art--dongtae::before {
  background:
    radial-gradient(ellipse 16% 11% at 34% 36%, #FFFDF5 0 88%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 15% 10% at 64% 60%, #FFFDF5 0 88%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 12% 8% at 38% 70%, #FFFDF5 0 88%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 10% 5% at 66% 30%, #4E9A35 0 90%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 8% 4% at 22% 54%, #4E9A35 0 90%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at 45% 40%, #F48A4E, #D9461F 78%);
  box-shadow: inset 0 0 0 3px rgba(150, 40, 10, .22);
}
.food-art--dubu::before {
  inset: 13%;
  background:
    repeating-linear-gradient(90deg, #FFFDF6 0 15%, #EFE5CF 15% 17%) 0 0 / 52% 100% no-repeat,
    radial-gradient(circle at 74% 30%, #3E8E2E 0 6%, rgba(0,0,0,0) 7%),
    radial-gradient(circle at 70% 68%, #F4C46B 0 5%, rgba(0,0,0,0) 6%),
    linear-gradient(90deg, rgba(0,0,0,0) 52%, #CF3E22 52%);
}
.food-art--eomuk::before {
  background:
    radial-gradient(ellipse 22% 10% at 36% 34%, #E7A85A 0 85%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 20% 9% at 62% 58%, #E2A050 0 85%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 16% 9% at 34% 68%, #EDB76A 0 85%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 9% 4% at 66% 30%, #4E9A35 0 90%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at 45% 40%, #FBE2AA, #F1C27A 80%);
}
.food-art--ramyeon::before {
  background:
    radial-gradient(circle at 60% 40%, #FFB61E 0 9%, #FFF8E8 10% 18%, rgba(0,0,0,0) 19%),
    repeating-radial-gradient(circle at 35% 65%, #F7D68A 0 2.5px, #F0A146 2.5px 5px),
    #EF8A35;
}
.food-art--suyuk::before {
  inset: 18% 12%;
  border-radius: 40%;
  background: repeating-linear-gradient(105deg, #F3D8C8 0 7%, #C98A6C 7% 9%, #E8B79E 9% 15%, #B77558 15% 16.5%);
}
.food-art--egg::before {
  inset: 14%;
  background: radial-gradient(circle at 54% 46%, #FFB21E 0 22%, #FFC94A 24%, #FFFFFF 27% 100%);
  border-radius: 46% 54% 50% 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.food-art--sari::before { background: repeating-radial-gradient(circle at 48% 52%, #F6DC9A 0 2px, #E5B862 2px 4px); }
.food-art--rice::before {
  background: radial-gradient(circle, #FFFFFF 0 1.2px, rgba(255,255,255,0) 1.7px) 0 0 / 6px 6px, radial-gradient(circle at 40% 35%, #FFFFFF, #EFE8D8);
  box-shadow: inset 0 -3px 6px rgba(160, 140, 100, .25);
}
.food-art--mini { width: 44px; flex: none; }

/* 병 */
.bottle { position: relative; display: block; width: 18px; height: 46px; flex: none; margin: 0 13px; }
.bottle::before { content: ""; position: absolute; left: 50%; top: 0; width: 38%; height: 32%; transform: translateX(-50%); background: var(--b, #3BAA5C); border-radius: 3px 3px 0 0; }
.bottle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74%; border-radius: 7px 7px 4px 4px; background: linear-gradient(90deg, rgba(255,255,255,.35) 0 18%, rgba(255,255,255,0) 30%), linear-gradient(transparent 32%, var(--label, #fff) 32% 64%, transparent 64%), var(--b, #3BAA5C); box-shadow: 0 3px 5px rgba(0,0,0,.12); }
.bottle--soju { --b: #2FA556; --label: #E9F7EC; }
.bottle--beer { --b: #A3561B; --label: #FFD545; }
.bottle--cheongha { --b: #8EC3E6; --label: #FFFFFF; }
.bottle--kafri { --b: #9CCB6A; --label: #FFF4C2; }
.bottle--makgeolli { --b: #F1ECDD; --label: #3E9B4F; }
.bottle--bokbunja { --b: #8E1D3A; --label: #F6D7A8; }
.bottle--soda { --b: #E3262F; --label: #FFFFFF; width: 22px; height: 38px; }
.bottle--soda::before { display: none; }
.bottle--soda::after { height: 100%; border-radius: 5px; }

/* 가격 리스트 (추가 / 주류): 줄은 칸 폭 안에서 줄어들고, 칸 수는 들어갈 자리가 있을 때만 늘림 (760px↑ 두 칸, 주류 1040px↑ 세 칸) */
.price-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.price-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px 10px 10px 14px; border-radius: var(--r-md); background: var(--paper);
  box-shadow: var(--shadow-1);
  min-height: 66px;
}
.price-row .food-art--mini { margin-right: 4px; }
.price-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-head); font-weight: 800; font-size: var(--fs-20); letter-spacing: -0.03em; line-height: 1.3; white-space: nowrap; }
.price-row__name small { font-family: var(--f-body); font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; letter-spacing: -0.01em; }
.price-row__dots { flex: 1; min-width: 8px; height: 2px; background: radial-gradient(circle, var(--line-2) 1.2px, rgba(0,0,0,0) 1.5px) 0 50% / 8px 2px repeat-x; }
.price-row__price { flex: none; font-size: var(--fs-20); white-space: nowrap; }
.panel-note { margin-top: 16px; font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); padding-left: 14px; border-left: 3px solid var(--yellow); }

/* 라이트박스 */
.lightbox {
  width: min(1100px, calc(100vw - 20px)); max-width: none; max-height: calc(100dvh - 20px);
  padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(80, 50, 0, .35);
}
.lightbox[open] { display: flex; flex-direction: column; animation: lb-in .35s var(--ease-out); }
.lightbox::backdrop { background: rgba(255, 214, 80, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes lb-in { from { transform: translateY(18px) scale(.97); } to { transform: none; } }
.lightbox__bar { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); background: var(--yellow-pale); }
.lightbox__bar p { margin-right: auto; font-size: var(--fs-15); }
.lightbox__bar p b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); }
.lightbox__bar p span { font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.lightbox__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; border-radius: var(--r-sm); background: var(--paper); font-weight: 800; font-size: var(--fs-15); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.lightbox__btn[aria-pressed="true"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.lightbox__zoom { min-width: 84px; white-space: nowrap; } /* '전체 보기'가 두 줄로 쪼개지지 않게 */
.lightbox__close { padding: 0; background: var(--ink); color: #fff; box-shadow: none; }
/* 가운데 맞춤은 align-content 대신 사진의 auto 여백으로: 남는 공간이 있을 땐 가운데, 사진이 더 크면 여백이 0이 되어
   스크롤 맨 위 = 사진 맨 위 (차림표 제목·식사류 머리글이 스크롤로 닿지 않는 곳에 숨지 않게) */
.lightbox__body { overflow: auto; background: #F7F1E3; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; display: grid; grid-template-rows: minmax(0, 1fr); }
.lightbox__body img { width: 100%; margin-block: auto; cursor: zoom-in; }
/* 확대 전: 차림표 한 장이 창 안에 통째로 (가로 화면·낮은 노트북 창에서도 세로 스크롤 없이) */
.lightbox__body:not(.is-zoomed) img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.lightbox__body.is-zoomed { grid-template-rows: auto; }
.lightbox__body.is-zoomed img { width: 220%; max-width: none; cursor: zoom-out; }
.lightbox__hint { padding: 10px 18px 12px; font-family: var(--f-pen); font-size: 21px; color: #2B55C8; background: var(--paper); line-height: 1.2; }

/* =========================================================
   8. 상차림 빌더
   ========================================================= */
/* overflow-x: clip — 좁은 휴대폰에서 금액 칸이 커져도 화면 옆으로 밀리지 않게 하는 안전망 (스크롤 컨테이너가 아니라 붙어 다니는 상은 그대로) */
.builder { background: var(--paper); position: relative; overflow-x: clip; }
.builder::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: linear-gradient(var(--yellow-pale), rgba(255, 246, 211, 0)); pointer-events: none; }
.builder .container { position: relative; }
.noscript-note { padding: 16px; border-radius: var(--r-sm); background: var(--yellow-pale); font-weight: 600; margin-bottom: 20px; }
/* minmax(0,1fr): 칸이 내용 폭만큼 커지지 않고 화면 폭 안에서 줄어들게 */
.builder__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.builder__work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.builder__stage {
  position: sticky; top: calc(var(--header-h) - 6px); z-index: 20;
  padding: 8px 0 10px;
  background: var(--paper);
}
/* 붙어 있는 상 아래로 지나가는 담기 목록이 금액 칸 바로 밑에서 칼로 자른 듯 끊기지 않게, 상 밖으로 16px 흐려지는 띠
   (absolute라 높이를 차지하지 않음) */
.builder__stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: linear-gradient(var(--paper), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.sang--builder .sang__top { height: 160px; border-radius: var(--r-lg); }
.builder-table__plates {
  --ps: 1;
  position: absolute; inset: 10px 10px 30px;
  display: flex; flex-wrap: wrap; align-content: center; align-items: flex-end; justify-content: center; gap: calc(6px * var(--ps)) calc(10px * var(--ps));
}
.bcl { position: relative; flex: none; display: grid; justify-items: center; gap: 3px; isolation: isolate; will-change: transform; }
.bplate {
  position: relative; flex: none; border-radius: 50%;
  width: calc(var(--sz) * var(--ps)); aspect-ratio: 1;
  background: radial-gradient(circle, #FFFFFF 60%, #EEE8DC 63%, #FFFFFF 68%, #FAF6EE 100%);
  box-shadow: var(--plate-shadow);
  padding: calc(var(--sz) * var(--ps) * 0.075);
}
.bplate.is-stack::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 60%, #EEE8DC 63%, #FFFFFF 68%, #FAF6EE 100%);
  box-shadow: var(--plate-shadow);
  transform: translate(calc(var(--sz) * var(--ps) * .12), calc(var(--sz) * var(--ps) * -.08));
}
.bplate img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; clip-path: circle(calc(50% / var(--zoom, 1))); }
.bplate .food-art { width: 100%; height: 100%; box-shadow: none; background: none; }
.bplate .food-art::before { inset: 4%; }
.bcl--share { --sz: 72px; }
.bcl--meal { --sz: 58px; }
.bcl--extra { --sz: 40px; }
.bcl--drink { --sz: 34px; }
.bplate--drink { width: auto; height: calc(50px * var(--ps)); aspect-ratio: auto; background: none; box-shadow: none; padding: 0; display: grid; align-items: end; }
.bplate--drink.is-stack::before { display: none; }
.bplate--drink .bottle { margin: 0; width: calc(18px * var(--ps)); height: calc(46px * var(--ps)); }
.bplate--drink .bottle--soda { height: calc(36px * var(--ps)); width: calc(22px * var(--ps)); }
.bcl--more { --sz: 44px; --mf: var(--fs-15); }
/* '+N' 묶음: 두 자리(+12)도 들어가게 글자 폭만큼 늘어나는 알약. 높이·글자는 그릇처럼 --ps를 따라 줄어듦 */
.bplate--more {
  display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; white-space: nowrap;
  width: auto; min-width: calc(var(--sz) * var(--ps)); height: calc(var(--sz) * var(--ps)); aspect-ratio: auto;
  padding: 0 calc(6px * max(var(--ps), .75)); border-radius: var(--r-pill);
  font-size: calc(var(--mf) * max(var(--ps), .75)); line-height: 1;
}
/* 수량 배지도 그릇 크기(--ps)를 따라 줄어듦 (상자는 70%, 글자는 80% 아래로는 안 줄임 → 휴대폰에서도 '×2'가 10px 이상). 자리는 이름표가 아니라 그릇(--pw) 오른쪽 위 모서리 기준이고,
   그릇에 걸치는 폭은 그릇 지름의 40%까지만 → 작은 공깃밥·소주병도 배지 밑에 묻히지 않음 (큰 접시에선 예전처럼 18px 걸침) */
.bcl { --pw: calc(var(--sz, 60px) * var(--ps)); }
.bcl--drink { --pw: calc(18px * var(--ps)); }
.bcl__q {
  --qs: clamp(.7, var(--ps), 1.15);
  --qh: 24px; --qf: var(--fs-13);
  position: absolute; top: calc(-6px * var(--ps)); z-index: 2;
  left: calc(50% + var(--pw) / 2 - min(var(--pw) * .4, var(--qh) * var(--qs) * .75));
  min-width: calc(var(--qh) * var(--qs)); height: calc(var(--qh) * var(--qs)); padding: 0 calc(6px * var(--qs)); border-radius: var(--r-pill);
  background: var(--red); color: #fff; font-size: calc(var(--qf) * max(var(--qs), .8)); font-weight: 800; line-height: calc(var(--qh) * var(--qs)); text-align: center; white-space: nowrap;
  box-shadow: 0 2px 4px rgba(168, 24, 15, .35), 0 0 0 calc(2px * var(--qs)) #fff;
}
.bcl__q.is-bump { animation: bump .4s var(--ease-spring); }
/* 이름표 글자도 그릇 크기(--ps)를 따라 줄어듦 (90% 아래로는 안 줄임 → 휴대폰 최소 10.8px).
   데스크톱 상에서 그릇이 커질 때(--ps 1.3~1.6)는 글자를 1.2배까지만 키움 (이름표가 그릇보다 튀지 않게) */
.bcl__label {
  --lf: var(--fs-12); --ls: clamp(.9, var(--ps), 1.2);
  max-width: calc(var(--sz, 60px) * var(--ps) + 34px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px calc(7px * max(var(--ls), .7)); border-radius: var(--r-pill); background: rgba(255, 255, 255, .9);
  font-size: calc(var(--lf) * var(--ls)); font-weight: 800; line-height: 1.45; color: var(--ink); letter-spacing: -0.03em;
}
.builder-table__empty {
  position: absolute; inset: 0 0 24px; display: grid; place-content: center; text-align: center; gap: 2px;
  font-size: var(--fs-15); font-weight: 600; color: #5A370F; padding: 0 24px;
}
.builder-table__empty span { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); color: #4A2C0A; }
.builder-table__seats { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 4px; }
.seat-sujeo { width: 26px; height: 20px; display: grid; place-items: center; }
.seat-sujeo svg { width: 26px; height: 20px; }
.seat-sujeo.is-new { animation: seat-in .45s var(--ease-spring); }
@keyframes seat-in { from { transform: translateY(10px) scale(.4); } to { transform: none; } }

.builder-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.builder-sum__cell {
  min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 44px; padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-deep);
}
.builder-sum__cell span { font-size: var(--fs-13); font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.builder-sum__cell strong { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.builder-sum__cell--per { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 3px 0 var(--line-2); }
.builder-sum__cell strong.is-bump { animation: bump .4s var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--red); } }

.builder__panel { display: grid; gap: 16px; }
.builder-block { padding: 16px; border-radius: var(--r-md); background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); }
.builder-block__label { font-weight: 800; font-size: var(--fs-15); margin-bottom: 10px; }
.builder-block__hint { font-size: var(--fs-15); color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.builder-block__hint .i { width: 16px; height: 16px; color: var(--red); }
.builder-block--people { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
.builder-block--people .builder-block__label { margin: 0; }
.builder-block--people .stepper { grid-row: span 2; }
.builder__presets { background: var(--yellow-pale); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preset {
  display: grid; gap: 2px; text-align: left; grid-template-rows: auto 1fr auto; align-content: stretch;
  min-height: 66px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-2), 0 3px 0 var(--line-2);
  transition: transform .15s var(--ease-out), box-shadow .15s, background-color .2s;
}
.preset b { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-17); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.preset b em { font-family: var(--f-body); font-style: normal; font-size: var(--fs-13); font-weight: 800; color: var(--red-deep); }
.preset small { font-size: var(--fs-15); color: var(--ink-2); font-weight: 600; line-height: 1.35; }
.preset__price { align-self: end; font-weight: 800; font-size: var(--fs-15); color: var(--ink); font-variant-numeric: tabular-nums; }
.preset:hover { background: #FFFDF2; }
.preset:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 0 0 var(--line-2); }
.preset[aria-pressed="true"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.preset[aria-pressed="true"] small { color: var(--ink-2); }

.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border-radius: var(--r-sm); padding: 3px; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.stepper__btn { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--yellow-pale); color: var(--ink); transition: background-color .2s, transform .12s, opacity .2s; }
.stepper__btn:hover { background: var(--yellow); }
.stepper__btn:active { transform: scale(.92); }
.stepper__btn[aria-disabled="true"] { opacity: .35; background: var(--yellow-pale); cursor: default; }
.stepper__btn .i { width: 18px; height: 18px; }
.stepper__value { min-width: 46px; text-align: center; font-weight: 800; font-size: var(--fs-17); font-variant-numeric: tabular-nums; }
.stepper--people .stepper__value { min-width: 56px; font-family: var(--f-head); font-size: var(--fs-20); }

.picker-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.picker-filter::-webkit-scrollbar { display: none; }
.picker-filter button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill);
  font-weight: 800; font-size: var(--fs-15); background: var(--paper); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.picker-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.pf-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: var(--fs-12); font-style: normal; font-weight: 800; line-height: 1; }
.picker { display: grid; gap: 6px; }
/* 담기 목록: 카드 대신 줄 (점선 구분), 담은 줄만 노란 표시 */
.picker { gap: 0; }
.pick-row {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: var(--r-sm);
  border-bottom: 1px dashed var(--line-2);
  transition: background-color .25s;
}
.pick-row:last-child { border-bottom: 0; }
.pick-row.has-qty { background: #FFF3C4; }
.pick-row__thumb { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.pick-row__thumb:has(img) { border: 3px solid #fff; box-shadow: 0 2px 6px rgba(96,58,10,.25); }
.pick-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick-row__thumb .food-art { width: 46px; }
.pick-row__thumb .bottle { margin: 0; }
.pick-row__name { display: grid; line-height: 1.3; min-width: 0; }
.pick-row__name b { font-weight: 800; font-size: var(--fs-15); letter-spacing: -0.02em; }
.pick-row__name small { font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; }
.pick-row .stepper { padding: 2px; gap: 2px; }
.pick-row .stepper__btn { width: 44px; height: 44px; }
.pick-row .stepper__value { min-width: 26px; font-size: var(--fs-15); }
.pick-row.has-qty .stepper__value { color: var(--red); }

.builder__checkout { display: grid; gap: 14px; }
.receipt {
  position: relative; padding: 20px 18px 18px; margin-bottom: 8px;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  filter: drop-shadow(0 2px 2px rgba(90, 55, 0, .10)) drop-shadow(0 8px 14px rgba(130, 85, 0, .12));
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  background:
    linear-gradient(135deg, var(--paper) 25%, rgba(255,255,255,0) 25%) 0 0 / 16px 16px repeat-x,
    linear-gradient(225deg, var(--paper) 25%, rgba(255,255,255,0) 25%) 0 0 / 16px 16px repeat-x;
}
.receipt__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 2px dashed var(--line-2); margin-bottom: 8px; }
.receipt__title span { font-family: var(--f-body); font-size: var(--fs-13); font-weight: 800; color: var(--red); }
.receipt__list { display: grid; gap: 2px; }
.receipt__list li { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: var(--fs-15); padding: 5px 0; }
.receipt__list li b { font-weight: 600; }
.receipt__list li span { font-weight: 800; font-variant-numeric: tabular-nums; }
.receipt__list li em { font-style: normal; color: var(--ink-3); font-weight: 600; margin-left: 6px; font-size: var(--fs-13); }
.receipt__empty { color: var(--ink-3); font-weight: 600; grid-template-columns: 1fr !important; }
.receipt__total { display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--line-2); }
.receipt__total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.receipt__total-row dt { font-weight: 800; font-size: var(--fs-15); }
.receipt__total-row dd { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.receipt__total-row--per dt { color: var(--ink-2); font-size: var(--fs-15); }
.receipt__total-row--per dd { font-size: var(--fs-20); color: var(--red-deep); }
.receipt__hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--fs-15); font-weight: 600; line-height: 1.45; background: #FFF0DA; color: #7A3E00; }
.receipt__hint[data-tone="ok"] { background: var(--green-soft); color: var(--green-ink); }
.receipt__hint:empty { display: none; }
.builder__actions { display: grid; gap: 10px; }
.builder__actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.builder__actions-row .btn { padding: 0 10px; font-size: var(--fs-15); }
.builder__fine { font-size: var(--fs-15); color: var(--ink-3); font-weight: 600; line-height: 1.5; }
.btn.is-undo { --btn-bg: var(--yellow); --btn-edge: var(--ink); box-shadow: 0 3px 0 var(--ink); }
/* 상차림 쪽 버튼에 키보드로 갈 때 위에 붙은 상(무대)에 가리지 않게 (휴대폰) */
@media (max-width: 959px) { .builder__panel :is(a, button) { scroll-margin-top: calc(var(--header-h) + 270px); } }

/* 날아가는 그릇 */
.fly-ghost { position: fixed; z-index: 120; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; pointer-events: none; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(96,58,10,.35); background: #fff; }
.fly-ghost img { width: 100%; height: 100%; object-fit: cover; }
.fly-ghost .food-art { width: 100%; box-shadow: none; }

/* =========================================================
   9. 오늘 뭐 먹지 (슬롯)
   ========================================================= */
.pick {
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
    var(--yellow-sun);
  position: relative;
  overflow-x: clip;
}
.pick::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16px;
  background: radial-gradient(circle at 18px 0, var(--paper) 0 15.5px, rgba(255,255,255,0) 16px) 0 0 / 36px 16px repeat-x;
}
.pick .sec-lead { color: var(--ink); }
.pick .eyebrow { color: var(--red-deep); }
.pick__grid { display: grid; gap: 22px; }
.pick .pick__head { margin-bottom: 0; }

.mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: var(--r-md); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 2px var(--ink); }
.mode button { min-height: 50px; border-radius: var(--r-sm); font-weight: 800; font-size: var(--fs-15); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .2s, color .2s; }
.mode button .i { width: 18px; height: 18px; }
.mode button[aria-checked="true"] { background: var(--ink); color: #fff; }
.mode button[aria-checked="true"][aria-disabled="true"] { opacity: 1; }

.pick-result {
  padding: 20px; border-radius: var(--r-md); background: var(--paper);
  box-shadow: 0 5px 0 var(--ink); border: 2px solid var(--ink);
  min-height: 150px;
}
.pick-result__label { font-size: var(--fs-13); font-weight: 800; color: var(--red); margin-bottom: 4px; }
.pick-result__name { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); letter-spacing: -0.03em; line-height: 1.25; }
.pick-result__why { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-15); }
.pick-result__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pick-result__cta .btn { padding: 0 16px; }
/* 휴대폰: 두 버튼이 제각각 폭으로 왼쪽에 쌓이지 않게. 나란히 들어가면 반반, 안 들어가면 둘 다 한 줄 전체 */
@media (max-width: 479px) {
  .pick-result__cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr)); }
}
.pick-result.is-revealed { animation: reveal-pop .55s var(--ease-spring); }
@keyframes reveal-pop { 0% { transform: scale(.94) rotate(-1deg); } 100% { transform: none; } }

.slot { position: relative; max-width: 460px; width: calc(100% - 16px); margin-inline: auto; }
/* 간판처럼: 흰 바탕 + 자주 창살 모서리 */
.slot__crown {
  position: relative; z-index: 2; margin: 0 auto -14px; width: 80%;
  background: var(--paper); border: 3px solid var(--plum); border-radius: 4px;
  text-align: center; padding: 10px 34px 22px;
  box-shadow: 0 5px 0 rgba(123, 45, 43, .35);
}
.slot__crown::before, .slot__crown::after {
  content: ""; position: absolute; top: -3px; width: 24px; height: 24px;
  background: linear-gradient(var(--plum), var(--plum)) 50% 0 / 3px 100% no-repeat, linear-gradient(var(--plum), var(--plum)) 0 50% / 100% 3px no-repeat, var(--paper);
  border: 3px solid var(--plum);
}
.slot__crown::before { left: -3px; }
.slot__crown::after { right: -3px; }
.slot__crown-text { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); letter-spacing: -0.02em; color: var(--ink); }
.slot__body {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #E8352C, var(--red) 40%, #C21F18);
  border: 3px solid var(--ink); border-radius: 28px;
  padding: 26px 22px 22px;
  box-shadow: 0 8px 0 var(--ink), 0 24px 40px rgba(140, 60, 0, .3);
}
.slot__bulbs {
  position: absolute; inset: 9px; border-radius: 22px; pointer-events: none;
  background:
    radial-gradient(circle, #FFF5B8 0 3.5px, rgba(255,245,184,0) 4.5px) 0 0 / 22px 22px repeat-x,
    radial-gradient(circle, #FFF5B8 0 3.5px, rgba(255,245,184,0) 4.5px) 0 100% / 22px 22px repeat-x;
}
.slot.is-spinning .slot__bulbs { animation: bulbs .35s steps(2) infinite; }
@keyframes bulbs { 50% { filter: hue-rotate(-40deg) brightness(1.4); opacity: .6; } }
.slot__window {
  /* 뽑기 칸 치수는 변수 하나씩으로 (화면 폭별 값은 아래 반응형 블록에서 변수만 바꿈) */
  --item-h: 128px;
  --reel-pad: 18px;    /* 왼쪽 여백 (오른쪽은 빨간 화살표 몫으로 6px 더) */
  --reel-gap: 14px;
  --reel-plate: 92px;  /* 접시 최대 지름 */
  --reel-fs: var(--fs-20); /* 이름 글자 최대 크기 */
  container-type: inline-size;
  position: relative; height: calc(var(--item-h) + 6px); overflow: hidden;
  background: #FFFDF6; border-radius: var(--r-md);
  border: 3px solid var(--ink);
  box-shadow: inset 0 10px 14px -8px rgba(0,0,0,.25), inset 0 -10px 14px -8px rgba(0,0,0,.25);
}
.slot__reel { will-change: transform; }
/* 이름 칸은 minmax(0, 1fr): 줄바꿈 못 하는 긴 이름이 칸을 밀어 창 테두리 밑으로 잘려 들어가지 않게 */
.reel-item { height: var(--item-h); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: var(--reel-gap); padding: 0 calc(var(--reel-pad) + 6px) 0 var(--reel-pad); }
.reel-item__plate { grid-row: span 2; width: var(--reel-plate); height: var(--reel-plate); border-radius: 50%; padding: 5px; background: #fff; box-shadow: var(--plate-shadow); display: grid; place-items: center; }
.reel-item__photo { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--photo-ph); }
.reel-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.reel-item__plate .food-art { width: 100%; box-shadow: none; }
.reel-item__name { min-width: 0; overflow-wrap: anywhere; font-family: var(--f-head); font-weight: 900; font-size: var(--reel-fs); letter-spacing: -0.03em; line-height: 1.2; align-self: end; }
/* 창 폭(cqi) 기준 맞춤: 접시는 창 폭의 30%까지만, 이름 글자는 가장 긴 덩어리('+ 돼지수육보쌈'·'묵은지닭볶음탕' ≈ 7em)가
   한 줄에 들어가는 크기까지만 → 320px 휴대폰부터 960px 두 칸 화면까지 이름이 여백·화살표를 넘지 않음 */
@supports (width: 1cqi) {
  .reel-item__plate { width: min(var(--reel-plate), 30cqi); height: min(var(--reel-plate), 30cqi); }
  .reel-item__name { font-size: clamp(14px, (100cqi - 2 * var(--reel-pad) - 6px - var(--reel-gap) - min(var(--reel-plate), 30cqi)) / 7.1, var(--reel-fs)); }
}
.reel-item__price { font-weight: 800; color: var(--red-deep); font-size: var(--fs-15); align-self: start; }
.slot.is-spinning .reel-item { filter: blur(.6px); }
.slot__glare { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.4)); pointer-events: none; }
.slot__pointer { position: absolute; top: 50%; width: 0; height: 0; border: 10px solid transparent; margin-top: -10px; }
.slot__pointer--l { left: -2px; border-left-color: var(--red); }
.slot__pointer--r { right: -2px; border-right-color: var(--red); }
.slot__lever {
  margin-top: 18px; width: 100%; min-height: 60px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r-md); background: var(--yellow); color: var(--ink);
  font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); letter-spacing: -0.02em;
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background-color .2s;
}
.slot__lever:hover { background: var(--yellow-2); }
.slot__lever:active, .slot__lever.is-pulled { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.slot__lever[aria-disabled="true"] { opacity: 1; cursor: progress; }
.slot__lever-knob { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF7A70, var(--red) 60%); border: 2.5px solid var(--ink); }
.slot__arm { position: absolute; right: -15px; top: 34%; width: 15px; height: 48px; border-radius: 0 10px 10px 0; background: var(--ink); cursor: pointer; }
.slot__arm i {
  position: absolute; left: 50%; bottom: 50%; width: 9px; height: 66px; margin-left: -4.5px;
  background: linear-gradient(90deg, #FFFFFF, #C9C2B4); border: 2px solid var(--ink); border-radius: 5px;
  transform-origin: 50% 100%;
}
.slot__arm i::before {
  content: ""; position: absolute; left: 50%; top: -22px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FF8A80, var(--red) 58%, var(--red-deep)); border: 2.5px solid var(--ink);
}
.slot.is-spinning .slot__arm i { animation: arm-pull .75s var(--ease-out); }
@keyframes arm-pull { 40% { transform: rotate(155deg); } 100% { transform: none; } }
.slot__base { height: 18px; width: 88%; margin: 0 auto; background: var(--ink); border-radius: 0 0 18px 18px; opacity: .9; }

/* =========================================================
   10. 리뷰
   ========================================================= */
.reviews { background: var(--paper); }
.reviews__grid { display: grid; gap: 28px; }
.kw { padding: 22px 18px; border-radius: var(--r-lg); background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); }
.kw__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); letter-spacing: -0.03em; margin-bottom: 14px; display: grid; }
.kw__title small { font-family: var(--f-body); font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; letter-spacing: 0; }

.carousel { min-width: 0; }
.carousel__track {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 6px var(--gutter) 18px; margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -3px; }
.review {
  flex: 0 0 84%; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 18px; border-radius: var(--r-lg); background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink);
  position: relative;
}
.review::before { content: "“"; position: absolute; right: 16px; top: -6px; font-family: var(--f-head); font-weight: 900; font-size: 84px; line-height: 1; color: var(--yellow); }
.review:nth-child(3n+2) { background: var(--yellow-pale); }
.review__menu { display: flex; gap: 6px; flex-wrap: wrap; position: relative; }
.review__text p { font-size: var(--fs-17); line-height: 1.7; color: var(--ink); }
.review__text mark { background: linear-gradient(transparent 60%, var(--yellow-2) 60%); font-weight: 800; }
.review__who { margin-top: auto; display: flex; justify-content: space-between; font-size: var(--fs-13); color: var(--ink-3); font-weight: 600; padding-top: 10px; border-top: 1.5px dashed var(--line-2); }
.review__who b { color: var(--ink); }
.carousel__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.round-btn { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); transition: transform .12s, background-color .2s; }
.round-btn:hover { background: var(--yellow); }
.round-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ink); }
.round-btn[aria-disabled="true"] { opacity: .35; }
/* 점 줄은 남는 폭만큼만: 좁으면 점 버튼이 조금씩 줄어듦 (최소 30px), 양옆 화살표(flex: none)는 늘 동그랗게 */
.carousel__dots { display: flex; gap: 0; min-width: 0; }
.carousel__dots button { flex: 0 1 auto; min-width: 30px; width: 34px; height: 44px; display: grid; place-items: center; border-radius: 10px; }
.carousel__dots button::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--line-2); transition: width .3s var(--ease-out), background-color .3s; }
.carousel__dots button[aria-current="true"]::before { width: 24px; background: var(--red); }
/* 리뷰 아래 줄: '다녀가셨나요?' 부탁 글과 '네이버 리뷰 전체 보기' 버튼을 한 띠로 묶음 (휴대폰: 글 아래 한 줄 전체 버튼, 넓은 화면: 글 왼쪽 · 버튼 오른쪽) */
.reviews__links {
  display: grid; gap: 14px; margin-top: 30px; padding: 18px;
  border-radius: var(--r-md); background: var(--yellow-pale); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.reviews__links .btn { width: 100%; }
.review-ask { order: -1; display: grid; gap: 2px; }
.review-ask:hover .review-ask__text { text-decoration: underline; text-underline-offset: 3px; }
.review-ask__pen { font-family: var(--f-pen); font-size: 28px; line-height: 1; color: var(--red); }
.review-ask__text { font-weight: 600; font-size: var(--fs-15); text-wrap: balance; }
.review-ask__text .i { display: inline-block; vertical-align: -2px; margin-left: 4px; }

/* =========================================================
   11·12. 편의 + 영업시간
   ========================================================= */
.info { background: var(--cream); }
.info__grid { display: grid; gap: 40px; }
.amen__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.amen-item {
  display: grid; gap: 1px; align-content: start; padding: 14px; border-radius: var(--r-md); background: var(--paper);
  box-shadow: var(--shadow-1);
}
.amen-item__ic { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--yellow); margin-bottom: 8px; }
.amen-item__ic .i { width: 22px; height: 22px; }
.amen-item b { font-size: var(--fs-15); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.amen-item small { font-size: var(--fs-15); color: var(--ink-2); font-weight: 600; line-height: 1.4; }
/* '안 되는 것'은 마지막 줄 전체를 쓰는 안내 줄로 (한 칸만 덩그러니 남지 않게) */
.amen-item--no { grid-column: 1 / -1; grid-template-columns: 40px 1fr; align-items: center; column-gap: 12px; background: #FFF4F2; box-shadow: inset 0 0 0 1.5px #FFD3CC; }
.amen-item--no .amen-item__ic { margin-bottom: 0; }
.amen-item__txt { display: grid; gap: 1px; }
.amen-item--no .amen-item__ic { background: var(--red-soft); color: var(--red); }
.amen-item:nth-child(5) .amen-item__ic { background: var(--green-soft); color: var(--green-ink); }

.storefront { position: relative; margin-top: 22px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); background: #EAD8B6; }
.storefront img { width: 100%; aspect-ratio: 1400 / 1231; object-fit: cover; }
.storefront__pin {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-pill); background: var(--paper);
  font-size: var(--fs-13); font-weight: 800; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 0 0 2px var(--ink);
}
.storefront__pin::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(215, 38, 30, .25); }
.storefront__pin--sign { left: 22%; top: 20%; }
.storefront__pin--awning { left: 30%; top: 34%; }
.storefront__pin--awning::before { background: var(--yellow-deep); }
.storefront__pin--neon { left: 66%; top: 55%; }
.storefront__pin--neon::before { background: var(--green); box-shadow: 0 0 0 3px rgba(20,184,90,.3), 0 0 10px var(--green); }
.storefront figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .94); font-weight: 800; font-size: var(--fs-15); }

.hours__card {
  position: relative; padding: 28px 22px 22px; border-radius: var(--r-sm);
  background: var(--paper);
  border: 3px solid var(--plum);
  box-shadow: var(--shadow-1);
}
/* 간판 창살 모서리 */
.hours__card::before, .hours__card::after {
  content: ""; position: absolute; width: 30px; height: 30px; top: -3px;
  background:
    linear-gradient(var(--plum), var(--plum)) 50% 0 / 3px 100% no-repeat,
    linear-gradient(var(--plum), var(--plum)) 0 50% / 100% 3px no-repeat,
    var(--paper);
  border: 3px solid var(--plum);
}
.hours__card::before { left: -3px; }
.hours__card::after { right: -3px; }
.hours__title { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); letter-spacing: -0.03em; margin: 0 0 16px; padding-top: 18px; }
.hours__title .i { color: var(--red); width: 24px; height: 24px; }
.hours__now { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-md); background: var(--yellow-pale); margin-bottom: 16px; text-align: left; }
.neon-sign { font-family: var(--f-head); font-weight: 900; font-size: clamp(25px, 7vw, 30px); letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.hours__now[data-state="open"] { background: var(--green-soft); }
.hours__now[data-state="open"] .neon-sign { color: var(--green-ink); text-shadow: 0 0 1px #fff, 0 0 14px rgba(20, 184, 90, .55); }
.hours__now[data-state="last"] { background: #FFF0DA; }
.hours__now[data-state="last"] .neon-sign { color: #A65400; text-shadow: 0 0 14px rgba(255, 138, 0, .4); }
.hours__now[data-state="closed"], .hours__now[data-state="holiday"], .hours__now[data-state="ordersclosed"] { background: var(--red-soft); }
.hours__now[data-state="closed"] .neon-sign, .hours__now[data-state="holiday"] .neon-sign, .hours__now[data-state="ordersclosed"] .neon-sign { color: var(--red-deep); text-shadow: 0 0 14px rgba(215, 38, 30, .3); }
.hours__now-sub { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
/* 하루 타임라인 */
.dayline { position: relative; padding-top: 34px; margin-top: 2px; }
.dayline__bar { position: relative; height: 12px; border-radius: var(--r-pill); background: rgba(31, 26, 21, .09); }
.dayline__seg { position: absolute; top: 0; bottom: 0; }
.dayline__seg--open { left: 11.538%; width: 73.077%; background: var(--green); border-radius: 99px 0 0 99px; }
.dayline__seg--warn { left: 84.615%; width: 3.846%; background: #FF9F1A; }
.dayline__seg--lo { left: 88.462%; width: 3.846%; background: #FFC98A; border-radius: 0 99px 99px 0; }
.dayline__now { position: absolute; top: 50%; left: var(--now, 50%); }
.dayline__now i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.dayline__now em { position: absolute; bottom: 14px; left: 0; transform: translateX(var(--lx, -50%)); padding: 3px 8px; border-radius: 8px; background: var(--ink); color: #fff; font-style: normal; font-size: var(--fs-13); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dayline__ticks { position: relative; height: 20px; margin-top: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); }
.dayline__tick { position: absolute; top: 0; white-space: nowrap; }
.dayline__tick--open { left: 11.538%; transform: translateX(-50%); }
.dayline__tick--end { right: 7.69%; }
.hours__now[data-state="holiday"] .dayline__seg { background: #EFD3CE; }
.hours__now[data-state="holiday"] .dayline { padding-top: 10px; }
.hours__table { width: 100%; font-size: var(--fs-17); }
.hours__table tr { border-bottom: 1px dashed var(--line-2); }
.hours__table th, .hours__table td { padding: 11px 10px; text-align: left; }
.hours__table th { font-family: var(--f-head); font-weight: 800; width: 64px; }
.hours__table td { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.hours__table tr.is-off td, .hours__table tr.is-off th { color: var(--red); }
.hours__table tr.is-today { border-bottom-color: transparent; }
.hours__table tr.is-today th, .hours__table tr.is-today td { background: var(--yellow); }
.hours__table tr.is-today th::after { content: "오늘"; margin-left: 6px; font-family: var(--f-body); font-size: var(--fs-12); font-weight: 800; background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 6px; vertical-align: 2px; }
/* 목요일(휴무)이 오늘이면 노랑 위 빨강 대신 연분홍 위 진한 빨강 (대비 확보) */
.hours__table tr.is-today.is-off th, .hours__table tr.is-today.is-off td { background: var(--red-soft); color: var(--red-deep); }
.hours__table tr.is-today th:first-child { border-radius: 10px 0 0 10px; }
.hours__table tr.is-today td:last-child { border-radius: 0 10px 10px 0; }
.hours__notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hours__notes li { padding: 8px 12px; border-radius: var(--r-sm); background: var(--cream); font-size: var(--fs-15); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line); }
.hours__notes b { font-weight: 800; margin-right: 4px; }
.hours__call { margin-top: 16px; }
.hours__tz { margin-top: 12px; font-size: var(--fs-15); color: var(--ink-3); font-weight: 600; }

/* =========================================================
   13. 오시는 길
   ========================================================= */
.visit { background: var(--paper); }
.visit__grid { display: grid; gap: 26px; }
.map-card { border-radius: var(--r-lg); overflow: hidden; background: #FFF7D6; box-shadow: inset 0 0 0 2px var(--line-2), var(--shadow-1); padding: 4px; }
.map { width: 100%; height: auto; border-radius: var(--r-md); }
/* 휴대폰은 세로 약도 (글자가 13px 이상으로 보이게), 큰 화면은 가로 약도 */
.map--d { display: none; }
.map--m .map__label { font-size: 18px; }
.map--m .map__label--inv { font-size: 17px; }
.map--m .map__label--hill { font-size: 16px; }
.map--m .map__small { font-size: 15px; }
.map--m .map__shopname { font-size: 26px; }
.map--m .map__line { font-size: 18px; }
.map-note { padding: 8px 12px 6px; font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
.map__label { font-family: var(--f-body); font-weight: 800; font-size: 22px; fill: var(--ink); letter-spacing: -0.02em; }
.map__label--inv { fill: #fff; font-size: 20px; }
.map__label--hill { fill: #9A6400; font-size: 21px; }
.map__small { font-family: var(--f-body); font-weight: 700; font-size: 17px; fill: var(--ink-2); letter-spacing: -0.02em; }
.map__small--b { font-weight: 800; fill: var(--ink); }
.map__line { font-family: var(--f-body); font-weight: 900; font-size: 21px; fill: #fff; }
.map__shopname { font-family: var(--f-head); font-weight: 900; font-size: 30px; fill: var(--ink); }
/* 길 표시는 약도가 처음 보일 때 몇 번만 움직이고 멈춤 (계속 돌면 휴대폰 배터리·스크롤이 무거워짐) */
.map__route { animation: march 1.1s linear 4 paused; }
.map__walk { animation: march 1.6s linear 3 paused; }
@keyframes march { to { stroke-dashoffset: -14; } }
.map__pin { animation: pin-bob 2.2s ease-in-out 3 paused; transform-box: fill-box; }
.map-card.is-live .map__route, .map-card.is-live .map__walk, .map-card.is-live .map__pin { animation-play-state: running; }
@keyframes pin-bob { 50% { translate: 0 -6px; } }

.visit__info { display: grid; gap: 18px; align-content: start; }
.addr-card { padding: 20px; border-radius: var(--r-md); background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-deep); display: grid; gap: 4px; justify-items: start; }
.addr-card__label { font-size: var(--fs-13); font-weight: 800; color: var(--ink-2); }
.addr-card__addr { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); letter-spacing: -0.03em; line-height: 1.3; }
.addr-card__jibun { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }

.steps { position: relative; display: grid; gap: 4px; padding-left: 4px; }
.steps::before { content: ""; position: absolute; left: 25px; top: 24px; bottom: 24px; border-left: 3px dotted var(--red); }
.steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.steps__ic { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.steps__ic--red { background: var(--red); color: #fff; box-shadow: 0 0 0 4px var(--red-soft); }
.steps p { font-size: var(--fs-17); font-weight: 600; }
.steps b { font-weight: 800; }
.steps__src { font-size: var(--fs-15); color: var(--ink-3); font-weight: 600; margin-top: -10px; }

.transit { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-md); background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line); }
.transit__row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.transit__row b { font-weight: 800; font-size: var(--fs-15); display: block; }
.transit__row small { font-size: var(--fs-15); color: var(--ink-2); font-weight: 600; }
.transit__ic { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; }
.transit__ic--subway { background: #5E93CB; }
.transit__ic--bus { background: #16A34A; }
/* 정류장 목록: 카드 속 카드 대신 점선으로 나눈 줄 */
.bus-list { display: grid; gap: 0; margin-top: 4px; }
.bus-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: var(--fs-15); padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.bus-list li:last-child { border-bottom: 0; }
.bus-list li > span:first-child { font-weight: 600; }
.bus-list em { font-style: normal; color: var(--ink-3); font-size: var(--fs-13); font-weight: 600; margin-left: 2px; }
.bus-list li > span:nth-child(2) { color: var(--ink-2); font-weight: 600; font-size: var(--fs-15); text-align: right; }
.bus-nos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
/* 버스 정류장 목록: 칸이 넓으면 두 칸으로. 기준 폭은 가장 긴 노선 줄('15 30 34 62 103-1')이 반 칸에 한 줄로 들어가는 폭
   (화면 폭이 아니라 목록 칸 폭 기준 → 데스크톱 1200px처럼 칸이 좁으면 한 칸 그대로).
   두 칸일 땐 정류장 번호를 모든 칸에서 이름 아래 줄에 (한 칸만 번호가 떨어져 높이가 들쭉날쭉하지 않게), 노선 칩은 늘 위쪽에 붙음 */
.transit__bus { container: bus / inline-size; min-width: 0; }
@container bus (min-width: 440px) {
  .bus-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
  .bus-list li { align-content: start; align-items: start; }
  .bus-list em { display: block; margin: 1px 0 0; }
  .bus-list li:nth-last-child(2) { border-bottom: 0; }
}
.bus-no { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; font-weight: 800; font-size: var(--fs-13); color: #fff; font-variant-numeric: tabular-nums; }
.bus-no--b { background: #2F64D0; }
.bus-no--g { background: #15803D; }
.bus-no--y { background: #F2A900; color: var(--ink); }
.bus-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); }
.bus-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bus-dot--b { background: #2F64D0; } .bus-dot--g { background: #15803D; } .bus-dot--y { background: #F2A900; }

.map-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 12px; border-radius: var(--r-sm);
  font-weight: 800; font-size: var(--fs-15); text-align: center; line-height: 1.25;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 3px 0 var(--line-2);
  transition: transform .12s, box-shadow .12s;
}
.map-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.map-btn__logo { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-13); flex: none; }
/* 네이버 버튼: 브랜드 초록은 로고 칩과 테두리에만, 글자는 진한 초록 (대비 5.9:1) */
.map-btn--naver { background: var(--paper); color: #0A7337; box-shadow: inset 0 0 0 2px #03C75A, 0 3px 0 #02a149; }
.map-btn--naver .map-btn__logo { background: #03C75A; color: #fff; }
.map-btn--kakao { background: #FEE500; color: #191600; box-shadow: 0 3px 0 #D9C300; }
.map-btn--kakao .map-btn__logo { background: #191600; color: #FEE500; }
.map-btn--route .i { color: var(--red); }
.map-btn--app { grid-column: 1 / -1; background: var(--paper); color: #027A3A; box-shadow: inset 0 0 0 2px #03C75A, 0 3px 0 #02a149; }
.map-btn--app .i { color: #03C75A; }
.parking-note { font-size: var(--fs-15); color: var(--ink-3); font-weight: 600; }

/* =========================================================
   14. 마지막 CTA
   ========================================================= */
.final {
  position: relative;
  background:
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(255, 255, 255, .2) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 12deg),
    var(--yellow);
  padding-bottom: 72px;
  text-align: left;
}
.final__inner { display: grid; gap: 18px; padding-top: 58px; justify-items: start; }
.final__logo { width: min(320px, 70vw); height: auto; }
.final__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.04em; }
.final__lead { font-size: var(--fs-17); font-weight: 600; color: var(--ink-2); max-width: 32em; }
.final__cta { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.final__cta .btn { flex: 1 1 auto; }
.final__cta .btn--red { flex-grow: 1.6; }
.final__more { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; white-space: nowrap;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); font-weight: 800; font-size: var(--fs-15);
  box-shadow: 0 3px 0 rgba(150, 90, 0, .3);
  transition: transform .12s, background-color .2s;
}
.pill-btn:hover { background: #fff; }
.pill-btn:active { transform: translateY(3px); box-shadow: none; }
.pill-btn .i { color: var(--red); width: 18px; height: 18px; }
.final__tip { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }

/* =========================================================
   15. 푸터
   ========================================================= */
.site-footer { background: var(--cream); padding: 48px 0 calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.footer__inner { display: grid; gap: 22px; }
.footer__brand { display: grid; gap: 10px; justify-items: start; align-content: start; }
.footer__brand p { font-weight: 600; color: var(--ink-2); font-size: var(--fs-15); }
.signframe {
  position: relative; padding: 16px 40px; background: var(--paper); border: 3px solid var(--plum);
}
.signframe::before, .signframe::after {
  content: ""; position: absolute; top: -3px; width: 24px; height: 24px;
  background: linear-gradient(var(--plum), var(--plum)) 50% 0 / 3px 100% no-repeat, linear-gradient(var(--plum), var(--plum)) 0 50% / 100% 3px no-repeat, var(--paper);
  border: 3px solid var(--plum);
}
.signframe::before { left: -3px; }
.signframe::after { right: -3px; }
.signframe img { height: 46px; width: auto; }
.footer__info { display: grid; gap: 8px; font-size: var(--fs-15); }
.footer__info div { display: grid; grid-template-columns: 44px 1fr; gap: 10px; }
.footer__info dt { font-weight: 800; color: var(--ink-3); }
.footer__info dd { font-weight: 600; }
.footer__info a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 800; font-size: var(--fs-15); }
.footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.footer__src { font-size: var(--fs-15); color: var(--ink-3); font-weight: 600; }
.footer__copy { font-size: var(--fs-13); color: var(--ink-3); }

/* =========================================================
   16. 모바일 하단 액션바
   ========================================================= */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 24px rgba(130, 85, 0, .12);
  transition: transform .4s var(--ease-out);
}
.js .actionbar:not(.is-shown) { transform: translateY(120%); }
.actionbar__item {
  position: relative; display: grid; place-items: center; gap: 1px;
  min-height: 52px; border-radius: var(--r-sm); font-size: var(--fs-13); font-weight: 800;
  background: var(--yellow-pale); color: var(--ink);
}
.actionbar__item .i { width: 21px; height: 21px; }
.actionbar__item--call { display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; gap: 6px; font-size: var(--fs-15); }
/* 배지는 그릇 아이콘(21px, 가운데)의 오른쪽 위 모서리에 걸치게: 두 자리 수가 돼도 아이콘을 덮지 않음 */
.actionbar__badge { position: absolute; top: 2px; left: calc(50% + 7px); right: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: var(--fs-12); line-height: 22px; box-shadow: 0 0 0 2px #fff; text-align: center; font-weight: 800; }
.actionbar__badge.is-wide { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; line-height: 20px; letter-spacing: -0.02em; }
.actionbar__badge.is-bump { animation: bump .45s var(--ease-spring); }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 130;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 12px; min-height: 52px; border-radius: var(--r-sm); line-height: 1.4;
  background: var(--paper); color: var(--ink); font-weight: 800; font-size: var(--fs-15);
  box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink), 0 18px 34px rgba(80, 50, 0, .25);
  transform: translate(-50%, 160%); visibility: hidden;
  transition: transform .4s var(--ease-spring), visibility 0s .4s;
}
.toast.is-shown { transform: translate(-50%, 0); visibility: visible; transition: transform .4s var(--ease-spring), visibility 0s; }
/* 결과 표시: 됐어요(초록 체크) · 확인해 주세요(빨간 느낌표). 테두리 안쪽에 놓인 동그라미라 검은 틀 밖으로 삐져나오는 띠가 없음 */
.toast__ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; }
.toast__ic .i { width: 16px; height: 16px; }
.toast.is-warn .toast__ic { background: var(--red); }
.toast__msg { padding: 4px 6px 4px 0; text-wrap: pretty; }
.toast__action { flex: none; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); background: var(--yellow); color: var(--ink); font-weight: 800; font-size: var(--fs-15); white-space: nowrap; box-shadow: inset 0 0 0 2px var(--ink); }
/* 터치 화면: 토스트 글자 부분은 손가락 탭을 그대로 아래로 통과시킴 (밑에 있는 +/− 버튼이 먹통이 되지 않게). 동작 버튼만 눌림 */
@media (hover: none), (pointer: coarse) {
  .toast { pointer-events: none; }
  .toast__action { pointer-events: auto; }
}

/* 데스크톱 상차림 알약 */
.cart-pill {
  position: fixed; right: 24px; bottom: 24px; z-index: 65;
  display: none; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 16px 0 18px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--ink); font-weight: 800; font-size: var(--fs-15);
  box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink), 0 16px 30px rgba(96, 58, 10, .25);
  transition: transform .15s var(--ease-out), opacity .2s, visibility 0s;
}
.cart-pill:hover { transform: translateY(-2px); }
/* 알약 자리(오른쪽 아래)에 버튼·링크가 들어오면 잠깐 비켜 줌 (JS가 .is-away) */
.cart-pill.is-away { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; transition: transform .2s var(--ease-out), opacity .2s, visibility 0s .2s; }
.cart-pill strong { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); letter-spacing: -0.03em; }
.cart-pill b { color: var(--red-deep); }
.cart-pill.is-bump { animation: bump .45s var(--ease-spring); }
/* 토스트(가운데 아래)가 떠 있는 동안 상차림 알약은 그 위로 비켜 줌 — 960–1199px에서 겹치던 문제 */
html.has-toast .cart-pill:not(.is-away) { transform: translateY(-76px); }

/* 스크롤 리빌 (투명도 대기 없음) */
.js [data-reveal] { transform: translateY(22px); transition: transform .9s var(--ease-out); }
.js [data-reveal].is-in { transform: none; }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 559px) {
  /* 마지막 안내 알약 버튼: 들쭉날쭉한 세 줄 대신 고른 폭 */
  .final__more { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .final__more .pill-btn { justify-content: center; }
  .final__more .pill-btn:nth-child(2) { grid-column: 1 / -1; order: 3; }
  /* 차림표 사진: 휴대폰에선 확대된 채로 열림. 205%면 첫 화면에 식사류 이름과 가격이 함께 보이고(가격 끝 ≈ 사진 폭 47%),
     창 높이는 사진에 맞춰 위아래 빈 공간이 생기지 않게 */
  .lightbox__bar p span { display: block; margin-left: 0; }
  .lightbox__body.is-zoomed img { width: 205%; }
  /* 상차림 금액 칸: 휴대폰 반 칸에는 '1인당 (2명)'과 '약 105,333원'이 한 줄에 안 들어가므로 이름 위·금액 아래로 (넓은 화면 규칙과 같은 모양) */
  .builder-sum { margin-top: 14px; }
  .builder-sum__cell { display: grid; justify-content: stretch; align-content: center; gap: 0; padding: 5px 12px; }
  .builder-sum__cell span { line-height: 1.25; }
  .builder-sum__cell strong { font-size: clamp(16px, 5.4vw, 20px); line-height: 1.1; }
}
/* 360px대 휴대폰: 마지막 알약 두 개가 한 줄을 나눠 쓰는 칸(160px)에 '친구에게 공유하기'가 한 줄로 안 들어감 →
   눈에 보이는 글은 '공유하기'만 (화면 낭독기에는 '친구에게 공유하기' 그대로) */
@media (max-width: 374px) {
  .sr-narrow { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* 키 작은 화면(가로 모드 등)에서는 상차림 무대가 화면을 다 덮지 않게 */
@media (max-height: 560px) {
  .builder__stage { position: relative; top: auto; }
  .builder__stage::after { display: none; }
}
/* 휴대폰 가로 모드: 메뉴 탭 띠는 붙어 다니지 않음 (헤더·탭·아래 버튼 줄이 화면 절반을 덮지 않게) */
@media (max-height: 500px) {
  .tabs-bar { position: relative; top: auto; }
  .tabs-bar.is-stuck { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu .tabpanel :is(a, button) { scroll-margin-top: calc(var(--header-h) + 12px); }
}
@media (max-width: 959px) and (max-height: 760px) {
  .sang--builder .sang__top { height: 120px; }
  .builder-sum { margin-top: 10px; }
}
/* 휴대폰의 낮은 상에 메뉴가 5가지 이상이면 수저 그림을 걷고 그 자리까지 그릇을 놓음 */
@media (max-width: 959px) {
  .has-many .builder-table__seats { display: none; }
  .has-many .builder-table__plates { inset: 8px 10px 10px; }
}
@media (max-width: 959px) {
  /* 아래 고정 버튼 줄에 키보드 포커스가 가리지 않게 */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 359px) {
  .hero__facts { grid-template-columns: 1fr; }
  .presets { grid-template-columns: minmax(0, 1fr); }
  .header__call-short { display: none; }
  .header__call { padding: 0 12px; }
  /* 320px 휴대폰: 배지를 이름 위 줄로 올려 긴 요리 이름(묵은지닭볶음탕)이 가격표 폭 안에 들어가게 (넘치면 줄바꿈) */
  .hero-tag { grid-template-columns: minmax(0, 1fr); }
  .hero-tag .seal--tag { justify-self: start; }
  .hero-tag strong { white-space: normal; font-size: var(--fs-15); }
  /* 320~359px: 상차림 담기 줄에서 '묵은지닭볶음탕'이 +/− 버튼 밑으로 파고들지 않게 접시·여백을 줄여 이름 칸을 넓힘 */
  .builder-block { padding: 14px 12px; }
  .pick-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; padding: 8px 4px; }
  .pick-row__thumb, .pick-row__thumb .food-art { width: 38px; height: 38px; }
  .pick-row .stepper__value { min-width: 22px; }
  /* 차림표 창 머리: 300px 폭에 '수라상 차림표' + '전체 보기' 버튼 + 닫기가 한 줄로 */
  .lightbox__bar { gap: 6px; padding-left: 14px; }
  .lightbox__bar p b { font-size: var(--fs-17); }
  /* 리뷰 넘김 버튼 줄: 화살표(44×44)와 점 6개가 288px 안에 들어가게 (화살표가 타원으로 눌리지 않게) */
  .carousel__nav { gap: 4px; }
  .round-btn { width: 44px; height: 44px; }
  .carousel__dots button { width: 30px; }
  /* 바로가기 칸(140px)에 '오늘 뭐 먹지?'가 한 줄로 들어가게 아이콘·여백을 조금 줄임 */
  .mnav a { gap: 8px; padding-inline: 10px; }
  .mnav__ic { width: 30px; height: 30px; }
}
/* 휴대폰: 인원 안내 문장은 버튼 옆 좁은 칸(서너 줄로 들쭉날쭉) 대신 아래 줄 전체 폭으로 */
@media (max-width: 479px) {
  .builder-block--people .stepper { grid-row: auto; }
  .builder-block--people .builder-block__hint { grid-column: 1 / -1; }
}

/* 작은 휴대폰: 가격 줄 글자를 한 단계 줄이고 '콜라/사이다'는 아랫줄로 */
@media (max-width: 399px) {
  .price-row { gap: 6px; padding-left: 12px; }
  .price-row__name, .price-row__price { font-size: var(--fs-17); }
  .price-row__name small { display: block; margin-top: 1px; }
  .price-row .food-art--mini { width: 40px; margin-right: 2px; }
  .price-row .bottle { margin: 0 9px; }
  .price-row__dots { min-width: 6px; }
  /* 메뉴 뽑기 칸: 조합 이름(…+ 공깃밥 4)과 '합계 ○원 · ○명'이 들어갈 폭을 더 줌 */
  .slot__window { --reel-pad: 12px; --reel-gap: 12px; --reel-plate: 84px; }
}
/* 360~413px: 두 칸 사실 카드가 좁아 '1만원대' 도장이 '10,000원부터'의 '터' 위에 얹힘 →
   카드 줄 위 여백을 8px 늘리고 도장도 그만큼 올림(소개 문장과의 간격은 그대로), 가격 줄은 2px 내림 */
@media (min-width: 360px) and (max-width: 413px) {
  .hero__facts { margin-top: 10px; }
  .fact--price { padding-top: 14px; }
  .fact--price .seal--price { top: -22px; }
}
/* 320px 휴대폰: 뽑기 칸 접시를 조금 더 줄이고 글자 한 단계 작게 */
@media (max-width: 359px) {
  .slot__window { --reel-pad: 10px; --reel-gap: 10px; --reel-plate: 68px; --reel-fs: var(--fs-17); }
  .reel-item__price { font-size: var(--fs-13); }
}

@media (min-width: 390px) {
  .carousel__dots button { width: 40px; }
}
/* 430px 미만: 점은 '몇 번째 리뷰인지' 보여 주는 표시만 (누르는 버튼이 아님 → 44px 칸이 안 나오는 폭에서 작은 터치 칸을 만들지 않음).
   넘기기는 양옆 44px 화살표와 손가락 밀기로. JS가 점 줄에 aria-hidden, 점에 tabindex=-1 을 붙임 */
@media (max-width: 429px) {
  .carousel__dots { pointer-events: none; }
}
@media (min-width: 430px) {
  .carousel__dots button { width: 44px; }
}
@media (min-width: 420px) {
  .picker-filter { display: flex; flex-wrap: wrap; }
}

@media (min-width: 560px) {
  .br-sm { display: none; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  /* 카드 높이가 늘어나도 접시 칸 높이는 같게 → 이름·가격·담기 버튼 줄이 나란히 */
  .dish { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dish__plate { padding: 22px 22px 18px; aspect-ratio: 4 / 3; }
  .dish__photo { width: auto; height: 100%; }
  .dish__type { font-size: clamp(30px, 12.5cqi, 56px); padding: .26em .5em .3em; border-width: 3px; box-shadow: 0 4px 0 var(--ink); border-radius: var(--r-md); }
  .dish__type small { font-size: max(13px, .36em); margin-bottom: .1em; }
  .dish__type-price {
    display: block; justify-self: stretch; margin-top: .3em; padding-top: .26em; border-top: 2px dashed var(--line-2);
    font-size: max(15px, .42em); line-height: 1.1; letter-spacing: -0.02em; color: var(--red); font-variant-numeric: tabular-nums lining-nums;
  }
  .dish__han { right: -14px; top: -15px; font-size: 15px; padding: 5px 5px 4px; }
  .dish__pen { font-size: clamp(19px, 6cqi, 24px); }
  /* 함께 먹는 요리: 글자 카드 둘이 나란히 놓이는 마지막 줄은 접시 칸을 낮게 */
  .menu-grid--share .dish:nth-child(n+4) .dish__plate { aspect-ratio: 16 / 9; }
  /* 함께 먹는 요리: 시그니처를 가로로 넓게, 나머지 4개는 2×2 */
  .menu-grid--share .dish:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .menu-grid--share .dish:first-child .dish__plate { height: 100%; }
  .review { flex-basis: 360px; }
  .map--d { display: block; }
  .map--m { display: none; }
  .presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sujeo { display: block; }
  .sang--builder .sang__top { height: 190px; }
}

@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .section { padding-block: 100px; }
  .menu { padding-bottom: 40px; }
  .header__call-full { display: inline; }
  .header__call-short { display: none; }
  .header__logo img { width: 120px; }
  .site-header.is-scrolled .header__logo img { width: 104px; }
  .status-pill { padding: 0 14px 0 12px; }
  .status-pill__text { display: inline-flex; align-items: baseline; white-space: nowrap; }
  .status-pill__text small { font-size: var(--fs-13); font-weight: 800; opacity: 1; }
  .status-pill__sep { display: inline; white-space: pre; }
  .awning { --aw: 34px; }
  .hero__grid { padding-top: 40px; gap: 34px; }
  .hero__copy { gap: 16px; }
  .hero__sub-links { display: flex; }
  .ticker { height: 36px; }
  .ticker__list li { height: 36px; }
  .ticker__list li.is-hot { height: 26px; margin: 5px 8px; }
  .trust__inner { gap: 22px; }
  .trust__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 16px 18px 18px; }
  .stat__num b { font-size: var(--fs-36); }
  .stat__label { font-size: var(--fs-15); }
  .trust__src { grid-column: 1 / -1; }
  .menuboard-btn { grid-template-columns: 168px 1fr; align-items: center; gap: 14px; padding-right: 18px; max-width: 470px; }
  .menuboard-btn__img { aspect-ratio: 16 / 9; }
  .menuboard-btn__pen { right: 6px; bottom: 6px; font-size: 17px; padding: 1px 7px 0; }
  .menuboard-btn__text { padding: 0; }
  .hero__stage { width: 100%; max-width: 560px; margin-inline: auto; }
  .tabs { display: inline-grid; grid-template-columns: repeat(4, auto); }
  .tabs [role="tab"] { padding: 6px 20px; font-size: var(--fs-17); }
  .tabs__count { display: inline-flex; }
  .amen__list { grid-template-columns: repeat(3, 1fr); }
  .map-btns { grid-template-columns: repeat(4, auto); justify-content: start; }
  .visit__info .map-btns { grid-template-columns: 1fr 1fr; }
  .reviews__links { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 16px 16px 16px 22px; }
  .reviews__links .btn { width: auto; }
  .footer__inner { grid-template-columns: auto 1fr; column-gap: 56px; }
  .footer__brand { grid-row: span 2; }
  .footer__src, .footer__copy { grid-column: 1 / -1; }
  .slot__window { --item-h: 150px; --reel-plate: 112px; --reel-fs: var(--fs-24); }
}

@media (min-width: 760px) {
  .price-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-row--wide { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  :root { --header-h: 72px; --gutter: 32px; }
  .header__logo img { width: 130px; }
  .site-header.is-scrolled .header__logo img { width: 106px; }
  .nav-toggle, .mnav { display: none !important; }
  .site-header.is-scrolled .header__inner { height: 60px; }
  .header__nav { display: flex; gap: 2px; margin-left: 28px; }
  .header__nav a { padding: 10px 14px; border-radius: var(--r-sm); font-weight: 800; font-size: var(--fs-15); color: var(--ink-2); transition: background-color .2s, color .2s; }
  .header__nav a:hover { background: var(--yellow-pale); color: var(--ink); }
  .header__nav a[aria-current="page"] { color: var(--ink); background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
  .status-pill { min-height: 44px; font-size: var(--fs-15); padding: 0 14px 0 12px; }

  .awning { --aw: 34px; height: 42px; }
  .hero { padding-bottom: 84px; }
  html.is-compact { --header-h: 60px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: 56px; padding-top: 64px; }
  .hero__stage { max-width: none; margin-top: 0; }
  .hero__copy { gap: 22px; }
  .hero__lead { font-size: var(--fs-20); }
  .hero__facts { max-width: 560px; }
  .fact { padding: 12px 16px; }
  .fact b { font-size: var(--fs-15); }
  .fact small { font-size: var(--fs-13); }
  .fact--price b { font-size: var(--fs-24); }
  .hero__cta .btn { flex: 0 1 auto; }
  .hero__cta .btn--red { padding: 0 30px; }
  .fact--price .seal--price { position: static; width: 56px; height: 56px; font-size: 13px; margin-left: auto; }
  .hero__chips { justify-content: safe flex-end; margin-top: 4px; margin-inline: 0; padding-inline: 2px; }
  .hero-tag { right: -18px; top: -22px; padding: 12px 18px 12px 14px; gap: 2px 10px; }
  .hero-tag strong { font-size: var(--fs-24); }
  .hero-tag .seal--tag { font-size: var(--fs-13); padding: 7px 10px 6px; }
  .hero-tag__price b { font-size: var(--fs-30); }
  .hero-tag__price small { font-size: var(--fs-15); }
  .hero-sticker { width: 128px; height: 128px; left: -22px; bottom: -22px; }
  .hero-sticker b { font-size: var(--fs-36); }
  .hero-sticker span { font-size: var(--fs-13); }
  .hero-sticker small { font-size: var(--fs-13); }

  .sec-head { margin-bottom: 48px; }

  .sig { grid-template-columns: 1.08fr 1fr; gap: 64px; }
  .sig--flip .sig__visual { order: 2; }
  .sig + .sig { margin-top: 96px; }
  .seal--sticker { width: 118px; height: 118px; font-size: var(--fs-20); }

  .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  /* 함께 먹는 요리: 사진 카드 2개는 반씩(가로 배치), 글자 카드 3개는 3분의 1씩 */
  .menu-grid.menu-grid--share { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .menu-grid--share .dish, .menu-grid--share .dish:first-child { grid-column: span 2; }
  .menu-grid--share .dish.dish--wide { grid-column: span 3; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .menu-grid--share .dish--wide .dish__plate { height: 100%; aspect-ratio: auto; min-height: 260px; }
  /* 둘째 줄은 글자 카드 셋 → 접시 칸을 낮게 해서 빈 줄무늬가 화면을 채우지 않게 */
  .menu-grid--share .dish:nth-child(n+3) .dish__plate { aspect-ratio: 16 / 9; }
  .price-list { gap: 12px; }

  .builder__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "stage presets" "stage panel" "checkout panel"; gap: 20px 36px; align-items: start; }
  .builder__presets { grid-area: presets; }
  .builder__work { display: contents; }
  .builder__stage { grid-area: stage; position: relative; top: auto; padding: 0; background: none; }
  .builder__stage::after { display: none; }
  .builder__panel { grid-area: panel; }
  .builder__checkout { grid-area: checkout; grid-template-columns: 1fr 1fr; align-items: start; gap: 18px; }
  .sang--builder .sang__top { height: auto; aspect-ratio: 1.45 / 1; }
  .builder-table__plates { inset: 26px 26px 52px; gap: calc(10px * var(--ps)) calc(16px * var(--ps)); }
  .bcl--share { --sz: 140px; }
  .bcl--meal { --sz: 112px; }
  .bcl--extra { --sz: 74px; }
  .bplate--drink { height: calc(96px * var(--ps)); }
  .bplate--drink .bottle { width: calc(28px * var(--ps)); height: calc(80px * var(--ps)); }
  .bplate--drink .bottle--soda { width: calc(34px * var(--ps)); height: calc(60px * var(--ps)); }
  .bcl--more { --sz: 70px; --mf: var(--fs-20); }
  .bcl__q { --qh: 30px; --qf: var(--fs-15); }
  .bcl--drink { --pw: calc(28px * var(--ps)); }
  .bcl__label { --lf: var(--fs-13); padding: 2px calc(10px * clamp(.7, var(--ps), 1.2)); }
  .builder-table__seats { bottom: 14px; gap: 8px; }
  .seat-sujeo, .seat-sujeo svg { width: 34px; height: 26px; }
  .builder-table__empty { font-size: var(--fs-15); }
  .builder-table__empty span { font-size: var(--fs-24); }
  .builder-sum { gap: 10px; margin-top: 24px; }
  .builder-sum__cell { display: grid; gap: 0; justify-content: stretch; padding: 12px 16px; border-radius: var(--r-md); }
  .builder-sum__cell span { font-size: var(--fs-13); }
  .builder-sum__cell strong { font-size: var(--fs-30); }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pick__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "head slot" "mode slot" "result slot"; grid-template-rows: auto auto 1fr; column-gap: 72px; row-gap: 20px; align-items: start; }
  .pick__head { grid-area: head; }
  .mode { grid-area: mode; }
  .slot { grid-area: slot; align-self: center; }
  .pick-result { grid-area: result; }
  .slot { max-width: 520px; }
  .slot__window { --item-h: 170px; --reel-plate: 128px; --reel-fs: var(--fs-30); }
  .reel-item__price { font-size: var(--fs-17); }

  .reviews__grid { grid-template-columns: 380px minmax(0, 1fr); gap: 40px; align-items: start; }
  /* 리뷰 카드 줄은 오른쪽으로 화면 끝까지 이어짐 (컨테이너 끝에서 카드가 글자 중간에 잘리지 않게).
     --bleed = 컨테이너 오른쪽 끝 ~ 화면 끝 거리(섹션 폭 100cqw 기준). 같은 만큼 안쪽 여백을 줘서 마지막 카드는 컨테이너 끝에 맞춰 멈춤 */
  .carousel__track { margin-inline: 0; padding-inline: 4px; scroll-padding-inline: 4px; }
  @supports (width: 1cqw) {
    .carousel__track {
      --bleed: max(var(--gutter), (100cqw - var(--container)) / 2);
      margin-inline: 0 calc(var(--bleed) * -1); padding-inline: 4px calc(var(--bleed) + 4px);
    }
  }

  .info__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .amen__list { grid-template-columns: repeat(3, 1fr); }
  .hours { position: sticky; top: calc(var(--header-h) + 24px); }
  .storefront { display: grid; grid-template-columns: 1fr; }

  .visit__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .map-card { position: sticky; top: calc(var(--header-h) + 24px); }

  .final { text-align: center; }
  .final__inner { justify-items: center; padding-top: 80px; }
  .final__lead { margin-inline: auto; }
  .final__cta { justify-content: center; width: auto; }
  .final__cta .btn { flex: 0 1 auto; min-width: 200px; }
  .final__more { justify-content: center; }

  .actionbar { display: none; }
  .cart-pill:not([hidden]) { display: inline-flex; }
  .site-footer { padding-bottom: 48px; }
  .toast { bottom: 32px; }
}

@media (min-width: 1040px) {
  .price-list--drinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 3열에선 7번째(음료)를 전체 폭으로 늘이지 않음 — 점선이 화면 끝까지 900px 늘어나던 문제 */
  .price-list--drinks .price-row--wide { grid-column: auto; }
}

/* 960~1199: 두 칸 히어로에서 제목이 세 줄로 쪼개지지 않게 */
@media (min-width: 960px) and (max-width: 1199px) {
  .hero__title { font-size: clamp(56px, 6.3vw, 74px); }
}

@media (min-width: 1200px) {
  /* 신뢰 띠: 제목은 '모두' 뒤에서 두 줄로, 숫자 카드 넷은 넓게 → '예약 없이 바로 입장'도 한 줄. 카드 안 내용은 세로 가운데 */
  .trust__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; column-gap: 40px; }
  .trust__headline .hl { white-space: nowrap; }
  .stat { align-content: center; }
  .dish__plate { padding: 26px 26px 20px; }
}

/* 화면 밖에 있는 반복 애니메이션은 멈춤 (JS가 .is-offscreen 을 붙임) */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* 자바스크립트가 꺼져 있으면 눌러도 동작하지 않는 조작 요소는 숨김 (내용은 그대로 보임) */
.no-js .tabs-bar, .no-js .presets, .no-js .mode, .no-js .slot__lever, .no-js .slot__arm, .no-js [data-add], .no-js .picker-filter, .no-js .builder__panel, .no-js .builder__actions-row, .no-js .carousel__nav, .no-js [data-share], .no-js [data-copy] { display: none; }

/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  .ticker { overflow-x: auto; scrollbar-width: none; }
  .ticker__track { animation: none !important; }
  .steam { display: none; }
  .js [data-reveal] { transform: none; }
  .map__route, .map__walk, .map__pin { animation: none !important; }
}

@media print {
  .ticker, .actionbar, .toast, .site-header, .slot, .builder { display: none !important; }
}

/* =========================================================
   네 페이지 구조 (2026.10.14) — 홈 · 차림표 · 상차림 · 오시는 길
   공통 틀(헤더·하단 버튼 줄·푸터)은 위 규칙 그대로, 아래는 새로 생긴 조각과 휴대폰 압축
   ========================================================= */

/* 페이지 이동 애니메이션: 지원하는 브라우저에서만 살짝 겹쳐 바뀜 (헤더·띠·아래 버튼 줄은 제자리) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
.ticker { view-transition-name: ticker; }
.site-header { view-transition-name: site-header; }
.actionbar { view-transition-name: actionbar; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 휴대폰은 섹션 위아래 여백을 줄여 스크롤 길이를 아낌 */
.section { padding-block: 52px; }
.sec-head--tight { gap: 8px; margin-bottom: 18px; }
.sec-title--md { font-size: clamp(26px, 6.8vw, 44px); line-height: 1.18; }
.sec-head--tight .sec-cite { margin-top: -2px; }

/* ---------- 헤더 내비 · 모바일 페이지 메뉴: 지금 페이지 표시 ---------- */
.mnav a { min-height: 60px; }
.mnav__txt { display: grid; min-width: 0; line-height: 1.25; }
.mnav__txt small { font-size: var(--fs-13); font-weight: 600; color: var(--ink-3); letter-spacing: -0.02em; }
.mnav a[aria-current="page"] .mnav__txt small { color: var(--ink-2); }
.mnav__act a { background: var(--paper); }
.mnav a.mnav__call { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-deep); }
.mnav__call .mnav__txt small { color: rgba(255, 255, 255, .88); }
.mnav__call .mnav__ic { color: var(--red); }

/* 아래 버튼 줄: 지금 페이지 버튼은 노랑 + 먹 테두리 */
.actionbar__item[aria-current="page"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- 하위 페이지 머리 (차양 + 빵부스러기 + 제목) ---------- */
.page-head {
  position: relative; isolation: isolate; overflow-x: clip;
  background:
    repeating-conic-gradient(from -8deg at 88% -40%, rgba(255, 255, 255, .2) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 13deg),
    radial-gradient(90% 80% at 85% 0%, #FFE27A 0%, rgba(255, 226, 122, 0) 62%),
    var(--yellow);
  padding-bottom: 34px;
}
.page-head__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
.page-head__copy { display: grid; gap: 10px; align-content: start; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--fs-13); font-weight: 800; color: var(--ink-2); letter-spacing: -0.01em; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .5; }
/* 눌리는 칸은 44px 이상, 보이는 줄 높이는 그대로 (위아래 음수 여백) */
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin: -12px -12px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(31, 26, 21, .32); }
.crumbs a:hover { color: var(--red-deep); text-decoration-color: currentColor; }
.page-title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.035em; color: var(--ink); }
.page-lead { font-size: var(--fs-17); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.page-lead b { color: var(--red-deep); }
.page-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.page-chips li { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); box-shadow: 0 2px 0 rgba(150, 90, 0, .18); }
.page-chips b { font-family: var(--f-head); font-weight: 900; color: var(--red-deep); font-variant-numeric: tabular-nums; }
.page-head__scallop { position: absolute; left: 0; right: 0; bottom: -15px; height: 16px; z-index: 3; background: radial-gradient(circle at 18px 0, var(--yellow) 0 15.5px, rgba(255, 199, 44, 0) 16px) 0 0 / 36px 16px repeat-x; }
/* 페이지 안 바로가기 (이 페이지의 구역으로) */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.jump a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 12px;
  border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-weight: 800; font-size: var(--fs-15); letter-spacing: -0.02em;
  box-shadow: 0 3px 0 rgba(150, 90, 0, .28); transition: transform .12s var(--ease-out), box-shadow .12s;
}
.jump a:active { transform: translateY(3px); box-shadow: none; }
.jump .i { width: 18px; height: 18px; color: var(--red); }
/* 차림표 머리의 '차림표 크게 보기': 휴대폰에선 사진 작게 + 글 옆으로 한 줄 */
.page-head .menuboard-btn { grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px 8px 8px; max-width: none; }
.page-head .menuboard-btn__img { aspect-ratio: 16 / 10; }
.page-head .menuboard-btn__pen { right: 4px; bottom: 4px; font-size: 15px; padding: 0 6px; }
.page-head .menuboard-btn__text { padding: 0; }
/* 차림표 탭은 머리 바로 아래부터 (머리가 제목 역할) */
.page-head + .menu { padding-top: 36px; }
.page-head + .builder { padding-top: 40px; }
.page-head + .visit { padding-top: 40px; }

/* ---------- 홈: 신뢰 띠 (압축) ---------- */
.trust { padding: 32px 0 26px; }
.trust__inner { gap: 14px; }
.trust__main { gap: 12px; }
.trust .seal--stamp { width: 52px; height: 52px; font-size: 28px; border-radius: 10px; padding-bottom: 3px; }
.trust__headline { font-size: clamp(21px, 5.6vw, 38px); line-height: 1.3; }
.trust__headline .hl { white-space: nowrap; }
.trust__stats { gap: 8px; }
.stat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); }
.stat__num { padding-top: 0; }
.stat__num b { font-size: var(--fs-30); }
.stat__num small { font-size: var(--fs-17); }
.stat__label { font-size: var(--fs-15); line-height: 1.3; }
.trust__src { font-size: var(--fs-13); }

/* ---------- 홈: 대표 메뉴 (휴대폰: 옆으로 밀어 보기) ---------- */
.picks { background: var(--paper); padding-block: 44px 40px; }
.rail { position: relative; }
.rail__track {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 16px; margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }
.mcard {
  flex: 0 0 clamp(206px, 62vw, 252px); scroll-snap-align: start;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-1); transition: transform .25s var(--ease-out), box-shadow .25s;
}
.mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mcard--star { box-shadow: 0 0 0 2.5px var(--yellow), var(--shadow-1); }
.mcard__plate {
  position: relative; flex: none; display: grid; place-items: center; height: 150px; padding: 12px;
  background:
    repeating-linear-gradient(176deg, rgba(198, 138, 75, 0) 0 11px, rgba(198, 138, 75, .14) 11px 12px, rgba(198, 138, 75, 0) 12px 23px),
    linear-gradient(165deg, #FBE6C0, var(--wood-2));
}
.mcard__plate .dish__photo { width: auto; height: 100%; }
.mcard:hover .dish__photo { transform: rotate(-10deg) scale(1.04); }
.mcard__seal { position: absolute; left: 10px; top: 10px; z-index: 1; }
.mcard__seal--soft { background: var(--paper); color: var(--red-deep); box-shadow: inset 0 0 0 2px var(--red); }
.mcard__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.mcard__name { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-20); letter-spacing: -0.03em; line-height: 1.25; }
.mcard__note { font-size: var(--fs-15); line-height: 1.45; color: var(--ink-2); }
.mcard__foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcard .price { font-size: var(--fs-20); }
.mcard .add-btn { padding: 0 12px; }
.rail__nav { display: none; }
/* 전체 차림표로: 한 줄 전체 띠 */
.more-btn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 1px;
  margin-top: 4px; min-height: 60px; padding: 10px 16px 10px 18px; border-radius: var(--r-md);
  background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink);
  font-weight: 800; font-size: var(--fs-17); letter-spacing: -0.02em;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.more-btn small { grid-column: 1; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.more-btn .i { grid-column: 2; grid-row: 1 / span 2; color: var(--ink); }
.more-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink); }
.more-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ink), 0 1px 0 var(--ink); }

/* ---------- 홈: 왜 수라상 (2×2 → 넓은 화면 4칸) ---------- */
.why { padding-block: 44px; }
.why4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.why4__item {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px 14px 15px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); overflow: hidden;
}
.why4__kicker { font-size: var(--fs-13); font-weight: 800; color: var(--red); letter-spacing: -0.01em; }
.why4__text { margin-top: auto; font-size: var(--fs-15); font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.why4__who { display: block; font-size: var(--fs-13); color: var(--ink-3); }
.why4__item--price { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-deep); }
.why4__item--price .why4__kicker { color: var(--ink); }
.why4__item--price .why4__text { color: var(--ink); }
.why4__big { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-15); line-height: 1.05; letter-spacing: -0.02em; }
.why4__big b { font-size: clamp(30px, 9vw, 46px); color: var(--red); letter-spacing: -0.03em; margin-right: 2px; text-shadow: 2px 2px 0 #fff; font-variant-numeric: lining-nums; }
/* 손글씨는 줄 높이를 고정 (글꼴이 늦게 와도 아래가 움직이지 않게) */
.why4__pen { font-family: var(--f-pen); font-size: clamp(24px, 6.6vw, 30px); line-height: 1.05; color: var(--red); transform: rotate(-3deg); transform-origin: left; min-height: 2.1em; }
.why4__seats { display: flex; align-items: center; gap: 8px; --s: 13px; margin: 2px 0; }
.why4__seats > i { width: 2px; height: 26px; border-radius: 2px; background: var(--line-2); }
.why4__group { display: grid; grid-template-columns: repeat(4, var(--s)); gap: 3px; padding: 4px; border-radius: 6px; background: linear-gradient(165deg, #FBE6C0, var(--wood-2)); }
.why4__seats .seat { border-radius: 4px; }
.why4__group .seat { background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-deep); }
.why4__icons { display: flex; gap: 6px; }
.why4__icons .i { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--yellow-pale); color: var(--ink); }
.why4__icons .i:first-child { background: var(--green-soft); color: var(--green-ink); }

/* ---------- 홈: 리뷰 (키워드 칩 + 카드) ---------- */
.reviews { padding-block: 44px; }
.reviews__grid { gap: 18px; }
.kw { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.kw__title { font-size: var(--fs-17); margin-bottom: 10px; }
.kwchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 칩 색 진하기 = 고른 사람 수 (6 빨강 → 4~5 노랑 → 2~3 연노랑 → 1 흰색) */
.kwchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 5px 4px 12px;
  border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
  font-size: var(--fs-15); font-weight: 600; color: var(--ink); white-space: nowrap;
}
.kwchip b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--r-pill); background: var(--yellow-pale); font-family: var(--f-head); font-weight: 900; font-size: var(--fs-15); line-height: 1; font-variant-numeric: tabular-nums; }
.kwchip--6 { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-deep); font-weight: 800; }
.kwchip--6 b { background: var(--paper); color: var(--red); }
.kwchip--5, .kwchip--4 { background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-deep); }
.kwchip--5 b, .kwchip--4 b { background: var(--paper); }
.kwchip--3, .kwchip--2 { background: var(--yellow-soft); box-shadow: none; }
.kwchip--3 b, .kwchip--2 b { background: var(--paper); }
.review { padding: 18px 18px 16px; gap: 10px; }
.review__text p { font-size: var(--fs-15); line-height: 1.65; }
.reviews__links { margin-top: 18px; padding: 14px 16px; gap: 10px; }

/* ---------- 홈: 상차림 · 메뉴 뽑기 바로가기 카드 ---------- */
.tease { background: var(--cream); padding-block: 36px; border-top: 1px dashed var(--line-2); }
.tease__grid { display: grid; gap: 12px; }
.tease-card {
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  min-height: 116px; padding: 12px 14px 12px 12px; border-radius: var(--r-md);
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.tease-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.tease-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tease-card--pick { background: var(--yellow-sun); }
.tease-card__art { width: 92px; height: 88px; display: grid; place-items: center; }
.tease-card__body { display: grid; gap: 2px; min-width: 0; }
.tease-card__kicker { font-size: var(--fs-13); font-weight: 800; color: var(--red); }
.tease-card--pick .tease-card__kicker { color: var(--red-deep); }
.tease-card__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-20); letter-spacing: -0.03em; line-height: 1.2; }
.tease-card__text { font-size: var(--fs-15); line-height: 1.4; color: var(--ink-2); }
.tease-card--pick .tease-card__text { color: var(--ink); }
.tease-card__cart { justify-self: start; margin-top: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--yellow); font-size: var(--fs-13); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tease-card__cart b { font-weight: 900; }
.tease-card__go { width: 20px; height: 20px; color: var(--red); }
/* 작은 나무 상 (사진 접시 + 공기·반찬) */
.tease-sang { position: relative; width: 92px; height: 72px; border-radius: 12px; background: linear-gradient(165deg, #FBE6C0, var(--wood-2) 70%, #E8BE85); box-shadow: inset 0 0 0 3px #F1CF9A, 0 5px 0 -1px var(--wood-edge), 0 10px 14px -6px rgba(120, 70, 0, .35); }
.tease-sang__plate { position: absolute; left: 6px; top: 6px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 6px rgba(96, 58, 10, .3); background: var(--photo-ph); }
.tease-sang__plate img { width: 100%; height: 100%; object-fit: cover; }
.tease-sang__bowl { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 58%, #EEE8DC 62%, #FFFFFF 68%); box-shadow: 0 2px 3px rgba(96, 58, 10, .25); }
.tease-sang__bowl::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; }
.tease-sang__bowl--rice { right: 6px; bottom: 6px; width: 24px; height: 24px; }
.tease-sang__bowl--rice::before { background: radial-gradient(circle at 40% 35%, #FFFFFF, #F1ECDF); }
.tease-sang__bowl--g { right: 8px; top: 6px; }
.tease-sang__bowl--g::before { background: repeating-linear-gradient(35deg, #3E7F23 0 2px, #6DAA3A 2px 4px); }
.tease-sang__bowl--r { right: 30px; top: 22px; width: 16px; height: 16px; }
.tease-sang__bowl--r::before { background: radial-gradient(circle at 35% 35%, #F27A4E, #D43A1D 70%); }
/* 작은 뽑기 기계: 세 칸 창이 번갈아 톡톡 (화면 밖이면 멈춤) */
.tease-slot { display: flex; gap: 4px; padding: 9px 8px; border-radius: 14px; background: linear-gradient(180deg, #E8352C, var(--red) 45%, #C21F18); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tease-slot i { width: 22px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #FFFDF6; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tease-slot img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; animation: reel-tick 2.4s var(--ease-spring) infinite; }
.tease-slot i:nth-child(2) img { animation-delay: .3s; }
.tease-slot i:nth-child(3) img { animation-delay: .6s; }
@keyframes reel-tick { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-26px); } 81% { transform: translateY(26px); } }

/* ---------- 홈: 영업시간 · 오시는 길 요약 ---------- */
.vsum { background: var(--paper); padding-block: 44px; }
.vsum__grid { display: grid; gap: 14px; }
.vsum__hours { margin: 0; padding: 16px; align-content: start; }
.vsum__hours .neon-sign { font-size: clamp(24px, 6.6vw, 30px); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.week li { display: grid; justify-items: center; gap: 1px; padding: 6px 0 5px; border-radius: 10px; background: rgba(255, 255, 255, .78); font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); }
.week b { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-17); line-height: 1.2; color: var(--ink); }
.week .is-off { background: var(--red-soft); color: var(--red-deep); box-shadow: inset 0 0 0 1.5px #FFC2B8; }
.week .is-off b { color: var(--red-deep); }
.week .is-today { background: var(--ink); color: #fff; box-shadow: none; }
.week .is-today b { color: #fff; }
.week .is-today.is-off { background: var(--red-deep); }
.vsum__time { margin-top: 8px; font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
.vsum__time b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.vsum__place { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--r-md); background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-deep); }
.vsum__addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.vsum__addr-label { grid-column: 1 / -1; font-size: var(--fs-13); font-weight: 800; color: var(--ink-2); }
.vsum__addr-line { font-family: var(--f-head); font-weight: 900; font-size: clamp(19px, 5.4vw, 24px); letter-spacing: -0.03em; line-height: 1.3; }
.vsum__addr .btn { box-shadow: 0 3px 0 rgba(150, 90, 0, .3); border-color: rgba(150, 90, 0, .25); }
.vsum__facts { display: grid; gap: 8px; }
.vsum__facts li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; font-size: var(--fs-15); font-weight: 600; line-height: 1.4; }
.vsum__facts b { font-weight: 800; }
.vsum__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--paper); color: var(--red); }
.vsum__ic--subway { background: #5E93CB; color: #fff; }
.vsum__ic .i { width: 19px; height: 19px; }
.vsum__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vsum__btns .map-btn--route { grid-column: 1 / -1; background: var(--ink); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.vsum__btns .map-btn--route .i { color: var(--yellow); }
.map-btn--call { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-deep); }
.map-btn--call .i { color: #fff; }
.more-link {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: 44px;
  font-weight: 800; font-size: var(--fs-15); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(31, 26, 21, .35);
}
.more-link:hover { color: var(--red-deep); text-decoration-color: currentColor; }

/* ---------- 홈: 마지막 인사 (압축) ---------- */
.final { padding-bottom: 46px; }
.final__inner { gap: 14px; padding-top: 38px; }
.final__logo { width: min(200px, 56vw); }
.final__title { font-size: clamp(30px, 8vw, 54px); }
.final__tip { font-size: var(--fs-15); }

/* ---------- 차림표 페이지 ---------- */
/* 가격 띠: 위는 차림표(연노랑), 아래는 시그니처(흰색) */
.ribbon { background: linear-gradient(var(--yellow-pale) 50%, var(--paper) 50%); }
.signature { padding-block: 52px 60px; }
.sig { gap: 22px; }
.sig + .sig { margin-top: 48px; }
.sang--sig .sang__top { aspect-ratio: 1.3 / 1; }
.owner { background: var(--cream); padding-block: 36px 40px; border-top: 1px dashed var(--line-2); }
.owner .owner-quote { max-width: 760px; margin: 0; }
.owner .owner-quote p { font-size: clamp(18px, 4.8vw, 24px); }

/* ---------- 오시는 길 페이지 ---------- */
.info__grid { gap: 32px; }
.amen .sec-head { margin-bottom: 16px; }
.amen__list { gap: 8px; }
.amen-item { grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 0; padding: 10px 12px; border-radius: var(--r-sm); }
.amen-item__ic { width: 36px; height: 36px; margin: 0; grid-row: span 2; }
.amen-item__ic .i { width: 20px; height: 20px; }
.amen-item--no { grid-template-columns: 36px minmax(0, 1fr); }
.amen-item--no .amen-item__ic { grid-row: auto; }
.storefront { margin-top: 16px; }

/* ---------- 하위 페이지 끝: 이어서 보기 + 전화 ---------- */
.next { position: relative; background: var(--yellow); padding: 40px 0 44px; }
.next::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16px; background: radial-gradient(circle at 18px 0, var(--next-top, var(--paper)) 0 15.5px, rgba(255, 255, 255, 0) 16px) 0 0 / 36px 16px repeat-x; }
.owner + .next { --next-top: var(--cream); }
.info + .next { --next-top: var(--cream); }
.next__inner { display: grid; gap: 14px; }
.next__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs-24); letter-spacing: -0.03em; }
.next__grid { display: grid; gap: 10px; }
.next-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  min-height: 72px; padding: 12px 14px 12px 12px; border-radius: var(--r-md); background: var(--paper);
  box-shadow: 0 4px 0 rgba(150, 90, 0, .3); transition: transform .15s var(--ease-out), box-shadow .15s;
}
.next-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(150, 90, 0, .3); }
.next-card:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(150, 90, 0, .3); }
.next-card__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow-pale); color: var(--red); }
.next-card__txt { display: grid; gap: 1px; min-width: 0; }
.next-card__txt b { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-20); letter-spacing: -0.03em; line-height: 1.25; }
.next-card__txt small { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.next-card__go { color: var(--red); }
.next__cta { display: grid; gap: 8px; }
.next__cta .btn { width: 100%; }
.next__hours { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }

/* ---------- 푸터 (휴대폰에선 얇게) ---------- */
.site-footer { padding: 30px 0 calc(92px + env(safe-area-inset-bottom)); }
.footer__inner { gap: 16px; }
.footer__brand { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.footer__brand .signframe { padding: 10px 24px; }
.footer__brand .signframe::before, .footer__brand .signframe::after { width: 18px; height: 18px; }
.footer__brand .signframe img { height: 32px; }
.footer__brand p { font-size: var(--fs-13); line-height: 1.45; }
.footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.footer__nav a { display: grid; place-items: center; min-height: 44px; padding: 0 4px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); font-weight: 800; font-size: var(--fs-15); letter-spacing: -0.03em; text-align: center; line-height: 1.2; }
.footer__nav a[aria-current="page"] { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
.footer__info { gap: 4px; }
.footer__src { font-size: var(--fs-13); line-height: 1.5; }

/* ---------- 자바스크립트가 꺼져 있으면 움직이지 않는 조작은 숨김 ---------- */
.no-js .rail__nav, .no-js .tease-card__cart { display: none; }

/* ---------- 반응형 ---------- */
@media (max-width: 359px) {
  .page-head .menuboard-btn { grid-template-columns: 92px minmax(0, 1fr); }
  .tease-card { grid-template-columns: 76px minmax(0, 1fr) 18px; gap: 10px; }
  .tease-card__art { width: 76px; transform: scale(.84); transform-origin: left center; }
  .vsum__addr { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .vsum__addr .btn { justify-self: start; }
  .footer__nav a { font-size: var(--fs-13); }
  .why4__item { padding: 12px 11px 13px; }
}
@media (min-width: 560px) {
  .mcard { flex-basis: clamp(220px, 38vw, 260px); }
  .tease__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vsum__btns { grid-template-columns: 1.4fr 1fr 1fr; }
  .vsum__btns .map-btn--route { grid-column: auto; }
  .sang--sig .sang__top { aspect-ratio: 1.15 / 1; }
}
/* 마우스로 보는 중간 폭 화면: 줄 양옆 넘김 버튼 */
@media (min-width: 560px) and (max-width: 959px) and (hover: hover) {
  .rail.is-scrollable .rail__nav { display: flex; justify-content: flex-end; gap: 8px; margin: -4px 0 10px; }
}
@media (min-width: 720px) {
  .section { padding-block: 84px; }
  .sec-head--tight { margin-bottom: 26px; }
  .page-head { padding-bottom: 46px; }
  .page-head__grid { padding-top: 30px; }
  .page-head--menu .page-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: 32px; }
  .page-head .menuboard-btn { grid-template-columns: 168px minmax(0, 1fr); }
  .page-head .menuboard-btn__img { aspect-ratio: 16 / 9; }
  .page-head .menuboard-btn__pen { font-size: 17px; padding: 1px 7px 0; }
  .trust { padding: 40px 0 34px; }
  .trust .seal--stamp { width: 64px; height: 64px; font-size: 34px; }
  .stat { display: grid; gap: 4px; padding: 14px 16px 15px; border-radius: var(--r-md); }
  .stat__num b { font-size: var(--fs-36); }
  .stat__num small { font-size: var(--fs-20); }
  .picks, .why, .reviews, .vsum { padding-block: 64px; }
  .why4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .why4__item { padding: 20px 18px; }
  .tease { padding-block: 48px; }
  .review__text p { font-size: var(--fs-17); line-height: 1.7; }
  .vsum__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
  .vsum__hours, .vsum__place { padding: 22px; }
  .final__inner { padding-top: 56px; }
  .signature { padding-block: 84px; }
  .owner { padding-block: 48px 56px; }
  .next { padding: 52px 0 56px; }
  .amen-item { padding: 12px 14px; }
  .site-footer { padding-top: 44px; }
  .footer__inner { grid-template-columns: auto minmax(0, 1fr); column-gap: 56px; row-gap: 18px; }
  .footer__brand { grid-row: span 3; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .footer__brand .signframe { padding: 14px 34px; }
  .footer__brand .signframe img { height: 42px; }
  .footer__nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .footer__nav a { padding: 0 16px; }
}
@media (min-width: 960px) {
  .page-head__grid { padding-top: 44px; }
  .page-head--menu .page-head__grid { grid-template-columns: minmax(0, 1fr) 470px; }
  .page-head .page-lead { font-size: var(--fs-20); }
  .page-head + .menu { padding-top: 48px; }
  .page-head + .builder, .page-head + .visit { padding-top: 64px; }
  /* 대표 메뉴: 3칸 두 줄 가로 카드 (밀 필요 없이 한눈에) */
  .rail__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; margin: 0; padding: 0 0 4px; scroll-snap-type: none; }
  .mcard { flex-direction: row; }
  .mcard__plate { width: 44%; height: auto; min-height: 176px; padding: 16px; }
  .mcard__plate .dish__photo { width: 100%; height: auto; max-width: 150px; }
  .mcard__body { padding: 16px 18px 16px; }
  .more-btn { justify-self: start; margin-top: 24px; min-width: 360px; }
  .picks .container { display: grid; }
  .reviews__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; }
  .kw { padding-top: 6px; }
  .kwchips { gap: 8px; }
  .kwchip { min-height: 40px; font-size: var(--fs-15); }
  .tease-card { grid-template-columns: 120px minmax(0, 1fr) 22px; min-height: 140px; padding: 16px 20px 16px 16px; gap: 20px; }
  .tease-card__art { width: 120px; height: 104px; transform: scale(1.2); }
  .tease-card__title { font-size: var(--fs-24); }
  .vsum__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
  .info__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; }
  .info__grid > .hours { grid-column: 2; grid-row: 1; }
  .info__grid > .amen { grid-column: 1; grid-row: 1; }
  .next__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; column-gap: 40px; }
  .next__title { grid-column: 1 / -1; }
  .next__cta .btn { width: auto; justify-self: start; }
  .site-footer { padding-bottom: 44px; }
}
@media (min-width: 1200px) {
  .mcard__plate { min-height: 188px; }
}

/* ---------- 같은 노랑끼리 붙는 곳: 물결 색을 위 구역 색으로 ---------- */
.pick + .next { --next-top: var(--yellow-sun); }

/* ---------- 왜 수라상: 큰 가격은 칸 폭에 맞춰 ('원부터'까지 한 줄) ---------- */
.why4__item { container-type: inline-size; }
.why4__big b { font-size: clamp(24px, 18cqi, 46px); white-space: nowrap; }

/* ---------- 휴대폰 압축 (720px 미만): 홈은 한 화면 반 정도씩 덜 내려가게 ---------- */
@media (max-width: 719px) {
  /* 히어로: 상을 조금 납작하게, 사이 간격을 줄임 */
  .hero { padding-bottom: 40px; }
  .hero__grid { gap: 18px; padding-top: 18px; }
  .hero__copy { gap: 10px; }
  .sang--hero .sang__top { aspect-ratio: 1.34 / 1; }
  .hero__stage { gap: 12px; margin-top: 2px; }

  /* 신뢰 띠: 숫자 칩 한 줄 (옆으로 밀어 보기) */
  .trust { padding: 24px 0 20px; }
  .trust__inner { gap: 12px; }
  .trust__stats {
    display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
  }
  .trust__stats::-webkit-scrollbar { display: none; }
  .stat { flex: none; scroll-snap-align: start; gap: 8px; padding: 7px 16px 7px 14px; border-radius: var(--r-pill); }
  .stat__num b { font-size: var(--fs-24); }
  .stat__num small { font-size: var(--fs-15); }
  .stat__label { white-space: nowrap; }

  .picks { padding-block: 34px 30px; }
  .mcard__plate { height: 136px; padding: 10px; }
  .mcard__body { padding: 10px 12px 12px; gap: 5px; }
  .more-btn { min-height: 56px; padding-block: 8px; }

  .why { padding-block: 34px; }
  .why4__item { padding: 12px 12px 13px; gap: 4px; }

  .reviews { padding-block: 34px; }
  .kw__title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: var(--fs-17); margin-bottom: 8px; }
  .kwchips { gap: 5px; }
  .kwchip { min-height: 32px; gap: 5px; padding: 3px 4px 3px 10px; font-size: var(--fs-13); }
  .kwchip b { min-width: 22px; height: 22px; font-size: var(--fs-13); padding: 0 5px; }
  .review { flex-basis: 88%; padding: 16px 16px 14px; }
  .review::before { font-size: 64px; right: 12px; }
  .carousel__track { padding-bottom: 14px; }
  .reviews__links { margin-top: 14px; padding: 12px 14px; gap: 8px; }
  .review-ask__pen { font-size: 24px; }

  .tease { padding-block: 28px; }
  .tease-card { min-height: 104px; }

  .vsum { padding-block: 34px; }
  .vsum__grid { gap: 12px; }
  .vsum__hours { padding: 14px; }
  .vsum__place { padding: 14px; gap: 10px; }
  .vsum__facts { gap: 6px; }
  .more-link { min-height: 40px; margin-block: -2px; }

  .final { padding-bottom: 36px; }
  .final__inner { gap: 12px; padding-top: 30px; }
  .final__logo { width: min(156px, 44vw); }
  .final__more .pill-btn { min-height: 44px; }

  /* 푸터: 로고·소개 한 줄, 페이지 버튼 한 줄, 정보는 촘촘히 */
  .site-footer { padding: 24px 0 calc(80px + env(safe-area-inset-bottom)); }
  .footer__inner { gap: 12px; }
  .footer__brand .signframe { padding: 8px 18px; }
  .footer__brand .signframe img { height: 26px; }
  .footer__info { gap: 2px; }
  .footer__info div { gap: 8px; }
  .footer__links { gap: 0 16px; }

  /* 차림표 페이지 */
  .page-chips li { padding: 5px 10px; font-size: var(--fs-13); }
  .page-chips b { font-size: var(--fs-15); }
  .menu > .container::after { height: 28px; }
  .signature { padding-block: 44px 48px; }
  .signature .sec-head { margin-bottom: 22px; }
  .sang--sig .sang__top { aspect-ratio: 1.45 / 1; }
  .sig { gap: 18px; }
  .sig__body { gap: 10px; }
  .sig + .sig { margin-top: 40px; }

  /* 상차림 · 오시는 길 */
  .page-head + .builder, .page-head + .visit { padding-top: 34px; }
  .pick { padding-block: 44px; }
  .info { padding-block: 44px; }
  .visit { padding-bottom: 44px; }
  .hours__card { padding: 22px 16px 18px; }
  .hours__title { padding-top: 12px; margin-bottom: 12px; }
  .hours__table th, .hours__table td { padding: 9px 10px; }
  /* 자리·편의: 한 장의 목록으로 (아이콘 · 이름 · 설명 한 줄) */
  .amen__list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 14px; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
  .amen-item { grid-template-columns: 34px auto minmax(0, 1fr); column-gap: 10px; padding: 9px 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px dashed var(--line-2); }
  .amen-item:last-child { border-bottom: 0; }
  .amen-item__ic { width: 34px; height: 34px; grid-row: auto; }
  .amen-item small { text-align: right; justify-self: end; }
  .amen-item--no, .amen-item--no .amen-item__txt { display: contents; }
  .amen-item--no { background: none; }
  .amen-item--no b { color: var(--red-deep); }
  .next { padding: 34px 0 38px; }
}
/* 320~359px: 자리·편의 설명은 이름 아래 줄로 */
@media (max-width: 359px) {
  .amen-item { grid-template-columns: 34px minmax(0, 1fr); }
  .amen-item__ic { grid-row: span 2; }
  .amen-item small { text-align: left; justify-self: start; }
}

/* ---------- 넓은 화면: 홈 대표 메뉴 머리 오른쪽에 '전체 차림표' ---------- */
@media (min-width: 960px) {
  .picks .container { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .picks .sec-head { grid-column: 1; grid-row: 1; }
  .picks .rail { grid-column: 1 / -1; grid-row: 2; }
  .picks .more-btn { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; margin: 0 0 26px; min-width: 340px; }
  .picks, .why, .reviews, .vsum { padding-block: 56px; }
  .vsum__hours { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
  .vsum__hours .week { margin-top: 4px; }
  .week li { padding: 12px 0 10px; }
  .week b { font-size: var(--fs-20); }
  .final { padding-bottom: 48px; }
  .final__inner { padding-top: 44px; }
}

/* 푸터 맨 끝 ©는 출처 줄 끝에 붙임 */
.footer__src .footer__copy { display: inline-block; margin-left: 4px; font-size: var(--fs-13); white-space: nowrap; }

@media (max-width: 719px) {
  .hero__facts { gap: 8px; }
  .sang--hero .sang__top { aspect-ratio: 1.4 / 1; }
  /* 리뷰 키워드: 한 줄로 옆으로 밀어 보기 (많이 고른 순) */
  .kwchips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; gap: 6px; }
  .kwchips::-webkit-scrollbar { display: none; }
  .kwchip { flex: none; scroll-snap-align: start; min-height: 36px; padding: 4px 5px 4px 12px; font-size: var(--fs-15); }
  .kwchip b { min-width: 26px; height: 26px; font-size: var(--fs-15); }
  .reviews__grid { gap: 14px; }
  /* '다녀가셨나요?' 는 문장 앞에 붙여 한 덩어리로 */
  .review-ask { display: block; }
  .review-ask__pen { display: inline-block; margin-right: 6px; font-size: 24px; line-height: 1; }
  .review-ask__text { display: inline; }
  /* 지도 버튼 셋: 들어가면 한 줄, 좁으면 두 줄 */
  .vsum__btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .vsum__btns .map-btn { flex: 1 1 auto; padding: 0 10px; min-height: 48px; }
  .vsum__btns .map-btn--route { flex-grow: 1.6; }
  .why4__pen { font-size: clamp(20px, 5.8vw, 26px); min-height: 1.15em; }
  .more-btn { min-height: 52px; }
  .final__inner { gap: 10px; }
  .final__cta, .final__more { gap: 8px; }
}
/* 가로로 미는 줄(키워드·신뢰 칩)이 칸 폭을 밀어내지 않게 */
@media (max-width: 959px) { .reviews__grid { grid-template-columns: minmax(0, 1fr); } }
.kw, .trust__inner > * { min-width: 0; }
/* 머리 띠 아래 물결이 다음 구역(상차림처럼 position 이 있는 구역)에 덮이지 않게 */
.page-head { z-index: 2; }
@media (min-width: 720px) { .menu { padding-bottom: 8px; } }
@media (max-width: 719px) {
  /* 주소 카드: '주소 복사'는 '주소' 글자 옆으로 (한 줄 아낌) */
  .addr-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label btn" "addr addr" "jibun jibun"; align-items: center; column-gap: 12px; padding: 16px 18px; }
  .addr-card__label { grid-area: label; }
  .addr-card__addr { grid-area: addr; }
  .addr-card__jibun { grid-area: jibun; margin-bottom: 0; }
  .addr-card .btn { grid-area: btn; justify-self: end; }
  .visit__info { gap: 14px; }
  .info__grid { gap: 24px; }
}
@media (max-width: 719px) { .more-link { min-height: 44px; margin-block: -4px; } }

/* 좁은 휴대폰(400px 미만): 페이지 메뉴 칸의 아이콘·여백을 줄여 이름·설명이 한 줄씩 */
@media (max-width: 399px) {
  .mnav a { gap: 6px; padding-inline: 8px; }
  .mnav__ic { width: 30px; height: 30px; }
  .mnav__ic .i { width: 19px; height: 19px; }
}
/* 320~359px: 페이지 메뉴는 한 줄에 하나 (설명까지 한 줄로) */
@media (max-width: 359px) {
  .mnav__grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mnav a { min-height: 52px; }
  .mnav__txt { display: flex; align-items: baseline; gap: 8px; }
}

/* 네이버 새 리뷰 자동 반영: 새 카드 표시 · 긴 리뷰 전체 보기 */
.badge--new { background: var(--red); color: #fff; box-shadow: none; letter-spacing: .04em; }
.review--new { outline: 2px solid var(--red); outline-offset: -2px; }
.review__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: var(--fs-15); font-weight: 700; color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }

.carousel__dots--count { justify-content: center; }
.carousel__count { font-weight: 800; font-size: var(--fs-15); color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }