/* 말파고 라이브 — /malpago/live (2026-11-07, 시안 캔버스 tobe-live-web).
   토큰은 앱 docs/LIVE_RACE_WIDGET.md "디자인 토큰": ink #17243A · cobalt #3157A4 · ice #D8E4FA · tint #EFF3FB,
   밤 카드 #17243A/#24375A, 글자 #F3F6FB/#AEBBD0, 신호 밤 #FFB547 · 낮 #8A5A00. 민트·청록 없음.
   마번 칩은 공식 번호색, 숫자 항상 표기, 글자 대비 4.5:1 이상. 숫자는 고정폭. 누르는 것은 44px. */
.mp-live .mp-page { max-width: 560px; padding-left: 16px; padding-right: 16px; padding-top: 12px; }
.mp-embed.mp-live .mp-page { padding-top: 8px; }

.lv {
  --lv-ink: #17243A; --lv-cobalt: #3157A4; --lv-ice: #D8E4FA; --lv-tint: #EFF3FB; --lv-line: #B8C3D6;
  --lv-muted: #596579; --lv-body: #3D4A5E; --lv-action: #244583; --lv-signal: #8A5A00; --lv-signal-fill: #C77700;
  --lv-night-base: #111C2E; --lv-night-card: #17243A; --lv-night-raised: #24375A;
  --lv-night-text: #F3F6FB; --lv-night-sub: #AEBBD0; --lv-night-signal: #FFB547;
  --lv-up: #C62828;
  color: var(--lv-ink); font-variant-numeric: tabular-nums; word-break: keep-all;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.lv .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lv button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lv a { color: var(--lv-action); }
.lv .num { font-variant-numeric: tabular-nums; }

/* 머리 ‹ 경주 › */
.lv-head { display: flex; align-items: center; gap: 4px; min-height: 48px; }
.lv-nav { flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 26px; font-weight: 900; color: var(--lv-muted); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.lv-nav:hover { background: #E3E8F1; }
.lv-nav:disabled { opacity: .3; cursor: default; background: none; }
.lv-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lv-title b { font-size: 17px; font-weight: 900; line-height: 1.25; }
.lv-title b.is-cancelled { text-decoration: line-through; color: var(--lv-muted); }
.lv-title span { font-size: 12px; color: var(--lv-muted); line-height: 1.4; }
.lv-title .lv-fix { color: var(--lv-signal); font-weight: 700; }

/* 토글 알약 */
.lv-toggles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lv-pill { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--lv-line); color: var(--lv-ink); background: #fff; }
.lv-pill::after { content: ''; position: absolute; inset: -4px; }   /* 누르는 범위 44px */
.lv-pill[aria-pressed="true"] { background: var(--lv-ink); color: #fff; box-shadow: none; font-weight: 800; }
.lv-pill:disabled { opacity: .45; cursor: default; }

/* 주인공 카드 */
.lv-hero { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 0 rgba(23, 36, 58, .06); }
.lv-hero--pre, .lv-hero--wait, .lv-hero--first, .lv-hero--tbd { background: var(--lv-night-card); color: var(--lv-night-text); }
.lv-hero--result { background: var(--lv-ice); gap: 8px; }
.lv-hero--ended, .lv-hero--none, .lv-hero--cancelled, .lv-hero--loading { background: #fff; color: var(--lv-ink); }
.lv-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--lv-night-sub); }
.lv-hero-top .lv-state { font-size: 12px; font-weight: 700; }
.lv-hero--pre.is-urgent .lv-state { color: var(--lv-night-signal); }
.lv-count { font-size: 54px; font-weight: 900; line-height: .95; letter-spacing: -.01em; color: var(--lv-night-text); }
.lv-hero--pre.is-urgent .lv-count { color: var(--lv-night-signal); }
.lv-count.is-quiet { font-size: 34px; line-height: 1.1; }
.lv-bar { position: relative; height: 6px; border-radius: 3px; background: var(--lv-night-raised); margin-top: 4px; overflow: visible; }
.lv-bar .lv-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--lv-ice); transition: width .6s linear; }
.lv-hero--pre.is-urgent .lv-bar .lv-fill { background: var(--lv-night-signal); }
.lv-bar .lv-tick { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--lv-ice); border-radius: 1px; }
.lv-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--lv-night-sub); }
.lv-hero-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--lv-night-sub); margin-top: 4px; }
.lv-hero-row .lv-val { color: var(--lv-ice); margin-left: 2px; }
.lv-hero-row .lv-dim-text { color: var(--lv-night-sub); }
.lv-hero-note { font-size: 13px; color: var(--lv-muted); line-height: 1.6; }
.lv-hero--pre .lv-hero-note, .lv-hero--wait .lv-hero-note, .lv-hero--first .lv-hero-note, .lv-hero--tbd .lv-hero-note { color: var(--lv-night-sub); }
.lv-wait-big { font-size: 30px; font-weight: 900; line-height: 1.1; }
.lv-wait-big .num { font-size: 22px; font-weight: 800; color: var(--lv-night-sub); margin-left: 6px; }
.lv-first-title { font-size: 20px; font-weight: 900; line-height: 1.2; }
.lv-correction { font-size: 12px; font-weight: 700; color: var(--lv-signal); }
.lv-hero--pre .lv-correction, .lv-hero--wait .lv-correction { color: var(--lv-night-signal); }

