/* ═══════════════════════════════════════════════════════════════════
   색·글꼴·간격 토큰 — 1965원조제일돌곱창 상무점

   색은 디자인 스킬의 기본 취향(크림·베이지 바탕)이 아니라, 가게의 '공간과 브랜드' 사진에서 잰 값에서 왔다.
   잰 방법·영역: tools/sample-colors.py → research/palette-measured.json, 판단 기록: research/PALETTE.md
   - 쓴 사진: 간판·외관(가게가 올린 exterior-2020.jpg), 실내 벽·바닥·천장·식탁·의자·배기 덕트(방문자 사진 — 색 근거로만)
   - 안 쓴 것: 음식(빨간 전골·양념), 메뉴판, 사람·옷, 이영자 캠페인 포스터, 같은 건물 다른 가게 네온,
     밤 조명에 푸르게 찍힌 간판 바탕(#b1bfd0), 그늘에 어둡게 찍힌 문틀(#702c21)
   - 판정: 흰 판벽·흰 간판이 면적을 차지하는 밝고 깨끗한 공간 + 소나무 가구·적갈색 바닥·전구색 조명의 따뜻함.
     그래서 바탕은 크림(노란 기)이 아니라 '살짝 따뜻한 흰색'으로, 글자는 간판 붓글씨의 남색 기 도는 먹색으로 간다.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 바탕: 가게의 흰 벽과 흰 간판 ── */
  --paper:      #F5F3EE; /* 실내 흰 벽 wall-left #e0d7d3·wall-mid #ded9c1 (blog_delighto-o-03)의 색상 18–50°·낮은 채도를 유지하고
                            명도만 화면 바탕 수준으로 올림. 간판 바탕이 순백이라 노란 기(크림)는 빼고 아주 약하게만 따뜻하게 */
  --paper-2:    #ECE8E1; /* 같은 벽의 그늘진 면 wall-2 #c3b9a1 (diningcode_5057522) 방향으로 한 단계 — 구역 나눔 바탕 */
  --paper-3:    #E2DDD4; /* 한 단계 더 — 표·카드 테두리 안쪽 */

  /* ── 글자: 간판 붓글씨 ── */
  --ink:        #1C1F27; /* 간판 '제일돌곱창' 붓글씨 sign-ink #1b2031 (exterior-2020 로고 가림판 글자 픽셀 중앙값)과
                            노출 천장 ceiling-2 #202127 — 순수 검정이 아니라 남색 기가 도는 먹색 */
  --ink-2:      #4A4D56; /* 본문 보조 글자 — 먹색을 옅게(대비 7:1 이상 유지) */

  /* ── 포인트: 간판 '원조' 붉은 글씨 · 붉은 문틀 ── */
  --seal:       #AB222B; /* 간판 '원조' sign-red #ab222b 그대로 (paper 위 6.4:1 — 글자에도 쓸 수 있음). 입구 붉은 문틀과 같은 계열 */
  --seal-light: #E0565C; /* 어두운 구역(char) 위에서만 쓰는 밝은 인주색 — 큰 글자·선 전용 */

  /* ── 재질: 바닥·가구·덕트 ── */
  --floor:      #7A4A37; /* 적갈색 에폭시 바닥 floor #8c5e4c (blog_delighto-o-03)·floor-2 #75503a (diningcode_5057522) 사이,
                            글자로도 쓰도록 조금 짙게 */
  --pine:       #D3A983; /* 소나무 원목 식탁 윗면 table #d2a585 (blog_delighto-o-03) — 선·배지 바탕 */
  --pine-deep:  #8C6843; /* 그늘진 X자 의자 chair #916c40 (diningcode_5057522) — 장식 선 */
  --steel:      #8A8B8D; /* 스테인리스 배기 덕트 duct #807e7d (blog_delighto-o-03) — 가는 선·아이콘 */

  /* ── 어두운 구역: 노출 천장 ── */
  --char:       #22242A; /* 노출 천장 ceiling #29272b·ceiling-2 #202127 — 어두운 구역 바탕(순수 검정 아님) */
  --char-2:     #2D3038; /* 한 단계 밝게 */
  --mist:       #C9C6C0; /* 어두운 구역의 보조 글자 */

  /* ── 의미 토큰 ── */
  --bg: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --accent: var(--seal);
  --rule: #D8D2C8;       /* 가는 구분선 — paper 위에서 보일 만큼만 */

  /* ── 글꼴 ── */
  --font-display: 'Song Myung', 'Noto Serif KR', serif;         /* 송명체 — 붓 맛이 남은 명조, 간판 붓글씨와 결을 맞춤 */
  --font-body: 'Plex KR', 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* 글자 크기 — 한 단계에 ×1.25 */
  --t-xs: 0.8rem;
  --t-sm: 0.9rem;
  --t-base: 1.0625rem;   /* 17px — 한글 본문은 16px보다 한 치 크게 */
  --t-lg: 1.25rem;
  --t-xl: 1.563rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;
  --t-4xl: 3.052rem;
  --t-hero: clamp(3.4rem, 11vw, 10.5rem);

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

  --wrap: 1180px;
  --gutter: clamp(1rem, 5vw, 3rem);
  --radius: 2px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 10px 30px color-mix(in srgb, var(--char) 14%, transparent);
}

