/* エラー画面（Views/Shared/Error400〜500.cshtml）専用の見た目（#1300）。

   元は site-shell.css の .rv-errorpage だが、site-shell.css を読むのは公開レイアウト（_Layout）だけで、
   ログイン中のレイアウト（Lawyer / OtherLawyer / Admin / TSK / Biz）では素の HTML が左上に張り付いていた。
   site-shell.css をログイン中レイアウトへ読ませる案は不採用：.rv-wrap や .rv-foot* をログイン中の画面も
   別定義で使っていて、公開側の定義に上書きされる。styles.css へ足す案も不採用：styles.min.css は手で再生成する
   1 行ファイルで、追加のたびに揃え直しが要る。

   そこで必要な規則だけを .rv-errorpage 配下にスコープして切り出し、各エラー画面が @section CSS で読む。

   色は code-conventions 第9項に従い var(--app-*, fallback) で指定する。app-tokens.css は master 未収録なので
   fallback が実際に効く（値は site-shell.css の :root と同値＝brand #FF7900 / deep #E66D00 / ink #1F2937 /
   muted #64748B / wash #FFF3E7 / surface #FFFFFF）。app-tokens.css が入っている環境ではトークン側が優先される。
   公開レイアウトでは site-shell.css と同じ値が二重に当たるだけで見た目は変わらない。
   ⛔ site-shell.css 側の .rv-errorpage・.rv-btn を変えたら、ここも揃えること。 */

.rv-errorpage {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 26px 96px;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}

    .rv-errorpage .rv-errorcode {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .16em;
        color: var(--app-brand-ink, #1F2937);
        margin-bottom: 12px;
    }

    .rv-errorpage h1 {
        margin: 0 0 14px;
        font-size: clamp(24px, 2.6vw, 31px);
        font-weight: 800;
        line-height: 1.5;
        color: var(--app-brand-ink, #1F2937);
    }

    .rv-errorpage p {
        margin: 0 0 8px;
        font-size: 15.5px;
        line-height: 1.9;
        color: var(--app-faint, #64748B);
    }

    .rv-errorpage .rv-erroractions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px;
    }

    /* ボタン（Bootstrap の .btn とは別系統）。site-shell.css の .rv-btn / .rv-btn-fill / .rv-btn-line と同値 */
    .rv-errorpage .rv-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 9px;
        padding: 11px 22px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
        border: 1px solid transparent;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        transition: transform .16s ease, background .16s ease, border-color .16s ease;
    }

        .rv-errorpage .rv-btn:hover {
            transform: translateY(-1px);
            text-decoration: none;
        }

        .rv-errorpage .rv-btn:focus-visible {
            outline: 3px solid var(--app-brand-deep, #E66D00);
            outline-offset: 3px;
        }

    .rv-errorpage .rv-btn-fill {
        background: var(--app-brand-fill, #FF7900);
        color: var(--app-brand-ink, #1F2937);
        box-shadow: 0 4px 16px rgba(255,121,0,.28);
    }

        .rv-errorpage .rv-btn-fill:hover,
        .rv-errorpage .rv-btn-fill:focus {
            background: var(--app-brand-deep, #E66D00);
            color: var(--app-brand-ink, #1F2937);
        }

    .rv-errorpage .rv-btn-line {
        border-color: var(--app-brand-deep, #E66D00);
        color: var(--app-brand-ink, #1F2937);
        background: var(--app-surface, #FFFFFF);
    }

        .rv-errorpage .rv-btn-line:hover,
        .rv-errorpage .rv-btn-line:focus {
            border-color: var(--app-brand-deep, #E66D00);
            color: var(--app-brand-ink, #1F2937);
            background: var(--app-brand-wash, #FFF3E7);
        }