/*
 * 案内ページ（トップ・エラー）の見た目。
 *
 * 管理画面にもLPにも属さない「行き止まり」のページ用。
 * トップとエラーで見た目が揃っていないと、同じサービスの中で
 * 迷子になったのか、別のサーバーに飛ばされたのか分からない。
 */

:root { color-scheme: light; }

body.notice {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #f4f6fa;
    color: #1b2430;
    font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    line-height: 1.9;
}

.notice__card {
    max-width: 520px;
    width: 100%;
    padding: 40px 32px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    text-align: center;
}

.notice__logo { height: 26px; width: auto; margin-bottom: 22px; }

/*
 * ステータスコードは大きく出す。
 * 何が起きたのかを一目で分からせるのと、問い合わせのときに
 * 「404と出ています」と伝えてもらうのが目的。
 */
.notice__code {
    margin: 0;
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #1b2430;
    font-variant-numeric: tabular-nums;
}

.notice__heading { margin: 12px 0 0; font-size: 17px; font-weight: 700; }
.notice__lead { margin: 0 0 6px; font-size: 13px; color: #5b6674; }
.notice__operator { margin: 0; font-size: 19px; font-weight: 700; }
.notice__note { margin: 22px 0 0; font-size: 12.5px; color: #8792a2; }

/* 長いURLでカードを横に広げない */
.notice__url {
    margin: 14px 0 0;
    font-size: 12px;
    color: #8792a2;
    word-break: break-all;
}

.notice__actions { margin: 26px 0 0; }

.notice__link {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid #d3dae4;
    border-radius: 8px;
    background: #fff;
    color: #1b2430;
    font-size: 13px;
    text-decoration: none;
}

.notice__link:hover { background: #f4f6fa; }

/* 開発時だけ出す例外の中身。既定では畳んでおく */
.notice__debug {
    margin: 26px 0 0;
    text-align: left;
    font-size: 12px;
    color: #5b6674;
}

.notice__debug > summary { cursor: pointer; color: #8792a2; }

.notice__debug pre {
    margin: 10px 0 0;
    padding: 12px;
    max-height: 320px;
    overflow: auto;
    background: #f4f6fa;
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.6;
}

@media (max-width: 480px) {
    .notice__code { font-size: 56px; }
}