/* ============================================================
   fw.css — (주)더자란 관리시스템 페이지 레이어
   styles.css(토큰) → app.css(셸·컴포넌트) 다음에 로드.
   DESIGN.md 규칙 준수: 시맨틱 토큰만 사용, 원시 hex 금지.
   ============================================================ */

/* ---- helpers ---- */
.muted { color: var(--text-subtle); }
form { margin: 0; }
.sidebar-logo { text-decoration: none; }
.pad-note { padding: 14px 2px; }
.empty-cell { text-align: center; padding: 28px; color: var(--text-subtle); }

/* ---- flash ---- */
.flash { grid-column: 1 / -1; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; border: 1px solid; margin-bottom: 4px; }
.flash.ok { background: var(--positive-bg); color: var(--basil-800); border-color: var(--basil-100); }
.flash.err { background: var(--critical-bg); color: var(--critical); border-color: color-mix(in oklch, var(--critical) 35%, transparent); }

/* ---- sections in col-main / single ---- */
.col-main section + section { margin-top: 22px; }
.main--single { row-gap: 22px; }
@media (max-width: 767px) { .main--single { row-gap: 12px; } }
.section-hd .action { display: flex; gap: 8px; align-items: center; }

/* ---- forms ---- */
.form-card { max-width: 540px; }
.form-grid { display: grid; gap: 13px; }
.field { display: flex; flex-direction: column; }
select.input { height: 36px; }
textarea.input { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
@media (max-width: 767px) { select.input { height: 44px; } }

/* ---- buttons ---- */
.btn--critical { background: var(--surface-card); border: 1px solid var(--critical); color: var(--critical); }
.btn--critical:hover { background: var(--critical-bg); }
.btn--sm { height: 27px; padding: 0 11px; font-size: 11.5px; }
@media (max-width: 767px) { .btn--sm { height: 44px; padding: 0 16px; font-size: 13.5px; } }
.table-actions { margin-top: 12px; display: flex; gap: 8px; }

/* ---- tables ---- */
.card--table { padding: 0; overflow: hidden; }
.table th.num { font-family: var(--font-sans); }
.table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); }
.table tr.is-danger td { background: var(--critical-bg); }
.table tr.is-warn td { background: var(--caution-bg); }
.table tr.is-done td { color: var(--text-disabled); }

/* 열 5개 이하 표 → 모바일 카드형 변환 (DESIGN.md §6.1). td에 data-label 필요 */
@media (max-width: 767px) {
  .table--kv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--kv tr { display: block; border-bottom: 1px solid var(--border-subtle); padding: 6px 0; }
  .table--kv tr:last-child { border-bottom: 0; }
  .table--kv td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; height: auto; padding: 4px 14px; border: 0; font-size: 13px; }
  .table--kv td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 600; }
}

/* ---- card 상단 라벨 ---- */
.card-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.card-label svg { width: 15px; height: 15px; }
.card-label .spacer { margin-left: auto; }
.card-label .sub { font-weight: 500; color: var(--text-subtle); }
.card-label a { font-weight: 600; font-size: 11.5px; }
.kv-block { margin-top: 10px; }
.card-err { font-size: 12.5px; color: var(--text-subtle); }

/* ============ 대시보드 ============ */

/* hero */
.card--hero .hero-label { font-size: 11.5px; font-weight: 700; color: var(--basil-200); letter-spacing: 0.02em; margin-bottom: 9px; }
.card--hero .hero-sub { font-size: 11px; color: var(--basil-300); margin-top: 8px; }

/* 입출고 칩 */
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* 온도 카드 sensor-* 는 app.css. 갱신 캡션 */
.card-foot { font-size: 11px; color: var(--text-subtle); margin-top: 8px; }

