/* video-channels.html 전용 스타일 — 인라인 <style> 에서 옮겼다(라이트 테마 P3-C). 공용 크롬은 hub.css·nav.css. */
:root{ --r:18px } /* 페이지 레이아웃 토큰 */

.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-220px;right:-130px;animation:d1 21s ease-in-out infinite alternate}
.blob.b{width:460px;height:460px;background:radial-gradient(circle,var(--glow3),transparent 60%);bottom:-200px;left:-150px;animation:d2 25s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(-60px,60px) scale(1.1)}}
@keyframes d2{to{transform:translate(70px,-40px) scale(1.12)}}


.phead{padding:62px 0 20px;position:relative;max-width:680px} /* 중앙 컬럼 헤드 — 사이트 공통 문법 */
.phead h1{font-size:clamp(40px,6vw,72px);font-weight:700;font-family:"Space Grotesk";letter-spacing:-.03em;line-height:1}

/* ===== 온에어 시그널 비주얼 — 재생 버튼에서 퍼지는 방송 링(데스크톱 전용 장식) ===== */
@keyframes oaping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.05);opacity:0}}
  background:linear-gradient(135deg,var(--ember),var(--crim));
  box-shadow:0 0 34px rgba(var(--ember-rgb),.55),inset 0 1px 0 var(--hilite);animation:oabob 3.2s ease-in-out infinite}
@keyframes oabob{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes oadot{0%,100%{opacity:1}50%{opacity:.25}}
.phead h1 .it{font-family:"Instrument Serif";font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--amber),var(--ember),var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.16em}
.phead p{color:var(--txt-dim);font-size:16px;margin-top:18px;max-width:560px}

/* 필터 칩 (다축) */
.filters{display:flex;flex-direction:column;gap:14px;margin:38px 0 8px}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flabel{font-family:"Space Grotesk";font-size:11.5px;color:var(--txt-faint);letter-spacing:.06em;min-width:54px}
.chip{font-size:13px;color:var(--txt-dim);background:var(--glass);border:1px solid var(--glass-line);padding:8px 16px;border-radius:100px;cursor:pointer;transition:all .2s;font-weight:500}
.chip:hover{color:var(--txt);border-color:rgba(var(--plasma-rgb),.4)}
.chip.on{background:linear-gradient(120deg,var(--ember),var(--crim));color:var(--on-accent);border-color:transparent}

/* ===== 추천 영상 (대형) ===== */
.slabel{display:flex;align-items:center;gap:14px;margin:46px 0 22px}
.slabel h2{font-family:"Space Grotesk";font-size:22px;font-weight:600;letter-spacing:-.01em}
.slabel .tag{font-family:"Space Grotesk";font-size:12px;color:var(--ember);background:rgba(var(--ember-rgb),.12);padding:5px 12px;border-radius:100px}
.slabel .more{margin-left:auto;font-family:"Space Grotesk";font-size:13px;color:var(--txt-dim)}
.slabel .more:hover{color:var(--ember)}

