/* 아토케어 ERP 공통 스타일 — v3.191 디자인 통일 1단계.
   기준은 프로젝트 루트 DESIGN.md(Attio — Style Reference, 밝은 테마). 색·크기·간격·라운드는 그 파일의 토큰 값만 쓴다.
   각 값 옆 주석이 어느 토큰에서 왔는지다. 상태 의미색 3개(ok/warn/danger)는 DESIGN.md 팔레트 밖의 **기능색 예외**
   (재고 미달·오류·완료를 색으로 구분해야 하는 ERP 특성) — 채도를 낮춰 배지·경고 상자에만 쓰고 장식에는 쓰지 않는다. */
:root{
  /* DESIGN.md Tokens — Colors */
  --canvas:#ffffff;        /* Page Canvas — 페이지·카드 바탕 */
  --paper:#ffffff;         /* Page Canvas — 카드 표면(구 --paper 이름 유지) */
  --surface-2:#f4f5f6;     /* Paper — 표 머리·보조 패널 */
  --surface-3:#eeeff1;     /* Haze — 옅은 채움·구역 띠 */
  --ink:#1c1d1f;           /* Ink Black — 제목·본문 */
  --ink-2:#2e3238;         /* Carbon — 보조 진한 글자 */
  --sub:#6f7988;           /* Slate 600 — 설명·보조 글자(구 --sub 이름 유지) */
  --sub-2:#8f99a8;         /* Slate 700 — 캡션·낮은 강조 */
  --placeholder:#9fa1a7;   /* Fog 400 — 자리 표시·비활성 */
  --line:#e4e7ec;          /* Mist 50 — 기본 테두리·구분선(구 --line 이름 유지) */
  --line-2:#cad0d9;        /* Cloud 200 — 입력 테두리 */
  --line-card:#d3d8df;     /* Cloud 100 — 카드 테두리 */
  --brand:#266df0;         /* Cobalt Core — 유일한 포인트: 링크·활성·기본 버튼(구 --brand 이름 유지) */
  --brand-hover:#407ff2;   /* Cobalt Bright — 호버 */
  --brand-soft:#e4edff;    /* Ice Wash — 옅은 파랑 바탕(구 --brand-soft 이름 유지) */
  --brand-ring:#bad0fa;    /* Periwinkle — 포커스 링·파랑 윤곽 */
  --dark:#232529;          /* Graphite — 진한 채움 버튼 */
  /* 기능색 예외(팔레트 밖, 채도 낮춤) */
  --ok:#1f7a4d; --ok-soft:#e8f4ec;
  --warn:#b7791f; --warn-soft:#fbf3e3;
  --danger:#c53030; --danger-soft:#fbeaea;
  /* DESIGN.md Spacing & Shapes */
  --r-btn:10px;            /* buttons/inputs 10px */
  --r-card:12px;           /* cards 11–14px */
  --r-badge:7px;           /* badges 7px */
  --shadow-sm:0 1px 2px rgba(28,40,64,.04), 0 2px 8px rgba(28,40,64,.06);   /* 파랑 기운 그림자(0.04–0.1) */
  --shadow-md:0 8px 24px rgba(28,40,64,.10);
  --bg:var(--canvas);
}
*{box-sizing:border-box; margin:0; padding:0;}
/* 글꼴: DESIGN.md 의 Inter 대체(한글) — Pretendard. 기본 굵기 500(DO: weight 500 이 UI 기본), 제목 600 */
body{font-family:"Pretendard Variable",Pretendard,Inter,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  background:var(--canvas); color:var(--ink); font-size:14px; font-weight:500; line-height:1.5; letter-spacing:-0.01em;
  font-feature-settings:"ss03" on, "tnum" on;}
a{color:var(--brand); text-decoration:none;}
a:hover{color:var(--brand-hover);}
.wrap{max-width:1440px; margin:0 auto; padding:24px 24px 64px;}   /* Page max-width 1440 · spacing-24 */

