/* common.css (모든 페이지에 공통으로 적용되는 스타일) */

/* 전체 스타일 초기화 및 기본 설정 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Nanum Myeongjo', serif;
    line-height: 1.6;
    color: rgb(214, 197, 197); /* 은은한 금색 */
    background: linear-gradient(135deg, #1A2526 0%, #2C3E50 100%);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="90" cy="20" r="2" fill="rgba(255,255,255,0.2)"/><circle cx="50" cy="80" r="1" fill="rgba(255,255,255,0.4)"/></svg>') repeat;
    opacity: 0.1;
    animation: twinkle 5s infinite;
    z-index: -1; /* 배경 요소를 맨 뒤로 보냄 */
    pointer-events: none; /* 클릭 이벤트를 방해하지 않도록 설정 */
}

@keyframes twinkle {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.container {
    max-width: 1400px; /* 1600px에서 25% 줄여 1200px로 변경 */
    margin: 1.5em auto; /* 여백 약간 축소 */
    padding: 1em; /* 패딩 축소 */
    background-color: #2A2E3F;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 버튼 스타일 */
.submit-btn {
    background: linear-gradient(45deg, #D7CFF9, #E8E0FF);
    color: #1A2526;
    padding: 0.8em 1.5em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    font-size: 1em;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 1;
}
.submit-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(45deg, #E8E0FF, #F5F5FF);
}

.submit-btn.active {
    background: linear-gradient(45deg, #E8E0FF, #F5F5FF);
    cursor: default;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .container {
        padding: 1em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

/* 반응형 디자인 */
@media (max-width: 600px) {
    .logo img {
        max-width: 150px;
    }
}

/* 팝업 스타일 추가 */
.logo-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 배경, 투명도 조절 */
    backdrop-filter: blur(5px); /* 배경 블러 효과 추가 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; /* 트랜지션 추가 */
    transform: scale(0.8); /* 초기 크기 축소 */
}

/* 팝업이 나타날 때 */
.logo-popup.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* 원래 크기로 확대 */
}

/* 로고 이미지 스타일 */
.logo-popup img {
    width: 200px; /* 로고 크기 조정 */
    height: auto;
    animation: rotateAndFade 3s ease-in-out forwards; /* 회전 및 사라짐 애니메이션 */
}

/* 회전 및 사라짐 애니메이션 */
@keyframes rotateAndFade {
    0% {
        transform: rotate(0deg) scale(0.8); /* 시작 시 약간 축소 */
        opacity: 0; /* 시작 시 투명 */
    }
    25% {
        opacity: 1; /* 서서히 나타남 */
    }
    50% {
        transform: rotate(360deg) scale(1.2); /* 회전하면서 약간 커짐 */
        opacity: 1;
    }
    75% {
        opacity: 1; /* 유지 */
    }
    100% {
        transform: rotate(720deg) scale(0); /* 두 바퀴 회전 후 축소 */
        opacity: 0;
    }
}

/* 떨어지는 별과 달 컨테이너 */
.falling-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 클릭 방지 */
    z-index: 999; /* 팝업 로고 아래에 위치 */
}

/* 떨어지는 별 스타일 */
.falling-star {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgb(255, 234, 118); /* 황금색 별 */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: fall 5s linear forwards, twinkle 2s linear infinite; /* 반짝임 애니메이션 추가 */
}

.falling-moon {
    position: absolute;
    width: 30px;
    height: 30px;
    background: gold; /* 황금색 달 */
    border-radius: 50%;
    clip-path: polygon(50% 0%, 70% 10%, 100% 50%, 70% 90%, 50% 100%, 0% 50%);
    animation: fall 3s linear forwards, rotate 5s linear infinite; /* 회전 애니메이션 추가 */
}

/* 떨어지는 애니메이션 */
@keyframes fall {
    0% {
        transform: translateY(-100px) rotate(0deg); /* 시작 시 회전 없음 */
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg); /* 끝에서 360도 회전 */
        opacity: 0;
    }
}

/* 반짝임 애니메이션 */
@keyframes twinkle {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

/* 회전 애니메이션 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ... (기존 스타일) ... */

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 기존의 점 배경 제거 */
    /* background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.3)"/><circle cx="90" cy="20" r="2" fill="rgba(255,255,255,0.2)"/><circle cx="50" cy="80" r="1" fill="rgba(255,255,255,0.4)"/></svg>') repeat; */
    opacity: 0.1;
    /* 기존의 twinkle 애니메이션 제거 */
    /* animation: twinkle 5s infinite; */
    z-index: -1;
    pointer-events: none;
}

/* 별과 초승달을 담을 컨테이너 */
.background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden; /* 요소가 body 밖으로 나가지 않도록 */
}

/* 별과 초승달 공통 스타일 */
.background-element {
    position: absolute;
    opacity: 0;
    animation: fade-in 2s forwards, move linear infinite; /* 나타나기, 움직이기 애니메이션 */
}

/* 별 스타일 */
.background-star {
    width: 10px;
    height: 10px;
    background: rgb(255, 234, 118); /* 황금색 별 */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 초승달 스타일 */
.background-moon {
    width: 15px;
    height: 15px;
    background: gold; /* 황금색 달 */
    border-radius: 50%;
    clip-path: polygon(50% 0%, 70% 10%, 100% 50%, 70% 90%, 50% 100%, 0% 50%);
}

/* 나타나기 애니메이션 */
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.3;
    }
}

/* 움직이기 애니메이션 */
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(10px, 10px); /* 오른쪽 아래로 이동 */
    }
}