/* ═══════════════════════════════════════════════════════════════
   Mesimul — 모바일 / 좁은 화면 레이어
   style.css · maker.css 다음에 로드된다 (같은 특이도면 이 파일이 이김).
   데스크톱(>900px)은 이 파일의 영향을 받지 않는 것이 원칙 —
   전역 규칙은 "터치/텍스트 크기" 같이 데스크톱에서도 안전한 것만 둔다.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   0. 전역 (모든 화면 폭)
   ─────────────────────────────────────────────── */
html, body {
  /* iOS 가로모드에서 폰트만 제멋대로 커지는 것 방지 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 최상위는 overflow:hidden이지만, 안드로이드 당겨서 새로고침 / iOS 고무줄 튕김 차단 */
  overscroll-behavior: none;
}

/* 섹션 내부 스크롤이 부모로 새어나가 화면 전체가 튕기는 것 방지 */
.section,
.detail-panel,
.roadmap-content,
.notice-box {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ───────────────────────────────────────────────
   1. 터치 기기 (마우스 호버 없음)
   ─────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* 터치는 hover가 "달라붙어" 눌린 상태로 남으므로 이동/그림자 효과 제거 */
  .rm-cell:hover,
  .boss-card:hover,
  .core-card:hover,
  .btn-roadmap:hover,
  #btn-search:hover,
  #ymj-search-btn:hover { transform: none; box-shadow: none; }

  button, .rm-cell, .tab-btn, .diff-tab, .bvt-btn, .hub-tab, .rh-tab {
    -webkit-tap-highlight-color: transparent;
  }
  /* 누르는 순간 피드백은 :active로 대체 */
  button:active, .rm-cell:active, .tab-btn:active { filter: brightness(1.25); }

  /* 손가락으로 누르기 최소 크기 확보 */
  .tab-btn, .diff-tab, .bvt-btn, .hub-tab, .rh-tab, .slm-preset {
    min-height: 32px;
  }
  .roadmap-close, .detail-close, .slm-close {
    min-width: 36px; min-height: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2. 태블릿 / 모바일 (≤900px) — 메인 레이어
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── 2-1. 뷰포트 기준 ──
     탭바가 2줄(로고·검색 / 방 탭)이 되므로 높이를 키운다.
     모바일 브라우저 주소창 때문에 100vh가 실제 보이는 높이보다 커서
     섹션 아래쪽이 잘리므로 dvh(동적 뷰포트 높이)를 쓴다.
     ※ world 이동량(translate3d)은 여전히 CSS 100vh 기준 —
        app.js measureCssUnits()가 같은 기준으로 재므로 어긋나지 않는다. */
  :root {
    --tabbar-h: 84px;
    --section-h: calc(100vh - var(--tabbar-h));
    --section-h: calc(100dvh - var(--tabbar-h));
  }

  /* ── 2-2. 탭바: 2줄 그리드 ──
     1행: 로고 | 로드맵 | (검색/테마)
     2행: 방 탭 (가로 스크롤) */
  #tabbar {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: 44px 40px;
    align-items: center;
    column-gap: 8px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  }
  .tab-logo {
    position: static;
    left: auto;
    grid-column: 1; grid-row: 1;
    font-size: 1.05em;
    letter-spacing: 0.5px;
  }
  .btn-roadmap {
    position: static;
    left: auto;
    grid-column: 2; grid-row: 1;
    padding: 6px 10px;
    font-size: 11px;
  }
  .tab-controls {
    position: static;
    right: auto;
    grid-column: 3; grid-row: 1;
    justify-self: end;
    gap: 6px;
  }
  .tab-buttons {
    grid-column: 1 / -1; grid-row: 2;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 가로 스와이프가 탭 스크롤로 먹히도록 (섹션 이동 스와이프와 충돌 방지) */
    overscroll-behavior-x: contain;
  }
  .tab-buttons::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex: 0 0 auto;
    padding: 7px 14px;
    font-size: 12.5px;
  }

  /* 탭바 검색창 — ID 규칙(#btn-search)이 .tab-search button보다 세서 덮어써야 함 */
  .tab-search { gap: 4px; }
  .tab-search input {
    width: 116px;
    padding: 6px 9px;
    font-size: 16px;      /* iOS: 16px 미만이면 포커스 시 자동 확대됨 */
  }
  .tab-search #btn-search {
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* ── 2-3. 섹션 공통 ── */
  #viewport { width: 100%; }
  .section {
    padding: 14px 10px calc(20px + env(safe-area-inset-bottom));
  }
  /* 홈도 세로로 넘칠 수 있으므로 스크롤 허용 (데스크톱은 hidden !important) */
  .section-home {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start;
  }
  .room-layout { gap: 0; }
  .room-content { max-width: 100%; }
  .section-title { font-size: 1.25em; }
  .section-desc { font-size: 0.85em; }

  /* 좁은 화면에서 광고 슬롯은 자리만 잡아먹으므로 완전히 제거 */
  .room-ad, .room-ad-bottom { display: none !important; }

  /* ── 2-4. 홈 ── */
  .home-content {
    justify-content: flex-start;
    padding: 18px 12px;
    gap: 6px;
  }
  .home-title { font-size: 2.4em; letter-spacing: 2px; }
  .home-subtitle { font-size: 0.85em; letter-spacing: 1px; }
  .char-img { height: 340px; }
  .char-name { font-size: 1.2em; }

  /* 검색 인풋 — iOS 자동 확대 방지 */
  #char-input, #ymj-search-input { font-size: 16px; padding: 11px 14px; }
  #btn-search, #ymj-search-btn { padding: 11px 18px; font-size: 14px; }

  /* ── 2-5. 상세 패널: 우측 640px 고정 → 방 전체를 덮는 오버레이 ──
     .section 에 contain:layout 이 걸려 있어 position:fixed 의 기준이 뷰포트가 아니라
     섹션 박스(= 탭바 아래 영역)다. 그래서 top은 0으로 둬야 탭바 높이가 이중으로
     먹지 않는다. fixed라 섹션 내부 스크롤과 무관하게 고정된다. */
  .detail-panel {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    border-left: none;
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
    /* 뒤 캐릭터 이미지가 비쳐서 수치가 안 읽히므로 완전 불투명 */
    background: var(--bg);
    animation: none;
  }
  /* column 방향에서 align-items:flex-start 는 교차축(가로)을 내용폭으로 눌러버린다 */
  .stat-compare-wrap { gap: 8px; align-items: stretch; }
  .stat-grid { grid-template-columns: 1fr; gap: 6px; }
  .stat-item { padding: 6px 8px; }
  .stat-val { font-size: 0.95em; }

  /* ── 2-6. 미니 카드 ──
     좁은 화면에선 크롭 창을 줄인다. object-fit:none 이라 크롭 창 크기만 줄고
     캐릭터 자체는 1:1 로 유지되므로, 중심(150,163)을 다시 맞춰줘야 한다. */
  .char-mini { right: 8px; padding: 0; gap: 4px; }
  /* px 이 아니라 % — 원본이 300x300 이 아닌 캐릭터(256x256)가 있어서.
     x: (120-300)*0.539 = -97px , y: (96-300)*0.564 = -115px (300 기준 목표) */
  .mini-img {
    width: 120px;
    height: 96px;
    object-position: 53.9% 56.4%;
  }

  /* ── 2-7. 로드맵 모달 (모바일의 주 이동수단) ── */
  .roadmap-content {
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    width: 94%;
    max-height: 88dvh;
    overflow-y: auto;
  }
  .roadmap-header { margin-bottom: 12px; }
  .roadmap-header h2 { font-size: 1.1em; }
  .roadmap-grid {
    grid-template-rows: repeat(4, 66px);
    gap: 5px;
  }
  .rm-cell { font-size: 0.62em; gap: 2px; padding: 2px; text-align: center; line-height: 1.15; }
  .rm-icon svg { width: 20px; height: 20px; }
  .roadmap-hint { font-size: 0.68em; margin-top: 10px; }

  /* ── 2-8. 고지 모달 ── */
  .notice-box {
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height: 88dvh;
    overflow-y: auto;
  }
  .notice-box p { font-size: 0.85em; }
  #notice-close-btn, #notice-hide-today-btn { padding: 11px 18px; }

  /* ── 2-9. 그리드 재배치 ── */
  .ranking-list { grid-template-columns: 1fr; }
  .ranking-hall { padding: 12px; }
  /* 랭킹 탭이 좁아져서 "종합 랭킹"이 두 줄로 접히는 것 방지 */
  .rh-tab { padding: 7px 4px; white-space: nowrap; }

  /* 문의/버그: [카테고리 select | 닉네임 input] 한 줄 고정 → 좁으면 줄바꿈
     (기본값이 flex-basis:auto라 내용폭 그대로 밀고 나가 화면을 넘쳤음) */
  .board-row { flex-wrap: wrap; gap: 10px; }
  .board-row > * { flex: 1 1 150px; min-width: 0; }
  .boss-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .boss-mob-img { width: 84px; height: 84px; }

  /* 파티 슬롯: [번호|인풋|조회|직업] 고정 4열 그리드 → 줄바꿈 flex
     (1번 슬롯은 조회 버튼이 없어 자식이 3개라 그리드 열 매핑이 어긋남 → flex가 안전) */
  .party-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  .party-slot-num { flex: 0 0 auto; }
  .party-slot-input { flex: 1 1 140px; min-width: 0; font-size: 16px; }
  .party-slot-load { flex: 0 0 auto; }
  .party-slot-job { flex: 1 0 100%; font-size: 0.78em; }

  /* 연무장 스킬 통계: 4열 → 이름 전체폭 + 수치 3열 */
  .ymj-skillstat-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px 8px;
  }
  .ymj-skillstat-row .ymj-ss-name { grid-column: 1 / -1; }

  /* 보스 시뮬 GIF */
  .boss-sim-gif { width: min(70vw, 300px); height: min(70vw, 300px); }
  .boss-sim-layout { gap: 12px; justify-content: center; }

  /* ── 2-10. 모달류 고정폭 해제 ── */
  .skill-lv-modal { width: min(320px, 92vw); }
  .scs-modal { width: min(380px, 92vw); max-height: 82dvh; }
  .popup-content { max-height: 82dvh; }
  .mk-cards { max-height: 50dvh; }

  /* ── 2-11. 표: 가로 스크롤 컨테이너로 ──
     JS가 만드는 표들은 래퍼가 없어서 표 자체를 스크롤 박스로 만든다. */
  table.mk-table,
  table.mk-dtable,
  table.hexa-opt-table,
  table.sim-skill-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* ── 2-12. 픽셀 고정 패널 ──
     .equip-window(7x64 그리드=528px) / .vmat-*(506px) / .hexamat-*(506px)는
     WZ 절대좌표 배치라 리플로우가 불가능 → app.js fitWideBlocks()가 부모
     가용폭에 맞춰 zoom을 계산해 넣는다. 여기서는 중앙정렬 전제만 정리. */
  .equip-window {
    margin: 0 auto 20px;          /* 데스크톱의 margin-left: calc(50% - 264px + 50px) 해제 */
    max-width: none;
    padding: 12px;
  }
  .vmat-outer { flex-direction: column; align-items: center; }
  .hexamat-wrap { margin-left: auto; margin-right: auto; }
  #skill-setup-area .skill-window { width: auto; max-width: 100%; }
  .skill-window { padding: 10px; }

  /* 아이템메이커 — 데스크톱 전용 1340px 확장 해제 */
  .section-equipMaker .room-layout,
  .section-equipMaker .room-content { max-width: 100%; }
  .mk-layout { gap: 12px; }
  .mk-editor { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .mk-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* ── 2-13. 폼 입력 (iOS 자동 확대 방지) ── */
  input[type="text"], input[type="number"], input[type="search"],
  textarea, select { font-size: 16px; }
  .board-form textarea { min-height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   3. 폰 (≤600px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 로드맵 버튼은 아이콘만 (텍스트 노드는 font-size:0으로 접음) */
  .btn-roadmap {
    font-size: 0;
    padding: 7px 9px;
    gap: 0;
  }
  .btn-roadmap .tb-icon { width: 16px; height: 16px; }

  .tab-logo { font-size: 0.98em; }
  .tab-search input { width: 96px; }
  .tab-search #btn-search { padding: 7px 9px; }
  .tab-btn { padding: 7px 11px; font-size: 12px; }

  .home-title { font-size: 2em; letter-spacing: 1px; }
  .char-img { height: 260px; }

  .section { padding: 12px 8px calc(18px + env(safe-area-inset-bottom)); }
  .section-title { font-size: 1.15em; }

  .boss-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .boss-mob-img { width: 72px; height: 72px; }
  .boss-name { font-size: 0.82em; }
  .boss-card { padding: 8px 6px; }

  .roadmap-grid { grid-template-rows: repeat(4, 58px); gap: 4px; }
  .rm-cell { font-size: 0.55em; }
  .rm-icon svg { width: 17px; height: 17px; }

  .stat-compare-wrap { flex-direction: column; }
  .sub-info { gap: 6px; }
  .sub-tag { font-size: 0.72em; padding: 3px 8px; }

  .party-slot { grid-template-columns: 24px 1fr auto; }
  .diff-tab { font-size: 0.64em; padding: 3px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   4. 가로모드 폰 (높이가 아주 낮을 때) — 탭바를 다시 1줄로 압축
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (max-height: 500px) {
  :root { --tabbar-h: 42px; }
  #tabbar {
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: 42px;
  }
  .tab-logo { grid-column: 1; grid-row: 1; }
  .btn-roadmap { grid-column: 2; grid-row: 1; }
  .tab-buttons {
    grid-column: 3; grid-row: 1;
    justify-content: flex-start;
  }
  .tab-controls { grid-column: 4; grid-row: 1; }
  .char-img { height: 200px; }
  .home-title { font-size: 1.7em; }
  .home-content { padding-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   5. 사냥터 계산기 (≤900px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hf-wrap { gap: 10px; }
  .hf-panel { padding: 11px; }
  .hf-dope, .hf-picker { gap: 7px 10px; }
  .hf-f, .hf-c { font-size: 0.9em; }
  /* iOS 는 16px 미만 입력에 포커스하면 화면을 확대해버린다 */
  .hf-f input, .hf-f select, .hf-search, .hf-burn { font-size: 16px; }
  .hf-f input { width: 76px; }
  .hf-sum { margin-left: 0; width: 100%; text-align: right; }

  /* 목록: 6칸 한 줄 → 2줄 (이름 / 메타·수치) */
  .hf-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank name  val"
      ".    meta  meta";
    gap: 4px 8px; padding: 9px 10px;
  }
  .hf-rank   { grid-area: rank; }
  .hf-name   { grid-area: name; white-space: normal; }
  .hf-val    { grid-area: val; }
  .hf-street { grid-area: meta; }
  .hf-spawn, .hf-mlv { display: none; }
  /* 지역 칸에 젠·몹Lv 를 붙여 한 줄로 */
  .hf-street::after { content: attr(data-extra); }
  .hf-results { max-height: 52dvh; }

  /* 비교표: 가로 스크롤 */
  .hf-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .hf-table { min-width: 620px; font-size: 0.88em; }
  .hf-tr-table { min-width: 560px; }
  .hf-trn { font-size: 16px; width: 62px; }   /* iOS 확대 방지 */
  .hf-tr-ref { margin-left: 0; width: 100%; }
}

@media (max-width: 600px) {
  .hf-panel-title { font-size: 0.9em; }
  .hf-hint { display: block; margin-top: 2px; }
  .hf-search-inline { flex: 1 1 100%; }
  .hf-row { font-size: 0.94em; }
}