/* =========================================================
   LK SQUARE — style.css
   ========================================================= */

:root{
  --navy:#0A0F1C;
  --navy-2:#0F1830;
  --navy-3:#141F3D;
  --paper:#FAFAF8;
  --paper-2:#F1EFEA;
  --ink:#0E1015;
  --muted:#5B6270;
  --muted-2:#828A98;
  --red:#E31C2E;
  --red-2:#FF4A3D;
  --blue:#3E8BFF;
  --ink-black:#05070E;
  --line-on-dark:rgba(255,255,255,.14);
  --line-on-light:rgba(14,16,21,.10);
  --white:#FFFFFF;

  /* Anton은 라틴 전용 폰트라 한글에는 적용되지 않습니다.
     한글 제목은 --display-ko(Pretendard 900)로, 숫자/영문 타이틀만 Anton을 씁니다. */
  --display:'Anton', 'Archivo', 'Pretendard', sans-serif;
  --display-ko:'Pretendard', 'Archivo', -apple-system, sans-serif;
  --body:'Pretendard', 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1180px;
  --pad: clamp(24px, 5vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-out-back: cubic-bezier(.2,.9,.25,1.2);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
/* height:auto 필수 — width/height 속성이 붙은 이미지가 세로로 눌리거나 늘어나는 것을 막습니다 */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: var(--container); margin:0 auto; padding-left: var(--pad); padding-right: var(--pad); }

::selection{ background:var(--red); color:#fff; }

/* 고정 헤더에 제목이 가리지 않도록 */
section[id]{ scroll-margin-top: 92px; }

/* 키보드 포커스 표시 */
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:6px; }

/* 스크린리더 전용 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   0. 인트로 로더 / 스크롤 진행바
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:grid; place-items:center;
  transition: opacity .7s ease, visibility .7s ease;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-logo{
  font-family:var(--display); font-size:clamp(30px,5.5vw,52px);
  color:#fff; letter-spacing:.06em; text-align:center;
  animation: loaderPulse 1.6s ease-in-out infinite;
}
.loader-logo span{ color:var(--red); }
.loader-bar{
  margin:24px auto 0; width:min(260px,52vw); height:2px;
  background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden;
}
.loader-bar i{ display:block; height:100%; width:0%; background:var(--red); transition:width .35s ease; }
@keyframes loaderPulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:120;
  background:linear-gradient(90deg, var(--red), var(--red-2));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* =========================================================
   1. 스크롤 리빌 시스템
   ========================================================= */
.reveal{
  opacity:0; transform: translateY(34px); filter:blur(0);
  transition: opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.reveal-left { transform: translateX(-52px); }
.reveal.reveal-right{ transform: translateX(52px); }
.reveal.reveal-zoom { transform: scale(.88); }
.reveal.reveal-blur { transform: translateY(20px); filter: blur(14px); }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

.reveal-delay-1{ --d:.08s; }
.reveal-delay-2{ --d:.16s; }
.reveal-delay-3{ --d:.24s; }
.reveal-delay-4{ --d:.32s; }

/* 라인 마스크 리빌 (제목용) */
.mask .ln{ display:block; overflow:hidden; }
.mask .ln > i{
  display:block; font-style:normal;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0s);
}
.mask.in .ln > i{ transform:none; }
.mask .ln:nth-child(2) > i{ transition-delay: calc(var(--d, 0s) + .09s); }
.mask .ln:nth-child(3) > i{ transition-delay: calc(var(--d, 0s) + .18s); }
.mask .ln:nth-child(4) > i{ transition-delay: calc(var(--d, 0s) + .27s); }

/* =========================================================
   2. 내비게이션
   ========================================================= */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 20px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  background: transparent;
  transition: background .45s ease, padding .45s ease, border-color .45s ease, transform .45s var(--ease);
  border-bottom: 1px solid transparent;
}
header.nav.solid{
  background: rgba(10,15,28,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--line-on-dark);
}
header.nav.hide{ transform: translateY(-104%); }

