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

:root {
    color-scheme: light;   /* 브라우저(모바일) 자동 다크모드 강제 차단 */
    /* ===== BDS (Bomapp Design System) 정합 — next-frontend tailwind.config.base 기준 ===== */
    --bm-primary: #3c7ae5;          /* Blue Base */
    --bm-primary-hover: #3062b7;    /* Blue 70 */
    --bm-primary-light: #6395ea;    /* Blue 50 */
    --bm-blue-10: #ecf2fc;
    --bm-blue-20: #d8e4fa;
    --bm-navy-900: #2b4168;         /* Navi (info) */
    --bm-navy-800: #2b4168;
    --bm-sky: #6395ea;
    --bm-mist: #ecf2fc;

    /* 중립 (BDS Gray) */
    --bm-bg: #f5f5f5;               /* Gray 30 */
    --bm-surface: #ffffff;
    --bm-surface-sub: #fafafa;      /* Gray 20 */
    --bm-border: #ececec;           /* Phase1: 헤어라인 */
    --bm-border-strong: #dddddd;    /* Gray 50 */
    --bm-text: #1f1f1f;             /* Gray Base */
    --bm-text-sub: #666666;         /* Gray 80 */
    --bm-text-faint: #999999;       /* Gray 70 */
    --bm-hover: rgba(31, 31, 31, 0.04);

    /* 의미 색상 (BDS semantic) */
    --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:  #ffecec; --bm-danger:  #cc3131; --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;

    --bm-radius: 10px;              /* Phase1: 통일 */
    --bm-radius-sm: 8px;
    --bm-shadow: none;   /* Phase1: 그림자 제거(평평하게) */
    --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;
}

* {
    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 {
    width: var(--sb-w, 272px);
    flex: 0 0 var(--sb-w, 272px);
    background: var(--bm-surface);
    border-right: 1px solid var(--bm-border);
    color: var(--bm-text);
    padding: 30px 18px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.logo {
    margin-bottom: 34px;
    padding: 0 8px;
}

.logo {
    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::before {
    content: "";
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background: var(--bm-primary);
    flex: 0 0 auto;
}
.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;
}

.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);
}

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

.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;
}

.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);
}

.button.danger {
    background: var(--bm-danger);
}

.button.danger:hover {
    background: #8F3022;
}

.button.small {
    padding: 6px 12px;
    font-size: 12px;
}

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

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

th {
    text-align: left;
    color: var(--bm-text-sub);
    background: var(--bm-surface-sub);
    border-bottom: 1px solid var(--bm-border-strong);
    font-weight: 700;
    padding: 11px 12px;
    font-size: 13px;
}

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;
}

td {
    border-bottom: 1px solid var(--bm-border);
    padding: 12px;
    color: var(--bm-text);
}

tbody tr:hover {
    background: var(--bm-surface-sub);
}

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

/* ===== 배지 (상태별 의미 색상) ===== */

.badge {
    display: inline-block;
    background: var(--bm-info-bg);
    color: var(--bm-info);
    border: 1px solid var(--bm-info-bd);
    padding: 4px 12px;
    border-radius: 15px;   /* BDS badge */
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* 접수·대기 */
.badge.st-DRAFT { background: var(--bm-bg); color: var(--bm-text-sub); border-color: var(--bm-border-strong); }
.badge.st-SUBMITTED,
.badge.st-TEAM_LEADER_PENDING { background: var(--bm-info-bg); color: var(--bm-info); border-color: var(--bm-info-bd); }

/* 승인 진행 중 */
.badge.st-SYSTEM_OWNER_PENDING,
.badge.st-SECURITY_REVIEW_PENDING { background: var(--bm-warning-bg); color: var(--bm-warning); border-color: var(--bm-warning-bd); }

/* 처리 단계 (BDS Sky) */
.badge.st-PROCESSING_PENDING,
.badge.st-PROCESSED { background: var(--bm-sky-bg); color: var(--bm-sky-fg); border-color: var(--bm-sky-bd); }

/* 종결 */
.badge.st-COMPLETED { background: var(--bm-success-bg); color: var(--bm-success); border-color: var(--bm-success-bd); }
.badge.st-REJECTED,
.badge.st-REVOKED { background: var(--bm-danger-bg); color: var(--bm-danger); border-color: var(--bm-danger-bd); }
.badge.st-NEED_MORE_INFO { background: var(--bm-yellow-bg); color: var(--bm-yellow-fg); border-color: #f5e3b3; }
.badge.st-CANCELED,
.badge.st-EXPIRED { background: var(--bm-bg); 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 {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--bm-text-faint);
    padding-top: 46px;   /* 원·선과 글자 사이 여백 확보 */
}

.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);
}

