/* K리그어시스트 실시간 음성중계 — 프로토타입 디자인 시스템 (제안용) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
:root {
  --ink:#0f1522; --text:#1f2733; --muted:#66707f; --line:#e3e7ee; --bg:#f4f6f9; --card:#ffffff;
  --navy:#0b2545; --navy2:#12386b; --blue:#1467d6; --live:#e0242b; --green:#14805a; --amber:#b7791f; --focus:#ff8a00;
  --r:18px; --fs:100%; --shadow:0 10px 30px rgba(11,37,69,.10);
}
* { box-sizing:border-box; }
html { font-size:var(--fs); -webkit-text-size-adjust:100%; }
body { margin:0; font-family:Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; color:var(--text); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; }
body.hc { --text:#000; --muted:#000; --line:#000; --bg:#fff; --card:#fff; --navy:#000; --navy2:#000; --blue:#000; --live:#000; --green:#000; --amber:#000; --shadow:none; }
body.hc .hero { background:#000 !important; }
body.hc .btn, body.hc .chip, body.hc .item { border:2px solid #000 !important; }
a { color:inherit; }
:focus-visible { outline:4px solid var(--focus); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; padding:.6rem 1rem; border:2px solid var(--focus); z-index:50; font-weight:700; }
.skip:focus { left:12px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.top { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); }
.top .in { max-width:1120px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mark { width:34px; height:34px; border-radius:9px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:900; font-size:15px; letter-spacing:-.5px; }
.brand b { font-size:15px; letter-spacing:.2px; color:var(--navy); }
.brand small { display:block; font-size:11.5px; color:var(--muted); font-weight:600; }
.nav { display:none; gap:22px; margin-left:22px; font-size:15px; font-weight:600; color:#3a4250; }
.nav a { text-decoration:none; padding:6px 2px; }
.nav a.cur { color:var(--live); border-bottom:2px solid var(--live); }
.a11y { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:480px) { .a11y { margin-left:0; width:100%; justify-content:flex-start; } }
.a11y button { white-space:nowrap; border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:7px 11px; font-weight:700; font-size:12.5px; color:var(--text); cursor:pointer; }
.a11y button[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
@media (min-width:900px) { .nav { display:flex; } }

main { max-width:1120px; margin:0 auto; padding:16px 16px 120px; }
@media (min-width:900px) { main { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; padding-top:28px; } .span2 { grid-column:1/-1; } }

/* hero (now live) */
.hero { position:relative; overflow:hidden; border-radius:24px; background:linear-gradient(135deg,#0b2545 0%,#12386b 55%,#0d5aa7 100%); color:#fff; padding:22px 20px 24px; box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; border:44px solid rgba(255,255,255,.07); }
.hero .eyebrow { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; opacity:.92; }
.live { display:inline-flex; align-items:center; gap:7px; background:var(--live); color:#fff; font-weight:800; font-size:12.5px; padding:5px 11px; border-radius:999px; letter-spacing:.3px; }
.live .dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.7)} }
.live.off { background:rgba(255,255,255,.18); } .live.off .dot { animation:none; opacity:.7; }
.teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:18px 0 6px; }
.team { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.crest { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:20px; color:#fff; border:3px solid rgba(255,255,255,.75); }
.team b { font-size:15px; line-height:1.2; }
.team small { font-size:11.5px; opacity:.8; }
.vs { font-size:13px; font-weight:800; opacity:.7; text-align:center; }
.vs .min { display:block; font-size:22px; font-weight:900; opacity:1; letter-spacing:-.5px; }
.meta { text-align:center; font-size:13.5px; opacity:.9; margin:2px 0 14px; }
.wave { display:flex; justify-content:center; align-items:flex-end; gap:4px; height:34px; margin:6px auto 12px; }
.wave i { width:5px; height:8px; border-radius:3px; background:rgba(255,255,255,.75); transition:height .2s; }
.playing .wave i { animation:bar 1s ease-in-out infinite; }
.wave i:nth-child(2n){animation-delay:.15s} .wave i:nth-child(3n){animation-delay:.3s} .wave i:nth-child(5n){animation-delay:.45s}
@keyframes bar { 0%,100%{height:8px} 50%{height:32px} }
.play { display:block; margin:0 auto; width:132px; height:132px; border-radius:50%; border:0; cursor:pointer; background:#fff; color:var(--navy); box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 0 10px rgba(255,255,255,.14); position:relative; }
.play svg { width:54px; height:54px; }
.play[aria-pressed="true"] { background:var(--live); color:#fff; box-shadow:0 12px 40px rgba(224,36,43,.45), 0 0 0 10px rgba(255,255,255,.14); }
.play-label { text-align:center; font-weight:800; font-size:17px; margin:12px 0 14px; }
.ctrls { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px; margin:0 auto; }
.btn { min-height:54px; border-radius:14px; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn.tolive { grid-column:1/-1; background:#fff; color:var(--navy); border-color:#fff; }
.status { margin:14px auto 0; max-width:520px; background:rgba(0,0,0,.28); border-radius:12px; padding:11px 14px; font-size:14px; font-weight:600; display:flex; gap:10px; align-items:flex-start; }
.status .ic { flex:none; width:20px; height:20px; border-radius:50%; background:#fff; color:var(--navy); display:grid; place-items:center; font-size:12px; font-weight:900; margin-top:1px; }

/* sections */
.sec { margin-top:22px; }
.sec h2 { font-size:17px; margin:0 0 10px; letter-spacing:-.2px; display:flex; align-items:center; justify-content:space-between; }
.sec h2 a { font-size:13px; color:var(--blue); font-weight:700; text-decoration:none; }
.item { display:flex; align-items:center; gap:14px; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:10px; text-decoration:none; color:inherit; }
.item .crest { width:46px; height:46px; font-size:15px; border-width:2px; border-color:#fff; box-shadow:0 0 0 1.5px var(--line); }
.item .crest.dual { position:relative; }
.item .crest.dual span { position:absolute; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900; color:#fff; border:2px solid #fff; }
.item .crest.dual span:first-child { left:-4px; top:-2px; } .item .crest.dual span:last-child { right:-6px; bottom:-4px; }
.item .t { flex:1; min-width:0; }
.item .t b { display:block; font-size:16px; letter-spacing:-.2px; }
.item .t small { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.pill { flex:none; font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; background:#eef2f8; color:var(--navy); }
.pill.live { background:#fdeaea; color:var(--live); }
.pill.soon { background:#fff4e0; color:var(--amber); }
.item .go { flex:none; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; }
.card { background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:18px; }
.ways { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.way { background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); padding:14px; }
.way .ic { width:38px; height:38px; border-radius:10px; background:#eef2f8; color:var(--navy); display:grid; place-items:center; font-weight:900; margin-bottom:8px; }
.way b { display:block; font-size:15px; } .way small { color:var(--muted); font-size:12.5px; }
details { border-top:1px solid var(--line); }
details:first-of-type { border-top:0; }
summary { list-style:none; cursor:pointer; padding:14px 0; font-weight:800; font-size:15px; display:flex; justify-content:space-between; align-items:center; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-size:20px; color:var(--muted); }
details[open] summary::after { content:"–"; }
details p, details ol { margin:0 0 14px; color:#3a4250; font-size:14.5px; }
details ol { padding-left:20px; }

/* floating CTA */
.fab { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:30; display:flex; gap:8px; max-width:calc(100% - 24px); background:#fff; padding:8px; border-radius:999px; box-shadow:0 12px 36px rgba(11,37,69,.25); border:1px solid var(--line); }
.fab a, .fab button { white-space:nowrap; border:0; border-radius:999px; padding:12px 16px; font-weight:800; font-size:14.5px; text-decoration:none; cursor:pointer; display:flex; align-items:center; gap:8px; }
.fab .primary { background:var(--navy); color:#fff; }
.fab .ghost { background:#f1f4f9; color:var(--navy); }

footer { max-width:1120px; margin:0 auto; padding:18px 16px 40px; color:var(--muted); font-size:12.5px; text-align:center; }

/* form */
.steps { display:flex; gap:6px; margin:6px 0 16px; }
.steps span { flex:1; height:6px; border-radius:3px; background:#dfe4ec; } .steps span.on { background:var(--blue); }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:800; font-size:14.5px; margin-bottom:6px; }
.req { color:var(--live); font-size:12.5px; margin-left:4px; }
.field input, .field select, .field textarea { width:100%; min-height:52px; font-size:16px; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff; font-family:inherit; color:var(--text); }
.hint { font-size:12.5px; color:var(--muted); margin-top:5px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1.5px solid var(--line); border-radius:999px; padding:10px 14px; font-size:14.5px; font-weight:700; background:#fff; cursor:pointer; color:var(--text); }
.chip[aria-pressed="true"], .chip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; }
.check input { width:24px; height:24px; margin:0; flex:none; accent-color:var(--navy); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.bbtn { min-height:54px; border-radius:14px; border:1.5px solid var(--line); background:#f1f4f9; color:var(--navy); font-weight:800; font-size:16px; cursor:pointer; }
.bbtn.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.err { color:var(--live); font-weight:700; font-size:13px; margin-top:6px; }

/* admin */
.admin { max-width:1200px; margin:0 auto; padding:20px 16px 60px; display:grid; grid-template-columns:220px 1fr; gap:20px; }
.side { background:var(--navy); color:#fff; border-radius:16px; padding:18px 12px; align-self:start; }
.side a { display:block; color:#dfe6f2; text-decoration:none; padding:10px 12px; border-radius:10px; font-size:14px; }
.side a.on { background:rgba(255,255,255,.14); color:#fff; font-weight:800; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 16px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.kpi .n { font-size:24px; font-weight:900; color:var(--navy); } .kpi .l { font-size:12.5px; color:var(--muted); }
table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
th { text-align:left; color:var(--muted); font-weight:700; padding:12px 10px; border-bottom:1px solid var(--line); font-size:12.5px; background:#fafbfd; }
td { padding:13px 10px; border-bottom:1px solid #eef1f5; vertical-align:middle; }
.sw { width:46px; height:26px; border-radius:13px; background:#cfd5de; position:relative; display:inline-block; border:0; cursor:pointer; }
.sw::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s; }
.sw[aria-checked="true"] { background:var(--green); } .sw[aria-checked="true"]::after { left:23px; }
.abtn { border:1.5px solid var(--line); background:#fff; border-radius:9px; padding:7px 12px; font-weight:700; font-size:13px; cursor:pointer; }
.abtn.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
@media (max-width:820px) { .admin { grid-template-columns:1fr; } .kpis { grid-template-columns:1fr 1fr; } table { font-size:12.5px; } }