@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  --paper:#f5f7fb; --surface:#fff; --ink:#172b46; --muted:#52657b;
  --blue:#2563eb; --navy:#122d50; --line:#dce4ef; --soft:#edf4ff;
  --font:'Noto Sans KR','Malgun Gothic',sans-serif;
  --numbers:'Barlow Condensed',Arial,sans-serif;
  font-family:var(--font); color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box }
body { margin:0; font-size:15px; line-height:1.6 }
h1,h2,h3,p { margin:0 }
a { color:inherit; text-decoration:none }
button,input,select { font:inherit; color:inherit }
button,select { cursor:pointer }
button,a,select { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:3px solid #2563eb; outline-offset:4px }
[hidden] { display:none!important }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block }
.skip { position:fixed; left:16px; top:-100px; padding:12px 18px; background:white; border-radius:6px; z-index:100 }
.skip:focus { top:16px }
.page { max-width:1560px; margin:auto; display:grid; grid-template-columns:120px minmax(0,1fr) 120px; gap:28px; align-items:start; padding:38px 24px }
main { width:100%; min-width:0; max-width:1160px; margin:auto; scroll-margin-top:24px }
/* Keep content in the center track when ad blockers hide either side slot. */
.page > main { grid-column:2 }
main:focus { outline:none }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px }
h1 { font-size:30px; line-height:1.3; font-weight:800; letter-spacing:-1.2px }
.page-heading p { margin-top:10px; font-size:14px; color:var(--muted) }
.outline-tag { font-size:12px; color:var(--muted); white-space:nowrap }

