/* 가빈 오피스 공통 스킨 v2 — 색은 전부 이 파일의 CSS 변수로만 정의 (하드코딩 금지)
   스킨 5종: skin_d(기본)/skin_a/skin_b/skin_c/night — <html data-theme="...">, 계정별 저장 */

@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}

/* ── 공통(주간 기본) + 스킨 D ── */
:root, [data-theme="skin_d"] {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-border: #D3E2EE;
  --primary: #3BA1E3;
  --primary-fg: #FFFFFF;
  --primary-shadow: 0 2px 6px rgba(59,161,227,.35);
  --text: #1C2B3A;
  --muted: #5A6B7C;
  --faint: #8A9AAB;
  --border: #D8E4EE;
  --btn-border: #C4D6E4;          /* 보조 버튼 테두리 (1.5px) */
  --btn-sec-fg: #40566B;          /* 보조 버튼 글자 */
  --btn-dis-border: #E4EBF2;      /* 비활성 */
  --btn-dis-fg: #A9B7C4;
  --ok-fg: #1E7A4E;    --ok-bg: #E3F4EA;
  --warn-fg: #9A6A1B;  --warn-bg: #FBF0DC;
  --danger-fg: #A83232; --danger-bg: #FCE7E7;
  --chip-fg: #1E6EA8;  --chip-bg: #E7F3FC;
  --chip2-bg: #E7F3FC; --chip2-border: #9CCBEE; --chip2-fg: #1E6EA8;  /* 파란 칩 공통 */
  --shadow: 0 1px 3px rgba(28,43,58,.09), 0 4px 12px rgba(59,161,227,.10);
  --shadow-hover: 0 3px 8px rgba(28,43,58,.13), 0 8px 22px rgba(59,161,227,.15);
  --board-base: #A9D3F2; --board-base2: #4E8CCB;
  --board-extra-strong: #E8B15C; --board-off: var(--danger-bg);
  --hl-cream: #FFF8E1;
  --wm-color: #1C2B3A; --wm-opacity: 0.035;
  --focus-ring: rgba(59,161,227,.25);
  --row-hover: #E9F1F8;
  --grad-a: #F4F8FC; --grad-b: #E7F3FC;
  /* 사이드바 (D) */
  --sb-bg: #E9F1F8; --sb-border: #D3E2EE; --sb-fg: #4E6478;
  --sb-active-bg: #FFFFFF; --sb-active-fg: #1E6EA8; --sb-accent: #3BA1E3;
  --sb-active-shadow: 0 1px 4px rgba(28,43,58,.12);
}

[data-theme="skin_a"] {
  --bg: #F4F8FC;
  --sb-bg: #152435; --sb-border: #24374C; --sb-fg: #9FB2C4;
  --sb-active-bg: #1D3550; --sb-active-fg: #FFFFFF; --sb-accent: #3BA1E3;
  --sb-active-shadow: none;
}

[data-theme="skin_b"] {
  --bg: #F4F8FC;
  --sb-bg: #FFFFFF; --sb-border: #DFE9F2; --sb-fg: #5A6B7C;
  --sb-active-bg: #E7F3FC; --sb-active-fg: #1E6EA8; --sb-accent: #3BA1E3;
  --sb-active-shadow: none;
}

