:root {
    --kosin-navy: #0f4b7d;
    --kosin-blue: #0d72b8;
    --kosin-sky: #1bb5d8;
    --kosin-light: #edf5fc;
    --kosin-soft: #f7fbff;
    --kosin-line: #d9e6f2;

    --ir-bg: #f4f7fb;
    --ir-card: #ffffff;
    --ir-text: #24364b;
    --ir-muted: #7b8998;
    --ir-border: #e2e9f1;

    --ir-success: #1f9d60;
    --ir-warning: #e6a100;
    --ir-danger: #dc4c5a;

    --sidebar-width: 268px;

    --radius-lg: 14px;
    --radius-md: 10px;

    --shadow-soft: 0 3px 14px rgba(22, 55, 90, 0.06);
    --shadow-card: 0 6px 20px rgba(22, 55, 90, 0.08);
}


/* ==================================================
   기본
================================================== */

html {
    font-size: 14px;
    min-height: 100%;
}

body.ir-body {
    margin: 0;
    min-height: 100vh;

    background:
        var(--ir-bg);

    color:
        var(--ir-text);

    font-family:
        "Segoe UI",
        "Noto Sans KR",
        "Malgun Gothic",
        Arial,
        sans-serif;
}


/* ==================================================
   좌측 사이드바
================================================== */

.ir-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1050;

    background: #f8fbff;
    border-right: 1px solid var(--kosin-line);
    box-shadow: 4px 0 18px rgba(15, 75, 125, 0.08);
    color: var(--ir-text);
    transition: transform 0.25s ease;
}


/* ==================================================
   KOSIN Insight 브랜드
================================================== */

.ir-brand {
    padding: 17px 16px 14px;

    background:
        linear-gradient(
            135deg,
            #0f4b7d 0%,
            #0d72b8 72%,
            #1596c4 100%
        );

    color: #ffffff;

    box-shadow:
        inset 0 -1px 0
        rgba(255,255,255,0.10);
}

.ir-brand-link {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;
}

.ir-brand-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.ir-logo-wrap {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.14);

    border:
        1px solid
        rgba(255,255,255,0.23);

    box-shadow:
        0 5px 14px
        rgba(0,0,0,0.10);
}

.ir-logo {
    width: 46px;
    height: 46px;

    object-fit: contain;

    border-radius: 50%;

    background: #ffffff;

    padding: 2px;

    border:
        2px solid
        rgba(255,255,255,0.94);
}

.ir-brand-text {
    min-width: 0;
}

.ir-brand-name {
    line-height: 1;

    font-size: 21px;

    font-weight: 800;

    letter-spacing:
        -0.6px;

    color: #ffffff;
}

.ir-brand-name span {
    font-weight: 600;

    color:
        #d8f3ff;
}

.ir-brand-name-ko {
    margin-top: 6px;

    font-size: 12px;

    font-weight: 600;

    color:
        rgba(255,255,255,0.91);
}

.ir-brand-name-en {
    margin-top: 1px;

    font-size: 8px;

    font-weight: 600;

    letter-spacing:
        1.1px;

    color:
        rgba(255,255,255,0.58);
}

.ir-brand-system {
    margin-top: 12px;

    padding-top: 9px;

    border-top:
        1px solid
        rgba(255,255,255,0.16);

    font-size: 9px;

    font-weight: 500;

    letter-spacing:
        0.15px;

    color:
        rgba(255,255,255,0.65);
}


/* ==================================================
   사이드바 메뉴
================================================== */

.ir-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px 20px;
    background: #f8fbff;
}

.ir-nav-group {
    margin: 14px 10px 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #8fa3b7;
    text-transform: uppercase;
}

.ir-nav-item {
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 6px 12px;
    margin: 2px 0;

    border-radius: 10px;
    border: 1px solid transparent;

    color: #45617d;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;

    transition: all 0.18s ease;
}

.ir-nav-item:hover {
    color: var(--kosin-navy);
    background: var(--kosin-light);
    border-color: #dbe8f4;
    transform: translateX(2px);
    text-decoration: none;
}

.ir-nav-item.active {
    color: var(--kosin-navy);
    font-weight: 700;
    background: linear-gradient(90deg, #e7f2fb 0%, #f6fbff 100%);
    border: 1px solid #cfe2f3;
    box-shadow: 0 4px 12px rgba(15, 75, 125, 0.06);
}

.ir-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #0f4b7d 0%, #1bb5d8 100%);
}

.ir-nav-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;
    background: #eef5fb;
    color: var(--kosin-navy);
    font-size: 13px;
    flex-shrink: 0;
}

.ir-nav-item:hover .ir-nav-icon {
    background: #e1eef9;
    color: var(--kosin-blue);
}

.ir-nav-item.active .ir-nav-icon {
    background: #dcecf9;
    color: var(--kosin-blue);
}


/* ==================================================
   사이드바 하단
================================================== */

.ir-sidebar-bottom {
    padding: 18px 18px 22px;
    border-top: 1px solid var(--kosin-line);
    background: #f8fbff;
    font-size: 11px;
    color: #7f90a2;
}

.ir-sidebar-university {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--kosin-navy);
}


/* ==================================================
   앱 전체 영역
================================================== */

.ir-app {
    margin-left:
        var(--sidebar-width);

    min-height: 100vh;

    display: flex;

    flex-direction: column;
}


/* ==================================================
   상단 헤더
================================================== */

.ir-topbar {
    min-height: 72px;

    position: sticky;
    top: 0;

    z-index: 1020;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 26px;

    background:
        rgba(255,255,255,0.97);

    border-bottom:
        1px solid #e4ebf2;

    box-shadow:
        0 3px 14px
        rgba(30, 66, 101, 0.035);

    backdrop-filter:
        blur(10px);
}


/* ==================================================
   상단 왼쪽 : 페이지 제목
================================================== */

.ir-topbar-left {
    display: flex;

    align-items: center;

    gap: 13px;
}

.ir-page-title {
    font-size: 20px;

    line-height: 1.25;

    font-weight: 750;

    letter-spacing:
        -0.45px;

    color:
        #183f60;
}

.ir-page-subtitle {
    margin-top: 4px;

    font-size: 11px;

    font-weight: 400;

    color:
        #8998a7;
}


/* ==================================================
   상단 오른쪽 정렬
================================================== */

.ir-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* 시스템 상태 */

.ir-system-health {
    height: 40px;
    min-height: 40px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 7px;

    padding:
        0 13px;

    border:
        1px solid #dcebe3;

    border-radius:
        10px;

    background:
        #f5fbf7;

    font-size: 11px;
    font-weight: 600;

    color:
        #54806a;

    white-space: nowrap;
}


/* 사용자 정보 */

.ir-user {
    height: 40px;
    min-height: 40px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        4px 11px 4px 5px;

    border:
        1px solid #dfe8f1;

    border-radius:
        10px;

    background:
        #f8fbfe;
}

.ir-user-circle {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            #0f4b7d,
            #1687bd
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    box-shadow:
        0 2px 6px
        rgba(15,75,125,0.15);
}

.ir-user-text {
    min-width: 72px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ir-user-name {
    font-size: 11px;
    line-height: 1.15;

    font-weight: 700;

    color:
        #314b63;

    white-space: nowrap;
}

.ir-user-role {
    margin-top: 2px;

    font-size: 8px;
    line-height: 1.1;

    color:
        #94a1ae;

    white-space: nowrap;
}


/* 로그아웃 */

.ir-topbar-right .btn-outline-secondary {
    height: 40px;
    min-height: 40px;

    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 13px;

    border:
        1px solid #dfe7ef;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #6d7d8c;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    box-shadow: none;
}

.ir-topbar-right .btn-outline-secondary:hover {
    border-color:
        #cbdbe8;

    background:
        #f2f7fb;

    color:
        var(--kosin-navy);
}


/* 모바일 메뉴 버튼 */

.ir-menu-button {
    display: none;

    width: 38px;
    height: 38px;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--ir-border);

    border-radius: 8px;

    background: white;

    color:
        var(--kosin-navy);

    font-size: 18px;
}


/* ==================================================
   메인 콘텐츠
================================================== */

.ir-content {
    flex: 1;

    padding:
        26px 28px 34px;
}

.ir-content-inner {
    width: 100%;

    max-width: 1600px;

    margin: 0 auto;
}


/* ==================================================
   Bootstrap 카드 디자인
================================================== */

.card {
    border:
        1px solid
        var(--ir-border);

    border-radius:
        var(--radius-lg);

    background:
        var(--ir-card);

    box-shadow:
        var(--shadow-soft);

    overflow: hidden;
}

.card.shadow-sm {
    box-shadow:
        var(--shadow-soft) !important;
}

.card:hover {
    box-shadow:
        var(--shadow-card);
}

.card-header {
    padding:
        16px 18px;

    background: white;

    border-bottom:
        1px solid
        var(--ir-border);

    border-radius:
        var(--radius-lg)
        var(--radius-lg)
        0
        0 !important;
}

.card-body {
    padding:
        18px;
}


/* ==================================================
   제목
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--kosin-navy);
}

h2 {
    letter-spacing:
        -0.7px;
}

.text-muted {
    color:
        var(--ir-muted) !important;
}


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

.btn {
    padding:
        7px 14px;

    border-radius: 8px;

    font-weight: 500;

    box-shadow: none !important;
}

.btn-primary {
    background:
        var(--kosin-blue);

    border-color:
        var(--kosin-blue);
}

.btn-primary:hover {
    background:
        var(--kosin-navy);

    border-color:
        var(--kosin-navy);
}

.btn-secondary {
    background:
        #657a91;

    border-color:
        #657a91;
}

.btn-outline-primary {
    color:
        var(--kosin-blue);

    border-color:
        #a9c9e2;
}

.btn-outline-primary:hover {
    background:
        var(--kosin-blue);

    border-color:
        var(--kosin-blue);
}


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

.form-control,
.form-select {
    min-height: 39px;

    border:
        1px solid
        #d6e0e9;

    border-radius: 8px;

    background: white;

    color:
        var(--ir-text);
}

.form-control:focus,
.form-select:focus {
    border-color:
        #75acd7;

    box-shadow:
        0 0 0 0.2rem
        rgba(13,114,184,0.12);
}


/* ==================================================
   표
================================================== */

.table {
    margin-bottom: 0;

    color:
        var(--ir-text);
}

.table thead th {
    padding:
        12px 14px;

    background:
        #f5f8fb;

    border-bottom:
        1px solid
        var(--ir-border);

    color:
        #516479;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}

.table tbody td {
    padding:
        13px 14px;

    border-color:
        #edf1f5;

    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background:
        #f8fbfd;
}


/* ==================================================
   배지
================================================== */

.badge {
    padding:
        5px 8px;

    border-radius: 6px;

    font-weight: 500;
}


/* ==================================================
   진행바
================================================== */

.progress {
    overflow: hidden;

    background:
        #edf1f5;

    border-radius: 8px;
}


/* ==================================================
   Dashboard 보정
================================================== */

.ir-content .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.ir-content .fs-2 {
    color:
        var(--kosin-navy);

    letter-spacing:
        -0.5px;
}


/* ==================================================
   Footer
================================================== */

.ir-footer {
    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 28px;

    border-top:
        1px solid
        var(--ir-border);

    background: white;

    color:
        var(--ir-muted);

    font-size: 10px;
}


/* ==================================================
   반응형
================================================== */

@media (max-width: 991px) {

    .ir-sidebar {
        transform:
            translateX(-100%);
    }

    .ir-sidebar.mobile-open {
        transform:
            translateX(0);
    }

    .ir-app {
        margin-left: 0;
    }

    .ir-menu-button {
        display: inline-flex;
    }

    .ir-content {
        padding:
            20px;
    }

}


@media (max-width: 650px) {

    .ir-system-health,
    .ir-user-text,
    .ir-page-subtitle {
        display: none;
    }

    .ir-topbar {
        min-height: 66px;

        padding:
            0 16px;
    }

    .ir-content {
        padding:
            14px;
    }

    .ir-footer {
        flex-direction: column;

        justify-content: center;

        gap: 3px;

        padding:
            10px;
    }

}

/* ==================================================
   Dashboard - Executive UI
================================================== */

.dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    padding: 24px 26px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f8fc 100%
        );

    border:
        1px solid
        var(--ir-border);

    border-radius: 15px;

    box-shadow:
        var(--shadow-soft);
}


.dashboard-welcome-text {
    min-width: 300px;
}


.dashboard-eyebrow {
    margin-bottom: 6px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color:
        var(--kosin-blue);
}


.dashboard-title {
    margin: 0;

    font-size: 25px;

    font-weight: 750;

    letter-spacing: -0.8px;

    color:
        var(--kosin-navy);
}


.dashboard-description {
    margin:
        7px 0 0;

    font-size: 12px;

    line-height: 1.6;

    color:
        var(--ir-muted);
}


/* ==================================================
   Dashboard Filter
================================================== */

.dashboard-filter {
    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    gap: 10px;

    flex-wrap: wrap;
}


.dashboard-filter-item {
    min-width: 125px;
}


.dashboard-filter-framework {
    min-width: 230px;
}


.dashboard-filter-item label {
    display: block;

    margin:
        0 0 5px 2px;

    font-size: 10px;

    font-weight: 600;

    color:
        var(--ir-muted);
}


.dashboard-filter-actions {
    display: flex;

    gap: 7px;
}


.dashboard-filter-actions .btn {
    min-height: 39px;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}


/* ==================================================
   Dashboard Metric Cards
================================================== */

.dashboard-metric {
    position: relative;

    min-height: 132px;

    padding:
        18px 18px 15px;

    border:
        1px solid
        var(--ir-border);

    border-radius: 13px;

    background: white;

    box-shadow:
        var(--shadow-soft);

    overflow: hidden;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.dashboard-metric:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-card);
}


.dashboard-metric::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--metric-color);
}


.metric-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;
}


.metric-label {
    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 600;

    color:
        var(--ir-muted);
}


.metric-value {
    font-size: 31px;

    font-weight: 750;

    line-height: 1;

    letter-spacing: -1px;

    color:
        var(--ir-text);
}


.metric-value-rate span {
    margin-left: 2px;

    font-size: 15px;

    font-weight: 600;

    color:
        var(--ir-muted);
}


.metric-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background:
        var(--metric-bg);

    color:
        var(--metric-color);

    font-size: 17px;

    font-weight: 750;
}


.metric-foot {
    position: absolute;

    left: 18px;
    bottom: 14px;

    font-size: 10px;

    color:
        #9aa6b2;
}


/* 전체 */

.metric-total {
    --metric-color:
        #176fb0;

    --metric-bg:
        #edf6fc;
}


/* 정상 */

.metric-success {
    --metric-color:
        #1d9a5b;

    --metric-bg:
        #eaf7f0;
}


/* 주의 */

.metric-warning {
    --metric-color:
        #dd9700;

    --metric-bg:
        #fff7df;
}


/* 위험 */

.metric-danger {
    --metric-color:
        #dc4c5a;

    --metric-bg:
        #fdecef;
}


/* 승인 */

.metric-approved {
    --metric-color:
        #6558c4;

    --metric-bg:
        #f0eefb;
}


/* 달성률 */

.metric-rate {
    --metric-color:
        #1597a8;

    --metric-bg:
        #eaf8fa;
}


/* ==================================================
   Dashboard Responsive
================================================== */

@media (max-width: 1200px) {

    .dashboard-welcome {
        align-items: stretch;

        flex-direction: column;
    }

    .dashboard-filter {
        justify-content: flex-start;
    }

}


@media (max-width: 650px) {

    .dashboard-welcome {
        padding:
            19px;
    }

    .dashboard-filter {
        display: grid;

        grid-template-columns:
            1fr;
    }

    .dashboard-filter-item,
    .dashboard-filter-framework {
        width: 100%;

        min-width: 0;
    }

    .dashboard-filter-actions {
        width: 100%;
    }

    .dashboard-filter-actions .btn {
        flex: 1;
    }

}

/* ==================================================
   Dashboard - Executive UI
================================================== */

.dashboard-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    padding: 24px 26px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f8fc 100%
        );

    border: 1px solid var(--ir-border);
    border-radius: 15px;

    box-shadow: var(--shadow-soft);
}

.dashboard-welcome-text {
    min-width: 300px;
}

.dashboard-eyebrow {
    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;

    color: var(--kosin-blue);
}

.dashboard-title {
    margin: 0;

    font-size: 25px;
    font-weight: 750;
    letter-spacing: -0.8px;

    color: var(--kosin-navy);
}

.dashboard-description {
    margin: 7px 0 0;

    font-size: 12px;
    line-height: 1.6;

    color: var(--ir-muted);
}


/* 필터 */

.dashboard-filter {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-filter-item {
    min-width: 125px;
}

.dashboard-filter-framework {
    min-width: 230px;
}

.dashboard-filter-item label {
    display: block;

    margin: 0 0 5px 2px;

    font-size: 10px;
    font-weight: 600;

    color: var(--ir-muted);
}

.dashboard-filter-actions {
    display: flex;
    gap: 7px;
}

.dashboard-filter-actions .btn {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* 요약 카드 */

.dashboard-metric {
    position: relative;

    min-height: 132px;

    padding: 18px 18px 15px;

    border: 1px solid var(--ir-border);
    border-radius: 13px;

    background: white;

    box-shadow: var(--shadow-soft);

    overflow: hidden;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.dashboard-metric:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow-card);
}

.dashboard-metric::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--metric-color);
}

.metric-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.metric-label {
    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 600;

    color: var(--ir-muted);
}

