/* ==========================================================================
   무쇠김치삼겹 명동점 — 디자인 시스템 v2 (2026-09-18)
   "흑·백·낙관 — 원조 가마솥 뚜껑"

   · 먹(#1B1716) 섹션과 한지(#F6F4F0) 섹션을 번갈아 배치 — 스크롤이 먹과 종이처럼 흐른다.
   · 낙관 레드 #D60011 : 화면당 한 곳(로고 낙관·주 CTA·핀). 텍스트 색으로 쓰지 않는다.
   · 붓 띠 #970000   : 섹션당 한 구절 뒤에만(.brush). 한지 위 작은 강조 글자색으로도 사용.
   · 모티프: 뒤집은 가마솥 뚜껑 라인(#i-lid) / 낙관(元祖) / 원형 플래터 / 붓 띠 / 로고 워터마크.
   · 외부 CDN·웹폰트 없음 — :lang() 별 시스템 명조(제목)·고딕(본문) 스택. JS 없음.
   · README §11 줄바꿈 규칙 유지: keep-all 은 ko 전용, ja/zh 는 line-break: strict,
     그리드는 전부 minmax(0, Nfr).
   ========================================================================== */

:root {
  /* 먹 */
  --deep: #0C0605;          /* 헤더·푸터 */
  --dark: #1B1716;          /* 어두운 섹션 */
  --dark-2: #241E1C;        /* 카드 */
  --dark-3: #2F2826;
  --line-d: #3B3230;
  --line-d-soft: #2A2321;
  --on-dark: #F4EFEB;       /* 16.6:1 */
  --on-dark-2: #C4B9B3;     /* 9.3:1 */
  --on-dark-3: #A0948E;     /* 6.0:1 */
  /* 한지 */
  --paper: #F6F4F0;         /* 본사 #F6F6F7 을 아주 약간 따뜻하게 — 웜 블랙 먹과 색온도 통일 */
  --paper-2: #EEEAE3;
  --paper-card: #FFFDFA;
  --line-p: #DDD5CB;
  --ink: #231916;           /* 로고 먹색 · 15.6:1 */
  --ink-2: #4B403C;         /* 9.4:1 */
  --ink-3: #6F635E;         /* 5.6:1 */
  /* 붉은 점 */
  --seal: #D60011;          /* 흰 글자 대비 5.4:1 */
  --seal-deep: #B3000E;
  --band: #970000;          /* 한지 위 8.3:1 */
  --radius: 4px;
  --shell: 1180px;
  --narrow: 780px;
  --header-h: 64px;
  --cta-h: 60px;

  /* 한지 결 — 아주 옅은 섬유 노이즈 (SVG 필터, 외부 파일 없음) */
  --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .08' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .44 0 0 0 0 .36 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  /* 붓 띠 — 거친 붓 자국 모양 (평평한 사각형이 아님) */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%23970000' d='M6 17C60 9 140 13 222 9c68-3 126-4 172 3l-6 8 10 7-9 7 7 9-10 5c-56 5-136 8-210 5-72-2-126 4-166-2l5-7-12-6 9-7-10-7z'/%3E%3Cpath fill='%23970000' opacity='.55' d='M40 8C140 2 280 2 372 6l-1 3C280 6 150 7 42 11z'/%3E%3Cpath fill='%23970000' opacity='.45' d='M28 53c80 4 190 3 300-1l-1 3c-110 4-220 5-298 1z'/%3E%3C/svg%3E");

  /* 글꼴 — 기본(en) */
  --fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fd: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --fd-w: 700;
  --fl: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 라틴 전용(링 문구) */
}

/* 언어별 글꼴 스택: 제목 = 명조(--fd), 본문 = 고딕(--fb).
   ja 는 Malgun Gothic·YaHei 로 떨어지지 않도록 일본어 고딕을 명시한다. */
