/* ==========================================================================
   UMBRATIO — 웹 체험판
   Stage6_WebReference 디자인 토큰을 그대로 사용한다.
   상단 브라우저 크롬/태스크바는 실제 웹 위에서 도는 페이지이므로 구현하지 않는다.
   ========================================================================== */

:root{
  /* Stage6 토큰 원본 */
  --bg:#030609; --window:#070c10; --panel:#091117; --panel2:#0c161d; --panel3:#101b22;
  --card:#0b151c; --card-sel:#0c1e21;
  --line:#1f323b; --line2:#2a4650; --line3:#263c46;
  --text:#d8e0e4; --muted:#80919a; --faint:#52656e;
  --cyan:#57beb8; --cyan2:#2f7875; --cyan-dim:#65a8a4;
  --amber:#d0a84e; --danger:#bf6660; --green:#78b99e;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Noto Sans KR","Noto Sans JP","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;

  --hdr:52px;      /* 사이트 헤더 */
  --tabs:44px;     /* 화면 탭 */
  --rail:238px;    /* 좌측 레일 */
  --bottom:0px;    /* 모바일 하단 바 높이 (JS가 아니라 미디어쿼리로 전환) */
  --pad:22px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0; padding:0; height:100%;
  background:#010305; color:var(--text);
  font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
body{display:flex; flex-direction:column; min-height:100dvh; overflow:hidden}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:var(--cyan); text-decoration:none}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── 접속 오버레이 ───────────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:200; background:#010305;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  cursor:pointer;
}
#boot.gone{opacity:0; pointer-events:none; transition:opacity .5s ease}
.boot-word{
  font-family:var(--mono); font-size:clamp(24px,5vw,40px); letter-spacing:.44em;
  color:var(--text); text-indent:.44em; opacity:0; animation:bootIn .7s ease .1s forwards;
}
.boot-line{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--cyan2);
  opacity:0; animation:bootIn .5s ease .55s forwards;
}
.boot-bar{width:min(260px,60vw); height:2px; background:#0e1a20; overflow:hidden;
  opacity:0; animation:bootIn .4s ease .45s forwards}
.boot-bar i{display:block; height:100%; width:0; background:var(--cyan);
  animation:bootFill 1.05s cubic-bezier(.4,0,.2,1) .5s forwards}
.boot-skip{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--faint);
  opacity:0; animation:bootIn .4s ease 1s forwards}
@keyframes bootIn{to{opacity:1}}
@keyframes bootFill{to{width:100%}}

/* ── 사이트 헤더 ─────────────────────────────────────────── */
.shell-head{
  flex:0 0 auto; height:var(--hdr); background:var(--panel);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:16px; padding:0 var(--pad); position:relative; z-index:40;
}
/* 좌상단 로고 = 홈 버튼. 이미지는 assets/img/umbratio/logo.png 를 덮어쓰면 교체된다. */
.wordmark{display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:4px 8px 4px 0; background:none; border:0; cursor:pointer}
.wordmark .logo{width:24px; height:24px; flex:0 0 auto; display:flex;
  align-items:center; justify-content:center; overflow:hidden}
.wordmark .logo img{width:100%; height:100%; object-fit:contain; display:block}
.wordmark .wm-text{font-family:var(--mono); font-size:15px; letter-spacing:.2em; color:var(--text);
  transition:color .15s}
.wordmark:hover .wm-text{color:var(--cyan-dim)}

.hud{margin-left:auto; display:flex; align-items:center; gap:18px; flex:0 1 auto; min-width:0}
.hud-item{display:flex; flex-direction:column; line-height:1.25; white-space:nowrap}
.hud-item .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase}
.hud-item .v{font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; color:var(--text)}
.hud-item.debt .v{color:var(--amber)}
.hud-item.cash .v{transition:color .2s}
.hud-item.cash.up .v{color:var(--green)}

