/* =====================================================================
   세린앤코 · T-A Editorial — 매거진형 · 세리프 제목 · 괘선 · 흑백 + 강조색
   (base.css 의 공통 컴포넌트를 이 테마 톤으로 덮어씀)
   ===================================================================== */
:root {
  --paper: #f6f3ee; --card: #fffdf9; --ink: #1c1a17; --mute: #6e685f; --line: #d9d2c6; --line-2: #ebe5db; --hi: #efe9df;
  --ac: #7a2e24; --ac-soft: #f3e4df;
  --b-as: #b0583c; --b-sh: #2a3a5c; --b-ed: #3f7a52; --b-sa: #c2a070;
  --ok: #3d6b4a; --ok-bg: #e4ece4; --warn: #8a6418; --warn-bg: #f3e8cf; --risk: #a8402a; --risk-bg: #f4ddd5; --stop: #4a453e; --stop-bg: #e2ddd4;
  --serif: "Noto Serif KR", "Pretendard", serif; --display: "Cormorant Garamond", "Noto Serif KR", serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --font: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  /* base.css 변수 매핑 */
  --fs: 13px; --bg: var(--paper); --surface: var(--card); --surface-2: var(--hi); --border: var(--line); --border-strong: var(--ink);
  --text: var(--ink); --muted: var(--mute); --primary: var(--ink); --primary-ink: var(--paper); --primary-soft: var(--hi);
  --accent: var(--ac); --radius: 0; --radius-sm: 0; --shadow: none; --row-h: 44px; --th-bg: transparent; --th-color: var(--mute);
  --chart-grid: #e6e0d6; --chart-text: #8a837a; --focus: 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent);
  --tone-gray: var(--mute); --tone-gray-bg: transparent;
}
body.t-a { background: var(--paper); color: var(--ink); font-size: 13px; }
.t-a a:hover { color: var(--ac); }
.t-a .mono, .t-a .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.t-a .muted { color: var(--mute); }

