/* 글꼴 — 사이트에 쓰인 글자만 남긴 자체 호스팅 서브셋 (tools/subset-fonts.py, OFL 1.1)
   ?v= 는 빌드가 '페이지에 쓰인 글자 집합'으로 계산한다. 글이 바뀌어 새 글자가 생기면 주소도 바뀌어 옛 캐시를 쓰지 않는다 */
@font-face { font-family: 'Pretendard GJ'; src: url('/assets/fonts/pretendard-gj.woff2?v=3150226b10') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Hahmlet GJ'; src: url('/assets/fonts/hahmlet-gj.woff2?v=3150226b10') format('woff2'); font-weight: 500 800; font-display: swap; }

/* ═══════════════════════════════════════════════════════════════
   광주맛집 디자인 토큰
   색은 스킬 기본 취향이 아니라 '수집한 사진의 공간·브랜드 색'에서 뽑았다.
   근거 사진 목록과 제외한 사진은 research/PALETTE.md, 좌표별 표본은 research/photos/sample_colors.py.
   기준: 외관·내부(벽·바닥·가구·조명)·간판·로고만 사용. 음식·사람·이벤트 포스터 색은 쓰지 않음.
   판정: 다섯 곳 모두 따뜻한 톤(원목·아이보리 벽·텅스텐 조명) → 크림 계열 바탕을 허용.
   대비 검사: python tools/contrast.py (본문 4.5:1 이상)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* 바탕 — 한지 아이보리.
     칸세이스시 상무본점 내부(네이버 방문자 사진 '내부', 원목 칸막이 왼쪽 미장 벽) 중앙값 #cdc5b3,
     영미오리탕 내부 벽지 #cac7be, 화정떡갈비 간판 크림 글씨 #dcdbcf.
     세 색의 색상(H 40–45°)과 낮은 채도는 그대로 두고 명도만 화면 바탕 수준으로 올렸다. */
  --paper: #F4EFE6;
  --paper-2: #EBE3D6;   /* 같은 벽면의 그늘진 쪽 — 띠 구역 바탕 */
  --paper-3: #E1D6C5;   /* 표 머리, 막대그래프 바탕 */

  /* 본문 글자 — 먹색.
     칸세이스시 로고 붓글씨 #080501, 밥장인 로고 붓글씨 #010100, 1965원조제일돌곱창 간판 글씨 #242528에
     칸세이스시 원목 격자(#634a33)의 갈색 기운을 섞어 순수 검정을 피했다. paper 위 15.10:1 */
  --ink: #1E1A16;

  /* 보조 글자 — 호두나무. 칸세이스시 내부 원목 격자 기둥 중앙값 #634a33. paper 위 7.65:1 */
  --walnut: #5E4631;
  /* 캡션·메타 — 같은 원목의 밝은 면. paper 위 5.17:1, paper-2 위 4.65:1 */
  --walnut-soft: #76604C;

  /* 어두운 구역(히어로·푸터) — 영미오리탕 내부 벽 하단 목재 판넬 #2d1909, 1965원조제일돌곱창 외관 창틀 그늘 #3a2010 */
  --night: #241A13;
  --night-2: #33261C;

  /* 포인트 — 인주(낙관) 빨강.
     칸세이스시 로고 낙관 #d60409, 밥장인 로고 낙관 '飯' #de030a, 제일돌곱창 간판 '원조' #8f3137.
     로고 원색은 화면 글자로 쓰기엔 대비가 모자라 명도를 낮춤. paper 위 5.71:1 */
  --seal: #B3261E;
  /* 큰 글씨·장식·어두운 바탕 위 선. paper 위 4.19:1, night 위 3.55:1 → 3:1 기준 용도만 */
  --seal-bright: #D23A26;

  /* 보조 포인트 — 화정떡갈비 주간 간판 주황 #ba6342. paper 위 3.95:1 → 그래프·장식 전용 */
  --terracotta: #B45F3E;
  /* 배지 — 영미오리탕 가게 앞 노란 대기 의자 #c59735. 글자는 ink로 얹음(6.72:1), night 위 글자 6.63:1 */
  --mustard: #C99A3A;
  /* 나뭇결 — 화정떡갈비 내부 원목 의자 #c07513 */
  --honey: #B9772F;
  /* 구분선 — 화정떡갈비 내부 석재 벽 #8a745d 를 바탕 가까이 밝힘 */
  --rule: #D5C8B5;
  --rule-night: rgba(244, 239, 230, 0.14);

  /* 글꼴 — 제목: Hahmlet(현대 한글 명조, 간판 붓글씨의 획 끝 느낌) / 본문: Pretendard */
  --font-display: 'Hahmlet GJ', 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --font-body: 'Pretendard GJ', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  /* 글자 크기 — Major Third(×1.25) */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-hero: clamp(4.2rem, 14vw, 11.5rem);

  /* 간격 — 4px 단위 */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;

  --radius: 4px;
  --shadow-md: 0 6px 18px rgba(36, 26, 19, 0.10);
  --shadow-lg: 0 18px 44px rgba(36, 26, 19, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════ 기본 ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  word-break: keep-all;          /* 한글이 단어 중간에서 끊기지 않게 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 0;
}
/* 필름 그레인 — 한지·필름 질감을 화면 전체에 옅게 얹는다.
   노이즈 SVG는 200px 타일로만 그려 반복한다(화면 크기로 그리면 고해상도 폰에서 첫 화면 그리기가 느려진다) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.045; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, picture, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--seal) 55%, transparent); }
a:hover { color: var(--seal); text-decoration-color: var(--seal); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--walnut-soft); }
.num, .hours td, .compare td, .menu-table td { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper);
  padding: 0.7rem 1rem; border-radius: var(--radius); text-decoration: none; transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 3rem); }

/* ═══════════ 낙관(도장) ═══════════ */
.seal {
  display: inline-grid; place-items: center; background: var(--seal); color: var(--paper);
  font-family: var(--font-display); font-weight: 800; line-height: 1; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--seal), inset 0 0 0 3px color-mix(in srgb, var(--paper) 70%, transparent);
}
.seal--brand { width: 2.6rem; height: 2.6rem; font-size: 0.78rem; letter-spacing: 0.02em; transform: rotate(-4deg); padding: 0.2rem; }
.seal--brand span { display: block; text-align: center; }
.seal--num { width: 3.2rem; height: 3.2rem; font-size: 1.35rem; transform: rotate(-4deg); }
.seal--mini { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; flex: none; }

/* ═══════════ 머리·꼬리 ═══════════ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; min-height: 44px; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.site-nav ul { display: flex; gap: 0.15rem; list-style: none; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; text-decoration: none;
  font-weight: 600; font-size: var(--text-sm); color: var(--walnut); border-radius: var(--radius);
}
.site-nav a:hover { color: var(--seal); }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--seal); border-radius: 0; }
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; min-height: 0; padding-block: 0.4rem 0; }
  .site-nav { width: calc(100% + 2rem); margin-inline: -1rem; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { padding-inline: 0.5rem; }
  .site-nav a { padding: 0 0.65rem; white-space: nowrap; }
}
@media (max-width: 380px) {
  /* 320px 폰에서도 메뉴 여섯 개가 다 보이게 — 간격을 줄이고 고르게 편다 */
  .site-nav ul { gap: 0; padding-inline: 0.25rem; justify-content: space-between; }
  .site-nav a { padding: 0 0.4rem; }
}

