/* /Components/Admin/Pages/AdminHome.razor.rz.scp.css */
/* 管理ハブ専用スタイル（CSS isolation）。
   公開サイト・管理画面と同じブランド配色（深い緑灰 #1f2a2a・緑 #6f9484・淡緑 #a3bcac）で、
   落ち着いた中にも上質さのあるダッシュボードに仕上げる。 */
.hub[b-93dqqkinql] {
    --hub-ink: #1f2a2a;
    --hub-pine: #6f9484;
    --hub-sage: #a3bcac;
    --hub-sage-soft: #e8efea;
    --hub-track: #e3ebe5;
    --hub-paper: #ffffff;
    --hub-line: #e4e8e3;
    --hub-text: #23302d;
    --hub-text-soft: #5f6d68;
    --hub-radius-lg: 22px;
    --hub-radius-md: 16px;
    display: block;
}

/* ───────── ヒーロー ───────── */
.hub-hero[b-93dqqkinql] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px 48px;
    padding: 34px 38px;
    border-radius: var(--hub-radius-lg);
    background: linear-gradient(135deg, #1f2a2a 0%, #284038 62%, #325047 100%);
    color: #fff;
    box-shadow: 0 20px 44px -26px rgba(31, 42, 42, .65);
}

.hub-hero__glow[b-93dqqkinql] {
    position: absolute;
    top: -45%;
    right: -8%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(163, 188, 172, .32), rgba(163, 188, 172, 0) 70%);
    pointer-events: none;
}

.hub-hero__body[b-93dqqkinql] {
    position: relative;
    flex: 1 1 360px;
}

.hub-hero__eyebrow[b-93dqqkinql] {
    margin: 0 0 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--hub-sage);
}

.hub-hero__title[b-93dqqkinql] {
    margin: 0;
    font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.1rem);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: .01em;
}

/* Blazor の FocusOnNavigate が遷移後にこの見出し（tabindex=-1）へ
   プログラム的にフォーカスを移すため、暗いヒーロー上に既定のフォーカスリングが
   出てしまう。非対話の見出しなので視覚リングは抑制する（AT への読み上げには影響しない）。 */
.hub-hero__title:focus[b-93dqqkinql],
.hub-hero__title:focus-visible[b-93dqqkinql] {
    outline: none;
}

.hub-hero__name[b-93dqqkinql] {
    color: #d8e7dc;
}

.hub-hero__lead[b-93dqqkinql] {
    margin: 14px 0 0;
    max-width: 38em;
    font-size: .95rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, .74);
}

.hub-hero__stats[b-93dqqkinql] {
    position: relative;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.hub-stat[b-93dqqkinql] {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.hub-stat:first-child[b-93dqqkinql] {
    padding-left: 0;
    border-left: 0;
}

.hub-stat dt[b-93dqqkinql] {
    margin: 0 0 8px;
    font-size: .72rem;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .6);
}

.hub-stat dd[b-93dqqkinql] {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.hub-stat dd span[b-93dqqkinql] {
    margin-left: 5px;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
}

.hub-stat--meta .hub-stat__date[b-93dqqkinql] {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ───────── セクション見出し ───────── */
.hub-section-head[b-93dqqkinql] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 42px 2px 18px;
}

.hub-section-head__title[b-93dqqkinql] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--hub-ink);
}

.hub-section-head__rule[b-93dqqkinql] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--hub-line), transparent);
}

/* ───────── モジュールカード ───────── */
.hub-grid[b-93dqqkinql] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 360px));
    justify-content: start;
    gap: 20px;
}

.hub-card[b-93dqqkinql] {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 22px 22px 14px;
    background: var(--hub-paper);
    border: 1px solid var(--hub-line);
    border-radius: var(--hub-radius-md);
    box-shadow: 0 1px 2px rgba(31, 42, 42, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hub-card:hover[b-93dqqkinql] {
    transform: translateY(-4px);
    border-color: var(--hub-sage);
    box-shadow: 0 24px 38px -24px rgba(31, 42, 42, .45);
}

.hub-card__head[b-93dqqkinql] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.hub-card__badge[b-93dqqkinql] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--hub-pine);
    background: var(--hub-sage-soft);
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.hub-card:hover .hub-card__badge[b-93dqqkinql] {
    background: var(--hub-pine);
    color: #fff;
    transform: rotate(-4deg);
}

.hub-card__badge[b-93dqqkinql]  .mud-icon-root {
    font-size: 1.6rem;
    color: inherit;
    fill: currentColor;
}

.hub-card__title[b-93dqqkinql] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--hub-ink);
}

.hub-card__desc[b-93dqqkinql] {
    margin: 0 0 18px;
    min-height: 3.1em;
    font-size: .88rem;
    line-height: 1.75;
    color: var(--hub-text-soft);
}

.hub-card__metrics[b-93dqqkinql] {
    margin-top: auto;
}