.metric-value {
    font-size: 31px;
    font-weight: 750;

    line-height: 1;
    letter-spacing: -1px;

    color: var(--ir-text);
}

.metric-value-rate span {
    margin-left: 2px;

    font-size: 15px;
    font-weight: 600;

    color: var(--ir-muted);
}

.metric-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    background: var(--metric-bg);
    color: var(--metric-color);

    font-size: 17px;
    font-weight: 750;
}

.metric-foot {
    position: absolute;

    left: 18px;
    bottom: 14px;

    font-size: 10px;

    color: #9aa6b2;
}


/* 카드별 상태색 */

.metric-total {
    --metric-color: #176fb0;
    --metric-bg: #edf6fc;
}

.metric-success {
    --metric-color: #1d9a5b;
    --metric-bg: #eaf7f0;
}

.metric-warning {
    --metric-color: #dd9700;
    --metric-bg: #fff7df;
}

.metric-danger {
    --metric-color: #dc4c5a;
    --metric-bg: #fdecef;
}

.metric-approved {
    --metric-color: #6558c4;
    --metric-bg: #f0eefb;
}

.metric-rate {
    --metric-color: #1597a8;
    --metric-bg: #eaf8fa;
}


/* 반응형 */

@media (max-width: 1200px) {

    .dashboard-welcome {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-filter {
        justify-content: flex-start;
    }
}

@media (max-width: 650px) {

    .dashboard-welcome {
        padding: 19px;
    }

    .dashboard-filter {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dashboard-filter-item,
    .dashboard-filter-framework {
        width: 100%;
        min-width: 0;
    }

    .dashboard-filter-actions {
        width: 100%;
    }

    .dashboard-filter-actions .btn {
        flex: 1;
    }
}

/* ==================================================
   Executive KPI Cards
================================================== */

.kpi-executive-section {
    padding: 23px;

    background: white;

    border: 1px solid var(--ir-border);

    border-radius: 15px;

    box-shadow: var(--shadow-soft);
}


/* Header */

.kpi-section-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.kpi-section-title {
    margin: 0;

    font-size: 19px;

    font-weight: 750;

    letter-spacing: -0.5px;
}

.kpi-section-description {
    margin-top: 5px;

    font-size: 11px;

    color: var(--ir-muted);
}

.kpi-section-year {
    padding: 6px 11px;

    border: 1px solid #dbe5ef;

    border-radius: 7px;

    background: #f7fafd;

    color: #62758a;

    font-size: 11px;

    white-space: nowrap;
}


/* KPI Card */

.kpi-exec-card {
    position: relative;

    height: 100%;

    min-height: 275px;

    padding: 18px;

    background: white;

    border: 1px solid #e3eaf1;

    border-radius: 13px;

    box-shadow:
        0 2px 10px
        rgba(28, 58, 91, 0.045);

    overflow: hidden;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.kpi-exec-card:hover {
    transform: translateY(-3px);

    border-color: #cbd9e6;

    box-shadow:
        0 9px 24px
        rgba(28, 58, 91, 0.10);
}


/* 상단 상태 라인 */

.kpi-exec-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--kpi-color);
}


/* 상태별 컬러 */

.kpi-exec-card.status-normal {
    --kpi-color: #1f9d60;
    --kpi-soft: #eaf7f0;
}

.kpi-exec-card.status-caution {
    --kpi-color: #e6a100;
    --kpi-soft: #fff7df;
}

.kpi-exec-card.status-danger {
    --kpi-color: #dc4c5a;
    --kpi-soft: #fdecef;
}

.kpi-exec-card.status-unset {
    --kpi-color: #8997a7;
    --kpi-soft: #f0f3f6;
}


/* 카드 위쪽 */

.kpi-card-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 13px;
}

.kpi-code {
    display: inline-flex;

    align-items: center;

    min-height: 26px;

    padding: 4px 8px;

    border-radius: 6px;

    background: #edf5fc;

    color: var(--kosin-blue);

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 0.3px;
}

.kpi-status {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 10px;

    font-weight: 600;

    color: var(--kpi-color);
}

.kpi-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--kpi-color);
}


/* KPI 명 */

.kpi-card-name {
    min-height: 45px;

    margin-bottom: 16px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.45;

    color: var(--kosin-navy);
}


/* 목표/실적 */

.kpi-value-grid {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    margin-bottom: 18px;

    padding: 12px 5px;

    background: #f8fafc;

    border-radius: 9px;
}

.kpi-value-item {
    padding: 0 9px;

    text-align: center;
}

.kpi-value-label {
    margin-bottom: 4px;

    font-size: 9px;

    color: var(--ir-muted);
}

.kpi-value-number {
    font-size: 16px;

    font-weight: 750;

    color: var(--ir-text);
}

.kpi-value-unit {
    margin-left: 2px;

    font-size: 9px;

    font-weight: 500;

    color: var(--ir-muted);
}

.kpi-value-divider {
    width: 1px;
    height: 34px;

    background: #dfe7ef;
}


/* 달성률 */

.kpi-achievement {
    margin-bottom: 18px;
}

.kpi-achievement-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 7px;

    font-size: 10px;

    color: var(--ir-muted);
}

.kpi-achievement-head strong {
    font-size: 12px;

    color: var(--kpi-color);
}

.kpi-progress {
    height: 6px;

    overflow: hidden;

    background: #edf1f4;

    border-radius: 5px;
}

.kpi-progress-bar {
    height: 100%;

    border-radius: 5px;

    background: var(--kpi-color);

    transition:
        width 0.3s ease;
}


/* 카드 Footer */

.kpi-card-footer {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 12px;

    border-top: 1px solid #edf1f4;
}

.kpi-workflow {
    font-size: 9px;

    color: var(--ir-muted);
}

.kpi-detail-link {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: var(--kosin-blue);

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;
}

.kpi-detail-link:hover {
    color: var(--kosin-navy);
}

.kpi-detail-link span {
    font-size: 16px;

    line-height: 1;
}

.kpi-detail-disabled {
    font-size: 10px;

    color: #adb6c0;
}


/* 반응형 */

@media (max-width: 650px) {

    .kpi-executive-section {
        padding: 17px;
    }

    .kpi-section-header {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* ==================================================
   Dashboard Analysis Panel
================================================== */

.analysis-card {
    background: #ffffff;

    border: 1px solid var(--ir-border);

    border-radius: 15px;

    box-shadow: var(--shadow-soft);

    overflow: hidden;
}


.analysis-card-header {
    min-height: 88px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    padding: 19px 21px 15px;

    border-bottom: 1px solid #edf1f5;
}


.analysis-card-title {
    margin: 0;

    font-size: 17px;

    font-weight: 750;

    letter-spacing: -0.4px;
}


.analysis-card-description {
    margin-top: 5px;

    font-size: 10px;

    color: var(--ir-muted);
}


.analysis-year-badge {
    padding: 5px 9px;

    border: 1px solid #dce6ef;

    border-radius: 7px;

    background: #f7fafc;

    color: #68798b;

    font-size: 10px;

    white-space: nowrap;
}


.analysis-card-body {
    padding: 18px 20px;
}


/* 성과상태 */

.status-analysis-layout {
    min-height: 280px;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 150px;

    align-items: center;

    gap: 18px;
}


.status-chart-area {
    height: 260px;

    position: relative;
}


.status-summary {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.status-summary-item {
    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 11px;

    border: 1px solid #edf1f4;

    border-radius: 9px;

    background: #fafbfd;
}


.status-summary-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--status-color);
}


.status-summary-label {
    font-size: 9px;

    color: var(--ir-muted);
}


.status-summary-value {
    margin-top: 1px;

    font-size: 17px;

    font-weight: 750;

    color: var(--ir-text);
}


.status-summary-normal {
    --status-color: #1f9d60;
}

.status-summary-caution {
    --status-color: #e6a100;
}

.status-summary-danger {
    --status-color: #dc4c5a;
}

.status-summary-unset {
    --status-color: #8997a7;
}


/* 승인현황 */

.approval-panel {
    min-height: 316px;

    padding: 34px 24px 22px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.approval-rate-label {
    margin-bottom: 7px;

    text-align: center;

    font-size: 10px;

    color: var(--ir-muted);
}


.approval-rate-value {
    text-align: center;

    font-size: 43px;

    line-height: 1;

    font-weight: 780;

    letter-spacing: -1.5px;

    color: var(--kosin-navy);
}


.approval-rate-value span {
    margin-left: 2px;

    font-size: 17px;

    color: var(--ir-muted);
}


.approval-progress {
    height: 8px;

    margin: 24px 0 25px;

    overflow: hidden;

    border-radius: 10px;

    background: #edf1f5;
}


.approval-progress-bar {
    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--kosin-blue),
            var(--kosin-sky)
        );
}


.approval-counts {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    text-align: center;
}


.approval-count-label {
    margin-bottom: 5px;

    font-size: 9px;

    color: var(--ir-muted);
}


.approval-count-item strong {
    font-size: 18px;

    color: var(--ir-text);
}


.approval-count-divider {
    width: 1px;
    height: 34px;

    background: #e2e8ee;
}


@media (max-width: 650px) {

    .status-analysis-layout {
        grid-template-columns: 1fr;
    }

    .status-summary {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }

}

/* ==================================================
   Core KPI Card - Compact v2
   제목과 목표/실적 사이 공간 중심으로 축소
================================================== */

.kpi-exec-card {
    padding: 14px 15px 13px;
}

/* KPI 코드 + 상태 */
.kpi-exec-top {
    margin-bottom: 7px;
}

.kpi-exec-code,
.kpi-exec-status {
    font-size: 10px;
}

/* KPI 제목 영역의 불필요한 높이 축소 */
.kpi-exec-name {
    min-height: 28px;
    margin-top: 0;
    margin-bottom: 5px;

    font-size: 14px;
    line-height: 1.3;
}

/* 제목과 목표/실적 사이 간격 축소 */
.kpi-value-grid {
    margin-top: 0;
    margin-bottom: 10px;
}

.kpi-value-item {
    padding: 9px 7px;
}

.kpi-value-label {
    margin-bottom: 3px;
    font-size: 9px;
}

.kpi-value-number {
    font-size: 16px;
    line-height: 1.25;
}

/* 달성률 영역은 너무 압축하지 않음 */
.kpi-achievement {
    margin-top: 8px;
    margin-bottom: 5px;
}

.kpi-achievement-label {
    font-size: 9px;
}

.kpi-achievement-value {
    font-size: 13px;
}

/* 진행바 */
.kpi-progress {
    height: 5px;
    margin-bottom: 8px;
}

/* 하단 상태·상세보기는 겹치지 않게 공간 확보 */
.kpi-exec-footer {
    margin-top: 6px;
    padding-top: 7px;
    min-height: 24px;
}

.kpi-workflow-status,
.kpi-detail-link,
.kpi-detail-disabled {
    font-size: 10px;
    line-height: 1.3;
}

/* ==================================================
   Core KPI Card - Tighter Header Spacing
================================================== */

/* KPI 코드/상태와 제목 사이 */
.kpi-exec-top {
    margin-bottom: 4px;
}

/* KPI 제목 영역을 더 압축 */
.kpi-exec-name {
    min-height: 20px;
    margin-top: 0;
    margin-bottom: 0;

    line-height: 1.25;
}

/* 제목과 목표/실적 박스를 더 가깝게 */
.kpi-value-grid {
    margin-top: 2px;
    margin-bottom: 9px;
}

/* 카드 위쪽 여백도 소폭 축소 */
.kpi-exec-card {
    padding-top: 12px;
}

/* ==================================================
   Core KPI Card - Footer overlap fix
   상단은 컴팩트하게 유지하고 하단만 여백 확보
================================================== */

/* 달성률 숫자와 진행바 사이 */
.kpi-achievement {
    margin-top: 7px;
    margin-bottom: 4px;
}

/* 진행바 아래에 확실한 공간 확보 */
.kpi-progress {
    height: 5px;
    margin-bottom: 11px;
}

/* 처리상태 / 상세보기 영역 */
.kpi-exec-footer {
    position: static !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 22px;

    margin-top: 0 !important;
    padding-top: 2px;

    line-height: 1.2;
}

/* 하단 글자가 진행바로 올라가지 않도록 */
.kpi-workflow-status,
.kpi-detail-link,
.kpi-detail-disabled {
    position: static !important;

    line-height: 1.25;
    white-space: nowrap;
}

/* 카드 아래쪽에 약간의 안전 공간 */
.kpi-exec-card {
    padding-bottom: 14px;
}

/* ==================================================
   Core KPI Card - Actual Footer Fix
   실제 HTML 클래스 기준
================================================== */

/* 진행바 */
.kpi-progress {
    height: 5px;
    margin-bottom: 0;
}

/* 실제 카드 하단 영역 */
.kpi-card-footer {
    position: static !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 10px !important;
    padding-top: 0 !important;

    min-height: 20px;
}

/* 실제 처리상태 */
.kpi-workflow {
    position: static !important;

    font-size: 10px;
    line-height: 1.25;

    white-space: nowrap;
}

/* 상세보기 */
.kpi-detail-link,
.kpi-detail-disabled {
    position: static !important;

    font-size: 10px;
    line-height: 1.25;

    white-space: nowrap;
}

/* =========================================================
   DASHBOARD ANALYSIS LAYOUT FIX
   2026-09-22
========================================================= */

.dashboard-analysis-row {
    width: 100%;
}

.dashboard-analysis-row > [class*="col-"] {
    min-width: 0;
}

.dashboard-analysis-row .analysis-card {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* ---------- 공통 제목 영역 ---------- */

.dashboard-analysis-row .analysis-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    flex: 0 0 auto !important;

    min-height: 88px !important;

    padding: 18px 20px 13px !important;

    position: relative !important;
    z-index: 10 !important;

    background: #ffffff !important;

    overflow: visible !important;
}


.dashboard-analysis-row .dashboard-eyebrow {
    display: block !important;
}


.dashboard-analysis-row .analysis-card-title {
    display: block !important;

    margin: 3px 0 0 !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    line-height: 1.35 !important;

    color: var(--ir-text) !important;
}


.dashboard-analysis-row .analysis-card-description {
    display: block !important;

    margin-top: 5px !important;

    font-size: 12px !important;

    line-height: 1.4 !important;

    color: var(--ir-muted) !important;
}


.dashboard-analysis-row .analysis-card-body {
    flex: 1 1 auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 14px 20px 18px !important;

    position: relative !important;

    overflow: hidden !important;
}


/* =========================================================
   상단
   막대그래프 / 5년 추이
========================================================= */

.dashboard-analysis-row-top .analysis-card {
    height: 510px !important;
}


/* 막대그래프 */

.dashboard-bar-chart {
    position: relative !important;

    width: 100% !important;
    height: 385px !important;

    min-width: 0 !important;
}


.dashboard-bar-chart canvas {
    max-width: 100% !important;
}


/* 최근 5년 추이 */

.trend-selected-kpi {
    min-height: 24px !important;

    margin-bottom: 8px !important;

    line-height: 1.4 !important;
}


.dashboard-trend-chart {
    position: relative !important;

    width: 100% !important;
    height: 285px !important;

    min-width: 0 !important;
}


.dashboard-trend-chart canvas {
    max-width: 100% !important;
}


/* =========================================================
   하단
   도넛그래프 / IR 승인현황
========================================================= */

.dashboard-analysis-row-status .analysis-card {
    height: 390px !important;
}


.dashboard-analysis-row-status .analysis-card-body {
    padding-top: 8px !important;
}


.status-analysis-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        145px !important;

    gap: 18px !important;

    align-items: center !important;

    width: 100% !important;
    height: 270px !important;

    min-height: 0 !important;
}


.status-chart-area {
    position: relative !important;

    width: 100% !important;
    height: 245px !important;

    min-height: 0 !important;
}


.status-chart-area canvas {
    max-width: 100% !important;
    max-height: 245px !important;
}


/* 승인현황 */

.dashboard-analysis-row-status .approval-panel {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding: 18px 22px 22px !important;
}


/* =========================================================
   반응형
========================================================= */

@media (max-width: 1199px) {

    .dashboard-analysis-row-top .analysis-card,
    .dashboard-analysis-row-status .analysis-card {
        height: auto !important;
        min-height: 390px !important;
    }

    .dashboard-bar-chart {
        height: 380px !important;
    }

    .dashboard-trend-chart {
        height: 300px !important;
    }

}


@media (max-width: 767px) {

    .status-analysis-layout {
        grid-template-columns: 1fr !important;

        height: auto !important;
    }

    .status-chart-area {
        height: 250px !important;
    }

}

/* =========================================================
   DASHBOARD FINAL CLEAN LAYOUT
========================================================= */

body .final-analysis-row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body .final-analysis-row > [class*="col-"] {
    min-width: 0 !important;
}

body .final-analysis-card {
    width: 100% !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    background: #fff !important;
}


/* 제목 영역 */
body .final-analysis-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    flex: 0 0 auto !important;

    min-height: 82px !important;

    padding: 17px 20px 12px !important;

    position: relative !important;
    z-index: 10 !important;

    overflow: visible !important;

    background: #fff !important;
}


body .final-analysis-header > div {
    display: block !important;
    visibility: visible !important;

    opacity: 1 !important;

    min-width: 0 !important;
}


body .final-analysis-header .dashboard-eyebrow {
    display: block !important;
    visibility: visible !important;

    margin-bottom: 2px !important;
}


