/* ==========================================
   Contest System - Responsive Styles
   자유공모/지정공모 반응형 스타일
   
   브레이크포인트:
   - 1360px: 데스크탑 Small
   - 1024px: 태블릿
   - 768px: 모바일
   - 480px: 모바일 Small
   ========================================== */

/* ==========================================
   1360px - 데스크탑 Small
   ========================================== */
@media (max-width: 1360px) {
    /* 과제 그리드 4열 */
    .challenge-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================
   1024px - 태블릿
   ========================================== */
@media (max-width: 1024px) {
    /* 레이아웃 */
    .content-layout {
        padding: 1.5rem !important;
    }
    
    /* Entry 페이지 Step 아이콘 */
    .entry-page .step-icon-box {
        width: 100px !important;
        height: 100px !important;
    }
    
    .entry-page .step-info h4 {
        font-size: 1rem;
    }
    
    .entry-page .step-info p {
        font-size: 0.9rem;
    }
    
    /* 상단 액션 영역 */
    .top-actions {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    /* 검색 박스 */
    .search-box {
        flex-wrap: wrap;
    }
    
    .search-box input {
        max-width: 100%;
    }
    
    /* 통계 박스 */
    .stats-box {
        flex-direction: column;
    }
    
    /* 과제 그리드 3열 */
    .challenge-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================
   768px - 모바일
   ========================================== */
@media (max-width: 768px) {
    /* 배너 */
    .banner-title {
        font-size: 1.75rem;
    }
    
    .banner-subtitle {
        font-size: 0.95rem;
    }
    
    /* 레이아웃 */
    .content-layout {
        padding: 1rem !important;
    }
    
    /* Entry 페이지 Step - 세로 배치 */
    .container .list-step {
        flex-direction: column !important;
        gap: 40px !important;
    }
    
    .container .list-step li {
        width: 100% !important;
        max-width: 400px !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
    }
    
    .step-info {
        text-align: left !important;
        flex: 1 !important;
    }
    
    .step-icon-box {
        flex-shrink: 0 !important;
        width: 90px !important;
        height: 90px !important;
        font-size: 2.5rem !important;
    }
    
    /* 통계 박스 */
    .stats-box {
        padding: 15px;
        gap: 10px;
    }
    
    .stat-item {
        padding: 12px;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .stat-value {
        font-size: 1.2rem;
    }
    
    /* 검색 박스 세로 배치 */
    .search-box {
        flex-direction: column;
    }
    
    .search-box select,
    .search-box input {
        width: 100%;
        max-width: 100%;
    }
    
    /* 모드 토글 세로 배치 */
    .mode-toggle {
        flex-direction: column;
    }
    
    .mode-toggle button {
        width: 100%;
    }
    
    /* 버튼 영역 세로 배치 */
    .top-actions > div:last-child {
        flex-direction: column;
        width: 100%;
    }
    
    .cmm-btn-excel,
    .cmm-btn-blue {
        width: 100%;
        margin: 0;
    }
    
    /* 테이블 */
    .cmm-tit-h2 {
        font-size: 1.1rem;
    }
    
    /* 제목 행 세로 배치 */
    .title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .mode-toggle {
        width: 100%;
    }
    
    .mode-toggle button {
        flex: 1;
    }
    
    /* 테이블 가로 스크롤 */
    .cmm-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .cmm-table::after {
        display: block;
    }
    
    .data {
        min-width: 1000px;
    }
    
    /* 테이블 폰트 크기 */
    .data thead th {
        font-size: 0.85rem;
        padding: 10px 8px;
    }
    
    .data tbody td {
        font-size: 0.85rem;
        padding: 10px 8px;
    }
    
    /* 배지/태그 작게 */
    .badge-free,
    .badge-designated,
    .status-badge,
    .keyword-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .cmm-btn-navy {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Sub5 미리보기 세로 배치 */
    .preview-table-wrap .form-content dl {
        flex-direction: column !important;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .preview-table-wrap .form-content dt {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0;
        padding: 0.75rem 1rem !important;
        background: #fafafa;
        font-size: 0.9rem !important;
    }
    
    .preview-table-wrap .form-content dd {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Sub5 배지 */
    .preview-table-wrap .badge-free,
    .preview-table-wrap .badge-designated {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
    
    /* 키워드 태그 */
    .preview-table-wrap .keyword-tag {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        margin: 0.25rem !important;
    }
    
    /* 상세설명 */
    .preview-table-wrap .form-content dd > div[style*="white-space: pre-wrap"] {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
    }
    
    /* 약관 영역 */
    .preview-table-wrap .form-content dd > div[style*="background-color: #f8f9fa"] {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .preview-table-wrap .form-content dd > div[style*="background-color: #f8f9fa"] p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        word-break: keep-all !important;
    }
    
    /* 과제 그리드 1열 */
    .challenge-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* 공고문 업로드 모달 */
    #uploadModal > div {
        width: 95% !important;
        padding: 20px !important;
        max-width: none !important;
    }
    
    #uploadModal h3 {
        font-size: 1.2rem !important;
    }
    
    #uploadModal p {
        font-size: 0.85rem !important;
    }
    
    /* 다운로드/업로드 버튼 모바일 */
    .text-bottom > div {
        flex-direction: column !important;
    }
    
    .text-bottom a,
    .text-bottom button {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    /* 아이디어 제안하기 버튼 중앙정렬 */
    .text-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .text-bottom button {
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ==========================================
   480px - 모바일 Small
   ========================================== */
@media (max-width: 480px) {
    /* 배너 */
    .gradient-banner {
        padding: 2rem 1rem;
    }
    
    .banner-title {
        font-size: 1.5rem;
    }
    
    .banner-subtitle {
        font-size: 0.85rem;
    }
    
    /* 레이아웃 */
    .content-layout {
        padding: 0.75rem !important;
    }
    
    /* 상단 박스 */
    .cmm-top-box {
        padding: 1rem;
    }
    
    /* 통계 박스 */
    .stats-box {
        padding: 10px;
    }
    
    .stat-item {
        padding: 10px;
    }
    
    /* 과제 카드 */
    .challenge-card {
        min-height: 240px;
    }
}

/* ==========================================
   공통 애니메이션
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}