/* 상단 메뉴(.topnav / .navgrp 계열)는 nav.css 로 분리 — cost.html 이 app.css 없이 메뉴만 가져다 쓴다. */

/* 홈 카테고리 구분 헤더 */
.cathead{display:flex; align-items:baseline; gap:12px; margin:32px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.cathead:first-of-type{margin-top:16px;}
.cathead .catname{font-size:16px; font-weight:600;}
.cathead .catlinks{font-size:13px; color:var(--sub);}
.stat.statlink{display:block; color:inherit; transition:box-shadow .12s, border-color .12s;}
.stat.statlink:hover{box-shadow:var(--shadow-sm); border-color:var(--line-2);}

/* SPA 화면 전환 진행 표시줄 */
#spa-progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--brand); z-index:100; opacity:0; transition:width .25s ease, opacity .2s;}
#spa-progress.run{width:70%; opacity:1; transition:width 6s cubic-bezier(.1,.6,.2,1), opacity .1s;}

/* 제목 — Type Scale: subheading 20 / body-lg 16 / caption 11~13 */
h1{font-size:20px; font-weight:600; letter-spacing:-0.2px; margin-bottom:4px;}
.sub{color:var(--sub); font-size:13px; margin-bottom:16px;}
h2{font-size:16px; font-weight:600; letter-spacing:-0.16px; margin:24px 0 12px;}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:20px 24px; margin-bottom:16px;}   /* card padding 24 */
.grid{display:grid; gap:12px; margin-bottom:16px;}   /* v3.206.1 카드 사이 세로 간격 통일: 블록 간격 = --spacing-16(.card 와 동일) */
.grid > .card{margin-bottom:0;}                          /* 격자 안 카드는 격자 gap(12)만 — 아래 여백은 격자가 담당 */
.card .grid{margin-bottom:0;}                            /* 카드 안 중첩 격자는 기존 그대로 */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 20px;}
.stat .l{font-size:12px; color:var(--sub); font-weight:500;}
.stat .v{font-size:24px; font-weight:600; letter-spacing:-0.24px; margin-top:4px; font-variant-numeric:tabular-nums;}
.stat .v small{font-size:13px; color:var(--sub); font-weight:500;}
.ok{color:var(--ok);} .warn{color:var(--warn);} .danger{color:var(--danger);}
.muted{color:var(--sub);}
.mono{font-family:"JetBrains Mono","SF Mono",Consolas,"D2Coding",ui-monospace,monospace; font-size:12.5px;}   /* Berkeley Mono 대체 */
.num{text-align:right; font-variant-numeric:tabular-nums;}
/* 배지 — radius 7px. 기본은 회색 채움 + 잉크 글자, 상태색은 옅은 바탕 + 진한 글자(채운 원색 금지) */
.badge{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:var(--r-badge); background:var(--surface-3); color:var(--ink-2); line-height:1.5;}
.badge.ok{background:var(--ok-soft); color:var(--ok);}
.badge.warn{background:var(--warn-soft); color:var(--warn);}
.badge.danger{background:var(--danger-soft); color:var(--danger);}
.badge.info{background:var(--brand-soft); color:var(--brand);}
.badge.dark{background:var(--dark); color:#fff;}
/* 버튼 — radius 10px, 기본 버튼만 코발트(DO: 한 화면에 포인트는 하나) */
.btn{display:inline-block; background:var(--brand); color:#fff; border:1px solid transparent; font:inherit; font-weight:500; font-size:13.5px;
  padding:8px 14px; border-radius:var(--r-btn); cursor:pointer; text-decoration:none; line-height:1.4; transition:background .12s, box-shadow .12s;}
.btn:hover{background:var(--brand-hover); color:#fff; box-shadow:0 0 0 3px var(--brand-soft);}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
.btn.gray{background:var(--surface-3); color:var(--ink-2); border-color:var(--line);} .btn.gray:hover{background:var(--line);}
.btn.red{background:var(--danger); color:#fff;} .btn.green{background:var(--ok); color:#fff;}
.btn.sm{font-size:12.5px; padding:6px 11px;}
.btn.outline{background:var(--paper); color:var(--ink-2); border:1px solid var(--line-2);}
.btn.outline:hover{background:var(--surface-2); color:var(--ink); box-shadow:none;}
.btn.ghost{background:transparent; color:var(--sub); border-color:transparent;}
/* 입력 — radius 10px, 테두리 Cloud 200, 포커스 링 Periwinkle */
input,select,textarea{font:inherit; font-weight:500; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-btn); background:var(--paper); color:var(--ink); max-width:100%;}
input::placeholder,textarea::placeholder{color:var(--placeholder);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-ring); outline-offset:0; border-color:var(--brand);}
.help{font-size:12.5px; color:var(--sub); margin-top:8px;}
.spacer{flex:1;}

/* 표 — 머리 Paper, 선 Mist 50, 숫자는 tabular */
table{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; font-size:13px;}
thead th{background:var(--surface-2); text-align:left; font-size:12px; font-weight:500; color:var(--sub); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--surface-2);}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;}
form.inline{display:flex; gap:8px; flex-wrap:wrap; align-items:end;}
form.inline label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:500; color:var(--sub);}
form.stack label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:500; color:var(--sub); margin-bottom:12px;}
form.stack input,form.stack select,form.stack textarea{color:var(--ink);}
form.stack .grid{gap:0 12px;}