body .final-analysis-header .analysis-card-title {
    display: block !important;
    visibility: visible !important;

    margin: 0 !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    line-height: 1.35 !important;

    color: #0f4b7d !important;
}


body .final-analysis-header .analysis-card-description {
    display: block !important;
    visibility: visible !important;

    margin-top: 4px !important;

    font-size: 12px !important;
    line-height: 1.4 !important;

    color: #7b8998 !important;
}


body .final-analysis-body {
    flex: 1 1 auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 12px 18px 16px !important;

    overflow: hidden !important;
}


/* =========================================================
   첫째 줄 : 막대 / 추이
========================================================= */

body .final-analysis-top .final-analysis-card {
    height: 430px !important;
}


/* 막대 */
body .final-bar-chart {
    width: 100% !important;
    height: 315px !important;

    position: relative !important;
}


body .final-bar-chart canvas {
    width: 100% !important;
    max-width: 100% !important;

    height: 315px !important;
    max-height: 315px !important;
}


/* 추이 */
body .final-selected-kpi {
    height: 24px !important;

    margin: 6px 0 5px !important;

    overflow: hidden !important;

    white-space: nowrap !important;
}


body .final-trend-chart {
    position: relative !important;

    width: 100% !important;
    height: 235px !important;
}


body .final-trend-chart canvas {
    width: 100% !important;
    max-width: 100% !important;

    height: 235px !important;
    max-height: 235px !important;
}


/* =========================================================
   둘째 줄 : 도넛 / 승인
========================================================= */

body .final-analysis-status .final-analysis-card {
    height: 350px !important;
}


body .final-status-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        135px !important;

    align-items: center !important;

    gap: 18px !important;

    height: 235px !important;
}


body .final-doughnut-chart {
    position: relative !important;

    width: 100% !important;
    height: 215px !important;

    min-height: 215px !important;
}


body .final-doughnut-chart canvas {
    max-width: 100% !important;

    height: 215px !important;
    max-height: 215px !important;
}


/* 승인현황 */
body .final-approval-panel {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    padding: 18px 22px 22px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}


/* =========================================================
   KPI 12개와 분석영역 사이 간격
========================================================= */

body .kpi-executive-section {
    clear: both !important;

    width: 100% !important;

    margin-top: 0 !important;
}


/* =========================================================
   반응형
========================================================= */

@media (max-width: 1199px) {

    body .final-analysis-top .final-analysis-card {
        height: 430px !important;
    }

    body .final-analysis-status .final-analysis-card {
        height: 350px !important;
    }

}


@media (max-width: 767px) {

    body .final-analysis-top .final-analysis-card,
    body .final-analysis-status .final-analysis-card {
        height: auto !important;
        min-height: 350px !important;
    }

    body .final-status-layout {
        grid-template-columns: 1fr !important;

        height: auto !important;
    }

    body .final-doughnut-chart {
        height: 230px !important;
    }

}

/* =========================================================
   DASHBOARD COMPACT LAYOUT
   세로 스크롤 최소화
========================================================= */


/* ---------------------------------------------------------
   전체 영역 간격
--------------------------------------------------------- */

.dashboard-compact {
    padding-bottom: 12px !important;
}

.dashboard-compact .mb-4 {
    margin-bottom: 12px !important;
}

.dashboard-compact .g-3 {
    --bs-gutter-y: 10px;
}


/* ---------------------------------------------------------
   상단 Welcome / 조회조건
--------------------------------------------------------- */

.dashboard-compact .dashboard-welcome {
    padding: 15px 18px !important;
    margin-bottom: 12px !important;
}

.dashboard-compact .dashboard-title {
    margin-bottom: 3px !important;
    font-size: 23px !important;
    line-height: 1.25 !important;
}

.dashboard-compact .dashboard-description {
    margin-bottom: 0 !important;
    line-height: 1.35 !important;
}

.dashboard-compact .dashboard-eyebrow {
    margin-bottom: 2px !important;
}

.dashboard-compact .dashboard-filter {
    gap: 8px !important;
}

.dashboard-compact .dashboard-filter-item label {
    margin-bottom: 3px !important;
}

.dashboard-compact .dashboard-filter .form-control,
.dashboard-compact .dashboard-filter .form-select {
    min-height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.dashboard-compact .dashboard-filter .btn {
    min-height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


/* ---------------------------------------------------------
   요약 KPI 6개
--------------------------------------------------------- */

.dashboard-compact .dashboard-metric {
    min-height: 105px !important;
    padding: 12px 14px !important;
}

.dashboard-compact .metric-top {
    margin-bottom: 5px !important;
}

.dashboard-compact .metric-label {
    margin-bottom: 2px !important;
}

.dashboard-compact .metric-value {
    line-height: 1.1 !important;
}

.dashboard-compact .metric-foot {
    margin-top: 5px !important;
    padding-top: 5px !important;
}


/* =========================================================
   분석그래프 공통
========================================================= */

.dashboard-compact .final-analysis-row {
    margin-bottom: 10px !important;
}

.dashboard-compact .final-analysis-header {
    min-height: 65px !important;

    padding:
        11px
        16px
        8px !important;
}

.dashboard-compact .final-analysis-header
.analysis-card-title {
    margin: 0 !important;

    font-size: 16px !important;

    line-height: 1.25 !important;
}

.dashboard-compact .final-analysis-header
.analysis-card-description {
    margin-top: 2px !important;

    font-size: 11px !important;
}

.dashboard-compact .analysis-year-badge {
    padding: 4px 8px !important;
    font-size: 10px !important;
}

.dashboard-compact .final-analysis-body {
    padding:
        8px
        14px
        11px !important;
}


/* =========================================================
   첫째 줄
   핵심 KPI 달성률 / 최근 5년 추이
========================================================= */

.dashboard-compact
.final-analysis-top
.final-analysis-card {
    height: 350px !important;
}


/* 핵심 KPI 막대그래프 */

.dashboard-compact .final-bar-chart {
    height: 260px !important;
}

.dashboard-compact .final-bar-chart canvas {
    height: 260px !important;
    max-height: 260px !important;
}


/* 5년 추이 선택 폼 */

.dashboard-compact
.final-analysis-top form {
    margin-bottom: 5px !important;
}

.dashboard-compact
.final-analysis-top
.form-select {
    min-height: 32px !important;

    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.dashboard-compact
.final-analysis-top
.btn {
    min-height: 32px !important;

    padding:
        3px
        11px !important;
}


/* 선택된 KPI 이름 */

.dashboard-compact .final-selected-kpi {
    height: 20px !important;

    min-height: 20px !important;

    margin:
        3px
        0
        3px !important;

    font-size: 11px !important;

    line-height: 20px !important;
}


/* 5년 추이 그래프 */

.dashboard-compact .final-trend-chart {
    height: 200px !important;
}

.dashboard-compact .final-trend-chart canvas {
    height: 200px !important;
    max-height: 200px !important;
}


/* =========================================================
   둘째 줄
   성과상태 분포 / IR 승인
========================================================= */

.dashboard-compact
.final-analysis-status
.final-analysis-card {
    height: 290px !important;
}


/* 도넛 */

.dashboard-compact .final-status-layout {
    height: 200px !important;

    grid-template-columns:
        minmax(0, 1fr)
        120px !important;

    gap: 12px !important;
}

.dashboard-compact .final-doughnut-chart {
    height: 185px !important;
    min-height: 185px !important;
}

.dashboard-compact .final-doughnut-chart canvas {
    height: 185px !important;
    max-height: 185px !important;
}


/* 상태 숫자 */

.dashboard-compact .status-summary {
    gap: 6px !important;
}

.dashboard-compact .status-summary-item {
    padding:
        7px
        9px !important;
}

.dashboard-compact .status-summary-label {
    font-size: 10px !important;
}

.dashboard-compact .status-summary-value {
    line-height: 1.15 !important;
}


/* IR 승인 현황 */

.dashboard-compact .final-approval-panel {
    padding:
        10px
        18px
        14px !important;
}

.dashboard-compact .approval-rate-label {
    margin-bottom: 2px !important;
}

.dashboard-compact .approval-rate-value {
    margin-bottom: 8px !important;
}

.dashboard-compact .approval-progress {
    margin:
        5px
        0
        10px !important;
}

.dashboard-compact .approval-counts {
    margin-top: 7px !important;
}


/* =========================================================
   핵심 KPI 12개
========================================================= */

.dashboard-compact .kpi-executive-section {
    margin-bottom: 12px !important;
}

.dashboard-compact .kpi-section-header {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
}

.dashboard-compact .kpi-section-title {
    margin:
        1px
        0
        2px !important;

    font-size: 18px !important;
}

.dashboard-compact .kpi-section-description {
    font-size: 11px !important;
}

.dashboard-compact .kpi-section-year {
    padding:
        4px
        8px !important;

    font-size: 10px !important;
}


/* KPI 카드 */

.dashboard-compact .kpi-exec-card {
    min-height: 205px !important;

    padding:
        11px
        13px
        10px !important;
}

.dashboard-compact .kpi-card-top {
    margin-bottom: 5px !important;
}

.dashboard-compact .kpi-card-name {
    min-height: 27px !important;

    margin-bottom: 6px !important;

    line-height: 1.3 !important;
}

.dashboard-compact .kpi-value-grid {
    margin:
        4px
        0
        6px !important;

    padding:
        8px
        6px !important;
}

.dashboard-compact .kpi-value-label {
    margin-bottom: 2px !important;
}

.dashboard-compact .kpi-value-number {
    line-height: 1.15 !important;
}

.dashboard-compact .kpi-achievement {
    margin:
        5px
        0
        0 !important;
}

.dashboard-compact .kpi-achievement-head {
    margin-bottom: 4px !important;
}

.dashboard-compact .kpi-progress {
    height: 4px !important;
}

.dashboard-compact .kpi-card-footer {
    margin-top: 6px !important;

    min-height: 16px !important;
}


/* KPI 카드 행간 */

.dashboard-compact
.kpi-executive-section
.row {
    --bs-gutter-y: 8px;
}


/* =========================================================
   연도 KPI 현황표
========================================================= */

.dashboard-compact
.card.shadow-sm.mb-4 {
    margin-bottom: 10px !important;
}

.dashboard-compact
.card.shadow-sm.mb-4
.card-header {
    padding:
        10px
        14px !important;
}

.dashboard-compact
.card.shadow-sm.mb-4
.card-body {
    padding:
        8px
        12px !important;
}

.dashboard-compact
.table {
    margin-bottom: 0 !important;
}

.dashboard-compact
.table > :not(caption) > * > * {
    padding:
        7px
        9px !important;

    vertical-align: middle !important;
}


/* =========================================================
   작은 화면에서는 높이 자동
========================================================= */

@media (max-width: 1199px) {

    .dashboard-compact
    .final-analysis-top
    .final-analysis-card,

    .dashboard-compact
    .final-analysis-status
    .final-analysis-card {
        height: auto !important;
    }

    .dashboard-compact .final-bar-chart {
        height: 290px !important;
    }

    .dashboard-compact .final-trend-chart {
        height: 235px !important;
    }

}

/* =========================================================
   최근 5년 추이 - KPI 선택 / 조회 버튼 한 줄 배치
========================================================= */

.dashboard-compact .trend-filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: 100% !important;

    gap: 7px !important;

    margin-bottom: 7px !important;
}


/* KPI 선택창 */
.dashboard-compact .trend-kpi-select {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 34px !important;

    padding-top: 4px !important;
    padding-bottom: 4px !important;

    font-size: 12px !important;
}


/* 조회 / 초기화 */
.dashboard-compact .trend-filter-btn {
    flex: 0 0 auto !important;

    height: 34px !important;

    padding: 4px 13px !important;

    white-space: nowrap !important;

    font-size: 12px !important;
}


/* 작은 화면에서는 버튼이 아래로 내려가도 되도록 */
@media (max-width: 600px) {

    .dashboard-compact .trend-filter-row {
        flex-wrap: wrap !important;
    }

    .dashboard-compact .trend-kpi-select {
        flex-basis: 100% !important;
    }

}

/* =========================================================
   KPI RESULTS TABLE - COMPACT
========================================================= */

.dashboard-compact .kpi-results-card {
    overflow: hidden !important;

    border: 1px solid var(--ir-border) !important;

    border-radius: 14px !important;

    background: #ffffff !important;
}


/* 상단 제목 */
.dashboard-compact .kpi-results-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 11px 16px 9px;

    border-bottom: 1px solid var(--ir-border);
}


.dashboard-compact .kpi-results-title {
    margin: 1px 0 0;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.25;

    color: var(--kosin-navy);
}


.dashboard-compact .kpi-results-count {
    padding: 4px 9px;

    border: 1px solid var(--ir-border);

    border-radius: 8px;

    background: #f7f9fc;

    font-size: 11px;

    color: var(--ir-muted);

    white-space: nowrap;
}


.dashboard-compact .kpi-results-count strong {
    color: var(--kosin-navy);
}


/* 표 영역 */
.dashboard-compact .kpi-results-body {
    padding: 0 !important;
}


.dashboard-compact .kpi-results-table {
    width: 100%;

    margin: 0 !important;

    font-size: 12px;
}


/* 헤더 */
.dashboard-compact .kpi-results-table thead th {
    padding: 8px 10px !important;

    border-bottom: 1px solid var(--ir-border);

    background: #f5f8fc;

    font-size: 11px;

    font-weight: 650;

    color: #65758b;

    white-space: nowrap;
}


/* 데이터 행 */
.dashboard-compact .kpi-results-table tbody td {
    padding: 7px 10px !important;

    border-bottom: 1px solid #edf1f5;

    line-height: 1.25;

    vertical-align: middle;
}


.dashboard-compact .kpi-results-table tbody tr:last-child td {
    border-bottom: 0;
}


.dashboard-compact .kpi-results-table tbody tr:hover {
    background: #fafcff;
}


/* KPI 셀 */
.dashboard-compact .kpi-col-kpi {
    min-width: 205px;
}


.dashboard-compact .kpi-result-name {
    min-width: 205px;
}


.dashboard-compact .kpi-result-code {
    display: inline-block;

    margin-right: 7px;

    padding: 2px 5px;

    border-radius: 5px;

    background: #eaf4fb;

    font-size: 10px;

    font-weight: 700;

    color: var(--kosin-blue);
}


.dashboard-compact .kpi-result-title {
    font-weight: 600;

    color: var(--ir-text);

    white-space: nowrap;
}


/* 부문·사업 */
.dashboard-compact .kpi-result-framework {
    color: #66788c;

    white-space: nowrap;
}


/* 숫자 */
.dashboard-compact .kpi-result-number,
.dashboard-compact .kpi-result-rate {
    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}


.dashboard-compact .kpi-result-rate {
    color: var(--ir-text);
}


/* =========================================================
   성과상태
========================================================= */

.dashboard-compact .result-status-pill {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-width: 57px;

    padding: 3px 7px;

    border-radius: 999px;

    justify-content: center;

    font-size: 10px;

    font-weight: 650;

    white-space: nowrap;
}


.dashboard-compact .result-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}


.dashboard-compact .result-status-normal {
    background: #e8f7ef;

    color: #168653;
}


.dashboard-compact .result-status-caution {
    background: #fff5d9;

    color: #bd8100;
}


.dashboard-compact .result-status-danger {
    background: #fdebed;

    color: #d33f50;
}


.dashboard-compact .result-status-unset {
    background: #eef1f5;

    color: #7c8997;
}


/* =========================================================
   Workflow
========================================================= */

.dashboard-compact .workflow-pill {
    display: inline-block;

    min-width: 62px;

    padding: 3px 7px;

    border-radius: 6px;

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;
}


.dashboard-compact .workflow-approved {
    background: #e7f4ff;

    color: #0d72b8;
}


.dashboard-compact .workflow-confirmed {
    background: #e9f7ef;

    color: #198754;
}


.dashboard-compact .workflow-submitted {
    background: #edf2ff;

    color: #5367c7;
}


.dashboard-compact .workflow-draft {
    background: #f1f3f5;

    color: #65717d;
}


.dashboard-compact .workflow-returned {
    background: #fdebed;

    color: #cf4050;
}


.dashboard-compact .workflow-default {
    background: #f1f3f5;

    color: #8a949e;
}


/* 조회 결과 없음 */
.dashboard-compact .kpi-results-empty {
    padding: 22px !important;

    text-align: center;

    color: var(--ir-muted);
}


/* 좁은 화면 */
@media (max-width: 900px) {

    .dashboard-compact .kpi-results-table {
        min-width: 850px;
    }

}

.dashboard-compact .kpi-result-unit {
    margin-left: 3px;

    font-size: 9px;

    font-weight: 500;

    color: var(--ir-muted);
}

/* =========================================================
   MANAGEMENT PAGE - COMMON UI
========================================================= */

.management-page {
    padding-bottom: 16px;
}


/* =========================================================
   Header
========================================================= */

.management-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;
    padding: 3px 2px;
}


.management-eyebrow,
.management-table-eyebrow {
    margin-bottom: 2px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;

    color: var(--kosin-blue);
}


.management-title {
    margin: 0;

    font-size: 23px;
    font-weight: 750;

    line-height: 1.25;

    color: var(--kosin-navy);
}


.management-description {
    margin-top: 4px;

    font-size: 12px;

    color: var(--ir-muted);
}


.management-primary-btn {
    flex: 0 0 auto;

    min-height: 36px;

    padding: 6px 13px;

    font-size: 12px;

    white-space: nowrap;
}


.management-btn-plus {
    margin-right: 4px;

    font-size: 15px;

    line-height: 1;
}


