/* cere Calm Console — 여섯 컨트롤패널 공용 스타일 (정본: cumplete/cp-auth design/calm_console.css · 바이트 사본을 각 레포 static/ 에 둔다)
   토큰: :root(밝은) · [data-theme=dark] · prefers-color-scheme 자동 · 강조 변형 [data-accent=sky|steel](기본 royal 은 속성 없음)
   부품 클래스는 전부 cc- 접두(.cc-top .cc-tabs .cc-card …) — 기존 앱 클래스와 충돌하지 않는다. 디자인 정본: 디자인 시스템 아티팩트 tokens.json
   글자(2026-10-13 사용자 「글꼴 맑은 고딕 · 크기 +1단계 · 흐린 글씨 진하게」 — 비교 https://claude.ai/artifact/At3bf59tkb7JsvGsstC78J): 본문은 내려받지 않는 시스템 한글 글꼴
   (Windows 맑은 고딕 — ClearType 용 힌팅 · Mac Apple SD Gothic Neo) · 숫자·코드는 IBM Plex Mono(그 칸의 한글도 같은 시스템 글꼴) · 16px 미만 글자는 옛 값보다 한 단계 크게
   (정수 px) · 흐린 글씨 --text-3 은 바탕 대비 7:1 안팎(밝은 #4B5563 · 어두운 #B4BCC7). 옛 IBM Plex Sans KR 은 Windows 9~16px 에서 세로 부드럽게 하기가 꺼진 판이라 한글이 뭉개졌다. */
:root{
 --page:#F4F5F7;--surface:#FFFFFF;--surface-2:#F9FAFB;--surface-3:#F3F4F6;--line:#E5E7EB;--line-soft:#EEF0F3;--line-strong:#D1D5DB;
 --text:#111827;--text-2:#374151;--text-3:#4B5563;--icon:#8A919E;--ph:#7A818D;
 --accent:#2563EB;--accent-hover:#1D4ED8;--accent-weak:#DBEAFE;--accent-line:#BFDBFE;--on-weak:#1E40AF;--link:#1D4ED8;--on-accent:#FFFFFF;--info-text:#1E3A8A;
 --g-dot:#16A34A;--g-pill:#DCFCE7;--g-text:#166534;--g-card:#F5FCF8;--g-bd:#CFEFDB;
 --a-dot:#F59E0B;--a-pill:#FEF3C7;--a-text:#92400E;--a-card:#FFFBEE;--a-bd:#F6E0A1;
 --n-dot:#9CA3AF;--n-pill:#F3F4F6;--n-text:#4B5563;--n-card:#FAFAFB;--n-bd:#ECEEF1;
 --red:#DC2626;--danger:#DC2626;--danger-hover:#B91C1C;--red-weak:#FEF2F2;--red-text:#B91C1C;--red-line:#FECACA;--red-pill:#FEE2E2;--red-pill-text:#991B1B;
 --track:#EEF0F3;--lo:#2563EB;--lo-t:#1E40AF;--mid:#F59E0B;--mid-t:#B45309;--hi:#DC2626;--hi-t:#B91C1C;
 --stale:rgba(100,116,139,.12);--hatch:rgba(100,116,139,.45);
 /* 데이터 의미색 — A(홈·왼쪽 선수·1팀) 파랑 · B(원정·오른쪽·2팀) 주황 · 무승부/중립 회색. 빨강은 '나쁨·위험' 전용이라 B 에 쓰지 않는다.
    정·오(pos/neg) 초록·빨강 표준 = TT-engine 원래 --good/--bad 값(2026-09-26 사용자: 색 패치 이전으로 롤백, 전체 패널 표준) */
 --side-a:#1D4ED8;--side-a-fill:#2563EB;--side-a-weak:#DBEAFE;--on-side-a:#FFFFFF;
 --side-b:#C2410C;--side-b-fill:#C2410C;--side-b-weak:#FFEDD5;--on-side-b:#FFFFFF;
 --side-n:#6B7280;--side-n-fill:#9CA3AF;--side-n-weak:#F3F4F6;--on-side-n:#111827;
 --pos:#17854f;--pos-fill:#17854f;--pos-weak:rgba(23,133,79,.12);--neg:#c94550;--neg-fill:#c94550;--neg-weak:rgba(201,69,80,.12);
 --warn:#92400E;--warn-fill:#F59E0B;--warn-weak:#FEF3C7;--info:#0369A1;--info-fill:#0EA5E9;--info-weak:#E0F2FE;
 /* 계열(모델·선 그래프) — s1 = 운영·주 모델(강조색과 같다) · 비교 모델은 s2 부터 차례로(s2 청록 · s5 만 채도 낮춘 보라, 다섯째 모델에만) */
 --s1:#2563EB;--s2:#0D9488;--s3:#DB2777;--s4:#B45309;--s5:#6D5BD0;--s6:#64748B;
 --sh-card:0 1px 2px rgba(16,24,40,.05);--sh-dlg:0 24px 48px -12px rgba(16,24,40,.22),0 0 0 1px rgba(16,24,40,.06);
 --sh-pop:0 12px 24px -6px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.06);--sh-seg:0 1px 2px rgba(16,24,40,.08),0 0 0 1px rgba(16,24,40,.04);
 --ring:0 0 0 3px rgba(37,99,235,.25);--toast:#111827;--toast-ok:#86EFAC;--backdrop:rgba(17,24,39,.4);
 --mark:#4F46E5;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:14px;--r-pill:999px;
 --sans:'Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
 --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Apple SD Gothic Neo','Malgun Gothic',monospace;}
