/* @LAYER: 표현(모바일) | @PORT: 8002 | @ROLE: /m 전용 겉모습만 다듬기 | @KEY: GET /m/mobile.css
 *
 * CEO 2026-09-08: "트리구조는 절대로 건들지 말고 각 배치 및 UI만 세련되게"
 *
 * 규칙 — 이 파일이 지켜야 하는 것
 *   1. CSS 만 쓴다. 메뉴를 더하거나 빼거나 순서를 바꿀 수 없다(구조상 불가능).
 *   2. 어떤 메뉴도 display:none 으로 숨기지 않는다. 숨기는 건 트리를 바꾸는 것과 같다.
 *   3. studio_v2.0.html 은 한 줄도 고치지 않는다. 이 파일은 /m 으로 나갈 때만 붙는다.
 *   4. PC(/ , /studio)에는 안 붙는다 → PC 영향 0.
 *   5. 전부 @media(max-width:768px) 안에 둔다. 폰이 아니면 아무 것도 안 바뀐다.
 */

@media (max-width: 768px) {

  /* ── 0. 노치·홈바 안전영역 ───────────────────────────────── */
  .app-container { padding-left: env(safe-area-inset-left,0); padding-right: env(safe-area-inset-right,0); }
  .workspace     { padding-bottom: calc(env(safe-area-inset-bottom,0px) + 8px); }

  /* ── 1. 상단 3층(브랜드·대분류·서브메뉴)을 고정 — 스크롤해도 길을 잃지 않는다 ── */
  .sidebar      { position: sticky; top: 0; z-index: 40; background: var(--bg-dark);
                  box-shadow: 0 1px 0 var(--border-color); }
  .submenu-pane { position: sticky; top: 0; z-index: 30; background: var(--bg-panel); }

  /* ── 2. 가로 스크롤 줄 = 알약(pill) 바 ─────────────────────
     PC 사이드바가 폰에선 가로 줄로 눕는다(기존 동작). 그 줄을 손가락에 맞춘다. */
  .nav-list, .submenu-list {
    scroll-snap-type: x proximity;
    scrollbar-width: none;                     /* 파이어폭스 */
    padding: 8px 12px !important;
    gap: 8px !important;
    display: flex;
  }
  .nav-list::-webkit-scrollbar, .submenu-list::-webkit-scrollbar { display: none; }
  .nav-list > *, .submenu-list > * { scroll-snap-align: start; }

  .nav-item {
    padding: 10px 15px !important;
    min-height: 42px;                          /* 손가락 표준 */
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(255,255,255,.02);
    font-size: .86rem;
    align-items: center;
  }
  .nav-item.active {
    border-color: rgba(204,0,0,.55) !important;
    background: rgba(204,0,0,.14) !important;
    box-shadow: 0 0 0 1px rgba(204,0,0,.25) inset;
  }
  .nav-icon { margin-right: 7px !important; width: 17px; height: 17px; }

  .submenu-item {
    padding: 9px 14px !important;
    min-height: 44px;
    max-width: 74vw;                                /* 설명이 길어도 화면을 넘지 않게 */
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);   /* 가로줄에선 밑줄이 어색하다 */
    border-radius: 16px;
    background: rgba(255,255,255,.02);
    gap: 2px !important;
    align-items: flex-start;
  }
  .submenu-item.active {
    border-left: 1px solid rgba(204,0,0,.55) !important;   /* 세로 막대 → 테두리로 */
    border-color: rgba(204,0,0,.55) !important;
    background: rgba(204,0,0,.12) !important;
  }
  .item-title { font-size: .84rem !important; gap: 7px !important; }
  /* 설명은 지우지 않는다. 한 줄로 줄여 말줄임만 한다(내용 보존). */
  .item-desc  { font-size: .74rem !important; line-height: 1.35 !important;
                max-width: 68vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .badge      { font-size: .58rem; padding: 2px 6px; }

  /* ── 3. 본문 — 폰에서 가장 큰 손실이던 좌우 여백 회수 ───────
     PC 의 padding:40px 이 폰에도 그대로 걸려 390px 중 80px(20%)을 먹고 있었다. */
  .content-area { padding: 16px 14px 28px !important; }
  .top-bar      { padding: 0 14px !important; }
  .empty-state  { padding: 20px 2px !important; }

  /* ── 4. 카드·위젯 — 여백과 모서리를 폰 비율로 ─────────────── */
  .widget {
    border-radius: 14px;
    padding: 15px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.09);
  }
  .dashboard-grid, .dashboard-row { gap: 12px !important; }

  /* ── 5. 손가락 크기 — 입력·버튼 ────────────────────────────
     font-size 16px 미만이면 iOS 사파리가 입력 시 화면을 확대해 버린다. */
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    font-size: 16px !important;
    min-height: 44px;
    border-radius: 10px !important;
  }
  textarea { min-height: 84px; line-height: 1.55; }
  button, .btn, a.btn {
    min-height: 44px;
    border-radius: 10px !important;
  }

  /* ── 6. 넘치는 것들은 그 안에서만 스크롤 — 페이지가 옆으로 밀리지 않게 ── */
  /* 표: display:block + overflow-x 만으로는 부족했다. 칸이 화면 폭에 맞춰 짜부라져
     ERP '누적판매' 헤더가 32px 로 눌리고 글자가 세로로 쌓였다(실측 w=32 h=81).
     칸을 줄바꿈 금지로 두면 표가 자기 폭을 지키고, 그때부터 옆으로 밀린다. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  img, canvas, svg, video { max-width: 100%; height: auto; }

  /* ── 7. 챗봇 — 말풍선을 폰 폭에 맞추고 입력줄을 아래에 고정 ── */
  #chat-msgs { padding: 14px !important; gap: 10px !important; }
  #chat-msgs > div[style*="align-self"] { max-width: 88% !important; font-size: .92rem !important; }
  #chat-input { min-height: 44px; }


  /* ── 9. 상단바 액션 — 폰에서 '로그아웃'이 화면 밖으로 잘리던 것 ──────
     실측(430px): .top-actions 오른쪽 끝이 화면보다 38px 밖. 전 화면 공통.
     PC 규칙이 nowrap + max-height 52px 라 줄바꿈도 못 하고 그대로 잘렸다.
     지우지 않고 '옆으로 밀어서 볼 수 있게' 만든다 — 버튼은 하나도 안 없앤다. */
  .top-bar { gap: 8px; }
  .top-bar .top-actions {
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 자주 쓰는 '데이터 새로고침'이 먼저 보이게 왼쪽 정렬. 로그아웃까지는 옆으로 밀면 나온다.
       오른쪽 끝을 살짝 흐리게 해서 '더 있다'는 걸 눈으로 알 수 있게 한다. */
    justify-content: flex-start;
    gap: 6px !important;
    padding-right: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  .top-bar .top-actions::-webkit-scrollbar { display: none; }
  .top-bar .top-actions > * { flex: 0 0 auto; }
  .btn-action { padding: 7px 12px !important; font-size: .72rem !important; letter-spacing: .3px !important; border-radius: 8px !important; }
  .top-bar .breadcrumb { flex: 0 1 auto; max-width: 46%; }

  /* ── 10. 챗봇 입력줄 — 430px 에서 '전송'이 화면 밖으로 밀려나던 것 ────
     🎤 + 🔊 + 입력칸 + 전송 이 한 줄에 안 들어간다(인라인 padding 32px 포함).
     버튼을 없애지 않고, 좌우 여백을 줄이고 아이콘을 조여 네 개가 다 들어오게 한다. */
  #chat-input { min-width: 0; flex: 1 1 auto; font-size: 16px !important; }
  #mic-btn, #tts-toggle {
    min-width: 40px !important; width: 40px; padding: 10px 0 !important;
    font-size: 1rem !important; flex: 0 0 auto;
  }
  #chat-send { padding: 12px 14px !important; font-size: .85rem !important; flex: 0 0 auto; }
  /* 입력줄을 감싼 인라인 padding(16px 32px)이 폰에서 64px 를 먹는다 */
  #chat-msgs + div { padding: 10px 12px !important; }
  #chat-msgs + div > div { gap: 6px !important; }


  /* ── 11. 탭 줄 — 폰에서 글자가 한 자씩 세로로 쪼개지던 것 ────────────
     실측(390px): Olympus 탭 5개가 한 줄에 밀려 들어가 '영/상/제/작' 처럼 세로로 접혔다.
     탭을 없애거나 줄이지 않고, 옆으로 밀어서 보게 만든다(메뉴 알약과 같은 방식). */
  .olytab, .erp-btn, [data-erptab] {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: .8rem !important;
  }
  /* 탭을 담은 flex 줄을 가로 스크롤로 (부모 선택 :has — 최신 사파리·크롬 지원) */
  div:has(> .olytab), div:has(> .erp-btn), div:has(> [data-erptab]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 12px !important; padding-right: 12px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  }
  div:has(> .olytab)::-webkit-scrollbar,
  div:has(> .erp-btn)::-webkit-scrollbar,
  div:has(> [data-erptab])::-webkit-scrollbar { display: none; }


  /* ── 12. 회원 패널·로그인 화면 (앱 안에서 /m/member · /m/login) ────────────
     둘 다 원래 모바일 우선으로 잘 짜여 있다(그리드 1열 기본, 입력칸 16px 고정).
     그래서 구성은 건드리지 않고, 앱(standalone)에서만 생기는 두 가지만 손본다.
       ① 상태바 겹침 — apple-mobile-web-app-status-bar-style:black-translucent 이면
          iOS 에서 내용이 상태바 밑으로 들어간다. 안전영역만큼 위를 비운다.
       ② 홈 인디케이터에 마지막 줄이 가리는 것. */
  body > .top, body > .wrap {
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  body > .top { padding-top: max(12px, env(safe-area-inset-top)); }
  body > .wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }

  /* 로그인 카드는 가운데 정렬 유지하되 좌우가 화면에 붙지 않게 */
  .wrap > .card { margin-left: auto; margin-right: auto; }

  /* ── 8. 읽기 — 한글 줄바꿈이 낱말 가운데서 끊기지 않게 ────── */
  body { -webkit-text-size-adjust: 100%; }
  .item-title, .empty-title, .widget * { word-break: keep-all; overflow-wrap: break-word; }
}

/* 소형(≤480px) — 알약을 한 번 더 조인다. 지우는 건 없다. */
@media (max-width: 480px) {
  .nav-item     { padding: 9px 13px !important; font-size: .82rem !important; }
  .submenu-item { padding: 9px 12px !important; }
  .content-area { padding: 14px 12px 26px !important; }
  .widget       { padding: 13px !important; }
}