.hub-card__count[b-93dqqkinql] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hub-card__count-num[b-93dqqkinql] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

.hub-card__count-label[b-93dqqkinql] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hub-pine);
}

.hub-card__total[b-93dqqkinql] {
    margin-top: 5px;
    font-size: .78rem;
    color: var(--hub-text-soft);
}

.hub-card__bar[b-93dqqkinql] {
    margin-top: 12px;
    height: 6px;
    border-radius: 99px;
    background: var(--hub-track);
    overflow: hidden;
}

.hub-card__bar-fill[b-93dqqkinql] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hub-pine), var(--hub-sage));
    transition: width .55s ease;
}

.hub-card__actions[b-93dqqkinql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 6px;
    border-top: 1px solid var(--hub-line);
}

.hub-card__actions[b-93dqqkinql]  .mud-button-root {
    text-transform: none;
}

/* 「管理する」= カード全面を覆うリンク（stretched link）。
   .hub-card を基準に ::after を全面へ広げ、カードのどこをクリックしても一覧へ遷移させる。
   純 CSS のため JS 不要・静的 SSR でも動作し、実体は <a> なのでキーボード操作・支援技術にも対応する。 */
.hub-card__open[b-93dqqkinql] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--hub-pine);
    text-decoration: none;
    transition: gap .22s ease, color .22s ease;
}

.hub-card__open[b-93dqqkinql]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--hub-radius-md);
}

.hub-card__open[b-93dqqkinql]  .mud-icon-root {
    font-size: 1.15rem;
    transition: transform .22s ease;
}

.hub-card:hover .hub-card__open[b-93dqqkinql] {
    gap: 9px;
    color: var(--hub-ink);
}

.hub-card:hover .hub-card__open[b-93dqqkinql]  .mud-icon-root {
    transform: translateX(2px);
}

/* キーボード操作時は stretched link 自身のリングを隠し、カード全体に可視リングを出す。 */
.hub-card:focus-within[b-93dqqkinql] {
    border-color: var(--hub-sage);
    box-shadow: 0 0 0 3px rgba(111, 148, 132, .3);
}

.hub-card__open:focus-visible[b-93dqqkinql] {
    outline: none;
}

/* 「新規」= 別アクション。stretched link の上に重ねて個別にクリックできるようにする。 */
.hub-card__new[b-93dqqkinql] {
    position: relative;
    z-index: 1;
}

/* ───────── レスポンシブ ─────────
   スマートフォンでは 8 モジュールぶんのカードが縦に延々と続き、
   全体を見渡せなくなる。説明文を省き、余白・バッジ・数値を詰めて
   1 枚あたりの高さを抑える（各カードの機能は変えない）。 */
@media (max-width: 600px) {
    .hub-hero[b-93dqqkinql] {
        gap: 18px 24px;
        padding: 22px 18px;
        border-radius: 18px;
    }

    .hub-hero__lead[b-93dqqkinql] {
        margin-top: 10px;
        font-size: .875rem;
        line-height: 1.75;
    }

    .hub-hero__stats[b-93dqqkinql] {
        width: 100%;
        gap: 18px;
    }

    .hub-stat[b-93dqqkinql] {
        padding-left: 18px;
    }

    .hub-stat dd[b-93dqqkinql] {
        font-size: 1.65rem;
    }

    .hub-stat--meta .hub-stat__date[b-93dqqkinql] {
        font-size: .95rem;
    }

    .hub-section-head[b-93dqqkinql] {
        margin: 26px 2px 12px;
        gap: 12px;
    }

    .hub-section-head__title[b-93dqqkinql] {
        font-size: .95rem;
    }

    .hub-grid[b-93dqqkinql] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .hub-card[b-93dqqkinql] {
        padding: 14px 14px 8px;
        border-radius: 14px;
    }

    .hub-card__head[b-93dqqkinql] {
        gap: 12px;
        margin-bottom: 10px;
    }

    .hub-card__badge[b-93dqqkinql] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .hub-card__badge[b-93dqqkinql]  .mud-icon-root {
        font-size: 1.35rem;
    }

    .hub-card__title[b-93dqqkinql] {
        font-size: 1.02rem;
    }

    /* 説明文はカード名から内容が分かるため、狭い画面では省く。 */
    .hub-card__desc[b-93dqqkinql] {
        display: none;
    }

    /* 「公開中 n 件」と「登録 n 件」を 1 行にまとめる。 */
    .hub-card__count[b-93dqqkinql] {
        display: inline-flex;
    }

    .hub-card__count-num[b-93dqqkinql] {
        font-size: 1.6rem;
    }

    .hub-card__total[b-93dqqkinql] {
        display: inline;
        margin-top: 0;
        margin-left: 10px;
    }

    .hub-card__bar[b-93dqqkinql] {
        margin-top: 8px;
    }

    .hub-card__actions[b-93dqqkinql] {
        margin-top: 10px;
    }

    /* 指で押しやすいよう、カード内リンクの高さを確保する。 */
    .hub-card__open[b-93dqqkinql] {
        min-height: 40px;
    }
}

