/* [1] 포스터 감성 변수 추가 (기존 코드 상단에 삽입) */
:root {
    --bg-paper: #F2EFE9;      /* 포스터의 따뜻한 미색 */
    --primary-plum: #5D2533;  /* 포스터의 깊은 자주색 */
    --accent-gold: #A68966;   /* 포스터의 고전적인 금색 */
    --text-deep: #2A1B1B;     /* 가독성을 위한 짙은 밤색 */
}

/* [2] 기본 설정 업그레이드 */
body {
    font-family: 'Noto Serif KR', serif;
    margin: 0;
    padding: 0;
    color: var(--text-deep);
    background-color: #F2EFE9; /* #fdfdfd에서 미색으로 변경 */
    line-height: 1.8; /* 기존 1.6에서 조금 더 여유 있게 */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* [3] 헤더 & 내비게이션 (기존 구조 유지) */
header {
	background-color: #F2EFE9;
    padding: 2rem 0;
    border-bottom: none; /* 1px solid var(--primary-plum); /* #eee에서 자주색 선으로 변경 */
}

.logo h1 {
    font-size: 2rem;
    letter-spacing: 2px;
    margin: 0;
}

.logo a {
    text-decoration: none;
    color: var(--primary-plum) !important; /* 검정에서 자주색으로 변경 */
}

/* 변경 — 드롭다운 제외 */
nav ul:not(.dropdown-content) {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    margin-top: 1rem;
}


nav a {
    text-decoration: none;
    color: var(--primary-plum); /* #555에서 변경 */
    font-weight: 400;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--accent-gold); /* #d4a373에서 포스터 금색으로 변경 */
}

/* [4] 히어로 섹션 (기존 이미지/경로 완벽 보존) */
.hero {
    padding: 150px 0;
    text-align: center;
	background-color: transparent;
    /* 필터에 자주색 기운을 살짝 더해 포스터와 일체감을 줌 */
	background: linear-gradient(rgba(93, 37, 51, 0.3), rgba(0, 0, 0, 0.4)),                 url('img/hero_index.jpg');    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.hero h2 {
    font-size: 3.5rem; /* 조금 더 강조 */
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 2rem;
}

/* [5] 버튼 (기존 기능 + 곡선 디자인) */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-plum); /* #333에서 변경 */
    color: #fff;
    text-decoration: none;
    margin-top: 20px;
    border-radius: 40px; /* 포스터의 부드러운 곡선 반영 */
    transition: all 0.3s;
}

.btn:hover {
    background-color: var(--accent-gold);
    transform: translateY(-2px);
}

/* [6] 푸터 (기존 구조 유지) */
footer {
    padding: 3rem 0;
    background: var(--primary-plum); /* #f4f4f4에서 묵직한 자주색으로 변경 */
    color: var(--bg-paper); /* 글자색도 배경과 맞춤 */
    text-align: center;
    font-size: 0.9rem;
    margin-top: 50px;
}

/* [7] 사용자님의 기존 반응형/햄버거 로직 (100% 보존) */
.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-menu ul:not(.dropdown-content) {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

/* 언어 토글 (사용자님 스타일 보존 및 색상만 변경) */
.lang-toggle .lang-btn {
    text-decoration: none;
    color: var(--primary-plum);
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid var(--primary-plum);
    padding: 4px 10px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.lang-toggle .lang-btn:hover {
    background-color: var(--primary-plum);
    color: var(--bg-paper);
}

/* 햄버거 버튼 (기존 로직 보존) */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--primary-plum); /* #333에서 변경 */
    transition: all 0.3s ease-in-out;
}

/* 반응형 미디어 쿼리 (기존 로직 보존) */
@media screen and (max-width: 768px) {
    .menu-toggle { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--bg-paper);
        border-bottom: 1px solid var(--primary-plum);
        z-index: 1000;
    }
    .nav-menu.active { display: block; }
    .nav-menu ul {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }
    .hero h2 { font-size: 1.8rem; }
}

/* [8] 콘텐츠 섹션 스타일 */
.content-section {
    padding: 60px 0;
    min-height: 400px;
}

.content-section h2 {
    font-size: 2rem;
    color: var(--primary-plum); /* 자주색 적용 */
    border-left: 4px solid var(--primary-plum); /* #d4a373에서 변경 */
    padding-left: 15px;
    margin-bottom: 30px;
}


/* =========================================
   모바일 줄바꿈 방지 및 폰트 크기 조정 패치
   ========================================= */
@media screen and (max-width: 768px) {

    /* [1] 헤더 로고 (밴쿠버 민화협회) 수정 */
    .logo h1 {
        font-size: 1.35rem;     /* 폰트 크기를 2rem -> 1.35rem으로 축소 */
        white-space: nowrap;    /* 강제로 줄바꿈을 금지함 */
        letter-spacing: 0px;    /* 자간을 좁혀서 공간 확보 */
    }

    /* 헤더 오른쪽 버튼들(EN, 햄버거) 간격 좁히기 */
    .header-right {
        gap: 15px;              /* 기존 40px에서 15px로 줄여서 로고 공간 확보 */
    }

    /* [2] 메인 콘텐츠 제목 (협회 소개 About Us) 수정 */
    /* index.php에 인라인 스타일(style="...")이 있어서 !important가 필요합니다 */
    .about-preview h3 {
        font-size: 1.6rem !important; /* 모바일에서는 2.2rem 대신 1.6rem 적용 */
        line-height: 1.3;             /* 줄간격 조정 */
        word-break: keep-all;         /* 단어 중간에 끊기지 않도록 설정 (한글 최적화) */
    }
    
    /* 혹시 모를 다른 긴 제목들도 모바일에서 줄어들게 설정 */
    .content-section h2, 
    .content-section h3 {
        word-break: keep-all;
    }
}


/* ── 모바일 ── */
@media screen and (max-width: 768px) {

    /* 모바일에서도 기본은 숨김 — JS로 .active 붙으면 보임 */
    .dropdown-content {
        display: none;          /* ← block 고정 제거 */
        position: static;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0;
        white-space: normal;
        min-width: unset;
    }

    .dropdown-content::before {
        display: none;
    }

    /* nav-menu.active 일 때(햄버거 열린 상태)만 드롭다운 보이기 */
    .nav-menu.active .dropdown-content {
        display: block;         /* ← 햄버거 열리면 자동으로 표시 */
    }

    .dropdown > a {
        font-weight: 700;
        color: #5D2533 !important;
        pointer-events: none;   /* 모바일에서 상위 항목 클릭 방지 */
    }

    .dropdown-content li + li {
        border-top: none;
    }

    .dropdown-content li a {
        padding: 8px 4px;
        color: #555;
        text-align: center; 
        font-size: 0.92rem;
    }

    .dropdown-content li a:hover {
        background: transparent;
        color: #5D2533;
    }
}