/* ============================================
   UpFlow 반응형 + 모바일 카드 변환
   ============================================ */

/* ── 태블릿 (992px 이하) ── */
@media (max-width: 992px) {
    .user-content, .admin-content {
        margin-left: 0 !important;
        padding: var(--space-4);
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* 그리드 2단 → 1단 */
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── 모바일 (768px 이하) ── */
@media (max-width: 768px) {
    :root {
        --nav-height: 48px;
    }

    .user-content, .admin-content {
        padding: var(--space-3);
    }

    .page-header .page-title {
        font-size: var(--font-size-xl);
    }

    /* 스탯 카드 2열 고정 */
    .stat-grid-responsive {
        grid-template-columns: 1fr 1fr !important;
    }

    /* 테이블 → 카드 변환 */
    .table-responsive-cards thead {
        display: none;
    }

    .table-responsive-cards tbody tr {
        display: block;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-2);
        padding: var(--space-3);
    }

    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-1) 0;
        border-bottom: 1px solid var(--border-light);
        font-size: var(--font-size-sm);
    }

    .table-responsive-cards tbody td:last-child {
        border-bottom: none;
        padding-top: var(--space-2);
        justify-content: flex-end;
    }

    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-medium);
        color: var(--text-muted);
        font-size: var(--font-size-xs);
        flex-shrink: 0;
        margin-right: var(--space-3);
    }

    /* 순위 테이블 → 모바일 카드 */
    .rank-date-table thead { display: none; }
    .rank-date-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-2);
        padding: var(--space-3);
        position: relative;
    }
    .rank-date-table tbody tr.date-expand-row {
        margin-top: calc(-1 * var(--space-2));
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: var(--space-2) var(--space-3);
    }
    /* 펼침행(td)이 flex 카드 안에서 콘텐츠폭으로 줄어들지 않게 전체폭 확보 → day-grid 2열이 화면폭을 채움 */
    .rank-date-table tbody tr.date-expand-row > td,
    .rank-date-table tbody tr.list-expand-row > td,
    .rank-date-table tbody tr.chart-expand-row > td {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    /* 체크박스: 카드 우상단 */
    .rank-date-table tbody td[data-label=""] {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        padding: 0;
        border: none;
        order: -1;
    }

    /* 키워드: 전체 너비 */
    .rank-date-table tbody td[data-label="키워드"] {
        width: 100%;
        padding-right: 30px;
        border-bottom: 1px solid var(--border-light);
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-2);
        order: 0;
    }

    /* 검색량/업체수: 키워드 아래 인라인 */
    .rank-date-table tbody td[data-label="검색량"],
    .rank-date-table tbody td[data-label="업체수"] {
        width: 50%;
        display: flex;
        align-items: center;
        font-size: var(--font-size-xs);
        border: none;
        padding: 2px 0;
        order: 0;
    }
    .rank-date-table tbody td[data-label="검색량"]::before,
    .rank-date-table tbody td[data-label="업체수"]::before {
        content: attr(data-label) ": ";
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        margin-right: 4px;
    }

    /* 현재 PC / 현재 모바일 */
    .rank-date-table tbody td[data-label="현재 PC"],
    .rank-date-table tbody td[data-label="현재 모바일"] {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-2) 0;
        border: none;
        order: 1;
    }
    .rank-date-table tbody td[data-label="현재 PC"]::before,
    .rank-date-table tbody td[data-label="현재 모바일"]::before {
        content: attr(data-label);
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    /* 리뷰 확장 행 */
    .rank-date-table tbody tr.review-expand-row {
        margin-top: calc(-1 * var(--space-2));
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding: var(--space-2) var(--space-3);
    }

    /* 최초/현재/변동: 가로 3등분 한 줄 */
    .rank-date-table tbody td[data-label="최초"],
    .rank-date-table tbody td[data-label="현재"],
    .rank-date-table tbody td[data-label="변동"] {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-2) 0;
        border: none;
        box-sizing: border-box;
        order: 1;
    }
    .rank-date-table tbody td[data-label="최초"]::before,
    .rank-date-table tbody td[data-label="현재"]::before,
    .rank-date-table tbody td[data-label="변동"]::before {
        content: attr(data-label);
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        font-weight: var(--font-weight-medium);
        margin-bottom: 2px;
    }

    /* 메모: 전체 너비 */
    .rank-date-table tbody td[data-label="메모"] {
        width: 100%;
        border-top: 1px solid var(--border-light);
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        order: 2;
    }
    .rank-date-table tbody td[data-label="메모"]:empty,
    .rank-date-table tbody td[data-label="메모"]:blank {
        display: none;
    }

    /* 관리: 전체 너비 우측 정렬 */
    .rank-date-table tbody td[data-label="관리"] {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        border: none;
        padding-top: var(--space-2);
        order: 3;
    }

    /* 필터바/추가폼 모바일 */
    .form-grid { display: flex !important; flex-direction: column; }
    .form-grid > div { min-width: 100% !important; flex: 1 !important; }
    .form-grid > select, .form-grid > .searchable-select { width: 100% !important; min-width: 100% !important; }
    .filter-scroll { flex-wrap: wrap; }

    /* 벌크 액션 바 */
    #bulkActions { flex-wrap: wrap; }

    /* 업체 분석 리뷰 그리드 */
    .review-grid { grid-template-columns: 1fr !important; }

    /* 모달 전체 화면 */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    .modal-content {
        border-radius: 0;
        height: 100%;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: 100%;
    }

    /* 카드 패딩 축소 */
    .card-body {
        padding: var(--space-3);
    }
    .card-header {
        padding: var(--space-3);
    }

    /* 폼 그리드 1열 */
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .form-grid .full-width {
        grid-column: auto;
    }

    /* 배너 절반 → 1열 */
    .banner-half-grid {
        grid-template-columns: 1fr !important;
    }

    /* 롤링 배너 버튼 크기 증가 */
    [onclick*="slideRolling"] {
        width: 44px !important;
        height: 44px !important;
    }

    /* 사이드바 메뉴 섹션 */
    .sidebar-section-title {
        font-size: var(--font-size-xs);
    }

    /* 필터 바 스크롤 */
    .filter-scroll {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-scroll::-webkit-scrollbar {
        display: none;
    }

    /* 구독 카드 1열 */
    .plan-grid {
        grid-template-columns: 1fr !important;
    }

    /* 업체뷰 카드 1열 */
    #bizGrid {
        grid-template-columns: 1fr !important;
    }

    /* 1회 검색 카드 그리드 */
    #resultItems {
        grid-template-columns: 1fr !important;
    }

    /* 뷰 전환 + 토글 버튼 줄바꿈 */
    .btn-label { display: none !important; }

    /* 탭 스크롤 — 가로 스크롤 + 각 탭 텍스트는 한 줄 유지 */
    [style*="border-bottom:2px solid"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    [style*="border-bottom:2px solid"]::-webkit-scrollbar { display: none; }
    [style*="border-bottom:2px solid"] > a {
        white-space: nowrap !important;
        flex-shrink: 0;
    }

    /* 키워드 분석 테이블 스크롤 */
    #kwTable { font-size: var(--font-size-xs); }

    /* N지수/리뷰 펼침 행 컴팩트 */
    .nindex-expand-row td,
    .review-expand-row td {
        padding: var(--space-1) var(--space-3) !important;
    }

    /* === 모바일 키워드 카드 hero 영역 (A안: 순위 우선) === */
    .kw-mobile-hero {
        display: block !important;
        margin: -4px -4px 8px -4px;  /* 카드 전체 폭 활용 (체크박스는 위에 떠있음) */
        padding: 10px 12px;
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-light);
    }

    /* 체크박스를 hero 위에 떠있게 — td/input 모두 배경 투명, input만 살짝 표시 */
    .rank-date-table tbody td[data-label=""] {
        z-index: 2 !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }
    .rank-date-table tbody td[data-label=""] input[type="checkbox"] {
        accent-color: var(--color-primary);
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    .hero-rank-box {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 4px 0;
    }
    .hero-rank-num {
        font-size: 32px;
        font-weight: 800;
        line-height: 1;
    }
    .hero-delta {
        font-size: 16px;
        font-weight: 700;
    }
    .hero-delta.up { color: var(--color-rank-up); }
    .hero-delta.down { color: var(--color-rank-down); }
    .hero-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 6px;
        margin-top: 6px;
        border-top: 1px dashed var(--border-color);
        font-size: var(--font-size-xs);
    }

    /* 모바일: hero가 업체/검색을 이미 표시 → 키워드 셀 메타줄의 PC용 업체/검색 숨김 */
    .kw-vol-pc {
        display: none !important;
    }

    /* 통계 td 전체 숨김 — hero에 오늘/어제/최초 모두 포함되어 중복 */
    .rank-date-table td[data-label="통계"] {
        display: none !important;
    }

    /* === 액션 버튼 모바일: 아이콘만이라 6개 한 줄 가능 === */
    .rank-date-table .col-action > div,
    .rank-date-table td[data-label="관리"] > div {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 6px !important;
    }
    .rank-date-table td[data-label="관리"] .btn {
        padding: 6px 4px !important;
        min-height: 36px;
    }

    /* 관리자: 서비스 설정 테이블 스크롤 */
    .admin-content .table { font-size: var(--font-size-xs); }
    .admin-content .table input[type="number"],
    .admin-content .table input[type="time"],
    .admin-content .table select {
        min-width: 60px;
        font-size: var(--font-size-xs);
    }
}