/* CS 메모 (레일) */
.memo-rail-hd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--text-strong); margin: 10px 0 2px; }
.memo-rail-hd:first-of-type { margin-top: 0; }
.memo-rail-hd svg { width: 13px; height: 13px; color: var(--text-muted); }
.memo-rail-hd .n { font-weight: 600; color: var(--text-subtle); }
.memo-line { font-size: 12.5px; color: var(--text-body); line-height: 1.45; padding: 5px 0; border-top: 1px solid var(--border-subtle); }
.memo-line:first-of-type { border-top: 0; }
.memo-line small { color: var(--text-subtle); }
.memo-none { font-size: 12px; color: var(--text-subtle); padding: 4px 0; }

/* 재고확인 메타 */
.chk-line { font-size: 11px; margin-top: 9px; }
.chk-line.fresh { color: var(--positive); font-weight: 600; }
.chk-line.stale { color: var(--harvest-700); font-weight: 600; }
.chk-line.none { color: var(--text-subtle); }
.chk-line small { color: var(--text-subtle); font-weight: 400; }
.chk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }

/* 모바일 섹션 스택 순서 (DESIGN.md §3) — 히어로→칩→온도→재고→메모→모니터링→유통기한 */
@media (max-width: 767px) {
  .main--dash .col-main, .main--dash .col-rail { display: contents; }
  .main--dash .sec-hero { order: 1; }
  .main--dash .sec-chips { order: 2; }
  .main--dash .sec-temp { order: 3; }
  .main--dash .sec-stock { order: 4; }
  .main--dash .sec-memo { order: 5; }
  .main--dash .sec-monitor { order: 6; }
  .main--dash .sec-expiring { order: 7; }
  .main--dash section { margin-top: 0 !important; }
}