/* session live */
.counter{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.counter .big{font-size:56px; font-weight:600; letter-spacing:-0.84px; font-variant-numeric:tabular-nums;}   /* heading-lg 56 */
.counter .big small{font-size:24px; color:var(--sub); font-weight:500;}
.progress{height:8px; background:var(--surface-3); border-radius:9999px; overflow:hidden; margin:12px 0 4px;}
.progress i{display:block; height:100%; background:var(--brand); border-radius:9999px; transition:width .25s;}
.progress i.full{background:var(--ok);}
.flash-ok{animation:fok .5s;} @keyframes fok{0%{background:var(--ok-soft)}100%{background:transparent}}
.scanrow-warn td{background:var(--danger-soft) !important;}
.alertbox{border-radius:var(--r-btn); padding:10px 14px; margin:12px 0; font-size:13.5px; font-weight:500; border:1px solid var(--line);}
.alertbox.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent;}
.alertbox.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent;}

/* timeline */
.tl{list-style:none;}
.tl li{position:relative; padding:0 0 16px 24px;}
.tl li::before{content:""; position:absolute; left:6px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--brand);}
.tl li:not(:last-child)::after{content:""; position:absolute; left:9.5px; top:17px; bottom:0; width:1px; background:var(--line);}
.tl .t{font-size:12px; color:var(--sub);}
.tl b{font-size:14px; font-weight:600;}

.login-box{max-width:360px; margin:9vh auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:32px; box-shadow:var(--shadow-sm);}
.login-box h1{text-align:center; margin-bottom:20px;}
.login-box form{display:flex; flex-direction:column; gap:12px;}
.err{color:var(--danger); font-size:13px; text-align:center;}
@media (max-width:640px){ .counter .big{font-size:40px;} .wrap{padding:16px 16px 48px;} }

