/* 1. Reset and Variables */
:root {
    --color-primary: #FF0000; /* NURLY Red */
    --color-text: #212529;
    --color-background-light: #F8F8F8;
    --color-background-dark: #121212;
    --color-menu-background: #FFFFFF;
    --color-menu-border: #E0E0E0;
    --color-text-dark: #FFFFFF;
    --header-height: 50px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    -webkit-tap-highlight-color: transparent; /* 모바일 탭 제거 */
}

body {
    background-color: var(--color-background-light);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
}

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

/* Dark Mode Styles */
body.dark-mode {
    background-color: var(--color-background-dark);
    color: var(--color-text-dark);
}
body.dark-mode a {
    color: var(--color-text-dark);
}
body.dark-mode .logo {
    color: var(--color-text-dark);
}

/* 2. Header and Logo */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    background-color: var(--color-menu-background);
    border-bottom: 1px solid var(--color-menu-border);
    z-index: 1000;
}
body.dark-mode .header {
    background-color: var(--color-background-dark);
    border-color: #333333;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primary);
}

.menu-toggle {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text);
}
body.dark-mode .menu-toggle {
    color: var(--color-text-dark);
}

/* 3. Mobile Menu Overlay (Off-Canvas) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%; /* 모바일에서 메뉴 폭 */
    max-width: 350px;
    height: 100%;
    background-color: var(--color-menu-background);
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1500;
    display: flex;
    flex-direction: column;
}
body.dark-mode .mobile-menu-overlay {
    background-color: #1E1E1E;
}

.mobile-menu-overlay.open {
    transform: translateX(0);
}

/* 4. Menu Stages */
.menu-stage {
    height: 100%;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    transition: transform 0.3s ease-in-out;
}

/* Stage 1 (Main Menu) */
.stage-1 {
    transform: translateX(0);
}

/* Stage 2 (Sub Menus) */
.sub-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    background-color: inherit;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.sub-menu-overlay.open {
    transform: translateX(0);
}

/* 5. Menu Components */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: var(--color-text);
}
body.dark-mode .close-btn {
    color: var(--color-text-dark);
}

.main-nav {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    align-items: center;
}
.nav-item {
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-menu-border);
    width: 100%;
    text-align: center;
}
body.dark-mode .nav-item {
    border-color: #333333;
}
.nav-item:last-child {
    border-bottom: none;
}

/* 🟢 전시 메뉴 가독성 및 들여쓰기 스타일 추가 */
.nav-item-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px; /* 항목 그룹 간 간격 */
    border-bottom: 1px solid var(--color-menu-border);
}
body.dark-mode .nav-item-group {
    border-color: #333333;
}

.nav-item-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    padding: 15px 0; /* 메인 nav-item과 동일한 패딩으로 너비 확보 */
    width: 100%;
    text-align: center;
}
body.dark-mode .nav-item-title {
    color: var(--color-text-dark);
}

/* 하위 메뉴 항목 (현재/예정/온라인 전시) */
.sub-nav-indented {
    /* 하위 항목들이 묶인 컨테이너 */
    padding-bottom: 15px;
}
.sub-nav-indented .nav-item {
    /* 상위 .nav-item의 border-bottom을 무효화하고 그룹에 border-bottom 적용 */
    border-bottom: none; 
    padding: 10px 0;
    padding-left: 20px; /* 왼쪽 라인에서 살짝 띄우기 */
    text-align: left; /* 왼쪽 정렬 */
    font-weight: 500;
    font-size: 16px;
    
}
/* ----------------------------------- */


.menu-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-menu-border);
    font-size: 14px;
    color: #888;
}
body.dark-mode .menu-footer {
    border-color: #333333;
    color: #AAA;
}
.menu-footer a {
    display: block;
    margin-top: 5px;
    font-weight: bold;
    color: var(--color-primary);
}

/* Sub Menu Header */
.sub-menu-header {
    display: flex;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-menu-border);
}
body.dark-mode .sub-menu-header {
    border-color: #333333;
}
.sub-menu-header h2 {
    font-size: 20px;
    margin-left: 15px;
}
.menu-back-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text);
}
body.dark-mode .menu-back-btn {
    color: var(--color-text-dark);
}

/* Forms (Search, Login, Join) */
.menu-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.menu-form input {
    padding: 10px;
    border: 1px solid var(--color-menu-border);
    border-radius: 4px;
    font-size: 16px;
    background-color: var(--color-menu-background);
    color: var(--color-text);
}
body.dark-mode .menu-form input {
    background-color: #333333;
    border-color: #555555;
    color: var(--color-text-dark);
}

