body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#map {
    height: 35vh; /* 모바일에서 화면 높이의 35% 차지 */
    min-height: 250px;
    max-height: 400px;
    width: 100%;
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: #f9fafb;
}

/* 태블릿 이상에서는 지도 높이 고정 */
@media (min-width: 640px) {
    #map {
        height: 400px;
    }
}

.option-button {
    min-height: 3.5rem; /* 터치하기 쉬운 충분한 높이 */
    padding: 0.5rem;
    font-size: 0.95rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
    line-height: 1.2;
}

/* 모바일에서 글자 크기 조정 */
@media (max-width: 640px) {
    .option-button {
        font-size: 0.85rem;
        min-height: 3rem;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    .prose {
        font-size: 0.9rem !important;
    }
}

.leaflet-marker-icon {
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/* 애니메이션 효과 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#quiz-container, #difficulty-selector {
    animation: fadeIn 0.4s ease-out;
}