/* 안옥 견본 3판 — 시안 가 「한지 메뉴판」 결 (대표님 선택 2026-10-31)
   가게 메뉴판 실물: 민무늬 연회색 종이 · 위에서 내려오는 먹색 띠와 흰 로고 · 먹색 붓 글씨 이름표 뒤로 가는 선 ·
   이름은 왼쪽, 값은 오른쪽 명조 숫자. 색은 가게 사진에서 기계로 뽑은 실물 색 10개(뽑은 자리 = ../README.md).
   그림자 없음, 아이콘 없음, 둥근 카드 없음. 구역마다 짜임과 간격을 다르게 둔다.
   움직임 = 계획 33 §3 일곱 가지만(3단계 2026-11-01 · 맨 끝 블록) — 기본 CSS 가 끝 모양이고, 시작 상태는 움직임 줄이기가 꺼진 화면에서만 건다. */
@font-face {
  font-family: "Song Myung Anok";            /* Song Myung(OFL)을 쓰인 글자만 잘라 이름을 바꾼 판 — fonts.py */
  src: url("../fonts/songmyung-anok.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anok Myeongjo";              /* Nanum Myeongjo(OFL)를 잘라 낸 판 — OFL 예약 이름 「Nanum」을 쓰지 않는다 */
  src: url("../fonts/anok-myeongjo.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  /* 사진에서 뽑은 실물 색 */
  --anok-wall: #F5E6D7;       /* 햇빛 받은 흙벽 */
  --anok-wall-2: #EFDECE;     /* 밝은 흙벽 */
  --anok-wall-shade: #D7C4B2; /* 그늘진 흙벽 */
  --anok-maru: #89550D;       /* 등불 아래 툇마루 */
  --anok-giwa: #333F59;       /* 기와 */
  --anok-lamp: #CC8420;       /* 등불 빛 받은 벽 — 글자에 쓰지 않는다(대비 2.5) · 선·면만 */
  --anok-gravel: #7D879A;     /* 자갈 — 글자에 쓰지 않는다(대비 3.0) · 선·면만 */
  --anok-gate: #493026;       /* 대문 나무 */
  --anok-menu-paper: #EFEFEF; /* 메뉴판 종이 */
  --anok-menu-ink: #3D393A;   /* 메뉴판 띠 먹 */

  --paper: var(--anok-menu-paper);
  --ink: var(--anok-menu-ink);
  --ink-2: #57514F;           /* 먹을 흙빛으로 옅게 — 종이 6.8 · 흙벽 6.4 · 그늘 흙벽 4.6 */
  --line: #C8C7C7;
  --dot: #A9A6A6;             /* 메뉴 점선 */
  --accent: var(--anok-maru);
  --ask: #8A2E1F;             /* 「가게 확인」·견본 띠 — 2판 그대로 */

  /* 글꼴 — fonts.py 의 선택자와 같게 맞춘다 (제목 = 송명 · 값과 이름 = 명조) */
  --title: "Song Myung Anok", "Noto Serif KR", serif;
  --title-w: 400;
  --myeongjo: "Anok Myeongjo", "Noto Serif KR", serif;
  --my-w: 400;
  /* 읽는 글(소개 문장·답 문장·질문) — 나눔명조 보통 굵기는 긴 글에서 획이 가늘어 2판보다 옅게 읽힌다(10/31 나란히 비교) → Noto Serif KR · 질문과 답은 600 */
  --read: "Noto Serif KR", serif;
  --read-w: 600;
  --price: "Anok Myeongjo", "Noto Serif KR", serif;
  --sans: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kr: "Noto Sans KR", sans-serif;
  --wrap: 1180px;
  --edge: max(16px, calc((100% - var(--wrap)) / 2));
}
html[lang="en"] {
  /* 송명은 한글용 붓 글꼴이라 로마자 획이 가늘다 — 영어 제목은 일본어·중국어 쪽처럼 그 글자의 Noto Serif 600 (택시 주소 한글만 송명) */
  --title: "Noto Serif", "Noto Serif KR", serif; --title-w: 600;
  --myeongjo: "Noto Serif", "Noto Serif KR", serif;
  --read: "Noto Serif", "Noto Serif KR", serif;
  --my-w: 600;
  --price: "Anok Myeongjo", "Noto Serif", serif;
  --sans: "Noto Sans", "Noto Sans KR", system-ui, sans-serif;
}
html[lang="ja"] {
  --title: "Noto Serif JP", "Noto Serif KR", serif; --title-w: 600;
  --myeongjo: "Noto Serif JP", "Noto Serif KR", serif; --my-w: 600;
  --read: "Noto Serif JP", "Noto Serif KR", serif;
  --sans: "Noto Sans JP", "Noto Sans KR", sans-serif;
}
html[lang="zh-Hans"] {
  --title: "Noto Serif SC", "Noto Serif KR", serif; --title-w: 600;
  --myeongjo: "Noto Serif SC", "Noto Serif KR", serif; --my-w: 600;
  --read: "Noto Serif SC", "Noto Serif KR", serif;
  --sans: "Noto Sans SC", "Noto Sans KR", sans-serif;
}
html[lang="zh-Hant"] {
  --title: "Noto Serif TC", "Noto Serif KR", serif; --title-w: 600;
  --myeongjo: "Noto Serif TC", "Noto Serif KR", serif; --my-w: 600;
  --read: "Noto Serif TC", "Noto Serif KR", serif;
  --sans: "Noto Sans TC", "Noto Sans KR", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
html[lang="ko"] body, [lang="ko"] { word-break: keep-all; }
html[lang="ja"] body, html[lang^="zh"] body { line-break: strict; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--anok-giwa); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--title); font-weight: var(--title-w); line-height: 1.3; margin: 0; }
h2 { font-size: clamp(26px, 2.8vw, 34px); }
/* 구역 제목은 2판 크기에 맞춘다 (2판 = 굵은 명조 44~50px · 송명은 획이 굵어 한 단 작게도 같은 무게) */
p { margin: 0 0 .85em; }
figure { margin: 0; }
figcaption { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 7px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.kr { font-family: var(--kr); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--ink); color: #fff; padding: 8px 12px; }
.framed { border: 10px solid #fff; background: #fff; }   /* 사진 인화지 같은 흰 틀 */
.won { font-size: .68em; margin-left: 2px; }

/* 「가게 확인」 표시 — 값이 아직 없는 칸 */
.ask {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 1px 7px;
  border: 1px solid var(--ask);
  border-radius: 2px;
  color: var(--ask);
  white-space: nowrap;
  vertical-align: 2px;
}

/* 견본 띠 (공개 때 빠진다) */
.draft { background: var(--ask); color: #fff; font-size: 13px; line-height: 1.5; padding: 6px 16px; text-align: center; }
.draft span { opacity: .88; }

/* 머리 줄 */
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--title); font-weight: var(--title-w); font-size: 22px; line-height: 1; }
.brand img { width: 17px; }
.jump { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 15px; }
.jump a { text-decoration: none; color: var(--ink-2); }
.jump a:hover { color: var(--accent); text-decoration: underline; }
.langs { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px 2px; font-size: 13.5px; line-height: 1.4; }
.langs a { text-decoration: none; padding: 3px 7px; color: var(--ink-2); border: 1px solid transparent; }
.langs a[aria-current="page"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .jump { margin-left: auto; }
  .langs { margin-left: -7px; width: calc(100% + 7px); order: 3; }
}

/* 버튼 하나, 글 링크 하나 */
.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
.btn:hover { background: var(--anok-maru); color: #fff; }

/* 메뉴판 이름표 — 붓 글씨 그림 + 뒤로 가는 먹 선 (외국어 쪽은 그 언어 이름을 옆에) */
.lab { display: block; flex: none; line-height: 0; }
.lab img { width: 96px; }
.lab-name { flex: 0 1 auto; min-width: 0; font-family: var(--title); font-weight: var(--title-w); font-size: 15px; line-height: 1.3; color: var(--ink-2); padding-bottom: 2px; }
.lab-text { line-height: 1.2; background: var(--ink); color: #fff; padding: 6px 12px; font-size: 18px; font-family: var(--title); font-weight: var(--title-w); }

/* 1. 첫 화면 — 위에서 내려오는 먹색 띠(흰 로고 + 세로 제목) · 이름표 「식사」와 명조 값 · 곰탕 사진(2026-11-02 시안 나) */
.hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 40%);
  column-gap: clamp(32px, 3.8vw, 52px);
  padding-left: var(--edge);
  min-height: min(calc(100svh - 96px), 820px);
}
.band {
  align-self: start;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 46px 26px 44px;
}
.band-logo { width: 74px; filter: invert(1); }
.band h1 {
  writing-mode: vertical-rl;
  font-size: clamp(28px, 2.7vw, 36px);
  line-height: 1.32;
  color: #fff;
}
.h1-col { display: block; white-space: nowrap; }
.h1-col + .h1-col { margin-block-start: 14px; }
html[lang="en"] .band { padding-top: 140px; }
.hero-text {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px clamp(48px, 5.4vw, 76px) 40px 0;
}
.hero-top h1 { font-size: clamp(24px, 2.45vw, 32px); line-height: 1.25; margin-bottom: 26px; }
.hero-top h1 .name-sub { display: block; font-family: var(--sans); font-weight: 500; font-size: max(13px, .5em); line-height: 1.5; color: var(--ink-2); margin-top: 8px; }
.hero-top > .name-sub { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
/* 영어: 제목·메뉴 이름이 길다 — 글 칸을 넓히고 한 단 작게 (단추가 첫 화면 안에) */
html[lang="en"] .hero-text { padding-block: 26px; padding-right: clamp(36px, 3.4vw, 48px); gap: 18px; }
html[lang="en"] .hero-top h1 { font-size: clamp(24px, 2.2vw, 28px); margin-bottom: 20px; }
html[lang="en"] .hr-rows li { font-size: 19px; padding: 4px 0; }
.hr-label { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 8px; }
.hr-label .lab img { width: 114px; }
.hr-label::after { content: ""; flex: 1; height: 1px; background: var(--ink); }
.hr-rows { list-style: none; margin: 0; padding: 0; }
.hr-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; font-size: 21px; line-height: 1.45; }
.hr-name { font-family: var(--myeongjo); }
.hr-won { font-family: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero .lead { font-family: var(--read); font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.65; color: var(--ink); margin: 0; max-width: 30em; }
.quick { margin: 0; border-top: 1px solid var(--ink); }
.quick > div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.quick dt { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.quick dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.act .text-link { font-size: 15.5px; }
.hero-photo { position: relative; min-height: 440px; }
.hero-photo > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-gate {
  position: absolute;
  left: 0;
  bottom: 48px;
  width: clamp(140px, 14vw, 200px);
  transform: translateX(-40%);
  border: 6px solid #fff;
}
@media (max-width: 899px) {
  /* 폰: 띠는 왼쪽에 길게, 오른쪽 위 사진 · 그 아래 이름표와 값 · 소개·단추·시간은 아래 넓게 */
  .hero {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 16px 34px;
    min-height: 0;
  }
  .band { grid-column: 1; grid-row: 1 / 3; gap: 12px; padding: 18px 10px 20px; }
  .band-logo { width: 30px; }
  .band h1 { font-size: 24px; line-height: 1.3; }
  .h1-col + .h1-col { margin-block-start: 8px; }
  .hero-photo { grid-column: 2; grid-row: 1; min-height: 200px; }
  .hero-text { display: contents; }
  .hero-top { grid-column: 2; grid-row: 2; padding-top: 4px; }
  .hero .lead, .hero .act, .hero .quick { grid-column: 1 / -1; }
  .hero .lead { margin-top: 8px; font-size: 16.5px; }
  .hero .act { order: 3; }
  .hero .quick { order: 4; }
  .hr-label { margin-bottom: 4px; }
  .hr-label .lab img { width: 84px; }
  .hr-rows li { font-size: 17px; padding: 2px 0; line-height: 1.4; gap: 10px; }
  .hero-gate { left: auto; right: 8px; bottom: 8px; transform: none; width: 72px; border-width: 3px; }
  /* 영어: 세로 제목이 없다 — 띠에는 로고만, 제목·값은 사진 아래 */
  html[lang="en"] .band { padding: 18px 10px 16px; }
  html[lang="en"] .hero-top { padding-top: 8px; }
  html[lang="en"] .hero-top h1 { font-size: 22px; margin-bottom: 14px; }
  html[lang="en"] .hr-rows li { font-size: 16.5px; padding: 2px 0; }
}

/* 시안 나(2026-11-02 대표님 고름) — 곰탕 크게 · 먹띠가 사진 위에 걸림 */
@media (min-width: 900px) {
  .hero { position: relative; grid-template-columns: minmax(0, 56%) minmax(0, 1fr); column-gap: clamp(36px, 4vw, 56px); padding-left: 0; }
  html[lang="en"] .hero { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); }
  .band { grid-column: 1 / -1; grid-row: 1; justify-self: start; margin-left: var(--edge); position: relative; z-index: 1; }
  .hero-photo { grid-column: 1; grid-row: 1; }
  .hero-text { grid-column: 2; grid-row: 1; padding-right: clamp(48px, 5.4vw, 76px); }
  .hero-gate { left: auto; right: 0; bottom: 48px; transform: translateX(22%); }
}
@media (max-width: 899px) {
  .hero { grid-template-rows: auto auto; }
  .hero-photo { grid-column: 1 / -1; grid-row: 1; align-self: stretch; justify-self: stretch; margin: 0 -16px; min-height: 0; aspect-ratio: 390 / 396; }
  .band { grid-column: 1; grid-row: 1; position: relative; z-index: 1; align-self: start; }
  .hero-top { grid-column: 1 / -1; grid-row: 2; }
  .hero-gate { right: 14px; bottom: 14px; width: 84px; }
}
/* 태블릿: 사진이 첫 화면을 다 차지하지 않게 낮춘다 */
@media (min-width: 521px) and (max-width: 899px) {
  .hero-photo { aspect-ratio: 16 / 10; }
}
/* 영어 폰: 띠에 로고만 있고 제목이 사진 아래로 내려간다 — 사진을 낮춰 단추를 첫 화면 안에 */
@media (max-width: 520px) {
  html[lang="en"] .hero-photo { aspect-ratio: 390 / 320; }
}

/* 2. 대표 메뉴 — 흙벽 바탕. 곰탕 크게, 냉면 엇갈려, 나머지 넷은 메뉴판 한 장 + 크기가 다른 사진 넷 */
.sig { background: var(--anok-wall); padding: clamp(60px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.sig-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.sig-head h2 { font-size: clamp(30px, 3.8vw, 48px); }
.sig-head p { margin: 0; color: var(--ink-2); max-width: 27em; }
.dish h3 { font-size: clamp(21px, 2vw, 26px); }
.dish .orig { font-size: 14.5px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.55; }
.price { font-family: var(--price); font-weight: 400; color: var(--anok-maru); font-variant-numeric: tabular-nums; }
.dish .price { font-size: 24px; line-height: 1.3; margin: 10px 0 12px; }
.dish .also { font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--anok-wall-shade); padding-top: 10px; margin-top: 14px; }
.dish .also .price { font-size: 16px; }
.sig-main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 44px; align-items: end; }
.sig-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sig-second {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 22px 40px;
  align-items: center;
  width: min(100%, 880px);
  margin: clamp(44px, 6vw, 84px) 0 0 auto;
}
.sig-second .dish { text-align: right; }
.sig-second img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sig-board {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 36px 56px;
  align-items: stretch;
  margin-top: clamp(56px, 7vw, 92px);
}
/* 줄 목록은 사진판 높이까지 늘려 줄 간격을 고르게 (왼쪽 아래가 비지 않게) */
.board-rows { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); display: flex; flex-direction: column; }
.board-rows li { flex: 1 0 auto; padding: 16px 0 17px; border-bottom: 1px solid var(--anok-wall-shade); }
.br-line { display: flex; align-items: baseline; gap: 12px; }
.br-line h3 { font-size: 20px; flex: 0 1 auto; min-width: 0; max-width: 70%; }
.br-lead { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--anok-gravel); transform: translateY(-5px); }
.br-line .price { flex: none; margin: 0; font-size: 19px; white-space: nowrap; }
.board-rows .orig { font-size: 14px; color: var(--ink-2); margin: 3px 0 0; line-height: 1.5; }
.br-desc { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; }
.board-photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.bp img { width: 100%; object-fit: cover; border: 8px solid #fff; background: #fff; }
.bp figcaption { margin-top: 5px; }
/* 사진 넷은 두 줄 엇갈림 — 큰 쟁반 위 왼쪽 · 전골 위 오른쪽(겹침) · 비빔밥 아래 한 칸 들여 · 꼬리찜 아래 오른쪽(겹침) */
.bp-donbok { grid-column: 1 / 5; grid-row: 1; }
.bp-donbok img { aspect-ratio: 4 / 3; }
.bp-bulgogi { grid-column: 5 / 7; grid-row: 1; margin: 28px 0 0 -22px; position: relative; }
.bp-pork-tail { grid-column: 5 / 7; grid-row: 2; margin: 12px 0 0 -22px; position: relative; }
.bp-bulgogi img, .bp-pork-tail img { aspect-ratio: 1 / 1; }
.bp-bulgogi figcaption, .bp-pork-tail figcaption { padding-left: 22px; }
.bp-yukhoe-bibimbap { grid-column: 2 / 5; grid-row: 2; margin-top: 14px; }
.bp-yukhoe-bibimbap img { aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .sig-head, .sig-main { grid-template-columns: minmax(0, 1fr); }
  .sig-second { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .sig-second img { order: -1; }
  .sig-second .dish { text-align: left; }
  .sig-board { grid-template-columns: minmax(0, 1fr); }
  .board-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bp-donbok, .bp-bulgogi, .bp-pork-tail, .bp-yukhoe-bibimbap { grid-column: auto; grid-row: auto; margin: 0; }
  .bp-yukhoe-bibimbap img, .bp-donbok img { aspect-ratio: 1 / 1; }
  .bp-bulgogi figcaption, .bp-pork-tail figcaption { padding-left: 0; }
  .bp img { border-width: 6px; }
}

/* 3. 오시기 전에 — 한 장짜리 안내문 */
.before { padding: clamp(56px, 7vw, 96px) 0; border-top: 3px double var(--ink); border-bottom: 1px solid var(--line); }
.before-in { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px 64px; }
.before-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.before-head h2 { font-size: clamp(27px, 2.8vw, 34px); letter-spacing: .08em; }
html[lang="ko"] .before-head h2,
html[lang="ja"] .before-head h2,
html[lang^="zh"] .before-head h2 { writing-mode: vertical-rl; text-orientation: upright; }
.notice { margin: 0; border-top: 1px solid var(--ink); }
.notice > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2px 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.notice dt { font-family: var(--read); font-weight: var(--read-w); font-size: 17.5px; }
.notice dd { margin: 0; color: var(--ink-2); }
.notice dd p { margin: 0; }
@media (max-width: 760px) {
  .before-in { grid-template-columns: minmax(0, 1fr); }
  .before-head { flex-direction: row; align-items: center; justify-content: space-between; }
  html[lang] .before-head h2 { writing-mode: horizontal-tb; letter-spacing: 0; }
  .notice > div { grid-template-columns: minmax(0, 1fr); }
}

/* 4. 가게 이야기 — 툇마루 사진 위에 글이 비켜 걸친다 */
.story { background: var(--anok-wall-2); padding: clamp(56px, 7vw, 96px) 0 clamp(88px, 10vw, 136px); }
.story-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 4fr); }
.story-photo { grid-column: 1 / 3; grid-row: 1; }
.story-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 55%; }
.story-text {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 1;
  transform: translateY(56px);
  background: #fff;
  border-left: 4px solid var(--anok-maru);
  padding: clamp(24px, 3vw, 40px);
}
.story-text h2 { font-size: 22px; color: var(--anok-maru); margin-bottom: 14px; }
.story-text p { font-family: var(--read); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.7; }
.story-text p:last-child { margin-bottom: 0; }
@media (max-width: 899px) {
  .story { padding: 0 0 56px; }
  .story-in { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .story-photo, .story-text { grid-column: 1; }
  .story-photo { display: flex; flex-direction: column-reverse; }
  .story-photo img { border-width: 0; }
  .story-photo figcaption { padding: 14px 16px 0; margin: 0 0 8px; }
  .story-text { grid-row: 2; transform: none; margin: -36px 16px 0 32px; }
}

/* 5. 메뉴와 가격 — 대문 나무 바탕 위에 메뉴판 종이 한 장 */
.menu { background: var(--anok-gate); padding: clamp(60px, 8vw, 104px) 0; }
.menu-head { text-align: center; margin-bottom: 30px; }
.menu-head h2 { font-size: clamp(30px, 3.6vw, 44px); color: var(--anok-wall); }
.menu-head p { color: var(--anok-wall-shade); font-size: 14.5px; margin: 12px auto 0; max-width: 40em; }
.menu-board { background: var(--paper); padding: clamp(30px, 4.4vw, 60px) clamp(20px, 4.6vw, 64px) clamp(10px, 2vw, 26px); }
.menu-cols { columns: 2 330px; column-gap: 64px; }
.menu-group { break-inside: avoid; margin: 0 0 32px; }
.lab-h { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 6px; font-size: 18px; }
.lab-h::after { content: ""; flex: 1; height: 1px; background: var(--ink); }
.menu-group ul { list-style: none; margin: 0; padding: 0; }
.menu-group li { display: grid; grid-template-columns: minmax(0, max-content) minmax(18px, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 9px 0; }
.m-name { font-family: var(--myeongjo); font-weight: var(--my-w); font-size: 18px; line-height: 1.5; }
.m-lead { border-bottom: 1px dotted var(--dot); transform: translateY(-5px); }
.m-price { font-family: var(--price); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-orig, .m-desc { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.m-desc { margin-top: 2px; }
@media (max-width: 520px) {
  .menu-board { padding: 26px 16px 4px; }
  .menu-group li { column-gap: 8px; }
}

/* 6. 사진 모음 — 크기가 다른 세 장 */
.photos { padding: clamp(60px, 8vw, 112px) 0; }
.collage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); gap: 16px; }
.collage img { border-width: 8px; }
.c-hall { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; }
.c-hall img { flex: 1 1 auto; height: 0; min-height: 360px; width: 100%; object-fit: cover; }
.c-table { grid-column: 2 / 4; grid-row: 1; }
.c-table img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 45%; }
.photos-h { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 30px; }
.photos-h h2 { font-size: clamp(24px, 2.4vw, 32px); }
.c-window { grid-column: 3; grid-row: 2; }
.c-window img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.c-yard { grid-column: 1 / -1; }
.c-yard img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 74%; }
@media (max-width: 760px) {
  .collage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .collage img { border-width: 6px; }
  .photos-h { grid-column: 1 / -1; grid-row: 1; padding-bottom: 6px; }
  .c-hall { grid-column: 1 / -1; grid-row: 2; }
  .c-hall img { flex: none; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .c-table { grid-column: 1; grid-row: 3; }
  .c-table img { aspect-ratio: 1 / 1; }
  .c-window { grid-column: 2; grid-row: 3; }
  .c-yard img { aspect-ratio: 4 / 3; }
}

/* 7. 오시는 길 — 지도 대신 대문 사진(이 대문을 찾으면 된다) + 택시 기사님께 보여 줄 주소 */
.way { background: var(--anok-wall); padding: clamp(60px, 8vw, 104px) 0; }
.way-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px 56px; align-items: start; }
.way h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 8px; }
.way-addr { font-family: var(--title); font-weight: var(--title-w); font-size: 20px; line-height: 1.5; color: var(--ink); margin-bottom: 28px; }
.steps { list-style: none; counter-reset: st; margin: 0 0 26px; padding: 0; }
.steps li { counter-increment: st; position: relative; padding: 0 0 14px 46px; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: -4px; font-family: var(--title); font-weight: var(--title-w); font-size: 28px; line-height: 1.2; color: var(--anok-maru); }
.way-more p { margin-bottom: 10px; }
.way-more b { font-weight: 600; }
.map-links { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 24px 0 0; }
.map-links a { display: inline-block; border: 1.5px solid var(--ink); padding: 10px 16px; text-decoration: none; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.map-links a:hover { background: var(--ink); color: #fff; }
.way-side { display: flex; flex-direction: column; gap: 22px; }
.way-gate img { width: 100%; }
.taxi { border: 3px solid var(--ink); background: #fff; padding: 18px 22px 20px; }
.taxi p { margin: 0; }
.taxi-say { font-size: 14.5px; color: var(--ink-2); }
.taxi .taxi-addr { font-family: "Song Myung Anok", "Noto Serif KR", serif; font-weight: 400; font-size: clamp(26px, 2.7vw, 32px); line-height: 1.35; margin: 8px 0 2px; }
.taxi-old { font-family: var(--kr); font-size: 15px; color: var(--ink-2); }
.taxi .taxi-local { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: 15px; }
@media (max-width: 899px) {
  .way-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 8. 자주 묻는 질문 — 접지 않고 다 펼친다 */
.faq-sec { padding: clamp(60px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.faq-sec h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 26px; }
.faq { margin: 0; columns: 2 380px; column-gap: 60px; border-top: 3px solid var(--ink); padding-top: 6px; }
.faq > div { break-inside: avoid; padding: 16px 0 18px; border-bottom: 1px solid var(--anok-gravel); }
.faq dt { font-family: var(--read); font-weight: var(--read-w); font-size: 19px; line-height: 1.5; margin-bottom: 6px; }
.faq dd { margin: 0; color: var(--ink-2); }

/* 9. 안내 쪽 링크 — 한 줄 */
.read { padding: 0 0 clamp(60px, 8vw, 100px); }
.read-in { border-top: 2px solid var(--ink); padding-top: 28px; max-width: 820px; }
.read-in h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.read-in p { margin: 0 0 6px; }
.read-title { font-family: var(--title); font-weight: var(--title-w); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.45; }

/* 꼬리말 — 메뉴판 띠 먹 */
.foot { background: var(--ink); color: var(--anok-wall-shade); padding: 56px 0 40px; font-size: 15px; line-height: 1.7; }
.foot a { color: var(--anok-wall); }
.foot a:hover { color: #fff; }
.foot-in { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px 48px; align-items: start; }
.foot-logo { width: 50px; filter: invert(1); }
.foot-name { font-family: var(--title); font-weight: var(--title-w); font-size: 24px; color: var(--anok-wall); margin-bottom: 6px; }
.foot address { font-style: normal; }
.foot p { margin: 0 0 4px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.foot-src { grid-column: 1 / -1; border-top: 1px solid #5B5657; padding-top: 18px; font-size: 13.5px; }
.foot-draft { grid-column: 1 / -1; font-size: 13px; color: #EBAE99; }
@media (max-width: 760px) {
  .foot-in { grid-template-columns: minmax(0, 1fr); }
}

/* 안내 쪽 (부모님 모시고 오실 때) — 위에서 내려오는 먹색 띠 옆에 제목 · 읽는 폭은 좁게, 표지만 넓게 */
.col { padding: 0 0 80px; }
.col-top { width: min(100% - 32px, 900px); margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 48px); align-items: start; }
.col-band { background: var(--ink); padding: 84px 20px 22px; }
.col-band img { width: 50px; filter: invert(1); }
.col-top-text { padding-top: 26px; }
.crumbs { font-size: 14px; color: var(--ink-2); margin-bottom: 30px; }
.crumbs a { color: var(--ink-2); }
.col-head h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.32; margin-bottom: 22px; }
.col-lead p { font-family: var(--read); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; margin: 0 0 4px; }
.col-meta { font-size: 14px; color: var(--ink-2); margin: 18px 0 0; }
.col-cover { width: min(100% - 32px, 1080px); margin: 40px auto 44px; }
.col-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 55%; }
.col-wrap { width: min(100% - 32px, 740px); margin-inline: auto; }
.toc { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); padding: 16px 0 14px; margin: 0 0 48px; }
.toc-h { font-weight: 600; margin-bottom: 6px; }
.toc ol { list-style: none; counter-reset: tc; margin: 0; padding: 0; }
.toc li { counter-increment: tc; display: flex; gap: 12px; align-items: baseline; padding: 3px 0; }
.toc li::before { content: counter(tc); flex: none; min-width: 1.1em; font-family: var(--title); font-weight: var(--title-w); font-size: 21px; line-height: 1.3; color: var(--anok-maru); }
.toc a { font-family: var(--read); font-size: 17.5px; line-height: 1.55; }
.col-sec { margin-bottom: 52px; }
.col-sec h2 { font-size: clamp(22px, 2.5vw, 28px); margin-bottom: 16px; }
.fact { font-family: var(--read); font-weight: var(--read-w); font-size: 18px; line-height: 1.65; border-left: 3px solid var(--anok-maru); padding-left: 14px; }
.col-sec figure { margin: 24px 0; }
.col-sec figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cm-group { margin: 10px 0 20px; }
.cm-label { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 4px; }
.cm-label .lab img { width: 84px; }
.cm-label::after { content: ""; flex: 1; height: 1px; background: var(--ink); }
.col-menu { list-style: none; padding: 0; margin: 0; }
.col-menu li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.cm-name { font-family: var(--myeongjo); font-weight: var(--my-w); font-size: 17px; line-height: 1.5; min-width: 0; }
.cm-lead { flex: 1 1 auto; min-width: 18px; border-bottom: 1px dotted var(--dot); transform: translateY(-5px); }
.col-menu .price { flex: none; white-space: nowrap; font-size: 17px; }
.sources ul { padding-left: 1.2em; font-size: 15px; color: var(--ink-2); }
.sources li { margin-bottom: 4px; }
.back { margin-top: 44px; }
@media (max-width: 899px) {
  .col-band { padding: 56px 12px 14px; }
  .col-band img { width: 30px; }
  .col-top { gap: 0 20px; }
  .col-top-text { padding-top: 20px; }
}

/* 관리 화면 값 (2026-10-31 시범판) — 품절 표시 · 알림 띠. 움직임·그림자·아이콘 없음, 처음부터 보인다 */
.sold { display: inline-block; margin-left: .4em; padding: 0 .45em; border: 1px solid var(--anok-maru); color: var(--anok-maru); font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.6; vertical-align: .1em; white-space: nowrap; }
.alert { background: var(--anok-wall-2); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.alert .wrap { padding: 10px 0; }
.alert p { margin: 0; }
.alert p + p { margin-top: 4px; }
.alert b { color: var(--anok-maru); }

/* ───── 3단계 (2026-11-01) — 손님 도움 · 안내 쪽 진하게 · 움직임 일곱 가지 ─────
   여기 위 기본 규칙은 모두 「끝 모양」이다. 움직이는 시작 상태는 맨 아래
   @media (prefers-reduced-motion: no-preference) 안에만 둔다 → 움직임 줄이기·스크립트 끔이면 처음부터 끝 모양.
   움직이는 성질 = 위치(translate) · 크기(scale) · 투명도(opacity) · 선 그리기(scale) 넷. 곡선은 느리고 차분하게 하나만. */
:root { --ease-anok: cubic-bezier(.25, .1, .25, 1); }

/* 6. 지금 영업 중 — 여는 시간 원문 아래 한 줄(스크립트가 붙인다 · 스크립트가 꺼지면 이 줄은 없다) */
.now { display: block; margin-top: 4px; }
.now-st { display: block; color: var(--anok-maru); font-weight: 600; }
.now-sub { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* 3·7. 메뉴 이름 단추 · 사진 창 · 주문 카드 */
.js-only { display: none; }
.js-ready .js-only { display: block; }
.m-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; text-decoration: underline dotted var(--anok-maru); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.m-btn:hover { color: var(--anok-maru); }
.m-pop { position: absolute; left: 0; top: 0; z-index: 20; width: 200px; border: 8px solid #fff; background: var(--anok-wall-2); visibility: hidden; opacity: 0; pointer-events: none; }
.m-pop img { width: 100%; height: auto; }
.m-pop.on { visibility: visible; opacity: 1; }
@media (max-width: 520px) { .m-pop { width: 180px; } }
.order { padding: 0; border: 0; background: var(--paper); color: var(--ink); width: min(100% - 32px, 440px); max-height: calc(100% - 32px); overflow: auto; }
.order::backdrop { background: rgba(34, 30, 26, .6); }
.o-in { padding: 22px 22px 18px; }
.o-show { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 8px; }
.o-kr { font-family: var(--kr); font-weight: 700; font-size: clamp(34px, 10vw, 56px); line-height: 1.2; margin: 0 0 10px; word-break: keep-all; }
.o-name { font-family: var(--myeongjo); font-weight: var(--my-w); font-size: 18px; line-height: 1.45; margin: 0; }
.o-price { font-family: var(--price); color: var(--anok-maru); font-size: 20px; line-height: 1.4; margin: 4px 0 14px; }
.o-img img { width: 100%; height: auto; border: 8px solid #fff; background: var(--anok-wall-2); }
.o-act { margin: 16px 0 0; text-align: right; }
.o-close { font: inherit; font-size: 15px; line-height: 1.4; background: var(--ink); color: #fff; border: 0; padding: 9px 18px; cursor: pointer; }

/* 4. 길 — 1·2·3 숫자를 잇는 선(지도 모양은 그리지 않는다 · 선 자체가 끝 모양)
   숫자 바로 아래(29px)부터 다음 숫자 바로 위(줄 끝 0)까지 — 한 줄짜리 PC 에서도 약 15px 보이게(36px·6px 였을 때 1.75px 로 안 보였다) */
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 29px; bottom: 0; width: 1px; background: var(--anok-maru); transform-origin: 50% 0; }

/* 안내 쪽 — 2판보다 옅게 읽히던 것 수리: 글자 먹을 2판 값으로 · 송명 제목은 크게 */
main.col { --ink: #221E1A; --ink-2: #4A4239; color: var(--ink); }
.col .col-band { background: var(--anok-menu-ink); }
.col-head h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.3; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. 대문 열림 — 첫 화면 처음 한 번(.intro = 쪽 머리 스크립트 · 세션에 한 번) · 첫 화면 사진 .6초 → 대문 .5초 = 1.1초 */
  .intro .hero-photo:not(.go) > img:first-child { scale: .98; }
  .intro .hero-photo:not(.go) .hero-gate { opacity: 0; }
  .intro .hero-photo.go > img:first-child { animation: anok-near .6s var(--ease-anok) backwards; }
  .intro .hero-photo.go .hero-gate { animation: anok-gate .5s var(--ease-anok) .6s backwards; }
  .hero-photo > img:first-child { transform-origin: 60% 50%; }

  /* 2. 큰 사진 세 장이 화면에 들어오며 아주 조금 다가온다(스크롤 연동 · 지원 안 하는 브라우저는 그냥 멈춰 있음) */
  @supports (animation-timeline: view()) {
    .sig-main img, .story-photo img, .c-hall img { animation: anok-view linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }

  /* 3. 메뉴 사진 창 */
  .m-pop { translate: 0 4px; transition: opacity .18s var(--ease-anok), translate .18s var(--ease-anok), visibility 0s linear .18s; }
  .m-pop.on { translate: 0 0; transition-delay: 0s; }

  /* 4. 길 선 — 화면에 들어오면 1→2, 2→3 차례로 한 번 */
  .js-ready .steps li::after { transition: scale .5s var(--ease-anok); }
  .js-ready .steps li:nth-child(2)::after { transition-delay: .5s; }
  .js-ready .steps:not(.draw) li::after { scale: 1 0; }

  /* 5. 언어 넘김 — 언어 단추로 옮길 때만(나머지는 js/site.js 가 건너뜀) · 앞 쪽은 그대로 두고 새 쪽이 그 위로 차오른다 */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: anok-in .35s var(--ease-anok); mix-blend-mode: normal; }

  /* 7. 주문 카드 */
  .order[open] { animation: anok-drop .2s var(--ease-anok); }
}
@keyframes anok-near { from { scale: .98; } to { scale: 1; } }
@keyframes anok-gate { from { translate: 0 -14px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes anok-view { from { scale: .96; } to { scale: 1; } }
@keyframes anok-drop { from { translate: 0 -10px; } to { translate: 0 0; } }
@keyframes anok-in { from { opacity: 0; } to { opacity: 1; } }

/* ───── 4단계 (2026-11-02) — 마감: 없는 쪽(404) · 인쇄용 메뉴판 ───── */

/* 없는 쪽 — 안내 쪽과 같은 결: 위에서 내려오는 먹색 띠 + 흰 로고, 송명 제목, 줄 긋는 목록 */
.nf { width: min(100% - 32px, 900px); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 48px); align-items: start; padding-bottom: 80px; }
.nf-band { background: var(--ink); padding: 84px 20px 22px; }
.nf-band img { width: 50px; filter: invert(1); }
.nf-text { padding-top: 84px; }
.nf h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.32; margin-bottom: 26px; }
.nf-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.nf-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); line-height: 1.55; } /* 언어마다 문장 → 링크(둘째 줄)로 늘 같은 꼴 — 한 줄에 붙던 중국어·줄바꿈되던 영어·일본어가 갈렸다(2026-11-02 감사 🟢-1) · 한국어 줄은 제목이 같은 문장이라 링크만 */
.nf-list span { color: var(--ink-2); }
.nf-list a { font-size: 16.5px; }
.nf [lang="en"] { font-family: "Noto Sans", "Noto Sans KR", sans-serif; }
.nf [lang="ja"] { font-family: "Noto Sans JP", "Noto Sans KR", sans-serif; }
.nf [lang="zh-Hans"] { font-family: "Noto Sans SC", "Noto Sans KR", sans-serif; }
.nf [lang="zh-Hant"] { font-family: "Noto Sans TC", "Noto Sans KR", sans-serif; }
.nf [lang="ja"], .nf [lang^="zh"] { word-break: normal; } /* 404 는 html lang="ko" 라 keep-all 이 물려 내려와 일본어·중국어 줄이 안 끊겼다 */
@media (max-width: 899px) {
  .nf { gap: 0 20px; }
  .nf-band { padding: 56px 12px 14px; }
  .nf-band img { width: 30px; }
  .nf-text { padding-top: 48px; }
}

/* 키보드 초점 — 먹색 꼬리말 위에서는 기와색 테두리가 먹에 묻힌다(대비 1.08:1 · 흙벽색은 9.3:1) → 같은 굵기·간격, 흙벽색으로 */
.foot :focus-visible { outline-color: var(--anok-wall); }

/* 인쇄 — 첫 쪽을 인쇄하면 A4 한 장 메뉴판: 가게 이름·주소·여는 시간 + 메뉴와 값(머리 줄·움직임·큰 사진은 뺀다) */
@media print {
  @page { size: A4; margin: 11mm 13mm; }
  html, body { background: #fff; }
  body { font-size: 10pt; line-height: 1.45; }
  .skip, .draft, .alert, .top, .m-pop, dialog.order, .js-only, .foot-logo, .foot ul, .foot-draft { display: none !important; }
  a { text-decoration: none; }
  /* 첫 쪽(메뉴가 있는 쪽)만 메뉴판으로 접는다 */
  body:has(#menu) { display: flex; flex-direction: column; }
  body:has(#menu) main > section:not(#menu) { display: none; }
  body:has(#menu) .foot { order: -1; background: none; color: var(--ink); padding: 0 0 3mm; margin: 0 0 4mm; font-size: 10pt; line-height: 1.5; border-bottom: 3px solid var(--ink); }
  body:has(#menu) .foot-in { display: block; width: auto; }
  body:has(#menu) .foot-name { color: var(--ink); font-size: 24pt; line-height: 1.2; margin-bottom: 1mm; }
  body:has(#menu) .foot address { font-style: normal; }
  body:has(#menu) .foot p { margin: 0; }
  body:has(#menu) .foot-src { border: 0; padding: 1.5mm 0 0; font-size: 7.5pt; color: var(--ink-2); }
  .wrap { width: auto; }
  .menu { background: none; padding: 0; }
  .menu-head { text-align: left; margin: 0 0 3mm; }
  .menu-head h2 { color: var(--ink); font-size: 16pt; }
  .menu-head p { color: var(--ink-2); font-size: 8pt; margin: 1mm 0 0; max-width: none; }
  .menu-board { background: none; padding: 0; }
  .menu-cols { columns: 2; column-gap: 9mm; }
  .menu-group { margin: 0 0 3.5mm; }
  .lab-h { font-size: 11pt; margin-bottom: 1mm; }
  .lab img { width: 64px; }
  .menu-group li { padding: 1.2mm 0; column-gap: 6px; }
  .m-name, .m-price { font-size: 10.5pt; line-height: 1.35; }
  .m-orig, .m-desc { font-size: 7.5pt; line-height: 1.35; }
  .m-desc { margin-top: 0; }
  .m-btn { text-decoration: none; }
  .sold { font-size: 7.5pt; }
}

/* 2026-11-02 속도 수리 — 첫 화면 아래 구역은 화면에 닿을 때 글자 배치를 계산한다.
   첫 그림 전 쪽 전체 배치에 약 0.9초가 걸렸다. 폰 같은 차례 비교 2.93초 → 2.37초(차례마다 절대값이 다르다).
   값 = 내용 높이(실제 높이 - 위아래 여백·테두리 · 11/2 잰 값) · 값을 여백 포함으로 넣으면 쪽이 길어지고 새로고침 자리가 어긋난다.
   구역을 크게 고치면 다시 잰다. 알고 쓰는 것 = 외국어 표는 네 언어 평균 하나라 구역마다 언어별 차가 남는다(구역 하나 최대 112px · 한국어 0). 쪽 중간 새로고침 때 그만큼 어긋날 수 있다. */
.sig, .before, .story, .menu, .photos, .way, .faq-sec, .read, .foot { content-visibility: auto; }
.sig { contain-intrinsic-size: auto 2125px; }
.before { contain-intrinsic-size: auto 1222px; }
.story { contain-intrinsic-size: auto 577px; }
.menu { contain-intrinsic-size: auto 1343px; }
.photos { contain-intrinsic-size: auto 1044px; }
.way { contain-intrinsic-size: auto 1243px; }
.faq-sec { contain-intrinsic-size: auto 912px; }
.read { contain-intrinsic-size: auto 188px; }
.foot { contain-intrinsic-size: auto 461px; }
html:not([lang="ko"]) .sig { contain-intrinsic-size: auto 2330px; }
html:not([lang="ko"]) .before { contain-intrinsic-size: auto 1250px; }
html:not([lang="ko"]) .story { contain-intrinsic-size: auto 590px; }
html:not([lang="ko"]) .menu { contain-intrinsic-size: auto 1745px; }
html:not([lang="ko"]) .photos { contain-intrinsic-size: auto 1055px; }
html:not([lang="ko"]) .way { contain-intrinsic-size: auto 1345px; }
html:not([lang="ko"]) .faq-sec { contain-intrinsic-size: auto 860px; }
html:not([lang="ko"]) .read { contain-intrinsic-size: auto 200px; }
html:not([lang="ko"]) .foot { contain-intrinsic-size: auto 540px; }
@media (min-width: 521px) {
  .sig { contain-intrinsic-size: auto 3143px; }
  .before { contain-intrinsic-size: auto 837px; }
  .story { contain-intrinsic-size: auto 818px; }
  .menu { contain-intrinsic-size: auto 1362px; }
  .photos { contain-intrinsic-size: auto 839px; }
  .way { contain-intrinsic-size: auto 1514px; }
  .faq-sec { contain-intrinsic-size: auto 793px; }
  .read { contain-intrinsic-size: auto 128px; }
  .foot { contain-intrinsic-size: auto 249px; }
  html:not([lang="ko"]) .sig { contain-intrinsic-size: auto 3280px; }
  html:not([lang="ko"]) .before { contain-intrinsic-size: auto 830px; }
  html:not([lang="ko"]) .story { contain-intrinsic-size: auto 810px; }
  html:not([lang="ko"]) .menu { contain-intrinsic-size: auto 1700px; }
  html:not([lang="ko"]) .photos { contain-intrinsic-size: auto 845px; }
  html:not([lang="ko"]) .way { contain-intrinsic-size: auto 1563px; }
  html:not([lang="ko"]) .faq-sec { contain-intrinsic-size: auto 780px; }
  html:not([lang="ko"]) .read { contain-intrinsic-size: auto 140px; }
  html:not([lang="ko"]) .foot { contain-intrinsic-size: auto 280px; }
}
@media (min-width: 900px) {
  .sig { contain-intrinsic-size: auto 1789px; }
  .before { contain-intrinsic-size: auto 692px; }
  .story { contain-intrinsic-size: auto 628px; }
  .menu { contain-intrinsic-size: auto 828px; }
  .photos { contain-intrinsic-size: auto 1283px; }
  .way { contain-intrinsic-size: auto 744px; }
  .faq-sec { contain-intrinsic-size: auto 479px; }
  .read { contain-intrinsic-size: auto 136px; }
  .foot { contain-intrinsic-size: auto 224px; }
  html:not([lang="ko"]) .sig { contain-intrinsic-size: auto 1789px; }
  html:not([lang="ko"]) .before { contain-intrinsic-size: auto 705px; }
  html:not([lang="ko"]) .story { contain-intrinsic-size: auto 628px; }
  html:not([lang="ko"]) .menu { contain-intrinsic-size: auto 1005px; }
  html:not([lang="ko"]) .photos { contain-intrinsic-size: auto 1283px; }
  html:not([lang="ko"]) .way { contain-intrinsic-size: auto 793px; }
  html:not([lang="ko"]) .faq-sec { contain-intrinsic-size: auto 485px; }
  html:not([lang="ko"]) .read { contain-intrinsic-size: auto 145px; }
  html:not([lang="ko"]) .foot { contain-intrinsic-size: auto 253px; }
}
@media print {
  .sig, .before, .story, .menu, .photos, .way, .faq-sec, .read, .foot { content-visibility: visible; }
}