/* ============================================================
   GOGIRUN (고기달려) 가맹모집 랜딩페이지
   PURPLE × YELLOW × BLACK — 영업형 랜딩페이지
   ============================================================ */

:root{
  --purple: #6C2BD9;
  --purple-light: #9B5CF0;
  --purple-deep: #4A1BA0;
  --purple-darker: #2A1160;
  --purple-black: #150A30;
  --yellow: #FFE000;
  --yellow-deep: #FFC700;
  --black: #0B0B0D;
  --black2: #161618;
  --white: #FFFFFF;
  --gray: #b7b2c2;
  --gray-dark: #6e6a7c;
  --font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-trendy: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --font-en: 'Anton', 'Pretendard', sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-kr);
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
.container{ max-width:1280px; margin:0 auto; padding:0 24px; }
.eng{ font-family:var(--font-en); letter-spacing:1px; }
.trendy{ font-family:var(--font-trendy); }
.hl-yellow{ color:var(--yellow); }
.hl-purple{ color:var(--purple-light); }

/* ---------------- Loading Screen (3s) — digital/tech style ---------------- */
#loading-screen{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(circle at 50% 35%, var(--purple-deep) 0%, var(--purple-black) 75%, #08040f 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition: opacity .5s var(--ease), visibility .5s;
  overflow:hidden;
}
#loading-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }

/* Digital grid backdrop */
.loading-grid{
  position:absolute; inset:-10%; z-index:0;
  background-image:
    linear-gradient(rgba(255,224,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,224,0,.12) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,.9) 0%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,.9) 0%, transparent 68%);
  animation: gridDrift 6s linear infinite;
  opacity:.8;
}
@keyframes gridDrift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(38px,38px); }
}
/* Horizontal scanline sweep */
.loading-scanline{
  position:absolute; left:0; right:0; height:120px; z-index:1;
  top:-120px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,224,0,.22) 45%, rgba(255,224,0,.06) 55%, transparent 100%);
  animation: scanSweep 2.4s cubic-bezier(.3,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes scanSweep{
  0%{ top:-120px; }
  100%{ top:100%; }
}

.loading-logo-wrap{
  position:relative; z-index:2;
  width:clamp(140px,28vw,210px);
  opacity:0;
  transform:scale(.7) rotate(-8deg);
  animation: logoPop 3s var(--ease) forwards;
  display:flex; align-items:center; justify-content:center;
}
.loading-logo-img{
  width:100%; display:block; position:relative; z-index:2;
  filter: drop-shadow(0 0 18px rgba(255,224,0,.55)) drop-shadow(0 8px 26px rgba(0,0,0,.5));
  animation: logoPulseGlow 1.8s ease-in-out infinite;
}
@keyframes logoPulseGlow{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(255,224,0,.4)) drop-shadow(0 8px 26px rgba(0,0,0,.5)); }
  50%{ filter: drop-shadow(0 0 30px rgba(255,224,0,.85)) drop-shadow(0 8px 26px rgba(0,0,0,.5)); }
}
.loading-logo-glow{
  position:absolute; z-index:1; inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,0,.35) 0%, transparent 70%);
  animation: ringPulse 1.8s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{ transform:scale(.85); opacity:.5; }
  50%{ transform:scale(1.12); opacity:1; }
}
@keyframes logoPop{
  0%{ opacity:0; transform:scale(.6) rotate(-14deg); }
  35%{ opacity:1; transform:scale(1.08) rotate(4deg); }
  50%{ transform:scale(1) rotate(0deg); }
  85%{ opacity:1; transform:scale(1) rotate(0deg); }
  100%{ opacity:0; transform:scale(1.12) rotate(0deg); }
}

