/* ==========================================================================
   만만재 홈페이지 스타일
   규칙: 아래 7가지 색만 씁니다. 굵기는 400과 600만, 간격은 8px 배수,
   모서리 4px, 테두리 1px. 그림자와 그라디언트는 쓰지 않습니다.
   ========================================================================== */

:root {
  --color-bg: #F7F3EC;        /* 미색: 페이지 배경 */
  --color-card: #FFFFFF;      /* 카드, 버튼 바탕 */
  --color-ink: #2B2622;       /* 먹색: 제목, 본문 */
  --color-ink-sub: #6B625A;   /* 보조 텍스트: 설명, 안내 */
  --color-wood: #A0703F;      /* 원목: 선, 점, 테두리, 24px 이상 큰 글자에만 */
  --color-wood-dark: #6E4B2A; /* 진한 포인트: 기본 버튼, 링크, 작은 강조 글자 */
  --color-line: #E6DED2;      /* 구분선, 사진 자리 바탕 */

  --font-serif: 'Noto Serif KR', serif;
  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;

  --size-title: 28px;   /* 제목: 모바일 28 / 데스크톱 40 */
  --size-sub: 20px;     /* 소제목, 한 줄 소개, 메뉴 이름: 20 / 24 */
  --size-body: 16px;    /* 본문 */
  --size-small: 14px;   /* 작은 글, 라벨 */

  --space-section: 64px;  /* 섹션 위아래: 64 / 112 */
  --space-page: 24px;     /* 좌우 여백: 24 / 48 */
  --space-card: 24px;     /* 카드 안쪽: 24 / 32 */
  --radius: 4px;
  --max-width: 1280px;
}

/* 960px부터 데스크톱 */
@media (min-width: 960px) {
  :root {
    --size-title: 40px;
    --size-sub: 24px;
    --space-section: 112px;
    --space-page: 48px;
    --space-card: 32px;
  }
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.75;
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--color-wood-dark); text-underline-offset: 4px; }
a:hover { color: var(--color-ink); }
button { font: inherit; color: inherit; }
::selection { background: var(--color-line); color: var(--color-ink); }
:focus-visible { outline: 1px solid var(--color-wood-dark); outline-offset: 2px; }

@media (max-width: 959.98px) { .desktop-only { display: none !important; } }
@media (min-width: 960px) { .mobile-only { display: none !important; } }

/* ---------- 배치 ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-page);
  padding-right: var(--space-page);
}
.section-inner {
  border-top: 1px solid var(--color-line);
  padding: var(--space-section) 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.section-head, .stack-8 { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 글자 ---------- */
