/* Withus design standard v1 (direction A, Forest), confirmed 2026-10-11.
   Source: 설계/디자인기준.css (40 design). Screens use these named values; app.css maps its old names to them. */
:root{
  --ws-bg:#f2f4f3;          
  --ws-panel:#ffffff;       
  --ws-ink:#17201b;         
  --ws-ink-2:#5b6660;       
  --ws-line:#dfe4e1;        
  --ws-brand:#1f5f3f;       
  --ws-brand-ink:#ffffff;
  --ws-brand-soft:#e6f1ea;  
  --ws-urgent:#c42b1c;      
  --ws-urgent-bg:#fdeceb;   
  --ws-urgent-badge:#fde4e2;
  --ws-warn:#a35200;        
  --ws-warn-bg:#fff3e0;
  --ws-done:#17703b;        
  --ws-done-bg:#e5f4ea;
  --ws-ai:#4338ca;          
  --ws-ai-bg:#eef0ff;
  --ws-head:#16301f;        
  --ws-head-ink:#ffffff;
  --ws-head-sub:#a9c7b5;
  --ws-head-warn:#ffb84d;   
  --ws-font:"IBM Plex Sans","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --ws-fs-title:22px;       
  --ws-fs-head:17px;        
  --ws-fs-body:15px;        
  --ws-fs-small:13px;       
  --ws-fs-label:12px;       
  --ws-fs-tab:11px;         
  --ws-fs-num:26px;         
  --ws-fw-num:700;
  --ws-s1:4px; --ws-s2:8px; --ws-s3:12px; --ws-s4:16px; --ws-s5:20px; --ws-s6:24px;
  --ws-gutter:16px;         
  --ws-gap:8px;             
  --ws-pad:12px;            
  --ws-section:20px;        
  --ws-radius:12px; --ws-radius-sm:8px; --ws-radius-pill:999px;
  --ws-tap:44px;            
  --ws-tap-big:48px;        
  --ws-head-pad:14px 16px 12px;
  --ws-tabbar-h:64px;
  --ws-bar:4px;             
}
.ws-head{background:var(--ws-head);color:var(--ws-head-ink);padding:var(--ws-head-pad)}
.ws-head .t{font-size:var(--ws-fs-head);font-weight:650;line-height:1.25}
.ws-head .s{font-size:var(--ws-fs-small);color:var(--ws-head-sub);margin-top:2px}
.ws-stats{display:grid;gap:var(--ws-gap);grid-template-columns:repeat(6,1fr)}
.ws-stats>*{grid-column:span 3}                                   
.ws-stats.three>*{grid-column:span 2}                             
.ws-stats:has(>:nth-child(5):last-child)>:nth-child(n+3){grid-column:span 2} 
.ws-stat{background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:var(--ws-radius);padding:10px var(--ws-pad);min-height:76px}
.ws-stat .n{font-size:var(--ws-fs-num);font-weight:var(--ws-fw-num);line-height:1.1;font-variant-numeric:tabular-nums}
.ws-stat .l{font-size:12.5px;color:var(--ws-ink-2);line-height:1.3}
.ws-stat.urgent{background:var(--ws-urgent-bg);border-color:transparent;box-shadow:inset var(--ws-bar) 0 0 var(--ws-urgent)}
.ws-stat.urgent .n{color:var(--ws-urgent)} .ws-stat.urgent .l{color:var(--ws-ink)}
.ws-stat.warn .n{color:var(--ws-warn)}
.ws-row{position:relative;overflow:hidden;background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:var(--ws-radius);padding:10px var(--ws-pad);min-height:56px;display:flex;align-items:center;gap:10px}
.ws-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--ws-bar);background:transparent}
.ws-row.urgent::before{background:var(--ws-urgent)} .ws-row.warn::before{background:var(--ws-warn)} .ws-row.done::before{background:var(--ws-done)}
.ws-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--ws-radius-pill);font-size:var(--ws-fs-label);font-weight:600;white-space:nowrap;background:var(--ws-brand-soft);color:var(--ws-brand)}
.ws-badge.urgent{background:var(--ws-urgent-badge);color:var(--ws-urgent)}
.ws-badge.warn{background:var(--ws-warn-bg);color:var(--ws-warn)}
.ws-badge.done{background:var(--ws-done-bg);color:var(--ws-done)}
.ws-badge.ai{background:var(--ws-ai-bg);color:var(--ws-ai)}
.ws-badge.gray{background:#eceff0;color:var(--ws-ink-2)}
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ws-tap);padding:0 16px;border-radius:var(--ws-radius-sm);border:1px solid var(--ws-brand);background:var(--ws-brand);color:var(--ws-brand-ink);font:inherit;font-size:var(--ws-fs-body);font-weight:600}
.ws-btn.big{width:100%;min-height:var(--ws-tap-big);font-size:16px;border-radius:var(--ws-radius)}
.ws-btn.ghost{background:var(--ws-panel);color:var(--ws-brand)}
.ws-btn.danger{background:var(--ws-panel);color:var(--ws-urgent);border-color:var(--ws-urgent)}
.ws-tabbar{display:flex;background:var(--ws-panel);border-top:1px solid var(--ws-line);padding:6px 2px 8px;min-height:var(--ws-tabbar-h)}
.ws-tabbar>*{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;color:var(--ws-ink-2);font-size:var(--ws-fs-tab)}
.ws-tabbar>.on{background:var(--ws-brand-soft);color:var(--ws-brand);font-weight:600}
.ws-tabbar svg{width:22px;height:22px}
.ws-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ws-tabs>*{display:inline-flex;align-items:center;min-height:var(--ws-tap);padding:0 12px;border-radius:var(--ws-radius-pill);font-size:13.5px;background:var(--ws-panel);border:1px solid var(--ws-line);color:var(--ws-ink)}
.ws-tabs>.on{background:var(--ws-brand);border-color:var(--ws-brand);color:var(--ws-brand-ink);font-weight:600}
.ws-qty{display:flex;align-items:center;border:1px solid var(--ws-line);border-radius:var(--ws-radius-sm);height:46px;background:var(--ws-panel)}
.ws-qty>span{width:44px;height:44px;display:grid;place-items:center;font-size:18px;font-weight:600;color:var(--ws-brand)}
.ws-qty>b{min-width:34px;text-align:center;font-size:16px;border-left:1px solid var(--ws-line);border-right:1px solid var(--ws-line);line-height:44px}
.ws-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ws-table th,.ws-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--ws-line);vertical-align:middle}
.ws-table th{font-size:var(--ws-fs-label);color:var(--ws-ink-2);font-weight:600}
.ws-table .num{text-align:right;white-space:nowrap}