/* ── 디자인 토큰 ─────────────────────────────── */
:root {
    --navy: #101f3b;
    --navy-2: #132443;
    --navy-3: #182f52;
    --primary: #00a0dc;
    --primary-h: #22b8ef;
    --primary-d: #0087bd;
    --accent: #38cbf3;
    --teal: #1aaa8a;
    --blue: #1e72bf;
    --danger: #d93025;
    --success: #1aaa6b;
    --text: #1a2a3a;
    --text-2: #4a5a6a;
    --text-3: #8a9ab5;
    --border: #e2e8f2;
    --bg: #f0f4fa;
    --card-bg: #ffffff;
    --header-h: 63px;
    --sidebar-w: 0px;
    --page-max: 1500px; /* 페이지 공통 컨테이너 폭 — 전 페이지 동일 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Pretendard', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 15px;
}

/* ── 헤더 ────────────────────────────────────── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--navy);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

    .header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent), transparent);
    }

.h-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.h-logo-mark {
    width: 136px;
    height: 36px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='136' height='54' viewBox='0 0 136 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.172 35.667C7.43514 34.8573 6.01778 34.2082 6.01778 32.8858C6.01778 31.8773 6.82735 31.1419 8.42489 31.1419C9.01585 31.1419 9.49391 31.2137 9.99119 31.3024C10.253 31.3503 10.5317 31.3862 10.7599 31.3862C12.1557 31.3862 12.946 30.5598 13.4673 28.9811L13.6835 28.3343C13.4625 28.2457 11.1779 27.2444 8.20387 27.2444C3.46893 27.2444 0.968129 30.2747 0.970532 33.4152C0.970532 35.0011 1.46781 36.1485 2.24616 37.0492C3.25032 38.2135 4.67969 38.9753 6.01778 39.6268C7.96605 40.5803 9.72934 41.2893 9.72934 42.7003C9.72934 43.9579 8.42729 44.6718 6.69042 44.6718C4.30733 44.6718 2.22454 43.3136 1.96028 43.1507L0 46.8062C0.353139 47.0027 2.86835 48.5933 7.01714 48.5933C11.435 48.5909 14.7814 46.0684 14.7814 42.1781C14.7814 38.2877 11.6824 36.8792 9.1696 35.667' fill='%23CE0E2D'/%3E%3Cpath d='M26.4518 37.4709L34.4635 27.6708H28.758L22.3583 36.127H22.267V27.6708H17.5609V48.428H17.8419C19.8743 48.428 22.3006 47.4866 22.3006 44.1017V39.3346H22.3943L28.9093 48.1717H34.8959L26.4494 37.4709H26.4518Z' fill='%23CE0E2D'/%3E%3Cpath d='M34.7349 5.43309C33.0774 5.74211 30.6174 7.2465 30.627 9.89596C30.6318 12.3059 32.6089 13.7647 32.6161 16.922C32.6233 19.296 31.3093 20.8938 29.8967 21.785C30.4684 21.7346 31.0979 21.7011 31.7849 21.7011C33.2359 21.6963 34.1103 21.8353 34.1656 21.8424L41.5959 12.7466C39.5347 9.66119 37.1252 7.26806 34.7373 5.43309' fill='%23CE0E2D'/%3E%3Cpath d='M40.9785 30.004C41.9178 28.5523 42.0355 26.2358 42.11 23.8763C42.1989 21.6748 42.6625 20.0219 45.6126 20.0099C46.266 20.0075 46.8858 20.0961 48.0125 20.0937C52.3414 20.0793 55.1617 18.5917 56.9178 17.6191C53.3264 15.3362 48.0893 13.0101 41.5935 12.7466C41.1731 13.9372 37.8795 23.0618 37.6321 23.802C37.6705 23.8451 38.2423 24.4895 38.9678 25.7472C40.0296 27.4743 40.599 28.938 40.9785 30.004Z' fill='%23CE0E2D'/%3E%3Cpath d='M25.2747 22.5467C24.8975 22.5467 24.7125 22.3 24.6621 21.8664C24.6164 21.4376 22.7546 4.47488 22.4784 1.90687C22.4351 1.53317 22.3439 0.845655 22.3439 0.598916C22.3439 0.203654 22.6033 3.42885e-05 22.9036 3.42885e-05C23.7852 -0.00715229 28.5874 1.11395 33.6851 4.6761C32.2101 5.09053 29.5604 6.60929 29.57 9.7642C29.5796 12.555 31.5807 14.0881 31.5975 16.8885C31.6119 21.4424 26.3629 22.5467 25.2747 22.5467Z' fill='%23EE7623'/%3E%3Cpath d='M41.4061 31.2113C41.4854 31.4222 41.5599 31.6018 41.6343 31.724C41.7521 31.9228 41.9058 32.0139 42.0908 32.0139C42.2109 32.0139 42.3574 31.9731 42.516 31.8965C42.91 31.7168 58.4361 24.5111 60.7759 23.4331C61.1171 23.2726 61.7561 22.9875 61.9699 22.8629C62.1909 22.7336 62.2894 22.5539 62.2894 22.3671C62.2894 22.2617 62.2557 22.1587 62.2005 22.0676C61.9098 21.5909 60.4084 20.0027 57.8956 18.2635C55.8992 19.3607 52.7882 21.0543 48.1566 21.0711C47.0203 21.0711 46.7633 20.9992 45.9873 20.9992C43.7292 21.0088 43.1646 21.9742 43.0805 23.9481C43.0685 24.3218 43.0613 24.8273 43.0349 25.3758C42.9676 27.1413 42.7562 29.5776 41.4061 31.209' fill='%23EE7623'/%3E%3Cpath d='M131.757 44.5856V39.0088H134.159L135.002 36.8552H131.759V33.4847C131.759 33.4847 131.5 33.4799 131.49 33.4847C130.21 33.4847 128.886 34.0261 128.886 36.8241V36.8552H126.762V39.0088H128.886V45.5773C128.886 47.4315 129.986 48.4016 131.553 48.4016C132.816 48.4016 134.447 48.0184 134.447 45.5174C134.347 45.5821 133.736 45.9774 133.064 45.9774C132.127 45.9774 131.757 45.4048 131.757 44.588' fill='%23EE7623'/%3E%3Cpath d='M48.6659 41.3061C48.6659 40.0221 49.574 38.8291 50.8328 38.8291C52.2526 38.8291 53.0333 40.0556 53.0549 41.3061H48.6659ZM50.8808 36.6803C48.1326 36.6803 45.812 38.9082 45.812 42.5614C45.812 46.2145 48.0605 48.4184 51.4214 48.4184C54.0951 48.4184 55.4765 47.2542 55.647 47.1488C55.647 47.1488 55.3852 46.7224 55.3107 46.605C54.9383 45.9942 54.5107 45.7953 54.0399 45.7953C53.0934 45.7953 52.9709 46.193 51.6928 46.193C49.4923 46.193 48.7308 44.4778 48.6779 43.3399H56.0386V42.4871C56.0386 38.9872 54.0159 36.6827 50.8832 36.6827' fill='%23EE7623'/%3E%3Cpath d='M75 46.2169C76.7681 46.2169 77.7699 44.7078 77.7699 42.5542C77.7699 40.4006 76.7825 38.8794 75 38.8794C73.2175 38.8794 72.2277 40.379 72.2277 42.5542C72.2277 44.7293 73.2175 46.2169 75 46.2169ZM75 48.416C71.4878 48.416 69.369 46.1067 69.369 42.5542C69.369 39.0016 71.4614 36.6779 75 36.6779C78.5386 36.6779 80.6238 39.016 80.6238 42.5542C80.6238 45.8983 78.6971 48.416 75 48.416Z' fill='%23EE7623'/%3E%3Cpath d='M67.1637 45.3042C66.9451 45.4456 65.9193 46.1043 64.4899 46.1043C62.5416 46.1043 61.1531 44.5688 61.1531 42.5614C61.1531 40.3263 62.7314 38.9944 64.4899 38.9944C65.4388 38.9944 65.8376 39.2843 66.4646 39.2843C67.1348 39.2843 67.4904 38.9609 67.8219 38.3141C68.0045 37.9596 68.1174 37.7535 68.1174 37.7535C67.9732 37.6649 66.5199 36.6803 64.0575 36.6803C60.4396 36.6803 58.2799 39.2627 58.2799 42.5614C58.2799 46.1594 60.7519 48.4184 64.0575 48.4184C66.4502 48.4184 67.906 47.4434 68.1558 47.2614L67.1637 45.3042Z' fill='%23EE7623'/%3E%3Cpath d='M114.739 40.5874V48.1597H117.591V40.2904C117.747 40.1467 118.758 39.1837 119.882 39.1837C121.348 39.1837 122.109 40.2425 122.109 41.6223V48.1597H124.956V40.9108C124.956 37.4685 122.301 36.7067 120.819 36.7067C119.037 36.7067 117.768 37.8278 117.394 38.1991C117.273 37.7368 116.728 36.9558 115.484 36.9558C115.044 36.9558 114.47 37.0852 114.417 37.0996C114.504 37.5284 114.739 38.5417 114.739 40.5874Z' fill='%23EE7623'/%3E%3Cpath d='M98.7035 44.9976V33.2883C98.7035 31.9683 97.8171 30.9454 96.4454 30.9454H95.8304V46.1475C95.8304 47.5464 96.7 48.416 98.2111 48.416C100.075 48.416 100.63 47.0937 100.63 45.8504C100.553 45.8887 100.159 46.0516 99.763 46.0516C99.0975 46.0516 98.7035 45.666 98.7035 44.9976Z' fill='%23EE7623'/%3E%3Cpath d='M109.142 45.3354C108.959 45.4384 108.188 46.1331 107.04 46.1331C106.047 46.1331 105.293 45.5366 105.293 44.5425C105.293 43.7016 106.105 42.9782 107.659 42.9782H109.142V45.3354ZM109.384 47.0338C109.586 47.5512 110.069 48.1597 111.075 48.1597C111.604 48.1597 112.291 48.0208 112.402 47.9776C112.32 47.6519 112.056 46.7727 112.056 44.7988V40.8581C112.056 37.9332 110.167 36.6756 107.246 36.6756C104.791 36.6756 103.04 37.8494 102.836 37.9859C102.836 37.9859 102.953 38.1895 103.033 38.3333C103.278 38.7501 103.494 39.3633 104.217 39.3633C104.94 39.3633 105.545 38.8148 106.91 38.8148C108.409 38.8148 109.139 39.5382 109.139 40.6449V41.045H108.195C104.349 41.045 102.324 42.5278 102.324 44.9066C102.324 47.0075 103.933 48.416 106.151 48.416C108.368 48.416 109.199 47.1871 109.382 47.0314' fill='%23EE7623'/%3E%3Cpath d='M87.2277 46.1403C86.5143 46.1403 86.0002 46.0109 85.8272 45.9678V39.1741C85.9882 39.1381 86.4854 38.9968 87.2277 38.9968C88.9718 38.9968 90.4973 40.1275 90.4973 42.5662C90.4973 45.0048 89.1304 46.1403 87.2277 46.1403ZM87.6001 36.6588C85.1209 36.6588 83.2639 37.2696 82.9396 37.375V54H83.3961C84.7221 54 85.8296 53.1184 85.8296 51.3577V48.2364C85.9113 48.2555 86.7809 48.4951 87.7971 48.4951C90.9033 48.4951 93.6059 46.5667 93.6059 42.4871C93.6059 39.0543 91.3885 36.6588 87.6001 36.6588Z' fill='%23EE7623'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    border-radius: 0;
}

.h-logo-text {
    line-height: 1.2;
}

    .h-logo-text strong {
        display: block;
        font-size: 14px;
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.3px;
    }

    .h-logo-text span {
        font-size: 10px;
        color: rgba(255,255,255,0.45);
    }

.h-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.h-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

    .h-nav a {
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255,255,255,0.6);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all .15s;
        white-space: nowrap;
    }

        .h-nav a:hover {
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.9);
        }

        .h-nav a.active {
            background: rgba(0,160,220,0.15);
            color: var(--primary);
        }

        .h-nav a i {
            font-size: 16px;
        }

.h-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.h-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.07);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    position: relative;
    text-decoration: none;
    transition: all .15s;
}

    .h-icon-btn:hover {
        background: rgba(255,255,255,0.12);
        color: #fff;
    }

.h-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 1.5px solid var(--navy);
}

.h-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: all .15s;
}

    .h-user:hover {
        background: rgba(255,255,255,0.12);
    }

.h-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.h-user-info {
    text-align: left;
}

.h-user-name {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.h-user-role {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
}

.h-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.07);
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .h-menu-btn span {
        display: block;
        width: 18px;
        height: 2px;
        background: rgba(255,255,255,0.8);
        border-radius: 2px;
    }

/* ── 모바일 사이드 메뉴 ──────────────────────── */
.m-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
}

    .m-overlay.open {
        display: block;
    }