.menu-form button {
    padding: 12px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

/* Login Links */
.menu-links {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-menu-border);
}
body.dark-mode .menu-links {
    border-color: #333333;
}
.menu-link {
    display: block;
    padding: 10px 0;
    font-weight: 600;
}
.menu-link-small {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    color: #888;
}
body.dark-mode .menu-link-small {
    color: #AAA;
}

/* Settings */
.settings-group {
    margin-bottom: 30px;
}
.settings-group h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #888;
}
body.dark-mode .settings-group h3 {
    color: #AAA;
}
.settings-buttons button {
    padding: 8px 15px;
    border: 1px solid var(--color-menu-border);
    background-color: transparent;
    border-radius: 20px;
    cursor: pointer;
    margin-right: 10px;
    color: var(--color-text);
}
body.dark-mode .settings-buttons button {
    border-color: #555555;
    color: var(--color-text-dark);
}
.settings-buttons button.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Toggle Switch (Dark Mode) */
.toggle-switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 16px;
}
.toggle-switch input[type="checkbox"] {
    display: none;
}
.toggle-switch label {
    display: block;
    width: 40px;
    height: 20px;
    background-color: #CCC;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}
.toggle-switch label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}
.toggle-switch input[type="checkbox"]:checked + label {
    background-color: var(--color-primary);
}
.toggle-switch input[type="checkbox"]:checked + label::after {
    transform: translateX(20px);
}

/* 6. Main Content & Footer */
.main-content {
    padding-top: var(--header-height); /* 헤더 아래에서 시작 */
    padding-bottom: 50px;
    
    /* 🌟 추가: 좌우 패딩을 25px로 설정 */
    padding-left: 40px;
    padding-right: 35px;
}
.footer {
    padding: 20px 15px;
    text-align: center;
    font-size: 12px;
    color: #888;
    border-top: 1px solid var(--color-menu-border);
}
body.dark-mode .footer {
    border-color: #333333;
}


.content-section {
    /* 🌟 좌우 패딩을 15px -> 25px로 변경하여 텍스트가 왼쪽 벽에서 떨어지게 함 */
    padding: 20px 25px; 
    margin-bottom: 30px;
}
.content-section h2 {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* 7. Slider Styles (Main and Detail) */
.slider-wrapper {
    overflow: hidden;
    position: relative;
}
.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 200%; /* For main slider (2 slides) */
}
.detail-slider-wrapper .slider-container {
    width: 300%; /* For detail slider (3 slides) */
}

/* 🟢 메인 슬라이더 이미지 비율 자동 수정 반영 */
.main-slider-section {
    padding: 0;
    margin-bottom: 30px;
}
.main-slider-section .slider-wrapper {
    height: auto;
    padding-bottom: 0;
}

.slide {
    flex-shrink: 0;
    width: 100%;
    /* 기존 300px 제거 및 min-height, max-height 사용 */
    min-height: 40vh;
    max-height: 70vh;
    background-color: #E0E0E0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden; /* 슬라이드 콘텐츠 overflow hidden */
}
body.dark-mode .slide {
    background-color: #2c2c2c;
}

/* 🟢 추가된 메인 슬라이드 배너 이미지 스타일 */
.slide-background-img {
    width: 100%;
    height: auto; /* 이미지의 원본 비율 유지 */
    object-fit: cover; /* 컨테이너를 채우되 비율 유지 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* 텍스트 콘텐츠보다 뒤에 위치 */
    min-height: 40vh; /* 부모 슬라이드 높이에 맞추기 위한 최소 높이 */
}


