@charset "utf-8";

/* ==============================
   login
============================== */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--size-site-header-height));
    padding: var(--size-2xl) var(--size-4xs);
}
.login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    padding: var(--size-2xl) var(--size-xl);
    background-color: var(--color-site-bg-soft);
    border: 1px solid var(--color-site-line);
    border-radius: var(--radius-m);
}
.login-brand {
    display: flex;
    justify-content: center;
}
.login-brand img {
    height: var(--size-2xs);
    width: auto;
}
.login-heading {
    margin: var(--size-l) 0 0;
    font-family: var(--font-bold-point);
    font-size: var(--font-xl);
    line-height: var(--line-flat);
    color: var(--color-text);
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-2xs);
    width: 100%;
    margin-top: var(--size-xl);
}
.login-field {
    display: flex;
    flex-direction: column;
    gap: var(--size-7xs);
}
.login-label {
    font-family: var(--font-regular);
    font-size: var(--font-3xs);
    color: var(--color-text-sub);
}
.login-input {
    width: 100%;
    padding: var(--size-5xs) var(--size-4xs);
    background-color: transparent;
    border: 1px solid var(--color-site-line);
    border-radius: var(--radius-s);
    font-family: var(--font-regular);
    font-size: var(--font-s);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.15s;
}
.login-input:focus {
    border-color: var(--color-text-sub);
}
.login-message {
    min-height: var(--size-4xs);
    font-family: var(--font-light);
    font-size: var(--font-3xs);
    line-height: var(--line-normal);
    color: transparent;
}
.login-message.is-error {
    color: #c0392b;
}
.login-submit {
    width: 100%;
    padding: var(--size-5xs) 0;
    margin-top: var(--size-7xs);
    background-color: var(--color-text);
    border: none;
    border-radius: var(--radius-s);
    font-family: var(--font-regular);
    font-size: var(--font-s);
    color: var(--color-site-bg-soft);
    cursor: pointer;
    transition: opacity 0.15s;
}
.login-submit:hover {
    opacity: 0.8;
}
.login-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}