/*
 * ember-table — 화면 규칙. 값은 tokens.css 의 var() 만 쓴다(raw 색 0).
 * 뼈대: lg(64rem) 이상 = 왼쪽 Ember 칸(sticky, 100svh) + 오른쪽 Table 칸(문서 스크롤).
 *       lg 미만 = 1열. Ember 칸은 숨고 그 내용이 머리 · 오늘 띠 · 홈 히어로로 흩어진다(sticky 없음).
 * 미디어 질의 안에서는 var() 를 못 쓴다 — 48rem = --breakpoint-md, 64rem = --breakpoint-lg.
 */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
}

abbr[title] {
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-ink);
  color: var(--color-surface);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--spacing-page);
  top: calc(var(--spacing) * 2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-touch);
  padding-inline: calc(var(--spacing) * 4);
  background: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* ── 글자 부품 ─────────────────────────────────────────────────────────── */

.label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--text-label--letter-spacing);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--color-char);
}

.title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
  color: var(--color-ink);
  text-wrap: balance;
}

.amp {
  color: var(--color-ember);
}

.wordmark {
  display: inline-block;
  padding-block: calc((var(--spacing-touch) - 1em) / 2);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-wordmark);
  line-height: var(--text-wordmark--line-height);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-ink);
}

.wordmark--sm {
  font-size: 1.375rem;
}

.link {
  display: inline-block;
  padding-block: calc((var(--spacing-touch) - 1.5em) / 2);
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition-property: color, text-decoration-color;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-snap);
}

.link > [aria-hidden="true"] {
  display: inline-block;
  margin-left: 0.1em;
}

@media (hover: hover) {
  .link:hover {
    color: var(--color-ember);
    text-decoration-color: var(--color-ember);
  }
}

.price {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-price);
  line-height: var(--text-price--line-height);
  color: var(--color-ink);
  white-space: nowrap;
}

.price__cur {
  font-size: 0.8em;
  color: var(--color-char);
  margin-right: 0.08em;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-touch);
  padding-inline: calc(var(--spacing) * 5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition-property: background-color, border-color, color, transform;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-snap);
}

.btn:active {
  transform: scale(0.98);
  transition-duration: 100ms;
}

.btn--primary {
  background: var(--color-ember);
  color: var(--color-on-ember);
}

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--color-ink);
  }
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: calc(var(--spacing) * 12);
  font-size: var(--text-body);
}

/* ── 영업 상태 ─────────────────────────────────────────────────────────── */

.status {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  font-weight: var(--font-weight-strong);
  color: var(--color-ink);
}

.status__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-ember);
}

.status.is-closed .status__dot {
  background: transparent;
  border: 1.5px solid var(--color-line);
}

/* ── 뼈대 ─────────────────────────────────────────────────────────────── */

.col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.wrap {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--container-table) + 2 * var(--spacing-page));
  padding-inline: max(var(--spacing-page), env(safe-area-inset-left)) max(var(--spacing-page), env(safe-area-inset-right));
  padding-bottom: var(--spacing-block);
}

/* Ember 칸 — lg 이상에서만 선다 */
.ember {
  display: none;
}

@media (min-width: 64rem) {
  .frame {
    display: grid;
    grid-template-columns: var(--spacing-sidebar) minmax(0, 1fr);
    align-items: start;
  }

  .ember {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    padding: var(--spacing-sidebar-pad);
    padding-top: calc(var(--spacing-sidebar-pad) - var(--spacing) * 2);
    border-right: 1px solid var(--color-rule);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    view-transition-name: ember;
  }
}

.ember__nav ul {
  display: flex;
  flex-direction: column;
}

.ember__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--spacing) * 9);
  font-weight: var(--font-weight-medium);
  transition: color var(--default-transition-duration) var(--ease-snap);
}

.ember__nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--spacing) * -4.5);
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: var(--radius-full);
  background: var(--color-ember);
}

@media (hover: hover) {
  .ember__nav a:hover,
  .wordmark:hover {
    color: var(--color-ember);
  }
}

.tonight {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 5);
  border-top: 1px solid var(--color-rule);
}

.tonight__addr {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
  margin-bottom: calc(var(--spacing) * 2);
}

.hearth {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 3);
}

