/* 바이럴 히어로 휴대폰 롤링. 화면은 390x844(아이폰 기준)로 그리고 --s 배율로 줄인다. */
.vh-hero--phones { background:#f3f4f7; }
.vh-hero--phones::before { display:none; }
.vh-hero--phones .vh-inner { position:relative; z-index:2; }
.vp { --s:.68; --bz:9px; --step:270px; position:absolute; top:0; bottom:0; left:44%; right:0; z-index:1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%); mask-image:linear-gradient(90deg,transparent 0,#000 20%); }
.vp-phone { --x:0px; --k:.84; position:absolute; left:50%; top:52%; width:calc(390px * var(--s) + var(--bz) * 2); height:calc(844px * var(--s) + var(--bz) * 2);
  padding:var(--bz); border-radius:calc(54px * var(--s) + var(--bz)); background:#111318; box-shadow:0 0 0 1.5px #3a3d45 inset,0 30px 60px rgba(17,19,24,.22),0 8px 18px rgba(17,19,24,.12);
  transform:translate(-50%,-50%) translateX(var(--x)) scale(var(--k)); opacity:0; transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .4s ease; will-change:transform; }
.vp-phone.is-on { opacity:1; }
.vp-phone.is-jump { transition:none; }
.vp-screen { position:relative; width:390px; height:844px; transform:scale(var(--s)); transform-origin:0 0; border-radius:47px; overflow:hidden; background:#fff; }
.vp-island { position:absolute; top:11px; left:50%; width:120px; height:35px; margin-left:-60px; border-radius:20px; background:#000; z-index:5; }

/* 화면 공통 — 사이트 글꼴 대신 아이폰 기본 글꼴 */
.vp-app, .vp-app * { box-sizing:border-box; margin:0; letter-spacing:normal; }
.vp-app { display:flex; flex-direction:column; height:100%; color:#000; font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-align:left; word-break:keep-all; }
.vp-top { flex:none; position:relative; z-index:2; background:#fff; }
.vp-body { flex:1; overflow:hidden; position:relative; }
.vp-scroll { transform:translateY(0); transition:transform .8s cubic-bezier(.45,0,.2,1); }
.vp-phone.is-reset .vp-scroll { transition:none; }
.vp-bottom { flex:none; display:flex; align-items:center; gap:10px; padding:10px 18px 30px; border-top:1px solid #eee; background:#fff; color:#222; font-size:15px; }
.vp-bottom b { font-weight:500; margin-right:8px; }
.vp-status { display:flex; justify-content:space-between; align-items:center; height:47px; padding:14px 30px 0 34px; color:#000; }
.vp-status b { font-size:16px; font-weight:600; }
.vp-status-icons { display:flex; gap:6px; align-items:center; }
.vp-status--dark { color:#fff; }
.vp-photo { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:14px 0; }
.vp-ava { flex:none; width:34px; height:34px; border-radius:50%; background:#e3e5e8 radial-gradient(circle at 50% 38%,#c9ccd1 0 7px,transparent 7.5px),#e3e5e8; }
.vp-ava--lg { width:42px; height:42px; }
.vp-red { color:#f0284a; }
.vp-more { margin-left:auto; color:#999; }
.vp-cmts { padding:4px 18px 30px; }
.vp-cmt { display:flex; gap:12px; padding:14px 0; }
.vp-cmt-n { font-size:15px; font-weight:700; }
.vp-cmt-n em { font-style:normal; font-size:11px; font-weight:600; color:#03a94d; background:#e9f8ef; padding:2px 6px; margin-left:6px; border-radius:4px; }
.vp-cmt-t { font-size:16px; margin:2px 0; }
.vp-cmt-d { font-size:13px; color:#999; }
.vp-cmt-d span { margin-left:12px; }

/* 네이버 카페 */
.vp-cafe .vp-top { background:var(--cafe); color:#fff; }
.vp-cafe-bar { display:flex; align-items:center; gap:14px; height:52px; padding:0 16px; }
.vp-cafe-logo { font-size:23px; font-weight:800; letter-spacing:-.5px; }
.vp-cafe-bar b { flex:1; font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-cafe-join { background:#fff; color:var(--cafe); font-size:13px; font-weight:700; padding:5px 11px; border-radius:16px; }
.vp-cafe-head { padding:18px 18px 16px; border-bottom:1px solid #eee; }
.vp-cafe-board { display:flex; justify-content:space-between; align-items:center; color:#03a94d; font-size:14px; font-weight:600; }
.vp-cafe-board em { font-style:normal; color:#222; font-size:12px; font-weight:600; border:1px solid #ddd; border-radius:14px; padding:4px 10px; }
.vp-cafe-title { font-size:23px; line-height:1.38; margin:10px 0 16px; font-weight:500; }
.vp-cafe-author { display:flex; align-items:center; gap:10px; }
.vp-cafe-nick { font-size:15px; font-weight:700; }
.vp-cafe-nick i { font-style:normal; font-size:12px; }
.vp-cafe-nick span { color:#03a94d; font-size:13px; font-weight:600; margin-left:4px; }
.vp-cafe-meta { font-size:13px; color:#999; }
.vp-cafe-text { padding:16px 18px 0; font-size:17px; line-height:1.75; }
.vp-cafe-like { margin:28px 18px 10px; position:relative; border:1px solid #e5e5e5; border-radius:28px; height:52px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
.vp-cafe-like div { display:flex; align-items:center; gap:6px; }
.vp-cafe-like-tip { position:absolute; top:-30px; left:50%; transform:translateX(-50%); background:#03a94d; color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:12px; white-space:nowrap; }
.vp-cafe-cc { display:flex; align-items:center; gap:2px; padding:22px 18px 4px; border-top:8px solid #f5f6f8; margin-top:24px; font-size:18px; font-weight:700; }
.vp-cafe-bottom span:first-child { display:flex; align-items:center; gap:4px; margin-right:auto; }

/* 네이버 블로그 */
.vp-blog-bar { display:flex; align-items:center; gap:14px; height:52px; padding:0 16px; border-bottom:1px solid #e6e6e6; }
.vp-blog-logo { font-size:24px; font-weight:800; letter-spacing:-1px; }
.vp-blog-bar b { flex:1; text-align:center; font-size:16px; font-weight:600; }
.vp-blog-cat { text-align:center; font-size:13px; color:#555; margin:26px 0 10px; }
.vp-blog-title { text-align:center; font-size:23px; line-height:1.42; padding:0 22px; font-weight:400; }
.vp-blog-prof { display:flex; flex-direction:column; align-items:center; gap:3px; margin:22px 0 18px; }
.vp-blog-ava { width:38px; height:38px; border-radius:50%; background:#03c75a; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
.vp-blog-nick { font-size:14px; color:#333; }
.vp-blog-nick i { font-style:normal; color:#03c75a; font-size:12px; }
.vp-blog-date { font-size:12px; color:#999; }
.vp-blog-add { margin-top:6px; border:1px solid #03c75a; color:#03c75a; font-size:12px; font-weight:600; padding:4px 10px; }
.vp-blog-line { height:1px; background:#e6e6e6; margin:0 18px; }
.vp-blog-text { text-align:center; padding:18px 18px 0; font-size:16px; line-height:1.85; color:#222; }
.vp-blog-bottom { gap:8px; }
.vp-fill { font-size:19px; }

/* 뽐뿌 */
.vp-ppom-bar { display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 16px; }
.vp-ppom-logo { font-size:27px; font-weight:800; letter-spacing:1px; font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif; }
.vp-ppom-logo i { font-style:normal; color:#fff; -webkit-text-stroke:1.6px currentColor; paint-order:stroke; }
.vp-ppom-logo i:nth-child(1) { color:#f0a32c; } .vp-ppom-logo i:nth-child(2) { color:#ea5a7c; } .vp-ppom-logo i:nth-child(3) { color:#9c66d6; } .vp-ppom-logo i:nth-child(4) { color:#4b8de8; } .vp-ppom-logo i:nth-child(5) { color:#2fb9c9; } .vp-ppom-logo i:nth-child(6) { color:#56c06d; } .vp-ppom-logo i:nth-child(7) { color:#f3c53a; }
.vp-ppom-bar b { font-size:15px; font-weight:600; }
.vp-ppom-crumb { background:#5c5c5c; color:#fff; font-size:15px; padding:9px 16px; }
.vp-ppom-crumb span { font-size:11px; background:#fff; color:#5c5c5c; padding:0 3px; }
.vp-ppom-head { padding:16px 16px 12px; border-bottom:1px solid #ddd; }
.vp-ppom-title { font-size:19px; font-weight:700; line-height:1.45; }
.vp-ppom-title em { font-style:normal; font-size:13px; background:#eceff4; color:#4a5a7a; padding:1px 5px; margin-left:4px; vertical-align:2px; }
.vp-ppom-tag { font-size:11px; background:#3a6fd8; color:#fff; padding:2px 4px; margin-right:6px; vertical-align:3px; border-radius:3px; }
.vp-ppom-author { display:flex; align-items:center; gap:10px; margin-top:12px; }
.vp-ppom-nick { font-size:15px; color:#3a5bb8; }
.vp-ppom-nick span { display:inline-block; font-size:10px; font-weight:800; color:#fff; background:#c66be0; padding:0 4px; margin-right:4px; vertical-align:2px; }
.vp-ppom-meta { font-size:13px; color:#555; }
.vp-ppom-up { margin-left:auto; display:flex; align-items:center; gap:3px; color:#3a5bb8; font-size:14px; }
.vp-ppom-text { padding:16px 16px 0; font-size:16px; line-height:1.75; }
.vp-ppom-link { color:#555; font-size:14px; margin-bottom:10px; }
.vp-ppom-link u { color:#2a5ac4; }
.vp-ppom-cc { margin-top:22px; padding:12px 16px; background:#f4f4f4; border-top:1px solid #ddd; font-size:15px; }
.vp-ppom-cc b { color:#e2402c; }
.vp-ppom-bottom { justify-content:space-around; }
.vp-ppom-bottom span { display:flex; align-items:center; gap:4px; }

/* 네이버 뉴스 */
.vp-news-bar { display:flex; align-items:center; gap:14px; height:50px; padding:0 18px; }
.vp-news-logo { font-size:21px; font-weight:800; }
.vp-news-logo b { font-size:24px; font-weight:900; }
.vp-news-sub { flex:1; color:#999; font-size:15px; }
.vp-news-sub i { font-style:normal; color:#ddd; margin:0 4px; }
.vp-news-tabs { display:flex; gap:20px; padding:0 18px; height:44px; align-items:center; border-bottom:1px solid #e9e9e9; font-size:16px; white-space:nowrap; overflow:hidden; }
.vp-news-tabs .on { color:#1f6feb; font-weight:700; box-shadow:0 -3px 0 #1f6feb inset; height:100%; display:flex; align-items:center; }
.vp-news-press { display:flex; align-items:center; gap:8px; padding:22px 18px 8px; font-size:16px; font-weight:700; border-top:8px solid #f2f3f5; }
.vp-news-press em { font-style:normal; color:#1f6feb; font-size:14px; font-weight:600; }
.vp-news-pl { width:24px; height:24px; border-radius:50%; background:#d6352f; color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.vp-news-title { font-size:24px; font-weight:800; line-height:1.38; padding:4px 18px 14px; letter-spacing:-.5px; }
.vp-news-rep { display:flex; align-items:center; gap:8px; padding:0 18px; font-size:13px; color:#777; }
.vp-news-rep b { color:#222; }
.vp-news-orig { margin-left:auto; border:1px solid #ccc; border-radius:10px; padding:1px 8px; font-size:12px; }
.vp-news-react { display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid #eee; font-size:15px; color:#444; }
.vp-news-react span { display:flex; align-items:center; gap:4px; }
.vp-news-react i { flex:1; }
.vp-news-tool { font-size:13px; }
.vp-photo--news { margin:18px 0 6px; }
.vp-news-cap { font-size:13px; color:#888; padding:0 18px; }
.vp-news-text { padding:18px 18px 0; font-size:18px; line-height:1.75; color:#222; }
.vp-news-text div + div { margin-top:16px; }

/* 에펨코리아 */
.vp-fm-top { background:#3d63c9; color:#fff; }
.vp-fm-bar { display:flex; align-items:center; gap:18px; height:52px; padding:0 16px; }
.vp-fm-logo { flex:1; font-size:22px; font-weight:900; letter-spacing:-1px; text-shadow:1px 1px 0 #1e3c8f; }
.vp-fm-bar b { font-size:15px; font-weight:600; }
.vp-fm-board { padding:14px 16px; font-size:15px; color:#555; border-bottom:1px solid #e5e5e5; }
.vp-fm-board b { color:#333; font-size:17px; }
.vp-fm-board i { font-style:normal; color:#ccc; margin:0 6px; }
.vp-fm-head { display:flex; gap:10px; align-items:flex-start; padding:16px 16px 6px; }
.vp-fm-title { flex:1; font-size:19px; font-weight:700; line-height:1.4; }
.vp-fm-head span { font-size:13px; color:#555; white-space:nowrap; padding-top:3px; }
.vp-fm-author { display:flex; align-items:center; gap:6px; padding:6px 16px 14px; font-size:14px; color:#333; border-bottom:1px solid #eee; }
.vp-fm-author .vp-ava { width:24px; height:24px; }
.vp-fm-author em { font-style:normal; color:#666; font-size:13px; margin-left:6px; }
.vp-fm-text { padding:16px 16px 0; font-size:16px; line-height:1.75; }
.vp-fm-reco { display:flex; gap:22px; padding:18px 16px; color:#333; font-size:15px; }
.vp-fm-reco span { display:flex; align-items:center; gap:5px; }
.vp-fm-sort { display:flex; align-items:center; gap:3px; padding:14px 16px 0; border-top:1px solid #eee; font-size:15px; font-weight:600; }

@media(max-width:1024px) { .vp { --s:.6; --step:230px; left:46%; } }
@media(max-width:767px) {
  .vh-hero--phones { flex-direction:column; align-items:stretch; }
  .vp { position:relative; left:auto; right:auto; top:auto; bottom:auto; flex:none; height:420px; margin-top:-36px; --s:.45; --bz:7px; --step:175px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent); }
  .vp-phone { top:50%; }
}
@media (prefers-reduced-motion:reduce) { .vp-phone,.vp-scroll { transition:none !important; } }

/* ── 히어로 배경: 퍼져 나가는 반응 ── */
.vb { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.vb-glow { position:absolute; inset:0;
  background:radial-gradient(40% 58% at 72% 52%,rgba(37,70,158,.24),transparent 72%),radial-gradient(30% 42% at 96% 92%,rgba(217,197,154,.26),transparent 70%),radial-gradient(30% 40% at 52% 4%,rgba(169,182,220,.24),transparent 70%),radial-gradient(26% 36% at 6% 96%,rgba(169,182,220,.16),transparent 70%); }
.vb-ring { position:absolute; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; border:2px solid rgba(37,70,158,.42); background:radial-gradient(closest-side,transparent 70%,rgba(37,70,158,.06)); opacity:0; animation:vb-ring 2.4s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes vb-ring { 0% { transform:scale(.9); opacity:1; } 100% { transform:scale(3); opacity:0; } }
.vb-chip { position:absolute; z-index:30; display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; border-radius:12px; background:rgba(255,255,255,.96); box-shadow:0 12px 28px rgba(17,19,24,.14),0 2px 5px rgba(17,19,24,.08);
  font:600 14px/1.2 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; color:#111318; white-space:nowrap; opacity:0; animation:vb-rise var(--dur,6s) cubic-bezier(.25,.6,.35,1) forwards; }
.vb-chip i { flex:none; width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; color:#fff; background:var(--c,#285ccc); }
.vb-chip small { font-weight:500; color:#555a66; font-size:12px; }
@keyframes vb-rise { 0% { transform:translateY(24px) scale(var(--sc,1)); opacity:0; } 14% { opacity:var(--peak,.92); } 75% { opacity:var(--peak,.92); } 100% { transform:translateY(-130px) scale(var(--sc,1)); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .vb-chip { animation:none; opacity:var(--peak,.7); } .vb-ring { display:none; } }
@media(max-width:767px) { .vb-glow { background:radial-gradient(70% 40% at 50% 78%,rgba(37,70,158,.18),transparent 70%),radial-gradient(50% 30% at 90% 30%,rgba(217,197,154,.22),transparent 70%); } .vb-chip { font-size:11px; padding:6px 9px 6px 6px; } .vb-chip i { width:20px; height:20px; } }