/* ===== 본문 서체 Pretendard (자체 호스팅 · 실제 쓰는 547자만 서브셋) ===== */
@font-face {
  font-family: "Pretendard";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/pretendard-400.woff2?v=bd6d4f8d") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/pretendard-700.woff2?v=219281b4") format("woff2");
}

/* 첫 화면에 실제로 쓰는 33자만 담은 초경량 판 (8.6KB / 8.9KB).
   여기 없는 글자는 아래 전체 판으로 글자 단위 대체된다 — 같은 서체라 티가 안 난다 */
@font-face {
  font-family: "NM Hero";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/nanummyeongjo-hero-400.woff2?v=44c976de") format("woff2");
}
@font-face {
  font-family: "NM Hero";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/nanummyeongjo-hero-700.woff2?v=42b16ad0") format("woff2");
}

/* ===== 디스플레이 서체 (자체 호스팅 · 실제 쓰는 글자만 서브셋) ===== */
@font-face {
  font-family: "Nanum Myeongjo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/nanummyeongjo-400.woff2?v=5f19e5f6") format("woff2");
}
@font-face {
  font-family: "Nanum Myeongjo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/nanummyeongjo-700.woff2?v=2dc5f4a6") format("woff2");
}

/* ===== 디자인 토큰 ===== */
:root {
  --c-ink: #17130f;
  --c-ink-soft: #6b6055;
  --c-bg: #ffffff;
  --c-bg-warm: #f6f2ea;
  --c-dark: #12100e;
  --c-dark-soft: #1d1916;
  --c-ivory: #f4efe6;
  --c-ivory-dim: #cfc4b2;
  --c-brass: #a8894f;
  --c-brass-deep: #7a6238;   /* 아이보리 배경 5.18:1 — 4.5:1 기준 통과 */
  --c-brass-soft: #c9ab6d;
  --c-brass-on-photo: #e2c894;   /* 사진 위 글자용 — 대비 4.5:1 확보 */
  --c-gold: #a8894f;
  --c-gold-bright: #c9ab6d;
  --c-line: #e4dbcd;
  --c-hair: rgba(168, 137, 79, .38);
  --w-page: 1180px;
  --w-narrow: 720px;
  --sp: 1rem;
  --r: 10px;
  --shadow: 0 2px 16px rgba(20, 17, 15, .08);
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-display: "NM Hero", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
  background: var(--c-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.6vw, 1.3rem); }
p { margin: 0 0 1em; }

