/* muhan.css — muhanwms 웹 화면 스타일. 무한상사 CI 2차 시안 S2 「딥네이비 사이드바 (Navy Rail)」(2026-10-15)
* Design Ref: docs/02-design/features/2026-10-15-CI디자인개편.design.md v0.6 §5 — 토큰 표(§5.0)가 정본, 값은 :root 한 곳에서만 바꾼다.
* 로드 순서: js/mktlist/mktlist.css(원본) → lib/material-symbols/v377/material-symbols.css(아이콘) → 이 파일(뒤에서 덮어쓴다, §J2.2) → 화면별 css(muhanMaster · Order · Inbound).
* 알림 창 스타일은 js/alertDialog.js 가 첫 알림 때 head 끝에 싣는다(.ad-*) → §9 는 :root 를 붙여 특이도로 이긴다(!important 금지).
* 화면별 css 가 뒤에 실려 같은 특이도면 그쪽이 이긴다 → 공통 모양을 꼭 입혀야 하는 곳(코드 칸 · 칸 카드)은 :root 나 부모 클래스로 한 단계 높인다.
* 외부 CDN 없음(CSP default-src 'self') — 글꼴은 css/fonts 의 Pretendard(OFL) · 아이콘은 lib/material-symbols 의 Google Material Symbols(Apache 2.0, §0 · §5 아이콘).
* CI 색: 남색 = 주색 계열, 노랑 = 레일 활성(진남색 위 10.9:1), 하늘 · 민트 = 로고 · 레일 포커스 · 무늬. 흰 바탕 글자로는 쓰지 않는다.
* 구획: 0 글꼴 · 1 원시 토큰 · 2 의미 토큰 · 3 기존 이름 · 4 기본 · 5 컴포넌트 · 6 틀(Index — 레일 · 펼침 패널 · 상단 바) · 7 SubPage(카드) ·
* 8 mktlist · 9 alertDialog · 10 로그인 · 11 인쇄 · 12 모션 · 13 반응형
*/
/* ── 0 글꼴 ───────────────────────────────────────────────────────── */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url(fonts/Pretendard-Regular.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url(fonts/Pretendard-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url(fonts/Pretendard-Bold.woff2) format("woff2"); }
/* 아이콘 글꼴(Material Symbols)은 lib/material-symbols/v377/material-symbols.css 가 싣는다 — 화면 틀이 이 파일보다 먼저 부른다(§5 아이콘) */
:root {
/* ── 1 원시 토큰(램프 — 전문가2 02-color S2) — 화면 규칙은 아래 의미 토큰을 쓴다 ── */
--mh-ci-navy: #223776; /* CI 실측(워드마크 · 점) */
--mh-ci-yellow: #FFE33A;
--mh-ci-sky: #83C1EA;
--mh-ci-mint: #73C6BE;
--mh-ci-pink: #FFD7E2; /* 가치 VARIOUS — 로그인 표어에만 */
--mh-navy-50: #EEF2FC; --mh-navy-100: #E8EEFB; --mh-navy-200: #C5D2F1; --mh-navy-300: #97ACE3; --mh-navy-400: #6383D3;
--mh-navy-500: #3F66C8; --mh-navy-600: #2A4190; --mh-navy-700: var(--mh-ci-navy); --mh-navy-800: #1A2858; --mh-navy-900: #131C3D;
--mh-gray-0: #FFFFFF; --mh-gray-50: #F3F5F9; --mh-gray-100: #E9ECF2; --mh-gray-200: #E1E5EC; --mh-gray-300: #C8CFDA;
--mh-gray-400: #A4ADBC; --mh-gray-500: #8A93A3; --mh-gray-600: #4E5869; --mh-gray-700: #353E4E; --mh-gray-800: #18202F; --mh-gray-900: #0F1522;
--mh-yellow-50: #FDFBEB; --mh-yellow-100: #FBF5CD; --mh-yellow-700: #926600; --mh-yellow-800: #754D00;
/* ── 2 의미 토큰 ── */
--mh-bg: var(--mh-gray-50); /* 화면 바탕(틀 · SubPage) */
--mh-panel: #FFFFFF; /* 카드 · 상단 바 · 입력 */
--mh-text: var(--mh-gray-800); /* 흰 위 16.5 */
--mh-text-2: var(--mh-gray-600); /* 7.4 */
--mh-text-3: #636C7D; /* placeholder 5.3 */
--mh-border: #C9D0DA; /* 카드 테두리(그림자만으로 경계를 만들지 않는다) */
--mh-border-soft: var(--mh-gray-100); /* 카드 안 구분선 */
--mh-line-input: var(--mh-gray-500); /* 입력 · 보조 버튼 테두리 — 흰 위 3.2(1.4.11) */
--mh-primary: var(--mh-navy-600); /* 주 버튼 · 세그먼트 선택 · 선택 행 막대 · 링크 — 흰 글자 9.8 */
--mh-primary-hover: var(--mh-navy-700);
--mh-primary-active: var(--mh-navy-800);
--mh-focus: var(--mh-navy-500); /* 포커스 링(밝은 바탕) 5.4 */
--mh-check: var(--mh-navy-500); /* 체크박스 · 라디오 채움 — 주 버튼(navy-600)보다 한 단계 밝게(2026-10-16 사용자 「권한 체크박스 색이 너무 진함」) · 흰 바탕 5.4 */
--mh-success: #0B7A55; --mh-success-bg: #E6F6EF; --mh-success-line: #9FD8C0;
--mh-warning: #8A5300; --mh-warning-bg: #FFF4D6; --mh-warning-line: #EFCF7E;
--mh-danger: #B4232F; --mh-danger-bg: #FDECEE; --mh-danger-line: #F2B9BF; --mh-danger-hover: #951C27;
--mh-info: #245FA8; --mh-info-bg: #E9F2FD; --mh-info-line: #ADCDF2;
--mh-row-hover: var(--mh-gray-50);
--mh-row-selected: var(--mh-navy-100);
--mh-row-checked: var(--mh-navy-50);
--mh-row-dirty: var(--mh-yellow-50);
--mh-row-dirty-selected: var(--mh-yellow-100);
--mh-dirty-mark: var(--mh-yellow-700);
/* 그리드(mktlist) 색 = LFMS 반출마감 대시보드(CY_CutDsh — js/cy/cyCommon.css, 배차닷컴 jqxGrid 실측) 와 같게(2026-10-16 사용자 지시 U10) */
--mh-grid-head: #F7F7F7; /* 그리드 머리 바탕 · 폼 라벨 바탕(옛 #F7F8FA) */
--mh-grid-head-text: #000000; /* 머리 글자 · 집계 줄 글자 */
--mh-grid-head-line: #C5C5C5; /* 머리 아래 선 */
--mh-grid-vline: #D9D9D9; /* 머리 칸 사이 세로선(D15 · U9 — 옛 #BCC4D0) */
--mh-grid-band: #E5E5E5; /* 검색칸 줄 · 집계 줄 바탕 */
--mh-grid-band-line: #CFCFCF; /* 검색칸 줄 세로선 · 아래 선 · 집계 줄 위 선 */
--mh-grid-fin: #FFFFFF; /* 검색칸 테두리 — 회색 줄 위 흰 칸(옛 #7C8DA0 3.2:1) */
--mh-grid-row-line: #E0E0E0; /* 행 사이 선 · 마지막 행 아래 선 */
--mh-grid-border: #EFEFEF; /* 목록 바깥 테두리 */
/* 레일(진남색) */
--mh-rail-bg: var(--mh-navy-900);
--mh-rail-text: #C3CBE0; /* 레일 위 9.6 */
--mh-rail-icon: #8D98B8; /* 5.8 */
--mh-rail-label: #8A95B8;
--mh-rail-hover: rgba(255, 255, 255, .06);
--mh-rail-act-bg: #24346E;
--mh-rail-act: var(--mh-ci-yellow); /* 활성 아이콘 · 막대 10.9 */
--mh-rail-line: rgba(255, 255, 255, .08);
--mh-rail-focus: var(--mh-ci-sky);
--mh-tab-tray: var(--mh-gray-50);
--mh-tab-act: #FFFFFF;
--mh-on-dark: #FFFFFF;
--mh-scrim: rgba(14, 26, 60, .45); /* 모달 · 알림 · 서랍 막 */
--mh-scrim-light: rgba(15, 21, 34, .06); /* 펼침 패널 막(본문은 그대로 보인다) */
--mh-busy-scrim: rgba(246, 247, 251, .7);
--mh-auth-shade: rgba(19, 28, 61, .92); /* 로그인 배경 그림 아래쪽 그늘(= navy-900) — 왼쪽 아래 문구가 컨베이어 위에서도 읽히게 */
--mh-auth-divider: rgba(255, 255, 255, .28); /* 로그인 왼쪽 위 「무한상사 │ 창고관리시스템」 구분선 */
--mh-auth-glow: 0 2px 14px rgba(8, 14, 36, .6); /* 그림 위 표어 글자 그늘 */
--mh-toast-bg: var(--mh-navy-900);
--mh-toast-ok: #5BD69A;
--mh-toast-err: #FF8A80;
--mh-shadow-xs: 0 1px 2px rgba(15, 21, 34, .06);
--mh-shadow-pop: 0 8px 24px rgba(14, 26, 60, .16);
--mh-shadow-raised: 0 1px 2px rgba(14, 26, 60, .06), 0 16px 40px rgba(14, 26, 60, .18);
/* 크기 */
--mh-rail-w: 72px;
--mh-flyout-w: 260px;
--mh-top-h: 52px; /* 상단 바(탭 줄 포함) */
--mh-ctl-h: 32px;
--mh-row-h: 36px;
--mh-radius: 6px;
--mh-radius-card: 8px;
--mh-gap: 10px; /* 화면 바깥 여백 · 카드 사이 */
--mh-font: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, system-ui, sans-serif;
/* ── 3 기존 이름(화면 · 화면별 css 가 쓰는 이름 — 값만 새 토큰) ── */
--mh-navy: var(--mh-navy-700);
--mh-blue: var(--mh-primary);
--mh-blue-soft: var(--mh-navy-100);
--mh-red: var(--mh-danger);
--mh-green: var(--mh-success);
--mh-muted: var(--mh-text-2);
--mh-label-bg: var(--mh-grid-head);
--mh-sky-50: var(--mh-info-bg);
--mh-sky-200: var(--mh-info-line);
--mh-sky-700: var(--mh-info);
--mh-chip-ok-bg: var(--mh-success-bg); --mh-chip-ok-fg: var(--mh-success); --mh-chip-ok-line: var(--mh-success-line);
--mh-chip-bad-bg: var(--mh-danger-bg); --mh-chip-bad-fg: var(--mh-danger); --mh-chip-bad-line: var(--mh-danger-line);
--mh-chip-warn-bg: var(--mh-warning-bg); --mh-chip-warn-fg: var(--mh-warning); --mh-chip-warn-line: var(--mh-warning-line);
--mh-shadow-sm: var(--mh-shadow-xs);
--mh-shadow-md: var(--mh-shadow-pop);
--mh-shadow-lg: var(--mh-shadow-raised);
}
/* 촘촘 보기(선택) — */
:root[data-density="compact"] { --mh-row-h: 32px; --mh-ctl-h: 28px; }
/* ── 4 기본 ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: var(--mh-font); font-size: 13px; color: var(--mh-text); background: var(--mh-bg); }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; font-size: 13px; color: inherit; }
::placeholder { color: var(--mh-text-3); opacity: 1; }
/* =====================================================================
5 컴포넌트 — 아이콘 · 버튼 · 아이콘 버튼 · 입력 · 처리 중 · 모달 · 토스트 · 상태 칩
===================================================================== */
/* 아이콘 — Google Material Symbols Outlined · 400 · FILL 0 · GRAD 0 · 24(공통 규칙 §4.4). 글꼴 · 기본 모양 · .ms-20 · .ms-18 은
lib/material-symbols/v377/material-symbols.css(규칙 샘플 그대로 — 고치지 않는다). html search,
JS 는 common.js msIcon('search'). 크기는 기본 24 · 버튼 · 입력칸 안 20 · 표 · 작은 버튼 18 — 자리마다 아래 각 구획에서 정한다.
아이콘이 이라 「> span」 으로 이름 글자를 고르는 규칙은 :not(.material-symbols-outlined) 를 붙인다 */
.material-symbols-outlined { flex: 0 0 auto; }
/* CSS 로 붙이는 아이콘(::before — 칩 · 알림 버튼 · 로그인 상태)의 글꼴. letter-spacing 이 0 이 아니면 브라우저가 합자를 끄므로 늘 normal */
.mh-chip::before, :root .ad-btn::before, .mh-auth-state::before, .mh-auth-confirm p::before,
.mh-auth-rule li.is-ok::before, .mh-auth-hint.is-ok::before, .mh-auth-hint.is-err::before {
font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.mh-spin { animation: mh-spin 1s linear infinite; } /* 처리 중 아이콘(progress_activity) 회전 */
@keyframes mh-spin { to { transform: rotate(360deg); } }
.mh-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--mh-ctl-h); padding: 0 12px; border: 1px solid var(--mh-line-input); border-radius: var(--mh-radius);
background: var(--mh-panel); color: var(--mh-text); cursor: pointer; white-space: nowrap; font-weight: 600;
}
.mh-btn:hover { background: var(--mh-gray-50); border-color: var(--mh-gray-600); }
.mh-btn:active { background: var(--mh-gray-100); }
.mh-btn:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; }
.mh-btn:disabled { background: var(--mh-gray-100); border-color: var(--mh-gray-200); color: var(--mh-gray-500); cursor: not-allowed; }
.mh-btn--primary { background: var(--mh-primary); border-color: var(--mh-primary); color: var(--mh-on-dark); }
.mh-btn--primary:hover { background: var(--mh-primary-hover); border-color: var(--mh-primary-hover); }
.mh-btn--primary:active { background: var(--mh-primary-active); border-color: var(--mh-primary-active); }
.mh-btn--danger { border-color: var(--mh-danger-line); color: var(--mh-danger); }
.mh-btn--danger:hover { background: var(--mh-danger-bg); border-color: var(--mh-danger); }
.mh-btn--sm { height: 28px; padding: 0 10px; gap: 5px; font-size: 12.5px; }
.mh-btn--link { height: auto; border: none; background: none; color: var(--mh-primary); padding: 0 4px; } /* 글자 높이만 — 목록 칸에서 행을 키우지 않는다(§8) */
.mh-btn--link:hover { background: none; text-decoration: underline; }
.mh-btn .material-symbols-outlined { font-size: 20px; }
.mh-btn--sm .material-symbols-outlined { font-size: 18px; }
/* 아이콘 버튼(상단 바 · 패널 머리 — 글자 없음, title · aria-label 필수: D10) */
.mh-ibtn { position: relative; flex: 0 0 auto; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
background: transparent; color: var(--mh-text-2); cursor: pointer; }
.mh-ibtn .material-symbols-outlined { font-size: 20px; }
.mh-ibtn:hover { background: var(--mh-gray-100); color: var(--mh-text); }
.mh-ibtn:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; }
.mh-ibtn[aria-pressed="true"] { background: var(--mh-navy-50); color: var(--mh-primary); }
/* 입력 */
.mh-input, :is(.mh-page, .mh-modal) input[type="text"], :is(.mh-page, .mh-modal) input[type="password"], :is(.mh-page, .mh-modal) input[type="date"],
:is(.mh-page, .mh-modal) input[type="number"], :is(.mh-page, .mh-modal) input[type="search"], :is(.mh-page, .mh-modal) select, :is(.mh-page, .mh-modal) textarea {
height: var(--mh-ctl-h); padding: 0 10px; border: 1px solid var(--mh-line-input); border-radius: var(--mh-radius); background: var(--mh-panel);
color: var(--mh-text); min-width: 0; font-variant-numeric: tabular-nums;
}
:is(.mh-page, .mh-modal) input[type="date"] { padding-right: 6px; }
:is(.mh-page, .mh-modal) textarea { height: auto; padding: 6px 10px; line-height: 1.5; }
.mh-input:focus, :is(.mh-page, .mh-modal) input:focus, :is(.mh-page, .mh-modal) select:focus, :is(.mh-page, .mh-modal) textarea:focus {
outline: 2px solid var(--mh-focus); outline-offset: 1px; border-color: var(--mh-focus); }
:is(.mh-page, .mh-modal) input[readonly] { background: var(--mh-gray-50); color: var(--mh-text-2); }
:is(.mh-page, .mh-modal) :is(input, select, textarea):disabled { background: var(--mh-gray-100); color: var(--mh-gray-500); }
:is(.mh-page, .mh-modal) [aria-invalid="true"] { border-color: var(--mh-danger); box-shadow: inset 0 0 0 1px var(--mh-danger); background: var(--mh-danger-bg); }
:is(.mh-page, .mh-modal) input[type="checkbox"], :is(.mh-page, .mh-modal) input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--mh-check); vertical-align: middle; }
/* 코드 칸 [명칭 | 🔍 | ×] 한 덩어리(D14 · 공통 규칙 §4.3 — 명칭 칸을 누르면 검색 모달, js/muhanMaster.js mhPicker).
배치 · 폭은 muhanMaster.css(뒤에 실림) — 모양만 :root 로 한 단계 높여 덮는다 */
:root .mh-picker { gap: 0; height: var(--mh-ctl-h); border: 1px solid var(--mh-line-input); border-radius: var(--mh-radius); background: var(--mh-panel); overflow: hidden; }
:root .mh-picker:focus-within { outline: 2px solid var(--mh-focus); outline-offset: 1px; border-color: var(--mh-focus); }
:root :is(.mh-page, .mh-modal) .mh-picker input[type="text"] { height: 100%; border: 0; border-radius: 0; outline: none; background: transparent; }
:root :is(.mh-page, .mh-modal) .mh-picker input.mh-picker-off { background: var(--mh-gray-100); }
:root :is(.mh-page, .mh-modal) .mh-picker .mh-btn { height: 100%; padding: 0 9px; border: 0; border-left: 1px solid var(--mh-border-soft); border-radius: 0; background: transparent; color: var(--mh-text-2); }
:root :is(.mh-page, .mh-modal) .mh-picker .mh-btn:hover { background: var(--mh-gray-100); color: var(--mh-text); }
:root :is(.mh-page, .mh-modal) .mh-picker .mh-btn:disabled { background: var(--mh-gray-50); color: var(--mh-gray-400); }
/* 처리 중(common.js muhanBusy — 공통 규칙 §4.8) — 요청마다 바로 보이고 클릭 · 키를 막는다. 빨리 끝나도 막과 상자를 함께 최소 0.4초(MUHAN_BUSY_MIN_MS, 2026-10-21 사용자 지적
「조회되었는지 구분이 안됨」 · 「… 같이 사라지게」) 두었다가 한 번에 걷는다. z-index: 모달 1050 < 처리 중 2000 < 토스트 2100, 알림 창(