/* ============================================================
   블리츠씰 어드민 — 컴포넌트 정본 (tokens.css 변수 사용)
   2026-07-08 확정. 수정 시 tokens.css·design-system.html 동시 갱신.
   ============================================================ */
/* Pretendard = tokens.css @font-face 자체호스팅 (CDN @import 제거 2026-07-13) */

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:inherit;text-decoration:none;}
svg{stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}   /* 아이콘 = Lucide 둥근·얇은선 */

/* ===== 텍스트 위계 (정본) — 크기+굵기+색 3중 ===== */
.h1{font-size:25px;font-weight:700;letter-spacing:-.03em;color:var(--ink);}   /* 페이지 제목 */
.h2{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}   /* 섹션 제목 */
.h3{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink);}   /* 패널·카드 제목 */
.label{font-size:13px;font-weight:600;color:var(--ink);}                       /* 라벨 = 표헤더와 동일(진한색) */
.body{font-size:14px;font-weight:500;color:var(--sub);}                        /* 본문 */
.cap{font-size:12px;font-weight:500;color:var(--mut);}                         /* 캡션·메타 (회색) */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.005em;}                /* 수치 (표 컬럼용 고정폭) */

/* ===== 앱 셸 (사이드바 회색 / 본문 흰색) ===== */
.app{display:flex;min-height:100vh;}
.sidebar{width:244px;flex:0 0 244px;background:var(--sb);border-right:1px solid var(--line-2);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:16px 12px 12px;overflow-y:auto;}
.sb-brand{display:flex;align-items:center;gap:8px;padding:6px 8px 2px;} .sb-brand img{height:17px;width:auto;}
.sb-search{display:flex;align-items:center;gap:8px;margin:14px 3px 12px;padding:9px 11px;background:#fff;border:1px solid var(--line-2);border-radius:7px;color:var(--mut);font-size:13px;font-weight:500;cursor:text;} .sb-search svg{width:14px;height:14px;} .sb-search .kbd{margin-left:auto;font-size:10.5px;color:var(--faint);}
.sb-glbl{font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--faint);padding:6px 10px 5px;text-transform:uppercase;}
.nav{display:flex;align-items:center;gap:10px;padding:8.5px 11px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--sub);cursor:pointer;transition:.12s;}
.nav svg{width:16px;height:16px;flex:0 0 auto;color:var(--mut);}
.nav:hover{background:#fff;color:var(--ink);}
.nav.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,40,80,.05);} .nav.on svg{color:var(--blue);}
.nav .cnt{margin-left:auto;font-size:10.5px;font-weight:600;color:#fff;background:var(--crit);border-radius:20px;padding:1px 6px;}
.sb-div{height:1px;background:var(--div);margin:11px 8px;}
.sb-foot{margin-top:auto;}
.prof{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;} .prof:hover{background:#fff;}
.prof .av{width:36px;height:36px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.prof .pt b{font-size:13.5px;font-weight:600;display:block;line-height:1.3;} .prof .pt span{font-size:12px;color:var(--mut);line-height:1.3;display:block;margin-top:1px;}
.prof .out{width:15px;height:15px;color:var(--faint);flex:0 0 auto;} .prof:hover .out{color:var(--crit);}

/* ===== 메인 ===== */
.main{flex:1 1 auto;min-width:0;background:#fff;display:flex;flex-direction:column;}
.topbar{height:58px;display:flex;align-items:center;gap:12px;padding:0 26px;border-bottom:1px solid var(--line);}
.topbar .ic{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--sub);cursor:pointer;} .topbar .ic svg{width:15px;height:15px;}
.content{padding:26px 28px 40px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;}
.page-head .lead{font-size:14px;color:var(--sub);margin-top:7px;}

/* ===== 버튼 (모던·플랫, 라운딩 8) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;border-radius:8px;transition:background .13s,border-color .13s,transform .06s;}
.btn svg{width:16px;height:16px;} .btn:active{transform:translateY(.5px);} .btn:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;}
/* 접근성 base — 전 인터랙티브 요소 키보드 포커스 링(전엔 .btn 1곳만 있었음). 검수 접근성 P0. */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--blue)!important;outline-offset:2px;border-radius:3px;}
.btn.pri{background:var(--blue);color:#fff;} .btn.pri:hover{background:var(--blue-strong);} .btn.pri svg{stroke-width:2;}
.btn.soft{background:var(--blue-soft);color:var(--blue-strong);} .btn.soft:hover{background:#DCE9FE;}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--line-2);} .btn.sec:hover{background:var(--sb);}
.btn.text{background:transparent;color:var(--blue-strong);} .btn.text:hover{background:var(--blue-soft);}
.btn.danger{background:var(--crit);color:#fff;} .btn.danger:hover{background:#DA1F45;}
.btn.ok{background:var(--ok);color:#fff;} .btn.ok:hover{background:var(--ok-tx);}                       /* 완료·확정 solid */
.btn.danger-sec{background:#fff;color:var(--crit-tx);border-color:#F3C3C8;} .btn.danger-sec:hover{background:var(--crit-bg);}  /* 삭제 outlined */
.btn.icon{padding:0;aspect-ratio:1;width:40px;} .btn.sm{height:34px;padding:0 13px;font-size:13px;} .btn.sm.icon{width:34px;} .btn.lg{height:46px;padding:0 20px;font-size:15px;}
.btn:disabled,.btn.dis{opacity:.4;cursor:not-allowed;}
.seg{display:inline-flex;background:var(--sb);border:1px solid var(--line-2);border-radius:8px;padding:3px;gap:2px;}
.seg button{height:34px;padding:0 16px;border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--mut);border-radius:6px;cursor:pointer;} .seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,40,80,.06);}

/* ===== 폼 ===== */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--ink);} .field label .rq{color:var(--crit);}
.input,.select,.textarea{font-family:inherit;font-size:14px;color:var(--ink);padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;width:100%;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.field .help{font-size:11.5px;color:var(--mut);} .field.err .input{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-bg);} .field.err .help{color:var(--crit-tx);}

/* ===== 뱃지(필) · 상태(인라인) ===== */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;line-height:1;padding:2px 8px;border-radius:var(--r-badge);white-space:nowrap;} .badge .d{display:none;}
.b-go{color:var(--blue-strong);background:var(--blue-soft);} .b-ok{color:var(--ok-tx);background:var(--ok-bg);} .b-warn{color:var(--warn-tx);background:var(--warn-bg);} .b-crit{color:var(--crit-tx);background:var(--crit-bg);} .b-spc{color:var(--spc-tx);background:var(--spc-bg);}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;} .st .d{width:7px;height:7px;border-radius:50%;background:currentColor;}
.s-go{color:var(--blue-strong);} .s-ok{color:var(--ok);} .s-warn{color:var(--warn);} .s-crit{color:var(--crit);} .s-spc{color:var(--spc);}