.feat{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-bottom:14px}
.fvid{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);overflow:hidden;backdrop-filter:blur(14px);transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
.fvid:hover{transform:translateY(-5px);border-color:rgba(var(--plasma-rgb),.4)}
.thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--inst-hi),var(--inst))}
.thumb .heat{position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 40%,rgba(var(--ember-rgb),.45),transparent 60%),radial-gradient(50% 60% at 75% 70%,rgba(var(--crim-rgb),.4),transparent 60%);mix-blend-mode:var(--glow-blend)}
.thumb .grid-ov{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--ink-rgb),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.04) 1px,transparent 1px);background-size:32px 32px}
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--inst)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(var(--black-rgb),.55);border:1px solid rgba(var(--white-rgb),.25);backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .2s,background .2s}
.fvid:hover .play{transform:translate(-50%,-50%) scale(1.1);background:rgba(var(--ember-rgb),.85)}
.play svg{margin-left:3px}
.dur{position:absolute;right:12px;bottom:12px;font-family:"Space Grotesk";font-size:12px;background:rgba(var(--bg-rgb),.8);padding:4px 10px;border-radius:7px;color:var(--txt)}
.fbody{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.fmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.badge{font-family:"Space Grotesk";font-size:11px;letter-spacing:.04em;padding:4px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.b-kr{background:rgba(var(--green-rgb),.14);color:var(--green)}
.b-en{background:rgba(var(--blue-rgb),.14);color:var(--blue)}
.b-cc{background:rgba(var(--amber-rgb),.12);color:var(--amber)}
.b-lv{background:rgba(var(--ember-rgb),.12);color:var(--ember)}
.fvid h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:10px}
.fvid .ch{font-family:"Space Grotesk";font-size:12.5px;color:var(--diff-advanced);margin-bottom:10px}
.fvid .sum{font-size:13.5px;color:var(--txt-dim);flex:1}
.vpoint{margin-top:11px;font-size:12.5px;color:var(--read);background:rgba(var(--amber-rgb),.08);border:1px solid rgba(var(--amber-rgb),.2);padding:7px 11px;border-radius:8px;line-height:1.45}
.vpoint b{font-weight:600;color:var(--txt)}

/* ===== 영상 그리드 ===== */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
.vcard{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);overflow:hidden;backdrop-filter:blur(14px);transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
.vcard:hover{transform:translateY(-5px);border-color:rgba(var(--plasma-rgb),.4)}
.vthumb{aspect-ratio:16/9;position:relative;background:linear-gradient(135deg,var(--inst-hi),var(--inst))}
.vthumb .heat{position:absolute;inset:0;mix-blend-mode:var(--glow-blend)}
.h1{background:radial-gradient(60% 70% at 35% 45%,rgba(var(--amber-rgb),.4),transparent 60%)}
.h2{background:radial-gradient(60% 70% at 60% 50%,rgba(var(--crim-rgb),.45),transparent 60%)}
.h3{background:radial-gradient(55% 65% at 45% 55%,rgba(var(--blue-rgb),.4),transparent 60%)}
.vthumb .grid-ov{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--ink-rgb),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.035) 1px,transparent 1px);background-size:28px 28px}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(var(--black-rgb),.5);border:1px solid rgba(var(--white-rgb),.22);backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .2s,background .2s}
.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.12);background:rgba(var(--ember-rgb),.85)}
.vdur{position:absolute;right:10px;bottom:10px;font-family:"Space Grotesk";font-size:11px;background:rgba(var(--bg-rgb),.8);padding:3px 8px;border-radius:6px}
.vbody{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.vmeta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.vcard .ch{font-family:"Space Grotesk";font-size:11.5px;color:var(--diff-advanced);margin-bottom:6px}
.vcard h4{font-size:15.5px;font-weight:600;line-height:1.35;margin-bottom:8px}
.vcard .sum{font-size:12.5px;color:var(--txt-faint);flex:1}

/* ===== 해외 채널 ===== */
.chgroup{font-family:"Space Grotesk";font-size:15px;font-weight:600;color:var(--txt-dim);margin:0 0 16px;display:flex;align-items:center;gap:9px}
.chgroup .chn{font-size:12px;color:var(--txt-faint);font-weight:400}
.chgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
.chcard{background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:24px 22px;backdrop-filter:blur(14px);text-align:center;transition:transform .25s,border-color .25s;position:relative;overflow:hidden}
.chcard:hover{transform:translateY(-5px);border-color:rgba(var(--plasma-rgb),.4)}
.chcard::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 70%);opacity:0;top:-50px;left:50%;transform:translateX(-50%);filter:blur(28px);transition:opacity .35s;mix-blend-mode:var(--glow-blend)}
.chcard:hover::after{opacity:.4}
.avatar{width:58px;height:58px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:20px;color:rgb(var(--white-rgb));position:relative;z-index:2}
.av1{background:linear-gradient(135deg,var(--ember),var(--crim))}
.av2{background:linear-gradient(135deg,var(--blue),var(--grad-violet))}
.av3{background:linear-gradient(135deg,var(--green),var(--grad-teal))}
.av4{background:linear-gradient(135deg,var(--amber),var(--ember))}
.chcard h4{font-size:16px;font-weight:600;position:relative;z-index:2}
.chcard .sub{font-size:12px;color:var(--txt-faint);margin:4px 0 12px;position:relative;z-index:2}
.chcard .desc{font-size:12.5px;color:var(--txt-dim);position:relative;z-index:2;line-height:1.5}
.chcard .langtag{display:inline-block;margin-top:14px;font-family:"Space Grotesk";font-size:11px;padding:4px 11px;border-radius:100px;position:relative;z-index:2}