.site-footer { background: var(--night); color: var(--paper-3); margin-top: var(--space-24); padding-block: var(--space-16) var(--space-8); }
.site-footer a { color: var(--paper); text-decoration-color: color-mix(in srgb, var(--paper) 35%, transparent); }
.site-footer a:hover { color: var(--mustard); text-decoration-color: var(--mustard); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); }
.footer-brand .seal { margin-bottom: var(--space-4); }
.footer-brand p { max-width: 40em; }
.footer-meta { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--paper-3); }
.footer-head { font-family: var(--font-display); font-weight: 700; color: var(--mustard); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.2rem; }
.site-footer li a { display: inline-block; padding-block: 0.35rem; }
.footer-bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--rule-night); font-size: var(--text-xs); color: color-mix(in srgb, var(--paper-3) 88%, var(--night)); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ═══════════ 공통 조각 ═══════════ */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.band { background: var(--paper-2); }
.section-head { max-width: 46rem; margin-bottom: var(--space-12); }
.section-label {
  display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; color: var(--walnut-soft); margin-bottom: var(--space-4);
}
.dot { width: 0.5rem; height: 0.5rem; background: var(--seal); border-radius: 1px; transform: rotate(45deg); }
.section-title { font-size: clamp(2rem, 4.8vw, 3.4rem); margin-bottom: var(--space-6); }
.lede { font-size: clamp(1.08rem, 1.6vw, var(--text-lg)); color: var(--walnut); max-width: 40em; }
.meta { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--walnut-soft); }
.kicker { font-size: var(--text-sm); font-weight: 600; color: var(--walnut-soft); letter-spacing: 0.02em; margin-bottom: var(--space-3); }
/* 사진 위 머리말 — 하늘(밝은 파랑) 위에 얹히므로 겨자색 글자 대신 밝은 글자 + 겨자색 선 (배경 실측 대비 4.5:1 이상) */
.kicker--light { color: var(--paper-3); display: inline-flex; align-items: center; gap: 0.6rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.kicker--light::before { content: ''; width: 1.6rem; height: 2px; background: var(--mustard); flex: none; }
.badge { display: inline-block; padding: 0.05rem 0.45rem; margin-right: 0.3rem; border-radius: 2px; background: var(--mustard); color: var(--ink); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.04em; vertical-align: 0.08em; }
.minor { font-size: var(--text-xl); margin: var(--space-12) 0 var(--space-4); }
.note { font-size: var(--text-sm); color: var(--walnut-soft); margin-top: var(--space-3); }
.link-arrow { font-weight: 700; color: var(--seal); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.link-arrow::after { content: '→'; margin-left: 0.45rem; transition: transform 0.2s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }
.src { font-size: var(--text-xs); color: var(--walnut-soft); white-space: nowrap; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border-radius: 2px;
  background: var(--seal); color: var(--paper); font-weight: 700; text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn:hover { color: var(--paper); transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--seal) 28%, transparent); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover { color: var(--seal); box-shadow: inset 0 0 0 1.5px var(--seal); }

.crumbs { padding-top: var(--space-6); font-size: var(--text-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; color: var(--walnut-soft); }
.crumbs li + li::before { content: '/'; margin-right: 0.35rem; color: var(--rule); }
.crumbs a { color: var(--walnut); }

/* ═══════════ 홈 히어로 스크롤 씬 ═══════════ */
.scene { background: var(--night); color: var(--paper); position: relative; }
.scene-stage { position: relative; overflow: hidden; }
.scene-photo { display: block; overflow: hidden; }
.scene-photo img { width: 100%; height: min(88vh, 56.25vw); object-fit: cover; object-position: 50% 50%; transform-origin: 52% 62%; }
.scene-veil, .scene-veil-l { position: absolute; inset: 0; pointer-events: none; }
.scene-veil { background: linear-gradient(0deg, rgba(20, 14, 10, 0.78) 0%, rgba(20, 14, 10, 0) 38%); }
/* 왼쪽 가림막은 제목 글자를 받치는 용도 — 스크롤 모드에서는 제목과 함께 사라진다(scene.js) */
.scene-veil-l { background: linear-gradient(90deg, rgba(20, 14, 10, 0.86) 0%, rgba(20, 14, 10, 0.55) 34%, rgba(20, 14, 10, 0) 62%); }
.scene-overlay { position: static; }
.ov-title { position: absolute; left: clamp(1rem, 6vw, 5rem); bottom: clamp(2.5rem, 9vh, 6rem); max-width: 40rem; z-index: 2; }
.hero-title { font-size: var(--text-hero); line-height: 0.92; letter-spacing: -0.045em; color: var(--paper); margin: 0.2rem 0 var(--space-6); }
.hero-title .w { display: inline-block; }
.hero-title .w:first-child { color: var(--paper-3); }
.hero-lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--paper-3); max-width: 31em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.ov-card { background: var(--night-2); border: 1px solid var(--rule-night); border-radius: var(--radius); padding: var(--space-6); }
.ov-best, .ov-districts { position: relative; z-index: 2; margin: var(--space-6) clamp(1rem, 6vw, 5rem); }
.ov-label { font-family: var(--font-display); font-weight: 700; color: var(--mustard); margin-bottom: var(--space-3); letter-spacing: -0.01em; }
.ov-card ol, .ov-card ul { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.ov-card a { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; text-decoration: none; color: var(--paper); padding-block: 0.25rem; }
.ov-card a:hover { color: var(--mustard); }
.ov-name { font-weight: 700; }
.ov-sub { color: var(--paper-3); font-size: var(--text-sm); margin-left: auto; padding-left: 1rem; white-space: nowrap; }
.ov-districts ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.ov-districts a { flex-direction: column; align-items: flex-start; gap: 0; border-top: 1px solid var(--rule-night); padding-top: 0.6rem; }
.ov-districts li { min-width: 0; }
.ov-districts .ov-sub { margin-left: 0; padding-left: 0; white-space: normal; overflow-wrap: anywhere; }
.scene-rail, .scene-cue { display: none; }
.scene-credit { font-size: 0.72rem; color: var(--paper-3); opacity: 0.85; padding: 0.6rem clamp(1rem, 6vw, 5rem) 1rem; }
.scene-credit a { color: inherit; white-space: nowrap; }
.scene-on .scene-credit { position: absolute; left: clamp(1rem, 6vw, 5rem); right: clamp(1rem, 6vw, 5rem); bottom: 0.55rem; padding: 0; z-index: 3; pointer-events: auto; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }

/* JS가 첫 프레임을 읽은 뒤에만 켜지는 스크롤 모드 */
.scene-on .scene-track { height: 320vh; }
.scene-on .scene-stage { position: sticky; top: var(--header-h, 0px); height: calc(100vh - var(--header-h, 0px)); height: calc(100svh - var(--header-h, 0px)); }
.scene-on .scene-photo { position: absolute; inset: 0; }
.scene-on .scene-photo img { height: 100%; will-change: transform; }
.scene-on .scene-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scene-on .ov { will-change: opacity, transform; }
.scene-on .ov-card { position: absolute; margin: 0; background: rgba(51, 38, 28, 0.86); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); visibility: hidden; opacity: 0; }
.scene-on .ov-best { left: clamp(1rem, 6vw, 5rem); top: 50%; margin-top: -12.5rem; width: min(30rem, 44vw); }
.scene-on .ov-districts { left: clamp(1rem, 6vw, 5rem); right: clamp(1rem, 6vw, 5rem); bottom: clamp(3rem, 10vh, 6rem); }
.scene-on .scene-rail { display: block; position: absolute; left: 50%; bottom: 2.1rem; width: clamp(160px, 28vw, 340px); margin-left: calc(clamp(160px, 28vw, 340px) / -2); height: 2px; background: rgba(244, 239, 230, 0.18); }
.scene-on .scene-rail-fill { display: block; height: 100%; background: var(--seal-bright); transform-origin: left; transform: scaleX(0); }
.scene-on .scene-cue { display: block; position: absolute; right: clamp(1rem, 5vw, 4.5rem); bottom: 1.8rem; font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--paper-3); }
.scene-on .scene-cue span::after { content: ' ↓'; }
@media (max-width: 767px) {
  .scene-photo img { height: auto; aspect-ratio: 3 / 4; object-position: 50% 30%; transform-origin: 50% 34%; }
  .scene-on .scene-photo img { height: 100%; aspect-ratio: auto; }
  .scene-on .scene-credit { left: 1rem; right: 1rem; bottom: 0.45rem; font-size: 0.66rem; line-height: 1.45; }
  .scene-on .scene-rail { left: 0; right: 0; top: 0; bottom: auto; width: auto; margin-left: 0; }
  .ov-title { left: 1rem; right: 1rem; bottom: 2rem; }
  .hero-title { font-size: clamp(4rem, 22vw, 6rem); }
  .ov-districts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-on .scene-track { height: 260vh; }
  .scene-veil { background: linear-gradient(0deg, rgba(20, 14, 10, 0.94) 0%, rgba(20, 14, 10, 0.72) 38%, rgba(20, 14, 10, 0) 66%); }
  .scene-veil-l { display: none; }
  .scene-on .ov-title { bottom: 2.4rem; }
  .scene-on .ov-best, .scene-on .ov-districts { left: 1rem; right: 1rem; top: auto; bottom: 3.6rem; margin-top: 0; width: auto; max-height: 62svh; overflow-x: hidden; overflow-y: auto; }
  .ov-best a { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0; align-items: center; }
  .ov-best .seal--mini { grid-row: span 2; }
  .ov-best .ov-name, .ov-best .ov-sub { grid-column: 2; }
  .ov-best .ov-sub { margin-left: 0; padding-left: 0; white-space: normal; }
  .scene-on .ov-card { background: rgba(51, 38, 28, 0.9); }
  .scene-on .scene-cue { display: none; }
  .ov-sub { font-size: var(--text-xs); }
}

/* ═══════════ 추천 목록(픽) ═══════════ */
.picks { padding-block: var(--space-8) var(--space-16); }
.pick { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-12); border-top: 1px solid var(--rule); }
.pick:last-child { border-bottom: 1px solid var(--rule); }
.pick-title { font-size: clamp(1.65rem, 3.2vw, 2.35rem); margin-bottom: var(--space-4); }
.pick-title a { text-decoration: none; }
.pick-summary { font-size: var(--text-lg); color: var(--walnut); max-width: 42em; margin-bottom: var(--space-6); }
.pick-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); max-width: 60rem; }
.pick-facts div { border-left: 2px solid var(--rule); padding-left: var(--space-4); }
.pick-facts dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--walnut-soft); }
.pick-facts dd { margin: 0.15rem 0 0; }
.pick-more { margin-top: var(--space-4); }
.picks--home .pick:nth-child(even) { grid-template-columns: minmax(0, 1fr) 5rem; }
.picks--home .pick:nth-child(even) .pick-num { order: 2; justify-self: end; }
/* 가게 제공 사진이 있는 추천 — 오른쪽(홈 짝수 줄은 왼쪽)에 사진 */
.pick--photo { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 20rem); }
.pick-photo { margin: 0; align-self: start; }
.pick-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.pick-photo figcaption { margin-top: var(--space-2); }
.picks--home .pick--photo:nth-child(even) { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) 5rem; }
.picks--home .pick--photo:nth-child(even) .pick-photo { order: -1; }
@media (max-width: 960px) {
  .pick--photo { grid-template-columns: 5rem minmax(0, 1fr); }
  .picks--home .pick--photo:nth-child(even) { grid-template-columns: minmax(0, 1fr) 5rem; }
  .pick--photo .pick-photo { grid-column: 2; grid-row: 1; max-width: 28rem; }
  .pick--photo .pick-body { grid-column: 2; grid-row: 2; }
  .pick--photo .pick-num { grid-row: 1 / span 2; }
  .picks--home .pick--photo:nth-child(even) .pick-photo, .picks--home .pick--photo:nth-child(even) .pick-body { grid-column: 1; }
  .picks--home .pick--photo:nth-child(even) .pick-num { grid-column: 2; }
}
@media (max-width: 760px) {
  .pick, .picks--home .pick:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-8); }
  .pick--photo .pick-photo, .pick--photo .pick-body, .pick--photo .pick-num,
  .picks--home .pick--photo:nth-child(even) .pick-photo, .picks--home .pick--photo:nth-child(even) .pick-body, .picks--home .pick--photo:nth-child(even) .pick-num { grid-column: 1; grid-row: auto; }
  .pick--photo .pick-photo { order: 1; max-width: none; }
  .pick--photo .pick-body { order: 2; }
  .picks--home .pick:nth-child(even) .pick-num { order: 0; justify-self: start; }
  .pick-facts { grid-template-columns: 1fr; }
}

