/* tablet-mode — 고정 해상도 스케일 투 핏 + 레터박스 + 회전 안내
   기준 해상도를 하나 정해 두고 화면 크기에 맞춰 통째로 확대·축소한다.
   배치는 절대 바뀌지 않는다. 배율만 바뀐다. */

:root {
  --tm-letterbox: #10161d;   /* 남는 여백(레터박스) 색. 앱 배경과 어울리게 바꾸세요 */
  --tm-gate-bg: #10161d;
  --tm-gate-fg: #f4efe3;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;              /* 무대 밖으로는 스크롤이 생기지 않는다 */
  background: var(--tm-letterbox);
  overscroll-behavior: none;     /* 모바일에서 당겨서 새로고침 막기 */
}

#tm-viewport {
  position: fixed;
  inset: 0;
  background: var(--tm-letterbox);
  overflow: hidden;
}

/* 가운데 정렬을 flex·grid에 맡기지 않는다.
   기준 해상도가 화면보다 클 때 브라우저가 넘치는 쪽을 잘라내지 않으려고
   가운데 대신 시작점에 붙여 버리는 일이 있다. 좌표로 직접 앉히는 편이 확실하다. */
#tm-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tm-w);
  height: var(--tm-h);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  /* 무대 안에서는 기준 해상도가 곧 화면이다.
     앱 코드는 100% / vw / vh 대신 이 고정 크기를 믿고 짜면 된다. */
}

/* 무대 안의 100vw·100vh는 기기 화면을 가리켜 어긋난다.
   무대 기준으로 바로잡아 준다. */
#tm-stage .tm-full { width: var(--tm-w); height: var(--tm-h); }

/* ── 세로로 들었을 때 안내 ──────────────────────────────
   강제 회전은 웹에서 보장되지 않는다. iOS 사파리는 화면 방향 잠금 API가
   아예 없고, 안드로이드도 전체화면일 때만 듣는다. 그래서 잠금은 시도만 하고
   실제 대비는 이 안내 화면이 맡는다. */
#tm-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left));
  background: var(--tm-gate-bg);
  color: var(--tm-gate-fg);
  font-family: system-ui, -apple-system, "Pretendard", "Malgun Gothic", sans-serif;
  text-align: center;
}
#tm-gate[data-show="1"] { display: flex; }

#tm-gate .tm-phone {
  width: 54px; height: 92px;
  border: 3px solid currentColor;
  border-radius: 10px;
  animation: tm-turn 1.8s ease-in-out infinite;
}
@keyframes tm-turn {
  0%, 45%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
#tm-gate h2 { margin: 0; font-size: 20px; font-weight: 700; }
#tm-gate p  { margin: 0; font-size: 14px; opacity: .75; line-height: 1.5; }

/* 회전이 잠겨 있거나 몸을 돌리기 어려운 상황도 있다.
   막다른 길로 만들지 않도록 그냥 보는 길을 남겨 둔다. */
#tm-gate button {
  margin-top: 6px;
  padding: 11px 20px;
  font: inherit;
  font-size: 14px;
  color: var(--tm-gate-bg);
  background: var(--tm-gate-fg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  #tm-gate .tm-phone { animation: none; transform: rotate(-90deg); }
}