/* ========== 슬라이드 템플릿 / 생성 차트 / 자막 ========== */

.slide{position:absolute;inset:0;background:linear-gradient(160deg,#0E1826 0%,#0A121E 55%,#0B1424 100%);
  padding:44px 52px 0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
/* 내용이 짧아 아래가 비는 슬라이드만 세로 가운데로 (app.js centerShort 가 붙인다).
   하단 150px 는 자막 자리라 패딩으로 빼 둔다 — 안 그러면 가운데가 자막 쪽으로 내려간다. */
.slide.vcenter{display:flex;flex-direction:column;justify-content:center;padding-bottom:150px}
/* ⚠️ 세로 가운데로 만들면 자식들이 flex 아이템이 되어 **눌린다**. 칸이 `overflow:hidden` 이라
   눌린 만큼 글씨가 잘려 나갔다(실측: vs 칸 설명이 한 줄에서 끊김). 자연 높이를 지키게 한다. */
.slide.vcenter>*{flex:none}
.topbar{position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--cyan),#4A9FE8,var(--gold),#F07C3C,var(--red))}
.kicker{font-size:15px;font-weight:700;color:var(--gold);letter-spacing:-.2px;
  display:flex;align-items:center;gap:8px;margin-bottom:9px}
.kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.stitle{font-size:41px;font-weight:800;letter-spacing:-1.4px;line-height:1.22;margin-bottom:7px}
.stitle em{font-style:normal;color:var(--gold)}
.ssub{font-size:16.5px;color:var(--mut);font-weight:500;letter-spacing:-.3px;margin-bottom:26px}
.src{position:absolute;top:46px;right:52px;text-align:right}
.src p{font-size:12px;color:var(--dim);letter-spacing:-.2px}
.src b{display:block;font-size:14px;color:var(--dim);font-weight:700;margin-top:3px}
.ctabox{position:absolute;top:38px;right:48px;border:2.5px solid var(--red);border-radius:11px;
  padding:8px 22px;text-align:center;background:rgba(255,77,77,.06)}
.ctabox small{display:block;font-size:13px;color:var(--tx);font-weight:600;margin-bottom:1px}
.ctabox strong{font-size:27px;color:var(--red);font-weight:800;letter-spacing:.5px}
.tip{position:absolute;top:112px;right:52px;background:rgba(245,185,66,.11);border:1px solid rgba(245,185,66,.4);
  border-radius:7px;padding:6px 13px;font-size:12.5px;color:var(--gold2);font-weight:600;max-width:520px}
.foot{position:absolute;left:52px;right:52px;bottom:112px;text-align:center;
  font-size:29px;font-weight:800;letter-spacing:-1px;color:var(--tx)}

/* ---- steps ---- */
.steps{display:flex;align-items:stretch;gap:0;margin-top:6px}
.steps .st{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:22px 19px;position:relative}
.steps .st:nth-child(even){margin-top:34px}
.steps .ar{flex:none;width:44px;display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:26px;font-weight:800}
.steps .n{width:34px;height:34px;border-radius:50%;background:rgba(245,185,66,.16);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;margin-bottom:13px}
.steps h3{font-size:20px;font-weight:800;letter-spacing:-.6px;line-height:1.3;margin-bottom:9px}
.steps p{font-size:14px;color:var(--mut);line-height:1.62;letter-spacing:-.3px}

/* ---- vs ---- */
.vs{display:flex;align-items:stretch;gap:56px;position:relative;margin-top:12px}
.vs .col{flex:1;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:11px;padding:26px 24px;position:relative;overflow:hidden}
.vs .col:nth-child(3){border-left-color:var(--cyan)}
/* 칸 뒤에 깔리는 큰 번호 — 어디까지나 장식이다. 글씨를 덮으면 안 되므로 뒤로 보내고 크기도 줄인다.
   (밝은 테마에선 흰색 4.5% 가 안 보여 자동 대비 교정이 새까맣게 칠했다 → 테마별 색을 명시한다) */
.vs .col{position:relative;z-index:0}
.vs .col>:not(.no){position:relative;z-index:1}
.vs .no{position:absolute;right:14px;bottom:0;font-size:72px;font-weight:800;line-height:1;
  z-index:0;pointer-events:none;color:rgba(255,255,255,.05)}
.frame.light .vs .no{color:rgba(20,33,61,.06)}
.vs .tag{display:inline-block;background:rgba(245,185,66,.16);color:var(--gold);font-size:13px;font-weight:800;
  padding:4px 11px;border-radius:6px;margin-bottom:14px}
.vs .col:nth-child(3) .tag{background:rgba(53,215,232,.14);color:var(--cyan)}
.vs h3{font-size:24px;font-weight:800;letter-spacing:-.7px;margin-bottom:11px}
.vs h3 em{font-style:normal;color:var(--gold)}
/* 대본이 쉼표를 붙여 쓰면("증가,신규 8,686만주") 긴 덩어리가 되어 칸 밖으로 밀린다 —
   한글은 단어 단위로 끊되, 그래도 넘치면 아무 데서나 끊어서라도 안에 담는다. */
.vs p{font-size:14.5px;color:var(--mut);line-height:1.65;letter-spacing:-.3px;
  word-break:keep-all;overflow-wrap:anywhere}
.vsbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;
  border-radius:50%;background:var(--gold);color:#0B1220;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;z-index:3;box-shadow:0 0 0 7px rgba(11,18,32,.9)}

/* ---- chart ---- */
.chartbox{border:1px solid var(--line);border-radius:11px;background:#080F1A;padding:8px 10px;
  height:318px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.chartbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:5px}
/* ⚠️ height 를 100% 로 주면 안 된다. 그러면 SVG **요소 상자**는 칸 전체가 되고 그림만 안쪽에
   가운데 정렬(meet)되어, 콜아웃이 요소 상자를 기준으로 계산한 좌표가 통째로 어긋난다
   (실측: 동그라미가 가격축 바깥 여백에 떠 버렸다).
   height:auto 여야 요소 상자 = 그림 영역이 되어 좌표가 맞는다.
   상자보다 그림이 커서 아래(날짜축)가 잘리던 문제는 **차트 높이(o.h)를 칸에 맞추는 쪽**으로 푼다. */
.chartbox svg{display:block;width:100%;height:auto}
.chartbox .ph{color:var(--dim);font-size:14px;text-align:center;line-height:1.7}
/* 배지 줄 — 강조 박스가 붙은 배지는 키가 커진다. 가운데로 맞춰야 줄이 안 어긋난다
   (실측: "7/29 저가"만 강조 박스가 붙어 옆 배지들이 위로 떠 보였다) */
.badges{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;align-items:center}
.badges span{align-self:center}
.badges span{background:var(--card2);border:1px solid var(--line2);border-radius:8px;padding:7px 13px;
  font-size:15px;font-weight:700;letter-spacing:-.3px}
.badges span i{font-style:normal;color:var(--mut);font-weight:600;margin-right:7px;font-size:13.5px}
.badges span.g{border-color:rgba(61,220,151,.5);color:var(--grn)}
.badges span.r{border-color:rgba(255,77,77,.5);color:var(--red)}
.badges span.c{border-color:rgba(53,215,232,.5);color:var(--cyan)}
.badges span.y{border-color:rgba(245,185,66,.5);color:var(--gold)}
.badges span.hot{border-color:currentColor;box-shadow:0 0 0 1px currentColor,0 0 14px rgba(245,185,66,.25)}
.note{background:rgba(245,185,66,.09);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:10px 16px;font-size:16px;font-weight:700;letter-spacing:-.4px;margin-bottom:12px}

/* ---- statchart (숫자 + 차트 나란히) — "얼마→얼마" 를 차트와 함께 ---- */
.statchart{display:flex;gap:32px;align-items:center;margin-top:12px}
.statchart .scL{flex:0 0 37%;max-width:37%}
.statchart .scR{flex:1;min-width:0}
.statchart .scHead{font-size:20px;font-weight:800;letter-spacing:-.6px;line-height:1.4;margin-bottom:14px}
.statchart .scBig{font-size:90px;font-weight:800;letter-spacing:-3px;line-height:1;color:var(--gold)}
.statchart .scBig.red{color:var(--red)} .statchart .scBig.cyan{color:var(--cyan)} .statchart .scBig.grn{color:var(--grn)}
.statchart .scLb{font-size:17px;color:var(--mut);font-weight:700;margin-top:8px;letter-spacing:-.3px}
.statchart .scRow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:16px}
.statchart .scRow:last-of-type{border-bottom:0}
.statchart .scRow span{color:var(--mut);font-weight:600}
.statchart .scRow b{font-weight:800;font-size:24px;letter-spacing:-.5px;color:var(--tx)}
.statchart .scRow b.red,.statchart .scRow b.up{color:var(--red)}
.statchart .scRow b.cyan{color:var(--cyan)} .statchart .scRow b.dn{color:var(--dn)} .statchart .scRow b.grn{color:var(--grn)}
.statchart .scSub{font-size:14px;color:var(--dim);margin-top:14px;line-height:1.62}
.statchart .scR .chartbox{height:auto;padding:6px 8px}
.statchart .scR svg.cchart{width:100%;height:auto}
.statchart .badges{margin-top:10px}
.slide.on .statchart .scBig{animation:statpop .55s .1s cubic-bezier(.2,1.2,.4,1) both}
.slide.on .statchart .scL{animation:slidein .5s .1s ease both}

/* ---- cards ---- */
.cards{display:flex;gap:20px;margin-top:8px}
.cards .cd{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:24px 21px}
.cards .cd h3{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.cards .cd ul{list-style:none}
.cards .cd li{font-size:14.5px;color:var(--mut);line-height:1.55;letter-spacing:-.3px;padding:8px 0 8px 15px;
  position:relative;border-bottom:1px solid rgba(255,255,255,.045)}
.cards .cd li:last-child{border:0}
.cards .cd li::before{content:'';position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%;background:var(--dim)}
.cards .cd.up h3{color:var(--red)} .cards .cd.dn h3{color:var(--cyan)} .cards .cd.nu h3{color:var(--tx)}

/* ---- quote ---- */
.quote{height:430px;display:flex;align-items:center;justify-content:center}
.quote div{border:2px solid var(--cyan);border-radius:11px;padding:26px 44px;font-size:31px;font-weight:800;
  letter-spacing:-1px;box-shadow:0 0 34px rgba(53,215,232,.22);background:rgba(53,215,232,.05)}

/* ---- cta ---- */
.ctagrid{display:flex;gap:34px;margin-top:8px}
.ctaL{flex:1.15;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:26px 24px}
.ctaL .ph{font-size:44px;font-weight:800;color:var(--gold);letter-spacing:1px;margin:6px 0 14px}
.ctaL .kw{font-size:16px;color:var(--tx);font-weight:600;margin-bottom:18px}
.ctaL .kw b{color:var(--gold)}
.ctaL ol{list-style:none;counter-reset:c}
.ctaL li{counter-increment:c;font-size:15px;font-weight:700;padding:9px 0 9px 34px;position:relative;letter-spacing:-.3px}
.ctaL li::before{content:counter(c);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;
  background:rgba(245,185,66,.16);color:var(--gold);font-size:12px;display:flex;align-items:center;justify-content:center}
.ctaL li em{display:block;font-style:normal;font-size:12.5px;color:var(--dim);font-weight:500;margin-top:2px}
.ctaR{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:26px 24px}
.ctaR h4{font-size:14px;color:var(--cyan);font-weight:700;margin-bottom:14px}
.ctaR li{list-style:none;font-size:14.5px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;gap:9px;letter-spacing:-.3px}
.ctaR li:last-child{border:0}
.ctaR li::before{content:'✓';color:var(--cyan);font-size:13px;font-weight:800;flex:none}

/* ---- 자막 ---- */
.subwrap{position:absolute;left:0;right:0;bottom:0;height:104px;display:flex;align-items:center;
  justify-content:center;padding:0 60px;pointer-events:none;z-index:9}
.subtxt{font-size:34px;font-weight:800;letter-spacing:-1.1px;text-align:center;line-height:1.3;
  color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.9)}
.subtxt .g{color:var(--gold2)} .subtxt .c{color:var(--cyan)} .subtxt .r{color:#FF6B6B}

/* ---- 슬라이드 내 강조 (자막 마커와 연동) ----
   [[..]] = 금색 박스+밑줄 / ((..)) = 시안 밑줄 / {{..}} = 빨간 박스+별표 */
/* 강조 3종 세분화 — [[..]]=빨간 큰 사각형만 / ((..))=빨간 굵은 밑줄만 / {{..}}=빨간 사각형+★ */
/* ⚠️ 예전엔 display:inline-block 이었다. 그러면 강조한 구절이 **통째로 안 쪼개져서**
   줄바꿈 자리가 달라진다 — 실측(2026-08-19): 「① 3분기 실적 · 10월 초」 한 줄짜리가
   "① / 3분기 실적 / · 10월 초" 세 줄로 밀리고, 그만큼 카드가 넘쳐 아래가 잘렸다.
   강조는 **글의 흐름을 바꾸면 안 된다.** inline 이면 원래 줄바꿈 그대로 간다.
   ※ 강조가 두 줄에 걸치면 테두리(::after)가 첫 조각 기준으로 그려진다 —
     줄이 밀려 글자가 잘리는 것보다는 그쪽이 낫다. */
.vg-hl{position:relative;display:inline;z-index:1}
.vg-hl.hg{color:#FF5C5C}
/* ⚠️ 여백을 px 로 고정하면 큰 글씨에서 상자가 글자보다 작아진다 —
   120px 짜리 수치에서 4px 은 사실상 0이라 쉼표 꼬리가 테두리 밖으로 삐져나왔다(실측).
   글씨 크기에 비례하는 em 으로 잡아야 어떤 크기에서도 글자를 감싼다. */
.vg-hl.hg::after{content:'';position:absolute;left:-.09em;right:-.09em;top:-.07em;bottom:-.12em;
  border:.035em solid #FF3B3B;border-radius:.12em;opacity:0;pointer-events:none;
  box-shadow:0 0 14px rgba(255,59,59,.35);
  animation:hlpop .35s cubic-bezier(.3,1.3,.5,1) forwards}
.vg-hl.hc{color:#FF6B6B}
.vg-hl.hc::before{content:'';position:absolute;left:0;width:0;bottom:-5px;height:5px;
  border-radius:3px;background:#FF3B3B;box-shadow:0 0 10px rgba(255,59,59,.4);
  animation:hlline .45s ease forwards}
.vg-hl.hr{color:#FF5C5C}
.vg-hl.hr::after{content:'';position:absolute;left:-.09em;right:-.09em;top:-.07em;bottom:-.12em;
  border:.035em solid #FF3B3B;border-radius:.12em;opacity:0;pointer-events:none;
  box-shadow:0 0 14px rgba(255,59,59,.35);
  animation:hlpop .35s cubic-bezier(.3,1.3,.5,1) forwards}
.vg-hl.hr .star{position:absolute;top:-18px;right:-12px;font-size:19px;color:#FFD200;
  animation:starpop .4s .2s cubic-bezier(.3,1.5,.5,1) both}
/* stats 카드는 라벨(.sl)이 값 **위**에 붙어 있어(간격 10px) 기본 별(-18px)이 라벨 글자를 문다.
   실측: smt09ok6j1 #7 「고점 대비 지금」 ↔ ★ 겹침(전수검사 386장 중 1장). 카드 안쪽으로 당긴다. */
.statsrow .sc .vg-hl.hr .star{top:-9px;right:-16px;font-size:16px}
/* 타임라인도 같은 기하 — 날짜(.d)가 값(.v) 위에 붙어 있다(간격 2px).
   실측: smt126rcf1 #6 「08.19」 ↔ ★. 값(30px)이 카드(52px)보다 작아 더 바짝 죈다. */
.tline .tl .vg-hl.hr .star{top:-7px;right:-14px;font-size:14px}
/* ⚠️ 자유 배치(free)에서는 **별을 아예 안 그린다.**
   실측 2026-08-25: smt8g5xdk3 #12「-8.7%」·#20「11.34%」에서 별이 숫자를 물었다
   (전수 317장 중 2장). 자유 배치는 조각을 격자에 빽빽하게 놓기 때문에,
   별을 위로 밀면 위 조각을, 옆으로 밀면 옆 조각을 문다 — 밀 자리가 없다.
   별은 장식이고 **빨간 테두리가 이미 강조를 표시**한다. 여기서는 그걸로 충분하다. */
.freegrid .vg-hl.hr .star{display:none}
@keyframes hlpop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes hlline{to{width:100%}}
@keyframes starpop{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:scale(1) rotate(0)}}

/* ---- PPT식 등장 효과 ---- */
.slide .kicker,.slide .stitle,.slide .ssub{opacity:0;transform:translateY(14px)}
.slide.on .kicker{animation:slidein .4s .05s ease forwards}
.slide.on .stitle{animation:slidein .5s .14s ease forwards}
.slide.on .ssub{animation:slidein .5s .26s ease forwards}
.slide.on .statwrap .big{animation:statpop .55s .1s cubic-bezier(.2,1.2,.4,1) both}
.slide.on .statwrap .lb{animation:slidein .5s .3s ease both}
.slide.on .statwrap .sb{animation:slidein .5s .42s ease both}
.slide.on .quote div{animation:statpop .5s .1s cubic-bezier(.2,1.2,.4,1) both}
.slide.on .article{animation:slidein .55s .1s ease both}
@keyframes slidein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes statpop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
/* 순차 등장 대상 — JS 가 자막 진행에 맞춰 .rev 를 붙인다 */
.rvl{opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
.rvl.rev{opacity:1;transform:none}

/* 타이틀 네온 강조: <em>=골드, <b>=시안 글로우 */
.stitle b{font-weight:800;color:var(--cyan);text-shadow:0 0 18px rgba(53,215,232,.65),0 0 40px rgba(53,215,232,.3)}
.hookR h3 b,.vs h3 b{color:var(--cyan);text-shadow:0 0 14px rgba(53,215,232,.5)}

/* ---- 템플릿: article (기사·공시 카드) ---- */
.article{background:#FFFFFF;color:#101828;border-radius:13px;padding:30px 34px 26px;
  margin-top:8px;box-shadow:0 14px 44px rgba(0,0,0,.45);position:relative;max-width:920px}
.article .lab{display:inline-block;background:#D92D20;color:#fff;font-size:13px;font-weight:800;
  padding:4px 12px;border-radius:5px;margin-bottom:14px;letter-spacing:-.2px}
.article h3{font-size:31px;font-weight:800;letter-spacing:-1px;line-height:1.35;color:#101828;margin-bottom:14px}
.article h3 em{font-style:normal;color:#B42318}
.article .aq{border-left:4px solid #F5B942;background:#FFFBEB;padding:12px 16px;
  font-size:17.5px;font-weight:600;color:#3F2E00;border-radius:0 8px 8px 0;margin-bottom:12px;line-height:1.55}
.article .abody{font-size:15px;color:#475467;line-height:1.7;letter-spacing:-.2px}
.article .adate{margin-top:12px;font-size:12px;color:#6B7590}
.article img{max-width:100%;max-height:180px;border-radius:8px;margin-top:10px;object-fit:cover}

/* ---- 템플릿: hook (후킹 캡처 + 성과) ---- */
.hookg{display:flex;gap:30px;margin-top:8px;align-items:stretch}
.hookL{flex:1.05;border:1px solid var(--line);border-radius:13px;background:#0A111C;
  display:flex;align-items:center;justify-content:center;min-height:320px;overflow:hidden;position:relative}
.hookL img{max-width:100%;max-height:380px;object-fit:contain}
.hookL .ph{color:var(--dim);font-size:14px;text-align:center;line-height:1.8;padding:20px}
.hookL .tag{position:absolute;top:10px;left:10px;background:rgba(245,185,66,.92);color:#0B1220;
  font-size:12px;font-weight:800;padding:4px 10px;border-radius:5px}
.hookR{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:26px 24px}
.hookR h3{font-size:23px;font-weight:800;letter-spacing:-.7px;margin-bottom:16px;line-height:1.35}
.hookR h3 em{font-style:normal;color:var(--gold)}
.hookR li{list-style:none;font-size:16.5px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:10px;letter-spacing:-.3px;font-weight:600}
.hookR li:last-child{border:0}
.hookR li::before{content:'✓';color:var(--grn);font-size:15px;font-weight:800;flex:none}
.hookR .hnote{margin-top:12px;font-size:12px;color:var(--dim);line-height:1.6}

/* ---- steps 아이콘 ---- */
.steps .n.emoji{background:rgba(245,185,66,.12);font-size:19px}
.cards .cd h3 .ico{font-size:22px}

/* ---- 템플릿: cta2 (직통번호 + 실제 안내 캡처 증거) ---- */
.cta2{display:flex;gap:34px;margin-top:4px;align-items:flex-start}
.cta2L{flex:1}
.phonebox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px 16px;margin-bottom:14px}
.phonebox small{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--mut);font-weight:600;margin-bottom:4px}
.phonebox strong{font-size:46px;font-weight:800;color:var(--gold);letter-spacing:1.5px;line-height:1.15}
.cta2 .kw{font-size:17px;color:var(--tx);font-weight:600;margin-bottom:12px}
.cta2 .kw b{color:var(--gold)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chips span{border:1px solid var(--line2);border-radius:7px;padding:6px 12px;font-size:13.5px;
  font-weight:700;color:var(--tx);display:flex;align-items:center;gap:6px}
.chips span::before{content:'✓';color:var(--grn);font-weight:800;font-size:12px}
.steps3{list-style:none;counter-reset:c}
.steps3 li{counter-increment:c;font-size:15.5px;font-weight:700;padding:8px 0 8px 36px;position:relative;letter-spacing:-.3px}
.steps3 li::before{content:counter(c);position:absolute;left:0;top:7px;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--gold);color:var(--gold);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.steps3 li em{display:block;font-style:normal;font-size:12.5px;color:var(--dim);font-weight:500;margin-top:1px}
.cta2R{flex:1.4}
.proofhead{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.proofhead::before{content:'✓';color:var(--grn);font-weight:800}
.proofs{display:flex;gap:14px;align-items:flex-start}
.proof{flex:1;max-width:300px;border-radius:16px;border:5px solid #2A3648;background:#fff;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.proof img{width:100%;display:block}
.proofs.p1 .proof{max-width:400px}
.proofs.p2 .proof{max-width:330px}
.proof .php{aspect-ratio:9/16;max-height:430px;display:flex;align-items:center;justify-content:center;
  color:#6B7590;font-size:12px;text-align:center;line-height:1.7;background:#F2F4F7;padding:12px}
.ctacall{position:absolute;top:34px;right:48px;border:2.5px solid var(--red);border-radius:11px;
  padding:7px 20px;text-align:center;background:rgba(255,45,45,.07)}
.ctacall small{display:block;font-size:13px;color:var(--tx);font-weight:700}
.ctacall strong{font-size:26px;color:#FF3B3B;font-weight:800;letter-spacing:1px}

/* ---- 템플릿: stat (한 숫자 강타) ---- */
.statwrap{height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.statwrap .big{font-size:120px;font-weight:800;letter-spacing:-4px;line-height:1;
  background:linear-gradient(180deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(245,185,66,.25))}
.statwrap .big.red{background:linear-gradient(180deg,#FF7B7B,#FF3B3B);-webkit-background-clip:text;background-clip:text}
.statwrap .big.cyan{background:linear-gradient(180deg,#7BE8F4,#35D7E8);-webkit-background-clip:text;background-clip:text}
/* ⚠️ **강조 상자가 아래 라벨을 덮던 자리.**
   .big 은 120px 인데 .vg-hl::after 는 글씨 크기에 비례해(bottom:-.12em) **14.4px** 아래로 나온다.
   그런데 라벨까지 간격은 gap 6px + margin-top 8px = **14px** 뿐이라 딱 겹쳤다.
   거기에 box-shadow 14px 글로우가 더 얹혀 라벨 글자를 통째로 물었다
   (실측 2026-08-25 신라젠: "+40%" ↔ "8월 18일 대비", "-9.4%" ↔ "8월 21일 되돌림").
   ⚠️ 이 흠은 `_slidecheck.js` 가 못 잡는다 — ::after 는 가짜 요소라
      getBoundingClientRect 로 재는 겹침 검사에 안 걸린다. 눈으로만 보인다.
   고치는 법은 둘. ① 상자를 덜 튀어나오게 ② 라벨을 더 내리기. **둘 다 조금씩** 한다 —
   한쪽만 크게 손대면 상자가 숫자를 덜 감싸거나 라벨이 붕 뜬다.
   px 이 아니라 em 으로 잡아야 글씨가 줄어도(fitFree) 같이 따라온다. */
.statwrap .big .vg-hl::after{bottom:-.05em;box-shadow:0 0 .08em rgba(255,59,59,.35)}
.statwrap .big{margin-bottom:.06em}
.statwrap .lb{font-size:26px;font-weight:700;color:var(--tx);letter-spacing:-.8px;margin-top:8px}
.statwrap .sb{font-size:16px;color:var(--mut);font-weight:500}

/* ---- 템플릿: timeline (날짜별 흐름 — 하나씩 등장) ---- */
.tline{margin-top:26px;position:relative}
.tline .rail{position:absolute;top:7px;left:0;right:0;height:2px;background:var(--line2)}
.tline .row{display:flex;gap:26px}
.tline .tl{flex:1;position:relative;padding-top:22px}
.tline .tl::before{content:'';position:absolute;top:0;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--card2);border:2.5px solid var(--gold)}
.tline .tl .d{font-size:16px;font-weight:800;color:var(--gold);letter-spacing:.3px}
.tline .tl .v{font-size:30px;font-weight:800;letter-spacing:-1px;margin:2px 0 6px}
.tline .tl .v.red{color:#FF6B6B}.tline .tl .v.grn{color:var(--grn)}.tline .tl .v.cyan{color:var(--cyan)}
.tline .tl .b{font-size:13.5px;color:var(--mut);line-height:1.55;letter-spacing:-.2px}

/* ---- 템플릿: bars (막대 비교) ---- */
.barswrap{margin-top:16px}
.bars{display:flex;align-items:flex-end;justify-content:center;gap:90px;height:300px;padding-bottom:6px}
.bars .bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
/* 값·라벨은 한 줄로 — "외국인 195 / 만주" 처럼 단위가 떨어져 나가면 안 된다 */
.bars .bar .bv{font-size:20px;font-weight:800;margin-bottom:8px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.bars .bar .bi{width:110px;border-radius:6px 6px 3px 3px;background:#4A9FE8;min-height:6px;
  transition:height .8s cubic-bezier(.2,.9,.3,1)}
.bars .bar.neg .bi{background:#FF5B5B}.bars .bar.pos .bi{background:var(--grn)}.bars .bar.gold .bi{background:var(--gold)}
.bars .bar .bk{margin-top:10px;font-size:15px;font-weight:700;color:var(--tx);
  white-space:nowrap;word-break:keep-all}
.barfoot{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:6px}

/* ---- 템플릿: stats (큰 숫자 카드 나란히) ---- */
.statsrow{display:flex;gap:22px;margin-top:14px}
.statsrow .sc{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:30px 24px}
.statsrow .sc .sl{font-size:15px;color:var(--mut);font-weight:600;margin-bottom:10px}
.statsrow .sc .sv{font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--tx)}
.statsrow .sc .sv small{font-size:24px;font-weight:700;margin-left:2px}
.statsrow .sc.g .sv{color:var(--gold)}.statsrow .sc.c .sv{color:var(--cyan)}
.statsrow .sc.r .sv{color:#FF6B6B}.statsrow .sc.gr .sv{color:var(--grn)}
.statsrow .sc .ss{font-size:12.5px;color:var(--dim);margin-top:10px;line-height:1.5}

/* 레퍼런스 테마의 하단 자막 검은 띠 — 레퍼런스가 그렇게 쓰면 켠다.
   ⚠️ 밝은 테마의 `#frame.light .subtxt`(검정 글자)가 이기지 않도록 선택자를 더 세게 잡는다.
      실측: 검은 띠 위에 검정 글씨가 얹혀 안 보였다. */
#frame[data-rt].rtbar .subtxt{background:rgba(8,10,14,.92);color:#fff;text-shadow:none;
  padding:10px 28px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
#frame[data-rt].rtbar .subtxt .g{color:#FFD666}
#frame[data-rt].rtbar .subtxt .c{color:#67E8F9}
#frame[data-rt].rtbar .subtxt .r{color:#FF8A8A}

/* ---- 템플릿: free (자유 배치) ----
   레퍼런스 영상의 화면 배치를 그대로 따라가려고 만든 격자다.
   대본이 12×8 칸에 조각을 놓고, 여기서는 그 좌표대로만 그린다. */
.freegrid{position:absolute;left:64px;right:64px;top:52px;bottom:120px;
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);gap:18px}
.fb{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* 강조 박스(::after 가 좌우로 4px 삐져나온다)가 칸 경계에서 잘리지 않게 여유를 준다 */
.fb:not(.fbcard).fb-text,.fb:not(.fbcard).fb-list,.fb:not(.fbcard).fb-quote,
.fb:not(.fbcard).fb-title{padding:4px 8px}
.fb.al-center{align-items:center;text-align:center}
.fb.al-right{align-items:flex-end;text-align:right}
.fbcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.10)}
/* 내용이 적은 카드는 가운데로 모아 준다 — 위로 붙이면 아래가 텅 빈 게 더 도드라진다 */
.fbcard.fb-list,.fbcard.fb-text{justify-content:center}
/* 그림 위 글씨 — 그림이 밝든 어둡든 읽히게 그늘을 깐다.
   ⚠️ 글자색만 뒤집는 자동 보정으로는 부족했다. 그림 한 장 안에서 밝은 데와 어두운 데가 섞이면
      어느 색으로 바꿔도 일부 글자가 묻힌다(실측: 오프닝 제목 가운데 글자들이 빛에 먹혔다). */
.fb.onimg{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.75),0 0 34px rgba(0,0,0,.55)}
.fb.onimg .fbtitle,.fb.onimg .fbtext,.fb.onimg .fblist li,.fb.onimg .fbquote{color:#fff}
.fb.onimg .fbtitle{position:relative;padding:10px 22px;border-radius:14px;
  background:linear-gradient(180deg,rgba(6,10,18,.42),rgba(6,10,18,.62));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.fb-image{border-radius:16px;overflow:hidden;background:rgba(120,140,170,.10)}
.fb-image img,.fb-image svg{width:100%;height:100%;object-fit:cover;display:block}
.fb-image .fbph{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(130,150,180,.16),rgba(130,150,180,.06))}
/* 한글은 단어 단위로 끊는다 — "54조 3천억 / 원" 처럼 어색하게 잘리지 않게 */
.fb{word-break:keep-all;overflow-wrap:break-word}
.fbtitle{font-size:40px;font-weight:900;line-height:1.2;letter-spacing:-1.4px;margin:0;color:var(--tx)}
/* 제목 속 핵심 단어는 강조색으로 — 눈이 먼저 가야 할 곳을 정한다 */
.fbtitle em{font-style:normal;color:var(--gold)}
.fbtitle b{font-weight:900;color:var(--cyan)}
.fbtext em{font-style:normal;color:var(--gold);font-weight:800}
.fbtext{font-size:23px;line-height:1.55;color:var(--tx);opacity:.92;margin:0;font-weight:600}
.fblist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fblist li{font-size:22px;line-height:1.4;color:var(--tx);padding-left:20px;position:relative;font-weight:600}
.fblist li::before{content:'';position:absolute;left:0;top:13px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.fblist li b{display:block;font-weight:800}
.fblist li span{display:block;font-size:17.5px;color:var(--mut);font-weight:500;margin-top:3px}
.fbstat{display:flex;flex-direction:column;gap:6px}
.fbstat em{font-style:normal;font-size:18px;color:var(--mut);font-weight:700}
/* 수치는 절대 줄바꿈하지 않는다 — 길면 글자를 줄여서 한 줄에 담는다(app.js fitFree) */
.fbstat b{font-size:62px;font-weight:900;letter-spacing:-2.4px;line-height:1.05;color:var(--gold);
  white-space:nowrap;display:block}
.fbstat b.red{color:var(--red)} .fbstat b.cyan{color:var(--cyan)} .fbstat b.grn{color:var(--grn)}
.fbstat span{font-size:17px;color:var(--mut);font-weight:600}
.fbbadge{align-self:flex-start;background:var(--red);color:#fff;font-size:19px;font-weight:800;
  padding:7px 18px;border-radius:8px}
.fbquote{font-size:30px;font-weight:800;line-height:1.45;color:var(--tx);
  border-left:5px solid var(--gold);padding-left:22px}
.fb-fill{background:var(--gold);opacity:.12;border-radius:14px}
/* 등장 연출 — 순서대로 살짝 올라오며 나타난다 */
.slide.on .fb{animation:slidein .5s ease both}
.slide.on .fb:nth-child(2){animation-delay:.08s}
.slide.on .fb:nth-child(3){animation-delay:.16s}
.slide.on .fb:nth-child(4){animation-delay:.24s}
.slide.on .fb:nth-child(5){animation-delay:.32s}
.slide.on .fb:nth-child(n+6){animation-delay:.4s}

/* ---- 템플릿: toon (웹툰 컷 — 그림 + 상단 빨강 띠 / 하단 네이비 띠) ----
   원본 가이드는 한글을 이미지 안에 그리라 하지만 우리는 크롬으로 얹는다.
   글자가 깨질 일이 없고 자간·줄바꿈도 우리가 잡는다. 띠는 컷 안쪽에 붙는다. */
/* ⚠️ 띠를 그림 **위에** 얹으면 안 된다. 실측 사고: 인물 머리가 빨강 띠 뒤로 잘려
   무슨 그림인지 알 수 없었다. 위/그림/아래를 **세로로 나눠** 서로 안 겹치게 한다.
   그림은 남은 높이를 전부 가져간다(flex:1). */
.toonwrap{position:relative;height:540px;border-radius:14px;overflow:hidden;margin-top:4px;
  background:#EFE7D8;border:1px solid var(--line);
  display:flex;flex-direction:column}
.toonwrap .toonimg{position:relative;flex:1;min-height:0;overflow:hidden}
/* ⚠️ 그림칸은 가로로 납작하다(약 3:1). 16:9 그림을 cover 로 넣으면 위아래가 크게 잘린다.
   사람 얼굴은 위쪽 3~4할에 있으므로 기준점을 위로 올려 **머리가 잘리지 않게** 한다.
   (실측: 중앙 기준이라 인물 머리가 빨강 띄 뒤로 잘렸다) */
.toonwrap img,.toonwrap svg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 34%;display:block}
.toonwrap .ph2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:15px}
/* ⚠️ 치수는 전부 **1280×720 설계 좌표**다 — 렌더가 1.5배로 키운다(.frame 이 1280×720).
   예전에 840px 로 잡았다가 화면에서 1260px 가 돼 하단 띄가 프레임 밖으로 밀려났다. */
.tband{flex:none;padding:9px 26px;
  font-size:26px;font-weight:900;letter-spacing:-1.1px;line-height:1.2;color:#fff;text-align:center;
  /* 글자가 길어져도 컷을 넘지 않게 — 한 줄로 눌러 담는다 */
  white-space:nowrap;overflow:hidden;text-overflow:clip}
.tband.top{background:#C62828}
.tband.bot{background:#1F3A66}
/* 밝은 종이 화풍이라 라이트 테마에서도 띠 색은 그대로 간다(대비가 목적) */
.frame.light .tband.top{background:#C62828}
.frame.light .tband.bot{background:#1F3A66}

/* ---- 템플릿: photo (로고·이미지 풀블리드 + 캡션) ---- */
.photowrap{position:relative;height:440px;border-radius:16px;overflow:hidden;margin-top:6px;
  background:#0A121E;border:1px solid var(--line)}
/* 사진은 또렷하게 보여준다 — 어두운 컷은 서버가 밝기를 미리 보정해 넣는다(_genimg.shrink) */
.photowrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.96}
.photowrap .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,13,22,.86) 0%,rgba(8,13,22,.42) 45%,rgba(8,13,22,.08) 100%)}
/* 글자 뒤에만 깔리는 국소 그늘 — 어떤 사진이 와도 캡션은 항상 읽힌다(시인성 고정) */
.photowrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,18,0) 0%,rgba(6,10,18,.55) 55%,rgba(6,10,18,.86) 100%)}
/* 자체 일러스트(svg) 위에는 그림자를 얕게 — 일러스트는 자기 명암을 갖고 있어서
   사진용 진한 그림자를 그대로 얹으면 안의 글씨·도형이 묻힌다(시인성 피드백) */
.photowrap svg~.shade{background:linear-gradient(90deg,rgba(8,13,22,.42) 0%,rgba(8,13,22,.16) 45%,rgba(8,13,22,0) 100%)}
.photowrap .cap{position:absolute;left:36px;bottom:34px;right:36px;z-index:2}
.photowrap .cap .pk{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:8px;
  text-shadow:0 1px 6px rgba(0,0,0,.85)}
.photowrap .cap h3{font-size:34px;font-weight:800;letter-spacing:-1.2px;color:#fff;line-height:1.3;margin-bottom:12px;
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 4px 18px rgba(0,0,0,.8)}
.photowrap .cap .pb{display:inline-block;background:rgba(180,20,20,.9);color:#fff;font-size:15px;font-weight:800;
  padding:5px 14px;border-radius:6px}
.photowrap .cap .pb b{font-size:19px;margin-right:6px}
.photowrap .ph2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:14px;text-align:center;line-height:1.8}

/* ---- 키워드 연동 이미지 팝업 ---- */
.assetpop.tr{top:120px;right:52px;left:auto;bottom:auto}
.assetpop.tl{top:120px;left:52px;right:auto;bottom:auto}
.assetpop.br{bottom:120px;right:52px;left:auto;top:auto}
.assetpop.bl{bottom:120px;left:52px;right:auto;top:auto}
.assetpop{position:absolute;top:120px;right:52px;width:280px;background:var(--card);
  border:1px solid var(--line2);border-radius:13px;overflow:hidden;z-index:8;
  box-shadow:0 16px 46px rgba(0,0,0,.55);opacity:0;transform:translateY(-8px) scale(.95);
  transition:opacity .3s ease,transform .35s cubic-bezier(.3,1.3,.5,1);pointer-events:none}
.assetpop.show{opacity:1;transform:translateY(0) scale(1)}
.assetpop img{width:100%;max-height:210px;object-fit:contain;display:block;background:#fff;padding:8px}
.assetpop .genimg{width:100%;aspect-ratio:1160/520;overflow:hidden}
.assetpop .genimg svg{width:100%;height:100%}
.assetpop .cap{padding:7px 12px;font-size:13px;font-weight:700;color:var(--gold2);border-top:1px solid var(--line)}

/* ---- 밝은 테마 ---- */
.frame.light .ssub{color:#44546E}
.frame.light .stitle b{color:#0E7490;text-shadow:none}
.frame.light .hookR h3 b,.frame.light .vs h3 b{color:#0E7490;text-shadow:none}
.frame.light .statwrap .big{background:linear-gradient(180deg,#C98600,#8A5A00);-webkit-background-clip:text;background-clip:text;filter:none}
.frame.light .statwrap .big.red{background:linear-gradient(180deg,#E23A3A,#A81212);-webkit-background-clip:text;background-clip:text}
.frame.light .statwrap .big.cyan{background:linear-gradient(180deg,#1698B4,#0A5E73);-webkit-background-clip:text;background-clip:text}
.frame.light .statwrap .sb{color:#404E68}
.frame.light .vg-hl.hg{color:#C81E1E}
.frame.light .vg-hl.hc{color:#C81E1E}
.frame.light .vg-hl.hr{color:#C81E1E}
.frame.light .tline .tl .b{color:#404E68}
.frame.light .tline .tl::before{background:#fff}
.frame.light .tline .rail{background:#C9D3E2}
.frame.light .tline .tl .v{color:#14213D}
.frame.light .tline .tl .v.red{color:#C81E1E}.frame.light .tline .tl .v.grn{color:#067647}
.frame.light .statsrow .sc{background:var(--card);border-color:#DCE3EE}
.frame.light .statsrow .sc .sv{color:#14213D}
.frame.light .statsrow .sc.g .sv{color:#B47300}.frame.light .statsrow .sc.c .sv{color:#0E7490}
.frame.light .statsrow .sc.r .sv{color:#B42318}.frame.light .statsrow .sc.gr .sv{color:#067647}
.frame.light .bars .bar .bv,.frame.light .bars .bar .bk{color:#14213D}
.frame.light .photowrap{background:#E8EDF5;border-color:#DCE3EE}
.frame.light .phonebox{background:var(--card);border-color:#DCE3EE}
.frame.light .phonebox strong{color:#B47300}
.frame.light .chips span{color:#14213D;border-color:#D6DEE9;background:#fff}
.frame.light .steps3 li::before{border-color:#B47300;color:#B47300}
.frame.light .statwrap .lb{color:#14213D}
.frame.light .assetpop{background:var(--card);border-color:#DCE3EE}
.frame.light .proof{border-color:#8FA0B8}
.frame.light .slide{background:linear-gradient(160deg,#FAFBFD 0%,#EEF2F8 55%,#F5F8FC 100%)}
.frame.light .stitle{color:#14213D}
.frame.light .stitle em{color:#B47300}
.frame.light .ssub{color:#404E68}
.frame.light .kicker{color:#B47300}
.frame.light .kicker::before{background:#B47300}
.frame.light .src p,.frame.light .src b{color:#5F6E8C}
.frame.light .steps .st,.frame.light .cards .cd,.frame.light .ctaL,.frame.light .ctaR,
.frame.light .hookR{background:var(--card);border-color:#DCE3EE;box-shadow:0 6px 22px rgba(20,33,61,.08)}
.frame.light .steps h3,.frame.light .cards .cd.nu h3,.frame.light .hookR h3{color:#14213D}
.frame.light .steps p,.frame.light .cards .cd li,.frame.light .ctaR li,.frame.light .hookR li{color:#4A5872}
.frame.light .cards .cd li{border-bottom-color:rgba(20,33,61,.07)}
.frame.light .hookR li{border-bottom-color:rgba(20,33,61,.07)}
.frame.light .quote div{color:#14213D;background:rgba(14,116,144,.05);border-color:#0E7490;
  box-shadow:0 0 30px rgba(14,116,144,.14)}
.frame.light .note{background:rgba(180,115,0,.08);border-left-color:#B47300;color:#3F2E00}
.frame.light .tip{background:rgba(180,115,0,.08);border-color:rgba(180,115,0,.4);color:#7A5200}
.frame.light .chartbox{background:var(--card);border-color:#DCE3EE}
.frame.light .hookL{background:#F2F5FA;border-color:#DCE3EE}
.frame.light .badges span{background:#FFFFFF;border-color:#D6DEE9;color:#14213D}
.frame.light .badges span i{color:#5F6E8C}
.frame.light .badges span.g{color:#067647;border-color:rgba(6,118,71,.45)}
.frame.light .badges span.r{color:#B42318;border-color:rgba(180,35,24,.45)}
.frame.light .badges span.c{color:#0E7490;border-color:rgba(14,116,144,.45)}
.frame.light .badges span.y{color:#B47300;border-color:rgba(180,115,0,.5)}
.frame.light .foot{color:#14213D}
.frame.light .subtxt{color:#0B1220;text-shadow:0 2px 10px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.9)}
.frame.light .subtxt .g{color:#B47300}
.frame.light .subtxt .c{color:#0E7490}
.frame.light .subtxt .r{color:#C81E1E}
.frame.light .ctabox{background:rgba(200,30,30,.05)}
.frame.light .ctabox small{color:#14213D}
.frame.light .vg-hl{color:#B47300}
.frame.light .steps .n{background:rgba(180,115,0,.12);color:#B47300}
.frame.light .ctaL .ph{color:#B47300}
.frame.light .ctaL li em{color:#5F6E8C}
.frame.light .ctaR h4{color:#0E7490}
.frame.light .ctaL li::before{background:rgba(180,115,0,.12);color:#B47300}
.frame.light .vs .col{background:var(--card);border-color:#DCE3EE}
.frame.light .vs p{color:#4A5872}
.frame.light .vs .col h3{color:#14213D}
/* ---- 템플릿: closing (마지막 신청 유도 화면) ---- */
.closing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:420px;gap:18px;margin-top:-8px}
.closing .ctop{font-size:19px;font-weight:700;color:var(--cyan);letter-spacing:4px}
.closing .cmain{font-size:56px;font-weight:800;letter-spacing:-2px;line-height:1.3;color:var(--tx)}
.closing .cmain em{font-style:normal;background:linear-gradient(180deg,#FFDE8A,#D9A430);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.closing .cphone{background:var(--card);border:2px solid var(--gold);border-radius:18px;
  padding:20px 46px 18px;animation:pulsering 2.2s ease infinite}
.closing .cphone small{display:block;font-size:15px;color:var(--mut);font-weight:600;margin-bottom:4px}
.closing .cphone strong{font-size:54px;font-weight:800;color:var(--gold);letter-spacing:2px}
.closing .ckw{font-size:20px;font-weight:600;color:var(--tx)}
.closing .ckw b{color:var(--gold)}
.closing .cnote{font-size:14px;color:var(--dim);font-weight:500}
@keyframes pulsering{0%,100%{box-shadow:0 0 0 0 rgba(245,192,68,.35)}50%{box-shadow:0 0 0 14px rgba(245,192,68,0)}}
.frame.light .closing .cmain{color:#14213D}
.frame.light .closing .cmain em{background:linear-gradient(180deg,#C98600,#8A5A00);-webkit-background-clip:text;background-clip:text}
.frame.light .closing .cphone{background:#fff;border-color:#B47300}
.frame.light .closing .cphone strong{color:#B47300}
.frame.light .closing .cphone small{color:#404E68}
.frame.light .closing .ckw{color:#14213D}
.frame.light .closing .cnote{color:#404E68}
.frame.light .photowrap svg text{opacity:1}
/* ---- 렌더 모드 (외부 프레임 캡처용) — 시간 연속 애니메이션을 확정 상태로 고정 ---- */
body.rendermode *,body.rendermode *::before,body.rendermode *::after{
  animation:none!important;transition:none!important}
body.rendermode .vg-hl.hg::after,body.rendermode .vg-hl.hr::after{opacity:1!important}
body.rendermode .vg-hl.hg::before,body.rendermode .vg-hl.hc::before{width:100%!important}
/* ---- 세로 분수 ("1/6" → 위아래로 쌓인 진짜 분수) ---- */
.statwrap .frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:middle}
.statwrap .frac b{font-weight:inherit;padding:0 18px 8px}
.statwrap .frac i{font-style:normal;font-weight:inherit;padding:8px 18px 0;
  border-top:6px solid #F5C044;border-radius:3px}
.statwrap .big.red .frac i{border-top-color:#FF5C5C}
.statwrap .big.cyan .frac i{border-top-color:#35D7E8}
.frame.light .statwrap .frac i{border-top-color:#B47300}
.frame.light .statwrap .big.red .frac i{border-top-color:#C81E1E}
.frame.light .statwrap .big.cyan .frac i{border-top-color:#0E7490}
/* ---- 시작 고지 화면 (재생 첫 3초) ---- */
#introGate{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#070C16 0%,#0B1526 60%,#08101E 100%);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
#introGate.show{opacity:1;pointer-events:auto}
.igbox{max-width:880px;padding:0 60px;text-align:center}
.igbrand{font-size:30px;font-weight:800;letter-spacing:6px;color:var(--gold);margin-bottom:34px}
.igbrand::after{content:'';display:block;width:60px;height:3px;border-radius:2px;
  background:var(--gold);margin:16px auto 0;opacity:.6}
.igbox p{font-size:17.5px;line-height:1.7;color:#B9C6DA;font-weight:500;letter-spacing:-.2px;margin-bottom:13px}
.igbox p:first-of-type{color:#E8EEF7;font-weight:700;font-size:19px}
.frame.light #introGate{background:linear-gradient(160deg,#FAFBFD 0%,#EEF2F8 60%,#F5F8FC 100%)}
.frame.light .igbox p{color:#44546E}
.frame.light .igbox p:first-of-type{color:#14213D}
.frame.light .igbrand{color:#B47300}
.frame.light .igbrand::after{background:#B47300}
/* 경고문 상시 슬라이드 (data-i=-1) — 정지·되감기 상태에서도 보인다 */
.slide.notice{display:flex;align-items:center;justify-content:center;padding:0}
.slide.notice.on{display:flex}
/* ---- 슬라이드 배경 이미지 (bg 업로드 우선 · bggen 일러스트 폴백) ---- */
.slidebg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.slidebg img,.slidebg svg{width:100%;height:100%;object-fit:cover;display:block;opacity:.34}
.slidebg i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,22,.55),rgba(7,12,22,.82))}
.frame.light .slidebg img,.frame.light .slidebg svg{opacity:.16}
.frame.light .slidebg i{background:linear-gradient(180deg,rgba(250,251,253,.62),rgba(238,242,248,.88))}
/* ---- 손글씨 콜아웃 ("여기가 벽") — 자막 싱크로 나타났다 사라짐 ---- */
.callayer{position:absolute;inset:0;pointer-events:none;z-index:6}
.callout{position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s ease}
.callout.show{opacity:1}
.callout .ring{display:block;width:var(--cr,120px);height:calc(var(--cr,120px)*.55);
  border:4.5px solid #FF2A2A;border-radius:48% 52% 50% 50%/55% 45% 55% 45%;
  transform:rotate(-4deg);box-shadow:0 0 18px rgba(255,42,42,.45);
  animation:calpop .4s cubic-bezier(.3,1.4,.5,1) both}
.callout .ctext{position:absolute;left:50%;top:-14px;transform:translate(-50%,-100%) rotate(-5deg);
  font-size:40px;font-weight:800;font-style:italic;color:#FF2A2A;letter-spacing:-1px;white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 16px rgba(255,42,42,.4);
  animation:calpop .45s .1s cubic-bezier(.3,1.4,.5,1) both}
.callout.none .ctext{position:static;transform:rotate(-5deg);display:block}
/* 화살표 지목 — 지점에 화살촉이 정확히 붙고, 문구는 지시선 끝(위/아래 빈 공간)에 pill 배경으로 */
.callout.arrow{transform:translate(-50%,0)}
.callout.arrow .lead{display:block;position:relative;width:3px;height:var(--leadh,44px);margin:0 auto;
  background:#FF2A2A;box-shadow:0 0 8px rgba(255,42,42,.6);animation:arrpop .35s both}
.callout.arrow .lead .ah{position:absolute;left:50%;width:0;height:0;border-left:9px solid transparent;
  border-right:9px solid transparent;transform:translateX(-50%)}
.callout.arrow .ctext{position:static;display:block;transform:rotate(-2deg);font-size:31px;
  animation:calpop .4s .05s both;white-space:nowrap;text-align:center}
/* below: 지점 아래에서 위로 가리킴 (텍스트가 지시선 아래) */
.callout.arrow.below .lead .ah{top:-1px;border-bottom:13px solid #FF2A2A}
.callout.arrow.below .ctext{margin-top:4px}
/* above: 지점 위에서 아래로 가리킴 (텍스트가 지시선 위) */
.callout.arrow.above{display:flex;flex-direction:column-reverse}
.callout.arrow.above .lead .ah{bottom:-1px;border-top:13px solid #FF2A2A}
.callout.arrow.above .ctext{margin-bottom:4px}
/* 문구 배경 pill — 어떤 요소 위에 얹혀도 읽힌다 */
.callout .ctext{padding:2px 14px;border-radius:9px;background:rgba(8,13,24,.72)}
.frame.light .callout .ctext{background:rgba(255,255,255,.88);box-shadow:0 2px 10px rgba(20,33,61,.12)}
@keyframes arrpop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
/* 가격선 네온 발광 — 차트 폭 전체를 가로지르는 빛나는 선 (JS 가 폭·위치 지정) */
.callout.glow{transform:translate(0,-50%)}
.callout.glow .gline{display:block;width:100%;height:4px;border-radius:3px;background:#FF2A2A;
  box-shadow:0 0 12px rgba(255,42,42,.8),0 0 28px rgba(255,42,42,.35);
  animation:glowpop .35s both,neonpulse 1.4s .4s ease-in-out infinite}
.callout.glow .ctext{left:50%;top:-20px;transform:translate(-50%,-100%) rotate(0);font-size:26px}
@keyframes glowpop{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:scaleX(1)}}
@keyframes neonpulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes calpop{from{opacity:0;transform:scale(.5) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(-5deg)}}
.frame.light .callout .ctext{color:#D71920;text-shadow:0 1px 0 rgba(255,255,255,.8),0 0 14px rgba(215,25,32,.3)}
.frame.light .callout .ring{border-color:#D71920}
/* ---- 템플릿: ladder (분할 대응 기준 사다리) ---- */
.ladwrap{display:flex;gap:40px;margin-top:6px}
.ladL{flex:.9;position:relative;padding-left:26px}
.ladL .lrail{position:absolute;left:9px;top:16px;bottom:16px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#2FBF71,#F5C044 45%,#E24B4B)}
.lad{position:relative;padding:13px 0 13px 12px}
.lad i{position:absolute;left:-24px;top:19px;width:13px;height:13px;border-radius:50%;
  background:var(--card);border:3px solid var(--mut)}
.lad.grn i{border-color:#2FBF71}.lad.red i{border-color:#E24B4B}
.lad.gold i{border-color:#F5C044}.lad.blue i{border-color:#4D9FDC}
.lad .lk{font-size:14px;color:var(--mut);font-weight:700}
.lad .lv{font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--tx)}
.lad.grn .lv{color:#2FBF71}.lad.red .lv{color:#FF6B6B}
.lad.gold .lv{color:var(--gold)}.lad.blue .lv{color:#6FB8E8}
.lad .lp{font-size:13.5px;font-weight:700;color:var(--dim)}
.ladR{flex:1.25;display:flex;flex-direction:column;gap:10px}
.ladcard{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--mut);
  border-radius:11px;padding:12px 18px;display:flex;flex-direction:column;gap:2px;position:relative}
.ladcard.grn{border-left-color:#2FBF71}.ladcard.red{border-left-color:#E24B4B}
.ladcard.gold{border-left-color:#F5C044}.ladcard.blue{border-left-color:#4D9FDC}
.ladcard .lch{font-size:14px;font-weight:700;color:var(--mut)}
.ladcard .lch em{font-style:normal;margin-left:7px;color:var(--gold2)}
.ladcard .lcv{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:32px;font-weight:800;letter-spacing:-.5px;color:var(--tx)}
.ladcard.grn .lcv{color:#2FBF71}.ladcard.red .lcv{color:#FF6B6B}
.ladcard.gold .lcv{color:var(--gold)}.ladcard.blue .lcv{color:#6FB8E8}
.ladcard .lcb{font-size:12.5px;color:var(--dim);font-weight:600}
.ratiobox{background:rgba(245,192,68,.07);border:1px solid rgba(245,192,68,.3);border-radius:11px;
  padding:10px 16px}
.ratiobox span{font-size:13.5px;font-weight:700;color:var(--gold2)}
.ratiobox .rbar{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-top:7px;
  font-size:12px;font-weight:700;color:#0B1220}
.ratiobox .rbar b{background:#2FBF71;display:flex;align-items:center;justify-content:center}
.ratiobox .rbar i{background:#4D9FDC;font-style:normal;display:flex;align-items:center;justify-content:center}
.frame.light .lad .lv,.frame.light .ladcard .lcv{color:#14213D}
.frame.light .ladcard{background:var(--card);border-color:#DCE3EE}
.frame.light .lad .lk,.frame.light .ladcard .lch{color:#404E68}
.frame.light .ladcard .lcb,.frame.light .lad .lp{color:#404E68}
/* ---- 밝은 테마: CTA(cta2) 회색·흰색 글씨 가독성 ---- */
.frame.light .cta2 .kw,.frame.light .steps3 li,.frame.light .proofhead{color:#14213D}
.frame.light .phonebox small{color:#404E68}
.frame.light .steps3 li em{color:#404E68}
.frame.light .proof .php{color:#404E68;background:#F2F5FA}
.frame.light .hookR .hnote{color:#404E68}
.frame.light .tline .tl .d{color:#B47300}
.frame.light .barfoot{color:#404E68}
.frame.light .photowrap .ph2{color:#404E68}

/* ---- 차트 주석 애니메이션 ---- */
.ann{opacity:0;transition:opacity .35s ease}
.ann.on{opacity:1}
.ann .grow{transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.3,.9,.3,1)}
.ann.on .grow{transform:scaleX(1)}
.ann .pop{transform:scale(.7);transform-origin:center;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ann.on .pop{transform:scale(1)}
.maline{transition:stroke-width .3s,opacity .3s,filter .3s}
.maline.hot{filter:drop-shadow(0 0 7px currentColor)}

/* ---- 콜아웃 글씨 잘림 방지 ----
   nowrap + 절대위치라 오른쪽/위로 삐져나가면 그대로 잘렸다.
   슬라이드 안에서만 그리도록 가둬 두고, 가장자리에선 안쪽으로 정렬한다. */
.callayer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:8}
.callout{max-width:92%}
.callout .ctext{font-size:34px;max-width:520px;white-space:normal;line-height:1.15;
  text-align:center;word-break:keep-all}
/* 오른쪽 절반에 있으면 글씨를 왼쪽으로 눕혀 화면 밖으로 안 나가게 */
.callout.edge-r .ctext{left:auto;right:0;transform:translate(0,-100%) rotate(-5deg);text-align:right}
.callout.edge-l .ctext{left:0;transform:translate(0,-100%) rotate(-5deg);text-align:left}
/* 위쪽에 붙었으면 글씨를 아래로 */
.callout.edge-t .ctext{top:auto;bottom:-14px;transform:translate(-50%,100%) rotate(-5deg)}
.callout.edge-t.edge-r .ctext{transform:translate(0,100%) rotate(-5deg)}
.callout.edge-t.edge-l .ctext{transform:translate(0,100%) rotate(-5deg)}

/* 트레이딩뷰 임베드 (코인 TV 차트 모드) */
.chartbox .tvchart{display:block;width:100%;height:430px;border:0;border-radius:8px;background:#131722}