/* =========================================================
   Filter
========================================================= */

.management-filter {
    display: flex;

    align-items: flex-end;

    gap: 8px;

    margin-bottom: 12px;

    padding: 11px 13px;

    border: 1px solid var(--ir-border);

    border-radius: 12px;

    background: #ffffff;
}


.management-filter-item {
    flex: 0 0 170px;
}


.management-filter-item.management-search {
    flex: 1 1 310px;
    max-width: 430px;
}


.management-filter-item label {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 600;

    color: #65758b;
}


.management-filter .form-control,
.management-filter .form-select {
    height: 34px;
    min-height: 34px;

    padding-top: 4px;
    padding-bottom: 4px;

    font-size: 12px;
}


.management-filter-actions {
    display: flex;

    gap: 6px;

    flex: 0 0 auto;
}


.management-filter-actions .btn {
    height: 34px;

    padding: 4px 13px;

    font-size: 12px;

    white-space: nowrap;
}


/* =========================================================
   Table Card
========================================================= */

.management-table-card {
    overflow: hidden;

    border: 1px solid var(--ir-border);

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(35, 55, 80, .04);
}


.management-table-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 10px 14px 8px;

    border-bottom: 1px solid var(--ir-border);
}


.management-table-title {
    font-size: 15px;
    font-weight: 700;

    color: var(--kosin-navy);
}


.management-count {
    padding: 3px 8px;

    border: 1px solid var(--ir-border);

    border-radius: 7px;

    background: #f7f9fc;

    font-size: 10px;

    color: var(--ir-muted);
}


.management-count strong {
    color: var(--kosin-navy);
}


/* =========================================================
   Table
========================================================= */

.management-table {
    width: 100%;

    margin-bottom: 0 !important;

    font-size: 12px;
}


.management-table thead th {
    padding: 8px 10px !important;

    border-bottom: 1px solid var(--ir-border);

    background: #f5f8fc;

    font-size: 10px;
    font-weight: 650;

    color: #65758b;

    white-space: nowrap;
}


.management-table tbody td {
    padding: 7px 10px !important;

    border-bottom: 1px solid #edf1f5;

    vertical-align: middle;

    line-height: 1.25;
}


.management-table tbody tr:last-child td {
    border-bottom: 0;
}


.management-table tbody tr:hover {
    background: #fafcff;
}


.management-kpi-code-col {
    width: 100px;
}


.management-kpi-code {
    display: inline-block;

    padding: 3px 6px;

    border-radius: 5px;

    background: #eaf4fb;

    font-size: 10px;
    font-weight: 700;

    color: var(--kosin-blue);

    white-space: nowrap;
}


.management-kpi-name {
    min-width: 220px;

    font-weight: 600;

    color: var(--ir-text);
}


.management-category {
    padding: 2px 6px;

    border-radius: 5px;

    background: #f0f3f7;

    font-size: 10px;

    color: #5e6f82;

    white-space: nowrap;
}


.management-unit {
    font-size: 11px;

    color: #58697c;

    white-space: nowrap;
}


.management-aggregation {
    font-size: 11px;

    color: #66788c;

    white-space: nowrap;
}


/* =========================================================
   Direction
========================================================= */

.direction-pill {
    display: inline-block;

    min-width: 43px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 650;

    white-space: nowrap;
}


.direction-up {
    background: #e7f4ff;

    color: #0d72b8;
}


.direction-down {
    background: #fff0f1;

    color: #cf4050;
}


.direction-default {
    background: #f1f3f5;

    color: #697887;
}


/* =========================================================
   Active Status
========================================================= */

.management-status {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-width: 55px;

    justify-content: center;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 650;

    white-space: nowrap;
}


.management-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}


.management-status.active {
    background: #e8f7ef;

    color: #168653;
}


.management-status.inactive {
    background: #eef1f5;

    color: #7b8998;
}


.management-empty {
    padding: 28px !important;

    text-align: center;

    color: var(--ir-muted);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {

    .management-filter {
        flex-wrap: wrap;
    }

    .management-filter-item,
    .management-filter-item.management-search {
        flex: 1 1 220px;

        max-width: none;
    }

    .management-table {
        min-width: 820px;
    }

}

/* =========================================================
   KPI TARGET MANAGEMENT
========================================================= */

.target-management-table {
    min-width: 1050px;
}


/* 연도 */
.target-year {
    font-size: 11px;
    font-weight: 650;

    color: var(--kosin-navy);

    white-space: nowrap;
}


/* 부문·사업 */
.target-framework {
    min-width: 130px;

    font-size: 11px;

    color: #66788c;

    white-space: nowrap;
}


/* 부서 */
.target-department {
    min-width: 100px;

    font-size: 11px;

    color: #66788c;

    white-space: nowrap;
}


/* 목표값 */
.target-value {
    font-variant-numeric: tabular-nums;

    font-size: 12px;

    color: var(--ir-text);

    white-space: nowrap;
}


/* =========================================================
   산출구분
========================================================= */

.target-variant {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 650;

    white-space: nowrap;
}


.target-variant-blue {
    background: #e7f4ff;

    color: #0d72b8;
}


.target-variant-purple {
    background: #f0ebff;

    color: #7254c7;
}


.target-variant-default {
    background: #f1f3f5;

    color: #687786;
}


/* =========================================================
   수정 버튼
========================================================= */

.target-edit-btn {
    padding: 3px 9px;

    border: 1px solid #cbd9e8;

    background: #ffffff;

    color: var(--kosin-blue);

    font-size: 10px;

    line-height: 1.3;

    white-space: nowrap;
}


.target-edit-btn:hover {
    border-color: var(--kosin-blue);

    background: #eef7fd;

    color: var(--kosin-navy);
}

/* =========================================================
   KPI INPUT ITEM MANAGEMENT
========================================================= */

.input-kpi-filter {
    flex: 1 1 360px !important;
    max-width: 520px;
}


.input-item-search {
    flex: 1 1 230px !important;
    max-width: 320px;
}


.input-status-filter {
    flex: 0 0 145px !important;
}


.input-selected-kpi {
    margin-top: 2px;

    font-size: 10px;
    font-weight: 600;

    color: var(--ir-muted);
}


.input-item-table {
    min-width: 900px;
}


/* 표시순서 */
.input-display-order {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 27px;

    padding: 2px 6px;

    border-radius: 5px;

    background: #f2f5f8;

    font-size: 10px;
    font-weight: 650;

    color: #66788c;
}


/* 입력코드 */
.input-code {
    display: inline-block;

    padding: 3px 6px;

    border-radius: 5px;

    background: #eaf4fb;

    font-size: 10px;
    font-weight: 700;

    color: var(--kosin-blue);

    white-space: nowrap;
}


/* 항목명 */
.input-name {
    min-width: 230px;

    font-weight: 600;

    color: var(--ir-text);
}


/* =========================================================
   자료형
========================================================= */

.input-type-pill {
    display: inline-block;

    min-width: 45px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 650;

    white-space: nowrap;
}


.input-type-number {
    background: #e7f4ff;

    color: #0d72b8;
}


.input-type-text {
    background: #f0ebff;

    color: #7254c7;
}


.input-type-date {
    background: #fff4df;

    color: #b47a13;
}


.input-type-boolean {
    background: #e8f7ef;

    color: #168653;
}


.input-type-default {
    background: #f1f3f5;

    color: #687786;
}


/* =========================================================
   필수 / 선택
========================================================= */

.required-pill {
    display: inline-block;

    min-width: 43px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 650;

    white-space: nowrap;
}


.required-pill.required {
    background: #e7f4ff;

    color: #0d72b8;
}


.required-pill.optional {
    background: #f1f3f5;

    color: #7b8998;
}


/* =========================================================
   활성화 버튼
========================================================= */

.input-toggle-btn {
    min-width: 58px;

    padding: 3px 8px;

    border-radius: 6px;

    font-size: 10px;

    line-height: 1.3;

    white-space: nowrap;
}


.input-toggle-btn.deactivate {
    border: 1px solid #efc6cc;

    background: #ffffff;

    color: #cf4050;
}


.input-toggle-btn.deactivate:hover {
    background: #fdebed;
}


.input-toggle-btn.activate {
    border: 1px solid #b9dfca;

    background: #ffffff;

    color: #168653;
}


.input-toggle-btn.activate:hover {
    background: #e8f7ef;
}


@media (max-width: 900px) {

    .input-kpi-filter,
    .input-item-search,
    .input-status-filter {
        flex: 1 1 220px !important;
        max-width: none;
    }

}

/* =========================================================
   KPI RESULT MANAGEMENT
========================================================= */

.results-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;
}


/* =========================================================
   Top Action Buttons
========================================================= */

.results-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 6px;
}


.results-main-btn,
.results-action-btn {
    min-height: 34px;

    padding: 5px 11px;

    font-size: 11px;

    white-space: nowrap;
}


.results-alert {
    margin-bottom: 10px;

    padding: 8px 12px;

    border-radius: 9px;

    font-size: 11px;
}


/* =========================================================
   Filter
========================================================= */

.results-year-filter {
    flex: 0 0 115px !important;
}


.results-search-filter {
    flex: 1 1 270px !important;
    max-width: 360px;
}


.results-status-filter {
    flex: 0 0 125px !important;
}


.results-workflow-filter {
    flex: 0 0 140px !important;
}


/* =========================================================
   Table
========================================================= */

.results-management-table {
    min-width: 1350px;
}


.results-management-table tbody td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}


.results-framework {
    min-width: 120px;

    font-size: 10px;

    color: #66788c;

    white-space: nowrap;
}


.results-kpi-cell {
    min-width: 210px;
}


.results-kpi-code {
    display: inline-block;

    margin-bottom: 2px;

    padding: 2px 5px;

    border-radius: 4px;

    background: #eaf4fb;

    font-size: 9px;
    font-weight: 700;

    color: var(--kosin-blue);
}


.results-kpi-name {
    font-size: 11px;
    font-weight: 650;

    color: var(--ir-text);

    white-space: nowrap;
}


.results-variant {
    display: inline-block;

    padding: 3px 6px;

    border-radius: 999px;

    background: #f1f4f7;

    font-size: 9px;
    font-weight: 600;

    color: #66788c;

    white-space: nowrap;
}


.results-period {
    font-size: 10px;

    color: #617286;

    white-space: nowrap;
}


.results-department {
    min-width: 90px;

    font-size: 10px;

    color: #66788c;

    white-space: nowrap;
}


/* =========================================================
   Numbers
========================================================= */

.results-number-cell {
    min-width: 90px;

    white-space: nowrap;
}


.results-number {
    font-size: 11px;
    font-weight: 650;

    font-variant-numeric: tabular-nums;

    color: var(--ir-text);
}


.results-unit {
    margin-left: 2px;

    font-size: 8px;

    color: #8a98a7;
}


.results-achievement {
    font-size: 11px;
    font-weight: 700;

    font-variant-numeric: tabular-nums;

    color: var(--kosin-navy);

    white-space: nowrap;
}


/* =========================================================
   Performance Status
========================================================= */

.results-performance {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 4px;

    min-width: 54px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 650;

    white-space: nowrap;
}


.results-status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;
}


.performance-normal {
    background: #e8f7ef;

    color: #168653;
}


.performance-caution {
    background: #fff5d9;

    color: #b47a00;
}


.performance-danger {
    background: #fdebed;

    color: #cf4050;
}


.performance-unset {
    background: #eef1f5;

    color: #7b8998;
}


/* =========================================================
   Workflow Status
========================================================= */

.results-workflow {
    display: inline-block;

    min-width: 58px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 650;

    white-space: nowrap;
}


.workflow-draft {
    background: #eef1f5;

    color: #687786;
}


.workflow-submitted {
    background: #e7f4ff;

    color: #0d72b8;
}


.workflow-confirmed {
    background: #edf0ff;

    color: #5268be;
}


.workflow-returned {
    background: #fdebed;

    color: #cf4050;
}


.workflow-approved {
    background: #e8f7ef;

    color: #168653;
}


.workflow-default {
    background: #f1f3f5;

    color: #687786;
}


/* =========================================================
   Row Action Buttons
========================================================= */

.results-manage-col {
    min-width: 165px;
}


.results-row-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 3px;
}


.results-mini-btn {
    min-height: 25px;

    padding: 3px 6px;

    border-radius: 5px;

    font-size: 9px;

    line-height: 1.2;

    white-space: nowrap;
}


.results-mini-btn.details {
    border: 1px solid #d1dae5;

    background: #ffffff;

    color: #617286;
}


.results-mini-btn.edit {
    border: 1px solid #bdd9eb;

    background: #ffffff;

    color: var(--kosin-blue);
}


.results-mini-btn.submit,
.results-mini-btn.approve {
    border: 1px solid #b9dfca;

    background: #edf9f2;

    color: #168653;
}


.results-mini-btn.return {
    border: 1px solid #efc6cc;

    background: #ffffff;

    color: #cf4050;
}


.results-mini-btn.details:hover {
    background: #f3f6f9;
}


.results-mini-btn.edit:hover {
    background: #edf7fd;
}


.results-mini-btn.submit:hover,
.results-mini-btn.approve:hover {
    background: #dff4e8;
}


.results-mini-btn.return:hover {
    background: #fdebed;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1050px) {

    .results-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .results-action-bar {
        justify-content: flex-start;
    }

    .results-year-filter,
    .results-search-filter,
    .results-status-filter,
    .results-workflow-filter {
        flex: 1 1 180px !important;

        max-width: none;
    }

}

/* =========================================================
   KPI RESULT TABLE - FIT TO SCREEN
   실적관리 표 한 화면 압축
========================================================= */

.results-management-table {
    width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed;
}


/* 표 머리글 */
.results-management-table thead th {
    padding: 7px 5px !important;

    font-size: 9px !important;

    white-space: nowrap;
}


/* 표 내용 */
.results-management-table tbody td {
    padding: 6px 5px !important;

    font-size: 10px !important;

    vertical-align: middle;
}


/* =========================================================
   각 칼럼 폭
========================================================= */

/* 1. 부문·사업 */
.results-management-table th:nth-child(1),
.results-management-table td:nth-child(1) {
    width: 9%;
}


/* 2. KPI */
.results-management-table th:nth-child(2),
.results-management-table td:nth-child(2) {
    width: 17%;
}


/* 3. 산출구분 */
.results-management-table th:nth-child(3),
.results-management-table td:nth-child(3) {
    width: 8%;
}


/* 4. 기간 */
.results-management-table th:nth-child(4),
.results-management-table td:nth-child(4) {
    width: 6%;
}


/* 5. 부서 */
.results-management-table th:nth-child(5),
.results-management-table td:nth-child(5) {
    width: 8%;
}


/* 6. 목표 */
.results-management-table th:nth-child(6),
.results-management-table td:nth-child(6) {
    width: 8%;
}


/* 7. 실적 */
.results-management-table th:nth-child(7),
.results-management-table td:nth-child(7) {
    width: 8%;
}


/* 8. 달성률 */
.results-management-table th:nth-child(8),
.results-management-table td:nth-child(8) {
    width: 7%;
}


/* 9. 성과상태 */
.results-management-table th:nth-child(9),
.results-management-table td:nth-child(9) {
    width: 7%;
}


/* 10. 처리상태 */
.results-management-table th:nth-child(10),
.results-management-table td:nth-child(10) {
    width: 8%;
}


/* 11. 관리 */
.results-management-table th:nth-child(11),
.results-management-table td:nth-child(11) {
    width: 14%;
}


/* =========================================================
   기존 최소 폭 제거
========================================================= */

.results-framework {
    min-width: 0 !important;

    font-size: 9px !important;

    white-space: normal !important;

    line-height: 1.25;
}


.results-kpi-cell {
    min-width: 0 !important;
}


.results-kpi-name {
    font-size: 10px !important;

    white-space: normal !important;

    line-height: 1.25;
}


.results-department {
    min-width: 0 !important;

    font-size: 9px !important;

    white-space: normal !important;
}


.results-number-cell {
    min-width: 0 !important;
}


.results-manage-col {
    min-width: 0 !important;
}


/* =========================================================
   숫자 표시 압축
========================================================= */

.results-number {
    font-size: 10px !important;
}


.results-unit {
    display: block;

    margin-left: 0;

    margin-top: 1px;

    font-size: 7px !important;

    line-height: 1;
}


.results-achievement {
    font-size: 10px !important;
}


/* =========================================================
   배지 압축
========================================================= */

.results-variant {
    padding: 2px 4px !important;

    font-size: 8px !important;

    white-space: normal !important;

    line-height: 1.15;
}


.results-performance,
.results-workflow {
    min-width: 0 !important;

    padding: 3px 5px !important;

    font-size: 8px !important;
}


/* =========================================================
   관리 버튼 압축
========================================================= */

.results-row-actions {
    gap: 2px !important;
}


.results-mini-btn {
    min-height: 22px !important;

    padding: 2px 5px !important;

    font-size: 8px !important;
}


/* =========================================================
   화면이 아주 좁을 때만 좌우 스크롤 허용
========================================================= */

@media (max-width: 1050px) {

    .results-management-table {
        min-width: 1000px !important;
    }

}

/* =========================================================
   KPI RESULT TABLE - READABILITY ADJUSTMENT
========================================================= */

.results-management-table {
    font-size: 11.5px !important;
}


.results-management-table thead th {
    font-size: 10.5px !important;

    padding: 8px 6px !important;
}


.results-management-table tbody td {
    font-size: 11px !important;

    padding: 7px 6px !important;
}


