/* ==========================================================
   로그인 키네틱 타이포 인트로 (160 BPM, 약 8.6초 / 재방문 약 1초)
   index.php 전용. 색은 shadcn-theme.css 토큰만 쓴다.
   장면: Swing. → 8카운트 → 오늘 밤의 완벽한 플레이셋. → 로고가 간판(.marquee h1) 자리로
   클래스는 li- 접두사(Tailwind·공용 CSS 와 충돌 방지)
   ========================================================== */

/* 인트로 중에는 스크롤 잠금 */
html.intro-on body { overflow: hidden; }

.li-intro { display: none; }
html.intro-on .li-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}
.li-bg { position: absolute; inset: 0; background: var(--background); }
.li-scenes { position: absolute; inset: 0; }
.li-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 4vw;
  visibility: hidden;         /* 자기 구간에만 보임 */
}
.li-in { display: block; text-align: center; white-space: nowrap; position: relative; }
.li-big {
  font-weight: 700;
  line-height: 1.2;           /* 마스크가 g 하강부를 자르지 않게 */
  letter-spacing: -0.02em;
  color: var(--foreground);
}
/* 마스크: 바깥은 잘라 내고 안쪽이 아래에서 올라온다 */
.li-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .06em; margin-bottom: -.06em; }
.li-m > span { display: inline-block; }
.li-gold { color: var(--primary); }
.li-dim { color: var(--muted-foreground); }

/* 장면 1: Swing. */
.li-s1 .li-big { font-family: 'Josefin Sans', sans-serif; font-size: min(30vw, 44vh); }
/* 장면 2: 8카운트 (두 줄, 박자대로 한 칸씩) */
.li-s2 .li-in { display: grid; gap: .02em; font-size: min(17vw, 24vh); }
.li-s2 .li-row { display: flex; justify-content: center; align-items: baseline; gap: .26em; }
.li-s2 .li-tok { display: inline-block; font-family: 'Josefin Sans', sans-serif; }
.li-s2 .li-tok.li-amp { font-size: .56em; }
/* 장면 3: 오늘 밤의 / 완벽한 플레이셋. (한글은 Do Hyeon 400 하나, 가짜 볼드 금지) */
.li-s3 .li-big { font-family: 'Josefin Sans', 'Do Hyeon', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: min(11vw, 17vh); letter-spacing: 0; line-height: 1.15; }
html[lang^="zh"] .li-s3 .li-big { font-family: 'Josefin Sans', 'Noto Sans SC', sans-serif; font-weight: 700; font-size: min(13.5vw, 18vh); }
.li-s3 .li-ch, .li-s4 .li-ch { display: inline-block; }
.li-s3 .li-sp { display: inline-block; width: .28em; }
/* 장면 4: 로고. 간판 h1(.marquee h1)과 같은 글꼴·자간·그림자 → 바꿔치기 때 튀지 않게 */
.li-s4 .li-in {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(16vw, 26vh);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--foreground);
  text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent);
  white-space: pre;
}

.li-skip {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--muted-foreground) 55%, transparent);
  border-radius: 9999px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease, border-color .15s ease;
}
.li-skip:hover { color: var(--foreground); border-color: var(--foreground); }
.li-skip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.li-skip kbd { font: inherit; font-size: .72rem; opacity: .75; border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px; }
@media (hover: none) { .li-skip kbd { display: none; } }

/* '인트로 다시 보기' — 카드 아래 작은 링크 */
.li-replay {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 10px;
  border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit; font-size: .76rem;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.li-replay:hover { color: var(--foreground); }
.li-replay:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* 입력칸 테두리 대비 3:1 (WCAG 1.4.11) — 로그인 카드 범위에서만. 포커스 색은 공용 규칙 유지 */
.login-card .shadcn-input:not(:focus),
.login-card .shadcn-select:not(:focus) {
  border-color: color-mix(in srgb, var(--muted-foreground) 60%, var(--input));
}

/* 움직임 줄이기: 인트로는 생략(JS), 다시 보기 버튼도 숨김 */
@media (prefers-reduced-motion: reduce) {
  .li-replay { display: none; }
  .li-skip { transition: none; }
}