/* ════════════════════════════════════════════════════════════════
 * 루에랑 로그인 화면 디자인 — 모양 · 2026-10-27 (그림 · 동작은 themes.js)
 *   body.lt + body.lt-<id> 일 때만 먹는다. 「기본(classic)」 은 아무 것도 안 붙어 예전 화면 그대로.
 *   로그인 칸은 login.html 의 CSS 변수(--sf · --bd · --tx · --txm · --txd · --bg · --ac)만 판마다 바꾼다 — 칸의 글 · 동작은 하나.
 *   한글은 낱말 단위로 줄을 바꾼다(공통 지침 keep-all).
 * ════════════════════════════════════════════════════════════════ */

/*  판을 정하기 전에 기본 화면이 번쩍 보였다 바뀌지 않게 — 늦어도 1.2초 뒤엔 보인다(login.html) */
html.lt-wait body { visibility: hidden; }

body.lt { --zone: clamp(440px, 36vw, 560px); overflow-x: hidden; word-break: keep-all; overflow-wrap: break-word; }
body.lt .lt-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
body.lt .lt-cv { position: absolute; left: 0; top: 0; display: block; }
/*  그림 칸 = 화면 왼쪽(로그인 칸 자리를 뺀 나머지) */
body.lt .lt-art { position: absolute; left: 0; top: 0; bottom: 0; right: var(--zone); }
/*  공용 vc.css 의 로그인 바탕(파란 그라데이션)이 무대를 덮지 않게 비운다 */
body.lt .login-wrap { position: relative; z-index: 1; justify-content: flex-end; padding: 24px calc((var(--zone) - 360px) / 2); background: none; }
/*  글자색 · 입력칸은 칸에 둔 변수로 다시 정한다(body 에서 이미 정해진 색을 물려받으면 변수를 바꿔도 안 바뀐다) */
.lt .login-card { box-shadow: none; color: var(--tx); }
body.lt .login-card .fld input { background: var(--bg); color: var(--tx); }
.lt .login-btn { transition: transform .12s ease; }
.lt .login-btn:active { transform: translateY(1px); }