.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;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.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 {
    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);
}

.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;
}

.action-panel 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);
    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;
}

.evidence-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bm-border);
}

.evidence-form-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.evidence-form-row input[type="text"] {
    flex: 1;
    min-width: 220px;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm);
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--bm-font);
}

.evidence-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--bm-text-faint);
}

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;
}

.inline-form {
    margin: 0;
    display: inline;
}

.review-upload {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bm-border);
}

.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) ===== */
.toolbar { display: flex; align-items: center; gap: 10px; }

.seg { display: inline-flex; border: 1px solid var(--bm-border-strong);
       border-radius: var(--bm-radius-sm); overflow: hidden; }
.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); }
.seg a.on { background: var(--bm-primary); color: #fff; font-weight: 600; }

.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); }

.holder { padding-top: 14px; }
.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); }

.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px;
       border-radius: 6px; margin-left: 2px; border: 1px solid transparent; }
.tag-admin   { background: var(--bm-warning-bg); color: var(--bm-warning); border-color: var(--bm-warning-bd); }
.tag-privacy { background: var(--bm-info-bg);    color: var(--bm-info);    border-color: var(--bm-info-bd); }
.tag-warn    { background: var(--bm-danger-bg);  color: var(--bm-danger);  border-color: var(--bm-danger-bd); }

.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 { padding: 12px 0; border-bottom: 1px solid var(--bm-border); }
.holder:last-child { border-bottom: none; }
.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; }

/* ===== 입퇴사 관리 ===== */
.badge.pe-JOINER { background: var(--bm-success-bg); color: var(--bm-success); border-color: var(--bm-success-bd); }
.badge.pe-MOVER  { background: var(--bm-warning-bg); color: var(--bm-warning); border-color: var(--bm-warning-bd); }
.badge.pe-LEAVER { background: var(--bm-danger-bg);  color: var(--bm-danger);  border-color: var(--bm-danger-bd); }

.badge.pci-PENDING { background: var(--bm-warning-bg); color: var(--bm-warning); border-color: var(--bm-warning-bd); }
.badge.pci-DONE    { background: var(--bm-success-bg); color: var(--bm-success); border-color: var(--bm-success-bd); }
.badge.pci-NA      { background: var(--bm-bg); color: var(--bm-text-sub); border-color: var(--bm-border-strong); }

.tag.tag-cat { background: var(--bm-blue-10); color: var(--bm-primary-hover); border-color: var(--bm-blue-20); }

.inline-actions { display: inline-flex; gap: 6px; }
.field-hint { font-size: 12px; color: var(--bm-text-faint); margin-top: 5px; }

