/*
 * Auth 페이지 공통 테마 · 디자인 토큰 (순수 CSS)
 *
 * 이 폴더(apps/auth/assets)는 `/page/assets` 로 정적 서빙된다(server.ts). auth 의 로그인/로그아웃/
 * 탈퇴/에러 페이지는 Tailwind·@oplet/style-ui 를 못 쓰는 서버 렌더 EJS 라, style-ui 의 테마 토큰
 * (packages/style-ui/src/styles/theme-oplet.css)과 **같은 값·같은 역할이름**을 CSS 변수로 옮겨 소유한다.
 *
 * 온보딩(언어선택·약관)과 같은 디자인 언어를 쓴다:
 *  - 강조·CTA 는 브랜드 남색이 아니라 **`--primary`(oplet-default, 근검정)** — 다크에서 흰색으로 반전한다.
 *  - 빨강은 **`--point`(oplet-point #e34234)** 하나뿐이고 **라이트·다크 모두 고정**이다(오류·필수·위험만).
 *  - **면과 여백으로 계층**: 소프트 면(`--surface-info`) 위에 흰 카드(`--card`)를 얹고, 선택은
 *    **`--primary` 로 채운 면 + 반전 글자**로 나타낸다(선·링 강조를 쓰지 않는다).
 *  - 뮤트 글자는 `--text-info`.
 *
 * 라이트/다크 전환은 theme-oplet.css 와 같은 모델: 기본 라이트(:root) · 시스템 다크(@media) ·
 * 앱/웹뷰가 <html> 에 .dark / data-theme="dark" 를 찍으면 우선.
 */

:root {
  color-scheme: light;

  /* 글자·바탕 */
  --foreground: rgb(29 29 31);
  --background: rgb(255 255 255);
  --text-info: rgb(90 90 92); /* oplet-text-info — 뮤트 */
  --text-subtle: rgb(112 112 113); /* oplet-text-subtle — 더 뮤트 */

  /* 면(surface) — 여백 다음의 계층 */
  --card: rgb(255 255 255); /* 카드 = bg-background */
  --surface-info: rgb(245 245 245); /* oplet-bg-info — 카드를 얹는 소프트 면 */
  --surface-subtle: rgb(245 245 245); /* oplet-bg-subtle — 칩·본문 면 */
  --surface-info-hover: rgb(236 236 238);

  /* 강조 = oplet-default(근검정), 다크에서 흰색으로 반전 */
  --primary: rgb(29 29 31);
  --primary-hover: rgb(56 56 58);
  --primary-foreground: rgb(255 255 255); /* 강조면 위 글자 */

  /* 포인트 = oplet-point (오류·필수·위험). 라이트·다크 고정 */
  --point: rgb(227 66 52);
  --point-hover: rgb(206 52 40);
  --point-foreground: rgb(255 255 255);

  /* 상태 면 */
  --success-surface: rgb(221 244 229);
  --success-foreground: #1c7a3e;

  /* 선은 마지막 수단 — 아주 옅게만 */
  --border: rgb(29 29 31 / 8%);

  --ring: rgb(29 29 31);

  /* 여백 리듬 — 황금비(≈1.618) 기반 모듈러 스케일 */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.75rem;

  --radius-surface: 1rem; /* 소프트 면 컨테이너 (rounded-2xl) */
  --radius-card: 0.75rem; /* 카드 (rounded-xl) */
  --radius-control: 0.75rem;
  --radius-logo: 1.25rem;
}

/* 시스템 다크(사용자·웹뷰가 명시 라이트를 찍지 않은 경우) */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme='light']) {
    color-scheme: dark;

    --foreground: rgb(245 245 245);
    --background: rgb(29 29 31);
    --text-info: rgb(178 178 180);
    --text-subtle: rgb(146 146 148);

    --card: rgb(29 29 31); /* bg-background 다크 */
    --surface-info: rgb(42 42 44); /* 바탕 위로 살짝 뜬 소프트 면 */
    --surface-subtle: rgb(36 36 38);
    --surface-info-hover: rgb(52 52 54);

    /* 강조가 흰색으로 반전 (oplet-default 반전) */
    --primary: rgb(255 255 255);
    --primary-hover: rgb(226 226 224);
    --primary-foreground: rgb(29 29 31);

    /* 포인트는 고정 — 다크에서도 oplet-point 그대로 */
    --point: rgb(227 66 52);
    --point-hover: rgb(240 100 88);
    --point-foreground: rgb(255 255 255);

    --success-surface: rgb(70 200 120 / 15%);
    --success-foreground: rgb(126 224 166);

    --border: rgb(255 255 255 / 12%);

    --ring: rgb(255 255 255);
  }
}

/* 명시 다크(앱/웹뷰가 <html class="dark"> 또는 data-theme="dark") — 시스템보다 우선 */
:root.dark,
:root[data-theme='dark'] {
  color-scheme: dark;

  --foreground: rgb(245 245 245);
  --background: rgb(29 29 31);
  --text-info: rgb(178 178 180);
  --text-subtle: rgb(146 146 148);

  --card: rgb(29 29 31);
  --surface-info: rgb(42 42 44);
  --surface-subtle: rgb(36 36 38);
  --surface-info-hover: rgb(52 52 54);

  --primary: rgb(255 255 255);
  --primary-hover: rgb(226 226 224);
  --primary-foreground: rgb(29 29 31);

  --point: rgb(227 66 52);
  --point-hover: rgb(240 100 88);
  --point-foreground: rgb(255 255 255);

  --success-surface: rgb(70 200 120 / 15%);
  --success-foreground: rgb(126 224 166);

  --border: rgb(255 255 255 / 12%);

  --ring: rgb(255 255 255);
}