.container { width: min(100% - 2.4rem, var(--w-page)); margin-inline: auto; }
.section { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.section--warm { background: var(--c-bg-warm); }
.section--dark { background: var(--c-dark); color: #f3ece1; }
.section--dark h2 { color: var(--c-gold-bright); }
.lead { font-size: 1.1rem; color: var(--c-ink-soft); }
.section--dark .lead { color: #cfc3b2; }

/* ===== 버튼 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: .85em 1.6em; border-radius: var(--r);
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  min-height: 48px; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--primary {          /* 네이버예약 = 주 CTA, 항상 더 크게 */
  background: #03c75a; color: #fff; font-size: 1.08rem; padding: .95em 2em;
}
.btn--ghost {            /* 전화 = 보조 CTA */
  background: transparent; color: var(--c-ink); border-color: var(--c-line);
}
.section--dark .btn--ghost { color: #f3ece1; border-color: #4a423a; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ===== 모바일 고정 CTA ===== */
.cta-bar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; gap: .5rem; padding: .55rem .8rem;
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--c-line);
}
.cta-bar .btn { flex: 1; padding: .8em 1em; }
.cta-bar .btn--primary { flex: 1.6; }   /* 네이버예약이 더 넓게 */
body { padding-bottom: 76px; }
@media (min-width: 900px) {
  .cta-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ===== 헤더 ===== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: #fff; border-bottom: 1px solid var(--c-line);
}
.site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; letter-spacing: -.02em; }
.brand span { color: var(--c-gold); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 700; padding: .4em 0; }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-gold); }
.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: 8px;
  background: #fff; font-size: 1.2rem; cursor: pointer;
}
@media (max-width: 899px) {
  .site-nav {
    position: absolute; inset: 62px 0 auto 0; display: none;
    background: #fff; border-bottom: 1px solid var(--c-line); padding: .5rem 0 1rem;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: .85em 1.2rem; }
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ===== 푸터 ===== */
.site-footer { background: var(--c-dark); color: #cfc3b2; padding: 2.5rem 0 3rem; }
.site-footer a { color: #e8dfd1; }
.site-footer h2, .site-footer h3 { color: var(--c-gold-bright); font-size: 1.05rem; }
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sns-row { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.sns-row a {
  display: inline-block; padding: .45em .9em; border: 1px solid #4a423a;
  border-radius: 999px; text-decoration: none; font-size: .92rem;
}

/* ===== 카드·배지·표 ===== */
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r);
  overflow: hidden;
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; }
.section--dark .card { background: var(--c-dark-soft); border-color: #3a332c; }
.badge {
  display: inline-block; padding: .35em .8em; border-radius: 999px;
  background: var(--c-gold); color: #241f1a; font-size: .85rem; font-weight: 700;
}
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }

.menu-table { width: 100%; border-collapse: collapse; }
.menu-table caption { text-align: left; font-weight: 700; padding: .6em 0; font-size: 1.15rem; }
.menu-table th, .menu-table td { padding: .75em .6em; border-bottom: 1px solid var(--c-line); text-align: left; }
.menu-table td.price { text-align: right; }
.price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-gold); font-weight: 700; }
.menu-table td.price { color: inherit; }
.table-scroll { overflow-x: auto; }

.note { background: var(--c-bg-warm); border-left: 4px solid var(--c-gold); padding: 1rem 1.2rem; border-radius: 0 var(--r) var(--r) 0; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start; }
.steps li::before {
  content: counter(s); display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-gold); color: #241f1a; font-weight: 700;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.yt {
  position: relative; aspect-ratio: 16/9; cursor: pointer;
  background: #000 center/cover no-repeat; border-radius: var(--r); overflow: hidden;
}
.yt--vertical { aspect-ratio: 9/16; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt::after {
  content: "▶"; position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; font-size: 1.5rem;
  display: grid; place-items: center; pointer-events: none;
}
.yt[data-loaded="true"]::after { display: none; }
[data-filter][aria-pressed="true"] { background: var(--c-gold); border-color: var(--c-gold); color: #241f1a; }

form label { font-weight: 700; }
form input[type="text"], form input[type="tel"], form input[type="date"],
form select, form textarea {
  width: 100%; max-width: 480px; padding: .7em .8em; margin-top: .3em;
  border: 1px solid var(--c-line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--c-ink);
}
form input[type="checkbox"] { width: 20px; height: 20px; vertical-align: -4px; margin-right: .4em; }
form abbr { color: #c0392b; text-decoration: none; }

/* =========================================================
   프리미엄 리디자인 레이어
   아래 규칙은 위의 기본 스타일을 의도적으로 덮어씁니다.
   ========================================================= */

body { font-size: 16.5px; letter-spacing: -.005em; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }

/* ---- 브라스 헤어라인 ---- */
.rule { height: 1px; background: var(--c-hair); border: 0; margin: 0; }
.rule--short { width: 56px; }

/* ---- 에디토리얼 섹션 ---- */
.ed { padding: clamp(4.5rem, 11vw, 9rem) 0; }
.ed--ivory { background: var(--c-bg-warm); }
.ed--dark { background: var(--c-dark); color: var(--c-ivory-dim); }
.ed--dark h2, .ed--dark h3 { color: var(--c-ivory); }

.eyebrow {
  display: block; font-family: var(--font);
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-brass); margin-bottom: 1.5rem;
}
.ed--dark .eyebrow { color: var(--c-brass-soft); }

.ed-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.42; margin: 0 0 1.2rem;
}
.ed-lede {
  font-size: 1.02rem; line-height: 2; color: var(--c-ink-soft);
  max-width: 44ch; margin: 0;
}
.ed--dark .ed-lede { color: var(--c-ivory-dim); }

/* 비대칭 2단 */
.split { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}
.split figure, .split img { margin: 0; }
.split img { width: 100%; }

/* ---- 히어로 ---- */
.hero {
  position: relative; min-height: 640px; height: 100svh; max-height: 1000px;
  display: flex; align-items: center; overflow: hidden;
  background: var(--c-dark); color: var(--c-ivory); isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform; overflow: hidden; }

/* 사진 전체를 보여주고 남는 여백은 같은 사진을 흐리게 깔아 메운다 */
.hero__bg {
  position: absolute; inset: -4%;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* 흐림은 파일에 미리 구워두었다. CSS blur 는 화면 전체를 다시 그려
     느린 기기에서 첫 그리기를 1초 가까이 늦춘다 */
  filter: saturate(.75) brightness(.5);
  transform: scale(1.08);
}
.hero__fg {
  position: relative; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 50%;
  transform-origin: 54% 56%;
  animation: heroPush 26s var(--ease) forwards;
}
/* 사진 전체가 보이는 상태에서 시작해, 화면을 채울 때까지 천천히 들어간다 */
@keyframes heroPush { from { transform: scale(1); } to { transform: scale(1.22); } }

/* 모바일 세로 화면에서는 contain이 여백을 크게 만들어 cover 로 되돌린다 */
/* 세로 화면: 가로 사진을 화면 전체에 덮으면 일부만 크게 확대된다.
   사진 영역을 4:5 로 묶고 세로용 컷(-p)을 따로 쓴다.
   그 아래는 어두운 바탕으로 이어지고 경계는 그라데이션으로 흘린다 */
@media (max-width: 720px) {
  .hero__media {
    inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 5;
  }
  .hero__fg { object-fit: cover; }
  .hero__bg { display: none; }
  .hero__media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 42%; pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, rgba(18,16,14,0) 0%, rgba(18,16,14,.72) 62%, var(--c-dark) 100%);
  }
  /* 4:5 안에서는 확대 폭을 줄여야 사진이 잘리지 않는다 */
  .hero__slide.is-active .hero__fg { animation-name: heroPushMobile; }
}
@keyframes heroPushMobile { from { transform: scale(1); } to { transform: scale(1.09); } }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(12,10,9,.90) 0%, rgba(12,10,9,.78) 26%,
      rgba(12,10,9,.44) 46%, rgba(12,10,9,.06) 66%, rgba(12,10,9,0) 82%),
    linear-gradient(to top, rgba(12,10,9,.66) 0%, rgba(12,10,9,0) 20%),
    /* 위쪽은 메뉴 글자가 놓이는 자리다. 사진이 밝으면 글자가 묻힌다 */
    linear-gradient(to bottom, rgba(12,10,9,.78) 0%, rgba(12,10,9,.38) 12%, rgba(12,10,9,0) 21%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__col { max-width: 41rem; will-change: transform; }

/* 아이브로우: 짧은 브라스 선 + 넓은 자간의 소문자 라틴 */
.hero__eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: var(--c-brass-on-photo);
  margin: 0 0 2.6rem;
}
.hero__eyebrow i { display: block; width: 34px; height: 1px; background: rgba(201,171,109,.55); flex: none; }

