/* ===================================================================
   BlogOps 모바일 보정 (2026-10-20) — theme.css 다음, 마지막에 로드
   PC(769px 이상)에는 아무 영향 없음. 짝꿍 스크립트: assets/js/mobile.js
   =================================================================== */

/* 필터 접기 버튼 — PC에서는 숨김 */
.mf-toggle { display: none; }

@media (max-width: 768px) {
    /* ── 상단바: 제목 한 줄, 이름 숨김 ── */
    .topbar { gap: 8px; background: var(--canvas) !important; z-index: 50; }
    .topbar-left { min-width: 0; flex: 1 1 auto; }
    .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px !important; min-width: 0; }
    .topbar-right { gap: 6px !important; flex: 0 0 auto; }
    .topbar-user-name { display: none !important; }

    /* ── 페이지 폭 넘침 방지 ── */
    html, body { overflow-x: clip; }
    .content-area { max-width: 100vw; }
    .content-area img, .content-area video, .content-area iframe { max-width: 100%; height: auto; }
    .content-area pre { white-space: pre-wrap; word-break: break-word; }

    /* ── 탭: 한 줄로 두고 옆으로 밀기 ── */
    .sub-tabs, .tabs, .pj-tabs, .lmx-tabs, .lbadm-tabs, .inc-tabs, .db-tabs, .bank-tabs {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; max-width: 100%;
    }
    .sub-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .pj-tabs::-webkit-scrollbar, .lmx-tabs::-webkit-scrollbar,
    .lbadm-tabs::-webkit-scrollbar, .inc-tabs::-webkit-scrollbar, .db-tabs::-webkit-scrollbar, .bank-tabs::-webkit-scrollbar { display: none; }
    .sub-tabs > *, .tabs > *, .pj-tabs > *, .lmx-tabs > *, .lbadm-tabs > *, .inc-tabs > *, .db-tabs > *, .bank-tabs > * { flex: 0 0 auto; white-space: nowrap; }

    /* ── 손가락 크기 ── */
    .btn { min-height: 38px; }
    .btn-sm { min-height: 34px; }
    .form-input, .form-select, .form-textarea, .content-area input[type=text], .content-area input[type=search], .content-area input[type=number],
    .content-area input[type=date], .content-area input[type=email], .content-area input[type=tel], .content-area select, .content-area textarea { font-size: 16px !important; }
    .content-area input[type=checkbox], .content-area input[type=radio] { width: 18px; height: 18px; }

    /* ── 숫자 카드 ── */
    .stat-card { min-width: 0; }
    .stat-value { overflow-wrap: anywhere; }

    /* ── 폼 그리드 한 줄 ── */
    .form-grid, .form-row { grid-template-columns: 1fr !important; }

    /* ── 모달: 바닥에서 올라오는 시트 ── */
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal-overlay .modal, .modal-overlay > .modal-content, .modal-overlay > div[class*="modal"]:not(.modal-overlay) {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        max-height: 92vh !important; overflow-y: auto; border-radius: 16px 16px 0 0 !important;
    }

    /* ── 검색 · 필터 접기 ── */
    .mf-toggle {
        display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 10px; padding: 10px 14px;
        border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink);
        font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    }
    .mf-toggle b { background: var(--brand); color: var(--lime-ink); font-size: 11px; border-radius: 999px; padding: 1px 7px; }
    .mf-toggle i { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
    .mf-toggle.open i { transform: rotate(-135deg); }
    form.mf-form.mf-closed { display: none !important; }
    form.mf-form { margin-bottom: 10px; }

    /* ── 표 → 카드 ── */
    .table-wrapper:has(table.mc), .table-wrap:has(table.mc), div[style*="overflow-x"]:has(> table.mc) { overflow: visible !important; }
    table.mc { min-width: 0 !important; width: 100% !important; border: 0 !important; background: transparent !important; table-layout: auto !important; }
    table.mc > thead { display: none !important; }
    table.mc > tbody, table.mc > tfoot { display: block; }
    table.mc > tbody > tr, table.mc > tfoot > tr, table.mc > tr {
        display: flex; flex-direction: column; position: relative;
        border: 1px solid var(--line-2) !important; border-radius: 12px; background: var(--surface) !important;
        padding: 10px 12px; margin: 0 0 10px; box-shadow: var(--shadow-xs);
    }
    table.mc > tbody > tr > td, table.mc > tfoot > tr > td, table.mc > tbody > tr > th, table.mc > tfoot > tr > th {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important;
        padding: 4px 0 !important; border: 0 !important; background: transparent !important;
        text-align: right !important; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; font-size: 13.5px;
    }
    table.mc td[data-label]::before, table.mc th[data-label]::before {
        content: attr(data-label); flex: 0 0 auto; max-width: 42%; text-align: left;
        color: var(--text-3); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    table.mc td[data-label=""]::before { content: none; }
    table.mc td > * { max-width: 100%; }
    table.mc td input:not([type=checkbox]):not([type=radio]), table.mc td select { max-width: 62%; }
    table.mc td.mc-title {
        order: -1; justify-content: flex-start; text-align: left !important; font-size: 15px; font-weight: 700; color: var(--ink);
        padding: 0 30px 6px 0 !important; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important;
    }
    table.mc td.mc-title::before { content: none; }
    table.mc td.mc-chk { position: absolute; top: 10px; right: 10px; padding: 0 !important; z-index: 1; }
    table.mc td.mc-chk::before { content: none; }
    table.mc td.mc-act { justify-content: flex-end; flex-wrap: wrap; padding-top: 8px !important; }
    table.mc td.mc-empty { display: none; }
    table.mc td.mc-full { display: block; text-align: left !important; }
    table.mc td.mc-full::before { content: none; }
    table.mc > tbody > tr:has(> td.mc-full:only-child) { border-style: dashed !important; box-shadow: none; text-align: center; }
    table.mc > tbody > tr:hover > td { background: transparent !important; }
    table.mc .text-right, table.mc .text-center { text-align: right !important; }
    table.mc td .d-flex, table.mc td > div { justify-content: flex-end; }
    table.mc td.mc-title .d-flex, table.mc td.mc-title > div, table.mc td.mc-full > div { justify-content: flex-start; }
}

@media (max-width: 768px) {
    /* 표 카드 묶음: 옛 '가장자리까지 가로 스크롤'용 음수 여백 해제 */
    .table-wrapper:has(table.mc), .table-wrap:has(table.mc) { margin: 0 !important; padding: 10px 10px 0 !important; border: 0 !important; }
    /* 그리드 안 내용이 화면보다 넓어지는 것 방지 */
    .pj-layout { grid-template-columns: minmax(0, 1fr) !important; }
    .pj-grid { grid-template-columns: minmax(0, 1fr) !important; }
    /* 버튼 줄이 넘치면 다음 줄로 */
    .content-area .d-flex, .content-area div[style*="display:flex"], .content-area div[style*="display: flex"] { flex-wrap: wrap; }
    table.mc td .d-flex, table.mc td div[style*="display:flex"], table.mc td div[style*="display: flex"] { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    /* 숫자 카드 2칸: 아이콘 빼고 금액을 끝까지 보이게 */
    .stats-grid .stat-icon { display: none !important; }
    .stats-grid .stat-value { font-size: 18px !important; letter-spacing: -0.6px !important; overflow: visible; text-overflow: clip; }
}

@media (max-width: 768px) {
    /* 표 머리글 줄이 tbody 안에 있는 경우 */
    table.mc tr.mc-head { display: none !important; }
    /* 카드로 못 바꾸는 표(행 머리글형 · 달력 등)는 감싼 칸 안에서만 가로로 밀기 */
    .mc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* 프로젝트 채널 */
    .pv { grid-template-columns: minmax(0, 1fr) !important; }
    .pv-top { padding: 12px 14px !important; }
    .pv-top > div[style*="flex:1"] { flex: 1 1 calc(100% - 30px) !important; }
    .pv-chat { height: 70vh !important; }
}