/* 03-components.css — 스크롤바 · 버튼 · 표 · 카드 · 모달 · 보고서 스테이지 등 공통
   원본 index.html 659~1324줄. 파일 순서 = 캐스케이드 순서이므로 이름 앞 번호를 바꾸지 말 것. */
  /* 스크롤 막대 — 슬랙 방식. 알약 모양의 얇은 막대이고, 평소엔 안 보이다가
     굴리는 동안만 나타나고 1초 뒤 사라진다(sb-on 표시를 07-screens.js 가 붙였다 뗀다).
     지나는 칸의 너비는 늘 같아서 보이든 안 보이든 본문이 밀리지 않는다.
     여기 한 곳에서만 정한다 — 영역마다 따로 적지 않는다.
     Firefox 는 scrollbar-width/color, Chromium·Safari 는 ::-webkit-scrollbar 를 쓴다. */
  *{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
  ::-webkit-scrollbar{ width:var(--sb-w); height:var(--sb-w); }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-corner{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:transparent; border-radius:var(--radius-full);
    border:2px solid transparent; background-clip:content-box;
    transition:background .2s ease;
  }
  .sb-on{ scrollbar-color:var(--sb-thumb) transparent; }
  .sb-on::-webkit-scrollbar-thumb{ background:var(--sb-thumb); background-clip:content-box; }
  /* 통계 보고서 PDF — 화면 밖에 그려 캡처한다 */
  #rptStage{ position:fixed; left:-99999px; top:0; display:none; z-index:-1; }
  .rpt-page{ width:735px; padding:0; background:#fff; color:#212529;
    font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif; }
  .rpt-head{ display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:3px solid #6b82be; padding-bottom:12px; }
  .rpt-org{ font-size:var(--fs-3); font-weight:700; color:#6b7280; letter-spacing:.2px; }
  .rpt-title{ font-size:27px; font-weight:800; margin:3px 0 5px; letter-spacing:-.6px; }
  .rpt-scope{ font-size:var(--fs-3); font-weight:700; color:#6b82be; }
  .rpt-date{ font-size:var(--fs-2); color:#6b7280; font-weight:700; }
  .rpt-headline{ margin:16px 0 4px; padding:13px 18px; background:#eef2f9; border-left:5px solid #6b82be;
    border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:var(--fs-6); font-weight:800; color:#3f5490; }
  .rpt-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin:16px 0 6px; }
  .rpt-kpi{ border:1.5px solid #e5e7eb; border-radius:var(--radius-lg); padding:12px 14px; }
  .rpt-kpi.main{ border-color:#6b82be; border-width:2px; background:#eef2f9; }
  .rpt-kpi.good{ border-color:#16a34a; }
  .rpt-kpi-label{ font-size:var(--fs-2); font-weight:800; color:#6b7280; margin-bottom:4px; }
  .rpt-kpi-value{ font-size:var(--fs-8); font-weight:800; letter-spacing:-.8px; line-height:1.1; }
  .rpt-kpi.main .rpt-kpi-value{ color:#6b82be; }
  .rpt-kpi-sub{ font-size:var(--fs-1); color:#6b7280; font-weight:700; margin-top:4px; }
  .rpt-d{ font-weight:800; }
  .rpt-d.up{ color:#dc2626; } .rpt-d.down{ color:#6b82be; } .rpt-d.flat{ color:#9ca3af; }
  .rpt-sec{ margin-top:0; }
  .rpt-sec h2{ font-size:var(--fs-6); font-weight:800; margin:0 0 9px; padding-left:9px; border-left:4px solid #6b82be; }
  .rpt-sub{ font-size:var(--fs-3); font-weight:800; color:#6b7280; margin:0 0 6px; }
  .rpt-two{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--sp-5); align-items:start; }
  table.rpt-table{ width:100%; border-collapse:collapse; font-size:var(--fs-2); font-variant-numeric:tabular-nums; }
  table.rpt-table th{ background:#e4e9f2; color:#374151; font-weight:800; font-size:var(--fs-1);
    padding:7px 8px; border-bottom:1.5px solid #d1d5db; text-align:left; white-space:nowrap; }
  table.rpt-table td{ padding:6.5px 8px; border-bottom:1px solid #e4e9f2; white-space:nowrap; }
  table.rpt-table th.num, table.rpt-table td.num{ text-align:right; }
  table.rpt-table td.strong{ font-weight:800; }
  table.rpt-table tfoot td{ border-top:2px solid #d1d5db; border-bottom:none; font-weight:800; background:#eef2f9; }
  .rpt-empty{ text-align:center; color:#9ca3af; padding:16px 0; }
  .rpt-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
  .rpt-rank{ display:inline-block; min-width:17px; height:17px; line-height:17px; text-align:center; border-radius:var(--radius-sm);
    background:#e4e9f2; color:#6b7280; font-size:var(--fs-1); font-weight:800; margin-right:6px; }
  .rpt-bars{ margin-bottom:12px; }
  .rpt-bar-legend{ display:flex; gap:var(--sp-5); font-size:var(--fs-1); font-weight:700; color:#6b7280; margin-bottom:7px; }
  .rpt-bar-legend .sw{ display:inline-block; width:10px; height:10px; border-radius:var(--radius-xs); margin-right:4px; vertical-align:-1px; }
  .rpt-bar-legend .sw.cur{ background:#6b82be; } .rpt-bar-legend .sw.prev{ background:#cbd5e1; }
  .rpt-bar-row{ display:grid; grid-template-columns:96px 1fr 64px; align-items:center; gap:var(--sp-3); margin-bottom:6px; }
  .rpt-bar-name{ font-size:var(--fs-1); font-weight:700; }
  .rpt-bar-track{ position:relative; height:19px; }
  .rpt-bar{ position:absolute; left:0; border-radius:var(--radius-xs); }
  .rpt-bar.cur{ top:0; height:11px; }
  .rpt-bar.prev{ top:12px; height:6px; background:#cbd5e1; }
  .rpt-bar-val{ font-size:var(--fs-1); font-weight:800; text-align:right; }
  .rpt-fc-head{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:8px; }
  .rpt-fc-badge{ padding:3px 12px; border-radius:var(--radius-full); font-size:var(--fs-2); font-weight:800; color:#fff; }
  .rpt-fc-badge.lv-done{ background:#6b82be; } .rpt-fc-badge.lv-ok{ background:#16a34a; }
  .rpt-fc-badge.lv-warn{ background:#f59e0b; } .rpt-fc-badge.lv-risk{ background:#dc2626; }
  .rpt-fc-msg{ font-size:var(--fs-4); font-weight:800; }
  .rpt-foot{ margin-top:26px; padding-top:10px; border-top:1px solid #e5e7eb;
    font-size:var(--fs-1); color:#9ca3af; font-weight:700; }
  .drop-zone{
    max-width:420px;
    margin:26px auto 0;
    padding:28px 20px;
    border:2px dashed var(--border);
    border-radius:var(--radius-lg);
    background:var(--card);
    color:var(--faint);
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .drop-zone .drop-zone-icon{
    font-size:28px;
    margin-bottom:8px;
    transition:transform .18s ease;
  }
  .drop-zone .drop-zone-text{ font-size:var(--fs-5); color:var(--muted); }
  .drop-zone:hover{
    border-color:var(--primary-light);
    background:var(--surface2);
  }
  .drop-zone:hover .drop-zone-icon{ transform:translateY(-3px); }
  .drop-zone.dragover{
    border-color:var(--primary);
    background:var(--primary-light);
    transform:scale(1.02);
    animation:dropPulse 1s ease-in-out infinite;
  }
  .drop-zone.dragover .drop-zone-text{ color:var(--primary-press); }
  @keyframes dropPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(76,100,166,.18); }
    50%{ box-shadow:0 0 0 8px rgba(76,100,166,.08); }
  }

  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:18px 20px;
    margin-bottom:16px;
    box-shadow:var(--shadow-sm);
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .card:hover{
    box-shadow:var(--shadow-md-blue);
    transform:translateY(-1px);
  }
  .card h3{
    font-size:var(--fs-6);
    margin:0 0 14px;
    font-weight:700;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .card h3 .title-with-icon{
    display:inline-flex;
    align-items:center;
    gap:var(--sp-3);
  }
  .card h3 .section-icon{
    display:inline-flex;
    flex:none;
  }
  .card h3 .count{
    font-size:var(--fs-4);
    color:var(--muted);
    font-weight:500;
  }

  .kpi-card .label{
    font-size:var(--fs-6);
    color:var(--muted);
    font-weight:700;
    margin-bottom:8px;
  }
  .kpi-card .value{
    font-size:30px;
    font-weight:800;
    color:var(--text);
    line-height:1.1;
  }
  .kpi-card .value small{
    font-size:var(--fs-5);
    font-weight:700;
    color:var(--muted);
    margin-left:4px;
  }
  .kpi-card .ref{
    margin-top:10px;
    font-size:var(--fs-4);
    color:var(--muted);
  }
  .progress-bar{
    position:relative;
    margin-top:10px;
    height:14px;
    border-radius:var(--radius-md);
    background:var(--border);
    overflow:hidden;
  }
  .progress-bar .fill{
    position:absolute;
    top:0; left:0;
    height:100%;
    border-radius:var(--radius-md);
    transition:width .3s;
  }
  .progress-bar .fill.expected{ background:#6b82be; z-index:1; }
  .comment-box{
    margin-top:12px;
    font-size:var(--fs-4);
    color:var(--muted);
    line-height:1.7;
    border-top:1px solid var(--border);
    padding-top:10px;
  }
  /* 예상매출 KPI 강조 — Notion "다크 히어로밴드" 컴포넌트 참고: 딥 인디고 단색 배경 + 화이트 텍스트.
     대시보드 전체에서 유일하게 다크 톤을 쓰는 "나이트 아일랜드" 강조 영역 */
  .kpi-card.kpi-highlight{
    background:var(--secondary);
    border:none;
    border-radius:var(--radius-xl);
    padding:20px 22px;
    box-shadow:var(--shadow-sm);
  }
  .kpi-card.kpi-highlight:hover{ box-shadow:var(--shadow-md-blue); }
  .kpi-card.kpi-highlight .label{ color:var(--secondary-light); font-weight:700; }
  .kpi-card.kpi-highlight .value{ font-size:36px; font-weight:800; color:#ffffff; letter-spacing:-0.5px; }
  .kpi-card.kpi-highlight .value small{ color:rgba(255,255,255,.65); }
  .value-row{
    display:flex;
    align-items:baseline;
    gap:var(--sp-4);
    flex-wrap:wrap;
  }
  .kpi-achieve-badge{
    font-size:var(--fs-6);
    font-weight:800;
    color:#ffffff;
    background:rgba(255,255,255,.16);
    padding:3px 10px;
    border-radius:var(--radius-full);
  }
  .kpi-card.kpi-highlight .progress-bar{ background:rgba(255,255,255,.18); }
  .kpi-card.kpi-highlight .progress-bar .fill.expected{ background:#ffffff; }
  .kpi-card.kpi-highlight .ref{
    font-size:var(--fs-6);
    font-weight:700;
    color:#ffffff;
    margin-top:10px;
  }
  .kpi-card.kpi-highlight .comment-box{
    color:rgba(255,255,255,.8);
    border-top:1px solid rgba(255,255,255,.18);
  }

  .chart-wrap{ position:relative; height:220px; }
  .chart-wrap.pie{ height:200px; }
  .chart-wrap.bar{ height:200px; }
  .chart-wrap.bar-tall{ height:320px; }

  table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--fs-5);
  }
  thead th{
    text-align:left;
    font-size:var(--fs-5);
    color:var(--muted);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
    border-bottom:1px solid var(--border);
    padding:8px 6px;
    position:sticky;
    top:0;
    background:var(--card);
    white-space:nowrap;
  }
  tbody td{
    padding:7px 6px;
    border-bottom:1px solid var(--border-soft);
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:140px;
  }
  td.num, th.num{ text-align:right; }
  td.num.pos{ color:var(--positive); font-weight:700; }
  td.num.neg{ color:var(--negative); font-weight:700; }
  tbody tr:nth-child(even) td{ background:var(--bg); }
  tbody tr:hover td{ background:var(--row-hover); }
  /* 영업단계 status pill */
  .stage-pill{
    display:inline-block;
    padding:3px 9px;
    border-radius:var(--radius-full);
    font-size:var(--fs-4);
    font-weight:700;
    white-space:nowrap;
  }
  /* 영업단계 배지 — 진행도가 보이게 블루 계조를 쓴다.
     옅은 파랑에서 시작해 검수진행이 가장 진하고, 완료·실주만 초록·빨강. */
  .stage-pill.s-new{ background:#eef4fd; color:#3f6ea8; }
  .stage-pill.s-review{ background:#e2edfb; color:#245f9e; }
  .stage-pill.s-order{ background:#d7e6fa; color:var(--stage-80); }
  .stage-pill.s-inspect{ background:#cddffa; color:var(--stage-90); }
  .stage-pill.s-done{ background:#e6f3ef; color:var(--stage-done); }
  .stage-pill.s-drop{ background:#fdece6; color:var(--stage-drop); }
  .stage-pill.s-etc{ background:var(--surface2); color:var(--muted); }
  .section-icon.icon-revenue{ color:var(--primary); }
  .section-icon.icon-new{ color:var(--primary); }
  .section-icon.icon-order{ color:var(--primary); }
  .section-icon.icon-done{ color:var(--positive); }
  .section-icon.icon-drop{ color:var(--negative); }
  .section-icon.icon-week{ color:var(--primary); }
  .section-icon.icon-history{ color:var(--muted); }
  .table-scroll{
    overflow-x:auto;
  }
  table.cross-table{ min-width:880px; }
  table.cross-table td:first-child, table.cross-table th:first-child{
    position:sticky;
    left:0;
    background:var(--card);
    font-weight:700;
    white-space:nowrap;
    z-index:1;
  }
  .no-rows{
    color:var(--muted);
    text-align:center;
    padding:30px 0;
    font-size:var(--fs-5);
  }
  .note{
    font-size:var(--fs-4);
    color:var(--muted);
    margin:6px 2px 0;
    line-height:1.5;
  }
  /* 매출액/매출이익 수동 보정 패널 */
  .manual-revenue-panel{
    margin-top:10px;
    padding:12px;
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
  }
  .manual-revenue-panel textarea{
    width:100%;
    min-height:90px;
    box-sizing:border-box;
    font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
    font-size:var(--fs-4);
    padding:8px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    resize:vertical;
  }
  .manual-revenue-actions{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    margin-top:8px;
  }
  .manual-revenue-status{
    font-size:var(--fs-3);
    color:var(--muted);
    margin:0 0 8px;
  }
  .manual-revenue-msg{
    font-size:var(--fs-4);
    margin:0;
  }
  .manual-revenue-msg.ok{ color:#16a34a; font-weight:700; }
  .manual-revenue-msg.err{ color:#dc2626; font-weight:700; }
  footer.page-note{
    color:var(--muted);
    font-size:var(--fs-4);
    text-align:center;
    margin-top:24px;
    grid-column:1/-1;
  }
  /* 매출액/매출이익 강조 — 파스텔 블록 대신 좌측 브랜드 컬러 바 + 옅은 서페이스로 절제된 강조 */
  table.cross-table tr.row-highlight td{ background:var(--surface2); }
  table.cross-table tr.row-highlight td:first-child{ background:var(--surface2); border-left:3px solid var(--primary); }
  /* 전년도 행 접기/펼치기 */
  table.cross-table tr.prevyear-row{ display:none; }
  table.cross-table tr.prevyear-row.show{ display:table-row; }
  .prevyear-toggle{
    cursor:pointer;
    color:var(--primary);
    font-size:var(--fs-4);
    text-decoration:underline;
    display:inline-block;
    padding:4px 0;
  }
  table.cross-table th:first-child{ font-weight:800; }
  /* 매출액/매출이익 — 보정 세부항목(신규/유지보수/해외/기타) 펼쳐보기 */
  table.cross-table tr.clickable-row{ cursor:pointer; }
  .row-toggle-hint{ font-size:var(--fs-2); color:var(--primary); margin-left:4px; }
  table.cross-table tr.revenue-detail-row, table.cross-table tr.margin-detail-row{ display:none; }
  table.cross-table tr.revenue-detail-row.show, table.cross-table tr.margin-detail-row.show{ display:table-row; }
  table.cross-table tr.detail-sub-row td{ font-size:var(--fs-3); color:var(--muted); background:var(--surface2); font-weight:500; }
  table.cross-table tr.detail-sub-row td:first-child{ padding-left:20px; background:var(--surface2); }
  .breakdown-edit-input{ width:100%; max-width:56px; border:1px solid transparent; border-radius:var(--radius-sm); background:transparent; text-align:right; font:inherit; font-size:var(--fs-3); color:var(--muted); padding:2px 4px; }
  .breakdown-edit-input:hover{ border-color:var(--border); background:#fff; }
  .breakdown-edit-input:focus{ outline:none; border-color:var(--primary); background:#fff; color:var(--text); }
  /* 영업단계 강조(신규등록/수주/완료 공통)는 이제 영업단계 칸의 status pill(.stage-pill)로 표시 — 행 전체 배경 강조는 제거 */
  /* 신규등록/수주 — 10칸 테이블 정렬 폭 (체크박스,담당자,고객사명,제품명,리셀러,사용자수,영업단계,매출액,영업구분,날짜 — 마진율 제거, 날짜는 맨뒤로 — 합 100%) */
  table.review-table thead th{ font-weight:800; }
  table.review-table th:nth-child(1), table.review-table td:nth-child(1){ width:4%; }
  table.review-table th:nth-child(2), table.review-table td:nth-child(2){ width:8%; }
  table.review-table th:nth-child(3), table.review-table td:nth-child(3){ width:14%; }
  table.review-table th:nth-child(4), table.review-table td:nth-child(4){ width:13%; }
  table.review-table th:nth-child(5), table.review-table td:nth-child(5){ width:10%; }
  table.review-table th:nth-child(6), table.review-table td:nth-child(6){ width:6%; }
  table.review-table th:nth-child(7), table.review-table td:nth-child(7){ width:10%; }
  table.review-table th:nth-child(8), table.review-table td:nth-child(8){ width:10%; }
  table.review-table th:nth-child(9), table.review-table td:nth-child(9){ width:10%; }
  table.review-table th:nth-child(10), table.review-table td:nth-child(10){ width:9%; }
  table.review-table th:nth-child(11), table.review-table td:nth-child(11){ width:6%; }
  /* 완료/실주 — 6칸 압축 테이블 전용 폭(담당자,고객사명,제품명,영업단계,매출액,날짜 — 합 100%, 영업구분 제거) */
  table.review-table.compact-table th:nth-child(1), table.review-table.compact-table td:nth-child(1){ width:8%; }
  table.review-table.compact-table th:nth-child(2), table.review-table.compact-table td:nth-child(2){ width:15%; }
  table.review-table.compact-table th:nth-child(3), table.review-table.compact-table td:nth-child(3){ width:14%; }
  table.review-table.compact-table th:nth-child(4), table.review-table.compact-table td:nth-child(4){ width:11%; }
  table.review-table.compact-table th:nth-child(5), table.review-table.compact-table td:nth-child(5){ width:6%; }
  table.review-table.compact-table th:nth-child(6), table.review-table.compact-table td:nth-child(6){ width:11%; }
  table.review-table.compact-table th:nth-child(7), table.review-table.compact-table td:nth-child(7){ width:11%; }
  table.review-table.compact-table th:nth-child(8), table.review-table.compact-table td:nth-child(8){ width:10%; }
  table.review-table.compact-table th:nth-child(9), table.review-table.compact-table td:nth-child(9){ width:8%; }
  table.review-table.compact-table th:nth-child(10), table.review-table.compact-table td:nth-child(10){ width:6%; }
  /* 예상 추가 매출/확인·정리 필요 매출 — 두 탭이 같은 표 영역을 공유하므로 폭을 완전히 통일해 탭 전환시 표가 움직이지 않게 한다.
     8칸: 체크박스,담당자,고객사명,제품명,영업단계,매출액,영업구분,납품(예상)일 — 합 100% — pipeline-table과 동일 폭을 써야 한다(아래 참고) */
  table.review-table.pipeline-review-table th:nth-child(1), table.review-table.pipeline-review-table td:nth-child(1){ width:5%; }
  table.review-table.pipeline-review-table th:nth-child(2), table.review-table.pipeline-review-table td:nth-child(2){ width:9%; }
  table.review-table.pipeline-review-table th:nth-child(3), table.review-table.pipeline-review-table td:nth-child(3){ width:19%; }
  table.review-table.pipeline-review-table th:nth-child(4), table.review-table.pipeline-review-table td:nth-child(4){ width:15%; }
  table.review-table.pipeline-review-table th:nth-child(5), table.review-table.pipeline-review-table td:nth-child(5){ width:12%; }
  table.review-table.pipeline-review-table th:nth-child(6), table.review-table.pipeline-review-table td:nth-child(6){ width:12%; }
  table.review-table.pipeline-review-table th:nth-child(7), table.review-table.pipeline-review-table td:nth-child(7){ width:10%; }
  table.review-table.pipeline-review-table th:nth-child(8), table.review-table.pipeline-review-table td:nth-child(8){ width:10%; }
  table.review-table.pipeline-review-table th:nth-child(9), table.review-table.pipeline-review-table td:nth-child(9){ width:8%; }
  /* 표 하단 합계 행을 별도 tfoot으로 분리 — 데이터 행 수와 무관하게 항상 표 영역 맨 아래 고정 (thead/tbody/tfoot 블록화 + 행별 display:table 기법) */
  table.review-table, table.pipeline-table{ display:flex; flex-direction:column; min-height:0; }
  table.review-table > thead, table.review-table > tbody, table.review-table > tfoot,
  table.pipeline-table > thead, table.pipeline-table > tbody, table.pipeline-table > tfoot{
    display:block;
    width:100%;
    flex:none;
  }
  table.review-table tr, table.pipeline-table tr{
    display:table;
    width:100%;
    table-layout:fixed;
  }
  table.review-table > tbody.scroll-y, table.pipeline-table > tbody.scroll-y{
    flex:1 1 auto;
    min-height:56px;
    height:auto;
    overflow-y:auto;
  }
  table.review-table > tfoot tr.total-row td, table.pipeline-table > tfoot tr.total-row td{
    background:var(--card);
    font-weight:800;
    border-top:2px solid var(--border);
    border-bottom:none;
  }
  table.review-table > tfoot tr.total-row td.total-label, table.pipeline-table > tfoot tr.total-row td.total-label{ color:var(--text); }
  /* 완료/실주 분할 레이아웃 */
  .split-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-5);
  }
  .split-col{
    min-width:0;
    border-radius:var(--radius-md);
    padding:6px;
    margin:-6px;
  }
  .split-col h3{ font-size:var(--fs-6); margin:0 0 14px; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:space-between; }
  /* 월별매출표 접기/펼치기 */
  .collapse-toggle{
    cursor:pointer;
    color:var(--primary);
    font-size:var(--fs-4);
    font-weight:700;
    text-decoration:underline;
    white-space:nowrap;
  }
  /* 선택월 예상매출 + 구매결정 파이프라인 영역 (1:3 분할) */
  .split-row.pipeline-row{ grid-template-columns:1fr 3fr; }
  /* 이월,담당자,고객사명,제품명,영업단계,매출액,영업구분,납품일(맨뒤로) — 합 100%.
     확인/정리 필요 매출(pipeline-review-table)과 폭을 완전히 통일해 탭 전환시 표가 움직이지 않게 한다. */
  table.pipeline-table th:nth-child(1), table.pipeline-table td:nth-child(1){ width:5%; }
  table.pipeline-table th:nth-child(2), table.pipeline-table td:nth-child(2){ width:9%; }
  table.pipeline-table th:nth-child(3), table.pipeline-table td:nth-child(3){ width:19%; }
  table.pipeline-table th:nth-child(4), table.pipeline-table td:nth-child(4){ width:15%; }
  table.pipeline-table th:nth-child(5), table.pipeline-table td:nth-child(5){ width:12%; }
  table.pipeline-table th:nth-child(6), table.pipeline-table td:nth-child(6){ width:12%; }
  table.pipeline-table th:nth-child(7), table.pipeline-table td:nth-child(7){ width:10%; }
  table.pipeline-table th:nth-child(8), table.pipeline-table td:nth-child(8){ width:10%; }
  table.pipeline-table th:nth-child(9), table.pipeline-table td:nth-child(9){ width:8%; }
  /* 예상 추가 매출 / 확인·정리 필요 매출 탭 전환 */
  .pipeline-period{
    font-size:var(--fs-6);
    font-weight:700;
    color:var(--text);
    flex:none;
  }
  /* 이월 체크 — 체크박스 칸 + 체크된 행 주황 강조 */
  td.cb-cell{ text-align:center; }
  td.cb-cell input[type="checkbox"]{ width:15px; height:15px; cursor:pointer; accent-color:var(--accent2); }
  table.pipeline-table tbody tr.excluded td, table.pipeline-review-table tbody tr.excluded td{ background:var(--exclude-bg)!important; }
  table.pipeline-table tbody tr.excluded:hover td, table.pipeline-review-table tbody tr.excluded:hover td{ background:#ffd9a0!important; }
  /* 신규등록/수주 "보고서 포함" 체크 — 체크된 행 파란 강조(이월의 주황과 구분) */
  table.review-table tbody tr.row-selected td{ background:var(--primary-light)!important; }
  table.review-table tbody tr.row-selected:hover td{ background:#d5ddee!important; }
  /* 이월/신규등록/수주 체크 시 행 아래 표시되는 메모 입력 */
  tr.memo-row td{ background:var(--surface2); padding:8px 10px 10px; }
  tr.memo-row:hover td{ background:var(--surface2)!important; }
  .memo-input{
    width:100%;
    min-height:44px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:7px 9px;
    font-size:var(--fs-5);
    font-family:inherit;
    color:var(--text);
    background:#fff;
    resize:vertical;
  }
  .memo-input:focus{ outline:none; border-color:var(--primary); }

  /* 주간 체크리스트 탭 — 애플 미리알림 스타일 참고, 좌(이번주+완료)/우(이전 주간) 2단 배치 */
  /* 전달사항 제목/상세·다중 담당자 */
  /* 이전 주간 미완료(이월) 목록 — 담당자 선택 버튼/예정일 입력은 숨기고 아바타 표시만 유지 */
  .tab-badge{ display:inline-block; min-width:12px; padding:1px 7px; margin-left:6px; border-radius:var(--radius-full); background:#dc2626; color:#fff; font-size:var(--fs-2); font-weight:700; vertical-align:1px; }
  /* 전달사항 2줄 레이아웃 — 담당자 이름이 잘리지 않게 아래 줄에 전부 표시 */

/* ============================================================
   도구 줄(검색 · 필터 · 정렬) 공용 부품

   채널이 처음 만들었고, 주소록이 같은 모양을 쓰게 되었다.
   같은 값을 두 화면의 page.css 에 각각 적으면 한쪽만 고쳐져 반드시 어긋난다.
   그래서 값을 여기 한 곳으로 옮기고 두 화면이 이 클래스를 그대로 쓴다.
   ⚠️ **모양만 여기 있다.** 무엇을 거르고 무엇으로 정렬하는지는 화면마다 다르므로 각자 page.js 가 갖는다.

     .tbar         도구 줄 (팝업의 기준 자리라 position:relative)
     .tbar-q       검색칸 감싸개
     .tbar-b       도구 버튼 (b 태그로 숫자를 강조한다)
     .tbar-sp      남는 자리 밀개
     .tbar-pop     버튼 아래로 열리는 작은 목록
   ============================================================ */
.tbar{ position:relative; display:flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-3); flex-wrap:wrap; }
.tbar-sp{ flex:1; }
.tbar-q input{
  width:200px; box-sizing:border-box; padding:5px 10px;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:var(--fs-3); color:var(--text); background:#fff;
}
.tbar-b{
  border-width:1px; border-style:solid; border-color:var(--line); background:#fff; color:var(--muted);
  border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-2); font-weight:500;
  /* 183차 · C-064 — 한글은 글자 사이 어디서나 줄바꿈이 된다. flex 줄이 좁아지면
     버튼 글자가 세로로 한 자씩 쪼개져 보이던 것을 막는다(「선택일 보기」에서 실제로 겪었다). */
  white-space:nowrap;
}
.tbar-b:hover{ background:var(--row-hover); }
.tbar-b b{ font-weight:800; color:var(--primary); }
.tbar-pop{
  position:absolute; top:34px; z-index:60; min-width:196px; max-width:280px; max-height:340px; overflow:auto;
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-md); box-shadow:0 12px 30px rgba(0,0,0,.14); padding:6px;
}
.tbar-pop-h{ font-size:var(--fs-1); font-weight:800; color:var(--muted); padding:6px 8px 4px; }
.tbar-pop-h.sub{ padding-top:10px; }
.tbar-pop-i{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left;
  border:0; background:transparent; padding:5px 8px; border-radius:var(--radius-sm); cursor:pointer;
  font-family:inherit; font-size:var(--fs-3); color:var(--text);
}
.tbar-pop-i:hover{ background:var(--row-hover); }
.tbar-pop-i.as-text{ color:var(--muted); font-size:var(--fs-2); cursor:default; line-height:1.6; }
.tbar-ck{ width:14px; flex:0 0 14px; color:var(--primary); font-weight:800; }

  /* 164차(C-047) — 우리 팝업(브라우저 기본 alert · confirm · prompt 대신)
     · 화면 한가운데 · 어두운 뒷막 · 토큰 색과 모서리 · 버튼은 다른 화면과 같은 .btn
     · 마크업은 index.php 부트 스크립트가 만든다(로그인 화면에서도 떠야 해서 js/ 보다 먼저 있다) */
  .ui-pop-back{
    position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.45);
    display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
  }
  .ui-pop{
    background:var(--card); color:var(--text);
    border-radius:var(--radius-xl); box-shadow:0 22px 60px rgba(22,34,60,.22);
    width:min(460px, 92vw); max-height:80vh; display:flex; flex-direction:column; overflow:hidden;
  }
  .ui-pop-h{
    padding:16px 20px 0; font-size:var(--fs-6); font-weight:700; color:var(--text);
  }
  .ui-pop-b{
    padding:12px 20px 4px; font-size:var(--fs-4); line-height:1.7; color:var(--text-secondary);
    overflow-y:auto; white-space:pre-wrap; word-break:break-word;
  }
  .ui-pop-in{
    margin:8px 20px 0; padding:8px 10px; width:calc(100% - 40px);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    font-family:inherit; font-size:var(--fs-4); color:var(--text); background:var(--card);
  }
  .ui-pop-f{
    display:flex; justify-content:flex-end; gap:var(--sp-3); padding:16px 20px 18px;
  }
  .ui-pop-f .btn{ min-width:84px; justify-content:center; }

  /* 행위 알림 팝업(토스트) — 화면 오른쪽 아래, 잠깐 떴다 사라진다(js/01-server.js nasToast · 222차) */
  .toast-pop-wrap{
    position:fixed; right:20px; bottom:20px; z-index:9500;
    display:flex; flex-direction:column; gap:8px; align-items:flex-end;
    pointer-events:none;
  }
  .toast-pop{
    max-width:360px; padding:11px 16px; border-radius:var(--radius-md);
    background:var(--text); color:#fff; font-size:var(--fs-3); font-weight:700; line-height:1.4;
    box-shadow:var(--shadow-md); animation:toastPopIn .22s ease-out;
  }
  .toast-pop.out{ animation:toastPopOut .28s ease-in forwards; }
  @keyframes toastPopIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  @keyframes toastPopOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(10px); } }