.slide-content {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 2; /* 이미지보다 앞에 위치 */
    position: relative; /* z-index를 작동시키기 위해 추가 */
}
.slide-title {
    font-size: 24px;
    margin-bottom: 5px;
}
.slide-subtitle {
    font-size: 16px;
    margin-bottom: 10px;
}
.slide-link {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

/* Slider Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}
.dot {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background-color: #CCCCCC;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: var(--color-primary);
}

/* Detail Slider */
.detail-slider-section {
    padding: 0;
    margin-bottom: 20px;
}
.detail-slider-wrapper .slide {
    height: 400px;
    /* Placeholder for actual image content */
    background-color: #D3D3D3; 
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #555;
    padding: 0;
}
body.dark-mode .detail-slider-wrapper .slide {
    background-color: #333333;
    color: #AAA;
}

/* 8. Work Grid */
.work-grid {
    display: block;
}

/* --- AI 추천 작품 슬라이더 스타일 --- */
.works-slider-container {
    position: relative;
    overflow: hidden; 
    margin-bottom: 20px;
    padding: 0 5px; /* 양쪽에 작은 패딩 */
}

.works-slider {
    display: flex;
    transition: transform 0.3s ease-in-out; 
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.works-slider::-webkit-scrollbar {
    display: none;
}


/* 개별 작품 아이템 크기 설정 */
.works-slider .work-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0 10px; /* 항목 간 간격 */
    
    /* PC/기본: 3개씩 보이도록 설정 */
    width: calc(100% / 3); 
    box-sizing: border-box;
    text-align: center;
}

/* 🟢 AI 추천 작품 이미지 컨테이너 크기 확대 */
.work-item .work-image {
    width: 100%;
    height: 550px; /* 이미지 높이 확대 */
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
    /* 기존 스타일 재정의 */
    background-color: #EEE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
}
body.dark-mode .work-item .work-image {
    background-color: #333333;
    color: #AAA;
}

.work-item .work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 비율 유지하며 컨테이너 채우기 */
}

/* 태블릿 (2개씩 보이도록 조정) */
@media (max-width: 768px) {
    .works-slider .work-item {
        width: calc(100% / 2);
    }
    .work-item .work-image {
        height: 250px;
    }
}

/* 모바일 (1개씩 보이도록 조정) */
@media (max-width: 480px) {
    .works-slider .work-item {
        width: 100%;
        padding: 0 15px;
    }
    .work-item .work-image {
        height: 300px;
    }
}
/* ----------------------------------- */


.work-item {
    display: block;
    text-align: center;
}
.work-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}
.work-artist {
    font-size: 12px;
    color: #888;
}
body.dark-mode .work-artist {
    color: #AAA;
}

.view-more-link {
    display: block;
    text-align: right;
    margin-top: 15px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}

/* 슬라이드 버튼 스타일 */
.slider-prev-btn, .slider-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.slider-prev-btn:hover, .slider-next-btn:hover {
    opacity: 1;
}

.slider-prev-btn {
    left: 0;
}

.slider-next-btn {
    right: 0;
}


/* 9. News List */
.news-list {
    margin-top: 50px;
}
.news-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-menu-border);
}
body.dark-mode .news-item {
    border-color: #333333;
}
.news-date {
    flex-shrink: 0;
    width: 80px;
    font-size: 12px;
    color: #888;
}
body.dark-mode .news-date {
    color: #AAA;
}
.news-title {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 500;
}

/* 10. Detail Page Styles */
.detail-info {
    padding-top: 0;
}
.detail-info h1 {
    font-size: 28px;
    margin-bottom: 5px;
}
.artist-name {
    font-size: 16px;
    font-weight: 500;
    color: #888;
    margin-bottom: 20px;
}
body.dark-mode .artist-name {
    color: #AAA;
}

.detail-info .meta-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #EEEEEE;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #555555;
}
body.dark-mode .detail-info .meta-info {
    border-top: 1px solid var(--color-menu-border);
    color: #CCCCCC;
}
.detail-info .meta-info span {
    display: block;
    font-size: 14px;
}

/* 12. AI Feature Buttons (Detail Page) */
.ai-feature-buttons {
    margin-top: 40px;
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}
.btn-ai, .btn-3d {
    flex: 1;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.btn-ai {
    background-color: var(--color-primary); /* #FF0000 */
    color: #FFFFFF;
}
.btn-ai:hover {
    background-color: #CC0000;
}

.btn-3d {
    background-color: #212529;
    color: #FFFFFF;
}
.btn-3d:hover {
    background-color: #000000;
}
body.dark-mode .btn-3d {
    background-color: #FFFFFF;
    color: #212529;
}


.description-box {
    margin-top: 30px;
}
.description-box h2 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--color-primary);
}
.description-box p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 11. Exhibition Detail Styles */
.exhibition-header {
    margin-bottom: 30px;
}
.exhibition-dates {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 5px;
}
.exhibition-location {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
}
body.dark-mode .exhibition-location {
    color: #AAA;
}
.btn-primary {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    margin-top: 20px;
}

