@charset "UTF-8";

/* ==============================================
   Login Page (ログインページ)
=============================================== */

.page-login {
    display: flex;
    justify-content: center;
    align-items: center;
    /* ヘッダー・フッターを除いた領域の最低高さを確保しつつ、上下に余白 */
    min-height: calc(100vh - 80px - 200px); 
    padding-block: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 393)), 80px);
}

.login-container {
    width: 100%;
    max-width: 480px; /* PC版のパネル最大幅 */
    padding-inline: 16px;
    margin: 0 auto;
}

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-title {
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.login-subtitle {
    color: var(--color-primary);
    line-height: 1.4;
}

.login-panel {
    background-color: var(--color-white);
    padding: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 393)), 32px) 24px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}

.login-form-group {
    margin-bottom: 24px;
}

.login-form-group:last-of-type {
    margin-bottom: 32px;
}

.login-label {
    display: block;
    color: var(--color-primary);
    margin-bottom: 8px;
}

/* 入力フィールド */
.login-input {
    width: 100%;
    padding: 16px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-white);
    font-size: 16px; /* スマホでのズーム防止のため16px推奨 */
    font-weight: 500;
    color: var(--color-text-base);
    outline: none;
    transition: border-color 0.2s;
}

.login-input:focus {
    border-color: var(--color-primary);
}

.login-input::placeholder {
    color: var(--color-border);
}

.login-actions {
    text-align: center;
}

/* ログインボタン（幅100%） */
.login-actions .c-button {
    width: 100%;
    padding-block: 16px;
    margin-bottom: 16px;
}

.login-link {
    color: var(--color-link);
    text-decoration: underline;
    font-weight: 500;
}

.login-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* 新規登録エリア */
.login-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
    text-align: center;
}

/* ==============================================
   追加: ログイン - エラーステート
=============================================== */
.login-global-error {
    background-color: var(--color-bg-error); /* rose-100 に近い背景色 */
    border: 2px solid var(--color-text-error); /* orange-600 */
    color: var(--color-text-error);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 24px;
    border-radius: 4px;
    margin-bottom: 24px;
}

/* 入力欄自体のエラー時ハイライト（必要に応じて） */
.login-input.is-error {
    background-color: var(--color-bg-error);
    border-color: var(--color-text-error);
}