/* /notice/live-update — 경기판 대규모 업데이트 글(2026-10-10). comp.css 위에 얹는다.
   편 색은 게임 토큰 그대로(우리 청록 · 상대 주황 · 뺏음 파랑 · 뺏김 빨강). 금색 덩어리 · 반짝이 · 방사형 빛줄기 없음 */
:root{--us:#2FD3C0;--them:#FF8A3D;--won:#4C8DFF;--lost:#FF4D5E;--turf:#0f3b2c;--turf-l:rgba(255,255,255,.28)}

/* ── hero ── */
.lhero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding-top:110px}
.lhero .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:blur(26px) saturate(1.2);transform:scale(1.2);opacity:.55}
.lhero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 4%,rgba(6,6,8,.6) 45%,rgba(6,6,8,.75)),radial-gradient(60% 50% at 75% 45%,rgba(76,141,255,.28),transparent 70%)}
.lhero .in{display:grid;grid-template-columns:1fr minmax(0,330px);gap:clamp(24px,5vw,80px);align-items:end}
.lhero h1{font-size:clamp(64px,13vw,220px);line-height:.84;margin:18px 0 0}
.lhero .ko{font:900 clamp(28px,3.8vw,58px)/1.15 'Noto Sans KR',var(--display);letter-spacing:-.035em;margin:20px 0 0}
.lhero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hphone{margin:0}
.hphone .scr{transform:rotate(3deg)}
.live-pill{position:absolute;left:16px;top:16px;padding:6px 10px;border-radius:99px;background:var(--rose);color:#fff;font:600 11px var(--mono);letter-spacing:.1em}
.live-pill::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:middle;animation:blink 1.2s infinite}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px)}
.toc a{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:99px;background:rgba(13,13,18,.6);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:700 13px 'Noto Sans KR',var(--text);transition:border-color .3s,transform .3s var(--ease)}
.toc a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.toc b{font:500 11px var(--mono);color:var(--cyan)}
@media (max-width:760px){.lhero .in{grid-template-columns:1fr}.hphone{width:min(58%,230px);justify-self:center;order:-1}.hphone .scr{transform:none}.toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}.toc a{flex:none}}
.marquee.tilt.blue{background:linear-gradient(90deg,var(--won),var(--cyan))}

/* ── 세트피스 타일(작은 경기판 그림) ── */
svg .pt{fill:var(--turf);stroke:var(--turf-l);stroke-width:.8}
svg .pl{fill:none;stroke:var(--turf-l);stroke-width:.8}
svg .us circle,svg g.us circle{fill:var(--us)}
svg .them circle{fill:var(--them)}
svg .b{fill:#fff}
svg .pk{fill:#fff;opacity:.6}
svg .off{stroke:#fff;stroke-width:1;stroke-dasharray:3 3;animation:offblink 1.6s infinite}
@keyframes offblink{0%,55%{opacity:0}65%,100%{opacity:1}}
svg .sh{fill:rgba(0,0,0,.45)}
svg .run{fill:none;stroke:var(--us);stroke-width:1.2;stroke-dasharray:3 3;opacity:.7}
svg .cut{stroke-width:3;stroke-linecap:round;stroke-dasharray:50;animation:cut 1.8s ease-out infinite}
svg .cut.won{stroke:var(--won)}svg .cut.lost{stroke:var(--lost);animation-delay:.9s}
@keyframes cut{0%{stroke-dashoffset:50;opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.setp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.spc{position:relative;margin:0;padding:14px;border-radius:22px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--ease),border-color .3s}
.spc:hover{transform:translateY(-6px);border-color:rgba(47,211,232,.4)}
.spc svg{display:block;width:100%;height:auto;border-radius:12px}
.spc figcaption{padding:14px 4px 4px}
.spc figcaption b{display:block;font:900 clamp(18px,1.8vw,24px)/1.25 'Noto Sans KR',var(--text);letter-spacing:-.02em}
.spc figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--fg-2);line-height:1.5}
.spc.hot{border-color:rgba(255,77,94,.35)}
.spc .beat{position:absolute;right:22px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--lost);animation:beat 1.1s infinite}
@keyframes beat{0%,40%,100%{transform:scale(1);opacity:.8}10%{transform:scale(1.5);opacity:1}25%{transform:scale(1.25)}}
.var{display:flex;align-items:center;gap:8px;justify-content:center;margin:0 auto;width:max-content;max-width:100%;padding:9px 14px;border-radius:99px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);font:700 13px 'Noto Sans KR',var(--text)}
.var i{width:8px;height:8px;border-radius:50%;background:var(--fg-2);animation:blink 1s infinite}
.var.done{margin-top:10px;border-color:rgba(76,141,255,.6)}.var.done i{background:var(--won);animation:none}
.spc:has(.var){display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,var(--turf),var(--bg-2) 70%)}
.spc:has(.var) .var:first-child{margin-top:auto}
.spc:has(.var) .var.done{animation:vardone 3.2s infinite}
@keyframes vardone{0%,45%{opacity:0;transform:translateY(6px)}55%,100%{opacity:1;transform:none}}
@media (max-width:760px){.setp{grid-template-columns:repeat(2,1fr)}.spc{padding:10px;border-radius:18px}.spc figcaption b{font-size:16px}.spc figcaption span{font-size:12.5px}.var{font-size:11px;padding:7px 10px}}
.phone.wide{max-width:320px;margin:clamp(40px,6vw,80px) auto 0}

