/* =========================================================================
   cape-ui-components.css — CAPE 전사 공유 컴포넌트 (v0)
   원칙: "중립 크롬 + 데이터에만 채도". 모든 값은 cape-ui-tokens.css의 토큰에서 온다.
   출처: 스타일 타일 v1 컴포넌트 + performance-hack-coupang(첫 라이브 소비자) 실사용 수확·검증.
   관리: CAPE-Alfred(원본). 각 앱은 tokens → 이 파일 순으로 link, --accent만 자기 css에서 오버라이드.
   범위: 대시보드/리포트 앱 범용 컴포넌트만. 프로젝트 비즈니스 전용 컴포넌트는 각 앱 css에.
   ========================================================================= */
*{box-sizing:border-box;}

/* --- 레이아웃 --- */
.wrap{max-width:1120px;margin:0 auto;padding:var(--sp-6) var(--sp-6) 80px;}

/* --- 앱 헤더(로고+앱명) : 브랜드 자산 연동 --- */
.appbar{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4);}
.appbar img{height:24px;}
.appbar .sep{width:1px;height:20px;background:var(--border-2);}
.appbar .appname{font-size:var(--fs-lg);font-weight:700;color:var(--ink-strong);}
.appbar .right{margin-left:auto;color:var(--muted);font-size:var(--fs-xs);}

/* --- 탭 내비 --- */
.nav{display:flex;gap:var(--sp-4);align-items:center;margin-bottom:var(--sp-4);}
.nav a{color:var(--muted);font-size:var(--fs-sm);font-weight:600;text-decoration:none;padding-bottom:8px;border-bottom:3px solid transparent;}
.nav a:hover{color:var(--ink);}
.nav a.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700;}

/* --- 컨트롤 바(필터·기간 등) --- */
.controls{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4);}
.ctl-label{font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.spacer{margin-left:auto;}

/* --- 폼 컨트롤 --- */
select,input[type=date],input[type=text],input[type=file]{font-family:var(--font);font-size:var(--fs-sm);color:var(--ink);padding:7px 10px;border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--surface);}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}

/* --- pill 필터 · 세그먼트 --- */
.pill{padding:6px 13px;border:1px solid var(--border-2);border-radius:var(--r-full);font-size:var(--fs-sm);color:var(--ink);background:var(--surface);cursor:pointer;text-decoration:none;display:inline-block;}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.seg{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--r-full);overflow:hidden;}
.seg .pill{border:none;border-radius:0;}

/* --- 버튼 --- */
.btn{font-family:var(--font);border:1px solid transparent;border-radius:var(--r-md);padding:8px 16px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(.94);}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-2);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--ink);background:var(--surface-2);}
.btn-danger{background:var(--neg);color:#fff;}
.btn:disabled{opacity:.5;cursor:default;}

/* --- KPI 스트립 (canonical = 중첩형) --- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-4);}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);}
.kpi .k-label{color:var(--muted);font-size:var(--fs-xs);font-weight:700;}
.kpi .k-value{font-size:var(--fs-2xl);font-weight:800;margin-top:6px;letter-spacing:-.5px;color:var(--ink-strong);font-variant-numeric:tabular-nums;}
.kpi .k-value.neg{color:var(--neg);}
.kpi .k-sub{color:var(--muted);font-size:var(--fs-xs);margin-top:4px;}
.dir-up{color:var(--pos);} .dir-down{color:var(--neg);} .dir-flat{color:var(--muted);}

/* --- 카드 · 섹션 헤더 --- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4);}
.card-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);}
.card-head h3{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--ink-strong);}
.card-head .note{color:var(--muted);font-size:var(--fs-xs);margin-left:auto;}
.section-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink-strong);margin:0 0 var(--sp-4);}
/* 넘버 뱃지형 섹션 헤더(주간실적 계열, 선택) */
.block-head{display:flex;align-items:center;gap:var(--sp-2);padding-bottom:var(--sp-3);border-bottom:2px solid var(--ink-strong);margin-bottom:var(--sp-6);}
.block-num{background:var(--ink-strong);color:#fff;font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-sm);padding:3px 9px;}

/* --- 뱃지 --- */
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);}
.badge-solid{background:var(--ink-strong);color:#fff;}
.badge-accent{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--info-border);}
.badge-pos{background:var(--pos-soft);color:var(--pos);border:1px solid var(--pos-border);}
.badge-neg{background:var(--neg-soft);color:var(--neg);border:1px solid var(--neg-border);}
.badge-warn,.badge-est{background:var(--warn-soft);color:#92400e;border:1px solid var(--warn-border);}

/* --- 상태 알림줄 (색 + 아이콘/라벨 병기) --- */
.note-line{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--sp-4);background:var(--surface-2);color:var(--muted);border:1px solid var(--border);}
.note-line .ic{font-weight:800;}
.note-line.err{background:var(--neg-soft);color:#991b1b;border:1px solid var(--neg-border);}
.note-line.wrn{background:var(--warn-soft);color:#92400e;border:1px solid var(--warn-border);}
.note-line.inf{background:var(--info-soft);color:#1e40af;border:1px solid var(--info-border);}
.note-line[hidden]{display:none;}  /* [hidden]가 display:flex를 이기지 못하던 버그 교정(쿠팡 실사용 수확) */

/* --- 알럿 카드 --- */
.alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);}
.alert{border-radius:var(--r-lg);padding:14px 18px;border:1px solid var(--border);}
.alert .a-title{font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:2px;}
.alert .a-value{font-size:var(--fs-xl);font-weight:800;}
.alert .a-desc{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.5;}
.alert.ok{background:var(--pos-soft);border-color:var(--pos-border);} .alert.ok .a-value{color:var(--pos);}
.alert.bad{background:var(--neg-soft);border-color:var(--neg-border);} .alert.bad .a-value{color:var(--neg);}
.alert.info{background:var(--info-soft);border-color:var(--info-border);} .alert.info .a-value{color:var(--accent-ink);}

/* --- 테이블 · 히트맵 --- */
table.t{border-collapse:collapse;width:100%;font-size:var(--fs-sm);font-variant-numeric:tabular-nums;}
table.t th,table.t td{border:1px solid var(--border);padding:7px 10px;text-align:right;white-space:nowrap;}
table.t thead th{background:var(--surface-2);color:var(--muted);font-weight:600;text-align:center;}
table.t td.h,table.t th.h{text-align:left;font-weight:600;background:var(--surface-2);}
table.t tr.group td{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;text-align:left;}
table.t tr.total td{background:#fef9c3;font-weight:700;}
table.t tr.total td.h{background:#fde68a;}
table.t tbody tr:hover td:not(.h){background:var(--surface-2);}
.heat td.cell{color:var(--ink-strong);font-weight:400;}  /* 히트맵 셀 배경은 인라인 스타일로 신호 */

/* --- 차트 범례 --- */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:var(--fs-xs);color:var(--muted);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.legend i.line{height:3px;width:16px;}

/* --- 빈 / 로딩 --- */
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--border-2);border-radius:var(--r-lg);background:var(--surface-2);}
.skeleton{height:14px;border-radius:var(--r-sm);background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 50%,#eef2f7 75%);background-size:200% 100%;animation:sk 1.3s infinite;}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- 유틸 --- */
.muted{color:var(--muted);} .faint{color:var(--faint);}
.pos{color:var(--pos);} .neg{color:var(--neg);}
.tabular{font-variant-numeric:tabular-nums;}