/* 13. AI Price Graph Modal (새로 추가된 기능) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); 
    z-index: 3000;
    display: none; 
    justify-content: center;
    align-items: center;
}

.price-graph-modal {
    background-color: #FFFFFF;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    height: 90%;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
body.dark-mode .price-graph-modal {
    background-color: var(--color-background-dark);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
body.dark-mode .modal-header {
    border-color: var(--color-menu-border);
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}
body.dark-mode .modal-close-btn {
    color: #FFFFFF;
}

#priceChartContainer {
    flex-grow: 1;
    min-height: 250px;
    margin-bottom: 20px;
}

.transaction-history {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #E0E0E0;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
}
body.dark-mode .transaction-history {
    border-color: #555555;
}

.history-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px dotted #F0F0F0;
}
body.dark-mode .history-item {
    border-color: #444444;
}

.history-item:last-child {
    border-bottom: none;
}


/* 14. AI Curator Chatbot (전체 화면 버전) */
#aiCuratorChat {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 3500; 
    display: none; 
    flex-direction: column; 
    overflow: hidden;
}
body.dark-mode #aiCuratorChat {
    background-color: var(--color-background-dark);
}

.chat-header {
    padding: 15px;
    background-color: var(--color-primary); 
    color: #FFFFFF;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.chat-close-btn {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
}

.chat-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #F8F8F8;
}
body.dark-mode .chat-messages {
    background-color: #1A1A1A;
}

.message {
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 75%;
    word-wrap: break-word;
    font-size: 15px;
}
.user-message {
    align-self: flex-end;
    background-color: #007bff; /* Blue */
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 5px;
}
.ai-message {
    align-self: flex-start;
    background-color: #EAEAEA; /* Light Gray */
    margin-right: auto;
    border-bottom-left-radius: 5px;
}
body.dark-mode .ai-message {
    background-color: #444444;
    color: var(--color-text-dark);
}

.chat-input-area {
    display: flex;
    padding: 15px;
    border-top: 1px solid #CCCCCC;
    flex-shrink: 0;
}
body.dark-mode .chat-input-area {
    border-color: #333333;
}
.chat-input-area input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #DDDDDD;
    border-radius: 20px;
    margin-right: 10px;
    font-size: 16px;
    background-color: var(--color-menu-background);
    color: var(--color-text);
}
body.dark-mode .chat-input-area input {
    background-color: #333333;
    border-color: #555555;
    color: var(--color-text-dark);
}
.chat-input-area button {
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
}

/* 챗봇 아이콘 (토글 버튼) */
#chatToggleButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    font-size: 28px;
    line-height: 55px;
    text-align: center;
    cursor: pointer;
    z-index: 4000;
    transition: transform 0.2s;
}
#chatToggleButton:active {
    transform: scale(0.95);
}
#aiCuratorChat.open + #chatToggleButton {
    display: none;
}
/* 9. News List */
.news-list {
    margin-top: 50px;
}
.news-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-menu-border);
}
body.dark-mode .news-item {
    border-color: #333333;
}
.news-date {
    flex-shrink: 0;
    width: 80px;
    font-size: 12px;
    color: #888;
}
body.dark-mode .news-date {
    color: #AAA;
}
.news-title {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 500;
}
/* 🟢 뉴스 상세 페이지 스타일 (news-detail-page) */

/* 제목 및 날짜 영역 */
.news-detail-page .news-detail-header {
    padding-bottom: 10px;
}
.news-detail-page .page-title {
    margin-bottom: 5px;
    font-size: 24px;
}
.news-detail-page .news-date {
    font-size: 14px;
    color: #888;
}
body.dark-mode .news-detail-page .news-date {
    color: #AAA;
}

/* 메인 이미지 영역 */
.news-main-image-container {
    width: 100%;
    /* 화면에 꽉 차고 어느 정도 높이를 가지도록 설정 */
    height: 50vh; 
    max-height: 400px;
    overflow: hidden;
    margin-bottom: 20px;
}

.news-main-image {
    width: 100%;
    height: 100%;
    /* 이미지 비율을 유지하면서 컨테이너를 꽉 채움 */
    object-fit: cover; 
    display: block;
}

/* 뉴스 콘텐츠 본문 스타일 */
.news-content h2 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.news-content h3 {
    font-size: 17px;
    margin-top: 15px;
    margin-bottom: 8px;
    color: var(--color-primary);
}
.news-content p, .news-content li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.news-source {
    margin-top: 20px;
    font-size: 13px;
    color: #AAA;
    text-align: right;
}

/* 목록으로 돌아가기 링크 */
.back-to-list-link {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-menu-border);
}