/*
  로그인 · 가입 — Auth.dc.html 이식.

  ★ 시안(design.md §10)이 "인라인 스타일 + data-id + 평면 핸들러"를 구현 규약으로 정해뒀다.
    그래서 여기에는 인라인으로 쓸 수 없는 것만 둔다 —
    의사클래스(:focus ::placeholder :hover) · 키프레임 · 문서 배경.

  ★ 이 화면은 데스크톱·모바일이 같은 구조다(PROMPT-Design-Auth.md §5).
    브레이크포인트 분기가 없어서 [data-r] 레이아웃 규칙도 없다.
*/

html, body { margin: 0; min-height: 100%; background: #0c0d0f; }

body {
    font-family: Pretendard, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #e6e8ea;
    -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; font-variant-numeric: tabular-nums; }
input::placeholder { color: #5b6168; }
* { box-sizing: border-box; }

a { color: #b9bec4; text-decoration: none; }
a:hover { color: #e6e8ea; }

/* ── 입력 ───────────────────────────────────────────────────────────────
   테두리 색은 상태에 따라 인라인으로 덮어쓴다(data-state). 여기 :focus 규칙은
   그 색을 이기면 안 되므로, 상태가 붙은 칸은 아래에서 따로 받는다. */
[data-a~="input"]:focus {
    border-color: #8d939a;
    background: #14171a;
}

[data-a~="input"][data-state="bad"] { border-color: #f08a7f; }
[data-a~="input"][data-state="bad"]:focus { border-color: #f08a7f; background: #14171a; }
[data-a~="input"][data-state="ok"] { border-color: #2f6b4c; }
[data-a~="input"][data-state="ok"]:focus { border-color: #8d939a; background: #14171a; }

/* 추천코드 = 추천인 아이디(§19.43) — 대문자 변환 없음 · 자간 기본.
   ★ 칸의 data-a 가 "input code" 라 완전일치([data-a="code"])로는 안 걸렸다 — 토큰 일치(~=)로 받는다 */
[data-a~="code"] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
}

/* ── 제출 버튼 ──────────────────────────────────────────────────────────
   비활성은 JS가 disabled로 만든다. JS가 없으면 항상 눌린다 — 서버가 검증한다. */
[data-a="submit"] { background: #e6e8ea; color: #0c0d0f; cursor: pointer; }
[data-a="submit"]:disabled { background: #2a2e33; color: #8d939a; cursor: default; }

/* ── 전환 링크 ──────────────────────────────────────────────────────────
   "버튼이 아니라 링크 한 줄로. 같은 무게로 보이면 안 된다"(PROMPT §5) */
[data-a="switch"] a {
    color: #e6e8ea;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #4d5359;
    text-underline-offset: 3px;
}

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

[data-a="spinner"] {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #5b6168;
    border-top-color: #e6e8ea;
    animation: auth-spin .8s linear infinite;
    display: inline-block;
}