.chsearchbar{display:flex;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.chsearchbar input{flex:1;min-width:220px;background:var(--glass);border:1px solid var(--glass-line);border-radius:100px;padding:11px 18px;color:var(--txt);font-family:var(--font-sans);font-size:14px}
.chsearchbar select{flex:0 0 auto;background:var(--glass);border:1px solid var(--glass-line);border-radius:100px;padding:11px 18px;color:var(--txt);font-family:var(--font-sans);font-size:13.5px;cursor:pointer}
.chsearchbar select:focus{border-color:rgba(var(--plasma-rgb),.5);outline:none}
.chsearchbar input:focus{border-color:rgba(var(--plasma-rgb),.5)}
.chsearchbar input::placeholder{color:var(--txt-faint)}
.chsearchbar .cnt{font-family:"Space Grotesk";font-size:12.5px;color:var(--txt-faint);white-space:nowrap}
.chsearchbar .cnt b{color:var(--amber);font-weight:600}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.chobs{font-size:12px;color:var(--txt-faint);margin:-8px 0 18px}
.avatar{overflow:hidden}
.avatar .avimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.chcard .handle{font-family:"Space Grotesk";font-size:11.5px;color:var(--txt-faint);margin-top:2px;position:relative;z-index:2}
.chtags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:14px;position:relative;z-index:2}
.chtags .langtag{margin-top:0}
.chtags .subs{display:inline-block;font-family:"Space Grotesk";font-size:11px;padding:4px 11px;border-radius:100px;background:rgba(var(--ink-rgb),.06);color:var(--txt-dim)}
.chcard.hide{display:none}
.chnoresult{padding:46px 20px;text-align:center;color:var(--txt-faint);font-size:14.5px;font-family:"Space Grotesk"}

/* ===== 무료 교육 사이트 ===== */
.ednote{font-size:13.5px;color:var(--txt-dim);margin:-8px 0 20px;max-width:720px;line-height:1.55}
.ednote b{color:var(--blue);font-weight:600}
.edgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px}
.edcard{background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:22px 22px 18px;backdrop-filter:blur(14px);transition:transform .25s,border-color .25s;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.edcard:hover{transform:translateY(-5px);border-color:rgba(var(--plasma-rgb),.4)}
.edcard::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 70%);opacity:0;top:-50px;left:50%;transform:translateX(-50%);filter:blur(28px);transition:opacity .35s;mix-blend-mode:var(--glow-blend);pointer-events:none}
.edcard:hover::after{opacity:.4}
.edcard>*{position:relative;z-index:2}
.edtop{display:flex;align-items:center;gap:12px}
.edtop .avatar{width:46px;height:46px;font-size:16px;margin:0;flex-shrink:0}
.edtop .avatar.has-icon{background:var(--chip);color:var(--chip-ink);box-shadow:inset 0 0 0 1px rgba(var(--shade-rgb),.06)}
.edtop .avatar.has-icon .avimg{object-fit:contain;padding:7px;background:var(--chip)}
.edcard h4{font-size:16px;font-weight:600;line-height:1.3}
.edcard h4 a{color:inherit}
.edcard h4 a:hover{color:var(--ember)}
.edcard .sub{font-family:"Space Grotesk";font-size:12px;color:var(--txt-faint);margin-top:2px}
.edmeta{display:flex;gap:6px;flex-wrap:wrap}
.b-kr-part{background:rgba(var(--green-rgb),.08);color:var(--green);border:1px dashed rgba(var(--green-rgb),.35)}
.b-free{background:rgba(var(--green-rgb),.14);color:var(--green)}
.b-free-part,.b-free-video{background:rgba(var(--amber-rgb),.12);color:var(--amber)}
.b-acct{background:rgba(var(--ink-rgb),.06);color:var(--txt-dim)}
.edcard .desc{font-size:12.5px;color:var(--txt-dim);line-height:1.5;flex:1}
.edstart{font-size:12.5px;color:var(--txt);line-height:1.45}
.edstart b{font-weight:600;color:var(--blue)}
.edstart a{color:var(--txt);text-decoration:underline;text-decoration-color:rgba(var(--blue-rgb),.5)}
.edstart a:hover{color:var(--blue)}
.edcard .vpoint{margin-top:0}
.edcaveat{font-size:11.5px;color:var(--txt-faint);line-height:1.45}
.edfacts a{color:var(--blue)}

@media (max-width:900px){.menu,.enter{display:none}.burger{display:block}.feat{grid-template-columns:1fr}.vgrid{grid-template-columns:repeat(2,1fr)}.chgrid{grid-template-columns:repeat(2,1fr)}.edgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.wrap{padding:0 18px}.vgrid{grid-template-columns:1fr}.chgrid{grid-template-columns:1fr}.edgrid{grid-template-columns:1fr}}