.m-sidenav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    z-index: 201;
    width: 280px;
    background: var(--navy-2);
    transition: left .25s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
}

    .m-sidenav.open {
        left: 0;
    }

.m-sidenav-head {
    background: linear-gradient(135deg, var(--navy), var(--navy-3));
    padding: 48px 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.m-sidenav-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(0,160,220,0.35);
}

.m-sidenav-name {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
}

.m-sidenav-role {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
}

.m-sidenav-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.m-sidenav-group {
    padding: 10px 16px 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
}

.m-sidenav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: all .12s;
}

    .m-sidenav a i {
        font-size: 19px;
        color: rgba(255,255,255,0.35);
    }

    .m-sidenav a:hover, .m-sidenav a.active {
        background: rgba(0,160,220,0.1);
        color: #fff;
    }

        .m-sidenav a:hover i, .m-sidenav a.active i {
            color: var(--primary);
        }

    .m-sidenav a.active {
        border-right: 3px solid var(--primary);
    }

.m-sidenav-chatbot {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.m-chatbot-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    width: 100%;
    background: linear-gradient(135deg, rgba(0,160,220,0.15), rgba(56,203,243,0.1));
    border: 1px solid rgba(0,160,220,0.2);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 700;
    transition: all .15s;
}

    .m-chatbot-btn:hover {
        background: linear-gradient(135deg, rgba(0,160,220,0.25), rgba(56,203,243,0.15));
    }

    .m-chatbot-btn .chat-dot {
        width: 8px;
        height: 8px;
        background: var(--success);
        border-radius: 50%;
        animation: pulse 1.5s infinite;
    }