/* ── 소형 모바일 (480px 이하) ── */
@media (max-width: 480px) {
    .user-content, .admin-content {
        padding: var(--space-2);
    }

    .stat-card {
        padding: var(--space-2) !important;
    }
    .stat-card .stat-value {
        font-size: var(--font-size-lg) !important;
    }
    .stat-card .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: var(--font-size-sm) !important;
    }

    .btn-sm {
        padding: 4px 8px;
        font-size: var(--font-size-xs);
    }

    /* 네비게이션 */
    .user-nav, .admin-nav {
        padding: 0 var(--space-3);
    }
    .nav-brand {
        font-size: var(--font-size-md) !important;
    }
    .nav-right {
        gap: var(--space-3) !important;
        flex-wrap: nowrap;
    }
    /* 모바일에선 텍스트 라벨 숨기고 아이콘만 (font-size:0 트릭) */
    .nav-right a {
        font-size: 0 !important;
        white-space: nowrap;
    }
    .nav-right a i { font-size: 18px; }
    .nav-right a .badge-count { font-size: var(--font-size-xs) !important; }

    /* 카드 내부 패딩 최소화 */
    .card-body { padding: var(--space-2) !important; }
    .card-header { padding: var(--space-2) var(--space-3) !important; }

    /* 업체뷰 카드 내부 테이블 */
    #bizGrid .card-body table { font-size: var(--font-size-xs); }

    /* 페이지 제목 축소 */
    .page-header .page-title { font-size: var(--font-size-lg) !important; }
    .page-header .page-desc { font-size: var(--font-size-xs); }

    /* 요약 카드 그리드 */
    [style*="display:flex"][style*="gap:var(--space-4)"] {
        gap: var(--space-2) !important;
    }

    /* 터치 대상 최소 크기 */
    .btn, button, a.btn { min-height: 36px; }
    input, select, textarea { min-height: 36px; font-size: 16px !important; }
}