/* 부문·사업 */
.results-framework {
    font-size: 10.5px !important;

    line-height: 1.3;
}


/* KPI 코드 */
.results-kpi-code {
    font-size: 9.5px !important;
}


/* KPI명 */
.results-kpi-name {
    font-size: 11.5px !important;

    line-height: 1.3;
}


/* 부서 */
.results-department {
    font-size: 10.5px !important;
}


/* 목표 / 실적 */
.results-number {
    font-size: 11.5px !important;
}


/* 단위 */
.results-unit {
    font-size: 8.5px !important;
}


/* 달성률 */
.results-achievement {
    font-size: 11.5px !important;
}


/* 산출구분 */
.results-variant {
    font-size: 9.5px !important;

    padding: 3px 5px !important;
}


/* 성과상태 */
.results-performance {
    font-size: 9.5px !important;

    padding: 4px 6px !important;
}


/* 처리상태 */
.results-workflow {
    font-size: 9.5px !important;

    padding: 4px 6px !important;
}


/* 관리버튼 */
.results-mini-btn {
    min-height: 25px !important;

    padding: 3px 6px !important;

    font-size: 9.5px !important;
}

/* =========================================================
   KPI RESULT CREATE PAGE
========================================================= */

.result-create-page {
    max-width: 1280px;
}


/* =========================================================
   Section Card
========================================================= */

.create-section-card {
    margin-bottom: 14px;

    border: 1px solid var(--ir-border);

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(35, 55, 80, .04);

    overflow: hidden;
}


.create-section-header {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 15px;

    border-bottom: 1px solid var(--ir-border);

    background: #fbfcfe;
}


.create-step-number {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    background: var(--kosin-navy);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}


.create-section-title {
    font-size: 14px;
    font-weight: 700;

    color: var(--kosin-navy);
}


.create-section-description {
    margin-top: 1px;

    font-size: 11px;

    color: var(--ir-muted);
}


.create-section-body {
    padding: 14px 15px;
}


/* =========================================================
   Fields
========================================================= */

.create-selection-grid {
    display: grid;

    grid-template-columns:
        minmax(320px, 2.2fr)
        minmax(110px, .7fr)
        minmax(170px, 1fr)
        minmax(170px, 1fr);

    gap: 10px;
}


.create-field {
    min-width: 0;
}


.create-label {
    display: block;

    margin-bottom: 5px;

    font-size: 11.5px;
    font-weight: 650;

    color: #506175;
}


.create-control {
    min-height: 37px;

    font-size: 12.5px;
}


.create-required {
    color: #dc4c5a;
}


.create-load-area {
    display: flex;

    justify-content: flex-end;

    margin-top: 11px;
}


.create-load-btn {
    min-height: 35px;

    padding: 6px 14px;

    font-size: 12px;
}


.create-list-btn {
    min-height: 35px;

    padding: 6px 13px;

    font-size: 12px;
}


/* =========================================================
   Validation
========================================================= */

.create-validation {
    margin-bottom: 10px;

    padding: 0;

    font-size: 11.5px;

    color: #cf4050;
}


.create-validation:empty {
    display: none;
}


/* =========================================================
   KPI Summary
========================================================= */

.create-kpi-summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 12px;

    padding: 11px 13px;

    border: 1px solid #dce7f1;

    border-radius: 10px;

    background: #f8fbfe;
}


.create-kpi-framework {
    margin-bottom: 4px;

    font-size: 10.5px;
    font-weight: 600;

    color: var(--ir-muted);
}


.create-kpi-title {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 13px;

    color: var(--ir-text);
}


.create-kpi-code {
    padding: 3px 6px;

    border-radius: 5px;

    background: #e7f3fb;

    font-size: 10px;
    font-weight: 700;

    color: var(--kosin-blue);
}


.create-target-box {
    flex: 0 0 auto;

    padding-left: 18px;

    border-left: 1px solid #dce7f1;

    white-space: nowrap;
}


.create-target-label {
    margin-right: 6px;

    font-size: 10.5px;

    color: var(--ir-muted);
}


.create-target-value {
    font-size: 15px;

    font-variant-numeric: tabular-nums;

    color: var(--kosin-navy);
}


.create-target-unit {
    margin-left: 3px;

    font-size: 10px;

    color: var(--ir-muted);
}


/* =========================================================
   Period
========================================================= */

.create-period-row {
    display: flex;

    margin-bottom: 13px;
}


.create-period-field {
    width: 180px;
}


/* =========================================================
   Input Header
========================================================= */

.create-input-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-top: 3px;
    margin-bottom: 8px;
}


.create-input-title {
    font-size: 13px;
    font-weight: 700;

    color: var(--kosin-navy);
}


.create-input-description {
    margin-top: 2px;

    font-size: 10.5px;

    color: var(--ir-muted);
}


.create-input-count {
    padding: 3px 8px;

    border: 1px solid var(--ir-border);

    border-radius: 7px;

    background: #f7f9fc;

    font-size: 10px;

    color: var(--ir-muted);
}


.create-input-count strong {
    color: var(--kosin-navy);
}


.create-input-notice {
    margin-bottom: 9px;

    padding: 7px 10px;

    border-radius: 7px;

    background: #fff9e8;

    font-size: 10.5px;

    color: #806a2b;
}


/* =========================================================
   Input Items
========================================================= */

.create-input-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.create-input-item {
    padding: 10px;

    border: 1px solid #e3eaf1;

    border-radius: 9px;

    background: #ffffff;
}


.create-input-item-header {
    margin-bottom: 6px;
}


.create-input-label {
    font-size: 11.5px;
    font-weight: 650;

    color: var(--ir-text);
}


.create-required-badge,
.create-optional-badge {
    display: inline-block;

    margin-left: 4px;

    padding: 2px 5px;

    border-radius: 999px;

    font-size: 8.5px;
    font-weight: 650;
}


.create-required-badge {
    background: #fdebed;

    color: #cf4050;
}


.create-optional-badge {
    background: #eef1f5;

    color: #7b8998;
}


.create-number-input {
    min-height: 37px;

    text-align: right;

    font-size: 13px;

    font-variant-numeric: tabular-nums;
}


.create-unit-addon {
    min-width: 54px;

    justify-content: center;

    background: #f6f8fa;

    font-size: 11px;

    color: #66788c;
}


.create-help-text {
    margin-top: 5px;

    font-size: 10px;

    line-height: 1.35;

    color: var(--ir-muted);
}


/* =========================================================
   Evidence / Note
========================================================= */

.create-additional-section {
    margin-top: 15px;

    padding-top: 13px;

    border-top: 1px solid var(--ir-border);
}


.create-additional-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 12px;

    margin-top: 8px;
}


.create-note {
    min-height: 72px;

    font-size: 12.5px;

    resize: vertical;
}


/* =========================================================
   Bottom Buttons
========================================================= */

.create-submit-area {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin-top: 15px;

    padding-top: 12px;

    border-top: 1px solid var(--ir-border);
}


.create-cancel-btn,
.create-save-btn {
    min-height: 36px;

    padding: 6px 15px;

    font-size: 12px;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1000px) {

    .create-selection-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 720px) {

    .create-selection-grid,
    .create-input-grid,
    .create-additional-grid {
        grid-template-columns: 1fr;
    }


    .create-kpi-summary {
        align-items: flex-start;

        flex-direction: column;
    }


    .create-target-box {
        padding-left: 0;

        border-left: 0;
    }


    .create-period-field {
        width: 100%;
    }

}

/* =========================================================
   KPI RESULT DETAILS
========================================================= */

.result-detail-page {
    max-width: 1280px;
}


/* Header */
.detail-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-header-btn {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 12px;
}


/* =========================================================
   Summary
========================================================= */

.detail-summary-card {
    margin-bottom: 14px;
    padding: 15px;

    border: 1px solid var(--ir-border);
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(35, 55, 80, .04);
}

.detail-kpi-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding-bottom: 12px;
    margin-bottom: 12px;

    border-bottom: 1px solid var(--ir-border);
}

.detail-framework {
    margin-bottom: 4px;

    font-size: 11px;
    font-weight: 600;

    color: var(--ir-muted);
}

.detail-kpi-title {
    display: flex;
    align-items: center;

    gap: 7px;

    font-size: 15px;
    font-weight: 700;

    color: var(--ir-text);
}

.detail-kpi-code {
    padding: 3px 7px;

    border-radius: 5px;

    background: #eaf4fb;

    font-size: 10.5px;
    font-weight: 700;

    color: var(--kosin-blue);
}

.detail-heading-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-lock-badge {
    padding: 4px 7px;

    border-radius: 999px;

    background: #f1f3f5;

    font-size: 9.5px;
    font-weight: 600;

    color: #687786;
}


/* 기본정보 */

.detail-meta-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-bottom: 12px;

    border: 1px solid #e6ebf1;
    border-radius: 9px;

    overflow: hidden;
}

.detail-meta-item {
    padding: 9px 11px;

    border-right: 1px solid #e6ebf1;

    background: #fafbfd;
}

.detail-meta-item:last-child {
    border-right: 0;
}

.detail-meta-label {
    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 600;

    color: var(--ir-muted);
}

.detail-meta-value {
    font-size: 12px;
    font-weight: 650;

    color: var(--ir-text);
}


/* 성과 */

.detail-performance-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}

.detail-performance-item {
    padding: 10px 11px;

    border: 1px solid #e3eaf1;
    border-radius: 9px;

    background: #ffffff;
}

.detail-performance-label {
    margin-bottom: 4px;

    font-size: 10px;
    font-weight: 600;

    color: var(--ir-muted);
}

.detail-performance-value {
    font-size: 17px;
    font-weight: 750;

    color: var(--kosin-navy);

    font-variant-numeric: tabular-nums;
}

.detail-performance-value.result {
    color: var(--kosin-blue);
}

.detail-performance-unit {
    margin-left: 2px;

    font-size: 10px;
    font-weight: 500;

    color: var(--ir-muted);
}


/* 성과상태 */

.detail-performance-status {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10.5px;
    font-weight: 650;
}

.detail-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.detail-performance-normal {
    background: #e8f7ef;
    color: #168653;
}

.detail-performance-caution {
    background: #fff5d9;
    color: #b47a00;
}

.detail-performance-danger {
    background: #fdebed;
    color: #cf4050;
}

.detail-performance-unset {
    background: #eef1f5;
    color: #7b8998;
}


/* =========================================================
   Workflow
========================================================= */

.detail-workflow {
    display: inline-block;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 650;

    white-space: nowrap;
}

.detail-workflow-draft {
    background: #eef1f5;
    color: #687786;
}

.detail-workflow-submitted {
    background: #e7f4ff;
    color: #0d72b8;
}

.detail-workflow-confirmed {
    background: #edf0ff;
    color: #5268be;
}

.detail-workflow-returned {
    background: #fdebed;
    color: #cf4050;
}

.detail-workflow-approved {
    background: #e8f7ef;
    color: #168653;
}

.detail-workflow-default {
    background: #f1f3f5;
    color: #687786;
}


/* =========================================================
   Section
========================================================= */

.detail-section-card {
    margin-bottom: 14px;

    border: 1px solid var(--ir-border);
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(35, 55, 80, .04);

    overflow: hidden;
}

.detail-section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 10px 14px;

    border-bottom: 1px solid var(--ir-border);

    background: #fbfcfe;
}

.detail-section-title {
    font-size: 13.5px;
    font-weight: 700;

    color: var(--kosin-navy);
}

.detail-section-description {
    margin-top: 2px;

    font-size: 10.5px;

    color: var(--ir-muted);
}

.detail-section-body {
    padding: 12px 14px;
}


/* =========================================================
   Table
========================================================= */

.detail-table {
    width: 100%;

    font-size: 11.5px;
}

.detail-table thead th {
    padding: 8px 10px;

    background: #f5f8fc;

    border-bottom: 1px solid var(--ir-border);

    font-size: 10.5px;
    font-weight: 650;

    color: #65758b;

    white-space: nowrap;
}

.detail-table tbody td {
    padding: 8px 10px;

    border-bottom: 1px solid #edf1f5;

    vertical-align: middle;
}

.detail-table tbody tr:last-child td {
    border-bottom: 0;
}

.detail-input-name {
    font-weight: 600;

    color: var(--ir-text);
}

.detail-input-value {
    font-size: 12px;

    font-variant-numeric: tabular-nums;
}

.detail-unit {
    color: #66788c;
}

.detail-empty {
    padding: 22px;

    text-align: center;

    font-size: 11.5px;

    color: var(--ir-muted);
}


/* =========================================================
   Evidence / Note
========================================================= */

.detail-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;
}

.detail-info-item {
    padding: 12px 14px;
}

.detail-info-item + .detail-info-item {
    border-left: 1px solid var(--ir-border);
}

.detail-info-label {
    margin-bottom: 5px;

    font-size: 10.5px;
    font-weight: 650;

    color: var(--ir-muted);
}

.detail-info-content {
    font-size: 12px;

    line-height: 1.5;

    color: var(--ir-text);

    overflow-wrap: anywhere;
}


/* =========================================================
   File Upload
========================================================= */

.detail-upload-form {
    margin-bottom: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--ir-border);
}

.detail-upload-grid {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        minmax(300px, 1.3fr)
        110px;

    gap: 8px;

    align-items: end;
}

.detail-control {
    min-height: 37px;

    font-size: 12px;
}

.detail-upload-button .btn {
    width: 100%;

    min-height: 37px;

    font-size: 11.5px;
}

.detail-file-guide {
    margin-top: 6px;

    font-size: 10px;

    color: var(--ir-muted);
}

.detail-readonly-notice {
    margin-bottom: 10px;

    padding: 8px 10px;

    border-radius: 7px;

    background: #f5f7fa;

    font-size: 10.5px;

    color: #65758b;
}

.detail-file-name {
    max-width: 280px;

    font-weight: 600;

    overflow-wrap: anywhere;
}

.detail-date {
    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}

.detail-action-btn {
    border: 1px solid #bdd9eb;

    color: var(--kosin-blue);

    font-size: 10px;
}

.detail-delete-btn {
    border: 1px solid #efc6cc;

    color: #cf4050;

    font-size: 10px;
}

.detail-locked-text {
    font-size: 10px;

    color: var(--ir-muted);
}

.detail-alert {
    padding: 8px 10px;

    font-size: 11px;
}


/* =========================================================
   Workflow History
========================================================= */

.detail-history-status {
    font-size: 10px;

    color: #66788c;
}

.detail-history-comment {
    min-width: 180px;

    line-height: 1.4;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {

    .detail-meta-grid,
    .detail-performance-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .detail-upload-grid {
        grid-template-columns: 1fr;
    }


    .detail-info-grid {
        grid-template-columns: 1fr;
    }


    .detail-info-item + .detail-info-item {
        border-left: 0;
        border-top: 1px solid var(--ir-border);
    }

}


@media (max-width: 600px) {

    .detail-kpi-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .detail-meta-grid,
    .detail-performance-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   KPI RESULT EDIT
========================================================= */

.result-edit-page {
    max-width: 1280px;
}


/* 상단 버튼 */
.edit-header-actions {
    display: flex;

    align-items: center;

    gap: 6px;
}


/* 처리상태 */
.edit-workflow-area {
    flex: 0 0 auto;
}


/* =========================================================
   기본정보
========================================================= */

.edit-meta-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-bottom: 10px;

    border: 1px solid #e6ebf1;

    border-radius: 9px;

    overflow: hidden;
}


.edit-meta-item {
    padding: 9px 11px;

    border-right: 1px solid #e6ebf1;

    background: #fafbfd;
}


.edit-meta-item:last-child {
    border-right: 0;
}


.edit-meta-label {
    margin-bottom: 3px;

    font-size: 10.5px;
    font-weight: 600;

    color: var(--ir-muted);
}


.edit-meta-value {
    font-size: 12px;
    font-weight: 650;

    color: var(--ir-text);
}


/* =========================================================
   현재 계산결과
========================================================= */

.edit-result-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}


.edit-result-item {
    min-width: 0;

    padding: 10px 11px;

    border: 1px solid #e3eaf1;

    border-radius: 9px;

    background: #ffffff;
}


.edit-result-label {
    margin-bottom: 5px;

    font-size: 10.5px;
    font-weight: 600;

    color: var(--ir-muted);
}


.edit-result-value {
    min-height: 37px;

    display: flex;

    align-items: center;

    font-size: 16px;
    font-weight: 750;

    font-variant-numeric: tabular-nums;

    color: var(--kosin-navy);
}


.edit-result-value.result {
    color: var(--kosin-blue);
}


.edit-result-unit {
    margin-left: 3px;

    font-size: 10px;
    font-weight: 500;

    color: var(--ir-muted);
}


/* =========================================================
   Input Code
========================================================= */

.edit-input-code {
    display: inline-block;

    margin-left: 5px;

    padding: 2px 5px;

    border-radius: 4px;

    background: #f1f4f7;

    font-size: 8.5px;
    font-weight: 600;

    color: #788899;

    vertical-align: middle;
}


/* =========================================================
   Bottom Save Bar
========================================================= */

.edit-submit-bar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 14px;

    padding: 11px 13px;

    border: 1px solid var(--ir-border);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(35, 55, 80, .04);
}


.edit-save-guide {
    font-size: 11px;

    color: #66788c;
}


.edit-save-guide strong {
    color: var(--kosin-navy);
}


