/* Plenty More — shared design system */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  --ivory:#F6F1E7;
  --ivory-soft:#FBF8F2;
  --ivory-deep:#EDE5D4;
  --ink:#221F1C;
  --ink-soft:#4A453F;
  --sage:#8B9A7C;
  --sage-dark:#66765A;
  --terracotta:#B9744C;
  --terracotta-dark:#93582F;
  --stone:#A9A49B;
  --line: rgba(34,31,28,.12);

  --shadow-sm: 0 1px 2px rgba(34,31,28,.07), 0 1px 1px rgba(34,31,28,.05);
  --shadow-md: 0 12px 28px -12px rgba(34,31,28,.22), 0 3px 10px -3px rgba(185,116,76,.14);
  --shadow-lg: 0 30px 60px -20px rgba(34,31,28,.30), 0 6px 20px -6px rgba(139,154,124,.20);

  --r-sm:8px; --r-md:16px; --r-lg:28px; --r-pill:999px;

  --ease-spring: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; } /* Lenis handles smoothing; avoid double-smoothing */
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--sage); color:var(--ivory-soft); }

/* Korean has no glyphs in Playfair Display, so display type defaults to the
   site's Korean font (Pretendard, same as the nav menu) and only switches to
   the serif pairing when the page is toggled to English. */
.font-display{ font-family:'Pretendard Variable','Pretendard',sans-serif; }
html[lang="en"] .font-display{ font-family:'Playfair Display', serif; }

h1,h2,h3,h4{ font-family:'Pretendard Variable','Pretendard',sans-serif; font-weight:600; letter-spacing:-0.02em; margin:0; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4{ font-family:'Playfair Display', serif; font-weight:400; }
h1{ letter-spacing:-0.03em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }

/* grain texture overlay */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background-color .5s var(--ease-spring), box-shadow .5s var(--ease-spring), padding .4s var(--ease-spring);
}
.site-header.is-scrolled{
  background:rgba(251,248,242,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow-sm);
  padding-top:12px; padding-bottom:12px;
}
.header-logo img{ height:60px; width:auto; transition:filter .4s var(--ease-spring); }
.hero-dark .site-header:not(.is-scrolled) .header-logo img{ filter:brightness(0) invert(1); }
.hero-dark .site-header:not(.is-scrolled) .nav-link,
.hero-dark .site-header:not(.is-scrolled) .lang-toggle button,
.hero-dark .site-header:not(.is-scrolled) .hamburger span{
  color:var(--ivory-soft);
}
.hero-dark .site-header:not(.is-scrolled) .hamburger span{ background:var(--ivory-soft); }

.nav-link{
  position:relative; font-size:20px; letter-spacing:.02em; color:var(--ink);
  padding:6px 2px;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .35s var(--ease-spring);
}
.nav-link:hover::after, .nav-link.is-active::after{ right:0; }
.nav-link.is-active{ font-weight:600; }

.lang-toggle{ display:flex; align-items:center; gap:2px; font-size:12px; letter-spacing:.03em; border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; }
.hero-dark .site-header:not(.is-scrolled) .lang-toggle{ border-color:rgba(251,248,242,.4); }
.lang-toggle button{ background:none; border:none; padding:5px 11px; border-radius:var(--r-pill); color:inherit; opacity:.55; transition:opacity .3s var(--ease-spring), background-color .3s var(--ease-spring); }
.lang-toggle button.is-active{ opacity:1; background:var(--ink); color:var(--ivory-soft); }
.hero-dark .site-header:not(.is-scrolled) .lang-toggle button.is-active{ background:var(--ivory-soft); color:var(--ink); }

.hamburger{ display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.hamburger span{ width:22px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease-spring), opacity .3s var(--ease-spring), background-color .3s; }
.hamburger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Keep in sync with Tailwind's default `md` breakpoint (768px) used by the
   `hidden md:flex` / `md:hidden` classes on the nav and hamburger markup. */
