/**
 * =========================================================
 * Ath-ring ログイン画面専用CSS
 * =========================================================
 *
 * 対象画面：
 * security/login.html
 *
 * 【目的】
 * Ath-ringへログインするための専用画面を構成する。
 *
 * 【設計方針】
 * ・クラブの活動風景を背景として使用する
 * ・ログインフォームの可読性を優先する
 * ・PC / スマートフォン双方へ対応する
 * ・認証画面のためcommon-layoutには依存しない
 */


/* =========================================================
   基本設定
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    min-height: 100%;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
}


/* =========================================================
   ログイン画面背景
   ========================================================= */

.login-page {
    position: relative;

    min-height: 100vh;

    background-image:
        url("/images/login-background.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;
}


/*
 * 背景写真の上へ暗い半透明レイヤーを配置する。
 *
 * 写真の明暗に左右されず、
 * ログインカードを見やすくする。
 */
.login-background-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(20, 35, 25, 0.48);

    z-index: 0;
}


/* =========================================================
   メイン領域
   ========================================================= */

.login-main {
    position: relative;

    z-index: 1;

    display: flex;

    justify-content: center;
    align-items: center;

    min-height: 100vh;

    padding: 32px 20px;
}


/* =========================================================
   ログインカード
   ========================================================= */

.login-card {
    width: 100%;

    max-width: 430px;

    padding: 36px 38px 30px;

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 12px 36px
        rgba(0, 0, 0, 0.22);
}


/* =========================================================
   タイトル
   ========================================================= */

.login-header {
    margin-bottom: 28px;

    text-align: center;
}


.login-logo {
    margin-bottom: 4px;

    font-size: 2.6rem;
}


.login-header h1 {
    margin:
        0 0 8px;

    color: #31623d;

    font-size: 2rem;
    font-weight: 700;

    letter-spacing: 0.03em;
}


.login-catch-copy {
    margin:
        0 0 8px;

    color: #48624e;

    font-size: 0.92rem;
    font-weight: 600;
}


.login-club-name {
    margin: 0;

    color: #666666;

    font-size: 0.9rem;

    line-height: 1.5;
}


/* =========================================================
   メッセージ
   ========================================================= */

.login-message {
    margin-bottom: 20px;

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 0.9rem;

    line-height: 1.6;
}


/*
 * 認証エラー。
 */
.login-message--error {
    border:
        1px solid #e8b6b6;

    background:
        #fff2f2;

    color:
        #a02c2c;
}


/*
 * ログアウト・パスワード変更完了。
 */
.login-message--success {
    border:
        1px solid #b9d8bd;

    background:
        #f1f8f2;

    color:
        #35633b;
}


/* =========================================================
   ログインフォーム
   ========================================================= */

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


.login-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #333333;

    font-size: 0.92rem;
    font-weight: 600;
}


.login-form-group input {
    display: block;

    width: 100%;

    padding:
        12px 14px;

    border:
        1px solid #cbd5cc;

    border-radius: 8px;

    background: #ffffff;

    color: #333333;

    font: inherit;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.login-form-group input:focus {
    border-color:
        #60956b;

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(65, 125, 77, 0.13);
}


.login-form-group input::placeholder {
    color: #aaaaaa;
}


/* =========================================================
   ログインボタン
   ========================================================= */

.login-button-area {
    margin-top: 28px;
}


.login-button {
    width: 100%;

    min-height: 48px;

    padding:
        11px 20px;

    border: none;

    border-radius: 9px;

    background:
        #397447;

    color:
        #ffffff;

    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.05s ease;
}


.login-button:hover {
    background:
        #2f653b;
}


.login-button:active {
    transform:
        translateY(1px);
}


/* =========================================================
   フッター
   ========================================================= */

.login-footer {
    margin-top: 26px;

    padding-top: 18px;

    border-top:
        1px solid #e5e9e5;

    text-align: center;
}


.login-footer p {
    margin: 0;

    color: #888888;

    font-size: 0.78rem;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 600px) {

    /*
     * iOS等でbackground-attachment: fixedが
     * 不安定になる場合を考慮し解除する。
     */
    .login-page {
        background-attachment: scroll;
    }


    .login-main {
        padding:
            20px 14px;
    }


    .login-card {
        max-width: 100%;

        padding:
            28px 22px 24px;

        border-radius: 14px;
    }


    .login-logo {
        font-size: 2.3rem;
    }


    .login-header h1 {
        font-size: 1.8rem;
    }


    .login-catch-copy {
        font-size: 0.86rem;
    }


    .login-club-name {
        font-size: 0.84rem;
    }

}