.loading-text-wrap{ position:relative; z-index:2; height:2.4em; width:100%; text-align:center; }
.loading-word{
  font-family:var(--font-trendy);
  font-weight:700;
  font-size:clamp(1.4rem, 4.2vw, 2.2rem);
  letter-spacing:.5px;
  color:var(--yellow);
  opacity:0;
  position:absolute; left:0; right:0; text-align:center;
  text-shadow:0 0 18px rgba(255,224,0,.55), 0 4px 18px rgba(0,0,0,.4);
}
.loading-word.active{ animation: loadWordGlitch 1.5s var(--ease) forwards; }
#load-run.active{ color:var(--white); text-shadow:0 0 18px rgba(255,255,255,.5), 0 4px 18px rgba(0,0,0,.4); }
@keyframes loadWordGlitch{
  0%{ opacity:0; transform:translateY(14px) scale(.9); filter:blur(3px); clip-path:inset(0 0 100% 0); }
  12%{ opacity:1; clip-path:inset(0 0 0 0); filter:blur(0); }
  16%{ transform:translate(-3px,0) scale(1.02); }
  20%{ transform:translate(3px,0) scale(1); }
  24%{ transform:translate(0,0); }
  30%{ transform:translateY(0) scale(1.04); }
  42%{ transform:scale(1); }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-10px) scale(1.02); }
}

.loading-bar-track{
  position:relative; z-index:2;
  width:min(240px,60vw); height:4px; border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,224,0,.15);
}
.loading-bar-fill{
  position:relative;
  width:0%; height:100%;
  background:linear-gradient(90deg, var(--yellow-deep), var(--yellow));
  border-radius:999px;
  animation: loadBar 3s linear forwards;
  box-shadow:0 0 12px rgba(255,224,0,.7);
}
.loading-bar-glow{
  position:absolute; top:0; left:0; height:100%; width:26px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: barScan 1.1s linear infinite;
  mix-blend-mode:screen;
}
@keyframes loadBar{ 0%{ width:0%; } 100%{ width:100%; } }
@keyframes barScan{
  0%{ transform:translateX(-30px); }
  100%{ transform:translateX(260px); }
}
.loading-percent{
  position:relative; z-index:2;
  font-family:var(--font-en);
  font-size:.85rem; letter-spacing:3px; color:rgba(255,224,0,.75);
}
.loading-percent .pct-unit{ opacity:.6; }

/* ---------------- Header ---------------- */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:linear-gradient(to bottom, rgba(11,11,13,.85), transparent);
  transition: background .3s, padding .3s;
}
#site-header.scrolled{
  background:rgba(11,11,13,.96);
  backdrop-filter:blur(6px);
  padding:10px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.logo{ display:flex; align-items:center; gap:10px; letter-spacing:1px; }
.logo-img{ height:38px; width:auto; display:block; }
.logo-text{ font-family:var(--font-en); font-size:1.5rem; color:var(--white); }
.logo-text span{ color:var(--yellow); }
@media (max-width:480px){ .logo-text{ display:none; } }
.main-nav{ display:flex; gap:30px; }
.main-nav a{ font-size:.95rem; font-weight:700; color:var(--white); position:relative; padding:6px 0; transition: color .25s; }
.main-nav a:hover{ color:var(--yellow); }
.header-cta{ display:flex; gap:10px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px;
  font-weight:800; font-size:.95rem;
  transition: transform .25s var(--ease), box-shadow .25s;
  white-space:nowrap;
}
.btn-yellow{ background:var(--yellow); color:var(--black); box-shadow:0 6px 20px rgba(255,224,0,.3); }
.btn-yellow:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 10px 26px rgba(255,224,0,.45); }
.btn-outline{ border:2px solid var(--white); color:var(--white); }
.btn-outline:hover{ background:var(--white); color:var(--black); }
.btn-outline-yellow{ border:2px solid var(--yellow); color:var(--yellow); }
.btn-outline-yellow:hover{ background:var(--yellow); color:var(--black); }
.btn-sm{ padding:10px 18px; font-size:.85rem; }
.btn-lg{ padding:20px 40px; font-size:1.15rem; }