.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.1vw, 3.4rem); line-height: 1.28;
  letter-spacing: -.035em; color: #fdfbf7; margin: 0 0 1.5rem;
  text-shadow: 0 1px 34px rgba(0,0,0,.5);
}
.hero__sub {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.65;
  letter-spacing: .01em; color: rgba(244,239,230,.95);
  margin: 0 0 2.2rem; padding-bottom: 2.2rem; position: relative;
  text-shadow: 0 1px 24px rgba(0,0,0,.45);
}
.hero__sub::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 1px; background: rgba(201,171,109,.5);
}
.hero__body {
  font-size: .87rem; line-height: 2.35; letter-spacing: .045em;
  color: rgba(244,239,230,.6); margin: 0 0 3rem; font-weight: 400;
}
.hero__place {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.95rem, 1.25vw, 1.08rem); letter-spacing: .1em;
  color: var(--c-brass-on-photo); margin: 0 0 2.4rem;
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; }

/* 히어로 전용 CTA — 채운 금색 대신 얇은 브라스 테두리 */
.btn--hero {
  background: transparent; color: var(--c-ivory);
  border: 1px solid rgba(201,171,109,.7);
  font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  padding: 1.15em 2.9em;
}
.btn--hero:hover { background: var(--c-brass-deep); border-color: var(--c-brass-deep); color: #fff; }

.hero__strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid rgba(244,239,230,.14);
}
.hero__strip ul {
  list-style: none; margin: 0; padding: 1.4rem 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem clamp(1.6rem, 4.5vw, 4rem);
  font-size: .73rem; font-weight: 400; letter-spacing: .16em;
  color: rgba(244,239,230,.55);
}
.hero__strip li { position: relative; }
.hero__strip li + li::before {
  content: ""; position: absolute; left: clamp(-.8rem, -2.2vw, -2rem); top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(201,171,109,.5); transform: translateY(-50%);
}
@media (max-width: 720px) {
  /* 세로 화면에서는 본문·컨트롤·인포 스트립을 위아래로 쌓는다.
     (row 인 채로 두면 스트립이 화면 밖으로 밀려난다) */
  .hero { height: auto; min-height: 0; max-height: none; padding: 8.5rem 0 6.5rem;
          flex-direction: column; align-items: stretch; }
  /* DOM 순서상 컨트롤이 본문보다 앞이라 세로로 쌓을 때 순서를 잡아준다 */
  .hero__inner { order: 1; }
  .hero__controls { order: 2; }
  .hero__strip { order: 3; position: static; margin-top: 3rem; }
  .hero__strip ul { justify-content: flex-start; }
}

/* 히어로 타이포 등장 */
/* 순서대로 나타나는 느낌은 유지하되 전체 길이를 절반으로.
   제목이 LCP 요소라 등장이 늦으면 그대로 지표가 된다 */
.reveal { opacity: 0; transform: translateY(10px); animation: revealUp .7s var(--ease) forwards; }
.reveal--1 { animation-delay: .08s; }
.reveal--2 { animation-delay: .2s; }
.reveal--3 { animation-delay: .34s; }
.reveal--4 { animation-delay: .48s; }
.reveal--5 { animation-delay: .6s; }
.reveal--6 { animation-delay: .72s; }
@keyframes revealUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- 버튼 (브라스) ---- */
.btn {
  border-radius: 2px; font-weight: 700; letter-spacing: .04em;
  font-size: .92rem; padding: 1.05em 2.3em; min-height: 0;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { transform: none; box-shadow: none; }
.btn--primary { background: var(--c-brass-deep); color: #fff; border-color: var(--c-brass-deep); }
.btn--primary:hover { background: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: rgba(23,19,15,.28); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-ivory); border-color: var(--c-ink); }
.ed--dark .btn--ghost, .hero .btn--ghost { color: var(--c-ivory); border-color: rgba(244,239,230,.4); }
.ed--dark .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--c-ivory); color: var(--c-ink); }