/* ═══════════ 표 ═══════════ */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.table-wrap:focus-visible { outline-offset: 2px; }
.compare { min-width: 760px; font-size: var(--text-sm); }
.compare caption { text-align: left; padding: var(--space-4); font-weight: 700; color: var(--walnut); }
.compare th, .compare td, .menu-table th, .menu-table td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.compare thead th, .menu-table thead th { background: var(--paper-3); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--walnut); border-top: 0; }
.compare tbody th a { font-weight: 700; }
.compare tbody th .muted { display: block; font-weight: 400; font-size: var(--text-xs); }
.menu-table { min-width: 560px; }
.menu-table tbody th { font-weight: 700; }
.menu-table td.num { white-space: nowrap; font-weight: 700; }

/* ═══════════ 홈: 25곳 목록 · 음식 · 안내 · 듣기 ═══════════ */
.index-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
.index-title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.index-title a { text-decoration: none; }
.index-hook { font-size: var(--text-sm); color: var(--walnut-soft); margin-bottom: var(--space-4); }
.index-col ol { padding: 0; list-style: none; counter-reset: i; display: grid; gap: 0.1rem; }
.index-col li { counter-increment: i; display: grid; grid-template-columns: 1.6rem 1fr; padding-block: 0.45rem; border-top: 1px solid var(--rule); }
.index-col li::before { content: counter(i, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--seal); font-size: var(--text-sm); grid-row: span 2; }
.index-col li a { font-weight: 700; text-decoration: none; }
.index-col li .muted { font-size: var(--text-xs); grid-column: 2; }
.index-grid.situations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); }
@media (max-width: 1080px) { .index-grid, .index-grid.situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .index-grid, .index-grid.situations { grid-template-columns: 1fr; } }

