:root{
    --navy-1:#1e293b;
    --navy-2:#334155;
    --navy-3:#3f4f66;
    --blue:#2a78d6;
    --blue-dark:#184f95;
    --aqua:#1baf7a;
    --orange:#eb6834;
    --red:#e34948;
    --yellow:#eda100;
    --violet:#4a3aa7;
    --surface:#fcfcfb;
    --page:#f2f4f7;
    --ink:#0b0b0b;
    --ink-2:#52514e;
    --muted:#898781;
    --hairline:#e1e0d9;
    --border:rgba(11,11,11,0.10);
    --good:#0ca30c;
    --warn:#fab219;
    --crit:#d03b3b;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    /* Pretendard는 숫자 폭이 일정해 금액 표가 훨씬 읽기 쉽다.
       못 받아오면 아래 시스템 글꼴로 그대로 표시된다 (기능에는 영향 없음) */
    font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
    background:var(--page);
    color:var(--ink);
    display:flex;
    min-height:100vh;
  }
  /* ---------- Sidebar ---------- */
  .sidebar{
    width:266px;
    flex-shrink:0;
    background:linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px 14px;
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  /* 메뉴 아이콘과 톤을 맞춰, 밝은 흰 박스 대신 은은한 반투명 박스 + 선 아이콘 */
  .brand-icon{
    width:34px;height:34px;border-radius:10px;
    background:rgba(255,255,255,0.10);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .brand-icon svg{
    width:19px;height:19px;
    fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .brand-text{min-width:0;flex:1;}
  .brand-text .t1{font-weight:600;font-size:13.5px;line-height:1.3;color:#fff;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .nav{padding:10px 10px 18px;flex:1;overflow-y:auto;}
  .nav-item{
    display:flex;align-items:center;gap:11px;
    padding:9px 12px;margin-bottom:2px;
    border-radius:8px;
    font-size:14px;font-weight:400;
    color:#cbd5e1;
    text-decoration:none;
    cursor:default;
    transition:background-color .15s ease, color .15s ease;
  }
  /* 아이콘은 배경 박스 없이 선 아이콘만 (이모지의 알록달록함을 없애고 톤을 맞춤) */
  .nav-item .ic{
    width:19px;height:19px;flex-shrink:0;
    fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;
    opacity:0.75;
  }
  .nav-item.active .ic{opacity:1;}
  .nav-newwin{
    margin-left:auto;flex-shrink:0;
    width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;
    border-radius:5px;
    font-size:11px;
    color:rgba(255,255,255,0.45);
    opacity:0;transition:opacity .15s;
  }
  .nav-item:hover .nav-newwin, .nav-item.active .nav-newwin{ opacity:1; }
  .nav-newwin:hover{ background:rgba(255,255,255,0.18); color:#fff; }
  .nav-item.active{
    background:var(--blue);
    color:#fff;
    font-weight:600;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .side-nav-item{cursor:pointer;}
  .side-nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
  .side-nav-item.active:hover{background:var(--blue);}
  .nav-item .cnt-badge{
    margin-left:auto;background:rgba(255,255,255,0.14);color:#fff;
    border-radius:20px;padding:1px 8px;font-size:10.5px;font-weight:700;
  }
  .nav-section-title{
    padding:0 12px 8px;margin-top:20px;
    font-size:11px;font-weight:600;letter-spacing:0.05em;
    color:#94a3b8;
  }
  /* ---------- Main ---------- */
  .main{flex:1;min-width:0;}
  .topbar{
    background:#fff;
    border-bottom:1px solid var(--hairline);
    padding:16px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;top:0;z-index:20;
  }
  /* top-right(사용자 배지+로그아웃)는 줄어들지 않으므로(flex-shrink:0), 좁은 화면에서
     top-left(제목)가 밀려서 한 글자씩 세로로 줄바꿈되는 문제를 막기 위해
     제목/경로 영역은 줄임표로 말줄임 처리한다. */
  .top-left{min-width:0;}
  .top-left > div{min-width:0;overflow:hidden;}
  .crumb{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* 현재 보고 있는 시트를 '편집 가능' 배지처럼 초록 알약으로 표시 (큰 제목과 글자가 겹쳐서 제목은 없앰) */
  .crumb b{
    display:inline-block;
    padding:4px 12px;border-radius:20px;
    background:rgba(27,175,122,0.12);color:#0d8058;
    font-size:14px;font-weight:700;
  }
  .top-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .user-badge{font-size:13px;color:var(--ink-2);white-space:nowrap;}
  .user-badge .role{
    display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px;
  }
  .user-badge .role.editor{background:rgba(27,175,122,0.12);color:#0d8058;}
  .user-badge .role.viewer{background:rgba(137,135,129,0.14);color:#6b6a65;}

  /* 조회 전용 계정: 입력/수정/삭제 버튼과 체크박스를 화면에서 숨김 (실제 저장 차단은 서버 쪽 권한이 하고,
     이건 조회 전용 사용자에게 애초에 누를 수 없는 버튼을 보여주지 않기 위한 화면 처리) */
  body:not(.is-editor) [id^="btn-new-"],
  body:not(.is-editor) [id^="btn-revert-"],
  body:not(.is-editor) #btn-delete-irregular-freq,
  body:not(.is-editor) #btn-copy-dailymonthly-selected,
  body:not(.is-editor) #dailymonthly-select-all,
  body:not(.is-editor) #btn-copy-bizmonthly-selected,
  body:not(.is-editor) #bizmonthly-select-all,
  body:not(.is-editor) .copy-select-check,
  body:not(.is-editor) #modal-edit-btn,
  body:not(.is-editor) #modal-terminate-btn,
  body:not(.is-editor) #modal-delete-btn,
  body:not(.is-editor) #generic-edit-btn,
  body:not(.is-editor) #generic-delete-btn,
  body:not(.is-editor) .proc-check{
    display:none !important;
  }

  /* ---------- 로그인 화면 ---------- */
  .auth-gate{
    position:fixed;inset:0;z-index:500;background:var(--page);
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .auth-gate.hidden{display:none;}
  .auth-box{
    width:360px;max-width:100%;background:#fff;border:1px solid var(--hairline);border-radius:14px;
    padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.1);
  }
  .auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
  .auth-brand .brand-icon{background:rgba(42,120,214,0.10);color:var(--blue);}
  .auth-brand .brand-icon svg{width:20px;height:20px;}
  .auth-brand .t1{font-weight:700;font-size:13.5px;}
  .auth-box h2{margin:0 0 6px;font-size:19px;}
  .auth-sub{margin:0 0 20px;font-size:13px;color:var(--muted);}
  .auth-box .form-field{margin-bottom:14px;}
  .auth-box label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;}
  .auth-box input{
    width:100%;padding:9px 11px;border:1px solid var(--hairline);border-radius:8px;font-size:14px;
    box-sizing:border-box;
  }
  .pw-field-wrap{position:relative;}
  .pw-field-wrap input{padding-right:38px;}
  .pw-toggle-btn{
    position:absolute;right:4px;top:50%;transform:translateY(-50%);
    border:none;background:none;cursor:pointer;font-size:15px;line-height:1;padding:6px;
    opacity:0.55;border-radius:6px;
  }
  .pw-toggle-btn:hover{opacity:0.9;background:var(--hover, rgba(0,0,0,0.05));}
  .auth-remember{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);margin:-4px 0 14px;cursor:pointer;}
  .auth-remember input{width:auto;margin:0;}
  .auth-msg{font-size:12.5px;min-height:18px;margin-bottom:6px;}
  .auth-msg.error{color:var(--crit);}
  .auth-msg.ok{color:var(--good);}
  .auth-submit{width:100%;justify-content:center;padding:10px;font-size:14.5px;}
  .auth-toggle{margin-top:16px;text-align:center;font-size:13px;color:var(--muted);}
  .auth-toggle button{
    border:none;background:none;color:var(--blue);font-weight:600;cursor:pointer;font-size:13px;margin-left:4px;
  }
  .top-left{display:flex;align-items:center;gap:12px;}
  .menu-toggle{
    display:none;flex-shrink:0;
    width:36px;height:36px;border-radius:8px;
    border:1px solid var(--hairline);background:#fff;
    font-size:17px;cursor:pointer;color:var(--ink);
  }
  .top-right{display:flex;align-items:center;gap:14px;}
  .sidebar-backdrop{display:none;}
  .gen-date{font-size:12px;color:var(--muted);}
  .avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
  }
  .content{padding:24px 28px 60px;}

  /* ---------- Stat tiles ---------- */
  .stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
    margin-bottom:22px;
  }
  .stat-card{
    background:#fff;
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:16px 18px;
    box-shadow:0 1px 2px rgba(11,11,11,0.03);
    transition:box-shadow .15s ease, border-color .15s ease;
  }
  .stat-card:hover{box-shadow:0 3px 10px rgba(11,11,11,0.06);border-color:var(--border);}
  /* 이름표는 낮추고 숫자를 키워 위계를 분명히 (사이드바·탭과 같은 규칙) */
  .stat-card .label{
    font-size:12px;font-weight:500;color:var(--muted);
    margin-bottom:10px;display:flex;align-items:center;gap:7px;
  }
  #stats-biz, #stats-daily{grid-template-columns:repeat(6, 1fr);gap:10px;}
  #stats-biz .stat-card, #stats-daily .stat-card{padding:13px 14px;}
  #stats-biz .stat-card .label, #stats-daily .stat-card .label{font-size:11px;margin-bottom:7px;white-space:nowrap;}
  #stats-biz .stat-card .value, #stats-daily .stat-card .value{font-size:18px;}
  .stat-card .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .stat-card .value{
    font-size:24px;font-weight:700;letter-spacing:-0.03em;color:var(--ink);
    line-height:1.15;font-variant-numeric:tabular-nums;
  }
  .stat-card .value small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0;}
  .stat-card .sub{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.4;}

  /* ---------- Tabs ---------- */
  .tabs{
    display:flex;gap:4px;
    border-bottom:1px solid var(--hairline);
    margin-bottom:16px;
    /* 좁은 화면에서 탭이 4개 다 들어가지 못할 때, 글자가 단어 단위로 줄바꿈되는 대신
       탭 줄 전체가 가로로 스크롤되게 함(표/팝업에 이미 쓴 것과 같은 방식) */
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  }
  /* 사이드바와 같은 위계로: 평소엔 흐린 회색 400, 선택된 것만 진한 파랑 600 */
  .tab-btn{
    padding:10px 14px;
    font-size:14px;
    font-weight:400;
    color:var(--muted);
    background:none;border:none;cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    white-space:nowrap;flex-shrink:0;
    font-family:inherit;
    transition:color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{color:var(--ink-2);}
  .tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
  .tab-btn .cnt{
    display:inline-block;margin-left:7px;
    background:rgba(11,11,11,0.05);color:var(--muted);
    border-radius:20px;padding:1px 8px;font-size:11.5px;font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .tab-btn.active .cnt{background:var(--blue);color:#fff;}

  .tab-panel{display:none;}
  .tab-panel.active{display:block;}

  /* ---------- Toolbar ---------- */
  .toolbar{
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    margin-bottom:14px;
  }
  .search-box{
    position:relative;flex:1;min-width:220px;max-width:340px;
  }
  .search-box input{
    width:100%;padding:9px 26px 9px 30px;
    border:1px solid var(--hairline);border-radius:8px;
    font-size:13px;background:#fff;
  }
  .search-box .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;}
  .search-box .clear-btn{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    border:none;background:none;color:var(--muted);cursor:pointer;
    font-size:13px;line-height:1;padding:3px 4px;border-radius:4px;
  }
  .search-box .clear-btn:hover{color:var(--ink);background:#f0f0f0;}
  select.filter-select{
    padding:9px 10px;border:1px solid var(--hairline);border-radius:8px;
    font-size:13px;background:#fff;color:var(--ink);min-width:120px;
  }
  .spacer{flex:1;}
  .btn{
    padding:9px 14px;border-radius:8px;border:1px solid var(--hairline);
    background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2);
  }
  .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
  .result-count{font-size:12px;color:var(--muted);margin-bottom:8px;}

  /* ---------- Table ---------- */
  .table-wrap{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:auto;
    max-height:640px;
  }
  table{width:100%;border-collapse:collapse;font-size:12.8px;table-layout:fixed;}
  thead th{
    /* z-index 없으면 position:relative인 셀(.company-cell.is-child 등)이
       스크롤 시 고정 헤더 위에 겹쳐 그려짐 */
    position:sticky;top:0;z-index:5;background:#f7f8fa;
    text-align:center;padding:10px 12px;
    font-weight:700;color:var(--ink-2);
    border-bottom:1px solid var(--hairline);
    white-space:normal;word-break:keep-all;line-height:1.3;cursor:pointer;
    user-select:none;
    overflow:hidden;
    vertical-align:middle;
  }
  thead th:hover{color:var(--blue);}
  thead th .arrow{font-size:9px;color:var(--muted);margin-left:3px;}
  tbody td{
    padding:9px 12px;border-bottom:1px solid var(--hairline);
    white-space:nowrap;color:var(--ink);text-align:center;
    overflow:hidden;text-overflow:ellipsis;
  }
  .col-wrap{white-space:normal !important;overflow:visible;}
  .phone-cell{white-space:pre-line !important;overflow:visible;word-break:break-all;}
  tbody tr:hover{background:#f5f9ff;cursor:pointer;}
  .table-wrap tbody tr:last-child td{border-bottom:none;}
  .num{text-align:center;font-variant-numeric:tabular-nums;}
  .badge{
    display:inline-block;padding:2px 9px;border-radius:20px;
    font-size:11px;font-weight:700;
  }
  .badge.regular{background:rgba(27,175,122,0.12);color:#0d8058;}
  .badge.irregular{background:rgba(235,104,52,0.12);color:#c14f1f;}
  .badge.unspecified{background:rgba(137,135,129,0.14);color:#6b6a65;}
  .badge.terminated{background:rgba(227,73,72,0.12);color:#c22f2e;}
  .badge.linked{background:rgba(43,108,176,0.12);color:#1f5fa8;margin-top:3px;}
  .cell-muted{color:var(--muted);}
  .cert-cell{display:flex;gap:6px;align-items:center;}
  .cert-btn{
    border:1px solid var(--hairline);background:#fff;border-radius:7px;
    padding:4px 8px;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--ink-2);
    white-space:nowrap;
  }
  .cert-btn.upload{color:var(--blue);border-color:rgba(42,120,214,0.35);background:rgba(42,120,214,0.06);}
  .cert-btn.view{color:#0d8058;border-color:rgba(27,175,122,0.35);background:rgba(27,175,122,0.08);}
  .cert-btn.remove{color:var(--red);padding:4px 7px;}
  .company-cell{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* 상가 입주 업체 행: 셀이 가운데 정렬이라 "└"를 글자와 같이 두면 업체명 길이에 따라
     들여쓰기가 들쭉날쭉해지므로, 트리 표시를 셀 왼쪽에 고정해 항상 같은 위치에 보이게 함 */
  .company-cell.is-child{position:relative;padding-left:22px;}
  .company-cell.is-child::before{content:'└';position:absolute;left:8px;color:var(--muted);font-weight:400;}

  /* ---------- Change log ---------- */
  .log-list{display:flex;flex-direction:column;gap:0;}
  .log-item{
    display:flex;gap:14px;padding:12px 16px;
    border-bottom:1px solid var(--hairline);
    background:var(--surface);
  }
  .log-item:first-child{border-radius:12px 12px 0 0;}
  .log-item:last-child{border-radius:0 0 12px 12px;border-bottom:none;}
  .log-date{width:90px;flex-shrink:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:1px;}
  .log-body{flex:1;min-width:0;}
  .log-company{font-weight:700;font-size:13px;margin-bottom:2px;display:flex;align-items:center;gap:8px;}
  .log-actions{display:inline-flex;gap:4px;margin-left:auto;}
  .log-actions .cert-btn{padding:2px 7px;font-size:10.5px;}
  .log-change{font-size:12.5px;color:var(--ink-2);}
  .log-figures{font-size:11.5px;color:var(--muted);margin-top:3px;}
  .log-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
  .proc-badge{
    display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
    padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;
  }
  .proc-badge.done{background:rgba(12,163,12,0.12);color:#0a7d0a;}
  .proc-badge.pending{background:rgba(250,178,25,0.16);color:#8a5a00;}
  .proc-badge{cursor:pointer;border:none;}

  /* ---------- Expiry alert ---------- */
  .expiry-alert{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:rgba(250,178,25,0.10);border:1px solid rgba(250,178,25,0.35);
    border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px;
  }
  .expiry-alert.overdue{background:rgba(208,59,59,0.08);border-color:rgba(208,59,59,0.35);}
  .expiry-alert .msg{flex:1;min-width:200px;}
  .expiry-alert .msg b{color:#8a5a00;}
  .exp-badge{
    display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;
    font-size:10.5px;font-weight:700;white-space:nowrap;
  }
  .exp-badge.soon{background:rgba(250,178,25,0.18);color:#8a5a00;}
  .exp-badge.overdue{background:rgba(208,59,59,0.14);color:#a92a2a;}

  /* ---------- Form modal ---------- */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
  .form-field{display:flex;flex-direction:column;gap:5px;}
  .form-field.full{grid-column:1 / -1;}
  .form-field label{font-size:12px;font-weight:600;color:var(--ink-2);}
  .form-field input, .form-field select, .form-field textarea{
    padding:8px 10px;border:1px solid var(--hairline);border-radius:8px;
    font-size:13px;font-family:inherit;background:#fff;color:var(--ink);
  }
  .form-field textarea{resize:vertical;min-height:56px;}
  .form-field input[type="checkbox"]{padding:0;border:none;width:20px;height:20px;flex-shrink:0;}
  /* 담당자 여러 명 입력 카드 (역할 + 이름 + 연락처 + 이메일) */
  .contact-card{
    border:1px solid var(--hairline);border-radius:9px;padding:9px;margin-bottom:8px;
    display:grid;grid-template-columns:126px 1fr 1fr auto;gap:6px;align-items:center;background:#fcfcfd;
  }
  .contact-card .em{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .contact-card input,.contact-card select{
    padding:7px 9px;border:1px solid var(--hairline);border-radius:7px;
    font-size:12.5px;font-family:inherit;background:#fff;color:var(--ink);min-width:0;
  }
  .contact-del{border:1px solid var(--hairline);background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;color:var(--red);font-weight:700;}
  @media (max-width:640px){ .contact-card{grid-template-columns:1fr;} .contact-card .em{grid-template-columns:1fr;} }
  .workday-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .workday-chip{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 4px;border:1px solid var(--hairline);border-radius:8px;font-size:12.5px;cursor:pointer;user-select:none;}
  .workday-chip input{width:14px;height:14px;flex-shrink:0;}
  .workday-chip:has(input:checked){background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;}
  .modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px;}
  .modal-actions .btn{flex-shrink:0;white-space:nowrap;}
  .btn.danger{background:var(--red);border-color:var(--red);color:#fff;}
  .required:after{content:" *";color:var(--red);}

  /* ---------- Modal ---------- */
  .modal-backdrop{
    /* 팝업이 떠 있는 동안에도 기본 화면(뒤쪽 표/버튼)을 그대로 클릭·조작할 수 있도록,
       배경을 어둡게 가리지 않고 클릭도 그대로 통과시킴(pointer-events:none). 팝업(.modal) 자신만 조작 가능. */
    display:none;position:fixed;inset:0;pointer-events:none;
    z-index:100;align-items:center;justify-content:center;
  }
  .modal-backdrop.open{display:flex;}
  .modal{
    background:#fff;border-radius:14px;width:520px;max-width:92vw;
    max-height:84vh;overflow-y:auto;overflow-x:hidden;pointer-events:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.08);
  }
  /* ponytail: .modal-backdrop가 display:flex라서, overflow-x가 visible인 채로 안에 794px짜리
     거래명세서/정산서 미리보기(.wstmt-page, .stmt-doc)처럼 폭이 고정된 내용이 들어가면 flex 아이템인
     .modal이 max-width보다 더 넓게 퍼지면서(내용 최소폭 규칙) 화면 양쪽으로 잘려 보이고 스크롤도 안 되던 문제.
     overflow-x:hidden으로 .modal 자체는 화면 폭에 맞게 줄어들게 하고, 실제 폭 넓은 미리보기는
     아래 #wstmt-print-area/#statement-print-area가 대신 좌우로 스크롤되게 함. */
  #wstmt-print-area, #statement-print-area{overflow-x:auto;}
  .modal-head{
    padding:18px 22px;border-bottom:1px solid var(--hairline);
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;background:#fff;
    cursor:move;user-select:none;
  }
  .modal-head h3{margin:0;font-size:16px;}
  .modal-close{border:none;background:none;font-size:20px;cursor:pointer;color:var(--muted);}
  .modal-body{padding:18px 22px;}
  .modal-backdrop.maximized .modal{width:96vw !important;max-width:96vw !important;height:92vh;max-height:92vh;display:flex;flex-direction:column;}
  .modal-backdrop.maximized .modal-body{flex:1;overflow-y:auto;}
  .field-row{
    display:flex;justify-content:space-between;gap:16px;
    padding:9px 0;border-bottom:1px solid var(--hairline);
    font-size:13px;
  }
  .field-row:last-child{border-bottom:none;}
  .field-row .k{color:var(--muted);flex-shrink:0;}
  .field-row .v{text-align:right;font-weight:600;word-break:break-all;}

  @media (max-width:1100px){
    .stats{grid-template-columns:repeat(3,1fr);}
    #stats-biz, #stats-daily{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:760px){
    .menu-toggle{display:block;}
    .sidebar{
      display:flex;position:fixed;left:0;top:0;height:100vh;z-index:200;
      transform:translateX(-100%);transition:transform .25s ease;
      box-shadow:2px 0 20px rgba(0,0,0,0.25);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-backdrop.show{
      display:block;position:fixed;inset:0;background:rgba(11,11,11,0.45);z-index:150;
    }
    .stats{grid-template-columns:repeat(2,1fr);}
    #stats-biz, #stats-daily{grid-template-columns:repeat(2,1fr);}
    .content{padding:16px 14px 40px;}
    .topbar{padding:12px 14px;}
    .gen-date{display:none;}
    .badge-email{display:none;} /* 좁은 화면에서는 이메일은 숨기고 편집가능/조회전용 표시만 남김 */
    .form-grid{grid-template-columns:1fr;}
    .modal-actions{flex-wrap:wrap;}
    .search-box{min-width:160px;}
  }

  /* ---------- 거래명세서 ---------- */
  .stmt-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:12px;background:var(--page);border-radius:8px;}
  .stmt-controls .form-field{min-width:140px;}
  .stmt-controls .form-field.grow{flex:1.4;}
  .stmt-doc{border:1px solid #000;padding:20px 24px;background:#fff;font-size:12.5px;color:#111;font-family:'Malgun Gothic','굴림체',sans-serif;}
  /* 담당자 정산서: A4(210x297mm ≒ 96dpi 794x1123px) 비율로 화면에서도 동일하게 미리보기 */
  .wstmt-page{
    width:794px;min-height:1123px;box-sizing:border-box;margin:0 auto 24px;
    background:#fff;color:#1a1a1a;font-family:inherit;font-size:13px;
    padding:48px 52px;
  }
  /* 담당자 정산서 문서 디자인 (첨부 "작업자 카톡 메시지 생성기"의 정산서 양식을 그대로 재현) */
  .pa-logo{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:3px solid #fee500;}
  .pa-logo-ico{width:40px;height:40px;background:#fee500;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
  .pa-logo-tx{font-size:18px;font-weight:900;color:#1a1a1a;}
  .pa-logo-sub{font-size:11px;color:#666;margin-top:2px;}
  .pa-ttl{font-size:16px;font-weight:700;margin-bottom:4px;}
  .pa-sub{font-size:12px;color:#555;margin-bottom:20px;}
  .pa-tbl{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:12px;table-layout:fixed;}
  .pa-tbl th{background:#fff9d6;color:#1a1a1a;font-weight:700;padding:9px 10px;border:1px solid #d8c840;text-align:center;font-size:11px;}
  .pa-tbl td{padding:8px 10px;border:1px solid #e0e0e0;text-align:center;color:#1a1a1a;font-size:12px;}
  .pa-tbl td.tl{text-align:left;}
  .pa-company-cell,.pa-site-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pa-tbl tr:nth-child(even) td{background:#fafafa;}
  .pa-tbl .tot td{background:#fff9d6;font-weight:700;border-top:2px solid #d8c840;}
  .pa-sum{background:#fff9d6;border:1.5px solid #d8c840;border-radius:10px;padding:14px 18px;margin-bottom:18px;}
  .pa-sum-ttl{font-size:11px;font-weight:700;color:#888;margin-bottom:8px;}
  .pa-sum-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;}
  .pa-sum-row .v{font-weight:700;}
  .pa-sum-row.hl{margin-top:6px;padding-top:8px;border-top:1px solid #d8c840;}
  .pa-sum-row.hl .l{font-size:15px;font-weight:700;}
  .pa-sum-row.hl .v{font-size:16px;font-weight:900;color:#b8860b;}
  .pa-foot{font-size:11px;color:#aaa;text-align:center;padding-top:12px;border-top:1px solid #eee;margin-top:8px;}
  .stmt-headrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-bottom:14px;}
  .stmt-docno{font-size:12px;border-bottom:1px solid #333;padding-bottom:4px;justify-self:start;}
  .stmt-title{text-align:center;font-size:26px;font-weight:800;letter-spacing:12px;white-space:nowrap;}
  /* 수신자 정보(좌측)와 공급자 정보(우측)를 하나의 표로 합쳐 테두리가 겹쳐 두꺼워 보이는 문제를 근본적으로 없앰
     (서로 다른 두 요소의 border가 같은 자리에 겹치면 서브픽셀 반올림 차이로 인쇄 시 두껍게/흐릿하게 보일 수 있음 -
     border-collapse 하나로 통일하면 애초에 겹칠 border 자체가 없음) */
  table.stmt-parties-table{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:10px;}
  table.stmt-parties-table td{border:1px solid #000;padding:5px 8px;font-size:11.5px;vertical-align:middle;white-space:normal;overflow:visible;text-overflow:clip;}
  .stmt-recv-cell{width:34%;text-align:center;padding:10px;}
  .stmt-recv-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;}
  .stmt-recv-date{font-size:14px;}
  .stmt-recv-company{font-size:15px;font-weight:700;word-break:keep-all;}
  .stmt-recv-msg{font-size:13px;font-weight:700;line-height:1.5;}
  table.stmt-parties-table .stmt-k{background:#f5f5f5;font-weight:600;width:92px;text-align:center;white-space:nowrap;}
  table.stmt-parties-table .stmt-v{width:auto;text-align:center;}
  .stmt-total-line{text-align:center;font-size:13.5px;font-weight:700;margin-bottom:8px;}
  /* 거래명세서의 공급가 줄만 위쪽 표(전화번호 행)와 이어지도록 테두리로 감싸 표시 */
  .stmt-total-line.stmt-supply-total{margin-top:-1px;border:1px solid #000;padding:6px 8px;}
  /* 담당자 정산서의 합계 줄도 아래쪽 내역 표와 테두리로 이어지도록 표시 */
  .stmt-total-line.stmt-worker-total{border:1px solid #000;padding:8px;margin-bottom:-1px;}
  table.stmt-item-table{width:100%;border-collapse:collapse;table-layout:fixed;}
  table.stmt-item-table th, table.stmt-item-table td{border:1px solid #000;padding:8px 8px;text-align:center;font-size:12px;white-space:normal;overflow:visible;text-overflow:clip;}
  table.stmt-item-table thead th{background:#f0f0f0;font-weight:700;}
  .stmt-sum-row td{font-weight:700;background:#fafafa;}
  .bizlabor-total-row td{font-weight:700;background:#f7f8fa;border-bottom:2px solid var(--hairline);position:sticky;top:37px;z-index:4;}
  .stmt-note-row td{text-align:left;font-size:11px;color:#333;font-weight:400;padding:6px 8px;}
  .stmt-ceo-inner{display:flex;align-items:center;justify-content:center;gap:2px;}
  .stmt-seal-slot{display:inline-flex;flex-shrink:0;}
  .stmt-seal-svg, .stmt-seal-img{width:100px;height:100px;-webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;object-fit:contain;margin-left:4px;}
  .stmt-item-row input{padding:6px 8px;border:1px solid var(--hairline);border-radius:6px;font-size:12.5px;font-family:inherit;}
  @media print{
    @page{ size: A4; margin: 14mm; }
    /* body 자식 요소를 전부 display:none으로 숨겨 레이아웃 높이 자체를 없애고
       (visibility:hidden은 높이를 그대로 차지해 빈 2번째 페이지가 추가로 출력되는 원인이었음)
       인쇄 대상인 거래명세서 모달만 다시 보이도록 함 */
    body > *{display:none !important;}
    body:not(.printing-worker-stmt) #statement-modal{display:block !important;position:static !important;background:none !important;inset:auto !important;z-index:auto !important;}
    body:not(.printing-worker-stmt) #statement-modal .modal{width:100% !important;max-width:none !important;max-height:none !important;overflow:visible !important;box-shadow:none !important;border-radius:0 !important;transform:none !important;}
    body:not(.printing-worker-stmt) #statement-modal .modal-body{padding:0 !important;}
    body.printing-worker-stmt #worker-stmt-modal{display:block !important;position:static !important;background:none !important;inset:auto !important;z-index:auto !important;}
    body.printing-worker-stmt #worker-stmt-modal .modal{width:100% !important;max-width:none !important;max-height:none !important;overflow:visible !important;box-shadow:none !important;border-radius:0 !important;}
    body.printing-worker-stmt #worker-stmt-modal .modal-body{padding:0 !important;}
    .no-print{display:none !important;}
    #statement-print-area{padding:0;}
    .stmt-doc{border:1px solid #000;padding:26px 30px;font-size:14px;}
    .stmt-title{font-size:30px;letter-spacing:16px;}
    .stmt-recv-date{font-size:16px;}
    .stmt-recv-company{font-size:18px;}
    .stmt-recv-msg{font-size:15px;}
    table.stmt-parties-table td{font-size:13px;padding:8px 10px;}
    table.stmt-item-table th, table.stmt-item-table td{padding:12px 8px;font-size:13.5px;}
    .stmt-seal-svg, .stmt-seal-img{width:110px;height:110px;margin-left:4px;}
  }

  /* ---------- 세금계산서 일괄발행 ---------- */
  #table-taxinvoice tbody td{white-space:normal;vertical-align:middle;}
  #table-taxinvoice .tax-row-first td{border-top:1px solid var(--hairline);}
  .tax-in{
    width:100%;padding:5px 7px;border:1px solid var(--hairline);border-radius:6px;
    font-size:12.5px;font-family:inherit;background:#fff;color:var(--ink);
  }
  .tax-in.num{text-align:right;font-variant-numeric:tabular-nums;}
  .tax-missing{color:var(--red);font-weight:700;}
  .tax-item-cell{display:flex;align-items:center;gap:6px;}
  .tax-item-cell input{flex:1;min-width:0;}
  .tax-item-cell .cert-btn{flex-shrink:0;padding:3px 7px;font-size:11px;}
  .tax-actions{white-space:nowrap;text-align:center;}
  .tax-actions .cert-btn{padding:3px 7px;font-size:11px;}

  /* ---------- 입금·미수금 정산 ---------- */
  .settle-stats{margin-bottom:14px;}
  #table-settlement tbody td{white-space:nowrap;}