.langs{display:flex; gap:1px; flex:0 0 auto; border:1px solid var(--line); background:var(--line)}
.langs button{
  padding:5px 9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  background:var(--panel2); color:var(--faint);
}
.langs button:hover{color:var(--cyan-dim)}
.langs button[aria-pressed="true"]{background:#0c1d20; color:#90d2ce; box-shadow:inset 0 -2px 0 var(--cyan)}

/* ── 화면 탭 ─────────────────────────────────────────────── */
.tabs{
  flex:0 0 auto; height:var(--tabs); background:var(--window);
  border-bottom:1px solid var(--line); display:flex; align-items:stretch;
  padding:0 var(--pad); gap:0; position:relative; z-index:30; overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  display:flex; align-items:center; gap:8px; padding:0 16px; white-space:nowrap;
  font-size:13.5px; color:var(--faint); border-bottom:2px solid transparent;
}
.tab .dot{width:8px; height:8px; border:1px solid currentColor; flex:0 0 auto}
.tab:hover:not(.locked):not(.on){color:var(--cyan-dim); background:#0a1418}
.tab.on{color:#90d2ce; border-bottom-color:var(--cyan); background:#0c1d20}
.tab.locked{color:#3d4c53; cursor:not-allowed}
.tab.locked .dot{border-style:dashed}

/* ── 본문 ────────────────────────────────────────────────── */
.body{flex:1 1 auto; display:flex; min-height:0; background:var(--window)}

.rail{
  flex:0 0 var(--rail); border-right:1px solid var(--line); background:var(--panel);
  padding:18px 16px; overflow-y:auto;
}
.rail-title{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--cyan2);
  text-transform:uppercase; margin-bottom:12px}
.srow{display:flex; justify-content:space-between; gap:10px; padding:7px 0;
  border-bottom:1px solid #14212700; font-size:12.5px}
.srow + .srow{border-top:1px solid #132027}
.srow span{color:var(--muted)}
.srow b{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; color:var(--text)}
.srow b.amber{color:var(--amber)} .srow b.teal{color:#78c9c3} .srow b.bad{color:var(--danger)}
.rail-note{margin-top:18px; padding:12px; border:1px solid var(--line3); background:#081117;
  font-size:11.5px; line-height:1.66; color:var(--faint)}

.stage{
  flex:1 1 auto; min-width:0; overflow-y:auto; padding:20px var(--pad) 28px;
  background:
    repeating-linear-gradient(0deg,transparent 0 45px,rgba(31,50,59,.22) 45px 46px),
    repeating-linear-gradient(90deg,transparent 0 45px,rgba(31,50,59,.22) 45px 46px),
    var(--window);
  scroll-behavior:smooth;
}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--cyan-dim); margin-bottom:5px}
.stage h1{font-size:24px; font-weight:500; margin:0 0 5px; letter-spacing:-.01em}
.stage .lead{color:var(--muted); font-size:13px; margin:0 0 14px}
.section{margin-top:13px; border:1px solid var(--line3); background:#081117}
.section > h2{margin:0; padding:11px 15px; font-size:12.5px; font-weight:500; color:#a8b8be;
  border-bottom:1px solid var(--line3); display:flex; justify-content:space-between; align-items:center}
.section > h2 .hint{font-family:var(--mono); font-size:10.5px; color:var(--faint); font-weight:400}
.section-body{padding:13px}

/* ── 경기 카드 ───────────────────────────────────────────── */
.match-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:13px}
.match-card{
  position:relative; text-align:left; color:inherit; padding:0; overflow:hidden;
  border:1px solid var(--line3); background:var(--card); display:grid; grid-template-rows:1fr auto;
  min-height:150px; transition:border-color .16s, background .16s;
}
.match-card.pick{border-color:var(--cyan2)}
.match-card.pick:hover{background:var(--card-sel); border-color:var(--cyan)}
.match-card.pick.on{background:var(--card-sel); box-shadow:inset 2px 0 0 var(--cyan)}
.match-card.lock{opacity:.5; cursor:not-allowed}
.mc-top{padding:13px 14px}
.mc-tier{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--cyan2); margin-bottom:7px}
.mc-names{font-size:14.5px; line-height:1.45; color:var(--text)}
.mc-names em{font-style:normal; color:var(--faint); margin:0 6px}
.mc-bot{border-top:1px solid #14222a; padding:9px 14px; display:flex; justify-content:space-between; align-items:center}
.mini-odds{font-family:var(--mono); font-size:17px; font-variant-numeric:tabular-nums}
.badge{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; padding:2px 6px;
  border:1px solid currentColor; color:var(--faint)}
.badge.main{color:var(--cyan)} .badge.lk{color:#42555c}

/* ── 선수 비교 ───────────────────────────────────────────── */
.compare{display:grid; grid-template-columns:1fr 226px 1fr; gap:11px; align-items:start}
.fighter{border:1px solid var(--line2); background:linear-gradient(180deg,#0a141b,#081117); overflow:hidden}
.fighter.win{border-color:var(--cyan2)}
/* 초상은 화면 높이에 맞춰 줄인다. 1080p에서 비교 화면 전체가 스크롤 없이 들어와야 한다.
   폭이 아니라 높이에 맞추고 가운데 정렬해, 세로 초상을 넣어도 얼굴이 잘리지 않는다. */
.f-port{position:relative; height:clamp(150px,19vh,232px); background:#0a1319; overflow:hidden;
  border-bottom:1px solid var(--line3);
  display:flex; align-items:center; justify-content:center}
.f-port img{width:auto; height:100%; max-width:100%; object-fit:cover; display:block}
.f-port .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#2b3b43}
.f-side{position:absolute; top:9px; left:9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; padding:2px 7px; background:#050c10cc; border:1px solid var(--line2); color:var(--cyan-dim)}
.f-head{padding:10px 14px; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.f-name{font-size:16px; letter-spacing:.02em}
.f-odds{font-family:var(--mono); font-size:21px; font-variant-numeric:tabular-nums; color:var(--text)}
.f-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--faint)}
.kv{display:flex; justify-content:space-between; gap:10px; padding:6px 14px; font-size:12.5px;
  border-top:1px solid #132027}
.kv span{color:var(--muted)}
.kv b{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums}
.kv b.amber{color:var(--amber)} .kv b.ok{color:var(--green)} .kv b.bad{color:var(--danger)}
.chips{display:flex; flex-wrap:wrap; gap:5px; padding:9px 14px; border-top:1px solid #132027}
.chip{font-size:11px; padding:2px 8px; border:1px solid var(--line3); color:var(--muted); background:#0a1319}
.chip.hidden-info{border-color:var(--amber); color:var(--amber)}

.core{border:1px solid var(--line2); background:#081117; padding:12px;
  display:flex; flex-direction:column; gap:10px}
.core-h{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--cyan2); text-align:center}
.sideval{text-align:center; padding:9px 6px; border:1px solid var(--line3); background:#0a1319}
.sideval small{display:block; font-size:10.5px; color:var(--muted); margin-bottom:5px}
.sideval strong{font-family:var(--mono); font-size:22px; font-variant-numeric:tabular-nums; line-height:1;
  display:block; letter-spacing:-.01em}
.sideval.odds strong{color:var(--text)}
.rate{display:flex; flex-direction:column; gap:5px}
.rate-h{display:flex; justify-content:space-between; font-size:11px; color:var(--muted)}
.rate-h b{font-family:var(--mono); font-weight:500; color:var(--text)}
.bar{height:9px; background:#0e1a20; border:1px solid var(--line3); display:flex; overflow:hidden}
.bar i{display:block; height:100%; transition:width .7s cubic-bezier(.4,0,.2,1)}
.bar i.a{background:var(--cyan)} .bar i.b{background:#4a5f6a}
.bar.shift i.a{background:var(--green)}
.core-note{font-size:11px; line-height:1.6; color:var(--faint); text-align:center}
.core-note.hot{color:var(--amber)}

/* ── 증거 / 정보 카드 ────────────────────────────────────── */
.evi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:11px}
.evi{border:1px solid var(--line3); background:var(--card); padding:11px 13px}
.evi-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:7px}
.evi-top strong{font-size:12.5px; font-weight:500; color:var(--text)}
.evi p{margin:0; font-size:12.5px; line-height:1.65; color:var(--muted)}
.evi-src{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--cyan2)}
.empty{padding:18px 15px; text-align:center; font-size:12.5px; color:var(--faint)}

/* ── 패널 (정보 화면) ────────────────────────────────────── */
.cols{display:grid; grid-template-columns:250px 1fr 320px; gap:13px; align-items:start}
.panel{border:1px solid var(--line3); background:#081117}
.panel-head{padding:10px 14px; border-bottom:1px solid var(--line3); display:flex;
  justify-content:space-between; align-items:center}
.panel-head h3{margin:0; font-size:12.5px; font-weight:500; color:#a8b8be}
.panel-head .hint{font-family:var(--mono); font-size:10px; color:var(--faint)}
.panel-body{padding:13px}
.panel-body.tight{padding:8px}

.broker-card{
  width:100%; text-align:left; display:grid; grid-template-columns:46px 1fr; gap:11px;
  padding:11px; border:1px solid var(--line3); background:var(--card); align-items:center;
}
.broker-card.on{background:var(--card-sel); box-shadow:inset 2px 0 0 var(--cyan)}
.broker-card:hover:not(.on){border-color:var(--line2)}
.bp{width:46px; height:46px; overflow:hidden; background:#0a1319; border:1px solid var(--line3)}
.bp img{width:100%; height:100%; object-fit:cover; display:block}
.bp .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; color:#33454d}
.broker-card .bn{font-size:13.5px; color:var(--text)}
.broker-card .bd{font-size:11px; color:var(--faint); margin-top:2px; line-height:1.5}

.field{margin-bottom:13px}
.field > label{display:block; font-size:11px; letter-spacing:.04em; color:var(--muted); margin-bottom:6px}
.select{position:relative}
.select select{
  width:100%; appearance:none; padding:10px 34px 10px 12px; font-size:13.5px;
  background:#0a1319; border:1px solid var(--line2); color:var(--text); border-radius:0;
}
.select::after{content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--cyan2); pointer-events:none; font-size:12px}
.select select:focus{border-color:var(--cyan2); outline:none}

.cost{border:1px solid var(--line3); background:#0a1319; padding:12px}
.cost-line{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:3px 0}
.cost-line b{font-family:var(--mono); font-weight:500; color:var(--text)}
.cost-total{display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line3); margin-top:9px; padding-top:9px}
.cost-total span{font-size:12px; color:var(--muted)}
.cost-total strong{font-family:var(--mono); font-size:22px; color:#d8c07a; font-variant-numeric:tabular-nums}
.formula{margin-top:8px; font-family:var(--mono); font-size:10px; color:#5f7a7c; line-height:1.6}

/* ── 버튼 ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; font-size:13.5px; border:1px solid var(--line2);
  background:#0a1319; color:var(--text); transition:background .15s,border-color .15s,color .15s;
}
.btn:hover:not(:disabled){background:#0c1e21; border-color:var(--cyan2)}
.btn.primary{background:#0d2b2a; border-color:var(--cyan2); color:#a9e0dc}
.btn.primary:hover:not(:disabled){background:#124240; border-color:var(--cyan)}
.btn.warn{border-color:#5a4a24; color:var(--amber); background:#1a1608}
.btn.warn:hover:not(:disabled){background:#241d0b; border-color:var(--amber)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.block{width:100%}
.btn.lg{padding:14px 22px; font-size:14.5px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.actions .btn{flex:1 1 180px}

/* ── 배팅 ────────────────────────────────────────────────── */
.picks{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.pick{
  text-align:left; padding:15px; border:1px solid var(--line3); background:var(--card);
  display:grid; gap:5px; transition:border-color .15s,background .15s;
}
.pick:hover:not(.on){border-color:var(--line2); background:#0c1a21}
.pick.on{background:var(--card-sel); border-color:var(--cyan)}
.pick .pn{font-size:15px}
.pick .pt{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint)}
.pick .po{font-family:var(--mono); font-size:26px; font-variant-numeric:tabular-nums; margin-top:6px}
.pick.on .po{color:var(--cyan)}

.amts{display:flex; gap:9px; flex-wrap:wrap; margin-top:6px}
.amt{flex:1 1 96px; padding:11px 8px; border:1px solid var(--line3); background:var(--card);
  font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; text-align:center}
.amt:hover:not(.on){border-color:var(--line2)}
.amt.on{background:var(--card-sel); border-color:var(--cyan); color:var(--cyan)}
.slip{border:1px solid var(--line2); background:#0a1319; padding:14px; margin-top:14px}
.slip-row{display:flex; justify-content:space-between; padding:5px 0; font-size:12.5px; color:var(--muted)}
.slip-row b{font-family:var(--mono); font-weight:500; color:var(--text); font-variant-numeric:tabular-nums}
.slip-row.big{border-top:1px solid var(--line3); margin-top:8px; padding-top:11px}
.slip-row.big b{font-size:19px; color:var(--green)}

/* ── LIVE ────────────────────────────────────────────────── */
.live-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line3); margin-bottom:14px}
.live-title{font-family:var(--mono); font-size:14px; letter-spacing:.04em}
.phase-row{display:flex; gap:6px}
.ph{font-family:var(--mono); font-size:10px; letter-spacing:.08em; padding:3px 9px;
  border:1px solid var(--line3); color:#3f525a}
.ph.on{border-color:var(--cyan2); color:var(--cyan); background:#0c1d20}
.ph.done{border-color:var(--line2); color:var(--muted)}
.flowbar{height:10px; background:#0e1a20; border:1px solid var(--line3); display:flex; margin-bottom:16px}
.flowbar i{display:block; height:100%; background:var(--cyan); transition:width .9s cubic-bezier(.4,0,.2,1)}
.flow-legend{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px;
  color:var(--faint); margin-bottom:6px}
.feed{border:1px solid var(--line3); background:#070f14; padding:12px; min-height:230px;
  display:flex; flex-direction:column; gap:7px; overflow-y:auto; max-height:44vh}
.fl{display:grid; grid-template-columns:52px 1fr; gap:11px; font-size:13px; line-height:1.6;
  opacity:0; transform:translateY(4px); animation:flIn .34s ease forwards}
.fl time{font-family:var(--mono); font-size:11px; color:var(--cyan2)}
.fl.hot span{color:var(--amber)}
.fl.fin span{color:var(--text)}
@keyframes flIn{to{opacity:1; transform:none}}

/* ── 결과 ────────────────────────────────────────────────── */
.result{text-align:center; padding:34px 16px}
.res-k{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--cyan2); margin-bottom:12px}
.res-name{font-size:clamp(26px,5vw,40px); letter-spacing:.02em; margin:0 0 6px}
.res-sub{font-family:var(--mono); font-size:13px; color:var(--muted); margin-bottom:26px}
.counter{
  font-family:var(--mono); font-size:clamp(34px,8vw,62px); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; line-height:1;
}
.counter.up{color:var(--green)} .counter.down{color:var(--danger)}
.res-delta{font-family:var(--mono); font-size:16px; margin-top:10px; color:var(--muted)}
.res-delta.up{color:var(--green)} .res-delta.down{color:var(--danger)}

/* ── 종료 화면 ───────────────────────────────────────────── */
#end{position:fixed; inset:0; z-index:150; background:#010305f2; backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:26px; overflow-y:auto}
#end.on{display:flex; animation:fadeIn .8s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.end-box{max-width:620px; width:100%; text-align:center}
.end-verdict{font-size:clamp(17px,3.2vw,22px); line-height:1.7; color:#e6eef0; margin:0 0 22px}
.end-body{font-size:14px; line-height:1.9; color:var(--muted); margin:0 0 30px}
.end-mark{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--cyan2);
  margin-bottom:34px; line-height:2}
.end-actions{display:flex; flex-direction:column; gap:10px}
.end-actions .btn{width:100%}

/* ── 모달 / 토스트 / 로딩 ────────────────────────────────── */
#modal{position:fixed; inset:0; z-index:120; background:#01030599; display:none;
  align-items:center; justify-content:center; padding:22px}
#modal.on{display:flex}
.modal-box{width:min(460px,100%); border:1px solid var(--line2); background:var(--panel2);
  box-shadow:0 18px 60px rgba(0,0,0,.6)}
.modal-box h3{margin:0; padding:14px 18px; font-size:14px; font-weight:500;
  border-bottom:1px solid var(--line3); color:var(--text)}
.modal-body{padding:18px; font-size:13.5px; line-height:1.75; color:var(--muted)}
.modal-body b{color:var(--text); font-family:var(--mono); font-weight:500}
.modal-foot{display:flex; gap:9px; padding:0 18px 18px}
.modal-foot .btn{flex:1}

#load{position:fixed; inset:0; z-index:130; background:#010305e6; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:16px}
#load.on{display:flex}
.load-t{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--cyan-dim)}
.load-bar{width:min(220px,50vw); height:2px; background:#0e1a20; overflow:hidden}
.load-bar i{display:block; height:100%; width:40%; background:var(--cyan);
  animation:loadSlide 1s linear infinite}
@keyframes loadSlide{from{transform:translateX(-100%)}to{transform:translateX(280%)}}

#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:160;
  display:flex; flex-direction:column; gap:8px; pointer-events:none; width:min(420px,calc(100% - 32px))}
.toast{border:1px solid var(--line2); background:var(--panel2); padding:11px 14px;
  font-size:12.5px; color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:toastIn .22s ease}
.toast.lock{border-left:2px solid var(--amber)}
@keyframes toastIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ── 메신저 ──────────────────────────────────────────────── */
#msgr{position:fixed; z-index:140; width:396px; display:none;
  border:1px solid var(--line2); background:var(--panel2); box-shadow:0 20px 60px rgba(0,0,0,.62)}
#msgr.on{display:flex; flex-direction:column; animation:toastIn .24s ease}
.m-head{display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--line3); background:var(--panel); cursor:grab; user-select:none}
.m-head:active{cursor:grabbing}
.m-head .bp{width:30px; height:30px}
.m-head .mt{flex:1; min-width:0}
.m-head .mn{font-size:13px; color:var(--text)}
.m-head .ms{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--cyan2)}
.m-close{width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:15px}
.m-close:hover{color:var(--danger)}
.m-threads{display:flex; gap:1px; background:var(--line3); border-bottom:1px solid var(--line3)}
.m-thread{flex:1; display:flex; align-items:center; gap:8px; padding:8px 11px; background:var(--panel2)}
.m-thread.on{background:#0c1d20; box-shadow:inset 0 -2px 0 var(--cyan)}
.m-thread .bp{width:24px; height:24px}
.m-thread .tn{font-size:12px; color:var(--text)}
.m-unread{margin-left:auto; min-width:17px; height:17px; padding:0 5px; background:var(--amber);
  color:#1a1608; font-family:var(--mono); font-size:10px; display:flex; align-items:center;
  justify-content:center; font-weight:600}
.m-log{padding:14px; display:flex; flex-direction:column; gap:9px; overflow-y:auto;
  height:290px; background:#070f14}
.bub{max-width:78%; padding:9px 12px; font-size:12.5px; line-height:1.66;
  opacity:0; transform:translateY(5px); animation:flIn .28s ease forwards}
.bub.helper{align-self:flex-start; background:#0d1c22; border:1px solid var(--line3); color:var(--text)}
.bub.player{align-self:flex-end; background:#123330; border:1px solid var(--cyan2); color:#c7e8e5}
.bub.sys{align-self:center; background:none; border:0; color:var(--faint); font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; max-width:100%}
.m-typing{align-self:flex-start; display:flex; gap:4px; padding:10px 12px;
  background:#0d1c22; border:1px solid var(--line3)}
.m-typing i{width:5px; height:5px; background:var(--cyan2); display:block; animation:blink 1.1s infinite}
.m-typing i:nth-child(2){animation-delay:.18s} .m-typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.m-foot{padding:10px 12px; border-top:1px solid var(--line3); background:var(--panel)}

/* ── 하단 고정 바 (모바일) ──────────────────────────────── */
.dock{display:none}

/* ==========================================================================
   반응형 — 데스크톱 / 태블릿 / 모바일 배치를 따로 만든다
   ========================================================================== */

/* 태블릿 */
@media (max-width:1199px){
  :root{--rail:0px; --pad:18px}
  .rail{display:none}
  .cols{grid-template-columns:1fr 1fr; }
  .cols .panel.wide{grid-column:1 / -1}
  .compare{grid-template-columns:1fr 196px 1fr; gap:10px}
  .stage h1{font-size:23px}
}

/* 모바일 — 세로 1열 + 하단 탭바 + 하단 액션 도크 */
@media (max-width:767px){
  :root{--hdr:48px; --tabs:0px; --pad:14px; --bottom:112px}
  body{font-size:15.5px}

  .shell-head{gap:10px; padding:0 14px}
  .wordmark .wm-text{font-size:13px; letter-spacing:.16em}
  /* 현금·채무는 바로 아래 상태 스트립에 있으므로 헤더에서는 뺀다 */
  .hud{display:none}
  .langs button{padding:6px 9px; font-size:10.5px}

  /* 상단 탭 → 하단 고정 탭바 */
  .tabs{
    position:fixed; left:0; right:0; bottom:0; top:auto; height:56px; z-index:45;
    border-top:1px solid var(--line); border-bottom:0; background:var(--panel);
    padding:0; justify-content:space-around; overflow:visible;
  }
  .tab{flex:1; flex-direction:column; gap:3px; padding:0 4px; font-size:10.5px;
    border-bottom:0; border-top:2px solid transparent; justify-content:center}
  .tab.on{border-top-color:var(--cyan); border-bottom-color:transparent}
  .tab .dot{width:9px; height:9px}

  .stage{padding:18px 14px calc(56px + var(--bottom))}
  .stage h1{font-size:21px}
  .stage .lead{font-size:13px}

  /* 상태를 본문 상단 스트립으로 */
  .rail{display:block; flex:0 0 auto; border-right:0; border-bottom:1px solid var(--line);
    padding:11px 14px; position:relative; z-index:20}
  .body{flex-direction:column}
  .rail-title,.rail-note{display:none}
  .rail .srow{display:inline-flex; flex:0 0 auto; border:0; padding:0 14px 0 0;
    font-size:11.5px; gap:6px; align-items:baseline; white-space:nowrap}
  .rail .srow span,.rail .srow b{white-space:nowrap}
  .rail .srow + .srow{border-top:0; border-left:1px solid #16242b; padding-left:14px}
  /* 가로 스크롤 스트립. 오른쪽 끝을 페이드해서 잘린 게 아니라 이어진다는 걸 보여준다. */
  .rail-strip{display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:0;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%)}
  .rail-strip::-webkit-scrollbar{display:none}

  .match-grid{grid-template-columns:1fr; gap:10px}
  .match-card{min-height:0}

  /* 선수 비교: A / 배당 / B 세로 스택 */
  .compare{grid-template-columns:1fr; gap:11px}
  .core{order:-1}
  .f-port{height:clamp(160px,24vh,215px)}
  .f-name{font-size:17px} .f-odds{font-size:22px}

  .cols{grid-template-columns:1fr; gap:11px}
  .picks{grid-template-columns:1fr}
  .amt{flex:1 1 calc(50% - 5px)}
  .evi-grid{grid-template-columns:1fr}
  .feed{max-height:none; min-height:190px}

  /* 주 CTA를 하단 도크로 */
  .actions{display:none}
  .dock{
    display:flex; position:fixed; left:0; right:0; bottom:56px; z-index:44; gap:8px;
    padding:10px 14px; background:var(--panel); border-top:1px solid var(--line);
  }
  .dock .btn{flex:1; padding:13px 10px; font-size:13.5px}
  .dock:empty{display:none}

  /* 메신저 → 바텀시트 */
  #msgr{left:0!important; right:0; bottom:0; top:auto!important; width:100%;
    border-left:0; border-right:0; border-bottom:0; max-height:82dvh}
  #msgr.on{animation:sheetIn .26s ease}
  .m-head{cursor:default}
  .m-log{height:auto; flex:1 1 auto; min-height:180px; max-height:52dvh}
  @keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}

  #toast{bottom:calc(56px + var(--bottom) + 10px)}
  .end-actions{gap:9px}
}

@media (max-width:359px){
  .hud-item.debt{display:none}
  .wordmark .wm-text{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}