.edit-submit-actions {
    display: flex;

    align-items: center;

    gap: 6px;

    flex: 0 0 auto;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {

    .edit-meta-grid,
    .edit-result-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .edit-submit-bar {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .edit-meta-grid,
    .edit-result-grid {
        grid-template-columns: 1fr;
    }


    .edit-submit-actions {
        width: 100%;

        justify-content: flex-end;
    }

}

/* =========================================================
   FRAMEWORK MANAGEMENT
========================================================= */

.framework-alert {
    margin-bottom: 10px;

    padding: 8px 11px;

    border-radius: 8px;

    font-size: 11.5px;
}


/* =========================================================
   Filter
========================================================= */

.framework-search {
    flex: 1 1 280px !important;
    max-width: 380px;
}

.framework-type-filter {
    flex: 0 0 170px !important;
}

.framework-status-filter {
    flex: 0 0 150px !important;
}

.framework-active-filter {
    flex: 0 0 130px !important;
}


/* =========================================================
   Table
========================================================= */

.framework-management-table {
    width: 100%;

    font-size: 11.5px;
}

.framework-management-table thead th {
    font-size: 10.5px !important;
}

.framework-management-table tbody td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    font-size: 11.5px !important;
}


/* 코드 */
.framework-code {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 5px;

    background: #eaf4fb;

    font-size: 10px;
    font-weight: 700;

    color: var(--kosin-blue);

    white-space: nowrap;
}


/* 이름 */
.framework-name {
    min-width: 200px;

    font-size: 12px !important;
    font-weight: 650;

    color: var(--ir-text);
}


/* 유형 */
.framework-type {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    background: #eef3f8;

    font-size: 10px;
    font-weight: 600;

    color: #5f7185;

    white-space: nowrap;
}


/* 상위부문 */
.framework-parent {
    font-size: 11px !important;

    color: #66788c;
}


/* 주관부서 */
.framework-department {
    font-size: 11px !important;

    color: #66788c;
}


/* 상태 */
.framework-status {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    background: #f3f5f8;

    font-size: 10px;
    font-weight: 600;

    color: #617286;

    white-space: nowrap;
}


/* =========================================================
   Actions
========================================================= */

.framework-manage-col {
    width: 220px;
}

.framework-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 3px;
}

.framework-action-btn {
    min-height: 26px;

    padding: 3px 7px;

    border-radius: 5px;

    font-size: 9.5px;

    line-height: 1.25;

    white-space: nowrap;
}

.framework-action-btn.details {
    border: 1px solid #d1dae5;

    background: #ffffff;

    color: #617286;
}

.framework-action-btn.edit {
    border: 1px solid #bdd9eb;

    background: #ffffff;

    color: var(--kosin-blue);
}

.framework-action-btn.deactivate {
    border: 1px solid #ead59b;

    background: #ffffff;

    color: #a97800;
}

.framework-action-btn.activate {
    border: 1px solid #b9dfca;

    background: #ffffff;

    color: #168653;
}

.framework-action-btn.delete {
    border: 1px solid #efc6cc;

    background: #ffffff;

    color: #cf4050;
}

.framework-action-btn.details:hover {
    background: #f3f6f9;
}

.framework-action-btn.edit:hover {
    background: #edf7fd;
}

.framework-action-btn.deactivate:hover {
    background: #fff8e5;
}

.framework-action-btn.activate:hover {
    background: #e8f7ef;
}

.framework-action-btn.delete:hover {
    background: #fdebed;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1000px) {

    .framework-search,
    .framework-type-filter,
    .framework-status-filter,
    .framework-active-filter {
        flex: 1 1 200px !important;

        max-width: none;
    }

    .framework-management-table {
        min-width: 900px;
    }

}

/* =========================================================
   COMMON TABLE ACTION BUTTON ALIGNMENT
   모든 관리화면 표 버튼 글자 중앙 정렬
========================================================= */

/* 관리페이지 표 안의 모든 버튼 / 링크버튼 */
.management-page table .btn,
.management-page table a.btn,
.management-page table button.btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    vertical-align: middle !important;

    line-height: 1 !important;

    text-align: center !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* 작은 관리버튼 높이 통일 */
.management-page table .btn-sm,
.framework-action-btn,
.results-mini-btn,
.target-edit-btn,
.input-toggle-btn,
.detail-action-btn,
.detail-delete-btn {
    min-height: 26px !important;
    height: 26px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;

    vertical-align: middle !important;
}


/* 버튼을 감싸는 form 자체도 중앙 정렬 */
.management-page table form.d-inline {
    display: inline-flex !important;

    align-items: center !important;

    vertical-align: middle !important;
}


/* 한 행에 여러 관리버튼이 있는 경우 */
.framework-actions,
.results-row-actions {
    align-items: center !important;
}

/* =========================================================
   FRAMEWORK KPI MANAGEMENT
========================================================= */

.framework-kpi-framework-filter {
    flex: 1 1 330px !important;
    max-width: 470px;
}


.framework-kpi-search {
    flex: 1 1 230px !important;
    max-width: 320px;
}


.framework-kpi-required-filter {
    flex: 0 0 125px !important;
}


.framework-kpi-active-filter {
    flex: 0 0 125px !important;
}


.framework-kpi-selected-framework {
    margin-top: 2px;

    font-size: 10.5px;
    font-weight: 600;

    color: var(--ir-muted);
}


/* =========================================================
   Table
========================================================= */

.framework-kpi-table {
    width: 100%;

    font-size: 11.5px;
}


.framework-kpi-table thead th {
    font-size: 10.5px !important;
}


.framework-kpi-table tbody td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;

    font-size: 11.5px !important;

    vertical-align: middle;
}


/* 표시순서 */

.framework-kpi-order {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 28px;

    padding: 3px 6px;

    border-radius: 5px;

    background: #f1f4f7;

    font-size: 10px;
    font-weight: 650;

    color: #66788c;
}


/* KPI명 */

.framework-kpi-name {
    min-width: 230px;

    font-size: 12px !important;
    font-weight: 650;

    color: var(--ir-text);
}


/* 담당부서 */

.framework-kpi-department {
    min-width: 130px;

    color: #66788c;
}


/* 가중치 */

.framework-kpi-weight {
    font-weight: 650;

    font-variant-numeric: tabular-nums;

    color: var(--ir-text);
}


/* =========================================================
   필수여부
========================================================= */

.framework-kpi-required {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 44px;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 650;

    white-space: nowrap;
}


.framework-kpi-required.required {
    background: #e7f4ff;

    color: #0d72b8;
}


.framework-kpi-required.optional {
    background: #f1f3f5;

    color: #7b8998;
}


/* =========================================================
   Action Button
========================================================= */

.framework-kpi-action-btn {
    min-width: 62px;
    height: 27px;

    padding: 0 8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 5px;

    font-size: 10px;

    line-height: 1;

    white-space: nowrap;
}


.framework-kpi-action-btn.deactivate {
    border: 1px solid #ead59b;

    background: #ffffff;

    color: #a97800;
}


.framework-kpi-action-btn.activate {
    border: 1px solid #b9dfca;

    background: #ffffff;

    color: #168653;
}


.framework-kpi-action-btn.deactivate:hover {
    background: #fff8e5;
}


.framework-kpi-action-btn.activate:hover {
    background: #e8f7ef;
}


@media (max-width: 1000px) {

    .framework-kpi-framework-filter,
    .framework-kpi-search,
    .framework-kpi-required-filter,
    .framework-kpi-active-filter {

        flex: 1 1 200px !important;

        max-width: none;
    }


    .framework-kpi-table {
        min-width: 850px;
    }

}

/* =========================================================
   FRAMEWORK CREATE / EDIT FORM
========================================================= */

.framework-form-page {
    max-width: 1180px;
}


/* 기본 2열 구조 */
.framework-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px 16px;
}


/* 관리설정 */
.framework-management-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 260px)
        minmax(260px, 1fr);

    gap: 16px;

    align-items: start;
}


/* 도움말 */
.framework-field-help {
    margin-top: 4px;

    font-size: 10.5px;

    line-height: 1.4;

    color: var(--ir-muted);
}


/* validation */
.framework-validation {
    display: block;

    margin-top: 3px;

    font-size: 10.5px;

    color: #cf4050;
}


/* 사용여부 */
.framework-active-box {
    min-height: 78px;

    padding: 9px 11px;

    border: 1px solid #e3eaf1;

    border-radius: 9px;

    background: #fafbfd;
}


.framework-active-label {
    margin-bottom: 7px;

    font-size: 11.5px;
    font-weight: 650;

    color: #506175;
}


.framework-switch {
    min-height: 27px;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 0;
}


.framework-switch .form-check-input {
    width: 2.2em;
    height: 1.15em;

    margin-top: 0;
}


.framework-switch .form-check-label {
    font-size: 12px;
    font-weight: 600;

    color: var(--ir-text);
}


/* 설명 */
.framework-description-field {
    margin-top: 14px;
}


.framework-description {
    min-height: 90px;

    font-size: 12.5px;

    resize: vertical;
}


/* =========================================================
   Bottom Submit
========================================================= */

.framework-submit-bar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 14px;

    padding: 11px 13px;

    border: 1px solid var(--ir-border);

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(35, 55, 80, .04);
}


.framework-submit-guide {
    font-size: 11px;

    color: var(--ir-muted);
}


.framework-submit-actions {
    display: flex;

    align-items: center;

    gap: 7px;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 760px) {

    .framework-form-grid,
    .framework-management-grid {
        grid-template-columns: 1fr;
    }


    .framework-submit-bar {
        align-items: flex-start;

        flex-direction: column;
    }


    .framework-submit-actions {
        width: 100%;

        justify-content: flex-end;
    }

}

/* =========================================================
   FRAMEWORK KPI CREATE
========================================================= */

.framework-kpi-create-summary {
    margin-bottom: 12px;

    padding: 10px 13px;

    border: 1px solid #dce7ef;

    border-left: 4px solid var(--kosin-blue);

    border-radius: 8px;

    background: #f8fbfd;
}


.framework-kpi-create-summary-label {
    margin-bottom: 3px;

    font-size: 10.5px;
    font-weight: 650;

    color: var(--ir-muted);
}


.framework-kpi-create-summary-value {
    font-size: 12.5px;
    font-weight: 700;

    color: var(--kosin-navy);
}


/* =========================================================
   대상 선택
========================================================= */

.framework-kpi-create-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 16px;
}


.framework-kpi-department-field {
    grid-column: 1 / -1;

    max-width: calc(50% - 8px);
}


/* =========================================================
   관리설정
========================================================= */

.framework-kpi-setting-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 16px;
}


.framework-kpi-switch-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 14px;
}


/* =========================================================
   Notice
========================================================= */

.framework-kpi-create-notice {
    margin-top: 12px;

    padding: 9px 12px;

    border: 1px solid #dbe7f0;

    border-radius: 8px;

    background: #f8fbfd;

    font-size: 11px;

    line-height: 1.55;

    color: #607286;
}


.framework-kpi-create-notice strong {
    margin-right: 5px;

    color: var(--kosin-navy);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 760px) {

    .framework-kpi-create-grid,
    .framework-kpi-setting-grid,
    .framework-kpi-switch-grid {

        grid-template-columns: 1fr;
    }


    .framework-kpi-department-field {

        grid-column: auto;

        max-width: none;
    }

}

/* =========================================================
   KPI CREATE
========================================================= */

.kpi-create-page {
    max-width: 1180px;
}


/* 2열 입력 구조 */
.kpi-create-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 16px;
}


/* 도움말 */
.kpi-field-help {
    margin-top: 4px;

    font-size: 10.5px;

    line-height: 1.45;

    color: var(--ir-muted);
}


/* 필수 표시 */
.create-required {
    margin-left: 2px;

    color: #d9485f;
}


/* 넓은 항목 */
.kpi-wide-field {
    margin-top: 14px;
}


/* 산식 */
.kpi-formula-textarea {
    min-height: 76px;

    font-size: 12.5px;

    line-height: 1.55;

    resize: vertical;
}


/* 설명 */
.kpi-description-textarea {
    min-height: 92px;

    font-size: 12.5px;

    line-height: 1.6;

    resize: vertical;
}


/* =========================================================
   Active Status
========================================================= */

.kpi-active-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 14px;

    padding: 10px 12px;

    border: 1px solid #e3eaf1;

    border-radius: 9px;

    background: #fafbfd;
}


.kpi-active-title {
    margin-bottom: 2px;

    font-size: 11.5px;
    font-weight: 650;

    color: var(--ir-text);
}


.kpi-active-box .framework-switch {
    flex: 0 0 auto;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 760px) {

    .kpi-create-grid {
        grid-template-columns: 1fr;
    }


    .kpi-active-box {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* =========================================================
   KPI INPUT ITEM CREATE
========================================================= */

.input-create-page {
    max-width: 1180px;
}


/* 선택 KPI 요약 */
.input-create-summary {
    margin-bottom: 12px;

    padding: 10px 13px;

    border: 1px solid #dce7ef;

    border-left: 4px solid var(--kosin-blue);

    border-radius: 8px;

    background: #f8fbfd;
}


.input-create-summary-label {
    margin-bottom: 3px;

    font-size: 10.5px;
    font-weight: 650;

    color: var(--ir-muted);
}


.input-create-summary-value {
    font-size: 12.5px;
    font-weight: 700;

    color: var(--kosin-navy);
}


/* 기본정보 */
.input-create-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 16px;
}


/* 표시순서 + 도움말 */
.input-create-order-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 260px)
        minmax(0, 1fr);

    gap: 14px 16px;
}


/* 필수/사용 */
.input-create-switch-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 14px;
}


/* 도움말 */
.input-field-help {
    margin-top: 4px;

    font-size: 10.5px;

    line-height: 1.45;

    color: var(--ir-muted);
}


/* 입력코드 안내 */
.input-code-notice {
    margin-top: 12px;

    padding: 10px 12px;

    border: 1px solid #dbe7f0;

    border-radius: 8px;

    background: #f8fbfd;

    font-size: 11px;

    line-height: 1.55;

    color: #607286;
}


.input-code-notice-title {
    margin-bottom: 2px;

    font-weight: 700;

    color: var(--kosin-navy);
}


@media (max-width: 760px) {

    .input-create-grid,
    .input-create-order-grid,
    .input-create-switch-grid {

        grid-template-columns: 1fr;
    }

}

/* =========================================================
   KPI TARGET CREATE
========================================================= */

.target-create-page {
    max-width: 1180px;
}


/* 현재 선택 KPI */
.target-create-summary {
    margin-bottom: 12px;

    padding: 10px 13px;

    border: 1px solid #dce7ef;

    border-left: 4px solid var(--kosin-blue);

    border-radius: 8px;

    background: #f8fbfd;
}


.target-create-summary-label {
    margin-bottom: 3px;

    font-size: 10.5px;
    font-weight: 650;

    color: var(--ir-muted);
}


.target-create-summary-value {
    font-size: 12.5px;
    font-weight: 700;

    color: var(--kosin-navy);
}


/* =========================================================
   Form Layout
========================================================= */

.target-create-kpi-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 1fr);

    gap: 14px 16px;
}


.target-create-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 16px;
}


.target-field-help {
    margin-top: 4px;

    font-size: 10.5px;

    line-height: 1.45;

    color: var(--ir-muted);
}


/* 목표 설정근거 */
.target-basis-textarea {
    min-height: 90px;

    font-size: 12.5px;

    line-height: 1.6;

    resize: vertical;
}


/* =========================================================
   Active
========================================================= */

.target-active-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 14px;

    padding: 10px 12px;

    border: 1px solid #e3eaf1;

    border-radius: 9px;

    background: #fafbfd;
}


.target-active-title {
    margin-bottom: 2px;

    font-size: 11.5px;
    font-weight: 650;

    color: var(--ir-text);
}


/* =========================================================
   Duplicate Notice
========================================================= */

.target-create-notice {
    margin-top: 12px;

    padding: 10px 12px;

    border: 1px solid #dbe7f0;

    border-radius: 8px;

    background: #f8fbfd;

    font-size: 11px;

    line-height: 1.55;

    color: #607286;
}


.target-create-notice-title {
    margin-bottom: 2px;

    font-weight: 700;

    color: var(--kosin-navy);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 760px) {

    .target-create-kpi-grid,
    .target-create-grid {

        grid-template-columns: 1fr;
    }


    .target-active-box {

        align-items: flex-start;

        flex-direction: column;
    }

}

/* =========================================================
   KPI RESULT EXCEL IMPORT
   ========================================================= */

.import-page {
    padding-bottom: 32px;
}

.import-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.import-step-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 92px;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid var(--ir-border);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(24, 55, 84, 0.04);
}

.import-step-card.active {
    border-color: rgba(13, 114, 184, 0.42);
    background: rgba(13, 114, 184, 0.035);
}

.import-step-card.ready {
    border-color: rgba(31, 157, 96, 0.42);
    background: rgba(31, 157, 96, 0.035);
}

.import-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eaf0f6;
    color: #64788b;
    font-size: 12px;
    font-weight: 800;
}

.import-step-card.active .import-step-number {
    background: var(--kosin-blue);
    color: #ffffff;
}

.import-step-card.ready .import-step-number {
    background: #1f9d60;
    color: #ffffff;
}

.import-step-title {
    margin-bottom: 5px;
    color: var(--ir-text);
    font-size: 13px;
    font-weight: 700;
}