/* ───────────────────────── 기본 · 레이아웃 ───────────────────────── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

/*
 * 한국어는 낱말 단위로 줄바꿈한다(브라우저호환_Baseline 6.4). 기본값은 음절마다 끊어 「환영합/니다」처럼 갈린다.
 * 다른 앱은 style-ui 의 cross-browsing.css 가 이 규칙을 주지만 auth 는 그 파일을 못 읽어 같은 값을 여기 둔다.
 * 일본어·중국어는 글자 단위가 맞아 건드리지 않는다.
 */
html:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-sm);
}

/* ───────────────────────── 로고 · 앱 이름 ───────────────────────── */

/* 강조면(=primary)으로 채운 앱 마크 — 라이트 근검정/다크 흰색으로 반전 */
.logo {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  transition: transform 0.2s ease;
}

.logo:hover {
  transform: scale(1.04);
}

.logo--danger {
  background: var(--point);
}

.logo-text,
.logo-icon {
  color: var(--primary-foreground); /* 강조면 대비색 */
  font-size: 1.4rem;
  font-weight: 700;
}

.logo-icon {
  font-size: 1.8rem;
}

/* 위험 로고의 글자는 빨강(point) 면 위라 항상 흰색 */
.logo--danger .logo-icon,
.logo--danger .logo-text {
  color: var(--point-foreground);
}

.app-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
  letter-spacing: -0.01em;
}

.app-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-info);
  text-align: center;
}

/* ───────────────────────── 카드 · 텍스트 ───────────────────────── */

/* 온보딩처럼 바깥 카드는 그림자·배경 없이 평평하다 — 면은 소프트 면(옵션·경고)만 만든다 */
.card {
  width: 100%;
  max-width: 400px;
}

.title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2xs);
}

.subtitle {
  font-size: 0.9rem;
  color: var(--text-info);
  text-align: center;
  line-height: 1.55;
  margin-bottom: var(--space-lg);
}

/* ───────────────────────── 버튼 ───────────────────────── */

.buttons {
  display: flex;
  gap: var(--space-2xs);
}

.btn {
  flex: 1;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: var(--radius-control);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

/* 기본(보조) — 소프트 면 */
.btn-secondary {
  background: var(--surface-info);
  color: var(--foreground);
}

.btn-secondary:hover {
  background: var(--surface-info-hover);
}

/* 주요 — 강조면(primary) 채움 + 반전 글자 */
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

/* 위험 — point 채움 */
.btn-point {
  background: var(--point);
  color: var(--point-foreground);
}

.btn-point:hover:not(:disabled) {
  background: var(--point-hover);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ───────────────────── 선택(라디오/체크) — 온보딩 패턴 ─────────────────────
   소프트 면(.options) 위에 흰 카드(.option)를 얹고, 선택은 primary 로 채운 면 + 반전 글자.
   선·링 강조를 쓰지 않는다(디자인컨셉: 선택된 카드만 검정 면으로 바꾼다). */

.options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-surface);
  background: var(--surface-info);
}

.option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.option:hover {
  background: var(--surface-info-hover);
}

/* 선택 = 검정(primary) 채움 + 반전 글자 */
.option.selected {
  background: var(--primary);
  color: var(--primary-foreground);
}

.option.selected:hover {
  background: var(--primary-hover);
}

.option input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.option.selected input {
  accent-color: var(--primary-foreground);
}

.option-content {
  flex: 1;
  min-width: 0;
}

.option-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}

.option-desc {
  font-size: 0.825rem;
  color: var(--text-info);
}

/* 선택된 카드 안에서는 설명 글자도 반전면 대비색으로(뮤트하되 읽힘) */
.option.selected .option-desc {
  color: var(--primary-foreground);
  opacity: 0.72;
}

/* 동의 체크 행 — 소프트 면 카드 */
.confirm-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 0.9rem 1rem;
  background: var(--surface-info);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: background 0.2s ease;
}

.confirm-label:hover {
  background: var(--surface-info-hover);
}

.confirm-label input {
  margin-top: 0.15rem;
  width: 18px;
  height: 18px;
  accent-color: var(--point); /* 위험 동의라 point */
  flex-shrink: 0;
}

.confirm-text {
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.5;
}

/* ───────────────────── 주의 · 상태 메시지 ─────────────────────
   팔레트에 노랑이 없다 — 주의는 중립 소프트 면 + point 로만 강조한다. */

.warning-box {
  background: var(--surface-subtle);
  border-radius: var(--radius-card);
  padding: 1rem 1.15rem;
  margin-bottom: var(--space-md);
}

.warning-title {
  font-weight: 700;
  color: var(--point); /* 위험 강조 = point */
  margin-bottom: var(--space-2xs);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.925rem;
}

.warning-list {
  font-size: 0.875rem;
  color: var(--text-info);
  padding-left: 1.35rem;
  line-height: 1.7;
}

.message {
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-card);
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  display: none;
}

.message.success {
  display: block;
  background: var(--success-surface);
  color: var(--success-foreground);
}

/* 오류 메시지 = point 계열(연한 point 면 + point 글자) */
.message.error {
  display: block;
  background: color-mix(in srgb, var(--point) 12%, transparent);
  color: var(--point);
}

.countdown {
  font-size: 0.85rem;
  color: var(--text-info);
  margin-top: var(--space-2xs);
  text-align: center;
}

/* ───────────────────────── 로딩(인라인 기본형) ───────────────────────── */

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-2xs);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ───────────────────────── 접근성 ───────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}