:lang(ko) {
  --fb: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", -apple-system, "Segoe UI", sans-serif;
  --fd: "Nanum Myeongjo", "Batang", "AppleMyungjo", "Noto Serif KR", serif;
}
:lang(en) {
  --fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fd: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
:lang(ja) {
  --fb: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  /* 명조가 없는 환경(예: 한국어판 Windows)에서는 한국어 명조가 아니라 일본어 고딕으로 떨어지게 한다 */
  --fd: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "Noto Serif JP", "Noto Serif CJK JP", "Yu Gothic", YuGothic, serif;
  --fd-w: 600;
}
:lang(zh-Hans) {
  --fb: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --fd: "SimSun", "Songti SC", "Noto Serif SC", "STSong", serif;
}
:lang(zh-Hant) {
  --fb: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --fd: "PMingLiU", "Songti TC", "Noto Serif TC", "MingLiU", serif;
}
[lang] { font-family: var(--fb); }

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--deep);
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px)); /* 모바일 고정 CTA 공간 */
}

/* 줄바꿈 규칙 (README §11 — 수정 금지): 한국어는 어절 단위 유지(keep-all),
   일본어·중국어는 문자 단위 줄바꿈 + 금칙처리. keep-all 을 전역에 걸면 ja/zh 레이아웃이 깨진다. */
html[lang="ko"] body { word-break: keep-all; }
html[lang="ja"] body,
html[lang="zh-CN"] body,
html[lang="zh-TW"] body,
html[lang="zh-Hans"] body,
html[lang="zh-Hant"] body { word-break: normal; line-break: strict; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 레이아웃 ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
}
.shell.narrow { max-width: var(--narrow); }

.sec { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.sec-dark { background: var(--dark); color: var(--on-dark); }
.sec-paper {
  background-color: var(--paper);
  background-image: var(--paper-tex);
  color: var(--ink);
}

/* ---------- 타이포그래피 ---------- */

h1, h2, .display {
  font-family: var(--fd);
  font-weight: var(--fd-w);
  font-synthesis: none;          /* 굵은 꼴이 없는 명조(Batang·SimSun)에 가짜 볼드를 만들지 않는다 */
  text-wrap: balance;
}
/* 일본어 제목은 문절 단위 줄바꿈(Chrome 119+). 본문은 §11 규칙 그대로.
   QA 2026-09-20: 짧은 캡션(메뉴명·플레이트명)이 "サムギョ/プサル" 처럼 낱말 중간에서
   잘리던 문제 때문에 제목 외에 이름표 계열도 문절 단위로 넘긴다. */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .display, :lang(ja) .point-t,
:lang(ja) .plate-name, :lang(ja) .feature-name, :lang(ja) .feature-tag,
:lang(ja) .side-name, :lang(ja) .slogan-by, :lang(ja) .addr-brand,
:lang(ja) .sides-title, :lang(ja) .kicker-band { word-break: auto-phrase; }

h1 { margin: 0 0 .5em; line-height: 1.14; letter-spacing: -.01em; }
h2 {
  margin: 0 0 .8em;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.005em;
}
h3 { margin: 0; }
.sec-paper h2, .sec-paper h3 { color: var(--ink); }

.sec-dark p { color: var(--on-dark-2); }
.sec-paper p { color: var(--ink-2); }

.kicker {
  margin: 0 0 1.1em;
  font-family: var(--fb);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.sec-paper .kicker { color: var(--band); }

/* 붓 띠 — 핵심 구절 1개 */
.brush {
  background: var(--brush) center / 100% 100% no-repeat;
  color: #FFF8F2;
  padding: .04em .32em .1em;
  margin: 0 -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 뒤집은 뚜껑 구분선 */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 440px;
  margin: 0 auto clamp(44px, 6vw, 72px);
  color: var(--ink-3);
}
.sec-dark .divider { color: var(--on-dark-3); }
.divider::before, .divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .35;
}
.lid { width: 76px; height: 23px; flex: 0 0 auto; }

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 6, 5, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244, 239, 235, .07);
  color: var(--on-dark);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 8px 28px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.brand-name, .h1-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a {
  font-size: .95rem;
  color: var(--on-dark-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--on-dark); }
.main-nav a[aria-current="page"] { color: var(--on-dark); border-bottom-color: var(--on-dark); }

/* 언어 전환 — <details> 만으로 동작(JS 0) */
.lang { position: relative; flex: 0 0 auto; }
.lang summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 7px 12px;
  border: 1px solid var(--line-d);
  border-radius: 999px;
  font-size: .84rem;
  line-height: 1.2;
  color: var(--on-dark-2);
  white-space: nowrap;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.lang[open] summary { color: var(--on-dark); border-color: var(--on-dark-3); }
