/*
 * refinements.css — 投資家画面 UI/UX ブラッシュアップ (2026-07-13)
 *
 * Blade で参照されているが legacy CSS (public/style.css / mypage/*.css) に
 * 定義が存在しないコンポーネントクラスの補完と、SP 幅でのレイアウト崩れの
 * 修正をまとめたプロジェクト所有のスタイルシート。
 * 各 layout の legacy CSS より後に読み込むこと（同 specificity なら勝つ）。
 *
 * デザイントークンは tokens.css / mypage base.css の CSS 変数を参照し、
 * 未定義環境（public 側）でも成立するよう fallback 値を併記する。
 *
 * 注意: 投資家レイアウトは html{font-size:62.5%}(1rem=10px) のため、
 * font-size / spacing は rem を使わず px で指定する（rem だと 62.5% 縮小され
 * 7〜9px の極小表示になる）。
 */

/* ============================================================
 * 1. 数値・金額の折返し防止
 *    カード指標の金額が数字の途中で折り返す崩れの防止 (SP)
 * ============================================================ */
.property-detail div,
.confirm-list dd.font-mono,
.payment-history-amount--plus,
.payment-history-amount--minus {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    /* 指標グリッドは SP では縦積みにして金額の幅を確保する
       (.u-property-info-flex が display:grid の固定 2 カラムを当てるため 1fr に上書き) */
    .property-info-grid,
    .property-info-grid.u-property-info-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .property-detail {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .property-detail h4 {
        margin-bottom: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* 運用状況カードの指標 (stats-grid) — 値の途中折返し防止 */
.stats-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stats-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        column-gap: 12px;
    }

    .stats-item .stats-label {
        white-space: nowrap;
    }

    .stats-item .stats-label.u-text-xs {
        flex-basis: 100%;
        text-align: right;
    }
}

/* ============================================================
 * 2. 確認リスト (confirm-list) — アカウント/各種確認画面の dt/dd
 * ============================================================ */
.confirm-list {
    margin: 0;
}

.confirm-list__row {
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 4px 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray-border, #e5e7eb);
}

.confirm-list__row:last-child {
    border-bottom: none;
}

.confirm-list__row > dt {
    color: var(--color-gray-text, #6b7280);
    font-size: 14px;
    line-height: 1.6;
}

.confirm-list__row > dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .confirm-list__row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px 0;
    }
}

/* ============================================================
 * 3. 管理メニューリスト (management-list) — 行 + 右端アクション
 * ============================================================ */
.management-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.management-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 10px 0;
    /* #1-④ 登録情報の管理: ラベル/ステータス文字が小さすぎる (body 12px 継承) ため
       サービスページ本文と同じ 14px に底上げ。 */
    font-size: var(--font-base, 1.4rem);
    border-bottom: 1px solid var(--color-gray-border, #e5e7eb);
}

.management-list__item:last-child {
    border-bottom: none;
}