/* ── 사용자 머리말 좁은 폭 (600px 이하) ──
   Ctrl+K 힌트·다크모드·가이드 아이콘은 서랍(.sidebar-mobile-tools)으로 보내고
   남은 아이콘은 44px 터치 영역을 유지한다 */
.sidebar-mobile-tools { display: none; }
.sidebar-mobile-tools .sidebar-link {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}
@media (max-width: 600px) {
    .user-nav .cmd-hint,
    .user-nav .nav-right .nav-optional { display: none; }
    .sidebar-mobile-tools { display: block; }

    .user-nav .sidebar-toggle,
    .user-nav .nav-right a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    /* 480px 이하 블록의 .nav-right gap(!important)보다 우선 — 간격은 터치 영역이 대신한다 */
    .user-nav .nav-right { gap: 0 !important; }
}

/* ── Ctrl+K 안내 힌트 ── */
.cmd-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.cmd-hint:hover {
    background: rgba(255,255,255,0.15);
    color: var(--text-inverse);
}
.cmd-hint kbd {
    background: rgba(255,255,255,0.15);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
}

/* 사용자 네비용 cmd-hint (라이트) */
.user-nav .cmd-hint {
    background: var(--color-gray-100);
    color: var(--text-muted);
}
.user-nav .cmd-hint:hover {
    background: var(--color-gray-200);
    color: var(--text-primary);
}
.user-nav .cmd-hint kbd {
    background: var(--color-gray-200);
}

