/* ===== 스마트폰 최적화 (768px 이하) ===== */
@media (max-width: 768px) {

    /* 컨테이너 */
    .container {
        max-width: 100%;
        padding: 15px;
        margin: 0;
    }

    /* 헤더 */
    .main-header {
        padding: 15px 0;
    }

    .logo-area {
        gap: 6px;
        padding: 8px;
    }

    .yin-yang {
        width: 60px;
        height: 60px;
    }

    .main-header h1 {
        font-size: 1.4rem;
    }

    .subtitle {
        font-size: 0.85rem;
    }

    /* 폼 카드 */
    .form-card {
        padding: 25px 15px;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .card-header h2 {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }

    .card-header p {
        font-size: 0.9rem;
    }

    .card-desc {
        padding: 0 8px;
        font-size: 0.9rem;
    }

    .card-features {
        gap: 8px;
        margin-top: 12px;
    }

    .feature-tag {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* 폼 그룹 */
    .form-group {
        margin-bottom: 20px;
    }

    .group-label {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    /* 날짜 입력 */
    .date-inputs {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .input-wrapper select {
        padding: 12px;
        font-size: 0.95rem;
    }

    .input-help {
        font-size: 0.8rem;
        margin-top: 6px;
    }

    /* 음력/양력 선택 */
    .calendar-select {
        gap: 12px;
    }

    .calendar-card {
        padding: 15px;
    }

    .calendar-icon {
        font-size: 1.8rem;
        margin-bottom: 6px;
    }

    .calendar-text {
        font-size: 0.95rem;
    }

    /* 윤달 체크박스 */
    .checkbox-label {
        padding: 12px 15px;
        font-size: 0.95rem;
    }

    .checkbox-icon {
        font-size: 1.3rem;
        margin-right: 8px;
    }

    /* 성별 선택 */
    .gender-select {
        gap: 12px;
    }

    .gender-card {
        padding: 20px 15px;
    }

    .gender-icon {
        font-size: 2.5rem;
        margin-bottom: 8px;
    }

    .gender-text {
        font-size: 0.95rem;
    }

    /* 제출 버튼 */
    .submit-btn {
        padding: 15px 20px;
        font-size: 1.1rem;
        gap: 8px;
    }

    .btn-icon {
        font-size: 1.3rem;
    }

    /* 정보 카드들 */
    .info-cards {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }

    /* 모바일에서는 모든 메뉴 표시 */
    .nav-link.hidden-category {
        display: flex !important;
    }

    .info-card {
        padding: 20px;
        border-radius: 16px;
    }

    .info-icon {
        font-size: 2.2rem;
        margin-bottom: 12px;
    }

    .info-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .info-card p {
        font-size: 0.85rem;
    }

    /* 결과 카드 */
    .result-card {
        padding: 20px;
        border-radius: 16px;
        margin-bottom: 15px;
    }

    .result-card h3 {
        font-size: 1.2rem;
    }

    /* 탭 네비게이션 */
    .tab-navigation,
    .bottom-tab-navigation {
        gap: 8px;
        padding: 12px;
        overflow-x: auto;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
    }

    .tab-btn,
    .bottom-tab-btn {
        min-width: 100px;
        padding: 12px 15px;
        font-size: 0.85rem;
    }

    /* 상세 카드 */
    .detail-card {
        padding: 25px 15px;
        border-radius: 16px;
        border-left: 4px solid var(--primary-color);
    }

    .detail-header {
        gap: 12px;
        margin-bottom: 20px;
    }

    .detail-icon {
        font-size: 2rem;
    }

    .detail-header h2 {
        font-size: 1.2rem;
    }

    .detail-content p {
        font-size: 0.95rem;
        margin-bottom: 15px;
    }

    /* 사주 기둥 */
    .pillar-explain {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 오행 그리드 */
    .oheng-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .oheng-item {
        padding: 15px 10px;
    }

    .oheng-emoji {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .oheng-name {
        font-size: 0.95rem;
    }

    .oheng-desc {
        font-size: 0.75rem;
    }

    .oheng-relation {
        margin-top: 20px;
        padding: 15px;
    }

    .oheng-relation h4 {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .oheng-relation p {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    /* 요약 카드 */
    .summary-card {
        padding: 20px;
    }

    .animal-emoji {
        font-size: 3.5rem;
        margin-bottom: 8px;
    }

    .animal-display h2 {
        font-size: 1.6rem;
    }

    .season-desc {
        font-size: 1rem;
    }

    /* 사주 기둥 표시 */
    .saju-pillars {
        gap: 10px;
        margin-top: 20px;
    }

    .pillar-content span {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    /* 특성 태그 */
    .trait-tags {
        gap: 6px;
    }

    .trait-tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .talent-tags {
        gap: 8px;
    }

    .talent-tag {
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    /* 오행 차트 */
    .oheng-item {
        grid-template-columns: 80px 1fr 50px;
        gap: 10px;
    }

    .oheng-label {
        gap: 6px;
    }

    .oheng-emoji {
        font-size: 1.3rem;
    }

    .oheng-name {
        font-size: 0.9rem;
    }

    .oheng-bar-container {
        height: 25px;
    }

    .oheng-count {
        font-size: 0.8rem;
    }

    .oheng-status {
        font-size: 0.85rem;
    }

    /* 성격 특성 */
    .personality-item {
        padding: 15px;
    }

    .trait-name {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .trait-desc {
        font-size: 0.9rem;
    }

    /* 직업 태그 */
    .job-tags {
        gap: 8px;
    }

    .job-tag {
        padding: 8px 15px;
        font-size: 0.8rem;
    }

    /* 대운 */
    .daeun-info {
        padding: 12px;
        margin-bottom: 15px;
        font-size: 0.9rem;
    }

    .daeun-timeline {
        gap: 8px;
    }

    .daeun-item {
        padding: 15px 10px;
        flex: 0 0 85px;
    }

    .daeun-age {
        font-size: 0.8rem;
        margin-bottom: 6px;
    }

    .daeun-ganji {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }

    .daeun-sipsin {
        font-size: 0.8rem;
    }

    .daeun-detail-item {
        padding: 15px;
        margin-bottom: 15px;
    }

    .period-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .period-age {
        font-size: 1rem;
    }

    .period-description {
        font-size: 0.95rem;
    }

    /* 월별 운세 */
    .monthly-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .month-item {
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    .month-num {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .month-level {
        font-size: 0.8rem;
    }

    /* 점수 바 */
    .score-item {
        grid-template-columns: 90px 1fr 50px;
        gap: 10px;
    }

    .score-label {
        font-size: 0.9rem;
    }

    .score-bar-container {
        height: 18px;
    }

    .score-value {
        font-size: 0.9rem;
    }

    /* 타입 배지 */
    .type-badge {
        padding: 8px 20px;
        font-size: 0.95rem;
    }

    /* 조언 박스 */
    .advice-box {
        gap: 12px;
        padding: 15px;
    }

    .advice-icon {
        font-size: 1.3rem;
    }

    /* 하단 푸터 */
    .main-footer {
        padding: 20px;
        margin-bottom: 50px;
        font-size: 0.9rem;
    }

    .copyright {
        font-size: 0.85rem;
    }

    /* 탑 버튼 */
    #topBtn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        bottom: 20px;
        right: 15px;
    }
}

/* ===== 초소형 모바일 (480px 이하) ===== */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    .main-header {
        padding: 10px 0;
    }

    .yin-yang {
        width: 50px;
        height: 50px;
    }

    .main-header h1 {
        font-size: 1.2rem;
    }

    .subtitle {
        font-size: 0.8rem;
    }

    .form-card {
        padding: 20px 12px;
    }

    .card-header h2 {
        font-size: 1.2rem;
    }

    .card-desc {
        font-size: 0.85rem;
    }

    .feature-tag {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    .date-inputs {
        grid-template-columns: 1fr;
    }

    .input-wrapper select {
        padding: 10px;
        font-size: 0.9rem;
    }

    .calendar-card {
        padding: 12px;
    }

    .calendar-icon {
        font-size: 1.6rem;
    }

    .gender-card {
        padding: 15px 10px;
    }

    .gender-icon {
        font-size: 2rem;
    }

    .submit-btn {
        padding: 12px 15px;
        font-size: 1rem;
    }

    .info-cards {
        gap: 12px;
    }

    .info-card {
        padding: 15px;
    }

    .info-icon {
        font-size: 2rem;
    }

    .info-card h3 {
        font-size: 0.95rem;
    }

    .info-card p {
        font-size: 0.8rem;
    }

    .result-card {
        padding: 15px;
    }

    .result-card h3 {
        font-size: 1.1rem;
    }

    .tab-btn,
    .bottom-tab-btn {
        min-width: 80px;
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .detail-card {
        padding: 20px 12px;
    }

    .detail-header {
        gap: 10px;
    }

    .detail-icon {
        font-size: 1.8rem;
    }

    .detail-header h2 {
        font-size: 1.1rem;
    }

    .pillar-explain {
        grid-template-columns: 1fr;
    }

    .oheng-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .oheng-emoji {
        font-size: 1.8rem;
    }

    .animal-emoji {
        font-size: 3rem;
    }

    .animal-display h2 {
        font-size: 1.4rem;
    }

    .monthly-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .month-item {
        padding: 10px 6px;
        font-size: 0.8rem;
    }

    .daeun-item {
        flex: 0 0 75px;
        padding: 12px 8px;
    }

    .main-footer {
        padding: 15px;
        font-size: 0.85rem;
    }

    #topBtn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}