@font-face {
  font-family: 'Song Myung';
  src: url('/assets/fonts/song-jeil.woff2?v=955f713d11') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex KR';
  src: url('/assets/fonts/plex-jeil-400.woff2?v=955f713d11') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex KR';
  src: url('/assets/fonts/plex-jeil-600.woff2?v=955f713d11') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════
   1965원조제일돌곱창 상무점 — 사이트 스타일
   톤: 흰 판벽·흰 간판 위의 먹색 붓글씨, 인주색 '원조' 한 점. 소나무 가구·적갈색 바닥·노출 천장은 보조색.
   카드·유리 효과·보라색 그라데이션 같은 흔한 장식은 쓰지 않는다(frontend-design 스킬 금지 목록).
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;          /* 한글이 낱자로 끊기지 않게 */
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--seal); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.d-font { font-family: var(--font-display); font-weight: 400; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 760px); }

/* ── 건너뛰기 링크 ── */
.skip-link { position: fixed; left: 50%; top: -100px; transform: translateX(-50%); z-index: 1000; padding: 0.7rem 1.2rem; background: var(--ink); color: var(--paper); border-radius: 0 0 4px 4px; font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 0; color: var(--paper); }

/* ── 머리말 ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(1px)) { .site-header { backdrop-filter: saturate(140%) blur(10px); } }
.header-inner { display: flex; align-items: center; gap: var(--s-6); min-height: 64px; }
.brand { display: inline-flex; align-items: flex-end; gap: 0.55rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-mark .logo { height: 30px; width: auto; }
.brand-branch { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; color: var(--ink-2); padding-bottom: 2px; }
.bm-wonjo { color: var(--seal); font-family: var(--font-display); margin-right: 0.2em; }
.bm-name { font-family: var(--font-display); font-size: 1.4rem; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--s-6); list-style: none; }
.site-nav a { text-decoration: none; font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--seal); }
@media (max-width: 1180px) { .site-nav ul { gap: var(--s-4); } .hc-label { display: none; } }
.header-call { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: var(--radius); font-size: var(--t-sm); font-weight: 600; min-height: 44px; }
.header-call:hover { background: var(--seal); color: var(--paper); }
.hc-label { opacity: 0.7; font-weight: 400; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; min-height: 58px; }
  .brand-mark .logo { height: 26px; }
  .hc-num { display: none; }
}

/* ── 공통 글·버튼 ── */
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; color: var(--floor); margin-bottom: var(--s-3); }
.eyebrow--light { color: var(--pine); }
.seal-dot { width: 0.55rem; height: 0.55rem; background: var(--seal); display: inline-block; }
.block-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: var(--s-4); text-wrap: balance; }
.block-body { color: var(--text-2); max-width: 60ch; margin-bottom: var(--s-4); }
.block-body.small, .small { font-size: var(--t-sm); }
.mini-title { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.08em; color: var(--floor); margin-bottom: var(--s-3); }
.sub-title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); margin: var(--s-8) 0 var(--s-3); }
.text-link { display: inline-flex; gap: 0.4rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link--light { color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.25rem; border-radius: var(--radius); font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.02em; text-decoration: none; border: 1px solid transparent; transition: background-color 0.2s var(--ease-out), color 0.2s, transform 0.2s var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--seal { background: var(--seal); color: var(--paper); }
.btn--seal:hover { background: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--seal); color: var(--paper); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { border-color: var(--paper); color: var(--paper); }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn--lg { min-height: 56px; padding: 0.9rem 1.6rem; font-size: var(--t-base); }
.btn-sub { font-weight: 400; opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ── 지금 영업 중 ── */
.open-now { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--t-sm); font-weight: 600; margin: var(--s-2) 0; }
.on-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--steel); flex-shrink: 0; }
.open-now.is-open .on-dot { background: #2F7D4F; box-shadow: 0 0 0 4px color-mix(in srgb, #2F7D4F 18%, transparent); }
.open-now.is-closed .on-dot { background: var(--seal); }

/* ═══════════════════ 첫 화면 스크롤 영상 (cinematic-scroll-engine + scene-overlay-engine) ═══════════════════
   구조: .film > .film-stage(sticky 무대: 영상 .film-media + 가림막 + 글 구역 .film-overlays) + .film-track(스크롤 길이만)
   글 구역은 무대 안에 떠 있어 화면 가운데에서 나타났다 사라진다(scene-overlay-engine 방식).
   JS가 없거나 동작 줄이기면(.film-on 없음) 영상 띠 아래로 글이 차례대로 흐른다. */
@property --scrim-top { syntax: '<percentage>'; inherits: true; initial-value: 55%; }
.film { transition: --scrim-top 0.6s var(--ease-out); }
.film { position: relative; --circle-r: 30; --circle-x: 70; --circle-y: 53; --mx: 19vw; --my: 6vh; --ms: 0.6; --mo: 51% 47%; }
.film-stage { position: relative; }
.film-media { position: relative; height: 62vh; min-height: 360px; overflow: hidden; background: var(--paper-2); }
.film-poster, .film-poster img, #film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-poster img { object-fit: cover; }
#film-canvas { opacity: 0; transition: opacity 0.4s var(--ease-out); }
.film-scrim, .film-marquee, .film-progress, .film-track { display: none; }
.film-status { position: absolute; left: var(--gutter); top: calc(62vh - 2rem); font-size: var(--t-xs); color: var(--ink-2); z-index: 4; }
.sound-toggle { display: none; }
.film-sec { padding: var(--s-16) 0; }
.film-sec .sec-inner { width: min(100% - 2 * var(--gutter), 620px); margin-inline: auto; }
.sec-label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em; color: var(--floor); margin-bottom: var(--s-4); }
.sec-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.4rem); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: var(--s-4); text-wrap: balance; }
.sec-body { color: var(--text-2); max-width: 44ch; }
.sec-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.sec-note { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-2); }
.hero-title { display: flex; flex-direction: column; gap: 0.05em; line-height: 0.98; margin-bottom: var(--s-6); }
/* H1 첫 줄 — 지역(광주 서구 맛집)과 SINCE 1965. 제목 글꼴이 아니라 본문 글꼴 이름표로 */
.hero-title .ht-kicker { font-family: var(--font-body); line-height: 1.4; margin-bottom: var(--s-3); }
.hero-title .ht-wonjo { font-size: clamp(1.6rem, 2.6vw, 2.8rem); color: var(--seal); letter-spacing: 0.02em; }
.ht-name { letter-spacing: -0.02em; white-space: nowrap; font-size: clamp(3.2rem, 8.6vw, 8.2rem); }
.hero-title .ht-branch { font-family: var(--font-body); font-size: clamp(0.85rem, 1.1vw, 1.1rem); font-weight: 600; letter-spacing: 0.3em; color: var(--ink-2); margin-top: 0.4em; }
.hero-lead { font-size: var(--t-lg); line-height: 1.6; color: var(--ink); max-width: 30ch; }
.hero-facts { margin-top: var(--s-6); }
/* 영상 첫 장면의 선정 배지 — 맛집노트(도메인)·목록 페이지 링크 */
.hero-awards { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.hero-awards-by { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--floor); letter-spacing: 0.02em; }
.hero-awards a { color: inherit; text-decoration-color: color-mix(in srgb, var(--seal) 60%, transparent); text-underline-offset: 0.2em; }
.hero-addr { font-size: var(--t-sm); color: var(--text-2); }
.scroll-cue { display: none; }
.facts-row { display: flex; gap: var(--s-8); margin-top: var(--s-6); flex-wrap: wrap; }
.stat dt { font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--text-2); font-weight: 600; }
.stat dd { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat small { font-size: 0.42em; margin-left: 0.15em; font-family: var(--font-body); font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.stats-grid .stat { display: flex; flex-direction: column-reverse; gap: var(--s-2); }
.stats-grid .stat dd { font-size: clamp(3rem, 2rem + 4vw, 5.6rem); }
.section-stats, .section-cta { background: var(--char); color: var(--paper); }
.section-stats .sec-label, .section-cta .sec-label { color: var(--pine); }
.section-stats .stat dt, .section-cta .sec-body, .section-cta .sec-note { color: var(--mist); }

/* ── 영상 모드 ── */
/* 머리말을 고정해 흐름에서 빼면 영상이 맨 위에서 시작한다 — 처음 열었을 때도 무대(100svh)가 화면에 꼭 맞아
   아래 글(영업 중 표시)이 화면 밖·아래 고정 막대 뒤로 밀리지 않는다. 붙은 뒤와 같은 배치라 튀지도 않는다 */
.film-on .site-header { position: fixed; left: 0; right: 0; }
/* 무대(100svh) + 트랙(900vh) = 영상 구간. 무대에 음수 margin 을 주면 sticky 가 그만큼 더 붙어 있어
   다음 구역(영업시간 띠)을 한 화면 동안 덮는다 → 음수 margin 없이 무대 뒤에 트랙을 잇는다 */
.film-on .film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 1; overflow: hidden; }
.film-on .film-media {
  position: absolute; inset: 0; height: auto; min-height: 0; background: var(--paper); z-index: 1;
  clip-path: circle(calc(var(--circle-r) * 1vmin) at calc(var(--circle-x) * 1%) calc(var(--circle-y) * 1%));
}
.film-on .film-poster, .film-on #film-canvas { transform-origin: var(--mo); transform: translate(calc((1 - var(--wipe, 0)) * var(--mx)), calc((1 - var(--wipe, 0)) * var(--my))) scale(calc(var(--ms) + (1 - var(--ms)) * var(--wipe, 0))); will-change: transform; }
.film-on .film.has-frames #film-canvas { opacity: 1; }
.film-on .film.is-lowdata #film-canvas { opacity: 0; }
.film-on .film-track { display: block; height: 900vh; }
.film-on .film-overlays { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.film-on .film-sec { position: absolute; inset: 0; padding: 72px 0 0; display: flex; align-items: center; opacity: 0; visibility: hidden; }
.film-on .film-sec.is-visible { visibility: visible; pointer-events: auto; }
.film-on .film-hero { opacity: 1; visibility: visible; pointer-events: auto; }
.film-on .film-sec .sec-inner { margin: 0; width: auto; max-width: 42vw; }
.film-on .align-left { padding-left: max(6vw, var(--gutter)); padding-right: 52vw; }
.film-on .align-right { padding-right: max(6vw, var(--gutter)); padding-left: 52vw; justify-content: flex-end; }
.film-on .align-center { justify-content: center; text-align: center; padding-inline: var(--gutter); }
.film-on .align-center .sec-inner { max-width: 880px; }
.film-on .section-stats, .film-on .section-cta { background: transparent; }
.film-on .film-hero .sec-inner { max-width: 48vw; }
.film-on .scroll-cue { display: block; position: absolute; right: max(8vw, var(--gutter)); bottom: 6vh; text-align: center; font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--text-2); }
.film-on .scroll-cue span::after { content: ""; display: block; width: 1px; height: 40px; margin: 10px auto 0; background: currentColor; animation: cue 1.8s var(--ease-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 글 구역 뒤 가림막: 글이 있는 쪽에서 바탕색으로 번진다(유리 카드 대신). 어두운 구역에서는 천장 먹색 */
.film-on .film-scrim {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --scrim: var(--paper);
  background: linear-gradient(90deg, color-mix(in srgb, var(--scrim) 92%, transparent) 0%, color-mix(in srgb, var(--scrim) 80%, transparent) 34%, transparent 62%);
  opacity: var(--wipe, 0);
}
.film-on .film[data-side="right"] .film-scrim { background: linear-gradient(270deg, color-mix(in srgb, var(--scrim) 92%, transparent) 0%, color-mix(in srgb, var(--scrim) 80%, transparent) 34%, transparent 62%); }
.film-on .film[data-side="center"] .film-scrim { background: color-mix(in srgb, var(--scrim) 86%, transparent); }   /* 작은 이름표(005 · …)까지 4.5:1 */
.film-on .film[data-active-theme="dark"] .film-scrim { --scrim: var(--char); }
.film-on .film[data-active-theme="dark"] .film-sec:not(.film-hero) { color: var(--paper); }

.film-on .film-marquee { display: block; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-out); overflow: hidden; }
.film-on .film-marquee-text { white-space: nowrap; font-family: var(--font-display); font-size: clamp(5rem, 13vw, 13rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--paper) 88%, transparent); will-change: transform; }

.film-on .film-progress { display: block; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); width: 2px; height: 28vh; background: color-mix(in srgb, var(--ink) 16%, transparent); z-index: 4; }
.film-on .film-progress-fill { height: 100%; background: var(--seal); transform-origin: top; transform: scaleY(0); }
.film-on .film-progress-label { position: absolute; right: 12px; top: 0; white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-2); writing-mode: vertical-rl; }
.film-on .film[data-active-theme="dark"] .film-progress-label { color: var(--mist); }