.h-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--size-title); line-height: 1.4; }
.h-sub { font-family: var(--font-serif); font-weight: 600; font-size: var(--size-sub); line-height: 1.5; }
.lead { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-sub); line-height: 1.5; text-wrap: balance; }
.numeral { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-title); line-height: 1.4; color: var(--color-wood); }
.eyebrow, .label { font-size: var(--size-small); font-weight: 600; color: var(--color-wood-dark); }
.muted { color: var(--color-ink-sub); }
.tel { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 카드, 사진 ---------- */
.card { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius); }
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--color-line); }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* ---------- 버튼: 높이 48px 한 가지 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.btn-primary { background: var(--color-wood-dark); border-color: var(--color-wood-dark); color: var(--color-card); }
.btn-primary:hover, .btn-primary:active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-card); }
.btn-secondary { background: var(--color-card); border-color: var(--color-wood); color: var(--color-wood-dark); }
.btn-secondary:hover, .btn-secondary:active { background: var(--color-bg); border-color: var(--color-wood-dark); color: var(--color-wood-dark); }
.btn-text {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-wood-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.btn-text:hover { color: var(--color-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row .grow { flex: 1 1 120px; }

/* ---------- 라벨 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--color-wood);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-wood-dark);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 1;
}
.badge-fill { background: var(--color-wood-dark); border-color: var(--color-wood-dark); color: var(--color-card); }
.badge-review { border-style: dashed; } /* 검토용 표시: 공개 전에 지웁니다 */

/* ---------- 머리글 ---------- */
.site-header { border-bottom: 1px solid var(--color-line); }
.header-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-ink);
  text-decoration: none;
}
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; min-width: 0; }
.nav a:not(.btn) {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  font-size: var(--size-small);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:not(.btn):hover { color: var(--color-wood-dark); }
.nav .btn { margin-left: 16px; }
@media (min-width: 960px) { .nav a:not(.btn) { padding: 0 16px; font-size: 16px; } }

/* ---------- 첫 화면 ---------- */
.hero { padding-top: 40px; }
.hero-main { display: grid; gap: 24px; align-items: center; }
.hero-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero-brand { margin: 0; line-height: 1; }
.hero-brand img { width: 120px; height: auto; }
.hero-lead { font-size: 28px; font-weight: 600; line-height: 1.5; letter-spacing: -.04em; }
.hero-actions .btn { min-width: 144px; gap: 24px; }
.hero-dish { min-width: 0; }
.hero-dish-image { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); }
.hero-dish-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero-dish figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 16px; font-size: 14px; }
.hero-dish figcaption strong { font-weight: 600; }
.hero-dish figcaption a { flex: none; text-decoration: none; }
.hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--color-line); }
.hero-info .status { padding: 0; min-height: 24px; background: none; border: 0; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--size-small); line-height: 1.5; color: var(--color-ink-sub); }
.facts li + li { padding-left: 16px; border-left: 1px solid var(--color-line); }
@media (min-width: 600px) and (max-width: 959.98px) {
  .hero-main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; }
  .hero-lead { font-size: 24px; }
  .hero-dish figcaption { flex-wrap: wrap; gap: 8px; }
}
@media (min-width: 960px) {
  .hero { padding-top: 48px; }
  .hero-main { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
  .hero-brand img { width: 184px; }
  .hero-lead { font-size: clamp(32px, 3.1vw, 40px); }
  .hero-dish figcaption { font-size: 16px; }
  .hero-info { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; }
}

/* ---------- 영업 상태 ---------- */
.status {
  align-self: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: var(--size-small);
}
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; border: 1px solid var(--color-ink-sub); }
.status.is-open .status-dot { background: var(--color-wood); border-color: var(--color-wood); }
.status-label { font-weight: 600; }
.status-detail { color: var(--color-ink-sub); }

/* ---------- 만만재의 세 가지 ---------- */
.three-grid { display: grid; gap: 32px; }
.three-card { min-width: 0; }
.three-feature { display: flex; flex-direction: column; gap: 24px; }
.three-feature .three-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
.three-feature .numeral { line-height: 1.2; }
.three-side { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding-top: 32px; border-top: 1px solid var(--color-line); }
.three-side .photo { aspect-ratio: 1; }
.three-side .three-copy { display: flex; flex-direction: column; gap: 8px; }
.three-side .numeral { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--color-wood-dark); }
@media (min-width: 960px) {
  .three-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 48px; row-gap: 32px; }
  .three-feature { grid-row: span 2; }
  .three-side { padding-top: 0; border-top: 0; }
  .three-side + .three-side { padding-top: 32px; border-top: 1px solid var(--color-line); }
}

