/* ==========================================================================
   디자인 토큰 (Figma Make 시안 팔레트, docs/02-design/figma-make-prompt.md)
   색·간격·모서리·그림자는 여기서만 정하고 아래 규칙은 변수로 쓴다.
   ========================================================================== */
:root {
  --m-primary: #2f6b4f;
  --m-primary-dark: #24543e;
  --m-primary-soft: #eaf3ee;
  --m-primary-line: #a8c4b4;
  --m-accent: #6b9d82;
  --m-bg: #f4f6f5;
  --m-surface: #ffffff;
  --m-surface-alt: #f8faf9;
  --m-text: #1d2923;
  --m-muted: #66736c;
  --m-nav-text: #536159;
  --m-border: #d7deda;
  --m-border-dark: #bac6c0;
  --m-danger: #c13f45;
  --m-danger-dark: #a63439;
  --m-danger-soft: #fff0f0;
  --m-blue: #315f9a;
  --m-blue-soft: #edf4fb;
  --m-shadow-sm: 0 1px 2px rgb(25 42 33 / 5%);
  --m-shadow-md: 0 10px 32px rgb(25 42 33 / 12%);
  --m-focus-ring: 0 0 0 3px rgb(47 107 79 / 14%);
  --m-radius-sm: 5px;
  --m-radius: 8px;
  --m-radius-lg: 12px;
  --m-nav-h: 56px;      /* 화면별 그리드 높이 계산이 이 값을 전제로 한다 */
  --m-footer-h: 30px;   /* 그리드 높이 계산에서 빼 준다 */
  --m-font: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "Apple SD Gothic Neo", system-ui, sans-serif;

  /* Bootstrap 5.3 기본값 덮어쓰기 */
  --bs-body-font-family: var(--m-font);
  --bs-body-font-size: 0.9375rem;   /* 15px */
  --bs-body-font-weight: 500;
  --bs-body-color: var(--m-text);
  --bs-body-color-rgb: 29, 41, 35;
  --bs-body-bg: var(--m-bg);
  --bs-secondary-color: var(--m-muted);
  --bs-tertiary-bg: var(--m-surface-alt);
  --bs-border-color: var(--m-border);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: var(--m-radius-sm);
  --bs-border-radius-lg: var(--m-radius);
  --bs-primary: var(--m-primary);
  --bs-primary-rgb: 47, 107, 79;
  --bs-danger: var(--m-danger);
  --bs-danger-rgb: 193, 63, 69;
  --bs-success: var(--m-primary);       /* 저장 버튼·"금일 매입" 글자 등 성공색도 주색으로 통일 */
  --bs-success-rgb: 47, 107, 79;
  --bs-link-color: var(--m-primary);
  --bs-link-color-rgb: 47, 107, 79;
  --bs-link-hover-color: var(--m-primary-dark);
  --bs-link-hover-color-rgb: 36, 84, 62;
  --bs-focus-ring-color: rgb(47 107 79 / 25%);
}

/* ==========================================================================
   공통 요소
   ========================================================================== */
body { -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 750; letter-spacing: -0.3px; }
#content h1 { font-weight: 800; letter-spacing: -0.5px; }
.text-muted { color: var(--m-muted) !important; }
.text-end, .num { font-variant-numeric: tabular-nums; }

