/* ============================================================
   QTLST 모바일 전용 스킨 v2 (2026-07-07)
   - mobile_ui.js가 body에 .mob-ready + .mob-view-* 클래스를 붙일 때만 동작
   - 데스크톱(769px 이상)에는 아무 영향 없음. 기존 코드 무수정 원칙.
   - 구성: 미니 헤더 / 홈(카드) / 목록(+분류 드로어) / 전사(큰 버튼) / 하단 탭
   ============================================================ */

/* 데스크톱 기본: 모바일 전용 요소 숨김 */
.mob-tabbar, .mob-home, .mob-transfer-ctl, .mob-drawer-bg, .mob-cat-btn { display: none; }

@media (max-width: 768px) {

  /* ---------- 상단: 미니 헤더 (로고 + 크레딧 + ☰메뉴 + 상태점) ---------- */
  body.mob-ready .titlebar {
    /* body.senior-ui .titlebar가 height/padding/overflow를 !important로 고정하므로 전부 !important 필요 */
    overflow: hidden !important;
    flex-wrap: nowrap;
    padding: 4px 10px !important;
    padding-top: calc(4px + env(safe-area-inset-top)) !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 48px !important;
  }
  /* 숨길 것: 구분선, 웨이브캔버스, 전체화면, 원격지원, 사용자명, 상태텍스트, 데스크톱 버튼들 */
  body.mob-ready .titlebar .tb-sep,
  body.mob-ready .titlebar #waveCanvas,
  body.mob-ready .titlebar #fullscreenBtn,
  body.mob-ready .titlebar button[onclick="openRemoteSupport()"],
  body.mob-ready .titlebar button[onclick="openBunsuk()"],
  body.mob-ready .titlebar button[onclick="showGraphicForSelected()"],
  body.mob-ready .titlebar #btn-start,
  body.mob-ready .titlebar #btn-stop,
  body.mob-ready .titlebar #loginUserName,
  body.mob-ready .titlebar #statusTxt { display: none !important; }
  body.mob-ready .titlebar .logo {
    font-size: 17px !important;
    margin-right: auto;
  }
  body.mob-ready .titlebar .tbtn {
    padding: 5px 9px !important;
    font-size: 12px !important;
    min-height: 38px;
  }
  body.mob-ready .titlebar #creditBadge {
    margin-right: 2px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  /* ---------- 메인: 세로 스택, 화면 전환 ---------- */
  body.mob-ready .main { flex-direction: column; }
  body.mob-ready .main .splitter,
  body.mob-ready #sidebarSplitter,
  body.mob-ready #rpanelSplitter { display: none !important; }

  body.mob-ready .sidebar,
  body.mob-ready .dbpanel,
  body.mob-ready .rpanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-right: 0 !important;
    display: none !important;
    flex: 1 1 auto !important;
  }
  body.mob-ready.mob-view-db  .dbpanel { display: flex !important; }
  body.mob-ready.mob-view-sel .rpanel  { display: flex !important; }

  /* ---------- 홈 화면 ---------- */
  body.mob-ready .mob-home {
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    gap: 18px;
    background: var(--bg, #0a0e14);
  }
  body.mob-ready.mob-view-home .mob-home { display: flex; }
  body.mob-ready.mob-view-home .dbpanel,
  body.mob-ready.mob-view-home .rpanel,
  body.mob-ready.mob-view-home .sidebar { display: none !important; }

  .mob-home-hero { text-align: center; padding: 10px 0 0; }
  .mob-home-logo {
    font-size: 30px; font-weight: 800; letter-spacing: 4px;
    color: var(--accent, #00c9a0);
  }
  .mob-home-sub { font-size: 13px; color: var(--text2, #8090a0); margin-top: 4px; }
  .mob-home-user { font-size: 12px; color: var(--text2, #8090a0); margin-top: 8px; min-height: 16px; }

  .mob-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .mob-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    min-height: 118px;
    background: var(--panel, #0d1319);
    border: 1px solid var(--border, #1e2c38);
    border-radius: 14px;
    color: var(--text, #d8e4f0);
    font-family: inherit;
    cursor: pointer;
    padding: 14px 8px;
    transition: transform .08s, border-color .12s;
  }
  .mob-card:active { transform: scale(.97); border-color: var(--accent, #00c9a0); }
  .mob-card-ico { font-size: 34px; line-height: 1; }
  .mob-card-title { font-size: 15px; font-weight: 800; }
  .mob-card-desc { font-size: 11px; color: var(--text2, #8090a0); }
  /* 핵심 2개(분석·전사) 강조 */
  .mob-card-analysis { border-color: #5a3a9a; }
  .mob-card-analysis .mob-card-title { color: #c084fc; }
  .mob-card-transfer { border-color: #1a5a40; }
  .mob-card-transfer .mob-card-title { color: var(--accent, #00c9a0); }

  /* ---------- AI 상담창: 기본 접힘, 헤더 탭으로 펼침 ---------- */
  body.mob-ready #aiPanelSplitter { display: none !important; }
  body.mob-ready .ai-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body.mob-ready .ai-panel > *:not(.ai-panel-hdr) { display: none !important; }
  body.mob-ready.mob-ai-open .ai-panel > *:not(.ai-panel-hdr) { display: flex !important; }
  body.mob-ready.mob-ai-open .ai-panel { height: 46vh !important; }
  body.mob-ready .ai-panel-hdr { cursor: pointer; min-height: 40px; flex-wrap: nowrap; }
  body.mob-ready .ai-panel-hdr-title {
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  body.mob-ready .ai-panel-hdr button { white-space: nowrap; flex-shrink: 0; }
  body.mob-ready .ai-panel-hdr::after {
    content: '▲';
    font-size: 13px;
    color: var(--text2, #8090a0);
    flex-shrink: 0;
    padding: 0 4px;
  }
  body.mob-ready.mob-ai-open .ai-panel-hdr::after { content: '▼'; }

  /* ---------- 중간 액션버튼(분류/전부/추가/삭제/전부): 가로 바 ---------- */
  body.mob-ready .mbtns {
    display: none;
    flex-direction: row !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--border);
    cursor: default !important;
  }
  body.mob-ready.mob-view-db .mbtns,
  body.mob-ready.mob-view-sel .mbtns { display: flex !important; }
  body.mob-ready .mbtns .mbtn {
    flex: 1;
    min-height: 44px;
    font-size: 13px !important;
    flex-direction: row !important;
    gap: 5px;
    justify-content: center;
    align-items: center;
  }
  body.mob-ready .mob-cat-btn { display: flex; }
  /* 전사 화면에서는 분류 버튼 숨김 */
  body.mob-ready.mob-view-sel .mob-cat-btn { display: none !important; }

  /* ---------- 분류 드로어 (목록 화면에서 📂분류로 열기) ---------- */
  body.mob-ready.mob-cat-open .sidebar {
    display: flex !important;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 78vw !important;
    max-width: 320px !important;
    z-index: 700;
    border-right: 1px solid var(--border) !important;
    box-shadow: 6px 0 28px rgba(0,0,0,.55);
    padding-top: env(safe-area-inset-top);
  }
  body.mob-ready.mob-cat-open .mob-drawer-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 650;
    background: rgba(0,0,0,.45);
  }

  /* ---------- 전사 화면: 큰 시작/정지 버튼 ---------- */
  body.mob-ready .mob-transfer-ctl {
    display: none;
    flex: 0 0 auto;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid var(--border, #1e2c38);
    background: var(--panel, #0d1319);
  }
  body.mob-ready.mob-view-sel .mob-transfer-ctl { display: flex; }
  .mob-transfer-ctl button {
    border-radius: 12px;
    font-family: inherit;
    font-weight: 800;
    font-size: 17px;
    min-height: 56px;
    cursor: pointer;
  }
  .mob-big-start {
    flex: 2;
    background: linear-gradient(180deg, #0a2a1e, #06201a);
    border: 1px solid #1a8a60;
    color: #2de0a8;
  }
  .mob-big-start:active { background: #0e3a28; }
  .mob-big-stop {
    flex: 1;
    background: #260b0b;
    border: 1px solid #5a2020;
    color: #ff8080;
  }
  .mob-big-stop:active { background: #3a1010; }
  .mob-bot-toggle {
    flex: 0 0 52px;
    background: var(--panel2, #101822);
    border: 1px solid var(--border, #1e2c38);
    color: var(--text2, #8090a0);
    font-size: 20px;
  }
  body.mob-ready.mob-bot-open .mob-bot-toggle {
    color: var(--accent, #00c9a0);
    border-color: var(--accent, #00c9a0);
  }

  /* ---------- 하단 컨트롤바: 전사 화면에서만 ---------- */
  /* 기본은 컴팩트(저장/읽기/진행바만) — ⚙ 버튼으로 전체 옵션 펼침.
     전사 목록이 화면 대부분을 차지하도록 하기 위함 */
  body.mob-ready .bottom { display: none !important; }
  body.mob-ready.mob-view-sel .bottom {
    display: flex !important;
    flex: 0 0 auto;
    max-height: 34vh;
    overflow-y: auto;
  }
  body.mob-ready .bottom-row1 { flex-wrap: wrap; gap: 8px 6px; padding: 8px; }
  body.mob-ready .bottom .bot-sep { display: none; }
  /* 접힘(기본): 파형선택·상태·면책·복합파동·실행시간 숨김 */
  body.mob-ready .bottom-row1 > .bot-group,
  body.mob-ready .bottom-row1 > #compound-lbl,
  body.mob-ready .bottom-row1 > div:has(#sdot2),
  body.mob-ready .bottom-row1 > div[style*="pointer-events:none"] { display: none !important; }
  /* 펼침(⚙): 면책고지 제외 전부 복원 */
  body.mob-ready.mob-bot-open .bottom-row1 > .bot-group { display: flex !important; }
  body.mob-ready.mob-bot-open .bottom-row1 > #compound-lbl { display: flex !important; }
  body.mob-ready.mob-bot-open .bottom-row1 > div:has(#sdot2) { display: flex !important; }

  /* 전사 목록 최소 높이 보장 (읽기로 불러온 처방이 바로 보이도록) */
  body.mob-ready.mob-view-sel .rpanel { min-height: 36vh; }

  /* ---------- 하단 탭바 (홈/분석/목록/전사) ---------- */
  body.mob-ready .mob-tabbar {
    display: flex;
    flex: 0 0 auto;
    background: var(--sidebar, #0d1319);
    border-top: 1px solid var(--border, #1e2c38);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 500;
  }
  .mob-tabbar button {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text2, #8090a0);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 4px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 54px;
  }
  .mob-tabbar button .mob-tab-ico { font-size: 20px; line-height: 1; }
  .mob-tabbar button.active { color: var(--accent, #00c9a0); }
  .mob-tabbar button .mob-tab-badge {
    position: absolute;
    transform: translate(16px, -2px);
    background: var(--accent, #00c9a0);
    color: #04140e;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    min-width: 14px;
  }

  /* ---------- 분석(bunsuk) 창: 전체화면 + 세로 스택 ---------- */
  body.mob-ready #bunsukBg { padding: 0 !important; align-items: stretch !important; }
  body.mob-ready #bunsukDlg {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  /* 본문 2단(테이블|옵션) → 세로 스택, 옵션 패널을 위로 */
  body.mob-ready #bunsukDlg > div[style*="flex:1"] { flex-direction: column; }
  body.mob-ready #bunsukDlg div[style*="width:220px"] {
    width: 100% !important;
    order: -1;
    max-height: 42vh;
    overflow-y: auto !important;
    border-bottom: 1px solid #252d38;
  }
  /* 신체도해 이미지는 모바일에서 숨김 (공간 확보) */
  body.mob-ready #bunsukDlg div[style*="width:220px"] img { display: none !important; }
  /* 결과 테이블 컬럼 축소 — senior-ui의 :has() 규칙보다 높은 특이도 필요 */
  body.mob-ready #bnTableHdr:has(> div:nth-child(5)),
  body.mob-ready #bnTable > div:has(> div:nth-child(5)) {
    grid-template-columns: 54px 40px 60px 1fr 38px !important;
  }
  body.mob-ready #bnTableHdr:has(> div:nth-child(4)):not(:has(> div:nth-child(5))),
  body.mob-ready #bnTable > div:has(> div:nth-child(4)):not(:has(> div:nth-child(5))) {
    grid-template-columns: 54px 60px 1fr 44px !important;
  }
  body.mob-ready #bnTableHdr > div {
    font-size: 11px !important;
    padding: 3px 4px !important;
  }
  body.mob-ready #bnTable > div > div {
    font-size: 12px !important;
    padding: 4px 4px !important;
    min-height: 30px !important;
  }
  body.mob-ready #bnTable > div > div:first-child { font-size: 13px !important; }

  /* ---------- 터치 타깃 / 입력 확대 방지 ---------- */
  body.mob-ready input,
  body.mob-ready select,
  body.mob-ready textarea { font-size: 16px !important; }
  body.mob-ready .search-inp { min-height: 40px; }
  body.mob-ready .tbtn { min-height: 38px; }

  /* ---------- 모달: 화면 폭에 맞춤 ---------- */
  body.mob-ready .modal-bg > .modal {
    width: 96vw !important;
    min-width: 0 !important;
    max-width: 96vw !important;
    max-height: 86vh !important;
  }

  /* ---------- 로그인 화면 ---------- */
  body.mob-ready #loginBox {
    width: 92vw !important;
    min-width: 0 !important;
    max-width: 420px !important;
  }
}