/**
 * css/mobile_detail.css — project_detail 휴대폰(< 768px) 레이아웃. 동작은 js/mobile_detail.js.
 *
 * 데스크탑의 IDE 3칸(EXPLORER · 본문 · NOTES)을 휴대폰에선 **한 번에 한 화면**으로 바꾼다.
 * 아래 탭 바(본문 · 첨부 · 노트 · 댓글 · AI)로 고르고, 고른 화면이 상단 바와 탭 바 사이를
 * 꽉 채운다. 예전의 "세로로 쌓고 페이지 전체 스크롤" 방식은 본문 iframe 이 화면 높이를 다
 * 차지해 스크롤이 iframe 안에 갇히고, 아래의 첨부·노트에 닿기 어려웠다.
 *
 *   body.m-tabs[data-mtab="main|files|notes|reply|ai"]
 *
 * ★ project_detail.php 인라인 <style> 의 옛 모바일 규칙(< 600px 단일 스크롤, < 768px 패널
 *   강제 펼침)이 !important 라서, 여기서는 `body.m-tabs` 를 붙여 우선순위를 올리고 같은
 *   !important 로 덮는다. 이 파일은 </head> 직전에 싣는다.
 * ★ 데스크탑(≥ 768px)은 건드리지 않는다. #m-tabbar 도 데스크탑에선 숨긴다.
 */

#m-tabbar { display: none; }