/* ---- 차트 & 경고 ---- */
.banner-warn{background:var(--warn-soft); border:1px solid transparent; color:var(--warn); border-radius:var(--r-card); padding:12px 16px; margin-bottom:16px; font-size:13.5px; font-weight:500;}
.banner-warn b{font-weight:600;}
.donut-center{font-size:26px; font-weight:600; fill:var(--ink);}
.donut-sub{font-size:10.5px; fill:var(--sub);}
.hbar-row{display:grid; grid-template-columns:150px 1fr 56px; gap:12px; align-items:center; margin-bottom:8px; font-size:13px;}
.hbar-track{position:relative; height:12px; background:var(--surface-3); border-radius:9999px;}
.hbar-fill{position:absolute; left:0; top:0; bottom:0; background:var(--brand); border-radius:9999px; min-width:2px;}
.hbar-fill.warn{background:var(--danger);}
.hbar-safety{position:absolute; top:-3px; bottom:-3px; width:0; border-left:2px dashed var(--danger);}
.hbar-num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600;}
.hbar-num small{color:var(--sub); font-weight:500;}
.loglist{list-style:none; margin-top:8px;}
.loglist li{border-left:2px solid var(--brand-ring); padding:6px 12px; margin-bottom:8px; background:var(--surface-2); border-radius:0 8px 8px 0; font-size:13px;}
.loglist .lt{font-size:11.5px; color:var(--sub); margin-top:2px;}
.step-flow{display:flex; gap:4px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--sub); margin:4px 0 12px;}
.step-flow b{color:var(--brand); font-weight:600;}
.gcharts{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
.chart-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:20px 24px;}
.chart-card h3{font-size:14px; font-weight:600; margin:0 0 8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.chart-card svg{width:100%; height:auto; display:block;}
.chart-card .legend{display:flex; gap:12px; font-size:12px; color:var(--sub); font-weight:500;}
.chart-card .legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px;}
.axis{font-size:10.5px; fill:var(--sub-2);}
.gridline{stroke:var(--line); stroke-width:1;}

/* ---- CS센터 현황 블록 ---- */
.livedot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);}
.csb-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.csb-meta{font-size:12px; color:var(--sub); font-weight:500;}
.csb-open{margin-left:auto; font-size:12.5px; font-weight:500;}
.csb-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:12px 0;}
.csb-stat{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-btn); padding:10px 12px;}
.csb-stat .l{font-size:11.5px; color:var(--sub); font-weight:500;}
.csb-stat .v{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums;}
.csb-stat .v small{font-size:11.5px; color:var(--sub); font-weight:500;}
.pipe{display:flex; align-items:stretch; gap:4px; flex-wrap:wrap;}
.pipe .step{flex:1; min-width:68px; background:var(--surface-2); border:1px solid var(--line); border-top:2px solid var(--line-2); border-radius:8px; padding:6px 8px;}
.pipe .step .sl{font-size:11px; color:var(--sub); font-weight:500; white-space:nowrap;}
.pipe .step .sv{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums;}
.pipe .step.hot{border-top-color:var(--danger);}
.pipe .step.done{background:var(--brand-soft); border-top-color:var(--brand);}
.pipe .arr{align-self:center; color:var(--line-2); font-weight:600; font-size:12px;}
.lotrow{display:grid; grid-template-columns:minmax(120px,190px) 1fr 96px; gap:12px; align-items:center; font-size:13px; margin-top:8px;}
.lottrack{position:relative; height:12px; background:var(--surface-3); border-radius:9999px;}
.lotfill{position:absolute; left:0; top:0; bottom:0; border-radius:9999px; min-width:2px;}
.lotnum{text-align:right; font-variant-numeric:tabular-nums; font-weight:600;}
.lotnum small{color:var(--sub); font-weight:500;}
.csb-fail{margin-top:12px; background:var(--warn-soft); border:1px solid transparent; color:var(--warn); border-radius:var(--r-btn); padding:9px 13px; font-size:13px;}

/* ── 좁은 화면의 표 — 표 안에서만 가로 스크롤(화면 나머지는 제자리) ── */
@media (max-width:860px){
  main table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* 홈 '오늘 매출' 블록 — csb-* 를 그대로 쓰고 보조 줄·증감·차트만 추가 */
.rt-sub{font-size:11.5px; color:var(--sub); font-weight:500; margin-top:3px; font-variant-numeric:tabular-nums;}
.rt-up{color:var(--danger);} .rt-down{color:var(--brand);}
.rt-chart{margin-top:6px;}
.rt-foot{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--sub); font-weight:500; margin-top:8px;}
.rt-foot .warn{color:var(--warn);}
/* v3.339 비교 기준일 선택 줄 — 칩 4개(어제·지난주 같은 요일·한 달 전 같은 날·날짜 직접) + 날짜 입력. DESIGN.md: 간격 4·8·12(base 4),
   라운드 --r-badge 7px, 활성은 유일한 포인트색 --brand 테두리+--brand-soft 바탕(DO: 포인트색은 한 번만), 글자 12px 500 */