/* ===== 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; }
.tag-adok      { background: var(--bm-success-bg); color: var(--bm-success); border-color: var(--bm-success-bd); }
.tag-adonly    { background: var(--bm-warning-bg); color: var(--bm-warning); border-color: var(--bm-warning-bd); font-weight: 700; }
.tag-portalonly{ background: var(--bm-danger-bg);  color: var(--bm-danger);  border-color: var(--bm-danger-bd); font-weight: 700; }

/* ===== 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; }
.tpl-preview { display: flex; flex-wrap: wrap; gap: 6px;
               padding: 12px; background: var(--bm-surface-sub);
               border: 1px solid var(--bm-border); border-radius: var(--bm-radius-sm); }

/* ===== 신청 폼 개인정보 안내 ===== */
.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: 18px 16px; margin-bottom: 10px; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm); background: var(--bm-surface); }
.holder:last-child { 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 { 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-collect .evidence-hint { color: #64748b; font-size: 12px; }
.review-upload-fallback { width: 100%; margin-top: 6px; }
.review-upload-fallback summary { cursor: pointer; color: #475569; font-size: 12px; }
.review-upload-fallback .review-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.src-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eef2f7; color: #475569; white-space: nowrap; }
.src-badge.ok { background: #dcfce7; color: #166534; }
.src-badge.warn { background: #fef3c7; color: #92400e; }

/* ── 게시판 준비중 배지 + 준비중 페이지 ── */
.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 { background: #b42318; }
.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-card.blue { border-left-color: #3c7ae5; } .sum-card.blue .sum-num { color: #3062b7; }
.sum-card.teal { border-left-color: #1d9e75; } .sum-card.teal .sum-num { color: #0f6e56; }
.sum-card.amber { border-left-color: #ba7517; } .sum-card.amber .sum-num { color: #854f0b; }
.sum-card.orange { border-left-color: #d85a30; } .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; }
.button.small { padding: 6px 12px; font-size: 12.5px; }

/* ── 명함 신청 ── */
.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 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 10px 12px; background: var(--bm-surface-sub); border: 1px solid var(--bm-border); border-radius: 8px; }
.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 { width: 100%; border-collapse: collapse; }
.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 { 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; }
.resource-list .rl-desc { color: #94a3b8; font-size: 12px; }

/* ===== 보안점검 모듈 (Batch C) ===== */
.summary-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; color: #475569; }
.inline-form { 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: #334155; }
.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대 그룹 + 토글(접기) ===== */
.menu-group { display: flex; flex-direction: column; }
.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 {
    width: 100%;
    background: none;
    border: none;
    border-top: 1px solid var(--bm-border);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.menu .menu-section.toggle:hover { color: var(--bm-primary); }
.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); }
.menu .menu-section.toggle .menu-lock { margin-left: 6px; }

/* ===== 신청 폼 안내 패널(절차 파이프라인·승인자 안내) ===== */
.guide-panel { margin-top: 18px; }
.guide-title { font-size: 15px; margin: 0 0 18px; }
.guide-flow { margin-bottom: 20px; }
.guide-flow .flow-step .fs-sub { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; color: var(--bm-text-faint); line-height: 1.4; }
.guide-flow .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 { width: 100%; border-collapse: collapse; font-size: 13px; }
.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 { 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 { /* 폭은 .content 통일 최대폭을 따름 */ }

/* 파이프라인 단계 라벨/담당자 이름 (신청 상세) */
.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 .muted { font-weight: 400; font-size: 12px; color: #94a3b8; }

/* 신청 상세 — 분류별 그룹 섹션 */
.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; max-width: 1860px; }  /* 본문(~1500) + 레일(300) 통일폭, 좌측 정렬 */
.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 { 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 { border-left-color: #16a34a; }
.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; }
.mi { display: none; width: 18px; text-align: center; margin-right: 9px; flex: 0 0 auto; font-size: 14px; line-height: 1; }
.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 .mi { display: inline-block; width: 22px; height: 22px; margin: 0; vertical-align: middle; }

.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; }

/* ===== 섹션 상단 가로 하위 탭 (보안점검 .seg와 동일 스타일) ===== */
.section-subtabs { margin: 0 0 18px; flex-wrap: wrap; gap: 6px; border: none; border-radius: 0; overflow: visible; }
.section-subtabs a { border: none !important; border-radius: 8px; background: #f1f5f9; color: var(--bm-text-sub); padding: 8px 16px; font-size: 13.5px; }
.section-subtabs a:hover { background: #e2e8f0; color: var(--bm-text); }
.section-subtabs a.on { background: var(--bm-primary); color: #fff; font-weight: 600; }

/* 큰 절(그룹) 헤더 아이콘 — 항목엔 아이콘 없이 텍스트만(풀 모드) */
.menu .menu-section::before { display: none; }
.sec-ico { display: inline-block; margin-right: 0; font-size: 14px; line-height: 1; }
.layout.sb-mini .sec-ico { display: none; }

/* ===== 단색 라인 아이콘(Lucide) 크기 ===== */
.mi { width: 18px; height: 18px; vertical-align: middle; }
.layout.sb-mini .mi { display: inline-block; width: 21px; height: 21px; }
.sec-ico { 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 { 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; }

/* 온보딩 버전 이력 관리 버튼 */
.ver-actions { display: flex; gap: 6px; align-items: center; }
.ver-actions form { display: inline; }

/* 재직증명서 신청 카드 + 파이프라인(상세 파이프라인과 동일 스타일) */
.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 .muted { 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; }
.org-mem { position:relative; margin-top:14px; min-width:112px; padding:7px 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 { 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: 280px !important; flex-basis: 280px !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); }
    .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; }

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

/* ============================================================
   Phase 1 — 슬랙식 클린 패스 (평평·헤어라인·여백)
   ============================================================ */

/* 패널: 그림자 대신 얇은 테두리 + 여백 ↑ */
.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 {
    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 { border-bottom: 1px solid var(--bm-border); padding: 12px; }
tbody tr:hover { background: var(--bm-mist); }
tbody tr:last-child td { border-bottom: none; }

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

/* 사이드바: 본문과 옅은 그레이로 분리 + 또렷한 active pill */
.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 { border-top: none; color: var(--bm-text-faint); font-size: 11.5px; letter-spacing: .3px; }

/* 세그먼트(탭) — 슬랙식 옅은 pill, 박스 테두리 약화 */
.seg { border-color: var(--bm-border); }
.seg a.on { background: var(--bm-blue-10); color: var(--bm-primary); }
.seg.list-filter, .section-subtabs { border: none; gap: 4px; }
.section-subtabs a, .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; }
.section-subtabs a.on, .seg.list-filter a.on { background: var(--bm-blue-10); color: var(--bm-primary); }

/* 토스트/상단바: 평평하게 */
.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 { min-width: 0; }

/* ============================================================
   모바일 — 상세 페이지(신청/명함/임직원) 정렬·포맷 통일
   ============================================================ */
@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 .muted { 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,
    .panel table .src-badge, table .src-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 { display:flex; flex-direction:column; gap:6px; }
.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-opt input[type="checkbox"] { 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-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; }
}


/* 다크 — 서브탭/세그먼트 옅은 칩 배경 보정(흰색 방지) */
[data-theme="dark"] .section-subtabs a { background: var(--bm-blue-10); color: var(--bm-text-sub); }
[data-theme="dark"] .section-subtabs a:hover { background: var(--bm-blue-20); color: var(--bm-text); }
[data-theme="dark"] .section-subtabs a.on,
[data-theme="dark"] .seg.list-filter a.on { background: var(--bm-primary); color: #fff; }


/* 다크 — src-badge(신규/변경 구분, 공지 카테고리 등) 흰색 방지 */
[data-theme="dark"] .src-badge { background: var(--bm-blue-10); color: var(--bm-text-sub); }
[data-theme="dark"] .src-badge.ok { background: #1f4530; color: #74e0a8; }
[data-theme="dark"] .src-badge.warn { background: #463615; color: #ecc56e; }


/* 다크 — 세션타이머 경고/위험 상태 */
[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; }

/* 로그인 입력 글자간격 정상화 (데모) */
.login-card input,
.login-card .form-field input { letter-spacing: normal; word-spacing: normal; }

/* 상단바 로그아웃 줄바꿈 방지 (데모 — 통합관제 등 빡빡한 화면) */
.logout-button { white-space: nowrap; }
.topbar .user-box { flex-shrink: 0; }

/* 상단바 "이력서로 돌아가기" 버튼 (데모) */
.back-resume { display:inline-flex; align-items:center; gap:4px; background:var(--bm-primary); color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.back-resume:hover { background:var(--bm-primary-hover); }