/* ------------------------------------- */
        /* 메뉴 스타일 변수 (라이트 모드) */
        /* ------------------------------------- */
        :root {
            --primary-color: #007acc; /* 아쿠아 블루 (메인 버튼) */
            --secondary-color: #005f99; /* 진한 아쿠아 (버튼 호버) */
            --accent-color: #b3e5fc; /* 밝은 아쿠아 (서브메뉴 호버) */
            --bg-color: #f0f8ff; /* 서브메뉴 배경 */
            
            /* 테마 관련 변수 */
            --page-bg: #f8fafc; /* 페이지 배경 */
            --text-color: #333; /* 기본 텍스트 색상 */
            --navbar-bg: #2c3e50; /* 네비게이션바 배경 */
            --navbar-border: #2980b9; /* 네비게이션바 테두리 */
            --footer-bg: #2c3e50; /* 푸터 배경 */
            --footer-text: white; /* 푸터 텍스트 */
            --main-gradient-start: #0099ff;
            --main-gradient-end: var(--primary-color);
            
            /* 액션 버튼 관련 변수 */
            --top-btn-bg: var(--primary-color);
            --top-btn-color: white;
            --top-btn-hover-bg: var(--secondary-color);
            
            /* 홈/토글 버튼 관련 변수 */
            --utility-btn-bg: var(--primary-color);
            --utility-btn-color: white;
            --utility-btn-hover-bg: var(--secondary-color);
        }

        /* ------------------------------------- */
        /* 다크 모드 변수 재정의 */
        /* ------------------------------------- */
        .dark-mode {
            --primary-color: #3f8fef;
            --secondary-color: #1a6ac9; 
            --accent-color: #004d80;
            --bg-color: #1a2a40;
            
            /* 다크 테마 변수 재정의 */
            --page-bg: #0d1a26;
            --text-color: #e0e0e0;
            --navbar-bg: #1e3650;
            --navbar-border: #3f8fef;
            --footer-bg: #1e3650;
            --footer-text: #e0e0e0;
            --main-gradient-start: #1e609c;
            --main-gradient-end: #007acc;

            /* 다크 모드 액션 버튼 변수 재정의 */
            --top-btn-bg: #1a6ac9;
            --top-btn-color: #fff;
            --top-btn-hover-bg: #3f8fef;

            /* 홈/토글 버튼 다크 모드 변수 */
            --utility-btn-bg: #1a6ac9;
            --utility-btn-color: #fff;
            --utility-btn-hover-bg: #3f8fef;
        }
        /* 1. 기본 설정 */
       html, body {
       height: 100%; /* html과 body가 뷰포트 높이 전체를 차지하도록 함 */
       margin: 0;
        }
        /* ------------------------------------- */
        /* 기본 및 레이아웃 설정 */
        /* ------------------------------------- */
        body {
             display: flex; /* Flexbox 활성화 */
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding-top: 0; 
            background-color: var(--page-bg);
            color: var(--text-color);
            min-height: 100svh; 
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s, color 0.3s;
        }

        /* 메인 콘텐츠를 감싸고 너비를 제한하며 가운데 정렬 */
        .container {
            width: 100%; 
            margin: 0 auto;
            padding: 0 0;
        }
        
        /* 메인 콘텐츠 영역이 유연하게 늘어나 푸터를 하단으로 밀어냅니다. */
        .content-wrapper {
            flex-grow: 1;
        }

        .responsive-img {
            width: 100%;
            height: 100px;
        }

        /* ------------------------------------- */
        /* 1. 주 메뉴 컨테이너 */
        /* ------------------------------------- */
        .navbar {
            background-color: var(--navbar-bg);
            border-bottom: 5px solid var(--navbar-border);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 5px 0;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .dropdown-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center; 
        }

        .dropdown-item {
            position: relative;
            padding: 0 5px;
        }

        /* ------------------------------------- */
        /* 2. 주 메뉴 링크 (아쿠아 버튼 스타일) */
        /* ------------------------------------- */
        .dropdown-item > a {
            display: block;
            padding: 14px 20px; 
            /* 밑줄 제거 및 색상 유지 */
            text-decoration: none !important; 
            color: white;
            font-weight: bold;
            background: linear-gradient(to bottom, var(--main-gradient-start) 0%, var(--main-gradient-end) 100%);
            transition: all 0.3s ease; 
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        /* ✨ 호버 시 스타일 강화 (배경 진해지고 살짝 올라오는 효과) */
        .dropdown-item > a:hover {
            background: linear-gradient(to bottom, var(--secondary-color) 0%, #005f99 100%);
            transform: translateY(-2px); /* 호버 시 위로 2px 이동 */
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 그림자 강화 */
            color: white; /* 텍스트 색상 확실히 흰색 유지 */
        }

        /* 메뉴가 열렸을 때 (클릭 후) 눌러진 효과 유지 */
        .dropdown-item.open > a {
            transform: translateY(1px);
            background: linear-gradient(to bottom, #005f99 0%, var(--primary-color) 100%);
            box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
        }
        
        /* 3. 하위 메뉴 (드롭다운 콘텐츠) */
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            list-style: none;
            padding: 0;
            margin-top: 0;
            background-color: var(--bg-color);
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            min-width: 180px;
            z-index: 10;
            overflow: hidden;
        }

        .dropdown-item.open > .submenu {
            display: block;
        }

        /* 하위 메뉴 항목 스타일 */
        .submenu li a {
            padding: 10px 15px;
            text-decoration: none !important; /* 서브메뉴 밑줄 제거 재확인 */
            display: block;
            color: var(--primary-color);
            transition: background-color 0.2s ease, color 0.2s;
        }

        .submenu li a:hover {
            background-color: var(--accent-color);
            color: var(--secondary-color);
            text-decoration: none; /* 호버 시 밑줄 생길 경우 대비 */
        }


        /* ------------------------------------- */
        /* 4. 홈/토글 버튼 고정 컨테이너 (스크롤 따라다니게) */
        /* ------------------------------------- */
        .utility-fixed-buttons {
            position: fixed;
            top: 50%; 
            right: 20px;
            transform: translateY(-50%); 
            z-index: 100;
            display: flex;
            flex-direction: column; 
            align-items: flex-end; 
            gap: 10px; 
        }
        
        /* 5. 홈/토글 버튼 공통 스타일 */
        #themeToggle, #homeBtn {
            border: 2px solid var(--utility-btn-bg);
            background-color: var(--utility-btn-bg);
            color: var(--utility-btn-color);
            cursor: pointer;
            padding: 10px 10px; 
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            width: auto; 
        }

        #themeToggle:hover, #homeBtn:hover {
            background-color: var(--utility-btn-hover-bg);
            border-color: var(--utility-btn-hover-bg);
            color: white; 
        }
        
        /* 6. 상단으로 버튼 (Go-to-Top Button) - Fixed 유지 */
        #goTopBtn {
            display: none; 
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: var(--top-btn-bg);
            color: var(--top-btn-color);
            cursor: pointer;
            padding: 15px;
            border-radius: 50%;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s, opacity 0.3s;
        }

        #goTopBtn:hover {
            background-color: var(--top-btn-hover-bg);
        }
        
        .page-footer {
            height: 100px;
            background-color: var(--footer-bg);
            color: var(--footer-text);
            border-top: 5px solid var(--navbar-border);
            text-align: center;
            box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }