/* Pretendard 웹폰트 (variable) — 로드 실패 시 시스템 맑은 고딕 fallback */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
/* ══════════════════════════════════════════════════════════════════
CAS-on 공통 디자인 토큰 & 글로벌 스타일
- 색상 3계열 + 중립 + 위험 만 사용
- 여백: 4의 배수 (4·8·12·16)
- 폰트: Pretendard / 맑은 고딕 (단일)
- 굵기 2단계: 400 / 500
══════════════════════════════════════════════════════════════════ */
:root {
/* 브랜드 (파랑 계열) */
--primary: #185FA5; /* 강조 버튼·주요 액션 */
--primary-dark: #0C447C; /* 상단바 배경·강조 텍스트 */
--primary-bg: #E6F1FB; /* 선택 행·합계 배경 */
/* 텍스트 3단계 */
--text: #1A1A1A; /* 본문 */
--text-sub: #5F5E5A; /* 라벨·보조 */
--text-muted: #9A9A94; /* placeholder */
/* 표면 & 경계 */
--border: #E3E3DE;
--surface: #FFFFFF;
--surface-alt: #F7F6F2; /* 헤더·짝수행 */
/* 액션 */
--accent-save: #185FA5;
--danger: #C0392B;
/* 간격 (4의 배수만) */
--gap-1: 4px;
--gap-2: 8px;
--gap-3: 12px;
--gap-4: 16px;
--radius: 6px;
--font: 'Pretendard','맑은 고딕','Malgun Gothic',sans-serif;
/* ── shell 상단바 토큰 (2026-08-07) ────────────────────────
상단바 배경은 테마별 --primary-dark 를 그대로 쓴다(6개 테마 모두 어두운 색).
그 위에 얹히는 글자·pill·구분선은 배경 대비 상대값이라 테마가 바뀌어도
자동으로 따라간다. 색이 고정이던 값(입·퇴·역할 배지)만 변수로 뺐다.
→ shell.html 에서 hex 를 직접 쓰지 말고 반드시 이 변수를 참조할 것. */
--header-bg: var(--primary-dark);
--header-fg: #FFFFFF; /* 주요 글자 */
--header-fg-dim: rgba(255,255,255,.72); /* 라벨·보조 글자 */
--header-fill: rgba(255,255,255,.10); /* pill·버튼 배경 */
--header-fill-hover: rgba(255,255,255,.20);
--header-line: rgba(255,255,255,.24); /* pill 테두리 */
--header-divider: rgba(255,255,255,.30); /* 구분선 */
--header-badge-fill: rgba(255,255,255,.16); /* CAS·AP 배지 배경 */
--header-up: #A7F3D0; /* 입사 (증가) */
--header-down: #FECACA; /* 퇴사 (감소) */
--header-role: #FEF3C7; /* 역할 배지 글자 */
}
/* ══════════════════════════════════════════════════════════════════
테마 변형 — 로 적용
지원: light(기본) · dark · spring · summer · autumn · winter
══════════════════════════════════════════════════════════════════ */
/* 🌙 다크 모드 */
html[data-theme="dark"] {
--primary: #4A90E2;
--primary-dark: #0F172A; /* shell 상단바·사이드바 — 진한 네이비 블랙 */
--primary-bg: #1E293B;
--text: #E5E7EB;
--text-sub: #9CA3AF;
--text-muted: #6B7280;
--border: #374151;
--surface: #0F172A;
--surface-alt: #1E293B;
--accent-save: #4A90E2;
--danger: #EF4444;
}
/* dark 모드에서 body 배경·기본 텍스트 색상도 어둡게 */
html[data-theme="dark"], html[data-theme="dark"] body {
background: var(--surface);
color: var(--text);
}
/* 🌸 봄 (벚꽃) */
html[data-theme="spring"] {
--primary: #E91E63;
--primary-dark: #AD1457;
--primary-bg: #FCE4EC;
--surface-alt: #FFF5F7;
--accent-save: #E91E63;
}
/* 🌊 여름 (바다) */
html[data-theme="summer"] {
--primary: #00838F;
--primary-dark: #006064;
--primary-bg: #E0F7FA;
--surface-alt: #F0F9FB;
--accent-save: #00838F;
}
/* 🍁 가을 (단풍) */
html[data-theme="autumn"] {
--primary: #D84315;
--primary-dark: #BF360C;
--primary-bg: #FBE9E7;
--surface-alt: #FFF3E0;
--accent-save: #D84315;
/* 주황 배경이라 기본 파스텔 입·퇴 색은 대비 4.5:1 미달 → 더 밝게 (2026-08-07) */
--header-up: #E7FBEF;
--header-down: #FFF0F0;
}
/* ❄ 겨울 (설경) */
html[data-theme="winter"] {
--primary: #37474F;
--primary-dark: #263238;
--primary-bg: #ECEFF1;
--surface-alt: #F5F7F8;
--accent-save: #37474F;
}
/* ── 글로벌 기본 ────────────────────────────────────────────── */
html, body {
font-family: var(--font);
color: var(--text);
background: var(--surface);
}
body { font-size: 13px; line-height: 1.5; }
/* ── 헤더 (전 페이지 상단바) ──────────────────────────────── */
.header {
background: var(--primary-dark) !important;
color: #fff !important;
}
.header h1, .header .logo, .header .title {
color: #fff;
font-weight: 500;
letter-spacing: 0;
}
/* 헤더 안 버튼(로그아웃·챗봇 등) — 톤 통일 */
.header .btn-logout,
.header .btn-dashboard {
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.28);
color: #fff;
font-weight: 400;
border-radius: var(--radius);
padding: 6px 12px;
}
.header .btn-logout:hover,
.header .btn-dashboard:hover {
background: rgba(255,255,255,.20);
}
/* 상단 스탯 배지 */
.header .stat {
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.20);
color: #fff;
font-weight: 400;
border-radius: 999px;
padding: 4px 12px;
}
/* ── 탭바 ────────────────────────────────────────────────── */
.tab-bar {
background: var(--surface-alt);
border-bottom: 1px solid var(--border);
}
.tab {
color: var(--text-sub);
font-weight: 400;
padding: 8px 16px;
border: none;
background: transparent;
border-bottom: 2px solid transparent;
}
.tab.active,
.tab.selected {
color: var(--primary-dark);
font-weight: 500;
background: var(--surface);
border-bottom-color: var(--primary);
}
/* ── 카드 / 섹션 ─────────────────────────────────────────── */
.card,
.section,
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--gap-4);
}
/* ── 입력 필드 통일 ──────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=search],
input[type=tel],
select,
textarea {
font-family: var(--font);
font-size: 13px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 7px 10px;
height: 34px;
box-sizing: border-box;
outline: none;
transition: border-color .15s;
}
textarea { height: auto; min-height: 68px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(24,95,165,.14);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
/* ── 버튼 ───────────────────────────────────────────────── */
button, .btn {
font-family: var(--font);
font-size: 13px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 6px 14px;
cursor: pointer;
font-weight: 400;
line-height: 1.4;
transition: background .15s, border-color .15s;
}
button:hover, .btn:hover {
background: var(--surface-alt);
}
button:disabled, .btn:disabled {
opacity: .5;
cursor: not-allowed;
}
/* 주요 액션 (저장·발송·확정 등) — 화면당 1개 원칙 */
.btn-primary, .btn-save, button.primary, .btn.p {
background: var(--accent-save);
border-color: var(--accent-save);
color: #fff;
font-weight: 500;
}
.btn-primary:hover, .btn-save:hover, button.primary:hover, .btn.p:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
}
/* 위험 액션 (삭제) — 필요할 때만 */
.btn-danger, .btn-delete, button.danger, .btn.d {
color: var(--danger);
border-color: var(--border);
background: var(--surface);
font-weight: 400;
}
.btn-danger:hover, .btn-delete:hover, button.danger:hover, .btn.d:hover {
background: #fdeeec;
border-color: var(--danger);
}
/* 보조 버튼 (조회·닫기 등) */
.btn-secondary, button.secondary {
background: var(--surface);
color: var(--text-sub);
border: 1px solid var(--border);
}
.btn-secondary:hover, button.secondary:hover {
background: var(--surface-alt);
color: var(--text);
}
/* ── 표 (그리드) ────────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--text);
background: var(--surface);
}
table th, table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
border-left: none;
border-right: none;
text-align: left;
vertical-align: middle;
}
table thead th,
table th {
background: var(--surface-alt);
color: var(--text-sub);
font-weight: 500;
border-bottom: 1px solid var(--border);
}
/* 표 본문 원톤 — zebra 제거 (사용자 요청) */
table tbody tr:nth-child(even) td,
table tbody tr:nth-child(odd) td {
background: transparent;
}
/* 숫자·금액 셀 (data-numeric 이나 .num 클래스 사용시) */
table td.num, table th.num,
table td[data-type="number"], table th[data-type="number"],
table td.amount, table th.amount {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* 합계 행 */
table tfoot td, table tr.total td, table tr.sum td {
background: var(--primary-bg);
color: var(--primary-dark);
font-weight: 500;
border-top: 1px solid var(--border);
}
/* ══════════════════════════════════════════════════════════════════
★ 표 hover 정책 ★
- 행(tr) hover 하이라이트는 페이지 CSS 그대로 (파랑 유지)
- 셀 사이 이동 시 흰색으로 튀지 않도록 td 개별 hover 무효화
- 컬럼 헤더(thead th, .hc-* 그룹헤더) 는 색 변경 안 함
══════════════════════════════════════════════════════════════════ */
/* 1) 표 본문 TR 기본 원톤 — TR 배경만 강제 (TD 는 자기 인라인/클래스 색 유지) */
table tbody tr,
table tbody tr:hover,
table tbody tr:focus,
table tbody tr:active,
table tbody tr.selected,
table tbody tr.active,
table tbody tr:nth-child(even),
table tbody tr:nth-child(even):hover,
table tbody tr:nth-child(odd),
table tbody tr:nth-child(odd):hover {
background: var(--surface) !important;
background-color: var(--surface) !important;
}
/* TD hover · focus · active · selected — 색 변경 없음, 자기 배경 유지
(배경을 override 하지 않고 outline 만 제거) */
table td:hover, table td:focus, table td:active,
table td.selected, table td.active, table td.sorted,
table td.sort-active, table td.col-active,
table tbody tr:hover td,
table tbody tr:focus td,
table tbody tr:active td,
table tbody tr.selected td,
table tbody tr.active td {
outline: none !important;
/* background 지정 없음 — 인라인 style="background:..." 유지 */
}
/* 2) 컬럼 헤더(thead th) — hover/sort/active 모두 원래 색 유지, 변경 금지 */
table thead th:hover, table thead th:focus, table thead th:active,
table thead th.selected, table thead th.active, table thead th.sorted,
table thead th.sort-asc, table thead th.sort-desc, table thead th.sortable:hover,
th.sortable:hover {
background: inherit !important;
background-color: inherit !important;
color: inherit !important;
outline: none !important;
}
/* 3) pl.html 등 사용자 지정 그룹헤더 클래스 — !important 오버라이드 */
.hc-sub-cell:hover, .hc-stype-header:hover, .hc-diff-header:hover,
.hc-sub-cell:focus, .hc-stype-header:focus, .hc-diff-header:focus {
background: inherit !important;
background-color: inherit !important;
color: inherit !important;
}
/* 4) 합계/총계 행은 hover 시에도 강조 유지 */
table tfoot tr:hover td,
table tr.total:hover td, table tr.sum:hover td {
background: var(--primary-bg) !important;
background-color: var(--primary-bg) !important;
}
/* ══════════════════════════════════════════════════════════════════
★ 표 헤더 전면 통일 — 모든 페이지·모든 탭 동일한 남색 배경 ★
- background/color 강제 통일 (인라인 스타일까지 이기도록 !important + 높은 specificity)
- sticky top 유지 (컬럼 헤더 고정)
- hover 시 색 변경 없음
══════════════════════════════════════════════════════════════════ */
table thead th,
table > thead > tr > th,
table thead tr th {
background: #E8E6DF !important; /* --surface-alt 보다 살짝 어둡게 */
background-color: #E8E6DF !important;
color: var(--text) !important;
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid #C9C7C0 !important;
box-shadow: none !important;
}
/* hover/focus/active/sorted 상태도 동일 색 유지 */
table thead th:hover, table thead th:focus, table thead th:active,
table thead th.sortable, table thead th.sortable:hover,
table thead th.sorted, table thead th.sort-asc, table thead th.sort-desc,
table thead th.active, table thead th.selected,
table > thead > tr > th:hover {
background: #E8E6DF !important;
background-color: #E8E6DF !important;
color: var(--text) !important;
}
/* ══════════════════════════════════════════════════════════════════
★ 표 세로선 제거 · 가로선만 남기기 (사용자 스펙) ★
══════════════════════════════════════════════════════════════════ */
table td, table th {
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
/* ══════════════════════════════════════════════════════════════════
★ 숫자·금액 셀 자동 우측 정렬 + 고정폭 숫자 ★
흔한 클래스명 자동 감지 (.num/.amount/.money/.number/.price/.qty/.count/.total-cell)
══════════════════════════════════════════════════════════════════ */
table td.num, table th.num,
table td.number, table th.number,
table td.amount, table th.amount,
table td.money, table th.money,
table td.price, table th.price,
table td.qty, table th.qty,
table td.count, table th.count,
table td.total-cell, table th.total-cell,
table td[data-type="number"], table th[data-type="number"],
table td[data-type="money"], table th[data-type="money"] {
text-align: right !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
}
/* ── 라벨 ────────────────────────────────────────────── */
label { color: var(--text-sub); font-size: 13px; font-weight: 400; }
b, strong { font-weight: 500; }
/* ── 링크 ────────────────────────────────────────────── */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════════════════
★ 폴리시 : 간격·모달·버튼 세부 정돈 (Phase 7)
문제 있으면 이 블록만 이 파일에서 삭제하면 원복됨
══════════════════════════════════════════════════════════════════ */
/* 1) 간격 정규화 — 카드·섹션 여백만 (표 셀 padding 은 각 페이지 값 유지) */
.card, .section, .panel {
padding: var(--gap-4) !important; /* 16px */
margin-bottom: var(--gap-3) !important; /* 12px */
gap: var(--gap-3);
}
/* 2) 모달 폴리시 — 공통 셀렉터에 부드러운 그림자·둥근 모서리 */
.modal, .modal-content, .modal-inner,
[class*="modal-body"], [class*="modal-panel"],
[class*="popup-content"], [class*="dialog"] {
border-radius: 10px !important;
box-shadow: 0 10px 40px rgba(12, 68, 124, 0.15), 0 2px 8px rgba(0,0,0,0.06) !important;
background: var(--surface) !important;
}
/* 모달 배경(dimmer) 톤 부드럽게 */
.modal-bg, .modal-overlay, [class*="modal-bg"], [id*="modal-bg"] {
background: rgba(12, 30, 55, 0.42) !important;
backdrop-filter: blur(2px);
}
/* 3) 버튼 폴리시 — 모서리·포커스링·간격 일관성 */
button, .btn {
border-radius: var(--radius) !important;
padding: 6px 14px !important;
gap: 6px;
transition: background .15s, border-color .15s, box-shadow .15s;
}
button:focus-visible, .btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.25);
}
/* 아이콘 이모지 + 라벨 사이 간격 자동 */
button > *, .btn > * { vertical-align: middle; }
/* 4) 카드 · 섹션 그림자 톤 부드럽게 */
.card, .section, .panel {
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(12, 30, 55, 0.05), 0 1px 2px rgba(0,0,0,0.03);
}
/* 6) 탭바 폴리시 — 전 페이지 일관된 탭 모양 */
.tab-bar, .tabs, [class*="tab-bar"] {
background: var(--surface) !important;
border-bottom: 1px solid var(--border) !important;
padding: 0 var(--gap-4);
display: flex;
gap: 2px;
align-items: stretch;
overflow-x: auto;
}
.tab, .tab-btn, [class*="tab-item"] {
padding: 10px 16px !important;
border: none !important;
background: transparent !important;
color: var(--text-sub) !important;
border-bottom: 2px solid transparent !important;
cursor: pointer;
font-weight: 400 !important;
font-size: 13px;
white-space: nowrap;
transition: color .15s, border-color .15s;
border-radius: 0 !important;
}
.tab:hover, .tab-btn:hover, [class*="tab-item"]:hover {
color: var(--primary-dark) !important;
background: transparent !important;
}
.tab.active, .tab.selected, .tab-btn.active, .tab-btn.selected,
[class*="tab-item"].active, [class*="tab-item"].selected {
color: var(--primary-dark) !important;
font-weight: 500 !important;
border-bottom-color: var(--primary) !important;
background: transparent !important;
}
/* 7) 툴바(검색·필터 영역) 폴리시 — 각 페이지에서 카드로 감싼 검색바를 통일된 톤으로 */
.toolbar, .filter-bar, .search-bar, [class*="toolbar"] {
display: flex;
gap: var(--gap-2);
align-items: center;
flex-wrap: wrap;
padding: var(--gap-3) var(--gap-4);
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.toolbar > *, .filter-bar > *, .search-bar > * {
margin: 0;
}
/* 5) 배지·태그 통일 */
.badge, .tag, .chip, .pill,
[class*="status-badge"], [class*="badge-"] {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 500;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════════
★ 폼 · 빈상태 · 포커스 접근성 폴리시 (Phase 9)
문제 있으면 이 블록만 삭제하면 원복
══════════════════════════════════════════════════════════════════ */
/* 1) 폼 필드 간격·정렬 통일 */
.form-row, .field-row, [class*="form-row"], [class*="form-field"] {
display: flex;
align-items: center;
gap: var(--gap-3);
margin-bottom: var(--gap-3);
}
.form-row > label, .field-row > label {
min-width: 100px;
font-size: 13px;
color: var(--text-sub);
font-weight: 500;
}
/* 필수 표시 (*) 자동 색상 */
label.required::after, .required-label::after,
[data-required="true"]::after {
content: " *";
color: var(--danger);
font-weight: 500;
}
/* 폼 도움말 텍스트 */
.form-help, .help-text, .field-hint,
[class*="form-help"], [class*="help-text"] {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.5;
}
/* 폼 에러 메시지 */
.form-error, .field-error, .error-message,
[class*="form-error"], [class*="field-error"] {
font-size: 11.5px;
color: var(--danger);
margin-top: 4px;
line-height: 1.5;
}
/* 에러 상태 input */
input.error, input.invalid, select.error, select.invalid, textarea.error,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
border-color: var(--danger) !important;
box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.14) !important;
}
/* 2) 빈 상태 (empty state) 통일 */
.empty, .empty-state, .no-data, .no-result,
[class*="empty-state"], [class*="no-data"] {
padding: 40px 20px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
background: var(--surface);
}
.empty::before, .empty-state::before, .no-data::before {
display: block;
font-size: 32px;
margin-bottom: 8px;
opacity: 0.4;
content: "📭";
}
/* 3) 로딩 인디케이터 */
.loading, .spinner, [class*="loading"], [class*="spinner"] {
color: var(--text-muted);
font-size: 13px;
}
/* 4) 포커스 접근성 — 키보드 사용자용 focus-visible */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.20);
}
/* 마우스 클릭 시엔 outline 안 뜨게 */
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
/* 5) 링크·구분자 미세 조정 */
hr, .divider {
border: none;
border-top: 1px solid var(--border);
margin: var(--gap-3) 0;
}
/* ══════════════════════════════════════════════════════════════════
★ 섹션 제목 · 카드 헤더 · 페이지 위계 통일 (Phase 15)
h1/h2/h3/section-title/card-header 등 계층별 크기·색 일관성
══════════════════════════════════════════════════════════════════ */
/* 1) 페이지 타이틀 (h1) — 가장 위 큰 제목 */
h1, .page-title, [class*="page-title"] {
font-size: 20px;
font-weight: 500;
color: var(--primary-dark);
margin: 0 0 8px 0;
line-height: 1.4;
letter-spacing: 0;
}
h1 .subtitle, .page-title .subtitle,
h1 .unit, h1 .unit-badge {
font-size: 12px;
color: var(--text-sub);
font-weight: 400;
margin-left: 8px;
}
/* 2) 섹션 제목 (h2 / .section-title) */
h2, .section-title, [class*="section-title"] {
font-size: 16px;
font-weight: 500;
color: var(--primary-dark);
margin: 0 0 12px 0;
padding-left: 16px; /* 본문 컬럼 위 헤딩이 좌측에 붙어 답답한 느낌 방지 */
line-height: 1.5;
}
/* 예외 — 짙은 배경 헤더 안 h2 는 색·여백 강제 안 함 (배경과 겹쳐 안 보이는 것 방지) */
.section-head h2, .header h2, .modal-header h2,
[class*="header"] h2, [class*="banner"] h2, [class*="dark"] h2 {
color: inherit !important;
padding-left: 0 !important;
margin: 0 !important;
}
h2 .subtitle, .section-title .subtitle,
h2 .unit-badge, .section-title .unit-badge {
font-size: 11.5px;
color: var(--text-sub);
font-weight: 400;
margin-left: 6px;
}
/* 3) 하위 섹션 제목 (h3) */
h3, .subsection-title {
font-size: 14px;
font-weight: 500;
color: var(--text);
margin: 0 0 8px 0;
line-height: 1.5;
}
/* 4) h4 이하 — 소소한 라벨성 제목 */
h4, h5, h6 {
font-size: 13px;
font-weight: 500;
color: var(--text-sub);
margin: 0 0 6px 0;
}
/* 5) 카드 헤더 (카드 상단 제목 영역) */
.card-header, .card-title, [class*="card-header"], [class*="card-title"] {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface);
font-weight: 500;
color: var(--primary-dark);
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0;
}
/* 카드 안에 카드-헤더 가 있으면 카드 자체 padding 은 없어야 함 */
.card:has(.card-header) { padding: 0 !important; }
.card:has(.card-header) > *:not(.card-header) { padding: 0 16px 16px 16px; }
/* 6) 제목 밑 설명 텍스트 */
.desc, .description, .subtitle-text,
[class*="description"], [class*="page-desc"] {
font-size: 12.5px;
color: var(--text-sub);
margin: 0 0 12px 0;
line-height: 1.6;
}
/* 7) 단위 배지 (예: "단위: 백만원") */
.unit-badge, .unit-info, [class*="unit-badge"] {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
background: var(--surface-alt);
color: var(--text-sub);
font-size: 11px;
font-weight: 400;
margin-left: 6px;
vertical-align: middle;
}
/* ══════════════════════════════════════════════════════════════════
★ 드롭다운(select) · 헤더 바로가기 폴리시 (Phase 14)
══════════════════════════════════════════════════════════════════ */
/* 1) select 커스텀 화살표 — 브라우저 기본 화살표 대신 통일된 chevron */
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px 12px;
padding-right: 28px !important;
cursor: pointer;
}
select:disabled {
background-image: url("data:image/svg+xml;utf8,");
cursor: not-allowed;
}
/* Firefox 특유의 dotted focus outline 제거 */
select::-ms-expand { display: none; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--text); }
/* 2) 헤더 「바로가기」 드롭다운 톤 통일 */
#nav-dd, #nav-dd-btn, .nav-dropdown, .header-dropdown {
background: rgba(255,255,255,0.10) !important;
border: 1px solid rgba(255,255,255,0.28) !important;
color: #fff !important;
border-radius: var(--radius) !important;
padding: 6px 12px !important;
font-weight: 400 !important;
cursor: pointer;
font-family: var(--font);
}
#nav-dd:hover, #nav-dd-btn:hover, .nav-dropdown:hover, .header-dropdown:hover {
background: rgba(255,255,255,0.20) !important;
}
/* 3) 헤더 바로가기 드롭다운 패널 (열린 상태 목록) */
#nav-dd-panel, .nav-dd-panel, .header-menu-panel,
[class*="nav-dropdown-panel"], [class*="nav-menu-panel"] {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(12,68,124,0.15) !important;
padding: 6px !important;
min-width: 200px;
}
.nav-item, .nav-menu-item, [class*="nav-item"] {
display: block;
padding: 8px 12px;
border-radius: 5px;
color: var(--text) !important;
text-decoration: none;
font-size: 13px;
font-weight: 400;
cursor: pointer;
transition: background .12s;
}
.nav-item:hover, .nav-menu-item:hover, [class*="nav-item"]:hover {
background: var(--surface-alt) !important;
color: var(--primary-dark) !important;
}
/* ══════════════════════════════════════════════════════════════════
★ 모달 내부 구조 통일 (Phase 13)
.modal-header/.modal-body/.modal-footer 등 공통 셀렉터에 일관된 톤
══════════════════════════════════════════════════════════════════ */
/* 1) 모달 헤더 (제목 바) */
.modal-header, .modal-title-bar, [class*="modal-header"], [class*="modal-title-bar"] {
padding: 14px 20px !important;
background: var(--primary-dark) !important;
color: #fff !important;
border-bottom: 1px solid var(--border) !important;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
}
.modal-header .title, .modal-header h2, .modal-header h3, .modal-header b {
color: #fff !important;
font-weight: 500 !important;
font-size: 14px;
margin: 0;
}
/* 2) 모달 닫기 X 버튼 (일반 셀렉터 통일) */
.modal-close, .modal-x, .btn-close,
[class*="modal-close"], [aria-label="닫기"], [aria-label="Close"] {
background: transparent !important;
border: none !important;
color: rgba(255,255,255,0.9) !important;
font-size: 20px !important;
cursor: pointer !important;
padding: 4px 8px !important;
line-height: 1 !important;
border-radius: 4px !important;
transition: background .12s;
margin-left: auto;
}
.modal-close:hover, .modal-x:hover, .btn-close:hover,
[class*="modal-close"]:hover {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
}
/* 헤더 안에 위치한 X 버튼(대부분) */
.modal-header button[onclick*="close"], .modal-header .close,
.modal-title-bar button[onclick*="close"] {
background: transparent !important;
border: none !important;
color: rgba(255,255,255,0.9) !important;
font-size: 20px !important;
}
/* 3) 모달 본문 (스크롤 가능 영역) */
.modal-body, [class*="modal-body"] {
padding: 18px 20px !important;
max-height: 70vh;
overflow-y: auto;
background: var(--surface) !important;
color: var(--text);
}
/* 4) 모달 푸터 (액션 버튼 정렬) */
.modal-footer, .modal-actions, [class*="modal-footer"], [class*="modal-actions"] {
padding: 12px 20px !important;
background: var(--surface-alt) !important;
border-top: 1px solid var(--border) !important;
display: flex !important;
justify-content: flex-end !important;
gap: 8px !important;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* 좌측 정렬 액션(삭제 등)을 위한 클래스 */
.modal-footer .left-action, .modal-actions .left-action {
margin-right: auto;
}
/* 5) 모달 전체 컨테이너 배경 (Phase 7 그림자·radius 는 유지) */
.modal, .modal-content {
background: var(--surface) !important;
overflow: hidden;
}
/* ══════════════════════════════════════════════════════════════════
★ 상태 뱃지 통일 (Phase 12)
재직·퇴사·휴직·진행중·완료·미제출 등 각 페이지의 상태 뱃지를
4가지 톤(정상/위험/보류/정보)으로 통일. 클래스 매핑으로 페이지 수정 없이 적용.
══════════════════════════════════════════════════════════════════ */
/* 뱃지·chip 은 span/small/em/b 등 인라인 요소에만 적용 (컨테이너 div 제외) */
span.status-chip, span.status-badge, span.badge, span.chip, span.pill,
small.badge, em.badge, b.badge,
span[class*="status-"], span[class*="badge-"],
small[class*="status-"], small[class*="badge-"] {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 500;
line-height: 1.7;
border: 1px solid transparent;
white-space: nowrap;
}
/* 정상·재직·진행중·검토완료·완료·발송·활성 = 파랑 */
.status-active, .status-reviewed, .status-submitted, .status-approved,
.status-in-progress, .status-progress, .status-done, .status-complete,
.status-completed, .status-sent, .status-published, .status-open,
.badge-active, .badge-approved, .badge-completed, .badge-primary,
.badge-info, .badge-접수, .status-접수, .status-진행중, .status-완료,
.status-검토완료, .status-발송, .status-재직, .badge-재직, .badge-진행중,
.chip-active {
background: var(--primary-bg) !important;
color: var(--primary-dark) !important;
border-color: transparent !important;
}
/* 위험·미제출·거부·오류·삭제 = 빨강 */
.status-rejected, .status-error, .status-danger, .status-fail,
.status-missing, .status-not-submitted, .status-cancelled, .status-canceled,
.status-deleted, .status-blocked, .status-warn-strong,
.badge-danger, .badge-error, .badge-rejected, .badge-미제출,
.status-미제출, .status-거부, .status-실패, .status-미진행,
.status-퇴사, .badge-퇴사, .status-retired, .badge-retired {
background: #fdeeec !important;
color: var(--danger) !important;
border-color: transparent !important;
}
/* 보류·임시저장·휴직·대기·초안·비활성 = 회색 */
.status-draft, .status-pending, .status-waiting, .status-hold,
.status-inactive, .status-idle,
.badge-draft, .badge-pending, .badge-neutral, .badge-secondary,
.badge-휴직, .badge-임시저장, .badge-대기,
.status-임시저장, .status-대기, .status-보류, .status-휴직,
.status-이월, .status-미완료이월 {
background: var(--surface-alt) !important;
color: var(--text-sub) !important;
border-color: transparent !important;
}
/* 강조·예정·신규·NEW = 진한 파랑 (미묘한 강조) */
.status-new, .status-scheduled, .status-upcoming,
.badge-new, .badge-scheduled, .status-예정, .status-신규,
.badge-예정, .badge-신규 {
background: var(--primary-dark) !important;
color: #fff !important;
border-color: transparent !important;
}
/* ══════════════════════════════════════════════════════════════════
★ 입력창 세부 상태 · 정렬 아이콘 폴리시 (Phase 11)
문제 있으면 이 블록만 삭제하면 원복
══════════════════════════════════════════════════════════════════ */
/* 1) disabled 상태 통일 */
input:disabled, select:disabled, textarea:disabled,
input[disabled], select[disabled], textarea[disabled],
button:disabled, .btn:disabled {
background: var(--surface-alt) !important;
color: var(--text-muted) !important;
border-color: var(--border) !important;
cursor: not-allowed !important;
opacity: 1;
}
/* 2) readonly 상태 통일 */
input[readonly], textarea[readonly] {
background: var(--surface-alt);
color: var(--text-sub);
border-color: var(--border);
cursor: default;
}
/* 3) placeholder 톤 통일 (일부 브라우저별 차이 흡수) */
::-webkit-input-placeholder { color: var(--text-muted); opacity: 1; }
::-moz-placeholder { color: var(--text-muted); opacity: 1; }
:-ms-input-placeholder { color: var(--text-muted); opacity: 1; }
::placeholder { color: var(--text-muted); opacity: 1; }
/* 4) 필수 표시 input (required 속성 자동 처리) */
input[required] + label::after, label:has(+ input[required])::after {
content: " *";
color: var(--danger);
}
/* 5) 파일 업로드 버튼 톤 통일 */
input[type="file"] {
padding: 4px;
font-size: 12px;
}
input[type="file"]::file-selector-button {
padding: 5px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
color: var(--text-sub);
cursor: pointer;
margin-right: 8px;
font-family: inherit;
font-size: 12px;
}
input[type="file"]::file-selector-button:hover {
background: var(--surface-alt);
border-color: var(--primary);
}
/* 6) 체크박스·라디오 accent 색 통일 */
input[type="checkbox"], input[type="radio"] {
accent-color: var(--primary);
width: 15px;
height: 15px;
vertical-align: middle;
cursor: pointer;
}
/* 7) 정렬 가능 헤더 아이콘 통일 */
th.sortable, th[data-sort], th[onclick*="sort"] {
cursor: pointer;
user-select: none;
position: relative;
}
th.sortable::after, th[data-sort]::after {
content: " ⇅";
opacity: 0.4;
font-size: 10px;
margin-left: 3px;
}
th.sortable.sort-asc::after, th[data-sort="asc"]::after,
th.sortable[data-order="asc"]::after {
content: " ▲";
opacity: 1;
color: var(--primary);
}
th.sortable.sort-desc::after, th[data-sort="desc"]::after,
th.sortable[data-order="desc"]::after {
content: " ▼";
opacity: 1;
color: var(--primary);
}
/* ══════════════════════════════════════════════════════════════════
★ 인쇄 전용 스타일 (Phase 10)
화면엔 영향 없음. 인쇄 시 헤더바·탭·플로팅위젯·버튼 제거하고
증명서·업무지시서 등 문서만 깔끔하게 출력.
══════════════════════════════════════════════════════════════════ */
@media print {
/* 페이지 여백 축소 */
@page { margin: 15mm 12mm; }
html, body {
background: #fff !important;
color: #000 !important;
font-size: 12px;
}
/* 인쇄 시 모든 글자 검정 강제 (파란 브랜드 색 포함) */
*, *::before, *::after,
h1, h2, h3, h4, h5, h6, p, span, div, td, th, li, a, label, b, strong, em, i, dt, dd, small {
color: #000 !important;
}
/* 화면 UI 요소 전부 숨김 */
.header, .tab-bar, .toolbar, .filter-bar, .search-bar,
#nx-btn, #nx-panel,
#inactivity-warn, .dev-banner,
[class*="floating"], [class*="fab-"],
#chatbot-fab, #memo-fab, #external-contacts-fab, #manual-fab, #messenger-fab,
[id*="widget-btn"], [class*="widget-btn"],
.btn-logout, .btn-dashboard, .btn-print, .btn-save,
button:not(.print-keep), .btn:not(.print-keep),
nav, .nav, .no-print,
.modal-bg, .modal-overlay {
display: none !important;
}
/* 인쇄용으로 보여야 하는 것만 print-only 클래스로 노출 */
.print-only { display: block !important; }
/* 표 인쇄 최적화 */
table {
page-break-inside: auto;
border-collapse: collapse !important;
width: 100% !important;
}
table thead {
display: table-header-group; /* 페이지 넘어갈 때 헤더 자동 반복 */
}
table tr {
page-break-inside: avoid;
page-break-after: auto;
}
table thead th {
background: #f4f4f0 !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
box-shadow: none !important;
border-bottom: 1px solid #999 !important;
}
table td, table th {
border: 1px solid #999 !important; /* 인쇄 시엔 세로선 포함 전체 격자 */
}
/* zebra 배경은 인쇄 시 제거 (잉크 낭비) */
table tbody tr:nth-child(even) td { background: transparent !important; }
/* sticky 요소 인쇄 시 해제 */
* { position: static !important; }
/* 링크 URL 표시 안 함 (긴 URL 노이즈) */
a[href]::after { content: none !important; }
a { color: #000 !important; text-decoration: none !important; }
/* 카드/모달 그림자 제거 */
.card, .section, .panel, .modal {
box-shadow: none !important;
border: 1px solid #ddd !important;
}
/* 증명서·업무지시서 등의 색상 구분선(background 로 그은 것) 인쇄 시 유지 */
.cert-div-green, .cert-div-green-bt,
[class*="cert-div"], [class*="cert-line"],
[class*="divider-blue"], [class*="hr-blue"] {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
background: var(--primary) !important;
}
/* 페이지 최상단·최하단 브랜드 파란 굵은 선을 확실히 인쇄되게 border 로 보강 */
.cert-div-green {
border-top: 3px solid var(--primary) !important;
height: 0 !important;
}
.cert-div-green-bt {
border-top: 2px solid var(--primary) !important;
height: 0 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
★ 유틸리티 클래스 (Phase 24)
앞으로 인라인 스타일 대신 이 클래스를 붙여 쓰면 톤 자동 통일
예:
══════════════════════════════════════════════════════════════════ */
/* 텍스트 색 */
.text-primary { color: var(--primary) !important; }
.text-primary-dark { color: var(--primary-dark) !important; }
.text-danger { color: var(--danger) !important; }
.text-default { color: var(--text) !important; }
.text-sub { color: var(--text-sub) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: #fff !important; }
/* 텍스트 정렬 */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
/* 폰트 굵기 (스펙: 400/500 만) */
.fw-regular { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
/* 폰트 크기 (사용 잦은 것만) */
.fs-xs { font-size: 11px !important; }
.fs-sm { font-size: 12px !important; }
.fs-md { font-size: 13px !important; }
.fs-lg { font-size: 15px !important; }
.fs-xl { font-size: 18px !important; }
/* 배경 색 */
.bg-primary { background: var(--primary) !important; }
.bg-primary-dark { background: var(--primary-dark) !important; }
.bg-primary-bg { background: var(--primary-bg) !important; }
.bg-surface { background: var(--surface) !important; }
.bg-alt { background: var(--surface-alt) !important; }
.bg-white { background: #fff !important; }
.bg-transparent { background: transparent !important; }
/* 테두리 */
.border { border: 1px solid var(--border) !important; }
.border-top { border-top: 1px solid var(--border) !important; }
.border-bottom { border-bottom: 1px solid var(--border) !important; }
.border-left { border-left: 1px solid var(--border) !important; }
.border-right { border-right: 1px solid var(--border) !important; }
.no-border { border: none !important; }
/* 모서리 */
.rounded { border-radius: var(--radius) !important; }
.rounded-lg { border-radius: 10px !important; }
.rounded-full { border-radius: 999px !important; }
.rounded-none { border-radius: 0 !important; }
/* 그림자 */
.shadow-sm { box-shadow: 0 1px 2px rgba(12,30,55,.05) !important; }
.shadow { box-shadow: 0 2px 8px rgba(12,68,124,.08) !important; }
.shadow-md { box-shadow: 0 4px 16px rgba(12,68,124,.10) !important; }
.no-shadow { box-shadow: none !important; }
/* Flex */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.flex-start { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
.flex-end { display: flex !important; align-items: center !important; justify-content: flex-end !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.grow { flex-grow: 1 !important; }
.shrink-0 { flex-shrink: 0 !important; }
/* Gap (4의 배수) */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 20px !important; }
/* Padding (4의 배수) */
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 20px !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
/* Margin (4의 배수) */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }
.ml-4 { margin-left: 16px !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }
.mr-4 { margin-right: 16px !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
/* Display */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
/* Width / Height 자주 쓰는 것만 */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.min-h-0 { min-height: 0 !important; }
/* 숫자 셀 우측정렬 유틸 (표에서 class="num" 대체 가능) */
.num { text-align: right !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; }
/* Word-break 유틸 */
.break-all { word-break: break-all !important; }
.break-word { word-break: break-word !important; overflow-wrap: anywhere !important; }
.nowrap { white-space: nowrap !important; }
/* ── 스크롤바 (모던 브라우저) ───────────────────────────
2026-08-08: 고정 회색 → --border 변수. 다크 테마에서도 배경에 맞게 어두워진다. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
*::-webkit-scrollbar-track { background: transparent; }