[data-theme="skin_c"] {
  --bg: #FFFFFF; --card: #F7FAFD;
  --sb-bg: linear-gradient(180deg, #3BA1E3, #2E8CC9);
  --sb-border: #2E8CC9; --sb-fg: #D9EDFA;
  --sb-active-bg: rgba(255,255,255,.22); --sb-active-fg: #FFFFFF; --sb-accent: #FFFFFF;
  --sb-active-shadow: none;
}

/* ── 야간 (기존 가이드 유지) ── */
[data-theme="night"] {
  --bg: #101B26;
  --card: #1A2836;
  --card-border: #223446;
  --primary: #5CB5EC;
  --primary-fg: #0D1721;
  --primary-shadow: 0 2px 6px rgba(92,181,236,.35);
  --text: #E8EEF4;
  --muted: #8FA5B8;
  --faint: #6B8095;
  --border: #223446;
  --btn-border: #33475C;
  --btn-sec-fg: #8FA5B8;
  --btn-dis-border: #223446;
  --btn-dis-fg: #4E6478;
  --ok-fg: #6FD3A0;    --ok-bg: #16321F;
  --warn-fg: #E5B45C;  --warn-bg: #33290F;
  --danger-fg: #EF8A8A; --danger-bg: #391A1A;
  --chip-fg: #7CC4F0;  --chip-bg: #14293C;
  --chip2-bg: #14293C; --chip2-border: #33475C; --chip2-fg: #7CC4F0;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(92,181,236,.06);
  --shadow-hover: 0 3px 8px rgba(0,0,0,.5), 0 8px 22px rgba(92,181,236,.12);
  --board-base: #2E5F8F; --board-base2: #4E8CCB;
  --board-extra-strong: #8A6A2C; --board-off: #391A1A;
  --hl-cream: #2E2A1C;
  --wm-color: #E8EEF4; --wm-opacity: 0.035;
  --focus-ring: rgba(92,181,236,.25);
  --row-hover: #14202E;
  --grad-a: #101B26; --grad-b: #14293C;
  --sb-bg: #0B141D; --sb-border: #1B2C3D; --sb-fg: #8FA5B8;
  --sb-active-bg: #223446; --sb-active-fg: #E8EEF4; --sb-accent: #5CB5EC;
  --sb-active-shadow: none;
}

/* ── 기본 골격 ── */
html, body { background: var(--bg); color: var(--text); }
body { font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
       font-size: 15px; }
.num-key { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.text-muted, .form-text { color: var(--muted) !important; }
.text-secondary { color: var(--faint) !important; }
hr { border-color: var(--border); opacity: 1; }

/* ── 카드: 테두리 필수 + 2겹 그림자로 배경과 구분 ── */
.card { background: var(--card); border: 1px solid var(--card-border);
        border-radius: 12px; box-shadow: var(--shadow); color: var(--text);
        transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card-header { background: transparent; border-color: var(--card-border); }

/* ── 버튼 규칙: 화면당 주 동작 1개 = 주색 채움 / 나머지 = 보조 테두리 ── */
.btn { border-radius: 10px; }
.btn-primary { background: var(--primary); border: none; color: var(--primary-fg);
               box-shadow: var(--primary-shadow); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary);
               color: var(--primary-fg); filter: brightness(.93); }
/* 보조 동작 — success/danger/secondary/outline 계열 전부 보조 스타일 (임의 배색 제거) */
.btn-sec, .btn-secondary, .btn-success, .btn-danger,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-light,
.btn-outline-success, .btn-outline-warning, .btn-outline-danger {
  background: var(--card); border: 1.5px solid var(--btn-border);
  color: var(--btn-sec-fg); }
.btn-sec:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover,
.btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-danger:hover {
  background: var(--chip-bg); border-color: var(--btn-border); color: var(--chip-fg); }
/* 보조 중 상태 의미는 글자색만 */
.btn-outline-success { color: var(--ok-fg); }
.btn-outline-warning { color: var(--warn-fg); }
.btn-outline-danger, .btn-danger { color: var(--danger-fg); }
.btn-link { color: var(--primary); background: none; border: none; }
.btn:disabled { background: var(--card); border: 1.5px solid var(--btn-dis-border);
                color: var(--btn-dis-fg); box-shadow: none; opacity: 1; }
.btn-primary:disabled { background: var(--card); }
/* 긴급 팝업만 예외 — 강조 예산 */
#urgentPop .btn-danger { background: var(--danger-fg); border: none; color: var(--card); }

/* ── 상태 뱃지/칩 ── */
.badge { border-radius: 8px; }
.badge.text-bg-success { color: var(--ok-fg) !important; background: var(--ok-bg) !important; }
.badge.text-bg-warning { color: var(--warn-fg) !important; background: var(--warn-bg) !important; }
.badge.text-bg-danger { color: var(--card) !important; background: var(--danger-fg) !important; }
.badge.text-bg-info, .badge.text-bg-primary { color: var(--chip-fg) !important;
                                              background: var(--chip-bg) !important; }
.badge.text-bg-secondary { color: var(--muted) !important; background: var(--bg) !important;
                           border: 1px solid var(--border); }
.badge.text-bg-light { color: var(--muted) !important; background: var(--bg) !important;
                       border-color: var(--border) !important; }
.text-success { color: var(--ok-fg) !important; }
.text-warning { color: var(--warn-fg) !important; }
.text-danger { color: var(--danger-fg) !important; }
.text-primary, .text-info { color: var(--chip-fg) !important; }

/* 파란 칩 공통 — 강수 도시·고정 카드·활성 탭 */
.chip-blue { background: var(--chip2-bg) !important; color: var(--chip2-fg) !important;
             border: 1px solid var(--chip2-border) !important; }

/* ── 폼·표·리스트·모달·탭 ── */
.form-control, .form-select { background: var(--card); color: var(--text);
                              border-color: var(--btn-border); border-radius: 10px; }
.form-control:focus, .form-select:focus { background: var(--card); color: var(--text);
                              border-color: var(--primary);
                              box-shadow: 0 0 0 .2rem var(--chip-bg); }
.form-control::placeholder { color: var(--faint); }
.input-group-text { background: var(--bg); color: var(--muted); border-color: var(--btn-border); }
.table { color: var(--text); border-color: var(--border); }
.table > :not(caption) > * > * { background: transparent; color: var(--text);
                                 border-color: var(--border); }
.table-light > * { background: var(--bg) !important; color: var(--muted) !important; }
.table-danger > * { background: var(--danger-bg) !important; color: var(--danger-fg) !important; }
.table-primary > * { background: var(--chip2-bg) !important; color: var(--chip2-fg) !important; }
.list-group-item { background: var(--card); color: var(--text); border-color: var(--border); }
.list-group-item-action:hover { background: var(--chip-bg); color: var(--text); }
.modal-content { background: var(--card); color: var(--text); border-radius: 12px;
                 border: 1px solid var(--card-border); }
.modal-header, .modal-footer { border-color: var(--border); }
[data-theme="night"] .btn-close { filter: invert(1) grayscale(1); }
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--muted); }
.nav-tabs .nav-link.active { background: var(--chip2-bg); color: var(--chip2-fg);
                             border: 1px solid var(--chip2-border); }