.lang .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.lang-short { display: none; }
.lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  min-width: 178px;
  display: grid;
  padding: 6px;
  background: var(--dark-2);
  border: 1px solid var(--line-d);
  border-radius: 8px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7);
}
.lang-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;   /* QA 2026-09-20: 터치 타깃 44px 확보 */
  border-radius: 5px;
  color: var(--on-dark-2);
  text-decoration: none;
  font-size: .92rem;
}
.lang-list a:hover { background: var(--dark-3); color: var(--on-dark); }
.lang-list a[aria-current="true"] { background: var(--dark-3); color: var(--on-dark); }
.lang-code {
  display: inline-block;
  min-width: 2em;
  font-family: var(--fl);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--on-dark-3);
}

@media (max-width: 600px) {
  :root { --header-h: 56px; }
  .header-inner { gap: 8px 14px; }
  .brand img { height: 36px; }
  .header-inner { gap: 8px 10px; }
  .main-nav { gap: 8px; }
  /* QA 2026-09-20 — 터치 타깃: 글자 높이(38px)로는 모자라 헤더 높이(56px) 안에서
     가능한 최대치인 48px 로 키우고, 2글자 CJK 링크도 좌우 여백으로 폭을 확보한다.
     헤더 자체 높이는 그대로 56px (≤64px 규칙 유지). */
  .main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 6px;
    font-size: .9rem;
  }
  /* .main-nav a(0,1,1) 가 .nav-home(0,1,0) 을 이기므로 선택자를 맞춰 숨김을 유지한다 */
  .main-nav a.nav-home { display: none; }  /* 로고가 홈 링크 */
  .brand { min-height: 48px; }
  .lang-cur { display: none; }
  .lang-short { display: inline; font-family: var(--fl); font-weight: 600; }
  .lang summary { min-height: 44px; padding: 6px 11px; gap: 5px; }
  /* 본문 안의 텍스트 링크도 손가락으로 누를 만큼(44px). 밑줄이 글자에서 8px 만
     떨어지도록 위쪽에 더 많이 준다 — 위쪽 여백은 어차피 비어 있던 자리다. */
  .link-arrow { padding-top: 15px; padding-bottom: 8px; }
  .nap-row dd a { display: inline-block; padding: 9px 0; }
}

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: var(--radius);
  font-family: var(--fb);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-seal { background: var(--seal); color: #fff; }
.btn-seal:hover { background: var(--seal-deep); }
.btn-line { border-color: rgba(244, 239, 235, .38); color: var(--on-dark); }
.btn-line:hover { border-color: var(--on-dark); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #3a2c27; }
.btn-ink-line { border-color: var(--ink); color: var(--ink); }
.btn-ink-line:hover { background: var(--ink); color: var(--paper); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-arrow::after { content: "→"; font-family: var(--fl); }

.section-action { margin-top: 2.2em; }

/* ---------- 히어로 ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46% 58% at 76% 50%, rgba(151, 0, 0, .20), transparent 72%),
    radial-gradient(70% 50% at 10% 0%, rgba(244, 239, 235, .035), transparent 60%),
    var(--dark);
  color: var(--on-dark);
  padding: clamp(20px, 4vw, 64px) 0 clamp(56px, 8vw, 104px);
}
.hero-grid { display: grid; gap: 20px 56px; align-items: center; }
.hero-visual { order: -1; }
.hero-logo { display: none; width: clamp(220px, 21vw, 300px); height: auto; margin: 0 0 30px; }
.hero .kicker { margin-bottom: .9em; }
.hero h1 { margin-bottom: .55em; }
.hero .h1-a {
  display: block;
  margin-bottom: .75em;
  font-family: var(--fb);
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--on-dark-2);
}
.hero .h1-b {
  display: block;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.16;
}
.hero-sub {
  max-width: 34em;
  margin: 0 0 1.8em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line-d);
  font-family: var(--fb);
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--on-dark-2);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-more { margin: 1.6em 0 0; font-size: .95rem; color: var(--on-dark-2); }

/* 원형 플래터 + 텍스트 링 */
.platter { position: relative; width: min(82vw, 340px); aspect-ratio: 1 / 1; margin: 0 auto; }
.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ring-spin 140s linear infinite;
}
.ring-line { fill: none; stroke: rgba(244, 239, 235, .16); stroke-width: 1; }
.ring-text {
  font-family: var(--fl);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  fill: var(--on-dark-3);
}
.platter-photo {
  position: absolute;
  inset: 9%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dark-2);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(244, 239, 235, .08);
}
.platter-photo picture, .platter-photo img { display: block; width: 100%; height: 100%; }
.platter-photo img { object-fit: cover; border-radius: 50%; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }

@media (max-width: 600px) {
  .hero .kicker { font-size: .72rem; letter-spacing: .14em; }
}
@media (max-width: 860px) {
  .hero .hero-actions { display: none; }   /* 모바일은 하단 고정 CTA 바(길찾기·전화)가 같은 역할 */
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  .hero-visual { order: 0; }
  .hero-logo { display: block; }
  .platter { width: min(100%, 580px); }
}

/* ---------- 브랜드 스토리 (한지) ---------- */

/* QA 2026-09-20 — 여기 있던 overflow:hidden 은 워터마크(-2%)를 자르려고 넣은 것인데,
   그 때문에 .story-stack 의 position:sticky 가 죽었다(sticky 는 overflow 가 걸린
   조상 안에 갇힌다). 워터마크를 right:0 으로 당겨 넘칠 일을 없애고 clip 을 뺀다. */
.story::after {                         /* 로고 워터마크 */
  content: "";
  position: absolute;
  right: 0;
  bottom: 18px;
  width: min(58vw, 620px);
  aspect-ratio: 461 / 174;
  background: url("/assets/images/logo-ink.png") no-repeat center / contain;
  opacity: .045;
  pointer-events: none;
}
.story > .shell { position: relative; z-index: 1; }
.story-grid { display: grid; gap: 48px; align-items: start; }
.story-title {
  margin: 0 0 .75em;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.3;
  color: var(--ink);
}
.story .lede {
  margin: 0 0 2.2em;
  font-size: clamp(1.04rem, 1.6vw, 1.18rem);
  line-height: 1.9;
  color: var(--ink);
}
.points {
  list-style: none;
  margin: 0;
  padding: 28px 0 0;
  display: grid;
  gap: 28px;
  border-top: 1px solid var(--line-p);
}
.point { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.point-no {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--band);
  border-top: 2px solid var(--band);
  padding-top: 4px;
}
.point-t {
  margin: 0 0 .35em;
  font-family: var(--fd);
  font-weight: var(--fd-w);
  font-synthesis: none;
  font-size: 1.24rem;
  line-height: 1.4;
  color: var(--ink);
}
.point-d { margin: 0; line-height: 1.85; }

.story-media { margin: 0; }
.story-ph img { display: block; width: 100%; height: auto; }
.ph-main { margin-left: 14%; box-shadow: 0 30px 60px -34px rgba(35, 25, 22, .55); }
.ph-main img { aspect-ratio: 4 / 3; object-fit: cover; }
.ph-sub {
  position: relative;
  z-index: 2;
  width: 54%;
  margin-top: -20%;
  border: 7px solid var(--paper);
  box-shadow: 0 24px 40px -28px rgba(35, 25, 22, .6);
}
.story-media figcaption {
  margin-top: 14px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.brand-line {
  margin: clamp(64px, 9vw, 104px) auto 0;
  max-width: 780px;
  padding-top: 44px;
  border-top: 1px solid var(--line-p);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.seal { width: 62px; height: 62px; flex: 0 0 auto; transform: rotate(-4deg); }
.seal-t {
  font-family: "Batang", "Yu Mincho", "Hiragino Mincho ProN", "SimSun", "AppleMyungjo", serif;
  font-size: 17px;
  font-weight: 700;
  fill: #FFFAF6;
}
.slogan {
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.25;
  color: var(--ink) !important;
}
.slogan-tr { margin: .3em 0 0; font-size: 1.02rem; color: var(--ink-2); }
.slogan-tr:empty { display: none; }
.slogan-by {
  margin: .6em 0 0;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3) !important;
}

@media (min-width: 960px) {
  .story-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 80px; }
  /* QA 2026-09-20 — 데스크톱에서 사진 칼럼(411px)이 카피 칼럼(843~1062px)보다
     훨씬 짧아 오른쪽에 410~610px 의 빈 한지가 남았다.
     ① 14% 들여쓰기를 8% 로 줄여 사진을 키우고
     ② 01·02·03 을 읽는 동안 사진이 따라오도록 sticky 로 붙인다(JS 0).
     sticky 는 "자기 칼럼 박스" 안에서만 움직이므로, 칼럼(figure)을 행 높이만큼
     늘리고(stretch) 그 안의 .story-stack 을 sticky 로 잡아야 실제로 따라온다. */
  .story-grid { align-items: stretch; }
  .story-media { margin-top: 56px; }
  .story-stack {
    position: sticky;
    top: calc(var(--header-h) + 36px);
  }
  .ph-main { margin-left: 8%; }
}

/* ---------- 스플릿 섹션 ---------- */

.split { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
.split-copy h2:not(:first-child) { margin-top: 1.7em; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-reverse .split-copy { order: 2; }
  .split-reverse .split-media { order: 1; }
}

.photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--dark-2); }
.photo img { display: block; width: 100%; height: auto; }
.sec-dark .photo { box-shadow: 0 0 0 1px var(--line-d), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.sec-paper .photo { box-shadow: 0 34px 64px -36px rgba(35, 25, 22, .55); }
.grill .photo img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- 대표 메뉴 (한지) ---------- */

.sig-grid { display: grid; gap: 40px; align-items: center; }
/* 엇갈림(stagger)은 의도된 편집 레이아웃이라 캡션 기준선을 맞추지 않는다 —
   대신 아래 .sides / .feature 처럼 엇갈림이 없는 그리드만 기준선을 맞춘다. */
.sig-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; align-items: start; }
.plate { margin: 0; text-align: center; }
.plate img { width: 100%; max-width: 300px; margin: 0 auto 10px; }
.plate:nth-child(2) { margin-top: 30%; }
.plate figcaption { margin-top: 2px; line-height: 1.5; }
.plate-name {
  display: block;
  font-family: var(--fd);
  font-weight: var(--fd-w);
  font-synthesis: none;
  font-size: 1.12rem;
  color: var(--ink);
}
.plate-price { font-weight: 700; color: var(--band); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .sig-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; }
}