@media (max-width: 760px) {
  /*  폰 — 그림은 위쪽 띠 · 로그인 칸은 그 아래 */
  body.lt .lt-stage { position: relative; height: 44vh; min-height: 300px; }
  body.lt .lt-art { right: 0; }
  body.lt .login-wrap { min-height: 0; justify-content: center; padding: 0 16px 36px; margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.lt * { transition: none !important; animation: none !important; }
}

/* ① 우주 ───────────────────────────────────────────────────── */
body.lt-universe { background: #000; }
.lt-universe .lt-logo { position: absolute; left: clamp(22px, 4vw, 56px); top: clamp(18px, 4vh, 44px); width: clamp(76px, 8vw, 118px); height: auto; }
.lt-universe .login-card {
  --sf: rgba(8, 14, 28, .74); --bd: rgba(173, 214, 255, .2); --tx: #f2f6ff; --txm: rgba(222, 232, 255, .74); --txd: rgba(222, 232, 255, .52);
  --bg: rgba(255, 255, 255, .06); --ac: #fab93c;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.lt-universe .login-btn { color: #14110a; }
.lt-universe .lang-pick button.on { background: rgba(250, 185, 60, .14); }
.lt-universe .fld input::placeholder { color: rgba(222, 232, 255, .38); }

/* ② 게임 — 홈페이지 첫 화면 ─────────────────────────────────── */
body.lt-arcade { background: #000; }
.lt-arcade .ar-hud {
  position: absolute; left: calc(var(--ar-sx) + var(--ar-sw) - 10px); top: calc(var(--ar-sy) + 8px); transform: translateX(-100%);
  border: 1.5px solid #e8eef8; border-radius: 2px; padding: 1px 22px; color: #cfd8e6; white-space: nowrap;
  font: 300 clamp(13px, 1.5vw, 19px)/1.4 Bahnschrift, "Arial Narrow", sans-serif; font-stretch: condensed; letter-spacing: .02em;
}
.lt-arcade .ar-big {
  position: absolute; left: 0; right: 0; top: calc(var(--ar-sy) + var(--ar-sh) + 3.5vh); text-align: center; color: #fff;
  font: 700 min(9vw, 12.5vh, 148px)/.86 Bahnschrift, "Arial Narrow", Impact, sans-serif; font-stretch: condensed; letter-spacing: -.01em;
}
.lt-arcade .ar-note {
  position: absolute; right: 8px; top: calc(var(--ar-sy) + var(--ar-sh) * .32); display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  color: #9aa3b2; font: 300 clamp(14px, 1.35vw, 19px)/1.3 Bahnschrift, "Arial Narrow", sans-serif; font-stretch: condensed; text-align: right;
}
.lt-arcade .ar-arrow { width: 64px; height: 48px; transform: rotate(8deg); }
.lt-arcade .login-card {
  --sf: #000; --bd: #e8eef8; --tx: #fff; --txm: #b9c2d0; --txd: #7d8696; --bg: #000; --ac: #fff;
  border-width: 2px; border-radius: 4px;
}
.lt-arcade .login-title { font-family: Bahnschrift, "Arial Narrow", "Malgun Gothic", sans-serif; font-stretch: condensed; font-size: 24px; letter-spacing: .01em; }
.lt-arcade .fld input { border-width: 1.5px; border-color: rgba(232, 238, 248, .55); border-radius: 2px; }
.lt-arcade .fld input:focus { border-color: #fab93c; }
.lt-arcade .login-btn { color: #000; border-radius: 2px; font-family: Bahnschrift, "Malgun Gothic", sans-serif; font-size: 15px; }
.lt-arcade .lang-pick button.on { background: rgba(255, 255, 255, .12); }
@media (max-width: 760px) {
  .lt-arcade .ar-note { display: none; }
  .lt-arcade .ar-big { font-size: min(13vw, 64px); }
}

/* ③ 선언문 — 홈페이지 한글 선언 ─────────────────────────────── */
body.lt-manifesto { background: #fff; }
.lt-manifesto .mf-text {
  position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; transform: translateY(-50%); margin: 0; color: #000; white-space: nowrap;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-weight: 900; letter-spacing: -.045em; line-height: 1.06;
  -webkit-text-stroke: .05em #000; paint-order: stroke fill;   /* 맑은 고딕은 굵게까지만 있다 — 홈페이지 선언문처럼 묵직하게 획을 덧댄다 */
}
.lt-manifesto .mf-text span { display: block; }
/*  로그인 칸 = 홈페이지의 굵은 말풍선 */
.lt-manifesto .login-card {
  --sf: #fff; --bd: #000; --tx: #000; --txm: #333; --txd: #555; --bg: #fff; --ac: #000;
  border-width: 7px; border-radius: 24px; padding: 30px 28px 26px;
  animation: mf-pop .32s cubic-bezier(.2, .9, .3, 1.25) both;
}
.lt-manifesto .login-card::after {
  content: ""; position: absolute; left: 34px; bottom: -44px; width: 60px; height: 51px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 51'%3E%3Cpath fill='%23fff' d='M8 0 C 10 22, 6 36, 2 47 C 20 41, 32 27, 40 0 Z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linejoin='round' stroke-linecap='round' d='M8 3.5 C 10 22, 6 36, 2 47 C 20 41, 32 27, 40 3.5'/%3E%3C/svg%3E") no-repeat;
}
.lt-manifesto .fld input { border-width: 2px; border-color: #000; border-radius: 9px; }
.lt-manifesto .fld input:focus { box-shadow: 0 0 0 3px #fab93c; }
.lt-manifesto .login-btn { border-radius: 10px; height: 40px; font-size: 14.5px; }
@keyframes mf-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) {
  body.lt-manifesto .lt-stage { height: 40vh; min-height: 250px; }
  body.lt-manifesto .login-wrap { margin-top: 0; padding-bottom: 64px; }
}

/* ④ 노란 지구 ───────────────────────────────────────────────── */
body.lt-globe { background: #fab93c; }
.lt-globe .gl-tag {
  position: absolute; left: clamp(22px, 4vw, 56px); top: clamp(18px, 4vh, 44px); color: #000;
  font: 700 clamp(22px, 2.5vw, 36px)/1 Bahnschrift, "Arial Narrow", sans-serif; font-stretch: condensed; letter-spacing: .01em;
}
.lt-globe .login-card {
  --sf: #fff; --bd: #000; --tx: #000; --txm: #333; --txd: #555; --bg: #fff; --ac: #000;
  border-width: 3px; border-radius: 14px;
}
.lt-globe .fld input { border-width: 1.5px; border-color: #000; }
.lt-globe .fld input:focus { box-shadow: 0 0 0 3px rgba(250, 185, 60, .9); }
.lt-globe .login-btn { color: #fab93c; height: 38px; }
/*  영어 선언문 — 라틴 글자는 덧댄 획이 거칠어 보여 얇게 */
.lt-manifesto .mf-text.en { -webkit-text-stroke-width: .018em; letter-spacing: -.025em; }