.film-on .sound-toggle:not([hidden]) { display: inline-flex; align-items: center; gap: 0.5rem; position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 5; min-height: 44px; padding: 0.5rem 0.9rem; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: color-mix(in srgb, var(--paper) 90%, transparent); border-radius: 999px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--ink); }
.sound-icon { width: 14px; height: 12px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px, transparent 7px 10px, currentColor 10px 12px, transparent 12px); -webkit-mask: linear-gradient(to top, #000 30%, transparent 30%); mask: linear-gradient(to top, #000 30%, transparent 30%); }
.sound-toggle[aria-pressed="true"] .sound-icon { -webkit-mask: none; mask: none; animation: eq 0.9s steps(3) infinite; }
@keyframes eq { 0% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.7); } }
.film-on .film-status { top: auto; bottom: 1.4rem; left: auto; right: 10rem; }

/* 세로 화면(모바일): 둥근 창은 위쪽, 글은 아래쪽. 가림막은 아래에서 위로 */
@media (max-aspect-ratio: 9/10), (max-width: 768px) {
  /* 둥근 창은 위쪽에 작게 — 아래 글(이름·버튼·영업 중)과 겹치지 않게. --ms·--my 는 창 안에 판이 가운데 오도록 맞춘 값 */
  .film { --circle-r: 24; --circle-x: 50; --circle-y: 24; --mx: 0vw; --my: -26vh; --ms: 0.46; --mo: 50% 50%; }
  .film-on .film-track { height: 720vh; }
  .film-on .film-sec, .film-on .align-left, .film-on .align-right, .film-on .align-center { padding: 0 var(--gutter) 10vh; align-items: flex-end; justify-content: flex-start; text-align: left; }
  .film-on .film-sec .sec-inner, .film-on .film-hero .sec-inner, .film-on .align-center .sec-inner { max-width: 100%; }
  .film-on .film-hero .ht-name { font-size: clamp(3.2rem, 17vw, 5.4rem); }
  .film-on .film-hero .hero-lead { font-size: var(--t-base); }
  .film-on .film-hero .hero-cta { flex-wrap: nowrap; margin-top: var(--s-4); }
  .film-on .film-hero .hero-cta .btn { flex: 0 1 auto; padding-inline: 1rem; }
  .film-on .film-hero .hero-addr { display: none; }   /* 주소는 영상 바로 뒤 '영업시간과 찾아오는 길' 띠에 있다 */
  .film-on .film-hero .hero-facts { margin-top: var(--s-4); }
  /* 가림막은 글 묶음 윗선(--scrim-top, 엔진이 구역마다 잰다)까지 꽉 차고 그 위 20% 동안 빠진다 */
  .film-on .film-scrim, .film-on .film[data-side="right"] .film-scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--scrim) 95%, transparent) 0%, color-mix(in srgb, var(--scrim) 90%, transparent) var(--scrim-top, 55%), transparent calc(var(--scrim-top, 55%) + 20%)); }
  .film-on .film[data-side="center"] .film-scrim { background: color-mix(in srgb, var(--scrim) 84%, transparent); }
  .film-on .scroll-cue, .film-on .film-progress, .film-on .film-status { display: none; }
  .film-on .sound-toggle:not([hidden]) { top: 70px; bottom: auto; right: var(--gutter); }
  .sec-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .film-on .stats-grid .stat dd { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .facts-row { gap: var(--s-6); }
}
/* 좁은 폰: 첫 화면 전화 버튼은 번호를 빼고 짧게(아래 고정 막대에도 '전화'가 있다) */
@media (max-width: 420px) {
  .film-on .film-hero .hero-cta .btn-sub { display: none; }
  /* 소리 버튼은 아이콘만(이름은 화면 낭독기에 그대로 남는다) — 둥근 창 가장자리를 가리지 않게 */
  .film-on .sound-toggle:not([hidden]) { width: 44px; padding: 0; justify-content: center; }
  .film-on .sound-toggle .sound-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* 폭 좁은 폰(360px 등): H1 첫 줄(광주 서구 맛집 · SINCE 1965)과 둥근 창 사이에 틈을 둔다 — 첫 줄은 검색 색인용이라 숨기지 않는다 */
@media (max-width: 370px) and (max-height: 800px) {
  .film { --circle-r: 22; --circle-y: 21; --my: -29vh; --ms: 0.43; }
}
/* 키가 작은 폰(SE 등): 창을 더 작게, 이름 글자도 한 단계 작게 */
@media (max-width: 768px) and (max-height: 700px) {
  .film { --circle-r: 20; --circle-y: 21; --my: -29vh; --ms: 0.39; }
  .film-on .film-hero .hero-lead { display: none; }   /* 아주 작은 폰만 — 구글 모바일 색인 화면(높이 약 732px)에는 보인다 */
  .film-on .film-hero .ht-name { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .film-on .film-hero .sec-label { display: none; }
}

/* ═══════════════════ 본문 구역 ═══════════════════ */
.block { padding: clamp(3.5rem, 3rem + 4vw, 7rem) 0; }
.block--alt, .block--info { background: var(--paper-2); }
.block--dark { background: var(--char); color: var(--paper); }
.block--dark .block-body { color: var(--mist); }
.block--dark a:hover { color: var(--pine); }
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--reverse .split-media { order: 2; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 860px) {
  .split, .two-col { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

.photo { margin: 0; }
.photo img { width: 100%; border-radius: var(--radius); }


.price-list { list-style: none; margin: var(--s-4) 0 var(--s-6); }
.price-list li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.pl-name { font-family: var(--font-display); font-size: var(--t-xl); }
.pl-name small { font-family: var(--font-body); font-size: var(--t-xs); color: var(--text-2); margin-left: 0.3rem; }
.pl-dots { flex: 1; border-bottom: 1px dotted var(--pine-deep); transform: translateY(-4px); }
.pl-price { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 가기 전에(정보 띠) */
/* ── 한눈에 보기(영상 바로 뒤): 답을 먼저 주는 요약 — 검색·AI 답변이 문단째 인용하기 좋게 ── */
.summary-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.answer-summary { font-size: var(--t-lg); line-height: 1.75; color: var(--ink); max-width: 38em; margin-bottom: var(--s-4); }
.summary-proof { font-size: var(--t-sm); color: var(--text-2); max-width: 44em; }
.summary-proof strong { color: var(--ink); }
.summary-facts > div { grid-template-columns: 4.2em 1fr; }
.summary-awards { list-style: none; display: grid; gap: var(--s-2); margin: var(--s-4) 0 var(--s-6); }
.summary-awards li { position: relative; padding-left: 1.6rem; font-size: var(--t-sm); font-weight: 600; }
.summary-awards li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--seal); box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 1px var(--seal); }
.summary-awards a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--seal) 60%, transparent); text-underline-offset: 0.2em; }
.summary-awards small { font-weight: 400; color: var(--text-2); }
@media (max-width: 900px) { .summary-grid { grid-template-columns: 1fr; } }
.info-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (max-width: 980px) { .info-grid { grid-template-columns: 1fr; } }
.hours th, .hours td { padding: 0.45rem 0; border-bottom: 1px solid var(--rule); text-align: left; font-size: var(--t-sm); }
.hours th { font-weight: 600; width: 5.5em; }
.hours td { font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--seal); font-weight: 600; }
.hours-note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--text-2); }
.info-list { display: grid; gap: var(--s-4); }
.info-list > div { display: grid; grid-template-columns: 4.5em 1fr; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.info-list dt { font-size: var(--t-sm); font-weight: 600; color: var(--floor); }
.info-list dd { font-size: var(--t-sm); }
.dd-sub { display: block; color: var(--text-2); font-size: var(--t-xs); margin-top: 0.2rem; }

/* 페이지 머리 */
.page-head { padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0 clamp(2rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; right: -8vmin; top: 50%; width: 42vmin; height: 42vmin; transform: translateY(-50%); border-radius: 50%; border: 1px solid var(--rule); box-shadow: 0 0 0 3.5vmin var(--paper), 0 0 0 calc(3.5vmin + 1px) var(--rule); pointer-events: none; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.8rem, 1.6rem + 6vw, 6.4rem); line-height: 1; letter-spacing: -0.02em; margin: var(--s-2) 0 var(--s-6); position: relative; z-index: 1; }
.page-lead { max-width: 46ch; font-size: var(--t-lg); color: var(--text-2); position: relative; z-index: 1; }
.crumbs ol { list-style: none; display: flex; gap: 0.5rem; font-size: var(--t-xs); color: var(--text-2); margin-bottom: var(--s-6); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--rule); }
.crumbs a { text-decoration: none; }

