/* =====================================================================
musign ERP — design system (Pretendard)
Sufly design rules: NO box-shadow / border boxes / left-border. Surface
contrast (white ↔ gray-50) for separation. Active = #111 / light gray tint
(never blue). Min 12px. Inputs = bottom line only. Primary = black #111 (2026-10-13 남색에서 바꿈).
============================================================================ */
@font-face {
font-family: 'Pretendard Variable';
font-weight: 45 920;
font-style: normal;
font-display: swap;
src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
}
:root {
--font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
--bg: #f8f9fa; /* page: gray-50 */
--surface: #ffffff;
--surface-2: #fcfcfc;
--ink: #111111;
--ink-2: #4b5563; /* gray-600 body */
--ink-3: #6b7280; /* gray-500 meta */
--ink-4: #9ca3af; /* gray-400 */
--line: rgba(17, 17, 17, .08); /* internal dividers only (never a box outline) */
--line-soft: rgba(17, 17, 17, .06);
--tint: rgba(17, 17, 17, .04); /* hover / selected background */
--tint-2: rgba(17, 17, 17, .02);
--primary: #111111; /* 검정: 버튼 · 강조 면(2026-10-13 남색 #1e1e5a 에서 바꿈) */
--accent: #316ff6; /* brand accent — links / emphasis only (not active tint) */
--sidebar: #111114;
--radius: 12px; /* blocks / cards (m-CHAT --admin-radius) */
--radius-lg: 14px; /* drawers / overlays */
--radius-ctrl: 8px; /* buttons / controls / popover trigger */
--shadow-floating: 0 4px 16px rgba(17, 17, 17, .06); /* overlays only (drawer/popover/toast) */
--ok: #15803d; --ok-bg: #dcfce7;
--warn: #b45309; --warn-bg: #fef3c7;
--danger: #dc2626; --danger-bg: #fee2e2;
--info: #1d4ed8; --info-bg: #dbeafe;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
letter-spacing: -.01em;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
/* ---- Type scale (consistent hierarchy; hard floor 12px) ---------------------
h1 24/800 page title · h2 18/700 section · h3 16/700 · h4 14/700
.h5 12/700 caps labels/table-head · .h6 12/600 meta · body 14 · min 12px. */
.h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.h4 { font-size: .875rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.h5 { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.h6 { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.desc, .meta-txt { font-size: .875rem; color: var(--ink-3); }
small, .txt-min { font-size: .75rem; } /* 12px floor — never below */
/* ---- App shell ---- */
.app { display: flex; min-height: 100vh; }
.sidebar {
width: 240px; flex-shrink: 0; background: var(--sidebar); color: #c6c6cb;
display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -.02em; }
.sidebar .brand .logo { width: 26px; height: 26px; border-radius: 7px; background: #fff; display: grid; place-items: center; color: #111; font-size: .8rem; }.nav-group { padding: .5rem 0 .2rem; }
.nav-group .label { padding: .5rem 1.2rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #7c7c84; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .58rem 1.2rem; color: #c6c6cb; font-size: .875rem; font-weight: 500; cursor: pointer; }
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; } /* light tint, no blue, no left-bar */
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2; opacity: .92; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 56px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 20; }
.topbar .crumb { font-size: .9rem; color: var(--ink-3); font-weight: 600; }
.topbar .crumb b { color: var(--ink); }
.topbar .user { display: flex; align-items: center; gap: .8rem; font-size: .84rem; color: var(--ink-2); }
.topbar .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
/* 퇴근 타이머 (우측 상단) */
.offclock { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ink-2);
background: var(--tint-2); border-radius: 999px; padding: .22rem .6rem; font-variant-numeric: tabular-nums; }
.offclock.over { color: var(--danger); }
/* 알림 벨 + 배지 + 팝오버 */
.noti-bell { position: relative; background: none; border: 0; cursor: pointer; color: var(--ink-2); display: inline-flex; padding: .3rem; border-radius: 8px; }
.noti-bell:hover { background: var(--tint-2); }
.noti-bell svg { width: 20px; height: 20px; }
.noti-badge { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 1; }
.noti-badge.show { display: inline-flex; }
/* 헤더 결재 대기 표시 · 사이드바 결재함 숫자 */
.hd-approval { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px;
background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.hd-approval:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.hd-approval b { font-variant-numeric: tabular-nums; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff;
font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.noti-pop { position: absolute; top: 46px; right: 1.2rem; width: 360px; max-width: 92vw; z-index: 80; background: var(--surface);
border-radius: var(--radius); box-shadow: var(--shadow-floating); padding: .4rem; display: none; }
.noti-pop.open { display: block; }
.noti-pop .np-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .6rem; }
.noti-pop .np-head b { font-size: .9rem; color: var(--ink); }
.noti-pop .np-list { max-height: 380px; overflow-y: auto; }
.noti-pop .np-foot { text-align: center; border-top: 1px solid var(--line); padding: .5rem; }
/* 알림 아이템 (팝오버 + 페이지 공용) */
.noti-item { padding: .65rem .7rem; border-radius: 8px; cursor: pointer; border-bottom: 1px solid rgba(17,17,17,.05); }
.noti-item:last-child { border-bottom: 0; }
.noti-item:hover { background: var(--tint-2); }
.noti-item.unread { background: rgba(17,17,17,.035); }
.noti-item.unread b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-right: .4rem; vertical-align: middle; }
/* 언더바 탭 (디자인 시스템: active=#111 언더바) */
.tabs .tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .8rem; font-size: .875rem; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.tabs .tab:hover { color: var(--ink-2); }
.tabs .tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.content { padding: 1.5rem 1.8rem; max-width: 1240px; width: 100%; }
/* ---- Page header ---- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.3rem; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; }
.page-head .desc { color: var(--ink-3); font-size: .875rem; margin-top: .25rem; font-weight: 400; }
/* ---- Buttons (black primary, no shadow) ---- */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: var(--radius-ctrl); border: 0; font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; background: var(--primary); color: #fff; transition: opacity .12s, background .12s; }
.btn:hover { opacity: .9; }
.btn svg { width: 16px; height: 16px; }
.btn.ghost { background: var(--tint); color: var(--ink); }
.btn.ghost:hover { background: rgba(17,17,17,.07); opacity: 1; }
.btn.danger { background: var(--danger-bg); color: var(--danger); }
.btn.danger:hover { opacity: 1; background: #fdd5d5; }
.btn.accent { background: var(--accent); }
.btn.sm { padding: .36rem .7rem; font-size: .8rem; }
/* ---- Cards / panels (NO border, NO shadow — white on gray page) ---- */
.card { background: var(--surface); border-radius: var(--radius); }
.card .card-body { padding: 1.2rem 1.3rem; }
.toolbar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
/* inputs: bottom line only, square, focus underline color */
.input, select.input, textarea.input {
font-family: inherit; font-size: .9rem; padding: .5rem .1rem; color: var(--ink);
background: transparent; width: 100%;
border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.input:focus { outline: none; border-bottom-color: var(--primary); }
.input::placeholder { color: var(--ink-4); }
/* 바꿀 수 없는 칸(권한이 없어 잠근 칸 등)은 흐리게 보여 누를 수 없다는 것을 알린다 */
.input:disabled { color: var(--ink-3); cursor: not-allowed; }
.pop-select > select:disabled ~ .pop-trigger, .dp-trigger:disabled { opacity: .6; cursor: not-allowed; }
.pop-select > select:disabled ~ .pop-trigger:hover, .dp-trigger:disabled:hover { background: var(--tint-2); }
select.input { padding-left: 0; }
.search { max-width: 260px; }
/* ---- Table (minimal SaaS: no wrapper box/shadow — hairline row+col dividers,
generous vertical padding, tonal header, 12px uppercase head) ---- */
.table-wrap { background: var(--surface); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.grid th, table.grid td { text-align: left; padding: .9rem 1.05rem; white-space: nowrap; vertical-align: middle; }
/* hairline column dividers (very faint) — dropped on the last cell */
table.grid th:not(:last-child), table.grid td:not(:last-child) { border-right: 1px solid var(--line-soft); }
table.grid thead th { color: var(--ink-3); font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
background: var(--surface-2); border-bottom: 1px solid var(--line); }
table.grid tbody td { border-bottom: 1px solid var(--line-soft); color: var(--ink); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: var(--tint-2); }
table.grid tbody tr.clickable:hover { background: var(--tint); cursor: pointer; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; padding: .13rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--tint); color: var(--ink); }
.badge.gray { background: #f1f3f5; color: var(--ink-2); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info { background: var(--info-bg); color: var(--info); }
/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem; max-width: 720px; }
/* 품목 표처럼 칸이 많은 폼(기안 작성)은 조금 넓게 쓴다 */
.form-grid.wide { max-width: 960px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
/* 그리드 칸은 기본으로 내용의 최소 폭보다 줄지 않는다. 그래서 칸 안의 넓은 표가 폼 전체를 화면 밖으로
밀었다(2026-10-10 E2E, 모바일 지출결의 645px). 칸이 화면 폭을 따르게 하고 넓은 표는 표 안에서 넘기게 한다. */
.form-grid > *, .form-row > *, .doctype-section > *, .line-row > * { min-width: 0; }
/* vertical rhythm inside a doctype section / 결재선 row so each label groups with its OWN
input below it, not the input above (display:grid keeps JS show/hide via style.display). */
.doctype-section { display: grid; gap: 1.15rem; align-content: start; }
.doctype-section[style*="display: none"], .doctype-section[style*="display:none"] { display: none !important; }
.line-row { display: grid; gap: 1rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .45rem; }
.field .hint { font-size: .75rem; color: var(--ink-3); margin-top: .3rem; }
textarea.input { min-height: 150px; resize: vertical; line-height: 1.6; border: 1px solid var(--line); border-radius: var(--radius-ctrl); padding: .6rem .7rem; }
textarea.input:focus { border-color: var(--primary); }
.form-actions { display: flex; gap: .5rem; margin-top: 1.4rem; }
/* ---- Detail / description list (surface contrast, no box border) ---- */
dl.detail { display: grid; grid-template-columns: 150px 1fr; gap: 0; margin: 0; border-radius: var(--radius); overflow: hidden; }
dl.detail dt { background: var(--bg); padding: .75rem .95rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
dl.detail dd { padding: .75rem .95rem; margin: 0; border-bottom: 1px solid var(--line-soft); }
dl.detail dt:last-of-type, dl.detail dd:last-of-type { border-bottom: 0; }
/* ---- Pagination (active = #111, not blue) ---- */
.pager { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: 1.2rem; }
.pager a, .pager span { min-width: 32px; text-align: center; padding: .38rem .55rem; border-radius: var(--radius-ctrl); font-size: .82rem; color: var(--ink-2); }
.pager a:hover { background: var(--tint); }
.pager .cur { background: var(--ink); color: #fff; font-weight: 700; }
/* ---- Empty / states ---- */
.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-4); font-size: .875rem; }
.empty svg { width: 48px; height: 48px; color: var(--ink-4); margin-bottom: .6rem; }
/* ---- Flash / toast ---- */
.flash { padding: .75rem 1rem; border-radius: var(--radius-ctrl); margin-bottom: 1rem; font-size: .875rem; font-weight: 600; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--danger-bg); color: var(--danger); }
#toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
max-width: min(420px, calc(100vw - 40px)); pointer-events: none; }
#toast .t { background: #fff; color: var(--ink); padding: .75rem 1rem; border-radius: var(--radius-ctrl); font-size: .875rem; box-shadow: var(--shadow-floating); font-weight: 600; opacity: 0; transform: translateY(8px); transition: .2s;
word-break: keep-all; overflow-wrap: anywhere; pointer-events: auto; }
#toast .t.show { opacity: 1; transform: none; }
#toast .t.err { color: var(--danger); }
/* ---- Drawer (right-slide Sheet — replaces centered modals) ------------------
Overlay + panel structure: head / body(scroll) / foot(hairline top). The shared
openModal() helper renders into this, so every former modal is now a drawer. */
.drawer-bg { position: fixed; inset: 0; background: rgba(17, 17, 17, .32); opacity: 0; visibility: hidden;
transition: opacity .22s ease, visibility .22s ease; z-index: 90; }
.drawer-bg.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 460px; max-width: 94vw; background: var(--surface);
border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--shadow-floating);
display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); }
.drawer-bg.open .drawer { transform: none; }
.drawer .d-head { padding: 1.15rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drawer .d-head .d-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.drawer .d-head .d-close { border: 0; background: var(--tint); color: var(--ink-2); width: 30px; height: 30px; border-radius: 999px;
font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.drawer .d-head .d-close:hover { background: rgba(17,17,17,.08); }
.drawer .d-body { padding: .4rem 1.4rem 1.2rem; overflow-y: auto; flex: 1; }
.drawer .d-foot { padding: 1rem 1.4rem; display: flex; justify-content: flex-end; gap: .5rem; border-top: 1px solid var(--line-soft); }
@media (max-width: 560px) { .drawer { width: 100vw; border-radius: 0; } }
/* ---- Date / DateTime picker (CalendarPicker light · DateTimePicker dark) -----
Enhances native : native input hidden (form
value kept), .dp-trigger mirrors it, .dp-pop is a floating calendar (+ time
column for datetime). Matches sufly hub Picker reference. */
.dp { position: relative; width: 100%; }
.dp-trigger { width: 100%; display: flex; align-items: center; gap: .5rem; font-family: inherit; font-size: .9rem;
color: var(--ink); text-align: left; cursor: pointer; background: var(--tint-2); border: 0; border-radius: var(--radius-ctrl);
padding: .5rem .7rem; min-height: 38px; transition: background .12s; }
.dp-trigger:hover, .dp-trigger.open { background: var(--tint); }
.dp-trigger svg { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }
.dp-trigger .dp-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-trigger .dp-val.placeholder { color: var(--ink-4); }
.dp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 75; background: var(--surface);
border-radius: var(--radius); box-shadow: var(--shadow-floating); padding: .7rem; display: none; }
.dp-pop.open { display: flex; gap: .5rem; }
.dp-cal { width: 250px; }
.dp-cal-head { display: flex; align-items: center; justify-content: space-between; padding: .1rem .1rem .5rem; }
.dp-mon { font-size: .9rem; font-weight: 700; }
.dp-nav { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; width: 28px; height: 28px;
border-radius: 6px; font-size: 1.05rem; line-height: 1; }
.dp-nav:hover { background: var(--tint); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: .7rem; font-weight: 600; color: var(--ink-3); padding: .25rem 0; }
.dp-wd.sun { color: var(--danger); } .dp-wd.sat { color: var(--info); }
.dp-day { text-align: center; font-size: .8rem; padding: .42rem 0; border-radius: 999px; cursor: pointer; color: var(--ink);
font-variant-numeric: tabular-nums; }
.dp-day:hover { background: var(--tint); }
.dp-day.other { color: var(--ink-4); }
.dp-day.today { box-shadow: inset 0 0 0 1px var(--line); }
.dp-day.sun { color: var(--danger); } .dp-day.sat { color: var(--info); }
.dp-day.selected, .dp-day.selected.sun, .dp-day.selected.sat { background: var(--accent); color: #fff; font-weight: 700; }
/* 범위 선택(시작~종료) */
.dp-day.in-range { background: var(--tint-2); border-radius: 0; color: var(--ink); }
.dp-day.range-start { border-radius: 999px 0 0 999px; }
.dp-day.range-end { border-radius: 0 999px 999px 0; }
.dp-day.range-start.range-end { border-radius: 999px; }
.date-range { position: relative; }
/* dark variant (DateTimePicker) */
.dp-pop.dark { background: #18181b; }
.dp-pop.dark .dp-mon, .dp-pop.dark .dp-day { color: #e7e7ea; }
.dp-pop.dark .dp-nav { color: #b8b8bf; } .dp-pop.dark .dp-nav:hover { background: rgba(255,255,255,.08); }
.dp-pop.dark .dp-wd { color: #8e8e96; }
.dp-pop.dark .dp-day:hover { background: rgba(255,255,255,.08); }
.dp-pop.dark .dp-day.other { color: #5e5e66; }
.dp-pop.dark .dp-day.today { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.dp-pop.dark .dp-wd.sun, .dp-pop.dark .dp-day.sun { color: #ff8a8a; }
.dp-pop.dark .dp-wd.sat, .dp-pop.dark .dp-day.sat { color: #8ab4ff; }
.dp-pop.dark .dp-day.selected { background: var(--accent); color: #fff; }
.dp-time { width: 86px; border-left: 1px solid rgba(255,255,255,.1); padding-left: .35rem; max-height: 250px; overflow-y: auto;
display: flex; flex-direction: column; }
.dp-time-h { font-size: .75rem; color: #8e8e96; padding: .1rem .4rem .35rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; position: sticky; top: 0; background: #18181b; }
.dp-slot { padding: .34rem .5rem; font-size: .78rem; color: #d0d0d6; border-radius: 6px; cursor: pointer; text-align: center;
font-variant-numeric: tabular-nums; }
.dp-slot:hover { background: rgba(255,255,255,.08); }
.dp-slot.selected { background: var(--accent); color: #fff; font-weight: 700; }
@media (max-width: 560px) { .dp-pop.open { flex-direction: column; } .dp-time { width: 250px; border-left: 0; max-height: 150px; flex-direction: row; flex-wrap: wrap; } }
/* button icon: injected leading