/* login.css — 로그인 한 장.
 *
 * 로드 순서: tokens.css → base.css → **pages/login.css**
 * ⚠ 이 화면만 `layout.css` · `components.css` 를 안 얹는다. 셸이 없어서다.
 *   그래서 카드·버튼 모양을 여기서 한 번 더 적는다. 다른 페이지가 쓰는
 *   `.card` · `.btn` 과 **모양은 같고 이름만 다르다.**
 *   → components.css 승격 목록에 이 화면은 넣지 않는다 (인계-메모).
 *
 * ★ 색 리터럴이 한 개도 없다. 전부 var(--…) 다 (tokens.css).
 *
 * ⚠⚠ **2026-08-15 에 규칙이 바뀌었다.** 전에는 「채널 브랜드 색이 없다」였다 —
 *   셋 다 흰 버튼에 `currentColor` 아이콘이었다. 팀장이 배포 화면을 보고
 *   뒤집었다 (`docs/notes/ACCOUNT-SPLIT.md` 는 아니고 `DESIGN-SYSTEM.md` 12장).
 *
 *     ① 남의 로고다. **우리가 색을 정할 권한이 없다**
 *     ② 사장님은 **색으로 찾는다** — 노랑=카카오, 초록=네이버
 *
 *   ★ 브랜드 색은 이 파일의 `.way-kakao`·`.way-naver`·`.way-google`
 *     **세 곳에서만** 쓴다. 값은 tokens.css 의 `--brand-*` 에 있고,
 *     거기에 초록 금지(금지 6)와 왜 안 부딪히는지 적혀 있다.
 *     `tests/unit/test_login_contract.py` 가 쓰는 곳을 세어서 막는다.
 */

/* ══ 바탕 ══════════════════════════════════════════════════════
   ⚠ 레몬(--lemon)을 대면적으로 깔지 않는다 (DESIGN-SYSTEM 1장).
     위쪽에서 아주 옅게 번지는 정도만 둔다. */
.login-body {
  min-height: 100vh;
  min-height: 100dvh;
  /* ★ 세로 정렬·여백은 `base.css` 의 `.shell-less` 가 한다 (`[107]`⑪).
       ⚠ 여기 `display:flex` 를 되살리지 않는다 — 푸터가 카드 옆에 붙는다. */
  background:
    radial-gradient(120% 60% at 50% -10%, var(--lemon-soft), transparent 62%),
    var(--bg);
}

.login-wrap { width: 100%; max-width: 420px; }


/* ══ 카드 ══════════════════════════════════════════════════════
   글래스 스펙 그대로 (DESIGN-SYSTEM 3장). */
.login-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 40px 32px 32px;
  text-align: center;
}

/* ⚠ 로고에 노란 글자가 있다. 흰 패널 위에만 올린다 (DESIGN-SYSTEM 4장). */
.login-logo {
  background: var(--white);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
}
.login-logo img { width: 150px; height: 60px; object-fit: cover; display: block; }

.login-tagline {
  margin-top: 18px;
  font-size: 15px;
  color: var(--sub);
  line-height: 1.6;
}


/* ══ 실패·안내 문구 ════════════════════════════════════════════
   ★ 빨강은 **실패에만** 쓴다 (tokens.css). 로그아웃 안내는 회색이다. */
.login-note {
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
}
.login-note.bad { background: var(--down-bg); color: var(--down-text); }
.login-note.calm { background: var(--icon-bg); color: var(--sub-strong); }

/* 「지난번엔 카카오로 로그인하셨어요」
   ★ 실패가 아니다. 빨강(--down-*)을 쓰지 않는다 — 빨강은 하락·실패 전용이다.
   ⚠ 이 줄이 뜨는 이유는 **다른 방법을 누르면 계정이 갈리기** 때문이다
     (`app/data/last_way.py` 머리말). 그래서 눈에는 띄어야 한다. */
.login-last {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--lemon-soft);
  color: var(--deep-amber);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}


/* ══ 자동 로그인 ═══════════════════════════════════════════════ */
.login-ways { margin-top: 22px; }

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--sub);
  cursor: pointer;
  user-select: none;
}
.login-remember input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--lemon);
  flex: none;
}


/* ══ 로그인 버튼 셋 ════════════════════════════════════════════
   ⚠ 셋이 색으로 갈리지 않는다. **아이콘과 이름으로** 갈린다. */