/* 텍스트 링크형 CTA */
.link-quiet {
  font-size: .88rem; letter-spacing: .06em; text-decoration: none;
  color: var(--c-ivory); border-bottom: 1px solid rgba(244,239,230,.4);
  padding-bottom: .35em; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.link-quiet:hover { border-color: var(--c-brass-soft); color: var(--c-brass-soft); }
.link-ink {
  display: inline-block; font-size: .88rem; letter-spacing: .06em; text-decoration: none;
  color: var(--c-ink); border-bottom: 1px solid var(--c-hair); padding-bottom: .35em;
}
.link-ink:hover { border-color: var(--c-brass); color: var(--c-brass-deep); }

/* ---- 헤더 ---- */
.site-header {
  background: #fff; border-bottom: 1px solid var(--c-line);
  /* color 는 상속되는 속성이라 전환하면 헤더 안 모든 글자가 400ms 동안
     매 프레임 다시 계산된다. 배경과 테두리만 전환한다 */
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.site-header .container { min-height: 76px; }
.brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.16rem; letter-spacing: .2em;
}
.brand span { color: inherit; }   /* 브랜드명은 한 가지 색으로 */
.site-nav ul { gap: clamp(1rem, 2.2vw, 2rem); }
.site-nav a {
  font-size: .86rem; font-weight: 700; letter-spacing: .04em;
  position: relative; padding: .5em 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .1em;
  height: 1px; background: var(--c-brass); transition: right .38s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { box-shadow: none; }
.nav-toggle { border-color: rgba(23,19,15,.2); border-radius: 2px; background: transparent; }

/* 홈: 히어로 위에 겹치는 투명 헤더 */
.page-home .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; color: var(--c-ivory);
}
.page-home .site-header .brand { color: var(--c-ivory); }
.page-home .nav-toggle { color: var(--c-ivory); border-color: rgba(244,239,230,.35); }
.page-home .site-header.is-stuck {
  background: #fff; border-bottom-color: var(--c-line); color: var(--c-ink);
}
.page-home .site-header.is-stuck .brand { color: var(--c-ink); }
.page-home .site-header.is-stuck .nav-toggle { color: var(--c-ink); border-color: rgba(23,19,15,.2); }
@media (max-width: 899px) {
  .page-home .site-nav { background: var(--c-dark); border-bottom-color: rgba(244,239,230,.12); }
  .page-home .site-header.is-stuck .site-nav { background: #fff; }
}

/* ---- 푸터 ---- */
.site-footer { background: var(--c-dark); color: var(--c-ivory-dim); padding: 4.5rem 0 3.5rem; }
.site-footer h2, .site-footer h3 {
  color: var(--c-ivory); font-family: var(--font-display);
  font-size: .95rem; letter-spacing: .1em; margin-bottom: 1.1rem;
}
.site-footer a { color: var(--c-ivory); text-decoration: none; }
.site-footer a:hover { color: var(--c-brass-soft); }
.footer-grid { gap: 2.6rem; }
.sns-row a {
  border-color: rgba(244,239,230,.22); border-radius: 2px;
  font-size: .8rem; letter-spacing: .04em; padding: .5em 1em;
}
.sns-row a:hover { border-color: var(--c-brass); }

/* ---- 카드/배지 재정의 ---- */
.card { border-radius: 2px; border-color: var(--c-line); background: #fff; }
.ed--dark .card { background: var(--c-dark-soft); border-color: rgba(244,239,230,.12); }
.card__body { padding: 1.6rem 1.7rem 1.8rem; }
.card__body h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.card__body p { font-size: .92rem; line-height: 1.9; color: var(--c-ink-soft); margin: 0; }
.ed--dark .card__body p { color: var(--c-ivory-dim); }

.badge {
  background: transparent; color: var(--c-brass-deep);
  border: 1px solid var(--c-hair); border-radius: 2px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: .5em 1.1em;
}
.ed--dark .badge { color: var(--c-brass-soft); border-color: rgba(201,171,109,.4); }
.badge-row { gap: .6rem; }

/* ---- 사실 목록 ---- */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem;
  padding: 1.15rem 0; border-top: 1px solid var(--c-line); font-size: .95rem;
}
.facts li:last-child { border-bottom: 1px solid var(--c-line); }
.facts .k {
  font-family: var(--font-display); color: var(--c-brass-deep);
  font-size: .9rem; letter-spacing: .04em;
}
.ed--dark .facts li { border-color: rgba(244,239,230,.14); }
.ed--dark .facts .k { color: var(--c-brass-soft); }

/* 스크롤 등장 */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* 사실 목록을 넓은 영역에서 2열로 */
@media (min-width: 820px) {
  .facts--wide { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem,4vw,4rem); }
  .facts--wide li:nth-child(2) { border-top: 1px solid rgba(244,239,230,.14); }
  .facts--wide li:last-child { border-bottom: none; }
  .facts--wide li:nth-last-child(2) { border-bottom: 1px solid rgba(244,239,230,.14); }
}

/* 사진 2장 세로 배치 (기념일 섹션) */
.photo-pair { display: grid; gap: 1.1rem; }
.photo-pair figure { margin: 0; }
.photo-pair img { width: 100%; }
.photo-pair figcaption {
  margin-top: .7rem; font-size: .78rem; letter-spacing: .06em;
  color: rgba(244,239,230,.55);
}
@media (max-width: 560px) {
  .photo-pair { grid-template-columns: 1fr; }
}

/* =========================================================
   품질 기준 대응 — 타입 스케일 / 포커스 / 스킵링크 / 클릭대상
   ========================================================= */

/* ---- 타입 스케일 (렌더링 크기 종류를 19종 → 8종으로) ---- */
:root {
  --fs-2xs: .7rem;     /* 11.2px  아이브로우, 인포스트립 */
  --fs-xs:  .78rem;    /* 12.5px  캡션, 배지, SNS */
  --fs-sm:  .875rem;   /* 14px    내비, 버튼, 링크, 보조본문 */
  --fs-md:  1rem;      /* 16px    본문 */
  --fs-lg:  1.125rem;  /* 18px    리드문, 브랜드 */
  --fs-xl:  clamp(1.05rem, 1.7vw, 1.35rem);
  --fs-2xl: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-3xl: clamp(2rem, 4.1vw, 3.4rem);
}

body { font-size: var(--fs-md); }

.hero__eyebrow, .hero__strip ul { font-size: var(--fs-2xs); }
.eyebrow, .badge, .photo-pair figcaption, .sns-row a { font-size: var(--fs-xs); }
.site-nav a, .hero__body, .link-quiet, .link-ink, .btn, .btn--hero,
.card__body p, .facts .k, .facts li { font-size: var(--fs-sm); }
.ed-lede, .lead { font-size: var(--fs-lg); }
.brand, .hero__place { font-size: var(--fs-lg); }
.hero__sub { font-size: var(--fs-xl); }
.ed-title { font-size: var(--fs-2xl); }
.hero__title { font-size: var(--fs-3xl); }
.card__body h3, .site-footer h3 { font-size: var(--fs-md); }

/* ---- 포커스 표시 (키보드 사용자) ---- */
:focus-visible {
  outline: 2px solid var(--c-brass);
  outline-offset: 3px;
  border-radius: 2px;
}
/* 어두운 배경에서는 밝은 링이 보여야 한다 */
.hero :focus-visible,
.ed--dark :focus-visible,
.site-footer :focus-visible,
.page-home .site-header:not(.is-stuck) :focus-visible {
  outline-color: var(--c-brass-soft);
}
/* 마우스 클릭 시에는 링을 띄우지 않는다 */
:focus:not(:focus-visible) { outline: none; }

/* ---- 본문 바로가기 (스킵 링크) ---- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--c-ink); color: var(--c-ivory);
  padding: .8em 1.4em; border-radius: 2px; text-decoration: none;
  font-size: var(--fs-sm); font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- 클릭 대상 최소 24px (WCAG 2.2 AA) ---- */
.link-ink, .link-quiet, .site-footer a, .sns-row a {
  display: inline-block; min-height: 24px;
}
.link-ink, .link-quiet { padding-bottom: .45em; }
.site-footer p a { padding: .15em 0; }

/* =========================================================
   히어로 슬라이드쇼 + 여백 확장 (HBA 분석 반영)
   ========================================================= */

/* ---- 슬라이드 ---- */
.hero__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.6s var(--ease), visibility 0s linear 1.6s;
}
.hero__slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 1.6s var(--ease), visibility 0s;
}
/* 켄번즈는 활성 슬라이드에서만 */
.hero__slide .hero__fg { animation: none; transform: none; }
.hero__slide.is-active .hero__fg { animation: heroPush 26s var(--ease) forwards; }