/* ---------------- Generic Section ---------------- */
.section{ position:relative; padding:130px 0; }
.section-black{ background:var(--black); }
.section-black2{ background:var(--black2); }
.section-purple{ background: radial-gradient(circle at 30% 15%, var(--purple-deep) 0%, var(--purple) 55%, var(--purple-darker) 100%); }
.section-purple-deep{ background: radial-gradient(circle at 50% 30%, var(--purple-darker) 0%, var(--purple-black) 100%); }
.section-yellow{ background:var(--yellow); color:var(--black); }
.eyebrow{ font-family:var(--font-en); letter-spacing:5px; font-size:.95rem; color:var(--yellow); margin-bottom:18px; display:block; }
.section-yellow .eyebrow{ color:var(--purple-deep); }
.section-title{ font-family:var(--font-trendy); font-weight:400; font-size:clamp(2rem,5.2vw,3.6rem); line-height:1.3; margin-bottom:22px; }
.section-desc{ font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.85; color:var(--gray); max-width:660px; }
.section-yellow .section-desc{ color:#3d2a5c; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.micro-cta{ margin-top:36px; }
.micro-cta a{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:.95rem; color:var(--yellow);
  border-bottom:2px solid var(--yellow); padding-bottom:4px;
  transition: opacity .25s;
}
.micro-cta a:hover{ opacity:.7; }

/* ================================================================
   SECTION 01 — HERO
   ================================================================ */
#hero-section{
  position:relative; height:100vh; min-height:680px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--purple-black);
}
/* 임시 배경: 실제 매장/조리 이미지·영상 교체 전까지 보라×노랑 트렌디 패턴 */
.hero-pattern-bg{
  position:absolute; inset:0; z-index:0;
  background-color:var(--purple);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,224,0,.42) 0%, transparent 42%),
    radial-gradient(circle at 84% 72%, rgba(255,224,0,.30) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(74,27,160,.9) 0%, var(--purple-black) 72%),
    repeating-linear-gradient(135deg, rgba(255,224,0,.10) 0px, rgba(255,224,0,.10) 14px, transparent 14px, transparent 40px),
    radial-gradient(circle, rgba(255,224,0,.20) 2.4px, transparent 3px);
  background-size: auto, auto, auto, auto, 28px 28px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: heroPatternMove 24s linear infinite;
}
@keyframes heroPatternMove{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 0 0, 0 0, 0 0, 130px 130px, 130px 130px; }
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(21,10,48,.1) 0%, rgba(11,11,13,.28) 55%, rgba(11,11,13,.82) 100%);
}
.hero-blackout{
  position:absolute; inset:0; z-index:2;
  background:#000; opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.hero-blackout.on{ opacity:1; }
.hero-content{ position:relative; z-index:3; text-align:center; padding:0 20px; max-width:1180px; width:100%; }

/* ---- 4줄 인트로 문이: 줄당 큼기는 다르지만 JS가 가로폭을 맞춰준다 (포스타 능눀) ---- */
.hero-line-group{
  display:flex; flex-direction:column; align-items:center;
  gap:12px;
  margin-bottom:8px;
}
@media (max-width:768px){ .hero-line-group{ gap:8px; } }
@media (max-width:480px){ .hero-line-group{ gap:4px; } }
.hero-fit-line{
  display:inline-block;
  font-family:var(--font-trendy);
  font-weight:800;
  color:var(--white);
  white-space:nowrap;
  line-height:1.02;
  letter-spacing:-1px;
  opacity:0;
  transform:translateY(-60px) scale(1.4);
  filter:blur(3px);
  transition:
    opacity .28s cubic-bezier(.2,.9,.3,1),
    transform .42s cubic-bezier(.16,.9,.2,1.18),
    filter .28s linear;
  text-shadow:0 4px 16px rgba(0,0,0,.4);
}
/* Per-line font-size is hand-tuned in vw units (not JS-measured) so each
   line's rendered width roughly matches the others despite differing
   character counts, purely via CSS — this responds to viewport width
   instantly and natively, with none of the timing/race issues that
   affect JS-based measurement in some rendering environments. Sized at
   ~1/3 of the original oversized hero type per user feedback. */
.hl-1{ font-size:clamp(1.3rem, 7.3vw, 3rem); }
.hl-2{ font-size:clamp(1.6rem, 9.1vw, 3.75rem); }
.hl-3{ font-size:clamp(0.62rem, 3.3vw, 1.4rem); }
.hl-4{ font-size:clamp(1.25rem, 6.9vw, 2.85rem); }
@media (max-width:480px){
  .hl-1{ font-size:clamp(1.1rem, 7.3vw, 1.7rem); }
  .hl-2{ font-size:clamp(1.35rem, 9.1vw, 2.1rem); }
  .hl-3{ font-size:clamp(0.55rem, 3.3vw, 0.8rem); }
  .hl-4{ font-size:clamp(1.05rem, 6.9vw, 1.6rem); }
}
.hero-line-group.in .hero-fit-line{
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
}
.hero-line-group.in .hl-1{ transition-delay:.0s; }
.hero-line-group.in .hl-2{ transition-delay:.1s; }
.hero-line-group.in .hl-3{ transition-delay:.2s; }
.hero-line-group.in .hl-4{ transition-delay:.3s; }
.hero-fit-line.hl-4{ color:var(--yellow); font-weight:900; }
.hero-question{
  font-family:var(--font-trendy);
  font-weight:800;
  letter-spacing:-1px;
  font-size:clamp(2rem, 6.2vw, 4rem);
  color:var(--yellow);
  line-height:1.15;
  display:none;
  opacity:0;
  transform:scale(.85);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hero-question.show{ display:block; }
.hero-question.in{ opacity:1; transform:scale(1); }
.hero-sub{
  font-size:clamp(1rem,1.9vw,1.2rem); line-height:1.8; color:#e9e5f7;
  margin:0 auto; max-width:600px;
  max-height:0; overflow:hidden; opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s, max-height .1s linear .1s, margin .1s linear .1s;
}
.hero-sub.in{ opacity:1; transform:translateY(0); max-height:300px; margin:26px auto 0; }
.hero-final{
  font-family:var(--font-trendy); font-weight:900;
  font-size:clamp(1.6rem,4.6vw,2.6rem); color:var(--yellow);
  line-height:1.1; letter-spacing:-1px;
  margin-top:26px; opacity:0; transform:translateY(-90px) scale(1.7);
  filter:blur(4px);
  max-height:0; overflow:hidden;
  transition:
    opacity .3s cubic-bezier(.2,.9,.3,1),
    transform .5s cubic-bezier(.15,.9,.18,1.22),
    filter .3s linear,
    max-height .1s linear, margin .1s linear;
}
.hero-final.in{
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
  max-height:300px;
  text-shadow:0 0 34px rgba(255,224,0,.45);
}
.hero-final .hl-yellow{ display:block; margin-top:6px; font-size:1.15em; }
.hero-cta-wrap{
  margin-top:0; opacity:0; transform:translateY(16px);
  max-height:0; overflow:hidden;
  transition:opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s, max-height .1s linear .3s, margin .1s linear .3s;
}
.hero-cta-wrap.in{ opacity:1; transform:translateY(0); max-height:200px; margin-top:38px; }
.hero-scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--white); opacity:.7; font-size:.72rem; letter-spacing:3px;
}
.hero-scroll-cue .bar{ width:2px; height:34px; background:linear-gradient(var(--yellow), transparent); animation: scrollCue 1.6s ease-in-out infinite; }
@keyframes scrollCue{ 0%{ transform:scaleY(.3); opacity:.3; } 50%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(.3); opacity:.3; } }
#hero-pin-space{ height:260vh; position:relative; }