.way {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 손가락으로 누르는 자리는 44px 이상 (DESIGN-SYSTEM 9장 반응형) */
  min-height: 52px;
  padding: 13px 18px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.way:last-child { margin-bottom: 0; }

.way-icon { display: flex; flex: none; color: var(--ink); }
.way-label { flex: 1; }

.way:hover:not([disabled]) {
  transform: scale(1.02);
  box-shadow: var(--glass-shadow);
}


/* ══ 공급자 색 ═════════════════════════════════════════════════
   ★★ 브랜드 색을 쓰는 곳은 **이 세 규칙뿐**이다. 값은 tokens.css.
   ⚠ 아이콘 색은 따로 안 준다 — `currentColor` 라 글자색을 따라간다.
     (구글 G 만 예외. 넉 색이 규격이라 SVG 안에서 직접 받는다) */
.way-kakao {
  background: var(--brand-kakao);
  border-color: transparent;
  color: var(--brand-kakao-ink);
}
.way-naver {
  background: var(--brand-naver);
  border-color: transparent;
  color: var(--brand-naver-ink);
}
/* ⚠ 구글은 **칠하지 않는다.** 가이드가 밝은 테마를 흰 배경 + 회색 테두리로
     정해 두었다. 파랑으로 칠하면 가이드 위반이다. */
.way-google {
  background: var(--brand-google-bg);
  border-color: var(--brand-google-line);
  color: var(--brand-google-ink);
}
.way-kakao .way-icon,
.way-naver .way-icon { color: inherit; }


/* ══ 「지난번에 쓴 것」 강조 ════════════════════════════════════
   ★★ [32] 에서 만든 강조다. 전에는 **레몬→오렌지 그라데이션**이었는데,
     버튼에 공급자 색이 생기면서 **배경을 덮어쓸 수 없게** 됐다 —
     덮으면 노란 버튼이 카카오가 아니게 된다.

   → 배경을 안 건드리고 **테두리 고리**로 강조한다.
     ⚠ 흰 틈(--white)을 한 겹 둔 것은 카카오 노랑 위에서 오렌지 고리가
       묻히기 때문이다. 세 배경(노랑·초록·흰색) 위에서 다 보여야 한다. */
.way-primary {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--orange);
}
.way-primary:hover:not([disabled]) {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--orange),
              var(--glass-hover);
}

/* ⚠ 흐리게만 하지 않는다. `disabled` 라 키보드로도 안 눌린다. */
.way[disabled] {
  background: var(--icon-bg);
  border-color: var(--line);
  color: var(--sub);
  cursor: not-allowed;
  box-shadow: none;
}
.way[disabled] .way-icon { color: var(--sub); }
/* ⚠⚠ 구글 G 는 넉 색이 **SVG 안에 박혀** 있어서 `color` 로 안 죽는다.
     그대로 두면 **꺼진 버튼에 쨍한 로고**가 남아 눌릴 것처럼 보인다.
     → 회색으로 빼고 흐리게 한다. 셋 다 같은 규칙이라 `.way-google` 로
       좁히지 않는다 — 좁히면 넷째 공급자가 왔을 때 또 빠진다. */
.way[disabled] .way-icon svg { filter: grayscale(1); opacity: 0.55; }

/* 「지난번」 배지 — ★ 다른 방법을 누르면 **계정이 갈린다**.
   ⚠ 「준비 중」과 같은 자리를 쓰지만 뜻이 반대다. 흐린 회색이 아니라
     **눈에 띄는 웜톤**이다 (개선 제안 인셋과 같은 색 — DESIGN-SYSTEM 6장). */
.way-last {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lemon-soft);
  color: var(--deep-amber);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
/* ⚠⚠ 배경이 셋 다 다르다. 연옐로 배지는 **카카오 노랑 위에서 묻는다**
     (#FFF8E1 과 #FEE500 은 둘 다 노랑이다). 그 둘만 흰 배지로 뒤집는다.
     구글은 흰 버튼이라 반대로 연옐로가 맞다. */
.way-kakao .way-last,
.way-naver .way-last { background: var(--white); }

/* 「준비 중」 배지 — 상태 대기 칩 (DESIGN-SYSTEM 6장) */
.way-off {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--white);
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


/* ══ 아래 작은 글씨 ════════════════════════════════════════════ */
.login-signup {
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--sub);
  line-height: 1.6;
}


/* ══ 반응형 ════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .login-card { padding: 32px 20px 26px; }
  .login-logo img { width: 128px; height: 52px; }
  .login-tagline { font-size: 14px; }
  .way { font-size: 14.5px; padding: 13px 16px; }
}