.alert-danger { color: var(--danger-fg); background: var(--danger-bg); border-color: var(--border); }
.alert-info { color: var(--chip-fg); background: var(--chip-bg); border-color: var(--border); }
.alert-success { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--border); }
.border, .border-bottom, .border-top, .border-start, .border-end { border-color: var(--border) !important; }

/* ── 사이드바 (스킨 변수 기반) ── */
.sidebar { background: var(--sb-bg); color: var(--sb-fg);
           border-right: 1px solid var(--sb-border);
           transition: width .15s ease; }
.sidebar .brand { color: var(--sb-fg); border-color: var(--sb-border);
                  text-decoration: none; display: block; }
[data-theme="skin_a"] .sidebar .brand, [data-theme="skin_c"] .sidebar .brand,
[data-theme="night"] .sidebar .brand { color: var(--sb-active-fg); }
.sidebar a, .sidebar span.menu { color: var(--sb-fg); border-left: 3px solid transparent; }
.sidebar a.active { background: var(--sb-active-bg); color: var(--sb-active-fg);
                    border-left: 3px solid var(--sb-accent);
                    box-shadow: var(--sb-active-shadow); }
.sidebar a:hover { background: var(--sb-active-bg); color: var(--sb-active-fg); }
.sidebar span.menu.disabled { color: var(--btn-dis-fg); }
.sidebar .bottom { border-color: var(--sb-border); }
.sidebar .btn { background: transparent; border: 1.5px solid var(--sb-border);
                color: var(--sb-fg); }
.sidebar .btn:hover { background: var(--sb-active-bg); color: var(--sb-active-fg);
                      border-color: var(--sb-border); }
/* 접기 */
.layout.sb-collapsed .sidebar { width: 56px; }
.layout.sb-collapsed .sidebar .ml, .layout.sb-collapsed .sidebar .brand-text,
.layout.sb-collapsed .sidebar .who, .layout.sb-collapsed .sidebar form { display: none; }
.layout.sb-collapsed .sidebar a, .layout.sb-collapsed .sidebar span.menu {
  padding-left: 14px; padding-right: 8px; }
.sidebar .mi { display: inline-block; width: 22px; }
.sidebar .sb-badge { font-size: .7rem; }
/* 스와치 */
.skin-pop { position: absolute; bottom: 52px; left: 12px; display: none;
            background: var(--card); border: 1px solid var(--card-border);
            border-radius: 10px; box-shadow: var(--shadow-hover); padding: 8px;
            z-index: 1100; }
.skin-pop.open { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
          border: 2px solid var(--border); }
