@charset "utf-8";

:root{
    --admin-bg:#f5f7fb;
    --admin-surface:#ffffff;
    --admin-surface-2:#f8fafc;
    --admin-line:#e6ebf2;
    --admin-line-2:#eef2f6;
    --admin-text:#1f2937;
    --admin-text-soft:#667085;
    --admin-title:#1e2a5a;
    --admin-primary:#3154d3;
    --admin-primary-soft:#eef3ff;
    --admin-primary-line:#dbe4ff;
    --admin-warn-bg:#fff8db;
    --admin-warn-line:#f2e2a3;
    --admin-warn-text:#8a5a00;
    --admin-danger-bg:#fff1f2;
    --admin-danger-line:#fecdd3;
    --admin-danger-text:#b42318;
    --admin-shadow:0 8px 24px rgba(15,23,42,0.05);

    --sidebar-w:220px;
    --header-offset:96px;

    --admin-red:#dc2626;
    --admin-red-soft:#fef2f2;
    --admin-red-line:#fecaca;

    --admin-green:#16a34a;
    --admin-green-soft:#ecfdf5;
    --admin-green-line:#bbf7d0;

    --admin-ochre:#b45309;
    --admin-ochre-soft:#fff7ed;
    --admin-ochre-line:#fdba74;

    --admin-blue:#2563eb;
    --admin-blue-soft:#eff6ff;
    --admin-blue-line:#bfdbfe;

    --admin-purple:#7c3aed;
    --admin-purple-soft:#f5f3ff;
    --admin-purple-line:#ddd6fe;

    --admin-yellow:#ca8a04;
    --admin-yellow-soft:#fefce8;
    --admin-yellow-line:#fde68a;

    --admin-black:#111827;
    --admin-black-soft:#f3f4f6;
    --admin-black-line:#d1d5db;

    --admin-gray:#6b7280;
    --admin-gray-soft:#f3f4f6;
    --admin-gray-line:#d1d5db;

    --admin-sky:#0284c7;
    --admin-sky-soft:#f0f9ff;
    --admin-sky-line:#bae6fd;
}

/* =====================================================
   Base
===================================================== */

html,body{
    margin:0;
    padding:0;
    background:var(--admin-bg);
    color:var(--admin-text);
    font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
    font-size:14px;
    line-height:1.5;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

a{
    text-decoration:none;
    color:inherit;
}

body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

/* =====================================================
   Layout Shell
===================================================== */

.admin-shell{
    min-height:100vh;
}

.admin-sidebar{
    position:fixed;
    left:0;
    top:var(--header-offset);
    width:var(--sidebar-w);
    height:calc(100vh - var(--header-offset));
    background:var(--admin-surface);
    border-right:1px solid var(--admin-line);
    overflow-y:auto;
}

.admin-main{
    margin-left:var(--sidebar-w);
    min-height:calc(100vh - var(--header-offset));
}

.main-content-card{
    padding:4px;
}

.main-content-inner{
    min-width:0;
}

/* =====================================================
   Topbar common
===================================================== */

.admin-topbar{
    position:sticky;
    top:0;
    background:#fff;
    border-bottom:1px solid var(--admin-line);
    z-index:1000;
}

.compact-topbar{
    padding:8px 14px;
}

.compact-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

.compact-left,
.compact-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.page-title-text{
    font-size:17px;
    font-weight:800;
    color:var(--admin-title);
}

.page-sub-text{
    font-size:11px;
    color:var(--admin-text-soft);
}

/* =====================================================
   Sidebar Menu
===================================================== */

.menu-page{
    padding:6px 8px 10px 8px;
}

.menu-card{
    min-height:100%;
}

/* 메뉴 상단 공백 최소화 */
.menu-head{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:4px 4px 2px 4px;
    min-height:0;
    border-bottom:0;
    background:transparent;
}

.menu-head-left{
    display:none;
}

.menu-user-title{
    font-size:16px;
    font-weight:700;
}

.menu-user-sub{
    font-size:12px;
    color:#777;
}

.menu-body{
    margin-top:4px;
    display:grid;
    gap:8px;
}

.menu-section{
    border:1px solid var(--admin-line);
    border-radius:14px;
    background:#fff;
}

.menu-section-toggle{
    width:100%;
    border:0;
    background:#dbeaff;
    font-weight:800;
    padding:10px 10px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-section-body{
    display:none;
    border-top:1px solid var(--admin-line-2);
    padding:4px;
}

.menu-section.open .menu-section-body{
    display:block;
}

.menu-section.open .menu-section-toggle{
    background:#dbeaff;
}

.menu-section.open .arrow{
    transform:rotate(180deg);
}

.arrow{
    transition:transform .18s ease;
}

.menu-section-title{
    font-weight:800;
}

.menu-link{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px 8px 14px;
    border-radius:10px;
    font-size:15px;
    font-weight:800;
    letter-spacing:-0.2px;
    line-height:1.3;
    color:var(--admin-text);
    transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}

.menu-link-text{
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
}

.menu-link:hover{
    background:#e8efff;
    color:#1d3fd3;
}

.menu-link.active{
    background:#eef3ff;
    color:#2747c7;
    font-weight:800;
    box-shadow:inset 0 0 0 1px #dbe4ff;
    text-decoration:none;
}

.menu-link.active::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    bottom:5px;
    width:4px;
    border-radius:0 4px 4px 0;
    background:#3154d3;
}

.menu-link.active .menu-dot{
    background:#3154d3;
}

.menu-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#9fb3ff;
    flex:0 0 auto;
}

/* 닫기 버튼 - 기본은 숨김 */
.menu-close-btn{
    display:none;
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid #d7deea;
    background:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    color:#24324a;
    box-shadow:0 4px 10px rgba(15,23,42,0.08);
    transition:all 0.18s ease;
}

.menu-close-btn:hover{
    background:#f7f9fd;
    border-color:#bfc9da;
    transform:translateY(-1px);
}

.menu-close-btn:active{
    transform:scale(0.96);
}

/* =====================================================
   Page Layout
===================================================== */

.page-shell{
    padding:8px;
}

.page-card{
    background:#fff;
    border:1px solid var(--admin-line);
    border-radius:16px;
    box-shadow:var(--admin-shadow);
    margin-bottom:16px;
}

.page-card-head{
    padding:14px 18px;
    border-bottom:1px solid var(--admin-line-2);
}

.page-card-body{
    padding:8px;
}

.page-title{
    font-size:20px;
    font-weight:800;
    margin:0;
}

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

.filter-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(160px,1fr));
    gap:12px;
}