/* ── 사이드바 섹션 접기 ── */
.sidebar-section-title.collapsible {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.sidebar-section-title.collapsible::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
    pointer-events: none;
}
.sidebar-section-title.collapsible.collapsed::after {
    transform: rotate(-90deg);
}
.sidebar-section-body.collapsed {
    display: none;
}

/* ── 로딩 버튼 ── */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── 404 안내 (404.php) ── */
.not-found {
    max-width: 560px;
    margin: var(--space-12) auto;
}
.not-found .not-found-code {
    font-size: var(--font-size-3xl, 2rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary);
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-2);
}
.not-found .empty-desc { text-wrap: pretty; }
.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}
@media (max-width: 600px) {
    .not-found { margin: var(--space-6) auto; }
    .not-found .empty-state { padding: var(--space-8) var(--space-4); }
    .not-found-actions .btn { flex: 1 1 100%; }
}

/* ── 공지사항 목록: 모바일 카드형 (my/notices.php, ≤600) ── */
@media (max-width: 600px) {
    .notice-table thead { display: none; }
    .notice-table,
    .notice-table > tbody { display: block; }
    .notice-table > tbody > tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border-color);
    }
    .notice-table > tbody > tr:last-child { border-bottom: 0; }
    .notice-table > tbody > tr > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .notice-table > tbody > tr > .nt-cat { grid-column: 1; grid-row: 1; }
    .notice-table > tbody > tr > .nt-date { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
    .notice-table > tbody > tr > .nt-title {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.5;
    }
    .notice-table > tbody > tr > .nt-empty { grid-column: 1 / -1; }
}

/* ── 순위 보고서 모달 (nsa/templates/_history_modal.php) ── */
.h-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
@media (max-width: 600px) {
    .h-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .h-report-head { flex-direction: column; gap: var(--space-1); }
    .h-report-head > div:last-child { text-align: left !important; }
}

/* ── 관리자 대시보드 (admin/dashboard.php) ── */
.admin-dash-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}
.dash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}
.dash-card-head > :first-child { min-width: 0; }
.dash-card-head > :last-child,
.dash-card-head > div:last-child > span { white-space: nowrap; }
@media (max-width: 600px) {
    .admin-dash-2col { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .dash-card-head > div:last-child { flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 600px) {
    /* 순위체크 현황 줄: 고정 폭(100/45/120px) 칸 때문에 진행 막대가 0 이 되는 것 방지 */
    .dash-progress > div { gap: var(--space-2) !important; }
    .dash-progress > div > div:first-child { width: 96px !important; flex: 0 0 auto; }
    .dash-progress > div > div:last-child { width: auto !important; flex: 0 0 auto; }
    .dash-progress > div > div:nth-child(2) { min-width: 40px; }
}