/* 버튼 크기 최적화 및 모바일 우선 배치 */

/* 데스크톱 버튼 스타일 */
.url-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 20px;
    flex-wrap: wrap;
}

/* 데스크톱에서는 mobile-secondary-buttons를 플랫하게 */
.mobile-secondary-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* 데스크톱에서 모든 버튼 동일한 크기 */
#generateAllBtn,
#exportImageBtn,
#clearMandalartBtn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    min-width: 160px !important;
    transform: none !important; /* 모든 버튼 동일 크기 */
    opacity: 1 !important;
}

/* 데스크톱에서는 원본 텍스트 표시 */
#exportImageBtn .desktop-text {
    display: inline !important;
}

#exportImageBtn .mobile-text {
    display: none !important;
}

/* AI 일괄생성 버튼 - 첫 번째 위치 */
#generateAllBtn {
    background: var(--primary-gradient) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(108, 141, 242, 0.3) !important;
    order: 1 !important;
}

#generateAllBtn:hover {
    background: var(--accent-gradient) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(108, 141, 242, 0.4) !important;
}

/* 초기화 버튼 - 두 번째 위치 */
#clearMandalartBtn {
    order: 2 !important;
}

/* 이미지 공유 버튼 - 세 번째 위치 */
#exportImageBtn {
    order: 3 !important;
}

/* 모든 버튼 아이콘 크기 동일 */
#generateAllBtn .button-icon,
#exportImageBtn .button-icon,
#clearMandalartBtn .button-icon {
    font-size: 16px !important;
}

/* 호버 효과 동일 */
#exportImageBtn:hover,
#clearMandalartBtn:hover {
    transform: translateY(-2px) !important;
}

/* 액티브 효과 동일 */
#generateAllBtn:active,
#exportImageBtn:active,
#clearMandalartBtn:active {
    transform: translateY(0px) scale(0.98) !important;
}

/* 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
    .url-controls {
        flex-direction: column;
        gap: 18px; /* 버튼 간격 증가 */
        padding: 20px 5px; /* 좌우 패딩 줄이고 상하 패딩 증가 */
        margin-bottom: 25px;
        align-items: center;
        overflow-x: visible; /* 넓어진 버튼들이 잘리지 않도록 */
    }
    
    /* AI 일괄생성 버튼 - 화면 전체 너비로 대폭 확장 */
    #generateAllBtn {
        width: calc(100vw - 20px) !important; /* 화면 전체 너비에서 좌우 여백 제외 */
        max-width: none !important; /* 최대 크기 제한 해제 */
        height: 80px !important; /* 높이 대폭 증가 */
        margin: 0 10px !important; /* 좌우 10px 여백 */
        padding: 22px 40px !important;
        font-size: 1.9rem !important; /* 글자 크기 대폭 증가 */
        font-weight: 900 !important;
        border-radius: 22px !important;
        transform: none !important;
        order: 1 !important;
        box-shadow: 0 12px 35px rgba(108, 141, 242, 0.6) !important;
        background: linear-gradient(135deg, #6c8df2 0%, #8b7ed8 50%, #ff9ff3 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        box-sizing: border-box !important;
    }
    
    #generateAllBtn .button-icon {
        font-size: 2.4rem !important; /* 아이콘 크기 대폭 증가 */
        flex-shrink: 0;
    }
    
    #generateAllBtn .button-text {
        font-size: 1.9rem !important; /* 텍스트 크기 대폭 증가 */
        font-weight: 900 !important;
        color: white !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    #generateAllBtn:active {
        transform: scale(0.97) !important;
    }
    
    /* 2차 버튼들 - AI 버튼 크기에 맞춰 대폭 확장된 2열 배치 */
    .mobile-secondary-buttons {
        display: flex !important;
        gap: 15px !important;
        width: calc(100vw - 20px) !important; /* AI 버튼과 동일한 너비 */
        margin: 0 10px !important; /* AI 버튼과 동일한 여백 */
        order: 2 !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    
    #exportImageBtn,
    #clearMandalartBtn {
        flex: 1 !important;
        height: 75px !important; /* 두 줄 텍스트 고려하여 높이 증가 */
        padding: 18px 12px !important; /* 좌우 패딩 줄여서 텍스트 공간 확보 */
        font-size: 1.3rem !important; /* 글자 크기 대폭 증가 */
        font-weight: 800 !important;
        border-radius: 20px !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important; /* 아이콘과 텍스트 간격 조정 */
        transform: none !important;
        opacity: 0.95 !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
    }
    
    /* 텍스트도 대폭 확대 */
    #exportImageBtn .button-text,
    #clearMandalartBtn .button-text {
        display: inline !important;
        font-size: 1.2rem !important; /* 텍스트 크기 대폭 증가 */
        font-weight: 800 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* 데스크톱 텍스트는 숨기고 모바일 텍스트만 표시 */
    #exportImageBtn .desktop-text {
        display: none !important;
    }
    
    #exportImageBtn .mobile-text {
        display: inline !important;
        white-space: normal !important; /* 줄바꿈 허용 */
        line-height: 1.1 !important; /* 줄간격 조정 */
        font-size: 1.05rem !important; /* 두 줄이므로 약간 작게 */
    }
    
    /* 초기화 버튼은 원래대로 */
    #clearMandalartBtn .button-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    #exportImageBtn .button-icon,
    #clearMandalartBtn .button-icon {
        font-size: 1.6rem !important; /* 아이콘 크기 대폭 증가 */
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
    
    #exportImageBtn:active,
    #clearMandalartBtn:active {
        transform: scale(0.95) !important;
        opacity: 1 !important;
    }
}

/* 태블릿 최적화 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    #generateAllBtn,
    #exportImageBtn,
    #clearMandalartBtn {
        padding: 11px 22px !important;
        font-size: 13px !important;
        min-width: 140px !important;
    }
    
    .mobile-secondary-buttons {
        gap: 12px;
    }
}

/* 큰 화면 최적화 (1400px 이상) */
@media (min-width: 1400px) {
    #generateAllBtn,
    #exportImageBtn,
    #clearMandalartBtn {
        padding: 14px 28px !important;
        font-size: 15px !important;
        min-width: 180px !important;
    }
    
    #generateAllBtn .button-icon,
    #exportImageBtn .button-icon,
    #clearMandalartBtn .button-icon {
        font-size: 18px !important;
    }
    
    .url-controls {
        gap: 20px;
    }
}