@charset "UTF-8";

/* --- 슬라이드 메뉴 전용 CSS --- */
    
    /* 메뉴 배경 어두워지는 효과 (오버레이) */
    .menu-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 슬라이드 메뉴 본체 */
    .side-menu {
        position: absolute;
        top: 0; left: 0;
        width: 85%;
        height: 100%;
        background-color: #3b6dee;
        z-index: 20;
        color: white;
        transform: translateX(-100%); 
        transition: transform 0.3s ease-in-out;
        padding-top: 50px; /* 닫기 버튼 공간 확보 */
        overflow-y: auto;
    }
    .side-menu.open {
        transform: translateX(0);
    }

    /* 닫기(X) 버튼 스타일 */
    .btn-close-menu {
        position: absolute;
        top: 15px;
        left: 15px; /* 좌상단 배치 */
        font-size: 32px;
        color: white;
        background: none;
        border: none;
        cursor: pointer;
        line-height: 1;
        padding: 5px;
        opacity: 0.8;
    }
    .btn-close-menu:active {
        opacity: 1;
    }

    /* 메뉴 상단 디자인 */
    .menu-top { padding: 10px 20px 20px; text-align: center; }
    .menu-logo-area { 
	    margin-bottom: 20px; 
	    text-align: center; /* 이미지를 가운데 정렬 */
	}
	.menu-logo-area img {
	    max-width: 370px; /* 로고 이미지의 최대 너비 */
	    height: auto;     /* 비율 유지 */
	    display: inline-block;
	}
    .welcome-box { background-color: #f7ca44; color: #333; padding: 10px; border-radius: 20px; font-weight: bold; font-size: 14px; }
    
    /* 메인 링크 리스트 */
    .main-links { padding: 0 20px; list-style: none; margin: 0; }
    .main-links li { border-bottom: 1px solid rgba(255,255,255,0.3); }
    .main-links a { display: block; padding: 15px 5px; font-size: 16px; font-weight: bold; text-decoration: none; color: inherit; }
    .main-links a::before { content: '>'; display: inline-block; margin-right: 10px; color: rgba(255,255,255,0.7); }
    
    /* 하단 서브 메뉴 그리드 */
    .sub-grid-container { padding: 20px; margin-top: 10px; }
    .sub-grid { display: grid; grid-template-columns: 1fr 1fr; background-color: white; border-radius: 5px; border: 1px solid #ddd; }
    .sub-grid a { display: block; text-align: center; padding: 12px 5px; color: #3b6dee; font-size: 14px; font-weight: bold; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-decoration: none; }
    .sub-grid a:nth-child(2n) { border-right: none; }
    .sub-grid a:nth-last-child(-n+2) { border-bottom: none; }