.logo{
  font-family: var(--display); font-size: 20px; letter-spacing:.04em; color:#fff;
  display:flex; align-items:center; gap:8px;
  transition: transform .3s var(--ease);
}
.logo:hover{ transform: translateY(-1px); }
.logo .dot{ color:var(--red); display:inline-block; animation: dotBeat 2.4s ease-in-out infinite; }
@keyframes dotBeat{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.65} }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  position:relative; color: rgba(255,255,255,.78);
  font-size: 14px; font-weight:600; letter-spacing:.01em;
  transition: color .2s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1.5px;
  background:var(--red); transform:scaleX(0); transform-origin:100% 50%;
  transition: transform .4s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.nav-cta{
  background:var(--red); color:#fff !important; padding:10px 20px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  transition: transform .25s var(--ease), background .25s ease, box-shadow .25s ease;
}
.nav-cta:hover{ background:#c81527; transform: translateY(-2px); box-shadow:0 10px 24px rgba(227,28,46,.35); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:transform .3s var(--ease), opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.menu-overlay{ position:fixed; inset:0; background:rgba(6,9,18,.62); backdrop-filter:blur(3px); z-index:198; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.menu-overlay.open{ opacity:1; pointer-events:auto; }

.mobile-menu{
  position:fixed; top:0; right:-100%; width:78%; max-width:340px; height:100vh; height:100dvh;
  background:var(--navy); z-index:199; transition:right .45s var(--ease);
  padding:100px 34px 40px; display:flex; flex-direction:column; gap:8px;
  box-shadow:-30px 0 60px rgba(0,0,0,.35); overflow-y:auto;
}
.mobile-menu.open{ right:0; }
.mobile-menu a{
  color:#fff; font-size:19px; font-weight:700; padding:16px 0;
  border-bottom:1px solid var(--line-on-dark);
  opacity:0; transform:translateX(28px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.open a{ opacity:1; transform:none; }
.mobile-menu.open a:nth-child(2){ transition-delay:.06s }
.mobile-menu.open a:nth-child(3){ transition-delay:.12s }
.mobile-menu.open a:nth-child(4){ transition-delay:.18s }
.mobile-menu.open a:nth-child(5){ transition-delay:.24s }
.mobile-menu.open a:nth-child(6){ transition-delay:.30s }
.mobile-menu .nav-cta{ margin-top:24px; text-align:center; border-bottom:none; padding:16px 0; }
.mobile-menu-close{ position:absolute; top:28px; right:28px; background:none; border:none; color:#fff; padding:8px; cursor:pointer; }

/* =========================================================
   3. 히어로
   ========================================================= */
.hero{
  position:relative; min-height:100vh; min-height:100dvh; width:100%;
  display:flex; align-items:center; overflow:hidden;
  background:#000;
}
.hero-bg{
  position:absolute; inset:-4%;
  background: #000 url('../img/hero.jpg') center right / cover no-repeat;
  animation: kenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenBurns{
  0%  { transform: scale(1)    translate3d(0,0,0); }
  100%{ transform: scale(1.12) translate3d(-1.5%, 1%, 0); }
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(6,9,18,.94) 0%, rgba(6,9,18,.80) 32%, rgba(6,9,18,.38) 58%, rgba(6,9,18,.12) 78%);
}
.hero-inner{ position:relative; z-index:4; width:100%; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.18em; font-weight:700; text-transform:uppercase;
  color:#B9C0CC; margin-bottom:22px;
  opacity:0; transform:translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--red); transform-origin:0 50%; transform:scaleX(0); transition:transform .8s var(--ease) .3s; }
.hero.in .eyebrow{ opacity:1; transform:none; }
.hero.in .eyebrow::before{ transform:scaleX(1); }

.hero h1{
  font-family: var(--display-ko);
  font-weight:900;
  color:#fff;
  font-size: clamp(38px, 6.6vw, 94px);
  line-height: 1.06;
  letter-spacing: -.035em;
  max-width: 820px;
}
.hero h1 em{ font-style:normal; color:var(--red); }

.hero p.sub{
  margin-top:24px; max-width:480px;
  color: rgba(255,255,255,.78);
  font-size: clamp(15px,1.6vw,18px);
  line-height:1.75; font-weight:500;
  opacity:0; transform:translateY(22px);
  transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
}
.hero.in p.sub{ opacity:1; transform:none; }

.hero-cta{
  display:flex; gap:14px; margin-top:40px; flex-wrap:wrap;
  opacity:0; transform:translateY(22px);
  transition: opacity .9s var(--ease) .66s, transform .9s var(--ease) .66s;
}
.hero.in .hero-cta{ opacity:1; transform:none; }

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 16px 30px; border-radius:999px;
  font-size:14px; font-weight:700; letter-spacing:.01em;
  transition: transform .3s var(--ease), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  cursor:pointer; border:1px solid transparent;
}
.btn::after{
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg); transition:left .75s var(--ease); pointer-events:none;
}
.btn:hover::after{ left:150%; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 30px rgba(227,28,46,.28); }
.btn-primary:hover{ background:#c81527; transform: translateY(-3px); box-shadow:0 18px 40px rgba(227,28,46,.42); }
.btn-ghost{ border-color: rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.10); transform: translateY(-3px); }

/* --- 히어로 제품: 좌 → 우 회전 비행 --- */
.hero-product{
  position:absolute; z-index:3;
  right: clamp(10px, 5vw, 110px); top:50%;
  width: clamp(180px, 22vw, 320px);   /* 스틱팩 원본 비율 484:927 유지 */
  aspect-ratio: 484 / 927;
  transform: translateY(-50%);
  pointer-events:none;
}
.hero-product::before{
  content:''; position:absolute; inset:-22% -16%;
  background: radial-gradient(closest-side, rgba(227,28,46,.40), rgba(227,28,46,0) 72%);
  filter: blur(30px); opacity:0; z-index:-1;
}
.hero.in .hero-product::before{
  animation: glowIn 1.2s ease 1.25s forwards, glowPulse 5s ease-in-out 2.5s infinite;
}
@keyframes glowIn{ to{ opacity:1; } }
@keyframes glowPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.62; transform:scale(1.07); } }

.hero-product .par{
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .9s var(--ease);
  will-change: transform;
}
.hero-product .fly{ opacity:0; will-change: transform, opacity; }
.hero.in .hero-product .fly{ animation: flyIn 1.6s var(--ease) .3s forwards; }
@keyframes flyIn{
  0%   { opacity:0; transform: translate3d(-155vw, 26vh, 0) rotate(-1440deg) scale(.24); }
  6%   { opacity:1; }
  58%  { transform: translate3d(9%, -8%, 0) rotate(34deg) scale(1.12); }
  76%  { transform: translate3d(-3%, 3%, 0) rotate(2deg) scale(.96); }
  90%  { transform: translate3d(1%, -1%, 0) rotate(13deg) scale(1.02); }
  100% { opacity:1; transform: translate3d(0,0,0) rotate(9deg) scale(1); }
}
.hero-product .floaty{ will-change: transform; }
.hero.in .hero-product .floaty{ animation: floatY 5.5s ease-in-out 2s infinite; }
@keyframes floatY{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-18px) rotate(-2deg);} }
.hero-product img{ filter: drop-shadow(0 44px 70px rgba(0,0,0,.65)); }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:36px; z-index:5;
  display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.6);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  opacity:0; transition: opacity .8s ease 1.6s;
}
.hero.in .scroll-cue{ opacity:1; }
.scroll-cue .line{ width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--red);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* =========================================================
   4. 섹션 공통
   ========================================================= */