/* ---- 드로어 하단 유틸 (모바일 전용, DESIGN.md §3) ---- */
.sidebar-utils { display: none; }
@media (max-width: 767px) {
  .sidebar-utils { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
  .sidebar-utils form { margin: 0; display: flex; }
  .sidebar-utils .side-item { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
}

/* ============ 고객관리(cdash) — 토큰 브리지 ============ */
.cdash {
  --c-ink: var(--ink-950); --c-ink2: var(--ink-600); --c-ink3: var(--ink-500);
  --c-line: var(--border-subtle); --c-line2: var(--border-default);
  --c-accent: var(--basil-600); --c-accent-ink: var(--basil-800);
  --c-accent-soft: var(--basil-50); --c-accent-soft2: var(--basil-100);
  --c-bar: var(--surface-sunken); --c-surface: var(--surface-card);
  --c-mono: var(--font-mono);
  font-family: var(--font-sans); color: var(--c-ink); letter-spacing: -0.01em;
}
.cdash .page-sub { font-size: 12.5px; color: var(--c-ink2); margin: 0 0 14px; }
.cdash .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cdash .toolbar-left, .cdash .toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdash .segmented { display: inline-flex; background: var(--c-surface); border: 1px solid var(--c-line2); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.cdash .segmented a { font-size: 13px; font-weight: 500; color: var(--c-ink2); text-decoration: none; padding: 7px 13px; border-radius: var(--radius-sm); white-space: nowrap; }
.cdash .segmented a:hover { color: var(--c-ink); }
.cdash .segmented a.is-active { background: var(--brand); color: var(--brand-contrast); font-weight: 600; box-shadow: var(--shadow-xs); }
.cdash .daterange { display: inline-flex; align-items: center; gap: 4px; background: var(--c-surface); border: 1px solid var(--c-line2); border-radius: var(--radius-md); padding: 4px 6px; }
.cdash .step { width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--c-ink2); font-size: 18px; cursor: pointer; line-height: 1; display: grid; place-items: center; text-decoration: none; }
.cdash .step:hover { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.cdash .step.disabled { color: var(--text-disabled); pointer-events: none; }
.cdash .daterange input[type=date] { font: inherit; font-size: 13px; color: var(--c-ink); border: 0; background: transparent; padding: 4px 2px; font-variant-numeric: tabular-nums; width: 116px; cursor: pointer; }
.cdash .daterange input[type=date]:focus { outline: 0; }
.cdash .daterange input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.cdash .daterange .sep { color: var(--c-ink3); font-size: 13px; padding: 0 2px; }
.cdash .btn-csv { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-accent-ink); background: var(--c-surface); border: 1px solid var(--c-line2); border-radius: var(--radius-md); padding: 9px 14px; cursor: pointer; text-decoration: none; }
.cdash .btn-csv:hover { background: var(--c-accent-soft); border-color: var(--c-accent-soft2); }
.cdash .btn-csv svg { width: 15px; height: 15px; }
.cdash .summary { font-size: 13px; color: var(--c-ink2); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cdash .summary b { color: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cdash .summary .pipe { color: var(--c-line2); }
.cdash .table-wrap { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: auto; max-height: 74vh; box-shadow: var(--shadow-sm); }
.cdash table { width: 100%; border-collapse: collapse; min-width: 1060px; background: transparent; font-size: 13.5px; }
.cdash thead th { position: sticky; top: 0; z-index: 2; background: var(--c-surface); text-align: left; font-size: 12px; font-weight: 600; color: var(--c-ink2); padding: 14px 16px; white-space: nowrap; border-bottom: 1px solid var(--c-line2); }
.cdash th.num, .cdash td.num { text-align: right; }
.cdash th.ctr, .cdash td.ctr { text-align: center; }
.cdash tbody td { padding: 14px 16px; font-size: 13.5px; color: var(--c-ink); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.cdash tbody tr:last-child td { border-bottom: 0; }
.cdash tbody tr:hover { background: var(--surface-sunken); }
.cdash tr.repeat td:first-child { box-shadow: inset 3px 0 0 var(--c-accent); }
.cdash .cust-name { display: inline-block; font-weight: 600; color: var(--c-ink); font-size: 14px; text-decoration: none; }
.cdash .cust-name:hover { color: var(--c-accent); text-decoration: underline; }
.cdash .cust-name .alias { color: var(--c-accent); font-weight: 500; margin-left: 1px; }
.cdash .cust-sub { margin-top: 3px; font-family: var(--c-mono); font-size: 11.5px; color: var(--c-ink3); white-space: nowrap; }
.cdash .cust-sub .key { color: var(--c-ink2); }
.cdash .cell-mono { font-family: var(--c-mono); font-size: 12.5px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cdash .cell-sub-mono { margin-top: 3px; font-family: var(--c-mono); font-size: 11.5px; color: var(--c-ink3); white-space: nowrap; }
.cdash .cell-date { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-ink); white-space: nowrap; }
.cdash .cell-date .t { color: var(--c-ink3); margin-left: 7px; font-size: 12.5px; }
.cdash .money { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--c-ink); white-space: nowrap; }
.cdash td.total { min-width: 152px; }
.cdash .total-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; color: var(--c-ink); text-align: right; }
.cdash .bar { margin-top: 8px; height: 4px; border-radius: 3px; background: var(--c-bar); overflow: hidden; }
.cdash .bar > span { display: block; height: 100%; border-radius: 3px; width: var(--w, 0%); background: var(--basil-500); }
.cdash .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--ink-100); color: var(--c-ink2); height: auto; }
.cdash .badge.hot { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.cdash .dash-c { color: var(--c-ink3); }
.cdash .cycle { font-variant-numeric: tabular-nums; color: var(--c-ink); }
.cdash .cycle .u { color: var(--c-ink3); font-size: 11.5px; margin-left: 1px; }
.cdash td.addr { max-width: 264px; }
.cdash .addr-text { font-size: 12.5px; color: var(--c-ink2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cdash tbody tr[onclick] { cursor: pointer; }
.cdash .go { color: var(--c-accent-ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.cdash .search-box { display: flex; gap: 10px; margin: 4px 0 18px; max-width: 660px; }
.cdash .search-box input { flex: 1; font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--c-line2); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-ink); }
.cdash .search-box input:focus { outline: none; border-color: var(--focus-ring); box-shadow: var(--shadow-focus); }
.cdash .search-box button { font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-contrast); background: var(--brand); border: 0; border-radius: var(--radius-md); padding: 0 24px; cursor: pointer; }
.cdash .search-box button:hover { background: var(--brand-strong); }

@media (max-width: 767px) {
  .cdash .toolbar { flex-direction: column; align-items: stretch; }
  .cdash .toolbar-left, .cdash .toolbar-right { justify-content: space-between; }
  .cdash .table-wrap { max-height: none; overflow: visible; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .cdash table { min-width: 0; width: 100%; }
  .cdash thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cdash tbody tr { display: block; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-md); margin-bottom: 12px; box-shadow: var(--shadow-xs); overflow: hidden; }
  .cdash tr.repeat td:first-child { box-shadow: none; }
  .cdash tr.repeat { box-shadow: var(--shadow-xs), inset 3px 0 0 var(--c-accent); }
  .cdash tbody td { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--c-line); text-align: right; }
  .cdash tbody tr td:last-child { border-bottom: 0; }
  .cdash td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--c-ink2); text-align: left; flex: none; }
  .cdash td.num, .cdash td.ctr { text-align: right; }
  .cdash td.cust, .cdash td.addr, .cdash td.total { flex-direction: column; align-items: stretch; text-align: left; }
  .cdash .addr-text { -webkit-line-clamp: unset; }
  .cdash td.total .total-val { text-align: left; }
}