.rt-cmp{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--sub); font-weight:500;}
.rt-cmp .rt-chip{border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); border-radius:var(--r-badge); padding:4px 10px; font-size:12px; font-weight:500; cursor:pointer; font-family:inherit;}
.rt-cmp .rt-chip:hover{border-color:var(--brand-ring);}
.rt-cmp .rt-chip.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand); font-weight:600;}
.rt-cmp input[type=date]{border:1px solid var(--line-2); border-radius:var(--r-badge); padding:3px 8px; font:inherit; font-size:12px; color:var(--ink-2); background:var(--paper);}
.rt-cmp .rt-cmp-note{margin-left:auto; color:var(--sub-2);}

/* v3.194 화면 머리 공통 패턴 — 제목 · 설명 · 오른쪽 동작 버튼(DESIGN.md: element gap 8, spacing-12/16) */
.page-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 12px;}
.page-head h2{margin:0; font-size:20px; letter-spacing:-0.2px;}
.page-head .sub{margin:0;}
.page-head .actions{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}

/* ── v3.309 폰 반응형 공통(사장님 9/29 "전체적으로 모바일 반응형으로 보기 좋게") ──
   화면마다 인라인으로 박힌 고정 칸 격자(1fr 1fr, 2fr 3fr …)를 폰에서는 한 줄 한 칸으로.
   auto-fit/auto-fill 격자는 스스로 줄어들므로 건드리지 않는다. 간격은 spacing 4 배수 그대로. */
@media (max-width:640px){
  main [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]){grid-template-columns:minmax(0,1fr) !important;}
  .grid > *{min-width:0;}
  .card{padding:16px;}                                   /* card padding 24 → spacing-16 */
  h1{font-size:18px;}                                    /* Inter 18 */
  .page-head .actions{margin-left:0; width:100%;}
  form.inline > label, form.inline > input, form.inline > select{flex:1 1 140px; min-width:0;}
}

/* v3.424 홈 '마켓 현황' 타일(환율·지수) — 오름 빨강·내림 파랑(국내 시세 관례) */
.mk-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-top:10px;}
.mk-tile .mk-chg{font-size:12px; font-variant-numeric:tabular-nums; color:var(--sub); margin-top:2px;}
.mk-tile .mk-up{color:#e02d3c;} .mk-tile .mk-down{color:#1a62d6;}
.mk-candle{display:block; width:100%; height:40px; margin-top:6px;}
.home-scroll{overflow-x:auto;}
/* v3.426 홈 'AS · 반품 · 교환 현황' — 세 칸(AS·반품·교환), 행 = 상태·건수(누르면 그 상태 목록), 진행 중 건은 파랑, 완료·취소는 흐리게 */
.cs-home{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;}
.cs-home .chart-card{margin:0;}
.csh-hd{display:flex; align-items:baseline; gap:8px; font-size:15px; margin-bottom:8px;}
.csh-note{font-size:12px; color:var(--sub);}
.csh-open{margin-left:auto; font-size:13px; color:var(--sub); text-decoration:none;}
.csh-open b{font-size:18px; color:var(--brand);}
.csh-rows{display:flex; flex-direction:column;}
.csh-row{display:flex; justify-content:space-between; padding:6px 2px; border-top:1px solid var(--line); font-size:13px; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums;}
.csh-row:hover{background:var(--surface-2);}
.csh-row.hot b{color:var(--brand);}
.csh-row.done{color:var(--sub);}
.csh-row.total{font-weight:600;}