/* =========================================================
   KEID · 성북동 한옥 스페셜티 카페
   quiet-luxury editorial — hanji white + warm wood + celadon
   v2: typography scale, hanji grain, star motif thread,
       fine-dining menu, staggered motion
   ========================================================= */

:root {
  /* color */
  --paper:   #F7F3EC;  /* hanji / plaster white */
  --paper-g: #F0F1EA;  /* celadon-tinted paper (gallery) */
  --cream:   #EFE7DA;
  --cream-2: #EAE0D0;
  --ink:     #2B241D;
  --ink-soft:#4A4136;
  --wood:    #A9814E;
  --wood-d:  #8A6839;
  --celadon: #7C9A86;
  --dusty:   #9FB0C4;
  --line:    #E0D6C6;
  --muted:   #6E6558;
  --star:    #EAD9BD;

  /* type */
  --serif-ko: "Nanum Myeongjo", serif;
  --serif-en: "Cormorant Garamond", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* type scale (body family) */
  --fs-2xs: .72rem;
  --fs-xs:  .8rem;
  --fs-sm:  .875rem;
  --fs-base:.95rem;
  --fs-md:  1.05rem;

  /* micro labels — 2-step system */
  --label-lg-size: .78rem;  --label-lg-track: .34em;
  --label-sm-size: .7rem;   --label-sm-track: .22em;

  /* vertical rhythm — chapter vs. section breath */
  --sp-major: clamp(6rem, 13vw, 10.5rem);
  --sp-minor: clamp(4rem, 8vw, 6.5rem);

  --wrap: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 4.5rem; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
  overflow-x: hidden;
}

/* hanji grain — one fixed sheet of paper over everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 2000;
  pointer-events: none; opacity: .4; mix-blend-mode: multiply;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.05"/></svg>');
}

body.menu-lock { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(124,154,134,.3); color: var(--ink); }
:focus-visible { outline: 1px solid var(--wood); outline-offset: 3px; border-radius: 2px; }

/* ---- micro label system ---- */
.eyebrow {
  font-family: var(--serif-en);
  font-size: var(--label-lg-size);
  letter-spacing: var(--label-lg-track);
  text-indent: var(--label-lg-track);   /* optical centering */
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 1.5rem;
}
/* four-point star flanking section eyebrows — the Keid motif thread */
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  background: currentColor; vertical-align: middle; margin: -2px 1em 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: .65;
}

h2 {
  font-family: var(--serif-ko);
  font-weight: 400;                      /* big type goes light */
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.3;
  letter-spacing: .005em;
  text-wrap: balance;
}

/* ---- reveal-on-scroll (stagger via --d) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; transition-delay: 0s; will-change: auto; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand {
  font-family: var(--serif-en);
  font-size: 1.6rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--paper); transition: color .5s var(--ease);
}
.nav__links { display: flex; gap: 2.1rem; align-items: center; }
.nav__links a {
  font-family: var(--serif-en);
  font-size: .92rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper);
  opacity: .9; transition: color .5s var(--ease), opacity .3s;
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .35s var(--ease);
}
.nav__links a.active::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__ig {
  border: 1px solid rgba(247,243,236,.5); border-radius: 2px;
  padding: 0.4rem 1rem !important;
}
.nav__ig::after { display: none; }

.nav.scrolled {
  background: rgba(247,243,236,.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav.scrolled .nav__brand,
.nav.scrolled .nav__links a { color: var(--ink); }
.nav.scrolled .nav__ig { border-color: var(--line); }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 6px;
}
.nav__toggle span {
  width: 24px; height: 1.5px; background: var(--paper);
  transition: transform .4s var(--ease), opacity .3s, background .5s;
}
.nav.scrolled .nav__toggle span { background: var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 6vh;
  text-align: center; overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(169,129,78,.20), transparent 55%),
    linear-gradient(180deg, #3a3227 0%, #4a3f31 45%, #5b4c39 100%);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg .ph-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* bottom-weighted scrim — let the courtyard evening light live */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,13,8,.42) 0%, rgba(18,13,8,.22) 38%, rgba(18,13,8,.34) 68%, rgba(18,13,8,.88) 100%),
    radial-gradient(58% 46% at 50% 46%, rgba(10,7,4,.35), transparent 100%);
}
.hero__bg.failed { display: none; }
.ph-img.failed { display: none; }

