@charset "utf-8";


        /* Inter 폰트 임포트 */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

        /* --- 기본 스타일 (모바일 우선) --- */
        body {
            font-family: 'Inter', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #343a40;
            line-height: 1.6;
            font-size: 15px;
        }

        /* 모든 요소에 둥근 모서리 적용 */
        * {
            border-radius: 8px;
            box-sizing: border-box; /* 패딩, 보더가 너비에 포함되도록 */
        }
		
		
		
html {
  scroll-behavior: smooth;
}

		
		
		
		#container {
		max-width: 1500px;				/*最大幅。これ以上広がらないように。後半の大きな端末用の「#menubar > ul」と数字を揃える。*/
		margin: 0 auto;
		height: 100%;
		display: flex;					/*flexボックスを使う指定*/
		flex-direction: column;			/*子要素を縦並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		}

        header {
            background-color: #007bff; /* 주 색상 */
            color: white;
            padding: 1rem;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            display: flex; /* 햄버거, 로고+제목, 메뉴를 위한 flex */
            justify-content: space-between; /* 양쪽 끝 정렬 */
            align-items: center; /* 세로 중앙 정렬 */
            position: relative; /* 메뉴 absolute 위치 기준 */
        }

        /* 햄버거 메뉴 버튼 스타일 */
        .menu-toggle {
            display: block; /* 모바일에서 보임 */
            background: none;
            border: none;
            color: white;
            font-size: 2em; /* 햄버거 아이콘 크기 */
            cursor: pointer;
            padding: 0.5rem;
            line-height: 1; /* 아이콘 세로 정렬 */
            z-index: 1000; /* 메뉴 위에 오도록 */
            position: absolute; /* 헤더의 왼쪽 상단에 위치 */
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
        }

        /* 로고와 제목을 묶는 컨테이너 */
        .header-branding {
            display: flex; /* 로고와 제목을 가로로 정렬 */
            align-items: center; /* 세로 중앙 정렬 */
            flex-grow: 1; /* 남은 공간을 차지하여 중앙으로 밀어냄 */
            justify-content: center; /* 로고와 제목을 중앙 정렬 */
            margin-left: 3.5rem; /* 햄버거 메뉴 공간 확보 (버튼 너비 + 패딩 + 약간의 여백) */
            margin-right: 1rem; /* 오른쪽 여백 */
        }

        /* 헤더 로고 이미지 스타일 */
        .header-logo {
            width: 45px; /* 모바일 로고 크기 */
            height: 45px;
            margin-right: 0.6rem; /* 로고와 제목 사이 간격 */
            border-radius: 50%; /* 로고를 원형으로 */
            object-fit: cover; /* 이미지가 잘리지 않도록 */
            box-shadow: 0 0 5px rgba(0,0,0,0.2); /* 로고에 그림자 */
        }

        header h1 {
            margin: 0; /* 기본 마진 제거 */
            font-size: 1.8em;
            text-align: center; /* 중앙 정렬 유지 */
            white-space: nowrap; /* 제목이 줄바꿈 되지 않도록 */
            overflow: hidden; /* 넘치는 부분 숨김 */
            text-overflow: ellipsis; /* 넘치는 부분에 ... 표시 */
        }

        /* 내비게이션 메뉴 스타일 (모바일 기본) */
        nav {
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #0056b3;
            display: none;
            flex-direction: column;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 999;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.3s ease-out;
        }

        /* 메뉴가 활성화될 때 (JS로 추가/제거) */
        nav.nav-active {
            display: flex;
            max-height: 300px; /* 메뉴 높이 (콘텐츠에 맞춰 조절) */
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
        }

        nav ul li {
            margin: 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        nav ul li:last-child {
            border-bottom: none;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 1rem 1.5rem;
            display: block;
            text-align: center;
            transition: background-color 0.3s ease;
        }

        nav ul li a:hover {
            background-color: #004085;
        }

        main {
            padding: 1.5rem 1rem;
            max-width: 1200px;
            margin: 20px auto;
        }

        .destinations {
            text-align: center;
            margin-bottom: 3rem;
        }

        .destinations h2 {
            font-size: 2.2em;
            color: #007bff;
            margin-bottom: 2rem;
        }

        .destination-grid {
            display: flex;
            flex-direction: column; /* 모바일: 카드를 세로로 정렬 */
            gap: 1.5rem;
        }

        .destination-card {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            padding: 1rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            text-align: left;
            transition: transform 0.3s ease;
        }

        .destination-card:hover {
            transform: translateY(-5px);
        }

        .destination-card img {
            max-width: 100%;
            height: auto;
            display: block;
            margin-bottom: 1rem;
            border-radius: 6px;
        }

        .destination-card h3 {
            font-size: 1.5em;
            color: #0056b3;
            margin-top: 0.5rem;
            margin-bottom: 0.8rem;
        }

        .destination-card p {
            font-size: 0.95em;
            color: #6c757d;
            margin-bottom: 1.2rem;
        }

        .button {
            display: inline-block;
            background-color: #28a745;
            color: white;
            padding: 0.8rem 1.5rem;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s ease;
            border-radius: 4px; /* 버튼만 살짝 덜 둥글게 */
        }

        .button:hover {
            background-color: #218838;
        }

        footer {
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 1.5rem;
            margin-top: 3rem;
            box-shadow: 0 -4px 8px rgba(0,0,0,0.1);
        }

        /* --- 미디어 쿼리 시작 (PC/태블릿 화면) --- */

        /* 작은 태블릿 (최소 너비 600px 이상) */
        @media (min-width: 600px) {
            body {
                font-size: 16px;
            }

            /* 햄버거 버튼 숨김 */
            .menu-toggle {
                display: none;
            }

            header {
                justify-content: space-between; /* 로고+제목 그룹과 내비게이션 사이 간격 */
                padding: 1.5rem 2rem; /* 데스크톱 패딩 */
            }

            .header-branding {
                flex-grow: 0; /* 더 이상 남은 공간을 차지하지 않음 */
                justify-content: flex-start; /* 왼쪽 정렬 */
                margin-left: 0; /* 모바일에서 추가했던 마진 제거 */
                margin-right: 0;
            }

            .header-logo {
                width: 60px; /* 데스크톱 로고 크기 */
                height: 60px;
                margin-right: 1rem;
            }

            header h1 {
                font-size: 2.2em; /* 데스크톱 제목 크기 */
                text-align: left; /* 왼쪽 정렬 */
            }

            /* 내비게이션 메뉴 원래대로 */
            nav {
                position: static; /* 헤더 안으로 다시 배치 */
                display: block; /* 항상 보이게 */
                background: none; /* 배경색 제거 */
                box-shadow: none; /* 그림자 제거 */
                max-height: none; /* 높이 제한 제거 */
                transition: none; /* transition 제거 */
                width: auto;
            }

            nav ul {
                display: flex; /* 가로 정렬 */
                flex-direction: row;
                justify-content: center;
            }

            nav ul li {
                margin: 0 0.8rem; /* 좌우 간격 추가 */
                border-bottom: none; /* 구분선 제거 */
            }

            nav ul li a {
                padding: 0.7rem 1rem;
                text-align: left;
                background-color: transparent; /* 배경색 투명 */
            }

            nav ul li a:hover {
                background-color: rgba(255,255,255,0.2); /* 호버 시 투명한 흰색 */
            }

            .destination-grid {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }

            .destination-card {
                flex: 1 1 calc(50% - 1.5rem);
                max-width: calc(50% - 1.5rem);
            }
        }

        /* 큰 태블릿 및 작은 데스크톱 (최소 너비 900px 이상) */
        @media (min-width: 900px) {
            body {
                font-size: 17px;
            }

            header h1 {
                font-size: 2.5em;
            }

            nav ul {
                justify-content: flex-end; /* 내비게이션을 오른쪽으로 정렬 */
            }

            .destination-card {
                flex: 1 1 calc(33.333% - 1.5rem);
                max-width: calc(33.333% - 1.5rem);
            }
        }

        /* 매우 큰 데스크톱 (최소 너비 1200px 이상) */
        @media (min-width: 1200px) {
            body {
                font-size: 18px;
            }

            main {
                padding: 2.5rem 1rem;
            }
        }