/* 버튼: Bootstrap 버튼 변수를 시안 색으로 */
.btn { --bs-btn-font-weight: 650; }
.btn-primary, .btn-success {
  --bs-btn-bg: var(--m-primary); --bs-btn-border-color: var(--m-primary);
  --bs-btn-hover-bg: var(--m-primary-dark); --bs-btn-hover-border-color: var(--m-primary-dark);
  --bs-btn-active-bg: var(--m-primary-dark); --bs-btn-active-border-color: var(--m-primary-dark);
  --bs-btn-disabled-bg: var(--m-primary); --bs-btn-disabled-border-color: var(--m-primary);
  --bs-btn-focus-shadow-rgb: 47, 107, 79;
}
.btn-outline-primary {
  --bs-btn-color: var(--m-primary); --bs-btn-border-color: var(--m-primary-line);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--m-primary); --bs-btn-hover-border-color: var(--m-primary);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--m-primary); --bs-btn-active-border-color: var(--m-primary);
  --bs-btn-disabled-color: var(--m-primary); --bs-btn-disabled-border-color: var(--m-primary-line);
  --bs-btn-focus-shadow-rgb: 47, 107, 79;
}
/* 보조 버튼: 흰 바탕 + 회녹색 테두리 */
.btn-outline-secondary {
  --bs-btn-color: var(--m-text); --bs-btn-bg: var(--m-surface); --bs-btn-border-color: var(--m-border-dark);
  --bs-btn-hover-color: var(--m-text); --bs-btn-hover-bg: #f5f7f6; --bs-btn-hover-border-color: #99aaa1;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--m-primary); --bs-btn-active-border-color: var(--m-primary);
  --bs-btn-disabled-color: var(--m-muted); --bs-btn-disabled-bg: var(--m-surface); --bs-btn-disabled-border-color: var(--m-border);
  --bs-btn-focus-shadow-rgb: 47, 107, 79;
}
.btn-outline-danger {
  --bs-btn-color: var(--m-danger-dark); --bs-btn-bg: #fffafa; --bs-btn-border-color: #e1b3b5;
  --bs-btn-hover-color: var(--m-danger-dark); --bs-btn-hover-bg: var(--m-danger-soft); --bs-btn-hover-border-color: #d88b8f;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--m-danger); --bs-btn-active-border-color: var(--m-danger);
  --bs-btn-focus-shadow-rgb: 193, 63, 69;
}
.btn-primary, .btn-success, .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger { box-shadow: var(--m-shadow-sm); }
/* 버튼 아이콘 (fragments/icon.html): 글자 앞에 붙인다. 보기 전환·로그인·닫기 버튼에는 달지 않는다 */
.btn .icon { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; flex: none; }
.btn-sm .icon { width: 15px; height: 15px; margin-right: 4px; }

/* 입력: 초점은 녹색 테두리 + 옅은 링 */
.form-control:focus, .form-select:focus { border-color: var(--m-primary); box-shadow: var(--m-focus-ring); }
.form-check-input:checked { background-color: var(--m-primary); border-color: var(--m-primary); }
.form-check-input:focus { border-color: var(--m-primary); box-shadow: var(--m-focus-ring); }
.form-label { font-weight: 650; font-size: .875rem; color: var(--m-nav-text); }