/* ---------- 메뉴 ---------- */
#menu .section-head { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; }
.section-link { flex: none; font-size: 14px; text-decoration: none; }
.signature-menu { display: grid; min-width: 0; border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.signature-menu > .photo { border-radius: 0; }
.signature-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; }
.signature-label { display: flex; align-items: center; gap: 8px; }
.signature-label img { width: 32px; height: auto; }
.signature-copy h3 { font-family: var(--font-serif); font-size: 40px; font-weight: 600; line-height: 1.4; letter-spacing: -.04em; }
.signature-copy > p:not(.signature-price) { color: var(--color-ink-sub); }
.signature-price { margin-top: 8px; font-size: 28px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.signature-price span { margin-left: 4px; font-size: 16px; font-weight: 400; }
.menu-groups { display: flex; flex-direction: column; gap: 48px; }
.menu-group { display: flex; flex-direction: column; gap: 24px; }
.menu-group-title { line-height: 1.75; padding-bottom: 16px; border-bottom: 1px solid var(--color-line); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
.menu-card { display: flex; flex-direction: column; min-width: 0; }
.menu-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 0 0; }
.menu-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.menu-name { font-family: var(--font-serif); font-weight: 600; font-size: var(--size-sub); line-height: 1.5; }
.menu-note { display: block; margin-top: 8px; font-size: var(--size-small); color: var(--color-ink-sub); }
.menu-price { margin-top: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 600px) {
  .signature-menu { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
  .signature-menu > .photo { align-self: stretch; }
  .signature-copy { padding: 32px; }
  .menu-grid-mandu .menu-card { flex-direction: row; align-items: center; gap: 24px; }
  .menu-grid-mandu .photo { flex: 0 0 45%; }
  .menu-grid-mandu .menu-body { padding-top: 0; }
}
@media (min-width: 960px) {
  .signature-copy { gap: 24px; padding: 48px 64px; }
  .signature-copy h3 { font-size: 56px; }
  .signature-copy > p:not(.signature-price) { font-size: 20px; }
  .signature-price { font-size: 32px; }
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .menu-grid-mandu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 매장 ---------- */
.store-gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.gallery-main { flex: 1.778 1 276px; min-width: 0; }  /* 세로 사진 두 장과 높이가 맞도록 나눈 비율 */
.gallery-side { flex: 1 1 155px; min-width: 0; }
.facility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px 32px; padding: var(--space-card); }
.facility-grid dt { font-weight: 600; }
.facility-grid dd { color: var(--color-ink-sub); }

/* ---------- 오시는 길 ---------- */
.location-card { display: flex; flex-wrap: wrap; gap: 24px 48px; padding: var(--space-card); }
.address-block { flex: 1.5 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.address-group { display: flex; flex-direction: column; align-items: flex-start; }
.address { font-weight: 600; }
.parking { flex: 1 1 240px; min-width: 0; }
.parking dt { font-weight: 600; }
.parking dd { color: var(--color-ink-sub); }
.location-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.map {
  flex: 1.333 1 240px;  /* 16:9 가게 사진과 높이가 맞도록 나눈 비율 */
  min-width: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1px solid var(--color-card);
  border-radius: var(--radius);
}
.pin-station { background: var(--color-ink); }
.pin-store { background: var(--color-wood-dark); }
.map-label, .photo-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-ink);
  font-size: var(--size-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.map-label { left: var(--x); top: var(--y); }
.label-station { transform: translate(calc(-100% - 16px), -50%); }
.label-store { transform: translate(16px, -50%); background: var(--color-wood-dark); border-color: var(--color-wood-dark); color: var(--color-card); }
.map-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-ink-sub);
  font-size: var(--size-small);
  line-height: 1;
  text-decoration: none;
}
.exterior { flex: 1.778 1 320px; min-width: 0; }
.photo-tag { left: 8px; top: 8px; pointer-events: none; }

/* ---------- 영업시간 ---------- */
.hours-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.hours-card { flex: 1.5 1 480px; min-width: 0; padding: 8px var(--space-card); }
.hours-status { padding: 16px 0 24px; border-bottom: 1px solid var(--color-line); }
.hours-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--color-line); }
.hours-row:last-child { border-bottom: 0; padding-bottom: 16px; }
.hours-row dt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-weight: 600; }
.hours-row dt > span:first-child { line-height: 36px; }
.hours-row dd { display: flex; flex-direction: column; align-items: flex-start; }
.hours-row dd .badge { margin-top: 8px; }
.hours-time { font-family: var(--font-serif); font-weight: 600; font-size: var(--size-sub); line-height: 1.5; font-variant-numeric: tabular-nums; }
.today-badge { display: none; }
.hours-row.is-today .today-badge { display: inline-flex; }
.call-card { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: var(--space-card); }
.call-number {
  align-self: flex-start;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 36px);
  line-height: 1.4;
  color: var(--color-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.call-number:hover { color: var(--color-wood-dark); }

/* ---------- 바닥글 ---------- */
.site-footer { border-top: 1px solid var(--color-line); }
.footer-inner { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
@media (min-width: 960px) { .footer-inner { padding-top: 64px; padding-bottom: 64px; } }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand img { width: 80px; height: auto; }
.footer-info { display: flex; flex-direction: column; font-size: var(--size-small); color: var(--color-ink-sub); }

/* ---------- 모바일 하단 고정 바 ---------- */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--color-card);
  border-top: 1px solid var(--color-line);
}
.bottom-bar .btn { flex: 1 1 0; padding: 0 16px; }
@media (max-width: 959.98px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}