/* ================================================================
   SECTION 02 — SUCCESS FORMULA
   ================================================================ */
.formula-wrap{ text-align:center; }
.formula-eq{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:50px 0; font-family:var(--font-en);
}
.formula-eq .f-word{
  font-size:clamp(2.2rem,7vw,4.5rem);
  letter-spacing:2px;
}
.formula-eq .f-trend{ color:var(--white); -webkit-text-stroke:1px var(--yellow); }
.formula-eq .f-easy{ color:var(--yellow); }
.formula-eq .f-plus, .formula-eq .f-line{ color:var(--gray-dark); font-size:clamp(1.4rem,4vw,2.2rem); }
.formula-eq .f-success{
  font-family:var(--font-trendy);
  color:var(--white);
  font-size:clamp(2rem,6vw,3.6rem);
  background:var(--purple);
  padding:10px 40px; border-radius:16px;
  margin-top:10px;
}
.formula-meatproof{
  font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(3rem,11vw,7rem);
  color:var(--yellow);
  margin:60px 0 40px;
  text-shadow:0 0 40px rgba(255,224,0,.25);
}
.formula-desc{ max-width:680px; margin:0 auto 50px; color:var(--gray); font-size:1.05rem; line-height:1.9; }
.keyword-chain{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px;
  margin:0 auto 56px;
}
.keyword-chain span.kw{
  background:var(--black2); border:1px solid rgba(255,255,255,.12);
  color:var(--white); font-weight:800; padding:12px 22px; border-radius:999px; font-size:.95rem;
}
.keyword-chain span.x{ color:var(--yellow); font-family:var(--font-en); font-size:1.2rem; }
.formula-close{
  font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(1.5rem,4.2vw,2.4rem); line-height:1.5;
}