/* 메뉴 */
.menu-jump { position: sticky; top: 64px; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.menu-jump ul { display: flex; gap: var(--s-6); list-style: none; overflow-x: auto; padding: 0.75rem 0; scrollbar-width: none; }
.menu-jump a { white-space: nowrap; text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
@media (max-width: 900px) { .menu-jump { top: 58px; } }
.menu-sec { padding: clamp(3rem, 2.5rem + 3vw, 5.5rem) 0; }
.menu-sec--alt { background: var(--paper-2); }
.menu-sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.menu-sec-grid--solo { grid-template-columns: minmax(0, 760px); }
.menu-sec-media.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.menu-sec-media.is-pair .photo:first-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .menu-sec-grid { grid-template-columns: 1fr; } }
.menu-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .menu-duo { grid-template-columns: 1fr; gap: clamp(3rem, 2.5rem + 3vw, 5.5rem); } }
.menu-table th, .menu-table td { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.menu-table td { text-align: right; font-weight: 600; white-space: nowrap; padding-left: var(--s-4); font-variant-numeric: tabular-nums; }
.m-name { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400; }
.m-weight { font-size: var(--t-xs); color: var(--text-2); font-weight: 600; margin-left: 0.3rem; }
.m-desc { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--text-2); margin-top: 0.2rem; }
.is-signature .m-name::after { content: "대표"; margin-left: 0.5rem; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; color: var(--paper); background: var(--seal); padding: 0.1rem 0.4rem; vertical-align: 0.35em; }
.menu-note { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-2); max-width: 56ch; }
.dot-list { list-style: none; margin: var(--s-2) 0 var(--s-4); }
.dot-list li { position: relative; padding: 0.35rem 0 0.35rem 1.2rem; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 6px; height: 6px; background: var(--pine-deep); }

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: s; margin-top: var(--s-6); }
.steps li { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.step-no { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--seal); display: block; margin-bottom: var(--s-2); }
.steps h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); margin-bottom: var(--s-2); }
.steps p { color: var(--text-2); font-size: var(--t-sm); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* 이야기 */
.listen { margin-top: clamp(2rem, 4vw, 3.5rem); }
.listen-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--rule); background: var(--paper-2); }
.listen-btn { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0.8rem 1.3rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.listen-btn:hover { background: var(--seal); }
.listen-icon { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.listen-btn[aria-pressed="true"] .listen-icon { width: 11px; height: 14px; border: 0; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px); }
.listen-time { font-size: var(--t-xs); opacity: 0.7; font-variant-numeric: tabular-nums; }
.listen-script { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.7; color: var(--ink); }
@media (max-width: 640px) { .listen-card { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: clamp(2.5rem, 5vw, 5rem) 0; border-left: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: var(--s-6); padding: 0 0 clamp(2rem, 4vw, 3.5rem) var(--s-8); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 0.9rem; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--seal); }
.tl-year { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; color: var(--ink); }
.timeline h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); margin-bottom: var(--s-2); }
.timeline p { color: var(--text-2); max-width: 52ch; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: var(--s-2); } }
.owner-quote { border-left: 3px solid var(--seal); padding-left: var(--s-6); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); line-height: 1.6; }
.owner-quote p + p { margin-top: var(--s-4); }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) clamp(1.5rem, 4vw, 4rem); margin-top: var(--s-6); }
@media (max-width: 760px) { .fact-grid { grid-template-columns: 1fr; } }
.fact blockquote p { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.6; }
.fact .fact-more { font-family: var(--font-body); font-size: var(--t-sm); color: var(--text-2); margin-top: var(--s-2); }
.fact figcaption { margin-top: var(--s-3); }
.src { font-size: var(--t-xs); color: var(--floor); }

