/* tablet-mode — 회전 안내 (스킬 자산의 안내 부분).
   배율은 public/tablet-mode.js 가 뷰포트 폭으로 처리한다. */
:root{--tm-gate-bg:#13263b;--tm-gate-fg:#fff3c9}
/* ── 세로로 들었을 때 안내 ──────────────────────────────
   강제 회전은 웹에서 보장되지 않는다. 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: Jua, system-ui, 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); }
}