/* ---- 고객관리내역 피드 ---- */
.cdash .feed { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.cdash .feed-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-xs); }
.cdash .feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.cdash .feed-cust { font-weight: 600; color: var(--c-ink); text-decoration: none; font-size: 14px; }
.cdash .feed-cust:hover { color: var(--c-accent); text-decoration: underline; }
.cdash .feed-time { font-size: 12px; color: var(--c-ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdash .feed-body { font-size: 14px; color: var(--c-ink); white-space: pre-wrap; line-height: 1.55; }
.cdash .feed-meta { margin-top: 8px; font-size: 11.5px; color: var(--c-ink3); font-family: var(--c-mono); }
.cdash .feed-meta a { color: var(--c-ink3); }

/* ---- 고객 상세 ---- */
.hd-alias { color: var(--text-subtle); font-weight: 600; }
.detail-stats { display: flex; gap: 8px; flex-wrap: wrap; }
/* 인풋(36px) 옆 버튼 높이 정렬 — 데스크톱만 (모바일은 44px 유지) */
@media (min-width: 768px) {
  .alias-form .btn, .memo-form .btn, .cs-add .btn { height: 36px; }
}
.alias-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.alias-form .field-label { margin: 0; white-space: nowrap; }
.alias-form input { flex: 1; }
.addr-list { display: flex; flex-direction: column; gap: 8px; }
.addr-item { display: flex; gap: 12px; align-items: baseline; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: 10px 14px; }
.addr-no { flex: none; font-weight: 700; color: var(--text-brand); font-size: 12.5px; min-width: 46px; }
.addr-body { flex: 1; font-size: 13.5px; color: var(--text-body); }
.addr-meta { flex: none; font-size: 11.5px; color: var(--text-subtle); white-space: nowrap; }
.memo-form { display: flex; gap: 10px; align-items: flex-start; }
.memo-form textarea { flex: 1; min-height: 52px; }
.memo-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.memo-item { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: 12px 14px; }
.memo-body { font-size: 13.5px; color: var(--text-body); white-space: pre-wrap; line-height: 1.55; }
.memo-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 11.5px; color: var(--text-subtle); }
.memo-del { background: transparent; border: 0; color: var(--critical); cursor: pointer; font-size: 11.5px; padding: 2px 4px; font-family: inherit; }
.memo-del:hover { text-decoration: underline; }

/* ---- 로그인 ---- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--surface-alt); }
.login-card { width: 340px; padding: 30px 28px; }
.login-mark { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--basil-50); border: 1px solid var(--basil-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.login-name { text-align: center; font-size: 16px; font-weight: 900; color: var(--text-strong); letter-spacing: -0.02em; }
.login-sub { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--water-600); margin: 5px 0 18px; }
.login-card .btn { height: 42px; margin-top: 4px; }
.login-card .flash { margin-bottom: 12px; }