/* ── 메인 콘텐츠 ────────────────────────────── */
.main {
    padding-top: var(--header-h);
    min-height: 100vh;
}

.container {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── 알림 배너 ──────────────────────────────── */
.alert-banner {
    background: linear-gradient(135deg, #1a1a2e, #182f52);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 24px;
}

.alert-banner-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    flex-shrink: 0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.85);
    }
}

.alert-text {
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    flex: 1;
}

    .alert-text strong {
        color: var(--accent);
    }

.alert-cta {
    padding: 5px 14px;
    border-radius: 6px;
    background: rgba(0,160,220,0.2);
    border: 1px solid rgba(0,160,220,0.3);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
    flex-shrink: 0;
}

    .alert-cta:hover {
        background: rgba(0,160,220,0.3);
    }

.alert-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.3);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── 히어로 ─────────────────────────────────── */
.hero {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 60%, #1a3a5a 100%);
    padding: 40px 24px 36px;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,160,220,0.08) 0%, transparent 70%);
        right: -80px;
        top: -120px;
        pointer-events: none;
    }

    .hero::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(30,114,191,0.08) 0%, transparent 70%);
        left: 30%;
        bottom: -100px;
        pointer-events: none;
    }

.hero-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-greeting {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .hero-greeting .dot {
        width: 6px;
        height: 6px;
        background: var(--success);
        border-radius: 50%;
    }

.hero-name {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

    .hero-name span {
        color: var(--primary);
    }

.hero-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 24px;
}

.hero-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-stat {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.hs-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.hs-val {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: 2px;
}

.hs-lbl {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

/* ── 메인 카드 그리드 ───────────────────────── */
.section {
    padding: 28px 24px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-title::before {
        content: '';
        width: 3px;
        height: 14px;
        background: var(--primary);
        border-radius: 2px;
    }

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: var(--page-max);
    margin: 0 auto;
}

.menu-card {
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    min-height: 200px;
}

    .menu-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0,0,0,0.1);
        border-color: transparent;
    }

    .menu-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 20px;
        opacity: 0;
        transition: opacity .2s;
        pointer-events: none;
    }

    .menu-card:hover::before {
        opacity: 1;
    }