/* ------------------------------------------------------------ 2단 헤더 */
.a-head { background: var(--paper); border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 40; }
.a-bar { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--line); color: var(--mute); font-size: 12px; }
.a-bar-l, .a-bar-r, .a-brands { display: flex; align-items: center; gap: 14px; }
.a-brands { gap: 2px; }
.a-sep { width: 1px; height: 14px; background: var(--line); }
.a-sys { display: flex; border: 1px solid var(--ink); }
.a-sys a, .a-sys span { padding: 2px 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.a-sys .on { background: var(--ink); color: var(--paper) !important; }
.a-sys .off { color: #b9b1a4; cursor: not-allowed; }
.a-cap { margin-right: 6px; }
.a-brands a { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid transparent; color: var(--mute); }
.a-brands a.on { border-color: var(--ink); background: var(--card); color: var(--ink); }
.a-brands i { width: 8px; height: 8px; border-radius: 50%; }
.a-brands i.all { background: conic-gradient(var(--b-as) 0 25%, var(--b-sh) 0 50%, var(--b-ed) 0 75%, var(--b-sa) 0); }
.a-skins { display: flex; border: 1px solid var(--line); }
.a-skins a, .a-skins span { padding: 2px 10px; color: var(--mute); }
.a-skins .on { background: var(--ink); color: var(--paper) !important; }
.a-skins .off { color: #bdb6aa; cursor: not-allowed; }
.a-chips { display: flex; gap: 6px; }
.a-chips .db-chip { width: 13px; height: 13px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.a-chips .db-chip.on { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.a-user, .a-more { position: relative; }
.a-user > button, .a-more > button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.a-pop { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--ink); padding: 8px; min-width: 120px; z-index: 60; }
.a-pop.open { display: block; }
.a-pop button, .a-pop a { display: block; width: 100%; text-align: left; padding: 6px 8px; background: none; border: 0; cursor: pointer; color: var(--ink); white-space: nowrap; }
.a-pop button:hover, .a-pop a:hover { background: var(--hi); }
.a-pop-wide { display: none; grid-template-columns: repeat(3, 160px); gap: 4px 16px; padding: 14px; right: 0; }
.a-pop-wide.open { display: grid; }
.a-pop-g b { display: block; font-size: 11px; letter-spacing: .08em; color: var(--mute); font-weight: 500; padding: 4px 8px; }
.a-pop-g a.on { color: var(--ac); }
.a-mast { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 32px; }
.a-logo { font-family: var(--display); font-size: 24px; letter-spacing: .32em; font-weight: 500; white-space: nowrap; display: flex; align-items: baseline; gap: 12px; }
.a-logo em { font-style: italic; font-size: 15px; letter-spacing: 0; color: var(--ac); }
.a-menu { display: flex; gap: 22px; font-size: 13px; letter-spacing: .02em; align-items: center; }
.a-menu > a, .a-more > button { padding: 4px 0; border-bottom: 1px solid transparent; color: var(--mute); white-space: nowrap; font-size: 13px; }
.a-menu > a.on, .a-more > button.on { color: var(--ink); border-bottom-color: var(--ac); }
.a-search input { border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 4px 0; width: 150px; font-size: 12px; outline: none; }
.a-search input:focus { border-color: var(--ink); }
.a-main { padding: 28px 32px 48px; max-width: 1440px; margin: 0 auto; }
.a-foot { display: flex; justify-content: space-between; padding: 18px 32px; border-top: 1px solid var(--line); color: var(--mute); font-size: 11px; }

/* ------------------------------------------------------------ 페이지 머리 */
.a-ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.a-crumb { font-size: 12px; color: var(--mute); display: flex; gap: 6px; }
.a-crumb a { color: var(--mute); }
.a-h1 { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin-top: 6px; }
.a-kicker { font-family: var(--display); font-style: italic; font-size: 18px; color: var(--ac); }
.a-sub { font-size: 12px; color: var(--mute); margin-top: 6px; }
.a-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 버튼 */
.a-btn, .t-a .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-size: 13px; border-radius: 0; height: auto; box-shadow: none; white-space: nowrap; }
.a-btn:hover, .t-a .btn:hover { background: var(--hi); color: var(--ink); }
.a-btn-ac, .t-a .btn-primary { background: var(--ac); border-color: var(--ac); color: #f6f3ee; }
.a-btn-ac:hover, .t-a .btn-primary:hover { background: color-mix(in srgb, var(--ac) 85%, #000); color: #fff; }
.a-btn-ink { background: var(--ink); color: var(--paper); }
.a-btn-danger, .t-a .btn-danger { border-color: var(--risk); color: var(--risk); background: transparent; }
.a-btn-danger:hover, .t-a .btn-danger:hover { background: var(--risk-bg); color: var(--risk); }
.a-btn-sm, .t-a .btn-sm { padding: 5px 10px; font-size: 12px; }
.a-btn-mono { font-family: var(--mono); font-size: 12px; }
.a-btn:disabled { opacity: .4; cursor: not-allowed; }
.a-link { border-bottom: 1px solid currentColor; }
.t-a .btn svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ KPI 줄 */
.a-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.a-kpi { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--line); color: inherit; min-width: 0; }
.a-kpi:first-child { border-left: 0; padding-left: 0; }
a.a-kpi:hover { background: var(--card); color: inherit; }
.a-kpi .l { font-size: 11px; letter-spacing: .06em; color: var(--mute); display: flex; justify-content: space-between; gap: 6px; }
.a-kpi .v { font-family: var(--serif); font-size: 34px; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.a-kpi .v small { font-family: var(--font); font-size: 13px; margin-left: 3px; letter-spacing: 0; }
.a-kpi .n { font-size: 11px; color: var(--mute); }
.a-kpi .bar { height: 3px; background: var(--line); margin-top: 6px; border-radius: 0; }
.a-kpi .bar i { display: block; height: 100%; background: var(--ac); }
.up, .t-a .up { color: var(--ok) !important; } .down, .t-a .down { color: var(--risk) !important; }

/* 상태 4단계 · 문서 상태 배지 */
.a-lv { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.a-lv::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a-lv.ok { color: var(--ok); background: var(--ok-bg); } .a-lv.warn { color: var(--warn); background: var(--warn-bg); }
.a-lv.risk { color: var(--risk); background: var(--risk-bg); } .a-lv.stop { color: var(--stop); background: var(--stop-bg); }
.t-a .badge { border-radius: 0; font-size: 11px; font-weight: 500; padding: 2px 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); height: auto; }
.t-a .badge.tone-blue, .t-a .badge.tone-amber, .t-a .badge.tone-violet, .t-a .badge.tone-teal { border-color: var(--ink); }
.t-a .badge.tone-green { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.t-a .badge.tone-red, .t-a .badge.tone-rose { border-color: var(--risk); color: var(--risk); }
.t-a .badge.tone-gray { color: var(--mute); }

/* ------------------------------------------------------------ 탭 · 필터 · 일괄 바 */
.a-tabs, .t-a .tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; background: none; }
.a-tabs a, .t-a .tabs .tab { padding: 10px 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; color: var(--mute); white-space: nowrap; border-radius: 0; background: none; font-size: 13px; }
.a-tabs a.on, .t-a .tabs .tab.on { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; background: none; }
.a-tabs a span, .t-a .tabs .tab span { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-left: 4px; background: none; padding: 0; font-weight: 400; }
.a-filter { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
.a-filter-l { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-in, .a-sel, .t-a .fld { padding: 8px 12px; border: 1px solid var(--line); background: var(--card); border-radius: 0; font-size: 13px; height: auto; color: var(--ink); }
.a-in:focus, .a-sel:focus, .t-a .fld:focus { border-color: var(--ink); outline: none; box-shadow: none; }
.a-in.q { width: 260px; border-color: var(--ink); }
.a-sel { padding-right: 26px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 13px) 50%, calc(100% - 9px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.a-period { display: flex; border: 1px solid var(--line); background: var(--card); }
.a-period a { padding: 7px 11px; font-size: 12px; color: var(--mute); }
.a-period a.on { background: var(--ink); color: var(--paper); }
.a-chip { padding: 5px 10px; border: 1px solid var(--ink); background: var(--card); font-size: 12px; }
.a-reset { font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--mute); }
.a-bulk { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--hi); color: var(--mute); font-size: 13px; min-height: 40px; }
.a-bulk.on { background: var(--ink); color: var(--paper); }
.a-bulk-acts { display: flex; gap: 16px; font-size: 12px; }
.a-bulk-acts button { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 1px; color: inherit; cursor: pointer; font-size: 12px; }
.a-bulk:not(.on) .a-bulk-acts { opacity: .45; }
.a-bulk-acts .danger { color: #e3a99a; }
.a-bulk:not(.on) .a-bulk-acts .danger { color: var(--risk); }

/* ------------------------------------------------------------ 표 */
.a-tbl, .t-a .tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
.a-tbl th, .t-a .tbl th { padding: 9px 10px; font-size: 11px; font-weight: 500; color: var(--mute); letter-spacing: .04em; text-align: left; border-bottom: 1px solid var(--ink); background: transparent; white-space: nowrap; height: auto; }
.a-tbl td, .t-a .tbl td { padding: 10px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; height: auto; }
.a-tbl th:first-child, .a-tbl td:first-child { padding-left: 14px; }
.a-tbl th.num, .a-tbl td.num, .t-a .tbl .num { text-align: right; }
.a-tbl tr.sel td { background: var(--hi); }
.a-tbl tbody tr:hover td, .t-a .tbl tbody tr:hover td { background: color-mix(in srgb, var(--hi) 60%, transparent); }
.a-tbl a.a-no { font-family: var(--mono); font-size: 11px; border-bottom: 1px solid #c9c0b2; }
.a-tbl .sub { display: block; font-family: var(--mono); font-size: 10px; color: var(--mute); margin-top: 2px; }
.a-tbl th a { color: var(--mute); }
.a-chk { width: 14px; height: 14px; accent-color: var(--ink); cursor: pointer; }
.a-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.a-tfoot { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 0; font-size: 12px; color: var(--mute); flex-wrap: wrap; gap: 10px; }
.a-tfoot b { color: var(--ink); }
.a-pages { display: flex; gap: 2px; font-family: var(--mono); font-size: 12px; align-items: center; }
.a-pages a, .a-pages span { padding: 4px 9px; border: 1px solid transparent; color: var(--ink); }
.a-pages .cur { border-color: var(--ink); }
.a-pages .dis { color: #bdb6aa; }
.a-pages select { margin-left: 12px; font-family: var(--font); padding: 4px 8px; border: 1px solid var(--line); background: var(--card); }
.a-tbl-wrap { overflow-x: auto; }
.a-empty { padding: 56px 20px; text-align: center; color: var(--mute); }
.a-empty .ic { font-family: var(--display); font-size: 34px; color: var(--ac); line-height: 1; }
.a-empty b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); margin: 12px 0 6px; }
.a-empty .a-btn { margin-top: 14px; }
.a-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--ink); padding-top: 14px; margin-top: 24px; }
.a-notes b { display: block; font-size: 11px; letter-spacing: .1em; color: var(--ac); font-weight: 500; }
.a-notes span { font-size: 12px; color: var(--mute); line-height: 1.6; }

/* ------------------------------------------------------------ 섹션 · 카드 */
.a-sec-h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px; gap: 10px; }
.a-sec-h h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.a-sec-h .r { font-size: 12px; color: var(--mute); }
.a-sec-h .r a { border-bottom: 1px solid var(--mute); }
.a-grid { display: grid; gap: 40px; margin-bottom: 40px; }
.a-g2 { grid-template-columns: 7fr 5fr; } .a-g3 { grid-template-columns: repeat(3, 1fr); } .a-g4 { grid-template-columns: repeat(4, 1fr); } .a-g11 { grid-template-columns: 1fr 1fr; }
.a-g4 { gap: 32px; }
.a-list { list-style: none; margin: 0; padding: 0; }
.a-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.a-list li .t { min-width: 0; }
.a-list li .t > a, .a-list li .t > span:first-child { display: block; }
.a-list li .s { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.a-list li .q { font-size: 12px; white-space: nowrap; }
.a-bar-row { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 12px; padding: 5px 0; font-size: 12px; }
.a-bar-row .b { height: 7px; background: #ebe5db; }
.a-bar-row .b i { display: block; height: 100%; background: var(--ink); }
.a-bar-row .b i.on { background: var(--ac); }
.a-bar-row .v { text-align: right; font-family: var(--mono); font-size: 11.5px; }
.t-a .card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.t-a .card-head { border-bottom: 1px solid var(--ink); padding: 0 0 10px; background: none; }
.t-a .card-title { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.t-a .card-body { padding: 14px 0; }
.t-a .card-flush .card-head { padding: 0 0 10px; }
.t-a .stack > .card, .t-a .grid > .card { margin-bottom: 8px; }
.t-a .chart-box { height: 240px; } .t-a .chart-box.lg { height: 280px; }

/* ------------------------------------------------------------ 상세 · 폼 (공통 틀 덮어쓰기) */
.t-a .page-head { border-bottom: 1px solid var(--ink); padding-bottom: 18px; margin-bottom: 24px; align-items: flex-end; }
.t-a .page-title { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.t-a .crumbs { font-size: 12px; color: var(--mute); }
.t-a .page-sub { color: var(--mute); }
.t-a .kv { border-top: 0; gap: 0; }
.t-a .kv-item { border-bottom: 1px solid var(--line-2); padding: 12px 0; }
.t-a .kv-label { font-size: 11px; color: var(--mute); letter-spacing: .04em; }
.t-a .kv-value { font-size: 13.5px; }
.t-a .act-bar { background: var(--card); border: 1px solid var(--line); border-radius: 0; }
.t-a .alerts { display: none; }
.t-a .hl-row { gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.t-a .hl { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 14px 18px; }
.t-a .hl:first-child { border-left: 0; padding-left: 0; }
.t-a .hl-label { font-size: 11px; letter-spacing: .06em; color: var(--mute); }
.t-a .hl-value { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.t-a .hl-sub { font-size: 11px; color: var(--mute); }
.t-a .hl-accent .hl-value { color: var(--ac); }
.t-a a.hl:hover { background: var(--card); }
.t-a .toolbar { padding: 14px 0; background: none; border: 0; }
.t-a .list-card { border-top: 0; }
.t-a .pager { border-top: 0; padding: 14px 0 0; }
.t-a .pager-links .cur { background: transparent; border: 1px solid var(--ink); color: var(--ink); border-radius: 0; }
.t-a .preset { border-radius: 0; background: var(--card); border: 1px solid var(--ink); }
.t-a .form-grid { gap: 14px 20px; }
.t-a .field-label { font-size: 11px; color: var(--mute); letter-spacing: .04em; }
.t-a .form-actions { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--ink); padding: 14px 0; margin-top: 24px; z-index: 5; }
.t-a .field-err { color: var(--risk); }
.t-a .bar { background: var(--line); border-radius: 0; } .t-a .bar > i { background: var(--ink); border-radius: 0; }
.t-a .stage-step { border-radius: 0; }
.t-a .empty { color: var(--mute); padding: 40px 10px; }

/* ------------------------------------------------------------ 토스트 · 팝업 */
.a-toasts { position: fixed; right: 24px; top: 112px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.a-toast { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; min-width: 300px; max-width: 420px; padding: 12px 16px; background: var(--ink); color: var(--paper); border-left: 4px solid var(--ok); box-shadow: 0 8px 24px rgba(28, 26, 23, .18); transition: opacity .4s, transform .4s; }
.a-toast.error { border-left-color: var(--risk); } .a-toast.warning { border-left-color: var(--warn); }
.a-toast div { display: flex; flex-direction: column; gap: 2px; }
.a-toast b { font-size: 13px; } .a-toast span { font-size: 12px; color: #c9c0b2; }
.a-toast button { background: none; border: 0; color: #c9c0b2; cursor: pointer; font-size: 16px; }
.a-toast.out { opacity: 0; transform: translateX(20px); pointer-events: none; }
.a-modal { border: 0; border-top: 3px solid var(--ac); padding: 0; width: 480px; max-width: calc(100vw - 32px); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(28, 26, 23, .3); }
.a-modal::backdrop { background: rgba(28, 26, 23, .45); }
.a-modal-h { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 0; }
.a-modal-h b { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.a-modal-h button { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--mute); }
.a-modal-b { padding: 12px 22px 4px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
#a-modal-desc { color: var(--mute); line-height: 1.6; }
#a-modal-desc .box { padding: 10px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.a-modal textarea { width: 100%; border: 1px solid var(--ink); padding: 10px; background: var(--paper); resize: vertical; font: inherit; }
.a-modal textarea:required:placeholder-shown { border-color: var(--risk); }
.a-lbl { font-size: 11px; color: var(--mute); letter-spacing: .04em; }
.a-err { font-size: 11px; color: var(--risk); }
.a-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.a-chiprow:empty { display: none; }
.a-chiprow button { padding: 3px 9px; font-size: 11px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.a-modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }

/* ------------------------------------------------------------ Today 전용 */
.a-acts5 { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ink); margin-bottom: 40px; }
.a-act { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; border-left: 1px solid var(--line); color: inherit; }
.a-act:first-child { border-left: 0; }
.a-act.risk { background: color-mix(in srgb, var(--risk-bg) 55%, transparent); }
.a-act .t { font-size: 12px; margin-bottom: 6px; }
.a-act .c { font-family: var(--serif); font-size: 30px; line-height: 1; }
.a-act .c small { font-family: var(--font); font-size: 14px; color: var(--mute); margin-left: 6px; }
.a-act:hover { background: var(--card); color: inherit; }
.a-brand-row { display: grid; grid-template-columns: 1fr 64px 52px 40px 72px; align-items: center; gap: 10px; padding: 13px 0 13px 12px; border-bottom: 1px solid var(--line-2); border-left: 3px solid var(--bc); color: inherit; }
.a-brand-row:hover { background: var(--card); color: inherit; }
.a-brand-row .nm { font-family: var(--serif); font-size: 15.5px; }
.a-brand-row .nm small { display: block; font-family: var(--font); font-size: 11px; color: var(--mute); }
.a-brand-row .s { text-align: right; font-size: 14px; }
.a-brand-row .y { text-align: right; font-size: 12px; } .a-brand-row .st { text-align: right; font-size: 12px; color: var(--mute); }
.a-brand-row .tg { font-size: 11px; text-align: right; }
.a-brand-row .tg i { display: block; height: 2px; background: var(--line); margin-top: 4px; }
.a-brand-row .tg i b { display: block; height: 100%; background: var(--bc); }
.a-best li { display: grid; grid-template-columns: 34px 1fr 64px 44px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.a-best .sw { width: 34px; height: 34px; }
.a-best .bar { height: 2px; background: var(--line); } .a-best .bar i { display: block; height: 100%; background: var(--ac); }
.a-best .p { font-family: var(--serif); font-size: 16px; text-align: right; }
.a-store li { display: grid; grid-template-columns: 22px 1fr 56px 52px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.a-store li .n { font-family: var(--display); color: var(--mute); }
.a-store li.low { background: color-mix(in srgb, var(--risk-bg) 45%, transparent); }
.a-store li.low .n { color: var(--risk); }
.a-store .v { text-align: right; } .a-store .r { text-align: right; font-family: var(--mono); font-size: 12px; }

@media (max-width: 1100px) {
  .a-bar { padding: 0 16px; } .a-brands { display: none; }
  .a-mast { padding: 0 16px; height: auto; flex-wrap: wrap; padding-top: 12px; padding-bottom: 8px; }
  .a-menu { overflow-x: auto; width: 100%; order: 3; gap: 18px; padding-bottom: 4px; }
  .a-search { display: none; }
  .a-main { padding: 20px 16px 40px; }
  .a-g2, .a-g3, .a-g4, .a-g11 { grid-template-columns: 1fr; }
  .a-kpis { grid-template-columns: repeat(2, 1fr); } .a-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .a-acts5 { grid-template-columns: repeat(2, 1fr); }
  .a-notes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .a-skins, .a-chips { display: none; } .a-h1 { font-size: 26px; } .a-kpi .v { font-size: 26px; } .a-in.q { width: 100%; } }

/* 결재선 */
.a-line { list-style: none; margin: 0; padding: 6px 0 0; }
.a-line li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.a-line i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; }
.a-line li.approved i, .a-line li.done i { background: var(--ink); color: var(--paper); }
.a-line li.rejected i { background: var(--risk); border-color: var(--risk); color: #fff; }
.a-line li.cur i { border-color: var(--ac); box-shadow: inset 0 0 0 5px var(--ac); }
.a-line small { color: var(--mute); font-size: 11px; }
.a-line .s { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.a-line .c { margin-top: 8px; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.a-line .r { font-size: 11px; color: var(--mute); white-space: nowrap; } .a-line .r.ac { color: var(--ac); }
.a-hist li { justify-content: flex-start; gap: 14px; font-size: 12px; padding: 8px 0; }
.a-hist li .mono { color: var(--mute); font-size: 11px; white-space: nowrap; }
.a-next { margin-top: 20px; background: var(--ink); color: var(--paper); padding: 14px 16px; font-size: 12px; line-height: 1.6; }
.a-next span { display: block; font-family: var(--display); letter-spacing: .3em; font-size: 12px; color: #c9c0b2; margin-bottom: 4px; }
.a-chk:disabled{opacity:.25;cursor:not-allowed}

/* =====================================================================
   CRM — CRM 홈 · 클라이언트 북 · VIC · 캠페인
   ===================================================================== */
.a-tier { display: inline-block; font-family: var(--display); font-size: 11px; letter-spacing: .2em; padding: 1px 7px; border: 1px solid var(--ink); line-height: 1.5; white-space: nowrap; }
.a-tier.black { background: var(--ink); color: var(--paper); } .a-tier.gold { background: #e6d6b0; } .a-tier.silver { background: #e6e3dd; }
.a-tier.member { border-color: var(--line); color: var(--mute); letter-spacing: .05em; font-family: var(--font); }
.a-ini { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; flex: none; }
.a-ini.sm { width: 30px; height: 30px; font-size: 13px; }
.a-ftabs { display: flex; gap: 14px; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.a-ftabs a { color: var(--mute); padding-bottom: 1px; } .a-ftabs a.on { color: var(--ink); border-bottom: 1px solid var(--ac); }
.a-ftabs a small { font-family: var(--mono); font-size: 10px; margin-left: 3px; }
.a-crow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 104px 92px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.a-crow .nm { display: flex; align-items: center; gap: 8px; } .a-crow .nm a { font-family: var(--serif); font-size: 16px; }
.a-crow .why { font-size: 12px; color: var(--mute); margin-top: 3px; }
.a-crow .st { font-size: 12px; line-height: 1.5; } .a-crow .st span, .a-crow .ag { color: var(--mute); }
.a-crow .ag { font-size: 11px; line-height: 1.5; }
.a-crow .cta { justify-self: end; font-size: 12px; padding: 6px 10px; border: 1px solid var(--ink); background: none; cursor: pointer; white-space: nowrap; font-family: inherit; color: var(--ink); }
.a-crow .cta:hover { background: var(--ink); color: var(--paper); }
.a-ev { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); color: inherit; }
.a-ev .dt { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--ink); padding: 6px 0; }
.a-ev .dt b { font-family: var(--display); font-size: 24px; line-height: 1; font-weight: 500; } .a-ev .dt span { font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.a-ev .n { font-family: var(--serif); font-size: 15px; } .a-ev .p { font-size: 11px; color: var(--mute); margin-top: 3px; }
.a-ev .r { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 12px; } .a-ev .r small { font-size: 10px; color: var(--mute); }
.a-mini { width: 100%; height: 2px; background: var(--line); } .a-mini i { display: block; height: 2px; background: var(--ac); }
.a-tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.a-tiers > * { padding: 12px 12px 12px 0; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); color: inherit; }
.a-tiers > *:last-child { border-right: 0; } .a-tiers > * + * { padding-left: 12px; }
.a-tiers .g { font-family: var(--display); font-size: 14px; letter-spacing: .24em; } .a-tiers .c { font-family: var(--serif); font-size: 24px; }
.a-tiers .d { font-size: 11px; color: var(--ok); }
.a-move { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; color: inherit; }
.a-move span span { color: var(--mute); } .a-move b { font-family: var(--serif); font-size: 18px; font-weight: 400; }
.a-move b.ok { color: var(--ok); } .a-move b.risk { color: var(--risk); }
.a-camp { display: grid; grid-template-columns: minmax(0, 1fr) 96px 64px 56px 72px 76px 76px; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-2); align-items: center; color: inherit; }
.a-camp.h { padding: 8px 0; font-size: 11px; color: var(--mute); border-bottom-color: var(--line); }
.a-camp .n { font-family: var(--serif); font-size: 14px; display: block; } .a-camp .s { font-size: 11px; color: var(--mute); }
.a-camp .num { text-align: right; } .a-camp .rv { text-align: right; font-family: var(--serif); }
.a-camp.h .num { font-family: var(--font); }
.a-voc { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.a-voc .q { font-family: var(--serif); font-size: 14px; line-height: 1.5; display: block; } .a-voc .s { font-size: 11px; color: var(--mute); margin-top: 3px; }
.a-voc.done .q { color: var(--mute); }

/* 클라이언트 북 */
.a-book { display: grid; grid-template-columns: 340px minmax(0, 1fr) 34px; margin-top: 8px; filter: drop-shadow(0 14px 26px rgba(60, 45, 30, .16)); }
.a-book-l { background: #f1ebe0; padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; background-image: linear-gradient(90deg, transparent 92%, rgba(80, 60, 40, .09)); }
.a-book-r { background: var(--card); padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 22px; background-image: linear-gradient(90deg, rgba(80, 60, 40, .09), transparent 3%); min-width: 0; }
.a-book-h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 4px; }
.a-book-h b { font-family: var(--serif); font-size: 20px; font-weight: 500; } .a-book-h span { font-size: 11px; color: var(--mute); }
.a-tc { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; margin: 0 -10px; color: inherit; }
.a-tc.on { background: #e6dccb; } .a-tc:hover { background: #ebe3d4; color: inherit; }
.a-tc .n { font-family: var(--serif); font-size: 14px; } .a-tc .n small { font-family: var(--font); font-size: 9.5px; letter-spacing: .1em; font-weight: 600; color: var(--ac); margin-left: 4px; }
.a-tc .w { font-size: 11px; color: var(--mute); display: block; margin-top: 1px; } .a-tc .a { font-size: 10.5px; color: var(--mute); }
.a-note-box { margin-top: auto; padding: 14px; border: 1px dashed #a89c89; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.a-note-box .k { font-size: 11px; letter-spacing: .08em; color: var(--mute); } .a-note-box .t { font-family: var(--serif); font-size: 14px; line-height: 1.5; }
.a-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.a-who .k { font-size: 11px; letter-spacing: .12em; color: var(--ac); font-weight: 600; }
.a-who h1 { font-family: var(--serif); font-size: 40px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0; }
.a-who .s { font-size: 12px; color: var(--mute); }
.a-who .nums { display: flex; gap: 22px; text-align: right; } .a-who .nums span { display: block; font-size: 11px; color: var(--mute); }
.a-who .nums b { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.a-book-g { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; }
.a-h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.a-h3 b { font-family: var(--serif); font-size: 18px; font-weight: 500; } .a-h3 span { font-size: 11px; color: var(--mute); }
.a-closet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.a-closet .ph { aspect-ratio: 3/4; background: repeating-linear-gradient(135deg, #e7dfd1 0 6px, #efe9de 6px 12px); border: 1px solid #d3c8b6; position: relative; display: flex; align-items: flex-end; padding: 6px; font-family: var(--mono); font-size: 9px; color: #8d8272; }
.a-closet .ph i { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.a-closet .nm { font-family: var(--serif); font-size: 12px; line-height: 1.3; margin-top: 5px; display: block; }
.a-closet .sb { font-size: 10.5px; color: var(--mute); }
.a-fit { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #efe6d6; transform: rotate(-.6deg); box-shadow: 0 2px 6px rgba(60, 45, 30, .12); }
.a-fit .k { font-size: 11px; letter-spacing: .1em; color: var(--ac); font-weight: 600; } .a-fit span { font-family: var(--serif); font-size: 13px; line-height: 1.55; }
.a-dates div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; font-size: 12px; padding: 6px 0; border-bottom: 1px dotted #a89c89; }
.a-dates b.hi { color: var(--ac); }
.a-look { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.a-look > a { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; color: inherit; }
.a-look .ph { width: 56px; height: 70px; background: repeating-linear-gradient(135deg, #e7dfd1 0 6px, #efe9de 6px 12px); border: 1px solid #d3c8b6; }
.a-look .n { font-family: var(--serif); font-size: 13px; line-height: 1.3; display: block; } .a-look .s { font-size: 11px; color: var(--mute); display: block; }
.a-look .w { font-size: 11px; color: var(--ac); }
.a-idx { display: flex; flex-direction: column; gap: 3px; padding-top: 30px; }
.a-idx a { height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px; background: #c9bfae; color: #4a4238; }
.a-idx a.on, .a-idx a:hover { background: var(--ac); color: var(--paper); }
.a-tl li { justify-content: flex-start; gap: 12px; font-size: 12px; padding: 9px 0; align-items: baseline; }
.a-tl li .k { font-size: 10.5px; color: var(--mute); min-width: 56px; } .a-tl li .d { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--mute); white-space: nowrap; }
.a-kvs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.a-kvs > div { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); } .a-kvs span { display: block; font-size: 11px; color: var(--mute); }
.a-tags { display: flex; gap: 6px; flex-wrap: wrap; } .a-tags span { font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); background: var(--paper); }

/* VIC */
.a-vtier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); margin-bottom: 32px; }
.a-vtier > a { padding: 22px 22px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; color: inherit; position: relative; }
.a-vtier > a:last-child { border-right: 0; }
.a-vtier > a.black { background: var(--ink); color: var(--paper); } .a-vtier > a.black .m { color: #c9c0b2; }
.a-vtier > a.gold { background: #efe3c6; } .a-vtier > a.silver { background: #eceae5; }
.a-vtier .g { font-family: var(--display); font-size: 22px; letter-spacing: .3em; } .a-vtier .c { font-family: var(--serif); font-size: 44px; line-height: 1.05; }
.a-vtier .m { font-size: 12px; color: var(--mute); line-height: 1.6; }
.a-ppl { display: grid; grid-template-columns: 30px minmax(0, 1fr) 120px 140px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; }
.a-ppl .n a { font-family: var(--serif); font-size: 14px; } .a-ppl .s { color: var(--mute); font-size: 11px; }
.a-salon { width: 100%; border-collapse: collapse; table-layout: fixed; }
.a-salon th { font-size: 11px; color: var(--mute); font-weight: 500; text-align: left; padding: 8px; border-bottom: 1px solid var(--ink); }
.a-salon td { border-bottom: 1px solid var(--line-2); padding: 4px; height: 58px; vertical-align: top; }
.a-salon td.t { font-family: var(--mono); font-size: 12px; width: 64px; padding-top: 10px; }
.a-salon .bk { display: block; height: 100%; padding: 7px 9px; background: var(--ink); color: var(--paper); font-size: 12px; border-left: 3px solid var(--ac); }
.a-salon .bk small { display: block; color: #c9c0b2; font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-salon .bk:hover { color: var(--paper); opacity: .9; }
.a-salon .free { display: block; height: 100%; border: 1px dashed var(--line); font-size: 11px; color: #b8b0a3; padding: 8px; }
.a-salon .free:hover { border-color: var(--ink); color: var(--ink); }
.a-days { display: flex; gap: 2px; font-size: 12px; } .a-days a { padding: 5px 9px; border: 1px solid transparent; color: var(--mute); }
.a-days a.on { border-color: var(--ink); color: var(--ink); }

/* 캠페인 상세 */
.a-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 18px 0 26px; }
.a-steps div { padding: 10px 0 0; border-top: 3px solid var(--line); font-size: 12px; color: var(--mute); }
.a-steps div.done { border-top-color: var(--ink); color: var(--ink); } .a-steps div.cur { border-top-color: var(--ac); color: var(--ac); font-weight: 600; }
.a-steps small { display: block; font-family: var(--mono); font-size: 10px; }
.a-fc { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.a-fc > div { padding: 14px 16px 14px 0; } .a-fc > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.a-fc span { display: block; font-size: 11px; color: var(--mute); } .a-fc b { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.a-msg { font-family: var(--serif); font-size: 15px; line-height: 1.8; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); white-space: pre-line; }
.a-funnel div { display: grid; grid-template-columns: 56px 1fr 90px; gap: 12px; align-items: center; padding: 8px 0; font-size: 12px; }
.a-funnel i { display: block; height: 18px; background: var(--ink); } .a-funnel div:last-child i { background: var(--ac); }
.a-funnel span:last-child { text-align: right; font-family: var(--mono); }
@media (max-width: 1100px) {
  .a-book { grid-template-columns: 1fr; } .a-idx { display: none; } .a-book-g, .a-look, .a-vtier, .a-fc { grid-template-columns: 1fr 1fr; }
  .a-crow { grid-template-columns: 40px 1fr 92px; } .a-crow .st, .a-crow .ag { display: none; }
  .a-camp { grid-template-columns: 1fr 70px 76px; } .a-camp > :nth-child(2), .a-camp > :nth-child(3), .a-camp > :nth-child(4), .a-camp > :nth-child(5) { display: none; }
  .a-kvs { grid-template-columns: 1fr 1fr; } .a-ppl { grid-template-columns: 30px 1fr 100px; } .a-ppl > :last-child { display: none; }
}

/* =====================================================================
   ERP 메타포 화면 — M1 런웨이 · M2 라인시트 · M3 행택 · M4 샘플룸 · 생산발주
   ===================================================================== */
.m-k { display: block; font-family: var(--mono); font-size: 11px; color: var(--mute); margin-bottom: 8px; letter-spacing: .02em; }
.up { color: var(--ok); } .down { color: var(--risk); }
/* M1 */
.m-run-hero { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--ink); }
.m-big { font-family: var(--display); font-size: 168px; line-height: .82; letter-spacing: -.04em; font-weight: 500; }
.m-run-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-bottom: 6px; }
.m-run-kpis > div { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--ink); padding-left: 14px; }
.m-run-kpis .l { font-size: 11px; letter-spacing: .06em; color: var(--mute); } .m-run-kpis .v { font-family: var(--display); font-size: 52px; line-height: 1; }
.m-run-kpis .n { font-size: 12px; }
.m-legend { display: flex; gap: 6px; align-items: center; font-size: 11px; } .m-legend i { width: 14px; height: 8px; display: inline-block; margin-left: 10px; }
.m-legend i.drop, .m-ev.drop { background: var(--ink); color: var(--paper); } .m-legend i.markdown, .m-ev.markdown { background: var(--ac); color: #fff; }
.m-legend i.off, .m-ev.off { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, var(--paper) 2px 4px); color: var(--ink); }
.m-ev.retail { background: #ddd4c7; color: var(--ink); }
.m-lanes { display: grid; grid-template-columns: 160px 1fr; position: relative; }
.m-months { display: flex; border-bottom: 1px solid var(--ink); font-size: 11px; letter-spacing: .08em; color: var(--mute); }
.m-months span { padding: 6px 0; } .m-months span.now { color: var(--ink); font-weight: 700; }
.m-lane-n { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 58px; border-bottom: 1px solid var(--line); }
.m-lane-n small { font-size: 11px; color: var(--mute); }
.m-lane { position: relative; height: 58px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 calc(3.45% - 1px), #e6dfd3 calc(3.45% - 1px) 3.45%); }
.m-ev { position: absolute; top: 16px; height: 26px; font-size: 11px; display: flex; align-items: center; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.m-ev:hover { outline: 2px solid var(--ac); outline-offset: 1px; color: inherit; }
.m-today-wrap { position: relative; height: 26px; }
.m-today { position: absolute; bottom: 26px; height: 340px; border-left: 1.5px solid var(--ac); pointer-events: none; }
.m-today-wrap b { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: #fff; background: var(--ac); padding: 3px 8px; white-space: nowrap; }
.m-cat { display: grid; grid-template-columns: 96px 1fr 44px 52px; gap: 12px; align-items: center; padding: 7px 0; }
.m-cat .b { position: relative; height: 12px; background: #ddd4c7; } .m-cat .b i { display: block; height: 12px; background: var(--ink); } .m-cat .b i.low { background: var(--ac); }
.m-cat .b em { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--ink); }
.m-cat b { text-align: right; } .m-cat small { font-size: 11px; }
.m-door { display: grid; grid-template-columns: 28px 1fr auto 46px; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); color: inherit; }
.m-door .r { font-family: var(--display); font-size: 20px; color: var(--mute); } .m-door small { font-size: 11px; color: var(--mute); text-align: right; }
.m-signal { background: var(--ink); color: var(--paper); padding: 20px; display: flex; flex-direction: column; gap: 12px; line-height: 1.55; }
.m-signal .k { font-size: 11px; letter-spacing: .1em; color: #b9ae9f; } .m-signal .big { font-family: var(--display); font-size: 40px; line-height: 1; }
.m-signal i { height: 1px; background: #3a3631; } .m-signal .s { font-size: 12px; color: #b9ae9f; }
.m-sig-btn { align-self: flex-start; font-size: 12px; padding: 8px 12px; background: var(--ac); color: #fff; border: 0; cursor: pointer; font-family: inherit; }
/* M2 */
.m-dlv { display: flex; border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; width: max-content; margin: 4px 0 14px; background: var(--paper); }
.m-dlv a { padding: 6px 10px; color: var(--ink); } .m-dlv a.on { background: var(--ink); color: var(--paper); }
.m-sheet { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.m-card { background: var(--card); border: 1px solid var(--ink); padding: 10px; display: flex; flex-direction: column; gap: 7px; position: relative; color: inherit; }
.m-card:hover { color: inherit; box-shadow: 4px 4px 0 var(--line); } .m-card.sel { border: 2px solid var(--ac); }
.m-card .flag { position: absolute; top: -9px; right: 8px; font-style: normal; font-family: var(--mono); font-size: 10px; background: var(--ac); color: #fff; padding: 2px 6px; }
.m-card .sk { aspect-ratio: 1/1.05; border: 1px dashed #b9b2a4; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; color: #9b968c; background: repeating-linear-gradient(0deg, transparent 0 9px, #efebe2 9px 10px); }
.m-card .cd { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; } .m-card .cd .hot { color: var(--ac); }
.m-card b { line-height: 1.3; min-height: 34px; font-weight: 600; } .m-card small { font-size: 11px; color: var(--mute); }
.m-card .ft { display: flex; justify-content: space-between; align-items: center; } .m-card .ft .mono { font-size: 12px; }
.cw { display: flex; gap: 4px; } .cw i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.m-card .tg { font-size: 10.5px; color: var(--mute); border-top: 1px solid var(--line-2); padding-top: 6px; }
.m-ls { display: grid; grid-template-columns: minmax(0, 1fr) 460px; margin: -28px -32px -40px; background-color: #f4f1ea; background-image: linear-gradient(#e6e0d4 1px, transparent 1px), linear-gradient(90deg, #e6e0d4 1px, transparent 1px); background-size: 20px 20px; }
.m-ls-l { padding: 28px 32px; } .m-ls-r { background: var(--card); border-left: 1px solid var(--ink); padding: 24px 26px 32px; display: flex; flex-direction: column; gap: 20px; }
.m-ls-h { border-bottom: 2px solid var(--ink); padding-bottom: 14px; } .m-ls-h .cd { display: flex; justify-content: space-between; font-size: 11px; }
.m-ls-h h1 { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 4px; }
.a-btn-sm { padding: 6px 12px; font-size: 12px; }
.m-cw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .m-cw > div { border: 1px solid var(--ink); display: flex; flex-direction: column; }
.m-cw i { height: 54px; } .m-cw b { padding: 6px 8px 0; font-size: 12px; } .m-cw small { padding: 0 8px 6px; font-family: var(--mono); font-size: 10px; color: var(--mute); }
.m-mx { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; border-top: 1px solid var(--ink); }
.m-mx th { font-weight: 400; color: var(--mute); padding: 6px 0; text-align: center; } .m-mx th.r, .m-mx td.r { text-align: right; }
.m-mx td { padding: 8px 0; border-top: 1px solid #ddd6c9; text-align: center; } .m-mx td.c { text-align: left; font-family: var(--font); font-weight: 600; white-space: nowrap; }
.m-mx td.c i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0, 0, 0, .2); }
.m-mx td.risk { background: var(--ac); } .m-mx td.risk a { color: #fff; } .m-mx td.warn { background: var(--ac-soft); }
.m-warn { font-size: 11px; color: var(--ac); margin-top: 6px; line-height: 1.5; } .m-warn a { border-bottom: 1px solid; }
.m-cost { display: flex; height: 22px; border: 1px solid var(--ink); } .m-cost i { border-right: 1px solid var(--ink); } .m-cost i:last-child { border-right: 0; }
.m-cost-l { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 8px; font-size: 12px; }
.m-cost-l div { display: flex; justify-content: space-between; } .m-cost-l i { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--ink); margin-right: 6px; }
.m-spec { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ink); font-size: 11px; }
.m-spec div { padding: 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .m-spec div:last-child { border-right: 0; }
.m-spec span { color: var(--mute); } .m-spec b { font-family: var(--mono); font-size: 14px; font-weight: 400; }
.m-bom { list-style: none; margin: 0; padding: 0; } .m-bom li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.m-bom li i { width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, .12); } .m-bom li > span:last-child { font-family: var(--mono); font-size: 10.5px; }
.m-bom .ok { color: var(--ok); } .m-bom .warn { color: var(--warn); } .m-bom .risk { color: var(--risk); }
/* M3 */
.m-cond { font-stretch: 75%; font-weight: 700; }
.m-tag-g { display: grid; grid-template-columns: 268px minmax(0, 1fr) 300px; border-top: 1px solid var(--line); }
.m-tag-g > aside:first-child { padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line); }
.m-tag-g > section { padding: 22px 28px; min-width: 0; } .m-tag-r { padding: 22px 0 22px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.m-tag { position: relative; background: #efe9dc; padding: 14px 14px 12px 36px; border-radius: 4px 14px 14px 4px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--ink); color: var(--ink); }
.m-tag::before { content: ""; position: absolute; left: 12px; top: 50%; margin-top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); }
.m-tag.on, .m-tag:hover { background: var(--ink); color: #efe9dc; } .m-tag .mono { font-size: 10px; letter-spacing: .08em; } .m-tag .r { display: flex; justify-content: space-between; font-size: 11px; }
.m-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.m-chip.on { border: 2px solid var(--ink); font-weight: 600; } .m-chip i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); }
.m-grid { width: 100%; border-collapse: separate; border-spacing: 3px; } .m-grid th { font-weight: 700; padding: 4px 0; } .m-grid th.r { text-align: right; font-weight: 400; font-size: 11px; color: var(--mute); }
.m-grid td.s { font-size: 12px; width: 150px; white-space: nowrap; } .m-grid td.r { text-align: right; } .m-grid tr.wh td.s { font-weight: 600; }
.m-grid .h { height: 30px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-grid .z, .m-leg .z { background: repeating-linear-gradient(135deg, #9fb0f0 0 2px, #e8ecfc 2px 6px); } .m-grid .l1, .m-leg .l1 { background: #e4e2dc; }
.m-grid .l2, .m-leg .l2 { background: #9a948a; color: #fff; } .m-grid .l3, .m-leg .l3 { background: var(--ink); color: #efe9dc; } .m-grid .na { color: #c9c3b8; }
.m-grid tr.wh .h { outline: 1px dashed var(--mute); outline-offset: -1px; }
.m-leg { display: flex; gap: 16px; font-size: 11px; color: var(--mute); margin-top: 12px; } .m-leg span { display: flex; gap: 6px; align-items: center; } .m-leg i { width: 14px; height: 14px; }
.m-curve { display: flex; align-items: flex-end; gap: 14px; height: 130px; border-bottom: 1px solid var(--ink); }
.m-curve div { flex: 1; display: flex; gap: 3px; align-items: flex-end; height: 100%; } .m-curve i { flex: 1; background: #e4e2dc; } .m-curve i.o { background: var(--ac); }
.m-curve-l { display: flex; gap: 14px; margin-top: 4px; } .m-curve-l div { flex: 1; display: flex; flex-direction: column; align-items: center; } .m-curve-l small { font-size: 10px; color: var(--mute); }
.m-move { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 6px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12px; }
.m-move i { font-style: normal; color: #2747d6; } .m-move small { grid-column: span 3; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.m-issue { width: 100%; padding: 11px; background: var(--ink); color: #efe9dc; font-weight: 600; border: 0; cursor: pointer; margin-top: 4px; font-family: inherit; }
/* M4 */
.m-stat { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); } .m-stat span { font-size: 10px; color: var(--mute); } .m-stat b { font-size: 24px; font-weight: 400; }
.m-room { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.m-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 6px; min-height: 420px; }
.m-col .h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); } .m-col .h .mono { font-size: 11px; color: var(--mute); border-bottom: 1px solid; }
.m-scard { background: var(--card); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.m-scard.sel { outline: 1px dashed var(--ac); outline-offset: 2px; }
.m-scard .t { display: flex; gap: 8px; align-items: center; color: inherit; } .m-scard .t i { width: 26px; height: 26px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.m-scard .t span { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.3; } .m-scard .t small { font-family: var(--mono); font-size: 9.5px; color: var(--mute); font-weight: 400; }
.m-scard p { font-size: 11px; color: #4a453e; line-height: 1.45; margin: 0; } .m-scard .f { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; } .m-scard .f span:first-child { color: var(--mute); }
.m-scard .nx { align-self: flex-start; background: none; border: 0; border-bottom: 1px solid var(--mute); color: var(--mute); font-size: 11px; cursor: pointer; padding: 0; font-family: inherit; }
.m-scard .nx:hover { color: var(--ac); border-color: var(--ac); }
.m-room-b { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; margin-top: 16px; }
.m-box { border: 1px dashed var(--line); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .m-box.ac { border-color: var(--ac); }
.m-box .h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .m-box .h b { font-size: 15px; } .m-box .h .mono { font-size: 10px; color: var(--mute); }
.m-fit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .m-fit div { padding: 8px; background: var(--card); border-radius: 4px; display: flex; flex-direction: column; gap: 3px; }
.m-fit span { font-size: 11px; color: #4a453e; } .m-fit b { font-family: var(--mono); font-size: 16px; font-weight: 400; }
.m-cap > div { display: flex; justify-content: space-between; font-size: 12px; } .m-cap .mono { font-size: 10px; color: var(--mute); }
.m-cap i { display: block; height: 6px; margin: 4px 0 8px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 9px); }
.m-cap i b { display: block; height: 6px; background: var(--ink); } .m-cap i b.risk { background: var(--risk); } .m-cap i b.ok { background: var(--ok); }
/* 생산발주 등록 */
.m-po { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.m-po-steps { display: flex; flex-direction: column; gap: 4px; padding-top: 70px; position: sticky; top: 20px; align-self: start; }
.m-po-steps a { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); color: inherit; }
.m-po-steps em { font-style: normal; font-family: var(--display); font-size: 20px; } .m-po-steps a:hover em { color: var(--ac); }
.m-po-steps span { display: flex; flex-direction: column; } .m-po-steps small { font-size: 11px; color: var(--mute); }
.m-po-note { margin-top: 16px; padding: 12px; border: 1px solid var(--line); background: var(--card); font-size: 12px; line-height: 1.6; color: var(--mute); }
.m-po-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .m-po-main h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 14px; }
.m-po-main h3 small { font-family: var(--font); font-size: 12px; color: var(--mute); }
.m-fg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; }
.m-fg label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; } .m-fg label em { color: var(--risk); font-style: normal; }
.m-fg .a-in, .m-fg .a-sel { width: 100%; } .m-fg small { font-size: 11px; color: var(--mute); min-height: 14px; }
.m-fg label.err .a-in, .m-fg label.err .a-sel { border-color: var(--risk); } .m-fg label.err small { color: var(--risk); }
.m-po-sh { display: flex; justify-content: space-between; align-items: baseline; }
.m-lines { width: 100%; border-collapse: collapse; } .m-lines th { font-size: 11px; color: var(--mute); font-weight: 400; padding: 8px 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-align: center; }
.m-lines th:first-child { text-align: left; } .m-lines .r { text-align: right; } .m-lines td { padding: 8px 4px; border-bottom: 1px solid var(--line-2); text-align: center; }
.m-lines .cc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); background: var(--card); } .m-lines .cc i { width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, .15); }
.m-lines .cc small { margin-left: auto; font-size: 10px; color: var(--mute); }
.m-lines input.q { width: 100%; min-width: 44px; padding: 8px 0; border: 1px solid var(--line); background: var(--card); text-align: center; font-size: 13px; }
.m-lines input.q:focus { border-color: var(--ink); outline: none; } .m-lines .x { background: none; border: 0; color: var(--mute); font-size: 16px; cursor: pointer; }
.m-lines tfoot td { border-bottom: 1px solid var(--ink); font-size: 12px; padding: 10px 4px; } .m-lines tfoot td:first-child { text-align: left; }
.m-po-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.m-costin { display: grid; grid-template-columns: 110px 1fr 110px; gap: 10px; align-items: center; margin-bottom: 10px; }
.m-costin i { height: 6px; background: var(--line-2); } .m-costin b { display: block; height: 6px; background: var(--ink); } .m-costin .a-in { text-align: right; }
.m-po-sum { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--ink); font-size: 13px; }
.m-drop { padding: 22px; border: 1px dashed #9a9288; background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mute); cursor: pointer; text-align: center; }
.m-drop.on, .m-drop:hover { border-color: var(--ink); color: var(--ink); } .m-drop b { font-size: 20px; } .m-drop small { font-size: 11px; }
.m-files { list-style: none; margin: 8px 0; padding: 0; } .m-files li { display: flex; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--line); background: var(--card); font-size: 12px; margin-bottom: 4px; }
.m-po-foot { grid-column: 1 / -1; position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 32px; margin: 12px -32px -40px; border-top: 1px solid var(--ink); background: var(--card); font-size: 12px; z-index: 5; }
@media (max-width: 1100px) {
  .m-run-hero { grid-template-columns: 1fr; gap: 20px; } .m-big { font-size: 96px; } .m-run-kpis { grid-template-columns: 1fr 1fr; }
  .m-lanes { grid-template-columns: 110px 1fr; } .m-sheet { grid-template-columns: repeat(2, 1fr); }
  .m-ls { grid-template-columns: 1fr; margin: 0; } .m-ls-r { border-left: 0; border-top: 1px solid var(--ink); }
  .m-tag-g { grid-template-columns: 1fr; } .m-tag-g > aside:first-child, .m-tag-r { border: 0; padding: 16px 0; }
  .m-room { grid-template-columns: repeat(2, 1fr); } .m-room-b, .m-po-2, .m-fg { grid-template-columns: 1fr; }
  .m-po { grid-template-columns: 1fr; } .m-po-steps { display: none; } .m-lines { display: block; overflow-x: auto; }
}
.m-ev.off span { background: var(--paper); padding: 1px 4px; }
.m-sheet:not([style]) .m-card .sk { aspect-ratio: 4/3; }