.hero__inner { position: relative; z-index: 2; padding: 0 1.5rem; }
.hero__inner > * { text-shadow: 0 1px 24px rgba(0,0,0,.5); }

/* constellation mark above the wordmark */
.hero__mark {
  display: block; width: clamp(116px, 20vw, 168px); height: auto;
  margin: 0 auto 2rem; color: var(--star);
}
.hero__mark-line { stroke: currentColor; stroke-width: .7; fill: none; opacity: .5; stroke-dasharray: 3 4; }
.hero__mark-dot circle { fill: currentColor; }
.hero__mark-dot .is-keid { animation: twinkle 3.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes twinkle {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

.hero__eyebrow {
  font-family: var(--serif-en);
  font-size: var(--label-lg-size); letter-spacing: 0.42em; text-indent: 0.42em;
  opacity: .85; margin-bottom: 1.5rem;
}
.hero__logo {
  font-family: var(--serif-en); font-weight: 300;
  font-size: clamp(4.5rem, 17vw, 11rem); line-height: .9;
  letter-spacing: 0.06em; padding-left: 0.06em;   /* optical centering */
  margin-bottom: .5rem;
}
.hero__ko {
  font-family: var(--serif-ko); font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: 0.5em; text-indent: 0.5em; margin-bottom: 2.5rem; opacity: .9;
}
.hero__tagline {
  font-family: var(--serif-ko); font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  font-weight: 400; opacity: .95; margin-bottom: 3rem;
}
/* editorial underline CTA — no pill */
.hero__cta {
  display: inline-block;
  font-size: .85rem; letter-spacing: .3em; text-indent: .3em;
  padding: .45rem .15rem;
  border-bottom: 1px solid rgba(247,243,236,.55);
  transition: border-color .4s var(--ease), letter-spacing .5s var(--ease), transform .2s var(--ease);
}
.hero__cta:active { transform: scale(.97); }

.hero__roof {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: clamp(70px, 9vw, 120px);
  z-index: 1;
}
.hero__roof path { fill: var(--paper); }
.roof__ridge { stroke: rgba(169,129,78,.35); stroke-width: 1.5; }

.hero__scroll {
  position: absolute; bottom: clamp(1.4rem, 4vw, 2.4rem); left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--serif-en); font-size: var(--label-sm-size); letter-spacing: .3em; text-indent: .3em;
  color: var(--ink); opacity: .55;
}
.hero__scroll em { width: 1px; height: 34px; background: var(--ink); position: relative; overflow: hidden; }
.hero__scroll em::after {
  content: ""; position: absolute; top: -34px; left: 0; width: 100%; height: 34px;
  background: var(--wood); animation: scrolldot 2s var(--ease) infinite;
}
@keyframes scrolldot { 0% { top: -34px; } 60%,100% { top: 34px; } }

/* hero load-in sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero__bg .ph-img { transform: scale(1.06); transition: transform 2.6s var(--ease); }
  .is-loaded .hero__bg .ph-img { transform: none; }
  .hero__mark, .hero__eyebrow, .hero__logo, .hero__ko, .hero__tagline, .hero__cta {
    opacity: 0; transform: translateY(16px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .is-loaded .hero__mark    { opacity: 1; transform: none; transition-delay: .15s; }
  .is-loaded .hero__eyebrow { opacity: .85; transform: none; transition-delay: .3s; }
  .is-loaded .hero__logo    { opacity: 1; transform: none; transition-delay: .45s; }
  .is-loaded .hero__ko      { opacity: .9; transform: none; transition-delay: .62s; }
  .is-loaded .hero__tagline { opacity: .95; transform: none; transition-delay: .8s; }
  .is-loaded .hero__cta     { opacity: 1; transform: none; transition-delay: 1s; }
}

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  padding: var(--sp-minor) 1.5rem;
  text-align: center;
}
.intro::before {
  content: ""; display: block; width: 1px;
  height: clamp(3rem, 6vw, 4.5rem);
  background: var(--wood); opacity: .4;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.intro__lead {
  font-family: var(--serif-ko); font-weight: 400;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem); line-height: 2.15;
  max-width: 780px; margin: 0 auto; color: var(--ink);
}
.intro__lead span {
  display: inline-block; margin-top: 1.4rem;
  font-family: var(--serif-en); font-size: clamp(.9rem, 2vw, 1.05rem);
  letter-spacing: .12em; color: var(--wood);
}

/* =========================================================
   STORY
   ========================================================= */
.story { background: var(--cream); padding: var(--sp-major) 1.5rem; }
.story__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.story__art { display: flex; flex-direction: column; align-items: center; color: var(--celadon); }
.story__art svg { width: min(100%, 340px); }
.shell-shadow { fill: var(--wood-d); opacity: .08; }
.shell {
  fill: var(--paper); stroke: var(--wood-d); stroke-width: 1.4;
  stroke-linejoin: round; opacity: .92;
}
.shell-inner { fill: none; stroke: var(--cream-2); stroke-width: 2; opacity: .9; }
.shell--top { transform-origin: 233px 97px; transform-box: view-box; animation: shell-drift 5.5s ease-in-out infinite; }
@keyframes shell-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2px, -5px) rotate(2deg); }
}
.halo { fill: var(--celadon); opacity: .1; }
.sparkle { fill: var(--celadon); opacity: .85; animation: sparkle-glow 3.5s ease-in-out infinite; transform-origin: 158px 118px; transform-box: view-box; }
@keyframes sparkle-glow {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.05); }
}
.chip path { fill: none; stroke: var(--wood); stroke-width: 1; stroke-linejoin: round; opacity: .6; }
/* run brand animation only while in view */
.story__art .shell--top, .story__art .sparkle { animation-play-state: paused; }
.story__art.in .shell--top, .story__art.in .sparkle { animation-play-state: running; }
.art-cap {
  font-family: var(--serif-en); font-style: italic; font-size: var(--fs-xs);
  letter-spacing: .08em; color: var(--muted); margin-top: 1.4rem;
}

