:root {
    color-scheme: light dark;
    /* 링크 색. 밝은/어두운 배경 둘 다에서 읽히도록 따로 잡는다 — 지정을 안 하면
       브라우저 기본 파란 밑줄이 나오는데, 이건 "일부러 수수하게 뒀다"는 의도가
       아니라 그냥 안 정한 값이다(Vue 쪽 style.css는 이미 이렇게 따로 잡아 뒀다). */
    --link: #2563eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* blue-600은 검은 배경에서 대비가 부족하다(WCAG AA 기준 미달) — 더 밝은
           톤으로 바꾼다. */
        --link: #93c5fd;
    }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
    line-height: 1.6;
}

h1 {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}

.sub {
    margin-top: 0;
    /* opacity가 아니라 color-mix를 쓴다 — 예전에 opacity: 0.7이었는데, opacity는
       자손 전체를 배경과 함께 합성해 버려서 안의 링크 색까지 곱으로 흐려진다.
       실제로 이 문제가 났었다: login.html의 "회원가입" 링크가 opacity 아래
       있으니 --link(#2563eb, 흰 배경 대비 5.17:1)가 3.03:1까지 떨어져 WCAG AA
       (4.5:1)를 못 맞췄다 — 이 저장소가 Vue 쪽(.keywords li.off, 커밋 9df579d)
       에서 이미 한 번 겪은 것과 같은 함정이다. color로 직접 지정하면 이 규칙이
       적용된 요소 자신의 텍스트만 흐려지고, 자기 color를 따로 지정한 자손
       (여기서는 링크)은 그 색 그대로 그려진다.
     */
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: 0.9rem;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    font-size: 0.9rem;
}

.topnav .spacer {
    flex: 1;
}

.topnav .who {
    font-weight: 600;
    margin-right: 0.75rem;
}

a {
    color: var(--link);
    /* 밑줄을 기본으로 남긴다 — 색만으로 "이게 링크다"를 알려주면 WCAG 1.4.1에
       걸린다(실제로 한 번 걸렸다: .sub 안 "회원가입" 링크와 주변의 흐려진
       본문 글자색 사이 대비가 3:1에 못 미쳤다). login-verify.html의
       "인증번호 다시 받기"처럼 문단 안에 혼자 떨어진 링크·버튼은 위치만으로는
       구분이 안 되므로 밑줄이 유일한 비색상 단서다. */
    text-decoration: underline;
}

/* topnav 링크만 예외다 — nav라는 위치 자체가 이미 "이건 메뉴다"라는 단서라
   밑줄 없이도 G182를 만족한다. 그 자리에서만 더 깔끔하게 보이도록 뺀다.

   단, "로그아웃"(button.link)은 이 논거가 그대로 적용되지 않는다 — 바로
   옆에 붙는 .who(닉네임)가 링크가 아닌 일반 텍스트라, 다크 모드에서
   실측하면 둘 사이 대비가 1.80:1로 3:1에 못 미친다. 거길 실제로 구해
   주는 건 위치가 아니라 .who의 font-weight: 600 vs button.link의
   font-weight: 400 — 글자 굵기 차이다. 나중에 .who의 font-weight를
   손대면 이 자리의 유일한 비색상 단서가 조용히 사라지니 주의. */
.topnav a {
    text-decoration: none;
}

.topnav a:hover {
    text-decoration: underline;
}

.inline {
    display: inline;
}

.field {
    margin-bottom: 1rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

textarea {
    min-height: 9rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

button {
    font: inherit;
    font-weight: 600;
    padding: 0.55rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background: #1d4ed8;
}

button.link {
    /* a와 같은 모양으로 맞춘다(색·밑줄 규칙 전부) — 실제 쓰이는 두 곳 중
       하나(login-verify.html의 "인증번호 다시 받기")는 topnav가 아니라 폼
       안에 혼자 있는 버튼이라, 밑줄을 기본으로 남겨 둬야 a와 같은 이유로
       색만으로 구분되는 문제를 피한다. topnav 안(로그아웃)은 아래 .topnav
       예외로 밑줄을 뺀다. */
    background: none;
    color: var(--link);
    padding: 0;
    font-weight: 400;
    text-decoration: underline;
}

button.link:hover {
    background: none;
}

.topnav button.link {
    text-decoration: none;
}

.topnav button.link:hover {
    text-decoration: underline;
}

.error {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.alert {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #dc2626;
    margin-bottom: 1.5rem;
}

.notice {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: #15803d;
    margin-bottom: 1.5rem;
}

.stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.stats div {
    font-size: 0.9rem;
}

.stats span {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
}

.narrow {
    max-width: 22rem;
}