.ember__note {
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

/* 낮은 화면 — 간격을 줄여 불꽃이 최소 200px 을 지킨다. 그래도 모자라면 칸 안에서만 스크롤한다 */
@media (min-width: 64rem) and (max-height: 50rem) {
  .ember {
    gap: calc(var(--spacing) * 4);
  }

  .ember__nav a {
    min-height: calc(var(--spacing) * 8);
  }

  .tonight {
    padding-top: calc(var(--spacing) * 4);
  }
}

/* ── 괘선 불꽃 ─────────────────────────────────────────────────────────
 * 줄 하나 = <i>(자리·폭·긋기 Reveal) + ::before(색 막대·숨 Loop). 두 transform 이 겹치지 않게 층을 나눴다.
 * --w 폭 % · --x 중심 이동 % · --n 위에서부터 번호 · --o 연기 불투명 · --t 줄 수(긋기는 아래부터) */

.flame {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 420px;
}

.flame__lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flame i {
  position: relative;
  display: block;
  height: 3px;
  width: calc(var(--w, 100) * 1%);
  margin-inline: auto;
  left: calc(var(--x, 0) * 1%);
}

.flame i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xs);
  background: var(--c, var(--color-ember));
  opacity: var(--o, 1);
  transform-origin: center;
  animation: var(--animate-breathe);
  animation-delay: calc(var(--n) * -0.27s);
}

/* 줄마다 숨 길이를 달리한다(3.2–4.4s) — 한 박자로 맞춰 숨 쉬면 기계처럼 보인다 */
.flame__lines i:nth-child(3n + 1)::before {
  animation-duration: 3.4s;
}

.flame__lines i:nth-child(3n + 2)::before {
  animation-duration: 4.1s;
}

.flame__lines i:nth-child(4n)::before {
  animation-duration: 3.2s;
}

.flame__lines i:nth-child(5n)::before {
  animation-duration: 4.4s;
}

.flame .s {
  --c: var(--color-char);
  --breathe-from: 0.86;
  --breathe-to: 1.1;
}

.flame .f {
  --c: var(--color-flame);
}

.flame .e {
  --c: var(--color-ember);
}

.flame .k {
  --c: var(--color-ink);
  --breathe-from: 0.98;
  --breathe-to: 1.01;
}

.flame__hearth {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

.flame__hearth i {
  --c: var(--color-line);
  height: 4px;
}

.flame__hearth i::before {
  animation: none;
  border-radius: 0;
}

html.kindle .flame i {
  animation: var(--animate-kindle);
  animation-delay: calc((var(--t) - var(--n)) * 24ms);
}

/* lg 미만 홈 띠 — 같은 윤곽을 줄여 가운데에 */
.flame--band {
  width: 70%;
  height: 200px;
  min-height: 0;
  margin: calc(var(--spacing) * 8) auto 0;
  gap: calc(var(--spacing) * 3);
}

.flame--band i {
  height: 2px;
}

.flame--band .flame__hearth i {
  height: 3px;
}

/* 태블릿(1열, 넓은 폭) — 띠와 버튼을 한 폭으로 묶어 왼쪽에 둔다. 넓게 퍼지면 불꽃이 아니라 무더기로 보인다 */
@media (min-width: 48rem) {
  .hero__today {
    max-width: 22rem;
  }

  .flame--band {
    width: 100%;
    margin-inline: 0;
  }
}

/* ── lg 미만 머리 · 오늘 띠 ───────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-nav-sm);
  padding-top: env(safe-area-inset-top);
  padding-inline: max(var(--spacing-page), env(safe-area-inset-left)) max(var(--spacing-page), env(safe-area-inset-right));
  border-bottom: 1px solid var(--color-rule);
  view-transition-name: bar;
}

.bar__nav ul {
  display: flex;
  margin-right: calc(var(--spacing) * -2);
}

.bar__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-touch);
  min-width: var(--spacing-touch);
  padding-inline: calc(var(--spacing) * 2);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.bar__nav a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-color: var(--color-ember);
}

.today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-inline: max(var(--spacing-page), env(safe-area-inset-left)) max(var(--spacing-page), env(safe-area-inset-right));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
  font-size: 0.9375rem;
}

.today__book {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: var(--spacing-touch);
  font-weight: var(--font-weight-medium);
  color: var(--color-ember);
  white-space: nowrap;
}

/* ── 블록 공통 ─────────────────────────────────────────────────────────── */

.block {
  margin-top: var(--spacing-block);
}

.block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-ink);
}

.block__date::before {
  content: "·";
  margin-right: calc(var(--spacing) * 2);
}

@media (width < 48rem) {
  .block__date {
    flex-basis: 100%;
  }

  .block__date::before {
    content: none;
  }
}

.block__more {
  margin-top: calc(var(--spacing) * 3);
}

.band {
  margin-top: var(--spacing-block);
  margin-inline: calc(var(--spacing-page) * -1);
  padding: calc(var(--spacing) * 10) var(--spacing-page);
  background: var(--color-surface);
}

/* ── 히어로 (홈) ───────────────────────────────────────────────────────── */

.hero {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.75rem, 6svh, 4.5rem);
}

