/* 화면 크기별 마무리(2026-10-11 성능·반응형 점검, _renewal/PERF_RESPONSIVE_20261011.md)
   마지막에 불러와 앞 파일들의 규칙을 덮는다. 바꾼 것만 적는다.
   1) 태블릿(761~1180px): 미션 카드가 왼쪽 '섬 미션' 안내판을 덮지 않게 안내판 오른쪽 빈 곳 가운데로
   2) 가로로 든 휴대폰(높이 520px 이하): 안내판 한 줄·미니맵 숨김·점프/소리 버튼 겹침 풀기·첫 안내창 두 단·장소 창 넓게
   3) 높이가 낮은 화면에서 첫 안내창이 아래 바로가기 바를 덮던 것
   4) 아주 넓은 화면(1800px 이상): 장소 창을 조금 넓게
   5) 12px보다 작던 글자 몇 곳 */

/* ── 1) 태블릿: 미션 카드 위치 ── */
@media (min-width: 761px) and (max-width: 1024px) {
  body.has-mission-hub .quest-card { left: calc(284px + (100% - 284px) / 2); width: min(460px, calc(100vw - 300px)); }
}
@media (min-width: 761px) and (max-width: 960px) {
  body.has-mission-hub:not(.mode-2d) .quest-card { top: 130px; }  /* 세로 태블릿 3D: 카드 오른쪽 끝이 소리 버튼(위 76~120px)에 닿으므로 그 아래로(2D는 아래쪽 가운데 그대로) */
}
@media (min-width: 1025px) and (max-width: 1180px) {
  body.has-mission-hub .quest-card { left: calc(320px + (100% - 320px) / 2); width: min(460px, calc(100vw - 336px)); }
}

/* ── 1-2) 2D 지도: 왼쪽 위 '섬 미션' 안내판 밑에 첫 미션(진단소·강의실) 섬이 깔리던 것 → 지도를 안내판 오른쪽 빈 곳에 맞춘다
   (태블릿·작은 노트북에서 지도 폭이 화면 폭만큼이라 공공기관교육 섬이 안내판 아래로 들어갔다) */
@media (min-width: 761px) and (min-height: 521px) {
  body.mode-2d .map2d svg { left: 320px; width: calc(100% - 336px); }
  body.mode-2d.panel-open .map2d svg { width: max(280px, calc(100% - var(--panel-w) - 56px - 304px)); }
}
@media (min-width: 761px) and (max-width: 1024px) and (min-height: 521px) {
  body.mode-2d .map2d svg { left: 284px; width: calc(100% - 300px); }
  body.mode-2d.panel-open .map2d svg { width: calc(100% - 300px); }  /* 장소 창이 열려도 지도는 그 자리 그대로(창이 오른쪽을 덮는다. 남는 폭이 좁아 줄이지 않음) */
}

/* ── 3) 첫 안내창이 떠 있으면 아래 바로가기 바는 잠시 숨김(높이가 낮은 화면에서 서로 겹침) ── */
@media (max-height: 820px) {
  body.intro-open .dock { opacity: 0; pointer-events: none; }
}

/* ── 4) 아주 넓은 화면 ── */
@media (min-width: 1800px) {
  :root { --panel-w: 540px; }
}

/* ── 6) 태블릿(761~1180px)에서 장소 창이 열렸을 때(2026-10-11 감사) ──
   도장 알림이 창 왼쪽 좁은 칸 위쪽(=섬 미션 안내판 자리)에 떠서 글이 한두 낱말씩 꺾이고 안내판을 덮었다(768×1024: 5줄, 1024×768: 안내판과 240×58 겹침).
   → 같은 칸의 아래쪽(바로가기 바 위, 지도 빈 곳)으로. 창 제목은 계속 가리지 않는다 */
@media (min-width: 761px) and (max-width: 1180px) and (min-height: 521px) {
  body.has-mission-hub.panel-open .toasts { top: auto; bottom: 86px; left: 12px; right: auto; transform: none; width: auto; max-width: calc(100% - var(--panel-w) - 48px); justify-items: start; }
}
/* 세로 태블릿: 장소 창이 열리면 소리 단추가 안내판 오른쪽 위 모서리를 8px 덮었다 → 안내판과 창 사이 틈으로 */
@media (min-width: 761px) and (max-width: 1024px) and (min-height: 521px) {
  body.has-mission-hub.panel-open .snd { right: auto; left: max(274px, calc(100% - var(--panel-w) - 76px)); }
}