/* ================================================================
   SECTION 03 — WHY GOGIRUN
   ================================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:60px; }
.why-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px; padding:36px 26px;
  transition: transform .3s var(--ease), background .3s, border-color .3s;
}
.why-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,.1); border-color:var(--yellow); }
.why-num{ font-family:var(--font-en); font-size:1.1rem; color:var(--yellow); letter-spacing:2px; margin-bottom:14px; display:block; }
.why-big{ font-family:var(--font-trendy); font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:14px; line-height:1.35; }
.why-card p{ font-size:.92rem; color:#ece7fb; line-height:1.7; }
.why-tags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:56px; }
.why-tags span{
  background:var(--yellow); color:var(--black); font-weight:800; font-size:.95rem;
  padding:12px 22px; border-radius:999px;
}

/* ================================================================
   SECTION 04 — SUPPLY POWER
   ================================================================ */
.supply-x{
  display:flex; align-items:center; justify-content:center; gap:26px; margin:50px 0 60px;
  flex-wrap:wrap;
}
.supply-x .s-name{ font-family:var(--font-trendy); font-size:clamp(1.6rem,4.6vw,2.8rem); color:var(--white); }
.supply-x .s-x{ font-family:var(--font-en); font-size:1.6rem; color:var(--yellow); }
.supply-flow{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:50px 0 60px;
}
.supply-flow .flow-step{
  background:var(--black2); border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:18px 22px; font-weight:800; font-size:.95rem; color:var(--white); text-align:center;
  min-width:100px;
}
.supply-flow .flow-arrow{ color:var(--yellow); font-size:1.3rem; }
.supply-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:56px; }
.supply-points .pt{
  background:var(--black2); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:24px 20px;
  display:flex; align-items:flex-start; gap:14px;
}
.supply-points .pt i{ color:var(--yellow); font-size:1.3rem; margin-top:3px; }
.supply-points .pt p{ font-size:.92rem; color:var(--gray); line-height:1.6; }
.supply-note{ font-size:.82rem; color:var(--gray-dark); margin-top:-30px; margin-bottom:50px; }
.supply-close{
  font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(1.4rem,3.6vw,2.1rem); text-align:center; line-height:1.5; color:var(--yellow);
}

/* ================================================================
   SECTION 05 — BRAND IDENTITY
   ================================================================ */
