/* ============================================================
   하이룰루 (HI LULU) — 가맹 랜딩페이지
   Design system: retro Hawaiian comic — bold outlines, hard
   offset shadows, halftone, tropical coral/teal/sun palette
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Cafe24Ssurround/Cafe24Ssurround.css');

:root{
  --coral:#F04E23;  --coral-d:#CE3A0E;  --coral-l:#FF7A45;
  --teal:#17AABB;   --teal-d:#0A7E8C;
  --sun:#FFD23F;    --sun-d:#EFB41C;
  --ink:#181310;    --ink-2:#40352C;    --sub:#7A6A5B;
  --cream:#FFE9D0;  --mint:#D9F3F5;     --paper:#FCF3DF;
  --line:#EBDCC2;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --bd: 2.5px solid var(--ink);
  --maxw: 1180px;
  --r: 22px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Pretendard Variable","Pretendard","Malgun Gothic",-apple-system,sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.fred{ font-family:"Fredoka",sans-serif; font-weight:600; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.mono{ font-family:"Fredoka",sans-serif; }

/* halftone util */
.halftone{
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.5px);
  background-size:13px 13px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:800; font-size:16px; letter-spacing:-.2px;
  padding:15px 26px; border:var(--bd); border-radius:50px;
  background:var(--sun); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn.coral{ background:var(--coral); color:#fff; }
.btn.teal{ background:var(--teal); color:#fff; }
.btn.lg{ font-size:18px; padding:18px 34px; }
.btn .arrow{ font-size:18px; transition:transform .15s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--coral-d);
}
.eyebrow::before{ content:""; width:22px; height:3px; background:var(--coral); border-radius:3px; }
.eyebrow.teal{ color:var(--teal-d); }
.eyebrow.teal::before{ background:var(--teal); }
.eyebrow.light{ color:#fff; }
.eyebrow.light::before{ background:#fff; }

.sec-title{
  font-weight:800; font-size:clamp(30px,4.2vw,46px); line-height:1.12;
  letter-spacing:-1.2px; margin:14px 0 0;
}
.sec-lead{ font-size:clamp(15px,1.5vw,18px); color:var(--sub); margin-top:16px; max-width:620px; line-height:1.7; }

.tag{
  display:inline-block; white-space:nowrap; background:var(--cream); color:var(--coral-d);
  border:2px solid var(--ink); border-radius:30px; padding:5px 14px;
  font-size:13px; font-weight:700; box-shadow:2px 2px 0 var(--ink);
}
.tag.teal{ background:var(--mint); color:var(--teal-d); }

/* reveal animation — hidden state only when JS is active (progressive enhancement) */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled{ background:rgba(255,253,248,.92); backdrop-filter:blur(8px); box-shadow:0 2px 0 var(--line); padding:10px 28px; }
.nav .brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-.5px; }
.nav .brand .mark{
  width:42px; height:42px; border-radius:13px; background:var(--coral);
  border:var(--bd); box-shadow:2px 2px 0 var(--ink);
  display:grid; place-items:center; overflow:hidden;
}
.nav .brand .mark img{ width:34px; height:34px; object-fit:contain; filter:brightness(0) invert(1); }
.nav .brand .en{ font-family:"Fredoka",sans-serif; font-weight:600; }
.nav .links{ display:flex; align-items:center; gap:24px; }
.nav .links a.l{ font-size:14.5px; font-weight:600; color:var(--ink-2); transition:color .15s; white-space:nowrap; }
.nav .links a.l:hover{ color:var(--coral-d); }
.nav .navcta{ font-size:14px; padding:11px 20px; }
@media(max-width:860px){ .nav .links a.l{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 80% -10%, rgba(255,194,51,.30), transparent 45%),
    linear-gradient(160deg,#FFE7CE 0%, var(--cream) 55%, #FFEAD6 100%);
  padding:140px 0 90px;
}
.hero .sun-rays{
  position:absolute; top:-280px; right:-200px; width:760px; height:760px; opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 50%, var(--sun) 0deg 9deg, transparent 9deg 18deg);
  border-radius:50%; pointer-events:none; animation:spin 90s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; position:relative; z-index:2; }
.hero-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.hero h1{
  font-weight:800; font-size:clamp(42px,6.4vw,82px); line-height:1.02;
  letter-spacing:-2.6px;
}
.hero h1 .pop{ color:var(--coral); position:relative; white-space:nowrap; }
.hero h1 .ko-sub{ display:block; font-size:.42em; letter-spacing:-1px; margin-top:14px; color:var(--ink); font-weight:800; }
.hero .slogan{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:clamp(18px,2vw,24px); color:var(--teal-d); margin-top:8px; letter-spacing:.5px; }
.hero .desc{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); margin-top:22px; max-width:480px; line-height:1.72; }
.hero .desc b{ color:var(--coral-d); }
.hero .hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero .trust{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.hero .trust .t .n{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; color:var(--ink); line-height:1; }
.hero .trust .t .n small{ font-size:15px; font-weight:600; }
.hero .trust .t .lb{ font-size:13px; color:var(--sub); margin-top:5px; }
.hero .trust .divider{ width:2px; background:var(--line); }

/* hero visual */
.hero-visual{ position:relative; }
.hero-photo{
  border:3px solid var(--ink); border-radius:30px; overflow:hidden;
  box-shadow:10px 10px 0 var(--ink); aspect-ratio:1/1; background:#000;
  transform:rotate(1.4deg);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-sticker{
  position:absolute; bottom:-26px; left:-30px;
  background:var(--teal); color:#fff; border:var(--bd); border-radius:50%;
  width:130px; height:130px; display:grid; place-content:center; text-align:center;
  box-shadow:var(--shadow); transform:rotate(-10deg); padding:10px;
  animation:bob 4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:rotate(-10deg) translateY(0); } 50%{ transform:rotate(-10deg) translateY(-9px); } }
.hero-sticker .big{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; line-height:1; }
.hero-sticker .sm{ font-size:11.5px; font-weight:700; margin-top:4px; letter-spacing:-.3px; }
.hero-mascot{
  position:absolute; top:50%; right:-38px; transform:translateY(-50%) rotate(7deg);
  width:158px; height:158px;
  background:var(--paper); border:var(--bd); border-radius:26px; padding:12px;
  box-shadow:var(--shadow); z-index:5; display:grid; place-items:center;
}
.hero-mascot img{ width:100%; height:100%; object-fit:contain; }

/* principle strip */
.principle{ background:var(--coral); border-bottom:3px solid var(--ink); padding:16px 24px; text-align:center; }
.principle p{ font-size:clamp(15px,1.8vw,18.5px); font-weight:700; color:#fff; }
.principle b{ color:var(--sun); font-weight:800; }
.fscene .intro-slogan{ margin-bottom:20px; background:var(--sun); color:var(--ink); font-size:14.5px; letter-spacing:.3px; }
.scene-finale .sml+.sml{ margin-top:6px; }
.scene-finale .sml.sub2{ font-weight:700; color:var(--coral-d); }

/* marquee */
.marquee{ background:var(--coral-d); color:#FFF6E4; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:15px 0; overflow:hidden; }
.marquee .track{ display:flex; gap:40px; white-space:nowrap; width:max-content; animation:slide 26s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee .item{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:21px; letter-spacing:1px; display:inline-flex; align-items:center; gap:40px; }
.marquee .item::after{ content:"✺"; color:var(--sun); font-size:18px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   REFRAME (2 stores -> strength)
   ============================================================ */
.reframe{ background:var(--ink); color:var(--paper); padding:96px 0; overflow:hidden; }
.reframe .halftone-bg{ position:absolute; inset:0; opacity:.05; background-image:radial-gradient(#fff 1.4px,transparent 1.5px); background-size:15px 15px; pointer-events:none; }
.reframe .top{ text-align:center; max-width:780px; margin:0 auto 56px; position:relative; z-index:2; }
.reframe .big-num{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(80px,15vw,180px); line-height:.9; color:var(--sun); letter-spacing:-4px; }
.reframe h2{ font-weight:800; font-size:clamp(28px,3.8vw,44px); letter-spacing:-1.2px; margin-top:6px; line-height:1.18; }
.reframe h2 .u{ color:var(--coral-l); text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:6px; text-decoration-thickness:4px; }
.reframe .top p{ color:#C7D0DB; font-size:clamp(16px,1.6vw,19px); margin-top:20px; line-height:1.75; }
.reframe .cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:2; }
.rf-card{ background:#23303F; border:2.5px solid #38485A; border-radius:var(--r); padding:30px 26px; transition:transform .2s ease, border-color .2s ease; }
.rf-card:hover{ transform:translateY(-6px); border-color:var(--sun); }
.rf-card .ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:26px; border:2.5px solid var(--ink); box-shadow:3px 3px 0 rgba(0,0,0,.4); margin-bottom:18px; }
.rf-card .k{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--sun); }
.rf-card h3{ font-size:21px; font-weight:800; margin:7px 0 10px; }
.rf-card p{ color:#AEB9C6; font-size:15px; line-height:1.7; }

/* ============================================================
   EXPANSION MAP (pins drop in)
   ============================================================ */
.expand .top{ margin-bottom:40px; }
.exp-eyebrow{
  display:inline-block; font-family:"Fredoka",sans-serif; font-weight:600;
  font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--sun);
  background:rgba(255,194,51,.12); border:1.5px solid rgba(255,194,51,.4);
  border-radius:30px; padding:7px 16px; margin-bottom:18px;
}
.exp-map{
  position:relative; width:100%; aspect-ratio:16/8.4; min-height:360px;
  background:#16202C; border:2.5px solid #38485A; border-radius:24px;
  overflow:hidden; box-shadow:8px 8px 0 rgba(0,0,0,.45); z-index:2;
}
.exp-grid{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1.3px,transparent 1.4px); background-size:28px 28px; }
.exp-geo{ position:absolute; inset:0; width:100%; height:100%; }
.exp-route{ stroke-dashoffset:0; }
.js .exp-map .exp-route{ opacity:0; }
.js .exp-map.in .exp-route{ animation:routeIn .8s ease 1s both, routeFlow 1.1s linear 1.8s infinite; }
@keyframes routeIn{ from{opacity:0} to{opacity:1} }
@keyframes routeFlow{ to{ stroke-dashoffset:-30; } }
.exp-region{
  position:absolute; font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px;
  letter-spacing:1.5px; color:rgba(255,255,255,.34); text-transform:uppercase; pointer-events:none;
}
.exp-region.west{ left:4%; top:9%; }
.exp-region.east{ right:5%; bottom:9%; }
.exp-counter{
  position:absolute; right:18px; top:16px; display:flex; align-items:baseline; gap:8px;
  background:rgba(15,22,32,.7); border:1.5px solid rgba(255,255,255,.14); border-radius:14px;
  padding:9px 16px; backdrop-filter:blur(4px);
}
.exp-counter .num{ font-size:30px; color:var(--sun); line-height:1; }
.exp-counter .lb{ font-size:12px; color:#C7D0DB; letter-spacing:.5px; }

/* pins */
.pin{ position:absolute; left:var(--x); top:var(--y); z-index:5; }
.pin-pin{
  position:absolute; left:0; top:0; width:26px; height:26px;
  transform:translate(-50%,-100%) rotate(-45deg);
  border-radius:50% 50% 50% 0; border:3px solid #0E1620;
  box-shadow:3px 3px 0 rgba(0,0,0,.4); transform-origin:center bottom;
}
.pin-pin::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:#0E1620; }
.pin.live   .pin-pin{ background:var(--teal); }
.pin.soon   .pin-pin{ background:var(--sun); }
.pin.signed .pin-pin{ background:var(--coral); }
.pin-shadow{ position:absolute; left:0; top:0; width:16px; height:6px; transform:translate(-50%,-2px); border-radius:50%; background:rgba(0,0,0,.55); filter:blur(1px); }
.pin-pulse{ position:absolute; left:0; top:0; width:14px; height:14px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid var(--teal); opacity:0; }
.pin.soon   .pin-pulse{ border-color:var(--sun); }
.pin.signed .pin-pulse{ border-color:var(--coral); }
.pin-tag{
  position:absolute; left:0; bottom:38px; transform:translateX(-50%); white-space:nowrap;
  background:var(--paper); color:var(--ink); border:2.5px solid #0E1620; border-radius:10px;
  padding:6px 11px; font-size:13px; font-weight:800; box-shadow:3px 3px 0 rgba(0,0,0,.4);
  display:flex; flex-direction:column; align-items:center; line-height:1.15;
}
.pin-tag i{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--teal-d); letter-spacing:.2px; margin-top:2px; }
.pin.soon   .pin-tag i{ color:var(--sun-d); }
.pin.signed .pin-tag i{ color:var(--coral-d); }
.pin-tag.hot{ background:var(--coral); color:#fff; border-color:#0E1620; }
.pin-tag.hot i{ color:#FFE3D2; }
.pin-tag::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); border:6px solid transparent; border-top-color:#0E1620; }

/* drop choreography — only with JS + motion allowed */
.js .exp-map .pin-pin,
.js .exp-map .pin-tag{ opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .js .exp-map.in .pin .pin-pin{ animation:pinDrop .72s cubic-bezier(.18,1.25,.5,1) var(--d) both; }
  .js .exp-map.in .pin .pin-tag{ animation:tagPop .38s ease calc(var(--d) + .34s) both; }
  .js .exp-map.in .pin .pin-pulse{ animation:pinPulse 1.7s ease-out calc(var(--d) + .5s) 3; }
}
@media (prefers-reduced-motion:reduce){
  .js .exp-map .pin-pin, .js .exp-map .pin-tag{ opacity:1; }
}
@keyframes pinDrop{
  0%{ transform:translate(-50%,calc(-100% - 150px)) rotate(-45deg) scale(.7); opacity:0; }
  55%{ transform:translate(-50%,-100%) rotate(-45deg) scale(1); opacity:1; }
  70%{ transform:translate(-50%,-100%) rotate(-45deg) scaleX(1.12) scaleY(.82); }
  84%{ transform:translate(-50%,-112%) rotate(-45deg) scale(1); }
  100%{ transform:translate(-50%,-100%) rotate(-45deg) scale(1); opacity:1; }
}
@keyframes tagPop{ 0%{ opacity:0; transform:translateX(-50%) translateY(6px) scale(.9); } 100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes pinPulse{ 0%{ opacity:.7; transform:translate(-50%,-50%) scale(.6); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(4.2); } }

/* ghost "your turn" pin — opportunity */
.pin.ghost{ z-index:7; }
.pin.ghost .pin-pin{
  width:34px; height:34px; background:var(--coral);
  border:3px dashed #fff; box-shadow:3px 3px 0 rgba(0,0,0,.4), 0 0 22px rgba(255,107,53,.85);
}
.pin.ghost .pin-pin::before{ inset:6px; background:var(--coral-d); }
.pin.ghost .pin-pin .plus{
  position:absolute; inset:0; transform:rotate(45deg); display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:"Fredoka",sans-serif; font-weight:700; font-size:20px; line-height:1; z-index:2;
}
.pin.ghost .pin-shadow{ width:20px; height:7px; }
.ghost-ring{
  position:absolute; left:0; top:0; width:34px; height:34px; transform:translate(-50%,-100%);
  border-radius:50%; border:2.5px solid var(--coral); opacity:0; pointer-events:none;
}
.pin-tag.you{
  background:var(--ink); color:#fff; border-color:var(--coral); border-style:dashed;
  bottom:46px; box-shadow:3px 3px 0 rgba(255,107,53,.5);
}
.pin-tag.you i{ color:var(--sun); }
.pin-tag.you::after{ border-top-color:var(--coral); }
.js .exp-map .pin.ghost .pin-pin,
.js .exp-map .pin.ghost .pin-tag{ opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .js .exp-map.in .pin.ghost .pin-pin{ animation:pinDrop .8s cubic-bezier(.18,1.25,.5,1) var(--d) both; }
  .js .exp-map.in .pin.ghost.hero .pin-pin{ animation:pinDrop .8s cubic-bezier(.18,1.25,.5,1) var(--d) both, ghostBob 2.4s ease-in-out calc(var(--d) + 1s) infinite; }
  .js .exp-map.in .pin.ghost .pin-tag{ animation:tagPop .4s ease calc(var(--d) + .34s) both; }
  .js .exp-map.in .pin.ghost.hero .pin-tag{ animation:tagPop .4s ease calc(var(--d) + .4s) both, youGlow 2s ease-in-out calc(var(--d) + 1s) infinite; }
  .js .exp-map.in .pin.ghost .ghost-ring.r1{ animation:ghostRing 2.4s ease-out calc(var(--d) + .6s) infinite; }
  .js .exp-map.in .pin.ghost .ghost-ring.r2{ animation:ghostRing 2.4s ease-out calc(var(--d) + 1.4s) infinite; }
  .js .exp-map.in .pin.ghost .ghost-ring.r3{ animation:ghostRing 2.4s ease-out calc(var(--d) + 2.2s) infinite; }
}
@media (prefers-reduced-motion:reduce){
  .js .exp-map .pin.ghost .pin-pin, .js .exp-map .pin.ghost .pin-tag{ opacity:1; }
}
@keyframes ghostRing{ 0%{ opacity:.7; transform:translate(-50%,-100%) scale(.5); } 100%{ opacity:0; transform:translate(-50%,-100%) scale(3.4); } }
@keyframes ghostBob{ 0%,100%{ transform:translate(-50%,-100%) rotate(-45deg) translateZ(0); } 50%{ transform:translate(-50%,-112%) rotate(-45deg); } }
@keyframes youGlow{ 0%,100%{ box-shadow:3px 3px 0 rgba(255,107,53,.5); } 50%{ box-shadow:3px 3px 0 rgba(255,107,53,.5), 0 0 16px rgba(255,107,53,.7); } }

/* mini ghost pins — opportunity scattered across the region */
.pin.ghost.mini{ z-index:6; }
.pin.ghost.mini .pin-pin{ width:23px; height:23px; border-width:2.5px; box-shadow:2px 2px 0 rgba(0,0,0,.35), 0 0 13px rgba(255,107,53,.7); }
.pin.ghost.mini .pin-pin::before{ inset:4.5px; }
.pin.ghost.mini .pin-pin .plus{ font-size:14px; }
.pin.ghost.mini .pin-shadow{ width:15px; height:5px; }
.pin.ghost.mini .ghost-ring{ width:23px; height:23px; }
.pin.ghost.mini .pin-tag{ bottom:32px; font-size:11px; padding:3px 9px; background:var(--ink); color:#fff;
  border:1.5px dashed var(--coral); box-shadow:2px 2px 0 rgba(255,107,53,.4); }
.pin.ghost.mini .pin-tag::after{ border-top-color:var(--coral); }
.pin.ghost.mini:hover{ z-index:9; }
.legend .dot.ghost, .exp-legend .dot.ghost{ background:var(--coral); border-style:dashed; }

/* legend */
.exp-legend{ display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:center; margin-top:26px; position:relative; z-index:2; }
.exp-legend .lg{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#C7D0DB; }
.exp-legend .lg b{ font-family:"Fredoka",sans-serif; color:#fff; font-weight:700; }
.exp-legend .lg .dot{ width:12px; height:12px; border-radius:50%; border:2px solid #0E1620; }
.exp-legend .dot.live{ background:var(--teal); }
.exp-legend .dot.soon{ background:var(--sun); }
.exp-legend .dot.signed{ background:var(--coral); }
.exp-legend .lg.total{ background:rgba(255,107,53,.16); border:1.5px solid rgba(255,107,53,.45); color:#fff; border-radius:30px; padding:6px 16px; }
.reframe .cards3.exp-cards{ margin-top:40px; grid-template-columns:repeat(2,1fr); }
@media(max-width:980px){ .reframe .cards3.exp-cards{ grid-template-columns:1fr; } }
@media(max-width:680px){
  .exp-map{ aspect-ratio:3/4; }
  .pin-tag{ font-size:10.5px; padding:4px 7px; }
  .pin-tag i{ font-size:9px; }
  .exp-counter{ top:12px; right:12px; padding:7px 12px; }
  .exp-counter .num{ font-size:24px; }
  /* declutter: hide the small opportunity-pin labels on phones, keep the glowing + pins */
  .pin.ghost.mini .pin-tag{ display:none; }
  .pin.ghost.hero .pin-tag.you{ font-size:11px; }
  .exp-region{ font-size:10px; }
}

/* ============================================================
   GENERIC SECTION
   ============================================================ */
.sec{ padding:100px 0; }
.sec.cream{ background:var(--cream); }
.sec.mint{ background:var(--mint); }
.sec-head{ max-width:720px; }
.sec-head.center{ margin:0 auto; text-align:center; }
.sec-head.center .sec-lead{ margin-left:auto; margin-right:auto; }

/* concept cards */
.concept-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:54px; max-width:860px; margin-left:auto; margin-right:auto; }
.cc{ background:var(--paper); border:var(--bd); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.cc:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.cc .cc-top{ height:8px; }
.cc .cc-body{ padding:30px 28px 32px; }
.cc .num{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:15px; color:#fff; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
.cc .k{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--sub); margin-top:20px; }
.cc h3{ font-size:24px; font-weight:800; margin:6px 0 12px; letter-spacing:-.6px; }
.cc p{ color:var(--ink-2); font-size:15.5px; line-height:1.72; }

/* ============================================================
   MENU
   ============================================================ */
.menu-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:54px; align-items:start; }
.menu-hero-img{ position:sticky; top:100px; }
.menu-hero-img .frame{ border:3px solid var(--ink); border-radius:26px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; background:var(--coral); }
.menu-hero-img .frame img{ width:100%; height:100%; object-fit:cover; }
.menu-hero-img .cap{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.menu-hero-img .cap .price-strip{ font-family:"Fredoka",sans-serif; font-weight:700; }
.menu-list .mrow{ display:flex; align-items:center; gap:18px; padding:20px 4px; border-bottom:2px dashed var(--line); }
.menu-list .mrow:first-child{ padding-top:0; }
.menu-list .thumb{ width:72px; height:72px; border-radius:16px; border:2.5px solid var(--ink); overflow:hidden; flex-shrink:0; background:var(--cream); box-shadow:2px 2px 0 var(--ink); }
.menu-list .thumb img{ width:100%; height:100%; object-fit:cover; }
.menu-list .mr-info{ flex:1; }
.menu-list .mr-info .nm{ font-size:18px; font-weight:800; letter-spacing:-.4px; }
.menu-list .mr-info .ds{ font-size:14px; color:var(--sub); margin-top:3px; }
.menu-list .pr{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:19px; color:var(--coral-d); white-space:nowrap; }
.aov-box{ margin-top:26px; background:var(--ink); color:#fff; border-radius:var(--r); padding:26px 28px; display:flex; justify-content:space-between; align-items:center; gap:20px; box-shadow:var(--shadow); }
.aov-box .t{ font-size:14px; color:#C7D0DB; }
.aov-box .v{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; line-height:1; margin-top:6px; }
.aov-box .v.sun{ color:var(--sun); }
.aov-box .v.teal{ color:#4FD6D6; }
.aov-box .div{ width:2px; align-self:stretch; background:#38485A; }

/* ============================================================
   DATA / PROOF
   ============================================================ */
.proof{ background:linear-gradient(180deg,var(--paper),var(--cream)); padding:100px 0; }
.kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; }
.kpi{ background:var(--paper); border:var(--bd); border-radius:var(--r); padding:30px 24px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi::after{ content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; opacity:.12; }
.kpi.c1::after{ background:var(--coral); } .kpi.c2::after{ background:var(--teal); } .kpi.c3::after{ background:var(--sun); } .kpi.c4::after{ background:var(--coral); }
.kpi .v{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(38px,4.4vw,52px); line-height:1; letter-spacing:-1px; }
.kpi.c1 .v,.kpi.c4 .v{ color:var(--coral); } .kpi.c2 .v{ color:var(--teal); } .kpi.c3 .v{ color:var(--sun-d); }
.kpi .v small{ font-size:.45em; font-weight:600; margin-left:2px; }
.kpi .lb{ font-size:15px; font-weight:700; margin-top:14px; }
.kpi .sub{ font-size:13px; color:var(--sub); margin-top:4px; }

/* bridge: 적자 -> 흑자 */
.bridge{ margin-top:64px; background:var(--paper); border:var(--bd); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; }
.bridge .bh{ background:var(--ink); color:#fff; padding:24px 32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bridge .bh h3{ font-size:21px; font-weight:800; letter-spacing:-.5px; }
.bridge .bh .pill{ font-family:"Fredoka",sans-serif; font-size:13px; font-weight:600; background:#2C3A4B; border:2px solid #44546A; border-radius:30px; padding:5px 13px; margin-left:auto; }
.bridge .bbody{ padding:38px 32px; }
.bars{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:end; }
.bar-col{ text-align:center; }
.bar-col .bar{ border-radius:14px 14px 0 0; border:2.5px solid var(--ink); border-bottom:none; position:relative; display:flex; align-items:flex-start; justify-content:center; }
.bar-col .bar .amt{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:18px; padding-top:10px; }
.bar-col.minus .bar{ background:repeating-linear-gradient(45deg,#F4C7BD,#F4C7BD 8px,#EFB6AA 8px,#EFB6AA 16px); }
.bar-col.add .bar{ background:var(--mint); }
.bar-col.add2 .bar{ background:#D9F0E6; }
.bar-col.profit .bar{ background:var(--sun); }
.bar-col .base{ border-top:3px solid var(--ink); padding-top:12px; margin-top:0; }
.bar-col .base .lb{ font-size:13.5px; font-weight:700; }
.bar-col .base .sb{ font-size:12px; color:var(--sub); margin-top:2px; }
.bridge .plus{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:30px; color:var(--sub); padding-bottom:42px; }
.bridge .bnote{ margin-top:28px; font-size:14px; color:var(--ink-2); background:var(--cream); border-radius:14px; padding:16px 20px; line-height:1.7; border:2px solid var(--line); }
.bridge .bnote b{ color:var(--coral-d); }

.quote-band{ margin-top:60px; background:var(--coral); color:#fff; border:var(--bd); border-radius:28px; box-shadow:var(--shadow); padding:44px 48px; position:relative; overflow:hidden; }
.quote-band .qmark{ font-family:"Fredoka",sans-serif; font-size:120px; font-weight:700; position:absolute; top:-30px; right:30px; opacity:.18; }
.quote-band p{ font-size:clamp(20px,2.4vw,28px); font-weight:800; line-height:1.45; letter-spacing:-.6px; position:relative; z-index:2; max-width:880px; }
.quote-band .who{ margin-top:18px; font-size:15px; opacity:.9; font-weight:600; }

/* ============================================================
   STORES
   ============================================================ */
.store-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:54px; }
.store{ background:var(--paper); border:var(--bd); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.store .ph{ aspect-ratio:16/11; overflow:hidden; background:var(--ink); border-bottom:var(--bd); position:relative; }
.store .ph img{ width:100%; height:100%; object-fit:cover; }
.store .ph .badge{ position:absolute; top:16px; left:16px; background:var(--sun); color:var(--ink); border:2.5px solid var(--ink); border-radius:30px; padding:6px 15px; font-weight:800; font-size:13px; box-shadow:2px 2px 0 var(--ink); }
.store .ph .badge.open{ background:var(--teal); color:#fff; }
.store .sbody{ padding:26px 28px 30px; }
.store .sbody h3{ font-size:24px; font-weight:800; letter-spacing:-.6px; display:flex; align-items:center; gap:10px; }
.store .sbody .loc{ font-size:14px; color:var(--sub); margin-top:6px; }
.store .stats{ display:flex; gap:24px; margin-top:20px; padding-top:20px; border-top:2px dashed var(--line); }
.store .stats .s .n{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:24px; color:var(--coral-d); line-height:1; }
.store .stats .s .n.teal{ color:var(--teal-d); }
.store .stats .s .l{ font-size:12.5px; color:var(--sub); margin-top:5px; }

/* expansion stores */
.exp-stores-head{ text-align:center; max-width:640px; margin:64px auto 28px; }
.exp-stores-head .eyebrow{ justify-content:center; color:var(--coral-d); }
.exp-stores-head .eyebrow::before{ display:none; }
.exp-stores-head h3{ font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-1px; line-height:1.18; margin-top:10px; }
.exp-stores-head p{ color:var(--sub); font-size:16px; line-height:1.7; margin-top:14px; }
.new-store-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.nstore{ position:relative; background:var(--paper); border:var(--bd); border-radius:var(--r); padding:30px 26px 26px; box-shadow:var(--shadow); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.nstore:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.nstore-bar{ position:absolute; top:0; left:0; right:0; height:8px; }
.nstore.soon .nstore-bar{ background:var(--sun); }
.nstore.signed .nstore-bar{ background:var(--coral); }
.nstore .nb{ display:inline-block; font-size:12.5px; font-weight:800; border:2.5px solid var(--ink); border-radius:30px; padding:5px 14px; box-shadow:2px 2px 0 var(--ink); margin-top:6px; }
.nstore .nb.soon{ background:var(--sun); color:var(--ink); }
.nstore .nb.signed{ background:var(--coral); color:#fff; }
.nstore-pin{ position:absolute; right:22px; top:24px; width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:3px solid var(--ink); }
.nstore.soon .nstore-pin{ background:var(--sun); }
.nstore.signed .nstore-pin{ background:var(--coral); }
.nstore-pin::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:var(--paper); }
.nstore h4{ font-size:30px; font-weight:800; letter-spacing:-1px; margin:18px 0 0; }
.nstore .loc{ font-size:14px; color:var(--sub); margin-top:8px; line-height:1.5; }
.nstore .nfoot{ margin-top:18px; padding-top:16px; border-top:2px dashed var(--line); font-size:13.5px; font-weight:700; color:var(--ink-2); }
@media(max-width:960px){ .new-store-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px){ .new-store-grid{ grid-template-columns:1fr; } }

/* ============================================================
   OPERATIONS
   ============================================================ */
.ops-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:60px; align-items:center; margin-top:54px; }
.ops-list .op{ display:flex; gap:20px; padding:22px 0; border-bottom:2px dashed rgba(255,255,255,.18); }
.ops-list .op:last-child{ border-bottom:none; }
.ops-list .op .ic{ width:58px; height:58px; flex-shrink:0; border-radius:17px; display:grid; place-items:center; font-size:27px; border:2.5px solid var(--ink); box-shadow:3px 3px 0 rgba(0,0,0,.35); }
.ops-list .op .ot h3{ font-size:20px; font-weight:800; }
.ops-list .op .ot p{ font-size:15px; color:#AEB9C6; margin-top:6px; line-height:1.7; }
.ops-visual{ position:relative; }
.ops-visual .frame{ border:3px solid var(--ink); border-radius:26px; overflow:hidden; box-shadow:8px 8px 0 rgba(0,0,0,.4); aspect-ratio:4/5; background:#000; transform:rotate(-1.5deg); }
.ops-visual .frame img{ width:100%; height:100%; object-fit:cover; }
.ops-visual .float-tag{ position:absolute; bottom:-20px; right:-16px; background:var(--sun); color:var(--ink); border:var(--bd); border-radius:18px; padding:14px 20px; box-shadow:var(--shadow-sm); transform:rotate(4deg); }
.ops-visual .float-tag .n{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:24px; line-height:1; }
.ops-visual .float-tag .l{ font-size:12px; font-weight:700; margin-top:3px; }

/* ============================================================
   PROFIT SIMULATION
   ============================================================ */
.sim-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:30px; margin-top:54px; align-items:start; }
.sim-table-card{ background:var(--paper); border:var(--bd); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.sim-table-card .sh{ display:flex; }
.sim-table-card .sh .lbl{ flex:1; padding:18px 24px; font-weight:800; font-size:15px; background:var(--ink); color:#fff; display:flex; align-items:center; }
.sim-table-card .sh .col{ width:130px; text-align:center; padding:16px 10px; font-weight:800; color:#fff; }
.sim-table-card .sh .col.base{ background:var(--coral-d); }
.sim-table-card .sh .col.good{ background:var(--teal-d); }
.sim-table-card .sh .col .cn{ font-family:"Fredoka",sans-serif; font-size:13px; opacity:.85; font-weight:500; }
.sim-table-card .sh .col .cv{ font-family:"Fredoka",sans-serif; font-size:20px; font-weight:700; }
.srow{ display:flex; align-items:center; border-bottom:1px solid var(--line); }
.srow .lbl{ flex:1; padding:14px 24px; font-size:15px; font-weight:600; }
.srow .lbl .rt{ font-size:12.5px; color:var(--sub); font-weight:600; margin-left:8px; }
.srow .col{ width:130px; text-align:center; padding:14px 10px; font-family:"Fredoka",sans-serif; font-weight:600; font-size:16px; }
.srow .col.base{ background:#FFF6F0; }
.srow.minus .col{ color:#C0392B; }
.srow.profit{ background:var(--ink); }
.srow.profit .lbl{ color:#fff; font-weight:800; font-size:16px; }
.srow.profit .col{ color:var(--sun); font-weight:700; font-size:20px; }
.srow.profit .col.base{ background:#0a8e8e; color:#fff; }
.srow.rate .col{ color:var(--teal-d); font-weight:700; }
.srow.rate{ background:var(--mint); }
.srow.rate .lbl{ font-weight:800; }

.owner-card{ background:var(--sun); border:var(--bd); border-radius:24px; box-shadow:var(--shadow); padding:30px 28px; }
.owner-card .ic{ font-size:34px; }
.owner-card h3{ font-size:22px; font-weight:800; margin:10px 0 8px; letter-spacing:-.5px; line-height:1.3; }
.owner-card p{ font-size:15px; color:var(--ink-2); line-height:1.7; }
.owner-card .big{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(30px,3.5vw,40px); color:var(--ink); margin:18px 0 4px; line-height:1; }
.owner-card .biglb{ font-size:14px; font-weight:700; }
.owner-card .payback{ margin-top:22px; padding-top:20px; border-top:2.5px solid var(--ink); display:flex; gap:20px; }
.owner-card .payback .p .n{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:26px; line-height:1; }
.owner-card .payback .p .l{ font-size:12.5px; font-weight:700; margin-top:4px; }
.sim-note{ margin-top:20px; font-size:13px; color:var(--sub); line-height:1.7; max-width:900px; }

/* ============================================================
   FRANCHISE PROCESS + COST
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:54px; counter-reset:st; }
.step{ background:var(--paper); border:var(--bd); border-radius:18px; padding:24px 18px; box-shadow:var(--shadow-sm); position:relative; }
.step .no{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:14px; color:#fff; width:34px; height:34px; border-radius:11px; background:var(--coral); border:2.5px solid var(--ink); display:grid; place-items:center; box-shadow:2px 2px 0 var(--ink); }
.step h4{ font-size:16px; font-weight:800; margin:16px 0 7px; letter-spacing:-.3px; }
.step p{ font-size:13px; color:var(--sub); line-height:1.6; }
.step .conn{ position:absolute; right:-12px; top:38px; font-family:"Fredoka"; font-weight:700; color:var(--line); font-size:20px; z-index:2; }

.cost-wrap{ margin-top:36px; display:grid; grid-template-columns:1fr; gap:26px; align-items:start; }
.cost-card{ background:var(--paper); border:var(--bd); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.cost-card .ch{ background:var(--ink); color:#fff; padding:18px 26px; font-weight:800; font-size:16px; display:flex; justify-content:space-between; align-items:center; }
.cost-card .ch .en{ font-family:"Fredoka"; font-weight:500; font-size:12px; opacity:.7; letter-spacing:1px; }
.crow{ display:flex; align-items:center; justify-content:space-between; padding:16px 26px; border-bottom:1px solid var(--line); }
.crow .cl .nm{ font-weight:700; font-size:15.5px; }
.crow .cl .ds{ font-size:13px; color:var(--sub); margin-top:2px; }
.crow .cv{ font-family:"Fredoka"; font-weight:700; font-size:18px; color:var(--ink); white-space:nowrap; }
.crow.total{ background:var(--cream); }
.crow.total .nm{ color:var(--coral-d); font-weight:800; font-size:16px; }
.crow.total .cv{ color:var(--coral-d); font-size:22px; }
.cost-side{ background:var(--teal); color:#fff; border:var(--bd); border-radius:24px; box-shadow:var(--shadow); padding:30px 28px; }
.cost-side .k{ font-family:"Fredoka"; font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.85; }
.cost-side h3{ font-size:22px; font-weight:800; margin:8px 0 16px; }
.cost-side ul{ list-style:none; }
.cost-side li{ display:flex; gap:11px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:15px; }
.cost-side li:last-child{ border-bottom:none; }
.cost-side li .ck{ flex-shrink:0; font-weight:800; }
.cost-side .royalty{ margin-top:20px; background:rgba(0,0,0,.16); border-radius:14px; padding:16px 18px; }
.cost-side .royalty .n{ font-family:"Fredoka"; font-weight:700; font-size:24px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
.rv{ background:var(--paper); border:var(--bd); border-radius:var(--r); padding:28px 26px; box-shadow:var(--shadow-sm); transition:transform .18s ease; }
.rv:hover{ transform:translateY(-5px); }
.rv .stars{ color:var(--sun-d); font-size:17px; letter-spacing:2px; }
.rv p{ font-size:15.5px; line-height:1.7; margin:14px 0 18px; font-weight:500; }
.rv .who{ display:flex; align-items:center; gap:12px; }
.rv .who .av{ width:42px; height:42px; border-radius:50%; border:2.5px solid var(--ink); display:grid; place-items:center; font-weight:800; font-family:"Fredoka"; color:#fff; }
.rv .who .nm{ font-size:14px; font-weight:800; }
.rv .who .meta{ font-size:12.5px; color:var(--sub); }

/* ============================================================
   CTA / FORM
   ============================================================ */
.cta{ background:var(--ink); color:#fff; padding:100px 0; overflow:hidden; }
.cta .halftone-bg{ position:absolute; inset:0; opacity:.06; background-image:radial-gradient(#fff 1.4px,transparent 1.5px); background-size:15px 15px; }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; z-index:2; }
.cta-copy h2{ font-weight:800; font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-1.4px; }
.cta-copy h2 .sun{ color:var(--sun); }
.cta-copy .slogan{ font-family:"Fredoka"; font-weight:600; font-size:22px; color:#4FD6D6; margin-top:14px; }
.cta-copy p{ color:#C7D0DB; font-size:17px; margin-top:20px; line-height:1.75; max-width:440px; }
.cta-copy .contact-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.cta-copy .cinfo{ display:flex; align-items:center; gap:11px; font-size:15px; }
.cta-copy .cinfo .ic{ width:42px; height:42px; border-radius:13px; background:#2C3A4B; border:2px solid #44546A; display:grid; place-items:center; font-size:18px; }
.cta-copy .cinfo .v{ font-family:"Fredoka"; font-weight:600; font-size:18px; }

.form-card{ background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:28px; box-shadow:10px 10px 0 rgba(0,0,0,.5); padding:34px 32px; }
.form-card h3{ font-size:22px; font-weight:800; letter-spacing:-.5px; }
.form-card .fsub{ font-size:14px; color:var(--sub); margin-top:6px; margin-bottom:22px; }
.fgroup{ margin-bottom:16px; }
.fgroup label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; }
.fgroup label .req{ color:var(--coral); }
.fgroup input, .fgroup select, .fgroup textarea{
  width:100%; border:2.5px solid var(--ink); border-radius:13px; padding:13px 15px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink); transition:box-shadow .12s, border-color .12s;
}
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus{ outline:none; box-shadow:3px 3px 0 var(--coral); border-color:var(--coral); }
.fgroup textarea{ resize:vertical; min-height:78px; }
.fgroup.err input, .fgroup.err select{ border-color:var(--coral); box-shadow:3px 3px 0 rgba(232,85,31,.4); }
.fgroup .errmsg{ display:none; color:var(--coral-d); font-size:12.5px; font-weight:600; margin-top:6px; }
.fgroup.err .errmsg{ display:block; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-card .submit{ width:100%; justify-content:center; margin-top:8px; }
.form-card .agree{ font-size:12px; color:var(--sub); margin-top:14px; text-align:center; line-height:1.6; }
.form-success{ display:none; text-align:center; padding:40px 10px; }
.form-success.show{ display:block; }
.form-success .em{ font-size:60px; }
.form-success h3{ font-size:24px; margin:14px 0 8px; }
.form-success p{ color:var(--sub); font-size:15px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width:820px; margin:48px auto 0; }
.faq{ background:var(--paper); border:var(--bd); border-radius:18px; box-shadow:var(--shadow-sm); margin-bottom:14px; overflow:hidden; }
.faq .q{ padding:22px 26px; font-size:17px; font-weight:800; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; letter-spacing:-.3px; }
.faq .q .plus{ font-family:"Fredoka"; font-weight:600; font-size:26px; color:var(--coral); flex-shrink:0; transition:transform .25s ease; line-height:1; }
.faq.open .q .plus{ transform:rotate(45deg); }
.faq .a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq .a p{ padding:0 26px 24px; color:var(--ink-2); font-size:15px; line-height:1.75; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#9FAAB7; padding:60px 0 36px; border-top:5px solid var(--coral); }
.footer .ftop{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid #2C3A4B; }
.footer .brand{ display:flex; align-items:center; gap:12px; }
.footer .brand .mark{ width:48px; height:48px; border-radius:14px; background:var(--coral); border:2.5px solid #000; display:grid; place-items:center; }
.footer .brand .mark img{ width:38px; height:38px; filter:brightness(0) invert(1); }
.footer .brand .nm{ color:#fff; font-weight:800; font-size:20px; }
.footer .brand .sl{ font-family:"Fredoka"; font-size:13px; color:#4FD6D6; }
.footer .fcols{ display:flex; gap:60px; }
.footer .fcol h5{ color:#fff; font-size:14px; margin-bottom:12px; }
.footer .fcol a, .footer .fcol div{ display:block; font-size:13.5px; padding:4px 0; }
.footer .fbot{ margin-top:24px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer .disc{ margin-top:18px; font-size:11.5px; color:#6A7889; line-height:1.7; max-width:900px; }

/* ============================================================
   DUAL PRO (델리 프로 · 음료 프로)
   ============================================================ */
.dualpro{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:54px; position:relative; }
.pro{ background:var(--paper); border:var(--bd); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.pro:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.pro .pimg{ aspect-ratio:16/10; overflow:hidden; border-bottom:var(--bd); background:var(--cream); position:relative; }
.pro .pimg img{ width:100%; height:100%; object-fit:cover; }
.pro .pimg .plabel{ position:absolute; top:16px; left:16px; font-family:"Fredoka"; font-weight:700; font-size:13px; letter-spacing:1px; padding:6px 14px; border:2.5px solid var(--ink); border-radius:30px; box-shadow:2px 2px 0 var(--ink); color:#fff; }
.pro .pbody{ padding:28px 30px 32px; }
.pro .pk{ font-family:"Fredoka"; font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--sub); }
.pro h3{ font-size:25px; font-weight:800; letter-spacing:-.6px; margin:7px 0 11px; }
.pro p{ color:var(--ink-2); font-size:15.5px; line-height:1.72; }
.pro p b{ color:var(--coral-d); }
.dualpro .amp{ position:absolute; left:50%; top:32%; transform:translate(-50%,-50%) rotate(-8deg); z-index:6; width:90px; height:90px; border-radius:50%; background:var(--sun); border:var(--bd); box-shadow:var(--shadow); display:grid; place-items:center; }
.dualpro .amp span{ font-family:"Fredoka"; font-weight:700; font-size:36px; color:var(--ink); line-height:1; }

/* ============================================================
   COMPARISON (정보공개서 기준 격차)
   ============================================================ */
.compare{ margin-top:60px; background:var(--paper); border:var(--bd); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; }
.compare .ch{ background:var(--ink); color:#fff; padding:22px 32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.compare .ch h3{ font-size:21px; font-weight:800; letter-spacing:-.5px; }
.compare .ch .pill{ font-family:"Fredoka"; font-size:13px; font-weight:600; background:#2C3A4B; border:2px solid #44546A; border-radius:30px; padding:5px 13px; margin-left:auto; }
.compare .cbody{ padding:38px 32px; }
.cmp-row{ display:grid; grid-template-columns:210px 1fr; align-items:center; gap:20px; margin-bottom:18px; }
.cmp-row:last-of-type{ margin-bottom:0; }
.cmp-row .lab{ font-weight:800; font-size:15.5px; }
.cmp-row .lab .s{ display:block; font-size:12.5px; color:var(--sub); font-weight:600; margin-top:3px; }
.cmp-bar{ height:58px; border:2.5px solid var(--ink); border-radius:13px; display:flex; align-items:center; justify-content:flex-end; padding:0 18px; font-family:"Fredoka"; font-weight:700; font-size:23px; color:#fff; box-shadow:3px 3px 0 var(--ink); white-space:nowrap; transition:width 1.15s cubic-bezier(.2,.7,.2,1); }
.cmp-bar.comp{ background:#97A4B2; width:47%; }
.cmp-bar.us{ background:var(--coral); width:94%; }
.js .reveal:not(.in) .cmp-bar{ width:0 !important; }
.cmp-note{ margin-top:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--cream); border:2px solid var(--line); border-radius:16px; padding:22px 26px; }
.cmp-note .x2{ font-family:"Fredoka"; font-weight:700; font-size:48px; color:var(--coral); line-height:1; }
.cmp-note p{ font-size:15.5px; color:var(--ink-2); line-height:1.65; flex:1; min-width:260px; }
.cmp-note p b{ color:var(--coral-d); }

/* ============================================================
   PROMO (가맹비·교육비 면제)
   ============================================================ */
.promo{ margin-top:6px; margin-bottom:42px; background:linear-gradient(135deg,var(--coral),var(--coral-d)); border:3px solid var(--ink); border-radius:26px; box-shadow:var(--shadow); padding:32px 40px; display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; position:relative; overflow:hidden; color:#fff; }
.promo .halftone-bg{ position:absolute; inset:0; opacity:.10; background-image:radial-gradient(#fff 1.4px,transparent 1.5px); background-size:14px 14px; pointer-events:none; }
.promo .stamp{ width:122px; height:122px; border-radius:50%; background:var(--sun); border:3px solid var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.35); display:grid; place-items:center; transform:rotate(-9deg); position:relative; z-index:2; padding:10px; animation:bob 4s ease-in-out infinite; }
@keyframes bob2{ 0%,100%{ transform:rotate(-9deg) translateY(0);} 50%{ transform:rotate(-9deg) translateY(-7px);} }
.promo .stamp{ animation-name:bob2; }
.promo .stamp img{ width:100%; height:100%; object-fit:contain; }
.promo .pcopy{ position:relative; z-index:2; }
.promo .pcopy .k{ display:inline-block; font-family:"Fredoka"; font-weight:600; letter-spacing:2px; font-size:12.5px; text-transform:uppercase; background:rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.5); border-radius:30px; padding:5px 14px; }
.promo .pcopy h3{ font-size:clamp(26px,3.6vw,42px); font-weight:800; letter-spacing:-1.2px; margin:12px 0 8px; line-height:1.08; }
.promo .pcopy h3 .sun{ color:var(--sun); }
.promo .pcopy p{ font-size:15px; opacity:.95; }
.promo .pprice{ position:relative; z-index:2; text-align:right; flex-shrink:0; }
.promo .pprice .was{ font-family:"Fredoka"; font-weight:600; font-size:22px; text-decoration:line-through; opacity:.72; }
.promo .pprice .now{ font-family:"Fredoka"; font-weight:700; font-size:clamp(40px,5vw,58px); line-height:.95; color:var(--sun); }
.promo .pprice .now small{ font-size:20px; }

.free{ display:inline-block; background:var(--coral); color:#fff; border:2.5px solid var(--ink); border-radius:30px; padding:4px 14px; font-family:"Fredoka"; font-weight:700; font-size:15px; box-shadow:2px 2px 0 var(--ink); }
.crow .cv .strike{ text-decoration:line-through; color:var(--sub); font-size:15px; margin-right:9px; font-weight:600; font-family:"Fredoka"; }
.tag-mini{ display:inline-block; font-size:11px; font-weight:700; color:var(--coral-d); background:var(--cream); border:1.5px solid #ffd9c5; border-radius:20px; padding:2px 9px; margin-left:7px; vertical-align:middle; }
.vat-note{ margin-top:14px; font-size:12.5px; color:var(--sub); font-weight:600; }

/* standard 15평 cost breakdown */
.cost-breakdown{ margin-top:36px; background:var(--paper); border:var(--bd); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.cost-breakdown .ch{ background:var(--ink); color:#fff; padding:18px 26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.cost-breakdown .ch h3{ font-size:17px; font-weight:800; }
.cost-breakdown .ch .pyeong{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px; letter-spacing:1px; color:var(--ink); background:var(--sun); border-radius:30px; padding:5px 13px; }
.cb-grid{ display:grid; grid-template-columns:1fr 1fr; }
.cb-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 26px; border-bottom:1px solid var(--line); }
.cb-item:nth-child(odd){ border-right:1px solid var(--line); }
.cb-item .cbl{ font-weight:700; font-size:14.5px; }
.cb-item .cbl small{ display:block; font-weight:500; font-size:11.5px; color:var(--sub); margin-top:2px; }
.cb-item .cbv{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:17px; color:var(--ink); white-space:nowrap; }
.cb-item .cbv small{ font-size:12px; font-weight:600; }
.cb-total{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 26px; background:var(--coral); color:#fff; flex-wrap:wrap; }
.cb-total .l{ font-weight:800; font-size:16px; }
.cb-total .l small{ display:block; font-weight:600; font-size:11.5px; opacity:.9; margin-top:2px; }
.cb-total .v{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:27px; }
.cb-total .v small{ font-size:15px; }
.cb-item.fee{ background:rgba(255,194,51,.12); }
.cb-item .cb-strike{ text-decoration:line-through; color:var(--sub); font-size:13px; font-weight:600; margin-right:3px; }
.cb-item .cb-free{ color:var(--coral-d); font-weight:800; font-family:"Fredoka",sans-serif; font-size:16px; }
.cb-total .cb-strike{ text-decoration:line-through; opacity:.72; font-size:18px; font-weight:600; margin-right:4px; }
@media(max-width:680px){ .cb-grid{ grid-template-columns:1fr; } .cb-item:nth-child(odd){ border-right:0; } }

/* ============================================================
   VOC (실제 리뷰 근거)
   ============================================================ */
.voc-stats{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:48px; background:var(--paper); border:var(--bd); border-radius:24px; box-shadow:var(--shadow); padding:24px 30px; }
.voc-stats .vstat{ text-align:center; padding:4px 24px; }
.voc-stats .vstat .n{ font-family:"Fredoka"; font-weight:700; font-size:46px; line-height:1; color:var(--coral); }
.voc-stats .vstat .n small{ font-size:18px; }
.voc-stats .vstat .l{ font-size:13px; color:var(--sub); font-weight:600; margin-top:6px; }
.voc-stats .vsep{ width:2px; align-self:stretch; background:var(--line); margin:4px 0; }
.voc-stats .vsrc{ margin-left:auto; font-size:13px; color:var(--sub); line-height:1.65; text-align:right; }
.voc-stats .vsrc b{ color:var(--ink); font-size:15px; }
.rv .rvtag{ display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:700; color:var(--coral-d); background:var(--cream); border:1.5px solid #ffd9c5; border-radius:20px; padding:3px 11px; margin-bottom:13px; }
.rv .rvtag .cnt{ color:var(--sub); font-weight:600; }
.review-grid.four{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .review-grid.four{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .review-grid.four{ grid-template-columns:1fr; } .voc-stats .vsrc{ margin-left:0; text-align:left; width:100%; } }

/* ============================================================
   NTS — 국세청 매출 증명 (verified evidence)
   ============================================================ */
.ntscard{ margin-top:60px; background:var(--ink); color:#fff; border:var(--bd); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:1.15fr .85fr; }
.ntscard .nts-left{ padding:40px 40px 40px; display:flex; gap:24px; align-items:flex-start; }
.ntscard .seal{ flex-shrink:0; width:86px; height:86px; border-radius:50%; border:3px solid var(--sun); color:var(--sun); display:grid; place-items:center; text-align:center; font-weight:800; font-size:15px; line-height:1.25; transform:rotate(-8deg); letter-spacing:1px; }
.ntscard .nts-k{ font-family:"Fredoka"; font-weight:600; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sun); }
.ntscard .nts-left h3{ font-size:25px; font-weight:800; letter-spacing:-.6px; margin:8px 0 12px; }
.ntscard .nts-left p{ font-size:15px; color:#C7D0DB; line-height:1.7; }
.ntscard .nts-left p b{ color:#fff; }
.ntscard .nts-right{ background:#23303F; border-left:2.5px solid var(--ink); padding:40px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.ntscard .nts-right::before{ content:"✔ VERIFIED"; position:absolute; top:18px; right:22px; font-family:"Fredoka"; font-weight:600; font-size:11px; letter-spacing:1.5px; color:var(--teal); border:2px solid var(--teal); border-radius:30px; padding:3px 10px; }
.ntscard .nts-fig .l{ font-size:13px; color:#9FAAB7; margin-bottom:8px; }
.ntscard .nts-fig .v{ font-family:"Fredoka"; font-weight:700; font-size:clamp(34px,4.4vw,46px); line-height:1; color:var(--sun); letter-spacing:-1px; }
.ntscard .nts-row{ display:flex; gap:14px; margin-top:22px; padding-top:20px; border-top:1px solid #3A4654; }
.ntscard .nts-row .nr{ flex:1; }
.ntscard .nts-row .nr .rl{ font-size:11.5px; color:#9FAAB7; }
.ntscard .nts-row .nr .rv2{ font-size:14px; font-weight:700; margin-top:3px; }
.ntscard .nts-meta{ margin-top:18px; font-size:12px; color:#8794A2; line-height:1.6; }
@media(max-width:860px){ .ntscard{ grid-template-columns:1fr; } .ntscard .nts-right{ border-left:none; border-top:2.5px solid var(--ink); } }

/* ============================================================
   STORY (아주 심플한 브랜드 이야기)
   ============================================================ */
.story-mascot{ width:118px; height:auto; margin:0 auto 10px; display:block; }
.story p{ font-size:clamp(16px,1.7vw,19px); color:var(--ink-2); line-height:1.9; margin-top:22px; }
.story p b{ color:var(--coral-d); }
.slogan-mark{ margin-top:28px; font-family:"Fredoka"; font-weight:600; font-size:clamp(22px,2.6vw,28px); color:var(--coral); letter-spacing:.5px; }

/* ============================================================
   MENU BOARDS (실제 메뉴판) + DELIVERY
   ============================================================ */
.menu-boards{ display:grid; gap:22px; margin-top:50px; }
.menu-board{ border:var(--bd); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); background:var(--cream); }
.menu-board img{ width:100%; display:block; }
.menu-board .mb-cap{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 22px; background:var(--paper); border-top:var(--bd); }
.menu-board .mb-cap .t{ font-weight:800; font-size:15px; }
.menu-board .mb-cap .s{ font-size:12.5px; color:var(--sub); }
.menu-extra{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; margin-top:24px; align-items:stretch; }
.me-best{ background:var(--paper); border:var(--bd); border-radius:20px; box-shadow:var(--shadow); padding:26px 28px; }
.me-best .me-k{ font-family:"Fredoka"; font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--coral-d); }
.me-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:14px 0 14px; }
.me-chips span{ display:inline-flex; align-items:center; gap:6px; background:var(--cream); border:2px solid var(--ink); border-radius:30px; padding:7px 15px; font-weight:800; font-size:14px; box-shadow:2px 2px 0 var(--ink); }
.me-best p{ font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.me-best p b{ color:var(--coral-d); }
.aov-box.tall{ flex-direction:column; align-items:stretch; justify-content:center; gap:18px; }
.aov-box.tall .div{ width:auto; height:2px; }

/* delivery */
.deliv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:50px; }
.deliv-visual{ position:relative; }
.deliv-visual .frame{ border:3px solid var(--ink); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--coral); }
.deliv-visual .frame img{ width:100%; height:100%; object-fit:cover; }
.deliv-visual .float-tag{ position:absolute; bottom:-20px; right:-14px; background:var(--teal); color:#fff; border:var(--bd); border-radius:18px; padding:14px 20px; box-shadow:var(--shadow-sm); transform:rotate(3deg); }
.deliv-visual .float-tag .n{ font-family:"Fredoka"; font-weight:700; font-size:24px; line-height:1; }
.deliv-visual .float-tag .l{ font-size:12px; font-weight:700; margin-top:3px; }
.deliv-points{ display:grid; gap:16px; margin-top:24px; }
.deliv-pt{ display:flex; gap:16px; align-items:flex-start; }
.deliv-pt .ic{ width:50px; height:50px; flex-shrink:0; border-radius:15px; display:grid; place-items:center; font-size:23px; border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.deliv-pt h4{ font-size:18px; font-weight:800; }
.deliv-pt p{ font-size:14.5px; color:var(--ink-2); line-height:1.65; margin-top:4px; }
.deliv-platforms{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.deliv-platforms span{ font-weight:800; font-size:14px; background:var(--cream); border:2px solid var(--ink); border-radius:30px; padding:8px 16px; box-shadow:2px 2px 0 var(--ink); }
@media(max-width:860px){ .menu-extra{ grid-template-columns:1fr; } .deliv-grid{ grid-template-columns:1fr; gap:36px; } }

/* delivery app phone mockups */
.deliv-phones{ display:flex; justify-content:center; align-items:flex-start; gap:20px; }
.phone{ width:250px; flex-shrink:0; background:#fff; border:3px solid var(--ink); border-radius:30px; box-shadow:var(--shadow); overflow:hidden; }
.phone:first-child{ transform:rotate(-2deg); }
.phone:last-child{ transform:rotate(2deg); margin-top:18px; }
.phone .pstatus{ height:26px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-family:"Fredoka"; font-size:11px; font-weight:600; color:var(--ink); }
.phone .pbar{ padding:9px 14px; display:flex; align-items:center; gap:7px; color:#fff; font-weight:800; font-size:13px; }
.phone .pbar .pdot{ width:16px; height:16px; border-radius:5px; background:rgba(255,255,255,.9); }
.phone .phero{ height:108px; overflow:hidden; background:var(--coral); position:relative; }
.phone .phero img{ width:100%; height:100%; object-fit:cover; }
.phone .phero .pbadge{ position:absolute; top:10px; left:10px; background:var(--ink); color:#fff; font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; }
.phone .pbody{ padding:13px 15px 16px; }
.phone .pname{ font-size:16px; font-weight:800; letter-spacing:-.3px; }
.phone .prate{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:12.5px; font-weight:700; }
.phone .prate .stars{ color:var(--sun-d); letter-spacing:1px; }
.phone .prate .cnt{ color:var(--sub); font-weight:600; }
.phone .pmeta{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.phone .pmeta span{ font-size:10.5px; font-weight:700; background:var(--cream); border:1.5px solid var(--line); border-radius:20px; padding:3px 8px; color:var(--ink-2); }
.phone .pmeta span.free{ background:#E7F6F1; border-color:#bce6d6; color:var(--teal-d); }
.phone .pmenu{ margin-top:13px; border-top:1px solid var(--line); }
.phone .pitem{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.phone .pitem .pthumb{ width:42px; height:42px; border-radius:9px; overflow:hidden; border:2px solid var(--ink); flex-shrink:0; background:var(--coral); }
.phone .pitem .pthumb img{ width:100%; height:100%; object-fit:cover; }
.phone .pitem .pinfo{ flex:1; min-width:0; }
.phone .pitem .pi-nm{ font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone .pitem .pi-tag{ font-size:10px; color:var(--coral-d); font-weight:700; }
.phone .pitem .pi-pr{ font-family:"Fredoka"; font-weight:700; font-size:13px; }
.phone .pcta{ margin-top:13px; background:var(--coral); color:#fff; text-align:center; font-weight:800; font-size:13px; padding:11px; border-radius:12px; border:2.5px solid var(--ink); }
.deliv-caption{ text-align:center; font-size:12.5px; color:var(--sub); margin-top:22px; }

/* auto coffee machine illustration */
.machine-mock{ position:relative; aspect-ratio:1/1; border:3px solid var(--ink); border-radius:24px; box-shadow:var(--shadow); overflow:hidden;
  background:repeating-linear-gradient(45deg,#FFF1E4,#FFF1E4 12px,#FBE8D6 12px,#FBE8D6 24px); display:grid; place-items:center; }
.machine{ width:60%; display:flex; flex-direction:column; align-items:center; }
.machine .m-body{ width:100%; background:var(--ink); border:3px solid var(--ink); border-radius:18px 18px 6px 6px; padding:16px 16px 0; box-shadow:6px 6px 0 rgba(0,0,0,.25); }
.machine .m-screen{ height:30px; border-radius:7px; background:var(--teal); border:2px solid #0b6f6f; display:grid; place-items:center; color:#fff; font-family:"Fredoka"; font-weight:600; font-size:12px; }
.machine .m-btns{ display:flex; gap:7px; justify-content:center; margin:12px 0; }
.machine .m-btns i{ width:16px; height:16px; border-radius:50%; background:var(--sun); border:2px solid #b9810f; display:block; }
.machine .m-spouts{ display:flex; gap:24px; justify-content:center; padding-bottom:6px; }
.machine .m-spouts i{ width:8px; height:16px; background:#3A4654; border-radius:0 0 4px 4px; display:block; }
.machine .m-cup{ width:46px; height:38px; margin-top:-2px; background:#fff; border:3px solid var(--ink); border-radius:4px 4px 14px 14px; position:relative; }
.machine .m-cup::after{ content:""; position:absolute; left:6px; right:6px; top:6px; height:10px; background:var(--coral); border-radius:3px; }
.machine-mock .m-tag{ position:absolute; top:14px; right:14px; background:#fff; border:2px solid var(--ink); border-radius:20px; padding:4px 11px; font-size:11px; font-weight:800; box-shadow:2px 2px 0 var(--ink); }
.machine-mock .m-easy{ position:absolute; bottom:-16px; left:-14px; background:var(--sun); border:var(--bd); border-radius:50%; width:104px; height:104px; display:grid; place-content:center; text-align:center; box-shadow:var(--shadow); transform:rotate(-10deg); }
.machine-mock .m-easy b{ font-family:"Fredoka"; font-weight:700; font-size:30px; line-height:1; }
.machine-mock .m-easy span{ font-size:11px; font-weight:700; margin-top:2px; }
@media(max-width:560px){ .deliv-phones{ flex-direction:column; align-items:center; } .phone:first-child,.phone:last-child{ transform:none; margin-top:0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .hero .hero-grid{ grid-template-columns:1fr; gap:50px; }
  .reframe .cards3{ grid-template-columns:1fr; }
  .concept-grid{ grid-template-columns:1fr; }
  .menu-layout{ grid-template-columns:1fr; gap:36px; }
  .menu-hero-img{ position:static; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .store-grid{ grid-template-columns:1fr; }
  .ops-grid{ grid-template-columns:1fr; gap:40px; }
  .sim-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step .conn{ display:none; }
  .cost-wrap{ grid-template-columns:1fr; }
  .review-grid{ grid-template-columns:1fr; }
  .cta-grid{ grid-template-columns:1fr; gap:40px; }
  .bars{ font-size:.85em; }
  .dualpro{ grid-template-columns:1fr; gap:50px; }
  .dualpro .amp{ top:auto; left:50%; bottom:calc(50% - 6px); transform:translate(-50%,50%) rotate(-8deg); }
  .promo{ grid-template-columns:1fr; text-align:center; gap:18px; justify-items:center; padding:30px 26px; }
  .promo .pprice{ text-align:center; }
  .cmp-row{ grid-template-columns:1fr; gap:8px; }
}
@media(max-width:560px){
  .wrap{ padding:0 20px; }
  .sec, .proof, .reframe, .cta{ padding:70px 0; }
  .hero{ padding:120px 0 70px; }
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .kpi{ padding:22px 18px; }
  .frow{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .hero .trust{ gap:18px; }
  .bars{ grid-template-columns:1fr; gap:10px; }
  .bridge .plus{ display:none; }
  .bar-col .bar{ min-height:60px !important; }
  .aov-box{ flex-direction:column; align-items:flex-start; }
  .aov-box .div{ display:none; }
  .menu-list .thumb{ width:60px; height:60px; }
  .hero-mascot{ width:108px; height:108px; right:-14px; }
  .cmp-bar{ font-size:18px; height:50px; }
  .cmp-note .x2{ font-size:38px; }
}

/* ============================================================
   STABILITY DATA — daily rhythm chart + fact cards
   ============================================================ */
.stab-head .eyebrow{ color:var(--coral-d); }
.rhythm{
  background:var(--paper); border:var(--bd); border-radius:var(--r);
  box-shadow:var(--shadow); padding:30px 30px 26px; margin-bottom:30px;
}
.rhythm-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 22px; margin-bottom:22px; }
.rhythm-top h3{ font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.6px; line-height:1.25; }
.rhythm-top h3 b{ color:var(--coral-d); }
.rhythm-legend{ display:flex; gap:16px; flex-wrap:wrap; }
.rhythm-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.rhythm-legend i{ width:13px; height:13px; border-radius:4px; border:2px solid var(--ink); }
.lg-hol{ background:var(--sun); } .lg-del{ background:var(--teal); } .lg-dan{ background:var(--coral); }

.chart{ position:relative; }
.chart-rows{ display:flex; align-items:stretch; gap:clamp(4px,1.1vw,11px); height:216px; padding-top:8px; border-bottom:2.5px solid var(--ink); }
.hr-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; min-width:0; position:relative; }
.hr-stack{ width:100%; max-width:34px; flex:1 1 0; min-height:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; position:relative; z-index:1; }
.seg{ width:100%; flex:0 0 auto; border:1.5px solid var(--ink); border-bottom-width:0; height:calc(var(--v,0) * 6.3px); transition:height .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal:not(.in) .seg{ height:0; }
.hr-stack .seg:first-child{ border-radius:5px 5px 0 0; }
.hr-stack .seg:last-child{ border-bottom-width:1.5px; }
.seg.hol{ background:var(--sun); } .seg.del{ background:var(--teal); } .seg.dan{ background:var(--coral); }
.seg[style*="--v:0"]{ border:0; }
.hr-x{ font-family:"Fredoka",sans-serif; font-size:12px; color:var(--sub); position:relative; z-index:1; }
.hr-col.peak .hr-x{ color:var(--ink); font-weight:700; }
/* idle-time highlight — anchored to columns (robust) */
.hr-col.idle::before{ content:""; position:absolute; left:-2px; right:-2px; top:-6px; bottom:0; background:rgba(15,163,163,.11); }
.hr-col.idle.s::before{ border-radius:8px 0 0 0; border-left:1.5px dashed rgba(15,163,163,.5); }
.hr-col.idle.e::before{ border-radius:0 8px 0 0; border-right:1.5px dashed rgba(15,163,163,.5); }
.hr-col.idle::after{ content:""; }
.idle-lab{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; white-space:nowrap; z-index:3;
  font-size:11.5px; font-weight:800; color:var(--teal-d); background:var(--paper); border:1.5px solid var(--teal); border-radius:20px; padding:3px 11px; box-shadow:2px 2px 0 rgba(15,163,163,.35); }
.rhythm-phases{ display:flex; gap:12px; margin-top:18px; }
.phase{ flex:1; background:var(--cream); border:2px solid var(--ink); border-radius:14px; padding:12px 14px; }
.phase .pt{ font-size:13.5px; font-weight:800; }
.phase .pd{ font-size:12.5px; color:var(--sub); margin-top:3px; line-height:1.45; }
.rhythm-insight{ display:flex; align-items:center; gap:12px; margin-top:18px; background:var(--ink); color:#fff; border-radius:14px; padding:15px 20px; }
.rhythm-insight .em{ font-size:24px; }
.rhythm-insight p{ font-size:15px; line-height:1.5; }
.rhythm-insight b{ color:var(--sun); }

.stab-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stab-card{ background:var(--paper); border:var(--bd); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:26px 22px; }
.stab-card .sk{ font-family:"Fredoka",sans-serif; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sub); }
.stab-card .sv{ font-size:clamp(30px,3.6vw,40px); line-height:1.05; margin:10px 0 4px; }
.stab-card .sv small{ font-size:16px; font-weight:700; margin-left:3px; }
.stab-card .sl{ font-size:15px; font-weight:800; }
.stab-card .sd{ font-size:13px; color:var(--sub); line-height:1.55; margin-top:8px; }
.stab-card.c-teal .sv{ color:var(--teal-d); } .stab-card.c-coral .sv{ color:var(--coral-d); } .stab-card.c-sun .sv{ color:var(--sun-d); } .stab-card.c-ink .sv{ color:var(--ink); }
.stab-note{ font-size:12px; color:var(--sub); margin-top:18px; line-height:1.6; }
@media(max-width:820px){ .stab-grid{ grid-template-columns:1fr 1fr; } .rhythm-phases{ flex-direction:column; } }
@media(max-width:560px){
  .stab-grid{ grid-template-columns:1fr 1fr; }
  .chart-rows{ height:170px; }
  .seg{ height:calc(var(--v,0) * 4.6px); }
  .rhythm{ padding:22px 18px; }
  .chart-band .bl{ font-size:10px; }
}

/* ============================================================
   GROUP ORDERS — evidence (photo + POS receipts)
   ============================================================ */
.grp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; }
.grp-photo{ position:relative; border:var(--bd); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); min-height:420px; }
.grp-photo>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.grp-photo .gbadge{ position:absolute; top:18px; left:18px; right:18px; display:flex; flex-wrap:wrap; gap:8px; }
.grp-photo .gb{ font-size:13px; font-weight:800; color:#fff; background:rgba(26,35,48,.86); border:1.5px solid rgba(255,255,255,.35); border-radius:30px; padding:6px 13px; backdrop-filter:blur(3px); }
.grp-photo .gb.sun{ background:var(--sun); color:var(--ink); border-color:var(--ink); }
.grp-cap{ position:absolute; left:0; right:0; bottom:0; padding:48px 22px 20px; background:linear-gradient(transparent, rgba(26,35,48,.92)); color:#fff; }
.grp-cap .qty{ font-family:"Fredoka",sans-serif; font-size:34px; line-height:1; }
.grp-cap .qty small{ font-size:16px; font-weight:700; margin-left:4px; }
.grp-cap p{ font-size:14px; color:#E6ECF2; margin-top:7px; line-height:1.5; }

.grp-receipts{ display:flex; flex-direction:column; justify-content:center; gap:20px; }
.receipt{ background:#FBFAF6; border:2px solid var(--ink); border-radius:5px; padding:20px 22px 16px; position:relative;
  font-family:"Fredoka","SF Mono",ui-monospace,monospace; box-shadow:5px 5px 0 rgba(26,35,48,.18); }
.receipt:nth-child(1){ transform:rotate(-1.1deg); } .receipt:nth-child(2){ transform:rotate(.9deg); }
.receipt::before, .receipt::after{ content:""; position:absolute; left:-2px; right:-2px; height:7px;
  background:repeating-linear-gradient(90deg,#FBFAF6 0 8px,transparent 8px 16px); }
.receipt::before{ top:-5px; } .receipt::after{ bottom:-5px; transform:scaleY(-1); }
.r-top{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px dashed #C9C2B4; padding-bottom:9px; }
.r-logo{ font-size:18px; font-weight:700; letter-spacing:1px; }
.r-store{ font-size:13px; font-weight:600; color:var(--ink-2); }
.r-meta{ font-size:11.5px; color:var(--sub); margin:8px 0; letter-spacing:.2px; }
.r-tag{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--coral-d); background:rgba(232,85,31,.1); border:1.5px solid rgba(232,85,31,.35); border-radius:6px; padding:3px 9px; margin-bottom:10px; }
.r-line{ display:grid; grid-template-columns:1fr auto auto; gap:10px; font-size:13px; color:var(--ink); padding:3.5px 0; }
.r-line .q{ color:var(--sub); }
.r-line .a{ text-align:right; min-width:62px; }
.r-total{ display:flex; align-items:baseline; justify-content:space-between; border-top:2px dashed #C9C2B4; margin-top:9px; padding-top:10px; font-size:15px; font-weight:700; }
.r-total .tv{ font-size:19px; color:var(--coral-d); }
.r-foot{ text-align:center; font-size:11px; color:var(--sub); margin-top:10px; letter-spacing:.3px; }
.grp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
.gstat{ background:var(--paper); border:var(--bd); border-radius:18px; box-shadow:var(--shadow-sm); padding:22px 20px; text-align:center; }
.gstat .gv{ font-family:"Fredoka",sans-serif; font-size:clamp(26px,3.2vw,34px); line-height:1; color:var(--ink); }
.gstat .gv small{ font-size:15px; font-weight:700; margin-left:2px; }
.gstat.t .gv{ color:var(--teal-d); } .gstat.c .gv{ color:var(--coral-d); }
.gstat .gl{ font-size:13px; font-weight:800; margin-top:8px; }
.gstat .gd{ font-size:11.5px; color:var(--sub); margin-top:4px; line-height:1.4; }
@media(max-width:860px){
  .grp-grid{ grid-template-columns:1fr; }
  .grp-photo{ min-height:300px; }
  .grp-stats{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   FLOATING QUICK MENU
   ============================================================ */
.floatmenu{ position:fixed; right:22px; bottom:22px; z-index:300; display:flex; flex-direction:column; gap:11px; align-items:flex-end; }
.fab{ display:inline-flex; align-items:center; gap:0; height:54px; padding:0; width:54px; justify-content:center;
  border:var(--bd); border-radius:50px; background:var(--paper); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .14s ease, width .2s ease, background .15s ease;
  font-weight:800; font-size:15px; overflow:hidden; white-space:nowrap; position:relative; }
.fab .fi{ font-size:22px; width:54px; min-width:54px; text-align:center; line-height:1; }
.fab .ft{ opacity:0; max-width:0; transition:opacity .18s ease, max-width .2s ease, margin .2s ease; margin:0; }
.fab:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); width:auto; padding-right:22px; }
.fab:hover .ft{ opacity:1; max-width:200px; margin-right:2px; }
.fab.primary{ background:var(--coral); color:#fff; }
.fab.kakao{ background:#FAE100; color:#3A1D1D; }
.fab.tel{ background:var(--teal); color:#fff; }
.fab.top{ width:48px; height:48px; opacity:0; pointer-events:none; transform:translateY(8px); }
.fab.top .fi{ width:48px; min-width:48px; font-size:20px; }
.fab.top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
/* pulse ring on the primary quick-consult fab */
.fab.primary::after{ content:""; position:absolute; inset:-2px; border-radius:50px; border:2.5px solid var(--coral); opacity:0; }
@media (prefers-reduced-motion:no-preference){ .fab.primary::after{ animation:fabPulse 2.4s ease-out infinite; } }
@keyframes fabPulse{ 0%{ opacity:.55; transform:scale(1); } 70%,100%{ opacity:0; transform:scale(1.35); } }

@media(max-width:760px){
  body{ padding-bottom:74px; }
  .floatmenu{ right:0; left:0; bottom:0; flex-direction:row; gap:0; align-items:stretch;
    background:var(--paper); border-top:var(--bd); box-shadow:0 -4px 0 rgba(26,35,48,.08); padding:0; }
  .fab{ flex:1; height:62px; width:auto; border:0; border-radius:0; box-shadow:none; flex-direction:column; gap:3px;
    font-size:11.5px; padding:8px 4px; border-right:2px solid var(--line); }
  .fab:last-child{ border-right:0; }
  .fab:hover{ transform:none; box-shadow:none; width:auto; padding-right:4px; }
  .fab .fi{ width:auto; min-width:0; font-size:20px; }
  .fab .ft{ opacity:1; max-width:none; margin:0; font-weight:800; }
  .fab.top{ display:none; }
}

/* ============================================================
   MODALS (quick consult + promo popup)
   ============================================================ */
.modal-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(15,18,24,.62); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{ position:relative; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  background:var(--paper); border:var(--bd); border-radius:var(--r); box-shadow:8px 8px 0 rgba(0,0,0,.4);
  transform:translateY(16px) scale(.98); transition:transform .26s cubic-bezier(.18,1.1,.4,1); }
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top:14px; right:14px; z-index:4; width:38px; height:38px; border:2.5px solid var(--ink);
  border-radius:50%; background:var(--paper); color:var(--ink); font-size:20px; font-weight:800; cursor:pointer;
  display:grid; place-items:center; line-height:1; transition:transform .12s ease, background .12s ease; }
.modal-close:hover{ transform:rotate(90deg); background:var(--sun); }
.modal-pad{ padding:34px 30px 28px; }

/* quick consult modal */
.qhead{ margin-bottom:18px; }
.qhead .qk{ font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--coral-d); }
.qhead h3{ font-size:25px; font-weight:800; letter-spacing:-.6px; margin-top:6px; line-height:1.2; }
.qhead p{ font-size:13.5px; color:var(--sub); margin-top:8px; line-height:1.55; }
.modal .fgroup{ margin-bottom:13px; }
.modal .agree-check{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 16px; font-size:12px; color:var(--sub); line-height:1.5; cursor:pointer; }
.modal .agree-check input{ width:18px; height:18px; min-width:18px; margin-top:1px; accent-color:var(--coral); cursor:pointer; }
.modal .agree-check.err{ color:var(--coral-d); }
.modal .quick-success{ display:none; text-align:center; padding:14px 4px 6px; }
.modal .quick-success.show{ display:block; }
.modal .quick-success .em{ font-size:46px; }
.modal .quick-success h3{ font-size:23px; font-weight:800; margin:10px 0 6px; }
.modal .quick-success p{ font-size:14px; color:var(--sub); line-height:1.6; }

/* promo popup */
.promo .modal{ max-width:430px; overflow:hidden; }
.promo-top{ background:var(--ink); color:#fff; padding:30px 30px 26px; position:relative; overflow:hidden; text-align:center; }
.promo-top .halftone-bg{ position:absolute; inset:0; opacity:.07; background-image:radial-gradient(#fff 1.4px,transparent 1.5px); background-size:14px 14px; }
.promo-flag{ display:inline-block; position:relative; z-index:2; font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink); background:var(--sun); border:2px solid #fff; border-radius:30px; padding:5px 15px; margin-bottom:14px; }
.promo-top h3{ position:relative; z-index:2; font-size:clamp(24px,6vw,30px); font-weight:800; letter-spacing:-1px; line-height:1.18; }
.promo-top h3 .sun{ color:var(--sun); }
.promo-top .sub{ position:relative; z-index:2; color:#C7D0DB; font-size:14px; margin-top:10px; line-height:1.55; }
.promo-body{ padding:24px 28px 26px; }
.promo-list{ display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
.promo-list li{ list-style:none; display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; color:var(--ink); }
.promo-list .pc{ width:30px; min-width:30px; height:30px; border-radius:9px; border:2.5px solid var(--ink); display:grid; place-items:center; font-size:15px; }
.promo-list .pc.c{ background:var(--coral); } .promo-list .pc.s{ background:var(--sun); } .promo-list .pc.t{ background:var(--teal); }
.promo-list b{ color:var(--coral-d); }
.promo-cta{ width:100%; justify-content:center; }
.promo-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.promo-foot button{ background:none; border:0; cursor:pointer; font-size:13px; color:var(--sub); font-weight:600; padding:6px 2px; }
.promo-foot button:hover{ color:var(--ink); text-decoration:underline; }
.promo-foot .dismiss{ display:inline-flex; align-items:center; gap:7px; }
.promo-foot .dismiss input{ width:16px; height:16px; accent-color:var(--ink); cursor:pointer; }

@media(max-width:760px){
  .modal-pad{ padding:30px 22px 24px; }
  .modal-overlay{ padding:16px; }
}

/* ============================================================
   PACKED STORE (full-bleed busy interior)
   ============================================================ */
.packed{ position:relative; min-height:580px; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); padding:0; }
.packed .pbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.packed::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,35,48,.55) 0%, rgba(26,35,48,.05) 30%, rgba(26,35,48,.35) 62%, rgba(26,35,48,.93) 100%); }
.packed .wrap{ position:relative; z-index:2; color:#fff; padding-top:80px; padding-bottom:54px; }
.packed .peyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:"Fredoka",sans-serif; font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); background:var(--sun); border:2px solid var(--ink); border-radius:30px; padding:6px 15px; box-shadow:3px 3px 0 rgba(0,0,0,.4); }
.packed h2{ font-size:clamp(30px,5vw,52px); font-weight:800; letter-spacing:-1.5px; line-height:1.12; margin:18px 0 0; text-shadow:0 2px 18px rgba(0,0,0,.4); }
.packed h2 .sun{ color:var(--sun); }
.packed .plead{ font-size:clamp(15px,1.7vw,18px); color:#E6ECF2; line-height:1.6; margin-top:14px; max-width:560px; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.packed .pstats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.packed .ps{ background:rgba(255,253,248,.13); backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.3); border-radius:16px; padding:14px 20px; }
.packed .ps .pv{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(24px,3vw,32px); line-height:1; color:#fff; }
.packed .ps .pv .sun{ color:var(--sun); }
.packed .ps .pl{ font-size:12.5px; color:#C7D0DB; margin-top:6px; font-weight:600; }

/* ============================================================
   SNS EXPLORE FEED (interactive, auto-scrolling, looping reels)
   ============================================================ */
.sns{ background:var(--ink); color:#fff; overflow:hidden; }
.sns .sns-grid{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:40px; }
.sns-copy .eyebrow{ color:var(--sun); }
.sns-copy h2{ font-size:clamp(30px,3.6vw,46px); font-weight:800; letter-spacing:-1.2px; line-height:1.16; margin:12px 0 0; }
.sns-copy h2 .sun{ color:var(--sun); }
.sns-copy .lead{ font-size:16px; color:#C7D0DB; line-height:1.7; margin:16px auto 0; max-width:620px; }
.sns-copy .lead b{ color:#fff; }
.sns-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; justify-content:center; }
.sns-tags .tg{ font-size:13.5px; font-weight:700; color:var(--sun); background:rgba(255,194,51,.12); border:1.5px solid rgba(255,194,51,.32); border-radius:30px; padding:6px 14px; }
.sns-metrics{ display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; justify-content:center; }
.sns-metrics .m .v{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(26px,3vw,34px); line-height:1; color:#fff; }
.sns-metrics .m .v .sun{ color:var(--sun); }
.sns-metrics .m .l{ font-size:12.5px; color:#8A97A6; margin-top:7px; font-weight:600; }

/* phone */
.sns-phone{ justify-self:center; width:480px; max-width:100%; height:860px; background:#000; border:8px solid #0B0F15; border-radius:48px;
  box-shadow:0 28px 70px rgba(0,0,0,.55), inset 0 0 0 2px #2A323D; overflow:hidden; position:relative; }
.sns-phone::before{ content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:96px; height:7px; background:#0B0F15; border-radius:10px; z-index:6; }
.sns-head{ position:relative; z-index:5; background:#000; padding:30px 16px 11px; border-bottom:1px solid #1E242C; }
.sns-search{ display:flex; align-items:center; gap:9px; background:#1A1F26; border-radius:11px; padding:9px 13px; font-size:14px; color:#fff; font-weight:600; }
.sns-search .ic{ color:#8A97A6; font-size:14px; }
.sns-search .q{ flex:1; }
.sns-search .cur{ color:#8A97A6; font-weight:500; }
.sns-tabsrow{ display:flex; gap:20px; margin-top:12px; padding:0 3px; }
.sns-tabsrow span{ font-size:12.5px; color:#8A97A6; font-weight:600; padding-bottom:8px; }
.sns-tabsrow span.on{ color:#fff; border-bottom:2px solid #fff; }
.sns-viewport{ position:absolute; top:96px; left:0; right:0; bottom:0; overflow:hidden; }
.sns-viewport::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(transparent, #000); pointer-events:none; z-index:4; }
.feed{ display:flex; gap:7px; padding:7px; }
.feed .col{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; animation:snsScroll 34s linear infinite; }
.feed .col.b{ animation-duration:32s; }
.sns-phone:hover .feed .col{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .feed .col{ animation:none; } }
@keyframes snsScroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

.tile{ position:relative; border-radius:11px; overflow:hidden; background:#11161D; flex:0 0 auto; }
.tile img, .tile video{ display:block; width:100%; height:100%; object-fit:cover; }
.tile.sq{ aspect-ratio:1/1; }
.tile.reel{ aspect-ratio:9/16; }
.tile::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:64%; background:linear-gradient(transparent, rgba(0,0,0,.82)); pointer-events:none; }
.tile .cap{ position:absolute; left:9px; right:9px; bottom:9px; z-index:2; font-size:11.5px; font-weight:800; line-height:1.3; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.tile .view{ position:absolute; left:8px; bottom:8px; z-index:2; display:none; }
.tile .badge{ position:absolute; top:8px; right:8px; z-index:3; display:inline-flex; align-items:center; gap:4px; font-family:"Fredoka",sans-serif; font-weight:600; font-size:11px; color:#fff; background:rgba(0,0,0,.5); border-radius:20px; padding:3px 8px; backdrop-filter:blur(3px); }
.tile.reel .rtag, .tile .rtag{ position:absolute; top:8px; left:8px; z-index:3; font-size:14px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.col .tile:not(.reel){ aspect-ratio:4/5; }
.tile .meta{ position:absolute; left:9px; right:9px; bottom:9px; z-index:2; }
.tile .meta .cp{ font-size:11.5px; font-weight:800; line-height:1.3; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.tile .meta .vc{ display:inline-flex; align-items:center; gap:4px; font-family:"Fredoka",sans-serif; font-size:11px; color:#E6ECF2; margin-top:5px; }

@media(max-width:880px){
  .sns .sns-grid{ grid-template-columns:1fr; gap:34px; justify-items:center; }
  .sns-copy{ text-align:center; }
  .sns-copy .lead{ margin-left:auto; margin-right:auto; }
  .sns-tags, .sns-metrics{ justify-content:center; }
}

/* ============================================================
   SCENE — real store, real crowd (인천시청점 · 송도1공구점)
   ============================================================ */
.scene{ background:var(--paper); }
.scene-head .eyebrow{ color:var(--coral-d); }
.scene-collage{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,300px); grid-auto-flow:column; gap:14px; margin-top:46px; }
.scene-collage .sc{ position:relative; border:2.5px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:4px 4px 0 rgba(26,35,48,.16); }
.scene-collage .sc img{ width:100%; height:100%; object-fit:cover; display:block; }
.scene-collage .g1{ grid-row:auto; }
.scene-collage .g5{ grid-column:auto; }
.scene-collage .g6{ grid-column:auto; }
.scene-collage .g5 img{ object-position:center 42%; }
.scene-collage .g6 img{ object-position:center 55%; }
.scene-collage .g4{ grid-column:auto; }
.scene-collage .loc{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#fff; background:rgba(26,35,48,.78); border:1.5px solid rgba(255,255,255,.35); border-radius:30px; padding:5px 12px; backdrop-filter:blur(3px); }
.scene-collage .loc.sun{ background:var(--sun); color:var(--ink); border-color:var(--ink); }
.scene-collage .loc.teal{ background:var(--teal); color:#fff; border-color:var(--ink); }
.scene-collage .sc::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 26%); pointer-events:none; }
.scene-cap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:24px; padding:18px 24px; background:var(--ink); color:#fff; border-radius:16px; }
.scene-cap .big{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(18px,2.2vw,24px); }
.scene-cap .big .sun{ color:var(--sun); }
.scene-cap p{ font-size:14px; color:#C7D0DB; line-height:1.55; flex:1; min-width:240px; }
@media(max-width:980px){
  .scene-collage{ grid-template-columns:repeat(2,1fr); grid-template-rows:auto; grid-auto-flow:row; }
  .scene-collage .sc{ aspect-ratio:4/3; }
}
@media(max-width:560px){
  .scene-collage{ grid-template-columns:1fr; }
}

/* ============================================================
   REVIEW SCREENSHOTS — real 배달앱 captures
   ============================================================ */
.rv-shots{ columns:3; column-gap:18px; margin-top:46px; }
.rv-shot{ break-inside:avoid; margin:0 0 18px; position:relative; border:2.5px solid var(--ink); border-radius:16px; overflow:hidden; background:#fff; box-shadow:5px 5px 0 rgba(26,35,48,.14); }
.rv-shot img{ width:100%; display:block; }
.rv-shot .src{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:#fff; background:#2AC1BC; border:1.5px solid var(--ink); border-radius:30px; padding:3px 9px; box-shadow:2px 2px 0 rgba(26,35,48,.3); }
.rv-disc{ text-align:center; font-size:12.5px; color:var(--sub); margin-top:8px; }
@media(max-width:880px){ .rv-shots{ columns:2; } }
@media(max-width:520px){ .rv-shots{ columns:1; } }

/* ============================================================
   MOVING BELTS — menu gallery + review captures (auto-scroll)
   ============================================================ */
.belt-mask{ position:relative; overflow:hidden; margin-top:30px; }
.belt-mask::before, .belt-mask::after{ content:""; position:absolute; top:0; bottom:0; width:70px; z-index:3; pointer-events:none; }
.belt-mask::before{ left:0; background:linear-gradient(90deg, var(--belt-edge,var(--cream)), transparent); }
.belt-mask::after{ right:0; background:linear-gradient(270deg, var(--belt-edge,var(--cream)), transparent); }
.belt{ display:flex; gap:16px; width:max-content; animation:beltScroll var(--bt,46s) linear infinite; }
.belt.rev{ animation-direction:reverse; }
.belt-mask:hover .belt{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .belt{ animation:none; } }
@keyframes beltScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* menu cards in belt */
.mcard{ flex:0 0 auto; width:230px; background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; overflow:hidden; box-shadow:4px 4px 0 rgba(26,35,48,.16); }
.mcard .mc-img{ aspect-ratio:1/1; overflow:hidden; background:#000; position:relative; }
.mcard .mc-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mcard .mc-new{ position:absolute; top:10px; left:10px; z-index:2; font-family:"Fredoka",sans-serif; font-weight:700; font-size:11px; letter-spacing:.5px; color:#fff; background:var(--coral); border:2px solid var(--ink); border-radius:30px; padding:3px 10px; box-shadow:2px 2px 0 var(--ink); }
.mcard .mc-body{ padding:13px 15px 15px; }
.mcard .mc-nm{ font-size:15px; font-weight:800; letter-spacing:-.3px; }
.mcard .mc-tag{ font-size:12px; color:var(--sub); font-weight:600; margin-top:4px; }
.mcard .mc-pr{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:15px; color:var(--coral-d); margin-top:8px; }
.belt-title{ display:flex; align-items:center; gap:10px; margin:34px 0 0; font-size:15px; font-weight:800; }
.belt-title .bt-ic{ width:30px; height:30px; min-width:30px; border-radius:9px; border:2.5px solid var(--ink); display:grid; place-items:center; font-size:15px; }
.belt-title .bt-ic.c{ background:var(--coral); } .belt-title .bt-ic.t{ background:var(--teal); }
.belt-title .bt-sub{ font-size:12.5px; color:var(--sub); font-weight:600; }

/* review belt cards */
.rv-belt-mask{ --belt-edge:var(--cream); }
.rvb{ flex:0 0 auto; height:420px; position:relative; border:2.5px solid var(--ink); border-radius:16px; overflow:hidden; background:#fff; box-shadow:5px 5px 0 rgba(26,35,48,.14); }
.rvb img{ height:100%; width:auto; display:block; }
.rvb .src{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:#fff; background:#2AC1BC; border:1.5px solid var(--ink); border-radius:30px; padding:3px 9px; box-shadow:2px 2px 0 rgba(26,35,48,.3); }
@media(max-width:560px){ .rvb{ height:340px; } .mcard{ width:180px; } }


/* ============================================================
   v2 — UNCLE CHO NARRATIVE (hero cue · story · bridge)
   ============================================================ */
/* hero scroll cue */
.hero-scroll{
  display:inline-flex; align-items:center; gap:10px; margin-top:36px;
  font-weight:800; font-size:17.5px; letter-spacing:-.3px; color:var(--ink);
  border-bottom:3px solid var(--sun); padding-bottom:5px;
}
.hero-scroll .hs-arrow{ display:inline-block; color:var(--coral); font-size:19px; animation:hsbob 1.7s ease-in-out infinite; }
@keyframes hsbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.uncle-name{
  display:inline-block; margin-top:8px; background:#fff; border:var(--bd); border-radius:30px;
  padding:4px 12px; font-weight:800; font-size:12px; letter-spacing:-.2px;
  box-shadow:var(--shadow-sm); white-space:nowrap;
}

/* Uncle Cho story */
.ustory{ padding:96px 0 72px; }
.ustory-wrap{ max-width:780px; text-align:center; }
.uch{ padding:58px 0; }
.uch + .uch{ border-top:2.5px dashed rgba(26,35,48,.16); }
.ust-mascot{ width:150px; height:auto; margin:0 auto 20px; }
.uch .chk{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:13px;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--teal-d);
}
.uch .chk::before, .uch .chk::after{ content:"✺"; color:var(--sun-d); font-size:13px; }
.uch .aloha{ font-size:clamp(40px,6vw,64px); font-weight:700; color:var(--coral); letter-spacing:1px; line-height:1.05; margin-top:18px; }
.uch p.big{
  margin:22px auto 0; max-width:660px;
  font-size:clamp(18.5px,2.2vw,24px); font-weight:600; line-height:1.85;
  letter-spacing:-.5px; color:var(--ink); text-wrap:pretty;
}
.uch p.big b{ color:var(--coral-d); }
.uch p.sml{ margin-top:14px; font-size:15px; color:var(--sub); }
.uch-photos{ display:flex; justify-content:center; gap:18px; margin-top:38px; }
.uch-photos .ph{
  display:block; width:156px; height:156px; overflow:hidden;
  border:var(--bd); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm);
}
.uch-photos .ph img{ width:100%; height:100%; object-fit:cover; }
.uch-photos .ph.r1{ transform:rotate(-2.5deg); }
.uch-photos .ph.r2{ transform:rotate(1.5deg) translateY(6px); }
.uch-photos .ph.r3{ transform:rotate(3deg); }
.ust-notes{
  margin-top:26px; padding:20px 26px; text-align:left;
  background:var(--paper); border:2px dashed rgba(26,35,48,.22); border-radius:16px;
}
.ust-notes p{ font-size:13px; color:var(--sub); line-height:1.75; }
.ust-notes .ety{ font-weight:700; color:var(--ink-2); }
.ust-notes .hist{ margin-top:8px; }

/* bridge */
.storybridge{ background:var(--ink); color:#fff; padding:78px 0; text-align:center; overflow:hidden; }
.storybridge .wrap{ position:relative; }
.storybridge p.a{
  font-weight:800; font-size:clamp(24px,3.2vw,36px); letter-spacing:-1px; line-height:1.2;
}
.storybridge p.a::after{ content:""; display:block; width:56px; height:4px; background:var(--sun); border-radius:4px; margin:20px auto 0; }
.storybridge p.b{ margin-top:20px; font-size:clamp(15px,1.7vw,18.5px); color:#C7D0DB; line-height:1.8; }

@media (max-width:720px){
  .ustory{ padding:70px 0 54px; }
  .uch{ padding:44px 0; }
  .uch-photos{ gap:12px; }
  .uch-photos .ph{ width:104px; height:104px; }
  .hero-scroll{ font-size:16px; }
}

/* ============================================================
   v3 — CINEMATIC SCROLL FILM (Uncle Cho)
   ============================================================ */
.film{ position:relative; background:var(--cream); height:auto; overflow:hidden; }
.film-stage{ position:static; height:auto; overflow:visible; display:block; }
.fscene{
  position:relative; inset:auto; min-height:min(84vh,820px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 28px;
  opacity:0; will-change:transform,opacity;
}
.fscene.act{ opacity:1; }
.fscene .big,.fscene .fslogan,.fscene .fk,.fscene .fmascot,.fscene .uch-photos .ph{ will-change:transform; }
.fscene>*{ position:relative; z-index:1; }
.fscene.hero-scene{ min-height:min(100vh,940px); opacity:1; transform:none; }
.hero-slogan{ font-size:clamp(46px,8vw,104px); margin-bottom:22px; animation:heroIn 1.2s cubic-bezier(.22,1,.36,1) both; }
.hero-scene .intro-slogan{ animation:heroIn .9s cubic-bezier(.22,1,.36,1) both; }
.hero-scene .sml{ animation:heroIn 1.1s cubic-bezier(.22,1,.36,1) .25s both; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(34px); } to{ opacity:1; transform:none; } }
.fscene .fk{
  font-size:clamp(54px,8vw,92px); font-weight:700; color:var(--coral);
  line-height:1; letter-spacing:2px; margin-bottom:10px;
  text-shadow:4px 4px 0 rgba(26,35,48,.12);
}
.fscene .big{
  max-width:820px; font-size:clamp(21px,3vw,34px); font-weight:700;
  line-height:1.75; letter-spacing:-.6px; color:var(--ink); text-wrap:pretty;
}
.fscene .big b{ color:var(--coral-d); }
.fscene .sml{ margin-top:20px; font-size:clamp(14px,1.5vw,17px); color:var(--sub); font-weight:600; }
.fmascot{ width:clamp(120px,15vw,176px); height:auto; margin-bottom:20px; }
.fslogan{ font-weight:800; font-size:clamp(42px,6.5vw,80px); line-height:1.1; letter-spacing:-2px; }
.fslogan span{ color:var(--coral); }
.fscene .uch-photos{ margin-top:44px; }
.fscene .uch-photos .ph{ opacity:0; }

/* static fallback: no JS or reduced motion */
html:not(.js) .film, .film.static{ height:auto; }
html:not(.js) .film-stage, .film.static .film-stage{ position:static; height:auto; overflow:visible; display:block; }
html:not(.js) .fscene, .film.static .fscene{ position:relative; opacity:1 !important; visibility:visible !important; transform:none !important; padding:56px 28px; }
html:not(.js) .fscene .uch-photos .ph, .film.static .fscene .uch-photos .ph{ opacity:1; transform:none; }
html:not(.js) .film-progress, .film.static .film-progress{ display:none; }

@media (max-width:720px){
  .fscene{ padding:74px 22px; min-height:auto; }
  .fscene.hero-scene{ min-height:88vh; }
  .fscene .big{ line-height:1.8; }
}

/* v4 — film intro scene */
.fscene.intro .aloha{ font-size:clamp(46px,7.5vw,88px); font-weight:700; color:var(--coral); letter-spacing:1px; line-height:1; margin:22px 0 4px; text-shadow:4px 4px 0 rgba(26,35,48,.12); }
.fmascot.big{ width:clamp(150px,19vw,230px); margin-bottom:4px; }
.film-rays{ position:absolute; inset:0; z-index:-1; opacity:.5; }
.scroll-hint{ display:inline-flex; align-items:center; gap:10px; margin-top:34px; font-weight:800; font-size:16px; letter-spacing:-.3px; color:var(--ink); border-bottom:3px solid var(--sun); padding-bottom:5px; }
.scroll-hint .sh-arrow{ color:var(--coral); font-size:18px; animation:hsbob 1.7s ease-in-out infinite; }

/* ============================================================
   v5 — BGM toggle
   ============================================================ */
.bgm-toggle{
  position:fixed; left:20px; bottom:22px; z-index:120;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 16px 11px 13px; border:var(--bd); border-radius:50px;
  background:#fff; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm);
  font-weight:800; font-size:13px; letter-spacing:-.2px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.bgm-toggle:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.bgm-toggle:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.bgm-toggle .bgm-ic{ font-size:16px; line-height:1; }
.bgm-toggle .bgm-lb{ white-space:nowrap; }
.bgm-eq{ display:none; align-items:flex-end; gap:2.5px; height:14px; }
.bgm-eq i{ display:block; width:3px; height:100%; background:var(--coral); border-radius:2px; transform-origin:bottom; animation:eq 900ms ease-in-out infinite; }
.bgm-eq i:nth-child(2){ animation-delay:.15s; }
.bgm-eq i:nth-child(3){ animation-delay:.3s; }
.bgm-eq i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.bgm-toggle[data-state="on"]{ background:var(--ink); color:#fff; }
.bgm-toggle[data-state="on"] .bgm-ic{ display:none; }
.bgm-toggle[data-state="on"] .bgm-eq{ display:inline-flex; }
@media (prefers-reduced-motion: reduce){ .bgm-eq i{ animation:none; } }
@media (max-width:720px){
  .bgm-toggle{ left:14px; bottom:16px; padding:10px 13px 10px 11px; font-size:12px; }
}

/* ============================================================
   v6 — hide top nav + float menu during opening story
   ============================================================ */
.nav{ transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }
.nav.chrome-hidden{ transform:translateY(-118%); opacity:0; pointer-events:none; }
.floatmenu{ transition:opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1); }
.floatmenu.chrome-hidden{ opacity:0; transform:translateX(40px) scale(.96); pointer-events:none; }


/* ============================================================
   v8 — Hawaiian vibes: floating frame posters + tropical effects
   ============================================================ */

/* --- tropical background effects --- */
.scene-hawaii::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(160deg, rgba(255,164,72,.12) 0%, transparent 50%, rgba(0,164,200,.08) 100%);
}
.scene-wave::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 50% 120%, rgba(0,164,200,.10) 0%, transparent 60%);
}
.scene-return::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 40%, rgba(255,164,72,.08) 100%);
}
.scene-finale::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 50% 50%, rgba(255,100,50,.08) 0%, rgba(255,200,72,.06) 40%, transparent 70%);
}

/* --- palm leaf decorative border (CSS only) --- */
.film-stage::before{
  content:""; position:absolute; top:0; left:0; right:0; height:120px; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(244,240,230,.95) 0%, transparent 100%);
  mask-image:linear-gradient(180deg, black 30%, transparent);
  -webkit-mask-image:linear-gradient(180deg, black 30%, transparent);
}

/* --- wave divider after film --- */
.film + .marquee::before{
  content:""; display:block; height:48px; margin-top:-48px; position:relative; z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48'%3E%3Cpath d='M0 24c120 24 240 24 360 0s240-24 360 0 240 24 360 0 240-24 360 0v24H0z' fill='%23F4F0E6'/%3E%3C/svg%3E") repeat-x bottom/1440px 48px;
}

/* mobile: smaller frames */
@media (max-width:720px){
}
@media (max-width:480px){
  .ff{ display:none !important; }
}



/* ============================================================
   v9 — SNS tiled poster bg + Character IP / Goods section
   ============================================================ */

/* SNS section: tiled retro posters as faded background */
.sec.sns{ position:relative; overflow:hidden; }
.sns-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr;
  gap:12px; padding:12px; opacity:.16;
  transform:rotate(-3deg) scale(1.08); transform-origin:center;
}
.sns-bg span{
  display:block; width:100%; padding-bottom:132%;
  background-size:cover; background-position:center;
  border-radius:8px;
}
.sns-bg .fb1{ background-image:url("min/fr_surf.jpg"); }
.sns-bg .fb2{ background-image:url("min/fr_ocean.jpg"); }
.sns-bg .fb3{ background-image:url("min/fr_uncle.jpg"); }
.sns-bg .fb4{ background-image:url("min/fr_menu.jpg"); }
.sns-bg .fb5{ background-image:url("min/fr_kids.jpg"); }
.sns-bg .fb6{ background-image:url("min/fr_joy.jpg"); }
.sec.sns::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,19,16,.88) 0%, rgba(24,19,16,.8) 45%, rgba(24,19,16,.92) 100%);
}
.sec.sns .wrap{ position:relative; z-index:2; }

/* ---- Goods / Character IP ---- */
.sec.goods{ position:relative; overflow:hidden; background:linear-gradient(180deg,#FFF9F0 0%, var(--cream) 100%); }
.goods-pattern{ display:none; }
.sec.goods .wrap{ position:relative; z-index:1; }
.sec.goods .sec-head{ margin-left:auto; margin-right:auto; }

.goods-lead{
  display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center;
  margin-top:56px; background:var(--paper); border:var(--bd); border-radius:26px;
  box-shadow:var(--shadow); padding:34px 40px;
}
.goods-lead .gl-char{
  background:linear-gradient(160deg,#FFE7CE,var(--sun)); border:var(--bd); border-radius:22px;
  padding:16px; display:grid; place-items:center; box-shadow:var(--shadow-sm); aspect-ratio:1/1;
}
.goods-lead .gl-char img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.15)); }
.goods-lead .chip{
  display:inline-block; background:var(--ink); color:#fff; font-family:"Fredoka",sans-serif;
  font-weight:600; letter-spacing:1px; font-size:13px; padding:6px 15px; border-radius:30px; margin-bottom:14px;
}
.goods-lead .gl-text p{ font-size:17px; line-height:1.75; color:var(--ink-2); }
.goods-lead .gl-text p b{ color:var(--coral-d); }
.goods-lead .gl-text .gl-sub{ font-size:14.5px; color:var(--sub); margin-top:12px; }

.goods-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.gd-card{
  background:var(--paper); border:var(--bd); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.gd-card:hover{ transform:translate(-3px,-3px) rotate(-.6deg); box-shadow:9px 9px 0 var(--ink); }
.gd-card .gd-img{ aspect-ratio:1/1; overflow:hidden; background:#fff; border-bottom:var(--bd); }
.gd-card .gd-img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gd-card:hover .gd-img img{ transform:scale(1.05); }
.gd-card figcaption{ padding:16px 18px; }
.gd-card figcaption b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.3px; }
.gd-card figcaption span{ display:block; font-size:13px; color:var(--sub); margin-top:3px; }
.goods-note{ margin-top:26px; text-align:center; font-size:13px; color:var(--sub); }

@media (max-width:860px){
  .goods-lead{ grid-template-columns:1fr; gap:24px; padding:26px; text-align:center; }
  .goods-lead .gl-char{ width:180px; margin:0 auto; }
  .goods-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .sns-bg{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:480px){
  .goods-grid{ grid-template-columns:1fr 1fr; }
  .gd-card figcaption{ padding:12px 14px; }
  .gd-card figcaption b{ font-size:15px; }
}


/* ============================================================
   v10 — Real Store P&L (two-store side-by-side)
   ============================================================ */
.pnl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; align-items:start; }
.pnl-card{
  background:var(--paper); border:var(--bd); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.pnl-card.feat{ box-shadow:6px 6px 0 var(--coral); border-color:var(--coral-d); }
.pnl-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 24px; background:var(--ink); color:#fff;
}
.pnl-card.feat .pnl-head{ background:var(--coral); }
.pnl-card.mock .pnl-head{ background:var(--teal-d); }
.pnl-tag{ flex:none; font-size:11px; font-weight:800; letter-spacing:.4px; padding:4px 10px; border-radius:30px; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.pnl-head .nm{ font-size:19px; font-weight:800; letter-spacing:-.4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pnl-head .nm .loc{ font-size:12.5px; font-weight:600; opacity:.82; letter-spacing:0; }
.pnl-rows{ padding:8px 24px 22px; }
.pr{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1.5px dashed var(--line);
  font-size:15px; font-weight:600; color:var(--ink-2);
}
.pr .pc{ text-align:right; font-size:13px; font-weight:700; color:var(--sub); min-width:52px; }
.pr .pa{ text-align:right; font-family:"Fredoka",sans-serif; font-weight:600; font-size:16px; color:var(--ink); min-width:78px; white-space:nowrap; }
.pr .pa.minus{ color:#D64545; }
.pr i{ font-style:normal; font-size:12px; font-weight:600; color:var(--sub); }
.pr i.good{ color:var(--teal-d); }
.pr.colhead{ padding:10px 0; border-bottom:2.5px solid var(--ink); }
.pr.colhead span{ font-size:12px; font-weight:800; color:var(--sub); letter-spacing:.3px; text-transform:none; }
.pr.rev{ font-weight:800; color:var(--ink); }
.pr.rev .pa{ font-size:18px; }
.pr.profit{
  margin-top:6px; border-bottom:none; border-top:2.5px solid var(--ink);
  padding-top:16px; font-size:17px; font-weight:800; color:var(--ink);
}
.pr.profit .pc{ color:var(--teal-d); font-size:14px; }
.pr.profit .pa{ font-size:24px; color:var(--teal-d); }
.pnl-card.feat .pr.profit .pa{ color:var(--coral-d); }
.pnl-card.feat .pr.profit .pc{ color:var(--coral-d); }

@media (max-width:1024px){
  .pnl-grid{ grid-template-columns:1fr; gap:20px; max-width:640px; margin-left:auto; margin-right:auto; }
}
@media (max-width:820px){
  .pnl-grid{ grid-template-columns:1fr; gap:20px; }
}


/* ============================================================
   v11 — scene videos (움짤) + real delivery screenshots + 상동 pin
   ============================================================ */
.scene-collage .sc video{ width:100%; height:100%; object-fit:cover; display:block; }

/* real delivery app screenshots */
.deliv-phones{ display:flex; justify-content:center; align-items:flex-start; gap:26px; }
.rphone{
  width:230px; flex-shrink:0; background:#fff; border:3px solid var(--ink);
  border-radius:26px; box-shadow:var(--shadow); overflow:hidden;
}
.rphone:first-child{ transform:rotate(-2deg); }
.rphone:last-child{ transform:rotate(2deg); margin-top:20px; }
.rphone .rp-cap{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; font-weight:800; font-size:13.5px; letter-spacing:-.2px;
  color:#fff; background:var(--ink);
}
.rphone .rp-cap .rp-dot{ width:14px; height:14px; border-radius:5px; display:inline-block; }
.rphone .rp-cap .rp-dot.bm{ background:#2AC1BC; }
.rphone .rp-cap .rp-dot.cp{ background:#3E63DD; }
.rphone img{ width:100%; height:auto; display:block; }
@media(max-width:560px){
  .deliv-phones{ flex-direction:column; align-items:center; gap:18px; }
  .rphone{ width:min(300px,80vw); }
  .rphone:first-child,.rphone:last-child{ transform:none; margin-top:0; }
}


/* ============================================================
   v12 — group-order records list
   ============================================================ */
.grp-orders{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.go{ display:flex; align-items:center; gap:14px; background:var(--paper); border:var(--bd); border-radius:14px; padding:13px 16px; box-shadow:var(--shadow-sm); }
.go .go-d{ flex-shrink:0; font-family:"Fredoka",sans-serif; font-weight:600; font-size:15px; color:#fff; background:var(--teal-d); border-radius:10px; padding:8px 10px; text-align:center; line-height:1.15; letter-spacing:.3px; }
.go .go-b b{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.3px; color:var(--ink); }
.go .go-b span{ display:block; font-size:12.5px; color:var(--sub); margin-top:3px; line-height:1.5; }
@media(max-width:640px){ .grp-orders{ grid-template-columns:1fr; } }


/* ============================================================
   v13 — group real attachments (kakao / receipt gallery)
   ============================================================ */
.grp-evidence{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grp-evidence .ev{ background:var(--paper); border:var(--bd); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
.grp-evidence .ev img{ width:100%; height:340px; object-fit:cover; object-position:top center; display:block; background:#f3efe6; border-bottom:var(--bd); }
.grp-evidence .ev figcaption{ padding:13px 16px; font-size:13.5px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.grp-evidence .ev figcaption::before{ content:"📎"; font-size:14px; }
@media(max-width:760px){ .grp-evidence{ grid-template-columns:1fr; } .grp-evidence .ev img{ height:auto; max-height:520px; } }


/* ============================================================
   v14 — group real-attachment masonry gallery
   ============================================================ */
.grp-gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:8px; }
.grp-gallery .ga{ display:flex; flex-direction:column; margin:0; background:var(--paper); border:var(--bd); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.grp-gallery .ga img{ width:100%; height:290px; object-fit:contain; display:block; background:#F6F0E4; border-bottom:var(--bd); padding:10px; }
.grp-gallery .ga figcaption{ flex:1; padding:12px 15px; font-size:12.5px; font-weight:600; color:var(--sub); line-height:1.5; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.grp-gallery .ga figcaption::before{ content:"📎"; }
.grp-gallery .ga figcaption b{ color:var(--ink); font-weight:800; font-size:13px; }
@media(max-width:1024px){ .grp-gallery{ grid-template-columns:repeat(3,1fr); } .grp-gallery .ga img{ height:260px; } }
@media(max-width:860px){ .grp-gallery{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .grp-gallery{ grid-template-columns:1fr; } .grp-gallery .ga img{ height:auto; max-height:440px; } }

/* stores: 3 cards + cheongna placeholder */
.store-grid{ grid-template-columns:repeat(3,1fr); }
.store .sbody{ padding:22px 22px 26px; }
.store .sbody h3{ font-size:21px; }
@media(max-width:1080px){ .store-grid{ grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto; } }
.cheongna-ph{ background:radial-gradient(var(--line) 1.5px,transparent 1.6px) 0 0/14px 14px var(--cream); display:grid; place-items:center; }
.cheongna-ph img{ width:44%; height:auto; object-fit:contain; filter:drop-shadow(4px 4px 0 rgba(26,35,48,.15)); }

/* ============================================================
   BRAND TYPE — Cafe24 Ssurround display (Hi Lulu tone)
   ============================================================ */
.sec-title,.reframe h2,.cta-copy h2,.exp-stores-head h3,.storybridge h2,.fscene .big,.fslogan,.aloha,
.quote-band p,.hero h1{ font-family:"Cafe24 Ssurround","Pretendard Variable","Pretendard",sans-serif; font-weight:700; letter-spacing:-.2px; }
.sec-title{ line-height:1.3; }
.reframe h2{ line-height:1.26; }
.fscene .big{ line-height:1.5; }
.faq .q,.step h4,.cc h3,.rf-card h3,.store .sbody h3,.owner-card h3,.cost-side h3,.deliv-pt h4{ font-family:"Cafe24 Ssurround","Pretendard Variable","Pretendard",sans-serif; font-weight:700; letter-spacing:0; }

/* film step UI */
.film-ui{ position:absolute; right:22px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:6; }
.fbtn{ width:40px; height:40px; border-radius:50%; border:var(--bd); background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-size:16px; font-weight:800; cursor:pointer; display:grid; place-items:center; color:var(--ink); transition:transform .12s ease; }
.fbtn:hover{ transform:translate(-1px,-1px); }
.fbtn:disabled{ opacity:.35; cursor:default; box-shadow:none; transform:none; }
.fdots{ display:flex; flex-direction:column; gap:9px; padding:7px 0; }
.fdot{ width:11px; height:11px; border-radius:50%; border:2px solid var(--ink); background:transparent; cursor:pointer; padding:0; transition:background .15s ease, transform .15s ease; }
.fdot.on{ background:var(--coral); transform:scale(1.25); }
.fnext-cta{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6; display:inline-flex; align-items:center; gap:8px; font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif; font-weight:700; font-size:15px; padding:12px 24px; border-radius:40px; border:var(--bd); background:var(--sun); color:var(--ink); box-shadow:var(--shadow-sm); cursor:pointer; }
.fnext-cta:hover{ transform:translateX(-50%) translate(-1px,-2px); }
.fnext-cta .ch{ animation:fbob 1.4s ease-in-out infinite; }
@keyframes fbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
.fskip{ position:absolute; right:22px; bottom:30px; z-index:6; background:none; border:none; font-size:13px; font-weight:700; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; opacity:.72; }
.fskip:hover{ opacity:1; }
.film.static .film-ui,.film.static .fnext-cta,.film.static .fskip,html:not(.js) .film-ui,html:not(.js) .fnext-cta,html:not(.js) .fskip{ display:none; }
@media(max-width:720px){ .film-ui{ right:10px; } .fbtn{ width:36px; height:36px; } .fnext-cta{ bottom:18px; font-size:14px; padding:11px 20px; } .fskip{ right:14px; bottom:74px; } }

.pnl-grid.single{ grid-template-columns:minmax(0,560px); justify-content:center; }
.film-ui,.fskip,.fnext-cta{ display:none !important; }

/* ===== hero-only section ===== */
.film.hero-only{ min-height:auto; }
.film.hero-only .fscene.hero-scene{ min-height:min(96vh,900px); }

/* ===== locked cost section ===== */
.cost-locked{ position:relative; margin-top:8px; }
.cost-breakdown.blurred{ filter:blur(7px) saturate(.85); pointer-events:none; user-select:none; opacity:.75; }
.cost-veil{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; }
.cv-inner{ max-width:520px; text-align:center; background:var(--paper); border:var(--bd); border-radius:var(--r); box-shadow:var(--shadow); padding:38px 34px 34px; }
.cv-ic{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--sun); border:var(--bd); font-size:24px; margin-bottom:16px; }
.cv-inner h3{ font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif; font-size:clamp(20px,2.4vw,26px); font-weight:700; letter-spacing:-.4px; }
.cv-inner p{ margin:12px 0 22px; font-size:14.5px; line-height:1.7; color:var(--sub); font-weight:600; text-wrap:pretty; }
@media(max-width:640px){ .cv-inner{ padding:28px 22px; } .cv-inner p{ font-size:13.5px; } }

/* ===== receipts ===== */
.rcpt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.rcpt{ margin:0; background:var(--paper); border:var(--bd); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.rcpt .rc-head{ padding:16px 20px; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; gap:3px; }
.rcpt .rc-head b{ font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif; font-size:16.5px; font-weight:700; }
.rcpt .rc-head span{ font-size:12px; opacity:.8; font-weight:600; }
.rcpt .rc-img{ position:relative; background:#F6F0E4; border-bottom:var(--bd); }
.rcpt .rc-img img{ width:100%; display:block; }
.rcpt .rc-img.ph-empty{ aspect-ratio:3/4; display:grid; place-items:center; background:repeating-linear-gradient(45deg,#F6F0E4 0 12px,#EFE6D2 12px 24px); }
.rcpt .rc-img.ph-empty::after{ content:attr(data-slot); max-width:76%; text-align:center; font-size:12.5px; font-weight:700; color:var(--sub); line-height:1.6; }
.rcpt figcaption{ padding:13px 20px; font-size:12.5px; font-weight:700; color:var(--sub); }
@media(max-width:900px){ .rcpt-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }

/* ===== P&L donut ===== */
.pnl-donut{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:46px; align-items:center; margin-top:52px; background:var(--paper); border:var(--bd); border-radius:var(--r); box-shadow:var(--shadow); padding:42px 44px; }
.donut-side{ position:relative; }
svg.donut{ width:100%; height:auto; transform:rotate(-90deg); }
svg.donut circle{ fill:none; stroke-width:26; }
.dring.bg{ stroke:var(--line); }
.dseg{ stroke-linecap:butt; stroke-dasharray:0 490; transition:stroke-dasharray 1.15s cubic-bezier(.22,1,.36,1); }
.d-cost{ stroke:#E8551F; }
.d-labor{ stroke:var(--sun-d); }
.d-rent{ stroke:#8C7A66; }
.d-etc{ stroke:#C6B69C; }
.d-prof{ stroke:var(--teal); stroke-width:32; }
.donut-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dc-k{ font-size:13px; font-weight:800; color:var(--sub); letter-spacing:-.2px; }
.dc-v{ font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif; font-size:clamp(34px,4.4vw,46px); font-weight:700; color:var(--teal-d); line-height:1.1; margin:4px 0 3px; font-variant-numeric:tabular-nums; }
.dc-v small{ font-size:.44em; margin-left:2px; }
.dc-p{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.dc-p b{ color:var(--teal-d); }
.dl-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:6px; border-bottom:2px solid var(--ink); }
.dl-top b{ font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif; font-size:19px; font-weight:700; }
.dl-top span{ font-size:13px; font-weight:700; color:var(--sub); }
.dl-list{ list-style:none; margin:0; padding:0; }
.dl-list li{ display:grid; grid-template-columns:16px 1fr auto auto; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--line); font-size:14.5px; font-weight:600; }
.dl-list li:last-child{ border-bottom:none; }
.dl-list .sw{ width:14px; height:14px; border-radius:4px; border:1.5px solid var(--ink); }
.sw-cost{ background:#E8551F; } .sw-labor{ background:var(--sun-d); } .sw-rent{ background:#8C7A66; } .sw-etc{ background:#C6B69C; } .sw-prof{ background:var(--teal); }
.dl-list .pc{ font-size:13px; font-weight:700; color:var(--sub); font-variant-numeric:tabular-nums; min-width:52px; text-align:right; }
.dl-list .am{ font-weight:800; font-variant-numeric:tabular-nums; min-width:82px; text-align:right; }
.dl-list .nm .sub{ font-style:normal; font-size:12px; color:var(--sub); font-weight:600; }
.dl-list li.prof{ margin-top:8px; background:rgba(23,170,187,.1); border:2px solid var(--ink); border-radius:12px; padding:15px 14px; }
.dl-list li.prof .nm,.dl-list li.prof .am{ color:var(--teal-d); font-weight:800; }
.dl-list li.prof .pc{ color:var(--teal-d); }
@media(max-width:920px){ .pnl-donut{ grid-template-columns:1fr; gap:32px; padding:30px 24px; } .donut-side{ max-width:300px; margin:0 auto; } }
@media(max-width:520px){ .dl-list li{ grid-template-columns:14px 1fr auto; row-gap:2px; } .dl-list .am{ grid-column:3; } .dl-list .pc{ grid-column:2; text-align:left; min-width:0; } }

html:not(.js) .fscene{ opacity:1 !important; transform:none !important; }
html:not(.js) .fscene .uch-photos .ph{ opacity:1 !important; }


/* ===== hero menu mosaic ===== */
.film.hero-only{ overflow:hidden; }
.film.hero-only .fscene.hero-scene{ position:relative; overflow:hidden; min-height:100svh; height:100svh; padding-top:76px; }
@supports not (height:100svh){ .film.hero-only .fscene.hero-scene{ min-height:100vh; height:100vh; } }
.hero-mosaic{ position:absolute; inset:-14% -6%; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; z-index:0; transform:rotate(-6deg) scale(1.22); pointer-events:none; }
.hm-col{ display:flex; flex-direction:column; gap:14px; will-change:transform; }
.hm-col.a{ animation:hmUp 68s linear infinite; }
.hm-col.b{ animation:hmDown 78s linear infinite; }
.hm-col.c{ animation:hmUp 88s linear infinite; }
.hm-col.d{ animation:hmDown 74s linear infinite; }
.hm-t{ display:block; border-radius:16px; overflow:hidden; border:2px solid rgba(24,19,16,.16); box-shadow:0 8px 22px rgba(24,19,16,.13); background:var(--cream); flex:none; }
.hm-t img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
@keyframes hmUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes hmDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 54% 44% at 50% 44%, rgba(252,243,223,.94) 0%, rgba(252,243,223,.8) 46%, rgba(252,243,223,.3) 74%, rgba(252,243,223,0) 100%),
             linear-gradient(to bottom, rgba(252,243,223,.55) 0%, rgba(252,243,223,0) 22%, rgba(252,243,223,0) 72%, rgba(252,243,223,.85) 94%, var(--cream) 100%); }
.film.hero-only .hero-scene>*:not(.hero-mosaic):not(.hero-scrim){ position:relative; z-index:2; }
.film.hero-only .hero-slogan{ text-shadow:0 2px 22px rgba(252,243,223,.9), 0 1px 0 rgba(252,243,223,.8); }
@media (prefers-reduced-motion: reduce){ .hm-col{ animation:none !important; } }
@media(max-width:720px){ .hero-mosaic{ grid-template-columns:repeat(3,1fr); gap:10px; transform:rotate(-8deg) scale(1.4); } .hm-col.d{ display:none; } .hm-t{ border-radius:12px; } }

.film.hero-only .fscene.hero-scene{ justify-content:center; }
@media(max-width:720px){ .film.hero-only .fscene.hero-scene{ padding-top:66px; } }

/* specificity fix: background layers must escape .fscene>:not(.film-frames) */
.film.hero-only .fscene.hero-scene > .hero-mosaic{ position:absolute; inset:-14% -6%; z-index:0; }
.film.hero-only .fscene.hero-scene > .hero-scrim{ position:absolute; inset:0; z-index:1; height:auto; }
.film.hero-only .fscene.hero-scene > .intro-slogan,
.film.hero-only .fscene.hero-scene > .hero-slogan,
.film.hero-only .fscene.hero-scene > .sml,
.film.hero-only .fscene.hero-scene > .sun-rays{ position:relative; z-index:2; }

.film.hero-only .hero-slogan{ margin-bottom:0; }
.film.hero-only .fscene.hero-scene > .sml{ margin-top:-8px; }
@media(max-width:720px){ .film.hero-only .fscene.hero-scene > .sml{ margin-top:-2px; } }

/* ===== THE MODEL cards ===== */
.reframe .cards3.exp-cards{ grid-template-columns:repeat(3,1fr); }
@media(max-width:1080px){ .reframe .cards3.exp-cards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px){ .reframe .cards3.exp-cards{ grid-template-columns:1fr; } }
.rf-card.reveal.d5{ transition-delay:.34s; }
.rf-card.reveal.d6{ transition-delay:.42s; }

/* ===== story: new scenes ===== */
.fscene.scene-fire .big b{ color:var(--coral); }
.fscene .sml.pre-line{ margin-bottom:6px; }
.fscene .last-line{ font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif; font-size:clamp(28px,4.4vw,46px); font-weight:700; color:var(--coral-d); letter-spacing:-1px; margin:6px 0 26px; }
.fscene.scene-finale .fslogan{ margin-bottom:0; }
.char-disc{ margin-top:34px; font-size:12px; font-weight:600; color:var(--sub); opacity:.75; }

/* ===== story: unified scene rhythm ===== */
.film#story .fscene{ min-height:min(76vh,760px); padding:70px 28px; }
.film#story .fscene .big{ max-width:760px; font-size:clamp(20px,2.7vw,31px); line-height:1.78; }
.film#story .fscene .sml{ margin-top:18px; max-width:620px; font-size:clamp(13.5px,1.5vw,16px); line-height:1.85; color:var(--sub); }
.film#story .fscene .sml b{ color:var(--coral-d); }
.film#story .uch-photos{ margin-top:40px; }
.film#story .scene-finale .last-line{ font-size:clamp(26px,4vw,42px); }
@media(max-width:720px){ .film#story .fscene{ min-height:auto; padding:62px 22px; } }

/* THE MODEL — 5 cards: 3 on top, 2 centered below */
.reframe .cards3.exp-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; align-items:stretch; }
.reframe .cards3.exp-cards > .rf-card{ grid-column:span 2; }
.reframe .cards3.exp-cards > .rf-card:nth-child(4){ grid-column:2 / span 2; }
.reframe .cards3.exp-cards > .rf-card:nth-child(5){ grid-column:4 / span 2; }
@media(max-width:1080px){
  .reframe .cards3.exp-cards{ grid-template-columns:repeat(2,1fr); }
  .reframe .cards3.exp-cards > .rf-card,
  .reframe .cards3.exp-cards > .rf-card:nth-child(4),
  .reframe .cards3.exp-cards > .rf-card:nth-child(5){ grid-column:auto; }
  .reframe .cards3.exp-cards > .rf-card:nth-child(5){ grid-column:1 / -1; max-width:calc(50% - 11px); justify-self:center; }
}
@media(max-width:720px){
  .reframe .cards3.exp-cards{ grid-template-columns:1fr; }
  .reframe .cards3.exp-cards > .rf-card:nth-child(5){ max-width:none; }
}

/* THE MODEL — light tone, matches surrounding sections */
.reframe.expand#why{ background:var(--mint); color:var(--ink); padding:90px 0; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.reframe.expand#why .halftone-bg{ opacity:.07; background-image:radial-gradient(var(--ink) 1.4px,transparent 1.5px); }
.reframe.expand#why .sec-head{ position:relative; z-index:2; }
.reframe.expand#why .eyebrow.light{ color:var(--coral-d); }
.reframe.expand#why .sec-title{ color:var(--ink); }
.reframe.expand#why .sec-lead{ color:var(--ink-2); font-weight:600; }
.reframe.expand#why .rf-card{ background:var(--paper); border:var(--bd); box-shadow:var(--shadow-sm); }
.reframe.expand#why .rf-card:hover{ border-color:var(--ink); box-shadow:var(--shadow); }
.reframe.expand#why .rf-card .ic{ box-shadow:3px 3px 0 var(--ink); }
.reframe.expand#why .rf-card .k{ color:var(--coral-d); }
.reframe.expand#why .rf-card h3{ color:var(--ink); }
.reframe.expand#why .rf-card p{ color:var(--ink-2); }
.reframe.expand#why .rf-card p b{ color:var(--coral-d); }

/* hero character BI */
.film.hero-only .fscene.hero-scene > .hero-bi{
  position:relative; z-index:2; width:clamp(120px,15vw,178px); height:auto;
  margin-bottom:16px; filter:drop-shadow(5px 6px 0 rgba(24,19,16,.16));
  animation:heroBiIn 1.1s cubic-bezier(.34,1.35,.6,1) both, heroBiBob 4.6s ease-in-out 1.1s infinite;
}
@keyframes heroBiIn{ from{ opacity:0; transform:translateY(26px) rotate(-6deg) scale(.86); } to{ opacity:1; transform:none; } }
@keyframes heroBiBob{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-9px) rotate(1.6deg); } }
@media (prefers-reduced-motion:reduce){ .film.hero-only .fscene.hero-scene > .hero-bi{ animation:none; } }
@media(max-width:720px){ .film.hero-only .fscene.hero-scene > .hero-bi{ width:118px; margin-bottom:12px; } }

/* v12 — 현장 영상 타일 + 단체주문 영상 */
.scene-collage .sc.vid video{width:100%;height:100%;object-fit:cover;display:block}
.scene-collage .livetag{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.2px;color:#fff;background:rgba(26,35,48,.72);border:2px solid rgba(255,255,255,.5);padding:4px 9px;border-radius:999px;backdrop-filter:blur(3px)}
.scene-collage .livetag i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,94,.7);animation:liveDot 1.8s ease-out infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(255,107,94,.7)}70%{box-shadow:0 0 0 7px rgba(255,107,94,0)}100%{box-shadow:0 0 0 0 rgba(255,107,94,0)}}
.grp-gallery .ga video{width:100%;height:290px;object-fit:contain;display:block;background:#F6F0E4;border-bottom:var(--bd);padding:10px}
@media(max-width:1024px){.grp-gallery .ga video{height:260px}}
@media(max-width:520px){.grp-gallery .ga video{height:auto;max-height:440px}}

/* v2 — 히어로 CTA + 신뢰 수치 스트립 */
.btn.ghost{background:#FCF3DF;color:var(--ink);border:var(--bd)}
.btn.ghost:hover{background:#fff}
.film.hero-only .fscene.hero-scene > .hero-actions,
.film.hero-only .fscene.hero-scene > .hero-trust{position:relative;z-index:2}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px;animation:heroIn 1.1s cubic-bezier(.22,1,.36,1) .4s both}
.hero-trust{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;margin-top:26px;padding:12px 8px;border-radius:50px;background:rgba(252,243,223,.66);border:2px solid rgba(24,19,16,.14);backdrop-filter:blur(5px);animation:heroIn 1.1s cubic-bezier(.22,1,.36,1) .55s both}
.hero-trust .ht{display:flex;flex-direction:column;align-items:center;gap:1px;padding:0 22px;position:relative}
.hero-trust .ht+.ht::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:26px;background:rgba(24,19,16,.16);border-radius:2px}
.hero-trust b{font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif;font-size:clamp(20px,2.4vw,27px);font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-.5px}
.hero-trust b small{font-size:.56em;font-weight:700;color:var(--coral-d);margin-left:2px}
.hero-trust span{font-size:11.5px;font-weight:700;color:var(--sub);letter-spacing:.2px}
@media(max-width:720px){
  .hero-actions{flex-direction:column;width:100%;max-width:320px;margin-left:auto;margin-right:auto;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center;font-size:16px;padding:15px 20px}
  .hero-trust{margin-top:20px;border-radius:20px;padding:12px 4px;max-width:340px;margin-left:auto;margin-right:auto}
  .hero-trust .ht{padding:0 12px}
  .hero-trust b{font-size:18px}
  .hero-trust span{font-size:10.5px}
}

/* v2 — 매출표 SAMPLE 영수증 목업 */
.rcpt .rc-img.rc-sample{aspect-ratio:3/4;display:grid;place-items:center;padding:22px 18px;background:repeating-linear-gradient(45deg,#F6F0E4 0 12px,#EFE6D2 12px 24px)}
.rc-sample .smp{position:absolute;top:10px;left:10px;z-index:2;font-family:"Fredoka",sans-serif;font-weight:600;font-size:11px;letter-spacing:1.6px;color:#fff;background:var(--coral);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:6px;padding:3px 9px}
.rc-sample .pos{width:100%;max-width:210px;background:#fff;border:1.5px dashed rgba(24,19,16,.4);border-radius:4px;padding:16px 15px;text-align:center;box-shadow:0 6px 18px rgba(24,19,16,.13);font-variant-numeric:tabular-nums}
.rc-sample .pos-brand{font-family:"Fredoka",sans-serif;font-weight:600;font-size:15px;letter-spacing:3px;color:var(--ink)}
.rc-sample .pos-store{font-size:11.5px;font-weight:700;color:var(--ink-2);margin-top:2px}
.rc-sample .pos-meta{font-size:9.5px;font-weight:600;color:var(--sub);line-height:1.5;margin-top:5px}
.rc-sample .pos-rule{height:0;border-top:1px dashed rgba(24,19,16,.32);margin:9px 0}
.rc-sample .pos-rule.dot{border-top-style:dotted}
.rc-sample .pos-row{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:600;color:var(--ink-2);padding:2.5px 0}
.rc-sample .pos-row i{font-style:normal;font-weight:700;color:var(--ink)}
.rc-sample .pos-row.tot{font-size:13px;font-weight:800;color:var(--ink);padding:4px 0}
.rc-sample .pos-row.tot i{color:var(--coral-d)}
.rc-sample .pos-row.sub{font-size:9.5px;color:var(--sub)}
.rc-sample .pos-foot{font-size:8px;font-weight:600;color:var(--sub);line-height:1.7;letter-spacing:-.5px;margin-top:4px}

/* v2 — 상담 폼 체크리스트 · 신뢰 배지 · 선택정보 토글 */
.cta-checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;max-width:460px}
.cta-checks li{position:relative;padding-left:32px;font-size:16.5px;font-weight:600;color:#E4EAF1;line-height:1.5}
.cta-checks li::before{content:"✓";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.form-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--teal-d);background:var(--mint);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:30px;padding:5px 12px;margin-bottom:14px;letter-spacing:-.2px}
.form-badge i{font-style:normal;font-size:10px}
.fmore-t{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:2px dashed var(--line);border-radius:12px;padding:12px;font-family:inherit;font-size:14px;font-weight:700;color:var(--sub);cursor:pointer;transition:border-color .15s,color .15s}
.fmore-t:hover{border-color:var(--coral);color:var(--coral-d)}
.fmore-t .chev{transition:transform .2s ease;font-size:12px}
.fmore-t[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fmore-t[aria-expanded="true"]{margin-bottom:2px}
.fmore[hidden]{display:none}

/* v2 — 매장 카드 기준·위치 */
.store .stats .s .n.na{color:var(--sub);opacity:.5}
.store .sbasis{margin-top:12px;font-size:11.5px;font-weight:600;color:var(--sub);opacity:.8}
.store .sloc{margin-top:16px;padding-top:16px;border-top:2px dashed var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.store .sloc .sa{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.5;text-wrap:pretty}
.store .sloc .smap{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--teal-d);border-bottom:2px solid var(--teal);padding-bottom:1px;transition:color .15s,border-color .15s}
.store .sloc .smap:hover{color:var(--coral-d);border-color:var(--coral)}
.store .sloc .smap .arrow{transition:transform .15s ease}
.store .sloc .smap:hover .arrow{transform:translateX(3px)}

/* v2 — 가맹 절차 세로 타임라인 */
.tline{position:relative;margin-top:52px;display:flex;flex-direction:column;gap:34px}
.tline::before{content:"";z-index:0;position:absolute;left:50%;top:8px;bottom:8px;width:3px;margin-left:-1.5px;background:repeating-linear-gradient(to bottom,var(--coral) 0 10px,transparent 10px 20px);opacity:.45;border-radius:3px}
.tstep{display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;gap:0;position:relative;z-index:1}
.tstep .ttext{grid-column:1;grid-row:1;text-align:right;padding-right:8px}
.tstep .tph{grid-column:3;grid-row:1;padding-left:8px}
.tstep.alt .ttext{grid-column:3;grid-row:1;text-align:left;padding-right:0;padding-left:8px}
.tstep.alt .tph{grid-column:1;grid-row:1;padding-left:0;padding-right:8px}
.tnode{grid-column:2;grid-row:1;display:grid;place-items:center;position:relative;z-index:2}
.tno{width:56px;height:56px;border-radius:50%;background:var(--coral);color:#fff;border:var(--bd);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font-size:24px;line-height:1}
.tstep h4{font-family:"Cafe24 Ssurround","Pretendard Variable",sans-serif;font-size:23px;font-weight:700;letter-spacing:-.6px;color:var(--ink)}
.tstep p{font-size:15px;color:var(--sub);line-height:1.7;margin-top:7px;text-wrap:pretty}
.tph{aspect-ratio:4/3;border-radius:var(--r);border:2px dashed rgba(24,19,16,.28);background:repeating-linear-gradient(45deg,#F6F0E4 0 12px,#EFE6D2 12px 24px);display:grid;place-items:center}
.tph::after{content:attr(data-slot);font-size:12.5px;font-weight:700;color:var(--sub);opacity:.85;text-align:center;padding:0 12px}
.tbadge{justify-self:center;display:inline-flex;align-items:center;gap:9px;margin:-6px auto;background:var(--sun);color:var(--ink);border:var(--bd);box-shadow:3px 3px 0 var(--ink);border-radius:50px;padding:11px 22px;font-size:15px;font-weight:800;letter-spacing:-.3px;position:relative;z-index:2}
.tbadge i{font-style:normal;font-size:16px}
@media(max-width:820px){
  .tline::before{left:27px;margin-left:0}
  .tstep{grid-template-columns:56px 1fr;gap:16px;align-items:start}
  .tstep .ttext,.tstep.alt .ttext{grid-column:2;grid-row:1;text-align:left;padding:0}
  .tstep .tph,.tstep.alt .tph{grid-column:2;grid-row:2;padding:0;margin-top:14px}
  .tnode{grid-column:1;grid-row:1;place-items:start}
  .tno{width:48px;height:48px;font-size:20px}
  .tbadge{margin:0 0 0 72px;justify-self:start;font-size:13.5px;padding:10px 16px}
  .tstep h4{font-size:20px}
}

/* v2 — 리뷰 캡션 + 라이트박스 */
.rvb{height:auto;display:flex;flex-direction:column;cursor:zoom-in;margin:0}
.rvb img{height:420px;width:auto;display:block}
.rvb figcaption{padding:9px 12px;font-size:12px;font-weight:700;color:var(--sub);border-top:2px solid rgba(24,19,16,.12);background:#fff;text-align:center;letter-spacing:-.2px}
.rvb .zoom{position:absolute;right:10px;bottom:52px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(24,19,16,.72);color:#fff;font-size:13px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.5)}
.rvb:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
@media(max-width:560px){.rvb img{height:340px}}
.rv-lb{position:fixed;inset:0;z-index:9999;background:rgba(14,16,20,.92);display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:24px 8px 28px;backdrop-filter:blur(3px)}
.rv-lb[hidden]{display:none}
.rv-lb img{grid-column:2;grid-row:1;max-width:min(92vw,540px);max-height:82vh;width:auto;height:auto;border-radius:12px;border:2.5px solid rgba(255,255,255,.22);background:#fff}
.rv-cap{grid-column:2;grid-row:2;margin-top:14px;font-size:13.5px;font-weight:700;color:#E7ECF2;letter-spacing:.2px}
.rv-x{position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center}
.rv-x:hover{background:var(--coral);border-color:var(--coral)}
.rv-nav{grid-row:1;width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.32);background:rgba(255,255,255,.1);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:4px}
.rv-nav:hover{background:var(--coral);border-color:var(--coral)}
.rv-nav.prev{grid-column:1}
.rv-nav.next{grid-column:3}
@media(max-width:560px){.rv-lb{grid-template-columns:46px 1fr 46px;padding:16px 4px 20px}.rv-nav{width:42px;height:42px;font-size:24px}}
body.rv-open{overflow:hidden}
body.rv-open .belt{animation-play-state:paused}

.hero-slogan em{font-style:normal;color:var(--teal-d)}

/* ============================================================
   v2 — 스토리: 진행 인덱스 + 레이아웃 3종 (C / A / B)
   ============================================================ */
.film#story{position:relative;overflow:visible}
.film-progress{position:sticky;top:66px;z-index:40;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:11px 22px;margin:0 auto;background:rgba(252,243,223,.9);border-bottom:2px solid rgba(24,19,16,.14);backdrop-filter:blur(7px)}
.fp-tag{display:inline-flex;align-items:center;font-family:"Fredoka",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-d);background:var(--mint);border:1.5px solid var(--teal);border-radius:30px;padding:4px 11px;white-space:nowrap}
.fp-track{display:flex;align-items:center;gap:12px;flex:1;min-width:190px}
.fp-year{font-family:"Fredoka",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:1px;color:var(--sub);white-space:nowrap}
.fp-bar{flex:1;height:4px;border-radius:4px;background:rgba(24,19,16,.14);overflow:hidden}
.fp-bar i{display:block;height:100%;width:0;background:var(--coral);border-radius:4px;transition:width .18s linear}
.fp-ch{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:baseline;gap:5px}
.fp-ch b{font-family:"Fredoka",sans-serif;font-size:16px;color:var(--coral-d);font-weight:700}
.fp-ch .fp-of{color:var(--sub);font-weight:600}
.fp-ch em{font-style:normal;color:var(--sub);font-weight:600;max-width:15ch;overflow:hidden;text-overflow:ellipsis}
.fp-skip{font-size:12.5px;font-weight:800;color:var(--teal-d);border-bottom:2px solid var(--teal);padding-bottom:1px;white-space:nowrap}
.fp-skip:hover{color:var(--coral-d);border-color:var(--coral)}
@media(max-width:720px){
  .film-progress{top:58px;gap:10px;padding:9px 14px}
  .fp-ch em,.fp-year{display:none}
  .fp-track{min-width:110px}
}

/* 사진 플레이스홀더 */
.sph{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--r);border:2px dashed rgba(24,19,16,.26);background:repeating-linear-gradient(45deg,#F8EEDA 0 12px,#F0E3C9 12px 24px);display:grid;place-items:center}
.sph::after{content:attr(data-slot);font-size:12px;font-weight:700;color:var(--sub);opacity:.8;text-align:center;padding:0 14px;line-height:1.6}
.sph.tall{aspect-ratio:3/4}

/* A. 타이포 우선 */
.fscene.sc-typo{text-align:left}
.sc-typo .typo-wrap{width:100%;max-width:980px;margin:0 auto}
.sc-typo .typo-body{display:grid;grid-template-columns:1fr 190px;align-items:center;gap:38px;margin-top:6px}
.sc-typo .typo-body .big{margin:0}
.sc-typo .fk{text-align:left;line-height:.85}
.sc-typo .sml{margin-top:26px}
.film#story .sc-typo .sml{max-width:none}
@media(max-width:820px){
  .sc-typo .typo-body{grid-template-columns:1fr;gap:26px}
  .sc-typo .typo-body .sph.tall{aspect-ratio:16/10;max-width:340px}
}

/* B. 좌우 스플릿 */
.fscene.sc-split{text-align:left}
.sc-split{display:grid;grid-template-columns:repeat(2,minmax(0,505px));justify-content:center;align-items:center;gap:clamp(30px,5vw,70px)}
.sc-split .sp-text{grid-column:1;grid-row:1}
.sc-split .sp-media{grid-column:2;grid-row:1}
.sc-split.rev .sp-text{grid-column:2}
.sc-split.rev .sp-media{grid-column:1}
.film#story .sc-split .big{margin:0}
.film#story .sc-split .big.mt{margin-top:34px}
.film#story .sc-split .sml{margin-top:14px;max-width:none}
@media(max-width:820px){
  .sc-split{grid-template-columns:minmax(0,520px);gap:30px}
  .sc-split .sp-text,.sc-split.rev .sp-text{grid-column:1;grid-row:1}
  .sc-split .sp-media,.sc-split.rev .sp-media{grid-column:1;grid-row:2}
}

/* 씬 4 — 사진 5장 */
.uch-photos.five{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;justify-content:start;margin-top:0}
.uch-photos.five .ph{width:100%;height:auto;aspect-ratio:1/1}
.uch-photos.five .ph:last-child{grid-column:span 2;aspect-ratio:2/1}
@media(max-width:820px){.uch-photos.five{max-width:420px;margin-left:auto;margin-right:auto}}

/* 캐릭터 고지 */
.film#story .char-disc{margin-top:38px;font-size:13px;line-height:1.85;font-weight:600;color:var(--ink-2);opacity:1;background:rgba(255,255,255,.55);border:2px solid rgba(24,19,16,.14);border-radius:var(--r);padding:16px 22px;max-width:640px;text-wrap:pretty}
.film#story .scene-finale .fmascot{margin-top:44px}

/* v2 — 실제 이미지 프레임 (브랜드 하드 그림자) */
.tph,.sph{border:var(--bd);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;background:var(--paper)}
.tph:has(img),.sph:has(img){border-style:solid;background:none;aspect-ratio:auto;display:block;padding:0;font-size:0;line-height:0}
.tph:has(img)::after,.sph:has(img)::after{content:none}
.tstep .tph:has(img){padding:0;margin-left:8px}
.tstep.alt .tph:has(img){padding:0;margin-left:0;margin-right:8px}
@media(max-width:820px){.tstep .tph:has(img),.tstep.alt .tph:has(img){margin:14px 0 0}}
.tph img,.sph img{display:block;width:100%;max-width:100%;height:auto}
.sph.wide{aspect-ratio:auto}
.sc-typo .typo-body:has(.sph.wide){grid-template-columns:1fr minmax(0,340px)}
@media(max-width:820px){.sc-typo .typo-body:has(.sph.wide){grid-template-columns:1fr}.sc-typo .typo-body .sph.wide{max-width:520px}}
@media(max-width:720px){.tph,.sph{box-shadow:var(--shadow-sm)}}

/* v2 — 가맹 절차 담당 역할 표기 */
.sec-lead{margin-top:16px;max-width:640px;font-size:16px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}
.trole{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;font-weight:800;letter-spacing:-.2px;color:var(--teal-d);background:var(--mint);border:1.5px solid var(--teal);border-radius:30px;padding:4px 11px}
.trole::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.tstep .ttext .trole+p{margin-top:10px}
@media(max-width:820px){.sec-lead{font-size:15px}}


/* ---------- 매장 현황 팝업 ---------- */
.popov{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(24,19,16,.62); backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.popov[hidden]{ display:none; }
.popov.on{ opacity:1; }
.popup{ position:relative; width:min(520px,100%); max-height:88vh; overflow-y:auto; background:var(--paper); border:var(--bd); border-radius:var(--r); box-shadow:8px 8px 0 var(--ink); padding:30px 26px 24px; transform:translateY(18px) scale(.97); transition:transform .28s cubic-bezier(.2,.9,.3,1.2); }
.popov.on .popup{ transform:none; }
.pop-x{ position:absolute; top:12px; right:12px; width:36px; height:36px; border:var(--bd); border-radius:50%; background:var(--cream); font-size:20px; font-weight:800; line-height:1; cursor:pointer; box-shadow:2px 2px 0 var(--ink); }
.pop-x:hover{ background:var(--sun); }
.pop-eyebrow{ display:inline-block; font-family:"Fredoka",sans-serif; font-weight:600; font-size:12px; letter-spacing:1px; text-transform:uppercase; background:var(--mint); border:var(--bd); border-radius:50px; padding:4px 12px; }
.pop-head h3{ margin-top:12px; font-size:26px; line-height:1.28; letter-spacing:-.6px; }
.pop-head h3 em{ font-style:normal; color:var(--coral); }
.pop-body{ margin-top:20px; display:flex; flex-direction:column; gap:16px; }
.pop-grp{ position:relative; border:var(--bd); border-radius:16px; background:#fff; padding:13px 14px 14px 16px; box-shadow:var(--shadow-sm); overflow:hidden; }
.pop-grp::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--c); border-right:2.5px solid var(--ink); }
.pop-grp.g1{ --c:#2E6BE6 } .pop-grp.g2{ --c:#1FA85C } .pop-grp.g3{ --c:#E03A3A }
.pop-gh{ display:flex; align-items:center; gap:8px; margin-left:9px; font-size:13.5px; font-weight:800; letter-spacing:-.2px; }
.pop-gh b{ font-family:"Fredoka",sans-serif; font-size:12px; color:#fff; background:var(--c); border:2px solid var(--ink); border-radius:50px; padding:1px 9px; }
.pdot{ width:10px; height:10px; border-radius:50%; border:2px solid var(--ink); background:var(--c); animation:popblink 1.6s ease-in-out infinite; }
.pdot.blue{ background:#2E6BE6 } .pdot.green{ background:#1FA85C; animation-delay:.3s } .pdot.red{ background:#E03A3A; animation-delay:.6s }
@keyframes popblink{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.82) } }
.pop-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:11px 0 0 9px; }
.stag{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; letter-spacing:-.3px; color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:50px; padding:5px 12px 5px 10px; }
.stag::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--c); }
.stag.blue{ --c:#2E6BE6 } .stag.green{ --c:#1FA85C } .stag.red{ --c:#E03A3A }
.pop-foot{ margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.pop-foot .btn{ width:100%; justify-content:center; }
.pop-hide{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--sub); cursor:pointer; }
.pop-hide input{ width:15px; height:15px; accent-color:var(--coral); }
@media (max-width:520px){ .popup{ padding:26px 18px 20px } .pop-head h3{ font-size:22px } .stag{ font-size:12px; padding:6px 11px } }
@media (prefers-reduced-motion:reduce){ .pdot,.stag{ animation:none } }


/* ---------- 매장 파이프라인 ---------- */
.pipeline{ margin-top:34px; border:var(--bd); border-radius:var(--r); background:var(--cream); box-shadow:var(--shadow); padding:26px 26px 22px; }
.pl-head h3{ font-size:22px; letter-spacing:-.5px; }
.pl-head p{ margin-top:6px; font-size:14px; color:var(--sub); letter-spacing:-.2px; }
.pl-open{ margin-top:20px; gap:20px; }
.store.soon{ background:#fff; }
.store .ph.soon-ph{ aspect-ratio:16/11; position:relative; border-bottom:var(--bd); background:radial-gradient(circle at 50% 120%, var(--sun) 0%, var(--coral-l) 46%, var(--coral-d) 88%); display:grid; place-items:center; overflow:hidden; }
.store .ph.soon-ph::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.28) 1.4px, transparent 1.5px); background-size:13px 13px; }
.soon-mark{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.soon-mark{ position:relative; z-index:1; }
.soon-mark em{ font-family:"Fredoka",sans-serif; font-style:normal; font-weight:700; font-size:17px; letter-spacing:3px; color:#fff; border-bottom:2.5px solid #fff; padding-bottom:3px; margin-bottom:4px; }
.soon-mark b{ font-size:32px; font-weight:800; letter-spacing:-1px; color:#fff; text-shadow:2.5px 2.5px 0 var(--ink); }
.soon-mark i{ font-family:"Fredoka",sans-serif; font-style:normal; font-weight:600; font-size:11.5px; letter-spacing:2.5px; color:#fff; text-shadow:1.5px 1.5px 0 rgba(24,19,16,.55); }
.store .ph .badge.soon-badge{ display:inline-flex; align-items:center; gap:7px; background:#1FA85C; color:#fff; }
.store .ph .badge.soon-badge .pdot{ width:9px; height:9px; border-color:#fff; }
.store.soon .sbasis{ margin-top:14px; color:#0F7A44; opacity:1; }
.pl-talk{ margin-top:16px; border:var(--bd); border-radius:16px; background:#fff; padding:13px 14px 14px 16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; --c:#E03A3A; }
.pl-talk::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--c); border-right:2.5px solid var(--ink); }
.pl-gh{ display:flex; align-items:center; gap:8px; margin-left:9px; font-size:13.5px; font-weight:800; letter-spacing:-.2px; }
.pl-gh b{ font-family:"Fredoka",sans-serif; font-size:12px; color:#fff; background:var(--c); border:2px solid var(--ink); border-radius:50px; padding:1px 9px; }
.pl-tags{ display:flex; flex-wrap:wrap; gap:7px; margin:11px 0 0 9px; }
.pl-foot{ margin-top:16px; font-size:13px; color:var(--sub); letter-spacing:-.2px; }
.pl-foot a{ font-weight:800; color:var(--coral-d); border-bottom:2px solid var(--coral); }
@media (max-width:1080px){ .pl-open{ max-width:560px; margin-left:auto; margin-right:auto } }
@media (max-width:760px){ .pipeline{ padding:22px 18px 18px } }