/* ───────── ホバーできない端末 ───────── */
@media (hover: none) {
    /* タップ後にホバー状態が残り、カードが浮いたままになるのを防ぐ。 */
    .hub-card:hover[b-93dqqkinql] {
        transform: none;
        box-shadow: 0 1px 2px rgba(31, 42, 42, .04);
        border-color: var(--hub-line);
    }

    .hub-card:hover .hub-card__badge[b-93dqqkinql] {
        transform: none;
        background: var(--hub-sage-soft);
        color: var(--hub-pine);
    }
}

/* ───────── モーション配慮 ───────── */
@media (prefers-reduced-motion: reduce) {
    .hub-card[b-93dqqkinql],
    .hub-card__badge[b-93dqqkinql],
    .hub-card__bar-fill[b-93dqqkinql],
    .hub-card__open[b-93dqqkinql],
    .hub-card__open[b-93dqqkinql]  .mud-icon-root {
        transition: none;
    }

    .hub-card:hover[b-93dqqkinql] {
        transform: none;
    }

    .hub-card:hover .hub-card__badge[b-93dqqkinql] {
        transform: none;
    }
}
/* /Components/Admin/Pages/Gallery/GalleryManage.razor.rz.scp.css */
/* ===================================================================
   ギャラリーの管理（/admin/gallery）
   ===================================================================
   ⚠ Blazor の CSS 分離では `::deep .x` が `[b-xxx] .x` へコンパイルされ、
   スコープ属性 [b-xxx] を持つ「祖先要素」が必要になる。属性が付くのは
   .razor が直接書く plain な HTML 要素だけで、MudBlazor のコンポーネント
   （MudPaper / MudDropZone / MudChipSet 等）には付かない。
   そのため .razor 側は全体を <div class="gallery-manage"> でくるんでおり、
   ここではその <div> を起点に ::deep で内側を指す。
   （この <div> を外すと以下のスタイルはすべて無効になる）
   =================================================================== */

.gallery-manage[b-brxjq06xkv] {
    /* タイルの最小幅。画面幅に応じて 2〜6 列へ自動で増減する。 */
    --tile-min: 210px;
    /* 状態バッジ・番号バッジの敷き色（写真の上でも読めるだけの濃度）。 */
    --overlay-ink: rgba(31, 42, 42, 0.72);
}

@media (max-width: 599.98px) {
    .gallery-manage[b-brxjq06xkv] {
        /* スマートフォンでは 2 列を保てる幅にする（1 列だと一覧性が失われる）。 */
        --tile-min: 140px;
    }
}

/* ───────────────── アップロード領域 ─────────────────
   写真がある間は一覧を圧迫しない細い帯、0 枚のときだけ大きな空状態にする。 */

.gallery-upload[b-brxjq06xkv] {
    margin-bottom: 16px;
}

/* MudFileUpload の InputFile（input[type=file]）を透明のままドロップ領域全面に重ねる。
   MudBlazor 9.5 では CustomContent 使用時に標準のドラッグ検知領域が描画されないため、
   常時表示の input 自身にクリック・ドロップをネイティブに受け付けさせる
   （ImageUploadEditor.razor.css と同方式。スコープ CSS はコンポーネントをまたがないため
   このページ用に同じ定義を持つ）。位置の基準は position:relative を持つ .mud-file-upload。 */