/* 눈썹 — 자간 넓힌 대문자 칩 대신 인쇄물의 날짜줄처럼 보통 글자로(제목 위 장식 칩으로 읽히지 않게) */
.hero__eyebrow {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-char);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  /* 토큰의 vw 는 뷰포트 기준이라 Ember 칸 옆에서는 넘칠 수 있다 — 칸 폭(cqi)으로 한 번 더 막는다.
     실측(1440): "Cooked over" = 665px / 108px ≈ 6.16em → 15cqi 면 칸의 92% 에서 멈춘다 */
  font-size: min(var(--text-hero), 15cqi);
  line-height: var(--text-hero--line-height);
  letter-spacing: var(--text-hero--letter-spacing);
}

.hero__line {
  display: block;
  white-space: nowrap;
}

.hero__fire {
  color: var(--color-ember);
}

.hero__lede {
  max-width: var(--container-lede);
  margin-top: calc(var(--spacing) * 6);
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
  text-wrap: pretty;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 3);
}

.hero__sep {
  color: var(--color-char);
}

.hero__today {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  margin-top: calc(var(--spacing) * 6);
}

.hero__addr {
  font-size: var(--text-small);
  color: var(--color-char);
  margin-bottom: calc(var(--spacing) * 3);
}

@media (width < 64rem) {
  .hero__eyebrow {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .hero__lede {
    margin-top: calc(var(--spacing) * 4);
  }

  /* 모바일: 활자 → 오늘 → 불꽃 → 메타 줄 */
  .hero__meta {
    order: 5;
    margin-top: calc(var(--spacing) * 4);
  }
}

.block--first {
  margin-top: calc(var(--spacing) * 12);
}

@media (width < 64rem) {
  .block--first {
    margin-top: var(--spacing-block);
  }
}

/* ── 요리 행 — 카드 없음, 괘선 행 ──────────────────────────────────────── */

.dishes {
  container-type: inline-size;
}

.dish {
  display: grid;
  /* 좁은 폭: 이름·가격 한 줄, 글리프·표기(고정 폭 — 설명 열이 세로로 맞는다)·설명 한 줄 */
  grid-template-columns: calc(var(--spacing) * 15) minmax(0, 1fr) auto;
  grid-template-areas:
    "name name price"
    "meta desc desc";
  column-gap: calc(var(--spacing) * 4);
  row-gap: calc(var(--spacing) * 1);
  padding-block: var(--spacing-row);
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--default-transition-duration) var(--ease-snap);
}

.dish__name {
  grid-area: name;
  font-weight: var(--font-weight-strong);
  font-size: var(--text-dish);
  line-height: var(--text-dish--line-height);
  transition: color var(--default-transition-duration) var(--ease-snap);
}

.dish__for {
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-ember);
  margin-right: calc(var(--spacing) * 1);
}

.dish__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 1.3em;
}

.dish__desc {
  grid-area: desc;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

.dish .price {
  grid-area: price;
  text-align: right;
  transition: color var(--default-transition-duration) var(--ease-snap);
}

.dish--drink {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "desc desc";
}

@container (min-width: 36rem) {
  .dish {
    grid-template-columns: 3fr 1fr 3fr 1fr;
    grid-template-areas: "name meta desc price";
    align-items: baseline;
    column-gap: var(--spacing-gutter);
  }

  .dish--drink {
    grid-template-columns: 3fr 4fr 1fr;
    grid-template-areas: "name desc price";
  }

  .dish__meta {
    align-self: center;
  }
}

@media (hover: hover) {
  .dish:hover {
    border-bottom-color: var(--color-ember);
  }

  .dish:hover .heat {
    --lit: var(--color-flame);
  }
}

/* 필터에 안 맞는 행 — 불투명도가 아니라 탄 색으로 낮춘다(AA 5.82:1 유지). 지우지 않는다 */
.dish.is-off .dish__name,
.dish.is-off .price {
  color: var(--color-char);
  font-weight: var(--font-weight-body);
}

.dish.is-off .heat {
  --lit: var(--color-line);
}

.dish.is-match .tag {
  color: var(--color-ember);
}

.tag {
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-strong);
  color: var(--color-char);
  cursor: help;
  transition: color var(--default-transition-duration) var(--ease-snap);
}

/* 불 세기 글리프 — 막대 4개, 위가 좁다(불꽃 축소판). 켜진 개수 = 세기, 아래부터 켠다 */
.heat {
  --lit: var(--color-ember);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 12px;
  flex: none;
}

.heat i {
  display: block;
  height: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-rule);
  transition: background-color var(--default-transition-duration) var(--ease-snap);
}

.heat i:nth-child(1) {
  width: 6px;
}

.heat i:nth-child(2) {
  width: 8px;
}