.teaser { margin-top: clamp(72px, 10vw, 120px); text-align: center; }
.teaser p { max-width: 42em; margin-left: auto; margin-right: auto; }

/* ---------- 이용 안내 (먹) ---------- */

.info-grid { display: grid; gap: 40px; align-items: start; }
.info-card {
  background: var(--dark-2);
  border: 1px solid var(--line-d);
  border-radius: 6px;
  padding: clamp(24px, 3.4vw, 36px);
}
.rating-big {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-d);
}
.rating-num {
  grid-row: 1 / 3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--on-dark);
}
.stars {
  font-size: 1.1rem;
  letter-spacing: .12em;
  line-height: 1.2;
  background: linear-gradient(90deg, var(--on-dark) 93%, var(--line-d) 93%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  justify-self: start;
}
.rating-meta { font-size: .9rem; color: var(--on-dark-3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  border: 1px solid var(--line-d);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .87rem;
  line-height: 1.4;
  color: var(--on-dark-2);
}
@media (min-width: 960px) {
  .info-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; }
}

/* ---------- 지도 ---------- */

.map-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
.pin { width: 40px; height: 50px; flex: 0 0 auto; margin-top: 6px; color: var(--seal); }
.map-head h2 { margin-bottom: .4em; }
.map-body { max-width: 60ch; }
.map-addr { font-weight: 600; color: var(--on-dark) !important; }
.map-embed {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-d);
  border-radius: 6px;
  background: var(--dark-2);
}
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ---------- 페이지 머리 (메뉴·오시는 길) ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 90% at 88% 0%, rgba(151, 0, 0, .18), transparent 70%),
    var(--dark);
  color: var(--on-dark);
  padding: clamp(48px, 8vw, 104px) 0 clamp(52px, 7vw, 92px);
}
.page-head .shell { position: relative; z-index: 1; }
.page-head h1 { max-width: 20em; margin-bottom: .7em; }
.page-head .h1-a { display: block; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.18; }
.page-head .h1-b {
  display: block;
  margin-top: .8em;
  font-family: var(--fb);
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.5;
  color: var(--on-dark-2);
}
.page-head .intro { max-width: 44em; margin: 0; color: var(--on-dark-2); }
.head-lid {
  position: absolute;
  right: -4vw;
  bottom: -2vw;
  width: min(62vw, 680px);
  height: auto;
  aspect-ratio: 120 / 36;
  color: rgba(244, 239, 235, .07);
  pointer-events: none;
}

