:root {
	--aispo-border: #e5e7eb;
	--aispo-muted: #6b7280;
	--aispo-text: #1f2937;
	--aispo-bg: #ffffff;
	--aispo-radius: 10px;
	--aispo-home: #3b82f6;
	--aispo-draw: #9ca3af;
	--aispo-away: #ef4444;
	--aispo-track: #eef2f7;
	--aispo-accent: #2563eb;
	--aispo-pick-bg: #f0fdf4;
	--aispo-pick-color: #15803d;
}

.aispo-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 16px 60px;
	font-family: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
	color: var(--aispo-text);
}

.aispo-topbar { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.aispo-topbar h1 { font-size:22px; margin:0; }
.aispo-topbar small { color: var(--aispo-muted); }

.aispo-date-nav { display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 0; }
.aispo-date-nav a { text-decoration:none; color: var(--aispo-accent); font-weight:600; }

.aispo-filter { display:flex; flex-wrap:wrap; gap:6px; padding:12px 0; border-bottom:1px solid var(--aispo-border); margin-bottom:12px; }
.aispo-tab { padding:6px 14px; border:1px solid var(--aispo-border); border-radius: var(--aispo-radius); text-decoration:none; color: var(--aispo-text); font-size:13px; white-space:nowrap; }
.aispo-tab.active { background: var(--aispo-accent); color:#fff; border-color: var(--aispo-accent); }

.aispo-hitrate {
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	margin-bottom:16px; padding:10px 14px; border-radius: var(--aispo-radius);
	background:#f0f7ff; border:1px solid #dbe7fb; font-size:13px; color:#334155;
}
.aispo-hitrate-pct { margin-left:auto; font-weight:800; font-size:17px; color: var(--aispo-accent); }
.aispo-hitrate-frac { color:#94a3b8; }

.aispo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.aispo-card {
	background: var(--aispo-bg); border:1px solid var(--aispo-border); border-radius: var(--aispo-radius);
	padding:12px; text-decoration:none; color:inherit; display:flex; flex-direction:column;
	box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease;
}
.aispo-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.aispo-card-head { display:flex; align-items:center; gap:6px; font-size:11px; margin-bottom:10px; }
.aispo-sport-tag { background:#dbeafe; color:#1d4ed8; padding:2px 8px; border-radius:6px; font-weight:600; }
.aispo-kick { margin-left:auto; color: var(--aispo-muted); }

.aispo-match { display:grid; grid-template-columns: 1fr auto 1fr; gap:6px; align-items:center; }
.aispo-team { text-align:center; }
.aispo-team-name { font-size:13px; font-weight:600; margin-top:4px; line-height:1.3; }
.aispo-vs { color: var(--aispo-muted); font-weight:700; font-size:12px; }

.aispo-fallback-avatar {
	width:40px; height:40px; border-radius:50%; background: var(--aispo-border);
	display:flex; align-items:center; justify-content:center; margin:0 auto;
	font-weight:700; color: var(--aispo-muted);
}

.aispo-card-foot { margin-top:auto; padding-top:10px; }
.aispo-winbar { display:flex; height:8px; border-radius:4px; overflow:hidden; background: var(--aispo-track); }
.aispo-winbar > span.h { background: var(--aispo-home); }
.aispo-winbar > span.d { background: var(--aispo-draw); }
.aispo-winbar > span.a { background: var(--aispo-away); }
.aispo-winbar-legend { display:flex; justify-content:space-between; font-size:10px; color: var(--aispo-muted); margin-top:3px; }
.aispo-winbar-legend .h { color: var(--aispo-home); }
.aispo-winbar-legend .d { color: var(--aispo-draw); }
.aispo-winbar-legend .a { color: var(--aispo-away); }

.aispo-pick {
	margin-top:10px; padding:7px 10px; border-radius:7px; text-align:center;
	background: var(--aispo-pick-bg); color: var(--aispo-pick-color); font-weight:700; font-size:13px;
}
.aispo-pick-pending { background:#f3f4f6; color: var(--aispo-muted); font-weight:500; }

.aispo-empty { text-align:center; padding:48px 16px; color: var(--aispo-muted); }

/* 상세 */
.aispo-back { display:inline-block; margin-bottom:12px; color: var(--aispo-accent); text-decoration:none; font-weight:600; }
.aispo-header { background:#0f172a; color:#f8fafc; padding:24px 16px; border-radius: var(--aispo-radius); }
.aispo-header-meta { text-align:center; color:#cbd5e1; font-size:12px; margin-bottom:14px; }
.aispo-header-match { display:grid; grid-template-columns: 1fr auto 1fr; gap:12px; align-items:center; max-width:600px; margin:0 auto; }
.aispo-header-team { text-align:center; }
.aispo-header-team-name { font-size:16px; font-weight:700; margin-top:8px; }
.aispo-header-vs { color:#fbbf24; font-weight:800; font-size:22px; text-align:center; }
.aispo-header-score { text-align:center; margin-top:12px; font-size:24px; font-weight:800; letter-spacing:2px; }

.aispo-sections { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.aispo-sec { background:#f8fafc; border-radius: var(--aispo-radius); padding:16px; }
.aispo-sec-title { font-weight:700; color: var(--aispo-accent); margin-bottom:10px; font-size:14px; }
.aispo-sec-body { line-height:1.7; font-size:14px; }

.aispo-stats-head { display:flex; justify-content:space-between; font-weight:700; font-size:12px; margin-bottom:8px; }
.aispo-stats-head .h { color: var(--aispo-home); }
.aispo-stats-head .a { color: var(--aispo-away); }
.aispo-stat { margin-bottom:8px; }
.aispo-stat-row { display:flex; justify-content:space-between; font-size:12px; margin-bottom:3px; }
.aispo-stat-label { color: var(--aispo-muted); }
.aispo-stat-bar { display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; background: var(--aispo-track); }
.aispo-stat-bar .h { background: var(--aispo-home); }
.aispo-stat-bar .a { background: var(--aispo-away); opacity:.85; }

.aispo-form-team { margin-bottom:10px; }
.aispo-form-name { font-size:13px; font-weight:600; margin-bottom:4px; }
.aispo-form-dots { display:flex; gap:4px; }
.aispo-form-dot { width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.aispo-form-dot.w { background:#16a34a; }
.aispo-form-dot.l { background:#ef4444; }
.aispo-form-dot.d { background:#9ca3af; }

.aispo-h2h-row { display:flex; align-items:center; gap:6px; font-size:12px; padding:5px 8px; border-radius:6px; margin-bottom:4px; background: rgba(0,0,0,.02); }
.aispo-h2h-date { color: var(--aispo-muted); min-width:76px; flex-shrink:0; }
.aispo-h2h-t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aispo-h2h-t.home { text-align:right; }
.aispo-h2h-score { font-weight:700; padding:0 6px; color: var(--aispo-accent); }
.aispo-h2h-summary { font-size:12px; line-height:1.6; color: var(--aispo-muted); margin-top:8px; }

.aispo-factor { display:flex; gap:8px; margin-bottom:8px; font-size:13px; line-height:1.6; }
.aispo-factor-num {
	flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:700; background: var(--aispo-accent); color:#fff; margin-top:1px;
}

.aispo-pred-summary { font-size:14px; line-height:1.7; margin-bottom:14px; }
.aispo-pred-pick { margin-top:12px; padding:10px 12px; border-radius:8px; text-align:center; background:#eff6ff; }
.aispo-pred-pick .lbl { font-size:11px; color: var(--aispo-muted); margin-bottom:2px; }
.aispo-pred-pick .val { font-size:16px; font-weight:800; color:#1d4ed8; }

.aispo-nav { display:flex; justify-content:center; padding:20px 0; }
.aispo-nav a { color: var(--aispo-accent); text-decoration:none; font-weight:600; }

@media (prefers-color-scheme: dark) {
	.aispo-card, .aispo-sec { background:#1e293b; border-color:#334155; }
	.aispo-wrap { color:#e2e8f0; }
}