/* static/coupang.css — 쿠팡 개성(--accent만) + 3분해 데이터색 + 대시보드 컴포넌트(스타일 타일 v1 조립).
   cape-ui-tokens.css 뒤에 링크. 크롬은 무채색 유지, 강한 색은 데이터·상태에만. */
:root{
  --accent:#2f6bed; --accent-ink:#1e40af; --accent-soft:#eef4ff;  /* 쿠팡 로열 블루 */
  --data-organic:#0d9488;   /* 오가닉 = 틸 (의미색 초록 회피) */
  --data-purchase:#7c3aed;  /* 가구매 = 보라 (의미색 빨강 회피) */
}
*{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;}
select,input[type=date]{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);}
.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;}
.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;}
.spacer{margin-left:auto;}

.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;}

.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-4);}
.kpi-label{color:var(--muted);font-size:var(--fs-xs);font-weight:700;}
.kpi-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-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;}
.card header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-2);}

.section-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink-strong);margin:0 0 var(--sp-4);}
.muted{color:var(--muted);}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-sm);}
.badge-pos{background:var(--pos-soft);color:var(--pos);border:1px solid var(--pos-border);}
.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.wrn{background:var(--warn-soft);color:#92400e;border:1px solid var(--warn-border);}
.note-line[hidden]{display:none;}  /* .note-line의 display:flex가 [hidden] UA규칙을 이기던 버그 교정(명시도 0,2,0) */

.lift{display:flex;gap:var(--sp-4);align-items:baseline;margin-top:var(--sp-3);flex-wrap:wrap;}
.lift-main{font-size:var(--fs-xl);font-weight:800;color:var(--ink-strong);font-variant-numeric:tabular-nums;}
.lift-adj{font-size:var(--fs-sm);font-weight:600;color:var(--muted);}

.flags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);}
.flag{display:inline-block;font-size:var(--fs-xs);font-weight:600;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-border);border-radius:var(--r-sm);padding:4px 8px;}

.disclaimer{font-size:var(--fs-xs);color:var(--faint);margin-top:var(--sp-2);}

.lever-purchase{border-left:4px solid var(--data-purchase);}
.lever-traffic{border-left:4px solid var(--data-organic);}

.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;}

.lever-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
.lever{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);background:var(--surface-2);}
.lever .lv-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.lever .dot{width:10px;height:10px;border-radius:50%;}
.lever .lv-name{font-weight:700;color:var(--ink-strong);}
.lever .lv-cost{font-size:var(--fs-xl);font-weight:800;color:var(--ink-strong);font-variant-numeric:tabular-nums;}
.lever .lv-costlabel{font-size:var(--fs-xs);color:var(--muted);}
.lever .lv-rows{margin-top:10px;border-top:1px dashed var(--border-2);padding-top:8px;}
.lever .lv-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:2px 0;}
.lever .lv-row .v{font-weight:700;font-variant-numeric:tabular-nums;}

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;}
table.t tr.group td{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;text-align:left;}
table.t tbody tr:hover td{background:var(--surface-2);}
.pos{color:var(--pos);} .neg{color:var(--neg);}

.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}}

/* S2b 조절 제안 */
.advice{border-left:4px solid var(--accent);}
.advice-action{font-size:var(--fs-xl);font-weight:800;margin-top:var(--sp-3);}
.advice-math{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2);line-height:1.7;font-variant-numeric:tabular-nums;}
.act-up{color:var(--pos);}
.act-hold{color:var(--muted);}
.act-down{color:var(--warn);}
.act-stop{color:var(--neg);}
.verdict{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border);}
.verdict-action{font-size:var(--fs-lg);font-weight:800;}
.verdict-gain{font-size:var(--fs-sm);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;}
.faint{color:var(--faint);}