.heat i:nth-child(3) {
  width: 10px;
}

.heat i:nth-child(4) {
  width: 12px;
}

.heat[data-heat="4"] i,
.heat[data-heat="3"] i:nth-child(n + 2),
.heat[data-heat="2"] i:nth-child(n + 3),
.heat[data-heat="1"] i:nth-child(4) {
  background: var(--lit);
}

/* ── 코스 행 ───────────────────────────────────────────────────────────── */

.courses {
  container-type: inline-size;
}

.courses li {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 12) minmax(0, 1fr);
  grid-template-areas:
    "num dish"
    "num desc";
  column-gap: calc(var(--spacing) * 3);
  padding-block: var(--spacing-row);
  border-bottom: 1px solid var(--color-rule);
}

.courses__num {
  grid-area: num;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading);
  line-height: var(--text-heading--line-height);
  color: var(--color-char);
}

.courses__dish {
  grid-area: dish;
  font-weight: var(--font-weight-strong);
  font-size: var(--text-dish);
  line-height: var(--text-dish--line-height);
}

.courses__desc {
  grid-area: desc;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

@container (min-width: 32rem) {
  .courses li {
    grid-template-columns: calc(var(--spacing) * 14) minmax(0, 3fr) minmax(0, 4fr);
    grid-template-areas: "num dish desc";
    align-items: baseline;
  }
}

/* ── 홈 H3 The Fire Menu ───────────────────────────────────────────────── */

.fire {
  display: grid;
  gap: calc(var(--spacing) * 6) var(--spacing-gutter);
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-ink);
}

.fire__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}

.fire__sub {
  color: var(--color-char);
  max-width: 24rem;
}

.fire__sub strong {
  font-weight: var(--font-weight-strong);
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .fire {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .fire__head {
    grid-column: span 3;
  }

  .fire .courses {
    grid-column: span 5;
    border-top: 1px solid var(--color-rule);
  }
}

/* ── 영업시간 표 ───────────────────────────────────────────────────────── */

.hours {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.hours th,
.hours td {
  padding-block: calc(var(--spacing) * 2.5);
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  font-weight: var(--font-weight-body);
  vertical-align: baseline;
}

.hours tbody th {
  position: relative;
  color: var(--color-char);
  padding-left: calc(var(--spacing) * 4);
}

.hours td:last-child {
  text-align: right;
}

.hours tr.is-closed td {
  color: var(--color-char);
}

.hours tr.is-today th,
.hours tr.is-today td {
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.hours tr.is-today th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: var(--radius-full);
  background: var(--color-ember);
}

.hours thead th {
  padding-top: 0;
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-char);
  border-bottom-color: var(--color-ink);
}

.hours thead th:first-child {
  padding-left: calc(var(--spacing) * 4);
}

.hours--full td:nth-child(2) {
  text-align: left;
}

.hours__note {
  font-size: var(--text-small);
  color: var(--color-char);
}

.hours tr.is-today .hours__note {
  font-weight: var(--font-weight-body);
  color: var(--color-char);
}

.where__small {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

/* ── 홈 H4 Hours & where ───────────────────────────────────────────────── */

.where__grid {
  display: grid;
  gap: calc(var(--spacing) * 10) var(--spacing-gutter);
}

.where__map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
}

.where__addr {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-small);
  color: var(--color-char);
}

@media (min-width: 48rem) {
  .where__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .where__hours .hours tbody tr:first-child th,
  .where__hours .hours tbody tr:first-child td {
    padding-top: 0;
  }
}

/* ── CSS 지도 — 이미지 아님 ─────────────────────────────────────────────── */

.map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  isolation: isolate;
}

@media (min-width: 64rem) {
  .map--wide {
    aspect-ratio: 16 / 9;
  }
}

/* 강 — 큰 타원의 윗변만 굵게 남겨 곡선 띠를 만든다 */
.map__river {
  position: absolute;
  left: -30%;
  top: 58%;
  width: 160%;
  height: 120%;
  border-radius: 50%;
  border-top: clamp(14px, 4.2cqi, 26px) solid color-mix(in srgb, var(--color-char) 22%, transparent);
  transform: rotate(-4deg);
}

.map__green {
  position: absolute;
  left: 8%;
  top: 64%;
  width: 24%;
  height: 22%;
  border: 1px solid var(--color-rule);
  background: repeating-linear-gradient(-45deg, var(--color-rule) 0 1px, transparent 1px 7px);
  transform: rotate(-4deg);
}

.map__st {
  position: absolute;
  height: 1px;
  background: var(--color-line);
  transform-origin: left center;
}

.map__st--tannery {
  left: -5%;
  top: 38%;
  width: 115%;
  transform: rotate(-3deg);
}

