/* =========================================================
   NOLSK — Homepage styles
   Design system derived from the official NOLSK leaflet
   Palette: deep chocolate-maroon + warm cream, flavor accents
   ========================================================= */

:root{
  /* brand */
  --maroon:      #6A1812;   /* primary */
  --maroon-deep: #4E0F0B;
  --cocoa:       #360A07;   /* deepest bg */
  --red:         #C6392A;   /* NOLSK wordmark red / accent */
  --cream:       #FAECE3;   /* warm cream panels */
  --cream-2:     #F4DDCD;
  --paper:       #FFFFFF;
  --ink:         #2A0E0A;   /* body text on light */
  --muted:       #8A6f68;

  /* flavor accents */
  --choco:  #D2A143;
  --straw:  #E793AB;
  --matcha: #6E8A3C;

  /* type */
  --f-display: "Montserrat", "Noto Sans KR", sans-serif;
  --f-body:    "Noto Sans KR", "Montserrat", sans-serif;

  --wrap: 1180px;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(54,10,7,.16);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:min(var(--wrap), 90vw); margin-inline:auto; }
section{ position:relative; }

h1,h2,h3,.display{ font-family:var(--f-display); line-height:1.08; letter-spacing:-.01em; }

/* ---------- utility ---------- */
.eyebrow{
  font-family:var(--f-display); font-weight:800; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-display); font-weight:800; font-size:.98rem;
  padding:.85em 1.6em; border-radius:999px; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(198,57,42,.35); }