/* 카드별 색상 */
.card-edu::before {
    background: linear-gradient(135deg, rgba(0,160,220,0.04), rgba(56,203,243,0.04));
}

.card-edu:hover {
    border-color: rgba(0,160,220,0.2);
}

.card-edu .card-icon-bg {
    background: linear-gradient(135deg, #00a0dc, #38cbf3);
}

.card-edu .card-tag {
    background: rgba(0,160,220,0.08);
    color: var(--primary);
}

.card-edu .card-arrow {
    color: var(--primary);
}

.card-edu .card-progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.card-room::before {
    background: linear-gradient(135deg, rgba(30,114,191,0.04), rgba(26,170,138,0.04));
}

.card-room:hover {
    border-color: rgba(30,114,191,0.2);
}

.card-room .card-icon-bg {
    background: linear-gradient(135deg, #1e72bf, #1aaa8a);
}

.card-room .card-tag {
    background: rgba(30,114,191,0.08);
    color: var(--blue);
}

.card-room .card-arrow {
    color: var(--blue);
}

.card-doc::before {
    background: linear-gradient(135deg, rgba(26,170,107,0.04), rgba(30,114,191,0.04));
}

.card-doc:hover {
    border-color: rgba(26,170,107,0.2);
}

.card-doc .card-icon-bg {
    background: linear-gradient(135deg, #1aaa6b, #1e72bf);
}

.card-doc .card-tag {
    background: rgba(26,170,107,0.08);
    color: var(--success);
}

.card-doc .card-arrow {
    color: var(--success);
}

.card-loc::before {
    background: linear-gradient(135deg, rgba(89,100,200,0.04), rgba(30,114,191,0.04));
}

.card-loc:hover {
    border-color: rgba(89,100,200,0.2);
}

.card-loc .card-icon-bg {
    background: linear-gradient(135deg, #5964c8, #1e72bf);
}

.card-loc .card-tag {
    background: rgba(89,100,200,0.08);
    color: #5964c8;
}

.card-loc .card-arrow {
    color: #5964c8;
}

.card-header {
    padding: 22px 22px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.card-icon-wrap {
    position: relative;
}

.card-icon-bg {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.card-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}

.card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f4f6fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all .2s;
}

.menu-card:hover .card-arrow {
    transform: translate(2px, -2px);
}

.card-body {
    padding: 16px 22px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.card-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 5px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.card-desc {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

.card-status {
    margin-top: auto;
    padding: 12px 14px;
    background: #f7f9fc;
    border-radius: 11px;
    border: 1px solid #edf0f7;
}

.cs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

    .cs-row:last-child {
        margin-bottom: 0;
    }

.cs-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
}

.cs-value {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}

    .cs-value.orange {
        color: var(--primary);
    }

    .cs-value.blue {
        color: var(--blue);
    }

    .cs-value.green {
        color: var(--success);
    }

    .cs-value.muted {
        color: var(--text-3);
    }

.card-progress {
    height: 5px;
    background: #e8ecf4;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.card-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .6s;
}

/* 준비중 오버레이 */
.coming-soon-overlay {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.cs-chip {
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(89,100,200,0.1);
    border: 1px solid rgba(89,100,200,0.2);
    font-size: 11px;
    font-weight: 800;
    color: #5964c8;
}

.cs-txt {
    font-size: 11px;
    color: var(--text-3);
}

/* ── 하단 행 (공지 + 빠른 링크) ───────────── */
.bottom-row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    max-width: var(--page-max);
    margin: 0 auto;
}

/* 공지사항 */
.notice-card {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.nc-head {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f3f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nc-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .nc-title i {
        color: var(--primary);
        font-size: 18px;
    }

.nc-more {
    font-size: 12px;
    color: var(--text-3);
    text-decoration: none;
}

    .nc-more:hover {
        color: var(--primary);
    }

.notice-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-bottom: 1px solid #f7f9fc;
    text-decoration: none;
    transition: background .12s;
}

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

    .notice-row:hover {
        background: #fafbfd;
    }

.nr-pin {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

    .nr-pin.important {
        background: #e6f7fd;
        color: var(--primary);
    }

    .nr-pin.normal {
        background: #f0f3f8;
        color: var(--text-3);
    }

.nr-cat {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}

.nr-text {
    flex: 1;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nr-date {
    font-size: 11px;
    color: var(--text-3);
    flex-shrink: 0;
}

/* 빠른 링크 */
.quick-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-card {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 18px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.qc-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .qc-title i {
        font-size: 16px;
        color: var(--primary);
    }

.qc-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f7f9fc;
    border: 1px solid #edf0f7;
    text-decoration: none;
    transition: all .12s;
}

    .qc-item:hover {
        background: var(--primary);
        border-color: var(--primary);
    }

        .qc-item:hover .qi-text, .qc-item:hover .qi-sub {
            color: #fff;
        }

        .qc-item:hover .qi-icon {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }

.qi-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    flex-shrink: 0;
    transition: all .12s;
}

.qi-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    transition: color .12s;
}

.qi-sub {
    font-size: 10px;
    color: var(--text-3);
    transition: color .12s;
}

.qi-arrow {
    margin-left: auto;
    font-size: 16px;
    color: var(--text-3);
    transition: color .12s;
}

/* 알림/할일 카드 */
.todo-card {
    background: linear-gradient(135deg, var(--navy), var(--navy-3));
    border-radius: 16px;
    padding: 18px 20px;
}

.todo-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.todo-count {
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

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

.td-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.td-text {
    flex: 1;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}

    .td-text strong {
        color: rgba(255,255,255,0.9);
        font-weight: 700;
    }

.td-action {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    flex-shrink: 0;
}

/* ── 모바일 하단 탭 ──────────────────────────── */
.m-footer-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: 64px;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}

.m-footer-nav-inner {
    display: flex;
    height: 100%;
}

.m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 600;
}

    .m-tab i {
        font-size: 22px;
        line-height: 1;
    }

    .m-tab.active {
        color: var(--primary);
    }

/* ── 공통 애니메이션 ─────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* offcanvas/모달 열렸을 때 body 스크롤 막기.
   ★ position:fixed 금지 — body 를 뷰포트에 고정하면 문서 스크롤 높이가 붕괴돼
   모달을 여는 순간 페이지가 맨 위로 튄다(Admin/RagQna 수정 버튼 건, 2026-07-07).
   overflow:hidden 만으로 데스크톱 배경 스크롤은 잠기고 위치는 보존된다. */
body.offcanvas-open,
body.modal-open {
    overflow: hidden !important;
}

.offcanvas-backdrop {
    background-color: rgba(0,0,0,0.5) !important;
}

#sideMenu,
#portalSideMenu {
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
}

    #sideMenu .offcanvas-body,
    #portalSideMenu .offcanvas-body {
        height: 100% !important;
        overflow-y: auto;
    }

/* ── 반응형 ─────────────────────────────────── */
@media (min-width: 1024px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px) {
    .bottom-row {
        grid-template-columns: 1fr;
    }

    .quick-panel {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .quick-panel > * {
            flex: 1;
            min-width: 240px;
        }
}

@media (max-width: 768px) {
    .h-nav, .h-divider {
        display: none;
    }

    .h-menu-btn {
        display: flex;
    }

    .h-user-info {
        display: none;
    }

    .header {
        padding: 0 16px;
        gap: 10px;
    }

    .section {
        padding: 20px 16px;
    }

    .menu-grid {
        gap: 12px;
    }

    .menu-card {
        min-height: 170px;
    }

    .card-header {
        padding: 16px 16px 0;
    }

    .card-icon-bg {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .card-body {
        padding: 12px 16px 16px;
    }

    .card-title {
        font-size: 15px;
    }

    .card-desc {
        display: none;
    }

    .bottom-row {
        grid-template-columns: 1fr;
        padding: 0 16px 84px;
    }

    .quick-panel {
        flex-direction: column;
    }

    .alert-banner {
        padding: 0 16px;
    }

    .hero {
        padding: 24px 16px 20px;
    }

    .hero-name {
        font-size: 20px;
    }

    .hero-stats {
        gap: 8px;
    }

    .hero-stat {
        min-width: 130px;
        padding: 10px 12px;
    }

    .m-footer-nav {
        display: block;
    }
}

@media (max-width: 480px) {
    .main {
        padding-top: 58px;
    }

    .hero-stats {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .hero-stat {
        flex-shrink: 0;
    }

    .bottom-row {
        padding: 0 16px 80px;
    }
}

/* ═══════════════════════════════════════════════
   홈 분할 레이아웃 — 좌: 대시보드 / 우: AI 챗봇
   ═══════════════════════════════════════════════ */
.home-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 20px 24px 48px;
    align-items: start;
}

.home-left,
.home-right {
    min-width: 0;
}

/* 좌측 컬럼: 풀블리드 섹션들을 카드형으로 변환 */
.home-split .hero {
    border-radius: 20px;
    padding: 28px 24px 26px;
}

.home-split .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.home-split .hero-stat {
    min-width: 0;
    padding: 12px 12px;
}

.home-split .section {
    padding: 24px 0 0;
}

.home-split .section-head {
    max-width: none;
    margin: 0 0 16px;
}

.home-split .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
}

.home-split .bottom-row {
    grid-template-columns: 1fr;
    max-width: none;
    padding: 20px 0 0;
}

.home-split .quick-panel {
    flex-direction: column;
}

/* 우측 컬럼: 챗봇을 화면에 고정 */
.home-right {
    position: sticky;
    top: calc(var(--header-h) + 16px);
}

@media (max-width: 1100px) {
    .home-split {
        grid-template-columns: 1fr;
    }

    .home-right {
        position: static;
    }
}

@media (max-width: 768px) {
    .home-split {
        padding: 16px 16px 90px;
    }

    /* 히어로 통계 3개를 한 줄 유지 — 좁은 화면은 아이콘·여백 축소 */
    .home-split .hero-stats {
        gap: 6px;
    }

    .home-split .hero-stat {
        padding: 10px 8px;
        gap: 7px;
    }

    .home-split .hero-stat .hs-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .home-split .hero-stat .hs-val {
        font-size: 15px;
    }

    /* 모바일은 기존 하단탭 → 전체화면 챗봇 사용 */
    .home-right {
        display: none;
    }
}