/* 단체룸 */
.feature-list { list-style: none; display: grid; gap: var(--s-4); }
.feature-list li { display: grid; gap: 0.2rem; padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.feature-list strong { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); }
.feature-list span { color: var(--text-2); font-size: var(--t-sm); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-6); }
/* 사진마다 비율이 달라 아래 끝이 들쭉날쭉하지 않게 — 한 줄은 같은 비율로 자른다 */
.gallery .photo img { aspect-ratio: 3 / 4; object-fit: cover; }

/* 오시는 길 */
.map-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } }
/* ── 네이버 지도(오시는 길) — 키가 없거나 불러오기 전에는 '네이버 지도 열기' 안내 칸 ── */
.nmap { margin: 0; }
.nmap-box { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.nmap-canvas { width: 100%; aspect-ratio: 4 / 3; display: none; }
.nmap-box.is-live .nmap-canvas { display: block; }
.nmap-box.is-live .nmap-fallback { display: none; }
.nmap-fallback { display: grid; justify-items: center; align-content: center; text-align: center; gap: var(--s-3); padding: clamp(2rem, 6vw, 4rem) var(--s-6); aspect-ratio: 4 / 3; }   /* 지도와 같은 비율 — 키를 넣어도 자리가 흔들리지 않게 */
/* 키가 없을 때: 네이버 지도 캡처 그림(누르면 네이버 지도) */
.nmap-still { padding: 0; display: block; position: relative; }
.nmap-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nmap-open { position: absolute; left: var(--s-4); bottom: var(--s-4); background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 600; padding: 0.55rem 0.9rem; border-radius: var(--radius); box-shadow: 0 2px 10px rgb(0 0 0 / 0.25); }
.nmap-still:hover .nmap-open { background: var(--seal); }
.nmap figcaption { font-size: var(--t-xs); color: var(--text-2); margin-top: var(--s-3); }
.nmap-pin { display: inline-flex; align-items: center; gap: 6px; }
.nmap-pin-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--seal); border: 5px solid #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--seal) 28%, transparent), 0 2px 8px rgb(0 0 0 / 0.3); }
.nmap-pin-label { background: var(--ink); color: #fff; font: 600 13px/1.2 var(--font-body); padding: 5px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
.nmap-poi { display: inline-block; transform: translate(-50%, -50%); background: #fff; color: var(--ink); border: 1px solid var(--rule); font: 600 12px/1.2 var(--font-body); padding: 3px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 4px rgb(0 0 0 / 0.15); }
.nmap-poi--subway { border-color: var(--ink); }
.nmap-poi--parking { border-color: var(--steel); }
.addr-big { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.5; margin-bottom: var(--s-3); }
.map-exterior { margin-top: var(--s-8); }
.route-list { list-style: none; display: grid; gap: var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.route-list li { display: grid; gap: 0.15rem; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.route-list strong { font-weight: 600; }
.route-list small { font-weight: 400; color: var(--text-2); }
.route-list span { font-size: var(--t-sm); color: var(--text-2); }
.route-list--light li { border-color: color-mix(in srgb, var(--paper) 18%, transparent); }
.route-list--light span, .route-list--light small { color: var(--mist); }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: var(--s-6); }
.way { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.way-how { font-size: var(--t-2xl); line-height: 1.1; margin-bottom: var(--s-2); }
.way-meta { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--floor); }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }
.cta-card { padding: var(--s-8); background: var(--paper-2); border: 1px solid var(--rule); align-self: start; }

/* 예약 */
.phone-big { font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); line-height: 1; margin: var(--s-4) 0; }
.phone-big a { text-decoration: none; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); padding-top: var(--s-8); border-top: 2px solid var(--ink); }
.cta-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.block--cta { padding-top: var(--s-8); }