.btn-primary:hover{ background:#b0301f; }
.btn-cream{ background:var(--cream); color:var(--maroon); }
.btn-outline{ border-color:currentColor; color:var(--cream); }
.btn-outline:hover{ background:var(--cream); color:var(--maroon); }

/* ---------- chocolate-drip divider (from leaflet motif) ---------- */
.drip{ display:block; width:100%; height:52px; }
.drip path{ fill:var(--maroon); }

/* polka dot texture */
.dots{
  background-image:radial-gradient(var(--maroon) 2.4px, transparent 2.6px);
  background-size:26px 26px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(106,24,18,.0); transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled{ background:var(--maroon); box-shadow:0 8px 30px rgba(54,10,7,.25); padding-top:.5rem; padding-bottom:.5rem; }
.brand{ font-family:var(--f-display); font-weight:900; font-size:1.5rem; letter-spacing:.02em; color:#fff; }
.brand span{ color:var(--cream); }
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a.navlink{ font-family:var(--f-display); font-weight:700; font-size:.95rem; color:#fff; opacity:.9; }
.nav a.navlink:hover{ opacity:1; color:var(--cream); }
.header-tools{ display:flex; align-items:center; gap:.8rem; }
.lang-toggle{
  display:flex; border:1.5px solid rgba(255,255,255,.55); border-radius:999px; overflow:hidden; font-family:var(--f-display); font-weight:800; font-size:.8rem;
}
.lang-toggle button{ background:transparent; color:#fff; border:0; padding:.35em .8em; cursor:pointer; }
.lang-toggle button.active{ background:var(--cream); color:var(--maroon); }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; }
.menu-btn span{ display:block; width:26px; height:2.5px; background:#fff; margin:5px 0; border-radius:2px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; background:var(--maroon); color:#fff; padding:8.5rem 0 0;
  overflow:hidden;
}
.hero::before{  /* soft glow */
  content:""; position:absolute; top:-20%; right:-10%; width:60vw; height:60vw;
  background:radial-gradient(circle, rgba(214,161,67,.22), transparent 62%); pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:1.5rem; align-items:center; }
.hero-copy .pill{
  display:inline-block; background:rgba(250,236,227,.14); border:1px solid rgba(250,236,227,.35);
  color:var(--cream); font-family:var(--f-display); font-weight:700; font-size:.82rem;
  padding:.4em 1em; border-radius:999px; margin-bottom:1.3rem; letter-spacing:.02em;
}
.hero h1{ font-weight:900; font-size:clamp(2.7rem,6.4vw,5rem); color:#fff; }
.hero h1 .accent{ color:var(--choco); }
.hero .lead{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--cream); margin:1.1rem 0 .3rem; font-weight:500; }
.hero .sub{ color:rgba(250,236,227,.8); margin-bottom:2rem; }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.hero-visual{ position:relative; display:grid; place-items:center; min-height:440px; }
.hero-visual .plate{
  position:absolute; width:min(540px,92%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(250,236,227,.18), rgba(250,236,227,0) 70%);
}
.hero-visual img{
  position:relative; width:min(650px,105%); filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));
  animation:float 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
.hero-tags{ display:flex; gap:.6rem; margin-top:1.4rem; flex-wrap:wrap; }
.hero-tags .tagchip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-display); font-weight:700; font-size:.78rem; color:var(--cream);
  background:rgba(0,0,0,.18); padding:.42em .95em; border-radius:999px;
}
.hero-tags .ti{ width:16px; height:16px; color:var(--choco); flex:none; }

/* =========================================================
   STORY (Jeong 情)
   ========================================================= */
.story{ background:var(--cream); padding:0; }
.story-inner{ display:grid; grid-template-columns:1fr 1.05fr; align-items:stretch; }
.story-photo{ position:relative; min-height:100%; }
.story-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* large ivory 情 to the right of the intro copy (tone-on-tone watermark) */
.story-copy{ position:relative; overflow:hidden; }
.jeong-mark{
  position:absolute; right:clamp(-16px,-1vw,24px); top:50%; transform:translateY(-50%);
  font-family:"Noto Sans KR",var(--f-display); font-weight:900; line-height:1;
  font-size:clamp(130px,16vw,260px);
  color:#efdccc;                       /* 미색 — warm ivory, a touch deeper than the cream bg */
  z-index:0; pointer-events:none; user-select:none;
}
.story-copy > *:not(.jeong-mark){ position:relative; z-index:1; }
.story-copy{ padding:clamp(2.5rem,5vw,5rem); align-self:center; }
.story h2{ font-weight:900; font-size:clamp(1.9rem,3.4vw,2.8rem); color:var(--maroon); margin:.5rem 0 1rem; }
.story .quote{ font-family:var(--f-display); font-weight:800; font-size:1.35rem; color:var(--red); margin-bottom:1rem; }
.story p{ color:#5b3a33; margin-bottom:1rem; max-width:52ch; }

/* =========================================================
   FEATURES
   ========================================================= */
.features{ background:var(--paper); padding:5.5rem 0 0; position:relative; overflow:hidden; }
/* baker Dakkumi rising from the bottom, fading naturally into the section */
.dakkumi-feature{
  display:block; margin:3.5rem 0 0; width:100%; height:auto;   /* full 16:9 scene, natural ratio — no crop, no stretch */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 26%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 26%);
  pointer-events:none; user-select:none;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-head h2{ font-weight:900; font-size:clamp(1.9rem,3.6vw,2.9rem); color:var(--maroon); margin-top:.5rem; }
/* keep these two headings on a single line (wrap only on narrow screens) */
.features .section-head h2,
.showcase .section-head h2{ white-space:nowrap; }
@media (max-width:720px){
  .features .section-head h2,
  .showcase .section-head h2{ white-space:normal; }
}
.feature-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.fcard{
  background:var(--cream); border-radius:var(--radius); padding:2.2rem 1.8rem; text-align:center;
  border:1px solid var(--cream-2); transition:transform .2s ease, box-shadow .2s ease;
}
.fcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.fcard .num{
  width:56px; height:56px; margin:0 auto 1.1rem; border-radius:50%; background:var(--maroon); color:var(--cream);
  display:grid; place-items:center; font-family:var(--f-display); font-weight:900; font-size:1.5rem;
}
.fcard h3{ color:var(--maroon); font-weight:800; font-size:1.25rem; margin-bottom:.6rem; }
.fcard p{ color:#6a4b44; font-size:.97rem; }

/* =========================================================
   FLAVORS
   ========================================================= */
.flavors{ background:var(--maroon); color:#fff; padding:6rem 0; overflow:hidden; }
.flavors .section-head h2{ color:#fff; }
.flavors .section-head .eyebrow{ color:var(--choco); }
.specs{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.specs span{ font-family:var(--f-display); font-weight:700; font-size:.85rem; color:var(--cream); opacity:.85; }
.specs span::before{ content:"●"; color:var(--choco); margin-right:.5em; font-size:.6em; vertical-align:middle; }
.flavor-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.6rem; }
.flcard{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  border:1px solid rgba(250,236,227,.14); border-radius:var(--radius); padding:2rem 1.6rem 2.2rem;
  text-align:center; position:relative; transition:transform .2s ease, border-color .2s ease;
}
.flcard:hover{ transform:translateY(-8px); border-color:var(--accent,rgba(250,236,227,.5)); }
.flcard .pack{ height:150px; display:grid; place-items:center; margin-bottom:1.1rem; }
/* size purely by WIDTH so every flavor's bar fills the card equally (no letterbox / height cap) */
.flcard .pack img{ width:98%; height:auto; filter:drop-shadow(0 14px 20px rgba(0,0,0,.45)); transition:transform .3s ease; }
.flcard:hover .pack img{ transform:scale(1.05) rotate(-2deg); }
.flcard .bite{ position:absolute; top:14px; right:14px; width:66px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.flcard .tag{
  display:inline-block; font-family:var(--f-display); font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cocoa); background:var(--accent); padding:.3em .9em; border-radius:999px; margin:.6rem 0 .7rem;
}
.flcard h3{ font-weight:900; font-size:1.6rem; color:#fff; margin-bottom:0; }
.flcard p{ color:rgba(250,236,227,.82); font-size:.94rem; }
.flcard.choco{ --accent:var(--choco); }
.flcard.straw{ --accent:var(--straw); }
.flcard.matcha{ --accent:var(--matcha); }

/* =========================================================
   FLAVOR SHOWCASE — one flavor per row, product slides L→R
   ========================================================= */
.showcase{ background:var(--cream); padding:6rem 0 5rem; overflow:hidden; }
.sc-row{
  display:grid; grid-template-columns:0.5fr 0.78fr 1.22fr; gap:1.8rem; align-items:center;
  padding:3.4rem 0; border-top:1px solid var(--cream-2);
}
.sc-row:first-of-type{ border-top:0; }
/* single bite piece, placed to the LEFT of the description text */
.sc-piece{ display:flex; justify-content:center; align-items:center; min-width:0; }
.sc-piece img{ width:min(240px,100%); filter:drop-shadow(0 18px 26px rgba(54,10,7,.34)); }
.sc-text{ max-width:34ch; min-width:0; }
.sc-tag{
  display:inline-block; font-family:var(--f-display); font-weight:800; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cocoa);
  background:var(--accent); padding:.4em 1.05em; border-radius:999px; margin-bottom:1.1rem;
}
.sc-text h3{ font-weight:900; font-size:clamp(2rem,4.4vw,3.2rem); color:var(--maroon); margin-bottom:1rem; line-height:1.05; }
.sc-text p{ color:#5b3a33; font-size:1.06rem; }
.sc-visual{ position:relative; display:flex; justify-content:flex-end; align-items:center; min-height:500px; min-width:0; overflow:visible; }
.sc-visual > img:first-child{ width:min(1056px,56vw); max-width:none; flex:0 0 auto; margin-right:-22vw; filter:drop-shadow(0 30px 42px rgba(54,10,7,.32)); }
.sc-bite{ position:absolute; width:185px; right:18%; bottom:-6%; filter:drop-shadow(0 16px 20px rgba(54,10,7,.38)); }
.sc-row.choco{ --accent:var(--choco); }
.sc-row.straw{ --accent:var(--straw); }
.sc-row.matcha{ --accent:var(--matcha); }

/* slide product in from the RIGHT → left on scroll-in ("훅" whoosh) */
.slide-x{ transform:translateX(min(34vw,420px)); opacity:0; transition:transform 1.05s cubic-bezier(.16,.84,.22,1), opacity .8s ease; }
.slide-x.in{ transform:none; opacity:1; }
.sc-bite.slide-x{ transition-delay:.1s; }

@media (max-width:820px){
  .sc-row{ grid-template-columns:1fr; gap:1rem; text-align:center; padding:2.6rem 0; }
  .sc-text{ max-width:none; order:2; }
  .sc-tag{ margin-inline:auto; }
  .sc-visual{ order:1; min-height:auto; justify-content:center; }
  .sc-visual > img:first-child{ width:min(480px,94%); max-width:94%; margin-right:0; }
  .sc-piece{ order:0; }
  .sc-piece img{ width:150px; }
  .slide-x{ transform:translateX(60px); }
}

/* mascot: baker Dakkumi presenting the flavors */
.dakkumi-baker{
  position:absolute; left:clamp(.5rem, 3vw, 3rem); bottom:0; width:clamp(150px, 15vw, 215px);
  z-index:3; pointer-events:none; filter:drop-shadow(0 16px 22px rgba(0,0,0,.4));
  animation:bobble 4.5s ease-in-out infinite;
}
@keyframes bobble{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-12px) rotate(1.5deg); } }
@media (max-width:1280px){ .dakkumi-baker{ display:none; } }

/* mascot: face that follows the cursor (desktop only) */
.dakkumi-cursor{
  position:fixed; top:0; left:0; width:92px; height:92px; margin:-46px 0 0 -46px;
  pointer-events:none; z-index:9999; opacity:0;
  transition:opacity .35s ease; will-change:transform;
  filter:drop-shadow(0 6px 9px rgba(54,10,7,.32));
}
.dakkumi-cursor.show{ opacity:1; }
@media (hover:none), (max-width:768px){ .dakkumi-cursor{ display:none !important; } }

/* =========================================================
   COMMUNITY band
   ========================================================= */
.community{ background:var(--cream); padding:0; }
.community-inner{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.community-photo{ min-height:340px; background-size:cover; background-position:center; }
.community-text{ padding:clamp(2.5rem,5vw,4.5rem); display:flex; flex-direction:column; justify-content:center; background:var(--maroon); }
.community-text .big{ font-family:var(--f-display); font-weight:900; font-size:clamp(1.6rem,3vw,2.4rem); color:var(--cream); line-height:1.2; }
.community-text .oneline{ font-family:var(--f-display); font-weight:800; color:var(--choco); margin-top:1rem; font-size:1.15rem; }

/* =========================================================
   BUY / CTA
   ========================================================= */
.buy{ background:var(--paper); padding:5.5rem 0; text-align:center; }
.buy h2{ font-weight:900; font-size:clamp(1.9rem,3.6vw,2.8rem); color:var(--maroon); }
.buy p.sub{ color:#6a4b44; margin:.7rem auto 2.6rem; max-width:48ch; }
.buy-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:840px; margin:0 auto; }
.buy-card{
  border:2px solid var(--cream-2); border-radius:var(--radius); padding:2rem 1.4rem; transition:all .2s ease; background:var(--cream);
}
.buy-card:hover{ transform:translateY(-6px); border-color:var(--red); box-shadow:var(--shadow); }
.buy-card .ic{ margin-bottom:.9rem; display:flex; justify-content:center; }
.buy-card .ic svg{ width:40px; height:40px; color:var(--maroon); transition:transform .2s ease; }
.buy-card:hover .ic svg{ transform:translateY(-3px) scale(1.06); color:var(--red); }
.buy-card .k{ font-family:var(--f-display); font-weight:800; color:var(--maroon); font-size:1.1rem; }
.buy-card .v{ font-size:.85rem; color:var(--muted); margin-top:.2rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--cocoa); color:var(--cream); padding:4.5rem 0 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; align-items:start; }
.footer-slogan{ font-family:var(--f-display); font-weight:900; font-size:clamp(1.6rem,3vw,2.3rem); color:#fff; line-height:1.1; }
.footer-slogan .accent{ color:var(--choco); }
.footer-col h4{ font-family:var(--f-display); font-weight:800; color:#fff; margin-bottom:.8rem; font-size:.95rem; letter-spacing:.06em; }
.footer-col a, .footer-col p{ color:rgba(250,236,227,.78); font-size:.9rem; margin-bottom:.5rem; display:block; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(250,236,227,.16); margin-top:3rem; padding-top:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:rgba(250,236,227,.6); }

/* =========================================================
   FULL-VIEWPORT SECTIONS — each section fills the screen
   ========================================================= */
.hero{ min-height:100vh; display:flex; flex-direction:column; }
.hero-grid{ flex:1; }
.flavors{ min-height:100vh; display:flex; align-items:center; }
/* .story (photo-driven height) · .features (squirrel below cards) · .buy · community band keep their natural height */

/* on short/landscape or small screens, let content dictate height */
@media (max-width:900px), (max-height:640px){
  .story, .features, .flavors{ min-height:auto; }
  .hero{ min-height:100vh; }         /* keep hero full-screen on mobile */
}

/* =========================================================
   reveal-on-scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .hero-grid, .story-inner, .community-inner{ grid-template-columns:1fr; }
  .feature-cards, .flavor-cards, .buy-cards{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .hero{ padding-top:7rem; text-align:center; }
  .hero-cta{ justify-content:center; }
  .hero-tags{ justify-content:center; }
  .hero-visual{ order:-1; min-height:280px; }
  .story-photo{ min-height:300px; }
  .community-photo{ min-height:240px; }
  .nav .navlink{ display:none; }
  .menu-btn{ display:block; }
  .nav.open{ position:fixed; inset:0; background:var(--maroon); flex-direction:column; justify-content:center; gap:1.6rem; }
  .nav.open .navlink{ display:block; font-size:1.4rem; }
}
@media (max-width:560px){
  .buy-cards{ grid-template-columns:1fr; }
  .specs{ gap:.7rem 1.2rem; }
}