.map__st--mill {
  left: 58%;
  top: -5%;
  width: 120%;
  transform: rotate(84deg);
}

.map__st--church {
  left: 22%;
  top: -5%;
  width: 60%;
  transform: rotate(78deg);
}

.map__st--river-rd {
  left: -5%;
  top: 56%;
  width: 115%;
  transform: rotate(-5deg);
}

.map__st--north {
  left: -5%;
  top: 16%;
  width: 115%;
  transform: rotate(-2deg);
}

/* 가게 — 잉걸불 점 + 동심원 둘 */
.map__pin {
  position: absolute;
  left: 72%;
  top: 33.5%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--radius-full);
  background: var(--color-ember);
}

.map__pin::before,
.map__pin::after,
.map__pin span {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-ember);
  transform: translate(-50%, -50%);
}

.map__pin::before {
  width: 28px;
  height: 28px;
}

.map__pin::after {
  width: 48px;
  height: 48px;
  border-color: color-mix(in srgb, var(--color-ember) 45%, transparent);
}

.map__pin span {
  display: none;
}

.map__lbl {
  position: absolute;
  font-size: var(--text-label);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-char);
  white-space: nowrap;
}

.map__lbl--tannery {
  left: 6%;
  top: 30%;
  transform: rotate(-3deg);
}

.map__lbl--mill {
  left: 61%;
  top: 70%;
  transform: rotate(84deg);
  transform-origin: left top;
}

.map__lbl--river {
  left: 36%;
  top: 78%;
  font-style: italic;
  transform: rotate(-3deg);
}

.map__lbl--green {
  left: 11%;
  top: 72%;
  transform: rotate(-4deg);
}

.map__lbl--shop {
  left: 72%;
  top: calc(33.5% - 44px);
  padding: 2px 4px;
  background: var(--color-surface);
  transform: translateX(-50%);
  font-weight: var(--font-weight-strong);
  color: var(--color-ink);
}

/* ── 예약 맛보기 · 예약 위젯 공통 ───────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}

.chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-touch);
  min-width: calc(var(--spacing) * 16);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition-property: background-color, border-color, color, transform;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-snap);
}

@media (hover: hover) {
  .chip:not(:disabled):hover {
    border-color: var(--color-ember);
    color: var(--color-ember);
  }
}

.chip:not(:disabled):active {
  transform: scale(0.98);
  transition-duration: 100ms;
}

.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
  background: var(--color-ember);
  border-color: var(--color-ember);
  color: var(--color-on-ember);
}

.chip:disabled {
  border-style: dashed;
  border-color: var(--color-rule);
  color: var(--color-char);
  cursor: not-allowed;
}

.chip__sub {
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}

.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-touch);
  height: var(--spacing-touch);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition-property: border-color, color, transform;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-snap);
}

@media (hover: hover) {
  .stepper__btn:not(:disabled):hover {
    border-color: var(--color-ember);
    color: var(--color-ember);
  }
}

.stepper__btn:not(:disabled):active {
  transform: scale(0.96);
  transition-duration: 100ms;
}

.stepper__btn:disabled {
  border-style: dashed;
  border-color: var(--color-rule);
  color: var(--color-char);
  cursor: not-allowed;
}

.stepper__val {
  display: inline-block;
  min-width: 2ch;
  overflow: hidden;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 1.75rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stepper__num {
  display: inline-block;
}

/* 숫자 바뀜 — 방향 있는 전환: + 는 아래에서, − 는 위에서 */
@keyframes count-up {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
}

@keyframes count-down {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
}

.stepper__num.is-up {
  animation: count-up 160ms var(--ease-snap);
}

.stepper__num.is-down {
  animation: count-down 160ms var(--ease-snap);
}

/* 홈 H5 맛보기 */
.teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
}

.teaser__when {
  color: var(--color-char);
}

.teaser__fallback {
  margin-top: calc(var(--spacing) * 4);
}

.teaser__row {
  display: grid;
  gap: calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 6);
  padding-top: calc(var(--spacing) * 6);
  border-top: 1px solid var(--color-rule);
}

.teaser__row[hidden] {
  display: none;
}

.teaser__guests,
.teaser__times {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}

.teaser__times .chips {
  flex-wrap: nowrap;
}

.teaser__times .chip {
  flex: 1 1 0;
  min-width: 0;
}

.teaser__note {
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-small);
  color: var(--color-char);
}

@media (min-width: 48rem) {
  .teaser__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    column-gap: calc(var(--spacing) * 10);
  }

  .teaser__times .chip {
    flex: 0 0 auto;
    min-width: calc(var(--spacing) * 18);
  }
}

/* ── 홈 H6 이야기 발췌 ─────────────────────────────────────────────────── */

