/* 1. 전체 설정: 폰트와 배경색 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif; /* 본문 폰트 */
    background-color: #f0f7ff; /* 하늘색 배경 (맑은 날씨 느낌) */
    color: #333;
    text-align: center;
}

/* 제목과 슬로건을 귀엽게 (Jua 폰트 사용) */
h1, h2, h3, .logo {
    font-family: 'Jua', sans-serif; 
}

/* 2. 상단 간판 (헤더) */
header {
    background-color: #fff;
    padding: 40px 20px;
    border-bottom: 3px solid #e0e7ee;
    margin-bottom: 40px;
}

.logo {
    font-size: 2.5rem;
    color: #4CAF50; /* FLC 시그니처 초록색 */
    margin-bottom: 10px;
}

.slogan {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

/* 3. 마을 지도 배치 (반응형 그리드) */
/* 카드를 바둑판처럼 예쁘게 나열하는 마법 */
.village-container {
    max-width: 1000px;
    margin: 0 auto; /* 중앙 정렬 */
    padding: 20px;
    display: grid;
    /* 화면 크기에 따라 카드 개수 자동 조절 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; /* 건물 사이 간격 */
}

/* 4. 건물(카드) 디자인 공통 */
.building {
    background: white;
    border-radius: 20px; /* 둥근 모서리 */
    padding: 30px 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* 부드러운 그림자 */
    transition: transform 0.3s ease; /* 움직임 부드럽게 */
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
}

/* 마우스 올렸을 때 둥실 떠오르는 효과 */
.building:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 아이콘 크기 */
.icon {
    font-size: 4rem;
    margin-bottom: 15px;
}

/* FLC 본부 (중앙 허브) 스타일 */
.center-hub {
    background-color: #e8f5e9; /* 연한 초록 배경 */
    border: 2px solid #4CAF50;
    grid-column: 1 / -1; /* (선택) 모바일이 아니면 한 줄 다 차지하게 */
}

/* 빈 땅 (공사중) 스타일 */
.empty {
    border: 2px dashed #ccc; /* 점선 테두리 */
    background-color: #f9f9f9;
}
.empty:hover {
    border-color: #4CAF50; /* 마우스 올리면 초록 점선으로 변경 */
}

/* 뱃지 (HOT, 공사중) */
.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff5252;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}
.empty .status-badge {
    background: #999; /* 공사중은 회색 뱃지 */
}

/* 버튼 디자인 */
.action-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-family: 'Jua', sans-serif;
    cursor: pointer;
}
.action-btn:hover {
    background-color: #45a049;
}
.empty .action-btn {
    background-color: #888;
}

/* 5. 모달창 (팝업) 디자인 */
.modal {
    position: fixed; /* 화면에 고정 */
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); /* 반투명 검은 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 평소에는 숨김 */
.hidden {
    display: none;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #aaa;
}

textarea {
    width: 100%;
    height: 100px;
    margin: 20px 0;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    resize: none; /* 크기 조절 금지 */
}

/* 6. 하단 푸터 */
footer {
    margin-top: 50px;
    padding: 40px 20px;
    background-color: #fff;
    color: #888;
    font-size: 0.9rem;
}

/* 모바일 화면 조정 (화면이 작아지면 FLC 본부도 카드처럼 작게) */
@media (max-width: 600px) {
    .center-hub {
        grid-column: auto; 
    }
}

/* ============================
   여기서부터 메뉴 관련 디자인입니다
   ============================ */

/* 1. 햄버거 버튼 (☰) 디자인 */
.menu-btn {
    position: fixed; /* 화면에 고정 */
    top: 20px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 2000; /* 모든 것보다 위에 있게 */
    background: rgba(255, 255, 255, 0.8); /* 반투명 배경 */
    padding: 5px 10px;
    border-radius: 10px;
}

/* 2. 숨겨진 메뉴판 (서랍) 디자인 */
.side-menu {
    height: 100%; /* 화면 꽉 차게 */
    width: 250px; /* 너비 */
    position: fixed;
    top: 0;
    right: -250px; /* 평소에는 오른쪽 화면 밖으로 숨김 */
    background-color: #fff; /* 흰색 배경 */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 그림자 */
    transition: 0.3s; /* 부드럽게 움직임 */
    padding-top: 60px;
    z-index: 2001;
    display: flex;
    flex-direction: column; /* 세로로 정렬 */
    text-align: left;
}

/* 3. 메뉴판 안의 링크들 */
.side-menu a {
    padding: 15px 30px;
    text-decoration: none; /* 밑줄 제거 */
    font-size: 1.2rem;
    color: #333;
    display: block;
    transition: 0.2s;
    font-family: 'Jua', sans-serif;
}

/* 마우스 올렸을 때 */
.side-menu a:hover {
    background-color: #e8f5e9; /* 연한 초록색 */
    color: #4CAF50;
}

/* 닫기 버튼 (X) 위치 조정 */
.side-menu .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    padding: 0 15px;
}

/* 4. 메뉴가 열렸을 때 (이 클래스가 붙으면 튀어나옴) */
.side-menu.open {
    right: 0;
}