/* ── 7) 휴대폰: 새 미션 카드가 떠 있는 동안(2026-10-11 감사) ──
   3D에서 [다음 미션]을 누르면 앞 도장 알림('다음: 강의실')과 동물 친구 음성 자막이 카드 윗부분을 덮어 '새 미션 2/5 · 강의실로 가요'가 안 보였다(360·390).
   알림은 카드가 같은 내용을 말하므로 카드가 닫힐 때까지 잠시 숨기고, 자막은 지우지 않고 아래(바로가기 바 위)로 옮긴다 */
@media (max-width: 760px) {
  body.quest-card-open .toasts { opacity: 0; visibility: hidden; }
}
@media (max-width: 600px) {
  body.quest-card-open .vcap { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); }
}

/* ── 5) 작은 글자 ── */
.mission-hub .mh-cta small, .fj-eyebrow, .mission-card .mc-state { font-size: 12px; }
.fj-panel-tools button { font-size: 12px; }
.fj-panel-tools span { font-size: 12px; }

/* ── 2) 가로로 든 휴대폰 ── */
@media (max-height: 520px) and (orientation: landscape) {
  /* 상단 띠 */
  .hud { padding-top: max(8px, env(safe-area-inset-top)); }
  .brand small { display: none; }
  .stamps { display: none; }

  /* 섬 미션 안내판: 휴대폰처럼 HUD 아래 한 줄(도장 진행 막대 + 다음 미션 버튼) */
  .mission-hub, .mission-hub:not([hidden]) {
    left: max(10px, env(safe-area-inset-left)); right: auto; width: min(380px, 46vw); top: calc(max(8px, env(safe-area-inset-top)) + 54px);
    flex-direction: row; align-items: stretch; gap: 0; padding: 0; border-radius: 12px; overflow: hidden;
  }
  .mission-hub .mh-head, .mission-hub .mh-list { display: none; }
  .mission-hub .mh-bar { flex: none; width: 58px; margin: 0; padding: 0 10px; grid-template-columns: repeat(5, 1fr); gap: 3px; align-content: center; }
  .mission-hub .mh-bar i { height: 6px; }
  .mission-hub .mh-cta { margin: 0; flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: 0; padding: 4px 12px; }
  .mission-hub .mh-cta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.wchat-open .mission-hub, body.panel-open .mission-hub { opacity: 0; visibility: hidden; pointer-events: none; }

  /* 미니맵은 숨김(아래 바로가기·두런이 상담 버튼과 겹침), 병아리 성장 칩도 휴대폰처럼 숨김 */
  .minimap { display: none; }
  .npc-chip-next { display: none; }
  /* 동물 친구 버튼: 화면 위로 밀려 나가던 것(bottom 362px) → 소리 버튼 아래 오른쪽 */
  body.has-chick-agent .npc-dock, .npc-dock { top: 128px; bottom: auto; right: max(18px, env(safe-area-inset-right)); }
  body.panel-open .npc-dock { display: none; }
  /* 점프 버튼이 소리 버튼을 덮던 것 → 소리 버튼 왼쪽, 조금 작게(world-gfx.css가 나중에 붙으므로 body.mode-3d로 이긴다) */
  body.mode-3d .gfx-jump { top: calc(max(8px, env(safe-area-inset-top)) + 58px); bottom: auto; right: calc(max(18px, env(safe-area-inset-right)) + 54px); width: 52px; height: 52px; }
  body.mode-3d .gfx-jump svg { width: 20px; height: 20px; }

  /* 두런이 말풍선: 작게, 미션 카드가 떠 있으면 숨김(카드가 같은 말을 한다) */
  .guide { bottom: 72px; max-width: min(380px, 46vw); }
  .guide img { width: 52px; }
  .guide-bubble { font-size: 14px; padding: 8px 12px; margin-bottom: 22px; }
  body.quest-card-open .guide { opacity: 0; }
  .enter-prompt { top: auto; bottom: 76px; }

  /* 2D 지도: 위 띠·안내판 한 줄 아래부터 */
  body.mode-2d .map2d svg { top: calc(max(8px, env(safe-area-inset-top)) + 106px); height: calc(100% - 106px - 70px); }

  /* 바로가기 바 */
  .dock { bottom: max(8px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); transform: none; max-width: none; padding: 4px; }
  .dock button { padding-top: 7px; padding-bottom: 7px; }
  body.panel-open .dock { opacity: 0; visibility: hidden; pointer-events: none; }

  /* 미션 카드: 안내판 한 줄 아래, 작게 */
  .quest-card, body.mode-2d .quest-card, body.has-mission-hub .quest-card {
    top: calc(max(8px, env(safe-area-inset-top)) + 106px); bottom: auto; left: 50%;
    width: min(440px, calc(100vw - 24px)); grid-template-columns: 56px 1fr; gap: 2px 12px; padding: 10px 14px 10px 10px; border-radius: 18px;
  }
  .quest-card img, .quest-card:not(.has-btn) img { width: 56px; height: 56px; }
  .quest-card:not(.has-btn) { grid-template-columns: 52px 1fr; }
  .qc-kicker { font-size: 12px; }
  .qc-name, .quest-card:not(.has-btn) .qc-name { font-size: 17px; }
  .qc-why, .quest-card:not(.has-btn) .qc-why { font-size: 13px; margin-top: 2px; }
  .qc-acts { margin-top: 8px; }
  .qc-go { min-height: 44px; padding: 0 20px; font-size: 15px; }
  .qc-tip { margin-top: 4px; font-size: 12px; line-height: 1.35; }  /* 직접 조작이라 조작법 한 줄은 보인다(2026-10-11) */
  .qc-steps { margin-top: 6px; }

  /* 장소 창: 위 띠 아래부터 화면 끝까지, 오른쪽에 넓게(알림 위치 계산도 같은 너비를 쓰게 --panel-w) */
  :root { --panel-w: min(600px, calc(100vw - 16px)); }
  .panel { top: calc(max(8px, env(safe-area-inset-top)) + 54px); bottom: 6px; right: max(8px, env(safe-area-inset-right)); width: min(600px, calc(100vw - 16px)); }
  .panel-head { padding: 8px 12px 6px 18px; }
  .panel-body { padding: 4px 18px 16px; }
  .quest-bar { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)) 16px; }
  .quest-bar b { font-size: 14px; }
  /* 장소 창이 열려 있으면 알림은 위 띠 바로 아래 가운데(창 머리 위로 잠깐). 창 왼쪽 좁은 칸에서는 글이 한 낱말씩 꺾이고 아래로 넘쳤다 */
  .toasts, body.panel-open .toasts, body.has-mission-hub .toasts, body.has-mission-hub.panel-open .toasts {  /* 창을 열고 닫아도 같은 자리(밀림 없음) */
    top: calc(max(8px, env(safe-area-inset-top)) + 56px); left: 50%; right: auto; transform: translateX(-50%);
    width: auto; max-width: min(520px, calc(100vw - 24px));
  }

  /* 첫 안내창: 두 단(왼쪽 제목·시작 단추, 오른쪽 미션 다섯 곳)으로 한 화면에 */
  .intro {
    top: calc(max(8px, env(safe-area-inset-top)) + 52px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); animation: none;
    width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 68px); padding: 14px 18px 12px; grid-template-columns: 1fr;
  }
  .intro-duron { display: none; }
  .intro-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .intro-body > * { grid-column: 1; }
  .intro-body > .intro-missions { grid-column: 2; grid-row: 1 / span 6; margin: 0; align-self: center; }
  .intro-eyebrow { padding-right: 0; margin-bottom: 6px; font-size: 12px; }
  .intro h2 { font-size: 20px; line-height: 1.3; padding: 0; margin-bottom: 6px; }
  .intro-desc { font-size: 13.5px; margin-bottom: 8px; }
  .intro-missions li { padding: 5px 0; font-size: 14px; gap: 8px; }
  .intro-missions small { font-size: 12px; }
  .intro-meta { margin-bottom: 8px; }
  .intro-meta li { font-size: 12px; padding: 5px 9px; }
  .intro .intro-actions .btn-main { min-height: 44px; min-width: 0; }
  .intro-trust { margin-top: 8px; padding-top: 6px; font-size: 12px; }
  body.intro-open .dock { opacity: 0; pointer-events: none; }
}

/* 조이스틱(2026-10-11): 가로 휴대폰은 아래 바로가기 바 위 왼쪽에 작게 */
@media (max-height: 520px) and (orientation: landscape) {
  body.mode-3d .gfx-stick { width: 96px; height: 96px; bottom: calc(76px + env(safe-area-inset-bottom)); }  /* world-gfx.css가 나중에 붙으므로 body.mode-3d로 이긴다 */
  body.mode-3d .gfx-stick-knob { width: 42px; height: 42px; }
}