/*
 * 모바일 대응. 데스크톱에는 영향이 없다.
 *
 * 아이폰은 정책상 전체화면(Fullscreen API)도, 가로 고정(screen.orientation.lock)도
 * 되지 않는다. 그래서 세 가지로 푼다.
 *   1) 높이를 dvh 로 잡아 주소창 아래 실제 보이는 만큼만 쓴다(layout.css).
 *   2) 세로로 들고 있으면 안내를 덮어 가로로 돌리게 한다(아래 · 판정은 js/ui/mobile.js).
 *   3) 전체화면 API 가 없으면 버튼을 감춘다(js/ui/fullscreen.js).
 *
 * 보이는 조건을 CSS 미디어(pointer:coarse)가 아니라 JS 가 정하는 이유:
 * 터치 노트북에서 창을 세로로 길게 늘여도 뜨지 않아야 하는데, 그 판단에 화면 크기까지
 * 봐야 한다. 한 곳에서 정하고 클래스 하나로 켠다.
 */

.rotate-guide { display: none; }

.rotate-guide--on {
  position: fixed; inset: 0; z-index: 1000000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center;
  background: #1f2429; color: #ffffff;
  font-family: var(--font, system-ui, sans-serif);
  /* 노치·홈 인디케이터를 피한다(viewport-fit=cover 와 짝) */
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.rotate-guide__icon {
  font-size: 64px; line-height: 1; color: #ff7a01;
  animation: rotate-guide-turn 1.8s ease-in-out infinite;
}
/* 세로 flex 에서 자식은 내용 폭만큼 늘어나 화면을 넘는다. 폭을 묶어 접히게 한다. */
.rotate-guide__title,
.rotate-guide__desc { max-width: 100%; word-break: keep-all; }
.rotate-guide__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.rotate-guide__desc { font-size: 15px; color: #c8d2da; line-height: 1.5; }

/* 안내가 떠 있는 동안 뒤 화면은 건드리지 못한다. */
html.is-portrait-guide #app,
html.is-portrait-guide .fs-toggle { pointer-events: none; }

/* 전체화면을 쓸 수 없는 곳(아이폰 · 안드로이드 틀 안)에서는 버튼을 감춘다.
   결과 화면에서 버튼을 강제로 보이는 규칙(layout.css)까지 이기려고 !important. */
html.is-no-fs #fs-toggle { display: none !important; }

@keyframes rotate-guide-turn {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(78deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-guide__icon { animation: none; }
}