body {
    margin: 0;
    background-color: #f0f0f0;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
}

/* --- 전체 레이아웃 --- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    padding: 10px; 
    box-sizing: border-box;
    gap: 20px;
}

/* --- 본문 영역 --- */
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: 2px solid #092207;
    box-sizing: border-box;
    padding-bottom: 20px;
}

/* --- 헤더 스타일 --- */
.header1 {
    width: 100%; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: #e8f5e9;
    border-bottom: 1px solid #092207;
}
.he1 {
    font-weight: bold; 
    color: #1b5e20; 
    font-size: 32px;
}

/* --- 🌟 핵심: 정중앙 카드 섹션 --- */
.card-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;             /* 카드 사이 간격 */
    width: 100%;
    padding: 40px 10px;
    box-sizing: border-box;
}

/* --- 가로 40% 기준 정사각형 링크 카드 --- */
.square-card {
    width: 40%;
    aspect-ratio: 1 / 1;    /* 완벽한 정사각형 유지 */
    display: flex;
    flex-direction: column;
    text-decoration: none;  /* 링크 밑줄 제거 */
    border: 2px solid #092207;
    border-radius: 8px;
    overflow: hidden;       /* 내부 요소가 둥근 모서리를 뚫고 나오지 않게 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.square-card:hover {
    transform: translateY(-5px); /* 마우스 올렸을 때 살짝 들리는 효과 */
}

/* 위에서 아래로 80% 이미지 영역 */
.card-image-box {
    width: 100%;
    height: 80%;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 조절 */
}

/* 아래 20% 찐초록색 텍스트 영역 */
.card-text-box {
    width: 100%;
    height: 20%;
    background-color: #092207; /* 기존 찐초록색 적용 */
    color: white;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* --- 푸터 크레딧 --- */
.footer-credit {
    margin-top: 30px;
    font-size: 12px;
    color: #666;
}

/* --- 반응형 설정 --- */
@media (max-width: 480px) {
    .he1 {
        font-size: 24px;
    }
    .card-section {
        flex-direction: column; /* 화면이 아주 작아지면 카드를 위아래로 배치 */
        gap: 15px;
    }
    .square-card {
        width: 60%; /* 모바일에서는 카드가 너무 작아지므로 폭을 60%로 확대 */
    }
    .card-text-box {
        font-size: 12px;
    }
}