.swatch.sel { border-color: var(--primary); }
.sw-d { background: #E9F1F8; }
.sw-a { background: #152435; }
.sw-b { background: #FFFFFF; border-color: #DFE9F2; }
.sw-c { background: linear-gradient(180deg, #3BA1E3, #2E8CC9); }
.sw-n { background: #0B141D; }

/* ── 티커 바: 흰 카드 + 왼쪽 4px 주색 포인트 + 신호등 칩 ── */
.light-bar { background: var(--card); border: 1px solid var(--card-border);
             border-left: 4px solid var(--primary); border-radius: 10px;
             box-shadow: var(--shadow); }
.light-badge-short { animation: light-pulse 1.6s infinite; }
@keyframes light-pulse { 50% { opacity: .55; } }
.ticker-text { color: var(--chip-fg); font-weight: 500; }

/* ── 변경 뱃지 (강조 예산) ── */
.badge-changed { background: var(--danger-fg); color: var(--card);
                 animation: badge-blink 2.4s infinite; }
@keyframes badge-blink { 50% { opacity: .55; } }

/* ── 스케줄 보드 ── */
.board th, .board td { border-color: var(--border) !important; }
.board td.name { background: var(--card); }
.cell-work { background: var(--board-base); }
.cell-work2 { background: var(--board-base2); }
.cell-extra { background: var(--board-extra-strong); }
.cell-off { background: var(--board-off); }
.sum-row td { background: var(--bg); }
.hourmark { border-left: 2px solid var(--btn-border) !important; }

/* ── 미니 달력: 숫자 보조색, 오늘=주색 채움, 출근일=초록 배경 ── */
.mini-cal td { border-color: var(--border); color: var(--muted); }
.mini-cal .present { background: var(--ok-bg); }
.mini-cal .today { background: var(--primary); color: var(--primary-fg); border-radius: 6px; }
.mini-cal .off-day { background: var(--bg); color: var(--faint); }
.mini-cal .late-dot::after { color: var(--warn-fg); }

/* ── 관리자 홈 타일·칩 ── */
.chip { background: var(--chip-bg); color: var(--chip-fg); }
.tile { border: 1px solid var(--card-border); background: var(--card); color: var(--text);
        border-radius: 10px; transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.t-working { background: var(--ok-bg); border-color: var(--ok-bg); }
.t-break { background: var(--warn-bg); border-color: var(--warn-bg); }
.t-away { background: var(--danger-bg); border-color: var(--danger-bg); }
.t-not_in { background: var(--card); border-color: var(--danger-fg); border-style: dashed; }
.t-done { background: var(--bg); color: var(--muted); }
.t-off { background: var(--bg); color: var(--faint); }

/* ── 카드 벽 ── */
.card-tile { border: 1px solid var(--card-border); background: var(--card); border-radius: 10px;
             box-shadow: var(--shadow);
             transition: transform .15s, box-shadow .15s; }
.card-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card-tile.pinned { background: var(--chip2-bg); border-color: var(--chip2-border); }
/* 특정인에게만 보낸 공지 — 받는 사람 화면에서 좌측 파란 띠로 갈라 보인다 (2026-08-30) */
.notice-mine { border-left: 4px solid var(--primary); padding-left: 8px;
               background: linear-gradient(90deg, rgba(59,161,227,.08), transparent); }

/* 홈에 꽂은 내 메모 — 회사 카드와 한눈에 갈리게 왼쪽에 메모 색 띠 (2026-08-30) */
.card-tile.memo-tile { border-left: 5px solid var(--mc, #FFF4C2); }

/* ── 기타 ── */
.member-item.selected { background: var(--chip-bg); }
.member-item.retired { color: var(--faint); }
.member-item:hover { background: var(--chip-bg); }
.section-title { color: var(--muted); border-color: var(--border) !important; }
.placeholder-box { border: 1px dashed var(--btn-dis-border); color: var(--btn-dis-fg);
                   border-radius: 10px; }
.doc { background: var(--card); border: 1px solid var(--card-border); }
.wage-history { color: var(--muted); }
.timer { font-variant-numeric: tabular-nums; }

/* 그리드 카드: hover transform 이 sticky 를 깨므로 리프트 제거 */
.card.no-lift:hover { transform: none; box-shadow: var(--shadow); }

/* ── 워터마크: 화면당 3~4개(간격 500px+), 농도 0.035, 클릭 무방해, 모달 위 ── */
.watermark-layer { position: fixed; inset: 0; z-index: 3000; pointer-events: none;
                   opacity: var(--wm-opacity); }

/* ═══ 아이콘 체계 — Tabler Icons 로컬 스프라이트 전용.
   이후 화면의 모든 아이콘은 이 세트만 사용한다 (이모지·타 아이콘 세트 금지). ═══ */
.tbi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
       stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* ═══ 디테일 규격 (전역) ═══ */
/* 포커스 링 */
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible,
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important; }
/* 입력창: radius 8 · 높이 40 · placeholder --faint */
.form-control, .form-select { border-radius: 8px; min-height: 40px; }
textarea.form-control { min-height: 80px; }
/* 버튼 누름감 */
.btn:active { transform: scale(.98); }
/* 빈 상태 컴포넌트 */
.empty-state { text-align: center; color: var(--faint); padding: 18px 0; font-size: .9rem; }
.empty-state .tbi { width: 24px; height: 24px; display: block; margin: 0 auto 6px;
                    stroke: var(--faint); }
/* 제목 계층: 페이지 18/600 · 카드 15/600 · 보조 라벨 13 --muted */
main > h5, main .page-title, .content h5 { font-size: 18px; font-weight: 600; }
.card h6 { font-size: 15px; font-weight: 600; }
.form-label { font-size: 13px; color: var(--muted); }
/* 표: 헤더 13 --faint · 행 호버 한 톤 · 셀 세로 패딩 10px */
.table thead th { font-size: 13px; color: var(--faint); font-weight: 500; }
.table tbody tr:hover > * { background: var(--row-hover) !important; }
.table > :not(caption) > * > * { padding-top: 10px; padding-bottom: 10px; }
/* 스크롤바 (웹킷) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--btn-border); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
/* 선택 영역 */
::selection { background: rgba(59,161,227,.22); }
/* 전환 일관 (.15s ease) */
.btn, a, .form-control, .form-select, .card, .tile, .card-tile, .swatch,
.list-group-item, .member-item, .badge, .sidebar {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease, filter .15s ease; }

/* ── 자체 모달 (브라우저 기본 alert/confirm/prompt 대체) ── */
.ui-overlay { position: fixed; inset: 0; background: rgba(28,43,58,.45);
              z-index: 2500; display: flex; align-items: center; justify-content: center; }
[data-theme="night"] .ui-overlay { background: rgba(0,0,0,.6); }
.ui-modal { background: var(--card); border: 1px solid var(--card-border);
            border-radius: 12px; box-shadow: var(--shadow-hover);
            max-width: 420px; width: 92%; padding: 20px; color: var(--text); }
.ui-modal h6 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.ui-modal .ui-body { font-size: .92rem; color: var(--muted); white-space: pre-wrap; }
.ui-modal .ui-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ui-cal { width: 100%; }
.ui-cal td { width: 14.2%; height: 30px; text-align: center; font-size: .82rem;
             color: var(--muted); border: 1px solid var(--border); }
.ui-cal td.hd { color: var(--faint); font-size: .75rem; border: none; }
.ui-cal td.dy { cursor: pointer; }
.ui-cal td.dy:hover { background: var(--row-hover); }
.ui-cal td.dy.sel { background: var(--primary); color: var(--primary-fg); border-radius: 6px; }
.ui-preview { color: var(--chip-fg); font-weight: 500; }

/* ── 사이드바 접기 버튼(로고 줄 우측) + 접힘 점 배지 ── */
.sb-collapse-btn { width: 22px; height: 22px; border: 1px solid var(--btn-border);
                   background: var(--card); color: var(--sb-fg); border-radius: 6px;
                   padding: 0; display: inline-flex; align-items: center;
                   justify-content: center; flex-shrink: 0; }
.sb-collapse-btn .tbi { width: 14px; height: 14px; vertical-align: 0; }
.sidebar a { position: relative; }
.layout.sb-collapsed .sb-badge { position: absolute; top: 6px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%; padding: 0 !important;
  font-size: 0 !important; background: var(--danger-fg) !important; }

/* ── 자료 카드 펼침 · [크게 보기] (자료실·홈 공용, 2026-08-28) ────────────────
   펼침은 목록 영역 가로 전체 폭, 문서는 뷰포트 높이의 대부분을 쓴다.
   [크게 보기]는 사이드바를 침범하지 않고 본문 영역 안에서 상하좌우 3% 여백만 남긴다. */
.card-expand { grid-column: 1 / -1; border: 1px solid var(--primary); border-radius: 8px;
               padding: 12px 14px; background: var(--card); }
/* 상단 고정 펼침 (2026-08-28) — 어느 타일을 눌러도 목록 맨 위 한자리에서 열린다.
   격자 밖 전용 슬롯에 들어가므로 grid-column 대신 자체 폭·아래 여백을 갖는다. */
.card-expand.pinned-top { width: 100%; margin-bottom: 10px; }
.card-expand .ce-head { display: flex; justify-content: space-between; align-items: center;
                        gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card-expand .ce-title { font-weight: 700; font-size: .95rem; }
.card-expand .ce-body { font-size: .88rem; }
.card-expand .ce-body.txt { max-height: 60vh; overflow: auto; }
/* 문서(이미지·PDF) — 화면 높이의 대부분. 내부 스크롤로 전 쪽 열람. */
.card-expand .ce-body.doc { height: 72vh; min-height: 420px; overflow: hidden;
                            background: var(--row-hover); border-radius: 6px; }
.card-expand .ce-body.doc iframe, .card-expand .ce-body.doc object {
                            width: 100%; height: 100%; border: 0; display: block; }
.card-expand .ce-body.doc img { width: 100%; height: 100%; object-fit: contain; }
.card-expand .ce-body img { max-width: 100%; }
.card-expand .ce-meta { font-size: .75rem; color: var(--faint); margin-top: 6px; }

.doc-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(0,0,0,.45); }
.doc-panel { position: fixed; background: var(--card); border-radius: 10px; display: flex;
             flex-direction: column; overflow: hidden;
             box-shadow: 0 10px 40px rgba(0,0,0,.32); }
.doc-panel .dp-head { display: flex; align-items: center; justify-content: space-between;
                      gap: 10px; padding: 9px 14px; flex: 0 0 auto;
                      border-bottom: 1px solid var(--border); }
.doc-panel .dp-title { font-weight: 700; font-size: .95rem; }
.doc-panel .dp-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--row-hover); }
.doc-panel .dp-body iframe, .doc-panel .dp-body object {
                      width: 100%; height: 100%; border: 0; display: block; }
/* 이미지는 창에 맞추되 **원본보다 키우지 않는다** (2026-08-29) — 작은 그림을 꽉 채우면
   흐려져서 오히려 안 보였다. 원본이 크면 창 안으로 줄이고, 작으면 원본 크기 그대로. */
.doc-panel .dp-body:has(> img) { display: flex; align-items: center; justify-content: center; }
.doc-panel .dp-body img { width: auto; height: auto; max-width: 100%; max-height: 100%;
                          object-fit: contain; display: block; margin: auto; }
.doc-panel .dp-body .dp-text { padding: 20px 24px; background: var(--card); min-height: 100%; }

/* ── 상단 날씨 스트립 (2026-08-28 강수 중심 개편) ──────────────────────────
   강수 있는 도시만 칩으로 뜬다. 비 = 파랑 계열, 눈·진눈깨비 = 보라 계열,
   강도 3단계로 진하기가 올라간다. 야간 스킨에서도 읽히도록 각 단계를 따로 정의. */
.w-strip { row-gap: 4px; }
.w-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
          border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.5;
          border: 1px solid transparent; white-space: nowrap; }
.w-chip .tbi { width: 13px; height: 13px; }
.w-chip .w-mm { font-weight: 700; }
.w-chip .w-t { font-weight: 400; opacity: .75; }
/* 비 — 파랑 3단계 */
.w-rain-1 { background: #E3F0FC; color: #1F5C96; border-color: #C2DDF5; }
.w-rain-2 { background: #BEDDF8; color: #14456F; border-color: #93C4EC; }
.w-rain-3 { background: #2F7CC0; color: #FFFFFF; border-color: #2F7CC0; }
/* 눈·진눈깨비 — 보라 3단계 */
.w-snow-1 { background: #EFE8FA; color: #5B3E96; border-color: #DCCEF3; }
.w-snow-2 { background: #DCC9F4; color: #452C77; border-color: #C3A6E9; }
.w-snow-3 { background: #6B47B8; color: #FFFFFF; border-color: #6B47B8; }
/* 수도권 강조 — 콜 최다 권역. 테두리를 굵게 + 좌측 표식 */
.w-chip.w-cap { border-width: 2px; box-shadow: inset 3px 0 0 currentColor; padding-left: 10px; }
/* 전국 강수 0 — 줄을 숨기지 않고 요약 한 칸으로 */
.w-none { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
          border-radius: 999px; font-size: .78rem; color: var(--muted);
          background: var(--row-hover); border: 1px solid var(--border); }
.w-none .tbi { width: 14px; height: 14px; color: #E0A83C; }
[data-theme="night"] .w-rain-1 { background: #16324B; color: #9CCBF0; border-color: #234A6B; }
[data-theme="night"] .w-rain-2 { background: #1D4970; color: #BEE0FA; border-color: #2C6699; }
[data-theme="night"] .w-rain-3 { background: #3E8FD4; color: #06213A; border-color: #3E8FD4; }
[data-theme="night"] .w-snow-1 { background: #2B2244; color: #C4AEEC; border-color: #3E3163; }
[data-theme="night"] .w-snow-2 { background: #3E2F66; color: #DCC9F4; border-color: #55408C; }
[data-theme="night"] .w-snow-3 { background: #8E6BD8; color: #1B1030; border-color: #8E6BD8; }

/* ── F-6 (2026-08-30) 좁은 폭(휴대폰)에서 사이드바 자동 접힘 ──
   종전엔 390px 폭에서도 사이드바 210px 이 그대로라 본문이 180px(안쪽 132px)뿐이었고,
   근무표·자료실·급여·근태 확인함이 화면 밖으로 밀렸다. 768px 미만이면 [접기]와 같은 모양으로
   자동 접힌다(PC 폭에는 아무 영향 없음). 규칙은 .layout.sb-collapsed 와 동일하게 둔다. */
@media (max-width: 767.98px) {
  .layout .sidebar { width: 56px; }
  .layout .sidebar .ml, .layout .sidebar .brand-text, .layout .sidebar .who, .layout .sidebar form { display: none; }
  .layout .sidebar a, .layout .sidebar span.menu { padding-left: 14px; padding-right: 8px; }
  .layout .sidebar .bottom { padding: 10px 6px; text-align: center; }
  .layout .sidebar .logout-form { display: block !important; }
  .layout .sidebar .logout-text { display: none; }
  .layout .sidebar .logout-icon { display: inline-block; }
  .layout .sidebar .brand-row { padding: 16px 17px; justify-content: center; }
  .layout .sb-badge { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
    padding: 0 !important; font-size: 0 !important; background: var(--danger-fg) !important; }
  .layout .content { padding: 12px; }
}


/* 자료 카드 아이콘 색(2026-09-04 시안 v5) — 선만 유형별 색·굵기 절반(2→1). 자물쇠·별 등 불변.
   위치별 기존 .tbi 색 규칙(타일·목록의 회청)이 더 구체적이라 눌리므로 ci-card 한정 !important. */
.ci-card { stroke-width: 1 !important; }
.ci-card.ci-pdf { color: #C2467A !important; }
.ci-card.ci-img { color: #2E9E5B !important; }
.ci-card.ci-vid { color: #7A5FC0 !important; }
.ci-card.ci-txt { color: #2277BB !important; }

/* ── 가이드 뷰어 문서 내 검색 (2026-09-10 시안 v1) ─────────────────────────
   검색칸·화살표·개수는 머리줄 [다운로드] 왼쪽. 모든 일치는 옅은 노랑,
   지금 보고 있는 하나만 진한 주황. 좌측 목차에는 검색어가 든 항목에만 작은 점. */
.doc-panel .gv-sbox { flex: 0 0 auto; }
.doc-panel .gv-sinput { width: 190px; border: 1px solid var(--card-border, #b9cdea);
                        border-radius: 7px; padding: 4px 9px; font-size: 12.5px;
                        color: var(--text); background: var(--bg); }
.doc-panel .gv-sinput:focus { outline: none; border-color: var(--primary);
                              box-shadow: 0 0 0 3px var(--focus-ring); }
.doc-panel .gv-arw { width: 24px; height: 24px; border: 1px solid var(--btn-border);
                     border-radius: 6px; background: var(--card); color: var(--muted);
                     font-size: 11px; line-height: 1; padding: 0; }
.doc-panel .gv-arw:hover { background: var(--row-hover); }
.doc-panel .gv-cnt { font-size: 12px; color: var(--muted); min-width: 44px;
                     text-align: center; }
.doc-panel .gv-secbody mark { background: #FFE9A8; color: inherit; border-radius: 3px;
                              padding: 0 2px; }
.doc-panel .gv-secbody mark.on { background: #FFB347; box-shadow: 0 0 0 2px #FFD9A0; }
.doc-panel .gv-dot { width: 6px; height: 6px; border-radius: 50%; background: #E8A33D;
                     display: none; flex: 0 0 auto; }
.doc-panel .gv-toc-it .gv-toc-t { overflow: hidden; text-overflow: ellipsis;
                                  white-space: nowrap; }

/* ── CU(2026-10-20) 통합 검색 드롭다운(홈 #searchResults · 자료실 #libSearchDrop 공용) — 불투명 바탕·테두리·그림자·묶음 제목·안내 줄 ── */
.sd-box { display:flex !important; flex-direction:column; max-height:300px !important; overflow:hidden !important;
          background:var(--card) !important; border:1px solid var(--card-border); border-radius:8px;
          box-shadow:0 10px 28px rgba(20,40,70,.16) !important; }
[data-theme="night"] .sd-box { box-shadow:0 10px 28px rgba(0,0,0,.5) !important; }
.sd-box .sd-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; }
.sd-box .sd-gh { position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; gap:8px;
                 padding:5px 10px; background:var(--row-hover); color:var(--muted); font-size:11.5px; font-weight:700;
                 border-top:1px solid var(--border); letter-spacing:.02em; }
.sd-box .sd-scroll > .sd-gh:first-child { border-top:0; }
.sd-box .list-group-item { background:var(--card); border-left:0; border-right:0; border-radius:0 !important; }
.sd-box .list-group-item.active { background:rgba(59,143,217,.10) !important; color:inherit !important;
                                  border-color:var(--border) !important; box-shadow:inset 3px 0 0 var(--primary); }
.sd-box .list-group-item.active .text-muted { color:var(--muted) !important; }
.sd-box .sd-foot { flex:0 0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; padding:6px 10px;
                   border-top:1px solid var(--border); background:var(--row-hover); color:var(--muted); font-size:11.5px; }
.sd-box .sd-foot kbd { font-family:inherit; font-size:11px; padding:0 4px; border:1px solid var(--card-border);
                       border-radius:3px; background:var(--card); color:var(--muted); }
/* 자료실 드롭다운 — 설명 글 한 줄로 자르고 끝에 "…" */
.sd-wide .list-group-item { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-wide .sd-snip { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-wide div.sd-snip { display:block; }

/* ── 도움말 팝업 (2026-10-22 v14) — 떠 있는 창(모달 아님). 색·글꼴은 기존 테마 변수만.
   겹침: 부트스트랩 모달(1055)·미니 알(1500)·포스트잇 위, 앱 공용 확인창(.ui-overlay 2500) 아래. ── */
.help-q { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
          border: 1.6px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1;
          vertical-align: middle; }
.sidebar .sb-help { line-height: 1; display: inline-flex; align-items: center; }
.sidebar .sb-help.open { background: var(--sb-active-bg); color: var(--sb-active-fg); }
.help-mini { position: fixed; top: 1px; right: 10px; z-index: 1100; display: inline-flex; align-items: center; gap: 4px;
             padding: 0 8px; height: 21px; font-size: 11.5px; border-radius: 999px; cursor: pointer;
             background: var(--card); color: var(--muted); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.help-mini:hover { color: var(--primary); border-color: var(--primary); }
.help-mini .help-q { width: 15px; height: 15px; font-size: 10.5px; }
.help-pop { position: fixed; z-index: 2490; display: flex; flex-direction: column; min-width: 0;
            background: var(--card); color: var(--text); border: 1px solid var(--card-border);
            border-radius: 12px; box-shadow: var(--shadow-hover); overflow: hidden; outline: none; }
.help-pop .help-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
                       padding: 12px 14px 10px 16px; border-bottom: 1px solid var(--card-border);
                       cursor: move; touch-action: none; user-select: none; }
.help-pop .help-title { font-size: 15px; font-weight: 700; }
.help-pop .help-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.help-pop .help-x { border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1;
                    padding: 0 4px; cursor: pointer; }
.help-pop .help-x:hover { color: var(--text); }
.help-pop .help-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px; font-size: 13.5px; line-height: 1.6;
                       user-select: text; }
.help-pop .help-body h6 { font-size: 13px; font-weight: 700; color: var(--muted); margin: 4px 0 8px; }
.help-pop .help-body ol { padding-left: 20px; margin: 0 0 14px; }
.help-pop .help-body ol li { margin-bottom: 6px; }
.help-pop .help-faq { margin-bottom: 12px; }
.help-pop .help-faq .q { font-weight: 700; margin-top: 8px; }
.help-pop .help-tip { background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }
.help-pop .help-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
                       border-top: 1px solid var(--card-border); padding: 8px 16px 10px; }
.help-pop .help-more { border: 0; background: transparent; color: var(--primary); font-size: 13px; padding: 4px 0; cursor: pointer; }
.help-pop .help-manual[hidden] { display: none !important; }
.help-pop .help-list { border-top: 1px dashed var(--card-border); margin-top: 6px; padding-top: 10px;
                       display: flex; flex-direction: column; gap: 12px; }
.help-pop .help-list[hidden] { display: none !important; }
.help-pop.wide .help-list { flex-direction: row; align-items: flex-start; }
.help-pop.wide .help-list .help-grp { flex: 1 1 0; min-width: 0; }
.help-pop .help-grp-t { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.help-pop .help-grp button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
                             font-size: 12.5px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.help-pop .help-grp button:hover { background: var(--row-hover); }
.help-pop .help-grp button.cur { font-weight: 700; color: var(--primary); }
.help-pop .rz { position: absolute; z-index: 2; touch-action: none; }
.help-pop .rz-n, .help-pop .rz-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.help-pop .rz-n { top: 0; } .help-pop .rz-s { bottom: 0; }
.help-pop .rz-e, .help-pop .rz-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.help-pop .rz-e { right: 0; } .help-pop .rz-w { left: 0; }
.help-pop .rz-ne, .help-pop .rz-nw, .help-pop .rz-se, .help-pop .rz-sw { width: 14px; height: 14px; }
.help-pop .rz-ne { top: 0; right: 0; cursor: nesw-resize; } .help-pop .rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.help-pop .rz-nw { top: 0; left: 0; cursor: nwse-resize; } .help-pop .rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
.help-pop .rz-grip { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; pointer-events: none; opacity: .55;
                     border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); border-bottom-right-radius: 3px; }
body.help-dragging, body.help-dragging * { user-select: none !important; }
/* 사이드바 접힘 — ? 가 든 아이콘 줄만 접힌 폭 안에서 줄바꿈(순서·크기 그대로) */
.layout.sb-collapsed .sidebar .bottom .d-flex:has(#helpBtn) { flex-wrap: wrap; justify-content: center; }