/* 로그인 구성 레이아웃 — 배경 영상 위 정상 흐름 컬럼 폼(로고 상단 → 스페이서 → 인사말 →
   글래스패널[이메일·비번] → 로그인 버튼 → 링크) (design-spec §11.1·§17.1·§8·§3.0).
   색·타이포는 tokens.css 의 var() 로만 소비한다. 로고 폭·구름 폭 등 시안 고유의
   구조 치수는 dc §11.1 지목 좌표(194px·76px 등)를 직접 적는다
   (components.css·app_shell.css 의 구조 px 선례). 컴포넌트 시각·상태(input-field·
   glass-panel·special-button·ghost-button·icon-button)는 components.css 소유 —
   여기선 배치만 얹는다. */

.login {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 20px);   /* dc form 28/20 순수 프레임 인셋 + 실기기 노치 안전(§W2.7 G1#2 · viewport-fit=cover · app_shell safe-area 미적용) */
}

.login__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 132px;
  height: 32px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
}

.login__sound .sound-toggle {
  top: var(--space-0);
  right: var(--space-0);
  bottom: auto;
}

/* ── 로고(Wordmark) 흐름 최상단·중앙 (L1·L2·D47·dc 50-52) — 194px · 진입 cm-rise(.motion-rise·m4).
   중앙 정렬은 margin auto(transform 미사용 → cm-rise translateY 와 무충돌).
   dc Wordmark 의 종이빛 drop-shadow 글로우는 토큰 풀 밖 색이라 생략한다
   (생 색 금지 · tokens.css 는 이 슬라이스 밖 — 필요 시 --shadow-logo 등록 후 적용). */
.login__wordmark {
  display: block;
  width: 194px;
  height: auto;
  margin: 0 auto;
}

/* ── 스페이서 (dc 54·L1) — 로고를 위로 밀고 나머지를 하단 클러스터로 모은다. */
.login__spacer {
  flex: 1 1 auto;
}

/* ── 인사말 + 좌우 구름 ── */
.login__greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: var(--stack-loose);   /* L6 — 구 22px */
}

.login__cloud {
  display: block;
  width: 76px;
  height: auto;
  opacity: 0.92;
}

.login__cloud--mirror {
  transform: scaleX(-1);
}

.login__greeting-text {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-title-3);
  line-height: 1.66;
  letter-spacing: var(--ls-title);
  color: var(--ink-800);
  text-wrap: pretty;
}

.login__greeting-accent {
  font-weight: var(--fw-bold);
  color: var(--gold-600);
}

/* ── GlassPanel 내부 배치([이메일·비번]만·L3) ── */
.login__fields {
  display: flex;
  flex-direction: column;
  gap: var(--stack);   /* L8 — 구 12px(동일값) */
}

/* ── 로그인 버튼·링크 — 글래스패널 «밖» form 직속 형제(배경 영상 위·L3·D46) ── */
.login__submit {
  margin-top: var(--stack-loose);   /* L6 — 구 18px */
}

.login__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);       /* L6 — 구 6px */
  margin-top: var(--stack);  /* L6 — 구 12px */
}

/* 링크 구분자 — 가운뎃점 «·»(L5·D49 · 구 .login__hairline 1px 세로선 폐기). */
.login__separator {
  font: var(--type-caption);
  color: var(--text-tertiary);
}