/* ---------- 메뉴: 강조 카드 (한지) ---------- */

.feature-head { max-width: var(--narrow); margin: 0 auto clamp(44px, 6vw, 72px); }
.kicker-band { margin: 0 0 1.2em; font-family: var(--fd); font-size: 1.05rem; font-synthesis: none; }
.kicker-band .brush { padding: .16em .8em .22em; }
.features {
  list-style: none;
  margin: 0 0 clamp(64px, 9vw, 104px);
  padding: 0;
  display: grid;
  gap: 26px;
}
.feature { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; align-items: center; }
.feature-img { display: grid; place-items: center; aspect-ratio: 1 / 1; }
.feature-img picture { display: block; width: 100%; }
.feature-img img { width: 100%; height: auto; }
.feature-img.is-photo picture {           /* 사진은 누끼 플래터와 같은 크기의 원으로 */
  /* QA 2026-09-20 — 누끼 PNG 의 실제 내용 비율이 98% 라 94% 로는 사진 카드만
     지름이 19px 작아 보였다(320 vs 301). 98% 로 맞추고 테두리는 5px 로 얇게 —
     가마솥 뚜껑 테 모티프는 유지하되 검은 덩어리처럼 무거워지지 않게. */
  width: 98%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--ink);
  box-shadow: 0 16px 28px -16px rgba(35, 25, 22, .7);
}
.feature-img.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-name {
  margin: 0 0 .3em;
  font-family: var(--fd);
  font-weight: var(--fd-w);
  font-synthesis: none;
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--ink);
}
.feature-tag { margin: 0 0 .35em; font-size: .92rem; line-height: 1.6; }
.feature-price {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--band) !important;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 760px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: stretch; }
  /* QA 2026-09-20 — 메뉴명이 1줄/2줄로 갈리면 3장의 가격 줄이 어긋났다.
     .feature = [사진][본문] 2단 구조이므로 본문을 세로 flex 로 늘려
     가격을 카드 바닥에 고정한다 → 3장의 가격 기준선이 맞는다. */
  .feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    text-align: center;
    align-content: start;
  }
  .feature-img { width: min(100%, 320px); margin: 0 auto; }
  /* 설명(.feature-tag)이 없는 카드도 있으므로 가격에 margin-top:auto 를 걸어
     "무엇이 있든 가격은 카드 바닥" 으로 못박는다 */
  .feature-body { display: flex; flex-direction: column; height: 100%; }
  .feature-price { margin-top: auto; }
}