@media(min-width:768px){
  .hamburger{ display:none; }
}
@media(max-width:767.98px){
  .site-header nav{ display:none !important; }
}

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--ivory-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease-spring), transform .45s var(--ease-spring), visibility 0s linear .45s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .45s var(--ease-spring), transform .45s var(--ease-spring); }
.mobile-nav a{ font-family:'Pretendard Variable','Pretendard',sans-serif; font-weight:600; font-size:28px; }
html[lang="en"] .mobile-nav a{ font-family:'Playfair Display',serif; font-weight:400; }
.mobile-nav .lang-toggle{ margin-top:12px; }

/* ---------- Sections / reveal ---------- */
section{ position:relative; }
.section-pad{ padding:clamp(72px,10vw,140px) clamp(20px,5vw,56px); }
.container{ max-width:1200px; margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--terracotta-dark);
  font-weight:600; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--terracotta); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-spring), transform .9s var(--ease-spring); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1.is-visible{ transition-delay:.08s; }
.reveal-delay-2.is-visible{ transition-delay:.16s; }
.reveal-delay-3.is-visible{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--r-pill);
  font-size:14px; letter-spacing:.03em; font-weight:600;
  border:1px solid transparent;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), background-color .35s var(--ease-spring), color .35s var(--ease-spring);
}
.btn-primary{ background:var(--ink); color:var(--ivory-soft); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--terracotta-dark); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--ivory-soft); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; }

/* ---------- Hero ---------- */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--ink); }
.hero video, .hero img.hero-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); animation:hero-kenburns 16s var(--ease-spring) infinite alternate;
}
@keyframes hero-kenburns{ from{ transform:scale(1.08) translate3d(0,0,0); } to{ transform:scale(1.16) translate3d(-1%, -1%, 0); } }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(34,31,28,.35) 0%, rgba(34,31,28,.15) 38%, rgba(34,31,28,.55) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 50% 100%, rgba(34,31,28,.65), transparent 60%);
}
.hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ivory-soft); padding:0 20px; }
.hero-mark{ height:clamp(64px,10vw,110px); width:auto; filter:brightness(0) invert(1); margin-bottom:26px; opacity:.96; }
.hero-tagline{ font-size:clamp(15px,2vw,19px); letter-spacing:.02em; max-width:34em; opacity:.92; }
.hero-scrollcue{
  position:absolute; z-index:2; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ivory-soft); opacity:.85;
}
.hero-scrollcue span{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.hero-scrollcue .chevron{ width:1px; height:34px; background:linear-gradient(var(--ivory-soft), transparent); animation:cue-drop 1.8s ease-in-out infinite; }
@keyframes cue-drop{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0;} 40%{ transform:scaleY(1); transform-origin:top; opacity:1;} 60%{ transform:scaleY(1); transform-origin:bottom; opacity:1;} 100%{ transform:scaleY(0); transform-origin:bottom; opacity:0;} }

.page-hero{
  position:relative; height:min(58vh,460px); min-height:320px; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(34,31,28,.25), rgba(34,31,28,.72)), var(--ink);
  background-size:cover; background-position:center;
}
.page-hero .container{ padding-bottom:56px; color:var(--ivory-soft); width:100%; }

/* ---------- Intro / cards ---------- */
.surface{ background:var(--ivory-soft); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.surface-elevated{ background:var(--ivory-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }

.hours-card{
  padding:28px; border-radius:var(--r-md); background:var(--ivory-soft);
  border:1px solid var(--line);
  transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), border-color .4s var(--ease-spring);
}
.hours-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.hours-card .time{ font-family:'Playfair Display',serif; font-size:26px; color:var(--terracotta-dark); }

.contact-card{
  display:flex; align-items:center; gap:18px; padding:22px 26px; border-radius:var(--r-md);
  background:var(--ink); color:var(--ivory-soft);
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring);
}
.contact-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow-lg); }

.map-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.map-frame iframe{ width:100%; height:420px; border:0; display:block; filter:grayscale(.25) contrast(1.05); }

.copy-btn{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--sage-dark); border-bottom:1px dashed var(--sage-dark); padding-bottom:2px; }
.copy-btn.is-copied{ color:var(--terracotta-dark); border-color:var(--terracotta-dark); }