:root[data-theme="dark"]{
 --page:#0B0D12;--surface:#12151C;--surface-2:#171B24;--surface-3:#1E232E;--line:#262B36;--line-soft:#1F242E;--line-strong:#353C4A;
 --text:#E8EAEE;--text-2:#C1C7D1;--text-3:#B4BCC7;--icon:#737B8A;--ph:#7D8594;
 --accent:#2563EB;--accent-hover:#3B82F6;--accent-weak:rgba(96,165,250,.16);--accent-line:rgba(96,165,250,.38);--on-weak:#BFDBFE;--link:#93C5FD;--on-accent:#FFFFFF;--info-text:#BFDBFE;
 --g-dot:#22C55E;--g-pill:rgba(34,197,94,.14);--g-text:#86EFAC;--g-card:rgba(34,197,94,.06);--g-bd:rgba(34,197,94,.22);
 --a-dot:#F59E0B;--a-pill:rgba(245,158,11,.16);--a-text:#FCD34D;--a-card:rgba(245,158,11,.07);--a-bd:rgba(245,158,11,.25);
 --n-dot:#6B7280;--n-pill:#1D222C;--n-text:#AAB2BE;--n-card:#161A23;--n-bd:#2A303C;
 --red:#F87171;--danger:#DC2626;--danger-hover:#EF4444;--red-weak:rgba(248,113,113,.12);--red-text:#FCA5A5;--red-line:rgba(248,113,113,.35);--red-pill:rgba(248,113,113,.16);--red-pill-text:#FCA5A5;
 --track:#232833;--lo:#60A5FA;--lo-t:#93C5FD;--mid:#FBBF24;--mid-t:#FCD34D;--hi:#F87171;--hi-t:#FCA5A5;
 --stale:rgba(148,163,184,.14);--hatch:rgba(148,163,184,.4);
 --side-a:#7AB2FF;--side-a-fill:#2F6FD8;--side-a-weak:rgba(96,165,250,.16);--on-side-a:#FFFFFF;
 --side-b:#FB923C;--side-b-fill:#F0913A;--side-b-weak:rgba(251,146,60,.16);--on-side-b:#0B0D12;
 --side-n:#9CA3AF;--side-n-fill:#4B5563;--side-n-weak:rgba(156,163,175,.14);--on-side-n:#E8EAEE;
 --pos:#3fb984;--pos-fill:#3fb984;--pos-weak:rgba(63,185,132,.15);--neg:#e26d76;--neg-fill:#e26d76;--neg-weak:rgba(226,109,118,.15);
 --warn:#FCD34D;--warn-fill:#F59E0B;--warn-weak:rgba(245,158,11,.16);--info:#7DD3FC;--info-fill:#0EA5E9;--info-weak:rgba(14,165,233,.16);
 --s1:#60A5FA;--s2:#2DD4BF;--s3:#F472B6;--s4:#FBBF24;--s5:#A99BF0;--s6:#94A3B8;
 --sh-card:0 1px 2px rgba(0,0,0,.3);--sh-dlg:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
 --sh-pop:0 12px 24px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);--sh-seg:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);
 --ring:0 0 0 3px rgba(96,165,250,.35);--toast:#E8EAEE;--toast-ok:#15803D;--backdrop:rgba(0,0,0,.6);
 color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --page:#0B0D12;--surface:#12151C;--surface-2:#171B24;--surface-3:#1E232E;--line:#262B36;--line-soft:#1F242E;--line-strong:#353C4A;
 --text:#E8EAEE;--text-2:#C1C7D1;--text-3:#B4BCC7;--icon:#737B8A;--ph:#7D8594;
 --accent:#2563EB;--accent-hover:#3B82F6;--accent-weak:rgba(96,165,250,.16);--accent-line:rgba(96,165,250,.38);--on-weak:#BFDBFE;--link:#93C5FD;--on-accent:#FFFFFF;--info-text:#BFDBFE;
 --g-dot:#22C55E;--g-pill:rgba(34,197,94,.14);--g-text:#86EFAC;--g-card:rgba(34,197,94,.06);--g-bd:rgba(34,197,94,.22);
 --a-dot:#F59E0B;--a-pill:rgba(245,158,11,.16);--a-text:#FCD34D;--a-card:rgba(245,158,11,.07);--a-bd:rgba(245,158,11,.25);
 --n-dot:#6B7280;--n-pill:#1D222C;--n-text:#AAB2BE;--n-card:#161A23;--n-bd:#2A303C;
 --red:#F87171;--danger:#DC2626;--danger-hover:#EF4444;--red-weak:rgba(248,113,113,.12);--red-text:#FCA5A5;--red-line:rgba(248,113,113,.35);--red-pill:rgba(248,113,113,.16);--red-pill-text:#FCA5A5;
 --track:#232833;--lo:#60A5FA;--lo-t:#93C5FD;--mid:#FBBF24;--mid-t:#FCD34D;--hi:#F87171;--hi-t:#FCA5A5;
 --stale:rgba(148,163,184,.14);--hatch:rgba(148,163,184,.4);
 --side-a:#7AB2FF;--side-a-fill:#2F6FD8;--side-a-weak:rgba(96,165,250,.16);--on-side-a:#FFFFFF;
 --side-b:#FB923C;--side-b-fill:#F0913A;--side-b-weak:rgba(251,146,60,.16);--on-side-b:#0B0D12;
 --side-n:#9CA3AF;--side-n-fill:#4B5563;--side-n-weak:rgba(156,163,175,.14);--on-side-n:#E8EAEE;
 --pos:#3fb984;--pos-fill:#3fb984;--pos-weak:rgba(63,185,132,.15);--neg:#e26d76;--neg-fill:#e26d76;--neg-weak:rgba(226,109,118,.15);
 --warn:#FCD34D;--warn-fill:#F59E0B;--warn-weak:rgba(245,158,11,.16);--info:#7DD3FC;--info-fill:#0EA5E9;--info-weak:rgba(14,165,233,.16);
 --s1:#60A5FA;--s2:#2DD4BF;--s3:#F472B6;--s4:#FBBF24;--s5:#A99BF0;--s6:#94A3B8;
 --sh-card:0 1px 2px rgba(0,0,0,.3);--sh-dlg:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
 --sh-pop:0 12px 24px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);--sh-seg:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);
 --ring:0 0 0 3px rgba(96,165,250,.35);--toast:#E8EAEE;--toast-ok:#15803D;--backdrop:rgba(0,0,0,.6);
 color-scheme:dark}}