.sides-title {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--fd);
  font-weight: var(--fd-w);
  font-synthesis: none;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
.sides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 16px;
}
/* QA 2026-09-20 — 2×2·4열 그리드에서 이름이 1줄/2줄로 갈리면 가격 줄이 어긋났다.
   이름을 늘어나게 두고 가격을 바닥에 고정해 같은 행의 가격 기준선을 맞춘다. */
.side { text-align: center; display: flex; flex-direction: column; }
.side-img img { width: min(100%, 150px); height: auto; margin: 0 auto; }
.side-name { margin: .5em 0 .15em; font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--ink) !important; }
/* margin-top:auto = 이름이 1줄이든 2줄이든 가격은 칸 바닥 → 같은 행끼리 기준선이 맞는다 */
.side-price { margin: auto 0 0; font-size: .92rem; font-weight: 700; color: var(--band) !important; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .sides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 메뉴: 전체 목록 — 먹 테이블 위 한지 메뉴판 ---------- */

.menu-sheet {
  background-color: var(--paper);
  background-image: var(--paper-tex);
  color: var(--ink);
  border-radius: 3px;
  padding: clamp(28px, 5vw, 60px) clamp(20px, 5vw, 60px);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9);
}
.menu-section { margin-bottom: clamp(44px, 6vw, 60px); }
.menu-section:last-child { margin-bottom: 0; }
.menu-section > h2 {
  margin: 0 0 .2em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--ink);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  color: var(--ink);
}
.menu-items { list-style: none; margin: 0; padding: 0; }
.menu-item { padding: 16px 0; border-bottom: 1px solid var(--line-p); }
.menu-item:last-child { border-bottom: 0; }
.menu-item-head { display: flex; align-items: baseline; gap: 10px; }
.menu-item h3 {
  flex: 0 1 auto;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.leader {
  flex: 1 1 24px;
  min-width: 24px;
  border-bottom: 2px dotted #B8ADA2;
  transform: translateY(-.28em);
}
.menu-price {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--band);
  font-variant-numeric: tabular-nums;
}
.menu-item p {
  margin: .35em 0 0;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.menu-note { margin-top: clamp(28px, 5vw, 40px); font-size: .85rem; color: var(--on-dark-3) !important; }
.sec-paper .menu-note { color: var(--ink-3) !important; }

/* ---------- 오시는 길 ---------- */

.loc-grid { display: grid; gap: 28px; }
.addr-card {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--line-p);
  border-radius: 6px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 34px 64px -44px rgba(35, 25, 22, .55);
}
.pin-lg { display: block; width: 44px; height: 55px; margin: 0 0 16px; color: var(--seal); }
.addr-brand {
  margin: 0 0 .9em;
  font-family: var(--fd);
  font-weight: var(--fd-w);
  font-synthesis: none;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink) !important;
}
.addr-card .hero-actions { margin-top: 1.6em; }
.addr-more { margin: 1.4em 0 0; font-size: .95rem; color: var(--ink) !important; }
.loc-main .map-embed { border-color: var(--line-p); min-height: 420px; }
.loc-main .map-embed iframe { height: 100%; min-height: 420px; }
.slot-col { display: grid; gap: 20px; }
@media (min-width: 960px) {
  .loc-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: stretch; }
}

