/* =====================================================================
   SECUPORTAL 정보보호포털 — 브랜드 스타일시트
   메인 컬러: #334F73 (시큐포털 표준, ISMS-P 템플릿 표 머리글 색상과 정합)
   ===================================================================== */

:root {
    color-scheme: light;
    --bm-primary: #3c7ae5;
    --bm-primary-hover: #3062b7;
    --bm-primary-light: #6395ea;
    --bm-blue-10: #ecf2fc;
    --bm-blue-20: #d8e4fa;
    --bm-navy-900: #2b4168;
    --bm-navy-800: #2b4168;
    --bm-sky: #6395ea;
    --bm-mist: #ecf2fc;
    --bm-bg: #f5f5f5;
    --bm-surface: #ffffff;
    --bm-surface-sub: #fafafa;
    --bm-border: #ececec;
    --bm-border-strong: #dddddd;
    --bm-text: #1f1f1f;
    --bm-text-sub: #666666;
    --bm-text-faint: #999999;
    --bm-placeholder: #8a8a8a;      /* 칸 안 예시 — 안내(.field-hint)보다 한 단계 연하게, 대비 4.5:1 하한(2026-09-15) */
    --bm-hover: rgba(31, 31, 31, 0.04);
    --bm-success-bg: #eafbf5;
    --bm-success: #26aa7a;
    --bm-success-bd: #aceed6;
    --bm-warning-bg: #ffefe6;
    --bm-warning: #cc4a02;
    --bm-warning-bd: #ffd1b3;
    --bm-danger-bg: #ffebee;
    --bm-danger: #c62828;
    --bm-danger-bd: #ff8b8b;
    --bm-info-bg: #ecf2fc;
    --bm-info: #3062b7;
    --bm-info-bd: #d8e4fa;
    --bm-sky-bg: #f0f9ff;
    --bm-sky-fg: #0369a1;
    --bm-sky-bd: #bae6fd;
    --bm-yellow-bg: #fff9ea;
    --bm-yellow-fg: #8a6116;
    /* SecOps 관제 화면 — 기존 인라인 hex 보존용 토큰(톤 통합은 후속 단계). 빨강·회색·danger-bg는 --bm-* 재사용 */
    --sec-border: #eee;
    --sec-warn-fg: #b26a00; --sec-warn-bd: #ffe0b2; --sec-warn-bg: #fff8e1;
    --sec-info-fg: #1565c0; --sec-info-bg: #e3f2fd;
    --sec-ok-fg: #2e7d32; --sec-ok-bd: #c8e6c9; --sec-ok-bg: #e8f5e9;
    --sec-purple-fg: #8e24aa; --sec-purple-bd: #e1bee7; --sec-purple-bg: #f3e5f5;
    --sec-danger-bd: #ffcdd2; --sec-danger-soft: #fff5f5;
    --sec-btn-muted: #b0bec5;
    --sec-row-temp: #fffdf5;
    --bm-radius: 10px;
    --bm-radius-sm: 8px;
    --bm-shadow: none;
    --bm-shadow-strong: 0 4px 24px rgba(0, 0, 0, 0.10);
    --bm-font: "Pretendard Variable", Pretendard, "Malgun Gothic",
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--bm-font);
    background: var(--bm-bg);
    color: var(--bm-text);
    letter-spacing: -0.01em;
}

/* ===== 레이아웃 ===== */

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 auto;
    background: var(--bm-surface);
    border-right: 1px solid var(--bm-border);
    color: var(--bm-text);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
}

/* 데스크톱: 사이드바를 뷰포트에 고정(sticky). 레일·패널이 각자 스크롤 —
   메뉴바와 본문이 함께 스크롤되던 문제 해소. overscroll-behavior로 스크롤 체이닝 차단.
   모바일(≤860px)은 off-canvas 드로어(별도 @media)라 미적용. */
@media (min-width: 861px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }
    .nav-rail, .nav-panel {
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ===== 2단 사이드바 — 아이콘 레일(주 메뉴) + 하위 메뉴 패널 ===== */
.nav-rail {
    flex: 0 0 76px;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 8px 12px;
    background: var(--bm-surface-sub);
}
.rail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--bm-border);
}
.rail-logo img { width: 28px; height: 28px; }
/* ⚠ 이 묶음에 `.rail-link` 를 넣지 말 것 — 그 이름은 **우측 정보 레일**(.rail) 카드의
   링크가 이미 쓰고 있고(파일 뒤쪽), 같은 특이도라 뒤에 선언된 그쪽이 이긴다.
   좌측 아이콘 레일의 단독 링크는 `.rail-solo`. (2026-09-18 충돌 실사고) */
.rail-btn, .rail-home, .rail-solo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* 레일 항목이 11개로 늘어 세로 예산을 줄였다(2026-09-18, 기획 _16 D6).
       ⚠ 줄이는 건 **패딩만** — 아이콘(22px)·글자(11px)를 건드리면 둘의 균형이 깨져
       위아래 항목 크기가 달라 보인다(2026-09-18 JM 지적으로 되돌림). */
    padding: 6px 4px;
    border: none;
    border-radius: var(--bm-radius-sm);
    background: none;
    color: var(--bm-text-sub);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    word-break: keep-all;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background .12s, color .12s;
}
.rail-btn:hover, .rail-home:hover, .rail-solo:hover { background: var(--bm-hover); color: var(--bm-text); text-decoration: none; }
.rail-btn.on, .rail-home.on, .rail-solo.on { background: var(--bm-blue-10); color: var(--bm-primary); }
.rail-btn .ri-ico, .rail-home .ri-ico, .rail-solo .ri-ico { width: 22px; height: 22px; flex: 0 0 auto; }
/* 레일 구역 라벨 — 위=전 직원 / 아래=정보보호팀 전용(2026-09-18, 기획 _16 D2).
   ⚠ `.rail-sect` 는 좌측 아이콘 레일 전용. 우측 정보 레일(.rail)에는 쓰지 않는다. */
.rail-sect {
    margin: 12px 2px 3px;   /* 전 직원 구역과 확실히 떼어 놓는다(2026-09-18 JM "좀 내릴까") */
    padding-top: 8px;
    border-top: 1px solid var(--bm-border);
    color: var(--bm-text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -.03em;
    text-align: center;
    word-break: keep-all;
}
.rail-btn.on .ri-ico, .rail-home.on .ri-ico, .rail-solo.on .ri-ico { color: var(--bm-primary); }
/* 대시보드 = 홈 링크(카테고리와 구분): 레일 상단 단독 + 아래 구분선 */
.rail-home { margin-bottom: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--bm-border); }
/* 조직도 = 단독 링크(하위 메뉴 없음): 레일 맨 아래로 내리되 바닥에 붙이지 않는다(2026-09-18 JM).
   margin-top:auto = 카테고리와의 남는 세로 공간을 전부 위 여백으로(데스크톱은 .nav-rail 이 100vh).
   ⚠ 모바일 드로어(≤860px)는 레일이 내용 높이라 auto 가 0 → 목록 끝에 그대로 붙는다(의도).
   바닥 여백 = 이 margin-bottom + .nav-rail padding-bottom 16px. */
.rail-solo { margin-top: auto; margin-bottom: 6px; padding-top: 9px; border-top: 1px solid var(--bm-border); }
.rail-locked::after {
    content: "\1F512";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    opacity: .5;
}

.nav-panel {
    flex: 0 0 var(--sb-w, 232px);
    width: var(--sb-w, 232px);
    display: flex;
    flex-direction: column;
    padding: 20px 14px 18px;
    background: var(--bm-surface);
    border-left: 1px solid var(--bm-border);
    position: relative;
}
/* 2단: 선택된 그룹의 하위 메뉴만 표시 (표시 규칙 SoT = '사이드바 4대 그룹' 절) */
/* 그룹 헤더(menu-section) → 패널 제목으로 사용, 접기 캐럿 숨김·상단선 제거 */
.menu-section .caret { display: none; }
.menu-group.on .menu-section.toggle { border-top: none; margin-top: 0; padding-top: 2px; cursor: default; }
/* 패널 접힘(레일만 표시) */
.layout.nav-collapsed .nav-panel { display: none; }

.logo {
    margin-bottom: 34px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 30px;
    height: 30px;
}

.logo-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--bm-primary);
}

.logo-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: var(--bm-text-faint);
    letter-spacing: 0.04em;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.menu a {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--bm-text-sub);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--bm-radius-sm);
    font-size: 14.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.menu a:hover {
    background: var(--bm-hover);
    color: var(--bm-text);
    text-decoration: none;
}

.menu a.active {
    background: var(--bm-blue-10);
    color: var(--bm-primary);
    border-left-color: var(--bm-primary);
    font-weight: 700;
}

.menu .menu-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 13px 12px 9px;
    font-size: 14px;
    font-weight: 800;
    color: var(--bm-primary);
    letter-spacing: 0.01em;
    border-top: 1px solid var(--bm-border);
}
.menu .menu-section:first-child {
    margin-top: 2px;
    border-top: none;
    padding-top: 4px;
}

.sidebar-foot {
    padding: 14px 8px 0;
    border-top: 1px solid var(--bm-border);
    font-size: 11px;
    color: var(--bm-text-faint);
    line-height: 1.6;
}

.content {
    flex: 1;
    padding: 30px 36px 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content > .footer {
    margin-top: auto;
}

/* ===== 상단바 ===== */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 26px;
}

.topbar h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    color: var(--bm-primary);
}

.topbar p {
    margin: 7px 0 0;
    color: var(--bm-text-sub);
    font-size: 14px;
}

.user-box {
    background: var(--bm-surface);
    padding: 8px 9px 8px 16px;
    border-radius: 999px;
    box-shadow: var(--bm-shadow);
    border: 1px solid var(--bm-border);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bm-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;       /* 긴 페이지 설명에 밀려 사용자명·로그아웃이 세로로 쪼개지던 것(2026-09-03) */
    white-space: nowrap;
    margin-left: var(--sp-4);
}

.logout-form {
    margin: 0;
}

.logout-button {
    border: none;
    background: var(--bm-blue-10);
    color: var(--bm-primary);
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--bm-font);
    cursor: pointer;
    transition: background 0.15s;
}

.logout-button:hover {
    background: #C5D4E6;
}

/* ===== 푸터 ===== */

.footer {
    padding: 18px 4px 16px;
    font-size: 12px;
    color: var(--bm-text-faint);
    border-top: 1px solid var(--bm-border);
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* ===== 카드 ===== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    background: var(--bm-surface);
    padding: 20px 22px;
    border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow);
    border: 1px solid var(--bm-border);
}

.stat-card span {
    display: block;
    font-size: 13px;
    color: var(--bm-text-sub);
    margin-bottom: 9px;
    font-weight: 600;
}

.stat-card strong {
    font-size: 30px;
    font-weight: 800;
    color: var(--bm-primary);
}
/* 통계 타일 의미 변형 — 배지와 같은 6종 어휘(2026-09-04 _13 §2.K 조치 ⑧, 구 vuln-stat good/vuln/na/itv 흡수) */
.stat-card.success strong { color: var(--bm-success); }
.stat-card.danger  strong { color: var(--bm-danger); }
.stat-card.warning strong { color: var(--bm-warning); }
.stat-card.neutral strong { color: var(--bm-text-faint); }

/* ===== 패널 ===== */

.panel {
    background: var(--bm-surface);
    border-radius: var(--bm-radius);
    padding: 24px;
    box-shadow: var(--bm-shadow);
    border: 1px solid var(--bm-border);
    margin-bottom: 22px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.panel-header h2,
.panel h2 {
    margin: 0 0 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--bm-text);
}

.panel > h2 {
    margin-bottom: 16px;
}

/* ===== 버튼 ===== */

.button {
    display: inline-block;
    border: none;
    background: var(--bm-primary);
    color: white;
    padding: 10px 17px;
    border-radius: var(--bm-radius-sm);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--bm-font);
    transition: background 0.15s, transform 0.05s;
    white-space: nowrap; /* flex 헤더에서 눌려도 라벨 세로 꺾임 방지 (2026-08-04 입퇴사 '이벤트 삭제' 사례) */
}

.button:hover {
    background: var(--bm-primary-hover);
    text-decoration: none;
}

.button:active {
    transform: translateY(1px);
}

.button.secondary {
    background: var(--bm-surface);
    color: var(--bm-primary);
    border: 1px solid var(--bm-border);
}

.button.secondary:hover {
    background: var(--bm-surface-sub);
}

/* ===== 테이블 ===== */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

th:first-child {
    border-radius: var(--bm-radius-sm) 0 0 var(--bm-radius-sm);
}

th:last-child {
    border-radius: 0 var(--bm-radius-sm) var(--bm-radius-sm) 0;
}

.empty {
    text-align: center;
    color: var(--bm-text-faint);
    padding: 34px;
}

/* ===== 배지 — 단일 컴포넌트 .badge(알약형) × 의미 6종 (2026-09-03 _13 §2.A · 조치 ③) =====
   neutral(기본) · info(접수·승인 대기) · progress(진행 중·승인됨) · success(완료·활성·정상) · warning(보완·임박·주의) · danger(반려·회수·만료·비활성)
   결재 st-* / 입퇴사 pe-* / 체크리스트 pci-* / ISMS isms-* / 위원회 cm-type-* 는 아래 6종의 **별칭**(색 정의는 여기 1곳). 구 "src-badge"·"tag" 계열은 폐지·흡수. */
.badge { display: inline-block; white-space: nowrap; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.6;
         background: var(--bm-bg); color: var(--bm-text-sub); border: 1px solid var(--bm-border-strong); }
.badge.info,     .badge.st-SUBMITTED, .badge.st-TEAM_LEADER_PENDING, .badge.cm-type-REGULAR
  { background: var(--bm-info-bg); color: var(--bm-info); border-color: var(--bm-info-bd); }
.badge.progress, .badge.st-PROCESSING_PENDING, .badge.st-PROCESSED
  { background: var(--bm-sky-bg); color: var(--bm-sky-fg); border-color: var(--bm-sky-bd); }
.badge.success,  .badge.st-COMPLETED, .badge.pe-JOINER, .badge.pci-DONE, .badge.isms-DONE
  { background: var(--bm-success-bg); color: var(--bm-success); border-color: var(--bm-success-bd); }
.badge.warning,  .badge.st-SYSTEM_OWNER_PENDING, .badge.st-SECURITY_REVIEW_PENDING, .badge.st-NEED_MORE_INFO,
.badge.pe-MOVER, .badge.pci-PENDING, .badge.isms-DOING, .badge.cm-type-ADHOC
  { background: var(--bm-warning-bg); color: var(--bm-warning); border-color: var(--bm-warning-bd); }
.badge.danger,   .badge.st-REJECTED, .badge.st-REVOKED, .badge.pe-LEAVER
  { background: var(--bm-danger-bg); color: var(--bm-danger); border-color: var(--bm-danger-bd); }
/* neutral 별칭(기본값과 동일 — 클래스명 유지용) */
.badge.st-DRAFT, .badge.st-CANCELED, .badge.st-EXPIRED, .badge.pci-NA, .badge.isms-TODO { background: var(--bm-bg); color: var(--bm-text-sub); border-color: var(--bm-border-strong); }
[data-theme="dark"] .badge { background: var(--bm-blue-10); color: var(--bm-text-sub); border-color: var(--bm-border-strong); }

/* ===== 결재선 스테퍼 ===== */

.flow-panel {
    background: var(--bm-surface);
    border-radius: var(--bm-radius);
    padding: 20px 24px;
    box-shadow: var(--bm-shadow);
    border: 1px solid var(--bm-border);
    margin-bottom: 22px;
}

.flow-steps {
    display: flex;
    align-items: flex-start;
}

.flow-step::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bm-surface);
    border: 2px solid var(--bm-border);
    z-index: 2;
}

.flow-step::after {
    content: "";
    position: absolute;
    top: 18px;   /* 원의 세로 중앙에 정렬 — 글자와 분리 */
    left: calc(-50% + 12px);
    width: calc(100% - 24px);
    height: 2px;
    background: var(--bm-border);
    z-index: 1;
}

.flow-step:first-child::after {
    display: none;
}

.flow-step.done {
    color: var(--bm-primary);
    font-weight: 600;
}

.flow-step.done::before {
    background: var(--bm-primary);
    border-color: var(--bm-primary);
    box-shadow: inset 0 0 0 5px var(--bm-primary);
}

.flow-step.done::after {
    background: var(--bm-primary);
}

.flow-step.current {
    color: var(--bm-primary);
    font-weight: 800;
}

.flow-step.current::before {
    border-color: var(--bm-primary);
    background: var(--bm-mist);
}

.flow-step.current::after {
    background: var(--bm-primary);
}

/* 파이프라인 퀄리티(2026-09-15 JM 1+2): 완료 원엔 흰 체크 — 글자 없이 '끝났다'가 읽힌다.
   현재 원은 26px로 살짝 크게 — 펄스와 함께 "지금 여기"의 위계. top 6px = 선(y19) 중심 유지. */
.flow-step::before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--bm-surface);
}

.flow-step.done::before {
    content: "✓";
}

.flow-step.current::before {
    width: 26px;
    height: 26px;
    top: 6px;
}

.flow-broken {
    margin-top: 14px;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--bm-radius-sm);
    background: var(--bm-danger-bg);
    color: var(--bm-danger);
    border: 1px solid var(--bm-danger-bd);
    font-weight: 600;
}

.flow-broken.info {
    background: var(--bm-yellow-bg);
    color: var(--bm-yellow-fg);
    border-color: #f5e3b3;
}

/* ===== 폼 ===== */

.form-panel {
    /* 폭은 .content 통일 최대폭을 따름 (개별 제한 제거) */
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 18px;
    max-width: 960px;   /* 입력칸이 넓은 화면에서 과도하게 늘어나지 않게 제한(좌측 정렬) */
}

.form-field {
    display: flex;
    flex-direction: column;
}
/* hidden 속성은 항상 이긴다(2026-09-15) — .form-field 처럼 display 를 지정한 요소에 hidden 을 줘도
   클래스 규칙이 UA 의 display:none 을 덮어 안 숨겨지던 문제(인프라·보안 요청 '출발지 IP' 칸이 전 유형에 노출). */
[hidden] { display: none !important; }

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
    color: var(--bm-text-sub);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--bm-font);
    background: var(--bm-surface);
    color: var(--bm-text);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.action-panel textarea:focus,
.action-panel input[type="text"]:focus {
    outline: 2px solid var(--bm-primary-light);
    outline-offset: 0;
    border-color: var(--bm-primary-light);
}

.form-field input[type="checkbox"] {
    width: auto;
    align-self: flex-start;
    accent-color: var(--bm-primary);
}

/* 수제 폼 컨트롤 공용 스코프 — Django Form(_formfields) 미사용 화면(취약점 점검 등).
   .form-field와 동일 룩(토큰 기반), 인라인·테이블 맥락이라 패딩만 컴팩트.
   사용법: 수제 <form>/컨테이너에 .ctl-form 부여(맨몸 input/select/textarea 금지). */
.ctl-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ctl-form select,
.ctl-form textarea {
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    font-family: var(--bm-font);
    background: var(--bm-surface);
    color: var(--bm-text);
}

.ctl-form input:focus,
.ctl-form select:focus,
.ctl-form textarea:focus {
    outline: 2px solid var(--bm-primary-light);
    outline-offset: 0;
    border-color: var(--bm-primary-light);
}

.ctl-form input[type="checkbox"] {
    accent-color: var(--bm-primary);
}