/* ---- 조작 버튼 (WCAG: 자동 회전에는 멈춤 수단이 필요) ---- */
.hero__controls {
  position: absolute; right: clamp(1.2rem, 3vw, 2.6rem);
  bottom: clamp(4.6rem, 9vh, 6.4rem); z-index: 3;
  display: flex; align-items: center; gap: 1rem;
}
.hero__pause {
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid rgba(244,239,230,.42);
  border-radius: 50%; position: relative;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.hero__pause::before,
.hero__pause::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 2px; height: 10px; background: var(--c-ivory);
}
.hero__pause::before { left: 12px; }
.hero__pause::after  { right: 12px; }
/* 멈춤 상태에서는 재생(▶) 모양으로 */
.hero__pause[aria-pressed="true"]::before {
  left: 12px; width: 0; height: 0; background: transparent;
  border-left: 9px solid var(--c-ivory);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.hero__pause[aria-pressed="true"]::after { display: none; }
.hero__pause:hover { border-color: var(--c-brass-soft); background: rgba(244,239,230,.08); }

.hero__dots { display: flex; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.hero__dots button {
  width: 26px; height: 26px; padding: 0; border: 0; cursor: pointer;
  background: transparent; position: relative;
}
.hero__dots button::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 100%; height: 1px; background: rgba(244,239,230,.35);
  transition: background-color .35s var(--ease), height .35s var(--ease);
}
.hero__dots button[aria-current="true"]::after { background: var(--c-brass-soft); height: 2px; }
.hero__dots button:hover::after { background: var(--c-ivory); }

@media (max-width: 720px) {
  .hero__controls { position: static; margin-top: 2.4rem; justify-content: flex-start; }
}

/* 모션을 원치 않는 사용자: 첫 장만, 전환 없음 */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-active .hero__fg { animation: none; }
}

/* =========================================================
   여백 확장 — "비싸 보이는 느낌"의 8할
   ========================================================= */
.ed { padding: clamp(5.5rem, 15vw, 13rem) 0; }
.split { gap: clamp(2.6rem, 7vw, 6.5rem); }
.ed-title { margin-bottom: 1.8rem; line-height: 1.45; }
.ed-lede { line-height: 2.1; }
.eyebrow { margin-bottom: 2.2rem; }
.facts li { padding: 1.5rem 0; }
.card__body { padding: 2rem 2.1rem 2.2rem; }

/* 풀블리드 — 사진 하나는 화면 폭 전체로 */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.bleed img { width: 100%; }
.bleed figcaption {
  width: min(100% - 2.4rem, var(--w-page)); margin: 1rem auto 0;
  font-size: var(--fs-xs); letter-spacing: .06em; color: var(--c-ink-soft);
}
.ed--dark .bleed figcaption { color: rgba(244,239,230,.55); }

/* =========================================================
   하위 페이지를 홈과 같은 편집 리듬으로
   기존 .section / .lead 마크업을 그대로 두고 스타일만 올린다
   ========================================================= */

.section { padding: clamp(4rem, 11vw, 9rem) 0; }
.section--warm { background: var(--c-bg-warm); }

/* 페이지 첫 섹션 = 페이지 머리말 */
main > .section:first-child,
main > article.section:first-child {
  padding-top: clamp(6rem, 13vw, 10.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* 페이지 제목 */
main h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.1vw, 3.2rem);
  line-height: 1.28; letter-spacing: -.035em;
  margin: 0 0 1.6rem;
}
/* 제목 아래 브라스 헤어라인 */
main > .section:first-child h1::after,
main > article.section:first-child h1::after {
  content: ""; display: block; width: 46px; height: 1px;
  background: var(--c-hair); margin-top: 1.8rem;
}

/* 리드 문단 */
.lead {
  font-size: var(--fs-lg); line-height: 2.1;
  color: var(--c-ink-soft); max-width: 46ch; margin: 0 0 1em;
}
.section--dark .lead, .ed--dark .lead { color: var(--c-ivory-dim); }

/* 섹션 제목 */
.section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.4; margin: 0 0 1.4rem;
}
.section--dark h2 { color: var(--c-ivory); }

