/* Rotary International 공식 컬러 팔레트 참조 */
:root { 
    --rotary-blue: #005DAA; 
    --rotary-gold: #F7A81B; 
    --rotary-azure: #0099CC; 
}

body { 
    margin: 0; 
    font-family: 'Malgun Gothic', sans-serif; 
    background: #f4f7f9; 
}

/* =================================
   공통 헤더 (메뉴) 스타일
================================= */
header { 
    background: white; 
    padding: 20px 10%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky; 
    top: 0; 
    z-index: 100;
    border-bottom: 3px solid var(--rotary-blue);
}

.logo {
    font-size: 26px; 
    font-weight: 800; 
    color: var(--rotary-blue); 
    letter-spacing: -0.5px; 
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center; /* 텍스트/이미지 중앙 정렬 */
    width: 280px; /* 로고 영역 너비 고정 */
    height: 50px;     /* 로고 영역 높이 고정 */
    overflow: hidden; /* 영역을 벗어나는 내용 숨김 */
}
.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율을 유지하면서 영역 안에 모두 보이도록 맞춤 */
}
/* 에디터 내용 p 태그 여백 제거 */
.logo p { margin: 0; }

nav { 
    display: flex; 
    align-items: center; 
}

nav a { 
    text-decoration: none; 
    color: #333; 
    margin-left: 25px; 
    font-weight: 600; 
    font-size: 15px; 
    transition: color 0.3s; 
}

nav a:hover { 
    color: var(--rotary-gold); 
}

/* 로그인/로그아웃 버튼 스타일 */
.btn-login {
    background-color: var(--rotary-blue);
    color: white !important;
    padding: 10px 20px;
    border-radius: 30px;
    margin-left: 30px;
}

.btn-login:hover { 
    background-color: #004c8c; 
}

/* 드롭다운 메뉴 스타일 */
.dropdown { 
    position: relative; 
    margin-left: 25px; 
}

.dropbtn { 
    text-decoration: none; 
    color: #333; 
    font-weight: 600; 
    font-size: 15px; 
    transition: color 0.3s; 
    cursor: pointer; 
    background: none;
    border: none;
    font-family: inherit;
}

.dropbtn:hover { 
    color: var(--rotary-gold); 
}

.dropdown-content { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #fff; 
    min-width: 150px; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); 
    z-index: 100; 
    border-radius: 5px; 
    padding: 5px 0; 
}

.dropdown-content a { 
    margin-left: 0; 
    padding: 10px 15px; 
    display: block; 
    text-align: center; 
    font-size: 14px; 
    color: #333; 
}

.dropdown-content a:hover { 
    background-color: #f9f9f9; 
    color: var(--rotary-blue); 
}

.dropdown:hover .dropdown-content { 
    display: block; 
}

/* 햄버거 메뉴 아이콘 */
.hamburger-menu { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 24px; 
    color: var(--rotary-blue); 
    cursor: pointer; 
}

/* =================================
   태블릿 및 데스크탑 스타일 (1600px 이하 ~ 901px 이상)
================================= */
@media (max-width: 1600px) and (min-width: 901px) {
    header {
        flex-direction: column; /* 요소들을 세로 방향으로 배치 */
        justify-content: center;
        padding: 20px 5%; /* 좌우 여백을 약간 줄임 */
    }
    
    .logo {
        margin-bottom: 20px; /* 로고와 하단 메뉴 사이의 간격 추가 */
    }
    
    nav {
        width: 100%;
        justify-content: center; /* 메뉴 항목들을 중앙으로 정렬 */
        flex-wrap: wrap; /* 화면이 좁을 경우 메뉴가 자연스럽게 다음 줄로 넘어가도록 설정 */
    }
    
    nav a, .dropdown, .btn-login {
        margin: 10px 15px; /* 좌우 여백을 줄이고 상하 여백을 추가하여 줄바꿈 시 간격 유지 */
    }
}

/* =================================
   반응형 (모바일) 스타일
================================= */
@media (max-width: 900px) {
    /* 1. 본문 텍스트 최적화 스타일 (추가된 부분) */
    .content-mobile { 
        white-space: normal !important; 
        word-break: keep-all !important; 
        line-height: 1.6;
    }

    /* 엔터 한 번인 구간을 인라인으로 처리하여 옆으로 붙임 */
    .mobile-inline { 
        display: inline !important; 
        padding: 0 2px; 
    }

    /* 문단 역할을 하는 p 태그의 상하 마진 제거 */
    .content-p { 
        margin: 0 !important; 
        display: block; 
    }

    /* 2. 기존 헤더 및 메뉴 스타일 유지 */
    header { 
        padding: 15px 5%;
        justify-content: center; /* [수정] 로고를 중앙에 위치시키기 위해 */
        position: relative; /* [추가] 햄버거 메뉴의 absolute 포지셔닝 기준점 */
    }

    nav { 
        display: none; 
        position: absolute; 
        top: 72px; 
        left: 0; 
        right: 0; 
        background: white; 
        flex-direction: column; 
        width: 100%; 
        box-shadow: 0 8px 16px rgba(0,0,0,0.1); 
        z-index: 1000; 
    }

    nav.active { 
        display: flex; 
    }

    nav a { 
        margin: 0; 
        padding: 15px; 
        text-align: center; 
        border-bottom: 1px solid #f0f0f0; 
        width: 100%; 
        box-sizing: border-box; 
        margin-left: 0; 
    }

    .btn-login { 
        margin: 15px; 
        width: auto; 
        display: inline-block; 
    }

    .hamburger-menu { 
        display: block;
        position: absolute; /* [추가] 헤더 우측에 고정 */
        right: 5%; /* 헤더의 padding 값과 동일하게 설정 */
        top: 50%;
        transform: translateY(-50%); /* 수직 중앙 정렬 */
    }
    
    .dropdown { 
        width: 100%; 
        margin-left: 0; 
        display: block; 
    }

    .dropbtn { 
        display: block; 
        width: 100%; 
        padding: 15px; 
        text-align: center; 
        border-bottom: 1px solid #f0f0f0; 
        box-sizing: border-box; 
    }

    .dropdown-content { 
        position: static; 
        width: 100%; 
        box-shadow: none; 
        transform: none; 
        background-color: #f9f9f9; 
        display: none; 
    }

    .dropdown-content a { 
        padding: 12px; 
        border-bottom: 1px solid #eee; 
    }

    .dropdown:hover .dropdown-content { 
        display: block; 
    }
}