.excerpt__quote {
  max-width: 44rem;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-title);
  /* 세 줄짜리 인용 — 토큰(1.12)은 한두 줄 제목 기준이다. 넓은 Syne 세 줄을 읽히게 1.34 */
  line-height: 1.34;
  letter-spacing: var(--text-title--letter-spacing);
  text-wrap: balance;
}

.excerpt__quote p {
  text-indent: -0.4em;
}

.excerpt__by {
  margin-top: calc(var(--spacing) * 5);
  font-size: var(--text-small);
  color: var(--color-char);
}

.excerpt .link {
  margin-top: calc(var(--spacing) * 2);
}

/* ── 안쪽 페이지 머리 ───────────────────────────────────────────────────── */

.phead {
  padding-top: clamp(2rem, 7svh, 5rem);
}

.phead__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  text-wrap: balance;
}

.phead__lede {
  max-width: var(--container-prose);
  margin-top: calc(var(--spacing) * 5);
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
  text-wrap: pretty;
}

.phead__line {
  max-width: 40rem;
  margin-top: calc(var(--spacing) * 6);
}

.phead__small {
  margin-top: calc(var(--spacing) * 3);
  font-size: var(--text-small);
  color: var(--color-char);
}

/* ── 메뉴 ─────────────────────────────────────────────────────────────── */

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  color: var(--color-char);
}

.legend__heat {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
}

.legend__heat li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-variant-numeric: tabular-nums;
}

.legend__heat b {
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}

.legend__tags .tag {
  margin-left: calc(var(--spacing) * 2);
}

.legend__tags .tag:first-child {
  margin-left: 0;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 4);
}

.filters[hidden] {
  display: none;
}

.filters__btns {
  display: flex;
  gap: calc(var(--spacing) * 2);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-touch);
  padding-inline: calc(var(--spacing) * 3.5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  touch-action: manipulation;
  transition-property: border-color, color, transform;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-snap);
}

.toggle::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 1px;
  transition: background-color var(--default-transition-duration) var(--ease-snap);
}

.toggle[aria-pressed="true"] {
  border-color: var(--color-ember);
  color: var(--color-ember);
}

.toggle[aria-pressed="true"]::before {
  background: var(--color-ember);
}

.toggle:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .toggle:hover {
    border-color: var(--color-ember);
  }
}

.filters__count {
  font-size: var(--text-small);
  color: var(--color-char);
  font-variant-numeric: tabular-nums;
}

/* 구획 색인 — lg 이상에서만 sticky(옆에 Ember 칸이 있다) */
.mindex {
  margin-top: calc(var(--spacing) * 8);
  margin-inline: calc(var(--spacing-page) * -1);
  padding-inline: var(--spacing-page);
  background: var(--color-bg);
  border-block: 1px solid var(--color-rule);
}

.mindex ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--spacing) * 5);
}

.mindex a {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 3);
  min-height: var(--spacing-touch);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-char);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
  transition-property: color, text-decoration-color;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--ease-snap);
}

.mindex__n {
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
}

.mindex a[aria-current] {
  color: var(--color-ink);
  text-decoration-color: var(--color-ember);
}

@media (hover: hover) {
  .mindex a:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-rule);
  }
}

@media (min-width: 64rem) {
  .mindex {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .msec {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
}

.msec {
  margin-top: calc(var(--spacing-block) / 2);
}

.msec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 2);
  border-top: 1px solid var(--color-ink);
}

.msec__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading);
  line-height: var(--text-heading--line-height);
}

.msec__count {
  font-size: var(--text-small);
  color: var(--color-char);
  font-variant-numeric: tabular-nums;
}

.course__terms {
  padding-bottom: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-char);
  font-size: var(--text-small);
}

.course__price {
  font-weight: var(--font-weight-strong);
  color: var(--color-ink);
}

.course__price .price {
  font-weight: var(--font-weight-strong);
}

.msec--season {
  padding-top: calc(var(--spacing) * 6);
  padding-bottom: calc(var(--spacing) * 8);
}

.season__only {
  margin-bottom: calc(var(--spacing) * 1);
  color: var(--color-ember);
}

.pair {
  display: grid;
  column-gap: calc(var(--spacing-gutter) * 2);
}

@media (min-width: 64rem) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pair--drinks {
  row-gap: calc(var(--spacing) * 6);
}

@media (min-width: 48rem) {
  .pair--drinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.drinks__h {
  padding-top: calc(var(--spacing) * 5);
  padding-bottom: calc(var(--spacing) * 1);
}

.mnotes {
  display: grid;
  gap: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 12);
  max-width: 34rem;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
  padding-block: calc(var(--spacing) * 8);
}