/* ---------- NAP (푸터·주소 카드 공용) ---------- */

.nap { margin: 0; }
.nap-row {
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line-d-soft);
}
.nap-row dt { padding-top: .15em; font-size: .8rem; letter-spacing: .06em; color: var(--on-dark-3); }
.nap-row dd { margin: 0; font-size: .96rem; color: var(--on-dark-2); }
.nap-row dd a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--seal); }
.addr-card .nap-row { border-top-color: var(--line-p); }
.addr-card .nap-row dt { color: var(--ink-3); }
.addr-card .nap-row dd { color: var(--ink); }
.addr-card .nap-row dd a { color: var(--ink); border-bottom-color: var(--band); }

/* ---------- 푸터 ---------- */

.site-footer {
  background: var(--deep);
  color: var(--on-dark);
  padding: clamp(56px, 8vw, 88px) 0 32px;
  border-top: 1px solid var(--line-d-soft);
}
.footer-grid { display: grid; gap: 36px; }
.footer-logo { width: 190px; height: auto; margin: 0 0 18px; }
.footer-brand { margin: 0 0 .2em; font-size: 1.05rem; font-weight: 700; color: var(--on-dark); }
.footer-descriptor { margin: 0; font-size: .9rem; color: var(--on-dark-3); }
.footer-rating { margin: 1.2em 0 0; font-size: .88rem; color: var(--on-dark-3); }
.star { color: var(--on-dark); }
.footer-mark { display: flex; justify-content: center; padding-top: 44px; color: var(--line-d); }
.footer-mark .lid { width: 96px; height: 29px; }
@media (min-width: 860px) {
  .footer-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
}

/* ---------- 모바일 하단 고정 CTA ---------- */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  height: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--deep);
  border-top: 1px solid var(--line-d);
}
.cta {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.cta-directions { background: var(--seal); color: #fff; }
.cta-call { background: var(--dark-2); color: var(--on-dark); }
@media (min-width: 861px) {
  .cta-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- 사진 플레이스홀더 (사진 파일이 없을 때만) ---------- */

.photo-slot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--line-d);
  border-radius: var(--radius);
  background: var(--dark-2);
  color: var(--on-dark-3);
}
.photo-slot-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  border: 1px solid var(--line-d);
  border-radius: 999px;
  padding: 3px 10px;
}
.photo-slot-label { font-size: .92rem; max-width: 30ch; }

/* ---------- 인쇄 ---------- */

@media print {
  .cta-bar, .lang, .map-embed, .ring, .site-header { display: none; }
  body, .sec, .hero, .page-head, .site-footer { background: #fff !important; color: #111 !important; }
}