:root {
    --primary-color: #ff7e5f; /* Default primary color */
    --secondary-color: #feb47b; /* Default secondary color */
}

body {
    font-family: 'Do Hyeon', sans-serif;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); /* Use CSS variables */
    color: white;
    text-align: center;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background 0.5s ease-in-out; /* Smooth transition for background change */
}

.container {
    background: rgba(0, 0, 0, 0.7); /* Slightly darker background for contrast */
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

#draw-button {
    background-color: var(--primary-color); /* Use primary color for button */
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); /* Glow with primary color */
}

#draw-button:hover {
    transform: scale(1.1);
}

#result {
    margin-top: 2rem;
    font-size: 2rem;
    font-weight: bold;
    min-height: 50px;
}

.country-description {
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
    color: #f0f0f0;
}

/* 제휴 문의 위젯 스타일 */
.partnership-inquiry-widget {
    position: fixed; /* 화면에 고정 */
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* 다른 요소들 위에 표시 */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 버튼과 폼이 오른쪽 정렬되도록 */
}

.inquiry-button {
    background-color: #007bff; /* 파란색 버튼 */
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    border-radius: 25px; /* 둥근 버튼 */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin-bottom: 10px; /* 폼과 버튼 사이 간격 */
}

.inquiry-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

#inquiry-form-content {
    background: rgba(0, 0, 0, 0.7);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    max-width: 300px; /* 폼의 최대 너비 */
    text-align: center;
    transform-origin: bottom right; /* 애니메이션 기준점 */
    transition: all 0.3s ease-in-out;
    opacity: 1; /* 기본값으로 opacity 설정 */
    visibility: visible; /* 기본값으로 visible 설정 */
}

#inquiry-form-content.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8); /* 숨겨질 때 작아지는 효과 */
    height: 0;
    padding: 0;
    overflow: hidden;
}

#inquiry-form-content h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #fff;
}

#inquiry-form-content form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%; /* 폼이 위젯 너비에 맞게 */
    text-align: left;
}

#inquiry-form-content label {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    color: #eee;
}

#inquiry-form-content input[type="email"],
#inquiry-form-content textarea {
    padding: 0.6rem;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 0.9rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    margin-top: 0.3rem;
    width: -webkit-fill-available; /* 너비를 부모 요소에 맞춤 */
    width: -moz-available;
    width: fill-available;
}

#inquiry-form-content textarea {
    min-height: 80px;
    resize: vertical;
}

#inquiry-form-content button[type="submit"] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 0.8rem;
    width: auto; /* 버튼 너비 자동 조절 */
    align-self: center; /* 가운데 정렬 */
}

#inquiry-form-content button[type="submit"]:hover {
    background-color: #218838;
    transform: translateY(-1px);
}

/* 폭죽 효과 스타일 */
.firework {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: transparent; /* 초기에는 투명 */
    border-radius: 50%;
    pointer-events: none; /* 클릭 이벤트 무시 */
    animation: firework-burst 0.8s ease-out forwards; /* 애니메이션 적용 */
    opacity: 0; /* 초기 투명 */
    transform: scale(0); /* 초기 크기 0 */
}

@keyframes firework-burst {
    0% {
        opacity: 1;
        transform: scale(0);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
    }
    10% {
        transform: scale(0.5);
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 255, 0, 0.7), 0 0 40px rgba(255, 165, 0, 0.7);
    }
    30% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 165, 0, 0.7), 0 0 90px rgba(255, 0, 0, 0.7);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
        box-shadow: 0 0 50px rgba(255, 255, 255, 0), 0 0 100px rgba(255, 165, 0, 0), 0 0 150px rgba(255, 0, 0, 0);
    }
}

.small-note {
    font-size: 0.9em; /* 작게 */
    opacity: 0.7; /* 약간 투명하게 */
    margin-top: -0.5rem; /* 위에 있는 p 태그와 간격 조정 */
    margin-bottom: 1rem; /* 버튼과 간격 조정 */
    color: #f0f0f0; /* 배경과 잘 어울리는 색 */
}

.season-info {
    font-size: 1.2rem; /* 나라 이름보다 작지만 읽기 편하게 */
    color: #ffd700; /* 황금색 계열로, 기존 색상과 조화 */
    margin-top: 0.5rem; /* 나라 이름과의 간격 */
    font-weight: normal; /* 강조는 아니지만 잘 보이도록 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 가독성을 위해 그림자 추가 */
}

.country-flag {
    width: 2.5rem; /* Adjust size as needed */
    height: 2.5rem; /* Keep aspect ratio */
    vertical-align: middle; /* Align with text */
    margin-left: 0.5rem;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Slightly rounded corners */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Small shadow for depth */
}