/* ── 경기판 읽기 ── */
.reads{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.rd{padding:16px;border-radius:22px;border:1px solid var(--line);background:var(--bg-2)}
.rd svg{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:14px}
.rd b{display:block;font:900 20px/1.3 'Noto Sans KR',var(--text)}
.rd p{margin:6px 0 0;color:var(--fg-2);font-size:14px;line-height:1.55}
.c-won{color:var(--won);font-weight:800}.c-lost{color:var(--lost);font-weight:800}
@media (max-width:900px){.reads{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.reads{grid-template-columns:1fr}.rd{display:grid;grid-template-columns:120px 1fr;gap:4px 14px;align-items:center}.rd svg{grid-row:span 2;margin:0}.rd p{margin:0;font-size:13px}.rd b{font-size:17px;align-self:end}}

/* ── 소리 패드 ── */
.pads{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:880px;margin:0 auto}
.pad{position:relative;overflow:hidden;text-align:left;padding:18px 16px 16px;border-radius:20px;background:rgba(13,13,18,.72);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--fg);cursor:pointer;transition:transform .25s var(--ease),border-color .3s;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end}
.pad.big{grid-column:span 2;grid-row:span 2;min-height:220px;background:linear-gradient(160deg,rgba(76,141,255,.3),rgba(13,13,18,.8) 60%)}
.pad:hover{border-color:var(--cyan)}
.pad:active{transform:scale(.97)}
.pad .en{font:800 clamp(20px,1.9vw,28px)/1 var(--display);font-stretch:105%;letter-spacing:-.02em;white-space:nowrap}
.pad.big .en{font-size:clamp(48px,7vw,96px)}
.pad b{font:700 13px 'Noto Sans KR',var(--text);color:var(--fg-2);margin-top:6px}
.pad .wave{position:absolute;right:14px;top:14px;display:flex;gap:3px;align-items:flex-end;height:18px}
.pad .wave::before,.pad .wave::after{content:"";width:3px;height:6px;border-radius:2px;background:var(--fg-3)}
.pad.on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 20px 60px -20px rgba(47,211,232,.6)}
.pad.on .wave::before,.pad.on .wave::after{background:var(--cyan);animation:eq .6s ease-in-out infinite}
.pad.on .wave::after{animation-delay:-.3s}
.pad.on .en{animation:shout .5s var(--ease)}
@keyframes shout{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
.crowdrow{display:flex;justify-content:center;margin-top:18px}
.eqs{display:inline-flex;gap:2px;align-items:flex-end;height:14px;margin-right:8px}
.eqs i{width:3px;height:4px;border-radius:1px;background:currentColor}
#crowdBtn.on .eqs i{animation:eq .9s ease-in-out infinite}#crowdBtn.on .eqs i:nth-child(2){animation-delay:-.3s}#crowdBtn.on .eqs i:nth-child(3){animation-delay:-.6s}
#crowdBtn.on{border-color:var(--cyan);color:var(--cyan)}
.snd-facts{list-style:none;padding:0;margin:clamp(32px,4vw,52px) auto 0;max-width:880px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.snd-facts li{padding:18px 20px;border-radius:18px;background:rgba(13,13,18,.6);border:1px solid var(--line)}
.snd-facts b{display:block;font:800 16px/1.35 'Noto Sans KR',var(--text)}
.snd-facts span{color:var(--fg-2);font-size:13.5px}
@media (max-width:700px){.pads{grid-template-columns:repeat(2,1fr)}.pad.big{min-height:160px}.snd-facts{grid-template-columns:1fr}}

/* ── 리플레이 ── */
.rp-grid{display:grid;grid-template-columns:1fr minmax(0,320px);gap:clamp(30px,6vw,100px);align-items:center}
.rp-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:8px}
.rp-list li{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 20px;border-radius:18px;background:var(--bg-2);border:1px solid var(--line)}
.rp-list b{font:800 clamp(17px,1.6vw,22px) var(--display);font-stretch:110%}
.rp-list span{color:var(--fg-2);font-size:14px;text-align:right}
.rbar{position:absolute;left:12px;right:12px;bottom:14px;padding:12px;border-radius:16px;background:rgba(6,6,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.rbar .trk{position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.15);margin:6px 4px 14px}
.rbar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--cyan);animation:prog 9s linear infinite}
@keyframes prog{from{width:0}to{width:100%}}
.rbar .dot{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid #000}
.rbar .dot.g{background:#fff}.rbar .dot.p{background:var(--lost)}
.rbar .ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:700 11px 'Noto Sans KR',var(--text)}
.rbar .sp{display:inline-flex;border-radius:99px;background:rgba(255,255,255,.08);padding:2px}
.rbar .sp i{font:600 11px var(--mono);font-style:normal;padding:5px 8px;border-radius:99px;color:var(--fg-2)}
.rbar .sp i.on{background:var(--fg);color:#000}
.rbar .sk{padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.08)}
@media (max-width:760px){.rp-grid{grid-template-columns:1fr}.rp-grid .phone{width:min(80%,300px);justify-self:center}}

/* ── 결산 · 인터뷰 ── */
.press{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(16px,3vw,40px);align-items:stretch}
.mgz{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;isolation:isolate;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);transform:rotate(-2deg)}
.mgz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mgz::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,8,.55),transparent 30%,transparent 50%,rgba(6,6,8,.92))}
.mtop{position:absolute;left:0;right:0;top:0;padding:20px 22px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.25)}
.mtop b{font:900 clamp(26px,3.4vw,44px)/1 var(--display);font-stretch:125%;letter-spacing:-.03em}
.mtop span{font:700 12px 'Noto Sans KR',var(--text);color:var(--fg-2)}
.mbot{position:absolute;left:0;right:0;bottom:0;padding:22px}
.mbot .mm{display:inline-block;padding:5px 10px;border-radius:99px;background:#fff;color:#000;font:800 11px 'Noto Sans KR',var(--text)}
.mbot h3{font:900 clamp(24px,3vw,40px)/1.15 'Noto Sans KR',var(--display);letter-spacing:-.04em;margin:12px 0 8px}
.mbot .ms{font:600 13px var(--mono);color:var(--fg-2)}
.iv{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;background:var(--bg-2);border:1px solid var(--line)}
.iv-face{display:flex;gap:14px;align-items:center}
.iv-face img{width:76px;height:76px;object-fit:cover;object-position:50% 20%;border-radius:50%;border:2px solid rgba(255,255,255,.15);transition:opacity .3s}
.iv-name b{display:block;font:900 20px 'Noto Sans KR',var(--text)}
.iv-name span{color:var(--fg-3);font-size:13px}
.iv-chat{display:flex;flex-direction:column;gap:8px;min-height:230px}
.iv-chat p{margin:0;max-width:84%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.45;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s var(--ease)}
.iv-chat p.in{opacity:1;transform:none}
.iv-chat .q{background:var(--bg-3);border-bottom-left-radius:6px}
.iv-chat .a{align-self:flex-end;background:var(--fg);color:#000;border-bottom-right-radius:6px}
.iv-chat .hl{max-width:100%;margin-top:6px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);font:900 17px/1.35 'Noto Sans KR',var(--text)}
.iv-chat .hl small{display:block;font:500 10px var(--mono);letter-spacing:.14em;color:var(--fg-3);margin-bottom:6px}
.iv-cap{margin:0;color:var(--fg-3);font-size:12.5px}
.reps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(18px,3vw,30px)}
.rep{position:relative;text-align:left;padding:0;border-radius:20px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);color:var(--fg);cursor:pointer;transition:transform .5s var(--ease),border-color .3s}
.rep img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;transition:transform 1s var(--ease)}
.rep:hover img{transform:scale(1.05)}
.rep b{display:block;padding:12px 14px 0;font:900 17px 'Noto Sans KR',var(--text)}
.rep span{display:block;padding:2px 14px 14px;font-size:12.5px;color:var(--fg-2)}
.rep.on{border-color:var(--fg);transform:translateY(-6px)}
@media (max-width:760px){.press{grid-template-columns:1fr}.mgz{transform:none;max-width:420px}.reps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 8px;scrollbar-width:none}.rep{scroll-snap-align:start}}

