/* 로그인 입구 화면 스타일. 서비스 화면(packages/web/src/styles.css)의 토큰 · 로고 · 버튼 규칙과 시안 로그인 화면(src/app.html '로그인')에서 쓰는 것만 옮겼다.
   글꼴: Pretendard(Copyright (c) 2021 Kil Hyung-jin, SIL Open Font License 1.1). 서비스 화면 글꼴에서 이 화면의 글자만 남긴 woff2 세 벌(login/subset-fonts.py). */
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Pretendard-Regular.login.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Pretendard-SemiBold.login.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Pretendard-Bold.login.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --palette-white: #FFFFFF; --palette-black: #000000;
  --palette-gray-50: #F9FAFB; --palette-gray-300: #D1D6DB; --palette-gray-600: #626E7C; --palette-gray-800: #333D4B; --palette-gray-900: #191F28;
  --palette-blue-500: #3182F6;

  --color-bg-brand-solid: var(--palette-black);
  --color-bg-layer-default: var(--palette-white);
  --color-bg-layer-default-hover: var(--palette-gray-50);
  --color-fg-neutral: var(--palette-gray-900);
  --color-fg-neutral-body: var(--palette-gray-800);
  --color-fg-neutral-subtle: var(--palette-gray-600);
  --color-fg-on-solid: var(--palette-white);
  --color-stroke-neutral-strong: var(--palette-gray-300);
  --color-stroke-focus: var(--palette-blue-500);

  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-size-t4: 14px; --font-size-t4_5: 15px; --font-size-t5_5: 17px; --font-size-t6: 18px; --font-size-t10: 26px;
  --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700;
  --radius-r1_5: 6px; --radius-r3_5: 14px;
  --size-control-xl: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--color-bg-layer-default); }
body { margin: 0; color: var(--color-fg-neutral-body); font-family: var(--font-family-base); font-size: var(--font-size-t4_5); line-height: 1.6; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
h1, p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-stroke-focus); outline-offset: 2px; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: var(--font-weight-bold); font-size: var(--font-size-t6); color: var(--color-fg-neutral); letter-spacing: -0.03em; }
.logo-mark { width: 30px; height: 30px; border-radius: var(--radius-r1_5); background: var(--color-bg-brand-solid); color: var(--color-fg-on-solid); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.logo-mark svg { display: block; width: 100%; height: 100%; }
.logo-text { line-height: 30px; }
.brand-light { color: var(--color-fg-neutral-subtle); font-weight: var(--font-weight-regular); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-r3_5); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s, transform 0.1s; }
.btn:active { transform: scale(0.97); }
.btn--lg { height: var(--size-control-xl); padding: 0 22px; font-size: var(--font-size-t5_5); }
.btn--line { border: 1px solid var(--color-stroke-neutral-strong); background: var(--color-bg-layer-default); color: var(--color-fg-neutral-body); }
.btn--line:hover { background: var(--color-bg-layer-default-hover); }
.google-mark { width: 20px; height: 20px; flex-shrink: 0; }

.login { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.login-top { padding: 20px 24px; }
.login-main { flex: 1; display: grid; place-items: center; padding: 24px 24px 96px; }
.login-card { display: flex; flex-direction: column; gap: 20px; width: min(100%, 420px); }
.login-title { font-size: var(--font-size-t10); font-weight: var(--font-weight-bold); letter-spacing: -0.03em; color: var(--color-fg-neutral); text-align: center; }
.login-desc { margin-top: -12px; color: var(--color-fg-neutral-subtle); text-align: center; }
.login-card .btn--lg { width: 100%; margin-top: 8px; }
.login-note { color: var(--color-fg-neutral-subtle); font-size: var(--font-size-t4); text-align: center; }
@media (max-width: 640px) { .login-top { padding: 16px; } .login-main { padding: 24px 16px 72px; } }