/* FAQ */
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { list-style: none; display: flex; gap: var(--s-3); align-items: baseline; padding: 1.05rem 0; cursor: pointer; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--floor); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list .q { font-family: var(--font-display); font-size: var(--t-lg); color: var(--seal); }
.faq-list details p { padding: 0 0 1.2rem 1.9rem; color: var(--text-2); max-width: 64ch; }

/* ═══════════════════ 검색 카드 타일 6장 ═══════════════════ */
.tiles { padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0; background: var(--paper); border-top: 1px solid var(--rule); }
.tiles-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: var(--s-8); }
.tile-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem); }
.tile a { display: block; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); transition: transform 0.5s var(--ease-out); }
.tile a:hover img { transform: scale(1.02); }
.tile-caption { display: block; margin-top: 0.6rem; font-family: var(--font-display); font-size: var(--t-lg); }
.tile.is-current .tile-caption { color: var(--seal); }
@media (max-width: 760px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile-caption { font-size: var(--t-base); } }

/* ═══════════════════ 바닥글 ═══════════════════ */
.site-footer { background: var(--char); color: var(--paper); padding: clamp(3rem, 5vw, 5rem) 0 var(--s-8); --ink: #F5F3EE; --seal: #E0565C; }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--pine); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.3fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }
.brand-mark--footer .logo { height: 38px; width: auto; }
.footer-lede { margin-top: var(--s-4); color: var(--mist); font-size: var(--t-sm); max-width: 36ch; }
.footer-info { display: grid; gap: var(--s-3); }
.footer-info > div { display: grid; grid-template-columns: 3.5em 1fr; gap: var(--s-3); font-size: var(--t-sm); }
.footer-info dt { color: var(--pine); font-weight: 600; }
.footer-info dd { color: var(--paper); }
.footer-nav ul { list-style: none; display: grid; gap: 0.35rem; font-size: var(--t-sm); }
.footer-out { margin-top: var(--s-4); }
.footer-bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--s-6); border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-xs); color: var(--mist); }


