body {
    margin:0;
    font-family:'Segoe UI', sans-serif;
    background:#f4f6f9;
}

/* Çì´õ */
.header {
    height:60px;
    background:#ffffff;
    color:#333;
    border-bottom:1px solid #e0e0e0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}

.header button {
    background:none;
    border:none;
    color:#333;
    font-size:20px;
    cursor:pointer;
}

/* ·¹À̾ƿô */
.container { display:flex; height:calc(100vh - 60px); }

/* »çÀ̵å */
.sidebar {
    width:220px;
    background:#ffffff;
    color:#333;   /* ?? ÇÙ½É */
    padding:20px;
    box-shadow:2px 0 8px rgba(0,0,0,0.08);
    border-right:1px solid #e5e7eb;
}

.sidebar a {
    color:#333;
    text-decoration:none;
    display:block;
    padding:10px;
    border-radius:6px;
}

.sidebar a:hover {
    background:#e9f2ff;
}

.sidebar a.active {
    background:#4facfe;
    color:#fff;
}




/* Á¢Èû »óÅ */
.sidebar.collapsed {
    width:60px;
    overflow:hidden;
}

/* ÅؽºÆ® ¼û±è */
.sidebar.collapsed a {
    font-size:0;
}

/* ¾ÆÀÌÄܸ¸ ³²±â±â (³ªÁß ´ëºñ) */
.sidebar a i {
    font-size:16px;
}

/* ¸ÞÀÎ */
.main { flex:1; padding:20px; overflow:auto; }

/* Ä«µå */
.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.card {
    background:#fff;
    padding:18px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:all 0.2s ease;
}

.card:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* ¼½¼Ç */
.section {
    margin-top:20px;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:15px;
}

.list li {
    margin-bottom:8px;
}

a {
    text-decoration: none;
}

/* »óÀ§ ¸Þ´º */
/* »óÀ§ ¸Þ´º */
.menu-title {
    padding:10px 12px;
    color:#333;              /* ?? º¯°æ */
    cursor:pointer;
    border-radius:6px;
    transition:0.2s;
}

.menu-title:hover {
    background:#e9f2ff;      /* ?? ¹àÀº hover */
}

/* ÇÏÀ§ ¸Þ´º */
.submenu {
    display:none;
    padding-left:15px;
}

.submenu a {
    display:block;
    padding:8px 12px;
    color:#555;              /* ?? º¯°æ */
    text-decoration:none;
    border-radius:6px;
}

.submenu a:hover {
    background:#e9f2ff;      /* ?? º¯°æ */
}

/* ÆîÃÄÁø »óÅ */
.submenu.open {
    display:block;
}

/* È­»ìÇ¥ */
.arrow {
    float:right;
    transition:0.2s;
}

/* ȸÀü */
.menu-title.open .arrow {
    transform:rotate(90deg);
}

.main {
    height:calc(100vh - 60px);
}