/* 소개 영상 — /videos 플레이어 · 홈 0편 팝업 (핸드오프 F 규칙: 카드 0px, 버튼 2px, 스틸 네이비). 2026-10-24 */
.iv-stage{position:relative;aspect-ratio:16/9;background:#0b1622;overflow:hidden}
.iv-stage video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#0b1622}
.iv-sound{position:absolute;left:0;right:0;top:0;bottom:56px;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:0 0 4%;border:0;background:rgba(8,16,26,.18);cursor:pointer}
.iv-sound[hidden]{display:none}
.iv-sound span{display:flex;align-items:center;gap:12px;padding:14px 26px 14px 14px;background:rgba(255,255,255,.97);color:var(--ink,#22282e);font:700 18px/1 "Noto Sans KR",sans-serif;border-radius:2px;box-shadow:0 12px 36px rgba(0,0,0,.4);animation:ivPulse 2.2s ease-in-out infinite}
.iv-sound i{width:44px;height:44px;border-radius:50%;background:var(--navy,#1F4E79);display:flex;align-items:center;justify-content:center;flex:none}
.iv-sound svg{width:24px;height:24px}
.iv-sound:hover span{background:#fff}
@keyframes ivPulse{0%,100%{box-shadow:0 12px 36px rgba(0,0,0,.4),0 0 0 0 rgba(143,179,212,.8)}50%{box-shadow:0 12px 36px rgba(0,0,0,.4),0 0 0 12px rgba(143,179,212,0)}}

/* /videos 페이지 */
.iv-hero{background:var(--band);color:#fff;padding:56px 0 48px}
.iv-hero .lead{color:rgba(255,255,255,.82);max-width:640px;margin-top:16px}
.iv-hero .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;font-size:13.5px;color:rgba(255,255,255,.7)}
.iv-hero .meta span::before{content:"";display:inline-block;width:9px;height:2px;background:var(--band-lb);margin-right:8px;vertical-align:middle}
.iv-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.iv-main .iv-stage{box-shadow:0 18px 50px rgba(16,32,48,.18)}
.iv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:22px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.iv-title{font-size:24px;font-weight:900;line-height:1.4;letter-spacing:-.01em}
.iv-sub{font-size:15px;color:var(--fg2);margin-top:4px}
.iv-count{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.06em;white-space:nowrap}
.iv-ch-ttl{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.08em;margin:22px 0 10px}
.iv-chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.iv-chapters button{width:100%;display:flex;gap:12px;align-items:baseline;text-align:left;background:#fff;border:0;padding:11px 14px;font:500 14px/1.5 "Noto Sans KR",sans-serif;color:var(--fg);cursor:pointer;transition:background .12s ease}
.iv-chapters button span{font-size:12.5px;font-weight:700;color:var(--navy);min-width:34px}
.iv-chapters button:hover{background:var(--tint)}
.iv-chapters button.on{background:#E8EEF5;color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--navy)}
.iv-side{border:1px solid var(--line);background:#fff;position:sticky;top:92px}
.iv-side-ttl{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--band);color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}
.iv-side-ttl small{font-size:12px;font-weight:500;color:var(--band-lb)}
.iv-list{list-style:none;margin:0;padding:0;max-height:calc(100vh - 170px);overflow-y:auto}
.iv-list li+li{border-top:1px solid var(--line3)}
.iv-list button{width:100%;display:grid;grid-template-columns:136px 1fr;gap:12px;align-items:center;padding:12px 14px;border:0;background:#fff;text-align:left;cursor:pointer;font-family:inherit;transition:background .12s ease}
.iv-list button:hover{background:var(--tint)}
.iv-list button[aria-current="true"]{background:#E8EEF5;box-shadow:inset 3px 0 0 var(--navy)}
.iv-th{position:relative;display:block;aspect-ratio:16/9;background:#0b1622;overflow:hidden}
.iv-th img{display:block;width:100%;height:100%;object-fit:cover}
.iv-th i{position:absolute;right:4px;bottom:4px;background:rgba(10,20,30,.85);color:#fff;font-style:normal;font-size:11px;font-weight:700;padding:1px 5px;font-variant-numeric:tabular-nums}
.iv-meta{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.iv-meta b{font-size:11.5px;font-weight:700;color:var(--navy);letter-spacing:.06em}
.iv-meta strong{font-size:14.5px;font-weight:700;color:var(--ink)}
.iv-meta small{font-size:12px;color:var(--fg2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.iv-note{font-size:12.5px;color:var(--fg3);margin-top:18px}
@media(max-width:960px){
  .iv-wrap{grid-template-columns:1fr}
  .iv-side{position:static}
  .iv-list{max-height:none}
  .iv-hero{padding:52px 0 44px}
  .iv-title{font-size:20px}
  .iv-head{flex-direction:column;align-items:flex-start;gap:6px}
  .iv-main .iv-stage{scroll-margin-top:84px}
}
@media(max-width:560px){ .iv-list button{grid-template-columns:112px 1fr} .iv-sound{bottom:44px} .iv-sound span{font-size:15px;padding:10px 18px 10px 10px;gap:9px} .iv-sound i{width:34px;height:34px} .iv-sound svg{width:19px;height:19px} }

/* 홈 0편 팝업 */
html.iv-lock{overflow:hidden}
.iv-pop{position:fixed;inset:0;z-index:100;background:rgba(8,16,26,.78);display:flex;align-items:center;justify-content:center;padding:24px;animation:ivFade .2s ease}
.iv-pop[hidden]{display:none}
.iv-box{width:min(960px,100%,calc((100vh - 170px) * 16 / 9));background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.45);animation:ivUp .25s ease}
.iv-box-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:var(--band);color:#fff}
.iv-box-hd b{font-size:15px;font-weight:700}
.iv-box-hd small{display:block;font-size:12px;color:var(--band-lb);font-weight:500;letter-spacing:.04em}
.iv-x{width:38px;height:38px;flex:none;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;border-radius:2px}
.iv-x:hover{background:rgba(255,255,255,.12)}
.iv-box-ft{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:13.5px}
.iv-box-ft button{background:none;border:0;padding:6px 0;color:var(--fg2);font:500 13.5px "Noto Sans KR",sans-serif;cursor:pointer}
.iv-box-ft button:hover{color:var(--ink)}
.iv-box-ft a{color:var(--navy);font-weight:700}
.iv-box-ft a:hover{text-decoration:underline}
.iv-hero-btn{display:inline-flex;align-items:center;gap:10px}
.iv-hero-btn i{width:22px;height:22px;border-radius:50%;background:#fff;position:relative;flex:none}
.iv-hero-btn i::after{content:"";position:absolute;left:8px;top:6px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--band)}
@keyframes ivFade{from{opacity:0}to{opacity:1}}
@keyframes ivUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:560px){ .iv-pop{padding:12px} .iv-box-hd{padding:12px 14px} .iv-box-ft{padding:10px 14px} }
@media(prefers-reduced-motion:reduce){ .iv-pop,.iv-box,.iv-sound span{animation:none} }