/* 아이브로우 (페이지마다 한 줄 추가) */
.page-eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--c-brass);
  margin: 0 0 1.8rem;
}
.page-eyebrow i { display: block; width: 34px; height: 1px; background: var(--c-hair); flex: none; }
.section--dark .page-eyebrow, .ed--dark .page-eyebrow { color: var(--c-brass-soft); }

/* 표 — 여백과 선을 정리 */
.menu-table caption {
  font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--c-brass-deep); padding: 1.4em 0 .8em; letter-spacing: .02em;
}
.menu-table th, .menu-table td { padding: 1.05em .6em; }
.menu-table th[scope="row"] { font-weight: 500; }
.menu-table th small { color: var(--c-ink-soft); font-weight: 400; margin-left: .4em; }
.menu-table thead th { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--c-ink-soft); font-weight: 600; }
.menu-table td.price { font-weight: 600; }

/* 안내 박스 */
.note {
  background: transparent; border: 0; border-left: 1px solid var(--c-brass);
  padding: .2rem 0 .2rem 1.6rem; border-radius: 0;
  font-size: var(--fs-sm); line-height: 2; color: var(--c-ink-soft);
}
.section--dark .note, .ed--dark .note { color: var(--c-ivory-dim); }
.note h3 { margin-bottom: .6rem; }

/* 단계 목록 */
.steps { gap: 1.6rem; }
.steps li::before {
  background: transparent; border: 1px solid var(--c-hair);
  color: var(--c-brass-deep); font-family: var(--font-display); font-weight: 700;
}
.section--dark .steps li::before, .ed--dark .steps li::before { color: var(--c-brass-soft); }

/* 카드 그리드 간격 */
.grid { gap: 1.6rem; }

/* 영상 썸네일 */
.yt { border-radius: 2px; }
.yt::after {
  width: 60px; height: 60px; font-size: 1.1rem;
  background: rgba(12,10,9,.55); border: 1px solid rgba(244,239,230,.35);
}

/* 필터 버튼 */
[data-filter] { font-size: var(--fs-sm); padding: .8em 1.6em; }

/* ---- 대비 보정 ---- */
/* 아이브로우: 밝은 브라스는 흰 배경에서 3.30:1 로 미달 → 진한 브라스로 */
.page-eyebrow, .eyebrow { color: var(--c-brass-deep); }
.section--dark .page-eyebrow, .ed--dark .page-eyebrow,
.section--dark .eyebrow, .ed--dark .eyebrow { color: var(--c-brass-soft); }

/* .ed--dark 에만 걸어 둔 규칙들을 .section--dark 에도 동일 적용
   (어두운 카드 안에 어두운 본문 글씨가 남아 2.85:1 이었음) */
.section--dark .card__body p,
.section--dark .facts li span:not(.k),
.section--dark .note,
.section--dark small { color: var(--c-ivory-dim); }
.section--dark .card__body h3,
.section--dark h3 { color: var(--c-ivory); }
.section--dark .facts .k { color: var(--c-brass-soft); }
.section--dark .facts li { border-color: rgba(244,239,230,.14); }
.section--dark .steps li::before { color: var(--c-brass-soft); border-color: rgba(201,171,109,.4); }
.section--dark .badge { color: var(--c-brass-soft); border-color: rgba(201,171,109,.4); }
.section--dark .link-ink,
.ed--dark .link-ink { color: var(--c-ivory); border-color: rgba(244,239,230,.4); }
.site-footer .footer-h { font-size: var(--fs-md); }

/* 사실 목록: 메뉴명이 두 줄로 접히지 않도록 첫 칸을 넓히고 줄바꿈 금지 */
@media (min-width: 560px) {
  .facts li { grid-template-columns: 11.5rem 1fr; }
  .facts .k { white-space: nowrap; }
}
/* 좁은 화면에서는 위아래로 쌓는다 */
@media (max-width: 559px) {
  .facts li { grid-template-columns: 1fr; gap: .35rem; }
  .facts .k { white-space: normal; }
}

/* 어린이 서비스 사진 격자 — 놀이방은 넓게, 나머지는 작게 */
.kid-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
}
.kid-grid li:first-child { grid-column: 1 / -1; }
.kid-grid figure { margin: 0; }
.kid-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.kid-grid li:first-child img { aspect-ratio: 16 / 9; }
.kid-grid figcaption {
  margin-top: .55rem; font-size: var(--fs-2xs); letter-spacing: .06em;
  color: var(--c-ink-soft); text-align: center;
}
@media (max-width: 560px) {
  .kid-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 네이버 평점 블록 */
.rating {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 720px) { .rating { grid-template-columns: auto 1fr; } }
.rating__score { display: flex; align-items: baseline; gap: .5rem; }
.rating__score strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1;
  letter-spacing: -.04em; color: var(--c-brass-deep);
}
.rating__score span { font-size: var(--fs-lg); color: var(--c-ink-soft); }
.rating__body { max-width: 42ch; }
.rating__label {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  color: var(--c-ink); margin: 0 0 .6rem;
}
.rating__note {
  font-size: var(--fs-sm); line-height: 2; color: var(--c-ink-soft); margin: 0 0 1.2rem;
}

/* =========================================================
   히어로 대표 사진 — 홀 사진을 배경으로 두고 한쪽에서 강조
   ========================================================= */

.hero__layout {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 5rem);
}
.hero__layout .hero__col { flex: 1 1 auto; min-width: 0; }

