/*
 * hybrid-ui ログインcompositionの配置だけを担当するconsumer CSS。
 * package dev/catalog/public/catalog.css の .hyb-login-composition 見本と
 * 同じ構成を再現します（上段=フォーム548fr+広告732fr、下段=お知らせ、最下段=フッター）。
 * component内部の見た目は package CSS が持つため、ここでは配置と背景のみ書きます。
 * 色は直接HEXを書かず --hyb-* のデザイントークンを使います。
 */

/* この画面は旧layoutを使わず body 既定余白が残るため、ここだけで解除します。 */
body {
    margin: 0;
}

.hybrid-admin-login {
    color: var(--hyb-color-text-primary);
    background: var(--hyb-color-surface-active);
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 1280px時: 左548px・右732px相当の比率で白背景の帯にします。 */
.hybrid-admin-login__top {
    display: grid;
    grid-template-columns: 548fr 732fr;
    background: var(--hyb-color-surface-background);
    align-items: center;
}

.hybrid-admin-login__credentials {
    padding: 40px 24px;
    min-width: 0;
}

/*
 * フォームの実寸は420px。画面が狭い時はそのまま縮みます。
 * Figmaではロゴ+フォームが左枠の中央に置かれますが、実画面にはFigmaに無い
 * Googleログインが下へ続くため、その高さ分（約80px）を上marginとして積み、
 * ロゴy162・フォームy218相当の見た目位置へ寄せます。mobileでは解除します。
 */
.hybrid-admin-login__form-group {
    width: 420px;
    max-width: 100%;
    margin: 80px auto 0;
}

.hybrid-ui .hybrid-admin-login__logo {
    display: block;
    width: 120px;
    margin: 0 auto 24px;
}

.hybrid-admin-login__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 23px;
    border: 1px solid var(--hyb-color-border-default);
    border-radius: 20px;
    box-shadow: var(--hyb-shadow-md);
    background: var(--hyb-color-surface-background);
}

.hybrid-ui .hybrid-admin-login__form-heading .hyb-section-header__title {
    font-size: 14px;
    line-height: 20px;
}

.hybrid-admin-login__form .hyb-button {
    width: 100%;
}

/* ログインのM入力は14px文字・40px高。共通フォームの16px既定値は維持します。 */
.hybrid-ui .hybrid-admin-login__form .hyb-field-label {
    line-height: 20px;
}
.hybrid-ui .hybrid-admin-login__form .hyb-form-control {
    font-size: var(--hyb-font-size-body-sm);
    line-height: 20px;
    padding: var(--hyb-spacing-8);
}
.hybrid-ui .hybrid-admin-login__form .hyb-form-control::placeholder {
    color: var(--hyb-color-text-disabled);
    opacity: 1;
}

/*
 * Figmaのラベルには必須記号が無いため、この画面だけ見た目の星を隠します。
 * inputのrequired属性と読み上げ用の（必須）テキストは残るので、
 * ネイティブ検証とスクリーンリーダーへの伝わり方は変わりません。
 */
.hybrid-ui .hybrid-admin-login__form .hyb-field-label__required {
    display: none;
}

/* 旧 .error.tal 相当: 専用layoutでは旧CSSを読まないため可視のエラー表示を持たせます。 */
.hybrid-admin-login__error {
    margin: 0;
    color: var(--hyb-color-text-error, #d70022);
    font-size: var(--hyb-font-size-body-sm, 14px);
    line-height: 20px;
    text-align: left;
}

/* 通常広告は右枠いっぱいに敷くため、外側余白は付けません。 */
.hybrid-admin-login__promotion {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.hybrid-admin-login__promotion .hyb-promotion-banner {
    max-width: 100%;
}

/*
 * メンテナンス告知は右枠の専用背景へ告知カードだけを重ねます。
 * 背景は枠全体を覆い、カードは中央へ置いて内容に応じて縦へ伸ばします。
 * カード自体の見た目（白・最大600px等）はpackage CSSが持つため、
 * consumer側は配置と背景だけを担当します。
 */
.hybrid-admin-login__maintenance {
    position: relative;
    align-self: stretch;
    display: flex;
    /* 告知が複数ある場合は専用背景の上へカードを縦積みします */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 664px;
    padding: 40px 24px;
    box-sizing: border-box;
}
/* 完成背景は装飾です。枠いっぱいへ伸ばし、カードが縦に伸びても枠を覆い続けます。 */
.hybrid-admin-login__maintenance-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* absoluteの背景より手前へカードを出します。 */
.hybrid-ui .hybrid-admin-login__maintenance-card {
    position: relative;
}

.hybrid-admin-login__news-area {
    padding: 40px 5%;
}

/*
 * Figmaのお知らせ枠(2327:885)どおり、見出し込みの白枠はborder-boxで
 * 高さ1028pxに固定し、一覧は枠内を縦スクロールさせます。
 * 横方向はスクロールさせず、はみ出した分は見せません。
 */
.hybrid-admin-login__news {
    padding: 24px 40px;
    background: var(--hyb-color-surface-background);
    box-sizing: border-box;
    height: 1028px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* スクロール領域をTabでフォーカスしたとき、libraryと同じfocus ringを表示します。 */
.hybrid-admin-login__news:focus-visible {
    outline: 2px solid var(--hyb-color-border-active);
    outline-offset: var(--hyb-spacing-2);
}

/*
 * 旧default.cssの `li{list-style-type:none}` 相当を、この画面のお知らせ内だけへ戻します。
 * 本文HTMLがliへinline指定する square/disc はstylesheetより優先されるため維持されます。
 */
.hybrid-admin-login__news li {
    list-style-type: none;
}

/* フッターは中央寄せの縦積み（テキストリンク→著作権の順）。 */
.hybrid-admin-login__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 40px;
    text-align: center;
    margin-top: auto;
}
.hybrid-admin-login__footer .hyb-text-link {
    font-size: 12px;
    line-height: 16px;
    text-decoration: underline;
}
.hybrid-ui .hybrid-admin-login__footer .hyb-copyright-notice {
    padding: 0;
    color: var(--hyb-color-text-primary);
}

@media (max-width: 1024px) {
    .hybrid-admin-login__top {
        grid-template-columns: 1fr;
    }
    .hybrid-admin-login__credentials {
        padding: 48px 24px;
    }
    /* 縦積みではPC向けの位置調整を解除し、上から自然に並べます。 */
    .hybrid-admin-login__form-group {
        margin-top: 0;
    }
    /* 告知枠も固定の高さを持たず、カードの高さに合わせます。 */
    .hybrid-admin-login__maintenance {
        min-height: 0;
        padding: 24px 16px;
    }
}

@media (max-width: 768px) {
    .hybrid-admin-login__news-area {
        padding: 24px 16px;
    }
    .hybrid-admin-login__news {
        padding: 24px 16px;
        /* mobileでは内容が少ない場合に枠を縮めますが、上限1028pxで伸び続けはしません */
        height: auto;
        max-height: 1028px;
    }
    .hybrid-admin-login__form {
        padding: 24px 16px;
    }
}