@media (max-width: 767px) {

    /* ── 화면 틀: 상단 바 / 콘텐츠 / 탭 바 ── */
    body.m-tabs {
        height: 100vh !important;
        height: 100dvh !important;           /* iOS 주소창이 들어가고 나와도 높이가 튀지 않게 */
        overflow: hidden !important;
    }
    body.m-tabs .ide-status-bar { display: none !important; }   /* "1 tab · HTML · UTF-8" */

    /* ── 상단 바 ── */
    body.m-tabs #ide-titlebar {
        height: calc(52px + env(safe-area-inset-top)) !important;
        padding: env(safe-area-inset-top) 6px 0 !important;
        gap: 2px;
    }
    body.m-tabs #ide-titlebar > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
        gap: 2px !important;
    }
    body.m-tabs #ide-titlebar .m-hide { display: none !important; }
    body.m-tabs #ide-titlebar a,
    body.m-tabs #ide-titlebar button {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    body.m-tabs #ide-titlebar svg.h-4 { width: 20px; height: 20px; }
    body.m-tabs #ide-titlebar .ide-brand { min-width: 36px; padding: 0 4px; }
    body.m-tabs #ide-titlebar .ide-breadcrumb {
        flex: 1 1 auto;
        margin-left: 4px;
    }
    body.m-tabs #ide-titlebar .crumb-active {
        max-width: none !important;
        font-size: 15px;
        font-weight: 600;
    }
    /* 공개/비공개 뱃지는 아이콘만 (글자는 기존 규칙이 < 640px 에서 숨긴다). */
    body.m-tabs #ide-titlebar .visibility-toggle {
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 32px;
        min-height: 28px;
        justify-content: center;
        margin-left: 6px !important;
    }

    /* ── 콘텐츠: 세 영역을 겹쳐 두고 고른 것만 보인다 ── */
    body.m-tabs #main-container {
        display: block !important;
        position: relative !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    body.m-tabs #main-container > main,
    body.m-tabs #panel-left,
    body.m-tabs #panel-right {
        position: absolute !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: none !important;
        border: 0 !important;
        overflow: hidden !important;
    }
    body.m-tabs[data-mtab="main"] #main-container > main { display: flex !important; }
    body.m-tabs[data-mtab="files"] #panel-left { display: flex !important; }
    body.m-tabs[data-mtab="notes"] #panel-right,
    body.m-tabs[data-mtab="reply"] #panel-right,
    body.m-tabs[data-mtab="ai"] #panel-right { display: flex !important; }

    body.m-tabs #resizer-left,
    body.m-tabs #resizer-right,
    body.m-tabs #panel-left-collapsed,
    body.m-tabs #panel-right-collapsed { display: none !important; }

    body.m-tabs #panel-left-content,
    body.m-tabs #panel-right-content {
        display: flex !important;
        flex: 1 1 auto;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0;
    }
    /* 패널 안쪽이 스스로 스크롤한다 (옛 단일 스크롤 규칙은 visible 로 풀어 버렸다). */
    body.m-tabs #panel-left-content > .overflow-y-auto,
    body.m-tabs #panel-right-content > .overflow-y-auto {
        overflow-y: auto !important;
        max-height: none !important;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
    body.m-tabs #panel-right.chat-tab-active {
        height: auto !important;
        max-height: none !important;
    }
    /* 오른쪽 패널 맨 윗줄(NOTES/REPLY/AI 탭 + 접기)은 아래 탭 바와 같은 일이라 숨긴다.
       바로 아래의 노트 탭 줄(노트 여러 개 · 새 노트 · AI 요약)은 그대로 둔다. */
    body.m-tabs #panel-right-content > div:first-child > div:first-child { display: none !important; }
    body.m-tabs #panel-right-content > div:first-child { gap: 0 !important; }

    /* 패널 글씨: 데스크탑의 "2단계 축소"(text-xs → 9px)를 휴대폰에선 되돌린다. */
    body.m-tabs #panel-left-content .text-xs,
    body.m-tabs #panel-right-content .text-xs { font-size: 12px; line-height: 16px; }
    body.m-tabs #panel-left-content .text-sm,
    body.m-tabs #panel-right-content .text-sm { font-size: 14px; line-height: 20px; }
    body.m-tabs #panel-left-content .text-base,
    body.m-tabs #panel-right-content .text-base { font-size: 15px; line-height: 22px; }
    body.m-tabs .text-\[9px\],
    body.m-tabs .text-\[10px\] { font-size: 11px !important; }
    body.m-tabs .text-\[11px\] { font-size: 12px !important; }

    /* 왼쪽 패널 탭(EXPLORER · TREE · CAT)과 접기 버튼을 누르기 쉽게. */
    body.m-tabs #panel-left-content [role="tab"] { min-height: 36px; }

    /* ── 본문: 파일 탭 줄 ── */
    /* 파일이 하나만 열려 있으면 탭 줄은 자리만 차지한다. */
    body.m-tabs #tabs-container:not(:has(.tab-item ~ .tab-item)) { display: none !important; }
    body.m-tabs #tabs-container { height: 40px !important; }
    body.m-tabs .tab-close { opacity: 1 !important; padding: 6px !important; }

    /* 떠 있는 버튼 묶음은 본문 화면에서만. */
    body.m-tabs:not([data-mtab="main"]) #zoom-controls { display: none !important; }

    /* ── 아래 탭 바 ── */
    body.m-tabs #m-tabbar {
        display: flex;
        flex: none;
        position: relative;
        z-index: 60;
        height: calc(58px + env(safe-area-inset-bottom));
        padding: 0 4px env(safe-area-inset-bottom);
        background: rgba(13, 14, 22, 0.97);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    html:not(.dark) body.m-tabs #m-tabbar {
        background: rgba(255, 255, 255, 0.97);
        border-top-color: rgba(0, 0, 0, 0.08);
    }
    #m-tabbar button {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        border: 0;
        background: transparent;
        color: #8b90a0;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        -webkit-tap-highlight-color: transparent;
    }
    #m-tabbar button svg { width: 22px; height: 22px; }
    #m-tabbar button[aria-selected="true"] { color: #a5b4fc; }
    html:not(.dark) #m-tabbar button { color: #6b7280; }
    html:not(.dark) #m-tabbar button[aria-selected="true"] { color: #4f46e5; }
    #m-tabbar button[aria-selected="true"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28%;
        right: 28%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: currentColor;
    }
    #m-tabbar .m-badge {
        position: absolute;
        top: 6px;
        left: calc(50% + 6px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #4f46e5;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        font-weight: 700;
        text-align: center;
    }
    #m-tabbar .m-badge:empty,
    #m-tabbar .m-badge[data-n="0"] { display: none; }
}

@media (max-width: 767px) and (hover: none) {
    body.m-tabs #m-tabbar button:active { background: rgba(127, 127, 127, 0.12); }
}