.management-list__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.management-list__hint {
    color: var(--color-gray-text, #6b7280);
    font-size: 12px;
    line-height: 1.5;
}

/* 中央ステータス (登録済 / 未登録 / 承認待ち 等) */
.management-list__item .status-inline {
    color: var(--color-gray-text, #6b7280);
    font-size: var(--font-base, 1.4rem);
    white-space: nowrap;
}

/* #1-⑥ 右端アクションはボタンではなくテキストのアクションリンクに統一。
   ラベル長の違いでボタン幅がまちまちになる違和感を解消する。 */
.management-list__item > a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-dark-blue, #192c3c);
    font-size: var(--font-base, 1.4rem);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.management-list__item > a::after {
    content: "\203A"; /* › */
    font-size: 1.7rem;
    line-height: 1;
}

.management-list__item > a:hover {
    background: none;
    color: var(--color-green, #0c8816);
    text-decoration: underline;
}

/* #1-⑤ サマリーの登録情報の管理: 中央ステータスを行の中央に固定。
   左右列を等幅 (1fr) にすることで、ラベル/アクションの長さが変わっても
   中央ステータスの位置が左右にずれない。 */
.mypage-management-section .management-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.mypage-management-section .management-list__item .status-inline {
    justify-self: center;
    text-align: center;
}

.mypage-management-section .management-list__item > a {
    justify-self: end;
}

/* ============================================================
 * 4. メッセージ一覧 (SP) — badge 列とテキスト列の潰れ防止
 * ============================================================ */
.message-item__snippet {
    margin: 4px 0 0;
    color: var(--color-gray-text, #6b7280);
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.message-item__badge--category,
.message-item__badge--channel,
.message-item__badge--archived,
.message-item__badge--important {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    background-color: var(--color-gray-bg, #f3f4f6);
    color: var(--color-gray-text, #6b7280);
}

.message-item__badge--important {
    background-color: #fef3c7;
    color: #92400e;
}

.message-item__badge--archived {
    background-color: #e5e7eb;
    color: #374151;
}

@media (max-width: 768px) {
    .js-message-link {
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px;
    }

    .message-item__status {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .message-item__content {
        flex: 1 1 100%;
    }
}

/* ============================================================
 * 5. (削除) データテーブル救済 band-aid — 2026-07-13 mypageサイクル2で撤去。
 *    対象一覧(申込/サポート/ポイント/セカトレ注文・決済/いつカン/同意)は
 *    すべて共通 c-table コンポーネント(table.css, 16px)へ移行済み。生Tailwind
 *    (text-xs=7.5px)依存は解消され、本 band-aid は dead になったため削除した。
 * ============================================================ */

/* ============================================================
 * 6. 通知/注意ボックス (alert-box) + ステータスバッジ variant
 * ============================================================ */
.alert-box {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-gray-border, #e5e7eb);
    background-color: var(--color-gray-bg, #f8f9fa);
    font-size: 14px;
    line-height: 1.7;
    margin: 12px 0;
}

.alert-box--info {
    border-color: #bfdbfe;
    background-color: #eff6ff;
    color: #1e40af;
}

.alert-box--success {
    border-color: #a7f3d0;
    background-color: #ecfdf5;
    color: #065f46;
}

.alert-box--warning {
    border-color: #fde68a;
    background-color: #fffbeb;
    color: #92400e;
}

.alert-box--danger {
    border-color: #fecaca;
    background-color: #fef2f2;
    color: #991b1b;
}

.status-badge--success { background-color: #ecfdf5; color: #065f46; }
.status-badge--info    { background-color: #eff6ff; color: #1e40af; }
.status-badge--warning { background-color: #fffbeb; color: #92400e; }
.status-badge--muted   { background-color: var(--color-gray-bg, #f3f4f6); color: var(--color-gray-text, #6b7280); }

/* ============================================================
 * 7. 汎用ユーティリティ — 戻りリンク / ヒント / エラー / 空表示
 * ============================================================ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--color-gray-text, #6b7280);
    font-size: 13px;
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-dark-blue, #1b2f48);
    text-decoration: underline;
}

.hint-text {
    color: var(--color-gray-text, #6b7280);
    font-size: 13px;
    line-height: 1.7;
}

.form-errors {
    margin: 12px 0;
    padding: 12px 16px 12px 32px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background-color: #fef2f2;
    color: #991b1b;
    font-size: 14px;
}

.empty-text {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-gray-text, #6b7280);
    font-size: 14px;
}

/* 空状態(データ無し)の統一スタイル。inline指定が無いインスタンスに適用 */
.empty-state {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-gray-text, #666666);
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================
 * 8. 書面 / 同意 / エクスポートリスト
 * ============================================================ */
.document-list,
.agreement-list,
.exports-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.document-list__item,
.agreement-list__item,
.exports-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray-border, #e5e7eb);
}

.document-list__item:last-child,
.agreement-list__item:last-child,
.exports-list__item:last-child {
    border-bottom: none;
}

.agreement-list__main,
.exports-list__info {
    min-width: 0;
}

.agreement-list__label,
.exports-list__title {
    font-weight: 600;
    font-size: 15px;
}

.agreement-list__hint,
.exports-list__desc {
    display: block;
    margin-top: 2px;
    color: var(--color-gray-text, #6b7280);
    font-size: 12px;
    line-height: 1.6;
}

.agreement-list__hint--warning {
    color: #92400e;
}

.pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-dark-blue, #1b2f48);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .document-list__item,
    .agreement-list__item,
    .exports-list__item {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ============================================================
 * 9. 利用規約等の静的ページ (legal-page)
 * ============================================================ */
.legal-page__main {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    line-height: 1.9;
    font-size: 15px;
}

.legal-page__main h1 {
    font-size: 24px;
    margin-bottom: 16px;
}

.legal-page__main h2 {
    font-size: 18px;
    margin: 28px 0 8px;
}

.legal-page__note {
    margin-top: 32px;
    color: var(--color-gray-text, #6b7280);
    font-size: 13px;
}

/* ============================================================
 * 10. ボタン補完 — .more.btn-secondary (mypage 側 CSS 未定義分)
 *    素の .more / .btn-primary は public/style.css 定義済みの CTA のため
 *    上書きしない。c-btn 併用時は button.css 側の見た目を優先する。
 * ============================================================ */
button.more.btn-secondary:not(.c-btn),
a.more.btn-secondary:not(.c-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background-color: #fff;
    color: var(--color-dark-blue, #1b2f48);
    border: 1px solid var(--color-dark-blue, #1b2f48);
    transition: opacity 0.15s ease;
}

button.more.btn-secondary:not(.c-btn):hover,
a.more.btn-secondary:not(.c-btn):hover {
    opacity: 0.75;
}

/* ============================================================
 * 11. 破壊的操作ボタン (.more.btn-danger) — 連携解除 / 2FA解除 等
 *    mypage は public/style.css を読まないため danger 体裁が無い
 * ============================================================ */
button.more.btn-danger,
a.more.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background-color: #fff;
    color: #c0392b;
    border: 1px solid #e0b4b0;
    transition: background-color 0.15s ease;
}

button.more.btn-danger:hover,
a.more.btn-danger:hover {
    background-color: #fdf0ef;
}

/* ============================================================
 * 12. コントラスト是正 (2026-07-13 次サイクル)
 *    WCAG AA(本文4.5:1 / 大文字・UI 3:1)を満たすため、legacy の
 *    「白地/白文字に対して薄すぎる緑・グレー」をトークン再定義と
 *    クラス上書きで底上げする。装飾用途の緑(#56B25D)は据え置き。
 * ============================================================ */
:root {
    /* public style.css の CTA/強調緑。白文字2.65:1→brand-dark で4.63:1(AA)。
       塗りCTA・緑テキスト・緑アクセントの計61箇所を一括是正。装飾タグ(cat-*)は
       ハードコード #56b25d のため影響を受けない。 */
    --loud-color: #0C8816;
    /* ミュートテキスト。#707070 は灰地(#f2f2f4)上で4.4:1と僅かに不足のため #666 へ。
       白地5.7 / 灰地5.0 で AA クリア。mypage(--color-gray-text)と共通(--color-text-muted)
       の両トークンを揃える。 */
    --color-gray-text: #666666;
    --color-text-muted: #666666;
}

/* mypage ダッシュボード等で「実データのラベル」に薄い #a1a1a1(--color-gray, 2.6:1)
   が使われている箇所を、テキスト用トークン(--color-gray-text)へ寄せる。
   タブの非選択状態も判読可能にする(選択状態は別途 weight/色で区別)。 */
.stats-label,
.main-amount-period,
.period-tab,
.category-tab,
.fund-tab,
.fund-code-line {
    color: var(--color-gray-text, #666666);
}

/* ============================================================
 * 13. 微小フォントの底上げ (2026-07-13 次サイクル Batch2)
 *    必須/任意バッジは mypage の --font-xs(10px) を継承し10pxで判読しづらい。
 *    重要ラベルのため絶対px(12px)で最低可読サイズを担保する(public/mypage共通)。
 * ============================================================ */
.c-form__required,
.c-form__optional {
    font-size: 12px;
}

/* ============================================================
 * 14. 見落とし補正 — 緑テキストボタン (.btn-back)
 *    style.css .btn-back は #56b25e(白地2.6:1)。brand-dark で4.63:1 に。
 * ============================================================ */
.btn-back {
    color: var(--color-brand-dark, #0C8816);
}

/* ============================================================
 * 15. セカトレ nav の白文字コントラスト (ユーザー選択)
 *    .menu_list--secondary / .sidebar_menu09 a は --color-sky(#39B6D9)地に
 *    白太字で2.4:1。sky系の状態色(運用中/補助)は据え置き、当該navのみ
 *    深めの #1E8DB0(白太字3.8:1, 3:1クリア)へ。
 * ============================================================ */
.menu_list--secondary,
.sidebar_menu09 a {
    background-color: #1E8DB0;
}

/* ============================================================
 * 16. キーボードフォーカスの可視化 (状態網羅: focus)
 *    public style.css は `a:focus{outline:none}` 等でフォーカス輪郭を消して
 *    おり、キーボード操作時に現在位置が不可視。リンク/ボタンに可視リングを
 *    復活させる。.c-btn / .c-form-control は各自の focus-visible を持つため
 *    ここでは触れない(specificityで各コンポーネントが勝つ)。
 * ============================================================ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-dark-blue, #1b2f48);
    outline-offset: 2px;
}

/* 暗い背景(フッター/サイドバー/SPドロワー)では白リングにして視認性を担保 */
.footer a:focus-visible,
.menu_list:focus-visible,
#sp-nav a:focus-visible,
#sp-nav button:focus-visible {
    outline-color: #ffffff;
}

/* ============================================================
 * 17. タップ領域の確保 (状態網羅: SP タッチ, 最低44px)
 *    フッター法務リンク(17-19px)/SPドロワーリンク/戻るリンク(20px)を
 *    タッチしやすい高さに。PC は据え置き(マウス前提)。
 * ============================================================ */
@media (max-width: 768px) {
    .footer__main--bottom nav a,
    .footer__main--top ul a,
    #sp-nav .list-items a,
    #sp-nav > ul a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .back-link {
        min-height: 44px;
    }
}

/* ============================================================
 * 18. マイpage PCサイドバーのスクロール確保 (2026-07-13 mypageサイクル)
 *    style.css .sidebar は position:fixed; top:64px; height:100vh のため
 *    ビューポート下端を64px超過し、かつ overflow 指定が無い。画面高が
 *    足りない(=メニュー13項目+ログアウトが入り切らない)環境で最下段の
 *    項目(ポイントクエスト等)に到達できず操作不能になる。
 *    利用可能高(100vh - header)に収め、溢れたら内部スクロールさせる。
 *    ≤1023px は .sidebar が画面外へ退避しハンバーガー .menu_content
 *    (既に overflow-y:auto)が使われるため、PCサイドバーのみ対象。
 * ============================================================ */
.sidebar {
    height: calc(100vh - var(--header-height, 6.4rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ============================================================
 * 19. マイpage インライン見出し(page-title)のサイズ抑制 (mypageサイクル)
 *    style.css .mainbar_contents_head h1 は --font-5xl(36px)。サービスpage
 *    の36px h1 は背景付きヒーローだが、マイpageは密度の高い本文上の
 *    インライン見出しなので過大に見える。サービス基準の落ち着いた大きさ
 *    (--font-3xl 28px)へ。SP(≤768px)は style.css が --font-2xl(24px)に
 *    上書き済みのため、PC(≥769px)のみ対象にして SP 値を保持する。
 * ============================================================ */
@media (min-width: 769px) {
    .mainbar_contents_head h1 {
        font-size: var(--font-3xl);
        line-height: 1.35;
    }
}

/* ============================================================
 * 20. タブ意匠の統一 (mypageサイクル)
 *    account-tabs (アカウント/設定) と js-documents-tab (各種明細) を
 *    ファンド管理の category-tabs (紺色下線) に揃える。既定は緑下線で
 *    ページ間でタブの見え方が割れていたため、紺(--color-dark-blue)の
 *    アクティブ下線 + 4px で統一する。
 * ============================================================ */
.account-tabs__tab,
.js-documents-tab {
    border-bottom-width: 4px;
}

.account-tabs__tab:hover,
.js-documents-tab:hover {
    color: var(--color-dark-blue);
}

.account-tabs__tab.is_active,
.js-documents-tab.is_active {
    color: var(--color-dark-blue);
    border-bottom-color: var(--color-dark-blue);
}

/* ============================================================
 * 21. (廃止) ダッシュボードカードの二重パディング解消
 *    c-card 統合により .dashboard-box-component クラスは撤去。c-card 自体は
 *    コンテナ padding を持たず __header/__body のみが padding を持つため
 *    二重 padding は発生せず、本規則は不要になった。
 * ============================================================ */

/* ============================================================
 * 22. 縦積みカードの間隔確保 (#5/#6/#7)
 *    documents / account 等、grid の外で直に縦積みされる c-card は
 *    隣接して余白が無いため、連続カード間に縦マージンを付与する。
 *    summary の dashboard-grid / property-section-grid 内カードは
 *    親の gap で制御されるため対象外 (直下セレクタで限定)。
 * ============================================================ */
.mainbar_contents > .c-card + .c-card {
    margin-top: var(--spacing-xl, 2.4rem);
}

/* secondary-market: .market-order-forms は display:block 上書きにより
   売り注文/買い注文カードが gap 無しで隣接する。market-section 内で
   縦積みされる連続カードに縦マージンを付与する。 */
.market-section .c-card + .c-card {
    margin-top: var(--spacing-xl, 2.4rem);
}

/* ============================================================
 * 23. status-badge / カードヘッダーの全ページ統一
 *    カードヘッダー(c-card__header)を flex(タイトル左/バッジ右)にし、
 *    status-badge を pill + tone にして全 mypage ページで一貫させる。
 *    ヘッダー flex は .mainbar_contents スコープで mypage 限定(admin 無影響)。
 * ============================================================ */
.mainbar_contents .c-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md, 1.6rem);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 1.2rem;
    border-radius: 999px;
    background-color: var(--color-green-bg, #e8f5e8);
    color: var(--color-green, #0c8816);
    font-size: var(--font-sm, 1.2rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.7;
    white-space: nowrap;
}

.status-badge--success {
    background-color: var(--color-green-bg, #e8f5e8);
    color: var(--color-green, #0c8816);
}

.status-badge--warning {
    background-color: #fff4e5;
    color: #a85a00;
}

.status-badge--danger {
    background-color: #fdecec;
    color: #c0392b;
}

.status-badge--muted {
    background-color: var(--color-gray-light, #f0f0f2);
    color: var(--color-gray-text, #666);
}

/* ============================================================
 * 24. category-badge — 問い合わせ等のカテゴリ表示 pill
 *    status-badge(塗り)と併記されるため、アウトライン調にして
 *    「状態」と「カテゴリ」を視覚的に区別する。
 * ============================================================ */
.category-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.2rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #dedede);
    background-color: var(--color-bg, #fff);
    color: var(--color-text-muted, #707070);
    font-size: var(--font-sm, 1.3rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.7;
    white-space: nowrap;
}

/* ============================================================
 * 25. support-thread — 問い合わせ会話スレッド
 *    「あなた」「運営」の発言をカード/吹き出しで区別し、
 *    会話の視認性・発言者の判別性・区切りを確保する。
 * ============================================================ */
.support-thread {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1.6rem);
    margin: var(--spacing-lg, 2rem) 0;
}
.support-thread__item {
    max-width: 82%;
    padding: var(--spacing-md, 1.6rem);
    border: 1px solid var(--color-border-soft, #e5e5e5);
    border-radius: var(--radius-md, 0.8rem);
    box-shadow: var(--shadow-sm, 0 0.2rem 0.4rem rgba(25, 44, 60, 0.06));
    background-color: var(--color-bg, #fff);
    box-sizing: border-box;
}
/* 投資家(あなた) = 右寄せ / brand tint */
.support-thread__item--investor {
    align-self: flex-end;
    background-color: var(--color-brand-bg, #e6f4e9);
    border-color: var(--color-brand, #56b25d);
}
/* 運営 = 左寄せ / neutral */
.support-thread__item--admin {
    align-self: flex-start;
    background-color: var(--color-bg-subtle, #f8f8f8);
}
.support-thread__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm, 1.2rem);
    margin-bottom: 0.6rem;
}
.support-thread__head > strong {
    font-size: var(--font-sm, 1.3rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text, #192c3c);
}
.support-thread__head > time {
    font-size: var(--font-xs, 1.2rem);
    color: var(--color-text-muted, #707070);
}
.support-thread__body {
    font-size: var(--font-base, 1.4rem);
    line-height: 1.8;
    color: var(--color-text, #192c3c);
    word-break: break-word;
}
@media (max-width: 768px) {
    .support-thread__item {
        max-width: 100%;
    }
}

/* ============================================================
 * 26. notifications-matrix — 通知設定(チャネル × カテゴリ)テーブル
 *    未定義だったためブラウザ既定表示(余白0/枠線なし/狭幅)に
 *    フォールバックしていた。全幅・ヘッダ地色・行区切り・列整列を
 *    与え、カテゴリとチェックボックスの対応を明確にする。
 * ============================================================ */
.notifications-matrix {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-bg, #fff);
}
.notifications-matrix thead th {
    padding: var(--spacing-sm, 1.2rem) var(--spacing-md, 1.6rem);
    background-color: var(--color-bg-muted, #f2f2f4);
    border-bottom: 1px solid var(--color-border-soft, #e5e5e5);
    font-size: var(--font-sm, 1.3rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text, #192c3c);
    white-space: nowrap;
}
.notifications-matrix thead th:not(:first-child) {
    width: 7.2rem;
    text-align: center;
}
.notifications-matrix tbody td {
    padding: var(--spacing-md, 1.6rem);
    border-bottom: 1px solid var(--color-border-soft, #e5e5e5);
    vertical-align: top;
}
.notifications-matrix tbody td:not(:first-child) {
    text-align: center;
}
.notifications-matrix tbody tr:last-child td {
    border-bottom: none;
}
.notifications-matrix__category-label {
    display: block;
    font-size: var(--font-md, 1.6rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text, #192c3c);
}
.notifications-matrix__category-desc {
    margin-top: 0.2rem;
    font-size: var(--font-sm, 1.3rem);
    color: var(--color-text-muted, #707070);
}
.notifications-matrix__events {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.notifications-matrix__events > li {
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-sm, 0.4rem);
    background-color: var(--color-bg-subtle, #f8f8f8);
    border: 1px solid var(--color-border-soft, #e5e5e5);
    font-size: var(--font-xs, 1.2rem);
    color: var(--color-text-muted, #707070);
    white-space: nowrap;
}