/* ════════════════════════════════════════════════════════════
 *  mobile.css — 기존 화면(app.html)을 좁은 폭에서 쓸 수 있게 한다.
 *
 *  레거시 7,000줄은 한 글자도 고치지 않는다. 규칙을 전부 미디어쿼리
 *  안에 두므로 PC 화면(901px 이상)에는 아무 영향이 없다.
 *
 *  원래 레이아웃은 좌 260px + 중앙 flex + 우 220px 고정 3단이고
 *  body 가 height:100vh; overflow:hidden 이다. 폰(375px)에서는 좌우
 *  패널만 480px 이라 중앙이 사라지고, 스크롤로 도달할 수도 없었다.
 *
 *  접근: 좌/우 패널을 화면 밖 서랍으로 빼고 중앙만 남긴다. 서랍은
 *  gas-shim 이 넣는 버튼으로 연다. 기능은 하나도 빼지 않는다 —
 *  자리만 바꾼다.
 * ════════════════════════════════════════════════════════════ */

/* ── 넓은 화면에서는 없는 것처럼 ──────────────────────────
 * 서랍 손잡이와 배경막은 gas-shim 이 폭과 상관없이 만들어 둔다(창 크기가
 * 바뀔 수 있으므로). 그래서 감추는 일은 CSS 가 맡는다.
 *
 * 이 규칙이 미디어쿼리 밖에 있어야 한다. 안에만 두면 PC 폭에서는 아무
 * 스타일도 안 붙은 맨 요소가 되어, 문서 끝에 전체 폭짜리 버튼과 빈 줄로
 * 깔린다 — 실제로 그렇게 보였다. */
.deev-drawer-btn,
.deev-scrim {
  display: none;
}

@media (max-width: 900px) {
  .deev-drawer-btn {
    display: block;
  }
  .deev-scrim {
    display: block;
  }

  /* ── 기본 ────────────────────────────────────────────── */
  body {
    font-size: 13px;
    /* 아이폰 노치·홈바를 피한다. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
    /* 주소창이 접혔다 펴져도 높이가 튀지 않게 한다. */
    height: 100dvh;
  }

  /* 터치 목표를 키운다. 데스크톱 기준 20px 짜리 버튼은 손가락으로 못 누른다. */
  button,
  select,
  input[type='text'],
  input[type='password'],
  input[type='number'] {
    min-height: 34px;
  }
  .qctr button {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }
  .qctr button.qgen {
    width: auto !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  /* iOS 는 16px 미만 입력에 포커스하면 화면을 확대한다. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ── 상단바 ──────────────────────────────────────────── */
  .topbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px !important;
    /* 서랍 버튼 두 개가 들어갈 자리 */
    padding-left: 78px !important;
  }
  .topbar-sep {
    display: none;
  }
  .mode-tabs {
    margin-right: 4px !important;
  }

  /* ── 3단 → 1단 ───────────────────────────────────────── */
  .main-left,
  .main-right {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 500;
    width: min(86vw, 320px) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
    transition: transform 0.22s ease;
    /* 열기 전에는 화면 밖에 둔다. display:none 이 아니라 밀어내는 이유는,
       레거시가 패널 안 요소의 크기를 재는 곳이 있어서다. */
  }
  .main-left {
    left: 0;
    transform: translateX(-101%);
  }
  .main-right {
    right: 0;
    transform: translateX(101%);
  }
  .main-left.deev-open,
  .main-right.deev-open {
    transform: translateX(0);
  }

  .deev-scrim {
    position: fixed;
    inset: 0;
    z-index: 499;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
  }
  .deev-scrim.on {
    opacity: 1;
    pointer-events: auto;
  }

  .main-center {
    width: 100% !important;
  }

  /* ── 서랍 여는 버튼 ──────────────────────────────────── */
  .deev-drawer-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 6px);
    z-index: 501;
    width: 34px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #252535;
    background: #11111c;
    color: #a8a8c0;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .deev-drawer-btn.l {
    left: calc(env(safe-area-inset-left) + 6px);
  }
  .deev-drawer-btn.r {
    left: calc(env(safe-area-inset-left) + 44px);
  }
  .deev-drawer-btn.on {
    border-color: #1d4ed8;
    color: #93c5fd;
  }

  /* ── 씬 그리드 ───────────────────────────────────────── */
  /* 8열은 폰에서 카드 하나가 40px 이 된다. 고른 값과 무관하게 2열로 묶는다. */
  #scene-grid.view-2,
  #scene-grid.view-4,
  #scene-grid.view-6,
  #scene-grid.view-8 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .scard-footer > div:first-child {
    flex-wrap: wrap;
  }

  /* ── 모달 ────────────────────────────────────────────── */
  /* 데스크톱은 가운데 띄우지만, 폰에서는 화면을 다 쓰는 편이 낫다. */
  .modal-ov {
    align-items: flex-end !important;
  }
  .modal-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .modal-row {
    flex-wrap: wrap;
  }

  /* ── 라이트박스 ──────────────────────────────────────── */
  #lb-thumbs {
    max-width: 100vw;
  }

  /* ── shim 이 얹은 버튼들 ─────────────────────────────── */
  /* 우하단에 5개가 가로로 붙어 화면 밖으로 나간다. 세로로 세운다. */
  #deev-work-bar {
    flex-direction: column;
    align-items: flex-end;
    right: 6px !important;
    bottom: calc(env(safe-area-inset-bottom) + 46px) !important;
  }
  #deev-localsave-btn {
    right: 6px !important;
    bottom: calc(env(safe-area-inset-bottom) + 6px) !important;
  }
}

/* 아주 좁은 폭(작은 폰 세로) — 그리드를 1열로 떨군다. */
@media (max-width: 430px) {
  #scene-grid.view-2,
  #scene-grid.view-4,
  #scene-grid.view-6,
  #scene-grid.view-8 {
    grid-template-columns: 1fr !important;
  }
}