/* 입력 양식과 오류 안내. 여러 화면이 함께 쓴다.
   로그인·회원가입·계정 화면과, 안내장을 만드는 화면이 이것을 읽는다.
   처음에는 auth.css 였는데, 이름이 로그인 전용처럼 보여서 만드는 화면이
   같은 모양을 쓰면서도 이 파일을 읽어도 되는지 판단하기 어려웠다. */

/* --- 입력 양식 --- */

.form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field label {
    font-size: 13px;
    color: var(--sub);
}

/* 글자 크기를 16px 아래로 내리지 않는다. 그보다 작으면 아이폰이 입력칸을
   누를 때 화면을 저절로 확대하고, 확대된 채로 남아서 다음 칸이 가려진다. */
.field input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--fg);
    font: inherit;
    font-size: 16px;
}

.field input:focus {
    outline: 2px solid var(--key);
    outline-offset: 1px;
    border-color: var(--key);
}

.field input:disabled { opacity: .55; }

/* 입력 칸 아래에 붙는 짧은 설명. 비밀번호 길이 같은 것을 미리 알려 준다.
   눌러 보고 나서 오류로 알게 되면 처음부터 다시 적게 된다. */
.field .hint {
    font-size: 12.5px;
    color: var(--muted);
}

/* --- 오류 안내 --- */

/* 자리를 미리 잡지 않는다. 빈 상자를 띄워 두면 무엇이 잘못됐는지 모르는
   채로 빈칸부터 보게 된다. 내용이 있을 때만 나타난다. */
.form-error {
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 11px 13px;
    color: var(--danger);
    font-size: 13.5px;
}

/* --- 화면 아래 안내 --- */

.form-note {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
}

.form-note a { color: var(--key); }

/* --- 계정 화면의 항목 --- */

/* 항목이 하나뿐이지만 줄 단위로 잡아 둔다. 나중에 가입한 날짜나 이용권을
   덧붙일 때 모양이 흐트러지지 않는다. */
.account-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 4px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.account-label {
    font-size: 13px;
    color: var(--muted);
    min-width: 64px;
}

/* 긴 이메일 주소가 화면 밖으로 나가지 않도록 필요한 자리에서 끊는다. */
.account-value {
    font-size: 14.5px;
    color: var(--fg);
    word-break: break-all;
}