/* 폰트는 구글에서 받지 않고 **이 페이지에 실제로 쓰인 글자만** 담아 직접 서빙한다.
 *
 * 왜: 구글 폰트로 한글 6종을 부르면 @font-face 선언 CSS 만 558KB, 실제 폰트 1,646KB —
 * 합쳐 2,204KB 로 모바일 페이지의 65% 가 타이포그래피였다. 한글은 유니코드 범위를
 * 100여 개로 쪼개 보내기 때문에 선언만으로도 이만큼 나온다.
 * 쓰이는 글자가 339자뿐이라 그것만 담으니 **206KB (91% 감소)**. 외부 도메인 2개도 사라진다.
 *
 * ⚠️ 본문 글자를 바꾸면 서브셋에 없는 글자가 생겨 그 글자만 다른 폰트로 튄다.
 *    → `python3 build-fonts.py` 로 다시 굽는다. 안 구우면 `check-site-data.py` 가
 *      커버리지 검사에서 실패시키므로 `dist/` 가 만들어지지 않는다(fail-closed).
 */
@font-face { font-family: "Noto Sans KR";  font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/sans-kr-400.woff2?v=5850affb) format("woff2"); }
@font-face { font-family: "Noto Sans KR";  font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/sans-kr-500.woff2?v=28d62b4a) format("woff2"); }
@font-face { font-family: "Noto Sans KR";  font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/sans-kr-600.woff2?v=9c7f0422) format("woff2"); }
@font-face { font-family: "Noto Sans KR";  font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/sans-kr-700.woff2?v=5bcb285a) format("woff2"); }
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/serif-kr-500.woff2?v=6883fc5c) format("woff2"); }
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/serif-kr-600.woff2?v=4dc34a57) format("woff2"); }

:root {
  --paper-50: #fbf8f1;
  --paper-100: #f4f0e6;
  --buckwheat-200: #e2d7c4;
  --buckwheat-400: #cbb99b;
  /* 테두리 전용 — 버튼의 유일한 경계선이라 WCAG 1.4.11(3:1) 대상이다.
     buckwheat-400 은 종이색 위에서 1.81:1 이라 경계가 사실상 안 보였다 */
  --buckwheat-650: #9c8360;
  --ink-900: #20241f;
  --ink-600: #5e625b;
  --pine-800: #34483a;
  --pine-700: #425e49;
  --red-700: #934433;
  --red-600: #ac5a45;
  --soy-700: #6b5442;
  --white: #fff;
  --serif: "Noto Serif KR", "AppleMyungjo", "Batang", Georgia, serif;
  --sans: "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow-card: 0 16px 42px rgba(32, 36, 31, .10);
  --page: min(1240px, calc(100vw - 96px));
}

* { box-sizing: border-box; }
/* 시간 범위가 en-dash 에서 쪼개지는 것을 막는다("토·일 10:00–" / "19:00").
   ⚠️ `white-space: nowrap` 으로 하면 안 된다 — 200% 텍스트 확대에서 260px 짜리
   쪼갤 수 없는 토큰이 되어 가로 스크롤을 만든다(WCAG 1.4.4). 실제로 그렇게 재발시켰다.
   평소에는 안 끊고, 정말 자리가 없으면 끊게 둔다. */