.import-step-text {
    color: var(--ir-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.import-upload-card {
    margin-bottom: 18px;
}

.import-section-description {
    margin-top: 4px;
    color: var(--ir-muted);
    font-size: 11.5px;
}

.import-file-rule {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 14px;
    background: #eef4f9;
    color: #52697e;
    font-size: 10.5px;
    font-weight: 700;
}

.import-upload-body {
    padding: 18px 20px 20px;
}

.import-validation-summary {
    margin-bottom: 14px;
    color: #c83e4d;
    font-size: 12px;
}

.import-validation-summary:empty {
    display: none;
}

.import-validation-summary ul {
    margin-bottom: 0;
    padding-left: 18px;
}

.import-upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.import-file-field .form-label {
    margin-bottom: 6px;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.import-file-field .form-control {
    min-height: 38px;
    font-size: 12px;
}

.import-field-help {
    margin-top: 6px;
    color: var(--ir-muted);
    font-size: 10.5px;
}

.import-upload-action {
    display: flex;
    align-items: flex-end;
}

.import-validate-btn {
    min-width: 126px;
    min-height: 38px;
    white-space: nowrap;
}

.import-guide-box {
    margin-top: 17px;
    padding: 14px 16px;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    background: #f8fafc;
}

.import-guide-title {
    margin-bottom: 8px;
    color: var(--ir-text);
    font-size: 11.5px;
    font-weight: 700;
}

.import-guide-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    color: #687b8d;
    font-size: 10.5px;
    line-height: 1.55;
}

.import-result-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.import-summary-card {
    min-height: 83px;
    padding: 15px 17px;
    border: 1px solid var(--ir-border);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(24, 55, 84, 0.04);
}

.import-summary-card.valid {
    border-left: 3px solid #1f9d60;
}

.import-summary-card.error {
    border-left: 3px solid #dc4c5a;
}

.import-summary-card.status {
    border-left: 3px solid var(--kosin-blue);
}

.import-summary-label {
    margin-bottom: 7px;
    color: var(--ir-muted);
    font-size: 10.5px;
    font-weight: 600;
}

.import-summary-value {
    color: var(--ir-text);
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
}

.import-summary-value span {
    margin-left: 3px;
    color: var(--ir-muted);
    font-size: 10.5px;
    font-weight: 600;
}

.import-summary-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 700;
}

.import-summary-status.success {
    background: rgba(31, 157, 96, 0.10);
    color: #187b4c;
}

.import-summary-status.danger {
    background: rgba(220, 76, 90, 0.10);
    color: #bc3946;
}

.import-result-card {
    overflow: hidden;
}

.import-table-wrap {
    max-height: 520px;
}

.import-result-table {
    margin-bottom: 0;
    min-width: 1180px;
}

.import-result-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
    background: #f5f8fb;
}

.import-result-table td {
    vertical-align: middle;
}

.import-error-row td {
    background: rgba(220, 76, 90, 0.035) !important;
}

.import-main-text {
    color: var(--ir-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.import-sub-text {
    margin-top: 2px;
    color: var(--ir-muted);
    font-size: 9.5px;
    line-height: 1.3;
}

.import-variant {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: #eef3f8;
    color: #536a7f;
    font-size: 9.5px;
    font-weight: 700;
}

.import-value {
    color: var(--ir-text);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.import-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.import-status-pill.success {
    background: rgba(31, 157, 96, 0.11);
    color: #187b4c;
}

.import-status-pill.danger {
    background: rgba(220, 76, 90, 0.11);
    color: #bd3e4b;
}

.import-error-message {
    color: #c23d4a;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
}

.import-no-error {
    color: #a0acb8;
}

.import-commit-area {
    padding: 17px 20px;
    border-top: 1px solid var(--ir-border);
    background: #fbfcfe;
}

.import-commit-success {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(31, 157, 96, 0.22);
    border-radius: 10px;
    background: rgba(31, 157, 96, 0.045);
}

.import-commit-title {
    margin-bottom: 4px;
    color: #187b4c;
    font-size: 12px;
    font-weight: 700;
}

.import-commit-text {
    color: #66798b;
    font-size: 10.5px;
    line-height: 1.5;
}

.import-commit-btn {
    min-width: 158px;
    white-space: nowrap;
}

.import-commit-error {
    padding: 14px 16px;
    border: 1px solid rgba(220, 76, 90, 0.20);
    border-radius: 10px;
    background: rgba(220, 76, 90, 0.04);
}

.import-commit-error-title {
    margin-bottom: 4px;
    color: #bd3e4b;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 992px) {

    .import-step-grid,
    .import-result-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-upload-grid {
        grid-template-columns: 1fr;
    }

    .import-upload-action {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {

    .import-step-grid,
    .import-result-summary {
        grid-template-columns: 1fr;
    }

    .import-commit-success {
        align-items: flex-start;
        flex-direction: column;
    }

    .import-commit-btn,
    .import-validate-btn {
        width: 100%;
    }
}

/* =========================================================
   DEPARTMENT MANAGEMENT
   ========================================================= */

.department-page {
    padding-bottom: 32px;
}

.department-filter {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 180px auto;
    align-items: end;
    gap: 14px;
}

.department-filter .form-label {
    margin-bottom: 6px;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.department-filter .form-control,
.department-filter .form-select {
    min-height: 38px;
    font-size: 12px;
}

.department-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.department-filter-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 12px;
}

.department-table-description {
    margin-top: 4px;
    color: var(--ir-muted);
    font-size: 11.5px;
}

.department-table {
    margin-bottom: 0;
}

.department-table thead th {
    white-space: nowrap;
}

.department-table tbody td {
    font-size: 12px;
    vertical-align: middle;
}

.department-code {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 6px;
    background: #eef4f9;
    color: #365c78;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.department-name {
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.department-parent {
    color: #607386;
    font-size: 11.5px;
}

.department-empty-value {
    color: #a4afba;
}

.department-date {
    color: #728294;
    font-size: 11px !important;
    white-space: nowrap;
}

.department-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.department-action-btn,
.department-toggle-btn {
    min-height: 27px !important;
    height: 27px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 9px !important;
    line-height: 1 !important;
    font-size: 10.5px !important;
}

.department-actions form {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 900px) {

    .department-filter {
        grid-template-columns: 1fr 180px;
    }

    .department-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {

    .department-filter {
        grid-template-columns: 1fr;
    }

    .department-filter-actions {
        grid-column: auto;
    }

    .department-filter-actions .btn {
        flex: 1;
    }
}

/* =========================================================
   DEPARTMENT CREATE / EDIT FORM
   ========================================================= */

.department-form-page {
    padding-bottom: 32px;
}

.department-form-card {
    margin-bottom: 16px;
    overflow: hidden;
}

.department-form-section-description {
    margin-top: 4px;
    color: var(--ir-muted);
    font-size: 11.5px;
}

.department-form-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    border-radius: 13px;
    background: #eef4f9;
    color: #537087;
    font-size: 10px;
    font-weight: 800;
}

.department-form-body {
    padding: 20px;
}

.department-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.department-form-field .form-label {
    margin-bottom: 6px;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.department-form-field .form-control,
.department-form-field .form-select {
    min-height: 39px;
    font-size: 12px;
}

.department-form-field .form-control::placeholder {
    color: #a4afba;
}

.department-field-help {
    margin-top: 6px;
    color: var(--ir-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.department-field-validation {
    display: block;
    margin-top: 4px;
    color: #c83e4d;
    font-size: 10.5px;
}

.department-form-validation {
    margin-bottom: 14px;
    color: #c83e4d;
    font-size: 11.5px;
}

.department-form-validation:empty {
    display: none;
}

.department-form-validation ul {
    margin-bottom: 0;
}

.department-active-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 68px;
    padding: 14px 16px;
    border: 1px solid #e2e9f1;
    border-radius: 9px;
    background: #f8fafc;
}

.department-active-title {
    margin-bottom: 3px;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.department-active-switch {
    flex: 0 0 auto;
    margin: 0;
}

.department-active-switch .form-check-input {
    cursor: pointer;
}

.department-active-switch .form-check-label {
    margin-left: 4px;
    color: #566a7d;
    font-size: 11px;
    font-weight: 600;
}

.department-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 15px 18px;
    border: 1px solid var(--ir-border);
    border-radius: 10px;
    background: #ffffff;
}

.department-submit-guide {
    color: var(--ir-muted);
    font-size: 10.5px;
}

.department-submit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.department-submit-actions .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 11.5px;
}

@media (max-width: 768px) {

    .department-form-grid {
        grid-template-columns: 1fr;
    }

    .department-active-box {
        align-items: flex-start;
    }

    .department-submit-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .department-submit-actions {
        width: 100%;
    }

    .department-submit-actions .btn {
        flex: 1;
    }
}

/* =========================================================
   DEPARTMENT DETAILS
   ========================================================= */

.department-detail-page {
    padding-bottom: 32px;
}

.department-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.department-detail-header-actions .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 11.5px;
}

.department-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border: 1px solid var(--ir-border);
    border-radius: 11px;
    background: #ffffff;
}

.department-detail-summary-label {
    margin-bottom: 4px;
    color: var(--kosin-blue);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.department-detail-summary-name {
    margin-bottom: 8px;
    color: var(--ir-text);
    font-size: 18px;
    font-weight: 800;
}

.department-detail-summary-sub {
    display: flex;
    align-items: center;
    gap: 9px;
}

.department-detail-summary-meta {
    min-width: 130px;
    padding-left: 22px;
    border-left: 1px solid var(--ir-border);
}

.department-detail-meta-label {
    margin-bottom: 4px;
    color: var(--ir-muted);
    font-size: 10.5px;
    font-weight: 600;
}

.department-detail-meta-value {
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.department-detail-card {
    margin-bottom: 16px;
    overflow: hidden;
}

.department-detail-body {
    padding: 20px;
}

.department-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.department-detail-item {
    min-height: 68px;
    padding: 13px 15px;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    background: #fafbfd;
}

.department-detail-label {
    margin-bottom: 7px;
    color: var(--ir-muted);
    font-size: 10.5px;
    font-weight: 700;
}

.department-detail-value {
    color: var(--ir-text);
    font-size: 12px;
    line-height: 1.5;
}

.department-detail-value-strong {
    font-weight: 700;
}

.department-detail-empty {
    color: #9aa6b2;
}

@media (max-width: 768px) {

    .department-detail-grid {
        grid-template-columns: 1fr;
    }

    .department-detail-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .department-detail-summary-meta {
        width: 100%;
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid var(--ir-border);
        border-left: 0;
    }
}

@media (max-width: 576px) {

    .department-detail-header-actions {
        width: 100%;
    }

    .department-detail-header-actions .btn {
        flex: 1;
    }
}

/* =========================================================
   IR USER MANAGEMENT
   ========================================================= */

.iruser-page {
    padding-bottom: 32px;
}

.iruser-filter {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.4fr)
        minmax(130px, 0.8fr)
        minmax(130px, 0.8fr)
        120px
        auto;
    align-items: end;
    gap: 12px;
}

.iruser-filter .form-label {
    margin-bottom: 6px;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.iruser-filter .form-control,
.iruser-filter .form-select {
    min-height: 38px;
    font-size: 12px;
}

.iruser-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.iruser-filter-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 11.5px;
}

.iruser-table-description {
    margin-top: 4px;
    color: var(--ir-muted);
    font-size: 11.5px;
}

.iruser-table {
    margin-bottom: 0;
}

.iruser-table tbody td {
    color: var(--ir-text);
    font-size: 12px;
    vertical-align: middle;
}

.iruser-id {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 6px;
    background: #eef4f9;
    color: #365c78;
    font-size: 11px;
    font-weight: 700;
}

.iruser-name {
    font-size: 12px;
    font-weight: 700;
}

.iruser-department {
    color: #53697d;
}

.iruser-empty {
    color: #a0abb6;
}

.iruser-role-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.iruser-role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid #d7e5f0;
    border-radius: 12px;
    background: #f1f7fb;
    color: #34627f;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.iruser-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.iruser-actions form {
    display: inline-flex;
    align-items: center;
}

.iruser-action-btn {
    min-height: 27px !important;
    height: 27px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 9px !important;
    line-height: 1 !important;
    font-size: 10.5px !important;
    white-space: nowrap;
}

@media (max-width: 1100px) {

    .iruser-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iruser-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {

    .iruser-filter {
        grid-template-columns: 1fr;
    }

    .iruser-filter-actions {
        grid-column: auto;
    }

    .iruser-filter-actions .btn {
        flex: 1;
    }
}

/* =========================================================
   IR USER FORM
   ========================================================= */

.iruser-form-page {
    max-width: 1180px;
    padding-bottom: 40px;
}

.iruser-validation-summary:empty {
    display: none;
}

.iruser-validation-summary {
    margin-bottom: 16px;
    font-size: 12px;
}

.iruser-form-card {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--ir-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(30, 60, 90, 0.04);
}

.iruser-form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ir-border);
    background: #fafcfe;
}

.iruser-form-card-title {
    color: var(--ir-text);
    font-size: 14px;
    font-weight: 700;
}

.iruser-form-card-description {
    margin-top: 3px;
    color: var(--ir-muted);
    font-size: 11.5px;
}

.iruser-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    border-radius: 13px;
    background: #eaf4fb;
    color: var(--kosin-blue);
    font-size: 10.5px;
    font-weight: 800;
}

.iruser-form-card-body {
    padding: 20px;
}

.iruser-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

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

.iruser-form-field .form-label {
    margin-bottom: 6px;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.iruser-form-field .form-control,
.iruser-form-field .form-select {
    min-height: 40px;
    font-size: 12.5px;
}

.iruser-required {
    margin-left: 2px;
    color: #dc4c5a;
}

.iruser-field-help {
    margin-top: 5px;
    color: var(--ir-muted);
    font-size: 10.5px;
}

.iruser-form-field .text-danger {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
}

.iruser-role-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.iruser-role-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 82px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--ir-border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease,
                background-color .15s ease;
}

.iruser-role-option:hover {
    border-color: #b7d5e8;
    background: #f8fbfd;
}

.iruser-role-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.iruser-role-option-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.iruser-role-option-name {
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.iruser-role-option-code {
    margin-top: 2px;
    color: var(--kosin-blue);
    font-size: 10px;
    font-weight: 700;
}

.iruser-role-option-description {
    margin-top: 5px;
    color: var(--ir-muted);
    font-size: 10.5px;
    line-height: 1.45;
}

.iruser-role-error {
    margin-top: 9px;
    font-size: 11px;
}

.iruser-active-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--ir-border);
    border-radius: 9px;
    background: #fafcfe;
    cursor: pointer;
}

.iruser-active-title {
    display: block;
    color: var(--ir-text);
    font-size: 12px;
    font-weight: 700;
}

.iruser-active-description {
    display: block;
    margin-top: 3px;
    color: var(--ir-muted);
    font-size: 10.5px;
}

.iruser-active-setting .form-switch {
    padding-left: 2.5em;
}

.iruser-active-setting .form-check-input {
    cursor: pointer;
}

.iruser-form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--ir-border);
    border-radius: 12px;
    background: #fff;
}

.iruser-submit-note {
    color: var(--ir-muted);
    font-size: 11px;
}

.iruser-submit-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.iruser-submit-actions .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 11.5px;
}

@media (max-width: 800px) {

    .iruser-form-grid,
    .iruser-role-select-grid {
        grid-template-columns: 1fr;
    }

    .iruser-form-field-wide {
        grid-column: auto;
    }

    .iruser-form-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .iruser-submit-actions {
        justify-content: flex-end;
    }
}

/* =========================================================
   IR USER EDIT SUMMARY
   ========================================================= */

.iruser-edit-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 1px solid var(--ir-border);
    border-radius: 12px;
    background: #fff;
}

.iruser-edit-summary-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.iruser-edit-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #eaf4fb;
    color: var(--kosin-blue);
    font-size: 14px;
    font-weight: 800;
}

.iruser-edit-name {
    color: var(--ir-text);
    font-size: 13px;
    font-weight: 700;
}

.iruser-edit-id {
    margin-top: 3px;
    color: var(--ir-muted);
    font-size: 10.5px;
}

.iruser-edit-status {
    flex: 0 0 auto;
}

@media (max-width: 650px) {

    .iruser-edit-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   KOSIN Insight - Final Dashboard Design
   ========================================================= */

/* 메인 대시보드 전체 배경 */
.dashboard-compact {
    padding-top: 2px;
}


/* ---------------------------------------------------------
   상단 Welcome + Filter
--------------------------------------------------------- */

.dashboard-compact .dashboard-welcome {
    position: relative;

    padding:
        17px 20px !important;

    margin-bottom:
        12px !important;

    border:
        1px solid #dfe8f1;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 65%,
            #eef7fd 100%
        );

    box-shadow:
        0 5px 18px
        rgba(23, 72, 110, 0.055);

    overflow: hidden;
}


/* 좌측 상단 파란 포인트 */
.dashboard-compact .dashboard-welcome::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            #0f4b7d,
            #0d72b8,
            #1bb5d8
        );
}


/* KOSIN INSIGHT */
.dashboard-compact .dashboard-eyebrow {
    margin-bottom:
        3px !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.7px !important;

    color:
        #0d72b8 !important;
}


/* 통합 성과 대시보드 */
.dashboard-compact .dashboard-title {
    margin:
        0 0 3px !important;

    font-size:
        23px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -0.7px !important;

    color:
        #173e5f !important;
}


.dashboard-compact .dashboard-description {
    margin:
        0 !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;

    color:
        #7d8d9d !important;
}


/* ---------------------------------------------------------
   조회조건
--------------------------------------------------------- */

.dashboard-compact .dashboard-filter {
    gap:
        7px !important;

    align-items:
        flex-end;
}