.hero__feature {
  flex: none; margin: 0; position: relative;
  width: clamp(150px, 24vw, 320px);
  /* 첫 화면에서만 보이고, 배경이 다른 사진으로 넘어가면 조용히 물러난다 */
  opacity: 1; transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.hero[data-slide="1"] .hero__feature,
.hero[data-slide="2"] .hero__feature {
  opacity: 0; transform: translateY(14px); pointer-events: none;
}

.hero__feature__in { position: relative; }
.hero__feature img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.8), 0 3px 12px rgba(0,0,0,.45);
}
/* 사진에서 살짝 어긋나게 걸친 브라스 헤어라인 액자 */
.hero__feature__in::before {
  content: ""; position: absolute; z-index: -1;
  top: 20px; left: 20px; right: -20px; bottom: -20px;
  border: 1px solid rgba(201,171,109,.4);
}
/* 카드가 놓이는 오른쪽을 하나의 어두운 면으로 정리한다.
   첫 화면에서만 깔리고, 배경이 넘어가면 함께 걷힌다 */
.hero__scrim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left,
    rgba(10,8,6,.9) 0%, rgba(10,8,6,.78) 19%, rgba(10,8,6,.4) 37%, rgba(10,8,6,0) 56%);
  transition: opacity .8s var(--ease);
}
.hero[data-slide="1"] .hero__scrim::after,
.hero[data-slide="2"] .hero__scrim::after { opacity: 0; }
@media (max-width: 720px) { .hero__scrim::after { display: none; } }
.hero__feature figcaption {
  margin-top: 1.5rem; font-size: var(--fs-2xs);
  letter-spacing: .06em; line-height: 1.8;
  color: rgba(244,239,230,.84);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

/* 본문과 같은 리듬으로 뒤따라 나타난다 */
.hero__feature__in,
.hero__feature figcaption { animation: featureIn 1.4s var(--ease) both; }
.hero__feature__in       { animation-delay: .55s; }
.hero__feature figcaption { animation-delay: .8s; }
@keyframes featureIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero__feature { width: clamp(118px, 30vw, 190px); }
  .hero__feature__in::before { top: 12px; left: 12px; right: -12px; bottom: -12px; }
  .hero__feature figcaption { margin-top: 1rem; }
}
@media (max-width: 420px) {
  .hero__feature figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__feature__in, .hero__feature figcaption { animation: none; }
}

/* 세로 화면: 옆에 두면 제목이 무너지므로 본문 아래로 내려 크게 보여준다 */
@media (max-width: 720px) {
  .hero__layout { display: block; }
  .hero__feature {
    width: min(64%, 250px);
    margin-top: clamp(2.4rem, 7vw, 3.4rem);
  }
  .hero__feature__in::before { top: 14px; left: 14px; right: -14px; bottom: -14px; }
  .hero__feature figcaption { display: block; margin-top: 1.3rem; }
}

/* =========================================================
   영수증 리뷰 뽑기 — 두 갈래를 나란히 보여준다
   ========================================================= */

.draw {
  display: grid; gap: clamp(2rem, 4vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 720px) { .draw { grid-template-columns: 1fr 1fr; } }

.draw__head {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--c-brass-soft); margin: 0 0 1.4rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(201,171,109,.32);
}
.draw__head small {
  font-family: var(--font); font-size: var(--fs-2xs); font-weight: 400;
  letter-spacing: .1em; color: var(--c-ivory-dim); margin-left: .6em;
}
.draw__list { list-style: none; margin: 0; padding: 0; }
.draw__list li {
  display: grid; grid-template-columns: 3.4rem 1fr;
  gap: 1rem; align-items: baseline;
  padding: .85em 0; font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(244,239,230,.09);
}
.draw__list .r {
  font-family: var(--font-display); font-weight: 700;
  color: var(--c-brass-soft); letter-spacing: .02em;
}
.draw__note {
  margin: 1.4rem 0 0; font-size: var(--fs-xs); line-height: 2;
  color: var(--c-ivory-dim);
}

/* 메뉴 페이지 음식 사진 — 표 위에 한 줄로 */
.dish-shots {
  list-style: none; padding: 0;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 clamp(2.2rem, 4.5vw, 3.2rem);
  display: grid; gap: clamp(.7rem, 1.8vw, 1.3rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dish-shots figure { margin: 0; }
.dish-shots img { display: block; width: 100%; height: auto; }
.dish-shots figcaption {
  margin-top: .8rem; font-size: var(--fs-xs); line-height: 1.6;
  color: var(--c-ink-soft); letter-spacing: .01em;
}

/* 세로 화면에서는 글자가 사진 폭 전체를 지나간다.
   음식 사진처럼 밝은 배경에서도 읽히도록 한 겹 더 눌러준다 */
@media (max-width: 720px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(10,8,6,.22) 0%, rgba(10,8,6,.18) 58%, rgba(10,8,6,.26) 100%),
      linear-gradient(100deg,
        rgba(12,10,9,.58) 0%, rgba(12,10,9,.44) 30%,
        rgba(12,10,9,.22) 60%, rgba(12,10,9,.10) 100%),
      linear-gradient(to top, rgba(12,10,9,.66) 0%, rgba(12,10,9,0) 22%),
      linear-gradient(to bottom, rgba(12,10,9,.70) 0%, rgba(12,10,9,.40) 20%, rgba(12,10,9,0) 34%);
  }
}

/* 제목과 부제는 LCP 요소다. opacity 0 에서 시작하면 그 시간이 그대로
   지표가 되므로, 이 둘만 투명도 없이 위치만 움직여 들어오게 한다.
   눈으로는 나머지와 같은 흐름으로 읽힌다 */