.alert-danger { --bs-alert-color: var(--m-danger-dark); --bs-alert-bg: var(--m-danger-soft); --bs-alert-border-color: #efc6c8; }
.dropdown-menu { --bs-dropdown-border-color: var(--m-border); --bs-dropdown-link-hover-bg: var(--m-primary-soft);
  --bs-dropdown-link-active-bg: var(--m-primary-soft); --bs-dropdown-link-active-color: var(--m-primary-dark);
  box-shadow: var(--m-shadow-md); padding: 6px; }
.dropdown-item { border-radius: var(--m-radius-sm); padding: 8px 11px; }
.modal { --bs-modal-border-color: var(--m-border); --bs-modal-border-radius: 10px; }

/* ==========================================================================
   AG Grid (Community 32, Quartz 테마) — 시안의 표 모양
   행 상태 클래스: row-new(새 행), row-dirty(저장 전 수정 중), ag-row-selected(선택)
   ag-theme-quartz.css 는 화면마다 app.css 보다 나중에 로드되므로, 변수는 .app-body 를 붙여 우선순위를 높인다.
   ========================================================================== */
.app-body .ag-theme-quartz {
  --ag-font-family: var(--m-font);
  --ag-font-size: 14px;
  --ag-foreground-color: var(--m-text);
  --ag-data-color: var(--m-text);
  --ag-secondary-foreground-color: var(--m-muted);
  --ag-background-color: var(--m-surface);
  --ag-odd-row-background-color: var(--m-surface);
  --ag-header-background-color: #f0f3f1;
  --ag-header-foreground-color: #526159;
  --ag-header-cell-hover-background-color: #e8eeea;
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: #dfe5e2;
  --ag-header-column-separator-height: 100%;
  --ag-header-column-resize-handle-display: none;
  --ag-border-color: var(--m-border);
  --ag-row-border-color: #e5e9e7;
  --ag-cell-horizontal-border: solid #eef1ef;
  --ag-cell-horizontal-padding: 12px;
  --ag-header-height: 39px;
  --ag-row-height: 40px;
  --ag-row-hover-color: #f7faf8;
  --ag-selected-row-background-color: #e8f2ec;
  --ag-active-color: var(--m-primary);
  --ag-range-selection-border-color: var(--m-primary);
  --ag-input-focus-border-color: var(--m-primary);
  --ag-input-focus-box-shadow: var(--m-focus-ring);
  --ag-checkbox-checked-color: var(--m-primary);
  --ag-wrapper-border-radius: var(--m-radius);
  --ag-border-radius: var(--m-radius-sm);
}
.ag-theme-quartz .ag-root-wrapper { box-shadow: var(--m-shadow-sm); }
.ag-theme-quartz .ag-header-cell-text { font-size: 12.5px; font-weight: 750; }
.ag-theme-quartz .ag-cell { font-variant-numeric: tabular-nums; }
.ag-theme-quartz .ag-overlay-no-rows-center, .ag-theme-quartz .ag-overlay-loading-center { color: var(--m-muted); }

/* 선택 행: 연녹색 + 왼쪽 막대. Quartz 가 선택 배경을 행 위(::before)에 덧칠하므로 막대는 첫 칸에 그린다 */
.ag-theme-quartz .ag-row-selected > .ag-cell:first-child { box-shadow: inset 3px 0 var(--m-primary); }
/* 새 행: 옅은 파랑 + 왼쪽 파란 막대 */
.ag-theme-quartz .ag-row.row-new { background-color: #f3f8ff; box-shadow: inset 3px 0 #5b83ad; }
/* 저장 전 수정 중: 옅은 노랑 + 위아래 노란 선 */
.ag-theme-quartz .ag-row.row-dirty { background-color: #fffbea; border-top: 1px solid #e5ca67; border-bottom-color: #e5ca67; }
/* 작업일자에 생긴 줄(재고의 금일 매입 등): 옅은 녹색 + 왼쪽 녹색 막대 */
.ag-theme-quartz .ag-row.row-today { background-color: #f1f7f4; box-shadow: inset 3px 0 var(--m-primary); }
/* 거래 중지 거래처 줄: 회색 바탕 + 흐린 글자 (음수 빨강 칸은 그대로) */
.ag-theme-quartz .ag-row.row-stopped { background-color: #f2f4f3; color: var(--m-muted); }
/* 편집 중인 칸: 녹색 두꺼운 테두리 */
.ag-theme-quartz .ag-cell-inline-editing { border: 2px solid var(--m-primary) !important; border-radius: 3px;
  box-shadow: var(--m-focus-ring); }
.ag-theme-quartz .ag-cell-inline-editing input { text-align: inherit; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   레이아웃: 상단 메뉴 + 본문 + 하단 줄
   ========================================================================== */
.app-body { min-height: 100vh; display: flex; flex-direction: column; }
.app-body > main { flex: 1 0 auto; }

.app-nav { min-height: var(--m-nav-h); padding-top: 0; padding-bottom: 0; background: var(--m-surface);
  border-bottom: 1px solid var(--m-border); }
.app-brand { display: flex; align-items: center; gap: 7px; font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.8px; color: var(--m-primary-dark); }
.app-brand:hover, .app-brand:focus { color: var(--m-primary-dark); }
.app-nav .nav-link { color: var(--m-nav-text); font-weight: 650; position: relative; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus { color: var(--m-primary); }
.app-nav .nav-link.active, .app-nav .nav-link.show { color: var(--m-primary); font-weight: 800; }
.app-nav-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 8px 0; }
.app-date-btn { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px;
  border: 1px solid var(--m-primary-line); border-radius: 7px; background: #f2f8f4; color: var(--m-primary-dark); }
.app-date-btn:hover { border-color: var(--m-primary); background: #eaf4ee; }
.app-date-btn:focus-visible { outline: 0; box-shadow: var(--m-focus-ring); border-color: var(--m-primary); }
.app-date-label { font-size: .75rem; color: #61766a; border-right: 1px solid #bfd3c7; padding-right: 8px; }
.app-date-btn strong { font-size: .875rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.app-user { font-weight: 700; }
.app-logout { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 0;
  color: var(--m-muted); font-size: .875rem; }
.app-logout:hover, .app-logout:focus-visible { color: var(--m-danger); }

/* 넓은 화면: 메뉴 높이를 줄 전체로, 지금 메뉴에 밑줄 */
@media (min-width: 992px) {
  .app-nav > .container-fluid, .app-nav .navbar-collapse, .app-nav .navbar-nav { align-self: stretch; }
  .app-nav .nav-item { display: flex; }
  .app-nav .navbar-nav .nav-link { display: flex; align-items: center; padding: 0 11px; }
  .app-nav .navbar-nav .nav-link.active::before { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0; background: var(--m-primary); }
}
/* 노트북(1366px)에서 메뉴가 줄바꿈되지 않도록 간격을 줄인다 */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .app-nav .navbar-nav .nav-link { padding: 0 7px; font-size: .875rem; }
  .app-nav .navbar-nav .nav-link.active::before { left: 7px; right: 7px; }
  .app-date-label { display: none; }
}
@media (max-width: 991.98px) {
  .app-nav .nav-link.active { box-shadow: inset 3px 0 var(--m-primary); padding-left: 10px; }
}

.app-footer { height: var(--m-footer-h); flex: none; display: flex; align-items: center; justify-content: center;
  gap: 14px; border-top: 1px solid var(--m-border); background: #edf0ee; color: #89948e; font-size: .7rem; }

/* 로그인 */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px; }
.login-card { width: 100%; max-width: 380px; border-color: var(--m-border); border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-md) !important; }
.login-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-size: 1.9rem; font-weight: 800; letter-spacing: -1px; color: var(--m-primary-dark); }
.login-sub { margin: 4px 0 24px; text-align: center; color: var(--m-muted); font-size: .875rem; }
.login-version { margin: 0; color: #89948e; font-size: .75rem; }

/* 메인 메뉴 (오늘의 업무): 제목 줄 + 요약 칸 4개 + 바로가기 3×3 */
.home { max-width: 1400px; }
.home-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.home-heading h1 { font-size: 1.6rem; }
.home-workdate { display: flex; align-items: center; gap: 16px; }
.home-workdate > div { text-align: right; }
.home-workdate > div > span { display: block; font-size: .75rem; color: var(--m-muted); }
.home-workdate strong { white-space: nowrap; }
.home-workdate strong { font-size: 1.15rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.home-workdate strong b { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 12px; vertical-align: 2px;
  background: var(--m-primary-soft); color: var(--m-primary); font-size: .75rem; }
.home-workdate .btn { display: inline-flex; align-items: center; }
.app-date-btn .icon, .app-logout .icon { width: 17px; height: 17px; }

.home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.home-stat { padding: 18px 20px 15px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  background: var(--m-surface); box-shadow: var(--m-shadow-sm); min-width: 0; }
.home-stat-label { display: flex; align-items: center; justify-content: space-between; color: #5b6861; font-size: .875rem; }
.home-stat-label .dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-sales { background: var(--m-accent); box-shadow: 0 0 0 4px #edf4f0; }
.dot-receipt { background: #6382a9; box-shadow: 0 0 0 4px #eef3f8; }
.dot-receivable { background: #bd6a6e; box-shadow: 0 0 0 4px #fbeff0; }
.dot-stock { background: #8a8172; box-shadow: 0 0 0 4px #f4f1ed; }
.home-stat-value { display: flex; align-items: baseline; gap: 4px; margin-top: 12px; font-size: 1.6rem; font-weight: 800;
  letter-spacing: -0.4px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.home-stat-value small { font-size: .875rem; font-weight: 600; color: var(--m-muted); }
.home-stat-meta { margin-top: 10px; color: var(--m-primary); font-size: .78rem; }
.home-stat-meta.is-warning { color: var(--m-danger); }

.home-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.home-section-heading h2 { font-weight: 800; }
.home-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-shortcut { position: relative; display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 14px 16px;
  border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface); box-shadow: var(--m-shadow-sm);
  color: var(--m-text); text-decoration: none; }
.home-shortcut::after { content: "→"; margin-left: auto; color: #8b9791; font-size: 1.1rem; }
.home-shortcut:hover { border-color: #8bb29d; box-shadow: 0 5px 16px rgb(39 82 59 / 9%); color: var(--m-text); }
.home-shortcut:hover::after { color: var(--m-primary); }
.home-shortcut:focus-visible { outline: 0; border-color: var(--m-primary); box-shadow: var(--m-focus-ring); }
.home-shortcut-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--m-radius);
  background: var(--m-primary-soft); color: var(--m-primary); }
.home-shortcut-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.home-shortcut-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-shortcut-text strong { font-size: 1rem; }
.home-shortcut-text small { color: var(--m-muted); font-size: .78rem; }
@media (max-width: 991.98px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .home-stats, .home-shortcuts { grid-template-columns: 1fr; }
}

/* 팝업 공통: 머리글·바닥글 여백, 제목 굵기 */
.modal-header { padding: 16px 20px; }
.modal-title { font-weight: 750; letter-spacing: -0.2px; }
.modal-body { padding: 16px 20px; }
.modal-footer { padding: 12px 20px; background: var(--m-surface-alt); border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit; }
.modal-eyebrow { display: block; margin-bottom: 2px; color: var(--m-primary); font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; }
.key-hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 0; padding: 7px;
  border-radius: var(--m-radius-sm); background: #f2f4f3; color: var(--m-muted); font-size: .75rem; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 20px; padding: 0 5px;
  border: 1px solid #cbd3cf; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: #4f5b55;
  font: 650 11px var(--m-font); }

/* 작업일자 선택 팝업: 거래가 있는 날은 옅은 녹색, 고른 날은 진한 녹색 */
.wd-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.wd-legend { color: var(--bs-secondary-color); }
.wd-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.wd-swatch-trade { background: #cfe2d7; }
.wd-swatch-selected { background: var(--m-primary); }
#wd-calendar { --fc-border-color: var(--m-border); --fc-today-bg-color: transparent; --fc-neutral-bg-color: var(--m-surface-alt);
  font-size: .875rem; }
#wd-calendar .fc-daygrid-day { cursor: pointer; }
/* 칸 높이를 줄여 노트북(768px 높이)에서도 팝업이 한 화면에 들어가게 한다 (기본은 칸마다 약 73px) */
#wd-calendar .fc-daygrid-day-frame { min-height: 44px; }
#wd-calendar .fc-daygrid-day-events { min-height: 0; margin: 0 !important; }
#wd-calendar .fc-daygrid-day-bottom { display: none; }
#wd-calendar .fc-daygrid-day:hover { background: #f2f7f4; }
#wd-calendar .fc-col-header-cell { background: #f0f3f1; font-weight: 700; color: var(--m-muted); }
#wd-calendar .fc-col-header-cell.fc-day-sun { color: var(--m-danger); }
#wd-calendar .fc-day-today .fc-daygrid-day-number { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
#wd-calendar .fc-bg-event.wd-trade { background: #cfe2d7; opacity: 1; }
#wd-calendar .fc-bg-event.wd-selected { background: var(--m-primary); opacity: .85; }
#wd-calendar .fc-col-header-cell-cushion, #wd-calendar .fc-daygrid-day-number { position: relative; z-index: 4;
  color: inherit; text-decoration: none; }
#wd-calendar .wd-day-selected .fc-daygrid-day-number { color: #fff; font-weight: 800; }

/* 카드 공통 (거래처 분배·미수금·재고): 머리글(제목 + 건수 + 오른쪽 범례·버튼) / 본문(그리드) / 바닥글(안내 한 줄)
   카드 안 그리드는 카드가 테두리를 가지므로 그리드 테두리·모서리·그림자를 없앤다 */
.m-card { display: flex; flex-direction: column; border: 1px solid var(--m-border); border-radius: var(--m-radius);
  background: var(--m-surface); box-shadow: var(--m-shadow-sm); overflow: hidden; }
.m-card-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px;
  padding: 0 12px 0 16px; border-bottom: 1px solid var(--m-border); }
.m-card-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.m-card-title h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.m-card-title span { color: var(--m-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.m-card-grid { flex: 1; min-height: 0; width: 100%; }
.m-card .ag-root-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.m-card .ag-theme-quartz { --ag-wrapper-border-radius: 0; }
.m-card-footer { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px;
  min-height: 34px; padding: 4px 13px; border-top: 1px solid var(--m-border); background: #fafbfa; color: var(--m-muted);
  font-size: .7rem; }
.m-card-footer kbd + kbd { margin-left: 3px; }
.m-card-footer .icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px; }
/* 범례: 색 칸 + 설명 (카드 머리글 오른쪽) */
.m-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--m-muted); font-size: .75rem; white-space: nowrap; }
.m-legend i { width: 14px; height: 14px; border: 1px solid var(--m-border); border-radius: 3px; }
.m-legend .is-today { border-color: #a9c8b7; background: #f1f7f4; }
.m-legend .is-stopped { border-color: var(--m-border-dark); background: #f2f4f3; }

/* 화면을 꽉 채우는 본문: 제목 줄은 제 높이, 카드가 남는 높이를 채우고 표 안에서만 스크롤한다 (1366×768 한 화면) */
.page-fill { display: flex; flex-direction: column; height: calc(100vh - var(--m-nav-h) - var(--m-footer-h)); min-height: 520px; }
.page-fill > .m-card { flex: 1; min-height: 0; }

/* 배지 공통: 알약 모양. 처리방법(수불내역 열)과 거래 중지 표시 */
.m-badge, .sale-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.m-badge-stopped { margin-left: 6px; padding: 0 6px; border: 1px solid var(--m-border-dark); border-radius: 4px;
  background: var(--m-surface); color: var(--m-muted); font-size: 11px; font-weight: 650; vertical-align: 1px; }

/* 처리방법 표시(수불내역 열): 색만 정한다 (모양은 배지 공통) */
.sale-credit { background: var(--m-blue-soft); color: var(--m-blue); }
.sale-cash { background: #edf6ef; color: #307044; }
.sale-none { background: #f4f1ec; color: #746a59; }
.sale-custom { background: #fff4dc; color: #8a5a00; }

/* 매출대금 처리방법 팝업: 세로 선택지 + 숫자키 */
.st-preview { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--m-radius-sm); background: var(--m-primary-soft);
  color: var(--m-primary-dark); font-weight: 650; font-variant-numeric: tabular-nums; }
.st-options { display: grid; gap: 7px; }
.st-option { display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 8px 11px; text-align: left;
  border: 1px solid var(--m-border); border-radius: 7px; background: var(--m-surface); color: var(--m-text); }
.st-option:hover { border-color: #8fb49f; }
.st-option:focus-visible, .st-option.is-current { outline: 0; border: 2px solid var(--m-primary); background: #f2f8f4;
  padding: 7px 10px; }
.st-option:focus-visible kbd, .st-option.is-current kbd { background: var(--m-primary); border-color: var(--m-primary-dark); color: #fff; }
.st-option span { display: flex; flex-direction: column; gap: 2px; }
.st-option strong { font-size: .9375rem; }
.st-option small { color: var(--m-muted); font-size: .75rem; }

/* 인쇄: 내비·하단 줄·팝업 숨김 (F013에서 확장) */
@media print {
  .app-nav, .app-footer, .modal { display: none !important; }
}

/* ==========================================================================
   화면별 규칙. 그리드 높이는 화면 높이(vh)에서 메뉴·제목 등을 뺀 값이며,
   하단 줄 높이(--m-footer-h)도 함께 뺀다.
   ========================================================================== */

/* 기준정보 화면 (품목·거래처) */
.master-grid { height: 460px; width: 100%; }
.customer-readonly dt { font-weight: 500; color: var(--bs-secondary-color); }
.customer-readonly dd { margin-bottom: .15rem; }

/* 매입 입력 (편집 그리드) */
.purchase-grid { height: calc(100vh - 260px - var(--m-footer-h)); min-height: 360px; width: 100%; }

/* 물품 분배: 상단 로트 + 요약 줄 + 하단 분배 */
.lot-grid { height: 32vh; min-height: 200px; width: 100%; }
.dist-grid { height: calc(68vh - 290px - var(--m-footer-h)); min-height: 220px; width: 100%; }
/* 선택 로트 요약 줄: 연녹색 띠에 "이름 값" 항목을 세로선으로 나눈다. 높이는 한 줄(약 38px)로 유지 */
.lot-summary { display: flex; flex-wrap: wrap; align-items: center; min-height: 38px; padding: 5px 0;
  border: 1px solid #a9c8b7; border-radius: var(--m-radius); background: #f1f7f4; color: var(--m-muted); }
.lot-summary .ls-item { display: inline-flex; align-items: baseline; gap: 7px; padding: 1px 16px;
  border-right: 1px solid #d2e1d9; font-size: .75rem; }
.lot-summary .ls-item:last-child { border-right: 0; }
.lot-summary .ls-item strong { color: var(--m-text); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.lot-summary .ls-lot strong { color: var(--m-primary); }
.lot-summary .ls-stock strong { color: var(--m-danger); font-size: 1.05rem; }
.lot-summary .ls-empty { padding: 0 16px; }

/* 합계 칸 공통 (수금 6칸, 재고·미수금·거래처 조회). 흰 칸 + 옅은 그림자, 금액은 오른쪽 정렬 */
.settle-summary, .summary-boxes { font-variant-numeric: tabular-nums; }
.settle-summary span, .summary-boxes span { font-size: .78rem; color: var(--m-muted); }
.settle-summary strong, .summary-boxes strong { text-align: right; font-size: 1.1rem; font-weight: 780;
  letter-spacing: -0.2px; min-height: 1.5em; }

/* 수금 (S06): 상단 합계 6칸을 한 띠로 잇고, 금일잔액(.is-total)만 진한 녹색 */
.settle-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface); box-shadow: var(--m-shadow-sm); }
.settle-summary > div { display: flex; flex-direction: column; padding: 5px 14px; border-right: 1px solid var(--m-border); }
.settle-summary > div:last-child { border-right: 0; }
.settle-summary > .is-total { background: var(--m-primary); }
.settle-summary > .is-total span { color: #d8e8df; }
.settle-summary > .is-total strong { color: #fff; }
@media (max-width: 768px) { .settle-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.settle-grid { height: calc(100vh - 330px - var(--m-footer-h)); min-height: 300px; width: 100%; }

/* 합계 칸 (재고 S08, 미수금 S07, 거래처 조회 등). 재고·미수금의 표는 카드 공통(.m-card + .page-fill)으로 높이를 채운다 */
.summary-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap: 8px; }
.summary-boxes > div { display: flex; flex-direction: column; padding: 4px 12px; border: 1px solid var(--m-border);
  border-radius: var(--m-radius); background: var(--m-surface); box-shadow: var(--m-shadow-sm); }
/* 제목 줄 안 합계 칸(미수금): 이름과 금액을 한 줄로 놓아 버튼 높이(31px)에 맞춘다.
   두 줄 칸(약 52px)이면 제목 줄이 커져 제목·카드가 다른 화면보다 아래로 내려간다 */
.summary-inline { grid-template-columns: repeat(2, auto); }
.summary-inline > div { flex-direction: row; align-items: center; gap: 12px; height: 31px; padding: 0 12px; }
.summary-inline span { white-space: nowrap; }
.summary-inline strong { min-width: 84px; min-height: 0; font-size: 1rem; }
/* 대표 합계 칸(재고의 총 재고액): 옅은 녹색 */
.summary-boxes > .is-key { border-color: var(--m-primary-line); background: #f1f7f4; }
.summary-boxes > .is-key strong { color: var(--m-primary-dark); }
/* 카드 아래쪽 합계 칸 줄 */
.m-card-summary { flex: none; padding: 8px 12px; border-top: 1px solid var(--m-border); background: #fafbfa; }

/* 거래처 분배 (S05, Figma 2차 시안): 좌측 거래처 패널 + 우측 거래처 머리글(잔액 9칸) + 분배 내역 카드
   전체 높이 = 화면 − 메뉴 − 하단 줄 − 본문 위아래 여백(32) − 제목 줄(50). 안쪽 그리드는 남는 높이를 채운다 */
.cd-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 14px;
  height: calc(100vh - var(--m-nav-h) - var(--m-footer-h) - 82px); min-height: 520px; }
/* 카드 테두리·머리글·바닥글은 카드 공통(.m-card) 규칙을 쓴다 */
.cd-panel { min-height: 0; }
.cd-panel .m-card-header b { padding: 3px 7px; border-radius: 4px; background: var(--m-primary-soft); color: var(--m-primary);
  font-size: .75rem; font-variant-numeric: tabular-nums; }
.cd-search { display: flex; align-items: center; gap: 7px; height: 36px; margin: 10px 12px; padding: 0 9px;
  border: 1px solid var(--m-border-dark); border-radius: 6px; background: var(--m-surface-alt); color: #77847d; }
.cd-search:focus-within { border-color: var(--m-primary); background: #fff; box-shadow: var(--m-focus-ring); }
.cd-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .85rem; }
.cd-count { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 23px; height: 23px; border-radius: 50%;
  background: #edf1ef; color: var(--m-muted); font-size: .7rem; font-weight: 700; }
.cd-panel .ag-row-selected .cd-count { background: #fff; color: var(--m-primary); }

.cd-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.cd-account-title { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 16px;
  border-bottom: 1px solid var(--m-border); }
.cd-account-title span:first-child { display: block; color: var(--m-muted); font-size: .7rem; }
.cd-account-title h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.cd-account-title h2 small { margin-left: 4px; color: var(--m-muted); font-size: .75rem; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.cd-trade-count { margin-left: auto; padding: 4px 9px; border-radius: 13px; background: var(--m-primary-soft);
  color: var(--m-primary); font-size: .75rem; font-weight: 750; }
.cd-balances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-bgroup { min-width: 0; border-right: 1px solid var(--m-border); }
.cd-bgroup:last-child { border-right: 0; }
.cd-bgroup-label { display: flex; align-items: center; height: 26px; padding: 0 12px; background: #f3f5f4;
  border-bottom: 1px solid #dfe4e1; color: #69756e; font-size: .7rem; font-weight: 750; letter-spacing: .03em; }
.cd-bgroup-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; height: 62px;
  margin: 0; padding: 7px 9px; border-right: 1px solid #e4e8e6; }
.cd-cell:last-child { border-right: 0; }
.cd-cell > span { display: flex; align-items: center; gap: 4px; color: var(--m-muted); font-size: .72rem; white-space: nowrap; }
.cd-cell > span small { padding: 1px 4px; border-radius: 3px; background: #e7f0eb; color: var(--m-primary); font-size: .62rem;
  font-weight: 700; }
.cd-cell output { display: block; overflow: hidden; text-align: right; font-size: .95rem; font-weight: 750;
  font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.cd-cell.is-input { background: #f8fbf9; }
.cd-cell input { height: 30px; padding: 0 7px; text-align: right; font-size: .9rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
/* 금일잔액: 진한 녹색 칸 */
.cd-cell.is-total { background: var(--m-primary); }
.cd-cell.is-total > span { color: #d8e8df; }
.cd-cell.is-total output { color: #fff; font-size: 1.05rem; font-weight: 800; }
/* 녹색 바탕 위의 음수(text-danger)는 빨강이 묻히므로 옅은 분홍으로 */
.settle-summary > .is-total strong.text-danger, .cd-cell.is-total output.text-danger { color: #ffd2d4 !important; }

.cd-lines { flex: 1; min-height: 0; }
.cd-line-grid .ag-row-pinned { background: #e9eeeb; font-weight: 800; }
/* 정렬 세그먼트: 라디오 두 개를 붙인 알약 버튼 */
.cd-segmented { display: flex; align-items: center; height: 34px; padding: 3px; border: 1px solid var(--m-border);
  border-radius: 6px; background: #f1f4f2; }
.cd-segmented label { display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 4px;
  color: var(--m-muted); font-size: .78rem; font-weight: 700; cursor: pointer; }
.cd-segmented .btn-check:checked + label { background: #fff; color: var(--m-primary); box-shadow: 0 1px 3px rgb(25 42 33 / 12%); }
.cd-segmented .btn-check:focus-visible + label { box-shadow: var(--m-focus-ring); }

@media (max-width: 991.98px) {
  .cd-layout { grid-template-columns: 1fr; height: auto; }
  .cd-customer-grid { height: 240px; flex: none; }
  .cd-balances { grid-template-columns: 1fr; }
  .cd-bgroup { border-right: 0; border-bottom: 1px solid var(--m-border); }
  .cd-line-grid { height: 320px; flex: none; }
}

/* 거래처 조회 (S10): 일자별 그리드 + 합계 + 품목 상세. 아래 안내 문구까지 한 화면에 들어가도록 높이를 잡았다 */
.cl-customer-input { width: 13em; }
.cl-day-grid { height: calc(50vh - 146px - var(--m-footer-h) / 2); min-height: 220px; width: 100%; }
.cl-line-grid { height: calc(50vh - 166px - var(--m-footer-h) / 2); min-height: 200px; width: 100%; }