.dashboard-compact .dashboard-filter-item label {
    margin:
        0 0 3px 2px !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    color:
        #728699 !important;
}


.dashboard-compact .dashboard-filter .form-control,
.dashboard-compact .dashboard-filter .form-select {
    min-height:
        36px !important;

    height:
        36px;

    padding:
        5px 11px !important;

    border:
        1px solid #d7e2ec;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #344e65;

    font-size:
        11px;

    box-shadow:
        none;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}


.dashboard-compact .dashboard-filter .form-control:focus,
.dashboard-compact .dashboard-filter .form-select:focus {
    border-color:
        #86bce0;

    box-shadow:
        0 0 0 3px
        rgba(13,114,184,0.08);
}


/* 조회 버튼 */

.dashboard-compact .dashboard-filter-actions .btn {
    min-height:
        36px !important;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    padding:
        0 14px !important;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        700;
}


.dashboard-compact .dashboard-filter-actions .btn-primary {
    border-color:
        #0d72b8;

    background:
        #0d72b8;

    box-shadow:
        0 3px 8px
        rgba(13,114,184,0.16);
}


.dashboard-compact .dashboard-filter-actions .btn-primary:hover {
    border-color:
        #0b6099;

    background:
        #0b6099;
}


.dashboard-compact .dashboard-filter-actions .btn-light {
    border-color:
        #dce5ed !important;

    background:
        #ffffff;

    color:
        #65798b;
}


/* ---------------------------------------------------------
   KPI 요약카드 공통
--------------------------------------------------------- */

.dashboard-compact .dashboard-metric {
    min-height:
        102px !important;

    padding:
        12px 14px !important;

    border:
        1px solid #e0e8f0;

    border-radius:
        13px;

    background:
        #ffffff;

    box-shadow:
        0 4px 14px
        rgba(31, 68, 102, 0.045);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;

    overflow:
        hidden;
}


.dashboard-compact .dashboard-metric:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 20px
        rgba(31,68,102,0.075);
}


/* 상단 상태 선 */
.dashboard-compact .dashboard-metric::before {
    height:
        3px;

    background:
        var(--metric-color);
}


/* 카드 내부 */
.dashboard-compact .metric-top {
    margin-bottom:
        4px !important;
}


.dashboard-compact .metric-label {
    margin-bottom:
        1px !important;

    font-size:
        10px !important;

    font-weight:
        700;

    color:
        #718395;
}


.dashboard-compact .metric-value {
    line-height:
        1.05 !important;

    font-size:
        27px !important;

    font-weight:
        800 !important;

    letter-spacing:
        -0.7px;

    color:
        #173e5f;
}


.dashboard-compact .metric-foot {
    font-size:
        9px !important;

    color:
        #99a5b1;
}


/* KPI 아이콘 */
.dashboard-compact .metric-icon {
    width:
        36px !important;

    height:
        36px !important;

    border-radius:
        10px !important;

    font-size:
        15px !important;
}


/* ---------------------------------------------------------
   KOSIN Insight 카드 색상 체계
--------------------------------------------------------- */

/* 기본 성과 */
.dashboard-compact .metric-total {
    --metric-color: #0d72b8;
    --metric-bg: #edf6fc;
}


/* 정상 */
.dashboard-compact .metric-success {
    --metric-color: #249766;
    --metric-bg: #edf8f2;
}


/* 주의 */
.dashboard-compact .metric-warning {
    --metric-color: #d89918;
    --metric-bg: #fff7e6;
}


/* 위험 */
.dashboard-compact .metric-danger {
    --metric-color: #d95361;
    --metric-bg: #fdefF1;
}


/* IR 승인 - 기존 보라색 제거, 학교 블루 계열 */
.dashboard-compact .metric-approved {
    --metric-color: #416f9d;
    --metric-bg: #edf3f8;
}


/* 평균 달성률 - 기존 청록색을 고신 블루 계열로 */
.dashboard-compact .metric-rate {
    --metric-color: #1785b8;
    --metric-bg: #edf7fb;
}


/* =========================================================
   KOSIN Insight - Analysis Cards v1
   Append once after the Final Dashboard Design block.
   ========================================================= */

/* Four analysis cards */
body .dashboard-compact .analysis-card {
    border: 1px solid #dfe8f1 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(23, 62, 95, 0.05) !important;
}

/* Card headers: existing and final header classes */
body .dashboard-compact .analysis-card-header,
body .dashboard-compact .final-analysis-header {
    padding: 14px 18px !important;
    gap: 12px !important;
    border-bottom: 1px solid #e6edf4 !important;
    border-radius: 14px 14px 0 0 !important;
    background: linear-gradient(110deg, #f4f9fd, #ffffff) !important;
}

body .dashboard-compact .analysis-card .dashboard-eyebrow,
body .dashboard-compact .final-analysis-header .dashboard-eyebrow {
    margin: 0 0 4px !important;
    color: #0d72b8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
}

body .dashboard-compact .analysis-card .analysis-card-title,
body .dashboard-compact .final-analysis-header .analysis-card-title {
    margin: 0 !important;
    color: #173e5f !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.4px !important;
}

body .dashboard-compact .analysis-card-description {
    margin-top: 5px !important;
    color: #657b8f !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body .dashboard-compact .analysis-year-badge {
    padding: 4px 9px !important;
    border: 1px solid #d8e6f1 !important;
    border-radius: 7px !important;
    background: #f2f8fd !important;
    color: #416f9d !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

body .dashboard-compact .analysis-card-body {
    padding: 18px !important;
    min-width: 0;
}

/* Performance status summary */
body .dashboard-compact .status-summary-item {
    padding: 9px 11px !important;
    border: 1px solid #e5edf4 !important;
    border-radius: 10px !important;
    background: #f8fbfe !important;
}

body .dashboard-compact .status-summary-label {
    color: #657b8f !important;
    font-size: 11px !important;
}

body .dashboard-compact .status-summary-value {
    color: #173e5f !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
}

/* Approval panel */
body .dashboard-compact .approval-panel {
    padding: 22px 18px !important;
}

body .dashboard-compact .approval-rate-label {
    color: #657b8f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

body .dashboard-compact .approval-rate-value {
    color: #0f4b7d !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
}

body .dashboard-compact .approval-rate-value span {
    margin-left: 3px;
    color: #657b8f !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

body .dashboard-compact .approval-progress {
    height: 8px !important;
    border-radius: 999px !important;
    background: #eaf1f7 !important;
    overflow: hidden;
}

body .dashboard-compact .approval-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #416f9d, #0d72b8) !important;
}

body .dashboard-compact .approval-count-label {
    color: #657b8f !important;
    font-size: 11px !important;
}

body .dashboard-compact .approval-count-item strong {
    color: #173e5f !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
}

/* KPI trend filter */
body .dashboard-compact .analysis-card-body .form-select {
    min-height: 36px;
    padding: 6px 34px 6px 10px;
    border-color: #d7e2ec !important;
    border-radius: 9px !important;
    background-color: #ffffff !important;
    color: #344e65 !important;
    font-size: 12px;
}

body .dashboard-compact .analysis-card-body .btn {
    min-height: 36px;
    border-radius: 9px !important;
    font-size: 12px;
    font-weight: 700;
}

body .dashboard-compact .analysis-card-body .btn-primary {
    border-color: #0d72b8 !important;
    background-color: #0d72b8 !important;
}

body .dashboard-compact .analysis-card-body .btn-primary:hover {
    border-color: #0b6099 !important;
    background-color: #0b6099 !important;
}

body .dashboard-compact .analysis-card-body .form-select:focus,
body .dashboard-compact .analysis-card-body .btn:focus-visible {
    outline: 2px solid #0d72b8;
    outline-offset: 2px;
}

/* Narrow screens */
@media (max-width: 650px) {
    body .dashboard-compact .analysis-card-header,
    body .dashboard-compact .final-analysis-header {
        padding: 12px 14px !important;
    }

    body .dashboard-compact .analysis-card-body,
    body .dashboard-compact .approval-panel {
        padding: 14px !important;
    }

    body .dashboard-compact .analysis-card .analysis-card-title,
    body .dashboard-compact .final-analysis-header .analysis-card-title {
        font-size: 16px !important;
    }
}

/* End: KOSIN Insight - Analysis Cards v1 */



/* =========================================================
   KOSIN Insight - KPI Details and Results v1
   Scoped to the dashboard. Replace this block for later edits.
   ========================================================= */

/* Core KPI section */
body .dashboard-compact .kpi-executive-section {
    padding: 18px !important;
    border: 1px solid #dfe8f1 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(23, 62, 95, 0.05) !important;
}

body .dashboard-compact .kpi-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e6edf4;
}

body .dashboard-compact .kpi-section-title {
    margin: 0 0 4px !important;
    color: #173e5f !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

body .dashboard-compact .kpi-section-description {
    color: #657b8f !important;
    font-size: 12px !important;
    line-height: 1.5;
}

body .dashboard-compact .kpi-section-year {
    flex-shrink: 0;
    padding: 5px 9px !important;
    border: 1px solid #d8e6f1;
    border-radius: 8px;
    background: #f2f8fd;
    color: #416f9d;
    font-size: 11px !important;
    font-weight: 700;
}

body .dashboard-compact .kpi-executive-section > .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

/* Flexible cards keep long labels and footers in normal flow. */
body .dashboard-compact .kpi-exec-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    min-height: 236px !important;
    height: 100%;
    padding: 14px !important;
    border: 1px solid #e0e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(23, 62, 95, 0.035) !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body .dashboard-compact .kpi-exec-card:hover {
    transform: none !important;
    border-color: #b9d5e9 !important;
    box-shadow: 0 5px 16px rgba(23, 62, 95, 0.075) !important;
}

body .dashboard-compact .kpi-exec-card.status-normal {
    --kpi-color: #249766;
    --kpi-soft: #edf8f2;
    --kpi-ink: #1b754f;
}

body .dashboard-compact .kpi-exec-card.status-caution {
    --kpi-color: #d89918;
    --kpi-soft: #fff7e6;
    --kpi-ink: #906000;
}

body .dashboard-compact .kpi-exec-card.status-danger {
    --kpi-color: #d95361;
    --kpi-soft: #fdeff1;
    --kpi-ink: #b03645;
}

body .dashboard-compact .kpi-exec-card.status-unset {
    --kpi-color: #8997a7;
    --kpi-soft: #f0f3f6;
    --kpi-ink: #5f7184;
}

body .dashboard-compact .kpi-card-top {
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px !important;
}

body .dashboard-compact .kpi-code {
    min-height: 23px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #edf6fc;
    color: #0d72b8;
    font-size: 11px;
    font-weight: 800;
}

body .dashboard-compact .kpi-status {
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--kpi-soft);
    color: var(--kpi-ink);
    font-size: 11px;
    font-weight: 700;
}

body .dashboard-compact .kpi-card-name {
    min-height: 42px !important;
    margin: 0 0 7px !important;
    color: #173e5f !important;
    font-size: 15px !important;
    font-weight: 750;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
}

body .dashboard-compact .kpi-value-grid {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 12px !important;
    padding: 10px 8px !important;
    border: 1px solid #eaf0f5;
    border-radius: 9px;
    background: #f7fafd;
}

body .dashboard-compact .kpi-value-item {
    min-width: 0;
    padding: 0 !important;
}

body .dashboard-compact .kpi-value-label {
    margin-bottom: 4px !important;
    color: #657b8f;
    font-size: 11px;
}

body .dashboard-compact .kpi-value-number {
    color: #173e5f;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
}

body .dashboard-compact .kpi-value-unit {
    display: block;
    margin: 3px 0 0;
    color: #657b8f;
    font-size: 10px;
    font-weight: 500;
}

body .dashboard-compact .kpi-value-divider {
    height: 34px;
    background: #dce6ef;
}

body .dashboard-compact .kpi-achievement {
    margin: 0 0 12px !important;
}

body .dashboard-compact .kpi-achievement-head {
    gap: 8px;
    margin-bottom: 6px !important;
    color: #657b8f;
    font-size: 11px;
}

body .dashboard-compact .kpi-achievement-head strong {
    color: var(--kpi-ink);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

body .dashboard-compact .kpi-progress {
    height: 6px !important;
    margin-bottom: 0;
    background: #edf2f6;
    border-radius: 999px;
}

body .dashboard-compact .kpi-progress-bar {
    border-radius: inherit;
    background: var(--kpi-color);
}

body .dashboard-compact .kpi-card-footer {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px !important;
    margin-top: auto !important;
    padding-top: 9px !important;
    border-top: 1px solid #eaf0f5;
}

body .dashboard-compact .kpi-workflow,
body .dashboard-compact .kpi-detail-disabled {
    color: #657b8f;
    font-size: 11px;
    line-height: 1.4;
}

body .dashboard-compact .kpi-detail-link {
    min-height: 26px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #edf6fc;
    color: #0d72b8;
    font-size: 11px;
    font-weight: 700;
}

body .dashboard-compact .kpi-detail-link:hover {
    background: #dfeffc;
    color: #0f4b7d;
}

body .dashboard-compact .kpi-detail-link:focus-visible {
    outline: 2px solid #0d72b8;
    outline-offset: 2px;
}

/* Annual KPI results */
body .dashboard-compact .kpi-results-card {
    border: 1px solid #dfe8f1 !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 16px rgba(23, 62, 95, 0.05) !important;
}

body .dashboard-compact .kpi-results-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px !important;
    border-bottom: 1px solid #e6edf4;
    background: linear-gradient(110deg, #f4f9fd, #ffffff);
}

body .dashboard-compact .kpi-results-title {
    margin: 2px 0 0;
    color: #173e5f;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

body .dashboard-compact .kpi-results-count {
    padding: 5px 10px;
    border: 1px solid #d8e6f1;
    border-radius: 8px;
    background: #ffffff;
    color: #657b8f;
    font-size: 12px;
}

body .dashboard-compact .kpi-results-count strong {
    color: #0d72b8;
    font-variant-numeric: tabular-nums;
}

body .dashboard-compact .kpi-results-card .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

body .dashboard-compact .kpi-results-table {
    width: 100%;
    min-width: 920px;
    font-size: 12px;
}

body .dashboard-compact .kpi-results-table > thead > tr > th {
    padding: 10px 13px !important;
    border-bottom: 1px solid #dfe8f1;
    background: #f2f7fc;
    color: #4b647b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.5;
}

body .dashboard-compact .kpi-results-table > tbody > tr > td {
    padding: 11px 13px !important;
    border-bottom: 1px solid #edf2f6;
    background-color: var(--insight-row-bg, #ffffff) !important;
    box-shadow: none;
    line-height: 1.5;
}

body .dashboard-compact .kpi-results-table > tbody > tr:nth-child(even) {
    --insight-row-bg: #fbfdff;
}

body .dashboard-compact .kpi-results-table > tbody > tr:hover {
    --insight-row-bg: #eef6fc;
}

body .dashboard-compact .kpi-col-kpi,
body .dashboard-compact .kpi-result-name {
    min-width: 220px;
}

body .dashboard-compact .kpi-result-code {
    margin: 0 0 4px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #edf6fc;
    color: #0d72b8;
    font-size: 10px;
}

body .dashboard-compact .kpi-result-title {
    display: block;
    color: #173e5f;
    font-size: 12px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

body .dashboard-compact .kpi-result-framework {
    min-width: 140px;
    max-width: 230px;
    color: #657b8f;
    white-space: normal;
    overflow-wrap: anywhere;
}

body .dashboard-compact .kpi-result-number,
body .dashboard-compact .kpi-result-rate {
    color: #173e5f;
    font-variant-numeric: tabular-nums;
}

body .dashboard-compact .kpi-results-card .result-status-pill,
body .dashboard-compact .kpi-results-card .workflow-pill {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
}

body .dashboard-compact .kpi-results-card .result-status-normal {
    background: #edf8f2;
    color: #1b754f;
}

body .dashboard-compact .kpi-results-card .result-status-caution {
    background: #fff7e6;
    color: #906000;
}

body .dashboard-compact .kpi-results-card .result-status-danger,
body .dashboard-compact .kpi-results-card .workflow-returned {
    background: #fdeff1;
    color: #b03645;
}

body .dashboard-compact .kpi-results-card .result-status-unset,
body .dashboard-compact .kpi-results-card .workflow-draft,
body .dashboard-compact .kpi-results-card .workflow-default {
    background: #f0f3f6;
    color: #5f7184;
}

body .dashboard-compact .kpi-results-card .workflow-approved {
    background: #e5f2fc;
    color: #0f6097;
}

body .dashboard-compact .kpi-results-card .workflow-confirmed {
    background: #edf3f8;
    color: #416f9d;
}

body .dashboard-compact .kpi-results-card .workflow-submitted {
    background: #f0f6fc;
    color: #4e7498;
}

body .dashboard-compact .kpi-results-table > tbody > tr > td.kpi-results-empty {
    padding: 28px 18px !important;
    color: #657b8f;
    font-size: 13px;
}

@media (max-width: 650px) {
    body .dashboard-compact .kpi-executive-section {
        padding: 12px !important;
    }

    body .dashboard-compact .kpi-results-header {
        padding: 12px 14px !important;
    }
}

@media (max-width: 575px) {
    body .dashboard-compact .kpi-card-name {
        min-height: 0 !important;
    }

    body .dashboard-compact .kpi-detail-link {
        min-height: 40px;
        padding: 7px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .dashboard-compact .kpi-exec-card,
    body .dashboard-compact .kpi-progress-bar {
        transition: none;
    }
}

/* End: KOSIN Insight - KPI Details and Results v1 */