/* ===== 데이터 테이블 (.dt 야오/마더 정본 "루커 그리드") ===== */
.dt{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;}
.dt th{background:var(--dt-head);color:var(--ink);font-weight:600;font-size:12.5px;padding:12px 14px;text-align:right;white-space:nowrap;border-bottom:1.5px solid #CFD6E0;border-right:1px solid var(--dt-grid);}
.dt th:first-child{text-align:left;padding-left:18px;} .dt th:last-child{border-right:0;padding-right:18px;} .dt th.cur{color:var(--navy);}
.dt td{padding:11px 14px;text-align:right;white-space:nowrap;color:var(--dt-cell);border-top:1px solid #EEF0F3;border-right:1px solid var(--dt-grid);}
.dt td:first-child{text-align:left;font-weight:700;color:#191F28;padding-left:18px;} .dt td:last-child{border-right:0;padding-right:18px;} .dt td.who{display:flex;align-items:center;gap:9px;}
/* 헤더 정렬 = 그 열 데이터 정렬. 숫자 열은 헤더도 우측으로 붙인다.
   (2026-08-03: 좌측정렬 표들에서 금액 열만 값이 우측이라 헤더와 값이 따로 놀았다) */
th.num{text-align:right;}
.dt .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.dt td.cur{color:var(--navy);font-weight:700;}
.dt tr.tot td{background:var(--dt-tot);font-weight:700;border-top:1.5px solid #BFD2F2;color:var(--navy);}
/* 로스터 표 .dt.rt — 사람 명단·리소스 현황판 공용 (DESIGN_SYSTEM.md §표 3종 ②).
   .dt 의 변형이다: 숫자 표(.dt)는 우측정렬, 명단은 **좌측정렬** + 이름칸 아바타.
   페이지 고유 상태색(여유/조율필요/리소스부족 등)은 app.css 에 둔다 — 여기는 뼈대만. */
/* ⚠️ 정렬은 건드리지 않는다. .dt.rt 를 두 용도가 공유한다 —
   명단 표(좌측정렬)와 리소스 현황판(숫자라 .dt 기본 우측정렬). 여기서 좌측으로 못 박으면
   리소스 표 숫자가 왼쪽으로 붙는다(2026-08-03 실측). 좌측정렬이 필요한 쪽이 각자 지정한다. */
.dt.rt th{font-size:13px;padding:12px 14px;}
.dt.rt td{font-size:13px;padding:11px 14px;vertical-align:middle;}
.dt.rt td:first-child{font-weight:600;}   /* 색은 .dt td:first-child(#191F28) 를 그대로 쓴다 */
.dt.rt tr:hover td{background:#FAFBFC;}
.dt.rt th.ck,.dt.rt td.ck{width:42px;}
.dt.rt .who{display:flex;align-items:center;gap:11px;}
.dt.rt .rav{width:34px;height:34px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;}
.dt.rt .who .nm{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;}
.dt.rt .who .rl{font-size:11.5px;color:var(--mut);line-height:1.35;}
.dt.rt .mono{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500;} .dt.rt .dim{color:var(--mut);}
.cbox{width:17px;height:17px;border:1.6px solid var(--line-2);border-radius:4px;display:block;}
.dt-card{background:#fff;border:1px solid #E1E5EA;border-radius:13px;overflow:hidden;overflow-x:auto;}
.dt-cat{font-size:10px;font-weight:700;color:var(--mut);background:#EFF1F5;border-radius:var(--r-badge);padding:1px 6px;margin-left:6px;}
.av{width:26px;height:26px;border-radius:6px;color:#fff;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

/* ===== 카드 · 타일 · 리스트 행 ===== */
.card{background:#fff;border:1px solid var(--card-bd);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);}
.card > .chd{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);} .card > .chd h3{font-size:15px;font-weight:600;letter-spacing:-.02em;} .card > .chd .more{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--blue-strong);}
.card > .cbd{padding:16px 18px;}
.tile{background:#fff;border:1px solid var(--card-bd);border-radius:var(--r-lg);padding:18px 19px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;box-shadow:var(--shadow);}
.tile .l{font-size:13px;font-weight:500;color:var(--sub);} .tile .v{font-size:28px;font-weight:700;letter-spacing:-.005em;margin-top:10px;} .tile .v .u{font-size:13px;font-weight:600;color:var(--mut);}
.tile .dd{font-size:12px;font-weight:600;margin-top:7px;} .tile .dd.up{color:var(--ok);} .tile .dd.dn{color:var(--crit);} .tile .dd.mt{color:var(--mut);}
.tile .tic{width:38px;height:38px;border-radius:8px;background:var(--sb);display:flex;align-items:center;justify-content:center;color:var(--mut);flex:0 0 auto;} .tile .tic svg{width:17px;height:17px;}
.lrow{display:flex;align-items:center;gap:11px;}
.lrow .a{width:36px;height:36px;border-radius:8px;background:var(--blue);color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.lrow .nm{font-size:13.5px;font-weight:600;line-height:1.3;} .lrow .rl{font-size:12px;color:var(--mut);line-height:1.3;margin-top:1px;}

/* 진척 바 (그라데이션) */
.bar{height:9px;background:#EAEEF3;border-radius:var(--r-full);overflow:hidden;} .bar > span{display:block;height:100%;border-radius:var(--r-full);background:var(--grad);}

/* ===== 차트 (야오/마더 charts.css 정본) — 패널·범례 ===== */
.chpanel{background:#fff;border:1px solid #E1E5EA;border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);}
.ctitle{font-size:16px;font-weight:700;text-align:center;letter-spacing:-.01em;} .cnote{font-size:11.5px;color:var(--chart-axis);text-align:center;margin-top:3px;}
.clegend{display:flex;justify-content:center;gap:16px;font-size:11.5px;color:#6B7280;font-weight:500;margin:11px 0 2px;} .clegend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px;}
/* 차트 SVG: 막대=--chart-blue-mut / 당기=--chart-navy · 선=--chart-pink · 그리드=--chart-grid · 이중 Y축 · 값라벨 · 여백 L64 R54 T22 B40 */

@media(max-width:900px){.sidebar{position:fixed;transform:translateX(-100%);transition:.2s;z-index:40;} .sidebar.open{transform:none;} .content{padding:22px 18px 40px;}}

/* 모바일 햄버거 기본 숨김 — shell-mobile.js가 body에 주입하는 .axmnav 는 데스크톱에서 보이면 안 된다.
   숨김 규칙이 app.css 에만 있어서 app.css 를 안 싣는 페이지(finance·okr·ops·todo)에서
   스타일 없는 4×19px 조각 버튼이 좌상단에 노출됐다 (2026-08-03 버튼 전수 감사에서 발견).
   ≤1000px 노출은 app.css 의 미디어쿼리가 뒤에 실려 그대로 이긴다. */
.axmnav{display:none;}