/*
 * 모바일 레터박스 (사용자 지시 2026-09-14).
 *
 * 모바일에서도 1920x1080 비율을 그대로 쓰고, 남는 자리는 검은 여백으로 둔다.
 * js/ui/mobile.js 가 viewport 를 바꿔 '가상 세로 1080' 좌표계를 만들고,
 * 여기서 1920x1080 상자를 화면 가운데에 놓는다.
 *
 * PC 화면은 절대 바뀌면 안 된다. 그래서 이 파일의 모든 규칙은 예외 없이
 * `html.is-mobile` 아래에 둔다. 그 클래스는 '손가락 기기 + 화면 짧은 변 820px 이하'
 * 일 때만 붙는다. 데스크톱에는 붙지 않는다(터치 노트북도 화면이 커서 안 붙는다).
 *
 * tuning.css 뒤에 읽혀야 한다(그쪽이 !important 를 쓴다).
 */

/* ── 검은 여백 + 1920x1080 상자를 가운데 ───────────────────── */
html.is-mobile,
html.is-mobile body {
  margin: 0;
  background: #000000;
  /* 상자가 화면보다 큰 축이 생겨도 스크롤이 생기지 않게 한다. */
  overflow: hidden;
}
html.is-mobile body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.is-mobile #app {
  width: 1920px !important;
  height: 1080px !important;
  flex: none !important;
}

/*
 * 안쪽에서 쓰는 vh 값 보정.
 *
 * 가상 세로는 폰에서 정확히 1080 이지만, 태블릿(16:9 보다 정사각)에서는 가로를
 * 1920 으로 맞추느라 세로가 1080 보다 커진다. 그때 100vh 를 그대로 쓰면 맵·헤더가
 * 상자(1080)보다 커져 삐져나온다. 상자 기준 고정값으로 바꾼다.
 * (1.6vh=17px · 9vh=97px · 6vh=65px · 4vh=43px · 3vh=32px · 2vh=22px — 모두 1080 기준)
 */
html.is-mobile .map {
  --ui-top: calc(17.28px + 121px + var(--ui-gap));   /* 1.6vh of 1080 */
  --fit: calc((1080px - var(--ui-top) - var(--ui-gap)) * var(--map-ar));
}
html.is-mobile .main-header,
html.is-mobile .main-footer { padding: 0 76.8px; }            /* 4vw of 1920 */
html.is-mobile .main-header { height: 97.2px; }               /* 9vh */
html.is-mobile .main-footer { height: 64.8px; }               /* 6vh */
html.is-mobile .main-content { padding: 84px 0 32.4px; gap: 21.6px; }  /* max(4vh,84) / 3vh / 2vh */
html.is-mobile .dlg-back { --dlg-frame: 1262.34px; }          /* 88vh * 680/512 */
html.is-mobile .bg-pop { width: 1262.34px; }                  /* 88vh * 680/512 */
html.is-mobile .admin__frame { width: 1376.98px; }            /* 96vh * 680/512 */
html.is-mobile .howto { width: 1147.5px; }                    /* 80vh * 680/512 */
html.is-mobile .tutdone-frame { width: 1176.19px; }           /* 82vh * 680/512 */
html.is-mobile .result-card { max-height: 993.6px; }          /* 92vh */

/* 전체화면 버튼은 화면 구석이 아니라 게임 상자 안 오른쪽 아래에 둔다.
   검은 여백 위에 떠 있으면 게임과 따로 노는 것처럼 보인다. */
html.is-mobile .fs-toggle {
  right: calc((100vw - 1920px) / 2 + 14px);
  bottom: calc((100vh - 1080px) / 2 + 12px);
  bottom: calc((100dvh - 1080px) / 2 + 12px);   /* 주소창을 뺀 실제 세로 기준 */
}