.strip__text {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading);
  line-height: 1.35;
  max-width: 30rem;
  text-wrap: balance;
}

/* ── 이야기 ───────────────────────────────────────────────────────────── */

.chapters {
  margin-top: var(--spacing-block);
}

.chapter {
  display: grid;
  gap: calc(var(--spacing) * 4) var(--spacing-gutter);
  padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 12);
  border-top: 1px solid var(--color-ink);
}

.chapter__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 4);
}

.chapter__n {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading);
  line-height: var(--text-heading--line-height);
  color: var(--color-ember);
  font-variant-numeric: tabular-nums;
}

.chapter__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--text-title--letter-spacing);
}

.chapter__body {
  display: grid;
  gap: calc(var(--spacing) * 4);
  max-width: var(--container-prose);
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .chapter {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .chapter__head {
    grid-column: span 3;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }

  .chapter__body {
    grid-column: span 5;
  }
}

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger div {
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4) calc(var(--spacing) * 5) 0;
  border-bottom: 1px solid var(--color-rule);
}

.ledger div:nth-child(odd) {
  border-right: 1px solid var(--color-rule);
}

.ledger div:nth-child(even) {
  padding-left: calc(var(--spacing) * 4);
}

.ledger dt {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-numeral);
  line-height: var(--text-numeral--line-height);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger dd {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

@media (min-width: 48rem) {
  .ledger {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ledger div,
  .ledger div:nth-child(even) {
    padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4);
    border-bottom: 0;
    border-right: 1px solid var(--color-rule);
  }

  .ledger div:first-child {
    padding-left: 0;
  }

  .ledger div:last-child {
    border-right: 0;
  }
}

.people__list li {
  display: grid;
  gap: calc(var(--spacing) * 1) var(--spacing-gutter);
  padding-block: var(--spacing-row);
  border-bottom: 1px solid var(--color-rule);
}

.people__name {
  font-weight: var(--font-weight-strong);
}

.people__role {
  color: var(--color-ember);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
}

.people__note {
  font-size: var(--text-small);
  color: var(--color-char);
}

@media (min-width: 48rem) {
  .people__list li {
    grid-template-columns: 3fr 2fr 5fr;
    align-items: baseline;
  }
}

/* 고지 상자 — 사방 1px, 왼쪽 색띠 없음 */
.notice {
  display: grid;
  gap: calc(var(--spacing) * 3);
  justify-items: start;
  max-width: 44rem;
  padding: calc(var(--spacing) * 8);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.notice__lead {
  font-weight: var(--font-weight-strong);
  font-size: var(--text-lede);
  line-height: var(--text-lede--line-height);
}

.notice p:not(.label):not(.notice__lead) {
  color: var(--color-char);
}

.next {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--spacing) * 8);
  margin-top: calc(var(--spacing) * 12);
}

/* ── 예약 · 오시는 길 ───────────────────────────────────────────────────── */

.book {
  display: grid;
  gap: calc(var(--spacing) * 8) var(--spacing-gutter);
  margin-top: calc(var(--spacing) * 12);
  scroll-margin-top: calc(var(--spacing) * 4);
}

.book__panel {
  min-width: 0;
  padding: calc(var(--spacing) * 8);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.book__fallback {
  margin-top: calc(var(--spacing) * 4);
}

.book__widget {
  display: grid;
  gap: calc(var(--spacing) * 7);
  margin-top: calc(var(--spacing) * 6);
}

.book__widget[hidden] {
  display: none;
}

.step {
  display: grid;
  gap: calc(var(--spacing) * 3);
  min-width: 0;
}

.step__label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-char);
}

.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: 0;
  color: var(--color-ink);
}

/* 날짜 — 가로 스크롤, 모바일은 스냅 */
.dates {
  display: flex;
  gap: calc(var(--spacing) * 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding: 4px 4px calc(var(--spacing) * 2);
  margin: -4px;
}

.dates .chip {
  flex: none;
  width: 60px;
  min-width: 0;
  height: 64px;
  padding-inline: 0;
  scroll-snap-align: start;
}

.chip__day {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 1.25rem;
  line-height: 1.1;
}

.step__guests {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
}

.step__hint {
  font-size: var(--text-small);
  color: var(--color-char);
}

.step__hint.is-max {
  color: var(--color-ember);
  font-weight: var(--font-weight-medium);
}

.book__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 5);
  border-top: 1px solid var(--color-rule);
}

.book__summary {
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
}

.book__summary.is-fresh,
.book__result.is-fresh {
  animation: fade-in 120ms linear;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.book__result {
  font-size: var(--text-small);
  color: var(--color-ember);
  font-weight: var(--font-weight-medium);
  min-height: 1.5em;
  margin-top: calc(var(--spacing) * -4);
}

.book__know {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-char);
}

