/* 감나무집 v6 — «감나무 아래 마당집의 차림표» (DESIGN.md) · 한지 · 먹 · 감빛 하나 */
@font-face { font-family: 'GN Brush'; src: url(../fonts/brush.c118946c02.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'GN Batang'; src: url(../fonts/batang-400.22a0f8622a.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GN Batang'; src: url(../fonts/batang-700.8d658afd2f.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #F3EBDD; --paper2: #EADFCB; --mat: #FBF7EF; --ink: #2A2521; --ink2: #5A5049; --kam: #A3441B; --kam-l: #C8693A;
  --leaf: #5E5B3C; --night: #26211D; --line: rgba(42, 37, 33, .16); --cream: #F3EBDD; --cream2: #C9BCA7;
  --brush: 'GN Brush', 'GN Batang', serif;
  --serif: 'GN Batang', 'Nanum Myeongjo', 'Noto Serif KR', 'AppleMyungjo', serif;
  --sans-ko: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: var(--sans-ko);
  --wrap: 1240px; --gut: 40px; --ease: cubic-bezier(.2, .7, .2, 1);
  --hd: 76px;
}
html[lang="zh-CN"] { --serif: 'Noto Serif SC', 'GN Batang', 'Songti SC', 'SimSun', serif; --sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', var(--sans-ko); }
html[lang="ja"] { --serif: 'Noto Serif JP', 'GN Batang', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', var(--sans-ko); }
html:not([lang="ko"]) [lang="ko"] { --sans: var(--sans-ko); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 12px); }
html[data-l10n-wait] body { opacity: 0; }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.8 var(--serif); font-variant-numeric: lining-nums;
  background-color: var(--paper);
  /* 한지: 고른 잔결(등방성 잡음) + 성긴 긴 섬유 + 큰 얼룩 농담 — 모두 코드, 생성 이미지 아님 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='none' stroke='%237a6650' stroke-opacity='.17' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M30 80c60-14 120 6 170-8'/%3E%3Cpath d='M300 40c40 20 90 18 140 34'/%3E%3Cpath d='M90 300c50 10 70-12 130 2'/%3E%3Cpath d='M360 260c34-10 80 4 120-14'/%3E%3Cpath d='M180 460c60 8 110-10 160 6'/%3E%3Cpath d='M20 520c40-6 60 10 96 2'/%3E%3Cpath d='M440 420c30 12 60 6 100 20'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    radial-gradient(60% 40% at 12% 18%, rgba(234, 223, 203, .9), transparent 70%),
    radial-gradient(50% 36% at 88% 62%, rgba(230, 217, 196, .7), transparent 70%);
  background-size: 560px 560px, 220px 220px, 100% 1800px, 100% 2200px;
}
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
html[lang="zh-CN"] body, html[lang="ja"] body { word-break: normal; line-break: strict; overflow-wrap: break-word; }
html:not([lang="ko"]) [lang="ko"] { word-break: keep-all; }
html[lang="ja"] .sh__t, html[lang="ja"] .board__h, html[lang="ja"] .hero__hand { word-break: auto-phrase; text-wrap: balance; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; font: 700 15px var(--sans); text-decoration: none; }
.skip:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--kam); outline-offset: 3px; }
.wrap { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.ic { flex: none; }

/* 언어별 보이기 */
.tw, html[lang="ko"] .tw { display: none; }
html:not([lang="ko"]) .tw { display: inline; margin-left: .45em; font: 600 max(12.5px, .7em)/1.3 var(--sans); color: var(--ink2); letter-spacing: 0; white-space: nowrap; }
html[lang="ko"] .fx { display: none; }
.md:empty { display: none; }
.nm { font-family: var(--serif); white-space: nowrap; }
html:not([lang="ko"]) .tw--b { display: block; margin: 6px 0 0; font: 400 1em/1 var(--brush); color: var(--kam); letter-spacing: 0; white-space: normal; }
.kd { display: block; font-size: 46px; line-height: 1; color: var(--kam); margin-bottom: 6px; }
.nw { white-space: nowrap; }

/* 붓 글씨 — 한국어 화면만. 외국어는 읽기 쉬운 바탕체 */
.hand { font-family: var(--brush); font-weight: 400; letter-spacing: 0; }
html:not([lang="ko"]) .hand:not([lang="ko"]) { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 4px;
  font: 700 15px/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--call { background: var(--kam); color: #fff; }
.btn--call:hover { background: #8A3814; }
.btn__num { font-weight: 500; letter-spacing: .02em; padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .45); white-space: nowrap; }
.btn--big { min-height: 56px; padding: 0 24px; font-size: 17px; }
.btn--line { border-color: rgba(42, 37, 33, .38); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: var(--paper2); }
.btn--ghost { border-color: rgba(243, 235, 221, .4); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(243, 235, 221, .08); }
.btn--block { width: 100%; }
.btn__t { white-space: nowrap; }

/* ── 머리 ── */
.hd { position: sticky; top: 0; z-index: 40; height: var(--hd); background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.hd.is-sc { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(42, 37, 33, .5); }
.hd__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; line-height: 1; flex: none; }
.brand__nm { font-size: 38px; line-height: .9; color: var(--ink); }
.brand__sub { font: 600 12.5px/1.3 var(--sans); color: var(--ink2); margin-top: 4px; white-space: nowrap; }
.gnb { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.gnb ul { display: flex; gap: 28px; }
.gnb__a { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; position: relative; padding: 0; font: 700 16px/1.2 var(--serif); text-decoration: none; white-space: nowrap; color: var(--ink); }
.gnb__a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 2px; background: var(--kam); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.gnb__a:hover::after, .gnb__a:focus-visible::after { transform: none; }
.hd__tools { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.lang { display: flex; align-items: center; }
.lang button { min-width: 40px; height: 40px; padding: 0 7px; border: 0; background: none; cursor: pointer; font: 700 13px/1 var(--sans); color: var(--ink2); border-radius: 3px; }
.lang button[aria-pressed="true"] { color: var(--kam); box-shadow: inset 0 -2px 0 var(--kam); }
.lang button:hover { color: var(--ink); background: var(--paper2); }
.hd__tel { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border: 1.5px solid var(--kam); border-radius: 999px; color: var(--kam); font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; }
.hd__tel:hover { background: var(--kam); color: #fff; }
.hd__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--ink); }
html.gn-fold .gnb { display: none; }
html.gn-fold .hd__burger { display: inline-flex; }

/* 드로어 */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer[hidden] { display: none; }
.drawer__bg { position: absolute; inset: 0; background: rgba(38, 33, 29, .5); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); background: var(--paper); padding: 18px 24px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .4); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__nm { font-size: 40px; line-height: 1; }
.drawer__x { width: 44px; height: 44px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.drawer__nav { border-top: 1px solid var(--line); }
.drawer__nav a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); font: 700 21px/1.3 var(--serif); text-decoration: none; }
.drawer__nav a:hover { color: var(--kam); }
.lang--drawer { flex-wrap: wrap; gap: 4px; }
.lang--drawer button { min-width: 56px; height: 44px; border: 1px solid var(--line); }
.drawer__act { display: grid; gap: 10px; }
.drawer__maps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer__maps .btn { padding: 0 10px; }
.drawer__addr { font: 500 14px/1.6 var(--sans); color: var(--ink2); }

/* ── 구역 머리 ── */
.sec { padding: 104px 0; position: relative; }
/* 첫 화면 밖 구역은 가까이 올 때 조판(첫 렌더 레이아웃 줄이기) — auto 는 한 번 그린 크기를 기억 */
.sec, .strip { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.sh { margin-bottom: 48px; max-width: 780px; }
.sh__t { font-weight: 400; line-height: 1; }
.sh__t .hand { display: block; font-size: 76px; line-height: 1.05; color: var(--ink); }
html:not([lang="ko"]) .sh__t .hand { font-size: 44px; line-height: 1.2; }
.sh__ln { display: block; width: 120px; height: 10px; margin-top: 12px; overflow: visible; }
.sh__ln path { fill: none; stroke: var(--kam); stroke-width: 3; stroke-linecap: round; }
.sh__d { margin-top: 18px; font-size: 18px; line-height: 1.8; color: var(--ink2); max-width: 40em; }

/* ── 액자(종이 매트 + 먹선 테) — 사진은 작게, 확대 없음 ── */
.frame { position: relative; background: var(--mat); padding: 14px; box-shadow: 0 0 0 1px rgba(42, 37, 33, .1), 0 22px 44px -28px rgba(42, 37, 33, .55); }
.frame::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(42, 37, 33, .45); pointer-events: none; }
.frame img { width: 100%; transition: filter .4s var(--ease); }
.frame:hover img { filter: brightness(1.05) saturate(1.04); }

/* ── 1. 첫 화면: 왼쪽 붓 제목 · 오른쪽 차려진 한 상 액자(900px 원본 → 580px 이하) · 아래 넓은 사전 예약제 쪽지 ── */
.hero { padding: 32px 0 64px; overflow-x: clip; }
.hero__in { --hf: 608px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(var(--hf), var(--hfw, 608px)); column-gap: 120px; row-gap: 36px; align-items: center; padding-right: calc(var(--gut) + 40px); }
.hero__copy { grid-column: 1; grid-row: 1; }
.seal { display: inline-flex; align-items: center; padding: 8px 16px; color: var(--kam); font: 700 14px/1.3 var(--sans); border: 1.5px solid var(--kam); border-radius: 3px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(163, 68, 27, .55); background: var(--paper); }
.hero__h1 { margin-top: 22px; font-weight: 400; }
.hero__pre { display: block; font: 700 22px/1.4 var(--serif); color: var(--ink2); letter-spacing: .01em; }
.hero__pre .nm { color: var(--ink); }
.hero__hand { --h1: 128px; --h1s: 34px; display: block; margin-top: 8px; }
.hero__hand .hand { display: block; font-size: var(--h1); line-height: .94; color: var(--ink); }
/* 외국어: 한글 붓 제목을 같은 크기로 위에, 번역은 바탕체 부제(손글씨 콘셉트를 모든 언어에서) */
html:not([lang="ko"]) .hero__hand { display: flex; flex-direction: column; }
html:not([lang="ko"]) .hero__hand .hero__ko { order: -1; margin: 0; font-size: var(--h1); line-height: .94; color: var(--ink); }
html:not([lang="ko"]) .hero__hand .hand:not([lang="ko"]) { margin-top: 16px; font: 700 var(--h1s)/1.25 var(--serif); letter-spacing: -.005em; }
.hero__lead { margin-top: 22px; font-size: 19px; line-height: 1.85; color: var(--ink2); max-width: 30em; text-wrap: pretty; }
.hero__fig { grid-column: 2; grid-row: 1; position: relative; width: 100%; }
.hero__ph { position: relative; container-type: inline-size; }
.frame--hero img { aspect-ratio: 900 / 674; object-fit: cover; }
.hero__branch { position: absolute; grid-column: 2 / 3; grid-row: 1 / 2; top: -14px; right: calc(100% + 10px); width: 220px; height: auto; z-index: 1; pointer-events: none; overflow: visible; }
/* 사진 옆 손글씨 메모(소금구이·양념구이 — 사진 속 두 가지를 가리킴). 외국어는 붓 한글 + 작은 번역 */
.note { position: absolute; display: flex; align-items: center; gap: 4px; white-space: nowrap; pointer-events: none; z-index: 2; }
.note__l { display: flex; flex-direction: column; align-items: flex-end; }
.note .hand { font-size: 34px; line-height: 1; color: var(--ink); }
.note__tr { font: 600 13px/1.3 var(--sans); color: var(--ink2); margin-top: 2px; }
.note__tr:empty { display: none; }
.note__ar { height: 22px; overflow: visible; filter: drop-shadow(0 0 1px rgba(251, 247, 239, .95)) drop-shadow(0 0 2px rgba(251, 247, 239, .7)); }
.note path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.note--a { top: 27%; right: 58%; }   /* 끝 = 소금구이(흰 줄) 왼쪽 끝 */
.note--a .note__ar { width: calc(42cqw + 4px); }
.note--b { top: 47%; right: 66%; }   /* 끝 = 양념구이(붉은 줄) 왼쪽 끝 */
.note--b .note__ar { width: calc(34cqw + 4px); }
.note--b .hand { color: var(--kam); }
.hero__cap { margin-top: 14px; text-align: center; font: 600 14px/1.5 var(--sans); color: var(--ink2); }
.resv { grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; background: var(--mat); padding: 22px 28px 22px 34px; box-shadow: 0 0 0 1px rgba(42, 37, 33, .1), 0 18px 36px -26px rgba(42, 37, 33, .55); }
.resv::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kam); }
.resv__txt { flex: 1 1 420px; min-width: 0; }
.resv__t { font-size: 40px; line-height: 1; color: var(--kam); }
.resv__t .kd { font-size: 30px; margin-bottom: 4px; }
html:not([lang="ko"]) .resv__t { font-size: 26px; line-height: 1.25; }
.resv__d { margin-top: 10px; font-size: 16.5px; line-height: 1.75; }
.resv__d b { color: var(--kam); font-weight: 700; }
.resv__act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.resv__maps { display: flex; gap: 10px; flex-wrap: wrap; }
.resv__maps .btn { min-height: 56px; padding: 0 18px; }

/* 감나무 선 그림 — 감은 단색, 광택 없음 */
.tg { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tg--s { stroke-width: 1.4; }
.lf { fill: rgba(94, 91, 60, .16); stroke: var(--leaf); stroke-width: 1.4; }
.vn { fill: none; stroke: var(--leaf); stroke-width: 1; }
.pm { fill: var(--kam-l); stroke: var(--kam); stroke-width: 1.2; }
.cx { fill: var(--leaf); stroke: var(--leaf); stroke-width: .8; stroke-linejoin: round; }

/* ── 2. 차림표 ── */
.menu__grid { display: grid; gap: 40px; }
.board { display: grid; grid-template-columns: 378px minmax(0, 600px); justify-content: center; gap: 80px; align-items: center; background: rgba(251, 247, 239, .55); padding: 40px; border: 1px solid var(--line); }
.board--lunch { grid-template-columns: minmax(0, 600px) 378px; }
.board--lunch .board__fig { order: 2; }
.board__h { font-weight: 400; line-height: 1; }
.board__h .hand { font-size: 60px; line-height: 1.05; color: var(--ink); }
html:not([lang="ko"]) .board__h .hand { font-size: 34px; line-height: 1.25; }
html:not([lang="ko"]) .board__h .tw--b { margin-top: 8px; font-size: 40px; }
.board__d { margin-top: 14px; font-size: 17px; line-height: 1.8; color: var(--ink2); }
.mtab { width: 100%; margin-top: 22px; border-top: 2px solid var(--ink); }
.mtab th, .mtab td { padding: 18px 0; border-bottom: 1px dashed rgba(42, 37, 33, .35); vertical-align: top; }
.mtab th { text-align: left; font-weight: 400; padding-right: 20px; }
.mtab .mr > * { padding-bottom: 0; border-bottom: 0; }
.mtab .mdr td { padding-top: 0; }
.mn { font: 700 22px/1.4 var(--serif); }
html:not([lang="ko"]) .mtab .tw { font-size: 14px; }
.md { display: block; margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
.md__when { display: block; margin-top: 2px; font: 700 14px/1.5 var(--sans); color: var(--kam); }
.md--ko { color: var(--ink2); }
.pr { text-align: right; white-space: nowrap; }
.won { font: 700 22px/1.4 var(--serif); color: var(--kam); font-variant-numeric: lining-nums tabular-nums; }
.board__note { margin-top: 14px; font: 600 14px/1.5 var(--sans); color: var(--ink2); }
.vary::before { content: '※ '; }
.menu__foot { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; align-items: flex-start; }
.menu__fn { font: 500 14px/1.6 var(--sans); color: var(--ink2); }
.mention { min-width: 0; }
.mention__t { font: 700 15px/1.5 var(--sans); color: var(--ink); }
.mention__t small { display: block; font-weight: 500; font-size: 13px; color: var(--ink2); }
.mention__l { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.mention__l li { display: inline-flex; align-items: baseline; gap: 6px; font-size: 17px; }
.mention__l b { font: 700 15px/1 var(--sans); color: var(--kam); }
html:not([lang="ko"]) .mention__l .tw { font-size: 12.5px; margin-left: 2px; }

/* 먹색 띠 위 가장자리: 가는 처마 선 한 줄 아래로 안쪽 고리가 있는 작은 막새 원(지름 20px)을 성기게 — 바로 위 구역 안쪽 아래에 그림(넘침 없이) */
.menu::after, .loc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; pointer-events: none;
  background:
    linear-gradient(rgba(38, 33, 29, .75), rgba(38, 33, 29, .75)) 0 6px / 100% 1.5px no-repeat,
    radial-gradient(circle at 50% 20.5px, var(--night) 0 2.5px, transparent 3px 5px, var(--night) 5.5px 9.5px, transparent 10px) 50% 0 / 52px 30px repeat-x; }
/* ── 3. 한 점 사진 띠(먹색): 왼쪽 글(세로 가운데) · 오른쪽 큰 가로 1장(gumi-08) + 작은 세로 1장 + 작은 가로 1장 ── */
.strip { background: var(--night); color: var(--cream); padding: 96px 0; }
.strip__in { display: grid; grid-template-columns: minmax(0, 420px) auto; justify-content: center; gap: 40px 120px; align-items: center; }
.strip__t { font-size: 58px; line-height: 1.05; color: var(--cream); }
.strip__t .kd { color: #E39A6E; }
html:not([lang="ko"]) .strip__t { font-size: 34px; line-height: 1.25; }
.strip__d { margin-top: 20px; font-size: 17px; line-height: 1.85; color: var(--cream2); max-width: 24em; }
/* 539px 원본 → 2× 화면 1.3배 이하: 큰 칸 350 · 세로 210 · 작은 가로 260 */
.st { display: grid; grid-template-columns: 350px 210px; gap: 22px 24px; align-items: start; }
.st__it--a { grid-column: 1; grid-row: 1; }
.st__it--b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.st__it--c { grid-column: 1; grid-row: 2; width: 260px; justify-self: end; }
.st .frame { padding: 10px; background: #F8F2E6; }
.st .frame::after { inset: 10px; }
.st figcaption { margin-top: 10px; font: 600 14px/1.5 var(--sans); color: var(--cream2); }

/* ── 4. 한 상 차림: «반찬이 잘 나와요» 19표가 주인공 + 반찬 4장(같은 3:2 칸) ── */
.table__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px 72px; align-items: center; }
.kwbig__q { font-size: 72px; line-height: 1.08; color: var(--ink); }
.kwbig__q .hand::before { content: '“'; color: var(--kam); }
.kwbig__q .hand::after { content: '”'; color: var(--kam); }
html:not([lang="ko"]) .kwbig__q .hand { font-size: 44px; line-height: 1.2; }
.kwbig__n { margin-top: 22px; display: flex; align-items: baseline; gap: 6px; color: var(--kam); }
.kwbig__n b { font: 700 64px/1 var(--serif); font-variant-numeric: lining-nums; }
.kwbig__u { font: 700 22px/1 var(--serif); }
.kwbig__src { margin-top: 12px; font: 600 14px/1.6 var(--sans); color: var(--ink2); }
.sides { display: grid; grid-template-columns: repeat(2, 330px); gap: 16px; }
.sd .frame { padding: 8px; }
.sd .frame::after { inset: 8px; }
.sd img { aspect-ratio: 3 / 2; object-fit: cover; }
.sd--12 img { object-position: 50% 82%; }
.sd--16 img { object-position: 50% 62%; }

/* ── 5. 감나무가 있는 집: 글 + 감나무 선 그림(사진 없음), 아래 사실 3단 ── */
.house { background: rgba(234, 223, 203, .6); overflow-x: clip; }
.house__in { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px 72px; align-items: end; }
.house__lead { font-size: 20px; line-height: 1.9; }
.house__name { margin-top: 14px; font: 600 15px/1.6 var(--sans); color: var(--ink2); }
.house__branch { width: 360px; height: auto; overflow: visible; justify-self: end; margin-bottom: 8px; }
.js .house__branch .tg { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.js .house__branch.is-in .tg { stroke-dashoffset: 0; }
.facts { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.facts > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 26px 0; }
.facts__no { font: 700 24px/1.3 var(--serif); color: var(--kam); }
.facts h3 { font: 700 20px/1.45 var(--serif); }
.facts p { margin-top: 6px; font-size: 16px; line-height: 1.75; color: var(--ink2); }
.seat { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.seat li { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; background: var(--mat); border: 1px solid var(--line); font: 500 14px/1.4 var(--sans); }
.seat__k { font-weight: 700; color: var(--kam); }

/* ── 6. 손님 리뷰 ── */
.kwl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; border-top: 1px solid var(--ink); }
.kwl__it { display: grid; grid-template-columns: minmax(0, 1fr) 150px 64px; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.kwl__k { font: 700 18px/1.45 var(--serif); }
html:not([lang="ko"]) .kwl__k .tw { font-size: 12.5px; }
.kwl__bar { height: 8px; background: var(--paper2); border-radius: 4px; overflow: hidden; }
.kwl__bar i { display: block; height: 100%; width: 100%; background: var(--kam); transform-origin: left; transform: scaleX(var(--v)); border-radius: 4px; }
.kwl__n { text-align: right; font: 700 15px/1.2 var(--sans); color: var(--kam); white-space: nowrap; }
.kwl__it:nth-child(-n+5) .kwl__k { color: var(--ink); }

/* ── 7. 이용 안내 ── */
.info { background: rgba(234, 223, 203, .6); }
.info__grid { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 56px; align-items: start; }
.hours { background: var(--mat); padding: 32px 32px 34px; box-shadow: 0 0 0 1px rgba(42, 37, 33, .1), 0 22px 44px -30px rgba(42, 37, 33, .55); }
.hours__h { display: flex; align-items: center; gap: 10px; font: 700 22px/1.4 var(--serif); color: var(--ink); }
.hours__h .ic { color: var(--kam); }
.hr { width: 100%; margin-top: 18px; border-top: 2px solid var(--ink); }
.hr th, .hr td { padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hr th { width: 34%; font: 700 16px/1.5 var(--sans); color: var(--ink2); padding-right: 12px; }
.hr__tm { display: block; font: 700 21px/1.4 var(--serif); white-space: nowrap; }
.hr__br { display: block; margin-top: 2px; font: 500 14px/1.5 var(--sans); color: var(--ink2); }
.hr__off { font: 700 17px/1.5 var(--serif); color: var(--kam); }
.hours__lunch { margin-top: 16px; font: 500 14.5px/1.6 var(--sans); color: var(--ink2); }
.hours__call { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; margin-top: 10px; padding: 6px 0; font: 700 15px/1.5 var(--sans); color: var(--kam); text-decoration: underline; text-decoration-color: rgba(163, 68, 27, .45); text-underline-offset: 4px; }
.hours__call:hover { text-decoration-color: currentColor; }
.hours__num { white-space: nowrap; color: var(--ink); }
.am { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.am li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.am .ic { grid-row: span 2; color: var(--kam); margin-top: 3px; }
.am__k { font: 700 14px/1.5 var(--sans); color: var(--ink2); }
.am__v { font: 700 17px/1.6 var(--serif); }

/* ── 8. 오시는 길: 집 바깥 넓은 띠(매트 없음, 쪽에서 가장 큰 사진) + 오른쪽 아래 모서리에 걸친 종이 쪽지 ── */
.loc__in { display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: start; }
.loc__band { grid-column: 1 / -1; grid-row: 1; width: min(1000px, 100%); }
.loc__band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 30px 60px -40px rgba(42, 37, 33, .7); }
.loc__band figcaption { margin-top: 14px; font: 600 14px/1.5 var(--sans); color: var(--ink2); }
.loc__card { grid-column: 2; grid-row: 2; position: relative; z-index: 1; margin-top: -168px; background: var(--mat); padding: 40px 44px 44px; box-shadow: 0 0 0 1px rgba(42, 37, 33, .1), 0 24px 48px -28px rgba(42, 37, 33, .6); }
.loc__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kam); }
.loc .sh { margin-bottom: 24px; }
.loc__addr { display: flex; flex-direction: column; gap: 6px; }
.loc__ko { font: 700 23px/1.5 var(--serif); }
.drawer__addr .fx { display: block; margin-top: 2px; }
.loc__tr { font: 500 15px/1.6 var(--sans); color: var(--ink2); }
.loc__act { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.yt { grid-column: 1; grid-row: 2; margin-top: 56px; max-width: 520px; }
.yt__box { position: relative; }
.yt__box.is-on { aspect-ratio: 16 / 9; background: var(--night); }
.yt__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt__play { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 12px 20px 12px 14px; border: 1px solid rgba(42, 37, 33, .22); border-radius: 3px; background: var(--mat); cursor: pointer; text-align: left; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.yt__play:hover { border-color: var(--ink); background: #fff; }
.yt__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--kam); color: #fff; transition: transform .3s var(--ease); }
.yt__ic .ic { width: 20px; height: 20px; margin-left: 3px; }
.yt__play:hover .yt__ic { transform: scale(1.06); }
.yt__tt { flex: 1 1 auto; min-width: 0; font: 700 18px/1.35 var(--serif); color: var(--ink); }
.yt__tt small { display: block; margin-top: 2px; font: 500 13px/1.5 var(--sans); color: var(--ink2); }
.yt__go { flex: none; font: 700 14px/1.3 var(--sans); color: var(--kam); white-space: nowrap; }
.yt__go::after { content: ' →'; }
.yt__note { margin-top: 10px; font: 500 13px/1.6 var(--sans); color: var(--ink2); }

/* ── 맨 아래 ── */
.ft { background: var(--night); color: var(--cream); padding: 80px 0 36px; }
.ft__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px 56px; align-items: start; }
.ft__nm { font-size: 64px; line-height: 1; }
.ft__label { margin-top: 10px; font: 600 15px/1.6 var(--sans); color: var(--cream2); }
.ft__info { display: grid; gap: 6px; font: 500 15px/1.7 var(--sans); color: var(--cream2); }
.ft__info a { color: var(--cream); font-weight: 700; display: inline-block; padding: 10px 0; margin: -10px 0; }
.ft__addr .fx { display: block; }
.ft__hr span span { display: block; }
.ft__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.ft__bot { position: relative; margin-top: 48px; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ft__bot::before { content: ''; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid rgba(243, 235, 221, .18); }
.ft__src { font: 500 13px/1.6 var(--sans); color: var(--cream2); }
.ft__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(243, 235, 221, .3); border-radius: 999px; background: none; color: var(--cream); font: 600 13px/1 var(--sans); cursor: pointer; }
.ft :focus-visible, .strip :focus-visible { outline-color: var(--cream); }

/* 모바일 아래 띠(전화·지도만 — 상담 바 아님) */
.mbar { display: none; }

/* ── 움직임: 줄임 설정·자동화 브라우저(html.still)는 끔 ── */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .kwl__bar i { transform: scaleX(0); transition: transform 1.1s var(--ease) .15s; }
.js .kwl.is-in .kwl__bar i { transform: scaleX(var(--v)); }
.js .sh__ln path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) .2s; }
.js .sh.is-in .sh__ln path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.still) .hero__hand .hand { animation: brush 1s var(--ease) .1s both; }
  html.js:not(.still) .hero__branch .tg { stroke-dasharray: 1; animation: draw 1.8s var(--ease) .3s both; }
  html.js:not(.still) .hero__branch g { animation: fade .8s var(--ease) 1.2s both; }
  html.js:not(.still) .frame--hero { animation: rise .9s var(--ease) both; }
}
@keyframes brush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
html.still .rv, html.still .kwl__bar i, html.still .sh__ln path { transition: none !important; }
html.still .rv { opacity: 1; transform: none; }
html.still .kwl__bar i { transform: scaleX(var(--v)); }
html.still .sh__ln path, html.still .house__branch .tg { stroke-dashoffset: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .kwl__bar i { transform: scaleX(var(--v)); transition: none; }
  .js .sh__ln path, .js .house__branch .tg { stroke-dashoffset: 0; transition: none; }
  .btn, .frame img, .gnb__a::after { transition: none; }
}

/* ── 반응형 ── */
/* 노트북 높이: 첫 화면 액자를 줄여(축소만) 사전 예약제 쪽지·단추가 첫 화면에 들어오게 */
@media (min-width: 900px) and (max-height: 820px) {
  html .hero { padding-top: 20px; }
  html .hero__in { --hf: 520px; row-gap: 28px; }
  html .hero__h1 { margin-top: 16px; }
  html .hero__hand { --h1: 104px; --h1s: 28px; }
  html .hero__branch { top: -2px; }
  html:not([lang="ko"]) .hero__hand { --h1: 86px; }
  html:not([lang="ko"]) .resv__t .kd { display: none; }
  html .hero__lead { font-size: 17px; line-height: 1.75; margin-top: 16px; }
  html .resv { padding-top: 16px; padding-bottom: 16px; }
  html .resv__t { font-size: 34px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  html .hero { padding-top: 12px; padding-bottom: 48px; }
  html .hero__in { --hf: 440px; row-gap: 22px; }
  html .hero__h1 { margin-top: 12px; }
  html .hero__hand { --h1: 86px; --h1s: 24px; }
  html .hero__branch { top: 6px; width: 170px; }
  html:not([lang="ko"]) .hero__hand { --h1: 76px; }
  html .hero__lead { font-size: 16px; line-height: 1.65; margin-top: 12px; }
  html .resv { padding-top: 12px; padding-bottom: 12px; }
  html .resv__t { font-size: 30px; }
  html:not([lang="ko"]) .resv__t { font-size: 22px; }
  html .resv__t .kd { display: none; }
}
@media (max-width: 1279px) {
  .gnb ul { gap: 20px; }
  .gnb__a { font-size: 15px; }
  .hd__in { gap: 20px; }
  .hd__num { display: none; }
  .hd__tel { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .hero__in { --hfw: 500px; column-gap: 64px; padding-right: calc(var(--gut) + 24px); }
  .note { display: none; }
  .hero__hand { --h1: 116px; }
  .hero__branch { width: 176px; }
  .house__in { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 56px; }
  .house__branch { width: 320px; }
  .table__grid { gap: 40px 48px; }
}
/* 좁은 데스크톱: 제목 칸이 좁아 가지를 줄이고 배지를 조금 작게(외국어 배지가 길다) */
@media (min-width: 900px) and (max-width: 1150px) {
  .hero__branch { width: 120px; }
  .seal { font-size: 13px; padding: 7px 12px; }
}
@media (max-width: 1100px) {
  .strip__in { grid-template-columns: minmax(0, 1fr); }
  .table__grid { grid-template-columns: minmax(0, 1fr); }
  .loc__in { grid-template-columns: minmax(0, 1fr); }
  .loc__band { display: flex; flex-direction: column-reverse; }
  .loc__band figcaption { margin: 0 0 12px; }
  .loc__card { grid-column: 1; grid-row: 2; justify-self: end; width: min(100% - 32px, 520px); margin-top: -64px; }
  .yt { grid-row: 3; margin-top: 40px; }
}
@media (max-width: 1023px) {
  .gnb { display: none; }
  .hd__burger { display: inline-flex; }
  .hero__in { --hfw: 400px; column-gap: 40px; padding-right: var(--gut); }
  .hero__branch { width: 150px; }
  .hero__hand { --h1: 100px; --h1s: 28px; }
  .board, .board--lunch { grid-template-columns: 330px minmax(0, 1fr); gap: 36px; padding: 28px; }
  .board--lunch .board__fig { order: 0; }
  .house__in { grid-template-columns: minmax(0, 1fr) 240px; }
  .house__branch { width: 240px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > li + li { border-top: 1px solid var(--line); }
  .info__grid { grid-template-columns: minmax(0, 1fr); }
  .hours { max-width: 560px; }
  .kwl { grid-template-columns: minmax(0, 1fr); }
  .ft__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  :root { --hd: 64px; }
  .sec { padding: 80px 0; }
  .hero { padding: 28px 0 64px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; }
  .hero__copy { display: contents; }
  .seal { order: 1; justify-self: start; }
  .hero__h1 { order: 2; margin-top: 20px; }
  .hero__fig { order: 3; grid-column: auto; grid-row: auto; justify-self: center; width: min(100%, 370px); margin-top: 26px; }
  .resv { order: 4; grid-column: auto; grid-row: auto; margin-top: 30px; }
  .hero__lead { order: 5; }
  .hero__branch { grid-column: 1 / 2; grid-row: 2 / 3; top: 58px; right: -6px; width: 150px; }
  .frame--hero img { aspect-ratio: 560 / 350; }
  .hero__cap { margin-top: 10px; }
  .board, .board--lunch { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .board__fig { justify-self: center; width: min(100%, 378px); }

  .mbar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: 60px; background: var(--night); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5); padding-bottom: env(safe-area-inset-bottom); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; text-decoration: none; font: 700 13.5px/1.2 var(--sans); color: var(--cream); min-width: 0; text-align: center; white-space: nowrap; }
  .mbar .ic { width: 18px; height: 18px; }
  .mbar__call { background: var(--kam); color: #fff !important; }
  .mbar__call .btn__t { white-space: normal; }
  .mbar__map + .mbar__map { border-left: 1px solid rgba(243, 235, 221, .16); }
  .mbar :focus-visible { outline-color: var(--cream); outline-offset: -4px; }
  body { padding-bottom: 60px; }
}
@media (max-width: 760px) {
  /* 한 점 띠: 큰 칸은 한 줄 전체(350 이하), 작은 둘은 같은 4:5 칸 */
  .st { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; max-width: 350px; }
  .st__it--a { grid-column: 1 / -1; }
  .st__it--b { grid-column: 1; grid-row: 2; align-self: start; }
  .st__it--c { grid-column: 2; grid-row: 2; width: auto; justify-self: stretch; }
  .st__it--b img, .st__it--c img { aspect-ratio: 4 / 5; object-fit: cover; }
  .st__it--c img { object-position: 58% 50%; }
}
@media (max-width: 599px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .brand__nm { font-size: 32px; }
  .brand__sub { font-size: 11.5px; }
  .hd__tools { gap: 2px; }
  .hd__tel { display: none; }
  .lang--hd button { min-width: 40px; padding: 0 4px; font-size: 12.5px; }
  .sec { padding: 64px 0; }
  .sh { margin-bottom: 32px; }
  .sh__t .hand { font-size: 52px; }
  html:not([lang="ko"]) .sh__t .hand { font-size: 30px; }
  .kd { font-size: 34px; }
  .sh__d { font-size: 16px; }
  .seal { font-size: 13px; padding: 7px 12px; }
  .hero__pre { font-size: 18px; }
  .hero { padding-bottom: 32px; }
  .hero__hand { --h1: 78px; --h1s: 22px; }
  html:not([lang="ko"]) .hero__hand .hand:not([lang="ko"]) { margin-top: 10px; }
  .hero__lead { font-size: 16.5px; margin-top: 22px; }
  .frame { padding: 10px; }
  .frame::after { inset: 10px; }
  .resv { padding: 20px 18px 22px 22px; }
  .resv__t { font-size: 38px; }
  .resv__t .kd { font-size: 26px; }
  .resv__act { width: 100%; }
  .resv__act .btn--big { width: 100%; }
  .resv__maps { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .resv__maps .btn { padding: 0 10px; }
  .board { padding: 20px 16px 24px; }
  .board__h .hand { font-size: 46px; }
  html:not([lang="ko"]) .board__h .tw--b { font-size: 32px; }
  .mn, .won { font-size: 19px; }
  .menu__foot { flex-direction: column; }
  .strip { padding: 64px 0; }
  .strip__t { font-size: 44px; }
  .strip__d { font-size: 16px; }
  .st .frame { padding: 6px; }
  .st .frame::after { inset: 6px; }
  .st figcaption { font-size: 13px; }
  .kwbig__q { font-size: 52px; }
  html:not([lang="ko"]) .kwbig__q .hand { font-size: 30px; }
  .kwbig__n { margin-top: 14px; }
  .kwbig__n b { font-size: 48px; }
  .sides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sd .frame { padding: 5px; }
  .sd .frame::after { inset: 5px; }
  .house__lead { font-size: 17.5px; }
  .house__in { grid-template-columns: minmax(0, 1fr); }
  .house__branch { width: 230px; margin: 0; }
  .facts > li { grid-template-columns: 40px minmax(0, 1fr); }
  .kwl__it { grid-template-columns: minmax(0, 1fr) 72px 54px; gap: 10px; }
  .kwl__k { font-size: 16px; }
  .hours { padding: 24px 20px 26px; }
  .am { grid-template-columns: minmax(0, 1fr); }
  .loc__ko { font-size: 21px; }
  .loc__act .btn { flex: 1 1 auto; }
  .loc__card { width: calc(100% - 16px); margin-top: -40px; padding: 28px 22px 30px; }
  .yt__play { gap: 12px; padding: 10px 14px 10px 10px; }
  .ft__nm { font-size: 52px; }
  .ft__bot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 430px) {
  .brand__sub { display: none; }
}
/* 낮은 휴대폰(375×667·360×640 등): 사전 예약제 제목이 첫 화면에 들어오게 — 사진은 같은 파일을 더 얕게 자름(확대 없음) */
@media (max-width: 899px) and (max-height: 760px) {
  html .hero { padding-top: 14px; }
  html .seal { padding: 6px 12px; }
  html .hero__h1 { margin-top: 12px; }
  html .hero__pre { font-size: 16px; }
  html .hero__hand { --h1: 60px; --h1s: 19px; }
  html:not([lang="ko"]) .hero__hand .hand:not([lang="ko"]) { margin-top: 6px; }
  html .hero__fig { margin-top: 16px; }
  html .frame--hero img { aspect-ratio: 560 / 272; object-position: 50% 55%; }
  html .hero__branch { width: 120px; top: 44px; }
  html .hero__cap { display: none; }
  html .resv { margin-top: 18px; padding-top: 16px; }
  html .resv__t { font-size: 34px; }
  html .resv__t .kd { display: none; }
}
@media (max-width: 370px) {
  .hd__tools { gap: 0; }
  .lang--hd button { min-width: 40px; padding: 0 2px; }
  .brand__sub { display: none; }
  .hero__hand { --h1: 70px; }
}