.nb { white-space: nowrap; }
@media (max-width: 480px) { .nb { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* 앵커 착지 보정.
   scroll-padding-top(96) 은 고정 헤더만 피한다. 섹션 자체가 상단 여백 128px 을 갖고 있어서
   제목이 화면 264px 아래에 착지했다 — 눌렀는데 빈 종이색만 보이는 상태다.
   음수 scroll-margin 으로 그 여백만큼 더 내려, 제목이 헤더 바로 아래 오게 한다.
   (여백 자체가 사라지는 게 아니라 착지 지점만 바뀐다 — 스크롤로 지나갈 때는 그대로 보인다)
   착지 위치 = 96 + scroll-margin-top + 섹션 상단여백 */
/* 값은 실측으로 정했다: 섹션 top 에서 제목까지의 거리(delta)를 재고 `67 - delta`.
   섹션마다 내부 구조가 달라 delta 가 139~281px 로 제각각이라 한 값으로는 안 맞는다. */
.section-pad, .story-section { scroll-margin-top: -104px; }
.story-section     { scroll-margin-top: -72px; }
.broadcast-section { scroll-margin-top: -214px; }
.visit-section     { scroll-margin-top: -178px; }
body {
  margin: 0;
  color: var(--ink-900);
  background: var(--paper-50);
  font-family: var(--sans);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* <picture> 는 기본이 inline 이라, 그 안의 img 에 준 height:100% 가 기준을 잃고 무너진다
   (사진이 통째로 사라진다). block 으로 바꿔 준다.
   ⚠️ 여기에 height:100% 까지 주면 안 된다 — 높이를 채우는 flex 칸에서는 picture 가 늘어나
   그 아래 캡션을 밀어낸다. 높이를 채워야 하는 곳(고정 비율 figure)에만 따로 준다. */
picture { display: block; width: 100%; }
.space-gallery picture { height: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
/* 기본 탭 하이라이트를 지웠으면 대체를 줘야 한다 — 안 그러면 눌렀는지 알 수 없다 */
@media (hover: none) {
  .button:active, .text-link:active, .mobile-action-bar a:active,
  .menu-toggle:active, .mobile-menu a:active, .desktop-nav a:active,
  .hero-motion-toggle:active, .broadcast-card:active, .brand:active,
  .footer-top-link:active, .visit-copy dd a:active,
  .footer-bottom a:active, .hours-table dd a:active { opacity: .62; }
  .button:hover { transform: none; }   /* 터치기기에서 hover 가 붙으면 눌린 뒤에도 떠 있다 */
}
button { font: inherit; }
/* top:-80px 하드코딩은 텍스트 확대에서 박스가 커지면 다 못 감춘다(200%에서 155px 노출).
   자기 높이 기준으로 밀어 올린다. */
.skip-link { position: fixed; left: 16px; top: 0; z-index: 1000; padding: 12px 18px; background: white; color: var(--ink-900); border-radius: 4px; white-space: nowrap; transform: translateY(-140%); }
.skip-link:focus { top: 16px; transform: none; }
/* 이중 링 포커스 — 단색 링은 배경 하나에서만 보인다.
   red-600 은 pine-800 초록 섹션 위에서 2.02:1(기준 3:1)이라 키보드 포커스가 사실상 안 보였다.
   흰 링이 어두운 섹션을, 바깥 red-700 링이 밝은 종이색 섹션을 각각 담당한다. */
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--red-700); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,248,241,.93);
  border-bottom: 1px solid rgba(203,185,155,.55);
  backdrop-filter: blur(18px);
}
/* 스크롤 상태 — 맨 위에서는 경계가 거의 안 보이고, 내려가면 또렷해진다 */
.site-header[data-scrolled="1"] { border-bottom-color: rgba(203,185,155,.9); box-shadow: 0 1px 12px rgba(32,36,31,.06); }
.header-inner { width: var(--page); height: 88px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; }
.brand-seal { width: 32px; height: 32px; display: grid; place-items: center; color: var(--paper-50); background: var(--red-700); font-family: var(--serif); font-size: 21px; font-weight: 500; border-radius: 50% 50% 46% 54% / 49% 52% 48% 51%; transform: rotate(-2deg); }
.brand-wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.brand-wordmark strong { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.brand-wordmark small { margin-top: 3px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-600); }
.desktop-nav { display: flex; align-items: center; gap: 38px; margin-left: auto; margin-right: 54px; font-size: 14px; font-weight: 500; }
.desktop-nav a { position: relative; padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 1px; background: var(--red-700); transition: right .25s ease; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* 문단 아래 홀로 선 링크는 WCAG 2.2 SC 2.5.8(24×24px) 의 '문장 속 인라인' 예외를 못 받는다.
   이 규칙이 모바일 미디어쿼리 안에만 있어 데스크톱에서 7개가 20~22px 로 남아 있었다. */
.text-link, .footer-top-link, .visit-copy dd a, .hours-table dd a, .footer-bottom a[href^="tel:"] {
  /* 44px = 이 프로젝트 자체 규칙(design-spec §8). WCAG 2.5.8 의 24px 보다 엄격하다 */
  display: inline-block; padding-block: 10px; min-height: 44px; }
/* 밑줄을 border-bottom 으로 그리면 44px 터치 패딩 때문에 **박스 바닥**에 붙어
   다음 줄을 침범한다(실측 오버슛 12~15px). text-decoration 은 글자에 붙는다. */
.text-link { font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.button { min-height: 52px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; border-radius: 2px; font-size: 14px; font-weight: 600; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--pine-800); }
.button-primary:hover { background: var(--pine-700); }
/* 헤더 전화 = 1순위 전환. 히어로의 전화 버튼과 같은 붉은색으로 위계를 맞춘다
   (.button-primary 뒤에 와야 색이 이긴다) */
.header-actions .header-tel { background: var(--red-700); gap: 9px; }
.header-actions .header-tel:hover { background: var(--red-600); }
.button-outline { border-color: var(--buckwheat-650); background: transparent; }
.button-outline:hover { border-color: var(--pine-800); }
.button-small { min-height: 46px; padding-inline: 18px; }
.menu-toggle { width: 46px; height: 46px; padding: 0; display: none; place-items: center; border: 0; background: transparent; }
.menu-toggle span { position: absolute; width: 24px; height: 1.5px; background: var(--ink-900); transition: transform .25s ease; }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
/* 패널 배경이 body 와 같은 색이라 아래 경계가 어디인지 알 수 없었다 */
.mobile-menu { padding: 16px 24px 28px; border-top: 1px solid var(--buckwheat-200); border-bottom: 1px solid var(--buckwheat-200); background: var(--paper-50); box-shadow: 0 14px 30px rgba(32,36,31,.16); }
.mobile-menu a { display: block; padding: 14px 0; font-family: var(--serif); font-size: 24px; font-weight: 500; }

.hero { position: relative; min-height: 780px; display: grid; align-items: center; overflow: hidden; background: var(--ink-900); }
.hero-media { position: absolute; inset: 0; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hero-video { z-index: 1; opacity: 0; transition: opacity .7s ease; }
.hero-media.is-playing .hero-video { opacity: 1; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(94deg, rgba(23,27,23,.96) 0%, rgba(23,27,23,.92) 36%, rgba(23,27,23,.6) 50%, rgba(23,27,23,.2) 70%, rgba(23,27,23,.05) 100%),
    linear-gradient(180deg, rgba(23,27,23,.3), rgba(23,27,23,0) 34%, rgba(23,27,23,.3));
}
.hero-motion-toggle { position: absolute; right: 28px; bottom: 28px; z-index: 4; min-width: 116px; min-height: 46px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: white; background: rgba(23,27,23,.86); border: 1px solid rgba(255,255,255,.48); border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 13px; font-weight: 600; cursor: pointer; }
.hero-motion-toggle:hover { background: rgba(23,27,23,.94); }
/* 이 버튼은 자신의 box-shadow 가 전역 :focus-visible 의 붉은 바깥 링을 덮어써,
   밝은 영상 위에서 흰 링만 2.2~2.5:1 로 남았다. 포커스 때는 링을 되살린다. */
.hero-motion-toggle:focus-visible { box-shadow: 0 0 0 5px var(--red-700), 0 8px 24px rgba(0,0,0,.18); }
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-icon { width: 13px; color: var(--buckwheat-400); font-size: 12px; font-weight: 700; line-height: 1; text-align: center; }
.hero-inner { position: relative; z-index: 3; width: var(--page); margin: 0 auto; padding: 96px 0; max-width: 100%; color: white; }
/* 자간은 한글 기준 .02em 을 넘기지 않는다 — 넓히면 낱글자가 흩어져 단어로 안 읽힌다 */
.eyebrow { margin: 0 0 22px; color: var(--red-700); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.hero-locale { margin: 0 0 20px; color: var(--buckwheat-200); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.hero h1, .section-heading h2, .story-copy h2, .broadcast-intro h2, .space-copy h2, .visit-copy h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.025em; line-height: 1.28; }
/* 한글 어절 보존 — 제목·값이 글자 단위로 끊기면 "손 안 댄 템플릿"으로 읽힌다 */
.hero h1, .section-heading h2, .story-copy h2, .broadcast-intro h2, .space-copy h2, .visit-copy h2,
.menu-card h3, .process-list h3, .hours-block h3, .broadcast-card strong, .broadcast-network,
.amenity-list li, .hours-table dt, .hours-table dd, .visit-copy dd, .hero-hours,
.footer-top p, .footer-bottom p, .menu-meta span, .visit-photo figcaption {
  word-break: keep-all;
}
.hero h1 { max-width: 620px; color: white; font-size: clamp(46px, 4.3vw, 62px); }
.hero h1 em { color: var(--buckwheat-400); font-style: normal; }
.hero-description { max-width: 520px; margin: 26px 0 0; color: rgba(255,255,255,.76); font-size: 16px; line-height: 1.85; word-break: keep-all; }
.hero-actions { display: flex; gap: 10px; margin-top: 36px; }
.hero-actions .button-primary { background: var(--red-700); }
.hero-actions .button-primary:hover { background: var(--red-600); }
.hero-hours { margin: 26px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; color: rgba(255,255,255,.92); font-size: 15px; font-weight: 500; word-break: keep-all; }
.hero-hours strong { display: inline-block; padding: 3px 10px; color: var(--ink-900); background: var(--buckwheat-400); border-radius: 2px; font-weight: 700; }
.hero-hours strong[hidden] { display: none; }
.hero-hours span { color: rgba(255,255,255,.7); }
.hero-trust { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 13px; letter-spacing: .02em; }

.section-pad { padding: 128px max(48px, calc((100vw - 1240px)/2)); }
.section-heading-split { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; }
.section-heading h2 { font-size: clamp(38px, 4vw, 55px); }
.heading-aside { max-width: 470px; margin: 0 0 4px auto; color: var(--ink-600); font-size: 16px; line-height: 1.85; word-break: keep-all; }
/* 이미지 슬롯: 고정 height 대신 aspect-ratio (잘림 방지) · 메뉴 3열 고정 */
/* 5장이라 3열 그리드에서는 마지막 행에 카드 하나 크기의 빈칸이 남는다.
   flex 로 두면 남는 2장이 가운데로 모인다 — 카드 폭(=사진 표시 밀도)은 3열과 동일하게 유지한다. */
/* 마지막 행을 가운데 정렬하면 히어로·영업시간표·푸터가 공유하는 좌측 레일에서 211px 밀린다 */
.menu-grid { margin-top: 64px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; }
.menu-card { flex: 0 1 calc((100% - 48px) / 3); }
.menu-card { min-width: 0; background: white; box-shadow: 0 0 0 1px var(--buckwheat-200); transition: transform .25s ease, box-shadow .25s ease; }
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.menu-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.menu-badge { position: absolute; top: 18px; left: 18px; min-width: 48px; height: 48px; display: grid; place-items: center; color: white; background: var(--red-700); border-radius: 50%; font-family: var(--serif); font-size: 13px; font-weight: 500; }
.menu-card-body { min-height: 270px; padding: 28px; display: flex; flex-direction: column; }
.menu-kicker { margin: 0 0 8px; color: var(--red-700); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.menu-card h3 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.menu-card-body > p { margin: 18px 0 28px; color: var(--ink-600); font-size: 16px; line-height: 1.75; word-break: keep-all; }
.menu-meta { margin-top: auto; padding-top: 18px; display: flex; align-items: end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--buckwheat-200); }
.menu-meta span { color: var(--ink-600); font-size: 13px; }
.menu-meta strong { font-size: 19px; white-space: nowrap; }
.story-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-block: 96px; color: white; background: var(--ink-900); }
.story-image { position: relative; justify-self: center; width: 100%; max-width: 400px; aspect-ratio: 3 / 4; overflow: hidden; }
.story-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(32,36,31,.72)); }
.story-image p { position: absolute; left: 42px; bottom: 30px; z-index: 1; margin: 0; font-family: var(--serif); font-size: 15px; font-weight: 500; }
.story-copy { padding: 0 max(48px, calc((100vw - 1240px)/2)) 0 86px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow-light { color: var(--buckwheat-400); }
.story-copy h2, .broadcast-intro h2, .visit-copy h2 { font-size: clamp(38px, 3.8vw, 54px); }
.story-copy > p:not(.eyebrow) { max-width: 580px; margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.9; word-break: keep-all; }
.story-copy .story-lead { color: rgba(255,255,255,.88) !important; font-size: 16px !important; }
.story-copy .story-principle { margin: 44px 0 0 !important; padding: 24px 0 0; max-width: 550px; color: white !important; border-top: 1px solid rgba(255,255,255,.25); font-family: var(--serif); font-size: 16px !important; font-weight: 500; line-height: 1.8 !important; }

.process-section { background: var(--paper-100); }
.section-heading.compact { max-width: 620px; }
.process-list { margin: 62px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; list-style: none; }
.process-list li { position: relative; display: flex; flex-direction: column; }
.process-image { aspect-ratio: 4 / 3; margin-bottom: 24px; overflow: hidden; background: var(--buckwheat-200); }
.process-image img { transition: transform .5s ease; }
.process-list li:hover .process-image img { transform: scale(1.04); }
.process-no { display: block; color: var(--red-700); font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.process-list h3 { margin: 12px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.process-list p { margin: 12px 0 0; color: var(--ink-600); font-size: 16px; line-height: 1.75; word-break: keep-all; }

.broadcast-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 84px; color: white; background: var(--pine-800); }
.broadcast-intro { align-self: center; }
/* 821~932px(손에 쥔 폰 가로)에서 바깥·안쪽이 동시에 2열이 되면 카드가 205px 로 줄어
   제목이 최대 45px 잘린다(overflow:hidden). 그 구간은 1열로 둔다. */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  .broadcast-section { grid-template-columns: 1fr; }
  .broadcast-cards { grid-template-columns: 1fr; }
  .broadcast-card strong { font-size: 18px; }
}
.broadcast-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.broadcast-card { position: relative; min-height: 400px; padding: 34px; display: flex; flex-direction: column; color: var(--ink-900); background: var(--paper-50); overflow: hidden; }
.broadcast-card::before { content: ""; position: absolute; width: 200px; height: 200px; right: -110px; bottom: -130px; border: 1px solid var(--buckwheat-400); border-radius: 50%; box-shadow: 0 0 0 36px transparent, 0 0 0 37px var(--buckwheat-400); opacity: .65; }
.broadcast-card-accent { color: white; background: var(--red-700); }
.broadcast-card-accent::before { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 36px transparent, 0 0 0 37px rgba(255,255,255,.16); }
/* 우상단 재생 버튼(46px + 여백)이 라벨 끝 글자를 덮지 않게 자리를 비운다 */
.broadcast-network { padding-right: 64px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.broadcast-card strong { margin-top: 52px; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.5; }
.broadcast-date { margin-top: auto; font-size: 14px; opacity: .88; }
.broadcast-card-accent .broadcast-date { opacity: .9; }
.play-button { position: absolute; right: 28px; top: 28px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }

/* 영업안내 */
.hours-section { background: var(--paper-100); }
.hours-grid { margin-top: 58px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; }
.hours-block h3 { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--buckwheat-400); font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.hours-table { margin: 0; display: grid; }
.hours-table > div { padding: 17px 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--buckwheat-200); }
.hours-table dt { color: var(--ink-600); font-size: 16px; }
/* 라벨과 값이 1240px 폭에서 570px 이나 벌어져 시선이 끊겼다. 이 사이트 1순위 정보다. */
.hours-table > div { max-width: 380px; }
/* 제목 밑줄과 표 폭을 맞춘다. 안 맞추면 선이 서로 다른 지점에서 끝나 표가 잘려 보인다 */
.hours-block > h3, .hours-block > .text-link { max-width: 380px; }
.hours-note { margin: 22px 0 0; max-width: 380px; color: var(--ink-600); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.hours-table dd { margin: 0; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hours-table .is-closed { color: var(--red-700); }
.amenity-list { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.amenity-list li { padding-left: 20px; position: relative; color: var(--ink-600); font-size: 16px; }
.amenity-list li::before { content: "✓"; position: absolute; left: 0; color: var(--red-700); font-size: 12px; }
.hours-block .text-link { display: inline-block; margin-top: 28px; font-size: 15px; }

/* 갤러리 폭을 조금 줄여 큰 사진의 표시 밀도를 올린다(원본 1280px 한계) */
.space-section { display: grid; grid-template-columns: .92fr 1.08fr; background: var(--paper-100); }
.space-copy { padding: 112px 72px 112px max(48px, calc((100vw - 1240px)/2)); align-self: center; }
.space-copy h2 { font-size: clamp(38px, 3.7vw, 52px); }
.space-copy > p:not(.eyebrow) { max-width: 460px; margin: 30px 0 0; color: var(--ink-600); font-size: 16px; line-height: 1.9; word-break: keep-all; }
/* 공간 갤러리: 원본이 16:9 → 박스도 16:9 (잘림 0). 한 열로 쌓아 표시 밀도를 확보한다 */
.space-gallery { display: grid; grid-template-columns: 1fr; gap: 3px; background: var(--paper-100); }
.space-gallery figure { margin: 0; min-height: 0; overflow: hidden; aspect-ratio: 16 / 9; }

.visit-section { background: var(--paper-50); }
.visit-panel { min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; color: white; background: var(--ink-900); }
.visit-copy { padding: 74px 64px; }
.visit-copy address { margin-top: 42px; font-style: normal; }
.visit-copy dl { margin: 0; display: grid; gap: 0; }
.visit-copy dl div { padding: 15px 0; display: grid; grid-template-columns: 86px 1fr; border-top: 1px solid rgba(255,255,255,.15); }
/* 라벨 칸 86px 고정이 좁은 화면·텍스트 확대에서 폭을 밀어낸다 → 세로로 쌓는다 */
@media (max-width: 480px) { .visit-copy dl div { grid-template-columns: 1fr; gap: 4px; } }
/* 티맵·카카오내비로 가려면 주소를 복사해 붙여넣는 게 표준 동선이다.
   content-spec §2.10·§5 와 design-spec §4.11 이 요구하는 항목. */
/* 지번은 도로명 아래 보조 표기 — 옛 주소로 찾는 손님과 내비 입력용 */
.addr-lot { display: block; margin-top: 3px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 400; }
.addr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.addr-copy { flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--buckwheat-200); background: transparent; border: 1px solid rgba(255,255,255,.34); border-radius: 2px;
  font-size: 13px; font-weight: 600; cursor: pointer; }
.addr-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.addr-copy[data-copied="1"] { color: var(--paper-50); border-color: var(--paper-50); }
.visit-copy dt { color: var(--buckwheat-400); font-size: 13px; font-weight: 700; }
.visit-copy dd { margin: 0; color: rgba(255,255,255,.9); font-size: 16px; word-break: keep-all; }
.visit-copy dd a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.visit-copy dd small { color: rgba(255,255,255,.62); font-size: 13px; }
.visit-actions { margin-top: 34px; display: flex; gap: 10px; }
.button-light { color: var(--ink-900); background: var(--paper-50); }
.button-ghost-light { color: white; border-color: rgba(255,255,255,.35); }
/* 오시는 길 옆면: 가게 사진 (16:9 원본 비율 유지) */
/* figure 를 접근성 때문에 둘로 나눴다. 그리드 칸은 그대로 2개여야 하므로 래퍼로 묶는다
   (안 묶으면 셋째 자식이 다음 행으로 떨어져 오른쪽이 620×380 비었다). */
.visit-media { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--paper-100); }
.visit-media .visit-photo { padding: 0; background: none; }
.visit-photo { margin: 0; padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; background: var(--paper-100); }
.visit-photo img { aspect-ratio: 16 / 9; height: auto; }
/* 약도는 4:3 원본이라 비율을 따로 준다. object-fit:cover 가 걸려 있어 비율을 안 맞추면 잘린다 */
.visit-photo .visit-map { aspect-ratio: 4 / 3; background: var(--paper-100); border: 1px solid var(--buckwheat-200); }
.visit-map-caption { margin: -4px 0 0; color: var(--ink-600); font-size: 13px; line-height: 1.7; }
/* 약도 figure 와 사진 figure 가 나뉘어 있어 사이 간격을 여기서 준다 */
.visit-photo + .visit-photo { padding-top: 0; }
.visit-photo figcaption { color: var(--ink-600); font-size: 13px; line-height: 1.7; word-break: keep-all; }

.site-footer { padding: 70px max(48px, calc((100vw - 1240px)/2)) 32px; color: white; background: #171b17; }
.footer-top { padding-bottom: 60px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 80px; }
.brand-light .brand-wordmark small { color: rgba(255,255,255,.48); }
.footer-top p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
.footer-top-link { font-size: 14px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); font-size: 14px; letter-spacing: .02em; }
.footer-bottom p { margin: 0; }
.footer-bottom a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mobile-action-bar { display: none; }

@media (max-width: 1100px) {
  :root { --page: calc(100vw - 56px); }
  .desktop-nav { gap: 24px; margin-right: 30px; }
  .hero-media::after { background: linear-gradient(94deg, rgba(23,27,23,.95) 0%, rgba(23,27,23,.9) 42%, rgba(23,27,23,.5) 70%, rgba(23,27,23,.2) 100%), linear-gradient(180deg, rgba(23,27,23,.34), rgba(23,27,23,0) 34%, rgba(23,27,23,.34)); }

  /* 영업시간 값 영역 확보 */
  .section-pad { padding-inline: 40px; }
  /* 메뉴는 태블릿에서도 3열 유지 */
  .menu-card { flex-basis: calc((100% - 48px) / 3); }
  .menu-card-body { padding: 24px; }
  .story-copy { padding-inline: 58px 40px; }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .hours-grid { gap: 44px; }
  .broadcast-section { gap: 48px; }
  .visit-copy { padding-inline: 46px; }
}

/* ⚠️ 도크 조건과 가로 조판 조건의 **적용 범위가 같아야 한다.**
   전에는 도크가 `max-width:820px`, 가로 조판이 `max-height:480px` 이라
   iPhone 12~15 가로(844~932px)가 둘 사이로 빠졌다 — 도크는 없는데 자리는 84px 예약되고,
   섹션 H2 하향도 안 걸려 H1(23px) < H2(38px) 로 위계가 뒤집혔다. */
@media (max-width: 820px), (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  :root { --page: calc(100vw - 40px); }
  .site-header { background: var(--paper-50); backdrop-filter: none; }
  .header-inner { height: 72px; }
  .brand-seal { width: 32px; height: 32px; font-size: 17px; }
  .brand-wordmark strong { font-size: 17px; }
  .desktop-nav, .header-actions .button, .desktop-only { display: none; }
  .menu-toggle { display: grid; }
  /* 100svh = 주소창이 보이는 상태의 화면 높이. 100vh 나 고정 640px 을 쓰면 주소창이
     떠 있는 **실제 첫 화면**(예: iPhone 14 Safari 는 844 가 아니라 664)에서 히어로가
     화면보다 길어져, 아래쪽 내용이 접히거나 하단 도크에 깔린다. 73 = 도크 72 + 경계 1 */
  .hero { min-height: calc(100svh - 73px); align-items: end; }
  /* 모바일에서도 영상을 튼다(세로 전용 소스). 토글은 히어로 하단에 작게.
     44px 은 자체 규칙(design-spec §8·§9.3)의 최소 터치 타깃이다 */
  /* ⚠️ 하단에 두면 안 된다 — 히어로 바닥 = 화면 바닥이라 bottom 16px 이 도크(72px) 안이다.
     그러면 자동재생 루프를 멈출 방법이 사라진다(WCAG 2.2.2 Pause, Stop, Hide).
     히어로 상단은 글자가 없는 영상 구역이라 여기로 옮긴다. */
  /* backdrop-filter 는 영상이 도는 동안 매 프레임 재계산된다. 헤더는 이미 껐는데 여기만 남아 있었다 */
  /* 112px 알약이 첫 화면에서 대비 13.9:1 로 H1 보다 먼저 눈에 들어왔다.
     WCAG 2.2.2 상 컨트롤은 필요하지만 라벨 텍스트까지 필요하진 않다 → 아이콘 전용 44×44 */
  .hero-motion-toggle { right: 16px; top: 16px; bottom: auto; width: 44px; min-width: 0; min-height: 44px; padding: 0; border-radius: 2px; background: rgba(23,27,23,.62); border-color: rgba(255,255,255,.34); }
  .hero-motion-toggle [data-hero-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero-motion-icon { width: auto; font-size: 14px; }
  /* 상단 알파를 .6 → .84 로 올린다. 눈썹(hero-locale)이 앉는 히어로 27% 지점의 실효 알파가
     .66 뿐이라, 코다리 컷처럼 밝은 장면이 오면 대비가 2.70:1 까지 떨어졌다(기준 4.5) */
  /* ⚠️ 스톱을 % 로 주면 안 된다. 히어로는 `align-items:end` 이고 높이가 100svh 라
     기기마다 495~771px 로 변한다 — 같은 % 가 글자 위치와 어긋나, 첫 화면이 짧은 기기
     (390×664 등)에서 글자가 영상의 밝은 부분에 올라가 대비가 2.18:1 까지 떨어졌다.
     **아래에서부터 px 로** 잡으면 글자 블록(하단 약 500px)이 항상 같은 어둠 위에 앉는다. */
  .hero-media::after { background: linear-gradient(to top,
      rgba(23,27,23,.95) 0,
      rgba(23,27,23,.93) 360px,
      rgba(23,27,23,.90) 500px,
      rgba(23,27,23,.55) 585px,
      rgba(23,27,23,.28) 100%); }
  /* 하단 여백은 도크 높이(72)를 포함해야 한다 — body 의 padding-bottom 은 **문서 끝**만
     예약할 뿐, 화면을 꽉 채우는 히어로의 끝은 예약해 주지 않는다.
     이 값이 40 이던 탓에 첫 화면에서 영업시간 줄이 통째로 도크에 가려 있었다. */
  .hero-inner { padding: 54px 0 calc(40px + 72px + env(safe-area-inset-bottom)); }
  /* 좁은 화면일수록 눈썹이 영상의 밝은 쪽에 걸린다(320px 에서 4.02:1).
     따뜻한 베이지 대신 흰색으로 — 액센트 색은 H1 강조와 배지가 계속 담당한다. */
  .hero-locale { margin-bottom: 12px; font-size: 13px; color: #fff; }
  .hero h1 { font-size: 38px; line-height: 1.28; }
  .hero-description { margin-top: 16px; font-size: 16px; line-height: 1.75; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .button { flex: 1; min-height: 50px; padding-inline: 14px; gap: 10px; }

  .section-pad { padding: 86px 20px; }
  /* 모바일은 섹션 여백이 86px 이라 델타가 다르다(실측 127~199px) */
  .section-pad, .story-section { scroll-margin-top: -62px; }
  .story-section     { scroll-margin-top: -60px; }
  .broadcast-section { scroll-margin-top: -62px; }
  .visit-section     { scroll-margin-top: -132px; }
  .section-heading-split { display: block; }
  /* H1 과 같은 38px 이면 첫 화면 제목이 본문 제목과 구분되지 않는다(단차 1.00배).
     H1 은 첫 화면 세로 예산 때문에 못 올리므로 섹션 H2 를 내려 1.19배 단차를 만든다. */
  .section-heading h2, .story-copy h2, .broadcast-intro h2, .space-copy h2, .visit-copy h2 { font-size: 32px; line-height: 1.34; }
  .heading-aside { margin-top: 28px; }
  .menu-grid { margin-top: 46px; gap: 16px; }
  .menu-card { flex-basis: 100%; box-shadow: 0 0 0 1px var(--buckwheat-200), 0 6px 18px rgba(32,36,31,.06); }
  .menu-card-body { min-height: auto; }
  .story-section { grid-template-columns: 1fr; padding-block: 0; }
  /* 세로 에셋 비율 유지 */
  .story-image { order: 2; max-width: 300px; aspect-ratio: 3 / 4; margin: 0 auto 64px; }
  .story-copy { padding: 84px 20px 0; }
  .story-copy .story-principle { margin-top: 36px !important; }
  .process-list { grid-template-columns: 1fr; margin-top: 42px; gap: 30px; }
  .process-image { margin-bottom: 18px; }
  .broadcast-section { grid-template-columns: 1fr; gap: 48px; }
  .broadcast-cards { gap: 12px; }
  .broadcast-card { min-height: 360px; padding: 24px; }
  .broadcast-card strong { font-size: 22px; }
  .hours-grid { margin-top: 40px; grid-template-columns: 1fr; gap: 44px; }
  /* 터치 타깃 44px 확보 */
  /* 모바일은 하단 고정바가 전화를 맡는다. 위 탭타깃 규칙이 .desktop-only 숨김을 덮으므로 뒤에서 다시 숨긴다 */
  .header-actions .desktop-only { display: none; }
  .brand { padding-block: 5px; }
  .space-section { grid-template-columns: 1fr; }
  .space-copy { padding: 86px 20px; }
  .visit-panel { grid-template-columns: 1fr; }
  .visit-section { padding-inline: 0; }   /* 패널을 풀블리드로. 안쪽 여백은 .visit-copy 가 준다 */
  .visit-copy { padding: 64px 20px; }
  /* 주차 위치를 알려 주는 유일한 사진 — 모바일에서는 폭을 다 쓴다 */
  .visit-media { padding: 0 0 24px; gap: 18px; }
  .visit-photo { padding: 0; }
  .visit-photo figcaption { padding-inline: 20px; }
  /* 메뉴 제목 아래 전화번호는 도크에 상시 전화가 있어 모바일에서 중복이다 */
  .mobile-hide { display: none; }
  /* 모바일 약도는 480×380 판이라 비율이 다르다 */
  .visit-photo .visit-map { aspect-ratio: 480 / 380; }
  .site-footer { padding: 62px 20px 36px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 34px; }
  .footer-top > p { grid-column: 1 / -1; order: 3; }
  .footer-bottom { display: block; }
  .footer-bottom p + p { margin-top: 8px; }
  /* iOS 홈 인디케이터 영역만큼 아래 여백을 더 준다. body padding-bottom 도 같은 만큼 늘린다 */
  .mobile-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); color: white; background: var(--ink-900); border-top: 1px solid rgba(255,255,255,.16); }
  /* white-space:nowrap + repeat(4,1fr) 조합이 200% 텍스트 확대에서 도크를 480px 로 밀어
     가로 스크롤을 만들었다(WCAG 1.4.4). 줄바꿈을 허용하고 트랙을 minmax(0,1fr) 로 둔다. */
  .mobile-action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding-inline: 2px; font-size: 13px; line-height: 1.25; text-align: center; }
  .dock-ico { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-action-bar a[href^="tel:"] { background: var(--red-700); }
  /* 문장 안에 박힌 전화번호(푸터)는 높이가 14px 뿐이라 손가락으로 정확히 누르기 어렵다.
     WCAG 2.5.8 은 문장 속 인라인 링크를 크기 규정에서 면제하지만, 전화 걸기는 이 가게의
     주 전환 행동이라 예외에 기대지 않는다. 인라인 요소의 세로 패딩은 줄 높이를 바꾸지
     않으므로 눌리는 영역만 넓어지고 레이아웃은 그대로다. */
  
}

@media (max-width: 460px) {
  .hero h1 { font-size: 38px; }
  .hero-actions { flex-direction: column; }
  .process-list { gap: 34px; }
  .broadcast-cards { grid-template-columns: 1fr; }
  .broadcast-card { min-height: 200px; padding: 22px; }
  .broadcast-card strong { margin-top: 24px; font-size: 20px; }
  .visit-actions { flex-direction: column; }
  .visit-actions .button { width: 100%; }
}

/* 화면이 **낮은** 기기 전용 — 폭이 아니라 높이가 문제인 경우다.
   360×640·375×667 같은 기기, 그리고 주소창이 떠 있는 모든 폰의 첫 화면이 여기 해당한다.
   이 높이에서 히어로 내용이 "도크 위 공간"보다 36px 넘쳐 영업시간 줄이 도크에 깔렸다.
   영업시간을 첫 화면에 보이게 하는 것이 이 히어로의 목적이므로 넘치는 만큼 조인다.
   글자 크기는 건드리지 않고 **여백과 제목 크기만** 줄인다(가독성 우선).
   ⚠️ 폭 기준 블록(820·460)보다 **뒤에** 와야 한다 — 같은 명시도라 순서가 이긴다. */
@media (max-width: 820px) and (max-height: 720px) {
  .hero-inner { padding-top: 24px; }
  /* H1 을 줄일 때 섹션 H2 도 같이 내린다. 안 그러면 첫 화면 제목이 본문 제목보다 작아져
     위계가 뒤집힌다(실측: H1 29px vs H2 38px). */
  .hero h1 { font-size: 33px; }
  /* 단차 1.15배 이상을 유지한다 — H1 33 / H2 27 = 1.22배 */
  .section-heading h2, .story-copy h2, .broadcast-intro h2, .space-copy h2, .visit-copy h2 { font-size: 27px; }
  .hero-locale { margin-bottom: 10px; }
  .hero-description { margin-top: 12px; }
  .hero-actions { margin-top: 16px; }
  .hero-hours { margin-top: 18px; }
}

/* 아주 좁고 낮은 화면(320×568·320×480). 여기서는 H1 이 3줄, 본문이 3줄로 늘어나
   위의 조임만으로는 영업시간이 여전히 도크 밑으로 들어간다.
   본문 한 줄을 접어 영업시간·방송 문구를 화면 안에 들인다 — 이 화면에서 더 중요한 건
   "몇 시에 여는지"이지 "면을 직접 뽑는다"가 아니다. */
@media (max-width: 360px) and (max-height: 640px) {
  .hero-inner { padding-top: 16px; }
  .hero h1 { font-size: 29px; line-height: 1.24; }
  .section-heading h2, .story-copy h2, .broadcast-intro h2, .space-copy h2, .visit-copy h2 { font-size: 25px; }
  .hero-description { display: none; }
  .hero-actions { margin-top: 14px; }
  .hero-actions .button { min-height: 46px; }   /* 320×480 에서 8px 이 모자랐다 */
  /* 영업시간을 2줄 위계로 바꾸며 늘어난 만큼(약 5px) 이 화면에서만 되돌린다 */
  .hero-hours { margin-top: 12px; gap: 4px; }
  .hero-trust { margin-top: 5px; }   /* 방송문구를 13px 로 키운 만큼 여백에서 되돌린다 */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero-video, .hero-motion-toggle { display: none; }
}


/* 손에 쥔 기기를 가로로 눕힌 화면(568×320·640×360·844×390 등).
   세로 공간이 320~390px 뿐이라 히어로 본문이 통째로 도크 아래로 밀린다 —
   실측에서 설명문이 33px 잘리고 CTA·영업시간은 첫 화면 밖이었다.
   이 화면에서는 "무엇을 파는가"보다 **전화·길찾기·오늘 영업시간**이 먼저다. */
@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  .hero { min-height: calc(100svh - 73px); }
  .hero-inner { padding-top: 12px; padding-bottom: calc(12px + 72px + env(safe-area-inset-bottom)); }
  .hero h1 { font-size: 26px; line-height: 1.2; }
  .hero-locale { margin-bottom: 6px; font-size: 12px; }
  .hero-description { display: none; }
  .hero-actions { margin-top: 12px; flex-direction: row; }
  .hero-actions .button { min-height: 44px; }
  /* 이 화면에서는 주간표를 접고 **오늘 영업시간(배지)만** 남긴다.
     세로 175px 안에 제목·CTA·영업시간을 다 넣어야 하는데 주간표가 55px 을 먹는다.
     오늘 여는지가 먼저고, 전체 시간표는 도크의 '영업안내'가 맡는다. */
  .hero-hours { margin-top: 10px; gap: 3px; font-size: 14px; }
  .hero-hours span { display: none; }
  .hero-trust { display: none; }
  .hero h1 { font-size: 23px; }
  .hero-inner { padding-top: 8px; }
  .hero-motion-toggle { width: 44px; min-height: 44px; font-size: 10px; }
  /* 이 블록에 섹션 H2 하향이 없으면 H1(21~23px) 이 H2(27~32px) 보다 작아진다 */
  .section-heading h2, .story-copy h2, .broadcast-intro h2, .space-copy h2, .visit-copy h2 { font-size: 18px; line-height: 1.3; }
  .menu-card h3, .process-list h3 { font-size: 17px; }
}

/* 가로 회전 중에서도 가장 낮은 화면(320px 대). 위 규칙만으로 9px 이 모자랐다. */
@media (orientation: landscape) and (max-height: 340px) and (pointer: coarse) {
  .hero h1 { font-size: 21px; }
  .hero-actions { margin-top: 8px; }
  .hero-hours { margin-top: 8px; }
  .hero-locale { margin-bottom: 4px; }
}