#brand-id-section{
  text-align:center; padding:170px 0; overflow:hidden;
}
.brand-id-logo{ width:clamp(180px,26vw,320px); margin:0 auto 40px; }
.brand-id-flow{
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  font-family:var(--font-trendy); font-size:clamp(1.6rem,4.6vw,3rem); margin-bottom:40px;
}
.brand-id-flow span{ opacity:.35; transition:opacity .4s, color .4s; }
.brand-id-flow span.on{ opacity:1; color:var(--yellow); }
.brand-id-flow i{ color:var(--gray-dark); font-size:1.2rem; }
.brand-id-copy{
  font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(1.8rem,5.2vw,3.2rem); line-height:1.4; margin-bottom:30px;
}
.brand-id-tag{ font-family:var(--font-en); color:var(--gray); letter-spacing:3px; font-size:1rem; }
.brand-id-tag b{ color:var(--yellow); }

/* ================================================================
   SECTION 06 — MENU
   ================================================================ */
.menu-header{ text-align:center; margin-bottom:56px; }
.filter-tabs{ display:flex; gap:12px; justify-content:center; margin-bottom:46px; flex-wrap:wrap; }
.filter-btn{
  padding:11px 24px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  color:var(--white); font-weight:700; font-size:.9rem;
  transition: background .25s, color .25s, border-color .25s;
}
.filter-btn:hover{ border-color:var(--yellow); color:var(--yellow); }
.filter-btn.active{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.menu-proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mp-item{ position:relative; overflow:hidden; border-radius:18px; cursor:pointer; aspect-ratio:1/1; box-shadow:0 16px 40px rgba(0,0,0,.4); }
.mp-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.mp-item:hover img{ transform:scale(1.1); }
.mp-item .mp-cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.88), transparent);
  opacity:0; transition:opacity .3s;
}
.mp-item:hover .mp-cap{ opacity:1; }
.mp-cap span{ font-size:.82rem; font-weight:700; color:var(--white); }
.mp-item.hide{ display:none; }
.menu-proof-more{ text-align:center; margin-top:40px; }
.btn-loadmore{
  display:inline-flex; align-items:center; gap:8px; padding:15px 36px; border-radius:999px;
  background:var(--black2); border:1px solid rgba(255,255,255,.2);
  color:var(--white); font-weight:800; font-size:.95rem;
  transition: border-color .25s, color .25s;
}
.btn-loadmore:hover{ border-color:var(--yellow); color:var(--yellow); }
.menu-mid-copy{
  text-align:center; font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(1.6rem,4.2vw,2.6rem); margin:70px 0 20px;
}
.menu-close-copy{ text-align:center; color:var(--gray); font-size:1.05rem; max-width:560px; margin:0 auto; line-height:1.8; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:9000; background:rgba(8,8,10,.95);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:40px 20px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(720px,92vw); max-height:78vh; object-fit:contain; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox p{ color:var(--gray); font-size:.9rem; }
#lightbox-close{
  position:absolute; top:24px; right:28px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
#lightbox-close:hover{ background:var(--yellow); color:var(--black); }

/* ================================================================
   SECTION 07 — SALES UP SYSTEM (샵앤샵)
   ================================================================ */
.shopinshop-diagram{
  display:flex; flex-direction:column; align-items:center; gap:14px; margin:56px 0 40px;
}
.sis-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; }
.sis-box{
  background:var(--black2); border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:20px 28px; font-weight:800; text-align:center; min-width:150px;
}
.sis-box.purple{ background:var(--purple); border-color:var(--purple-light); }
.sis-x{ font-family:var(--font-en); color:var(--yellow); font-size:1.4rem; }
.sis-arrow{ color:var(--gray-dark); font-size:1.4rem; }
.sis-result{
  font-family:var(--font-trendy); font-weight:400; font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--yellow); text-align:center; margin-top:10px;
}
.sales-example{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:50px 0; font-weight:800; font-size:1.05rem;
}
.sales-example .ex-box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:18px 26px; text-align:center; min-width:150px;
}
.sales-example .ex-op{ color:var(--yellow); font-family:var(--font-en); font-size:1.3rem; }
.sales-example .ex-eq-result{
  background:var(--yellow); color:var(--black); border-radius:14px; padding:18px 26px;
  font-family:var(--font-trendy); font-size:1.1rem;
}
.oneKitchen{
  text-align:center; font-family:var(--font-en); font-size:clamp(1.6rem,4.4vw,2.6rem);
  letter-spacing:2px; color:var(--white); -webkit-text-stroke:1px var(--yellow);
  margin:50px 0;
}
.sales-close{
  text-align:center; font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(1.4rem,3.6vw,2.1rem); color:var(--yellow); margin:50px 0 20px;
}
.sales-honesty-note{
  max-width:620px; margin:40px auto 0; text-align:center; font-size:.9rem;
  color:var(--gray-dark); line-height:1.8; border-top:1px solid rgba(255,255,255,.1); padding-top:24px;
}