.story__text h2 { margin-bottom: 1.8rem; }
.story__text p { color: var(--ink-soft); margin-bottom: 1.2rem; max-width: 46ch; }
.story__text em {
  font-family: var(--serif-ko); font-style: normal; color: var(--wood-d);
  border-bottom: 1px solid rgba(169,129,78,.45); padding-bottom: 2px;
}

/* =========================================================
   FEATURES
   ========================================================= */
.features { padding: var(--sp-minor) 1.5rem; }
.features__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.feature {
  background: var(--paper); padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2.5vw, 2rem);
  min-height: 260px; display: flex; flex-direction: column;
  transition: background .5s var(--ease),
              opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
.feature__no {
  font-family: var(--serif-en); font-size: .95rem; color: var(--wood);
  letter-spacing: .14em; margin-bottom: auto;
}
.feature__no::before { content: "N° "; font-style: italic; font-size: .85em; opacity: .65; }
.feature h3 {
  font-family: var(--serif-ko); font-weight: 700; font-size: 1.25rem;
  line-height: 1.45; margin: 1.6rem 0 .9rem;
}
.feature p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }

/* =========================================================
   SPACE
   ========================================================= */
.space { background: var(--cream); padding: var(--sp-major) 1.5rem; }
.section-head { max-width: var(--wrap); margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.section-sub { color: var(--muted); margin-top: 1.2rem; font-size: var(--fs-base); }

.space__rows { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); }
.space__row {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.space__row .space__caption { --d: .18s; }
.space__row--rev .space__photo { order: 2; }
.space__row--rev .space__caption { order: 1; }

.space__photo {
  position: relative; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.space__photo::after {
  content: attr(data-label);
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  font-family: var(--serif-en); font-size: var(--label-sm-size); letter-spacing: var(--label-sm-track);
  color: var(--paper); background: rgba(76,102,86,.55);
  padding: .35rem .8rem .3rem .95rem; border-radius: 2px;
  backdrop-filter: blur(4px);
}
.space__photo .ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
}
.space__photo .ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
  background:
    repeating-linear-gradient(45deg, rgba(169,129,78,.05) 0 12px, transparent 12px 24px),
    var(--cream-2);
  border: 1px dashed var(--wood); color: var(--wood-d);
}
.space__photo .ph span { font-family: var(--serif-en); font-size: 2.4rem; letter-spacing: .1em; opacity: .55; }
.space__photo .ph small { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; }