/* 목록 상단 검색·필터 행 (컨테이너에 .ctl-form 함께 부여 → input 토큰 스타일) */
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-row input[type="text"] { width: 260px; max-width: 100%; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.error {
    color: var(--bm-danger);
    font-size: 13px;
    margin-top: 6px;
}

/* ===== 상세 ===== */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.detail-grid div {
    background: var(--bm-surface-sub);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    padding: 13px 14px;
}

.detail-grid strong,
.detail-section strong,
.action-panel label {
    display: block;
    font-size: 12px;
    color: var(--bm-text-sub);
    margin-bottom: 7px;
    font-weight: 700;
}

.detail-grid p,
.detail-section p {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
}

.detail-section {
    margin-top: 16px;
    background: var(--bm-surface-sub);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    padding: 15px 16px;
}

/* 상태 변경 패널의 한 줄 입력(적용 위치 등)도 textarea 와 같은 옷 — 빠져 있어서
   브라우저 기본 네모로 떴다(2026-09-16 JM 지적) */
.action-panel textarea,
.action-panel input[type="text"] {
    width: 100%;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--bm-font);
    margin-bottom: 14px;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ===== 링크 ===== */

a {
    color: var(--bm-primary);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
}

/* ===== 알림 메시지 ===== */

.messages {
    margin-bottom: 18px;
}

.message {
    padding: 12px 16px;
    border-radius: var(--bm-radius-sm);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.message.success {
    background: var(--bm-success-bg);
    color: var(--bm-success);
    border: 1px solid var(--bm-success-bd);
}

.message.error {
    background: var(--bm-danger-bg);
    color: var(--bm-danger);
    border: 1px solid var(--bm-danger-bd);
}

/* ===== 로그인 ===== */

.login-body {
    /* C안 — 화이트 + 상단 은은한 블루 틴트 (시퍼런 전면 파랑 제거) */
    background: #ffffff;
    background: radial-gradient(125% 85% at 50% -10%, #e9f1fc 0%, #f4f7fb 38%, #ffffff 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-wrap {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background: var(--bm-surface);
    border-radius: 18px;
    padding: 38px 32px 30px;
    border: 1px solid #e7ebf2;            /* 밝은 배경에서 카드 경계 또렷하게 */
    box-shadow: 0 6px 24px rgba(20, 40, 90, .08);
}

.login-card .logo {
    text-align: center;
    margin-bottom: 28px;
    padding: 0;
}

.logo-title.dark {
    color: var(--bm-primary);
}

.logo-subtitle.dark {
    color: var(--bm-text-sub);
}

.login-card .form-field {
    margin-bottom: 15px;
}

.login-button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    margin-top: 4px;
}

.login-error {
    background: var(--bm-danger-bg);
    color: var(--bm-danger);
    border: 1px solid var(--bm-danger-bd);
    border-radius: var(--bm-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.login-footer {
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--bm-text-faint);
}

/* ===== 증적 파일 ===== */

.evidence-panel {
    margin-bottom: 22px;
}

code.hash {
    font-size: 12px;
    background: var(--bm-mist);
    padding: 3px 7px;
    border-radius: 6px;
    color: var(--bm-primary);
    font-weight: 600;
}

/* ===== 권한 검토 ===== */

.review-grid {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.review-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.item-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.item-form select,
.item-form input[type="text"] {
    border: 1px solid var(--bm-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: var(--bm-font);
}

.item-form input[type="text"] {
    width: 180px;
}

/* 로그인 로고 (세로 배치) */
.login-logo {
    flex-direction: column;
    gap: 8px;
}

/* ===== 대시보드 UX: 결재 대기함 / 빠른 신청 ===== */

.todo-panel {
    border-left: 4px solid var(--bm-primary);
}

.todo-list {
    display: flex;
    flex-direction: column;
}

.todo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 10px;
    border-bottom: 1px solid var(--bm-border);
    color: var(--bm-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--bm-radius-sm);
    transition: background 0.12s;
}

.todo-row:hover {
    background: var(--bm-surface-sub);
    text-decoration: none;
}

.todo-row:last-child {
    border-bottom: none;
}

.todo-no {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bm-primary);
    white-space: nowrap;
}

.todo-main {
    flex: 1;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todo-go {
    font-size: 13px;
    font-weight: 700;
    color: var(--bm-primary);
    white-space: nowrap;
}

.todo-go.warn {
    color: var(--bm-warning);
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.quick-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--bm-surface-sub);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    color: var(--bm-text);
    text-decoration: none;
    transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s;
}

.quick-card:hover {
    border-color: var(--bm-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--bm-shadow);
    text-decoration: none;
}

.quick-card strong {
    font-size: 14.5px;
}

.quick-card span:last-child {
    font-size: 12px;
    color: var(--bm-text-faint);
}

.quick-chip {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bm-blue-10);
    color: var(--bm-primary);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
}

/* 만료 권한 패널 */
.expire-panel {
    border-left: 4px solid var(--bm-warning);
}

/* ===== 사용자별 계정 현황 (account_holdings) ===== */

.seg a { padding: 7px 14px; font-size: 13px; color: var(--bm-text-sub);
         text-decoration: none; background: var(--bm-surface); }
.seg a + a { border-left: 1px solid var(--bm-border-strong); }
.card-grid.grid-3 { grid-template-columns: repeat(3, minmax(140px, 1fr)); }

.hint { margin: 4px 0 16px; font-size: 13px; color: var(--bm-text-sub); }  /* 문단형 안내(패널 상단 설명) — 구 .hint-gray·.cm-note 흡수(2026-09-03 _13 §2.F) */

.holder-head { display: flex; justify-content: space-between; align-items: center;
               flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.holder-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.holder-name { font-size: 16px; font-weight: 700; color: var(--bm-text); }
.holder-dept { font-size: 13px; color: var(--bm-primary); font-weight: 600; }
.holder-email { font-size: 12px; color: var(--bm-text-faint); }
.holder-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.count-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
              background: var(--bm-blue-10); color: var(--bm-primary-hover); }


.holder-table { margin-top: 4px; }
.holder-table th { font-size: 12px; }
.holder-table td { font-size: 13px; }

/* ===== 팀별 계정 현황 보강 ===== */
.card-grid.grid-4 { grid-template-columns: repeat(4, minmax(130px, 1fr)); }

.team { padding-top: 8px; }
.team-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 10px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 6px;
             border-bottom: 2px solid var(--bm-primary); }
.team-name { margin: 0; font-size: 17px; color: var(--bm-primary-hover); }
.team-meta { font-size: 12px; color: var(--bm-text-sub); }

.holder-empty { opacity: 0.72; }
.holder-none { margin: 4px 0 0; font-size: 12px; color: var(--bm-text-faint); }

/* ===== 계정/권한 분리 + AD 선택 입력 ===== */
.quick-group-label {
    font-size: 13px; font-weight: 700; color: var(--bm-text-sub);
    margin: 14px 2px 10px; display: flex; align-items: baseline; gap: 8px;
}
.quick-group-label:first-of-type { margin-top: 4px; }
.quick-group-label span { font-size: 12px; font-weight: 500; color: var(--bm-text-faint); }

.list-filter { margin: 0 0 14px; }

/* AD 사용자 선택 입력 — select 처럼 캐럿 표시 (datalist 콤보) */
.form-field input.picker-input {
    padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233c7ae5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.form-field input.picker-input::-webkit-calendar-picker-indicator { opacity: 0; }

/* ===== 입퇴사 관리 ===== */



.inline-actions { display: inline-flex; gap: 6px; }
.field-hint { font-size: var(--fs-sm); color: var(--bm-text-sub); margin-top: 5px; }  /* 필드 아래 안내 — 구 .evidence-hint·.hint-sub 흡수(2026-09-03). 안내글 = .field-hint(필드) / .hint(문단) / .panel-note(강조 박스) / .hint-danger(경고) 4종만 */

/* ===== AD 실제 접근 비교 ===== */
.card-grid.grid-5 { grid-template-columns: repeat(5, minmax(120px, 1fr)); }

.ad-access { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bm-border-strong);
             display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-access-label { font-size: 12px; font-weight: 700; color: var(--bm-text-sub); margin-right: 4px; }

/* 목록 페이지네이션 (신청 목록 2026-08-25 — 다른 목록도 재사용) */
.list-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.list-pager .pager-info { color: var(--bm-text-sub); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--sp-2); }
.list-pager .pager-per { display: inline; }
.list-pager .pager-per select { font-size: var(--fs-sm); padding: 2px 6px; }
.list-pager .pager-links { display: flex; align-items: center; gap: var(--sp-2); }
.list-pager .pager-num, .list-pager .pager-cur, .list-pager .pager-ellipsis { min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px; font-size: var(--fs-sm); }
.list-pager .pager-num { color: var(--bm-text-sub); border: 1px solid var(--bm-border); text-decoration: none; }
.list-pager .pager-num:hover { background: var(--bm-surface-2); }
.list-pager .pager-cur { background: var(--bm-primary); color: #fff; font-weight: 700; }
.list-pager .pager-ellipsis { color: var(--bm-text-faint); }

/* ===== AD 사용자 콤보박스 (native datalist 대체) ===== */
.ad-combo-list {
    position: absolute; z-index: 1200; max-height: 280px; overflow-y: auto;
    background: var(--bm-surface); border: 1px solid var(--bm-border-strong);
    border-radius: var(--bm-radius-sm); box-shadow: var(--bm-shadow-strong);
    padding: 5px;
}
.ad-combo-item {
    padding: 9px 12px; font-size: 14px; color: var(--bm-text);
    border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.ad-combo-item:hover,
.ad-combo-item.active { background: var(--bm-blue-10); color: var(--bm-primary-hover); }

/* ===== 입퇴사 표준세트 미리보기 ===== */
.tpl-preview-wrap { margin: 4px 0 4px; }
.tpl-preview-wrap label { font-size: 13px; font-weight: 700; color: var(--bm-text-sub);
                          display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* ===== 신청 폼 개인정보 안내 ===== */
.privacy-note { margin: 6px 0 2px; padding: 10px 14px; font-size: 13px; font-weight: 600;
    color: var(--bm-info); background: var(--bm-info-bg); border: 1px solid var(--bm-info-bd);
    border-radius: var(--bm-radius-sm); }

/* ===== 요청 권한 역할 드롭다운 ===== */
.form-field select.perm-select {
    width: 100%; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm);
    padding: 10px 12px; font-size: 14px; font-family: var(--bm-font);
    background: var(--bm-surface); color: var(--bm-text);
}

/* ===== 계정 현황 그룹(공통/솔루션/개인정보) ===== */
.acct-group { margin-top: 10px; }
.acct-group-label { font-size: 12px; font-weight: 700; color: var(--bm-primary-hover);
    margin: 0 0 4px 2px; display: flex; align-items: center; gap: 6px; }
.acct-group-label span { font-size: 11px; font-weight: 600; color: var(--bm-text-faint);
    background: var(--bm-blue-10); border-radius: 999px; padding: 1px 7px; }
.acct-group .holder-table { margin-top: 0; }

/* ===== 요약 카드 클릭(상세 펼침) ===== */
.stat-card.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.stat-card.clickable:hover { border-color: var(--bm-primary-light); }
.stat-card.clickable.on { border-color: var(--bm-primary); box-shadow: inset 0 0 0 1px var(--bm-primary); }
.detail-panel { margin-top: 14px; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm);
    padding: 8px 12px 4px; background: var(--bm-surface-sub); }
.detail-cap { font-size: 13px; font-weight: 700; color: var(--bm-primary-hover); margin: 4px 2px; }

/* ===== AD 트리 표시 ===== */
.holder-table td.tree-child { padding-left: 26px; color: var(--bm-text-sub); }
.tree-branch { color: var(--bm-text-faint); margin-right: 6px; }

/* ===== 사용자 간 구분 강화 ===== */
.holder {
    padding-top: 14px;
    border-bottom: 1px solid var(--bm-border);
    padding: 18px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    background: var(--bm-surface);
}
.holder:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.team .holder + .holder { margin-top: 4px; }

/* ===== 팀 섹션 접기 토글 ===== */
.team-toggle { cursor: pointer; user-select: none; }
.team-caret { display: inline-block; transition: transform .15s; font-size: 12px;
    color: var(--bm-text-faint); margin-right: 2px; }
.team.collapsed .team-caret { transform: rotate(-90deg); }
.team.collapsed .team-body { display: none; }
.team.collapsed .team-head { border-bottom-color: transparent; padding-bottom: 0; margin-bottom: 0; }

/* ===== 사용자(holder) 접기 토글 ===== */
.holder-toggle { cursor: pointer; user-select: none; }
.holder-caret { display: inline-block; transition: transform .15s; font-size: 11px;
    color: var(--bm-text-faint); margin-right: 4px; }
.holder.collapsed .holder-caret { transform: rotate(-90deg); }
.holder.collapsed .holder-body { display: none; }

/* ===== 신청 폼 인라인 요소 ===== */
.inline-check { font-weight: 500; font-size: 12px; color: var(--bm-text-sub);
    margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.inline-check input[type="checkbox"] { width: auto; margin: 0; }
.enddate-row { display: flex; align-items: center; gap: 12px; }
.enddate-row input[type="date"] { flex: 1; }

/* ===== 권한 신청 요청권한(JSON) ===== */
.form-field textarea.perm-textarea { width: 100%; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm); padding: 10px 12px; font-size: 13px;
    font-family: "D2Coding", Consolas, monospace; background: var(--bm-surface);
    color: var(--bm-text); min-height: 130px; resize: vertical; }

/* ===== 필수 표시 ===== */
.req { font-size: 11px; font-weight: 700; color: var(--bm-danger); margin-left: 3px; }

/* ===== 입퇴사 생성 시스템 미리보기(세로 구조) ===== */
.tpl-preview {
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    background: var(--bm-surface-sub);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    display: block;
}
.prev-group-label { font-size: 12px; font-weight: 700; color: var(--bm-primary-hover);
    margin: 8px 0 3px; }
.prev-group-label:first-child { margin-top: 0; }
.prev-row { font-size: 13px; color: var(--bm-text); padding: 2px 0 2px 4px; }
.prev-row.prev-child { padding-left: 22px; color: var(--bm-text-sub); }

/* ===== 사이드바 잠금 라벨 / 접근 거부 ===== */
.menu-lock { font-size: 10px; font-weight: 600; color: var(--bm-text-faint);
    background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.forbidden-box { text-align: center; padding: 40px 20px; }
.forbidden-emoji { font-size: 44px; margin-bottom: 8px; }
.forbidden-box h2 { margin: 6px 0; }
.forbidden-box p { color: var(--bm-text-sub); font-size: 14px; margin: 8px 0 20px; line-height: 1.6; }

/* ── 접근권한 검토: 자동수집·출처 배지·플래그 ── */
.review-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.review-flags .flag { font-size: 12px; padding: 6px 12px; border-radius: 6px; }
.review-flags .flag.warn { background: var(--bm-warning-bg); color: var(--bm-warning); border: 1px solid var(--bm-warning-bd); }
.review-collect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; padding: 12px 14px; background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: 8px; }
.review-upload-fallback { width: 100%; margin-top: 6px; }
.review-upload-fallback summary { cursor: pointer; color: var(--bm-text-sub); font-size: var(--fs-sm); }

/* ── 게시판 준비중 배지 + 준비중 페이지 ── */
.menu-soon { font-size: 10px; color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }
.coming-soon { text-align: center; padding: 48px 24px; }
.coming-soon .cs-badge { display: inline-block; background: var(--bm-warning-bg); color: var(--bm-warning); border: 1px solid var(--bm-warning-bd); border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.coming-soon h2 { font-size: 22px; margin: 8px 0; }
.coming-soon .cs-desc { font-size: 15px; color: #334155; margin: 8px 0; }
.coming-soon .cs-map { font-size: 12px; color: #64748b; margin-bottom: 20px; }
.button.danger:hover {
    background: #912018;
}

/* ── 로고 홈 링크 ── */
a.logo-link { text-decoration: none; color: inherit; cursor: pointer; }
a.logo-link:hover { opacity: 0.85; }

/* ── 대시보드 카드형 레이아웃 ── */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 20px; }
.sum-card { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--bm-surface); border: 1px solid var(--bm-border); border-left: 4px solid var(--bm-primary); border-radius: var(--bm-radius); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.sum-card:hover { box-shadow: 0 3px 16px rgba(0,0,0,0.08); transform: translateY(-1px); text-decoration: none; }
.sum-label { font-size: 12.5px; color: var(--bm-text-sub); font-weight: 600; }
.sum-num { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--bm-text); }
.sum-sub { font-size: 11px; color: var(--bm-text-faint); }
/* 라벨+아이콘 상단행, 아이콘은 카드 강조색(--sum-accent) 상속 */
.sum-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sum-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--sum-accent, var(--bm-text-faint)); opacity: .85; }
.sum-card.blue { --sum-accent: #3c7ae5; border-left-color: var(--sum-accent); } .sum-card.blue .sum-num { color: #3062b7; }
.sum-card.teal { --sum-accent: #1d9e75; border-left-color: var(--sum-accent); } .sum-card.teal .sum-num { color: #0f6e56; }
.sum-card.amber { --sum-accent: #ba7517; border-left-color: var(--sum-accent); } .sum-card.amber .sum-num { color: #854f0b; }
.sum-card.orange { --sum-accent: #d85a30; border-left-color: var(--sum-accent); } .sum-card.orange .sum-num { color: #993c1d; }

.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .dash-2col { grid-template-columns: 1fr; } }

.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--bm-border); text-decoration: none; color: var(--bm-text); font-size: 13.5px; }
.mini-row:last-child { border-bottom: none; }
.mini-row:hover { background: var(--bm-hover); text-decoration: none; }
.mini-no { font-size: 12px; color: var(--bm-text-faint); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.mini-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-date { font-size: 12px; color: var(--bm-text-faint); flex: 0 0 auto; }
.mini-empty { padding: 22px 6px; color: var(--bm-text-faint); font-size: 13px; text-align: center; }
.dday { font-size: 11px; font-weight: 700; color: var(--bm-warning); background: var(--bm-warning-bg); border-radius: 8px; padding: 2px 7px; flex: 0 0 auto; }
.dash-foot-note { text-align: center; color: var(--bm-text-faint); font-size: 12px; margin: 24px 0 8px; }
/* ── 명함 신청 ── */
.card-req-box { margin: 6px 0 16px; padding: 14px 16px; background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: 10px; }
.card-req-toggle { font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.card-req-fields { margin-top: 12px; }
.card-preview-wrap { background: #f1f5f9; border: 1px solid var(--bm-border); border-radius: 10px; padding: 16px; display: flex; justify-content: center; }
.card-preview-wrap svg { box-shadow: 0 2px 12px rgba(0,0,0,0.12); border-radius: 2px; max-width: 100%; height: auto; }
table.kv { width: 100%; border-collapse: collapse; }
table.kv th { text-align: left; width: 110px; color: var(--bm-text-sub); font-weight: 600; padding: 7px 8px; font-size: 13px; vertical-align: top; }
table.kv td { padding: 7px 8px; font-size: 13.5px; border-bottom: 1px solid var(--bm-border); }

/* ── 명함 폼: 직책/직무 두 칸 ── */
.title-pair { display: flex; gap: 8px; margin-top: 6px; }
.title-pair input { flex: 1; }

/* ── 직접입력 강조 토글 버튼 ── */
.custom-toggle { display: inline-block; margin-bottom: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--bm-primary); background: var(--bm-blue-10); border: 1px solid var(--bm-blue-20); border-radius: 8px; cursor: pointer; }
.custom-toggle:hover { background: var(--bm-blue-20); }
.custom-toggle.on { background: var(--bm-primary); color: #fff; border-color: var(--bm-primary); }

/* ── 퇴직 체크리스트 팀별 일괄완료 ── */
.bulk-complete .bulk-label { font-size: 12.5px; color: var(--bm-text-sub); font-weight: 600; }
.bulk-complete .button[disabled] { opacity: .45; cursor: not-allowed; }

/* ── 입퇴사 통제항목 그룹 카드 ── */
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cg-section { margin-bottom: 16px; border: 1px solid var(--bm-border); border-radius: 10px; overflow: hidden; }
.cg-title { background: var(--bm-blue-10); color: var(--bm-primary); font-weight: 700; font-size: 13px; padding: 9px 14px; }
.cg-table th { background: #fafafa; color: #666; font-size: 12px; text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--bm-border); }
.cg-table td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f1f1f1; vertical-align: top; }
.cg-table tr:last-child td { border-bottom: none; }
.flow-broken.ok { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* ── 팀별 일괄완료/취소 묶음 ── */
.bulk-complete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 4px 0 14px;
    padding: 10px 12px;
    background: var(--bm-surface-sub);
    border: 1px solid var(--bm-border);
    border-radius: 8px;
    gap: 12px;
}
.bulk-team { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #fff; border: 1px solid var(--bm-border); border-radius: 8px; }
.bulk-team-name { font-size: 12px; font-weight: 600; color: var(--bm-text-sub); margin-right: 2px; }

/* ── 체크리스트 처리자 표시(이름+ID, 한 줄) ── */
.done-by { font-size: 11px; color: var(--bm-text-faint); white-space: nowrap; margin-top: 3px; }

/* ===== 자료·바로가기 허브 (Batch A) ===== */
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.shortcut-card { display: block; padding: 14px 16px; border: 1px solid var(--bm-border); border-radius: 10px; background: var(--bm-surface); text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
.shortcut-card:hover { border-color: #2563eb; box-shadow: 0 2px 10px rgba(37,99,235,.10); transform: translateY(-1px); }
.shortcut-card .sc-cat { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.shortcut-card .sc-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.shortcut-card .sc-go { color: #2563eb; font-weight: 700; }
.shortcut-card .sc-desc { font-size: 12px; color: #475569; margin-top: 6px; }
.shortcut-card .sc-owner { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.resource-item { padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.resource-item:last-child { border-bottom: none; }
.resource-item .ri-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.resource-item .ri-title { font-size: 15px; font-weight: 600; }
.resource-item .ri-title a { color: #2563eb; text-decoration: none; }
.resource-item .ri-owner { font-size: 12px; color: #94a3b8; white-space: nowrap; }
.resource-item .ri-desc { font-size: 13px; color: #475569; margin: 4px 0 0; }
.resource-item .ri-img { display: block; max-width: 100%; margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 8px; }
.resource-list { list-style: none; padding: 0; margin: 0; }
.resource-list li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.resource-list li:last-child { border-bottom: none; }
.resource-list li a { color: #2563eb; text-decoration: none; }
.rl-desc { color: var(--bm-text-faint); font-size: var(--fs-sm); }  /* 전역: .resource-list 밖(vuln·cert 등)에서도 회색 보조텍스트 — 스코프 버그 수정(2026-07-03) */

/* ===== 보안점검 모듈 (Batch C) ===== */
.summary-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; color: #475569; }
.inline-form {
    margin: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.inline-form select, .inline-form input[type="text"] { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.inline-form input[type="text"] { min-width: 140px; }
.add-item { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.complete-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.complete-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; margin-bottom: 8px; box-sizing: border-box; }
.panel-note { margin-top: 14px; padding: 12px 14px; background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: 8px; font-size: 13px; }
.panel-note p { margin: 6px 0 0; color: var(--bm-text-sub); }
.button.small {
    padding: 5px 12px;
    font-size: 12px;
}
.button.ghost { background: var(--bm-surface); color: var(--bm-primary); border: 1px solid var(--bm-border-strong); }
.button.danger {
    background: var(--bm-danger-bg);
    color: var(--bm-danger);
    border: 1px solid var(--bm-danger-bd);
}

/* ===== 사이드바 4대 그룹 — 2단: 레일에서 선택된 그룹만 표시 ===== */
.menu-group { display: none; flex-direction: column; }
.menu-group.on { display: flex; }
.menu-group .menu-items { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; overflow: hidden; }
.menu-group.collapsed .menu-items { display: none; }
/* 섹션 헤더를 버튼(토글)로 */
.menu .menu-section.toggle .caret {
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.15s;
    color: var(--bm-text-faint);
}
.menu-group.collapsed .menu-section.toggle .caret { transform: rotate(-90deg); }
/* ===== 신청 폼 안내 패널(절차 파이프라인·승인자 안내) ===== */
.guide-title { font-size: 15px; margin: 0 0 18px; }
.guide-flow { margin-bottom: 20px; }
.flow-step .fs-sub { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: var(--bm-text-faint); line-height: 1.4; }   /* 공용(2026-09-04) */
.flow-step.current .fs-sub { color: var(--bm-text-sub); }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.guide-card { border: 1px solid var(--bm-border); border-radius: 10px; padding: 12px 14px; background: var(--bm-surface-sub); }
.guide-card.highlight { border-color: var(--bm-primary); background: var(--bm-blue-10, #eff6ff); }
.guide-card .gc-head { font-size: 12px; font-weight: 700; color: var(--bm-primary); margin-bottom: 6px; }
.guide-card .gc-body { font-size: 13px; color: var(--bm-text-sub); line-height: 1.5; }

/* ===== 신청 처리구분 세그먼트(신규/변경/폐지) — div 구조 대응 ===== */
.seg-radio > div { display: inline-flex; border: 1px solid var(--bm-border-strong); border-radius: 8px; overflow: hidden; }
.seg-radio > div > div { border-right: 1px solid var(--bm-border); }
.seg-radio > div > div:last-child { border-right: none; }
.seg-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-radio label { display: block; padding: 9px 22px; cursor: pointer; font-size: 14px; color: var(--bm-text-sub); user-select: none; transition: background .12s, color .12s; }
.seg-radio label:hover { background: var(--bm-hover, #f1f5f9); }
.seg-radio label.on,
.seg-radio label:has(input:checked) { background: var(--bm-primary); color: #fff; font-weight: 700; }

/* ===== 승인자 콜아웃(대상 시스템 아래) ===== */
.approver-callout { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 12px; background: var(--bm-blue-10, #eff6ff); border: 1px solid var(--bm-primary); border-radius: 8px; }
.approver-callout .ac-label { font-size: 11px; font-weight: 700; color: var(--bm-primary); background: var(--bm-surface); border: 1px solid var(--bm-primary); border-radius: 6px; padding: 1px 7px; }
.approver-callout .ac-name { font-size: 14px; font-weight: 600; color: var(--bm-text); }

/* ===== 시스템별 승인자 안내 표 ===== */
.approver-table th, .approver-table td { border: 1px solid var(--bm-border); padding: 7px 10px; text-align: left; }
.approver-table th { background: var(--bm-surface-sub); font-weight: 700; color: var(--bm-text-sub); }
.approver-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.approver-table td, .approver-table th { word-break: keep-all; overflow-wrap: anywhere; vertical-align: top; }
.approver-table td.cat-cell { vertical-align: middle; background: var(--bm-surface-sub); font-weight: 600; color: var(--bm-text-sub); }

/* 폼/안내 패널 폭 정렬 */
.guide-panel {
    margin-top: 18px;
}

/* 파이프라인 단계 라벨/담당자 이름 (신청 상세) */
.flow-step .fs-label { display: block; }
.flow-step .fs-name { display: inline-block; margin-top: 7px; max-width: 96%; padding: 3px 10px; font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--bm-primary); background: var(--bm-blue-10, #eff6ff); border: 1px solid var(--bm-primary); border-radius: 12px; word-break: keep-all; white-space: normal; }
.flow-step:not(.done):not(.current) .fs-name { color: var(--bm-text-sub); background: var(--bm-surface-sub); border-color: var(--bm-border); }
/* 정보 그리드 강조/보조 */
.detail-grid .emph { font-weight: 600; color: #1e293b; }
.detail-grid .text-faint { font-weight: 400; font-size: 12px; }
/* 여러 줄 값(요청 권한의 정책 JSON 등) — 한 줄 전체 폭, 긴 ARN 은 칸 안에서 줄바꿈 */
.detail-grid .detail-wide { grid-column: 1 / -1; }
.detail-grid .detail-wide p { overflow-wrap: anywhere; }

/* 신청 상세 — 분류별 그룹 섹션 */
.detail-group { margin-top: 18px; padding: 16px 18px; background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: 12px; }
.detail-group:first-of-type { margin-top: 0; }
.detail-group-title { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--bm-primary); letter-spacing: .02em; padding-left: 9px; border-left: 4px solid var(--bm-primary); }
.detail-group .detail-section { margin: 0 0 10px; }
.detail-group .detail-section:last-child { margin-bottom: 0; }

/* ===== 3단 레이아웃: 본문 + 우측 정보 레일 ===== */
.main-wrap { flex: 1; display: flex; min-width: 0; }  /* 유동 폭 — 넓은 화면 꽉 채움. 폼만 .form-grid에서 max-width 제한 */
.main-wrap .content { flex: 1; min-width: 0; }
.rail { flex: 0 0 300px; width: 300px; padding: 30px 24px 0; display: flex; flex-direction: column; gap: 14px; }
.rail-card { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--bm-shadow); }
.rail-title { font-size: 12.5px; font-weight: 800; color: var(--bm-primary); margin-bottom: 10px; letter-spacing: .02em; }
.rail-badge { display: inline-block; min-width: 18px; text-align: center; background: var(--bm-primary); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 6px; margin-left: 2px; }
/* ⚠ 이 `.rail-link` 는 **우측 정보 레일** 전용이다(좌측 아이콘 레일은 .rail-btn/.rail-home/.rail-solo).
   좌측 레일 항목에 이 이름을 쓰면 여기가 뒤에 선언돼 있어 세로 아이콘 배치가 덮인다. */
.rail-link { display: block; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--bm-text-sub); text-decoration: none; }
.rail-link:hover { background: var(--bm-hover); color: var(--bm-primary); }
.rail-item { display: block; padding: 8px 0; border-bottom: 1px solid var(--bm-border); text-decoration: none; }
.rail-item:last-of-type { border-bottom: none; }
.rail-item .ri-sys { display: block; font-size: 13px; color: var(--bm-text); font-weight: 500; line-height: 1.35; }
.rail-item .ri-st { display: block; font-size: 11px; color: var(--bm-text-faint); margin-top: 2px; }
.rail-item:hover .ri-sys { color: var(--bm-primary); }
.rail-empty { font-size: 12.5px; color: var(--bm-text-faint); margin: 4px 0; }
.rail-more { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--bm-primary); text-decoration: none; }
.rail-help { font-size: 12px; color: #64748b; line-height: 1.5; margin: 6px 0 0; }

/* 좁은 화면에선 레일 숨김(본문 우선) */
@media (max-width: 1200px) { .rail { display: none; } }

.sum-card.green { --sum-accent: #16a34a; border-left-color: var(--sum-accent); }
.sum-card.green .sum-num { color: #15803d; }
.user-link { display:inline-flex; align-items:center; gap:7px; padding:3px 7px 3px 4px;
    border-radius:999px; font-weight:600; color:var(--bm-text); text-decoration:none;
    transition:background .15s, color .15s; }
.user-link:hover { background:var(--bm-blue-10); color:var(--bm-primary); text-decoration:none; }
.user-ava { width:24px; height:24px; border-radius:50%; background:var(--bm-blue-10); color:var(--bm-primary);
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s, color .15s; }
.user-ava svg { width:15px; height:15px; }
.user-link:hover .user-ava { background:var(--bm-primary); color:#fff; }
.user-chev { width:13px; height:13px; color:var(--bm-text-faint); flex:0 0 auto; }
.user-link:hover .user-chev { color:var(--bm-primary); }

/* 입퇴사 일괄완료 — 다른 팀 읽기전용 표시 */
.bulk-note { font-size: 11px; color: #94a3b8; font-weight: 400; }
.bulk-readonly { font-size: 12px; color: #94a3b8; padding: 4px 8px; }

/* ===== 세션 만료 카운트다운 (우측 상단, 클릭 연장) ===== */
.session-timer {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
    color: #059669; background: #fff;
    border: 1px solid #6ee7b7; border-radius: 999px; padding: 3px 10px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    transition: border-color .15s, background .15s, transform .1s;
}
.session-timer:hover { background: #ecfdf5; border-color: #10b981; }
.session-timer:active { transform: scale(.97); }
.session-timer .st-ico { font-size: 11px; line-height: 1; }
.session-timer .st-text { letter-spacing: .3px; }
.session-timer .st-ext { font-size: 11px; font-weight: 800; opacity: .65; border-left: 1px solid currentColor; padding-left: 7px; }
.session-timer:hover .st-ext { opacity: 1; }
/* 5분 이하: 주황 테두리 */
.session-timer.warn { color: #b45309; border-color: #fbbf24; background: #fffbeb; animation: sessPulse 1.6s ease-in-out infinite; }
/* 1분 이하: 빨강 테두리 + 펄스 */
.session-timer.danger { color: #dc2626; border-color: #f87171; background: #fef2f2; animation: sessPulse 1s ease-in-out infinite; }
@keyframes sessPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } 50% { box-shadow: 0 0 0 4px rgba(220,38,38,.16); } }

/* 만료 임박 모달 */
.session-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; z-index: 1000; }
.session-modal.open { display: flex; }
.session-modal-box { background: var(--bm-surface); border-radius: 16px; padding: 28px 30px; max-width: 380px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: smPop .18s ease-out; }
@keyframes smPop { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.session-modal-box .sm-ico { font-size: 40px; }
.session-modal-box h3 { font-size: 18px; margin: 10px 0 8px; color: #0f172a; }
.session-modal-box p { font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 20px; }
.session-modal-box p strong { color: #dc2626; font-variant-numeric: tabular-nums; }
.session-modal-box .sm-actions { display: flex; gap: 10px; justify-content: center; }

/* ===== 사이드바 2단 트리(하위 메뉴 토글) ===== */
.menu-tree { display: flex; flex-direction: column; }
.menu-tree-head { display: flex; align-items: center; border-radius: var(--bm-radius-sm); }
.menu-tree-link {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
    padding: 8px 6px 8px 14px; color: var(--bm-text-sub); text-decoration: none;
    font-size: 14.5px; font-weight: 500; border-left: 3px solid transparent;
    border-radius: var(--bm-radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .15s, color .15s;
}
.menu-tree-link:hover { background: var(--bm-hover); color: var(--bm-text); }
.menu-tree-head.active .menu-tree-link { background: var(--bm-blue-10); color: var(--bm-primary); border-left-color: var(--bm-primary); font-weight: 700; }
.tree-caret { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--bm-text-faint); font-size: 10px; padding: 8px 12px; line-height: 1; transition: transform .15s; }
.tree-caret:hover { color: var(--bm-primary); }
.menu-tree.collapsed .tree-caret { transform: rotate(-90deg); }
.menu-tree-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; overflow: hidden; }
.menu-tree.collapsed .menu-tree-children { display: none; }
.menu-tree-children a {
    font-size: 13px; padding: 7px 12px 7px 30px; color: var(--bm-text-faint);
    border-radius: var(--bm-radius-sm); border-left: 3px solid transparent; text-decoration: none;
    position: relative;
}
.menu-tree-children a::before { content: "·"; position: absolute; left: 18px; color: #cbd5e1; }
.menu-tree-children a:hover { background: var(--bm-hover); color: var(--bm-text); }
.menu-tree-children a.active { background: var(--bm-blue-10); color: var(--bm-primary); border-left-color: var(--bm-primary); font-weight: 700; }
.menu-tree-children a.active::before { color: var(--bm-primary); }

/* 사이드바 최상단 펼치기 컨트롤 */
.menu-controls { display: flex; gap: 4px; margin-bottom: 10px; }
.menu-controls button {
    flex: 1; font-family: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
    color: var(--bm-text-faint); background: var(--bm-surface);
    border: 1px solid var(--bm-border); border-radius: 6px; padding: 5px 4px;
    white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
}
.menu-controls button:hover { color: var(--bm-primary); border-color: var(--bm-primary); background: var(--bm-blue-10, #eff6ff); }
.menu-controls button:active { transform: scale(.96); }

/* ===== 사이드바 너비 조절(드래그) + 접기/펼치기 ===== */
.sb-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 30; }
.sb-resizer:hover { background: var(--bm-blue-10, #eff6ff); }
body.sb-resizing { cursor: col-resize; user-select: none; }
body.sb-resizing .sb-resizer { background: var(--bm-primary); }
.sb-collapse {
    position: absolute; top: 14px; right: 10px; z-index: 31;
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--bm-border); background: var(--bm-surface);
    color: var(--bm-text-faint); font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sb-collapse:hover { color: var(--bm-primary); border-color: var(--bm-primary); }

/* ===== 메뉴 아이콘 + 미니(아이콘만) 모드 ===== */
.mtxt { overflow: hidden; text-overflow: ellipsis; }
.menu-tree-children a .mi { display: none; }   /* 하위 항목은 점(·) 사용 */

.layout.sb-mini .sidebar { width: 64px; flex: 0 0 64px; padding: 28px 8px 16px; }
.layout.sb-mini .menu-controls { display: none; }
.layout.sb-mini .menu-section { display: none; }
.layout.sb-mini .menu-items { display: flex !important; }            /* 그룹 접힘 무시하고 아이콘 노출 */
.layout.sb-mini .menu-group { border-top: 1px solid var(--bm-border); padding-top: 6px; margin-top: 6px; }
.layout.sb-mini .menu-group:first-of-type { border-top: none; margin-top: 0; }
.layout.sb-mini .mtxt, .layout.sb-mini .tree-caret, .layout.sb-mini .menu-soon { display: none; }
.layout.sb-mini .menu-tree-children { display: none !important; }
.layout.sb-mini .menu a, .layout.sb-mini .menu-tree-link {
    text-align: center; justify-content: center; padding: 11px 0;
    border-left: none !important;          /* 활성 좌측 바 제거 → 가운데 정렬 유지 */
}
.layout.sb-mini .menu a.active, .layout.sb-mini .menu-tree-head.active .menu-tree-link { border-radius: 10px; }
.layout.sb-mini .logo-title, .layout.sb-mini .logo-subtitle, .layout.sb-mini .sidebar-foot { display: none; }
.layout.sb-mini .logo { justify-content: center; gap: 0; }
.layout.sb-mini .sb-resizer { display: none; }
.layout.sb-mini .sb-collapse { right: 50%; transform: translateX(50%); top: 8px; }
/* 신규 계정 생성 상세 — 지정 승인자/처리자 표시 */
.ap-line { font-size: 12px; color: #334155; line-height: 1.5; }
.ap-line b { color: var(--bm-primary); font-weight: 700; margin-right: 4px; font-size: 10.5px; }

/* ===== 섹션 상단 가로 하위 탭 — 페이지 내비게이션(흰 패널 '위') ===== */
.section-subtabs a { border: 1px solid var(--bm-blue-20); border-radius: 8px; background: var(--bm-blue-10); color: var(--bm-primary); padding: 9px 18px; font-size: 14px; font-weight: 600; }
.section-subtabs a:hover { background: var(--bm-blue-20); border-color: var(--bm-primary); }
.section-subtabs a.on { background: var(--bm-primary); color: #fff; border-color: var(--bm-primary); }

/* 큰 절(그룹) 헤더 아이콘 — 항목엔 아이콘 없이 텍스트만(풀 모드) */
.menu .menu-section::before {
    content: "";
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background: var(--bm-primary);
    flex: 0 0 auto;
    display: none;
}
.layout.sb-mini .sec-ico { display: none; }

/* ===== 단색 라인 아이콘(Lucide) 크기 ===== */
.mi {
    display: none;
    text-align: center;
    margin-right: 9px;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.layout.sb-mini .mi {
    margin: 0;
    vertical-align: middle;
    display: inline-block;
    width: 21px;
    height: 21px;
}
.sec-ico {
    display: inline-block;
    margin-right: 0;
    font-size: 14px;
    line-height: 1;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    color: var(--bm-primary);
    flex: 0 0 auto;
}
.menu-tree-link .mi, .menu a .mi { stroke-width: 2; }

/* 입퇴사 체크리스트 표 — 그룹마다 동일 열 폭(정렬 통일) */
.cg-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.cg-table th, .cg-table td { vertical-align: top; word-break: break-word; }
.licon { flex: 0 0 auto; }
/* ===== 온보딩 PPT 뷰어 ===== */
.ob-viewer { margin-top: 8px; }
.ob-stage { position: relative; background: #0f172a; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.ob-stage img#ob-img { max-width: 100%; max-height: 70vh; display: block; }
.ob-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); color: #0f172a; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ob-nav:hover { background: var(--bm-hover); }
.ob-nav.prev { left: 12px; } .ob-nav.next { right: 12px; }
.ob-counter { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(15,23,42,.7); color: #fff; font-size: 12px; padding: 4px 12px; border-radius: 12px; }
.ob-fs-in { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 8px; border: none; background: rgba(255,255,255,.85); cursor: pointer; font-size: 15px; }
.ob-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 2px; }
.ob-thumbs img { height: 56px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; flex: 0 0 auto; }
.ob-thumbs img.on { border-color: var(--bm-primary); }
/* 전체화면 시 — 슬라이드가 화면을 꽉 채움(contain) */
.ob-viewer:fullscreen, .ob-viewer:-webkit-full-screen { background: #0f172a; padding: 0; margin: 0; width: 100vw; height: 100vh; }
.ob-viewer:fullscreen .ob-thumbs, .ob-viewer:-webkit-full-screen .ob-thumbs { display: none; }
.ob-viewer:fullscreen .ob-stage, .ob-viewer:-webkit-full-screen .ob-stage { width: 100vw; height: 100vh; min-height: 0; border-radius: 0; background: #0f172a; }
.ob-viewer:fullscreen #ob-img, .ob-viewer:-webkit-full-screen #ob-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* 온보딩 버전 이력 관리 버튼 */

/* 재직증명서 신청 카드 + 파이프라인(상세 파이프라인과 동일 스타일) */
.cert-card { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); box-shadow: var(--bm-shadow); padding: 18px 24px 22px; margin-bottom: 14px; }
.cert-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }

/* 비활성 표시 박스(신청자명 등) */
.disabled-box { background:var(--bm-surface-sub); color:var(--bm-text-faint); border:1px solid var(--bm-border); border-radius:8px; padding:8px 10px; width:100%; box-sizing:border-box; cursor:not-allowed; }

/* 재직증명서 주민번호 분리 입력 */
.rrn-row { display:inline-flex; align-items:center; gap:8px; }
.rrn-row .rrn-part { width:130px !important; flex:0 0 130px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-family:inherit; box-sizing:border-box; }
.rrn-row .rrn-g { width:46px !important; flex:0 0 46px; text-align:center; padding:8px 0; border:1px solid #cbd5e1; border-radius:8px; font-family:inherit; box-sizing:border-box; }
.rrn-dash { color:#64748b; font-weight:700; }
.rrn-mask { color:#94a3b8; letter-spacing:2px; }
#purpose-sel { padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-family:inherit; }
#purpose-custom { padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-family:inherit; width:100%; box-sizing:border-box; }

/* 재직증명서 신청 — 절차 안내(폼 하단 1회) */
.cert-guide { margin-top: 20px; margin-bottom: 0; }
.cert-guide .flow-caption {
    font-size: 12px;
    font-weight: 700;
    color: var(--bm-text-sub);
    margin-bottom: 6px;
}

/* 권한 현황 — 인원 칩 */
.chip { display:inline-block; font-size:12px; padding:2px 9px; margin:2px 2px 2px 0; border-radius:12px;
        background:var(--bm-bg); color:var(--bm-text); border:1px solid var(--bm-border); white-space:nowrap; }

/* 로그인 — 아이디 저장 체크박스 */
.login-remember { display:flex; align-items:center; gap:7px; margin:2px 0 16px; font-size:13px; color:var(--bm-text-sub); cursor:pointer; user-select:none; }
.login-remember input { width:15px; height:15px; margin:0; cursor:pointer; }

/* 포털 권한 현황 — 매트릭스 가독성 */
.perm-matrix td, .perm-matrix th { vertical-align: top; word-break: keep-all; line-height: 1.45; }

/* 마이페이지 — 내 권한 (컴팩트·정돈) */
.myperm { display:flex; flex-direction:column; }
.myperm-row { display:grid; grid-template-columns:104px 1fr; gap:12px; padding:9px 0;
              border-bottom:1px solid var(--bm-border); align-items:start; }
.myperm-row:last-child { border-bottom:none; }
.myperm-k { font-weight:600; color:var(--bm-text-faint); font-size:11.5px; letter-spacing:.2px; padding-top:2px; }
.myperm-v { font-size:12.5px; color:var(--bm-text); line-height:1.5; }
.myperm-v .text-faint { font-size:12px; }
/* 역할/시스템 칩 — 옅은 브랜드 틴트, 덜 둥글게 */
.myperm .chip { font-size:11px; padding:2px 8px; margin:1px 3px 1px 0; border-radius:6px;
                background:var(--bm-blue-10, #eff6ff); color:var(--bm-primary); border:1px solid transparent; }
/* 할 수 있는 것 — 체크 리스트(불릿 제거) */
.myperm-caps { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.myperm-caps li { position:relative; padding-left:17px; font-size:12px; line-height:1.45; color:var(--bm-text-sub); }
.myperm-caps li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--bm-primary); font-weight:700; font-size:11px; }
@media (max-width:860px) {
    /* 라벨을 값 위로 쌓아 한눈에 */
    .myperm-row { grid-template-columns:1fr; gap:3px; padding:8px 0; }
    .myperm-k { font-size:10.5px; padding-top:0; }
    .myperm-v { font-size:11.5px; }
    .myperm .chip { font-size:10.5px; padding:2px 7px; }
    .myperm-caps li { font-size:11.5px; }
}

/* 임직원 — 조직도 */
/* 조직도 — 트리(상단 CEO → 팀 → 팀원) */
.orgchart { overflow-x:auto; padding:8px 2px 4px; }
.org-top { display:flex; justify-content:center; }
.org-trunk { width:2px; height:22px; background:#9db4d6; margin:0 auto; }
.org-box { min-width:136px; border:1px solid var(--bm-border-strong); border-radius:10px; background:var(--bm-surface);
    text-align:center; font-size:13px; overflow:hidden; box-shadow:0 1px 3px rgba(20,40,80,.07); }
.org-box .ob-head { background:var(--bm-primary); color:#fff; font-weight:700; padding:7px 14px; white-space:nowrap; letter-spacing:.01em; }
.org-box .ob-cnt { display:inline-block; margin-left:6px; font-weight:600; font-size:10.5px;
    background:rgba(255,255,255,.24); color:#fff; padding:1px 7px; border-radius:999px; vertical-align:middle; }
.org-box .ob-name { padding:8px 14px; color:var(--bm-text); white-space:nowrap; }
.org-box .ob-name.muted { color:var(--bm-text-faint); }
.org-box .ob-role { color:var(--bm-primary); font-weight:700; }
.org-ceo { min-width:162px; }
.org-ceo .ob-head { background:var(--bm-navy-900); }
/* 팀 컬럼 행 + 연결선 */
.org-teams { display:flex; justify-content:center; align-items:flex-start; }
.org-col { position:relative; padding:22px 30px 0; display:flex; flex-direction:column; align-items:center; }
.org-col::before { content:""; position:absolute; top:0; left:50%; width:2px; height:22px; background:#9db4d6; }
.org-col::after { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:#9db4d6; }
.org-col:first-child::after { left:50%; }
.org-col:last-child::after { right:50%; }
.org-col:only-child::after { display:none; }
/* 팀원 — 세로 체인 */
.org-mems { display:flex; flex-direction:column; align-items:center; }
/* 팀원 다수 — 세로 2열(하위팀 없는 팀, 예: 통합 개발팀) */
.org-memrow { display:flex; justify-content:center; align-items:flex-start; gap:12px; }
.org-mem::before { content:""; position:absolute; top:-14px; left:50%; width:2px; height:14px; background:#cbd5e1; }
/* 하위팀(백엔드/프론트·기획/마케팅) — 팀 박스 아래 가지 */
.org-subtrunk { width:2px; height:18px; background:#9db4d6; margin:6px auto 0; }
.org-subrow { display:flex; justify-content:center; align-items:flex-start; }
.org-subcol { position:relative; padding:18px 16px 0; display:flex; flex-direction:column; align-items:center; }
.org-subcol::before { content:""; position:absolute; top:0; left:50%; width:2px; height:18px; background:#9db4d6; }
.org-subcol::after { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:#9db4d6; }
.org-subcol:first-child::after { left:50%; }
.org-subcol:last-child::after { right:50%; }
.org-subcol:only-child::after { display:none; }
.org-sub-box { min-width:110px; }
.org-sub-box .ob-head-sub { background:var(--bm-primary-light); font-size:12.5px; padding:6px 12px; }
.org-mem {
    position: relative;
    margin-top: 14px;
    min-width: 112px;
    padding: 7px 12px;
    transition: border-color .12s, box-shadow .12s;
}
.org-mem:hover { border-color:var(--bm-primary); box-shadow:0 3px 10px rgba(60,122,229,.18); }

/* 보안 서약서 */
.oath-body { white-space:normal; line-height:1.75; font-size:14px; color:var(--bm-text); background:var(--bm-bg); border:1px solid var(--bm-border); border-radius:var(--bm-radius); padding:16px 18px; margin-bottom:14px; }
.oath-check { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--bm-text-sub); margin-right:14px; }
.oath-check input { width:15px; height:15px; }

/* 보안 서약서 본문 — 계층 번호(1. / 1) / ①) 들여쓰기 */
.oath-body p { margin:0 0 8px; line-height:1.7; }
.oath-body .oath-strong { font-weight:700; }
.oath-body .oath-center { text-align:center; letter-spacing:4px; color:var(--bm-text-sub); }
.oath-body .oath-p  { padding-left:1.4em; }
.oath-body .oath-n1 { padding-left:1.5em; text-indent:-1.5em; }
.oath-body .oath-n2 { padding-left:2.9em; text-indent:-1.4em; }
.oath-body .oath-n3 { padding-left:4.2em; text-indent:-1.3em; }

/* 메뉴 권한 표시 — 권한 없는 항목 흐림 + 자물쇠 */
.menu a.locked, .menu-tree-head.locked .menu-tree-link { opacity: .42; }
.menu a.locked:hover, .menu-tree-head.locked .menu-tree-link:hover { opacity: .6; }
.menu a.locked::after { content: "\1F512"; float: right; font-size: 10px; margin-left: 6px; opacity: .8; }
.menu-tree-head.locked .menu-tree-link::after { content: "\1F512"; font-size: 10px; margin-left: auto; opacity: .8; }
.layout.sb-mini .menu a.locked::after, .layout.sb-mini .menu-tree-head.locked .menu-tree-link::after { display: none; }

/* ===== 모바일 대응 ===== */
.sb-burger { display: none; background: none; border: 1px solid var(--bm-border); border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--bm-text); margin-right: 4px; }
.sb-backdrop { display: none; }

@media (max-width: 860px) {
    .content { padding: 18px 16px 0; }
    .topbar { align-items: center; gap: 10px; margin-bottom: 18px; }
    .topbar h1 { font-size: 20px; }
    .sb-burger { display: inline-flex; align-items: center; }

    /* 사이드바 → 오프캔버스 드로어 (레일 + 패널 함께 슬라이드) */
    .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000;
               width: 320px !important; flex-basis: 320px !important;
               transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
    .layout.sb-open .sidebar { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.25); }
    .nav-panel { flex: 1 1 auto; width: auto; }
    .layout.nav-collapsed .nav-panel { display: flex; }   /* 모바일 드로어는 하위 메뉴 항상 표시 */
    .sb-collapse { display: none; }                        /* 모바일에선 접기 버튼 불필요 */
    .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4);
                   opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 999; }
    .layout.sb-open .sb-backdrop { opacity: 1; visibility: visible; }
    .sb-resizer { display: none !important; }
    .main-wrap { max-width: 100%; }

    /* 표 가로 스크롤 */
    .panel table, table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

    /* 폼 그리드 1열 */
    .form-grid { grid-template-columns: 1fr !important; }
    /* 요약 카드 줄바꿈 */
    .summary-cards { flex-wrap: wrap; }
    .summary-cards .sum-card { flex: 1 1 44%; }
    /* 세션타이머 텍스트 축약 */
    .session-timer .st-ext { display: none; }
}

@media (max-width: 480px) {
    .content { padding: 14px 12px 0; }
    .summary-cards .sum-card { flex: 1 1 100%; }
    .topbar p { display: none; }
}

/* 로그인 — 모바일 */
@media (max-width: 480px) {
    .login-wrap { padding: 16px; }
    .login-card { width: 100%; max-width: 100%; padding: 28px 20px 24px; border-radius: 14px; box-sizing: border-box; }
}

/* 모바일 — 타이포·탭·유저박스 줄바꿈 보정 */
@media (max-width: 860px) {
    .topbar { flex-wrap: wrap; }
    .topbar > div:first-of-type { flex: 1 1 100%; order: 2; }   /* 제목은 아래 줄 전체폭 */
    .topbar .user-box { order: 1; margin-left: auto; }
    .topbar h1 { font-size: 18px; line-height: 1.3; }
    .user-box { gap: 8px; padding: 6px 8px 6px 12px; font-size: 12.5px; }
    .user-box .user-link { white-space: nowrap; }
    .logout-button { white-space: nowrap; padding: 6px 11px; }
    .session-timer { white-space: nowrap; }

    /* 분류 탭(게시판 등)·하위 탭 → 가로 스크롤·한 줄 유지 */
    .seg.list-filter, .section-subtabs { display: flex; flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; border-radius: 8px; }
    .seg.list-filter a, .section-subtabs a { white-space: nowrap; flex: 0 0 auto; }
}

/* 모바일 — 박스 촘촘하게 */
@media (max-width: 860px) {
    .panel { padding: 14px; margin-bottom: 14px; }
    .panel-header { margin-bottom: 12px; }
    .panel-header h2 { font-size: 16px; }

    /* 요약 카드 2열 컴팩트 */
    .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
    .sum-card { padding: 11px 12px; border-left-width: 3px; }
    .sum-num { font-size: 21px; }
    .sum-label { font-size: 11.5px; }
    .sum-sub { font-size: 10.5px; }

    /* 빠른 신청 2열 컴팩트 */
    .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .quick-card { padding: 10px; gap: 3px; border-radius: 10px; }
    .quick-chip { width: 26px; height: 26px; font-size: 10.5px; border-radius: 7px; }
    .quick-card strong { font-size: 13px; }
    .quick-card span { font-size: 10.5px; line-height: 1.3; color: var(--bm-text-faint); }
    .quick-group-label { font-size: 12.5px; margin-top: 4px; }
    .quick-group-label span { font-size: 10.5px; }
}
@media (max-width: 380px) {
    .quick-card strong { font-size: 12px; }
}

/* 모바일 — 통계 카드 넘침·토글 줄바꿈 보정 */
@media (max-width: 860px) {
    .card-grid, .card-grid.grid-3, .card-grid.grid-4, .card-grid.grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; margin-bottom: 14px; }
    .stat-card { padding: 12px 13px; }
    .stat-card span { font-size: 11.5px; }
    .stat-card strong { font-size: 22px; }

    /* 토글·버튼 한 줄 유지 */
    .seg { max-width: 100%; }
    .seg a { white-space: nowrap; padding: 7px 11px; font-size: 12.5px; }
    .button.small, .inline-actions .button { white-space: nowrap; }
}

/* ============================================================
   Phase 1 — 슬랙식 클린 패스 (평평·헤어라인·여백)
   [dup-예외] 이 구획의 .menu a:hover·.user-box·.stat-card 재정의는
   위 모바일 @media 블록과의 순서 의존(재정의가 media보다 뒤여야 승리)으로
   기본정의와 병합하지 않음 — 2026-07-10 CSS 통합 때 검증·보류. 나머지 29개는 병합 완료.
   ============================================================ */

/* 패널: 그림자 대신 얇은 테두리 + 여백 ↑ */
/* [dup-예외] .panel 기본정의는 상단 — 이 재정의는 모바일 @media보다 뒤에 있어야 해 병합 보류(fe 원칙 예외) */
.panel { box-shadow: none; border: 1px solid var(--bm-border); padding: 22px 24px; }
.panel-header h2 { font-weight: 700; font-size: 16px; letter-spacing: -0.1px; }

/* 표: 박스 대신 행 구분선 + 차분한 헤더 + 옅은 hover */
th {
    text-align: left;
    background: transparent;
    color: var(--bm-text-faint);
    border-bottom: 1px solid var(--bm-border-strong);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .2px;
    padding: 9px 12px;
}
th:first-child, th:last-child { border-radius: 0; }
td {
    color: var(--bm-text);
    border-bottom: 1px solid var(--bm-border);
    padding: 12px;
}
tbody tr:hover {
    background: var(--bm-mist);
}
tbody tr:last-child td { border-bottom: none; }

/* 긴 자유 텍스트 셀 말줄임(신청 목록 '요청 권한' 등) — 전체 내용은 title 툴팁으로 */
td.cell-clip {
    max-width: 270px;   /* 340→270 — 요청 권한·신청 사유 열 축소(2026-09-03 JM) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 열 많은 목록 표 — 좁은 화면에서 짧은 열이 한 글자씩 세로로 꺾이는 것 방지.
   전 셀 줄바꿈 금지 + 넘치면 표 자체가 가로 스크롤(모바일 쿼리의 기존 패턴을 스코프 클래스로 상시화). */
table.tbl-nowrap { width: 100%; white-space: nowrap; }

/* 시스템 안내 — 분류별 표가 여러 장이어도 열 폭 배분을 고정해 오와열을 맞춘다(2026-08-24 JM 지적).
   table-layout:fixed라 셀이 넘치면 말줄임, 화면이 좁으면 min-width 아래에서 래퍼 스크롤. */
table.guide-table { table-layout: fixed; min-width: 1080px; }
table.guide-table td { overflow: hidden; text-overflow: ellipsis; }
table.guide-table th:nth-child(1), table.guide-table td:nth-child(1) { width: 13%; }
table.guide-table th:nth-child(2), table.guide-table td:nth-child(2) { width: 15%; }
table.guide-table th:nth-child(3), table.guide-table td:nth-child(3) { width: 19%; }
table.guide-table th:nth-child(4), table.guide-table td:nth-child(4) { width: 18%; }
table.guide-table th:nth-child(5), table.guide-table td:nth-child(5) { width: 12%; }
table.guide-table th:nth-child(6), table.guide-table td:nth-child(6) { width: 8%; }
table.guide-table th:nth-child(7), table.guide-table td:nth-child(7) { width: 15%; }
table.guide-table td:nth-child(7) { overflow: visible; }   /* 신청 버튼 잘림 방지(2026-08-24 JM) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ⚠ display:block 방식은 표 폭이 내용 길이를 따라가 사용자마다 폭이 달라졌다(2026-08-21 JM 발견) — 래퍼 스크롤로 교체 */

/* 카드류: 그림자 제거(테두리만) */
.stat-card, .sum-card, .quick-card, .cert-card, .rl-card { box-shadow: none; }
.stat-card { border: 1px solid var(--bm-border); }

/* 사이드바: 본문과 옅은 그레이로 분리 + 또렷한 active pill */
/* [dup-예외] .sidebar — @media(min-width:861px) position 규칙과 순서 의존, 병합 보류 */
.sidebar { background: var(--bm-surface-sub); border-right: 1px solid var(--bm-border); }
.menu a, .menu-tree-link { border-left: none; border-radius: 8px; }
.menu a.active, .menu-tree-head.active .menu-tree-link {
    background: var(--bm-blue-10); color: var(--bm-primary); font-weight: 700; border-left: none;
}
.menu a:hover { background: var(--bm-hover); }
.menu .menu-section.toggle {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    border-top: 1px solid var(--bm-border);
    color: var(--bm-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    padding-top: 12px;
}
.menu .menu-section.toggle::before { display: block; }   /* 그룹 헤더 좌측 액센트 바 표시(강조) */
.menu .menu-section.toggle:hover {
    color: var(--bm-primary);
}
.menu .menu-section.toggle .menu-lock {
    margin-left: 6px;
    color: var(--bm-text-faint);
    font-weight: 600;
}

/* 세그먼트(탭) — 슬랙식 옅은 pill, 박스 테두리 약화 */
.seg {
    display: inline-flex;
    border: 1px solid var(--bm-border-strong);
    border-radius: var(--bm-radius-sm);
    overflow: hidden;
    border-color: var(--bm-border);
}
.seg a.on {
    font-weight: 600;
    background: var(--bm-blue-10);
    color: var(--bm-primary);
}
.seg.list-filter, .section-subtabs { border: none; }
.seg.list-filter { gap: 4px; }
.seg.list-filter a { border: none; border-radius: 8px; color: var(--bm-text-sub); }
.section-subtabs a + a, .seg.list-filter a + a { border-left: none; }
/* 게시판 분류 필터(list-filter)는 옅은 칩 유지 — 섹션 하위메뉴는 아래에서 강조 */
.seg.list-filter:not(.section-subtabs) a.on { background: var(--bm-blue-10); color: var(--bm-primary); }

/* 섹션 하위메뉴 — 페이지 이동이므로 확실히 눈에 띄게: 블루 패밀리 탭 + 솔리드 활성.
   ⚠ base.html이 'seg list-filter section-subtabs' 3클래스를 함께 부여 → .seg.list-filter a(0,2,1)가
   .section-subtabs a(0,1,1)를 이겨 테두리·글자가 회색으로 남던 문제. 복합 선택자로 구체성을 올려 확실히 이긴다. */
.section-subtabs {
    margin: 0 0 18px;
    flex-wrap: wrap;
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    width: 100%;
    gap: 8px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--bm-border);
}
.seg.list-filter.section-subtabs a,
.section-subtabs a { padding: 9px 18px; font-size: 14px; font-weight: 600;
                     border: 1px solid var(--bm-blue-20); border-radius: 8px;
                     background: var(--bm-blue-10); color: var(--bm-primary);
                     transition: background .12s ease, color .12s ease,
                                 border-color .12s ease, box-shadow .12s ease; }
.seg.list-filter.section-subtabs a:hover,
.section-subtabs a:hover { background: var(--bm-blue-20); color: var(--bm-primary);
                           border-color: var(--bm-primary); }
.seg.list-filter.section-subtabs a.on,
.section-subtabs a.on { background: var(--bm-primary); color: #fff;
                        border-color: var(--bm-primary);
                        box-shadow: 0 2px 8px rgba(60, 122, 229, .30); }

/* 토스트/상단바: 평평하게 */
.user-box { box-shadow: none; }

/* 모바일 대시보드 — 요약/빠른신청 한 줄 가로 스크롤 */
@media (max-width: 860px) {
    /* 요약 카드: 작은 정사각, 한 줄 가로 드래그 */
    .summary-cards {
        display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
        grid-template-columns: none !important; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; padding-bottom: 4px; margin-bottom: 14px;
    }
    .summary-cards .sum-card {
        flex: 0 0 116px !important; width: 116px; min-height: 84px; justify-content: center;
        padding: 12px 13px; scroll-snap-align: start;
    }
    .summary-cards .sum-card .sum-sub { display: none; }
    .summary-cards .sum-num { font-size: 22px; }

    /* 빠른 신청: 그룹마다 한 줄 가로 드래그 */
    .quick-grid {
        display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
        grid-template-columns: none !important; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; padding-bottom: 4px;
    }
    .quick-grid .quick-card { flex: 0 0 134px !important; width: 134px; scroll-snap-align: start; }

    /* 가로 스크롤바: 기본 숨김(드래그 시 OS 오버레이로 표시) */
    .summary-cards, .quick-grid { scrollbar-width: none; }
    .summary-cards::-webkit-scrollbar, .quick-grid::-webkit-scrollbar { display: none; }
}

/* 마이페이지 종류 pill */
.kind-pill { display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
             background:var(--bm-blue-10); color:var(--bm-info); white-space:nowrap; }

/* 모바일 — 세션/로그아웃 절반 수준으로 축소 */
@media (max-width: 860px) {
    .user-box { gap: 6px; padding: 4px 6px 4px 9px; font-size: 11px; }
    .user-box .user-link { font-size: 11px; gap:5px; padding:2px 6px 2px 3px; }
    .user-box .user-ava { width:19px; height:19px; }
    .user-box .user-ava svg { width:12px; height:12px; }
    .user-box .user-chev { width:11px; height:11px; }
    .session-timer { font-size: 10px; padding: 2px 8px; border-width: 1px; gap: 3px; }
    .session-timer .st-ico { font-size: 10px; }
    .session-timer .st-text { letter-spacing: 0; }
    .logout-button { font-size: 11px; padding: 4px 9px; }
}

/* ============================================================
   파이프라인 칸 정렬 — flex 항목이 긴 라벨에 밀려 폭이 어긋나는 문제 방지
   ============================================================ */
.flow-step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--bm-text-faint);
    padding-top: 46px;
    min-width: 0;
}

/* 단계별 담당자·일시 (2026-08-06) — 누가 언제 했는지 파이프라인에서 바로 보이게 */
.flow-step .flow-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 400;
    color: var(--bm-text-faint);
    word-break: keep-all;
}

/* ============================================================
   모바일 — 상세 페이지(신청/명함/임직원) 정렬·포맷 통일
   ============================================================ */
@media (max-width: 860px) {
    /* 상세 박스 그리드: 4열 → 2열, 넘침·2줄잘림 방지 */
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; margin-top: 12px; }
    .detail-grid div { padding: 10px 11px; min-width: 0; }
    .detail-grid strong, .detail-section strong { font-size: 11px; margin-bottom: 4px; }
    .detail-grid p, .detail-section p {
        font-size: 13px; line-height: 1.4;
        word-break: break-word; overflow-wrap: anywhere;
    }
    .detail-grid .text-faint { font-size: 11px; }
    .detail-group { padding: 13px 14px; margin-top: 12px; }
    .detail-group-title { font-size: 12px; margin-bottom: 10px; }
    .detail-section { padding: 12px 13px; }

    /* 파이프라인: 칸 폭 균등 고정 + 라벨/이름표 줄바꿈 허용, 살짝 키움 */
    .flow-panel { padding: 16px 12px; margin-bottom: 14px; }
    .flow-steps { gap: 3px; }
    .flow-step { font-size: 11px; padding-top: 40px; }
    .flow-step .fs-label { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
    .flow-step .fs-name {
        font-size: 10px; padding: 2px 6px; max-width: 100%; margin-top: 5px;
        line-height: 1.3; border-radius: 8px; word-break: keep-all;
    }
    .guide-flow .flow-step .fs-sub { font-size: 10px; line-height: 1.35; }

    /* key-value 표(명함 상세 등): 가로 스크롤 대신 자연 줄바꿈으로 */
    table.kv { display: table; white-space: normal; overflow: visible; }
    table.kv th { width: 84px; font-size: 12px; padding: 6px 8px; }
    table.kv td { font-size: 12.5px; padding: 6px 8px; word-break: break-word; overflow-wrap: anywhere; }
}

/* 모바일 — 운영 현황 통계카드: 한 줄 가로 드래그(요약/빠른신청과 동일) */
@media (max-width: 860px) {
    .card-grid.hscroll-cards {
        display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 8px;
        grid-template-columns: none !important; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; padding-bottom: 4px; margin-bottom: 4px;
        scrollbar-width: none;
    }
    .card-grid.hscroll-cards::-webkit-scrollbar { display: none; }
    .card-grid.hscroll-cards .stat-card {
        flex: 0 0 128px !important; width: 128px; min-height: 72px;
        justify-content: center; scroll-snap-align: start;
    }
}

/* 모바일 — 목록 표는 기존 형태 유지하되 글자·여백만 축소(가로 드래그 최소화) */
@media (max-width: 860px) {
    .panel table, table { font-size: 10px; }
    .panel th, th { padding: 5px 6px; font-size: 9.5px; letter-spacing: 0; }
    .panel td, td { padding: 5px 6px; }
    .panel table .badge, table .badge { font-size: 9px; padding: 1px 5px; }
    .panel table a, table a { font-size: 10px; }
}

/* 모바일 — 폼 글자 전체 축소 (모든 신청/등록 폼 공통) */
@media (max-width: 860px) {
    .form-field label { font-size: 11.5px; margin-bottom: 5px; }
    .form-field input,
    .form-field select,
    .form-field textarea { font-size: 12.5px; padding: 8px 10px; }
    .req { font-size: 10px; }
    .field-hint { font-size: 10.5px; margin-top: 4px; }
    .inline-check { font-size: 11.5px; }

    /* 처리구분 등 라디오 토글(신규/변경/폐지) — 컴팩트하게 */
    .seg-radio label { padding: 6px 12px; font-size: 11.5px; }

    /* 안내 카드·가이드 플로우 */
    .guide-title { font-size: 13px; margin-bottom: 12px; }
    .guide-card { padding: 10px 11px; }
    .guide-card .gc-head { font-size: 11px; margin-bottom: 4px; }
    .guide-card .gc-body { font-size: 11.5px; line-height: 1.45; }
    .guide-flow .flow-step { font-size: 10.5px; }
    .guide-flow .flow-step .fs-sub { font-size: 9.5px; }

    /* 폼 액션 버튼·결재자 표 */
    .form-actions .button { font-size: 12.5px; padding: 9px 16px; }
    .approver-table { font-size: 11px; }
}

/* 계정 신청 — 시스템 복수 선택(체크박스) + 시스템별 승인자 미리보기 */
.sys-checks ul { list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:7px 16px; }
.sys-checks li { margin:0; }
.sys-checks label { display:flex; align-items:center; gap:8px; cursor:pointer;
    font-size:13px; font-weight:500; color:var(--bm-text); line-height:1.35; }
.sys-checks input[type="checkbox"] { width:15px; height:15px; margin:0; flex:0 0 auto; cursor:pointer; }
.multi-approver { margin-top:12px; border:1px solid var(--bm-primary); border-radius:10px;
    background:var(--bm-blue-10, #eff6ff); padding:12px 14px; }
.ma-title { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800;
    color:var(--bm-primary); margin-bottom:9px; }
.ma-title svg { width:16px; height:16px; }
#ma-rows, #cc-rows { display:flex; flex-direction:column; gap:6px; }
/* 접힌 힌트 + 말풍선 (신청 화면 'AD 계정 시스템' 안내) — 긴 문장 대신 클릭해서 펼친다 */
.hint-pop { margin-top: 6px; font-size: var(--fs-sm); }
.hint-pop summary { cursor: pointer; color: var(--bm-text-sub); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.hint-pop summary::-webkit-details-marker { display: none; }
.hint-pop summary::after { content: "▾"; color: var(--bm-text-faint); }
.hint-pop[open] summary::after { content: "▴"; }
.hint-pop summary:hover { color: var(--bm-primary); }
.hint-pop .hp-body { position: relative; margin-top: 8px; padding: 12px 14px; background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.hint-pop .hp-body::before { content: ""; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: var(--bm-surface); border-left: 1px solid var(--bm-border); border-top: 1px solid var(--bm-border); transform: rotate(45deg); }
.hint-pop .hp-body p { margin: 0 0 8px; color: var(--bm-text); line-height: 1.55; }
.hint-pop .hp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* 부서/팀 드롭다운 컴포넌트 — AD 픽커가 채우면 잠금(토글 비활성) */
.sys-multi.auto-filled .sys-dd-toggle { background: var(--bm-surface-2); color: var(--bm-text-sub); cursor: default; }
.sys-multi.auto-filled .sys-dd-toggle .dd-chev { visibility: hidden; }
/* 참조 박스 — 제목줄 오른쪽에 컴팩트 '참조자 추가' 드롭다운(.sys-multi 공용), 외부자 필수 경고 */
.cc-title { justify-content: space-between; }
.cc-title .cc-title-text { display: inline-flex; align-items: center; gap: 6px; }
.cc-multi { margin: 0; width: auto; }
.cc-multi .sys-dd-toggle { width: auto; padding: 4px 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--bm-primary); }
.cc-multi .sys-dd-panel { left: auto; right: 0; min-width: 260px; }
.cc-remove { border: 0; background: none; color: var(--bm-text-faint); font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; }
.cc-remove:hover { color: var(--bm-danger); }
.cc-box-warn { border-color: var(--bm-warning); }
.cc-box-warn .ma-title { color: var(--bm-warning); }
/* 라벨 줄 안의 보조 링크(예: 대상 시스템 → 시스템 안내) — 라벨·입력 사이에 문장을 끼우지 않기 위함 */
.form-field label .label-link { font-weight: 400; font-size: var(--fs-sm); color: var(--bm-primary); margin-left: 6px; text-decoration: none; }
.form-field label .label-link:hover { text-decoration: underline; }
/* 참조 박스 — 승인자 박스와 같은 틀, 색만 중립(결재가 아님을 시각으로 구분) */
.cc-box { border-color: var(--bm-border); }
.cc-box .ma-title { color: var(--bm-text-sub); }
.cc-box .ma-appr-tag { background: var(--bm-text-sub); }
.ma-row { display:flex; justify-content:space-between; align-items:center; gap:12px;
    font-size:12.5px; padding:8px 11px; background:var(--bm-surface);
    border:1px solid var(--bm-border); border-radius:8px; }
.ma-sys { font-weight:700; color:var(--bm-text); }
.ma-appr { display:inline-flex; align-items:center; gap:7px; color:var(--bm-text);
    font-weight:600; text-align:right; word-break:keep-all; }
.ma-appr-tag { background:var(--bm-primary); color:#fff; font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:999px; letter-spacing:.02em; }
@media (max-width: 860px) {
    .sys-checks ul { grid-template-columns:1fr; gap:4px; }
    .sys-checks label { font-size:12px; }
    .ma-row { font-size:11px; }
}

/* 빠른 바로가기 — 마이페이지 강조 */
.rail-link-my {
    display:flex; align-items:center; gap:8px;
    background:var(--bm-blue-10, #eff6ff); color:var(--bm-primary) !important;
    font-weight:700; font-size:13.5px; padding:8px 11px; margin-bottom:4px;
    border-radius:7px;
}
.rail-link-my:hover { background:#e2ecfb; color:var(--bm-primary) !important; }
.rail-link-my .rl-ico { width:15px; height:15px; flex:0 0 auto; }

/* 대상 시스템 — 토글 드롭다운(검색·칩) */
.sys-multi { position:relative; }
.sys-dd-toggle { display:flex; align-items:center; gap:8px; width:100%;
    padding:9px 12px; border:1px solid var(--bm-border); border-radius:8px;
    background:var(--bm-surface); font-size:13.5px; color:var(--bm-text);
    font-family:inherit; cursor:pointer; text-align:left; }
.sys-dd-toggle:hover { border-color:var(--bm-primary); }
.sys-dd-count { background:var(--bm-primary); color:#fff; border-radius:999px;
    font-size:11px; font-weight:700; padding:1px 7px; }
.sys-dd-toggle .dd-chev { width:16px; height:16px; margin-left:auto; color:var(--bm-text-faint); transition:transform .15s; }
.sys-dd-toggle.open .dd-chev { transform:rotate(180deg); }
.sys-dd-panel { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
    background:var(--bm-surface); border:1px solid var(--bm-border); border-radius:10px;
    box-shadow:0 8px 24px rgba(20,40,90,.12); padding:8px; }
.sys-dd-search { width:100%; box-sizing:border-box; padding:7px 10px; font-size:13px;
    margin-bottom:6px; border:1px solid var(--bm-border); border-radius:7px;
    font-family:inherit; background:var(--bm-surface); color:var(--bm-text); }
.sys-dd-panel .sys-checks { max-height:380px; overflow-y:auto; }
.sys-grp + .sys-grp { margin-top:6px; }
.sys-grp-title { font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--bm-text-faint);
    text-transform:none; padding:6px 7px 4px; position:sticky; top:0; background:var(--bm-surface);
    border-bottom:1px solid var(--bm-border); margin-bottom:2px; }
.sys-opt { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px;
    font-size:13px; font-weight:500; color:var(--bm-text); cursor:pointer; }
.sys-opt:hover { background:var(--bm-hover); }
/* 컴포넌트 공용 — 시스템(.sys-pick)뿐 아니라 부서(.dept-pick)·참조자(.cc-pick) 라디오/체크박스도 같은 크기
   (클래스 한정이면 폼 공통 width:100% 규칙을 받아 입력이 한 줄을 차지하고 글자가 세로로 꺾인다 — 2026-09-01 JM 캡처) */
.sys-opt input[type="checkbox"], .sys-opt input[type="radio"] { width:15px; height:15px; margin:0; flex:0 0 auto; cursor:pointer; }
.sys-opt .so-name em { font-style:normal; color:var(--bm-text-faint); font-weight:400; font-size:12px; }
.sys-dd-chips { display:flex; flex-wrap:wrap; gap:6px; }
.sys-dd-chips:not(:empty) { margin-top:8px; }
.sys-chip { display:inline-flex; align-items:center; gap:4px; background:var(--bm-blue-10, #eff6ff);
    color:var(--bm-primary); font-size:12px; font-weight:600; padding:3px 5px 3px 10px; border-radius:7px; }
.sys-chip-x { border:none; background:transparent; color:var(--bm-primary); font-size:15px;
    line-height:1; cursor:pointer; padding:0 3px; }
.sys-chip-x:hover { color:var(--bm-danger); }

/* 권한 신청 — 분류 그룹(optgroup) 단일 선택 */
.sys-grouped-select optgroup { font-weight:700; color:var(--bm-text-sub); }
.sys-grouped-select option { font-weight:400; color:var(--bm-text); padding:4px 0; }

/* ============================================================
   다크 테마 — [data-theme="dark"] 변수 오버라이드 + 하드코딩 색 보정
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;
    --bm-bg: #161d27;               /* 패널 분리 위해 반 톤 다운 */
    --bm-surface: #2c384a;
    --bm-surface-sub: #354254;
    --bm-border: #38424f;
    --bm-border-strong: #46515f;
    --bm-text: #eef1f6;
    --bm-text-sub: #c2cad6;
    --bm-text-faint: #9099a7;
    --bm-placeholder: #8a94a3;
    --bm-hover: rgba(120, 160, 230, 0.10);
    --bm-blue-10: #18253c;          /* 차분한 블루 틴트(채도↓) */
    --bm-blue-20: #21304b;
    --bm-mist: #18253c;
    --bm-primary: #5288e6;          /* 다크 파랑(버튼 흰글자 대비↑, 링크 대비 유지) */
    --bm-primary-hover: #6695ea;
    --bm-primary-light: #4a7ed4;
    --bm-navy-900: #243a5e;
    --bm-success-bg: #12301f; --bm-success: #3ddc9b; --bm-success-bd: #1f5a42;
    --bm-warning-bg: #3a230f; --bm-warning: #ff9d5c; --bm-warning-bd: #6b3d1a;
    --bm-danger-bg:  #3a1717; --bm-danger:  #ff7b7b; --bm-danger-bd:  #6e2a2a;
    --bm-info-bg:    #16243f; --bm-info:    #7eb0f0; --bm-info-bd:    #2a3f63;
    --bm-sky-bg:     #0e2433; --bm-sky-fg:  #6fc7f0; --bm-sky-bd:     #22506b;
    --bm-yellow-bg:  #332810; --bm-yellow-fg: #e0b65a;
    --bm-shadow-strong: 0 6px 24px rgba(0, 0, 0, .5);
}
/* 하드코딩 색 보정 */
[data-theme="dark"] .session-timer { background: var(--bm-surface); color: #3ddc9b; border-color: #1f5a42; }
[data-theme="dark"] .session-timer:hover { background: #12301f; }
[data-theme="dark"] .org-box .ob-role { color: #8fb4ec; }
[data-theme="dark"] .org-trunk,
[data-theme="dark"] .org-col::before, [data-theme="dark"] .org-col::after,
[data-theme="dark"] .org-subtrunk,
[data-theme="dark"] .org-subcol::before, [data-theme="dark"] .org-subcol::after,
[data-theme="dark"] .org-mem::before { background: #46566c; }
[data-theme="dark"] .ma-appr-tag { background: var(--bm-info); color: #0f1318; }
[data-theme="dark"] .login-card { border-color: var(--bm-border); }

/* 톱니 설정 메뉴 */
.settings-menu { position: relative; display: inline-flex; }
.gear-btn { border: none; background: transparent; color: var(--bm-text-faint); cursor: pointer;
    padding: 5px; border-radius: 8px; display: inline-flex; align-items: center; transition: background .15s, color .15s; }
.gear-btn:hover, .gear-btn.open { background: var(--bm-hover); color: var(--bm-primary); }
.gear-btn svg { width: 17px; height: 17px; }
.settings-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
    background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 8px; min-width: 152px; }
.sp-title { font-size: 11px; color: var(--bm-text-faint); font-weight: 700; padding: 4px 8px 6px; }
.sp-opt { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent;
    padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--bm-text); cursor: pointer;
    text-align: left; font-family: inherit; }
.sp-opt:hover { background: var(--bm-hover); }
.sp-opt.active { background: var(--bm-blue-10); color: var(--bm-primary); font-weight: 700; }
.sp-opt svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 860px) { .gear-btn svg { width: 15px; height: 15px; } }

/* 서약 — 동의 버튼 두 줄(동의합니다 / (전자 서약)) */
.oath-agree-btn { line-height:1.25; text-align:center; white-space:nowrap; flex:0 0 auto; }
.oath-agree-btn .oab-sub { display:block; font-size:11px; font-weight:500; opacity:.85; margin-top:1px; }

/* 모바일 — 서약서 제목(종류) 텍스트 축소 */
@media (max-width: 860px) {
    .oath-doc .panel-header h2 { font-size: 13.5px; line-height:1.35; }
    .oath-doc .panel-header .badge { font-size: 9.5px; padding:2px 6px; }
    .oath-doc .oath-body { font-size:12px; line-height:1.6; padding:12px 13px; }
    .oath-doc .oath-body p { line-height:1.55; margin-bottom:6px; }
    .oath-doc .form-actions { flex-wrap:wrap; align-items:center; gap:8px 10px; }
    .oath-check { font-size:11.5px; white-space:nowrap; margin-right:6px; }
    .oath-agree-btn { font-size:13px; padding:8px 16px; }
    .oath-agree-btn .oab-sub { font-size:10px; }
}

/* 다크 — 서브탭/세그먼트 블루 패밀리(흰색 방지). 복합 선택자로 .seg.list-filter a(border:none) 이김 */
[data-theme="dark"] .seg.list-filter.section-subtabs a,
[data-theme="dark"] .section-subtabs a { background: var(--bm-blue-10); color: var(--bm-primary);
                                         border: 1px solid var(--bm-blue-20); }
[data-theme="dark"] .seg.list-filter.section-subtabs a:hover,
[data-theme="dark"] .section-subtabs a:hover { background: var(--bm-blue-20); color: var(--bm-text);
                                               border-color: var(--bm-primary); }
[data-theme="dark"] .seg.list-filter.section-subtabs a.on,
[data-theme="dark"] .section-subtabs a.on,
[data-theme="dark"] .seg.list-filter a.on { background: var(--bm-primary); color: #fff;
                                            border-color: var(--bm-primary); box-shadow: none; }


/* 다크 — 세션타이머 경고/위험 상태 */
[data-theme="dark"] .session-timer.warn { background:#3a2a10; border-color:#6b4d17; color:#ecc56e; }
[data-theme="dark"] .session-timer.danger { background:#3a1717; border-color:#6e2a2a; color:#ff8b8b; }

/* =====================================================================
 * BDS Phase A — 토큰 스케일 + 유틸리티/컴포넌트 클래스
 * portal_10_프론트정규화_기획 §4·§5. 인라인 style/하드코딩 색 치환용.
 * (추가 전용 — 기존 규칙 변경 없음. 빨강 승격은 위 :root 2줄에서 반영됨)
 * ===================================================================== */
/* 텍스트 색 유틸 — 인라인 color:#666/#999/#9aa/#c62828 치환 */
.text-sub    { color: var(--bm-text-sub); }
.text-faint  { color: var(--bm-text-faint); }
.text-danger { color: var(--bm-danger); }
.muted-sm    { color: var(--bm-text-faint); font-weight: 400; font-size: var(--fs-xs); }

/* 폰트 크기 유틸 */
.fs-xs { font-size: var(--fs-xs); }  .fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }  .fs-lg { font-size: var(--fs-lg); }

/* 간격 유틸 — 인라인 margin:0 등 치환 */
.m-0 { margin: 0; }  .mt-1 { margin-top: var(--sp-1); }  .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mb-2 { margin-bottom: var(--sp-2); }


/* 페이지 헤더 컴포넌트 — 맨몸 h2 표준화(.page-header). 섹션 헤더는 .panel-header(h2 margin:0 이미 처리) */
.page-header { display: flex; align-items: baseline; justify-content: space-between;
               gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.page-header h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
.page-header .sub { color: var(--bm-text-sub); font-size: var(--fs-sm); }
/* [Phase A end] */

/* Phase B batch2 — 반복 인라인 → 클래스 (픽셀 동일) */
.hint-danger { color: var(--bm-danger); margin: .4rem 0 0; font-size: .9em; }
.stat-num    { font-size: 1.6rem; font-weight: 700; }
.fs-085      { font-size: .85em; }

/* Phase B-3 — caption(#9aa) 유틸. 템플릿 47곳이 참조하나 정의 누락됐던 것 복원(원래 인라인값 그대로) */
.cap-faint   { color: #9aa; font-weight: 400; font-size: .7em; }
.nowrap      { white-space: nowrap; }
.d-inline    { display: inline; }
.text-center { text-align: center; }
.prewrap     { white-space: pre-wrap; }
.mb-3        { margin-bottom: var(--sp-3); }
.stat-frac   { font-size: 15px; color: var(--bm-text-faint); font-weight: 600; }

/* 계정 현황 — 시스템 접근 구조(AD 출입증) 패널 (account_holdings.html) */
.am-summary  { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--bm-text); }
.am-hint     { font-weight: 400; color: var(--bm-text-sub); }
.am-h3       { margin: 16px 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--bm-primary-hover); }
.am-groups   { border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); overflow: hidden; }
.am-group-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 12px; border-top: 1px solid var(--bm-border); flex-wrap: wrap; }
.am-group-row:first-child { border-top: none; }
.am-group-row-muted { background: var(--bm-surface-sub); }
.am-group-head { flex: 0 0 264px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.am-group-name { font-weight: 700; font-size: 13px; color: var(--bm-text); white-space: nowrap; }
.am-group-cn   { font-family: inherit; font-size: 11px; color: var(--bm-text-faint); background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 4px; padding: 1px 5px; }
.am-chips      { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 5px; }
.am-tag        { background: var(--bm-info-bg); color: var(--bm-info); border-color: var(--bm-info-bd); }
.am-tag-muted  { background: var(--bm-surface); color: var(--bm-text-sub); border-color: var(--bm-border-strong); }

/* ===== SecOps 관제 공용 컴포넌트 (인라인 style/hex 대체 — portal_10 §8.72 B) ===== */
.sec-cards { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.sec-card { flex: 1; min-width: 120px; border: 1px solid var(--sec-border); border-radius: 8px; padding: .7rem 1rem; }
.sec-card.warn   { border-color: var(--sec-warn-bd);   background: var(--sec-warn-bg); }
.sec-card.danger { border-color: var(--sec-danger-bd); background: var(--bm-danger-bg); }
.sec-card.ok     { border-color: var(--sec-ok-bd);     background: var(--sec-ok-bg); }
.sec-card.purple { border-color: var(--sec-purple-bd); background: var(--sec-purple-bg); }
.sec-val { font-size: 1.05rem; font-weight: 700; }
.sec-val.brk { word-break: break-all; }
.sec-card.warn   .stat-num { color: var(--sec-warn-fg); }
.sec-card.danger .stat-num { color: var(--bm-danger); }
.sec-card.ok     .stat-num { color: var(--sec-ok-fg); }
.sec-card.purple .stat-num { color: var(--sec-purple-fg); }
.sec-link { color: var(--sec-info-fg); text-decoration: none; }
/* 표 행 하이라이트 */
tr.row-danger { background: var(--bm-danger-bg); }
tr.row-warn   { background: var(--sec-warn-bg); }
tr.row-temp   { background: var(--sec-row-temp); }
/* 폰트 크기 유틸(secops 표 셀) */
.fs-078 { font-size: .78em; }
.fs-08  { font-size: .8em; }
.fs-082 { font-size: .82em; }
.fs-088 { font-size: .88em; }
.fs-09  { font-size: .9em; }
/* SecOps 장비 페이지 — Phase B2 (인라인/hex 대체, 룩 보존) */
.sec-accent-danger { border-left: 4px solid var(--bm-danger); }
.sec-accent-warn   { border-left: 4px solid var(--sec-warn-fg); }
.sec-warn-note { color: var(--sec-warn-fg); margin: 0 0 .6rem; }
.sec-soft-danger { background: var(--sec-danger-soft); }
.sec-val-lg { font-size: 1.1rem; font-weight: 700; }
.c-warn   { color: var(--sec-warn-fg); }
.c-danger { color: var(--bm-danger); }
.c-ok     { color: var(--sec-ok-fg); }
.c-info   { color: var(--sec-info-fg); }
.c-violet2 { color: #7c3aed; }
.c-faint  { color: var(--bm-text-faint); }
.fw-6 { font-weight: 600; }
.sec-accent-info { border-left: 4px solid var(--sec-info-fg); padding-left: .6rem; }
.sec-tag-faint { color: var(--bm-text-faint); font-weight: 400; font-size: .65em; }
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.sec-note { margin: .6rem 0 0; color: var(--bm-text-sub); line-height: 1.6; }
.sec-subnote { color: var(--bm-text-faint); font-size: .82em; margin: .3rem 0 0; }
.sec-subnote2 { color: var(--bm-text-sub); font-size: .88em; margin: .5rem 0 0; }
/* 표 열너비 유틸 */
.w-50{width:50px}.w-70{width:70px}.w-80{width:80px}.w-90{width:90px}.w-100{width:100px}
.w-110{width:110px}.w-120{width:120px}.w-130{width:130px}.w-140{width:140px}.w-150{width:150px}
.w-160{width:160px}.w-170{width:170px}.w-180{width:180px}
.w-55{width:55px}.w-75{width:75px}.w-85{width:85px}.w-125{width:125px}.w-200{width:200px}.w-220{width:220px}
.w-34p{width:34%}.w-14p{width:14%}
/* SecOps mcp/hub — Phase B2c (인라인/hex 대체, 룩 보존) */
/* ⚠️ 이 규칙이 위 .button.danger(연한 배경+빨간 글씨, L1423)를 덮는다 — 배경만 바꾸면
   빨강 위 빨강 글씨가 되어 라벨이 안 보인다(2026-08-06 '반려' 버튼 실사례). color 필수. */
.button.danger { background: var(--bm-danger); color: #fff; }
.button.muted  { background: var(--sec-btn-muted); }
.button.slate  { background: #78909c; }
.sec-accent-ok { border-left: 4px solid var(--sec-ok-fg); }
.mono { font-family: monospace; }
.fs-068 { font-size: .68em; }
.flex-ac { display: flex; gap: .5rem; align-items: center; }
.flex-g5 { display: flex; gap: .5rem; }
.flex-g3 { display: flex; gap: .3rem; }
.flex-w  { display: flex; gap: .3rem; flex-wrap: wrap; }
.flex-end { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.flex-btw { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.mt-1 { margin-top: 1rem; }
.ml-auto { margin-left: auto; }
.fs-105 { font-size: 1.05rem; }
.sec-label-block { font-weight: 600; display: block; margin: 1rem 0 .3rem; }
.sec-danger-note { margin: .6rem 0; color: var(--bm-danger); font-weight: 600; }
/* B2c 컴포넌트: 메시지 배너·스코프 트리·토큰·상태카드 그리드 */
.sec-msg { padding: .7rem 1rem; margin-bottom: .8rem; }
.sec-accent-muted { border-left: 4px solid var(--sec-btn-muted); }
.scope-node { border: 1px solid var(--bm-border-strong); border-radius: 10px; margin-bottom: .5rem; overflow: hidden; }
.scope-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; background: var(--bm-surface-sub); }
.scope-body2 { padding: .2rem .6rem .6rem; }
.scope-line { margin: .15rem 0; line-height: 1.45; }
.tok-input { flex: 1; font-family: monospace; border: 1px solid var(--bm-border-strong); border-radius: 8px; padding: .6rem; background: var(--bm-surface-sub); font-size: .82em; }
.tok-copy { cursor: pointer; font-weight: 600; color: var(--sec-info-fg); }
.tok-code { background: #1e1e2e; color: #e6e6e6; border-radius: 8px; padding: .8rem; overflow-x: auto; font-size: .82em; line-height: 1.5; }
.sec-grid { display: grid; gap: 1rem; margin-top: .6rem; }
.sec-grid-210 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.sec-grid-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sec-grid-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sec-scard { border: 1px solid var(--bm-border-strong); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.sec-mono-note { color: var(--bm-text-faint); font-size: .78em; font-family: monospace; }
.flex-w8m { display: flex; gap: .8rem; flex-wrap: wrap; margin: .4rem 0; }
.tok-label { margin: 0 0 .4rem; }
.sec-note2 { margin: .6rem 0 .5rem; color: var(--bm-text-sub); line-height: 1.6; }
.fs-07 { font-size: .7em; } .fs-092 { font-size: .92em; }
.valign-mid { vertical-align: middle; }
.mt-01 { margin-top: .1rem; } .mt-08 { margin-top: .8rem; } .mb-08 { margin: 0 0 .8rem; }
.mt-auto { margin-top: auto; } .pt-03 { padding-top: .3rem; } .mt-07 { margin-top: .7rem; } .mt-035 { margin-top: .35rem; }
.flex-ac6 { display: flex; gap: .6rem; align-items: center; }
.flex-btw-c { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.sec-val2 { font-size: .98rem; font-weight: 700; line-height: 1.4; }
/* hub posture 카드(JS 생성) — 레벨별 색을 클래스로 */
.posture-card { text-decoration: none; border: 1px solid var(--bm-border); border-left: 4px solid var(--bm-border-strong); border-radius: 8px; padding: .6rem .8rem; display: block; }
.posture-card.ok   { border-color: var(--sec-ok-bg);     background: var(--sec-ok-bg);     border-left-color: var(--sec-ok-fg); }
.posture-card.warn { border-color: var(--sec-warn-bg);   background: var(--sec-warn-bg);   border-left-color: var(--sec-warn-fg); }
.posture-card.bad  { border-color: var(--bm-danger-bg);  background: var(--bm-danger-bg);  border-left-color: var(--bm-danger); }
.posture-card.err  { border-color: #f5f5f5; background: #f5f5f5; border-left-color: var(--bm-text-faint); }
.posture-num { font-size: 1.5rem; font-weight: 700; }
.posture-card.ok   .posture-num { color: var(--sec-ok-fg); }
.posture-card.warn .posture-num { color: var(--sec-warn-fg); }
.posture-card.bad  .posture-num { color: var(--bm-danger); }
.posture-card.err  .posture-num { color: var(--bm-text-faint); }
/* AD에서 자동으로 채워진 칸(대상자 이메일·부서) — 읽기 전용임을 시각으로 알린다.
   잠금 자체는 readOnly/disabled(base.html)가 하고, 여기서는 표시만 담당. */
.auto-filled,
.form-field select.auto-filled:disabled {
    background: var(--bm-surface-sub);
    color: var(--bm-text-sub);
    cursor: not-allowed;
}

/* 목록 도구줄 = .filter-row 하나(세그먼트·드롭다운·검색 한 줄). 구 .toolbar·.list-toolbar 흡수(2026-09-04 _13 §2.O 조치 ⑧) */
.filter-row .list-filter { margin-bottom: 0; }
.list-status-filter { margin: 0 0 14px auto; }
.list-status-filter select { min-width: 130px; }

/* ── ISMS-P 인증기준·증적 (isms 앱) ─────────────────────────────── */
.isms-note { color: var(--bm-text-faint); font-size: var(--fs-sm); }
/* 상태 3색 — 요약 카드와 동일 계열(미착수 회색 · 진행 황색 · 완결 초록) */
.isms-nolink { color: var(--bm-text-faint); font-size: var(--fs-xs); }
/* 분야별 표 21개가 같은 격자를 쓰도록 열 폭 고정(패널 간 오·열 정렬) */
.isms-table { table-layout: fixed; width: 100%; }
.isms-col-code { width: 80px; }
.isms-col-name { width: 34%; }
.isms-col-status { width: 90px; }
.isms-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 항목 상세 — 클릭한 행 아래 펼침(표 행으로 이동) */
.isms-detail-row td { padding: 0; background: var(--bm-bg); }
.isms-panel-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--bm-border); background: var(--bm-surface); }
.isms-panel-head a { margin-left: auto; font-size: var(--fs-sm); }
.isms-panel-head button { border: 1px solid var(--bm-border); background: var(--bm-bg); border-radius: var(--bm-radius-sm); padding: 2px 10px; cursor: pointer; color: var(--bm-text-sub); }
.isms-detail-row iframe { display: block; width: 100%; height: 70vh; border: none; background: var(--bm-surface); }

/* embed 모드(?embed=1) — iframe 미리보기용: 포털 크롬(사이드바·상단바·레일·푸터) 숨김 */
body.bm-embed .sidebar, body.bm-embed .sb-backdrop, body.bm-embed .topbar,
body.bm-embed .rail, body.bm-embed .footer { display: none; }
body.bm-embed .content { padding: var(--sp-4); }

/* 항목 상세(가이드·증적 실물) — 2026-08-25 */
.isms-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: 800; margin: 0 0 var(--sp-2); }
.isms-h::after { content: ""; flex: 1; height: 1px; background: var(--bm-border); }

.isms-detail .isms-h:first-child { margin-top: 0; }

/* 가이드 섹션 디자인(항목 상세 — 2026-08-25 폴리시: 솔루션급 마감·표 스타일·§ 제거) */
.isms-item-head { border: 1px solid var(--bm-border); border-left: 3px solid var(--bm-primary); border-radius: var(--bm-radius); background: var(--bm-surface); padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.isms-item-head-main { display: flex; align-items: center; gap: var(--sp-2); }
.isms-item-code { font-size: var(--fs-lg); font-weight: 800; color: var(--bm-primary); }
.isms-item-title { font-size: var(--fs-lg); font-weight: 800; }
.isms-item-head .badge { margin-left: auto; }
.isms-item-sub { margin: 4px 0 0; color: var(--bm-text-sub); font-size: var(--fs-sm); }
.isms-count { font-weight: 400; color: var(--bm-text-faint); }

.isms-detail { max-width: 1080px; }
.isms-sec { margin-bottom: var(--sp-6); }
.isms-sec-body { line-height: 1.75; font-size: var(--fs-md); }
.isms-sec-body > p:first-child { margin-top: 0; }
.isms-sec-body > p:last-child { margin-bottom: 0; }
.isms-sec-body blockquote { border-left: 3px solid var(--bm-border-strong); margin: var(--sp-2) 0; padding: 2px var(--sp-3); color: var(--bm-text-sub); font-size: var(--fs-sm); }
.isms-sec-body table { border-collapse: collapse; margin: var(--sp-2) 0; width: 100%; }
.isms-sec-body th { background: var(--bm-bg); }
.isms-sec-body th, .isms-sec-body td { border: 1px solid var(--bm-border); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.isms-sec-body code { background: var(--bm-mist); border-radius: var(--bm-radius-sm); padding: 0 4px; }

/* 인증기준 — 원문 강조 카드 */
.isms-sec-criteria .isms-sec-body { border-left: 3px solid var(--bm-primary); background: var(--bm-bg); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--bm-radius) var(--bm-radius) 0; font-size: var(--fs-md); line-height: 1.8; font-weight: 500; }

/* 조치 필요 사항 — 붉은 강조 (증적 파일 아래) */
.isms-todo-h { color: var(--bm-danger); }
.isms-todo-list { margin: 0; border: 1px solid var(--bm-danger-bd); background: var(--bm-danger-bg); border-radius: var(--bm-radius); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6); }
.isms-todo-list li { color: var(--bm-danger); font-size: var(--fs-md); line-height: 1.8; }

/* 주요 확인사항 — 안내서식 표(줄무늬·번호 원형) */
.isms-sec-checks .isms-sec-body ol { margin: 0; padding: 0; list-style: none; counter-reset: chk; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); overflow: hidden; background: var(--bm-surface); }
.isms-sec-checks .isms-sec-body ol li { counter-increment: chk; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--bm-border); line-height: 1.7; }
.isms-sec-checks .isms-sec-body ol li:last-child { border-bottom: none; }
.isms-sec-checks .isms-sec-body ol li:nth-child(even) { background: var(--bm-bg); }
.isms-sec-checks .isms-sec-body ol li::before { content: counter(chk); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--bm-primary-light); color: var(--bm-primary); font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; }

/* 결함사례 — 표 행(줄무늬), '사례 N' 강조 */
.isms-sec-defects .isms-sec-body ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); overflow: hidden; background: var(--bm-surface); }
.isms-sec-defects .isms-sec-body ul li { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--bm-border); line-height: 1.7; }
.isms-sec-defects .isms-sec-body ul li:last-child { border-bottom: none; }
.isms-sec-defects .isms-sec-body ul li:nth-child(even) { background: var(--bm-bg); }
.isms-sec-defects .isms-sec-body ul li strong { background: var(--bm-warning-bg); color: var(--bm-warning); border-radius: var(--bm-radius-sm); padding: 0 8px; margin-right: 6px; }

/* 관련 법규·증거자료 — 칩 */
.isms-sec-laws .isms-sec-body ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.isms-sec-evidence .isms-sec-body ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); overflow: hidden; background: var(--bm-surface); }
.isms-sec-evidence .isms-sec-body ul li { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--bm-border); line-height: 1.7; }
.isms-sec-evidence .isms-sec-body ul li:last-child { border-bottom: none; }
.isms-sec-evidence .isms-sec-body ul li:nth-child(even) { background: var(--bm-bg); }
.isms-sec-evidence .isms-sec-body ul li::before { content: ""; display: inline-block; width: 7px; height: 7px; border: 1px solid var(--bm-border-strong); border-radius: 2px; margin-right: 10px; }
.isms-sec-laws .isms-sec-body ul li { border: 1px solid var(--bm-sky-bd); background: var(--bm-sky-bg); color: var(--bm-sky-fg); border-radius: 999px; padding: 2px 12px; font-size: var(--fs-sm); }

/* 세부 설명 — 접힘 */
.isms-sec-detail summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
.isms-sec-detail summary::-webkit-details-marker { display: none; }
.isms-sec-detail summary .isms-h { flex: 1; margin: 0; }
.isms-sec-hint { font-size: var(--fs-xs); color: var(--bm-text-faint); margin-left: var(--sp-2); flex-shrink: 0; }
.isms-sec-detail[open] summary { margin-bottom: var(--sp-2); }
.isms-sec-detail[open] .isms-sec-hint { display: none; }
.isms-sec-detail .isms-sec-body { border: 1px solid var(--bm-border); border-radius: var(--bm-radius); padding: var(--sp-3) var(--sp-4); background: var(--bm-surface); }
.isms-sec-detail .isms-sec-body p { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--bm-bg); border-left: 3px solid var(--bm-border-strong); border-radius: var(--bm-radius-sm); }
.isms-sec-detail .isms-sec-body p:last-child { margin-bottom: 0; }
.isms-sec-detail .isms-sec-body p > strong:first-child { color: var(--bm-primary); }

/* 증적 파일 표 */
.isms-file-table { width: 100%; border-collapse: collapse; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); overflow: hidden; background: var(--bm-surface); }
.isms-file-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--bm-border); }
.isms-file-table tr:last-child td { border-bottom: none; }
.isms-file-table tr:nth-child(even) td { background: var(--bm-bg); }
.isms-file-table td:last-child { text-align: right; white-space: nowrap; }
.isms-ext { display: inline-block; border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius-sm); background: var(--bm-bg); padding: 0 6px; font-size: var(--fs-xs); text-transform: uppercase; margin-right: 6px; color: var(--bm-text-sub); }
.isms-link-row td { background: var(--bm-sky-bg); }
.isms-link-row td a { color: var(--bm-sky-fg); font-weight: 500; }

/* 증적 파일 인라인 미리보기(클릭한 행 아래) — 2026-08-25 */
.isms-file-preview td { padding: 0; background: var(--bm-bg); }
.isms-fp-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--bm-border); }
.isms-fp-bar a { margin-left: auto; font-size: var(--fs-sm); }
.isms-fp-bar button { border: 1px solid var(--bm-border); background: var(--bm-surface); border-radius: var(--bm-radius-sm); padding: 2px 10px; cursor: pointer; color: var(--bm-text-sub); }
.isms-file-preview iframe { display: block; width: 100%; height: 65vh; border: none; background: var(--bm-surface); }

/* ── 정보보호위원회 회의록 화면 (2026-08-27 구조화) ── */
.cm-head-main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cm-title { font-size: var(--fs-xl); font-weight: 800; margin: 0; flex: 1 1 auto; }
.cm-session { color: var(--bm-text-sub); font-weight: 600; }
.cm-actions { display: flex; gap: var(--sp-1); }
.cm-actions form { display: inline; }
.cm-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; }
.cm-meta div { background: var(--bm-bg); border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: var(--sp-2) var(--sp-3); }
.cm-meta dt { font-size: var(--fs-xs); color: var(--bm-text-faint); font-weight: 600; }
.cm-meta dd { margin: 2px 0 0; font-weight: 600; }
.cm-count { color: var(--bm-text-faint); font-size: var(--fs-sm); }
.cm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cm-chip { border: 1px solid var(--bm-border-strong); background: var(--bm-bg); border-radius: 999px; padding: 2px 12px; font-size: var(--fs-sm); }
.cm-list { margin: 0; padding: 0; list-style: none; counter-reset: cm; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); overflow: hidden; }
.cm-list li { counter-increment: cm; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--bm-border); line-height: 1.7; }
.cm-list li:last-child { border-bottom: none; }
.cm-list li:nth-child(even) { background: var(--bm-bg); }
.cm-list li::before { content: counter(cm); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--bm-primary-light); color: var(--bm-primary); font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; }
.cm-decisions li::before { background: var(--bm-success-bg); color: var(--bm-success); }
.cm-preview { display: block; width: 100%; height: 70vh; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); margin-top: var(--sp-2); }
.cm-table { table-layout: fixed; width: 100%; }
.cm-col-session { width: 90px; } .cm-col-type { width: 70px; } .cm-col-date { width: 110px; } .cm-col-chair { width: 170px; } .cm-col-file { width: 80px; }
.cm-link { font-weight: 600; }

/* ── 외부자 서약 (people/pledge_*) ─────────────────────────────
   목록은 용역 1건 = <details> 1개. 펼치면 그 안의 서약자 표가 나온다.
   접힘/펼침 마크업은 계정현황(.am-summary)과 같은 것을 쓰고, 여기서는
   요약줄 배치와 표 열 폭만 정한다(새 색·간격 언어를 만들지 않는다). */
.pledge-pkg > .pledge-sum { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pledge-sum-title { font-weight: 700; }
.pledge-note { margin: 0 0 var(--sp-3); }
.pledge-foot { margin: var(--sp-2) 0 0; }
.pledge-more { margin-left: var(--sp-2); font-weight: 600; }
.pledge-signers { table-layout: fixed; width: 100%; margin-top: var(--sp-3); }
/* 폭이 가변적인 것은 이메일 하나뿐이라 그 열만 유동으로 두고 나머지는 고정한다.
   ⚠ fixed 레이아웃에서 폭을 안 준 열이 남는 공간을 전부 가져간다 — 첫 열(서약자)에
   폭이 없어 혼자 넓어지고 기한이 눌렸다(2026-08-28 JM 지적). */
.pledge-signers .c-signer { width: 160px; }
.pledge-signers .c-birth { width: 104px; }
.pledge-signers .c-org { width: 210px; }   /* 소속·직위가 두 줄로 꺾이지 않게 (2026-09-01 JM) */
.pledge-signers .c-mail { width: auto; }
.pledge-signers .c-state { width: 96px; }
.pledge-signers .c-when { width: 200px; }   /* "2026-09-12 까지 (D-5)"가 한 줄에 */
.pledge-signers .c-ip { width: 120px; }
.pledge-signers .c-hash { width: 130px; }
/* ⚠ `table .fact { width: 1% }`(내용폭 관용구)는 **table-layout: auto 에서만** 동작한다.
   고정 레이아웃 표에서는 글자 그대로 1%가 적용돼 액션 버튼이 칸 밖으로 삐져나온다
   (2026-09-16 JM — 외부자 서약 목록의 '서약서' 버튼이 카드 밖으로). 고정 표는 실제 폭을 준다. */
.pledge-signers .fact { width: 190px; }     /* 발송·링크·취소 세 버튼 */
.cg-table .fact { width: 150px; }           /* colgroup 이 없는 경우(있으면 colgroup 우선) */
.pledge-signers td { word-break: break-word; overflow-wrap: anywhere; }

/* 서약문 미리보기 (people/pledge_form) — 담당자가 발송 전에 무엇을 서명받는지 확인한다.
   서약자가 서명 화면(Edge)에서 보는 문서와 같은 모양: 제목·정보 표·서약 문장·조항.
   표는 위 입력값이 실시간으로 채워지고, 조항 줄에 번호가 이미 있어 list-style 없이 그대로. */
.pledge-preview {
    margin: var(--sp-4) 0;               /* 비고 입력칸과 시각적으로 분리 */
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    background: var(--bm-surface-sub);
}
.pledge-preview > summary { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 600; }
/* 서약자 선택 — 1인 1링크라 문서엔 한 명만 나온다. 여럿 입력했을 때만 보인다. */
.preview-pick {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    margin: 0 var(--sp-3) var(--sp-2); font-size: var(--fs-sm); font-weight: 600;
}
.preview-doc {
    background: var(--bm-surface);       /* 종이 느낌 — 패널보다 밝은 면 */
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    margin: 0 var(--sp-3) var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    max-width: 820px;
}
.preview-doc-title { text-align: center; font-weight: 700; font-size: var(--fs-lg); margin: 0 0 2px; }
.preview-doc-sub { text-align: center; color: var(--bm-text-sub); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.preview-meta { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.preview-meta th, .preview-meta td { border: 1px solid var(--bm-border-strong); padding: 6px 10px; text-align: left; }
.preview-meta th { background: var(--bm-surface-sub); font-weight: 600; width: 96px; white-space: nowrap; }
.preview-lead { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.preview-clauses { list-style: none; margin: 0; padding: 0; }
.preview-clauses li {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    text-align: justify;
}
/* 하단 — 인쇄본과 같은 마무리(날짜·서명란·귀중). 날짜·서명은 서명 시점에 채워지므로 빈칸. */
.preview-sign { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-sm); }
.preview-sign-date { margin: 0 0 var(--sp-3); }
.preview-sign-row { margin: 0 0 var(--sp-4); }
.preview-sign-name {
    display: inline-block;
    min-width: 120px;
    border-bottom: 1px solid var(--bm-text);
    padding: 0 8px 2px;
}
.preview-closing { margin: 0; font-weight: 700; font-size: var(--fs-md); }

/* 서약자 행 입력 (people/pledge_form) — 성명·이메일·소속·생년월일 각 칸 + 추가/삭제.
   한 줄에 쉼표로 몰아 적던 방식을 대체(2026-08-28). 칸 폭은 담기는 값의 성격에 맞춘다. */
.signer-rows { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.signer-head, .signer-row {
    display: grid;
    grid-template-columns: 1.1fr 1.6fr 1.3fr 0.9fr auto;
    gap: var(--sp-2);
    align-items: center;
}
.signer-head { font-size: var(--fs-sm); font-weight: 600; color: var(--bm-text-sub); }
.signer-row .row-del:disabled { opacity: .35; cursor: default; }
.signer-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
/* 상세 화면 단건 추가(pledge_detail) — 뒤늦게 확정된 인력을 기존 용역에 붙이는 한 줄 폼. */
.signer-add-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); }
.signer-add-form input { flex: 1 1 140px; max-width: 240px; }
/* 좁은 화면에서는 한 줄에 다 넣지 않는다 — 칸이 찌그러지면 무엇을 넣는 곳인지 알 수 없다. */
@media (max-width: 860px) {
    .signer-head { display: none; }
    .signer-row { grid-template-columns: 1fr 1fr; }
    .signer-row .row-del { grid-column: 2; justify-self: end; }
}

/* ===== 파일 첨부 공용 컴포넌트 (2026-09-03, portal_10 §9) =====
   업로드 = .file-field(_file_upload.html) / 표 = .file-table + _file_cell.html / 단일 = .file-chip(_file_chip.html)
   순서 고정: 라벨 → 현재 파일 → 파일 입력[+설명][+버튼] → 힌트. 색·크기는 토큰만. */
.file-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.file-field > label { font-size: 13px; font-weight: 600; color: var(--bm-text-sub); }
.file-field .current { font-size: var(--fs-sm); color: var(--bm-text-sub); }
.file-field .file-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.file-field input[type="file"], .form-field input[type="file"] { max-width: 100%; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: 6px 8px; font-size: 13px; font-family: var(--bm-font); background: var(--bm-surface); color: var(--bm-text-sub); }
.file-field input[type="file"] { flex: 1; min-width: 240px; }   /* .file-row = 가로 flex */
/* .form-field 는 **세로** flex 라 flex:1 을 주면 입력칸 높이가 늘어난다(2026-09-18 실측) */
.form-field input[type="file"] { align-self: stretch; }
.file-field input[type="file"]::file-selector-button, .form-field input[type="file"]::file-selector-button { background: var(--bm-surface); color: var(--bm-primary); border: 1px solid var(--bm-border-strong); border-radius: 6px; padding: 5px 11px; font-size: var(--fs-sm); font-weight: 600; font-family: var(--bm-font); cursor: pointer; margin-right: 10px; }
.file-field input[type="file"]::file-selector-button:hover, .form-field input[type="file"]::file-selector-button:hover { background: var(--bm-blue-10); }
.file-field input[type="file"]:focus, .form-field input[type="file"]:focus { outline: none; border-color: var(--bm-primary); box-shadow: 0 0 0 3px var(--bm-blue-10); }
.file-field input[type="text"] { flex: 1; min-width: 200px; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: 8px 12px; font-size: 14px; font-family: var(--bm-font); background: var(--bm-surface); color: var(--bm-text); }
.file-field .field-hint { margin-top: 0; }
.form-field .file-field { margin-top: 0; }
.fico { display: inline-block; min-width: 38px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--bm-primary); background: var(--bm-blue-10); border: 1px solid var(--bm-blue-20); border-radius: 5px; padding: 2px 5px; margin-right: var(--sp-2); vertical-align: middle; }
.fmeta { font-size: var(--fs-xs); color: var(--bm-text-faint); margin-top: 2px; }
.file-table td { vertical-align: middle; }
.file-table th { white-space: nowrap; }
.file-table td a { color: var(--bm-primary); text-decoration: none; font-weight: 500; }
.file-table td a:hover { text-decoration: underline; }
.file-table .fcell { min-width: 200px; }
.file-table .fdesc { min-width: 140px; }  /* 파일 칸(_file_cell 호출 td) — 다른 열에 밀려 배지·이름이 세로로 쪼개지지 않게 */
.file-table .fmeta { white-space: nowrap; }
.file-table .file-table-nowrap, .file-table td.nowrap { white-space: nowrap; }
.file-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: 10px 12px; background: var(--bm-surface-sub); margin-bottom: var(--sp-2); }
.file-chip .fbody { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-chip .fbody a { color: var(--bm-primary); text-decoration: none; font-weight: 500; }
.file-chip .fbody a:hover { text-decoration: underline; }
.file-chip-preview { margin-top: var(--sp-2); }
.file-chip-preview summary { cursor: pointer; color: var(--bm-text-sub); font-size: var(--fs-sm); }
.button.ghost.danger { background: var(--bm-surface); color: var(--bm-danger); border-color: var(--bm-danger-bd); }
.button.ghost.danger:hover { background: var(--bm-danger-bg); }

/* ===== 표 공용 (2026-09-03, _13 §2.G 조치 ⑥) =====
   열 폭 = .col-xs(64) .col-sm(110) .col-md(160) .col-lg(240) + .nowrap 만(인라인 width 금지, fe-lint) / 액션 열 = <th class="fact">&nbsp;</th> + <td class="fact"> / 빈 목록 = _empty.html */
th.col-xs, td.col-xs { width: 64px; }  th.col-sm, td.col-sm { width: 110px; }  th.col-md, td.col-md { width: 160px; }  th.col-lg, td.col-lg { width: 240px; }
table .fact { text-align: right; white-space: nowrap; width: 1%; }
table .fact form { display: inline; }
table .fact .button + .button, table .fact form + .button, table .fact .button + form, table .fact form + form { margin-left: 6px; }
td.empty-cell { padding: 0; border-bottom: 1px solid var(--bm-border); }
.empty-state { text-align: center; padding: 28px 12px; }
.empty-state .es-title { color: var(--bm-text-faint); font-size: 13.5px; }
.empty-state .es-hint { color: var(--bm-text-faint); font-size: var(--fs-sm); margin-top: 4px; opacity: .85; }
.empty-state .button { margin-top: 10px; }

/* 신청 상세 — 사전 검토 요청(검토자 선택 + 버튼 한 줄) */
.review-req { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.review-req-sel { padding: 8px 10px; border: 1px solid var(--bm-border); border-radius: 8px;
                  background: var(--bm-surface); color: var(--bm-text); font-size: var(--fs-sm); }

/* 신청 상세 — 참조 칩(누가 · 언제 메일 받는지) */
.cc-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cc-line-tag { font-size: var(--fs-xs); font-weight: 700; color: var(--bm-text-sub);
               border: 1px solid var(--bm-border); border-radius: 6px; padding: 2px 8px; }
.cc-line-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
                background: var(--bm-surface-2); border: 1px solid var(--bm-border);
                border-radius: 999px; padding: 3px 10px; }
.cc-line-when { font-size: var(--fs-xs); color: var(--bm-text-faint); }

/* 신청 목록 — 검색창·신청일 정렬 헤더 */
.list-search { padding: 8px 10px; border: 1px solid var(--bm-border); border-radius: 8px;
               background: var(--bm-surface); color: var(--bm-text); font-size: var(--fs-sm); width: 220px; }
th .th-sort { color: inherit; text-decoration: none; }
th .th-sort:hover { text-decoration: underline; }

/* 패널 안 소제목(한 패널에 표 여러 개) — 재직증명서 신청 처리 박스 등 */
.sub-title { font-size: var(--fs-md); font-weight: 700; color: var(--bm-text); margin: 6px 0 8px; }
.sub-title.mt-2 { margin-top: 20px; }

/* 반려 사유 입력(재직증명서·명함·MCP 공통) — 목록 행 안의 작은 입력 + 버튼 */
.reject-form { display: inline-flex; gap: 6px; align-items: center; }
.reject-reason { width: 180px; padding: 5px 8px; border: 1px solid var(--bm-border); border-radius: 6px;
                 background: var(--bm-surface); color: var(--bm-text); font-size: var(--fs-xs); }

/* ===== 자산·취약점 페이지 컴포넌트 (2026-09-07, _13 §2.M 조치 ⑩ — 페이지별 <style> 11개 공용화) =====
   자산 표 .asset-grid / 가로 스크롤 .table-scroll(+.tscroll 버튼) / 판정 색 .v-* / 위험등급 .rk-* / 위험 산식 흐름 .risk-flow
   / 결과 매트릭스 .vx / 자산별 결과 .vr / 입력 그리드 .gi-* / 조치계획 .rp* / 기준 .rc* / 개요 카드 .ov-* / 구조도 .vflow */
.table-scroll-wrap { position: relative; }
.table-scroll-wrap .table-scroll { cursor: grab; }
.table-scroll.grabbing { cursor: grabbing; user-select: none; }
.tscroll { position: absolute; top: 0; bottom: 0; z-index: 5; width: 22px; border: none; background: var(--bm-surface); opacity: .92;
  color: var(--bm-text-faint); font-size: 15px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0,0,0,.07); }
.tscroll:hover { opacity: 1; color: var(--bm-navy-800); }
.tscroll-left { left: 0; border-right: 1px solid var(--bm-border); }
.tscroll-right { right: 0; border-left: 1px solid var(--bm-border); }
.asset-grid { font-size: 11px; }
.asset-grid th, .asset-grid td { padding: 3px 6px; line-height: 1.3; }
.asset-grid tr.zone-sep td, .vx tr.area-sep td { background: var(--bm-blue-10); font-weight: 600; color: var(--bm-navy-800); text-align: left; }

/* 판정 색 — 글자(기본) / .vx 셀 배경. 클래스는 VERDICT 코드 그대로(v-GOOD·v-VULN·v-NA·v-INTERVIEW) */
.v-GOOD { color: var(--bm-success); font-weight: 600; }
.v-VULN { color: var(--bm-danger); font-weight: 700; }
.v-NA { color: var(--bm-text-faint); }
.v-INTERVIEW { color: var(--bm-yellow-fg); font-weight: 600; }
.vx { font-size: 11px; font-family: var(--bm-font); }
.vx th, .vx td { padding: 2px 5px; line-height: 1.3; text-align: center; }
.vx td.l { text-align: left; }
.vx .v-GOOD { background: var(--bm-success-bg); font-weight: 400; }
.vx .v-VULN { background: var(--bm-danger-bg); }
.vx .v-NA { background: var(--bm-surface-sub); }
.vx .v-INTERVIEW { background: var(--bm-yellow-bg); font-weight: 400; }
.vx .ov { outline: 2px solid var(--bm-primary); outline-offset: -2px; }
.vx a { color: inherit; text-decoration: none; display: block; }
.bulk-row td { background: var(--bm-surface-sub); }
.bulk-form, .vr .row-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.vr .row-form { margin-top: 4px; }
.bulk-form .f-note, .vr .f-note { min-width: 260px; }
.bulk-form .f-rem, .vr .f-rem { min-width: 180px; }
details.bulk summary, .vr details summary { cursor: pointer; color: var(--bm-text-sub); font-size: 11px; }
progress.grid-bar { min-width: 160px; flex: 1; height: 8px; accent-color: var(--bm-primary); }
.grid-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* 자산별 결과 (vuln_asset_results) */
.vr { font-size: 12px; font-family: var(--bm-font); }
.vr details { margin: 4px 0; }
.vr pre { background: var(--bm-surface-sub); border: 1px solid var(--bm-border); padding: 8px; font-size: 11px; max-height: 340px; overflow: auto; white-space: pre-wrap; font-family: "D2Coding", Consolas, monospace; }
.vr .item-card { border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: 8px 12px; margin-bottom: 8px; }
.vr .item-card.vuln { border-left: 4px solid var(--bm-danger); }
.vr .ov-badge { background: var(--bm-info-bg); color: var(--bm-info); border-radius: 4px; padding: 0 6px; font-size: 10px; }

/* 항목 입력 그리드 (vuln_grid_item) */
.gi-title { font-size: 15px; font-weight: 700; color: var(--bm-navy-800); margin: 0 0 2px; }
.gi-nav, .gi-actions, .vuln-upload-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gi-actions { margin-top: 12px; }
.gi-bulk { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.gi-bulk textarea { flex: 1; min-width: 280px; min-height: 52px; }
.gi-table td { vertical-align: top; padding: 6px 8px; }
.gi-table textarea { width: 100%; min-height: 56px; font-size: 12px; }
.gi-table select { min-width: 96px; }
.gi-target { font-weight: 600; white-space: nowrap; }

/* 회차 상세 (vuln_job_detail) */
.vuln-cov { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.match-ok { color: var(--bm-success); font-weight: 600; }
.match-none { color: var(--bm-danger); font-weight: 600; }
.doc-summary { width: 100%; min-height: 90px; font-size: 12px; }
.sel-asset { max-width: 260px; }

/* 위험등급 색·배지, 위험 산식 흐름 (조치계획·위험 기준 공용) */
.rk-HIGH { background: var(--bm-danger-bg); color: var(--bm-danger); font-weight: 700; }
.rk-MID { background: var(--bm-yellow-bg); color: var(--bm-yellow-fg); font-weight: 700; }
.rk-LOW { background: var(--bm-success-bg); color: var(--bm-success); font-weight: 700; }
.rk-none { color: var(--bm-text-faint); }
.badge-rk { display: inline-block; border-radius: 5px; padding: 1px 8px; font-size: 11px; font-weight: 700; min-width: 26px; }
.risk-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--bm-text-sub); margin-bottom: 14px; }
.risk-flow .b { background: var(--bm-blue-10); border: 1px solid var(--bm-border); border-radius: 6px; padding: 6px 10px; color: var(--bm-navy-800); font-weight: 600; line-height: 1.3; }
.risk-flow .b small { display: block; font-weight: 400; color: var(--bm-text-faint); font-size: 10px; }
.risk-flow .op { color: var(--bm-primary); font-weight: 800; font-size: 16px; }
.risk-flow .ar { color: var(--bm-text-faint); font-weight: 700; }

/* 조치계획 (vuln_remediation_plan) */
.rp-ov { background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding: 14px 16px; margin-bottom: 16px; display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.rp-ov .risk-flow { margin-bottom: 0; }
table.rp-mtx { border-collapse: collapse; font-size: 11px; }
table.rp-mtx caption { caption-side: top; text-align: left; color: var(--bm-text-faint); font-size: 10px; margin-bottom: 4px; }
table.rp-mtx th, table.rp-mtx td { border: 1px solid var(--bm-border); padding: 4px 8px; text-align: center; }
table.rp-mtx thead th { background: var(--bm-blue-10); color: var(--bm-navy-800); font-weight: 600; }
table.rp-mtx tbody th { background: var(--bm-surface); color: var(--bm-navy-800); font-weight: 700; white-space: nowrap; }
.rp-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; }
.rp-filters select { min-width: 96px; }
.rp-cnt { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rp-cnt .pill { border: 1px solid var(--bm-border); border-radius: 14px; padding: 2px 10px; font-size: 11.5px; color: var(--bm-text-sub); background: var(--bm-surface); }
.rp-cnt .pill b { color: var(--bm-navy-800); }
table.rp { width: 100%; border-collapse: collapse; font-size: 12px; }
table.rp th, table.rp td { border: 1px solid var(--bm-border); padding: 5px 7px; vertical-align: top; line-height: 1.35; }
table.rp thead th { background: var(--bm-surface-sub); color: var(--bm-navy-800); font-weight: 600; position: sticky; top: 0; text-align: center; white-space: nowrap; }
table.rp td.l { text-align: left; }
table.rp .itc { font-weight: 600; color: var(--bm-navy-800); }
table.rp select, table.rp input[type=text], table.rp input[type=date], table.rp textarea { font-size: 12px; }
table.rp textarea { width: 100%; min-height: 38px; }
table.rp .w-owner select { min-width: 120px; }
table.rp .w-rem { min-width: 180px; }
.auto-hint { font-size: 10px; color: var(--bm-text-faint); display: block; }
.acc-cell { white-space: nowrap; text-align: center; }

/* 위험 기준 (vuln_risk_criteria) */
.rc-sec { margin-bottom: 22px; }
.rc-sec > h3 { font-size: 14px; color: var(--bm-navy-800); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.rc-sec > h3 .n { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--bm-primary); color: var(--bm-surface); font-size: 11px; align-items: center; justify-content: center; font-weight: 700; }
.rc-note { font-size: 12px; color: var(--bm-text-sub); margin: 8px 0 0; }
table.rc { border-collapse: collapse; font-size: 12.5px; }
table.rc th, table.rc td { border: 1px solid var(--bm-border); padding: 7px 12px; text-align: center; }
table.rc thead th { background: var(--bm-blue-10); color: var(--bm-navy-800); font-weight: 600; }
table.rc tbody th { background: var(--bm-surface-sub); color: var(--bm-navy-800); font-weight: 700; white-space: nowrap; }
table.rc td.l, table.rc th.l { text-align: left; }
.rc-doa { margin-top: 12px; font-size: 12.5px; color: var(--bm-text-sub); background: var(--bm-blue-10); border: 1px solid var(--bm-border); border-radius: 8px; padding: 11px 14px; }
.rc-doa b { color: var(--bm-navy-800); }
.rc-jobs a { color: var(--bm-primary); text-decoration: none; font-weight: 600; }
.rc-jobs a:hover { text-decoration: underline; }

/* 자산 개요 카드 (asset/overview) */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 4px; }
.ov-card { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); background: var(--bm-surface); text-decoration: none; color: var(--bm-text); transition: .1s; }
.ov-card:hover { border-color: var(--bm-primary-light); box-shadow: 0 1px 8px rgba(0,0,0,.07); }
.ov-card .ov-label { font-weight: 600; font-size: 13.5px; }
.ov-card .ov-count { font-size: 21px; font-weight: 700; color: var(--bm-primary); }
.ov-card .ov-count small { font-size: 12px; color: var(--bm-text-faint); font-weight: 500; margin-left: 2px; }

/* 취약점 점검 구조도 SVG (vuln_home) */
.vflow { width: 100%; max-width: 680px; height: auto; display: block; margin: 0 auto; }
.vflow .fb { fill: var(--bm-surface); stroke: var(--bm-border); stroke-width: 1.2; }
.vflow .fl { fill: var(--bm-surface-sub); stroke: var(--bm-border); stroke-width: 1; stroke-dasharray: 4 3; }
.vflow .ft1 { fill: var(--bm-navy-800); font-size: 14px; font-weight: 700; font-family: var(--bm-font); }
.vflow .ft2 { fill: var(--bm-text-sub); font-size: 11.5px; font-family: var(--bm-font); }
.vflow .ft3 { fill: var(--bm-text-faint); font-size: 10.5px; font-family: var(--bm-font); }
.vflow .fh { fill: var(--bm-primary); font-size: 12px; font-weight: 700; font-family: var(--bm-font); }
.vflow .fa { stroke: var(--bm-text-faint); stroke-width: 1.4; fill: none; }
.vflow .fah { fill: var(--bm-text-faint); }

/* ── 퇴직 점검 포크 파이프라인(2026-09-14) — 레인이 병렬로 갈라졌다 합류한다.
   시각 언어는 신청 결재 스테퍼(.flow-steps 520~·2109~)와 동일: 원 22px(border 2px,
   done=primary 채움+inset, current=mist)·선 2px var(--bm-border)·라벨 12.5px·
   담당자 표기는 .fs-name(1442) 알약 값 그대로. 레인 배지는 공용 .badge(새 색 정의 없음). */
/* 좌우 여백 48px — 등록·종료가 카드 끝에 붙지 않는다. 노드는 내용폭(원+라벨),
   선(fork-link·가지)이 전부 신축이라 원에 직접 붙어 끊길 수 없는 구조. */
.fork-flow { display: flex; align-items: center; padding: 8px 12px 46px; overflow-x: auto; }
/* 양끝 신축 여백(링크의 절반 비율) — 넓은 화면에서 등록·종료가 가장자리에 붙지 않고
   계정신청 스테퍼처럼 안쪽 칸 중앙쯤에 온다(JM 지적) */
.fork-flow::before, .fork-flow::after { content: ""; flex: 0.5 1 0; }
/* 노드 flex 높이 = 원 22px 뿐 — 라벨·알약은 아래 절대배치. 그래야 원 중심·선·레인이
   한 라인에 정확히 붙는다(라벨이 높이에 끼면 원이 위로 밀려 선이 끊겨 보임 — JM 지적). */
.fork-node { flex: 0 0 auto; position: relative; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--bm-text-faint); }
.fork-node .fn-dot { display: block; width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--bm-border); background: var(--bm-surface); }
.fork-node .fn-label { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.fork-node.done { color: var(--bm-primary); font-weight: 600; }
.fork-node.current { color: var(--bm-primary); font-weight: 800; }
.fork-node.done .fn-dot { border-color: var(--bm-primary); background: var(--bm-primary); box-shadow: inset 0 0 0 5px var(--bm-primary); }
.fork-node.current .fn-dot { border-color: var(--bm-primary); background: var(--bm-mist); }
/* 완료 원 흰 체크·현재 원 26px — 공용 스테퍼와 동일 규칙(2026-09-15 JM 1+2) */
.fork-node .fn-dot { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--bm-surface); }
.fork-node.done .fn-dot::after { content: "✓"; }
.fork-node.current .fn-dot { width: 26px; height: 26px; }
.fork-node .fn-sub { position: absolute; top: 47px; left: 50%; transform: translateX(-50%); padding: 3px 10px; font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--bm-primary); background: var(--bm-blue-10); border: 1px solid var(--bm-primary); border-radius: 12px; white-space: nowrap; }
/* 첫·끝 노드 알약도 중앙 정렬 — 계정신청 스테퍼와 동일(JM). 양끝 신축 여백이
   있어 중앙 기준이어도 잘리지 않는다(구 안쪽 정렬 특례 제거). */
.fork-link { flex: 1 1 24px; min-width: 16px; height: 2px; background: var(--bm-border); }
/* 합류 줄기 → '점검 완료' 원 사이 짧은 이음선 — 모이는 지점 가까이, 단 너무 붙지 않게
   (2026-09-14 20px → 09-15 40px, JM "너무 붙어 있다") */
.fork-link.short { flex: 0 0 40px; min-width: 40px; }
/* 완료 레인 → 합류 중간(50%)까지의 세로 구간만 파랑 — "완료된 것만 그 줄만, 세로선
   중간까지"(2026-09-14 JM. 줄기 전체 파랑은 미완 레인까지 완료처럼 보여 기각).
   aN = 위에서 N번째 레인(중앙 위)이 내려가는 구간, bN = 아래에서 N번째가 올라가는 구간.
   끝점을 top/bottom 혼합(알약 피치 15+46n px ↔ 50%=이음선 y)으로 잡아 레인 수와 무관. */
.fork-lanes .fl-joint { position: absolute; right: 0; width: 2px; z-index: 1; background: var(--bm-primary); }
.fl-joint.a0 { top: 15px; bottom: 50%; }
.fl-joint.a1 { top: 61px; bottom: 50%; }
.fl-joint.a2 { top: 107px; bottom: 50%; }
.fl-joint.a3 { top: 153px; bottom: 50%; }
.fl-joint.a4 { top: 199px; bottom: 50%; }
.fl-joint.a5 { top: 245px; bottom: 50%; }
.fl-joint.b0 { bottom: 15px; top: 50%; }
.fl-joint.b1 { bottom: 61px; top: 50%; }
.fl-joint.b2 { bottom: 107px; top: 50%; }
.fl-joint.b3 { bottom: 153px; top: 50%; }
.fl-joint.b4 { bottom: 199px; top: 50%; }
.fl-joint.b5 { bottom: 245px; top: 50%; }
/* 지나온 경로는 파란 선 — 계정신청 스테퍼의 done 구간과 같은 규칙 */
.fork-link.done { background: var(--bm-primary); }
/* 색 = 프로세스 의미(2026-09-14 JM 확정): 등록되면 일이 각 담당에게 **도달**했으므로
   왼쪽(분기 줄기+모든 왼가지)은 항상 파랑. 레인이 끝나면 그 레인의 오른가지가 파랑.
   전 레인이 끝나면 합류(오른 줄기)까지 파랑. */
.fork-lanes.done::after { background: var(--bm-primary); }
.fork-lanes { flex: 0 1 auto; min-width: 300px; display: flex; flex-direction: column; gap: 16px; position: relative; }
/* 분기·합류 세로 줄기 — 첫 레인 가지(y12)부터 마지막 레인 가지까지 정확히. 이게 없으면
   위아래 레인이 메인 선과 이어져 보이지 않는다(JM 지적). 가로 가지가 여기 붙는다.
   왼쪽(분기) 줄기는 **항상 파랑** — 등록은 이미 지난 단계라 분기까지는 완료 경로다.
   그래서 등록→완료 레인(가지 파랑)이 끊김 없는 파란 길이 된다(JM 요청). */
/* 줄기 끝 = 첫·마지막 알약 중심(15px — 알약 높이를 30px 정수로 고정한 절반).
   알약 높이가 소수점이면 선들이 반픽셀에 걸려 굵기가 제각각으로 렌더된다(JM 실증). */
.fork-lanes::before, .fork-lanes::after { content: ""; position: absolute; top: 15px; bottom: 15px; width: 2px; background: var(--bm-border); }
.fork-lanes::before { left: 0; background: var(--bm-primary); }
.fork-lanes::after { right: 0; }
/* 완료 레인의 오른가지 파랑 — 그 레인 몫이 합류점으로 나갔다 */
.fork-lane.done::after { background: var(--bm-primary); }
/* 가지 세로 위치는 **알약 중심(top 11px) 고정** — center 정렬이면 완료 일시 공간
   (padding-bottom)이 중심을 밀어 가지가 알약 위로 뜬다(실증) */
/* 가지는 자동 중앙 정렬 — 알약 높이는 안의 배지가 키우므로(≈28px) y를 하드코딩하면
   중심을 놓친다(12px 고정이 전 가지를 중심 위로 띄운 원인 — JM 확대 스샷으로 확정).
   레인 높이 = 알약 높이(완료일시는 절대배치)라 center가 곧 알약 중심이다. */
.fork-lane { display: flex; align-items: center; }
/* 왼쪽 가지도 신축 — 고정폭이면 알약이 레인 왼쪽에 몰린다(JM 지적). 좌우가 같이 늘어나
   알약이 레인 중앙에 온다. */
.fork-lane::before { content: ""; flex: 1 1 14px; min-width: 14px; height: 2px; background: var(--bm-primary); }
/* 오른쪽 가지는 늘어나서 합류 줄기까지 닿는다 — 알약 폭이 제각각이라 고정폭이면 짧은
   레인이 오른쪽 줄기와 끊겨 보인다(JM 지적) */
.fork-lane::after { content: ""; flex: 1 1 14px; min-width: 14px; height: 2px; background: var(--bm-border); }
/* 완료 레인의 처리자·일시 — 알약 아래 절대배치. 레인 높이에 넣지 않는다(패딩으로 넣으면
   마지막 레인이 완료됐을 때 세로 줄기가 그만큼 가지를 지나쳐 삐져나온다 — JM 실증).
   일시 높이(~14px)는 레인 간격 16px가 흡수한다. */
.fork-lane .fl-pill { position: relative; }
.fork-lane .fl-sub { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; color: var(--bm-text-faint); white-space: nowrap; }
.fork-lane .fl-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; box-sizing: border-box; padding: 3px 10px; border: 1px solid var(--bm-border); border-radius: 15px; background: var(--bm-surface-sub); font-size: 11.5px; font-weight: 700; color: var(--bm-text-sub); white-space: nowrap; }
.fork-lane.done .fl-pill { border-color: var(--bm-primary); background: var(--bm-blue-10); color: var(--bm-primary); }
/* 진행 중 지점 펄스(2026-09-15 JM "현재 진행 중인 부분을 동적으로") — 미완 레인 알약과
   current 노드 원이 파란 링을 은은하게 내뿜는다. 완료·대기(도달 전) 지점은 정지 상태라
   "지금 살아있는 곳"이 한눈에 구분된다. 모션 최소화 설정은 존중(reduce에서 꺼짐). */
/* 링 색은 primary 45% — 첫 판 --bm-blue-10은 배경색에 묻혀 안 보였다(JM "안 보이는데") */
/* 현재 단계 표시는 **정지 상태에서도** 보여야 한다 — 상시 후광(4px) 위에 맥박 링을 얹는다.
   움직임에만 기대면 모션을 끈 환경(prefers-reduced-motion·Windows 애니메이션 끄기)·
   화면 캡처·짧게 보는 사람에게는 '지금 여기'가 전혀 전달되지 않는다(2026-09-16 JM). */
@keyframes bm-fork-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bm-primary) 45%, transparent),
                     0 0 0 4px color-mix(in srgb, var(--bm-primary) 18%, transparent); }
    75% { box-shadow: 0 0 0 12px transparent,
                      0 0 0 4px color-mix(in srgb, var(--bm-primary) 18%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent,
                       0 0 0 4px color-mix(in srgb, var(--bm-primary) 18%, transparent); }
}
/* 상시 후광 — 애니메이션이 꺼져도 남는다(위 keyframes 와 같은 값) */
.flow-step.current::before,
.fork-node.current .fn-dot,
.fork-lanes:not(.done) .fork-lane:not(.done) .fl-pill {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bm-primary) 18%, transparent);
}
.fork-node.current .fn-dot { animation: bm-fork-pulse 1.8s ease-out infinite; }
.fork-lanes:not(.done) .fork-lane:not(.done) .fl-pill { animation: bm-fork-pulse 1.8s ease-out infinite; }
/* 공용 스테퍼(신청 결재·명함·입사)의 현재 단계 원에도 동일 펄스 — 포털 전체가 같은
   언어로 "지금 살아있는 단계"를 말한다(2026-09-15 JM). 안내형(guide)은 current가 없어 무영향. */
.flow-step.current::before { animation: bm-fork-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .fork-node.current .fn-dot,
    .flow-step.current::before,
    .fork-lanes:not(.done) .fork-lane:not(.done) .fl-pill { animation: none; }
}
@media (max-width: 900px) { .fork-flow { flex-wrap: wrap; } .fork-link { min-width: 12px; } }

/* ── 인앱 알림함(품질 D-1, 2026-09-15) — 헤더 종 버튼·안 읽음 배지·알림 목록 ── */
.bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: var(--bm-text-sub); }
.bell-btn:hover { background: var(--bm-surface-sub); color: var(--bm-primary); }
.bell-btn svg { width: 19px; height: 19px; }
.bell-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--bm-danger); color: var(--bm-surface); font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; }
.ntf-list { list-style: none; margin: 0; padding: 0; }
.ntf-row { border-bottom: 1px solid var(--bm-border); }
.ntf-row:last-child { border-bottom: 0; }
.ntf-link { display: flex; align-items: center; gap: 10px; padding: 11px 6px; color: var(--bm-text-sub); }
.ntf-link:hover { background: var(--bm-surface-sub); }
.ntf-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.ntf-row.unread .ntf-dot { background: var(--bm-primary); }
.ntf-row.unread .ntf-title { font-weight: 700; color: var(--bm-text); }
.ntf-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-time { flex: 0 0 auto; font-size: 11.5px; color: var(--bm-text-faint); }

/* ===== 인프라·보안 요청 — 유형 카드(라디오, 2026-09-15 MR1). 선택은 .on(JS 폴백)·:has(input:checked) ===== */
.type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.type-card { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--bm-border); border-radius: 10px; padding: 10px 12px; background: var(--bm-surface-sub); cursor: pointer; transition: border-color .12s, background .12s; }
.type-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.type-card:hover { border-color: var(--bm-border-strong); }
.type-card.on, .type-card:has(input:checked) { border-color: var(--bm-primary); background: var(--bm-blue-10); }
.type-card .tc-title { font-size: 13px; font-weight: 700; color: var(--bm-text); }
.type-card.on .tc-title, .type-card:has(input:checked) .tc-title { color: var(--bm-primary); }
.type-card .tc-desc { font-size: 12px; color: var(--bm-text-faint); line-height: 1.4; }

/* ===== 예시·안내 글꼴 통일(2026-09-15 JM, 모든 요청 메뉴) — placeholder 는 브라우저 기본색이 제각각이라 안내 글(.field-hint)과 같은 회색으로 ===== */
input::placeholder, textarea::placeholder { color: var(--bm-placeholder); opacity: 1; font-size: inherit; font-style: normal; }
textarea.perm-textarea::placeholder { font-family: var(--bm-font); }   /* 입력값(JSON)은 고정폭, 예시는 다른 칸과 같은 글꼴 */
.type-card .tc-desc { font-size: var(--fs-sm); }
/* ===== 인프라·보안 요청 고도화(2026-09-15) — IP 칩 입력 · 중복 경고 · 요약 · 결재 카드 ===== */
.ip-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); background: var(--bm-surface); cursor: text; }
.ip-chips:focus-within { border-color: var(--bm-primary); }
.ip-chips .ip-chip-input { flex: 1 1 220px; min-width: 160px; border: 0; outline: 0; background: transparent; font-size: 14px; font-family: var(--bm-font); color: var(--bm-text); padding: 4px 2px; }
.ip-chips .sys-chip { font-family: "D2Coding", Consolas, monospace; }
.ip-chips .sys-chip.chip-bad { background: var(--bm-surface-sub); color: var(--bm-danger); border: 1px solid var(--bm-danger); }
.ip-dup { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--bm-warning); border-radius: 8px; background: var(--bm-surface-sub); font-size: var(--fs-sm); }
.ip-dup-head { font-weight: 700; color: var(--bm-warning); margin-bottom: 4px; }
.ip-dup-row { color: var(--bm-text-sub); padding: 2px 0; }
.ip-dup-row a { font-weight: 700; color: var(--bm-primary); text-decoration: none; }
.summary-callout { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--bm-primary); border-radius: 8px; background: var(--bm-blue-10); }
.summary-callout .sc-label { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--bm-primary); background: var(--bm-surface); border: 1px solid var(--bm-primary); border-radius: 6px; padding: 1px 7px; margin-top: 2px; }
.summary-callout .sc-text { font-size: 14px; font-weight: 600; color: var(--bm-text); line-height: 1.5; word-break: keep-all; }
.route-box .ma-appr-tag.tag-cc { background: var(--bm-text-sub); }
.route-box .ma-appr { font-weight: 500; }
.cr-card { border-left: 4px solid var(--bm-primary); }
.cr-card .cr-summary { font-size: 16px; font-weight: 700; color: var(--bm-text); line-height: 1.5; word-break: keep-all; }
.cr-card .cr-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cr-card .cr-meta { font-size: var(--fs-sm); color: var(--bm-text-sub); margin-left: 4px; }
.route-box { margin-top: 0; padding: 8px 10px; }
.route-box #route-rows { gap: 4px; }
.route-box .ma-row { padding: 5px 9px; font-size: 12px; }
.route-box .ma-appr-tag { font-size: 9.5px; padding: 1px 6px; }
.route-box .route-foot { margin: 8px 0 0; }
.route-box .route-foot .field-hint { margin: 0; }
.route-box .route-foot { justify-content: space-between; align-items: center; gap: 8px; }
.route-box .cc-multi .sys-dd-toggle { white-space: nowrap; }
/* 예시·안내 역할 분리(2026-09-15 JM): 칸 안 = "예:"로 시작하는 예시(사라져도 되는 정보, 연한 회색) / 칸 아래 .field-hint = 규칙·주의(사라지면 안 되는 정보, 한 단계 진한 회색). 기울임 금지(한글 이탤릭은 합성체). */
.period-row input[type="date"] { flex: 1 1 130px; min-width: 120px; }
.period-row .period-tilde { color: var(--bm-text-sub); padding: 0 2px; }
/* 유형 카드 격자 — 3열 고정(2026-09-16 JM "오와 열"): auto-fit 은 폭에 따라 2·4열로 흔들려 행이 어긋난다.
   예시는 change_types 에서 2줄로 맞추고(`\n` → pre-line) 카드 높이를 균일하게. */
.type-cards { grid-template-columns: repeat(3, 1fr); }
.type-card .tc-desc { white-space: pre-line; }
@media (max-width: 1100px) { .type-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .type-cards { grid-template-columns: 1fr; } }

/* ── 전역 검색(품질 D-3, 2026-09-16) — 헤더 검색창·결과 페이지 폼 ── */
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search .ts-ico { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--bm-text-faint); pointer-events: none; }
.topbar-search input { width: 170px; height: 34px; box-sizing: border-box; padding: 0 10px 0 29px; border: 1px solid var(--bm-border); border-radius: 10px; background: var(--bm-surface-sub); color: var(--bm-text); font-size: 12.5px; }
.topbar-search input:focus { width: 230px; border-color: var(--bm-primary); background: var(--bm-surface); outline: none; }
.search-page-form { display: flex; gap: 8px; }
.search-page-form input { flex: 1 1 auto; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--bm-border); border-radius: 10px; background: var(--bm-surface); color: var(--bm-text); font-size: 14px; }
.search-page-form input:focus { border-color: var(--bm-primary); outline: none; }
@media (max-width: 1100px) { .topbar-search { display: none; } }

/* ── 문서 진위확인 페이지(품질 D-2, 2026-09-16) — 로그인 없이 열리는 최소 화면 ── */
.vf-wrap { max-width: 440px; margin: 32px auto; padding: 0 16px; }
.vf-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.vf-brand img { height: 22px; }
.vf-table { width: 100%; border-collapse: collapse; }
.vf-table th { width: 96px; text-align: left; font-weight: 500; color: var(--bm-text-sub); }
.vf-table th, .vf-table td { padding: 9px 2px; border-bottom: 1px solid var(--bm-border); }

/* ── 컴포넌트 카탈로그(/styleguide, 품질 D-5 2026-09-16) — 스와치는 토큰을 그대로 칠한다 ── */
.sg-swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.sg-swatch { display: flex; align-items: center; gap: 9px; min-width: 210px; }
.sg-sw { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--bm-border); flex: 0 0 auto; }
.sg-sw-name { font-size: 12px; line-height: 1.5; }
.sg-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sg-sw-primary { background: var(--bm-primary); }
.sg-sw-primary-hover { background: var(--bm-primary-hover); }
.sg-sw-success { background: var(--bm-success); }
.sg-sw-warning { background: var(--bm-warning); }
.sg-sw-danger { background: var(--bm-danger); }
.sg-sw-text { background: var(--bm-text); }
.sg-sw-text-sub { background: var(--bm-text-sub); }
.sg-sw-text-faint { background: var(--bm-text-faint); }
.sg-sw-border { background: var(--bm-border); }
.sg-sw-surface-sub { background: var(--bm-surface-sub); }
/* 유형 카드 아이콘·선택 강조(2026-09-17 JM) — 글자만이라 여섯 장이 비슷해 보이던 문제.
   선택 표시는 ①좌측 컬러 바 ②체크 아이콘 ③배경 틴트 셋을 함께(색 하나에만 의존하지 않게 — 색각 고려).
   체크는 SVG 요소 — 템플릿 글리프(✓)는 fe-lint emoji_status 금지 대상이라 쓰지 않는다. */
.type-card { padding-left: 14px; overflow: hidden; }
.type-card .tc-head { display: flex; align-items: center; gap: 7px; }
.type-card .tc-ico { width: 17px; height: 17px; flex: 0 0 auto; color: var(--bm-text-faint); transition: color .12s; }
.type-card .tc-title { flex: 1 1 auto; }
.type-card .tc-check { width: 15px; height: 15px; flex: 0 0 auto; color: var(--bm-primary); opacity: 0; transition: opacity .12s; }
.type-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--bm-primary); opacity: 0; transition: opacity .12s; }
.type-card.on::before, .type-card:has(input:checked)::before { opacity: 1; }
.type-card.on .tc-ico, .type-card:has(input:checked) .tc-ico { color: var(--bm-primary); }
.type-card.on .tc-check, .type-card:has(input:checked) .tc-check { opacity: 1; }
.type-card:hover .tc-ico { color: var(--bm-text-sub); }

/* ===== 입사 가이드(입사 첫 주 체크리스트) — 대시보드 카드·가이드 화면·입사 이벤트 상세 공용 (2026-09-29) ===== */
.jg-panel { border-left: 4px solid var(--bm-primary); }
.jg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jg-step { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--bm-border); }
.jg-step:last-child { border-bottom: none; }
.jg-mark { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; color: var(--bm-text-sub); background: var(--bm-surface-sub); border: 1px solid var(--bm-border-strong); }
.jg-step.done .jg-mark { color: var(--bm-surface); background: var(--bm-primary); border-color: var(--bm-primary); }
.jg-step.done .jg-mark::before { content: "\2713"; }
.jg-step.now .jg-mark { color: var(--bm-primary); border-color: var(--bm-primary); background: var(--bm-blue-10); }
.jg-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jg-label { font-size: var(--fs-md); }
.jg-step.done .jg-label { color: var(--bm-text-sub); font-weight: 500; }
.jg-hint { font-size: var(--fs-sm); color: var(--bm-text-sub); }
.jg-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.jg-notes { margin: 0; padding-left: 18px; color: var(--bm-text-sub); font-size: var(--fs-md); line-height: 1.8; }
@media (max-width: 720px) { .jg-step { flex-wrap: wrap; } .jg-actions { flex-basis: 100%; padding-left: 38px; } }

/* ===== 목록 라이브 갱신(live-list.js, 2026-09-29) — 불러오는 동안 표만 살짝 흐리게 ===== */
[data-live-list].is-loading .table-scroll, [data-live-list].is-loading .list-pager { opacity: .45; transition: opacity .12s; pointer-events: none; }

/* ===== 시스템 안내 — 내 부서 추천(role_guide.py, 2026-09-29) ===== */
.rg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.rg-item { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--bm-border); border-radius: var(--bm-radius); background: var(--bm-surface-sub); }
.rg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.rg-name { font-size: var(--fs-md); font-weight: 700; color: var(--bm-text); text-decoration: none; }
.rg-desc { font-size: var(--fs-sm); color: var(--bm-text-sub); }
.rg-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }

/* ===== 행 더블클릭 이동(base.js, 2026-09-29) ===== */
tr[data-dbl-href] { cursor: pointer; }
tr[data-dbl-href]:hover td { background: var(--bm-hover); }

/* ===== 보안점검 상세 — 점검표(2026-09-29) =====
   영역별 묶음 + 판정 단추 + 한 번 저장. 입력은 form="insp-sheet" 로 한 폼에 모인다. */
.insp-table { table-layout: fixed; min-width: 640px; }
.insp-table th { white-space: nowrap; }
.insp-table.insp-targets { min-width: 860px; }
.insp-table .c-name { width: 19%; }
/* 지적·조치 입력 — 넓으면 나란히, 좁으면 위아래 */
.insp-notes { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.insp-notes input { flex: 1 1 150px; }
.insp-table th, .insp-table td { vertical-align: middle; }
.insp-table .c-no { width: 52px; text-align: center; color: var(--bm-text-faint); }
.insp-table .c-target { width: 16%; }
.insp-table .c-judge { width: 228px; }
.insp-table .c-note { width: 34%; }
.insp-table .c-num { width: 84px; }
.insp-table .c-act { width: 72px; text-align: right; }
.insp-table input[type="text"], .insp-table input[type="number"] { width: 100%; min-width: 0; }
.insp-area td { background: var(--bm-surface-sub); font-weight: 700; color: var(--bm-text); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.insp-area .insp-area-meta { margin-left: var(--sp-2); font-weight: 500; font-size: var(--fs-sm); color: var(--bm-text-sub); }
.judge { display: inline-flex; border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius-sm); overflow: hidden; }
.judge input { position: absolute; opacity: 0; pointer-events: none; }
.judge label { padding: 5px 11px; font-size: var(--fs-sm); color: var(--bm-text-sub); cursor: pointer; border-right: 1px solid var(--bm-border-strong); user-select: none; }
.judge label:last-of-type { border-right: none; }
.judge label:hover { background: var(--bm-hover); }
.judge input:focus-visible + label { outline: 2px solid var(--bm-primary); outline-offset: -2px; }
.judge input:checked + label { font-weight: 700; }
.judge input[value="PASS"]:checked + label { background: var(--bm-success-bg); color: var(--bm-success); }
.judge input[value="FAIL"]:checked + label { background: var(--bm-warning-bg); color: var(--bm-warning); }
.judge input[value="NA"]:checked + label { background: var(--bm-bg); color: var(--bm-text); }
.insp-savebar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); }
.insp-savebar .insp-dirty { font-size: var(--fs-sm); color: var(--bm-warning); display: none; }
.insp-savebar.is-dirty .insp-dirty { display: inline; }
.insp-dash { color: var(--bm-text-faint); }