/* 라이브픽 · design system (owner-pinned trading-app world) */
:root{
  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:32px;
  --point:#F59E0B; --point-on-dark:#F59E0B;
  --fx-glow:#22C55E; --fx-title:#F59E0B;
  --danger:#FF7A7A; --danger-solid:#C82F2F;
  --primary-on-dim:#9AA2FF;
  --bg:#09090B; --bg-1:#0E0F12; --surface:#15161A; --surface-2:#1C1D22; --surface-3:#24252B;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11);
  --text:#F4F5F7; --text-2:#A5A8AF; --text-3:#8A8E97;
  --primary:#4F5CF3; --primary-2:#6370FF; --primary-3:#3E4AD9; --primary-dim:rgba(79,92,243,.16);
  --up:#16D07A; --up-dim:rgba(22,208,122,.13); --up-on-dim:#16D07A; --down:#FF5D5D; --down-dim:rgba(255,93,93,.13); --down-on-dim:#FF5D5D;
  --gold:#F6B73C; --silver:#C3C7D0; --bronze:#CD7F4E; --pink:#FF4FCB;
  --r:18px; --r-sm:12px; --r-xs:8px; --pill:999px;
  --shadow:0 10px 30px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  --nav-h:72px; --safe-b:env(safe-area-inset-bottom,0px);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"ss01" 1;letter-spacing:-0.01em}
button,input,textarea{font:inherit;color:inherit}
/* 글자 굵기 한 단계 낮춤(운영자 2026-09-30: 전체가 너무 두껍다). 기본 b/strong(700)도 맞춘다. */
b,strong{font-weight:640}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:rgba(79,92,243,.45)}
:focus-visible{outline:2px solid var(--primary-2);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--text-2)} .dim{color:var(--text-3)}
.hide{display:none!important}

/* ---------- boot ---------- */
.boot{min-height:100dvh;display:grid;place-content:center;gap:14px;justify-items:center}

@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.75}}

/* ---------- shell ---------- */
.app{min-height:100dvh}
.shell{max-width:520px;margin:0 auto;min-height:100dvh;padding:0 0 calc(var(--nav-h) + var(--safe-b) + 16px)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px 10px;background:linear-gradient(var(--bg) 70%,rgba(9,9,11,0));backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:9px;font-weight:680;font-size:18px;letter-spacing:-.03em}
.brand-mark{width:28px;height:28px;border-radius:50%;background:var(--pink);position:relative;flex:none}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;top:10px;width:8px;height:8px;background:#fff}
.brand-mark::before{left:6px;border-radius:4px 0 0 4px}.brand-mark::after{left:14px;border-radius:0 4px 4px 0}

.live-dot{display:inline-block;vertical-align:middle;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(22,208,122,.6);animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(22,208,122,.55)}100%{box-shadow:0 0 0 8px rgba(22,208,122,0)}}
.view{padding:0 16px;animation:enter .32s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- icon buttons / buttons ---------- */
.ibtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.ibtn:hover{background:var(--surface-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;font-weight:600;font-size:15px;background:var(--surface-2);border:1px solid var(--line);transition:transform .12s ease,background .15s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--primary);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(79,92,243,.35)}
.btn.primary:hover{background:var(--primary-2)}
.btn.primary:disabled{background:var(--surface-3);color:var(--text-3);box-shadow:none;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:var(--line-2)}
.btn.sm{height:38px;padding:0 14px;font-size:14px;border-radius:12px}
.btn.block{width:100%}
.btn.pink{background:var(--pink);color:#fff;border-color:transparent}

/* ---------- balance ---------- */
.balance{padding:8px 2px 6px}
.balance .amt{font-size:38px;font-weight:680;letter-spacing:-.045em;line-height:1.1;display:flex;align-items:baseline;gap:2px}
.balance .amt .cur{font-size:26px;color:var(--text-3);font-weight:600;margin-right:2px}

.balance .delta{display:flex;align-items:center;gap:8px;margin-top:4px;font-weight:600;font-size:15px}
.balance .delta .per{color:var(--text-3);font-weight:520}
.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line)}
.segmented button{height:30px;padding:0 12px;border-radius:var(--pill);font-size:13px;font-weight:600;color:var(--text-3);white-space:nowrap}
.segmented button.on{background:var(--surface-3);color:var(--text)}
.segmented.lg button{height:36px;padding:0 16px;font-size:14px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;row-gap:8px}

/* ---------- sparkline ---------- */

@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- section ---------- */
.sec{margin-top:22px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
/* 모바일은 위 막대가 이미 화면 이름을 말하므로 같은 제목을 한 번 더 쓰지 않는다 (PC 는 막대 제목이 없어 그대로 둔다) */
@media (max-width:959px){.sec-h.pg-h h2,div.lg-head h1{display:none}.sec-h.pg-h{justify-content:flex-end}.sec-h.pg-h.solo{display:none}}
.sec-h h2{margin:0;font-size:17px;font-weight:680;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.sec-h .more{color:var(--text-2);font-size:13px;font-weight:520;display:inline-flex;align-items:center;gap:2px;padding:7px 0 7px 8px;margin:-7px 0}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:680;letter-spacing:.01em}
.tag.new{background:var(--primary-dim);color:var(--primary-2)}
.tag.auto{background:rgba(255,255,255,.08);color:var(--text-2)}
.tag.win{background:var(--up-dim);color:var(--up-on-dim)} .tag.loss{background:var(--down-dim);color:var(--down-on-dim)}
.tag.open{background:var(--primary-dim);color:var(--primary-2)} .tag.push{background:rgba(255,255,255,.08);color:var(--text-2)}
.tag.home{background:var(--up-dim);color:var(--up-on-dim)} .tag.away{background:rgba(255,158,71,.16);color:#FF9E47}

/* ---------- cards / rails ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start;flex:0 0 auto}

.league-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:760;color:#fff;flex:none;letter-spacing:-.02em;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ---------- avatar ---------- */
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:680;color:#fff;flex:none;position:relative;font-size:15px;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.avatar.sm{width:28px;height:28px;font-size:11px}.avatar.md{width:48px;height:48px;font-size:18px}.avatar.lg{width:72px;height:72px;font-size:26px}.avatar.xl{width:84px;height:84px;font-size:30px}
.avatar .chk{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:var(--primary);display:grid;place-items:center;border:2px solid var(--bg)}
.avatar .chk svg{width:9px;height:9px}
.a0{background:#FF4FCB}.a1{background:#4F5CF3}.a2{background:#16D07A}
.a3{background:#F6B73C}.a4{background:#FF5D5D}.a5{background:#22D3EE}
.a6{background:#A78BFA}.a7{background:#F472B6}.a8{background:#34D399}
.a9{background:#FBBF24}.a10{background:#60A5FA}.a11{background:#C3C7D0}

/* ---------- tabs / chips ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:8px 0 12px}
.tabs button{flex:1;height:44px;font-weight:600;font-size:15px;color:var(--text-3);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tabs button.on{color:var(--text)}
.tabs button.on::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--primary)}
.tabs .cnt{font-size:11px;font-weight:680;padding:1px 6px;border-radius:6px;background:var(--surface-2);color:var(--text-2)}
.tabs button.on .cnt{background:var(--primary-dim);color:var(--primary-on-dim)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chip.on{background:var(--text);color:var(--bg);border-color:transparent}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip.icon{width:36px;padding:0;justify-content:center}

/* ---------- match rows ---------- */
.mlist{display:flex;flex-direction:column;gap:8px}
.mrow{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:12px 12px 12px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:background .15s ease}
.mrow:hover{background:var(--surface-2)}
.mrow .when{display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:680;font-size:13px}
.mrow .when .lg{width:100%;height:18px;border-radius:5px;font-size:9px;display:grid;place-items:center;color:#fff;letter-spacing:-.02em;overflow:hidden;white-space:nowrap;padding:0 3px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.mrow .when .t{color:var(--text-2)}
.mrow .when .min{color:var(--up);display:inline-flex;align-items:center;gap:4px}
.mrow .when .fin{color:var(--text-3);font-size:12px}
.mrow .teams{display:flex;flex-direction:column;gap:6px;min-width:0}
.mrow .team{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:14.5px;min-width:0}
.mrow .team .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .team .s{font-weight:680;font-size:16px;min-width:18px;text-align:right}
.mrow .team.lead .s{color:var(--text)} .mrow .team:not(.lead) .s{color:var(--text-3)}
.mrow .odds{display:flex;flex-direction:column;gap:6px}
.odd{height:30px;min-width:64px;padding:0 10px;border-radius:10px;background:var(--surface-3);font-weight:680;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,transform .1s}
.odd .lbl{color:var(--text-3);font-size:11px;font-weight:600}
.odd:hover{background:var(--primary);color:#fff}.odd:hover .lbl{color:rgba(255,255,255,.75)}
.odd:active{transform:scale(.96)}
.odd.off{opacity:.45;pointer-events:none}
.odd.picked{background:var(--primary);color:#fff;box-shadow:0 0 0 2px rgba(79,92,243,.35)}
.odd.picked .lbl{color:rgba(255,255,255,.75)}
.mrow .picks-n{font-size:11px;color:var(--text-3);text-align:center;margin-top:2px;font-weight:520}
.date-h{display:flex;align-items:center;gap:8px;font-weight:680;color:var(--text-2);font-size:13px;margin:14px 2px 8px}
.date-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- leaderboard ---------- */
.myrank{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:12px 0}
.myrank .lbl{font-size:13px;color:var(--text-2);font-weight:520}
.myrank .rk{font-weight:680;font-size:18px;color:var(--primary-2);letter-spacing:-.02em}
.myrank .val{margin-left:auto;min-width:0;max-width:56%;font-weight:680;font-size:17px;letter-spacing:-.02em;text-align:right}
.myrank .val small{display:block;font-size:11px;line-height:1.5;color:var(--text-3);font-weight:520;margin-top:2px}
.lb{display:flex;flex-direction:column}
.lbrow{display:grid;grid-template-columns:34px 48px minmax(0,1fr) minmax(0,36%);gap:10px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line)}
.lbrow:last-child{border-bottom:0}
.lbrow .rank{display:grid;place-items:center;font-weight:680;color:var(--text-2);font-size:15px}
.medal{width:26px;height:30px;position:relative;display:grid;place-items:center;font-size:12px;font-weight:760;color:#1a1200}
.medal::before{content:"";position:absolute;inset:0;border-radius:50% 50% 45% 45%;background:var(--m)}
.medal::after{content:"";position:absolute;left:5px;right:5px;bottom:-6px;height:12px;background:var(--m);clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%);opacity:.85}
.medal span{position:relative}
.medal.g{--m:var(--gold)}.medal.s{--m:var(--silver)}.medal.b{--m:var(--bronze)}
.lbrow .who{min-width:0}
.lbrow .who .n{font-weight:680;font-size:15px;display:flex;align-items:center;gap:6px;min-width:0}
.lbrow .who .n .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbrow .who .n .tag{flex:none}
.lbrow .who .h{font-size:13px;color:var(--text-3);font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbrow .val{text-align:right}
.lbrow .val .big{font-weight:680;font-size:17px;letter-spacing:-.02em;line-height:1.1}
.lbrow .val .sub{font-size:12px;color:var(--text-3);font-weight:520;margin-top:2px;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.stack{display:inline-flex;align-items:center}
.stack .league-dot{width:20px;height:20px;border:2px solid var(--bg);margin-left:-6px;
  color:transparent;text-shadow:none}
.stack .league-dot:first-child{margin-left:0}
.stack .more{height:20px;padding:0 7px;border-radius:10px;background:var(--surface-3);font-size:10.5px;font-weight:680;color:var(--text-2);display:inline-flex;align-items:center;margin-left:-6px;border:2px solid var(--bg)}
.qual{font-size:12px;color:var(--text-3);font-weight:520;margin:0 2px 6px}

/* ---------- feed ---------- */
.feed{display:flex;flex-direction:column}
.fitem{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line)}
.fitem .head{display:flex;align-items:center;gap:8px;font-weight:680;font-size:15px;flex-wrap:wrap}
.fitem .head .ago{color:var(--text-3);font-size:13px;font-weight:520}
.fitem .body{margin-top:8px;display:flex;align-items:center;gap:10px}
.fitem .body .m{font-weight:600;font-size:14.5px;min-width:0}
.fitem .body .m .sub{display:block;font-size:12.5px;color:var(--text-3);font-weight:520;margin-top:2px}
.fitem .body .amt{margin-left:auto;font-weight:680;font-size:15px;white-space:nowrap;text-align:right}
.fitem .body .amt small{display:block;font-size:11px;color:var(--text-3);font-weight:520}
.fitem .note{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--text-2)}

/* ---------- profile ---------- */

.stats{display:flex;gap:16px;font-size:14.5px;color:var(--text-2);flex-wrap:wrap}
.stats b{color:var(--text);font-weight:680;margin-right:3px}
.meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-3);font-size:13px;font-weight:520;padding-bottom:12px;border-bottom:1px solid var(--line)}
.meta span{display:inline-flex;align-items:center;gap:5px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.kpi > div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.kpi .k{font-size:12px;color:var(--text-3);font-weight:600}
.kpi .v{font-size:clamp(15px,4.6vw,19px);font-weight:680;letter-spacing:-.02em;margin-top:3px;white-space:nowrap}
.plist{display:flex;flex-direction:column}

/* ---------- match detail ---------- */
.mhero{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px 16px 16px;text-align:center}
.mhero .lg{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text-2);font-size:13px}
.mhero .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:14px}
.mhero .tm{font-weight:680;font-size:clamp(15px,4.5vw,18px);letter-spacing:-.02em;line-height:1.2;word-break:keep-all;overflow-wrap:anywhere}
.mhero .tm small{display:block;color:var(--text-3);font-size:12px;font-weight:520;margin-top:4px}
.mhero .sc{font-size:40px;font-weight:760;letter-spacing:-.05em;line-height:1;min-width:96px}
.mhero .sc small{display:flex;width:fit-content;align-items:center;justify-content:center;gap:5px;
  margin:7px auto 0;padding:3px 9px;border-radius:var(--pill);background:var(--up-dim);
  font-size:11.5px;font-weight:680;color:var(--up);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.mhero .sc.sched small{background:var(--surface-2)}
.mhero .sc.sched{font-size:24px;color:var(--text-2)}
.mhero .sc.sched small{color:var(--text-3)}
.oddbig{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.oddbig button{height:66px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:680;transition:background .15s}
.oddbig button:hover{background:var(--primary);color:#fff}
.oddbig button .k{font-size:12px;color:var(--text-3);font-weight:600}.oddbig button:hover .k{color:rgba(255,255,255,.75)}
.oddbig button .v{font-size:20px;letter-spacing:-.02em}
.oddbig button:disabled{opacity:.45;pointer-events:none}
.split{margin-top:14px}
.split .bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;display:flex}
.split .bar i{display:block;height:100%;background:var(--up)}
.split .bar b{display:block;height:100%;background:#FF9E47;flex:1}
.split .lbls{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--text-2);margin-top:6px}

/* ---------- sheet / dialog ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:60;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;margin:0 auto;max-width:520px;background:var(--bg-1);border:1px solid var(--line-2);border-bottom:0;border-radius:24px 24px 0 0;padding:14px 18px calc(18px + var(--safe-b));animation:rise .32s cubic-bezier(.2,.9,.2,1);box-shadow:var(--shadow)}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--surface-3);margin:0 auto 12px}
.sheet h3{margin:0 0 4px;font-size:19px;font-weight:680;letter-spacing:-.02em}
.sheet .sub{color:var(--text-2);font-size:14px;margin:0 0 14px}
.field{margin-top:12px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin:0 2px 6px}
.input{width:100%;height:50px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);padding:0 14px;font-size:16px;font-weight:520;outline:none;transition:border-color .15s}
.input:focus{border-color:var(--primary)}
.input.big{height:62px;font-size:26px;font-weight:680;letter-spacing:-.02em;text-align:right;padding-right:16px}

.quick{display:flex;gap:6px;margin-top:8px}
.quick button{flex:1;height:36px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--text-2)}
.quick button:hover{color:var(--text);background:var(--surface-3)}
.summary{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.summary .k{font-size:13px;color:var(--text-2);font-weight:600}
.summary .v{font-size:19px;font-weight:680;letter-spacing:-.02em}

.err{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--down-dim);color:var(--down);font-size:13.5px;font-weight:600}
.switch{margin-top:12px;text-align:center;font-size:14px;color:var(--text-2)}
.switch button{color:var(--primary-2);font-weight:680}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 18px);transform:translateX(-50%);z-index:70;background:var(--surface-3);border:1px solid var(--line-2);padding:12px 16px;border-radius:14px;font-weight:600;font-size:14px;box-shadow:var(--shadow);animation:rise .3s ease;max-width:92vw}
.toast.ok{border-color:rgba(22,208,122,.4)} .toast.bad{border-color:rgba(255,93,93,.4)}
body:has(.slipbar:not(.hide)) .toast{bottom:calc(var(--nav-h) + var(--safe-b) + 92px)}

/* ---------- empty / skeleton ---------- */
.empty{padding:40px 16px;text-align:center;color:var(--text-3);font-weight:520;font-size:14px}
.empty b{display:block;color:var(--text-2);font-size:16px;margin-bottom:4px;font-weight:680}
.sk{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:12px}
@keyframes sk{to{background-position:-200% 0}}
.sk-row{height:64px;margin-bottom:8px}

/* ---------- bottom nav (mobile) ---------- */
.nav{position:fixed;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);z-index:50;width:min(96vw,520px);height:var(--nav-h);border-radius:var(--pill);background:rgba(20,21,25,.86);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line-2);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(6,1fr);padding:6px;align-items:stretch}
.nav a{display:grid;place-items:center;border-radius:var(--pill);color:var(--text-2);transition:background .18s ease,color .18s ease;position:relative}
.nav a svg{width:23px;height:23px}
.nav a.on{background:var(--surface-3);color:var(--text)}

.nav .avatar{width:32px;height:32px;font-size:12px}
.nav .badge{position:absolute;top:10px;right:calc(50% - 22px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--up);color:#032;font-size:10px;font-weight:760;display:grid;place-items:center}

/* ---------- hero (logged out) ---------- */

/* ---------- notices ---------- */
.notice{padding:14px 2px;border-bottom:1px solid var(--line)}
.notice .t{font-weight:680;font-size:15px;display:flex;align-items:center;gap:8px}
.notice .d{color:var(--text-3);font-size:12px;font-weight:520;margin-top:2px}
.notice .b{margin-top:8px;color:var(--text-2);font-size:14px;white-space:pre-line;line-height:1.55}

/* ---------- search ---------- */
.searchbar{position:sticky;top:64px;z-index:10;display:flex;align-items:center;gap:8px;height:52px;padding:0 8px 0 14px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line-2);margin-bottom:12px}
.searchbar input{flex:1;background:none;border:0;outline:none;font-size:16px;font-weight:520;min-width:0}
.searchbar .paste{height:34px;padding:0 12px;border-radius:var(--pill);background:var(--surface-3);font-size:13px;font-weight:680}
.ucard{width:150px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ucard .n{font-weight:680;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ucard .s{font-size:12px;color:var(--text-3);font-weight:520}
.ucard .btn{margin-top:6px;width:100%}
.urow{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.urow .n{font-weight:680}.urow .s{font-size:12.5px;color:var(--text-3);font-weight:520}
.urow .r{margin-left:auto;text-align:right;font-weight:680}

/* =================== PC (portal layout) =================== */
.pc-top,.pc-band,.pc-left,.pc-right{display:none}
@media (min-width:960px){
  :root{--nav-h:0px}
  body{font-size:14.5px}
  .nav,.topbar{display:none}
  .shell{max-width:none;padding:0 0 40px}
  .pc-top{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--bg)}
  .pc-top .brand{font-size:19px}
  .pc-top .util{display:flex;align-items:center;gap:6px}
  .pc-top .util a{padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:6px}
  .pc-top .util a:hover{background:var(--surface);color:var(--text)}
  .pc-top .util .sep{width:1px;height:18px;background:var(--line-2);margin:0 6px}
  .userchip{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line-2)}
  .userchip .n{font-weight:680;font-size:13.5px;line-height:1.1}
  .userchip .b{font-size:12px;color:var(--up);font-weight:680}
  .pc-band{display:block;position:sticky;top:0;z-index:30;background:#141736;border-bottom:2px solid var(--primary);box-shadow:0 6px 24px rgba(0,0,0,.35)}
  .pc-band ul{list-style:none;margin:0 auto;padding:0 12px;display:flex;align-items:stretch;justify-content:center;max-width:1440px;height:58px}
  .pc-band li a{display:flex;align-items:center;gap:8px;height:100%;padding:0 26px;font-size:15.5px;font-weight:680;letter-spacing:-.01em;color:#D9DBFF;position:relative;transition:color .15s,background .15s}
  .pc-band li a:hover{color:#fff;background:rgba(255,255,255,.05)}
  .pc-band li a.on{color:#fff}
  .pc-band li a.on::after{content:"";position:absolute;left:18px;right:18px;bottom:-2px;height:3px;background:#fff;border-radius:3px 3px 0 0}
  .pc-band li a .pill{height:18px;padding:0 6px;border-radius:9px;background:var(--up);color:#032;font-size:11px;font-weight:760;display:inline-flex;align-items:center}
  .pc-band li a .hot{height:16px;padding:0 5px;border-radius:5px;background:var(--pink);color:#fff;font-size:10px;font-weight:760;position:absolute;top:8px;right:8px}
  .pc-body{display:grid;grid-template-columns:268px minmax(0,1fr) 312px;gap:18px;max-width:1440px;margin:18px auto 0;padding:0 18px;align-items:start}
  .pc-left,.pc-right{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px}
  .pc-main{min-width:0}
  .view{padding:0;animation:none}
  .chips,.rail{margin:0;padding-left:0;padding-right:0}
  .sheet{bottom:auto;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:22px;border-bottom:1px solid var(--line-2);width:440px;animation:pop .22s ease}
  @keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  .sheet .grab{display:none}
  .toast{bottom:28px}
  .searchbar{top:76px}
  .pane{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .pane .ph{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:680;font-size:14px}
  .pane .ph .more{font-size:12px;color:var(--text-3);font-weight:600}
  .pane .pb{padding:10px 12px}
  .acct{padding:14px}
  .acct .bal{font-size:24px;font-weight:680;letter-spacing:-.03em;margin-top:6px}
  .acct .bal small{font-size:14px;color:var(--text-3);font-weight:600;margin-right:3px}
  .acct .sub{display:flex;gap:12px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--text-2)}
  .acct .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  
  
  
  
  .sports{display:flex;flex-direction:column}
  .sports a{display:flex;align-items:center;gap:10px;padding:9px 14px;font-weight:600;font-size:14px;color:var(--text-2);border-top:1px solid var(--line)}
  .sports a:first-child{border-top:0}
  .sports a:hover{background:var(--surface-2);color:var(--text)}
  .sports a .n{margin-left:auto;font-size:12px;font-weight:680;color:var(--text-3)}
  .sports a .soon{margin-left:auto;font-size:11px;font-weight:680;color:var(--text-3);background:var(--surface-3);padding:2px 6px;border-radius:6px}
  .sports a svg{width:18px;height:18px}
  .mini-lb .lbrow{grid-template-columns:24px 32px 1fr auto;padding:8px 4px}
  .mini-lb .lbrow .who .n{font-size:13.5px}.mini-lb .lbrow .who .h{display:none}
  .mini-lb .lbrow .val .big{font-size:14px}.mini-lb .lbrow .val .sub{display:none}
  .mini-lb .medal{transform:scale(.8)}
  .ticker{display:flex;flex-direction:column}
  .ticker a{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 12px;border-top:1px solid var(--line);font-size:13px;font-weight:600}
  .ticker a:first-child{border-top:0}
  .ticker a .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ticker a .s{font-weight:680;text-align:right}.ticker a .s .min{display:block;color:var(--up);font-size:11.5px}
  .ticker a .l{font-size:11px;color:var(--text-3);font-weight:600;display:block}
  .mlist{gap:6px}
  .mrow{grid-template-columns:60px 1fr auto;padding:10px 12px}
  .mrow .team{font-size:14px}
  
  .lbrow{padding:11px 10px}
  .pc-left .searchbar{position:static;height:44px;margin:0}
  .pc-left .searchbar input{font-size:14px}
}
@media (min-width:1280px){
  .pc-body{grid-template-columns:284px minmax(0,1fr) 340px}
  .mlist.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
}

/* =================== v2: 조합 배팅슬립 =================== */
.mrow{grid-template-columns:52px 1fr;row-gap:8px}
.mrow .when,.mrow .teams{color:inherit}
.mrow .odds{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.mrow .odds.none{display:block;text-align:center;font-size:12px;font-weight:600;color:var(--text-3);padding:2px 0 0}
.mrow.no-odds{row-gap:0}
.mrow .live-dot{animation:none}
.odd{height:44px;min-width:0;padding:0 6px;border-radius:12px;flex-direction:column;gap:0;line-height:1;font-size:14px}
.odd .lbl{font-size:11px;font-weight:600;margin-bottom:3px;white-space:nowrap;color:var(--text-2)}
.odd.picked{background:var(--primary);color:#fff;box-shadow:0 0 0 2px rgba(79,92,243,.35)}
.odd.picked .lbl{color:rgba(255,255,255,.8)}
.mk-h{display:flex;align-items:baseline;gap:8px;margin:14px 2px 6px;font-weight:680;font-size:13.5px;text-align:left}
.mk-h small{color:var(--text-3);font-weight:520;font-size:12px}
.oddbig button.picked{background:var(--primary);color:#fff;border-color:transparent}
.oddbig button.picked .k{color:rgba(255,255,255,.8)}
/* slip */
.slip{display:flex;flex-direction:column;gap:10px}
.slip-h{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:680}
.slip-h .cnt{font-size:11px;font-weight:680;padding:2px 7px;border-radius:6px;background:var(--primary-dim);color:var(--primary-on-dim);margin-left:4px;vertical-align:middle}
.slip-h button{font-size:12.5px;font-weight:600;color:var(--text-3)}
.slip-h button:not(:disabled):hover{color:var(--text)}
.slip-legs{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;min-height:96px;display:flex;flex-direction:column;overflow:hidden}
.slip-empty{flex:1;display:grid;place-items:center;color:var(--text-2);font-size:13.5px;font-weight:520;min-height:96px}
.slip-leg{display:grid;grid-template-columns:1fr auto 26px;gap:8px;align-items:center;padding:10px 8px 10px 12px;border-bottom:1px solid var(--line)}
.slip-leg:last-child{border-bottom:0}
.slip-leg .sl-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.slip-leg .sl-l .dot{display:none}
.slip-leg .sl-m{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-leg .sl-m em{font-style:normal;color:var(--text-3);font-size:11px;margin:0 3px}
.slip-leg .sl-t{font-size:11px;color:var(--text-3);font-weight:520}
.slip-leg .sl-p{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12px;font-weight:600;color:var(--primary-2);white-space:nowrap}
.slip-leg .sl-p b{font-size:14px;color:var(--text)}
.slip-leg .sl-x{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--text-3)}
.slip-leg .sl-x svg{width:14px;height:14px}
.slip-leg .sl-x:hover{background:var(--down-dim);color:var(--down)}
.slip-bet{display:grid;grid-template-columns:auto 34px 1fr;gap:8px;align-items:center}
.slip-bet label{font-weight:680;font-size:14px}
.slip-bet .sl-reset{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2)}
.slip-bet .sl-reset svg{width:16px;height:16px}
.slip-in{height:42px;border-radius:10px;background:var(--bg-1);border:1px solid var(--primary);padding:0 12px;text-align:right;font-weight:680;font-size:16px;outline:none;width:100%}
.slip-quick{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.slip-quick button{height:36px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;font-size:12.5px;color:var(--text-2)}
.slip-quick button:hover{color:var(--text);background:var(--surface-3)}
.slip-sum{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:2px 12px}
.slip-sum > div{display:flex;justify-content:space-between;align-items:center;height:36px;border-bottom:1px solid var(--line);font-size:13px}
.slip-sum > div:last-child{border-bottom:0}
.slip-sum span{color:var(--text-2);font-weight:600}
.slip-sum b{font-weight:680}
.slip-err{padding:9px 12px;border-radius:10px;background:var(--down-dim);color:var(--down);font-size:12.5px;font-weight:600}
.slip .btn.primary:disabled{opacity:.55}
.slip-pane{padding:14px}
/* mobile slip bar */
.slipbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + var(--safe-b) + 20px);z-index:49;width:min(92vw,470px);height:56px;border-radius:16px;background:var(--primary);color:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:0 10px 0 8px;box-shadow:0 12px 30px rgba(79,92,243,.45)}
@keyframes riseX{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.slipbar .sb-n{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:760;font-size:16px}
.slipbar .sb-t{text-align:left;font-weight:680;font-size:14.5px;line-height:1.15}
.slipbar .sb-t small{display:block;font-size:11.5px;font-weight:520;opacity:.85}
.slipbar .sb-go{display:inline-flex;align-items:center;gap:2px;font-weight:680;font-size:13.5px;height:36px;padding:0 6px 0 12px;border-radius:10px;background:rgba(255,255,255,.14)}
.slipbar .sb-go svg{width:16px;height:16px}
.shell:has(.slipbar:not(.hide)){padding-bottom:calc(var(--nav-h) + var(--safe-b) + 90px)}
.sheet.slip-sheet{max-height:88dvh;overflow:auto}
/* bet cards */
.bet{padding:12px 4px 12px;border-bottom:1px solid var(--line)}
.bet .bh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.bet .bh .bu{display:inline-flex;align-items:center;gap:8px;font-weight:680}
.bet .bh .bf{color:var(--text-2);font-weight:520;font-size:13px}
.bet .bh .bf b{color:var(--text)}
.bet .bh .ago{margin-left:auto;color:var(--text-3);font-size:12.5px;font-weight:520}
.bet .bl{margin:8px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.leg{display:grid;grid-template-columns:8px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13.5px}
.leg:last-child{border-bottom:0}
.leg .dot{width:8px;height:8px;border-radius:50%}
.leg .lm{min-width:0;display:flex;flex-direction:column;gap:1px}
.leg .lm b{font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg .lm small{font-size:11.5px;color:var(--text-3);font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg .lo{font-weight:680;color:var(--text-2)}
.leg .ls{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:680}
.leg .ls svg{width:12px;height:12px}
.leg.won .ls{background:var(--up-dim);color:var(--up)} .leg.lost .ls{background:var(--down-dim);color:var(--down)} .leg.push .ls{background:rgba(255,255,255,.08);color:var(--text-2);width:auto;padding:0 5px}
.leg.lost .lm b{color:var(--text-3);text-decoration:line-through}
.bet .bfoot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px;gap:10px}
.bet .bfoot .note{font-size:13px;color:var(--text-2);padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.bet .ba{font-weight:680;font-size:16px;text-align:right;letter-spacing:-.01em}
.bet .ba small{display:block;font-size:11.5px;color:var(--text-3);font-weight:520;margin-top:1px}
@media (min-width:960px){
  .mrow{grid-template-columns:60px 1fr auto;row-gap:0}
  .mrow .odds{grid-column:auto;grid-auto-flow:row;grid-template-columns:repeat(4,72px);gap:5px}
  .mrow:not(.has-ou) .odds{grid-template-columns:repeat(2,72px)}
  .mrow .odds.none{width:149px;padding:10px 0 0}
  .odd{height:36px;border-radius:10px;font-size:13px}
  .odd .lbl{font-size:10.5px;margin-bottom:2px}
  .slipbar{display:none}
  .pc-right,.pc-left{top:76px;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:none;padding-bottom:20px}
  .pc-right::-webkit-scrollbar{display:none}
}
@media (hover:hover){
  .lbrow:hover,.ticker a:hover,.ucard:hover,.urow:hover{background:var(--surface-2)}
  .lbrow{border-radius:12px}
  .chip:not(.on):hover{color:var(--text);border-color:var(--line-2)}
  .tabs button:not(.on):hover,.segmented button:not(.on):hover{color:var(--text-2)}
  
}

/* =================== brand presence (owner: "make the brand noticeable") =================== */
:root{
  --primary:#5865FF; --primary-2:#8A93FF; --primary-3:#3F4BE0; --primary-dim:rgba(88,101,255,.18);
  --brand-grad:#4F5CF3;  /* retired: the system is flat ink */
  --brand-line:none;
}
::selection{background:rgba(88,101,255,.5)}

/* wordmark carries the gradient; mark gets a halo so it reads as a logo, not a dot */
.brand{position:relative}
.brand-mark{background:var(--primary);box-shadow:0 0 0 3px rgba(88,101,255,.16),0 6px 18px rgba(88,101,255,.4)}

/* branded chrome: a live gradient hairline under the sticky bars */
.topbar{border-bottom:1px solid var(--line)}
.topbar::after{content:"";position:absolute;inset:-40% 30% auto;height:120px;background:radial-gradient(60% 60% at 50% 0,rgba(88,101,255,.30),transparent 70%);filter:blur(22px);pointer-events:none;z-index:-1}

/* primary action reads as the brand, not a generic blue */
.btn.primary{background:var(--primary);box-shadow:0 8px 26px rgba(88,101,255,.45)}
.btn.primary:hover{background:var(--primary);filter:brightness(1.08)}
.btn.primary:disabled{background:var(--surface-3);filter:none}

/* active nav is brand-filled with a ring, not a grey pill */
.nav{border-color:rgba(88,101,255,.22);box-shadow:var(--shadow),0 0 32px rgba(88,101,255,.14)}
.nav a.on{background:var(--primary-dim);color:var(--primary-2);box-shadow:inset 0 0 0 1px rgba(88,101,255,.35)}

/* section headings get a brand tick so the colour repeats down the page */
.sec-h h2::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--primary);flex:none}
.tabs button.on::after{height:3px;background:var(--primary);box-shadow:0 0 12px rgba(88,101,255,.7)}
.segmented button.on{background:var(--primary-dim);color:var(--primary-on-dim);box-shadow:inset 0 0 0 1px rgba(88,101,255,.3)}

.chip.on{background:var(--primary-dim);color:var(--primary-on-dim);border-color:rgba(88,101,255,.4)}
.odd.picked{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(88,101,255,.4)}
.odd.picked .lbl{color:rgba(255,255,255,.85)}
.avatar.me,.nav a.on .avatar{box-shadow:0 0 0 2px var(--primary-2)}

/* balance panel: the one place the brand owns a whole region */
.balance{background:radial-gradient(120% 140% at 0 0,rgba(88,101,255,.22),transparent 62%);border:1px solid rgba(88,101,255,.2);border-radius:var(--r);padding:16px 16px 14px;margin-bottom:14px}

/* =================== weekly contest (no prizes) =================== */
.cbanner{position:relative;overflow:hidden;border-radius:var(--r);padding:16px;background:var(--primary);color:#fff;box-shadow:0 14px 34px rgba(88,101,255,.42)}
.cbanner::after{content:"";position:absolute;right:-30px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(6px)}
.cbanner .ct{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:680;letter-spacing:.02em;opacity:.95}
.cbanner .ch{margin:8px 0 2px;font-size:21px;font-weight:760;letter-spacing:-.03em;position:relative}
.cbanner .cs{font-size:13.5px;opacity:.92;font-weight:520}

.cbanner .cd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;position:relative;font-weight:680;font-size:13px}
.cbanner .cd .clock{font-variant-numeric:tabular-nums;background:rgba(0,0,0,.26);padding:5px 10px;border-radius:var(--pill)}

.prize-row{display:flex;gap:10px;margin:0 0 14px}
.prize-card{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 10px;text-align:center;position:relative}
.prize-card.p1{border-color:rgba(246,183,60,.45);background:linear-gradient(180deg,rgba(246,183,60,.13),var(--surface))}
.prize-card.p2{border-color:rgba(195,199,208,.35)}
.prize-card.p3{border-color:rgba(205,127,78,.35)}
.prize-card .pz{font-size:19px;font-weight:760;letter-spacing:-.03em;margin-top:5px}
.prize-card .pl{font-size:11.5px;color:var(--text-3);font-weight:600}
.prize-card .pw{font-size:12px;font-weight:600;margin-top:6px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.claim{background:linear-gradient(135deg,rgba(246,183,60,.16),var(--surface));border:1px solid rgba(246,183,60,.4);border-radius:var(--r);padding:15px;margin-bottom:14px}
.claim h3{margin:0 0 4px;font-size:16px;font-weight:760;letter-spacing:-.02em}
.claim p{margin:0 0 12px;font-size:13px;color:var(--text-2)}

.claim input{flex:1;min-width:190px;height:44px;padding:0 13px;border-radius:12px;background:var(--bg-1);border:1px solid var(--line-2);font-size:14px}
.claim select{height:44px;padding:0 10px;border-radius:12px;background:var(--bg-1);border:1px solid var(--line-2);font-size:14px;font-weight:600}

/* attendance */
.attend{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:14px}
.attend .ai{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary-2);flex:none}
.attend .at{flex:1;min-width:0}
.attend .at b{display:block;font-size:14.5px;font-weight:680}
.attend .at span{font-size:12.5px;color:var(--text-3);font-weight:520}
.streak{display:flex;gap:4px;margin-top:7px}
.streak i{width:100%;height:5px;border-radius:3px;background:var(--surface-3)}
.streak i.on{background:var(--primary)}

/* logged-out strip: the contest banner is the hero now, so this only orients */

/* keep the value column from starving the name column on 375px */
.lbrow .val{min-width:0}
.lbrow .val .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================================================================
   TICKET SYSTEM: replaces the gradient/glass layer.
   The product is a betting slip, so the interface is built from
   ticket geometry: notched stubs, perforations, clipped corners,
   flat ink. No gradients, no colour glows, no backdrop blur.
   ================================================================ */
:root{
  --brand:#4F5CF3; --primary:#4F5CF3; --primary-2:#6E79FF; --primary-3:#3A45CC;
  --primary-dim:rgba(79,92,243,.16);
  --ink:#0B0B0E;
  --font-d:"Saira Condensed","Pretendard Variable",Pretendard,system-ui,sans-serif;
  --perf:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px);
}

/* --- scoreboard voice: numerals, odds, ranks, handles --- */
.num,.odd .num,.balance .amt,.prize-card .pz,.lbrow .val .big,
.mrow .when .t,.mrow .team .s,.clock{font-family:var(--font-d);font-weight:600;letter-spacing:.005em;font-variant-numeric:tabular-nums lining-nums}
.balance .amt{font-weight:680;letter-spacing:-.01em}
.lbrow .who .h,.bet .bf{font-family:var(--font-d);font-weight:520;letter-spacing:.045em;text-transform:uppercase;font-size:12px}
.lbrow .who .n .nm{font-weight:680;letter-spacing:-.035em}
.brand{font-weight:680;letter-spacing:-.045em}
.brand .bt{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}

/* --- notched stub: two punched circles, like a torn ticket --- */
.ticket,.bet,.cbanner,.prize-card,.attend,.claim{
  --nr:9px; --ny:50%;
  -webkit-mask-image:radial-gradient(circle var(--nr) at 0 var(--ny),transparent 97%,#000 100%),radial-gradient(circle var(--nr) at 100% var(--ny),transparent 97%,#000 100%);
  mask-image:radial-gradient(circle var(--nr) at 0 var(--ny),transparent 97%,#000 100%),radial-gradient(circle var(--nr) at 100% var(--ny),transparent 97%,#000 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.bet{--ny:58px;border-radius:6px 6px 14px 14px}
.attend{--ny:50%;border-radius:6px}
.claim{--ny:34px;border-radius:6px}
.prize-card{--nr:7px;--ny:30px;border-radius:5px}
.cbanner{--nr:10px;--ny:96px;border-radius:8px}

/* --- flat ink, no gradient, no halo --- */
.cbanner{background:var(--primary);box-shadow:none}
.cbanner::after{display:none}
.cbanner .ch{font-family:var(--font-d);font-size:26px;letter-spacing:-.01em;text-transform:uppercase}
.cbanner .ct{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-family:var(--font-d)}

.cbanner .cd{border-top:1px solid rgba(255,255,255,.28);padding-top:11px;margin-top:13px}
.cbanner .cd .clock{background:var(--ink);color:#fff;border-radius:3px;letter-spacing:.06em}

.btn.primary{background:var(--primary);box-shadow:none;border-radius:6px}
.btn.primary:hover{background:var(--primary-2);filter:none}
.btn{border-radius:6px}
.btn.sm{border-radius:5px}
.brand-mark{background:none;box-shadow:none;border-radius:0}

.nav{background:var(--surface);backdrop-filter:none;border-radius:10px;border-color:var(--line-2);box-shadow:0 -1px 0 var(--line-2),0 12px 28px rgba(0,0,0,.5)}
.nav a{border-radius:6px}
.nav a.on{background:var(--primary);color:#fff;box-shadow:none}
.nav a.on::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:14px;height:3px;background:var(--primary);border-radius:2px}
.topbar{background-image:none;background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:none}
.topbar::after{display:none}

.balance{background:var(--surface);border:1px solid var(--line);border-radius:6px}

.card,.myrank,.sec>.lb,.empty{border-radius:6px}

/* --- odds chip: clipped corner, stamped, not a pill --- */
.odd{border-radius:0;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);background:var(--surface-2);border:0}
.odd.picked{background:var(--primary);box-shadow:none}
.odd .num{font-size:15px}
.chip,.segmented,.segmented button,.tabs button.on::after{border-radius:3px}
.chip{border-radius:3px}
.tabs button.on::after{background:var(--primary);box-shadow:none;left:0;right:0;height:2px}
.segmented{border-radius:4px}
.segmented button.on{background:var(--primary);color:#fff;box-shadow:none}

/* --- perforated divider inside a slip --- */
.bet .bfoot{border-top:0;position:relative;padding-top:11px;margin-top:9px}
.bet .bfoot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--perf)}
.slip-sum{border-radius:0;position:relative}
.slip-sum::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--perf)}

/* --- rank plates, not medal circles --- */
.lbrow .rank .rn,.lbrow .rank{font-family:var(--font-d);font-weight:680}
.lbrow .rank .medal{border-radius:2px;width:24px;height:26px;clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);display:grid;place-items:center;font-size:13px;font-weight:680;color:var(--ink)}
.avatar{border-radius:5px}
.avatar.me,.nav a.on .avatar{box-shadow:0 0 0 2px var(--primary)}
.prize-card{background:var(--surface);border:1px solid var(--line)}
.prize-card.p1{background:var(--surface);border-color:var(--gold)}
.prize-card .pz{font-size:22px}
.prize-card .pl{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.claim{background:var(--surface);border-color:var(--gold)}
.claim input,.claim select{border-radius:5px}
.streak i{border-radius:1px}
.streak i.on{background:var(--primary)}
.tag{border-radius:3px;font-family:var(--font-d);letter-spacing:.05em;text-transform:uppercase}

.toast{border-radius:5px}
.brand-mark{width:26px;height:26px;color:var(--primary);flex:none;display:block}
.pc-top .brand-mark{width:28px;height:28px}

/* Notch masks left stray slivers across engines. Cut corners give the same
   stub read with deterministic geometry. */
.ticket,.bet,.cbanner,.prize-card,.attend,.claim{-webkit-mask-image:none;mask-image:none}
.cbanner{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.bet{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.prize-card{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.attend,.claim{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.cbanner{display:block}

.avatar{color:var(--ink);font-weight:680}

/* ---- vertical rhythm ----------------------------------------------------
   Major blocks were relying on their own margins, so .cbanner (which had
   none) sat flush against the hero and the attendance card. One scale:
   16 between stacked blocks, 24 before a section, 10/12 inside one.        */
.view > .balance,
.view > .cbanner,
.view > .attend,
.view > .claim,
.view > .myrank,
.view > .prize-row{margin-bottom:16px}
.view > .sec{margin-top:24px}
.view > :first-child{margin-top:0}
.view > :last-child{margin-bottom:0}
.sec .tabs{margin-bottom:12px}
.date-h{margin-bottom:10px}
/* the view swaps on every navigation now, so keep the transition short */
.view{animation-duration:.18s}

/* ---- touch responsiveness ----
   iOS holds ~300ms on tap to see if a double-tap-zoom is coming, and paints a
   grey flash. Both read as lag. */
html{touch-action:manipulation}
a,button,.nav a,.odd,.chip,.tabs button,.segmented button{-webkit-tap-highlight-color:transparent}

/* ---- bottom nav: quick, springy press ---- */
.nav a{transition:background .18s cubic-bezier(.2,.8,.2,1),color .16s ease,transform .13s cubic-bezier(.2,.8,.2,1);will-change:transform}
.nav a svg,.nav a .avatar{transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.nav a:active{transform:scale(.87)}
.nav a.on svg{transform:translateY(-1px) scale(1.06)}
.nav a.on{animation:navpop .24s cubic-bezier(.2,.9,.25,1)}
@keyframes navpop{0%{transform:scale(.9)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.nav a.on::after{display:none}          /* the fill is the indicator; the bar clipped the pill */
.odd:active,.chip:active,.btn:active{transform:scale(.96)}
.odd{transition:background .15s ease,transform .12s cubic-bezier(.2,.8,.2,1)}

/* ================================================================
   RADIUS: one scale, applied everywhere.
   The ticket character now lives in the perforation, the flat ink,
   the condensed numerals and the logo, not in mixed corner shapes.
   Cut corners are dropped: two different corner treatments in one
   view is exactly what read as incoherent.
   ================================================================ */
:root{ --r:18px; --r-sm:12px; --r-xs:7px; }

/* large surfaces */
.nav,.card,.cbanner,.balance,.myrank,.empty,.sheet,.lb,
.attend,.claim,.pane,.ucard,.bet,.sec>.lb,.mlist,.slip{border-radius:var(--r)}
.nav{border-radius:var(--r)}
.sheet{border-radius:var(--r) var(--r) 0 0}

/* medium controls */
.btn,.btn.sm,.btn.primary,.odd,.input,.claim input,.claim select,.prize-card,
.toast,.avatar,.ibtn,.slipbar,.field input,.sk{border-radius:var(--r-sm)}
.ibtn{border-radius:50%}                    /* round icon buttons stay round */
.avatar.sm,.avatar.md{border-radius:var(--r-sm)}

/* small chips and marks */
.tag,.chip,.segmented,.segmented button,.badge,.pill,.hot,
.streak i,.lg,.cnt{border-radius:var(--r-xs)}
.segmented{border-radius:var(--r-sm)}
.live-dot,.dot{border-radius:50%}

/* drop the cut corners: one corner language only */
.cbanner,.bet,.prize-card,.attend,.claim{clip-path:none}
.odd{clip-path:none}
.cbanner .cd .clock{border-radius:var(--r-xs)}
.lbrow .rank .medal{clip-path:none;border-radius:50%;width:26px;height:26px}
.bet .bl,.slip-sum{border-radius:0}

/* ================= PC + mobile chrome fixes ================= */
@media (min-width:960px){
  /* The rail is a flex column with a max-height, so panes were being
     flex-shrunk to a couple of rows each. Let them keep their height. */
  .pc-right > *,.pc-left > *{flex:0 0 auto}
  .pc-right,.pc-left{max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:none}
  .pc-right::-webkit-scrollbar,.pc-left::-webkit-scrollbar{display:none}
  .pane .pb{max-height:none}
  .ticker a{padding:10px 12px}

  /* the profile chip is two lines tall; a 52px bar clipped its border */
  .pc-top{height:64px}
  .userchip{padding:6px 14px 6px 7px;line-height:1.15}
  .userchip .n{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

  /* menu press: quick, smooth, no layout shift */
  .pc-band a{position:relative;transition:color .15s ease,background .15s ease,transform .11s cubic-bezier(.2,.8,.2,1);border-radius:var(--r-xs)}
  .pc-band a:active{transform:scale(.955)}
  .pc-band a::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--primary);transform:scaleX(0);transform-origin:50% 100%;transition:transform .2s cubic-bezier(.2,.9,.25,1)}
  .pc-band a.on::after{transform:scaleX(1)}
  .pc-band a:hover{color:var(--text)}
  
  
  .lbrow,.ticker a,.ucard{transition:background .14s ease,transform .11s cubic-bezier(.2,.8,.2,1)}
  .lbrow:active,.ticker a:active{transform:scale(.985)}
}

/* mobile nav was 72px: too thick. 58 keeps the target size and returns screen. */
:root{--nav-h:58px}
.nav{padding:5px}
.nav a svg{width:22px;height:22px}
.nav .avatar{width:26px;height:26px;font-size:10px}
.nav .badge{top:4px;right:calc(50% - 19px)}
.nav .badge.dot{min-width:0;width:8px;height:8px;padding:0;top:9px;right:calc(50% - 14px)}

/* full numbers need two rows of three, not six squeezed columns */
.slip-quick{grid-template-columns:repeat(3,1fr);gap:6px}
.slip-quick button{height:34px;font-size:12px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* day selector on 경기일정 */
.dayrow{display:flex;gap:7px;overflow-x:auto;margin:0 -16px 14px;padding:0 16px 2px;scrollbar-width:none}
.dayrow::-webkit-scrollbar{display:none}
.daybtn{flex:none;min-width:64px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background .15s ease,color .15s ease,transform .11s cubic-bezier(.2,.8,.2,1)}
.daybtn:active{transform:scale(.95)}
.daybtn b{font-size:13.5px;font-weight:680}
.daybtn .num{font-family:var(--font-d);font-size:12px;font-weight:600;color:var(--text-3)}
.daybtn.on{background:var(--primary);border-color:transparent;color:#fff}
.daybtn.on .num{color:rgba(255,255,255,.85)}
@media (min-width:960px){ .dayrow{margin:0 0 14px;padding:0 0 2px} }

/* compact live card: keeps live scores one glance away without burying the board */

.sec-h h2 .live-dot{margin-right:2px}

/* ---- odds buttons: these are the primary action, make them look like it ----
   They were surface-2 on a surface card with no border: nearly invisible. */
.odd{
  background:var(--surface-3);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35);
  color:var(--text);
  transition:background .15s ease,border-color .15s ease,transform .1s cubic-bezier(.2,.8,.2,1),box-shadow .15s ease;
}
.odd .lbl{color:var(--text-2);font-size:11px;font-weight:600;letter-spacing:-.01em}
.odd .num{font-size:16px;font-weight:680;color:#fff;letter-spacing:-.01em}
.odd:active{transform:scale(.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.odd.picked{
  background:var(--primary);border-color:var(--primary-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 12px rgba(79,92,243,.45);
}
.odd.picked .lbl{color:rgba(255,255,255,.9)}
.odd.picked .num{color:#fff}
.odd.off,.odd:disabled{background:transparent;border-color:var(--line);box-shadow:none;opacity:.5}
.odd.off .num,.odd:disabled .num{color:var(--text-3)}
@media (hover:hover){
  .odd:not(:disabled):hover{background:#2E2F36;border-color:rgba(255,255,255,.26);transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 4px 12px rgba(0,0,0,.45)}
  .odd.picked:hover{background:var(--primary-2);border-color:var(--primary-2)}
}
/* the row itself signals it has something to act on */
.mrow:has(.odd:not(:disabled)){border-color:var(--line-2)}
.mrow .odds.none{color:var(--text-3);font-style:normal}

/* ---- toast: keep the centering transform during the animation ----
   `rise` animated `transform` outright, wiping translateX(-50%), so the toast
   flew in off-centre and snapped once the animation released the property. */
.toast{animation:riseX .26s cubic-bezier(.2,.9,.25,1)}

/* ---- contest CTA: it renders as a span, so a.cgo padding never applied ---- */
.cbanner .cd{gap:12px;flex-wrap:wrap}

.cbanner .cd .clock{padding:8px 11px;line-height:1;flex:none}

/* ================= profile chip, duplicate balance, profit card ================= */
@media (min-width:960px){
  /* the left rail already shows the balance; the middle card repeated it */
  .pc-main .view > .balance{display:none}

  /* chip was two stacked lines + 28px avatar = a tall block. One tight row. */
  .userchip{gap:8px;padding:4px 12px 4px 4px;height:40px}
  .userchip .avatar{width:30px!important;height:30px!important;font-size:11px!important}
  .userchip .avatar .chk{width:12px;height:12px;right:-3px;bottom:-3px;border-width:1.5px}
  .userchip .avatar .chk svg{width:7px;height:7px}
  .userchip .n{font-size:12.5px;line-height:1.15;display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userchip .b{font-size:11.5px;line-height:1.15}
  .userchip br{line-height:0}
}

/* dismiss control on the contest banner */

/* the profit is the headline of a profile */

 

@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* comparison bars for market / league hit rate */
.brow{display:grid;grid-template-columns:88px 1fr 64px;align-items:center;gap:10px;padding:9px 0}
.brow + .brow{border-top:1px solid var(--line)}
.brow .bl{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bl .dot{width:7px;height:7px;border-radius:50%;flex:none}
.brow .bbar{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.brow .bbar i{display:block;height:100%;border-radius:4px;background:var(--primary);
  width:var(--w);animation:barGrow .7s cubic-bezier(.2,.9,.25,1) both}
.brow .bv{text-align:right;font-family:var(--font-d);font-weight:680;font-size:14px}
.brow .bv small{display:block;font-family:var(--font);font-size:11px;color:var(--text-3);font-weight:600}
@keyframes barGrow{from{width:0}to{width:var(--w)}}
@media (max-width:400px){ .brow{grid-template-columns:74px 1fr 56px;gap:8px} }

/* ---- animation polish: entrances and press feedback, transform/opacity only ---- */
.sec{animation:cardIn .34s cubic-bezier(.2,.9,.25,1) both}
.mrow{transition:background .15s ease,border-color .15s ease,transform .1s cubic-bezier(.2,.8,.2,1)}
.mrow:active{transform:scale(.995)}
.lbrow .medal{transition:transform .18s cubic-bezier(.2,.9,.25,1)}
.lbrow:hover .medal{transform:scale(1.08)}
.ucard{will-change:transform}
.btn{transition:transform .11s cubic-bezier(.2,.8,.2,1),background .15s ease,box-shadow .15s ease,filter .15s ease}
.btn:active{transform:scale(.965)}
.tag{transition:background .15s ease}
.attend .btn.primary:not(:disabled){animation:nudge 2.4s ease-in-out 1.2s infinite}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateY(-2px)}96%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .sec,.brow .bbar i,.attend .btn.primary{animation:none!important} }

/* league tag had no breathing room around the label */
.lg{padding:3px 8px;line-height:1.35;font-size:11px;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;min-height:20px}
.mrow .when .lg{padding:3px 7px;font-size:10.5px}

/* profile chip: the <br> layout left the name floating above the avatar centre */
@media (min-width:960px){
  .userchip{align-items:center}
  .userchip > span{display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.1}
  .userchip br{display:none}
  .userchip .avatar{position:relative;flex:none}
  .userchip .avatar .chk{right:-2px;bottom:-2px}
}

/* ================= one header bar on PC ================= */
@media (min-width:960px){
  .pc-top{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;
    gap:22px;padding:0 22px;background:var(--bg);border-bottom:1px solid var(--line-2)}
  .pc-top .brand{flex:none}
  /* the menu now lives inside the header instead of its own band */
  .pc-band{display:flex!important;position:static!important;flex:1;min-width:0;
    background:none!important;border:0!important;box-shadow:none!important;height:100%}
  .pc-band ul{display:flex;align-items:stretch;gap:2px;margin:0;padding:0;list-style:none;height:100%;
    overflow-x:auto;scrollbar-width:none}
  .pc-band ul::-webkit-scrollbar{display:none}
  .pc-band li{display:flex}
  .pc-band a{display:inline-flex;align-items:center;gap:6px;padding:0 13px;height:100%;
    font-size:14px;font-weight:600;color:var(--text-2);white-space:nowrap;border-radius:0}
  .pc-band a.on{color:var(--text)}
  .pc-band a::after{left:13px;right:13px;bottom:0;height:3px}
  .pc-band .pill{background:var(--up);color:#04231a;font-family:var(--font-d);font-weight:680;
    font-size:11px;padding:1px 6px;border-radius:var(--pill);line-height:1.5}
  .pc-band .hot{background:var(--pink);color:#fff;font-family:var(--font-d);font-weight:680;
    font-size:10px;padding:1px 6px;border-radius:var(--pill);line-height:1.5}
  .pc-top .util{flex:none;margin-left:auto}
  /* rails sit under the single 60px bar now */
  .pc-left,.pc-right{top:74px}
  .pc-right{max-height:calc(100vh - 88px)}
}
.slip-mine{margin-top:8px;height:42px;font-size:13.5px;gap:7px;color:var(--text-2)}
.slip-mine .cnt{background:var(--primary-dim);color:var(--primary-2);font-family:var(--font-d);
  font-weight:680;font-size:11px;padding:1px 7px;border-radius:var(--pill)}
.slip-mine:hover{color:var(--text);border-color:var(--line-2)}

/* A tab or filter press re-renders the view; entrance animations must not
   replay each time. `.quiet` is set for same-route updates. */
.view.quiet,
.view.quiet .sec{animation:none!important}
.view.quiet .brow .bbar i{animation:none!important;width:var(--w)}
.sec{animation-duration:.28s}

/* ---- boot: only show the mark if the app is genuinely slow to start ----
   A fast load flashed the logo for a few frames on every refresh. */
.boot{opacity:0;animation:bootIn .25s ease 500ms forwards}
@keyframes bootIn{to{opacity:1}}

/* ================= match pitch ================= */
.pitch{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:14px;
  aspect-ratio:16/9;min-height:190px;max-height:280px;border:1px solid var(--line)}
.pv-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.pv-row{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:10px;padding:0 14px}
.pv-side{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.pv-shirt{width:clamp(38px,11vw,54px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.pv-shirt.home{color:#E8EAF0}
.pv-shirt.away{color:#39404E}
.pv-team{font-size:clamp(11.5px,3.2vw,13.5px);font-weight:680;color:#fff;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.7);word-break:keep-all}
.pv-mid{background:rgba(9,9,11,.72);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm);padding:10px 16px;text-align:center;flex:none;
  animation:cardIn .4s cubic-bezier(.2,.9,.25,1) both}
.pv-lbl{font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;justify-content:center;gap:5px}
.pitch.live .pv-lbl{color:var(--up)}
.pv-clock,.pv-score{font-family:var(--font-d);font-weight:680;letter-spacing:.01em;
  font-size:clamp(22px,6.4vw,30px);color:#fff;line-height:1.1;margin-top:3px}
.pv-score{font-size:clamp(26px,7.5vw,36px)}
.pitch.fin .pv-mid{opacity:.92}
@media (min-width:960px){ .pitch{max-height:300px} }
@media (prefers-reduced-motion:reduce){ .boot{animation:none;opacity:1} .pv-mid{animation:none} }

/* ---- back control for desktop sub-pages (mobile topbar is hidden there) ---- */
.backbar{display:none}
@media (min-width:960px){
  .backbar{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 10px;
    margin-bottom:12px;border-radius:var(--pill);background:var(--surface);
    border:1px solid var(--line);color:var(--text-2);font-weight:600;font-size:13.5px;
    transition:background .15s ease,color .15s ease,transform .11s cubic-bezier(.2,.8,.2,1)}
  .backbar:hover{background:var(--surface-2);color:var(--text)}
  .backbar:active{transform:scale(.96)}
}

/* ================= balance chart ================= */
.chart{position:relative;height:168px;margin:8px -4px 0;color:var(--up);
  touch-action:pan-y;cursor:crosshair;user-select:none}
.chart.down{color:var(--down)}
.ch-svg{width:100%;height:100%;display:block;overflow:visible}

@keyframes chDraw{to{stroke-dashoffset:0}}

.ch-vline{stroke:rgba(255,255,255,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.ch-dot{fill:currentColor;stroke:var(--bg);stroke-width:2.5;vector-effect:non-scaling-stroke}

/* aspect-ratio + max-height was capping the pitch's WIDTH (300px tall at 16/9
   is only 533px wide), so it sat narrow and looked off-centre in the column.
   Fix the height instead and let width fill; the SVG uses slice so it crops. */
.pitch{width:100%;aspect-ratio:auto;height:clamp(196px,46vw,236px);max-height:none;min-height:0}
@media (min-width:960px){ .pitch{height:270px;max-height:none} }

/* ================================================================
   LIGHT THEME
   Dark stays the default. Light is a full token remap so every
   component follows without per-component overrides.
   ================================================================ */
:root[data-theme="light"]{
  --point:#8A5300; --fx-glow:#0B7A3F; --fx-title:#8A5300; --danger:#C81E2B; --primary-on-dim:#3D48D8;
  --bg:#F6F7F9; --bg-1:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F3F7; --surface-3:#E6E9F0;
  --line:rgba(15,18,25,.09); --line-2:rgba(15,18,25,.16);
  --text:#0E1015; --text-2:#4C5361; --text-3:#6C7480;
  --up:#00A25A; --up-dim:rgba(0,162,90,.12); --up-on-dim:#0A6B39;
  --down:#DC2F3C; --down-dim:rgba(220,47,60,.10); --down-on-dim:#B01722;
  --primary-dim:rgba(79,92,243,.12);
  --ink:#FFFFFF;
  --shadow:0 12px 32px rgba(16,24,40,.12); --shadow-sm:0 3px 10px rgba(16,24,40,.09);
  color-scheme:light;
}
:root[data-theme="light"] body{background:var(--bg);color:var(--text)}
:root[data-theme="light"] .topbar{background:var(--bg-1)}
:root[data-theme="light"] .nav{background:rgba(255,255,255,.94);box-shadow:0 -1px 0 var(--line),0 10px 30px rgba(16,24,40,.14)}
:root[data-theme="light"] .odd{background:#FFF;border-color:rgba(15,18,25,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(16,24,40,.07)}
:root[data-theme="light"] .odd .num{color:var(--text)}
:root[data-theme="light"] .odd.picked{background:var(--primary)}
:root[data-theme="light"] .odd.picked .num{color:#fff}
:root[data-theme="light"] .pc-top{background:var(--bg-1)}

:root[data-theme="light"] .ch-vline{stroke:rgba(15,18,25,.3)}
:root[data-theme="light"] .ch-dot{stroke:#fff}

:root[data-theme="light"] .pv-mid{background:rgba(255,255,255,.9);border-color:rgba(15,18,25,.12)}
:root[data-theme="light"] .pv-lbl{color:var(--text-2)}
:root[data-theme="light"] .pv-clock,:root[data-theme="light"] .pv-score{color:var(--text)}
:root[data-theme="light"] .brand .bt{color:var(--text)}

:root[data-theme="light"] .tag.auto{background:rgba(15,18,25,.07);color:var(--text-2)}
:root[data-theme="light"] .pc-band .pill{color:#03291c}
:root[data-theme="light"] ::selection{background:rgba(79,92,243,.22)}
/* the pitch keeps its own green in both themes; only the overlay flips */

/* settings sheet rows */
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0}
.setrow + .setrow{border-top:1px solid var(--line)}
.setrow .st{font-weight:600;font-size:14.5px}
.setrow .ss{font-size:12.5px;color:var(--text-3);font-weight:520;margin-top:2px}

/* profile header actions were four 40px circles; two compact ones is enough */
.ibtn.sm{width:32px;height:32px}
.ibtn.sm svg{width:16px;height:16px}

/* 다폴더 보너스 row in the slip */

/* invite code block in settings */
.invite{display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:12px 14px;margin:2px 0 10px}

/* ---- modal centring: .sheet and .sheet-bg are siblings, so centre via the
   root container instead of fixed offsets that a transformed ancestor can break */
@media (min-width:960px){
  #sheet-root{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:none}
  #sheet-root:empty{display:none}
  .sheet-bg{pointer-events:auto}
  .sheet{position:relative;inset:auto;top:auto;left:auto;transform:none;margin:0;
    pointer-events:auto;width:440px;max-width:92vw;max-height:86vh;overflow-y:auto;
    border-radius:var(--r);animation:popIn .2s cubic-bezier(.2,.9,.25,1)}
  @keyframes popIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
  /* avatar swatch row was overflowing the modal */
  .sheet .chips{flex-wrap:wrap;overflow:visible}
  .pc-left .acct .ibtn{width:30px!important;height:30px!important}
  .pc-left .acct .ibtn svg{width:15px;height:15px}
}

/* ---- match-detail odds: same raised treatment as the board chips ---- */
.oddbig button{background:var(--surface-3);border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.35);
  border-radius:var(--r-sm);min-height:62px;
  transition:background .15s ease,border-color .15s ease,transform .1s cubic-bezier(.2,.8,.2,1),box-shadow .15s ease}
.oddbig button .k{color:var(--text-2);font-size:12.5px;font-weight:600}
.oddbig button .v,.oddbig button .num{font-family:var(--font-d);font-size:24px;font-weight:680;color:#fff}
.oddbig button:active:not(:disabled){transform:scale(.97)}
.oddbig button.picked{background:var(--primary);border-color:var(--primary-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 16px rgba(79,92,243,.45)}
.oddbig button.picked .k{color:rgba(255,255,255,.9)}
.oddbig button:disabled{background:transparent;border-color:var(--line);box-shadow:none;opacity:.5}
@media (hover:hover){
  .oddbig button:not(:disabled):hover{background:#2E2F36;border-color:rgba(255,255,255,.26);
    transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 16px rgba(0,0,0,.45)}
  .oddbig button.picked:hover{background:var(--primary-2)}
}
:root[data-theme="light"] .oddbig button{background:#FFF;border-color:rgba(15,18,25,.16)}
:root[data-theme="light"] .oddbig button .v,:root[data-theme="light"] .oddbig button .num{color:var(--text)}
:root[data-theme="light"] .oddbig button.picked .v{color:#fff}

/* ---- the payout is what the slip is for: make it the headline ---- */
.payout{background:linear-gradient(180deg,rgba(22,208,122,.10),transparent 70%),var(--surface-2);
  border:1px solid rgba(22,208,122,.24);border-radius:var(--r-sm);
  padding:13px 15px 12px;margin:10px 0 4px;text-align:center}
.payout .p-l{font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.payout .p-v{font-family:var(--font-d);font-size:clamp(26px,7vw,34px);font-weight:680;
  letter-spacing:-.015em;line-height:1.1;color:var(--up);margin-top:3px;
  transition:transform .22s cubic-bezier(.2,.9,.25,1)}
.payout.on .p-v{animation:payPop .3s cubic-bezier(.2,.9,.25,1)}
@keyframes payPop{0%{transform:scale(.94);opacity:.6}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
.payout .p-m{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.payout .p-m span{font-family:var(--font-d);font-size:11.5px;font-weight:600;
  padding:3px 8px;border-radius:var(--r-xs);background:var(--surface-3);color:var(--text-2)}
.payout .p-bon{background:var(--up-dim)!important;color:var(--up-on-dim)!important}
.payout .p-net{background:var(--primary-dim)!important;color:var(--primary-on-dim)!important}
:root[data-theme="light"] .payout{background:linear-gradient(180deg,rgba(0,162,90,.09),transparent 70%),#FFF}

/* ================= admin ================= */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px}
.acard .k{font-size:11.5px;color:var(--text-3);font-weight:600;letter-spacing:.02em}
.acard .v{font-family:var(--font-d);font-size:22px;font-weight:680;letter-spacing:-.01em;margin-top:3px}
.acard .s{font-size:11.5px;color:var(--text-3);font-weight:520;margin-top:3px}
.acols{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){ .acols{grid-template-columns:1fr 1fr;gap:0 18px} }

.abars{display:flex;align-items:flex-end;gap:3px;height:120px;overflow-x:auto;scrollbar-width:none}
.abars::-webkit-scrollbar{display:none}
.abars .ab{flex:1;min-width:14px;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:5px}
.abars .ab i{display:block;width:100%;background:var(--primary);border-radius:3px 3px 0 0;min-height:2px;
  animation:barGrow .6s cubic-bezier(.2,.9,.25,1) both}
.abars .ab span{font-size:9.5px;color:var(--text-3);font-weight:600;white-space:nowrap;
  font-family:var(--font-d)}
.abars.hours .ab i{background:var(--up)}

.atable{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.atable table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.atable th{text-align:left;font-size:11.5px;color:var(--text-3);font-weight:600;padding:10px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.atable td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.atable tbody tr:last-child td{border-bottom:0}
.atable tbody tr:hover{background:var(--surface-2)}
.atable a{color:var(--primary-2);font-weight:600}
.adminlogin .card{border-color:var(--line-2)}

/* ================= first-run welcome ================= */
.welcome{text-align:center;padding:6px 2px 4px}
.wc-art{min-height:118px;display:grid;place-items:center;margin-bottom:6px}
.wc-amt{font-family:var(--font-d);font-size:clamp(38px,11vw,52px);font-weight:680;
  letter-spacing:-.02em;line-height:1;color:var(--up)}
.wc-eq{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--text-3);
  background:var(--surface-2);border-radius:var(--pill);padding:5px 12px;display:inline-block}
.wc-ico{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;
  animation:wcPop .45s cubic-bezier(.2,.9,.25,1) both}
.wc-ico.paper{background:var(--primary-dim);color:var(--primary-2)}
.wc-ico.real{background:var(--up-dim);color:var(--up)}
@keyframes wcPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.wc-rank{width:100%;max-width:230px;display:flex;flex-direction:column;gap:9px}
.wc-rank .wr{display:flex;align-items:center;gap:9px}
.wc-rank .wr .m{width:20px;height:20px;border-radius:50%;background:var(--surface-3);
  font-family:var(--font-d);font-size:11px;font-weight:680;display:grid;place-items:center;flex:none}
.wc-rank .wr:first-child .m{background:var(--gold);color:#241800}
.wc-rank .wr i{height:9px;border-radius:5px;background:var(--primary);
  animation:wcBar .6s cubic-bezier(.2,.9,.25,1) both;animation-delay:var(--d)}
@keyframes wcBar{from{width:0!important;opacity:0}to{opacity:1}}
.wc-t{margin:2px 0 6px;font-size:19px;font-weight:680;letter-spacing:-.025em;line-height:1.3}
.wc-s{margin:0 0 16px;font-size:14px;color:var(--text-2);line-height:1.55;word-break:keep-all}
.wc-dots{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.wc-dots i{width:6px;height:6px;border-radius:50%;background:var(--surface-3);transition:all .2s ease}
.wc-dots i.on{width:18px;border-radius:3px;background:var(--primary)}
.welcome-sheet .grab{margin-bottom:8px}
@media (prefers-reduced-motion:reduce){ .wc-ico,.wc-rank .wr i{animation:none} }

/* ---- 따라 걸기 ---- */
.btn.follow{background:var(--primary-dim);color:var(--primary-2);border-color:rgba(79,92,243,.35);
  font-weight:680;gap:6px}
.btn.follow:hover{background:var(--primary);color:#fff;border-color:transparent}

/* ---- six-box verification code ---- */
.codebox{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:16px 0 4px}
.codebox .cd{height:58px;text-align:center;font-family:var(--font-d);font-size:26px;font-weight:680;
  background:var(--bg-1);border:1.5px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);
  caret-color:var(--primary);transition:border-color .15s ease,transform .12s cubic-bezier(.2,.8,.2,1),background .15s ease}
.codebox .cd:focus{outline:none;border-color:var(--primary);transform:translateY(-2px);
  box-shadow:0 0 0 3px var(--primary-dim)}
.codebox .cd.filled{border-color:var(--primary);background:var(--primary-dim)}
.codebox.shake{animation:cshake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes cshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.codebox.done .cd{border-color:var(--up);background:var(--up-dim);color:var(--up);
  animation:cdone .34s cubic-bezier(.2,.9,.25,1) both}
.codebox.done .cd:nth-child(2){animation-delay:.04s}.codebox.done .cd:nth-child(3){animation-delay:.08s}
.codebox.done .cd:nth-child(4){animation-delay:.12s}.codebox.done .cd:nth-child(5){animation-delay:.16s}
.codebox.done .cd:nth-child(6){animation-delay:.2s}
@keyframes cdone{50%{transform:translateY(-6px) scale(1.06)}100%{transform:none}}
.codefoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px}
.linkbtn{color:var(--primary-2);font-weight:600;font-size:12.5px}
.linkbtn:hover{text-decoration:underline}
@media (max-width:380px){ .codebox{gap:6px} .codebox .cd{height:50px;font-size:22px} }
@media (prefers-reduced-motion:reduce){ .codebox.shake,.codebox.done .cd{animation:none} }
/* the slip bar animates only when it first appears, never on a menu switch */
.slipbar.rise{animation:riseX .28s cubic-bezier(.2,.9,.2,1)}

/* social sign-in */
.social{display:grid;gap:8px;margin:14px 0 4px}
.social button{height:48px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:center;gap:9px;font-weight:680;font-size:14.5px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--text);
  transition:transform .11s cubic-bezier(.2,.8,.2,1),filter .15s ease,background .15s ease}
.social button:active{transform:scale(.975)}
.social .kakao{background:#FEE500;color:#191600;border-color:transparent}
.social .kakao:hover{filter:brightness(.96)}
.social .google{background:#fff;color:#1F1F1F;border-color:rgba(0,0,0,.14)}
.social .google:hover{background:#F3F4F6}
.social svg{width:18px;height:18px;flex:none}

/* ---- animation audit ----------------------------------------------------
   Same bug class as the slip bar: entrance animations on base classes replay
   whenever their element is re-created, and the 30s poll re-renders. Anything
   that plays on mount must be suppressed on a same-route/back update. */
.view.quiet .pv-mid,
.view.quiet .payout .p-v,
.view.quiet .wc-ico,
.view.quiet .abars .ab i,
.view.quiet .cbanner{animation:none!important}

/* the attendance button pulsed forever; three nudges make the point and stop */
.attend .btn.primary:not(:disabled){animation:nudge 2.4s ease-in-out 1.2s 3}

/* one live dot per screen region is enough motion; rows and cards stay still */
.mrow .live-dot,
.ticker .live-dot,
.date-h .live-dot{animation:none}

/* honour the OS setting everywhere, including the newer additions */
@media (prefers-reduced-motion:reduce){
  .slipbar.rise,.payout.on .p-v,.pv-mid,.abars .ab i,
  .attend .btn.primary,.nav a.on,.live-dot{animation:none!important}
  
}

/* ============ 약관 · 방침 문서 ============ */
.legal{max-width:760px;padding:4px 0 8px}
.lg-head{padding:14px 0 12px;border-bottom:2px solid var(--line-2);margin-bottom:18px}
.lg-head h1{font-size:24px;letter-spacing:-.03em;margin:0 0 6px;font-weight:720}
.lg-date{font-size:12.5px;font-weight:600;color:var(--text-3)}
.lg-lead{position:relative;font-size:14.5px;line-height:1.72;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:17px 16px 14px;margin:0 0 26px;font-weight:520}
.lg-lead::before{content:"";position:absolute;top:7px;left:14px;right:14px;height:1px;
  background:var(--perf)}
.lg-sec{margin:0 0 22px}
.lg-sec h2{font-size:15px;font-weight:680;letter-spacing:-.02em;margin:0 0 9px;color:var(--text)}
.lg-sec p{font-size:14px;line-height:1.78;color:var(--text-2);margin:0 0 5px;font-weight:500;word-break:keep-all}
.lg-sec p.ind{position:relative;padding-left:15px;color:var(--text-3);margin-left:2px}
.lg-sec p.ind::before{content:"";position:absolute;left:2px;top:11px;width:4px;height:4px;
  border-radius:50%;background:var(--line-2)}
.lg-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;margin:8px 0 4px;display:grid;gap:6px}
.lg-box div{font-size:13.5px;font-weight:560;color:var(--text);display:flex;gap:10px}
.lg-box span{color:var(--text-3);font-weight:600;min-width:132px;flex:none}
.lg-box a{color:var(--primary);font-weight:600}
.lg-need{color:var(--down);font-weight:640;background:var(--down-dim);
  padding:1px 8px;border-radius:var(--r-xs);font-size:12.5px}
.lg-tail{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--text-3)}
.lg-biz{margin-top:14px;display:grid;gap:6px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.lg-biz div{font-size:13px;font-weight:560;display:flex;gap:10px;color:var(--text)}
.lg-biz span{color:var(--text-3);font-weight:600;min-width:110px;flex:none}
.lg-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.lg-links a{font-size:13px;font-weight:640;color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.lg-links a:hover{border-color:var(--primary);color:var(--primary)}

/* ============ 푸터 ============ */
.foot{margin-top:34px;padding:20px 0 8px;border-top:1px solid var(--line)}
.fnote{font-size:12.5px;line-height:1.7;color:var(--text-3);font-weight:520;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;word-break:keep-all}
.fnote b{color:var(--text);font-weight:680}
.flinks{display:flex;flex-wrap:wrap;gap:0 16px;margin:10px 0 6px}
.flinks a{font-size:12.5px;font-weight:600;color:var(--text-3);padding:7px 0;display:inline-block}
.flinks a:hover{color:var(--primary)}
.flinks a.em{color:var(--text-2);font-weight:680}
.fcopy{font-size:12px;font-weight:560;color:var(--text-3);opacity:.75}

/* ============ 가입 동의 ============ */
.consent{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);overflow:hidden}
.cs{display:flex;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;
  font-size:13.5px;font-weight:560;color:var(--text-2);transition:background .14s}
.cs:hover{background:var(--surface-3)}
.cs.all{font-size:14px;font-weight:680;color:var(--text);border-bottom:1px solid var(--line);
  background:var(--surface-3)}
.cs input{width:19px;height:19px;flex:none;accent-color:var(--primary);cursor:pointer;margin:0}
.cs span{flex:1;display:flex;align-items:center;gap:7px}
.cs em{font-style:normal;font-size:11px;font-weight:680;color:var(--primary);
  background:var(--primary-dim);padding:2px 6px;border-radius:var(--r-xs);flex:none}
.cs-list .cs{padding:8px 13px}
.cs-view{font-size:12px;font-weight:640;color:var(--text-3);text-decoration:underline;
  background:none;border:0;cursor:pointer;padding:2px 0;flex:none}
.cs-view:hover{color:var(--primary)}
.cs-sum{border-top:1px solid var(--line);padding:12px 13px;display:grid;gap:7px;
  background:var(--bg-1)}
.cs-sum div{font-size:12.5px;line-height:1.6;font-weight:520;color:var(--text-2);
  display:flex;gap:9px;word-break:keep-all}
.cs-sum span{color:var(--text-3);font-weight:680;min-width:66px;flex:none}
.cs-sum a{font-size:12.5px;font-weight:640;color:var(--primary);margin-top:2px}
@keyframes cs-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cs.shake{animation:cs-shake .38s ease;background:var(--down-dim)}
@media (prefers-reduced-motion:reduce){.cs.shake{animation:none}}

/* ============ 배팅슬립: 당첨금과 버튼 고정 ============ */
/* 시트 안에서는 픽 목록만 스크롤하고, 예상 당첨금과 배팅 버튼은
   항상 화면에 남는다. 4폴더 이상일 때 버튼이 밀려나던 문제를 없앤다. */
.sheet.slip-sheet{max-height:88dvh;overflow:hidden;display:flex;flex-direction:column}
.sheet.slip-sheet .slip{flex:1;min-height:0;gap:0}
.slip-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
.slip-foot{flex:none;padding-top:10px;display:flex;flex-direction:column;gap:8px;
  background:var(--bg-1);position:relative}
.slip-foot::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
  background:linear-gradient(to top,var(--bg-1),transparent);pointer-events:none}
/* PC 레일에는 높이 제한이 없으므로 그대로 흐르게 둔다 */
.slip-pane .slip-scroll{overflow:visible}
.slip-pane .slip-foot::before{display:none}

/* 예상 당첨금: 세 줄에서 두 줄로 */
.payout{padding:9px 13px 9px;margin:0;text-align:left}
.payout .p-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.payout .p-l{flex:none}
.payout .p-v{font-size:clamp(23px,6vw,28px);margin-top:0;text-align:right}
.payout .p-m{justify-content:flex-start;margin-top:6px;gap:5px}
.payout .p-m span{font-size:11px;padding:2px 7px}

/* 한도 표는 접어 둔다. 총 배당과 보너스는 위 칩에 이미 있다 */
.slip-more{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-1)}
.slip-more summary{list-style:none;cursor:pointer;padding:9px 13px;font-size:12.5px;
  font-weight:640;color:var(--text-3);display:flex;align-items:center;justify-content:space-between}
.slip-more summary::-webkit-details-marker{display:none}
.slip-more summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.slip-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.slip-more summary:hover{color:var(--text-2)}
.slip-more .slip-sum{border:0;border-top:1px solid var(--line);border-radius:0;padding:0 13px}
.slip-more .slip-sum > div{height:33px;font-size:12.5px}

/* ============ 주간 대회 배너: 5줄 -> 2줄 ============ */
/* 첫 화면의 절반을 먹던 배너를 제목 / 상금 / 요약 세 줄로 압축했다.
   카운트다운은 제목 줄 오른쪽으로 옮기고, 2·3위 칩은 한 줄로 눕혔다.
   위쪽 티켓 블록이 .cd에 구분선과 여백을 다시 넣으므로 여기서 덮어쓴다. */
.cbanner{padding:10px 14px 9px;--ny:50%}
.cbanner .ct{font-size:11px;gap:6px;align-items:center;display:flex}
.cbanner .ct .clock{margin-left:auto;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;
  padding:3px 8px;font-size:11px;letter-spacing:.02em}

.cbanner .ch{margin:0;flex:1;min-width:0;font-size:26px;line-height:1.02;white-space:nowrap}
.cbanner .ch small{font-size:13px;font-weight:680;opacity:.78;letter-spacing:0}

.cbanner .cd{border-top:0;padding-top:0;margin-top:7px;font-size:11px;align-items:center}
.cbanner .cd .cs{font-size:11px;opacity:.85;font-weight:600}

@media (max-width:359px){
  .cbanner .ch{font-size:22px}
  .cbanner .ch small{font-size:11px}
  
}

/* ============ 잘려 보이던 곳 ============ */
/* 상태 탭: 4칸을 균등 분할하면 "배팅가능 148"이 좁은 화면에서 두 줄로 접혔다.
   한 줄을 보장하고, 그래도 넘치면 가로로 밀리게 둔다. */
.tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;flex:1 0 auto;padding:0 10px;gap:5px}
@media (max-width:399px){
  .tabs button{font-size:14px;padding:0 8px}
  .tabs .cnt{font-size:10.5px;padding:1px 5px}
}
/* 대회 배너 제목 줄: 카운트다운이 닫기 버튼 밑으로 들어가지 않게 자리를 비운다 */
.cbanner .ct{padding-right:30px}

/* ============ 설정 · 배팅 옵션 ============ */
.toggle{width:46px;height:27px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--line);position:relative;flex:none;transition:background .18s ease}
.toggle i{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:var(--text-3);transition:transform .18s cubic-bezier(.2,.9,.2,1),background .18s ease}
.toggle.on{background:var(--primary);border-color:transparent}
.toggle.on i{transform:translateX(19px);background:#fff}

.btn.danger{background:var(--down-dim);border-color:rgba(255,93,93,.30);color:var(--down)}
.btn.danger:hover{background:rgba(255,93,93,.20)}
.warnbox{border:1px solid rgba(255,93,93,.28);background:var(--down-dim);
  border-radius:var(--r-sm);padding:12px 14px;margin:2px 0 16px;display:grid;gap:7px}
.warnbox div{font-size:13px;font-weight:560;color:var(--text);line-height:1.5;
  padding-left:15px;position:relative;word-break:keep-all}
.warnbox div::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--down)}

/* 배당 변경 확인 */
.oddsdiff{display:flex;align-items:center;gap:12px;margin:4px 0 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.oddsdiff > div:not(.ar){flex:1;text-align:center}
.oddsdiff span{display:block;font-size:11.5px;font-weight:640;color:var(--text-3);margin-bottom:4px}
.oddsdiff b{font-size:22px;font-weight:720;font-family:var(--font-d);letter-spacing:-.01em}
.oddsdiff .ar{flex:none;color:var(--text-3);font-size:15px}
.oddsdiff .up{color:var(--up)} .oddsdiff .down{color:var(--down)}

/* 정렬 줄 */

/* 데이터 지연: 소스가 실제로 오래됐을 때만 뜨는 작은 표시 */
.lagchip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 8px;border-radius:var(--pill);
  background:rgba(245,158,11,.14);color:var(--point);font-size:11.5px;font-weight:680;line-height:1.5;vertical-align:1px;white-space:nowrap}
.lagchip i{font-style:normal}
.lagchip b{font-weight:600;opacity:.8}
/* 보드에서는 정렬 줄 위에 따로 둔다. 정렬 줄은 모바일 폭에서 이미 꽉 차 있다. */
.lagrow{margin:0 0 8px}
.lagrow .lagchip{margin-left:0}
.segmented.sm button{height:30px;padding:0 11px;font-size:12.5px}

/* 리그 칩 즐겨찾기 */
.chips .chip{position:relative}
.chip .star{display:inline-flex;align-items:center;margin-left:5px;opacity:.32;
  transition:opacity .14s,color .14s;vertical-align:-2px}
.chip .star svg{width:13px;height:13px}
.chip .star:hover{opacity:.9}
.chip .star.on{opacity:1;color:var(--gold)}
.chip .star.on svg{fill:var(--gold)}
.chip.fav{color:var(--gold);border-color:rgba(246,183,60,.34)}
.chip.fav svg{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.chip.fav.on{background:rgba(246,183,60,.16);border-color:var(--gold)}

/* 폴더수별 성적 */

.fl{font-size:11.5px;font-weight:640;color:var(--text-3);margin-bottom:5px}

.fs{font-size:11px;font-weight:560;color:var(--text-3);margin-top:5px}

/* 시트는 바닥에 붙어 위로 자란다. 설정처럼 내용이 길어지면 화면 위로
   넘쳐 손이 닿지 않았다. 슬립 시트는 아래에서 따로 flex 로 잡는다. */
.sheet{max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}

/* ============ 배팅슬립 (모바일): 스크롤과 여백 ============ */
/* .slip-legs 에 overflow:hidden 이 있어 flex 안에서 최소 높이가 0 이 되고,
   내용을 밀어내는 대신 스스로 줄어들며 잘라냈다. 그래서 스크롤이 없었다. */
.slip-scroll > *{flex:none}
.slip-scroll{overscroll-behavior:contain}
.sheet.slip-sheet{padding-bottom:calc(24px + var(--safe-b))}
.sheet.slip-sheet .slip-h{padding:2px 0 12px}
.sheet .grab{margin-bottom:14px}
[hidden]{display:none!important}

/* ============ 배팅내역: 적중 / 미적중 색 구분 ============ */
.bet.won{background:rgba(22,208,122,.055)}
.bet.lost{background:rgba(255,93,93,.055)}
.bet.won .ba{color:var(--up)} .bet.lost .ba{color:var(--down)}
.bet.won .ba small{color:rgba(22,208,122,.75)} .bet.lost .ba small{color:rgba(255,93,93,.7)}
.bet .tag{font-size:11.5px;padding:3px 8px}
.bet .bacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
:root[data-theme="light"] .bet.won{background:rgba(0,162,90,.06)}
:root[data-theme="light"] .bet.lost{background:rgba(220,47,60,.06)}

/* ============ 배팅 상세 시트 ============ */
.bd-legs{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.bd-leg{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.bd-leg.won{border-color:rgba(22,208,122,.35)} .bd-leg.lost{border-color:rgba(255,93,93,.35)}
.bd-l1{display:flex;align-items:center;gap:8px;font-size:14px}
.bd-l1 .dot{width:8px;height:8px;border-radius:50%;flex:none}
.bd-l1 b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:680}
.bd-l1 .lo{font-weight:680;color:var(--text-2)}
.bd-l2{display:flex;justify-content:space-between;gap:10px;margin-top:4px;font-size:12.5px;color:var(--text-2);font-weight:520}
.bd-l2 b{color:var(--text)}
.bd-l3{font-size:11.5px;color:var(--text-3);font-weight:520;margin-top:2px}
.bd-math{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 12px}
.bd-math > div{display:flex;justify-content:space-between;align-items:center;height:36px;border-bottom:1px solid var(--line);font-size:13px}
.bd-math > div:last-child{border-bottom:0}
.bd-math span{color:var(--text-2);font-weight:600} .bd-math b{font-weight:680}

/* ============ 배당 변동 화살표 · 잠긴 배당 ============ */
/* 모서리 삼각형. 국내 관행대로 상승은 빨강, 하락은 파랑. 30분 뒤 사라진다. */
.odd{position:relative;overflow:hidden}
.odd .mv{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent}
.odd .mv.up{border-right-color:#FF6B6B}
.odd .mv.down{border-right-color:#4A8CFF}
.odd .lk{display:inline-flex;opacity:.65}
.odd .lk svg{width:13px;height:13px}

/* ============ 리그별 묶음 ============ */
.lgroup{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.lg-hd{width:100%;display:flex;align-items:center;gap:7px;padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--text);text-align:left;background:var(--surface-2)}
.lg-hd:hover{background:var(--surface-3)}
.lg-hd .flag{font-size:15px;line-height:1} .lg-hd .cn{color:var(--text-2)} .lg-hd .sep{color:var(--text-3)}
.lg-hd b{font-weight:680;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-hd .dot{width:7px;height:7px;border-radius:50%;flex:none}
.lg-hd .n{color:var(--text-3);font-weight:640;font-size:12px}
.lg-hd .chev{width:16px;height:16px;color:var(--text-3);display:inline-flex;flex:none}
.lg-hd .chev svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .18s ease}
.lgroup.closed .lg-hd .chev svg{transform:rotate(0deg)}
.lgroup .mlist{border-radius:0;border:0}

/* ============ 모바일 매치 행 v2: 마켓마다 한 줄, 팀 이름이 버튼 안에 ============ */
.mrow.v2{display:block;padding:10px 10px 10px}
.mrow.v2 .mhead{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:680;font-size:12.5px;color:var(--text-2);min-width:0}
.mrow.v2 .mhead .lg{flex:none;width:auto;min-width:54px;height:19px;padding:0 7px;border-radius:5px;font-size:10.5px;color:#fff;display:inline-grid;place-items:center;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.mrow.v2 .mhead .t{color:var(--text);font-weight:680}
.mrow.v2 .mhead .pn{color:var(--text-3);font-weight:560;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mrow.v2 .mhead .more{margin-left:auto;display:inline-flex;align-items:center;gap:2px;color:var(--text-3);font-size:11.5px;font-weight:600;white-space:nowrap;padding:8px 0 8px 10px;margin-top:-8px;margin-bottom:-8px}
.mrow.v2 .mhead .more svg{width:13px;height:13px}
.mrow.v2 .mk{display:grid;grid-template-columns:44px 1fr 40px 1fr;gap:5px;align-items:stretch;margin-top:5px}
.mrow.v2 .mk-l{font-size:11px;font-weight:640;color:var(--text-3);display:flex;align-items:center;white-space:nowrap}
.mrow.v2 .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;line-height:1.05}
.mrow.v2 .mid b{font-size:12.5px;font-weight:720;color:var(--text-2);font-variant-numeric:tabular-nums}
.mrow.v2 .mid small{font-size:9.5px;font-weight:600;color:var(--text-3);margin-top:2px}
.odd.o2{height:44px;min-width:0;padding:0 10px;border-radius:10px;flex-direction:row;justify-content:space-between;gap:8px;font-size:14px;overflow:hidden}
.odd.o2.r{flex-direction:row-reverse}
.odd.o2 .tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:640;color:var(--text-2);text-align:left}
.odd.o2.r .tn{text-align:right}
.odd.o2 .num{flex:none;font-size:14.5px;font-weight:720}
.odd.o2.picked .tn,.odd.o2:hover .tn{color:rgba(255,255,255,.85)}
.odd.o2.off .tn{color:var(--text-3)}

/* ============ 레벨 ============ */
.lvl{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:6px;border-radius:5px;font-family:var(--font-d);font-size:11px;font-weight:680;letter-spacing:.03em;background:var(--primary-dim);color:var(--primary-2);vertical-align:2px}

/* ============ 내 링크 ============ */
.mylinks{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.mylink{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:640;color:var(--text);max-width:100%}
.mylink svg{width:13px;height:13px;color:var(--text-3);flex:none}
.mylink span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.mylink small{font-size:11px;color:var(--text-3);font-weight:520;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.mylink:hover{border-color:var(--primary);color:var(--primary-2)}
.mylink.add{border-style:dashed;color:var(--text-2)}
.mylinks.compact{margin:10px 0 0}
.mylinks.compact .mylink{height:28px;padding:0 9px;font-size:12px}
.linklist{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px}
.linkrow{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 8px 8px 12px}
.linkrow .li{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.linkrow .li b{font-size:14px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkrow .li small{font-size:11.5px;color:var(--text-3);font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkrow .ibtn.sm{width:32px;height:32px}
.disc{margin-top:14px;font-size:11.5px;line-height:1.6;color:var(--text-3);font-weight:520;word-break:keep-all}

/* ============ 머니 내역 ============ */
.balance .delta .ledger-link{display:inline-flex;align-items:center;gap:2px;margin-left:10px;font-size:12px;font-weight:640;color:var(--primary-2)}
.balance .delta .ledger-link svg{width:12px;height:12px}
.ledger{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.lrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lr-l{min-width:0;flex:1}
.lr-k{font-size:13.5px;font-weight:640;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.lr-k .sep{color:var(--text-3)}
.lr-k .muted{color:var(--text-2)}
.lr-bet{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--text-3);background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:2px}
.lr-bet:hover{color:var(--primary-2);border-color:var(--primary)}
.lr-t{font-size:11.5px;color:var(--text-3);font-weight:520;margin-top:3px}
.lr-r{text-align:right;flex:none}
.lr-d{font-size:15px;font-weight:720}
.lr-b{font-size:11.5px;color:var(--text-3);font-weight:560;margin-top:2px}
.tag.new{background:var(--primary);color:#fff}

/* 홈 화면에 추가해 열면 iOS 상태 표시줄이 페이지 위에 겹친다(black-translucent).
   헤더가 그 아래로 들어가 검은 띠처럼 보이지 않도록 안전 영역만큼 띄운다. */
.topbar{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.pc-top{padding-top:calc(env(safe-area-inset-top,0px))}

/* ============ 손맛: 짧고, 합성 단계에서만, 방금 한 행동에만 ============ */
/* 규칙 셋. transform 과 opacity 만 움직인다. 200~320ms 를 넘기지 않는다.
   다시 그려질 때 재생되지 않도록 화면 진입(.view:not(.quiet))이나 클릭으로
   제자리에서 붙는 클래스에만 건다. 움직임 줄이기 설정은 위의 전역 규칙이 끈다. */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes sink{to{transform:translateY(40px);opacity:0}}
@keyframes fadeout{to{opacity:0}}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes goal{0%{transform:scale(1)}35%{transform:scale(1.4);color:var(--up)}100%{transform:scale(1)}}
@keyframes dotIn{from{transform:scale(.4);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes fill{from{transform:scaleX(0)}}

/* 픽을 담을 때 버튼이 한 번 튄다. 뺄 때는 조용히. */
.odd.pop{animation:pop .22s cubic-bezier(.2,.9,.2,1)}
/* 슬립 바의 숫자는 슬립이 바뀔 때만 다시 그려지므로 그때만 튄다. */
.slipbar .sb-n{animation:pop .28s cubic-bezier(.2,.9,.2,1)}
.slipbar:active{transform:translateX(-50%) scale(.985)}
/* 시트는 올라온 길로 내려간다. */
.sheet.closing{animation:sink .17s ease-in forwards;pointer-events:none}
.sheet-bg.closing{animation:fadeout .17s ease-in forwards;pointer-events:none}
/* 슬립에서 픽을 빼면 옆으로 빠져나간 뒤 지워진다. */
.slip-leg{transition:opacity .15s ease,transform .15s ease}
.slip-leg.out{opacity:0;transform:translateX(14px)}
/* 화면에 처음 들어올 때만 행이 차례로 올라온다. 필터를 눌러 다시 그릴 때는 조용하다. */
.view:not(.quiet) .mrow{animation:rowIn .26s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*16ms)}
/* 득점: 스코어가 바뀐 직후의 렌더에서만 숫자가 한 번 튄다. */
.goal{display:inline-block;animation:goal .8s cubic-bezier(.2,.9,.2,1)}
.mhero .sc.goal{display:block}
/* 출석 직후 그 렌더에서만 점이 차례로 차오른다. */
.attend.just .streak i.on{animation:dotIn .32s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--k,0)*55ms)}
/* 프로필에 들어올 때 레벨 바가 채워진다. */

/* 새 정산 표시는 배팅내역에 들어올 때 한 번 튄다. */
.view:not(.quiet) .tag.new{animation:pop .4s cubic-bezier(.2,.9,.2,1) .15s both}
/* 누르는 느낌. 누른 동안만 살짝 줄어든다. */
.chip,.tabs button,.lg-hd,.mylink,.lbrow,.segmented button,.nav a{transition:transform .1s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.chip:active,.tabs button:active,.lg-hd:active,.mylink:active,.lbrow:active,.segmented button:active{transform:scale(.97)}
.nav a:active{transform:scale(.9)}

/* ============ 모바일 속도 ============ */
/* 화면 밖 행은 레이아웃과 페인트를 건너뛴다. auto 는 한 번 그려진 크기를 기억해
   스크롤바가 튀지 않는다. */
/* content-visibility 는 뺐다. 실제 행 높이가 153~162px 인데 추정값이 140px 이라
   스크롤하며 문서 높이가 576px 씩 움직였고(측정), 그만큼 손가락 밑에서 화면이
   밀려 탭이 빗나갔다. 행 수를 24개로 줄인 것이 이미 대부분의 이득이라 되돌린다. */
/* 두 버튼 행: 라벨과 가운데 칸을 조금 줄여 팀 이름에 자리를 더 준다. */
.mrow.v2 .mk{grid-template-columns:40px 1fr 38px 1fr;gap:4px}
.mrow.v2 .mk-l{font-size:10.5px}
.odd.o2{padding:0 8px;gap:6px}
.odd.o2 .num{font-size:14px}
/* 손가락 크기. 경기 정보 줄은 30px, 배너 닫기와 정렬 버튼은 넓힌 터치 영역. */
.mrow.v2 .mhead{min-height:30px}

.segmented.sm button{height:34px}

/* 하단 탭: 안쪽 강조 모서리를 바깥 모서리와 동심으로.
   바깥 18px 에서 여백 6px 을 뺀 12px 이어야 두 곡선이 같은 중심을 돈다. */
.nav{padding:6px;border-radius:var(--r)}
.nav a{border-radius:var(--r-sm)}
.nav a.on{border-radius:var(--r-sm)}

/* ============ 하단 탭: 리퀴드 글래스 ============ */
/* 사용자 요청으로 이 요소만 유리로 만든다. 티켓 시스템의 "블러 없음" 규칙의
   의도적 예외. 블러 하나에 채도만 얹고, 윗면 하이라이트 한 줄로 두께를 낸다. */
.nav{
  background:rgba(20,21,26,.52);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.04),
    0 10px 30px rgba(0,0,0,.42),0 1px 2px rgba(0,0,0,.30);
  overflow:hidden;
}
/* 유리 윗면에 스치는 빛. 위쪽 45%만 살짝 밝다. */
.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 45%)}
.nav a{position:relative;z-index:1}
/* 선택된 탭: 브랜드색이 비치는 밝은 유리 캡슐 */
.nav a.on{
  background:rgba(79,92,243,.60);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.10),
    0 4px 14px rgba(79,92,243,.30);
}
:root[data-theme="light"] .nav{
  background:rgba(255,255,255,.56);border-color:rgba(15,18,25,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(15,18,25,.03),
    0 10px 30px rgba(16,24,40,.16),0 1px 2px rgba(16,24,40,.08);
}
:root[data-theme="light"] .nav::before{background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,0) 50%)}
:root[data-theme="light"] .nav a.on{background:rgba(79,92,243,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 14px rgba(79,92,243,.28)}
/* 투명도 줄이기를 켠 사람과 블러를 못 하는 브라우저는 불투명한 판으로 */
@media (prefers-reduced-transparency:reduce){
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
  .nav::before{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(20,21,26,.96)}
  :root[data-theme="light"] .nav{background:rgba(255,255,255,.96)}
}

/* ============ 슬립 바: 살짝 유리 ============ */
/* 행동 버튼이라 파란색은 또렷하게 남긴다. 뒤가 조금 비치고 윗면이 빛나는 정도.
   바로 아래 하단 탭과 같은 18px 모서리로 맞춘다. */
.slipbar{
  background:rgba(79,92,243,.80);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.10),
    0 12px 30px rgba(79,92,243,.36),0 1px 2px rgba(0,0,0,.25);
  overflow:hidden;
}
.slipbar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%)}
.slipbar > *{position:relative;z-index:1}
.slipbar .sb-n{background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.slipbar .sb-go{background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.30)}
:root[data-theme="light"] .slipbar{background:rgba(79,92,243,.88)}
@media (prefers-reduced-transparency:reduce){
  .slipbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--primary)}
  .slipbar::before{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .slipbar{background:var(--primary)}
}

/* 슬립 바: 입체 유리가 아니라 그냥 살짝 흐린 반투명 판. 하이라이트도 안쪽 그림자도 없다. */
.slipbar{
  background:rgba(79,92,243,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.slipbar::before{display:none}
.slipbar .sb-n{background:rgba(255,255,255,.16);box-shadow:none}
.slipbar .sb-go{background:rgba(255,255,255,.14);box-shadow:none}
:root[data-theme="light"] .slipbar{background:rgba(79,92,243,.84)}
/* 위 규칙이 같은 우선순위라 뒤에 와야 이긴다. 폴백을 다시 적는다. */
@media (prefers-reduced-transparency:reduce){
  .slipbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--primary)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .slipbar{background:var(--primary)}
}

/* 상단 바 (모바일): 슬립 바와 같은 살짝 흐린 반투명 판. 입체감 없이 블러만. */
.topbar{
  background:rgba(9,9,11,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
:root[data-theme="light"] .topbar{background:rgba(246,247,249,.78)}
@media (prefers-reduced-transparency:reduce){
  .topbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--bg)}
}

/* PC 상단 바: 모바일 상단 바와 같은 살짝 흐린 반투명 판. */
.pc-top{
  background:rgba(9,9,11,.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
:root[data-theme="light"] .pc-top{background:rgba(255,255,255,.78)}
@media (prefers-reduced-transparency:reduce){
  .pc-top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  :root[data-theme="light"] .pc-top{background:var(--bg-1)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pc-top{background:var(--bg)}
  :root[data-theme="light"] .pc-top{background:var(--bg-1)}
}

/* 종목 칩 */

.pc-left .sports a.on{color:var(--primary-2)}

/* PC 슬립 레일: 고정 푸터의 검은 배경은 모바일 시트에서만 필요하다.
   레일에서는 판보다 어두운 사각형으로 보이므로 지운다. */
.slip-pane .slip-foot{background:transparent;padding-top:10px}

/* ============ 자주 묻는 질문 ============ */
.faq{display:flex;flex-direction:column;gap:6px}
.faq-cat{font-size:12px;font-weight:680;letter-spacing:.04em;color:var(--text-3);margin:14px 0 2px;text-transform:uppercase}
.faq-cat:first-child{margin-top:2px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:13px 40px 13px 14px;font-size:14.5px;font-weight:640;color:var(--text);position:relative;line-height:1.45;word-break:keep-all}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item[open] summary{color:var(--primary-2)}
.faq-a{padding:0 14px 14px;font-size:14px;line-height:1.75;color:var(--text-2);font-weight:500;word-break:keep-all}

/* 정렬 줄: 시간 창과 정렬 두 묶음. 좁으면 정렬 묶음이 다음 줄 오른쪽으로 내려간다. */

.segmented.sm button{padding:0 10px}

/* ============ PC: 배팅 행도 마켓마다 한 줄 ============ */
@media (min-width:960px){
  .mrow.v2{padding:12px 14px}
  .mrow.v2 .mhead{font-size:13px;margin-bottom:9px}
  .mrow.v2 .mhead .lg{height:20px;font-size:10px;min-width:58px}
  .mrow.v2 .mk{grid-template-columns:56px 1fr 46px 1fr;gap:6px;margin-top:6px}
  .mrow.v2 .mk-l{font-size:12px}
  .mrow.v2 .mid b{font-size:13.5px}
  .odd.o2{height:46px;padding:0 12px;font-size:15px}
  .odd.o2 .tn{font-size:13.5px}
  .odd.o2 .num{font-size:15.5px}
}

/* ============ PC 상단 메뉴가 넘쳐 첫·마지막 항목이 잘리던 문제 ============ */
/* 8개 항목이 밴드보다 넓어 가로 스크롤이 생기고, 첫 항목이 브랜드 밑으로
   밀려 가운데를 눌러도 눌리지 않았다. 좁은 데스크톱에서 항목을 줄여 맞춘다. */
@media (min-width:960px){
  .pc-band ul{overflow-x:hidden}
  .pc-band a{padding:0 11px;font-size:14px;white-space:nowrap}
}
@media (min-width:960px) and (max-width:1279px){
  .pc-band a{padding:0 8px;font-size:13px;gap:4px}
  .pc-top{gap:14px;padding:0 16px}
  .pc-top .util a{padding:8px 8px;font-size:12.5px}
}

/* PC 상단 메뉴: 예전 밴드 규칙의 justify-content:center 가 남아 있어, 항목이
   넘칠 때 좌우로 똑같이 흘러넘쳤다. 왼쪽으로 넘친 부분은 스크롤로 닿을 수 없어
   첫 항목(라이브스코어)과 마지막 항목(공지/규정)의 가운데가 눌리지 않았다.
   왼쪽 정렬로 바꾸고, 좁은 데스크톱에서는 넘치지 않게 줄인다. */
@media (min-width:960px){
  .pc-band ul{justify-content:flex-start!important;overflow-x:auto}
}
@media (min-width:960px) and (max-width:1279px){
  .pc-band a{padding:0 3px;font-size:12px;gap:3px}
  .pc-band ul{gap:1px}
  .pc-band .pill{height:16px;padding:0 4px;font-size:10px}
  .pc-band .hot{font-size:9px;padding:0 3px;top:6px;right:3px}
  .pc-top{gap:10px;padding:0 12px}
  .pc-top .brand .bt{display:none}
}

/* 긴 팀 이름은 버튼 크기를 키우지 않고 두 줄까지 접는다. 44px 안에 두 줄이 들어간다. */
.odd.o2 .tn{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-height:1.12;max-height:2.24em;overflow:hidden;word-break:keep-all}
@media (min-width:960px){.odd.o2 .tn{line-height:1.14;max-height:2.28em}}

/* ============ 라이트 모드 가독성 ============ */
:root[data-theme="light"]{
  /* 흰 배경에서 4.5:1 을 넘도록 어둡게. 다크 테마 값은 그대로 둔다. */
  --up:#00803F; --up-dim:rgba(0,128,63,.12);
  --down:#C4212D; --down-dim:rgba(196,33,45,.10);
  --primary-2:#3D48D8;
  --text-3:#5A6270;
}
/* 상단 메뉴는 예전 어두운 밴드용 색(#D9DBFF)이 남아 흰 배경에서 안 보였다. */
:root[data-theme="light"] .pc-band a{color:var(--text-2)}
:root[data-theme="light"] .pc-band a:hover,
:root[data-theme="light"] .pc-band a.on{color:var(--text)}
:root[data-theme="light"] .pc-band a.on::after{background:var(--primary)}
/* 알약·배지의 글자색 */
:root[data-theme="light"] .pc-band .pill{background:var(--up);color:#fff}
:root[data-theme="light"] .nav .badge{background:var(--up);color:#fff}
:root[data-theme="light"] .hot{background:#D6249F;color:#fff}
:root[data-theme="light"] .avatar{color:#fff}
:root[data-theme="light"] .soon{color:var(--text-3)}
:root[data-theme="light"] .tag.push{background:rgba(15,18,25,.08);color:var(--text-2)}

/* 아주 긴 이름만 한 단계 작게. 두 줄과 합쳐 말줄임표 없이 들어간다. */
.odd.o2 .tn.long{font-size:11.5px;line-height:1.1;max-height:2.2em}
@media (min-width:960px){.odd.o2 .tn.long{font-size:12.5px}}
/* 라이트 모드: 버튼 안 팀 이름이 회색 배경에서 4.1:1 이었다. */
:root[data-theme="light"]{--text-2:#414855}
:root[data-theme="light"] .avatar{color:#fff;filter:saturate(1.05) brightness(.82)}
/* 아주 긴 영문 팀 이름은 세 줄까지. 44px 버튼 안에 그대로 들어간다. */
.odd.o2 .tn.long{-webkit-line-clamp:3;line-height:1.05;max-height:3.15em;font-size:11px}
@media (min-width:960px){.odd.o2 .tn.long{font-size:12px;line-height:1.08;max-height:3.24em}}

/* ============ 라이트 모드에서 흰 글자가 흰 배경에 얹히던 곳 ============ */
/* --ink 는 라이트 테마에서만 #FFFFFF 로 정의돼 있다. 이 값을 배경이나 글자색으로
   쓰면 라이트에서 흰 글자가 흰 배경에 얹힌다. 테마와 무관한 값으로 바꾼다. */
.cbanner .cd .clock{background:rgba(0,0,0,.30);color:#fff}
.lbrow .rank .medal,.medal{color:#1A1200}
:root[data-theme="light"] .avatar{filter:saturate(1.1) brightness(.70)}
:root[data-theme="light"] .cbanner .ct,
:root[data-theme="light"] .cbanner .ch,
:root[data-theme="light"] .cbanner .cs,
:root[data-theme="light"] .cbanner .cd{color:#fff}

/* 라이트 모드 아바타: 밝은 팔레트 위의 흰 이니셜이 안 읽혔다. filter 로 어둡게 하면
   글자까지 같이 흐려지므로, 색조를 유지한 채 배경만 4.5:1 이 되도록 낮춘 값을 쓴다. */
:root[data-theme="light"] .avatar{filter:none}
:root[data-theme="light"] .a0{background:#c73e9e}
:root[data-theme="light"] .a1{background:#4a56e6}
:root[data-theme="light"] .a2{background:#0e874f}
:root[data-theme="light"] .a3{background:#967025}
:root[data-theme="light"] .a4{background:#c74949}
:root[data-theme="light"] .a5{background:#158191}
:root[data-theme="light"] .a6{background:#7b66b7}
:root[data-theme="light"] .a7{background:#b35486}
:root[data-theme="light"] .a8{background:#20815d}
:root[data-theme="light"] .a9{background:#8a6912}
:root[data-theme="light"] .a10{background:#3f6ea6}
:root[data-theme="light"] .a11{background:#6b6e75}

/* 적중·미적중 카드의 보조 금액은 다크 테마 색을 알파 75%로 박아 둬서 라이트에서
   읽히지 않았다. 라이트에서는 토큰 색을 그대로 쓴다. */
:root[data-theme="light"] .bet.won .ba small{color:var(--up)}
:root[data-theme="light"] .bet.lost .ba small{color:var(--down)}
:root[data-theme="light"]{--text-3:#4E5563}

/* ============ 리그 순위표 (football-data.org) ============ */
.stand{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.st-h,.st-r{display:grid;grid-template-columns:34px 1fr 34px 60px 44px 40px;gap:6px;align-items:center;
  padding:9px 12px;font-size:12.5px}
.st-h{color:var(--text-3);font-weight:640;border-bottom:1px solid var(--line);font-size:11.5px}
.st-r{border-bottom:1px solid var(--line);font-weight:560;color:var(--text-2)}
.st-r:last-child{border-bottom:0}
.st-r .tm{display:flex;align-items:center;gap:7px;min-width:0;color:var(--text);font-weight:640;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-r .tm img{width:17px;height:17px;object-fit:contain;flex:none}
.st-h .tm{color:var(--text-3)}
.st-r .pts{font-weight:720;color:var(--text)}
.st-r.me{background:var(--primary-dim)}
.st-r.me .tm,.st-r.me .pts{color:var(--primary-2)}
.st-h span:not(.tm),.st-r span:not(.tm){text-align:right}
.st-h span:first-child,.st-r span:first-child{text-align:left}

/* 승무패는 가운데 무도 누를 수 있는 세 칸이다. 핸디캡·언더오버는 가운데가 선 표시. */
.mrow.v2 .mk3{grid-template-columns:40px 1fr 56px 1fr}
.odd.o2.c{position:relative;flex-direction:column;justify-content:center;gap:0;padding:0 4px}
.odd.o2.c .tn{position:absolute;top:4px;left:0;right:0;flex:none;text-align:center;font-size:10px;
  line-height:1;max-height:none;-webkit-line-clamp:1;pointer-events:none}
.odd.o2.c .num{font-size:13.5px;line-height:1}
@media (min-width:960px){.mrow.v2 .mk3{grid-template-columns:56px 1fr 64px 1fr}}
/* 경기 상세: 승무패는 큰 버튼 세 개 */
.oddbig.three{grid-template-columns:repeat(3,1fr)}

/* ============ 한 경기 빠른 배팅 시트 ============ */
.qb-open{width:100%;margin-top:8px;height:36px;border-radius:var(--r-sm);background:var(--primary-dim);
  border:1px solid rgba(79,92,243,.34);color:var(--primary-on-dim);font-weight:680;font-size:13px}
.qb-open:hover{background:var(--primary);color:#fff;border-color:transparent}
.qb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.qb-head b{font-size:15px;font-weight:720}
.qb-head small{margin-left:8px;color:var(--text-3);font-size:12.5px;font-weight:600}
.qb-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 12px;margin-bottom:12px}
.qb-teams .tm{font-size:14.5px;font-weight:680;text-align:center;word-break:keep-all;line-height:1.25}
.qb-teams .vs{font-size:12px;font-weight:680;color:var(--text-3)}
.qb-row{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;margin-bottom:8px}
.qb-l b{display:block;font-size:13.5px;font-weight:680}
.qb-l small{display:block;font-size:11.5px;font-weight:640;color:var(--primary-2);margin-top:2px;font-variant-numeric:tabular-nums}
.qb-b{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.qb-o{height:52px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .14s,border-color .14s,transform .1s}
.qb-o .t{font-size:11.5px;font-weight:640;color:var(--text-3)}
.qb-o .o{font-size:16px;font-weight:720;font-variant-numeric:tabular-nums}
.qb-o:active{transform:scale(.97)}
.qb-o.on{background:var(--primary);border-color:transparent;color:#fff}
.qb-o.on .t{color:rgba(255,255,255,.8)}
.qb-o.off{opacity:.4;pointer-events:none}
.qb-stake{display:flex;align-items:center;gap:10px;margin:14px 0 8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px}
.qb-stake > span{font-size:13px;font-weight:640;color:var(--text-2);flex:none}
.qb-stake input{flex:1;min-width:0;background:none;border:0;text-align:right;font-size:19px;font-weight:720;color:var(--text);outline:none}
.qb-stake b{font-size:14px;font-weight:680;color:var(--text-2);flex:none}
.qb-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.qb-chips button{height:36px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);
  font-size:12.5px;font-weight:640;color:var(--text-2)}
.qb-chips button:hover{background:var(--surface-3);color:var(--text)}
.qb-sum{margin-top:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 13px}
.qb-sum > div{display:flex;justify-content:space-between;align-items:center;height:36px;font-size:13px;
  border-bottom:1px solid var(--line)}
.qb-sum > div:last-child{border-bottom:0}
.qb-sum span{color:var(--text-2);font-weight:600}
.qb-sum b{font-weight:720;font-size:15px}
@media (min-width:960px){.qb-chips{grid-template-columns:repeat(6,1fr)}}

/* ============ 픽 게시판 · 커뮤니티 · 상점 ============ */

/* 작성자 한 줄. 목록에서도 상세에서도 같은 모양이어야 눈이 안 흔들린다. */

.rtag{flex:none;font-size:10.5px;font-weight:720;padding:2px 6px;border-radius:5px}
.rtag.hit{background:rgba(34,197,94,.16);color:#22C55E}
.rtag.miss{background:rgba(239,68,68,.14);color:var(--danger)}
.rtag.void{background:var(--surface-3);color:var(--text-3)}

/* 종목 아이콘 줄 */

/* 픽 카드 */
.picklist{display:grid;gap:10px;margin-top:var(--sp-2)}

/* 글 (픽 상세 · 게시글 공용) */
.article{max-width:720px}

.locked{text-align:center;background:var(--surface-2);border:1px dashed var(--line-2,var(--line));border-radius:var(--r);padding:30px 20px}
.locked .lk{font-size:32px;margin-bottom:8px}
.locked b{display:block;font-size:16px;font-weight:720;margin-bottom:6px}
.locked p{font-size:13px;color:var(--text-3);line-height:1.6;margin:0 0 16px}
.locked small{display:block;margin-top:10px;font-size:12px;color:var(--text-3);font-weight:600}

.vt{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 20px;border-radius:22px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:680;color:var(--text-2);
  transition:background .15s,border-color .15s,color .15s}
.vt svg{width:17px;height:17px}
.vt.down svg{transform:rotate(180deg)}
.vt b{font-variant-numeric:tabular-nums}
.vt.on{background:var(--primary);border-color:transparent;color:#fff}
.vt.down.on{background:var(--danger-solid)}
.vt.pop{animation:pop .28s ease}
.disc{text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;
  padding:14px 12px;background:var(--surface-2);border-radius:var(--r-sm);margin:14px 0 0}

/* 댓글 */
.cmts{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.cmts h3{font-size:14px;font-weight:720;margin:0 0 12px}
.cmts h3 b{color:var(--primary-2)}
.clist{display:grid;gap:14px}
.cm{display:flex;gap:9px}
.cm .cb{flex:1;min-width:0}
.cm .ch{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.cm .ch a{font-size:12.5px;font-weight:680}
.cm .ch a.glow{background:linear-gradient(90deg,var(--primary-2),var(--fx-glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.cm .ch .ttl{font-size:10px;font-weight:680;padding:1px 5px;border-radius:4px;background:var(--primary-dim);color:var(--primary-2)}
.cm .ch .t{font-size:11.5px;color:var(--text-3);font-weight:600}
.cm .ch .x{margin-left:auto;background:none;border:0;color:var(--text-3);font-size:17px;line-height:1;padding:0 4px}
.cm p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2);word-break:break-word}
.cin{display:flex;gap:8px;margin-top:16px}
.cin .input{flex:1}
.empty.sm{padding:20px;font-size:13px;color:var(--text-3);text-align:center}

/* 커뮤니티 목록 */
.tabs.scroll{overflow-x:auto;scrollbar-width:none}
.tabs.scroll::-webkit-scrollbar{display:none}
.tabs.scroll button{flex:none;padding:0 16px}
.postlist{display:grid;margin-top:var(--sp-2)}
.postrow{display:block;padding:13px 2px;border-bottom:1px solid var(--line)}
.postrow:hover{background:var(--surface-2)}

.pr-t{display:flex;gap:6px;align-items:baseline;margin-bottom:3px}
.pr-t .cat{flex:none;font-size:12.5px;font-weight:680;color:var(--primary-2)}
.pr-t b{font-size:14px;font-weight:680;line-height:1.4;word-break:keep-all}
.pr-x{font-size:12.5px;color:var(--text-3);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}
.pr-m{display:flex;gap:10px;font-size:11.5px;color:var(--text-3);font-weight:600;font-variant-numeric:tabular-nums}

/* 글쓰기 폼 */

.fl{display:block;font-size:12.5px;font-weight:680;color:var(--text-2);margin:16px 0 7px}
.fl .opt{font-weight:600;color:var(--text-3);font-size:11.5px;margin-left:4px}
.ta{min-height:180px;line-height:1.7;resize:vertical;font-family:inherit}

.sheet.tall{max-height:86vh}
.sh-t{font-size:17px;font-weight:720;margin:0 0 12px}
.sh-p{font-size:13.5px;line-height:1.65;color:var(--text-2);margin:0 0 14px}

/* 떠 있는 글쓰기 버튼 */

/* 상점 */
.ptbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--sp-2);
  background:linear-gradient(135deg,#1B1D2C,#2A2140);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ptbar > div span{display:block;font-size:12px;font-weight:640;color:rgba(255,255,255,.62);margin-bottom:6px}
.ptbar > div b{display:block;font-size:26px;line-height:1.1;font-weight:720;color:var(--point-on-dark);font-variant-numeric:tabular-nums}
.ptbar > div b small{font-size:14px;margin-left:2px}
.earnhint{font-size:11.5px;color:var(--text-3);line-height:1.6;margin:0 2px var(--sp-2);font-weight:600}
.shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shopitem{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s,transform .12s}
.shopitem:hover{border-color:var(--primary)}
.shopitem:active{transform:scale(.97)}
.shopitem[data-poor]{opacity:.55}
.shopitem .si{font-size:34px;line-height:1}
.shopitem .sn{font-size:13px;font-weight:680;text-align:center;word-break:keep-all}
.shopitem .sp{font-size:13px;font-weight:720;color:var(--point);font-variant-numeric:tabular-nums}
.shopitem .own{position:absolute;top:8px;right:8px;font-size:10px;font-weight:680;padding:2px 6px;
  border-radius:4px;background:var(--primary);color:#fff}
.buyrow{display:flex;justify-content:space-between;align-items:center;height:40px;
  border-bottom:1px solid var(--line);font-size:13.5px}
.buyrow span{color:var(--text-2);font-weight:640}
.buyrow b{font-weight:720;font-variant-numeric:tabular-nums}
.plist{max-height:60vh;overflow-y:auto;margin-top:6px}
.plrow{display:flex;align-items:center;gap:10px;height:44px;border-bottom:1px solid var(--line);font-size:13px}
.plrow span{flex:1;font-weight:640;color:var(--text-2)}
.plrow b{font-weight:720;font-variant-numeric:tabular-nums}
.plrow i{flex:none;font-style:normal;font-size:11.5px;color:var(--text-3);font-weight:600;width:60px;text-align:right}
.linkbtn{background:none;border:0;color:var(--primary-on-dim);font-size:12.5px;font-weight:680;padding:8px 6px;margin:-4px -6px}
.linkbtn.danger{color:var(--danger)}
@media (min-width:720px){.shopgrid{grid-template-columns:repeat(4,1fr)}}

/* ============ 홈 보드 내비게이션 (종목 · 날짜) ============ */

/* 달력 시트 */
.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calh b{font-size:15px;font-weight:720}
.calh button{background:none;border:0;color:var(--text-2);width:36px;height:36px;font-size:20px;border-radius:50%}
.calh button:hover{background:var(--surface-2);color:var(--text)}
.calg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.calg .wd{font-size:11.5px;font-weight:640;color:var(--text-3);padding:6px 0}
.calg .cd{position:relative;height:42px;border-radius:10px;background:none;border:0;
  font-size:14px;font-weight:640;color:var(--text)}
.calg .cd:disabled{color:var(--text-3);opacity:.35}
.calg .cd i{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:4px;height:4px;
  border-radius:50%;background:var(--primary-2)}
.calg .cd.today{color:var(--primary-2);font-weight:720}
.calg .cd.on{background:var(--primary);color:#fff}
.calg .cd.on i{background:#fff}

/* 급상승 랭킹 행 */
.lbrow.rise .rank{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px}
.lbrow.rise .rank b{font-size:14px;font-weight:720}
.dl{font-size:10px;font-weight:720;line-height:1}
.dl.up{color:var(--danger)}
.dl.down{color:#3B82F6}
.dl.flat,.dl.new{color:var(--text-3)}
.lb .who .n .nm.glow{background:linear-gradient(90deg,var(--primary-2),var(--fx-glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.lb .who .n .ttl{font-size:10px;font-weight:680;padding:1px 5px;border-radius:4px;background:var(--primary-dim);color:var(--primary-2);margin-left:5px}
.tabs.sub{margin-top:6px}

/* 슬립바가 떠 있는 동안에는 글쓰기 버튼이 그 위로 비켜선다. */

/* 보드 행 하단: 픽 쓰기 버튼 옆에 이 경기 분석 개수 */
.mfoot{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.mfoot .qb-open{flex:1;margin-top:0}
.pn-link{flex:none;display:inline-flex;align-items:center;padding:0 13px;height:36px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;font-weight:680;color:var(--text-2)}
.pn-link:hover{border-color:var(--primary);color:var(--primary-2)}
.pn-link::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary-2);margin-right:6px}

/* 경기 상세의 분석 카드 안 예측 줄 */

/* ============ 배팅 좋아요 · 댓글 ============ */
.bsoc{display:flex;align-items:center;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.bs-b{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 8px;border-radius:var(--r-sm);
  color:var(--text-3);font-size:13px;font-weight:680;transition:color .15s,background .15s}
.bs-b svg{width:19px;height:19px;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.bs-b:hover{background:var(--surface-2);color:var(--text-2)}
.bs-b.on{color:var(--danger)}
.bs-b.on svg{fill:var(--danger)}
.bs-b.pop svg{animation:heartpop .38s cubic-bezier(.22,1,.36,1)}
@keyframes heartpop{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
.bs-all{margin-left:auto;background:none;border:0;color:var(--text-3);font-size:12.5px;font-weight:640;padding:6px 4px}
.bs-all:hover{color:var(--text-2)}

/* ============ 라이브 채팅 ============ */
.chatwrap{display:flex;flex-direction:column;gap:10px}
.chiproom{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chiproom::-webkit-scrollbar{display:none}
.chiproom .chip{flex:none}
.chatlog{height:clamp(220px,calc(100dvh - 340px),520px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.cmsg{display:flex;gap:8px;align-items:flex-start;animation:cmsgin .22s ease both}
@keyframes cmsgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cmsg.mine{flex-direction:row-reverse}
.cmsg .cbody{min-width:0;max-width:78%}
.cmsg.mine .cbody{text-align:right}
.cmeta{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.cmsg.mine .cmeta{justify-content:flex-end}
.cmeta a{font-size:12px;font-weight:680;color:var(--text-2)}
.cmeta a.glow{background:linear-gradient(90deg,var(--primary-2),var(--fx-glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.cmeta .ttl{font-size:10px;font-weight:680;padding:1px 5px;border-radius:4px;background:var(--primary-dim);color:var(--primary-2)}
.cmeta .t{font-size:11px;color:var(--text-3);font-weight:600;font-variant-numeric:tabular-nums}
.ctxt{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  padding:8px 12px;font-size:13.5px;line-height:1.5;color:var(--text);word-break:break-word;text-align:left}
.cmsg.mine .ctxt{background:var(--primary);border-color:transparent;color:#fff}
.chatin{display:flex;gap:8px}
.chatin .input{flex:1;min-width:0}

/* ============ 쪽지 ============ */

.dmlog{height:min(50vh,440px);overflow-y:auto;padding:14px 2px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}

.ta.sm{min-height:76px}
.dmblocked{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;font-size:13px;font-weight:640;color:var(--text-2)}

/* 내 프로필의 바로가기 세 칸 */

.slip-open .chatlog{height:clamp(200px,calc(100dvh - 404px),460px)}
@media (min-width:960px){.chatlog,.slip-open .chatlog{height:clamp(280px,calc(100dvh - 300px),560px)}}

/* ============ 마이페이지 ============ */

.ptbar > a.btn{flex:none}

/* ============ 설정 ============ */

/* ============ 아이템 ============ */
.tablink{margin-left:auto;align-self:center;font-size:12.5px;font-weight:680;color:var(--primary-on-dim);padding:0 4px}
.itemlist{display:grid;margin-top:var(--sp-2)}
.itemrow{display:flex;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line)}
.itemrow:hover{background:var(--surface-2)}
.itemrow .ic{width:44px;height:44px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:22px;flex:none}
.ir-c{flex:1;min-width:0}
.ir-c b{display:block;font-size:14.5px;font-weight:680}
.ir-c small{display:block;font-size:12px;color:var(--text-3);font-weight:600;margin-top:2px}
.itemrow .qty{font-size:17px;font-weight:720;font-variant-numeric:tabular-nums}
.itemrow .qty i{font-size:12px;font-style:normal;color:var(--text-3);margin-left:2px}
.itemrow .ch{width:17px;height:17px;color:var(--text-3);flex:none}
.itemhead{text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:28px 20px}
.itemhead .big{font-size:52px;line-height:1;display:block;margin-bottom:12px}
.itemhead h1{font-size:22px;font-weight:720;margin:0 0 6px}
.itemhead p{font-size:12.5px;color:var(--text-3);font-weight:600;margin:0}
.itemhead .haveline{margin-top:12px;font-size:13px;font-weight:680;color:var(--primary-on-dim)}
.tierlist{display:grid;gap:8px;margin-top:var(--sp-2)}
.tier{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);text-align:left}
.tier .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none;position:relative}
.tier.on{border-color:var(--primary)}
.tier.on .rd{border-color:var(--primary)}
.tier.on .rd::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--primary)}
.tier b{flex:1;font-size:15px;font-weight:680}
.tier.on b{color:var(--primary-on-dim)}
.tier .pr{font-size:15px;font-weight:720;font-variant-numeric:tabular-nums}
.itemdoc{margin-top:var(--sp-3)}
.itemdoc h3{font-size:13.5px;font-weight:720;margin:18px 0 8px}
.itemdoc ul{margin:0;padding-left:16px}
.itemdoc li{font-size:12.5px;line-height:1.75;color:var(--text-3);margin-bottom:4px}
.buybar{display:flex;gap:8px;margin-top:var(--sp-3)}
.buybar .btn.ghost{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:84px;height:52px;font-size:11.5px}
.buybar .btn.ghost span{font-size:17px;line-height:1}
.buybar .btn.primary{flex:1;height:52px;font-size:15px}
.gsug{display:grid;gap:2px;margin-top:8px;max-height:200px;overflow-y:auto}
.gs{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:var(--r-sm);background:none;border:0;text-align:left}
.gs:hover{background:var(--surface-2)}
.gs b{font-size:13.5px;font-weight:680}
.gs span{font-size:12px;color:var(--text-3);font-weight:600}

/* ============ 활동 내역 ============ */
.aclist{display:grid;margin-top:var(--sp-1)}
.acrow{display:flex;align-items:center;gap:11px;padding:13px 4px;border-bottom:1px solid var(--line)}
.ac-t{width:32px;height:32px;border-radius:50%;background:var(--point);color:var(--bg-1);display:grid;place-items:center;
  font-size:13px;font-weight:760;flex:none}
.ac-t.item{background:var(--surface-2);border:1px solid var(--line);font-size:15px}
.ac-c{flex:1;min-width:0}
.ac-c b{display:block;font-size:13.5px;font-weight:640}
.ac-c small{display:block;font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:2px}
.acrow > b{font-size:14px;font-weight:720;font-variant-numeric:tabular-nums;flex:none}

/* ============ 프로필 액션 줄 ============ */

/* ============ 승부예측 프로필 카드 ============ */

.chatlog.small{height:auto;max-height:none;background:none;border:0;padding:0}

/* ============ 알림 ============ */
.ibtn.bell,.util .bell{position:relative}
.util .bell{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--text-2)}
.util .bell:hover{background:var(--surface-2);color:var(--text)}
.ibtn.bell .badge,.util .bell .badge{position:absolute;top:-2px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--danger-solid);color:#fff;font-size:10px;font-weight:720;
  display:grid;place-items:center;line-height:1;border:2px solid var(--bg-1)}
.nlist{display:grid;margin-top:var(--sp-1)}
.nrow{position:relative;display:flex;align-items:flex-start;gap:11px;padding:14px 4px;border-bottom:1px solid var(--line)}
.nrow:hover{background:var(--surface-2)}
.nrow.new{background:var(--primary-dim)}
.nrow.new:hover{background:var(--surface-3)}
.nrow .ni{width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:17px;flex:none}
.nrow.new .ni{background:var(--surface);border-color:var(--primary)}
.nc{flex:1;min-width:0}
.nt{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.nt b{color:var(--text);font-weight:680}
.nb{font-size:12.5px;color:var(--text-3);line-height:1.5;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd{font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:4px}
.nrow .dot{position:absolute;top:18px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--primary)}

/* 여백 리듬 보정. 앞 요소에 딱 붙거나 6~8px 로 끼어 있던 자리들. */
.sec + .qual,.shopgrid + .qual{margin-top:var(--sp-3)}
.tabs + .picklist,.row-between + .picklist{margin-top:12px}
.itemlist + .sec{margin-top:var(--sp-3)}
.myrank + .lb{margin-top:var(--sp-2)}

/* 상단바가 좁을 때 접히지 않도록. 로고는 고정, LIVE 칩이 먼저 물러난다. */
.topbar .brand{flex:none;white-space:nowrap}
.topbar .bt{white-space:nowrap}
@media (max-width:420px){
  .topbar{padding-left:14px;padding-right:14px}
  
}
/* 이름 줄에서 밀려난 AUTO 태그는 핸들 줄 앞에 붙는다. */
.lbrow .who .h .tag.auto{margin-right:5px;vertical-align:1px}

/* 랭킹 최상위 구분은 알약 칩으로. 밑줄 탭이 두 줄 겹치면 어느 쪽이 상위인지
   읽히지 않는다. */

/* 랭킹 종목 필터 */

/* ============ 상위권 프로필 잠금 ============ */

/* 상위권 픽이 가려진 배팅 카드 */
.leglock{display:flex;align-items:center;gap:9px;padding:13px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px dashed var(--line-2)}
.leglock .lk{font-size:15px;flex:none}
.leglock .t{flex:1;font-size:13px;font-weight:640;color:var(--text-3)}
.leglock .go{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;
  border-radius:999px;background:var(--primary-dim);font-size:12.5px;font-weight:680;color:var(--primary-on-dim)}
.leglock .go:hover{background:var(--primary);color:#fff}
/* 경기별 채팅은 페이지 안에 들어가므로 낮게 */
.chatwrap.compact .chatlog{height:clamp(180px,34vh,320px)}
.sec-h .qual{font-size:11.5px}
/* 유료픽을 살 근거: 작성자의 픽 전적 */

/* ============ 픽 카드 (인스타그램식: 누가 → 무엇을 → 반응) ============ */
.pcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .15s}
.pcard:hover{border-color:var(--primary)}

.pcard.hit{border-left:0}

/* ============================================================
 * 테마 2: 국내 배팅 사이트에서 익숙한 배당표 스타일.
 * 세련되게 다듬지 않는다. 그 화면을 쓰던 사람이 바로 알아보는 것이 목적이라
 * 각진 모서리, 촘촘한 표, 보라 머리띠, 노란 배당 숫자를 그대로 쓴다.
 * 테마 1 은 건드리지 않는다. data-skin 으로만 갈린다.
 * ============================================================ */
:root[data-skin="2"]{
  --bg:#0A0A0C; --bg-1:#111114; --surface:#17171B; --surface-2:#1E1E24; --surface-3:#2A2A33;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --text:#EDEDF2; --text-2:#AFAFC0; --text-3:#9090A5;
  --primary:#7A2FF2; --primary-2:#A574FF; --primary-3:#5A17C4; --primary-dim:rgba(122,47,242,.22);
  --primary-on-dim:#C3A0FF;
  --up:#22C97A; --up-dim:rgba(34,201,122,.14); --up-on-dim:#22C97A; --down:#FF4E6B; --down-dim:rgba(255,78,107,.14);
  --danger:#FF7C93; --danger-solid:#C22343; --point:#FFCE3D; --point-on-dark:#FFCE3D;
  --fx-glow:#22C97A; --fx-title:#FFCE3D;
  --r:2px; --r-sm:2px; --r-xs:2px; --pill:2px;
  --shadow:0 6px 18px rgba(0,0,0,.6); --shadow-sm:0 2px 8px rgba(0,0,0,.5);
}
:root[data-skin="2"][data-theme="light"]{
  --bg:#EFEFF4; --bg-1:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F1F9; --surface-3:#E4E0F0;
  --line:rgba(20,10,50,.12); --line-2:rgba(20,10,50,.22);
  --text:#14101F; --text-2:#463E64; --text-3:#5E567C;
  --primary:#5A17C4; --primary-2:#4A0FA8; --primary-on-dim:#4A0FA8; --primary-dim:rgba(90,23,196,.12);
  --up:#0F7A44; --up-dim:rgba(15,122,68,.12); --up-on-dim:#0B5E34; --down:#C22343; --down-dim:rgba(194,35,67,.10);
  --point:#8A5300; --fx-glow:#0B7A3F; --fx-title:#8A5300; --danger:#C22343;
}
/* 보라 머리띠 */
:root[data-skin="2"] .pc-top{background:linear-gradient(180deg,var(--primary-3),var(--primary));border-bottom:2px solid var(--primary-3)}
:root[data-skin="2"] .pc-band a{color:rgba(255,255,255,.86);font-weight:680}
:root[data-skin="2"] .pc-band a.on{color:#FFCE3D}
:root[data-skin="2"] .topbar{background:linear-gradient(180deg,var(--primary-3),var(--primary))}
:root[data-skin="2"] .topbar .bt,:root[data-skin="2"] .topbar .ibtn{color:#fff}
/* 섹션 제목을 보라 띠로 */
:root[data-skin="2"] .sec-h{background:var(--primary-3);padding:8px 12px;margin-bottom:0;border-radius:0}
:root[data-skin="2"] .sec-h h2{color:#fff;font-size:14px}
:root[data-skin="2"] .sec-h .more,:root[data-skin="2"] .sec-h .qual{color:rgba(255,255,255,.8)}
/* 배당표: 붙은 표, 마켓 라벨에 색, 배당은 노랑 */
:root[data-skin="2"] .mrow.v2{border-radius:0;border-left:0;border-right:0;margin-bottom:0;border-top:0}
:root[data-skin="2"] .mrow.v2 .mhead{background:var(--surface-2);padding:7px 10px}
:root[data-skin="2"] .mrow.v2 .mk{gap:1px;margin-top:1px;grid-template-columns:56px 1fr 46px 1fr}
:root[data-skin="2"] .mrow.v2 .mk-l{justify-content:center;background:var(--surface);font-weight:680;font-size:11.5px}
:root[data-skin="2"] .mk[data-mk="win"] .mk-l{color:var(--down)}
:root[data-skin="2"] .mk[data-mk="ah"]  .mk-l{color:var(--text-2)}
:root[data-skin="2"] .mk[data-mk="ou"]  .mk-l{color:var(--up)}
:root[data-skin="2"] .odd.o2{border-radius:0;height:38px;background:var(--surface);border:1px solid transparent}
:root[data-skin="2"] .odd.o2:hover{background:var(--surface-3)}
:root[data-skin="2"] .odd.o2.picked{background:var(--primary);border-color:var(--point)}
:root[data-skin="2"] .odd.o2 .num{color:var(--point);font-weight:760}
:root[data-skin="2"] .odd.o2.picked .num{color:#fff}
:root[data-skin="2"] .odd.o2 .tn{color:var(--text)}
/* 배팅슬립 */
:root[data-skin="2"] .slip{border-radius:0}
:root[data-skin="2"] .slip-h{background:linear-gradient(180deg,var(--primary),var(--primary-3));
  color:#fff;padding:10px 12px;border-radius:0}
:root[data-skin="2"] .slip-h b,:root[data-skin="2"] .slip-h button{color:#fff}
:root[data-skin="2"] .slip-quick button{background:var(--primary);color:#fff;border:0;border-radius:0;font-weight:680}
:root[data-skin="2"] .slip-quick button:hover{background:var(--primary-3)}
:root[data-skin="2"] .slip-quick [data-slip-max]{background:var(--point);color:var(--bg-1)}
/* 테마 2 에서는 한도 요약을 접지 않고 그대로 보여 준다 (익숙한 배치) */
:root[data-skin="2"] .slip-more{border:0}
:root[data-skin="2"] .slip-more > summary{display:none}
:root[data-skin="2"] .slip-more > .slip-sum{display:block !important}
:root[data-skin="2"] .slip-sum > div{border-bottom:1px solid var(--line);padding:6px 2px}
:root[data-skin="2"] .payout{background:var(--surface-2);border-radius:0}
:root[data-skin="2"] .slip-foot .btn.primary{border-radius:0;background:linear-gradient(180deg,var(--primary-2),var(--primary));font-weight:760}
/* 나머지 각지게 */
:root[data-skin="2"] .chip,:root[data-skin="2"] .tabs button,:root[data-skin="2"] .btn,
:root[data-skin="2"] .pcard,
:root[data-skin="2"] .lb,:root[data-skin="2"] .bet,:root[data-skin="2"] .input{border-radius:2px}
:root[data-skin="2"] .nav{border-radius:2px;width:min(98vw,560px)}
:root[data-skin="2"] .chip.on{background:var(--primary);color:#fff;border-color:var(--point)}
:root[data-skin="2"] .tabs button.on{color:var(--point)}
:root[data-skin="2"] .tabs button.on::after{background:var(--point)}
/* 설정의 테마 고르기 */

/* 테마 1 에서는 보너스 줄을 쓰지 않는다 (슬립 한도에 이미 있다) */

/* 가운데 무/기준선 칸을 회색으로 떼어 낸다 (참고 화면과 같은 구분) */
:root[data-skin="2"] .mrow.v2 .mk .mid{background:var(--surface-3);display:grid;place-items:center;
  font-weight:680;color:var(--text)}
:root[data-skin="2"] .odd.o2.c{background:var(--surface-3)}
/* 리그 머리줄을 얇고 어둡게 */
:root[data-skin="2"] .mrow.v2 .mhead{border-bottom:1px solid var(--line)}
:root[data-skin="2"] .mrow.v2 .mhead .lg{border-radius:0;font-weight:680}
:root[data-skin="2"] .mrow.v2 .mhead .t{color:var(--point);font-weight:680}
/* 경기 사이 얇은 선 */
:root[data-skin="2"] .mlist > .mrow.v2 + .mrow.v2{border-top:1px solid var(--line-2)}
/* 픽 하기 버튼도 각지고 촘촘하게 */
:root[data-skin="2"] .qb-open{border-radius:0;background:var(--primary-dim);border-color:var(--primary);
  color:var(--primary-on-dim);font-weight:680}
:root[data-skin="2"] .qb-open:hover{background:var(--primary);color:#fff}
:root[data-skin="2"] .mfoot .pn-link{border-radius:0}

/* ============ 라이브스코어 전광판 (보기 전용) ============ */
/* 배팅 화면이 아니므로 슬립 바와 슬립 레일을 감춘다. */
.score-only .slipbar{display:none}
.score-only .slip-pane{display:none}

/* 리그 배지 */

/* 팀과 점수 */

/* 배당은 정보로만 (누를 수 없다) */

/* 좁은 화면: 배당과 시작 시각을 접는다 */

/* 넓은 화면에서는 점수를 한 줄로 붙여 보여 준다 */

/* 픽 작성자 신뢰 지표 */

/* 슬립의 세 배당 줄은 테마 2 에서만. 테마 1 은 지금 모습 그대로 둔다. */
.sl-odds{display:none}
:root[data-skin="2"] .sl-odds{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin-top:6px}
:root[data-skin="2"] .slo{display:flex;align-items:center;justify-content:center;gap:4px;height:30px;
  background:var(--surface);border:1px solid transparent;font-size:12px;font-weight:680;
  color:var(--text-3);font-variant-numeric:tabular-nums}
:root[data-skin="2"] .slo i{font-style:normal;font-size:10px;font-weight:640;color:var(--text-3)}
:root[data-skin="2"] .slo.on{background:#14E0C8;color:#04231F;border-color:#14E0C8}
:root[data-skin="2"] .slo.on i{color:rgba(4,35,31,.7)}
:root[data-skin="2"] .slo.mid{background:var(--surface-3);color:var(--text-2)}
:root[data-skin="2"] .slo.off{opacity:.35}
/* 테마 2 에서는 한 줄 요약(sl-p)이 세 칸과 겹치므로 접는다 */
:root[data-skin="2"] .slip-leg .sl-p{display:none}
/* 금색 BONUS 배지 */

/* 섹션 제목 왼쪽 강조 막대.
 * 앱에 이미 .sec-h h2::before 가 있다. 테마 2 에서 컨테이너에 하나 더 넣었더니
 * 막대가 두 개로 보였다. 새로 만들지 말고 있는 것의 색만 바꾼다. */
:root[data-skin="2"] .sec-h h2::before{background:var(--point);width:4px;height:16px;border-radius:0}

/* 배팅 직후 축포. 화면 위에 얹히기만 하고 아무것도 막지 않는다. */
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* ---------- 지갑 ---------- */

.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.pack{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:border-color .14s,background .14s}
.pack:hover:not(:disabled){border-color:var(--primary);background:var(--surface-2)}
.pack:disabled{opacity:.45;cursor:not-allowed}
.pack b{font-size:16px;font-weight:760}
.pack span{font-size:12px;font-weight:640;color:var(--text-3)}

/* ---------- 왼쪽 레일 (실시간 배팅 · 픽) ---------- */
.lr-sk{display:flex;flex-direction:column}
.lr-sk i{height:46px;border-top:1px solid var(--line);
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:sk 1.2s linear infinite}
.lr-sk i:first-child{border-top:0}
.lr-b{display:flex;flex-direction:column}
.lrrow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-top:1px solid var(--line);min-width:0}
.lrrow:first-child{border-top:0}
.lrrow:hover{background:var(--surface-2)}
.lrrow .who{flex:1;min-width:0}
.lrrow .who .n{font-size:13px;font-weight:680;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrrow .who .s{font-size:11px;font-weight:600;color:var(--text-3);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.lrrow .who .s .hot{color:var(--up)}
.lrrow .v{flex:none;text-align:right;display:flex;flex-direction:column;gap:4px;line-height:1.15}
.lrrow .v b{font-size:12.5px;font-weight:720;font-variant-numeric:tabular-nums}
.lrrow .v i{font-style:normal;font-size:10px;font-weight:640;color:var(--text-3)}
.lrrow .v .pp{color:var(--point)}
.lrrow .v .pf{color:var(--text-3)}
.lr-e{padding:18px 12px;text-align:center;font-size:12.5px;font-weight:600;color:var(--text-3)}

/* ---------- 검색용 SSR 페이지 ----------
 * 앱과 같은 토큰을 쓰되 자바스크립트 없이 읽히는 문서다. 검색에서 들어온
 * 사람이 처음 보는 화면이므로 본문 가독성을 제일 앞에 둔다. */
.seo-wrap{max-width:760px;margin:0 auto;padding:0 18px 64px;color:var(--text);
  background:var(--bg);min-height:100vh}
body:has(.seo-wrap){background:var(--bg)}
.seo-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0;
  border-bottom:1px solid var(--line);margin-bottom:26px}
.seo-brand{font-size:19px;font-weight:760;letter-spacing:-.03em;color:var(--text)}
.seo-nav{display:flex;gap:16px;flex-wrap:wrap}
.seo-nav a{font-size:13.5px;font-weight:640;color:var(--text-3)}
.seo-nav a:hover{color:var(--primary-2)}
.seo-main h1{font-size:27px;font-weight:760;letter-spacing:-.03em;line-height:1.28;margin:0 0 10px}
.seo-main h1 small{font-size:11px;font-weight:680;color:var(--text-3);vertical-align:middle;
  border:1px solid var(--line);border-radius:5px;padding:2px 5px;margin-left:6px}
.seo-main h2{font-size:17px;font-weight:720;letter-spacing:-.02em;margin:32px 0 10px}
.seo-crumb{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:12px}
.seo-crumb a{color:var(--text-3)}
.seo-crumb a:hover{color:var(--primary-2)}
.seo-meta{font-size:13px;font-weight:600;color:var(--text-3);margin-bottom:18px}
.seo-meta a{color:var(--text-2);font-weight:680}
.seo-lead{font-size:14.5px;line-height:1.75;color:var(--text-2);margin:0 0 22px}
.seo-match{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin-bottom:16px;font-size:15px}
.seo-match .lg{font-size:11.5px;font-weight:680;color:var(--text-3)}
.seo-match b{font-weight:720}
.seo-match i{font-style:normal;color:var(--text-3);font-size:12.5px}
.seo-match .tm{font-size:12.5px;font-weight:600;color:var(--text-3);margin-left:auto}
.seo-score{display:flex;align-items:center;justify-content:center;gap:22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin-bottom:18px}
.seo-score span{font-size:15px;font-weight:680}
.seo-score b{font-size:30px;font-weight:760;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.seo-verdict{font-size:14.5px;font-weight:600;color:var(--text-2);margin:0 0 20px}
.seo-verdict b{color:var(--text);font-weight:720}
.seo-verdict .paid{color:var(--point);font-weight:680}
.seo-body p{font-size:15.5px;line-height:1.85;color:var(--text-2);margin:0 0 17px}
.seo-paywall{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin:20px 0}
.seo-paywall b{display:block;font-size:16px;font-weight:720;margin-bottom:7px}
.seo-paywall p{font-size:14px;line-height:1.7;color:var(--text-2);margin:0 0 14px}
.seo-list{list-style:none;margin:0;padding:0}
.seo-list li{padding:13px 0;border-top:1px solid var(--line)}
.seo-list li:first-child{border-top:0}
.seo-list li a{font-size:15px;font-weight:680;color:var(--text);display:block;line-height:1.45}
.seo-list li a:hover{color:var(--primary-2)}
.seo-list li .s{display:block;font-size:12.5px;font-weight:600;color:var(--text-3);margin-top:4px}
.seo-tbl{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:14.5px}
.seo-tbl th,.seo-tbl td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.seo-tbl th{background:var(--surface-2);font-weight:680;color:var(--text-2);width:38%}
.seo-tbl td{font-variant-numeric:tabular-nums;font-weight:640}
.seo-small{font-size:12px;color:var(--text-3);font-weight:600;margin:0 0 8px}
.seo-rel{font-size:14px;font-weight:600;color:var(--text-2);margin:22px 0 0}
.seo-open{margin:28px 0 0}
.seo-cta{display:inline-block;background:var(--primary);color:#fff;font-size:14.5px;font-weight:680;
  padding:12px 20px;border-radius:var(--r-md)}
.seo-cta:hover{filter:brightness(1.08)}
/* area:seo-pages: 경기 · 리그 검색 페이지(src/seopages.js) */
.seo-app{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 6px;
  padding:16px 18px;border-radius:var(--r-md, 16px);background:var(--primary-dim);border:1px solid var(--line)}
.seo-app .t b{display:block;font-size:15.5px;font-weight:740;letter-spacing:-.02em}
.seo-app .t span{font-size:12.5px;font-weight:600;color:var(--text-2)}
.seo-app .a{display:flex;align-items:center;gap:12px}
.seo-sub{font-size:13.5px;font-weight:680;color:var(--primary-2)}
.seo-sub:hover{text-decoration:underline}
.seo-ai{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md, 16px);padding:16px 18px}
.seo-ai p{font-size:14.5px;line-height:1.75;color:var(--text-2);margin:0 0 10px}
.seo-ai ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.seo-ai li{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--pill, 999px);background:var(--surface-2);font-size:13.5px}
.seo-ai li span{font-size:12px;font-weight:600;color:var(--text-3)}
.seo-st th,.seo-st td{width:auto;text-align:center;padding:9px 8px}
.seo-st td:nth-child(2),.seo-st th:nth-child(2){text-align:left}
.seo-form{display:inline-flex;gap:4px;margin:6px 0 2px}
.seo-form i{font-style:normal;width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:720;
  background:var(--surface-2);color:var(--text-2)}
.seo-form i.rW{background:var(--up-dim);color:var(--up-on-dim)}
.seo-form i.rL{background:var(--down-dim);color:var(--down-on-dim)}
.seo-empty{padding:60px 0;text-align:center}
.seo-empty p{color:var(--text-3);font-weight:600;margin:8px 0 20px}
.seo-foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}
.seo-foot p{font-size:12.5px;line-height:1.7;color:var(--text-3);margin:0 0 12px}
.seo-foot p b{color:var(--text-2)}
.seo-foot nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.seo-foot nav a{font-size:12.5px;font-weight:600;color:var(--text-3)}
.seo-foot .c{font-size:12px;color:var(--text-3)}
@media (max-width:600px){
  .seo-main h1{font-size:23px}
  .seo-score b{font-size:26px}
  .seo-body p{font-size:15px}
}
.seo-body a,.seo-rel a,.seo-foot p a{color:var(--primary-2);font-weight:680}
.seo-body a:hover,.seo-rel a:hover{text-decoration:underline}

/* ---------- 언어 ---------- */
/* .myrow 는 원래 링크라 버튼으로 쓰면 기본 스타일이 튀어나온다. 눌러도 같은 줄로 보이게. */

.langbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0 2px;cursor:pointer;
  font-size:12.5px;font-weight:640;color:var(--text-3);white-space:nowrap}
.langbtn:hover{color:var(--text)}
.langbtn span{font-size:13px;line-height:1}
.langlist{display:flex;flex-direction:column;max-height:min(60vh,420px);overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-md);margin-top:6px}
.langrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:13px 15px;background:none;border:0;border-top:1px solid var(--line);cursor:pointer;
  font-size:14.5px;font-weight:640;color:var(--text-2);text-align:left}
.langrow:first-child{border-top:0}
.langrow:hover{background:var(--surface-2);color:var(--text)}
.langrow.on{color:var(--primary-2);font-weight:720}
.langrow i{font-style:normal;color:var(--primary-2);font-weight:760}
.langnote{font-size:12px;font-weight:600;color:var(--text-3);margin:10px 2px 0;text-align:center}

/* ---------- 커뮤니티 글 카드 (스레드 형태) ----------
 * 아바타가 왼쪽 기둥, 글이 오른쪽 기둥. 카드 테두리 대신 얇은 구분선만 둔다.
 * 예전 카드는 전체가 링크라 빈 곳을 눌러도 반응했고, 중첩된 a 때문에 실제로
 * 눌리는 빈 칸까지 생겼다. 지금은 누를 수 있는 곳이 작성자·본문·버튼뿐이다. */

/* ---------- 테마 2: 가상배팅 배당표 ----------
 * 참고 화면(토토 계열)은 경기 하나가 "리그 · 시각" 머리줄, "팀 VS 팀" 줄,
 * 그 아래 마켓별 배당 줄로 쌓인다. 마켓 이름 칸에 기준선까지 같이 적어
 * (핸디캡 H -1.0, 언더오버 U/O 3.5) 한눈에 무엇에 거는지 보이게 한다.
 * 테마 1 은 손대지 않으므로 이 두 요소는 기본값이 숨김이다. */
.mteams,.mk-ln{display:none}

:root[data-skin="2"] .mrow.v2 .mteams{
  display:flex;align-items:center;gap:8px;padding:9px 10px;
  background:var(--surface);border-bottom:1px solid var(--line);color:inherit}
:root[data-skin="2"] .mrow.v2 .mteams:hover{background:var(--surface-2)}
:root[data-skin="2"] .mt-t{flex:1;min-width:0;font-size:13.5px;font-weight:720;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-skin="2"] .mt-t.h{text-align:right}
:root[data-skin="2"] .mt-t.a{text-align:left}
:root[data-skin="2"] .mt-vs{flex:none;font-size:10.5px;font-weight:680;color:var(--text-3);letter-spacing:.04em}
:root[data-skin="2"] .mt-go{flex:none;font-size:10.5px;font-weight:760;color:#fff;
  background:var(--primary);padding:3px 8px;letter-spacing:.02em}

/* 마켓 이름 칸을 두 줄로: 이름 + 기준선 */
:root[data-skin="2"] .mrow.v2 .mk-l{flex-direction:column;gap:1px;line-height:1.25;padding:0 4px}
:root[data-skin="2"] .mk-ln{display:block;font-style:normal;font-size:9.5px;font-weight:680;
  color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-skin="2"] .mk[data-mk="ah"] .mk-ln{color:var(--primary-2)}
:root[data-skin="2"] .mk[data-mk="ou"] .mk-ln{color:var(--up)}
/* 이름 칸이 두 줄이 되었으니 조금 넓힌다 */
:root[data-skin="2"] .mrow.v2 .mk{grid-template-columns:64px 1fr 46px 1fr}
:root[data-skin="2"] .mrow.v2 .mk.mk3{grid-template-columns:64px 1fr 1fr 1fr}

/* 테마 2 밀도 조정.
 * 참고 화면은 경기 하나가 화면을 조금만 차지하고 목록이 죽 이어진다.
 * "픽 하기" 를 꽉 찬 보라 막대로 두면 경기마다 덩어리가 생겨 목록으로 안 읽힌다.
 * 얇은 줄로 낮추고 경기 사이 간격도 줄인다. */
:root[data-skin="2"] .mrow.v2 .mfoot{margin-top:1px;gap:1px}
:root[data-skin="2"] .mrow.v2 .qb-open{height:26px;font-size:11.5px;font-weight:680;
  background:var(--surface);border:0;color:var(--text-3)}
:root[data-skin="2"] .mrow.v2 .qb-open:hover{background:var(--primary-dim);color:var(--primary-2)}
:root[data-skin="2"] .mrow.v2 .mfoot .pn-link{height:26px;font-size:11.5px;padding:0 10px;
  display:inline-flex;align-items:center;background:var(--surface);border:0;color:var(--point)}
:root[data-skin="2"] .mlist > .mrow.v2 + .mrow.v2{margin-top:6px}
:root[data-skin="2"] .mrow.v2 .mhead{padding:6px 10px}
:root[data-skin="2"] .mrow.v2 .mhead .more{display:none}
:root[data-skin="2"] .mrow.v2 .mteams{padding:8px 10px}
/* .pickcard 는 이제 div 다. 제목만 링크이므로 링크처럼 보이게 해 준다. */

/* ---------- 경기 화면 탭 ----------
 * 배당·채팅·분석·순위를 한 화면에 세로로 쌓아 두니 채팅을 보려면 배당표를
 * 한참 지나야 했다. 참고 화면처럼 점수는 위에 고정하고 나머지를 탭으로 나눈다.
 * 자료가 없는 탭(라인업, 순위 없음)은 아예 만들지 않는다. */
.mtabs{margin-top:var(--sp-2)}
.mtabs .cnt{margin-left:5px;font-size:11px;font-weight:680;color:var(--text-3)}
.mtabs .live-dot{margin-right:5px}
.mpane{margin-top:var(--sp-2)}
.mpane > .sec:first-child{margin-top:0}
.mhero.flat{margin-top:0}

/* ---------- 픽 등급 (전문가 · 일반회원 · AI) ---------- */

.ttag{flex:none;font-size:9.5px;font-weight:760;letter-spacing:.02em;padding:2px 5px;border-radius:4px;line-height:1.4}
.ttag.ex{background:var(--primary);color:#fff}
.ttag.ai{background:var(--point);color:var(--bg-1)}
/* 전문가·AI 픽은 카드 바탕을 아주 옅게 물들여 구분한다. 참고 화면도 옆줄이
 * 아니라 카드 전체 색으로 갈랐다. 비율이 낮아 본문 대비는 그대로다. */

/* ---------- 계산기 ---------- */
.cal-lead{font-size:13.5px;line-height:1.7;color:var(--text-2);background:var(--surface-2);
  border-radius:var(--r-md);padding:12px 14px;margin:var(--sp-2) 0 0}
.cal-lead b{color:var(--text);font-weight:680}
.cal-legs{display:flex;flex-direction:column}
.cal-leg{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px solid var(--line)}
.cal-leg:first-child{border-top:0}
.cal-leg .n{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-3);font-size:11px;font-weight:680;color:var(--text-3)}
.cal-leg .t{flex:1;min-width:0}
.cal-leg .t b{display:block;font-size:13.5px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-leg .t b em{font-style:normal;color:var(--text-3);font-weight:600;font-size:11.5px}
.cal-leg .t span{display:block;font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:2px}
.cal-leg .o{flex:none;font-size:15px;font-weight:760;color:var(--point);font-variant-numeric:tabular-nums}
.cal-leg .x{flex:none;width:26px;height:26px;display:grid;place-items:center;background:none;border:0;
  color:var(--text-3);cursor:pointer;border-radius:50%}
.cal-leg .x:hover{background:var(--surface-3);color:var(--text)}
.cal-leg .x svg{width:14px;height:14px}
.cal-in{width:100%;height:52px;font-size:22px;font-weight:760;text-align:right;font-variant-numeric:tabular-nums}
.cal-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.cal-chips button{height:38px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;font-weight:680;color:var(--text-2);cursor:pointer;font-variant-numeric:tabular-nums}
.cal-chips button:hover{border-color:var(--primary);color:var(--text)}
.cal-out{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;margin-top:var(--sp-3)}
.cal-out.idle{opacity:.5}
.cal-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;
  border-top:1px solid var(--line)}
.cal-line:first-child{border-top:0}
.cal-line span{font-size:13px;font-weight:640;color:var(--text-3)}
.cal-line span i{font-style:normal;color:var(--text-2);font-weight:680}
.cal-line b{font-size:15px;font-weight:720;font-variant-numeric:tabular-nums}
.cal-line.on span,.cal-line.on b{color:var(--up)}
.cal-line.big b{font-size:20px}
.cal-line.win b{font-size:26px;color:var(--up)}
.cal-warn,.cal-hint{margin-top:8px;font-size:12px;font-weight:640;line-height:1.6}
.cal-warn{color:var(--danger)}
.cal-hint{color:var(--text-3)}
.cal-acts{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-3)}
.cal-acts .btn.off{opacity:.45;pointer-events:none}

/* ---------- 패밀리 ---------- */
.famlist{display:flex;flex-direction:column}
.famrow{display:flex;align-items:center;gap:10px;padding:12px 4px;border-top:1px solid var(--line)}
.famrow:first-child{border-top:0}
a.famrow:hover{background:var(--surface-2)}
.famrow .rk{flex:none;width:26px;text-align:center;font-size:13px;font-weight:720;color:var(--text-3)}
.famrow .em{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--surface-2);font-size:19px}
.famrow .who{flex:1;min-width:0}
.famrow .who .n{display:flex;align-items:center;gap:6px;min-width:0}
.famrow .who .n b{font-size:14.5px;font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.famrow .who .n a{color:inherit}
.famrow .who .n a:hover b{color:var(--primary-2)}
.famrow .who .s{font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.famrow .v{flex:none;font-size:14px;font-weight:720;font-variant-numeric:tabular-nums}
.famrow .acts{flex:none;display:flex;gap:6px}
.famrow .x{flex:none;width:26px;height:26px;display:grid;place-items:center;background:none;border:0;
  color:var(--text-3);cursor:pointer;border-radius:50%}
.famrow .x:hover{background:var(--surface-3);color:var(--danger)}
.famrow .x svg{width:14px;height:14px}
.tg{flex:none;font-size:10px;font-weight:720;color:var(--text-3);background:var(--surface-3);
  padding:2px 5px;border-radius:4px}
.tg.own{background:var(--primary);color:#fff}
.lk{flex:none;font-size:10px;font-weight:680;color:var(--text-3)}
.famhead{display:flex;gap:14px;align-items:flex-start;margin-top:var(--sp-2)}
.famhead .em{flex:none;width:60px;height:60px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--surface-2);font-size:30px}
.famhead .t{flex:1;min-width:0}
.famhead .n{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.famhead .n b{font-size:21px;font-weight:760;letter-spacing:-.02em}
.famhead .s{font-size:12.5px;font-weight:600;color:var(--text-3);margin-top:4px}
.famhead .b{font-size:13.5px;line-height:1.6;color:var(--text-2);margin:8px 0 0}
.famacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:var(--sp-2)}
.fl{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.fl > span{font-size:12px;font-weight:640;color:var(--text-3)}
.fl > span i{font-style:normal;opacity:.7}
.empick{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.empick button{height:38px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:18px;cursor:pointer}
.empick button.on{border-color:var(--primary);background:var(--primary-dim)}
.cbrow{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--text-2)}
.cbrow input{width:16px;height:16px;accent-color:var(--primary)}

/* ---------- 상단 메뉴 더보기 ----------
 * 메뉴가 늘어나 막대 폭을 넘기면 뒤쪽이 잘려 아예 눌리지 않는다. 잘라 내는
 * 대신 접는다. 넘치더라도 최소한 가로로 밀 수는 있게 해 둔다. */
.pc-band ul{overflow-x:auto;scrollbar-width:none}
.pc-band ul::-webkit-scrollbar{display:none}
.more-li{position:relative;flex:none}
.more-b{display:inline-flex;align-items:center;gap:4px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:640;color:var(--text-3);padding:0;white-space:nowrap}
.more-b:hover,.more-b.on{color:var(--text)}
.more-b svg{opacity:.7}
.more-pop{position:fixed;z-index:60;min-width:150px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 28px rgba(0,0,0,.34);padding:5px;display:flex;flex-direction:column}
.more-pop a{display:block;padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;
  font-weight:640;color:var(--text-2);white-space:nowrap}
.more-pop a:hover{background:var(--surface-2);color:var(--text)}
.more-pop a.on{color:var(--primary-2);font-weight:720}

/* 좁은 데스크톱에서는 메뉴 항목 여백을 줄인다.
 * 1280px 정도에서는 좌우 레일이 자리를 먹어 26px 여백이면 마지막 항목이 넘친다. */
@media (min-width:960px) and (max-width:1440px){
  .pc-band li a{padding:0 16px;font-size:14.5px}
  .pc-band .more-b{font-size:14.5px;padding:0 12px}
}
@media (min-width:960px) and (max-width:1120px){
  .pc-band li a{padding:0 11px;font-size:13.5px}
  .pc-band .more-b{font-size:13.5px;padding:0 9px}
}

/* 테마 2 모바일 상단 아이콘.
 * 테마 1 의 상단바는 거의 검정이라 어두운 동그라미가 묻힌다. 테마 2 는 보라
 * 막대라서 같은 동그라미가 검은 원반처럼 얹혀 보였다. 배경을 지우고 흰 아이콘만
 * 남긴다. 누르는 면적은 그대로 두어야 하므로 크기는 줄이지 않는다. */
:root[data-skin="2"] .topbar .ibtn{background:none;border-color:transparent;color:#fff}
:root[data-skin="2"] .topbar .ibtn:hover,
:root[data-skin="2"] .topbar .ibtn:active{background:rgba(255,255,255,.14)}
:root[data-skin="2"] .topbar .ibtn svg{width:21px;height:21px}
:root[data-skin="2"] .topbar .brand{color:#fff}

/* 설정 화면에서 고르는 줄은 세로로. 설명 아래에 선택지가 오도록 한다.
 * 기존 .optrow 는 좌우 배치라 버튼 묶음이 들어가면 눌러 찌그러진다. */

/* 번역 보기. 본문 아래 조용히 붙는다. 원문을 밀어내지 않게 작게. */
.tbtn{display:inline-block;margin-top:5px;background:none;border:0;padding:2px 0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:640;color:var(--text-3)}
.tbtn:hover{color:var(--primary-2);text-decoration:underline}
.tbtn:disabled{opacity:.55;cursor:default;text-decoration:none}
[data-trbox]{min-width:0}

/* ---------- 대비 보정 ----------
 * 실제 화면을 재서 나온 것만 고친다. */

/* 아바타 머리글자.
 * 팔레트가 대부분 밝은 색인데 글자를 흰색으로 두어서 대비가 1.67~3.0 밖에
 * 나오지 않았다 (a9 노랑 1.67, a11 1.69, a3 1.79). 색은 정체성이라 그대로 두고
 * 글자만 어둡게 바꾼다. 6.06~10.92 로 오른다. 파랑(a1)만 흰 글자가 더 낫다(5.05). */
.avatar.a0,.avatar.a2,.avatar.a3,.avatar.a4,.avatar.a5,.avatar.a6,
.avatar.a7,.avatar.a8,.avatar.a9,.avatar.a10,.avatar.a11{color:#14151A}
.avatar.a1{color:#fff}

/* 테마 2 의 섹션 머리줄은 보라 막대다. 그 안의 링크 버튼만 색 지정이 빠져서
 * 짙은 보라 글자가 보라 배경에 얹혀 1.22 까지 떨어졌다. 거의 안 보인다. */
:root[data-skin="2"] .sec-h .linkbtn{color:#fff}
:root[data-skin="2"] .sec-h .linkbtn:hover{color:#fff;text-decoration:underline}

/* 본문을 번역하려면 텍스트 노드가 하나여야 해서 <p> 로 쪼개지 않는다.
 * 대신 줄바꿈을 그대로 살려 문단 간격을 유지한다. */

/* ---------- 상단 메뉴의 주 동선: 가상배팅 ----------
 * 알약으로 채웠더니 그 칸만 크기와 위치가 달라져 줄이 어긋나 보였다.
 * 배경은 빼고 다른 항목과 똑같은 자리에 두되, 흰 빛줄기만 가끔 훑고 지나가게
 * 한다. 보라 막대 위라서 배경 없이도 빛은 보인다. */
@media (min-width:960px){
  .pc-band li a.cta{color:#fff;overflow:hidden;position:relative}
  .pc-band li a.cta:hover{color:#fff}

  @media (prefers-reduced-motion: no-preference){
    .pc-band li a.cta::before{
      content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
      background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
      transform:skewX(-18deg);animation:ctaSheen 6.5s ease-in-out infinite}
    @keyframes ctaSheen{0%,72%{left:-60%}88%,100%{left:120%}}
  }
}

/* 홍보 감지 안내창 */

.sh-p.sm{font-size:12.5px;line-height:1.65;color:var(--text-3)}

/* 시트를 끌 때 부드럽게 따라오고, 놓으면 제자리로 돌아간다. */
.sheet{transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.sheet-bg{transition:opacity .26s ease}
/* 손잡이를 눈에 띄게 해서 끌 수 있다는 것을 알린다 */
@media (max-width:959px){
  .sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--text-3);opacity:.45;
    margin:8px auto 4px;cursor:grab}
}

/* 쿠키 동의 띠. 화면을 가리지 않게 아래에 붙이고, 모바일에서는 하단 바 위로 올린다. */
.cbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.4);
  animation:cbarIn .28s cubic-bezier(.22,.61,.36,1)}
.cbar.gone{opacity:0;transform:translateY(8px);transition:opacity .24s,transform .24s}
.cbar-t{flex:1;min-width:220px;font-size:12.5px;line-height:1.65;color:var(--text-2)}
.cbar-t a{color:var(--primary-2);font-weight:640}
.cbar-b{display:flex;gap:8px;flex:none}
@keyframes cbarIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:959px){ .cbar{bottom:calc(var(--nav-h) + var(--safe-b) + 10px)} }

/* ---------- 초대 · 자랑 ---------- */

.invbig{display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border-radius:var(--r-md);padding:12px 14px;margin:12px 0}
.ivc{flex:1;font-size:22px;font-weight:760;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.invstat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.invstat div{display:flex;flex-direction:column;gap:3px;background:var(--surface-2);
  border-radius:var(--r-md);padding:11px 13px}
.invstat span{font-size:11.5px;font-weight:640;color:var(--text-3)}
.invstat b{font-size:16px;font-weight:720}
.winbig{text-align:center;padding:18px 0 8px}
.wb-amt{font-size:34px;font-weight:760;letter-spacing:-.02em}
.wb-sub{font-size:13px;font-weight:640;color:var(--text-3);margin-top:6px}

/* 모바일 상단 아이콘.
 * 동그란 테두리 세 개가 나란히 있으면 그 줄이 제일 무거워진다. 밝은 테마에서는
 * 흰 원이 흰 배경 위에 얹혀 테두리만 보이고, 글리프는 원에 비해 커서 꽉 찬다.
 * 테두리와 배경을 지우고 글리프만 남긴다. 누르는 면적 40px 은 그대로 둔다. */
@media (max-width:959px){
  .topbar .ibtn{background:none;border-color:transparent;color:var(--text-2)}
  .topbar .ibtn:hover,.topbar .ibtn:active{background:var(--surface-2);color:var(--text)}
  .topbar .ibtn svg{width:21px;height:21px}
  .topbar > div{gap:2px}
}
.langbtn svg{width:15px;height:15px}

/* ---------- 관리자: 행동 ---------- */
.apanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:var(--sp-2)}
.apanel h3{margin:0 0 10px;font-size:14px;font-weight:720;letter-spacing:-.01em}
.ahint{margin:10px 0 0;font-size:12px;font-weight:600;color:var(--text-3);line-height:1.6}
.a2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
@media (max-width:720px){ .a2col{grid-template-columns:1fr} }
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;
  border-top:1px solid var(--line)}
.arow:first-of-type{border-top:0}
.arow .al{font-size:12.5px;font-weight:600;color:var(--text-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.arow b{font-size:13px;font-weight:720;flex:none;font-variant-numeric:tabular-nums}
/* 깔때기: 남은 비율이 막대 길이로 바로 보이게 */
.funnel{display:flex;flex-direction:column;gap:10px}
.fstep .fs-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fstep .fs-h span{font-size:13px;font-weight:640;color:var(--text-2)}
.fstep .fs-h b{font-size:16px;font-weight:720;font-variant-numeric:tabular-nums}
.fs-bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin:5px 0 3px}
.fs-bar i{display:block;width:100%;height:100%;background:var(--primary);
  transform:scaleX(var(--v,1));transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
.fs-p{font-size:11.5px;font-weight:640;color:var(--text-3)}
/* 시간대 막대 */
.hbars{display:flex;align-items:flex-end;gap:3px;height:96px}
.hb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.hb i{display:block;width:100%;background:var(--primary);border-radius:2px 2px 0 0;min-height:2px}
.hb span{font-size:9.5px;font-weight:600;color:var(--text-3);height:11px}

/* ── 경기 기록 (최근 폼 · 상대 전적 · 홈원정) ───────────────────────── */
.fbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.frow{display:flex;align-items:center;gap:12px;padding:13px 14px}
.frow + .frow{border-top:1px solid var(--line)}
.frow .ft{flex:1;min-width:0;font-weight:640;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .ft small{display:block;font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:2px}
.fpills{display:flex;align-items:center;gap:5px;flex-shrink:0}
.fp{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-size:11.5px;font-weight:680;letter-spacing:-.02em}
.fp.W{background:var(--up-dim);color:var(--up-on-dim)}
.fp.D{background:var(--surface-3);color:var(--text-2)}
.fp.L{background:var(--down-dim);color:var(--down-on-dim)}
.fsc{display:none}
@media (min-width:520px){.fsc{display:block;margin-left:10px;font-size:11.5px;font-weight:600;
  color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}}

.h2h-sum{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:13px;font-weight:640;margin-bottom:7px}
.h2h-sum .hw{color:var(--primary-on-dim)} .h2h-sum .hd{color:var(--text-2)} .h2h-sum .ha{color:var(--text-2);text-align:right}
.h2h-sum > span{min-width:0;display:flex;gap:5px;align-items:baseline;overflow:hidden}
.h2h-sum .ha{justify-content:flex-end}
.h2h-sum i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-sum b{flex-shrink:0}
.h2h-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--surface-2);margin-bottom:12px}
.h2h-bar i.hw{background:var(--primary)} .h2h-bar i.d{background:var(--text-3)} .h2h-bar i.aw{background:#FF9E47}
.h2none{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:14px 0}
.h2none b{font-size:14px;font-weight:680;letter-spacing:-.02em}
.h2none span{font-size:12.5px;font-weight:600;color:var(--text-3);text-align:right;word-break:keep-all}
.h2h-list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.h2r{display:grid;grid-template-columns:62px 1fr auto 1fr;align-items:center;gap:8px;padding:11px 14px;font-size:13.5px}
.h2r + .h2r{border-top:1px solid var(--line)}
.h2r .d{font-size:11.5px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.h2r .v{font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2r .v.r{text-align:right}
.h2r .s{font-weight:720;font-variant-numeric:tabular-nums;padding:2px 9px;border-radius:8px;background:var(--surface-2)}

.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;min-width:0}
.vcard .vh{display:flex;gap:5px;align-items:baseline;font-size:12.5px;font-weight:640;color:var(--text-2);min-width:0}
.vcard .vh i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard .vh b{flex-shrink:0;color:var(--primary-on-dim)}
.vcard .vr{font-size:16px;font-weight:720;letter-spacing:-.02em;margin-top:5px}
.vcard .vs{font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:3px;line-height:1.45;word-break:keep-all}

.totbox{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px}
.totbox .tv{font-size:32px;font-weight:720;letter-spacing:-.03em;line-height:1;flex-shrink:0}
.totbox .tv small{font-size:14px;font-weight:640;color:var(--text-3);margin-left:2px}
/* "골" 은 붙여 쓰지만 "goals" 는 띄어야 한다. */
.totbox .tv small.w{margin-left:6px}
.totbox .tt{font-size:12.5px;font-weight:600;color:var(--text-3);line-height:1.5;word-break:keep-all}
.totbox .tt b{display:block;color:var(--text-2);margin-top:3px}
.totbox .tt .cmp::before{content:' · '}
/* 여러 문장을 한 노드에 이어 붙이면 사전이 못 잡는다. 구분점은 CSS 로 넣는다. */
.qual .dot::before{content:' · '}

/* ── 고객센터 카드 ─────────────────────────────────────────────────── */
.supbox{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:14px 15px;transition:background .15s ease}
.supbox:hover{background:var(--surface-2)}
.supbox .sic{flex-shrink:0;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--primary-dim);color:var(--primary-on-dim)}
.supbox .sic svg{width:20px;height:20px}
.supbox .stx{flex:1;min-width:0}
.supbox .stx b{display:block;font-size:14.5px;font-weight:680;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supbox .stx small{display:block;font-size:12px;font-weight:600;color:var(--text-3);margin-top:2px;
  word-break:keep-all}
.supbox .ch{flex-shrink:0;color:var(--text-3);display:grid;place-items:center}
.supbox .ch svg{width:18px;height:18px}

/* ── 오늘의 미션 ───────────────────────────────────────────────────── */

.mrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
  background:var(--surface-2);transition:background .15s ease}
.mrow:hover{background:var(--surface-3)}
.mrow.done{opacity:.55}

/* ── 경기 시작 알림 ────────────────────────────────────────────────── */
.mbell{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;
  height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  font-size:13px;font-weight:640;color:var(--text-2);transition:background .15s ease,color .15s ease}
.mbell:hover{background:var(--surface-3)}
.mbell svg{width:17px;height:17px}
.mbell.on{background:var(--primary-dim);border-color:transparent;color:var(--primary-on-dim);font-weight:680}
.mbell:disabled{opacity:.6}

/* 예약한 경기 목록 */
.alist{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.arow{display:flex;align-items:center}
.arow + .arow{border-top:1px solid var(--line)}
.arow > a{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:11px 4px 11px 13px}
.arow .al{flex-shrink:0;font-size:10.5px;font-weight:680;color:var(--text-3);
  background:var(--surface-2);padding:3px 7px;border-radius:6px;max-width:88px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .am{flex:1;min-width:0;font-size:13.5px;font-weight:640;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .ak{flex-shrink:0;font-size:11.5px;font-weight:640;color:var(--text-3);font-variant-numeric:tabular-nums}
.ax{flex-shrink:0;width:38px;height:38px;margin-right:5px;display:grid;place-items:center;
  color:var(--text-3);border-radius:10px}
.ax:hover{background:var(--surface-2);color:var(--text)}
.ax svg{width:15px;height:15px}

/* ── 일시 장애 안내 ───────────────────────────────────────────────────
   화면이 죽은 게 아니라 "잠깐 쉬는 중" 으로 읽혀야 한다. 껍데기는 그대로 두고
   이 카드만 가운데에 놓는다. */
.downstate{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:52px 22px 44px;max-width:400px;margin:0 auto}
.ds-ic{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--primary-dim);color:var(--primary-on-dim);animation:ds-breathe 2.6s ease-in-out infinite}
.ds-ic svg{width:28px;height:28px}
.ds-ic.off{background:var(--surface-3);color:var(--text-3)}
@keyframes ds-breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}}
.downstate h2{margin:0 0 10px;font-size:20px;font-weight:720;letter-spacing:-.025em}
.downstate p{margin:0 0 24px;font-size:13.5px;font-weight:560;line-height:1.65;color:var(--text-3);
  word-break:keep-all}
.downstate .btn{min-width:150px}
.ds-bar{width:132px;height:3px;margin:22px 0 9px;border-radius:2px;background:var(--surface-3);overflow:hidden}
/* width 가 아니라 transform 을 움직인다. 레이아웃을 흔들지 않는다. */
.ds-bar i{display:block;width:100%;height:100%;background:var(--primary);border-radius:2px;
  transform:scaleX(0);transform-origin:left center}
.ds-bar i.run{transform:scaleX(1);transition:transform calc(var(--s) * 1s) linear}
.ds-cd{font-size:11.5px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .ds-ic{animation:none}
  .ds-bar i.run{transition:none;transform:scaleX(1)}
}

/* 껍데기는 멀쩡한데 일부만 실패했을 때 뜨는 얇은 띠 */
.healthbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h, 68px) + 12px);
  z-index:60;display:flex;align-items:center;gap:11px;max-width:calc(100vw - 28px);
  padding:9px 10px 9px 15px;border-radius:var(--pill,999px);
  background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow,0 12px 32px rgba(0,0,0,.3));
  font-size:12.5px;font-weight:640;color:var(--text-2);animation:hb-in .26s cubic-bezier(.22,.61,.36,1)}
.healthbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.healthbar button{flex-shrink:0;padding:5px 12px;border-radius:var(--pill,999px);
  background:var(--primary);color:#fff;font-size:12px;font-weight:680}
.healthbar button:hover{background:var(--primary-2)}
@keyframes hb-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:960px){.healthbar{bottom:20px}}

/* 상단바 CTA 는 언어에 따라 길어진다. 접히면 헤더 높이가 흔들린다. */
.topbar .btn{white-space:nowrap;flex-shrink:0}

/* iOS 앱: 하단 메뉴는 네이티브 탭 바(Liquid Glass)가 그린다. 웹 메뉴는 숨긴다. */
html.native .nav{display:none}

/* 홈 큰 버튼 두 개 (모바일). 가상배팅은 주 색, 패밀리는 면 색. */

/* =================== Liquid Glass UI system (2026-09-29) ===================
 * docs/ui-liquid-glass.md. 유리는 조작 층(머리글·탭·떠 있는 버튼·시트)에만 쓰고, 글과 숫자가 있는
 * 내용은 단단한 면에 둔다. 이름은 g- 로 시작한다. 구역별 추가는 아래 area 표시 사이에만. */
:root{
  --g-tint:rgba(28,29,34,.58); --g-stroke:rgba(255,255,255,.14); --g-hl:rgba(255,255,255,.22);
  --g-shadow:0 10px 30px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
  --g-blur:blur(22px) saturate(180%);
  --g-r:20px; --g-r-sm:14px; --g-ease:cubic-bezier(.2,.8,.2,1);
  --g-card:var(--surface); --g-card-line:var(--line-2);
}
[data-theme=light]{--g-tint:rgba(255,255,255,.62);--g-stroke:rgba(0,0,0,.08);--g-hl:rgba(255,255,255,.9);--g-shadow:0 10px 30px rgba(20,24,40,.12),0 1px 2px rgba(20,24,40,.08)}
.g-glass,.g-seg,.g-fab{background:var(--g-tint);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-stroke);box-shadow:inset 0 1px 0 var(--g-hl),var(--g-shadow)}
@media (prefers-reduced-transparency:reduce){.g-glass,.g-seg,.g-fab{background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.g-glass,.g-seg,.g-fab{background:var(--surface-2)}}

.g-head{display:flex;align-items:center;gap:6px;min-height:52px;margin:2px 0 10px}
.g-title{flex:1;min-width:0;margin:0;font-size:28px;font-weight:680;letter-spacing:-.03em;line-height:1.15}
.g-iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--text);flex:none;transition:transform .2s var(--g-ease)}
.g-iconbtn svg{width:22px;height:22px}
.g-iconbtn:active{transform:scale(.92)}

.g-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--pill);box-shadow:inset 0 1px 0 var(--g-hl)}
.g-seg>button,.g-seg>a{position:relative;min-width:64px;height:34px;padding:0 14px;border-radius:var(--pill);display:inline-grid;place-items:center;font-weight:600;font-size:14px;color:var(--text-2);transition:color .2s var(--g-ease),background .25s var(--g-ease),transform .2s var(--g-ease)}
.g-seg>.on{color:var(--text);background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.25)}
[data-theme=light] .g-seg>.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.g-seg>*:active{transform:scale(.96)}
.g-seg.block{display:flex}.g-seg.block>*{flex:1}

.g-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 0 12px}
.g-tabs::-webkit-scrollbar{display:none}
.g-tabs>a,.g-tabs>button{flex:none;position:relative;padding:10px 14px 12px;font-weight:600;font-size:15px;color:var(--text-3);transition:color .2s var(--g-ease)}
.g-tabs>.on{color:var(--text)}
.g-tabs>.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px;background:var(--text)}
.g-tabs.fill>*{flex:1;text-align:center}

.g-card{background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r);padding:16px}
.g-card.tint{background:color-mix(in srgb,var(--primary) 10%,var(--surface));border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.g-card+.g-card{margin-top:10px}

.g-list{background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r);overflow:hidden}
.g-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;font-size:15.5px;font-weight:520;width:100%;text-align:left}
.g-row+.g-row{border-top:1px solid var(--line)}
.g-row .g-sub{margin-left:auto;color:var(--text-3);font-weight:520;font-size:14px}
.g-chev{width:16px;height:16px;color:var(--text-3);flex:none}
.g-row:active{background:var(--surface-2)}

.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 20px;border-radius:var(--pill);font-weight:640;font-size:15px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);transition:transform .2s var(--g-ease),background .2s var(--g-ease)}
.g-btn.primary{background:var(--primary);border-color:transparent;color:#fff}
.g-btn.sm{height:34px;padding:0 14px;font-size:13.5px}
.g-btn.block{display:flex;width:100%}
.g-btn:active{transform:scale(.97)}
.g-btn:disabled{opacity:.45}

.g-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:var(--pill);font-size:13px;font-weight:600;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.g-chip.on{background:var(--primary-dim);color:var(--primary-on-dim);border-color:transparent}

.g-stat{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.g-stat .l{font-size:14px;font-weight:600;color:var(--text-2)}
.g-stat .v{font-family:"Saira Condensed",var(--font);font-size:34px;font-weight:680;color:var(--primary-on-dim);line-height:1}
.g-stat .s{font-size:13.5px;color:var(--text-3);font-weight:520}
.g-count{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;text-align:center;gap:4px}
.g-count>*{display:grid;gap:4px;justify-items:center;padding:4px 0}
.g-count .k{font-size:13px;color:var(--text-3);font-weight:600}
.g-count .n{font-family:"Saira Condensed",var(--font);font-size:22px;font-weight:680}

.g-empty{display:grid;justify-items:center;gap:12px;padding:44px 16px;color:var(--text-3);font-weight:520;text-align:center}

.g-fab{position:fixed;right:16px;bottom:calc(var(--nav-h) + var(--safe-b) + 24px);z-index:48;height:52px;padding:0 18px;border-radius:var(--pill);display:inline-flex;align-items:center;gap:8px;font-weight:680;color:var(--text);transition:transform .2s var(--g-ease)}
.g-fab svg{width:20px;height:20px}
.g-fab:active{transform:scale(.95)}
@media (min-width:960px){.g-fab{bottom:28px}}
.g-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--down);color:#fff;font-size:11px;font-weight:680;display:inline-grid;place-items:center}
@media (prefers-reduced-motion:reduce){.g-btn,.g-seg>*,.g-iconbtn,.g-tabs>*,.g-fab{transition:none}}

/* ============ 신고 · 차단 (앱스토어 심사 지침 1.2) ============
 * 새 모양은 만들지 않는다. 가입 동의 상자(.consent)를 사유 고르기에, 쪽지의 차단
 * 띠(.dmblocked)를 프로필에, 관리자 패널(.apanel, .arow)을 신고 카드에 그대로 쓴다. */
.cm .ch .x.rp{font-size:11.5px;font-weight:640;padding:2px 4px}
.linkbtn.mute{color:var(--text-3)}

.consent.rpick{margin-top:0}
.consent.rpick + .input{margin-top:10px}
.cs-note{border-top:1px solid var(--line);padding:9px 13px;font-size:12.5px;font-weight:560;line-height:1.55;
  color:var(--text-3);word-break:keep-all}
.ublocked{margin-top:2px}
.cmsg[data-cm] .cbody{cursor:pointer}
.rpt .rp-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.rpt .rp-h .linkbtn{margin-left:auto}
.rpt .rp-s{margin:0 0 6px;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg-1);font-size:13px;line-height:1.6;
  color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:168px;overflow:auto}
.rpt .arow b{flex:0 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere}
.rpt .rp-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cs em.opt{color:var(--text-3);background:var(--surface-3)}
/* 시트가 열려 있을 때 토스트를 위로 올린다. 아래에 두면 시트의 버튼을 가린다
 * (신고 접수 토스트가 "이 회원 차단" 버튼을 덮었다). 닫히는 중인 시트는 세지 않는다. */
body:has(#sheet-root .sheet:not(.closing)) .toast{bottom:auto;top:calc(env(safe-area-inset-top, 0px) + 14px);animation-name:dropX}
@keyframes dropX{from{transform:translate(-50%,-40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* 관리자 회원 표: 버튼 칸은 한 줄로 두고 표를 가로로 넘긴다(제재 칸이 생기며 "전문가 지정" 이 한 글자씩 꺾였다). */
.atable td.nw{white-space:nowrap}

/* ==== area:home-rank ==== */
/* 홈 · 랭킹 · 모바일 머리글 · 웹 하단 메뉴 · 시트 · 토스트 · 공통 다듬기.
 * 앞쪽 규칙을 덮어쓴다. 우선순위가 같으면 뒤에 오는 이 구역이 이긴다. 접두사: hr- hm- rk- */
:root{--hr-glass:rgba(34,35,41,.80);--hr-sheet:rgba(21,22,27,.88)}
[data-theme=light]{--hr-glass:rgba(255,255,255,.86);--hr-sheet:rgba(249,250,252,.90)}

/* ---- 모바일 머리글: 탭 첫 화면은 큰 제목, 하위 화면은 뒤로 + 가운데 제목. 스크롤하면 유리 ---- */
:root .topbar.hr-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:2px;min-height:0;margin:0;
  padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px 16px;background:transparent;border:0;border-bottom:1px solid transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  transition:background-color .25s var(--g-ease),border-color .25s var(--g-ease)}
:root .topbar.hr-top::after{display:none}
:root .topbar.hr-top.scrolled{background:var(--g-tint);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-bottom-color:var(--g-stroke)}
.hr-top .g-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-top .hr-brand{flex:1;min-width:0;color:var(--text);font-size:19px}
.hr-top .hr-acts{display:flex;align-items:center;gap:0;flex:none}
.hr-top .g-iconbtn{position:relative;color:var(--text)}
.hr-top .g-iconbtn .badge{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--danger-solid);color:#fff;font-size:10px;font-weight:720;display:grid;place-items:center;line-height:1;border:2px solid var(--bg)}

:root .topbar.hr-top.sub{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;padding-left:4px;padding-right:4px}
.hr-top .hr-ttl{text-align:center;font-size:17px;font-weight:640;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-top .hr-back svg{width:24px;height:24px}
:root[data-skin="2"] .topbar.hr-top .brand,:root[data-skin="2"] .topbar.hr-top .bt{color:var(--text)}
@media (prefers-reduced-transparency:reduce){:root .topbar.hr-top.scrolled{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (min-width:960px){:root .topbar.hr-top,:root .topbar.hr-top.sub{display:none}}

/* ---- 웹 하단 메뉴: 앱과 같은 다섯 칸. 유리 막대 하나에 선택은 유리 알약(lens) ---- */
:root .nav{grid-template-columns:repeat(5,1fr);padding:5px;border-radius:var(--pill);background:var(--g-tint);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-stroke);box-shadow:inset 0 1px 0 var(--g-hl),var(--g-shadow)}
:root .nav::before{display:none}
:root .nav a{border-radius:var(--pill);color:var(--text-2)}
:root .nav a.on{background:rgba(255,255,255,.13);color:var(--primary-on-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 8px rgba(0,0,0,.22)}
:root[data-theme="light"] .nav{background:var(--g-tint);border-color:var(--g-stroke);box-shadow:inset 0 1px 0 var(--g-hl),var(--g-shadow)}
:root[data-theme="light"] .nav a.on{background:#fff;color:var(--primary);box-shadow:0 1px 4px rgba(20,24,40,.14)}
@media (prefers-reduced-transparency:reduce){:root .nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 홈에서도 배당을 누르면 슬립에 담긴다. 담긴 게 있으면 슬립 바(모바일)와 슬립 칸(PC)을 보인다. */
.score-only .slipbar:not(.hide){display:grid}
.score-only.slip-open .slip-pane{display:block}

/* ---- 홈 ---- */
/* 홈의 오늘의 미션은 한 줄씩 촘촘하게(설명 줄은 가상배팅 화면에서 본다) */

.hm-bar{display:flex;align-items:center;gap:10px;margin:14px 0 0}
.hm-sports{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.hm-sports::-webkit-scrollbar{display:none}
.hm-sp{flex:none;height:36px;padding:0 13px 0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--text-2);
  border:1px solid var(--line);font-size:13.5px;font-weight:640;letter-spacing:-.01em;white-space:nowrap;transition:transform .2s var(--g-ease),background-color .2s var(--g-ease),color .2s var(--g-ease)}
.hm-sp[data-sport=all]{padding:0 14px}
.hm-sp svg{width:18px;height:18px;flex:none}
.hm-sp.on{background:var(--primary);border-color:transparent;color:#fff}
.hm-sp:active{transform:scale(.92)}
.hm-date{flex:none;display:flex;align-items:center;height:40px;padding:0 2px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line)}
.hm-date button{height:36px;display:grid;place-items:center;color:var(--text-2);border-radius:var(--pill);transition:transform .2s var(--g-ease)}
.hm-date button:not(.mid){width:30px}
.hm-date button svg{width:16px;height:16px}
.hm-date .mid{display:flex;align-items:center;justify-content:center;gap:4px;min-width:56px;padding:0 4px;color:var(--text)}
.hm-date .mid b{font-family:"Saira Condensed",var(--font);font-size:18px;font-weight:680;line-height:18px}
.hm-date .mid span{font-size:12.5px;font-weight:640;line-height:18px;color:var(--text-2);white-space:nowrap}
.hm-date button:active{transform:scale(.94)}
.hm-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:1px 0}
/* 상태 칩과 날짜를 한 줄에. 칩은 남는 폭에서 가로로 밀리고 날짜는 오른쪽에 고정. */
.hm-row{display:flex;align-items:center;gap:8px;margin:12px 0}
.hm-bar+.hm-row{margin-top:10px}
.hm-row .hm-chips{flex:1;min-width:0;margin:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
.hm-row .hm-date{height:34px}
.hm-row .hm-date button{height:30px}
.hm-row .hm-date button:not(.mid){width:26px}
.hm-row .hm-date .mid{min-width:46px;padding:0 2px}
.hm-row .hm-date .mid b{font-size:16px;line-height:16px}
.hm-row .hm-date .mid span{font-size:12px}
.hm-chips::-webkit-scrollbar{display:none}
.hm-chips .g-chip{flex:none;height:30px;padding:0 12px;gap:5px;transition:transform .2s var(--g-ease),background-color .2s var(--g-ease),color .2s var(--g-ease)}
.hm-chips .g-chip b{font-family:"Saira Condensed",var(--font);font-weight:600;font-size:14px;opacity:.72}
.hm-chips .g-chip svg{width:14px;height:14px;flex:none}
.hm-chips .g-chip:active{transform:scale(.96)}
.hm-lgx{max-width:62vw}
.hm-lgx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-dot{width:6px;height:6px;border-radius:50%;background:var(--down);animation:hmBlink 1.4s ease-in-out infinite}
@keyframes hmBlink{50%{opacity:.3}}
.hm-grp{margin:0 0 16px}
/* 리그 머리: 카드와 다른 옅은 색 띠. 색은 리그마다 여섯 가지 중 하나(pkHue), 관심 경기는 금색. */
.hm-lg{--lh:220;display:flex;align-items:center;gap:8px;width:100%;min-height:38px;margin:0 0 8px;padding:0 12px;border-radius:13px;
  background:hsl(var(--lh) 42% 52% / .14);box-shadow:inset 0 0 0 1px hsl(var(--lh) 48% 62% / .16);font-size:14px;color:var(--text);text-align:left}
[data-theme=light] .hm-lg{background:hsl(var(--lh) 72% 50% / .09);box-shadow:inset 0 0 0 1px hsl(var(--lh) 52% 42% / .13)}
.hm-lg.h0{--lh:222}.hm-lg.h1{--lh:158}.hm-lg.h2{--lh:268}.hm-lg.h3{--lh:26}.hm-lg.h4{--lh:338}.hm-lg.h5{--lh:192}.hm-lg.fav{--lh:44}
.hm-lg .lg-fl{margin:0;flex:none;width:20px;height:15px;border-radius:3px;object-fit:cover;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.hm-lg span.lg-fl{height:auto;box-shadow:none;border-radius:0}
.hm-lg .lg-fl svg{width:16px;height:16px;color:var(--point);fill:currentColor}
.hm-lg .lg-fl.globe svg{fill:none;color:var(--text-2)}
.hm-lg b{min-width:0;font-weight:680;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-lg small{flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--text-3);white-space:nowrap}
.hm-lg>svg{flex:none;width:15px;height:15px;margin-left:auto;color:var(--text-3)}
.hm-lg.on b{color:var(--primary-on-dim)}
.hm-list{display:grid;gap:8px}
.hm-card{background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r);padding:10px}
.hm-top{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:start;gap:2px}
.hm-star{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--text-3);transition:transform .2s var(--g-ease),color .2s var(--g-ease)}
.hm-star svg{width:19px;height:19px}
.hm-star.on{color:var(--point)}
.hm-star.on svg{fill:currentColor}
.hm-star:active{transform:scale(.86)}
.hm-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:6px;min-width:0;padding:2px 0;border-radius:14px}
.hm-tm{display:grid;justify-items:center;gap:5px;min-width:0;text-align:center}
.hm-cr{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:720;letter-spacing:-.02em;
  color:hsl(var(--hh) 70% 84%);background:hsl(var(--hh) 32% 23%);box-shadow:inset 0 0 0 1px hsl(var(--hh) 36% 33%)}
[data-theme=light] .hm-cr{color:hsl(var(--hh) 55% 30%);background:hsl(var(--hh) 70% 92%);box-shadow:inset 0 0 0 1px hsl(var(--hh) 50% 83%)}
.hm-tn{max-width:100%;font-size:13px;font-weight:560;line-height:1.25;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hm-tm.win .hm-tn{color:var(--text);font-weight:680}
.hm-mid{display:grid;justify-items:center;gap:5px;min-width:78px;padding-top:1px}
.hm-st{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--pill);font-size:11.5px;font-weight:680;white-space:nowrap}
.hm-st.live{background:var(--down);color:#fff}
.hm-st.wait,.hm-st.fin{background:var(--surface-3);color:var(--text-2)}
.hm-st.t{padding:0 2px;color:var(--text-2);font-size:13px;font-weight:640}
.hm-sc{display:flex;align-items:center;gap:7px;font-family:"Saira Condensed",var(--font);font-size:28px;font-weight:680;line-height:1;color:var(--text)}
.hm-sc i{font-style:normal;font-size:20px;font-weight:520;color:var(--text-3)}
.hm-card.live .hm-sc b.lead{color:var(--down)}
.hm-card.fin .hm-sc b:not(.lead){color:var(--text-3)}
.hm-sc.none b{color:var(--text-3)}
.hm-vs{font-family:"Saira Condensed",var(--font);font-size:17px;font-weight:600;letter-spacing:.06em;line-height:28px;color:var(--text-3)}
.hm-pk{justify-self:end;display:grid;justify-items:center;gap:2px;padding-top:3px}
.hm-pk i{display:grid;place-items:center;width:26px;height:21px;border-radius:7px;background:var(--primary);color:#fff;font-style:normal;font-size:11.5px;font-weight:720}
.hm-pk b{font-family:"Saira Condensed",var(--font);font-size:13px;font-weight:600;color:var(--text-3)}
.hm-mk{display:grid;grid-template-columns:48px repeat(3,minmax(0,1fr)) 28px;align-items:center;gap:6px;margin-top:6px}
.hm-top+.hm-mk{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.hm-ml{font-size:11.5px;font-weight:640;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-o{position:relative;height:36px;min-width:0;padding:0 6px;border-radius:12px;background:var(--surface-2);border:1px solid transparent;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .2s var(--g-ease),background-color .2s var(--g-ease),color .2s var(--g-ease)}
.hm-o i{font-style:normal;font-size:11.5px;font-weight:640;color:var(--text-3)}
.hm-o b{display:inline-flex;align-items:center;gap:3px;font-family:"Saira Condensed",var(--font);font-size:16px;font-weight:600;letter-spacing:.01em}
.hm-o.picked{background:var(--primary);color:#fff}
.hm-o.picked i{color:rgba(255,255,255,.8)}
.hm-o.off b,.hm-o.none b{color:var(--text-3)}
.hm-o.none b{font-weight:520}
.hm-o.mid{background:transparent;color:var(--text-2);font-family:"Saira Condensed",var(--font);font-size:15px;font-weight:600}
button.hm-o:not(:disabled):active{transform:scale(.95)}
@media (hover:hover){button.hm-o:not(:disabled):not(.picked):hover{background:var(--surface-3)}}
.hm-mv{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
.hm-mv.up{border-bottom:6px solid var(--danger)}
.hm-mv.down{border-top:6px solid #3B82F6}
.hm-o.picked .hm-mv.up{border-bottom-color:#fff}
.hm-o.picked .hm-mv.down{border-top-color:#fff}
.hm-x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;justify-self:center;color:var(--text-3)}
.hm-x svg{width:16px;height:16px;transform:rotate(90deg);transition:transform .25s var(--g-ease)}
.hm-card.open .hm-x svg{transform:rotate(-90deg)}
.hm-x.ph{visibility:hidden}
.hm-ext[hidden]{display:none}
.hm-empty{gap:6px;background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r)}
.hm-empty b{color:var(--text);font-size:15px}
.hm-empty span{font-size:13.5px}
.hm-moreb{margin:0 0 14px}
.hm-lag{margin:0 0 10px;text-align:center}
@media (min-width:960px){.hm-bar,.hm-row:first-child{margin-top:0}}

/* ---- 랭킹 ---- */
.rk-seg{margin:2px 0 12px}
.rk-sub{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.rk-reset{gap:5px;height:28px}
.rk-reset svg{width:13px;height:13px}
.rk-reset b{font-family:"Saira Condensed",var(--font);font-size:14.5px;font-weight:600;letter-spacing:.02em;color:var(--text)}
.rk-cap{font-size:12.5px;font-weight:600;color:var(--text-3)}
.rk-filters{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.rk-by{display:flex;gap:5px}
.rk-by .g-chip{height:32px;padding:0 11px;font-size:13px;transition:transform .2s var(--g-ease)}
.rk-by .g-chip:active{transform:scale(.96)}
.rk-per{box-shadow:inset 0 1px 0 var(--g-hl)}
.rk-per>button{min-width:0;height:28px;padding:0 8px;font-size:12.5px}
.rk-sports{margin-bottom:10px}
.rk-me{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 12px}
.rk-mt{display:grid;gap:1px;min-width:0}
.rk-mt span{font-size:12px;font-weight:640;color:var(--text-3)}
.rk-mt b{font-size:16px;font-weight:720}
.rk-mt b.num{font-family:"Saira Condensed",var(--font);font-size:22px;line-height:1.05}
.rk-mv{margin-left:auto;display:grid;gap:1px;min-width:0;text-align:right}
.rk-mv b{font-family:"Saira Condensed",var(--font);font-size:20px;font-weight:680;line-height:1.05}
.rk-mv small{font-size:12px;font-weight:560;color:var(--text-3)}
.rk-me .g-btn{margin-left:auto}
.rk-list{background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r);overflow:hidden}
.rk-list>.g-empty{padding:36px 16px;gap:6px}
.rk-list>.g-empty b{color:var(--text)}
.rk-row{display:flex;align-items:center;gap:6px;min-height:64px;padding:0 10px 0 4px}
.rk-row+.rk-row{border-top:1px solid var(--line)}
.rk-row.me{background:color-mix(in srgb,var(--primary) 9%,transparent)}
.rk-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 4px;border-radius:14px;transition:background-color .15s var(--g-ease)}
.rk-main:active{background:var(--surface-2)}
.rk-no{flex:none;width:30px;display:grid;justify-items:center;gap:3px}
.rk-no b{font-family:"Saira Condensed",var(--font);font-size:18px;font-weight:680;line-height:1;color:var(--text-2)}

.rk-no .dl{font-style:normal;font-size:10.5px}
.rk-main .avatar.md{width:42px;height:42px;font-size:16px}
.rk-who{min-width:0;display:grid;gap:3px}
.rk-n{display:flex;align-items:center;gap:5px;min-width:0}
.rk-n .nm{min-width:0;font-size:15px;font-weight:680;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-n .tag,.rk-n .lvl{flex:none;margin:0}
.rk-n .ttl{flex:none;max-width:90px;padding:2px 6px;border-radius:5px;background:var(--primary-dim);color:var(--primary-2);font-size:10.5px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-l2{display:flex;align-items:baseline;min-width:0;font-size:12.5px;line-height:1.35}
.rk-m{flex:none;font-family:"Saira Condensed",var(--font);font-size:14.5px;font-weight:600;color:var(--text-2)}
.rk-m span:not(.num){font-family:var(--font);font-size:12px;color:var(--text-3)}
.rk-bio{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-weight:520}
.rk-m+.rk-bio::before{content:"·";margin:0 6px}
.rk-fol{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;transition:transform .2s var(--g-ease),background-color .2s var(--g-ease),color .2s var(--g-ease)}
.rk-fol svg{width:19px;height:19px}
.rk-fol.on{background:var(--surface-2);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.rk-fol:active{transform:scale(.9)}
.rk-fol:disabled{opacity:.55}

/* ---- 시트: iOS 유리 시트. 위 모서리 28px, 손잡이, 뒤가 살짝 비치는 두꺼운 재질 ---- */
.sheet-bg{background:rgba(0,0,0,.5);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .sheet-bg{background:rgba(15,18,25,.3)}
.sheet{background:var(--hr-sheet);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--g-stroke);border-bottom:0;border-radius:28px 28px 0 0;box-shadow:inset 0 1px 0 var(--g-hl),0 -10px 40px rgba(0,0,0,.32)}
:root .sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--text-3);opacity:.45;margin:0 auto 12px}

@media (min-width:960px){.sheet{border-radius:24px;border-bottom:1px solid var(--g-stroke)}}
@media (prefers-reduced-transparency:reduce){.sheet{background:var(--bg-1);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- 토스트: 유리 알약 ---- */
.toast{display:flex;align-items:center;gap:8px;width:max-content;max-width:min(92vw,440px);padding:11px 18px;border-radius:var(--pill);
  background:var(--hr-glass);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-stroke);
  box-shadow:inset 0 1px 0 var(--g-hl),var(--g-shadow);color:var(--text);font-size:14px;font-weight:600;line-height:1.35;text-align:center}
.toast.ok,.toast.bad{border-color:var(--g-stroke)}
.toast.ok::before,.toast.bad::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--up)}
.toast.bad::before{background:var(--down)}
.toast.out{animation:hrToastOut .2s ease-in forwards}
@keyframes hrToastOut{to{opacity:0;transform:translate(-50%,10px)}}
@media (prefers-reduced-transparency:reduce){.toast{background:var(--surface-3);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- 공통 다듬기: 부드러운 모서리(g- 값)와 같은 눌림(0.97) ---- */
.card{border-radius:var(--g-r)}
.btn,.btn.sm,.btn.primary{border-radius:var(--pill)}
.btn,.chip,.ibtn{transition:transform .2s var(--g-ease),background-color .2s var(--g-ease),color .2s var(--g-ease),border-color .2s var(--g-ease),box-shadow .2s var(--g-ease)}
.btn:not(:disabled):active,.chip:active,.ibtn:active,a.card:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.hm-sp,.hm-o,.hm-star,.hm-x svg,.rk-fol,.rk-main,.topbar.hr-top{transition:none}.hm-dot{animation:none}}
/* ==== /area:home-rank ==== */

/* ==== area:predict ==== */
/* 승부예측 (#/board). 조작 층(세그먼트)만 유리, 성적·경기 카드·시트 안 목록은 단단한 면.
 * 숫자는 Saira Condensed, 선택은 주 색을 옅게 깐 알약, 움직임은 transform/opacity 만. */
.pd{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:6px}
.pd .g-head{margin:0;min-height:44px}
.pd .g-head .g-iconbtn{background:var(--surface);border:1px solid var(--line)}
.pd-seg{justify-self:start}
.pd-seg>a{display:inline-flex;align-items:center;gap:6px}
.pd-live{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:9px;background:var(--up-dim);color:var(--up);font-size:11px;font-weight:680;letter-spacing:-.01em}

.pd-stat{padding:14px 16px}
.pd-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px}
.pd-stat .g-stat{flex-direction:column;align-items:flex-start;gap:4px}
.pd-stat .g-stat .v{font-size:38px}
.pd-prof{flex:none}
.pd-prof svg{width:17px;height:17px}
.pd-rec{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:600;color:var(--text-2)}
.pd-rec i,.pd-subt i{font-style:normal;color:var(--text-3);opacity:.55}
.pd-subr{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.pd-subt{display:flex;align-items:center;flex-wrap:wrap;gap:0 7px;min-height:32px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.pd-subt b{color:var(--text);font-size:14.5px;font-weight:680}
.pd-guide{margin-left:auto;display:inline-flex;align-items:center;gap:5px;min-height:32px;font-size:13px;font-weight:600;color:var(--text-3)}
.pd-guide .q{width:17px;height:17px;border-radius:50%;border:1.5px solid currentColor;display:inline-grid;place-items:center;font-size:10.5px;font-weight:680;line-height:1}
.pd-bar{height:4px;border-radius:2px;background:var(--surface-3);margin-top:6px;overflow:hidden}
.pd-bar i{display:block;height:100%;border-radius:2px;background:var(--primary);transform-origin:left center;transition:transform .32s var(--g-ease)}
.pd-stat.guest .pd-gt{display:block;font-size:17px;font-weight:680;letter-spacing:-.02em;line-height:1.35}
.pd-stat.guest p{margin:4px 0 12px;font-size:13.5px;font-weight:520;color:var(--text-2)}
.pd-gb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.pd-mz .g-row{min-height:50px;gap:10px}
.pd-mzi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--point);background:color-mix(in srgb,var(--point) 15%,transparent)}
.pd-mzi svg{width:18px;height:18px}

/* 오늘의 미션 줄: 닫기 버튼과 접히는 움직임 */
.pd-mz{position:relative;overflow:hidden;transition:height .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease,margin .3s ease}
.pd-mz.gone{height:0!important;opacity:0;margin-top:0;margin-bottom:0}
.pd-mz .g-row{padding-right:44px}
.pd-mzx{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--text-3);background:none;border:0}
.pd-mzx svg{width:15px;height:15px}
.pd-mzx:active{background:var(--surface-2)}
.pd-mz .g-chev{display:none}
/* 머리글 오른쪽 내 정보(프로필 사진) */
.hr-me{position:relative}
.hr-me .avatar{width:28px;height:28px;font-size:12px}
.hr-me .hr-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger,#ff453a);box-shadow:0 0 0 2px var(--bg)}
.pd-mz .g-sub{margin-left:auto}
.pd-mz .g-chev svg{width:100%;height:100%;display:block}
.pd-dot{width:8px;height:8px;border-radius:50%;background:var(--down);flex:none}

.pd-days{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px}
.pd-dbtn{width:44px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text);background:var(--surface);border:1px solid var(--line);transition:transform .2s var(--g-ease)}
.pd-dbtn svg{width:20px;height:20px}
.pd-dbtn:disabled{opacity:.3}
.pd-dbtn:active:not(:disabled){transform:scale(.94)}
.pd-dlbl{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16.5px;font-weight:680;letter-spacing:-.02em;color:var(--text);min-width:0}
.pd-dlbl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-dlbl:disabled{cursor:default}
.pd-today{height:20px;padding:0 8px;border-radius:10px;display:inline-flex;align-items:center;background:var(--primary-dim);color:var(--primary-on-dim);font-size:11.5px;font-weight:680;flex:none}

.pd-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.pd-chips::-webkit-scrollbar{display:none}
.pd-chips .g-chip{flex:none;height:32px;padding:0 12px}
.pd-chips .g-chip b{font-size:12px;font-weight:680;color:var(--text-3)}
.pd-chips .g-chip.on b{color:inherit;opacity:.75}
.pd-chips .e{font-size:14px;line-height:1}
@media (max-width:959px){.pd-chips{margin:0 -16px;padding:0 16px}}

.pd-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pd-m{background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r);padding:10px 14px 14px}
.pd-mh{display:flex;align-items:center;gap:6px;min-height:28px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.pd-flag{font-size:14px;line-height:1;flex:none}
.pd-lg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-when{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--text-3);font-weight:600}
.pd-when.live{color:var(--up)}
.pd-tags{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;overflow:hidden}
.pd-tags>*{flex:none}
@media (max-width:359px){.pd-when .d{display:none}}
.pd-done,.pd-pk{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:11px;font-size:11.5px;font-weight:680}
.pd-done{background:var(--up-dim);color:var(--up)}
.pd-done svg{width:11px;height:11px}
.pd-pk{background:var(--primary-dim);color:var(--primary-on-dim)}
.pd-star{width:34px;height:34px;margin:-6px -9px -6px -2px;display:grid;place-items:center;border-radius:50%;color:var(--text-3);flex:none;transition:transform .2s var(--g-ease)}
.pd-star svg{width:19px;height:19px}
.pd-star.on{color:var(--point)}
.pd-star.on svg{fill:currentColor}
.pd-star:active{transform:scale(.88)}
.pd-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 0 12px}
.pd-t{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:640;letter-spacing:-.02em}
.pd-t.a{justify-content:flex-end;text-align:right}
.pd-t .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-teams:has(.lead) .pd-t:not(.lead) .n{color:var(--text-2)}
.pd-cr{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:680;letter-spacing:0;color:hsl(var(--h) 70% 86%);background:hsl(var(--h) 36% 25%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
[data-theme=light] .pd-cr{color:hsl(var(--h) 55% 30%);background:hsl(var(--h) 60% 91%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.pd-mid{display:inline-flex;align-items:center;gap:6px}
.pd-mid em{font-style:normal;font-size:12px;font-weight:680;letter-spacing:.06em;color:var(--text-3)}
.pd-mid b{font-family:"Saira Condensed",var(--font);font-size:23px;font-weight:680;line-height:1}
.pd-mid i{font-style:normal;font-weight:680;color:var(--text-3)}
.pd-mks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pd-mk{height:36px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:640;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;transition:background .2s var(--g-ease),color .2s var(--g-ease),transform .2s var(--g-ease)}
.pd-mk.on{background:var(--primary-dim);border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:var(--primary-on-dim)}
.pd-mk:disabled{opacity:.38}
.pd-mk:active:not(:disabled){transform:scale(.97)}
.pd-odds{display:flex;gap:6px;margin-top:8px}
.pd-odds.in{animation:pd-in .24s var(--g-ease)}
@keyframes pd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pd-o{flex:1;min-width:0;height:50px;border-radius:var(--g-r-sm);background:var(--surface-3);border:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;overflow:hidden;transition:background .15s var(--g-ease),transform .15s var(--g-ease)}
.pd-o .l{max-width:100%;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;line-height:1.1;color:var(--text-2)}
.pd-o b{font-size:16px;font-weight:680;line-height:1.1;color:var(--text)}
.pd-o.picked{background:var(--primary);border-color:var(--primary-2)}
.pd-o.picked .l,.pd-o.picked b{color:#fff}
.pd-o:disabled{opacity:.45}
.pd-o:active:not(:disabled){transform:scale(.96)}
.pd-o.pop{animation:pd-pop .22s var(--g-ease)}
@keyframes pd-pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.pd-o .lk{position:absolute;top:6px;right:7px;width:11px;height:11px;color:var(--text-3)}
.pd-o .lk svg{width:100%;height:100%;display:block}
.pd-o .mv{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent}
.pd-o .mv.up{border-right-color:#FF6B6B}
.pd-o .mv.down{border-right-color:#4A8CFF}
@media (hover:hover){.pd-o:not(:disabled):not(.picked):hover{background:var(--surface-2)}.pd-mk:not(:disabled):not(.on):hover{color:var(--text)}}
.pd-ln{flex:none;min-width:58px;padding:0 8px;display:grid;place-items:center;border-radius:var(--g-r-sm);background:var(--surface-2);font-size:13px;font-weight:680;color:var(--text-2)}
.pd-st{height:34px;border-radius:var(--pill);display:grid;place-items:center;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-3)}
.pd-more{margin-top:2px}
.pd-empty{padding:36px 16px}
.pd-empty b{color:var(--text-2);font-size:15px}
.pd-qual{margin:0}
@media (min-width:1400px){.pd-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.pd-rule b,.pd-rule p,.pd-mit b,.pd-gt,.pd-stat.guest p,.pd-lim b,.pd-empty{word-break:keep-all;overflow-wrap:anywhere}

/* 오늘의 미션 시트 */
.pd-mzh{display:flex;align-items:baseline;gap:8px}
.pd-mzh .sh-t{margin:0}
.pd-mzh .num{font-size:14px;font-weight:680;color:var(--text-3)}
.pd-mzsum{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:14px 16px;border-radius:var(--g-r);background:color-mix(in srgb,var(--point) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--point) 24%,transparent)}
.pd-mzsum span{font-size:14px;font-weight:600;color:var(--text-2)}
.pd-mzsum b{font-family:"Saira Condensed",var(--font);font-size:26px;font-weight:680;line-height:1;color:var(--point)}
.pd-mi{display:flex;align-items:center;gap:12px;min-height:64px;padding:11px 14px}
.pd-mi+.pd-mi{border-top:1px solid var(--line)}
.pd-mic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--text-2)}
.pd-mic svg{width:19px;height:19px}
.pd-mit{flex:1;min-width:0;display:grid;gap:3px}
.pd-mit b{font-size:14.5px;font-weight:640;line-height:1.3}
.pd-mit small{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:520;color:var(--text-3)}
.pd-mit small>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-rw{flex:none;color:var(--point);font-weight:680}
.pd-mip{flex:none;font-size:12.5px;font-weight:680;color:var(--text-3)}
.pd-mb{flex:none;min-width:62px}
.pd-mb svg{width:13px;height:13px}
.pd-mb.got,.pd-mb.got:disabled{opacity:1;min-width:0;padding:0 4px;background:transparent;border-color:transparent;color:var(--up)}
.pd-mi.done .pd-mit b{color:var(--text-2)}
.pd-mi.done .pd-mic{color:var(--up);background:var(--up-dim)}
.pd-stk{display:inline-flex;gap:3px}
.pd-stk i{width:12px;height:4px;border-radius:2px;background:var(--surface-3)}
.pd-stk i.on{background:var(--up)}
.pd-mzcta{margin-top:12px}

/* 승부예측 안내 시트 */
.pd-rules{margin:0 0 12px}
.pd-rule{display:flex;align-items:flex-start;gap:12px;padding:12px 14px}
.pd-rule+.pd-rule{border-top:1px solid var(--line)}
.pd-ric{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--primary-dim);color:var(--primary-on-dim)}
.pd-ric svg{width:16px;height:16px}
.pd-rule b{display:block;font-size:14.5px;font-weight:640;line-height:1.35}
.pd-rule p{margin:2px 0 0;font-size:13px;font-weight:500;line-height:1.45;color:var(--text-2)}
.pd-lim{margin:0 0 12px;padding:2px 14px;border-radius:var(--g-r-sm);background:var(--g-card);border:1px solid var(--g-card-line)}
.pd-lim>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;font-size:13px}
.pd-lim>div+div{border-top:1px solid var(--line)}
.pd-lim span{flex:none;color:var(--text-2);font-weight:600}
.pd-lim b{font-weight:680;text-align:right}

/* 승부예측 프로필 카드 (OVR). 테마와 무관하게 어두운 카드 한 장. */
.sheet.pd-cardsheet{background:transparent;border:0;box-shadow:none;padding-bottom:calc(20px + var(--safe-b))}
.sheet.pd-cardsheet .grab{background:rgba(255,255,255,.4)}
.pd-pc{position:relative;max-width:340px;margin:0 auto;padding:22px 18px 16px;border-radius:24px;overflow:hidden;text-align:center;color:#fff;background:#14151B;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.pd-pc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--primary)}
.pd-ovr{position:absolute;top:18px;left:20px;display:grid;justify-items:center;line-height:1}
.pd-ovr b{font-family:"Saira Condensed",var(--font);font-size:46px;font-weight:680;color:#fff}
.pd-ovr span{margin-top:3px;font-size:11px;font-weight:680;letter-spacing:.14em;color:#9AA2FF}
.pd-pav{width:104px;height:104px;margin:16px auto 12px;padding:3px;border-radius:50%;background:rgba(255,255,255,.14)}
.pd-pav .avatar{width:100%;height:100%;font-size:36px;border-radius:50%}
.pd-pav .avatar .chk{display:none}
.pd-pn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;font-size:21px;font-weight:680;letter-spacing:-.02em}
.pd-pn b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-pn .tag.auto{background:rgba(255,255,255,.16);color:#fff}
.pd-pt{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:680;background:rgba(255,255,255,.12)}
.pd-cgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:10px 20px;margin-top:16px;padding:16px 6px 2px;border-top:1px solid rgba(255,255,255,.12);text-align:left}
.pd-cs{display:flex;align-items:baseline;gap:10px;min-width:0}
.pd-cs b{min-width:32px;font-family:"Saira Condensed",var(--font);font-size:25px;font-weight:680;line-height:1.1;color:#fff}
.pd-cs span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72)}
.pd-cs.none b{color:rgba(255,255,255,.42)}
.pd-pf{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8)}
.pd-pf b{color:#fff}
.pd-pf i{font-style:normal;opacity:.5}
.pd-cardsheet .pd-close{display:flex;max-width:340px;margin:12px auto 0}
/* ==== /area:predict ==== */

/* ==== area:picks ==== */
/* 픽 목록 · 상세 · 쓰기 (2026-09-30, docs/ui-liquid-glass.md).
 * 글이 있는 카드는 단단한 면에 리그 색을 옅게 깔고, 조작 층(등급 세그먼트, 종목 탭, 시트)만 g- 유리 부품을 쓴다.
 * 리그 색은 여섯 가지(--pk). 두 테마 모두 글자 대비 4.5:1 을 넘도록 섞는 비율을 따로 둔다. */
.pk-card,.pk-detail,.pk-chosen,.pk-opt,.pk-mrow{--pk:#5B7CFA}
.pk-card.h0,.pk-detail.h0,.pk-chosen.h0,.pk-opt.h0,.pk-mrow.h0{--pk:#5B7CFA}
.pk-card.h1,.pk-detail.h1,.pk-chosen.h1,.pk-opt.h1,.pk-mrow.h1{--pk:#9A6CF2}
.pk-card.h2,.pk-detail.h2,.pk-chosen.h2,.pk-opt.h2,.pk-mrow.h2{--pk:#1AA596}
.pk-card.h3,.pk-detail.h3,.pk-chosen.h3,.pk-opt.h3,.pk-mrow.h3{--pk:#E39A3A}
.pk-card.h4,.pk-detail.h4,.pk-chosen.h4,.pk-opt.h4,.pk-mrow.h4{--pk:#E35F7F}
.pk-card.h5,.pk-detail.h5,.pk-chosen.h5,.pk-opt.h5,.pk-mrow.h5{--pk:#5FAE45}
.pk-lg{color:color-mix(in srgb,var(--pk) 70%,#fff);font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root[data-theme="light"] .pk-lg{color:color-mix(in srgb,var(--pk) 62%,#000)}

/* 팀 첫 글자 배지 */
.pk-crest{flex:none;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:11.5px;font-weight:680;color:#fff;letter-spacing:-.02em;line-height:1}
.pk-crest.c0{background:#5266DB}.pk-crest.c1{background:#8656D6}.pk-crest.c2{background:#128C7E}.pk-crest.c3{background:#B86E1F}
.pk-crest.c4{background:#C4476A}.pk-crest.c5{background:#2F83C2}.pk-crest.c6{background:#5B8A2B}.pk-crest.c7{background:#6B7080}
.pk-crest.dr{background:var(--surface-3);color:var(--text-2);font-size:14px}
.pk-crest::before{content:attr(data-i)}

/* ---- 목록 ---- */
.pk-view{display:grid;gap:12px}
.pk-head{display:flex;align-items:center;gap:10px}
.pk-head .g-seg{flex:1}
.pk-pcw{display:none}
.pk-pcw svg{width:16px;height:16px}
.pk-sports{margin:0 -16px;padding:0 10px}
.pk-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-4px}
.pk-sort{display:flex;gap:2px}
.pk-sort button{height:30px;padding:0 11px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:var(--text-3);transition:color .2s var(--g-ease),background .2s var(--g-ease),transform .2s var(--g-ease)}
.pk-sort button.on{color:var(--text);background:var(--surface-2)}
.pk-past{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:var(--pill);font-size:13px;font-weight:600;color:var(--text-2);border:1px solid var(--line-2);transition:color .2s var(--g-ease),background .2s var(--g-ease),border-color .2s var(--g-ease),transform .2s var(--g-ease)}
.pk-past svg{width:15px;height:15px}
.pk-past.on{color:var(--primary-on-dim);background:var(--primary-dim);border-color:transparent}
.pk-sort button:active,.pk-past:active{transform:scale(.95)}
#pkbody{transition:opacity .18s var(--g-ease)}
#pkbody.pk-busy{opacity:.45;pointer-events:none}
#pkbody.pk-swap{animation:pk-fade .3s var(--g-ease)}
.pk-list{display:grid;gap:10px}
.pk-more{display:grid;justify-items:center;padding:6px 0 4px}
.pk-more .g-btn{min-width:128px}
.pk-empty{padding:40px 16px}
.pk-empty>svg{width:34px;height:34px;opacity:.55}
.pk-empty b{color:var(--text);font-weight:640}
.pk-empty.sm{padding:28px 16px}
.g-btn.pk-wait{position:relative;color:transparent!important}
.g-btn.pk-wait::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-color:var(--text-3) var(--text-3) var(--text-3) transparent;animation:pk-spin .7s linear infinite}
.g-btn.primary.pk-wait::after{border-color:#fff #fff #fff transparent}

/* ---- 카드 ---- */
.pk-card{position:relative;isolation:isolate;display:grid;gap:10px;padding:12px 14px;border-radius:var(--g-r);
  background:color-mix(in srgb,var(--pk) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--pk) 20%,var(--line));
  transition:transform .2s var(--g-ease),border-color .2s var(--g-ease)}
:root[data-theme="light"] .pk-card{background:color-mix(in srgb,var(--pk) 5%,#fff);border-color:color-mix(in srgb,var(--pk) 22%,var(--line))}
.pk-card:active{transform:scale(.985)}
@media (hover:hover){.pk-card:hover{border-color:color-mix(in srgb,var(--pk) 40%,var(--line))}}
.pk-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pk-hit:focus-visible{outline-offset:-2px;border-radius:var(--g-r)}
.pk-u{position:relative;z-index:2;display:flex;border-radius:50%}
.pk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;line-height:1.2}
.pk-st{display:flex;align-items:center;gap:10px;color:var(--text-3);font-weight:560;flex:none}
.pk-st span{display:inline-flex;align-items:center;gap:3px}
.pk-st svg{width:13px;height:13px;flex:none}
.pk-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px}
.pk-av{position:relative;display:inline-flex;flex:none}
.pk-av .avatar .chk{display:none}
.pk-av.ex .avatar .chk{display:grid}
.pk-mid{display:grid;gap:3px;min-width:0}
.pk-t{font-size:15.5px;font-weight:640;line-height:1.35;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.pk-t.fxt,.pk-dt.fxt{background:linear-gradient(90deg,var(--primary-2),var(--fx-title));-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-by{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;font-weight:560;color:var(--text-2);line-height:1.3}
.pk-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-nm.glow{background:linear-gradient(90deg,var(--primary-2),var(--fx-glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-by .tag{height:17px;padding:0 5px;font-size:10px;flex:none}
.pk-ttl{flex:none;font-size:10.5px;font-weight:680;padding:1px 6px;border-radius:5px;background:var(--primary-dim);color:var(--primary-on-dim)}
.pk-lv{flex:none;font-size:11px;font-weight:680;color:var(--text-3)}
.pk-price{flex:none;align-self:start;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:var(--pill);font-size:12.5px;font-weight:680;white-space:nowrap}
.pk-price svg{width:12px;height:12px}
.pk-price.free{color:var(--up-on-dim);background:var(--up-dim)}
.pk-price.paid{color:var(--point);background:color-mix(in srgb,var(--point) 15%,transparent)}
.pk-match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--pk) 14%,var(--line))}
.pk-tm{display:flex;align-items:center;gap:7px;min-width:0;font-size:13.5px;font-weight:600}
.pk-tm.h{justify-content:flex-end;text-align:right}
.pk-tm .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-when{display:grid;justify-items:center;gap:2px;min-width:66px;text-align:center;line-height:1.15}
.pk-when i{font-style:normal;font-size:11px;font-weight:600;color:var(--text-3)}
.pk-when b{font-size:15px;font-weight:680}
.pk-when .pk-sc{font-family:"Saira Condensed",var(--font);font-size:19px;font-weight:680;letter-spacing:.02em}
.pk-live{color:var(--down)!important;font-weight:680!important;letter-spacing:.04em}
.pk-in{animation:pk-in .38s var(--g-ease) both;animation-delay:calc(var(--i,0) * 36ms)}

/* ---- 상세 ---- */
.pk-detail{display:grid;gap:14px}
.pk-dt{margin:2px 0 0;font-size:22px;font-weight:680;line-height:1.32;letter-spacing:-.025em;word-break:keep-all;overflow-wrap:anywhere}
.pk-author{display:flex;align-items:center;gap:10px}
.pk-au{display:flex;align-items:center;gap:11px;flex:1;min-width:0;border-radius:var(--r-sm);transition:opacity .2s var(--g-ease)}
.pk-au:active{opacity:.7}
.pk-aw{display:grid;gap:3px;min-width:0}
.pk-an{display:flex;align-items:center;gap:5px;min-width:0;font-size:15px;line-height:1.25}
.pk-an .pk-nm{font-weight:640}
.pk-an .tag{height:18px;padding:0 6px;font-size:10.5px;flex:none}
.pk-as{display:flex;align-items:center;flex-wrap:wrap;gap:0 5px;font-size:12.5px;font-weight:520;color:var(--text-3)}
.pk-as i{font-style:normal;opacity:.7}
.pk-rate{color:var(--text-2);font-weight:600}
.pk-rate.pk-hot{color:var(--up)}
.pk-act{flex:none;height:30px;padding:0 12px;border-radius:var(--pill);font-size:12.5px;font-weight:600;color:var(--text-3);border:1px solid var(--line-2);transition:transform .2s var(--g-ease)}
.pk-act:active{transform:scale(.95)}
.pk-act.danger{color:var(--danger)}
.pk-box{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"l l l" "h m a";align-items:center;gap:12px 8px;padding:14px 12px 16px;border-radius:var(--g-r);
  background:color-mix(in srgb,var(--pk) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--pk) 22%,var(--line));transition:transform .2s var(--g-ease)}
:root[data-theme="light"] .pk-box{background:color-mix(in srgb,var(--pk) 6%,#fff)}
.pk-box:active{transform:scale(.985)}
.pk-bl{grid-area:l;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px}
.pk-bt{display:grid;justify-items:center;gap:7px;min-width:0;text-align:center}
.pk-bt:first-of-type{grid-area:h}.pk-bt:last-of-type{grid-area:a}
.pk-bt .pk-crest{width:40px;height:40px;font-size:16px}
.pk-bt b{font-size:14.5px;font-weight:640;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.pk-bm{grid-area:m;display:grid;justify-items:center;gap:3px;min-width:78px;line-height:1.15}
.pk-bm i{font-style:normal;font-size:12px;font-weight:600;color:var(--text-3)}
.pk-bm b{font-size:20px;font-weight:680}
.pk-bm .pk-bsc{font-family:"Saira Condensed",var(--font);font-size:30px;letter-spacing:.02em}
.pk-pred{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:13px 14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.pk-pl{font-size:12.5px;font-weight:640;color:var(--text-3)}
.pk-pv{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:680;min-width:0}
.pk-pv .pk-crest{width:24px;height:24px;font-size:11px}
.pk-pm{font-size:11.5px;font-weight:640;color:var(--text-3);padding:2px 7px;border-radius:5px;background:var(--surface-2)}
.pk-pred .rtag{margin-left:auto}
.pk-ps{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text-2)}
.pk-ps b{font-family:"Saira Condensed",var(--font);font-size:20px;color:var(--text)}
.pk-body{display:grid;gap:8px}
.pk-text{font-size:15.5px;line-height:1.78;white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all}
.pk-lock{position:relative;display:grid;border-radius:var(--g-r);overflow:hidden;background:var(--surface);border:1px solid var(--line-2)}
.pk-lines{display:grid;gap:9px;padding:18px 18px 0}
.pk-lines i{display:block;height:10px;border-radius:5px;background:var(--surface-3);opacity:.7}
.pk-lines i:nth-child(2){width:86%}.pk-lines i:nth-child(3){width:62%}
.pk-lk{display:grid;justify-items:center;gap:6px;padding:14px 18px 18px;text-align:center}
.pk-lk-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--point) 15%,transparent);color:var(--point)}
.pk-lk-i svg{width:19px;height:19px}
.pk-lk-t{font-size:15px;font-weight:680;margin-top:2px}
.pk-lk-p{font-family:"Saira Condensed",var(--font);font-size:26px;font-weight:680;color:var(--point);line-height:1.05}
.pk-lrec{font-size:12.5px;font-weight:560;color:var(--text-3)}
.pk-lrec b{color:var(--text-2)}.pk-lrec b.up{color:var(--up)}
.pk-lk .g-btn{margin-top:8px}
.pk-lk-f{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 5px;font-size:12.5px;font-weight:560;color:var(--text-3)}
.pk-lk-f b{color:var(--text-2)}
.pk-lk-f i{font-style:normal;opacity:.7}
.pk-reveal{animation:pk-reveal .55s var(--g-ease) both}
.pk-votes{display:flex;justify-content:center;gap:8px}
.pk-vote{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--pill);font-size:14px;font-weight:640;color:var(--text-2);background:var(--surface);border:1px solid var(--line-2);transition:transform .2s var(--g-ease),background .2s var(--g-ease),color .2s var(--g-ease)}
.pk-vote svg{width:17px;height:17px}
.pk-vote.down svg{transform:rotate(180deg)}
.pk-vote.on{color:var(--primary-on-dim);background:var(--primary-dim);border-color:transparent}
.pk-vote.down.on{color:var(--down-on-dim);background:var(--down-dim)}
.pk-vote:active{transform:scale(.95)}
.pk-vote.pop{animation:pk-pop .32s var(--g-ease)}
.pk-sec{display:grid;gap:8px}
.pk-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pk-sec-h h3{margin:0;font-size:16px;font-weight:680}
.pk-link{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--text-3)}
.pk-link svg{width:14px;height:14px}
.pk-mrow{display:flex;align-items:center;gap:10px;padding:11px 14px;min-height:56px;transition:background .2s var(--g-ease)}
.pk-mrow+.pk-mrow{border-top:1px solid var(--line)}
.pk-mrow:active{background:var(--surface-2)}
.pk-mm{display:grid;gap:2px;min-width:0;flex:1}
.pk-mm b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-msub{font-size:12px;font-weight:520;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-mr{display:flex;align-items:center;gap:6px;flex:none}
.pk-disc{margin:0;font-size:12px;line-height:1.55;color:var(--text-3);text-align:center;word-break:keep-all}
.pk-detail .cmts{margin-top:4px}
.pk-sheet .pk-sh-t{margin:-4px 0 12px;font-size:14px;font-weight:560;color:var(--text-2);line-height:1.45;overflow-wrap:anywhere}
.pk-sh-rows .g-row{min-height:46px;font-size:14.5px}
.pk-sh-rows .g-sub{color:var(--text);font-weight:640}
.pk-sh-rows .g-sub.down{color:var(--down)}
.pk-sh-b{display:grid;gap:8px;margin-top:14px}
.pk-sh-n{margin:10px 0 0;font-size:12.5px;font-weight:520;color:var(--text-3);text-align:center}
.pk-sh-n.down{color:var(--down)}

/* ---- 쓰기 ---- */
.pk-new{display:grid}
.pk-gl{margin:18px 6px 7px;font-size:13px;font-weight:600;color:var(--text-3);letter-spacing:0}
.pk-gl:first-child{margin-top:4px}
.pk-grp{border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2);overflow:hidden}
.pk-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 14px;text-align:left;font-size:15px;font-weight:560}
.pk-choose{color:var(--primary-on-dim)}
.pk-choose svg{width:20px;height:20px;flex:none}
.pk-choose span{flex:1}
.pk-choose svg:last-child{width:16px;height:16px;color:var(--text-3)}
.pk-chosen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;background:color-mix(in srgb,var(--pk) 7%,var(--surface))}
:root[data-theme="light"] .pk-chosen{background:color-mix(in srgb,var(--pk) 5%,#fff)}
.pk-c1{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px}
.pk-ct{color:var(--text-3);font-weight:560;flex:none}
.pk-c2{grid-column:1;display:flex;align-items:center;gap:7px;min-width:0;font-size:15px}
.pk-c2 b{font-weight:640;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-c2 i{font-style:normal;font-size:12px;font-weight:600;color:var(--text-3);flex:none}
.pk-c2 .pk-crest{width:22px;height:22px;font-size:10px}
.pk-cc{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:13px;font-weight:640;color:var(--primary-on-dim)}
.pk-vs{display:flex;gap:6px;padding:10px}
.pk-vs button{flex:1;min-width:0;display:grid;justify-items:center;gap:6px;padding:11px 6px;border-radius:var(--g-r-sm);background:var(--surface-2);border:1px solid transparent;font-size:13.5px;font-weight:640;color:var(--text-2);line-height:1.25;transition:transform .2s var(--g-ease),background .2s var(--g-ease),border-color .2s var(--g-ease),color .2s var(--g-ease)}
.pk-vs button span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-vs button.on{color:var(--text);background:var(--primary-dim);border-color:var(--primary)}
.pk-vs button:active{transform:scale(.96)}
.pk-vs button:disabled{opacity:.5}
.pk-score{border-top:1px solid var(--line);font-size:14.5px}
.pk-score em{font-style:normal;font-size:12px;font-weight:600;color:var(--text-3)}
.pk-sci{margin-left:auto;display:flex;align-items:center;gap:6px}
.pk-sci input{width:44px;height:36px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);text-align:center;font-size:16px;font-weight:680;outline:none;transition:border-color .2s var(--g-ease)}
.pk-sci input:focus{border-color:var(--primary)}
.pk-sci i{font-style:normal;font-weight:680;color:var(--text-3)}
.pk-write{display:grid}
.pk-in-t,.pk-in-b{width:100%;border:0;background:transparent;outline:none;padding:14px;font-size:16px;color:var(--text)}
.pk-in-t{font-weight:640;border-bottom:1px solid var(--line)}
.pk-in-b{resize:vertical;min-height:170px;line-height:1.65;font-weight:500;padding-bottom:4px}
.pk-in-t::placeholder,.pk-in-b::placeholder,.pk-msq::placeholder{color:var(--text-3);font-weight:500}
.pk-cnt{display:flex;justify-content:flex-end;align-items:center;gap:4px;padding:2px 14px 10px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.pk-cnt b{color:var(--text-2)}
.pk-cnt .ok{display:inline-flex;align-items:center;gap:4px;color:var(--up)}
.pk-cnt .ok svg{width:12px;height:12px}
.pk-costs{padding:10px}
.pk-cost{width:100%}
.pk-cost>button{min-width:0;padding:0 6px;font-size:13.5px}
.pk-split{margin:10px 4px 2px;font-size:12.5px;font-weight:560;color:var(--text-2)}
.pk-preview{pointer-events:none}
.pk-err{margin:7px 6px 0;font-size:12.5px;font-weight:600;color:var(--danger)}
.pk-err:not([hidden]){animation:pk-fade .25s var(--g-ease)}
.pk-err-s{margin:16px 2px 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--down-dim);text-align:center}
.pk-submit{margin-top:16px;height:50px;font-size:16px}
.pk-msq{margin:4px 0 8px}
.pk-sheet .pk-sports{margin:0 0 8px;padding:0}
.pk-mslist{display:grid}
.pk-day{position:sticky;top:0;z-index:1;padding:10px 4px 6px;font-size:12.5px;font-weight:680;color:var(--text-3);background:var(--hr-sheet,var(--surface))}
.pk-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 6px;text-align:left;border-radius:var(--r-sm);transition:background .2s var(--g-ease)}
.pk-opt+.pk-opt{border-top:1px solid var(--line)}
.pk-opt:active,.pk-opt.on{background:color-mix(in srgb,var(--pk) 10%,transparent)}
.pk-ot{flex:none;width:44px;font-size:14px;font-weight:680}
.pk-ob{display:grid;gap:2px;min-width:0;flex:1;font-size:12px}
.pk-ov{display:flex;align-items:center;gap:6px;min-width:0;font-size:14.5px}
.pk-ov b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-ov i{font-style:normal;font-size:11.5px;color:var(--text-3);flex:none}
.pk-oc{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff}
.pk-oc svg{width:12px;height:12px}

@media (min-width:960px){
  .pk-pcw{display:inline-flex}
  .pk-head .g-seg{flex:0 1 420px}
  .pk-head{justify-content:space-between}
  .pk-sports{margin:0;padding:0}
  .pk-dt{font-size:26px}
  .pk-in-b{min-height:240px}
}
@keyframes pk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pk-fade{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pk-reveal{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes pk-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes pk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .pk-in,#pkbody.pk-swap,.pk-reveal,.pk-vote.pop,.pk-err:not([hidden]){animation:none}
  .pk-card,.pk-box,.pk-vote,.pk-vs button,.pk-sort button,.pk-past,.pk-act,#pkbody{transition:none}
}
/* ==== /area:picks ==== */

/* ==== area:social ==== */
/* 내 정보 · 프로필 · 설정 · 로그인 (app.js openAuth, meWelcome, viewUser, viewMy, viewGuide, viewSettings).
 * 글과 숫자는 단단한 면(g-card, g-list), 유리는 시트와 떠 있는 버튼에만. 이름 접두사: au(로그인),
 * mw(반기는 화면), sp(프로필), me(내 정보), gd(가이드), sx(설정 줄. st- 는 순위표가 쓴다). */

/* 키보드가 올라오면 시트를 그 위로 (app.js sheetKb). 앱은 웹뷰가 줄어 --kb 가 0 이다. */
@media (max-width:959px){
  #sheet-root .sheet{transition:transform .26s cubic-bezier(.22,.61,.36,1),bottom .24s var(--g-ease),max-height .24s var(--g-ease)}
  #sheet-root .sheet.kb{bottom:var(--kb,0px);max-height:calc(var(--vvh,100dvh) - 10px);padding-bottom:14px}
}

/* 로그인 · 가입 시트 */
.au-h{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.au-logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary);flex:none}
.au-logo .brand-mark{width:26px;height:26px}
.au-ht h3{margin:0}
.au-ht .sub{margin:2px 0 0}
.au-f{display:block;margin-top:10px}
.au-l{display:block;font-size:12.5px;font-weight:640;color:var(--text-2);margin:0 2px 6px}
.au-pw{position:relative;display:block}
.au-pw .input{padding-right:50px}
.au-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--text-3)}
.au-eye svg{width:21px;height:21px}
.au-eye[aria-pressed=true]{color:var(--text)}
.au-m{min-height:0;font-size:12.5px;font-weight:600;margin:5px 2px 0;line-height:1.35}
.au-m:empty{display:none}
.au-m.bad{color:var(--down)}
.au-m.ok{color:var(--up)}
.au-m.ok::before{content:"✓ "}
.au-link{margin-top:10px;font-size:13px;font-weight:640;color:var(--primary-on-dim);padding:4px 2px}
.au-cs{margin-top:12px}
.au-cs .cs-list .cs{padding:7px 13px}
.au-cs .cs span{align-items:flex-start;line-height:1.45}
.au-cs .cs em{margin-top:1px}
.au-cs .cs-note{padding:8px 13px;font-size:12px}
.au-keep{display:flex;align-items:center;gap:9px;margin:12px 2px 0;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;width:max-content}
.au-keep input{width:20px;height:20px;margin:0;accent-color:var(--primary);flex:none}
.au .err{margin-top:10px}
.au-go{margin-top:14px;height:50px;font-size:16px}
.au .switch{margin-top:12px}
.au .switch button{padding:6px 2px}

/* 로그인하지 않은 내 정보: 반기는 화면 */
.mw{max-width:440px;margin:4px auto 0;display:grid;justify-items:center;text-align:center;padding:26px 20px 18px;
  background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r)}
.mw-logo{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--primary);color:#fff;margin-bottom:14px}
.mw-logo .brand-mark{width:36px;height:36px;color:#fff}
.mw-logo .brand-mark path:last-child{stroke:var(--primary)}
.mw-t{margin:0;font-size:22px;font-weight:680;letter-spacing:-.03em;line-height:1.25;word-break:keep-all}
.mw-s{margin:6px 0 0;color:var(--text-2);font-size:15px;font-weight:520}
.mw-f{list-style:none;margin:18px 0 20px;padding:0;display:grid;gap:10px;width:100%;text-align:left}
.mw-f li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.mw-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary-on-dim);flex:none}
.mw-ic svg{width:19px;height:19px}
.mw-b{display:grid;gap:8px;width:100%}
.mw-b .g-btn{height:50px;font-size:16px}
.mw-skip{margin-top:12px;padding:6px 10px;font-size:14px;font-weight:600;color:var(--text-3)}
@media (prefers-reduced-motion:no-preference){.mw{animation:sp-in .32s var(--g-ease) both}}
@keyframes sp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 회원 프로필 (#/u/:handle) */
.sp{padding:2px 2px 0}
.sp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sp-av{position:relative;display:inline-block;flex:none}
.sp-av .avatar .chk{display:none}
.sp-vf{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;border:3px solid var(--bg)}
.sp-vf svg{width:12px;height:12px}
.sp-acts{display:flex;gap:8px;padding-top:4px}
.sp-act{background:var(--surface-2);border:1px solid var(--line-2);color:var(--text-2)}
.sp-act svg{width:20px;height:20px}
.sp-act.on{color:var(--primary-on-dim);background:var(--primary-dim);border-color:transparent}
.sp-act.on.bad{color:var(--down);background:var(--down-dim)}
.sp-name{margin:12px 0 0;font-size:23px;font-weight:680;letter-spacing:-.03em;line-height:1.2;display:flex;align-items:center;gap:7px;flex-wrap:wrap;overflow-wrap:anywhere}
.sp-handle{color:var(--text-3);font-size:14px;font-weight:520;margin-top:3px}
.sp-bio{margin:10px 0 0;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.sp-bio.add{display:block;padding:0;color:var(--text-3);font-weight:520;text-align:left}
.sp .ublocked{margin-top:12px}
.sp-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.sp-sl{min-width:0}
.sp-stat .g-stat .v.none{font-family:var(--font);font-size:26px;color:var(--text-3)}
.sp-ss{margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--text-2)}
.sp-ss i{font-style:normal;color:var(--text-3);opacity:.55}
.sp-card{flex:none;gap:6px}
.sp-card svg{width:17px;height:17px}
.sp-cnt{padding:10px 6px}
.g-card.sp-cnt{margin-top:10px}
.sp-cnt .g-count{align-items:start}
.sp-cnt .g-count .n{min-height:28px;display:grid;place-items:center;line-height:1}
.sp-cnt .g-count>.sp-ico{align-self:center;padding:0}
.sp-cnt .g-count>a{color:inherit}
.sp-ttl{font-family:var(--font);font-size:inherit;min-height:26px;display:grid;place-items:center}
.sp-ttl .ttl{font-size:12px;font-weight:680;padding:3px 8px;border-radius:7px;background:var(--primary-dim);color:var(--primary-on-dim);white-space:nowrap}
.sp-none{font-size:14px;font-weight:600;color:var(--text-3)}
.sp-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto;color:var(--primary-on-dim);transition:transform .2s var(--g-ease)}
.sp-ico.gift{color:var(--point)}
.sp-ico svg{width:24px;height:24px}
.sp-ico:active{transform:scale(.92)}
.sp-lock{margin-top:10px}
.sp-lk-h{display:flex;align-items:center;gap:8px;font-size:15px}
.sp-lk-h svg{width:18px;height:18px;color:var(--primary-on-dim)}
.sp-lock p{margin:6px 0 12px;font-size:13.5px;line-height:1.5;color:var(--text-2);word-break:keep-all}
.sp-lock small{display:block;margin-top:8px;font-size:12px;color:var(--text-3);text-align:center}
.sp-tabs{margin:16px 0 10px}
.sp-sub{margin-bottom:10px}
.sp-sub .g-seg>button{height:32px;font-size:13.5px}
.sp-more{margin-top:12px}
.sp-list .qual{margin-bottom:8px}
.g-empty.sp-empty{padding:34px 16px}
@media (prefers-reduced-motion:no-preference){.sp-items>*{animation:sp-in .28s var(--g-ease) both}}

/* 설정 줄 (설정 화면, 로그인 전 내 정보, 내 정보 메뉴가 같이 쓴다) */
.sx-h{margin:18px 4px 7px;font-size:13px;font-weight:640;color:var(--text-3);letter-spacing:0}
.sx-list+.sx-list,.g-card+.sx-list,.sx-list+.g-card,.mw+.sx-list{margin-top:12px}
.sx-row{min-height:50px;padding:9px 14px;gap:12px;color:var(--text);text-decoration:none}
.sx-row .sx-t{flex:1;min-width:0;display:grid;gap:2px}
.sx-row .sx-t b{font-size:15.5px;font-weight:560;line-height:1.3}
.sx-row .sx-t small{font-size:12.5px;font-weight:500;color:var(--text-3);line-height:1.4;word-break:keep-all}
.sx-row .g-sub{margin-left:0;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-row .g-badge{flex:none}
.sx-row .toggle{flex:none}
.sx-row.danger .sx-t b{color:var(--down)}
.sx-row.danger .sx-ic{color:var(--down);background:var(--down-dim)}
.sx-row:disabled{opacity:1}
.sx-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--text-2)}
.sx-ic svg{width:18px;height:18px}
.sx-segrow{flex-wrap:wrap;row-gap:8px}
.sx-segrow .g-seg{margin-left:auto;flex:none}
.sx-segrow .g-seg>button{min-width:0;height:32px;padding:0 12px;font-size:13.5px}
.sx-pick .g-row{justify-content:space-between}
.sx-chk{color:var(--primary-on-dim)}
.sx-chk svg{width:18px;height:18px}
.sx-login{display:grid;gap:8px;margin-top:18px}
.sx-login .g-btn{height:48px}
.sh-p:empty{display:none}

/* 내 정보 (#/me, 로그인 후) */
.me-h{display:flex;align-items:center;gap:12px;padding:2px 2px 0}
.me-av{flex:none;color:inherit}
.me-av .avatar .chk{display:none}
.me-id{flex:1;min-width:0;display:grid;gap:2px;color:inherit}
.me-id b{font-size:20px;font-weight:680;letter-spacing:-.02em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-id span{font-size:13.5px;font-weight:520;color:var(--text-3)}
.me-edit{flex:none}
.me-bio{display:block;width:100%;margin:12px 0 0;padding:12px 14px;border-radius:var(--g-r-sm);background:var(--g-card);border:1px solid var(--g-card-line);
  text-align:left;font-size:14.5px;font-weight:520;line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all}
.me-bio.empty{color:var(--text-3)}
.me-bio:active{background:var(--surface-2)}
.me-h+.me-bio+.sp-stat{margin-top:10px}
.sp-cnt .g-count>button{color:inherit;font:inherit}
.me-guide{display:flex;align-items:center;gap:12px;margin-top:10px;color:inherit;text-decoration:none;padding:14px 16px}
.me-gi{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--primary);color:#fff}
.me-gi svg{width:21px;height:21px}
.me-gt{flex:1;min-width:0;display:grid;gap:2px}
.me-gt b{font-size:15px;font-weight:680}
.me-gt small{font-size:13px;font-weight:560;color:var(--text-2)}
.me-pts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:14px 16px}
.me-pl{display:grid;gap:2px}
.me-pl span{font-size:13px;font-weight:600;color:var(--text-2)}
.me-pl b{font-family:"Saira Condensed",var(--font);font-size:28px;font-weight:680;line-height:1;color:var(--point)}
.me-pl b small{font-size:15px;margin-left:2px}
.me-pts+.sx-list{margin-top:12px}

/* 가이드 (#/guide) */
.gd-head{padding:16px}
.gd-top{display:flex;align-items:center;gap:12px}
.gd-top>div{display:grid;gap:3px}
.gd-t{font-size:17px;font-weight:680;letter-spacing:-.02em}
.gd-top small{font-size:13px;font-weight:600;color:var(--text-2)}
.gd-bar{margin-top:14px;height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.gd-bar i{display:block;height:100%;background:var(--primary);transform-origin:left;transition:transform .5s var(--g-ease)}
.gd-list{margin-top:12px}
.gd-row .sx-t small{white-space:normal}
.gd-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--text-2)}
.gd-ic svg{width:18px;height:18px}
.gd-ic.ok{background:var(--up-dim);color:var(--up)}
.gd-ic.ok svg{width:15px;height:15px}
.gd-row.ok .sx-t b{color:var(--text-2)}
.gd-done{font-size:13px;font-weight:680;color:var(--up);flex:none}
.gd-claim,.gd-list+.g-btn{margin-top:14px;height:50px}
.gd-note{margin:10px 2px 0;text-align:center;font-size:12.5px;font-weight:520;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.gd-bar i{transition:none}}
/* ==== /area:social ==== */

/* ==== area:comm ==== */
/* 커뮤니티 · 채널 · 빠른 글쓰기 · 글 보기 · 쪽지 (app.js area:comm views). 글과 숫자는 단단한 면,
 * 떠 있는 "새 글" 알약만 유리. 이름은 cm- 로 시작한다(댓글 줄의 .cm 과는 다른 이름). */
.cm-wrap{padding-bottom:8px}
/* 채널 줄 */
.cm-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:2px -16px 12px;padding:2px 16px 4px;scroll-padding:0 16px}
.cm-strip::-webkit-scrollbar{display:none}
.cm-ch{position:relative;flex:none;min-width:62px;height:62px;padding:8px 11px 7px;border-radius:18px;display:grid;justify-items:center;align-content:center;gap:4px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--text-2);transition:transform .2s var(--g-ease),background .2s var(--g-ease)}
.cm-ch .e{font-size:20px;line-height:1}
.cm-ch b{font-size:12.5px;font-weight:640;white-space:nowrap;letter-spacing:-.01em}
.cm-ch i{position:absolute;top:-5px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--primary);color:#fff;
  font-size:10.5px;font-weight:680;font-style:normal;display:grid;place-items:center;border:2px solid var(--bg)}
.cm-ch.on{background:color-mix(in srgb,var(--primary) 16%,var(--surface));border-color:color-mix(in srgb,var(--primary) 50%,transparent);color:var(--text)}
.cm-ch.on b{color:var(--primary-on-dim)}
.cm-ch.more .e{font-size:18px;color:var(--text-3)}
.cm-ch:active{transform:scale(.96)}
.cm-sep{flex:none;width:1px;margin:10px 0;background:var(--line-2)}
.cm-lsheet{display:grid}
.cm-lrow{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 4px;border-top:1px solid var(--line)}
.cm-lrow:first-child{border-top:0}
.cm-lrow .e{font-size:18px;width:24px;text-align:center}
.cm-lrow b{font-size:15px;font-weight:640;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-lrow .s{font-size:12px;color:var(--text-3);font-weight:560;white-space:nowrap}
.cm-lrow .s i{font-style:normal;color:var(--text-2);font-weight:680}
.cm-lrow svg{width:15px;height:15px;color:var(--text-3);flex:none}
.cm-lh{font-size:12.5px;font-weight:680;color:var(--text-3);padding:14px 4px 6px}
/* 첫 화면의 배팅 피드 · 라이브 채팅 */
.cm-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.cm-q{display:flex;align-items:center;gap:8px;height:46px;padding:0 10px 0 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);min-width:0}
.cm-q .e{display:grid;place-items:center;width:20px;height:20px;color:var(--text-2);flex:none}
.cm-q .e svg{width:19px;height:19px}
.cm-q b{font-size:14px;font-weight:640;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-q>svg{width:14px;height:14px;color:var(--text-3);flex:none}
.cm-q:active{background:var(--surface-2)}
/* 채널 머리 */
.cm-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2);margin:0 0 10px}
.cm-head .e{width:46px;height:46px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;font-size:24px;flex:none}
.cm-head .t{flex:1;min-width:0}
.cm-head h2{margin:0;font-size:19px;font-weight:680;letter-spacing:-.02em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-head p{margin:2px 0 0;font-size:13px;color:var(--text-3);font-weight:520}
.cm-head .n{display:grid;justify-items:end;flex:none}
.cm-head .n span{font-size:11.5px;color:var(--text-3);font-weight:600}
.cm-head .n b{font-family:"Saira Condensed",var(--font);font-size:22px;font-weight:680;line-height:1.1}
/* 리그 채널의 경기 */
.cm-mh h2{margin:4px 0 8px;font-size:14.5px;font-weight:680;color:var(--text-2)}
.cm-mrail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 4px;padding:0 16px 4px}
.cm-mrail::-webkit-scrollbar{display:none}
.cm-mc{flex:none;width:158px;display:grid;gap:7px;padding:10px 11px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2)}
.cm-mc.live{border-color:color-mix(in srgb,var(--up) 40%,transparent)}
.cm-mt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:640;color:var(--text-3)}
.cm-mt b{margin-left:auto;color:var(--text);font-size:13px}
.cm-mc.live .cm-mt{color:var(--up)}
.cm-mteams{display:grid;gap:2px;min-width:0}
.cm-mteams span{font-size:14px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-mgo{width:100%;height:32px}
.cm-mclosed{height:32px;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--text-3);background:var(--surface-2);border-radius:var(--pill)}
.cm-nomatch{font-size:13px;color:var(--text-3);font-weight:560;padding:2px 2px 10px}
/* 글쓰기 입구 */
.cm-compose{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 7px 0 10px;margin:4px 0 10px;border-radius:26px;background:var(--surface);border:1px solid var(--line-2);text-align:left}
.cm-compose .ph{flex:1;min-width:0;font-size:14.5px;color:var(--text-3);font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-compose .g-btn{pointer-events:none;flex:none}
.cm-cav{width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--text-3);flex:none}
.cm-cav svg{width:15px;height:15px}
.cm-compose:active{background:var(--surface-2)}
/* 목록 */
.cm-list{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--g-r);overflow:hidden}
.cm-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 12px 10px 14px;cursor:pointer}
.cm-row+.cm-row{border-top:1px solid var(--line)}
.cm-row:active{background:var(--surface-2)}
.cm-row .avatar{width:38px;height:38px;font-size:15px}
.cm-row .avatar .chk{width:14px;height:14px}
.cm-main{min-width:0}
.cm-who{display:flex;align-items:center;gap:5px;min-width:0;font-size:13px}
.cm-who b{font-size:13.5px;font-weight:640;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-who .glow b,.cm-who b.glow{background:linear-gradient(90deg,var(--primary-2),var(--fx-glow));-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-who .tag{height:18px;padding:0 5px;font-size:10px;flex:none}
.cm-who .ttl{flex:none;font-size:10.5px;font-weight:680;padding:1px 6px;border-radius:5px;background:var(--primary-dim);color:var(--primary-on-dim)}
.cm-lv{flex:none;font-size:11px;font-weight:640;color:var(--text-3)}
.cm-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:3px 0 5px;font-size:15px;font-weight:600;line-height:1.38;color:var(--text);overflow-wrap:anywhere}
.cm-cat{font-style:normal;font-weight:680;font-size:13px;margin-right:6px;color:var(--text-3)}
.cm-cat.c-analysis{color:var(--primary-on-dim)}
.cm-cat.c-hit{color:var(--up)}
.cm-cat.c-challenge{color:var(--gold)}
.cm-meta{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;row-gap:2px;font-size:12px;font-weight:560;color:var(--text-3)}
.cm-meta>span{display:inline-flex;align-items:center;gap:3px}
.cm-meta svg{width:13px;height:13px}
.cm-meta b{font-weight:600}
.cm-meta .tbtn{margin:0;font-size:12px;padding:0}
.cm-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-height:100%}
.cm-rmore{width:30px;height:22px;margin:-2px -4px 0 0;display:grid;place-items:center;color:var(--text-3);border-radius:8px}
.cm-rmore svg{width:16px;height:16px}
.cm-tk{width:72px;display:grid;justify-items:center;gap:2px;padding:7px 5px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);text-align:center}
.cm-tk .k{font-size:10.5px;font-weight:640;color:var(--text-3)}
.cm-tk b{max-width:100%;font-size:12.5px;font-weight:680;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;color:var(--text)}
.cm-tk .r{font-size:10.5px;font-weight:680;color:var(--text-2)}
.cm-tk.hit{background:var(--up-dim);border-color:transparent}.cm-tk.hit .r{color:var(--up)}
.cm-tk.miss{background:var(--down-dim);border-color:transparent}.cm-tk.miss .r{color:var(--down)}
.cm-tk.wait{background:var(--primary-dim);border-color:transparent}.cm-tk.wait .r{color:var(--primary-on-dim)}
.cm-row.new{animation:cmNew 1.6s var(--g-ease)}
@keyframes cmNew{0%{opacity:0;transform:translateY(-6px);background:var(--primary-dim)}25%{opacity:1;transform:none;background:var(--primary-dim)}100%{background:transparent}}
.cm-more{display:block;width:100%;height:44px;margin:10px 0 4px;border-radius:14px;background:var(--surface-2);font-size:14px;font-weight:640;color:var(--text-2)}
.cm-more:disabled{opacity:.6}
.cm-fresh{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:45;transform:translateX(-50%);height:36px;padding:0 16px;border-radius:var(--pill);
  font-size:13.5px;font-weight:680;color:var(--primary-on-dim);animation:cmDrop .28s var(--g-ease)}
@keyframes cmDrop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (min-width:960px){.cm-fresh{top:84px}}
.cm-empty{padding:34px 16px}
.cm-empty .e{font-size:30px}
.cm-empty b{color:var(--text);font-size:16px}
.cm-empty span{font-size:13px}
/* 빠른 글쓰기 */
.sheet.cm-sheet{padding-top:10px}
.cm-sh-h .sh-t{margin-bottom:10px}
.cm-comp{display:grid;gap:10px}
.cm-page{padding-top:6px}
.cm-row2{display:flex;align-items:center;gap:8px;min-width:0}
.cm-lbl{flex:none;font-size:12.5px;font-weight:680;color:var(--text-3)}
.cm-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:1px 0}
.cm-chips::-webkit-scrollbar{display:none}
.cm-chip{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
.cm-chip.on{background:var(--primary-dim);color:var(--primary-on-dim);border-color:transparent}
.cm-bd{min-height:118px;resize:vertical;line-height:1.55}
.cm-attrow{display:flex;gap:8px}
.cm-attb{flex:1;height:44px;border-radius:14px;border:1px dashed var(--line-2);color:var(--text-2);font-size:14px;font-weight:640;display:flex;align-items:center;justify-content:center;gap:6px}
.cm-attb svg{width:18px;height:18px}
.cm-attb:active{background:var(--surface-2)}
.cm-mpick{border:1px solid var(--line-2);border-radius:16px;background:var(--surface);max-height:250px;overflow:auto;overscroll-behavior:contain}
.cm-mp-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--surface);border-bottom:1px solid var(--line);font-size:13.5px}
.cm-mp{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;width:100%;padding:10px 12px;text-align:left}
.cm-mp+.cm-mp{border-top:1px solid var(--line)}
.cm-mp .t{font-size:12px;color:var(--text-3);font-weight:600}
.cm-mp .l{font-size:12px;color:var(--primary-on-dim);font-weight:640;white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis}
.cm-mp b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-mp i,.cm-pc-t i{font-style:normal;color:var(--text-3);font-weight:520;margin:0 3px}
.cm-mp:active{background:var(--surface-2)}
.cm-bets{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
.cm-none{padding:16px;text-align:center;font-size:13px;color:var(--text-3);font-weight:560}
.cm-bchip{display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2)}
.cm-bchip>span{display:grid;color:var(--text-2)}.cm-bchip>span svg{width:18px;height:18px}
.cm-bchip b{font-size:14px;font-weight:640;flex:1}
.cm-x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--text-3);flex:none}
.cm-x svg{width:16px;height:16px}
.cm-err{padding:9px 12px;border-radius:12px;background:var(--down-dim);color:var(--down);font-size:13px;font-weight:600;line-height:1.45}
.cm-go{height:50px;font-size:16px}
/* 예측 카드 (글쓰기 · 글 보기) */
.cm-pcard{padding:12px 13px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2)}
.cm-pc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:640;color:var(--text-3)}
.cm-pc-h>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-pc-t{margin:6px 0 10px;font-size:15.5px;font-weight:680;letter-spacing:-.01em;overflow-wrap:anywhere}
.cm-pc-t b{margin-left:6px;color:var(--text)}
.cm-picks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cm-picks.three{grid-template-columns:1fr .7fr 1fr}
.cm-picks button{min-height:46px;padding:4px 6px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;align-content:center;gap:1px;font-size:13.5px;font-weight:640;line-height:1.25;transition:transform .15s var(--g-ease),background .2s var(--g-ease)}
.cm-picks button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-picks button i{font-style:normal;font-size:11.5px;color:var(--text-3);font-weight:600}
.cm-picks button.on{background:var(--primary);border-color:transparent;color:#fff}
.cm-picks button.on i{color:rgba(255,255,255,.8)}
.cm-picks button:active{transform:scale(.97)}
.cm-pc-p{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-pc-p span{font-size:12px;font-weight:640;color:var(--text-3)}
.cm-pc-p b{font-size:15px;font-weight:680}
.cm-pc-p i{font-style:normal;font-size:12.5px;color:var(--text-3);font-weight:600}
.cm-badge{flex:none;height:22px;padding:0 9px;border-radius:var(--pill);display:inline-grid;place-items:center;font-size:11.5px;font-weight:680;background:var(--surface-3);color:var(--text-2)}
.cm-badge.hit{background:var(--up-dim);color:var(--up)}
.cm-badge.miss{background:var(--down-dim);color:var(--down)}
.cm-badge.wait{background:var(--primary-dim);color:var(--primary-on-dim)}
.cm-pcard.hit{border-color:color-mix(in srgb,var(--up) 35%,transparent)}
.cm-pcard.miss{border-color:color-mix(in srgb,var(--down) 30%,transparent)}
/* 글 보기 */
.cm-pwrap{padding-top:4px}
.cm-post{padding:14px 16px 16px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.cm-ph{display:flex;align-items:center;gap:10px}
.cm-ph .avatar{width:42px;height:42px;font-size:16px}
.cm-phn{flex:1;min-width:0;display:grid;gap:2px}
.cm-phn .cm-who a{display:inline-flex;min-width:0}
.cm-chl{color:var(--primary-on-dim);font-weight:640;white-space:nowrap}
.cm-ph .g-iconbtn{width:36px;height:36px;color:var(--text-2)}
.cm-ph .g-iconbtn svg{width:20px;height:20px}
.cm-pt{margin:14px 0 8px;font-size:20px;font-weight:680;line-height:1.35;letter-spacing:-.02em;overflow-wrap:anywhere}
.cm-pt .cm-cat{font-size:15px;margin-right:8px;vertical-align:1px}
.cm-pb{font-size:15.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.cm-post>.tbtn{margin-top:8px;font-size:12.5px}
.cm-post .cm-pcard{margin-top:14px;background:var(--bg-1)}
.cm-bet{margin-top:14px}
.cm-bet .bet{margin:0}
.cm-acts{display:flex;align-items:center;gap:6px;margin-top:16px}
.cm-like{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line-2);font-size:14px;font-weight:640;color:var(--text-2);transition:background .2s var(--g-ease),color .2s var(--g-ease)}
.cm-like svg{width:18px;height:18px}
.cm-like.on{background:var(--primary-dim);color:var(--primary-on-dim);border-color:transparent}
.cm-like.pop svg{animation:cmPop .42s var(--g-ease)}
@keyframes cmPop{0%{transform:scale(1)}35%{transform:scale(1.32) rotate(-8deg)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.cm-cc{display:inline-flex;align-items:center;gap:5px;padding:0 10px;font-size:14px;font-weight:600;color:var(--text-3)}
.cm-cc svg{width:18px;height:18px}
.cm-pwrap .cmts{margin-top:10px;padding:14px 16px 16px;border:1px solid var(--line-2);border-radius:var(--g-r);background:var(--surface)}
.cm-pwrap .cmts h3{font-size:15px;margin-bottom:12px}
.cm-pwrap .cm p{font-size:14px;color:var(--text)}
.cm-pwrap .cin{margin-top:14px}
.cm-pwrap .cin .input{border-radius:var(--pill);height:42px}
.cm-pwrap .cin .btn{border-radius:var(--pill);height:42px}
/* 쪽지 */
.cm-dmwrap{padding-top:4px}
.cm-dmset{padding:13px 14px 14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2);margin:0 0 10px}
.cm-dmset-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cm-dmset-h b{font-size:15.5px;font-weight:680}
.cm-dmset-h .v{font-size:14px;font-weight:680;color:var(--primary-on-dim)}
.cm-dmset p{margin:3px 0 10px;font-size:12.5px;color:var(--text-3);font-weight:520;line-height:1.45}
.cm-dmset-o{display:flex;flex-wrap:wrap;gap:6px}
.cm-dmlist{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--g-r);overflow:hidden}
.cm-dmrow{display:flex;align-items:center;gap:11px;padding:11px 14px}
.cm-dmrow+.cm-dmrow{border-top:1px solid var(--line)}
.cm-dmrow .avatar{width:44px;height:44px;font-size:16px}
.cm-dmrow .c{flex:1;min-width:0}
.cm-dmrow .n,.cm-dmhead .n{display:flex;align-items:center;gap:5px;min-width:0}
.cm-dmrow .n b{font-size:14.5px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-dmrow .n .tag,.cm-dmhead .n .tag{height:18px;padding:0 5px;font-size:10px;flex:none}
.cm-dmrow .n .ttl,.cm-dmhead .n .ttl{flex:none;font-size:10.5px;font-weight:680;padding:1px 6px;border-radius:5px;background:var(--primary-dim);color:var(--primary-on-dim)}
.cm-dmrow .l{margin-top:2px;font-size:13.5px;color:var(--text-3);font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-dmrow.unread .l{color:var(--text);font-weight:600}
.cm-dmrow .r{display:grid;justify-items:end;gap:6px;flex:none}
.cm-dmrow .t{font-size:12px;color:var(--text-3);font-weight:560}
.cm-dmrow .dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.cm-dmrow:active{background:var(--surface-2)}
.cm-dmhead{display:flex;align-items:center;gap:8px;padding:9px 8px 9px 12px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.cm-dmhead .who{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.cm-dmhead .avatar{width:40px;height:40px;font-size:15px}
.cm-dmhead .n b{font-size:15.5px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-dmhead .g-iconbtn{color:var(--text-2)}
.cm-dmlog{max-height:min(58vh,500px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:14px 2px}
.cm-sys{align-self:center;padding:4px 12px;border-radius:var(--pill);background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:4px}
.cm-dmempty{align-self:center;padding:18px 0 8px;font-size:13.5px;color:var(--text-3);font-weight:560}
.cm-bub{max-width:78%;align-self:flex-start;display:grid;gap:3px}
.cm-bub .x{padding:9px 13px;border-radius:18px 18px 18px 6px;background:var(--surface);border:1px solid var(--line-2);font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-bub .x .tbtn{display:block;margin-top:4px;font-size:12px}
.cm-bub.mine{align-self:flex-end;justify-items:end}
.cm-bub.mine .x{background:var(--primary);border-color:transparent;color:#fff;border-radius:18px 18px 6px 18px}
.cm-bub .t{font-size:11px;color:var(--text-3);font-weight:600;padding:0 4px}
.cm-bub .g{font-size:11.5px;font-weight:680;color:var(--point)}
.cm-bub[data-dmid]{cursor:pointer}
.cm-dmin{display:flex;gap:8px}
.cm-dmin .input{flex:1;min-width:0;height:46px;border-radius:var(--pill);padding:0 16px}
.cm-dmin .g-btn{height:46px;flex:none;padding:0 18px}
.cm-dmfee{display:flex;align-items:center;gap:6px;margin:0 2px 8px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.cm-dmfee svg{width:14px;height:14px;color:var(--primary-on-dim);flex:none}
.cm-dmfee.free{color:var(--text-3)}
.cm-dmhead+.cm-dmnote{margin-top:12px}
.cm-dmnote{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:46px;padding:10px 14px;border-radius:14px;background:var(--surface-2);font-size:13.5px;font-weight:600;color:var(--text-2);text-align:center}
.cm-open{display:grid;justify-items:center;text-align:center;gap:6px;padding:4px 2px 0}
.cm-open .e{font-size:34px;line-height:1}
.cm-open .sh-t{margin:4px 0 0}
.cm-open .m{margin:0;font-size:15px;font-weight:600;line-height:1.5;word-break:keep-all;text-wrap:balance}
.cm-open-b{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:8px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2)}
.cm-open-b span{font-size:13.5px;font-weight:600;color:var(--text-3)}
.cm-open-b b{font-size:16px;font-weight:680}
.cm-open .s{margin:2px 0 6px;font-size:12.5px;color:var(--text-3);font-weight:520}
.cm-open .g-btn{margin-top:0}
.cm-open .cm-open-no{background:transparent;border-color:transparent;color:var(--text-2)}
/* PC: 마우스로는 가로로 넘기기 어렵다. 채널은 작은 알약으로 줄 바꿈, 경기는 세 칸씩 두 줄까지. */
@media (min-width:960px){
  .cm-strip{flex-wrap:wrap;overflow:visible;margin:2px 0 12px;padding:0;gap:6px}
  .cm-ch{height:36px;min-width:0;grid-auto-flow:column;align-content:center;gap:6px;padding:0 12px;border-radius:var(--pill)}
  .cm-ch .e{font-size:15px}
  .cm-ch i{position:static;border:0;height:18px;min-width:18px;font-size:10.5px}
  .cm-ch.more .e{font-size:14px}
  .cm-sep{display:none}
  .cm-mrail{flex-wrap:wrap;overflow:visible;margin:0 0 4px;padding:0}
  .cm-mc{width:calc((100% - 16px) / 3)}
  .cm-mc:nth-child(n+7){display:none}
  .cm-chips{flex-wrap:wrap;overflow:visible}
  .cm-row:hover{background:var(--surface-2)}
}
@media (prefers-reduced-motion:reduce){.cm-row.new,.cm-like.pop svg,.cm-fresh{animation:none}.cm-ch,.cm-picks button,.cm-like{transition:none}}
/* ==== /area:comm ==== */
/* ==== area:cur ==== */
/* 초대 코드 칸은 입력을 대문자로 보이게 하지만 안내 문구("Enter one to get $500 extra")까지 대문자가 되면 소리친다. */
#ic::placeholder { text-transform: none; }
/* ==== /area:cur ==== */

/* ==== area:season ==== */
/* 시즌 승부예측 · 칭호 (app.js area:season views). 글과 숫자는 단단한 면, 떠 있는 내 순위 줄만 유리.
 * 배너는 시즌 색(--ss)을 평평하게 깐 글자 배너다. 선수 사진, 구단 이름, 로고는 쓰지 않는다. */
.ss{--ss-ink:#101014;padding-bottom:6px}
.ss-head .g-iconbtn:first-child{margin-left:-8px}
.ss .g-btn svg{width:17px;height:17px;flex:none}
.ss .ttl{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:6px;border-radius:6px;font-size:10.5px;font-weight:680;white-space:nowrap;background:var(--primary-dim);color:var(--primary-on-dim);flex:none}
.ss .g-empty{padding:34px 16px}
.ss-note{margin:14px 2px 2px;font-size:12px;line-height:1.55;color:var(--text-3)}
.ss-nm{min-width:0}

.ss-av{display:inline-grid;place-items:center;flex:none}

/* 배너 */
.ss-banner{position:relative;overflow:hidden;isolation:isolate;margin-bottom:10px;padding:14px 16px 15px;border-radius:var(--g-r);background:var(--ss);color:var(--ss-ink)}
.ss-bn-top{display:flex;justify-content:space-between;align-items:center}
.ss-kick{font-family:var(--font-d);font-size:13px;font-weight:680;letter-spacing:.12em}
.ss-dday{font-family:var(--font-d);font-size:15px;font-weight:680;padding:1px 10px;border-radius:var(--pill);background:rgba(16,16,20,.12)}
.ss-bn-name{margin:8px 0 5px;max-width:80%;font-size:26px;font-weight:720;line-height:1.12;letter-spacing:-.035em;color:var(--ss-ink)}
.ss-bn-sub{display:flex;gap:10px;font-size:13px;font-weight:640;color:rgba(16,16,20,.72)}
.ss-bn-art{position:absolute;right:-4px;bottom:-30px;z-index:-1;font-size:112px;font-weight:760;line-height:1;letter-spacing:-.06em;white-space:nowrap;color:rgba(16,16,20,.1);pointer-events:none}

/* 내 시즌 카드 */
.ss-card{padding:14px 16px}
.ss-me{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.ss-me-t{flex:1;min-width:0;display:grid;gap:2px}
.ss-me-t .n{display:flex;align-items:center;min-width:0;font-size:16px;font-weight:680;letter-spacing:-.02em}
.ss-me-t .n .ss-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-me-t .s{display:flex;min-width:0;font-size:12.5px;font-weight:560;color:var(--text-3)}
.ss-me-t .s .ttl{margin-left:0}
.ss-count{padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ss-count .n{font-size:21px;white-space:nowrap}
.ss-chips{display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px 0;font-size:13.5px;font-weight:640;color:var(--text-2)}
.ss-chips b{font-family:var(--font-d);font-size:22px;font-weight:680;color:var(--text)}
.ss-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ss-acts .g-btn{min-width:0;height:42px;padding:0 10px;font-size:14.5px}
.ss-acts .g-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-mlink{display:block;width:100%;margin-top:8px;padding:8px 0 0;font-size:14px;font-weight:680;text-align:center;color:var(--primary-on-dim)}
.ss-guest{display:grid;gap:3px}
.ss-guest>b{font-size:16px;font-weight:720}
.ss-guest>span{font-size:13px;color:var(--text-3);font-weight:520}

/* 날짜 · 마켓 · 경기 */
.ss-day{margin-top:14px}
.ss-pager{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ss-pager .g-iconbtn{width:36px;height:36px;background:var(--surface-2)}
.ss-pager .g-iconbtn svg{width:18px;height:18px}
.ss-pager .nx svg{transform:scaleX(-1)}
.ss-pager .g-iconbtn:disabled{opacity:.3}
.ss-pd{display:flex;align-items:baseline;gap:8px}
.ss-pd b{font-family:var(--font-d);font-size:24px;font-weight:680}
.ss-pd span{font-size:14px;font-weight:640;color:var(--text-2)}
.ss-seg{margin-bottom:8px}
.ss-sports{display:flex;gap:6px;margin:0 -16px 8px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.ss-sports::-webkit-scrollbar{display:none}
.ss-sports .g-chip{flex:none}
.ss-list{background:var(--g-card);border:1px solid var(--g-card-line);border-radius:var(--g-r);overflow:hidden}
.ss-m{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:10px 12px}
.ss-m+.ss-m{border-top:1px solid var(--line)}
.ss-mw{display:grid;gap:4px;justify-items:start;font-size:12px;font-weight:640;color:var(--text-2)}
.ss-mw .num{font-family:var(--font-d);font-size:15px;font-weight:600;color:var(--text)}
.ss .ss-mw .lg{display:block;min-height:0;max-width:100%;padding:2px 4px;border-radius:5px;font-size:9.5px;line-height:1.3;letter-spacing:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-live{font-size:11px;font-weight:760;letter-spacing:.04em;color:var(--down)}
.ss-fin{color:var(--text-3)}
.ss-tm{display:grid;gap:4px;min-width:0}
.ss-tm span{display:flex;align-items:center;gap:6px;min-width:0}
.ss-tm b{flex:1;min-width:0;font-size:14px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-tm i{font-style:normal;font-family:var(--font-d);font-size:15px;font-weight:680}
.ss-odds{display:flex;gap:4px}
.ss-odd{width:51px;height:44px;display:grid;align-content:center;justify-items:center;gap:1px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);transition:transform .2s var(--g-ease),background .2s var(--g-ease)}
.ss-odds.n2 .ss-odd{width:64px}
.ss-odd .l{max-width:100%;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:640;line-height:1.15;color:var(--text-3)}
.ss-odd b{font-family:var(--font-d);font-size:16px;font-weight:680;line-height:1.1}
.ss-odd:active{transform:scale(.95)}
.ss-odd:disabled{opacity:.42}
.ss-odd.on,.ss-odd.on:disabled{opacity:1;background:var(--primary);border-color:transparent;color:#fff}
.ss-odd.on .l{color:rgba(255,255,255,.82)}
.ss-mine{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin-top:8px;padding:7px 10px;border-radius:12px;background:var(--primary-dim);font-size:12.5px;font-weight:600}
.ss-mine .k{font-weight:680;color:var(--primary-on-dim)}
.ss-mine .num{font-family:var(--font-d);font-size:13.5px;color:var(--text-2)}
.ss-res{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:720}
.ss-res b{font-family:var(--font-d);font-size:14px}
.ss-res.won,.ss-res.half_won{color:var(--up)}
.ss-res.lost,.ss-res.half_lost{color:var(--down)}
.ss-res.push{color:var(--text-2)}
.ss-more{margin-top:8px}

/* 예측 시트 · 미션 시트 */
.ss-slip{margin-bottom:12px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2)}
.ss-slip-m{margin-bottom:6px;font-size:13px;font-weight:600;color:var(--text-2)}
.ss-slip-p{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;font-weight:600}
.ss-slip-p b{font-weight:720}
.ss-slip-p [data-sodd]{font-family:var(--font-d);font-size:24px;font-weight:680;color:var(--primary-on-dim)}
.ss-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.ss-quick .g-chip{justify-content:center;height:38px;font-size:14.5px}
.ss-quick .g-chip .num{font-family:var(--font-d);font-weight:680}
.ss-quick .g-chip:disabled{opacity:.38}
.ss-warn{margin:8px 0 0;font-size:13px;font-weight:640;color:var(--gold)}
.ss-fine{margin:10px 0 0;font-size:12px;line-height:1.5;text-align:center;color:var(--text-3)}
.sheet .g-btn.block{margin-top:12px}
.ss-mlist{display:grid;gap:8px}
.ss-mrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.ss-mrow.done{opacity:.62}
.ss-mi{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);font-size:18px}
.ss-mt{flex:1;min-width:0;display:grid;gap:2px}
.ss-mt b{font-size:14.5px;font-weight:680}
.ss-mt small{font-size:12px;font-weight:520;color:var(--text-3)}
.ss-mr{font-family:var(--font-d);font-size:14px;font-weight:680;white-space:nowrap;color:var(--primary-on-dim)}
.ss-got{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--up-dim);color:var(--up)}
.ss-got svg{width:15px;height:15px}

/* 시즌 랭킹 */
.ss-rtop{display:grid;gap:8px;margin-bottom:10px}
.ss-rule{margin:0;font-size:12.5px;font-weight:560;color:var(--text-3)}
.ss-rrow{display:flex;align-items:center;gap:10px;min-height:58px;padding:0 14px}
.ss-rrow+.ss-rrow{border-top:1px solid var(--line)}
.ss-rrow.me{background:var(--primary-dim)}
.ss-rk{width:26px;flex:none;text-align:center;font-family:var(--font-d);font-size:16px;font-weight:680;color:var(--text-2)}
.ss-md{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:13px;color:#101014}
.ss-md.m1{background:var(--gold)}.ss-md.m2{background:var(--silver)}.ss-md.m3{background:var(--bronze)}
.ss-rw{flex:1;min-width:0;display:grid;gap:2px}
.ss-rw .n{display:flex;align-items:center;min-width:0;font-size:14.5px;font-weight:680}
.ss-rw .n .ss-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-rw .s{font-size:12px;font-weight:560;color:var(--text-3)}
.ss-rv{font-family:var(--font-d);font-size:16px;font-weight:680;white-space:nowrap}
.ss-rv.up{color:var(--up)}.ss-rv.down{color:var(--down)}
.ss-pin{position:sticky;bottom:calc(var(--nav-h) + var(--safe-b) + 10px);z-index:5;margin-top:10px;border-radius:var(--g-r);overflow:hidden}
.ss-pin.g-glass{background:color-mix(in srgb,var(--surface) 86%,transparent)}
.ss-pin .ss-rrow.me{background:transparent}
@media (min-width:960px){.ss-pin{bottom:16px}}

/* 시즌 상점 */
.ss-wallet{display:flex;justify-content:space-between;align-items:center}
.ss-wallet>span{display:grid;gap:2px;font-size:13.5px;font-weight:640;color:var(--text-2)}
.ss-wallet small{font-size:12px;font-weight:520;color:var(--text-3)}
.ss-wallet b{font-family:var(--font-d);font-size:26px;font-weight:680}
.ss-sec{margin-top:16px}
.ss-h2{margin:0 2px 8px;font-size:16px;font-weight:720;letter-spacing:-.02em}
.ss-grid3,.ss-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ss-item,.ss-tile{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:12px 6px 10px;border-radius:18px;background:var(--g-card);border:1px solid var(--g-card-line);text-align:center;transition:transform .2s var(--g-ease)}
.ss-item{min-height:124px}
.ss-item:active,.ss-tile.on:active{transform:scale(.97)}
.ss-item.own{border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.ss-in{font-size:12.5px;font-weight:640;color:var(--text-2)}
.ss-ip{font-family:var(--font-d);font-size:14.5px;font-weight:680}
.ss-ip em{font-style:normal;font-family:var(--font);font-size:12px;font-weight:680;color:var(--primary-on-dim)}
.ss-bdg{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);font-size:21px;line-height:1}
.ss-sp-t{display:grid;justify-items:center;gap:6px}
.ss .ss-sp-t .ttl,.sheet .ss-sp-t .ttl{margin:0}
.ss-sp-c,.ss-sp-f{min-height:46px;display:grid;place-items:center;font-size:16px;font-weight:720}
.ss-bigprev{display:grid;place-items:center;padding:12px 0 16px}
.ss-bigprev .ss-bdg{width:56px;height:56px;font-size:30px}
.sheet .ss-sp-t .ttl{display:inline-flex;height:22px;padding:0 8px;border-radius:7px;font-size:12.5px;font-weight:680;background:var(--primary-dim);color:var(--primary-on-dim)}

/* 시즌 기록 */
.ss-sum-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ss-rank{flex:none;text-align:right}
.ss-rank b{font-family:var(--font-d);font-size:22px;font-weight:680;color:var(--primary-on-dim)}
.ss-rank small{font-size:11.5px;font-weight:600;color:var(--text-3)}
.ss-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ss-kv>div{display:grid;align-content:start;gap:2px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.ss-kv span{font-size:12px;font-weight:640;color:var(--text-3)}
.ss-kv b{font-family:var(--font-d);font-size:19px;font-weight:680}
.ss-kv b.up{color:var(--up)}.ss-kv b.down{color:var(--down)}
.ss-kv small{font-size:11.5px;font-weight:560;color:var(--text-3)}
.ss-h3{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14.5px;font-weight:720}
.ss-lg{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--text-3)}
.ss-lg .ss-sq{width:10px;height:10px;margin-left:6px;border-radius:3px}
.ss-cells{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.ss-sq{display:inline-block;aspect-ratio:1;border-radius:5px;background:var(--surface-3)}
.ss-sq.w{background:var(--up)}.ss-sq.l{background:var(--down)}.ss-sq.p{background:var(--text-3)}
.ss-open{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--text-3)}
.ss-lock{position:relative}
.ss-blur{filter:blur(6px);opacity:.5;pointer-events:none;user-select:none}
.ss-cta{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}
.ss-cta b{max-width:270px;font-size:17px;font-weight:720;line-height:1.4;letter-spacing:-.02em}

/* 칭호 */
.ss-thead{display:grid;gap:10px}
.ss-thw{display:flex;align-items:center;gap:14px}
.ss-thw .ss-me-t .n{font-size:19px}
.ss-prog{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:640;color:var(--text-2)}
.ss-prog b{font-family:var(--font-d);font-size:18px;font-weight:680;color:var(--text)}
.ss-bar{height:8px;border-radius:var(--pill);background:var(--surface-3);overflow:hidden}
.ss-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary);transform-origin:left center}
.ss-tile{min-height:122px}
.ss-tile .ss-bdg{filter:grayscale(1);opacity:.38}
.ss-tt{font-size:12.5px;font-weight:680;line-height:1.3;color:var(--text-3)}
.ss-th{font-size:11px;font-weight:520;line-height:1.35;color:var(--text-3)}
.ss-tile.on{border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.ss-tile.on .ss-bdg{filter:none;opacity:1;background:var(--primary-dim)}
.ss-tile.on .ss-tt{color:var(--text)}
.ss-tile.eq{background:color-mix(in srgb,var(--primary) 12%,var(--surface));border-color:var(--primary)}
.ss-tile.eq .ss-th{font-weight:680;color:var(--primary-on-dim)}
.ss-h3s{margin:10px 2px 6px;font-size:13px;font-weight:680;color:var(--text-2)}
.ss-none{margin:0 2px;font-size:13px;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.ss-odd,.ss-item,.ss-tile{transition:none}}
/* ==== /area:season ==== */

/* ==== area:ai ==== */
/* AI 픽 (app.js area:ai views, 2026-09-30). 글과 숫자는 단단한 면에 두고, 반짝이(ai-spark)와 제목의 빛결(ai-shim)만
 * 색과 움직임을 쓴다. 반짝이는 큰 별 하나와 작은 별 둘이 시차를 두고 줄었다 커진다. 움직임 줄이기면 모두 멈춘다. */
.ai-spark{width:22px;height:22px;flex:none;overflow:visible;filter:drop-shadow(0 0 5px rgba(111,124,255,.45))}
.ai-spark.lg{width:34px;height:34px}
.ai-spark.sm{width:20px;height:20px}
.ai-spark.xs{width:15px;height:15px;filter:none}
.ai-spark path{transform-box:fill-box;transform-origin:50% 50%}
.ai-spark .s1{animation:ai-tw 3.4s var(--g-ease) infinite}
.ai-spark .s2{animation:ai-tw 3.4s var(--g-ease) .7s infinite}
.ai-spark .s3{animation:ai-tw 3.4s var(--g-ease) 1.5s infinite}
@keyframes ai-tw{0%,100%{transform:scale(1) rotate(0deg);opacity:1}30%{transform:scale(.68) rotate(16deg);opacity:.55}52%{transform:scale(1.14) rotate(-6deg);opacity:1}72%{transform:scale(.97) rotate(0deg);opacity:1}}
:root[data-theme="light"] .ai-spark{filter:drop-shadow(0 0 4px rgba(79,92,243,.3))}
.ai-shim{background:linear-gradient(100deg,var(--text) 0%,var(--text) 38%,#A7B1FF 47%,#86E6F2 53%,var(--text) 62%,var(--text) 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ai-shim 5.2s linear infinite}
:root[data-theme="light"] .ai-shim{background-image:linear-gradient(100deg,var(--text) 0%,var(--text) 38%,#4F5CF3 47%,#8B4FE8 53%,var(--text) 62%,var(--text) 100%)}
@keyframes ai-shim{0%{background-position:100% 0}55%,100%{background-position:-60% 0}}

/* 공통 조각: 마켓 이름표, 확신도 막대, 결과 */
.ai-lg{color:var(--text-2);font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ai-mk{flex:none;font-size:11.5px;font-weight:640;line-height:1;color:var(--primary-on-dim);background:var(--primary-dim);padding:5px 8px;border-radius:var(--pill);white-space:nowrap}
.ai-pn{flex:1;min-width:0;font-size:14px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-conf{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.ai-bars{display:inline-flex;gap:2px;align-items:flex-end}
.ai-bars i{width:4px;border-radius:2px;background:var(--surface-3)}
.ai-bars i:nth-child(1){height:6px}.ai-bars i:nth-child(2){height:9px}.ai-bars i:nth-child(3){height:12px}
.ai-conf.c1 .ai-bars i:nth-child(1),.ai-conf.c2 .ai-bars i:nth-child(-n+2),.ai-conf.c3 .ai-bars i{background:var(--primary-2)}
.ai-res{flex:none;font-size:11.5px;font-weight:680;line-height:1;padding:5px 9px;border-radius:var(--pill);white-space:nowrap}
.ai-res.hit{background:var(--up-dim);color:var(--up-on-dim)}
.ai-res.miss{background:var(--down-dim);color:var(--down-on-dim)}
.ai-res.push{background:var(--surface-3);color:var(--text-2)}
.ai-tm{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px}
.ai-tm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:640;min-width:0}
.ai-tm .pk-crest{width:22px;height:22px;font-size:10px}
.ai-disc{display:flex;gap:7px;align-items:flex-start;margin:0;font-size:12px;line-height:1.55;color:var(--text-3);font-weight:520}
.ai-disc .ai-spark{margin-top:1px}

/* ---- 픽 탭 맨 위 ---- */
.ai-hub{position:relative;display:grid;gap:10px;padding:12px 14px 14px;border-radius:var(--g-r);isolation:isolate;overflow:hidden;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 26%,transparent)}
.ai-hub::before{content:"";position:absolute;z-index:-1;top:-70px;right:-40px;width:200px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(155,92,246,.2),rgba(94,231,245,.06) 60%,transparent)}
.ai-hub-h{display:flex;align-items:center;gap:8px;min-height:30px;min-width:0}
.ai-hub-h>b{font-size:17px;font-weight:680;letter-spacing:-.02em;white-space:nowrap}
.ai-rate{margin-left:auto;font-size:12.5px;color:var(--text-2);font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ai-rate b{color:var(--up);font-weight:680}
.ai-go{margin-left:auto;display:inline-flex;align-items:center;gap:1px;font-size:13px;font-weight:600;color:var(--primary-on-dim);white-space:nowrap}
.ai-rate~.ai-go{margin-left:8px}
.ai-go svg{width:14px;height:14px}
.ai-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px;scroll-padding:0 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.ai-rail::-webkit-scrollbar{display:none}
.ai-mini{flex:0 0 min(80%,290px);scroll-snap-align:start;display:grid;gap:9px;padding:12px 13px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);transition:transform .2s var(--g-ease)}
.ai-mini:only-child{flex-basis:100%}
.ai-mini:active{transform:scale(.97)}
.ai-mt{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:var(--text-3);min-width:0}
.ai-when{flex:none;white-space:nowrap}
.ai-when b{color:var(--text);font-weight:680}
.ai-mteams{display:grid;gap:6px}
.ai-mp{display:flex;align-items:center;gap:7px;padding-top:9px;border-top:1px solid var(--line);min-width:0}
.ai-hub-e{margin:0;font-size:13.5px;color:var(--text-2);font-weight:520}

/* ---- #/ai 목록 ---- */
.ai-view{display:grid;gap:12px}
.ai-view .g-head{margin-bottom:0}
.ai-title{display:flex;align-items:center;gap:8px}
.ai-intro{margin:-6px 0 0;font-size:13.5px;color:var(--text-2);font-weight:520}
.ai-rcard{display:grid;gap:10px;padding:14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.ai-rh{font-size:13.5px;font-weight:640;color:var(--text-2)}
.ai-rg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ai-rc{display:grid;gap:3px;justify-items:start;min-width:0}
.ai-rl{font-size:12px;color:var(--text-3);font-weight:600;white-space:nowrap}
.ai-rc b{font-family:"Saira Condensed",var(--font);font-size:26px;font-weight:680;line-height:1;letter-spacing:-.01em}
.ai-rn{font-size:11.5px;color:var(--text-3);font-weight:560;white-space:nowrap}
.ai-list{display:grid;gap:10px}
.ai-card{display:grid;gap:11px;padding:14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2);transition:transform .2s var(--g-ease)}
.ai-card:active{transform:scale(.985)}
.ai-in{animation:ai-in .38s var(--g-ease) both;animation-delay:calc(var(--i,0) * 36ms)}
@keyframes ai-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ai-ct{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-3);min-width:0}
.ai-ct .ai-when{margin-left:auto}
.ai-cm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.ai-tm.r{justify-content:flex-end;text-align:right}
.ai-vs{font-size:12px;color:var(--text-3);font-weight:680;letter-spacing:.04em}
.ai-vs.sc{font-size:19px;color:var(--text);letter-spacing:0}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 10px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--text);max-width:100%}
.ai-chip .k{color:var(--text-3);font-weight:600;white-space:nowrap}
.ai-chip b{font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ai-chip.hit{background:var(--up-dim);border-color:transparent}.ai-chip.hit b{color:var(--up-on-dim)}
.ai-chip.miss{background:var(--down-dim);border-color:transparent}.ai-chip.miss b{color:var(--down-on-dim)}
.ai-moreb{justify-self:center}
.ai-empty{padding:34px 16px}

/* ---- #/ai/:id 상세 ---- */
.ai-detail{display:grid;gap:12px;padding-top:4px}
.ai-dhead{display:flex;align-items:center;gap:10px;min-width:0}
.ai-dht{display:grid;gap:2px;min-width:0}
.ai-dht b{font-size:24px;font-weight:680;letter-spacing:-.03em;line-height:1.15;justify-self:start}
.ai-dht span{font-size:12.5px;color:var(--text-2);font-weight:520}
.ai-box{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"l l l" "h m a";gap:10px 8px;align-items:center;padding:14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2);transition:transform .2s var(--g-ease)}
.ai-box:active{transform:scale(.985)}
.ai-bl{grid-area:l;display:flex;justify-content:center;align-items:center;gap:6px;font-size:12.5px;min-width:0}
.ai-bt{display:grid;justify-items:center;gap:7px;text-align:center;font-size:15px;min-width:0}
.ai-bt.h{grid-area:h}.ai-bt.a{grid-area:a}
.ai-bt b{font-weight:680;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.ai-bt .pk-crest{width:42px;height:42px;font-size:17px}
.ai-bm{grid-area:m;display:grid;justify-items:center;gap:3px;min-width:74px;line-height:1.15}
.ai-bm i{font-style:normal;font-size:12px;color:var(--text-3);font-weight:600}
.ai-bm b{font-size:20px;font-weight:680}
.ai-panel{display:grid;gap:10px;padding:14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.ai-panel.tint{background:color-mix(in srgb,var(--primary) 9%,var(--surface));border-color:color-mix(in srgb,var(--primary) 28%,transparent)}
.ai-panel h3,.ai-sec h3,.ai-sum h3{margin:0;font-size:14px;font-weight:680;letter-spacing:-.01em}
.ai-prow{display:flex;align-items:center;gap:8px;min-height:30px;min-width:0}
.ai-prow+.ai-prow{border-top:1px solid var(--line);padding-top:10px}
.ai-odd{flex:none;font-size:13px;color:var(--text-2);font-weight:640}
.ai-tr{display:grid;gap:12px}
.ai-tr>.tbtn{justify-self:start;margin-top:-4px}
.ai-body{gap:0;padding-top:2px;padding-bottom:2px}
.ai-sec{display:grid;gap:9px;padding:13px 0}
.ai-sec+.ai-sec{border-top:1px solid var(--line)}
.ai-sec p,.ai-sum p{margin:0;font-size:14.5px;line-height:1.62;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.ai-form{display:grid;gap:7px}
.ai-frow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ai-ft{font-size:13.5px;font-weight:640;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-note{justify-self:end;font-size:11.5px;color:var(--text-3);font-weight:560}
.ai-h2{display:grid;gap:5px}
.ai-h2r{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;font-size:13px;color:var(--text-2)}
.ai-h2r .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.ai-h2r .t.r{text-align:left}
.ai-h2r b{color:var(--text);font-weight:680}
.ai-h2r .d{color:var(--text-3);font-size:12px}
.ai-probs{display:grid;gap:12px}
.ai-pb{display:grid;gap:6px}
.ai-pbl{font-size:12px;font-weight:640;color:var(--text-3)}
.ai-pbar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.ai-pbar i{display:block;min-width:4px}
.ai-pbar .h{background:var(--primary)}.ai-pbar .d{background:var(--surface-3)}.ai-pbar .a{background:#9B5CF6}
.ai-pbv{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text-2);font-weight:560;min-width:0}
.ai-pbv>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-pbv b{color:var(--text);font-weight:680}
.ai-pbv .h b{color:var(--primary-on-dim)}
.ai-why{display:grid;gap:6px}
.ai-why+.ai-why{margin-top:8px}
.ai-wl{display:flex;align-items:center;gap:7px;min-width:0}
.ai-wl b{flex:1;min-width:0;font-size:14px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-sum{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:var(--g-r);
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}
.ai-sum>div{display:grid;gap:3px;min-width:0}
.ai-sum p{font-weight:600}
.ai-votes{display:flex;justify-content:center;gap:8px}
.ai-vote{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--pill);font-size:14px;font-weight:640;color:var(--text-2);background:var(--surface);border:1px solid var(--line-2);transition:transform .2s var(--g-ease),background .2s var(--g-ease),color .2s var(--g-ease)}
.ai-vote svg{width:17px;height:17px}
.ai-vote.down svg{transform:rotate(180deg)}
.ai-vote.on{color:var(--primary-on-dim);background:var(--primary-dim);border-color:transparent}
.ai-vote.down.on{color:var(--down-on-dim);background:var(--down-dim)}
.ai-vote:active{transform:scale(.95)}
.ai-vote.pop{animation:ai-pop .38s var(--g-ease)}
.ai-vote.pop svg{animation:ai-thumb .38s var(--g-ease)}
.ai-vote.down.pop svg{animation-name:ai-thumbd}
@keyframes ai-pop{0%{transform:scale(1)}35%{transform:scale(1.12)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes ai-thumb{0%{transform:none}40%{transform:translateY(-3px) rotate(-14deg)}100%{transform:none}}
@keyframes ai-thumbd{0%{transform:rotate(180deg)}40%{transform:rotate(180deg) translateY(-3px) rotate(-14deg)}100%{transform:rotate(180deg)}}
@media (min-width:960px){.ai-mini{flex-basis:260px}}
@media (prefers-reduced-motion:reduce){
  .ai-spark path,.ai-shim,.ai-in,.ai-vote.pop,.ai-vote.pop svg{animation:none}
  .ai-mini,.ai-card,.ai-box,.ai-vote{transition:none}
}
/* ==== /area:ai ==== */

/* ==== area:motion (main) ==== */
/* 움직이는 선택 표시: 세그먼트는 알약이, 탭은 밑줄이 미끄러진다. 살짝 넘쳤다 돌아오는 곡선. */
.g-seg.has-ind,.g-tabs.has-ind,.tabs.has-ind{position:relative}
.g-ind{position:absolute;left:0;pointer-events:none;will-change:transform,width;transition:transform .42s cubic-bezier(.3,1.28,.4,1),width .42s cubic-bezier(.3,1.28,.4,1)}
.g-seg>.g-ind{top:3px;bottom:3px;z-index:0;border-radius:var(--pill);background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.25)}
[data-theme=light] .g-seg>.g-ind{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.g-seg.has-ind>.on{background:transparent!important;box-shadow:none!important}
.g-seg.has-ind>:not(.g-ind){z-index:1}
.g-tabs>.g-ind{bottom:-1px;height:3px;border-radius:3px;background:var(--text)}
.tabs>.g-ind{bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--primary)}
.g-tabs.has-ind>.on::after,.tabs.has-ind>.on::after{display:none!important}

/* 화면 전환 (View Transitions). 들어가기는 오른쪽에서 밀려 오고, 뒤로는 오른쪽으로 빠진다.
 * 탭끼리는 짧게 겹쳐 바뀐다. 머리글은 제자리에서 글자만 바뀌고, 하단 메뉴와 배팅슬립은 가만히 있다. */
.topbar{view-transition-name:lp-top}
.nav{view-transition-name:lp-nav}
#slipbar{view-transition-name:lp-slip}
::view-transition-group(lp-nav),::view-transition-group(lp-slip),
::view-transition-old(lp-nav),::view-transition-new(lp-nav),::view-transition-old(lp-slip),::view-transition-new(lp-slip){animation:none}
::view-transition-group(lp-top){animation-duration:.32s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
html[data-nav=push]::view-transition-old(root){animation:vtPushOld .44s cubic-bezier(.32,.72,0,1) both}
html[data-nav=push]::view-transition-new(root){animation:vtPushNew .44s cubic-bezier(.32,.72,0,1) both}
html[data-nav=pop]::view-transition-old(root){animation:vtPopOld .38s cubic-bezier(.32,.72,0,1) both;z-index:2}
html[data-nav=pop]::view-transition-new(root){animation:vtPopNew .38s cubic-bezier(.32,.72,0,1) both}
html[data-nav=tab]::view-transition-old(root){animation:vtFadeOut .14s ease-out both}
html[data-nav=tab]::view-transition-new(root){animation:vtFadeIn .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtPushOld{to{transform:translateX(-30%);opacity:.55}}
@keyframes vtPushNew{from{transform:translateX(100%)}}
@keyframes vtPopOld{to{transform:translateX(100%)}}
@keyframes vtPopNew{from{transform:translateX(-30%);opacity:.55}}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0;transform:scale(.985)}}

/* 가상배팅 입장: 뒤에서 퍼지는 빛, 튀어 오르는 전적 카드와 유리 반짝임, 차례로 들어오는 종목과 경기, 톡 튀는 배당 */
.pd{position:relative;isolation:isolate}
.pd-stat{position:relative;overflow:hidden}
.pd.pd-enter::before{content:"";position:absolute;left:50%;top:-40px;width:min(560px,100vw);height:min(560px,100vw);margin-left:calc(min(560px,100vw) / -2);border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 42%,transparent),transparent 72%);animation:pdBurst .95s cubic-bezier(.2,.8,.2,1) both}
.pd.pd-enter>.pd-top{animation:pdDrop .4s cubic-bezier(.2,1,.3,1) both}
.pd.pd-enter .pd-stat{animation:pdStat .64s cubic-bezier(.18,1.3,.35,1) .04s both}
.pd.pd-enter .pd-stat::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.30) 47%,rgba(255,255,255,.05) 55%,transparent 68%);transform:translateX(-130%);animation:pdShine .85s cubic-bezier(.3,.7,.2,1) .38s both}
[data-theme=light] .pd.pd-enter .pd-stat::after{background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.85) 47%,rgba(255,255,255,.2) 55%,transparent 68%)}
.pd.pd-enter .pd-stat .pd-bar i{animation:pdBar .72s cubic-bezier(.2,.9,.2,1) .28s both}
.pd.pd-enter>.pd-mz,.pd.pd-enter>.pd-days{animation:pdRise .44s cubic-bezier(.2,1,.3,1) .1s both}
.pd.pd-enter .pd-chips>*{animation:pdChip .4s cubic-bezier(.2,1.25,.35,1) calc(.12s + var(--i,0) * 28ms) both}
.pd.pd-enter .pd-list>*{animation:pdCard .5s cubic-bezier(.2,1.12,.3,1) calc(.16s + var(--i,0) * 44ms) both}
.pd.pd-enter .pd-list>* .pd-mk{animation:pdOdd .34s cubic-bezier(.3,1.7,.5,1) calc(.36s + var(--i,0) * 44ms) both}
@keyframes pdBurst{0%{opacity:0;transform:scale(.35)}30%{opacity:1}100%{opacity:0;transform:scale(1.55)}}
@keyframes pdDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes pdStat{0%{opacity:0;transform:translateY(34px) scale(.9)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pdShine{to{transform:translateX(130%)}}
@keyframes pdBar{from{transform:scaleX(0)}}
@keyframes pdRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pdChip{from{opacity:0;transform:translateX(28px) scale(.88)}to{opacity:1;transform:none}}
@keyframes pdCard{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pdOdd{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* 모든 탭 입장 (가상배팅과 같은 느낌, 조금 더 빠르게) */
.view.fx-in .fx{animation:fxRise .44s cubic-bezier(.2,1.1,.3,1) calc(var(--i,0) * 34ms) both}
@keyframes fxRise{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
.fx-glow{position:fixed;left:50%;top:-80px;width:620px;height:620px;margin-left:-310px;border-radius:50%;pointer-events:none;z-index:25;background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 30%,transparent),transparent 72%);mix-blend-mode:screen;animation:pdBurst .9s cubic-bezier(.2,.8,.2,1) both}
[data-theme=light] .fx-glow{mix-blend-mode:multiply;background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 12%,transparent),transparent 72%)}
.view.fx-fade{animation:fxFade .18s ease-out both}
@keyframes fxFade{from{opacity:0}}
.sk-page{padding-top:4px}

@media (prefers-reduced-motion:reduce){
  .g-ind{transition:none}
  .view.fx-in .fx,.fx-glow,.view.fx-fade{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .pd.pd-enter *,.pd.pd-enter::before,.pd.pd-enter .pd-stat::after{animation:none!important}
}
/* 긴 목록은 화면 밖 항목의 그리기를 건너뛴다(스크롤과 탭 전환이 가벼워진다).
 * 높이 추정값은 실제 카드 높이에 가깝게 두어 스크롤바가 튀지 않게 한다. */
.hm-grp,.pd-list>*,.rk-row{content-visibility:auto}
.hm-grp{contain-intrinsic-size:auto 220px}
.pd-list>*{contain-intrinsic-size:auto 150px}
.rk-row{contain-intrinsic-size:auto 64px}
/* 누르는 순간 반응(손가락 밑이 바로 바뀌어야 빠르게 느껴진다) */
.rk-row,.hm-card,.pd-list>*{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s}
.rk-row:active{background:var(--surface-2)}
.hm-card:active:not(:has(button:active)),.pd-list>*:active:not(:has(button:active)){transform:scale(.985)}
/* 가상머니 표시(심사 5.3.4: 금액이 실제 돈으로 읽히지 않게) */
.vm{display:inline-block;font-style:normal;font-size:10.5px;font-weight:640;letter-spacing:0;line-height:1;padding:3px 6px;border-radius:6px;background:var(--surface-2);color:var(--text-3);vertical-align:1px}
/* 시즌 화면: 휴대폰에서는 셸 머리글이 뒤로 버튼과 제목을 그리므로 화면 안 제목은 숨긴다(두 번 보였다). */
@media (max-width:959px){.ss-head .g-title,.ss-head>[data-back]{display:none}.ss-head{justify-content:flex-end;min-height:0;margin:-4px 0 4px}.ss-head:empty{display:none}}
/* 승부예측 카드 등급 */
.pd-ovr .pd-tier{display:block;font-style:normal;font-size:11px;font-weight:680;letter-spacing:.02em;margin-top:2px;opacity:.9}
.pd-ovr.tier-diamond{color:#7DD3FC}.pd-ovr.tier-emerald{color:#34D399}.pd-ovr.tier-gold{color:#FBBF24}.pd-ovr.tier-silver{color:#CBD5E1}.pd-ovr.tier-bronze{color:#D6A274}.pd-ovr.tier-unranked{color:var(--text-3)}
.pd-unr{font-size:12px;color:var(--text-3);text-align:center;margin:4px 0 8px}
.pd-cs small{display:block;font-size:10px;color:var(--text-3);margin-top:1px}
.pd-gh{font-size:13px;font-weight:680;color:var(--text-3);margin:14px 4px 6px;letter-spacing:.01em}
/* 픽 워터마크: 내용 뒤에 옅게 반복되는 라이브픽 로고 (캡처가 퍼져도 출처가 남게) */
.lp-wm{position:relative;isolation:isolate}
.lp-wm::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='140'%3E%3Cg%20transform='rotate%28-24%20110%2070%29'%20fill='%23808CFF'%20font-family='-apple-system,Pretendard,sans-serif'%20font-weight='800'%20font-size='17'%3E%3Ctext%20x='18'%20y='60'%3E%EB%9D%BC%EC%9D%B4%EB%B8%8C%ED%94%BD%3C/text%3E%3Ctext%20x='128'%20y='118'%3ELIVEPICK%3C/text%3E%3C/g%3E%3C/svg%3E");background-size:220px 140px;background-repeat:repeat;opacity:.07}
[data-theme=light] .lp-wm::before{opacity:.06}
.foot .fbiz{font-size:11.5px;line-height:1.55;color:var(--text-3);margin:6px 0 2px}
.sheet.closing.swiped,.sheet-bg.closing.swiped{animation:none!important}
/* 스코어보드 로고 */
.brand-mark.lp-mark{background:none!important;box-shadow:none!important;border-radius:23%!important}
.brand-mark.lp-mark::before,.brand-mark.lp-mark::after{display:none!important}
/* 하단 메뉴 글자 (운영자: 아이콘 밑에 간단한 글자) */
.nav a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.nav a svg{width:21px;height:21px}
.nav .nl{font-size:10.5px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
/* 처음 여는 기기의 입장 연출 */
.lp-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);transition:opacity .45s ease,transform .5s cubic-bezier(.3,.7,.2,1)}
.lp-intro.out{opacity:0;transform:scale(1.06);pointer-events:none}
.li-stage{position:relative;display:grid;justify-items:center;gap:18px}
.li-glow{position:absolute;left:50%;top:44px;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 45%,transparent),transparent 72%);opacity:0;animation:liGlow 1.3s cubic-bezier(.2,.8,.2,1) .75s both}
.li-board{position:relative;display:flex;align-items:center;gap:10px}
.li-tile{width:62px;height:96px;border-radius:16px;display:grid;place-items:center;perspective:300px}
.li-tile.a{background:#4F5CF3;animation:liInL .6s cubic-bezier(.2,1.2,.35,1) .05s both}
.li-tile.b{background:#fff;animation:liInR .6s cubic-bezier(.2,1.2,.35,1) .12s both}
[data-theme=light] .li-tile.b{background:#15173A}
.li-d{font:800 58px/1 -apple-system,"Saira Condensed","Helvetica Neue",Arial,sans-serif;color:#fff;display:block}
.li-tile.b .li-d{color:#15161F}
[data-theme=light] .li-tile.b .li-d{color:#fff}
.li-d.flip{animation:liFlip .34s cubic-bezier(.3,.7,.3,1)}
.li-colon{display:grid;gap:12px;animation:liPop .4s ease .45s both}
.li-colon i{width:8px;height:8px;border-radius:50%;background:var(--text)}
.li-name{display:flex;gap:1px;font-size:30px;font-weight:680;letter-spacing:-.03em;color:var(--text)}
.li-name span{display:inline-block;animation:liRise .5s cubic-bezier(.2,1.1,.3,1) calc(.95s + var(--i) * 60ms) both}
.li-sub{font-size:13.5px;font-weight:600;color:var(--text-3);animation:liRise .5s ease 1.25s both}
@keyframes liInL{from{opacity:0;transform:translateX(-70px) rotate(-8deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes liInR{from{opacity:0;transform:translateX(70px) rotate(8deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes liFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes liPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes liRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes liGlow{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:.35;transform:scale(1.25)}}
.slipbar.bump{animation:sbBump .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes sbBump{0%{transform:translateX(-50%) scale(1)}35%{transform:translateX(-50%) scale(1.045)}100%{transform:translateX(-50%) scale(1)}}
.g-iconbtn svg{pointer-events:none}
/* ==== /area:motion ==== */

/* ==== area:qa tap targets (2026-09-30) ====
 * 40px 보다 작은 단추는 보이는 크기는 그대로 두고 누르는 영역만 넓힌다. */
.hm-star,.hm-x,.cm-rmore,.tbtn,.ledger-link,.tablink,.bs-b,.pk-act,.g-chip,.pk-past{position:relative}
.hm-star::after,.hm-x::after,.bs-b::after,.pk-act::after,.g-chip::after,.pk-past::after{content:'';position:absolute;inset:-6px -2px}
.cm-rmore::after{content:'';position:absolute;inset:-9px -5px}
.tbtn::after,.ledger-link::after,.tablink::after{content:'';position:absolute;inset:-12px -4px}
.flinks a{padding:10px 0}
.searchbar:focus-within{border-color:var(--primary)}
/* 한국어가 아닌 언어는 줄 이름(Handicap, Over/Under)이 길어 좁은 칸에서 잘린다. 글자를 줄이고 줄바꿈을 허용한다. */
html:not([lang="ko"]) .hm-ml{font-size:9.5px;letter-spacing:-.02em;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
html:not([lang="ko"]) .hr-top .g-title{font-size:clamp(20px,6.2vw,28px)}
html:not([lang="ko"]) .ss-odd .l{font-size:9px;letter-spacing:-.03em;padding:0 2px}
html:not([lang="ko"]) .mrow.v2 .mk-l{font-size:9px;letter-spacing:-.02em;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
/* ==== /area:qa ==== */

/* ============ 슬립 전체 지우기 · 앱 칩 단위 (2026-09-30) ============ */
/* 모바일 슬립 바에도 전체 지우기를 둔다. 빨강이 아닌 보조 버튼이고, 바를 누르면 슬립이 열린다. */
.slipbar{grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;cursor:pointer}
.slipbar .sb-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slipbar .sb-t small{overflow:hidden;text-overflow:ellipsis}
.slipbar .sb-clear{height:32px;padding:0 10px;border-radius:9px;border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.slipbar .sb-clear:active{background:rgba(255,255,255,.16)}
.slip-h .sl-clear{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--text-2)}
.slip-h .sl-clear:hover{color:var(--text);border-color:var(--line-2)}
/* 앱은 잔액 숫자 뒤에 칩 단위를 붙인다(웹은 앞에 통화 기호). */
.balance .amt .cur-u{margin:0 0 0 6px}
.acct .bal small.cur-u{margin:0 0 0 4px}

/* ---------- 국기와 팀 엠블럼 (2026-09-30, public/teams.js, src/logos.js) ---------- */
.flag-i{flex:none;width:20px;height:15px;border-radius:3px;object-fit:cover;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.flag-i.globe{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:0;box-shadow:none;color:var(--text-3)}
.flag-i.globe svg{width:16px;height:16px}
.pd-flag{flex:none;width:18px;height:13px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.pd-flag.globe{display:inline-grid;place-items:center;height:16px;box-shadow:none;color:var(--text-3)}
.pd-flag.globe svg{width:14px;height:14px}
.mhero .lg span{white-space:nowrap}
.mhero .lg .dt::before{content:'\00B7';margin-right:8px;color:var(--text-3)}
.mhero .tm .hm-cr{width:52px;height:52px;margin:0 auto 8px;font-size:18px}
/* 그림이 있으면 첫 글자는 숨긴다(깨지면 has-img 가 빠져 글자가 다시 보인다). 엠블럼은 옅은 원 안에, 국기는 원을 꽉 채운다. */
.hm-cr.has-img,.pd-cr.has-img,.pk-crest.has-img{position:relative;overflow:hidden;color:transparent;font-size:0;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line)}
[data-theme=light] .hm-cr.has-img,[data-theme=light] .pd-cr.has-img,[data-theme=light] .pk-crest.has-img{background:var(--surface-2)}
.pk-crest.has-img::before{content:none}
.tm-img{position:absolute;top:12%;left:12%;width:76%;height:76%;margin:0;display:block;object-fit:contain;object-position:center}
.is-flag .tm-img{inset:0;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.has-img.is-flag{background:var(--surface-2)}

/* 불러오는 중 띠: 화면 맨 위의 얇은 빛. 150ms 넘게 걸릴 때만(app.js busy). */
#lp-busy{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2.5px;z-index:9999;pointer-events:none;opacity:0;overflow:hidden;transition:opacity .2s}
#lp-busy.on{opacity:1}
#lp-busy::before{content:"";position:absolute;inset:0;width:45%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--primary),#8FA2FF,transparent);animation:lpBusy 1s cubic-bezier(.4,0,.2,1) infinite}
#lp-busy.done{opacity:0;transition-delay:.12s}
#lp-busy.done::before{width:100%;animation:none;background:var(--primary);transition:width .25s}
@keyframes lpBusy{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
.lp-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--primary) 22%,transparent);border-top-color:var(--primary);animation:lpSpin .8s linear infinite;margin-bottom:10px}
@keyframes lpSpin{to{transform:rotate(360deg)}}
.hm-loading{min-height:180px;align-content:center;gap:0}
@media (prefers-reduced-motion:reduce){#lp-busy::before{animation-duration:2.4s}.lp-spin{animation-duration:1.6s}}

/* ==== 야구 전광판 (.bbx) ==== 밤 야구장: 남색 하늘, 좌우 조명 빛줄기, 아래 외야 잔디 호, 그 위 유리 전광판. */
.bbx{position:relative;overflow:hidden;margin:0 0 14px;border-radius:22px;padding:14px 14px 12px;color:#fff;isolation:isolate;
  background:linear-gradient(180deg,#081330 0%,#0d1f47 46%,#123a2c 100%);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08)}
.bbx-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bbx-sky .bm{position:absolute;top:-30%;width:60%;height:120%;opacity:.5;filter:blur(2px);
  background:conic-gradient(from 180deg at 50% 0%,transparent 42%,rgba(255,244,214,.22) 50%,transparent 58%)}
.bbx-sky .bm.l{left:-18%;transform-origin:50% 0;animation:bbBeamL 7s ease-in-out infinite}
.bbx-sky .bm.r{right:-18%;transform-origin:50% 0;animation:bbBeamR 8s ease-in-out infinite}
.bbx-sky .st{position:absolute;inset:0;opacity:.55;background:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 34% 8%,#fff,transparent),radial-gradient(1.2px 1.2px at 62% 14%,#fff,transparent),radial-gradient(1px 1px at 84% 6%,#fff,transparent),radial-gradient(1px 1px at 72% 26%,#fff,transparent);animation:bbTw 4s ease-in-out infinite}
@keyframes bbBeamL{0%,100%{transform:rotate(18deg)}50%{transform:rotate(8deg)}}
@keyframes bbBeamR{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(-7deg)}}
@keyframes bbTw{50%{opacity:.25}}
.bbx-grass{position:absolute;left:-20%;right:-20%;bottom:-62%;height:100%;z-index:-1;border-radius:50%;pointer-events:none;
  background:repeating-linear-gradient(90deg,#1f6b3f 0 22px,#1b5f38 22px 44px);box-shadow:0 -2px 0 rgba(255,255,255,.18),0 -30px 60px rgba(40,160,90,.22)}
.bbx-top{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:640;color:rgba(255,255,255,.78)}
.bbx-top .flag-i{width:18px;height:13px;border-radius:2px;object-fit:cover}
.bbx-chip{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:680;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bbx.live .bbx-chip{background:rgba(255,70,70,.9)}
.bbx-main{display:flex;align-items:center;gap:10px;margin:12px 0 10px}
.bbx-tms{flex:1;min-width:0;display:grid;gap:8px}
.bbx-tm{display:flex;align-items:center;gap:10px;min-width:0;transition:opacity .3s}
.bbx-tm .hm-cr{width:34px;height:34px;flex:none}
.bbx-tm b{flex:1;min-width:0;font-size:16px;font-weight:720;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbx-sc{font-size:30px;font-weight:760;line-height:1;min-width:30px;text-align:right;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.bbx-tm.win .bbx-sc{color:#FFD35C;text-shadow:0 0 18px rgba(255,211,92,.45)}
.bbx-tm.lose{opacity:.62}
.bbx-dia{position:relative;flex:none;width:78px;height:78px;display:grid;place-items:center}
.bbx-dia svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bbx-dia .bp{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-dasharray:4 3}
.bbx-dia .bs{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.6);stroke-width:1.2}
.bbx-dia .hp{fill:rgba(255,255,255,.75)}
.bbx.live .bbx-dia .bp{stroke:rgba(255,255,255,.55);animation:bbPath 1.6s linear infinite}
@keyframes bbPath{to{stroke-dashoffset:-14}}
.bbx-inn{position:relative;display:grid;justify-items:center;line-height:1.05}
.bbx-inn b{font-size:19px;font-weight:760}
.bbx-inn small{font-size:10.5px;font-weight:680;color:rgba(255,255,255,.7)}
.bbx.live .bbx-inn b{color:#FFD35C;animation:bbPulse 1.8s ease-in-out infinite}
@keyframes bbPulse{50%{text-shadow:0 0 14px rgba(255,211,92,.8)}}
.bbx-line{border-radius:14px;padding:6px 6px 4px;background:rgba(3,8,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bbx-line table{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.bbx-line th,.bbx-line td{height:24px;padding:0;text-align:center;font-size:12.5px;font-weight:680}
.bbx-line thead th{font-size:11px;color:rgba(255,255,255,.55);font-weight:640}
.bbx-line tbody th{width:52px;text-align:left;padding-left:4px;font-size:12px;color:rgba(255,255,255,.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbx-line thead th:first-child{width:52px}
.bbx-line td{color:#fff}
.bbx-line .r{color:#FFD35C;border-left:1px solid rgba(255,255,255,.12)}
.bbx-line .x{color:rgba(255,255,255,.7)}
.bbx-line .cur{background:rgba(255,211,92,.16);color:#FFD35C}
.bbx-line tr.win th{color:#FFD35C}
.bbx .mbell{position:relative;z-index:1;margin-top:10px}
/* 처음 열 때: 전광판이 떠오르고, 이닝 칸이 왼쪽부터 차례로 켜진다 */
.bbx.in{animation:bbIn .55s cubic-bezier(.2,.8,.2,1) both}
.bbx.in .bbx-line td,.bbx.in .bbx-line thead th{animation:bbCell .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.18s + var(--c,0) * 40ms)}
.bbx.in .bbx-tm{animation:bbTm .5s cubic-bezier(.2,.8,.2,1) both}
.bbx.in .bbx-tm+.bbx-tm{animation-delay:.08s}
.bbx.in .bbx-dia{animation:bbDia .7s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes bbIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes bbCell{from{opacity:0;transform:translateY(5px)}}
@keyframes bbTm{from{opacity:0;transform:translateX(-10px)}}
@keyframes bbDia{from{opacity:0;transform:rotate(-45deg) scale(.6)}}
@media (prefers-reduced-motion:reduce){.bbx *,.bbx{animation:none!important}}
/* 챌린지 카드: 세 마켓을 줄로 모두 펼침 */
.pd-all{display:grid;gap:6px;margin-top:10px}
.pd-row{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:6px}
.pd-row .pd-odds{margin:0}
.pd-row .pd-o{height:42px}
.pd-k{font-size:11.5px;font-weight:680;color:var(--text-3);letter-spacing:-.01em;line-height:1.15;word-break:keep-all}

/* 입장 빛(560px)이 화면보다 넓어 페이지가 잠깐 넓어지고 iOS 가 축소해 보이던 문제 (운영자 2026-09-30). 가로로 넘치는 것은 자른다. */
.pd{overflow-x:clip}
.fx-glow{width:min(620px,100vw);height:min(620px,100vw);margin-left:calc(min(620px,100vw) / -2)}
/* 설정 목록 안의 "쪽지 받기": 카드 테두리 없이 목록의 한 줄로, 왼쪽에 아이콘 칸(다른 줄과 같은 선). */
.cm-dmset.sx-dm{position:relative;margin:0;border:0;border-radius:0;background:none;padding:12px 14px 13px 56px;border-top:1px solid var(--line)}
.cm-dmset.sx-dm>.sx-ic{position:absolute;left:14px;top:10px}
.cm-dmset.sx-dm .cm-dmset-h b{font-size:15.5px;font-weight:560}
.cm-dmset.sx-dm p{margin:2px 0 10px}

/* ==== 라이브 채팅 v2 ==== */
/* 전체 · 경기 · 패밀리 채팅이 같이 쓴다(app.js chatShell). 움직임은 transform 과 opacity 만. */
.chx{display:flex;flex-direction:column;gap:8px}
.chx-logw{position:relative}
.chx .chx-log{gap:2px;padding:12px 10px 14px;scroll-behavior:auto}
.chx-log .cmsg{animation:none;gap:8px;align-items:flex-start}
.chx-log .cmsg:not(.cont){margin-top:10px}
.chx-log .cmsg.in{animation:chxIn .28s var(--g-ease) both}
.chx-log .cmsg.mine.in{transform-origin:100% 100%}
@keyframes chxIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.chx .cav{width:28px;flex:none}
.chx .cav a{display:block}
.chx .cbody{min-width:0;max-width:min(80%,540px);display:flex;flex-direction:column;align-items:flex-start}
.chx .cmsg.mine .cbody{align-items:flex-end;margin-left:auto;text-align:left}
.chx .cmeta{padding:0 4px;margin-bottom:3px}
.chx .cmeta .ttl{font-weight:640}
.chx .crow{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.chx .cmsg.mine .crow{flex-direction:row-reverse}
.chx .crow>.t{flex:none;font-size:10.5px;font-weight:560;color:var(--text-3);font-variant-numeric:tabular-nums;padding-bottom:3px}
.chx .cmsg:not(.tail) .crow>.t{display:none}
.chx .cbub{min-width:0;max-width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:8px 12px;color:var(--text);cursor:pointer;transition:transform .18s var(--g-ease)}
.chx .cbub:active{transform:scale(.985)}
.chx .cmsg:not(.mine):not(.cont) .cbub{border-top-left-radius:6px}
.chx .cmsg.mine .cbub{background:var(--primary);border-color:transparent;color:#fff}
.chx .cmsg.mine.tail .cbub{border-bottom-right-radius:6px}
.chx .cmsg.atme .cbub{border-color:color-mix(in srgb,var(--primary) 60%,transparent);background:color-mix(in srgb,var(--primary) 10%,var(--surface-2))}
.chx .ctxt{display:block;background:none;border:0;padding:0;border-radius:0;font-size:14.5px;line-height:1.45;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.chx .cmsg.mine .ctxt{background:none;color:inherit}
.chx .cbub .tbtn{margin-top:4px}
.chx-at{color:var(--primary-2);font-weight:640}
.chx-at.me{background:var(--primary-dim);border-radius:5px;padding:0 3px}
.chx .cmsg.mine .chx-at{color:#fff;text-decoration:underline;text-underline-offset:2px}
.chx-q{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-width:0;margin:0 0 6px;padding:5px 9px;border-radius:10px;
  border-left:3px solid var(--primary);background:color-mix(in srgb,var(--text) 6%,transparent);font-size:12.5px;line-height:1.35;color:var(--text-2);text-align:left}
.chx-q b{font-weight:640;color:var(--text)}
.chx-q span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.chx-q.off{color:var(--text-3)}
.chx .cmsg.mine .chx-q{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.85);color:rgba(255,255,255,.85)}
.chx .cmsg.mine .chx-q b{color:#fff}
.chx-card{display:flex;align-items:center;gap:10px;margin-top:8px;min-width:min(220px,100%);padding:9px 8px 9px 10px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);transition:transform .18s var(--g-ease)}
.chx-card:active{transform:scale(.98)}
.chx-card .ic{font-size:20px;line-height:1;flex:none}
.chx-card .c{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chx-card b{font-size:13.5px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chx-card small,.chx-srow small{font-size:12px;font-weight:560;color:var(--text-3)}
.chx-card small b,.chx-srow small b{font-size:12px}
.chx-card svg{width:16px;height:16px;flex:none;color:var(--text-3)}
.chx-card .lv,.chx-srow .lv{color:var(--down);font-weight:640}
.chx .cmsg.mine .chx-card{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}
.chx .cmsg.mine .chx-card small,.chx .cmsg.mine .chx-card svg{color:rgba(255,255,255,.8)}
.chx .cmsg.mine .chx-card .lv{color:#fff}
.chx-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chx-rx:empty{display:none}
.chx-rx button{height:26px;padding:0 8px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:13px;
  display:inline-flex;align-items:center;gap:4px;color:var(--text-2);transition:transform .18s var(--g-ease)}
.chx-rx button:active{transform:scale(.9)}
.chx-rx button.on{background:var(--primary-dim);border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:var(--primary-on-dim)}
.chx-rx .num{font-size:12px;font-weight:640}
.chx-day{display:flex;justify-content:center;margin:12px 0 2px}
.chx-day span{font-size:11.5px;font-weight:600;color:var(--text-3);padding:3px 10px;border-radius:var(--pill);background:var(--surface-2)}
.chx-log>.chx-day:first-child{margin-top:0}
.cmsg.flash .cbub{animation:chxFlash 1.2s ease}
@keyframes chxFlash{0%,30%{box-shadow:0 0 0 3px var(--primary)}100%{box-shadow:0 0 0 0 transparent}}
.chx .cmsg.pending .cbub{opacity:.6}
.chx-sending{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--text-3);border-top-color:transparent;animation:lpSpin .8s linear infinite}
.chx-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px;font-size:13px;color:var(--text-3)}
.chx-empty .e{font-size:30px;line-height:1}
.chx-empty b{font-size:14px;font-weight:640;color:var(--text-2)}
.chx-load{margin:auto;display:grid;place-items:center;padding:24px}
.chx-load .lp-spin{margin:0}
.chx-new{position:absolute;left:50%;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:var(--pill);
  background:var(--primary);color:#fff;font-size:13px;font-weight:640;box-shadow:0 6px 18px rgba(0,0,0,.28);transform:translateX(-50%);animation:chxPill .22s var(--g-ease) both}
.chx-new svg{width:15px;height:15px}
.chx-new b{min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);background:rgba(255,255,255,.22);font-size:11.5px;font-weight:640;display:grid;place-items:center}
@keyframes chxPill{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
.chx-comp{display:flex;flex-direction:column;gap:6px}
.chx .chatin{display:flex;align-items:center;gap:8px}
.chx-ib{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);transition:transform .2s var(--g-ease)}
.chx-ib svg{width:20px;height:20px}
.chx-ib:active,.chx-eb:active{transform:scale(.9)}
.chx-field{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.chx-field .input{height:44px;border-radius:22px;padding:0 46px 0 16px}
.chx-field:has(.chx-cnt:not([hidden])) .input{padding-right:96px}
.chx-eb{position:absolute;right:4px;top:4px;width:36px;height:36px;border-radius:50%;font-size:19px;line-height:1;display:grid;place-items:center;transition:transform .2s var(--g-ease),background .2s}
.chx-eb.on{background:var(--primary-dim)}
.chx-cnt{position:absolute;right:44px;top:50%;margin-top:-8px;font-size:11px;line-height:16px;font-weight:600;color:var(--text-3);pointer-events:none}
.chx-cnt.max{color:var(--down)}
.chx-send{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--primary);color:#fff;transition:transform .2s var(--g-ease),opacity .2s}
.chx-send svg{width:20px;height:20px}
.chx-send:disabled{opacity:.35}
.chx-send:not(:disabled):active{transform:scale(.9)}
.chx-emo{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:16px;animation:chxUp .2s var(--g-ease) both}
.chx-emo::-webkit-scrollbar{display:none}
.chx-emo button{flex:none;width:40px;height:40px;border-radius:12px;font-size:22px;line-height:1;display:grid;place-items:center;transition:transform .18s var(--g-ease)}
.chx-emo button:active{transform:scale(.85)}
.chx-reply{display:flex;align-items:center;gap:10px;padding:7px 6px 7px 12px;border-radius:14px;animation:chxUp .2s var(--g-ease) both}
/* 답장 줄 · 이모지 줄은 대화창 아래쪽에 떠 있는 유리 판이다. 떠 있는 만큼 대화 끝에 여백을 둔다(--fl). */
.chx-float{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.chx-float>*{pointer-events:auto}
.chx-logw{--fl:0px}
.chx-logw:has(.chx-reply:not([hidden])),.chx-logw:has(.chx-emo:not([hidden])){--fl:60px}
.chx-logw:has(.chx-reply:not([hidden])):has(.chx-emo:not([hidden])){--fl:120px}
.chx .chx-log{padding-bottom:calc(14px + var(--fl))}
.chx-logw .chx-new{bottom:calc(10px + var(--fl))}
.chx-reply .ic{color:var(--primary-2);display:grid}
.chx-reply .ic svg{width:18px;height:18px}
.chx-reply .c{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px;line-height:1.35}
.chx-reply .c b{font-weight:640;color:var(--text)}
.chx-reply .c span{color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chx-reply .x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--text-3);flex:none}
.chx-reply .x svg{width:16px;height:16px}
@keyframes chxUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chx-note{position:relative;overflow:hidden;padding:7px 12px;border-radius:12px;background:var(--surface-2);font-size:12.5px;font-weight:560;color:var(--text-2)}
.chx-note.off{color:var(--text-3)}
.chx-note.slow i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--primary);transform-origin:0 50%;animation:chxCool linear forwards}
@keyframes chxCool{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.chiproom .chip{position:relative}
.chiproom .chip.on{box-shadow:0 0 0 1px var(--primary) inset}
.chx-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none}
.chx-rxbar{display:flex;justify-content:space-between;gap:4px;padding:6px;margin-bottom:12px;border-radius:22px;background:var(--surface-2)}
.chx-rxbar button{width:46px;height:46px;border-radius:50%;font-size:25px;line-height:1;display:grid;place-items:center;transition:transform .18s var(--g-ease),background .18s}
.chx-rxbar button:active{transform:scale(.86)}
.chx-rxbar button.on{background:var(--primary-dim);box-shadow:0 0 0 1.5px var(--primary) inset}
.chx-mq{padding:0 4px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.chx-mq b{font-size:14px;font-weight:640}
.chx-mq p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chx-acts{display:flex;flex-direction:column}
.chx-act{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 6px;border-radius:12px;font-size:15px;font-weight:560;color:var(--text);text-align:left}
.chx-act .ic{display:grid;color:var(--text-2)}
.chx-act .ic svg{width:20px;height:20px}
.chx-act.danger,.chx-act.danger .ic{color:var(--danger)}
.chx-act:active{background:var(--surface-2)}
.chx-share{display:flex;flex-direction:column;max-height:min(60vh,480px);overflow-y:auto;overscroll-behavior:contain}
.chx-srow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);text-align:left;color:var(--text)}
.chx-srow:last-child{border-bottom:0}
.chx-srow .ic{font-size:22px;line-height:1;flex:none}
.chx-srow .c{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chx-srow b{font-size:14px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chx-srow svg{width:16px;height:16px;flex:none;color:var(--text-3)}
@media (hover:hover){.chx-act:hover,.chx-srow:hover{background:var(--surface-2)}.chx-rx button:hover{border-color:var(--line-2)}}
@media (prefers-reduced-motion:reduce){.chx-log .cmsg.in,.chx-new,.chx-emo,.chx-reply,.cmsg.flash .cbub{animation:none}.chx-new{transform:translateX(-50%)}}

/* ==== area:aiduel + area:expert (046) ====
 * AI vs 나: 픽 탭 AI 픽 줄의 대결 단추(.ad-mb), 상세의 대결 칸(.ad-panel), 시트, #/ai/duel.
 * 검증된 전문가: 이름 옆 인증 표시(.vf, AUTO 의 회색 글자 표시와 다른 파란 톱니 원), 프로필 줄, 기록 시트. */
.ad-mw{padding:0;gap:0;overflow:hidden}
.ad-ml{display:grid;gap:9px;padding:12px 13px 10px;color:inherit;min-width:0}
.ad-mb{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--primary) 7%,transparent);font-size:12.5px;font-weight:600;color:var(--text-2);text-align:left;width:100%;min-width:0;transition:background .2s var(--g-ease)}
.ad-mb:active{background:var(--primary-dim)}
.ad-vs{flex:none;display:inline-grid;place-items:center;height:18px;padding:0 5px;border-radius:6px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em}
.ad-sl{flex:none;color:var(--text-3)}
.ad-sp{min-width:0;flex:1;font-weight:680;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-sx{flex:none;margin-left:auto;display:inline-flex;align-items:center;color:var(--primary-on-dim);font-weight:640}
.ad-sx svg{width:14px;height:14px}
.ad-out{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--pill);font-size:11.5px;font-weight:680;white-space:nowrap}
.ad-out.w{background:var(--up-dim);color:var(--up-on-dim)}
.ad-out.l{background:var(--down-dim);color:var(--down-on-dim)}
.ad-out.d,.ad-out.v,.ad-out.p{background:var(--surface-2);color:var(--text-2)}
.ad-panel{border-color:color-mix(in srgb,var(--primary) 34%,transparent)}
.ad-h{display:flex;align-items:center;gap:7px;min-width:0}
.ad-go{margin-left:auto;display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--primary-on-dim);white-space:nowrap}
.ad-go svg{width:14px;height:14px}
.ad-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.ad-opt{position:relative;display:grid;place-items:center;gap:3px;min-height:52px;padding:8px 10px;border-radius:14px;background:var(--surface-2);border:1.5px solid var(--line-2);font-size:13.5px;color:var(--text);text-align:center;transition:transform .2s var(--g-ease),border-color .2s var(--g-ease),background .2s var(--g-ease)}
.ad-opt b{font-weight:640;overflow-wrap:anywhere}
.ad-opt:active{transform:scale(.97)}
.ad-opt.on{border-color:var(--primary);background:var(--primary-dim)}
.ad-opt:disabled{opacity:.55}
.ad-opt.on:disabled{opacity:1}
.ad-ai{position:absolute;top:-8px;right:8px;height:17px;padding:0 6px;border-radius:var(--pill);display:inline-grid;place-items:center;background:linear-gradient(90deg,#4F5CF3,#9B5CF6);color:#fff;font-size:10px;font-weight:700}
.ad-note{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:560;color:var(--text-2)}
.ad-note .ad-out{margin-left:0}
.ad-lock{margin-left:auto;color:var(--text-3);font-weight:520}
.ad-sheet .ad-panel{margin-top:4px}
.ad-sm{display:flex;align-items:center;justify-content:center;gap:8px;margin:-2px 0 10px;font-size:14px;font-weight:640;min-width:0}
.ad-sm span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-sm i{font-style:normal;color:var(--text-3);font-size:12px}
.ad-entry{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--g-r);background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);color:var(--text);transition:transform .2s var(--g-ease)}
.ad-entry:active{transform:scale(.98)}
.ad-entry>svg{width:16px;height:16px;color:var(--text-3);flex:none;margin-left:auto}
.ad-et{display:grid;gap:2px;min-width:0}
.ad-et b{font-size:15px;font-weight:680}
.ad-et span{font-size:12.5px;color:var(--text-2);font-weight:520}
.ad-view{display:grid;gap:12px}
.ad-view .g-head{margin-bottom:0}
.ad-score{display:grid;gap:12px}
.ad-score+.ad-board{margin-top:0}
.ad-sh,.ad-bh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ad-sh>b{font-size:15px;font-weight:680}
.ad-bh h2,.ad-recent h2{margin:0;font-size:17px;font-weight:680;letter-spacing:-.02em}
.ad-seg>button{min-width:0;height:30px;padding:0 12px;font-size:13px}
.ad-wdl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.ad-wdl>div{display:grid;gap:2px;padding:10px 0;border-radius:14px;background:var(--surface-2)}
.ad-wdl b{font-family:"Saira Condensed",var(--font);font-size:26px;font-weight:680;line-height:1}
.ad-wdl span{font-size:12px;font-weight:600;color:var(--text-3)}
.ad-wdl .w b{color:var(--up)}
.ad-wdl .l b{color:var(--down)}
.ad-wdl .n{background:var(--primary-dim)}
.ad-wdl .n b{color:var(--primary-on-dim)}
.ad-bdg{display:flex;gap:6px;flex-wrap:wrap}
.ad-b{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--text-3);opacity:.7}
.ad-b b{font-weight:680;font-size:12.5px}
.ad-b.on{opacity:1;background:var(--primary-dim);border-color:transparent;color:var(--primary-on-dim)}
.ad-b.hot{background:linear-gradient(90deg,#4F5CF3,#9B5CF6);color:#fff}
.ad-login{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ad-login b{font-size:14.5px;font-weight:640}
.ad-board,.ad-recent{display:grid;gap:8px}
.ad-bsub{margin:-2px 0 0;font-size:12.5px;color:var(--text-3);font-weight:520}
.ad-lh{display:grid;grid-template-columns:1fr auto 52px;gap:10px;padding:8px 16px;font-size:11.5px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--line)}
.ad-lh span:nth-child(2),.ad-lh span:nth-child(3){text-align:right}
.ad-row{gap:10px;min-height:56px;color:var(--text)}
.ad-row.me{background:var(--primary-dim)}
.ad-rk{flex:none;width:22px;text-align:center;font-weight:680;color:var(--text-2)}
.ad-nm{flex:1;min-width:0;display:flex;align-items:center;gap:5px;font-weight:640;white-space:nowrap;overflow:hidden}
.ad-nm bdi{overflow:hidden;text-overflow:ellipsis}
.ad-k{flex:none;height:17px;padding:0 6px;border-radius:var(--pill);display:inline-grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(90deg,#4F5CF3,#9B5CF6)}
.ad-rec{flex:none;font-size:13px;color:var(--text-2);font-weight:560}
.ad-net{flex:none;width:52px;text-align:right;font-family:"Saira Condensed",var(--font);font-size:19px;font-weight:680;color:var(--up)}
.ad-mine{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--g-r-sm);background:var(--primary-dim);font-size:13.5px;font-weight:600}
.ad-mine .ad-rec{margin-left:auto}
.ad-empty{padding:28px 16px}
.ad-rr{gap:10px;min-height:60px;padding:8px 16px;color:var(--text)}
.ad-rm{flex:1;min-width:0;display:grid;gap:3px}
.ad-rt{font-size:14px;font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-rt i{font-style:normal;color:var(--text-3);font-size:12px}
.ad-rp{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-2);min-width:0;white-space:nowrap;overflow:hidden}
.ad-rp b{font-weight:640;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.ad-who{flex:none;height:16px;padding:0 5px;border-radius:5px;display:inline-grid;place-items:center;font-size:10px;font-weight:700;background:var(--surface-3);color:var(--text-2)}
.ad-who.ai{background:var(--primary);color:#fff;margin-left:4px}
.ad-rules{padding:14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.ad-rules h3,.vf-rule h4{margin:0 0 6px;font-size:13.5px;font-weight:680}
.ad-rules ul,.vf-rule ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:12.5px;color:var(--text-2);font-weight:520;line-height:1.45}

.vf{flex:none;display:inline-grid;place-items:center;width:15px;height:15px;color:var(--primary)}
.vf svg{width:15px;height:15px;display:block}
.sp-name .vf,.sp-name .vf svg{width:20px;height:20px}
.vf-entry{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;text-align:left;color:var(--text);transition:transform .2s var(--g-ease)}
.vf-entry:active{transform:scale(.98)}
.vf-entry>svg{width:16px;height:16px;color:var(--text-3);flex:none;margin-left:auto}
.vf-ei{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--text-3)}
.vf-ei svg{width:18px;height:18px}
.vf-entry.on .vf-ei{background:var(--primary-dim);color:var(--primary)}
.vf-et{display:grid;gap:2px;min-width:0}
.vf-et b{font-size:15px;font-weight:640}
.vf-et span{font-size:12.5px;color:var(--text-2);font-weight:520}
.vf-body{display:grid;gap:10px;min-height:120px}
.vf-body>.lp-spin{justify-self:center;margin:30px 0}
.vf-st{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:var(--g-r-sm);background:var(--surface-2);font-size:13px;color:var(--text-2);font-weight:520}
.vf-st b{font-size:15px;font-weight:680;color:var(--text)}
.vf-st.on{background:var(--primary-dim)}
.vf-si{display:inline-grid;color:var(--primary)}
.vf-si svg{width:22px;height:22px}
.vf-sd{margin-left:auto;font-size:12.5px;color:var(--text-2)}
.vf-grace{margin:-4px 0 0;font-size:12.5px;color:var(--point);font-weight:560}
.vf-h{margin:4px 0 0;font-size:12.5px;font-weight:640;color:var(--text-3)}
.vf-ms{display:grid;gap:6px}
.vf-m{display:grid;grid-template-columns:1fr auto auto 18px;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13.5px}
.vf-ml{font-weight:600;color:var(--text-2)}
.vf-m>b{font-weight:680;font-size:15px}
.vf-mg{font-size:12px;color:var(--text-3);font-weight:520;white-space:nowrap}
.vf-mk{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--surface-3)}
.vf-mk svg{width:10px;height:10px}
.vf-m.ok .vf-mk{background:var(--up);color:#fff}
.vf-strip{display:grid;grid-template-columns:repeat(30,1fr);gap:3px}
.vf-strip i{aspect-ratio:1/2.2;border-radius:3px;background:var(--down)}
.vf-strip i.hit{background:var(--up)}
.vf-sl{display:flex;justify-content:space-between;margin-top:-4px;font-size:11px;color:var(--text-3);font-weight:520}
.vf-none{margin:0;font-size:13px;color:var(--text-3)}
.vf-sps{display:grid;gap:7px}
.vf-sp{display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:10px;font-size:13px}
.vf-spn{font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-bar{height:8px;border-radius:var(--pill);background:var(--surface-3);overflow:hidden}
.vf-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.vf-sp b{text-align:right;font-weight:680}
.vf-cnt{padding:10px 0;border-radius:var(--g-r-sm);background:var(--surface-2)}
.vf-cnt .vf-dt{font-size:15px}
.vf-rule{padding:12px 14px;border-radius:var(--g-r-sm);border:1px solid var(--line-2)}
@media (prefers-reduced-motion:reduce){.ad-mb,.ad-opt,.ad-entry,.vf-entry{transition:none}}
/* ==== /area:aiduel + area:expert ==== */

/* ==== area:social-login ==== */
/* 소셜 로그인 버튼. 각 사 가이드: 카카오 #FEE500 + 검은 심볼, 글자 85% 검정 / 구글 흰 바탕, #747775 테두리,
 * #1F1F1F 글자 / 애플 어두운 화면은 흰 버튼, 밝은 화면은 검은 버튼. 세 버튼은 같은 크기(애플 4.8). */
.so-wrap:empty{display:none}
.so-list{display:grid;gap:8px;margin:14px 0 2px}
.so-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;
  padding:0 44px;border-radius:12px;border:1px solid transparent;font-size:15px;font-weight:600;letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;transition:transform .11s cubic-bezier(.2,.8,.2,1),filter .15s ease}
.so-btn:active{transform:scale(.98)}
.so-btn:disabled{opacity:.6}
.so-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.so-ic{position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;display:flex}
.so-ic svg,.so-mk svg{width:100%;height:100%;display:block}
.so-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-kakao{background:#FEE500;color:rgba(0,0,0,.85)}
.so-google{background:#FFFFFF;color:#1F1F1F;border-color:#747775}
.so-apple{background:#FFFFFF;color:#000000}
:root[data-theme="light"] .so-apple{background:#000000;color:#FFFFFF}
@media (hover:hover){.so-btn:hover{filter:brightness(.96)}}
.so-or{display:flex;align-items:center;gap:10px;margin:14px 0 2px;color:var(--text-3);font-size:12.5px;font-weight:600}
.so-or::before,.so-or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.so-note{margin:12px 0 0;padding:11px 13px;border-radius:var(--r-sm);background:var(--primary-dim);font-size:13px;line-height:1.5;color:var(--text)}
.so-note .au-link{display:block;margin-top:4px;padding:2px 0}
.so-links .so-lrow{display:flex;align-items:center;gap:12px;padding:12px 14px}
.so-mk{flex:none;width:36px;height:36px;border-radius:10px;padding:8px;display:flex;border:1px solid transparent}
.so-mk.so-google{border-color:var(--line-2)}
.so-lrow .sx-t{flex:1;min-width:0}
.so-lrow .sx-t small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-act{flex:none;height:34px;padding:0 14px;border-radius:var(--pill);font-size:13.5px;font-weight:650;
  background:var(--surface-3);color:var(--text)}
.so-act.on{background:var(--primary);color:#fff}
.so-act:disabled{opacity:.6}
.so-hint{margin:12px 2px 10px;font-size:12.5px;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.so-btn{transition:none}}
/* ==== /area:social-login ==== */

/* ==== area:follow (내 팀 · 크루 리그) ==== */
.hm-lg.myteam{--lh:14}
.hm-lg .fl{display:grid;place-items:center;flex:none;width:18px;margin:0;color:var(--point)}
.hm-lg .fl svg{width:17px;height:17px}
.hm-main .hm-cr{cursor:pointer}
.hm-tm.fol .hm-cr{outline:2px solid var(--point);outline-offset:1px}
.tf-sh{display:flex;align-items:center;gap:12px;margin:2px 0 10px}
.tf-sh .hm-cr{width:48px;height:48px;font-size:17px;flex:none}
.tf-sht{display:grid;gap:2px;min-width:0}
.tf-sht b{font-size:18px;font-weight:680;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-sht small{font-size:12.5px;color:var(--text-3);font-weight:560}
.tf-shp{margin:0 0 14px;font-size:13.5px;color:var(--text-2);font-weight:520}
.tf-go+.tf-go{margin-top:8px}
.tf-go svg,.tf-chip svg,.tf-pdc svg{width:17px;height:17px;flex:none}
.tf-row{display:flex;align-items:center;gap:6px;margin:10px 0 2px;min-width:0}
.tf-rl{flex:none;font-size:12px;font-weight:640;color:var(--text-3);margin-right:2px}
.tf-chip{min-width:0;max-width:calc(50% - 30px);height:32px}
.tf-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-chip.on{background:color-mix(in srgb,var(--point) 16%,transparent);color:var(--point);border-color:transparent}
.tf-pdc.on{background:color-mix(in srgb,var(--point) 16%,transparent);color:var(--point)}
.tf-lead{margin:0 2px 12px;font-size:13.5px;color:var(--text-2);font-weight:520}
.tf-list{margin-bottom:6px}
.tf-tr{gap:10px;min-height:58px}
.tf-tr .hm-cr{width:32px;height:32px;flex:none;font-size:12px}
.tf-tt{display:grid;gap:1px;min-width:0;flex:1}
.tf-tt b{font-size:15px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-tt small{font-size:12px;color:var(--text-3);font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-tb{flex:none;min-width:64px}
.tf-empty{padding:22px 16px;gap:4px}
.tf-empty span{font-size:13px}
.tf-sb{position:static;margin-bottom:10px}
.tf-sb input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;font-size:16px}
.tf-hint{margin:0 4px 12px;font-size:12.5px;color:var(--text-3)}
.tf-guest{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13.5px;font-weight:540;color:var(--text-2)}
.tf-guest span{flex:1;min-width:0}
.tf-guest .g-btn{flex:none}
.cr-code{display:flex;gap:8px;margin:0 0 12px}
.cr-code .input{height:40px;flex:1;min-width:0;border-radius:var(--pill);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.cr-code .g-btn{flex:none;height:40px}
.cr-note{margin:10px 2px 0;font-size:12.5px;color:var(--text-3);font-weight:520}
.cr-inv{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px}
.cr-invt{display:grid;gap:2px;flex:1;min-width:0}
.cr-invt b{font-size:15px;font-weight:660}
.cr-invt small{font-size:12.5px;color:var(--text-2);font-weight:520}
.cr-inv .g-btn{flex:none}
.cr-inv .g-btn svg,.cr-win svg{width:16px;height:16px}
.cr-win{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:12px 14px;background:color-mix(in srgb,var(--gold) 10%,var(--surface));border-color:color-mix(in srgb,var(--gold) 32%,transparent)}
.cr-wt{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12.5px;font-weight:660;color:var(--gold)}
.cr-wu{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.cr-wu b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:640}
.cr-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.cr-ctl>.cr-seg{flex:1 1 auto;display:flex}
.cr-seg>button{flex:1;min-width:0;height:30px;padding:0 10px;font-size:13px;white-space:nowrap}
.cr-range{margin:0 2px 8px;font-size:12px;color:var(--text-3);font-weight:560}
.cr-r{display:flex;align-items:center;gap:10px;min-height:58px;padding:0 14px}
.cr-r+.cr-r{border-top:1px solid var(--line)}
.cr-r.me{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.cr-r.none{opacity:.55}
.cr-rk{flex:none;width:24px;display:grid;place-items:center;font-size:13px;font-weight:640;color:var(--text-3)}
.cr-who{display:grid;gap:1px;flex:1;min-width:0}
.cr-who b{font-size:15px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-who small{font-size:12px;color:var(--text-3);font-weight:520}
.cr-v{display:grid;justify-items:end;gap:1px;flex:none}
.cr-v b{font-size:16px;font-weight:680;letter-spacing:-.01em}
.cr-v small{font-size:11.5px;color:var(--text-3);font-weight:520;white-space:nowrap}
.cr-rp{margin-left:auto}
.cr-reset{display:block;margin:14px auto 0}
/* ==== /area:follow ==== */

/* ==== area:battle ==== 친구 대결(#/battle, #/battles, 만들기 시트)과 적중 기록 공유 카드 시트 */
/* 로고 글자(.brand .bt)와 이름이 겹쳐 로고가 위로 밀렸다. 친구 대결 화면 틀은 .bt-page */
.bt-page{display:grid;gap:12px;padding-bottom:calc(16px + var(--safe-b, 0px))}
.bt-sub{margin:0 0 12px;font-size:13.5px;color:var(--text-2);font-weight:520}
.bt-hint{padding:18px 14px;border:1px dashed var(--line-2);border-radius:var(--g-r-sm);text-align:center;font-size:13.5px;color:var(--text-3);font-weight:520}
.bt-sels{display:grid;gap:8px}
.bt-sel{background:var(--surface-2);border-radius:var(--g-r-sm);padding:10px 12px}
.bt-selh{display:flex;align-items:center;gap:8px;min-width:0}
.bt-t{display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:14.5px}
.bt-t b,.bt-pt b{font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bt-t i,.bt-pt i{font-style:normal;color:var(--text-3);font-size:12px;font-weight:560;flex:none}
.bt-when{flex:none;font-size:12px;color:var(--text-3);font-weight:560}
.bt-x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--text-3)}
.bt-x svg{width:14px;height:14px}
.bt-pks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:9px}
.bt-pks.n3{grid-template-columns:repeat(3,1fr)}
.bt-pk{height:38px;border-radius:var(--pill);background:var(--surface-3);color:var(--text-2);font-size:13.5px;font-weight:600;border:1px solid transparent;transition:background .2s var(--g-ease),color .2s var(--g-ease),transform .15s var(--g-ease)}
.bt-pk:active:not(:disabled){transform:scale(.96)}
.bt-pk.on{background:var(--primary);color:#fff}
.bt-pk.on.hit{background:var(--up);color:#fff}
.bt-pk.on.miss{background:var(--down-dim);color:var(--down-on-dim);border-color:var(--down)}
.bt-pk:disabled:not(.on){opacity:.5}
.bt-poolh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 8px;font-size:14px}
.bt-poolh b{font-weight:660}
.bt-full{font-size:12px;color:var(--text-3);font-weight:560}
.bt-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:8px;padding-bottom:2px}
.bt-chips::-webkit-scrollbar{display:none}
.bt-chips .g-chip{flex:none}
.bt-pool{max-height:none}
.bt-prow{gap:8px;min-height:56px;padding:8px 14px;flex-wrap:wrap}
.bt-prow:disabled{opacity:.5}
.bt-pl{width:100%;font-size:11.5px;color:var(--text-3);font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-pt{display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:14px}
.bt-prow .g-sub{font-size:12px}
.bt-more{margin-top:8px}
.bt-foot{position:sticky;bottom:0;margin-top:12px;padding-top:12px}
.bt-foot .g-btn{box-shadow:0 6px 20px rgba(0,0,0,.3)}
.lp-spin.sm{width:18px;height:18px;border-width:2px;margin:0}
.bt-made{display:grid;justify-items:center;text-align:center;gap:10px}
.bt-made .sh-t{margin:0}
.bt-made .bt-sub{margin:0}
.bt-mi{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--up-dim);color:var(--up)}
.bt-mi svg{width:26px;height:26px}
.bt-url{width:100%;padding:11px 14px;border-radius:var(--g-r-sm);background:var(--surface-2);font-size:13.5px;font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-hero{display:grid;gap:10px;text-align:center;overflow:hidden}
.bt-hh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bt-kind{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:640;color:var(--text-2)}
.bt-kind svg{width:16px;height:16px}
.bt-st{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--pill);font-size:12px;font-weight:640;flex:none}
.bt-st.live{background:var(--primary-dim);color:var(--primary-on-dim, var(--primary-2))}
.bt-st.done{background:var(--surface-3);color:var(--text-2)}
.bt-verdict{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.bt-hero.v-win .bt-verdict{color:var(--up)}
.bt-hero.v-lose .bt-verdict{color:var(--down)}
.bt-hero.v-draw .bt-verdict,.bt-hero.v-solo .bt-verdict{color:var(--primary-2)}
.bt-hero.v-void .bt-verdict{color:var(--text-3)}
.bt-hits{display:flex;align-items:baseline;justify-content:center;gap:5px;font-size:14px;color:var(--text-2);font-weight:560}
.bt-hits b{font-family:var(--font-d);font-size:34px;font-weight:700;color:var(--text)}
.bt-rew{font-size:15px;font-weight:680;color:var(--point)}
.bt-who{display:flex;align-items:center;justify-content:center;gap:10px}
.bt-who>span{display:grid;text-align:left}
.bt-who b{font-size:17px;font-weight:680}
.bt-who small{font-size:12.5px;color:var(--text-3);font-weight:540}
.bt-faces{display:flex;justify-content:center;flex-wrap:wrap}
.bt-faces .avatar{margin:0 -3px;box-shadow:0 0 0 2px var(--g-card)}
.bt-faces .avatar .chk{display:none}
.bt-hero .bt-sub{margin:0}
.bt-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.bt-acts .g-btn{flex:1;min-width:0;max-width:220px}
.bt-acts .g-btn svg,.shc-btn svg,.bt-mbtn svg,.bt-new svg,.bt-made .g-btn svg{width:17px;height:17px;flex:none}
.bt-sec{display:grid;gap:8px}
.bt-h2{font-size:15px;font-weight:680;margin:6px 2px 0}
.bt-m{padding:12px 14px;display:grid;gap:10px}
.bt-m.bt-shut{background:color-mix(in srgb,var(--surface) 92%,var(--primary))}
.bt-mh{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);font-weight:560;min-width:0}
.bt-lg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-live{display:inline-flex;align-items:center;gap:4px;color:var(--down);font-weight:640}
.bt-fin{color:var(--text-2);font-weight:620}
.bt-void{padding:1px 7px;border-radius:var(--pill);background:var(--surface-3);color:var(--text-2);font-weight:620}
.bt-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.bt-tm{display:flex;align-items:center;gap:8px;min-width:0}
.bt-tm:last-child{flex-direction:row-reverse;text-align:right}
.bt-tm b{font-size:14.5px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bt-tm .hm-cr{flex:none}
.bt-sc{font-family:var(--font-d);font-size:24px;font-weight:700;letter-spacing:.02em}
.bt-vs{font-style:normal;font-size:12px;color:var(--text-3);font-weight:600}
.bt-m .bt-pks{margin-top:0}
.bt-ops{display:flex;flex-wrap:wrap;gap:6px}
.bt-op{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 10px;border-radius:var(--pill);background:var(--surface-2);font-size:12.5px;font-weight:560;color:var(--text-2)}
.bt-op bdi{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-op b{font-weight:640;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-op.none b{color:var(--text-3);font-weight:560}
.bt-op.hit{background:var(--up-dim)}.bt-op.hit b{color:var(--up-on-dim)}
.bt-op.miss{background:var(--down-dim)}.bt-op.miss b{color:var(--down-on-dim)}
.bt-lock{font-size:11.5px;color:var(--text-3);font-weight:520}
.bt-board .g-row{min-height:50px;gap:10px}
.bt-pr.me{background:var(--primary-dim)}
.bt-rk{width:18px;text-align:center;font-weight:680;color:var(--text-2);flex:none}
.bt-pn{display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:14.5px;font-weight:600}
.bt-pn bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-host{flex:none;padding:1px 7px;border-radius:var(--pill);background:var(--surface-3);font-size:11px;font-weight:620;color:var(--text-2)}
.bt-ph{display:inline-flex;align-items:baseline;gap:4px;flex:none}
.bt-ph b{font-size:16px;font-weight:700;color:var(--text)}
.bt-ph em,.bt-lir em{font-style:normal;color:var(--point);font-weight:660;margin-left:4px}
.bt-cta{margin-top:2px}
.bt-rule{margin:0;text-align:center;font-size:12px;color:var(--text-3);font-weight:520}
.bt-new{margin-bottom:2px}
.bt-li{display:grid;gap:6px;padding:13px 14px}
.bt-li+.bt-li{margin-top:0}
.bt-lih{display:flex;align-items:center;gap:8px;min-width:0}
.bt-lic{flex:1;min-width:0;font-size:14px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-lic small{font-size:12px;color:var(--text-3);font-weight:540}
.bt-lid{flex:none;font-size:12px;color:var(--text-3);font-weight:560}
.bt-lim{display:grid;gap:2px;font-size:13px;color:var(--text-2);font-weight:540}
.bt-lim span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-lir{display:flex;align-items:baseline;gap:4px;font-size:12.5px;color:var(--text-2);font-weight:560}
.bt-lir b{font-size:16px;font-weight:700;color:var(--text)}
.bt-entry{margin-top:10px}
.bt-entry .g-row{gap:10px}
.bt-ei{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary-2);flex:none}
.bt-ei svg{width:17px;height:17px}
.bt-et{flex:1;font-weight:600}
.bt-mbtn{margin-top:14px}
.shc-row{display:flex;justify-content:flex-start;margin:12px 0 4px}
.shc-ico span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shc-ico{margin-left:auto}
.shc-seg{margin-bottom:12px}
.shc-prev{display:grid;place-items:center;margin:0 auto 14px;border-radius:16px;overflow:hidden;background:#0B0C1A;aspect-ratio:9/16;max-height:52vh;width:auto;max-width:100%}
.shc-prev.square{aspect-ratio:1/1;max-height:none;width:min(100%,340px)}
.shc-prev.story{height:52vh}
.shc-prev img{width:100%;height:100%;object-fit:contain;display:block}
.shc-prev .lp-spin{margin:0}
.shc-err{font-size:13px;color:#A5A8AF;padding:16px;text-align:center}
.shc-acts{display:flex;gap:8px}
.shc-acts .g-btn{flex:1}
@media (prefers-reduced-motion:reduce){.bt-pk{transition:none}}
/* ==== /area:battle ==== */

/* ==== visual v3 ==== (2026-09-30)
 * 한 곳에 모은 시각 다듬기. 앞의 규칙을 덮어쓴다(구조와 클래스는 그대로).
 * 움직임은 transform 과 opacity 만. 긴 목록에는 backdrop-filter 를 쓰지 않는다.
 * 목록 묶음(.hm-grp)은 content-visibility 로 그리기가 잘리므로 카드 그림자는 옆으로 번지지 않게 둔다.
 * 스프링은 linear() 로 근사한다(누름 되돌아옴 감쇠 0.62, 시트 0.86, 톡 0.5). 없으면 cubic-bezier. */
:root{
  --v3-spring:cubic-bezier(.3,1.35,.5,1); --v3-sheet:cubic-bezier(.2,.9,.25,1); --v3-pop:cubic-bezier(.3,1.6,.5,1);
  --v3-hl:inset 0 1px 0 rgba(255,255,255,.055);
  --v3-card-bg:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 46%),var(--surface);
  --v3-card-sh:0 10px 14px -14px rgba(0,0,0,.9);
  --v3-odd-line:rgba(255,255,255,.04);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --v3-spring:linear(0,0.0702,0.2328,0.43,0.6226,0.7873,0.9141,1.0015,1.054,1.0786,1.0832,1.0753,1.0607,1.0441,1.0284,1.0152,1.0054,0.9987,0.9949,0.9932,0.9931,0.9939,0.9952,0.9966,1);
    --v3-sheet:linear(0,0.0578,0.1861,0.3378,0.4859,0.6167,0.7248,0.8098,0.874,0.9205,0.9531,0.9749,0.9889,0.9974,1.0021,1.0043,1.005,1.0048,1.0043,1.0035,1.0028,1.0021,1.0015,1.001,1);
    --v3-pop:linear(0,0.0781,0.2636,0.492,0.7152,0.9025,1.039,1.1224,1.159,1.1597,1.1369,1.102,1.0644,1.0304,1.0038,0.9859,0.9763,0.9734,0.9754,0.9804,0.9864,0.9924,0.9974,1.001,1.0032,1.0042,1);
  }
}
[data-theme=light]{
  --v3-hl:inset 0 1px 0 rgba(255,255,255,.9);
  --v3-card-bg:var(--surface);
  --v3-card-sh:0 1px 2px rgba(16,24,40,.06),0 8px 12px -12px rgba(16,24,40,.22);
  --v3-odd-line:rgba(15,18,25,.06);
}

/* ---- 1. 홈 경기 카드 ---- */
.hm-grp{padding-bottom:3px;margin-bottom:13px}
.hm-lg{box-shadow:inset 0 0 0 1px hsl(var(--lh) 48% 62% / .16),inset 0 1px 0 rgba(255,255,255,.05)}
[data-theme=light] .hm-lg{box-shadow:inset 0 0 0 1px hsl(var(--lh) 52% 42% / .13)}
.hm-card{position:relative;background:var(--v3-card-bg);border-color:var(--line-2);box-shadow:var(--v3-hl),var(--v3-card-sh)}
[data-theme=light] .hm-card{border-color:rgba(15,18,25,.08)}
.hm-top+.hm-mk{border-top-color:var(--line)}
/* 진행중: 가장자리가 천천히 숨 쉬는 빨간 빛(안쪽 그림자라 잘리지 않는다). */
.hm-card.live{border-color:color-mix(in srgb,var(--down) 30%,var(--line-2))}
.hm-card.live::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--down) 55%,transparent),inset 0 0 24px -8px color-mix(in srgb,var(--down) 50%,transparent);
  opacity:.2;animation:v3Live 2.6s ease-in-out infinite alternate}
[data-theme=light] .hm-card.live::after{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--down) 45%,transparent),inset 0 0 18px -9px color-mix(in srgb,var(--down) 40%,transparent)}
@keyframes v3Live{to{opacity:.85}}
/* 분 알약: 깜빡이는 점과 고정폭 숫자 */
.hm-st.live{gap:5px;padding:0 8px 0 7px;font-family:var(--font-d);font-size:13px;font-weight:680;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 8px -3px color-mix(in srgb,var(--down) 80%,transparent)}
.hm-st.live::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#fff;animation:hmBlink 1.4s ease-in-out infinite}
.hm-st.fin,.hm-st.wait{box-shadow:inset 0 0 0 1px var(--line)}
.hm-sc{font-size:30px;gap:8px;letter-spacing:0}
.hm-sc b{min-width:.62em;text-align:center;font-variant-numeric:tabular-nums lining-nums}
.hm-sc i{font-size:18px;opacity:.7}
/* 엠블럼: 위쪽에 빛이 닿은 가장자리, 아래로 작은 그림자 */
.hm-cr{box-shadow:inset 0 0 0 1px hsl(var(--hh) 36% 33%),inset 0 1px 0 rgba(255,255,255,.14),0 3px 8px -4px rgba(0,0,0,.6)}
[data-theme=light] .hm-cr{box-shadow:inset 0 0 0 1px hsl(var(--hh) 50% 83%),0 2px 6px -3px rgba(16,24,40,.25)}
.hm-cr.has-img{box-shadow:inset 0 0 0 1px var(--line-2),0 3px 8px -4px rgba(0,0,0,.6)}
[data-theme=light] .hm-cr.has-img{box-shadow:inset 0 0 0 1px var(--line),0 2px 6px -3px rgba(16,24,40,.22)}
/* 배율 단추: 누르면 0.97, 떼면 스프링으로 돌아온다. 담는 순간(v3pop)만 톡. */
.hm-o{box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 0 0 1px var(--v3-odd-line);
  transition:transform .46s var(--v3-spring),background-color .18s var(--g-ease),color .18s var(--g-ease),box-shadow .18s var(--g-ease)}
[data-theme=light] .hm-o{box-shadow:inset 0 0 0 1px var(--v3-odd-line)}
.hm-o.mid{box-shadow:none}
button.hm-o:not(:disabled):active{transform:scale(.97);transition:transform .08s ease-out,background-color .08s ease-out}
.hm-o.picked{background:var(--primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -8px var(--primary)}
.hm-o.v3pop{animation:v3Pop .5s var(--v3-pop)}
@keyframes v3Pop{from{transform:scale(.93)}to{transform:none}}
/* 배율 변동: 오른 값은 붉게, 내린 값은 파랗게(기존 화살표 색과 같다). 처음 보일 때 한 번 번쩍. */
.hm-o:not(.picked):has(.hm-mv.up){background:color-mix(in srgb,var(--danger) 9%,var(--surface-2))}
.hm-o:not(.picked):has(.hm-mv.down){background:color-mix(in srgb,#3B82F6 10%,var(--surface-2))}
.hm-o.v3-flash::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--danger);opacity:0;animation:v3Flash .9s ease-out}
.hm-o.v3-flash:has(.hm-mv.down)::after{background:#3B82F6}
@keyframes v3Flash{15%{opacity:.34}to{opacity:0}}
.hm-pk i{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.hm-star{transition:transform .46s var(--v3-spring),color .2s var(--g-ease)}
.hm-star:active{transition-duration:.08s}

/* ---- 2. 랭킹: 시상대와 내 순위 알약 ---- */
.rk-pod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr) minmax(0,1fr);align-items:end;gap:6px;padding:14px 10px 0;
  background:radial-gradient(90% 80% at 50% 0,color-mix(in srgb,var(--gold) 13%,transparent),transparent 72%);border-bottom:1px solid var(--line)}
.rk-pc{--mc:var(--gold);position:relative;display:grid;justify-items:center;min-width:0}
.rk-pc.p2{--mc:var(--silver)}.rk-pc.p3{--mc:var(--bronze)}
.rk-pa{display:grid;justify-items:center;gap:2px;width:100%;min-width:0;padding:0 2px 8px;text-align:center;color:inherit;border-radius:14px;transition:transform .46s var(--v3-spring)}
.rk-pa:active{transform:scale(.96);transition-duration:.08s}
.rk-pav{position:relative;display:inline-grid;padding:5px;border-radius:17px;background:conic-gradient(from 210deg,var(--mc),color-mix(in srgb,var(--mc) 55%,#000) 50%,var(--mc))}
.rk-pc.p1 .rk-pav{border-radius:26px}
.rk-pav .avatar{box-shadow:0 0 0 2px var(--surface)}
.rk-pav .avatar.lg{border-radius:21px}
.rk-pav .avatar .chk{display:none}
.rk-pmd{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:grid;place-items:center;
  background:var(--mc);color:#17130A;font-style:normal;font-family:var(--font-d);font-size:13.5px;font-weight:700;line-height:1;box-shadow:0 0 0 2.5px var(--surface),inset 0 1px 0 rgba(255,255,255,.55)}
.rk-pn{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%;min-width:0;margin-top:10px;font-size:13.5px;font-weight:680;letter-spacing:-.01em}
.rk-pn .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-pn .tag{flex:none;height:16px;padding:0 4px;font-size:9.5px}
.rk-pc .rk-m{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:680;color:var(--text);font-variant-numeric:tabular-nums}
.rk-pc .rk-m.up{color:var(--up)}.rk-pc .rk-m.down{color:var(--down)}
.rk-pc.p1 .rk-m{font-size:20px}
.rk-pc.p1 .rk-pn{font-size:14.5px}
.rk-pc.me .rk-pn .nm{color:var(--primary-on-dim)}
.rk-pc .rk-fol{position:absolute;top:-6px;right:2px;width:28px;height:28px;z-index:1}
.rk-pc .rk-fol svg{width:15px;height:15px}
.rk-pb{display:block;width:100%;height:28px;border-radius:12px 12px 0 0;transform-origin:50% 100%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mc) 24%,transparent),color-mix(in srgb,var(--mc) 5%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mc) 55%,transparent)}
.rk-pb{height:20px}
.rk-pc.p1 .rk-pb{height:30px}.rk-pc.p3 .rk-pb{height:10px}
[data-theme=light] .rk-pmd{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
[data-theme=light] .rk-pod{background:radial-gradient(90% 80% at 50% 0,color-mix(in srgb,var(--gold) 16%,transparent),transparent 72%)}
.view.fx-in .rk-pb,.view:not(.quiet) .rk-pb{animation:v3Ped .7s var(--v3-sheet) both}
.view.fx-in .rk-pc.p2 .rk-pb,.view:not(.quiet) .rk-pc.p2 .rk-pb{animation-delay:.06s}
.view.fx-in .rk-pc.p1 .rk-pb,.view:not(.quiet) .rk-pc.p1 .rk-pb{animation-delay:.12s}
.view.fx-in .rk-pmd,.view:not(.quiet) .rk-pmd{animation:v3Medal .6s var(--v3-pop) .22s both}
@keyframes v3Ped{from{transform:scaleY(.15);opacity:0}}
@keyframes v3Medal{from{transform:translateX(-50%) scale(.3);opacity:0}to{transform:translateX(-50%)}}
.rk-row.top1 .rk-no b,.rk-row.top2 .rk-no b,.rk-row.top3 .rk-no b{color:var(--text)}
.v3-mychip{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 22px);z-index:47;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 6px;border-radius:var(--pill);
  background:var(--g-tint);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-stroke);box-shadow:inset 0 1px 0 var(--g-hl),var(--g-shadow);
  color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,14px) scale(.94);pointer-events:none;
  transition:opacity .18s ease,transform .5s var(--v3-spring)}
.v3-mychip.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.v3-mychip[hidden]{display:none}
.view.fx-in .v3-mychip.fx{animation:none}
.v3-mychip:active{transform:translate(-50%,0) scale(.96);transition-duration:.08s}
.v3-mychip .avatar.sm{width:28px;height:28px;font-size:11px}
.v3-mychip .avatar .chk{display:none}
.v3-mychip span{color:var(--text-2)}
.v3-mychip b{font-family:var(--font-d);font-size:17px;font-weight:680;line-height:1}
.v3-mychip em{font-style:normal;font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--text-2)}
body:has(.slipbar:not(.hide)) .v3-mychip{bottom:calc(var(--nav-h) + var(--safe-b) + 92px)}
@media (min-width:960px){.v3-mychip{bottom:28px}}
@media (prefers-reduced-transparency:reduce){.v3-mychip{background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- 3. 프로필 머리: 브랜드 빛이 도는 카드, 레벨 색 고리 ---- */
[data-lv]{--lvc:var(--text-3)}
[data-lv="2"],[data-lv="3"]{--lvc:var(--bronze)}
[data-lv="4"],[data-lv="5"]{--lvc:var(--silver)}
[data-lv="6"],[data-lv="7"]{--lvc:var(--gold)}
[data-lv="8"],[data-lv="9"]{--lvc:#5EEAD4}
[data-lv="10"]{--lvc:#C084FC}
.sp{position:relative;isolation:isolate;padding:16px;border-radius:var(--g-r);border:1px solid var(--line-2);
  background:radial-gradient(120% 90% at 0 0,color-mix(in srgb,var(--primary) 22%,transparent),transparent 62%),radial-gradient(80% 70% at 100% 0,color-mix(in srgb,var(--lvc,var(--primary)) 10%,transparent),transparent 70%),var(--v3-card-bg);
  box-shadow:var(--v3-hl)}
[data-theme=light] .sp{background:radial-gradient(120% 90% at 0 0,color-mix(in srgb,var(--primary) 11%,transparent),transparent 62%),var(--surface);border-color:rgba(15,18,25,.08);box-shadow:var(--v3-card-sh)}
.sp-av[data-lv],.me-av[data-lv]{position:relative;isolation:isolate;padding:6px}
.me-av[data-lv]{padding:5px}
.sp-av[data-lv]::before,.me-av[data-lv]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:32px;
  background:conic-gradient(from 210deg,var(--lvc),color-mix(in srgb,var(--lvc) 45%,#000) 50%,var(--lvc))}
.me-av[data-lv]::before{border-radius:28px}
.sp-av[data-lv="10"]::before,.me-av[data-lv="10"]::before{background:conic-gradient(from 0deg,#F6B73C,#FF4FCB,#6370FF,#5EEAD4,#F6B73C)}
.sp-av[data-lv] .avatar,.me-av[data-lv] .avatar{border-radius:26px;box-shadow:0 0 0 2.5px var(--surface)}
.me-av[data-lv] .avatar{border-radius:23px;box-shadow:0 0 0 2px var(--bg)}
.sp-vf{right:0;bottom:0;border-color:var(--surface)}
.sp-stat,.sp-cnt,.me-pts{background:var(--v3-card-bg);box-shadow:var(--v3-hl)}
[data-theme=light] .sp-stat,[data-theme=light] .sp-cnt,[data-theme=light] .me-pts{box-shadow:var(--v3-card-sh)}
.sp-cnt .g-count>*+*{box-shadow:inset 1px 0 0 var(--line)}
.sp-stat .g-stat .v{font-size:36px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sp-cnt .g-count .n{font-variant-numeric:tabular-nums}

/* ---- 4. 픽 카드 · AI 픽 · 결과 도장 ---- */
.pk-card{box-shadow:var(--v3-hl);transition:transform .46s var(--v3-spring)}
.pk-card:active:not(:has(button:active)){transform:scale(.985);transition-duration:.1s}
[data-theme=light] .pk-card{box-shadow:var(--v3-card-sh)}
.ai-mini{box-shadow:var(--v3-hl);transition:transform .46s var(--v3-spring)}
.ai-mini:active{transform:scale(.98);transition-duration:.1s}
.tag.auto{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-3)}
.rtag{display:inline-block}
.rtag.hit,.ai-res.hit,.tag.win{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--up) 28%,transparent)}
.rtag.miss,.ai-res.miss,.tag.loss{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--down) 26%,transparent)}
.v3-stamp{animation:v3Stamp .56s var(--v3-pop) both}
@keyframes v3Stamp{0%{opacity:0;transform:scale(1.9) rotate(-9deg)}30%{opacity:1}100%{opacity:1;transform:none}}

/* ---- 5. 공통: 뼈대 반짝임, 시트, 토스트, 칩, 빈 화면 ---- */
.sk{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);animation:none}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 50%,transparent);animation:v3Shim 1.3s ease-in-out infinite}
[data-theme=light] .sk::after{background:linear-gradient(90deg,transparent,rgba(15,18,25,.05) 50%,transparent)}
@keyframes v3Shim{to{transform:translateX(100%)}}
@media (max-width:959px){
  .sheet{animation:v3SheetIn .52s var(--v3-sheet)}
  .sheet.closing{animation:v3SheetOut .17s cubic-bezier(.4,0,.9,.55) forwards}
  .sheet-bg{animation:fade .24s ease}
}
@keyframes v3SheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes v3SheetOut{to{transform:translateY(100%)}}
.toast{animation:v3ToastIn .5s var(--v3-pop)}
@keyframes v3ToastIn{from{opacity:0;transform:translate(-50%,18px) scale(.92)}to{opacity:1;transform:translate(-50%,0)}}
.g-chip,.g-btn,.g-iconbtn{transition:transform .46s var(--v3-spring),background-color .2s var(--g-ease),color .2s var(--g-ease),border-color .2s var(--g-ease)}
.g-chip:active,.g-btn:not(:disabled):active{transform:scale(.96);transition-duration:.08s}
.g-iconbtn:active{transform:scale(.92);transition-duration:.08s}
@media (hover:hover){.g-chip:not(.on):hover,.g-btn:not(.primary):not(:disabled):hover{background:var(--surface-3)}}
.empty:not(.sm):not([style])::before,
.g-empty:not(.sm):not(.pk-empty):not(.ai-empty):not(.ss-empty):not(:has(>svg))::before{content:"";display:block;width:52px;height:52px;margin:0 auto 10px;background:var(--text-3);opacity:.5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 20h40a4 4 0 0 1 4 4v5a4 4 0 0 0 0 8v5a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-5a4 4 0 0 0 0-8v-5a4 4 0 0 1 4-4z%27/%3E%3Cpath d=%27M42 23v18%27 stroke-dasharray=%272.5 3.5%27/%3E%3Cpath d=%27M17 29h16M17 36h10%27/%3E%3Cpath d=%27M52 6v6M49 9h6M10 8v4M8 10h4%27 stroke-width=%272.2%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 20h40a4 4 0 0 1 4 4v5a4 4 0 0 0 0 8v5a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-5a4 4 0 0 0 0-8v-5a4 4 0 0 1 4-4z%27/%3E%3Cpath d=%27M42 23v18%27 stroke-dasharray=%272.5 3.5%27/%3E%3Cpath d=%27M17 29h16M17 36h10%27/%3E%3Cpath d=%27M52 6v6M49 9h6M10 8v4M8 10h4%27 stroke-width=%272.2%27/%3E%3C/svg%3E") center/contain no-repeat}
.g-empty:not(.sm):not(.pk-empty):not(.ai-empty):not(.ss-empty):not(:has(>svg))::before{margin:0 0 -2px}

@media (prefers-reduced-motion:reduce){
  .hm-card.live::after{animation:none;opacity:.6}
  .hm-st.live::before,.hm-o.v3pop,.hm-o.v3-flash::after,.v3-stamp,.sk::after,.rk-pb,.rk-pmd,.sheet,.sheet.closing,.toast{animation:none!important}
  .hm-o,.hm-star,.rk-pa,.v3-mychip,.pk-card,.ai-mini,.g-chip,.g-btn,.g-iconbtn{transition:none}
}
/* ==== /visual v3 ==== */
/* ==== insight ==== */
/* 모두의 예측 · 오늘의 핫 매치 · 경기 인사이트 · 첫 실행 맞춤 설정 (app.js area:insight) */
:root{--ins-h:#6F7BFF;--ins-d:rgba(165,168,175,.38);--ins-a:#20C4A4;--ins-hot:#FF7A45;--ins-hot-dim:rgba(255,122,69,.14)}
:root[data-theme="light"]{--ins-h:#4F5CF3;--ins-d:rgba(15,18,25,.16);--ins-a:#0C9E84;--ins-hot:#E8602A;--ins-hot-dim:rgba(232,96,42,.12)}
.ins-bar{display:flex;gap:2px;height:8px;border-radius:99px;overflow:hidden;background:var(--surface-3);min-width:0;flex:1}
.ins-bar.sm{height:5px}
.ins-bar.lg{height:12px}
.ins-seg{display:block;flex:0 1 var(--w);height:100%;transform-origin:left center;border-radius:2px}
.ins-seg.h{background:var(--ins-h)}.ins-seg.d{background:var(--ins-d)}.ins-seg.a{background:var(--ins-a)}
.ins-go .ins-seg{animation:insFill .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms + 60ms)}
@keyframes insFill{from{transform:scaleX(0)}}
/* 홈 카드 한 줄 */
.ins-cb{display:flex;align-items:center;gap:7px;margin:7px 32px 0;min-height:16px}
.ins-cbl{flex:none;font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:-.01em}
.ins-cbn{flex:none;font-size:11.5px;font-weight:700;min-width:28px}
.ins-cbn.h{color:var(--ins-h);text-align:right}.ins-cbn.a{color:var(--ins-a)}
/* 오늘의 핫 매치 */
.ins-hot{margin:2px 0 16px}
.ins-hh{display:flex;align-items:center;gap:7px;margin:0 2px 9px}
.ins-hf{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--ins-hot-dim);color:var(--ins-hot);flex:none}
.ins-hf svg{width:15px;height:15px}
.ins-hh b{font-size:15px;font-weight:680;letter-spacing:-.02em}
.ins-hh small{font-size:12px;color:var(--text-3);font-weight:560}
.ins-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ins-rail::-webkit-scrollbar{display:none}
.ins-hc{flex:0 0 156px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:11px 12px 10px;border-radius:18px;background:var(--g-card,var(--surface));border:1px solid var(--g-card-line,var(--line));transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ins-hc:active{transform:scale(.97)}
.ins-hc.live{border-color:rgba(255,93,93,.32)}
.ins-hl{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-3);min-width:0;height:15px}
.ins-hlg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ins-hlv{display:inline-flex;align-items:center;gap:4px;color:var(--down);flex:none;font-weight:700}
.ins-hlv i{width:6px;height:6px;border-radius:50%;background:var(--down);animation:insBlink 1.4s ease-in-out infinite}
@keyframes insBlink{50%{opacity:.35}}
.ins-hm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:4px}
.ins-ht{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ins-ht .hm-cr{width:34px;height:34px}
.ins-ht b{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-hs{display:flex;align-items:center;gap:3px;font-size:19px;font-weight:720;padding-top:6px;letter-spacing:-.02em}
.ins-hs i{font-style:normal;color:var(--text-3);font-weight:600}
.ins-hk{font-size:13.5px;font-weight:680;color:var(--text-2);padding-top:9px}
.ins-hc .ins-bar{flex:none}
.ins-hp{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;margin-top:-4px}
.ins-hp .h{color:var(--ins-h)}.ins-hp .a{color:var(--ins-a)}.ins-hp i{font-style:normal;color:var(--text-3);font-weight:600}
/* 경기 화면: 모두의 예측 */
.ins-cw{text-align:left;margin-top:16px;padding:14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.ins-cwh{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.ins-cwi{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary-on-dim);flex:none}
.ins-cwi svg{width:14px;height:14px}
.ins-cwh b{font-size:14px;font-weight:680}
.ins-cw.empty{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}
.ins-cw.empty .ins-cwh{margin:0}
.ins-cwe{font-size:12.5px;color:var(--text-3);font-weight:560}
.ins-cr+.ins-cr{margin-top:14px}
.ins-crt{font-size:12px;color:var(--text-3);font-weight:600;margin-bottom:7px}
.ins-cr .ins-bar{display:flex}
.ins-crl{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.ins-o{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-2);font-weight:560;min-width:0;white-space:nowrap}
.ins-o i{width:7px;height:7px;border-radius:50%;flex:none}
.ins-o.h i{background:var(--ins-h)}.ins-o.d i{background:var(--ins-d)}.ins-o.a i{background:var(--ins-a)}
.ins-o b{font-weight:700;color:var(--text);margin-left:2px}
.ins-o.top.h b{color:var(--ins-h)}.ins-o.top.a b{color:var(--ins-a)}
/* 인사이트 탭 */
.ins-sec .sec-h{align-items:baseline}
.ins-sub{font-size:12.5px;color:var(--text-3);font-weight:600}
.ins-card{padding:14px;border-radius:16px;background:var(--g-card,var(--surface));border:1px solid var(--g-card-line,var(--line))}
.ins-pw{display:flex;align-items:center;gap:18px}
.ins-dn{position:relative;width:108px;height:108px;flex:none}
.ins-donut{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ins-trk{fill:none;stroke:var(--surface-3);stroke-width:4}
.ins-arc{fill:none;stroke-width:4}
.ins-arc.h{stroke:var(--ins-h)}.ins-arc.d{stroke:var(--ins-d)}.ins-arc.a{stroke:var(--ins-a)}
.ins-go .ins-arc{animation:insArc 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 120ms)}
@keyframes insArc{from{stroke-dasharray:0 100}}
.ins-dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ins-dc b{font-size:23px;font-weight:720;letter-spacing:-.03em;line-height:1}
.ins-dc small{font-size:11.5px;color:var(--text-3);font-weight:600;margin-top:4px}
.ins-lg{flex:1;min-width:0;display:grid;gap:10px}
.ins-li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);font-weight:560}
.ins-li i{width:8px;height:8px;border-radius:3px}
.ins-li.h i{background:var(--ins-h)}.ins-li.d i{background:var(--ins-d)}.ins-li.a i{background:var(--ins-a)}
.ins-li b{font-weight:700;color:var(--text);font-size:15px}
.ins-li.top span{color:var(--text);font-weight:620}
.ins-vs{display:grid;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.ins-vr{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}
.ins-vl{font-size:12px;color:var(--text-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-p2{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.ins-card>.ins-p2:first-child{margin-top:0;padding-top:0;border-top:0}
.ins-p2h{font-size:12px;color:var(--text-3);font-weight:600;margin-bottom:7px}
.ins-p2r{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px}
.ins-p2r b{font-size:14px;font-weight:700}
.ins-p2r b.h{color:var(--ins-h)}.ins-p2r b.a{color:var(--ins-a);text-align:right}
.ins-p2l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-3);margin:5px 48px 0;font-weight:560}
.ins-form{display:grid;gap:12px}
.ins-fr{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ins-ft{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.ins-ft .hm-cr{width:28px;height:28px;font-size:11px;flex:none}
.ins-ft b{font-size:14px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-fp{display:flex;gap:4px;flex:none}
.ins-pl{width:30px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ins-pl b{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;font-weight:720}
.ins-pl.W b{background:var(--up-dim);color:var(--up-on-dim)}
.ins-pl.D b{background:var(--surface-3);color:var(--text-2)}
.ins-pl.L b{background:var(--down-dim);color:var(--down-on-dim)}
.ins-pl:first-child b{box-shadow:inset 0 0 0 1.5px currentColor}
.ins-pl small{font-size:10.5px;color:var(--text-3);font-weight:560;white-space:nowrap}
.ins-fnone{font-size:12.5px;color:var(--text-3);font-weight:560}
.ins-h2s{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px;margin-bottom:10px}
.ins-h2n{display:flex;flex-direction:column;gap:2px;min-width:0}
.ins-h2n.h{align-items:flex-start}.ins-h2n.d{align-items:center}.ins-h2n.a{align-items:flex-end}
.ins-h2n b{font-size:22px;font-weight:720;line-height:1.1}
.ins-h2n.h b{color:var(--ins-h)}.ins-h2n.a b{color:var(--ins-a)}.ins-h2n.d b{color:var(--text-2)}
.ins-h2n small{font-size:11.5px;color:var(--text-3);font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-h2 .ins-bar{display:flex}
.ins-h2l{margin-top:10px;display:grid}
.ins-h2r{display:grid;grid-template-columns:58px minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:9px 0 0;margin-top:9px;border-top:1px solid var(--line);font-size:13px}
.ins-h2d{color:var(--text-3);font-size:12px}
.ins-h2t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-weight:560;text-align:right}
.ins-h2t.r{text-align:left}
.ins-h2t.w{color:var(--text);font-weight:640}
.ins-h2c{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--text-3)}
.ins-h2c b{font-weight:700}.ins-h2c b.w{color:var(--text)}.ins-h2c i{font-style:normal}
.ins-empty{display:flex;align-items:center;gap:8px;padding:14px;border-radius:14px;background:var(--surface-2);color:var(--text-3);font-size:13px;font-weight:560}
.ins-empty svg{width:16px;height:16px;flex:none}
.ins-skel .sk-row{height:88px;margin-bottom:10px;border-radius:16px}
.ins-pane .qual{margin-top:14px}
/* 첫 실행 맞춤 설정 */
.ob-top{display:flex;align-items:center;justify-content:space-between;margin:0 -6px 12px}
.ob-back{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--text-2)}
.ob-back svg{width:20px;height:20px}
.ob-back.ph{visibility:hidden}
.ob-dots{display:flex;gap:6px}
.ob-dots i{width:6px;height:6px;border-radius:99px;background:var(--surface-3);transition:width .25s,background .25s}
.ob-dots i.on{width:20px;background:var(--primary)}
.ob-skip{height:36px;padding:0 8px;font-size:14px;font-weight:600;color:var(--text-3)}
.ob-t{margin:0;font-size:22px;font-weight:720;letter-spacing:-.03em;line-height:1.3}
.ob-p{margin:6px 0 16px;font-size:14px;color:var(--text-2)}
.ob-t,.ob-p,.ob-sp,.ob-tg,.ob-sb{animation:obIn .38s cubic-bezier(.2,.8,.2,1) both}
.ob-p{animation-delay:40ms}.ob-sb{animation-delay:70ms}.ob-sp,.ob-tg{animation-delay:90ms}
@keyframes obIn{from{opacity:0;transform:translateY(8px)}}
.ob-sp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ob-sc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:98px;border-radius:18px;background:var(--surface-2);border:1.5px solid var(--line);font-size:14px;font-weight:620;color:var(--text-2);transition:transform .15s,border-color .2s,background .2s}
.ob-sc:active,.ob-tm:active{transform:scale(.96)}
.ob-si{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text);transition:background .2s,color .2s}
.ob-si svg{width:22px;height:22px}
.ob-sl{max-width:100%;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-sc.on{border-color:var(--primary);background:var(--primary-dim);color:var(--text)}
.ob-sc.on .ob-si{background:var(--primary);color:#fff}
.ob-ck{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;opacity:0;transform:scale(.5);transition:opacity .18s,transform .24s cubic-bezier(.3,1.5,.5,1)}
.ob-ck svg{width:10px;height:10px}
.on>.ob-ck{opacity:1;transform:none}
.ob-go{margin-top:18px;height:52px;font-size:16px}
.ob-go:disabled{opacity:.45}
.ob-sb.searchbar{position:static;margin:0 0 12px;height:46px;background:var(--surface-2)}
.ob-tg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:min(44dvh,380px);overflow-y:auto;overscroll-behavior:contain;padding:1px}
.ob-tm{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 11px;border-radius:16px;background:var(--surface-2);border:1.5px solid var(--line);min-width:0;transition:transform .15s,border-color .2s,background .2s}
.ob-tm .hm-cr{width:40px;height:40px;font-size:14px}
.ob-tm b{font-size:12.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.ob-tm.on{border-color:var(--primary);background:var(--primary-dim)}
.ob-tm.on b{color:var(--text)}
.ob-none{grid-column:1/-1;display:grid;gap:4px;padding:22px 12px;text-align:center;font-size:13px;color:var(--text-3)}
.ob-none b{color:var(--text-2);font-size:14px;font-weight:620}
@media (prefers-reduced-motion:reduce){.ins-hc,.ob-sc,.ob-tm,.ob-ck,.ob-dots i{transition:none}}
/* ==== /insight ==== */
/* ==== delight ==== */
/* 결과 축하, 불꽃 칩, 업적 갤러리, 레벨 업 (area:delight). 움직임은 transform/opacity 만. */
.dl-cv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}
/* 불꽃 칩 */
.dl-fls{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.dl-fls:empty{display:none}
.pd-stat .dl-fls.pd-fl{margin-top:10px}
.dl-fl{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px 0 7px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line-2);white-space:nowrap;max-width:100%}
.dl-fl>span{overflow:hidden;text-overflow:ellipsis}
.dl-fi{display:inline-flex;flex:none;width:15px;height:15px;color:var(--text-3)}
.dl-fi svg{width:100%;height:100%}
.dl-fl.win .dl-fi{color:#FF7A1A}
.dl-fl.att .dl-fi{color:var(--point)}
.dl-fl.hot{color:var(--text);border-color:rgba(255,122,26,.35);background:rgba(255,122,26,.1)}
.dl-fl.att.hot{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.1)}
.dl-fl.hot .dl-fi{transform-origin:50% 90%;animation:dl-flick 1.8s ease-in-out infinite}
.dl-fl.pop{animation:dl-pop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes dl-flick{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.13) rotate(4deg)}}
@keyframes dl-pop{0%{transform:scale(.82)}60%{transform:scale(1.16)}100%{transform:scale(1)}}
/* 결과 축하(전체 화면) */
.dl-cel{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + var(--safe-b,0px))}
.dl-cel-bg{position:absolute;inset:0;background:rgba(5,6,12,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease}
.dl-cel-card{position:relative;width:100%;max-width:360px;max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--bg-1);border:1px solid var(--line-2);border-radius:26px;padding:26px 18px 16px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45);opacity:0;transform:translateY(18px) scale(.92);transition:transform .5s cubic-bezier(.2,1.3,.35,1),opacity .25s ease}
.dl-cel.in .dl-cel-bg,.dl-cel.in .dl-cel-card{opacity:1}
.dl-cel.in .dl-cel-card{transform:none}
.dl-cel.out .dl-cel-bg,.dl-cel.out .dl-cel-card{opacity:0;transition-duration:.2s}
.dl-cel.out .dl-cel-card{transform:translateY(10px) scale(.97)}
.dl-cel-ic{position:relative;width:72px;height:72px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 34% 28%,#5CF0AE 0%,var(--up) 55%,#0A8F50 100%);box-shadow:0 10px 30px rgba(22,208,122,.35),inset 0 2px 5px rgba(255,255,255,.45)}
.dl-cel-ic svg{width:34px;height:34px}
.dl-cel-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--up);opacity:0}
.dl-cel.in .dl-cel-ring{animation:dl-ring 1.4s ease-out .15s 2}
@keyframes dl-ring{0%{opacity:.85;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
.dl-cel-h{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.dl-cel-amt{display:flex;flex-direction:column;align-items:center;margin:6px 0 2px}
.dl-cel-amt b{font-size:30px;font-weight:800;line-height:1.15;color:var(--up)}
.dl-cel-amt b.pt{font-size:18px;color:var(--point)}
.dl-cel-amt span{margin-top:2px;font-size:12px;color:var(--text-3)}
.dl-cel-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.dl-cel-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface-2);animation:dl-in .4s ease backwards;animation-delay:calc(.22s + var(--i) * 70ms)}
.dl-cel-tag{grid-column:1;font-size:11px;font-weight:700;color:var(--primary-2)}
.dl-cel-tt,.dl-cel-sub{grid-column:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-cel-tt{font-size:14px;font-weight:700}
.dl-cel-sub{font-size:12px;color:var(--text-2)}
.dl-cel-r{grid-column:2;grid-row:1/span 3;font-size:14px;font-weight:800;color:var(--up)}
.dl-cel-r.pt{color:var(--point)}
.dl-cel-more{display:flex;justify-content:center;flex-wrap:wrap;gap:0 8px;margin:8px 0 0;font-size:12px;color:var(--text-3)}
.dl-cel-more span+span::before{content:"·";margin-right:8px}
.dl-cel-acts{display:flex;gap:8px;margin-top:16px}
.dl-cel-acts .g-btn{flex:1;min-width:0}
.dl-cel-acts .g-btn svg{width:16px;height:16px}
@keyframes dl-in{from{opacity:0;transform:translateY(8px)}}
/* 메달(업적) */
.dl-bm{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none}
.dl-bg{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;isolation:isolate;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.dl-be{font-size:28px;line-height:1}
.dl-bd.on .dl-bg,.dl-bdd.on .dl-bg,.dl-mm .dl-bg{background:radial-gradient(circle at 32% 26%,#FFF6D6 0%,#FFD66B 24%,#F2A93B 60%,#B8741A 100%);box-shadow:inset 0 -3px 6px rgba(0,0,0,.22),inset 0 2px 4px rgba(255,255,255,.6),0 4px 14px rgba(242,169,59,.3)}
.dl-bd.on .dl-bg::after,.dl-bdd.on .dl-bg::after,.dl-mm .dl-bg::after{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-130%);animation:dl-sheen 3.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * 160ms)}
@keyframes dl-sheen{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.dl-bd.off .dl-be,.dl-bdd.off .dl-be{filter:grayscale(1);opacity:.35}
.dl-bl{position:absolute;right:-2px;bottom:-2px;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg-1);border:1px solid var(--line-2);color:var(--text-3)}
.dl-bl svg{width:11px;height:11px}
/* 업적 갤러리 */
.dl-bh-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dl-bh-k{font-size:13px;font-weight:600;color:var(--text-2)}
.dl-bh-t b{font-size:24px;font-weight:800}
.dl-bh-t small,.dl-me-n small{font-size:13px;font-weight:700;color:var(--text-3)}
.dl-bar{height:6px;margin-top:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.dl-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--up));transform-origin:0 50%}
.dl-bh .dl-fls{margin-top:12px}
.dl-bh-g{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;color:var(--text-2)}
.dl-sec{margin-top:18px}
.dl-sh{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 8px}
.dl-sh h3{margin:0;font-size:15px;font-weight:800}
.dl-sh span{font-size:12px;font-weight:700;color:var(--text-3)}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dl-bd{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:14px 6px 12px;border-radius:18px;background:var(--g-card,var(--surface));border:1px solid var(--g-card-line,var(--line));color:inherit;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;animation:dl-in .35s ease backwards;animation-delay:calc(var(--i) * 30ms);transition:transform .15s ease}
.dl-bd:active{transform:scale(.96)}
.dl-bn{max-width:100%;font-size:12.5px;font-weight:700;line-height:1.25;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dl-bd.off .dl-bn{color:var(--text-2)}
.dl-bs{font-size:11px;color:var(--text-3)}
.dl-bs.ok{color:var(--up-on-dim)}
/* 업적 한 개(시트) */
.dl-bdd{text-align:center;padding-top:4px}
.dl-bm.xl{width:96px;height:96px;margin:6px auto 12px}
.dl-bm.xl .dl-be{font-size:48px}
.dl-bm.xl .dl-bl{width:30px;height:30px}
.dl-bm.xl .dl-bl svg{width:14px;height:14px}
.dl-bdd-st{display:flex;justify-content:center;gap:6px;margin:-4px 0 14px;font-size:13px;font-weight:700;color:var(--text-3)}
.dl-bdd-st.ok{color:var(--up-on-dim)}
.dl-bdd-how{padding:12px 14px;border-radius:14px;background:var(--surface-2);text-align:left}
.dl-bdd-how .k{font-size:11.5px;font-weight:700;color:var(--text-3)}
.dl-bdd-how p{margin:4px 0 0;font-size:14px;font-weight:600}
.dl-bdd-p{display:block;margin-top:6px;font-size:12px;color:var(--text-3);text-align:right}
.dl-bdd .g-btn{margin-top:16px}
/* 프로필 업적 카드 */
.dl-me{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;color:inherit;text-decoration:none}
.dl-me-l{display:flex;flex-direction:column;gap:2px}
.dl-me-k{font-size:12px;font-weight:600;color:var(--text-2)}
.dl-me-n{font-size:20px;font-weight:800;line-height:1.1}
.dl-me-m{display:flex;justify-content:flex-end;gap:6px;min-width:0}
.dl-mm{position:relative;width:36px;height:36px;flex:none}
.dl-mm .dl-be{font-size:19px}
.dl-mm:nth-child(2) .dl-bg::after{animation-delay:.3s}
.dl-mm:nth-child(3) .dl-bg::after{animation-delay:.6s}
.dl-me-e{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-me .dl-fls{grid-column:1/-1}
/* 레벨 업 */
.dl-lv{text-align:center;padding-top:6px}
.dl-lv-medal{position:relative;display:flex;align-items:center;justify-content:center;gap:2px;width:112px;height:112px;margin:6px auto 12px;border-radius:50%;color:#fff;background:radial-gradient(circle at 32% 26%,var(--primary-2),var(--primary) 55%,var(--primary-3));box-shadow:0 12px 36px rgba(79,92,243,.45),inset 0 2px 6px rgba(255,255,255,.35)}
.dl-lv-glow{position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--primary-2);opacity:0;animation:dl-ring 1.6s ease-out .25s 2}
.dl-lv-k{margin-top:12px;font-size:16px;font-weight:800;opacity:.85}
.dl-lv-ns{position:relative;display:inline-block;min-width:30px;height:50px;overflow:hidden}
.dl-lv-ns b{display:block;font-size:44px;font-weight:800;line-height:50px}
.dl-lv-old{position:absolute;inset:0 0 auto 0;animation:dl-lvout .4s ease .35s forwards}
.dl-lv-new{opacity:0;transform:translateY(100%);animation:dl-lvin .55s cubic-bezier(.2,1.4,.4,1) .45s forwards}
@keyframes dl-lvout{to{opacity:0;transform:translateY(-100%)}}
@keyframes dl-lvin{to{opacity:1;transform:none}}
.dl-lv-h{margin:0;font-size:22px;font-weight:800}
.dl-lv-t{margin:4px 0 0;font-size:14px;font-weight:700;color:var(--point)}
.dl-lv-bar{height:8px;margin-top:16px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.dl-lv-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-2));transform-origin:0 50%;transform:scaleX(0);animation:dl-bar .9s ease .6s forwards}
@keyframes dl-bar{to{transform:scaleX(var(--p))}}
.dl-lv-x{margin:6px 0 0;font-size:12px;color:var(--text-3)}
.dl-lv .g-btn{margin-top:18px}
@media (prefers-reduced-motion:reduce){
  .dl-cel-bg,.dl-cel-card,.dl-bd{transition:none}
  .dl-cel-card{transform:none}
  .dl-cel-row,.dl-bd,.dl-fl.pop,.dl-fl.hot .dl-fi,.dl-cel-ring,.dl-lv-glow{animation:none}
  .dl-bd.on .dl-bg::after,.dl-bdd.on .dl-bg::after,.dl-mm .dl-bg::after{animation:none;display:none}
  .dl-lv-old{display:none}
  .dl-lv-new{opacity:1;transform:none;animation:none}
  .dl-lv-bar i{transform:scaleX(var(--p));animation:none}
}
/* ==== /delight ==== */
/* 예측 슬립 바는 챌린지 · 경기 화면에서만 (app.js applySlipHere) */
html:not(.slip-here) #slipbar{display:none!important}
/* 홈: 리그 머리와 그 경기들을 한 묶음으로 (운영자 2026-09-30, 은은하게). 리그 색(--lh)이 아주 옅게 깔린 판 */
.hm-grp{--lh:220;padding:6px 6px 7px;margin:0 0 14px;border-radius:22px;background:hsl(var(--lh) 70% 58% / .05);box-shadow:inset 0 0 0 1px hsl(var(--lh) 60% 62% / .10)}
.hm-grp.h0{--lh:222}.hm-grp.h1{--lh:158}.hm-grp.h2{--lh:268}.hm-grp.h3{--lh:26}.hm-grp.h4{--lh:338}.hm-grp.h5{--lh:192}.hm-grp.fav{--lh:44}.hm-grp.myteam{--lh:14}
[data-theme=light] .hm-grp{background:hsl(var(--lh) 70% 50% / .05);box-shadow:inset 0 0 0 1px hsl(var(--lh) 50% 45% / .10)}
.hm-grp>.hm-lg{margin:0 0 6px}
.hm-grp .hm-list{gap:6px}
.hm-grp .hm-card{border-radius:16px}

/* ==== area:matchinfo ==== 경기 화면: 정보 · 라인업 · 순위 · 쿼터 점수 (app.js area:matchinfo) */
.mi-tabs{margin-top:10px}
.mi-tabs button{padding:0 11px;font-size:14.5px}
.mi-pane{display:grid}
.mi-sec{margin-top:18px}
.mi-pane>.mi-sec:first-child{margin-top:4px}
.mi-skel{display:grid;gap:10px;margin-top:18px}
.mi-src{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px;font-size:11.5px;font-weight:500;color:var(--text-3)}
.mi-src.solo{margin:10px 2px 0}
.mi-src a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.bbx-half{margin-top:1px}
/* 농구 쿼터 점수 */
.mi-per{margin:10px 0 2px;padding:6px 8px 4px;border-radius:16px;background:var(--g-card,var(--surface));border:1px solid var(--g-card-line,var(--line));overflow-x:auto}
.mi-per table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;table-layout:fixed}
.mi-per th,.mi-per td{height:28px;text-align:center;font-size:13px;font-weight:600;padding:0}
.mi-per thead th{font-size:11.5px;font-weight:600;color:var(--text-3)}
.mi-per tbody th{width:74px;text-align:left;font-size:12.5px;font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-per thead th:first-child{width:74px}
.mi-per .t{font-weight:700;color:var(--text);border-left:1px solid var(--line-2)}
.mi-per .cur{color:var(--primary-on-dim);background:var(--primary-dim)}
/* 배율(읽기 전용) */
.mi-go{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600;color:var(--primary-on-dim);padding:6px 0 6px 8px;margin:-6px 0}
.mi-go svg{width:14px;height:14px}
.mi-odds{display:grid;gap:12px}
.mi-or{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:10px}
.mi-or+.mi-or{padding-top:12px;border-top:1px solid var(--line)}
.mi-ot{display:flex;flex-direction:column;gap:1px;min-width:0}
.mi-ot span{font-size:13px;font-weight:600;color:var(--text)}
.mi-ot small{font-size:11.5px;font-weight:600;color:var(--text-3)}
.mi-ocs{display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mi-ocs.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mi-oc{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;height:40px;padding:0 10px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.mi-oc .k{font-size:12px;font-weight:500;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mi-oc b{font-size:14.5px;font-weight:700;color:var(--text);flex:none}
/* 팀 비교 */
.mi-cmp{padding:12px 14px 12px}
.mi-ch{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding-bottom:10px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.mi-ct{display:flex;align-items:center;gap:7px;min-width:0}
.mi-ct.r{justify-content:flex-end}
.mi-ct .hm-cr{width:26px;height:26px;font-size:11px;flex:none}
.mi-ct b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-cvs{font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.04em}
.mi-cr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-height:38px;border-bottom:1px solid var(--line)}
.mi-cr:last-of-type{border-bottom:0}
.mi-ck{display:flex;flex-direction:column;align-items:center;gap:0;min-width:84px;text-align:center}
.mi-ck span{font-size:12px;font-weight:500;color:var(--text-3)}
.mi-ck small{font-size:10.5px;font-weight:500;color:var(--text-3);opacity:.8}
.mi-cv{font-size:14px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:0;display:flex}
.mi-cv.h{justify-content:flex-start}.mi-cv.a{justify-content:flex-end}
.mi-cv.b{color:var(--text);font-weight:700}
.mi-cv.h.b{color:var(--ins-h)}.mi-cv.a.b{color:var(--ins-a)}
.mi-fm{display:inline-flex;gap:3px}
.mi-fm i{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700}
.mi-fm i.W,.mi-stk.W{background:var(--up-dim);color:var(--up-on-dim)}
.mi-fm i.D,.mi-stk.D{background:var(--surface-3);color:var(--text-2)}
.mi-fm i.L,.mi-stk.L{background:var(--down-dim);color:var(--down-on-dim)}
.mi-fm i:first-child{box-shadow:inset 0 0 0 1.5px currentColor}
.mi-stk{display:inline-block;padding:2px 7px;border-radius:7px;font-size:12px;font-weight:700}
/* 상대 전적 */
.mi-h2l{display:grid;margin-top:6px}
.mi-h2r{display:grid;gap:5px;padding:10px 0 0;margin-top:10px;border-top:1px solid var(--line)}
.mi-h2m{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:500;color:var(--text-3);min-width:0}
.mi-h2lg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-h2g{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.mi-h2t{display:flex;align-items:center;gap:5px;min-width:0;font-size:13.5px;color:var(--text-2)}
.mi-h2t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-h2t.r{justify-content:flex-end}
.mi-h2t.w{color:var(--text)}.mi-h2t.w b{font-weight:700}
.mi-hm{width:13px;height:13px;flex:none;color:var(--text-3)}
.mi-h2c{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:600;color:var(--text-2)}
.mi-h2c i{font-style:normal;color:var(--text-3)}
.mi-h2c b.w{color:var(--text);font-weight:700}
.mi-h2none{margin-top:18px}
/* 빈 상태 */
.mi-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:32px 20px;margin-top:6px;border-radius:18px;background:var(--g-card,var(--surface));border:1px solid var(--g-card-line,var(--line));color:var(--text-3)}
.mi-empty svg{width:26px;height:26px;margin-bottom:4px;color:var(--text-3)}
.mi-empty b{font-size:15px;font-weight:600;color:var(--text)}
.mi-empty span{font-size:12.5px;font-weight:500;word-break:keep-all}
/* 라인업 */
.mi-lu{display:grid;gap:10px;margin-top:6px}
.mi-lt{padding:12px 14px}
.mi-lth{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mi-lth .hm-cr{width:28px;height:28px;font-size:11px}
.mi-lth b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-pit{display:flex;align-items:center;gap:7px;margin-top:10px;padding:9px 11px;border-radius:12px;background:var(--primary-dim)}
.mi-pk{font-size:11.5px;font-weight:600;color:var(--primary-on-dim);flex:none}
.mi-pr{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--surface);color:var(--text-2);flex:none}
.mi-pit b{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-pit small,.mi-ll small{font-size:11.5px;font-weight:500;color:var(--text-3);margin-left:auto;flex:none}
.mi-lh{margin:12px 0 4px;font-size:11.5px;font-weight:600;color:var(--text-3)}
.mi-ll{list-style:none;margin:0;padding:0;display:grid}
.mi-ll li{display:flex;align-items:center;gap:9px;min-height:36px;border-bottom:1px solid var(--line)}
.mi-ll li:last-child{border-bottom:0}
.mi-lo{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--text-2);flex:none}
.mi-lp{width:30px;font-size:11.5px;font-weight:600;color:var(--text-3);flex:none}
.mi-ll b{font-size:14px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-lnone{margin-top:12px;font-size:12.5px;font-weight:500;color:var(--text-3)}
.mi-bench{margin-top:8px;border-top:1px solid var(--line)}
.mi-bench summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px;min-height:40px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.mi-bench summary::-webkit-details-marker{display:none}
.mi-bench summary::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.mi-bench[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.mi-ll.sub .mi-lo{background:transparent}
/* 순위 */
.mi-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 10px}
.mi-sht{display:flex;align-items:center;gap:7px;min-width:0}
.mi-sht b{font-size:16px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-sht span{font-size:13px;font-weight:600;color:var(--text-3);flex:none}
.mi-when{font-size:11.5px;font-weight:500;color:var(--text-3);flex:none}
.mi-sgn{margin:14px 2px 6px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.mi-stw{overflow:auto;max-height:70vh;border-radius:16px;background:var(--g-card,var(--surface));border:1px solid var(--g-card-line,var(--line));overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.mi-st{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;min-width:100%}
.mi-st th,.mi-st td{height:40px;padding:0 7px;text-align:center;font-size:13px;font-weight:500;white-space:nowrap;border-bottom:1px solid var(--line)}
.mi-st tbody tr:last-child td{border-bottom:0}
.mi-st thead th{position:sticky;top:0;z-index:2;height:34px;font-size:11.5px;font-weight:600;color:var(--text-3);background:var(--g-card,var(--surface))}
.mi-st .p{width:34px;padding-left:10px;color:var(--text-3);font-weight:600}
.mi-st .tm{text-align:left;position:sticky;left:0;z-index:1;background:var(--g-card,var(--surface));min-width:118px;max-width:150px}
.mi-st thead .tm{z-index:3}
.mi-st td.tm>span{display:flex;align-items:center;gap:7px;min-width:0}
.mi-st td.tm img,.mi-st td.tm .hm-cr{width:22px;height:22px;flex:none;object-fit:contain;font-size:9.5px}
.mi-st td.tm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
.mi-st .pts{font-weight:700;color:var(--text)}
.mi-st thead .pts{color:var(--text-2)}
.mi-st tr.me td{background:color-mix(in srgb,var(--rowc) 12%,var(--g-card,var(--surface)))}
.mi-st tr.me td:first-child{box-shadow:inset 3px 0 0 var(--rowc);color:var(--rowc)}
.mi-st tr.me.h{--rowc:var(--ins-h)}.mi-st tr.me.a{--rowc:var(--ins-a)}
.mi-st tr.me b{color:var(--text)}
/* 픽 탭 */
.mi-pkh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.mi-pkw svg{width:15px;height:15px}
@media (min-width:960px){.mi-lu{grid-template-columns:1fr 1fr;align-items:start}}
@media (prefers-reduced-motion:reduce){.mi-bench summary::after{transition:none}}
/* ==== /area:matchinfo ==== */

/* ==== area:picknew ==== 픽 작성(#/pick/new), 경기 선택 시트, 픽 사진과 크게 보기, 제목 강조 (app.js area:picknew) */
:root{--pn-accent:#F5A524;--pn-mark:rgba(245,165,36,.42);--pn-solid:#15161B;--pn-bar-h:52px}
[data-theme=light]{--pn-accent:#A85600;--pn-mark:rgba(255,196,0,.5);--pn-solid:#F9FAFC}
.pn-view [hidden],.pn-bar [hidden],.pn-ms [hidden],.pn-top [hidden]{display:none!important}
.pn-mcard,.pn-mr,.pn-qm{--pk:#5B7CFA}
.pn-mcard.h1,.pn-mr.h1,.pn-qm.h1{--pk:#9A6CF2}.pn-mcard.h2,.pn-mr.h2,.pn-qm.h2{--pk:#1AA596}.pn-mcard.h3,.pn-mr.h3,.pn-qm.h3{--pk:#E39A3A}
.pn-mcard.h4,.pn-mr.h4,.pn-qm.h4{--pk:#E35F7F}.pn-mcard.h5,.pn-mr.h5,.pn-qm.h5{--pk:#5FAE45}

/* 제목 강조: 카드(.pk-t), 상세(.pk-dt), 입력칸, 스타일 칩이 같은 클래스를 쓴다 */
.pkts-grad{background:linear-gradient(90deg,var(--primary-2),var(--fx-title));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pkts-mark{text-decoration:underline;text-decoration-color:var(--pn-mark);text-decoration-thickness:.45em;text-underline-offset:-.3em;text-decoration-skip-ink:none}
.pkts-accent{color:var(--pn-accent)}
.pkts-under{text-decoration:underline wavy var(--primary-2);text-decoration-thickness:1.5px;text-underline-offset:.26em;text-decoration-skip-ink:none}
.pk-t.pkts-under{padding-bottom:.2em}
/* 입력칸은 background-clip:text 를 그리지 못하는 브라우저가 있어(글자가 사라진다) 첫 색 하나로 보여 준다. 칩과 미리보기는 진짜 그라데이션. */
.pn-ti.pkts-grad{background:none;color:var(--primary-2);-webkit-text-fill-color:var(--primary-2)}

/* 머리글: 뒤로 · 픽 작성 · 미리보기 · 등록 */
:root .topbar.hr-top.sub.pn-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.pn-top .hr-back{justify-self:start}
.pn-acts{justify-self:end;display:flex;align-items:center;gap:2px}
.pn-pv{height:34px;padding:0 10px;border-radius:var(--pill);font-size:14.5px;font-weight:600;color:var(--text-2);transition:background-color .2s var(--g-ease)}
.pn-pv:active{background:var(--surface-2)}
.pn-go{position:relative;height:34px;padding:0 16px;border-radius:var(--pill);font-size:14.5px;font-weight:680;background:var(--primary);color:#fff;transition:background-color .2s var(--g-ease),color .2s var(--g-ease),transform .2s var(--g-ease)}
.pn-go[aria-disabled=true]{background:var(--surface-3);color:var(--text-3)}
.pn-go:active{transform:scale(.95)}
.pn-go.pk-wait{color:transparent}
.pn-go.pk-wait::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;animation:pk-spin .7s linear infinite}
.pn-pchead{display:none}
@media (min-width:960px){
  .pn-pchead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 6px}
  .pn-pchead h1{margin:0;font-size:22px;font-weight:680;letter-spacing:-.02em}
}

/* 화면 */
html.pn-on .nav,html.pn-on .slipbar,html.pn-on .g-fab{display:none!important}
html.pn-on .shell{padding-bottom:calc(var(--pn-bar-h) + var(--safe-b) + 24px)}
html.pn-on{scroll-padding-bottom:calc(var(--pn-bar-h) + 28px)}
html.pn-on .toast{bottom:calc(var(--pn-bar-h) + var(--safe-b) + 14px)!important}
.pn-view{display:grid;grid-template-columns:minmax(0,1fr)}
.pn-sec{margin-top:18px;min-width:0}
.pn-view>.pn-sec:first-of-type{margin-top:6px}
.pn-h{display:flex;align-items:baseline;gap:6px;margin:0 4px 8px;font-size:13px;font-weight:600;color:var(--text-3);letter-spacing:0}
.pn-h em{font-style:normal;font-size:12px;font-weight:500}
.pn-card{border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2);overflow:hidden}
.pn-err{margin:7px 6px 0;font-size:12.5px;font-weight:600;color:var(--danger)}
.pn-err.shake{animation:pn-shake .36s var(--g-ease)}
.pn-err-s{margin:16px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--down-dim);text-align:center}
.pn-flash{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--point) 14%,transparent);font-size:13px;font-weight:560;line-height:1.45}
.pn-other{display:flex;align-items:center;gap:10px;margin:6px 0 0;padding:10px 6px 10px 12px;border-radius:var(--g-r);background:var(--primary-dim)}
.pn-oi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;flex:none}
.pn-oi svg{width:15px;height:15px}
.pn-ot{flex:1;min-width:0;display:grid;gap:1px}
.pn-ot b{font-size:14px;font-weight:640}
.pn-ot span{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-ox{width:32px;height:32px;display:grid;place-items:center;color:var(--text-2);flex:none}
.pn-ox svg{width:14px;height:14px}

/* 경기 */
.pn-mpick{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:var(--g-r);background:var(--surface);border:1.5px dashed color-mix(in srgb,var(--primary) 45%,var(--line-2));text-align:left;transition:transform .2s var(--g-ease)}
.pn-mpick:active{transform:scale(.985)}
.pn-mpi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary-on-dim);flex:none}
.pn-mpi svg{width:21px;height:21px}
.pn-mpt{flex:1;min-width:0;display:grid;gap:2px}
.pn-mpt b{font-size:16px;font-weight:660}
.pn-mpt span{font-size:12.5px;font-weight:500;color:var(--text-3)}
.pn-mpick>svg{width:16px;height:16px;color:var(--text-3);flex:none}
.pn-mcard{display:grid;gap:12px;padding:12px 12px 16px 14px;border-radius:var(--g-r);border:1px solid color-mix(in srgb,var(--pk) 26%,var(--line-2));background:color-mix(in srgb,var(--pk) 9%,var(--surface))}
[data-theme=light] .pn-mcard{background:color-mix(in srgb,var(--pk) 6%,#fff)}
.pn-mtop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.pn-mlg{display:flex;align-items:center;gap:7px;min-width:0}
.pn-mlg b{font-weight:640;color:color-mix(in srgb,var(--pk) 70%,var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-mlg .flag-i{width:18px;height:13.5px;border-radius:3px;object-fit:cover;flex:none}
.pn-mlg .flag-i.globe svg,.pn-lgf .globe svg{width:16px;height:16px;color:var(--text-3)}
.pn-mchg{flex:none;height:30px;padding:0 13px;border-radius:var(--pill);background:color-mix(in srgb,var(--pk) 16%,transparent);color:color-mix(in srgb,var(--pk) 70%,var(--text));font-size:13px;font-weight:640;transition:transform .2s var(--g-ease)}
.pn-mchg:active{transform:scale(.94)}
.pn-mvs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px}
.pn-mt{display:grid;justify-items:center;gap:7px;min-width:0;text-align:center}
.pn-mt .pk-crest{width:40px;height:40px;font-size:16px}
.pn-mt b{max-width:100%;font-size:14.5px;font-weight:640;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.pn-mc{display:grid;justify-items:center;gap:3px;min-width:64px;padding-top:6px}
.pn-mc b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.pn-mc i{font-style:normal;font-size:12px;font-weight:600;color:var(--text-3)}

/* 예측 결과 */
.pn-vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.pn-vs.three{grid-template-columns:1fr .8fr 1fr}
.pn-v{position:relative;min-width:0;display:grid;justify-items:center;align-content:center;gap:5px;min-height:92px;padding:12px 6px 10px;border-radius:var(--g-r-sm);background:var(--surface-2);border:1.5px solid transparent;color:var(--text-2);text-align:center;transition:transform .2s var(--g-ease),background-color .2s var(--g-ease),border-color .2s var(--g-ease)}
.pn-v .pk-crest{width:30px;height:30px;font-size:12px}
.pn-vn{max-width:100%;font-size:13.5px;font-weight:640;line-height:1.25;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-vw{font-size:12px;font-weight:600;color:var(--text-3)}
.pn-v.on{background:var(--primary-dim);border-color:var(--primary)}
.pn-v.on .pn-vw{color:var(--primary-on-dim)}
.pn-v.on::after{content:"";position:absolute;top:7px;right:7px;width:17px;height:17px;border-radius:50%;background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.pn-v:active{transform:scale(.96)}
.pn-v:disabled{opacity:.5}
.pn-sadd{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 14px;border-top:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--primary-on-dim);text-align:left}
.pn-sadd svg{width:16px;height:16px}
.pn-sadd em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--text-3)}
.pn-score{border-top:1px solid var(--line);padding:10px 12px 14px}
.pn-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.pn-sx{padding:4px 6px;font-size:13px;font-weight:600;color:var(--text-3)}
.pn-sg{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:6px}
.pn-st{display:grid;justify-items:center;gap:6px;min-width:0}
.pn-stn{max-width:100%;font-size:12px;font-weight:600;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-stc{display:flex;align-items:center;gap:4px}
.pn-sb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--text);transition:transform .15s var(--g-ease)}
.pn-sb svg{width:16px;height:16px}
.pn-sb:active{transform:scale(.9)}
.pn-stc input{width:48px;height:44px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);text-align:center;font-size:22px;font-weight:700;color:var(--text);outline:none;transition:border-color .2s var(--g-ease)}
.pn-stc input:focus{border-color:var(--primary)}
.pn-sc{font-style:normal;font-size:20px;font-weight:700;color:var(--text-3);padding-bottom:9px}

/* 제목과 내용 */
.pn-tf{display:flex;align-items:center;gap:6px;padding:2px 6px 0 14px}
.pn-ti{flex:1;min-width:0;height:50px;border:0;background:transparent;outline:none;font-size:17px;font-weight:660;color:var(--text);caret-color:var(--primary-2)}
.pn-ti::placeholder{color:var(--text-3);-webkit-text-fill-color:var(--text-3);font-weight:500}
.pn-pal{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);flex:none;transition:background-color .2s var(--g-ease),color .2s var(--g-ease)}
.pn-pal svg{width:21px;height:21px}
.pn-pal.on{color:var(--fx-title)}
.pn-pal[aria-expanded=true]{background:var(--surface-2)}
.pn-styles{display:flex;gap:6px;overflow-x:auto;padding:2px 12px 10px;scrollbar-width:none}
.pn-styles::-webkit-scrollbar{display:none}
.pn-sty{flex:none;min-width:62px;display:grid;justify-items:center;gap:2px;padding:7px 8px 6px;border-radius:12px;background:var(--surface-2);border:1.5px solid transparent;transition:border-color .2s var(--g-ease),background-color .2s var(--g-ease)}
.pn-sty b{font-size:18px;font-weight:700;line-height:1.25;color:var(--text)}
.pn-sty span{font-size:11.5px;font-weight:600;color:var(--text-3)}
.pn-sty.on{border-color:var(--primary);background:var(--primary-dim)}
.pn-tmeta{display:flex;justify-content:space-between;gap:10px;padding:7px 14px 9px;border-top:1px solid var(--line);font-size:12px;font-weight:500;color:var(--text-3)}
.pn-tn.low{color:var(--danger)}
.pn-bi{display:block;width:100%;min-height:150px;border:0;background:transparent;outline:none;resize:none;overflow:hidden;padding:14px 14px 8px;font-size:16px;line-height:1.7;font-weight:500;color:var(--text)}
.pn-bi::placeholder{color:var(--text-3)}
.pn-hints{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 12px;scrollbar-width:none}
.pn-hints::-webkit-scrollbar{display:none}
.pn-hint{flex:none;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px 0 9px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text-2);transition:transform .2s var(--g-ease)}
.pn-hint svg{width:12px;height:12px;color:var(--text-3)}
.pn-hint:active{transform:scale(.95)}

/* 사진 */
.pn-icard{padding:12px}
.pn-imgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pn-th{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface-2);touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .2s var(--g-ease),box-shadow .2s var(--g-ease)}
.pn-th img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pn-th.busy img{opacity:.5}
.pn-th.drag{transform:scale(1.07);box-shadow:0 10px 24px rgba(0,0,0,.35);z-index:2}
.pn-spin{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:2.5px solid #fff;border-right-color:transparent;animation:pk-spin .7s linear infinite}
.pn-cover{position:absolute;left:5px;bottom:5px;height:20px;padding:0 7px;border-radius:var(--pill);display:grid;place-items:center;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:640}
.pn-thx{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.62);color:#fff}
.pn-thx::before{content:"";position:absolute;inset:-7px}
.pn-thx svg{width:13px;height:13px}
.pn-add{display:grid;place-content:center;justify-items:center;gap:4px;border:1.5px dashed var(--line-2);background:transparent;color:var(--text-2);font-size:12px;font-weight:600}
.pn-add svg{width:22px;height:22px}
.pn-note{margin:10px 2px 0;font-size:12px;font-weight:500;color:var(--text-3)}

/* 아래 */
.pn-foot{display:grid;justify-items:center;gap:8px;margin:22px 0 6px;text-align:center}
.pn-rule{max-width:310px;margin:0;font-size:12px;font-weight:500;line-height:1.5;color:var(--text-3);word-break:keep-all}
.pn-reset{padding:6px;font-size:13px;font-weight:600;color:var(--text-3);text-decoration:underline;text-underline-offset:3px}

/* 키보드 위 도구 막대 */
.pn-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:4px;min-height:var(--pn-bar-h);padding:6px 10px calc(6px + var(--safe-b));background:var(--g-tint);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-top:1px solid var(--g-stroke);box-shadow:inset 0 1px 0 var(--g-hl)}
.pn-bar.kb{padding-bottom:6px}
.pn-bt{height:40px;min-width:40px;padding:0 10px;border-radius:var(--pill);display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text);font-size:13px;font-weight:640;transition:background-color .2s var(--g-ease),transform .2s var(--g-ease)}
.pn-bt svg{width:22px;height:22px}
.pn-bt:active{transform:scale(.94);background:var(--surface-2)}
.pn-saved{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.pn-saved svg{width:12px;height:12px;color:var(--up)}
.pn-saved.pop{animation:pn-pop .5s var(--g-ease)}
.pn-cnt{margin-left:auto;display:inline-flex;align-items:center;gap:3px;padding:0 6px;font-size:13px;font-weight:640;color:var(--text-2);white-space:nowrap}
.pn-cnt i{font-style:normal;font-weight:560;color:var(--text-3)}
.pn-cnt.ok{color:var(--up)}
.pn-cnt svg{width:13px;height:13px}
.pn-kbd{display:none}
.pn-bar.kb .pn-kbd{display:inline-flex}
@media (prefers-reduced-transparency:reduce){.pn-bar{background:var(--bg-1);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 경기 선택 시트 */
.sheet.pn-mssheet{height:86dvh;padding-top:10px;padding-bottom:0}
.pn-ms{display:flex;flex-direction:column;min-height:calc(86dvh - 32px)}
.pn-ms-top{position:sticky;top:0;z-index:3;margin:0 -18px;padding:0 18px 8px;background:var(--pn-solid)}
.pn-ms-hd{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px}
.pn-ms-hd .sh-t{margin:0;font-size:17px;text-align:center}
.pn-ms-back{position:absolute;left:-8px;top:0}
.pn-ms-q{display:flex;align-items:center;gap:8px;height:42px;margin-top:8px;padding:0 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.pn-ms-q svg{width:17px;height:17px;color:var(--text-3);flex:none}
.pn-ms-q input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font-size:16px;color:var(--text)}
.pn-ms-q input::placeholder{color:var(--text-3)}
.pn-crs{display:flex;align-items:center;gap:3px;margin-top:10px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.pn-crs::-webkit-scrollbar{display:none}
.pn-crs i{font-style:normal;font-size:13px;color:var(--text-3)}
.pn-cr{flex:none;max-width:38%;height:28px;padding:0 10px;border-radius:var(--pill);font-size:12.5px;font-weight:600;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-cr.done{color:var(--text);background:var(--surface-2)}
.pn-cr.on{color:var(--primary-on-dim);background:var(--primary-dim)}
.pn-cr:disabled{opacity:.55}
.pn-ms-b{flex:1;padding:8px 0 14px}
.pn-in-f{animation:pn-in-f .26s var(--g-ease)}
.pn-in-b{animation:pn-in-b .26s var(--g-ease)}
.pn-ms-f{position:sticky;bottom:0;z-index:3;margin:0 -18px;padding:10px 18px calc(12px + var(--safe-b));background:var(--pn-solid);border-top:1px solid var(--line)}
.sheet .pn-ms-f .g-btn.block{margin-top:0;height:50px;font-size:16px}
.pn-msel{display:flex;align-items:center;gap:6px;min-width:0;margin:0 2px 8px;font-size:13px;color:var(--text-2)}
.pn-msel .num{flex:none;font-weight:640;color:var(--primary-on-dim)}
.pn-msel b{min-width:0;font-weight:640;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-msel i{flex:none;font-style:normal;font-size:11px;font-weight:700;color:var(--text-3)}
.pn-ms .pk-day{position:static;background:none;padding:12px 2px 6px}
.pn-qk{margin:2px 0 14px}
.pn-qkl{margin:0 2px 8px;font-size:12.5px;font-weight:640;color:var(--text-3)}
.pn-qks{display:flex;gap:8px;margin:0 -18px;padding:0 18px 2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.pn-qks::-webkit-scrollbar{display:none}
.pn-qm{flex:none;width:152px;display:grid;gap:6px;padding:10px 11px;border-radius:14px;background:color-mix(in srgb,var(--pk) 8%,var(--surface-2));border:1.5px solid transparent;text-align:left;scroll-snap-align:start}
.pn-qm.on{border-color:var(--primary)}
.pn-qmw{font-size:11.5px;font-weight:640;color:var(--text-3)}
.pn-qmt{display:flex;align-items:center;gap:7px;min-width:0}
.pn-qmt .pk-crest{width:20px;height:20px;font-size:9px}
.pn-qmt b{min-width:0;font-size:13.5px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-days{display:flex;gap:6px;margin:0 -18px 12px;padding:0 18px 2px;overflow-x:auto;scrollbar-width:none}
.pn-days::-webkit-scrollbar{display:none}
.pn-day{flex:none;height:34px;padding:0 13px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:620;color:var(--text);white-space:nowrap;transition:transform .2s var(--g-ease),background-color .2s var(--g-ease)}
.pn-day:active{transform:scale(.95)}
.pn-day.on{background:var(--primary);border-color:transparent;color:#fff}
.pn-cal .calg .cd{height:40px}
.pn-cal .calh button:disabled{opacity:.3}
.pn-calnote{display:flex;align-items:center;gap:7px;margin:12px 2px 0;font-size:12px;font-weight:500;color:var(--text-3)}
.pn-calnote i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--primary-2)}
.pn-sports{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn-sp{display:flex;align-items:center;gap:10px;min-height:58px;padding:0 12px;border-radius:14px;background:var(--surface-2);border:1.5px solid transparent;text-align:left;transition:border-color .2s var(--g-ease),background-color .2s var(--g-ease),transform .2s var(--g-ease)}
.pn-sp:active{transform:scale(.97)}
.pn-spi{font-size:22px;line-height:1}
.pn-sp b{flex:1;font-size:15px;font-weight:640}
.pn-sp.on{border-color:var(--primary);background:var(--primary-dim)}
.pn-rad{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);transition:border-width .2s var(--g-ease),border-color .2s var(--g-ease)}
.on>.pn-rad{border:6px solid var(--primary)}
.pn-lgs{display:grid}
.pn-lg{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:8px 4px;text-align:left;border-bottom:1px solid var(--line);border-radius:0;transition:background-color .15s var(--g-ease)}
.pn-lg:last-child{border-bottom:0}
.pn-lg:active{background:var(--surface-2)}
.pn-lgf{flex:none;width:28px;display:grid;place-items:center}
.pn-lgf .flag-i{width:24px;height:18px;border-radius:3px;object-fit:cover}
.pn-lgt{flex:1;min-width:0;display:grid;gap:1px}
.pn-lgc{font-size:11.5px;font-weight:600;color:var(--text-3)}
.pn-lgt b{font-size:15px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lgs-f{display:grid;place-items:center}
.pn-lgs-f svg{width:14px;height:14px;color:var(--gold)}
.pn-lgtm{font-size:12.5px;font-weight:600;color:var(--text-3)}
.pn-lg>svg{flex:none;width:14px;height:14px;color:var(--text-3)}
.pn-mlist{display:grid;gap:6px}
.pn-mr{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1.5px solid transparent;text-align:left;transition:border-color .2s var(--g-ease),background-color .2s var(--g-ease)}
.pn-mr.on{border-color:var(--primary);background:var(--primary-dim)}
.pn-mr:disabled{opacity:.5}
.pn-mrt{flex:none;width:44px;font-size:14.5px;font-weight:680}
.pn-mrv{flex:1;min-width:0;display:grid;gap:5px}
.pn-mrl{font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--pk) 70%,var(--text));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mrs{display:flex;align-items:center;gap:8px;min-width:0}
.pn-mrs .pk-crest{width:22px;height:22px;font-size:10px}
.pn-mrs b{min-width:0;font-size:14.5px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mrx{flex:none;padding:3px 8px;border-radius:var(--pill);background:var(--surface-3);font-size:11.5px;font-weight:640;color:var(--text-3)}

/* 미리보기 시트 */
.pn-pvl{margin:14px 2px 8px;font-size:12.5px;font-weight:640;color:var(--text-3)}
.pn-pvl:first-of-type{margin-top:6px}
.pn-pvc{pointer-events:none}
.pn-pvd .pk-detail{padding:14px;border-radius:var(--g-r);background:var(--surface);border:1px solid var(--line-2)}
.pn-pvd .pk-box{pointer-events:none}
.sheet .g-btn.block.pn-pvgo{margin-top:16px;height:50px}
.pn-ph,.pn-none{color:var(--text-3)}

/* 픽 카드의 사진 표시, 상세의 사진 묶음 */
.pk-top .pn-cimg{display:inline-grid;place-items:center;margin:0 auto 0 -4px;color:var(--text-3)}
.pn-cimg svg{width:14px;height:14px}
.pn-imgs{display:grid;gap:4px;margin:6px 0 2px;border-radius:16px;overflow:hidden}
.pn-imgs.n1{grid-template-columns:1fr}
.pn-imgs.n1 .pn-im{aspect-ratio:4/3;max-height:440px}
.pn-imgs.n2,.pn-imgs.n4{grid-template-columns:1fr 1fr}
.pn-imgs.n2 .pn-im{aspect-ratio:1}
.pn-imgs.n4 .pn-im{aspect-ratio:4/3}
.pn-imgs.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
.pn-imgs.n3 .pn-im:first-child{grid-row:1 / span 2}
.pn-im{display:block;min-height:0;padding:0;overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.pn-im img{display:block;width:100%;height:100%;object-fit:cover}

/* 크게 보기 */
.pn-lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);opacity:0;transition:opacity .2s var(--g-ease)}
.pn-lb.on{opacity:1}
.pn-lb-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.pn-lb-track::-webkit-scrollbar{display:none}
.pn-lb-s{flex:none;width:100%;height:100%;display:grid;place-items:center;padding:calc(58px + env(safe-area-inset-top,0px)) 0 calc(24px + var(--safe-b));scroll-snap-align:center;scroll-snap-stop:always}
.pn-lb-s img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.pn-lb-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 18px;color:#fff;pointer-events:none}
.pn-lb-top>*{pointer-events:auto}
.pn-lb-n{font-size:14px;font-weight:640;opacity:.85}
.pn-lb-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.pn-lb-x svg{width:18px;height:18px}
.pn-lb-d{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:none;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.pn-lb-d.p{left:16px}
.pn-lb-d.n{right:16px}
.pn-lb-d svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.pn-lb-d{display:grid}}

@keyframes pn-in-f{from{opacity:0;transform:translateX(18px)}}
@keyframes pn-in-b{from{opacity:0;transform:translateX(-18px)}}
@keyframes pn-pop{0%{opacity:.3;transform:scale(.92)}60%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes pn-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  .pn-in-f,.pn-in-b,.pn-saved.pop,.pn-err.shake{animation:none}
  .pn-lb,.pn-v,.pn-th,.pn-sp,.pn-mr,.pn-go,.pn-hint{transition:none}
}
/* ==== /area:picknew ==== */
/* ==== 화면별 뼈대 (app.js skelHtml) ==== 실제 화면과 같은 자리 · 같은 높이 */
.sk-page{display:block}
.skb{display:block;flex:0 1 auto;min-width:0}
.skr{display:flex;gap:8px;align-items:center}
.skr>.skb[style*="width:100%"]{flex:1 1 0}
.skt{display:flex;flex-direction:column;align-items:center;gap:7px}
.skcard{display:block;padding:14px;border-radius:20px;margin-top:10px;animation:none}
.skcard::after{display:none}
.skcard .skb{background:var(--surface-2);border:0}
.skgrp{margin-top:12px;padding:6px;border-radius:22px;background:hsl(220 70% 58% / .04);box-shadow:inset 0 0 0 1px var(--line)}
.skgrp>.skb{margin-bottom:6px}
.skgrp .skcard{margin-top:6px;border-radius:16px}
.sk-page>.skr+.skr{margin-top:10px}
/* 아래 메뉴 독: 어두운 테마에서 너무 밝아 싸 보였다 (운영자 2026-10-01). 유리는 두고 바탕만 짙게 */
:root:not([data-theme="light"]) .nav{background:rgba(8,9,12,.78);border-color:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.55)}
/* 푸터 안내: 상자 없이 가운데 한 줄 (운영자 2026-10-01) */
.foot .fnote{background:none;border:0;box-shadow:none;padding:0;margin:0 0 10px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--text-3)}

/* ==== area:comm2 ==== */
/* 커뮤니티 재미 요소 (2026-10-01): 오늘의 질문, 지금 뜨는 글, 오늘 활동, 글 반응, 투표, 답글, 당겨서 새로 고침.
 * 움직임은 transform · opacity 만. 동작 줄이기를 켜면 맨 아래에서 전부 멈춘다. */
:root{--c2-fire:#FF8A3D;--c2-fire-dim:rgba(255,138,61,.14);--c2-q:rgba(99,112,255,.10)}
:root[data-theme="light"]{--c2-fire:#C2510A;--c2-fire-dim:rgba(217,86,11,.10);--c2-q:rgba(79,92,243,.07)}
/* 오늘의 질문 */
.c2-q{margin:0 0 10px;padding:13px 14px 12px;border-radius:var(--g-r);background:linear-gradient(var(--c2-q),var(--c2-q)),var(--surface);border:1px solid var(--line-2)}
.c2-qh{display:flex;align-items:center;gap:8px;min-height:26px}
.c2-qk{font-size:12px;font-weight:680;color:var(--primary-on-dim);letter-spacing:-.005em}
.c2-qt{margin:6px 0 11px;font-size:17px;font-weight:660;line-height:1.38;letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere}
.c2-qa{display:flex;align-items:center;gap:10px;min-height:34px}
.c2-qp{font-size:12.5px;font-weight:680;color:var(--point)}
.c2-done{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 13px;border-radius:var(--pill);background:var(--up-dim);color:var(--up-on-dim);font-size:13.5px;font-weight:640}
.c2-done svg{width:14px;height:14px}
.c2-qlink{margin-left:auto;display:inline-flex;align-items:center;gap:2px;height:34px;padding:0 2px 0 8px;font-size:13px;font-weight:640;color:var(--text-2)}
.c2-qlink svg{width:14px;height:14px;color:var(--text-3)}
/* 오늘 활동 칩 */
.c2-act{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--text-2)}
.c2-act b{font-weight:640}
.c2-act .num{font-weight:680;color:var(--text)}
.c2-act .d{display:inline-flex;gap:3px}
.c2-act .d i{width:6px;height:6px;border-radius:50%;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.c2-act .d i.on{background:var(--up);box-shadow:none}
.c2-act.full{background:var(--up-dim);border-color:transparent}
.c2-act.ready{animation:c2Ready 1.8s var(--g-ease) infinite}
@keyframes c2Ready{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* 지금 뜨는 글 */
.c2-hot{margin:2px 0 10px}
.c2-hh{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.c2-hh h2{margin:0;font-size:15px;font-weight:680;letter-spacing:-.015em}
.c2-fl{display:grid;color:var(--c2-fire)}.c2-fl svg{width:16px;height:16px}
.c2-rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;scroll-padding:0 16px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.c2-rail::-webkit-scrollbar{display:none}
.c2-hc{flex:none;width:212px;scroll-snap-align:start;display:grid;grid-template-rows:auto auto auto;align-content:start;gap:8px;padding:11px 12px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);position:relative;min-width:0}
.c2-hc:active{background:var(--surface-2)}
.c2-rank{position:absolute;top:9px;right:11px;font-family:"Saira Condensed",var(--font);font-size:15px;font-weight:680;color:var(--text-3)}
.c2-hc:first-child .c2-rank{color:var(--c2-fire)}
.c2-ht{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:18px;font-size:14.5px;font-weight:620;line-height:1.38;color:var(--text);overflow-wrap:anywhere}
.c2-hm{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:600;color:var(--text-2)}
.c2-hm .avatar{width:20px;height:20px;font-size:9px}.c2-hm .avatar .chk{display:none}
.c2-hm bdi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c2-hs{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-3);min-height:18px}
.c2-hs>b{font-weight:640;color:var(--text-2);margin-left:-5px}
.c2-cc{display:inline-flex;align-items:center;gap:3px}.c2-cc svg{width:13px;height:13px}.c2-cc b{font-weight:640}
.c2-em{letter-spacing:-.06em;font-size:12.5px;line-height:1;padding-right:.06em}
/* 목록 줄: 뜨는 글 불꽃, 반응 요약, 투표 표시 */
.c2-hotb{display:inline-grid;vertical-align:-2px;margin-right:4px;color:var(--c2-fire)}.c2-hotb svg{width:14px;height:14px}
.cm-meta .c2-rxs{gap:4px;height:20px;padding:0 7px 0 5px;border-radius:var(--pill);background:var(--surface-2)}
.cm-meta .c2-rxs[hidden]{display:none}
.cm-meta .c2-rxs.mine{background:var(--primary-dim);color:var(--primary-on-dim)}
.cm-meta .c2-rxs b{font-weight:640}
.c2-rxs.bump{animation:c2Bump .36s var(--g-ease)}
@keyframes c2Bump{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.cm-meta .c2-pollt{gap:3px;color:var(--primary-on-dim);font-weight:640}
.cm-meta .c2-pollt svg{width:12px;height:12px}
.cm-row{-webkit-touch-callout:none}
.cm-tk.c2-live{background:var(--up-dim);border-color:transparent}
.cm-tk.c2-live .r{display:inline-flex;align-items:center;gap:4px;color:var(--up-on-dim)}
.cm-tk.c2-live .live-dot{width:6px;height:6px}
/* 반응 고르기(길게 누르기) */
.c2-pick{position:fixed;z-index:70;display:flex;gap:2px;padding:5px;border-radius:var(--pill);opacity:0;transform:translateY(6px) scale(.92);transform-origin:50% 100%;transition:opacity .16s var(--g-ease),transform .22s var(--g-ease)}
.c2-pick.in{opacity:1;transform:none}
.c2-pick button{width:42px;height:42px;border-radius:50%;font-size:24px;line-height:1;display:grid;place-items:center;transform:scale(.6);opacity:0;transition:transform .26s var(--g-ease) var(--d),opacity .18s var(--g-ease) var(--d)}
.c2-pick.in button{transform:none;opacity:1}
.c2-pick button.on{background:var(--primary-dim)}
.c2-pick button:active{transform:scale(1.18)}
/* 글 보기: 반응 줄 */
.c2-rxbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:16px}
.c2-rxb{position:relative;height:40px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.c2-rxb .e{font-size:19px;line-height:1;display:inline-block}
.c2-rxb b{font-size:12.5px;font-weight:680;color:var(--text-2);display:inline-block}
.c2-rxb b[hidden]{display:none}
.c2-rxb.on{background:var(--primary-dim);border-color:color-mix(in srgb,var(--primary-2) 45%,transparent)}
.c2-rxb.on b{color:var(--primary-on-dim)}
.c2-rxb:active .e{transform:scale(1.2)}
.c2-rxb.pop .e{animation:c2Pop .42s var(--g-ease)}
@keyframes c2Pop{0%{transform:scale(1)}40%{transform:scale(1.45) rotate(-8deg)}100%{transform:scale(1)}}
.c2-rxb b.tick{animation:c2Tick .3s var(--g-ease)}
@keyframes c2Tick{0%{transform:translateY(60%);opacity:0}100%{transform:none;opacity:1}}
.c2-float{position:absolute;left:50%;top:0;font-size:22px;pointer-events:none;animation:c2Float .8s var(--g-ease) forwards}
@keyframes c2Float{0%{transform:translate(-50%,0) scale(.8);opacity:1}100%{transform:translate(-50%,-46px) scale(1.25);opacity:0}}
/* 투표 */
.c2-poll{margin-top:14px;padding:12px 13px;border-radius:16px;background:var(--bg-1);border:1px solid var(--line-2)}
.c2-ph{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c2-pk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:680;color:var(--primary-on-dim)}
.c2-pk svg{width:13px;height:13px}
.c2-pc{font-size:11.5px;font-weight:640;color:var(--text-3)}
.c2-pq{margin:6px 0 10px;font-size:15.5px;font-weight:660;line-height:1.4;overflow-wrap:anywhere}
.c2-opts{display:grid;gap:7px}
.c2-opt{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:8px;width:100%;min-height:46px;padding:0 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);text-align:left;font-size:14.5px;font-weight:620;transition:transform .15s var(--g-ease)}
.c2-opt:not(:disabled):active{transform:scale(.98)}
.c2-opt .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c2-opt .bar{position:absolute;inset:0;z-index:-1;background:var(--surface-3);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--g-ease)}
.c2-poll.res .c2-opt .bar{transform:scaleX(var(--p))}
.c2-poll.grow:not(.go) .c2-opt .bar{transform:scaleX(0)}
.c2-opt.best .bar{background:color-mix(in srgb,var(--primary) 26%,var(--surface-2))}
.c2-opt.mine{border-color:color-mix(in srgb,var(--primary-2) 60%,transparent)}
.c2-opt .ck{display:grid;color:var(--primary-on-dim)}.c2-opt .ck svg{width:15px;height:15px}
.c2-opt b{font-size:14px;font-weight:680}
.c2-opt:disabled{cursor:default;color:var(--text)}
.c2-pf{display:flex;align-items:center;gap:10px;margin-top:9px;min-height:16px;font-size:12px;font-weight:600;color:var(--text-3)}
.c2-pf .tbtn{margin:0 0 0 auto;font-size:12px;padding:0}
/* 두 번 톡 추천 */
.cm-post{position:relative}
.c2-burst{position:absolute;width:0;height:0;pointer-events:none;z-index:3}
.c2-burst .c{position:absolute;left:-30px;top:-30px;width:60px;height:60px;display:grid;place-items:center;color:var(--primary-2);animation:c2Heart .8s var(--g-ease) forwards}
.c2-burst .c svg{width:50px;height:50px;fill:color-mix(in srgb,var(--primary-2) 30%,transparent)}
.c2-burst .p{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--primary-2);opacity:0;animation:c2Spark .7s var(--g-ease) .05s forwards}
.c2-burst .p:nth-child(odd){background:var(--c2-fire)}
@keyframes c2Heart{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}55%{transform:scale(.95);opacity:1}100%{transform:scale(1.1) translateY(-18px);opacity:0}}
@keyframes c2Spark{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateY(-46px) scale(.4);opacity:0}}
/* 실시간 점수(글의 경기 카드) */
.cm-pcard.c2-live{border-color:color-mix(in srgb,var(--up) 40%,transparent)}
.cm-pcard.c2-live .cm-badge{display:inline-flex;align-items:center;gap:5px;background:var(--up-dim);color:var(--up-on-dim)}
.cm-pcard.c2-live .live-dot{width:6px;height:6px}
.c2-sc{margin-left:8px;color:var(--up-on-dim);display:inline-block}
.c2-sc.bump{animation:c2Bump .5s var(--g-ease)}
/* 댓글과 답글 */
.c2-cmts .cm .cb{min-width:0}
.c2-kids{margin:10px 0 0 37px;padding-left:12px;border-left:2px solid var(--line-2);display:grid;gap:12px}
.c2-re .avatar.sm{width:24px;height:24px;font-size:10px}
.c2-op{flex:none;font-size:10px;font-weight:680;height:17px;padding:0 6px;border-radius:5px;display:inline-grid;place-items:center;background:var(--up-dim);color:var(--up-on-dim)}
.c2-at{color:var(--primary-on-dim);font-weight:640}
.c2-rbtn{display:inline-flex;align-items:center;gap:4px;margin-top:2px;height:22px;padding:0;font-size:12px;font-weight:640;color:var(--text-3)}
.c2-rbtn svg{width:13px;height:13px}
.c2-rbtn:active{color:var(--text-2)}
.c2-first{display:grid;justify-items:center;gap:4px}
.c2-first span{font-size:24px}.c2-first b{font-weight:640;color:var(--text-2)}
.c2-new{animation:c2New 1.6s var(--g-ease)}
@keyframes c2New{0%{opacity:0;transform:translateY(6px)}30%{opacity:1;transform:none}}
.c2-to{display:flex;align-items:center;gap:6px;margin-top:14px;padding:7px 8px 7px 12px;border-radius:12px;background:var(--primary-dim);font-size:12.5px;font-weight:600;color:var(--text-2)}
.c2-to[hidden],.c2-atl[hidden]{display:none}
.c2-to b{font-weight:680;color:var(--primary-on-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c2-to .linkbtn{margin-left:auto;flex:none;padding:2px 4px}
.c2-to+.c2-atl+.cin,.c2-to:not([hidden])~.cin{margin-top:8px}
.c2-atl{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:10px}
.c2-atl::-webkit-scrollbar{display:none}
.c2-atl button{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 5px;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);font-size:13px}
.c2-atl .avatar.sm{width:26px;height:26px}.c2-atl .avatar .chk{display:none}
.c2-atl b{font-weight:640}.c2-atl span{color:var(--text-3);font-size:12px;font-weight:560}
/* 글쓰기: 오늘의 질문 표시, 투표 붙이기 */
.c2-dq{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:12px;background:var(--c2-q);border:1px solid var(--line);font-size:12.5px;font-weight:640;color:var(--point)}
.c2-cp:empty{display:none}
.c2-cpb{width:100%}
.c2-cpm{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 6px 0 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2)}
.c2-cpm .s{flex:1;min-width:0;font-size:13px;font-weight:560;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c2-cpe{display:grid;gap:7px;padding:10px 10px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2)}
.c2-cph{display:flex;align-items:center;justify-content:space-between;padding-left:2px;margin:-2px -2px 0 0}
.c2-cpe .input{height:42px}
.c2-cpq{font-weight:620}
.c2-cpadd{display:inline-flex;align-items:center;gap:4px;justify-self:start;height:30px;padding:0 4px;font-size:13px}
.c2-cpadd svg{width:14px;height:14px}
/* 오늘 활동 시트 · 오늘의 질문 답 목록 */
.c2-goals{display:grid;gap:8px;margin-top:4px}
.c2-goal{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px 0 10px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.c2-goal .i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text-3);flex:none}
.c2-goal .i svg{width:15px;height:15px}
.c2-goal b{flex:1;font-size:14.5px;font-weight:620}
.c2-goal .num{font-size:13.5px;font-weight:680;color:var(--text-2)}
.c2-goal.on .i{background:var(--up);color:#fff}
.c2-goal.on .num{color:var(--up-on-dim)}
.c2-gp{margin:12px 2px 12px}
.c2-gdone{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:var(--pill);background:var(--up-dim);color:var(--up-on-dim);font-size:14px;font-weight:640}
.c2-gdone svg{width:15px;height:15px}
.c2-gbadge{margin-top:8px}
#c2-claim:disabled{opacity:.5}
.c2-sq{margin:-2px 2px 12px;font-size:15px;font-weight:640;line-height:1.4;color:var(--text)}
.c2-alist{min-height:80px}
/* 당겨서 새로 고침 */
.c2-ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 52px);z-index:44;width:36px;height:36px;margin-top:-36px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-sm);color:var(--primary-2);opacity:0;transform:translate(-50%,0);pointer-events:none}
.c2-ptr svg{width:18px;height:18px}
.c2-ptr.spin svg{animation:c2Spin .8s linear infinite}
@keyframes c2Spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .c2-act.ready,.c2-rxs.bump,.c2-rxb.pop .e,.c2-rxb b.tick,.c2-float,.c2-burst,.c2-sc.bump,.c2-new,.c2-ptr.spin svg{animation:none}
  .c2-pick,.c2-pick button,.c2-opt,.c2-opt .bar,.c2-rxb{transition:none}
}
/* ==== /area:comm2 ==== */
/* 챌린지 위쪽 정리 (운영자 2026-10-01): 미션 · 친구 대결은 위 아이콘으로, 손님 안내는 한 줄 */
.pd-tacts{display:flex;align-items:center;gap:2px;margin-left:auto}
.pd-ti{position:relative}
.pd-ti .pd-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--down);box-shadow:0 0 0 2px var(--bg)}
.pd-gline{display:flex;align-items:center;gap:8px;margin:10px 0 2px;padding:9px 10px 9px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pd-gline .pd-gt{flex:1;min-width:0;font-size:14px;font-weight:640;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-gline .pd-guide{margin:0}
/* ==== area:homecard ==== (2026-10-01) 홈 경기 카드 (app.js area:homecard)
 * 참고 앱의 정보 배치: 핀과 순위 | 두 팀 · 상태 · 큰 시각/점수 | 픽과 순위, 아래 승무패 줄(읽기 전용).
 * 리그 묶음 안의 카드는 무거운 상자 대신 한 장의 판 위 줄이 되고 가는 선으로 갈린다. 줄 사이는 넉넉히.
 * 그림자는 아래로만(묶음은 content-visibility 로 잘린다). 움직임은 배경색과 transform 만. */
.hm-grp{contain-intrinsic-size:auto 340px}
.hm-grp .hm-list{gap:0;border-radius:16px;background:var(--v3-card-bg,var(--surface));border:1px solid var(--line-2);box-shadow:var(--v3-hl,none),var(--v3-card-sh,none);overflow:hidden}
[data-theme=light] .hm-grp .hm-list{border-color:rgba(15,18,25,.08)}
.hm-grp .hm-card.hc{padding:16px 6px 16px;border:0;border-radius:0;background:none;box-shadow:none;transition:background-color .18s ease}
.hm-grp .hm-card.hc+.hm-card.hc{border-top:1px solid var(--line)}
.hm-grp .hm-card.hc:active{transform:none}
.hm-grp .hm-card.hc.live{background:color-mix(in srgb,var(--down) 4%,transparent)}
.hm-grp .hm-card.hc.live::after{display:none}
.hc-top{grid-template-columns:40px minmax(0,1fr) 40px;gap:2px}
.hc-side{display:grid;justify-items:center;align-content:start;gap:3px;min-width:0}
.hc-side .hm-star{width:40px;height:40px;margin-top:-4px}
.hc-side .hm-star svg{width:20px;height:20px}
/* 픽 알약: "픽" 과 수를 한 줄로 붙여 40px 칸 안에(순위가 왼쪽 순위와 같은 높이에 온다) */
.hc-side .hm-pk{justify-self:center;display:flex;align-items:center;justify-content:center;gap:0;width:40px;height:40px;padding:0;margin-top:-4px}
.hc-side .hm-pk i{width:auto;height:20px;padding:0 4px;border-radius:6px 0 0 6px;font-size:11px;font-weight:700}
.hc-side .hm-pk b{display:inline-flex;align-items:center;height:20px;padding:0 4px 0 3px;border-radius:0 6px 6px 0;background:var(--surface-3);font-size:12.5px;line-height:1;color:var(--text)}
.hc-side .hm-pk.ph{visibility:hidden}
.hc-rk{font-family:var(--font-d);font-size:14px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--text-2);font-variant-numeric:tabular-nums}
.hc-top .hm-main{gap:4px;padding:0}
.hc-top .hm-tm{gap:7px}
.hc-crw{position:relative;display:inline-grid}
.hc-top .hm-cr{width:40px;height:40px;font-size:14px}
.hc-home{position:absolute;right:-4px;bottom:-3px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:var(--surface-3);color:var(--text-2);box-shadow:0 0 0 2px var(--surface)}
.hc-home svg{width:10px;height:10px}
[data-theme=light] .hc-home{background:var(--surface-2);color:var(--text-2);box-shadow:0 0 0 2px var(--surface),inset 0 0 0 1px var(--line)}
.hc-top .hm-tn{font-size:13px;font-weight:600;line-height:1.3}
.hc-top .hm-tm.win .hm-tn{font-weight:700}
.hc-mid{min-width:76px;gap:4px;padding-top:0}
.hc-st{height:20px;display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.hc-big{font-family:var(--font-d);font-size:30px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--text);font-variant-numeric:tabular-nums}
.hc-dt{font-size:11.5px;font-weight:600;line-height:1;color:var(--text-3)}
/* 선발 투수 줄 (MLB 선발 예고가 캐시에 있을 때만) */
.hc-pp{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;margin:-2px 4px 10px;font-size:12.5px;line-height:18px;color:var(--text-2)}
.hc-ppl{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:7px;background:var(--surface-2);font-size:11px;font-weight:600;color:var(--text-3)}
.hc-ppn{display:flex;align-items:center;gap:5px;min-width:0}
.hc-ppn b{min-width:0;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-ppn i{flex:none;font-style:normal;font-size:11px;font-weight:500;color:var(--text-3)}
/* 승무패 줄: 라벨 칸 + 배율 칸(읽기 전용, 누르면 경기 화면) + 더보기 */
.hc-mks{margin-top:14px}
.hc-mk{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:4px}
.hc-mks .hm-ext{display:grid;gap:6px;margin-top:6px}
.hc-mks .hm-ext[hidden]{display:none}
.hc-mr{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:6px;min-width:0;border-radius:12px;color:inherit}
.hc-ml{display:grid;gap:2px;min-width:0;padding-left:4px;font-size:12px;font-weight:600;line-height:1.15;color:var(--text-2)}
.hc-ml span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-ml small{font-family:var(--font-d);font-size:13px;font-weight:600;line-height:1;color:var(--text-3)}
.hc-cs{display:grid;gap:6px;min-width:0}
.hc-cs.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hc-cs.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hc-o{height:40px;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border-radius:11px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--v3-odd-line,transparent);transition:background-color .15s ease}
.hc-o i{flex:none;font-style:normal;font-size:11.5px;font-weight:600;color:var(--text-3)}
.hc-o b{min-width:0;font-family:var(--font-d);font-size:17px;font-weight:600;letter-spacing:.01em;color:var(--text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.hc-o.none b{font-weight:500;color:var(--text-3)}
.hm-card.hc.fin .hc-o b{color:var(--text-2)}
.hc-mr:active .hc-o{background:var(--surface-3)}
@media (hover:hover){.hc-mr:hover .hc-o{background:var(--surface-3)}}
.hc-x{width:40px;height:40px}
.hc-x svg{width:17px;height:17px}
.hc-xph{width:40px;height:40px}
.hm-card.hc .ins-cb{margin:12px 44px 0 4px}
@media (prefers-reduced-motion:reduce){.hm-grp .hm-card.hc,.hc-o{transition:none}}
/* 날짜 · 시각: 종료와 진행중은 큰 점수 아래, 예정은 상태와 큰 시각 사이(다른 날일 때만) */
.hc-mid .hc-dt{white-space:nowrap;letter-spacing:.01em}
.hc-mid .hm-sc+.hc-dt{margin-top:1px}
/* 영어처럼 긴 마켓 이름은 두 줄로(Under/Over) */
.hc-ml span{white-space:normal;overflow-wrap:anywhere;line-height:1.1}
/* 리그 표시: 섞인 묶음(내 팀 · 관심 경기)의 카드 위, 리그 머리 옆 시즌, 핫 매치 국기 */
.hc-lg{display:flex;align-items:center;gap:6px;min-width:0;margin:-4px 4px 10px;font-size:12px;font-weight:600;color:var(--text-2)}
.hc-lg b{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-fl{flex:none;width:16px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
span.hc-fl{display:inline-grid;place-items:center;border-radius:0;box-shadow:none}
span.hc-fl svg{width:13px;height:13px;color:var(--text-3)}
.hc-ssn{flex:none;font-family:var(--font-d);font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--text-3)}
.hm-lg .hc-ssn{font-size:13.5px;margin-left:-2px}
.ins-hlg .hc-fl{display:inline-block;vertical-align:-2px;margin-right:5px}
.ins-hlg span.hc-fl{display:inline-grid;vertical-align:-3px}
/* 뼈대(app.js SKEL.home): 같은 판 · 같은 줄 높이 · 같은 가는 선 */
.skgrp .skcard.skhc{margin-top:0;padding:0 6px}
.skhc-r{padding:16px 0}
.skhc-r+.skhc-r{border-top:1px solid var(--line)}
/* ==== /area:homecard ==== */
.skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;margin-top:16px}
/* ==== area:growth ==== (친구 초대 페이지, 카카오톡 공유 단추, 공유 단추) */
.gw-inv{display:grid;gap:12px;padding-bottom:8px}
.gw-hero{display:grid;gap:12px;padding:18px 16px}
.gw-hh{display:flex;align-items:center;gap:12px}
.gw-hh>div{min-width:0;display:grid;gap:2px}
.gw-hi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--primary);color:#fff}
.gw-hi svg{width:21px;height:21px}
.gw-ht{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.gw-hs{margin:0;font-size:13.5px;font-weight:540;line-height:1.4;color:var(--text-2);word-break:keep-all}
.gw-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gw-two>div{display:grid;align-content:start;gap:3px;padding:12px;border-radius:var(--r-sm);background:var(--surface-2);min-width:0}
.gw-two span{font-size:12.5px;font-weight:600;color:var(--text-2)}
.gw-two b{font-size:20px;font-weight:700;color:var(--up);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-two small{font-size:12px;font-weight:540;color:var(--text-3);word-break:keep-all}
.gw-code{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-radius:var(--r-sm);border:1px dashed var(--line-2)}
.gw-cl{flex:1;min-width:0;display:grid;gap:2px}
.gw-cl span{font-size:12px;font-weight:600;color:var(--text-3)}
.gw-cl b{font-size:24px;font-weight:700;letter-spacing:.12em}
.gw-link{display:flex;align-items:center;gap:10px;min-width:0}
.gw-lt{flex:1;min-width:0;font-size:13px;font-weight:540;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-link .g-btn svg,.gw-shb svg{width:15px;height:15px}
.gw-acts{display:grid;gap:8px}
.gw-acts .g-btn,.gw-acts .gw-kk{width:100%}
.gw-acts svg{width:17px;height:17px}
/* 카카오 공유 단추: 카카오 노란색 + 검은 말풍선(카카오 디자인 가이드) */
.gw-kk{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border-radius:var(--pill);border:0;
  background:#FEE500;color:rgba(0,0,0,.88);font-size:15px;font-weight:640;transition:transform .2s var(--g-ease)}
.gw-kk.block{display:flex;width:100%;margin-top:8px}
.gw-kk:active,.gw-promo:active{transform:scale(.98)}
.gw-shl{display:grid;gap:8px;margin-top:12px}
.gw-shl .gw-kk,.gw-shl .g-btn{width:100%}
.gw-shl svg,.gw-kk svg{width:18px;height:18px;flex:none}
.gw-h3{margin:0 0 10px;font-size:15px;font-weight:680}
.gw-h3 .num{margin-left:4px;color:var(--text-3);font-weight:600}
.gw-how ol{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.gw-how li{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:540;line-height:1.45;color:var(--text-2);word-break:keep-all}
.gw-how li b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--primary-dim);color:var(--primary-on-dim,var(--primary));font-size:12px;font-weight:700;margin-top:1px}
.gw-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gw-stat>div{display:grid;gap:3px;min-width:0}
.gw-stat span{font-size:12.5px;font-weight:600;color:var(--text-2)}
.gw-stat b{font-size:22px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-msh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gw-next{font-size:12.5px;font-weight:600;color:var(--text-3);white-space:nowrap}
.gw-msl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.gw-m{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--r-sm);background:var(--surface-2);min-width:0}
.gw-m:not(.on) i,.gw-m:not(.on) b,.gw-m:not(.on) small{opacity:.55}
.gw-m.on{box-shadow:inset 0 0 0 1.5px var(--primary)}
.gw-m i{flex:none;font-style:normal;font-size:17px;line-height:1}
.gw-m b{flex:none;font-size:14px;font-weight:680}
.gw-m small{flex:1;min-width:0;text-align:right;font-size:12.5px;font-weight:600;color:var(--up);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-row{display:flex;align-items:center;gap:10px;padding:9px 0}
.gw-row+.gw-row{border-top:1px solid var(--line)}
.gw-rn{flex:1;min-width:0;display:grid;gap:1px}
.gw-rn b{font-size:14px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-rn small{font-size:12px;font-weight:540;color:var(--text-3)}
.gw-st{flex:none;font-size:12px;font-weight:640;padding:4px 9px;border-radius:var(--pill);background:var(--surface-2);color:var(--text-2)}
.gw-st.active{background:var(--primary-dim);color:var(--primary-on-dim,var(--primary))}
.gw-st.paid{background:rgba(22,208,122,.14);color:var(--up)}
.gw-st.blocked,.gw-st.expired{color:var(--text-3)}
.gw-none{margin:0;font-size:13.5px;font-weight:540;color:var(--text-3)}
.gw-note{margin:0;text-align:center;font-size:12px;font-weight:540;color:var(--text-3)}
.gw-promo{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;color:inherit;text-decoration:none;transition:transform .2s var(--g-ease)}
.gw-pi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--primary-dim);color:var(--primary-on-dim,var(--primary))}
.gw-pi svg{width:18px;height:18px}
.gw-pt{flex:1;min-width:0;display:grid;gap:1px}
.gw-pt b{font-size:14.5px;font-weight:660}
.gw-pt small{font-size:12.5px;font-weight:540;color:var(--text-2)}
.gw-pt small .num{color:var(--up);font-weight:640}
.gw-tfw{display:flex;align-items:center;gap:8px}
.gw-tfl{flex:1;min-width:0}
.gw-tfl:empty{display:none}
.gw-tfw:has(.gw-tfl:empty){justify-content:flex-end;margin-top:8px}
.gw-mshb{flex:none;margin-top:8px}
.gw-mshb span{display:none}
.gw-mshb svg{width:18px;height:18px}
.gw-pks svg{width:15px;height:15px}
:root[data-theme="light"] .gw-two>div,:root[data-theme="light"] .gw-m{background:var(--surface-2)}
@media (prefers-reduced-motion:reduce){.gw-kk,.gw-promo{transition:none}}
/* ==== /area:growth ==== */
/* ==== area:teamrec ==== 경기 화면 정보 탭: 팀 전적 (app.js area:teamrec). 좁으면 두 줄, 카드 안쪽 580px 부터 표. */
.tr-sec{--tr-w:#5B8CFF;--tr-w-bg:rgba(91,140,255,.16);--tr-l:#FF6B6B;--tr-l-bg:rgba(255,93,93,.14);--tr-d:var(--text-2);--tr-d-bg:rgba(255,255,255,.07);--tr-hit:rgba(99,112,255,.24);--tr-hit-t:#C3C8FF}
[data-theme=light] .tr-sec{--tr-w:#1F5BE0;--tr-w-bg:rgba(31,91,224,.10);--tr-l:#D63333;--tr-l-bg:rgba(214,51,51,.09);--tr-d:#5B606B;--tr-d-bg:rgba(15,18,25,.06);--tr-hit:rgba(79,92,243,.14);--tr-hit-t:#3440C8}
.tr-team{padding:12px 12px 6px;min-width:0;container-type:inline-size}
.tr-team+.tr-team{margin-top:10px}
.tr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;min-width:0}
.tr-nm{display:flex;align-items:center;gap:7px;min-width:0;font-size:15px}
.tr-nm b{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.tr-seg{padding:2px}
.tr-seg>button{min-width:0;height:28px;padding:0 10px;font-size:12.5px}
.tr-lgs{position:relative;display:inline-flex;align-items:center;min-width:0;max-width:150px}
.tr-lgs select{-webkit-appearance:none;appearance:none;height:32px;width:100%;max-width:150px;padding:0 26px 0 12px;border-radius:var(--pill);border:1px solid var(--g-stroke,var(--line-2));background:var(--g-tint,var(--surface-2));color:var(--text);font:inherit;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.tr-lgs svg{position:absolute;right:10px;width:12px;height:12px;transform:rotate(90deg);color:var(--text-3);pointer-events:none}
.tr-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 2px;font-size:13px;font-weight:600;color:var(--text-2);min-width:0}
.tr-sum b{font-weight:700;color:var(--text)}
.tr-strip{display:flex;gap:2px;margin-left:auto}
.tr-strip i{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;line-height:1}
.tr-strip i.W,.tr-b.W{background:var(--tr-w-bg);color:var(--tr-w)}
.tr-strip i.L,.tr-b.L{background:var(--tr-l-bg);color:var(--tr-l)}
.tr-strip i.D,.tr-b.D{background:var(--tr-d-bg);color:var(--tr-d)}
.tr-tb{margin-top:4px}
.tr-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dt lg b" "g g o";align-items:center;gap:5px 8px;padding:9px 0;border-top:1px solid var(--line)}
.tr-dt{grid-area:dt;font-size:11.5px;font-weight:500;color:var(--text-3);white-space:nowrap}
.tr-lg{grid-area:lg;font-size:11.5px;font-weight:500;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-g{grid-area:g;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:7px;min-width:0;font-size:13.5px}
.tr-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-weight:500}
.tr-t.h{text-align:right}
.tr-t.me{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tr-t.w{color:var(--text);font-weight:700}
.tr-sc{display:flex;align-items:center;gap:3px;font-size:14px;font-weight:600;color:var(--text-2)}
.tr-sc b{font-weight:600}
.tr-sc b.w{font-weight:700;color:var(--text)}
.tr-sc i{font-style:normal;color:var(--text-3)}
.tr-o{grid-area:o;display:grid;gap:3px;justify-self:end;align-items:center;text-align:center}
.tr-o.n3{grid-template-columns:repeat(3,38px)}
.tr-o.n2{grid-template-columns:repeat(2,38px)}
.tr-oc{height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:500;color:var(--text-3)}
.tr-oc.on{background:var(--tr-hit);color:var(--tr-hit-t);font-weight:700}
.tr-b{grid-area:b;justify-self:end;min-width:44px;height:22px;padding:0 7px;border-radius:6px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:700;white-space:nowrap}
.tr-hd{grid-template-areas:"g g o";padding:2px 0 4px;border-top:0}
.tr-hd .tr-dt,.tr-hd .tr-lg,.tr-hd .tr-b{display:none}
.tr-hd .tr-g{visibility:hidden}
.tr-hd .tr-o small{grid-column:1/-1;font-size:10.5px;font-weight:600;color:var(--text-3)}
.tr-hd .tr-oc{height:auto;font-size:11px;font-weight:600}
.tr-more{display:flex;width:100%;align-items:center;justify-content:center;gap:4px;height:36px;margin:4px 0 6px;border-radius:12px;background:var(--tr-d-bg);color:var(--text-2);font-size:13px;font-weight:600}
.tr-more svg{width:13px;height:13px;transform:rotate(90deg)}
.tr-none{padding:16px 0 10px;text-align:center;font-size:13px;font-weight:500;color:var(--text-3)}
/* 표는 카드 안쪽이 넓을 때만(앱 기둥이 좁은 데스크톱 폭에서는 두 줄 그대로). 컨테이너 쿼리를 모르는 브라우저도 두 줄. */
@container (min-width:580px){
  .tr-r{grid-template-columns:104px 88px minmax(0,1fr) auto 64px;grid-template-areas:"dt lg g o b";gap:8px;padding:8px 0}
  .tr-hd{grid-template-areas:"dt lg g o b";padding:2px 0 6px;align-items:end}
  .tr-hd .tr-dt,.tr-hd .tr-lg,.tr-hd .tr-b{display:block;font-size:11px;font-weight:600;color:var(--text-3)}
  .tr-hd .tr-g{visibility:visible;display:block;text-align:center;font-size:11px;font-weight:600;color:var(--text-3)}
  .tr-o.n3{grid-template-columns:repeat(3,42px)}
  .tr-o.n2{grid-template-columns:repeat(2,42px)}
  .tr-b{justify-self:center;text-align:center}
}
/* ==== /area:teamrec ==== */
/* 토스트 위치 (운영자 2026-10-01: 너무 높았다). 슬립 바가 실제로 보이는 화면(챌린지)에서만 그 위로 올리고,
 * 바가 숨은 화면에서는 아래 메뉴 바로 위에 둔다. 전체적으로 조금 더 아래로. */
.toast{bottom:calc(var(--nav-h) + var(--safe-b) + 12px)}
html:not(.slip-here) body:has(.slipbar:not(.hide)) .toast{bottom:calc(var(--nav-h) + var(--safe-b) + 12px)}
html.slip-here body:has(.slipbar:not(.hide)) .toast{bottom:calc(var(--nav-h) + var(--safe-b) + 84px)}
/* 아래 독: 아이콘이 글자보다 커 보여 싸 보였다 (운영자 2026-10-01). 아이콘 한 단계 작게, 글자 또렷하게, 간격 촘촘히 */
.nav a svg{width:19px;height:19px;stroke-width:1.8}
.nav .nl{font-size:11px;font-weight:560;letter-spacing:-.005em}
.nav a{gap:4px}
/* ==== area:aianalysis ==== */
/* AI 분석 (2026-10-01, src/aianalysis.js). 홈 카드 한 줄, 경기 정보 탭 카드, #/ai/today.
 * 홈 · 무 · 원정 색은 인사이트 막대(--ins-h / --ins-d / --ins-a)를 그대로 써서 다크와 라이트가 함께 맞는다. 배율 기준은 흐리게. */
.aia-cb{display:flex;align-items:center;gap:7px;margin:7px 32px 0;min-height:16px;min-width:0}
.hm-card.hc .aia-cb{margin:12px 44px 0 4px}
.hm-card.hc .aia-cb + .ins-cb{margin-top:6px}
.aia-cbl{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text-3)}
.aia-tag{font-style:normal;font-size:9px;line-height:1.3;font-weight:700;letter-spacing:.02em;padding:1px 4px;border-radius:5px;background:var(--primary-dim);color:var(--primary-on-dim)}
.aia-cbn{flex:none;font-size:11.5px;font-weight:700;min-width:28px}
.aia-cbn.h{color:var(--ins-h);text-align:right}.aia-cbn.a{color:var(--ins-a)}

.aia-card{display:grid;gap:12px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 26%,var(--line));margin-bottom:12px;min-width:0}
.aia-card[hidden]{display:none}
.aia-h{display:flex;align-items:center;gap:8px;min-width:0}
.aia-hi{display:inline-grid;place-items:center;flex:none}
.aia-ht{font-size:16px;font-weight:700;letter-spacing:-.02em}
.aia-cf{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--surface-2);font-size:11.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.aia-cf b{font-weight:700;color:var(--text)}
.aia-cf.c1 .ai-bars i:nth-child(1),.aia-cf.c2 .ai-bars i:nth-child(-n+2),.aia-cf.c3 .ai-bars i{background:var(--primary-2)}
.aia-cfl{color:var(--text-3)}
.aia-mkt{margin-left:auto;flex:none;height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;border:1px solid var(--line-2);font-size:11px;font-weight:600;color:var(--text-2);white-space:nowrap}
.aia-tf .aia-mkt{margin-left:0}
.aia-bars{display:grid;gap:8px}
.aia-row{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr) 42px;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-2)}
.aia-rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aia-rt{position:relative;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.aia-rt i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;transform-origin:left center}
.aia-row.h .aia-rt i{background:var(--ins-h)}.aia-row.d .aia-rt i{background:var(--ins-d)}.aia-row.a .aia-rt i{background:var(--ins-a)}
.aia-row b{text-align:right;font-size:14px;font-weight:700;color:var(--text-2)}
.aia-row.top{color:var(--text)}
.aia-row.top.h b{color:var(--ins-h)}.aia-row.top.a b{color:var(--ins-a)}.aia-row.top.d b{color:var(--text)}
.aia-bars.mk .aia-rt i{opacity:.5}
.aia-bars.mk .aia-row b{color:var(--text-2)}
.ins-go.aia-bars .aia-rt i{animation:insFill .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms + 60ms)}
.aia-bl{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.aia-bl li{position:relative;padding-left:14px;font-size:14px;line-height:1.5;font-weight:520;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.aia-bl li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--primary-2)}
.aia-sum{display:flex;gap:8px;align-items:flex-start;padding:11px 12px;border-radius:13px;background:var(--primary-dim)}
.aia-sum p{margin:0;font-size:14px;line-height:1.5;font-weight:640;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.aia-sum .ai-spark{margin-top:2px}
.aia-risk{display:grid;gap:3px}
.aia-rl{font-size:12px;font-weight:640;color:var(--point)}
.aia-risk p{margin:0;font-size:13.5px;line-height:1.5;font-weight:520;color:var(--text-2);word-break:keep-all;overflow-wrap:anywhere}
.aia-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;font-weight:560;color:var(--text-3)}
.aia-meta i{font-style:normal}
.aia-meta .tbtn{margin-left:auto}
.aia-note{display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-2)}
.aia-note svg{width:16px;height:16px;flex:none;color:var(--primary-on-dim)}
.aia-rq{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aia-req{background:var(--primary);border-color:transparent;color:#fff}
.aia-req .ai-spark{filter:none}
.aia-req:disabled{opacity:.5}
.aia-req.busy{opacity:.75}
.aia-left{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:560;color:var(--text-3)}
.aia-left b{color:var(--text-2);font-weight:700}
.aia-qa{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.aia-qh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aia-qh b{font-size:14px;font-weight:700}
.aia-qf{display:flex;align-items:center;gap:6px;height:44px;padding:0 5px 0 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.aia-qf:focus-within{border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.aia-qi{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:14px;font-weight:520;color:var(--text)}
.aia-qi::placeholder{color:var(--text-3)}
.aia-qb{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff}
.aia-qb svg{width:17px;height:17px}
.aia-qb:disabled{opacity:.5}
.aia-qo{display:grid;gap:6px}
.aia-qo[hidden]{display:none}
.aia-qq{margin:0;justify-self:end;max-width:86%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--primary-dim);color:var(--text);font-size:13.5px;font-weight:560;overflow-wrap:anywhere}
.aia-qt,.aia-qw{margin:0;max-width:92%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--surface-2);font-size:13.5px;line-height:1.55;font-weight:520;color:var(--text);word-break:keep-all;overflow-wrap:anywhere}
.aia-qw{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);justify-self:start}
.aia-qo .tbtn{justify-self:start}
.aia-dots{display:inline-flex;gap:3px}
.aia-dots i{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:aiaDot 1s ease-in-out infinite}
.aia-dots i:nth-child(2){animation-delay:.15s}.aia-dots i:nth-child(3){animation-delay:.3s}
@keyframes aiaDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.aia-disc{margin:0;font-size:11.5px;line-height:1.5;font-weight:520;color:var(--text-3)}
.aia-sk .skr{display:flex;gap:8px;align-items:center}

.aia-entry{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--g-r,16px);background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);color:var(--text);transition:transform .2s ease}
.aia-entry:active{transform:scale(.98)}
.aia-entry>svg:last-child{width:16px;height:16px;color:var(--text-3);flex:none;margin-left:auto}
.aia-et{display:grid;gap:2px;min-width:0}
.aia-et b{font-size:15px;font-weight:680}
.aia-et span{font-size:12.5px;color:var(--text-2);font-weight:520}

.aia-view{display:grid;gap:12px;min-width:0}
.aia-view .g-head{margin-bottom:0}
.aia-chips{margin-top:-2px;padding-bottom:2px}
.aia-chips .g-chip{flex:none}
.aia-list{display:grid;gap:10px}
.aia-tc{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);min-width:0;animation:aiaIn .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 40ms)}
.aia-tc:active{transform:scale(.985)}
@keyframes aiaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.aia-tt{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;font-size:12px;font-weight:600;color:var(--text-3)}
.aia-tl{display:inline-flex;align-items:center;gap:6px;min-width:0}
.aia-tl>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aia-tw{flex:none;font-weight:640;color:var(--text-2)}
.aia-tw b{font-size:13px;color:var(--text)}
.aia-lv{display:inline-flex;align-items:center;gap:5px;color:var(--down)}
.aia-lv i{width:6px;height:6px;border-radius:50%;background:currentColor}
.aia-tm{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.aia-tn{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:1}
.aia-tn.r{justify-content:flex-end;text-align:right}
.aia-tn b{font-size:14.5px;font-weight:660;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.aia-tn .hm-cr{flex:none}
.aia-tri{display:grid;gap:5px}
.aia-trn{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:13px}
.aia-trn b{font-weight:700}.aia-trn .h{color:var(--ins-h)}.aia-trn .a{color:var(--ins-a)}
.aia-trn i{font-style:normal;font-weight:600;color:var(--text-3)}
.aia-tri .ins-bar{flex:none;width:100%}
.aia-tri.mk .ins-seg{opacity:.5}
.aia-tri.mk .aia-trn b{color:var(--text-2)}
.aia-tf{display:flex;align-items:center;gap:8px;min-width:0}
.aia-tf .aia-cf{margin-left:0}
.aia-ts{min-width:0;font-size:13px;font-weight:560;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;line-height:1.45}
.aia-wt{font-size:12.5px;font-weight:560;color:var(--text-3)}
@media (max-width:380px){
  .aia-row{grid-template-columns:minmax(0,78px) minmax(0,1fr) 38px;gap:8px}
  .aia-card{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .aia-tc{animation:none}
  .aia-dots i{animation:none}
}
/* ==== /area:aianalysis ==== */
/* ==== area:avatars ==== */
/* 일러스트 아바타. 배경은 칸 배경색(인라인), 그림은 칸 모양(원 또는 둥근 네모)대로 잘린다.
 * 체크 배지(.chk)는 칸 밖으로 나가야 해서 칸이 아니라 안쪽 <i> 에서 자른다. */
.avatar.av-il{padding:0;font-size:0;color:transparent}
.avatar .av-ig{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;pointer-events:none}
.avatar .av-ig svg{display:block;width:100%;height:100%}
:root[data-theme] .avatar.av-il,.avatar.av-il{filter:none}

/* 고르기 */
.avp{margin:6px 0 4px}
.avp-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 12px}
.avp-pv{display:block;width:88px;height:88px;border-radius:50%}
.avp-pv .avatar{width:88px;height:88px;font-size:32px}
.avp-pv .avatar .chk{display:none}
.avp-pv.pop{animation:avpPop .46s cubic-bezier(.34,1.56,.64,1)}
.avp-nm{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:-.01em;min-height:18px}
.avp-bar{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.avp-lb{font-size:13px;font-weight:600;color:var(--text-2)}
.avp-tg{appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;cursor:pointer;transition:background-color .15s var(--g-ease,ease)}
.avp-tg[aria-pressed="true"]{background:var(--primary-dim);color:var(--primary-on-dim)}
.avp-list{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;margin:0 -18px;padding:6px 18px 8px;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.avp-list::-webkit-scrollbar{display:none}
.avp-list.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:12px 8px;overflow:visible;margin:0;padding:6px 0 8px;justify-items:center}
.avp-it{appearance:none;border:0;background:none;padding:0;margin:0;flex:none;scroll-snap-align:start;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;position:relative}
.avp-it .avatar{width:52px;height:52px;font-size:19px;box-shadow:none;transition:box-shadow .18s var(--g-ease,ease),transform .18s var(--g-ease,ease)}
.avp-it:active .avatar{transform:scale(.92)}
.avp-it[aria-checked="true"] .avatar{box-shadow:0 0 0 2px var(--bg-1),0 0 0 4px var(--primary)}
.avp-it .avatar.pop{animation:avpPop .46s cubic-bezier(.34,1.56,.64,1)}
.avp-it:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.avp-cols{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.avp-col{appearance:none;border:0;width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;transition:box-shadow .18s var(--g-ease,ease)}
.avp-col[aria-checked="true"]{box-shadow:0 0 0 2px var(--bg-1),0 0 0 4px var(--primary)}
.avp-col.pop{animation:avpPop .46s cubic-bezier(.34,1.56,.64,1)}
.avp-col:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@keyframes avpPop{0%{transform:scale(1)}35%{transform:scale(.86)}100%{transform:scale(1)}}
.avp-su{text-align:center}
.avp-su h3{margin-bottom:2px}
.avp-su .sub{margin:0;font-size:13.5px;font-weight:500}
.avp-sheet #avdone{margin-top:14px}
.avp-sheet .avp-skip{margin-top:6px}
@media (prefers-reduced-motion:reduce){
  .avp-pv.pop,.avp-it .avatar.pop,.avp-col.pop{animation:none}
  .avp-it .avatar,.avp-col,.avp-tg{transition:none}
}
/* ==== /area:avatars ==== */

/* ==== area:comm3 ==== 커뮤니티 피드 넷 + 필터, 글쓰기 화면, 투표 옵션, 글 사진 (app.js area:comm3) */
/* 맨 위: 피드 알약 + 필터 단추 한 줄 */
.cm3-top{display:flex;align-items:center;gap:8px;min-width:0;margin:2px 0 10px}
.cm3-seg{flex:1;display:flex;min-width:0}
.cm3-seg>button{flex:1;min-width:0;padding:0 6px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm3-fbtn{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--text-2);transition:transform .2s var(--g-ease),background-color .2s var(--g-ease)}
.cm3-fbtn svg{width:20px;height:20px}
.cm3-fbtn.on{background:var(--primary-dim);border-color:transparent;color:var(--primary-on-dim)}
.cm3-fbtn i{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--primary);color:#fff;font-style:normal;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.cm3-fbtn:active{transform:scale(.94)}
.cm3-pcq{display:none}
@media (min-width:960px){.cm3-pcq{display:flex;gap:2px}}
.cm3-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px 0 10px}
.cm3-chips::-webkit-scrollbar{display:none}
.cm3-chip{flex:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px 0 10px;border-radius:var(--pill);background:var(--primary-dim);color:var(--primary-on-dim);font-size:12.5px;font-weight:640}
.cm3-chip svg{width:13px;height:13px;opacity:.8}
/* 머리글의 예측 피드 · 라이브 채팅 */
.cm3-hi{position:relative}
.cm3-live{position:absolute;top:8px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 2px var(--bg-1);animation:ring 1.6s ease-out infinite}
/* 오늘의 질문은 조금 더 낮게 */
.cm3 .c2-q{padding:11px 13px 10px}
.cm3 .c2-qt{margin:4px 0 9px;font-size:16px}
.cm3-empty .g-btn{margin-top:4px}
/* 목록 줄의 사진 */
.cm3-thumb{position:relative;display:block;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--surface-2);flex:none}
.cm3-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cm3-thumb i{position:absolute;right:3px;bottom:3px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center}
/* 글 본문(작은 마크다운) */
.cm-pb.cm3-md{white-space:normal}
.cm3-md p{margin:0 0 .55em}
.cm3-md p:last-child,.cm3-md ul:last-child{margin-bottom:0}
.cm3-md ul{margin:.15em 0 .6em;padding-left:1.25em}
.cm3-md li{margin:.15em 0}
.cm3-md b{font-weight:700}
.cm3-md a{color:var(--primary-on-dim);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cm-post .pn-imgs{margin-top:12px}
.cm3-ed{color:var(--text-3);font-weight:560}
.cm3-off{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin-top:8px;border-radius:12px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-3)}
.cm3-off svg{width:14px;height:14px}
.cm3-mine{display:grid;gap:8px;margin-top:6px}
.cm3-mine .g-btn{gap:6px}
.cm3-mine .g-btn svg{width:17px;height:17px}
.cm3-mine .danger{color:var(--danger)}
.cm3-note{margin:4px 2px 0;font-size:12.5px;font-weight:560;color:var(--text-3)}
/* 투표 */
.cm3-pm{margin-left:4px;padding:1px 7px;border-radius:var(--pill);background:var(--surface-2);color:var(--text-2);font-size:11px;font-weight:640}
.cm3-box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);display:grid;place-items:center;color:transparent}
.cm3-box svg{width:12px;height:12px}
.c2-opt.mine .cm3-box{background:var(--primary);border-color:var(--primary);color:#fff}
.cm3-vote{margin-top:9px}
.cm3-pa{display:inline-flex;align-items:center;gap:12px;margin-left:auto}
.cm3-pa .linkbtn{margin:0;font-size:12px;font-weight:640;color:var(--text-2);padding:6px 0}
.cm3-pa .tbtn{margin:0;font-size:12px;padding:0}
/* 글쓰기 화면 */
html.cm3-on .nav,html.cm3-on .slipbar,html.cm3-on .g-fab{display:none!important}
html.cm3-on .shell{padding-bottom:calc(var(--pn-bar-h) + var(--safe-b) + 24px)}
html.cm3-on .toast{bottom:calc(var(--pn-bar-h) + var(--safe-b) + 14px)!important}
.cm3-comp{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.cm3-comp [hidden],.cm3-bar [hidden]{display:none!important}
.cm3-cats>button{min-width:0;padding:0 6px}
.cm3-tags{display:flex;flex-wrap:wrap;gap:6px}
.cm3-tag{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
.cm3-tag svg{width:14px;height:14px}
.cm3-tag.on{background:var(--primary-dim);border-color:transparent;color:var(--primary-on-dim)}
.cm3-tag.c2-dq{margin:0}
.cm3-bd{min-height:150px;resize:none;line-height:1.55;padding-top:12px;padding-bottom:12px}
.cm3-imgs{display:flex;gap:8px;flex-wrap:wrap}
.cm3-imgs:empty{display:none}
.cm3-th{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.cm3-th img{width:100%;height:100%;object-fit:cover;display:block}
.cm3-th.up img{opacity:.55}
.cm3-th .lp-spin{position:absolute;inset:0;margin:auto}
.cm3-thx{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.62);color:#fff}
.cm3-thx svg{width:13px;height:13px}
.cm3-att{display:grid;gap:8px}
.cm3-att:empty{display:none}
.cm3-attrow{flex-wrap:wrap}
.cm3-attrow .cm-attb{flex:1 1 30%;min-width:96px;height:40px;font-size:13.5px}
.cm3-pe{display:grid;gap:8px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2)}
.cm3-pe .s{font-size:12.5px;color:var(--text-3);font-weight:520}
.cm3-orow{display:flex;align-items:center;gap:6px}
.cm3-orow .input{flex:1;min-width:0}
.cm3-pl{margin:4px 2px 0;font-size:12px;font-weight:640;color:var(--text-3)}
.cm3-durs{display:flex;flex-wrap:wrap;gap:6px}
.cm3-pset{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.cm3-tgl{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px 0 6px;border-radius:var(--pill);background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-2)}
.cm3-tgl .sw{position:relative;width:30px;height:18px;border-radius:9px;background:var(--surface-3);transition:background-color .2s var(--g-ease)}
.cm3-tgl .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--g-ease)}
.cm3-tgl.on{color:var(--text)}
.cm3-tgl.on .sw{background:var(--primary)}
.cm3-tgl.on .sw::after{transform:translateX(12px)}
.cm3-step{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 2px;border-radius:var(--pill);background:var(--surface-2)}
.cm3-step button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--text-2)}
.cm3-step button:disabled{opacity:.35}
.cm3-step svg{width:15px;height:15px}
.cm3-step b{padding:0 4px;font-size:12.5px;font-weight:640}
/* 키보드 위 도구 막대(픽 작성 막대 모양을 쓴다) */
.cm3-bar{flex-direction:column;align-items:stretch;gap:0}
.cm3-tools{display:flex;align-items:center;gap:2px;min-width:0}
.cm3-tools .pn-bt{padding:0 8px;min-width:38px}
.cm3-pop{padding:2px 0 6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.cm3-emo{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.cm3-emo::-webkit-scrollbar{display:none}
.cm3-emo button{flex:none;width:40px;height:40px;border-radius:10px;font-size:22px;line-height:1}
.cm3-emo button:active{background:var(--surface-2)}
.cm3-atl{display:grid;gap:2px;max-height:200px;overflow-y:auto}
.cm3-atl button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;border-radius:10px;text-align:left;font-size:14px}
.cm3-atl button:active{background:var(--surface-2)}
.cm3-atl b{font-weight:640;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm3-atl span{color:var(--text-3);font-size:12.5px}
.cm3-ath{margin:6px 4px;font-size:12.5px;font-weight:560;color:var(--text-3)}
.pn-cnt.warn{color:var(--danger)}
/* 필터 시트 · 리그 태그 시트 */
.sheet.cm3-fsheet{display:flex;flex-direction:column;padding-bottom:0}
.cm3-fs{flex:1;min-height:0}
.cm3-fh{margin:14px 2px 6px;font-size:12.5px;font-weight:640;color:var(--text-3)}
.cm3-fh.first{margin-top:8px}
.cm3-fchips{display:flex;flex-wrap:wrap;gap:6px}
.cm3-fq{margin-top:0}
.cm3-fq input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:15px;color:var(--text)}
.cm3-fq svg{width:17px;height:17px;color:var(--text-3)}
.cm3-flist{margin-top:6px;padding-bottom:10px}
.cm3-flist .cm3-fh{margin:12px 4px 4px;font-size:12px}
.cm3-lrow{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 6px;border-radius:12px;text-align:left}
.cm3-lrow:active{background:var(--surface-2)}
.cm3-lrow .e{width:24px;text-align:center;font-size:17px;flex:none}
.cm3-lrow b{flex:1;min-width:0;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm3-lrow .s{font-size:12px;color:var(--text-3);font-weight:560}
.cm3-lrow .ck{display:grid;color:var(--primary-on-dim);visibility:hidden}
.cm3-lrow .ck svg{width:17px;height:17px}
.cm3-lrow.on b{color:var(--primary-on-dim)}
.cm3-lrow.on .ck{visibility:visible}
.cm3-ffoot{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 2fr;gap:8px;margin:0 -18px;padding:10px 18px calc(12px + var(--safe-b));background:var(--bg-1);border-top:1px solid var(--line)}
.cm3-prev .cm-pt{margin-top:4px}
.cm3-prev+.g-btn{margin-top:14px}
@media (prefers-reduced-motion:reduce){
  .cm3-live{animation:none}
  .cm3-fbtn,.cm3-tgl .sw,.cm3-tgl .sw::after{transition:none}
}
/* ==== /area:comm3 ==== */

/* ==== 모서리 정리 (운영자 2026-10-01: 전체가 너무 둥글어 가벼워 보였다. 살짝 덜 둥글게, 공식 앱 느낌으로) ====
 * 토큰을 한 단계 줄이고, 값을 직접 쓴 큰 카드 · 시트 · 판을 맞춘다. 아바타, 스위치, 진행 막대, 점은 둥근 그대로. */
:root{--r:12px;--r-sm:9px;--r-xs:6px;--g-r:13px;--g-r-sm:10px;--pill:10px}
/* 큰 판과 시트 (22~28px → 14~16px) */
.sheet{border-radius:16px 16px 0 0}
.hm-grp,.skgrp,.mhero,.bbx,.vt,.pd-pc,.dl-cel-card,.cm-compose{border-radius:14px}
/* 카드 (16~20px → 10~12px) */
.hm-grp .hm-card,.hm-grp .hm-list,.skgrp .skcard,.skcard,.ai-mini,.aia-tc,.aia-card,.c2-hc,.cm-mc,.cm-mpick,.cm3-pe,.h2h-list,.ins-card,.ins-hc,.ins-cw,.li-tile,.mi-stw,.mi-per,.mi-empty,.ob-tm,.ob-sc,.oddbig button,.pn-imgs,.shc-prev,.ss-mrow,.ss-item,.ss-tile,.ss-slip,.totbox,.slipbar,.alist,.cm-pcard,.c2-poll,.dl-bd,.cm-ch{border-radius:11px}
.g-card,.g-list,.hm-card,.pd-m,.cm-row,.rk-row,.pk-card,.ai-card,.mi-card{border-radius:12px}
/* 둥근 채로 둘 것 */
.hm-cr,.pd-cr,.pk-crest,.toggle,.toggle i,.dot,.live-dot,.g-badge,.badge,.dl-bar,.dl-lv-bar,.ins-bar,.ob-dots i,.aia-rt,.aia-rt i,.pd-bar{border-radius:999px}
.nav{border-radius:22px}
.nav a{border-radius:16px}

/* ==== area:ticket ==== (2026-10-01) 예측 티켓. public/ticket.js 가 그리고, 앱(#/t, 시트, 글 속 작은 티켓)과
 * 서버 확인 페이지(/t/<번호>)가 같이 쓴다. 밝은 테마에서도 종이는 어두운 스코어보드 그대로 둔다(실물 티켓처럼).
 * 톱니와 홈은 mask(radial-gradient)로 뚫는다. 그림자는 무채색 하나, 빛번짐 없음. 도장은 transform · opacity 만 움직인다. */
.tk{--tk-paper:#13152B;--tk-ink:#F2F3F8;--tk-mute:#8E93AD;--tk-line:rgba(255,255,255,.08);--tk-acc:#8A93FF;--tk-hit:#4ADE80;--tk-lime:#B5F23D;--tk-miss:#F07A78;--tk-void:#A3A8BE;
  --tk-num:"Saira Condensed",var(--font);
  position:relative;isolation:isolate;display:block;color:var(--tk-ink);text-align:left;letter-spacing:-.01em;filter:drop-shadow(0 8px 18px rgba(0,0,0,.24))}
.tk .num{font-family:var(--tk-num);letter-spacing:.02em}
.tk-perf{height:7px;background:var(--tk-paper);
  -webkit-mask:radial-gradient(circle 4.5px at 50% 0,#0000 4px,#000 4.5px) 0 0/15px 100% round;
  mask:radial-gradient(circle 4.5px at 50% 0,#0000 4px,#000 4.5px) 0 0/15px 100% round}
.tk-perf-b{-webkit-mask:radial-gradient(circle 4.5px at 50% 100%,#0000 4px,#000 4.5px) 0 0/15px 100% round;
  mask:radial-gradient(circle 4.5px at 50% 100%,#0000 4px,#000 4.5px) 0 0/15px 100% round}
.tk-main{position:relative;overflow:hidden;overflow:clip;background:var(--tk-paper);padding:4px 16px 14px;
  -webkit-mask:radial-gradient(circle 11px at 0 100%,#0000 10.5px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 10.5px,#000 11px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 100%,#0000 10.5px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 10.5px,#000 11px) right/51% 100% no-repeat}
.tk-stub{position:relative;background:var(--tk-paper);padding:16px 16px 8px;
  -webkit-mask:radial-gradient(circle 11px at 0 0,#0000 10.5px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 0,#0000 10.5px,#000 11px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 0,#0000 10.5px,#000 11px) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 0,#0000 10.5px,#000 11px) right/51% 100% no-repeat}
.tk-stub::before{content:"";position:absolute;top:0;left:18px;right:18px;border-top:2px dashed rgba(255,255,255,.17)}
/* 머리 */
.tk-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0 12px}
.tk-logo{width:38px;height:38px;display:block;flex:none}
.tk-logo svg{width:100%;height:100%;display:block;border-radius:9px}
.tk-ht{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.tk-brand{font-size:11.5px;font-weight:600;color:var(--tk-mute)}
.tk-title{font-size:19px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-hr{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.tk-no{font-family:var(--tk-num);font-weight:600;font-size:15px;letter-spacing:.05em;color:var(--tk-ink);white-space:nowrap}
a.tk-no{text-decoration:underline;text-decoration-color:rgba(138,147,255,.5);text-underline-offset:3px}
.tk-combo{font-size:11.5px;font-weight:600;color:#C3C8FF;background:rgba(138,147,255,.16);padding:3px 8px;border-radius:6px;white-space:nowrap}
.tk-meta{display:flex;flex-wrap:wrap;gap:4px 14px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.045);font-size:12px}
.tk-meta span{display:flex;gap:6px;align-items:baseline}
.tk-meta i{font-style:normal;color:var(--tk-mute);font-weight:500}
.tk-meta b{font-weight:600;font-size:13.5px}
/* 도장 */
.tk-stamp{--tk-sto:.92;position:absolute;right:12px;top:60px;z-index:2;pointer-events:none;opacity:var(--tk-sto);transform:rotate(-12deg);transform-origin:50% 50%;
  animation:tkStamp .46s cubic-bezier(.2,1.3,.4,1) .12s both}
.tk-stamp span{position:relative;display:block;padding:6px 13px 5px;border:3px solid currentColor;border-radius:9px;font-size:21px;font-weight:700;letter-spacing:.08em;line-height:1.1;white-space:nowrap;background:rgba(19,21,43,.55)}
.tk-stamp span::after{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:6px;opacity:.65}
.tk-st-hit{color:var(--tk-lime)}
.tk-st-miss{color:var(--tk-miss)}
.tk-st-void{color:var(--tk-void)}
.tk-st-open{--tk-sto:.78;color:var(--tk-ink)}
.tk-st-open span,.tk-st-open span::after{border-style:dashed}
@keyframes tkStamp{0%{opacity:0;transform:rotate(-22deg) scale(1.8)}55%{opacity:var(--tk-sto);transform:rotate(-10deg) scale(.93)}100%{opacity:var(--tk-sto);transform:rotate(-12deg) scale(1)}}
/* 경기 표 */
.tk-tbl{margin-top:10px}
.tk-th,.tk-row{display:grid;grid-template-columns:18px minmax(0,1fr) 74px 26px;gap:8px;align-items:center}
.tk-th{padding:6px 0;border-bottom:1px solid var(--tk-line);font-size:10.5px;font-weight:600;color:var(--tk-mute)}
.tk-th span:nth-child(n+3){text-align:center}
.tk-row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.tk-row:last-child{border-bottom:0;padding-bottom:2px}
.tk-i{font-size:13px;color:var(--tk-mute);align-self:start;padding-top:1px}
.tk-g{display:flex;flex-direction:column;gap:3px;min-width:0}
.tk-lg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tk-mute);font-weight:500;min-width:0;line-height:16px}
.tk-lgn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-line{flex:none;font-weight:600;font-size:11.5px;color:#C3C8FF;border:1px solid rgba(138,147,255,.5);border-radius:4px;padding:0 4px;line-height:14px}
.tk-ko{flex:none;margin-left:auto;font-size:11.5px}
.tk-tm{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px;font-weight:600;min-width:0;line-height:1.3}
.tk-tm bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-tm b{font-family:var(--tk-num);font-size:16px;font-weight:700;flex:none}
.tk-p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.tk-pill{display:inline-block;max-width:100%;min-width:32px;height:24px;line-height:24px;padding:0 8px;border-radius:7px;background:rgba(138,147,255,.18);color:#DDE0FF;font-size:12.5px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-odd{font-size:14px;font-weight:600}
.tk-m-hit .tk-pill{background:rgba(74,222,128,.16);color:#C2F6D3}
.tk-m-miss .tk-pill{background:rgba(240,122,120,.13);color:#F4BDBC}
.tk-m-void .tk-pill{background:rgba(255,255,255,.08);color:var(--tk-mute)}
.tk-r{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;justify-self:center}
.tk-r svg{width:16px;height:16px}
.tk-r-hit{color:var(--tk-hit);background:rgba(74,222,128,.14)}
.tk-r-miss{color:var(--tk-miss);background:rgba(240,122,120,.14)}
.tk-r-void{color:var(--tk-void);background:rgba(255,255,255,.07)}
.tk-r-open{color:var(--tk-acc);background:rgba(138,147,255,.12)}
/* 아래 조각: 합계, 서버 기록, 주인, 바코드 */
.tk-sum{margin:2px 0 0;display:grid;gap:6px}
.tk-sum div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tk-sum dt{font-size:12.5px;color:var(--tk-mute);font-weight:500}
.tk-sum dd{margin:0;font-size:17px;font-weight:600}
.tk-sum .tk-sum-r dt{color:var(--tk-ink);font-weight:600}
.tk-sum .tk-sum-r dd{font-size:21px;font-weight:700}
.tk .up{color:var(--tk-hit)}
.tk .mute{color:var(--tk-mute)}
.tk-ver{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px}
.tk-vb{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:3px 9px 3px 6px;border-radius:7px;background:rgba(74,222,128,.12);color:var(--tk-hit);font-size:12px;font-weight:600}
.tk-vb svg{width:16px;height:16px;flex:none}
.tk-vk{display:inline-flex;align-items:center;gap:4px;color:var(--tk-mute);font-size:11.5px;font-weight:500}
.tk-vk svg{width:14px;height:14px;flex:none}
.tk-own{display:flex;align-items:center;gap:8px;margin-top:10px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.045);min-width:0;color:var(--tk-ink)}
.tk-own .avatar{flex:none}
.tk-on{display:flex;align-items:center;gap:6px;min-width:0;font-size:13.5px}
.tk-on b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-on i{font-style:normal;color:var(--tk-mute);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-bar{margin-top:12px;color:rgba(242,243,248,.86)}
.tk-bc{display:block;width:100%;height:34px;fill:currentColor}
.tk-url{display:block;margin-top:6px;text-align:center;font-weight:600;font-size:13px;color:var(--tk-acc);overflow-wrap:anywhere}
.tk-foot{margin:3px 0 2px;text-align:center;font-size:10.5px;color:var(--tk-mute);font-weight:500}
/* 작은 티켓(커뮤니티 글 속) */
.tk-c .tk-stamp{top:46px;right:12px}
.tk-c .tk-stamp span{font-size:16px;padding:4px 10px 3px;border-width:2.5px}
.tk-c .tk-hd{padding-bottom:30px}
.tk-c .tk-combo{display:none}   /* 작은 티켓은 경기 줄이 그대로 보여 조합 표시 대신 그 자리에 도장 */
.tk-clist{display:grid}
.tk-crow{display:grid;grid-template-columns:22px minmax(0,1fr) auto 36px;gap:8px;align-items:center;padding:7px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px}
.tk-crow .tk-r{width:22px;height:22px}
.tk-crow .tk-r svg{width:14px;height:14px}
.tk-crow .tk-pill{height:22px;line-height:22px;font-size:12px;max-width:88px}
.tk-crow .tk-odd{text-align:right;font-size:13.5px}
.tk-ct{display:flex;gap:5px;min-width:0;font-weight:600}
.tk-ct bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.tk-ct i{font-style:normal;color:var(--tk-mute);font-weight:500;flex:none}
.tk-more{padding:6px 0 0;font-size:12px;color:var(--tk-mute);text-align:center;border-top:1px solid rgba(255,255,255,.05)}
.tk-csum{display:flex;justify-content:space-between;gap:12px}
.tk-csum span{display:flex;flex-direction:column;gap:1px}
.tk-csum span:last-child{align-items:flex-end;text-align:right}
.tk-csum i{font-style:normal;font-size:11.5px;color:var(--tk-mute);font-weight:500}
.tk-csum b{font-size:17px;font-weight:700}
.tk-c .tk-ver{margin-top:10px}
.tk-c .tk-url{margin-top:8px}
.tk-hidden .tk-main{-webkit-mask:none;mask:none;padding-bottom:16px}
.tk-hmsg{margin:2px 0 0;font-size:13px;color:var(--tk-mute);text-align:center}
/* 화면 */
.tk-view{display:grid;gap:12px;padding:6px 0 18px}
.tk-wrap{width:100%;max-width:420px;margin:0 auto}
.tk-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:420px;margin:0 auto}
.tk-acts .g-btn{height:44px;padding:0 12px;min-width:0}
.tk-acts .g-btn svg{width:17px;height:17px;flex:none}
.tk-acts .g-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-priv{width:100%;max-width:420px;margin:0 auto}
.tk-load{display:grid;place-items:center;min-height:260px}
.btn.tk-ib{width:38px;padding:0;flex:none}
.btn.tk-ib svg{width:17px;height:17px}
.btn.tk-open svg{flex:none}
.cm-bet .tk{margin:4px 0 2px}
/* 서버 확인 페이지 /t/<번호> */
.tk-pg{background:#09090B;color:#F4F5F7}
.tk-page{min-height:100dvh;max-width:460px;margin:0 auto;padding:24px 16px 32px;display:grid;align-content:start;gap:16px}
.tk-pcta{margin:0;text-align:center}
.tk-pmsg{text-align:center;padding:64px 0 0}
.tk-pmsg h1{margin:0 0 8px;font-size:21px;font-weight:700}
.tk-pmsg p{margin:0 0 20px;color:#A5A8AF;font-size:14px}
@media (prefers-reduced-motion:reduce){.tk-stamp{animation:none}}
/* ==== /area:ticket ==== */