/* 홈 인트로 시퀀스(테스트): 6인 클로즈업 컷 → 원탁 풀샷(전체 화면) → 중앙 히어로 → 아래로 스크롤. 타이밍은 intro.js의 CFG. */
:root{--gold:#f8c349;--gold-d:#c99a2a;--ink:#000;--cream:#fff;--ease:cubic-bezier(.16,1,.3,1);--script:'Great Vibes','Snell Roundhand','Apple Chancery','Brush Script MT',cursive}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--cream)}
body{font-family:Pretendard,'Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
body.is-playing{height:auto}  /* 인트로 재생 중에도 아래로 스크롤 가능 */
#stage{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;background:var(--ink);isolation:isolate}
#next{position:relative;min-height:100vh;min-height:100svh;background:var(--ink)}

/* 시네마 레터박스 */
.bar{position:absolute;left:0;right:0;height:7.5vh;background:#000;z-index:30;transition:height 1.2s var(--ease)}
.bar-t{top:0}.bar-b{bottom:0}
body.is-done .bar{height:0}

/* ───────── 클로즈업 슬라이드 ───────── */
#slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none}
.slide.on{visibility:visible}
.slide .ph{position:absolute;top:0;bottom:0;right:0;width:min(82vh,58vw);overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%);mask-image:linear-gradient(to right,transparent 0,#000 26%)}
.slide.flip .ph{right:auto;left:0;-webkit-mask-image:linear-gradient(to left,transparent 0,#000 15%);mask-image:linear-gradient(to left,transparent 0,#000 15%)}
.slide .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 38%;transform-origin:68% 36%;will-change:transform,filter;filter:sepia(.1) contrast(1.06)}
.slide.flip .ph img{transform-origin:32% 36%}
.slide .cap{position:absolute;left:clamp(28px,6.5vw,120px);top:50%;transform:translateY(-50%);max-width:44vw;z-index:2}
.slide.flip .cap{left:auto;right:clamp(28px,6.5vw,120px);text-align:right}

/* 영문 이름(필기체)이 위, 한글은 작게 아래 */
.slide .en{font:400 clamp(58px,8.6vw,150px)/.98 var(--script);color:var(--cream);letter-spacing:0;text-shadow:0 4px 40px rgba(0,0,0,.55);
  clip-path:inset(-35% 100% -35% -8%)}
.slide .en span{display:block;padding-right:.08em}
.slide .en span+span{margin-left:.5em}
.slide.flip .en span+span{margin-left:0;margin-right:.5em}
.slide .ko{margin-top:clamp(12px,1.4vw,22px);font-size:clamp(17px,1.65vw,27px);font-weight:600;letter-spacing:.06em;color:var(--gold);opacity:0}
.slide .tag{margin-top:12px;font-size:clamp(13px,1.1vw,17px);font-weight:400;letter-spacing:-.01em;color:rgba(255,255,255,.58);opacity:0}
.slide .rule{display:block;width:56px;height:2px;background:var(--gold);margin:20px 0 0;transform:scaleX(0);transform-origin:left}
.slide.flip .rule{margin-left:auto;transform-origin:right}

/* 슬라이드 진입 애니메이션(밝기 플래시 포함) */
.slide.on{animation:cutIn .15s linear both}
@keyframes cutIn{from{opacity:0}to{opacity:1}}
.slide.on .ph img{animation:push var(--dur,1.05s) cubic-bezier(.3,.1,.2,1) both}
@keyframes push{from{transform:scale(1.32);filter:sepia(.1) contrast(1.06) brightness(1.5)}18%{filter:sepia(.1) contrast(1.06) brightness(1)}to{transform:scale(1.02)}}
.slide.on .en{animation:write .42s .03s cubic-bezier(.5,.05,.2,1) both}   /* 손글씨처럼 왼쪽에서 오른쪽으로 써내려감 */
@keyframes write{to{clip-path:inset(-35% -8% -35% -8%)}}
.slide.on .ko{animation:fadeUp .34s .23s var(--ease) both}
.slide.on .rule{animation:ruleIn .34s .27s var(--ease) both}
@keyframes ruleIn{to{transform:scaleX(1)}}
.slide.on .tag{animation:fadeUp .34s .34s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.slide.out{animation:cutOut .11s linear both}
@keyframes cutOut{to{opacity:0}}

/* ───────── 원탁 풀샷: 화면 가득, 가운데 정렬, 진한 비네팅 ───────── */
#scene{position:absolute;inset:0;opacity:0;visibility:hidden}
#scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;transform-origin:50% 42%;filter:sepia(.08) contrast(1.05)}
#scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 54% at 50% 50%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.8) 50%,rgba(0,0,0,.97) 84%,#000 100%),linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.7))}
body.is-scene #scene{visibility:visible;animation:sceneIn 1s linear both}
@keyframes sceneIn{from{opacity:0}to{opacity:1}}
body.is-scene #scene img{animation:pull 2.4s cubic-bezier(.22,.7,.2,1) both}
@keyframes pull{from{transform:scale(1.9);filter:sepia(.08) contrast(1.05) brightness(1.6)}to{transform:scale(1)}}
body.is-done #scene{animation:none;opacity:1;visibility:visible}
body.is-done #scene img{animation:breathe 22s ease-in-out infinite alternate;transform:scale(1)}
@keyframes breathe{to{transform:scale(1.045) translate(-.6%,.3%)}}

/* ───────── 히어로(가운데 정렬) ───────── */
#hero{position:absolute;top:46%;left:50%;transform:translate(-50%,-52%);width:min(92vw,900px);text-align:center;z-index:5;visibility:hidden;word-break:keep-all}
#hero>*{opacity:0;transform:translateY(22px)}
body.is-hero #hero{visibility:visible}
body.is-hero #hero>*{animation:fadeUp .9s var(--ease) both}
body.is-hero #hero>:nth-child(1){animation-delay:.05s}
body.is-hero #hero>:nth-child(2){animation-delay:.15s}
body.is-hero #hero>:nth-child(3){animation-delay:.25s}
body.is-hero #hero>:nth-child(4){animation-delay:.4s}
body.is-hero #hero>:nth-child(5){animation-delay:.55s}
.hero-logo{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--cream);margin-bottom:26px}
.hero-logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700}
.hero-logo img{height:40px;width:auto;display:block;filter:brightness(1.5) saturate(1.1) drop-shadow(0 0 10px rgba(80,130,255,.35))}
.hero-eyebrow{font:600 12px/1 Georgia,serif;letter-spacing:.42em;color:var(--gold);margin-bottom:22px;padding-left:.42em}
.hero-title{font-size:clamp(34px,4.7vw,80px);font-weight:800;letter-spacing:-.05em;line-height:1.14;color:var(--cream);text-shadow:0 6px 50px rgba(0,0,0,.8)}
.hero-title span{display:block}.hero-title .gold{color:var(--gold);font-weight:inherit}
.hero-sub.hero-tag{margin-top:0;white-space:nowrap}.hero-tag .gold{color:var(--gold);font-weight:700}
.hero-sub{margin-top:26px;font-size:clamp(14px,1.2vw,19px);line-height:1.8;color:rgba(255,255,255,.72);letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.9)}
.hero-cta{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:17px 32px;border-radius:999px;background:var(--gold);color:#17120a;font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.hero-cta i{font-style:normal;transition:transform .35s var(--ease)}
.hero-cta:hover{background:#fbd57a;transform:translateY(-2px);box-shadow:0 14px 40px rgba(248,195,73,.28)}
.hero-cta:hover i{transform:translateX(4px)}

/* 아래로 내려가기 버튼 */
#down{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.72);text-decoration:none;font-size:12px;letter-spacing:.2em;opacity:0;visibility:hidden;transition:opacity .8s .3s,color .25s}
body.is-done #down{opacity:1;visibility:visible}
#down:hover{color:var(--gold)}
#down i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
#down i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:drip 1.8s cubic-bezier(.5,0,.3,1) infinite}
@keyframes drip{0%{top:-100%}60%,100%{top:100%}}

/* ───────── 진행바·버튼 ───────── */
#progress{position:absolute;left:50%;bottom:calc(7.5vh + 18px);transform:translateX(-50%);display:flex;gap:6px;z-index:40;transition:opacity .6s}
#progress i{display:block;width:34px;height:2px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
#progress i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
#progress i.done::after{transform:scaleX(1)}
#progress i.run::after{animation:fill var(--dur,1.05s) linear both}
@keyframes fill{to{transform:scaleX(1)}}
body.is-scene #progress,body.is-done #progress{opacity:0}
#skip,#replay{position:absolute;z-index:40;border:0;background:none;color:rgba(255,255,255,.72);font:500 13px/1 Pretendard,'Apple SD Gothic Neo',sans-serif;letter-spacing:.04em;cursor:pointer;padding:10px 4px;transition:color .2s,opacity .5s}
#skip{right:clamp(20px,3vw,48px);bottom:calc(7.5vh + 10px)}
#skip i{font-style:normal;margin-left:4px}
#replay{right:clamp(20px,3vw,48px);bottom:22px;opacity:0;pointer-events:none}
#skip:hover,#replay:hover{color:var(--gold)}
body.is-done #skip{opacity:0;pointer-events:none}
body.is-done #replay{opacity:1;pointer-events:auto}

/* ───────── 필름 효과 ───────── */
.fx{position:absolute;inset:0;pointer-events:none;z-index:20}
.fx-vig{background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.72) 100%)}
.fx-flash{background:radial-gradient(circle at 60% 40%,rgba(248,195,73,.55),rgba(248,195,73,0) 62%);opacity:0;z-index:25}
.fx-flash.go{animation:flash .34s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.fx-grain{inset:-50%;width:200%;height:200%;opacity:.16;mix-blend-mode:overlay;z-index:26;animation:grain .6s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ───────── 모바일(≤768px) ───────── */
@media (max-width:768px){
  .bar{height:5vh}#progress{bottom:calc(5vh + 14px)}#skip{bottom:auto;top:calc(5vh + 10px);right:18px}#replay{bottom:auto;top:calc(5vh + 10px);right:18px}
  .slide .ph,.slide.flip .ph{left:0;right:0;width:100%;top:0;bottom:auto;height:66svh;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}
  .slide .ph img{object-position:60% 30%;transform-origin:64% 34%}
  .slide .cap,.slide.flip .cap{left:24px;right:24px;top:auto;bottom:calc(5vh + 46px);transform:none;max-width:none;text-align:left}
  .slide .en{font-size:clamp(52px,16vw,84px)}
  .slide.flip .en span+span{margin-left:.5em;margin-right:0}
  .slide .ko{margin-top:8px}
  .slide.flip .rule{margin-left:0;transform-origin:left}
  /* 마지막 장면: 화면이 세로라 전체 인물이 보이도록 위쪽에 가로로 놓는다 */
  #scene{inset:auto;left:0;right:0;top:calc(5vh + 34px);aspect-ratio:1672/941;height:auto;
    -webkit-mask-image:radial-gradient(ellipse 80% 76% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 80% 76% at 50% 50%,#000 52%,transparent 100%)}
  #scene::after{display:none}
  #hero{top:auto;bottom:calc(5vh + 108px);left:24px;right:24px;width:auto;transform:none}
  .hero-logo{margin-bottom:16px}
  .hero-title{font-size:clamp(30px,9vw,42px)}.hero-sub{margin-top:14px;font-size:14px}
  .hero-cta{margin-top:14px;padding:15px 24px;width:100%;justify-content:center}
  /* 글씨 뒤 비네팅: 인물 사진 위에서도 글이 또렷하게 보이도록 아래쪽을 어둡게 깐다 */
  #hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-24px;right:-24px;top:-42vh;bottom:-96px;
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.72) 34%,rgba(0,0,0,.9) 62%,#000 100%)}
  .hero-title{text-shadow:0 2px 24px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.6)}
  .hero-sub{color:rgba(255,255,255,.88)}
  #down{bottom:calc(5vh + 18px)}#down i{height:30px}
}
@media (prefers-reduced-motion:reduce){.fx-grain{animation:none}body.is-done #scene img{animation:none}#down i::after{animation:none}}

/* ───────── 스크롤 스토리(히어로 아래) ───────── */
.story{--red:#ff4d55;background:#000;position:relative}
.st{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:clamp(90px,15vh,170px) clamp(22px,6vw,120px);text-align:center;word-break:keep-all;overflow:hidden}
.st+.st::before{content:"";position:absolute;top:0;left:50%;width:1px;height:clamp(40px,8vh,90px);background:linear-gradient(transparent,rgba(255,255,255,.25))}
.st-in{position:relative;z-index:1;width:100%;max-width:1040px}
.big{font-size:clamp(25px,3.5vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1.42;color:var(--cream)}
.big+.big{margin-top:6px}
.em{font-size:calc(1em + 2pt);font-weight:800;color:var(--red);letter-spacing:-.04em}
.sub{margin-top:clamp(18px,2.4vw,30px);font-size:clamp(15px,1.3vw,21px);font-weight:400;line-height:1.85;letter-spacing:-.01em;color:#9d9a93}
.sub .em{font-weight:800}

/* 스크롤 등장 */
.rv{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.18s}.rv.d2{transition-delay:.36s}.rv.d3{transition-delay:.9s}.rv.d4{transition-delay:1.15s}
.big .em{display:inline-block;transform-origin:50% 70%}
.big.in .em{animation:emPop .7s .35s cubic-bezier(.2,1.6,.3,1) both}
@keyframes emPop{0%{transform:scale(.8)}60%{transform:scale(1.07)}100%{transform:scale(1)}}

/* 큰 숫자: 팡 하고 튀어나옴 */
.pop{font-size:clamp(76px,14vw,230px);font-weight:900;letter-spacing:-.06em;line-height:1.02;color:var(--red);opacity:0;transform:scale(.3);text-shadow:0 0 70px rgba(255,77,85,.38);font-variant-numeric:tabular-nums;margin-top:clamp(10px,2vw,26px)}
.pop.in{animation:bigPop .9s cubic-bezier(.2,1.55,.3,1) both}
@keyframes bigPop{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
.stats{display:flex;justify-content:center;gap:clamp(28px,7vw,120px);margin-top:clamp(18px,3vw,40px);flex-wrap:wrap}
.stat .pop{font-size:clamp(64px,11vw,190px)}
.stat:nth-child(2) .pop.in{animation-delay:.25s}
.stat .sub{margin-top:6px}

/* 1) 손그림 차트 */
.sketch{margin:clamp(30px,5vw,64px) auto 0;width:min(640px,86vw)}
.sketch svg{width:100%;height:auto;display:block;overflow:visible}
.sketch .dr{stroke-dasharray:1;stroke-dashoffset:1}
.sketch.in .dr{animation:draw 1.3s cubic-bezier(.4,.1,.2,1) both}
.sketch.in .d-ax{animation-duration:.8s}
.sketch.in .d-px{animation-delay:.7s;animation-duration:2.2s}
.sketch.in .d-ar{animation-delay:1.6s;animation-duration:1.6s}
.sketch.in .d-hd{animation-delay:3s;animation-duration:.4s}
@keyframes draw{to{stroke-dashoffset:0}}
.sketch .lb{font:500 15px Pretendard,'Apple SD Gothic Neo',sans-serif;fill:#8d8a83;letter-spacing:.04em}
.sketch.in{transition-delay:.2s}

/* 2) 100명 중 97명 */
.st-loss::after{content:"";position:absolute;left:50%;top:48%;width:min(900px,120vw);height:min(900px,120vw);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,77,85,.12),transparent 62%);pointer-events:none}
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(5px,.9vw,11px);width:min(560px,84vw);margin:clamp(30px,4.5vw,56px) auto 0}
.dots i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.2);transition:background .35s,transform .35s,box-shadow .35s;transition-delay:calc(var(--n)*22ms + .6s)}
.dots.in i.l{background:var(--red);box-shadow:0 0 12px rgba(255,77,85,.55);transform:scale(1.08)}
.dots.in i:not(.l){background:var(--cream)}

/* 4) 핵심 키워드 */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vw,20px);margin-top:clamp(28px,4vw,52px)}
.chip{display:inline-block;padding:.5em 1.1em;border:1px solid rgba(255,77,85,.55);border-radius:999px;background:rgba(255,77,85,.09);color:var(--cream);font-size:clamp(21px,2.5vw,40px);font-weight:800;letter-spacing:-.04em;opacity:0;transform:scale(.6)}
.chips.in .chip{animation:chipPop .7s cubic-bezier(.2,1.6,.3,1) both}
.chips.in .chip:nth-child(2){animation-delay:.22s}.chips.in .chip:nth-child(3){animation-delay:.44s}
@keyframes chipPop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.st-focus .hero-cta{margin-top:clamp(30px,4vw,50px)}

@media (max-width:768px){
  .dots{grid-template-columns:repeat(10,1fr)}
  .st{padding-top:clamp(80px,12vh,120px);padding-bottom:clamp(80px,12vh,120px)}
  .st-focus .hero-cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.rv,.pop,.chip{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}.sketch .dr{stroke-dashoffset:0}}

/* ───────── 조정: 아래 내용 미리 보이기 · 숫자 한 줄 · 구간 간격 ───────── */
#stage{height:calc(100vh - clamp(96px,16vh,150px));height:calc(100svh - clamp(96px,16vh,150px))}
.story{transition:opacity 1.2s .2s}
body.is-playing .story{opacity:0}
.story>.st:first-child{align-items:flex-start;min-height:auto;padding-top:clamp(26px,4.5vh,52px)}
.story .peek{opacity:1}
.st{min-height:80vh;min-height:80svh;padding-top:clamp(70px,11vh,130px);padding-bottom:clamp(70px,11vh,130px)}
.stats{flex-wrap:nowrap;gap:clamp(18px,4.5vw,84px);margin-top:clamp(10px,2vw,26px)}
.stat .pop{font-size:clamp(40px,8.4vw,150px);margin-top:0;white-space:nowrap}
.st-qqq .sub{margin-top:clamp(10px,1.4vw,18px)}
@media (max-width:768px){
  #stage{height:calc(100svh - 104px)}
  .stat .pop{font-size:clamp(34px,11.5vw,70px)}
  .stats{gap:14px}
}

/* ───────── 조정 2: 색(빨강+파랑) · 효과 완화 · 아래 내용 처음부터 보이기 ───────── */
.story{--red:#e03238;--blue:#5cc4f5}
#progress{display:none}
body.is-playing .story{opacity:1}
.story{transition:none}
#down{opacity:1;visibility:visible}
.rv{transform:translateY(14px);filter:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
.big.in .em{animation:none}
.pop{transform:translateY(10px);text-shadow:0 0 40px rgba(224,50,56,.22)}
.pop.in{animation:bigPop .7s var(--ease) both}
@keyframes bigPop{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.stat:nth-child(2) .pop.in{animation-delay:.12s}
.stat .pop{color:var(--blue);text-shadow:0 0 40px rgba(92,196,245,.2)}
.stat:nth-child(2) .pop{color:var(--red);text-shadow:0 0 40px rgba(224,50,56,.22)}
.st-qqq .em,.st-focus .sub .em{color:var(--blue)}
.dots.in i.l{box-shadow:0 0 8px rgba(224,50,56,.4);transform:none}
.st-loss::after{background:radial-gradient(circle,rgba(224,50,56,.1),transparent 62%)}

/* 조정 3: 지정 색 — 빨강 #970000, 파랑 #001695 */
.story{--red:#970000;--blue:#001695}
.stat .pop,.stat:nth-child(2) .pop,.pop{color:var(--red);text-shadow:0 0 40px rgba(151,0,0,.35)}
.dots.in i.l{box-shadow:0 0 8px rgba(151,0,0,.5)}
.dots.in i:not(.l){background:var(--blue);box-shadow:0 0 8px rgba(0,22,149,.6)}
.st-loss::after{background:radial-gradient(circle,rgba(151,0,0,.12),transparent 62%)}

/* ───────── 조정 4: 집중 구간 합치기 · WHEN TO BUY 차트 · 간격 축소 · 모바일 점 격자 경량화 ───────── */
.st-focus{--hot:#ff6b6b;--cool:#7cc7ff;--grn:#2fb35a;min-height:auto}
.st-focus .em{color:var(--hot)}
.st-focus .sub{margin-top:clamp(10px,1.4vw,16px)}
.st-focus .sub .em{color:var(--cool)}
.st-focus .sub:first-of-type .em{color:var(--hot)}
.st-focus .win{margin-top:clamp(56px,8vw,100px)}
.st-focus .win .em{color:var(--grn)}
.st-focus .hero-cta{margin-top:clamp(22px,3vw,36px)}
.wtb{margin:clamp(56px,8vw,100px) auto 0;width:min(520px,100%)}
.wtb-t{font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:-.02em;color:var(--cream);text-align:left;line-height:1;margin-bottom:10px}
.wtb-t b{color:var(--grn)}
.wtb svg{width:100%;height:auto;display:block;overflow:visible}
.wtb .ax{stroke:#9d9a93;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wtb .fv{stroke:var(--grn);stroke-width:3;stroke-linecap:round}
.wtb .px{stroke:var(--cream);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.wtb .lb{font:600 14px Pretendard,'Apple SD Gothic Neo',sans-serif;fill:#cfcab9}
.wtb .lb.sm{font-size:11px;font-weight:800;letter-spacing:.04em}
.wtb .lb.g,.wtb .buy text{fill:#3ddc7a}
.wtb .lb.mk{font-size:16px;font-weight:800}
.wtb .buy circle{fill:none;stroke:var(--grn);stroke-width:2}
.wtb .buy path{stroke:var(--grn);stroke-width:2.4;stroke-linecap:round;fill:none}
.wtb .dr{stroke-dasharray:1;stroke-dashoffset:1}
.wtb .buy,.wtb .mk:not(.g){opacity:0}
.wtb.in .dr{animation:draw 1.4s cubic-bezier(.4,.1,.2,1) both}
.wtb.in .px{animation-delay:.3s;animation-duration:2.4s}
.wtb.in .buy{animation:wtbIn .6s 2.5s both}
.wtb.in .mk:not(.g){animation:wtbIn .6s 1s both}
@keyframes wtbIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wtb .dr{stroke-dashoffset:0;animation:none!important}.wtb .buy,.wtb .mk{opacity:1;animation:none!important}}
@media (max-width:768px){
  .st-focus{padding-top:clamp(56px,9vh,90px);padding-bottom:clamp(56px,9vh,90px)}
  .dots{width:min(300px,64vw);gap:5px;margin-top:22px}
  .dots i{transition:none;will-change:auto}
  .dots.in i.l,.dots.in i:not(.l){box-shadow:none}
}

/* ───────── 조정 5: 색 통일(빨강 1·파랑 1, 초록 제거) · 차트 정리 · 구간 연결선 ───────── */
.story{--red:#cb3535;--blue:#3e6eca}
.stat .pop,.stat:nth-child(2) .pop,.pop{color:var(--red);text-shadow:0 0 40px rgba(203,53,53,.3)}
.dots.in i.l{box-shadow:0 0 8px rgba(203,53,53,.45)}
.dots.in i:not(.l){background:var(--blue);box-shadow:0 0 8px rgba(62,110,202,.55)}
.st-loss::after{background:radial-gradient(circle,rgba(203,53,53,.12),transparent 62%)}
.st-focus{--hot:var(--red);--cool:var(--blue);--grn:var(--blue)}
.st-focus .win .em{color:var(--blue)}
.wtb .lb.g,.wtb .buy text{fill:var(--red)}
.wtb .buy path{stroke:var(--red)}
.st-focus .vline{width:1px;height:clamp(40px,8vh,90px);margin:clamp(28px,5vw,60px) auto 0;background:linear-gradient(transparent,rgba(255,255,255,.25))}
.st-focus .win{margin-top:clamp(28px,5vw,60px)}

/* 조정 6: 모바일 — 점 격자 축소(20×5), "그렇다면 우리는 / 무엇에 집중해야 할까요?" 줄바꿈 */
.mb{display:none}
@media(max-width:768px){
  .mb{display:inline}
  .dots{grid-template-columns:repeat(20,1fr);width:min(320px,82vw);gap:4px;margin-top:20px}
}

/* 조정 7: 인물 컷 재생 중에는 "더 알아보기"를 숨겨 컷 하단 문구와 겹치지 않게 한다 */
body.is-playing:not(.is-scene) #down{opacity:0;visibility:hidden}

/* 조정 8: 파랑 글씨 → 노랑, 차트 안의 빨강 → 노랑(차트의 파란 적정가치선·점 격자의 파랑/빨강은 유지) */
.story{--blue:var(--gold)}
.dots.in i:not(.l){background:#3e6eca;box-shadow:0 0 8px rgba(62,110,202,.55)}
.st-focus{--cool:var(--gold)}
.st-focus .win .em{color:var(--gold)}
.wtb .lb.g{fill:var(--gold)}
.wtb .buy text,.wtb .buy text.lb.g{fill:var(--red)}
.wtb .buy path{stroke:var(--red)}
.wtb .fv{stroke:var(--gold)}