.filter-item{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.filter-label{
    font-size:12px;
    font-weight:700;
}

.filter-input,
.filter-select{
    min-height:40px;
    border:1px solid #d8dee8;
    border-radius:10px;
    padding:0 10px;
    width:100%;
    background:#fff;
}

/* =====================================================
   Buttons
===================================================== */

.ui-btn{
    min-height:38px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #d8dee8;
    background:#f8fafc;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.ui-btn.primary{
    background:var(--admin-primary);
    color:#fff;
    border-color:var(--admin-primary);
}

.ui-btn.warn{
    background:#fff7ed;
    border-color:#fed7aa;
    color:#9a3412;
}

.ui-btn.danger{
    background:#fef2f2;
    border-color:#fecaca;
    color:#b91c1c;
}

/* =====================================================
   Tables
===================================================== */

.table-wrap{
    overflow-x:auto;
    border:1px solid var(--admin-line);
    border-radius:14px;
}

.list-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.list-table th{
    padding:10px;
    background:#3366FF;
    color:#fff;
    font-size:13px;
}

.list-table td{
    padding:10px;
    border-bottom:1px solid #edf2f7;
    font-size:13px;
}

.list-table tbody tr:hover td{
    background:#fff7f2;
}

/* =====================================================
   Login Page
===================================================== */

.admin-login-page.simple-login-page,
.simple-login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    background:
        radial-gradient(circle at top left, rgba(49,84,211,0.10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(30,42,90,0.10), transparent 30%),
        linear-gradient(180deg,#f7f9fd,#eef3fb);
}

.simple-login-card{
    width:100%;
    max-width:520px;
    background:#fff;
    border-radius:20px;
    border:1px solid var(--admin-line);
    padding:30px;
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.simple-login-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.simple-login-brand img{
    width:58px;
    height:58px;
    border-radius:14px;
    object-fit:contain;
    background:#fff;
    border:1px solid var(--admin-line);
    padding:6px;
    box-shadow:0 8px 18px rgba(49,84,211,0.12);
}

.simple-login-brand-text{
    min-width:0;
}

.simple-login-brand-text h1{
    margin:0;
    font-size:24px;
    font-weight:800;
    color:var(--admin-title);
    letter-spacing:-0.02em;
    word-break:keep-all;
}

.simple-login-brand-text span{
    display:inline-block;
    margin-top:4px;
    font-size:13px;
    color:var(--admin-text-soft);
    font-weight:700;
}

.login-form{
    margin-top:16px;
}

.form-grid{
    display:grid;
    gap:14px;
}

.simple-login-card .field-row{
    display:grid;
    grid-template-columns:110px 1fr;
    align-items:center;
    gap:10px;
}

.simple-login-card .field-label{
    font-size:14px;
    font-weight:700;
    text-align:right;
    color:var(--admin-text);
}

.simple-login-card .field-input{
    width:100%;
    min-height:46px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #d8dee8;
    font-size:14px;
    background:#fff;
    color:var(--admin-text);
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.simple-login-card .field-input::placeholder{
    color:#98a2b3;
}

.simple-login-card .field-input:focus{
    outline:none;
    border-color:#9db3ff;
    box-shadow:0 0 0 4px rgba(49,84,211,0.08);
    background:#fff;
}

.btn-row{
    display:grid;
    gap:10px;
    margin-top:16px;
}

.single-login-btns{
    grid-template-columns:1fr 1fr;
}

.btn{
    min-height:46px;
    border-radius:12px;
    border:1px solid transparent;
    font-weight:800;
    cursor:pointer;
    transition:all .2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{
    background:var(--admin-primary);
    color:#fff;
    box-shadow:0 10px 20px rgba(49,84,211,0.18);
}

.btn-primary:hover{
    filter:brightness(1.02);
}

.btn-secondary{
    background:#fff;
    border-color:#d8dee8;
    color:var(--admin-text);
}

.btn-secondary:hover{
    background:#f8fafc;
}

.simple-login-tools{
    margin-top:16px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn-soft{
    min-height:36px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid var(--admin-primary-line);
    background:var(--admin-primary-soft);
    color:#3047c4;
    font-weight:700;
    transition:all .2s ease;
}

.btn-soft:hover{
    background:#e5edff;
    border-color:#cbd8ff;
}

.login-alert{
    margin-top:12px;
    padding:12px;
    border-radius:10px;
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
}

.login-status{
    margin-top:12px;
    padding:12px;
    border-radius:10px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    line-height:1.6;
}

.shortcut-guide{
    margin-top:12px;
    padding:0 12px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    border-radius:10px;
    background:#eef4ff;
    border:1px solid transparent;
    color:#3154d3;
    font-weight:700;
    transition:max-height .25s ease, opacity .2s ease, padding .2s ease, border-color .2s ease;
}

.shortcut-guide.show{
    max-height:100px;
    opacity:1;
    padding:12px;
    border-color:#dbe4ff;
}

.simple-login-meta{
    margin-top:16px;
    padding-top:14px;
    border-top:1px dashed var(--admin-line);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.simple-login-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid var(--admin-line);
    color:var(--admin-text-soft);
    font-size:12px;
}

.simple-login-meta strong{
    color:var(--admin-title);
    font-weight:800;
}

/* =========================================
   Topbar Site Title
========================================= */

.brand-mini.compact-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-mini.compact-brand > img{
    flex:0 0 auto;
}

.brand-mini.compact-brand .compact-brand-block{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.brand-mini.compact-brand .site-title-28{
    display:block;
    margin:0;
    padding:0;
    font-size:28px;
    line-height:1.1;
    font-weight:800;
    color:var(--admin-title);
    letter-spacing:-0.02em;
    white-space:nowrap;
}

.brand-mini.compact-brand .page-sub-text{
    margin-top:4px;
}

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

@media (max-width:980px){
    .admin-sidebar{
        position:fixed;
        top:0;
        left:0;
        height:100vh;
        width:min(82vw,300px);
        background:var(--admin-surface);
        border-right:1px solid var(--admin-line);
        overflow-y:auto;
        transform:translateX(-100%);
        transition:transform .25s ease;
        box-shadow:0 18px 40px rgba(15,23,42,0.22);
        z-index:1100;
    }

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

    .admin-main{
        margin-left:0;
        min-height:100vh;
    }

    /* 모바일에서는 상단 여백을 더 줄임 */
    .menu-page{
        padding:4px 8px 10px 8px;
    }

    .menu-head{
        position:sticky;
        top:0;
        z-index:5;
        display:flex;
        justify-content:flex-end;
        align-items:center;
        padding:6px 2px 6px 2px;
        margin-bottom:4px;
        background:linear-gradient(to bottom, #ffffff 70%, rgba(255,255,255,0.92));
        backdrop-filter:blur(2px);
    }

    .menu-close-btn{
        display:inline-flex;
    }
}

@media (max-width:768px){
    .filter-grid{
        grid-template-columns:1fr;
    }

    .menu-link{
        padding:8px 12px 8px 14px;
        font-size:16px;
        font-weight:800;
        line-height:1.3;
        border-radius:10px;
    }

    .menu-link.active::before{
        top:5px;
        bottom:5px;
    }

    .menu-section-toggle{
        padding:9px 10px;
    }

    .menu-section-title{
        font-size:14px;
        font-weight:800;
    }

    .admin-login-page.simple-login-page,
    .simple-login-page{
        align-items:flex-start;
        padding:18px 12px;
    }

    .simple-login-card{
        max-width:100%;
        padding:22px 16px;
        border-radius:18px;
    }

    .simple-login-brand{
        gap:12px;
        margin-bottom:16px;
    }

    .simple-login-brand img{
        width:50px;
        height:50px;
    }

    .simple-login-brand-text h1{
        font-size:20px;
    }

    .simple-login-card .field-row{
        grid-template-columns:1fr;
        gap:6px;
    }

    .simple-login-card .field-label{
        text-align:left;
        font-size:13px;
    }

    .single-login-btns{
        grid-template-columns:1fr;
    }

    .simple-login-tools{
        flex-direction:column;
    }

    .btn-soft{
        width:100%;
    }

    .simple-login-meta{
        flex-direction:column;
    }

    .simple-login-meta span{
        width:100%;
        justify-content:flex-start;
        border-radius:10px;
        min-height:34px;
    }

    .brand-mini.compact-brand .site-title-28{
        font-size:20px;
    }
}

@media (max-width:480px){
    .simple-login-card{
        padding:20px 14px;
    }

    .simple-login-brand-text h1{
        font-size:18px;
    }

    .simple-login-brand-text span{
        font-size:12px;
    }

    .simple-login-card .field-input{
        min-height:44px;
        font-size:13px;
    }

    .btn{
        min-height:44px;
    }
}

/* =========================
   Edu Apply Responsive
========================= */

.edu-page{
    padding:16px;
}

.edu-card{
    background:#fff;
    border:1px solid var(--admin-line);
    border-radius:18px;
    box-shadow:var(--admin-shadow);
    overflow:hidden;
    margin-bottom:16px;
}

.edu-card-head{
    padding:14px 18px;
    border-bottom:1px solid var(--admin-line-2);
    background:linear-gradient(180deg,#fbfcff 0%, #ffffff 100%);
}

.edu-card-title{
    margin:0;
    font-size:20px;
    font-weight:800;
    color:var(--admin-title);
}

.edu-filter-body{
    padding:16px 18px;
}

.edu-filter-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(180px,1fr));
    gap:12px;
    align-items:end;
}

.edu-filter-item{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.edu-filter-label{
    font-size:12px;
    font-weight:700;
    color:#475467;
}

.edu-filter-input,
.edu-filter-select{
    width:100%;
    min-height:40px;
    padding:0 12px;
    border:1px solid #d8dee8;
    border-radius:10px;
    background:#fff;
    font-size:13px;
    color:#111827;
}

.edu-inline{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.edu-inline input[type="text"]{
    min-height:40px;
    padding:0 12px;
    border:1px solid #d8dee8;
    border-radius:10px;
    background:#fff;
    font-size:13px;
    color:#111827;
}

.edu-inline input[type="checkbox"]{
    transform:translateY(1px);
}

.edu-action-row{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.edu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    border-radius:10px;
    border:1px solid #d8dee8;
    background:var(--admin-surface-2);
    color:#334155;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.edu-btn.primary{
    background:var(--admin-primary);
    border-color:var(--admin-primary);
    color:#fff;
}

.edu-btn.warn{
    background:#fff7ed;
    border-color:#fed7aa;
    color:#9a3412;
}

.edu-btn.danger{
    background:#fef2f2;
    border-color:#fecaca;
    color:#b91c1c;
}

.edu-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:14px 18px;
    border-top:1px solid var(--admin-line-2);
}

.edu-summary-left,
.edu-summary-right{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.edu-table-wrap{
    width:100%;
    overflow-x:auto;
    border-top:1px solid var(--admin-line-2);
}

.edu-table{
    width:100%;
    min-width:1200px;
    border-collapse:collapse;
    background:#fff;
}

.edu-table th{
    padding:10px 8px;
    background:#3366FF;
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-align:center;
    border-bottom:1px solid #2956d8;
    white-space:nowrap;
}

.edu-table td{
    padding:10px 8px;
    font-size:13px;
    color:#1f2937;
    border-bottom:1px solid #edf2f7;
    vertical-align:top;
    background:#fff;
}

.edu-table tbody tr:hover td{
    background:#fff7f2;
}

.edu-row-click{
    cursor:pointer;
}

.edu-mobile-list{
    display:none;
}

.edu-mobile-item{
    background:#fff;
    border:1px solid var(--admin-line);
    border-radius:16px;
    box-shadow:var(--admin-shadow);
    margin-bottom:12px;
    overflow:hidden;
}

.edu-mobile-head{
    padding:12px 14px;
    border-bottom:1px solid var(--admin-line-2);
    background:#fbfcff;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
}

.edu-mobile-title{
    font-size:15px;
    font-weight:800;
    color:var(--admin-title);
    line-height:1.4;
}

.edu-mobile-sub{
    font-size:12px;
    color:var(--admin-text-soft);
    margin-top:2px;
}

.edu-mobile-body{
    padding:12px 14px;
    display:grid;
    gap:8px;
}

.edu-mobile-row{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:8px;
    align-items:start;
    font-size:13px;
    line-height:1.6;
}

.edu-mobile-label{
    color:#667085;
    font-weight:700;
}

.edu-mobile-value{
    color:#111827;
    word-break:break-word;
}

.edu-mobile-actions{
    padding:12px 14px 14px 14px;
    border-top:1px solid var(--admin-line-2);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.edu-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:0 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    background:#eef3ff;
    color:#2747c7;
}

.edu-badge.red{
    background:#fef2f2;
    color:#b91c1c;
}

.edu-badge.gray{
    background:#f3f4f6;
    color:#b8bfc9;
}

.edu-note-red{ color:#dc2626; font-weight:700; }
.edu-note-blue{ color:#2563eb; font-weight:700; }

@media (max-width:1200px){
    .edu-filter-grid{
        grid-template-columns:repeat(2,minmax(180px,1fr));
    }
}

@media (max-width:768px){
    .edu-page{
        padding:12px;
    }

    .edu-card-head,
    .edu-filter-body,
    .edu-summary{
        padding:12px 14px;
    }

    .edu-card-title{
        font-size:18px;
    }

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

    .edu-inline{
        flex-direction:column;
        align-items:stretch;
    }

    .edu-inline input[type="text"],
    .edu-inline .edu-filter-select{
        width:100%;
    }

    .edu-action-row .edu-btn,
    .edu-summary-right .edu-btn{
        flex:1 1 calc(50% - 8px);
    }

    .edu-table-wrap{
        display:none;
    }

    .edu-mobile-list{
        display:block;
        margin-top:12px;
    }
}

/* =========================================
   Slim Topbar - fixed version
========================================= */

.slim-topbar{
    padding:8px 14px;
    border-bottom:1px solid var(--admin-line);
    background:#fff;
    overflow:visible;
}

.slim-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap;
    position:relative;
}

.topbar-left.compact-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
}

.brand-mini.compact-brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:0 1 auto;
}

.brand-mini.compact-brand > img{
    width:56px;
    height:56px;
    flex:0 0 auto;
    flex-shrink:0;
    max-width:none;
}

.brand-mini.compact-brand .compact-brand-block{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    flex:0 1 auto;
}

.brand-mini.compact-brand .site-title-28{
    display:block;
    margin:0;
    padding:0;
    font-size:24px;
    line-height:1.05;
    font-weight:800;
    color:var(--admin-title);
    letter-spacing:-0.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.brand-mini.compact-brand .page-sub-text{
    margin-top:2px;
    font-size:12px;
    color:var(--admin-text-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.topbar-right.topbar-right-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-start;
    gap:6px;
    flex:0 0 auto;
    min-width:0;
    position:relative;
    margin-left:auto;
}

.topbar-main-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;
    width:auto;
}

.topbar-more-panel{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    width:100%;
}

.topbar-actions-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;
    width:100%;
}

.topbar-meta-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
    white-space:nowrap;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-bottom:2px;
}

.topbar-display-controls{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
    white-space:nowrap;
    flex:0 0 auto;
}

.meta-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:26px;
    padding:0 10px;
    border:1px solid var(--admin-line);
    border-radius:999px;
    background:#f8fafc;
    color:var(--admin-text-soft);
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    flex:0 0 auto;
}

.meta-chip strong{
    color:var(--admin-title);
    font-weight:800;
}

.slim-tools{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    padding-top:2px;
    border-top:0;
}

.compact-topbar .tool-btn.mini-btn{
    min-height:30px;
    padding:0 10px;
    font-size:12px;
    border-radius:8px;
    flex:0 0 auto;
}

.board-btn,
.tool-btn,
.board-select.sm{
    flex:0 0 auto;
}

.topbar-more-toggle{
    display:none;
}

.admin-topbar.slim-topbar.has-extra-tools{
    padding-bottom:8px;
}

@media (max-width:1200px){
    :root{
        --header-offset:104px;
    }
}

@media (max-width:980px){
    .admin-sidebar{
        top:0;
        height:100vh;
        transform:translateX(-100%);
        transition:transform .25s ease;
        width:min(82vw,300px);
        box-shadow:0 18px 40px rgba(15,23,42,0.22);
        z-index:1100;
    }

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

    .admin-main{
        margin-left:0;
        min-height:100vh;
    }
}

@media (min-width:769px){
    .topbar-more-panel{
        display:flex !important;
        position:static;
        border:0;
        padding-top:0;
        margin-top:0;
        background:transparent;
        box-shadow:none;
    }

    .topbar-more-toggle{
        display:none !important;
    }
}

@media (max-width:768px){
    :root{
        --header-offset:82px;
    }

    .slim-topbar{
        padding:8px;
    }

    .slim-row{
        gap:8px;
        align-items:flex-start;
    }

    .topbar-left.compact-left{
        gap:8px;
        flex:1 1 auto;
        min-width:0;
    }

    .brand-mini.compact-brand{
        gap:8px;
        min-width:0;
    }

    .brand-mini.compact-brand > img{
        width:42px;
        height:42px;
        flex-shrink:0;
    }

    .brand-mini.compact-brand .site-title-28{
        font-size:15px;
        line-height:1.1;
        white-space:nowrap;
    }

    .brand-mini.compact-brand .page-sub-text{
        font-size:11px;
    }

    .topbar-right.topbar-right-stack{
        flex:0 0 auto;
        align-items:flex-end;
        gap:4px;
        position:relative;
    }

    .topbar-main-row{
        gap:6px;
        width:auto;
    }

    .topbar-more-toggle{
        display:inline-flex !important;
    }

    .topbar-more-panel{
        display:none;
        position:absolute;
        top:100%;
        right:0;
        width:min(92vw, 420px);
        min-width:300px;
        margin-top:6px;
        padding:10px;
        border:1px solid var(--admin-line);
        border-radius:12px;
        background:#fff;
        box-shadow:0 12px 28px rgba(15,23,42,0.12);
        z-index:3000;
        align-items:stretch;
    }

    .topbar-right-stack.open .topbar-more-panel{
        display:flex;
    }

    .topbar-actions-row{
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:8px;
        width:100%;
        overflow:visible;
        white-space:normal;
    }

    .topbar-meta-row{
        justify-content:flex-start;
        gap:6px;
        width:100%;
        overflow-x:auto;
        white-space:nowrap;
    }

    .topbar-display-controls{
        width:100%;
        flex-wrap:wrap;
    }

    .meta-chip{
        font-size:11px;
        min-height:24px;
        padding:0 8px;
    }

    .compact-topbar .tool-btn.mini-btn{
        min-height:28px;
        padding:0 8px;
        font-size:11px;
    }

    .board-select.sm{
        min-width:84px;
        font-size:12px;
    }
}

/* =====================================================
   Password eye button
===================================================== */

.pw-input-wrap{
    position:relative;
    width:100%;
}

.field-input.with-eye{
    padding-right:55px !important;
}

.pw-toggle-btn{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:20px;
    color:#667085;
}

.pw-toggle-btn:hover{
    color:#1e2a5a;
    background:#f3f6fb;
    border-radius:8px;
}

.pw-toggle-btn:active{
    transform:translateY(-50%) scale(0.95);
}

/* =====================================================
   Font Scale System
===================================================== */

body.font-scale-normal{
    font-size:14px;
    line-height:1.5;
}

body.font-scale-large{
    font-size:16px;
    line-height:1.65;
}

body.font-scale-large .menu-link{
    font-size:17px;
    line-height:1.45;
}

body.font-scale-large .menu-section-title{
    font-size:15px;
}

body.font-scale-large .menu-user-title{
    font-size:16px;
}

body.font-scale-large .menu-user-sub{
    font-size:13px;
}

body.font-scale-large .page-title-text{
    font-size:20px;
}

body.font-scale-large .site-title-28{
    font-size:28px;
}

body.font-scale-large .page-sub-text{
    font-size:13px;
}

body.font-scale-large .meta-chip{
    font-size:13px;
    min-height:30px;
}

body.font-scale-large .ui-btn,
body.font-scale-large .tool-btn{
    font-size:14px;
}

body.font-scale-large .compact-topbar .tool-btn.mini-btn{
    min-height:34px;
    padding:0 12px;
    font-size:13px;
}

.font-scale-btn.active{
    background:#3154d3 !important;
    color:#fff !important;
    border-color:#3154d3 !important;
}

body.font-scale-xlarge{
    font-size:18px;
    line-height:1.82;
}

body.font-scale-xlarge .page-title-text{ font-size:24px; }
body.font-scale-xlarge .site-title-28{ font-size:32px; }
body.font-scale-xlarge .page-sub-text{ font-size:14px; }
body.font-scale-xlarge .menu-link{ font-size:19px; line-height:1.55; }
body.font-scale-xlarge .menu-section-title{ font-size:17px; }
body.font-scale-xlarge .menu-user-title{ font-size:18px; }
body.font-scale-xlarge .menu-user-sub{ font-size:14px; }
body.font-scale-xlarge .meta-chip{ font-size:14px; min-height:34px; }
body.font-scale-xlarge .ui-btn,
body.font-scale-xlarge .tool-btn,
body.font-scale-xlarge .filter-input,
body.font-scale-xlarge .filter-select,
body.font-scale-xlarge .edu-filter-input,
body.font-scale-xlarge .edu-filter-select,
body.font-scale-xlarge .topbar-display-select{ font-size:16px !important; }
body.font-scale-xlarge .compact-topbar .tool-btn.mini-btn{ min-height:36px; padding:0 13px; font-size:15px; }
body.font-scale-xlarge .topbar-display-select{ min-height:36px; height:36px; }
body.font-scale-xlarge .filter-label,
body.font-scale-xlarge .edu-filter-label,
body.font-scale-xlarge .ui-label{ font-size:14px; }
body.font-scale-xlarge .page-title,
body.font-scale-xlarge .edu-card-title{ font-size:24px; }
body.font-scale-xlarge .edu-table th{ font-size:15px; }
body.font-scale-xlarge .edu-table td{ font-size:16px; line-height:1.8; }
body.font-scale-xlarge .edu-mobile-title{ font-size:19px; }
body.font-scale-xlarge .edu-mobile-sub,
body.font-scale-xlarge .edu-mobile-row,
body.font-scale-xlarge .edu-badge,
body.font-scale-xlarge .edu-tag,
body.font-scale-xlarge .ui-badge,
body.font-scale-xlarge .ui-tag{ font-size:14px; }

@media (max-width:768px){
    body.font-scale-large{
        font-size:17px;
    }

    body.font-scale-large .menu-link{
        font-size:18px;
    }

    body.font-scale-large .menu-section-title{
        font-size:15px;
    }

    body.font-scale-large .site-title-28{
        font-size:22px;
    }

    body.font-scale-large .page-sub-text{
        font-size:13px;
    }

    body.font-scale-large .meta-chip{
        font-size:12px;
    }

    body.font-scale-large .compact-topbar .tool-btn.mini-btn{
        min-height:32px;
        font-size:12px;
    }

    body.font-scale-xlarge{
        font-size:19px;
    }

    body.font-scale-xlarge .menu-link{
        font-size:20px;
    }

    body.font-scale-xlarge .site-title-28{
        font-size:24px;
    }

    body.font-scale-xlarge .meta-chip{
        font-size:13px;
    }

    body.font-scale-xlarge .compact-topbar .tool-btn.mini-btn{
        min-height:34px;
        font-size:14px;
    }
}

/* =====================================================
   Extended Button / Badge Color System
===================================================== */

.ui-btn,
.btn,
.edu-btn,
.tool-btn{
    transition:all .18s ease;
}

.ui-btn.red,.btn.red,.edu-btn.red,.tool-btn.red,
.ui-btn.green,.btn.green,.edu-btn.green,.tool-btn.green,
.ui-btn.ochre,.btn.ochre,.edu-btn.ochre,.tool-btn.ochre,
.ui-btn.blue,.btn.blue,.edu-btn.blue,.tool-btn.blue,
.ui-btn.purple,.btn.purple,.edu-btn.purple,.tool-btn.purple,
.ui-btn.black,.btn.black,.edu-btn.black,.tool-btn.black,
.ui-btn.sky,.btn.sky,.edu-btn.sky,.tool-btn.sky{
    color:#fff;
}

.ui-btn.red,.btn.red,.edu-btn.red,.tool-btn.red{ background:var(--admin-red); border-color:var(--admin-red); }
.ui-btn.green,.btn.green,.edu-btn.green,.tool-btn.green{ background:var(--admin-green); border-color:var(--admin-green); }
.ui-btn.ochre,.btn.ochre,.edu-btn.ochre,.tool-btn.ochre{ background:var(--admin-ochre); border-color:var(--admin-ochre); }
.ui-btn.blue,.btn.blue,.edu-btn.blue,.tool-btn.blue{ background:var(--admin-blue); border-color:var(--admin-blue); }
.ui-btn.purple,.btn.purple,.edu-btn.purple,.tool-btn.purple{ background:var(--admin-purple); border-color:var(--admin-purple); }
.ui-btn.yellow,.btn.yellow,.edu-btn.yellow,.tool-btn.yellow{ background:var(--admin-yellow-soft); border-color:var(--admin-yellow-line); color:#8a5a00; }
.ui-btn.black,.btn.black,.edu-btn.black,.tool-btn.black{ background:var(--admin-black); border-color:var(--admin-black); }
.ui-btn.gray,.btn.gray,.edu-btn.gray,.tool-btn.gray{ background:var(--admin-gray-soft); border-color:var(--admin-gray-line); color:#4b5563; }
.ui-btn.sky,.btn.sky,.edu-btn.sky,.tool-btn.sky{ background:var(--admin-sky); border-color:var(--admin-sky); }

.ui-btn.soft-red,.btn.soft-red,.edu-btn.soft-red,.tool-btn.soft-red{ background:var(--admin-red-soft); color:var(--admin-red); border-color:var(--admin-red-line); }
.ui-btn.soft-green,.btn.soft-green,.edu-btn.soft-green,.tool-btn.soft-green{ background:var(--admin-green-soft); color:#15803d; border-color:var(--admin-green-line); }
.ui-btn.soft-ochre,.btn.soft-ochre,.edu-btn.soft-ochre,.tool-btn.soft-ochre{ background:var(--admin-ochre-soft); color:var(--admin-ochre); border-color:var(--admin-ochre-line); }
.ui-btn.soft-blue,.btn.soft-blue,.edu-btn.soft-blue,.tool-btn.soft-blue{ background:var(--admin-blue-soft); color:var(--admin-blue); border-color:var(--admin-blue-line); }
.ui-btn.soft-purple,.btn.soft-purple,.edu-btn.soft-purple,.tool-btn.soft-purple{ background:var(--admin-purple-soft); color:var(--admin-purple); border-color:var(--admin-purple-line); }
.ui-btn.soft-yellow,.btn.soft-yellow,.edu-btn.soft-yellow,.tool-btn.soft-yellow{ background:var(--admin-yellow-soft); color:#a16207; border-color:var(--admin-yellow-line); }
.ui-btn.soft-black,.btn.soft-black,.edu-btn.soft-black,.tool-btn.soft-black{ background:var(--admin-black-soft); color:var(--admin-black); border-color:var(--admin-black-line); }
.ui-btn.soft-gray,.btn.soft-gray,.edu-btn.soft-gray,.tool-btn.soft-gray{ background:var(--admin-gray-soft); color:var(--admin-gray); border-color:var(--admin-gray-line); }
.ui-btn.soft-sky,.btn.soft-sky,.edu-btn.soft-sky,.tool-btn.soft-sky{ background:var(--admin-sky-soft); color:var(--admin-sky); border-color:var(--admin-sky-line); }

.ui-btn.line-red,.btn.line-red,.edu-btn.line-red,.tool-btn.line-red,
.ui-btn.line-green,.btn.line-green,.edu-btn.line-green,.tool-btn.line-green,
.ui-btn.line-ochre,.btn.line-ochre,.edu-btn.line-ochre,.tool-btn.line-ochre,
.ui-btn.line-blue,.btn.line-blue,.edu-btn.line-blue,.tool-btn.line-blue,
.ui-btn.line-purple,.btn.line-purple,.edu-btn.line-purple,.tool-btn.line-purple,
.ui-btn.line-yellow,.btn.line-yellow,.edu-btn.line-yellow,.tool-btn.line-yellow,
.ui-btn.line-black,.btn.line-black,.edu-btn.line-black,.tool-btn.line-black,
.ui-btn.line-gray,.btn.line-gray,.edu-btn.line-gray,.tool-btn.line-gray,
.ui-btn.line-sky,.btn.line-sky,.edu-btn.line-sky,.tool-btn.line-sky,
.ui-btn.ghost-red,.btn.ghost-red,.edu-btn.ghost-red,.tool-btn.ghost-red,
.ui-btn.ghost-green,.btn.ghost-green,.edu-btn.ghost-green,.tool-btn.ghost-green,
.ui-btn.ghost-ochre,.btn.ghost-ochre,.edu-btn.ghost-ochre,.tool-btn.ghost-ochre,
.ui-btn.ghost-blue,.btn.ghost-blue,.edu-btn.ghost-blue,.tool-btn.ghost-blue,
.ui-btn.ghost-purple,.btn.ghost-purple,.edu-btn.ghost-purple,.tool-btn.ghost-purple,
.ui-btn.ghost-yellow,.btn.ghost-yellow,.edu-btn.ghost-yellow,.tool-btn.ghost-yellow,
.ui-btn.ghost-black,.btn.ghost-black,.edu-btn.ghost-black,.tool-btn.ghost-black,
.ui-btn.ghost-gray,.btn.ghost-gray,.edu-btn.ghost-gray,.tool-btn.ghost-gray,
.ui-btn.ghost-sky,.btn.ghost-sky,.edu-btn.ghost-sky,.tool-btn.ghost-sky{
    background:transparent;
}

.ui-btn.line-red,.btn.line-red,.edu-btn.line-red,.tool-btn.line-red,.ui-btn.ghost-red,.btn.ghost-red,.edu-btn.ghost-red,.tool-btn.ghost-red{ color:var(--admin-red); border-color:var(--admin-red-line); }
.ui-btn.line-green,.btn.line-green,.edu-btn.line-green,.tool-btn.line-green,.ui-btn.ghost-green,.btn.ghost-green,.edu-btn.ghost-green,.tool-btn.ghost-green{ color:#15803d; border-color:var(--admin-green-line); }
.ui-btn.line-ochre,.btn.line-ochre,.edu-btn.line-ochre,.tool-btn.line-ochre,.ui-btn.ghost-ochre,.btn.ghost-ochre,.edu-btn.ghost-ochre,.tool-btn.ghost-ochre{ color:var(--admin-ochre); border-color:var(--admin-ochre-line); }
.ui-btn.line-blue,.btn.line-blue,.edu-btn.line-blue,.tool-btn.line-blue,.ui-btn.ghost-blue,.btn.ghost-blue,.edu-btn.ghost-blue,.tool-btn.ghost-blue{ color:var(--admin-blue); border-color:var(--admin-blue-line); }
.ui-btn.line-purple,.btn.line-purple,.edu-btn.line-purple,.tool-btn.line-purple,.ui-btn.ghost-purple,.btn.ghost-purple,.edu-btn.ghost-purple,.tool-btn.ghost-purple{ color:var(--admin-purple); border-color:var(--admin-purple-line); }
.ui-btn.line-yellow,.btn.line-yellow,.edu-btn.line-yellow,.tool-btn.line-yellow,.ui-btn.ghost-yellow,.btn.ghost-yellow,.edu-btn.ghost-yellow,.tool-btn.ghost-yellow{ color:#a16207; border-color:var(--admin-yellow-line); }
.ui-btn.line-black,.btn.line-black,.edu-btn.line-black,.tool-btn.line-black,.ui-btn.ghost-black,.btn.ghost-black,.edu-btn.ghost-black,.tool-btn.ghost-black{ color:var(--admin-black); border-color:var(--admin-black-line); }
.ui-btn.line-gray,.btn.line-gray,.edu-btn.line-gray,.tool-btn.line-gray,.ui-btn.ghost-gray,.btn.ghost-gray,.edu-btn.ghost-gray,.tool-btn.ghost-gray{ color:var(--admin-gray); border-color:var(--admin-gray-line); }
.ui-btn.line-sky,.btn.line-sky,.edu-btn.line-sky,.tool-btn.line-sky,.ui-btn.ghost-sky,.btn.ghost-sky,.edu-btn.ghost-sky,.tool-btn.ghost-sky{ color:var(--admin-sky); border-color:var(--admin-sky-line); }

.ui-btn.line-red:hover,.btn.line-red:hover,.edu-btn.line-red:hover,.tool-btn.line-red:hover,.ui-btn.ghost-red:hover,.btn.ghost-red:hover,.edu-btn.ghost-red:hover,.tool-btn.ghost-red:hover{ background:var(--admin-red-soft); }
.ui-btn.line-green:hover,.btn.line-green:hover,.edu-btn.line-green:hover,.tool-btn.line-green:hover,.ui-btn.ghost-green:hover,.btn.ghost-green:hover,.edu-btn.ghost-green:hover,.tool-btn.ghost-green:hover{ background:var(--admin-green-soft); }
.ui-btn.line-ochre:hover,.btn.line-ochre:hover,.edu-btn.line-ochre:hover,.tool-btn.line-ochre:hover,.ui-btn.ghost-ochre:hover,.btn.ghost-ochre:hover,.edu-btn.ghost-ochre:hover,.tool-btn.ghost-ochre:hover{ background:var(--admin-ochre-soft); }
.ui-btn.line-blue:hover,.btn.line-blue:hover,.edu-btn.line-blue:hover,.tool-btn.line-blue:hover,.ui-btn.ghost-blue:hover,.btn.ghost-blue:hover,.edu-btn.ghost-blue:hover,.tool-btn.ghost-blue:hover{ background:var(--admin-blue-soft); }
.ui-btn.line-purple:hover,.btn.line-purple:hover,.edu-btn.line-purple:hover,.tool-btn.line-purple:hover,.ui-btn.ghost-purple:hover,.btn.ghost-purple:hover,.edu-btn.ghost-purple:hover,.tool-btn.ghost-purple:hover{ background:var(--admin-purple-soft); }
.ui-btn.line-yellow:hover,.btn.line-yellow:hover,.edu-btn.line-yellow:hover,.tool-btn.line-yellow:hover,.ui-btn.ghost-yellow:hover,.btn.ghost-yellow:hover,.edu-btn.ghost-yellow:hover,.tool-btn.ghost-yellow:hover{ background:var(--admin-yellow-soft); }
.ui-btn.line-black:hover,.btn.line-black:hover,.edu-btn.line-black:hover,.tool-btn.line-black:hover,.ui-btn.ghost-black:hover,.btn.ghost-black:hover,.edu-btn.ghost-black:hover,.tool-btn.ghost-black:hover{ background:var(--admin-black-soft); }
.ui-btn.line-gray:hover,.btn.line-gray:hover,.edu-btn.line-gray:hover,.tool-btn.line-gray:hover,.ui-btn.ghost-gray:hover,.btn.ghost-gray:hover,.edu-btn.ghost-gray:hover,.tool-btn.ghost-gray:hover{ background:var(--admin-gray-soft); }
.ui-btn.line-sky:hover,.btn.line-sky:hover,.edu-btn.line-sky:hover,.tool-btn.line-sky:hover,.ui-btn.ghost-sky:hover,.btn.ghost-sky:hover,.edu-btn.ghost-sky:hover,.tool-btn.ghost-sky:hover{ background:var(--admin-sky-soft); }

.ui-btn.btn-xs,.btn.btn-xs,.edu-btn.btn-xs,.tool-btn.btn-xs{ min-height:24px; padding:0 6px; font-size:11px; border-radius:6px; }
.ui-btn.btn-sm,.btn.btn-sm,.edu-btn.btn-sm,.tool-btn.btn-sm{ min-height:30px; padding:0 9px; font-size:12px; border-radius:8px; }
.ui-btn.btn-md,.btn.btn-md,.edu-btn.btn-md,.tool-btn.btn-md{ min-height:38px; padding:0 14px; }
.ui-btn.btn-lg,.btn.btn-lg,.edu-btn.btn-lg,.tool-btn.btn-lg{ min-height:44px; padding:0 18px; font-size:14px; border-radius:12px; }
.ui-btn.btn-xl,.btn.btn-xl,.edu-btn.btn-xl,.tool-btn.btn-xl{ min-height:50px; padding:0 22px; font-size:15px; border-radius:14px; }

.ui-btn.btn-pad-tight,.btn.btn-pad-tight,.edu-btn.btn-pad-tight,.tool-btn.btn-pad-tight{ padding-left:6px; padding-right:6px; }
.ui-btn.btn-pad-narrow,.btn.btn-pad-narrow,.edu-btn.btn-pad-narrow,.tool-btn.btn-pad-narrow{ padding-left:10px; padding-right:10px; }
.ui-btn.btn-pad-wide,.btn.btn-pad-wide,.edu-btn.btn-pad-wide,.tool-btn.btn-pad-wide{ padding-left:18px; padding-right:18px; }
.ui-btn.btn-pad-xwide,.btn.btn-pad-xwide,.edu-btn.btn-pad-xwide,.tool-btn.btn-pad-xwide{ padding-left:24px; padding-right:24px; }

.ui-badge,
.edu-badge,
.meta-chip{
    border:1px solid transparent;
}

.ui-badge,
.edu-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:0 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    line-height:1;
}

.ui-badge.badge-red,.edu-badge.badge-red{ background:var(--admin-red-soft); color:var(--admin-red); border-color:var(--admin-red-line); }
.ui-badge.badge-green,.edu-badge.badge-green{ background:var(--admin-green-soft); color:#15803d; border-color:var(--admin-green-line); }
.ui-badge.badge-ochre,.edu-badge.badge-ochre{ background:var(--admin-ochre-soft); color:var(--admin-ochre); border-color:var(--admin-ochre-line); }
.ui-badge.badge-blue,.edu-badge.badge-blue{ background:var(--admin-blue-soft); color:var(--admin-blue); border-color:var(--admin-blue-line); }
.ui-badge.badge-purple,.edu-badge.badge-purple{ background:var(--admin-purple-soft); color:var(--admin-purple); border-color:var(--admin-purple-line); }
.ui-badge.badge-yellow,.edu-badge.badge-yellow{ background:var(--admin-yellow-soft); color:#a16207; border-color:var(--admin-yellow-line); }
.ui-badge.badge-black,.edu-badge.badge-black{ background:var(--admin-black); color:#fff; border-color:var(--admin-black); }
.ui-badge.badge-gray,.edu-badge.badge-gray{ background:var(--admin-gray-soft); color:var(--admin-gray); border-color:var(--admin-gray-line); }
.ui-badge.badge-sky,.edu-badge.badge-sky{ background:var(--admin-sky-soft); color:var(--admin-sky); border-color:var(--admin-sky-line); }

.ui-badge.badge-outline-red,.edu-badge.badge-outline-red{ background:#fff; color:var(--admin-red); border-color:var(--admin-red-line); }
.ui-badge.badge-outline-green,.edu-badge.badge-outline-green{ background:#fff; color:#15803d; border-color:var(--admin-green-line); }
.ui-badge.badge-outline-ochre,.edu-badge.badge-outline-ochre{ background:#fff; color:var(--admin-ochre); border-color:var(--admin-ochre-line); }
.ui-badge.badge-outline-blue,.edu-badge.badge-outline-blue{ background:#fff; color:var(--admin-blue); border-color:var(--admin-blue-line); }
.ui-badge.badge-outline-purple,.edu-badge.badge-outline-purple{ background:#fff; color:var(--admin-purple); border-color:var(--admin-purple-line); }
.ui-badge.badge-outline-yellow,.edu-badge.badge-outline-yellow{ background:#fff; color:#a16207; border-color:var(--admin-yellow-line); }
.ui-badge.badge-outline-black,.edu-badge.badge-outline-black{ background:#fff; color:var(--admin-black); border-color:var(--admin-black-line); }
.ui-badge.badge-outline-gray,.edu-badge.badge-outline-gray{ background:#fff; color:var(--admin-gray); border-color:var(--admin-gray-line); }
.ui-badge.badge-outline-sky,.edu-badge.badge-outline-sky{ background:#fff; color:var(--admin-sky); border-color:var(--admin-sky-line); }

.ui-badge.badge-xs,.edu-badge.badge-xs{ min-height:18px; padding:0 5px; font-size:10px; }
.ui-badge.badge-sm,.edu-badge.badge-sm{ min-height:20px; padding:0 6px; font-size:10px; }
.ui-badge.badge-md,.edu-badge.badge-md{ min-height:24px; padding:0 8px; font-size:11px; }
.ui-badge.badge-lg,.edu-badge.badge-lg{ min-height:28px; padding:0 10px; font-size:12px; }
.ui-badge.badge-xl,.edu-badge.badge-xl{ min-height:32px; padding:0 12px; font-size:13px; }

.ui-badge.badge-pad-tight,.edu-badge.badge-pad-tight{ padding-left:5px; padding-right:5px; }
.ui-badge.badge-pad-narrow,.edu-badge.badge-pad-narrow{ padding-left:7px; padding-right:7px; }
.ui-badge.badge-pad-wide,.edu-badge.badge-pad-wide{ padding-left:12px; padding-right:12px; }
.ui-badge.badge-pad-xwide,.edu-badge.badge-pad-xwide{ padding-left:16px; padding-right:16px; }

/* =====================================================
   Topbar display / width tokens
===================================================== */

.topbar-display-controls{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.topbar-display-select{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:none;
    height:30px;
    min-height:30px;
    padding:0 28px 0 10px;
    border:1px solid #d8dee8;
    border-radius:8px;
    background-color:#fff;
    color:#344054;
    font-size:12px;
    font-weight:700;
    line-height:1;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, #667085 50%),
        linear-gradient(135deg, #667085 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
    background-position:
        calc(100% - 14px) calc(50% - 1px),
        calc(100% - 9px) calc(50% - 1px),
        100% 0;
    background-size:5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat:no-repeat;
}

.topbar-display-select:hover{
    border-color:#c7d4ff;
    background-color:#f8fbff;
}

.topbar-display-select:focus{
    outline:none;
    border-color:#9db3ff;
    box-shadow:0 0 0 3px rgba(49,84,211,0.10);
    background-color:#fff;
}

/* generic width tokens */
.ui-size.xxxs{ width:20px !important; min-width:20px !important; max-width:20px !important; }
.ui-size.xxs{ width:40px !important; min-width:40px !important; max-width:40px !important; }
.ui-size.xs{ width:60px !important; min-width:60px !important; max-width:60px !important; }
.ui-size.sm{ width:88px !important; min-width:88px !important; max-width:88px !important; }
.ui-size.md{ width:120px !important; min-width:120px !important; max-width:120px !important; }
.ui-size.lg{ width:152px !important; min-width:152px !important; max-width:152px !important; }
.ui-size.xl{ width:184px !important; min-width:184px !important; max-width:184px !important; }
.ui-size.xxl{ width:264px !important; min-width:264px !important; max-width:264px !important; }
.ui-size.date{ width:86px !important; min-width:86px !important; max-width:86px !important; }

.ui-input,
.ui-select,
.filter-input,
.filter-select,
.edu-filter-input,
.edu-filter-select,
.topbar-display-select{
    box-sizing:border-box;
}

/* standalone width classes */
.select-xxxs, .input-xxxs{ width:20px !important; min-width:20px !important; max-width:20px !important; }
.select-xxs,  .input-xxs { width:40px !important; min-width:40px !important; max-width:40px !important; }
.select-xs,   .input-xs  { width:60px !important; min-width:60px !important; max-width:60px !important; }
.select-sm,   .input-sm  { width:88px !important; min-width:88px !important; max-width:88px !important; }
.select-md,   .input-md  { width:120px !important; min-width:120px !important; max-width:120px !important; }
.select-lg,   .input-lg  { width:152px !important; min-width:152px !important; max-width:152px !important; }
.select-xl,   .input-xl  { width:184px !important; min-width:184px !important; max-width:184px !important; }
.select-xxl,  .input-xxl { width:264px !important; min-width:264px !important; max-width:264px !important; }
.select-date, .input-date{ width:86px !important; min-width:86px !important; max-width:86px !important; }

/* compatibility width rules */
.filter-input.xxxs, .filter-select.xxxs, .edu-filter-input.xxxs, .edu-filter-select.xxxs, .topbar-display-select.xxxs,
.filter-input.ui-size.xxxs, .filter-select.ui-size.xxxs, .edu-filter-input.ui-size.xxxs, .edu-filter-select.ui-size.xxxs, .topbar-display-select.ui-size.xxxs,
.filter-select.select-xxxs, .filter-input.input-xxxs, .edu-filter-select.select-xxxs, .edu-filter-input.input-xxxs, .topbar-display-select.select-xxxs, .ui-select.select-xxxs, .ui-input.input-xxxs{
    width:20px !important; min-width:20px !important; max-width:20px !important;
}

.filter-input.xxs, .filter-select.xxs, .edu-filter-input.xxs, .edu-filter-select.xxs, .topbar-display-select.xxs,
.filter-input.ui-size.xxs, .filter-select.ui-size.xxs, .edu-filter-input.ui-size.xxs, .edu-filter-select.ui-size.xxs, .topbar-display-select.ui-size.xxs,
.filter-select.select-xxs, .filter-input.input-xxs, .edu-filter-select.select-xxs, .edu-filter-input.input-xxs, .topbar-display-select.select-xxs, .ui-select.select-xxs, .ui-input.input-xxs{
    width:40px !important; min-width:40px !important; max-width:40px !important;
}

.filter-input.xs, .filter-select.xs, .edu-filter-input.xs, .edu-filter-select.xs, .topbar-display-select.xs,
.filter-input.ui-size.xs, .filter-select.ui-size.xs, .edu-filter-input.ui-size.xs, .edu-filter-select.ui-size.xs, .topbar-display-select.ui-size.xs,
.filter-select.select-xs, .filter-input.input-xs, .edu-filter-select.select-xs, .edu-filter-input.input-xs, .topbar-display-select.select-xs, .ui-select.select-xs, .ui-input.input-xs{
    width:60px !important; min-width:60px !important; max-width:60px !important;
}

.filter-input.sm, .filter-select.sm, .edu-filter-input.sm, .edu-filter-select.sm, .topbar-display-select.sm,
.filter-input.ui-size.sm, .filter-select.ui-size.sm, .edu-filter-input.ui-size.sm, .edu-filter-select.ui-size.sm, .topbar-display-select.ui-size.sm,
.filter-select.select-sm, .filter-input.input-sm, .edu-filter-select.select-sm, .edu-filter-input.input-sm, .topbar-display-select.select-sm, .ui-select.select-sm, .ui-input.input-sm{
    width:88px !important; min-width:88px !important; max-width:88px !important;
}

.filter-input.md, .filter-select.md, .edu-filter-input.md, .edu-filter-select.md, .topbar-display-select.md,
.filter-input.ui-size.md, .filter-select.ui-size.md, .edu-filter-input.ui-size.md, .edu-filter-select.ui-size.md, .topbar-display-select.ui-size.md,
.filter-select.select-md, .filter-input.input-md, .edu-filter-select.select-md, .edu-filter-input.input-md, .topbar-display-select.select-md, .ui-select.select-md, .ui-input.input-md{
    width:120px !important; min-width:120px !important; max-width:120px !important;
}

.filter-input.lg, .filter-select.lg, .edu-filter-input.lg, .edu-filter-select.lg, .topbar-display-select.lg,
.filter-input.ui-size.lg, .filter-select.ui-size.lg, .edu-filter-input.ui-size.lg, .edu-filter-select.ui-size.lg, .topbar-display-select.ui-size.lg,
.filter-select.select-lg, .filter-input.input-lg, .edu-filter-select.select-lg, .edu-filter-input.input-lg, .topbar-display-select.select-lg, .ui-select.select-lg, .ui-input.input-lg{
    width:152px !important; min-width:152px !important; max-width:152px !important;
}

.filter-input.xl, .filter-select.xl, .edu-filter-input.xl, .edu-filter-select.xl, .topbar-display-select.xl,
.filter-input.ui-size.xl, .filter-select.ui-size.xl, .edu-filter-input.ui-size.xl, .edu-filter-select.ui-size.xl, .topbar-display-select.ui-size.xl,
.filter-select.select-xl, .filter-input.input-xl, .edu-filter-select.select-xl, .edu-filter-input.input-xl, .topbar-display-select.select-xl, .ui-select.select-xl, .ui-input.input-xl{
    width:184px !important; min-width:184px !important; max-width:184px !important;
}

.filter-input.xxl, .filter-select.xxl, .edu-filter-input.xxl, .edu-filter-select.xxl, .topbar-display-select.xxl,
.filter-input.ui-size.xxl, .filter-select.ui-size.xxl, .edu-filter-input.ui-size.xxl, .edu-filter-select.ui-size.xxl, .topbar-display-select.ui-size.xxl,
.filter-select.select-xxl, .filter-input.input-xxl, .edu-filter-select.select-xxl, .edu-filter-input.input-xxl, .topbar-display-select.select-xxl, .ui-select.select-xxl, .ui-input.input-xxl{
    width:264px !important; min-width:264px !important; max-width:264px !important;
}

.filter-input.date, .filter-select.date, .edu-filter-input.date, .edu-filter-select.date, .topbar-display-select.date,
.filter-input.ui-size.date, .filter-select.ui-size.date, .edu-filter-input.ui-size.date, .edu-filter-select.ui-size.date, .topbar-display-select.ui-size.date,
.filter-select.select-date, .filter-input.input-date, .edu-filter-select.select-date, .edu-filter-input.input-date, .topbar-display-select.select-date, .ui-select.select-date, .ui-input.input-date{
    width:86px !important; min-width:86px !important; max-width:86px !important;
}

/* recommended defaults */
.topbar-display-select.font-scale-select{ width:120px !important; min-width:120px !important; max-width:184px !important; }
.topbar-display-select.density-select{ width:100px !important; min-width:100px !important; max-width:152px !important; }

body.font-scale-large .topbar-display-select{
    font-size:13px;
    min-height:34px;
    height:34px;
}

/* menu density */
body.density-compact .menu-page{ padding:4px 6px 8px 6px; }
body.density-compact .menu-head{ padding:4px 2px 2px 2px; }
body.density-compact .menu-body{ gap:6px; margin-top:4px; }
body.density-compact .menu-section-toggle{ padding:8px 9px; }
body.density-compact .menu-section-body{ padding:3px; }
body.density-compact .menu-link{ padding:6px 10px 6px 12px; border-radius:9px; line-height:1.2; }

body.density-normal .menu-page{ padding:6px 8px 10px 8px; }
body.density-normal .menu-head{ padding:4px 4px 2px 4px; }
body.density-normal .menu-body{ gap:8px; margin-top:4px; }
body.density-normal .menu-section-toggle{ padding:10px 10px; }
body.density-normal .menu-section-body{ padding:4px; }
body.density-normal .menu-link{ padding:8px 12px 8px 14px; border-radius:10px; line-height:1.3; }

body.density-comfortable .menu-page{ padding:8px 10px 12px 10px; }
body.density-comfortable .menu-head{ padding:6px 4px 4px 4px; }
body.density-comfortable .menu-body{ gap:10px; margin-top:6px; }
body.density-comfortable .menu-section-toggle{ padding:12px 12px; }
body.density-comfortable .menu-section-body{ padding:5px; }
body.density-comfortable .menu-link{ padding:10px 14px 10px 16px; border-radius:12px; line-height:1.45; }

/* mobile safety */
@media (max-width:768px){
    .topbar-display-controls{
        width:100%;
    }

    .topbar-display-select{
        flex:1 1 auto;
        max-width:100%;
    }

    .topbar-display-select.font-scale-select{
        width:184px !important;
        min-width:184px !important;
        max-width:100%;
    }

    .topbar-display-select.density-select{
        width:152px !important;
        min-width:152px !important;
        max-width:100%;
    }

    .topbar-display-select.select-xxxs,
    .topbar-display-select.select-xxs,
    .topbar-display-select.select-xs,
    .topbar-display-select.select-sm,
    .topbar-display-select.select-md,
    .topbar-display-select.select-lg,
    .topbar-display-select.select-xl,
    .topbar-display-select.select-xxl,
    .topbar-display-select.select-date{
        max-width:100% !important;
    }
}

/* ===== 모바일 전용 버튼 ===== */
.menu-toggle,
.menu-close-btn{
    display:none;
}

@media (max-width:768px){
    .menu-toggle,
    .menu-close-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }
}