/* =========================================================
   원조꼬리곰집 스타일
   색상은 아래 :root 변수만 바꾸면 전체에 반영됩니다.
   ========================================================= */
:root {
  --bg: #fbf8f3;          /* 따뜻한 흰색 바탕 */
  --bg-alt: #f3eee6;      /* 구역 구분용 바탕 */
  --text: #1f1b17;        /* 본문 글자 */
  --muted: #5e564e;       /* 보조 글자 */
  --line: #ddd4c7;        /* 구분선 */
  --accent: #9e2a22;      /* 포인트(로고의 붉은색) — 적게 사용 */
  --todo: #fff1a8;        /* 초안의 확인 필요 표시 */
  --radius: 10px;
  --wrap: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  word-break: keep-all;
  padding-bottom: 64px; /* 모바일 하단 버튼 공간 */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; margin-top: 2.2em; }
h4 { font-size: 1.15rem; margin: 0; }
address { font-style: normal; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 초안 표시 (게시용에서는 HTML에서 삭제) */
.draft-banner { background: #2b2620; color: #fff; text-align: center; padding: 8px 16px; font-size: .9rem; }
.todo-inline { background: var(--todo); color: #4a3b00; padding: 1px 6px; border-radius: 4px; font-size: .85em; }
p.todo-inline { display: inline-block; margin-top: .3em; }

/* 머리글 */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.brand img { width: 150px; mix-blend-mode: multiply; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
.site-nav a { display: block; padding: 8px 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1rem; white-space: nowrap; border-radius: 6px; }
.site-nav a:hover, .site-nav a:focus-visible { background: var(--bg-alt); }

/* 첫 화면 */
.hero { padding: 48px 0 56px; }
.hero-inner { display: grid; gap: 32px; grid-template-columns: 1.1fr 1fr; align-items: center; }
.eyebrow { color: var(--accent); font-weight: 700; margin: 0 0 .3em; }
h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); letter-spacing: -0.02em; }
.lead { font-size: 1.2rem; color: var(--muted); margin-top: 0; }
.quick-facts { list-style: none; padding: 0; margin: 20px 0 28px; border-top: 1px solid var(--line); }
.quick-facts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.quick-facts span { display: inline-block; width: 3.5em; color: var(--muted); font-weight: 700; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; padding: 12px 20px; min-height: 48px; border: 1.5px solid var(--text); border-radius: var(--radius); color: var(--text); background: transparent; text-decoration: none; font-weight: 700; }
.btn:hover, .btn:focus-visible { background: var(--bg-alt); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: #85221b; }

/* 사진 자리 (실사진 예정) */
.photo-slot { margin: 0; }
.placeholder { aspect-ratio: 4 / 3; border: 2px dashed #b9ad9c; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #f1ebe2, #f1ebe2 12px, #ece5da 12px, #ece5da 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 16px; }
.placeholder.small { aspect-ratio: 1 / 1; }
.ph-label { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.ph-note { font-size: .9rem; }
.hero-photo img { border-radius: var(--radius); }

/* 구역 */
.section { padding: 64px 0; }
.section-alt { background: var(--bg-alt); }
.meta { color: var(--muted); font-size: .95rem; }
.note { color: var(--muted); }

/* 메뉴 표 */
.table-wrap { overflow-x: auto; max-width: 760px; }
.menu-table { width: 100%; border-collapse: collapse; font-size: 1.1rem; background: #fff; border-radius: var(--radius); }
.menu-table th, .menu-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: right; }
.menu-table thead th { font-size: .95rem; color: var(--muted); background: var(--bg-alt); }
.menu-table th[scope="row"], .menu-table thead th:first-child { text-align: left; font-weight: 700; }
.menu-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-table small { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }

.menu-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.menu-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.item-head b, .price b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.desc { margin: 2px 0 0; color: var(--muted); }
.price { margin: 4px 0 0; }

.guide { padding-left: 1.2em; }
.guide li { margin-bottom: .6em; }
.menu-images { margin-top: 2em; color: var(--muted); }

/* 역사 */
.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--accent); }
.timeline li { padding: 0 0 20px 20px; }
.timeline p { margin: 0; }
.timeline .year { font-weight: 800; font-size: 1.15rem; }
.source { font-size: .95rem; }
.history-photos { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.history-photos figure { margin: 0; }
.history-photos img { border-radius: var(--radius); aspect-ratio: 1 / 1; object-fit: cover; }
figcaption { font-size: .9rem; color: var(--muted); margin-top: 6px; }

/* 방문 안내 */
.info { margin: 0; border-top: 1px solid var(--line); }
.info > div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info dt { font-weight: 700; color: var(--muted); }
.info dd { margin: 0; }
.map-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* FAQ */
details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; margin-bottom: 12px; }
summary { cursor: pointer; font-weight: 700; padding: 16px 0; font-size: 1.1rem; }
details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
details p { margin: 0 0 14px; }

/* 하단 */
.site-footer { background: #2b2620; color: #efe9e1; padding: 40px 0 48px; font-size: .95rem; }
.site-footer a { color: #fff; }
.site-footer p, .site-footer address { margin: 0 0 6px; }
.footer-name { font-weight: 800; font-size: 1.1rem; }
.footer-name span { font-weight: 400; font-size: .9rem; opacity: .8; margin-left: 6px; }
.channels { list-style: none; padding: 0; margin: 12px 0; display: flex; gap: 16px; }
.updated { opacity: .8; }

/* 모바일 하단 고정 버튼 */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: none; background: var(--text); z-index: 20; }
.action-bar a { flex: 1; text-align: center; color: #fff; text-decoration: none; font-weight: 700; padding: 16px 0; }
.action-bar a:first-child { background: var(--accent); }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero { padding-top: 28px; }
  .hero-inner, .two-col { grid-template-columns: 1fr; }
  .site-header { position: static; }
  .menu-list { grid-template-columns: 1fr; }
  .info > div { grid-template-columns: 1fr; gap: 2px; }
  .action-bar { display: flex; }
  .brand img { width: 120px; }
  .header-inner { justify-content: center; }
  .menu-table th, .menu-table td { padding: 12px 10px; }
}
@media (min-width: 761px) { body { padding-bottom: 0; } }
@media print { .action-bar, .site-nav, .draft-banner { display: none; } }

/* ── 음식 사진 ── */
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.hero-photo figcaption { text-align: right; }
.tang-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 0 20px; }
.tang-photos figure { margin: 0; }
.tang-photos img, .menu-list .thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.tang-photos figcaption { font-weight: 700; color: var(--text); font-size: 1rem; }
.tang-photos figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; }
.menu-list .thumb { margin-bottom: 10px; }
.menu-list img[src*="satae"] { object-position: 60% 50%; }
@media (max-width: 760px) {
  .tang-photos { gap: 10px; }
}
/* 수육: 사진은 작은 썸네일로 왼쪽, 글자·가격이 중심 */
.menu-list li.has-photo { display: grid; grid-template-columns: 140px 1fr; column-gap: 16px; align-items: start; }
.menu-list li.has-photo .thumb { grid-row: 1 / span 3; margin: 0; aspect-ratio: 1 / 1; }
.menu-list li:not(.has-photo) { padding-left: 156px; }
@media (max-width: 760px) {
  .menu-list li.has-photo { grid-template-columns: 96px 1fr; column-gap: 12px; }
  .menu-list li:not(.has-photo) { padding-left: 108px; }
}

/* ── 외관 사진 ── */
.lead-history { font-size: 1.15rem; font-weight: 700; margin: 0 0 1.2em; }
.exterior-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.exterior-pair figure { margin: 0; }
.exterior-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.exterior-pair img[src*="exterior-now"] { object-position: 50% 78%; }
@media (max-width: 760px) {
  .exterior-pair { grid-template-columns: 1fr; }
}

/* ── 백년가게 자료 · 매장 모습 ── */
.history-photos figure.wide { grid-column: 1 / -1; }
.history-photos figure.wide img { aspect-ratio: 16 / 9; }
.history-photos img[src*="certificate"], .history-photos img[src*="logo-door"] { aspect-ratio: 3 / 4; }
.history-photos img[src*="certificate"] { object-fit: contain; background: #fff; }
.visit-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.visit-photos figure { margin: 0; }
.visit-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.visit-photos img[src*="exterior-now"] { object-position: 50% 78%; }
@media (max-width: 760px) {
  .visit-photos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .visit-photos figure:first-child { grid-column: 1 / -1; }
}
.history-photos figure.wide img.tm { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; }

/* ── 기와 띠 (시안 A, 먹색) — 장식용, 화면 맨 위 ── */
.giwa-band {
  height: 56px;
  background: var(--bg) url("../assets/giwa-band.svg") repeat-x left top;
  background-size: 36px 56px;
}
@media (max-width: 760px) {
  .giwa-band { height: 40px; background-size: 26px 40px; }
}
@media print { .giwa-band { display: none; } }

/* ── 밀키트 ── */
.mealkit { padding: 48px 0; border-top: 1px solid var(--line); }
.mealkit h2 { font-size: 1.5rem; }
.channels { flex-wrap: wrap; }
.site-nav { max-width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: space-between; gap: 0; }
  .site-nav a { padding: 8px 6px; font-size: .92rem; }
}
.site-nav ul { scrollbar-width: none; }
.site-nav ul::-webkit-scrollbar { display: none; }
@media (max-width: 380px) { .site-nav a { padding: 8px 4px; font-size: .84rem; } }

/* ── 언어 선택 ── */
.header-navs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; max-width: 100%; }
.lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; justify-content: flex-end; }
.lang-switch a { display: block; padding: 4px 8px; font-size: .85rem; color: var(--muted); text-decoration: none; border-radius: 6px; white-space: nowrap; }
.lang-switch a:hover, .lang-switch a:focus-visible { background: var(--bg-alt); color: var(--text); }
.lang-switch a[aria-current="true"] { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* 다른 언어 페이지에서 함께 보여 주는 한국어 메뉴 이름 */
.ko-name { font-weight: 400; color: var(--muted); font-size: .85em; margin-left: .3em; white-space: nowrap; }
.menu-table .ko-name { display: block; margin-left: 0; }
.h1-sub { margin: -.2em 0 .6em; color: var(--muted); font-weight: 600; }
.h1-sub span[lang="ko"] { color: var(--text); }
@media (max-width: 760px) {
  .header-navs { width: 100%; align-items: stretch; }
  .lang-switch ul { justify-content: center; }
  .lang-switch a { padding: 4px 6px; font-size: .8rem; }
}
.quick-facts span { width: auto; min-width: 3.5em; margin-right: .5em; }
.tang-photos figcaption .ko-name { display: inline; font-size: .85rem; }
/* keep-all은 한국어 전용: 일본어·중국어는 글자 단위 줄바꿈 */
html:not([lang="ko"]) body { word-break: normal; overflow-wrap: anywhere; line-break: strict; }
html:not([lang="ko"]) [lang="ko"] { word-break: keep-all; }

/* ── 검토 반영 (2026-10-11) ── */
/* 본문으로 바로가기: 키보드 초점을 받을 때만 보임 */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 0; }
main:focus { outline: none; }
/* 고정 머리글에 제목이 가려지지 않게 */
section[id], #top { scroll-margin-top: 120px; }
@media (max-width: 760px) { section[id], #top { scroll-margin-top: 12px; } }
/* 수육 대/소 가격: 데스크톱은 한 줄, 휴대폰은 크기마다 한 줄 */
.price .size { white-space: nowrap; }
.price .size + .size::before { content: " · "; color: var(--muted); }
@media (max-width: 760px) {
  .price .size { display: block; }
  .price .size + .size::before { content: none; }
}
/* 역사 소개·선정 이력·재건축 안내 */
.blurb { margin: 0 0 1.4em; }
.blurb p { margin: 0 0 .4em; }
.awards-title { margin-top: 1.6em; font-size: 1.15rem; }
.awards { padding-left: 1.2em; margin: 0; }
.awards li { margin-bottom: .3em; }
.rebuilt { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: .95rem; }

/* ── 고정 머리글 (2026-10-11): 기와 띠 + 로고·메뉴를 한 묶음으로 고정 ──
   .sticky-top 이 기와 띠와 머리글을 감쌉니다. 휴대폰에서도 고정하되 높이를 줄였습니다. */
:root { --sticky-h: 150px; }
.sticky-top { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.sticky-top .site-header { position: static; }
section[id], #top { scroll-margin-top: calc(var(--sticky-h) + 12px); }
@media (max-width: 760px) {
  :root { --sticky-h: 110px; }
  .sticky-top .giwa-band { height: 22px; background-size: 15px 22px; }
  .sticky-top .header-inner { padding-top: 4px; padding-bottom: 2px; gap: 2px 8px; justify-content: space-between; }
  .sticky-top .brand img { width: 92px; }
  .sticky-top .header-navs { display: contents; }
  .sticky-top .lang-switch { flex: 1; min-width: 0; }
  /* 언어 목록: 한 줄. 자리가 모자라면 왼쪽부터 보이고 옆으로 밀어 볼 수 있음 */
  .sticky-top .lang-switch { overflow-x: auto; scrollbar-width: none; }
  .sticky-top .lang-switch::-webkit-scrollbar { display: none; }
  .sticky-top .lang-switch ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin-left: auto; gap: 0; }
  .sticky-top .lang-switch a { padding: 4px 3px; font-size: .72rem; }
  .sticky-top .site-nav { order: 3; }
  .sticky-top .site-nav a { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 380px) {
  .sticky-top .brand img { width: 80px; }
  .sticky-top .lang-switch a { padding: 4px 2px; font-size: .7rem; }
}

/* ── 선정 이력 사진 카드 (2026-10-11): 목록 옆에 작은 카드 2장 ── */
.awards-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.award-cards { display: flex; gap: 8px; width: 270px; align-items: flex-start; }
.award-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.award-card.land { flex: 4 1 0; }   /* 4:3 사진 */
.award-card.port { flex: 2.25 1 0; } /* 3:4 사진 — 두 카드의 사진 높이가 같아지는 비율 */
.award-card a { display: block; }
.award-card img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius) - 2px); }
.award-card figcaption { font-size: .8rem; line-height: 1.35; margin-top: 6px; color: var(--muted); }
@media (max-width: 1000px) {
  .awards-block { grid-template-columns: 1fr; }
  .award-cards { width: 100%; max-width: 420px; }
}