:root[data-accent="sky"]{--accent:#0369A1;--accent-hover:#075985;--accent-weak:#E0F2FE;--accent-line:#BAE6FD;--on-weak:#075985;--link:#0369A1;--info-text:#0C4A6E;--s1:#0369A1;--lo:#0369A1;--lo-t:#075985;--ring:0 0 0 3px rgba(3,105,161,.25)}
:root[data-theme="dark"][data-accent="sky"]{--accent:#0284C7;--accent-hover:#0EA5E9;--accent-weak:rgba(56,189,248,.16);--accent-line:rgba(56,189,248,.38);--on-weak:#BAE6FD;--link:#7DD3FC;--info-text:#BAE6FD;--s1:#38BDF8;--lo:#38BDF8;--lo-t:#7DD3FC;--ring:0 0 0 3px rgba(56,189,248,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent="sky"]{--accent:#0284C7;--accent-hover:#0EA5E9;--accent-weak:rgba(56,189,248,.16);--accent-line:rgba(56,189,248,.38);--on-weak:#BAE6FD;--link:#7DD3FC;--info-text:#BAE6FD;--s1:#38BDF8;--lo:#38BDF8;--lo-t:#7DD3FC;--ring:0 0 0 3px rgba(56,189,248,.35)}}
:root[data-accent="steel"]{--accent:#35659E;--accent-hover:#2A5182;--accent-weak:#E8EFF7;--accent-line:#C3D3E8;--on-weak:#2A5182;--link:#35659E;--info-text:#1F3C61;--s1:#35659E;--lo:#35659E;--lo-t:#2A5182;--ring:0 0 0 3px rgba(53,101,158,.25)}
:root[data-theme="dark"][data-accent="steel"]{--accent:#3F73B5;--accent-hover:#5B8FD0;--accent-weak:rgba(120,160,210,.16);--accent-line:rgba(120,160,210,.38);--on-weak:#C9DAEE;--link:#9DBEE6;--info-text:#C9DAEE;--s1:#7FAADC;--lo:#7FAADC;--lo-t:#9DBEE6;--ring:0 0 0 3px rgba(120,160,210,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent="steel"]{--accent:#3F73B5;--accent-hover:#5B8FD0;--accent-weak:rgba(120,160,210,.16);--accent-line:rgba(120,160,210,.38);--on-weak:#C9DAEE;--link:#9DBEE6;--info-text:#C9DAEE;--s1:#7FAADC;--lo:#7FAADC;--lo-t:#9DBEE6;--ring:0 0 0 3px rgba(120,160,210,.35)}}
html{-webkit-text-size-adjust:100%}
body.cc{margin:0;background:var(--page);color:var(--text);font:15px/22px var(--sans);-webkit-font-smoothing:antialiased}
/* ---- 부품 (cc- 접두) ---- */
*{box-sizing:border-box}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}
.cc-mn,.cc-num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.cc-sp{flex:1}
.cc-vsep{width:1px;height:20px;background:var(--line);flex:none}
svg.cc-ic{flex:none;display:inline-block}
/* ---- 머리(모든 패널 같은 꼴) — 윗줄 56px: 엔진 전환 · 구분선 · 표식+이름 · 화면 탭 · (여백) · 기준 시각 · 테마 · 설정 ---- */
.cc-top{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.cc-hr1{min-height:56px;padding:0 24px;display:flex;align-items:center;gap:16px}
.cc-hl{display:flex;align-items:center;gap:12px;min-width:0}
.cc-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.cc-mark{width:22px;height:22px;border-radius:6px;background:var(--mark);display:inline-grid;place-items:center;flex:none;color:#fff}
.cc-cpsw{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text);cursor:pointer}
.cc-cpsw svg{color:var(--icon)}
.cc-tabs{display:flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:10px;margin-left:8px}
.cc-tabs a,.cc-tabs button{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;border:0;border-radius:7px;background:transparent;font-size:14px;font-weight:500;color:var(--text-3);cursor:pointer;text-decoration:none;white-space:nowrap}
.cc-tabs a:hover,.cc-tabs button:hover{color:var(--text);text-decoration:none}
.cc-tabs .cc-on{background:var(--surface);box-shadow:var(--sh-seg);font-weight:600;color:var(--text)}
.cc-now{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g-dot);box-shadow:0 0 0 3px var(--g-pill);flex:none}
.cc-hbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;white-space:nowrap}
.cc-hbtn svg{color:var(--text-3)}.cc-hbtn:hover{background:var(--surface-2)}
.cc-hbtn.cc-pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.cc-hbtn.cc-pri:hover{background:var(--accent-hover)}
.cc-ibtn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text-3);cursor:pointer}
.cc-ibtn:hover{background:var(--surface-3);color:var(--text)}
.cc-hr2{border-top:1px solid var(--line-soft)}
.cc-bar2{min-height:52px;padding:8px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* 스타일 팝업 — 머리 「스타일」 단추 아래. 테마 스위치 + 강조색 셋 */
.cc-helpw{position:relative}
.cc-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:296px;padding:14px 16px 16px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);display:flex;flex-direction:column;gap:12px;text-align:left}
.cc-pop .cc-ph{font-size:14px;font-weight:700}.cc-pop .cc-pr{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}.cc-pop .cc-pr .cc-k{width:64px;color:var(--text-3);font-size:13px}
.cc-sw3{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer}
.cc-sw3 i{width:14px;height:14px;border-radius:50%;display:inline-block}.cc-sw3:hover{background:var(--surface-2)}
.cc-sw3.cc-on{border-color:var(--accent);box-shadow:var(--ring);color:var(--text)}
.cc-pop .cc-pn{font-size:12px;color:var(--text-3)}
/* ---- 본문 ---- */
.cc-main{max-width:1440px;margin:0 auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:16px} /* 본문 최대폭 1440 가운데(TT 실측 규격 — 넓은 화면에서 끝없이 늘어나지 않는다) · 머리(.cc-top)는 전폭 */
.cc-ptitle{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cc-ptitle h1{margin:0;font-size:21px;line-height:28px;font-weight:700;letter-spacing:-.01em}
.cc-ptitle .cc-meta{font-size:13px;color:var(--text-3)}
.cc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
.cc-card .cc-ch{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.cc-card .cc-ch h2{margin:0;font-size:15px;line-height:22px;font-weight:700;white-space:nowrap;flex:none}
.cc-card .cc-ch .cc-sub{font-size:13px;color:var(--text-3);min-width:0}
.cc-card .cc-cb{padding:14px 16px}
.cc-chips{display:flex;gap:8px;flex-wrap:wrap}
.cc-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--text-2);white-space:nowrap}
.cc-chip b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.cc-chip.cc-on{background:var(--accent-weak);border-color:var(--accent-line);color:var(--on-weak)}
.cc-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--n-dot)}
.cc-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap}
.cc-pill.cc-g{background:var(--g-pill);color:var(--g-text)}.cc-pill.cc-a{background:var(--a-pill);color:var(--a-text)}.cc-pill.cc-n{background:var(--n-pill);color:var(--n-text)}.cc-pill.cc-r{background:var(--red-pill);color:var(--red-pill-text)}
.cc-pill.cc-acc{background:var(--accent-weak);color:var(--on-weak)}
.cc-seg{display:inline-flex;padding:2px;background:var(--surface-3);border-radius:var(--r-md)}
.cc-seg button{height:24px;padding:0 10px;border:0;border-radius:6px;background:transparent;font-size:13px;font-weight:500;color:var(--text-3);cursor:pointer;white-space:nowrap}
.cc-seg button.cc-on{background:var(--surface);box-shadow:var(--sh-seg);color:var(--text);font-weight:600}
.cc-swt{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font-size:14px;color:var(--text-2);cursor:pointer;white-space:nowrap}
.cc-trk{position:relative;display:inline-block;width:30px;height:18px;border-radius:var(--r-pill);background:var(--line-strong);flex:none}
.cc-trk::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.25)}
.cc-swt.cc-on .cc-trk{background:var(--accent)}.cc-swt.cc-on .cc-trk::after{left:14px}
.cc-fld{display:flex;align-items:center;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:14px;color:var(--text);gap:8px}
.cc-fld.cc-ph{color:var(--ph)}
table.cc-tb{width:100%;border-collapse:collapse;font-size:14px}
table.cc-tb th{height:38px;padding:0 10px;text-align:left;font-size:13px;font-weight:600;color:var(--text-3);border-bottom:1px solid var(--line);white-space:nowrap}
table.cc-tb td{height:40px;padding:0 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.cc-tb tr:last-child td{border-bottom:0}
table.cc-tb td.cc-n,table.cc-tb th.cc-n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.cc-tb tr.cc-hi td{background:var(--accent-weak)}
.cc-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:14px}
.cc-kv .cc-k{color:var(--text-3);white-space:nowrap}.cc-kv .cc-v{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* 확률 막대(A·무·B) — 라벨은 막대 안(흰/검 대비 토큰) */
.cc-pbar{display:flex;height:28px;border-radius:7px;overflow:hidden;background:var(--track);font-size:13px;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.cc-pbar>div{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;min-width:0}
.cc-pbar .cc-A{background:var(--side-a-fill);color:var(--on-side-a)}.cc-pbar .cc-N{background:var(--side-n-fill);color:var(--on-side-n)}.cc-pbar .cc-B{background:var(--side-b-fill);color:var(--on-side-b)}
.cc-pbar.cc-cmp{opacity:.82;height:22px;font-size:12px}
.cc-ta{color:var(--side-a);font-weight:600}.cc-tb2{color:var(--side-b);font-weight:600}
.cc-up{color:var(--pos)}.cc-dn{color:var(--neg)}
.cc-mut{color:var(--text-3)}.cc-sm{font-size:13px}.cc-xs{font-size:12px}
.cc-band{padding:10px 14px;border-radius:var(--r-md);font-size:14px}
.cc-band.cc-info{background:var(--accent-weak);color:var(--info-text)}.cc-band.cc-warn{background:var(--warn-weak);color:var(--warn)}.cc-band.cc-err{background:var(--red-weak);color:var(--red-text)}
.cc-foot{padding:16px 24px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-3);display:flex;gap:12px;flex-wrap:wrap}
/* 서버 그림 대체 — 그래프 자리는 인라인 SVG 로 그린다(선·막대는 --s1… · 격자는 --line-soft · 글자는 --text-3 · 11px mono) */
.cc-plot{position:relative;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}

.cc-pop[hidden]{display:none}
.cc-sw3s{display:flex;gap:6px;flex-wrap:wrap}
.cc-hbtn[aria-expanded="true"]{background:var(--surface-2)}
/* ---- 통일 화면 블록 — 다섯 엔진 같은 규칙(2026-09-26 2차: 레포 인라인 사본 → 정본). 요약 타일 .cc-kpi · 2열 .cc-g2 · 3열 .cc-g3 · 열 .cc-col · A/B 카드 윗선 · 날짜 묶음 행 · 승패 점 .cc-wl · 선수 카드 .cc-side · 범례 .cc-lg · 검산 4항 .cc-why · 질의 줄 .cc-qbar · 설명 .cc-dl ---- */
.cc-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cc-kpi .cc-t{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cc-kpi .cc-k{font-size:13px;color:var(--text-3);white-space:nowrap}.cc-kpi .cc-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
.cc-kpi .cc-s{font-size:13px;color:var(--text-3)}.cc-kpi .cc-v small{font-size:14px;font-weight:500;color:var(--text-3);margin-left:4px}
.cc-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cc-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.cc-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.cc-card.cc-a{border-top:2px solid var(--side-a-fill)}.cc-card.cc-b{border-top:2px solid var(--side-b-fill)}
table.cc-tb tr.cc-grp td{height:30px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-2)}
table.cc-tb td.cc-name{font-weight:600}table.cc-tb td .cc-sub{display:block;font-size:12px;font-weight:400;color:var(--text-3)}
.cc-wl{display:flex;gap:4px}.cc-wl i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700;font-style:normal;font-family:var(--mono)}
.cc-wl i.cc-w{background:var(--pos-weak);color:var(--pos)}.cc-wl i.cc-l{background:var(--neg-weak);color:var(--neg)}.cc-wl i.cc-d{background:var(--side-n-weak);color:var(--side-n)}
.cc-side{display:flex;flex-direction:column;gap:10px}.cc-side .cc-nm{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.cc-side .cc-nm b{font-size:18px;line-height:24px}.cc-side .cc-nm small{color:var(--text-3);font-size:13px}
.cc-side .cc-rt{display:flex;align-items:baseline;gap:10px}.cc-side .cc-rt .cc-big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;line-height:30px;font-weight:700}
.cc-side .cc-rt .cc-lb{font-size:12px;color:var(--text-3)}.cc-side .cc-rt .cc-aux{font-family:var(--mono);font-size:14px;color:var(--text-2)}
.cc-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}.cc-mini .cc-k{font-size:12px;color:var(--text-3)}.cc-mini .cc-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}
.cc-mk{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cc-lg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text-3)}
.cc-axis{font-family:var(--mono);font-size:11px;fill:var(--text-3)}
.cc-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.cc-why .cc-t{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:8px 10px;text-align:center}
.cc-why .cc-t b{display:block;font-family:var(--mono);font-size:16px}.cc-why .cc-t span{font-size:12px;color:var(--text-3)}
.cc-qbar{display:flex;gap:8px;align-items:center;flex:1;min-width:0}.cc-qbar .cc-fld{flex:1}
.cc-dl{font-size:13px;line-height:19px;color:var(--text-2)}.cc-dl b{color:var(--text)}
.cc-form{display:flex;flex-direction:column;gap:8px}.cc-form label{font-size:13px;color:var(--text-3)}.cc-form .cc-row{display:flex;gap:8px;align-items:center}
.cc-candle{shape-rendering:crispEdges}
/* ---- 머리 부속 — 「더보기 ▾」 드롭다운(.cc-tabs 안 <details class=cc-more><summary>…<div class="cc-pop cc-menu">) · cp_auth 엔진 드롭다운(.cp-sw, 패키지 무변경 — .cc-cpsw 규격으로 덧입힘) · 옛 전역 규칙 차단 ---- */
.cc-tabs details{position:relative}
.cc-tabs summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;border:0;border-radius:7px;background:transparent;font-size:14px;font-weight:500;color:var(--text-3);cursor:pointer;white-space:nowrap;user-select:none}
.cc-tabs summary::-webkit-details-marker{display:none}
.cc-tabs summary:hover,.cc-tabs details[open]>summary{color:var(--text)}
.cc-tabs details.cc-on>summary,.cc-tabs summary.cc-on{background:var(--surface);box-shadow:var(--sh-seg);font-weight:600;color:var(--text)}
.cc-tabs .cc-more>.cc-pop,.cc-tabs .cc-morepop,.cc-tabs .cc-menu{position:absolute;left:0;right:auto;top:calc(100% + 8px);z-index:30;width:auto;min-width:172px;padding:6px;gap:2px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);display:flex;flex-direction:column;text-align:left}
.cc-tabs .cc-more>.cc-pop a,.cc-tabs .cc-morepop a,.cc-tabs .cc-menu a{display:flex;align-items:center;justify-content:flex-start;height:32px;padding:0 10px;border-radius:6px;background:transparent;box-shadow:none;font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap;text-decoration:none}
.cc-tabs .cc-more>.cc-pop a:hover,.cc-tabs .cc-morepop a:hover,.cc-tabs .cc-menu a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.cc-tabs .cc-more>.cc-pop a.cc-on,.cc-tabs .cc-morepop a.cc-on,.cc-tabs .cc-menu a.cc-on{background:var(--accent-weak);color:var(--on-weak);font-weight:600;box-shadow:none}
.cc-hl .cp-sw{--cp-fg:var(--text);--cp-bg:var(--surface);--cp-line:var(--line);flex:none}
.cc-hl .cp-sw>summary{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text);white-space:nowrap}
.cc-hl .cp-sw>summary:hover{background:var(--surface-2)}
.cc-hl .cp-sw>summary::after{color:var(--icon);opacity:1}
.cc-hl .cp-sw>ul{border-radius:var(--r-md);box-shadow:var(--sh-pop);border:0;font-family:var(--sans);font-size:14px}
.cc-hl .cp-sw>ul>li>a{color:var(--text-2)}.cc-hl .cp-sw>ul>li>a:hover{background:var(--surface-2)}
.cc-top button,.cc-pop button{margin:0}.cc-top details{margin:0}.cc-top summary{color:inherit}
/* ---- 표 가로 스크롤 감싸개 — 넓은 표는 <div class=cc-tbw> 안에서만 옆으로 흐른다(본문은 새지 않는다) · 카드 안 표는 아래 모서리를 카드에 맞춘다 ---- */
.cc-tbw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cc-card>.cc-tbw>table.cc-tb,.cc-card>table.cc-tb{border-radius:0 0 var(--r-lg) var(--r-lg)}
/* ---- 반응형(여섯 패널 같은 문턱) — ≤900: 타일·3열 → 2열 · ≤640(폰): 여백 16 · 머리 줄바꿈 · 타일 2열 · 격자 1열 · 검산 2열. 레포 고유 문턱은 각 레포 인라인 ---- */
@media (max-width:900px){.cc-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
.cc-hr1,.cc-bar2,.cc-main,.cc-foot{padding-left:16px;padding-right:16px}
.cc-hr1{gap:8px 10px;flex-wrap:wrap;min-height:0;padding-top:8px;padding-bottom:8px}.cc-hl{flex-wrap:wrap}.cc-tabs{margin-left:0;flex-wrap:wrap}
.cc-tabs a,.cc-tabs summary{padding:0 9px;font-size:14px}.cc-brand{font-size:15px}
.cc-main{padding-top:16px;padding-bottom:32px;gap:12px}
.cc-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-g2,.cc-g3{grid-template-columns:minmax(0,1fr)}.cc-why{grid-template-columns:repeat(2,minmax(0,1fr))}
}