/* 결과 카드 */
.lv-win { display: flex; align-items: center; gap: 12px; }
.lv-win-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lv-win-text small { font-size: 12px; color: var(--lv-body); }
.lv-win-text strong { font-size: 24px; font-weight: 900; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-places { display: flex; gap: 10px; align-items: center; flex: none; }
.lv-dv { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.lv-dv span { background: var(--lv-tint); border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--lv-muted); min-width: 0; }
.lv-dv b { font-size: 16px; color: var(--lv-ink); line-height: 1.2; }
.lv-dv b.is-small { font-size: 12px; line-height: 1.4; text-align: center; }
.lv-dv-all { font-size: 12px; color: var(--lv-body); line-height: 1.6; }

/* 탭 */
.lv-tabs { display: flex; gap: 4px; background: #E3E8F1; border-radius: 12px; padding: 4px; }
.lv-tab { flex: 1; min-width: 0; min-height: 44px; padding: 8px 2px; text-align: center; font-size: 12px; font-weight: 800; color: var(--lv-muted); border-radius: 9px; line-height: 1.2; }
.lv-tab[aria-selected="true"] { background: var(--lv-ink); color: #fff; }
@media (max-width: 374px) { .lv-tab { font-size: 11px; letter-spacing: -.02em; } }

/* 탭 내용 */
.lv-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lv-sec { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 0 rgba(23, 36, 58, .06); min-width: 0; }
.lv-lab { font-size: 11px; font-weight: 800; color: var(--lv-muted); letter-spacing: .02em; }
.lv-row { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; min-width: 0; }
.lv-row .lv-grow { flex: 1; }
.lv-row.lv-nowrap { flex-wrap: nowrap; }
.lv-meta { font-size: 11px; color: var(--lv-muted); }
.lv-note { font-size: 12px; color: var(--lv-muted); line-height: 1.6; }
.lv-body { font-size: 13px; color: var(--lv-body); line-height: 1.6; }
.lv-signal { font-size: 12px; font-weight: 700; color: var(--lv-signal); }
.lv-up { color: var(--lv-up); font-weight: 900; }
.lv-tbl { display: grid; gap: 5px 8px; font-size: 12px; align-items: center; min-width: 0; }
.lv-tbl .lv-h { color: var(--lv-muted); font-size: 11px; font-weight: 700; }
.lv-tbl .ta-r { text-align: right; }
.lv-tbl .ta-c { text-align: center; }
.lv-tbl .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-tbl .is-withdrawn { text-decoration: line-through; color: var(--lv-muted); }
.lv-tbl .is-big { font-weight: 800; color: var(--lv-signal); }
.lv-tbl-box { background: var(--lv-tint); border-radius: 10px; padding: 8px 10px; }
.lv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lv-lock { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--lv-action); background: #E7EDF9; text-decoration: none; position: relative; }
.lv-lock::after { content: ''; position: absolute; inset: -6px; }
.lv-lock::before { content: '\1F512'; font-size: 11px; }
.lv-link { font-size: 12px; font-weight: 700; color: var(--lv-action); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
.lv-entry { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #EEF1F6; }
.lv-entry:last-child { border-bottom: 0; }
.lv-entry .lv-name { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-entry .lv-name a { color: var(--lv-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-entry .lv-sub { font-size: 11px; color: var(--lv-muted); grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.lv-entry .lv-sub a { color: var(--lv-muted); text-decoration: underline; text-underline-offset: 2px; }
.lv-entry .lv-right { font-size: 11px; color: var(--lv-muted); text-align: right; white-space: nowrap; }
.lv-entry.is-withdrawn .lv-name a, .lv-entry.is-withdrawn .lv-right { text-decoration: line-through; color: var(--lv-muted); }
.lv-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--lv-tint); color: var(--lv-body); white-space: nowrap; }
.lv-notes { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.lv-two { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lv-two small { font-size: 10px; color: var(--lv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tag.is-cancel { background: #E3E8F1; color: var(--lv-muted); }
.lv-tag.is-change { background: #F7EEDB; color: var(--lv-signal); }

/* 마번 칩 — 공식 번호색. 숫자는 항상 보인다. 밝은 바탕의 1번은 테두리. */
.lv-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; border-radius: 7px; font-variant-numeric: tabular-nums; flex: none; width: 26px; height: 26px; font-size: 14px; line-height: 1; }
.lv-chip.lv-xs { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; }
.lv-chip.lv-s { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.lv-chip.lv-m { width: 34px; height: 34px; font-size: 17px; border-radius: 9px; }
.lv-chip.lv-l { width: 56px; height: 56px; font-size: 28px; border-radius: 12px; }
.lv-g1 { background: #FFFFFF; color: #17243A; box-shadow: inset 0 0 0 1.5px #B8C3D6; }
.lv-g2 { background: #FFE23D; color: #17243A; }
.lv-g3 { background: #D32F2F; color: #FFFFFF; }
.lv-g4 { background: #1C1C21; color: #FFFFFF; }
.lv-g5 { background: #1F6FD8; color: #FFFFFF; }
.lv-g6 { background: #21854A; color: #FFFFFF; }
.lv-g7 { background: #7B4B35; color: #FFFFFF; }
.lv-g8 { background: #D81B60; color: #FFFFFF; }
.lv-g9 { background: #8E24AA; color: #FFFFFF; }
.lv-g10 { background: #4FC3F7; color: #17243A; }
.lv-g11 { background: #EFF3FB; color: #17243A; box-shadow: inset 0 0 0 1.5px #B8C3D6; }   /* 11번 이상 중립 (공식 기준 확인 전 임시) */
.lv-hero--pre .lv-g4, .lv-hero--wait .lv-g4, .lv-hero--first .lv-g4 { box-shadow: inset 0 0 0 1.5px #6B7A95; }   /* 어두운 바탕의 4번은 링 */
.lv-hero--pre .lv-g11, .lv-hero--wait .lv-g11, .lv-hero--first .lv-g11 { background: var(--lv-night-raised); color: var(--lv-night-text); box-shadow: none; }
.lv-chip.lv-star::before { content: '★'; position: absolute; right: -7px; top: -8px; font-size: 11px; color: #8A5A00; line-height: 1; }
.lv-chip.lv-hit::after { content: '✓'; position: absolute; right: -6px; top: -7px; width: 15px; height: 15px; border-radius: 8px; background: #17243A; color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-weight: 900; }
.lv-chip.lv-dim { opacity: .4; }
.lv-chips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lv-chips.lv-wide { gap: 9px; }

/* 오늘 일정 · 진행 */
.lv-sched { background: #fff; border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 0 rgba(23, 36, 58, .06); }
.lv-sched-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.lv-progress { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 0 6px; font-size: 12px; color: var(--lv-muted); }
.lv-progress .lv-track { display: inline-flex; align-items: center; gap: 6px; }
.lv-progress .lv-cells { display: inline-flex; gap: 2px; }
.lv-progress .lv-cell { width: 7px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--lv-line); background: #fff; }
.lv-progress .lv-cell.f { background: var(--lv-ink); box-shadow: none; }
.lv-progress .lv-cell.n { background: var(--lv-signal-fill); box-shadow: none; }
.lv-progress .lv-cell.w { background: var(--lv-cobalt); box-shadow: none; }
.lv-progress .lv-cell.c { background: #CBD2DE; box-shadow: none; }
.lv-srow { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 4px 6px; margin: 0 -6px; border-radius: 10px; font-size: 13px; text-align: left; }
.lv-srow:hover { background: var(--lv-tint); }
.lv-srow[aria-current="true"] { background: var(--lv-tint); font-weight: 800; }
.lv-srow .lv-when { font-size: 13px; color: var(--lv-muted); white-space: nowrap; }
.lv-srow .lv-when.is-soon { color: var(--lv-signal); font-weight: 800; }
.lv-srow.is-cancelled { color: var(--lv-muted); }
.lv-srow.is-cancelled .lv-sname { text-decoration: line-through; }
.lv-srow.is-done { color: var(--lv-muted); }

/* 상태 줄 */
.lv-status { font-size: 11px; color: var(--lv-muted); text-align: center; margin: 0; min-height: 16px; }
.lv-status.is-stale { color: var(--lv-signal); font-weight: 700; }
.lv.is-stale .lv-hero, .lv.is-stale .lv-panel { opacity: .75; }

/* 설정 시트 (경마장·승식) */
.lv-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(17, 28, 46, .45); display: flex; align-items: flex-end; justify-content: center; }
.lv-sheet[hidden] { display: none; }
.lv-sheet-box { width: 100%; max-width: 560px; background: #fff; border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -8px 30px rgba(17, 28, 46, .2); }
.lv-sheet-box h2 { margin: 0; font-size: 15px; font-weight: 900; }
.lv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-opt { position: relative; min-height: 44px; padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--lv-line); background: #fff; }
.lv-opt[aria-pressed="true"] { background: var(--lv-ink); color: #fff; box-shadow: none; }
.lv-opt:disabled { opacity: .4; cursor: default; }
.lv-sheet-close { min-height: 48px; border-radius: 12px; background: var(--lv-tint); font-size: 14px; font-weight: 800; color: var(--lv-ink); }

.lv-noscript { font-size: 14px; color: var(--lv-body); line-height: 1.6; }
.lv-empty { font-size: 13px; color: var(--lv-muted); line-height: 1.6; padding: 4px 0; }
.lv-ai-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.lv-ai-line b { font-size: 15px; }
.lv-method { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; gap: 4px 8px; font-size: 12px; align-items: center; }
.lv-method .lv-h { color: var(--lv-muted); font-size: 11px; }