.book__know ul {
  margin-top: calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-rule);
}

.book__know li {
  padding-block: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-rule);
}

@media (min-width: 64rem) {
  .book {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: start;
  }

  .book__panel {
    grid-column: span 6;
  }

  .book__know {
    grid-column: span 2;
  }
}

@media (width < 48rem) {
  .book__panel {
    margin-inline: calc(var(--spacing-page) * -1);
    padding: calc(var(--spacing) * 6) var(--spacing-page);
    border-radius: 0;
  }

  .book__sum .btn {
    width: 100%;
  }
}

.directions__grid {
  display: grid;
  gap: calc(var(--spacing) * 6) var(--spacing-gutter);
}

.directions__street {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading);
  line-height: 1.35;
}

.directions__phone {
  margin-top: calc(var(--spacing) * 2);
  color: var(--color-char);
  font-variant-numeric: tabular-nums;
}

.map__cap {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-small);
  color: var(--color-char);
}

.ways {
  display: grid;
  border-top: 1px solid var(--color-rule);
}

.ways div {
  display: grid;
  gap: calc(var(--spacing) * 1) var(--spacing-gutter);
  padding-block: var(--spacing-row);
  border-bottom: 1px solid var(--color-rule);
}

.ways dt {
  font-weight: var(--font-weight-strong);
}

.ways dd {
  color: var(--color-char);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

@media (min-width: 48rem) {
  .directions__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .directions__addr {
    grid-column: span 3;
  }

  .directions__map {
    grid-column: span 5;
  }

  .ways {
    grid-column: 1 / -1;
  }

  .ways div {
    grid-template-columns: 3fr 5fr;
    align-items: baseline;
  }
}

.contact__grid {
  display: grid;
  gap: calc(var(--spacing) * 3) var(--spacing-gutter);
  font-variant-numeric: tabular-nums;
}

.contact__k {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--text-label--letter-spacing);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-char);
  margin-bottom: calc(var(--spacing) * 1);
}

.contact__groups {
  color: var(--color-char);
  max-width: 34rem;
}

@media (min-width: 48rem) {
  .contact__grid {
    grid-template-columns: 3fr 3fr;
  }

  .contact__groups {
    grid-column: 1 / -1;
  }
}

/* ── 꼬리 ─────────────────────────────────────────────────────────────── */

.foot {
  padding: calc(var(--spacing) * 10) max(var(--spacing-page), env(safe-area-inset-right)) max(calc(var(--spacing) * 6), env(safe-area-inset-bottom)) max(var(--spacing-page), env(safe-area-inset-left));
  background: var(--color-surface);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.foot__cols {
  display: grid;
  gap: calc(var(--spacing) * 5) var(--spacing-gutter);
  font-variant-numeric: tabular-nums;
}

.foot__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-heading);
  line-height: var(--text-heading--line-height);
  margin-bottom: calc(var(--spacing) * 1);
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-rule);
}

.foot__notice {
  color: var(--color-char);
  padding-block: calc(var(--spacing) * 2.5);
}

@media (min-width: 48rem) {
  .foot__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── lg 이상에서 숨는 것 — 기본 규칙들 뒤에 둔다(같은 명시도라 순서가 이긴다) ── */

@media (min-width: 64rem) {
  .bar,
  .today,
  .hero__today {
    display: none;
  }
}

/* ── 모션 ─────────────────────────────────────────────────────────────── */

/* Scroll reveal — 한 번. 움직임을 원할 때만 숨겨 둔다(JS 가 없거나 동작 줄이기면 처음부터 보인다) */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.is-in),
  html.js .reveal-list:not(.is-in) > * {
    opacity: 0;
  }

  html.js .reveal.is-in {
    animation: var(--animate-rise);
  }

  html.js .reveal-list.is-in > * {
    animation: var(--animate-rise);
  }

  html.js .reveal-list.is-in > :nth-child(2) {
    animation-delay: 60ms;
  }

  html.js .reveal-list.is-in > :nth-child(3) {
    animation-delay: 120ms;
  }

  html.js .reveal-list.is-in > :nth-child(4) {
    animation-delay: 180ms;
  }

  html.js .reveal-list.is-in > :nth-child(5) {
    animation-delay: 240ms;
  }

  html.js .reveal-list.is-in > :nth-child(n + 6) {
    animation-delay: 300ms;
  }

  /* 페이지 사이 — Ember 칸은 제자리에 서 있고 Table 칸만 겹쳐 바뀐다 */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
  }
}

/* 동작 줄이기 — 도는 것 0(토큰이 불꽃·긋기·들어오기를 이미 끈다). 여기는 나머지의 안전망 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}