/* ================================================================
   SECTION 08 — START GUIDE
   ================================================================ */
.steps-list{ display:flex; flex-direction:column; gap:0; margin-top:60px; }
.step-row{
  display:grid; grid-template-columns:110px 1fr; gap:26px; align-items:flex-start;
  padding:28px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.step-row:last-child{ border-bottom:none; }
.step-num{ font-family:var(--font-en); font-size:2.2rem; color:var(--purple-light); -webkit-text-stroke:1px var(--yellow); }
.step-body h4{ font-size:1.25rem; font-weight:800; margin-bottom:8px; }
.step-body p{ color:var(--gray); font-size:.95rem; line-height:1.7; }
.guide-download{
  margin-top:60px; background:var(--purple); border-radius:24px; padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.guide-download h3{ font-family:var(--font-trendy); font-size:clamp(1.3rem,3vw,1.7rem); margin-bottom:10px; }
.guide-download p{ color:#ece7fb; font-size:.9rem; }

/* ================================================================
   SECTION 09 — BRAND CLOSING
   ================================================================ */
#closing-section{ text-align:center; padding:180px 0; overflow:hidden; position:relative; }
.closing-copy{
  font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(1.8rem,5vw,3rem); line-height:1.5;
  min-height:2.2em;
}
.closing-logo-big{
  font-family:var(--font-trendy); font-weight:400;
  font-size:clamp(3rem,11vw,7.5rem); color:var(--yellow); margin:30px 0;
  opacity:0; transform:scale(.7);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.closing-logo-big.in{ opacity:1; transform:scale(1); }
.closing-sub{ color:#ece7fb; font-size:1.1rem; line-height:2; margin-bottom:14px; }
.closing-sub b{ color:var(--yellow); }
.closing-cta{ margin-top:36px; }

/* ================================================================
   SECTION 10 — CONTACT
   ================================================================ */
#contact-section{ }
.contact-wrap{ display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:start; }
.contact-benefits{ display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.contact-benefits .b-item{
  display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:16px 20px;
}
.contact-benefits .b-item i{ color:var(--yellow); font-size:1.2rem; }
.contact-benefits .b-item span{ font-weight:700; font-size:.95rem; }
.contact-card-form{
  background:var(--black2); border:1px solid rgba(255,255,255,.1); border-radius:26px; padding:40px;
}
.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:8px; color:var(--gray); }
.form-row label .req{ color:var(--yellow); }
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  color:var(--white); font-size:.95rem; font-family:inherit;
}
.form-row input::placeholder, .form-row textarea::placeholder{ color:var(--gray-dark); }
.form-row select{ appearance:none; cursor:pointer; }
.form-row textarea{ resize:vertical; min-height:90px; }
.radio-group{ display:flex; gap:20px; flex-wrap:wrap; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; color:var(--white); margin-bottom:0; }
.radio-group input[type="radio"]{ accent-color:var(--yellow); width:16px; height:16px; }
.consent-row{ display:flex; align-items:flex-start; gap:10px; margin:24px 0; font-size:.85rem; color:var(--gray); }
.consent-row input{ margin-top:3px; accent-color:var(--yellow); width:16px; height:16px; }
.btn-submit{
  width:100%; padding:20px; border-radius:14px; background:var(--yellow); color:var(--black);
  font-family:var(--font-trendy); font-weight:400; font-size:1.2rem;
  transition: transform .25s var(--ease), box-shadow .25s;
  box-shadow:0 10px 30px rgba(255,224,0,.25);
}
.btn-submit:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(255,224,0,.4); }
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.form-note{ text-align:center; font-size:.82rem; color:var(--gray-dark); margin-top:14px; }
.form-success{
  display:none; text-align:center; padding:40px 20px;
}
.form-success.show{ display:block; }
.form-success i{ font-size:3rem; color:var(--yellow); margin-bottom:20px; }
.form-success h3{ font-family:var(--font-trendy); font-size:1.6rem; margin-bottom:12px; }
.form-success p{ color:var(--gray); }

/* ---------------- Footer ---------------- */
#site-footer{ background:#050506; padding:60px 0 130px; color:var(--gray); }
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:40px; }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-en); font-size:1.7rem; color:var(--white); margin-bottom:14px; }
.footer-logo-img{ height:32px; width:auto; display:block; }
.footer-logo span{ color:var(--yellow); }
.footer-sns{ display:flex; gap:14px; margin-top:16px; }
.footer-sns a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.footer-sns a:hover{ background:var(--yellow); color:var(--black); }
.footer-info{ font-size:.85rem; line-height:2; }
.footer-info b{ color:#e5e5e5; }
.footer-links{ display:flex; gap:20px; font-size:.85rem; margin-top:16px; flex-wrap:wrap; }
.footer-links a:hover{ color:var(--yellow); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:24px; font-size:.78rem; color:#5a5866; }

/* ---------------- Mobile Sticky Bar ---------------- */
#mobile-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  display:none;
  background:var(--black2);
  border-top:1px solid rgba(255,255,255,.1);
  padding: 8px calc(8px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-right));
  box-shadow:0 -6px 24px rgba(0,0,0,.45);
}
.sticky-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sticky-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:56px; border-radius:14px; font-size:.72rem; font-weight:800;
  color:var(--white); background:rgba(255,255,255,.06);
}
.sticky-btn i{ font-size:1.15rem; }
.sticky-btn.primary{ background:var(--yellow); color:var(--black); }

