html, body {
/* 서체 1종 원칙 — Pretendard(웹폰트) 우선, 미로드 시 시스템 산세리프로 강등. 한글·영문 동시 커버 */
font-family: "Pretendard Variable", Pretendard, "Segoe UI", system-ui, -apple-system, "Malgun Gothic", sans-serif;
}
/* ===== 첨부 파일 미리보기 모달 (Google Drive embed) ===== */
.file-preview-overlay {
position: fixed; inset: 0; z-index: 2000;
background: rgba(0, 0, 0, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.file-preview-box {
background: #fff; border-radius: 12px; overflow: hidden;
width: min(960px, 100%); height: min(80vh, 100%);
display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.file-preview-head {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-bottom: 1px solid #e3e8ef;
}
.file-preview-box iframe { flex: 1; border: none; width: 100%; }
.file-preview-note {
background: #fff8e1; color: #6b5900; border-bottom: 1px solid #f0e3b0; line-height: 1.5;
}
[data-bs-theme="dark"] .file-preview-box { background: #212529; }
[data-bs-theme="dark"] .file-preview-head { border-bottom-color: #343a40; }
/* ===== 새 창 뷰어(/viewer) — 첨부·증빙 갤러리 (HR-519) =====
팝업 창을 꽉 채운다. 레이아웃은 머리글 + (썸네일 레일 | 본 이미지). */
.fv-wrap { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
/* flex: 0 0 auto — 도구가 여러 줄로 접히는 좁은 창에서 머리글이 눌려 본문 위로 겹치는 것을 막는다 */
.fv-head {
flex: 0 0 auto;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 8px 12px; border-bottom: 1px solid #e3e8ef; background: #f8f9fa;
}
.fv-head #fv-name { max-width: 34ch; }
.fv-body { flex: 1 1 auto; min-height: 0; display: flex; }
.fv-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.fv-canvas { flex: 1 1 auto; overflow: auto; min-height: 0; display: flex; background: #fff; }
.fv-canvas iframe { flex: 1; border: none; width: 100%; height: 100%; }
/* 썸네일 레일 — 넓은 화면은 왼쪽 세로, 좁은 화면은 아래 가로 */
.fv-rail {
flex: 0 0 132px; overflow-y: auto; overflow-x: hidden;
border-right: 1px solid #e3e8ef; background: #f1f3f5;
display: flex; flex-direction: column; gap: 6px; padding: 6px;
}
.fv-thumb {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 4px; border: 2px solid transparent; border-radius: 8px;
background: #fff; cursor: pointer; width: 100%;
}
.fv-thumb img { width: 100%; height: 84px; object-fit: contain; }
.fv-thumb-doc { font-size: 2rem; line-height: 84px; }
.fv-thumb-cap { font-size: .7rem; color: #6c757d; max-width: 100%; }
.fv-thumb.active { border-color: var(--hr-link); background: rgba(var(--acc-rgb), .12); }
.fv-thumb:hover { border-color: #adb5bd; }
@media (max-width: 700px) {
.fv-body { flex-direction: column-reverse; }
.fv-rail {
flex: 0 0 108px; flex-direction: row; padding: 6px;
border-right: none; border-top: 1px solid #e3e8ef;
overflow-x: auto; overflow-y: hidden;
}
.fv-thumb { width: auto; flex: 0 0 92px; }
.fv-head #fv-name { max-width: 100%; }
}
[data-bs-theme="dark"] .fv-wrap,
[data-bs-theme="dark"] .fv-canvas { background: #212529; }
[data-bs-theme="dark"] .fv-head { background: #2b3035; border-bottom-color: #343a40; }
[data-bs-theme="dark"] .fv-rail { background: #1a1d20; border-right-color: #343a40; border-top-color: #343a40; }
[data-bs-theme="dark"] .fv-thumb { background: #2b3035; }
/* ===== 영수증 미리보기(좌:이미지 / 우상단:입력 / 우하단:인식텍스트) ===== */
.receipt-modal {
background: #fff; border-radius: 12px; overflow: hidden;
width: min(1100px, 100%); height: min(86vh, 100%);
display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.rm-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e3e8ef; }
.rm-body { flex: 1; display: flex; min-height: 0; }
/* 좌측 미리보기 — 맞춤 도구모음(고정) + 스크롤 캔버스 */
.rm-left { flex: 1 1 60%; min-width: 0; border-right: 1px solid #e3e8ef; background: #f4f4f4;
display: flex; flex-direction: column; overflow: hidden; }
.rm-left iframe { width: 100%; flex: 1 1 auto; border: none; }
.rm-fit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 6px;
background: #f8f9fa; border-bottom: 1px solid #e3e8ef; }
.rm-canvas { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; }
/* 크기는 인라인 style(맞춤 모드)이 정한다.
가운데 정렬은 justify-content 대신 auto 마진 — 확대해서 이미지가 컨테이너보다 커질 때
justify-content:center 는 왼쪽/위쪽이 잘려 스크롤로도 볼 수 없게 된다. */
.rm-canvas img { display: block; margin: auto; }
.rm-right { flex: 0 0 360px; display: flex; flex-direction: column; min-height: 0; }
.rm-fields { padding: 14px; border-bottom: 1px solid #e3e8ef; }
.rm-text { padding: 14px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rm-text textarea { resize: none; }
[data-bs-theme="dark"] .receipt-modal { background: #212529; color: #e6e6e6; }
[data-bs-theme="dark"] .rm-head,
[data-bs-theme="dark"] .rm-left,
[data-bs-theme="dark"] .rm-fields { border-color: #343a40; }
[data-bs-theme="dark"] .rm-left { background: #2b3035; }
[data-bs-theme="dark"] .rm-fit { background: #2b3035; border-color: #343a40; }
/* 영수증 보관함 — 월별 그룹 헤더 */
.rcpt-group > td { background: var(--bs-secondary-bg) !important; border-top: 2px solid var(--bs-border-color); padding: 8px 12px; }
.rcpt-group .rcpt-group-label { font-weight: 700; }
.rcpt-group .rcpt-group-meta { color: #5a6b80; font-size: .85rem; }
.rcpt-group .rcpt-group-total { color: var(--hr-ink); font-weight: 600; font-size: .9rem; }
.rcpt-group.rcpt-group-undated > td { background: #fff3cd !important; border-top-color: #ffe08a; }
.rcpt-group.rcpt-group-undated .rcpt-group-total { color: #b58105; }
[data-bs-theme="dark"] .rcpt-group > td { color: var(--bs-body-color); }
[data-bs-theme="dark"] .rcpt-group .rcpt-group-meta { color: #aab6c6; }
[data-bs-theme="dark"] .rcpt-group .rcpt-group-total { color: #6ea8fe; }
[data-bs-theme="dark"] .rcpt-group.rcpt-group-undated > td { background: #4a3f1d !important; border-top-color: #6b5a25; }
[data-bs-theme="dark"] .rcpt-group.rcpt-group-undated .rcpt-group-total { color: #ffd95e; }
/* 영수증 보관함 — 월 아래 카드별 하위 그룹 헤더 (월 헤더보다 옅게, 들여쓰기) */
.rcpt-cardgroup > td { background: var(--bs-tertiary-bg) !important; border-top: 1px solid var(--bs-border-color); padding: 5px 12px 5px 28px; }
.rcpt-cardgroup .rcpt-group-meta { color: #5a6b80; font-size: .82rem; }
.rcpt-cardgroup .rcpt-group-total { color: var(--hr-ink); font-weight: 600; font-size: .85rem; }
[data-bs-theme="dark"] .rcpt-cardgroup > td { color: var(--bs-body-color); }
[data-bs-theme="dark"] .rcpt-cardgroup .rcpt-group-meta { color: #aab6c6; }
[data-bs-theme="dark"] .rcpt-cardgroup .rcpt-group-total { color: #6ea8fe; }
/* 카드 종류 배지 — brand primary와 겹치지 않게 고정 색(파랑/주황/보라)으로 명확히 구분 */
.badge-card-corp { background-color: #0d6efd; color: #fff; } /* 법인 - 파랑 */
.badge-card-personal { background-color: #fd7e14; color: #fff; } /* 개인 - 주황 */
.badge-card-project { background-color: #8b5cf6; color: #fff; } /* 국책 - 보라 */
/* 공지 상단 고정 행 — 테마 적응(밝은/어두운 앰버), 글자색은 기본 유지해 가독성 확보 */
.notice-pinned > td { background-color: #fff8e1 !important; }
[data-bs-theme="dark"] .notice-pinned > td { background-color: #38331f !important; }
@media (max-width: 820px) {
.receipt-modal { width: 96vw; height: 92vh; }
.rm-body { flex-direction: column; }
.rm-left { flex: 1 1 45%; border-right: none; border-bottom: 1px solid #e3e8ef; }
.rm-right { flex: 1 1 55%; }
}
/* ===== 긴급 메시지 (상단바 아이콘 + 레이어 창) ===== */
.urgent-btn {
background: none; border: none; cursor: pointer; padding: 0;
font-size: 1.2rem; line-height: 1;
margin-right: 1.1rem;
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; min-height: 36px; /* 모바일 터치 타깃 */
}
.urgent-btn:hover { transform: scale(1.08); }
.urgent-overlay {
position: fixed; inset: 0; z-index: 2100;
background: rgba(0,0,0,.45);
display: flex; align-items: flex-start; justify-content: center;
padding: 12vh 12px 12px; /* 위에서 띄워 모바일 키보드와 겹침 완화 */
}
.urgent-box {
width: 100%; max-width: 460px;
background: #fff; border-radius: 12px; overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,.3);
display: flex; flex-direction: column;
}
.urgent-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; font-weight: 700; border-bottom: 1px solid #eee;
}
.urgent-x { background: none; border: none; font-size: 1rem; cursor: pointer; color: var(--bs-secondary-color); }
.urgent-content { padding: 14px 16px; }
.urgent-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #eee; }
[data-bs-theme="dark"] .urgent-box { background: #212529; color: #e6e6e6; }
[data-bs-theme="dark"] .urgent-head { border-bottom-color: #343a40; }
[data-bs-theme="dark"] .urgent-foot { border-top-color: #343a40; }
@media (max-width: 640.98px) {
.urgent-btn { margin-right: .55rem; font-size: 1.3rem; }
.urgent-overlay { padding: 8vh 10px 10px; }
}
[data-bs-theme="dark"] .file-preview-note { background: #2b2a1f; color: #e6d690; border-bottom-color: #4a4630; }
/* ===== 인쇄(결재 문서 PDF 저장) ===== */
@media print {
.sidebar, .top-row, #blazor-error-ui, .no-print { display: none !important; }
.page, main { height: auto !important; overflow: visible !important; display: block !important; }
article.content { padding: 0 !important; }
a[href] { color: #000; text-decoration: none; }
.card, .aline-diagram, table { break-inside: avoid; }
}
/* ===== 사이드바 접힘(collapsed) — 와이드 화면 전용 ===== */
@media (min-width: 641px) {
html.nav-collapsed .sidebar { width: 72px !important; }
html.nav-collapsed .sidebar .top-row { padding-left: 0 !important; padding-right: 0 !important; }
html.nav-collapsed .brand { gap: 0; cursor: pointer; margin: 0; }
html.nav-collapsed .brand-text { display: none; }
/* 접힘 시 토글 버튼 숨김 → 로고 클릭으로 펼침 */
html.nav-collapsed .nav-collapse-btn { display: none; }
/* 로고를 나머지 아이콘과 동일하게 가운데 정렬 */
html.nav-collapsed .sidebar .top-row .container-fluid { justify-content: center; padding-left: 0; padding-right: 0; }
/* 라벨·캐럿 숨기고 아이콘 중앙 정렬 */
html.nav-collapsed .nav-text { display: none; }
html.nav-collapsed .nav-caret { display: none; }
html.nav-collapsed .nav-link,
html.nav-collapsed .nav-group-summary { justify-content: center; }
html.nav-collapsed .nav-link .bi,
html.nav-collapsed .nav-group-summary .bi { margin-right: 0; }
html.nav-collapsed .nav-single { padding-left: 0; padding-right: 0; }
html.nav-collapsed .nav-group { padding-left: 0; padding-right: 0; position: relative; }
/* 접힘 시 하위 메뉴는 숨김(아이콘만). 그룹 아이콘 클릭 시 JS가 사이드바를 펼쳐 하위 메뉴를 노출한다. */
html.nav-collapsed .nav-group-body { display: none !important; }
}
/* 링크·주 버튼 — 포인트 색(data-accent) 변수를 따르고, 미지정 시 기존 브랜드 파랑 */
a, .btn-link {
color: var(--hr-link);
}
.btn-primary {
color: #fff;
--bs-btn-bg: var(--hr-acc);
--bs-btn-border-color: var(--hr-acc-strong);
--bs-btn-hover-bg: var(--hr-acc-strong);
--bs-btn-hover-border-color: var(--hr-acc-strong);
--bs-btn-active-bg: var(--hr-acc-strong);
--bs-btn-active-border-color: var(--hr-acc-strong);
--bs-btn-disabled-bg: var(--hr-acc);
--bs-btn-disabled-border-color: var(--hr-acc);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ===== 계층형 조직도 차트 (순수 CSS) ===== */
.orgchart { overflow-x: auto; padding: 10px; }
.orgchart-canvas { display: inline-block; transition: zoom .1s ease; }
.orgchart ul { padding-top: 20px; position: relative; display: flex; justify-content: center; list-style: none; margin: 0; }
.orgchart li { list-style: none; position: relative; padding: 20px 6px 0 6px; text-align: center; }
.orgchart li::before, .orgchart li::after {
content: ''; position: absolute; top: 0; right: 50%;
border-top: 1px solid var(--hr-line); width: 50%; height: 20px;
}
.orgchart li::after { right: auto; left: 50%; border-left: 1px solid var(--hr-line); }
/* 연결선 모양은 컴포넌트가 붙이는 위치 클래스로 결정한다.
:first-child/:last-child/:only-child 를 쓰면 이미지 내보내기(html2canvas)에서 깨진다 —
복제 시 ::before/::after 가 실제 자식 요소로 삽입돼 구조 선택자가 어긋나기 때문. */
.orgchart li.org-only::before, .orgchart li.org-only::after { display: none; }
.orgchart li.org-only { padding-top: 0; }
.orgchart li.org-first::before, .orgchart li.org-last::after { border: 0 none; }
.orgchart li.org-last::before { border-right: 1px solid var(--hr-line); border-radius: 0 6px 0 0; }
.orgchart li.org-first::after { border-radius: 6px 0 0 0; }
.orgchart ul ul::before {
content: ''; position: absolute; top: 0; left: 50%;
border-left: 1px solid var(--hr-line); width: 0; height: 20px;
}
.org-box {
display: inline-block; min-width: 92px; padding: 6px 10px;
border: 1px solid #bbb; border-radius: 8px; background: #fff; cursor: pointer;
transition: box-shadow .12s, border-color .12s; white-space: nowrap;
}
/* 유형 tier 정렬용 빈 칸 — 박스 없이 연결선만 통과시켜 다음 유형 줄로 내려보냄.
(visibility:hidden 은 세로 연결선까지 숨기므로 사용하지 않고, 내용 없는 투명 칸으로 둠) */
/* display:block + auto margin 으로 가운데 정렬(인라인 baseline 여백 제거 → 연결선 끊김 방지) */
.org-spacer { display: block; position: relative; width: 92px; margin: 0 auto; height: 74px; }
.org-spacer::before {
content: ''; position: absolute; left: 50%; top: 0; bottom: -1px;
border-left: 1px solid var(--hr-line);
}
/* ===== 하이브리드 배치 — 말단(파트 등) 형제들을 부모 아래로 세로 스택.
가로로 번지는 대신 아래로 길어져 조직이 늘어도 폭이 유지된다. ===== */
.orgchart ul.org-stack {
flex-direction: column; align-items: flex-start; justify-content: flex-start;
padding-top: 20px; margin-left: 50%; padding-left: 0;
}
.orgchart ul.org-stack > li { padding: 5px 0 0 24px; text-align: left; }
.orgchart ul.org-stack > li:only-child { padding-top: 5px; }
/* 기본 가로 커넥터 대신 ㄴ자(세로 척추 + 가로 티크) */
.orgchart ul.org-stack > li::before {
content: ''; position: absolute; left: 0; top: 22px;
width: 24px; height: 0; border-top: 1px solid var(--hr-line);
border-right: 0; border-radius: 0; right: auto; display: block;
}
.orgchart ul.org-stack > li::after {
content: ''; position: absolute; left: 0; top: 0; right: auto;
width: 0; height: 100%; border-left: 1px solid var(--hr-line); border-top: 0; border-radius: 0; display: block;
}
.orgchart ul.org-stack > li:last-child::after { height: 22px; } /* 마지막 항목 티크까지만 */
.orgchart ul.org-stack .org-box { text-align: left; }
/* ===== 접기/펴기 버튼 — 박스 하단 중앙의 작은 토글 ===== */
.org-fold {
display: block; margin: 5px auto -2px; padding: 0 7px;
font-size: .72rem; line-height: 1.35; color: var(--bs-secondary-color);
background: var(--bs-body-bg, #fff); border: 1px solid var(--hr-line); border-radius: 10px;
cursor: pointer; touch-action: manipulation;
}
.org-fold:hover { color: var(--hr-link); border-color: var(--hr-link); }
/* ===== 컴팩트 — 사진만 남겨 박스 폭을 최소화 ===== */
.orgchart-canvas.compact .org-box { min-width: 76px; padding: 5px 7px; }
.orgchart-canvas.compact .org-box .org-members { max-width: 116px; gap: 2px; }
.orgchart-canvas.compact .org-member img { width: 20px; height: 20px; }
.orgchart-canvas.compact .org-box .org-meta { font-size: .72rem; }
.org-box:hover { border-color: var(--hr-link); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.org-box.selected { border-color: var(--hr-link); background: rgba(var(--acc-rgb), .10); }
.org-box.inactive { opacity: .5; }
.org-box .org-name { font-weight: 600; }
.org-box .org-meta { font-size: .78rem; color: #777; }
/* ===== 목록형(TreeList) 배치 — 가이드선으로 계층을 드러내고, 조직명·유형·인원은 고정 열,
구성원은 공통 시작선 이후 '사람별 고정 컬럼'에 좌측 정렬(행끼리 세로로 맞춤).
행 밑줄 대신 옅은 지브라 + 호버로 구분해 시선이 어지럽지 않게 한다. ===== */
.orgchart.as-list { overflow-x: auto; }
/* 목록형은 캔버스가 내용 폭(inline-block)이면 구성원 그리드가 1열로 붕괴한다 → 전체 폭 사용 */
.orgchart.as-list .orgchart-canvas { display: block; width: 100%; }
.org-list { --org-line: var(--bs-border-color, #dee2e6); width: 100%; min-width: 760px; }
.org-row {
display: flex; align-items: stretch; gap: 10px; cursor: pointer;
padding: 3px 8px; border: 1px solid transparent; border-radius: 6px;
}
/* 줄무늬 배경 — color-mix() 는 브라우저가 color(srgb …) 로 계산해 html2canvas(이미지 내보내기)가
파싱하지 못하고 예외를 낸다. 같은 느낌의 rgba 로 두어 캡처가 깨지지 않게 한다. */
.org-list > .org-row:nth-of-type(even) { background: rgba(0, 0, 0, .035); }
[data-bs-theme="dark"] .org-list > .org-row:nth-of-type(even) { background: rgba(255, 255, 255, .05); }
.org-row:hover { background: var(--bs-tertiary-bg, #f1f3f5); }
.org-row.selected { background: rgba(var(--acc-rgb), .10); border-color: var(--hr-link); }
.org-row.inactive { opacity: .55; }
/* 1열 — 가이드선(├ └) + 접기 + 조직명 */
.org-tree { flex: 0 0 300px; min-width: 0; display: flex; align-items: center; }
.org-tree .g { flex: 0 0 22px; align-self: stretch; position: relative; }
.org-tree .g.v::before,
.org-tree .g.elbow::before {
content: ''; position: absolute; left: 11px; top: 0; bottom: 0; border-left: 1px solid var(--org-line);
}
.org-tree .g.elbow-last::before {
content: ''; position: absolute; left: 11px; top: 0; height: 50%; border-left: 1px solid var(--org-line);
}
.org-tree .g.elbow::after,
.org-tree .g.elbow-last::after {
content: ''; position: absolute; left: 11px; top: 50%; width: 11px; border-top: 1px solid var(--org-line);
}
.org-caret {
flex: 0 0 auto; width: 24px; height: 24px; padding: 0; line-height: 1; font-size: .95rem;
background: transparent; border: 0; border-radius: 5px; color: var(--bs-body-color); cursor: pointer;
touch-action: manipulation;
}
.org-caret.empty { visibility: hidden; }
.org-caret:hover { color: var(--hr-link); background: rgba(var(--acc-rgb), .12); }
.org-caret:focus-visible { outline: 2px solid var(--hr-link); outline-offset: 1px; }
.org-row-name {
font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
padding-left: 2px;
}
/* 2·3열 — 유형 배지(tier 색으로 회사/부서/팀/파트 구분) / 인원 */
.org-row-type {
flex: 0 0 46px; align-self: center; text-align: center;
font-size: .72rem; padding: 1px 0; border-radius: 10px;
border: 1px solid var(--bs-border-color, #dee2e6); color: var(--bs-secondary-color);
}
.org-row-type.tier-0 { border-color: var(--hr-link); color: var(--hr-ink); }
.org-row-type.tier-1 { border-color: #0f9b8e; color: #0f9b8e; }
.org-row-type.tier-2 { border-color: #b07d00; color: #b07d00; }
.org-row-type.tier-3 { border-color: #9b59b6; color: #9b59b6; }
.org-row-count {
flex: 0 0 76px; align-self: center; text-align: right;
font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap;
}
/* 4열 — 구성원: 사람별 고정 컬럼. 모든 행이 같은 x에서 시작하고 열이 세로로 맞는다. */
.org-row-members {
flex: 1 1 auto; min-width: 0; display: grid; align-items: center;
grid-template-columns: repeat(auto-fill, 190px); gap: 2px 6px; justify-content: start;
}
/* 직위 표시 해제 — 셀에 이름+직책만 남으므로 컬럼을 좁혀 더 많이 배치 */
.org-row-members.names-only { grid-template-columns: repeat(auto-fill, 136px); }
.org-row-members.avatars-only { grid-template-columns: repeat(auto-fill, 30px); }
.org-row-members .org-member {
min-width: 0; gap: 6px; padding: 1px 3px; border-radius: 6px;
}
.org-row-members .org-member:hover { background: #f0f6ff; }
.org-row-members .org-member.no-link:hover { background: transparent; }
.org-row-members .m-name {
font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.org-row-members .m-sub-inline { color: var(--bs-secondary-color); font-size: .72rem; margin-left: 4px; }
.org-row-folded {
grid-column: 1 / -1; justify-self: start;
font-size: .72rem; padding: 1px 8px; border-radius: 10px;
background: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .org-row-members .org-member:hover { background: #2f3b4a; }
[data-bs-theme="dark"] .org-row-type.tier-1 { border-color: #38d9a9; color: #38d9a9; }
[data-bs-theme="dark"] .org-row-type.tier-2 { border-color: #ffd43b; color: #ffd43b; }
[data-bs-theme="dark"] .org-row-type.tier-3 { border-color: #da77f2; color: #da77f2; }
.org-box .org-members { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 6px; max-width: 168px; }
.org-box .org-members.with-names { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; max-width: 210px; text-align: left; }
.org-member { display: inline-flex; align-items: center; line-height: 0; }
.org-members.with-names .org-member { gap: 6px; padding: 1px 3px; border-radius: 6px; }
.org-members.with-names .org-member:hover { background: #f0f6ff; }
.org-member img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hr-line); background: #fff; flex: 0 0 auto; }
.org-member.primary img { border-color: var(--hr-link); }
.org-member:hover img { box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .2); }
.org-member, .org-member:hover, .org-member:focus { text-decoration: none; }
/* 권한 없는 대상: 링크 아님 → 클릭 커서·호버 제거 */
.org-member.no-link { cursor: default; }
.org-members.with-names .org-member.no-link:hover { background: transparent; }
[data-bs-theme="dark"] .org-members.with-names .org-member.no-link:hover { background: transparent; }
.org-member .m-name { font-size: .78rem; color: #333; line-height: 1.15; white-space: nowrap; }
.org-member .m-name .m-role { color: var(--bs-secondary-color); }
/* 이름 아래 보조줄(직위 · 직책) — 가로 폭 안 좁게 별도 줄로 */
.org-member .m-name .m-sub { display: block; font-size: .75rem; color: var(--bs-secondary-color); line-height: 1.1; white-space: nowrap; }
[data-bs-theme="dark"] .org-member .m-name .m-sub { color: #9aa3ad; }
/* ===== 회사 일정 월간 달력 (스패닝 막대) ===== */
.cal-toolbar { display: flex; align-items: center; gap: 8px; }
.cal-title { font-size: 1.15rem; font-weight: 700; min-width: 140px; text-align: center; }
.cal-month { border: 1px solid #e3e8ef; border-radius: 10px; overflow: hidden; }
.cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); background: #f6f8fb; border-bottom: 1px solid #e3e8ef; }
.cal-dow { text-align: center; padding: 8px 0; font-size: .82rem; font-weight: 700; color: #6b7685; }
.cal-dow.sun { color: #c92a2a; }
.cal-dow.sat { color: #155ca2; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.cal-week:not(:last-child) { border-bottom: 1px solid #e3e8ef; }
.cal-bg { border-right: 1px solid #eef1f5; cursor: pointer; }
.cal-bg:last-child { border-right: none; }
.cal-bg:hover { background: rgba(var(--acc-rgb), .07); }
.cal-bg.other { background: #fafbfc; }
.cal-bg.today { background: #fff8e1; }
.cal-bg.sel { outline: 2px solid var(--hr-link); outline-offset: -2px; }
.cal-dn { font-size: .8rem; font-weight: 600; color: #344452; padding: 3px 6px; text-align: left; z-index: 1; pointer-events: none; }
.cal-dn.sun { color: #c92a2a; }
.cal-dn.sat { color: #155ca2; }
.cal-bar {
margin: 1px 4px; padding: 0 7px; border-radius: 4px;
font-size: .75rem; line-height: 18px; height: 18px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: #e7f1ff; color: #1c4f86; cursor: pointer; z-index: 2;
}
.cal-bar.span { background: #d3ead9; color: #1f7a52; font-weight: 600; }
.cal-bar.holiday { background: #ffe1e1; color: #c92a2a; }
/* 이어지는 막대는 해당 방향 모서리를 직각으로 → 칸을 가로질러 연결돼 보이게 */
.cal-bar.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-more { font-size: .75rem; color: var(--bs-secondary-color); padding-left: 6px; cursor: pointer; align-self: center; z-index: 2; }
[data-bs-theme="dark"] .cal-month { border-color: #343a40; }
[data-bs-theme="dark"] .cal-dows { background: #2b3035; border-bottom-color: #343a40; }
[data-bs-theme="dark"] .cal-dow { color: #adb5bd; }
/* 토·일 색은 다크에서 그대로 두면 배경에 묻힌다(파랑 2.98:1 · 빨강 3.42:1).
요일 색은 의미가 고정된 값이라 액센트를 따르지 않고, 다크용 밝은 톤만 따로 준다. */
[data-bs-theme="dark"] .cal-dow.sun,
[data-bs-theme="dark"] .cal-dn.sun { color: #ff8787; }
[data-bs-theme="dark"] .cal-dow.sat,
[data-bs-theme="dark"] .cal-dn.sat { color: #4dabf7; }
[data-bs-theme="dark"] .cal-week:not(:last-child) { border-bottom-color: #343a40; }
[data-bs-theme="dark"] .cal-bg { background: #212529; border-right-color: #2b3035; }
[data-bs-theme="dark"] .cal-bg.other { background: #1c1f23; }
[data-bs-theme="dark"] .cal-bg.today { background: #3d3416; }
[data-bs-theme="dark"] .cal-dn { color: #dee2e6; }
[data-bs-theme="dark"] .cal-bar { background: #1e3a5f; color: #9ecbff; }
[data-bs-theme="dark"] .cal-bar.span { background: #16331f; color: #69db7c; }
[data-bs-theme="dark"] .cal-bar.holiday { background: #3a1d1d; color: #ff8787; }
/* ===== 개인 연차 대시보드 ===== */
.leave-tile {
border: 1px solid #e3e3e3; border-radius: 10px; padding: 12px 14px; background: #fff; height: 100%;
}
.leave-tile-primary { border-color: rgb(var(--acc-rgb, 27, 110, 194)); background: rgba(var(--acc-rgb, 27, 110, 194), .06); }
/* 필터로 선택된 타일 강조 (클릭 토글) */
.leave-tile.tile-active { border-color: rgb(var(--acc-rgb, 27, 110, 194)); box-shadow: 0 0 0 2px rgba(var(--acc-rgb, 27, 110, 194), .25); }
[data-bs-theme="dark"] .leave-tile.tile-active { border-color: rgb(var(--acc-rgb, 77, 171, 247)); box-shadow: 0 0 0 2px rgba(var(--acc-rgb, 77, 171, 247), .3); }
.leave-tile .t-label { font-size: .875rem; color: var(--bs-secondary-color); }
.leave-tile .t-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
/* 진행 중 항목 강조 — 승인 대기와 동일한 펄스, 색만 테마색(파랑)으로 구분 */
.leave-tile.tile-pulse { animation: tile-pulse-blink 1.1s ease-in-out infinite; }
@keyframes tile-pulse-blink {
0%, 100% { border-color: rgba(var(--acc-rgb, 27, 110, 194), .4); box-shadow: 0 0 0 0 rgba(var(--acc-rgb, 27, 110, 194), 0); }
50% { border-color: rgb(var(--acc-rgb, 27, 110, 194)); box-shadow: 0 0 0 4px rgba(var(--acc-rgb, 27, 110, 194), 0.28); }
}
/* 승인 대기 등 처리 필요 항목 강조 — 0이 아닐 때 깜빡임(펄스) */
.leave-tile.tile-alert { border-color: #ffc9c9; animation: tile-alert-blink 1.1s ease-in-out infinite; }
@keyframes tile-alert-blink {
0%, 100% { border-color: #ffc9c9; box-shadow: 0 0 0 0 rgba(224, 49, 49, 0); }
50% { border-color: #e03131; box-shadow: 0 0 0 4px rgba(224, 49, 49, 0.28); }
}
[data-bs-theme="dark"] .leave-tile.tile-alert { border-color: #7a2b2b; }
[data-bs-theme="dark"] .leave-tile.tile-alert { animation: tile-alert-blink-dark 1.1s ease-in-out infinite; }
@keyframes tile-alert-blink-dark {
0%, 100% { border-color: #7a2b2b; box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
50% { border-color: #ff6b6b; box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.30); }
}
.leave-tile .t-value .t-unit { font-size: .9rem; font-weight: 400; color: var(--bs-secondary-color); margin-left: 2px; }
.leave-tile .t-sub { font-size: .78rem; color: var(--bs-secondary-color); }
.leave-donut {
--pct: 0;
/* 잔여율 비례 연속 색상 — 100% 파랑(210°) → 초록 → 노랑 → 0% 빨강(0°). 카운트업 중에도 색이 함께 변한다 */
--donut-hue: calc(var(--pct) * 2.1);
width: 104px; height: 104px; flex: 0 0 104px; border-radius: 50%;
background: conic-gradient(hsl(var(--donut-hue), 72%, 45%) calc(var(--pct) * 1%), #e9ecef 0);
display: grid; place-items: center; position: relative;
}
.leave-donut.expired { background: conic-gradient(#adb5bd calc(var(--pct) * 1%), #f1f3f5 0); }
.leave-donut::before { content: ''; position: absolute; width: 74px; height: 74px; border-radius: 50%; background: #fff; }
.leave-donut .d-text { position: relative; text-align: center; line-height: 1.15; }
.leave-donut .d-cap { font-size: .75rem; color: var(--bs-secondary-color); }
.leave-donut .d-num { font-size: 1.5rem; font-weight: 700; color: hsl(var(--donut-hue), 72%, 38%); }
.leave-donut.expired .d-num { color: #868e96; }
/* 홈 '내 조직' 접기/펼치기 */
.org-collapse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
.org-collapse > summary::-webkit-details-marker { display: none; }
.org-collapse > summary::marker { content: ""; }
.org-collapse > summary:hover { background: rgba(0,0,0,0.02); }
/* 펼치기/접기 어포던스 — 작은 캐럿만으로는 눌러야 하는 줄인지 알기 어려워 라벨 붙은 버튼 모양으로 둔다 */
.org-collapse > summary .org-toggle {
margin-left: auto; flex: 0 0 auto;
display: inline-flex; align-items: center; gap: .35rem;
padding: .3rem .7rem; border: 1px solid var(--bs-border-color, #ced4da); border-radius: 999px;
font-size: .85rem; font-weight: 600; color: var(--bs-body-color); background: var(--bs-body-bg);
white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.org-collapse > summary .org-toggle::after { content: "펼치기"; }
.org-collapse[open] > summary .org-toggle::after { content: "접기"; }
.org-collapse > summary:hover .org-toggle { color: var(--hr-link); border-color: var(--hr-link); }
.org-collapse > summary .org-toggle-arrow { display: inline-block; transition: transform 0.15s; }
.org-collapse[open] > summary .org-toggle-arrow { transform: rotate(180deg); }
[data-bs-theme="dark"] .org-collapse > summary:hover { background: rgba(255,255,255,0.04); }
/* ===== 보고 라인 카드 (홈 '내 조직') ===== */
.rline { display: flex; flex-direction: column; align-items: center; gap: 0; }
.rline-bar { width: 2px; height: 16px; background: #ccc; }
.rline-label { font-size: 0.85rem; color: var(--bs-secondary-color); margin: 8px 0 4px; }
.rline-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.rcard {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border: 1px solid var(--hr-line); border-radius: 10px; background: #fff;
padding: 12px 16px; cursor: pointer; width: 100%; max-width: 460px;
transition: border-color 0.12s, box-shadow 0.12s;
}
.rline-grid .rcard { width: auto; flex: 1 1 280px; min-width: 260px; max-width: 360px; }
.rcard:hover { border-color: var(--hr-link); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.rcard.focus { border-color: var(--hr-link); border-width: 2px; background: rgba(var(--acc-rgb), .08); }
.rc-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hr-line); flex: 0 0 auto; }
.rc-main { flex: 1 1 auto; min-width: 0; }
.rc-name { font-weight: 600; }
.rc-sub { font-size: 0.85rem; color: var(--bs-secondary-color); }
.rc-org { font-size: 0.8rem; color: var(--bs-secondary-color); }
.rc-meta { font-size: 0.8rem; color: var(--bs-secondary-color); white-space: nowrap; align-self: flex-start; }
.rc-profile { flex-basis: 100%; margin-top: 6px; font-size: 0.85rem; }
/* 날씨 칩 미세먼지 점 — 이모지 대신 작은 색상 점(날씨 아이콘과 크기·톤 맞춤) */
.air-dot {
display: inline-block; width: 9px; height: 9px; border-radius: 50%;
margin-left: 5px; vertical-align: 1px;
box-shadow: 0 0 0 1.5px rgba(255,255,255,.35);
}
/* 소프트웨어 할당 현황 매트릭스 — 자체 스크롤 박스 + 틀 고정(좌측 2열 + 상단 헤더) */
.alloc-wrap { overflow: auto; max-width: 100%; max-height: calc(100vh - 230px); }
/* 상단 가로 스크롤바(본문과 동기화) */
.alloc-hscroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.alloc-hscroll > div { height: 1px; }
.alloc-table { width: auto; margin-bottom: 0; }
.alloc-table th, .alloc-table td { white-space: nowrap; vertical-align: middle; }
.alloc-table .prod-col { cursor: pointer; user-select: none; vertical-align: bottom; text-align: center; white-space: normal; min-width: 76px; max-width: 120px; }
.alloc-table .sortable { cursor: pointer; user-select: none; }
/* 좌측 2열 고정 */
.alloc-table .sticky-col { position: sticky; background: var(--bs-body-bg, #fff); z-index: 2; }
.alloc-table .col-org { left: 0; min-width: 110px; }
.alloc-table .col-user { left: 110px; min-width: 90px; box-shadow: 1px 0 0 rgba(0,0,0,.1); }
/* 상단 헤더(제품명·필터·합계) 고정 — thead 전체를 스크롤 박스 상단에 고정 */
.alloc-table thead th, .alloc-table thead td { position: sticky; background: var(--bs-body-bg, #fff); z-index: 3; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.alloc-table thead tr:nth-child(1) th { top: 0; }
.alloc-table thead tr:nth-child(2) td, .alloc-table thead tr:nth-child(2) th { top: var(--hrow1, 88px); }
.alloc-table thead tr:nth-child(3) td { top: var(--hrow12, 122px); }
/* 헤더 좌측 2열 교차(코너) — 가장 위 */
.alloc-table thead .sticky-col { z-index: 5; }
/* 합계 행 — 불투명 테마 배경(스크롤 본문 비침 방지) + 테마 글자색 */
.alloc-table .alloc-total td { background: var(--bs-secondary-bg, #e9ecef) !important; color: var(--bs-body-color); }
.alloc-table .filter-row td, .alloc-table .filter-row th { padding: 2px 4px; }
.alloc-table .pf { width: 100%; font-size: .7rem; padding: 1px 2px; }
/* 호버 십자 하이라이트(JS가 클래스 토글) — 현재 사용자(행)·제품(열) 구분 */
.alloc-table td.alloc-col-hl, .alloc-table th.alloc-col-hl { background: rgba(27,110,194,.12) !important; }
.alloc-table tr.alloc-row-hl td { background: rgba(27,110,194,.12) !important; }
.alloc-table tr.alloc-row-hl td.sticky-col { background: rgba(27,110,194,.18) !important; }
/* 접속 현황 — 로그인 허용 신호등 */
.status-light {
display: inline-block; width: 11px; height: 11px; border-radius: 50%;
box-shadow: 0 0 0 1.5px rgba(0,0,0,.08);
}
.status-light.on { background: #37b24d; box-shadow: 0 0 0 1.5px rgba(55,178,77,.25), 0 0 4px rgba(55,178,77,.5); }
.status-light.off { background: #e03131; box-shadow: 0 0 0 1.5px rgba(224,49,49,.25); }
/* 홈 위젯 — 이번 주 하이라이트·신규 입사자 환영 (왼쪽 액센트 보더로 가벼운 강조) */
.highlight-card { border-left: 4px solid #f59f00; }
.welcome-card { border-left: 4px solid #37b24d; }
/* 통합 검색 결과 — 카테고리 아코디언(데이터 없으면 접힘) + 결과 그리드 */
.search-section { border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 10px; background: #fff; }
.search-section > summary.ss-head { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; user-select: none; }
.search-section > summary.ss-head::-webkit-details-marker { display: none; }
.search-section > summary.ss-head::before { content: "▸"; color: #adb5bd; font-size: .8em; transition: transform .15s; }
.search-section[open] > summary.ss-head::before { transform: rotate(90deg); }
.ss-count { font-weight: 600; color: var(--hr-ink); background: rgba(var(--acc-rgb), .12); border-radius: 999px; padding: 1px 9px; font-size: .78rem; }
.ss-count.empty { color: #adb5bd; background: #f1f3f5; }
.ss-empty { color: #adb5bd; font-size: .85rem; padding: 0 14px 12px; margin: 0; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 2px 14px 12px; }
.ss-foot { padding: 0 14px 12px; }
.ss-foot a { font-size: .8rem; text-decoration: none; }
.ss-card { display: block; padding: 9px 11px; border: 1px solid #e9ecef; border-radius: 8px; text-decoration: none; color: inherit; background: #fbfcfd; transition: border-color .15s, box-shadow .15s; }
.ss-card:hover { border-color: rgba(var(--acc-rgb), .55); box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.ss-card-title { display: block; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ss-card-sub { display: block; font-size: .78rem; color: #6c757d; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-card-emp { display: flex; align-items: center; gap: 9px; }
.ss-card-emp .ss-card-body { min-width: 0; }
[data-bs-theme="dark"] .search-section { background: #23272b; border-color: #3a4046; }
[data-bs-theme="dark"] .ss-card { background: #2b3035; border-color: #3a4046; }
[data-bs-theme="dark"] .ss-count.empty { color: #9aa3ab; background: #343a40; }
.rc-contacts { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.8rem; }
.rc-contact { display: inline-flex; align-items: center; gap: 5px; }
.rc-contact-ic { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }
.rc-contact a { color: #495057; text-decoration: none; word-break: break-all; }
.rc-contact a:hover { text-decoration: underline; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }
.status-dot.active { background: #37b24d; }
.status-dot.onleave { background: #f59f00; }
.status-dot.resigned { background: #e03131; }
[data-bs-theme="dark"] .rcard { background: #2b3035; border-color: #495057; }
[data-bs-theme="dark"] .rline-bar { background: #555; }
[data-bs-theme="dark"] .rc-sub { color: #adb5bd; }
[data-bs-theme="dark"] .rc-contact a { color: #ced4da; }
/* 직원 목록: 셀 줄바꿈 방지 → 넓어지면 table-responsive 가로 스크롤 */
.emp-table th, .emp-table td { white-space: nowrap; }
.emp-table .filter-row .form-control,
.emp-table .filter-row .form-select { min-width: 90px; }
/* ===== 홈 대시보드 ===== */
.home-banner {
background: linear-gradient(135deg, #1b6ec2 0%, #3a0647 100%);
color: #fff;
border-radius: 12px;
padding: 1.25rem 1.5rem;
}
.home-banner-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.6); flex: 0 0 auto; }
.dday-chip { background: rgba(255,255,255,0.18); border-radius: 20px; padding: 0.3rem 0.8rem; font-size: 0.85rem; white-space: nowrap; }
.person-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
background: #f1f3f7; border-radius: 20px; padding: 0.2rem 0.65rem 0.2rem 0.2rem; font-size: 0.85rem;
}
.person-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hr-line); flex: 0 0 auto; }
[data-bs-theme="dark"] .person-chip { background: #2b3035; }
/* 삭제 휴지통 아이콘 (버튼의 text-danger 색을 currentColor로 상속) */
.icon-trash {
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 연차연도 카드 접기/펼치기 (종료 카드는 접힘) */
.leave-year > summary { cursor: pointer; list-style: none; }
.leave-year > summary::-webkit-details-marker { display: none; }
.leave-year > summary::marker { content: ""; }
.leave-year > summary:hover { background: rgba(0,0,0,0.02); }
.leave-year .leave-caret { transition: transform 0.15s; }
.leave-year[open] > summary .leave-caret { transform: rotate(180deg); }
.leave-year[open] > summary .leave-sum { display: none; } /* 펼치면 요약 숫자 숨김(도넛이 대체) */
[data-bs-theme="dark"] .leave-year > summary:hover { background: rgba(255,255,255,0.04); }
/* 페이지 제목 옆 프로필 아바타 (이름 제목 페이지) */
.page-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--hr-line);
background: #fff;
flex: 0 0 auto;
}
/* ===== 다크 테마 보정 (커스텀 컴포넌트) ===== */
[data-bs-theme="dark"] .page-avatar { border-color: #555; background: #2b3035; }
[data-bs-theme="dark"] .org-box { background: #2b3035; border-color: #495057; }
[data-bs-theme="dark"] .org-box .org-meta { color: #adb5bd; }
[data-bs-theme="dark"] .org-member img { border-color: #555; background: #2b3035; }
[data-bs-theme="dark"] .org-members.with-names .org-member:hover { background: #2f3b4a; }
[data-bs-theme="dark"] .org-member .m-name { color: #e6e6e6; }
[data-bs-theme="dark"] .org-member .m-name .m-role { color: #adb5bd; }
[data-bs-theme="dark"] .leave-tile { background: #2b3035; border-color: #495057; }
[data-bs-theme="dark"] .leave-tile-primary { background: rgba(var(--acc-rgb, 77, 171, 247), .14); border-color: rgb(var(--acc-rgb, 77, 171, 247)); }
[data-bs-theme="dark"] .leave-tile .t-sub { color: #9aa3ab; }
[data-bs-theme="dark"] .leave-donut { background: conic-gradient(hsl(var(--donut-hue), 75%, 58%) calc(var(--pct) * 1%), #343a40 0); }
[data-bs-theme="dark"] .leave-donut.expired { background: conic-gradient(#868e96 calc(var(--pct) * 1%), #2b3035 0); }
[data-bs-theme="dark"] .leave-donut::before { background: #2b3035; }
[data-bs-theme="dark"] .leave-donut .d-num { color: hsl(var(--donut-hue), 75%, 62%); }
/* ===== 결재선 플로우차트 (상신 → 단계 → 완료, 좌→우) ===== */
.aline-diagram { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed #d6dbe1; }
.aline-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; row-gap: 8px; padding: 2px 0; }
.aline-step { display: flex; align-items: center; }
.aline-node {
min-width: 92px; max-width: 168px;
border: 1px solid #cdd5df; border-radius: 10px;
background: #f8fafc; padding: 6px 10px; text-align: center; line-height: 1.2;
}
.aline-node .n-ord { font-size: .75rem; font-weight: 700; color: var(--hr-ink); display: block; }
.aline-node .n-name { font-size: .86rem; font-weight: 600; }
.aline-node .n-sub { font-size: .75rem; color: #6c757d; display: block; }
.aline-node.start, .aline-node.end { min-width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aline-node.start { background: rgba(var(--acc-rgb), .09); border-color: var(--hr-link); }
.aline-node.end { background: #e7f7ec; border-color: #37b24d; }
.aline-node .n-state { font-size: .66rem; font-weight: 700; display: block; margin-top: 2px; }
/* 결재 문서: 단계 상태 반영 */
.aline-node.approved { background: #e7f7ec; border-color: #37b24d; }
.aline-node.approved .n-state { color: #2b8a3e; }
.aline-node.rejected { background: #fbe9e9; border-color: #e03131; }
.aline-node.rejected .n-state { color: #c92a2a; }
.aline-node.pending { border-style: dashed; }
.aline-node.pending .n-name, .aline-node.pending .n-sub, .aline-node.pending .n-state { color: #868e96; }
/* 진행 중 단계 — 깜빡임(펄스): 배경·테두리·글로우를 함께 변화시켜 확실히 보이게 */
.aline-node.current { color: #664d03; animation: aline-blink 1s ease-in-out infinite; }
.aline-node.current .n-ord { color: #b8860b; }
.aline-node.current .n-state { color: #b8860b; }
@keyframes aline-blink {
0%, 100% { background: #fff8e1; border-color: #ffe08a; box-shadow: 0 0 0 0 rgba(245, 159, 0, 0); }
50% { background: #ffe066; border-color: #f59f00; box-shadow: 0 0 0 6px rgba(245, 159, 0, 0.45); }
}
/* 종료 노드 상태별 */
.aline-node.end.rejected { background: #fbe9e9; border-color: #e03131; }
.aline-node.end.withdrawn { background: #f1f3f5; border-color: #adb5bd; color: #868e96; }
.aline-node.end.waiting { background: #f8fafc; border-color: #cdd5df; color: #868e96; border-style: dashed; }
.aline-arrow { align-self: center; color: #9aa6b2; padding: 0 7px; font-weight: 700; }
.aline-cc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: #6c757d; }
.aline-cc .cc-pill { background: #f1f3f7; border: 1px solid #e3e3e3; border-radius: 12px; padding: 1px 9px; color: #495057; }
[data-bs-theme="dark"] .aline-diagram { border-bottom-color: #495057; }
[data-bs-theme="dark"] .aline-node { background: #2b3035; border-color: #495057; }
[data-bs-theme="dark"] .aline-node .n-sub { color: #adb5bd; }
[data-bs-theme="dark"] .aline-node.end { background: #16331f; border-color: #37b24d; }
[data-bs-theme="dark"] .aline-arrow { color: #6c757d; }
[data-bs-theme="dark"] .aline-cc { color: #adb5bd; }
[data-bs-theme="dark"] .aline-cc .cc-pill { background: #343a40; border-color: #495057; color: #ced4da; }
[data-bs-theme="dark"] .aline-node.approved { background: #16331f; border-color: #37b24d; }
[data-bs-theme="dark"] .aline-node.approved .n-state { color: #69db7c; }
[data-bs-theme="dark"] .aline-node.rejected { background: #3a1d1d; border-color: #e03131; }
[data-bs-theme="dark"] .aline-node.rejected .n-state { color: #ff8787; }
[data-bs-theme="dark"] .aline-node.pending .n-name,
[data-bs-theme="dark"] .aline-node.pending .n-sub,
[data-bs-theme="dark"] .aline-node.pending .n-state { color: #9aa3ab; } /* 4.01 -> 5.20:1 */
[data-bs-theme="dark"] .aline-node.current { color: #ffe066; animation: aline-blink-dark 1s ease-in-out infinite; }
[data-bs-theme="dark"] .aline-node.current .n-ord,
[data-bs-theme="dark"] .aline-node.current .n-state { color: #ffd43b; }
@keyframes aline-blink-dark {
0%, 100% { background: #3d3416; border-color: #7a6420; box-shadow: 0 0 0 0 rgba(245, 159, 0, 0); }
50% { background: #6b5612; border-color: #f59f00; box-shadow: 0 0 0 6px rgba(245, 159, 0, 0.45); }
}
[data-bs-theme="dark"] .aline-node.end.rejected { background: #3a1d1d; border-color: #e03131; }
[data-bs-theme="dark"] .aline-node.end.withdrawn { background: #2b3035; border-color: #6c757d; color: #adb5bd; }
[data-bs-theme="dark"] .aline-node.end.waiting { background: #2b3035; border-color: #495057; color: #9aa3ab; }
/* ===== Markdown 렌더 영역 (결재 내용·사유 — Markdig 출력) ===== */
.md-content > :last-child { margin-bottom: 0; }
.md-content p { margin-bottom: .5rem; }
.md-content h1, .md-content h2, .md-content h3,
.md-content h4, .md-content h5, .md-content h6 { margin: .75rem 0 .4rem; font-weight: 600; }
.md-content h1 { font-size: 1.4rem; }
.md-content h2 { font-size: 1.25rem; }
.md-content h3 { font-size: 1.1rem; }
.md-content h4, .md-content h5, .md-content h6 { font-size: 1rem; }
.md-content ul, .md-content ol { padding-left: 1.4rem; margin-bottom: .5rem; }
.md-content table { width: auto; border-collapse: collapse; margin-bottom: .75rem; }
.md-content table th, .md-content table td { border: 1px solid var(--bs-border-color); padding: .3rem .6rem; }
.md-content table th { background: var(--bs-tertiary-bg); }
.md-content blockquote { border-left: 3px solid var(--bs-border-color); padding-left: .75rem; color: var(--bs-secondary-color); margin: .5rem 0; }
.md-content pre { background: var(--bs-tertiary-bg); border-radius: 6px; padding: .6rem .8rem; }
.md-content code { background: var(--bs-tertiary-bg); border-radius: 4px; padding: .1rem .3rem; }
.md-content pre code { background: none; padding: 0; }
.md-content img { max-width: 100%; }
.md-content hr { margin: .75rem 0; }
/* 홈 회사 일정 — 제목 속 직원 이름 앞 미니 아바타 */
.cal-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
vertical-align: middle;
margin-right: 3px;
border: 1px solid var(--bs-border-color);
}
/* 달력 막대 안에서는 더 작게 (레인 높이 20px) */
.cal-bar .cal-avatar {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 2px;
}
/* 연차 아이콘 (이름 뒤) */
.cal-leave-icon {
margin-left: 2px;
font-size: .9em;
}
/* 사내 회의실 — 지사별 색상 칩 (본점/부산/울산) */
.cal-room {
display: inline-block;
margin-left: 6px;
padding: 0 7px;
font-size: .75rem;
font-weight: 600;
line-height: 1.5;
color: #fff;
border-radius: 10px;
vertical-align: middle;
white-space: nowrap;
}
.cal-site-hq { background: #1b6ec2; } /* 본점(서울) — 파랑 */
.cal-site-busan { background: #2e9e5b; } /* 부산지사 — 초록 */
.cal-site-ulsan { background: #e08a1e; } /* 울산지사 — 주황 */
.cal-site-other { background: #6c757d; } /* 기타 사내 */
/* ===== 상단바 전역 도구 — 검색 + 알림 벨 ===== */
.top-row { position: relative; } /* 검색창 절대 중앙 배치 기준 */
.topbar-search {
position: relative; /* 흐름 내 배치 — 절대배치 금지(겹침의 근본 원인이었음). 검색 아이콘 anchor */
display: flex;
align-items: center;
flex: 0 1 520px; /* 기본 520px, 폭 부족 시 축소(grow 없음) */
min-width: 0;
margin: 0 auto; /* 남는 공간을 양쪽으로 흡수 → 흐름 내 가운데 정렬(겹침 없음) */
}
.topbar-search-icon {
position: absolute;
left: .8rem; /* 입력 여백 안쪽으로 */
font-size: .95rem;
opacity: .85; /* 흐릿함 완화 — 잘 보이도록 */
pointer-events: none;
line-height: 1;
}
.topbar-search input {
width: 100%;
height: 2.1rem;
padding: 0 .8rem 0 2.2rem; /* 아이콘 자리만큼 좌측 여백 */
border-radius: 999px;
border: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
color: var(--bs-body-color);
font-size: .9rem;
}
.topbar-search input:focus {
outline: none;
border-color: var(--hr-link);
box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .2);
}
.notif-menu { position: relative; margin-right: 1.25rem; }
.notif-menu > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
position: relative;
}
.notif-menu > summary::-webkit-details-marker { display: none; }
.notif-bell { font-size: 1.15rem; }
.notif-badge {
position: absolute;
top: -6px;
right: -9px;
background: #e5484d;
color: #fff;
font-size: .62rem;
font-weight: 700;
line-height: 1;
padding: 2px 5px;
border-radius: 999px;
}
.notif-panel {
position: absolute;
right: 0;
top: 2.1rem;
min-width: 240px;
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
padding: 6px;
z-index: 1100;
}
.notif-head { font-weight: 600; font-size: .8rem; padding: 6px 8px; color: var(--bs-secondary-color); }
.notif-empty { padding: 10px 8px; font-size: .85rem; color: var(--bs-secondary-color); }
.notif-item {
display: flex !important;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px;
margin-left: 0 !important;
border-radius: 6px;
text-decoration: none !important;
color: var(--bs-body-color);
font-size: .88rem;
}
.notif-item:hover { background: var(--bs-secondary-bg); }
.notif-count { background: var(--bs-secondary-bg); border-radius: 999px; padding: 0 8px; font-weight: 600; font-size: .78rem; }
@media (max-width: 640.98px) {
/* 좁은 화면 — 검색을 최대한 넓게, 알림·긴급 아이콘 간격 최소화 */
.topbar-search { max-width: none; margin: 0 .35rem 0 0; }
.topbar-search input { font-size: .8rem; }
.notif-menu { margin-right: .35rem; }
.urgent-btn { margin-right: .35rem; min-width: 28px; }
}
/* 중간 폭(태블릿~좁은 데스크톱) — 검색창을 흐름 배치로 신축, 프로필 이름 숨김.
(모바일 <=640 은 위 전용 규칙 유지) */
@media (min-width: 641px) and (max-width: 1199.98px) {
/* 검색창 폭 넓히고 좌측 정렬, 아이콘은 오른쪽 (position/flex 는 기본값) */
.topbar-search { max-width: none; margin: 0 .75rem 0 0; }
.user-menu .user-name { display: none; } /* 사진 옆 이름 숨김 */
}
/* 외부 장소 — 절제된 회색 핀 칩 */
.cal-place {
display: inline-block;
margin-left: 6px;
padding: 0 7px;
font-size: .75rem;
line-height: 1.5;
color: var(--bs-secondary-color);
background: var(--bs-secondary-bg);
border: 1px solid var(--bs-border-color);
border-radius: 10px;
vertical-align: middle;
white-space: nowrap;
}
/* 추가 참석자(제목에 없는 직원) — 이름은 작게, 아바타와 함께 */
.cal-attendees {
margin-left: 6px;
}
.cal-attendees .cal-att-name {
font-size: .8rem;
color: var(--bs-secondary-color);
margin-right: 4px;
vertical-align: middle;
}
/* 홈 위젯 공용 — 목록 짝수 행 줄무늬 배경 (행 구분 가독성) */
.striped-list > li {
padding-left: .5rem;
padding-right: .5rem;
border-radius: 6px;
}
.striped-list > li:nth-child(even) {
background: #e9eef5; /* 라이트 — 명확히 보이는 줄무늬 */
}
[data-bs-theme="dark"] .striped-list > li:nth-child(even) {
background: rgba(255, 255, 255, 0.06);
}
/* 새 결재 상신 타일 — 은은한 펄스 (시선 유도, 경고 깜빡임보다 느리고 부드럽게).
--acc-rgb(포인트 색)를 따르므로 액센트 변경 시 글로우 색도 함께 바뀐다 */
.leave-tile-primary {
animation: tile-primary-pulse 1.5s ease-in-out infinite;
}
@keyframes tile-primary-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb, 27, 110, 194), 0); }
50% { box-shadow: 0 0 0 5px rgba(var(--acc-rgb, 27, 110, 194), 0.22); }
}
[data-bs-theme="dark"] .leave-tile-primary {
animation: tile-primary-pulse-dark 1.5s ease-in-out infinite;
}
@keyframes tile-primary-pulse-dark {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb, 77, 171, 247), 0); }
50% { box-shadow: 0 0 0 5px rgba(var(--acc-rgb, 77, 171, 247), 0.25); }
}
/* 홈 회사 일정 — 필터 후 보이는 행 기준 줄무늬는 JS(fx-stripe)가 관리 (nth-child는 숨김 행을 세므로 비활성) */
#home-cal-list > li:nth-child(even) { background: transparent; }
#home-cal-list > li.fx-stripe { background: #e9eef5; }
[data-bs-theme="dark"] #home-cal-list > li.fx-stripe { background: rgba(255, 255, 255, 0.06); }
/* 일정 필터 숨김 — Bootstrap d-flex(display:flex !important)를 이기기 위한 !important 클래스 */
.striped-list > li.fx-hide { display: none !important; }
/* ===== 모바일 탭 — 줄바꿈 대신 한 줄 유지 + 가로 스크롤 (전 페이지 공통) ===== */
@media (max-width: 576px) {
.nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox 스크롤바 숨김 */
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { white-space: nowrap; }
}
/* ===== 홈 배너 — 흐르는 그라데이션 + 시간대 톤 ===== */
.home-banner {
background-size: 300% 300%;
animation: banner-flow 18s ease infinite;
}
@keyframes banner-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.home-banner.banner-morning { background-image: linear-gradient(135deg, #1d7fd6, #114a7d, #3aa0e8); }
.home-banner.banner-day { background-image: linear-gradient(135deg, #1b6ec2, #3a0647, #1b6ec2); }
.home-banner.banner-evening { background-image: linear-gradient(135deg, #b45309, #47063a, #8a2a64); }
.home-banner.banner-night { background-image: linear-gradient(135deg, #16325c, #0d0d35, #3a2a6b); }
/* 배너 한 줄 티커 */
.banner-ticker {
margin-top: .4rem;
font-size: .85rem;
opacity: .85;
transition: opacity .25s ease;
}
/* ===== 회사 일정 — 오늘/진행 중/지난 일정 표시 ===== */
/* 홈 위젯(#home-cal-list): 좌측 inset 바(파랑=오늘 / 빨강=진행 중) — 컴팩트 유지 */
#home-cal-list > li.cal-today { box-shadow: inset 3px 0 0 var(--bs-primary); }
#home-cal-list > li.cal-past { opacity: .5; }
#home-cal-list > li.cal-live {
box-shadow: inset 3px 0 0 #e5484d;
animation: cal-home-live 1.6s ease-in-out infinite;
}
@keyframes cal-home-live {
0%, 100% { background-color: rgba(229, 72, 77, 0.05); box-shadow: inset 3px 0 0 #e5484d; }
50% { background-color: rgba(229, 72, 77, 0.20); box-shadow: inset 4px 0 0 #e5484d, 0 0 12px 1px rgba(229, 72, 77, 0.28); }
}
/* 일/주 상세(#cal-detail-list): 일정 카드 — 둥근 박스 + 좌측 상태 레일 + 균일 간격 + hover 부상 */
#cal-detail-list > li.d-flex {
position: relative;
padding: 9px 12px 9px 15px;
margin-bottom: 6px;
border-radius: 10px;
background: var(--bs-tertiary-bg, #f6f8fb);
transition: transform .12s ease, box-shadow .12s ease, background-color .25s ease;
}
/* 좌측 상태 레일 — 레이아웃 영향 없도록 pseudo로(둥근 끝, 카드 안쪽 여백) */
#cal-detail-list > li.d-flex::before {
content: "";
position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
border-radius: 0 3px 3px 0;
background: var(--bs-border-color); /* 기본: 중립(예정) */
}
#cal-detail-list > li.d-flex:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}
#cal-detail-list > li.cal-today::before { background: var(--bs-primary); } /* 오늘 = 파랑 */
#cal-detail-list > li.cal-past { opacity: .55; } /* 지난 = 흐림 */
#cal-detail-list > li.cal-live::before { /* 진행 중 = 빨강 레일이 빛나며 맥동 */
background: #e5484d;
animation: cal-rail-pulse 1.6s ease-in-out infinite;
}
@keyframes cal-rail-pulse {
0%, 100% { box-shadow: 0 0 4px 0 rgba(229, 72, 77, .45); }
50% { box-shadow: 0 0 11px 2px rgba(229, 72, 77, .95); }
}
#cal-detail-list > li.cal-live { /* 적색 배경 + 외곽 글로우 호흡(또렷하게) */
animation: cal-detail-live 1.6s ease-in-out infinite;
}
@keyframes cal-detail-live {
0%, 100% { background-color: rgba(229, 72, 77, 0.06); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
50% { background-color: rgba(229, 72, 77, 0.22); box-shadow: 0 0 18px 2px rgba(229, 72, 77, 0.32); }
}
[data-bs-theme="dark"] #cal-detail-list > li.d-flex { background: rgba(255, 255, 255, .04); }
/* '진행 중' 라벨 — 빨강 핀 + 점멸(시선 유도) */
#home-cal-list > li.cal-live > span:last-child::after,
#cal-detail-list > li.cal-live > span:last-child::after {
content: " ● 진행 중";
color: #e5484d;
font-size: .78rem;
font-weight: 600;
animation: cal-label-blink 1.6s ease-in-out infinite;
}
@keyframes cal-label-blink {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
/* 주(週) 뷰 — 날짜 구분 헤더 */
#cal-detail-list > li.cal-wday {
font-weight: 600;
margin-top: .6rem;
padding: 2px 4px;
border-bottom: 1px solid var(--bs-border-color);
}
#cal-detail-list > li.cal-wday:first-child { margin-top: 0; }
#cal-detail-list > li.cal-wday.is-today { color: var(--bs-primary); }
@keyframes live-blink {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
/* ============================================================
모바일(≤640.98px) 공통 보정 — iPhone(390/375) 포함
============================================================ */
@media (max-width: 640.98px) {
/* 노치/홈인디케이터 안전영역 (App.razor viewport-fit=cover 와 함께) */
.sidebar .top-row { padding-left: env(safe-area-inset-left); }
main > .top-row { padding-right: env(safe-area-inset-right); }
article.content { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
/* 다열 테이블 — 가로 스크롤 + 세로 글자깨짐 방지 (전 페이지 공통).
에 display:block 을 주면 thead/tbody 는 익명 테이블 박스로 유지돼
컬럼 정렬은 보존하면서 표 자체가 가로 스크롤된다. */
.content .table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.content .table th,
.content .table td { white-space: nowrap; }
/* iOS Safari 입력 포커스 자동확대 방지 — 입력류 16px 이상 */
.form-control, .form-select,
.form-control-sm, .form-select-sm,
input:not([type=checkbox]):not([type=radio]),
select, textarea { font-size: 16px; }
/* 캘린더 툴바 — 한 줄 욱여넣기(세로 글자깨짐) 대신 줄바꿈 */
.cal-toolbar { flex-wrap: wrap; row-gap: 6px; }
.cal-toolbar .btn { white-space: nowrap; }
.cal-toolbar .cal-title { min-width: 0; flex: 1 1 100%; order: -1; text-align: left; }
.cal-toolbar .btn-group { flex: 0 0 auto; }
/* 회사 일정 주/일 상세 + 홈 위젯 — 날짜/시간 칸이 고정폭(178/100·142/40)이라
좁은 화면에서 제목 칸이 짓눌려 세로로 한 글자씩 깨지던 문제.
→ 제목 span 을 다음 줄 전체폭으로 내려 정상 줄바꿈. */
#cal-detail-list > li.d-flex,
#home-cal-list > li.d-flex { flex-wrap: wrap; }
#cal-detail-list > li.d-flex > .badge { flex: 0 0 auto !important; }
#cal-detail-list > li.d-flex > span:last-child,
#home-cal-list > li.d-flex > span:last-child { flex: 1 1 100%; min-width: 0; white-space: normal; }
/* 홈 '내 조직' 접이식 헤더 — 제목이 세로로 깨지지 않게 */
.org-collapse > summary { flex-wrap: wrap; }
.org-collapse > summary .h5 { white-space: nowrap; flex: 0 0 auto; }
.org-collapse > summary .text-muted.small { flex: 1 1 100%; margin-left: 0 !important; order: 3; }
/* 상단바 — 비좁음 완화: 사용자 이름 텍스트 숨기고 아바타만(메뉴는 그대로) */
.user-menu .user-name { display: none; }
/* 검색은 위 flex 신축 규칙(flex:1 1 auto)이 폭을 정함 — max-width로 덮지 않음(겹침 방지) */
.topbar-search input { font-size: 16px; } /* iOS 자동확대 방지 (기존 .8rem override) */
/* 탭 타깃 — 손가락 터치 영역 확보 (iOS HIG/Android 권장 44px) */
.theme-toggle { min-width: 44px; min-height: 44px; }
.notif-menu > summary { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.urgent-btn { min-width: 44px; min-height: 44px; }
.user-menu > summary { min-height: 44px; display: inline-flex; align-items: center; }
/* 본문 버튼류 — btn-sm도 모바일에선 터치 높이 확보(가로 폭은 유지) */
.content .btn-sm { min-height: 38px; }
.content .form-check-input { width: 1.15rem; height: 1.15rem; }
/* 내비 링크 터치 높이 */
.sidebar .nav-link { min-height: 44px; display: flex; align-items: center; }
}
/* 다크에서는 같은 알파가 더 묻힌다 — 색은 토큰(--acc-rgb)을 그대로 쓰고 농도만 올린다. */
[data-bs-theme="dark"] .org-box.selected,
[data-bs-theme="dark"] .org-row.selected,
[data-bs-theme="dark"] .aline-node.start { background: rgba(var(--acc-rgb), .18); }
[data-bs-theme="dark"] .rcard.focus { background: rgba(var(--acc-rgb), .16); }
[data-bs-theme="dark"] .cal-bg:hover { background: rgba(var(--acc-rgb), .14); }
/* .ss-card 표면 위에 다시 얹히는 칩이라 .20 이면 글자 대비가 4.22:1 까지 떨어졌다(퍼플) */
[data-bs-theme="dark"] .fv-thumb.active,
[data-bs-theme="dark"] .ss-count { background: rgba(var(--acc-rgb), .14); }
[data-bs-theme="dark"] .doc-requester { background: rgba(var(--acc-rgb), .18); border-color: rgba(var(--acc-rgb), .45); }
/* ===== 테마 변형 — 딤·블랙(다크 계열), 세피아(라이트 계열) =====
base(data-bs-theme)는 light/dark 그대로 두고, 변형은 표면 팔레트만 덮는다.
부트스트랩 루트 변수(--bs-*)가 폼·테이블·모달 등 대부분을 커버하고,
커스텀 표면은 --variant-card/--variant-line 으로 일괄 치환. */
html[data-theme-variant="dim"] {
--bs-body-bg: #15202b; --bs-body-color: #e9eef2;
--bs-secondary-bg: #1e2c3a; --bs-tertiary-bg: #22303c;
--bs-border-color: #38444d; --bs-secondary-color: #9fb0bd;
--variant-card: #1c2937; --variant-line: #38444d;
}
html[data-theme-variant="black"] {
--bs-body-bg: #000; --bs-body-color: #e6e6e6;
--bs-secondary-bg: #121212; --bs-tertiary-bg: #161616;
--bs-border-color: #2a2a2a; --bs-secondary-color: #9a9a9a;
--variant-card: #101010; --variant-line: #2a2a2a;
}
html[data-theme-variant="sepia"] {
--bs-body-bg: #f3ead7; --bs-body-color: #3d3422;
--bs-secondary-bg: #eadfc6; --bs-tertiary-bg: #efe5cf;
--bs-border-color: #d9cbab; --bs-secondary-color: #6b6049; /* 4.14 -> 5.17:1 */
--variant-card: #faf3e1; --variant-line: #dccfae;
}
html[data-theme-variant] body { background: var(--bs-body-bg); }
html[data-theme-variant] .card,
html[data-theme-variant] .leave-tile,
html[data-theme-variant] .person-chip,
html[data-theme-variant] .rcard,
html[data-theme-variant] .org-box,
html[data-theme-variant] .ss-card,
html[data-theme-variant] .search-section,
html[data-theme-variant] .aline-node {
background: var(--variant-card);
border-color: var(--variant-line);
}
html[data-theme-variant] .leave-donut::before { background: var(--variant-card); }
/* CSS isolation(스코프) 컴포넌트는 전역 우선순위 보정.
상단바는 main 쪽만 — 사이드바 상단(.sidebar .top-row, 로고 영역)은 네이비 그라데이션 유지 */
html[data-theme-variant] main > .top-row { background: var(--variant-card) !important; border-bottom-color: var(--variant-line) !important; }
html[data-theme-variant] .user-menu-panel { background: var(--variant-card) !important; border-color: var(--variant-line) !important; }
/* 달력 면 — 변형 톤에 맞춤 */
html[data-theme-variant] .cal-dows { background: var(--variant-card); border-bottom-color: var(--variant-line); }
html[data-theme-variant] .cal-bg { background: var(--bs-body-bg); border-right-color: var(--variant-line); }
html[data-theme-variant] .cal-month { border-color: var(--variant-line); }
html[data-theme-variant="sepia"] .cal-bg.other { background: #ece1c8; }
html[data-theme-variant="dim"] .cal-bg.other { background: #111a23; }
html[data-theme-variant="black"] .cal-bg.other { background: #0a0a0a; }
/* ===== 포인트 색(액센트) — 파랑(기본)/퍼플/그린/오렌지/로즈 =====
토큰의 역할을 셋으로 나눈다. 섞으면 다크에서 대비가 깨진다.
--hr-acc 꽉 찬 면(주 버튼·체크). 흰 글씨와 짝이므로 라이트·다크 모두 어두운 톤을 유지한다.
--hr-link 글자·링크·상태색. 다크에서는 밝은 톤으로 올린다.
--acc-rgb 테두리·선택 틴트·글로우. 다크에서는 밝은 톤.
전에는 --hr-acc 하나가 버튼 배경과 글자·테두리를 겸했고, 다크에서 이 값을 밝게 올렸다.
그래서 버튼 배경만 밝아지고 글자는 흰색으로 남아 대비가 2.0~3.4:1 까지 떨어졌다
(그린 2.01 · 오렌지 2.23 · 로즈 3.00 · 퍼플 3.36). 이제 다크에서는 --hr-acc 를 건드리지 않는다.
그린·오렌지는 라이트에서 흰 글씨가 3.45 / 3.58:1 이라 4.5 를 못 넘겼다. 한 단계로는
모자라(4.37 / 4.30) 두 단계 내려 6.11 / 5.31:1 로 맞췄다.
기본 파랑도 다른 액센트와 같은 방식으로 선언한다. 전에는 기본만 정의가 없어
var(--hr-acc, #1b6ec2) 폴백과 생 hex 로 흩어졌고, 그래서 액센트를 바꿔도
선택·호버·포커스는 파랑으로 남았다. */
html {
--hr-acc: #1b6ec2; --hr-acc-strong: #155ca2;
--hr-link: #006bb7; --acc-rgb: 27, 110, 194;
/* 얇은 1px 선(조직도 연결선·아바타 테두리) 전용 — --bs-border-color 보다 살짝 진해야 보인다 */
--hr-line: #c8c8c8;
/* 액센트 틴트·회색 면 위에 얹는 글자용. --hr-link 를 그대로 쓰면 자기 틴트 위에서
4.5:1 을 못 넘기는 액센트가 있다(로즈 3.79 · 오렌지 4.34). 한 단계 진한 톤을 따로 둔다. */
--hr-ink: #0b5aa0;
}
html[data-bs-theme="dark"] {
--hr-link: #74c0fc; --acc-rgb: 77, 171, 247;
--hr-line: #495057;
--hr-ink: var(--hr-link); /* 다크는 밝은 톤이라 틴트 위에서도 4.8~6.4:1 */
}
html[data-theme-variant] { --hr-line: var(--variant-line, #495057); }
html[data-accent="purple"] { --hr-acc: #7048e8; --hr-acc-strong: #5f3dc4; --bs-primary: #7048e8; --bs-primary-rgb: 112,72,232; --bs-link-color: #7048e8; --bs-link-hover-color: #5f3dc4; --bs-link-color-rgb: 112,72,232; --hr-link: #7048e8; --acc-rgb: 112,72,232; --hr-ink: #5f3dc4;}
html[data-bs-theme="dark"][data-accent="purple"] { --bs-link-color: #b197fc; --bs-link-hover-color: #d0bfff; --bs-link-color-rgb: 177,151,252; --hr-link: #b197fc; --acc-rgb: 151,117,250; }
html[data-accent="green"] { --hr-acc: #237032; --hr-acc-strong: #1e5c2a; --bs-primary: #237032; --bs-primary-rgb: 35,112,50; --bs-link-color: #237032; --bs-link-hover-color: #1e5c2a; --bs-link-color-rgb: 35,112,50; --hr-link: #237032; --acc-rgb: 35,112,50; --hr-ink: #1e5c2a;}
html[data-bs-theme="dark"][data-accent="green"] { --bs-link-color: #69db7c; --bs-link-hover-color: #8ce99a; --bs-link-color-rgb: 105,219,124; --hr-link: #69db7c; --acc-rgb: 81,207,102; }
html[data-accent="orange"] { --hr-acc: #bf400d; --hr-acc-strong: #a3360b; --bs-primary: #bf400d; --bs-primary-rgb: 191,64,13; --bs-link-color: #bf400d; --bs-link-hover-color: #a3360b; --bs-link-color-rgb: 191,64,13; --hr-link: #bf400d; --acc-rgb: 191,64,13; --hr-ink: #a3360b;}
html[data-bs-theme="dark"][data-accent="orange"] { --bs-link-color: #ffa94d; --bs-link-hover-color: #ffc078; --bs-link-color-rgb: 255,169,77; --hr-link: #ffa94d; --acc-rgb: 255,146,43; }
html[data-accent="rose"] { --hr-acc: #d6336c; --hr-acc-strong: #c2255c; --bs-primary: #d6336c; --bs-primary-rgb: 214,51,108; --bs-link-color: #d6336c; --bs-link-hover-color: #c2255c; --bs-link-color-rgb: 214,51,108; --hr-link: #d6336c; --acc-rgb: 214,51,108; --hr-ink: #a61e4d;}
html[data-bs-theme="dark"][data-accent="rose"] { --bs-link-color: #faa2c1; --bs-link-hover-color: #fcc2d7; --bs-link-color-rgb: 250,162,193; --hr-link: #faa2c1; --acc-rgb: 240,101,149; }
/* 부트스트랩 5.3 은 --bs-primary-rgb 를 테마와 무관하게 유지한다(꽉 찬 면에는 맞다).
그래서 .text-primary 는 다크 본문 2.98:1 · 세피아 3.76:1 밖에 안 된다 — 글자용 토큰으로 돌린다. */
.text-primary { color: var(--hr-link) !important; }
/* 다크에서는 액센트별 --hr-ink(라이트용 진한 톤)를 쓰면 어두운 틴트 위에서 1.1~2.4:1 이 된다.
html[data-accent=X] 와 html[data-bs-theme=dark] 가 명시도가 같아 뒤에 오는 액센트가 이기기 때문.
명시도를 한 단계 올려 다크에서는 항상 밝은 링크 톤을 쓰게 한다. */
html[data-bs-theme="dark"][data-accent] { --hr-ink: var(--hr-link); }
/* 세피아: 배경(#f3ead7)이 흰색보다 어두워 링크가 4.5 를 못 넘기는 액센트가 있다 → 글자 톤으로 통일 */
html[data-theme-variant="sepia"] { --hr-link: var(--hr-ink); }
html[data-accent] .btn-primary {
--bs-btn-bg: var(--hr-acc); --bs-btn-border-color: var(--hr-acc);
--bs-btn-hover-bg: var(--hr-acc-strong); --bs-btn-hover-border-color: var(--hr-acc-strong);
--bs-btn-active-bg: var(--hr-acc-strong); --bs-btn-active-border-color: var(--hr-acc-strong);
--bs-btn-disabled-bg: var(--hr-acc); --bs-btn-disabled-border-color: var(--hr-acc);
}
html[data-accent] .btn-outline-primary {
--bs-btn-color: var(--hr-acc); --bs-btn-border-color: var(--hr-acc);
--bs-btn-hover-bg: var(--hr-acc); --bs-btn-hover-border-color: var(--hr-acc);
--bs-btn-active-bg: var(--hr-acc); --bs-btn-active-border-color: var(--hr-acc);
}
html[data-accent] .form-check-input:checked { background-color: var(--hr-acc); border-color: var(--hr-acc); }
/* 애니메이션 효과 끄기(개인 설정) — 홈 무한 애니메이션 정지(승인대기 펄스 포함). */
html[data-reduce-motion] .leave-tile.tile-pulse,
html[data-reduce-motion] .leave-tile.tile-alert,
html[data-reduce-motion] .leave-tile-primary,
html[data-reduce-motion] .home-banner,
html[data-reduce-motion] .aline-node.current,
html[data-reduce-motion] #home-cal-list > li.cal-live,
html[data-reduce-motion] #cal-detail-list > li.cal-live,
html[data-reduce-motion] #cal-detail-list > li.cal-live::before { animation: none !important; }
/* 테마 메뉴 — 동작 효과 토글 */
.tp-motion { display: flex; align-items: center; gap: .45rem; font-size: .85rem; padding: .15rem 0; cursor: pointer; }
.tp-motion input { cursor: pointer; }
/* 인접 버튼 최소 간격 — 일반 흐름에서 버튼이 붙어 보이는 문제 완화(HR-381).
flex/btn-group/input-group/d-grid는 자체(gap 등)로 간격을 관리하므로 제외해 이중 간격·세로정렬 깨짐을 방지. */
.btn + .btn { margin-left: .5rem; }
.d-flex .btn + .btn,
.btn-group > .btn + .btn,
.btn-group-vertical > .btn + .btn,
.input-group .btn + .btn,
.d-grid .btn + .btn { margin-left: 0; }
/* ===== 액션 바(승인·반려·회수 등) — 모바일 오탭 방지 =====
버튼은 더블탭 확대 대기(약 300ms)를 없애고, 좁은 화면에선 iOS HIG/Android 권장
최소 터치 높이(44px)를 확보한다. 기본 .btn 은 약 38px 이라 손가락 탭이 자주 빗나간다. */
.btn { touch-action: manipulation; }
@media (max-width: 640.98px) {
.action-bar .btn {
min-height: 46px;
flex: 1 1 8rem; /* 남는 폭을 나눠 가져 타깃을 넓힘 */
font-size: 1rem;
padding-left: 1rem; padding-right: 1rem;
}
.action-bar .form-control { max-width: none !important; width: 100%; }
}
/* ===== 디자인 폴리시 (HR-390, design-review F1~F4) ===== */
/* F-2 빈 상태 공용 */
.empty-state-icon { font-size: 2rem; line-height: 1; opacity: .45; }
/* F-1 모바일 홈 배너 밀도 완화 */
@media (max-width: 576px) {
.home-banner { padding: 1rem 1rem; }
.home-banner-avatar { width: 48px; height: 48px; }
.home-banner .dday-chip { font-size: .76rem; padding: .22rem .55rem; }
.home-banner .btn { min-height: 40px; }
}
/* F-3 모바일 표 액션 탭 영역 확대 */
@media (max-width: 640.98px) {
.content .table .btn-link,
.content .table .btn-sm { padding-top: .35rem; padding-bottom: .35rem; }
}
/* ===== 표 줄바꿈 방지 — 좁은 컬럼에서 헤더('끝4자리'·'사용' 등)·버튼이 글자 단위로 꺾이지 않게(전 목록 공통) ===== */
.table > thead th { white-space: nowrap; }
.table .btn { white-space: nowrap; }
/* ===== 콘텐츠 폭 표준(3단계) — 페이지 간 폭 일관 + 브라우저 가로 공간 활용
sm=양식/짧은 폼(760), md=상세·카드 기본(1080), lg=표 중심(1400).
기존 560~1200px 인라인 혼재를 3단계로 통일하고 하한을 넓혔다. */
.content-sm { max-width: 760px; }
.content-md { max-width: 1080px; }
.content-lg { max-width: 1400px; }
/* ===== 스켈레톤 로딩 — 데이터 로딩 동안 페이지 골격 표시(콘텐츠 '팝' 방지) ===== */
.skel {
position: relative; overflow: hidden;
background: var(--bs-secondary-bg, #eceff3);
border-radius: 10px;
}
.skel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
animation: skel-slide 1.2s ease-in-out infinite;
}
[data-bs-theme="dark"] .skel::after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}
@keyframes skel-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
/* ===== 브레드크럼 — 깊은 화면의 현재 위치 표시 ===== */
.crumbs { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumb-sep { margin: 0 .35rem; }
.crumb-cur { color: var(--bs-body-color); }
/* ===== 모바일 하단 탭바 — 주요 5개 목적지 고정 접근(≤640px 전용) ===== */
.mtab { display: none; }
@media (max-width: 640.98px) {
.mtab {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
display: flex;
background: var(--variant-card, var(--bs-body-bg, #fff));
border-top: 1px solid var(--bs-border-color, #dee2e6);
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.mtab-item {
flex: 1 1 0; min-height: 52px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-size: .75rem; color: var(--bs-secondary-color); text-decoration: none;
}
.mtab-item.active { color: var(--bs-link-color, #1b6ec2); font-weight: 600; }
.mtab-ico { font-size: 1.15rem; line-height: 1; }
/* 하단 탭바에 본문이 가리지 않도록 여백 확보.
탭바 높이(52px) + 홈인디케이터 안전영역까지 더해야 마지막 버튼이 탭바에 먹히지 않는다. */
article.content { padding-bottom: calc(2.5rem + 64px + env(safe-area-inset-bottom)); }
}
/* ===== 커맨드 팔레트 (Ctrl+K) — 테마 변수 기반이라 라이트/다크/변형 모두 대응 ===== */
.cmdk-overlay {
position: fixed; inset: 0; z-index: 3000;
background: rgba(0, 0, 0, 0.45);
display: flex; justify-content: center; align-items: flex-start;
padding-top: 12vh;
}
.cmdk-box {
width: min(560px, 92vw);
background: var(--variant-card, var(--bs-body-bg, #fff));
color: var(--bs-body-color, #212529);
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.cmdk-input {
width: 100%; border: none; outline: none; background: transparent;
color: inherit; font-size: 1rem; padding: 14px 16px;
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.cmdk-item {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: none; text-align: left; cursor: pointer;
color: inherit; font-size: .9rem; padding: 9px 10px; border-radius: 8px;
}
.cmdk-item.active { background: var(--bs-secondary-bg, #f1f3f5); }
.cmdk-ico { width: 1.4em; text-align: center; flex: 0 0 auto; }
.cmdk-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-path { font-size: .75rem; color: var(--bs-secondary-color); flex: 0 0 auto; }
.cmdk-hint {
font-size: .75rem; color: var(--bs-secondary-color);
padding: 8px 14px; border-top: 1px solid var(--bs-border-color, #dee2e6);
}
/* ── AI Usage (시스템 관리 > AI Usage) ─────────────────────────────────────
Bootstrap 변수만 사용해 라이트/다크·테마 변형에서 동일하게 동작하도록 한다. */
.usage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.usage-tiles .tile {
background: var(--bs-body-bg); border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 12px; padding: 14px 16px;
}
.usage-tiles .tile.warn { border-color: rgba(var(--bs-danger-rgb), .45); }
.usage-tiles .t-label { font-size: .78rem; color: var(--bs-secondary-color); }
.usage-tiles .t-value { font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
.usage-tiles .tile.warn .t-value { color: var(--bs-danger); }
.usage-tiles .t-sub { font-size: .74rem; color: var(--bs-secondary-color); }
ul.insights { list-style: none; padding-left: 0; margin-bottom: 0; }
ul.insights li { position: relative; padding-left: 16px; margin-bottom: 6px; font-size: .9rem; line-height: 1.55; }
ul.insights li::before {
content: ''; position: absolute; left: 0; top: .62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--bs-primary);
}
ul.insights li.warn::before { background: var(--bs-danger); }
/* 가로 막대 — 이름 / 트랙 / 값 3열 */
.hbar { display: grid; grid-template-columns: 116px 1fr 76px; align-items: center; gap: 10px; padding: 3px 0; }
.hbar .h-name {
font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbar .h-val { font-size: .82rem; text-align: right; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.h-track { background: var(--bs-secondary-bg, #e9ecef); border-radius: 6px; height: 12px; overflow: hidden; }
.h-fill { height: 100%; background: var(--bs-primary); border-radius: 6px; }
.h-fill.critical { background: var(--bs-danger); }
/* 점검 항목 */
.flag-group { padding: 10px 0; border-top: 1px solid var(--bs-border-color, #dee2e6); }
.flag-group:first-of-type { border-top: none; padding-top: 0; }
.flag-head { font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip {
font-size: .78rem; padding: 3px 9px; border-radius: 999px;
background: var(--bs-secondary-bg, #f1f3f5); border: 1px solid var(--bs-border-color, #dee2e6);
}
.chips .chip b { font-weight: 600; }
/* 월별 추이 표 안의 미니 막대 */
.trend-table .mini { display: grid; grid-template-columns: 1fr 66px; align-items: center; gap: 8px; }
.trend-table .mini .mini-val { font-size: .8rem; text-align: right; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.trend-table .h-track { height: 10px; }
/* 기간 분석 — 개인/팀 × 월 매트릭스 */
.usage-matrix { font-size: .82rem; }
.usage-matrix th, .usage-matrix td { white-space: nowrap; }
.usage-matrix td.hm { text-align: right; font-variant-numeric: tabular-nums; }
.usage-matrix .sticky-col {
position: sticky; left: 0; z-index: 1;
background: var(--bs-body-bg); box-shadow: 1px 0 0 var(--bs-border-color, #dee2e6);
}
/* SVG 차트 */
.usage-chart svg { display: block; overflow: visible; }
/* 값·x축 라벨 — SVG 슬롯과 같은 개수의 균등 칸(inline style 로 칸 수를 지정) */
.usage-chart .chart-row { display: grid; align-items: baseline; }
.usage-chart .chart-row > span {
text-align: center; font-size: .72rem; color: var(--bs-secondary-color);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1px;
}
.usage-chart .chart-row .cv { font-variant-numeric: tabular-nums; }
.usage-chart .chart-row.axis > span { font-size: .74rem; }
.usage-chart .chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: .78rem; color: var(--bs-secondary-color); }
.usage-chart .chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.usage-chart .chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.usage-chart .chart-legend i.ln { height: 3px; border-radius: 2px; }
/* 판정 분포 스택 바 */
.stack-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bs-secondary-bg, #e9ecef); }
.stack-bar .seg { height: 100%; }
.stack-bar .seg-high { background: var(--bs-success); }
.stack-bar .seg-normal { background: var(--bs-primary); }
.stack-bar .seg-low { background: var(--bs-warning); }
.stack-bar .seg-unused { background: var(--bs-danger); }
/* 월별 판정 점(연속 저사용 표) */
.band-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.band-high { background: var(--bs-success); }
.band-normal { background: var(--bs-primary); }
.band-low { background: var(--bs-warning); }
.band-unused { background: var(--bs-danger); }
.band-none { background: var(--bs-secondary-bg, #dee2e6); border: 1px solid var(--bs-border-color, #ced4da); }
@media (max-width: 575.98px) {
.hbar { grid-template-columns: 92px 1fr 64px; gap: 7px; }
}
/* ── Markdown 에디터(Toast UI) 높이 조절 ────────────────────────────────
박스 오른쪽 아래를 끌어 높이를 조절한다. resize 는 overflow 가 visible 이 아닐 때만
동작하므로 hidden 을 함께 준다. 아래 12px 은 브라우저가 그리는 조절 손잡이 자리 —
이 여백이 없으면 손잡이가 에디터의 모드 전환 탭(마크다운/WYSIWYG) 위에 겹친다. */
.hr-editor-box {
resize: vertical;
overflow: hidden;
min-height: 200px;
padding-bottom: 12px;
box-sizing: border-box;
}
.hr-editor-box > .hr-editor-inner { height: 100%; }
/* ── 모바일 — 문서 상단 액션 버튼과 제목 ───────────────────────────────────
좁은 화면에서 제목 옆에 버튼이 여러 개 붙으면 버튼이 짜부라져 글자가 한 자씩 세로로
쪼개지고("인/쇄//PDF"), 개수가 많으면 오른쪽 버튼이 화면 밖으로 잘려 나간다.
→ 버튼 묶음을 통째로 다음 줄로 내리고, 라벨을 숨겨 아이콘만 남긴다.
라벨을 숨겨도 각 버튼에 title 이 있어 길게 누르면 무슨 버튼인지 확인된다. */
.doc-actions .btn { white-space: nowrap; }
@media (max-width: 640.98px) {
.doc-actions {
width: 100%;
margin-left: 0 !important; /* ms-auto 해제 — 제목과 같은 줄에서 밀려나지 않게 */
}
.doc-actions .btn-txt { display: none; }
.doc-actions .btn { padding-inline: .6rem; font-size: 1.05rem; line-height: 1.25; }
/* 페이지 제목 — 기본 h1(2.5rem)은 모바일에서 서너 줄로 늘어져 화면을 잡아먹는다 */
article.content h1 { font-size: 1.45rem; }
}
/* ── 결재 문서 상단 메타 — 상신자 강조 ─────────────────────────────────────
결재자가 문서를 열고 가장 먼저 찾는 것이 "누가 올렸나"인데, 유형·날짜와 함께
흐린 한 문장에 묻혀 있어 눈에 띄지 않았다. 상신자만 칩으로 떼어 낸다. (HR-517) */
.doc-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.doc-requester {
display: inline-flex; align-items: baseline; gap: .3rem;
background: rgba(var(--acc-rgb), .09); border: 1px solid rgba(var(--acc-rgb), .35); border-radius: 999px;
padding: 1px 10px;
}
.doc-requester .req-label { font-size: .7rem; font-weight: 700; color: var(--hr-ink); }
.doc-requester .req-name { font-size: 1rem; color: var(--bs-body-color); }
.doc-requester .req-title { font-size: .75rem; color: #6c757d; }
[data-bs-theme="dark"] .doc-requester .req-title { color: #adb5bd; }
/* 상신 노드도 결재자 노드와 같은 폭 기준을 갖도록(이름이 강조 슬롯으로 옮겨졌다) */
.aline-node.start { min-width: 92px; }
/* ===== 인사기록카드 탭 (HR-520) ===== */
/* §4 보유 기술은 라벨 폭을 맞춰 6줄이 표처럼 읽히게 한다 */
.skill-label { flex: 0 0 215px; text-align: right; color: #495057; }
/* 반복 섹션 표 — 좁은 화면에서는 표가 가로 스크롤되고, 셀 입력이 눌리지 않게 최소 폭을 준다 */
.rc-table th { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.rc-table td { padding: .3rem .4rem; }
[data-bs-theme="dark"] .skill-label { color: #ced4da; }
@media (max-width: 640.98px) {
.skill-label { flex: 1 1 100%; text-align: left; }
.card-body .col-12.d-flex { flex-wrap: wrap; }
}
/* ===== 선택·포커스 테두리 — 표면 규칙보다 뒤에서 이겨야 한다 =====
.rcard.focus(0,2,0) 는 [data-bs-theme="dark"] .rcard(0,2,0) 와 명시도가 같고
html[data-theme-variant] .rcard(0,2,1) 에는 진다. 그래서 다크·변형에서 선택 테두리가
중립 회색으로 되돌아가며 액센트를 잃었다(다크 1.89:1 · 세피아 1.29:1).
표면(배경) 규칙은 그대로 두고, 테두리만 파일 맨 끝에서 다시 잡아 준다. */
html .org-box.selected,
html .org-row.selected,
html .aline-node.start,
html .rcard.focus,
html .rcard:hover,
html .org-box:hover { border-color: var(--hr-link); }
/* ===== 정렬 가능한 표 머리글 =====
부트스트랩 4 의 reboot 에는 [role="button"] { cursor: pointer } 가 있었지만 5.3 에서 빠졌다.
그래서 직원 목록·사용 현황·인사기록카드 현황·소프트웨어 제품의 정렬 머리글이
눌러지는 것처럼 보이지 않았다. 한 곳에서 잡아 준다. */
th[role="button"] { cursor: pointer; user-select: none; }
th[role="button"]:hover { background-color: rgba(var(--acc-rgb), .08); }
/* 인사기록카드 작성 현황의 '총 경력' — 숫자 폭을 고정해 자릿수가 세로로 맞게 보인다.
(기본 비례 숫자는 1 이 좁아 23년/11년 처럼 자리가 어긋나 보인다) */
.career-total { font-variant-numeric: tabular-nums; }
/* 홈 "회사 일정" 날짜·시간 칸 (HR-536) — 행마다 제목이 같은 x 에서 시작하게 한다.
Pretendard 는 숫자가 비례폭이라 "09-09"(157.5px)가 "09-11"(152.1px)보다 넓다. 칸 폭이 모자라면
flex 항목이 min-content 까지 늘어나(flex-shrink:0 이라 줄지 않고 min-width:auto 로 커짐)
날짜 숫자에 따라 제목 시작점이 좌우로 흔들렸다.
tabular-nums 로 숫자 폭을 고정하고, 가장 긴 "MM-dd (요일)~MM-dd (요일)"
(Pretendard 160.0 / Malgun 157.6 / Segoe 152.8px) 보다 넉넉한 10.5rem 을 줘서
웹폰트가 시스템 서체로 강등돼도 칸이 늘어나지 않는다. rem 이라 글자 크기와 같이 커진다. */
.cal-when { flex: 0 0 10.5rem; font-variant-numeric: tabular-nums; }