/* ── 폰트 ────────────────────────────────────────────────────
   외부 요청 없음. 기기에 Pretendard 가 있으면 쓰고,
   fonts/ 폴더에 woff2 를 넣어두면 그것을 쓰며,
   둘 다 없으면 OS 기본 한글 글꼴로 자동 대체된다.
   ---------------------------------------------------------- */
@font-face{
  font-family:'PretendardLocal';
  src:local('Pretendard Variable'), local('Pretendard'),
      url('fonts/PretendardVariable.woff2') format('woff2-variations'),
      url('fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight:45 920; font-display:swap;
}
/* ===========================================================
   SIXONE 업무 프로그램 — 스타일
   index.html 의 <style> 블록을 선언 순서 그대로 합친 파일
   =========================================================== */

/* ===== 폰트 (MySeed 규칙: Inter / Pretendard / Noto Sans KR) ===== */
:root{
  --sans:'PretendardLocal','Pretendard','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'PretendardLocal','Pretendard',ui-monospace,'SF Mono',Menlo,Consolas,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',-apple-system,system-ui,monospace;
  --code:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Monaco,Consolas,'D2Coding',monospace;
}



  :root{
    /* ===== MySeed 어드민 토큰 (라이트) ===== */
    --bg:#ffffff;            /* 카드·사이드바·표 배경 */
    --panel:#f6f6f6;      /* 페이지 바탕, 행 hover */
    --ink:#0a0a0a;        /* 제목·주 텍스트·주 버튼 배경 */
    --ink-2:#2b2b2b;      /* 본문 강조 */
    --ink-3:#5b5b5b;      /* 보조 텍스트·라벨 */
    --ink-4:#6e6e6e;      /* 뮤트 텍스트·아이콘 */
    --line:#e7e7e7;       /* 기본 헤어라인 */
    --line-2:#d0d0d0;     /* 진한 보더(입력·배지·고스트) */
    --field:#bcbcbc;      /* 비활성 필드 */
    --dot-ok:#22c55e;     /* 상태 점 전용 */
    --dot-live:#ef4444;   /* 상태 점 전용 */
    /* ── 모션 토큰 ────────────────────────────────────────────
       예전에는 .12 / .14 / .15 / .16 / .18 / .22 / .26 / .28 / .3s
       아홉 가지가 섞여 있었다. 같은 "가리키기" 인데 버튼은 260ms,
       메뉴는 140ms 라 속도가 두 배 달랐다. 세 단계로 고정한다.
         1 = 제자리 변화 (색·테두리)
         2 = 펼침·접힘, 팝오버
         3 = 화면 밖에서 들어오는 것 (토스트·모달·드로어)       */
    --dur-1:120ms;
    --dur-2:180ms;
    --dur-3:280ms;
    --ease-out:cubic-bezier(.22,.61,.24,1);   /* 들어오는 것 */
    --ease-in:cubic-bezier(.4,0,1,1);         /* 나가는 것 */
    --ease-linear:linear;                     /* 회전·진행 */
    --ease:var(--ease-out);                   /* 예전 이름 유지 */

    /* ── 깊이(elevation) 3단계 ────────────────────────────────
       0 = 평면(카드·표) · 1 = 팝오버 · 2 = 모달·토스트          */
    --elev-0:none;
    --elev-1:0 8px 20px -8px rgba(0,0,0,.18);
    --elev-2:0 24px 60px -20px rgba(0,0,0,.30);

    /* ── 레거시 토큰 별칭 (기존 1,200줄 CSS가 그대로 동작하도록) ── */
    --black:var(--ink);
    --gray:var(--ink-3);
    --gray-lt:var(--ink-4);
    --hair:var(--line);
    --card:var(--bg);
    --primary:var(--ink);
    --primary-hov:var(--ink-2);
    --soft:var(--panel);
    --soft-hov:#f2f2f2;
    --ok:var(--ink);
    --danger:var(--ink);
    --ring:rgba(10,10,10,.10);
    --shadow:none;
    /* 상태 5색 → 전부 무채색. 색 구분은 상태 점(dot)이 담당 */
    --st-gray:var(--ink-3); --st-blue:var(--ink-2); --st-green:var(--ink-2);
    --st-orange:var(--ink-2); --st-red:var(--ink); --st-teal:var(--ink-2);
  }
  html[data-theme="dark"], body.dark{
    --elev-1:0 8px 20px -8px rgba(0,0,0,.55);
    --elev-2:0 24px 60px -20px rgba(0,0,0,.7);
    --bg:#0f0f0f; --panel:#1a1a1a;
    --ink:#f2f2f2; --ink-2:#d9d9d9; --ink-3:#a6a6a6; --ink-4:#8c8c8c;
    --line:#262626; --line-2:#3d3d3d; --field:#555555;
    --soft-hov:#262626;
    --ring:rgba(242,242,242,.10);
    color-scheme:dark;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  button,input,select,textarea{font-family:inherit}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:var(--sans);
    background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  /* ===== 앱 헤더 (2단) ===== */
  .app-header{background:var(--card);color:var(--ink);border-bottom:1px solid var(--hair)}
  .hdr-top{
    max-width:1160px;margin:0 auto;padding:22px 28px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .app-header .logo{font-family:var(--sans);font-size:27px;font-weight:800;letter-spacing:4px;color:var(--ink);cursor:pointer;user-select:none;line-height:1}
  .app-header .logo:hover{opacity:.75}
  .app-header .logo span{color:var(--ink)}
  .hdr-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* ===== 탭 레일 (2번째 줄) ===== */
  .tab-rail{
    background:var(--card);border-bottom:1px solid var(--hair);
    position:sticky;top:0;z-index:30;
  }
  .tab-rail-in{
    max-width:1160px;margin:0 auto;padding:8px 20px;
    display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  }
  .tab-rail-in::-webkit-scrollbar{display:none}
  .co-switch{display:flex;border-radius:999px;overflow:hidden;background:var(--soft);padding:3px;gap:3px}
  .co-btn{
    background:transparent;border:none;color:var(--gray-lt);padding:6px 17px;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:800;line-height:1;letter-spacing:.5px;
    border-radius:0;transition:color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
  }
  .co-btn:hover{color:var(--ink)}
  .co-btn.active{background:var(--primary);color:#ffffff;box-shadow:none}
  .tab-btn{
    background:none;border:none;color:var(--gray);
    padding:9px 15px;cursor:pointer;font-size:13px;font-family:inherit;letter-spacing:.2px;font-weight:600;
    border-radius:0;white-space:nowrap;transition:color var(--dur-1), background var(--dur-1);
  }
  .tab-btn:hover{color:var(--ink);background:var(--soft)}
  .tab-btn.active{color:#ffffff;font-weight:700;background:var(--primary)}
  .sub-rail{border-top:1px solid var(--hair);background:var(--bg)}
  .sub-rail .tab-rail-in{padding:6px 20px;gap:4px}
  .sub-btn{
    background:none;border:none;color:var(--gray);padding:7px 14px;border-radius:0;
    cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;white-space:nowrap;
    transition:color var(--dur-1), background var(--dur-1);
  }
  .sub-btn:hover{color:var(--ink);background:var(--soft)}
  .sub-btn.active{color:var(--ink);background:var(--card);font-weight:800;box-shadow:none}
  body.dark .sub-btn.active{background:var(--soft)}
  .tab-btn:focus-visible{outline:2px solid var(--black);outline-offset:-2px}

  .wrap{max-width:1160px;margin:0 auto;padding:34px 26px 100px}

  /* ===== 툴바 ===== */
  .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
  .btn{
    border:1px solid var(--line);background:var(--card);color:var(--ink);
    padding:9px 18px;border-radius:0;cursor:pointer;font-size:13px;font-family:inherit;font-weight:500;
    letter-spacing:.2px;transition:border-color var(--dur-1), background var(--dur-1), color var(--dur-1);
  }
  .btn:hover{border-color:var(--primary);background:var(--soft)}
  .btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  .btn.primary{background:var(--soft);color:var(--primary);border-color:transparent;font-weight:700}
  .btn.primary:hover{background:var(--soft-hov)}
  .btn.gold{background:var(--primary);border-color:var(--primary);color:#ffffff;font-weight:700}
  .btn.gold:hover{background:var(--primary-hov)}
  .btn.danger-txt{color:var(--danger)}

  /* ===== 카드 ===== */
  .card{
    background:var(--card);border:none;border-radius:0;box-shadow:none;
    padding:22px 24px;margin-bottom:16px;
  }
  .card h2{
    font-size:15px;letter-spacing:-.1px;color:var(--ink);font-weight:700;
    margin-bottom:18px;
    display:flex;align-items:center;gap:14px;
  }
  .card h2::after{content:"";flex:1;height:1px;background:var(--hair)}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  .field label{
    display:block;font-size:13px;color:#3d3d3d;margin-bottom:6px;
    letter-spacing:.2px;font-weight:700;
  }
  .field input,.field textarea,.field select{
    width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:0;
    font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);
  }
  .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:none}
  .field textarea{resize:vertical;min-height:68px}

  /* ===== 품목 테이블 ===== */
  table.items{width:100%;border-collapse:collapse;margin-top:4px}
  table.items th{
    font-size:13px;color:#3d3d3d;font-weight:700;letter-spacing:.4px;
    padding:10px 10px;background:var(--bg);border:none;
    text-align:center;white-space:nowrap;   /* v39-12: 구성 헤더 전체 중앙 정렬 */
  }
  table.items th:first-child{border-radius:0}
  table.items th:last-child{border-radius:0}
  table.items td{padding:7px 5px;border-bottom:1px solid var(--hair);vertical-align:middle}
  table.items input{
    width:100%;padding:10px 9px;border:1px solid var(--hair);border-radius:0;
    font-size:13px;font-family:inherit;background:transparent;color:var(--ink);
  }
  table.items input:not(.num){text-align:center}
  table.items td.cell-no{text-align:left}
  .no-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:26px;height:22px;padding:0 7px;
    background:var(--soft);border-radius:0;
    font-size:12px;font-weight:800;color:var(--gray);
    font-variant-numeric:tabular-nums;letter-spacing:.3px;
  }
  body.dark .no-badge{background:#262626;color:#6e6e6e}

  /* ===== 통계 기간: PC = 한 줄(1x4), 모바일 = 2x2 (아래 미디어쿼리) ===== */
  .stat-period{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .stat-period .tilde{color:var(--gray-lt)}
  .sp-btns{display:flex;gap:6px}
  /* v39-11: 통계 기간 달력 박스 크기 통일 (버튼과 동일 높이 37px) */
  .stat-period input[type="month"]{height:37px;min-height:37px;width:172px;padding:2px 30px 2px 10px;box-sizing:border-box}
  .stat-period .btn{height:37px;box-sizing:border-box}

  /* ===== 이력·통계 공용 미니 컨트롤 (디자인 토큰 일원화 + 다크 대응) ===== */
  .sel-mini,.inp-mini{
    padding:9px 11px;border:1px solid var(--line);border-radius:0;
    font-family:inherit;font-size:13px;background:var(--card);color:var(--ink);
  }
  .inp-mini{padding:8px 9px}
  body.dark .sel-mini,body.dark .inp-mini{background:#262626;border-color:#2b2b2b;color:#e7e7e7}
  table.items input:hover{border-color:var(--hair)}   /* v39-13: 호버 회색 배경 제거 */
  table.items input:focus{border-color:var(--black);background:#ffffff}
  table.items input.num{text-align:right}
  td.amount{text-align:right;font-weight:600;white-space:nowrap;padding-right:10px;font-variant-numeric:tabular-nums}
  .row-del{
    border:none;background:transparent;color:var(--ink-4);cursor:pointer;font-size:15px;
    padding:4px 8px;border-radius:0;line-height:1;
  }
  .row-del:hover{color:var(--danger);background:#f2f2f2}

  /* ===== 합계 ===== */
  .totals{
    margin-top:20px;margin-left:auto;width:340px;max-width:100%;
    border-top:1px solid var(--ink);
  }
  .totals .trow{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid var(--hair);font-size:15px}
  .totals .trow .lb{color:var(--gray);font-size:13px}
  .totals .trow.grand{
    background:var(--black);color:#ffffff;padding:14px 16px;
    font-size:18px;font-weight:800;border-bottom:none;margin-top:8px;
  }
  .totals .trow.grand .lb{color:#6e6e6e;font-weight:500;font-size:13px;letter-spacing:1px}
  .totals input:not([type=checkbox]){width:120px;text-align:right;padding:6px 8px;border:1px solid var(--line);border-radius:0;font-family:inherit}
  /* v38-12: 체크박스 크기 전 프로그램 통일 — 라벨이 터치 영역, 박스는 17px 고정 */
  input[type=checkbox]{width:17px !important;height:17px !important;min-height:0 !important;min-width:0 !important;flex:0 0 auto;accent-color:var(--primary);margin:0;cursor:pointer}
  input[type=radio]{accent-color:var(--primary);cursor:pointer}   /* v39-10: 권한 라디오 파란 점 → 블랙(테마색) */
  .switch input[type=checkbox]{width:0 !important;height:0 !important;opacity:0}
  .vat-toggle{min-height:34px}
  .totals input:focus{border-color:var(--black)}
  .vat-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray);cursor:pointer;user-select:none}
  .num-fmt{font-variant-numeric:tabular-nums}

  /* ===== 이력/상품 공통 ===== */
  .search-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
  .search-bar input{
    flex:1;min-width:200px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#ffffff;
  }
  .search-bar input:focus{border-color:var(--black)}
  /* v39-13: 검색·달력·정렬·버튼 네모 크기 통일 + ~ 물결 세로 중앙 */
  .search-bar input,.search-bar select,.search-bar .btn{height:40px;box-sizing:border-box}
  .search-bar input[type=month],.search-bar input[type=date]{height:40px;min-height:40px;padding-top:2px;padding-bottom:2px;flex:0 0 auto;min-width:0;width:160px}
  .search-bar select{padding-top:0;padding-bottom:0}
  .search-bar > span{align-self:center;line-height:1;flex:0 0 auto}
  .hist-item,.prod-item{
    background:var(--card);border:1px solid var(--hair);
    padding:16px 20px;margin-bottom:-1px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    transition:background var(--dur-1);
  }
  .hist-item:hover,.prod-item:hover{background:#f6f6f6}
  .hist-item .no{font-weight:700;color:var(--black);letter-spacing:.5px;font-size:13px;font-variant-numeric:tabular-nums}
  .hist-item .cli{flex:1;min-width:140px}
  .hist-item .cli .name{font-weight:600}
  .hist-item .cli .date{font-size:13px;color:var(--gray);margin-top:2px}
  .hist-item .amt{font-weight:700;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
  /* v38-17: 상태 컬러 스트립 — 목록 스캔성 */
  .hist-item{border-left:3px solid transparent}
  .hist-item.stq-수주{border-left-color:var(--st-green)}
  .hist-item.stq-발송{border-left-color:var(--st-blue)}
  .hist-item.stq-협의중{border-left-color:var(--st-blue)}
  .hist-item.stq-작성중{border-left-color:var(--st-gray)}
  .hist-item.stq-실패{border-left-color:var(--st-red)}
  /* v38-19: 브리핑 시간 열 · 건수 */
  .hb-tm{width:46px;flex-shrink:0;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
  .hb-tm.allday{color:var(--gray-lt);font-weight:600;font-size:11px;letter-spacing:.5px}
  .hb-cnt{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:0;background:var(--soft);color:var(--gray);font-size:11px;font-weight:700}

  /* v38-18: 상태 스트립 전 목록 확산 */
  .prod-item.sl-blue,.hist-item.sl-blue{border-left:3px solid var(--st-blue)}
  .prod-item.sl-green,.hist-item.sl-green{border-left:3px solid var(--st-green)}
  .prod-item.sl-gray,.hist-item.sl-gray{border-left:3px solid var(--st-gray)}
  .prod-item.sl-red,.hist-item.sl-red{border-left:3px solid var(--st-red)}
  /* v39-13: 품목 표 지브라·호버 회색 제거 — 입력칸이 회색으로 보이던 문제 (시안성) */
  .hist-item .acts,.prod-item .acts{display:flex;gap:6px}
  .hist-item .acts .btn,.prod-item .acts .btn{padding:6px 13px;font-size:13px}
  .empty{
    text-align:center;color:var(--gray);padding:60px 20px 70px;background:var(--card);
    border:1px dashed #d9d9d9;line-height:1.8;
  }
  /* v38-17: 빈 상태 아이콘 */
  .empty::before{content:"";display:block;width:38px;height:38px;margin:0 auto 12px;opacity:.45;background:var(--gray-lt);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12.5h-5.5l-2 3h-5l-2-3H2'/%3E%3Cpath d='M5.5 5h13l3.5 7.5V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12.5h-5.5l-2 3h-5l-2-3H2'/%3E%3Cpath d='M5.5 5h13l3.5 7.5V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4.5z'/%3E%3C/svg%3E") center/contain no-repeat}
  .storage-note{font-size:13px;color:var(--gray);margin-top:14px;line-height:1.75}

  /* ===== 상태 뱃지 (모노크롬) ===== */
  .badge{display:inline-block;padding:4px 11px;border-radius:0;font-size:13px;font-weight:700;letter-spacing:.4px}
  .st-select{
    padding:5px 8px;border-radius:0;font-size:13px;font-weight:700;letter-spacing:.5px;
    font-family:inherit;cursor:pointer;appearance:auto;
  }
  .st-select.st-작성중{background:#f2f2f2;color:var(--gray);border:1px solid var(--hair)}
  .st-select.st-발송{background:#ffffff;color:var(--black);border:1px solid var(--black)}
  .st-select.st-협의중{background:#d9d9d9;color:var(--ink);border:1px solid #d9d9d9}
  .st-select.st-수주{background:var(--black);color:#ffffff;border:1px solid var(--black)}
  .st-select.st-실패{background:#ffffff;color:var(--gray-lt);border:1px solid var(--hair)}
  .seg{display:flex;border:1px solid #d0d0d0;border-radius:0;overflow:hidden}
  .seg-btn{
    flex:1;padding:11px 8px;background:#ffffff;border:none;cursor:pointer;
    font-family:inherit;font-size:13px;color:var(--gray);font-weight:600;letter-spacing:.3px;
    border-right:1px solid #d0d0d0;transition:background var(--dur-1);
  }
  .seg-btn:last-child{border-right:none}
  .seg-btn.active{background:var(--black);color:#ffffff;font-weight:800}
  .info-box{
    background:#f6f6f6;border:1px solid var(--hair);border-left:3px solid var(--black);
    padding:16px 20px;font-size:13px;line-height:1.85;color:var(--ink);
  }
  .info-box h3{font-size:13px;font-weight:800;margin-bottom:8px;letter-spacing:.5px}
  .info-box .warn{color:#6e6e6e;font-weight:600}
  .rate-in{width:64px;text-align:right;border:1px solid var(--line);padding:6px 7px;border-radius:0;font-family:inherit}
  .rate-in:focus{border-color:var(--primary);box-shadow:none}
  .badge.st-작성중{background:#f2f2f2;color:var(--gray)}
  .badge.st-발송{background:#ffffff;color:var(--black);border:1px solid var(--black)}
  .badge.st-협의중{background:#d9d9d9;color:var(--ink)}
  .badge.st-수주{background:var(--black);color:#ffffff}
  .badge.st-실패{background:#ffffff;color:var(--gray-lt);border:1px solid var(--hair);text-decoration:line-through}

  /* ===== 상품 선택 모달 ===== */
  .modal-bg{
    display:none;position:fixed;inset:0;background:rgba(15, 15, 15, .6);z-index:50;
    align-items:center;justify-content:center;padding:20px;
  }
  .modal-bg.open{display:flex}
  .modal{
    background:#ffffff;width:640px;max-width:100%;max-height:80vh;
    display:flex;flex-direction:column;overflow:hidden;border-top:3px solid var(--black);
  }
  .modal-head{padding:18px 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--hair)}
  .modal-head h3{font-size:13px;flex:1;letter-spacing:2.5px;font-weight:800;text-transform:uppercase}
  .modal-head input{flex:2;padding:9px 12px;border:1px solid var(--line);border-radius:0;font-family:inherit;font-size:13px}
  .modal-head input:focus{border-color:var(--black)}
  .modal-close{border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--gray);padding:4px 8px}
  .modal-close:hover{color:var(--black)}
  .modal-body{overflow-y:auto;padding:8px 16px 18px}
  .pick-item{
    display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--hair);
    margin-top:-1px;cursor:pointer;transition:background var(--dur-1);
  }
  .pick-item:first-child{margin-top:8px}
  .pick-item:hover{background:#f6f6f6}
  .pick-item .cat,.prod-item .cat{
    font-size:13px;color:var(--black);background:#ffffff;border:1px solid var(--black);
    padding:3px 9px;white-space:nowrap;letter-spacing:1px;font-weight:600;
  }
  .pick-item .info{flex:1;min-width:0}
  /* v38-21: 캘린더 상세 모달 — 일정 제목·설명 2줄 꺾임 → 한 줄 말줄임 */
  #dayBg .info .nm, #tcalBg .info .nm,
  #dayBg .info .dc, #tcalBg .info .dc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick-item .info .nm{font-weight:600;font-size:13px}
  .pick-item .info .dc{font-size:13px;color:var(--gray);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pick-item .pr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

  /* ===== 상품 관리 ===== */
  .prod-item .info{flex:1;min-width:160px}
  .prod-item .info .nm{font-weight:600}
  .prod-item .info .dc{font-size:13px;color:var(--gray);margin-top:2px}
  .prod-item .pr{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

  /* ===== 토스트 ===== */
  #toast{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--black);color:#ffffff;padding:12px 26px;
    font-size:13px;letter-spacing:.3px;opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);z-index:99;
  }
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  #toast.action{pointer-events:auto}
  #toast .toast-btn{margin-left:12px;background:transparent;border:1px solid rgba(255,255,255,.55);color:inherit;
    padding:3px 12px;border-radius:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700}
  body.dark #toast .toast-btn{border-color:rgba(15, 15, 15, .45)}
  .row-mv{border:none;background:transparent;color:var(--ink-4);cursor:pointer;font-size:13px;padding:6px 3px;font-family:inherit}
  .row-mv:hover{color:var(--ink)}
  .row-mv:disabled{opacity:.25;cursor:default}
  body.dark .row-mv{color:#5b5b5b}
  body.dark .row-mv:hover{color:#e7e7e7}


  /* ===== 캘린더 ===== */
  .cal-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
  .cal-toolbar .ym{font-size:18px;font-weight:800;letter-spacing:1px;min-width:130px;text-align:center;font-variant-numeric:tabular-nums}
  .cal-nav{border:1px solid var(--line);background:var(--card);color:var(--ink);width:36px;height:36px;cursor:pointer;font-size:13px;font-family:inherit;border-radius:0;transition:background var(--dur-1),border-color var(--dur-1)}
  .cal-nav:hover{border-color:var(--primary);background:var(--soft)}
  .cal-legend{margin-left:auto;display:flex;gap:14px;font-size:13px;color:var(--gray);align-items:center;flex-wrap:wrap}
  .cal-legend .dot{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
  .cal-legend .dot.lv{background:#6e6e6e}
  .cal-legend .dot.ev{background:var(--black)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--hair);border-radius:0;overflow:hidden;background:var(--card);box-shadow:none}
  .cal-dow{padding:11px 8px;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--gray);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:center;background:var(--bg)}
  .cal-dow:nth-child(7n){border-right:none}
  .cal-dow.sun{color:var(--danger)}
  .cal-dow.sat{color:#6e6e6e}
  .cal-cell{
    min-height:96px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
    padding:7px 7px 9px;cursor:pointer;transition:background var(--dur-1);position:relative;overflow:hidden;
  }
  .cal-cell:nth-child(7n){border-right:none}
  .cal-cell:nth-last-child(-n+7){border-bottom:none}
  .cal-cell:hover{background:var(--soft)}
  .cal-cell.today{background:rgba(26, 26, 26, .06)}
  .cal-cell.out{background:#f6f6f6;cursor:default}
  .cal-cell.out .chip{opacity:.4}
  .cal-cell.out .cal-day{color:#d0d0d0}
  .cal-day{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:5px}
  .cal-cell.sun .cal-day{color:var(--danger)}
  .cal-cell.sat .cal-day{color:#6e6e6e}
  .cal-cell.hol .cal-day{color:var(--danger)}
  .hol-name{font-size:11px;font-weight:700;color:var(--danger);margin-left:5px;letter-spacing:0;vertical-align:1px}
  body.dark .cal-cell.sat .cal-day,body.dark .cal-dow.sat{color:#6e6e6e}
  /* v39-17: 오늘 원형 배지는 날짜 숫자(.dnum)에만 — 공휴일 이름이 원 안에 구겨지던 깨짐 수정 */
  .cal-day .dnum{display:inline-flex;align-items:center;justify-content:center;min-width:0}
  .cal-cell.today .cal-day .dnum{
    background:var(--primary);color:#ffffff;
    width:23px;height:23px;border-radius:50%;
  }
  .chip{
    display:block;font-size:13px;padding:3px 7px;margin-top:3px;border-radius:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;letter-spacing:.2px;
  }
  .chip.lv{background:#6e6e6e;color:#ffffff}
  .chip.ev{background:var(--black);color:#ffffff;font-weight:600;border-radius:0}
  .chip.span.start{margin-right:-8px;border-radius:0}
  .chip.span.mid{margin-left:-8px;margin-right:-8px;border-radius:0}
  .chip.span.end{margin-left:-8px;border-radius:0}
  .badge.lv-red{background:#6e6e6e;color:#ffffff}
  .badge.lv-red-half{background:#8c8c8c;color:#ffffff}
  .chip.more{background:transparent;color:var(--gray);font-weight:600}
  .day-sec-title{font-size:13px;letter-spacing:2px;font-weight:800;color:var(--gray);margin:14px 2px 6px}


  .theme-switch{
    position:relative;width:62px;height:30px;border-radius:999px;
    border:1px solid var(--line);background:var(--soft);cursor:pointer;padding:0;
    display:inline-flex;align-items:center;font-family:inherit;
  }
  .theme-switch .ts-ic{width:30px;text-align:center;font-size:13px;color:var(--gray-lt);line-height:1;pointer-events:none;position:relative;z-index:1}
  .theme-switch .sun{color:var(--ink)}
  .theme-switch .ts-knob{
    position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
    background:var(--card);box-shadow:none;transition:transform var(--dur-2) var(--ease-out);
  }
  body.dark .theme-switch .ts-knob{transform:translateX(32px)}
  body.dark .theme-switch .sun{color:var(--gray-lt)}
  body.dark .theme-switch .moon{color:#e7e7e7}

  /* ===== 대시보드 ===== */
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:14px}
  .stat-card{background:var(--card);border:1px solid var(--hair);padding:19px 21px;transition:border-color var(--dur-1)}
  .stat-card.clickable{cursor:pointer}
  .stat-card.clickable:hover{border-color:var(--black)}
  .backup-banner{
    background:var(--card);border:1px solid var(--hair);border-left:3px solid #6e6e6e;
    padding:16px 20px;margin-bottom:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  }
  .backup-banner.slim{padding:9px 12px 9px 14px;margin-bottom:24px;gap:10px;font-size:12px}
  /* v38-15: 모바일 하단 고정 저장 바 */
  /* v38-17: PC 견적 작성 — 플로팅 합계 (품목 입력 중 총액 확인) */
  #pcTotalPill{display:none}
  @media (min-width:761px){
    body.show-totpill #pcTotalPill{display:flex;position:fixed;right:28px;bottom:26px;z-index:35;
      align-items:center;gap:8px;background:var(--black);color:#ffffff;padding:11px 20px;border-radius:0;
      font-size:13px;font-weight:600;cursor:pointer;box-shadow:none;
      transition:opacity var(--dur-2);letter-spacing:.3px}
    #pcTotalPill b{font-size:15px;font-variant-numeric:tabular-nums;font-weight:800}
    body.dark.show-totpill #pcTotalPill{background:#e7e7e7;color:#1a1a1a;box-shadow:none}
    body.totvis #pcTotalPill{opacity:0;pointer-events:none}
  }
  #mobileSaveBar{display:none}
  @media (max-width:760px){
    body.has-savebar #mobileSaveBar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
      background:var(--card);border-top:1px solid var(--line);box-shadow:none}
    #mobileSaveBar .btn{width:100%;min-height:47px;font-size:15px}
    body.has-savebar .view.active{padding-bottom:88px}
    body.has-savebar #toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  }
  .backup-banner.slim .tx{flex:1;min-width:180px}
  .backup-banner .tx{flex:1;min-width:200px;font-size:13px;line-height:1.6}
  .backup-banner .tx b{color:#6e6e6e}
  .home-link{cursor:pointer}
  .home-link:hover .chip{opacity:.75}
  .stat-card .k{font-size:13px;letter-spacing:2px;color:var(--gray);font-weight:800}
  .stat-card .v{font-size:24px;font-weight:800;margin-top:10px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
  /* v38-15: 핵심 지표 위계 — 이번 달 수주 프라이머리 */
  .stat-card.primary{border-top:3px solid var(--ink)}
  body.dark .stat-card.primary{border-top-color:var(--gray)}
  .stat-card.primary .v{font-size:31px;letter-spacing:-.6px}
  .stat-card.primary .k{font-weight:800;color:var(--ink)}
  .stat-card .s{font-size:13px;color:var(--gray);margin-top:5px}
  .home-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:760px){.home-cols{grid-template-columns:1fr}}

  /* ===== 통계 ===== */
  .bars{display:flex;align-items:flex-end;gap:7px;height:170px;border-bottom:1px solid var(--ink);padding:0 4px;margin-top:8px;position:relative}
  .bars .bg-line{position:absolute;left:0;right:0;height:1px;background:var(--hair);pointer-events:none}
  .bars .bg-line span{position:absolute;right:2px;top:-13px;font-size:11px;color:var(--gray-lt);font-variant-numeric:tabular-nums}
  .bar{position:relative;z-index:1;cursor:default}
  .bar:hover .col{background:var(--gray)}
  .bar.top .val{font-weight:800;color:var(--ink)}
  .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
  .bar .val{font-size:13px;color:var(--gray);margin-bottom:4px;white-space:nowrap}
  .bar .col{width:100%;max-width:46px;background:var(--black);min-height:2px}
  .bar-lbls{display:flex;gap:7px;padding:6px 4px 0}
  .bar-lbls span{flex:1;text-align:center;font-size:13px;color:var(--gray);font-variant-numeric:tabular-nums}
  .hrow{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair)}
  .hname{width:150px;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .htrack{flex:1;background:var(--hair);height:13px}
  .hfill{background:var(--black);height:100%}
  .hval{width:120px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--gray)}

  /* ===== 캘린더 추가 칩 ===== */
  .cal-legend .dot.due{background:#ffffff;border:1.5px solid #6e6e6e}
  .cal-legend .dot.pay{background:#ffffff;border:1.5px dashed var(--gray)}
  .chip.due{background:#ffffff;border:1px solid var(--ink);color:var(--ink);font-weight:600}
  .chip.pay{background:#ffffff;border:1px dashed var(--gray);color:var(--gray);font-weight:600}

  /* ===== 다크모드 ===== */
  body.dark{--bg:#0f0f0f;--card:#1a1a1a;--ink:#e7e7e7;--gray:#a6a6a6;--gray-lt:#6e6e6e;--hair:#3d3d3d;--ok:#bcbcbc;
    --primary:#e7e7e7;--primary-hov:#d0d0d0;--soft:#262626;--soft-hov:#2b2b2b;--line:#3d3d3d;
    --ring:rgba(231, 231, 231, .12);--shadow:0 4px 30px rgba(0,0,0,.35)}
  body.dark .tab-btn.active{color:#0f0f0f;border-bottom-color:#e7e7e7}
  body.dark .co-btn.active{color:#0f0f0f}
  body.dark .btn{background:#262626;color:#e7e7e7;border-color:#3d3d3d}
  body.dark .btn:hover{border-color:#e7e7e7}
  body.dark .btn.gold{background:#e7e7e7;color:#0f0f0f;border-color:#e7e7e7}
  body.dark .btn.gold:hover{background:#d0d0d0}
  body.dark .btn.primary{background:#1a1a1a;color:#e7e7e7;border-color:#e7e7e7}
  body.dark .btn.primary:hover{background:#e7e7e7;color:#0f0f0f}
  body.dark .field input,body.dark .field textarea,body.dark .field select,
  body.dark .search-bar input,body.dark .totals input,body.dark .rate-in,
  body.dark .modal-head input,body.dark .modal select,body.dark .modal input{
    background:#262626;border-color:#3d3d3d;color:#e7e7e7;
  }
  body.dark table.items th{background:#1a1a1a;color:#d0d0d0}
  body.dark table.items input{color:#e7e7e7;border-color:#2b2b2b}
  body.dark table.items input:hover{background:#262626}
  body.dark table.items input:focus{background:#262626;border-color:#e7e7e7}
  body.dark .totals{border-top-color:#e7e7e7}
  body.dark .totals .trow.grand{background:#e7e7e7;color:#0f0f0f}
  body.dark .totals .trow.grand .lb{color:#5b5b5b}
  body.dark .hist-item:hover,body.dark .prod-item:hover,body.dark .pick-item:hover{background:#262626}
  body.dark .cal-grid{background:#1a1a1a;border-color:var(--hair)}
  body.dark .cal-dow{background:#1a1a1a}
  body.dark .cal-cell.out{background:#1a1a1a}
  body.dark .cal-cell:hover{background:#262626}
  body.dark .cal-cell.today .cal-day .dnum{background:#e7e7e7;color:#0f0f0f}
  body.dark .chip.ev{background:#e7e7e7;color:#0f0f0f}
  body.dark .chip.due,body.dark .chip.pay{background:#1a1a1a}
  body.dark .badge.st-발송{background:#1a1a1a;color:#e7e7e7;border-color:#e7e7e7}
  body.dark .badge.st-수주,body.dark .st-select.st-수주{background:#e7e7e7;color:#0f0f0f;border-color:#e7e7e7}
  body.dark .badge.st-작성중,body.dark .st-select.st-작성중{background:#2b2b2b;color:#6e6e6e;border-color:#2b2b2b}
  body.dark .badge.st-협의중,body.dark .st-select.st-협의중{background:#3d3d3d;color:#e7e7e7;border-color:#3d3d3d}
  body.dark .st-select.st-발송{background:#1a1a1a;color:#e7e7e7;border-color:#e7e7e7}
  body.dark .st-select.st-실패{background:#1a1a1a;color:#6e6e6e;border-color:#2b2b2b}
  body.dark .modal{background:#1a1a1a;border-top-color:#e7e7e7}
  body.dark .modal-close:hover{color:#e7e7e7}
  body.dark #toast{background:#e7e7e7;color:#0f0f0f;border:none}
  body.dark .cal-nav{background:#262626;color:#e7e7e7;border-color:#3d3d3d}
  body.dark .cal-nav:hover{border-color:#e7e7e7}
  body.dark .bar .col,body.dark .hfill{background:#e7e7e7}
  body.dark .bars{border-bottom-color:#e7e7e7}
  body.dark .htrack{background:#2b2b2b}
  body.dark .empty{background:#1a1a1a;border-color:#3d3d3d}
  body.dark .tab-rail{background:#0f0f0f;border-bottom-color:#2b2b2b}
  body.dark .stat-card.clickable:hover{border-color:#e7e7e7}
  body.dark .backup-banner{background:#1a1a1a}
  body.dark .seg{border-color:#3d3d3d}
  body.dark .seg-btn{background:#262626;color:#6e6e6e}
  body.dark .seg-btn.active{background:#e7e7e7;color:#0f0f0f}
  body.dark .info-box{background:#1a1a1a;border-color:#2b2b2b;border-left-color:#e7e7e7}

  /* ===== 다크 모드 시인성 보강 (v24-2) ===== */
  body.dark{--danger:#8c8c8c;--gray-lt:#8c8c8c;
    --st-gray:#bcbcbc; --st-blue:#bcbcbc; --st-green:#bcbcbc; --st-orange:#bcbcbc; --st-red:#bcbcbc; --st-teal:#bcbcbc}
  /* 날짜/월 입력의 달력 아이콘, 네이티브 선택 팝업, 스크롤바를 다크로 렌더링 */
  :root{color-scheme:light}
  body.dark{color-scheme:dark}
  body.dark input[type="date"],body.dark input[type="month"]{color-scheme:dark}
  body.dark .field label{color:#d0d0d0}
  body.dark .hist-item .no{color:#e7e7e7}
  body.dark .pick-item .cat,body.dark .prod-item .cat{background:#1a1a1a;color:#e7e7e7;border-color:#6e6e6e}
  body.dark .badge.st-실패{background:#1a1a1a;color:#6e6e6e;border-color:#2b2b2b}
  body.dark .row-del{color:#5b5b5b}
  body.dark .row-del:hover{color:#8c8c8c;background:#262626}
  body.dark .backup-banner .tx b{color:#8c8c8c}
  body.dark .info-box .warn{color:#8c8c8c}
  body.dark .cal-legend .dot.ev{background:#e7e7e7}
  body.dark .cal-legend .dot.due,body.dark .cal-legend .dot.pay{background:#1a1a1a}
  body.dark .cal-cell.out .cal-day{color:#555555}
  body.dark .totals input:focus,body.dark .search-bar input:focus,body.dark .modal-head input:focus,
  body.dark .field input:focus,body.dark .field textarea:focus,body.dark .field select:focus{border-color:#e7e7e7}
  body.dark .tab-btn:focus-visible{outline-color:#e7e7e7}
  body.dark .modal-close{color:#6e6e6e}

  /* ===== 계정 관리 ===== */
  .acct-rows{margin-top:10px;display:flex;flex-direction:column;gap:5px}
  .acct-row{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
  .acct-k{width:62px;flex-shrink:0;color:var(--gray);font-size:13px;font-weight:700;letter-spacing:.5px}
  .acct-v{font-family:inherit;color:var(--ink);word-break:break-all;font-variant-numeric:tabular-nums}
  .copy-btn{
    border:1px solid #d9d9d9;background:var(--card);color:var(--gray);
    padding:3px 10px;border-radius:0;cursor:pointer;font-size:13px;font-family:inherit;
    letter-spacing:.3px;transition:border-color var(--dur-1),color var(--dur-1);white-space:nowrap;
  }
  .copy-btn:hover{border-color:var(--black);color:var(--ink)}
  body.dark .copy-btn{background:#262626;color:#6e6e6e;border-color:#3d3d3d}
  body.dark .copy-btn:hover{border-color:#e7e7e7;color:#e7e7e7}
  body.dark .acct-v{color:#e7e7e7}

  .view{display:none}
  .view.active{display:block}

  /* =====================================================
     인쇄용 견적서 문서 (블랙 & 화이트)
  ===================================================== */
  #printDoc{display:none;background:#ffffff;color:#1a1a1a}
  .doc{
    width:210mm;min-height:280mm;margin:0 auto;padding:22mm 24mm 20mm;
    font-family:var(--sans);
    position:relative;
  }
  .doc-head{
    border-top:1px solid #1a1a1a;
    padding:14px 2px 16px;border-bottom:1px solid #1a1a1a;
    display:flex;justify-content:space-between;align-items:flex-end;
  }
  .doc-head .t-en{font-size:13px;letter-spacing:6px;color:#6e6e6e;margin-bottom:7px;font-weight:500}
  .doc-head .t-ko{font-size:27px;font-weight:800;letter-spacing:13px;color:#1a1a1a}
  .doc-head .brand{text-align:right}
  .doc-head .brand .nm{font-family:var(--sans);font-size:18px;font-weight:800;letter-spacing:2px;color:#1a1a1a}
  .doc-head .brand .nm span{color:#6e6e6e}
  .doc-head .brand .desc{font-size:13px;color:#6e6e6e;margin-top:5px;letter-spacing:2px}
  .doc-meta{
    display:flex;justify-content:space-between;gap:24px;margin:20px 0 6px;font-size:13px;
  }
  .doc-meta .box{flex:1}
  .doc-meta h4{
    font-size:13px;color:#6e6e6e;letter-spacing:2.5px;border-bottom:1px solid #e7e7e7;
    padding-bottom:6px;margin-bottom:9px;font-weight:800;
  }
  .doc-meta table{width:100%;border-collapse:collapse}
  .doc-meta td.k:nth-of-type(3),.doc-meta td.k+td+td.k{padding-left:10px;width:auto}
  .doc-meta td{padding:3.5px 2px;vertical-align:top}
  .doc-meta td.k{color:#8c8c8c;width:74px;white-space:nowrap;font-size:13px}
  .doc-greet{font-size:13px;color:#5b5b5b;margin:16px 2px 8px}
  .doc-sum{
    background:none;border:1px solid #1a1a1a;border-radius:0;
    padding:11px 16px;margin:12px 0 16px;font-size:13px;display:flex;justify-content:space-between;align-items:center;
  }
  .doc-sum b{font-size:15px;letter-spacing:.5px}
  table.doc-items{width:100%;border-collapse:collapse;font-size:13px}
  table.doc-items th{
    background:none;color:#1a1a1a;padding:8px 8px;font-weight:800;font-size:12.3px;
    letter-spacing:1px;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;text-align:center;   /* v39-13: 인쇄 문서 헤더도 중앙 정렬 */
  }
  table.doc-items th.c{text-align:center}
  table.doc-items th.r{text-align:center}
  table.doc-items td{padding:9px 8px;border-bottom:1px solid #bcbcbc}
  table.doc-items td.c{text-align:center}
  table.doc-items td.r{text-align:right;font-variant-numeric:tabular-nums}
  .doc-totals{width:300px;margin-left:auto;margin-top:14px;font-size:13px}
  .doc-totals .dr{display:flex;justify-content:space-between;padding:7px 6px;border-bottom:1px solid #e7e7e7}
  .doc-totals .dr .k{color:#8c8c8c;font-size:13px}
  .doc-totals .dr.g{
    background:#1a1a1a;color:#ffffff;padding:10px 14px;font-size:15px;font-weight:800;border-bottom:none;margin-top:6px;border-radius:0;
  }
  .doc-totals .dr.g .k{color:#d9d9d9;font-size:12px;letter-spacing:1.5px;font-weight:700}
  .doc-notes{margin-top:22px;font-size:13px;color:#5b5b5b}
  .doc-notes h4{font-size:13px;color:#6e6e6e;letter-spacing:2.5px;margin-bottom:7px;font-weight:800;border-bottom:1px solid #e7e7e7;padding-bottom:5px}
  .doc-notes p{white-space:pre-wrap;line-height:1.75}
  .doc-foot{
    margin-top:36px;padding-top:12px;border-top:1px solid #e7e7e7;
    display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#6e6e6e;letter-spacing:.3px;
  }
  .doc-foot .co{font-family:var(--sans);font-weight:800;color:#1a1a1a;letter-spacing:2px;font-size:13px}
  .doc-foot .co span{color:#6e6e6e}
  .doc-stamp{font-size:13px;color:#2b2b2b;text-align:right;margin-top:28px}
  .doc-stamp b{margin-left:8px;letter-spacing:1px}
  .doc-stamp .in{color:#6e6e6e;font-size:13px;margin-left:6px}
  .stamp-wrap{position:relative;display:inline-block}
  .stamp-img{position:absolute;left:50%;top:50%;transform:translate(-42%,-52%);width:60px;height:60px;opacity:.92;pointer-events:none}
  .doc-bank{margin-top:18px;padding:11px 16px;border:none;border-radius:0;background:#f6f6f6;font-size:13px;letter-spacing:.3px}
  .doc-bank b{margin-right:6px;font-size:13px;color:#6e6e6e;letter-spacing:1.5px}

  /* ===== 홈 대시보드 위젯 ===== */
  .hb-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--hair)}
  .hb-row:last-child{border-bottom:none}
  .hb-tx{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .goal-wrap{margin-top:4px}
  .goal-nums{font-size:13px;margin-bottom:8px;font-variant-numeric:tabular-nums}
  .goal-nums b{font-size:18px}
  .goal-pct{float:right;font-weight:800;font-size:15px}
  .goal-bar{height:14px;background:var(--soft);border-radius:99px;overflow:hidden}
  .goal-bar i{display:block;height:100%;border-radius:99px;transition:width var(--dur-3)}
  .sd-chips{display:flex;flex-wrap:wrap;gap:8px}
  .sd-chip{border:1.5px solid;border-radius:0;padding:4px 12px;font-size:13px;font-weight:700;cursor:pointer;background:transparent}
  .sd-chip b{font-size:13px}
  .sd-chip.late{border-color:var(--danger);color:var(--danger);background:rgba(91, 91, 91, .06)}
  .hsub{grid-column:1 / -1;font-size:12px;color:var(--gray);margin-top:2px}
  body.dark .hb-row{border-color:#2b2b2b}
  body.dark .sd-chip.late{background:rgba(188, 188, 188, .08)}

  /* ===== 설정 화면 ===== */
  .cfg-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid var(--hair)}
  .cfg-row:last-child{border-bottom:none}
  .cfg-tx b{font-size:13px;display:block}
  .cfg-tx span{font-size:12px;color:var(--gray-lt);display:block;margin-top:2px;line-height:1.5}
  .cfg-sec{font-size:13px;font-weight:800;margin:18px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--ink)}
  .cfg-sec span{font-weight:600;font-size:11px;color:var(--gray-lt);margin-left:6px}
  body.dark .cfg-sec{border-color:#e7e7e7}
  body.dark .cfg-row{border-color:#2b2b2b}
  /* 좌우 슬라이드 스위치 */
  .switch{position:relative;display:inline-block;width:46px;height:26px;flex:none}
  .switch input{opacity:0;width:0;height:0}
  .switch .sl{
    position:absolute;inset:0;cursor:pointer;border-radius:99px;
    background:#d0d0d0;transition:background var(--dur-2);border:1px solid #bcbcbc;
  }
  .switch .sl::before{
    content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;
    background:#ffffff;transition:transform var(--dur-2);box-shadow:none;
  }
  .switch input:checked + .sl{background:var(--primary)}
  .switch input:checked + .sl::before{transform:translateX(20px)}
  body.dark .switch .sl{background:#3d3d3d}
  body.dark .switch input:checked + .sl{background:var(--primary)}
  body.dark .switch input:checked + .sl::before{background:#1a1a1a;box-shadow:none}

  /* ===== 클릭 가능 카드 화살표 표시 (v37-6) ===== */
  .stat-card.clickable::after{content:"→";position:absolute;top:15px;right:16px;font-size:13px;color:var(--gray-lt);transition:transform var(--dur-1),color var(--dur-1)}
  .stat-card.clickable{position:relative}
  .stat-card.clickable:hover::after{color:var(--ink);transform:translateX(3px)}

  /* ===== 삭제 버튼 구분 강화 (v37-6) ===== */
  .acts .btn.danger-txt{margin-left:8px}
  .btn.danger-txt:hover{border-color:var(--danger);background:rgba(91, 91, 91, .06)}
  body.dark .btn.danger-txt:hover{background:rgba(188, 188, 188, .1)}

  /* ===== 검색·필터 건수 표시 (v38-6) ===== */
  .filter-info{font-size:12px;color:var(--gray-lt);margin:2px 2px 10px}
  .filter-info b{color:var(--ink)}

  /* ===== 회사 캘린더 인쇄 문서 (buildCalDoc 이 사용) ===== */
  .tcal-doc .tc-tbl{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:16px}
  .tcal-doc .tc-tbl th{border:1px solid #1a1a1a;padding:6px 4px;font-size:11px;letter-spacing:3px;background:#f2f2f2;font-weight:800}
  .tcal-doc .tc-tbl td{border:1px solid #bcbcbc;vertical-align:top;padding:5px 5px;height:82px;font-size:11px}
  .tcal-doc .tc-tbl td.out{background:#f6f6f6}
  .tcal-doc .tc-d{font-weight:800;font-size:11px;margin-bottom:3px}
  .tcal-doc .tc-it{margin-top:2px;line-height:1.45;border-left:2px solid #1a1a1a;padding-left:4px;word-break:break-all}

  /* ===== 공용 미니 캘린더 ===== */
  .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .mc-head b{font-size:13px}
  .mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
  .mc-dow{font-size:11px;color:var(--gray-lt);padding:3px 0;font-weight:700}
  .mc-dow.sun{color:var(--danger)} .mc-dow.sat{color:#6e6e6e}
  .mc-cell{position:relative;font-size:12px;padding:7px 0 9px;border-radius:0;cursor:pointer;font-variant-numeric:tabular-nums}
  .mc-cell:hover{background:var(--soft)}
  .mc-cell.out{cursor:default}
  .mc-cell.sun{color:var(--danger)} .mc-cell.sat{color:#6e6e6e}
  .mc-cell.today{outline:1.5px solid var(--ink);outline-offset:-1.5px;font-weight:800}
  .mc-cell.sel{background:var(--ink);color:#ffffff !important}
  .mc-cell i{position:absolute;left:50%;transform:translateX(-50%);bottom:1px;font-style:normal;font-size:11px;line-height:1;
    background:var(--primary);color:#ffffff;border-radius:0;padding:1px 4px;font-weight:800}
  .mc-cell.sel i{background:#ffffff;color:#1a1a1a}
  body.dark .mc-cell i{color:#1a1a1a}
  body.dark .mc-cell.sat,body.dark .mc-dow.sat{color:#6e6e6e}
  body.dark .mc-cell.today{outline-color:#e7e7e7}
  body.dark .mc-cell.sel{background:#e7e7e7;color:#1a1a1a !important}


  /* ===== 급여명세서 신양식 (5섹션 법정 서식) ===== */
  .p2doc{padding:12mm 13mm !important;font-size:11.4px;color:#262626}
  .p2-title{text-align:center;font-size:18px;font-weight:800;letter-spacing:10px;color:#1a1a1a}
  .p2-sub{text-align:center;color:#555555;font-size:11px;margin:5px 0 11px}
  .p2-sec{font-weight:800;font-size:12px;color:#1a1a1a;border-bottom:1px solid #1a1a1a;padding-bottom:3px;margin:10px 0 0}
  .p2-info{width:100%;border-collapse:collapse}
  .p2-info td{border-bottom:1px solid #bcbcbc;padding:4.5px 8px;font-size:11px;vertical-align:top}
  .p2-info td.k{color:#1a1a1a;white-space:nowrap;width:110px;background:#f6f6f6}
  .p2-dim{color:#6e6e6e;font-size:11px}
  .p2-pd{width:100%;border-collapse:collapse}
  .p2-pd th{border-bottom:1px solid #1a1a1a;padding:5.5px 8px;font-size:11px;font-weight:800;text-align:center;background:#f6f6f6}   /* v39-13 */
  .p2-pd th:nth-child(2),.p2-pd th:nth-child(4){text-align:center}   /* v39-13: 인쇄 헤더 중앙 통일 */
  .p2-pd td{border-bottom:1px solid #bcbcbc;padding:4.5px 8px;font-size:11px}
  .p2-pd td.r{text-align:right;font-variant-numeric:tabular-nums}
  .p2-pd .p2-tt td{font-weight:800;border-top:1px solid #d0d0d0;border-bottom:none;padding-top:6px}
  .p2-net{border:1px solid #1a1a1a;text-align:center;padding:7px;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:2px}
  .p2-net b{font-size:15px;letter-spacing:.5px}
  .p2-lines{padding:6px 2px 0;font-size:11px;color:#3d3d3d;line-height:1.68}
  .p2-confirm{text-align:center;margin-top:14px;font-size:12px}
  .p2-sign{margin-top:14px;display:flex;flex-direction:column;gap:20px;align-items:flex-end}
  .p2-signrow{display:flex;align-items:flex-start;gap:10px;font-size:12.4px}
  .p2-signco{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
  .p2-signceo{display:flex;align-items:center;gap:8px;font-weight:700}
  .p2-signk{color:#8c8c8c;font-size:12px}
  .p2-signrow .in{position:relative;color:#6e6e6e}
  .p2-signrow .stamp-img{position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:60px;height:60px;opacity:.92}

  /* ===== 견적서 신양식 (블루 제안서) ===== */
  .q2doc{padding:12mm 12mm 9mm !important; font-size:11px; color:#262626}
  .q2-bar{height:1px;background:#1a1a1a;margin:0 -2px 11px}
  .q2-top{display:flex;justify-content:space-between;align-items:flex-end}
  .q2-logo{font-family:var(--sans);font-size:24px;font-weight:800;letter-spacing:2px;color:#1a1a1a}
  .q2-logo span{color:#1a1a1a}
  .q2-quot{color:#1a1a1a;font-size:12px;font-weight:800;letter-spacing:5px}
  .q2-sub{margin:6px 0 12px;color:#6e6e6e;font-size:11px}
  .q2-lbl{color:#1a1a1a;font-weight:800;font-size:11px;letter-spacing:1px;margin-bottom:5px}
  .q2-meta{display:flex;gap:15px;align-items:flex-start}
  .q2-to{flex:1;min-width:0}
  .q2-toname{font-size:18px;font-weight:800;color:#1a1a1a;margin:2px 0 8px}
  .q2-tometa td{padding:2px 0;font-size:11px}
  .q2-tometa td.k{color:#8c8c8c;width:64px}
  .q2-greet{margin-top:9px;color:#555555}
  .q2-sup{flex:1.15;background:#f6f6f6;border-radius:0;padding-bottom:8px}
  .q2-sup table{width:100%;border-collapse:collapse;margin-top:4px}
  .q2-sup td{padding:3px 11px;font-size:11px;vertical-align:top}
  .q2-sup td.k{color:#8c8c8c;white-space:nowrap;width:86px}
  .q2-items{width:100%;border-collapse:collapse;margin-top:4px}
  .q2-items th{border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;padding:6.5px 4px;font-size:11px;font-weight:800;text-align:center;white-space:nowrap}
  .q2-items td{border-bottom:1px solid #bcbcbc;padding:5.5px 5px;font-size:11px;vertical-align:middle;text-align:center}
  .q2-items td.c{text-align:center}
  .q2-items td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .q2-items .q2-no{color:#6e6e6e}
  .q2-items .q2-cat{font-size:10.6px;letter-spacing:.2px}
  .q2-items .q2-nm{text-align:center}
  .q2-items .q2-num{font-variant-numeric:tabular-nums;white-space:nowrap}
  .q2-items .q2-desc{color:#555555;font-size:11px}
  .q2-items .q2-etc{font-size:10.6px;color:#555555}
  .q2-sumwrap{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;gap:20px}
  .q2-refs{color:#6e6e6e;font-size:10.4px;line-height:1.7}
  .q2-sums{width:300px}
  .q2-sr{display:flex;justify-content:space-between;padding:4px 10px;font-size:12px;font-variant-numeric:tabular-nums}
  .q2-total{display:flex;justify-content:space-between;align-items:center;color:#1a1a1a;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;padding:8px 13px;margin-top:4px;font-size:13px;font-weight:800}
  .q2-total b{font-size:15px;letter-spacing:.5px;font-variant-numeric:tabular-nums}
  .q2-notice .q2-nt{display:flex;gap:11px;align-items:center;border-bottom:1px solid #bcbcbc;padding:5.5px 2px;font-size:11px;min-height:25px}
  .q2-notice .q2-nt span{color:#1a1a1a;font-weight:800;width:14px;text-align:center}
  .q2-ars{text-align:center;margin-top:12px;border-top:1px solid #1a1a1a;padding-top:8px}
  .q2-arstel{font-weight:800;font-size:11px}
  .q2-arsline{color:#8c8c8c;font-size:10.6px;margin-top:4px}
  .q2-sign{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:11px;border-top:1px solid #bcbcbc}
  .q2-sign>b{font-size:13px}
  .q2-signco{display:flex;align-items:center;gap:6px;font-size:13px;position:relative}
  .q2-signco .stamp-wrap{position:relative;width:60px;height:60px;display:inline-block}
  .q2-signco .stamp-img{position:absolute;left:0;top:50%;transform:translateY(-50%);width:60px;height:60px;opacity:.92}
  .q2-foot{text-align:center;color:#bcbcbc;font-size:11px;margin-top:11px;border-top:1px solid #bcbcbc;padding-top:8px}

  /* ===== 입장 화면 (v35-8) ===== */
  body.dark .eg-card{background:#1a1a1a;border-color:#2b2b2b}
  body.dark .eg-card:hover,body.dark .eg-card:focus-visible{border-color:#e7e7e7;box-shadow:none}
  body.dark .eg-num{background:#e7e7e7;color:#1a1a1a}
  body.dark .eg-last{border-color:#2b2b2b}
  @media (max-width:560px){ .eg-cards{flex-direction:column} }

  @media print{
    body{background:#ffffff}
    .app-header,.tab-rail,.wrap,#toast,.modal-bg{display:none !important}
    /* v38-24 fix: 견적 작성 화면의 플로팅 합계·모바일 저장 바가 인쇄물에 찍히던 문제 수정 */
    #pcTotalPill,#mobileSaveBar{display:none !important}
    #printDoc{display:block !important}
    #printDoc, #printDoc *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
    #printDoc td, #printDoc th{border-color:inherit}
    .doc{width:auto;min-height:auto;margin:0;padding:0}
    .q2doc{padding:0 !important}
    .p2doc{padding:0 !important}
    .doc-rpt{padding:0;font-size:92%}
    .doc-rpt .doc-head{padding:18px 24px}
    @page{size:A4;margin:20mm 24mm}
  }
  /* ==================== 모바일 최적화 ==================== */
  @media (max-width:760px){
    /* --- 레이아웃 기본 --- */
    .hdr-top{padding:14px 16px 12px}
    .app-header .logo{font-size:18px;letter-spacing:6px}
    .hdr-ctrl{gap:8px}
    .co-btn{width:44px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
    .tab-btn{padding:11px 12px;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
    .sub-btn{display:inline-flex;align-items:center;justify-content:center}
    .tab-rail-in{padding:6px 12px;-webkit-overflow-scrolling:touch}
    .wrap{padding:16px 12px 90px}
    .card{padding:18px 14px;border-radius:0}
    .card h2{font-size:15px}
    .doc{width:100%;padding:20px}
    .home-cols{grid-template-columns:1fr}

    /* --- 버튼 정렬: 툴바/검색바 2열 그리드 --- */
    .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .toolbar .btn{width:100%;min-height:44px;padding:10px 6px;font-size:13px}
    .search-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .search-bar input:not([type="month"]){grid-column:1 / -1;min-width:0}
    .search-bar input[type="month"],.search-bar select,.search-bar .btn{min-width:0;width:100%;min-height:42px}
    .search-bar span{display:none}

    /* --- 이력 목록: 세로 스택 + 버튼 꽉 채움 --- */
    .hist-item,.prod-item{padding:14px;gap:8px 12px}
    .hist-item .no{width:100%;font-size:12px}
    .hist-item .cli{min-width:0;flex:1 1 55%}
    .hist-item .amt{text-align:right}
    .hist-item .acts,.prod-item .acts{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
    .hist-item .acts .btn,.prod-item .acts .btn{width:100%;padding:9px 4px;min-height:40px}

    /* --- 입력 폼 (16px: iOS 포커스 자동확대 방지) --- */
    .grid{grid-template-columns:1fr 1fr;gap:10px}
    input:not([type=checkbox]),select,textarea{font-size:15px !important}
    /* v38-12: 터치 타깃 일괄 확대 */
    .row-del,.row-mv{min-height:40px;min-width:44px}
    .hist-item select,#histList select{min-height:40px}
    .hb-row .btn{min-height:38px}
    #homeBody h2 .btn{min-height:34px;padding:6px 13px}
    .vat-toggle{min-height:42px}
    /* v38-12: 탭 레일 우측 스크롤 힌트 */
    .tab-rail::after{content:"";position:absolute;top:0;right:0;bottom:0;width:22px;pointer-events:none;
      background:linear-gradient(to left, var(--card), transparent)}
    body.dark .tab-rail::after{background:linear-gradient(to left,#0f0f0f,transparent)}
    .sub-rail{position:relative}
    .sub-rail::after{content:"";position:absolute;top:0;right:0;bottom:0;width:22px;pointer-events:none;
      background:linear-gradient(to left, var(--bg), transparent)}
    body.dark .sub-rail::after{background:linear-gradient(to left,#0f0f0f,transparent)}
    .field input,.field select,.field textarea{min-height:42px}
    .totals{width:100%}
    .totals input:not([type=checkbox]){min-height:38px}

    /* --- 견적 품목: 표 → 카드 (한 행 = 한 카드) --- */
    #viewEdit table.items{border:none}
    #viewEdit table.items thead{display:none}
    #viewEdit table.items,#viewEdit table.items tbody{display:block;width:100%}
    #viewEdit table.items tbody tr{
      display:block;position:relative;background:var(--card);
      border:1px solid var(--line);border-radius:0;
      padding:12px 12px 10px;margin-bottom:10px;
    }
    #viewEdit table.items tbody tr:nth-child(even) td{background:transparent}
    #viewEdit table.items td{
      display:flex;align-items:center;gap:10px;
      border:none;padding:3px 0;background:transparent;
    }
    #viewEdit table.items td::before{
      content:attr(data-label);flex:0 0 64px;
      font-size:12px;font-weight:700;color:var(--gray);letter-spacing:.3px;
    }
    #viewEdit table.items td input{flex:1;min-width:0;min-height:40px;text-align:left;padding:8px 10px}
    #viewEdit table.items td input.num{text-align:right}
    #viewEdit table.items tbody tr{padding-top:40px}
    #viewEdit table.items td.cell-no{position:absolute;top:10px;left:12px;padding:0}
    #viewEdit table.items td.cell-no::before{content:none}
    #viewEdit table.items td.amount{justify-content:flex-start;font-weight:700;font-size:15px;text-align:left;padding-top:6px}
    #viewEdit .cell-acts{justify-content:flex-end;gap:4px;border-top:1px dashed var(--hair);margin-top:6px;padding-top:8px}
    #viewEdit .cell-acts::before{content:"";flex:1 1 auto}
    #viewEdit .row-mv{font-size:15px;padding:8px 12px}
    #viewEdit .row-del{font-size:15px;padding:8px 14px}

    /* --- 정산·발주 품목: 가로 스크롤 --- */
    #viewSet table.items,#viewPo table.items{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    #viewSet table.items th,#viewSet table.items td,#viewPo table.items th,#viewPo table.items td{white-space:nowrap}
    #viewSet table.items input:not(.num),#viewPo table.items input:not(.num){min-width:120px}
    #viewSet table.items input.num,#viewPo table.items input.num{min-width:96px}

    /* --- 캘린더 --- */
    .cal-cell{min-height:64px;padding:4px 3px 5px}
    .cal-day{font-size:11px}
    .chip{font-size:11px;padding:2px 4px;letter-spacing:0}
    .cal-legend{gap:8px;font-size:11px}
    .hol-name{display:block;margin-left:0;font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* --- 통계/홈 카드 --- */
    .stat-grid{grid-template-columns:1fr 1fr;gap:8px}
    .stat-card.primary{grid-column:1 / -1}
    .stat-card.primary .v{font-size:27px}
    /* 통계 기간 2x2: [시작월 ~ 종료월] / [이번달 | 초기화] */
    .stat-period{
      grid-column:1 / -1;width:100%;margin-left:0;
      display:grid;grid-template-columns:1fr 22px 1fr;gap:8px;align-items:center;
    }
    .stat-period label{grid-column:1 / -1;margin-bottom:-2px}
    .stat-period .tilde{text-align:center}
    .stat-period input[type="month"]{width:100%;height:44px;min-height:44px;box-sizing:border-box}
    /* .toolbar .btn{width:100%} 상속 차단 — 이번달/초기화는 글자 폭만큼만 */
    .stat-period .btn{width:auto;flex:0 0 auto;height:44px;min-height:44px;box-sizing:border-box}   /* v39-11: 달력 박스와 동일 높이 */
    .sp-btns{grid-column:1 / -1;justify-content:flex-end;gap:6px}
    .stat-card{padding:14px}
    .stat-card .v{font-size:18px}

    /* --- 모달/토스트 --- */
    .modal{width:94vw;max-height:88vh;border-radius:0}
    .modal-body{padding:14px 16px 18px}
    #toast{width:calc(100vw - 32px);max-width:440px;text-align:center;bottom:18px}
  }
  @media (max-width:420px){
    .grid{grid-template-columns:1fr}
    .hist-item .acts,.prod-item .acts{grid-template-columns:repeat(2,1fr)}

    /* --- 캘린더: 칩 → 색 점 (v37-6) --- */
    .cal-cell{min-height:52px;padding:5px 4px 6px}
    .cal-cell .chip{
      width:7px;height:7px;min-height:0;border-radius:50%;padding:0;margin:3px 3px 0 0;
      font-size:0;line-height:0;display:inline-block;vertical-align:top;overflow:hidden;
    }
    .cal-cell .chip.span{margin-left:0;margin-right:3px;border-radius:50%}
    .cal-cell .chip.more{display:none}
    .cal-cell .chip.due,.cal-cell .chip.pay{background:var(--card)}
    .cal-day{font-size:12px;margin-bottom:2px}
    .cal-cell.today .cal-day .dnum{width:20px;height:20px}

    /* --- 캘린더: 공휴일명 숨김 (날짜 숫자만 빨간색 유지) --- */
    .hol-name{display:none}

    /* --- 캘린더: 범례 한 줄 가로 스크롤 --- */
    .cal-legend{
      margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:12px;
      font-size:12px;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .cal-legend::-webkit-scrollbar{display:none}
    .cal-legend span{white-space:nowrap;flex-shrink:0}

    /* --- 업무 화면: 등록 폼을 미니 캘린더보다 위로 --- */
    .work-cols > .card:first-child{order:2}
    .work-cols > .card:last-child{order:1}

    /* --- 토스트: 상단 표시 (조작 중에도 보이게) --- */
    #toast{bottom:calc(18px + env(safe-area-inset-bottom,0px));top:auto}

    /* --- 견적서: 작은 터치 타깃 확대 (v38-4) --- */
    #viewEdit .row-del{min-height:42px;min-width:44px}
    #tFeeSel{min-height:42px}
    .acts .row-del{min-height:40px;min-width:44px}

    /* --- 캘린더 툴바: 모바일에서 인쇄 버튼을 오늘 옆으로 --- */
    .cal-legend{order:9}

    /* --- 정산·발주 테이블: 가로 스크롤 안내 --- */
    #viewSet table.items::before,#viewPo table.items::before{
      content:"← 좌우로 밀면 모든 열을 볼 수 있습니다";
      display:block;font-size:11px;color:var(--gray-lt);padding:0 0 6px;white-space:normal;
    }
  }

  /* ===== v38-15: 타이포 스케일 & 유틸 — 신규/수정 코드부터 점진 적용 ===== */
  .t11{font-size:11px}.t115{font-size:11px}.t12{font-size:12px}.t125{font-size:12px}
  .t13{font-size:13px}.t135{font-size:13px}.t14{font-size:13px}.t16{font-size:15px}.t20{font-size:18px}
  .muted{color:var(--gray)}.muted-lt{color:var(--gray-lt)}
  .num{font-variant-numeric:tabular-nums}
  .w6{font-weight:600}.w7{font-weight:700}.w8{font-weight:800}

  /* ===== v38-15: 화면 전환 페이드 ===== */
  @media (prefers-reduced-motion:no-preference){
    .view.active{animation:viewIn .14s ease}
    @keyframes viewIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
  }

  /* ===== v38-15: SVG 아이콘 시스템 (이모지 대체) ===== */
  .ico{width:16px;height:16px;vertical-align:-3px;flex-shrink:0;display:inline-block}
  h2 .ico{width:17px;height:17px;margin:0;flex:0 0 auto}
  .card h2 .h2t{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .storage-note .ico{width:14px;height:14px;vertical-align:-2.5px}

  /* ===== v38-13: 날짜·월·시간 입력 통일 — PC/모바일 동일 외형 ===== */
  input[type=date],input[type=month],input[type=time]{
    -webkit-appearance:none;appearance:none;
    border:1px solid var(--line);border-radius:0;
    background:var(--card);color:var(--ink);
    font-family:inherit;text-align:left;
    padding:8px 34px 8px 10px;min-height:40px;line-height:1.25;
    box-sizing:border-box;max-width:100%;
    background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23606168%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2217%22 rx=%222.5%22/%3E%3Cline x1=%2216%22 y1=%222%22 x2=%2216%22 y2=%226%22/%3E%3Cline x1=%228%22 y1=%222%22 x2=%228%22 y2=%226%22/%3E%3Cline x1=%223%22 y1=%2210%22 x2=%2221%22 y2=%2210%22/%3E%3C/svg%3E');
    background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
  }
  input[type=time]{background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23606168%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpolyline points=%2212 7 12 12 15.5 14%22/%3E%3C/svg%3E')}
  input[type=date]:focus,input[type=month]:focus,input[type=time]:focus{
    border-color:var(--primary);box-shadow:none;
  }
  /* iOS: 날짜 값이 가운데로 몰리는 문제 교정 */
  input::-webkit-date-and-time-value{text-align:left;margin:0}
  input[type=date]::-webkit-calendar-picker-indicator,
  input[type=month]::-webkit-calendar-picker-indicator,
  input[type=time]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;width:26px;height:26px;margin:0 -6px 0 0}
  /* v38-14→22: 빈 날짜 안내 문구 — iOS "전용" (다른 브라우저는 네이티브 연도-월-일 표기가 있어
     안내문구와 겹치면 2줄이 되는 문제 → iOS 사파리에서만 적용) */
  @supports (-webkit-touch-callout: none){
    input[type=date]:not(.has-val)::before,
    input[type=month]:not(.has-val)::before,
    input[type=time]:not(.has-val)::before{content:attr(data-ph);color:var(--gray-lt);pointer-events:none}
    input[type=date]:focus::before,input[type=month]:focus::before,input[type=time]:focus::before{content:none}
  }
  body.dark input[type=date],body.dark input[type=month],body.dark input[type=time]{
    background-color:#262626;border-color:#2b2b2b;color:#e7e7e7;color-scheme:dark;
  }
  body.dark input[type=date],body.dark input[type=month]{background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c9cad0%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2217%22 rx=%222.5%22/%3E%3Cline x1=%2216%22 y1=%222%22 x2=%2216%22 y2=%226%22/%3E%3Cline x1=%228%22 y1=%222%22 x2=%228%22 y2=%226%22/%3E%3Cline x1=%223%22 y1=%2210%22 x2=%2221%22 y2=%2210%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px}
  body.dark input[type=time]{background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c9cad0%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpolyline points=%2212 7 12 12 15.5 14%22/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px}
  @media (max-width:760px){
    input[type=date],input[type=month],input[type=time],
    .search-bar input[type=date],.search-bar input[type=month]{min-height:44px;font-size:15px !important;padding:8px 36px 8px 12px}
  }



/* ===== v39: 로그인 게이트 · 권한 잠금 · 회원 관리 ===== */
#authGate{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
body.dark #authGate{background:#1a1a1a}
.ag-box{width:360px;max-width:92vw}
.ag-title{font-family:var(--sans);font-size:24px;font-weight:800;letter-spacing:3px;color:var(--ink);text-align:center}
.ag-sub{font-size:13px;color:var(--gray-lt);text-align:center;margin:8px 0 22px}
.ag-box .field{margin-bottom:10px}
.ag-box input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:0;font-family:inherit;font-size:15px;background:var(--card);color:var(--ink)}
#loginBtn{width:100%;min-height:46px;font-size:15px;margin-top:6px}
#loginMsg{min-height:20px;font-size:12px;color:var(--danger);text-align:center;margin-top:10px}
.ag-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gray);opacity:0;animation:agspin .8s linear infinite, agshow .4s ease .8s forwards}
@keyframes agspin{to{transform:rotate(360deg)}}
@keyframes agshow{to{opacity:1}}
#demoBadge{display:none;position:fixed;left:12px;bottom:12px;z-index:65;background:#6e6e6e;color:#ffffff;font-size:11px;font-weight:800;letter-spacing:.5px;padding:5px 11px;border-radius:0;opacity:.92}
.tab-btn.locked,.sub-btn.locked{opacity:.38}
.tab-btn.locked::after,.sub-btn.locked::after{content:" 🔒";font-size:11px}
.hdr-user{font-size:12px;color:var(--gray);font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-table{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}   /* v39-10: 모바일 가로 스크롤 */
.mem-table th,.mem-table td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.mem-table th{font-size:11px;color:var(--gray-lt);letter-spacing:.6px;font-weight:800;text-align:center;background:var(--soft);white-space:nowrap}   /* v39-10: 구분(헤더) 중앙 정렬 */
.mem-table th:first-child{border-radius:0}
.mem-table th:last-child{border-radius:0}
.mem-table td.c{text-align:center}   /* v39-11: 아이디·이름·회사·직원연결·상태 내용 중앙 정렬 */
.mem-table tbody tr{transition:background var(--dur-1)}
.mem-table tbody tr:hover{background:var(--soft)}
.mem-table td .mono{font-variant-numeric:tabular-nums}
/* ===== v39-15: 주단위(내 캘린더) · 팀 캘린더 ===== */
.wk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:4px}
.wk-col{background:var(--card);border:1px solid var(--line);border-radius:0;padding:8px;min-height:150px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.wk-col:hover{border-color:var(--hair)}
.wk-col.today{border-color:var(--ink);box-shadow:none}
.wk-col .chip{max-width:none;margin:0}
.wk-hd{font-size:12px;font-weight:800;color:var(--gray);padding-bottom:5px;border-bottom:1px solid var(--line)}
.wk-hd.sun{color:var(--st-red)} .wk-hd.sat{color:var(--st-blue)}
.team-tbl{width:100%;border-collapse:collapse;min-width:900px;font-size:12px}
.team-tbl th{background:var(--soft);padding:8px 6px;font-size:11px;color:var(--gray-lt);font-weight:800;white-space:nowrap;text-align:center}
.team-tbl th.sun{color:var(--st-red)} .team-tbl th.sat{color:var(--st-blue)}
.team-tbl th.today{color:var(--ink)}
.team-tbl td{border-bottom:1px solid var(--line);padding:6px;vertical-align:top;min-width:106px}
.team-tbl td.tm-cell{cursor:pointer;transition:background var(--dur-1)}
.team-tbl td.tm-cell:hover{background:var(--soft)}
.team-tbl td.today{box-shadow:none}
.team-tbl .tm-name{font-weight:800;white-space:nowrap}
.team-tbl .chip{display:block;margin:0 0 4px;max-width:none}
@media (max-width:760px){ .wk-grid{grid-template-columns:1fr} .wk-col{min-height:auto} }
.mem-st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:600;color:var(--gray)}
.mem-st::before{content:"";width:7px;height:7px;border-radius:0;background:var(--gray-lt);flex-shrink:0}
.mem-st.on{color:var(--ink)} .mem-st.on::before{background:var(--st-green)}
.mem-st.tmp::before{background:var(--st-orange)}
.mem-st.off{opacity:.75}
.pg-row{border:1px solid var(--line);border-radius:0;padding:10px 14px;margin-bottom:8px}
.pg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.pg-radios{display:flex;gap:14px}
.pg-radios label{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--gray);font-weight:600}
.pg-subs{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.pg-sub{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:var(--gray)}
.role-badge{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:3.5px 11px;border-radius:0;font-size:11px;font-weight:800;white-space:nowrap;letter-spacing:.4px;box-sizing:border-box}   /* v39-10: 배지 줄바꿈 방지·정돈 */
.role-admin{background:var(--black);color:#ffffff}
.role-subadmin{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}   /* v39-10: 파란 배지 → 블랙 테마 */
.role-staff{background:var(--soft);color:var(--gray)}
body.dark .role-admin{background:#e7e7e7;color:#1a1a1a}
@media (max-width:760px){ .hdr-user{display:none} }



/* ============================================================
   MySeed 어드민 디자인 규칙 — 오버라이드 레이어
   platform-admin.html v0.15 실측 스펙 이식
   이 블록은 head 최하단에 위치하여 기존 규칙을 덮어쓴다.
   ============================================================ */

/* ── 0. 전역 ────────────────────────────────────────────── */
html{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  background:var(--panel);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
*{border-radius:0}                                  /* 직각 원칙 — 예외는 아래에서 복원 */

/* 직각화 잔여분 명시 제거 (기존 CSS가 * 보다 특정성이 높은 경우) */
.co-switch,.co-btn,.search-bar input,.goal-bar,.goal-bar i,
.eg-num,.cal-cell .chip,.cal-cell .chip.span,
.cal-cell.today .cal-day .dnum,.chip,.badge,.card,.btn,
table.items th:first-child,table.items th:last-child{border-radius:0}

/* 원형/알약 허용 목록 — MySeed §5-1: 아바타·점·알약 카운트·토글만 */
.dot,.ni-dot,.sf-dot,.badge-dot,.st-dot,.avatar,.ts-knob,
.badge::before,.switch .sl::before,.ag-spin{border-radius:50%}
.theme-switch,.switch .sl,.nav-badge{border-radius:999px}

/* 포커스 링 — 전역 */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 숫자 등폭 */
.num,.amt,.dnum,.kpi-n,.money,[data-money],.idx,td.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 상태 점 깜박임 */
@keyframes softPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── 1. 앱 셸 (grid 248px + 1fr) ────────────────────────── */
.app{
  display:grid;
  grid-template-columns:248px 1fr;
  min-height:100vh;
  background:var(--panel);
}
.app > .main{min-width:0;display:flex;flex-direction:column}

/* ── 2. 사이드바 (레퍼런스 실측 반영) ───────────────────── */
.sidebar{
  background:var(--bg);
  border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;overflow:hidden;z-index:20;
}
/* 브랜드 — 톱바와 같은 64px 높이로 가로줄을 맞춘다 */
.side-brand{
  height:64px;flex:none;
  display:flex;align-items:center;gap:10px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
}
.side-brand .sb-mark{
  width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--ink);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:-.02em;
}
.side-brand .sb-name{
  font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  line-height:1;cursor:pointer;user-select:none;
}
.side-brand .sb-ver{
  font-family:var(--code);font-size:11px;color:var(--ink-4);
  letter-spacing:0;margin-left:auto;flex:none;border:none;padding:0;
}
/* 콘솔 라벨 */
.side-console{
  flex:none;padding:15px 18px 7px;
  font-size:11px;font-weight:500;letter-spacing:.03em;
  color:var(--ink-4);
}
.side-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 6px 14px}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:var(--line-2)}
.side-scroll::-webkit-scrollbar-track{background:transparent}

/* 그룹 라벨 — 캐럿이 왼쪽(아이콘 열), 하위 항목은 들여쓰지 않는다 */
.nav-sec{
  width:100%;display:flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  padding:14px 14px 7px;
  font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.03em;
  color:var(--ink-4);text-align:left;
}
.nav-sec:hover{color:var(--ink-2)}
.nav-sec .ns-caret{
  width:10px;height:10px;flex:none;position:relative;
  transition:transform var(--dur-1) var(--ease-out);
}
.nav-sec .ns-caret::before{
  content:"";position:absolute;left:1px;top:1px;
  width:6px;height:6px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(-45deg);
}
.nav-sec[aria-expanded="false"] .ns-caret{transform:rotate(-90deg)}
.nav-sec .ns-tx{flex:1;min-width:0}
.nav-subs{display:none}
.nav-sec-wrap.open .nav-subs{display:block}

/* 내비 항목 — 피치 43px, 아이콘 x=20, 라벨 x=48 */
.nav-item{
  width:100%;display:flex;align-items:center;gap:12px;
  background:none;border:none;cursor:pointer;
  padding:12px 10px 12px 14px;
  font-family:var(--sans);
  font-size:13px;font-weight:500;line-height:19px;
  color:var(--ink-2);text-align:left;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.nav-item:hover{background:var(--panel);color:var(--ink)}
.nav-item.active{background:var(--ink);color:var(--bg)}
.nav-item.active .ni-ic{opacity:1}
/* 하위 항목도 들여쓰지 않는다 (레퍼런스 동일) */
.nav-item.sub{padding-left:14px;font-size:13px;font-weight:500}
.nav-item.sub .ni-ic{visibility:hidden}
.nav-item .ni-ic{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center;opacity:.85}
.nav-item .ni-ic svg{width:16px;height:16px;display:block}
.nav-item .ni-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item.locked,.nav-sec.locked{opacity:.38}
.nav-item.locked::after{content:"🔒";font-size:11px;flex:none;margin-left:auto}

/* 미확인 배지 — 알약이 아니라 '점 + 숫자' */
.nav-badge{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;
  color:var(--ink-2);background:none;border:none;padding:0;
}
.nav-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--dot-live);animation:softPulse 1.8s infinite;
}
.nav-item.active .nav-badge{color:var(--bg)}
.nav-sec .nav-badge{margin-left:auto}

/* 사이드 풋 — 다크모드 토글 + 버전 */
.side-foot{flex:none;border-top:1px solid var(--line)}
.side-dark{
  width:100%;height:46px;
  display:flex;align-items:center;gap:11px;
  padding:0 18px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-2);
  text-align:left;
}
.side-dark:hover{background:var(--panel)}
.side-dark .sd-ic{width:16px;flex:none;font-size:13px;color:var(--ink-4);line-height:1}
.side-dark .sd-tx{flex:1}
.side-dark .sd-sw{
  width:34px;height:19px;flex:none;border-radius:999px;
  background:var(--line-2);position:relative;transition:background var(--dur-2) var(--ease-out);
}
.side-dark .sd-sw i{
  position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--bg);transition:transform var(--dur-2) var(--ease-out);
}
body.dark .side-dark .sd-sw{background:var(--ink-3)}
body.dark .side-dark .sd-sw i{transform:translateX(15px)}
.side-ver{
  padding:9px 18px 13px;
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;color:var(--ink-4);
}
.sf-dot{width:6px;height:6px;flex:none;background:var(--dot-ok);animation:softPulse 2.6s infinite}
.ni-dot{width:6px;height:6px;flex:none;background:var(--dot-live);animation:softPulse 1.8s infinite}

/* ── 3. 톱바 ────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:5;
  height:64px;flex:none;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:0 24px;
  display:flex;align-items:center;gap:14px;
}
.tb-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.tb-spacer{flex:1}
.tb-search{position:relative;flex:0 1 420px;margin-left:26px;min-width:0}
.tb-search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-4);pointer-events:none;
}
.tb-search input{
  width:100%;height:36px;
  padding:0 34px 0 33px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:13px;
}
.tb-search input:focus{border-color:var(--ink)}
.tb-search input::-webkit-search-cancel-button{display:none}
.tb-kbd{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-family:var(--code);font-size:11px;color:var(--ink-4);
  border:1px solid var(--line-2);padding:1px 6px;line-height:1.5;pointer-events:none;
}
.tb-results{
  position:absolute;left:0;right:0;top:calc(100% + 5px);
  background:var(--bg);border:1px solid var(--line-2);
  box-shadow:0 24px 64px -24px rgba(0,0,0,.55);
  max-height:340px;overflow-y:auto;z-index:40;display:none;padding:6px;
}
.tb-results.open{display:block}
.tb-results button{
  width:100%;display:flex;align-items:baseline;gap:9px;
  height:36px;padding:0 8px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;color:var(--ink-2);text-align:left;
}
.tb-results button:hover,.tb-results button.on{background:var(--panel);color:var(--ink)}
.tb-results button i{font-style:normal;font-size:11px;color:var(--ink-4);flex:none}
.tb-results .none{padding:14px 8px;font-size:12px;color:var(--ink-4);text-align:center}

.env-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-2);padding:5px 11px;
  font-size:11px;color:var(--ink-3);white-space:nowrap;
}
.env-chip .dot{width:6px;height:6px}

.tb-user{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--line);white-space:nowrap}
.avatar{
  width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--ink);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.tu-meta{display:flex;flex-direction:column;line-height:1.25}
.tu-meta b{font-size:12px;font-weight:600;color:var(--ink)}
.tu-meta i{font-style:normal;font-size:11px;color:var(--ink-4)}
.hdr-user{font-size:12px;color:var(--ink-3)}


.side-toggle{
  display:none;width:34px;height:34px;flex:none;
  background:var(--bg);border:1px solid var(--line-2);cursor:pointer;
  align-items:center;justify-content:center;
}
.side-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.side-toggle span::before,.side-toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);
}
.side-toggle span::before{top:-5px}
.side-toggle span::after{top:5px}

/* ── 4. 뷰 컨테이너 ─────────────────────────────────────── */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:28px 28px 84px;
  width:100%;
}
.view-head{margin-bottom:18px}
.view-head h1,.view-head .vh-title{
  font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.view-head .lead{font-size:13px;color:var(--ink-3);margin-top:5px}
.sec-label{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
}

/* 도움말 (?) 버튼 — 22px 정사각 */
.help-btn{
  width:22px;height:22px;flex:none;
  border:1px solid var(--line-2);background:var(--bg);
  color:var(--ink-3);cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.help-btn:hover{border-color:var(--ink);color:var(--ink)}

/* ── 5. 카드 ────────────────────────────────────────────── */
.card{
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:none;
  padding:18px 20px;
  margin-bottom:14px;
}
.card h2{
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  margin-bottom:16px;display:flex;align-items:center;gap:12px;
}
.card h2::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── 6. 버튼 ────────────────────────────────────────────────
   이 앱의 위계에 맞춘 매핑:
     .btn        (143곳) = 보조 액션  → MySeed .ghost 외형
     .btn.gold   ( 42곳) = 주 액션    → MySeed 기본(잉크) 외형
     .btn.danger-txt(16) = 파괴적 액션 → 잉크 보더 + 밑줄
   크기는 MySeed "화면 내 표준 = .sm(8px 13px / 12.5px)" 을 기본값으로 둔다.
   ------------------------------------------------------------ */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 13px;
  font-family:var(--sans);
  font-size:12px;font-weight:600;line-height:1.25;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-2);
  cursor:pointer;
  transition:color var(--dur-2) var(--ease-out),border-color var(--dur-1) var(--ease-out);
}
/* hover 와이프 — ::before 가 scaleX(0→1) */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-2) var(--ease-out);
}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--bg);border-color:var(--ink)}
.btn > span{position:relative;z-index:1}
.btn svg,.btn .bi{width:14px;height:14px;flex:none}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--panel);color:var(--ink-4);border-color:var(--line-2);
  cursor:not-allowed;opacity:1;
}
.btn:disabled::before,.btn[aria-disabled="true"]::before{display:none}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{color:var(--ink-4);border-color:var(--line-2)}

/* 주 액션 — 잉크 채움 */
.btn.gold,.btn.primary{
  background:var(--ink);color:var(--bg);border-color:var(--ink);border-width:1.5px;
}
.btn.gold::before,.btn.primary::before{background:var(--bg)}
.btn.gold:hover,.btn.primary:hover{color:var(--ink);border-color:var(--ink)}

/* 고스트(명시) */
.btn.ghost,.btn.sec{background:var(--bg);color:var(--ink);border-color:var(--line-2)}
.btn.ghost::before,.btn.sec::before{background:var(--ink)}
.btn.ghost:hover,.btn.sec:hover{color:var(--bg);border-color:var(--ink)}

/* 파괴적 액션 — 색이 아니라 보더·밑줄로 구분 (완전 흑백 원칙) */
.btn.danger,.btn.del,.btn.danger-txt{
  background:var(--bg);color:var(--ink);border-color:var(--ink);
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
}
.btn.danger::before,.btn.del::before,.btn.danger-txt::before{background:var(--ink)}
.btn.danger:hover,.btn.del:hover,.btn.danger-txt:hover{color:var(--bg)}

/* 크기 */
.btn.lg{padding:11px 18px;font-size:13px;border-width:1.5px}
.btn.lg svg,.btn.lg .bi{width:16px;height:16px}
.btn.sm{padding:8px 13px;font-size:12px}
.btn.xs{padding:6px 10px;font-size:11px}
.btn.xs svg,.btn.xs .bi{width:14px;height:14px}
/* 로그인 등 단독 주 액션은 큰 크기 */
#loginBtn{padding:12px 18px;font-size:13px;width:100%;border-width:1.5px}

/* ── 7. KPI 카드 ────────────────────────────────────────── */
.kpi-grid,.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:14px;margin-bottom:14px;
}
.kpi,.stat-card{
  background:var(--bg);
  border:1px solid var(--line);
  padding:18px;
  text-align:left;
  transition:border-color var(--dur-1) var(--ease-out);
}
button.kpi,.stat-card.clickable{cursor:pointer;font-family:inherit}
button.kpi:hover,.stat-card.clickable:hover{border-color:var(--ink)}
.kpi-l,.stat-card .lb,.stat-card .label{
  font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.01em;line-height:1.4;
}
.kpi-n,.stat-card .v,.stat-card .value{
  font-family:var(--mono);
  font-size:24px;font-weight:600;line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);
  margin-top:8px;font-variant-numeric:tabular-nums;
}
.kpi-n .unit,.stat-card .unit{
  font-family:var(--sans);font-size:13px;font-weight:400;
  color:var(--ink-3);margin-left:3px;letter-spacing:0;
}
.kpi-s,.stat-card .sub{
  font-family:var(--mono);font-size:11px;color:var(--ink-4);
  margin-top:6px;white-space:pre-line;line-height:1.5;
}

/* ── 8. 표 ──────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.items,table.tbl,.tbl{
  width:100%;border-collapse:collapse;
  font-size:13px;
}
table.items th,table.tbl th,.tbl th{
  font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.03em;
  color:var(--ink-3);
  padding:11px 14px;
  background:transparent;
  border:none;border-bottom:1px solid var(--line-2);
  text-align:left;white-space:nowrap;
}
table.items td,table.tbl td,.tbl td{
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  color:var(--ink-2);
}
table.items tr:last-child td,table.tbl tr:last-child td,.tbl tr:last-child td{border-bottom:none}
table.items tbody tr:hover,table.tbl tbody tr:hover,.tbl tbody tr:hover{background:var(--panel)}
.idx,td.idx,.cell-no{
  font-family:var(--mono);color:var(--ink-4);
  width:34px;text-align:left;font-size:12px;
}
td.num,th.num,.num{text-align:right}
.actions,.cell-acts,.acts{
  display:flex;justify-content:flex-end;align-items:center;gap:7px;
}
table.items input,table.tbl input{
  width:100%;padding:9px 10px;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-family:inherit;font-size:13px;
}
table.items input:focus{border-color:var(--ink)}

/* ── 9. 배지 · 칩 · 점 ──────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);
  font-size:11px;font-weight:600;line-height:1.5;letter-spacing:0;
  padding:3px 8px;
  border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-2);
  text-decoration:none;
}
.badge::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--ink-4);
}
.badge.ok::before,.badge.st-수주::before,.badge.st-완료::before,
.badge.done::before,.badge.st-지급완료::before{background:var(--dot-ok)}
.badge.live::before,.badge.warn::before,.badge.st-대기::before,
.badge.st-협의중::before,.badge.lv-red::before{
  background:var(--dot-live);animation:softPulse 1.8s infinite;
}
.badge.st-실패,.badge.cancel{color:var(--ink-4);text-decoration:line-through}
.badge.st-실패::before,.badge.cancel::before{background:var(--line-2)}
/* 배지 배경/글자는 항상 무채색 — 색은 점이 담당 */
.badge.st-작성중,.badge.st-발송,.badge.st-수주,.badge.st-협의중{
  background:var(--bg);color:var(--ink-2);border-color:var(--line-2);
}

.lg-chip,.chip{
  display:inline-block;
  font-family:var(--mono);font-size:11px;font-weight:500;
  padding:2px 7px;line-height:1.6;
  border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-2);
}
.sj,.set-jump .sj{
  font-family:var(--mono);font-size:11px;
  padding:6px 11px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink-2);cursor:pointer;
}
.sj:hover{border-color:var(--ink);color:var(--ink)}
.flash-target{outline:1.5px solid var(--ink);outline-offset:3px;animation:none}

.dot,.st-dot{width:7px;height:7px;display:inline-block;flex:none;background:var(--ink-4)}
.dot.ok{background:var(--dot-ok)}
.dot.live,.dot.warn{background:var(--dot-live);animation:softPulse 1.8s infinite}
.dot.on{background:var(--dot-ok);animation:softPulse 2.6s infinite}
.dot.off{background:var(--line-2)}

/* ── 10. 입력 ───────────────────────────────────────────── */
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=month],input[type=time],input[type=search],input[type=tel],
input[type=email],select,textarea,.inp,.sel{
  font-family:var(--sans);
  font-size:15px;
  padding:11px 12px;
  border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink);
  box-shadow:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ink);
}
textarea{min-height:88px;line-height:1.6;resize:vertical}
::placeholder{color:var(--ink-4);opacity:1}
.sel-mini,.inp-mini{
  font-family:var(--sans);
  font-size:13px;padding:8px 10px;
  border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink);
}
.sel-mini:focus,.inp-mini:focus{border-color:var(--ink)}
label{font-size:12px;color:var(--ink-3);font-weight:500}

/* ── 11. 모달 ───────────────────────────────────────────── */
@keyframes msFadeIn{from{opacity:0}to{opacity:1}}
.modal-bg{
  background:rgba(10,10,10,.46);
  animation:msFadeIn .18s var(--ease);
  padding:20px;z-index:60;
}
.modal{
  background:var(--bg);
  width:440px;max-width:100%;
  max-height:88vh;
  border:1px solid var(--line-2);
  border-top:1px solid var(--line-2);
  box-shadow:0 24px 64px -24px rgba(0,0,0,.55);
  display:flex;flex-direction:column;overflow:hidden;
}
.modal.wide{width:720px}
.modal-head{
  position:sticky;top:0;z-index:2;
  background:var(--bg);
  padding:16px 20px 13px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.modal-head h3{
  font-family:var(--sans);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);flex:1;
}
.modal-head .m-sub{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.modal-head input{
  flex:2;padding:9px 11px;border:1px solid var(--line-2);
  font-family:inherit;font-size:13px;
}
.modal-body,.modal-in{padding:6px 20px;overflow-y:auto}
.modal-foot{
  padding:14px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;gap:8px;
  background:var(--bg);
}
/* 돈이 움직이는 모달의 "처리 후 잔액" 블록 */
.after-bal{
  border:1px solid var(--line);background:var(--panel);
  padding:11px 13px;margin:12px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.after-bal .ab-l{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.03em}
.after-bal .ab-v{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink)}

/* ── 12. 토스트 ─────────────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--bg);
  font-size:13px;font-weight:500;
  padding:12px 18px;
  border:none;box-shadow:none;
  z-index:9000;opacity:0;pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
  max-width:calc(100vw - 40px);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#toast .toast-btn{
  margin-left:12px;background:transparent;
  border:1px solid var(--bg);color:inherit;
  padding:3px 11px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
}

/* ── 13. empty-state ────────────────────────────────────── */
.empty,.empty-state,.no-data{
  border:1px dashed var(--line-2);
  padding:52px 24px;
  text-align:center;
  color:var(--ink-4);
  font-size:13px;
  background:transparent;
}

/* ── 14. 차트 ───────────────────────────────────────────── */
.chart line.grid,.chart .grid line{stroke:var(--line);stroke-width:1}
.chart path.line,.chart .series{stroke:var(--ink);stroke-width:1.5;fill:none}
.chart .series-2{stroke:var(--ink);stroke-dasharray:4 3}
/* 막대는 안쪽 .col 이 그린다. 바깥 .bar 는 자리만 잡는 껍데기라
   여기에 색을 칠하면 값이 0 인 달까지 검게 보인다. */
.bars .bar{background:none}
.bars .bar.alt .col{background:var(--line-2)}

/* ── 15. 회사 정보 푸터 (CO-FOOT) ───────────────────────── */
.co-foot,#coFoot{
  font-family:var(--mono);font-size:11px;line-height:1.95;
  color:var(--ink-4);
  border-top:1px solid var(--line);
  padding:18px 0 0;margin-top:34px;
}

/* ── 16. 게이트 화면 (로그인 · 입장) ────────────────────── */
#authGate{background:var(--panel)}
.ag-box,.eg-in{background:var(--bg);border:1px solid var(--line-2);box-shadow:none}
.ag-title,.eg-title{
  font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.ag-sub,.eg-sub{font-size:13px;color:var(--ink-3)}
.eg-card{
  background:var(--bg);border:1px solid var(--line-2);
  transition:border-color var(--dur-1) var(--ease-out);cursor:pointer;
}
.eg-card:hover{border-color:var(--ink)}
.eg-num{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--ink)}
.eg-co{font-size:13px;font-weight:600;color:var(--ink-2)}
.eg-ko{font-size:12px;color:var(--ink-4)}
.eg-hint{font-family:var(--mono);font-size:11px;color:var(--ink-4)}

/* ── 17. 캘린더 ─────────────────────────────────────────── */
.cal-cell{border:1px solid var(--line);background:var(--bg)}
.cal-dow{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.03em}
.cal-day{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.chip.ev,.chip.lv{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ── 18. 반응형 ─────────────────────────────────────────── */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:264px;
    transform:translateX(-100%);
    transition:transform var(--dur-2) var(--ease-out);
    box-shadow:0 0 0 100vmax rgba(10,10,10,0);
  }
  body.side-open .sidebar{transform:translateX(0)}
  body.side-open::after{
    content:"";position:fixed;inset:0;background:rgba(10,10,10,.46);z-index:19;
  }
  .side-toggle{display:inline-flex}
  .topbar{padding:0 14px;gap:10px}
  .tb-search,.env-chip,.tu-meta{display:none}
  .tb-title{font-size:15px}
  .wrap{padding:20px 16px 92px}
  .view-head h1,.view-head .vh-title{font-size:18px}
  .btn{padding:10px 15px}
}

/* ── 19. 인쇄 ───────────────────────────────────────────── */
@media print{
  html[data-theme="dark"],body.dark{
    --bg:#fff;--panel:#f6f6f6;--ink:#0a0a0a;--ink-2:#2b2b2b;
    --ink-3:#5b5b5b;--ink-4:#6e6e6e;--line:#e7e7e7;--line-2:#d0d0d0;
    color-scheme:light;
  }
  .sidebar,.topbar,.side-toggle,#toast,.modal-bg,.co-foot{display:none !important}
  .wrap{padding:0;max-width:none}
}

/* ── 20. 모션 감소 ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ── 21. 캘린더 범례 — 색이 아니라 '패턴'으로 구분 (완전 흑백) ── */
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11px;color:var(--ink-3)}
.cal-legend .dot{
  display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;
  border-radius:50%;background:var(--ink);border:none;box-sizing:border-box;
}
.cal-legend .dot.ev  {background:var(--ink)}                                   /* 채움 */
.cal-legend .dot.lv  {background:var(--ink-4)}                                 /* 중간 회색 */
.cal-legend .dot.due {background:var(--bg);border:1.5px solid var(--ink)}      /* 외곽선 */
.cal-legend .dot.pay {background:var(--bg);border:1.5px dashed var(--ink-3)}   /* 점선 외곽선 */


/* ── 21. 마감 보정 ─────────────────────────────────────── */
/* 하위 항목도 아이콘 표시 (레퍼런스 동일) */
.nav-item.sub .ni-ic{visibility:visible;opacity:.7}
.nav-item.sub.active .ni-ic{opacity:1}

/* 캐럿: 펼침=아래, 접힘=오른쪽 */
.nav-sec .ns-caret::before{transform:rotate(45deg)}
.nav-sec[aria-expanded="false"] .ns-caret{transform:none}
.nav-sec[aria-expanded="false"] .ns-caret::before{transform:rotate(-45deg);left:2px}

/* 검색 입력 — 전역 input 규칙보다 우선 */
.topbar .tb-search input[type="search"],
.topbar .tb-search input{
  height:36px;padding:0 34px 0 33px;font-size:13px;
  border:1px solid var(--line-2);background:var(--bg);
}
.topbar .tb-search input:focus{border-color:var(--ink)}

/* ── 22. 로그인 화면 ───────────────────────────────────── */
#authGate{
  position:fixed;inset:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);padding:24px;
}
#authGate .ag-box{
  width:100%;max-width:392px;
  background:var(--bg);
  border:1px solid var(--line-2);
  box-shadow:0 24px 64px -24px rgba(0,0,0,.28);
  padding:36px 32px 0;
  display:flex;flex-direction:column;
}
#authGate .ag-spin{
  width:26px;height:26px;margin:24px auto 48px;
  border:2px solid var(--line);border-top-color:var(--ink);
  border-radius:50%;animation:agSpin .8s linear infinite;
}
@keyframes agSpin{to{transform:rotate(360deg)}}
.ag-brand{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.ag-mark{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--ink);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;
}
.ag-wordmark{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ag-title{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
.ag-sub{font-size:13px;color:var(--ink-3);margin:6px 0 26px}
.ag-form{display:flex;flex-direction:column;gap:14px}
.ag-field{display:flex;flex-direction:column;gap:6px}
.ag-field > span{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-3)}
#authGate .ag-field input{
  width:100%;height:44px;padding:0 13px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;
}
#authGate .ag-field input:focus{border-color:var(--ink)}
#authGate #loginBtn{width:100%;height:44px;margin-top:6px;font-size:13px}
#loginMsg{font-size:12px;color:var(--ink);margin-top:12px;min-height:18px;text-align:center}
#loginMsg:not(:empty){
  border:1px solid var(--line-2);padding:9px 11px;margin-top:14px;
  background:var(--panel);text-align:left;
}
.ag-help{font-size:12px;color:var(--ink-4);text-align:center;margin:16px 0 4px;line-height:1.7}
.ag-foot{
  margin:26px -32px 0;padding:12px 32px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;color:var(--ink-4);
}
#demoBadge{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:9600;
  background:var(--ink);color:var(--bg);font-size:11px;
  padding:7px 14px;font-family:var(--mono);
}
@media (max-width:480px){
  #authGate{padding:0;align-items:stretch}
  #authGate .ag-box{max-width:none;border:none;box-shadow:none;padding:28px 20px 0;justify-content:center}
  .ag-foot{margin:26px -20px 0;padding:12px 20px}
}


/* ── 23. 인쇄 · PDF 마감 ───────────────────────────────── */
@media print{
  /* (1) 앱 셸이 min-height:100vh 로 빈 첫 페이지를 만들던 문제 */
  .app{display:none !important}
  .sidebar,.topbar,.side-toggle,.wrap,#toast,.modal-bg,
  #authGate,#demoBadge,.tb-results,.co-foot{display:none !important}

  /* (2) 페이지 배경이 회색(--panel)으로 찍히던 문제 */
  html,body{background:#fff !important;margin:0 !important;padding:0 !important}

  /* (3) 다크 모드에서 인쇄 시 라이트 강제 (토큰 + 잔여 하드코딩 방어) */
  html[data-theme="dark"],body.dark{
    --bg:#fff;--panel:#f6f6f6;--ink:#0a0a0a;--ink-2:#2b2b2b;
    --ink-3:#5b5b5b;--ink-4:#6e6e6e;--line:#e7e7e7;--line-2:#d0d0d0;
    color-scheme:light;
  }
  body.dark #printDoc,body.dark #printDoc *{color:#0a0a0a !important}
  body.dark #printDoc{background:#fff !important}

  /* (4) 문서는 항상 보이게 */
  #printDoc{display:block !important;background:#fff !important;color:#0a0a0a !important}

  /* (5) 표·행이 페이지 경계에서 잘리던 문제 */
  #printDoc table{page-break-inside:auto;border-collapse:collapse}
  #printDoc tr,#printDoc .pick-item,#printDoc .doc-items tr{
    page-break-inside:avoid;break-inside:avoid;
  }
  #printDoc thead{display:table-header-group}
  #printDoc tfoot{display:table-footer-group}
  #printDoc .doc-head,#printDoc .doc-totals,#printDoc .doc-bank,
  #printDoc .doc-stamp,#printDoc .doc-sum{page-break-inside:avoid;break-inside:avoid}
  #printDoc .doc{page-break-after:auto}
  #printDoc .doc + .doc{page-break-before:always}

  /* (6) 마지막 빈 페이지 방지 */
  #printDoc > *:last-child{page-break-after:avoid}

  /* (7) 링크 URL 이 인쇄물에 노출되지 않도록 */
  a[href]:after{content:"" !important}
}


/* ── 24. 로그인 정렬 ───────────────────────────────────── */
#authGate .ag-title,#authGate .ag-sub,#authGate .ag-help,#authGate #loginMsg{text-align:left}
#authGate .ag-help{text-align:left}

/* ── 25. 반응형 마감 ───────────────────────────────────── */
/* 태블릿 */
@media (max-width:1200px){
  .wrap{padding:24px 20px 84px}
  .tb-search{flex:0 1 300px;margin-left:16px}
}
/* 모바일 공통 */
@media (max-width:900px){
  .topbar{position:sticky;top:0}
  .tb-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-user{padding-left:0;border-left:none}
  .avatar{width:28px;height:28px;font-size:12px}
  /* 표는 가로 스크롤 */
  .tbl-wrap,.card > table,.card > .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.items,table.tbl,.tbl{min-width:640px}
  /* 폼은 1열 */
  .grid2,.grid3,.grid4,.form-row,.row2,.row3{grid-template-columns:1fr !important;display:grid !important;gap:12px}
  /* 버튼 줄바꿈 */
  .toolbar,.acts,.actions,.cell-acts{flex-wrap:wrap}
  /* 모달은 화면에 꽉 차게 */
  .modal-bg{padding:0;align-items:flex-end}
  .modal{width:100%;max-width:none;max-height:92vh;border-left:none;border-right:none;border-bottom:none}
  .modal-body,.modal-in{padding:6px 16px}
  .modal-head{padding:14px 16px 11px}
  .modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  /* KPI 2열 */
  .kpi-grid,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi,.stat-card{padding:14px}
  .kpi-n,.stat-card .v,.stat-card .value{font-size:24px}
  /* 캘린더 가로 스크롤 */
  .cal-grid{min-width:620px}
  .cal-toolbar{flex-wrap:wrap;gap:8px}
  .cal-legend{width:100%;order:9;font-size:11px;gap:10px}
  /* 사이드바 스크롤 잠금 */
  body.side-open{overflow:hidden}
}
/* 소형 */
@media (max-width:480px){
  .wrap{padding:16px 12px 92px}
  .card{padding:14px 13px;margin-bottom:12px}
  .card h2{font-size:13px;margin-bottom:13px}
  .view-head{margin-bottom:14px}
  .view-head h1,.view-head .vh-title{font-size:18px}
  .kpi-grid,.stat-grid{grid-template-columns:1fr}
  .btn{padding:9px 13px}
  .btn.xs{padding:6px 9px}
  input,select,textarea,.inp,.sel{font-size:15px}   /* iOS 자동 확대 방지 */
  .sel-mini,.inp-mini{font-size:15px;padding:9px 10px}
  .topbar{padding:0 12px;gap:8px}
  .tb-title{font-size:13px}
}
/* 가로 넘침 전역 방어 */
html,body{max-width:100%;overflow-x:hidden}
.main{min-width:0}
.wrap,.card{min-width:0}
img,svg,canvas,table{max-width:100%}


/* ── 26. 모바일 가로 넘침 방어 ─────────────────────────── */
@media (max-width:900px){
  /* 넓은 표를 직접 품은 컨테이너는 가로 스크롤 */
  .card:has(> table.items),
  .card:has(> table.tbl),
  .view:has(> table.items),
  .doc-items:has(> table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* 스크롤 래퍼(런타임 삽입 포함) */
  .x-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .x-scroll > table.items,
  .x-scroll > table.tbl{min-width:640px}
  .x-scroll > .cal-grid{min-width:620px}
  /* 캘린더 그리드를 직접 품은 뷰 */
  .view:has(> .cal-grid){overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 스크롤 가능함을 알리는 힌트 */
  .x-scroll{scrollbar-width:thin}
  .x-scroll::-webkit-scrollbar{height:6px}
  .x-scroll::-webkit-scrollbar-thumb{background:var(--line-2)}
}


/* ── 27. 표 정렬 규칙 ──────────────────────────────────────
   짧은 열(번호·구분·기간·수량·상태·날짜) = 중앙
   이름/내용 열 = 좌측 · 금액 열 = 우측
   ------------------------------------------------------- */
/* 헤더는 해당 열 정렬을 따라간다 */
table.items th, table.tbl th, .tbl th{ text-align:center }
table.items th:nth-child(3),                 /* 항목 */
table.tbl th.l, .tbl th.l{ text-align:left }
table.items th.r, table.tbl th.r, .tbl th.r{ text-align:right }

/* 번호 열 */
.idx, td.idx, .cell-no, th.idx{ text-align:center !important }

/* 작성 화면 품목 입력 — 짧은 열 중앙 */
table.items td[data-label="구분"] input,
table.items td[data-label="기간/기준"] input,
table.items td[data-label="수량/인원"] input,
table.items td[data-label="상태"] input,
table.items td[data-label="구분"] select{ text-align:center }
/* 이름·기타는 좌측 */
table.items td[data-label="항목"] input,
table.items td[data-label="기타"] input{ text-align:left }
/* 금액은 우측 */
table.items input.num, table.items td.amount, table.tbl td.num{ text-align:right }
table.items td.amount{ font-variant-numeric:tabular-nums }

/* 목록 표(이력·거래처·직원 등) — 짧은 열 중앙 */
.tbl td.c, table.tbl td.c, table.items td.c{ text-align:center }
.tbl td.l, table.tbl td.l{ text-align:left }

/* 인쇄 문서 표 — .c 는 중앙, 이름 열만 좌측, 금액 우측 */
#printDoc td.c, #printDoc th{ text-align:center }
#printDoc td.q2-nm, #printDoc td.q2-etc{ text-align:left }
#printDoc td.q2-num, #printDoc td.num{ text-align:right }

/* ── 28. 사이드바 완전 고정 ───────────────────────────── */
@media (min-width:901px){
  .app{ display:block }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width:248px; height:100vh;
    z-index:30;
  }
  .app > .main{ margin-left:248px; min-height:100vh; display:flex; flex-direction:column }
  .topbar{ position:sticky; top:0; z-index:20 }
}


/* ── 29. 접근성 보강 ───────────────────────────────────────
   WCAG 1.4.11(비텍스트 대비 3:1)은 "조작 가능한 요소"에 적용된다.
   장식용 구분선(--line/--line-2)은 그대로 두고,
   폼 컨트롤 전용 보더 토큰을 따로 둬 대비를 확보한다.
   라이트 #949494 = 3.03:1 / 다크 #626262 = 3.02:1
   ------------------------------------------------------- */
:root{ --line-ctrl:#949494 }
html[data-theme="dark"], body.dark{ --line-ctrl:#626262 }

input[type=text],input[type=number],input[type=password],input[type=date],
input[type=month],input[type=time],input[type=search],input[type=tel],
input[type=email],select,textarea,.inp,.sel,.inp-mini,.sel-mini,
.btn.ghost,.btn.sec,.btn:not(.gold):not(.primary):not(.danger):not(.del):not(.danger-txt),
.co-btn,.help-btn,.side-toggle,.tb-search input{
  border-color:var(--line-ctrl);
}
table.items td input,table.tbl td input{ border-color:var(--line-ctrl) }
.side-dark .sd-sw{ background:var(--line-ctrl) }

/* 내비 섹션 라벨 — 한글 판독성 (9.5px → 11px) */
.nav-sec{ font-size:11px; letter-spacing:.02em }
.side-console{ font-size:11px }



.cert-table td{padding:13px 10px;border-bottom:1px solid #bcbcbc}.cert-table td.k{color:#8c8c8c;letter-spacing:1px}
/* ── 30. 오늘의 업무 시계 — 제목과 같은 줄 오른쪽 끝 정렬 ── */
.card h2 .h2-clock{
  margin-left:auto; flex:none; order:9;
  font-size:13px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.card h2::after{ order:5 }
@media (max-width:600px){
  .card h2 .h2-clock{ order:10; margin-left:0; width:100%; font-size:12px; margin-top:2px }
}

/* ── 30. 오늘의 업무 시계 — 제목과 같은 줄 오른쪽 끝 정렬 ── */
.card h2 .h2-clock{
  margin-left:auto; flex:none; order:9;
  font-size:13px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.card h2::after{ order:5 }
@media (max-width:600px){
  .card h2 .h2-clock{ order:10; margin-left:0; width:100%; font-size:12px; margin-top:2px }
}

/* ── 저장 공간 경고 배너 ─────────────────────────────────────
   용량이 차면 저장이 조용히 실패하던 문제를 눈에 보이게 한다. */
#storageBanner{
  position:fixed; left:0; right:0; top:0; z-index:60;
  display:none; align-items:center; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-top,0px));
  background:var(--ink); color:var(--bg);
  font-size:13px; line-height:1.5;
  border-bottom:1px solid var(--ink);
}
#storageBanner b{ font-weight:600; letter-spacing:-.01em; flex:none }
#storageBanner span{ flex:1; min-width:0; word-break:keep-all }
#storageBanner .btn{
  flex:none; min-height:32px; padding:0 12px;
  background:var(--bg); color:var(--ink); border-color:var(--bg);
}
body.has-storage-warn .sidebar{ top:44px }
body.has-storage-warn .app{ padding-top:0 }
@media (max-width:760px){
  #storageBanner{ flex-direction:column; align-items:flex-start; gap:7px }
  #storageBanner .btn{ min-height:40px; width:100% }
}
@media print{ #storageBanner{ display:none !important } }

/* ══════════════════════════════════════════════════════════════
   접근성 · 모바일 보정 (개선안 49~57)
   앞선 규칙보다 뒤에 두어 확실히 적용되게 한다.
   ══════════════════════════════════════════════════════════════ */

/* [57] 본문 바로가기 — 평소엔 숨고 Tab 으로 포커스하면 나타난다 */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:10px 16px; background:var(--ink); color:var(--bg);
  font-size:13px; text-decoration:none;
}
.skip-link:focus{ left:8px; top:8px }

/* [49] 포커스 링 — 입력 계열이 뒤쪽 규칙에 눌려 사라지던 문제 해결.
   기존 무력화 규칙(.field input:focus 등)보다 명시도를 높여 못 이기게 한다. */
.app input:focus-visible,
.app select:focus-visible,
.app textarea:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible,
#authGate input:focus-visible,
table.items input:focus-visible,
table.tbl input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.totals input:focus-visible,
.search-bar input:focus-visible,
.modal-head input:focus-visible,
.tb-search input:focus-visible,
.sel-mini:focus-visible{
  outline:2px solid var(--ink) !important;
  outline-offset:1px !important;
  border-color:var(--ink) !important;
}
/* 마우스로 눌렀을 때는 링을 띄우지 않는다 */
.app input:focus:not(:focus-visible),
.app select:focus:not(:focus-visible),
.app textarea:focus:not(:focus-visible){ outline:none }
[role="button"]:focus-visible,
.cal-cell:focus-visible,
.pick-item:focus-visible,
.stat-card:focus-visible,
.hb-row:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* [50] 아이콘 버튼 — 예전엔 #d0d0d0(대비 1.54:1)에 호버로만 보정해
   터치 기기에서는 영원히 흐렸다. 기본 상태에서 보이게 한다. */
.row-del, .row-mv{
  color:var(--ink-4);
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.row-del:hover, .row-del:focus-visible{ color:var(--danger); background:var(--soft) }
.row-mv:hover, .row-mv:focus-visible{ color:var(--ink); background:var(--soft) }

/* [50] 터치 타깃 44px */
.side-toggle{ width:44px; height:44px }
.cal-nav{ width:44px; height:44px }
.topbar .tb-search input{ height:44px }
.search-bar input, .search-bar select, .search-bar .btn{ min-height:44px }

/* [49] 입력 테두리 대비 — 배경과 같은 색이라 테두리가 유일한 경계인데
   1.54:1 로 거의 보이지 않았다. */
input[type=text], input[type=date], input[type=month], input[type=number],
input[type=password], input:not([type]), select, textarea, .inp, .sel{
  border-color:var(--ink-4);
}
body.dark input[type=text], body.dark input[type=date], body.dark input[type=month],
body.dark input[type=number], body.dark input[type=password], body.dark input:not([type]),
body.dark select, body.dark textarea, body.dark .inp, body.dark .sel{
  border-color:var(--ink-4);
}

/* [52] iOS 자동 확대 방지 — 예전엔 760px 이하에만 있어서
   사이드바가 드로어로 바뀌는 900px 구간(아이패드 세로)이 비어 있었다. */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]), select, textarea, .inp, .sel{
    font-size:15px !important;
  }
  table.items input, table.tbl input, .modal-head input, .topbar .tb-search input{
    font-size:15px !important;
  }
}

/* [53] 표 가로 스크롤 — :has(> table) 이 직접 자식만 잡아
   한 겹 더 감싼 급여 공제 표가 잘려 접근 불가였다. 감싸개와 무관하게 잡는다. */
@media (max-width:900px){
  .card:has(table.items), .card:has(table.tbl),
  .view:has(> table.items), .doc-items:has(table),
  #dedFree, #dedEmp, .tbl-wrap, .x-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  #dedFree::-webkit-scrollbar, #dedEmp::-webkit-scrollbar,
  .card:has(table.items)::-webkit-scrollbar{ height:6px }
  #dedFree::-webkit-scrollbar-thumb, #dedEmp::-webkit-scrollbar-thumb,
  .card:has(table.items)::-webkit-scrollbar-thumb{ background:var(--line-2) }
}
/* :has() 를 모르는 브라우저용 폴백 */
@media (max-width:900px){
  #dedFree, #dedEmp{ overflow-x:auto }
}

/* [54] 드로어 오버레이 — 예전엔 배경 딤이 ::after 라 클릭을 못 받았다 */
#sideOverlay{
  position:fixed; inset:0; z-index:19;
  background:rgba(10,10,10,.46);
}
@media (min-width:901px){ #sideOverlay{ display:none !important } }
body.side-open::after{ display:none }

/* [55] 모바일 주소창 대응 — 100vh 는 주소창이 펼쳐진 상태보다 커서
   하단 정렬 바텀시트의 버튼이 화면 밖으로 밀렸다. */
@supports (height:100dvh){
  .app{ min-height:100dvh }
  .sidebar{ height:100dvh }
  .app > .main{ min-height:100dvh }
  .modal{ max-height:88dvh }
}
@media (max-width:900px){
  @supports (height:100dvh){ .modal{ max-height:92dvh } }
}
@media (max-width:760px){
  @supports (height:100dvh){ .modal{ max-height:88dvh } }
}

/* [56] 키보드로 조작 가능해진 요소들이 눌리는 느낌을 주도록 */
[role="button"]{ cursor:pointer }
.pick-item[role="button"]:hover, .pick-item[role="button"]:focus-visible{ background:var(--soft) }
.cal-cell[role="button"]:focus-visible{ outline-offset:-2px }

/* [58] 인쇄 — 앞의 두 블록과 충돌하던 부분을 여기서 확정한다 */
@media print{
  .app, .sidebar, .topbar, .side-toggle, .wrap, #toast, .modal-bg,
  #authGate, #demoBadge, .tb-results, .co-foot, #sideOverlay,
  #storageBanner, .skip-link, #mobileSaveBar, #pcTotalPill{ display:none !important }
  #printDoc{ display:block !important; background:#fff !important; color:#0a0a0a !important }
  /* 여백은 @page 가 담당한다 — 요소 padding 으로 대신하면
     2페이지부터 위아래 여백이 0 이 되어 프린터가 첫 줄을 잘라먹었다 */
  .doc, .q2doc, .p2doc, .doc-rpt{ padding:0 !important; margin:0 !important }
  #printDoc thead{ display:table-header-group }
  #printDoc tr, #printDoc .doc-items tr{ page-break-inside:avoid; break-inside:avoid }
  #printDoc .doc + .doc{ page-break-before:always }
  #printDoc > *:last-child{ page-break-after:avoid }
  a[href]:after{ content:"" !important }
}

/* ── 인쇄 페이지 분할 보정 ────────────────────────────────────
   품목 표가 남은 공간에 못 들어가면 통째로 다음 장으로 밀려
   첫 장 아래쪽 절반이 비어 버렸다. 표는 잘라서 이어 붙이고,
   최소 두 줄은 붙여 두어 한 줄만 넘어가는 모양을 막는다. */
@media print{
  #printDoc table, #printDoc tbody{
    page-break-inside:auto !important;
    break-inside:auto !important;
  }
  #printDoc tbody tr{ orphans:2; widows:2 }
  #printDoc .q2-items, #printDoc .doc-items{ page-break-inside:auto !important }
  /* 합계·안내 묶음은 쪼개지지 않게 */
  #printDoc .q2-sumwrap, #printDoc .q2-notice,
  #printDoc .q2-ars, #printDoc .q2-sign{ page-break-inside:avoid; break-inside:avoid }
}

/* ── KPI 카드 줄바꿈 보정 ────────────────────────────────────
   금액이 길어지면 "₩" 만 앞줄에 남아 두 줄로 깨지던 문제. */
.stat-card .v, .kpi-n, .stat-card .value{
  white-space:nowrap;
  font-size:clamp(17px, 1.55vw, 24px);
}
.stat-card .s{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:keep-all; line-height:1.5;
}
@media (max-width:1200px){ .stat-card .v, .kpi-n{ font-size:18px } }
@media (max-width:760px){ .stat-card .v, .kpi-n{ font-size:18px } }

/* ── 문서 열 정렬 (요청) ─────────────────────────────────────
   견적서 항목 · 정산서 견적금액 · 발주서 사양/세부내용 중앙. */
#printDoc td.q2-nm, #printDoc th.q2-nm{ text-align:center !important }
#printDoc .st-quoted, #printDoc th.st-quoted{ text-align:center !important }
#printDoc .po-desc, #printDoc td.po-desc{ text-align:center !important }
#printDoc .doc-items td.c, #printDoc .doc-items th{ text-align:center }
/* 작성 화면도 같은 열을 중앙으로 */
#viewSet table.items td:nth-child(3) input,
#viewSet table.items th:nth-child(3){ text-align:center }
#viewPo table.items td:nth-child(3) input,
#viewPo table.items th:nth-child(3){ text-align:center }

/* ── [2] 문서 안의 굵은 테두리 정리 ─────────────────────────
   상자 테두리가 2겹으로 보이던 것을 얇은 1줄로. */
#printDoc .doc-sum,
#printDoc .p2-netbox,
#printDoc .doc-total,
#printDoc .doc-totals .dr.g{
  border:1px solid #1a1a1a !important;
  box-shadow:none !important;
}
#printDoc .doc-head{ border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a }
#printDoc table.doc-items th{ border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a }
#printDoc .q2-items th{ border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a }

/* ── [19] 도장 ───────────────────────────────────────────── */
/* 도장은 서명 오른쪽에 겹치지 않게 자리를 마련해 둔다.
   예전에는 음수 위치라 종이 밖으로 밀려 인쇄에서 잘렸다. */
.stamp-wrap{
  position:relative; display:inline-block;
  margin-left:6px; vertical-align:middle;
}
/* 도장은 글자 옆에 그냥 이어 붙인다.
   예전에는 절대 위치라 종이 밖으로 밀려 인쇄에서 잘렸다.
   흐름 안에 두면 어떤 문서에서도 잘리지 않는다. */
.stamp-wrap{ padding-right:0; min-height:0; white-space:nowrap }
.stamp-wrap .stamp-img{
  position:static !important;
  left:auto !important; right:auto !important; top:auto !important;
  transform:none !important;
  display:inline-block; vertical-align:middle;
  width:60px; height:60px; margin:-6px 0 -6px 3px;
  object-fit:contain; opacity:.95; pointer-events:none;
}
#printDoc .stamp-wrap .stamp-img{ width:60px; height:60px }
/* 견적서 서명은 "(인)" 없이 도장만 들어간다 */
.q2-signco .stamp-wrap .stamp-img{ width:60px; height:60px; margin:-4px 0 -4px 2px }
.stamp-img{ object-fit:contain; opacity:.95; pointer-events:none }
.doc-stamp .in{ margin-right:2px }
.doc-stamp{ padding-right:4px; line-height:2.4 }
/* 예전에는 여기에 padding-right:50px 이 있어, 도장이 (인) 이 아니라
   여백까지 포함한 상자 한가운데에 찍혔다. */
.p2-signceo .stamp-wrap{ padding-right:0 }
@media print{
  .stamp-img{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
}
.p2-sign{ margin-top:20px; text-align:right; font-size:13px; color:#2b2b2b }
.p2-sign b{ margin-left:8px; letter-spacing:1px }

/* ── [11] 날짜 입력칸 정렬 ───────────────────────────────────
   type=date / month / time 은 브라우저가 자체 UI 를 넣어 높이가
   달라진다. 옆의 글자 입력칸과 같은 크기로 맞춘다. */
input[type=date], input[type=month], input[type=time], input[type=datetime-local]{
  height:42px; line-height:normal;
  padding:9px 11px;
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  -webkit-appearance:none; appearance:none;
  background:var(--bg);
}
.field input[type=date], .field input[type=month], .field input[type=time]{
  height:42px; box-sizing:border-box;
}
table.items input[type=date], table.items input[type=month],
.inp-mini[type=date], .inp-mini[type=month], input.inp-mini[type=month]{
  height:36px; padding:6px 8px;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator{
  opacity:.55; cursor:pointer; margin-left:2px;
}
input[type=date]::-webkit-datetime-edit,
input[type=month]::-webkit-datetime-edit{ padding:0 }
@media (max-width:900px){
  input[type=date], input[type=month], input[type=time]{ height:46px; font-size:15px }
}

/* ── [12] 글꼴 통일 ──────────────────────────────────────────
   일부 요소가 브라우저 기본 글꼴로 떨어지던 것을 전부 맞춘다. */
html, body, button, input, select, textarea, table, th, td,
.doc, .doc *, #printDoc, #printDoc *, .modal, .modal *{
  font-family:var(--sans);
}
.num, .amt, .dnum, .kpi-n, .money, [data-money], .idx, td.num,
.stat-card .v, .num-fmt, .doc-totals, .q2-num{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
}
code, pre, .code{ font-family:var(--code) }

/* ══════════════════════════════════════════════════════════════
   [9] 모바일 하단 네비게이션
   좁은 화면에서 자주 쓰는 화면으로 바로 가고, 권한이 없는 항목은
   눌리지 않게 흐리게 둔다.
   ══════════════════════════════════════════════════════════════ */
#botNav{ display:none }
@media (max-width:900px){
  #botNav{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:22;
    background:var(--bg); border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #botNav button{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; padding:6px 2px;
    background:none; border:none; cursor:pointer;
    font-family:var(--sans); font-size:11px; font-weight:500;
    color:var(--ink-4);
  }
  #botNav button svg{ width:21px; height:21px }
  #botNav button.on{ color:var(--ink); font-weight:700 }
  #botNav button.on svg{ stroke-width:2.1 }
  #botNav button.off{ opacity:.35; cursor:not-allowed }
  #botNav button:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px }
  /* 하단 바에 내용이 가리지 않도록 */
  .app > .main{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)) }
  body.has-savebar #mobileSaveBar{ bottom:calc(56px + env(safe-area-inset-bottom,0px)) }
  #toast{ bottom:calc(72px + env(safe-area-inset-bottom,0px)) }
}
@media print{ #botNav{ display:none !important } }

/* ══════════════════════════════════════════════════════════════
   [10] 정산·발주도 견적과 같은 카드 방식으로
   예전에는 좁은 화면에서 표를 옆으로 밀어야 했다. 견적 품목에만
   있던 "한 행 = 한 카드" 방식을 정산·발주에도 그대로 적용한다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  #viewSet table.items, #viewPo table.items{
    display:block; overflow-x:visible; border:none;
    width:100%; min-width:0 !important;
  }
  #viewSet table.items thead, #viewPo table.items thead{ display:none }
  #viewSet table.items tbody, #viewPo table.items tbody{ display:block; width:100% }
  #viewSet table.items tbody tr, #viewPo table.items tbody tr{
    display:block; position:relative; background:var(--card);
    border:1px solid var(--line); padding:40px 12px 10px; margin-bottom:10px;
  }
  #viewSet table.items td, #viewPo table.items td{
    display:flex; align-items:center; gap:10px;
    border:none; padding:3px 0; background:transparent; white-space:normal;
  }
  #viewSet table.items td::before, #viewPo table.items td::before{
    content:attr(data-label); flex:0 0 84px;
    font-size:12px; font-weight:700; color:var(--gray); letter-spacing:.3px;
  }
  #viewSet table.items td input, #viewPo table.items td input{
    flex:1; min-width:0 !important; min-height:44px;
    text-align:left; padding:9px 10px; font-size:15px !important;
  }
  #viewSet table.items td input.num, #viewPo table.items td input.num{ text-align:right }
  #viewSet table.items td.cell-no, #viewPo table.items td.cell-no{
    position:absolute; top:10px; left:12px; padding:0;
  }
  #viewSet table.items td.cell-no::before, #viewPo table.items td.cell-no::before{ content:none }
  #viewSet table.items td.amount, #viewPo table.items td.amount{
    font-weight:700; font-size:15px; padding-top:6px;
  }
  #viewSet .cell-acts, #viewPo .cell-acts{
    justify-content:flex-end; border-top:1px dashed var(--hair);
    margin-top:6px; padding-top:8px;
  }
  #viewSet .cell-acts::before, #viewPo .cell-acts::before{ content:""; flex:1 1 auto }
  /* 견적 품목의 입력도 16px 로 (iOS 자동 확대 방지) */
  #viewEdit table.items{ min-width:0 !important }
  #viewEdit table.items td input{ font-size:15px !important; min-height:44px; min-width:0 }
  #viewEdit table.items td::before{ flex:0 0 74px }
  /* 카드 안에서 입력칸이 카드 밖으로 넘치지 않게 */
  #viewEdit table.items td, #viewSet table.items td, #viewPo table.items td{ max-width:100%; box-sizing:border-box }
  #viewEdit table.items tbody tr, #viewSet table.items tbody tr, #viewPo table.items tbody tr{
    box-sizing:border-box; max-width:100%; overflow:hidden;
  }
  /* 합계 상자는 화면 폭 전체 */
    .grid{ gap:12px }
}

/* ══════════════════════════════════════════════════════════════
   [13] 대시보드·통계 — 볼드 정리와 글자 크기
   숫자만 도드라지고 나머지는 차분하게.
   ══════════════════════════════════════════════════════════════ */
.stat-card .k{ font-weight:500; font-size:12px; color:var(--ink-4); letter-spacing:0 }
.stat-card .v{
  font-weight:600 !important;
  font-size:clamp(16px, 1.35vw, 21px) !important;
  letter-spacing:-.02em; margin-top:8px;
}
.stat-card .s{ font-weight:400; font-size:11px; color:var(--ink-4); margin-top:5px }
.stat-card .s b{ font-weight:600 }
.stat-card.primary .v{ font-weight:600 !important }
.kpi-n{ font-weight:600 !important; font-size:clamp(15px, 1.2vw, 19px) !important }
.goal-nums{ font-weight:400 }
.goal-nums b{ font-weight:600; font-size:15px }
.goal-pct{ font-weight:600; font-size:13px }
.bars .bar .val{ font-weight:500; font-size:11px }
.hval{ font-weight:600; font-size:13px }
.hname{ font-weight:500 }
.rpt-kpi .v{ font-weight:600 }
@media (max-width:900px){
  .stat-card .v{ font-size:18px !important }
  .stat-card .k{ font-size:11px }
}

/* [14] 당월 강조 */
.bars .bar.cur .col{ outline:2px solid var(--ink); outline-offset:1px }
.bar-lbls span.cur{ font-weight:700; color:var(--ink) }

/* ══════════════════════════════════════════════════════════════
   [7] 직원 월별 캘린더
   ══════════════════════════════════════════════════════════════ */
.pc-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px }
.pc-dows{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-bottom:1px }
.pc-dows span{ text-align:center; font-size:11px; font-weight:600; color:var(--ink-4); padding:6px 0 }
.pc-dows span.red{ color:var(--danger) }
.pc-dows span.blue{ color:var(--ink-3) }
.pc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line) }
.pc-cell{ background:var(--bg); min-height:92px; padding:6px 6px 8px; overflow:hidden }
.pc-cell.out{ background:var(--panel) }
.pc-cell.today{ box-shadow:inset 0 0 0 2px var(--ink) }
.pc-d{ font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:5px; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap }
.pc-d.red{ color:var(--danger) }
.pc-d.blue{ color:var(--ink-3) }
.pc-hol{ font-size:11px; font-weight:500; color:var(--ink-4) }
.pc-it{
  font-size:11px; line-height:1.45; padding:2px 5px; margin-bottom:3px;
  border-left:2px solid var(--ink); background:var(--panel);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-it.lv{ border-left-style:dashed; color:var(--ink-3) }
.pc-it.ev{ border-left-color:var(--ink-4) }
.pc-more{ font-size:11px; color:var(--ink-4) }
@media (max-width:760px){
  .pc-cell{ min-height:62px; padding:4px }
  .pc-it{ font-size:11px; padding:1px 3px }
  .pc-d{ font-size:11px }
}

/* 급여명세서 — 서명란이 다음 장으로 밀려 혼자 넘어가던 문제 */
@media print{
  /* 급여명세서는 내용이 많아 서명란만 다음 장으로 넘어가곤 했다.
     줄 간격을 조금 좁혀 한 장에 담고, 서명 묶음은 쪼개지지 않게 한다. */
  #printDoc .p2-sign, #printDoc .p2-confirm{ page-break-inside:avoid; break-inside:avoid }
  #printDoc .p2-confirm{ page-break-before:avoid; margin-top:14px }
  #printDoc .p2doc{ font-size:10.4px }
  #printDoc .p2doc .p2-title{ font-size:18px; letter-spacing:8px }
  #printDoc .p2doc .p2-sub{ margin:4px 0 8px; font-size:11px }
  #printDoc .p2doc .p2-sec{ margin:9px 0 0; font-size:11px; padding-bottom:2px }
  #printDoc .p2doc .p2-lines{ font-size:9.8px; line-height:1.5; padding-top:4px }
  #printDoc .p2doc .p2-info td,
  #printDoc .p2doc .p2-pd td,
  #printDoc .p2doc .p2-pd th{ padding:3.4px 7px; font-size:10.3px }
  #printDoc .p2doc .p2-net{ padding:6px; margin-top:6px; font-size:11px }
  #printDoc .p2doc .p2-net b{ font-size:13px }
  #printDoc .p2-confirm{ margin-top:10px; font-size:11px }
  #printDoc .p2-sign{ margin-top:7px }
}

/* ══════════════════════════════════════════════════════════════
   디자인 톤 통일 (요청)
   · 검은 상자 → 회색 기준. 강조는 굵기와 여백으로 준다.
   · 입력 양식에 겹쳐 보이던 굵은 테두리 정리
   · 캘린더 날짜 숫자 볼드 해제
   ══════════════════════════════════════════════════════════════ */

/* 합계 상자 — 검정 채움 대신 옅은 회색 + 얇은 테두리 */
.totals .trow.grand{
  background:var(--panel) !important;
  color:var(--ink) !important;
  border:1px solid var(--ink-4) !important;
  border-bottom:1px solid var(--ink-4) !important;
  padding:14px 16px !important;
  font-size:15px !important;
  font-weight:600 !important;
  margin-top:10px !important;
}
.totals .trow.grand .lb{ color:var(--ink-3) !important; font-weight:500 !important }
body.dark .totals .trow.grand{
  background:var(--panel) !important; color:var(--ink) !important;
  border-color:var(--ink-4) !important;
}
/* 합계 영역 위쪽 굵은 선 → 얇게 */
.totals{ border-top:1px solid var(--line-2) !important }

/* 문서 안 합계 상자도 같은 톤으로 */
#printDoc .doc-totals .dr.g,
#printDoc .q2-total{
  background:#f4f4f4 !important;
  color:#1a1a1a !important;
  border:1px solid #1a1a1a !important;
  font-weight:700 !important;
}
#printDoc .doc-totals .dr.g .k,
#printDoc .q2-total span:first-child{ color:#5b5b5b !important }

/* 모바일 저장 바 — 검정 채움 대신 테두리형 */
#mobileSaveBar .btn.gold,
#mobileSaveBar .btn{
  background:var(--ink); color:var(--bg);
}

/* 입력 양식의 이중 테두리 정리 —
   카드 테두리와 표 테두리가 겹쳐 두 줄로 보이던 부분 */
.card table.items{ border:none }
.card table.items thead th{ border-top:none }
.card > table.items:first-child{ margin-top:0 }
.view .card{ border:1px solid var(--line); box-shadow:none }
.view .card + .card{ border-top:1px solid var(--line) }
.totals input:not([type=checkbox]){ border:1px solid var(--line-2) }
.field input, .field select, .field textarea{ box-shadow:none }
/* 표 머리글은 아래 한 줄만 */
table.items th, table.tbl th, .tbl th{
  border-top:none !important;
  border-bottom:1px solid var(--line-2) !important;
}
/* 상태 배지의 검정 채움도 톤 정리 */
.badge.st-수주{ background:var(--ink-2); color:#fff }
.badge.st-발송{ background:var(--panel); color:var(--ink); border:1px solid var(--ink-4) }

/* 캘린더 날짜 숫자 — 볼드 해제 */
.cal-day, .cal-cell .cal-day, .tc-d, .pc-d,
.cal-grid .cal-cell > .cal-day{
  font-weight:400 !important;
}
.cal-cell.today .cal-day, .pc-cell.today .pc-d{ font-weight:600 !important }
.pc-dows span, .cal-dows span{ font-weight:500 }
#printDoc .tc-d{ font-weight:400 }

/* 사이드바 현재 메뉴 — 검정 채움 대신 왼쪽 표시선 */
.side-nav a.on, .side-nav .nav-sub.on, .nav-item.on{
  background:var(--panel) !important;
  color:var(--ink) !important;
  box-shadow:inset 3px 0 0 var(--ink);
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════════
   문서 공통 스타일 (dx)
   다섯 문서가 같은 여백·글자 크기·선 굵기를 쓴다.
   채움 상자 없이 얇은 선과 굵기만으로 위계를 만든다.
   ══════════════════════════════════════════════════════════════ */
.doc.dx{
  font-family:var(--sans);
  color:#1a1a1a;
  font-size:11px;
  line-height:1.6;
  letter-spacing:-.005em;
  padding:0;
}
@media screen{ .doc.dx{ padding:22mm 24mm; width:210mm; margin:0 auto; background:#fff } }

/* 머리 */
.dx-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-bottom:12px; border-bottom:1px solid #1a1a1a;
}
.dx-en{ font-size:11px; letter-spacing:.42em; color:#8c8c8c; font-weight:500; margin-bottom:6px }
.dx-ko{ font-size:24px; font-weight:700; letter-spacing:.34em; margin:0; color:#111 }
.dx-brand{ text-align:right; padding-bottom:3px }
.dx-co{ font-size:13px; font-weight:700; letter-spacing:.02em; color:#111 }
.dx-tag{ font-size:11px; color:#8c8c8c; letter-spacing:.06em; margin-top:3px }

/* 수신 / 공급자 */
.dx-parties{ display:flex; gap:26px; margin-top:16px }
.dx-party{ flex:1; min-width:0 }
.dx-plabel{
  font-size:11px; font-weight:600; letter-spacing:.22em; color:#8c8c8c;
  padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:7px;
}
.dx-dl{ display:grid; grid-template-columns:62px 1fr; gap:3px 8px; margin:0 }
.dx-dl dt{ font-size:11px; color:#9a9a9a; white-space:nowrap; padding-top:.5px }
.dx-dl dd{ margin:0; font-size:11px; color:#2b2b2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dx-dl dd b{ font-weight:700; color:#111 }
.dx-dl dd.dx-wrap{ white-space:normal; word-break:keep-all; line-height:1.45 }

/* 인사말 · 금액 한 줄 */
.dx-lead{ font-size:11px; color:#5b5b5b; margin:16px 0 9px }
.dx-headline{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  border:1px solid #1a1a1a; padding:10px 14px; margin-bottom:14px;
}
.dx-headline span{ font-size:11px; color:#6e6e6e; letter-spacing:.02em; white-space:nowrap }
.dx-headline b{ font-size:13px; font-weight:700; letter-spacing:.01em }
.dx-hn{ font-size:13px !important; color:#111 !important; font-weight:700; font-variant-numeric:tabular-nums }

/* 표 */
table.dx-tbl{ width:100%; border-collapse:collapse; margin-top:2px }
table.dx-tbl th{
  font-size:11px; font-weight:600; letter-spacing:.06em; color:#5b5b5b;
  padding:7px 7px; border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a;
  white-space:nowrap; text-align:center;
}
table.dx-tbl td{
  font-size:11px; padding:7.5px 7px; border-bottom:1px solid #e6e6e6;
  color:#2b2b2b; vertical-align:middle;
}
table.dx-tbl td b{ font-weight:600; color:#111 }
table.dx-tbl .c{ text-align:center }
table.dx-tbl .r{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
table.dx-tbl .l{ text-align:left }
table.dx-tbl td.c{ color:#5b5b5b }
table.dx-tbl td.l{ color:#1a1a1a }

/* 합계 */
.dx-totals{ width:300px; margin:14px 0 0 auto }
.dx-tr{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:6.5px 2px; border-bottom:1px solid #ededed;
  font-size:11px; color:#6e6e6e;
}
.dx-tr b{ font-weight:500; color:#2b2b2b; font-variant-numeric:tabular-nums }
.dx-tr.grand{
  border:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a;
  background:#f6f6f6; margin-top:7px; padding:10px 12px;
}
.dx-tr.grand span{ font-size:11px; font-weight:600; color:#3d3d3d; letter-spacing:.04em }
.dx-tr.grand b{ font-size:15px; font-weight:700; color:#111 }

/* 안내 */
.dx-notes{ margin-top:20px; padding-top:11px; border-top:1px solid #e6e6e6 }
.dx-notes h4{
  font-size:11px; font-weight:600; letter-spacing:.22em; color:#8c8c8c; margin:0 0 6px;
}
.dx-notes p{ font-size:10.6px; color:#5b5b5b; line-height:1.8; margin:0; white-space:pre-wrap }
.dx-nn{
  display:inline-block; min-width:14px; text-align:center;
  font-size:9px; color:#8c8c8c; border:1px solid #d8d8d8; margin-right:5px; line-height:1.5;
}

/* 서명 · 인수 확인 */
.dx-sign{ margin-top:22px }
.dx-sign .doc-stamp{ margin-top:0; font-size:11px; color:#2b2b2b }
.dx-confirm{
  display:flex; gap:40px; margin-top:22px; padding-top:14px; border-top:1px solid #e6e6e6;
  font-size:11px;
}
.dx-confirm > div{ flex:1; display:flex; align-items:center; gap:10px }
.dx-confirm .k{ color:#9a9a9a; font-size:11px }
.dx-confirm b{ font-weight:600 }
.dx-confirm .in{ color:#8c8c8c; margin-left:4px }

/* 바닥 */
.dx-foot{
  margin-top:26px; padding-top:9px; border-top:1px solid #e6e6e6;
  display:flex; justify-content:space-between; gap:16px;
  font-size:9.6px; color:#9a9a9a; letter-spacing:.01em;
}
.dx-fco{ font-weight:700; color:#5b5b5b; letter-spacing:.08em; white-space:nowrap }

/* 인쇄 */
@media print{
  .doc.dx{ padding:0 !important; width:auto }
  .doc.dx + .doc.dx{ page-break-before:always }
  #printDoc .dx-head, #printDoc .dx-headline, #printDoc .dx-totals,
  #printDoc .dx-sign, #printDoc .dx-confirm, #printDoc .dx-parties{
    page-break-inside:avoid; break-inside:avoid;
  }
  #printDoc table.dx-tbl{ page-break-inside:auto }
  #printDoc table.dx-tbl thead{ display:table-header-group }
  #printDoc table.dx-tbl tr{ page-break-inside:avoid }
}

/* ══════════════════════════════════════════════════════════════
   검은 면 정리 — 회색 기준으로 통일
   면으로 채우는 곳은 회색, 강조는 굵기와 얇은 선으로.
   누르는 버튼만 진한 잉크색을 유지해 무엇이 동작인지 남긴다.
   ══════════════════════════════════════════════════════════════ */

/* 사이드바 현재 메뉴 — 검은 판 대신 옅은 판 + 왼쪽 표시선 */
.nav-item.active, .nav-item.on,
#sideNavList .nav-item.active{
  background:var(--panel) !important;
  color:var(--ink) !important;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--ink);
}
.nav-item.active .ni-ic svg, #sideNavList .nav-item.active .ni-ic svg{ stroke:var(--ink) }
body.dark .nav-item.active{ background:var(--panel) !important; color:var(--ink) !important }

/* 떠 있는 합계 알약 — 검정 채움 → 흰 바탕 + 진한 테두리 */
#pcTotalPill{
  background:var(--bg) !important;
  color:var(--ink) !important;
  border:1px solid var(--ink) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  font-weight:500;
}
#pcTotalPill b{ font-weight:700 }

/* 상태 배지 — 검정 채움을 진회색으로 낮춘다 */
.badge.st-수주{ background:var(--ink-2) !important; color:#fff !important }
.chip.lv, .chip.ev, .chip.due{ background:var(--panel); color:var(--ink-2); border:1px solid var(--line-2) }

/* 버튼 — 순수 검정 대신 잉크색으로 (동작이라는 신호는 유지) */
.btn.gold, .btn.primary, #mobileSaveBar .btn{
  background:var(--ink-2) !important; color:var(--bg) !important; border-color:var(--ink-2) !important;
}
.btn.gold:hover, .btn.primary:hover{ background:var(--ink) !important; border-color:var(--ink) !important }
.toolbar .btn.gold{ background:var(--ink-2) !important }

/* 표 머리글 배경이 회색으로 깔리던 곳 통일 */
.p2-pd th, .tc-tbl th{ background:var(--panel) !important; color:var(--ink-2) !important }

/* 차트 막대 — 검정 대신 잉크 */
.bars .bar .col{ background:var(--ink-2) }
.bars .bar.top .col{ background:var(--ink) }
.hfill{ background:var(--ink-2) }

/* ══════════════════════════════════════════════════════════════
   입력칸 — 회색 면 기준으로 통일
   흰 칸은 배경과 구분이 테두리 하나뿐이라 어디가 입력칸인지
   한눈에 안 들어왔다. 옅은 회색으로 면을 깔아 "여기 쓰는 곳" 을
   먼저 보이게 하고, 누르면 흰색으로 바뀌어 지금 쓰는 칸이 뜬다.
   ══════════════════════════════════════════════════════════════ */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select, textarea,
.inp, .sel, .inp-mini, .sel-mini,
.field input, .field select, .field textarea,
.totals input, .modal input, .modal select, .modal textarea,
.modal-head input, .search-bar input, .search-bar select,
.tb-search input, table.items input, table.tbl input,
#authGate input{
  background:var(--panel);
  border:1px solid var(--line-2);
  color:var(--ink);
  transition:background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
/* 지금 쓰고 있는 칸만 흰색으로 떠오르게 */
input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus,
.inp:focus, .sel:focus, .inp-mini:focus, .sel-mini:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.totals input:focus, .modal input:focus, .modal select:focus, .modal textarea:focus,
.modal-head input:focus, .search-bar input:focus, .search-bar select:focus,
.tb-search input:focus, table.items input:focus, table.tbl input:focus,
#authGate input:focus{
  background:var(--bg) !important;
  border-color:var(--ink) !important;
}
/* 마우스를 올렸을 때 살짝 반응 */
input:not([type=checkbox]):not([type=radio]):hover:not(:focus),
select:hover:not(:focus), textarea:hover:not(:focus){
  border-color:var(--ink-4);
}
/* 못 쓰는 칸은 더 흐리게 */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly]{
  background:var(--soft, #efefef);
  color:var(--ink-4);
  border-color:var(--line);
  cursor:not-allowed;
}
/* 높이·글자 크기 통일 — select 만 2px 더 크던 것 정리 */
.field input:not([type=checkbox]):not([type=radio]),
.field select, .field textarea,
input[type=date], input[type=month], input[type=time]{
  height:40px; box-sizing:border-box; padding:9px 11px;
}
.field textarea{ height:auto; min-height:72px; padding:10px 11px }
.search-bar input, .search-bar select{ height:40px; box-sizing:border-box }
.inp-mini, .sel-mini{ height:36px; box-sizing:border-box; padding:6px 9px }
/* 표 안의 입력칸은 면을 깔되 조금 더 낮게 */
table.items input, table.tbl input{
  height:38px; box-sizing:border-box;
}

/* 어두운 화면에서도 같은 관계 유지 */
/* 어두운 화면에서는 반대로 — 바탕보다 한 단계 밝은 면이 입력칸이 된다.
   (밝은 화면에서 쓰던 --panel 을 그대로 쓰면 바탕과 같은 색이라 사라진다) */
body.dark input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.dark select, body.dark textarea,
body.dark .inp, body.dark .sel, body.dark .inp-mini, body.dark .sel-mini,
body.dark .field input, body.dark .field select, body.dark .field textarea,
body.dark table.items input, body.dark table.tbl input,
body.dark .modal input, body.dark .modal select, body.dark .modal textarea,
body.dark .search-bar input, body.dark .search-bar select,
body.dark .totals input, body.dark .modal-head input,
body.dark .tb-search input, body.dark #authGate input{
  background:#262626 !important;
  border-color:#3d3d3d !important;
  color:var(--ink) !important;
}
body.dark input:focus, body.dark select:focus, body.dark textarea:focus{
  background:#101010 !important; border-color:#e7e7e7 !important;
}
body.dark input:hover:not(:focus), body.dark select:hover:not(:focus),
body.dark textarea:hover:not(:focus){ border-color:#5b5b5b !important }
body.dark input:disabled, body.dark select:disabled,
body.dark input[readonly], body.dark textarea[readonly]{
  background:#1c1c1c !important; color:var(--ink-4) !important; border-color:#2b2b2b !important;
}
body.dark ::placeholder{ color:#6e6e6e }

/* 모바일 — 면은 그대로, 크기만 키운다 */
@media (max-width:900px){
  .field input:not([type=checkbox]):not([type=radio]),
  .field select, .field textarea,
  input[type=date], input[type=month], input[type=time]{ height:46px }
  .inp-mini, .sel-mini{ height:42px }
  table.items input, table.tbl input{ height:44px }
}

/* 인쇄물에는 회색 면을 넣지 않는다 */
@media print{
  #printDoc input, #printDoc select, #printDoc textarea{ background:none !important; border:none !important }
}

/* ══════════════════════════════════════════════════════════════
   포커스 표시 — 한 줄로
   테두리 색까지 같이 바꾸면 바깥 링과 안쪽 선이 겹쳐 두 줄로 보였다.
   링만 남기고 테두리는 원래 색을 유지한다.
   ══════════════════════════════════════════════════════════════ */
.app input:focus-visible, .app select:focus-visible, .app textarea:focus-visible,
.modal input:focus-visible, .modal select:focus-visible, .modal textarea:focus-visible,
#authGate input:focus-visible,
table.items input:focus-visible, table.tbl input:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.totals input:focus-visible, .search-bar input:focus-visible,
.modal-head input:focus-visible, .tb-search input:focus-visible, .sel-mini:focus-visible{
  outline:2px solid var(--ink) !important;
  outline-offset:0 !important;
  border-color:transparent !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--line-2) !important;
}
.app input:focus-visible, .app select:focus-visible, .app textarea:focus-visible{
  background:var(--bg) !important;
}
body.dark .app input:focus-visible, body.dark .app select:focus-visible,
body.dark .app textarea:focus-visible{ outline-color:#e7e7e7 !important }
body.dark input:focus, body.dark select:focus, body.dark textarea:focus{
  border-color:#3d3d3d !important;
}

/* 견적·정산·발주 작성 표 — 가운데 정렬 통일 */
#viewEdit table.items th, #viewSet table.items th, #viewPo table.items th{ text-align:center }
#viewEdit table.items td input:not(.num),
#viewSet table.items td input:not(.num),
#viewPo table.items td input:not(.num){ text-align:center }
#viewEdit table.items td.amount, #viewSet table.items td.amount, #viewPo table.items td.amount{
  text-align:right;
}
@media (max-width:760px){
  #viewEdit table.items td input:not(.num),
  #viewSet table.items td input:not(.num),
  #viewPo table.items td input:not(.num){ text-align:left }
}

/* 캘린더 — 토요일 파랑 · 일요일·공휴일 빨강 (전 캘린더 공통) */
:root{ --sat:#1f5fd0; --sun:#c62828 }
body.dark{ --sat:#7aa7f0; --sun:#ef6b6b }
.cal-dow.sun, .cal-cell.sun .cal-day, .cal-cell.sun .dnum,
.pc-dows span.sun, .pc-cell.sun .pc-d,
.mc-cell.sun, .tc-d.sun, #printDoc .tc-d.sun,
.cal-cell.hol .cal-day, .cal-cell.hol .dnum, .pc-cell.hol .pc-d{
  color:var(--sun) !important;
}
.cal-dow.sat, .cal-cell.sat .cal-day, .cal-cell.sat .dnum,
.pc-dows span.sat, .pc-cell.sat .pc-d,
.mc-cell.sat, .tc-d.sat, #printDoc .tc-d.sat{
  color:var(--sat) !important;
}
.hol-name, .pc-hol{ color:var(--sun) !important }
.cal-cell.out .cal-day, .pc-cell.out .pc-d{ color:var(--ink-4) !important; opacity:.5 }

/* 단축키 안내 */
.kb-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:18px 26px }
.kb-sec h4{ font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--ink-4);
            margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line) }
.kb-row{ display:flex; align-items:center; gap:10px; padding:4px 0; font-size:13px }
.kb-row kbd{
  flex:0 0 auto; min-width:88px; text-align:center;
  font-family:var(--sans); font-size:11px; font-weight:600;
  padding:4px 8px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2);
}
.kb-row span{ color:var(--ink-2) }
kbd{ font-family:var(--sans); font-size:11px; padding:2px 6px; border:1px solid var(--line-2); background:var(--panel) }
@media (max-width:760px){ .kb-wrap{ grid-template-columns:1fr } }

/* 데모 둘러보기 */
.ag-demo{ width:100%; margin-top:10px; background:var(--bg) !important; color:var(--ink) !important;
          border:1px solid var(--ink) !important }
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.demo-card{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:14px; border:1px solid var(--line-2); background:var(--panel);
  cursor:pointer; font-family:var(--sans);
}
.demo-card:hover{ border-color:var(--ink); background:var(--bg) }
.demo-card:focus-visible{ outline:2px solid var(--ink); outline-offset:1px }
.dc-kind{ font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--ink-4) }
.dc-name{ font-size:15px; font-weight:700; color:var(--ink) }
.dc-desc{ font-size:12px; color:var(--ink-3); line-height:1.5; word-break:keep-all }
.dc-id{ font-size:11px; color:var(--ink-4); margin-top:4px; font-variant-numeric:tabular-nums }
@media (max-width:600px){ .demo-grid{ grid-template-columns:1fr } }

/* 도장은 (인) 위에 겹치게 */
.stamp-wrap{ position:relative; display:inline-block }
.stamp-wrap .in{ position:relative; z-index:0 }
.stamp-wrap .stamp-img{
  position:absolute !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%, -50%) !important;
  width:60px !important; height:60px !important;
  z-index:1; opacity:.9;
}
#printDoc .stamp-wrap .stamp-img{ width:60px !important; height:60px !important }
.q2-signco .stamp-wrap{ width:60px; height:60px }
.q2-signco .stamp-wrap .stamp-img{ width:60px !important; height:60px !important }
.doc-stamp .stamp-wrap, .dx-sign .stamp-wrap{ margin-left:8px; padding:0 10px }
.dx-confirm .stamp-wrap{ margin-left:6px; padding:0 8px }

/* 데모·단축키 창은 로그인 화면 위에 떠야 한다 (로그인 화면이 9500) */
#demoBg, #keysBg{ z-index:9600 }
/* 데모 버튼 — 로그인 버튼과 구분되게 테두리형으로 */
#authGate .ag-demo,
#authGate .btn.ag-demo{
  background:var(--bg) !important;
  color:var(--ink) !important;
  border:1px solid var(--ink) !important;
  min-height:44px;
  font-weight:600;
}
#authGate .ag-demo span{ color:var(--ink) !important }
#authGate .ag-demo:hover{ background:var(--panel) !important }
body.dark #authGate .ag-demo{ background:transparent !important; color:var(--ink) !important; border-color:var(--ink) !important }

/* 데모 버튼은 채움 효과 층을 쓰지 않는다 (검은 판으로 덮이던 문제) */
#authGate .ag-demo::before{ background:transparent !important; content:none !important }
#authGate .ag-demo{ background:var(--bg) !important }
#authGate .ag-demo:hover{ background:var(--panel) !important }

/* ══════════════════════════════════════════════════════════════
   [2] 글자 크기 — 43종에서 6단계로
   0.5px 차이는 눈에 보이지 않으면서 위계만 흐린다.
     11 보조 · 12 라벨 · 13 본문 · 15 강조 · 18 소제목 · 24 화면 제목
   ══════════════════════════════════════════════════════════════ */
:root{
  --fs-xs:11px;   /* 배지·캡션 */
  --fs-sm:12px;   /* 라벨·보조 설명 */
  --fs-md:13px;   /* 본문 기본 */
  --fs-lg:15px;   /* 값·강조 */
  --fs-xl:18px;   /* 카드 제목 */
  --fs-2xl:24px;  /* 화면 제목 */
  /* 여백 — 4의 배수 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
}
.view-head h1{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.02em }
.view-head .lead{ font-size:var(--fs-md); color:var(--ink-3); margin-top:var(--s1) }
.card h2, .card > h2{ font-size:var(--fs-xl); font-weight:600; letter-spacing:-.01em }
.card h2 .h2t{ font-size:inherit }
.t13, .t125, .storage-note, .hi-sub, .lead{ font-size:var(--fs-md) }
.muted, .muted-lt, .t125{ font-size:var(--fs-sm) }
.badge, .chip, .nav-badge, .dc-kind{ font-size:var(--fs-xs) }
.btn{ font-size:var(--fs-md) }
.btn.sm, .row-menu button{ font-size:var(--fs-md) }
label, .field label, .filt-lbl{ font-size:var(--fs-sm) }
input, select, textarea, .inp, .sel{ font-size:13px }
.inp-mini, .sel-mini{ font-size:var(--fs-md) }
table.items th, table.tbl th, .tbl th{ font-size:var(--fs-xs) }
table.items td, table.tbl td{ font-size:var(--fs-md) }
.hb-tx, .hname, .hi-top{ font-size:var(--fs-md) }
.hval, .amount, .num-fmt{ font-size:var(--fs-md) }
.stat-card .k{ font-size:var(--fs-sm) }
.stat-card .v{ font-size:18px !important }
.stat-card .s{ font-size:var(--fs-xs) }
.nav-item, .nav-sec{ font-size:var(--fs-md) }
.side-brand, .sb-name{ font-size:var(--fs-lg) }
.kpi-n{ font-size:var(--fs-lg) !important }

/* ══════════════════════════════════════════════════════════════
   [3] 여백 — 4px 배수
   ══════════════════════════════════════════════════════════════ */
.view .card{ padding:var(--s5); margin-bottom:var(--s3) }
.card h2{ margin:0 0 var(--s4) }
.grid{ gap:var(--s4) }
.field{ margin-bottom:0 }
.field label{ margin-bottom:var(--s1); display:block }
.toolbar{ gap:var(--s2); margin-bottom:var(--s4) }
.search-bar{ gap:var(--s2); margin-bottom:var(--s3) }
.stat-grid{ gap:var(--s3); margin-bottom:var(--s3) }
.btn{ padding:0 var(--s4); min-height:36px }
.btn.gold, #loginBtn{ min-height:40px }
table.items th{ padding:var(--s2) var(--s3) }
table.items td{ padding:var(--s2) var(--s3) }
.hb-row{ padding:var(--s2) 0; gap:var(--s3) }
.hist-item{ padding:var(--s4) }
.hist-item .acts{ gap:var(--s2); margin-top:var(--s3) }
.totals .trow{ padding:var(--s3) var(--s1) }
.view-head{ margin-bottom:var(--s4) }

/* ══════════════════════════════════════════════════════════════
   [1] 더보기 메뉴
   ══════════════════════════════════════════════════════════════ */
.btn-more{ min-width:40px; padding:0 var(--s3); font-size:15px; line-height:1; letter-spacing:1px }
.row-menu{
  position:fixed; z-index:9700; min-width:210px;
  background:var(--bg); border:1px solid var(--ink);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.28);
  padding:var(--s1) 0;
}
.row-menu button{
  display:block; width:100%; text-align:left;
  padding:var(--s2) var(--s4); border:none; background:none;
  font-family:var(--sans); font-size:var(--fs-md); color:var(--ink-2); cursor:pointer;
}
.row-menu button:hover, .row-menu button:focus-visible{ background:var(--panel); color:var(--ink); outline:none }
.row-menu button.danger-txt{ color:var(--danger) }
.row-menu button.danger-txt:hover{ background:#fdf0f0 }
body.dark .row-menu button.danger-txt:hover{ background:#2a1a1a }

/* [6] 기간 필터 라벨 */
.filt-lbl{
  align-self:center; color:var(--ink-4); font-weight:500;
  white-space:nowrap; margin-right:calc(var(--s1) * -1);
}

.totals .trow .sel-mini, .totals .trow select{ height:32px }
.totals .trow input[type=text], .totals .trow .inp-mini{ height:32px }

/* [7] 상태 배지처럼 보이는 선택칸
   예전에는 "수주" 가 큼직한 검은 상자로 떠서 상태 표시인지 입력칸인지
   헷갈렸다. 평소에는 작은 배지로 두고, 누를 때만 목록이 뜨게 한다.
   (.st-select.st-수주 등 예전 규칙보다 우선순위를 한 단계 높여 둔다) */
.st-select.st-sel{
  --caret:var(--ink-4);
  -webkit-appearance:none !important; appearance:none !important;
  border-radius:0; cursor:pointer;
  height:24px; line-height:22px; box-sizing:border-box;
  padding:0 19px 0 8px;
  font-family:inherit; font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.2px; text-align:left;
  background-color:var(--panel); color:var(--ink-2);
  border:1px solid var(--line-2);
  background-image:linear-gradient(45deg, transparent 50%, var(--caret) 50%),
                   linear-gradient(135deg, var(--caret) 50%, transparent 50%);
  background-position:calc(100% - 10px) 10px, calc(100% - 7px) 10px;
  background-size:3px 3px, 3px 3px;
  background-repeat:no-repeat;
  transition:border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.st-select.st-sel.st-작성중{ background-color:var(--panel); color:var(--ink-4); border-color:var(--line-2) }
.st-select.st-sel.st-발송 { background-color:var(--bg);    color:var(--ink-2); border-color:var(--ink-4) }
.st-select.st-sel.st-협의중{ background-color:var(--bg);    color:var(--ink);   border-color:var(--ink-3) }
.st-select.st-sel.st-수주 { background-color:var(--ink);   color:var(--bg);    border-color:var(--ink); --caret:rgba(255,255,255,.6) }
.st-select.st-sel.st-실패 { background-color:var(--bg);    color:var(--ink-4); border-color:var(--line-2) }
.st-select.st-sel:hover{ border-color:var(--ink-3) }
.st-select.st-sel:focus{ background-color:var(--bg); color:var(--ink); border-color:var(--ink) }
.st-select.st-sel.st-수주:focus{ background-color:var(--ink); color:var(--bg) }
.st-select.st-sel:focus-visible{ outline:2px solid var(--ink); outline-offset:1px }
.st-select.st-sel option{ color:var(--ink); background:var(--bg); font-weight:500 }

body.dark .st-select.st-sel{
  background-color:#262626 !important; color:#c9c9c9 !important; border-color:#3d3d3d !important;
}
body.dark .st-select.st-sel.st-수주{
  background-color:#e7e7e7 !important; color:#0f0f0f !important; border-color:#e7e7e7 !important;
  --caret:rgba(0,0,0,.55);
}
body.dark .st-select.st-sel.st-발송{ border-color:#8a8a8a !important; color:#e7e7e7 !important }
body.dark .st-select.st-sel.st-실패{ color:#6e6e6e !important }

/* 모바일에서 글자가 16px 로 커지며 배지가 뭉개지던 것 */
@media (max-width:900px){
  .st-select.st-sel{ font-size:12px !important; height:26px; line-height:24px }
}

/* [11] 강조 카드 — 위쪽 검은 줄 대신 값의 굵기로 */
/* 검은 테두리가 늘 붙어 있어 마우스를 올려 둔 것처럼 보였다.
   평소에는 다른 카드와 같고, 굵은 숫자로만 구분한다.
   테두리는 올렸을 때만 전 카드 공통으로 나타난다. */
.stat-card.primary{ border:1px solid var(--line) !important; border-top-width:1px !important }
.stat-card.primary::before{ content:none !important }
.stat-card.primary .v{ font-weight:800 !important }
.stat-card{ transition:border-color var(--dur-1) var(--ease-out) }
.stat-card:hover, .stat-card.clickable:hover{ border-color:var(--ink) !important }
body.dark .stat-card.primary{ border-color:#2b2b2b !important }
body.dark .stat-card:hover{ border-color:#e7e7e7 !important }

/* [4] 홈 카드 밀도 — 넓은 화면에서 지나치게 늘어지지 않게 */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  max-width:1180px;
}
.stat-card{ padding:var(--s4) }
.stat-card .s{ min-height:2.6em }
@media (min-width:1400px){ .stat-grid{ grid-template-columns:repeat(4, minmax(210px, 260px)) } }

/* [5] 목록이 짧을 때의 빈 화면 */
.view.active > .card:last-child{ margin-bottom:var(--s6) }
.list-hint{
  margin-top:var(--s4); padding:var(--s5);
  border:1px dashed var(--line-2); background:var(--panel);
  font-size:var(--fs-md); color:var(--ink-3); line-height:1.7;
}
.list-hint b{ color:var(--ink-2) }
.list-hint .lh-t{ display:block; font-weight:600; color:var(--ink); margin-bottom:var(--s1) }

/* [8] 사이드바 — 그룹 제목을 더 작게, 항목 높이를 줄여 한 화면에 */
.nav-sec{ padding:var(--s2) var(--s4); font-size:var(--fs-xs); letter-spacing:.1em }
.nav-item{ padding:var(--s2) var(--s4); min-height:34px }
.nav-item.sub{ padding-left:var(--s6) }
.nav-subs{ padding-bottom:var(--s1) }
.side-scroll{ scrollbar-width:thin }

/* [10] 트렌드 빈 구간 — 0인 달도 바닥선으로 보이게 */
.bars .bar .col{ min-height:2px }
.tr-empty{ height:2px; background:var(--line-2); width:100% }

/* ══════════════════════════════════════════════════════════════
   [13] 대행료 줄 — 라벨 · 조작칸 · 금액을 두 줄 격자로
   340px 안에 네 요소를 한 줄로 넣다 보니 글자가 접히고
   10% 선택칸이 세로로 잘렸다. 금액은 오른쪽에 세로 가운데로 붙이고,
   차감/가산·요율은 라벨 아래 한 줄로 내린다.
   ══════════════════════════════════════════════════════════════ */
#viewEdit .totals, #viewSet .totals, #viewPo .totals{ width:400px; margin-left:auto }

/* 합계칸이 400px 로 넓어져 이제 한 줄에 들어간다.
   순서는 이름 → 조작칸 → 금액(오른쪽 끝). */
.totals .trow.trow-fee{
  display:flex; align-items:center; flex-wrap:wrap;
  column-gap:var(--s2); row-gap:var(--s2);
}
.totals .trow.trow-fee .fee-lbl{ order:1; min-height:0; white-space:nowrap; flex:none }
.totals .trow.trow-fee .fee-ctl{ order:2; display:flex; align-items:center; gap:var(--s2); flex:none }
.totals .trow.trow-fee .fee-amt{ order:3; margin-left:auto; white-space:nowrap }
/* 선택칸 — 높이 32px 에 맞는 안쪽 여백. 예전에는 위아래 11px 이라
   글자가 칸 밖으로 밀려 잘려 보였다. */
/* 견적서의 수수료 요율(#tFeeSel)은 class 가 없어 전역 select 규칙
   (padding 11px)이 그대로 걸렸고, 32px 높이에서 "10%" 가 눌려
   잘 안 보였다. 합계칸의 select 전부를 한 규칙으로 맞춘다. */
.totals .trow select{
  height:32px; box-sizing:border-box;
  padding:0 var(--s2) !important;
  font-size:var(--fs-md); line-height:30px;
  text-align:left; margin:0; width:auto; min-width:78px;
}
.totals .trow select.fee-dir{ width:74px }
.totals .trow select.fee-rate{ width:84px }
.totals .trow input.fee-cust{
  width:64px; height:32px; box-sizing:border-box;
  padding:0 var(--s2) !important; text-align:right; margin:0;
}
.totals .trow.trow-fee .vat-toggle{ font-size:var(--fs-md) }

@media (max-width:900px){
  #viewEdit .totals, #viewSet .totals, #viewPo .totals{ width:100%; margin-left:0 }
  .totals .trow select.fee-dir{ width:80px }
  .totals .trow select.fee-rate{ width:92px }
  .totals .trow select.fee-dir,
  .totals .trow select.fee-rate,
  .totals .trow input.fee-cust{ height:38px; line-height:36px }
}

/* ══════════════════════════════════════════════════════════════
   [9] 백업 안내 — 아래쪽 한 줄
   맨 위 배너는 많이 늦었을 때만 뜨고, 평소에는 여기 한 줄로만 알린다.
   ══════════════════════════════════════════════════════════════ */
.backup-note{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-4); line-height:1.7;
}
.backup-note b{ color:var(--ink-3); font-weight:600 }
.backup-note .bn-acts{ display:flex; gap:var(--s3); margin-left:auto }
.btn.btn-txt{
  background:none !important; border:none !important; padding:0 !important;
  min-height:0; height:auto; color:var(--ink-2);
  font-size:var(--fs-sm); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.btn.btn-txt::before{ content:none !important }
.btn.btn-txt:hover{ color:var(--ink) }
.btn.btn-txt.muted{ color:var(--ink-4); font-weight:500 }
.btn.btn-txt.muted:hover{ color:var(--ink-2) }
@media (max-width:640px){
  .backup-note .bn-acts{ margin-left:0; width:100% }
}
@media print{ .backup-note{ display:none !important } }

/* ══════════════════════════════════════════════════════════════
   [10] 값이 없는 달
   막대가 2px 이라도 진한 색이면 "아주 적은 실적" 으로 읽힌다.
   자료가 없는 구간은 옅은 바닥선으로만 남겨 실적 0 과 구분한다.
   ══════════════════════════════════════════════════════════════ */
.bars .col.col-0{ background:var(--line) !important; min-height:2px }
body.dark .bars .col.col-0{ background:#2b2b2b !important }
.bars .bar:has(.col-0) .val{ visibility:hidden }

/* 가로 막대 — 13px 검정 덩어리는 지운 자국처럼 보인다.
   막대는 얇게, 바탕 트랙은 거의 안 보이게. */
.hrow{ gap:var(--s3) }
.htrack{ height:6px; background:var(--line) }
.hfill{ height:6px; background:var(--ink-2) }
body.dark .htrack{ background:#2b2b2b }
body.dark .hfill{ background:#c9c9c9 }
.hval{
  width:auto; min-width:132px; white-space:nowrap;
  color:var(--ink-3); font-weight:600;
}
.hname{ width:170px }
@media (max-width:640px){
  .hname{ width:110px }
  .hval{ min-width:0 }
}

/* 견적 품목 — 안내 문구가 칸을 넘지 않게 */
table.items input::placeholder{ font-size:var(--fs-sm); color:var(--ink-4) }
table.items td input{ min-width:0 }

/* ══════════════════════════════════════════════════════════════
   고객사·협력사 전용 화면
   이 계정들은 자기 문서를 보는 화면 하나가 전부다. "홈" 한 줄만
   남은 사이드바와 화면 검색창은 오히려 뭘 못 보게 막아 둔 것처럼
   보여서, 아예 걷어 내고 내용만 남긴다.
   ══════════════════════════════════════════════════════════════ */
body.solo-view .sidebar,
body.solo-view .tb-search,
body.solo-view .side-toggle,
body.solo-view #botNav,
body.solo-view #sideOverlay{ display:none !important }
body.solo-view .app > .main{ margin-left:0 !important }
body.solo-view .topbar{ padding-left:var(--s6) }
body.solo-view .tb-title{ font-weight:700 }
body.solo-view .tb-title::before{
  content:"SIXONE"; display:inline-block; margin-right:var(--s3);
  padding-right:var(--s3); border-right:1px solid var(--line-2);
  font-family:var(--mono); font-weight:700; letter-spacing:.06em;
}
body.solo-view .view{ max-width:1040px }
@media (max-width:900px){
  body.solo-view .topbar{ padding-left:var(--s4) }
  body.solo-view .tb-title::before{ content:none }
}

/* ══════════════════════════════════════════════════════════════
   모바일 마무리
   터치 크기를 키우려고 준 min-height 가 상태 배지까지 늘려 놓아,
   작은 화면에서만 검은 덩어리가 되어 버렸다. 배지는 예외로 둔다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .hist-item .st-sel, #histList .st-sel, .st-select.st-sel{
    height:26px !important; min-height:0 !important;
    align-self:center; flex:0 0 auto; width:auto;
    padding:0 19px 0 8px !important; line-height:24px;
  }
  /* 기간 필터 — 작은 화면에서 라벨이 숨어 "-------" 만 두 개 보였다 */
  .filt-lbl{
    display:block !important; width:100%; flex:0 0 100%;
    margin:var(--s2) 0 calc(var(--s2) * -1);
    font-size:var(--fs-sm); color:var(--ink-4); font-weight:600;
  }
  .search-bar input[type=month], .search-bar input[type=date]{ width:100% }
}

/* ══════════════════════════════════════════════════════════════
   [6] 글자 크기 — 여섯 단계로 확정
   화면마다 12.5 · 14 · 14.5 · 11.5px 같은 값이 흩어져 있어
   "제목인지 본문인지 보조인지" 가 한눈에 안 잡혔다.
   ══════════════════════════════════════════════════════════════ */
.t125, .t13, .t135, .muted, .muted-lt{ font-size:var(--fs-sm) }
.storage-note, .lead, .cfg-tx span, .field label,
.hint, .sub, .desc, .note{ font-size:var(--fs-sm) }
.card > h2{ font-size:var(--fs-lg) }
.view-head h1{ font-size:var(--fs-2xl) }
.hist-item .name, .hist-item .no{ font-size:var(--fs-md) }
.hist-item .amt{ font-size:var(--fs-lg) }
table.tbl th, table.items th{ font-size:var(--fs-sm) }
table.tbl td, table.items td{ font-size:var(--fs-md) }
.badge, .mem-st, .no-badge{ font-size:var(--fs-xs) }

/* ══════════════════════════════════════════════════════════════
   [7] 버튼 높이 — 한 줄에 36 · 40 · 44px 이 섞여 있었다
   기본 36px, 주요 동작(툴바)만 40px 로 두 단계만 쓴다.
   ══════════════════════════════════════════════════════════════ */
.btn{
  min-height:36px; height:auto; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--s4); font-size:var(--fs-md); line-height:1.2;
}
.btn.xs{ min-height:30px; padding:0 var(--s3); font-size:var(--fs-sm) }
.toolbar .btn, .view-head + .toolbar .btn{ min-height:40px }
.acts .btn, .hist-item .btn, table .btn, .row-menu button{ min-height:34px }
.btn-more{ min-height:34px; min-width:38px; padding:0 var(--s3) }
.search-bar .btn, .tb-fold summary{ min-height:40px }
/* 같은 줄에 놓인 버튼끼리 높이가 갈리지 않게.
   .gold(주 액션)만 다른 규칙을 타서 한 줄 안에서 40 과 36 이 섞였다. */
.cfg-row .btn{ min-height:36px }
.acts .btn.gold, .hist-item .btn.gold, table .btn.gold{ min-height:34px }
.toolbar .btn.gold, .search-bar .btn.gold{ min-height:40px }
@media (max-width:900px){
  .acts .btn.gold, .hist-item .btn.gold, table .btn.gold{ min-height:40px }
  .cfg-row .btn{ min-height:42px }
}
@media (max-width:900px){
  .btn{ min-height:42px }
  .acts .btn, .hist-item .btn, table .btn{ min-height:40px }
  .toolbar .btn{ min-height:44px }
}

/* ══════════════════════════════════════════════════════════════
   [2] 되돌릴 수 없는 동작 — 글자만 붉게가 아니라 테두리까지
   ══════════════════════════════════════════════════════════════ */
.btn.btn-danger{
  border:1px solid var(--danger) !important;
  color:var(--danger) !important;
  font-weight:600;
}
.btn.btn-danger::before{ background:var(--danger) !important }
.btn.btn-danger:hover{ color:var(--bg) !important }
.row-menu button.danger-txt{ border-top:1px solid var(--line); margin-top:var(--s1); padding-top:var(--s2) }

/* ══════════════════════════════════════════════════════════════
   [3][10] 접이식 블록
   ══════════════════════════════════════════════════════════════ */
.cfg-fold{ border-top:1px solid var(--line); margin-top:var(--s4); padding-top:var(--s3) }
.cfg-fold > summary{
  cursor:pointer; list-style:none; padding:var(--s2) 0;
  font-size:var(--fs-sm); color:var(--ink-3); display:flex; gap:var(--s2);
  align-items:baseline; flex-wrap:wrap;
}
.cfg-fold > summary::-webkit-details-marker{ display:none }
.cfg-fold > summary::before{
  content:"▸"; color:var(--ink-4); font-size:var(--fs-xs);
  transition:transform var(--dur-1) var(--ease-out); display:inline-block;
}
.cfg-fold[open] > summary::before{ transform:rotate(90deg) }
.cfg-fold > summary b{ color:var(--ink); font-weight:600; font-size:var(--fs-md) }
.cfg-fold > summary span{ color:var(--ink-4); flex:1; min-width:180px; line-height:1.7 }
.cfg-fold > summary:hover b{ text-decoration:underline; text-underline-offset:3px }

.tb-fold{ display:inline-block }
.tb-fold > summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:0 var(--s4); border:1px solid var(--line-2); background:var(--bg);
  font-size:var(--fs-md); color:var(--ink-2); box-sizing:border-box;
}
.tb-fold > summary::-webkit-details-marker{ display:none }
.tb-fold > summary::after{ content:"▾"; font-size:var(--fs-xs); color:var(--ink-4) }
.tb-fold[open] > summary{ border-color:var(--ink); color:var(--ink) }
.tb-fold > summary:hover{ border-color:var(--ink-4) }
.tb-fold{ position:relative }
.tb-fold-in{
  position:absolute; z-index:60; margin-top:var(--s1);
  /* 도구 단추가 줄 맨 오른쪽에 있어, 왼쪽 기준으로 펼치면
     목록이 화면 밖으로 6px 넘어갔다. 오른쪽에 맞춰 편다. */
  right:0; left:auto;
  display:flex; flex-direction:column; gap:var(--s1);
  background:var(--bg); border:1px solid var(--ink); padding:var(--s2);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.28); min-width:150px;
}
.tb-fold-in .btn{ width:100%; justify-content:flex-start }
@media (max-width:900px){
  .tb-fold{ display:block; width:100% }
  .tb-fold > summary{ width:100%; justify-content:space-between }
  .tb-fold-in{ position:static; box-shadow:none; border-color:var(--line-2) }
}

/* ══════════════════════════════════════════════════════════════
   [8] 급여 명세서
   ══════════════════════════════════════════════════════════════ */

/* 근로 형태 — "✓ 3.3% 원천징수" 가 접혀 칸이 세로로 부풀었다.
   폭을 고정하면 이번엔 옆 칸(성명)을 덮어 버려서, 칸 안에서만
   늘어나게 두고 글자만 줄여 한 줄에 들어가게 한다. */
.seg{ width:100%; max-width:100%; min-width:0; box-sizing:border-box }
.seg-btn{
  white-space:nowrap; min-height:40px; box-sizing:border-box;
  padding:0 var(--s2); display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); letter-spacing:-.01em; min-width:0;
}
/* 근로 형태 칸만 조금 넓게 — 두 선택지가 한 줄에 들어가도록 */
#viewPay .grid > .field:has(.seg){ grid-column:span 2 }
@media (max-width:560px){
  #viewPay .grid > .field:has(.seg){ grid-column:auto }
  .seg{ flex-direction:column }
  .seg-btn{ white-space:normal }
  .seg-btn + .seg-btn{ border-left:none; border-top:1px solid var(--line-2) }
}

/* 공제 요율 — % 가 아래로 떨어지지 않게 한 줄로 묶는다 */
#dedFree table.items td:nth-child(2),
#dedEmp  table.items td:nth-child(2){
  display:flex; align-items:center; gap:var(--s2);
  white-space:nowrap; flex-wrap:nowrap;
}
.rate-in{
  width:72px !important; flex:0 0 72px;
  height:36px; box-sizing:border-box; text-align:right;
  padding:0 var(--s2) !important; margin:0;
}
#dedFree table.items td:nth-child(2) .muted,
#dedEmp  table.items td:nth-child(2) .muted{ flex:0 0 auto }

/* 품목 표 정렬 — 글자는 가운데, 숫자는 왼쪽.
   숫자를 오른쪽에 붙이면 옆 칸 글자와 붙어 읽기 나빴다. */
#viewEdit table.items input:not(.num),
#viewSet  table.items input:not(.num),
#viewPo   table.items input:not(.num),
table.items td input[data-k="name"],
table.items td input[data-k="cat"],
table.items td input[data-k="spec"],
table.items td input[data-k="pd"],
table.items td input[data-k="memo"],
table.items td input[data-k="etc"]{ text-align:center !important }

/* 숫자는 오른쪽 — 계산된 금액란(td.amount)과 같은 방향이라
   수량·단가·금액이 한 축으로 정렬된다. */
#viewEdit table.items input.num,
#viewSet  table.items input.num,
#viewPo   table.items input.num,
table.items input.num{ text-align:right !important; padding-right:var(--s3) }

/* 급여 명세서의 항목명은 문장에 가까워 왼쪽이 읽기 좋다 */
#payRows td:first-child input,
#dedRows td:first-child input{ text-align:left !important }

/* ══════════════════════════════════════════════════════════════
   [3] 환경 설정 — 카드가 알아서 짧은 쪽으로 흘러가게
   2열 격자는 카드 하나가 길면 반대쪽이 통째로 빈다.
   신문 단(column) 방식이면 길이에 따라 자동으로 나뉜다.
   ══════════════════════════════════════════════════════════════ */
#viewConfig .home-cols{
  display:block; column-count:2; column-gap:var(--s4);
}
#viewConfig .home-cols > .card{
  break-inside:avoid; page-break-inside:avoid;
  display:inline-block; width:100%; margin:0 0 var(--s4);
}
@media (max-width:1100px){
  #viewConfig .home-cols{ column-count:1 }
}

/* ══════════════════════════════════════════════════════════════
   [2] 되돌릴 수 없는 동작
   흑백 규칙이라 붉은색을 쓸 수 없다. 점선 테두리로 "보통 버튼이
   아니다" 를 알리고, 누를 때만 검게 찬다.
   ══════════════════════════════════════════════════════════════ */
.btn.btn-danger{
  background:transparent !important;
  border:1px dashed var(--ink) !important;
  color:var(--ink) !important;
  font-weight:600;
}
.btn.btn-danger::before{ content:none !important }
.btn.btn-danger:hover, .btn.btn-danger:focus-visible{
  border-style:solid !important;
  background:var(--ink) !important; color:var(--bg) !important;
}
.cfg-row.cfg-danger{
  border:1px dashed var(--line-2);
  padding:var(--s3) var(--s4);
  margin-top:var(--s3);
}
.cfg-row.cfg-danger .cfg-tx b::after{
  content:"되돌릴 수 없음"; display:inline-block; margin-left:var(--s2);
  font-size:var(--fs-xs); font-weight:500; color:var(--ink-4);
  border:1px solid var(--line-2); padding:1px 6px;
}
/* 목록의 ⋯ 메뉴 안 삭제 항목도 구분선으로 떼어 놓는다 */
.row-menu button.danger-txt{ color:var(--ink-2) }
.row-menu button.danger-txt::before{ content:"× "; color:var(--ink-4) }

/* ══════════════════════════════════════════════════════════════
   [3][4] 상호작용 4단계 — 기본 / 가리킴 / 누름 / 초점
   예전에는 :active 규칙이 앱 전체에 하나도 없어서, 눌러도 눌렸다는
   신호가 없었다. 모바일에는 가리킴이 없으니 이게 유일한 반응이다.
   흑백이라 색을 못 쓰므로 1px 눌림으로 표현한다.
   ══════════════════════════════════════════════════════════════ */
.btn:active:not(:disabled),
.nav-item:active, .nav-sec:active,
.tb-fold > summary:active, .cfg-fold > summary:active,
.row-menu button:active, .seg-btn:active,
.stat-card.clickable:active, .home-link:active,
.cal-cell:active, .modal-close:active, .row-del:active,
.side-dark:active, .help-btn:active, .co-btn:active{
  transform:translateY(1px);
  transition-duration:0s;   /* 누르는 순간은 즉시 */
}
/* 눌림이 레이아웃을 흔들지 않게 */
.btn, .nav-item, .nav-sec, .row-menu button, .seg-btn,
.stat-card.clickable, .home-link, .help-btn, .modal-close, .row-del{
  will-change:auto;
}

/* 지금까지 아무 전환도 없던 것들 — 클릭할 수 있는지조차 안 보였다 */
.hist-item{
  transition:border-color var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out);
}
.hist-item:hover{ border-color:var(--line-2) }
table.tbl tbody tr, table.items tbody tr{
  transition:background-color var(--dur-1) var(--ease-out);
}
table.tbl tbody tr:hover{ background:var(--panel) }
.badge, .mem-st, .no-badge{
  transition:background-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out);
}
.card{ transition:border-color var(--dur-1) var(--ease-out) }

/* 누를 수 있는 것과 없는 것을 손 모양으로 구분 */
.hist-item.home-link, .stat-card.clickable, .cal-cell[data-act]{ cursor:pointer }

/* ══════════════════════════════════════════════════════════════
   [8] 진입·퇴장 — 어디서 나왔는지 보이게
   예전에는 배경만 페이드하고 패널은 그냥 나타났다.
   들어올 때만 8px 움직이고, 나갈 때는 페이드만 (되돌아가는 느낌 방지)
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .modal-bg.open > .modal{
    animation:panelIn var(--dur-2) var(--ease-out) both;
  }
  @keyframes panelIn{
    from{ opacity:0; transform:translateY(8px) }
    to{ opacity:1; transform:none }
  }
  .row-menu{ animation:popIn var(--dur-2) var(--ease-out) both }
  @keyframes popIn{
    from{ opacity:0; transform:translateY(-6px) }
    to{ opacity:1; transform:none }
  }
  .tb-fold[open] .tb-fold-in{ animation:popIn var(--dur-2) var(--ease-out) both }
  .tb-results{ animation:popIn var(--dur-1) var(--ease-out) both }
}

/* ══════════════════════════════════════════════════════════════
   [9] 접힘 / 펼침
   이번에 <details> 로 접은 곳이 여섯 군데인데 전부 즉시 튀어나왔다.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .cfg-fold[open] > *:not(summary),
  #memFormWrap:not([hidden]){
    animation:foldIn var(--dur-2) var(--ease-out) both;
  }
  @keyframes foldIn{
    from{ opacity:0; transform:translateY(-4px) }
    to{ opacity:1; transform:none }
  }
}
.cfg-fold > summary::before,
.tb-fold > summary::after{ transition:transform var(--dur-2) var(--ease-out) }

/* ══════════════════════════════════════════════════════════════
   [10] 깊이 — 무엇이 무엇 위에 있는지
   ══════════════════════════════════════════════════════════════ */
.card, .hist-item, table.tbl, .stat-card, .empty{ box-shadow:var(--elev-0) }
.row-menu, .tb-fold-in, .tb-results, .picker-pop{ box-shadow:var(--elev-1) }
.modal, #toast, #demoBg .modal, #keysBg .modal{ box-shadow:var(--elev-2) }

/* ══════════════════════════════════════════════════════════════
   [13] 흑백 강조 사다리
   색이 없으니 강조 수단은 굵기 → 크기 → 여백 → 테두리 → 채움
   다섯 가지뿐이다. 그 순서를 화면마다 다르게 쓰지 않도록 고정한다.
     lv-1 (가장 강함) : 검정 채움      — 화면당 최대 1개
     lv-2             : 검은 테두리
     lv-3             : 굵은 글씨
     lv-4 (보조)      : 회색 글씨
   ══════════════════════════════════════════════════════════════ */
.em-1{ background:var(--ink); color:var(--bg); border:1px solid var(--ink) }
.em-2{ background:var(--bg); color:var(--ink); border:1px solid var(--ink) }
.em-3{ color:var(--ink); font-weight:700 }
.em-4{ color:var(--ink-4); font-weight:500 }
body.dark .em-1{ background:var(--ink); color:var(--bg) }

/* ══════════════════════════════════════════════════════════════
   [6] 값이 바뀐 순간을 알린다 — 금액처럼 눈으로 확인하는 숫자
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .num-changed{ animation:numBump var(--dur-3) var(--ease-out) }
  @keyframes numBump{
    0%{ transform:scale(1) }
    38%{ transform:scale(1.045); font-weight:800 }
    100%{ transform:scale(1) }
  }
}
/* 숫자 강조(numBump)용 inline-block — td.amount 까지 걸리면
   표 셀이 행에서 떠 버린다. 표 밖의 금액 표시에만 준다. */
.num-fmt, span.amount, .stat-card .v{ display:inline-block; transform-origin:right center }
td.amount{ display:table-cell }
.totals .trow .num-fmt{ transform-origin:right center }

/* ══════════════════════════════════════════════════════════════
   [5] 방금 바꾼 줄 — CSS 는 있었는데 한 번도 불리지 않았다
   ══════════════════════════════════════════════════════════════ */
.row-flash{ animation:rowFlash 1.6s var(--ease-out) }
@keyframes rowFlash{
  0%{ box-shadow:inset 3px 0 0 var(--ink); background:var(--panel) }
  70%{ box-shadow:inset 3px 0 0 var(--ink); background:var(--panel) }
  100%{ box-shadow:inset 3px 0 0 transparent; background:transparent }
}
body.dark .row-flash{ animation:rowFlashDark 1.6s var(--ease-out) }
@keyframes rowFlashDark{
  0%{ box-shadow:inset 3px 0 0 #e7e7e7; background:#1f1f1f }
  70%{ box-shadow:inset 3px 0 0 #e7e7e7; background:#1f1f1f }
  100%{ box-shadow:inset 3px 0 0 transparent; background:transparent }
}

/* ══════════════════════════════════════════════════════════════
   [7] 되돌릴 수 없는 확인창은 다르게 보이게
   ══════════════════════════════════════════════════════════════ */
#askBg.ask-danger .modal{ border-top:3px dashed var(--ink) }
#askBg.ask-danger #askOk{
  background:transparent !important; color:var(--ink) !important;
  border:1px dashed var(--ink) !important; font-weight:600;
}
#askBg.ask-danger #askOk::before{ content:none !important }
#askBg.ask-danger #askOk:hover{
  background:var(--ink) !important; color:var(--bg) !important; border-style:solid !important;
}
#askBg.ask-danger #askMsg::before{
  content:"되돌릴 수 없는 작업"; display:block; margin-bottom:var(--s3);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; color:var(--ink-4);
}

/* ══════════════════════════════════════════════════════════════
   [11] 로딩 — 150ms 넘게 걸릴 때만. 짧으면 깜박임이 되어 산만하다.
   ══════════════════════════════════════════════════════════════ */
.skel{ display:block; background:var(--panel); position:relative; overflow:hidden }
.skel + .skel{ margin-top:var(--s2) }
.skel-row{ height:64px }
.skel-line{ height:12px; width:60% }
@media (prefers-reduced-motion:no-preference){
  .skel::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation:skelSweep 1.15s var(--ease-linear) infinite;
  }
  @keyframes skelSweep{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }
}
body.dark .skel{ background:#262626 }
body.dark .skel::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* ══════════════════════════════════════════════════════════════
   [12] 빈 상태 두 종류
   "아직 하나도 없음" 과 "조건에 맞는 게 없음" 은 다음에 할 일이 다르다.
   ══════════════════════════════════════════════════════════════ */
.empty{ padding:var(--s8) var(--s5) }
.empty .em-t{ font-size:var(--fs-lg); font-weight:600; color:var(--ink-2); margin-bottom:var(--s2) }
.empty .em-d{ font-size:var(--fs-sm); color:var(--ink-4); line-height:1.8; margin-bottom:var(--s4) }
.empty .em-a{ display:inline-flex; gap:var(--s2); flex-wrap:wrap; justify-content:center }
.empty.empty-filter{ border-style:solid; border-color:var(--line) }
.empty.empty-filter::before{ opacity:.28 }

/* ══════════════════════════════════════════════════════════════
   [13] 기간 토글 — 주 액션(검정 채움)과 구분되는 선택칸
   ══════════════════════════════════════════════════════════════ */
.btn.btn-seg{
  min-height:26px; padding:0 var(--s3);
  font-size:var(--fs-xs); font-weight:600;
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink-3);
}
.btn.btn-seg::before{ content:none !important }
.btn.btn-seg:hover{ border-color:var(--ink-4); color:var(--ink); background:var(--bg) }
.btn.btn-seg.on{
  border-color:var(--ink); color:var(--ink); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--ink);
}
body.dark .btn.btn-seg.on{ box-shadow:inset 0 -2px 0 #e7e7e7 }

/* ══════════════════════════════════════════════════════════════
   [7] 도장 — 모든 인쇄 문서에서 (인) 정중앙에 찍히도록 한 곳에서 확정
   문서마다 left:-12px, translate(-42%,-52%) 같은 값이 따로 있어
   서식별로 조금씩 어긋나 있었다.
   ══════════════════════════════════════════════════════════════ */
.stamp-wrap{
  position:relative !important; display:inline-block !important;
  padding:0 !important; margin-left:6px; vertical-align:middle;
  white-space:nowrap; line-height:1;
  /* 도장 폭만큼 줄 안에 자리를 잡아 종이 끝에서 잘리지 않게 한다 */
  min-width:60px; text-align:center;
}
.stamp-wrap .in{ position:relative; z-index:0; display:inline-block }
.stamp-wrap .stamp-img,
.p2-signrow .stamp-img,
.q2-signco .stamp-img,
#printDoc .stamp-wrap .stamp-img{
  position:absolute !important;
  left:50% !important; top:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%, -50%) !important;
  width:60px !important; height:60px !important;
  /* 전역 img max-width:100% 가 (인) 글자 폭(≈31px)으로 도장을 눌러
     지금까지 설정값보다 훨씬 작게 찍히고 있었다 — 실제 "작다"의 원인 */
  max-width:none !important; max-height:none !important;
  margin:0 !important;
  z-index:1; opacity:.9; object-fit:contain; pointer-events:none;
}
.q2-signco .stamp-wrap{ width:auto !important; height:auto !important }

/* ══════════════════════════════════════════════════════════════
   [5] 마우스를 올리면 글자가 사라지던 문제
   주 액션 버튼(.gold)에 color:var(--bg) !important 가 걸려 있어,
   흰 면이 쓸려 들어오는 순간 흰 글자 + 흰 배경이 되어 사라졌다.
   기본/올림 두 상태를 한 곳에서 확정한다.
   ══════════════════════════════════════════════════════════════ */
.btn.gold, .btn.primary, #mobileSaveBar .btn{
  background:var(--ink-2) !important;
  color:var(--bg) !important;
  border-color:var(--ink-2) !important;
}
.btn.gold:hover, .btn.primary:hover,
.btn.gold:focus-visible, .btn.primary:focus-visible,
#mobileSaveBar .btn:hover{
  background:var(--bg) !important;
  color:var(--ink) !important;
  border-color:var(--ink) !important;
}
.btn.gold:disabled, .btn.gold[aria-disabled="true"]{
  background:var(--panel) !important; color:var(--ink-4) !important; border-color:var(--line-2) !important;
}
/* 면(::before)은 글자 뒤에 깔린다. isolation:isolate 가 z-index:-1 을
   버튼 안에 가둬 주므로 <span> 으로 감싸지 않은 버튼도 글자가 보인다.
   (z-index 를 0 으로 올리면 면이 글자를 덮어 버린다) */
.btn{ isolation:isolate }
.btn::before{ z-index:-1 }
.btn > span, .btn > svg, .btn > b{ position:relative; z-index:1 }

/* ══════════════════════════════════════════════════════════════
   [1] 초점 테두리 — 굵은 검은 상자로 보이던 것
   테두리(1px) + 링(2px) + 간격(1px) 이 겹쳐 4px 짜리 상자가 됐다.
   공통 규칙: 링은 1.5px, 간격 0, 테두리는 링에 맡긴다.
   ══════════════════════════════════════════════════════════════ */
.app input:focus-visible,
.app select:focus-visible,
.app textarea:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible,
#authGate input:focus-visible,
table.items input:focus-visible,
table.tbl input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.totals input:focus-visible,
.search-bar input:focus-visible,
.modal-head input:focus-visible,
.tb-search input:focus-visible,
.sel-mini:focus-visible,
.inp:focus-visible, .sel:focus-visible,
.inp-mini:focus-visible, .rate-in:focus-visible{
  outline:1.5px solid var(--ink) !important;
  outline-offset:0 !important;
  border-color:var(--ink) !important;
  background:var(--bg) !important;
}
/* 버튼·링크 계열도 같은 굵기로 */
button:focus-visible, a:focus-visible,
[role="button"]:focus-visible, .cal-cell:focus-visible,
.pick-item:focus-visible, .stat-card:focus-visible,
.hb-row:focus-visible, .nav-item:focus-visible, .nav-sec:focus-visible{
  outline:1.5px solid var(--ink) !important;
  outline-offset:1px !important;
}
body.dark :focus-visible{ outline-color:#e7e7e7 !important }

/* ══════════════════════════════════════════════════════════════
   [9] 기간 토글 — 밑줄이 갑자기 나타나 보여서 뺀다.
   선택된 쪽은 테두리와 글자 굵기로만 구분한다.
   ══════════════════════════════════════════════════════════════ */
.btn.btn-seg.on{
  border-color:var(--ink); color:var(--ink); font-weight:700;
  background:var(--panel);
  box-shadow:none;
}
body.dark .btn.btn-seg.on{ background:#262626; box-shadow:none }

/* ══════════════════════════════════════════════════════════════
   직원 캘린더 — 누를 수 있는 날짜·일정
   ══════════════════════════════════════════════════════════════ */
.pc-cell.pc-add{ cursor:pointer }
.pc-cell.pc-add:hover{ background:var(--panel) }
.pc-cell.pc-add:active{ transform:translateY(1px); transition-duration:0s }
.pc-it{ cursor:pointer; transition:background-color var(--dur-1) var(--ease-out) }
.pc-it:hover{ background:var(--ink); color:var(--bg) }
.pc-it.lv{ border-left:2px solid var(--ink-4); padding-left:4px }
.pc-it.ev{ border-left:2px solid var(--ink-2); padding-left:4px }
.tm-cell .chip{ transition:background-color var(--dur-1) var(--ease-out) }
.tm-cell .chip:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.chip.lv{ border-style:dashed }

/* 일정 내용 모달 */
.peek-dl{ display:grid; grid-template-columns:76px 1fr; gap:var(--s2) var(--s4); margin:var(--s3) 0 }
.peek-dl dt{ color:var(--ink-4); font-size:var(--fs-sm); font-weight:600 }
.peek-dl dd{ margin:0; color:var(--ink); font-size:var(--fs-md); line-height:1.7; word-break:keep-all }

/* ══════════════════════════════════════════════════════════════
   캘린더 (v1.60)
   내 캘린더 · 회사 캘린더 · 직원 캘린더가 같은 모양을 쓴다.
   흑백이라 항목 종류는 색이 아니라 왼쪽 선의 굵기·모양으로 나눈다.
     ● 일정 = 채운 선   ■ 업무 = 굵은 선
     ○ 휴무 = 점선      ◆ 견적 마감 = 이중선
   ══════════════════════════════════════════════════════════════ */

/* ── 도구줄 ────────────────────────────────────────────────── */
.cal-toolbar{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  margin-bottom:var(--s4);
}
.cal-toolbar .ym{
  font-family:var(--mono); font-size:var(--fs-lg); font-weight:700;
  letter-spacing:.02em; min-width:190px; text-align:center;
}
.seg-wrap{ display:inline-flex; gap:0 }
.seg-wrap .btn-seg{ min-width:38px }
.seg-wrap .btn-seg + .btn-seg{ margin-left:-1px }
.cal-legend{ gap:var(--s4) }
.cal-legend span{ display:inline-flex; align-items:center; gap:var(--s2) }

/* ── 월 격자 ───────────────────────────────────────────────── */
.cal-grid{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  border:1px solid var(--line-2); border-right:none; border-bottom:none;
  background:var(--bg);
}
.cal-dow{
  padding:var(--s2) var(--s3); text-align:center;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-3);
  background:var(--panel);
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.cal-dow.sun{ color:var(--sun) } .cal-dow.sat{ color:var(--sat) }
.cal-cell{
  min-height:112px; padding:var(--s2);
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:3px; overflow:hidden;
  transition:background-color var(--dur-1) var(--ease-out);
}
.cal-cell.out{ background:var(--panel); opacity:.5 }
.cal-cell.can-add{ cursor:pointer }
.cal-cell.can-add:hover{ background:var(--panel) }
.cal-cell.can-add:active{ transform:none; background:var(--line) }
.cal-cell.today{ box-shadow:inset 0 0 0 2px var(--ink) }
.cal-day{ display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; margin-bottom:2px }
.cal-day .dnum{ font-size:var(--fs-md); font-weight:600; font-variant-numeric:tabular-nums }
.cal-cell.today .cal-day .dnum{ font-weight:800 }
.cal-cell.sun .cal-day .dnum, .cal-cell.hol .cal-day .dnum{ color:var(--sun) }
.cal-cell.sat .cal-day .dnum{ color:var(--sat) }
.cal-cell.out .cal-day .dnum{ color:var(--ink-4); font-weight:400 }
.hol-name{ font-size:var(--fs-xs); color:var(--sun); font-weight:600 }

/* ── 항목 칩 — 종류를 왼쪽 선으로 구분 ────────────────────── */
.cal-cell .chip, .tm-cell .chip, .wk-body .chip{
  display:block; width:100%; box-sizing:border-box;
  padding:2px var(--s2) 2px 6px;
  font-size:var(--fs-xs); line-height:1.5;
  background:var(--panel); color:var(--ink-2);
  border:none; border-left:2px solid var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; text-align:left;
  transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.cal-cell .chip:hover, .tm-cell .chip:hover, .wk-body .chip:hover{
  background:var(--ink); color:var(--bg); border-left-color:var(--ink);
}
.chip.c-sch{ border-left:2px solid var(--ink) }
.chip.c-ev { border-left:3px solid var(--ink-2) }
.chip.c-lv { border-left:2px dashed var(--ink-4); background:transparent; color:var(--ink-3) }
.chip.c-due{ border-left:3px double var(--ink-2); font-weight:600 }
.chip.done{ text-decoration:line-through; opacity:.5 }
.chip.more{
  background:transparent; border-left:none; color:var(--ink-4);
  font-weight:600; cursor:default; padding-left:var(--s2);
}
.chip.more:hover{ background:transparent; color:var(--ink-4) }
.chip.span.mid, .chip.span.end{ border-left-color:transparent; background:var(--line) }

/* ── 주 보기 ───────────────────────────────────────────────── */
.wk-grid{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  border:1px solid var(--line-2); border-right:none;
}
.wk-col{ border-right:1px solid var(--line-2); display:flex; flex-direction:column; min-height:280px }
.wk-col.today{ background:var(--panel) }
.wk-head{
  padding:var(--s3) var(--s2); text-align:center; cursor:pointer;
  border-bottom:1px solid var(--line-2); background:var(--panel);
  transition:background-color var(--dur-1) var(--ease-out);
}
.wk-col.today .wk-head{ background:var(--ink); color:var(--bg) }
.wk-head:hover{ background:var(--line) }
.wk-col.today .wk-head:hover{ background:var(--ink-2) }
.wk-head:active{ transform:translateY(1px); transition-duration:0s }
.wk-head b{ display:block; font-size:var(--fs-sm); font-weight:600 }
.wk-head span{ display:block; font-size:var(--fs-xl); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3 }
.wk-head i{ display:block; font-style:normal; font-size:var(--fs-xs); color:var(--sun) }
.wk-col.sun .wk-head b, .wk-col.sun .wk-head span{ color:var(--sun) }
.wk-col.sat .wk-head b, .wk-col.sat .wk-head span{ color:var(--sat) }
.wk-col.today .wk-head b, .wk-col.today .wk-head span, .wk-col.today .wk-head i{ color:var(--bg) }
.wk-body{ padding:var(--s2); display:flex; flex-direction:column; gap:3px; flex:1 }
.wk-none{ color:var(--ink-4); font-size:var(--fs-xs); text-align:center; padding-top:var(--s3) }

/* ── 일정 목록 (격자 아래) ─────────────────────────────────── */
.cl-row{
  display:grid; grid-template-columns:74px 20px minmax(0,1fr) minmax(0,34%);
  gap:var(--s3); align-items:center; cursor:pointer;
  padding:var(--s2); margin:0 calc(var(--s2) * -1);
  border-bottom:1px solid var(--line);
  transition:background-color var(--dur-1) var(--ease-out);
}
.cl-row:hover{ background:var(--panel) }
.cl-row:active{ transform:translateY(1px); transition-duration:0s }
.cl-row.done .cl-t{ text-decoration:line-through; opacity:.55 }
.cl-allday{ color:var(--ink-4); font-size:var(--fs-xs) }
.cl-m{ font-size:var(--fs-sm); color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right }
.mc-dot{ width:3px; height:3px }
.cl-row:last-child{ border-bottom:none }
.cl-row.today{ background:var(--panel) }
.cl-row.today .cl-d b{ font-weight:800 }
.cl-d{ display:flex; gap:var(--s2); align-items:baseline; font-variant-numeric:tabular-nums }
.cl-d b{ font-size:var(--fs-md); font-weight:700 }
.cl-d span{ font-size:var(--fs-xs); color:var(--ink-4) }
.cl-k{ color:var(--ink-3); font-size:var(--fs-xs); text-align:center }
.cl-t{ font-size:var(--fs-md); color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cl-t b{ font-variant-numeric:tabular-nums; color:var(--ink) }


/* ── 대시보드 미니 ─────────────────────────────────────────── */
.mc-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s3) }
.mc-head b{ font-size:var(--fs-md); font-weight:700 }
.mc-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px }
.mc-dow{ text-align:center; font-size:var(--fs-xs); color:var(--ink-4); font-weight:600; padding-bottom:var(--s1) }
.mc-dow.sun{ color:var(--sun) } .mc-dow.sat{ color:var(--sat) }
.mc-cell{
  position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); color:var(--ink-2); cursor:pointer;
  border:1px solid transparent; font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.mc-cell:hover{ background:var(--panel); border-color:var(--line-2) }
.mc-cell:active{ transform:translateY(1px); transition-duration:0s }
.mc-cell.out{ visibility:hidden; cursor:default }
.mc-cell.sun{ color:var(--sun) } .mc-cell.sat{ color:var(--sat) }
.mc-cell.today{ font-weight:800; border-color:var(--ink) }
.mc-cell.sel{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.mc-cell.sel.sun, .mc-cell.sel.sat{ color:var(--bg) }
.mc-dot{
  position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:4px; height:4px; background:var(--ink); border-radius:50%;
}
.mc-cell.sel .mc-dot{ background:var(--bg) }

.mc-day{ margin-top:var(--s4); border-top:1px solid var(--line); padding-top:var(--s3) }
.mc-day-h{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  font-size:var(--fs-md); font-weight:700; margin-bottom:var(--s2);
}
.mc-day-h .btn{ margin-left:auto }
.mc-today{
  font-size:var(--fs-xs); font-weight:600; color:var(--bg);
  background:var(--ink); padding:1px 7px;
}
.mc-it{
  display:flex; align-items:baseline; gap:var(--s2);
  padding:var(--s2) var(--s2) var(--s2) 0; cursor:pointer;
  border-bottom:1px solid var(--line); font-size:var(--fs-sm);
  transition:background-color var(--dur-1) var(--ease-out);
}
.mc-it:last-child{ border-bottom:none }
.mc-it:hover{ background:var(--panel) }
.mc-it:active{ transform:translateY(1px); transition-duration:0s }
.mc-k{ color:var(--ink-4); font-size:var(--fs-xs); width:12px; flex:none }
.mc-it b{ font-variant-numeric:tabular-nums; font-weight:700; flex:none }
.mc-allday{ color:var(--ink-4); font-size:var(--fs-xs); flex:none }
.mc-tx{ color:var(--ink-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mc-none{ color:var(--ink-4); font-size:var(--fs-sm); padding:var(--s3) 0 }

/* ── 어두운 화면 ───────────────────────────────────────────── */
body.dark .cal-dow, body.dark .cal-cell.out, body.dark .wk-head{ background:#1a1a1a }
body.dark .cal-grid, body.dark .cal-cell, body.dark .cal-dow,
body.dark .wk-grid, body.dark .wk-col, body.dark .wk-head{ border-color:#2b2b2b }
body.dark .cal-cell .chip, body.dark .wk-body .chip{ background:#262626; color:#c9c9c9 }
body.dark .cal-cell .chip:hover{ background:#e7e7e7; color:#0f0f0f }
body.dark .mc-dot{ background:#e7e7e7 }
body.dark .mc-cell.sel{ background:#e7e7e7; color:#0f0f0f }
body.dark .mc-cell.sel .mc-dot{ background:#0f0f0f }

/* ── 모바일 ────────────────────────────────────────────────── */
@media (max-width:900px){
  .cal-cell{ min-height:78px; padding:3px }
  .cal-cell .chip{ font-size:10px; padding:1px 3px 1px 4px }
  .cal-toolbar .ym{ min-width:0; flex:1; font-size:var(--fs-md) }
  .cal-legend{ width:100%; order:9 }
  .wk-grid{ grid-template-columns:1fr; border-right:1px solid var(--line-2) }
  .wk-col{ min-height:0; flex-direction:row; border-right:none; border-bottom:1px solid var(--line-2) }
  .wk-head{ width:74px; flex:none; border-bottom:none; border-right:1px solid var(--line-2); display:flex;
            flex-direction:column; justify-content:center }
  .wk-head span{ font-size:var(--fs-lg) }
  .wk-body{ min-height:44px }
  .cl-row{ grid-template-columns:56px 16px minmax(0,1fr); gap:var(--s2) }
  .cl-m{ display:none }
}

/* ── 인쇄 ──────────────────────────────────────────────────── */
.cal-doc-tbl{ width:100%; border-collapse:collapse; table-layout:fixed; margin-top:14px }
.cal-doc-tbl th{
  border:1px solid #1a1a1a; padding:5px 4px; font-size:11px; font-weight:700;
  background:#f4f4f4; text-align:center;
}
.cal-doc-tbl th.sun{ color:#000 } .cal-doc-tbl th.sat{ color:#000 }
.cal-doc-tbl td{ border:1px solid #b9b9b9; height:78px; vertical-align:top; padding:3px 4px }
.cal-doc-tbl td.out{ background:#fafafa }
.cal-doc-tbl td.today{ box-shadow:inset 0 0 0 1.5px #1a1a1a }
.cal-doc-tbl .cd-n{ font-size:11px; font-weight:700; margin-bottom:2px }
.cal-doc-tbl td.sun .cd-n, .cal-doc-tbl td.sat .cd-n{ text-decoration:underline }
.cal-doc-tbl .cd-h{ font-weight:500; font-size:9px; margin-left:3px }
.cal-doc-tbl .cd-i{
  font-size:9.5px; line-height:1.45; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:#333;
}
.cal-doc-h{
  font-size:12px; font-weight:700; letter-spacing:.06em; color:#5b5b5b;
  border-bottom:1px solid #d0d0d0; padding-bottom:5px; margin:20px 0 8px;
}
.cal-doc-list td, .cal-doc-list th{ font-size:10.5px }
@media print{
  .cal-doc-tbl{ page-break-inside:avoid }
  .cal-doc-list{ page-break-before:auto }
}

/* ══════════════════════════════════════════════════════════════
   모바일 달력 — 예전에는 620px 최소 폭이 걸려 있어 토요일이 잘리고
   가로로 밀어야 보였다. 한 화면에 일곱 칸이 다 들어오게 한다.
   내용이 좁아지는 만큼 칩은 점으로 줄이고, 자세한 것은 아래
   "일정 목록" 과 주 보기에서 본다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .cal-grid, .x-scroll > .cal-grid{ min-width:0 !important }
  #viewMycal .x-scroll, #viewCal .x-scroll,
  #viewMycal .view:has(> .cal-grid), .view:has(> .cal-grid){ overflow-x:visible }
  #myCalBody .cal-cell, #calGrid .cal-cell{ min-height:64px; padding:2px 1px }
  #myCalBody .cal-day .dnum, #calGrid .cal-day .dnum{ font-size:11px }
  #myCalBody .hol-name, #calGrid .hol-name{ display:none }
  /* 칩은 글자 대신 표시선만 — 좁은 칸에서 글자는 어차피 안 읽힌다 */
  #myCalBody .cal-cell .chip, #calGrid .cal-cell .chip{
    height:5px; padding:0; font-size:0; overflow:hidden;
    background:var(--ink-4); border-left:none; margin-top:1px;
  }
  #myCalBody .cal-cell .chip.c-lv, #calGrid .cal-cell .chip.c-lv{ background:var(--line-2) }
  #myCalBody .cal-cell .chip.c-ev, #calGrid .cal-cell .chip.c-ev{ background:var(--ink-2) }
  #myCalBody .cal-cell .chip.c-sch, #calGrid .cal-cell .chip.c-sch{ background:var(--ink) }
  #myCalBody .cal-cell .chip.more, #calGrid .cal-cell .chip.more{ display:none }
  .cal-dow{ padding:var(--s1) 0; font-size:11px }
  /* 도구줄 — 좁은 화면에서 연월이 세 줄로 접히던 것 */
  .cal-toolbar{ gap:var(--s2) }
  .cal-toolbar .ym{
    order:-1; width:100%; flex:none; text-align:left;
    white-space:nowrap; font-size:var(--fs-lg);
  }
  .cal-toolbar .cal-nav{ flex:none }
  .cal-toolbar .btn{ padding:0 var(--s3) }
  .cal-toolbar .cal-print{ margin-left:auto !important }
  .cal-grid{ border-right:1px solid var(--line-2) }
}

/* ══════════════════════════════════════════════════════════════
   [2] 대시보드 미니 캘린더 — 카드 하나를 다 먹을 만큼 컸다.
   격자를 작게 줄이고, 아래 일정 목록에 자리를 넘긴다.
   ══════════════════════════════════════════════════════════════ */
/* 카드 폭을 다 쓴다 — 격자는 왼쪽, 고른 날의 일정은 오른쪽.
   예전에는 340px 로 묶어 두어 오른쪽 절반이 빈 채로 남았다. */
#dashMini{
  display:grid;
  grid-template-columns:minmax(230px, 300px) minmax(0, 1fr);
  grid-template-areas:"head day" "grid day";
  column-gap:var(--s6); row-gap:var(--s2);
  align-content:start; align-items:start;
}
#dashMini .mc-head{ grid-area:head; margin-bottom:0 }
#dashMini .mc-head b{ font-size:var(--fs-sm) }
#dashMini .mc-grid{ grid-area:grid; gap:1px }
#dashMini .mc-cell{ aspect-ratio:auto; height:28px; font-size:var(--fs-xs); border-width:1px }
#dashMini .mc-dow{ font-size:10px; padding-bottom:2px }
#dashMini .mc-dot{ width:3px; height:3px; bottom:2px }
#dashMini .mc-day{
  grid-area:day; margin-top:0; padding-top:0; border-top:none;
  border-left:1px solid var(--line); padding-left:var(--s5); min-width:0;
  align-self:stretch;
}
#dashMini .mc-day-h{ font-size:var(--fs-sm); margin-bottom:var(--s2) }
#dashMini .mc-it{ padding:6px var(--s2) 6px 0; font-size:var(--fs-sm) }
#dashMini .mc-none{ font-size:var(--fs-sm); padding:var(--s2) 0 }
body.dark #dashMini .mc-day{ border-left-color:#2b2b2b }
@media (max-width:640px){
  #dashMini{ display:block }
  #dashMini .mc-cell{ height:32px; font-size:var(--fs-sm) }
  #dashMini .mc-day{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:var(--s2); margin-top:var(--s3) }
}

/* 회사 캘린더에 회원 일정이 함께 들어오면서 칸이 빽빽해졌다 */
#calGrid .cal-cell{ min-height:104px }

/* 주소·계좌는 다른 칸보다 훨씬 길다. 한 줄에 다 보이게 넓힌다. */
.grid > .field:has(#sAddr),
.grid > .field:has(#sBank),
.grid > .field:has(#setSAddr),
.grid > .field:has(#poSAddr),
.grid > .field:has(#mcAddr),
.grid > .field:has(#mcBank){ grid-column:span 2 }
@media (max-width:900px){
  .grid > .field:has(#sAddr),
  .grid > .field:has(#sBank),
  .grid > .field:has(#setSAddr),
  .grid > .field:has(#poSAddr),
  .grid > .field:has(#mcAddr),
  .grid > .field:has(#mcBank){ grid-column:auto }
}

/* ══════════════════════════════════════════════════════════════
   글자 인상 다듬기 (v1.80)
   큰 제목은 살짝 조이고, 표 머리글은 살짝 벌려 위계를 또렷하게.
   ══════════════════════════════════════════════════════════════ */
.view-head h1{ letter-spacing:-.02em }
.view-head .lead{ color:var(--ink-3) }
.card > h2{ letter-spacing:-.01em }
table.items thead th, table.tbl thead th{ letter-spacing:.03em }
.stat-card .v, .num-fmt, .amount, .hist-item .amt{ font-variant-numeric:tabular-nums }
.totals .trow.grand .num-fmt{ letter-spacing:-.01em }

/* 품목 표 — 계산된 금액과 삭제 단추가 위아래로 흩어져 있었다.
   칸 안의 모든 내용은 세로 가운데로 모은다. */
table.items td, table.items th{ vertical-align:middle }
table.items td.amount{ vertical-align:middle; padding-right:var(--s3) }

/* ══════════════════════════════════════════════════════════════
   v1.90 — 아름다움의 층
   ══════════════════════════════════════════════════════════════ */
:root{ --ease-spring:cubic-bezier(.3,1.35,.45,1) }

/* ── [버그] 다크 호버 — body.dark .btn(0,2,1) 이 .btn:hover(0,2,0) 를
   이겨 흰 면 위에 흰 글자가 됐다. 다크의 호버 글자색을 확정한다. ── */
body.dark .btn:not(.gold):not(.primary):not(.btn-seg):not(.btn-txt):not(.btn-danger):hover{
  color:#0f0f0f !important;
}
body.dark .btn:not(.gold):not(.primary):hover::before{ background:#e7e7e7 }
body.dark .btn.btn-txt:hover{ color:#f2f2f2 !important }
body.dark .btn.btn-seg:hover{ color:#f2f2f2 !important }
body.dark .tb-fold > summary:hover{ color:#f2f2f2 }

/* ── [1] 로그인 스플릿 ─────────────────────────────────────── */
.ag-side{ display:none }
@media (min-width:1060px){
  #authGate{ padding:0; align-items:stretch; justify-content:flex-start; gap:0 }
  .ag-side{
    display:flex; flex:1.08; min-width:0;
    background:#0a0a0a; color:#fff;
    flex-direction:column; justify-content:space-between;
    padding:52px 56px; position:relative; overflow:hidden;
  }
  #authGate .ag-box{ margin:auto }
}
.ag-side-top{ display:flex; align-items:center; gap:12px }
.ag-side-mark{
  width:34px; height:34px; border:1.5px solid #fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:14px;
}
.ag-side-co{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:rgba(255,255,255,.55) }
.ag-side-word{
  font-size:clamp(72px, 8.6vw, 128px); font-weight:800; line-height:.94;
  letter-spacing:.01em; color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.9);
  user-select:none;
}
.ag-side-word b{ display:block; color:#fff; -webkit-text-stroke:0 }
.ag-side-tag{ font-size:15px; color:rgba(255,255,255,.72); letter-spacing:.01em; margin-top:18px }
.ag-side-foot{
  display:flex; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:rgba(255,255,255,.38); border-top:1px solid rgba(255,255,255,.16); padding-top:16px;
}
.ag-side::after{
  content:"61"; position:absolute; right:-38px; bottom:-84px;
  font-size:340px; font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09);
  pointer-events:none; user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .ag-side-top, .ag-side-word, .ag-side-tag, .ag-side-foot{
    animation:agUp .5s var(--ease-out) backwards;
  }
  .ag-side-word{ animation-delay:.06s } .ag-side-tag{ animation-delay:.12s } .ag-side-foot{ animation-delay:.18s }
  #agBox > *{ animation:agUp .42s var(--ease-out) backwards }
  #agBox > *:nth-child(1){ animation-delay:.05s }
  #agBox > *:nth-child(2){ animation-delay:.09s }
  #agBox > *:nth-child(3){ animation-delay:.13s }
  #agBox > *:nth-child(4){ animation-delay:.17s }
  #agBox > *:nth-child(5){ animation-delay:.21s }
  #agBox > *:nth-child(6){ animation-delay:.25s }
  #agBox > *:nth-child(7){ animation-delay:.29s }
  @keyframes agUp{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
}

/* ── [2] 숫자 타이포 — ₩ 작고 연하게, 숫자는 크게 ──────────── */
.cur{
  font-size:.68em; font-weight:600; color:var(--ink-4);
  margin-right:.18em; vertical-align:.08em; letter-spacing:0;
}
.stat-card .v{ font-size:30px; letter-spacing:-.025em; line-height:1.15 }
.stat-card.primary .v{ font-size:30px }
.totals .trow.grand .num-fmt{ font-size:19px; letter-spacing:-.02em }
@media (max-width:900px){ .stat-card .v{ font-size:26px } }

/* ── [3] 카드 스태거 등장 ──────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .view.active > .card, .view.active > .home-cols > .card,
  #homeBody > .card, #homeBody .home-cols > .card,
  #homeBody .stat-grid > .stat-card, #statBody > .card{
    animation:cardIn var(--dur-3) var(--ease-out) backwards;
  }
  .view.active > .card:nth-child(2), #homeBody > *:nth-child(2) > .card, #homeBody .stat-grid > .stat-card:nth-child(2){ animation-delay:.03s }
  .view.active > .card:nth-child(3), #homeBody > *:nth-child(3) > .card, #homeBody .stat-grid > .stat-card:nth-child(3){ animation-delay:.06s }
  .view.active > .card:nth-child(4), #homeBody > *:nth-child(4) > .card, #homeBody .stat-grid > .stat-card:nth-child(4){ animation-delay:.09s }
  .view.active > .card:nth-child(n+5), #homeBody > *:nth-child(n+5) > .card{ animation-delay:.12s }
  @keyframes cardIn{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
}

/* ── [4] 호버 부양 — 들리는 느낌 ───────────────────────────── */
.hist-item, .stat-card, .cl-row, .hb-row.home-link{
  transition:border-color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out);
}
.hist-item:hover, .stat-card:hover, .stat-card.clickable:hover{
  transform:translateY(-1px);
  box-shadow:var(--elev-1);
}
.stat-card.clickable:active, .hist-item:active{ transform:translateY(0); box-shadow:none; transition-duration:0s }

/* ── [5] 크롭 마크 — 인쇄 회사의 서명 ──────────────────────── */
.card{ position:relative }
.card::before, .card::after{
  content:""; position:absolute; width:9px; height:9px;
  opacity:0; transition:opacity var(--dur-2) var(--ease-out);
  pointer-events:none; z-index:2;
}
.card::before{ top:-1px; left:-1px; border-top:1.5px solid var(--ink); border-left:1.5px solid var(--ink) }
.card::after{ bottom:-1px; right:-1px; border-bottom:1.5px solid var(--ink); border-right:1.5px solid var(--ink) }
.card:hover::before, .card:hover::after{ opacity:1 }
@media (hover:none){ .card::before, .card::after{ content:none } }

/* ── [6] 사이드바 인디케이터 ───────────────────────────────── */
#sideNavList{ position:relative }
#navInd{
  position:absolute; left:0; width:3px; background:var(--ink);
  transition:top var(--dur-2) var(--ease-spring), height var(--dur-2) var(--ease-out),
             opacity var(--dur-1) var(--ease-out);
  pointer-events:none; opacity:0; z-index:3;
}
.side-nav .nav-item.active, #sideNavList .nav-item.active{ box-shadow:none !important }
body.dark #navInd{ background:#f2f2f2 }

/* ── [7] 모달 스프링 + 배경 블러 ───────────────────────────── */
.modal-bg.open{ backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px) }
@media (prefers-reduced-motion:no-preference){
  .modal-bg.open > .modal{
    animation:panelSpring var(--dur-3) var(--ease-spring) both;
  }
  @keyframes panelSpring{
    from{ opacity:0; transform:translateY(9px) scale(.985) }
    to{ opacity:1; transform:none }
  }
  .row-menu{ animation:popSpring var(--dur-2) var(--ease-spring) both }
  @keyframes popSpring{
    from{ opacity:0; transform:translateY(-5px) scale(.985) }
    to{ opacity:1; transform:none }
  }
}

/* ── [8] 다크 크로스페이드 ─────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after{
    transition:background-color var(--dur-3) var(--ease-out),
               color var(--dur-3) var(--ease-out),
               border-color var(--dur-3) var(--ease-out),
               box-shadow var(--dur-3) var(--ease-out) !important;
  }
}

/* ── [9] 토스트 체크 드로잉 ────────────────────────────────── */
.tchk{
  width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  stroke:var(--bg); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.tchk path{ stroke-dasharray:16; stroke-dashoffset:16 }
#toast.show .tchk path{ animation:chkDraw .3s var(--ease-out) .08s forwards }
@keyframes chkDraw{ to{ stroke-dashoffset:0 } }

/* ── [10] 차트 마무리 — 당월 값 라벨을 주인공으로 ──────────── */
.bars .bar.cur .val{ font-size:13px; font-weight:800; color:var(--ink) }
.bars .bg-line{ opacity:.8 }
.bars .bg-line span{ font-weight:500 }

/* ── [11] 목록 액션 조용히 — 행에 손이 갔을 때만 또렷하게 ──── */
@media (hover:hover){
  .hist-item .acts .btn, .hist-item .btn-more{
    opacity:.58; transition:opacity var(--dur-1) var(--ease-out),
      color var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out),
      transform 0s;
  }
  .hist-item:hover .acts .btn, .hist-item:focus-within .acts .btn,
  .hist-item:hover .btn-more, .hist-item:focus-within .btn-more{ opacity:1 }
}

/* ── [12] 문서번호 스탬프 ──────────────────────────────────── */
#qNo, #setNo, #poNo{
  font-family:var(--mono); font-weight:600; letter-spacing:.08em;
  color:var(--ink-2);
}

/* ── [13] 화면 전환 스윕 ───────────────────────────────────── */
.topbar{ position:relative }
#viewSweep{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:left center;
  pointer-events:none; opacity:0; z-index:5;
}
@media (prefers-reduced-motion:no-preference){
  #viewSweep.run{ animation:sweepX .32s var(--ease-out) forwards }
  @keyframes sweepX{
    0%{ transform:scaleX(0); opacity:1 }
    70%{ transform:scaleX(1); opacity:1 }
    100%{ transform:scaleX(1); opacity:0 }
  }
}
body.dark #viewSweep{ background:#f2f2f2 }

/* ── [G] 월간 리포트 — 제목이 두 줄로 접히고 날짜가 어색하게 꺾였다 ── */
.doc-rpt .doc-head{ align-items:flex-start }
.doc-rpt .t-en{ font-size:10px; letter-spacing:.3em }
.doc-rpt .t-ko{ font-size:23px; letter-spacing:.16em; white-space:nowrap }
.doc-rpt .brand .nm{ white-space:nowrap }
.doc-rpt .brand .desc{ white-space:nowrap; font-size:10px; letter-spacing:.08em }
.doc-rpt .doc-greet{ font-size:11px; color:#5b5b5b }
.doc-rpt h4{ page-break-after:avoid }

/* ══════════════════════════════════════════════════════════════
   [F] 로그인 — 5:5 화이트
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1060px){
  .ag-side{ flex:1 }
  #authGate .ag-box{ flex:1; margin:auto }
}
.ag-side{
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(10,10,10,.045) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(10,10,10,.045) 63px 64px),
    var(--bg);
  color:var(--ink);
  border-right:1px solid var(--line);
}
.ag-side-mark{ border-color:var(--ink); color:var(--ink) }
.ag-side-co{ color:var(--ink-4) }
.ag-side-word{
  position:relative; z-index:2;
  -webkit-text-stroke:1.5px rgba(10,10,10,.85);
}
.ag-side-word b{ color:var(--ink); -webkit-text-stroke:0 }
.ag-side-tag{ color:var(--ink-3) }
.ag-side-foot{ color:var(--ink-4); border-top-color:var(--line-2) }
.ag-side::after{ -webkit-text-stroke:1px rgba(10,10,10,.07) }

/* 떠 있는 문서들 — 이 회사가 만드는 것(견적서·정산서·발주서) */
.ag-art{ position:relative }
.ag-doc{
  position:absolute; background:var(--bg);
  border:1px solid var(--line-2);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.22);
  padding:14px 12px; z-index:1;
}
.ag-doc .l{
  display:block; height:5px; background:var(--line);
  margin-bottom:7px;
}
.ag-doc .l:first-child{ background:var(--ink-3); height:6px }
.ag-doc .w4{width:40%} .ag-doc .w5{width:50%} .ag-doc .w6{width:60%}
.ag-doc .w7{width:70%} .ag-doc .w8{width:80%} .ag-doc .w9{width:92%}
.ag-doc .st{
  position:absolute; right:10px; bottom:8px; width:16px; height:16px;
  border:1.5px solid var(--ink-2); opacity:.75;
}
.ag-doc.d1{ width:150px; right:6%;  top:-150px; transform:rotate(2deg) }
.ag-doc.d2{ width:120px; right:26%; top:-64px;  transform:rotate(-3deg) }
.ag-doc.d3{ width:100px; right:0%;  top:16px;   transform:rotate(-1deg); opacity:.8 }
@media (prefers-reduced-motion:no-preference){
  .ag-doc{ animation:docFloat 7s var(--ease-out) infinite alternate }
  .ag-doc.d2{ animation-duration:8.5s; animation-delay:.8s }
  .ag-doc.d3{ animation-duration:9.5s; animation-delay:1.6s }
  @keyframes docFloat{
    from{ translate:0 0 }
    to{ translate:0 -10px }
  }
  /* 재단선이 천천히 그려진다 */
  .ag-side-mark{ position:relative }
  .ag-side::before{
    content:""; position:absolute; left:56px; right:56px; top:118px;
    height:1px; background:var(--line-2);
    transform:scaleX(0); transform-origin:left center;
    animation:ruleDraw 1.1s var(--ease-out) .3s forwards;
  }
  @keyframes ruleDraw{ to{ transform:scaleX(1) } }
}
body.dark .ag-side{
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(242,242,242,.05) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(242,242,242,.05) 63px 64px),
    #0f0f0f;
}
body.dark .ag-side-word{ -webkit-text-stroke:1.5px rgba(242,242,242,.85) }
body.dark .ag-side::after{ -webkit-text-stroke:1px rgba(242,242,242,.08) }
body.dark .ag-doc{ background:#1a1a1a }

/* ══════════════════════════════════════════════════════════════
   [D][E] 캘린더 — 피로감 없는 달력
   구글 캘린더의 문법을 빌린다: 안쪽 선은 옅게, 오늘은 날짜 숫자만
   또렷하게, 기간 일정은 칸 여백을 넘어 이어지는 막대로.
   ══════════════════════════════════════════════════════════════ */
.cal-grid{ border-color:var(--line-2) }
.cal-grid .cal-cell, .cal-grid .cal-dow{ border-right-color:var(--line); border-bottom-color:var(--line) }
.cal-dow{ background:var(--bg); font-size:var(--fs-xs); letter-spacing:.06em; padding:var(--s2) 0 }
.cal-cell{ min-height:116px; padding:var(--s1) var(--s2) var(--s2) }
.cal-cell.sun, .cal-cell.hol{ background:#fcfcfc }
.cal-cell.sat{ background:#fcfcfc }
.cal-cell.out{ background:var(--panel); opacity:.45 }

/* 오늘 — 상자 테두리 대신 날짜 숫자를 채운다 (시선이 한 점으로) */
.cal-cell.today{ box-shadow:none; background:var(--bg) }
.cal-cell.today .cal-day .dnum{
  background:var(--ink); color:var(--bg);
  padding:1px 6px; margin-left:-3px; font-weight:700;
}
.cal-cell.today.sun .cal-day .dnum, .cal-cell.today.sat .cal-day .dnum{ color:var(--bg) }

/* 기간 일정 — 끊김 없는 막대. 칸 안쪽 여백과 경계선(1px)까지 덮어
   날짜 사이가 이어져 보인다. */
.cal-cell .chip.span{
  background:var(--ink-2); color:var(--bg);
  border-left:none; font-weight:600;
  height:20px; line-height:20px; padding:0 var(--s2);
  margin-left:calc(var(--s2) * -1 - 1px);
  margin-right:calc(var(--s2) * -1 - 1px);
  overflow:hidden;
}
.cal-cell .chip.span.start{ margin-left:0; border-left:3px solid var(--ink) }
.cal-cell .chip.span.end{ margin-right:0 }
.cal-cell .chip.span:hover{ background:var(--ink); color:var(--bg) }
body.dark .cal-cell .chip.span{ background:#c9c9c9; color:#0f0f0f }
body.dark .cal-cell .chip.span.start{ border-left-color:#f2f2f2 }

/* 일반 칩 — 높이·간격 통일, 검정 밀도 낮추기 */
.cal-cell .chip{ height:20px; line-height:18px; box-sizing:border-box }
.cal-cell .chip.c-sch{ border-left-color:var(--ink-2) }
.chip.more{
  border:none; background:none; color:var(--ink-4);
  font-weight:600; cursor:pointer; text-align:left;
  padding:0 var(--s2); height:18px; line-height:18px;
  font-family:inherit; font-size:var(--fs-xs);
}
.chip.more:hover{ color:var(--ink); background:none; text-decoration:underline; text-underline-offset:2px }

body.dark .cal-cell.sun, body.dark .cal-cell.sat, body.dark .cal-cell.hol{ background:#131313 }
body.dark .cal-cell.today .cal-day .dnum{ background:#f2f2f2; color:#0f0f0f }

/* [B] 일정 추가의 직원 선택 */
.day-assign{ margin-top:var(--s3) }
.day-assign .da-t{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); margin-bottom:var(--s2) }
.day-assign .da-t span{ font-weight:400; color:var(--ink-4) }
.da-list{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.da-item{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-2); padding:5px 10px;
  font-size:var(--fs-sm); color:var(--ink-2); cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.da-item:hover{ border-color:var(--ink-4) }
.da-item:has(input:checked){ border-color:var(--ink); background:var(--panel); font-weight:600; color:var(--ink) }
.da-item input{ margin:0 }

/* ── [F] 로그인 5:5 확정 — 오른쪽도 화이트 오픈 폼 ──────────────
   max-width:392 카드가 절반을 못 채워 왼쪽이 74% 를 먹고 있었다.
   양쪽을 정확히 절반으로 나누고, 오른쪽은 회색 카드 대신
   흰 바탕에 열린 폼으로 둔다. */
#authGate{ background:var(--bg) }
@media (min-width:1060px){
  .ag-side{ flex:0 0 50%; max-width:50% }
  #authGate .ag-box{
    flex:1 1 50%; max-width:none; width:auto; margin:0;
    border:none; box-shadow:none; background:var(--bg);
    align-items:center; justify-content:center;
    padding:48px 40px;
  }
  #authGate .ag-box > *{ width:380px; max-width:100% }
  #authGate .ag-foot{
    border-top:1px solid var(--line); margin-top:28px; padding-top:14px;
  }
}
body.dark #authGate{ background:#0f0f0f }
body.dark #authGate .ag-box{ background:#0f0f0f }