/* PPL 마케팅 히어로: 촬영 현장 → 감독 모니터 → 방송 화면 → 검색량 그래프 → 게시판 반응. 무대는 680x620, --s 배율로 줄인다. */
.vh-hero--pon { background:#f4f3f1; }
.vh-hero--pon::before { display:none; }
.vh-hero--pon .vh-inner { position:relative; z-index:2; }
.vh-hero--pon .vh-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 60% at 76% 48%,rgba(239,68,68,.10),transparent 70%),radial-gradient(30% 44% at 98% 92%,rgba(33,48,111,.12),transparent 70%),radial-gradient(28% 40% at 56% 4%,rgba(251,146,60,.10),transparent 70%); }
.pon { --s:.92; position:absolute; top:78px; bottom:0; left:52%; right:0; z-index:1; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.pon-stage { position:relative; flex:none; width:680px; height:620px; transform:scale(var(--s)); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:#1E2026; text-align:left; word-break:keep-all; letter-spacing:normal; line-height:1.35; }
.pon-stage * { box-sizing:border-box; margin:0; }

/* 현실 컷 */
.pon-real { position:absolute; inset:0; z-index:2; border-radius:18px; overflow:hidden; background:#111; box-shadow:0 40px 80px rgba(30,30,40,.22),0 10px 24px rgba(17,19,24,.12); }
.pon-cut { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform-origin:0 0; }
.pon-mscr { position:absolute; left:0; top:0; width:640px; height:360px; transform-origin:0 0; overflow:hidden; background:#0d1220; }
.pon-mscr i { position:absolute; inset:6% .6% 6% .6%; border:3px solid rgba(255,255,255,.88); font-style:normal; }
.pon-flash { position:absolute; inset:0; background:#fff; opacity:0; font-style:normal; }

/* 방송 화면: 처음엔 무대를 채우는 TV, 뒤에는 왼쪽 위 작은 화면 */
.pon-tv { position:absolute; inset:0; z-index:3; border-radius:18px; background:#0d0f12; opacity:0; }
.pon-tv-scr { position:absolute; z-index:4; background-size:cover; background-position:center; border-radius:6px; box-shadow:0 0 0 3px #1b1d22,0 18px 40px rgba(0,0,0,.35); opacity:0; overflow:hidden; }
.pon-tv-vid { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; }
.pon-tv-title { position:absolute; left:4%; top:5%; color:#fff; font-size:1em; font-weight:800; letter-spacing:-.02em; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.pon-tv-age { position:absolute; right:4%; top:5%; width:1.9em; height:1.9em; border-radius:50%; border:2px solid #fff; color:#fff; font-style:normal; font-size:.72em; font-weight:800; line-height:calc(1.9em - 4px); text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.pon-tv-ep { position:absolute; left:4%; top:calc(5% + 2.2em); color:#fff; font-size:.66em; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.pon-onair { position:absolute; z-index:5; display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:6px; background:#1E2026; color:#fff; font-size:14px; font-weight:700; opacity:0; white-space:nowrap; }
.pon-onair i { width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.3); font-style:normal; }
.pon-onair b { font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* 검색량 그래프 */
.pon-graph { position:absolute; left:0; top:186px; width:680px; padding:16px 20px 12px; border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(30,30,40,.10); opacity:0; }
.pon-graph-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:8px !important; }
.pon-graph-head p { display:flex; align-items:baseline; gap:10px; }
.pon-graph-head span { font-size:14px; font-weight:700; }
.pon-graph-head b { font-size:40px; line-height:1; font-weight:800; color:#25469E; letter-spacing:-.03em; }
.pon-graph-head u { text-decoration:none; font-variant-numeric:tabular-nums; }
.pon-graph-head em { font-style:normal; font-size:12px; color:#1E2026; }
.pon-graph-svg { display:block; width:640px; height:138px; overflow:visible; }
.pon-graph-svg text { font-size:11px; fill:#1E2026; }
.pon-graph-line { fill:none; stroke:#25469E; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.pon-graph-fill { fill:rgba(33,48,111,.08); opacity:0; }
.pon-graph-mark { stroke:#ef4444; stroke-width:1.5; stroke-dasharray:4 4; opacity:0; }
.pon-graph-svg .pon-graph-tag { font-size:12px; font-weight:700; fill:#ef4444; opacity:0; }

/* 게시판 */
.pon-board { position:absolute; left:0; top:414px; width:680px; padding:12px 20px 6px; border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(30,30,40,.10); opacity:0; }
.pon-board-h { display:flex; justify-content:space-between; padding-bottom:8px !important; border-bottom:2px solid #1E2026; font-size:14px; }
.pon-board-h span { font-size:12px; color:#1E2026; }
.pon-post { display:flex; align-items:center; gap:14px; height:38px; border-bottom:1px solid #eceef0; font-size:14.5px; opacity:0; }
.pon-post:last-child { border-bottom:0; }
.pon-post time { flex:none; width:44px; font-size:13px; font-weight:700; color:#25469E; font-variant-numeric:tabular-nums; }
.pon-post span { flex:1; color:#1E2026; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pon-post em { flex:none; font-style:normal; font-size:12.5px; font-weight:700; color:#ef4444; }

@media(max-width:1280px) { .pon { --s:.78; } }
@media(max-width:1024px) { .pon { --s:.6; } }
@media(max-width:767px) {
  .vh-hero--pon { flex-direction:column; align-items:stretch; }
  .pon { position:relative; left:auto; right:auto; top:auto; bottom:auto; flex:none; height:360px; margin-top:-20px; --s:.52; overflow:hidden; }
}