/* ── 응원 · 관전 ── */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.tgc{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;isolation:isolate;background:#000}
.tgc > img,.tgc > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.tgc:hover > img,.tgc:hover > video{transform:scale(1.05)}
.tgc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,6,8,.95) 22%,rgba(6,6,8,.3) 60%,rgba(6,6,8,.5))}
.tgc .c{position:absolute;left:0;right:0;bottom:0;padding:18px}
.tgc .c b{display:block;font:900 clamp(18px,1.7vw,23px)/1.25 'Noto Sans KR',var(--text)}
.tgc .c span{display:block;margin-top:5px;color:var(--fg-2);font-size:13.5px;line-height:1.5}
.tgc .t{position:absolute;left:16px;top:16px;font:600 11px var(--mono);letter-spacing:.1em;padding:6px 10px;border-radius:99px}
.tgc .t.live{background:var(--rose);color:#fff}
.tgc .t.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:middle;animation:blink 1.2s infinite}
.cheers{position:absolute;left:14px;right:14px;top:16px;display:grid;gap:8px}
.cheers p{margin:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:rgba(13,13,18,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;animation:cheer 6s infinite}
.cheers p:nth-child(2){animation-delay:-2s}.cheers p:nth-child(3){animation-delay:-4s}
.cheers b{font-weight:800;color:var(--us);white-space:nowrap}
.cheers .lk{margin-left:auto;font:600 12px var(--mono);color:var(--us);white-space:nowrap}
@keyframes cheer{0%,100%{transform:translateX(0);opacity:1}45%{transform:translateX(0);opacity:1}50%{transform:translateX(-8px);opacity:.55}60%{transform:translateX(0);opacity:1}}
.tbl{position:absolute;left:14px;right:14px;top:16px;margin:0;padding:8px;list-style:none;border-radius:16px;background:rgba(13,13,18,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line)}
.tbl li{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;font:700 13px 'Noto Sans KR',var(--text)}
.tbl li i{font:600 12px var(--mono);font-style:normal;color:var(--fg-3);width:14px}
.tbl li b{margin-left:auto;font:600 13px var(--mono)}
.tbl li.me{background:rgba(47,211,192,.16);color:var(--us)}
@media (max-width:900px){.tg{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}.tgc{scroll-snap-align:start}}

/* ── 아내 ── */
.k-eyebrow.rose{color:var(--rose)}
.wf{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.wf-img{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:540/723;box-shadow:0 40px 100px -30px rgba(255,93,143,.35)}
.wf-img img{width:100%;height:100%;object-fit:cover}
.bub{display:flex;flex-direction:column;gap:8px;margin:26px 0 12px;max-width:420px}
.bub p{margin:0;max-width:82%;padding:11px 14px;border-radius:18px;font-size:15px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s var(--ease)}
.bub p.in{opacity:1;transform:none}
.bub .her{background:var(--bg-3);border-bottom-left-radius:6px}
.bub .me{align-self:flex-end;background:var(--rose);color:#000;border-bottom-right-radius:6px}
@media (max-width:760px){.wf{grid-template-columns:1fr}.wf-img{width:min(70%,280px);justify-self:center}}

/* ── 계정 창고 ── */
.vault{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vc{padding:clamp(20px,3vw,32px);border-radius:24px;border:1px solid var(--line);background:var(--bg-2)}
.vc .vh{display:block;font:900 clamp(18px,2vw,26px)/1.3 'Noto Sans KR',var(--text);margin-bottom:16px}
.vc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.vc li{padding:10px 16px;border-radius:99px;font:800 15px 'Noto Sans KR',var(--text);background:var(--bg-3)}
.vc.share{border-color:rgba(47,211,232,.4);background:linear-gradient(160deg,rgba(47,211,232,.14),var(--bg-2) 60%)}
.vc.share li{background:rgba(47,211,232,.16);color:var(--cyan)}
@media (max-width:600px){.vault{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){svg animate{display:none}.spc .beat,svg .cut,svg .off,.cheers p,.rbar .fill,.live-pill::before{animation:none}.iv-chat p,.bub p{opacity:1;transform:none}}