/* ---------------- Reveal Animation Helpers ---------------- */
.reveal{ opacity:0; transform:translateY(50px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-zoom{ opacity:0; transform:scale(.9); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-zoom.in{ opacity:1; transform:scale(1); }

/* ================= Responsive ================= */
@media (max-width: 1024px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .supply-points{ grid-template-columns:1fr 1fr; }
  .menu-proof-grid{ grid-template-columns:repeat(3,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
  .step-row{ grid-template-columns:70px 1fr; }
}
@media (max-width: 900px){
  .main-nav{ display:none; }
  #hero-pin-space{ height:300vh; }
}
@media (max-width: 768px){
  .section{ padding:90px 0; }
  .why-grid{ grid-template-columns:1fr; }
  .supply-points{ grid-template-columns:1fr; }
  .menu-proof-grid{ grid-template-columns:repeat(2,1fr); }
  #mobile-sticky-bar{ display:block; }
  body{ padding-bottom:78px; }
  .header-cta .btn-outline{ display:none; }
  .guide-download{ flex-direction:column; text-align:center; }
  .sales-example, .sis-row{ flex-direction:column; }
  .sis-arrow{ transform:rotate(90deg); }
}
@media (max-width: 480px){
  .filter-tabs{ gap:8px; }
  .filter-btn{ padding:8px 16px; font-size:.82rem; }
  .menu-proof-grid{ gap:10px; }
  .formula-eq .f-success{ padding:8px 24px; }
  .contact-card-form{ padding:28px 22px; }
}