/* 방송 출연(/media) 전용 스타일 — 디자인 Media.dc.html */
main{overflow-x:clip}
/* 방송 이름 마퀴 */
.mq-band{background:#1E4690;color:#FFFFFF;border-bottom:2px solid #1B1714}
.mq-box{overflow:hidden;padding:20px 0}
.mq{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq-box:hover .mq{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-i{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:'Hahmlet',serif;font-weight:900;font-size:36px;line-height:1.3;white-space:nowrap}
.mq-i .flag{width:16px;height:16px}
/* 영상 */
.md-vids{max-width:1360px;margin:0 auto;padding:72px 40px 40px;box-sizing:border-box}
.md-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-bottom:40px}
.md-head h2,.md-film h2,.md-recs h2{margin:0;font-family:'Hahmlet',serif;font-weight:900;font-size:44px;line-height:1.3}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips[hidden]{display:none}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 22px;border:2px solid #1B1714;background:#FFFFFF;font:inherit;font-size:18px;font-weight:700;color:#1B1714;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.chip:hover{transform:translateY(-3px)}
.chip.on{background:#1B1714;color:#FFFFFF}
.chip .n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;box-sizing:border-box;background:#EDBE2F;color:#1B1714;font-size:15px}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px}
.vcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#1B1714}
.vcard[hidden]{display:none}
.vcard.pop{animation:pop .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.vthumb{position:relative;display:block;border:2px solid #1B1714;overflow:hidden;background:#1B1714;box-shadow:12px 12px 0 #EDBE2F;transition:box-shadow .3s}
.vcard:hover .vthumb{box-shadow:12px 12px 0 #D3382C}
.vthumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.vcard:hover .vthumb img{transform:scale(1.06)}
.vplay{position:absolute;left:50%;top:50%;translate:-50% -50%;width:70px;height:70px;border-radius:50%;background:#FFFFFF;display:grid;place-items:center;transition:background .3s,scale .3s}
.vcard:hover .vplay{background:#D3382C;scale:1.08}
.vplay svg{fill:#1B1714;transition:fill .3s}.vcard:hover .vplay svg{fill:#FFFFFF}
.vtag{position:absolute;left:12px;top:12px;padding:4px 10px;font-size:14px;font-weight:700}
.vtag.bc{background:#B8231B;color:#FFFFFF}
.vtag.yt{background:#EDBE2F;color:#1B1714}
.vd{font-size:16px;font-weight:700;color:#9E1E17}
.vt{font-family:'Hahmlet',serif;font-weight:700;font-size:22px;line-height:1.45}
/* 방송 현장에서(필름 띠) */
.md-film{margin-top:50px;background:#1B1714;color:#FFFFFF;border-top:2px solid #1B1714;border-bottom:2px solid #1B1714;overflow:hidden}
.md-film-top{max-width:1360px;margin:0 auto;padding:72px 40px 18px;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px}
.md-film-top>div{display:flex;flex-direction:column;gap:10px}
.md-film-top p{margin:0;font-size:18px;color:#E6DED2}
.md-film-top a{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:700}
.film-box{padding:10px 0 84px;overflow:hidden}
.film{display:flex;align-items:center;gap:26px;width:max-content;padding:20px 0;animation:film 70s linear infinite}
.film-box:hover .film{animation-play-state:paused}
@keyframes film{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.frame{position:relative;flex:none;margin:0;padding:10px 10px 34px;background:#FAF6EE;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.frame:nth-child(odd){transform:rotate(-2deg)}
.frame:nth-child(even){transform:rotate(2deg) translateY(14px)}
.frame:hover{transform:rotate(0) scale(1.06);z-index:2}
.frame img{display:block;height:280px;width:auto}
/* 출연 기록 */
.md-recs{max-width:1360px;margin:0 auto;padding:60px 40px 110px;box-sizing:border-box}
.md-recs-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:40px 72px;align-items:start}
.md-recs-side{display:flex;flex-direction:column;gap:18px}
.md-recs-side p{margin:0;color:#463F38}
.md-recs-side img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:2px solid #1B1714;box-shadow:12px 12px 0 #2457B3}
.recs{list-style:none;margin:0;padding:0;border-top:3px solid #1B1714}
.rec{display:grid;grid-template-columns:230px minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;padding:18px 4px;border-bottom:1px solid rgba(27,23,20,.14);transition:background .25s}
.rec:hover{background:rgba(255,255,255,.6)}
.rec-d{font-family:'Hahmlet',serif;font-weight:900;font-size:22px;color:#1B1714}
.rec.has-v .rec-d{color:#9E1E17}
.rec-b{display:flex;flex-direction:column;gap:2px}
.rec-t{font-family:'Hahmlet',serif;font-weight:700;font-size:21px;line-height:1.45}
.rec-n{font-size:16px;color:#6B6158}
.rec-l{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:700;color:#9E1E17;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .mq-box,.film-box{overflow-x:auto}
}
@media (max-width:900px){
  .mq-box{padding:14px 0}
  .mq-i{font-size:26px;gap:20px;padding-right:20px}
  .md-vids{padding:48px 18px 24px}
  .md-head{margin-bottom:28px}
  .md-head h2,.md-film h2,.md-recs h2{font-size:30px}
  .chip{min-height:50px;padding:0 18px;font-size:17px}
  .vgrid{gap:36px}
  .vthumb{box-shadow:8px 8px 0 #EDBE2F}
  .vcard:hover .vthumb{box-shadow:8px 8px 0 #D3382C}
  .vt{font-size:20px}
  .md-film{margin-top:36px}
  .md-film-top{padding:48px 18px 10px}
  .film-box{padding:6px 0 64px}
  .frame img{height:210px}
  .md-recs{padding:40px 18px 80px}
  .md-recs-grid{gap:32px}
  .md-recs-side img{box-shadow:8px 8px 0 #2457B3}
  .rec{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 2px}
  .rec-d{font-size:19px}
  .rec-t{font-size:19px}
  .rec-l{justify-self:start}
}

.vt,.rec-t,.rec-n,.md-recs-side p,.md-film-top p{word-break:keep-all;overflow-wrap:break-word}