/* ═══════════════════ 숫자로 본 제일돌곱창(인사이트) ═══════════════════ */
.insight-key { counter-reset: k; list-style: none; display: grid; }
.insight-key li { counter-increment: k; position: relative; padding: var(--s-4) 0 var(--s-4) 3rem; border-bottom: 1px solid var(--rule); font-size: var(--t-lg); line-height: 1.7; }
.insight-key li::before { content: counter(k, decimal-leading-zero); position: absolute; left: 0; top: var(--s-4); font-family: var(--font-display); color: var(--seal); font-size: 1.4rem; line-height: 1.2; }
.kw-bars { list-style: none; display: grid; gap: 0.65rem; }
.kw-bars li { display: grid; grid-template-columns: 9.5em 1fr 6.8em; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.kw-track { height: 0.7rem; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.kw-bar { display: block; height: 100%; width: var(--w); background: var(--seal); border-radius: inherit; }
.kw-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kw-val small { font-weight: 400; color: var(--text-2); margin-left: 0.3em; }
.kw-groups { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; font-size: var(--t-sm); }
.kw-groups th, .kw-groups td { text-align: left; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.kw-groups td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-groups thead th { font-size: var(--t-xs); color: var(--floor); font-weight: 600; }
.kw-groups thead th:not(:first-child) { text-align: right; }
.kw-groups tbody th small { display: block; font-weight: 400; color: var(--text-2); font-size: var(--t-xs); margin-top: 0.2rem; }
.note { font-size: var(--t-xs); color: var(--text-2); margin-top: var(--s-4); max-width: 72ch; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); margin-top: var(--s-6); }
.plan { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-6); background: var(--paper); }
.plan-name { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); margin-bottom: var(--s-4); }
.plan-name small { font-family: var(--font-body); font-size: var(--t-xs); color: var(--text-2); margin-left: 0.4em; }
.plan ul { list-style: none; display: grid; gap: 0.45rem; font-size: var(--t-sm); }
.plan li { display: flex; justify-content: space-between; gap: var(--s-3); }
.plan li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--ink); font-size: var(--t-sm); }
.plan-total strong { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); color: var(--seal); white-space: nowrap; }
.table-scroll { overflow-x: auto; margin-top: var(--s-6); }
.parts-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-sm); }
.parts-table th, .parts-table td { text-align: left; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--rule); }
.parts-table thead th { font-size: var(--t-xs); color: var(--floor); font-weight: 600; }
.parts-table tbody th { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); }
.parts-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checklist { counter-reset: c; list-style: none; display: grid; gap: var(--s-4); }
.checklist li { counter-increment: c; position: relative; padding-left: 2.6rem; }
.checklist li::before { content: counter(c); position: absolute; left: 0; top: 0.1em; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: var(--t-sm); font-weight: 600; display: grid; place-items: center; }
.sub-title--first { margin-top: 0; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .kw-bars li { grid-template-columns: 8.2em 1fr 6.2em; } }

/* ═══════════════════ 모바일 아래 고정 버튼 ═══════════════════ */
.action-bar { display: none; }
@media (max-width: 900px) {
  .action-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--char); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px color-mix(in srgb, var(--char) 22%, transparent); }
  .action-bar a { display: flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 54px; color: var(--paper); text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
  .action-bar a:first-child { background: var(--seal); }
  .action-bar a + a { border-left: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════ 동작 줄이기 ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 메뉴 '먹는 순서' 위 실제 사진 두 장 */
.steps-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); margin: var(--s-6) 0 var(--s-4); }
.steps-photos .photo img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 640px) { .steps-photos { grid-template-columns: 1fr; } }