section{ position:relative; }
.section-pad{ padding: clamp(90px,12vw,150px) 0; }
.label{
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.label::before{
  content:''; width:22px; height:1px; background:var(--red);
  transform:scaleX(0); transform-origin:0 50%; transition: transform .7s var(--ease) .1s;
}
.label.in::before, .in .label::before{ transform:scaleX(1); }
.dark{ background:var(--navy); color:#fff; }
.dark .muted{ color:rgba(255,255,255,.66); }
.light .muted{ color:var(--muted); }

h2.h-lg{
  font-family: var(--display-ko);
  font-weight:900;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height:1.12; letter-spacing:-.035em;
  max-width: 780px;
}
h2.h-lg em{ font-style:normal; color:var(--red); }

/* 마퀴 밴드 */
.marquee{ overflow:hidden; white-space:nowrap; padding:16px 0; }
.marquee.red{ background:var(--red); color:#fff; }
.marquee.dark-band{ background:var(--navy-2); color:rgba(255,255,255,.28); border-top:1px solid var(--line-on-dark); border-bottom:1px solid var(--line-on-dark); }
.marquee-track{ display:inline-flex; align-items:center; animation: marquee 30s linear infinite; }
.marquee.reverse .marquee-track{ animation-direction: reverse; }
.marquee-track span{
  font-family:var(--display); font-size:clamp(15px,2vw,22px);
  letter-spacing:.08em; padding:0 26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee-track span::after{ content:'●'; font-size:7px; opacity:.55; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   5. ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items:end; }
.about-copy p{ font-size:17px; line-height:1.85; color:var(--muted); max-width:520px; margin-top:22px; }
.pillars{ display:flex; flex-direction:column; gap:0; }
.pillar{
  position:relative; padding:26px 0 26px 0; border-top:1px solid var(--line-on-light);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  transition: padding-left .4s var(--ease);
}
.pillar::before{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%;
  transition: transform .55s var(--ease);
}
.pillar:hover{ padding-left:16px; }
.pillar:hover::before{ transform:scaleX(1); }
.pillar:last-child{ border-bottom:1px solid var(--line-on-light); }
.pillar .num{ font-family:var(--display); font-size:13px; color:var(--muted-2); transition:color .35s ease; }
.pillar:hover .num{ color:var(--red); }
.pillar .name{ font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.pillar .desc{ font-size:13.5px; color:var(--muted); text-align:left; max-width:440px; line-height:1.65; }

/* =========================================================
   6. BRAND STORY
   ========================================================= */
.story{ overflow:hidden; }
.story-watermark{
  position:absolute; top:6%; left:50%; z-index:0;
  font-family:var(--display); font-size:clamp(80px, 17vw, 240px);
  letter-spacing:.02em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07);
  transform: translate3d(-50%, var(--py,0px), 0);
  pointer-events:none; user-select:none;
}
.story .wrap{ position:relative; z-index:2; }
.story-quote{
  font-family: var(--display-ko); font-weight:900;
  font-size: clamp(27px, 4.4vw, 56px);
  line-height:1.26; letter-spacing:-.035em; max-width:960px;
}
.story-quote .accent{ color:var(--red); }
.story-body{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; margin-top:56px; }
.story-col{ display:flex; flex-direction:column; gap:20px; }
.story-body p{ font-size:16px; line-height:1.95; color:rgba(255,255,255,.72); }
.story-body p strong{ color:#fff; font-weight:700; }
.story-pull{
  margin-top:52px; padding:28px 32px;
  border-left:3px solid var(--red);
  background:linear-gradient(90deg, rgba(227,28,46,.10), rgba(227,28,46,0));
  font-size:clamp(17px,2.1vw,23px); font-weight:800; line-height:1.6; color:#fff; letter-spacing:-.02em;
}
.story-sign{ margin-top:48px; display:flex; align-items:center; gap:18px; }
.story-sign .sign-line{ width:56px; height:1px; background:var(--red); }
.sign-name{ font-size:15px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.sign-role{ margin-top:5px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.42); font-weight:700; }
.story-tag{ margin-top:40px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); font-weight:700; }

/* =========================================================
   7. FOUNDERS / CEO
   ========================================================= */
.ceo-quote{ max-width:840px; }
.quote-mark{ font-family:var(--display); font-size:76px; color:var(--red); line-height:1; margin-bottom:6px; }
.quote-text{ font-size:clamp(20px,2.5vw,30px); font-weight:800; line-height:1.58; letter-spacing:-.025em; color:var(--ink); }
.quote-body{ margin-top:32px; display:flex; flex-direction:column; gap:18px; }
.quote-body p{ font-size:15.5px; line-height:1.9; color:var(--muted); max-width:700px; }
.quote-attr{ margin-top:32px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--muted-2); }

/* =========================================================
   8. PRODUCT
   ========================================================= */
.product-hero{ display:grid; grid-template-columns: .95fr 1.05fr; gap:70px; align-items:center; }
.product-visual{ position:relative; }
.product-visual::before{
  content:''; position:absolute; left:50%; top:50%; width:78%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(92,141,246,.28), transparent 70%);
  filter: blur(26px);
  animation: glowPulse 6s ease-in-out infinite;
}
.product-visual img{
  width:100%; max-width:300px; margin:0 auto; display:block;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55));
  transform: translate3d(0, var(--py,0px), 0) rotate(var(--pr, 0deg));
  transition: transform .2s linear;
}
.product-copy .name{ font-family:var(--display); font-size: clamp(38px,4.2vw,56px); line-height:1; letter-spacing:-.01em; color:#fff; }
.product-copy .name .k{ color:var(--red); }
.brand-mark{ height: 46px; width:auto; display:block; }
.product-copy .tagline{ margin-top:14px; font-size:15px; color:rgba(255,255,255,.6); letter-spacing:.02em; }
.product-copy p.desc{ margin-top:26px; font-size:16px; line-height:1.85; color:rgba(255,255,255,.74); max-width:440px; }

.triple{
  margin-top:44px; display:grid; grid-template-columns: repeat(3,1fr); gap:1px;
  background:var(--line-on-dark); border:1px solid var(--line-on-dark); border-radius:16px; overflow:hidden;
}
.triple .cell{ background:var(--navy-2); padding:26px 22px; position:relative; transition: background .4s ease; }
.triple .cell::before{
  content:''; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease);
}
.triple .cell:hover{ background:var(--navy-3); }
.triple .cell:hover::before{ transform:scaleX(1); }
.triple .cell .tnum{ font-family:var(--display); font-size:13px; color:var(--red); margin-bottom:10px; }
.triple .cell .ttitle{ font-size:16px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.triple .cell .tdesc{ margin-top:8px; font-size:13px; color:rgba(255,255,255,.6); line-height:1.6; }

/* =========================================================
   9. INGREDIENTS
   ========================================================= */
.ing-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background:var(--line-on-light); border:1px solid var(--line-on-light); }
.ing-cell{ background:var(--paper); padding: 40px 26px; transition: background .4s ease, transform .4s var(--ease); }
.ing-cell:hover{ background:#fff; transform: translateY(-6px); }
.ing-cell .amt{ font-family:var(--display); font-size: clamp(34px,3.4vw,46px); letter-spacing:-.01em; }
.ing-cell .amt .unit{ font-size:16px; color:var(--muted); font-family:var(--body); font-weight:700; margin-left:2px; }
.ing-cell .name{ margin-top:10px; font-size:15px; font-weight:800; }
.ing-cell .desc{ margin-top:8px; font-size:13px; color:var(--muted); line-height:1.6; }

/* =========================================================
   11. SPORT GUIDE
   ========================================================= */
.sport-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:56px; }
.sport-card{
  padding:26px 22px; border:1px solid var(--line-on-light); border-radius:18px; background:#fff;
  transform-style:preserve-3d;
  transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.sport-card:hover{ box-shadow: 0 30px 55px rgba(14,16,21,.14); border-color:rgba(227,28,46,.32); }
.sport-card .icon{ width:32px; height:32px; margin-bottom:18px; color:var(--red); transition: transform .45s var(--ease-out-back); }
.sport-card:hover .icon{ transform: scale(1.18) rotate(-8deg); }
.sport-card .sname{ font-size:15.5px; font-weight:800; letter-spacing:-.02em; }
.sport-card .stiming{ margin-top:9px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.sport-card .sdose{ margin-top:6px; font-size:13px; color:var(--red); font-weight:700; }
.sport-card .sbenefit{ margin-top:8px; font-size:12px; color:var(--muted-2); line-height:1.55; }

/* =========================================================
   12. CTA / LAUNCH
   ========================================================= */
.cta-section{
  background: radial-gradient(120% 140% at 50% -10%, #17244a 0%, var(--navy) 55%);
  text-align:center; color:#fff; overflow:hidden;
}
.cta-section .label{ justify-content:center; }
.cta-section .label::before{ display:none; }
.cta-section h2{
  font-family:var(--display-ko); font-weight:900;
  font-size: clamp(32px,5.4vw,72px); line-height:1.1; letter-spacing:-.035em;
}
.cta-section h2 .k{ color:var(--red); }
.cta-section p.sub{ margin:22px auto 0; max-width:480px; color:rgba(255,255,255,.66); font-size:15px; line-height:1.8; }

.countdown{ display:flex; justify-content:center; gap:18px; margin: 48px 0 40px; flex-wrap:wrap; }
.cd-item{ min-width:84px; }
.cd-num{ font-family:var(--display); font-size:clamp(34px,5vw,46px); color:#fff; display:inline-block; }
.cd-num.tick{ animation: tickPop .45s var(--ease-out-back); }
@keyframes tickPop{ 0%{ transform:translateY(-28%) scale(.9); opacity:.2 } 100%{ transform:none; opacity:1 } }
.cd-label{ margin-top:6px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; }

/* 카운트다운 종료 상태 */
.countdown.done{ display:none; }
.launch-live{ display:none; margin:44px 0 34px; }
.launch-live.show{ display:block; animation: fadeUp .8s var(--ease) both; }
.launch-live .badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 24px; border-radius:999px; border:1px solid rgba(227,28,46,.5);
  background:rgba(227,28,46,.12); color:#fff; font-weight:800; font-size:14px; letter-spacing:.02em;
}
.launch-live .badge .live-dot{ width:9px; height:9px; border-radius:50%; background:var(--red); animation: dotBeat 1.6s ease-in-out infinite; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

.cta-note{ margin-top:22px; font-size:12px; color:rgba(255,255,255,.42); }

/* =========================================================
   13. FOOTER
   ========================================================= */
footer{ background:var(--navy); color:rgba(255,255,255,.55); border-top:1px solid var(--line-on-dark); }
.foot-grid{ display:flex; justify-content:space-between; align-items:flex-start; padding: 56px 0 30px; flex-wrap:wrap; gap:30px; }
.foot-logo{ font-family:var(--display); font-size:22px; color:#fff; letter-spacing:.03em; }
.foot-links{ display:flex; gap:32px; flex-wrap:wrap; }
.foot-links a{ font-size:13px; font-weight:600; color:rgba(255,255,255,.62); transition:color .25s ease; }
.foot-links a:hover{ color:#fff; }
.foot-info{ display:flex; flex-wrap:wrap; gap:8px 14px; padding-bottom:22px; font-size:12px; color:rgba(255,255,255,.52); }
.foot-info span:not(:last-child)::after{ content:'·'; margin-left:14px; color:rgba(255,255,255,.3); }
.foot-bottom{ padding: 22px 0 40px; border-top:1px solid var(--line-on-dark); display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.48); flex-wrap:wrap; gap:10px; }

/* =========================================================
   14. 반응형
   ========================================================= */
@media (max-width: 920px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .about-grid, .product-hero{ grid-template-columns: 1fr; }
  .about-grid{ gap:50px; }
  .pillar .desc{ text-align:left; max-width:none; }
  .story-body{ grid-template-columns:1fr; gap:24px; }
  .ing-grid{ grid-template-columns: repeat(2,1fr); }
  .sport-row{ grid-template-columns: repeat(2,1fr); }
  .triple{ grid-template-columns:1fr; }
  .product-visual img{ max-width:190px; }

  /* 히어로 제품은 텍스트 뒤쪽 우하단으로 */
  .hero-product{
    right:-4%; top:auto; bottom:2%; transform:none;
    width: clamp(140px, 38vw, 220px); opacity:.55; z-index:2;
  }
  .hero-inner{ padding-top:96px; }
}
@media (max-width: 560px){
  .ing-grid{ grid-template-columns: 1fr; }
  .sport-row{ grid-template-columns: 1fr; }
  .hero-cta .btn{ flex:1 1 100%; }
  .countdown{ gap:10px; }
  .cd-item{ min-width:66px; }
  .foot-bottom{ flex-direction:column; }
}
/* 480px 이하에서도 구매 버튼은 유지 (원본은 숨김 처리되어 있었음) */
@media (max-width: 480px){
  header.nav .nav-cta{ padding:9px 15px; font-size:12px; }
  .logo{ font-size:17px; }
}

/* =========================================================
   15. 네온 / 스피드 (스마트스토어 상세페이지 톤 반영)
   ========================================================= */
.hl-red { color:var(--red);  text-shadow:0 0 28px rgba(227,28,46,.55); }
.hl-blue{ color:var(--blue); text-shadow:0 0 28px rgba(62,139,255,.55); }

/* 사선 스피드 라인 */
.streaks{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.streak{
  position:absolute; left:-45%; height:2px; width:42%;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  transform: skewY(-11deg); opacity:0;
  animation: streak 3.4s linear infinite;
}
.streak.b{ background:linear-gradient(90deg, transparent, var(--blue), transparent); }
.streak:nth-child(1){ top:14%; animation-delay:0s;   }
.streak:nth-child(2){ top:31%; animation-delay:.7s;  width:30%; }
.streak:nth-child(3){ top:48%; animation-delay:1.4s; }
.streak:nth-child(4){ top:66%; animation-delay:2.1s; width:34%; }
.streak:nth-child(5){ top:82%; animation-delay:2.8s; width:26%; }
@keyframes streak{
  0%  { left:-45%; opacity:0; }
  10% { opacity:.85; }
  90% { opacity:.85; }
  100%{ left:112%; opacity:0; }
}

/* 문제 제기 섹션 */
.problem{
  background:var(--ink-black); color:#fff; text-align:center; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.problem::before{
  content:''; position:absolute; left:50%; top:-30%; width:min(1100px,120vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(62,139,255,.16), transparent 70%);
  pointer-events:none;
}
.problem .wrap{ position:relative; z-index:2; }
.problem .big-num{
  font-family:var(--display); line-height:.86;
  font-size:clamp(96px, 17vw, 230px); letter-spacing:-.02em;
  background:linear-gradient(180deg, #ffffff 8%, rgba(255,255,255,.10) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 40px rgba(62,139,255,.25));
}
.problem h2{
  font-family:var(--display-ko); font-weight:900;
  font-size:clamp(28px, 5.4vw, 66px); line-height:1.16; letter-spacing:-.042em;
  margin-top:8px;
}
.problem .p-sub{
  margin:26px auto 0; max-width:560px;
  font-size:clamp(15px,1.7vw,17px); line-height:1.85; color:rgba(255,255,255,.66);
}
.problem .p-meta{
  margin-top:40px; display:inline-flex; align-items:center; gap:12px;
  padding:11px 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  font-size:13px; font-weight:700; color:rgba(255,255,255,.8); letter-spacing:.01em;
}
.problem .p-meta .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:dotBeat 1.8s ease-in-out infinite; }

/* 다크 섹션 네온 강화 */
.dark .h-lg em, .story-quote .accent{ text-shadow:0 0 30px rgba(227,28,46,.4); }
.triple .cell:hover{ box-shadow: inset 0 0 40px rgba(62,139,255,.10); }

@media (max-width: 560px){
  .problem .big-num{ font-size:clamp(80px, 26vw, 130px); }
}

/* =========================================================
   16. WHY AMINO K — 비교표 (상세페이지 POINT 01)
   ========================================================= */
.compare{ background:var(--navy-2); color:#fff; border-top:1px solid var(--line-on-dark); text-align:center; }
.point-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 26px; border-radius:999px; background:var(--red); color:#fff;
  font-family:var(--display); font-size:15px; letter-spacing:.16em;
  box-shadow:0 0 34px rgba(227,28,46,.45);
}
.point-lead{ margin-top:22px; font-size:clamp(15px,1.9vw,19px); color:rgba(255,255,255,.8); font-weight:600; }
.compare .eyebrow-c{
  margin-top:56px; font-size:12px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue);
}
.compare h2{
  margin-top:12px; font-family:var(--display-ko); font-weight:900;
  font-size:clamp(28px,4.6vw,56px); letter-spacing:-.04em; line-height:1.14;
  color:#fff;   /* 지정하지 않으면 body의 --ink(검정)를 상속해 네이비 배경에 묻힙니다 */
}
.compare h2 .k{ color:var(--red); }
.cmp-sub{ margin-top:18px; font-size:14.5px; line-height:1.9; color:rgba(255,255,255,.62); }
.cmp-sub b{ color:#fff; font-weight:800; }

.cmp-wrap{ margin-top:44px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
table.cmp{ width:100%; min-width:660px; border-collapse:separate; border-spacing:8px; }
table.cmp th, table.cmp td{ padding:16px 12px; font-size:14px; text-align:center; }
table.cmp thead th{ color:rgba(255,255,255,.6); font-weight:700; font-size:13px; letter-spacing:.02em; }
table.cmp tbody th{
  width:110px; color:rgba(255,255,255,.72); font-weight:800; font-size:13px;
  text-align:left; white-space:pre-line; line-height:1.35;
}
table.cmp td{
  background:rgba(255,255,255,.055); border-radius:11px;
  color:rgba(255,255,255,.62); font-weight:600;
}
/* AMINO K 강조 컬럼 */
table.cmp .hi{
  background:linear-gradient(160deg, rgba(62,139,255,.30), rgba(62,139,255,.14));
  border:1px solid rgba(62,139,255,.55);
  color:#fff; font-weight:800;
  box-shadow:0 0 26px rgba(62,139,255,.20);
}
table.cmp thead .hi{
  background:transparent; border:none; box-shadow:none;
  font-family:var(--display); font-size:20px; letter-spacing:.02em; color:#fff;
}
table.cmp thead .hi em{ font-style:normal; color:var(--red); }
table.cmp .check{ color:#4ADE80; }
.cmp-foot{ margin-top:34px; font-size:clamp(14px,1.8vw,17px); color:rgba(255,255,255,.82); font-weight:700; }
.cmp-foot .k{ color:var(--red); }
.cmp-scroll-hint{ display:none; margin-top:12px; font-size:11.5px; color:rgba(255,255,255,.4); }

/* =========================================================
   17. 01 ENERGY SOLUTION — 이중 탄수화물 그래프
   ========================================================= */
.energy{ background:#EEF2FC; color:#101728; text-align:center; }
.energy h2{
  margin-top:16px; font-family:var(--display-ko); font-weight:900;
  font-size:clamp(27px,4.4vw,52px); letter-spacing:-.04em; line-height:1.2; color:#12224A;
}
.energy h2 .accent{ color:var(--red); }
.energy .e-sub{ margin-top:18px; font-size:clamp(14px,1.7vw,16px); color:#5A6478; line-height:1.8; }

.chart-card{
  margin-top:40px; background:#fff; border-radius:22px;
  padding:30px clamp(16px,3vw,38px) 26px;
  box-shadow:0 22px 55px rgba(20,32,68,.09);
}
.chart-legend{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.lg-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px; border-radius:999px; color:#fff; font-size:13px; font-weight:800;
}
.lg-pill i{ width:9px; height:9px; border-radius:50%; background:#fff; }
.lg-pill.glucose{ background:#C8102E; }
.lg-pill.pala{ background:#E8A317; }
.chart-box{ margin-top:20px; }
.chart-box svg{ width:100%; height:auto; display:block; }
#revealRect{ transform-box:fill-box; transform-origin:0 50%; transform:scaleX(0); transition:transform 2s var(--ease); }
.chart-box.in #revealRect{ transform:scaleX(1); }

.fuel-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; text-align:left; }
.fuel{ background:#fff; border-radius:14px; padding:22px 24px; border-left:5px solid #C8102E; box-shadow:0 10px 26px rgba(20,32,68,.06); }
.fuel.pala{ border-left-color:#E8A317; }
.fuel .fname{ font-size:17px; font-weight:900; color:#12224A; letter-spacing:-.02em; }
.fuel .fname b{ color:#C8102E; margin-left:6px; }
.fuel.pala .fname b{ color:#E8A317; }
.fuel .fname b span{ font-size:12px; font-weight:800; }
.fuel .fdesc{ margin-top:9px; font-size:13.5px; line-height:1.7; color:#5A6478; }
.energy .disclaimer{ margin-top:20px; font-size:12px; color:#8A93A6; }

@media (max-width: 700px){
  .fuel-cards{ grid-template-columns:1fr; }
  .cmp-scroll-hint{ display:block; }
}

/* =========================================================
   18. 신뢰 배지 (HACCP / 무카페인 / 도핑프리)
   ========================================================= */
.trust-row{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,34px);
  flex-wrap:wrap; margin-top:44px;
}
.trust-badge{
  display:flex; align-items:center; gap:12px;
  padding:13px 22px; border-radius:16px;
  border:1px solid var(--line-on-light); background:#fff;
  box-shadow:0 8px 22px rgba(14,16,21,.05);
  transition:transform .35s var(--ease), box-shadow .35s ease;
}
.trust-badge:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(14,16,21,.10); }
.trust-badge img{ width:54px; height:auto; flex:none; }
.trust-badge .tb-mark{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--red); color:var(--red);
  font-family:var(--display); font-size:15px; letter-spacing:.02em;
}
.trust-badge .tb-mark.blue{ border-color:var(--blue); color:var(--blue); }
.trust-badge .tb-t{ font-size:14.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.trust-badge .tb-d{ margin-top:3px; font-size:11.5px; color:var(--muted); }

/* =========================================================
   19. POINT 03 — 제품 특성
   ========================================================= */
.feature{ background:var(--navy); color:#fff; text-align:center; }
.feature .f-lead{ margin-top:22px; font-size:clamp(15px,1.9vw,19px); color:rgba(255,255,255,.8); font-weight:600; }
.feat-list{ margin-top:70px; display:flex; flex-direction:column; gap:clamp(56px,7vw,92px); }
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; text-align:left; }
.feat:nth-child(even) .feat-media{ order:2; }
.feat-media{ border-radius:20px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.42); }
.feat-media img{ width:100%; height:auto; display:block; transition:transform 1.1s var(--ease); }
.feat:hover .feat-media img{ transform:scale(1.05); }
.feat-num{ font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--blue); }
.feat h3{
  margin-top:14px; font-family:var(--display-ko); font-weight:900;
  font-size:clamp(24px,3.4vw,40px); line-height:1.22; letter-spacing:-.04em;
}
.feat h3 .accent{ color:var(--red); }
.feat h3 .accent-b{ color:var(--blue); }
.feat p{ margin-top:18px; font-size:15.5px; line-height:1.85; color:rgba(255,255,255,.66); }

/* =========================================================
   20. 영양정보 · 제품고시정보
   ========================================================= */
.facts{ background:var(--paper-2); }
.facts-head{ text-align:center; }
.facts-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.facts h2{
  margin-top:10px; font-family:var(--display-ko); font-weight:900;
  font-size:clamp(26px,3.6vw,42px); letter-spacing:-.04em; color:var(--ink);
}
.facts-card{
  margin-top:34px; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 16px 40px rgba(14,16,21,.07);
}

/* 영양정보 */
table.nutri{ width:100%; border-collapse:collapse; }
table.nutri caption{
  background:var(--navy); color:#fff; text-align:left;
  padding:17px 24px; font-size:15px; font-weight:800; letter-spacing:-.01em;
}
table.nutri caption b{ float:right; color:#7FB2FF; font-weight:800; }
table.nutri th, table.nutri td{ padding:14px 24px; font-size:14.5px; border-bottom:1px solid rgba(14,16,21,.07); }
table.nutri th{ text-align:left; font-weight:600; color:var(--ink); }
table.nutri th.sub{ padding-left:44px; font-weight:500; color:var(--muted); font-size:13.5px; }
table.nutri td.val{ text-align:right; font-weight:800; color:var(--ink); white-space:nowrap; }
table.nutri tr.sub td.val{ font-weight:600; color:var(--muted); }
table.nutri td.pct{ text-align:right; width:82px; color:var(--muted-2); font-size:13px; white-space:nowrap; }
table.nutri tbody tr:nth-child(even){ background:#FBFCFE; }
table.nutri tbody tr:last-child th, table.nutri tbody tr:last-child td{ border-bottom:none; }
.facts-note{ margin-top:14px; font-size:12px; color:var(--muted); line-height:1.7; }

/* 제품고시정보 */
table.notice{ width:100%; border-collapse:collapse; }
table.notice th, table.notice td{
  padding:16px 22px; font-size:14px; text-align:left; vertical-align:top;
  border-bottom:1px solid rgba(14,16,21,.07); line-height:1.75;
}
table.notice th{
  width:150px; background:#F7F8FB; font-weight:800; color:var(--ink);
  font-size:13.5px; white-space:nowrap;
}
table.notice td{ color:var(--muted); }
table.notice tr:last-child th, table.notice tr:last-child td{ border-bottom:none; }
.facts-legal{
  margin-top:16px; padding:14px 18px; border-radius:12px;
  background:rgba(227,28,46,.06); border:1px solid rgba(227,28,46,.16);
  font-size:12.5px; color:#8A3B44; line-height:1.7;
}

@media (max-width: 860px){
  .feat{ grid-template-columns:1fr; gap:22px; }
  .feat:nth-child(even) .feat-media{ order:0; }
}
@media (max-width: 560px){
  table.nutri th, table.nutri td{ padding:12px 14px; font-size:13.5px; }
  table.nutri th.sub{ padding-left:28px; }
  table.notice th, table.notice td{ padding:13px 14px; font-size:13px; }
  table.notice th{ width:96px; white-space:normal; }
  table.nutri caption{ padding:15px 16px; font-size:13.5px; }
  table.nutri caption b{ float:none; display:block; margin-top:5px; }
}

/* =========================================================
   21. ENERGY SURGE — 힘이 솟아오르는 모션 그래프
   ========================================================= */
.surge{ background:#04060D; color:#fff; overflow:hidden; }
.surge-bg{
  position:absolute; inset:0; z-index:0;
  background:url('../img/surge-athlete.jpg') center right / cover no-repeat;
  opacity:.42;
  animation: surgeBreathe 14s ease-in-out infinite alternate;
}
@keyframes surgeBreathe{ 0%{ transform:scale(1); opacity:.34 } 100%{ transform:scale(1.09); opacity:.5 } }

/* ---------- 브랜드 필름 (ENERGY SURGE 하단 독립 블록) ---------- */
.film{
  background:#04060D; position:relative;
  padding: 0 0 clamp(80px, 10vw, 132px);
}
.film-head{ text-align:center; padding-bottom:30px; }
.film-eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); display:flex; align-items:center; justify-content:center; gap:10px;
}
.film-eyebrow::before, .film-eyebrow::after{ content:''; width:26px; height:1px; background:rgba(62,139,255,.5); }
.film-title{
  margin-top:12px; font-family:var(--display-ko); font-weight:900; color:#fff;
  font-size:clamp(22px,3.2vw,38px); letter-spacing:-.04em; line-height:1.2;
}
.film-title .accent{ color:var(--red); }

.film-frame{
  position:relative; max-width:1000px; margin:0 auto;
  aspect-ratio:16 / 9; border-radius:22px; overflow:hidden; background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.09),
             0 0 70px rgba(62,139,255,.14);
}
.film-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.film-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:22px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.45);
}

/* 소리 토글 */
.sound-btn{
  position:absolute; right:var(--pad); bottom:30px; z-index:4;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.86); font-size:12.5px; font-weight:700; letter-spacing:.01em;
  font-family:var(--body);
  transition:background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.sound-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); transform:translateY(-2px); }
.sound-btn svg{ width:16px; height:16px; flex:none; }
.sound-btn .wave{ opacity:0; transition:opacity .25s ease; }
.sound-btn[aria-pressed="true"] .wave{ opacity:1; }
.sound-btn[aria-pressed="true"]{ border-color:rgba(227,28,46,.6); background:rgba(227,28,46,.16); color:#fff; }
.sound-btn.film-sound{ right:16px; bottom:16px; z-index:5; }
@media (max-width: 560px){
  .sound-btn{ bottom:16px; right:16px; padding:9px 14px; font-size:11.5px; }
  .sound-btn.film-sound{ right:12px; bottom:12px; }
  .film-frame{ border-radius:16px; }
  .film-frame::after{ border-radius:16px; }
}
.surge::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,6,13,.97) 0%, rgba(4,6,13,.86) 38%, rgba(4,6,13,.42) 68%, rgba(4,6,13,.22) 100%),
    linear-gradient(180deg, rgba(4,6,13,.9) 0%, transparent 22%, transparent 76%, rgba(4,6,13,.95) 100%);
}
.surge .wrap{ position:relative; z-index:3; }

/* 솟아오르는 에너지 입자 */
.surge-particles{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.surge-particles span{
  position:absolute; bottom:-6%; width:3px; height:16px; border-radius:3px;
  background:linear-gradient(180deg, var(--red), rgba(227,28,46,0));
  opacity:0; will-change:transform, opacity;
  animation: riseUp 5s linear infinite;
}
.surge-particles span:nth-child(even){ background:linear-gradient(180deg, var(--blue), rgba(62,139,255,0)); }
@keyframes riseUp{
  0%   { transform:translateY(0) scaleY(.5); opacity:0; }
  10%  { opacity:.95; }
  85%  { opacity:.7; }
  100% { transform:translateY(-105vh) scaleY(1.7); opacity:0; }
}
.surge-particles span:nth-child(1) { left:4%;  animation-delay:0s;   height:12px; }
.surge-particles span:nth-child(2) { left:11%; animation-delay:1.7s; }
.surge-particles span:nth-child(3) { left:18%; animation-delay:.6s;  height:22px; }
.surge-particles span:nth-child(4) { left:25%; animation-delay:3.1s; }
.surge-particles span:nth-child(5) { left:33%; animation-delay:1.1s; height:19px; }
.surge-particles span:nth-child(6) { left:40%; animation-delay:4.2s; }
.surge-particles span:nth-child(7) { left:47%; animation-delay:2.3s; height:14px; }
.surge-particles span:nth-child(8) { left:55%; animation-delay:.3s;  }
.surge-particles span:nth-child(9) { left:62%; animation-delay:3.6s; height:24px; }
.surge-particles span:nth-child(10){ left:69%; animation-delay:1.4s; }
.surge-particles span:nth-child(11){ left:76%; animation-delay:4.7s; height:13px; }
.surge-particles span:nth-child(12){ left:83%; animation-delay:2.1s; }
.surge-particles span:nth-child(13){ left:90%; animation-delay:.9s;  height:20px; }
.surge-particles span:nth-child(14){ left:96%; animation-delay:3.3s; }

.surge-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,5vw,64px); align-items:center; }
.surge-copy p.lead{ margin-top:22px; font-size:16px; line-height:1.9; color:rgba(255,255,255,.72); max-width:430px; }

/* POWER 게이지 */
.power{ margin-top:38px; display:inline-flex; align-items:flex-end; gap:14px; }
.power-num{
  font-family:var(--display); line-height:.9;
  font-size:clamp(56px,8vw,92px);
  background:linear-gradient(180deg,#fff 20%, #7FB2FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(62,139,255,.5));
}
.power-num i{ font-style:normal; font-size:.42em; margin-left:2px; }
.power-lab{
  padding-bottom:10px; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}

/* 그래프 */
.surge-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.sg-grid line{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.sg-before{
  stroke:rgba(255,255,255,.34); stroke-width:3; fill:none;
  stroke-dasharray:7 9; stroke-linecap:round;
  opacity:0; transition:opacity .7s ease .1s;
}
.surge-chart.in .sg-before{ opacity:1; }

.sg-line{
  fill:none; stroke:url(#sgGrad); stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  filter:url(#sgGlow);
  stroke-dasharray:1150; stroke-dashoffset:1150;
  transition:stroke-dashoffset 1.9s cubic-bezier(.3,.9,.3,1) .55s;
}
.surge-chart.in .sg-line{ stroke-dashoffset:0; }

.sg-area{ fill:url(#sgFill); opacity:0; transition:opacity 1s ease 1.5s; }
.surge-chart.in .sg-area{ opacity:1; }

.sg-arrow{ opacity:0; transform:translate(-14px,14px); transition:opacity .5s ease 2.2s, transform .6s var(--ease-out-back) 2.2s; }
.surge-chart.in .sg-arrow{ opacity:1; transform:none; }

.sg-mark-dot{ fill:#fff; filter:url(#sgGlow); opacity:0; transition:opacity .4s ease .5s; }
.surge-chart.in .sg-mark-dot{ opacity:1; }
.sg-ring{ fill:none; stroke:var(--red); stroke-width:2.5; transform-origin:302px 268px; opacity:0; }
.surge-chart.in .sg-ring{ animation:sgPulse 2.4s ease-out .8s infinite; }
.surge-chart.in .sg-ring.r2{ animation-delay:1.6s; }
@keyframes sgPulse{
  0%  { transform:scale(1);   opacity:.9; }
  100%{ transform:scale(5.2); opacity:0;  }
}
.sg-tick{ stroke:rgba(255,255,255,.28); stroke-width:1.5; stroke-dasharray:4 6; opacity:0; transition:opacity .5s ease .6s; }
.surge-chart.in .sg-tick{ opacity:1; }

.sg-txt{ font-family:'Pretendard',sans-serif; font-weight:700; }
.sg-txt.dim{ fill:rgba(255,255,255,.45); font-size:15px; }
.sg-txt.hot{ fill:#fff; font-size:16px; }
.sg-txt.blue{ fill:#7FB2FF; font-size:16px; }
.sg-label{ opacity:0; transition:opacity .7s ease 1.9s; }
.surge-chart.in .sg-label{ opacity:1; }

@media (max-width: 920px){
  .surge-grid{ grid-template-columns:1fr; gap:34px; }
  .surge-copy p.lead{ max-width:none; }
  .surge-bg{ opacity:.3; }
}

/* =========================================================
   22. REAL REVIEW
   ========================================================= */
.reviews{ background:#06080F; color:#fff; overflow:hidden; }
.reviews::before,
.reviews::after{
  content:''; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(90px);
}
.reviews::before{
  width:min(720px,90vw); aspect-ratio:1; top:-22%; left:-14%;
  background:radial-gradient(closest-side, rgba(227,28,46,.20), transparent 70%);
}
.reviews::after{
  width:min(760px,95vw); aspect-ratio:1; bottom:-28%; right:-16%;
  background:radial-gradient(closest-side, rgba(62,139,255,.20), transparent 70%);
}
.reviews .wrap{ position:relative; z-index:2; }
.rv-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.rv-head{ text-align:center; }
.rv-pill{
  display:inline-block; padding:8px 22px; border-radius:999px;
  background:var(--red); color:#fff;
  font-family:var(--display); font-size:13px; letter-spacing:.22em;
  box-shadow:0 0 30px rgba(227,28,46,.45);
}
.rv-title{
  margin-top:20px; font-family:var(--display);
  font-size:clamp(34px,6.4vw,76px); line-height:1.02; letter-spacing:.005em;
}
.rv-title .b{ color:#9CC2FF; }
.rv-title .k{ color:var(--red); }
.rv-sub{ margin-top:20px; font-size:clamp(14px,1.7vw,16.5px); color:rgba(255,255,255,.6); line-height:1.85; }

.rv-grid{
  margin-top:clamp(44px,6vw,70px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px);
}
.rv-card{
  position:relative; overflow:hidden;
  padding:clamp(26px,3vw,36px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  transition:transform .45s var(--ease), border-color .45s ease, box-shadow .45s ease;
}
.rv-card::before{   /* 큰 따옴표 워터마크 */
  content:'”'; position:absolute; right:14px; top:-26px;
  font-family:var(--display); font-size:170px; line-height:1;
  color:rgba(255,255,255,.05); pointer-events:none;
}
.rv-card::after{    /* 상단 그라데이션 라인 */
  content:''; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--red), var(--blue));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.rv-card:hover{
  transform:translateY(-8px);
  border-color:rgba(124,170,255,.42);
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 50px rgba(62,139,255,.14);
}
.rv-card:hover::after{ transform:scaleX(1); }
.rv-card.featured{ grid-column:span 2; }

.rv-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.rv-emblem{ position:relative; width:74px; height:74px; display:grid; place-items:center; flex:none; }
.rv-emblem::before{
  content:''; position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(62,139,255,.30), transparent 72%);
  transition:background .4s ease;
}
.rv-card:hover .rv-emblem::before{ background:radial-gradient(closest-side, rgba(227,28,46,.34), transparent 72%); }
.rv-ring{ position:absolute; inset:0; width:100%; height:100%; animation:rvSpin 16s linear infinite; }
.rv-ring circle{ fill:none; stroke:url(#rvRingGrad); stroke-width:3; stroke-dasharray:16 11; stroke-linecap:round; }
@keyframes rvSpin{ to{ transform:rotate(360deg); } }
.rv-glyph{
  position:relative; width:36px; height:36px;
  fill:none; stroke:#EAF1FF; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s ease, transform .5s var(--ease-out-back);
}
.rv-card:hover .rv-glyph{ stroke:#fff; transform:scale(1.1); }

.rv-tag{
  padding:7px 14px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(124,170,255,.34); background:rgba(62,139,255,.12);
  font-size:11.5px; font-weight:800; color:#9CC2FF; letter-spacing:.01em;
}
.rv-quote{
  position:relative; margin-top:24px;
  font-size:16.5px; line-height:1.78; font-weight:600; color:rgba(255,255,255,.9);
  letter-spacing:-.015em; word-break:keep-all;
}
.rv-card.featured .rv-quote{ font-size:clamp(18px,2.2vw,25px); line-height:1.7; font-weight:700; }
.rv-who{
  margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.rv-name{ font-size:15.5px; font-weight:900; letter-spacing:-.02em; color:#fff; }
.rv-role{ font-size:12.5px; color:rgba(255,255,255,.5); font-weight:600; }

.rv-verdict{
  margin-top:clamp(44px,6vw,68px); text-align:center;
  padding:clamp(28px,4vw,40px) clamp(20px,4vw,48px); border-radius:20px;
  border:1px solid rgba(227,28,46,.28);
  background:linear-gradient(140deg, rgba(227,28,46,.14), rgba(62,139,255,.08));
}
.rv-verdict p{
  font-family:var(--display-ko); font-weight:900;
  font-size:clamp(17px,2.5vw,29px); line-height:1.55; letter-spacing:-.035em;
  background:linear-gradient(92deg, #FF8A7A, #fff 45%, #9CC2FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rv-note{ margin-top:20px; text-align:center; font-size:12px; color:rgba(255,255,255,.42); }

@media (max-width: 980px){
  .rv-grid{ grid-template-columns:repeat(2,1fr); }
  .rv-card.featured{ grid-column:span 2; }
}
@media (max-width: 620px){
  .rv-grid{ grid-template-columns:1fr; }
  .rv-card.featured{ grid-column:span 1; }
  .rv-emblem{ width:62px; height:62px; }
  .rv-glyph{ width:30px; height:30px; }
  .rv-card::before{ font-size:120px; top:-18px; }
}

/* =========================================================
   23. 4컷 만화
   ========================================================= */
.toon{ background:var(--paper-2); }
.toon-head{ text-align:center; }
.toon-head .label{ justify-content:center; }
.toon-head .label::before{ display:none; }
.toon-head h2{ margin:0 auto; }
.toon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.toon-grid{
  margin-top:clamp(44px,6vw,66px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px);
  max-width:1000px; margin-left:auto; margin-right:auto;
}
.toon-panel{
  position:relative; margin:0; border-radius:20px; overflow:hidden;
  background:var(--navy); border:1px solid rgba(14,16,21,.12);
  box-shadow:0 18px 44px rgba(14,16,21,.13);
  transition:transform .45s var(--ease), box-shadow .45s ease;
}
.toon-panel:hover{ transform:translateY(-6px); box-shadow:0 30px 60px rgba(14,16,21,.20); }
.toon-no{
  position:absolute; left:16px; top:14px; z-index:3;
  font-family:var(--display); font-size:15px; letter-spacing:.1em;
  color:rgba(255,255,255,.42);
}
.toon-art{ position:relative; }
.toon-art svg{ width:100%; height:auto; display:block; }

.toon-panel figcaption{
  padding:20px clamp(18px,2.4vw,26px) 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.09);
}
.toon-line{
  font-family:var(--display-ko); font-weight:900; color:#fff;
  font-size:clamp(16px,1.9vw,20px); line-height:1.45; letter-spacing:-.035em;
  word-break:keep-all;
}
.toon-line .accent{ color:var(--red); }
.toon-line .accent-b{ color:#7FB2FF; }
.toon-sub{
  margin-top:9px; font-size:13px; line-height:1.7;
  color:rgba(255,255,255,.58); word-break:keep-all;
}

/* 광선 회전 */
.toon-rays{ transform-origin:200px 150px; animation:rvSpin 26s linear infinite; }

.toon-end{
  margin-top:clamp(34px,4.5vw,52px); text-align:center;
  font-family:var(--display-ko); font-weight:900; color:var(--ink);
  font-size:clamp(17px,2.4vw,27px); letter-spacing:-.035em; line-height:1.5;
}
.toon-end .accent{ color:var(--red); }
.toon-endsub{ margin-top:14px; text-align:center; font-size:13px; color:var(--muted); }

@media (max-width: 700px){
  .toon-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   24. 모션 최소화 선호 사용자 대응
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .mask .ln > i{ transform:none !important; }
  .hero-product .fly{ opacity:1 !important; }
  .hero .eyebrow, .hero p.sub, .hero-cta, .scroll-cue{ opacity:1 !important; transform:none !important; }
  #revealRect{ transform:scaleX(1) !important; }
  .surge-particles{ display:none; }
  .rv-ring{ animation:none !important; }
  .toon-rays{ animation:none !important; }
  .sg-line{ stroke-dashoffset:0 !important; }
  .sg-before, .sg-area, .sg-arrow, .sg-mark-dot, .sg-tick, .sg-label{ opacity:1 !important; transform:none !important; }
  .sg-ring{ display:none; }
}