/* 영문 상태 안내 띠 — 입력칸 위에 얹는다.
   [2026-09-08] 문희원·베타테스터29 님 제안.
   글자를 가리지 않게 입력칸 '위쪽' 바깥에 붙이고, 누를 수 없게 둔다
   (누를 수 있으면 입력칸을 못 누르는 일이 생긴다). */
.hangul-input-notice {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 40;
  pointer-events: none;
  max-width: min(420px, calc(100% - 16px));
  padding: 9px 14px;
  border-radius: 10px;
  background: #C2410C;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(120, 45, 10, .28);
  animation: hangul-notice-in .16s ease-out;
}
/* 위에 자리가 없으면 아래로 뒤집는다 */
.hangul-input-notice.is-below {
  bottom: auto;
  top: calc(100% + 6px);
  animation: hangul-notice-in-below .16s ease-out;
}
@keyframes hangul-notice-in-below {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hangul-input-notice.is-below { animation: none; }
}

.hangul-input-notice b { font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
.hangul-input-notice[hidden] { display: none !important; }

/* 좁은 화면에서는 한 줄로 버티지 말고 접힌다 */
@media (max-width: 640px) {
  .hangul-input-notice { white-space: normal; font-size: 0.85rem; }
}

@keyframes hangul-notice-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hangul-input-notice { animation: none; }
}