.space__caption .floor {
  font-family: var(--serif-en); letter-spacing: var(--label-lg-track); text-transform: uppercase;
  font-size: var(--label-sm-size);
  color: var(--celadon); margin-bottom: 1rem;
}
.space__caption h3 {
  font-family: var(--serif-ko); font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 1.1rem;
}
.space__caption p { color: var(--ink-soft); max-width: 42ch; }

/* =========================================================
   MENU — fine-dining sheet
   ========================================================= */
.menu { padding: var(--sp-minor) 1.5rem; }
.menu__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem);
}
.mitem {
  border-top: 1px solid var(--line); padding: 1.7rem .2rem 1.5rem;
  display: flex; flex-direction: column; position: relative;
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
/* hover: line grows from the left */
.mitem::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--wood);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}
.mitem__top { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem; }
.mitem__top h3 { font-family: var(--serif-ko); font-weight: 700; font-size: 1.15rem; }
.mitem__leader {
  flex: 1; min-width: 1.5rem;
  border-bottom: 1px dotted rgba(169,129,78,.35);
  transform: translateY(-.3em);
}
.mitem__price {
  font-family: var(--serif-en); font-size: 1.02rem; color: var(--wood-d);
  white-space: nowrap; letter-spacing: .04em;
  font-variant-numeric: oldstyle-nums proportional-nums;
  transition: color .4s;
}
.mitem__price::before { content: "₩"; font-size: .68em; opacity: .5; margin-right: .12em; vertical-align: .14em; }
.mitem__desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; margin-bottom: 1rem; flex-grow: 1; }
.tag {
  align-self: flex-start; font-size: var(--fs-2xs); letter-spacing: .04em;
  padding: .3rem .65rem; border-radius: 2px; border: 1px solid var(--line); color: var(--muted);
}
.tag--sig  { border-color: var(--wood);    color: var(--wood-d);  background: rgba(169,129,78,.06); }
.tag--best { border-color: var(--wood-d);  color: var(--wood-d);  background: rgba(138,104,57,.09); }
.tag--veg  { border-color: var(--celadon); color: #4f6b57; background: rgba(124,154,134,.12); }
.tag--gf   { border-color: var(--dusty);   color: #5a6c80; background: rgba(159,176,196,.14); }
.tag--oat  { border-color: var(--celadon); color: #4f6b57; }
.menu__note {
  max-width: var(--wrap); margin: 3.5rem auto 0; text-align: center;
  font-size: var(--fs-sm); color: var(--muted);
}
.menu__note::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  background: var(--celadon); vertical-align: middle; margin: -2px .7em 0 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: .8;
}

/* =========================================================
   BOTTLED — 병입 제품 주문 안내
   ========================================================= */
.bottled { background: var(--cream); padding: var(--sp-minor) 1.5rem; }
.bottled__grid {
  max-width: 880px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.bottle {
  background: var(--cream); padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.4rem, 2.5vw, 2rem);
  text-align: center; display: flex; flex-direction: column; align-items: center;
  transition: background .5s var(--ease),
              opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}
.bottle__icon { color: var(--wood-d); opacity: .75; margin-bottom: 1.2rem; }
.bottle__icon svg { display: block; width: 30px; height: 46px; }
.bottle h3 { font-family: var(--serif-ko); font-weight: 700; font-size: 1.05rem; margin-bottom: .35rem; }
.bottle__size { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; margin-bottom: .9rem; }
.bottle__price {
  font-family: var(--serif-en); font-size: 1.25rem; color: var(--wood-d);
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.bottle__price::before { content: "₩"; font-size: .68em; opacity: .5; margin-right: .12em; vertical-align: .14em; }
.bottled__order {
  max-width: 880px; margin: 2.2rem auto 0; text-align: center;
  font-size: var(--fs-base); color: var(--ink-soft);
}
.bottled__order a { border-bottom: 1px solid rgba(169,129,78,.45); padding-bottom: 1px; color: var(--wood-d); }
.bottled__note { max-width: 880px; margin: .8rem auto 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); }

/* =========================================================
   CLASS — 원데이 핸드드립 클래스
   ========================================================= */
.class { padding: var(--sp-major) 1.5rem; }
.class__inner {
  max-width: 880px; margin: 0 auto; text-align: center;
}
.class__inner .eyebrow { color: var(--celadon); }
.class__inner .eyebrow::before, .class__inner .eyebrow::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  background: currentColor; vertical-align: middle; margin: -2px 1em 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: .65;
}
.class__inner h2 { margin-bottom: 1.6rem; }
.class__lead { color: var(--ink-soft); max-width: 56ch; margin: 0 auto 3rem; }
.class__facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.8rem 0; margin-bottom: 2.6rem;
}
.class__facts > div + div { border-left: 1px solid var(--line); }
.class__facts dt {
  font-family: var(--serif-en); font-size: var(--label-sm-size);
  letter-spacing: var(--label-sm-track); text-transform: uppercase;
  color: var(--wood); margin-bottom: .5rem;
}
.class__facts dd { font-size: var(--fs-base); color: var(--ink); }
.class__cta { font-size: var(--fs-base); color: var(--ink-soft); }
.class__cta a { border-bottom: 1px solid rgba(169,129,78,.45); padding-bottom: 1px; color: var(--wood-d); }
.class__note { margin-top: .8rem; font-size: var(--fs-xs); color: var(--muted); }