.food-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); }
.food dt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); letter-spacing: -0.02em; border-left: 4px solid var(--seal); padding-left: var(--space-4); margin-bottom: var(--space-3); }
.food dd { margin: 0; padding-left: calc(var(--space-4) + 4px); }
.food-links { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--walnut-soft); }
@media (max-width: 760px) { .food-list { grid-template-columns: 1fr; } }

.notice { background: var(--paper-2); }
.notice-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
.notice-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.notice-grid p + p { margin-top: var(--space-4); }
@media (max-width: 860px) { .notice-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.listen { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: start; }
.listen audio { width: 100%; margin-bottom: var(--space-4); }
.transcript { border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.transcript summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.transcript p { color: var(--walnut); margin-top: var(--space-3); }
@media (max-width: 860px) { .listen { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ═══════════ 구 페이지 ═══════════ */
.d-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: var(--space-8) var(--space-16); position: relative; }
.d-title { font-size: clamp(2.6rem, 6.8vw, 5.3rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: var(--space-6); }
.d-index { list-style: none; padding: 0; margin-top: var(--space-8); border-top: 1px solid var(--rule); }
.d-index a { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 0.5rem; min-height: 48px; padding-block: 0.6rem; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 700; }
.d-index a:hover { color: var(--seal); }
.d-index-num { font-family: var(--font-display); color: var(--seal); }
.d-index .muted { font-weight: 400; font-size: var(--text-sm); }
.d-hero-img, .r-scene { margin: 0; }
.d-hero-img img, .r-scene img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.d-hero-img { margin-top: var(--space-8); transform: rotate(1.2deg); }
/* 구 첫 화면 — 추천 식당 실제 사진 세 장 */
.d-mosaic { margin: var(--space-8) 0 0; }
.d-mosaic-grid { list-style: none; padding: 0; display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: var(--space-3); aspect-ratio: 5 / 4; }
.d-mosaic-grid li { min-height: 0; }
.d-mosaic-grid .m1 { grid-row: 1 / span 2; }
.d-mosaic-grid li:only-child { grid-column: 1 / -1; }
.d-mosaic-grid a, .d-mosaic-grid picture { display: block; height: 100%; }
.d-mosaic-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); transition: transform 0.35s var(--ease-out); }
.d-mosaic-grid a:hover img { transform: scale(1.02); }
.d-mosaic-grid .m1 img { box-shadow: var(--shadow-lg); }
figcaption { font-size: var(--text-xs); color: var(--walnut-soft); margin-top: var(--space-3); }
.d-hero-img figcaption { transform: rotate(-1.2deg); }
.context { padding-block: var(--space-16); }
.context-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-12); }
.context-body p + p { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .d-hero { grid-template-columns: 1fr; padding-bottom: var(--space-8); }
  .d-hero-img { transform: none; margin-top: 0; }
  .d-hero-img figcaption { transform: none; }
  .context-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ═══════════ 식당 페이지 ═══════════ */
.r-head { max-width: 52rem; padding-block: var(--space-8) var(--space-12); }
.r-title { font-size: clamp(2.4rem, 6.2vw, 4.6rem); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: var(--space-6); }
.r-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.facts { display: grid; }
.facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--rule); }
.facts dt { font-weight: 700; font-size: var(--text-sm); color: var(--walnut); padding-top: 0.1rem; }
.facts dd { margin: 0; }
.hours { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.hours th { text-align: left; font-weight: 700; padding: 0.25rem 1rem 0.25rem 0; white-space: nowrap; vertical-align: top; width: 1%; }
.hours td { padding: 0.25rem 0; }
.hours tr.is-closed { color: var(--seal); }
.block { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.block-title { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: var(--space-6); display: flex; align-items: center; gap: 0.7rem; }
.block-title::before { content: ''; width: 0.7rem; height: 0.7rem; background: var(--seal); transform: rotate(45deg); border-radius: 1px; flex: none; }
.block p + p { margin-top: var(--space-4); }
.block > p { max-width: 44em; }
.tips { padding-left: 1.2rem; display: grid; gap: var(--space-2); max-width: 46em; }
.tips li::marker { color: var(--seal); }
.bars { list-style: none; padding: 0; display: grid; gap: var(--space-3); max-width: 46rem; }
.bars li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr 4.5rem; align-items: center; gap: var(--space-4); }
.bar { height: 0.7rem; background: var(--paper-3); border-radius: 1px; overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w); background: var(--terracotta); }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-sm); }
.sourced { padding-left: 1.2rem; display: grid; gap: var(--space-3); max-width: 50em; }
.map-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-6) var(--space-3); }
.more-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.more-list a { display: grid; padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; min-height: 44px; transition: border-color 0.2s var(--ease-out); }
.more-list a:hover { border-color: var(--seal); }
.more-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.more-cat { font-size: var(--text-sm); color: var(--walnut-soft); }
/* 실제 사진 보기 — 방문자·블로그 사진은 원래 있는 곳으로 링크 */
.r-side { display: grid; gap: var(--space-8); }
.side-title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.r-photos .note { margin-top: 0; margin-bottom: var(--space-4); }
.photo-links { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.photo-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: center; min-height: 52px; padding-block: 0.65rem; border-bottom: 1px solid var(--rule); text-decoration: none; }
.photo-links a::after { content: '↗'; grid-column: 2; grid-row: 1 / span 2; color: var(--seal); font-weight: 700; transition: transform 0.2s var(--ease-out); }
.photo-links a:hover .pl-name { color: var(--seal); }
.photo-links a:hover::after { transform: translate(2px, -2px); }
.pl-name { font-weight: 700; grid-column: 1; }
.pl-sub { grid-column: 1; font-size: var(--text-xs); color: var(--walnut-soft); overflow-wrap: anywhere; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6); }
.gallery .o-photo { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.r-scene.is-owner img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .r-grid { grid-template-columns: 1fr; }
  .r-scene, .r-photos { max-width: 30rem; }
  /* 휴대폰: 사진은 제목 바로 아래로, 기본 정보 다음에 '실제 사진 보기' (HTML 순서는 그대로 — 정보가 먼저) */
  .r-side { display: contents; }
  .r-side .r-scene { order: -1; }
  .r-side .r-photos { order: 1; }
}
@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .bars li { grid-template-columns: 1fr 3.5rem; }
  .bars .bar { grid-column: 1 / -1; grid-row: 2; }
  .more-list { grid-template-columns: 1fr; }
}

