/* 회계 관리자 — 디자인 시스템 v3 "모던 SaaS 프로" (v0.9.54 · 발주자 시안2 확정)
   화이트 × 인디고 · 밝은 사이드바 · 두 겹 그림자 카드 · 점(●) 상태 배지
   원칙: ① 글자를 세로로 꺾지 않는다(눌리면 옆 스크롤) ② 숫자는 tabular-nums
   우측 정렬 ③ 상태는 점+텍스트(색만으로 구분 금지) ④ 차트는 단일 색 */

:root{
  --ink:#111827; --ink2:#3c4353; --ink3:#8b92a1;
  --bg:#f7f8fa; --card:#ffffff; --line:#e5e8ee; --line2:#eef0f4;
  --side-bg:#fbfbfd;
  --acc:#4653e8; --acc2:#3a46d4; --acc-weak:#eef0ff; --acc-ink:#1d4fd7;
  --gold:#4653e8; /* (구 금색 토큰 — 인디고로 통합) */
  --ok:#177245; --ok-bg:#e7f6ee; --warn:#9a6700; --warn-bg:#fff3d6;
  --dang:#c2402f; --dang-bg:#fdebe7; --mut-bg:#eff1f5;
  --r:12px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-acc:0 2px 8px rgba(70,83,232,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.6;
  letter-spacing:-.01em; word-break:keep-all;
}

/* ---------------- 레이아웃 ---------------- */
.shell{display:flex; min-height:100vh}
main{flex:1; min-width:0; padding:26px 30px 70px; max-width:1160px; margin:0 auto}

/* 사이드바 (데스크톱) — 밝은 흰색 + 인디고 활성 알약 */
.side{
  display:none; width:230px; flex:none;
  background:var(--side-bg); border-right:1px solid var(--line);
  color:var(--ink2); padding:18px 12px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side .brand{display:flex; align-items:center; gap:10px; padding:2px 10px 16px}
.side .brand .mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,#4653e8,#7b6cf0);
  color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(70,83,232,.30);
}
.side .brand .t{font-size:15.5px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.side .brand .s{font-size:10.5px;color:var(--ink3)}
.side .who{
  margin:0 6px 12px;padding:9px 12px;border-radius:10px;
  background:#fff;border:1px solid var(--line);font-size:12.5px;color:var(--ink2);
}
.side .who .role{color:var(--acc-ink);font-weight:800}
.side .grp{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#9aa1af;
  padding:14px 12px 5px;text-transform:uppercase}
.side a.item{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;border-radius:9px;color:var(--ink2);
  text-decoration:none;font-size:13.5px;font-weight:600;margin:1px 0;
  white-space:nowrap;
}
.side a.item svg{width:17px;height:17px;flex:none;color:#8b92a1}
.side a.item:hover{background:#f1f3f8;color:var(--ink)}
.side a.item.on{background:var(--acc-weak);color:var(--acc-ink);font-weight:800}
.side a.item.on svg{color:var(--acc)}
.side .bottom{margin-top:auto;padding-top:16px}
.navn{margin-left:auto;font-size:10.5px;background:#ffe9c2;color:#8a5a00;
  border-radius:999px;padding:1px 7px;font-weight:800;line-height:1.5}

/* 모바일 상단 바 + 스크롤 메뉴 — 밝은 버전 */
.mtop{
  position:sticky;top:0;z-index:40;background:#fff;color:var(--ink);
  padding:12px 16px 0;border-bottom:1px solid var(--line);
}
.mtop .row1{display:flex;align-items:center;gap:10px;padding-bottom:10px}
.mtop .mark{width:28px;height:28px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#4653e8,#7b6cf0);color:#fff;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.mtop .t{font-weight:800;font-size:15px}
.mtop .who{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.mtop .who a{color:var(--ink3);text-decoration:none;margin-left:8px}
.mnav{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.mnav::-webkit-scrollbar{display:none}
.mnav a{flex:none;display:flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  color:var(--ink2);background:#f1f2f6;text-decoration:none;white-space:nowrap}
.mnav a svg{width:14px;height:14px}
.mnav a.on{background:var(--acc);color:#fff}

@media(min-width:1024px){
  .side{display:flex;flex-direction:column}
  .mtop{display:none}
}

/* ---------------- 페이지 헤더 ---------------- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ph h2{font-size:21px;font-weight:800;letter-spacing:-.03em}
.ph .sub{color:var(--ink3);font-size:12.5px;margin-top:2px}

/* ---------------- 카드·KPI ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.card > b{font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow)}
.kpi .l{font-size:11.5px;font-weight:700;color:var(--ink3);letter-spacing:.02em}
.kpi .v{font-size:23px;font-weight:800;letter-spacing:-.03em;margin-top:5px;
  font-variant-numeric:tabular-nums}
.kpi .s{font-size:11.5px;color:var(--ink3);margin-top:3px}
.stat{flex:1;min-width:150px;border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;background:#fbfbfd}
.stat .l{font-size:11.5px;color:var(--ink3);font-weight:700}
.stat .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------------- 버튼·폼 ---------------- */
.btn{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:9px;padding:8px 15px;
  font-size:13px;font-weight:700;background:#fff;color:var(--ink);
  cursor:pointer;text-decoration:none;box-shadow:0 1px 1px rgba(16,24,40,.04);
  transition:background .12s, border-color .12s, box-shadow .12s;
  white-space:nowrap}
.btn:hover{background:#f7f8fc;border-color:#d7dce6}
.btn.p{background:var(--acc);border-color:var(--acc);color:#fff;
  box-shadow:var(--shadow-acc)}
.btn.p:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.d{border-color:#f1c8c2;color:var(--dang);background:#fff}
.btn.d:hover{background:var(--dang-bg)}
input,select,textarea{
  padding:8.5px 12px;font-size:14px;border:1.5px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);width:auto;
  transition:border-color .12s, box-shadow .12s}
input:focus,select:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3.5px rgba(70,83,232,.15)}
label{font-size:12px;color:var(--ink2);font-weight:600}
.rq{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin:10px 0}

/* ---------------- 표 ---------------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  font-size:13px}
th{background:#fbfbfd;color:var(--ink3);font-size:11px;font-weight:800;
  letter-spacing:.05em;text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f7f8ff}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:#f2f4f7}

/* ---------------- 칩(점 배지)·배너 ---------------- */
.b{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:2.5px 9px;border-radius:999px;white-space:nowrap}
.b::before{content:"";width:5px;height:5px;border-radius:999px;
  background:currentColor;flex:none}
.b.ok{background:var(--ok-bg);color:var(--ok)}
.b.warn{background:var(--warn-bg);color:var(--warn)}
.b.dang{background:var(--dang-bg);color:var(--dang)}
.b.gray{background:var(--mut-bg);color:#5c6472}
.b.blue{background:var(--acc-weak);color:var(--acc-ink)}
.banner{border-radius:10px;padding:11px 15px;font-size:13px;font-weight:600;
  margin-bottom:12px;border:1px solid transparent}
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:#f2dfb0}
.banner.dang{background:var(--dang-bg);color:var(--dang);border-color:#f4cbc2}
.banner.ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe5d0}

/* ---------------- CSS 바 차트 (단일 색·직접 라벨) ---------------- */
.bars{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.bar{display:grid;grid-template-columns:92px 1fr 86px;align-items:center;gap:10px}
.bar .n{font-size:12px;color:var(--ink2);font-weight:600;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{height:13px;border-radius:0 4px 4px 0;background:transparent;
  position:relative}
.bar .fill{height:100%;background:var(--acc);border-radius:0 4px 4px 0;
  min-width:3px;opacity:.9}
.bar .v{font-size:12px;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums}

/* ---------------- 검토큐·미리보기 ---------------- */
.review-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.review-grid{grid-template-columns:320px 1fr}}
.preview{border:1px solid var(--line);border-radius:11px;background:#fbfbfd;
  min-height:220px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:var(--ink3);font-size:12.5px}
.preview img{width:100%;height:100%;max-height:420px;object-fit:contain}

/* ---------------- 로그인 ---------------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2b3390 0%,#4653e8 60%,#6a76f2 100%);padding:20px}
.auth .card{width:100%;max-width:380px;padding:34px 30px;border:none;
  box-shadow:0 24px 60px -18px rgba(15,23,42,.35)}
.auth h1{display:flex;align-items:center;gap:10px;justify-content:center;
  font-size:20px;margin-bottom:4px}
.auth .mark{width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,#4653e8,#7b6cf0);color:#fff;
  font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.auth .field{margin-bottom:13px}
.auth input{width:100%}
.small{font-size:12px;color:var(--ink3)}
details summary{cursor:pointer;color:var(--acc-ink);font-size:12.5px;font-weight:600}
pre{background:#111827;color:#dbe2ee;border-radius:10px;padding:14px;
  font-size:12px;line-height:1.55;overflow:auto}
.menu-note{font-size:12px;color:var(--ink3);margin-top:10px}

/* ---------- 회사(테넌트) 선택 ---------- */
.cosel{margin:2px 6px 8px;padding:8px 10px;background:#fff;
  border:1px solid var(--line);border-radius:10px}
.cosel .grp{margin:0 0 5px;padding:0}
.cosel .citem{display:block;padding:5px 9px;border-radius:8px;color:var(--ink2);
  font-size:12.8px;text-decoration:none;font-weight:600;white-space:nowrap}
.cosel .citem:hover{background:#f1f3f8}
.cosel .citem.on{background:var(--acc-weak);color:var(--acc-ink);font-weight:800}
.cofix{margin:2px 16px 8px;font-size:12.5px;font-weight:800;color:var(--acc-ink)}
.mnav.mco{background:#fbfbfd;border-bottom:1px solid var(--line)}
.mnav.mco a.on{background:var(--acc);color:#fff}
.groupbar{background:var(--acc-weak);border:1px solid #d5dbfa;color:#33409a;
  border-radius:10px;padding:9px 13px;font-size:13px;margin-bottom:14px}
.cochip{display:inline-block;font-size:10.5px;font-weight:800;border-radius:99px;
  padding:1px 8px;background:var(--acc-weak);color:var(--acc-ink);vertical-align:1px}

/* ---------- 화면 가이드 ---------- */
.gcard{background:#f6f7ff;border:1px solid #dfe3fb;border-radius:11px;
  padding:9px 14px;margin-bottom:14px}
.gcard summary{color:#39418c;font-size:12.8px;list-style-position:inside}
.gcard .gbody{padding:8px 2px 2px;font-size:13.2px;color:#3a4160;line-height:1.6}

/* ---------- 우상단 설정 메뉴 (톱니) ---------- */
.gearmenu{position:fixed;top:12px;right:14px;z-index:900}
.gearmenu summary{list-style:none;cursor:pointer;width:38px;height:38px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,23,42,.10);
  color:#525d70}
.gearmenu summary::-webkit-details-marker{display:none}
.gearmenu[open] summary{background:var(--acc);color:#fff;border-color:var(--acc)}
.gearmenu .gm{position:absolute;right:0;top:46px;min-width:210px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.16);
  padding:8px;display:flex;flex-direction:column}
.gearmenu .gmwho{font-size:12px;font-weight:700;color:var(--ink3);
  padding:8px 10px 9px;border-bottom:1px solid var(--line);margin-bottom:5px}
.gearmenu .gm a{display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.gearmenu .gm a:hover{background:#f1f3f8}
.gearmenu .gm a svg{opacity:.6}
@media(max-width:1023.5px){
  .gearmenu{top:9px}
  .mtop .row1{padding-right:46px}
}

/* ---------- 모바일 하단 네비 — 밝은 버전 ---------- */
.bnav{display:none}
@media(max-width:1023.5px){
  .bnav{position:fixed;left:0;right:0;bottom:0;z-index:850;
    display:flex;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(15,23,42,.06);
    padding-bottom:env(safe-area-inset-bottom)}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 2px 8px;font-size:10.5px;font-weight:700;color:#8b92a1;text-decoration:none}
  .bnav a svg{width:21px;height:21px}
  .bnav a.on{color:var(--acc-ink)}
  .bnav .bhome .bh{width:34px;height:34px;margin-top:-16px;border-radius:50%;
    background:var(--acc);color:#fff;font-weight:800;font-size:17px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 10px rgba(70,83,232,.35);border:2.5px solid #fff}
  .bnav .bhome.on .bh{outline:2.5px solid var(--acc-weak)}
  main{padding-bottom:86px !important}
}

/* 모바일 전체 메뉴 페이지 */
.menugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.menugrid a{display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px 6px;font-size:12px;font-weight:700;color:var(--ink);text-decoration:none}
.menugrid a svg{width:22px;height:22px;color:var(--acc)}
.menugrid a:active{background:var(--acc-weak)}

/* ---------- 일괄 선택 바 ---------- */
.bulkbar{background:var(--acc-weak);border:1px solid #d5dbfa;border-radius:10px;
  padding:8px 12px}
.bulkbar .bcount{color:var(--acc-ink);font-weight:800;font-size:12.5px}

/* ---------- 글자 세로 꺾임 금지 (절대 원칙 · v0.9.30 계승) ----------
   숫자·이름·칩은 절대 세로로 쪼개지 않는다 (nowrap).
   넓은 표는 원래 폭 그대로 카드 안에서 좌우 스와이프.
   긴 메모(.small)만 적당한 폭(230px)에서 자연 줄바꿈. */
img, svg{max-width:100%}
input, select, textarea{max-width:100%}
td{word-break:keep-all}
.card{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:1023.5px){
  .card table{width:max-content;min-width:100%}
  th, td{white-space:nowrap;padding:8px 9px}
  table{font-size:12.3px}
  td .small, td.small{white-space:normal;display:inline-block;
    max-width:230px;min-width:120px;vertical-align:top}
  td form{white-space:normal}
  .kpis{grid-template-columns:1fr 1fr}
  .ph .btn{padding:7px 12px;font-size:12.5px}
  pre{font-size:11px}
}

/* ---------- 근무표 달력 v0.9.59 ----------
   팀 전체가 한 달력에 — 예외(휴무·결근·지각·연차)만 이름 칩으로.
   날짜 클릭 = 직원별 세부 입력(매니저 이상). 좁은 화면은 옆 스크롤. */
.awrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.attcal{border-collapse:separate;border-spacing:3px;width:100%;min-width:730px}
.attcal .ahead th{font-size:11.5px;font-weight:800;color:var(--ink3);
  padding:2px 0 4px;text-align:center;white-space:nowrap}
.attcal .ahead th.su{color:#c2402f}.attcal .ahead th.sa{color:#3565d9}
.attcal .acell{width:14.28%;min-width:100px;vertical-align:top;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:5px 6px 6px;min-height:76px;height:76px}
.attcal.edit .acell{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.attcal.edit .acell:hover{border-color:#c3c9f3}
.attcal .acell.sel{border-color:var(--acc);box-shadow:0 0 0 2px #dfe3fb}
.attcal .acell.blank{border:none;background:transparent;cursor:default;box-shadow:none}
.attcal .acell.su{background:#fffbfb}.attcal .acell.sa{background:#fafcff}
.attcal .acell.hol{background:#fdf4f2}
.attcal .adn{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.attcal .adn .n{font-size:12.5px;font-weight:800;color:var(--ink2)}
.attcal .acell.su .adn .n{color:#c2402f}
.attcal .acell.sa .adn .n{color:#3565d9}
.attcal .ah{display:none;font-size:9.5px;font-weight:800;color:#c2402f}
.attcal .ah.on{display:inline}
.attcal .chips{display:flex;flex-direction:column;gap:2px;margin-top:3px;align-items:flex-start}
.ch{display:inline-block;font-size:10.5px;font-weight:700;line-height:1.5;
  padding:0 6px;border-radius:6px;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;border:1px solid transparent}
.ch.k휴무{background:var(--mut-bg);color:#5b6372;border-color:#e2e6ec}
.ch.k결근{background:var(--dang-bg);color:var(--dang);border-color:#f0cdc5}
.ch.k지각{background:#fdf3e3;color:#b3620f;border-color:#f2ddba}
.ch.k연차{background:#e7f5ec;color:#1c7c46;border-color:#cfe9da}
.ch.me{border-color:var(--acc);box-shadow:0 0 0 1px #d5daf9 inset}
.ch .nd{color:#b3620f;margin-left:2px}
/* 날짜 편집 패널 */
.derow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:6px 4px;border-bottom:1px solid var(--line2)}
.derow:last-child{border-bottom:none}
.derow b{min-width:64px}
.deseg{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.deseg .seg{border:none;background:#fff;padding:5px 12px;font-size:12.5px;
  font-weight:700;color:var(--ink2);cursor:pointer;border-right:1px solid var(--line2)}
.deseg .seg:last-child{border-right:none}
.deseg .seg.on{background:var(--acc);color:#fff}
.derow .denote{flex:1;min-width:170px;padding:5px 9px;font-size:12.5px}