/* =============================================
   제어파트 PMS v2.6 — Main Stylesheet (Redesign)
   ============================================= */

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  /* Backgrounds — LINKS PRO 엔터프라이즈 팔레트 (옅은 회색 배경 + 흰 카드 + 다크 네이비 사이드바)
     예전 다크/라이트 토글 두 벌 대신, 토글 없이 이 팔레트 하나만 쓴다(테마 속성값과 무관하게 항상 적용). */
  --bg-base:        #f0f2f5;
  --bg-page:        #f0f2f5;
  --bg-nav:         #ffffff;   /* 2026-08 Enterprise 개편 1단계: 네이비 -> 흰색 사이드바 */
  --bg-card:        #ffffff;
  --bg-card-2:      #f5f6f8;
  --bg-card-hover:  #eaf1fb;
  --bg-input:       #ffffff;
  --bg-elevated:    #ffffff;
  --bg-hover:       var(--bg-card-hover);

  /* 사이드바/헤더 전용 톤 (2026-08 Enterprise 개편 1단계) */
  --nav-text:         #444444;
  --nav-text-hover:   #1a1d24;
  --nav-hover-bg:     #f2f4f7;
  --nav-active-bg:    #5b91cc;
  --nav-active-text:  #ffffff;
  --nav-active-border:#2f5fa8;

  /* 섹션 헤더(페이지 제목 바) 전용 톤 (2026-08 Enterprise 개편 4단계) */
  --section-bar-bg:   #20242e;
  --section-item-text:#c7cbd4;

  /* Borders */
  --border:         #e2e5eb;
  --border-light:   #d9dce3;
  --border-accent:  rgba(25,118,210,.3);

  /* Accent (Blue) */
  --accent:         #1976d2;
  --accent-hover:   #125ba8;
  --accent-dim:     rgba(25,118,210,.08);
  --accent-glow:    rgba(25,118,210,.15);

  /* Status */
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #6366f1;

  --status-waiting: #ef4444;
  --status-progress:#f59e0b;
  --status-done:    #10b981;
  --status-new:     #1d4ed8;

  /* Text */
  --text-primary:   #1a1d24;
  --text-secondary: #5b6472;
  --text-muted:     #9aa1ad;
  --text-accent:    #1976d2;

  /* 플랫 엔터프라이즈 톤 — 그라데이션 대신 단색 */
  --grad-accent:    #1976d2;
  --grad-success:   #16a34a;
  --grad-warn:      #e6851a;
  --grad-danger:    #dc2626;
  --grad-card:      #ffffff;

  /* Radius — LINKS PRO 밀도 높은 업무용 화면 기준 (4~8px) */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius:    7px;
  --radius-lg: 9px;
  --radius-xl: 12px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(20,25,35,.06);
  --shadow:     0 1px 3px rgba(20,25,35,.08);
  --shadow-lg:  0 4px 16px rgba(20,25,35,.12);
  --shadow-accent: 0 1px 4px rgba(25,118,210,.18);

  /* 테이블 헤더 전용 (진한 남색) */
  --bg-thead:      #2c3a54;
  --border-thead:  #3d4d6a;
  --row-stripe:    #fafafa;
  --row-hover:     #eaf1fb;

  /* Misc */
  --font: 'Noto Sans KR', 'Segoe UI', sans-serif;
  --transition: .18s cubic-bezier(.4,0,.2,1);
  --nav-width: 200px;
  --header-h: 44px;   /* 2026-08 Enterprise 개편 1단계: 60px -> 44px */

  /* Dashboard scale — 반복되는 임의 수치 대신 4px 기반 간격과 공통 높이를 사용한다. */
  --db-space-1: 4px;
  --db-space-2: 8px;
  --db-space-3: 12px;
  --db-space-4: 16px;
  --db-space-5: 24px;
  --db-space-6: 32px;
  --db-control-h: 34px;
  --db-content-max: 1860px;
}

table th {
  background: var(--bg-thead);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* 2026-08: 예전에 걸려있던 zoom:1.2(전체 120% 확대)를 제거했다.
     서버로 접속하는 모니터/해상도가 로컬과 달라지면 zoom으로 인한 물리 픽셀 확대가
     고정 크기 카드 등과 어긋나 글씨가 화면보다 커져 잘려 보이는 문제가 있었다.
     표준 100% 배율로 두고 각 컴포넌트 폰트/여백을 그대로 사용한다.
     (js/datepicker.js, js/editor-utils.js, js/app/mywork.js의 zoom 보정 코드는
      getComputedStyle(...).zoom 값을 동적으로 읽으므로 zoom이 없으면 자동으로 1로
      계산되어 별도 수정 없이도 안전하다.) */
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-primary);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   커스텀 날짜 선택기 (datepicker.js)
   ============================================= */
/* zoom 환경에서 깨지는 네이티브 달력 아이콘 제거 → 커스텀 달력 사용 */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"] { cursor: pointer; }

.dp-popup {
  position: fixed; z-index: 1500;
  width: 236px; padding: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-family: var(--font); user-select: none;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dp-nav {
  background: none; border: none; color: var(--text-secondary);
  font-size: 18px; line-height: 1; width: 26px; height: 26px; cursor: pointer;
  border-radius: var(--radius-sm);
}
.dp-nav:hover { background: var(--bg-card-hover); color: var(--accent); }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-dow span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 3px 0; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.dp-empty { height: 28px; }
.dp-day {
  height: 28px; border: none; background: none; cursor: pointer;
  color: var(--text-primary); font-size: 12px; font-family: var(--font);
  border-radius: var(--radius-sm); transition: background .1s;
}
.dp-day:hover { background: var(--accent-dim); color: var(--accent); }
.dp-day.dp-today { border: 1px solid var(--border-accent); font-weight: 700; }
.dp-day.dp-selected { background: var(--accent); color: #fff; font-weight: 700; }
.dp-day.dp-sun { color: #ef5350; }
.dp-day.dp-sat { color: #5b9cf6; }
.dp-day.dp-selected.dp-sun, .dp-day.dp-selected.dp-sat { color: #fff; }
.dp-dow .dp-sun { color: #ef5350; }
.dp-dow .dp-sat { color: #5b9cf6; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.dp-foot button {
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 11px; padding: 4px 6px; cursor: pointer; font-family: var(--font);
}
.dp-foot .dp-today-btn { color: var(--accent); font-weight: 600; }
.dp-foot button:hover { text-decoration: underline; }

/* =============================================
   공용 기간선택기(DateRangePicker) — daterangepicker.js
   (2026-09, 인콰리·견적 접수일 필터에서 도입, 다른 화면에서도 재사용 가능)
   ============================================= */
.drp-box {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border: 1px solid var(--product-border, var(--border)); border-radius: var(--radius-sm);
  background: var(--bg-input, #fff); cursor: pointer; font-size: 13px;
  color: var(--product-text, var(--text-primary)); user-select: none;
}
.drp-box:hover { border-color: var(--product-accent, var(--accent)); }
.drp-box:focus-visible { outline: 2px solid var(--product-accent, var(--accent)); outline-offset: 1px; }
.drp-box i { color: var(--product-muted, var(--text-muted)); font-size: 11px; flex: 0 0 auto; }
.drp-box-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.drp-popup {
  position: fixed; z-index: 1500;
  background: var(--bg-elevated, #fff); border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.25));
  font-family: var(--font); user-select: none; overflow: hidden;
}
.drp-body { display: flex; }
.drp-sidebar {
  flex: 0 0 108px; display: flex; flex-direction: column; padding: 8px;
  border-right: 1px solid var(--border);
  background: var(--product-subtle, var(--bg-input));
}
.drp-preset-btn {
  text-align: left; background: none; border: none; border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; color: var(--text-primary); cursor: pointer;
  font-family: var(--font); transition: background .1s ease, color .1s ease;
}
.drp-preset-btn:hover { background: var(--accent-dim, rgba(25,118,210,.08)); }
.drp-preset-btn.active { background: var(--accent, #1976d2); color: #fff; font-weight: 700; }

.drp-calendars { padding: 12px 14px 0; min-width: 460px; }
.drp-cal-nav { display: flex; justify-content: space-between; margin-bottom: 2px; }
.drp-nav-btn {
  background: none; border: none; color: var(--text-secondary, var(--text-muted));
  font-size: 13px; width: 24px; height: 24px; cursor: pointer; border-radius: var(--radius-sm);
}
.drp-nav-btn:hover { background: var(--bg-card-hover, var(--product-subtle)); color: var(--accent); }
.drp-cal-row { display: flex; gap: 20px; }
.drp-cal { flex: 1; min-width: 0; }
.drp-cal-head { text-align: center; margin-bottom: 6px; }
.drp-cal-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.drp-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.drp-cal-dow span { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-muted); padding: 3px 0; }
.drp-cal-dow .drp-sun { color: #ef5350; }
.drp-cal-dow .drp-sat { color: #5b9cf6; }
.drp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.drp-day {
  height: 26px; border: none; background: none; cursor: pointer;
  color: var(--text-primary); font-size: 11.5px; font-family: var(--font);
  border-radius: 50%; position: relative;
}
.drp-day-empty { cursor: default; }
.drp-day:not(.drp-day-empty):hover { background: var(--accent-dim, rgba(25,118,210,.1)); }
.drp-day.drp-sun { color: #ef5350; }
.drp-day.drp-sat { color: #5b9cf6; }
.drp-day.drp-today { box-shadow: inset 0 0 0 1px var(--accent, #1976d2); font-weight: 700; }
.drp-day.drp-in-range { background: var(--accent-dim, rgba(25,118,210,.14)); border-radius: 0; }
.drp-day.drp-range-start, .drp-day.drp-range-end {
  background: var(--accent, #1976d2); color: #fff; font-weight: 700;
}
.drp-day.drp-range-start.drp-sun, .drp-day.drp-range-start.drp-sat,
.drp-day.drp-range-end.drp-sun, .drp-day.drp-range-end.drp-sat { color: #fff; }
/* 시작~끝 사이를 끊김 없이 이어 보이게 — 시작일은 오른쪽만, 끝일은 왼쪽만 사각으로 채운다 */
.drp-day.drp-range-start:not(.drp-range-end)::after,
.drp-day.drp-range-end:not(.drp-range-start)::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50%;
  background: var(--accent-dim, rgba(25,118,210,.14)); z-index: -1;
}
.drp-day.drp-range-start:not(.drp-range-end)::after { right: 0; }
.drp-day.drp-range-end:not(.drp-range-start)::before { left: 0; }

.drp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--product-subtle, var(--bg-input));
}
.drp-foot-text { font-size: 12px; color: var(--text-secondary, var(--text-primary)); font-weight: 600; }
.drp-foot-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.drp-btn {
  border: none; border-radius: var(--radius-sm); padding: 6px 16px; font-size: 12px;
  font-weight: 700; cursor: pointer; font-family: var(--font);
}
.drp-btn-cancel { background: var(--danger, #ef4444); color: #fff; }
.drp-btn-cancel:hover { opacity: .88; }
.drp-btn-apply { background: var(--success, #10b981); color: #fff; }
.drp-btn-apply:hover { opacity: .88; }

@media (max-width: 640px) {
  .drp-body { flex-direction: column; }
  .drp-sidebar { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .drp-calendars { min-width: 0; }
  .drp-cal-row { flex-direction: column; gap: 10px; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b0b6c0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #8a92a0; }

/* =============================================
   LOGIN OVERLAY
   ============================================= */
#login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at 30% 40%, rgba(77,138,240,.06) 0%, var(--bg-base) 70%);
  display: flex; align-items: center; justify-content: center;
}
#login-overlay.hidden { display: none; }

#login-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  width: 380px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(77,138,240,.08);
  position: relative;
  overflow: hidden;
}
#login-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-accent);
}

#login-logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 19px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px;
}
#login-logo i {
  width: 40px; height: 40px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 18px;
}
#login-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 32px; }

.login-field { margin-bottom: 18px; }
.login-field label {
  display: block; font-size: 11px; color: var(--text-secondary);
  margin-bottom: 7px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
}
.login-field select,
.login-field input[type="password"] {
  width: 100%; padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  color: var(--text-primary); font-size: 14px;
  font-family: var(--font); box-sizing: border-box; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.login-field select:focus,
.login-field input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.login-remember-row { display: flex; gap: 18px; margin: -6px 0 16px; }
.login-remember-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.login-remember-item input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0;
}
#login-error { color: #f87171; font-size: 13px; min-height: 22px; margin-bottom: 4px; }
#login-btn {
  width: 100%; padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--grad-accent);
  color: #fff; font-size: 14px; font-weight: 600;
  font-family: var(--font); border: none; cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  letter-spacing: .3px;
}
#login-btn:hover { opacity: .9; transform: translateY(-1px); }

/* =============================================
   HEADER
   ============================================= */
#app-header {
  position: sticky; top: 0; z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  height: var(--header-h);
  display: flex; align-items: center; padding: 0 24px;
}

.header-inner {
  /* 2026-09: 예전엔 화면이 넓어지면(1600px 초과) .header-inner가 가운데로
     쏠려 우측 메뉴(로그아웃 등)가 본문보다 안쪽에서 끝나는 버그가 있었다
     (본문은 이미 max-width 해제로 풀와이드인데 헤더만 1600px에 갇혀 있었음).
     본문과 똑같이 폭 제한 없이 #app-header 끝까지 채워서, 우측 메뉴 그룹의
     오른쪽 끝선이 #app-header의 padding-right(=본문 표준 우측 여백)에 바로
     맞닿도록 한다. */
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

.header-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 700; letter-spacing: -.2px;
}
.header-title-short { display: none; }
.header-title .fa-gear {
  color: var(--accent); font-size: 1rem;
}

.version-badge {
  font-size: .62rem; font-weight: 700;
  background: var(--bg-card-2);
  padding: 1px 7px; border-radius: 2px;
  color: var(--text-secondary); letter-spacing: .3px;
  border: 1px solid var(--border);
}

/* Header Right */
.header-right { display: flex; align-items: center; gap: 8px; }
/* LINKS PRO 스타일로 단일화 — 다크/라이트 토글 버튼은 더 이상 노출하지 않는다 (기능/로직은 그대로 둠) */
#btn-theme-toggle { display: none; }
#header-user-info {
  color: var(--text-secondary); font-size: 12.5px;
  display: flex; align-items: center; gap: 6px;
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  padding: 4px 10px; border-radius: 2px;
}
#header-user-info i { color: var(--accent); }
#header-username { color: var(--text-primary); font-weight: 600; font-size: 12.5px; }

/* 헤더 내부 버튼만 compact/각지게 (전체 .btn 공통 스타일은 8단계에서 별도 정리) */
#app-header .btn {
  border-radius: 2px; padding: 6px 12px; font-size: .78rem;
}
#app-header .btn-ghost {
  padding: 6px 9px; border-radius: 2px;
}

.btn-ghost {
  background: transparent; border: 1px solid var(--border-light);
  color: var(--text-secondary); padding: 7px 11px;
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; transition: all var(--transition);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* 매입관리 표(발주서/결재내역/계약서) 공용: 기준정보 연동 셀(프로젝트/협력업체/계정)
   + 인라인 빠른선택 팝오버 — 클릭하면 행 전체 상세팝업이 아니라 이 자리에서만 값이 바뀐다. */
.po-cell-link { cursor: pointer; }
/* 2026-09(지급관리): '매입관리 > 계약서' 목록 행 클릭 시 지급관리 상세로 이동 —
   다른 sm-table(발주서 등)에는 영향 없도록 이 테이블에만 커서/호버를 준다.
   수정(연필)/삭제 버튼, 프로젝트·업체 인라인수정 칸은 각자 이미 cursor:pointer가
   있고 클릭 시 stopPropagation되어 행 클릭과 충돌하지 않는다. */
#po-table-contracts tbody tr { cursor: pointer; }
#po-table-contracts tbody tr:hover td { background: var(--row-hover); }
/* 2026-09(계약번호 포맷 변경): 하이픈 없는 OP{YYMMDD}{순번3자리} 코드가 더
   또렷하게 보이도록 계약번호 열에만 고정폭 폰트를 준다. 다른 표(발주번호 등)는
   그대로 둔다. */
.po-contract-no-cell {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.po-cell-link:hover { background: var(--accent-dim); text-decoration: underline; text-decoration-style: dotted; }
.acct-quickpick-pop {
  position: fixed; z-index: 3000;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: 6px; max-width: 280px;
}
.acct-quickpick-input {
  width: 100%; box-sizing: border-box; padding: 6px 8px; margin-bottom: 4px;
  border: 1px solid var(--border-light); border-radius: 6px;
  font-size: 13px; font-family: var(--font); background: var(--bg-primary); color: var(--text-primary);
}
.acct-quickpick-list { max-height: 220px; overflow-y: auto; }
.acct-quickpick-group-label {
  font-size: 11px; color: var(--text-tertiary); font-weight: 700; padding: 4px 8px 2px;
}
.acct-quickpick-divider { height: 1px; background: var(--border-light); margin: 4px 2px; }
.acct-quickpick-item {
  padding: 7px 8px; font-size: 13px; color: var(--text-primary);
  border-radius: 5px; cursor: pointer;
}
.acct-quickpick-item:hover { background: var(--accent-dim); color: var(--accent); }
.acct-quickpick-empty { padding: 10px 8px; font-size: 12px; color: var(--text-tertiary); }
/* 2026-09: 매입현황 프로젝트 연결 해제용 항목 — 다른 항목과 구분되도록 톤을 낮춘다. */
.acct-quickpick-clear { color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.acct-quickpick-clear:hover { background: var(--danger-dim, rgba(239,68,68,.12)); color: var(--danger, #EF4444); }

/* 2026-09(14차): 매입 목록 > 프로젝트 연결 팝업 전용 확장(wide) 변형 — 발주서/
   계약서 쪽 프로젝트·협력업체 팝업(기본 acct-quickpick-pop, 280px)은 그대로 두고
   이 클래스가 붙은 경우에만 더 넓고 길게 보여준다(openPoQuickPicker의 wide 옵션). */
.acct-quickpick-pop-wide {
  max-width: 520px;
  padding: 10px;
  border-radius: 8px;
  border-color: #E2E8F0;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}
.acct-quickpick-pop-wide .acct-quickpick-input {
  padding: 9px 12px; font-size: 14px; margin-bottom: 6px;
}
.acct-quickpick-pop-wide .acct-quickpick-list { max-height: 440px; }
.acct-quickpick-pop-wide .acct-quickpick-item {
  padding: 9px 12px; font-size: 13.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acct-quickpick-pop-wide .acct-quickpick-group-label { padding: 6px 12px 4px; }

/* 알림 벨 */
.notif-wrap { position: relative; display: flex; align-items: center; height: 100%; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  line-height: 1;
}
.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 500;
  width: 340px; max-height: 420px; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  overflow: hidden;
}
.notif-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.notif-read-all-btn {
  background: none; border: none; color: var(--accent); font-size: 12px;
  cursor: pointer; font-family: var(--font);
}
.notif-read-all-btn:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; max-height: 380px; }
.notif-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border); background: none; cursor: pointer;
  font-family: var(--font); transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background: var(--accent-dim); }
.notif-item-msg { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.notif-item-time { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.notif-empty { padding: 30px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* =============================================
   APP LAYOUT
   ============================================= */
#app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* =============================================
   LEFT NAV
   ============================================= */
#left-nav {
  width: var(--nav-width); flex-shrink: 0;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 8px 0;
  gap: 0;
  overflow-y: auto;
}

.nav-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #6b7d99; text-transform: uppercase;
  padding: 8px 12px 4px; margin-top: 4px;
}

/* 사이드바 2026-08 Enterprise 개편 1단계: 흰 배경 + 선택 메뉴만 파란 배경 */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 0;
  background: none; border: none; border-left: 3px solid transparent;
  color: var(--nav-text); font-size: .8rem;
  font-family: var(--font); cursor: pointer;
  transition: all var(--transition);
  width: 100%; text-align: left; white-space: nowrap;
  position: relative;
}
.nav-item i {
  font-size: .82rem; width: 16px; text-align: center;
  flex-shrink: 0; transition: color var(--transition);
  color: var(--text-muted);
}
.nav-item:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-text-hover);
}
.nav-item:hover i { color: var(--nav-text-hover); }

.nav-item.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border-left-color: var(--nav-active-border);
  font-weight: 600;
}
.nav-item.active i { color: var(--nav-active-text); }

/* =============================================
   MAIN CONTENT
   ============================================= */
#app-main {
  flex: 1; overflow-y: auto;
  padding: 28px 32px 56px;
  background: radial-gradient(ellipse at 60% 0%, rgba(77,138,240,.04) 0%, transparent 60%);
}

.tab-page { display: flex; flex-direction: column; gap: 24px; }

/* =============================================
   AI TAB
   ============================================= */
/* vh 기반 높이는 브라우저 창 크기(작업표시줄 등)에 따라 어긋나 입력창이 화면 밖으로
   밀려날 수 있어, 샵마스터 탭과 동일하게 flex로 #app-main의 남은 공간을 정확히 채운다. */
#tab-ai { gap: 0; overflow: hidden; flex: 1; min-height: 0; }
#app-main:has(#tab-ai:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-ai:not([style*="none"])) .tab-page:not(#tab-ai) { display: none !important; }
#ai-page {
  display: flex; flex-direction: column; height: 100%; flex: 1; min-height: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ai-page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(77,138,240,.08), rgba(124,92,252,.06));
  flex-shrink: 0;
}
#tab-ai .ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
#tab-ai .ai-msg-bubble { max-width: 72%; }
#tab-ai .ai-chat-input-wrap {
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--bg-input);
}

/* =============================================
   METRIC CARDS
   ============================================= */
#metrics-section {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
}

#payments-summary-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px;
}
@media (max-width: 900px) {
  #payments-summary-cards { grid-template-columns: repeat(1,1fr); }
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  transition: border-color var(--transition), background var(--transition);
  position: relative; overflow: hidden;
}
.metric-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-accent); opacity: .7;
}
.metric-card.status-waiting::before  { background: var(--grad-danger); }
.metric-card.status-progress::before { background: var(--grad-warn); }
.metric-card.status-done::before     { background: var(--grad-success); }

.metric-card:hover { border-color: var(--border-light); background: var(--bg-card-hover); }

.metric-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--accent); flex-shrink: 0;
}
.status-waiting  .metric-icon {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25);
  color: var(--status-waiting);
}
.status-progress .metric-icon {
  background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25);
  color: var(--status-progress);
}
.status-done     .metric-icon {
  background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25);
  color: var(--status-done);
}

.metric-body { flex: 1; min-width: 0; }

.metric-value {
  font-size: 2.2rem; font-weight: 800; line-height: 1;
  letter-spacing: -1px;
}
.metric-label {
  font-size: .78rem; color: var(--text-secondary);
  margin-top: 5px; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.metric-label .status-dot-sm {
  width: 6px; height: 6px; border-radius: 50%;
}
.status-waiting  .status-dot-sm { background: var(--status-waiting); box-shadow: 0 0 5px var(--status-waiting); }
.status-progress .status-dot-sm { background: var(--status-progress); box-shadow: 0 0 5px var(--status-progress); }
.status-done     .status-dot-sm { background: var(--status-done); box-shadow: 0 0 5px var(--status-done); }

/* =============================================
   SECTION COMMON
   ============================================= */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
  background: var(--section-bar-bg);
  padding: 0 16px; min-height: 38px; border-radius: 2px;
}
.section-header h2 {
  font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px; color: #fff;
  padding: 9px 0;
}
.section-header h2 i {
  width: auto; height: auto; border-radius: 0;
  background: none; border: none;
  color: #fff; font-size: .82rem;
}
/* 다크 바 위에서 대비가 약해지는 outline 버튼(엑셀 다운로드/초기화 등)만 밝은 칩으로 보정 */
.section-header .btn-outline,
.pd-topbar .btn-outline {
  background: var(--bg-card); border-color: var(--border); color: var(--text-secondary);
}
.section-header .btn-outline:hover,
.pd-topbar .btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* =============================================
   LIST-FILTER 공용 컴포넌트 (조회·등록·출력·설정 툴바 + 7칸 필터 그리드)
   프로젝트/인콰리·견적/자금관리 등 리스트 화면에서 공용으로 쓴다.
   ============================================= */
.lf-toolbar { display: flex; align-items: stretch; background: #12151c; border-radius: 2px 2px 0 0; }
.lf-tb-item {
  display: flex; align-items: center; gap: 7px; padding: 9px 18px;
  color: #c7cbd4; font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: background .12s, color .12s; border: none; background: none; font-family: inherit;
}
.lf-tb-item i { font-size: .8rem; }
.lf-tb-item:hover { background: #2a3040; color: #fff; }
.lf-tb-item:disabled, .lf-tb-item.disabled { opacity: .32; cursor: not-allowed; }
.lf-toolbar + .section-header { border-radius: 0; margin-bottom: 0; }
.lf-hint { color: #e8c46a; font-size: 11px; padding: 9px 0; }
/* 타이틀 바 한 줄 안에 조회/등록/출력/설정 툴바를 오른쪽에 같이 넣는 버전
   (별도 줄로 뺀 .lf-toolbar 대신, 제목과 한 줄에 합칠 때 사용) */
.lf-header-with-toolbar { justify-content: space-between; }
.lf-header-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.lf-toolbar-inline { display: flex; align-items: stretch; }
.lf-toolbar-inline .lf-tb-item { padding: 9px 14px; }

.lf-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-card); border: 1px solid var(--border); border-top: none; }
.lf-cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 6px 14px;
}
.lf-grid .lf-cell:nth-child(4n) { border-right: none; }
.lf-cell.span2 { grid-column: span 2; }
.lf-cell.nodata .lf-label { color: var(--danger); }
.lf-cell.nodata select, .lf-cell.nodata input { color: var(--danger); opacity: .6; font-style: italic; }
.lf-label { flex: 0 0 68px; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.lf-field { flex: 1; min-width: 0; position: relative; }
.lf-field select, .lf-field input {
  width: 100%; height: 22px; box-sizing: border-box; border: none; border-radius: 0;
  padding: 0 18px 0 2px; line-height: 22px;
  font-size: 12px; background: transparent; color: var(--text-secondary);
  appearance: none; -webkit-appearance: none; font-family: inherit;
}
.lf-field.date-range { display: flex; align-items: center; gap: 4px; }
.lf-field.date-range input { padding-right: 2px; flex: 1; min-width: 0; }
.lf-field.date-range span { color: var(--text-muted); font-size: 11px; flex: 0 0 auto; }
.lf-field .chev { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--text-muted); pointer-events: none; }
.lf-field select:disabled { cursor: not-allowed; }

/* 매입관리 필터바 그리드 비율은 시스템 공통 표준(1:1:1:2)으로 통일했다 —
   실제 규칙은 아래 "공통 표준 필터바" 블록의 #purchasing-section 부분 참고. */

/* 매입관리 헤더: "매입관리" 제목 + 발주건/계약건 탭을 왼쪽에 묶어서 배치하고(.po-header-left),
   건수·합계금액 요약(#po-summary-cards)은 프로젝트/자금관리 화면과 동일하게 .metric-plain
   클래스를 그대로 재사용해 크기를 맞춘 채 헤더 오른쪽으로 올린다. */
.po-header-left { display: flex; align-items: center; gap: 18px; min-width: 0; flex-wrap: wrap; }
#purchasing-section .pd-tabs { border-bottom: 0; margin-bottom: 0; }
#purchasing-section .pd-tab { padding: 6px 12px; font-size: .8rem; }
#purchasing-section .section-header #po-summary-cards { display: flex; margin-bottom: 0; flex: 0 1 auto; }

/* =============================================
   MY WORK (내 업무)
   ============================================= */
#mywork-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
#mywork-section .section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; }
.db-card-body { padding: 16px 20px 20px; }
.mywork-name { color: var(--text-muted); font-weight: 400; font-size: .9rem; }
.mywork-deadline-badge { display: inline-flex; gap: 8px; }
.mywork-deadline-badge > span { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.mywork-deadline-badge .dl-overdue { color: var(--danger); background: rgba(244,63,94,0.12); }
.mywork-deadline-badge .dl-imminent { color: #f59e0b; background: rgba(245,158,11,0.12); }
.mywork-deadline-badge .dl-team { color: var(--text-muted); background: var(--bg-card-2); font-weight: 600; }
.mywork-deadline-badge > span { cursor: help; }
/* 팀 전체 칩 안의 수량은 지연=빨강 / 임박=주황으로 색상 표기 */
.mywork-deadline-badge .dlv-overdue  { color: var(--danger); }
.mywork-deadline-badge .dlv-imminent { color: #f59e0b; }
/* 값이 0이면 회색으로 (표시는 유지) */
.mywork-deadline-badge > span.is-zero { color: var(--text-muted); background: var(--bg-card-2); }
.mywork-deadline-badge b.is-zero { color: var(--text-muted); }
/* 지연/임박 상세 목록 툴팁 */
.dl-tooltip {
  position: fixed; z-index: 200; display: none;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  /* zoom:1.2 환경이라 vw/vh는 왜곡되므로 px로 고정한다(위치 보정은 JS에서 처리). */
  padding: 10px 12px; min-width: 320px; max-width: 440px; max-height: 340px; overflow-y: auto;
  font-size: .8rem; color: var(--text-primary);
}
.dlt-title { font-weight: 700; font-size: .78rem; color: var(--text-secondary); margin-bottom: 6px; }
.dlt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; border-top: 1px solid var(--border); cursor: pointer; border-radius: 4px; }
.dlt-row:hover { background: var(--bg-card-hover); }
.dlt-main { display: flex; flex-direction: column; min-width: 0; }
.dlt-main b { font-size: .82rem; color: var(--text-primary); }
.dlt-proj { font-size: .72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.dlt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.dlt-overdue { color: var(--danger); font-weight: 700; font-size: .75rem; }
.dlt-imminent { color: #f59e0b; font-weight: 700; font-size: .75rem; }
.dlt-rem { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.dlt-empty { padding: 10px 2px; text-align: center; color: var(--text-muted); font-size: .8rem; }
.dlt-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); font-size: .7rem; color: var(--text-muted); }
.mywork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .mywork-grid { grid-template-columns: 1fr; } }
.mywork-card {
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.mywork-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: .9rem; color: var(--text-primary);
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.mywork-card-head i { color: var(--accent); margin-right: 6px; }
.mywork-count { background: var(--accent-dim); color: var(--accent); border-radius: 10px; padding: 1px 9px; font-size: .74rem; font-weight: 700; }
.mywork-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }
.mywork-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px); cursor: pointer; transition: background .15s;
}
.mywork-item:hover { background: var(--bg-card-hover); }
.mywork-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mywork-item-title { font-size: .84rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mywork-item-sub { font-size: .72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mywork-due { flex-shrink: 0; font-size: .72rem; font-weight: 600; color: var(--text-muted); padding: 2px 8px; border-radius: 10px; background: var(--bg-card-2); }
.mywork-due.imminent { color: #f59e0b; background: rgba(245,158,11,0.12); }
.mywork-due.overdue { color: var(--danger); background: rgba(244,63,94,0.12); }
.mywork-notif.unread .mywork-item-title { font-weight: 700; }
.mywork-notif.unread { position: relative; }
.mywork-notif.unread::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mywork-empty { padding: 18px 10px; text-align: center; color: var(--text-muted); font-size: .82rem; }

/* =============================================
   권한(역할) — 배지 + 뷰어 편집 UI 숨김
   ============================================= */
.header-role-badge { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 2px; margin-left: 4px; vertical-align: middle; }
.header-role-badge.role-admin  { color: #f59e0b; background: rgba(245,158,11,0.15); }
.header-role-badge.role-editor { color: var(--accent); background: var(--accent-dim, rgba(77,138,240,0.15)); }
.header-role-badge.role-viewer { color: var(--text-muted); background: var(--bg-card-2); }
/* 읽기 전용(viewer): 주요 생성/편집 컨트롤 숨김 (실제 차단은 서버가 담당) */
[data-role="viewer"] #btn-hdr-register,
[data-role="viewer"] #btn-journal-new,
[data-role="viewer"] .task-add-row,
[data-role="viewer"] .task-move-group,
[data-role="viewer"] .wbs-date-badge,
[data-role="viewer"] .status-actions,
[data-role="viewer"] .card-header-edit-btn,
[data-role="viewer"] .card-header-delete-btn,
[data-role="viewer"] .sm-detail-actions,
[data-role="viewer"] #btn-sm-add-doc,
[data-role="viewer"] #btn-sm-add-rev,
[data-role="viewer"] #btn-sm-add-panel,
[data-role="viewer"] #btn-sm-parse-report,
[data-role="viewer"] #btn-sm-save-reports,
[data-role="viewer"] #btn-sm-weekly-generate,
[data-role="viewer"] #btn-sm-weekly-save,
[data-role="viewer"] #btn-sm-weekly-delete,
[data-role="viewer"] .task-checkbox,
[data-role="viewer"] .btn-settings-del-task,
[data-role="viewer"] .btn-task-move,
[data-role="viewer"] .settings-task-add,
[data-role="viewer"] .journal-template-control,
[data-role="viewer"] #journal-editor-toolbar,
[data-role="viewer"] #journal-file-drop,
[data-role="viewer"] #btn-journal-delete,
[data-role="viewer"] #btn-doc-upload,
[data-role="viewer"] .doc-row-kebab { display: none !important; }
/* 뷰어: 인라인 편집(contenteditable) 비활성 느낌 */
[data-role="viewer"] .task-label[contenteditable],
[data-role="viewer"] .settings-task-name[contenteditable] { pointer-events: none; }
/* 설정 화면 역할 관리 */
.settings-item-actions { display: flex; align-items: center; gap: 8px; }
.settings-role-select { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-primary); font-size: .78rem; padding: 3px 6px; font-family: var(--font); cursor: pointer; }
.settings-role-tag { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.settings-role-tag.role-admin  { color: #f59e0b; background: rgba(245,158,11,0.13); }
.settings-role-tag.role-editor { color: var(--accent); background: var(--accent-dim, rgba(77,138,240,0.13)); }
.settings-role-tag.role-viewer { color: var(--text-muted); background: var(--bg-card-2); }

/* =============================================
   MANPOWER (공수 분석)
   ============================================= */
#manpower-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
#manpower-section .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.manpower-total { font-size: .95rem; font-weight: 700; color: var(--accent); }
.manpower-typebar { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 14px; }
.mp-type { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-secondary); }
.mp-type b { color: var(--text-primary); }
.mp-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.manpower-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .manpower-charts { grid-template-columns: 1fr; } }
.manpower-chart-card { min-width: 0; }
.manpower-chart-title { font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.manpower-chart { width: 100%; height: 260px; }

/* =============================================
   TIMELINE SECTION
   ============================================= */
#timeline-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#timeline-section .section-header { margin-bottom: 0; }

/* =============================================
   FILTER BAR
   ============================================= */
.filter-bar { display: flex; gap: 6px; align-items: center; }
.filter-btn {
  background: none; border: none;
  color: var(--section-item-text); padding: 8px 14px;
  border-radius: 2px; cursor: pointer; font-size: .8rem;
  font-family: var(--font); transition: all var(--transition);
}
.filter-btn:hover { background: var(--nav-active-bg); color: #fff; }
.filter-btn.active {
  background: var(--nav-active-bg);
  color: #fff; font-weight: 600;
}

/* =============================================
   EMPTY STATE
   ============================================= */
.empty-state { text-align: center; padding: 56px 24px; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; margin-bottom: 14px; display: block; opacity: .5; }
.empty-state p { font-size: .9rem; line-height: 1.7; }
.empty-state strong { color: var(--text-secondary); }

/* =============================================
   PROJECT LIST HEADER
   ============================================= */
.projects-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.projects-page-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 9px;
}
.projects-page-title i { color: var(--accent); }

/* =============================================
   PROJECT CARD
   ============================================= */
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px; overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.project-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-light);
}

.project-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; user-select: none;
  gap: 12px; border-bottom: 1px solid transparent;
  transition: all var(--transition);
}
.project-card-header.open { border-bottom-color: var(--border); }
.project-card-header:hover { background: var(--bg-card-hover); }

.project-card-title {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}
.status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.waiting  { background: var(--status-waiting);  box-shadow: 0 0 7px var(--status-waiting); }
.status-dot.progress { background: var(--status-progress); box-shadow: 0 0 7px var(--status-progress); }
.status-dot.done     { background: var(--status-done);     box-shadow: 0 0 7px var(--status-done); }
.status-dot.new       { background: var(--status-new);     box-shadow: 0 0 7px var(--status-new); }
.status-dot.todo      { background: var(--text-muted); }

/* =============================================
   작업 보드 — 2026-09: 칸반(상태별 3열 드래그앤드롭) → 단일 표(그리드) 뷰로 전면
   개편. 프로젝트/우선순위/진행상황/업무내용/담당자/협력업체를 한 눈에 훑어보는
   목록 형태 요청에 따라 카드-컬럼 구조를 완전히 제거하고 표 기반으로 다시 짰다.
   ============================================= */
.board-filters { display: flex; align-items: center; gap: 12px; }
.board-filters select { width: auto; min-width: 150px; }

#board-section {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
#board-section .section-header { margin-bottom: 0; }

.board-grid-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
}
.board-grid-scroll { overflow: auto; }
.board-grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board-grid-table thead th {
  background: #f9fafb; color: var(--text-secondary); font-weight: 700; text-align: left;
  padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.board-grid-table tbody td {
  padding: 8px 14px; border-bottom: 1px solid var(--border); vertical-align: middle;
  height: 48px; box-sizing: border-box; color: var(--text-primary);
}
.board-grid-table tbody tr:last-child td { border-bottom: none; }
.board-grid-table tbody tr:hover td { background: #fafbfc; }
/* 2026-09: 컬럼 리사이즈(makeResizableTable)가 <th>의 인라인 width를 직접
   조절하므로, 업무내용 셀 텍스트는 고정 max-width가 아니라 셀 폭에 맞춰 늘고
   줄어드는 100%로 둬야 리사이즈해도 말줄임표가 항상 셀 경계에서 정확히 걸린다. */
.board-task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; }
.board-grid-muted { color: var(--text-muted); }

/* 우선순위 — 값별 유색 배지형 셀렉트(높음=빨강/중간=주황/낮음=회색). 완료는 이
   앱의 실제 우선순위 값이 아니라 상태(진행상황) 값이지만, 혹시 과거 데이터에
   섞여 있을 경우까지 대비해 초록 배지를 함께 정의해 둔다. */
.board-priority-select {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 4px;
  border: 1px solid transparent; background: #f1f5f9; color: var(--text-secondary);
  cursor: pointer;
}
.board-priority-select.high { background: #FEE2E2; border-color: #FCA5A5; color: #EF4444; }
.board-priority-select.mid  { background: #FFEDD5; border-color: #FDBA74; color: #F97316; }
.board-priority-select.low  { background: #F1F5F9; border-color: #E2E8F0; color: #64748B; }
.board-priority-select.complete { background: #D1FAE5; border-color: #6EE7B7; color: #10B981; }

/* 진행상황 — 원형 아이콘 + 텍스트 + (인라인 변경용) 셀렉트. */
.board-status-cell { display: flex; align-items: center; gap: 7px; }
.board-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-sizing: border-box; }
.board-status-dot.todo  { background: #CBD5E1; }
.board-status-dot.doing { background: #fff; border: 2px solid #94A3B8; }
.board-status-dot.done  { background: #10B981; }
.board-status-select {
  border: none; background: none; font-size: 13px; color: var(--text-primary); cursor: pointer;
  padding: 2px 4px; appearance: auto;
}

.board-task-goto-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: none; color: var(--text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.board-task-goto-btn:hover { background: #f1f5f9; color: var(--product-accent, #2878c8); }

/* 진행 상황 필터 — 엑셀형 팝오버가 아닌 단일 선택 드롭다운(전체/시작 전/진행
   중/완료). 열려있는 동안 버튼 테두리가 파란색으로 강조되고 화살표가 위를
   향하도록(회전) 한다. */
.board-status-filter-wrap { position: relative; }
.board-status-filter-btn {
  height: 32px; padding: 0 12px; border: 1px solid var(--product-border, var(--border));
  border-radius: 4px; background: #fff; color: var(--text-primary); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; min-width: 160px; justify-content: space-between;
  transition: border-color .12s, box-shadow .12s;
}
.board-status-filter-btn i { font-size: 11px; color: var(--text-muted); transition: transform .12s ease-in-out; }
.board-status-filter-wrap.is-open .board-status-filter-btn {
  border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.board-status-filter-wrap.is-open .board-status-filter-btn i { color: #3B82F6; transform: rotate(180deg); }
.board-status-filter-popover {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px;
  background: #fff; border: 1px solid var(--product-border, var(--border)); border-radius: 6px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12); z-index: 30; overflow: hidden; padding: 4px 0;
}
.board-status-filter-item { padding: 8px 14px; font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left; }
.board-status-filter-item:hover { background: #f1f5f9; }
.board-status-filter-item.is-active { font-weight: 700; }

.project-name {
  font-weight: 600; font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.project-meta {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.project-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; color: var(--text-secondary);
}
.project-meta-item i { color: var(--text-muted); font-size: .72rem; }
.project-meta-item input.proj-code-input-card,
.project-meta-item input.proj-customer-no-input-card {
  background: transparent; border: none; border-bottom: 1px dashed var(--border);
  outline: none; color: var(--text-secondary); font-size: .78rem; padding: 1px 2px;
  width: 100px; font-family: var(--font);
}
.project-meta-item input.proj-code-input-card:focus,
.project-meta-item input.proj-customer-no-input-card:focus {
  background: var(--bg-input); border-bottom: 1px solid var(--accent); color: var(--text-primary);
}
#projects-table input.proj-enddate-input-row {
  background: transparent; border: none; outline: none; color: var(--text-primary);
  font-size: 11.5px; padding: 1px 4px; width: 100%; font-family: var(--font); border-radius: 3px;
}
#projects-table input.proj-enddate-input-row:focus {
  background: var(--bg-input); box-shadow: 0 0 0 2px var(--accent-dim); outline: 1px solid var(--accent);
}
/* 발주번호/프로젝트번호 — 2026-09부터 목록에서는 순수 읽기 전용 텍스트로만 보여준다
   (수정은 상세 화면의 [프로젝트 정보 수정] 모달에서만, 수정 사유와 함께). 인풋 테두리/
   배경/호버 인풋 효과 없이 일반 텍스트처럼, 셀 안에서 수직 중앙 정렬만 된다. */
#projects-table td.proj-code-cell-text,
#projects-table td.proj-customer-no-cell-text {
  font-size: 11.5px; font-weight: 500; color: var(--text-primary); vertical-align: middle;
}
/* 삭제(휴지통) 아이콘 버튼 — 기본 .btn-icon(32×32px)은 25px 행 높이보다 커서
   그 버튼 하나 때문에 프로젝트 표만 행이 늘어나 있었다. 이 표 안에서만 줄인다. */
#projects-table .btn-icon { width: 18px; height: 18px; border: 0; background: transparent; }
#projects-table .btn-icon i { font-size: 10.5px; }
#projects-table .btn-icon:hover { background: rgba(239,68,68,.08); }

.card-overall-progress {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--text-secondary); min-width: 120px;
}
.mini-progress-bar {
  flex: 1; height: 4px; background: var(--border);
  border-radius: 3px; overflow: hidden;
}
.mini-progress-fill {
  height: 100%; background: var(--grad-accent);
  border-radius: 3px; transition: width .5s ease;
}
.mini-progress-fill.done-fill { background: var(--grad-success); }

.card-chevron {
  color: var(--text-muted); transition: transform var(--transition);
  font-size: .8rem;
}
.card-chevron.open { transform: rotate(180deg); }

.project-card-body { display: none; padding: 20px; }
.project-card-body.open { display: block; }

.status-actions {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; flex-wrap: wrap;
}

/* =============================================
   WBS STAGE
   ============================================= */
/* 16단계를 세로로 쌓지 않고 그리드로 한눈에 볼 수 있게 배치.
   2026-08: 카드 한 칸이 너무 좁으면(예전 4열) 한글 글자 크기를 충분히 키울 수 없어
   작은 글씨가 뭉개져 잘 안 읽히는 문제가 있었다. 기본을 3열로 줄여 칸을 더 넓게 확보한다. */
.wbs-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 1050px) { .wbs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .wbs-grid { grid-template-columns: 1fr; } }

.wbs-stage {
  margin-bottom: 16px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.wbs-grid .wbs-stage { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.wbs-stage-header {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(90deg, rgba(77,138,240,.07), transparent);
  border-bottom: 1px solid var(--border);
}
.wbs-grid .wbs-stage-header { flex-wrap: wrap; padding: 9px 12px; gap: 5px 8px; }
.wbs-grid .wbs-stage-name { flex: 1 1 100%; font-size: .8rem; }
.wbs-grid .wbs-date-badge { font-size: .68rem; padding: 2px 7px; }
.wbs-grid .wbs-progress-wrap { min-width: 0; flex: 1; gap: 6px; }
.wbs-grid .progress-label { min-width: 26px; font-size: .7rem; }
.wbs-grid .tasks-list { max-height: 170px; overflow-y: auto; }
.wbs-grid .task-item { padding: 5px 8px; gap: 6px; }
.wbs-grid .task-label { font-size: .78rem; }
.wbs-grid .task-checkbox { width: 14px; height: 14px; }
.wbs-grid .task-add-row { padding: 4px 8px 6px; }
.wbs-grid .task-add-input { font-size: .74rem; padding: 5px 8px; }
.wbs-grid .no-tasks-hint { padding: 10px 12px; font-size: .74rem; }
.wbs-stage-name { font-size: .875rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.wbs-progress-wrap { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 4px; transition: width .6s ease;
  background: var(--grad-accent);
}
.progress-fill.full { background: var(--grad-success); }
.progress-label { font-size: .76rem; font-weight: 600; color: var(--text-secondary); min-width: 36px; text-align: right; }

/* ── WBS 단계 카드(고정 크기 — 구글 캘린더 날짜칸처럼 내용이 많아져도 커지지 않음) ──
   2026-08: 예전 118px/글자 .68~.82rem 조합이 한글을 뭉개진 것처럼 안 보이게 만들어서
   카드를 더 키우고 글자 크기·줄간격을 넉넉하게 다시 잡았다(한글은 획이 많아 영문보다
   더 큰 크기가 필요하다). line-height도 명시해서 받침이 잘리지 않게 한다. */
.wbs-stage-card {
  position: relative; height: 148px; padding: 12px 14px 10px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; overflow: hidden;
  transition: border-color .15s, transform .1s;
}
.wbs-stage-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.wbs-card-name {
  font-size: 1rem; line-height: 1.35; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 16px;
}
.wbs-card-org { font-size: .8rem; line-height: 1.4; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbs-card-date { font-size: .8rem; line-height: 1.4; color: var(--text-secondary); }
.wbs-card-progress { display: flex; align-items: center; gap: 6px; }
.wbs-card-progress .progress-bar { height: 6px; }
.wbs-card-progress .progress-label { min-width: 32px; font-size: .78rem; line-height: 1.4; }
.wbs-card-tasks { font-size: .8rem; line-height: 1.4; color: var(--text-muted); margin-top: auto; }
.wbs-card-remove {
  position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border: none; border-radius: 4px;
  background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; opacity: 0; transition: opacity .1s, background .1s, color .1s;
}
.wbs-stage-card:hover .wbs-card-remove { opacity: 1; }
.wbs-card-remove:hover { background: var(--danger-dim, rgba(220,53,69,.15)); color: var(--danger, #dc3545); }
/* ── 단계 추가 드롭다운("프로젝트 착수" 버튼 옆에 배치) ── */
.wbs-add-stage-select {
  height: 32px; padding: 0 10px; font-size: .82rem; font-weight: 500;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px dashed var(--border-light); border-radius: var(--radius);
  cursor: pointer; max-width: 180px;
}
.wbs-add-stage-select:hover { border-color: var(--accent); color: var(--accent); }
.wbs-add-stage-select:disabled { cursor: default; opacity: .55; border-style: solid; }

/* ── "현재 진행 단계" 선택 드롭다운 — 전체 진행률(가중치 누적) 계산 기준점 ── */
.wbs-progress-stage-select {
  height: 32px; padding: 0 10px; font-size: .82rem; font-weight: 600;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent); border-radius: var(--radius);
  cursor: pointer; max-width: 200px;
}
.wbs-progress-stage-select:hover { filter: brightness(1.05); }

/* 2026-08: "상세 업무 내용"(협력사별 발주-일정)을 태스크와 한 표로 통합하면서,
   태스크 한 줄을 div가 아니라 <tr>로 그린다. 체크박스/이름/이동버튼/담당자뱃지/
   폴더아이콘은 예전 클래스명을 그대로 재사용해서(.task-checkbox, .task-label,
   .task-move, .task-assignee, .task-detail-btn) CSS를 새로 다 안 짜도 되게 했다. */
.wt-table th { text-align: left; }
.wt-row:hover td { background: var(--accent-dim); }
.wt-check-cell { text-align: center; }
.wt-empty { padding: 12px 16px; font-size: .8rem; color: var(--text-muted); text-align: center !important; }
.wt-empty i { margin-right: 6px; }
.task-checkbox {
  width: 17px; height: 17px; border: 2px solid var(--border-light);
  border-radius: 4px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); font-size: .68rem;
  color: transparent; background: var(--bg-card); margin: 0 auto;
}
.task-checkbox.is-done { background: var(--success); border-color: var(--success); color: #fff; }
.task-label { font-size: .84rem; color: var(--text-primary); transition: color var(--transition); }
.task-label.is-done { color: var(--text-muted); text-decoration: line-through; }
.task-label[contenteditable] { display: inline-block; outline: none; padding: 2px 6px; margin: -2px 0; border-radius: var(--radius-xs);
  border: 1px solid transparent; cursor: text; transition: border-color .15s, background .15s; }
.task-label[contenteditable]:hover { border-color: var(--border); }
.task-label[contenteditable]:focus { border-color: var(--accent); background: var(--bg-input); text-decoration: none; }
/* 태스크 순서 변경 버튼 */
.wt-move-cell { white-space: nowrap; }
.task-move-group { display: inline-flex; align-items: center; gap: 1px; opacity: 0; transition: opacity .15s; }
.wt-row:hover .task-move-group { opacity: 1; }
.task-move { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px 5px;
  border-radius: var(--radius-xs); font-size: .7rem; line-height: 1; }
.task-move:hover { color: var(--accent); background: var(--bg-card-hover); }
.task-move:disabled { opacity: .25; cursor: default; }
.wt-assignee-cell, .wt-detail-cell { white-space: nowrap; }
/* 태스크 추가 행 */
.task-add-row { display: flex; align-items: center; gap: 6px; padding: 8px 0 2px; }
.task-add-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); padding: 6px 10px; font-size: .8rem; font-family: var(--font); outline: none; }
.task-add-input:focus { border-color: var(--accent); }
.task-add-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: .78rem; }
.task-add-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── 단계 기간 배지: 발주 품목이 있으면 자동계산됨을 알리는 작은 태그 ── */
.wbs-date-auto-tag {
  display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: .62rem; font-weight: 700;
  color: var(--accent); background: var(--accent-dim); border-radius: 8px; vertical-align: 1px;
}
.wbs-date-badge.is-auto { cursor: help; }

/* ── 업무 표(체크리스트 + 협력업체/시작일/종료목표/종료일 통합) ── */
.stage-items-table-wrap { overflow-x: auto; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stage-items-table { width: 100%; border-collapse: collapse; }
.stage-items-table th {
  background: var(--bg-card-2); color: var(--text-secondary); font-size: .7rem; font-weight: 700;
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.stage-items-table td { padding: 2px 4px; border-bottom: 1px solid var(--border); }
.stage-items-table tr:last-child td { border-bottom: none; }
.si-cell {
  width: 100%; min-width: 84px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: var(--text-primary); padding: 4px 6px; font-size: .76rem; font-family: var(--font); outline: none;
}
.si-cell:hover { border-color: var(--border); }
.si-cell:focus { border-color: var(--accent); background: var(--bg-input); }
/* 브라우저가 date input에 기본으로 씌우는 회색 박스/테두리를 지워서, 평소엔 그냥
   텍스트처럼 보이다가(마우스를 올리거나 클릭했을 때만 칸 티가 나게) 다른 칸들과
   똑같은 스타일로 통일한다.
   주의: 전역 규칙 `input[type="date"] { background/border/padding }`(폼 요소 기본
   스타일)이 .si-cell 단독보다 CSS 우선순위가 높아(엘리먼트+속성 선택자 vs 클래스
   선택자) 이 배경/테두리 제거가 실제로는 안 먹히던 버그가 있었다. [type="date"]를
   붙여 우선순위를 전역 규칙보다 높여서 확실히 이기도록 한다. */
.si-cell[type="date"] {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid transparent; padding: 4px 6px;
}
.si-cell[type="date"]:hover { border-color: var(--border); }
.si-cell[type="date"]:focus { border-color: var(--accent); background: var(--bg-input); }
.si-cell[type="date"]::-webkit-datetime-edit { color: var(--text-primary); }
.si-cell[type="date"]:not(:hover):not(:focus)::-webkit-datetime-edit-fields-wrapper { opacity: 1; }

/* 샵마스터 표(자료접수/개정이력/보고서)의 날짜칸도 업무표와 동일하게, 평소엔
   테두리 없이 텍스트처럼 보이다가 마우스를 올리거나 클릭했을 때만 칸 티가 나게 한다.
   (같은 표 안의 텍스트/숫자 칸은 원래 스타일 그대로 둔다 — 날짜칸만 대상.) */
.sm-doc-input[type="date"],
.sm-rev-input[type="date"],
.sm-rp-input[type="date"] {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs); padding: 4px 6px;
}
.sm-doc-input[type="date"]:hover,
.sm-rev-input[type="date"]:hover,
.sm-rp-input[type="date"]:hover { border-color: var(--border); }
.sm-doc-input[type="date"]:focus,
.sm-rev-input[type="date"]:focus,
.sm-rp-input[type="date"]:focus { border-color: var(--accent); background: var(--bg-input); }
/* 날짜칸 3개(시작일/종료목표/종료일 = 5,6,7번째 칸)는 브라우저 기본 date input이라
   폭을 마음대로 줄일 수 없다. 표가 너무 넓어지지 않게 그 칸(td)만 너비를 명시해서
   나머지 칸에 공간을 남긴다. */
.stage-items-table td:nth-child(5),
.stage-items-table td:nth-child(6),
.stage-items-table td:nth-child(7) { width: 132px; }
/* 협력업체·담당자(3,4번째 칸)는 이제 담당자 칸처럼 클릭형 배지라 내용 길이가
   짧다. 이 두 칸과 날짜 3칸의 폭을 최대한 눌러줘서, 남는 공간이 전부
   업무내용(2번째) 칸으로 가게 한다 — 업무내용이 줄바꿈 없이 최대한 길게 보이도록. */
.stage-items-table td:nth-child(3),
.stage-items-table td:nth-child(4) { width: 88px; }
.stage-items-table td:nth-child(2) { width: 550px; }
/* 삭제 버튼은 평소엔 숨겨두고(깔끔하게), 그 행에 마우스를 올렸을 때만 보여준다. */
.si-del-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 5px 7px;
  border-radius: var(--radius-xs); font-size: .74rem; opacity: 0; transition: opacity .1s;
}
.wt-row:hover .si-del-btn { opacity: 1; }
.si-del-btn:hover { color: var(--danger); background: var(--danger-dim, rgba(220,53,69,.12)); }

/* 담당자/협력업체 배지 — 칸 폭보다 이름이 길어도 옆 칸을 침범하지 않고 말줄임(...)
   처리되게 한다(이전엔 white-space:nowrap만 있고 잘림 처리가 없어서 긴 이름이 옆
   칸 위로 넘쳐 보이는 문제가 있었다). 아이콘은 고정, 이름만 줄어들도록 flex로 구성. */
.task-assignee, .task-vendor {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  font-size: .73rem; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 10px; cursor: pointer;
  transition: all var(--transition);
}
.task-assignee .badge-label, .task-vendor .badge-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.task-assignee:hover { border-color: var(--accent); color: var(--accent); }
/* 외주(협력사) 담당자 — 우리 직원과 시각적으로 구분 */
.task-assignee.is-vendor { border-color: var(--warning); color: var(--warning); }
.task-assignee.is-vendor:hover { border-color: var(--warning); color: var(--warning); opacity: .85; }
.task-assignee-vendor { font-weight: 600; }
.task-vendor:hover { border-color: var(--accent); color: var(--accent); }
.task-vendor.is-set { color: var(--text-primary); }
.no-tasks-hint { padding: 12px 16px; font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  border: none; cursor: pointer;
  font-size: .84rem; font-weight: 600; font-family: var(--font);
  transition: all var(--transition); white-space: nowrap;
  letter-spacing: .1px;
}
.btn-primary   { background: var(--grad-accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }

.btn-success   { background: var(--grad-success); color: #fff; }
.btn-success:hover { opacity: .9; transform: translateY(-1px); }

.btn-warning   { background: var(--grad-warn); color: #fff; }
.btn-warning:hover { opacity: .9; transform: translateY(-1px); }

.btn-secondary {
  background: var(--bg-input); border: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.btn-danger { background: var(--grad-danger); color: #fff; }
.btn-danger:hover { opacity: .9; transform: translateY(-1px); }

.btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 5px 12px; font-size: .78rem; }
.btn-icon {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); width: 32px; height: 32px; padding: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.btn-icon:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,.08); }

.card-header-delete-btn,
.card-header-edit-btn { width: 28px; height: 28px; flex-shrink: 0; }

/* =============================================
   MODAL
   ============================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fadeIn .15s ease;
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.modal-box {
  background: var(--bg-card-2); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); width: 100%;
  max-width: 520px; max-height: 75vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); animation: slideUp .2s ease;
  position: relative; overflow: hidden;
}
.modal-box::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-accent);
}
.modal-box-wide { max-width: 720px; max-height: 76vh; }
/* 상세 업무 내용 표는 날짜칸 3개(브라우저 기본 date input이 칸당 최소 ~140px 필요)를
   포함해서 720px로는 가로 스크롤 없이 다 안 들어간다. 더 넓게 잡는다. */
.modal-box-xwide { max-width: 1350px; max-height: 78vh; }

/* 업무일지 모달 */
#modal-journal .modal-box {
  width: min(1100px, 78vw);
  max-width: 78vw;
  height: 76vh;
  max-height: 76vh;
}
.modal-box-sm   { max-width: 400px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-header h3 {
  font-size: .95rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.modal-header h3 i { color: var(--accent); }
.modal-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; transition: all var(--transition);
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
}
/* 프로젝트 상세 팝업 헤더의 "진행현황"/"작업보드" 바로가기 버튼 + 닫기(X)를 한 줄에 */
.modal-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.modal-close:hover { color: var(--text-primary); background: var(--bg-input); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* =============================================
   FORM ELEMENTS
   ============================================= */
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
/* 프로젝트 마스터명 + 프로젝트 유형 전용 행 — 원래 3:1(유형 25%)이었으나, 항목 간격이
   빡빡하다는 요청에 따라 마스터명을 줄이고 유형 칸 폭을 2배(25%→50%)로 넓혀 1:1로 변경
   (2026-08). */
.form-row-title-type { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 고객사(40%) + 발주번호(30%) + 프로젝트번호(30%) 전용 3단 행 (2026-08, "프로젝트 정보
   수정"/"신규 프로젝트 개설" 2번째 행에 지정된 비율). 비율 자체는 유지하고, 아래
   #modal-project 스코프 규칙에서 입력칸 폭을 80%로 줄이고 gap을 넓혀 여백을 확보한다. */
.form-row-cust-code { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: 14px; }

/* "신규 프로젝트 등록"(#modal-project)과 동일 필드를 재사용하는 "프로젝트 정보 수정"
   (#modal-project-edit-info) — 항목이 빡빡해 보인다는 요청에 따라, 고객사~완료일자
   구간의 입력칸을 80% 크기로 줄이고 grid gap을 넓혀(14px→28px) 항목 사이 여백을 키운다.
   .form-row-3는 다른 여러 모달에서 공용으로 쓰므로 이 두 모달 안에서만 적용되도록
   스코프를 준다. */
#modal-project .form-row-cust-code,
#modal-project-edit-info .form-row-cust-code,
#modal-project .form-row-3,
#modal-project-edit-info .form-row-3 { gap: 28px; }
#modal-project .form-row-cust-code .form-group > input,
#modal-project .form-row-cust-code .form-group > .cust-picker,
#modal-project .form-row-3 .form-group > input,
#modal-project .form-row-3 .form-group > select,
#modal-project .form-row-3 .form-group > .cust-picker,
#modal-project-edit-info .form-row-cust-code .form-group > input,
#modal-project-edit-info .form-row-cust-code .form-group > .cust-picker,
#modal-project-edit-info .form-row-3 .form-group > input,
#modal-project-edit-info .form-row-3 .form-group > select,
#modal-project-edit-info .form-row-3 .form-group > .cust-picker { width: 80%; }

/* 인콰리 등록 모달 — 인콰리 섹션과 견적 섹션 사이 구분선 + 등록 버튼 줄 */
.iq-inline-actions { display: flex; justify-content: flex-end; gap: 8px; margin: -6px 0 18px; }
/* 수주금액 — 값이 아직 없으면 직접 입력칸, 값이 이미 있으면 읽기전용 표시 + "변경"
   버튼(이력 기록) 조합으로 전환된다. 목표일 수정 칸과 같은 패턴. */
.iq-won-amount-row { display: flex; align-items: center; gap: 8px; }
.iq-won-amount-row input[type="number"] { flex: 1; }
.iq-won-amount-text { flex: 1; font-size: .84rem; color: var(--text-primary); padding: 9px 13px; }
.iq-section-divider { border-top: 1px solid var(--border); margin: 4px 0 20px; }

/* 첨부파일 드래그앤드롭 영역 — 파일을 끌어다 놓으면 색이 바뀌어 놓을 수 있음을 알려준다 */
.iq-dropzone {
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: border-color .15s, background-color .15s;
}
.iq-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.iq-dropzone-hint {
  margin: 0;
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.iq-dropzone.drag-over .iq-dropzone-hint { color: var(--accent); }

/* 인콰리·견적 상세: 2026-09에 모달(#modal-inquiry)에서 독립 풀페이지(#iq-detail-page)로
   전환됨에 따라, 예전 모달 전용 색상/폭 오버라이드는 .iq-detail-page 규칙으로 대체됐다
   (아래 "인콰리·견적 상세 풀페이지" 블록 참고). */

/* 신규 프로젝트 등록 모달 — 인콰리 등록 모달과 동일한 폭 */
#modal-project .modal-box { max-width: 920px; }

/* 인콰리 등록 모달 하단 탭 (수금정보 / 협력사관리 / 첨부파일관리 / PJT 메모) */
.iq-tabs {
  display: flex; gap: 2px; margin: 4px 0 14px;
  border-bottom: 1px solid var(--border);
}
.iq-tab {
  padding: 8px 16px; font-size: .82rem; font-weight: 600;
  color: var(--text-muted); background: var(--bg-card-2);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  cursor: pointer; font-family: var(--font);
}
.iq-tab.active {
  color: #ffffff; background: var(--bg-thead); border-color: var(--bg-thead);
}
.iq-tab.disabled {
  cursor: not-allowed; opacity: .55;
}
.iq-tab-panel { display: none; }
/* 2026-09: 상단 폼 필드들을 4열로 컴팩트하게 줄이면서 생긴 여유 공간을 이 탭
   콘텐츠(수금정보/협력사관리/첨부파일관리/업무기록) 쪽으로 몰아준다 — 표/드롭존/
   업무기록 목록이 좀 더 큼직하게 보이도록 최소 높이를 넉넉히 잡는다. */
.iq-tab-panel.active { display: block; min-height: 480px; }

/* ── 고객사 검색/선택 콤보박스 (인콰리 등록 등에서 기준정보 고객사관리와 연동) ──
   2026-09: 팝오버 폭이 좁은 부모 인풋 박스에 종속되던 문제 수정 — position:fixed로
   전환해 좌표를 JS(positionFloatingMenu, core.js)가 뷰포트 기준으로 직접 계산한다.
   이렇게 하면 부모 스크롤 컨테이너의 overflow에 의한 클리핑도 함께 피할 수 있다. */
.cust-picker { position: relative; }
.cust-picker-menu {
  display: none; position: fixed; min-width: 340px; max-width: 420px; width: max-content;
  max-height: 260px; overflow-y: auto; background: var(--bg-card-2); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 600;
}
.cust-picker-item {
  padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between;
  gap: 8px; align-items: center; border-bottom: 1px solid var(--border);
}
.cust-picker-item:last-child { border-bottom: none; }
.cust-picker-item:hover, .cust-picker-item.active { background: var(--accent-dim); }
.cust-picker-name {
  font-size: .85rem; color: var(--text-primary); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-picker-sub {
  font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 45%; flex-shrink: 0;
}
.cust-picker-empty { padding: 10px 12px; font-size: .82rem; color: var(--text-muted); text-align: center; }
.cust-picker-empty-action { cursor: pointer; color: var(--primary, #2563eb); font-weight: 500; }
.cust-picker-empty-action:hover { text-decoration: underline; background: var(--hover-bg, rgba(37,99,235,.06)); }
.form-hint { font-size: .8rem; color: var(--text-muted); margin: 6px 2px 0; }
.cust-picker-group-label {
  padding: 6px 12px 4px; font-size: .7rem; color: var(--text-muted); letter-spacing: .02em;
}
/* 드롭다운 최하단 "+ 신규 OOO 등록" 상시 노출 행 — 검색 결과가 있어도 항상 붙는다
   (검색 결과가 아예 없을 때 쓰는 .cust-picker-empty-action과는 별개). */
.cust-picker-add-new {
  padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--border); background: rgba(148, 163, 184, .06);
  color: #2563eb; font-weight: 600; font-size: 12.5px;
}
.cust-picker-add-new:hover { background: rgba(37, 99, 235, .07); }

/* ── 검색 가능한 드롭다운(콤보박스) — initSearchableSelect(core.js)가 select를
   감싸서 만든다. 화살표를 누르면(또는 칸을 클릭하면) 전체 목록, 타이핑하면
   필터링된 목록이 뜬다. 필터바(.lf-field)·모달(.form-group) 어디에 놓여도 그
   자리의 기존 select/input 폭을 그대로 채우도록 만들었다. */
.search-select { position: relative; width: 100%; }
.search-select-input {
  width: 100%; box-sizing: border-box; padding-right: 22px;
}
.search-select-arrow {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--text-muted); font-size: 10px;
}
.search-select-arrow:hover { color: var(--text-primary); }
/* .search-select-menu 자체 폭 규칙은 .cust-picker-menu(공용 팝오버 폭 규칙, 2026-09)로
   통합됐다 — 여기서 별도로 min-width를 주면 그 규칙을 덮어써 버려서 제거했다. */
/* 원본 select가 disabled 처리되면(예: 인콰리 "영업담당"은 견적 생성 전엔 비활성)
   겉으로 보이는 입력창/화살표도 함께 잠근 모습으로 바뀐다. */
.search-select-disabled .search-select-input { background: var(--bg-card-2); color: var(--text-muted); cursor: not-allowed; }
.search-select-disabled .search-select-arrow { pointer-events: none; opacity: .4; }

label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px; letter-spacing: .2px;
}
.required { color: var(--danger); }

input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  background: var(--bg-input); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-family: var(--font); font-size: .875rem;
  padding: 9px 13px; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="date"] {
  color-scheme: dark;
  color: var(--text-primary);
}
input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
/* 비활성(disabled) 입력도 다른 필드와 같은 흰색 박스를 유지하고, 편집 불가만 흐린 텍스트로 표시 */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}
select option { background: var(--bg-card-2); }
.form-error {
  color: var(--danger); font-size: .8rem; margin-top: 4px;
  display: flex; align-items: center; gap: 5px;
}

/* =============================================
   TASK SELECTION MODAL
   ============================================= */
.project-summary-bar {
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: .83rem; margin-bottom: 16px;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.project-summary-bar span { color: var(--text-secondary); }
.project-summary-bar strong { color: var(--accent); }

.task-modal-hint { font-size: .82rem; color: var(--text-secondary); margin-bottom: 16px; }

.wbs-group-title {
  font-size: .875rem; font-weight: 700; color: var(--accent);
  padding: 10px 0 6px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px; margin-top: 8px;
}
.wbs-group-title:first-child { margin-top: 0; }
.task-group { margin-bottom: 6px; }
.task-group-actions { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 4px; }
.btn-group-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); padding: 2px 10px;
  border-radius: 10px; cursor: pointer; font-size: .72rem;
  font-family: var(--font); transition: all var(--transition);
}
.btn-group-toggle:hover { border-color: var(--accent); color: var(--accent); }

.task-select-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition);
}
.task-select-item:hover { background: var(--accent-dim); }
.task-select-item input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--accent); flex-shrink: 0;
}
.task-select-item label {
  font-size: .84rem; color: var(--text-primary);
  cursor: pointer; font-weight: 400; margin: 0;
}

/* =============================================
   REASSIGN MODAL
   ============================================= */
.reassign-task-name {
  font-size: .84rem; color: var(--text-secondary);
  margin-bottom: 14px; padding: 9px 12px;
  background: var(--bg-input); border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

/* =============================================
   TOAST
   ============================================= */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column;
  gap: 8px; pointer-events: none;
}
.toast {
  background: var(--bg-card-2); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 12px 18px;
  font-size: .84rem; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow); pointer-events: all;
  animation: slideUp .25s ease; max-width: 340px;
}
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error   { border-left: 3px solid var(--danger); }
.toast.toast-info    { border-left: 3px solid var(--accent); }
.toast.hide { animation: fadeOut .3s ease forwards; }
@keyframes fadeOut { to { opacity: 0; transform: translateY(8px); } }

/* =============================================
   TIMELINE CONTROLS
   ============================================= */
.timeline-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.view-toggle-group {
  display: flex;
  background: none; border: none;
  border-radius: 0; overflow: visible; gap: 2px;
}
.view-toggle-btn {
  background: transparent; border: none;
  color: var(--section-item-text); padding: 8px 14px;
  font-size: .79rem; font-family: var(--font); font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: all var(--transition);
  border-radius: 2px;
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn:hover { background: var(--nav-active-bg); color: #fff; }
.view-toggle-btn.active {
  background: var(--nav-active-bg); color: #fff; font-weight: 600;
}

.tl-project-filter {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 10px;
}
.tl-project-filter select {
  background: transparent; border: none; padding: 2px 4px;
  font-size: .79rem; color: var(--text-primary); font-family: var(--font);
  max-width: 180px; cursor: pointer; outline: none; box-shadow: none;
}

.date-range-filter {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 10px;
}
.date-range-filter input[type="date"] {
  background: transparent; border: none; padding: 2px 4px;
  font-size: .79rem; color: var(--text-primary); width: 126px;
  box-shadow: none;
}
.date-range-filter input[type="date"]:focus { outline: none; box-shadow: none; border: none; }
.date-range-sep { color: var(--text-muted); font-size: .85rem; }

/* =============================================
   TASK DATE BADGE
   ============================================= */
.task-date-badge, .wbs-date-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .71rem; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 10px; white-space: nowrap;
  cursor: pointer; transition: all var(--transition); margin-left: 2px;
}
.task-date-badge:hover, .wbs-date-badge:hover { border-color: var(--accent); color: var(--accent); }
.task-date-badge.has-date, .wbs-date-badge.has-date {
  border-color: var(--border-accent); color: var(--accent);
  background: var(--accent-dim);
}
.task-date-badge i, .wbs-date-badge i { font-size: .64rem; }
.wbs-date-badge { margin-left: 0; flex-shrink: 0; }
.task-badges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#timeline-chart { user-select: none; -webkit-user-select: none; }

.drag-hint {
  font-size: .75rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  border-radius: 10px;
}

/* =============================================
   DRAG OVERLAY
   ============================================= */
.timeline-chart-wrap { position: relative; }
.drag-overlay-root { pointer-events: none; z-index: 10; position: absolute; top: 0; left: 0; }
.drag-bar-move { pointer-events: all; cursor: grab; transition: background .15s; }
.drag-bar-move:hover { background: rgba(255,255,255,0.08) !important; border-radius: 2px; }
.drag-bar-move:active { cursor: grabbing; }
.drag-bar-resize { pointer-events: all; cursor: ew-resize; opacity: 0.55; transition: opacity .15s; }
.drag-bar-resize:hover { opacity: 1; }
body.dragging-timeline { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }

/* 프로젝트별 미니 타임라인 차트 (WBS/Task 뷰) */
.tl-mini-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 6px;
  margin-top: 14px;
}
.tl-mini-header:first-child { margin-top: 0; }
.tl-mini-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tl-mini-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.tl-mini-status { font-size: 12px; color: var(--text-secondary); }
.tl-mini-progress { font-size: 12px; font-weight: 700; color: var(--accent); }
.tl-mini-hide-btn {
  margin-left: auto; background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 12px;
}
.tl-mini-hide-btn:hover { color: var(--danger); background: var(--bg-hover); }
.tl-mini-chart-wrap {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.tl-mini-empty {
  padding: 24px; text-align: center; color: var(--text-muted); font-size: 12.5px;
  background: #0d1221;
}
.tl-hidden-bar {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tl-hidden-bar button {
  background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 600;
  font-family: var(--font);
}
.tl-hidden-bar button:hover { text-decoration: underline; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 960px) {
  #metrics-section { grid-template-columns: repeat(2, 1fr); }
  .project-meta { display: none; }
}
@media (max-width: 640px) {
  #app-main { padding: 16px 14px 48px; }
  :root { --nav-width: 170px; }
  #metrics-section { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric-card { padding: 16px; }
  .metric-value { font-size: 1.8rem; }
  .header-title span:first-of-type { display: none; }
  .form-row, .form-row-title-type, .form-row-3, .form-row-4, .form-row-cust-code { grid-template-columns: 1fr; }
  .modal-footer { flex-direction: column; }
  .modal-footer .btn { width: 100%; justify-content: center; }
  .filter-bar { gap: 5px; }
  .filter-btn { padding: 4px 10px; font-size: .75rem; }
  .card-overall-progress { display: none; }
  .timeline-controls { gap: 8px; }
  .date-range-filter input[type="date"] { width: 108px; font-size: .74rem; }
  .view-toggle-btn { padding: 5px 10px; font-size: .74rem; }
}

/* =============================================
   TASK DETAIL DRAWER
   ============================================= */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  /* 프로젝트 상세/단계 상세 팝업(.modal-overlay, z-index:500) 위에서도 열릴 수 있어야
     한다(그 팝업 안의 태스크에서 폴더 아이콘을 눌러 여는 경우가 대부분이라). 이전엔
     200이라 그 팝업들보다 아래에 깔려서, 먼저 팝업을 닫아야만 보이는 문제가 있었다. */
  z-index: 550; backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.task-drawer {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1280px, 82vw);
  height: min(650px, 76vh);
  background: var(--bg-card-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  z-index: 551; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  animation: popIn .22s cubic-bezier(.34,1.3,.64,1);
}
@keyframes popIn {
  from { transform: translate(-50%, -48%) scale(.95); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
.drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border); gap: 12px;
  background: linear-gradient(135deg, rgba(77,138,240,.05), transparent);
}
.drawer-title-wrap { flex: 1; min-width: 0; }
.drawer-wbs-badge {
  display: inline-block; font-size: 10px; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--border-accent);
  border-radius: var(--radius-xs); padding: 1px 7px; margin-bottom: 6px;
}
.drawer-header h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; word-break: keep-all; }
.drawer-project-name { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.drawer-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 12px; gap: 4px;
}
.drawer-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted); font-size: 13px;
  font-family: var(--font); padding: 10px 14px;
  cursor: pointer; transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 6px;
}
.drawer-tab:hover { color: var(--text-secondary); }
.drawer-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

.drawer-body {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
}

/* 업무 기록 탭 — 2열 */
#drawer-tab-logs {
  flex: 1; overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 460px;
}

.logs-list {
  overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid var(--border);
}

.log-add-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; overflow-y: auto;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.log-field-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 4px;
}
.log-item {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px; position: relative;
}
.log-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.log-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.log-author-tag {
  background: var(--accent-dim); color: var(--accent);
  border-radius: var(--radius-xs); padding: 1px 7px;
  font-size: 11px; font-weight: 500;
}
.log-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.log-wt-tag { background: rgba(77,138,240,.12); color: var(--accent); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.log-time-tag { color: var(--text-muted); font-size: 11px; }
.log-content { font-size: 13px; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; word-break: keep-all; }
.btn-log-delete {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 12px; padding: 2px 5px;
  border-radius: var(--radius-xs); transition: color .15s, background .15s;
}
.btn-log-delete:hover { color: var(--danger); background: rgba(239,68,68,.1); }

.log-add-form { border-top: 1px solid var(--border); }
.log-form-row { display: flex; gap: 8px; margin-bottom: 8px; }
.log-author-select, .log-date-input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 12px; padding: 5px 8px; font-family: var(--font);
}
.log-author-select { flex: 1; }
.log-date-input    { width: 130px; }
.log-daterange-row { align-items: center; }
.log-daterange-row .log-date-input { flex: 1; width: auto; min-width: 0; }
.log-daterange-sep { color: var(--text-muted); font-size: 12px; flex: 0 0 auto; }
.log-form-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.log-form-col .log-field-label { margin-top: 0; }
.log-textarea {
  width: 100%; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 13px; font-family: var(--font);
  padding: 8px 10px; resize: vertical; line-height: 1.5;
  transition: border-color .15s;
}
.log-textarea:focus { outline: none; border-color: var(--accent); }
.logs-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 40px 0; }

/* 파일 첨부 */
/* 파일 탭은 단일 컬럼 (display는 JS로 제어) */
#drawer-tab-files.active-tab {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.files-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.file-item {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 13px;
  display: flex; align-items: center; gap: 10px;
}
.file-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.file-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.file-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-file-dl, .btn-file-del {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-xs); font-size: 12px;
  padding: 4px 8px; cursor: pointer; transition: all .15s; font-family: var(--font);
}
.btn-file-dl  { color: var(--accent); }
.btn-file-dl:hover  { background: var(--accent-dim); border-color: var(--accent); }
.btn-file-del { color: var(--text-muted); }
.btn-file-del:hover { color: var(--danger); background: rgba(239,68,68,.1); border-color: var(--danger); }

.file-upload-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 16px 16px; padding: 12px;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 13px; font-family: var(--font);
  cursor: pointer; transition: all .15s;
}
.file-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.files-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 40px 0; }

.upload-progress-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 0 16px; }
.upload-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width .2s; }
.upload-progress-text { font-size: 11px; color: var(--text-muted); padding: 4px 16px; display: block; }

/* 예전엔 작은 폴더 아이콘 하나뿐이라 눈에 잘 안 띄었다 — 테두리 있는 버튼 +
   "상세" 글자를 더해 클릭 가능한 영역이라는 걸 명확히 알 수 있게 했다. */
.task-detail-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-light); background: var(--bg-card-2);
  color: var(--text-secondary); cursor: pointer;
  font-size: 11px; font-family: var(--font); font-weight: 600;
  transition: color .15s, background .15s, border-color .15s; margin-left: 2px;
}
.task-detail-btn:hover { color: var(--accent); background: var(--accent-dim); border-color: var(--border-accent); }

/* 업무 행 "상세" 버튼을 누르면 뜨는 미니 팝업 — 구글 캘린더에서 일정 칸을 눌렀을 때
   나오는 미리보기 팝업과 같은 역할(값 편집은 표 안 칸에서 바로 하고, 여기는 요약 +
   전체 상세(업무기록·파일첨부 드로어)로 들어가는 입구). js/datepicker.js의 .dp-popup과
   같은 시각언어를 재사용한다. */
.task-mini-popover {
  position: fixed; z-index: 1500; display: none;
  width: 260px; padding: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-family: var(--font);
}
.tmp-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.tmp-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); padding: 3px 0; }
.tmp-open-drawer-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 7px 10px;
  background: var(--accent-dim); border: 1px solid var(--border-accent); border-radius: var(--radius-sm);
  color: var(--accent); font-size: 12px; font-weight: 700; font-family: var(--font); cursor: pointer;
  transition: background .15s;
}
.tmp-open-drawer-btn:hover { background: var(--accent); color: #fff; }

.file-drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; margin: 0 16px 16px; padding: 24px 16px;
  border: 2px dashed var(--border-light); border-radius: var(--radius);
  color: var(--text-muted); font-size: 13px; font-family: var(--font);
  cursor: pointer; transition: all .15s; text-align: center;
}
.file-drop-zone i { font-size: 24px; margin-bottom: 4px; }
.file-drop-zone:hover,
.file-drop-zone.drag-over { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.file-drop-zone.drag-over { border-style: solid; }
.file-drop-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* =============================================
   AI CHAT
   ============================================= */
#ai-chat-fab {
  position: fixed; bottom: 28px; right: 28px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad-accent); border: none;
  color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 24px rgba(77,138,240,.5);
  z-index: 300; display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
#ai-chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 32px rgba(77,138,240,.7); }

#ai-chat-panel {
  position: fixed; bottom: 92px; right: 28px;
  width: 400px; max-width: calc(83vw - 40px);
  height: 560px; max-height: calc(83vh - 100px);
  background: var(--bg-card-2); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); z-index: 299;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); animation: aiPanelIn .22s ease;
}
@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, rgba(77,138,240,.1), rgba(124,92,252,.08));
}
.ai-chat-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ai-chat-title i { color: var(--accent); }
.ai-model-badge {
  font-size: 10px; background: var(--accent-dim);
  color: var(--accent); border: 1px solid var(--border-accent);
  border-radius: var(--radius-xs); padding: 1px 6px;
}
.ai-chat-header-actions { display: flex; gap: 4px; }
.ai-chat-icon-btn {
  background: none; border: none; color: var(--text-muted); font-size: 14px;
  width: 28px; height: 28px; border-radius: var(--radius-xs); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.ai-chat-icon-btn:hover { color: var(--text-primary); background: var(--bg-input); }

.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-msg { display: flex; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-user      { justify-content: flex-end; }

.ai-msg-bubble {
  max-width: 85%; padding: 10px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.65; word-break: keep-all;
}
.ai-msg-assistant .ai-msg-bubble {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 4px 12px 12px 12px;
}
.ai-msg-user .ai-msg-bubble {
  background: var(--grad-accent); color: #fff;
  border-radius: 12px 4px 12px 12px;
}
.ai-msg-bubble strong { color: var(--text-primary); }
.ai-msg-bubble code {
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 1px 5px;
  font-size: 12px; font-family: 'Courier New', monospace;
}
.ai-msg-bubble ul, .ai-msg-bubble ol { padding-left: 18px; }
.ai-msg-bubble li { margin: 3px 0; }
.ai-msg-bubble table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 6px 0; }
.ai-msg-bubble th, .ai-msg-bubble td { border: 1px solid var(--border); padding: 3px 8px; text-align: left; }
.ai-msg-bubble th { background: var(--bg-input); color: var(--text-secondary); }
.ai-msg-bubble h3, .ai-msg-bubble h4 { color: var(--text-primary); margin: 8px 0 4px; }
.ai-msg-bubble p { margin: 4px 0; }

.ai-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 13px; background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px 12px 12px 12px; width: fit-content;
}
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: aiDot 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aiDot {
  0%,80%,100% { transform: scale(.6); opacity:.4; }
  40%          { transform: scale(1);  opacity:1; }
}
.ai-chat-input-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border);
}
.ai-chat-input {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 13px; font-family: var(--font);
  padding: 8px 12px; resize: none; max-height: 120px;
  line-height: 1.5; transition: border-color .15s;
}
.ai-chat-input:focus { outline: none; border-color: var(--accent); }
.ai-send-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--grad-accent); border: none;
  color: #fff; font-size: 14px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.ai-send-btn:hover { opacity: .85; }
.ai-send-btn:disabled { opacity: .4; cursor: not-allowed; }

/* =============================================
   SETTINGS PAGE
   ============================================= */
/* 실제 적용되는 값은 아래(전역 리디자인 섹션)의 .settings-page 규칙 — 여긴 옛
   1단계 값이라 폭 제한 없이 비워둔다(중복 선언으로 인한 혼동 방지). */
.settings-page {}

/* ── 기준정보 마스터-디테일 레이아웃 (고객사/고객담당/협력사/직원관리 공용) — 2026-08 Enterprise 개편 ── */
.stab-body { width: 100%; }
.md-layout { display: flex; gap: 14px; align-items: stretch; width: 100%; flex: 1; min-height: 0; }
/* 2026-08: 목록/상세 칼럼 모두 나머지 화면(대시보드/프로젝트/보드)과 동일한
   카드(둥근 radius-lg 테두리)로 통일 — 내부 표/입력폼의 촘촘한 엑셀형 밀도는
   그대로 유지하고, 바깥 패널 모양만 통일한다. */
.md-list-col {
  flex: 0 0 40%; min-width: 300px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.md-detail-col {
  flex: 1 1 0; min-width: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
/* 2026-09: 기준정보 상세패널 박스-팽창(출렁임) 방지 — 뷰포트 고정 3존 구조.
   ① 상단 고정: md-detail-title + md-field-grid + md-subtabs
   ② 중간 가변: 현재 활성 md-subtab-body(탭 없는 화면은 md-field-grid)만 flex:1로
      늘어나 내부에서 스크롤 — 다른 탭으로 전환해도 바깥 카드 높이는 절대 변하지 않는다.
   ③ 하단 고정: 삭제/저장 버튼 바(md-detail-actions) — 항상 보이고 클릭 가능. */
.md-detail-form { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.md-detail-form .md-detail-title { flex-shrink: 0; }
.md-detail-form > .md-field-grid { flex-shrink: 0; }
.md-detail-form .md-subtabs { flex-shrink: 0; }
.md-detail-form .md-subtab-body.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
/* 서브탭이 없는 상세화면(고객담당관리·직원관리 등)은 상단 기본정보 행들을 항상
   컴팩트 고정 높이로 두고, 마지막의 "메모" 행(.md-memo-row)만 잔여 세로 공간을
   전부 흡수해 확장된다 — 기준정보 공통 레이아웃 룰(2026-09). */
.md-detail-form .md-memo-row { flex: 1 1 auto; min-height: 120px; overflow: hidden; }
.md-detail-form .md-detail-actions { flex-shrink: 0; }
.md-detail-form .md-row-list { min-height: 0; }
/* 목록/상세 패널 다크 타이틀 바 (섹션 헤더와 동일 톤). 카드 padding을 상쇄해
   패널 끝까지 꽉 채우고, 카드와 같은 radius-lg로 위쪽 모서리만 둥글게 맞춘다
   (overflow:hidden 클리핑 대신 라운딩 값을 직접 맞춰, 내부 고객사 검색 드롭다운
   등 카드 밖으로 나오는 팝업이 잘리지 않도록 한다). */
.md-list-title, .md-detail-title {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--section-bar-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: -18px -18px 10px -18px; gap: 10px; flex-wrap: wrap; padding: 0 12px; min-height: 34px;
}
.md-list-title span, .md-detail-title h3 {
  margin: 0; font-size: .8rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
}
.md-detail-title { margin-bottom: 14px; } /* 리스트 바(10px)보다 상세 바는 아래 여백을 조금 더 둔다 */
.md-detail-title-actions { display: flex; gap: 8px; }
.md-list-toolbar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; flex-shrink: 0; }
.md-list-toolbar select, .md-list-toolbar input[type="text"] {
  flex: 1; min-width: 110px; height: 32px; box-sizing: border-box;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 2px; padding: 0 10px; color: var(--text-primary); font-size: 13px;
}
/* 2026-09: 목록칸도 상세칸과 동일하게 검색/필터바는 고정, 표만 남는 높이를 채워
   내부 스크롤 — 이전엔 max-height:600px로 고정 높이였는데, 뷰포트 기준 카드 높이에
   맞춰 유동적으로 채우도록 flex:1로 전환. */
.md-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: 2px; scrollbar-width: thin; }
.md-list-scroll .sm-table th { position: sticky; top: 0; z-index: 1; }
.md-list-row { cursor: pointer; }
.md-list-row.selected { background: var(--accent-dim); }
/* 라벨칸(회색) + 입력칸(흰색)이 붙은 엑셀형 폼 그리드 */
.md-field-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
  margin-bottom: 14px;
}
.md-field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.md-field {
  display: grid; grid-template-columns: 92px 1fr; align-items: stretch;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  min-height: 38px;
}
.md-field.span-2 { grid-column: span 2; }
.md-field.span-3 { grid-column: 1 / -1; }
.md-field label {
  background: var(--bg-card-2); font-size: .78rem; font-weight: 600; color: var(--text-secondary);
  display: flex; align-items: center; padding: 0 10px; margin: 0;
  border-right: 1px solid var(--border);
}
.md-field label .required { color: var(--status-waiting); margin-left: 2px; }
.md-field input, .md-field select, .md-field textarea {
  background: var(--bg-card); border: none; border-radius: 0;
  padding: 8px 10px; color: var(--text-primary); font-size: .85rem; font-family: var(--font);
  min-height: 38px; box-sizing: border-box;
}
.md-field input:disabled { opacity: .55; background: var(--bg-card-2); }
.md-field textarea { resize: vertical; min-height: 54px; }
/* 좁은 1칸 열(예: 직원관리 "비밀번호 재설정") 안에 긴 안내 문구가 들어갈 때 —
   실제 입력값 글씨 크기는 유지하고 안내문(placeholder)만 살짝 줄여 칸을 벗어나지
   않게 한다. */
.md-field-input-sm::placeholder { font-size: 11px; }

/* "메모" 등 서술형 필드 전용 행 — 기준정보 상세 공통 룰: 상단 정보 행들은 38px
   컴팩트 고정, 이 행만 .md-field-grid 밖으로 분리돼 카드 하단(버튼바 바로 위)까지
   잔여 공간을 전부 흡수한다(부모 .md-detail-form이 flex column이므로 flex:1 1 auto
   는 위 .md-detail-form .md-memo-row 규칙에서 부여). */
.md-memo-row {
  display: grid; grid-template-columns: 92px 1fr; align-items: stretch;
  border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
  margin-bottom: 14px;
}
.md-memo-row label {
  background: var(--bg-card-2); font-size: .78rem; font-weight: 600; color: var(--text-secondary);
  display: flex; align-items: flex-start; padding: 8px 10px; margin: 0;
  border-right: 1px solid var(--border);
}
.md-memo-row textarea {
  width: 100%; height: 100%; box-sizing: border-box; resize: none;
  background: var(--bg-card); border: none;
  padding: 10px 12px; color: var(--text-primary); font-size: .85rem; font-family: var(--font);
  line-height: 1.6; min-height: 120px; overflow-y: auto;
}
/* 라디오 그룹을 md-field 값 칸 안에 넣을 때 */
.md-radio-cell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 10px; }
/* "직접입력" 학습 드롭다운 — select 옆에 커스텀 텍스트칸을 숨겼다 보였다 한다 */
.md-di-cell { display: flex; align-items: center; width: 100%; }
.md-di-cell .md-di-select { flex: 1; }
.md-di-cell .md-di-other { flex: 1; border: none; border-left: 2px solid var(--accent); background: var(--accent-dim); padding: 7px 10px; font-size: .85rem; color: var(--text-primary); font-family: var(--font); }
.md-di-select option.md-di-opt { color: var(--accent); font-weight: 700; }
/* 숫자/치수 입력 옆에 단위 표시 */
.md-unit-cell { display: flex; align-items: center; width: 100%; gap: 4px; }
.md-unit-cell input { flex: 1; min-width: 0; }
.md-unit-cell .md-unit { font-size: .72rem; color: var(--text-muted); white-space: nowrap; padding-right: 8px; }
/* 각지고 평평한 서브탭 (선택 탭만 다크) */
.md-subtabs { display: flex; gap: 2px; background: var(--bg-page); padding: 3px; border-radius: 2px; margin: 14px 0 12px; flex-wrap: wrap; }
.md-subtab {
  background: none; border: none; padding: 7px 13px; font-size: .78rem; color: var(--text-secondary);
  cursor: pointer; font-family: var(--font); font-weight: 600; border-radius: 1px;
}
.md-subtab.active { background: var(--section-bar-bg); color: #fff; }
.md-subtab-body { display: none; }
.md-subtab-body.active { display: block; }
.md-empty-detail { color: var(--text-muted); text-align: center; padding: 70px 0; font-size: .9rem; }
.md-row-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.md-row-item {
  display: flex; gap: 6px; align-items: center; background: var(--bg-base);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px;
}
.md-row-item input { flex: 1; min-width: 0; }
.md-row-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 6px; }
.md-row-del:hover { color: var(--status-waiting); }
@media (max-width: 1100px) {
  .md-layout { flex-direction: column; height: auto; flex: none; min-height: 0; }
  .md-list-col { flex: 1 1 auto; width: 100%; overflow: visible; }
  .md-detail-col { overflow: visible; }
  .md-list-scroll { max-height: 420px; }
  .md-detail-form { height: auto; }
  .md-detail-form .md-subtab-body.active,
  .md-detail-form .md-memo-row { overflow-y: visible; max-height: none; min-height: 160px; }
  .md-memo-row { grid-template-columns: 1fr; }
  .md-memo-row label { border-right: none; border-bottom: 1px solid var(--border); }
  .stab-body:has(.md-layout) { overflow-y: auto; }
}

/* ── 계정관리 2분할(좌 트리 / 우 그리드, 확장) ── 2026-09 ─────────────────
   상세/등록·수정 폼은 우측 3번째 패널이 아니라 #modal-account 모달로 옮겨졌다
   (js/app/accounts.js openAccountModal 참고) — 그리드가 남는 폭을 그대로 채운다. */
.acct3-layout, .acct2-layout { display: flex; gap: 14px; align-items: flex-start; min-height: 0; }

.acct3-tree-col {
  flex: 0 0 220px; min-width: 180px; background: var(--product-surface, #fff);
  border: 1px solid var(--product-border, var(--border)); border-radius: var(--radius-lg);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  max-height: 640px;
}
.acct3-tree-search {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--product-border, var(--border)); border-radius: var(--radius-sm);
  padding: 6px 8px; background: var(--product-subtle, var(--bg-input));
}
.acct3-tree-search i { color: var(--product-muted, var(--text-muted)); font-size: 12px; }
.acct3-tree-search input {
  border: none; background: none; outline: none; box-shadow: none; flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--product-text, var(--text-primary)); font-family: var(--font);
}
.acct3-tree-scroll { overflow-y: auto; flex: 1; min-height: 0; }

.acct3-tree-node {
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px;
  color: var(--product-text, var(--text-primary)); transition: background .12s ease, color .12s ease;
}
.acct3-tree-node:hover { background: var(--product-subtle, var(--bg-hover)); }
.acct3-tree-node.active { background: var(--product-accent-soft, rgba(40,120,200,.1)); color: var(--product-accent); font-weight: 700; }
.acct3-tree-major { font-weight: 600; }
.acct3-tree-group { padding-left: 26px; color: var(--product-muted, var(--text-muted)); }
.acct3-tree-group.active { color: var(--product-accent); }
.acct3-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct3-tree-count {
  font-size: 10.5px; color: var(--product-muted, var(--text-muted)); background: var(--product-subtle, var(--bg-input));
  border-radius: 999px; padding: 1px 6px; flex-shrink: 0;
}
.acct3-tree-node.active .acct3-tree-count { color: var(--product-accent); }
.acct3-tree-caret {
  width: 16px; height: 16px; flex-shrink: 0; border: none; background: none; cursor: pointer;
  color: var(--product-muted, var(--text-muted)); display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.acct3-tree-caret.open { transform: rotate(90deg); }
.acct3-tree-root { font-weight: 700; }

.acct3-grid-col { flex: 1 1 auto; min-width: 0; }
.acct3-grid-scroll { max-height: 640px; }
/* 2분할 전환 후: 우측 상세패널이 없어진 만큼 그리드가 남는 폭을 전부 채운다. */
.acct2-grid-col { width: 100%; }

/* 그리드 행 그룹핑(대분류별 아코디언) — sm-table 안의 그룹 헤더 행 */
.acct-grp-row td { padding: 0 !important; border: none !important; background: none !important; }
.acct-grp-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; border: none; background: var(--product-subtle, var(--bg-input));
  border-top: 1px solid var(--product-border, var(--border)); border-bottom: 1px solid var(--product-border, var(--border));
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--product-text, var(--text-primary));
  font-family: var(--font);
}
.acct-grp-toggle i { color: var(--product-accent); font-size: 11px; width: 12px; }
.acct-grp-count { margin-left: auto; font-weight: 500; color: var(--product-muted, var(--text-muted)); font-size: 11.5px; }

/* 사용여부 토글 스위치 — 그리드(소형)와 상세패널(기본) 공용 */
.acct-switch {
  position: relative; width: 38px; height: 20px; border-radius: 999px; border: none;
  background: #c7ccd3; cursor: pointer; padding: 0; flex-shrink: 0; vertical-align: middle;
  transition: background .15s ease;
}
.acct-switch.on { background: var(--product-accent); }
.acct-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease;
}
.acct-switch.on .acct-switch-knob { transform: translateX(18px); }
.acct-switch-sm { width: 32px; height: 18px; }
.acct-switch-sm .acct-switch-knob { width: 14px; height: 14px; }
.acct-switch-sm.on .acct-switch-knob { transform: translateX(14px); }

@media (max-width: 1280px) {
  .acct3-tree-col { flex-basis: 190px; }
}
/* 좁은 화면 — 트리를 그리드 위로 쌓는다(상세는 이제 모달이라 별도 반응형 처리 불필요). */
@media (max-width: 1100px) {
  .acct2-layout { flex-direction: column; }
  .acct3-tree-col { width: 100%; max-height: 220px; }
}
.settings-header {
  margin-bottom: 20px;
  background: var(--section-bar-bg); padding: 0 16px; min-height: 38px; border-radius: 2px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.settings-header h2 { font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #fff; padding: 9px 0; margin: 0; }
.settings-header h2 i { color: #fff; }

/* 메뉴 탭 — 예전엔 제목 줄 아래 별도의 바(밑줄 탭 스타일)였지만, 지금은 제목과 같은
   줄에서 오른쪽 끝에 붙는다(justify-content:space-between으로 아래 상세정보 박스의
   오른쪽 끝과 자연히 맞춰짐 — 둘 다 같은 .settings-page 폭 안에 있기 때문). */
.settings-inner-tabs {
  display: flex; flex-wrap: wrap; align-items: center;
}
.stab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-size: .875rem; font-family: var(--font);
  padding: 10px 20px; cursor: pointer;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 7px;
  margin-bottom: -1px;
}
.stab:hover { color: var(--text-primary); }
.stab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.settings-description {
  font-size: .83rem; color: var(--text-secondary);
  margin-bottom: 16px; padding: 10px 14px;
  background: var(--accent-dim); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.settings-members-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.settings-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.settings-item:hover { border-color: var(--border-light); }
.settings-item-name { font-size: .875rem; color: var(--text-primary); }
.btn-settings-del {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: .8rem; padding: 4px 8px;
  border-radius: var(--radius-xs); transition: color .15s, background .15s;
}
.btn-settings-del:hover { color: var(--danger); background: rgba(239,68,68,.08); }

.settings-add-row { display: flex; gap: 8px; align-items: center; }
.settings-text-input {
  flex: 1; max-width: 280px;
  background: var(--bg-input); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-family: var(--font); font-size: .875rem; padding: 8px 12px; outline: none;
}
.settings-text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.pw-change-form { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-field label { font-size: .8rem; color: var(--text-secondary); }
.settings-field .settings-text-input { max-width: none; }
.pw-message { font-size: .8rem; padding: 8px 12px; border-radius: var(--radius-sm); }
.pw-message-error   { background: rgba(239,68,68,.1);  color: var(--danger); }
.pw-message-success  { background: rgba(16,185,129,.1); color: var(--success); }

.settings-wbs-group {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.settings-wbs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(77,138,240,.08), transparent);
  border-bottom: 1px solid var(--border);
  font-size: .875rem; font-weight: 600; color: var(--accent);
}
.settings-task-count { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.settings-task-list { padding: 4px 8px; }
.settings-task-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-radius: var(--radius-xs); transition: background .15s;
}
.settings-task-item:hover { background: var(--bg-card-hover); }
.settings-task-name { font-size: .83rem; color: var(--text-primary); flex: 1; }
.settings-task-name[contenteditable] {
  padding: 2px 6px; margin: -2px 0; border-radius: var(--radius-xs);
  outline: none; cursor: text; border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.settings-task-name[contenteditable]:hover { border-color: var(--border, rgba(255,255,255,0.12)); }
.settings-task-name[contenteditable]:focus { border-color: var(--accent, #4d8af0); background: var(--bg-card-hover); }
.settings-task-actions { display: flex; align-items: center; gap: 2px; }
.btn-settings-del-task, .btn-task-move {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: .75rem; padding: 3px 7px;
  border-radius: var(--radius-xs); opacity: 0; transition: color .15s, opacity .15s;
}
.settings-task-item:hover .btn-settings-del-task,
.settings-task-item:hover .btn-task-move { opacity: 1; }
.btn-settings-del-task:hover { color: var(--danger); }
.btn-task-move:hover { color: var(--accent, #4d8af0); }
.btn-task-move:disabled { opacity: .25 !important; cursor: default; color: var(--text-muted); }

.settings-task-add {
  display: flex; gap: 6px; padding: 8px;
  border-top: 1px solid var(--border); background: var(--bg-input);
}
.inp-add-task {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: .83rem; font-family: var(--font); padding: 5px 10px; outline: none;
}
.inp-add-task:focus { border-color: var(--accent); }
.settings-empty { color: var(--text-muted); font-size: .83rem; padding: 20px; text-align: center; }

/* 휴지통 — 카드형 박스 대신 구분선으로만 항목을 나눈다 */
.trash-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.trash-item:last-child { border-bottom: 0; }
.trash-item-icon { color: var(--text-muted); font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.trash-item-body { flex: 1; min-width: 0; }
.trash-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.trash-days-left { color: var(--warning); font-weight: 700; }
.trash-restore-btn { flex-shrink: 0; }

/* =============================================
   QUILL 에디터 다크 테마
   ============================================= */
#log-editor-wrap, #iq-log-editor-wrap {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--bg-input);
  margin-bottom: 6px;
  min-height: 160px;
}
#log-editor-wrap .ql-toolbar, #iq-log-editor-wrap .ql-toolbar {
  background: var(--bg-card-2);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
}
#log-editor-wrap .ql-toolbar button, #iq-log-editor-wrap .ql-toolbar button,
#log-editor-wrap .ql-toolbar .ql-picker-label, #iq-log-editor-wrap .ql-toolbar .ql-picker-label {
  color: var(--text-secondary);
}
#log-editor-wrap .ql-toolbar button:hover, #iq-log-editor-wrap .ql-toolbar button:hover,
#log-editor-wrap .ql-toolbar button.ql-active, #iq-log-editor-wrap .ql-toolbar button.ql-active,
#log-editor-wrap .ql-toolbar .ql-picker-label:hover, #iq-log-editor-wrap .ql-toolbar .ql-picker-label:hover {
  color: var(--accent);
}
#log-editor-wrap .ql-toolbar button svg .ql-stroke, #iq-log-editor-wrap .ql-toolbar button svg .ql-stroke,
#log-editor-wrap .ql-toolbar .ql-picker-label svg .ql-stroke, #iq-log-editor-wrap .ql-toolbar .ql-picker-label svg .ql-stroke { stroke: var(--text-secondary); }
#log-editor-wrap .ql-toolbar button:hover svg .ql-stroke, #iq-log-editor-wrap .ql-toolbar button:hover svg .ql-stroke,
#log-editor-wrap .ql-toolbar button.ql-active svg .ql-stroke, #iq-log-editor-wrap .ql-toolbar button.ql-active svg .ql-stroke { stroke: var(--accent); }
#log-editor-wrap .ql-toolbar button svg .ql-fill, #iq-log-editor-wrap .ql-toolbar button svg .ql-fill,
#log-editor-wrap .ql-toolbar .ql-picker-label svg .ql-fill, #iq-log-editor-wrap .ql-toolbar .ql-picker-label svg .ql-fill { fill: var(--text-secondary); }
#log-editor-wrap .ql-toolbar button:hover svg .ql-fill, #iq-log-editor-wrap .ql-toolbar button:hover svg .ql-fill,
#log-editor-wrap .ql-toolbar button.ql-active svg .ql-fill, #iq-log-editor-wrap .ql-toolbar button.ql-active svg .ql-fill { fill: var(--accent); }

#log-editor-wrap .ql-container, #iq-log-editor-wrap .ql-container {
  border: none;
  font-family: var(--font);
  font-size: .85rem;
}
#log-editor-wrap .ql-editor, #iq-log-editor-wrap .ql-editor {
  background: var(--bg-input);
  color: var(--text-primary);
  min-height: 160px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 12px;
  line-height: 1.6;
}
#log-editor-wrap .ql-editor.ql-blank::before, #iq-log-editor-wrap .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
}
#log-editor-wrap .ql-editor ul, #iq-log-editor-wrap .ql-editor ul,
#log-editor-wrap .ql-editor ol, #iq-log-editor-wrap .ql-editor ol { padding-left: 1.4em; }
#log-editor-wrap .ql-editor li, #iq-log-editor-wrap .ql-editor li { margin: 2px 0; }
#log-editor-wrap .ql-editor blockquote, #iq-log-editor-wrap .ql-editor blockquote {
  border-left: 3px solid var(--accent);
  margin: 4px 0; padding: 4px 10px;
  color: var(--text-secondary);
  background: var(--accent-dim);
  border-radius: 0 4px 4px 0;
}
#log-editor-wrap .ql-picker-options, #iq-log-editor-wrap .ql-picker-options {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#log-editor-wrap .ql-picker-item, #iq-log-editor-wrap .ql-picker-item { color: var(--text-secondary); }
#log-editor-wrap .ql-picker-item:hover, #iq-log-editor-wrap .ql-picker-item:hover { color: var(--accent); }

/* 기록 목록 — HTML 렌더링 */
.log-content.ql-content { font-size: .83rem; line-height: 1.6; color: var(--text-primary); }
.log-content.ql-content ul,
.log-content.ql-content ol { padding-left: 1.3em; margin: 4px 0; }
.log-content.ql-content li { margin: 2px 0; }
.log-content.ql-content strong { color: var(--text-primary); font-weight: 700; }
.log-content.ql-content em { font-style: italic; }
.log-content.ql-content s { text-decoration: line-through; opacity: .7; }
.log-content.ql-content blockquote {
  border-left: 3px solid var(--accent); padding: 3px 10px;
  background: var(--accent-dim); border-radius: 0 4px 4px 0;
  color: var(--text-secondary); margin: 4px 0;
}

/* =============================================
   업무일지 캘린더
   ============================================= */
/* 업무일지(캘린더) — 다른 탭(#tab-ai/#tab-projects/#tab-inquiry)과 동일한 방식으로
   #app-main을 세로 flex 컨테이너로 바꿔, #tab-journal이 "화면에 실제로 남은 높이"
   전체를 정확히 채우게 한다. 이걸 빼먹으면 #journal-page의 height:100%가 기준으로
   삼을 부모 높이가 없어(=auto) 달력이 내용 높이만큼만 차지하고, #app-main
   아래쪽에 회색 여백이 그대로 남는다 — 지금 이 버그의 원인이었다.
   #app-main 자체의 여백(padding)은 그대로 두고 display만 바꾸므로, 기존
   페이지 좌우/상단 여백은 그대로 유지된다. */
#tab-journal { gap: 0; overflow: hidden; flex: 1; min-height: 0; }
#app-main:has(#tab-journal:not([style*="none"])) {
  display: flex; flex-direction: column; overflow: hidden;
}
#app-main:has(#tab-journal:not([style*="none"])) .tab-page:not(#tab-journal) { display: none !important; }

#journal-page {
  display: flex; flex-direction: column;
  height: 100%; padding: 20px 24px; gap: 0;
  flex: 1; min-height: 0;
}

.journal-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 12px;
  background: var(--section-bar-bg); padding: 0 16px; min-height: 38px; border-radius: 2px;
}
.journal-header h2 {
  font-size: .82rem; font-weight: 700; color: #fff; margin: 0;
  display: flex; align-items: center; gap: 8px; padding: 9px 0;
}
.journal-controls { display: flex; align-items: center; gap: 8px; }

.journal-month-btn {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 6px 12px; cursor: pointer; font-family: var(--font);
  transition: background .15s; font-size: 13px;
}
.journal-month-btn:hover { background: var(--bg-hover); }

#journal-month-label {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
  min-width: 110px; text-align: center;
}

.journal-filter-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; flex-wrap: wrap; flex: 1; min-width: 0; margin-bottom: 0;
}
.journal-member-filter {
  display: flex; gap: 6px; margin-bottom: 0;
}
.jmf-select {
  min-width: 160px; max-width: 220px;
}
/* 평소엔 돋보기 아이콘만 있는 원형 버튼처럼 접혀 있다가, 클릭하면 그 자리에서
   입력칸이 펼쳐지는 방식 — 검색을 자주 안 쓸 때 가로 공간을 아낀다. */
.journal-search-wrap {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 10px;
  width: 340px; transition: width .15s ease, padding .15s ease;
  overflow: hidden;
}
.journal-search-wrap.collapsed {
  width: 32px; padding: 5px; cursor: pointer;
}
.journal-search-wrap.collapsed input,
.journal-search-wrap.collapsed .journal-search-clear { display: none; }
/* 검색창까지는 왼쪽에 붙이고, 월 이동/보기전환/새 업무 컨트롤은 같은 줄 맨 오른쪽으로 */
.journal-filter-row .journal-controls { margin-left: auto; }
.journal-search-toggle {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 2px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px; outline: none; box-shadow: none;
}
.journal-search-toggle:focus { outline: none; box-shadow: none; }
.journal-search-wrap input,
#journal-page .journal-search-wrap input:focus {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  box-shadow: none; color: var(--text-primary); font-size: 13px; font-family: var(--font);
}
.journal-search-clear {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 2px 4px; border-radius: 3px; outline: none; box-shadow: none;
}
.journal-search-clear:focus { outline: none; box-shadow: none; }
.journal-search-clear:hover { color: var(--danger); }
.journal-search-count {
  font-size: 12px; color: var(--text-muted); padding: 8px 10px 2px;
}
.jmf-btn {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 12px; font-size: 12px;
  color: var(--text-secondary); cursor: pointer; transition: all .15s;
  font-family: var(--font);
}
.jmf-btn:hover { border-color: var(--accent); color: var(--accent); }
.jmf-btn.active {
  background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent); font-weight: 500;
}

/* 주(week) 번호를 달력 박스 "바깥"(테두리 밖 페이지 여백)에 얹기 위한 바깥 레이아웃.
   .journal-calendar의 왼쪽 테두리선이 "업무일지" 헤더 박스의 왼쪽선과 정확히
   같은 위치(x=0)에 오도록, .cal-week-col은 더 이상 그 앞자리를 차지하지 않고
   #app-main의 기존 좌측 여백(24px, 회색 페이지 배경) 위에 절대배치로 얹는다. */
.cal-week-row { flex: 1; display: flex; min-height: 0; gap: 0; position: relative; }
.cal-week-col {
  position: absolute; top: 0; bottom: 0; left: -24px; width: 24px;
  display: flex; flex-direction: column;
  background: var(--product-page, transparent);
  pointer-events: none;
}
.cal-week-col-spacer { flex-shrink: 0; }
/* 주차 번호는 달력 테두리 바로 왼쪽에 붙도록 오른쪽 정렬한다. */
.cal-week-cell {
  flex: 1 1 0; display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: 8px; padding-right: 6px; font-size: 11px; font-weight: 500; color: var(--text-muted);
}

.journal-calendar {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; min-height: 0;
}

.cal-dow-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: none; border-bottom: 1px solid var(--border);
  /* .cal-grid의 세로 스크롤바 폭만큼 항상 여백을 예약해, 스크롤 유무와 무관하게
     요일 헤더와 날짜 칸의 7열이 항상 정확히 정렬되게 한다. */
  padding-right: 5px;
}
.cal-dow-header span {
  text-align: center; font-size: 12px; font-weight: 500;
  color: var(--text-muted); padding: 8px 0;
}
.cal-dow-header span:first-child { color: #ef5350; }
.cal-dow-header span:last-child { color: #5b9cf6; }

/* 캘린더 / 리스트 뷰 토글 */
.journal-view-toggle {
  display: flex; gap: 2px; padding: 3px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-left: 4px;
}
.jvt-btn {
  background: none; border: none; color: var(--text-muted);
  padding: 6px 10px; border-radius: var(--radius-xs); cursor: pointer;
  font-size: 13px; transition: all .15s;
}
.jvt-btn:hover { color: var(--text-primary); }
.jvt-btn.active { background: var(--accent); color: #fff; }

/* 업무일지 리스트 뷰 */
.journal-list-view {
  flex: 1; overflow-y: auto; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 0;
}
.journal-list-empty {
  text-align: center; color: var(--text-muted); font-size: 13px; padding: 60px 20px;
}
.jl-group { border-bottom: 1px solid var(--border); }
.jl-group:last-child { border-bottom: none; }
.jl-date-header {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  padding: 8px 16px; background: var(--bg-card-2);
}
.jl-date-header.jl-today { color: var(--accent); }
.jl-row {
  display: grid; grid-template-columns: 64px 1fr 160px 160px;
  align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .1s;
  font-size: 13px;
}
.jl-row:hover { background: var(--bg-card-hover); }
.jl-row.wt-office { border-left-color: #4d8af0; }
.jl-row.wt-trip    { border-left-color: #ef5350; }
.jl-row.wt-out     { border-left-color: #7c5cfc; }
.jl-row.wt-meet    { border-left-color: #10b981; }
.jl-row.wt-off     { border-left-color: #64748b; }
.jl-time { color: var(--text-muted); font-size: 12px; }
.jl-title { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-wt { color: var(--text-secondary); font-size: 12px; }
.jl-assignees { color: var(--text-muted); font-size: 12px; text-align: right; }

@media (max-width: 768px) {
  .jl-row { grid-template-columns: 1fr; gap: 2px; }
  .jl-assignees { text-align: left; }
}

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  /* 주가 적어 전체 칸 수가 화면보다 짧을 때, 아래쪽에 빈 회색 공백이 남지 않도록
     각 행이 최소 130px를 유지하면서 남는 세로 공간을 똑같이 나눠 갖는다
     (주가 많아 다 못 담으면 130px에서 멈추고 스크롤). */
  grid-auto-rows: minmax(130px, 1fr);
  flex: 1; overflow-y: auto;
  /* 스크롤이 실제로 필요 없을 때도 항상 스크롤바 폭(5px)을 예약해
     헤더와의 열 정렬이 스크롤 유무에 따라 흔들리지 않게 한다. */
  scrollbar-gutter: stable;
}

.cal-cell {
  /* CSS Grid 아이템의 기본값(min-width:auto)은 내부 콘텐츠(긴 일정 제목 등)의
     최소 크기만큼 트랙을 강제로 넓혀, 요일별 칸 너비가 제각각으로 벌어지는
     원인이 된다. min-width:0으로 1fr 균등분배가 실제로 적용되게 한다. */
  min-width: 0; min-height: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 5px;
  cursor: default; position: relative;
  transition: background .1s;
  /* 하루 일정이 셀 높이를 넘어서면 행 전체가 늘어나 다른 요일 칸까지 삐뚤어지는
     대신, 이 칸 안에서만(cal-entries) 세로 스크롤이 생기게 한다 — 날짜 숫자는
     항상 맨 위에 고정. */
  display: flex; flex-direction: column; overflow: hidden;
}
.cal-cell:hover { background: var(--bg-card-hover); }
.cal-cell.other-month { opacity: .35; }
.cal-cell.today { background: rgba(77,138,240,.07); }
.cal-cell.cal-drop-target {
  background: rgba(77,138,240,.16);
  outline: 2px dashed var(--accent); outline-offset: -2px;
}
.cal-cell.today .cal-day-num {
  background: var(--accent); color: #fff;
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.cal-cell:nth-child(7n+1) .cal-day-num { color: #ef5350; }
.cal-cell:nth-child(7n)   .cal-day-num { color: #5b9cf6; }
.cal-cell.today:nth-child(7n+1) .cal-day-num,
.cal-cell.today:nth-child(7n)   .cal-day-num { color: #fff; }

.cal-day-num {
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  margin-bottom: 4px; line-height: 22px; padding: 0 2px;
  flex-shrink: 0;
}

/* 날짜 숫자 아래 남은 칸 높이만큼만 차지하고(flex:1), 그 안에서 넘치는 일정은
   칸 자체를 늘리지 않고 세로 스크롤로 처리한다(구글 캘린더와 동일). */
.cal-entries {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto;
}
.cal-entries::-webkit-scrollbar { width: 5px; }
.cal-entries::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* 구글 캘린더 스타일: 색 점 + 제목 한 줄만 표시 (2026-08 개편) */
.cal-entry-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1.6; padding: 1px 4px; border-radius: 3px;
  cursor: grab; user-select: none; transition: background .1s;
}
.cal-entry-chip:hover { background: rgba(0,0,0,.045); }
.cal-entry-chip.dragging { opacity: .3; cursor: grabbing; }
.cal-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cal-chip-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-primary); font-weight: 500; min-width: 0;
}
.cal-entry-chip.wt-office .cal-chip-dot { background: #4d8af0; }
.cal-entry-chip.wt-trip   .cal-chip-dot { background: #ef5350; }
.cal-entry-chip.wt-out    .cal-chip-dot { background: #7c5cfc; }
.cal-entry-chip.wt-meet   .cal-chip-dot { background: #10b981; }
.cal-entry-chip.wt-off    .cal-chip-dot { background: #64748b; }
.cal-chip-time { font-size: 10.5px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }

/* 시간을 지정한 업무(cal-entry-timed)는 기존처럼 점+시간+제목이고, 하루종일
   업무(cal-entry-allday)는 구글 캘린더처럼 근무형태 색으로 꽉 찬 막대에 흰 글씨. */
.cal-entry-chip.cal-entry-allday { padding: 2px 6px; }
.cal-entry-chip.cal-entry-allday .cal-chip-title { color: #fff; font-weight: 600; }
.cal-entry-chip.cal-entry-allday:hover { filter: brightness(1.08); }
.cal-entry-chip.cal-entry-allday.wt-office { background: #4d8af0; }
.cal-entry-chip.cal-entry-allday.wt-trip   { background: #ef5350; }
.cal-entry-chip.cal-entry-allday.wt-out    { background: #7c5cfc; }
.cal-entry-chip.cal-entry-allday.wt-meet   { background: #10b981; }
.cal-entry-chip.cal-entry-allday.wt-off    { background: #64748b; }

.cal-add-btn {
  display: none; position: absolute; bottom: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: none; color: #fff;
  font-size: 11px; cursor: pointer; line-height: 20px; text-align: center;
}
.cal-cell:hover .cal-add-btn { display: block; }

/* 칩 멀티셀렉트 */
.chip-select { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.chip-opt {
  padding: 4px 11px; border-radius: 20px; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-secondary); cursor: pointer; transition: all .15s;
  font-family: var(--font); user-select: none;
}
.chip-opt:hover { border-color: var(--accent); color: var(--accent); }
.chip-opt.selected {
  background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}

/* 여러 개 선택 가능한 드롭다운(근무형태/담당자) — 칩을 항상 펼쳐두는 대신 구글
   캘린더의 "참석자 추가"처럼 평소엔 한 줄로 접혀 있다가 눌러야 목록이 펼쳐진다. */
.ms-dropdown { position: relative; }
.ms-dropdown-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 12px; font-family: var(--font);
  padding: 6px 10px; cursor: pointer; text-align: left; transition: border-color .15s;
}
.ms-dropdown-btn:hover { border-color: var(--accent); }
.ms-dropdown.open .ms-dropdown-btn { border-color: var(--accent); }
.ms-dropdown-btn i { color: var(--text-muted); font-size: 10px; flex: 0 0 auto; }
.ms-dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-dropdown-label.is-placeholder { color: var(--text-muted); }
.ms-dropdown-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 220px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 4px;
}
.ms-option {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-xs); cursor: pointer;
  font-size: 12px; color: var(--text-primary); font-family: var(--font);
}
.ms-option:hover { background: var(--bg-card-hover); }
.ms-option input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

/* form-select */
.form-select {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  padding: 8px 10px; font-family: var(--font); font-size: 13px;
}
.form-select:focus { outline: none; border-color: var(--accent); }

/* 업무일지 프로젝트 선택 콤보박스(검색/완료숨김/최근순) */
.proj-combo { position: relative; }
.proj-combo-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); padding: 8px 10px; font-family: var(--font); font-size: 13px;
  cursor: pointer; text-align: left;
}
.proj-combo-trigger:hover { border-color: var(--accent); }
.proj-combo-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-combo-trigger > i { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.proj-combo-menu {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-card, #141626); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0,0,0,0.5); overflow: hidden;
}
.proj-combo-search {
  width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border);
  background: var(--bg-input); color: var(--text-primary); padding: 9px 12px; font-size: 13px; outline: none;
}
.proj-combo-list { max-height: 240px; overflow-y: auto; padding: 4px; }
.proj-combo-group { padding: 7px 10px 3px; font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.proj-combo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-xs); cursor: pointer; font-size: .85rem; color: var(--text-primary);
}
.proj-combo-item:hover { background: var(--bg-card-hover, rgba(255,255,255,0.05)); }
.proj-combo-item.sel { background: rgba(77,138,240,0.14); color: var(--accent, #4d8af0); }
.proj-combo-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-combo-tag { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.proj-combo-empty { padding: 12px 10px; text-align: center; color: var(--text-muted); font-size: .82rem; }
.proj-combo-showall {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-muted); cursor: pointer; user-select: none;
}
.proj-combo-showall input { cursor: pointer; }

/* 업무일지 Quill 에디터 */
#journal-quill-editor .ql-toolbar {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
#journal-quill-editor .ql-container {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-input);
}
#journal-quill-editor .ql-editor {
  min-height: 420px; max-height: 600px;
  color: var(--text-primary); font-family: var(--font); font-size: 13px;
}
#journal-quill-editor .ql-editor.ql-blank::before { color: var(--text-muted); }

/* ── 이미지 리사이즈 오버레이 ──────────────────────── */
.img-resize-overlay {
  position: fixed;
  pointer-events: none;
  border: 2px solid var(--accent);
  z-index: 9999;
  box-sizing: border-box;
}
.img-resize-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: all;
}
.img-resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
.img-resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
.img-resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.img-resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
/* Edge handles – rectangular, free resize */
.img-resize-handle.n, .img-resize-handle.s,
.img-resize-handle.e, .img-resize-handle.w {
  width: 20px; height: 6px; border-radius: 3px;
}
.img-resize-handle.e, .img-resize-handle.w {
  width: 6px; height: 20px;
}
.img-resize-handle.n  { top: -3px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.img-resize-handle.s  { bottom: -3px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.img-resize-handle.e  { right: -3px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
.img-resize-handle.w  { left: -3px; top: 50%; transform: translateY(-50%); cursor: w-resize; }

.img-resize-bar {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  pointer-events: all;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.img-resize-bar button {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
}
.img-resize-bar button:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── 업무일지 파일 첨부 ─────────────────────────── */
.journal-file-drop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  transition: border-color .2s, background .2s;
}
.journal-file-drop:hover, .journal-file-drop.drag-over {
  border-color: var(--accent);
  background: rgba(77,138,240,.06);
  color: var(--accent);
}
.journal-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.journal-attach-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}
.journal-attach-item a { color: var(--text-secondary); text-decoration: none; }
.journal-attach-item a:hover { color: var(--accent); }
.journal-attach-item i { color: var(--accent); }
.attach-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 0; line-height: 1; font-size: 11px;
}
.attach-del-btn:hover { color: var(--danger); }

/* 업무일지 실시간 공동편집 */
.journal-collab-presence {
  display: flex; align-items: center; gap: 6px; margin-left: 10px; flex-wrap: wrap;
}
.journal-collab-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(52, 211, 153, .15); color: #34d399; border: 1px solid rgba(52, 211, 153, .3);
}
.journal-collab-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .25);
}

/* 업무 내용 안에서 @멘션 */
.journal-quill-wrap { position: relative; }
.mention-tag { color: var(--accent); font-weight: 600; }

/* 업무일지 작성 양식(템플릿) */
.journal-content-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.journal-template-control { position: relative; flex-shrink: 0; }
.journal-template-menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; min-width: 240px; max-width: 320px;
  background: var(--bg-card, #141626); border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: var(--radius-sm, 8px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); overflow: hidden;
}
.jtpl-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.jtpl-item { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-xs, 6px); }
.jtpl-item:hover { background: var(--bg-card-hover, rgba(255,255,255,0.05)); }
.jtpl-name { flex: 1; padding: 7px 10px; font-size: .85rem; color: var(--text-primary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jtpl-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 5px 9px; font-size: .8rem; border-radius: var(--radius-xs, 6px); opacity: 0; transition: color .15s, opacity .15s; }
.jtpl-item:hover .jtpl-del { opacity: 1; }
.jtpl-del:hover { color: var(--danger); }
.jtpl-empty { padding: 14px 10px; text-align: center; font-size: .82rem; color: var(--text-muted); }
.jtpl-footer { border-top: 1px solid var(--border, rgba(255,255,255,0.1)); padding: 4px; }
.jtpl-save { width: 100%; background: none; border: none; color: var(--accent, #4d8af0); cursor: pointer; padding: 8px 10px; font-size: .83rem; font-weight: 600; text-align: left; border-radius: var(--radius-xs, 6px); }
.jtpl-save:hover { background: var(--bg-card-hover, rgba(77,138,240,0.1)); }
.journal-mention-menu {
  position: absolute; z-index: 50;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,.25); min-width: 140px; max-height: 180px; overflow-y: auto;
}
.mention-opt { padding: 7px 12px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.mention-opt:hover { background: var(--bg-hover); }

/* ── 새 업무기록 모달 — 구글 캘린더 이벤트 팝업과 같은 "아이콘 + 내용" 줄 구조 ── */
.gcal-modal .modal-header { padding: 10px 14px; border-bottom: none; }
.gcal-modal-body { padding: 4px 26px 22px; }
/* input[type="text"|"date"], select 에 적용되는 전역 기본 스타일(padding 9px 13px,
   테두리 박스 등, style.css 상단 참조)이 attribute 선택자라 명시성이 높다 —
   #modal-journal 로 감싸서 명시성을 올려 확실히 이겨내도록 한다. */
#modal-journal .gcal-title-input {
  display: block; width: 100%; border: none; border-bottom: 2px solid var(--border);
  background: transparent; color: var(--text-primary); font-size: 21px; font-weight: 500;
  padding: 6px 2px 10px; outline: none; font-family: var(--font); margin-bottom: 20px;
  box-shadow: none;
}
#modal-journal .gcal-title-input:focus { border-bottom-color: var(--accent); box-shadow: none; }
#modal-journal .gcal-title-input::placeholder { color: var(--text-muted); font-weight: 400; }

.gcal-row { display: flex; align-items: flex-start; gap: 18px; padding: 9px 0; }
.gcal-row-icon { width: 18px; flex-shrink: 0; padding-top: 7px; color: var(--text-muted); font-size: 14px; text-align: center; }
.gcal-row-body { flex: 1; min-width: 0; }
.gcal-row-label {
  font-size: 10.5px; color: var(--text-muted); font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; margin-bottom: 7px;
}

/* 프로젝트 연결/태스크 선택/담당자/근무형태를 한 줄(아이콘 하나)에 세로로 모아 배치. */
.gcal-detail-group { display: flex; flex-direction: row; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.gcal-subfield { min-width: 0; }
.gcal-subfield .gcal-row-label { margin-bottom: 6px; }
/* 프로젝트 연결/태스크 선택/담당자/근무형태를 한 줄에 고정폭으로 배치 */
.gcal-subfield-project  { flex: 0 0 332px; width: 332px; }
.gcal-subfield-task     { flex: 0 0 200px; width: 200px; }
.gcal-subfield-assignee { flex: 0 0 100px; width: 100px; }
.gcal-subfield-vendor   { flex: 0 0 100px; width: 100px; }
.gcal-subfield-worktype { flex: 0 0 100px; width: 100px; }

.gcal-date-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
/* 실제 <input type="date">는 투명하게 숨기고(연/월/일 표기 형식을 브라우저가 강제해
   "년도"를 뺄 수 없다), 그 위에 "08월 19일 (수요일)" 형식으로 직접 포맷한 텍스트를
   얹는다 — 클릭하면 투명 input이 클릭을 받아 datepicker.js의 커스텀 달력이 그대로 뜬다. */
.gcal-date-field { position: relative; display: inline-flex; }
#modal-journal .gcal-date-input-real {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; padding: 0; margin: 0; cursor: pointer;
}
.gcal-date-display {
  display: inline-block; padding: 4px 2px; border-bottom: 1px solid transparent;
  color: var(--text-primary); font-size: 14px; white-space: nowrap; pointer-events: none;
}
.gcal-date-field:hover .gcal-date-display { border-bottom-color: var(--accent); }
.gcal-date-sep { color: var(--text-muted); font-size: 13px; }
.gcal-time-pill {
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-input); color: var(--text-primary); font-size: 12px;
  padding: 5px 14px; font-family: var(--font); cursor: pointer;
}
.gcal-time-pill:hover { border-color: var(--accent); color: var(--accent); }
.gcal-task-select { margin-top: 8px; }

/* 시간 범위 선택 팝업 — datepicker.js의 .dp-popup 박스 스타일을 그대로 재사용.
   2026-09: 구글 캘린더 이벤트 생성 팝업 스타일로 개편 — select 두 개 대신
   "시작 chip - 종료 chip" 인라인 배치 + 각 chip을 누르면 15분 단위 스크롤/타이핑
   드롭다운(.gcal-time-list-popup)이 그 chip 밑에 따로 열린다. */
.gcal-time-popup { width: auto; min-width: 220px; }
.gcal-time-popup-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px;
}
.gcal-time-popup-sep { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.gcal-time-chip {
  flex: 1; min-width: 0; background: var(--bg-input, #f1f3f4);
  border: none; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: #3c4043; font-size: 13px; font-weight: 500; text-align: center;
  padding: 7px 8px; font-family: var(--font); cursor: pointer; outline: none;
  transition: background .12s ease, border-color .12s ease;
}
.gcal-time-chip:hover { background: var(--accent-dim, #e8eaed); }
.gcal-time-chip.is-open { border-bottom-color: var(--accent, #1a73e8); background: var(--accent-dim, #e8f0fe); color: var(--accent, #1a73e8); }
.gcal-allday-check {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary, #5f6368);
  cursor: pointer; user-select: none; margin-bottom: 4px; padding: 2px 2px;
}
.gcal-allday-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent, #1a73e8); cursor: pointer; margin: 0; }

/* 시간 chip 밑에 뜨는 2단계 팝업 — 위에 타이핑 가능한 입력칸, 아래에 15분 단위
   스크롤 목록. datepicker.js의 .dp-popup 박스와 같은 폭/그림자 규칙을 쓴다. */
.gcal-time-list-popup { width: 150px; padding: 6px; }
.gcal-time-list-input {
  width: 100%; box-sizing: border-box; background: var(--bg-input, #f1f3f4); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12.5px;
  padding: 6px 8px; font-family: var(--font); outline: none; margin-bottom: 6px;
}
.gcal-time-list-input:focus { border-color: var(--accent, #1a73e8); }
.gcal-time-list-scroll { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.gcal-time-list-item {
  text-align: left; background: none; border: none; border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 12.5px; color: var(--text-primary); cursor: pointer;
  font-family: var(--font); flex-shrink: 0;
}
.gcal-time-list-item:hover { background: var(--accent-dim, #e8f0fe); color: var(--accent, #1a73e8); }
.gcal-time-list-item.is-active { background: var(--accent, #1a73e8); color: #fff; font-weight: 600; }
.gcal-time-list-empty { padding: 10px 6px; font-size: 12px; color: var(--text-muted); text-align: center; }

/* ── Quill 리스트 들여쓰기 제거 ────────────────── */
.ql-editor ul,
.ql-editor ol { padding-left: 1.2em; margin: 0; }
.ql-editor li { padding-left: 0 !important; }
.ql-editor li.ql-indent-1 { padding-left: 1.5em !important; }
.ql-editor li.ql-indent-2 { padding-left: 3em !important; }
.ql-editor li.ql-indent-3 { padding-left: 4.5em !important; }

/* ── 토글 블록쿼트 ("> " 단축키) ───────────────── */
/* 기본 blockquote - 토글로 항상 사용 (border 없음) */
.ql-editor blockquote {
  border-left: none !important;
  padding: 2px 8px 2px 26px !important;
  margin: 2px 0;
  color: var(--text-primary);
}

/* 토글 헤더 */
.ql-editor blockquote.is-toggle-header {
  border-left: none !important;
  padding: 2px 8px 2px 26px !important;
  margin: 2px 0 0 0;
  background: none;
  border-radius: 0;
  cursor: default;
  color: var(--text-primary);
  position: relative;
}

/* 토글 자식 (blockquote, 리스트, 텍스트 등 모든 타입) */
.ql-editor .is-toggle-child {
  padding-left: 32px !important;
  margin: 0;
  background: none;
}
/* 토글 자식 안의 리스트 글머리 표시 */
.ql-editor .is-toggle-child.ql-indent-1,
.ql-editor .is-toggle-child[class*="ql-indent"] {
  padding-left: 32px !important;
}
.ql-editor .is-toggle-child li::before {
  margin-left: -1em;
}

/* ── Quill 공통 dark theme ─────────────────────── */
.ql-toolbar .ql-stroke { stroke: var(--text-secondary); }
.ql-toolbar .ql-fill  { fill:   var(--text-secondary); }
.ql-toolbar .ql-picker-label { color: var(--text-secondary); }
.ql-toolbar .ql-picker-options {
  background: var(--bg-card-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.ql-toolbar .ql-picker-item { color: var(--text-secondary); }

/* =============================================
   SHOP MASTER
   ============================================= */
#tab-shopmaster { gap: 0; overflow: hidden; flex: 1; min-height: 0; }
#shopmaster-page { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
/* 샵마스터 탭 활성 시 app-main 패딩/스크롤 억제 */
#app-main:has(#tab-shopmaster:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-shopmaster:not([style*="none"])) .tab-page:not(#tab-shopmaster) { display: none !important; }
.sm-layout { flex: 1; min-height: 0; }
.sm-detail-panel { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
#sm-detail { flex: 1; min-height: 0; }
.sm-header { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 12px; border-bottom: 1px solid var(--border); }
.sm-header h2 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.sm-layout { display: flex; flex: 1; overflow: hidden; }

/* 목록 패널 — 드래그로 폭 조절 가능(기본 280px, 200~600px). JS가 width를 인라인으로 설정한다 */
.sm-list-panel { width: 280px; min-width: 200px; max-width: 600px; flex-shrink: 0;
  border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }

/* 리사이저 핸들 */
.sm-list-resizer { width: 5px; flex-shrink: 0; cursor: col-resize; user-select: none;
  background: transparent; position: relative; transition: background-color .15s; }
.sm-list-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 1px; right: 1px;
  border-radius: 2px; }
.sm-list-resizer:hover, .sm-list-resizer.is-dragging { background: #3b82f6; }
body.sm-resizing { cursor: col-resize !important; user-select: none !important; }
body.sm-resizing * { user-select: none !important; }
.sm-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); color: var(--text-muted); }
.sm-search input { background: none; border: none; outline: none; color: var(--text-primary);
  font-size: 13px; flex: 1; font-family: var(--font); }
.sm-list-showall { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); font-size: .78rem; color: var(--text-muted);
  cursor: pointer; user-select: none; }
.sm-list-showall input { cursor: pointer; }
#sm-list { flex: 1; overflow-y: auto; }
.sm-list-item { padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .15s; }
.sm-list-item:hover { background: var(--bg-hover); }
.sm-list-item.active { background: var(--accent-dim); border-left: 3px solid var(--accent); }
.sm-list-item .sm-item-code { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 3px; }
.sm-list-item .sm-item-name { font-size: 13px; color: var(--text-primary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-list-item .sm-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 상세 패널 */
.sm-detail-panel { display: flex; flex-direction: column; overflow: hidden; }
.sm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); gap: 12px; }
.sm-empty i { font-size: 3rem; opacity: .3; }
.sm-empty p { font-size: 14px; }
#sm-detail { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.sm-detail-header { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sm-detail-actions { display: flex; gap: 8px; align-items: center; }
.sm-proj-code { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: .05em; }
.sm-proj-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }

/* 탭 */
.sm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 16px; }
.sm-tab { background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; font-size: 13px; color: var(--text-muted); cursor: pointer;
  font-family: var(--font); transition: color .15s, border-color .15s; }
.sm-tab:hover { color: var(--text-secondary); }
.sm-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* 탭 콘텐츠 */
.sm-tab-content { flex: 1; overflow-y: auto; padding: 16px 20px; }
.sm-section { margin-bottom: 20px; }
.sm-section-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.sm-add-row-btn { font-size: 11px; padding: 3px 8px; }

/* 필드 그리드 */
.sm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sm-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sm-span2 { grid-column: span 2; }
.sm-field { display: flex; flex-direction: column; gap: 4px; }
.sm-field label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.sm-field input, .sm-field select, .sm-field textarea {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 13px; padding: 6px 9px; font-family: var(--font); outline: none;
  transition: border-color .15s;
}
.sm-field input:focus, .sm-field select:focus { border-color: var(--accent); }
.sm-inline { display: flex; gap: 6px; }
.sm-inline input, .sm-inline select { flex: 1; }

/* 체크/라디오 행 */
.sm-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 8px; padding: 8px 10px; background: var(--bg-input);
  border-radius: var(--radius-sm); border: 1px solid var(--border); }
.sm-chip-label { font-size: 11px; font-weight: 700; color: var(--text-muted);
  min-width: 70px; text-transform: uppercase; letter-spacing: .03em; }
.sm-check, .sm-radio { display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.sm-check input[type=checkbox], .sm-radio input[type=radio] { accent-color: var(--accent); }

/* 테이블 */
/* 2026-08: 행 높이를 기존의 80% 수준으로 줄여 한 화면에 더 많은 행이 보이게(시인성 개선) 한다.
   (표 안 글자 크기는 그대로 두고, 위아래 여백만 줄인다.) */
.sm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sm-table th { background: var(--bg-thead); color: #ffffff; font-weight: 700;
  text-align: center; padding: 6px 8px; border: 1px solid var(--border-thead); white-space: nowrap; }
.sm-table td { border: 1px solid var(--border); padding: 5px 8px; vertical-align: middle; }
.sm-table tbody tr:nth-child(even) td { background: var(--row-stripe); }
.sm-table input, .sm-table select { background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 12.5px; padding: 2px 5px; width: 100%;
  font-family: var(--font); }
.sm-table input:focus, .sm-table select:focus { background: var(--bg-input); border-radius: 3px; }
.sm-table tr:hover td { background: var(--row-hover) !important; }
.sm-table tr.sm-total-row td { background: var(--bg-card-2); font-weight: 700; }
.sm-table .sm-received-yes { color: var(--success); font-weight: 600; }
.sm-table .sm-received-no  { color: var(--text-muted); }
.sm-row-del { background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 3px 6px; border-radius: 3px; }
.sm-row-del:hover { color: var(--danger); background: rgba(239,68,68,.1); }

/* 정렬 가능한 리스트 헤더 (인콰리·견적 목록 등) */
.sm-table th.iq-sortable, .pay-sheet th.iq-sortable { cursor: pointer; user-select: none; }
.sm-table th.iq-sortable:hover, .pay-sheet th.iq-sortable:hover { background: var(--bg-thead); }
.iq-sort-ind { display: inline-block; width: 10px; font-size: 10px; opacity: .5; }
.sm-table th.iq-sortable.sort-asc .iq-sort-ind::after, .pay-sheet th.iq-sortable.sort-asc .iq-sort-ind::after { content: "\25B2"; opacity: 1; }
.sm-table th.iq-sortable.sort-desc .iq-sort-ind::after, .pay-sheet th.iq-sortable.sort-desc .iq-sort-ind::after { content: "\25BC"; opacity: 1; }

/* ── 표 컬럼 폭 드래그 조절(6번) ── */
/* vh 기준 높이 계산은 브라우저 창 크기(작업표시줄 등)에 따라 어긋나 화면 아래에 빈
   공간이 남거나 반대로 모자랄 수 있다(AI/샵마스터 탭에서 이미 겪은 문제라 그때와 동일한
   해법을 쓴다) — #app-main의 남은 공간을 flex로 정확히 채워서, 표 영역이 화면 하단까지
   꽉 차고 가로 스크롤바는 항상 그 표의 실제 맨 아래(화면 안)에 붙어 있게 한다. */
#tab-projects, #tab-inquiry { gap: 0; overflow: hidden; flex: 1; min-height: 0; }
#app-main:has(#tab-projects:not([style*="none"])),
#app-main:has(#tab-inquiry:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-projects:not([style*="none"])) .tab-page:not(#tab-projects),
#app-main:has(#tab-inquiry:not([style*="none"])) .tab-page:not(#tab-inquiry) { display: none !important; }
#projects-section, #inquiry-section { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
#projects-section > .section-header, #inquiry-section > .section-header {
  padding: 0 16px; margin-bottom: 0; flex-shrink: 0;
}
#projects-section > #projects-empty, #inquiry-section > #inquiry-empty { margin: 20px 28px; }
/* 필터 영역(다크바/필터그리드)과 표 사이에 배경이 비치는 여백을 두지 않고,
   전체가 하나로 이어진 표처럼 보이도록 좌우/하단 여백을 없앤다. */
#projects-section > .resizable-table-wrap, #inquiry-section > .resizable-table-wrap {
  margin: 0; flex: 1; min-height: 0; border: 1px solid var(--border); border-top: none;
}

/* ── 작업보드(칸반) — 같은 원칙: 바깥 박스는 뷰포트에 고정, 상태별 칸(시작전/진행중/완료)이
   남는 높이를 균등하게 나눠 갖고, 각 칸의 카드 목록만 내부에서 스크롤한다(헤더는 고정). ── */
#tab-board { gap: 0; overflow: hidden; flex: 1; min-height: 0; }
#app-main:has(#tab-board:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-board:not([style*="none"])) .tab-page:not(#tab-board) { display: none !important; }
#board-section { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
#board-section > .section-header { padding: 0 16px; margin-bottom: 0; flex-shrink: 0; }
#board-section > .db-card-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.board-grid-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.board-grid-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.board-grid-table thead th { position: sticky; top: 0; z-index: 1; }

.resizable-table-wrap { overflow: auto; }
.resizable-table { table-layout: fixed; width: auto; }
.resizable-table th { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resizable-table thead th { position: sticky; top: 0; z-index: 2; }
/* 이 표의 스크롤바는 기본 두께(10px)와 동일하게 맞춘다 */
.resizable-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.col-resize-handle {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 3;
}
.col-resize-handle:hover, .col-resize-handle.is-active { background: rgba(255,255,255,.35); }
body.col-resizing, body.col-resizing * { user-select: none !important; cursor: col-resize !important; }

/* 가상 스크롤(core.js createVirtualTableBody) 스페이서 행 — 높이만 차지하고
   보이지 않아야 한다(테두리/줄무늬/호버 배경 등 실제 데이터행 스타일이 섞이면
   스크롤할 때 빈 줄이 깜빡여 보인다). */
.vt-spacer { pointer-events: none; }
.vt-spacer td { border: none !important; background: transparent !important; padding: 0 !important; }
.vt-spacer:hover td, .sm-table tbody tr.vt-spacer:nth-child(even) td { background: transparent !important; }

/* 매입관리 발주서/계약서/결재내역 표 — 가상 스크롤이 행 높이를 균일하다고
   가정하므로(안 그러면 스크롤 위치 계산이 어긋난다), 긴 텍스트가 줄바꿈되어
   행 높이가 들쭉날쭉해지지 않도록 한 줄로 자르고 말줄임표로 표시한다. */
#po-table-orders td, #po-table-contracts td, #po-table-payments td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* PJT수금관리 스프레드시트 (자금관리)
   — 다크 타이틀 바(.section-header)와 표 사이에 배경이 비치는 여백 없이,
     하나로 이어진 박스처럼 보이도록 붙인다(프로젝트/인콰리 리스트와 동일한 원칙). */
#payments-detail-section > .section-header { margin-bottom: 0; border-radius: 0; }
/* 조회/엑셀 버튼 줄을 타이틀 바 아래 별도 줄로 분리(인콰리·프로젝트 목록과 같은
   lf-grid 라벨형 필터 폼 위에 붙는 미니 툴바) */
.lf-toolbar-mini {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 8px 16px; border: 1px solid var(--product-border); border-top: none;
  background: var(--product-surface);
}
/* 자금관리 리스트에 인콰리·프로젝트와 동일한 lf-grid 라벨형 필터 폼을 적용 —
   좌우 테두리가 필요해 기본 lf-grid(border:0)에 사이드 테두리를 보강한다. */
#payments-detail-section .lf-grid { border-left: 1px solid var(--product-border); border-right: 1px solid var(--product-border); }
/* 표가 남은 화면 높이를 정확히 채우도록 flex로 전환(프로젝트/인콰리 리스트와 동일한 원칙) —
   고정 vh-calc는 창 크기·작업표시줄 등에 따라 어긋나 화면 아래 빈 공간이 남을 수 있다. */
#tab-payments { flex: 1; min-height: 0; overflow: hidden; }
#app-main:has(#tab-payments:not([style*="none"])) {
  /* 우측은 0으로 둔다 — 안쪽 .section-header가 이미 16px 우측 padding을 갖고 있어서
     (다른 화면들과 동일한 표준값), 여기서 또 16px을 더하면 총 32px로 이중 여백이
     생겨 헤더 우측 메뉴(16px 기준)와 어긋난다. */
  padding: 14px 0 16px 16px; background: var(--product-page);
  overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-payments:not([style*="none"])) .tab-page:not(#tab-payments) { display: none !important; }
#payments-detail-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
#payments-detail-section > .section-header,
#payments-detail-section .lf-toolbar-mini,
#payments-detail-section .lf-grid { flex-shrink: 0; }
.pay-sheet-wrap { width: 100%; overflow: auto; flex: 1; min-height: 0;
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
/* width는 core.js의 makeResizableTable이 인라인 style로 계산해 덮어쓴다(비고 칸에
   data-col-grow="1"을 줘서 남는 폭을 흡수 — 매입관리/인콰리와 동일한 방식). */
.pay-sheet { width: auto; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.pay-sheet th, .pay-sheet td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 4px 6px; text-align: center; white-space: nowrap; vertical-align: middle; }
.pay-sheet thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-thead); color: #fff;
  font-weight: 700; border-right: 1px solid var(--border-thead); border-bottom: 1px solid var(--border-thead); }
.pay-sheet thead tr:first-child th { top: 0; }
.pay-sheet thead tr:nth-child(2) th { top: 23px; font-size: 11px; font-weight: 600; }
.pay-sheet th.pay-group-head { font-size: 12.5px; }
.pay-sheet th.pay-group-1, .pay-sheet td.pay-group-1 { background: rgba(25,118,210,.10); }
.pay-sheet thead th.pay-group-1 { background: #234a78; }
.pay-sheet thead th.pay-group-2 { background: #2c5240; }
.pay-sheet thead th.pay-group-3 { background: #5a4a1f; }
.pay-sheet thead th.pay-group-4 { background: #5c2d2d; }
.pay-sheet thead th.pay-group-5 { background: #3d3d52; }

.pay-sheet tbody tr.pay-row td { background: var(--bg-card); }
.pay-sheet tbody tr.pay-row:nth-of-type(even) td { background: var(--row-stripe); }
.pay-sheet tbody tr.pay-row:hover td { background: var(--row-hover) !important; }

.pay-sheet .pay-sticky-1, .pay-sheet .pay-sticky-2, .pay-sheet .pay-sticky-3 { position: sticky; z-index: 2; }
.pay-sheet .pay-sticky-1 { left: 0; width: 60px; min-width: 60px; max-width: 60px; text-align: center; }
.pay-sheet .pay-sticky-3 { left: 60px; width: 130px; min-width: 130px; max-width: 130px; white-space: nowrap; text-align: center; }
.pay-sheet .pay-sticky-2 { left: 190px; width: 380px; min-width: 380px; max-width: 380px; white-space: normal;
  text-align: left; box-shadow: 2px 0 4px rgba(20,25,35,.08); }
.pay-sheet tbody .pay-sticky-1, .pay-sheet tbody .pay-sticky-2, .pay-sheet tbody .pay-sticky-3 { background: var(--bg-card); }
.pay-sheet thead th.pay-sticky-1, .pay-sheet thead th.pay-sticky-2, .pay-sheet thead th.pay-sticky-3 { z-index: 4; background: var(--bg-thead); color: #fff; }
.pay-sheet tbody tr.pay-row:nth-of-type(even) td.pay-sticky-1,
.pay-sheet tbody tr.pay-row:nth-of-type(even) td.pay-sticky-2,
.pay-sheet tbody tr.pay-row:nth-of-type(even) td.pay-sticky-3 { background: var(--row-stripe); }

.pay-sheet input.pay-cell-input { background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 12px; padding: 2px 4px; width: 100%; min-width: 56px;
  text-align: center; font-family: var(--font); border-radius: 3px; }
.pay-sheet td.pay-sticky-2 input.pay-cell-input { text-align: left; }
.pay-sheet input.pay-cell-input:focus { background: var(--bg-input); box-shadow: 0 0 0 2px var(--accent-dim);
  outline: 1px solid var(--accent); }
.pay-sheet input.pay-amt-input { font-weight: 700; }
.pay-sheet .pay-num-cell { font-weight: 600; white-space: nowrap; }
.pay-sheet td { color: var(--text-primary); }
.pay-sheet .pay-outstanding.is-due { color: var(--status-waiting); font-weight: 700; }
.pay-sheet tr.pay-total-row td { background: var(--bg-card-2) !important; font-weight: 700; position: sticky; bottom: 0; z-index: 1; }
.pay-sheet tr.pay-total-row td.pay-sticky-1, .pay-sheet tr.pay-total-row td.pay-sticky-2, .pay-sheet tr.pay-total-row td.pay-sticky-3 { z-index: 2; text-align: left; }
.pay-sheet tr.pay-total-row td.pay-total-label { width: auto; min-width: 0; max-width: none; }

/* 리스트에서 프로젝트명 클릭 -> 상세화면 전환 링크
   표준 글씨색은 검은색이라 링크도 파란색 대신 검은색 유지, 클릭 가능 표시는 hover 밑줄로만 */
.pay-sheet .pay-sticky-2.pay-open-link { cursor: pointer; color: var(--text-primary); text-decoration: none; }
.pay-sheet .pay-sticky-2.pay-open-link:hover { text-decoration: underline; }

/* 수금상태 = 계약금액 대비 실제 수금액 % 막대그래프 (리스트/상세정보그리드 공용) */
.pay-progress { display: flex; align-items: center; gap: 6px; min-width: 96px; }
.pay-progress-track { flex: 1; height: 9px; border-radius: 4.5px; background: var(--border-light); overflow: hidden; }
.pay-progress-fill { height: 100%; border-radius: 4.5px; background: var(--status-progress); transition: width .2s ease; }
.pay-progress.is-none .pay-progress-fill { background: var(--status-waiting); }
.pay-progress.is-done .pay-progress-fill { background: var(--status-done); }
.pay-progress-pct { font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; min-width: 30px; text-align: right; }
.pay-progress.is-done .pay-progress-pct { color: var(--status-done); }
.pay-progress.is-none .pay-progress-pct { color: var(--status-waiting); }

/* ── 매입관리(발주건/계약건) 목록 — 프로젝트 진행현황과 동일하게 표가 남은 화면
   높이·폭을 꽉 채우도록 flex로 전환한다(프로젝트/인콰리 리스트와 동일한 원칙). */
#tab-purchasing { gap: 0; overflow: hidden; flex: 1; min-height: 0; }
#app-main:has(#tab-purchasing:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-purchasing:not([style*="none"])) .tab-page:not(#tab-purchasing) { display: none !important; }
#purchasing-section { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
#purchasing-section > .section-header { padding: 0 16px; margin-bottom: 0; flex-shrink: 0; }
#purchasing-section > .lf-grid { flex-shrink: 0; }
#purchasing-section > #po-empty-orders,
#purchasing-section > #po-empty-contracts { margin: 20px 28px; }
#purchasing-section > .resizable-table-wrap {
  margin: 0; flex: 1; min-height: 0; border: 1px solid var(--border); border-top: none;
}

/* ── 자금관리 > 프로젝트 상세 화면 (전체화면 전환) ───────────────────────── */
.pd-topbar {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  background: var(--section-bar-bg); padding: 0 16px; min-height: 38px; border-radius: 2px;
}
.pd-topbar h2 { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: #fff; margin: 0; padding: 9px 0; }
.pd-topbar h2 i { color: #fff; }

.pd-info-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 18px; background: var(--border-light);
  gap: 1px;
}
.pdi-item { display: flex; align-items: stretch; background: var(--bg-card); }
.pdi-label {
  flex: 0 0 108px; display: flex; align-items: center;
  background: var(--bg-card-2); color: var(--text-muted);
  font-size: .74rem; font-weight: 700; padding: 8px 10px;
}
.pdi-value {
  flex: 1; display: flex; align-items: center;
  padding: 8px 10px; font-size: .84rem; color: var(--text-primary);
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 지급관리 상세 상단 정보카드 — 편집 가능 항목(계약번호/협력업체/담당자/납기/
   계약상태/계약금액)의 인풋·셀렉트. 아래쪽 지급정보 표(pd-collect-table)의
   pay-cell-input과 동일한 "선 없는 인라인 편집" 느낌으로 통일한다. */
.pdi-value input.pay-cell-input,
.pdi-value select.pay-cell-input {
  width: 100%; background: transparent; border: none; outline: none;
  font: inherit; font-weight: 600; color: var(--text-primary); padding: 0;
}
.pdi-value select.pay-cell-input { cursor: pointer; }
.pdi-value input.pay-cell-input:focus,
.pdi-value select.pay-cell-input:focus {
  background: var(--accent-dim); border-radius: 3px; padding: 2px 4px; margin: -2px -4px;
}

/* ── 매입관리 > 계약서 지급관리 상세 상단 정보카드 전용 스타일 ────────────
   (2026-09 재개편) 수금관리(#pd-info-grid)를 벤치마킹한 "일체형 테이블 그리드"로
   되돌린다 — 개별 흰 박스 카드(이전 버전) 대신, 외곽선 하나로 감싸고 내부는
   1px 분할선(배경색이 비치는 gap)으로 나뉜 단일 표처럼 보이게 한다. 다만 항목
   수가 줄마다 다르고(1행 5개/2행 6개) 항목별로 필요한 폭이 크게 달라(예:
   '프로젝트유형'=FA 2글자 vs '공급계약 대상'=긴 문자열) #pd-info-grid의 균일한
   N열 grid를 그대로 쓸 수 없어, 각 행을 독립된 flex 컨테이너로 두고 항목마다
   flex-basis를 다르게 준다(콤보값은 ctPayInfoGrid()의 인라인 style로 지정).
   #pd-info-grid(수금관리 프로젝트 상세)와 클래스를 공유하므로 여기서는 반드시
   #ctpay-info-grid ID로만 스코프를 준다 — 클래스 공통 규칙을 직접 건드리면
   수금관리 화면까지 영향을 받는다. */
#ctpay-info-grid {
  display: flex; flex-direction: column; gap: 1px;
  background: #E2E8F0; border: 1px solid #E2E8F0; border-radius: 8px;
  overflow: hidden; margin-bottom: 18px;
}
#ctpay-info-grid .pdi-row { display: flex; flex-wrap: nowrap; gap: 1px; background: #E2E8F0; }
/* 라벨(위)·값(아래)을 세로로 쌓는 "세로형" 셀. 2026-09(높이 통일 패치): 라벨을
   white-space:normal로 뒀던 게 '프로젝트유형'처럼 셀 폭이 빠듯한 항목에서 2줄로
   꺾여 그 항목이 든 행(1행)만 2행보다 키가 커지는 원인이었다 — 이제 라벨 폭을
   충분히 넓혀두고(ctPayInfoGrid()의 인라인 flex-basis, 프로젝트유형=104px 등)
   nowrap으로 강제해 항상 한 줄로만 나오게 한다(혹시 더 긴 값이 들어와도 잘리지
   않고 셀이 뚫리도록 ellipsis를 안전장치로 둔다). 그리고 모든 셀에 동일한
   min-height를 줘서 1행/2행 중 어느 한쪽 내용이 짧아도 높이가 항상 같게
   고정한다(행 높이를 통째로 고정하지 않고 셀 단위 min-height로 통일 — 글자
   크기가 커져도 내용이 넘치지 않는다). */
#ctpay-info-grid .pdi-item {
  display: flex; flex-direction: column; background: #fff; min-width: 0;
  min-height: 64px;
}
#ctpay-info-grid .pdi-label {
  background: #F8FAFC; color: #475569; font-size: 12px; font-weight: 700;
  line-height: 1.3; padding: 8px 10px 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#ctpay-info-grid .pdi-value {
  flex: 1; padding: 3px 10px 9px; font-size: 13.5px; font-weight: 600; color: #1E293B;
  display: flex; align-items: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#ctpay-info-grid .pdi-value input.pay-cell-input,
#ctpay-info-grid .pdi-value select.pay-cell-input {
  width: 100%; background: transparent; border: none; outline: none;
  font: inherit; font-weight: 600; color: inherit; padding: 0;
}
#ctpay-info-grid .pdi-value select.pay-cell-input { cursor: pointer; }
#ctpay-info-grid .pdi-value input.pay-cell-input:focus,
#ctpay-info-grid .pdi-value select.pay-cell-input:focus {
  background: var(--accent-dim); border-radius: 3px; padding: 2px 4px; margin: -2px -4px;
}
@media (max-width: 900px) { #ctpay-info-grid .pdi-row { flex-wrap: wrap; } }

/* ── 매입관리 > 계약서 목록 "결재상황" 게이지 전용 폰트/컬러 스코프 ────────
   .pay-progress-pct는 수금관리(수금 %, 진행현황 %)와 공유하는 클래스라 전역
   규칙은 건드리지 않고, 목록 테이블(#po-table-contracts) 안에서만 요청된
   12-13px / #334155 / 8px 간격으로 재정의한다. */
#po-table-contracts .pay-progress { gap: 8px; }
#po-table-contracts .pay-progress-pct { font-size: 12.5px; color: #334155; }
#po-table-contracts .pay-progress.is-done .pay-progress-pct { color: var(--status-done); }
#po-table-contracts .pay-progress.is-none .pay-progress-pct { color: var(--status-waiting); }
#po-table-contracts .pay-progress-track { background: #E2E8F0; }

.pd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-light); margin-bottom: 16px; }
.pd-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 16px; font-size: .84rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.pd-tab:hover:not(:disabled) { color: var(--accent); }
.pd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pd-tab:disabled { cursor: not-allowed; opacity: .45; }

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

.pd-collect-table-wrap { border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; overflow-x: auto; }
.pd-collect-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pd-collect-table th, .pd-collect-table td { border: 1px solid var(--border-light); padding: 5px 8px; }
.pd-collect-table th { background: var(--bg-thead); color: #fff; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pd-collect-table td.pd-phase-label { font-weight: 700; background: var(--bg-card-2); white-space: nowrap; }
.pd-collect-table input.pay-cell-input,
.pd-collect-table select.pay-cell-input { width: 100%; background: transparent; border: none; outline: none; font-size: .84rem; color: var(--text-primary); padding: 2px 4px; font-family: var(--font); }
.pd-collect-table select.pay-cell-input { cursor: pointer; }
.pd-collect-table input.pay-cell-input:focus,
.pd-collect-table select.pay-cell-input:focus { background: var(--accent-dim); border-radius: 3px; }
.pd-collect-table tr.pd-summary-row td { background: var(--bg-card-2); font-weight: 700; }
.pd-collect-table .pd-outstanding.is-due { color: var(--status-waiting); }
.pd-collect-table td.pd-amount-cell { text-align: right; font-weight: 700; color: var(--text-primary); background: var(--bg-card-2); white-space: nowrap; }

.pd-target-cell { white-space: nowrap; }
/* 부가세/총청구금액 — 계약금액에서 항상 다시 계산되는 읽기전용 표시칸(직접 입력 불가) */
.pd-computed-cell { text-align: right; color: var(--text-secondary); white-space: nowrap; }
.pd-date-text { font-size: .84rem; color: var(--text-primary); margin-right: 6px; }
.pd-date-edit-btn {
  display: inline-flex; align-items: center; border: none; border-radius: var(--radius-sm);
  background: #f5a623; color: #fff; font-size: .72rem; font-weight: 700;
  padding: 3px 8px; cursor: pointer; transition: opacity .15s;
}
.pd-date-edit-btn:hover { opacity: .85; }

/* 명세서발행/세금계산서발행/수금완료일 — 평소엔 안 보이다가 행에 마우스를 올리면
   나타나는 지우기 버튼(잘못 입력한 날짜를 다시 비울 때 씀) */
.pd-collect-table td.pd-date-cell { position: relative; padding-right: 22px; }
.pd-date-clear-btn {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: var(--bg-card-2); color: var(--text-muted);
  font-size: .68rem; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.pd-collect-table tr:hover .pd-date-clear-btn { opacity: 1; }
.pd-date-clear-btn:hover { background: var(--status-waiting); color: #fff; }

.pd-complete-btn.is-done { background: var(--success); border-color: var(--success); }
.pd-complete-btn:disabled { opacity: .45; cursor: not-allowed; }

/* PJT수금관리 리스트: 자금 회수가 완료된 프로젝트는 회색 글씨로 구분 표시 */
.pay-row.pay-row-complete td { color: var(--text-muted); }
.pay-row.pay-row-complete td input.pay-cell-input { color: var(--text-muted); }
.pay-row.pay-row-complete .pay-open-link i { color: var(--text-muted); }
/* 프로젝트명 링크칸은 .pay-sticky-2.pay-open-link 색상규칙(클래스 3개)이
   .pay-row.pay-row-complete td(클래스 2개+태그)보다 우선순위가 높아 위 규칙만으로는
   회색이 적용되지 않는다 — 링크 전용 규칙으로 별도 재지정 */
.pay-row.pay-row-complete .pay-sticky-2.pay-open-link { color: var(--text-muted); }
/* 미수금은 완료된 행이라도 남아있으면 빨간색이 우선 표시되도록 */
.pay-row.pay-row-complete .pay-outstanding.is-due { color: var(--status-waiting); }

.pd-memo-wrap { margin-top: 16px; }
.pd-memo-wrap label { display: block; font-size: .78rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.pd-memo-wrap textarea {
  width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-primary); font-size: .84rem;
  font-family: var(--font); padding: 8px 10px;
}
.pd-memo-wrap textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

@media (max-width: 900px) { .pd-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pd-info-grid { grid-template-columns: 1fr; } }

/* ── 목표일 수정(이력 기록) 모달 ─────────────────────────────────────────── */
.td-info-grid {
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 18px;
}
.td-info-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-light); }
.td-info-row:last-child { border-bottom: none; }
.td-info-label {
  flex: 0 0 140px; display: flex; align-items: center;
  background: var(--bg-card-2); color: var(--text-muted);
  font-size: .8rem; font-weight: 700; padding: 9px 12px;
}
.td-info-value { flex: 1; display: flex; align-items: center; padding: 6px 12px; font-size: .86rem; color: var(--text-primary); }
.td-info-value input[type="date"], .td-info-value input[type="text"] {
  width: 100%; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-primary); font-size: .84rem;
  font-family: var(--font); padding: 6px 8px;
}
.td-info-value input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

.td-history-head {
  background: var(--bg-thead); color: #fff; font-size: .82rem; font-weight: 700;
  padding: 8px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.td-history-table-wrap { border: 1px solid var(--border-light); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 220px; overflow-y: auto; }
.td-history-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.td-history-table th, .td-history-table td { border-bottom: 1px solid var(--border-light); padding: 6px 10px; text-align: left; }
.td-history-table th { background: var(--bg-card-2); color: var(--text-muted); font-size: .74rem; font-weight: 700; position: sticky; top: 0; }
.td-history-empty { text-align: center !important; color: var(--text-muted); padding: 16px !important; }

/* 연동된 업무일지 (읽기 전용) */
.sm-journal-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px; background: var(--bg-input);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.sm-journal-item:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.sm-journal-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sm-journal-date { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.sm-journal-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.sm-journal-meta { font-size: 11px; color: var(--text-muted); }

/* 업무일지 상세보기 모달 */
.sm-journal-view-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.sm-journal-view-meta strong { color: var(--text-primary); }
.sm-journal-view-content {
  min-height: 120px; max-height: 50vh; overflow-y: auto;
  padding: 4px 2px; color: var(--text-primary); font-size: 14px; line-height: 1.6;
}
.sm-journal-view-attachments {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.sm-journal-attach-label { font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

/* 작업일보 업로드 */
.sm-report-upload-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.sm-report-parse-status { font-size: 12px; color: var(--text-muted); }

/* 주간리포트 */
.sm-weekly-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; margin-top: 16px; min-height: 360px; }
.sm-weekly-list { border-right: 1px solid var(--border); padding-right: 12px; overflow-y: auto; max-height: 640px; }
.sm-weekly-item {
  padding: 10px 10px; border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 4px;
  border: 1px solid transparent; transition: background .15s;
}
.sm-weekly-item:hover { background: var(--bg-hover); }
.sm-weekly-item.active { background: var(--accent-dim); border-color: var(--accent); }
.sm-weekly-item-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-weekly-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sm-weekly-editor { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 4px; }
.sm-weekly-editor-header { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.sm-weekly-editor-header input { flex: 1; }
.sm-weekly-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.sm-weekly-grid2 .settings-field label { font-size: 11px; }
#wr-categories-table textarea, #wr-manpower-table input[type="number"] {
  width: 100%; background: transparent; border: none; outline: none; resize: vertical;
  color: var(--text-primary); font-size: 12px; font-family: var(--font); padding: 3px 5px; min-height: 44px;
}
#wr-manpower-table input[type="number"] { min-height: auto; text-align: center; }
#wr-manpower-table input[type="text"] {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 12px; font-family: var(--font); padding: 3px 5px;
}
.wr-issues-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.wr-issue-row { display: flex; gap: 6px; align-items: center; }
.wr-issue-row input { flex: 1; }
.wr-issue-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 8px; }
.wr-issue-del:hover { color: var(--danger); }
.sm-table textarea.sm-rp-textarea {
  background: transparent; border: none; outline: none; resize: vertical;
  color: var(--text-primary); font-size: 12px; padding: 3px 5px; width: 100%; min-height: 44px;
  font-family: var(--font);
}
.sm-table textarea.sm-rp-textarea:focus { background: var(--bg-input); border-radius: 3px; }

/* 인원현황 (협력사별 투입 인원 모니터링) */
.manpower-filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 18px; }
.mp-summary-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.mp-card {
  min-width: 120px; padding: 14px 18px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-card-2);
}
.mp-card-value { font-size: 22px; font-weight: 700; color: var(--accent); }
.mp-card-unit { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mp-card-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mp-card-sub { font-size: 10px; color: var(--text-muted); }
.mp-card-total { border-color: var(--border-accent); background: var(--bg-card-hover); }

/* =============================================
   MOBILE RESPONSIVE  (≤ 768px)
   ============================================= */
@media (max-width: 768px) {

  /* 팝업 모달 모바일 */
  .task-drawer {
    width: 100vw; height: 76vh;
    top: auto; bottom: 0; left: 0;
    transform: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  @keyframes popIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  #drawer-tab-logs { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .logs-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; }

  /* ── 헤더 ── */
  #app-header { height: 52px; }
  .header-inner { padding: 0 12px; }
  .header-title span:first-of-type { display: none; }   /* 긴 제목 숨김 */
  .header-title-short { display: inline; font-weight: 700; font-size: 1rem; color: var(--text-primary); }
  .version-badge { font-size: .65rem; padding: 1px 6px; }
  .header-title .fa-gear { font-size: 1.1rem; }
  #header-user-info { font-size: .78rem; }
  /* 조회/등록/출력/설정/알림/로그아웃 버튼이 좁은 화면에서도 한 줄에 다 들어가도록
     라벨 텍스트를 숨기고 아이콘만 남긴다(신규 프로젝트 개설 버튼이 예전에 쓰던 방식과 동일). */
  .header-right .lf-tb-item { padding: 0 8px; }
  .header-right .lf-tb-item .hdr-tb-label { display: none; }

  /* ── 레이아웃: 사이드바 → 하단 네비게이션 ── */
  #app-layout {
    flex-direction: column;
    padding-top: 52px;
    padding-bottom: 60px;   /* 하단 nav 높이만큼 확보 */
  }

  #left-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border);
    border-right: none;
    padding: 0;
    z-index: 200;
    /* safe area for iPhone home bar */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .nav-item {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 0;
    font-size: .65rem;
    border-left: none;
    border-bottom: 3px solid transparent;
    justify-content: center;
    align-items: center;
  }
  .nav-item i { font-size: 1.1rem; }
  .nav-item.active { border-bottom-color: var(--accent); border-left: none; }
  .nav-item.active::before { display: none; }
  /* 하단 아이콘바(모바일)에서는 기준정보 서브메뉴를 펼칠 공간이 없으므로, 그룹을
     다른 nav-item과 같은 크기의 항목 하나로만 취급하고 서브메뉴는 항상 숨긴다. */
  .nav-item-group { flex: 1; }
  .nav-item-group .nav-item { width: 100%; }
  .nav-item-group .nav-submenu { display: none !important; }

  /* ── 메인 콘텐츠 ── */
  #app-main { padding: 12px; }

  /* ── 메트릭 카드: 2×2 그리드 ── */
  #metrics-section {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metric-card { padding: 12px; gap: 10px; }
  .metric-icon { width: 36px; height: 36px; font-size: 1rem; }
  .metric-value { font-size: 1.6rem; }
  .metric-label { font-size: .7rem; }

  /* ── 타임라인 ── */
  #timeline-section { margin-top: 12px; }
  .timeline-header { flex-wrap: wrap; gap: 8px; }
  .timeline-header h2 { font-size: .9rem; }
  .view-toggle-group { gap: 4px; }
  .view-toggle-btn { padding: 4px 8px; font-size: .72rem; }
  .timeline-tools { flex-wrap: wrap; gap: 6px; }
  #drag-hint { display: none; }
  .tl-zoom-btn { padding: 4px 8px; font-size: .72rem; }

  /* 날짜 필터 한 줄로 */
  .tl-date-filter { gap: 4px; }
  .tl-date-filter input[type="date"] { font-size: .72rem; padding: 4px 6px; }

  /* 타임라인 차트 가로 스크롤 */
  #timeline-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #timeline-chart { min-width: 600px; }

  /* ── 모달: 풀스크린 ── */
  .modal-backdrop { align-items: flex-end; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 76vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0;
    overflow-y: auto;
  }
  .modal-body { padding: 16px; }
  .form-row, .form-row-title-type, .form-row-3, .form-row-4, .form-row-cust-code { flex-direction: column; gap: 10px; }

  /* ── 프로젝트 카드 ── */
  .project-card { padding: 14px; }
  .project-card-header { flex-wrap: wrap; gap: 8px; }
  .wbs-stage-bar { font-size: .72rem; }

  /* ── AI 채팅 ── */
  #chat-messages { min-height: 200px; }
  #chat-input-row { flex-direction: row; }
  #chat-input { font-size: .85rem; }

  /* ── 로그인 박스 ── */
  #login-box { padding: 28px 20px; margin: 16px; max-width: calc(100% - 32px); }

  /* ── 기준정보 탭 ── */
  .settings-grid { grid-template-columns: 1fr; }

  /* ── 범례 오버레이 ── */
  #legend-overlay { font-size: .72rem; padding: 6px 10px; gap: 6px; }
}

/* 터치 디바이스: hover 효과 제거 (불필요한 깜빡임 방지) */
@media (hover: none) {
  .nav-item:hover { background: transparent; }
  .btn-settings-del-task { opacity: 1; }
  .metric-card:hover { transform: none; }
}

/* 모바일 헤더 신규 프로젝트 버튼 아이콘만 표시용 */
@media (max-width: 480px) {
  .header-title { gap: 6px; }
  #header-user-info span { display: none; }   /* 이름 숨기고 아이콘만 */
}

/* =============================================
   초기 비밀번호 사용 안내 배너
   대시보드 최상단에 뜨고, 비밀번호를 바꾸거나 닫으면 사라진다.
   테마 변수를 쓰므로 라이트/다크 모두 대응된다.
   ============================================= */
#default-pw-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: none;
  /* LINKS PRO 스타일: 최상단 공지 배너 = 주황 배경 + 흰 텍스트, 한 줄 형태 */
  background: var(--warning);
  color: #ffffff;
}
#default-pw-banner .dpb-icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: #ffffff;
}
#default-pw-banner .dpb-text {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}
#default-pw-banner .dpb-text strong { font-size: 13px; color: #ffffff; }
#default-pw-banner .dpb-text span {
  font-size: 12.5px;
  color: rgba(255,255,255,.9);
}
#default-pw-banner .dpb-btn {
  flex: 0 0 auto;
  padding: 5px 14px;
  border: none;
  border-radius: var(--radius-xs);
  background: #ffffff;
  color: var(--warning);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}
#default-pw-banner .dpb-btn:hover { filter: brightness(.96); }
#default-pw-banner .dpb-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
#default-pw-banner .dpb-close:hover {
  background: rgba(255,255,255,.18);
  color: #ffffff;
}
@media (max-width: 640px) {
  #default-pw-banner { flex-wrap: wrap; }
  #default-pw-banner .dpb-text { flex-basis: 100%; order: 2; }
  #default-pw-banner .dpb-btn  { order: 3; }
}

/* =============================================
   로그 이력 (감사 로그) — 관리자 전용
   ============================================= */
/* 관리자가 아니면 아예 보이지 않는다(실제 차단은 서버가 한다) */
.admin-only { display: none; }
[data-role="admin"] .admin-only { display: inline-flex; }

.audit-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.audit-filter { display: flex; flex-direction: column; gap: 5px; }
.audit-filter > label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.audit-range { display: flex; align-items: center; gap: 6px; }
.audit-range span { color: var(--text-muted); }
.audit-filters .settings-text-input { min-width: 130px; }

.audit-summary {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.audit-list { display: flex; flex-direction: column; gap: 1px; }

.audit-row {
  display: grid;
  grid-template-columns: 150px 92px 110px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-card);
}
.audit-row:nth-child(even) { background: var(--bg-card-2); }

.audit-time  { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.audit-actor { font-weight: 600; }

.audit-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.audit-badge.login    { background: rgba(16,185,129,.15); color: #10b981; }
.audit-badge.logout   { background: rgba(148,163,184,.18); color: var(--text-secondary); }
.audit-badge.fail     { background: rgba(239,68,68,.15);  color: #ef4444; }
.audit-badge.locked   { background: rgba(239,68,68,.28);  color: #ef4444; }
.audit-badge.create   { background: rgba(59,130,246,.15); color: #3b82f6; }
.audit-badge.update   { background: rgba(245,158,11,.15); color: #f59e0b; }
.audit-badge.delete   { background: rgba(239,68,68,.15);  color: #ef4444; }
.audit-badge.restore  { background: rgba(139,92,246,.15); color: #8b5cf6; }

.audit-target { color: var(--text-primary); word-break: break-all; }
.audit-detail { color: var(--text-secondary); font-size: 12px; }
.audit-hits {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.audit-ip { color: var(--text-muted); font-size: 11px; margin-left: 6px; }

.audit-empty { padding: 28px; text-align: center; color: var(--text-muted); }
.audit-more-wrap { margin-top: 12px; text-align: center; }

@media (max-width: 720px) {
  .audit-row { grid-template-columns: 1fr; gap: 3px; }
  .audit-filters .settings-text-input { min-width: 110px; }
}

/* =============================================
   원가맵
   ============================================= */
.cm-head-actions { display: flex; gap: 8px; align-items: center; }
.cm-head-actions .settings-text-input { min-width: 240px; }

.cm-body { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 18px; align-items: start; }

.cm-sub-head {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.cm-filled { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.cm-copy-group { margin-left: auto; display: flex; gap: 6px; }
.cm-copy-btn {
  margin-left: auto; padding: 4px 10px; border: 1px solid var(--border-light);
  border-radius: 6px; background: var(--bg-card-2); color: var(--text-secondary);
  font-size: 12px; cursor: pointer; white-space: nowrap;
}
.cm-copy-group .cm-copy-btn { margin-left: 0; }
.cm-copy-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* ── 체크리스트 ── */
.cm-checklist { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cm-group {
  padding: 7px 12px; background: var(--bg-card-2);
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.cm-row {
  display: grid; grid-template-columns: 42px 1fr 96px 40px;
  gap: 8px; align-items: center; padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.cm-row:last-child { border-bottom: none; }
.cm-code { font-size: 11px; font-weight: 700; color: var(--accent); }
.cm-label {
  font-size: 12.5px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-unit { font-size: 11px; color: var(--text-muted); }
.cm-input {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border-light);
  border-radius: 5px; background: var(--bg-input); color: var(--text-primary);
  font-size: 12.5px; text-align: right;
}
.cm-input:focus { outline: none; border-color: var(--accent); }
select.cm-input { text-align: left; }
.cm-input:disabled { opacity: .6; cursor: not-allowed; }

/* ── 합계 ── */
.cm-totals { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cm-total-box {
  padding: 12px 18px; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent-dim);
}
.cm-total-label { font-size: 11px; color: var(--text-secondary); }
.cm-total-value { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.cm-sections { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.cm-section {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); font-size: 11px; color: var(--text-secondary);
}
.cm-section b { font-size: 13px; color: var(--text-primary); }

.cm-mandays { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-md {
  display: flex; gap: 6px; align-items: baseline;
  padding: 5px 10px; border-radius: 6px; background: var(--bg-card-2);
  font-size: 11.5px; color: var(--text-secondary);
}
.cm-md b { font-size: 13px; color: var(--text-primary); }

.cm-hint { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }

/* ── 결과표 ── */
.cm-result { max-height: 620px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cm-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 8px; text-align: center; white-space: nowrap;
  background: var(--bg-thead); color: #ffffff; font-weight: 700;
  border-bottom: 1px solid var(--border-thead); font-size: 12px;
}
.cm-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cm-table tbody tr:nth-child(even) { background: var(--row-stripe); }
.cm-table tbody tr:hover { background: var(--row-hover) !important; }
.cm-table tr.cm-zero { opacity: .45; }
.cm-c-sec   { color: var(--text-muted); white-space: nowrap; font-size: 11px; }
.cm-c-label { color: var(--text-primary); }
.cm-c-model { color: var(--text-secondary); font-size: 11.5px; }
.cm-c-num   { text-align: right; white-space: nowrap; }
.cm-c-qty   { text-align: right; font-weight: 700; white-space: nowrap; }
.cm-c-unit  { color: var(--text-muted); font-size: 11px; }

@media (max-width: 1100px) {
  .cm-body { grid-template-columns: 1fr; }
  .cm-result { max-height: 480px; }
}

/* 원가맵 — 버전 안내 배너 */
.cm-version-info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 4px; padding: 9px 12px;
  border: 1px solid var(--warning); border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
  font-size: 12.5px; color: var(--text-primary);
}
.cm-version-info .cm-vi-hint {
  flex-basis: 100%; font-size: 11.5px; color: var(--text-secondary);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .cm-version-info { background: var(--bg-card); }
}
/* 샵마스터 탭 안에서는 헤더 액션이 제목 줄 오른쪽에 붙는다 */
.sm-section-title .cm-head-actions { margin-left: auto; flex-wrap: wrap; }
.sm-section-title .cm-head-actions .settings-text-input { min-width: 260px; }

/* =============================================
   DASHBOARD — 2x2 고밀도 경영 모니터링 대시보드 (2026-09 전면 개편)
   기계 제작/자동화 설비 제조사 표준 운영 대시보드 레이아웃: 뷰포트에 고정된
   4분할 그리드(프로젝트 진행/납기 · 최근 1개월 인콰리·견적 파이프라인 ·
   월별 수금/미수금 · 월별 지급/미지급금) — js/app/dashboard2.js가 그린다.
   다른 목록형 화면(매입관리/인콰리 등)과 동일한 "페이지 자체는 스크롤하지
   않고, 각 패널 내부만 스크롤" 원칙을 그대로 따른다.
   ============================================= */
#tab-dashboard { gap: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#app-main:has(#tab-dashboard:not([style*="display: none"])) {
  background: var(--bg-page); padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-dashboard:not([style*="display: none"])) .tab-page:not(#tab-dashboard) { display: none !important; }

.dash2-header {
  flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--db-space-5); min-height: 48px; padding: var(--db-space-3) var(--db-space-5) var(--db-space-2);
}
.dash2-header-title { display: flex; flex-direction: column; }
.dashboard-eyebrow { display: block; margin-bottom: 2px; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
.dash2-header h1 { margin: 0; color: var(--text-primary); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.dashboard-page-meta {
  display: flex; align-items: center; gap: var(--db-space-3); padding-bottom: 2px;
  color: var(--text-muted); font-size: 11.5px; white-space: nowrap;
}
.dashboard-page-meta strong {
  padding-left: var(--db-space-3); border-left: 1px solid var(--border);
  color: var(--text-secondary); font-weight: 600;
}

/* 2x2 그리드 — 뷰포트 안에 4패널이 항상 한눈에 들어오고, 내부 콘텐츠만 각자 스크롤 */
.dash2-grid {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; padding: 0 var(--db-space-5) var(--db-space-4);
  box-sizing: border-box; overflow: hidden;
}
.dash2-panel {
  display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.dash2-panel-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  min-height: 40px; padding: 7px 14px; border-bottom: 1px solid var(--border); background: var(--bg-card-2);
}
.dash2-panel-title { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.dash2-panel-title i { color: var(--accent); font-size: 12px; }
.dash2-kpi-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash2-kpi-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-light); font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.dash2-kpi-chip b { color: var(--text-primary); font-weight: 800; }
.dash2-kpi-chip.warn { border-color: rgba(217,119,6,.35); background: rgba(245,158,11,.1); color: #b45309; }
.dash2-kpi-chip.warn b { color: #b45309; }
.dash2-kpi-chip.danger { border-color: rgba(220,38,38,.35); background: rgba(239,68,68,.1); color: #b91c1c; }
.dash2-kpi-chip.danger b { color: #b91c1c; }
.dash2-kpi-chip.ok { border-color: rgba(22,163,74,.3); background: rgba(34,197,94,.1); color: #15803d; }
.dash2-kpi-chip.ok b { color: #15803d; }

.dash2-panel-body { flex: 1; min-height: 0; padding: 8px 10px; overflow: hidden; display: flex; flex-direction: column; }
.dash2-panel-body-split { flex-direction: row; gap: 10px; }
.dash2-panel-body-split > * { min-width: 0; }

.dash2-chart { flex: 1 1 auto; min-height: 0; min-width: 0; }
.dash2-chart-sm { flex: 0 0 40%; }
#dash2-panel-projects .dash2-table-scroll { flex: 1 1 60%; }
#dash2-panel-collections .dash2-chart,
#dash2-panel-payables .dash2-chart { flex: 1 1 58%; }
#dash2-panel-collections .dash2-subblock,
#dash2-panel-payables .dash2-subblock { flex: 1 1 42%; display: flex; flex-direction: column; min-width: 220px; }

.dash2-table-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dash2-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash2-table thead th {
  position: sticky; top: 0; z-index: 1; background: #1e293b; color: #fff;
  font-size: 11px; font-weight: 700; text-align: left; padding: 6px 8px; white-space: nowrap;
}
.dash2-table tbody td {
  padding: 5px 8px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; font-size: 12px;
}
.dash2-table tbody tr:nth-child(even) td { background: var(--bg-card-2); }
.dash2-table tbody tr:hover td { background: var(--accent-dim); }
.dash2-empty { padding: 26px 0; text-align: center; color: var(--text-muted); font-size: 12px; }

.dash2-subblock-title { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.dash2-toplist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.dash2-top-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-card-2);
  cursor: pointer; font-size: 11.5px;
}
.dash2-top-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.dash2-top-rank {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%; background: #dc2626; color: #fff; font-size: 10px; font-weight: 800;
}
.dash2-top-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash2-top-name { color: var(--text-primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash2-top-sub { color: var(--text-muted); font-size: 10.5px; }
.dash2-top-amount { color: #b91c1c; font-weight: 800; white-space: nowrap; font-size: 11.5px; flex-shrink: 0; }

.dash2-footnote { flex-shrink: 0; margin-top: 6px; font-size: 10px; color: var(--text-muted); line-height: 1.4; }

.dash2-flag { display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dash2-flag.overdue { background: rgba(239,68,68,.12); color: #b91c1c; }
.dash2-flag.imminent { background: rgba(245,158,11,.14); color: #b45309; }
.dash2-flag.ok { background: rgba(148,163,184,.14); color: var(--text-muted); }

.dash2-status-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dash2-status-badge.progress { background: rgba(59,130,246,.12); color: #1d4ed8; }
.dash2-status-badge.won { background: rgba(22,163,74,.12); color: #15803d; }
.dash2-status-badge.lost { background: rgba(100,116,139,.14); color: #475569; }
.dash2-status-badge.hold { background: rgba(245,158,11,.14); color: #b45309; }

.dash2-progress-bar { position: relative; height: 14px; border-radius: 999px; background: var(--bg-card-2); border: 1px solid var(--border-light); overflow: hidden; }
.dash2-progress-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--accent); border-radius: 999px; }
.dash2-progress-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--text-primary); }

@media (max-width: 1080px) {
  .dash2-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(280px, 1fr)); overflow-y: auto; }
  #app-main:has(#tab-dashboard:not([style*="display: none"])) { overflow: hidden; }
  .dash2-grid { overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 640px) {
  .dash2-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dash2-panel-body-split { flex-direction: column; }
}

/* =============================================
   PRODUCT UI SYSTEM — 전체 화면 공통 정리
   Dashboard에서 확정한 차분한 운영형 언어를 모든 업무 화면에 적용한다.
   ============================================= */
:root {
  --product-page: #f4f6f8;
  --product-surface: #ffffff;
  --product-subtle: #f7f8fa;
  --product-border: #dfe3e8;
  --product-text: #18202b;
  --product-muted: #697386;
  --product-accent: #2878c8;
  --product-accent-soft: #eaf2fb;
  --product-header: #334155;
}

body { color: var(--product-text); }
/* 우측 padding — 대부분의 화면(프로젝트/인콰리/작업보드/매입관리/샵마스터/AI)이
   #app-main 자체 padding을 0으로 비우고 안쪽 콘텐츠 래퍼(.section-header/.sm-header/
   .ai-page-header 등)에서 16px로 우측 여백을 주는 방식이라, 그 16px을 사실상의
   "본문 우측 여백" 표준값으로 보고 헤더도 동일하게 맞춘다. 좌측은 로고 위치
   (.header-title, absolute 21px)와는 무관해 기존 20px를 유지한다. */
#app-header { padding: 0 16px 0 20px; box-shadow: 0 1px 0 rgba(15,23,42,.02); }
/* 좌측 사이드바 대시보드 아이콘(#left-nav 10px + .nav-item 11px = 21px)과 같은 세로선에
   고정되도록 절대배치. #app-header가 position:sticky라 이 absolute의 기준이 된다. */
.header-title {
  position: absolute; left: 21px; top: 50%; transform: translateY(-50%);
  font-size: 20px; letter-spacing: -.015em;
}
.header-inner { justify-content: flex-end; }
/* 우측 유틸리티 바(관리자/알림/등록/출력/설정/로그아웃) 항목 간 간격을 넉넉하게 —
   플랫 텍스트 버튼들이 다닥다닥 붙어 보이지 않도록 통일. */
.header-right { gap: 16px; }
#app-header .btn-primary { background: var(--product-accent); border-color: var(--product-accent); box-shadow: none; }
#app-header .btn-primary:hover { background: #1f67ad; border-color: #1f67ad; }
/* 관리자 표시도 다른 헤더 버튼처럼 박스 없이 글씨형으로 — 테두리/배경 제거.
   역할별 배경색(.role-admin 등)이 클래스 2개짜리라 이 규칙만으로는 안 지워지므로
   역할별 선택자로 배경만 덮어써서 우선순위를 맞춘다(글자색은 역할별로 그대로 유지). */
#header-user-info { background: none; border: 0; padding: 0 4px; }
.header-role-badge { border-radius: 0; padding: 2px 4px; }
.header-role-badge.role-admin,
.header-role-badge.role-editor,
.header-role-badge.role-viewer { background: none; }

#left-nav { width: 208px; padding: 12px 10px; gap: 3px; }
.nav-item {
  min-height: 36px; padding: 8px 11px; border: 0; border-radius: var(--radius-sm);
  color: #526071; font-size: 12.5px; font-weight: 500;
}
.nav-item i { color: #8590a0; }
.nav-item:hover { background: var(--product-subtle); color: var(--product-text); }
/* 대메뉴 선택(active) — 연한 배경+좌측 선 대신, 진한 파란 단색 풀블록 + 흰 글씨/아이콘. */
.nav-item.active {
  background: #2B87D1; color: #fff; border: 0; box-shadow: none;
  font-weight: 700;
}
.nav-item.active i { color: #fff; }

/* 기준정보 좌측 서브메뉴 — 평소엔 접혀 있다가(.nav-item-group.open일 때만) "기준정보"
   버튼 아래로 고객사관리/고객담당관리/협력사관리/직원관리/계정관리 5개가 펼쳐진다.
   표준 태스크/비밀번호 변경/휴지통/로그 이력은 그대로 상단 탭바(#settings-tabs)에 남아있다. */
.nav-item-group { display: flex; flex-direction: column; }
.nav-item-group .nav-item { position: relative; }
.nav-caret { margin-left: auto; font-size: 9px; color: #8590a0; transition: transform .2s; flex-shrink: 0; }
.nav-item-group.open .nav-caret { transform: rotate(90deg); }
.nav-item-group.open .nav-item.active .nav-caret { color: #fff; }
/* 아코디언 토글 — display:none/flex 대신 max-height를 트랜지션해서 여닫을 때
   서브메뉴 영역이 뚝 끊기지 않고 부드럽게 펼쳐지고/줄어들며 닫히도록 한다.
   max-height 400px은 서브항목 5개 기준으로 충분히 여유있게 잡은 상한값이다. */
.nav-submenu {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 0; padding: 0 0; overflow: hidden; opacity: 0;
  transition: max-height .22s ease, opacity .16s ease, padding .22s ease;
}
.nav-item-group.open .nav-submenu { max-height: 400px; padding: 2px 0 4px; opacity: 1; }

/* 소메뉴 선택(active) — 배경 박스/테두리를 전부 없애고 텍스트만 파란색으로 강조한다.
   대신 왼쪽에 세로 트리 라인 + 항목마다 불릿(선택된 항목은 채워진 파란 점)을 둬서
   "지금 이 하위 메뉴 트리 안에 있다"는 걸 보여준다(수금관리 메뉴의 라디오형 UI 참고). */
.nav-subitem {
  position: relative; display: flex; align-items: center;
  min-height: 28px; padding: 5px 11px 5px 34px; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: #6b7686; font-size: 12px; font-weight: 500;
  cursor: pointer; width: 100%; text-align: left; white-space: nowrap;
  font-family: var(--font); transition: color var(--transition);
}
/* 세로 트리 라인 — 항목마다 위아래 끝까지 그리면 연속된 항목끼리 자연스럽게
   이어지고, 첫 항목은 위쪽을, 마지막 항목은 아래쪽을 불릿 위치(50%)에서 잘라
   그 밖으로 선이 삐져나오지 않게 한다. */
.nav-subitem::before {
  content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px;
  background: var(--border, #dde2e8);
}
.nav-subitem:first-child::before { top: 50%; }
.nav-subitem:last-child::before { bottom: 50%; }
/* 기본(비선택) 상태 — 연한 회색의 단순한 점(•) */
.nav-subitem::after {
  content: ''; position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #c3cad3; border: none; transition: all var(--transition);
}
.nav-subitem:hover { background: none; color: var(--product-text); }
.nav-subitem:hover::after { background: #9aa4b2; }
.nav-subitem.active {
  background: none; box-shadow: none; color: #1A73E8; font-weight: 700;
}
/* 선택(active) 상태 — 이중 원(라디오/타겟 ⦿) 모양: 중앙 채워진 점 + 흰 간격 +
   바깥 파란 테두리 링을 radial-gradient 한 레이어로 그린다. */
.nav-subitem.active::after {
  left: 15.5px; width: 9px; height: 9px;
  background: radial-gradient(circle at center,
    #1A73E8 0 32%, #fff 32% 52%, #1A73E8 52% 100%);
  box-shadow: 0 0 0 3px rgba(26,115,232,.16);
}

#app-main { padding: 22px 24px 40px; background: var(--product-page); }
/* 2026-09: 위 대시보드와 같은 이유로 폭 제한(max-width+margin:auto) 제거 — 모든
   화면(인콰리·견적/매입관리/기준정보 등)의 본문 카드가 가로 100%를 그대로 채운다. */
.tab-page { width: 100%; gap: 16px; }

.workspace-page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  min-height: 62px; padding: 0 0 8px;
}
.workspace-eyebrow { display: block; color: var(--product-accent); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; }
.workspace-page-header h1 { margin-top: 3px; color: var(--product-text); font-size: 22px; line-height: 1.35; letter-spacing: -.025em; }
.workspace-page-header p { margin-top: 3px; color: var(--product-muted); font-size: 12px; }
.workspace-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.workspace-title-icon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: var(--radius-sm); background: var(--product-accent-soft); color: var(--product-accent); font-size: 12px;
}
.workspace-title h2 { margin: 0; color: var(--product-text); font-size: 20px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; }
.workspace-title p { margin-top: 1px; color: #8a94a3; font-size: 10.5px; line-height: 1.4; font-weight: 400; }

/* 공통 섹션 헤더와 액션 — 2026-09 디자인 시스템 표준화(파일럿: 프로젝트/인콰리·견적,
   같은 클래스를 공유하는 자금관리/작업보드/기준정보/업무일지에도 함께 적용됨).
   1단 헤더(타이틀) 높이 48~56px대, 2단 필터바 컨트롤 높이 32px/폰트 13px 로 고정한다. */
.section-header,
.settings-header,
.journal-header {
  min-height: 56px; margin: 0; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--product-border);
  border-radius: 0; background: var(--product-surface); color: var(--product-text);
}
.section-header h2,
.settings-header h2,
.journal-header h2 { color: var(--product-text); }
.section-header h2 i,
.settings-header h2 i,
.journal-header h2 i { color: var(--product-accent); }
.lf-header-right { gap: 12px; }
.lf-hint { color: #9a6b14; font-size: 10.5px; }
.lf-toolbar-inline { gap: 4px; }
/* 상단 헤더 공용 버튼(조회/알림/등록/출력/설정/로그아웃) — 기준정보 메뉴 탭(.stab)과
   같은 "글자형" 스타일로 통일: 테두리/배경 박스 없이 아이콘+텍스트만, hover 시
   글자색만 살짝 진해진다. */
.lf-tb-item {
  min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--product-muted); font-size: 13px;
}
.lf-tb-item:hover { background: none; color: #174f85; }
.lf-toolbar-inline .lf-tb-item { padding: 0 10px; }
/* 최상단 헤더의 "등록" 버튼(#btn-hdr-register)은 화면마다 재사용되는 공용 액션이지만,
   헤더 유틸리티 바(관리자/알림/등록/출력/설정/로그아웃)는 채움 박스 없이 아이콘+텍스트만
   있는 플랫 텍스트 버튼으로 통일한다 — 다른 헤더 버튼과 동일한 .lf-tb-item 스타일을 그대로 쓴다. */
#btn-hdr-register.lf-tb-item:hover { color: var(--product-accent); }

/* 2026-09: 최상단 GNB 우측 7개 항목(관리자/알림/조회/등록/출력/설정/로그아웃)에
   상세 화면 메뉴(.iq-menu-btn)와 동일한 "호버 시 밑줄" 인터랙션을 적용한다.
   .lf-tb-item은 이 헤더 우측 바에서만 쓰이는 클래스라(다른 화면 툴바는 별도
   클래스) 안전하게 직접 확장한다. 기본 상태에도 투명 2px 보더를 항상 깔아두고
   (box-sizing:border-box로 높이에 흡수되게 해서) 호버 때 색상만 바뀌므로 헤더
   높이가 흔들리지 않는다.
   버그 수정: .lf-tb-item/#header-user-info 기본 규칙에 border-radius(var(--radius-sm)
   /2px)가 걸려 있어서, 새로 추가한 border-bottom이 양쪽 하단 모서리에서 둥글게
   말려 곡선처럼 보였다(.iq-menu-btn은 border-radius가 아예 없어 안 그랬음) —
   여기서 border-radius:0으로 명시 리셋해 완전한 수평 직선으로 맞춘다. */
.header-inner { height: 100%; }
.header-right { height: 100%; gap: 18px; }
.header-right .lf-tb-item,
.header-right #header-user-info {
  height: 100%; box-sizing: border-box;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
  transition: color .15s ease-in-out, border-color .15s ease-in-out;
}
.header-right .lf-tb-item:hover,
.header-right #header-user-info:hover {
  background: none; color: #0f172a; border-bottom-color: #0f172a;
}
/* #header-user-info i는 자체 색(var(--accent))이 고정돼 있어 부모 hover의 color
   상속을 받지 않으므로 별도로 짙게 바꿔준다. */
.header-right #header-user-info:hover i { color: #0f172a; }
/* 로그아웃만 위험 액션이 아닌 일반 톤 유지(스펙: 기본 톤 유지 또는 짙은 차콜) —
   위 공통 hover 규칙과 동일한 차콜색이라 별도 규칙 없이 그대로 적용된다. */

/* 2026-09: 상단 헤더 "등록" 드롭다운(매입현황 전용) — 헤더 우측 바는 height:100%로
   맞춰 쓰는 flex 항목들이라, 감싸는 wrap도 같은 높이/정렬을 유지해야 버튼 밑줄
   hover가 흔들리지 않는다. 메뉴 패널 자체는 position:absolute라 레이아웃에
   영향을 주지 않는다. */
.hdr-dd-wrap { position: relative; height: 100%; display: flex; align-items: stretch; }
.hdr-dd-menu {
  position: absolute; top: calc(100% + 7px); right: 0; min-width: 168px;
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); z-index: 60; overflow: hidden;
}
.hdr-dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 10px 16px; font-size: 13px; font-weight: 500; color: #374151;
  background: none; border: none; cursor: pointer; white-space: nowrap;
}
.hdr-dd-item i { width: 16px; font-size: 14px; color: #6B7280; }
.hdr-dd-item:hover { background-color: #F8FAFC; color: #111827; }
.hdr-dd-item:hover i { color: #374151; }
/* 마스터데이터 빠른등록 모달 헤더의 "바로가기" 링크(기준정보 관리 화면으로 새 탭
   이동) — 작성 중이던 폼 유실을 막기 위해 새 탭으로만 연다. */
.ssq-jump-link {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--product-muted); text-decoration: none; padding: 4px 8px;
  border-radius: var(--radius-sm); transition: color .12s, background .12s;
}
.ssq-jump-link:hover { color: var(--product-accent); background: var(--product-accent-soft); }
/* 2026-09: quickFields가 기준정보 메인그리드 필드 전체(최대 10~15개)로 늘어나면서
   세로로 한 줄씩 쌓으면 모달이 너무 길어진다 — 2열 그리드로 배치한다. */
#ssq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
#ssq-fields .form-group { margin-bottom: 14px; }
/* 검색 드롭다운의 "등록된 항목이 없습니다" 안내 안에 들어가는 바로가기 링크(빠른등록이
   없는 유형 — 예: 프로젝트 — 은 이 링크를 눌러야 바로 관리 화면으로 이동한다) */
.cust-picker-jump-link { color: var(--product-accent); text-decoration: underline; cursor: pointer; }
/* 프로젝트·인콰리 목록 — padding은 여기서 다시 주지 않는다. 이 두 탭은 위쪽(약
   3427행)에서 표가 화면 하단까지 꽉 차도록 이미 #app-main padding:0으로 설정해
   뒀는데, 여기서 같은 선택자에 padding을 다시 선언하면(나중에 나온 쪽이 이겨서)
   그 설정이 무효화되어 본문 카드가 사이드바/우측 끝에서 22~24px씩 안으로 들어가
   보이는 원인이 됐었다(매입관리는 이런 중복 선언이 없어서 문제가 없었다).
   background만 여기서 계속 지정한다(padding:0 규칙 쪽엔 background가 없음). */
#app-main:has(#tab-projects:not([style*="none"])),
#app-main:has(#tab-inquiry:not([style*="none"])) { background: var(--product-page); }
#projects-section,
#inquiry-section,
#payments-detail-section,
#board-section {
  overflow: hidden; border: 1px solid var(--product-border); border-radius: var(--radius);
  background: var(--product-surface); box-shadow: var(--shadow-sm);
}
.lf-grid {
  grid-template-columns: repeat(4,minmax(0,1fr)); border: 0; border-bottom: 1px solid var(--product-border);
  background: var(--product-subtle);
}
.lf-cell { min-height: 44px; padding: 6px 12px; border-color: var(--product-border); }
.lf-label { flex-basis: 72px; color: #556171; font-size: 13px; }
.lf-field select,
.lf-field input { height: 32px; line-height: 32px; color: var(--product-text); font-size: 13px; }
.lf-cell.nodata { opacity: .62; }
.lf-cell.nodata .lf-label,
.lf-cell.nodata select,
.lf-cell.nodata input { color: #98a1ad; }

/* ===== 공통 표준 필터바(2026-09): 인콰리·견적/자금관리 등 동일 구조(상태·PJT아이템
   ·접수일(수주일자)·통합검색 4칸)를 쓰는 모든 화면에 그룹셀렉터로 공통 적용한다.
   ① 컨테이너 100% 폭 grid, 1:1:1:2 비율(일반 항목 3개 : 통합검색 2배)
   ② 실제 인풋(select/input/drp-box)은 셀 폭의 80%로 슬림화해 둔탁함을 줄이고
      나머지 20%는 여백으로 남긴다(좌측 정렬 자연 유지).
   화면별 인라인 중복작성 대신 이 블록 하나만 수정하면 전체에 반영된다. */
#inquiry-section .iq-filter-row,
#payments-detail-section .pay-filter-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; align-items: center;
  width: 100%; padding: 9px 16px; border-bottom: 1px solid var(--product-border);
}
#inquiry-section .iq-filter-row .lf-cell,
#payments-detail-section .pay-filter-row .lf-cell {
  border: none; border-right: 1px solid var(--product-border);
  padding: 0 16px; min-height: 0; min-width: 0; gap: 8px;
}
#inquiry-section .iq-filter-row .lf-cell:first-child,
#payments-detail-section .pay-filter-row .lf-cell:first-child { padding-left: 0; }
#inquiry-section .iq-filter-row .lf-cell:last-child,
#payments-detail-section .pay-filter-row .lf-cell:last-child { border-right: none; padding-right: 0; }
#inquiry-section .iq-filter-row .lf-field,
#payments-detail-section .pay-filter-row .lf-field { flex: 1 1 auto; min-width: 0; }
#inquiry-section .iq-filter-row .lf-field select,
#inquiry-section .iq-filter-row .lf-field input,
#inquiry-section .iq-filter-row .lf-field .drp-box,
#payments-detail-section .pay-filter-row .lf-field select,
#payments-detail-section .pay-filter-row .lf-field input,
#payments-detail-section .pay-filter-row .lf-field .drp-box {
  width: 80%; min-width: 96px; height: 36px; line-height: 36px; font-size: 13px; box-sizing: border-box;
}
#inquiry-section .iq-filter-row .lf-label,
#payments-detail-section .pay-filter-row .lf-label { font-size: 12px; font-weight: 500; color: var(--product-muted, #556171); }
@media (max-width: 900px) {
  #inquiry-section .iq-filter-row,
  #payments-detail-section .pay-filter-row { grid-template-columns: 1fr; }
  #inquiry-section .iq-filter-row .lf-cell,
  #payments-detail-section .pay-filter-row .lf-cell {
    border-right: none; border-bottom: 1px solid var(--product-border); padding: 8px 0;
  }
  #inquiry-section .iq-filter-row .lf-cell:last-child,
  #payments-detail-section .pay-filter-row .lf-cell:last-child { border-bottom: none; }
  #inquiry-section .iq-filter-row .lf-field select,
  #inquiry-section .iq-filter-row .lf-field input,
  #inquiry-section .iq-filter-row .lf-field .drp-box,
  #payments-detail-section .pay-filter-row .lf-field select,
  #payments-detail-section .pay-filter-row .lf-field input,
  #payments-detail-section .pay-filter-row .lf-field .drp-box { width: 100%; }
}

/* 매입관리 필터바: 프로젝트/협력업체/상태/통합검색 4칸도 동일한 1:1:1:2 비율로 맞춘다.
   통합검색 칸은 텍스트 입력 옆에 엑셀 업로드 버튼이 붙어있어 80% 슬림 규칙은
   일반 드롭다운 3칸에만 적용하고, 검색+버튼 조합은 기존 인라인 비율을 그대로 둔다. */
#purchasing-section .lf-grid { grid-template-columns: 1fr 1fr 1fr 2fr; }
#purchasing-section .lf-cell.span2 { grid-column: span 1; }
#purchasing-section .lf-cell:not(.span2) .lf-field select { width: 80%; min-width: 96px; }
.resizable-table-wrap { overflow: auto; background: var(--product-surface); }
.sm-table th,
.pay-sheet th { height: 34px; padding: 7px 9px; background: var(--product-header); border-color: #46556a; font-size: 11px; letter-spacing: .01em; }
.sm-table td,
.pay-sheet td { height: 25px; padding: 3px 9px; border-color: var(--product-border); font-size: 11.5px; }
.sm-table tbody tr:nth-child(even) td,
.pay-sheet tbody tr:nth-child(even) td { background: #fafbfc; }
.sm-table tbody tr:hover td,
.pay-sheet tbody tr:hover td { background: var(--product-accent-soft) !important; }

/* 작업보드 */
#board-section .db-card-body { padding: 14px; }
.board-filters { display: flex; align-items: center; gap: 12px; }
.board-filters select {
  height: 32px; min-width: 165px; padding: 0 30px 0 10px; border: 1px solid var(--product-border);
  border-radius: 4px; background: var(--product-surface); color: var(--product-text); font-size: 13px;
}
.board-grid-card { border-color: var(--product-border); border-radius: 8px; }
.board-grid-table thead th { background: #F9FAFB; color: var(--product-muted); }

/* 자금관리 — 상단 헤더+요약카드가 세로 공간을 많이 차지해 표가 덜 보이던 문제 개선:
   섹션 간 gap과 카드 높이를 줄여 표가 화면에 더 많이 나오게 압축 */
#tab-payments { gap: 8px; }
/* 요약카드 3개를 "프로젝트 수금관리" 제목 옆으로 옮겨 한 줄에 배치 — grid(3열 꽉채움) 대신
   flex로 내용 크기만큼만 차지하게 하고, section-header의 flex-wrap으로 공간이 부족하면
   필터바(조회/검색/엑셀)가 다음 줄로 자연스럽게 내려가도록 한다. */
/* 프로젝트/자금관리 — 제목 옆 요약 금액 3개를 박스 없이 구분선으로만 나눠 배치.
   금액 자릿수가 달라도(0원처럼 짧아도) 세 칸의 폭이 항상 똑같도록
   flex:150으로 균등 분할한다. */
#payments-detail-section .section-header #payments-summary-cards,
#projects-section .section-header #projects-summary-cards,
#po-status-section .section-header #pis-summary-cards {
  display: flex; margin-bottom: 0; flex: 0 1 auto; flex-shrink: 0;
}
/* 2026-09(2차): 100% 배율에서 상/하단 표가 스크롤 없이 한 화면에 들어오도록
   헤더(타이틀+4대 지표, ~60px)와 통합 툴바(~45px) 사이 여백을 없앤다. */
/* 2026-09(5차): 매입현황(월별) 피벗 표가 "헤더+툴바+하단 액션바"를 뺀 나머지
   화면 세로 공간 전체를 꽉 채우도록, #purchasing-section(발주서/계약서)과
   동일한 flex 체인 원칙을 이 섹션에도 적용한다. JS(activatePoSubtab)는
   이 섹션을 보일 때 style.display=''로만 리셋하므로 여기서 지정한
   display:flex가 그대로 적용된다(숨길 때는 style.display='none'). */
#po-status-section {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
#po-status-section > .section-header,
#po-status-section > .pis-toolbar-row { flex-shrink: 0; }
/* 2026-09(뷰포트 고정 전면 개편): 매입 목록/매입현황(월별)/은행 대량이체 목록
   3개 뷰 모두 동일한 flex 체인 원칙을 적용한다 — 헤더(타이틀+4대 지표)와
   툴바는 flex-shrink:0으로 고정하고, 각 뷰 컨테이너는 flex:1; min-height:0으로
   남는 세로 공간 전체를 차지한 뒤, 그 안의 실제 스크롤 래퍼만
   overflow:auto로 내부 스크롤한다. 노트북처럼 세로 해상도가 낮은 화면에서도
   브라우저 창 자체 스크롤 없이 상단 헤더/툴바와 하단 액션바가 항상 제자리에
   고정되고, 테이블 영역만 뷰포트 높이에 맞춰 유연하게 줄어들거나 늘어난다. */
#pis-list-view,
#pis-pivot-view {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
#po-status-section > .section-header { margin-bottom: 0; flex-shrink: 0; }
.metric-plain-row { display: flex; }
/* 2026-09: 라벨을 위, 금액을 아래로(Label First, Value Second) — HTML은 그대로
   두고(밸류가 DOM상 먼저 오는 구조를 그대로 유지해 JS textContent 바인딩에 영향
   없음) column-reverse 로 시각적 순서만 뒤집는다. 이 컴포넌트(.metric-plain)는
   프로젝트 진행현황/매입현황/자금관리/매입관리(발주·계약) 4개 화면이 공유하는
   공통 요약카드라 여기 한 곳만 고치면 전체에 일괄 반영된다. */
/* 2026-09(폭 확대+중앙정렬): 10억 단위 이상 금액(예: 3,799,793,312원)도 여유롭게
   담기도록 최소 폭을 확보하고, 라벨/금액을 칸의 좌우 정중앙에 정렬한다. 이전에는
   align-items:flex-end로 우측 정렬돼 있어 칸 폭이 넓어질수록 텍스트가 한쪽(우측)
   구분선에 쏠려 보였다. flex-shrink:0으로 폭이 찌그러지지 않게 고정한다. */
.metric-plain {
  flex: 1 1 0%; min-width: 175px; flex-shrink: 0;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center;
  padding: 4px 20px; border-left: 1px solid var(--product-border);
  text-align: center;
}
.metric-plain:first-child { border-left: 0; padding-left: 0; }
.metric-plain-value {
  font-size: clamp(17px,1.6vw,21px); font-weight: 700; letter-spacing: -.04em;
  white-space: nowrap; color: var(--product-text);
  font-variant-numeric: tabular-nums;
  margin-top: 3px; /* column-reverse 상태에서 라벨(위)과 금액(아래) 사이 타이트한 간격 */
  width: 100%; text-align: center;
}
.metric-plain-label { font-size: 10.5px; color: var(--product-muted); white-space: nowrap; width: 100%; text-align: right; }
.metric-plain.status-progress .metric-plain-value { color: var(--status-progress); }
.metric-plain.status-waiting  .metric-plain-value { color: var(--status-waiting); }
.metric-plain.status-done     .metric-plain-value { color: var(--status-done); }
/* 매입현황 "총 공급가액" 전용 톤 — 기존 상태색(완료/진행/대기)엔 없는 블루 계열이라
   새 수식어 클래스로 추가한다(다른 화면 요약카드에도 필요하면 그대로 재사용 가능). */
.metric-plain.tone-blue .metric-plain-value { color: #2563EB; }
/* 매입현황 헤더 요약(4개 지표)은 폭이 좁아지면 타이틀과 겹치기 쉬우므로, 화면이
   좁을 때는 아예 다음 줄로 자연스럽게 내려가게 한다(section-header는 flex-wrap
   이 이미 켜져 있음 — 여기서는 지표 사이 간격만 살짝 줄여 2줄 스택을 더 촘촘하게). */
@media (max-width: 900px) {
  #po-status-section .section-header #pis-summary-cards { flex-basis: 100%; justify-content: flex-end; }
  #po-status-section .section-header .metric-plain { padding: 4px 12px; min-width: 0; flex: 0 0 auto; }
}
/* 2026-09(뷰포트 고정 전면 개편): 세로 해상도가 낮은 13~15인치 노트북이나
   윈도우 디스플레이 배율 125~150% 환경(=실제 사용 가능한 CSS px 높이가
   줄어드는 상황)에서는 헤더/툴바가 차지하는 세로 공간을 최대한 슬림화해
   테이블에 더 많은 공간을 내준다. 헤더/툴바/버튼 자체의 높이(min-height)는
   레이아웃 골격이라 건드리지 않고, 상하 여백과 지표 폰트 크기만 줄인다 —
   #po-status-section이 이미 flex:1 체인으로 뷰포트에 고정돼 있으므로 이
   미디어쿼리는 순수하게 "같은 화면에 더 많은 행이 보이게" 하는 밀도 조정이다. */
@media (max-height: 900px) {
  #po-status-section .section-header { min-height: 32px; }
  #po-status-section .section-header h2 { padding: 6px 0; }
  #po-status-section .section-header .metric-plain { padding: 2px 14px; }
  #po-status-section .section-header .metric-plain-value { font-size: clamp(15px,1.4vw,18px); margin-top: 1px; }
  #po-status-section .section-header .metric-plain-label { font-size: 10px; }
  #po-status-section > .pis-toolbar-row { min-height: 36px; }
}
.pay-sheet-wrap { border: 0; border-radius: 0; }

/* 주요 목록 화면: 필터 바로 아래에 데이터 그리드를 배치한다.
   단독 초기화 행을 제거한 뒤에도 표가 필터에 붙거나 과도하게 벌어지지 않도록
   12px 간격과 완전한 상단 테두리를 적용한다. */
#projects-section > .resizable-table-wrap,
#inquiry-section > .resizable-table-wrap,
#payments-detail-section > .pay-sheet-wrap,
#purchasing-section > .resizable-table-wrap {
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid var(--product-border);
}

/* AI 어시스턴트 — 인콰리·프로젝트와 같은 이유로 padding은 다시 선언하지 않는다
   (약 578행에서 이미 padding:0으로 채팅창이 화면 끝까지 차도록 설정돼 있음). */
#app-main:has(#tab-ai:not([style*="none"])) { background: var(--product-page); }
#ai-page { border-radius: var(--radius); border-color: var(--product-border); box-shadow: var(--shadow-sm); }
.ai-page-header { min-height: 62px; padding: 10px 16px; border-bottom-color: var(--product-border); background: var(--product-surface); }
.ai-chat-title { align-items: center; gap: 10px; }
.ai-chat-title > i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--product-accent-soft); color: var(--product-accent);
}
.ai-chat-title > div { display: flex; flex-direction: column; gap: 1px; }
.ai-chat-title > div > span { color: var(--product-text); font-size: 13px; font-weight: 700; }
.ai-chat-title small { color: #8a94a3; font-size: 10.5px; font-weight: 400; }
.ai-model-badge { border-radius: 999px; background: var(--product-subtle); color: var(--product-muted); border-color: var(--product-border); }
#tab-ai .ai-chat-messages { padding: 22px; background: #f8fafc; }
#tab-ai .ai-msg { max-width: 980px; width: 100%; margin-left: auto; margin-right: auto; }
#tab-ai .ai-msg-bubble { border-radius: var(--radius); border-color: var(--product-border); box-shadow: var(--shadow-sm); }
#tab-ai .ai-chat-input-wrap { padding: 12px 16px; background: var(--product-surface); }
.ai-chat-input { min-height: 40px; border-color: var(--product-border); border-radius: var(--radius); background: var(--product-subtle); }
.ai-send-btn { width: 40px; height: 40px; border-radius: var(--radius); box-shadow: none; }

/* 업무일지 — 구글 캘린더 스타일 상단 툴바 (2026-09 개편).
   좌측: 새 업무(알약형 강조 버튼)/오늘/이전·다음(원형 아이콘)/연월 타이틀.
   우측: 검색+담당자 필터를 하나의 회색 캡슐로 묶고, 뷰 전환은 세그먼트 버튼.
   "새 업무"가 아래 달력 오른쪽 끝과 맞도록 헤더 오른쪽 패딩은 달력 폭 기준에
   맞춰 20px로 통일한다(달력은 border만 있고 패딩이 없음). */
#journal-page { padding: 0; }
.jcal-toolbar {
  margin: 0 0 12px; padding: 0 20px; height: 64px; min-height: 64px;
  background: #fff; border-radius: 0; border-bottom: 1px solid #dadce0;
}
.jcal-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jcal-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.jcal-title { gap: 8px; margin-right: 4px; }
.jcal-title h2 { font-size: 14px; color: #3c4043; }
.jcal-title .workspace-title-icon { color: var(--product-accent); }

/* 새 업무 — 구글 캘린더 특유의 알약형(pill) 플로팅 버튼 */
.jcal-new-btn {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 40px; padding: 0 20px 0 16px; border: none; border-radius: 24px;
  background: #fff; color: #3c4043; font-size: 14px; font-weight: 500;
  font-family: var(--font); cursor: pointer;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  transition: box-shadow .15s ease, background .15s ease;
}
.jcal-new-btn i { color: #1a73e8; font-size: 17px; }
.jcal-new-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15); }

/* 오늘 — 아웃라인 버튼 */
.jcal-today-btn {
  height: 36px; padding: 0 16px; flex-shrink: 0;
  background: transparent; border: 1px solid #dadce0; border-radius: 4px;
  color: #3c4043; font-size: 14px; font-weight: 500; font-family: var(--font);
  cursor: pointer; transition: background .15s ease;
}
.jcal-today-btn:hover { background: #f1f3f4; }

/* 이전/다음 달 — 원형 아이콘 버튼 */
.jcal-nav { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.jcal-nav-btn {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: transparent; color: #5f6368; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.jcal-nav-btn:hover { background: #f1f3f4; }

.jcal-month-label {
  font-size: 21px; font-weight: 500; color: #3c4043; margin-left: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 검색 + 담당자 필터 — 회색 캡슐 하나로 통합 */
.jcal-search-filter {
  display: flex; align-items: center; gap: 2px;
  background: #f1f3f4; border-radius: 8px; padding: 0 4px;
  transition: background .15s ease, box-shadow .15s ease;
}
.jcal-search-filter:focus-within { background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3), inset 0 0 0 1px #dadce0; }
.jcal-search-filter .journal-search-wrap {
  height: 36px; border: none; border-radius: 8px; background: none; padding: 5px 8px;
  width: 260px;
}
.jcal-search-filter .journal-search-wrap.collapsed { width: 36px; padding: 5px; }
.jcal-search-filter .journal-search-toggle { color: #5f6368; font-size: 13px; }
.jcal-member-filter { border-left: 1px solid #dadce0; padding-left: 2px; margin-left: 2px; }
.jmf-select {
  height: 36px; border: none; border-radius: 8px; background: none; padding: 0 10px;
  color: #3c4043; font-size: 13px; min-width: 120px; max-width: 160px;
}
.jmf-select:hover { background: rgba(60,64,67,.06); }
.jmf-select:focus { outline: none; box-shadow: none; background: rgba(60,64,67,.06); }

/* 캘린더/리스트 보기 전환 — 세그먼트(캡슐) 컨트롤 */
.jcal-view-toggle {
  display: flex; gap: 2px; padding: 3px; flex-shrink: 0;
  background: #fff; border: 1px solid #dadce0; border-radius: 20px;
}
.jcal-view-toggle .jvt-btn {
  border-radius: 16px; padding: 6px 12px; color: #5f6368;
  transition: background .15s ease, color .15s ease;
}
.jcal-view-toggle .jvt-btn:hover { background: #f1f3f4; color: #3c4043; }
.jcal-view-toggle .jvt-btn.active { background: #e8f0fe; color: #1a73e8; }

.journal-calendar,
.journal-list-view { border: 1px solid var(--product-border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.cal-dow-header { background: none; }
.cal-cell { border-color: var(--product-border); }
.cal-cell:hover { background: #f6f9fc; }

/* 샵마스터 — 인콰리·프로젝트와 같은 이유로 padding은 다시 선언하지 않는다
   (약 3308행에서 이미 padding:0으로 설정돼 있음). */
#app-main:has(#tab-shopmaster:not([style*="none"])) { background: var(--product-page); }
#shopmaster-page { border: 1px solid var(--product-border); border-radius: var(--radius); background: var(--product-surface); box-shadow: var(--shadow-sm); }
.sm-header { min-height: 62px; padding: 10px 16px; background: var(--product-surface); }
.sm-list-panel { background: var(--product-subtle); border-right-color: var(--product-border); }
.sm-search { margin: 12px 12px 8px; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--product-border); border-radius: var(--radius-sm); background: var(--product-surface); }
.sm-list-showall { padding: 8px 13px 10px; }
.sm-list-item { margin: 0 8px 5px; padding: 10px 11px; border: 1px solid transparent; border-radius: var(--radius-sm); }
.sm-list-item.active { border-color: #b9d1e9; box-shadow: inset 3px 0 0 var(--product-accent); }
.sm-empty { background: var(--product-surface); }
.sm-tabs { overflow-x: auto; scrollbar-width: thin; }
.sm-tab { padding: 10px 12px; font-size: 12px; white-space: nowrap; }
.sm-section-title { color: #526b84; letter-spacing: .02em; text-transform: none; }

/* 기준정보 — 제목과 메뉴 탭이 한 줄에 나란히 붙는다(별도 박스 아님) */
/* 2026-09: 다른 목록형 화면(프로젝트/인콰리/매입관리 등)과 동일하게 페이지 자체는
   스크롤하지 않고 뷰포트에 고정, 내부(좌측 목록/우측 상세)만 각자 스크롤하도록
   전환 — 기준정보 상세패널의 "박스 팽창(출렁임)" 방지 및 하단 액션바 고정 요구사항. */
#tab-settings { gap: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#app-main:has(#tab-settings:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-settings:not([style*="none"])) .tab-page:not(#tab-settings) { display: none !important; }
.settings-page {
  width: 100%; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  padding: 20px 24px;
}
.settings-header { margin: 0 0 14px; flex-shrink: 0; }
.stab-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.stab-body:has(.md-layout) { display: flex; flex-direction: column; overflow: hidden; }
.stab-body .settings-description { flex-shrink: 0; }
.settings-inner-tabs { gap: 3px; }
.stab { min-height: 34px; padding: 0 11px; border: 0; border-radius: var(--radius-sm); font-size: 11.5px; white-space: nowrap; }
.stab.active { background: var(--product-accent-soft); color: #174f85; }
.md-list-title,
.md-detail-title {
  min-height: 42px; margin: -16px -16px 12px; padding: 0 14px; border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--product-border); background: var(--product-surface);
}
.md-list-title span,
.md-detail-title h3 { color: var(--product-text); font-size: 12px; }
.md-list-title i,
.md-detail-title i { color: var(--product-accent); }
.md-list-col,
.md-detail-col { padding: 16px; border-color: var(--product-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.settings-description { padding: 9px 12px; border: 1px solid #cfe0f0; border-left: 3px solid var(--product-accent); background: #f1f6fb; font-size: 11.5px; }
.md-list-toolbar select,
.md-list-toolbar input[type="text"] { min-height: 32px; border-radius: var(--radius-sm); background: var(--product-subtle); }
.md-list-toolbar .btn-sm { height: 32px; }
.md-list-scroll { border-radius: var(--radius-sm); }
.md-field-grid { border-radius: var(--radius-sm); }
.md-subtabs { gap: 3px; padding: 4px; border-radius: var(--radius-sm); background: var(--product-subtle); }
.md-subtab { border-radius: 4px; }
.md-subtab.active { background: var(--product-accent); color: #fff; }

/* 공통 폼·버튼·모달·상태 */
.btn { border-radius: var(--radius-sm); box-shadow: none; }
.btn:focus-visible,
.lf-tb-item:focus-visible,
.stab:focus-visible,
.nav-item:focus-visible { outline: 2px solid var(--product-accent); outline-offset: 2px; }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea { border-color: var(--product-border); }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus { border-color: var(--product-accent); box-shadow: 0 0 0 3px rgba(40,120,200,.11); outline: none; }
.modal-overlay { background: rgba(15,23,42,.46); backdrop-filter: blur(2px); }
.modal-box { border: 1px solid rgba(255,255,255,.6); border-radius: 10px; box-shadow: 0 20px 60px rgba(15,23,42,.22); }
.modal-header { min-height: 54px; padding: 11px 16px; border-bottom: 1px solid var(--product-border); background: var(--product-surface); }
.modal-header h3 { color: var(--product-text); font-size: 14px; }
.modal-header h3 i { color: var(--product-accent); }
.modal-close { border-radius: var(--radius-sm); }
.modal-body { background: var(--product-surface); }
/* 인콰리·견적 상세 풀페이지 (2026-09: #modal-inquiry 팝업 → 독립 페이지 전환)
   목록 섹션(#inquiry-section)과 이 페이지(#iq-detail-page)는 같은 #tab-inquiry
   안에서 서로 배타적으로 display:none 토글된다(js/app/inquiry.js openInquiryModal /
   closeInquiryDetail 참고) — 팝업 오버레이가 아니므로 화면 폭을 그대로 다 쓴다. */
.iq-detail-page { display: flex; flex-direction: column; gap: 16px; }
.iq-detail-header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--product-surface); border: 1px solid var(--product-border);
  border-radius: var(--radius-lg); padding: 14px 20px;
}
.iq-detail-back-btn {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: none; border: 1px solid var(--product-border); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--product-text);
  cursor: pointer; font-family: var(--font); transition: all .12s ease;
}
.iq-detail-back-btn:hover { border-color: var(--product-accent); color: var(--product-accent); background: var(--product-accent-soft, rgba(40,120,200,.08)); }
.iq-detail-header h2 {
  font-size: 15px; font-weight: 700; color: var(--product-text); margin: 0;
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
}
.iq-detail-header h2 i { color: var(--product-accent); }
.iq-detail-status-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; background: var(--product-subtle, var(--bg-input));
  color: var(--product-text); flex-shrink: 0;
}
.iq-detail-header-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; flex-wrap: wrap; }
/* 2026-09: 발주서 상세(#po-detail-page)의 삭제/PDF출력/취소/저장 버튼도 인콰리
   상세와 동일한 iq-menu-btn 언더라인 텍스트 메뉴로 전환. 인콰리 상세 버튼들과
   달리 PDF출력/저장은 아이콘을 함께 쓰므로, 이 페이지에서만 아이콘-텍스트 간격을
   보강한다(다른 iq-detail-header-actions 사용처의 기존 모습에는 영향 없음). */
#po-detail-page .iq-detail-header-actions .iq-menu-btn { gap: 6px; }

/* ── 매입관리 > 매입현황(2026-09) ─────────────────────────────────────────── */

/* 2026-09(2차): [매입 목록]/[매입현황(월별)] 탭 + 보조 액션(전체 펼치기/전체
   접기/엑셀 다운로드) 좌측, 조회 필터 우측 — 통합 툴바 한 줄(약 45px)로
   재구성했다. 예전엔 타이틀 옆 인라인 탭 + 뷰별 필터 그리드 2단이었다. */
.pis-toolbar-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  gap: 16px; min-height: 45px; padding: 0 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-top: none;
}
.pis-toolbar-left { display: flex; align-items: center; gap: 20px; min-width: 0; flex-shrink: 0; }
.pis-toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* 탭 스위처 — 선택 탭은 짙은 네이비 + 하단 2px 인디케이터로 표시한다. */
.pis-view-tabs { display: inline-flex; align-items: center; gap: 18px; }
.pis-view-tab {
  padding: 2px 0 6px; border: none; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #6B7280;
  border-bottom: 2px solid transparent; line-height: 1.3;
}
.pis-view-tab:hover { color: var(--product-text); }
.pis-view-tab.active { color: #1E3A8A; border-bottom-color: #1E3A8A; }

/* 보조 액션(전체 펼치기/전체 접기/엑셀 다운로드) — 탭과 동일한 밑줄 텍스트
   링크 스타일로 통일한다(기존 사각 아웃라인 버튼 완전 제거). */
.pis-toolbar-links { display: inline-flex; align-items: center; gap: 18px; }
.pis-link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0 6px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #475569;
  border-bottom: 2px solid transparent; line-height: 1.3; font-family: var(--font);
  transition: color .12s ease, border-color .12s ease;
}
.pis-link-btn i { font-size: 12px; }
.pis-link-btn:hover { color: #1E3A8A; border-bottom-color: #CBD5E1; text-decoration: underline; }

/* 우측 조회 필터 그룹 — 조회기간/프로젝트 검색/업체명 검색을 8~12px 간격으로
   우측 정렬한다. 라벨은 "프로젝트 검색"(5글자)이 줄바꿈되지 않도록 nowrap +
   충분한 min-width를 확보한다(기존 .lf-label의 flex:0 0 68px가 원인이었다). */
.pis-toolbar-filters { display: flex; align-items: center; gap: 10px; }
.pis-toolbar-filter-item { display: flex; align-items: center; gap: 6px; }
.pis-toolbar-filter-item .lf-label {
  flex: 0 0 auto; min-width: 80px; max-width: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--product-text, #334155); text-align: right;
}
.pis-toolbar-filter-item .lf-field { position: relative; }
.pis-toolbar-filter-item .lf-field input,
.pis-toolbar-filter-item .lf-field select {
  width: 190px; height: 30px; box-sizing: border-box; padding: 0 24px 0 10px;
  border: 1px solid var(--border-light); border-radius: 6px; background: #fff;
  font-size: 12.5px; line-height: 28px; color: var(--text-secondary);
  appearance: none; -webkit-appearance: none; font-family: inherit;
}
.pis-toolbar-filter-item .lf-field .chev {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: var(--text-muted); pointer-events: none;
}
.pis-toolbar-filter-item .lf-field .drp-box {
  display: flex; align-items: center; gap: 6px; width: 190px; height: 30px; box-sizing: border-box;
  padding: 0 10px; border: 1px solid var(--border-light); border-radius: 6px; background: #fff;
  font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.pis-toolbar-filter-wide .lf-field input { width: 240px; }
/* 2026-09: 통합검색 — 검색어가 있을 때만 나타나는 X(지우기) 버튼. 다른
   컬럼(계정/기간 등)의 chev 아이콘과 같은 위치(우측 9px)에 절대배치한다. */
.pis-search-field input { padding-right: 26px; }
.pis-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 3px; padding: 0; cursor: pointer;
  font-size: 11px; color: var(--text-muted); outline: none; box-shadow: none;
}
.pis-search-clear:hover { color: var(--danger, #DC2626); background: rgba(0,0,0,.04); }

/* ── 60% 컴팩트 그리드 규격(2026-09 확정) ──────────────────────────────────────
   96dpi 웹 표준 기준(1pt=1.333px) 9pt(12px) 폰트 / 19.5pt(26px) 행높이를
   상대비율이 아닌 절대 px 단위로 고정한다. 매입 목록(.pis-grid-table)/
   매입현황(월별)(.pis-pivot-table)/은행 대량이체 목록(.pis-transfer-table)이
   모두 이 변수를 그대로 참조하므로, 향후 수치를 바꿀 때도 한 곳만 고치면 된다.
   재사용을 위해 독립 클래스(.compact-grid-table)로도 동일하게 선언해 둔다 —
   다른 화면 표에도 이 클래스만 추가하면 같은 규격이 즉시 적용된다. */
:root {
  --table-font-size: 12px;      /* 9pt */
  --table-row-height: 26px;     /* 19.5pt */
  --table-cell-padding-y: 3px;
  --table-cell-padding-x: 8px;
  --table-label-font-size: 11px; /* 8pt 보조/라벨 */
  --table-inline-ctrl-height: 20px;   /* 26px 행높이 - 상하 3px 패딩 */
  --table-inline-ctrl-font-size: 11.5px; /* 8.5pt */
  --table-inline-icon-size: 10px;
}
.compact-grid-table th,
.compact-grid-table td {
  font-size: var(--table-font-size);
  height: var(--table-row-height);
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  line-height: 1.2;
  vertical-align: middle;
  box-sizing: border-box;
  border-bottom: 1px solid #E2E8F0;
}
.compact-grid-table td.pis-col-money,
.compact-grid-table td.pis-col-right { font-variant-numeric: tabular-nums; }

/* 매입현황(월별) 피벗 매트릭스 — 프로젝트→업체 계층 + 월별 동적 컬럼.
   좌측 "행 레이블" 컬럼은 가로 스크롤 중에도 sticky로 고정하고, 헤더는
   시원한 소프트블루로 다른 표(네이비 헤더)와 구분해 "요약/집계 화면"임을
   시각적으로 알린다. */
/* 2026-09(5차): 은행 대량이체 목록이 별도 탭으로 완전히 분리되면서 "상/하단
   표가 한 화면에 같이 들어와야 한다"는 예전 제약이 사라졌다 — 이 표가 화면에
   남는 세로 공간(헤더+툴바+하단 액션바를 뺀 나머지) 전체를 그대로 차지하도록
   고정 max-height 대신 flex:1을 쓴다(#po-status-section/#pis-pivot-view의
   flex 체인은 아래 "매입현황(월별) 전체화면" 규칙 참조). overflow-x/y를
   함께 auto로 둬도 가로 스크롤바가 세로 스크롤에 가려지지 않도록 스크롤바
   자체 두께를 명시(8px)하고, sticky thead/tfoot는 이 wrapper가 유일한
   스크롤 컨테이너일 때만 정상 동작하므로 position:relative를 명시적으로
   고정한다. */
.pis-pivot-scroll {
  position: relative; overflow-x: auto; overflow-y: auto;
  flex: 1; min-height: 0;
  border: 1px solid #CBD5E1; border-top: none;
  scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9; /* Firefox */
}
.pis-pivot-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.pis-pivot-scroll::-webkit-scrollbar-track { background: #F1F5F9; }
.pis-pivot-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; border: 1px solid #F1F5F9; }
.pis-pivot-scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.pis-pivot-scroll::-webkit-scrollbar-corner { background: #F1F5F9; }
/* 2026-09: 행 높이 60% 컴팩트화 — 패딩을 8px 14px → 4px 8px 수준으로 줄이고,
   엑셀 시트 느낌의 선명한 사각 그리드 보더(#CBD5E1)로 통일했다. 숫자 컬럼은
   자릿수가 흔들리지 않도록 tabular-nums를 적용한다. */
/* 2026-09(4차): 좌측 라벨 열을 제외한 우측 "월별 6칸 + 총합계 1칸 = 7칸"의
   너비가 셀 내용(금액 자릿수)에 끌려다니며 들쭉날쭉해지던 문제를 고친다.
   table-layout:fixed에서는 명시적으로 width가 지정된 열(라벨, 240px)만 그
   값을 쓰고, width가 지정되지 않은 나머지 열은 남은 공간을 브라우저가 자동
   으로 "정확히 균등" 분배한다 — 이 특성을 그대로 이용해 월별/총합계 칸에는
   따로 width를 주지 않는다(칸 수가 6개월이 아니어도 항상 남은 폭을 똑같이
   나눠 가지므로 기간 필터가 바뀌어도 그대로 성립한다). 컬럼 리사이즈 핸들은
   th에 직접 style.width(px)를 찍는 방식이라(core.js pinThWidth), colgroup을
   쓰지 않아야 드래그 조작이 계속 정상 동작한다. */
/* 2026-09(7차): '전체 기간' 등 장기간 조회로 월별 컬럼이 15개 이상 늘어나면,
   예전에는(width 미지정 → 남은 폭을 컬럼 수만큼 균등분배) 컬럼이 50~70px까지
   짜부라져 억 단위 금액이 "597,06..."처럼 말줄임표로 잘렸다. table-layout:fixed
   상태에서 "명시적으로 width가 지정된 컬럼은 그 값을 그대로 쓰고, 지정 안 된
   컬럼만 남는 폭을 나눠 갖는다"는 원리를 반대로 이용해 — 이제 모든 컬럼
   (라벨/월별/총합계)에 명시적 width를 준다. 그 결과 컬럼 합이 컨테이너 폭을
   넘으면 표 자체가 넓어지고(위 CSS2 fixed-table 스펙: 표 너비 = max(지정폭,
   컬럼폭 합계)), .pis-pivot-scroll의 overflow-x:auto가 가로 스크롤바를 만든다.
   너비가 좁을 때(월 수가 적을 때)는 width:100%가 그대로 유지되어 화면을
   꽉 채운다. */
.pis-pivot-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: var(--table-font-size); min-width: 1010px; }
.pis-pivot-table th, .pis-pivot-table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-right: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  height: var(--table-row-height); line-height: 1.2; box-sizing: border-box; vertical-align: middle;
}
/* sticky 계층(z-index) 스케일: 평범한 셀(0) < 좌측 sticky 라벨 열(5~6) <
   상단 sticky 대분류 요약행(15~16) < 상단 sticky 헤더행(20) < 상/좌 동시
   교차하는 "모서리" 셀(30~40, 항상 그 행/열보다 한 단계 위). 이렇게 계단식으로
   두면 가로+세로 스크롤이 동시에 일어나도 어느 셀이 어느 셀 위에 그려질지
   항상 예측 가능하다. */
.pis-pivot-table thead th {
  position: sticky; top: 0; z-index: 20;
  background: #E0F2FE; color: #0F172A; font-size: var(--table-font-size); font-weight: 700;
}
.pis-pivot-table thead th:first-child { position: sticky; left: 0; top: 0; z-index: 40; text-align: left; }
.pis-pivot-table .pis-pivot-col-label { text-align: left; width: 240px; min-width: 220px; }
/* 월별/총합계 컬럼: 억 단위(콤마 포함 13자, 예: 2,541,692,321) + 좌우 여백이
   여유 있게 들어가도록 고정폭을 지정하고, ellipsis 대신 clip으로 바꿔 혹시
   폭이 아주 좁아지는 예외 상황에서도 숫자가 "..."로 잘리는 대신 그냥
   넘치는 부분만 보이지 않게(잘못된 값을 보여주지 않게) 한다. */
.pis-pivot-table .pis-pivot-col-month {
  text-align: right; font-variant-numeric: tabular-nums; text-overflow: clip;
  width: 120px; min-width: 120px; padding-left: 8px; padding-right: 8px;
}
.pis-pivot-table .pis-pivot-col-sum {
  text-align: right; font-variant-numeric: tabular-nums; text-overflow: clip;
  width: 130px; min-width: 130px; padding-left: 8px; padding-right: 8px;
}
.pis-pivot-table tbody td.pis-pivot-col-label,
.pis-pivot-table tfoot td.pis-pivot-col-label {
  position: sticky; left: 0; z-index: 5; background: var(--product-surface);
}
/* 가로 스크롤 시 뒤로 지나가는 월별 금액 셀들과 좌측 고정 라벨 열 사이의
   경계를 또렷하게 표시한다(불투명 배경은 위에서 이미 셀별로 지정돼 있어
   비쳐 보이지 않으므로, 여기서는 순수하게 시각적 구분선만 더한다). */
.pis-pivot-table th.pis-pivot-col-label,
.pis-pivot-table td.pis-pivot-col-label {
  box-shadow: 2px 0 4px rgba(0, 0, 0, .05);
}
/* 프로젝트/일반 기타비용 대분류 행 — 2026-09(6차): 컬럼 헤더(top:0) 바로 아래
   높이만큼(--table-row-height) 자체도 sticky로 고정해, 하위 업체 행들을
   스크롤해 내려가도 지금 보고 있는 대분류의 월별 합계가 항상 화면에 남아있게
   한다. 같은 top 오프셋을 모든 대분류 행에 동일하게 주면 브라우저가 알아서
   "다음 대분류 행이 나타나는 순간 이전 것을 밀어내고 그 자리를 차지하는"
   섹션 헤더 방식으로 동작한다(대분류가 여러 개여도 자연스럽게 이어짐).
   배경은 아래로 스크롤되는 업체 행이 비쳐 보이지 않도록 반드시 불투명하게
   지정해야 한다. */
.pis-pivot-group-row {
  position: sticky; top: var(--table-row-height); z-index: 15;
}
.pis-pivot-group-row td {
  font-size: var(--table-font-size); font-weight: 700; color: #111827;
  background-color: #F8FAFC;
  border-top: 1px solid #CBD5E1; border-bottom: 2px solid #CBD5E1;
}
/* 대분류 요약행의 좌측 라벨 셀("일반 기타비용" 등)은 상단(그룹행 자체)과
   좌측(라벨 컬럼) sticky가 겹치는 "모서리" 셀이라, 같은 행의 다른 셀(15)이나
   일반 좌측 sticky 라벨 셀(5)보다 한 단계 위(16)로 올려 스크롤이 교차해도
   항상 맨 위에 그려지게 한다 — 다만 표 전체의 최우선 모서리인 헤더
   좌상단 셀(40)보다는 낮게 둔다. */
.pis-pivot-group-row td.pis-pivot-col-label { background-color: #F8FAFC; z-index: 16; }
.pis-pivot-group-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-right: 6px; border: 1px solid var(--product-border);
  border-radius: 3px; background: #fff; color: #556171; font-size: 9px; cursor: pointer; vertical-align: middle;
}
.pis-pivot-group-toggle:hover { border-color: var(--product-accent); color: var(--product-accent); }
/* 하위 업체(협력사) 행 */
.pis-pivot-vendor-row td { font-size: var(--table-font-size); font-weight: 400; color: #374151; }
.pis-pivot-vendor-row td.pis-pivot-col-label { padding-left: 38px; } /* 대분류 대비 20~24px 들여쓰기 + 토글 아이콘 폭 보정 */
.pis-pivot-vendor-row:hover td { background: #F8FAFC; }
.pis-pivot-vendor-row:hover td.pis-pivot-col-label { background: #F8FAFC; }
.pis-pivot-empty-cell { color: var(--product-muted); }
/* 최하단 총합계 고정 행 */
.pis-pivot-table tfoot tr { position: sticky; bottom: 0; z-index: 15; }
.pis-pivot-table tfoot td {
  background: #E0F2FE; color: #0F172A; font-size: var(--table-font-size); font-weight: 800;
  border-top: 2px solid #0F172A;
}
/* 총합계 행의 좌측 라벨 셀도 하단+좌측 sticky가 겹치는 모서리이므로 같은
   원칙으로 한 단계 위(16)로 올린다. */
.pis-pivot-table tfoot td.pis-pivot-col-label { background: #E0F2FE; z-index: 16; }

/* 2026-09: 피벗 월별 "금액 셀" 클릭 — 업체 행 체크박스 방식을 대체한다. 클릭한
   셀 하나가 하단 은행 대량이체 표의 행 하나에 대응하고, 재클릭하면 토글 해제된다. */
.pis-pivot-cell-clickable { cursor: pointer; transition: background-color .1s ease, box-shadow .1s ease; }
.pis-pivot-cell-clickable:hover { background-color: rgba(37, 99, 235, .08); }
/* "선택 중" 상태 — 아직 [확인]을 누르기 전, 파란 2px 아웃라인으로 표시. */
.pis-pivot-cell-selected,
.pis-pivot-cell-selected:hover {
  background-color: rgba(37, 99, 235, .08);
  box-shadow: inset 0 0 0 2px #2563EB;
  font-weight: 700; color: #1D4ED8;
}
/* 2026-09(8차): "집행 완료(결재완료)" 상태 — 매입현황(월별)에서 [확인]을 눌러
   자금 집행 대상으로 확정된 셀. 선택 중(파란 테두리, .pis-pivot-cell-selected)
   과 한눈에 구분되도록 민트 계열의 채워진 배경을 쓴다 — 두 클래스는 서로 다른
   상태를 나타내므로 CSS 규칙도 항상 독립적으로 유지한다(하나가 다른 하나의
   변형이 되지 않도록). 더 이상 클릭으로 되돌릴 수 없음을 cursor:default로도
   알린다(실제 취소는 [수정] 버튼으로만 가능 — pisPivotToggleTransferCell 참고). */
/* .pis-pivot-vendor-row:hover td 규칙(specificity 0,2,1)에 배경색이 묻히지
   않도록, 이 규칙도 td 타입 셀렉터를 포함해 최소 동일한 specificity를 갖게
   하고(선언 순서상 이 규칙이 더 뒤에 오므로 동률이면 이 규칙이 이긴다), 확인
   상태 셀은 항상 채워진 배경을 유지한다. */
td.pis-pivot-cell-confirmed,
.pis-pivot-vendor-row:hover td.pis-pivot-cell-confirmed,
td.pis-pivot-cell-confirmed:hover {
  background-color: transparent;
  box-shadow: none;
  font-weight: 400; color: #9CA3AF;
  cursor: default;
}
/* 2026-09(9차): 미지급 강조 — 아직 지급되지 않은 금액 셀을 연녹색 박스로 강조해
   담당자가 놓치지 않고 확인하게 한다. "선택 중"(.pis-pivot-cell-selected, 파란
   테두리) 상태와는 서로 다른 상태이므로 셀렉터를 분리해 섞이지 않게 한다. */
td.pis-pivot-cell-unpaid,
.pis-pivot-vendor-row:hover td.pis-pivot-cell-unpaid,
td.pis-pivot-cell-unpaid:hover {
  background-color: #ECFDF5;
  font-weight: 600; color: #065F46;
}

/* ── 피벗 하단 액션바(2026-09 3차) — 은행 대량이체 목록이 별도 탭으로 분리되면서
   피벗 화면에는 선택 요약 + [수정]/[확인]만 남는다. ─────────────────────────── */
.pis-pivot-actionbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 16px 4px 4px; flex-shrink: 0;
}
.pis-pivot-actionbar-hint { font-size: 13px; color: #64748B; margin-right: auto; }
.btn-pis-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 6px; border: 1px solid #CBD5E1; background: #ffffff;
  font-size: 13px; font-weight: 500; color: #334155; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-pis-secondary:hover { background-color: #F1F5F9; border-color: #94A3B8; }
.btn-pis-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; border-radius: 6px; border: 1px solid #1D4ED8; background: #2563EB;
  font-size: 13px; font-weight: 700; color: #ffffff; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-pis-primary:hover { background-color: #1D4ED8; border-color: #1E40AF; }
.btn-pis-primary:disabled { opacity: .5; cursor: not-allowed; background-color: #93C5FD; border-color: #93C5FD; }
.btn-pis-split {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 6px; border: 1px solid #D97706; background: #F59E0B;
  font-size: 13px; font-weight: 700; color: #ffffff; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-pis-split:hover { background-color: #D97706; border-color: #B45309; }
.btn-pis-split:disabled { opacity: .5; cursor: not-allowed; background-color: #FDE68A; border-color: #FDE68A; color: #92400E; }

/* ── 2026-09(13차): 매입현황(월별) 피벗 [수정]/[분할결재] 모달 공용 — 셀이 매입
   건 여러 개를 합산한 경우, 폼으로 바로 가지 않고 어느 건을 고를지 먼저 보여준다. ── */
.pis-pivot-edit-chooser-hint { font-size: 13px; color: #64748B; margin-bottom: 10px; }
.pis-pivot-edit-chooser-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.pis-pivot-edit-chooser-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--product-border); border-radius: 8px;
  background: #F8FAFC; cursor: pointer; transition: border-color .12s ease, background-color .12s ease;
  text-align: left; width: 100%; font: inherit;
}
.pis-pivot-edit-chooser-item:hover { border-color: var(--product-accent); background: #EFF6FF; }
.pis-pivot-edit-chooser-item-main { display: flex; flex-direction: column; gap: 2px; }
.pis-pivot-edit-chooser-item-title { font-size: 13px; font-weight: 600; color: #1F2937; }
.pis-pivot-edit-chooser-item-sub { font-size: 12px; color: #64748B; }
.pis-pivot-edit-chooser-item-amount { font-size: 14px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }

/* ── [분할결재] 모달 (2026-09 13차) ── */
.pis-split-info {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 12px 14px; background: #F8FAFC; border: 1px solid var(--product-border); border-radius: 8px;
  margin-bottom: 18px;
}
.pis-split-info-item { display: flex; flex-direction: column; gap: 3px; }
.pis-split-info-label { font-size: 11px; color: #64748B; }
.pis-split-info-value { font-size: 14px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }

.pis-split-rows { display: flex; flex-direction: column; gap: 12px; }
.pis-split-row {
  display: grid; grid-template-columns: 52px 1fr 1fr 1fr 1fr 28px; gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--product-border); border-radius: 8px; background: #ffffff;
}
.pis-split-row-no { font-size: 12px; font-weight: 700; color: #B45309; padding-bottom: 8px; }
.pis-split-row .form-group { margin-bottom: 0; }
.pis-split-row label { display: block; font-size: 11px; color: #64748B; margin-bottom: 4px; }
.pis-split-row input { width: 100%; }
.pis-split-row input[readonly] { background: #F1F5F9; color: #64748B; }
.pis-split-row-remove {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--product-border);
  background: #fff; color: #94A3B8; cursor: pointer; margin-bottom: 1px;
}
.pis-split-row-remove:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
.pis-split-row-remove:disabled { opacity: .3; cursor: not-allowed; }

.pis-split-add-row-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 7px 14px; border-radius: 6px; border: 1px dashed #94A3B8; background: #F8FAFC;
  font-size: 13px; font-weight: 600; color: #475569; cursor: pointer;
}
.pis-split-add-row-btn:hover { border-color: var(--product-accent); color: var(--product-accent); background: #EFF6FF; }

.pis-split-remaining {
  margin-top: 14px; padding: 10px 14px; border-radius: 8px; text-align: right;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA;
}
.pis-split-remaining.pis-split-ok { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }

/* ── 은행 대량이체 목록(2026-09) — 매입현황(월별) 피벗 하단, 최상단 글로벌
   헤더의 [출력]과는 완전히 분리된 전용 [엑셀출력] 버튼을 갖는다. ─────────────── */
/* 2026-09(2차): 100% 배율에서 이 섹션이 화면 하단에 스크롤 없이 안착하도록
   여백(margin-top)과 헤더 패딩을 살짝 좁혔다(표 자체의 기본 10행 높이는
   유지 — pis-transfer-scroll 참고). */
.pis-transfer-section { margin-top: 10px; border: 1px solid var(--product-border); border-radius: 8px; overflow: hidden; }
/* 2026-09(9차): 위 3차 시점에 "독립 탭이 되었으니 세로 공간을 자유롭게 쓰자"며
   #pis-transfer-view에서만 max-height를 해제해뒀던 것이 이번 레이아웃 붕괴의
   원인이었다 — 이체 대상 행이 14건 이상으로 늘어나면 이 규칙이 .pis-transfer-scroll
   의 고정 높이(286px, 아래 참고)를 override해 표가 세로로 무한정 길어지고,
   아래 종합 리스트를 화면 밖으로 밀어냈다. 상단 표는 항상 고정 높이+내부
   스크롤을 유지해야 하므로 이 override 자체를 제거해, 어느 화면에서 쓰이든
   .pis-transfer-scroll의 286px(약 10행) 제한이 예외 없이 적용되게 한다. */
/* 2026-09(4차): 종합 리스트가 새로 추가되며 두 표(상단 이체목록 + 하단 종합
   리스트)를 같은 화면 안에 모두 담아야 한다 — #pis-pivot-view와 동일한
   flex:1/min-height:0/overflow:hidden 체인을 적용해, 상단 표는 자기 높이(고정
   10행)만큼만 차지하고 종합 리스트가 남는 공간을 모두 흡수하며 내부 스크롤
   되도록 한다(뷰포트 고정 100vh 원칙 유지, 외부 스크롤바 없음). */
#pis-transfer-view {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.pis-transfer-section { flex-shrink: 0; }
.pis-transfer-summary-section {
  flex: 1; min-height: 120px; display: flex; flex-direction: column; overflow: hidden;
}
.pis-transfer-summary-scroll { flex: 1; min-height: 0; }
.pis-transfer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; background: var(--product-subtle, #F8FAFC); border-bottom: 1px solid var(--product-border);
}
.pis-transfer-title { display: flex; align-items: center; gap: 10px; }
.pis-transfer-title h3 { margin: 0; font-size: 14px; font-weight: 700; color: #0F172A; }
.pis-transfer-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #E0F2FE; color: #0369A1;
}
/* 상단 글로벌 헤더의 무채색 텍스트형 [출력] 버튼과 시각적으로 구분되는, 정갈한
   화이트 아웃라인 유틸리티 버튼 — 메인 액션(등록/저장 등)과 경쟁하지 않는다. */
.btn-excel-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; border: 1px solid #CBD5E1; background: #ffffff;
  font-size: 13px; font-weight: 500; color: #334155; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-excel-outline i { color: #16A34A; font-size: 13px; }
.btn-excel-outline:hover { background-color: #F1F5F9; border-color: #94A3B8; }
.btn-excel-outline:disabled { opacity: .5; cursor: not-allowed; }
.btn-excel-outline:disabled:hover { background-color: #ffffff; border-color: #CBD5E1; }

/* 2026-09(4차): [수정] — 종합 리스트에서 불러온 과거 확정 회차의 항목을 일부
   제외(삭제)할 수 있게 하는 편집 모드 토글. 평소엔 슬레이트 회색 아웃라인
   보조 버튼이고, 편집 모드가 켜지면 "수정 완료"로 라벨이 바뀌며 눈에 띄는
   앰버 솔리드로 강조한다(저장하지 않은 편집 중임을 계속 인지시키기 위함).
   신규 선택(과거 회차를 불러오지 않은 상태)에서는 애초에 disabled — 그 경우
   행 삭제(✕)는 지금까지처럼 항상 자유롭게 가능하다(편집모드 개념이 필요 없음). */
.btn-pis-transfer-edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; border: 1px solid #CBD5E1; background: #ffffff;
  font-size: 13px; font-weight: 500; color: #475569; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-pis-transfer-edit:hover { background-color: #F1F5F9; border-color: #94A3B8; }
.btn-pis-transfer-edit:disabled { opacity: .5; cursor: not-allowed; }
.btn-pis-transfer-edit:disabled:hover { background-color: #ffffff; border-color: #CBD5E1; }
.btn-pis-transfer-edit.is-editing {
  background-color: #F59E0B; border-color: #D97706; color: #ffffff; font-weight: 700;
}
.btn-pis-transfer-edit.is-editing:hover { background-color: #D97706; border-color: #B45309; }

/* [저장] — [엑셀출력] 바로 왼쪽의 확정 액션. 신뢰감 있는 블루 솔리드로 구분한다. */
.btn-pis-transfer-save {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; border: 1px solid #1D4ED8; background: #2563EB;
  font-size: 13px; font-weight: 700; color: #ffffff; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-pis-transfer-save:hover { background-color: #1D4ED8; border-color: #1E40AF; }
.btn-pis-transfer-save:disabled { opacity: .5; cursor: not-allowed; background-color: #93C5FD; border-color: #93C5FD; }

/* 2026-09: 본문/헤더 행 높이를 동일하게 60% 컴팩트화(패딩 8px 12px → 4px 8px)하고
   기본 10행 틀이 항상 보이도록 max-height는 헤더+본문 10행 높이에 맞춰 계산한다
   (renderPisTransferTable()이 부족한 만큼 빈 placeholder 행을 채운다). */
/* 헤더 26px + 본문 10행×26px = 286px — 컴팩트 규격(26px 행높이) 확정에 맞춰 재계산. */
.pis-transfer-scroll {
  max-height: 286px; overflow-y: auto; overflow-x: auto; border: 1px solid #CBD5E1; border-top: none;
  scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9;
}
.pis-transfer-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.pis-transfer-scroll::-webkit-scrollbar-track { background: #F1F5F9; }
.pis-transfer-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.pis-transfer-scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.pis-transfer-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--table-font-size); table-layout: fixed; }
.pis-transfer-table th, .pis-transfer-table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid #CBD5E1; border-right: 1px solid #CBD5E1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2; height: var(--table-row-height); box-sizing: border-box; vertical-align: middle;
}
.pis-transfer-table th:last-child, .pis-transfer-table td:last-child { border-right: none; }
.pis-transfer-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #F1F5F9; color: #334155; font-weight: 700; font-size: var(--table-font-size); text-align: left;
}
.pis-transfer-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); }
.pis-transfer-table tbody tr:hover td { background: #F8FAFC; }
.pis-transfer-table tbody tr.pis-transfer-row-placeholder td { color: transparent; background: #fff; cursor: default; }
.pis-transfer-table tbody tr.pis-transfer-row-placeholder:hover td { background: #fff; }
.pis-transfer-table td .pis-transfer-input {
  width: 100%; height: var(--table-inline-ctrl-height); box-sizing: border-box;
  border: 1px solid transparent; background: transparent; padding: 2px 4px;
  font-size: var(--table-inline-ctrl-font-size); color: var(--text-primary); border-radius: 4px; line-height: 1.2;
}
.pis-transfer-table td .pis-transfer-input:hover { border-color: var(--border-light); }
.pis-transfer-table td .pis-transfer-input:focus { border-color: var(--accent); background: #fff; outline: none; }
.pis-transfer-table td.pis-transfer-amount { text-align: right; font-weight: 600; }
.pis-transfer-table td.pis-transfer-amount .pis-transfer-input { font-variant-numeric: tabular-nums; }
.pis-transfer-row-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; font-size: 11px; line-height: 1; border-radius: 4px; }
.pis-transfer-row-del:hover { background: rgba(239,68,68,.1); color: #EF4444; }
/* 2026-09(4차): 종합 리스트에서 불러온 과거 회차를 "조회만" 하는 중에는 실수로
   기록을 지우는 사고를 막기 위해 개별 삭제(✕)를 비활성화해 둔다 — [수정]을
   눌러 편집 모드로 들어가야만(.pis-transfer-table--edit-mode) 다시 활성화된다. */
.pis-transfer-table--locked .pis-transfer-row-del {
  opacity: .25; cursor: not-allowed; pointer-events: none;
}
#pis-transfer-empty { padding: 28px 16px; }

/* ── 종합 리스트(2026-09) — 상단 은행 대량이체 목록 바로 아래, [확정]을 누를
   때마다 1행씩 쌓이는 자금 이체 집행 이력. 위 표와 24px 간격을 두고 별도
   섹션(테두리+타이틀바)으로 명확히 구분한다. ───────────────────────────────── */
.pis-transfer-summary-section {
  margin-top: 24px; border: 1px solid var(--product-border); border-radius: 8px; overflow: hidden;
}
.pis-transfer-summary-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; background: var(--product-subtle, #F8FAFC); border-bottom: 1px solid var(--product-border);
}
.pis-transfer-summary-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: #0F172A; }
.pis-transfer-summary-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #E0F2FE; color: #0369A1;
}
.pis-transfer-summary-scroll { overflow-y: auto; overflow-x: auto; border-top: none; }
.pis-transfer-summary-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--table-font-size); table-layout: fixed;
}
.pis-transfer-summary-table th, .pis-transfer-summary-table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border: 1px solid #CBD5E1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2; height: var(--table-row-height); box-sizing: border-box; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
/* 짙은 차콜/연회색 헤더, 9pt, 28px 행 높이(본문 26px보다 살짝 크게). */
.pis-transfer-summary-table thead th {
  position: sticky; top: 0; z-index: 1; height: 28px;
  background: #334155; color: #ffffff; font-weight: 700; font-size: var(--table-font-size); text-align: left;
}
.pis-transfer-summary-table thead th.pis-col-center { text-align: center; }
.pis-transfer-summary-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); }
.pis-transfer-summary-table tbody tr:hover td { background: #F8FAFC; }
.pis-transfer-summary-table tbody tr.pis-transfer-summary-row-placeholder td { color: transparent; background: #fff; cursor: default; }
.pis-transfer-summary-table tbody tr.pis-transfer-summary-row-placeholder:hover td { background: #fff; }
/* 종합 리스트에서 클릭해 현재 상단 '은행 대량이체 목록'에 로드되어 있는 회차 —
   좌측 인디케이터 라인 + 연한 블루 배경으로 선택 상태를 표시한다. */
.pis-transfer-summary-table tbody tr.pis-transfer-summary-row-selected td { background: #EFF6FF; }
.pis-transfer-summary-table tbody tr.pis-transfer-summary-row-selected:hover td { background: #EFF6FF; }
.pis-transfer-summary-table tbody tr.pis-transfer-summary-row-selected td:first-child { box-shadow: inset 3px 0 0 #2563EB; }
/* `내용` 셀 — 클릭하면 해당 회차 상세 이체 내역을 다시 불러올 수 있음을
   호버 시 커서/밑줄/블루 텍스트로 안내한다. */
.pis-transfer-summary-content-link { cursor: pointer; }
.pis-transfer-summary-content-link:hover { color: #2563EB; text-decoration: underline; }
/* 이체일/비고 인라인 인풋 — 평소엔 테두리가 안 보이는 투명 입력, 포커스 시에만
   은은한 하이라이트를 준다(다른 매입현황 인라인 입력들과 동일한 원칙). */
.pis-transfer-summary-date-input,
.pis-transfer-summary-note-input {
  width: 100%; height: var(--table-inline-ctrl-height); box-sizing: border-box;
  border: 1px solid transparent; background: transparent; padding: 2px 4px;
  font-size: var(--table-inline-ctrl-font-size); color: var(--text-primary); border-radius: 4px; line-height: 1.2;
  font-family: inherit;
}
.pis-transfer-summary-date-input:hover,
.pis-transfer-summary-note-input:hover { border-color: var(--border-light); }
.pis-transfer-summary-date-input:focus,
.pis-transfer-summary-note-input:focus { border-color: var(--accent); background: #fff; outline: none; }
.pis-transfer-summary-date-input[readonly] { color: var(--text-muted); cursor: default; background: transparent; }
.pis-transfer-summary-date-input[readonly]:hover { border-color: transparent; }

.pis-header-actions { display: flex; align-items: center; gap: 8px; }
.pis-header-actions .btn { font-weight: 600; }
.pis-header-actions .btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); font-weight: 500; }
.pis-header-actions .btn-outline:hover { background: #f4f5f7; border-color: var(--border-light); color: var(--text-primary); }

/* 엑셀 일괄 등록 모달 */
.pis-bulk-toprow { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.pis-dropzone {
  border: 2px dashed var(--border-light);
  border-radius: 10px;
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 14px;
}
.pis-dropzone i { font-size: 2rem; color: var(--text-muted); margin-bottom: 8px; display: block; }
.pis-dropzone p { font-size: .85rem; margin: 0; }
.pis-dropzone:hover, .pis-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.pis-dropzone:hover i, .pis-dropzone.is-dragover i { color: var(--accent); }
.pis-dropzone-filename { display: block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--text-primary); }

.pis-preview-summary { display: flex; gap: 8px; margin-bottom: 10px; }
.pis-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pis-badge b { font-size: .85rem; }
.pis-badge-ok  { background: rgba(34,197,94,.12); color: #16a34a; }
.pis-badge-err { background: rgba(239,68,68,.12); color: #dc2626; }

/* 2026-09: 발급일자 일괄 보정 모달 */
.pis-backfill-desc { font-size: .82rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 14px; }
.pis-backfill-result { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pis-backfill-stat { font-size: .85rem; color: var(--text-primary); }
.pis-backfill-stat b { font-weight: 700; }
.pis-backfill-stat-ok { color: #16a34a; }
.pis-backfill-stat-warn { color: #d97706; }

.pis-preview-wrap { max-height: 360px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 8px; }
.pis-preview-wrap table { width: 100%; border-collapse: collapse; }
.pis-preview-wrap thead th {
  position: sticky; top: 0; z-index: 1;
  background: #f8f9fb; font-size: .75rem; color: var(--text-muted);
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-light);
}
.pis-preview-wrap tbody td { padding: 7px 10px; font-size: .8rem; border-bottom: 1px solid #f0f1f4; white-space: nowrap; }
.pis-preview-row-error td { background: rgba(239,68,68,.07); }
.pis-preview-row-error td:first-child { box-shadow: inset 3px 0 0 0 var(--danger); }
.pis-preview-error-msg { color: #dc2626; font-size: .72rem; display: block; margin-top: 2px; }
.pis-preview-ok-icon { color: #16a34a; }
.pis-preview-err-icon { color: #dc2626; }
/* 경고행(협력사 DB 미등록 등) — 오류처럼 막지는 않지만 눈에 띄게 다른 색으로 표시 */
.pis-preview-row-warn td { background: rgba(245,158,11,.08); }
.pis-preview-row-warn td:first-child { box-shadow: inset 3px 0 0 0 #f59e0b; }
.pis-preview-warn-msg { color: #b45309; font-size: .72rem; display: block; margin-top: 2px; }
.pis-preview-warn-icon { color: #f59e0b; }

/* 직접 등록 모달 */
.pis-vat-toggle { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-muted); font-weight: 400; margin-top: 5px; }
.pis-vat-toggle input { margin: 0; }

/* 매입현황 목록 */
#pis-table td.pis-col-source { font-size: .76rem; color: var(--text-muted); }
.pis-source-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.pis-source-badge.excel { background: rgba(22,163,74,.12); color: #16a34a; }
.pis-source-badge.manual { background: rgba(25,118,210,.1); color: var(--accent); }

/* 버튼/드롭존 상태 피드백 */
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.pis-dropzone.is-loading { opacity: .6; pointer-events: none; }

/* ── 매입현황 목록: 19컬럼 고밀도 엔터프라이즈 그리드(2026-09) ───────────────────
   가로 스크롤이 생기는 넓은 표라 makeResizableTable이 각 th에 준 고정 width를
   그대로 존중하고(overflow-x:auto), 결제여부 칼럼 하나만 좌측에 sticky 고정한다. */
/* 2026-09(뷰포트 고정 전면 개편): 세로 스크롤이 실제로 표 내부에서만 일어나도록
   (=페이지 전체가 아니라 이 표만 스크롤) 예전에는 max-height:calc(100vh-280px)
   매직넘버로 높이를 근사했으나, 상단 헤더/툴바 높이가 바뀔 때마다 어긋나는
   문제가 있어 #pis-list-view의 flex:1 체인에 그대로 참여하도록 flex:1;
   min-height:0으로 교체한다. 가상 스크롤 컨트롤러(createVirtualTableBody,
   core.js)는 이 wrap의 런타임 clientHeight/scroll 이벤트로 동작하므로 CSS가
   px 대신 flex로 계산된 높이를 줘도 동일하게 동작한다. 엑셀 시트처럼 항상
   눈에 띄는 스크롤바를 위해 트랙/썸 색상도 전역 기본값과 별도로 지정한다. */
.pis-grid-scroll {
  overflow-x: auto; overflow-y: auto;
  flex: 1; min-height: 0;
  scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9; /* Firefox */
}
.pis-grid-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.pis-grid-scroll::-webkit-scrollbar-track { background: #F1F5F9; }
.pis-grid-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; border: 2px solid #F1F5F9; }
.pis-grid-scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.pis-grid-scroll::-webkit-scrollbar-corner { background: #F1F5F9; }
.pis-grid-table { table-layout: fixed; }
.pis-grid-table th, .pis-grid-table td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  height: var(--table-row-height); line-height: 1.2; box-sizing: border-box; vertical-align: middle;
}
.pis-grid-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #3B4861; color: #ffffff; font-weight: 700; font-size: var(--table-font-size);
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-right: 1px solid rgba(255,255,255,.12); border-bottom: none;
  white-space: normal;
}
.pis-grid-table thead th:last-child { border-right: none; }
.pis-grid-table tbody td { font-size: var(--table-font-size); color: var(--text-primary); border-color: #EDF0F5; }
.pis-grid-table tbody tr td { background: #ffffff; }
.pis-grid-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); }
.pis-grid-table tbody tr:hover td { background: #EDF2F7; }
.pis-grid-table td.pis-col-money, .pis-grid-table td.pis-col-right { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 2026-09: 매입 목록의 관리(수정/삭제) 버튼은 26px 행 안에 들어가도록 다른
   매입관리 표(발주서/계약서, 30px+ 행)의 .po-row-edit/.po-row-del보다 한 단계
   더 작게 오버라이드한다(이 표에서만 — 다른 표 크기에는 영향 없음). */
.pis-grid-table .po-row-edit, .pis-grid-table .po-row-del { padding: 2px 6px; font-size: 11px; line-height: 1.2; }

/* 정렬 규칙 */
.pis-col-center { text-align: center; }
.pis-col-left   { text-align: left; }
/* 2026-09: 거래은행/통장번호 — 협력사 매칭이 안 된 빈 값은 연회색 대시로
   시각적 노이즈를 줄이고, 통장번호는 고정폭 폰트로 자릿수를 가지런히 맞춘다. */
.pis-cell-dash { color: #94A3B8; }
.pis-col-mono { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.pis-col-right  { text-align: right; }
.pis-grid-table thead th.pis-col-center { text-align: center; }
.pis-grid-table thead th.pis-col-left   { text-align: left; }
.pis-grid-table thead th.pis-col-right  { text-align: right; }

/* 좌측 고정(sticky) — 결제여부 컬럼 */
.pis-grid-table th.pis-col-sticky, .pis-grid-table td.pis-col-sticky {
  position: sticky; left: 0; z-index: 2;
}
.pis-grid-table thead th.pis-col-sticky { z-index: 4; background: #3B4861; }
.pis-grid-table tbody td.pis-col-sticky { background: #ffffff; box-shadow: 2px 0 4px -2px rgba(0,0,0,.12); }
.pis-grid-table tbody tr:nth-child(even) td.pis-col-sticky { background: rgba(0,0,0,.02); }
.pis-grid-table tbody tr:hover td.pis-col-sticky { background: #EDF2F7; }

/* 요약 합계(tfoot) — tfoot 자체가 아니라 셀 단위로 sticky를 걸어야 스크롤 컨테이너
   하단에 안정적으로 고정된다(브라우저별 tfoot 자체 sticky 지원 편차 회피). */
#pis-tfoot td {
  position: sticky; bottom: 0; z-index: 2; background: #F1F5F9; border-top: 2px solid #CBD5E1; font-weight: 700;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  height: var(--table-row-height); line-height: 1.2; box-sizing: border-box;
}
.pis-tfoot-label { text-align: right; color: var(--text-secondary); font-size: var(--table-font-size); }
.pis-tfoot-value { color: var(--text-primary); font-size: var(--table-font-size); font-variant-numeric: tabular-nums; }

/* 상태 뱃지 */
.pis-status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pis-status-badge.paid    { background: rgba(34,197,94,.14);  color: #16a34a; }   /* 결재완료 */
.pis-status-badge.pending { background: rgba(245,158,11,.16); color: #b45309; }   /* 결재대기 */
.pis-status-badge.tax-done { background: rgba(59,130,246,.14); color: #2563eb; }  /* 세금계산서 발행 계열 */
.pis-status-badge.tax-none { background: rgba(148,163,184,.18); color: #64748b; } /* 세금계산서 미발행/공란 */

/* 2026-09(3차): 결제여부/구분 — 화살표가 글씨에 바싹 붙어 있던 것을 '신규
   프로젝트 등록' 모달의 셀렉트 박스처럼 텍스트는 좌측, 화살표는 박스 맨
   오른쪽 끝에 두는 양 끝 정렬(space-between)형 사각 박스로 바꿨다. 계정
   컬럼(.pis-account-select)은 좌측 정렬 텍스트형 그대로 유지하고, 이 박스형
   스타일은 결제여부/구분(.pis-inline-select)에만 적용한다.
   select 자체에 background-image로 화살표를 그리면 일부 환경에서 브라우저
   네이티브 화살표와 겹쳐 거대한 역삼각형이 이중 렌더링되는 버그가 있었으므로
   (2026-09 1차 수정), 여전히 select에는 화살표를 그리지 않고 별도의 고정폭
   아이콘(.pis-select-chev)을 wrap 안에서 flex로 우측 끝에 배치한다. */
.pis-select-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; border-radius: 4px; max-width: 100%; transition: background-color .12s ease;
}
.pis-select-wrap:hover { background-color: rgba(0, 0, 0, 0.04); }
.pis-select-wrap:has(select:focus) { outline: 2px solid var(--accent); outline-offset: 1px; }
.pis-inline-select,
.pis-account-select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  border: none; border-radius: 4px; background: transparent; background-image: none;
  font-size: var(--table-font-size); font-weight: 500; color: #1E293B;
  padding: 3px 16px 3px 4px; margin: 0; cursor: pointer; width: auto; max-width: 100%;
  outline: none;
}
.pis-inline-select::-ms-expand, .pis-account-select::-ms-expand { display: none; }
/* 계정 컬럼은 좌측 정렬 셀이라 wrap/select 모두 셀 전체 폭을 채워 텍스트가
   셀 왼쪽에 붙게 한다(결제여부/구분은 가운데 정렬 셀이라 width:auto로 충분). */
.pis-select-wrap:has(.pis-account-select) { width: 100%; justify-content: flex-start; }
.pis-account-select { width: 100%; text-align: left; }
/* 텍스트 바로 우측, 4px 간격의 고정 크기(10px) 슬림 화살표 — 아이콘 라이브러리
   기본 폰트 크기를 물려받지 않도록 폭/높이/font-size를 모두 직접 고정한다. */
.pis-select-chev {
  flex: 0 0 auto; width: 10px; height: 10px; font-size: 10px; line-height: 10px;
  color: #64748B; pointer-events: none;
}
.pis-select-wrap:hover .pis-select-chev { color: #0F172A; }

/* 결제여부/구분 전용 박스형 오버라이드 — wrap이 셀 전체 폭을 채우는 사각
   인풋 박스가 되고, 그 안에서 텍스트는 좌측, 화살표는 우측 끝에 space-between
   으로 벌어진다. select 자체를 wrap 전체 폭(화살표 아래까지)에 깔아 두고
   화살표는 pointer-events:none 절대배치로 얹어서, 박스 안 어디를 클릭해도
   (화살표 위 포함) select 클릭 영역에 그대로 잡히도록 한다. */
/* 2026-09: 행 높이가 26px로 고정되면서, 셀 안의 박스형 셀렉트도 상하 여백을
   감안한 20px(--table-inline-ctrl-height)를 넘지 않도록 맞췄다 — 이 박스가
   행보다 커지면 행 자체가 늘어나 버리기 때문에 반드시 지켜야 하는 제약이다. */
.pis-select-wrap:has(.pis-inline-select) {
  width: 100%; justify-content: flex-start;
  height: var(--table-inline-ctrl-height); box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 5px;
  padding: 0; gap: 0;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.pis-select-wrap:has(.pis-inline-select):hover { background-color: #FFFFFF; border-color: #94A3B8; }
.pis-select-wrap:has(.pis-inline-select):has(select:focus) {
  outline: none; border-color: #3B82F6; box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.pis-select-wrap:has(.pis-inline-select) .pis-inline-select {
  width: 100%; height: 100%; box-sizing: border-box; text-align: left;
  padding: 0 18px 0 6px; font-size: var(--table-inline-ctrl-font-size); font-weight: 400; color: #1E293B;
}
.pis-select-wrap:has(.pis-inline-select) .pis-select-chev {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: var(--table-inline-icon-size); height: var(--table-inline-icon-size);
  font-size: var(--table-inline-icon-size); line-height: var(--table-inline-icon-size); color: #64748B;
}
.pis-select-wrap:has(.pis-inline-select):hover .pis-select-chev { color: #475569; }

/* 2026-09: 결제여부/구분 — 드롭다운 대신 클릭 한 번으로 전환되는 토글 버튼.
   26px 행높이/9pt 컴팩트 그리드 규격을 넘지 않도록 버튼 자체 높이는
   20~22px, 셀 패딩은 세로 2px/가로 4~6px로 제한한다. */
.pis-col-toggle-th { width: 80px; white-space: nowrap; }
.pis-payment-toggle,
.pis-category-toggle {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 76px; height: 21px; box-sizing: border-box;
  padding: 2px 6px; margin: 0; border-radius: 4px; cursor: pointer;
  font-size: var(--table-inline-ctrl-font-size, 11.5px); font-weight: 600; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .12s ease, box-shadow .12s ease;
}
.pis-payment-toggle:hover,
.pis-category-toggle:hover { filter: brightness(0.97); }
.pis-payment-toggle:focus-visible,
.pis-category-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 결재대기 = 주황/앰버 */
.pis-payment-toggle.pending {
  color: #D97706; background: #FEF3C7; border: 1px solid #FDE68A;
}
/* 결재완료 = 초록/에메랄드 */
.pis-payment-toggle.paid {
  color: #16A34A; background: #DCFCE7; border: 1px solid #BBF7D0;
}
/* 구분(정기결재/긴급결재)은 차분한 중립 톤 + 긴급결재만 붉은 포인트 */
.pis-category-toggle.normal {
  color: #475569; background: #F1F5F9; border: 1px solid #E2E8F0;
}
.pis-category-toggle.urgent {
  color: #DC2626; background: #FEE2E2; border: 1px solid #FECACA;
}

/* 결재완료→결재대기 되돌림 확인 모달 */
.pis-confirm-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.pis-confirm-box {
  width: 340px; max-width: 90vw; background: #FFFFFF; border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,.22); padding: 22px 20px 16px;
}
.pis-confirm-msg { font-size: 14px; font-weight: 700; color: #1E293B; text-align: center; margin-bottom: 18px; }
.pis-confirm-actions { display: flex; justify-content: center; gap: 10px; }
.pis-confirm-yes,
.pis-confirm-no {
  border-radius: 6px; cursor: pointer; transition: filter .12s ease, background-color .12s ease;
}
.pis-confirm-yes {
  padding: 6px 16px; font-size: 13px; font-weight: 700;
  color: #FFFFFF; background: #D97706; border: 1px solid #D97706;
}
.pis-confirm-yes:hover { filter: brightness(0.94); }
.pis-confirm-no {
  padding: 6px 16px; font-size: 13px; font-weight: 500;
  color: #475569; background: #FFFFFF; border: 1px solid #CBD5E1;
}
.pis-confirm-no:hover { background: #F1F5F9; }

/* 파일첨부 */
/* 2026-09: 26px 컴팩트 행 규격에 맞춰 아이콘 버튼도 20px 내부 컨트롤 높이를
   넘지 않도록 패딩/폰트를 줄였다(11px 아이콘 + 3px 패딩 상하 = 17px). */
.pis-attach-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 11px; padding: 3px; border-radius: 4px; position: relative; line-height: 1; }
.pis-attach-btn:hover { color: var(--accent); background: var(--accent-dim); }
.pis-attach-btn.has-files { color: var(--accent); }
.pis-attach-count { font-size: 10px; font-weight: 700; margin-left: 2px; vertical-align: super; }
.pis-attach-popover {
  position: fixed; z-index: 2000; background: #fff; border: 1px solid var(--border-light);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; min-width: 220px;
  display: none;
}
.pis-attach-popover-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; }
.pis-attach-popover-item:hover { background: #f4f5f7; }
.pis-attach-popover-item a { color: var(--text-primary); text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pis-attach-popover-empty { padding: 8px; font-size: 12px; color: var(--text-muted); text-align: center; }
.pis-attach-popover-upload { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--border-light); margin-top: 4px; cursor: pointer; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.pis-attach-popover-upload:hover { background: var(--accent-dim); }
/* 2026-09: 상단 우측 액션(삭제/수정견적/수주확정/취소/저장)을 사각 색상 버튼에서
   미니멀 언더라인 텍스트 메뉴로 개편. 다섯 개 모두 클릭 즉시 실행되는 원샷
   액션(확인모달/저장 API/페이지 이동)이라 탭처럼 "계속 켜져 있는 활성 상태"는
   없다 — 평소엔 회색 텍스트, 호버·클릭 순간에만 굵게+밑줄로 피드백을 준다. */
.iq-menu-btn {
  display: inline-flex; align-items: center;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 0 10px; margin: 0;
  font-family: var(--font); font-size: 13.5px; font-weight: 500; color: #64748b;
  cursor: pointer; line-height: 1; white-space: nowrap;
  transition: color .15s ease-in-out, border-color .15s ease-in-out, font-weight .15s ease-in-out;
}
/* 2026-09: 호버 시 글자색 진하게 + 하단 2px 밑줄(테두리 색만 바뀌므로 레이아웃
   흔들림 없음)을 함께 표시 — 기본 상태에서 이미 investisble한 2px 투명 보더를
   깔아뒀기 때문에(위 border-bottom) 호버 때 색만 바뀌어도 높이 변화가 없다. */
.iq-menu-btn:hover, .iq-menu-btn:focus-visible {
  color: #0f172a; font-weight: 600; border-bottom-color: #0f172a;
}
.iq-menu-btn:active,
.iq-menu-btn.iq-menu-flash {
  color: #0f172a; font-weight: 700; border-bottom-color: #0f172a;
}
/* 파괴적 액션(삭제) 전용 — 호버 시 로즈 계열로 색상만 다르게 */
.iq-menu-btn.iq-menu-btn-danger:hover,
.iq-menu-btn.iq-menu-btn-danger:focus-visible {
  color: #e11d48; font-weight: 600; border-bottom-color: #e11d48;
}
.iq-menu-btn.iq-menu-btn-danger:active,
.iq-menu-btn.iq-menu-btn-danger.iq-menu-flash {
  color: #e11d48; font-weight: 700; border-bottom-color: #e11d48;
}
.iq-detail-body {
  background: var(--product-surface); border: 1px solid var(--product-border);
  border-radius: var(--radius-lg); padding: 24px; width: 100%;
}
/* 2026-09: 필드 자체는 4열로 슬림해진 대신, 필드 사이 간격은 기존(14px)의 약
   2배로 넉넉하게 벌려 답답해 보이지 않게 한다 — 이 폼(.iq-detail-body) 안에서만
   적용하고, 같은 .form-row-3/.form-row-4 클래스를 쓰는 다른 모달(신규 프로젝트
   등록 등)에는 영향을 주지 않는다. */
.iq-detail-body .form-row,
.iq-detail-body .form-row-3,
.iq-detail-body .form-row-4 { gap: 28px; }
.iq-detail-body .form-group { margin-bottom: 22px; }

/* ============================================================
   인콰리·견적 상세(#iq-detail-page) — 2026-09: 상단 폼 슬림화 + 좌우 2분할.
   실제 값 길이 기준 고정폭(.iqw-*)으로 필드를 압축하고, 세로 한 줄을 독점하던
   "내용" textarea를 좌측 메타 필드 블록 우측으로 옮겨 상단 전체 높이를 줄인다.
   그렇게 확보된 공간은 최하단 탭 영역(.iq-tab-panel.active)에 flex:1로 넘긴다.
   ============================================================ */
#iq-detail-page { flex: 1; min-height: 0; overflow: hidden; }
#iq-detail-page .iq-detail-header { flex-shrink: 0; }
#iq-detail-page .iq-detail-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
}
#iq-detail-page .iq-top-split,
#iq-detail-page .iq-inline-actions,
#iq-detail-page .iq-section-divider,
#iq-detail-page > .iq-detail-body > .iq-compact-row,
#iq-detail-page .iq-tabs { flex-shrink: 0; }
#iq-detail-page .iq-tab-panel.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* 좌(메타 필드, ~42%) / 우(내용 textarea, ~58%) 2분할. align-items:stretch로
   좌측 필드 스택과 우측 textarea의 상하 정렬선을 맞춘다. */
#iq-detail-page .iq-top-split {
  display: grid; grid-template-columns: minmax(420px, 1fr) minmax(450px, 1.2fr);
  gap: 24px; align-items: stretch; margin-bottom: 18px;
}
#iq-detail-page .iq-top-meta { display: flex; flex-direction: column; gap: 16px; }
#iq-detail-page .iq-compact-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 24px; margin-bottom: 0;
}
#iq-detail-page .iq-compact-row .form-group,
#iq-detail-page .iq-top-meta .form-group {
  margin-bottom: 0; min-width: 0; flex-shrink: 0; display: flex; flex-direction: column;
}
#iq-detail-page .iq-top-content { display: flex; flex-direction: column; min-height: 0; }
#iq-detail-page .iq-content-group { flex: 1; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; }
#iq-detail-page .iq-content-group textarea {
  flex: 1; width: 100%; height: 100%; min-height: 140px; resize: none;
  border: 1px solid var(--product-border) !important; border-radius: var(--radius-sm);
  padding: 12px !important; font-size: 13px; line-height: 1.65; box-sizing: border-box;
}
#iq-detail-page .iq-content-group textarea:focus {
  border-color: var(--product-accent) !important; box-shadow: 0 0 0 1px var(--product-accent);
}
/* 실제 값 길이 기준 필드별 고정폭 — 날짜/인명처럼 짧은 값은 슬림하게, 고객사명·
   견적번호·금액 안내문구처럼 긴 값은 잘리지 않게 넉넉히 확보한다. */
#iq-detail-page .form-group.iqw-full { width: 100%; flex: 1 1 100%; }
#iq-detail-page .form-group.iqw-130 { width: 130px; min-width: 130px; max-width: 130px; }
#iq-detail-page .form-group.iqw-140 { width: 140px; min-width: 140px; max-width: 140px; }
#iq-detail-page .form-group.iqw-190 { width: 190px; min-width: 190px; max-width: 190px; }
#iq-detail-page .form-group.iqw-200 { width: 200px; min-width: 200px; max-width: 200px; }
#iq-detail-page .form-group.iqw-220 { width: 220px; min-width: 220px; max-width: 220px; }

/* 2026-09: 고객명/부서명/고객담당(3열), 접수일시/접수경로/영업담당/인콰리유형(4열)을
   각각 균등폭 그리드로 정렬 — .iqw-* 고정폭 대신 이 두 행에서만 적용된다. */
#iq-detail-page .iq-meta-row3,
#iq-detail-page .iq-meta-row4 {
  display: grid; gap: 20px 24px; align-items: end; width: 100%;
}
#iq-detail-page .iq-meta-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#iq-detail-page .iq-meta-row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#iq-detail-page .iq-meta-row3 .form-group,
#iq-detail-page .iq-meta-row4 .form-group { width: auto; min-width: 0; max-width: none; }

/* 견적/계약 정보 — 요청사양대로 4열 그리드에 8칸(2행)을 배치한다. */
#iq-detail-page .iq-quote-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 20px; width: 100%; margin-bottom: 20px; flex-shrink: 0;
}
#iq-detail-page .iq-quote-grid .form-group {
  margin-bottom: 0; min-width: 0; width: auto; max-width: none;
  display: flex; flex-direction: column;
}
/* 결재조건 + 특기사항을 한 칸(4열 2행) 안에서 위아래로 쌓아, 좁은 열 폭에서도
   서로 겹치거나 다음 행으로 밀려나지 않게 한다. */
#iq-detail-page .iq-payment-cell { gap: 10px; }
#iq-detail-page .iq-payment-field { display: flex; flex-direction: column; gap: 4px; }
#iq-detail-page .iq-payment-field label { margin: 0; }
#iq-detail-page #iq-payment-custom-term { margin-top: 6px; }

@media (max-width: 1300px) {
  #iq-detail-page .iq-top-split { grid-template-columns: 1fr; }
  #iq-detail-page .iq-content-group textarea { min-height: 120px; }
}
@media (max-width: 1100px) {
  #iq-detail-page .iq-meta-row4,
  #iq-detail-page .iq-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #iq-detail-page .iq-meta-row3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .iq-detail-header { flex-direction: column; align-items: stretch; }
  .iq-detail-header-actions { justify-content: flex-end; }
}
/* 신규 프로젝트/인콰리 등록 폼 — 입력칸을 박스(테두리+배경)가 아니라 밑줄만
   있는 텍스트형으로. 평소엔 글씨만 보이다가 클릭(포커스)하면 밑줄이 강조된다.
   인콰리 쪽은 2026-09에 모달(#modal-inquiry)에서 풀페이지(.iq-detail-body)로
   바뀌었지만 이 밑줄 스타일 자체는 그대로 유지한다. */
#modal-project .modal-body input[type="text"],
#modal-project .modal-body input[type="date"],
#modal-project .modal-body input[type="number"],
#modal-project .modal-body select,
#modal-project .modal-body textarea,
.iq-detail-body input[type="text"],
.iq-detail-body input[type="date"],
.iq-detail-body input[type="number"],
.iq-detail-body select,
.iq-detail-body textarea {
  background: none; border: none; border-bottom: 1px solid var(--product-border);
  border-radius: 0; padding: 8px 2px;
}
#modal-project .modal-body input:focus,
#modal-project .modal-body select:focus,
#modal-project .modal-body textarea:focus,
.iq-detail-body input:focus,
.iq-detail-body select:focus,
.iq-detail-body textarea:focus {
  border-bottom-color: var(--product-accent); box-shadow: none;
}
#modal-project .modal-body input:disabled,
#modal-project .modal-body select:disabled,
.iq-detail-body input:disabled,
.iq-detail-body select:disabled { background: none; }

/* ============================================================
   발주서 상세(#po-detail-page) — 상단 폼 컴팩트화 + 품목표 내부스크롤
   (2026-09) — 같은 .iq-detail-body/.form-group 클래스를 쓰는 인콰리 상세
   (#iq-detail-page)에는 영향이 없도록 전부 #po-detail-page로 스코프한다.
   ============================================================ */
/* 헤더(뒤로가기·액션버튼)는 그대로 두고, 본문(.iq-detail-body)만 뷰포트
   높이에 맞춰 고정한 뒤 컴팩트 폼(고정) + 품목표(내부 스크롤) + 합계바
   (고정) 3단 구조로 나눈다 — 품목이 몇 개든 페이지 자체는 늘어나지 않는다. */
#po-detail-page { flex: 1; min-height: 0; overflow: hidden; }
#po-detail-page .iq-detail-header { flex-shrink: 0; }
#po-detail-page .iq-detail-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  overflow: hidden; padding: 18px 22px;
}
#po-detail-page .po-compact-form,
#po-detail-page .po-items-head,
#po-detail-page .po-detail-summary-bar { flex-shrink: 0; }

/* 상단 기본정보 폼 — 2026-09: 그리드(3행) → flex(2행) 재편. 필드마다 실제
   데이터 길이 기준 고정폭(.pg-w* 유틸)을 주고 늘어나지 않게 고정한 뒤
   (flex-shrink:0), 간격을 기존(10px/16px) 대비 약 2배(30px/44px)로 넓혀
   각 항목이 독립된 카드처럼 또렷이 구분되게 했다. 밑선(입력칸 하단)이
   전부 한 줄에 맞도록 align-items:flex-end를 유지한다. */
#po-detail-page .po-compact-form { display: flex; flex-direction: column; gap: 28px; margin-bottom: 14px; }
#po-detail-page .po-compact-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 30px 44px;
}
#po-detail-page .po-compact-row .form-group {
  margin-bottom: 0; min-width: 0; flex-shrink: 0; display: flex; flex-direction: column;
}
#po-detail-page .po-compact-row .form-group label {
  font-size: 12px; margin-bottom: 4px; color: var(--text-muted, #8590a0); font-weight: 600;
}
#po-detail-page .po-compact-row .form-group input,
#po-detail-page .po-compact-row .form-group select {
  font-size: 13px; padding: 5px 0; height: 30px; box-sizing: border-box; width: 100%;
  background: transparent; border: none; border-bottom: 1px solid var(--product-border, var(--border));
  border-radius: 0;
}
#po-detail-page .po-compact-row .form-group input:focus,
#po-detail-page .po-compact-row .form-group select:focus {
  border-bottom-color: var(--product-accent, var(--accent)); box-shadow: none; outline: none;
}
#po-detail-page .po-compact-row .form-group textarea {
  font-size: 13px; padding: 5px 0; height: 30px; box-sizing: border-box; width: 100%;
  resize: none; line-height: 1.3; overflow-y: auto;
  background: transparent; border: none; border-bottom: 1px solid var(--product-border, var(--border));
  border-radius: 0;
}
#po-detail-page .po-compact-row .form-group textarea:focus {
  border-bottom-color: var(--product-accent, var(--accent)); box-shadow: none; outline: none;
}
#po-detail-page .po-compact-row .form-group select {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 실제 입력 데이터 길이 기준 필드별 고정폭 — 짧은 값(날짜/상태/인명)은 슬림하게,
   상호명·주소·서술형처럼 긴 값은 넉넉하게. width/min/max를 모두 고정해 flex가
   임의로 늘리거나 줄이지 않게 한다(줄어든 폭만큼 다음 필드가 같은 행으로 올라와
   전체 행 수가 2개로 압축된다). */
#po-detail-page .form-group.pg-w110 { width: 110px; min-width: 110px; max-width: 110px; }
#po-detail-page .form-group.pg-w120 { width: 120px; min-width: 120px; max-width: 120px; }
#po-detail-page .form-group.pg-w130 { width: 130px; min-width: 130px; max-width: 130px; }
#po-detail-page .form-group.pg-w140 { width: 140px; min-width: 140px; max-width: 140px; }
#po-detail-page .form-group.pg-w150 { width: 150px; min-width: 150px; max-width: 150px; }
#po-detail-page .form-group.pg-w160 { width: 160px; min-width: 160px; max-width: 160px; }
#po-detail-page .form-group.pg-w170 { width: 170px; min-width: 170px; max-width: 170px; }
#po-detail-page .form-group.pg-w180 { width: 180px; min-width: 180px; max-width: 180px; }
#po-detail-page .form-group.pg-w260 { width: 260px; min-width: 260px; max-width: 260px; }
#po-detail-page .form-group.pg-w280 { width: 280px; min-width: 280px; max-width: 280px; }
@media (max-width: 1400px) {
  /* 화면이 좁아지면 고정폭을 유지한 채 flex-wrap으로 자연스럽게 다음 줄로
     넘어가게 둔다(요청사항: 좁은 환경에서는 줄바꿈 허용). */
  #po-detail-page .form-group.pg-w260,
  #po-detail-page .form-group.pg-w280 { width: 240px; min-width: 240px; max-width: 240px; }
}

/* 품목 테이블 — 압축으로 확보된 세로 공간을 전부 이 표에 할당하고, 표
   헤더/합계바는 고정한 채 데이터 행 영역(.po-items-wrap)만 내부 스크롤되게
   한다. thead를 position:sticky로 표 안에 붙박아 두면 스크롤 중에도 컬럼
   헤더가 항상 보인다. */
#po-detail-page .po-items-wrap {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  margin-bottom: 14px;
}
#po-detail-page .po-items-table thead th { position: sticky; top: 0; z-index: 1; }
#po-detail-page .po-items-wrap::-webkit-scrollbar { width: 7px; }
#po-detail-page .po-items-wrap::-webkit-scrollbar-thumb { background: #c7ccd4; border-radius: 4px; }
#po-detail-page .po-items-wrap::-webkit-scrollbar-track { background: transparent; }

/* 업무일지 상세(구글캘린더 스타일) — 프로젝트 연결/태스크 선택/담당자/근무형태
   모두 박스 없이 밑줄만 있는 형태로, 네 칸 모두 동일한 높이/여백을 써서
   밑줄 위치가 서로 어긋나지 않도록 맞춘다. */
#modal-journal .proj-combo-trigger,
#modal-journal .ms-dropdown-btn,
#modal-journal select#journal-inp-worktype,
#modal-journal select#journal-inp-task,
#modal-journal select#journal-inp-vendor {
  background: none; border: none; border-bottom: 1px solid var(--border);
  border-radius: 0; box-sizing: border-box; height: 34px;
  padding: 0 2px; font-size: 13px; line-height: 32px;
}
#modal-journal .proj-combo-trigger:hover,
#modal-journal .ms-dropdown-btn:hover,
#modal-journal .ms-dropdown.open .ms-dropdown-btn,
#modal-journal select#journal-inp-worktype:hover,
#modal-journal select#journal-inp-task:hover,
#modal-journal select#journal-inp-vendor:hover {
  border-color: var(--border); border-bottom-color: var(--accent);
}
#modal-journal select#journal-inp-worktype:focus,
#modal-journal select#journal-inp-task:focus,
#modal-journal select#journal-inp-vendor:focus {
  outline: none; border-bottom-color: var(--accent); box-shadow: none;
}
#modal-journal select#journal-inp-task:disabled {
  color: var(--text-muted); cursor: not-allowed; border-bottom-color: var(--border);
}
.empty-state { padding: 44px 22px; }
.empty-state i { color: #aeb7c4; font-size: 2rem; }
.empty-state p { color: #7d8796; font-size: 12.5px; }

@media (max-width: 1100px) {
  .lf-header-with-toolbar { align-items: flex-start; }
  .lf-header-right { width: 100%; justify-content: space-between; }
  .lf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lf-grid .lf-cell:nth-child(4n) { border-right: 1px solid var(--product-border); }
  .lf-grid .lf-cell:nth-child(2n) { border-right: 0; }
  #purchasing-section .lf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #purchasing-section .lf-cell.span2 { grid-column: span 2; }
}

@media (max-width: 768px) {
  #app-layout { padding-top: 0; }
  #left-nav { width: 100%; padding: 0; gap: 0; }
  #app-main,
  #app-main:has(#tab-projects:not([style*="none"])),
  #app-main:has(#tab-inquiry:not([style*="none"])),
  #app-main:has(#tab-payments:not([style*="none"])),
  #app-main:has(#tab-ai:not([style*="none"])),
  #app-main:has(#tab-shopmaster:not([style*="none"])) { padding: 12px; }
  .workspace-title p,
  .workspace-page-header p,
  .lf-hint { display: none; }
  .workspace-page-header { min-height: 50px; }
  .workspace-page-header h1 { font-size: 19px; }
  .section-header,
  .settings-header,
  .journal-header,
  .ai-page-header,
  .sm-header { min-height: 54px; padding: 9px 12px; }
  .lf-header-right { justify-content: flex-end; }
  .lf-toolbar-inline { width: 100%; }
  .lf-toolbar-inline .lf-tb-item { flex: 1; justify-content: center; padding: 0 6px; }
  .lf-grid { grid-template-columns: 1fr; }
  .lf-cell,
  .lf-grid .lf-cell:nth-child(2n),
  .lf-grid .lf-cell:nth-child(4n) { border-right: 0; }
  .lf-cell.span2 { grid-column: span 1; }
  #purchasing-section .lf-grid { grid-template-columns: 1fr; }
  #purchasing-section .lf-cell.span2 { grid-column: span 1; }
  .board-filters { width: 100%; flex-wrap: wrap; }
  .board-filters select { flex: 1; min-width: 0; }
  #payments-summary-cards { grid-template-columns: 1fr; }
  #tab-ai .ai-chat-messages { padding: 12px; }
  #tab-ai .ai-msg-bubble { max-width: 92%; }
  .ai-chat-title small { display: none; }
  .jcal-toolbar { height: auto; min-height: 54px; padding: 9px 12px; flex-wrap: wrap; row-gap: 8px; }
  .jcal-left, .jcal-right { width: 100%; justify-content: space-between; }
  .jcal-title { display: none; } /* 좁은 화면에서는 버튼/날짜 공간을 우선 확보 */
  .jcal-search-filter .journal-search-wrap:not(.collapsed) { width: 100%; }
  .jcal-view-toggle .jvt-btn { flex: 1; }
  .sm-layout { flex-direction: column; overflow-y: auto; }
  .sm-list-panel { width: 100% !important; min-height: 190px; max-height: 260px; border-right: 0; border-bottom: 1px solid var(--product-border); }
  .sm-list-resizer { display: none; }
  .settings-inner-tabs { margin-bottom: 10px; }
  .md-field-grid,
  .md-field-grid.cols-3 { grid-template-columns: 1fr; }
  .md-field.span-2,
  .md-field.span-3 { grid-column: span 1; }
  .modal-box { border-radius: 10px 10px 0 0; }
}

/* =============================================
   매입관리 (발주건/계약건) — 2026-08
   ============================================= */
.po-vendor-readout {
  background: var(--bg-soft, #f6f8fb);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 14px;
  margin: -6px 0 16px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.po-vendor-readout b { color: var(--text-primary); font-weight: 600; margin-right: 4px; }
.po-vendor-readout span { margin-right: 16px; display: inline-block; }

.po-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 10px;
}
.po-items-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }

.po-items-wrap {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.po-items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.po-items-table th {
  background: #1e293b;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  padding: 8px 8px;
  border-bottom: 1px solid #1e293b;
  text-align: left;
  white-space: nowrap;
}
.po-items-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-lighter, #eef1f5);
  vertical-align: middle;
}
.po-items-table tbody tr:last-child td { border-bottom: none; }
.po-items-table input,
.po-items-table select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 6px;
  border-radius: 4px;
  font-size: 13px;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.po-items-table input[data-f="qty"],
.po-items-table input[data-f="unit_price"],
.po-items-table input[data-f="amount"] { text-align: right; font-variant-numeric: tabular-nums; }
.po-items-table input[data-f="category"],
.po-items-table input[data-f="detail"] { width: 80%; }
.po-items-table input:focus,
.po-items-table select:focus { border-color: var(--accent); background: #fff; outline: none; }
.po-items-table input[disabled] { color: var(--text-secondary); }
.po-items-table .po-item-no { text-align: center; color: var(--text-secondary); font-size: 12px; }
.po-items-table .po-item-del {
  border: 0; background: none; color: var(--text-secondary); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px;
}
.po-items-table .po-item-del:hover { color: var(--danger, #e5484d); }

/* 2026-09: 발주서 상세를 모달→풀페이지로 전환하면서 합계를 표 tfoot 대신 하단
   요약 바로 뺐다 — 발주금액(합계)/VAT포함 금액을 우측 정렬로 크게 보여준다. */
.po-detail-summary-bar {
  display: flex; justify-content: flex-end; gap: 28px;
  padding: 12px 16px; background: var(--bg-soft, #f6f8fb);
  border: 1px solid var(--border-light); border-radius: 8px; margin-bottom: 16px;
}
.po-detail-summary-item { display: flex; align-items: center; gap: 10px; }
.po-detail-summary-item span { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.po-detail-summary-item input {
  width: 150px; text-align: right; font-weight: 700; font-size: 14px;
  border: 1px solid var(--border-light); border-radius: 6px; padding: 7px 10px;
  background: #fff; color: var(--text-primary); font-variant-numeric: tabular-nums;
}

/* 발주서 목록 — 행 전체가 클릭 가능한 링크처럼 동작(상세 페이지 이동). 우측 끝
   삭제 버튼만 별도 이벤트로 분리되어 있다(js에서 stopPropagation 처리). */
.po-row-clickable { cursor: pointer; }
.po-row-clickable:hover td { background: #f9fafb; }

.ct-tranche-sum {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin: 8px 0 10px;
}
.ct-tranche-sum.ok { color: var(--ok, #1c7a55); }
.ct-tranche-sum.bad { color: var(--danger, #e5484d); }
.ct-tranche-row {
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fcfcfd;
}
.ct-tranche-row-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ct-tranche-row-top .ct-tr-no {
  font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; color: #fff;
  background: var(--text-secondary); width: 20px; height: 20px; border-radius: 3px;
  display: grid; place-items: center; flex: none;
}
.ct-tranche-row-top input[data-f="pct"] { width: 60px; text-align: right; font-weight: 700; }
.ct-tranche-row-top .ct-tr-pct-label { font-size: 12px; color: var(--text-secondary); }
.ct-tranche-row-top .ct-tr-del {
  margin-left: auto; border: 0; background: none; color: var(--text-secondary);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 5px;
}
.ct-tranche-row-top .ct-tr-del:hover { color: var(--danger, #e5484d); }
.ct-tranche-row textarea {
  width: 100%; border: 1px solid var(--border-light); border-radius: 4px;
  padding: 6px 8px; font-size: 12.5px; resize: vertical; min-height: 36px; margin-top: 4px;
}
.ct-tranche-row label { font-size: 11.5px; color: var(--text-secondary); display: block; margin: 6px 0 2px; }

/* ── 인쇄용(발주서/계약서 PDF 출력) ──────────────────────────────────────────
   화면에서는 완전히 숨겨두고(#print-root { display:none }), PDF 출력 버튼을 누르면
   JS가 #print-root 안을 문서 내용으로 채운 뒤 body에 print-active 클래스를 달고
   window.print()를 호출한다. @media print에서 print-active가 걸려 있을 때만
   #print-root 외의 모든 요소를 숨겨, 브라우저의 "PDF로 저장"으로 그대로 출력물이
   된다(서버에 PDF 생성 라이브러리를 새로 추가하지 않기 위한 선택). */
#print-root { display: none; }
.po-paper {
  width: 210mm;
  margin: 0 auto;
  background: #fff;
  color: #000;
  font-family: 'Malgun Gothic', 'Pretendard', sans-serif;
  font-size: 10.5pt;
  line-height: 1.45;
}
.po-paper th, .po-paper td { color: #000; }
.po-paper .pp-page {
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  padding: 15mm 15mm 12mm;
  overflow: hidden;
  page-break-after: always;
  break-after: page;
}
.po-paper .pp-page:last-child { page-break-after: auto; }
.po-paper .pp-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.po-paper .pp-title { font-size: 20px; font-weight: 800; letter-spacing: .3em; text-align: center; flex: 1; }
.po-paper .pp-seal-boxes { display: flex; gap: 4px; }
.po-paper .pp-seal-boxes span {
  border: 1px solid #333; width: 30px; height: 20px; font-size: 9px;
  display: grid; place-items: center;
}
.po-paper .pp-meta-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 8px; }
.po-paper table.pp-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.po-paper table.pp-table th,
.po-paper table.pp-table td {
  border: 1px solid #999; padding: 5px 7px; font-size: 11px; vertical-align: middle;
}
.po-paper table.pp-table th { background: #f2f2f2; font-weight: 700; text-align: center; white-space: nowrap; }
.po-paper .pp-label-cell { background: #f7f7f7; font-weight: 700; width: 80px; text-align: center; }
.po-paper .pp-notice { font-size: 10px; line-height: 1.65; margin-top: 10px; color: #333; }
.po-paper .pp-notice p { margin: 0 0 2px; }
.po-paper .pp-section-title { font-size: 13px; font-weight: 700; text-align: center; margin: 6px 0 12px; }
.po-paper .pp-total-row td { font-weight: 700; background: #fafafa; }
.po-paper .pp-sign-block { margin-top: 26px; font-size: 12px; }
.po-paper .pp-sign-block .pp-line { margin-bottom: 8px; }
.po-paper .pp-article { font-weight: 700; margin: 14px 0 4px; font-size: 12.5px; }
.po-paper .pp-pre { color: #444; margin-bottom: 10px; }
.po-paper .pp-date-line { text-align: right; margin: 20px 0 6px; font-weight: 600; }
.po-paper .pp-v { font-weight: 400; }

/* ── 구매발주서 표준양식(2026-08, 사용자 업로드 템플릿 반영) ───────────────── */
.po-paper .po-std-header { position: relative; margin-bottom: 3mm; min-height: 28mm; }
.po-paper .po-std-ci { position: absolute; left: 4mm; top: 6mm; width: 28mm; height: auto; }
.po-paper .po-std-title { text-align: center; font-size: 18pt; font-weight: 800; letter-spacing: .28em; padding: 10mm 50mm 0; white-space: nowrap; }
.po-paper .po-detail-page .po-std-header { display: grid; grid-template-columns: 32mm 1fr 32mm; align-items: center; }
.po-paper .po-detail-page .po-std-ci { position: static; grid-column: 1; width: 28mm; margin-left: 4mm; }
.po-paper .po-detail-page .po-std-title { grid-column: 2; padding: 0 !important; }
.po-paper table.po-std-approval { position: absolute; right: 0; top: 0; border-collapse: collapse; width: 52mm; font-size: 9pt; text-align: center; table-layout: fixed; }
.po-paper table.po-std-approval th, .po-paper table.po-std-approval td { border: .3mm solid #000; padding: 1mm; }
.po-paper table.po-std-approval th { background: #fff; font-weight: 400; height: 7mm; }
.po-paper table.po-std-approval td { height: 17mm; position: relative; }
.po-paper .po-std-approval-sign img { position: absolute; width: 22mm; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); }
.po-paper .po-std-meta { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 1.5mm; font-size: 8.5pt; font-weight: 700; }
.po-paper .po-std-meta > div:first-child { border: .6mm solid #000; min-width: 68mm; padding: 1.2mm 4mm; box-sizing: border-box; text-align: center; }
.po-paper .po-std-meta span.hl { font-weight: 400; margin-left: 6px; color: #000; }

.po-paper table.po-std-cgrid { width: 100%; border-collapse: collapse; margin-bottom: 5mm; }
.po-paper table.po-std-cgrid > tbody > tr > td { padding: 0; vertical-align: top; border: none; }
.po-paper table.po-std-cbox { border: .45mm solid #000; border-collapse: collapse; width: 100%; table-layout: fixed; }
.po-paper table.po-std-cbox th, .po-paper table.po-std-cbox td { border: .25mm solid #000; padding: 1.2mm 1.6mm; font-size: 8pt; height: 7mm; box-sizing: border-box; overflow-wrap: anywhere; }
.po-paper table.po-std-cbox th.po-std-boxtitle { background: #fff; font-size: 9pt; font-weight: 400; text-align: center; letter-spacing: .45em; padding: 1mm; border-bottom: .25mm solid #000; }
.po-paper table.po-std-cbox th.po-std-lbl { background: #fff; text-align: center; font-weight: 400; width: 18mm; }
.po-paper .po-std-signarea { position: relative; display: inline-block; }
.po-paper .po-std-stampimg { position: absolute; right: -8mm; top: -5mm; width: 14mm; height: 14mm; opacity: .88; pointer-events: none; }
.po-paper table.po-std-subrow { width: 100%; border-collapse: collapse; }
.po-paper table.po-std-subrow td { border: none; padding: .8mm 0; font-size: 8pt; height: auto; border-bottom: .2mm solid #000; }
.po-paper table.po-std-subrow tr:last-child td { border-bottom: none; }
.po-paper table.po-std-subrow td.po-std-sublbl { width: 44px; font-weight: 700; }

.po-paper table.po-std-summary { width: 100%; border-collapse: collapse; border: .6mm solid #000; margin-bottom: 1.5mm; table-layout: fixed; }
.po-paper table.po-std-summary th, .po-paper table.po-std-summary td { border: .25mm solid #000; padding: 1.2mm 2mm; font-size: 8pt; height: 7mm; box-sizing: border-box; }
.po-paper table.po-std-summary th { background: #fff; text-align: center; font-weight: 400; }
.po-paper table.po-std-summary .po-std-amt { font-size: 9pt; font-weight: 700; color: #000; text-align: right; }
.po-paper .po-std-attachment { margin: 0 0 1.5mm .5mm; font-size: 7.6pt; }

.po-paper .po-std-notice { border: 0; padding: 2mm 1mm 0; background: #fff; font-size: 7.3pt; line-height: 1.72; }
.po-paper .po-std-notice .po-std-noticetitle { font-weight: 400; font-size: 8pt; margin-bottom: 2mm; }
.po-paper .po-std-notice p { margin: 0 0 .9mm; text-indent: -5mm; padding-left: 5mm; }

.po-paper table.po-std-items { width: 100%; border-collapse: collapse; border: .45mm solid #000; margin-bottom: 3mm; table-layout: fixed; }
.po-paper table.po-std-items th, .po-paper table.po-std-items td { border: .22mm solid #000; padding: .8mm 1.2mm; font-size: 7.5pt; height: 6.2mm; box-sizing: border-box; overflow-wrap: anywhere; }
.po-paper table.po-std-items th { background: #fff; font-weight: 400; text-align: center; }
.po-paper table.po-std-items tbody tr:not(.po-std-total) td:not(:first-child) { background: #d9d9d9; }
.po-paper table.po-std-items tr.po-std-total td { background: #fff; font-weight: 700; height: 15mm; }
.po-paper table.po-std-items tr.po-std-total td:last-child { color: #000 !important; font-size: 9pt; }

.po-paper table.po-std-delivery { width: 100%; border-collapse: collapse; border: .45mm solid #000; table-layout: fixed; }
.po-paper table.po-std-delivery th, .po-paper table.po-std-delivery td { border: .22mm solid #000; padding: 1.3mm 2mm; font-size: 8pt; height: 10mm; box-sizing: border-box; }
.po-paper table.po-std-delivery th { background: #fff; font-weight: 400; text-align: center; width: 36%; }

/* 계약서 원본 DOCX의 A4 5쪽 조판 */
.contract-paper { font-family: 'Malgun Gothic', 'Gulim', sans-serif; font-size: 10.2pt; line-height: 1.82; }
.contract-paper .contract-page { padding: 12.7mm; text-align: justify; }
.contract-paper p { margin: 0 0 2.4mm; orphans: 2; widows: 2; }
.contract-paper .contract-title { margin: 0 0 10mm; font-size: 17pt; font-weight: 800; letter-spacing: .42em; text-decoration: underline; text-underline-offset: 2mm; }
.contract-paper .pp-pre { color: #000; margin-bottom: 1.5mm; }
.contract-paper .contract-below { text-align: center; letter-spacing: .4em; margin: 9mm 0 8mm; }
.contract-paper .pp-article { margin: 7mm 0 1.5mm 4mm; font-size: 10.4pt; font-weight: 800; }
.contract-paper .contract-page-2 .pp-article:first-child,
.contract-paper .contract-page-3 .pp-article:first-child,
.contract-paper .contract-page-5 .pp-article:first-child { margin-top: 3mm; }
.contract-paper .contract-list { margin: 0 0 2.5mm 4mm; }
.contract-paper .contract-list p { margin: 0 0 .5mm; padding-left: 5mm; text-indent: -5mm; }
.contract-paper .pp-date-line { text-align: right; margin: 23mm 15mm 14mm 0; font-weight: 400; }
.contract-paper .contract-signatures { width: 94mm; margin: 0 0 0 auto; font-size: 10.3pt; font-weight: 700; }
.contract-paper .contract-party { display: grid; grid-template-columns: 10mm 1fr; gap: 1mm; margin-bottom: 12mm; }
.contract-paper .contract-party p { margin: 0 0 1.5mm; }
.contract-paper .contract-party-mark { padding-top: .2mm; }
.contract-paper .contract-ceo { position: relative; display: inline-block; }
.contract-paper .contract-stamp { position: absolute; right: -4mm; top: -7mm; width: 19mm; height: 19mm; opacity: .88; pointer-events: none; }

@media print {
  html, body {
    width: 210mm !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    background: #fff !important;
  }
  body.print-active > *:not(#print-root) { display: none !important; }
  body.print-active #print-root { display: block !important; }
  body.print-active .po-paper .pp-page { page-break-after: always; break-after: page; }
  body.print-active .po-paper .pp-page:last-child { page-break-after: auto; break-after: auto; }
  @page { size: A4; margin: 0; }
}

.po-status-badge {
  display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 20px;
  padding: 2px 10px; background: var(--bg-soft, #f0f2f5); color: var(--text-secondary);
}
.po-status-badge.ok { background: #e4f4ee; color: #1c7a55; }
.po-status-badge.bad { background: #fbe9ea; color: #d13b3b; }
.po-row-actions { display: flex; align-items: center; gap: 4px; }
.po-row-del, .po-row-edit {
  border: 1px solid var(--border-light); background: #fff; border-radius: 4px;
  padding: 4px 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer;
}
.po-row-del:hover { border-color: #d13b3b; color: #d13b3b; }
.po-row-edit:hover { border-color: var(--accent); color: var(--accent); }
.hint { font-weight: 400; color: var(--text-secondary); font-size: 11.5px; margin-left: 4px; }

/* ============================================================
   문서·증명서 (#tab-documents) — 2026-09 신규
   다른 목록형 화면(기준정보/매입관리 등)과 동일하게 페이지 자체는 스크롤하지
   않고 뷰포트에 고정, 문서 목록 영역(.doc-list-scroll)만 내부 스크롤한다.
   ============================================================ */
#tab-documents { gap: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#app-main:has(#tab-documents:not([style*="none"])) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
#app-main:has(#tab-documents:not([style*="none"])) .tab-page:not(#tab-documents) { display: none !important; }
#documents-page { width: 100%; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.doc-page-header {
  flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 24px 32px 16px; flex-wrap: wrap;
}
.doc-page-title-wrap h1 { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #1e293b; }
.doc-page-tabs { display: flex; align-items: center; gap: 6px; }
.doc-page-tab {
  padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-light);
  background: #fff; font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer;
  font-family: var(--font); transition: all .12s ease;
}
.doc-page-tab:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.doc-page-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-page-tab:disabled { opacity: .45; cursor: not-allowed; }
.doc-page-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.doc-search-wrap { position: relative; }
.doc-search-wrap i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 12px; pointer-events: none;
}
.doc-search-wrap input {
  width: 230px; padding: 7px 12px 7px 30px; border: 1px solid var(--border-light);
  border-radius: 8px; font-size: 12.5px; background: #fff; color: #334155; font-family: var(--font);
}
.doc-search-wrap input:focus { border-color: var(--accent); outline: none; }

.doc-list-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px 32px 32px; }
.doc-section { margin-bottom: 26px; }
.doc-section:last-child { margin-bottom: 0; }
.doc-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.doc-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #1e293b; }
.doc-count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  height: 22px; padding: 0 7px; border-radius: 999px; background: #f1f5f9;
  color: #64748b; font-size: 12px; font-weight: 700;
}
.doc-row-list {
  /* overflow:hidden이면 마지막 행의 케밥 팝오버가 컨테이너 하단 경계에 잘려
     아예 보이지 않는다(2026-09 버그 수정) — visible로 바꾸고, 대신 라운드
     코너는 첫/마지막 행에 직접 부여해 시각적으로는 그대로 유지한다. */
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border-light); border-radius: 10px; overflow: visible;
}
.doc-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-bottom: 1px solid #f1f5f9; position: relative; flex-wrap: wrap;
}
.doc-row:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.doc-row:last-child { border-bottom: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.doc-row:hover { background: #f8fafc; }
.doc-row-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 16px;
}
.doc-row-main { flex: 1 1 220px; min-width: 0; }
.doc-row-title {
  font-size: 15px; font-weight: 700; color: #1e293b; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.doc-row-date { margin-top: 2px; font-size: 12.5px; color: #94a3b8; }
.doc-row-meta { flex-shrink: 0; }
.doc-meta-pill {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: #f8fafc; border: 1px solid #e2e8f0; font-size: 11.5px; color: #475569;
  white-space: nowrap; font-weight: 500;
}
.doc-meta-pill.doc-meta-none { color: #cbd5e1; border-style: dashed; }
.doc-row-actions { flex-shrink: 0; display: flex; align-items: center; gap: 6px; position: relative; }
.doc-action-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px;
  border-radius: 7px; border: 1px solid var(--border-light); background: #fff;
  color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font);
  transition: all .12s ease;
}
.doc-action-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.doc-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.doc-dl-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 7px; border: 1px solid var(--border-light);
  background: #fff; color: #475569; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s ease;
}
.doc-dl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.doc-dl-btn:disabled { opacity: .4; cursor: not-allowed; }
.doc-row-kebab {
  width: 28px; height: 28px; border: 0; background: none; color: #94a3b8;
  border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s ease; font-size: 14px;
}
.doc-row:hover .doc-row-kebab, .doc-row-kebab.open { opacity: 1; }
.doc-row-kebab:hover { background: #f1f5f9; color: #1e293b; }
.doc-kebab-menu {
  position: absolute; top: 44px; right: 18px; z-index: 40; background: #fff;
  border: 1px solid var(--border-light); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.14); min-width: 104px; overflow: hidden; display: none;
}
.doc-kebab-menu.open { display: block; }
/* 하단 여백 부족 시 JS(toggleDocKebab)가 이 클래스를 붙여 위쪽(드롭업)으로 연다 */
.doc-kebab-menu.drop-up { top: auto; bottom: 44px; }
.doc-kebab-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0;
  background: none; font-size: 12.5px; color: #334155; cursor: pointer; font-family: var(--font);
}
.doc-kebab-menu button:hover { background: #f8fafc; }
.doc-kebab-menu button.danger { color: #e5484d; }
.doc-empty {
  padding: 26px 0; text-align: center; color: #94a3b8; font-size: 12.5px;
  background: #fff; border: 1px dashed var(--border-light); border-radius: 10px;
}
@media (max-width: 900px) {
  .doc-page-header { flex-direction: column; align-items: stretch; }
  .doc-page-actions { justify-content: space-between; }
  .doc-search-wrap input { width: 100%; }
  .doc-row-meta { order: 3; flex-basis: 100%; }
}

/* 문서 등록/수정 모달 — 유효기간 종료: 기간 프리셋 + 날짜입력 */
.doc-valid-to-wrap { display: flex; gap: 6px; }
.doc-valid-to-wrap select {
  flex: 0 0 78px; min-width: 0; padding-left: 6px; padding-right: 4px;
}
.doc-valid-to-wrap input[type="date"] { flex: 1; min-width: 0; }
.doc-valid-to-wrap input[type="date"]:disabled {
  background: var(--bg-soft, #f4f6f9); color: #64748b; cursor: not-allowed;
}

/* 문서 등록/수정 모달 — 파일 드롭존 */
.doc-upload-dropzone {
  border: 1.5px dashed var(--border-light); border-radius: 10px; padding: 16px;
  text-align: center; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.doc-upload-dropzone:hover, .doc-upload-dropzone.dragover {
  border-color: var(--accent); background: var(--accent-dim, rgba(77,138,240,.06));
}
.doc-upload-hint { color: #94a3b8; font-size: 12.5px; }
.doc-upload-hint i { margin-right: 6px; }
.doc-upload-current {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; color: #334155; font-weight: 600;
}
.doc-upload-current i { color: var(--accent); }

/* 미리보기 모달 — ESC 로 닫히는 공통 모달 규칙은 core.js 전역 ESC 핸들러 재사용 */
/* 2026-09: PDF 외 엑셀/워드/파포/이미지까지 지원하는 통합 뷰어로 확장 — 엔터프라이즈
   SaaS 규격(최대 1100px, 85vh)에 맞춰 모달을 살짝 키우고, 상단에 포맷 뱃지를 추가했다. */
.doc-preview-box { width: min(1100px, 92vw); max-width: none; height: min(85vh, 960px); display: flex; flex-direction: column; }
.doc-preview-box .modal-body.doc-preview-body { padding: 0; }
.doc-preview-header.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-preview-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-preview-title-wrap #doc-preview-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-preview-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .03em; line-height: 1.4;
}
.doc-preview-badge.badge-pdf   { background: #ffe4e6; color: #be123c; }
.doc-preview-badge.badge-xlsx  { background: #d1fae5; color: #047857; }
.doc-preview-badge.badge-docx  { background: #dbeafe; color: #1d4ed8; }
.doc-preview-badge.badge-pptx  { background: #fef3c7; color: #b45309; }
.doc-preview-badge.badge-img   { background: #ede9fe; color: #6d28d9; }
.doc-preview-badge.badge-etc   { background: #e2e8f0; color: #475569; }
.doc-preview-body {
  flex: 1; min-height: 0; background: #eef1f5; display: flex;
  align-items: center; justify-content: center; overflow: auto;
}
.doc-preview-body iframe { width: 100%; height: 100%; border: 0; }
.doc-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-preview-fallback { padding: 40px; text-align: center; color: #64748b; font-size: 13px; }
.doc-preview-fallback i { display: block; font-size: 30px; color: #cbd5e1; margin-bottom: 10px; }
.doc-preview-fallback-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 8px 18px;
  border: 0; border-radius: 6px; background: var(--product-accent, #2563eb); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .12s;
}
.doc-preview-fallback-btn:hover { background: #1f4fb0; }
/* 로딩 스피너 — 엑셀 파싱/워드 변환 등 비동기 처리 동안 표시 */
.doc-preview-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #64748b; font-size: 13px; }
.doc-preview-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid #cbd5e1; border-top-color: var(--product-accent, #2563eb);
  animation: doc-preview-spin .7s linear infinite;
}
@keyframes doc-preview-spin { to { transform: rotate(360deg); } }
/* 엑셀 → HTML 표 변환 뷰 — 시트 탭 + 고밀도 스프레드시트 그리드 */
.doc-preview-xlsx-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; }
.doc-preview-sheet-tabs {
  flex-shrink: 0; display: flex; gap: 2px; padding: 6px 8px 0; background: #f1f5f9;
  border-bottom: 1px solid #dbe1e8; overflow-x: auto;
}
.doc-preview-sheet-tab {
  padding: 6px 14px; font-size: 12px; font-weight: 600; color: #64748b; white-space: nowrap;
  background: #e2e8f0; border: 1px solid #dbe1e8; border-bottom: none; border-radius: 4px 4px 0 0;
  cursor: pointer;
}
.doc-preview-sheet-tab.active { background: #fff; color: #0f172a; }
.doc-preview-xlsx-scroll { flex: 1; min-height: 0; overflow: auto; padding: 2px; }
.doc-preview-xlsx-scroll table {
  border-collapse: collapse; font-size: 12px; background: #fff; white-space: nowrap;
}
.doc-preview-xlsx-scroll table td, .doc-preview-xlsx-scroll table th {
  border: 1px solid #e2e8f0; padding: 4px 8px; color: #334155;
}
.doc-preview-xlsx-scroll table tr:first-child td,
.doc-preview-xlsx-scroll table th {
  position: sticky; top: 0; background: #f8fafc; font-weight: 700; z-index: 1;
}
/* 워드(docx → mammoth.js HTML) 미리보기 — 문서처럼 보이도록 여백 있는 흰 종이 카드 */
.doc-preview-docx-wrap { width: 100%; height: 100%; overflow: auto; padding: 24px; box-sizing: border-box; }
.doc-preview-docx {
  max-width: 800px; margin: 0 auto; background: #fff; padding: 48px 56px;
  box-shadow: 0 1px 4px rgba(15,23,42,.08); border-radius: 4px; color: #1e293b;
  font-size: 14px; line-height: 1.7;
}
.doc-preview-docx img { max-width: 100%; }
.doc-preview-docx table { border-collapse: collapse; }
.doc-preview-docx table td, .doc-preview-docx table th { border: 1px solid #cbd5e1; padding: 4px 8px; }



/* ============================================================
   프로젝트 상세 풀페이지 (#project-detail-page) — 2026-09 Handoff Spec
   ("프로젝트 상세 · 협력사 체크리스트" 리디자인) 디자인 토큰 이식.
   원본 프로토타입은 fixed inset 모달(w-[1400px] h-[92vh])이지만, 이 구현은
   좌측 글로벌 사이드바가 유지되는 독립 전체화면(Full Page)이므로 모달 래퍼
   없이 페이지 루트 컨테이너(사이드바 우측 100% 폭, 뷰포트 높이 고정)로 배치한다.
   색상/타이포/spacing 수치는 Developer Handoff Spec 문서의 HEX·px 값을 그대로
   사용하고(다크모드는 이 화면에 적용하지 않음 — 데스크톱 전용 고정 라이트 팔레트),
   기존 앱 전역 폰트 정책(Noto Sans KR, --font)은 그대로 따르되 숫자/코드/날짜만
   JetBrains Mono(.mono)로 스펙대로 분리한다.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&display=swap');

#project-detail-page {
  --pd-bg: #eef1f5;
  --pd-white: #ffffff;
  --pd-sub-bg: #f8fafc;
  --pd-track: #f1f5f9;
  --pd-border: #e2e8f0;
  --pd-divider: #cbd5e1;
  --pd-title: #0f172a;
  --pd-header-navy: #1e293b;
  --pd-body: #334155;
  --pd-sub: #64748b;
  --pd-meta: #94a3b8;
  --pd-done: #059669;
  --pd-done-fill: #10b981;
  --pd-done-badge-bg: #ecfdf5;
  --pd-done-badge-text: #047857;
  --pd-done-badge-border: #a7f3d0;
  --pd-active: #f59e0b;
  --pd-active-bg: #fffbeb;
  --pd-active-text: #b45309;
  --pd-active-border: #fcd34d;
  --pd-wait: #cbd5e1;
  --pd-wait-badge-bg: #f8fafc;
  --pd-wait-badge-text: #64748b;
  --pd-select-indicator: #3b82f6;
  --pd-select-bg: #eff6ff;
  --pd-link: #2563eb;
  --pd-dday: #e11d48;
  --pd-dday-bg: #ffe4e6;

  flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; background: var(--pd-white); color: var(--pd-title);
  font-size: 13px;
}
#project-detail-page .mono {
  font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ── 1. TopBar ── */
#project-detail-page .pd-topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 12px; background: var(--pd-white); border-bottom: 1px solid var(--pd-border);
  flex-shrink: 0;
}
#project-detail-page .pd-topbar-left { min-width: 0; }
#project-detail-page .pd-breadcrumb { font-size: 11px; color: var(--pd-sub); line-height: 1.4; margin-bottom: 3px; }
#project-detail-page .pd-bc-sep { color: var(--pd-divider); margin: 0 4px; }
#project-detail-page .pd-topbar-left h1#pd-detail-title {
  font-size: 22px; font-weight: 700; color: var(--pd-title); line-height: 1.15;
  letter-spacing: -0.01em; margin: 0; max-width: 640px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* 2026-09: 사각 박스형 버튼군을 걷어내고, 인콰리 상세(#197)와 동일한 밑줄 텍스트
   메뉴 스타일(.iq-menu-btn/.iq-menu-flash, 전역 정의)을 그대로 재사용한다 — 아래
   .pd-tb-btn* 계열 클래스는 더 이상 마크업에서 쓰이지 않지만, 혹시 남은 참조가
   있을 경우를 대비해 규칙 자체는 유지한다(.pd-tb-divider/.pd-tb-close-btn은 우측
   구분선·닫기 버튼 자체를 마크업에서 완전히 삭제하면서 더 이상 쓰일 곳이 없어
   함께 제거했다 — 진행현황 메뉴가 이미 같은 닫기 동작을 수행해 기능 중복이었다). */
#project-detail-page .pd-topbar-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; margin-top: 2px; white-space: nowrap; }
/* 아이콘-텍스트 간격을 기존(공백 문자 1칸, 약 3~4px) 대비 2배 수준으로 넓힌다 —
   .iq-menu-btn은 인콰리 상세와 공유하는 전역 클래스라 이 화면(.pd-topbar-actions)
   안에서만 좁혀/넓혀지도록 스코프를 잡았다. */
#project-detail-page .pd-topbar-actions .iq-menu-btn { gap: 7px; }
#project-detail-page .pd-tb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 6px; font-size: 13px; font-weight: 500; font-family: var(--font);
  background: none; border: 1px solid transparent; color: var(--pd-body); cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
#project-detail-page .pd-tb-btn:hover { background: var(--pd-sub-bg); }
#project-detail-page .pd-tb-btn-outline { background: var(--pd-white); border-color: var(--pd-divider); }
#project-detail-page .pd-tb-btn-outline:hover { background: var(--pd-sub-bg); }
#project-detail-page .pd-tb-btn-emerald { background: var(--pd-done); color: #fff; }
#project-detail-page .pd-tb-btn-emerald:hover { background: #047857; }
#project-detail-page .pd-tb-btn-amber { background: var(--pd-active-bg); border-color: var(--pd-active-border); color: var(--pd-active-text); }
#project-detail-page .pd-tb-btn-amber:hover { background: #fef3c7; }

/* ── 2. MetaChips ── (2026-09: 세로 높이 70% 수준으로 압축) */
#project-detail-page .pd-metachips {
  display: flex; align-items: stretch; background: var(--pd-sub-bg); border-bottom: 1px solid var(--pd-border);
  padding: 5px 24px; flex-shrink: 0;
}
#project-detail-page .pd-chip {
  flex: 1; min-width: 0; padding: 0 12px; border-left: 1px solid var(--pd-border);
  display: flex; flex-direction: column; justify-content: center;
}
#project-detail-page .pd-chip:first-child { border-left: none; padding-left: 0; }
#project-detail-page .pd-chip-right { text-align: right; }
#project-detail-page .pd-chip-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--pd-meta);
}
#project-detail-page .pd-chip-val {
  font-size: 13px; font-weight: 600; color: #1e293b; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#project-detail-page .pd-dday-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: var(--pd-dday-bg); color: var(--pd-dday); font-size: 11px; font-weight: 700;
}

/* ── 3. Stepper ── */
#project-detail-page .pd-stepper-wrap { background: var(--pd-white); border-bottom: 1px solid var(--pd-border); padding: 16px 24px 12px; flex-shrink: 0; }
#project-detail-page .pd-stepper-summary { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
#project-detail-page .pd-stepper-summary-left { display: flex; align-items: baseline; gap: 10px; }
#project-detail-page .pd-stepper-title { font-size: 13px; font-weight: 700; color: var(--pd-title); }
#project-detail-page .pd-stepper-counts { font-size: 11.5px; color: var(--pd-sub); }
#project-detail-page .pd-count-done { color: var(--pd-done); font-weight: 600; }
#project-detail-page .pd-count-active { color: var(--pd-active); font-weight: 600; }
#project-detail-page .pd-stepper-summary-right { display: flex; align-items: baseline; gap: 6px; }
#project-detail-page .pd-current-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--pd-meta); font-weight: 600; }
#project-detail-page .pd-current-name { font-size: 12.5px; font-weight: 700; color: var(--pd-active-text); }

#project-detail-page .pd-stepper { display: flex; align-items: flex-start; overflow-x: auto; padding-top: 22px; padding-bottom: 2px; }
#project-detail-page .pd-stepper::-webkit-scrollbar { height: 6px; }
#project-detail-page .pd-stepper::-webkit-scrollbar-thumb { background: var(--pd-border); border-radius: 999px; }
#project-detail-page .pd-step { flex: 1; min-width: 92px; position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 15px; }
#project-detail-page .pd-step.is-clickable { cursor: pointer; }
#project-detail-page .pd-step-connector {
  /* 원형(32px, top:15px 시작) 정중앙(15+16-1=30px)을 관통하도록 위치를 맞추고,
     left:50%에서 width:100%로 뻗어 다음 노드의 중심까지 빈틈 없이 닿게 한다
     (노드 폭이 flex:1로 모두 동일하므로 50%+100% = 다음 박스의 정중앙과 일치). */
  position: absolute; top: 30px; left: 50%; width: 100%; height: 2px; background: var(--pd-wait); z-index: 0;
}
#project-detail-page .pd-step-connector.is-done { background: var(--pd-done); }
#project-detail-page .pd-step-circle {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--pd-divider);
  background: var(--pd-white); color: var(--pd-meta); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; flex-shrink: 0;
  line-height: 1; /* 폰트 자체 행간 때문에 숫자가 원 중앙에서 미세하게 아래로 쏠리던 것 보정 */
  padding: 0;
}
#project-detail-page .pd-step-done .pd-step-circle { background: var(--pd-done); color: #fff; border-color: var(--pd-done); }
#project-detail-page .pd-step-active .pd-step-circle {
  background: var(--pd-active); color: #fff; border-color: var(--pd-active);
  animation: pdPulseRing 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#project-detail-page .pd-step.is-selected:not(.pd-step-active) .pd-step-circle {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pd-select-indicator);
}
@keyframes pdPulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(245, 158, 11, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0); }
}
#project-detail-page .pd-step-current-badge {
  /* 원형·숫자와 겹치지 않도록 더 위로(-18px → -26px) 올리고, 위쪽 여백은
     .pd-stepper의 padding-top으로 확보해 스크롤 영역에 잘리지 않게 한다.
     2026-09: 높이를 120% 수준으로 키우고(패딩 확장), 폰트 크기를 좌측 상단
     상태 텍스트(예: "1단계 완료")와 동일한 12~12.5px로 맞춘다. */
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  background: var(--pd-active-bg); color: var(--pd-active-text); border: 1px solid var(--pd-active-border);
  white-space: nowrap; line-height: 1.2;
}
#project-detail-page .pd-step-label { margin-top: 6px; font-size: 10.5px; line-height: 1.2; text-align: center; padding: 0 4px; white-space: nowrap; color: var(--pd-meta); }
#project-detail-page .pd-step-done .pd-step-label { color: var(--pd-body); font-weight: 500; }
#project-detail-page .pd-step-active .pd-step-label { color: var(--pd-active-text); font-weight: 700; }
#project-detail-page .pd-step.is-selected .pd-step-label { text-decoration: underline; text-underline-offset: 2px; }

#project-detail-page .pd-overall-bar-wrap { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#project-detail-page .pd-overall-bar { flex: 1; height: 6px; background: var(--pd-track); border-radius: 999px; overflow: hidden; }
#project-detail-page .pd-overall-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #10b981 0%, #fbbf24 100%); transition: width .15s; }
#project-detail-page .pd-overall-pct { font-size: 12px; font-weight: 700; color: var(--pd-body); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; width: 42px; text-align: right; }

/* ── 4/5. 좌(45%)/우(55%) 분할 워크스페이스 ── */
#project-detail-page .pd-split { flex: 1; min-height: 0; display: flex; background: var(--pd-white); }
#project-detail-page .pd-split-left { flex: 0 0 45%; min-width: 0; display: flex; flex-direction: column; background: var(--pd-white); border-right: 1px solid var(--pd-border); }
#project-detail-page .pd-split-right { flex: 1 1 55%; min-width: 0; display: flex; flex-direction: column; background: var(--pd-sub-bg); }
/* renderPdStageDetailPanel()이 이 안에 헤더/액션바/카드영역을 통째로 innerHTML로
   그리므로, 그 자식들의 flex-shrink:0·flex:1 체인이 정상 동작하려면 이 컨테이너
   자체가 flex column이어야 한다(js/app/projects.js #pd-stage-detail-panel 참고). */
#project-detail-page #pd-stage-detail-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

#project-detail-page .pd-split-left-header {
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 44px;
  border-bottom: 1px solid var(--pd-border); background: var(--pd-sub-bg); flex-shrink: 0;
}
#project-detail-page .pd-split-left-title {
  font-size: 13px; font-weight: 700; color: var(--pd-title); display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap; flex-shrink: 0;
}
#project-detail-page .pd-split-left-count { font-size: 11px; color: var(--pd-sub); font-family: 'JetBrains Mono', monospace; font-weight: 400; white-space: nowrap; }
/* 2026-09: "+ 공정 추가/편집"을 엑셀 필터형 체크박스 다중선택 팝오버로 개편.
   버튼은 기존 드롭다운 트리거 자리를 그대로 대체하고, 팝오버는 버튼 우측 하단에
   절대배치로 뜬다(레이아웃에 영향 없음, z-index로 다른 요소 위에 표시). */
#project-detail-page .pd-stage-popover-wrap { position: relative; flex-shrink: 0; }
#project-detail-page .pd-add-stage-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; font-size: 11px; font-weight: 600; color: var(--pd-body);
  border: 1px solid var(--pd-divider); border-radius: 6px; background: var(--pd-white);
  cursor: pointer; white-space: nowrap; transition: background .15s ease-in-out, border-color .15s ease-in-out;
}
#project-detail-page .pd-add-stage-btn i { font-size: 9px; color: var(--pd-sub); }
#project-detail-page .pd-add-stage-btn:hover { background: var(--pd-track); border-color: var(--pd-sub); }
#project-detail-page .pd-stage-popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 232px; background: var(--pd-white); border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18); z-index: 50; overflow: hidden;
}
#project-detail-page .pd-stage-popover-search { padding: 8px 10px 4px; }
#project-detail-page .pd-stage-popover-search input {
  width: 100%; box-sizing: border-box; height: 26px; padding: 0 8px; font-size: 12px;
  border: 1px solid var(--pd-divider); border-radius: 5px; outline: none; color: var(--pd-body);
}
#project-detail-page .pd-stage-popover-search input:focus { border-color: #60a5fa; }
#project-detail-page .pd-stage-popover-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  font-size: 13px; color: var(--pd-body); cursor: pointer; user-select: none;
}
#project-detail-page .pd-stage-popover-row:hover { background: var(--pd-track); }
#project-detail-page .pd-stage-popover-all {
  border-bottom: 1px solid var(--pd-divider); font-weight: 600; padding: 7px 12px; margin-top: 2px;
}
#project-detail-page .pd-stage-popover-row input[type="checkbox"] {
  width: 15px; height: 15px; border-radius: 3px; accent-color: #2563eb; cursor: pointer; flex: none;
}
#project-detail-page .pd-stage-popover-list { max-height: 260px; overflow-y: auto; padding: 2px 0; }
#project-detail-page .pd-stage-popover-empty { padding: 14px 12px; font-size: 12px; color: var(--pd-sub); text-align: center; }
#project-detail-page .pd-stage-popover-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 10px; background: var(--pd-track); border-top: 1px solid var(--pd-divider);
}
#project-detail-page .pd-stage-popover-btn { padding: 5px 12px; font-size: 12px; border-radius: 5px; cursor: pointer; border: none; }
#project-detail-page .pd-stage-popover-cancel { background: var(--pd-white); border: 1px solid var(--pd-divider); color: var(--pd-body); }
#project-detail-page .pd-stage-popover-cancel:hover { background: var(--pd-track); }
#project-detail-page .pd-stage-popover-confirm { background: #2563eb; color: #fff; font-weight: 600; }
#project-detail-page .pd-stage-popover-confirm:hover { background: #1d4ed8; }

#project-detail-page .pd-split-left-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
#project-detail-page .pd-split-left-scroll::-webkit-scrollbar, #project-detail-page .pd-split-right-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
#project-detail-page .pd-split-left-scroll::-webkit-scrollbar-thumb, #project-detail-page .pd-split-right-scroll::-webkit-scrollbar-thumb { background: var(--pd-divider); border-radius: 999px; }

/* 2026-09: 행 선택 시 컬럼이 밀리거나 병합되는 현상 방지 — table-layout:fixed로
   컬럼 폭을 thead의 지정값에 고정하고, 셀 내용은 줄바꿈 대신 말줄임 처리한다. */
#project-detail-page .pd-stage-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
#project-detail-page .pd-stage-table th,
#project-detail-page .pd-stage-table td { overflow: hidden; }
#project-detail-page .pd-stage-name-cell,
#project-detail-page .pd-stage-vendor-name,
#project-detail-page .pd-stage-vendor-lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#project-detail-page .pd-stage-table thead { position: sticky; top: 0; z-index: 2; }
#project-detail-page .pd-stage-table thead th {
  background: var(--pd-header-navy); color: #fff; font-weight: 600; font-size: 11px; text-align: left;
  padding: 8px 8px; white-space: nowrap;
}
#project-detail-page .pd-stage-table thead th:first-child { padding-left: 12px; }
/* 2026-09: 행 높이를 기존 대비 약 70% 수준(32~34px)으로 압축 — 15단계가 스크롤
   없이 한 화면에 들어오도록 세로 패딩만 줄인다(폰트 크기·정보는 그대로 유지). */
#project-detail-page .pd-stage-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--pd-track); vertical-align: middle; }
#project-detail-page .pd-stage-table tbody td:first-child { padding-left: 12px; }
#project-detail-page .pd-stage-row { cursor: pointer; position: relative; background: var(--pd-white); transition: background-color .12s; }
#project-detail-page .pd-stage-row:hover { background: var(--pd-sub-bg); }
#project-detail-page .pd-stage-row.is-active-tint { background: rgba(255, 251, 235, .4); }
/* 2026-09: 선택 행 좌측 강조선을 <tr>::before(포지션 절대값 가상요소)로 두면
   일부 브라우저의 테이블 박스 보정 알고리즘이 이를 "유령 셀"로 취급해 실제
   <td>들을 한 칸씩 밀어버리는 렌더링 버그가 있었다(선택 행만 컬럼이 어긋나고
   진행률 막대가 사라지는 증상의 실제 원인). <tr> 자체에는 가상요소를 절대
   두지 않고, 이미 존재하는 첫 번째 실제 <td>에 inset box-shadow로 강조선을
   그려 테이블 레이아웃에 전혀 개입하지 않도록 한다. */
#project-detail-page .pd-stage-row.is-selected {
  background: var(--pd-select-bg);
}
#project-detail-page .pd-stage-row.is-selected td:first-child {
  box-shadow: inset 4px 0 0 0 var(--pd-select-indicator);
}
#project-detail-page .pd-stage-no { font-weight: 700; color: var(--pd-body); }
#project-detail-page .pd-stage-name-cell { font-weight: 600; color: var(--pd-title); white-space: nowrap; }
#project-detail-page .pd-stage-vendor-name { color: var(--pd-body); }
#project-detail-page .pd-stage-vendor-lead { font-size: 10.5px; color: var(--pd-meta); margin-top: 2px; }
#project-detail-page .pd-stage-date-cell { color: var(--pd-sub); white-space: nowrap; }
#project-detail-page .pd-mini-bar-wrap { display: flex; align-items: center; gap: 6px; }
#project-detail-page .pd-mini-bar-track { flex: 1; height: 6px; background: var(--pd-track); border-radius: 999px; overflow: hidden; }
#project-detail-page .pd-mini-bar-fill { height: 100%; border-radius: 999px; transition: width .15s; }
#project-detail-page .pd-mini-bar-fill.bg-emerald { background: var(--pd-done-fill); }
#project-detail-page .pd-mini-bar-fill.bg-amber { background: var(--pd-active); }
#project-detail-page .pd-mini-bar-fill.bg-wait { background: var(--pd-wait); }
#project-detail-page .pd-stage-pct { font-size: 11px; font-weight: 600; color: var(--pd-body); width: 30px; text-align: right; flex-shrink: 0; }
#project-detail-page .pd-stage-status-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; border: 1px solid transparent;
  white-space: nowrap;
}
#project-detail-page .pd-badge-done { background: var(--pd-done-badge-bg); color: var(--pd-done-badge-text); border-color: var(--pd-done-badge-border); }
#project-detail-page .pd-badge-active { background: var(--pd-active-bg); color: var(--pd-active-text); border-color: var(--pd-active-border); }
#project-detail-page .pd-badge-wait { background: var(--pd-wait-badge-bg); color: var(--pd-wait-badge-text); border-color: var(--pd-border); }

/* ── 우측 패널(StageDetail) ── */
#project-detail-page .pd-panel-empty { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; color: var(--pd-sub); font-size: 13px; }
#project-detail-page .pd-stage-detail-header {
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 44px;
  border-bottom: 1px solid var(--pd-border); background: var(--pd-white); flex-shrink: 0;
}
#project-detail-page .pd-stage-detail-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* 2026-09: 등록된 공정이 하나도 없을 때 스테퍼 자리에 표시하는 안내 placeholder */
#project-detail-page .pd-stepper-empty {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 24px 12px; color: var(--pd-sub); font-size: 13px;
}
#project-detail-page .pd-step-badge { font-size: 11px; font-weight: 700; background: var(--pd-header-navy); color: #fff; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
#project-detail-page .pd-stage-detail-name { font-size: 13px; font-weight: 700; color: var(--pd-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 2026-09: 상태 드롭다운 + 완료승인 CTA를 한 줄로 묶은 액션바. 예전에는 상태
   드롭다운이 헤더에, CTA 버튼은 화면 최하단 풋터에 따로 있었다 — 이제 헤더
   바로 아래 한 곳에서 두 동작을 처리한다. */
#project-detail-page .pd-stage-action-bar-wrap {
  padding: 12px 20px; border-bottom: 1px solid var(--pd-border); background: var(--pd-white); flex-shrink: 0;
}
#project-detail-page .pd-stage-action-bar { display: flex; align-items: center; gap: 10px; width: 100%; }
#project-detail-page .pd-stage-next-hint { margin-top: 8px; font-size: 11.5px; color: var(--pd-sub); }
#project-detail-page .pd-stage-next-hint b { color: #1e293b; }

/* 상태 표시가 배지(읽기전용) → 드롭다운(직접 변경)으로 바뀌었다. done/active/wait
   색상은 기존 pd-badge-* 배지와 동일한 토큰을 재사용한다. 폭은 액션바 전체의
   약 20%(120~140px)로 축소하고, CTA 버튼과 높이를 38px로 맞춘다. */
#project-detail-page .pd-status-select {
  flex-shrink: 0; width: 20%; min-width: 120px; max-width: 160px; height: 38px; padding: 0 10px;
  border-radius: 6px; border: 1.5px solid transparent;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font);
}
#project-detail-page .pd-status-select-wait { background: var(--pd-wait-badge-bg); color: var(--pd-wait-badge-text); border-color: var(--pd-border); }
#project-detail-page .pd-status-select-active { background: var(--pd-active-bg); color: var(--pd-active-text); border-color: var(--pd-active-border); }
#project-detail-page .pd-status-select-done { background: var(--pd-done-badge-bg); color: var(--pd-done-badge-text); border-color: var(--pd-done-badge-border); }

/* 2026-09: 우측 패널 두 카드(체크리스트/외주발주)가 각각 자기 내부에서만
   스크롤되도록, 바깥 래퍼는 스크롤을 갖지 않고 flex로 높이만 나눠 준다. */
#project-detail-page .pd-stage-body-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
#project-detail-page .pd-card { background: var(--pd-white); border: 1px solid var(--pd-border); border-radius: 8px; }
#project-detail-page .pd-card-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--pd-meta); font-weight: 700; margin-bottom: 10px; }
#project-detail-page .pd-card-title { font-size: 12.5px; font-weight: 700; color: var(--pd-title); }

/* 외주 발주 리스트 카드 (2026-09: 협력업체 정보 카드를 대체) — 순서상 하단(2순위)
   배치, 테이블 헤더는 sticky, 바디는 최대 220px에서 내부 스크롤. */
#project-detail-page .pd-po-card { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; }
#project-detail-page .pd-po-table-wrap { max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
#project-detail-page .pd-po-table-wrap::-webkit-scrollbar { width: 7px; }
#project-detail-page .pd-po-table-wrap::-webkit-scrollbar-thumb { background: var(--pd-divider); border-radius: 999px; }
#project-detail-page .pd-po-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#project-detail-page .pd-po-table thead { position: sticky; top: 0; z-index: 1; }
#project-detail-page .pd-po-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; color: var(--pd-meta); text-transform: uppercase;
  letter-spacing: .02em; padding: 8px 16px; border-bottom: 1px solid var(--pd-track); white-space: nowrap;
  background: var(--pd-white);
}
#project-detail-page .pd-po-table tbody td { padding: 9px 16px; border-top: 1px solid var(--pd-track); color: var(--pd-body); }
#project-detail-page .pd-po-table tbody tr:first-child td { border-top: none; }
#project-detail-page .pd-po-empty { text-align: center; color: var(--pd-meta); font-size: 12px; padding: 18px 16px !important; }

/* 단계별 상세 체크리스트 카드 — 순서상 상단(1순위) 배치, 남는 세로 공간을 모두
   차지(flex:1)하고 항목 목록만 최대 320px에서 내부 스크롤된다. */
#project-detail-page .pd-checklist-card { flex: 1 1 auto; min-height: 160px; display: flex; flex-direction: column; overflow: hidden; }
#project-detail-page .pd-checklist-scroll { flex: 1; min-height: 0; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
#project-detail-page .pd-checklist-scroll::-webkit-scrollbar { width: 7px; }
#project-detail-page .pd-checklist-scroll::-webkit-scrollbar-thumb { background: var(--pd-divider); border-radius: 999px; }
#project-detail-page .pd-checklist-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--pd-track); }
#project-detail-page .pd-checklist-header-left { display: flex; align-items: baseline; gap: 8px; }
#project-detail-page .pd-checklist-count { font-size: 11px; color: var(--pd-sub); }
#project-detail-page .pd-checklist-progress { display: flex; align-items: center; gap: 8px; }
#project-detail-page .pd-checklist-pct { font-size: 11px; font-weight: 700; color: var(--pd-done-badge-text); width: 30px; text-align: right; }
#project-detail-page .pd-check-list { list-style: none; margin: 0; padding: 0; }
#project-detail-page .pd-check-li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--pd-track); transition: background-color .1s; }
#project-detail-page .pd-check-li:first-child { border-top: none; }
#project-detail-page .pd-check-li:hover { background: var(--pd-sub-bg); }
#project-detail-page .pd-check-empty { padding: 16px; color: var(--pd-sub); font-size: 12.5px; text-align: center; list-style: none; }
#project-detail-page .pd-check-box {
  flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--pd-divider);
  background: var(--pd-white); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .15s, border-color .15s; font-size: 9px; color: #fff;
}
#project-detail-page .pd-check-box:hover { border-color: var(--pd-done-fill); }
#project-detail-page .pd-check-box.is-done { background: var(--pd-done-fill); border-color: var(--pd-done-fill); }
#project-detail-page .pd-check-body { flex: 1; min-width: 0; }
#project-detail-page .pd-check-text { font-size: 12.5px; color: #1e293b; line-height: 1.5; }
#project-detail-page .pd-check-text.is-done { color: var(--pd-meta); text-decoration: line-through; }
#project-detail-page .pd-manual-tag {
  display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 700; color: var(--pd-link);
  background: #eff6ff; border-radius: 999px; padding: 1px 7px;
}
#project-detail-page .pd-check-meta { font-size: 10.5px; color: var(--pd-meta); margin-top: 2px; }
#project-detail-page .pd-check-jump {
  flex-shrink: 0; background: none; border: none; color: var(--pd-meta); cursor: pointer; padding: 2px 4px;
  border-radius: 4px; opacity: 0; transition: opacity .12s, color .12s;
}
#project-detail-page .pd-check-li:hover .pd-check-jump { opacity: 1; }
#project-detail-page .pd-check-jump:hover { color: var(--pd-link); background: #eff6ff; }
#project-detail-page .pd-checklist-add-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--pd-track);
  background: rgba(248, 250, 252, .6);
}
#project-detail-page .pd-checklist-add-row i { color: var(--pd-meta); font-size: 12px; }
#project-detail-page .pd-checklist-add-input {
  flex: 1; background: none; border: none; outline: none; font-size: 12.5px; color: #1e293b;
}
#project-detail-page .pd-checklist-add-input::placeholder { color: var(--pd-meta); }

#project-detail-page .pd-card-sub-header {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--pd-track);
}
#project-detail-page .pd-inline-link-btn {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--pd-link);
  font-size: 11px; cursor: pointer; padding: 2px 4px;
}
#project-detail-page .pd-inline-link-btn:hover { text-decoration: underline; }

/* 예전 하단 풋터("다음 단계 → ..." + CTA 버튼)는 액션바(.pd-stage-action-bar-wrap)로
   합쳐졌다 — .pd-footer-next-sub만 그 안의 보조 텍스트 색상으로 계속 쓰인다. */
#project-detail-page .pd-footer-next-sub { color: var(--pd-meta); }
#project-detail-page .pd-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; height: 38px;
  padding: 0 16px; border-radius: 6px;
  background: var(--pd-done); color: #fff; font-size: 13px; font-weight: 700; border: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: background-color .12s;
}
#project-detail-page .pd-cta-btn:hover:not(:disabled) { background: #047857; }
#project-detail-page .pd-cta-btn:disabled { background: var(--pd-wait); cursor: not-allowed; box-shadow: none; }

@media (max-width: 1280px) {
  #project-detail-page .pd-split { flex-direction: column; overflow-y: auto; }
  #project-detail-page .pd-split-left, #project-detail-page .pd-split-right { flex: 1 1 auto; }
}

/* ── 매입 목록 > 업체명 클릭 → 협력사 매칭 모달(2026-09) ────────────────────
   컴팩트 다이얼로그(420~480px) — 기존 .modal-overlay/.modal-box 컨벤션을
   그대로 쓰되, 폭만 좁혀 검색+카드리스트 UI에 맞춘다. */
.pis-vm-box { max-width: 460px; max-height: 82vh; }
.pis-vm-source-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 14px;
  background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 6px;
}
.pis-vm-source-label { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.pis-vm-source-value { font-size: 13px; font-weight: 700; color: var(--text-primary); word-break: break-all; }
.pis-vm-list {
  margin-top: 8px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border-light); border-radius: 6px;
  scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent;
}
.pis-vm-list::-webkit-scrollbar { width: 8px; }
.pis-vm-list::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.pis-vm-empty { padding: 20px 12px; text-align: center; color: var(--text-secondary); font-size: 12px; }
.pis-vm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background-color .1s ease;
}
.pis-vm-item:last-child { border-bottom: none; }
.pis-vm-item:hover { background: #EFF6FF; }
.pis-vm-item.is-selected { background: #EFF6FF; box-shadow: inset 0 0 0 1px #2563EB; }
.pis-vm-item-check {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid #CBD5E1; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 10px; background: #fff;
}
.pis-vm-item.is-selected .pis-vm-item-check { background: #2563EB; border-color: #2563EB; color: #fff; }
.pis-vm-item-main { min-width: 0; flex: 1; }
.pis-vm-item-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.pis-vm-item-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--text-secondary); }
.pis-vm-alias-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 8px 10px;
  background: #F8FAFC; border-radius: 6px;
  font-size: 12px; color: var(--text-secondary); cursor: pointer; line-height: 1.4;
}
.pis-vm-alias-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }


/* ============================================================
   계약서 작성(#ct-write-page) — 2026-09(2차): 상단 기본정보를 2행 고밀도
   그리드로 압축. 발주서 상세(#po-detail-page)와 동일한 원칙으로 헤더는
   flex-shrink:0로 고정하고, 본문(.iq-detail-body)만 내부에서 세로 스크롤되게
   해서 창 높이가 낮아도 헤더(저장/취소 등)는 항상 보이게 한다("스크롤 시에도
   최상단 액션바 고정" 요구사항을 position:sticky 대신 이 앱의 기존 검증된
   패턴으로 구현 — #po-detail-page와 동일 원리).
   ============================================================ */
#ct-write-page { flex: 1; min-height: 0; overflow: hidden; }
#ct-write-page .iq-detail-header { flex-shrink: 0; }
#ct-write-page .iq-detail-body {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9; /* Firefox */
}
#ct-write-page .iq-detail-body::-webkit-scrollbar { width: 7px; height: 7px; }
#ct-write-page .iq-detail-body::-webkit-scrollbar-track { background: transparent; }
#ct-write-page .iq-detail-body::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
#ct-write-page .iq-detail-body::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* 상단 기본정보 2행 그리드. 각 행마다 항목별 폭 비율(fr)이 달라서 행마다 별도
   grid-template-columns를 준다. minmax(px, fr)로 최소폭을 보장해두고, 화면이
   좁아 6개 칸의 최소폭 합이 안 들어갈 때는(1280px 미만 등) 찌그러지는 대신
   그 행만 가로 스크롤되게 한다. */
.ctw-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ctw-row {
  display: grid; gap: 24px; align-items: end;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; /* 가로 스크롤 시 트랙 여유 */
  scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9;
  /* 2026-09(재조정): 화면 폭에 맞춰 필드가 늘어나는 원래 방식(fr)으로 복귀하되,
     줄 전체를 75%로 줄여 예전보다 전체적으로 작게 보이게 한다 — fr 비율 계산이
     이 75% 너비를 기준으로 이뤄지므로, 창 크기를 늘리거나 줄이면 이 안에서
     그대로 비율대로 늘었다 줄었다 한다. 항목 간 간격은 12px -> 24px(2배)로 넓혔다. */
  width: 75%;
}
.ctw-row::-webkit-scrollbar { height: 6px; }
.ctw-row::-webkit-scrollbar-track { background: transparent; }
.ctw-row::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.ctw-row::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
/* 2026-09: 입력 순서 재배치 — 1행(계약번호/프로젝트/협력업체/공급계약 대상)은
   4칸, 2행(품명/수량/단위/계약금액/계약체결일/납기/부가세/상태)은 8칸으로
   재구성했다. 각 칸은 최소폭 + 비율(fr)로 화면 폭에 맞춰 늘어나며(위 .ctw-row의
   width:75%가 그 계산 기준 폭 자체를 줄여 전체적으로 작게 보이게 한다). */
/* 프로젝트/공급계약 대상/품명을 이전 크기의 120%로 키우기 위해 비율(fr)을
   올렸다 — fr 풀을 공유하는 구조라 이 세 필드가 커진 만큼 같은 줄의 나머지
   필드는 다소 좁아진다(계약번호/협력업체, 그리고 2행의 수량/단위/계약금액/
   계약체결일/납기/부가세/상태). 세부 결과 수치는 대화에서 안내함. */
.ctw-row-1 { grid-template-columns: minmax(140px,1fr) minmax(150px,2.27fr) minmax(160px,1.2fr) minmax(220px,3.78fr); }
.ctw-row-2 { grid-template-columns: minmax(170px,2.5fr) minmax(80px,.6fr) minmax(90px,.6fr) minmax(150px,1.3fr) minmax(130px,1fr) minmax(130px,1fr) minmax(110px,.8fr) minmax(110px,.8fr); }

.ctw-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctw-field label {
  font-size: 12.5px; font-weight: 600; color: #374151;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctw-field label .required { color: #DC2626; margin-left: 2px; }
.ctw-field label .hint { color: #9CA3AF; font-weight: 500; font-size: 11.5px; }
.ctw-field input,
.ctw-field select {
  height: 35px; padding: 0 9px; font-size: 13px; font-family: var(--font);
  border: 1px solid #E2E8F0; border-radius: 6px; background: #fff; color: var(--text-primary);
  width: 100%; min-width: 0; box-sizing: border-box;
}
.ctw-field input:disabled { background: #F3F4F6; color: #9CA3AF; }
/* 2026-09: 단위/부가세/상태(네이티브 <select>)만 브라우저가 자체로 덧씌우는
   화살표/음영 때문에 다른 필드(텍스트 인풋, 프로젝트·협력업체의 커스텀
   search-select)보다 유난히 "박스"져 보였다. appearance:none으로 그 기본
   장식을 지우고 가는 회색 화살표 아이콘만 얇게 그려 넣어, 다른 필드와 같은
   플랫한 테두리 스타일로 맞춘다. */
.ctw-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
  padding-right: 26px;
}
.ctw-field select::-ms-expand { display: none; }
.ctw-field input:focus, .ctw-field select:focus {
  outline: none; border-color: var(--accent, #4D8AF0); box-shadow: 0 0 0 2px var(--accent-dim, rgba(77,138,240,.15));
}
/* 프로젝트/협력업체는 searchable-select(core.js)가 원래의 <select>를 숨기고
   그 자리에 .search-select 래퍼 + 검색용 텍스트 인풋(.search-select-input)을
   대신 넣는다. 위 공용 규칙(.ctw-field input)이 이 인풋에도 적용되지만, 오른쪽
   드롭다운 화살표(.search-select-arrow) 자리를 다시 확보해줘야 글자와 겹치지
   않는다. */
.ctw-field .search-select { width: 100%; }
.ctw-field .search-select-input { padding-right: 24px; }

@media (max-width: 1280px) {
  .ctw-row { gap: 10px; }
}