.hero__title.reveal,
.hero__sub.reveal {
  opacity: 1;
  animation-name: revealSlide;
}
@keyframes revealSlide {
  from { transform: translateY(10px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title.reveal, .hero__sub.reveal { animation: none; transform: none; }
}

/* 기념일 섹션: 리드 문단이 여러 개일 때 간격, 그리고 소제목 */
.ed-lede + .ed-lede { margin-top: 1.3rem; }
.ed-sub {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.01em;
  margin: 0 0 1.4rem;
}
.ed--dark .ed-sub, .ed--dark .note h3 { color: var(--c-ivory); }

/* 기념일 섹션 영상 — 홍보 포스터 비율 그대로 (세로 숏폼) */
.yt--poster { aspect-ratio: 1023 / 1537; }
.ed--dark figure > figcaption {
  margin-top: .9rem; font-size: var(--fs-xs); line-height: 1.8;
  letter-spacing: .02em; color: var(--c-ivory-dim);
}

/* 항목이 홀수여도 두 열의 끝선이 어긋나지 않게 */
@media (min-width: 760px) {
  .facts--wide li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .facts--wide li:last-child:nth-child(odd) { border-bottom: 1px solid rgba(244,239,230,.14); }
}
/* =========================================================
   두 장면 나란히 — 육수와 효소
   화면 끝까지 채우는 두 칸. 각 칸은 사진 위에 글이 얹힌다
   ========================================================= */

.duo { display: grid; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }

.duo__panel {
  position: relative; isolation: isolate; overflow: hidden;
  /* 모바일에선 비율을 고정하지 않는다. 고정하면 글이 칸 밖으로 잘려 나간다 */
  min-height: min(124vw, 32rem);
  display: flex; align-items: flex-start;
  background: var(--c-dark);
}
@media (min-width: 860px) {
  .duo__panel { aspect-ratio: 3 / 2; min-height: 0; }
}

.duo__panel img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* 글이 놓이는 왼쪽 위만 눌러준다. 사진 나머지는 그대로 둔다 */
.duo__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(10,8,6,.90) 0%, rgba(10,8,6,.72) 32%,
                            rgba(10,8,6,.34) 58%, rgba(10,8,6,.06) 80%, rgba(10,8,6,0) 92%),
    linear-gradient(to bottom, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 34%);
}
/* 세로 사진 위에선 대각선 그라데이션이 글 아래를 못 덮는다 — 위에서 아래로 */
@media (max-width: 859px) {
  .duo__panel::before {
    background:
      linear-gradient(to bottom, rgba(10,8,6,.90) 0%, rgba(10,8,6,.76) 38%,
                                 rgba(10,8,6,.40) 64%, rgba(10,8,6,.10) 86%);
  }
}
.duo__body {
  position: relative; z-index: 2;
  padding: clamp(2rem, 5vw, 3.6rem);
  max-width: 30rem; color: var(--c-ivory);
}
.duo__body .eyebrow {
  display: block; color: var(--c-brass-on-photo);
  letter-spacing: .3em; margin-bottom: 1.4rem;
}
.duo__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.3;
  letter-spacing: -.03em; margin: 0 0 1.2rem;
  text-shadow: 0 1px 26px rgba(0,0,0,.5);
}
.duo__text {
  font-size: var(--fs-sm); line-height: 2; color: rgba(244,239,230,.88);
  margin: 0 0 1.8rem;
}
.duo__panel .link-quiet { color: var(--c-ivory); }

/* 가운데 세로선 — 두 칸이 한 벌로 읽히게 */
@media (min-width: 860px) {
  .duo__panel + .duo__panel::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
    width: 1px; background: rgba(226,200,148,.35);
  }
}

/* =========================================================
   이야기 글 안의 사진
   본문(720px)보다 조금 넓게 빼서 글과 사진의 호흡을 나눈다
   ========================================================= */
.post-fig { margin: clamp(2rem, 5vw, 3.2rem) 0; }
.post-fig img {
  width: 100%; border-radius: var(--r);
  background: var(--c-bg-warm);
}
.post-fig figcaption {
  margin-top: .9rem; font-size: .88rem; line-height: 1.7;
  color: var(--c-ink-soft);
}
@media (min-width: 900px) {
  /* 720px 본문에서 좌우로 각각 60px 씩 넘치게 — 화면이 좁으면 그대로 둔다 */
  .post-fig { margin-inline: -60px; }
}

/* 글 끝에서 다음 글로 넘어가는 안내 */
.post-next {
  margin-top: clamp(2.4rem, 6vw, 3.6rem);
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--c-line); border-radius: var(--r);
  background: var(--c-bg-warm);
}
.post-next .eyebrow { display: block; color: var(--c-brass-deep); margin-bottom: .7rem; }
.post-next p { margin: 0 0 .9rem; font-size: 1.05rem; }

/* 글머리에서 손님 말을 그대로 옮긴 한 줄 — 이게 글의 고리라 눈에 걸리게 둔다 */
.post-quote {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--c-brass);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.7; color: var(--c-ink);
}

/* 세로로 긴 사진은 본문 폭을 다 쓰면 화면을 통째로 잡아먹는다 — 가운데로 좁힌다 */
.post-fig--tall { margin-inline: auto; max-width: 460px; }
@media (min-width: 900px) { .post-fig--tall { margin-inline: auto; } }

/* 글 안에 넣는 세로 영상 — 본문 폭을 다 쓰면 화면을 통째로 잡아먹는다 */
.post-video { margin: clamp(2rem, 5vw, 3.2rem) auto; max-width: 360px; }
.post-video figcaption {
  margin-top: .9rem; font-size: .88rem; line-height: 1.7; color: var(--c-ink-soft);
}

/* 두 장을 나란히 — 청매실과 황매실처럼 차이를 한눈에 보여줄 때 */
.post-fig--pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.post-fig--pair figcaption { grid-column: 1 / -1; margin-top: 0; }