/* =====================================================================
   빠밤에듀 공통 모바일 반응형 스타일 (assets/css/mobile.css)
   - 각 페이지의 인라인 <style> 뒤에 로드되어 모바일(≤768px)에서만 레이아웃을 보정
   - PC(>768px)에는 영향 없음 (기본 박스 보정 몇 가지 제외)
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0.06); }

/* JS가 감싸주는 테이블 스크롤 래퍼 */
.bb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bb-table-scroll > table { margin-bottom: 0; }

@media (max-width: 768px) {
    body { overflow-x: hidden; }
    img, video, iframe { max-width: 100%; }

    /* ---------- 헤더 ---------- */
    .header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px 12px !important;
        padding: 12px 16px !important;
        text-align: left !important;
    }
    .header h1 { font-size: 18px !important; line-height: 1.3 !important; flex: 1 1 auto; min-width: 0; }
    .header-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
    .header > .back-btn, .header > .back-link, .header > .back-button, .header-left > .back-btn {
        flex: 0 0 auto; white-space: nowrap; padding: 8px 12px !important; font-size: 13px !important;
    }
    .header-right {
        width: 100%;
        min-width: 0; max-width: 100%;   /* 메뉴 칩(nowrap) 때문에 화면보다 넓어지는 것 방지 */
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px !important;
    }
    .header-right > a, .header-right > button { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap; }
    .header-divider { display: none !important; }
    /* 관리자/지사: <span class="user-info"> (텍스트) */
    span.user-info, .user-name {
        font-size: 13px !important; flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* 콘텐츠 페이지: <div class="user-info"> (이름+배지+로그아웃 묶음) */
    div.user-info { width: 100%; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; }
    .logout-btn { margin-left: auto; white-space: nowrap; }
    /* 메뉴 링크 묶음: 가로 스크롤 칩 */
    .header-menu {
        order: 10; width: 100%; min-width: 0;
        display: flex !important; flex-wrap: nowrap !important;
        overflow-x: auto; gap: 6px !important;
        padding: 2px 0 6px; margin: 0 !important;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .header-menu::-webkit-scrollbar { display: none; }
    .header-menu a {
        flex: 0 0 auto; white-space: nowrap;
        background: #f3f4f6; border-radius: 20px;
        padding: 8px 14px !important; font-size: 13px !important;
    }

    /* ---------- 컨테이너 / 카드 ---------- */
    .container, .main-container { padding: 16px !important; }
    .card, .content-box { padding: 16px !important; border-radius: 12px !important; }
    .card h2, .card h3, .content-box h2 { font-size: 17px !important; }
    h1 { font-size: 22px; }

    /* ---------- 그리드 ---------- */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .stat-card { padding: 16px !important; }
    .stat-card .value { font-size: 24px !important; }
    .stat-card h3 { font-size: 13px !important; }
    .menu-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .menu-card { padding: 18px !important; }

    /* ---------- 테이블: 가로 스크롤 + 줄바꿈 방지 ---------- */
    .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
    table { width: 100%; }
    th, td { white-space: nowrap; padding: 10px 12px !important; font-size: 13px !important; }

    /* ---------- 폼 ---------- */
    .form-row { display: flex !important; flex-direction: column !important; gap: 12px !important; }
    .form-row > * { width: 100% !important; flex: none !important; min-width: 0 !important; }
    .form-group { margin-bottom: 14px; }
    input[type=text], input[type=password], input[type=email], input[type=number],
    input[type=tel], input[type=date], input[type=search], input[type=url], select, textarea {
        font-size: 16px !important;   /* iOS 자동 확대 방지 */
        max-width: 100%;
    }
    .filters, .filter-form, .filter-bar, .search-bar, .toolbar {
        display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    }
    .filters > *, .filter-form > *, .filter-bar > *, .search-bar > * {
        flex: 1 1 auto !important; min-width: 140px; max-width: 100%;
    }
    .filters .btn, .filter-form .btn, .filter-form button, .filters button { flex: 0 0 auto !important; }

    /* ---------- 버튼 ---------- */
    .btn, button.btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .actions, .action-buttons, .button-group, .btn-group { display: flex; flex-wrap: wrap; gap: 6px; }

    /* ---------- 모달 ---------- */
    .modal-content {
        width: calc(100vw - 24px) !important; max-width: none !important;
        max-height: 90vh; overflow-y: auto;
        margin: 5vh auto !important; padding: 18px !important; border-radius: 14px !important;
    }

    /* ---------- 페이지네이션 / 상태 ---------- */
    .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .empty-message, .no-content { padding: 30px 16px !important; font-size: 14px; }

    /* ---------- 사이드바 레이아웃 (콘텐츠 페이지) ---------- */
    .sidebar {
        position: relative !important; width: 100% !important;
        min-height: auto !important; height: auto !important;
        padding: 14px 16px !important;
    }
    .main-content { margin-left: 0 !important; padding: 16px !important; width: 100% !important; }
    .sidebar-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px !important; padding: 0 !important; text-align: left !important; }
    .sidebar-logo img { width: 40px !important; height: auto !important; margin: 0 !important; }
    .sidebar-logo h2 { font-size: 18px !important; margin: 0 !important; }
    .sidebar-logo .year { font-size: 12px !important; margin: 0 0 0 auto !important; }
    .age-menu { display: flex; flex-wrap: wrap; gap: 8px; }
    .age-menu h3 { width: 100%; font-size: 13px !important; margin: 0 0 2px !important; }
    .age-item { flex: 1 1 auto; text-align: center; padding: 10px 12px !important; margin: 0 !important; }
    .sidebar-footer { position: relative !important; margin-top: 12px !important; padding: 0 !important; width: auto !important; left: auto !important; bottom: auto !important; }
    .issue-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap !important; gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    .issue-tab { flex: 0 0 auto; white-space: nowrap; }
    .week-header { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 420px) {
    .header h1 { font-size: 17px !important; }
    .stats-grid { gap: 10px !important; }
    .stat-card .value { font-size: 22px !important; }
    .container, .main-container, .main-content { padding: 12px !important; }
    .card, .content-box { padding: 14px !important; }
    .modal-content { width: calc(100vw - 16px) !important; padding: 16px !important; }
}