/* ═══════════ 자주 묻는 질문 ═══════════ */
.faq-list { border-top: 1px solid var(--rule); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; gap: 0.8rem; align-items: baseline; padding-block: var(--space-4); min-height: 48px; font-weight: 700; font-size: var(--text-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font-family: var(--font-display); color: var(--seal); transition: transform 0.2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .q { font-family: var(--font-display); color: var(--seal); }
.faq details p { padding: 0 0 var(--space-6) 1.9rem; color: var(--walnut); max-width: 44em; }

/* ═══════════ 검색 카드 타일 6장 (모바일에서도 숨기지 않음) ═══════════ */
.tiles { padding-block: clamp(4rem, 8vw, 6.5rem) 0; }
.tile-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); }
.tile a { display: block; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); transition: transform 0.45s var(--ease-out); }
.tile a { overflow: hidden; }
.tile a:hover img { transform: scale(1.025); }
.tile-caption { display: block; margin-top: 0.65rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }
.tile.is-current img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--seal); }
.tile.is-current .tile-caption { color: var(--seal); }
@media (max-width: 640px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile-caption { font-size: var(--text-base); } }

/* 숨은 ItemList 블록 — meta/link만 있어 화면에 그려지지 않는다. display:none을 쓰지 않는다 */
.credits { list-style: none; padding: 0; display: grid; gap: var(--space-3); max-width: 52rem; border-top: 1px solid var(--rule); }
.credits li { padding-block: var(--space-3); border-bottom: 1px solid var(--rule); display: grid; gap: 0.15rem; }
.credit-use { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--walnut-soft); }
.credit-what { font-weight: 700; }
.credit-line { font-size: var(--text-sm); color: var(--walnut); }
.itemlist-data { height: 0; overflow: hidden; }

/* ═══════════ 등장 연출 ═══════════ */
.rv-pending > * { opacity: 0; transform: translate3d(0, 18px, 0); }
.rv-pending.rv-in > * {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-out) calc(var(--i, 0) * 80ms), transform 0.7s var(--ease-out) calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .d-hero-img, .d-hero-img figcaption, .seal--num, .seal--brand { transform: none; }
}