/* Explain: Mobile-specific extra CSS for admin panels. */
/* 관리자 기능 모바일 최적화 — 좁은 화면에서 상단바·필터·폼·목록·탭·차트가
   가로로 넘치지 않고 손가락으로 누르기 쉬운 크기와 간격이 되도록 다듬습니다.
   css/admin.mobile.css 바로 뒤에 로드되어 모바일 구간에서만 적용됩니다. */

/* ── 태블릿 이하(≤1023px): 좌측 메뉴가 열리는 구간 ── */
@media (max-width: 1023px) {
    .admin-topbar {
        flex-wrap: nowrap;
        gap: 0.4rem;
        padding: 0.5rem 0.65rem;
    }

    .admin-search {
        min-height: 2.5rem;
        padding-left: 0.85rem;
    }

    .admin-search input {
        font-size: 0.82rem;
    }

    .admin-topbar-right {
        gap: 0.35rem;
    }

    .admin-icon-btn {
        height: 2.4rem;
        width: 2.4rem;
    }
}

/* ── 모바일(≤767px) ── */
@media (max-width: 767px) {
    /* 사이드바가 화면보다 넓어지지 않도록 */
    .admin-sidebar {
        width: min(17rem, 86vw);
    }

    /* 본문 여백과 블록 사이 간격 축소 */
    .admin-content {
        gap: 1.1rem;
        padding: 0.95rem;
    }

    /* 제목·환영 문구 가독성 */
    .admin-welcome {
        font-size: 1.25rem;
    }

    .admin-block-title {
        font-size: 1.15rem;
    }

    /* 상단 액션(칩·버튼)이 한 줄에서 넘치지 않도록 줄바꿈 */
    .admin-head-actions {
        width: 100%;
        gap: 0.4rem;
    }

    .admin-chip {
        padding: 0.45rem 0.8rem;
        font-size: 0.78rem;
    }

    /* KPI 카드 — 긴 라벨이 두 줄로 자연스럽게 표시 */
    .admin-stat {
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.8rem 0.9rem;
    }

    .admin-stat-icon {
        height: 2.4rem;
        width: 2.4rem;
        font-size: 0.95rem;
    }

    .admin-stat-value {
        font-size: 1.15rem;
        word-break: keep-all;
    }

    .admin-stat-value-loading,
    .admin-stat-value-empty {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    /* 폼·패널·탭 안쪽 여백 축소 */
    .admin-form,
    .tabs,
    .admin-panel {
        padding: 1rem;
    }

    /* 입력·버튼을 한 손으로 누르기 쉬운 크기로 */
    .admin-input {
        min-height: 2.9rem;
        font-size: 16px;
    }

    .admin-btn {
        min-height: 3rem;
    }

    /* 폼의 주요 저장 버튼은 전체 너비로 */
    .admin-form button[type="submit"] {
        width: 100%;
    }

    /* 목록 행 — 터치 영역 확보와 제목 줄바꿈 */
    .admin-list-item,
    .admin-site-row {
        gap: 0.55rem;
        padding: 0.7rem 0.8rem;
    }

    .admin-item-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .admin-item-meta {
        font-size: 0.76rem;
    }

    .admin-del,
    .admin-tab-gear {
        height: 2.4rem;
        width: 2.4rem;
    }

    /* 탭 — 가로 스크롤 시 손가락 스냅 */
    .tab-bar {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.7rem;
    }

    .tab-btn {
        min-height: 2.7rem;
        scroll-snap-align: start;
    }

    /* 차트·범례·막대가 작은 화면에 맞도록 */
    .admin-chart-wrap {
        height: 13rem;
    }

    .admin-chart-center strong {
        font-size: 1.35rem;
    }

    .admin-legend li {
        font-size: 0.8rem;
    }

    .admin-legend-label {
        white-space: normal;
    }

    .admin-bar-row {
        grid-template-columns: 4.5rem 1fr 2.6rem;
        gap: 0.45rem;
        font-size: 0.8rem;
    }

    /* 브랜딩 미리보기 행이 넘치지 않도록 */
    .admin-brand-row,
    .admin-preview-card {
        flex-wrap: wrap;
    }
}

/* ── 초소형 화면(≤420px) ── */
@media (max-width: 420px) {
    .admin-content {
        padding: 0.75rem;
    }

    .admin-stat-grid,
    .admin-quick-grid {
        gap: 0.5rem;
    }

    .admin-stat {
        gap: 0.5rem;
        padding: 0.7rem;
    }

    .admin-stat-icon {
        height: 2.1rem;
        width: 2.1rem;
        font-size: 0.85rem;
    }

    .admin-stat-value {
        font-size: 1rem;
    }

    .admin-quick {
        min-height: 4.75rem;
        font-size: 0.76rem;
    }

    .admin-search input {
        font-size: 0.78rem;
    }

    .tab-btn {
        font-size: 0.8rem;
    }
}