/* 와우씨씨엠 리뉴얼 테스트
 * EBS 메인처럼 흰 헤더 + 회색 바탕 위 흰 카드, 포인트는 와우씨씨엠 주황
 * PC 콘텐츠 1200px / 모바일 767px 이하
 */
:root{
  --brand:#ef5a22; --brand-dk:#d4481a; --brand-soft:#fff1e9; --brand-line:#fbd3c0;
  --ink:#1f2328; --sub:#555b63; --mute:#9aa0a7; --line:#e5e7eb; --line-2:#f0f1f3;
  --band:#f4f5f7; --card:#fff; --radius:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
[hidden]{display:none!important}
.in{max-width:1240px;margin:0 auto;padding:0 20px;position:relative}
.testbar{background:#1463ff;color:#fff;text-align:center;font-size:13px;padding:6px 16px}
.testbar a{text-decoration:underline}
.testbar a:hover{color:#fff}

/* ===== 헤더 (기존 방식: 유틸바 · 로고 왼쪽 · 주황 메뉴바) ===== */
.util{border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.util .in{display:flex;justify-content:space-between;align-items:center;height:38px}
.util .family{display:flex;gap:18px}
.util .member a.admin{color:var(--brand);font-weight:700} /* 관리자 바로가기 */
.util .family b{color:var(--brand);margin-right:4px}
.util .member{display:flex;gap:16px}
.hd .in{display:grid;grid-template-columns:260px 1fr 290px;align-items:center;height:100px;gap:20px}
.logo{display:flex;align-items:center;font-weight:900;font-size:38px;letter-spacing:-.03em}
.logo img{height:52px;width:auto}
.logo .w{background:var(--brand);color:#fff;padding:0 14px;line-height:48px}
.logo .c{color:var(--brand)}
.m-ico{display:none;background:none;border:0;width:40px;height:40px;font-size:22px;padding:0}
.search{justify-self:center;width:100%;max-width:480px;display:flex;border:2px solid var(--brand);height:46px}
.search input{flex:1;min-width:0;border:0;padding:0 14px;font:inherit;font-size:15px;outline:none}
.search button{border:0;background:var(--brand);color:#fff;font-weight:700;padding:0 22px}
.search button:hover{background:var(--brand-dk)}
.util .native{margin-left:3px;color:var(--mute)}
/* 헤더 방송선교후원 배너 */
.support{justify-self:end;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;max-width:290px;height:74px;padding:0 14px 0 12px;background:linear-gradient(115deg,#fff6ef 0%,#ffe2cf 100%);border:1px solid var(--brand-line)}
.support::before{content:"";position:absolute;right:-40px;top:-60px;width:170px;height:170px;background:repeating-radial-gradient(circle,rgba(239,90,34,.13) 0 1.5px,transparent 1.5px 16px)}
.support:hover{border-color:var(--brand)}
.sp-ic{position:relative;flex:none;width:46px;height:46px;background:var(--brand);color:#fff;display:grid;place-items:center}
.sp-tx{position:relative;display:grid;min-width:0;line-height:1.3}
.sp-tx small{font-size:11.5px;font-weight:800;color:var(--brand);letter-spacing:.02em}
.sp-tx b{font-size:14px;font-weight:800;color:var(--ink);word-break:keep-all}
.sp-go{position:relative;flex:none;align-self:flex-end;margin:0 0 10px auto;font-size:11.5px;font-weight:800;color:#fff;background:var(--ink);padding:3px 8px;white-space:nowrap;transition:background .2s}
.support:hover .sp-go{background:var(--brand)}
.support-img{padding:0;background:none}
.support-img::before{content:none}
.support-img img{display:block;width:100%;height:100%;object-fit:cover}

.gnb{background:var(--brand);border-bottom:2px solid #686868} /* 기존 홈페이지처럼 메뉴바 아래 진회색 줄 */
.gnb .in{display:flex;align-items:center;justify-content:space-between;gap:8px;height:58px}
.allmenu{background:none;border:0;color:#fff;font-size:22px;width:40px;height:40px;margin-left:-8px;flex:none}
.gnb .main{display:flex;align-items:center;flex:1;min-width:0}
.gnb .main a{color:#fff;font-size:17px;font-weight:700;padding:0 22px;line-height:58px;white-space:nowrap}
.gnb .main a:hover{background:var(--brand-dk);color:#fff}
/* 편성표 · 다시듣기 · 다시보기: 기존 홈페이지처럼 진한 적갈색 박스 하나에 세로줄로 구분 */
.gnb .sub{display:flex;align-items:center;flex:none;height:36px;padding:0 6px;background:#b82e00;box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.gnb .sub a{position:relative;color:#fff;font-size:14.5px;font-weight:700;padding:0 14px;line-height:36px;white-space:nowrap}
.gnb .sub a + a::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:rgba(0,0,0,.3);box-shadow:1px 0 0 rgba(255,255,255,.14)}
.gnb .sub a:hover{color:#ffd8c2}

/* ===== 본문: 회색 바탕 위 흰 카드 ===== */
.body{background:#fff;padding:28px 0 56px}
.grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px}
.col{display:grid;gap:20px;align-content:start;min-width:0}
.card{background:var(--card);border:1px solid var(--line);padding:18px 20px;min-width:0}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:28px}
.card-hd h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em}
/* 가운데 섹션 제목: 앞 주황 막대 + 옆 회색 영어 */
.col.center .card-hd h2{display:flex;align-items:baseline;gap:8px}
.col.center .card-hd h2::before{content:"";align-self:center;flex:none;width:4px;height:17px;background:var(--brand)}
.card-hd h2 .en{font-size:13px;font-weight:500;color:#b3b8be;letter-spacing:0}
.more{flex:none;font-size:13px;color:var(--mute);display:inline-flex;align-items:center;gap:2px}
.more::after{content:"›";font-size:16px;line-height:1}
.more:hover{color:var(--brand)}
.empty{color:var(--mute);font-size:14px;padding:10px 0;margin:0}

/* 가운데는 박스·선 없이 제목과 여백으로만 구분 */
.col.center{display:flex;flex-direction:column;gap:40px}
.center .card{border:0;padding:0;background:none}
/* 프로그램 공지와 와우스토리/이벤트 높이 맞추기: 짧은 쪽 목록 간격을 늘려 바닥선을 맞춤 */
.two > section{display:flex;flex-direction:column}
.two > section > .notice,.two .story:not([hidden]){flex:1;display:flex;flex-direction:column}
.two > section > .notice{justify-content:space-between}
.two .story .notice{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.center .card-hd{margin-bottom:10px}
.center .card-hd h2{font-size:19px}

/* ON AIR */
.onair{padding:14px}
.onair .dj{position:relative;overflow:hidden;aspect-ratio:2/1;background:#eee}
.onair .dj img{width:100%;height:100%;object-fit:cover}
.onair .live{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;padding:2px 9px}
.onair .live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.onair .song{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--band);padding:0 10px;height:36px;font-size:14px}
.onair .lb{font-weight:700;flex:none;color:var(--brand-dk);font-size:13px}
.onair .win{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.onair .txt{display:inline-block}
.onair .txt.scroll{animation:marquee var(--dur,12s) linear infinite}
@keyframes marquee{from{transform:translateX(var(--from,0))}to{transform:translateX(var(--to,0))}}
.onair .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.onair .btns a{border:1px solid var(--line);text-align:center;font-weight:700;font-size:14px;padding:10px 0}
.onair .btns a.listen{background:var(--brand);border-color:var(--brand);color:#fff}
.onair .btns a.listen:hover{background:var(--brand-dk)}
.mquick{display:none}
/* 앱 다운로드 배너 (왼쪽 ON AIR 아래) */
.appbn{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(115deg,#2b2320,#4a2a1c);color:#fff;transition:transform .2s,box-shadow .2s}
.appbn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(43,35,32,.25)}
.appbn-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;background:var(--brand);color:#fff}
.appbn-ic svg{width:22px;height:22px}
.appbn-tx{flex:1;min-width:0}
.appbn-tx b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.appbn-tx small{display:block;font-size:11.5px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbn-go{flex:none;font-size:22px;line-height:1;color:var(--brand)}

/* 오늘의 말씀: 배너 아래 얇은 띠 (한두 줄, 비중은 작게) */
.verse-strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:-20px;padding:12px 4px;border-top:2px solid var(--brand);border-bottom:1px solid var(--line)}
.vs-when{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.vs-when b{font-size:13px;font-weight:800;color:var(--brand)}
.vs-when span{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.vs-text{margin:0;font:500 15.5px/1.6 "Noto Serif KR",serif;color:var(--ink);word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.verse-strip cite{font-style:normal;font-size:12.5px;font-weight:700;color:var(--brand-dk);white-space:nowrap}

/* 오늘의 편성 */
.sched{list-style:none;margin:0;padding:0}
.sched li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;column-gap:6px;align-items:start;padding:7px 0;border-top:1px solid var(--line-2)}
.sched li:first-child{border-top:0}
.sched .tm{font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.sched .tm,.sched .badge{line-height:22px}
.sched .nm{display:grid;gap:1px;min-width:0}
.sched .badge{grid-column:3;grid-row:1;margin:0;padding:0 4px;font-size:10.5px;letter-spacing:-.01em} /* 작게: '황성대의 캠프파이어 ON AIR'가 한 줄에 들어가게 */
.sched .pt{display:flex;align-items:center;gap:6px;min-width:0;line-height:22px}
.sched .pt a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched .vr{flex:none;display:inline-grid;place-items:center;color:var(--brand);line-height:0}
/* 출연자: ON AIR 표시 아래까지 끝까지 펼침, 굵게 하지 않음 */
.sched .guest{grid-column:2 / -1;font-size:12.5px;font-weight:400;color:var(--brand-dk);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere} /* 이름 중간에서 줄바꿈하지 않게 */
.today{padding-left:14px;padding-right:14px} /* 편성표 이름 칸을 넓게 */
.today .card-hd h2{font-weight:900;letter-spacing:0}
.today .card-hd h2 em{font-style:normal;color:var(--brand)}
.sched li.now .tm{color:var(--brand)}
.sched li.now .nm{font-weight:700}
.badge{flex:none;margin-left:auto;font-size:11px;font-weight:800;color:var(--brand);background:var(--brand-soft);padding:1px 8px}

/* 방송 프로그램 목록 */
/* 왼쪽 프로그램 목록: 옛 홈페이지처럼 주황 머리띠 (마지막 묶음은 짙은 갈색) */
.programs{padding:0 0 8px}
.programs .card-hd{margin:0 0 6px;padding:6px 16px;min-height:0;background:var(--brand)}
.programs .card-hd h2{font-size:15px;color:#fff}
.programs:last-of-type .card-hd{background:#5b3a2a}
.programs .plist{padding:0 8px}
.plist{list-style:none;margin:0;padding:0}
.plist a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;font-size:14.5px}
.plist a:hover{background:var(--brand-soft);color:var(--ink)}
.plist .pn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .chip{flex:none;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.plist a:hover .chip{color:var(--brand-dk)}
.plist .ended .pn,.plist .ended .chip{color:#b3b8be}

/* 메인 배너 890×350 (제작 1780×700). 예전 1780×800 이미지는 위아래가 조금씩 잘림 */
.hero{position:relative;overflow:hidden;aspect-ratio:890/350;background:#dfe2e6}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;color:#fff}
.slide.on{opacity:1;visibility:visible}
.slide img{width:100%;height:100%;object-fit:cover}
.slide picture{position:relative;display:block;height:100%}
.slide .bgblur{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(20px) brightness(.92)}
.slide .txt{position:absolute;left:56px;right:56px;top:50%;transform:translateY(-50%)}
.slide .eyebrow{display:inline-block;font-size:13px;font-weight:700;background:rgba(0,0,0,.28);padding:3px 12px;margin-bottom:14px}
.slide strong{display:block;font-size:40px;font-weight:800;line-height:1.2;letter-spacing:-.03em;text-wrap:balance;max-width:620px}
.slide:hover{color:#fff}
.s1{background:linear-gradient(115deg,#8ec5f4,#c9a5f2 55%,#f5b7d6)}
.s2{background:linear-gradient(115deg,#2b3a67,#c0582b 70%,#f0a04b)}
.s3{background:linear-gradient(115deg,#20604f,#3d9d7c 60%,#b7e0a0)}
.hero-ar{position:absolute;top:0;bottom:0;z-index:3;width:68px;display:grid;place-items:center;padding:0;border:0;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent);color:#fff;opacity:.75;transition:opacity .2s}
.hero-ar.next{right:0;background:linear-gradient(270deg,rgba(0,0,0,.16),transparent)}
.hero-ar.prev{left:0}
.hero-ar svg{width:34px;height:34px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.hero:hover .hero-ar{opacity:1}
.hero-ar:hover svg{transform:scale(1.1)}
/* 아래: 01 / 02 + 진행 막대 + 일시정지 */
.hero-bar{position:absolute;left:22px;right:22px;bottom:14px;z-index:3;display:flex;align-items:center;gap:10px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hero-bar .ctr{flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.85}
.hero-bar .ctr b{font-weight:800;opacity:1}
.hero-bar .bars{flex:1;display:flex;gap:6px}
.hero-bar .bar{flex:1;height:14px;padding:5px 0;border:0;background:none;cursor:pointer}
.hero-bar .bar i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.45);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.hero-bar .bar i::after{content:"";display:block;width:0;height:100%;background:#fff}
.hero-bar .bar.on i::after{animation:heroFill 5s linear forwards}
.hero.is-hold .hero-bar .bar.on i::after{animation-play-state:paused}
.hero.is-paused .hero-bar .bar.on i::after{animation:none;width:100%}
@keyframes heroFill{to{width:100%}}
.hero-bar .pause{flex:none;width:26px;height:26px;padding:0;border:0;background:none;color:#fff;font-size:10px;text-shadow:inherit}

/* 프로그램 공지 + 와우스토리/이벤트 */
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.notice{list-style:none;margin:0;padding:0}
.notice li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line-2)}
.notice li:first-child{border-top:0}
.notice li a{display:flex;align-items:center;gap:8px;min-width:0}
.notice .sj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice .cat{flex:none;font-size:12px;font-weight:700;color:var(--brand-dk);background:var(--brand-soft);padding:1px 7px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice .new{flex:none;width:16px;height:16px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}
.notice .dt{flex:none;color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}

.tabs{display:flex;gap:18px}
.tabs button{position:relative;border:0;background:none;padding:2px 0 6px;font-size:17px;font-weight:800;color:#b3b8be;letter-spacing:-.02em;transition:color .2s}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);transform:scaleX(0);transition:transform .25s}
.tabs button:hover{color:var(--sub)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.story{animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.lead{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:start;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line-2)}
.lead .th{position:relative;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center}
.lead .th img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lead:hover .th img{transform:scale(1.04)}
.lead .th em{font-style:normal;color:#fff;font-weight:800;font-size:14px}
.lead .tx{display:grid;gap:3px;min-width:0}
.lead strong{font-size:15.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead .ex{font-size:13px;color:var(--sub);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead .dt{font-size:12px;color:var(--mute)}

/* 방송참여 이미지 3개 */
.corner-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.corner-list a{display:block;overflow:hidden;aspect-ratio:225/66;border:1px solid var(--line-2)}
.corner-list img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.corner-list a:hover img{transform:scale(1.03)}
.corner-list a.ph{display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;padding:0 10px;text-align:center}

/* 포토 / VOD 카드 (EBS 최신영상형) */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vcard{display:grid;gap:6px;align-content:start;min-width:0}
.vcard .th{position:relative;aspect-ratio:16/10;overflow:hidden}
.vcard .th img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vcard:hover .th img{transform:scale(1.04)}
/* 유튜브 썸네일(4:3)은 위아래 검은 띠가 그림에 들어 있음 → 16:10 칸에 맞게 살짝 키워 띠를 잘라 냄 */
.vcard .th img[src*="img.youtube.com"],.vcard .th img[src*="i.ytimg.com"]{position:absolute;left:50%;top:50%;width:111.2%;max-width:none;height:auto;transform:translate(-50%,-50%)}
.vcard:hover .th img[src*="img.youtube.com"],.vcard:hover .th img[src*="i.ytimg.com"]{transform:translate(-50%,-50%) scale(1.04)}
.vcard .play{position:absolute;right:8px;bottom:8px;width:30px;height:30px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:11px}
.vcard .tt{font-size:14.5px;line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .meta{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t1{background:linear-gradient(135deg,#f08a4b,#d9481a)}
.t2{background:linear-gradient(135deg,#b58be6,#7f5bd0)}
.t3{background:linear-gradient(135deg,#5bb7a0,#2f7f6d)}
.t4{background:linear-gradient(135deg,#6f93d8,#3c5fae)}

/* ===== 전체 폭 띠 ===== */
/* 추천 찬양 영상: 어두운 띠 */
.reco-band{background:#2b2522;color:#f3ece7;padding:40px 0 44px}
.reco-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.reco-hd h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff}
.reco-hd p{margin:4px 0 0;font-size:14px;color:#b9aea7}
.reco-nav{display:flex;gap:6px}
.reco-nav button{width:36px;height:36px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:20px;line-height:1}
.reco-nav button:hover{background:var(--brand);border-color:var(--brand)}
.reco-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 80px) / 6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reco-row::-webkit-scrollbar{display:none}
.reco-row .vcard{scroll-snap-align:start}
.reco-row .th{aspect-ratio:16/9;background:#3b332f}
.reco-row .tt{color:#f3ece7}
.reco-row .vcard:hover .tt{color:#ffb08f}
.reco-row .meta{color:#a99d95}

/* 다시듣기: 정사각 프로그램 이미지 + 방송일 + 프로그램명 (SBS 추천 팟캐스트형) */
.media-block + .media-block{margin-top:44px;padding-top:36px;border-top:1px solid rgba(255,255,255,.1)}
.reco-hd .more{color:#b9aea7;margin-right:8px}
.reco-hd .more:hover{color:#fff}
.lcard{display:grid;gap:4px;align-content:start;min-width:0;scroll-snap-align:start}
.lcard .art{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#3b332f;margin-bottom:8px}
.lcard .art img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lcard:hover .art img{transform:scale(1.04)}
.lcard .meta{font-size:12.5px;color:#a99d95}
.lcard .tt{font-size:15px;font-weight:600;color:#f3ece7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard:hover .tt{color:#ffb08f}
.lcard .play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;font-size:12px;z-index:2;transition:background .2s}
.lcard:hover .play{background:var(--brand)}
/* 이미지가 없을 때 자동으로 만드는 프로그램 카드 */
.art.gen{display:flex;flex-direction:column;justify-content:space-between;padding:16px;color:#fff}
.art.gen::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 105% -5%,rgba(255,255,255,.16) 0 1.5px,transparent 1.5px 18px)}
.art.gen::after{content:"";position:absolute;width:70%;height:70%;left:-20%;bottom:-25%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.art.gen .brand,.art.gen .ttl{position:relative;z-index:1}
.art.gen .brand{font-size:10px;font-weight:700;letter-spacing:.16em;opacity:.85}
.art.gen .ttl{display:grid;gap:2px;padding-right:36px}
.art.gen .ttl small{font-size:13px;font-weight:500;opacity:.88}
.art.gen .ttl b{font-size:24px;font-weight:900;line-height:1.15;letter-spacing:-.03em;word-break:keep-all;overflow-wrap:anywhere}
.art.gen.long .ttl b{font-size:19px}
.lcard .art.tone0{background:linear-gradient(145deg,#f59b42,#e8551f)}
.lcard .art.tone1{background:linear-gradient(145deg,#a2477a,#4b2c5e)}
.lcard .art.tone2{background:linear-gradient(145deg,#3fa38c,#1f5f5b)}
.lcard .art.tone3{background:linear-gradient(145deg,#4a6fb0,#22325c)}
.lcard .art.tone4{background:linear-gradient(145deg,#c97a2b,#6b3a1f)}
.lcard .art.tone5{background:linear-gradient(145deg,#f08a6b,#b8325a)}

/* 방송선교 후원 띠: 두 칸 아래 1200px 가로 한 줄 */
.support-band{display:flex;align-items:center;gap:28px;margin-top:40px;padding:22px 32px;background:var(--brand);color:#fff;position:relative;overflow:hidden}
.support-band::before{content:"";position:absolute;right:180px;top:-90px;width:260px;height:260px;background:repeating-radial-gradient(circle,rgba(255,255,255,.1) 0 1.5px,transparent 1.5px 18px)}
.support-band > *{position:relative}
.sb-text{flex:1;min-width:0}
.sb-text h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.sb-text p{margin:3px 0 0;font-size:15px;opacity:.92;word-break:keep-all}
.sb-meter{flex:none;width:220px}
.sb-num{font-size:14px;margin-bottom:6px}
.sb-num b{font-size:22px;font-weight:800}
.sb-bar{height:8px;background:rgba(255,255,255,.3)}
.sb-bar i{display:block;height:100%;background:#fff}
.sb-btn{flex:none;background:#fff;color:var(--brand-dk);font-weight:800;font-size:15px;padding:12px 24px}
.sb-btn:hover{background:var(--ink);color:#fff}

/* 와우씨씨엠 패밀리 */
.fam-band{padding:36px 0 40px}
.fam-band h2{margin:0 0 14px;font-size:19px;font-weight:800}
.fam-list{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.fam-list a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:14px;min-width:0}
.fam-list a:hover{border-color:var(--brand)}
.fam-list .fi{flex:none;width:40px;height:40px;background:var(--brand-soft);color:var(--brand-dk);display:grid;place-items:center;font-weight:800;font-size:14px}
.fam-list b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-list small{display:block;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 영상 팝업 */
.ytmodal{width:min(960px,92vw);padding:0;border:0;background:#000;overflow:visible}
.ytmodal::backdrop{background:rgba(0,0,0,.75)}
.ytbox{aspect-ratio:16/9}
.ytbox iframe{width:100%;height:100%;border:0;display:block}
.ytclose{position:absolute;right:0;top:-44px;width:40px;height:40px;border:0;background:transparent;color:#fff;font-size:24px}

/* 퀵메뉴: 1200px 바깥 오른쪽 */
.quick{position:absolute;right:-90px;top:0;width:84px;border:1px solid var(--line);background:#fff;font-size:12px;text-align:center;overflow:hidden}
.quick b{display:block;background:var(--ink);color:#fff;padding:6px 0;font-size:11px;letter-spacing:.05em}
.quick a{display:grid;justify-items:center;gap:4px;padding:10px 0 9px;border-top:1px solid var(--line-2)}
.quick a .si{width:28px;height:28px;background:none;-webkit-mask:none;mask:none;position:relative;display:grid;place-items:center}
.quick a .si::before{content:"";width:16px;height:16px;background:#fff;-webkit-mask:var(--si) center/contain no-repeat;mask:var(--si) center/contain no-repeat}
.quick .sns-youtube .si,.quick .sns-facebook .si{background:var(--sns)}
.quick .sns-instagram .si{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.quick .sns-kakaotalk .si{background:#fee500}
.quick .sns-kakaotalk .si::before{background:#191600}
@media (max-width:1439px){.quick{display:none}}

/* ===== 하단 (EBS형: 공지 · 앱 · SNS / 회사 정보) ===== */
.ft{background:#fff;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}
.ft-top .in{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding-top:28px;padding-bottom:28px}
.ft-top section{padding:0 28px;border-left:1px solid var(--line)}
.ft-top section:first-child{padding-left:0;border-left:0}
.ft h2{margin:0 0 12px;font-size:14px;font-weight:800;color:var(--ink)}
.ft-notice ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ft-notice li{display:flex;justify-content:space-between;gap:10px}
.ft-notice li a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-notice li a::before{content:"- "}
.ft-notice li span{flex:none;color:var(--mute);font-variant-numeric:tabular-nums}
.apps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.app{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 12px;min-width:0}
.app:hover{border-color:var(--brand)}
.app .ai{flex:none;width:40px;height:40px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.app.ios .ai{background:var(--ink)}
.app.win .ai{background:#2b6fd6}
.app.mac .ai{background:#55595f;font-size:12px}
.app b{display:block;color:var(--ink);font-size:13.5px;white-space:nowrap}
.app small{font-size:12px;color:var(--mute);white-space:nowrap}
.ft-sns div{display:flex;flex-wrap:wrap;gap:8px}
.ft-sns a{width:40px;height:40px;display:grid;place-items:center;color:#fff;transition:transform .2s}
.ft-sns a:hover{transform:translateY(-2px);color:#fff}
.ft-sns .si{width:20px;height:20px}
/* SNS 아이콘 (simple-icons 이미지를 글자색으로 칠함) */
.si{display:inline-block;flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--si) center/contain no-repeat;mask:var(--si) center/contain no-repeat}
.sns-youtube{--sns:#ff0000}
.sns-facebook{--sns:#0866ff}
.sns-instagram{--sns:#e4405f}
.sns-kakaotalk{--sns:#fee500}
.ft-sns .sns-youtube,.ft-sns .sns-facebook,.ft-sns .sns-instagram{background:var(--sns)}
.ft-sns .sns-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ft-sns .sns-kakaotalk{background:#fee500;color:#191600}
.ft-sns .sns-kakaotalk:hover{color:#191600}
.ft-bot{background:var(--band);padding:20px 0 26px;font-size:12.5px;color:#7b8189}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:10px;color:var(--sub);font-weight:600}
.ft-bot p{margin:2px 0}
.mplayer{display:none}

/* ===== 전체 메뉴 (PC·모바일 공통, 왼쪽에서 열림) ===== */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45)}
.drawer-in{position:absolute;left:0;top:0;bottom:0;width:min(84%,340px);background:#fff;overflow-y:auto;padding:0 0 24px;animation:slidein .2s ease}
@keyframes slidein{from{transform:translateX(-20px);opacity:.6}to{transform:none;opacity:1}}
.drawer-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--brand-soft)}
.drawer-hd .btn{background:var(--brand);color:#fff;padding:6px 14px;font-weight:700}
.drawer-hd .close{margin-left:auto;background:none;border:0;font-size:20px;width:36px;height:36px}
.drawer nav{display:grid}
.drawer nav a{padding:13px 20px;border-bottom:1px solid var(--line-2);font-size:16px;font-weight:600}
.drawer-tt{margin:18px 20px 6px;font-size:12px;font-weight:700;color:var(--mute)}
.drawer .drawer-prog{grid-template-columns:1fr 1fr;padding:0 12px}
.drawer .drawer-prog a{font-size:14px;font-weight:500;padding:8px;border:0}
.drawer-support{display:block;margin:16px;padding:12px;background:var(--brand);color:#fff;font-weight:700;text-align:center}
.drawer-support:hover{color:#fff;background:var(--brand-dk)}
.drawer-family{display:flex;gap:16px;padding:0 20px;font-size:13px;color:var(--sub)}

/* ===== 태블릿 ===== */
/* 태블릿 폭: 후원 배너가 찌그러지므로 숨김 (전체 메뉴에 후원 링크 있음) */
@media (min-width:768px) and (max-width:1023px){.support{display:none}}
@media (max-width:1100px){
  .hd .in{grid-template-columns:200px 1fr 220px;gap:16px}
  .gnb .main{overflow-x:auto;scrollbar-width:none}
  .gnb .main a{padding:0 12px;font-size:16px}
  .grid{grid-template-columns:250px minmax(0,1fr)}
  .two{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .reco-row{grid-auto-columns:calc((100% - 32px) / 3)}
  .fam-list{grid-template-columns:repeat(3,1fr)}
  .support-band{flex-wrap:wrap}
  .ft-top .in{grid-template-columns:1fr 1fr}
  .ft-sns{border-left:0!important;padding-left:0!important;margin-top:20px}
}

/* ===== 모바일 ===== */
@media (max-width:767px){
  .in{padding:0 16px}
  .util,.support,.allmenu,.quick,.gnb .sub{display:none}
  .site-hd{position:sticky;top:0;z-index:30;background:#fff}
  .hd{border-bottom:1px solid var(--line)}
  .hd .in{grid-template-columns:44px 1fr 44px;height:56px;gap:0}
  .logo{justify-self:center;font-size:24px}
  .logo img{height:34px}
  .logo .w{line-height:32px;padding:0 10px}
  .m-ico{display:grid;place-items:center}
  .m-ico.r{justify-self:end}
  .search{display:none;position:absolute;left:12px;right:12px;top:60px;z-index:5;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12)}
  .search.open{display:flex}
  .gnb .in{height:46px;padding:0}
  .gnb .main{padding:0 6px}
  .gnb .main::-webkit-scrollbar{display:none}
  .gnb .main a{font-size:16px;line-height:46px;padding:0 12px}

  .body{padding:14px 0 24px}
  .grid{display:flex;flex-direction:column;gap:14px}
  .col,.col.center{display:contents}
  .card{padding:16px}
  .hero{order:1;aspect-ratio:3/2}
  .slide img{object-fit:contain} /* 모바일 이미지가 없으면 PC 이미지를 흐린 배경 위에 통째로 */
  .slide img.bgblur{object-fit:cover}
  .onair{order:2}
  .mquick{order:3;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .appbn{order:3} /* 바로가기 다음 */
  .today{order:4}
  .two{order:5;gap:14px}
  .corner{order:6}
  .sec{order:7}
  .programs{order:9}

  .slide .txt{left:22px;right:22px;top:26px;transform:none}
  .slide strong{font-size:26px}
  .hero-ar{width:44px}
  .hero-ar svg{width:26px;height:26px}
  .hero-bar{left:14px;right:14px;bottom:8px;gap:8px}
  .onair .dj{aspect-ratio:2.2/1}
  .onair .btns a{padding:12px 0;font-size:15px}
  .mquick a{display:grid;justify-items:center;gap:4px;background:#fff;border:1px solid var(--line);padding:10px 0;font-size:13px;font-weight:700}
  .mquick i{font-style:normal;font-size:18px;color:var(--brand)}
  .lead{grid-template-columns:112px minmax(0,1fr);gap:12px}
  .corner-list{grid-template-columns:1fr;gap:8px}
  .photo-cards{grid-template-columns:1fr 1fr;gap:12px}
  .verse-strip{order:3;margin-top:0;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 2px}
  .verse-strip .vs-text{grid-column:1/-1;grid-row:2;font-size:15px}
  .reco-band{padding:28px 0 32px}
  .reco-hd h2{font-size:19px}
  .reco-hd .more{margin-right:0}
  .media-block + .media-block{margin-top:28px;padding-top:24px}
  .art.gen .ttl b{font-size:20px}
  .art.gen.long .ttl b{font-size:17px}
  .reco-nav button{display:none}
  .reco-row{grid-auto-columns:62%;margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
  .support-band{margin-top:14px;flex-direction:column;align-items:stretch;gap:14px;padding:22px 20px}
  .support-band::before{right:-60px}
  .sb-text h2{font-size:19px}
  .sb-meter{width:auto}
  .sb-btn{text-align:center}
  .fam-band{padding:28px 0}
  .fam-list{grid-template-columns:1fr 1fr;gap:8px}
  .fam-list a{padding:10px}

  .ft-top .in{grid-template-columns:1fr;gap:22px;padding-top:22px;padding-bottom:22px}
  .ft-top section{padding:0!important;border-left:0!important;margin:0!important}
  .ft-bot{padding-bottom:90px}

  .mplayer{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:10px;background:#1f2328;color:#fff;padding:10px 12px 10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--brand)}
  .mplayer .live{font-size:11px;font-weight:800;background:var(--brand);padding:1px 8px;flex:none}
  .mplayer .nm{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mplayer .pl{width:42px;height:42px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;flex:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-bar .bar.on i::after{animation:none;width:100%}
  html{scroll-behavior:auto}
  .slide,.tabs button,.tabs button::after{transition:none}
  .onair .txt.scroll,.onair .live i,.story,.drawer-in{animation:none}
  .vcard .th img,.lead .th img,.corner-list img,.lcard .art img,.lcard .play,.sp-go,.ft-sns a{transition:none}
}