[b-brxjq06xkv] .image-upload-drop-input {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

[b-brxjq06xkv] .image-upload-drop-input:disabled {
    cursor: default;
}

/* input 自体は不可視のため、キーボードフォーカス時はドロップ領域側にリングを表示する */
[b-brxjq06xkv] .image-upload-drop-input:focus-visible ~ .mud-file-upload-custom-content .gallery-upload__area {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.gallery-upload__area[b-brxjq06xkv] {
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 4px 16px;
    padding: 14px 20px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gallery-upload__area--over[b-brxjq06xkv] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

[b-brxjq06xkv] .gallery-upload__icon {
    font-size: 2rem;
}

.gallery-upload__text[b-brxjq06xkv] {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.gallery-upload__text strong[b-brxjq06xkv] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.gallery-upload__text span[b-brxjq06xkv] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* 形式・上限の注記。帯のときは右側へ小さく流し、空状態では中央へ回り込む。 */
.gallery-upload__note[b-brxjq06xkv] {
    font-size: 0.75rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

/* 写真が 0 枚のときは、追加操作そのものが主役なので大きく見せる。 */
.gallery-upload--empty .gallery-upload__area[b-brxjq06xkv] {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    padding: 40px 24px;
    text-align: center;
}

.gallery-upload--empty[b-brxjq06xkv]  .gallery-upload__icon {
    font-size: 3rem;
}

.gallery-upload--empty .gallery-upload__text[b-brxjq06xkv] {
    align-items: center;
}

.gallery-upload--empty .gallery-upload__note[b-brxjq06xkv] {
    max-width: 46em;
    margin-top: 6px;
}

/* 中間幅では注記が入りきらないので、アイコン＋文言の下へ折り返す。 */
@media (max-width: 1099.98px) {
    .gallery-upload__area[b-brxjq06xkv] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gallery-upload__note[b-brxjq06xkv] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599.98px) {
    .gallery-upload__area[b-brxjq06xkv] {
        padding: 12px 14px;
        gap: 4px 12px;
    }

    .gallery-upload__text strong[b-brxjq06xkv] {
        font-size: 0.875rem;
    }

    .gallery-upload__text span[b-brxjq06xkv] {
        font-size: 0.75rem;
    }

    .gallery-upload--empty .gallery-upload__area[b-brxjq06xkv] {
        padding: 28px 16px;
    }
}

/* アップロードの進捗 */
.gallery-progress[b-brxjq06xkv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

/* ───────────────── ツールバー（sticky） ─────────────────
   長い一覧をスクロールしても絞り込み・一括操作へ手が届くよう上端に貼り付ける。
   AppBar（高さ 64px / スマートフォンは 56px）の下に来るようオフセットする。 */

.gallery-toolbar[b-brxjq06xkv] {
    position: sticky;
    top: 64px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--admin-card-radius, 14px);
    background: var(--mud-palette-surface);
}

/* 一括操作中であることが分かるよう、選択色の枠と淡い敷きにする。 */
.gallery-toolbar--selecting[b-brxjq06xkv] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.gallery-toolbar__count[b-brxjq06xkv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* 絞り込みチップ。MudChipSet の既定マージンを打ち消して行に詰める。 */
[b-brxjq06xkv] .gallery-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

[b-brxjq06xkv] .gallery-toolbar__filters .mud-chip {
    margin: 0;
}

.gallery-toolbar__actions[b-brxjq06xkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 599.98px) {
    .gallery-toolbar[b-brxjq06xkv] {
        top: 56px;
        gap: 8px;
        padding: 8px 10px;
    }

    /* 狭い画面では左右に振り分けず、上下に積んで全幅で押せるようにする。 */
    .gallery-toolbar__actions[b-brxjq06xkv] {
        width: 100%;
        margin-left: 0;
    }

    [b-brxjq06xkv] .gallery-toolbar__actions .mud-button-root {
        flex: 1 1 auto;
        min-height: 40px;
    }
}

.gallery-filter-note[b-brxjq06xkv] {
    margin-bottom: 12px;
}

/* ───────────────── 写真グリッド ─────────────────
   ドロップゾーン自体をカードグリッドにする。並べ替え中の挿入位置プレビュー
   （MudBlazor が生成する要素）もグリッドセルとして流れる。 */

[b-brxjq06xkv] .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
    gap: 14px;
    align-items: stretch;
    min-height: 120px;
}

@media (max-width: 599.98px) {
    [b-brxjq06xkv] .gallery-grid {
        gap: 10px;
    }
}

/* タイルを行の高さいっぱいに伸ばす。
   ⚠ `:not(.mud-drop-item-preview-start)` は必須。MudBlazor が「先頭の前に落とす」
   ための当たり判定として置く要素は `.mud-drop-item .mud-drop-item-preview-start` の
   2 クラスを持ち、既定では position:absolute の高さ 20px の帯（z-index:1）でしかない。
   ここで除外しないとこの帯まで height:100% になり、ゾーン全面を覆う透明な板になって
   タイルのクリックをすべて奪ってしまう。

   z-index はその帯を上回らせるためのもの。ドロップアイテムは MudBlazor が
   inline の transform を当てているので既に独立した重ね合わせ文脈になっており、
   タイル内側の z-index では帯（z-index:1）に勝てない。ここで持ち上げないと
   1 行目のタイル上端 20px がクリックできない帯で覆われる。並べ替えでその帯に
   落とした場合も、先頭タイルに落としたのと同じ「先頭へ挿入」になるので支障はない。 */
[b-brxjq06xkv] .gallery-grid .mud-drop-item:not(.mud-drop-item-preview-start) {
    height: 100%;
    z-index: 2;
}

/* 並べ替え中の挿入位置プレビュー。
   MudBlazor が出す要素は 2 種類あり、見た目を与えてよいのは
   `.mud-dropitem-placeholder`（ドラッグ中だけ d-none が外れる）だけ。
   `.mud-drop-item-preview-start` はゾーン全面に常時存在する当たり判定用の要素で、
   ここに枠や背景を与えるとドラッグしていない間もグリッド全体が囲われて見えてしまう。 */
[b-brxjq06xkv] .gallery-grid .mud-dropitem-placeholder {
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 12px;
    min-height: 120px;
    background: var(--mud-palette-primary-hover);
}

/* ───────────────── 写真タイル ───────────────── */

[b-brxjq06xkv] .gallery-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

[b-brxjq06xkv] .gallery-tile:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(31, 42, 42, 0.12);
    transform: translateY(-2px);
}

/* 一括操作で選択中のタイル */
[b-brxjq06xkv] .gallery-tile--selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-primary) inset;
}

/* ドラッグ中の元位置タイル（MudDropContainer の ItemDraggingClass） */
[b-brxjq06xkv] .gallery-tile--dragging {
    opacity: 0.35;
}

/* ───── サムネイル（クリックで編集ダイアログ） ─────
   button 要素にしてキーボード操作・読み上げに対応させる。 */

[b-brxjq06xkv] .gallery-tile__media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    /* 公開ページのグリッドと同じ切り抜き比にして、掲載時の見え方をそろえる。 */
    aspect-ratio: 4 / 3;
    /* タイルは flex コンテナなので、既定の min-height:auto だと「中の img の
       自然な高さ」が最小サイズになり、縦長・正方形の写真で aspect-ratio が
       押し負けてタイルの高さが揃わなくなる。0 にして切り抜き比を優先させる。 */
    min-height: 0;
    flex: 0 0 auto;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

[b-brxjq06xkv] .gallery-tile__media:disabled {
    cursor: default;
}

[b-brxjq06xkv] .gallery-tile__media:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

[b-brxjq06xkv] .gallery-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.15s ease, filter 0.15s ease;
}

[b-brxjq06xkv] .gallery-tile:hover .gallery-tile__media img {
    transform: scale(1.04);
}

/* 非公開の写真は淡くして、公開中との違いをひと目で分かるようにする。 */
[b-brxjq06xkv] .gallery-tile--hidden .gallery-tile__media img {
    opacity: 0.4;
    filter: grayscale(0.5);
}

/* 表示順（1 始まり）。並べ替えの結果を確認しやすくする。 */
[b-brxjq06xkv] .gallery-tile__order {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: var(--overlay-ink);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* 選択チェックが出るときは番号を譲る（同じ角に重なるため）。 */
    transition: opacity 0.15s ease;
}

[b-brxjq06xkv] .gallery-tile:hover .gallery-tile__order,
[b-brxjq06xkv] .gallery-tile--selectable .gallery-tile__order {
    opacity: 0;
}

/* キャプション。公開ページと同じく写真の下部へ重ねて見せる。 */
[b-brxjq06xkv] .gallery-tile__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 22px 10px 8px;
    background: linear-gradient(to top, rgba(31, 42, 42, 0.85), transparent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.45;
    /* 長いキャプションは 2 行で省略する（全文は編集ダイアログで確認できる）。 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 状態バッジ（非公開 / alt 未設定）。キャプションと重ならないよう上端側へ置く。 */
[b-brxjq06xkv] .gallery-tile__badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    /* ドラッグつまみの下に潜り込ませる（つまみは右上に重なる）。 */
    margin-right: 38px;
}

[b-brxjq06xkv] .gallery-tile__badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

[b-brxjq06xkv] .gallery-tile__badge--hidden {
    background: var(--overlay-ink);
    color: #fff;
}

[b-brxjq06xkv] .gallery-tile__badge--alt {
    background: var(--mud-palette-warning);
    color: #fff;
}

/* ───── 選択チェック ─────
   番号バッジと同じ角を使うため、出るときは番号と入れ替わる。
     - マウス: タイルにホバーすると現れる（普段は番号が見えている）
     - タッチ: ホバーが無いので、選択モードに入ったときだけ現れる
       （gallery-tile--selectable）。それまでは番号が見えている。
   ※ かつて @media (hover: none) で常時表示にしていたが、それだとタッチ端末で
     番号が常にチェックに隠れ、表示順が確認できなくなる。 */

[b-brxjq06xkv] .gallery-tile__check {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    /* 出ていない間は押せないようにする（見えないチェックの誤タップ防止）。 */
    pointer-events: none;
    transition: opacity 0.15s ease;
}

[b-brxjq06xkv] .gallery-tile:hover .gallery-tile__check,
[b-brxjq06xkv] .gallery-tile--selectable .gallery-tile__check,
[b-brxjq06xkv] .gallery-tile--selected .gallery-tile__check,
[b-brxjq06xkv] .gallery-tile__check:focus-within {
    opacity: 1;
    pointer-events: auto;
}

/* ───── ドラッグつまみ ─────
   タイル全体をドラッグ可能にするとクリックでの編集と衝突するため、
   このつまみからのみドラッグを開始する。タッチターゲットは 40px を確保。 */

[b-brxjq06xkv] .gallery-tile__handle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    border-radius: 8px;
    background: var(--overlay-ink);
    color: #fff;
    cursor: grab;
    touch-action: none;
}