/* ---------- Menu ---------- */
.menu-card{
  background:var(--ivory-soft); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring);
}
.menu-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.menu-card .thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.menu-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-spring); }
.menu-card:hover .thumb img{ transform:scale(1.07); }
.menu-card .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(34,31,28,.35)); mix-blend-mode:multiply; }
.menu-card .body{ padding:20px 22px 24px; }
.menu-card .row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.menu-card .name{ font-family:'Pretendard Variable','Pretendard',sans-serif; font-weight:600; font-size:19px; }
html[lang="en"] .menu-card .name{ font-family:'Playfair Display',serif; font-weight:400; }
.menu-card .price{ white-space:nowrap; font-weight:600; color:var(--terracotta-dark); font-variant-numeric:tabular-nums; }
.menu-card .desc{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); }

.list-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:15px 4px; border-bottom:1px solid var(--line);
}
.list-row .dots{ flex:1; border-bottom:1px dotted var(--stone); transform:translateY(-6px); margin:0 4px; opacity:.7; }
.list-row .price{ font-variant-numeric:tabular-nums; color:var(--terracotta-dark); font-weight:600; white-space:nowrap; }
.list-group-title{ font-family:'Pretendard Variable','Pretendard',sans-serif; font-weight:600; font-size:22px; margin-bottom:6px; }
html[lang="en"] .list-group-title{ font-family:'Playfair Display',serif; font-weight:400; }

/* ---------- Private dining tabs / gallery ---------- */
.tabbar{ display:flex; flex-wrap:wrap; gap:10px; }
.tab-btn{
  padding:12px 22px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--ivory-soft);
  font-size:13.5px; letter-spacing:.02em; color:var(--ink-soft);
  transition:background-color .35s var(--ease-spring), color .35s var(--ease-spring), border-color .35s var(--ease-spring), transform .35s var(--ease-spring);
}
.tab-btn:hover{ transform:translateY(-2px); }
.tab-btn.is-active{ background:var(--ink); color:var(--ivory-soft); border-color:var(--ink); box-shadow:var(--shadow-sm); }

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

#tab-content{ transition:opacity .18s ease; }
#tab-content.is-loading{ opacity:.35; }

.course-title{
  font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-dark);
  font-weight:600; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.gallery{ columns:1; column-gap:16px; }
@media(min-width:640px){ .gallery{ columns:2; } }
@media(min-width:1024px){ .gallery{ columns:3; } }
.gallery figure{
  margin:0 0 16px; break-inside:avoid; border-radius:var(--r-md); overflow:hidden;
  position:relative; box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);
}
.gallery figure:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.gallery img, .gallery video{ width:100%; display:block; cursor:zoom-in; transition:transform .8s var(--ease-spring); }
.gallery figure:hover img{ transform:scale(1.045); }
.gallery figure .clip-badge{ position:absolute; top:10px; right:10px; background:rgba(34,31,28,.72); color:var(--ivory-soft); font-size:10px; letter-spacing:.14em; padding:5px 9px; border-radius:var(--r-pill); }

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(20,18,16,.92);
  display:flex; align-items:center; justify-content:center; padding:32px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease-spring), visibility 0s linear .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease-spring); }
.lightbox img, .lightbox video{ max-width:min(92vw,1100px); max-height:86vh; border-radius:var(--r-sm); box-shadow:var(--shadow-lg); }
.lightbox-close{ position:absolute; top:22px; right:26px; color:var(--ivory-soft); background:none; border:none; font-size:28px; line-height:1; padding:8px; opacity:.85; }
.lightbox-close:hover{ opacity:1; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--ivory-soft); }
.site-footer a:hover{ color:var(--sage); }
.footer-logo img{ height:60px; filter:brightness(0) invert(1); }

/* i18n */
[data-en]:not([lang="en"] [data-en]){ }
html[lang="en"] .i18n-ko-only{ display:none !important; }
html:not([lang="en"]) .i18n-en-only{ display:none !important; }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--ivory-soft); padding:12px 18px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }