/* 와우씨씨엠 리뉴얼 · 프로그램 홈 (/renew/{프로그램}/)
 * 대표 색은 --pc, 그 위 글자색은 --pi (prog/programs.php 의 color)
 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg{--pc:#ef5a22;--pi:#fff;--pc-soft:color-mix(in srgb,var(--pc) 9%,#fff);--pc-line:color-mix(in srgb,var(--pc) 28%,#fff);--pc-dk:color-mix(in srgb,var(--pc) 78%,#000)}

/* 큰 사진: 옛 사이트 사진(1800×376)을 그대로, 좁은 화면에서는 가운데를 잘라 보여 줌 */
.pg-hero{position:relative;aspect-ratio:1800/376;min-height:200px;max-height:376px;background:var(--pc) var(--pg-hero) var(--pg-pos,center)/cover no-repeat}
.pg-hero-plain{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.28),transparent 45%),linear-gradient(120deg,var(--pc-dk),var(--pc))}
.pg-title{margin:0;color:var(--pi);font-size:clamp(30px,5vw,56px);font-weight:900;letter-spacing:-.03em;text-align:center;line-height:1.15}
.pg-title small{display:block;font-size:.42em;font-weight:600;opacity:.85}

/* 정보 띠 (옛 사이트의 하늘색 띠) */
.pg-bar{background:var(--pc);color:var(--pi)}
.pg-bar .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;min-height:44px;padding-top:8px;padding-bottom:8px}
.pg-bar p{margin:0;font-size:15px}
.pg-bar b{font-weight:800;margin-right:4px}
.pg-staff{display:flex;flex-wrap:wrap;gap:4px 18px}
.pg-status{display:inline-block;margin-right:10px;padding:1px 9px;border:1px solid currentColor;border-radius:99px;font-size:12.5px;font-weight:700;vertical-align:1px}
.pg-status-end{background:rgba(0,0,0,.25);border-color:transparent;color:#fff}

/* 본문: 왼쪽 메뉴 + 오른쪽 */
.pg-in{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start;padding-top:32px;padding-bottom:64px}

.pg-side{border:1px solid var(--line);padding:12px 12px 16px;background:#fff}
.pg-card{display:block;padding:16px 16px 18px;background:linear-gradient(160deg,var(--pc),var(--pc-dk));color:var(--pi)}
.pg-card:hover{color:var(--pi)}
.pg-card small{display:block;font-size:15px;font-weight:600;opacity:.9}
.pg-card strong{display:block;font-size:27px;font-weight:800;line-height:1.08;letter-spacing:-.02em;word-break:keep-all}
.pg-nav{margin-top:8px}
.pg-nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 6px 12px 8px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--sub)}
.pg-nav a::before{content:"";flex:none;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--pc)}
.pg-nav a span{margin-left:auto;color:transparent;font-size:18px;line-height:1}
.pg-nav a:hover{color:var(--pc-dk);background:var(--pc-soft)}
.pg-nav a:hover span{color:var(--pc-dk)}
.pg-other{display:block;margin-top:18px}
.pg-other select{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14px;color:var(--sub)}

.pg-main{display:grid;gap:22px;min-width:0}
.pg-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.pg-box{border:1px solid var(--line);padding:16px 20px 18px;background:#fff;min-width:0}
.pg-box h2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.pg-box h2 a{flex:none;font-size:12.5px;font-weight:700;color:var(--mute)}
.pg-box h2 a:hover{color:var(--pc-dk)}
.pg-list{list-style:none;margin:0;padding:0}
.pg-list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pg-list li:last-child{border-bottom:0}
.pg-list a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.pg-list a:hover{color:var(--pc-dk)}
.pg-list time{flex:none;font-size:12.5px;color:var(--mute)}
.pg-new{display:inline-block;width:15px;height:15px;border-radius:50%;background:var(--brand);color:#fff;font-size:9.5px;font-style:normal;font-weight:800;line-height:15px;text-align:center;vertical-align:1px}
.pg-empty{margin:14px 0 4px;font-size:14px;color:var(--mute)}
.pg-empty a{color:var(--pc-dk);font-weight:600}

/* 포토 */
.pg-photo ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pg-photo li{min-width:0}
.pg-photo .th{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--band)}
.pg-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pg-photo a:hover img{transform:scale(1.05)}
.pg-photo .tt{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--sub);text-align:center}

/* 다시듣기 */
.pg-relist{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 18px}
.pg-relist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);min-width:0}
.pg-relist a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600}
.pg-relist a:hover{color:var(--pc-dk)}
.pg-play{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--pc);color:var(--pi)}
.pg-play i{width:0;height:0;margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.pg-play:hover{background:var(--pc-dk);color:#fff}
.pg-play:disabled{opacity:.35;cursor:default}
.pg-relist li.is-playing .pg-play i,.pg-relist li.playing .pg-play i{width:10px;height:11px;margin:0;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.pg-relist li.is-playing a,.pg-relist li.playing a{color:var(--pc-dk)}

/* 방송코너 소개 (옛 사이트의 크림색 상자) */
.pg-corner{padding:18px 22px 20px;background:var(--pc-soft);border:1px solid var(--pc-line)}
.pg-corner h2{margin:0 0 10px;font-size:16.5px;font-weight:800;color:var(--pc-dk)}
.pg-corners{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 28px}
.pg-corners h3{margin:0;font-size:15px;font-weight:800}
.pg-corners h3::before{content:"- "}
.pg-corners p{margin:3px 0 0;font-size:14px;color:var(--sub);word-break:keep-all}

@media (max-width:1023px){
  .pg-in{grid-template-columns:1fr;gap:20px;padding-top:20px}
  .pg-side{padding:10px}
  .pg-card{display:flex;align-items:baseline;gap:8px;padding:12px 14px}
  .pg-card strong{font-size:22px}
  .pg-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .pg-nav a{padding:7px 12px;border:1px solid var(--line);border-radius:99px;font-size:14px}
  .pg-nav a::before,.pg-nav a span{display:none}
  .pg-other{margin-top:10px}
}
@media (max-width:640px){
  .pg-hero{min-height:130px}
  .pg-bar p{font-size:13.5px}
  .pg-box{padding:14px 14px 16px}
  .pg-photo ul{gap:6px}
  .pg-corners{grid-template-columns:1fr}
}