/* =========================================================
   JOURNAL TEASER — two loose diary pages
   ========================================================= */
.jteaser { background: var(--cream); padding: var(--sp-minor) 1.5rem; }
.jteaser__grid {
  max-width: 880px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem);
}
.jcard {
  position: relative; display: block;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 1.7rem 1.6rem 1.4rem;
  box-shadow: 0 1px 0 rgba(43,36,29,.04), 0 10px 24px -18px rgba(43,36,29,.26);
  transform: rotate(-.4deg);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease),
              opacity 1s var(--ease) var(--d, 0s);
}
.jcard:nth-child(even) { transform: rotate(.35deg); }
.jcard__date { display: block; margin-bottom: .9rem; }
.jcard__date b {
  font-family: var(--serif-en); font-weight: 300; font-size: 2rem; line-height: 1;
  color: var(--ink); font-variant-numeric: oldstyle-nums; margin-right: .55rem;
}
.jcard__date i {
  font-style: normal; font-family: var(--serif-en);
  font-size: var(--label-sm-size); letter-spacing: var(--label-sm-track);
  text-transform: uppercase; color: var(--muted);
}
.jcard__stamp {
  position: absolute; top: 1.15rem; right: 1.2rem;
  width: 46px; height: 46px; border: 1.5px dashed rgba(169,129,78,.5); border-radius: 50%;
  display: grid; place-items: center; transform: rotate(-8deg);
  font-family: "Nanum Pen Script", cursive; font-size: .95rem; color: var(--wood-d);
}
.jcard__title {
  display: block; font-family: var(--serif-ko); font-weight: 700; font-size: 1.12rem;
  margin-bottom: .55rem;
}
.jcard__excerpt {
  display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jcard__pen {
  display: block; margin-top: .9rem; text-align: right;
  font-family: "Nanum Pen Script", cursive; font-size: 1.15rem; color: var(--wood-d);
}
.jteaser__more { text-align: center; margin-top: 2.4rem; }
.jteaser__more a {
  font-family: var(--serif-en); letter-spacing: .18em; text-transform: uppercase;
  font-size: .85rem; color: var(--wood-d);
  border-bottom: 1px solid rgba(169,129,78,.45); padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .jcard:hover { transform: rotate(0deg); box-shadow: 0 1px 0 rgba(43,36,29,.04), 0 14px 28px -18px rgba(43,36,29,.32); }
}
@media (max-width: 720px) {
  .jteaser__grid { grid-template-columns: 1fr; max-width: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .jcard, .jcard:nth-child(even) { transform: none; }
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery { background: var(--paper-g); padding: var(--sp-minor) 1.5rem; }
.gallery__grid {
  max-width: var(--wrap); margin: 0 auto;
  column-count: 4; column-gap: clamp(.6rem, 1.4vw, 1rem);
}
.gallery__item {
  margin: 0 0 clamp(.6rem, 1.4vw, 1rem); overflow: hidden; border-radius: 2px;
  background: var(--cream-2); break-inside: avoid;
  border: 1px solid var(--line);
}
.gallery__item img {
  width: 100%; height: auto; display: block;
  opacity: 0;
  transition: opacity .8s var(--ease), transform 1.8s var(--ease), filter 1.2s var(--ease);
}
.gallery__item img.loaded { opacity: 1; }
.gallery__credit {
  max-width: var(--wrap); margin: 2rem auto 0; text-align: center;
  font-size: var(--fs-xs); color: var(--muted);
}
.gallery__credit a { color: var(--wood-d); border-bottom: 1px solid var(--line); padding-bottom: 1px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--paper-g); padding: 0 1.5rem var(--sp-minor); }
.faq__list { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.4rem .2rem;
  font-family: var(--serif-ko); font-weight: 700; font-size: 1.02rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--serif-en); font-weight: 400;
  font-size: 1.3rem; color: var(--wood); line-height: 1;
  transition: transform .4s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  padding: 0 .2rem 1.5rem; font-size: var(--fs-base);
  color: var(--ink-soft); max-width: 60ch;
}

/* =========================================================
   VISIT — night hanok
   ========================================================= */
.visit {
  position: relative;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(124,154,134,.10), transparent 55%),
    radial-gradient(80% 60% at 90% 100%, rgba(169,129,78,.09), transparent 60%),
    #262019;
  color: var(--paper);
  padding: 0 1.5rem var(--sp-major);
}
/* inverted roofline — eaves against the night sky (bookend with hero) */
.visit__roof {
  display: block; width: calc(100% + 3rem); margin: 0 -1.5rem;
  height: clamp(60px, 8vw, 100px);
  transform: scaleY(-1);
}
.visit__roof path { fill: var(--paper-g); }
.visit__inner {
  max-width: var(--wrap); margin: clamp(3rem, 7vw, 5rem) auto 0;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.visit .eyebrow { color: var(--wood); }
.visit__intro h2 { color: var(--paper); margin-bottom: 2rem; }
.visit__addr { font-family: var(--serif-ko); font-size: 1.3rem; line-height: 1.7; margin-bottom: 1.6rem; }
.visit__addr span { font-size: var(--fs-base); opacity: .55; letter-spacing: .02em; font-family: var(--sans); }
.visit__map {
  font-family: var(--serif-en); letter-spacing: .06em; font-size: 1rem;
  border-bottom: 1px solid var(--wood); padding-bottom: 3px; color: #e6d5b8;
  transition: color .3s, border-color .3s;
}

.visit__info { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 2.5rem; }
.visit__info > div { border-top: 1px solid rgba(247,243,236,.18); padding-top: 1.1rem; }
.visit__info dt {
  font-family: var(--serif-en); letter-spacing: var(--label-sm-track); text-transform: uppercase;
  font-size: var(--label-sm-size); color: var(--wood); margin-bottom: .6rem;
}
.visit__info dd { font-size: var(--fs-base); line-height: 1.6; letter-spacing: .01em; opacity: .92; }
.visit__info dd small { color: rgba(247,243,236,.55); font-size: var(--fs-xs); }
.visit__info dd a { border-bottom: 1px solid rgba(247,243,236,.4); padding-bottom: 1px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: #262019; color: var(--paper); padding: 0 1.5rem 3rem; }
.footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 3rem 0;
  border-top: 1px solid rgba(247,243,236,.14);
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem;
}
.footer__mark { width: 110px; height: auto; color: var(--star); opacity: .4; margin-bottom: 1rem; }
.footer__mark .hero__mark-line { stroke-dasharray: 3 4; }
.footer__logo { font-family: var(--serif-en); font-size: 2rem; font-weight: 500; letter-spacing: .16em; }
.footer__ko { font-size: var(--fs-xs); opacity: .6; margin-top: .4rem; letter-spacing: .04em; }
.footer__links { display: flex; flex-direction: column; gap: .7rem; text-align: right; }
.footer__links a { font-size: var(--fs-sm); opacity: .8; transition: opacity .3s; }
.footer__biz {
  max-width: var(--wrap); margin: 1.8rem auto 0; text-align: center;
  font-size: .75rem; opacity: .45; letter-spacing: .02em;
}
.footer__copy {
  max-width: var(--wrap); margin: .6rem auto 0; text-align: center;
  font-family: var(--serif-en); font-size: var(--fs-2xs); letter-spacing: .1em; opacity: .4;
}

/* =========================================================
   HOVER (pointer devices only)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .hero__cta:hover { border-color: var(--paper); letter-spacing: .34em; }
  .feature:hover { background: var(--cream); }
  .mitem:hover::before { transform: scaleX(1); }
  .mitem:hover .mitem__price { color: var(--wood); }
  .bottle:hover { background: var(--cream-2); }
  .gallery__item:hover img { transform: scale(1.015); filter: brightness(1.04) saturate(1.03); }
  .gallery__item:focus-within img { transform: scale(1.015); }
  .visit__map:hover { color: var(--paper); border-color: var(--paper); }
  .footer__links a:hover { opacity: 1; }
}
@media (hover: none) {
  .gallery__item:active img { transform: scale(.985); transition-duration: .25s; }
  .mitem:active::before { transform: scaleX(1); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: 3rem; }
  .story__art { order: 2; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .feature { min-height: 220px; }
  .menu__grid { grid-template-columns: repeat(2, 1fr); }
  .bottled__grid { grid-template-columns: 1fr; max-width: 480px; }
  .bottle { flex-direction: row; text-align: left; gap: 1.3rem; align-items: center; }
  .bottle__icon { margin-bottom: 0; }
  .bottle__body { flex: 1; }
  .class__facts { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 0; }
  .class__facts > div:nth-child(3) { border-left: 0; }
  .gallery__grid { column-count: 3; }
  .visit__inner { grid-template-columns: 1fr; gap: 3rem; }
  .space__row, .space__row--rev { grid-template-columns: 1fr; gap: 1.6rem; }
  .space__row--rev .space__photo,
  .space__row--rev .space__caption { order: 0; }
}

@media (max-width: 640px) {
  .nav__links {
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column;
    background: rgba(43,36,29,.97); backdrop-filter: blur(8px);
    padding: 6rem 2rem 2.5rem; gap: 1.6rem; align-items: flex-start;
    transform: translateY(-100%); transition: transform .5s var(--ease);
    height: 100vh; height: 100svh;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a {
    color: var(--paper) !important; font-size: 1.3rem; font-family: var(--serif-ko);
    letter-spacing: .1em; text-transform: none;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
  }
  .nav__links.open a { opacity: 1; transform: none; }
  .nav__links.open a:nth-child(1) { transition-delay: .14s; }
  .nav__links.open a:nth-child(2) { transition-delay: .19s; }
  .nav__links.open a:nth-child(3) { transition-delay: .24s; }
  .nav__links.open a:nth-child(4) { transition-delay: .29s; }
  .nav__links.open a:nth-child(5) { transition-delay: .34s; }
  .nav__links.open a:nth-child(6) { transition-delay: .39s; }
  .nav__links.open a:nth-child(7) { transition-delay: .44s; }
  .nav__links.open a:nth-child(8) { transition-delay: .49s; }
  .nav__ig { border-color: rgba(247,243,236,.4) !important; }
  .nav__toggle { display: flex; z-index: 101; }
  .nav.menu-open .nav__toggle span { background: var(--paper); }
  .nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .features__grid { grid-template-columns: 1fr; }
  .menu__grid { grid-template-columns: 1fr; }
  .gallery__grid { column-count: 2; }
  .class__facts { grid-template-columns: 1fr 1fr; }
  .visit__info { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__links { text-align: left; }
  .intro__lead { line-height: 1.9; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__mark-dot .is-keid { animation: none; opacity: 1; }
  .hero__scroll em::after { animation: none; }
  .shell--top, .sparkle { animation: none; }
  .gallery__item img { opacity: 1; transition: none; }
  .gallery__item img, .gallery__item:hover img { transform: none !important; filter: none !important; }
  .nav__links { transition: none; }
  .nav__links a { transition: none; }
}