/* A single record summary gives the statistics a clear hierarchy. */
.metrics { display:grid; grid-template-columns:1.2fr 1fr 1fr; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:4px 4px 12px 12px; margin-bottom:24px; overflow:hidden }
.metric { position:relative; min-width:0; padding:24px 28px }
.metric+.metric { border-left:1px solid var(--line) }
.metric-label { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--muted) }
.metric-label .icon { display:none }
.metric-number { font:600 48px/1 var(--numbers); font-variant-numeric:tabular-nums; letter-spacing:-.6px; margin:17px 0 13px }
.metric-number>span { font:500 13px var(--font); letter-spacing:0; color:var(--muted); margin-left:6px }
.main-metric { background:#f8fbff }
.main-metric .metric-label { color:#2457a4 }
.main-metric .metric-number { font-size:64px; color:var(--blue); margin:7px 0 10px }
.main-metric .metric-number>span { font:500 28px var(--numbers); color:var(--blue); margin-left:4px }
.metric-note { font-size:12px; color:var(--muted); line-height:1.7 }
.result-numbers { white-space:nowrap }
.result-numbers>i { font-style:normal; font-size:30px; font-weight:500; color:#8da0b7; margin:0 10px }
.result-numbers>b { font-weight:500; color:#6c7d90 }
.mini-track { height:3px; position:absolute; bottom:0; left:0; right:0; background:#e3edfc }
.mini-track>span { display:block; height:100%; background:var(--blue) }
.legend-dot { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; vertical-align:middle }
.win-dot { background:var(--blue) }
.loss-dot { background:#8c98a8; margin-left:13px }

.page-nav { display:flex; gap:28px; border-bottom:1px solid #ced9e8; margin:0 0 28px }
.page-nav>a { display:flex; align-items:center; justify-content:center; gap:8px; position:relative; min-height:51px; padding:8px 3px 13px; font-size:14px; font-weight:500; color:var(--muted); transition:color .15s }
.page-nav>a:hover { color:var(--blue) }
.page-nav>a[aria-current=page] { color:var(--blue); font-weight:700 }
.page-nav>a[aria-current=page]::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:2px 2px 0 0; background:var(--blue) }
.page-nav .icon { width:17px; height:17px }
.nav-count { font:600 12px Arial,sans-serif; color:#56708c; background:#e6edf7; padding:2px 6px; border-radius:4px }
.page-nav>a[aria-current=page] .nav-count { color:var(--blue); background:#e2edff }

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:26px; align-items:start }
.main-column,.right-column { min-width:0 }
.right-column { display:grid; gap:22px; padding-top:2px }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:17px }
h2 { font-size:20px; font-weight:700; letter-spacing:-.7px }
.section-count { display:inline-block; margin-left:5px; font:600 16px var(--numbers); color:#637993; vertical-align:middle }
.section-heading p { font-size:12px; color:var(--muted); margin-top:3px }
.text-link { display:inline-flex; align-items:center; min-height:36px; font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap }
.text-link:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px }
.match-list { display:grid; gap:12px }
.match-row { display:block; width:100%; text-align:left; padding:0; border:1px solid #dce4ef; border-radius:10px; background:var(--surface); overflow:hidden; transition:border-color .16s,box-shadow .16s }
.match-row:hover { border-color:#9bbced; box-shadow:0 3px 12px #17345b08 }
.match-row:focus-visible { outline-offset:2px }
.match-meta { display:flex; align-items:center; gap:12px; min-height:46px; padding:9px 18px; border-bottom:1px solid #e8edf5; background:#fbfcfe; font-size:12px; color:var(--muted) }
.league-label { display:inline-flex; align-items:center; gap:7px; min-width:0; line-height:1.4 }
.league-logo { width:18px; height:18px; flex-shrink:0; object-fit:contain }
.match-time { display:flex; align-items:center; gap:8px; margin-left:auto; white-space:nowrap; font:500 12px Arial,sans-serif; color:#51667e }
.match-time>span { color:#657992 }
.status { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap; font-size:11px; line-height:1.5; font-weight:600; border-radius:4px; padding:3px 7px }
.status::before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor }
.status.win { color:#1d4ed8; background:#eaf2ff }
.status.loss { color:#9b4247; background:#fff0f0 }
.status.pending { color:#475569; background:#edf2f7 }
.pending-section { margin-bottom:34px }
.match-content { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(190px,1fr); align-items:center; gap:20px; padding:17px 18px }
.match-main { display:grid; gap:10px; min-width:0 }
.team-inline { display:flex; align-items:center; gap:11px; min-width:0 }
.team-inline strong { font-size:15px; font-weight:600; line-height:1.45; letter-spacing:-.35px; word-break:keep-all; overflow-wrap:anywhere }
.logo-frame { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0 }
.team-logo { width:100%; height:100%; object-fit:contain }
.team-logo.flag { height:22px; border-radius:2px; box-shadow:0 0 0 1px #1b365510 }
.initial-logo { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-size:12px; font-weight:600; color:#476379; background:#edf1f5 }
.match-prediction { display:grid; grid-template-columns:minmax(0,1fr) 65px; align-items:center; gap:14px; padding-left:20px; border-left:1px solid #e5ebf3; min-height:62px }
.pick-label { display:grid; gap:7px }
.pick-label small,.odds-chip small { font-size:11px; font-weight:400; color:#5d7088 }
.pick-label strong { font-size:13px; font-weight:600; line-height:1.6; color:#254e86; overflow-wrap:anywhere }
.odds-chip { display:grid; gap:3px; text-align:right }
.odds-chip>strong { font:600 30px/1.2 var(--numbers); font-variant-numeric:tabular-nums; color:#173d70 }
.odds-chip>strong>span { margin-left:2px; font:400 11px var(--font); color:var(--muted) }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:10px }
.chart-panel,.sport-panel { padding:20px 18px }
.chart-panel .section-heading,.sport-panel .section-heading { margin-bottom:18px }
.chart-panel h2,.sport-panel h2 { font-size:15px; letter-spacing:-.4px }
.muted { font-size:11px; color:var(--muted) }
#performance-chart { height:130px }
#performance-chart svg { display:block; width:100%; height:100%; overflow:visible }
.chart-bottom { display:flex; justify-content:space-between; padding-right:25px; margin-top:8px; font:11px Arial,sans-serif; color:var(--muted) }
.sport-row { margin-bottom:20px }
.sport-row-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px }
.sport-name { font-size:13px; font-weight:500 }
.sport-name small { font-size:11px; font-weight:400; color:var(--muted); margin-left:7px }
.sport-row-top b { font:600 19px/1.2 var(--numbers); font-variant-numeric:tabular-nums }
.sport-track { height:4px; background:#e8eef7; border-radius:4px; overflow:hidden }
.sport-track>span { display:block; height:100%; background:#4e85dc; border-radius:4px }
.panel-foot { padding-top:13px; border-top:1px solid #e8edf5; font-size:11px; color:var(--muted); line-height:1.8 }

.filters { display:flex; align-items:end; gap:14px; padding:18px; margin-bottom:18px; background:white; border:1px solid var(--line); border-radius:10px }
.filters>label { display:grid; gap:7px }
.filters .search-field { flex:1; min-width:0 }
.field-label { font-size:12px; font-weight:500; color:var(--muted) }
.search-box { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border:1px solid #cbd6e4; border-radius:6px; background:#fff }
.search-box:focus-within { outline:3px solid var(--blue); outline-offset:2px }
.search-box .icon { width:17px; height:17px; flex-shrink:0; color:var(--muted) }
.search-box input { width:100%; min-width:0; border:0; padding:0; font-size:14px; line-height:1.6; background:transparent }
.search-box input:focus-visible { outline:none }
.search-box input::placeholder { color:#65778c }
select { min-height:44px; min-width:130px; padding:9px 30px 9px 12px; border:1px solid #cbd6e4; border-radius:6px; background:white; font-size:14px }
.list-caption { display:flex; justify-content:space-between; gap:12px; margin-bottom:15px; font-size:12px; color:var(--muted) }
.list-caption>span:first-child { font-weight:500; color:#254e86 }
#history-list .match-content { grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr) }
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:26px }
.pagination button { min-width:44px; min-height:44px; padding:8px 12px; border:1px solid #cdd8e7; border-radius:6px; background:white; font-size:13px }
.pagination button:hover { background:#edf4ff }
.pagination button[aria-current=page] { background:var(--blue); border-color:var(--blue); color:white }
.pagination button:disabled { opacity:.4; cursor:default }
.empty { padding:48px 20px; background:white; border:1px solid var(--line); border-radius:10px; font-size:14px; text-align:center; color:var(--muted) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.about-card { padding:26px }
.about-card h2 { font-size:18px; margin-bottom:13px }
.about-card p { font-size:14px; line-height:1.95; color:var(--muted) }
.about-card .text-link { margin-top:12px; color:var(--blue) }
.odds-notice { padding:22px 0 0; margin-top:30px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); text-align:center }

.ad-slot { position:sticky; top:24px; height:600px; min-width:0; margin-top:62px; border:1px solid #e0e5ed; border-radius:5px; display:flex; flex-direction:column; align-items:center; background:#eff2f6; color:#6b778a }
.ad-caption { font-size:10px; padding:12px 0; width:100%; text-align:center; border-bottom:1px solid #e0e5ed }
.ad-placeholder { margin:auto; padding-bottom:36px; font-size:12px; letter-spacing:.3px }

dialog { width:calc(100% - 32px); max-width:610px; max-height:90dvh; border:1px solid #d5dfed; border-radius:14px; padding:25px; color:var(--ink); background:white; box-shadow:0 24px 80px #17315135 }
dialog::backdrop { background:#132b4baa; backdrop-filter:blur(3px) }
dialog[open] { animation:dialog-open .16s ease-out }
@keyframes dialog-open { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px }
.dialog-caption { font-size:13px; font-weight:500; color:var(--muted) }
.icon-button { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:white; color:var(--muted); font-size:25px }
.icon-button:hover { background:#edf4ff }
.detail-meta { display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:12px; color:var(--muted) }
#dialog-title { font-size:24px; line-height:1.5; margin:17px 0 22px; letter-spacing:-.7px }
.detail-teams { display:grid; grid-template-columns:1fr 28px 1fr; align-items:center; text-align:center; gap:10px; margin:24px 0 }
.detail-team { display:flex; flex-direction:column; align-items:center; gap:13px; min-width:0 }
.detail-team .logo-frame { width:60px; height:60px }
.detail-team .team-logo.flag { height:40px }
.detail-team>strong { font-size:16px; font-weight:600; word-break:keep-all; overflow-wrap:anywhere }
.vs { font:500 14px var(--numbers); color:#71839b }
.detail-pick { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px; border:1px solid #cedffc; border-radius:8px; background:#edf4ff; color:#1e50a0 }
.detail-pick span { font-size:14px; font-weight:600 }
.detail-pick strong { font:600 30px var(--numbers) }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 }
.detail-grid>div { padding:14px 16px; border:1px solid var(--line); border-radius:7px }
.detail-grid dt { font-size:12px; color:var(--muted); margin-bottom:8px }
.detail-grid dd { margin:0; font-size:16px; font-weight:600 }
.pick-reason { margin-top:22px; padding-top:19px; border-top:1px solid var(--line) }
.pick-reason h3 { font-size:15px; margin-bottom:12px; font-weight:600 }
.reason-content { min-height:125px; padding:16px; border:1px solid var(--line); border-radius:7px; background:#fafbfd; font-size:15px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere }
.detail-note { font-size:12px; line-height:1.9; color:var(--muted); margin-top:17px }

@media(min-width:1600px) {
  .page { grid-template-columns:160px minmax(0,1fr) 160px; gap:30px; padding:44px 28px }
}
@media(max-width:1279px) {
  .page { grid-template-columns:minmax(0,1fr); max-width:1120px; padding:24px; gap:26px }
  .page > main { grid-column:1 }
  .ad-slot { position:static; height:70px; margin:0; flex-direction:row; border-radius:5px }
  .ad-caption { width:auto; height:100%; padding:0 18px; display:flex; align-items:center; border-bottom:0; border-right:1px solid #e0e5ed }
  .ad-placeholder { padding:0 }
}
@media(max-width:900px) {
  .dashboard-grid { grid-template-columns:1fr }
  .right-column { grid-template-columns:1fr 1fr; gap:18px; padding-top:0 }
  .metric { padding:22px }
  .metric-number { font-size:43px }
  .main-metric .metric-number { font-size:58px }
  .about-grid { grid-template-columns:1fr }
}
@media(max-width:600px) {
  .page { padding:16px; gap:23px }
  h1 { font-size:26px }
  .page-heading { margin-bottom:18px; gap:12px }
  .metrics { grid-template-columns:1fr 1fr; margin-bottom:14px; border-radius:4px 4px 9px 9px }
  .metric { padding:18px; border:0 }
  .main-metric { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; align-items:center; padding:17px 18px 19px }
  .main-metric .metric-label { grid-column:1; grid-row:1 }
  .main-metric .metric-note { grid-column:1; grid-row:2; font-size:11px }
  .main-metric .metric-number { grid-column:2; grid-row:1/3; margin:0; font-size:56px }
  .main-metric .metric-number>span { font-size:23px }
  .metric+.metric { border-left:0 }
  .metric:last-child { border-left:1px solid var(--line) }
  .metric-label { font-size:12px }
  .metric-number { font-size:39px; margin:10px 0 9px }
  .metric-note { font-size:11px }
  .metric-number>span { font-size:12px }
  .result-numbers>i { font-size:26px; margin:0 7px }
  .page-nav { gap:0; margin-bottom:23px }
  .page-nav>a { flex:1; min-height:49px; padding:9px 2px 12px; gap:6px; font-size:13px; white-space:nowrap }
  .page-nav .icon { width:16px; height:16px }
  .nav-count { display:none }
  h2 { font-size:18px }
  .section-heading { margin-bottom:13px; gap:10px }
  .section-heading p { font-size:11px }
  .text-link { font-size:11px }
  .match-list { gap:10px }
  .match-meta { padding:9px 12px; gap:8px; font-size:11px; flex-wrap:wrap }
  .match-meta .league-label { max-width:calc(100% - 64px) }
  .match-time { order:3; margin:0; width:100%; padding-left:23px; font-size:11px; gap:7px }
  .match-meta .status { margin-left:auto }
  .league-logo { width:16px; height:16px }
  .match-content,#history-list .match-content { grid-template-columns:minmax(0,1fr); gap:15px; padding:14px }
  .match-main { gap:9px }
  .team-inline { gap:10px }
  .team-inline strong { font-size:15px }
  .logo-frame { width:29px; height:29px }
  .team-logo.flag { height:20px }
  .match-prediction { grid-template-columns:minmax(0,1fr) auto; min-height:0; padding:12px 0 0; border-left:0; border-top:1px solid #e5ebf3 }
  .pick-label { gap:4px }
  .pick-label strong { font-size:12px }
  .pick-label small,.odds-chip small { font-size:10px }
  .odds-chip { display:flex; align-items:baseline; gap:7px }
  .odds-chip>strong { font-size:27px }
  .right-column { grid-template-columns:1fr; gap:16px }
  .chart-panel,.sport-panel { padding:19px }
  .chart-bottom { font-size:12px }
  .filters { flex-wrap:wrap; gap:13px; padding:14px }
  .filters .search-field { flex-basis:100% }
  .filters>label:not(.search-field) { flex:1; min-width:0 }
  .filters select { width:100%; min-width:0; font-size:13px }
  .search-box input { font-size:14px }
  .list-caption { flex-wrap:wrap; gap:5px; font-size:11px }
  .pagination { gap:6px }
  .pagination button { padding:8px 10px }
  .ad-slot { height:60px }
  .odds-notice { font-size:11px; line-height:1.8; margin-top:25px }
  .about-card { padding:21px }
  dialog { padding:20px; max-height:92dvh }
  #dialog-title { font-size:21px }
  .detail-team>strong { font-size:14px }
  .detail-team .logo-frame { width:50px; height:50px }
  .detail-team .team-logo.flag { height:33px }
  .reason-content { min-height:115px }
}
#chart-dates { position:relative; height:20px }
#chart-dates>span { position:absolute; transform:translateX(-50%) }
#chart-dates>span:first-child { transform:none }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }