/* SOUNDRADAR — fan landing (cover-adaptive) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
:root{--accent:#6B3FF6;--lime:#D4FF00}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
a{text-decoration:none}
body{min-height:100vh;font-family:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;color:#fff;background:#0A0A0A;position:relative;overflow-x:hidden}
.fan-bg{position:fixed;inset:0;background-size:cover;background-position:center;filter:blur(46px) saturate(1.3) brightness(.55);transform:scale(1.25);z-index:-2}
.fan-scrim{position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.92));z-index:-1}
.fan-shell{max-width:440px;margin:0 auto;padding:46px 20px 60px;display:flex;flex-direction:column;align-items:center;text-align:center}
.fan-cover{width:240px;height:240px;border-radius:20px;object-fit:cover;box-shadow:0 24px 60px rgba(0,0,0,.6);margin-bottom:22px}
.fan-cover.ph{display:flex;align-items:center;justify-content:center;background:#1a1a1a;font-size:60px}
.fan-title{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.fan-artist{color:#cfcfcf;font-size:15px;margin-top:4px}
/* 아티스트 공개 허브 (Bio 랜딩) */
.bio-av{width:128px;height:128px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.6);margin-bottom:18px}
.bio-av.ph{display:flex;align-items:center;justify-content:center;background:#1a1a1a;font-size:48px}
.bio-desc{color:#d2d2d2;font-size:14px;line-height:1.6;margin-top:10px;max-width:380px;white-space:pre-wrap}
.bio-socials{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.bio-soc{font-size:12.5px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:9999px;padding:7px 14px;transition:.15s}
.bio-soc:hover{background:var(--sc);border-color:var(--sc)}
.bio-link{align-items:center}
.bio-thumb{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#1a1a1a}
.bio-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:20px;color:#777}
/* 블록 빌더 콘텐츠 */
.bio-h{width:100%;text-align:center;font-weight:800;font-size:18px;margin:8px 0 2px}
.bio-t{width:100%;text-align:center;color:#d2d2d2;font-size:14px;line-height:1.6;white-space:pre-wrap}
.bio-img{width:100%;border-radius:14px;display:block}
.bio-div{width:60px;height:2px;background:rgba(255,255,255,.16);border-radius:2px;margin:6px auto}
.bio-embed-wrap{width:100%}
.bio-embed{width:100%;border:0;border-radius:13px;background:rgba(255,255,255,.04)}
.bio-cd{width:100%;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px}
.bio-cd .lbl{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:6px}
.bio-cd .cd{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bio-product{display:flex;align-items:center;gap:13px;width:100%;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff}
.bio-product:hover{background:rgba(255,255,255,.13)}
.bio-pthumb{width:58px;height:58px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#1a1a1a}
.bio-pthumb.ph{display:flex;align-items:center;justify-content:center;font-size:24px}
.bio-pmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.bio-pmeta b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bio-price{font-size:12.5px;color:var(--accent);font-weight:700}
.bio-pbuy{font-size:12px;color:#bdbdbd;flex:0 0 auto;font-weight:700}
.bio-embed-wrap blockquote{margin:0 auto !important}
/* Bio 테마 프리셋 */
.bio-theme-minimal .fan-bg{display:none}
.bio-theme-minimal{background:#0c0c0e}
.bio-theme-minimal .store,.bio-theme-minimal .bio-product{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.bio-theme-mono .fan-bg{filter:blur(46px) grayscale(1) brightness(.5);transform:scale(1.25)}
.bio-theme-mono{--accent:#e5e5e5}
.bio-theme-neon{background:#06060a}
.bio-theme-neon .fan-bg{filter:blur(60px) saturate(1.6) brightness(.4)}
.bio-theme-neon .store,.bio-theme-neon .bio-product{border-color:var(--accent);box-shadow:0 0 14px -4px var(--accent);background:rgba(255,255,255,.04)}
.bio-theme-neon .fan-title{text-shadow:0 0 18px var(--accent)}
.bio-theme-gradient .fan-bg{display:none}
.bio-theme-gradient{background:linear-gradient(165deg,var(--accent),#0a0a0a 70%)}
.bio-theme-gradient .fan-scrim{background:linear-gradient(180deg,rgba(10,10,10,.2),rgba(10,10,10,.75))}
.fan-actions{width:100%;margin-top:26px;display:flex;flex-direction:column;gap:10px}
.store{display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:700;text-decoration:none;transition:.15s;backdrop-filter:blur(6px)}
.store .lab,.store .lab *{text-decoration:none}
.store:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.store .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.store .lab{flex:1;text-align:left}
.store .cta{font-size:12px;color:#bdbdbd}
.store.buy{background:var(--lime);color:#0A0A0A;border-color:var(--lime);font-size:16px;padding:17px 18px}
.store.buy .cta{color:rgba(0,0,0,.55)}
/* 플랫폼별 클릭 수 배지 */
.store .clk{font-size:11px;font-weight:700;color:#cfcf9a;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9999px;padding:2px 8px;flex:0 0 auto}
/* 플랫폼 SVG 로고 (단색 글리프 → CSS mask 로 브랜드색 입힘). background-color 는 인라인(브랜드색). */
.store .svc-ic{width:22px;height:22px;flex:0 0 auto;display:inline-block;background-color:currentColor}
/* 풀컬러 로고(자체 색 보유) — 원본 그대로 */
.store .svc-img{width:22px;height:22px;flex:0 0 auto;object-fit:contain;border-radius:5px}
.fan-actions.grid .store.svc .svc-img{width:26px;height:26px}
/* svc 행: 로고+이름 중앙정렬, 재생 CTA 는 우측 / 클릭배지는 좌측 고정 */
.fan-actions:not(.grid) .store.svc{justify-content:center;position:relative;gap:10px}
.fan-actions:not(.grid) .store.svc .lab{flex:0 1 auto;text-align:center}
.fan-actions:not(.grid) .store.svc .cta{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.fan-actions:not(.grid) .store.svc .clk{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.fan-actions.grid .store.svc .svc-ic{width:26px;height:26px}
/* 그리드 레이아웃 (musiclink) */
.fan-actions.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fan-actions.grid .store{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px}
.fan-actions.grid .store .lab{flex:none;text-align:center;font-size:13.5px}
.fan-actions.grid .store .cta{font-size:11px}
.fan-actions.grid .store.buy{grid-column:1/-1;flex-direction:row}
@media(max-width:360px){.fan-actions.grid{grid-template-columns:1fr}}
.guide{width:100%;margin:8px 0 4px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-align:left}
.guide-h{font-size:12px;font-weight:700;color:var(--lime);margin-bottom:8px}
.guide ul{margin:0;padding-left:18px;font-size:12.5px;color:#d2d2d2;line-height:1.65}
.store.streaming{align-items:flex-start}
.store.streaming .lab{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.store .prog{display:block;width:160px;max-width:46vw}
.store .prog small{font-size:10.5px;color:#bdbdbd}
.store.mission .chk{font-size:18px;color:#9a9a9a;flex:0 0 auto;transition:.15s}
.store.mission.done{background:rgba(212,255,0,.12);border-color:rgba(212,255,0,.35)}
.store.mission.done .chk{color:var(--lime)}
.store.mission .lab{flex:1;text-align:left}
.store.sched{align-items:center}
.store.sched .cta.dd{font-weight:800;color:var(--lime);font-size:15px}
.tcopy{background:var(--accent);border:0;border-radius:10px;color:#fff;font-weight:700;padding:9px 14px;cursor:pointer;font:inherit;font-size:13px}
.tcopy:hover{filter:brightness(1.1)}
.remind .row{display:flex;gap:8px}
.raid{width:100%;margin:6px 0 18px;padding:16px;border-radius:16px;background:rgba(212,255,0,.08);border:1px solid rgba(212,255,0,.3);text-align:center}
.raid .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);font-weight:700}
.raid .cd{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-top:4px}
.bar{height:8px;background:rgba(255,255,255,.12);border-radius:9999px;overflow:hidden;margin-top:12px}
.bar>i{display:block;height:100%;background:var(--lime)}
.remind{width:100%;margin-top:18px;padding:16px;border-radius:16px;background:rgba(107,63,246,.12);border:1px solid rgba(107,63,246,.4)}
.remind h3{margin:0 0 4px;font-size:15px}.remind p{margin:0 0 10px;font-size:12.5px;color:#cbb8ff}
.remind .row{display:flex;gap:8px}
.remind input{flex:1;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:11px 13px;color:#fff;font:inherit}
.remind button{background:var(--accent);border:0;border-radius:10px;color:#fff;font-weight:700;padding:0 16px;cursor:pointer}
.remind .ics{display:inline-block;margin-top:10px;font-size:12px;color:#cbb8ff;text-decoration:underline}
.share{margin-top:20px;background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer;width:100%}
.share:hover{background:rgba(255,255,255,.08)}
.fan-foot{margin-top:30px;font-size:11px;color:#7a7a7a}
.fan-foot a{color:#9a9a9a}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#141414;border:1px solid #333;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;opacity:0;transition:.25s;z-index:10}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}