/*
 * responsive.css - 공통 반응형 스타일 (11개 페이지 공유)
 *
 * <head> 안의 인라인 <style> "직후"에 link 해야 한다.
 *   → 동일 셀렉터 오버라이드가 cascade 로 이기려면 인라인 스타일보다 뒤에 와야 함.
 *
 * 정책:
 *   - 769px 이상  : 기존 데스크톱 레이아웃 유지 + 좁은 구간(769~1024) 깨짐 보정
 *   - 768px 이하  : .screen-gate 전체 화면 경고 오버레이로 접속 차단
 *
 * 게이트 마크업은 js/common/screenGate.js 가 body 에 1회 주입한다.
 * 표시/숨김은 전적으로 아래 @media 규칙이 제어 → 리사이즈/회전 즉시 반영.
 */

/* ──────────────────────────────────────────────
 * 1) 태블릿 이하(≤768px) 접속 차단 게이트
 * ────────────────────────────────────────────── */
.screen-gate {
    display: none; /* 기본 숨김. ≤768px 에서만 노출(아래 @media) */
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* 항상 최상위 */
    background: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: #1f2937;
}

.screen-gate__logo {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 28px;
}

.screen-gate__icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 20px;
}

.screen-gate__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #111827;
}

.screen-gate__desc {
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    max-width: 360px;
    margin: 0;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .screen-gate {
        display: flex;
    }
    /* 게이트가 덮은 뒤 배경 스크롤/조작 차단 */
    html,
    body {
        overflow: hidden !important;
    }
}

/* ──────────────────────────────────────────────
 * 2) 769~1024px 유동화 보정
 *    새 레이아웃을 만들지 않는다. 가로 스크롤/잘림/겹침이
 *    생기는 지점만 핀포인트로 막는다.
 *    (구체 셀렉터는 페이지별 확인 후 채워 넣는다)
 * ────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* index.html : 좌우 5% 패딩 축소 */
    body.page-index {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* index.html : 학습지 테이블이 좁은 폭에서 잘리지 않도록 가로 스크롤 허용
       (기존 .table-wrapper { overflow-x: hidden } 오버라이드) */
    .page-index .table-wrapper {
        overflow-x: auto;
    }
    .page-index .worksheet-table {
        min-width: 720px;
    }

    /* step.html : 본문 좌우 패딩 축소(기존 20px 60px) */
    .page-step .div2 {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* admin.html : 문제목록 테이블 가로 스크롤 허용
       (기존 .table-wrap { overflow: hidden } 오버라이드) */
    .page-admin .table-wrap {
        overflow-x: auto;
    }
    .page-admin .table-wrap table {
        min-width: 880px;
    }

    /* result1/result2 : 분할 패널이 flex 축소되도록 허용해 내부 잘림/겹침 방지.
       (퍼센트 폭은 유동적이므로 min-width:0 만 보장) */
    .page-result1 .left-section,
    .page-result1 .right-section,
    .page-result2 .settings-panel,
    .page-result2 .preview-panel {
        min-width: 0;
    }
}
