/* Track and genre pages rendered by server/seo.mjs. External on purpose: CSP allows style-src 'self' only. */
:root{--seo-ink:#151515;--seo-body:#3a3f4d;--seo-muted:#5b6070;--seo-line:#e4e4e8;--seo-blue:#243fe8;--seo-soft:#f4f5fb;--seo-paper:#fff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--seo-paper);color:var(--seo-ink);font:16px/1.7 'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,'Segoe UI',sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--seo-blue);text-underline-offset:3px}
:focus-visible{outline:3px solid #5168ed;outline-offset:3px}
.seo-wrap{width:100%;max-width:920px;margin:0 auto;padding-inline:20px}
.seo-header{border-bottom:1px solid var(--seo-line)}
.seo-header .seo-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:16px}
.seo-logo{font-size:24px;font-weight:900;letter-spacing:-1px;color:var(--seo-ink);text-decoration:none}
.seo-logo span{color:var(--seo-blue)}
.seo-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.seo-nav a{color:var(--seo-ink);font-size:15px;text-decoration:none}
.seo-nav a:hover{color:var(--seo-blue)}
.seo-main{padding-block:28px 64px}
.seo-crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:22px;font-size:13px;color:var(--seo-muted)}
.seo-crumbs a{color:var(--seo-muted)}
.seo-eyebrow{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--seo-blue)}
h1{margin:0;font-size:clamp(28px,5vw,40px);line-height:1.25;letter-spacing:-.5px}
h2{margin:0 0 12px;font-size:20px;line-height:1.4}
.seo-lead{margin:14px 0 0;font-size:17px;color:var(--seo-body)}
.seo-note{margin:0;color:var(--seo-muted)}
.seo-player{margin-top:26px;padding:18px;border:1px solid var(--seo-line);border-radius:12px;background:var(--seo-soft)}
.seo-player audio{display:block;width:100%}
.seo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.seo-actions-center{justify-content:center}
.seo-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--seo-blue);border-radius:8px;background:var(--seo-blue);color:#fff;font-size:15px;font-weight:700;text-decoration:none}
.seo-button:hover{background:#1833d0;border-color:#1833d0}
.seo-button-ghost{background:#fff;color:var(--seo-blue);border-color:#c7cdf5}
.seo-button-ghost:hover{background:#eef0ff;border-color:var(--seo-blue)}
.seo-facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:30px 0 0;padding:20px 0;border-block:1px solid var(--seo-line)}
.seo-facts dt{font-size:14px;color:var(--seo-muted)}
.seo-facts dd{margin:0;font-weight:500}
.seo-section{margin-top:38px}
.seo-section p{margin:0 0 10px;color:var(--seo-body)}
.seo-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.seo-tags li{padding:4px 12px;border-radius:999px;background:var(--seo-soft);font-size:14px}
.seo-credit{margin:0;padding:16px;border-radius:10px;background:var(--seo-soft);font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.seo-intro{margin-bottom:8px}
.seo-list{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--seo-line)}
.seo-list li{padding:16px 0;border-bottom:1px solid var(--seo-line)}
.seo-list a{font-size:17px;font-weight:700}
.seo-meta{display:block;margin-top:3px;font-size:14px;color:var(--seo-muted)}
.seo-list p{margin:6px 0 0;font-size:15px;color:var(--seo-body)}
.seo-more{display:inline-block;margin-top:14px}
.seo-genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.seo-genres li{padding:16px 18px;border:1px solid var(--seo-line);border-radius:12px}
.seo-genres a{display:flex;justify-content:space-between;gap:10px;font-size:18px;text-decoration:none}
.seo-genres a span{font-size:14px;color:var(--seo-muted);white-space:nowrap}
.seo-genres p{margin:8px 0 0;font-size:14px;color:var(--seo-muted)}
.seo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.seo-chips a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid var(--seo-line);border-radius:999px;font-size:14px;color:var(--seo-ink);text-decoration:none}
.seo-chips a span{color:var(--seo-muted)}
.seo-chips a:hover{border-color:var(--seo-blue);color:var(--seo-blue)}
.seo-empty{padding-block:60px;text-align:center}
.seo-empty p{color:var(--seo-muted)}
.seo-footer{border-top:1px solid var(--seo-line);background:var(--seo-soft)}
.seo-footer .seo-wrap{display:flex;flex-wrap:wrap;gap:10px 22px;padding-block:24px;font-size:14px}
.seo-footer a{color:var(--seo-body)}
.seo-footer span{margin-left:auto;color:var(--seo-muted)}
@media (max-width:560px){
  .seo-facts{grid-template-columns:1fr;gap:2px}
  .seo-facts dd{margin-bottom:10px}
  .seo-actions .seo-button{flex:1 1 100%}
  .seo-footer span{width:100%;margin-left:0}
}
/* MUSEBOX × YouTube */
.seo-nav .seo-youtube-link{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.seo-youtube-link img{width:28px;height:28px;border-radius:50%;clip-path:circle(48.5%)}
.seo-channel{margin-bottom:48px}
.seo-channel-card{display:flex;align-items:center;gap:18px;padding:20px 22px;border:2px solid transparent;border-radius:18px;background:linear-gradient(#0e1016,#0e1016) padding-box,linear-gradient(100deg,#ff8a3d,#ec4c7c 38%,#8b5cf6 68%,#3b82f6) border-box;color:#f4f5fb}
.seo-channel-card img{flex:none;width:72px;height:72px;border-radius:50%;clip-path:circle(48.5%)}
.seo-channel-card strong{display:block;font-size:17px;line-height:1.4;color:#fff}
.seo-channel-card p{margin:4px 0 0;font-size:14px;color:#c9ccd8}
.seo-channel-card .seo-button{flex:none;margin-left:auto;border-color:#fff;background:#fff;color:#0e1016}
.seo-channel-card .seo-button:hover{border-color:#ffe3ec;background:#ffe3ec}
@media (max-width:560px){.seo-channel-card{flex-wrap:wrap}.seo-channel-card .seo-button{flex:1 1 100%;margin-left:0}}