[b-brxjq06xkv] .gallery-tile__handle:active {
    cursor: grabbing;
}

[b-brxjq06xkv] .gallery-tile__handle .mud-drag-handle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
}

[b-brxjq06xkv] .gallery-tile__handle .mud-icon-root {
    font-size: 1.25rem;
}

/* ───── 操作列（公開スイッチ ＋ ⋮ メニュー） ───── */

[b-brxjq06xkv] .gallery-tile__foot {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding: 4px 4px 4px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ラベル「公開」を小さく詰め、狭いタイルでも ⋮ と同じ行に収める。 */
[b-brxjq06xkv] .gallery-tile__foot .mud-switch {
    margin: 0;
    margin-right: auto;
}

[b-brxjq06xkv] .gallery-tile__foot .mud-switch .mud-typography {
    font-size: 0.8125rem;
}

[b-brxjq06xkv] .gallery-tile__foot .mud-switch-span {
    margin-right: 2px;
}

@media (max-width: 599.98px) {
    /* 2 列表示ではタイルが狭いので、スイッチのラベルを隠してつまみだけにする
       （公開状態は写真の淡さと「非公開」バッジでも分かる）。 */
    [b-brxjq06xkv] .gallery-tile__foot {
        padding-left: 4px;
    }

    [b-brxjq06xkv] .gallery-tile__foot .mud-switch .mud-typography {
        font-size: 0.75rem;
    }
}
/* /Components/Admin/Pages/Gallery/GalleryPhotoDialog.razor.rz.scp.css */
/* ===================================================================
   ギャラリー写真の編集ダイアログ
   ===================================================================
   ダイアログの中身は MudDialogProvider（アプリのルート）へ描画されるため、
   ページ側（GalleryManage.razor.css）のスコープ CSS は届かない。ここに置く。

   Blazor の CSS 分離では `::deep .x` が `[b-xxx] .x` へコンパイルされ、
   スコープ属性 [b-xxx] を持つ「祖先」が必要になる。属性が付くのは
   このコンポーネントが直接書く plain な HTML 要素だけで、MudBlazor の
   コンポーネントには付かない。そのため中身全体を plain な <div> でくるみ、
   その中の MudBlazor 要素にも ::deep が届くようにしている。
   =================================================================== */

/* 見出し（タイトル行）。「写真の編集」と「n / N」を両端に置く。 */
.photo-dialog__title[b-qophq3ts0j] {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.photo-dialog__title-text[b-qophq3ts0j] {
    font-weight: 600;
}

.photo-dialog__counter[b-qophq3ts0j] {
    margin-left: auto;
    padding-left: 12px;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ───────────────── 本体（プレビュー ｜ 入力） ───────────────── */

.photo-dialog[b-qophq3ts0j] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 20px 24px;
    align-items: start;
}

/* 縦長の画面・タブレット以下では 1 列に積む。 */
@media (max-width: 899.98px) {
    .photo-dialog[b-qophq3ts0j] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* 画面が低いとき（スマートフォンの横向きなど）は、4:3 のプレビューだけで
   高さを使い切って alt 欄がスクロールしないと見えなくなる。高さを抑えて
   入力欄を画面内に収める（切り抜きは object-fit:cover のままなので見え方は変わらない）。
   縦向きのスマートフォン（390×844）では 4:3 でも収まるため、ここは効かない。 */
@media (max-height: 620px) {
    .photo-dialog__frame[b-qophq3ts0j] {
        max-height: 40vh;
    }
}

.photo-dialog__preview[b-qophq3ts0j] {
    min-width: 0;
}

/* プレビュー枠。公開ページと同じ 4:3 で切り抜いて見せる（掲載時の見え方に合わせる）。 */
.photo-dialog__frame[b-qophq3ts0j] {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.photo-dialog__frame img[b-qophq3ts0j] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 非公開の写真は淡くして、公開中との違いをひと目で分かるようにする。 */
.photo-dialog__frame--hidden img[b-qophq3ts0j] {
    opacity: 0.45;
    filter: grayscale(0.4);
}

.photo-dialog__hidden-badge[b-qophq3ts0j] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(31, 42, 42, 0.82);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* 前後移動。プレビューの直下に置き、視線を動かさず連続編集できるようにする。 */
.photo-dialog__nav[b-qophq3ts0j] {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

[b-qophq3ts0j] .photo-dialog__nav .mud-button-root {
    min-height: 40px;
}

/* ───────────────── 入力欄 ───────────────── */

.photo-dialog__fields[b-qophq3ts0j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* alt 未入力のあいだ出す注意アイコン（SEO/アクセシビリティ上の必須項目）。 */
[b-qophq3ts0j] .photo-dialog__fields .mud-input-adornment-end .mud-icon-root {
    font-size: 1.25rem;
}

[b-qophq3ts0j] .photo-dialog__alt-note {
    font-size: 0.75rem;
    line-height: 1.65;
}

.photo-dialog__meta[b-qophq3ts0j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

/* 元ファイル名は長いので 1 行に収め、あふれは省略記号にする。 */
.photo-dialog__meta-file[b-qophq3ts0j] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 保存状態の表示（保存ボタンの代わり）。閉じるボタンの手前に小さく添える。 */
.photo-dialog__state[b-qophq3ts0j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 12px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.photo-dialog__state--dirty[b-qophq3ts0j] {
    color: var(--mud-palette-text-primary);
}

@media (max-width: 599.98px) {
    /* 狭い画面では操作列が折り返してボタンが全幅になる（admin.css）。
       保存状態はその上に 1 行で置く。 */
    .photo-dialog__state[b-qophq3ts0j] {
        flex: 1 0 100%;
        justify-content: center;
        margin-right: 0;
    }
}

/* 操作列（削除／閉じる）の折り返しとタップ領域は admin.css の
   `.mud-dialog-actions` 用ルールが担う（管理画面の全ダイアログ共通）。 */
/* /Components/Admin/Shared/HeroImageUploadField.razor.rz.scp.css */
/* MudFileUpload の InputFile（input[type=file]）を透明のままドロップ領域全面に重ねる。
   MudBlazor 9.5 では CustomContent 使用時に標準のドラッグ検知領域が描画されないため、
   常時表示の input 自身にクリック・ドロップをネイティブに受け付けさせる
   （ImageUploadEditor と同じ方式。スコープ付き CSS はコンポーネントを跨がないため重複定義する）。
   位置の基準は position:relative を持つ .mud-file-upload ルート要素。 */
[b-vv4n4m0y85] .image-upload-drop-input {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

[b-vv4n4m0y85] .image-upload-drop-input:disabled {
    cursor: default;
}

/* input 自体は不可視のため、キーボードフォーカス時はドロップ領域側にリングを表示する */
[b-vv4n4m0y85] .image-upload-drop-input:focus-visible ~ .mud-file-upload-custom-content .mud-paper {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Components/Admin/Shared/ImageUploadEditor.razor.rz.scp.css */
/* MudFileUpload の InputFile（input[type=file]）を透明のままドロップ領域全面に重ねる。
   MudBlazor 9.5 では CustomContent 使用時に標準のドラッグ検知領域が描画されないため、
   常時表示の input 自身にクリック・ドロップをネイティブに受け付けさせる
   （公式ドキュメント FileUploadDragAndDropCustomScenarioExample と同じ方式）。
   位置の基準は position:relative を持つ .mud-file-upload ルート要素。 */
[b-092dgmsijr] .image-upload-drop-input {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

[b-092dgmsijr] .image-upload-drop-input:disabled {
    cursor: default;
}

/* input 自体は不可視のため、キーボードフォーカス時はドロップ領域側にリングを表示する */
[b-092dgmsijr] .image-upload-drop-input:focus-visible ~ .mud-file-upload-custom-content .mud-paper {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-91szl1iotf] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-91szl1iotf] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-w5xsatvbip],
.components-reconnect-repeated-attempt-visible[b-w5xsatvbip],
.components-reconnect-failed-visible[b-w5xsatvbip],
.components-pause-visible[b-w5xsatvbip],
.components-resume-failed-visible[b-w5xsatvbip],
.components-rejoining-animation[b-w5xsatvbip] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-retrying[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-failed[b-w5xsatvbip],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-w5xsatvbip] {
    display: block;
}


#components-reconnect-modal[b-w5xsatvbip] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-w5xsatvbip 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-w5xsatvbip 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-w5xsatvbip 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-w5xsatvbip]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-w5xsatvbip 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-w5xsatvbip {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-w5xsatvbip {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-w5xsatvbip {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-w5xsatvbip] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-w5xsatvbip] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-w5xsatvbip] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-w5xsatvbip] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-w5xsatvbip] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-w5xsatvbip] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-w5xsatvbip] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-w5xsatvbip 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-w5xsatvbip] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-w5xsatvbip {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Public/Layout/PageTransitionLoader.razor.rz.scp.css */
/* ====================================================================
   PageTransitionLoader.razor.css（スコープ CSS）
   Enhanced Navigation 用ローディング UI の見た目。

   デザイン: 葬儀社にふさわしい静かな所作。プロトタイプ01 のデザイントークン
     （セージグリーン／紙色）と落ち着いた減速イージング（--ease-calm）に揃える。
     これらのトークンは公開サイトの app.css（:root）で定義され、本コンポーネントは
     PublicLayout でのみ描画されるため確実に解決できる。万一に備え既定値も併記する。

   状態クラス（page-transition.js が付与）:
     .active         … ローダー表示・バーのアニメーション開始
     .show-indicator … 中央スピナー＋テキストを表示（遅延表示）
     .completing     … バーを 100% まで伸ばしてフェードアウト
   ==================================================================== */

/* === ベースコンテナ（既定は不可視・非操作） === */
.page-transition-loader[b-zvnqki91na] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1)),
        visibility 0.2s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.page-transition-loader.active[b-zvnqki91na] {
    opacity: 1;
    visibility: visible;
}

/* === 上部プログレスバー === */
.progress-track[b-zvnqki91na] {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    overflow: hidden;
    background: transparent;
}

.progress-bar[b-zvnqki91na] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
    inline-size: 0;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(
        90deg,
        var(--color-sage-dark, #365a4d) 0%,
        var(--color-sage, #6f8a77) 50%,
        var(--color-leaf, #8ba56e) 100%
    );
    background-size: 200% 100%;
    transition: width 0.3s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* 実完了を待たず、なめらかに 90% まで伸ばし続ける（読み込み中の合図） */
.page-transition-loader.active .progress-bar[b-zvnqki91na] {
    animation:
        koei-pt-progress-b-zvnqki91na 2.2s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1)) infinite,
        koei-pt-shimmer-b-zvnqki91na 1.6s ease-in-out infinite;
}

@keyframes koei-pt-progress-b-zvnqki91na {
    0%   { inline-size: 0; }
    25%  { inline-size: 32%; }
    55%  { inline-size: 62%; }
    85%  { inline-size: 84%; }
    100% { inline-size: 90%; }
}

@keyframes koei-pt-shimmer-b-zvnqki91na {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* バー先端の淡い光（控えめに左右へ流す） */
.progress-glow[b-zvnqki91na] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
    inline-size: 100%;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgb(111 138 119 / 0.35) 50%,
        transparent 100%
    );
    animation: koei-pt-glow-b-zvnqki91na 1.6s ease-in-out infinite;
}

.page-transition-loader.active .progress-glow[b-zvnqki91na] {
    opacity: 1;
}

@keyframes koei-pt-glow-b-zvnqki91na {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* === ごく淡いコンテンツフェード === */
.content-veil[b-zvnqki91na] {
    position: fixed;
    inset: 0;
    opacity: 0;
    background: rgb(255 253 248 / 0.28); /* --color-paper を薄く敷く */
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: opacity 0.3s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.page-transition-loader.active .content-veil[b-zvnqki91na] {
    opacity: 1;
    transition-delay: 0.15s; /* バーに少し遅れて静かに掛かる */
}

/* === 中央インジケーター（遅延表示） === */
.loading-indicator[b-zvnqki91na] {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* .show-indicator が付いたときだけ現れる（速い遷移ではちらつかせない） */
.page-transition-loader.show-indicator .loading-indicator[b-zvnqki91na] {
    opacity: 1;
}

.loading-spinner[b-zvnqki91na] {
    display: block;
    inline-size: 2rem;
    block-size: 2rem;
    color: var(--color-sage-dark, #365a4d);
}

.loading-spinner svg[b-zvnqki91na] {
    inline-size: 100%;
    block-size: 100%;
    animation: koei-pt-spin-b-zvnqki91na 1s linear infinite;
}

@keyframes koei-pt-spin-b-zvnqki91na {
    to { transform: rotate(360deg); }
}

.loading-text[b-zvnqki91na] {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-muted, #5b6967);
    background: rgb(255 253 248 / 0.92); /* paper */
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgb(31 42 42 / 0.10);
}

/* === 完了アニメーション === */
.page-transition-loader.completing .progress-bar[b-zvnqki91na] {
    inline-size: 100% !important;
    transition: width 0.2s ease-out;
    animation: none;
}

.page-transition-loader.completing[b-zvnqki91na] {
    opacity: 0;
    transition: opacity 0.3s var(--ease-calm, cubic-bezier(0.22, 0.61, 0.36, 1)) 0.1s;
}

/* === レスポンシブ === */
@media (max-width: 640px) {
    .loading-spinner[b-zvnqki91na] {
        inline-size: 1.75rem;
        block-size: 1.75rem;
    }
    .loading-text[b-zvnqki91na] {
        font-size: 0.75rem;
        padding: 0.3125rem 0.75rem;
    }
}

/* === モーション軽減（アクセシビリティ） === */
@media (prefers-reduced-motion: reduce) {
    .progress-bar[b-zvnqki91na],
    .progress-glow[b-zvnqki91na],
    .loading-spinner svg[b-zvnqki91na] {
        animation: none;
    }
    /* アニメーションなしでも「進行中」が分かるよう一定量だけ表示 */
    .page-transition-loader.active .progress-bar[b-zvnqki91na] {
        inline-size: 45%;
    }
    .content-veil[b-zvnqki91na],
    .loading-indicator[b-zvnqki91na] {
        transition: none;
    }
}