/* ============================================================
   PresenceAI base.css
   仕様: docs/18_frontend_design.md

   CSS 変数・リセット・typography・layout 基盤。
   コンポーネント・ページ固有は components/*.css, pages/*.css へ。
   ============================================================ */

:root {
    /* ===== ベース（モノクロ骨格） ===== */
    --color-bg:            #ffffff;
    --color-bg-dark:       #1a1a1a;
    --color-bg-subtle:     #f5f5f5;
    --color-bg-hover:      #fafafa;

    --color-border:        #e5e5e5;
    --color-border-dark:   #2a2a2a;

    --color-text:          #1a1a1a;
    --color-text-muted:    #666666;
    --color-text-light:    #999999;
    --color-text-on-dark:  #ffffff;

    /* ===== プライマリ（構造・黒） ===== */
    --color-primary:        #1a1a1a;
    --color-primary-hover:  #333333;

    /* ===== アクセント（インタラクション・NK Inter ロゴ青） ===== */
    --color-accent:         #00a4e3;
    --color-accent-hover:   #0090c8;
    --color-accent-light:   #e6f6fc;

    /* ===== セマンティック ===== */
    --color-success:        #10b981;
    --color-warning:        #f59e0b;
    --color-danger:         #dc2626;
    --color-info:           #00a4e3;

    /* ===== フォーカスリング ===== */
    --focus-ring:           0 0 0 3px rgba(0, 164, 227, 0.25);

    /* ===== タイポグラフィ ===== */
    --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN',
                 'Yu Gothic UI', 'Meiryo UI', sans-serif;
    --font-mono: 'SF Mono', Consolas, 'Courier New', monospace;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    700;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  2rem;

    /* ===== スペーシング (4px grid) ===== */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ===== コンテンツ幅 ===== */
    --mw-reading: 800px;
    --mw-form:    640px;
    --mw-page:   1600px;

    /* ===== App Shell (サイドバー + コンテンツ) ===== */
    --sidebar-w:        240px;
    --topbar-h:         56px;
    --color-sidebar-bg: #1a1a1a;
    --color-sidebar-fg: #e5e5e5;
    --color-sidebar-muted: #9a9a9a;
    --color-sidebar-active-bg: rgba(0, 164, 227, 0.15);
    --color-sidebar-active-fg: #00a4e3;
    --color-sidebar-border: #2a2a2a;

    /* ===== 角丸・影 ===== */
    --radius-sm: 3px;
    --radius:    4px;
    --radius-lg: 8px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow:    0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img, svg, video, canvas { max-width: 100%; height: auto; }

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ===== 見出し ===== */
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold);   margin-bottom: var(--sp-4); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);   margin-bottom: var(--sp-3); }
h3 { font-size: var(--fs-xl);  font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
h4 { font-size: var(--fs-lg);  font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }

/* ===== App Shell ===== */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;  /* Grid 子要素の overflow 抑制 */
}

.app-content {
    flex: 1;
    padding: var(--sp-6);
    width: 100%;
    max-width: none;  /* fluid: 画面幅固定しない */
    /* コンテナクエリの基準: 子要素（フォーム等）がコンテンツ幅に応じて
       レイアウトを切り替えられるようにする */
    container-type: inline-size;
    container-name: appcontent;
}

.app-footer {
    padding: var(--sp-6) var(--sp-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ===== Sidebar ===== */
.app-sidebar {
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-fg);
    border-right: 1px solid var(--color-sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-sidebar__brand {
    padding: var(--sp-4) var(--sp-4);
    border-bottom: 1px solid var(--color-sidebar-border);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
}
.app-sidebar__brand a {
    color: var(--color-text-on-dark);
    text-decoration: none;
    display: block;
}
.app-sidebar__brand a:hover { color: var(--color-accent); }
.app-sidebar__brand-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

.app-sidebar__nav {
    flex: 1;
    padding: var(--sp-3) 0;
    overflow-y: auto;
}

.app-sidebar__section {
    margin-bottom: var(--sp-4);
}

.app-sidebar__heading {
    padding: var(--sp-3) var(--sp-4) var(--sp-1);
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--color-sidebar-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-top: 1px solid var(--color-sidebar-border);
}
/* 最初のセクションの上には border を付けない（ホーム直下が浮く対策） */
.app-sidebar__section:first-of-type .app-sidebar__heading,
.app-sidebar__section:first-child .app-sidebar__heading {
    border-top: none;
    margin-top: 0;
}

.app-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    /* 見出しよりも 1 段深くインデントして階層を示す */
    padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6);
    color: var(--color-sidebar-fg);
    text-decoration: none;
    font-size: var(--fs-sm);
    border-left: 3px solid transparent;
    transition: background 120ms, border-color 120ms, color 120ms;
}
/* メニュー項目の先頭に '·' を付けて見出しとの区別を明確にする */
.app-sidebar__link::before {
    content: '·';
    color: var(--color-sidebar-muted);
    font-size: var(--fs-base);
    line-height: 1;
    width: 0.5em;
}
.app-sidebar__link.is-active::before {
    color: var(--color-sidebar-active-fg);
}
.app-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: var(--color-text-on-dark);
}
.app-sidebar__link.is-active {
    background: var(--color-sidebar-active-bg);
    border-left-color: var(--color-sidebar-active-fg);
    color: var(--color-sidebar-active-fg);
    font-weight: var(--fw-medium);
}

.app-sidebar__user {
    border-top: 1px solid var(--color-sidebar-border);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.app-sidebar__user-name { font-weight: var(--fw-medium); }
.app-sidebar__user-role { font-size: var(--fs-xs); color: var(--color-sidebar-muted); }
.app-sidebar__user .btn {
    min-height: auto;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
}

/* ===== Topbar ===== */
.app-topbar {
    height: var(--topbar-h);
    padding: 0 var(--sp-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: 50;
}

.app-topbar__toggle {
    display: none;  /* モバイル時のみ表示 */
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
    font-size: var(--fs-lg);
}
.app-topbar__title {
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
}
.app-topbar__spacer { flex: 1; }

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}
.app-topbar__action {
    color: var(--color-text);
    text-decoration: none;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius);
}
.app-topbar__action:hover {
    background: var(--color-bg-subtle);
    text-decoration: none;
}

/* ===== コンテンツ幅ヘルパ（ページ内で読みやすさを確保） ===== */
.container-form    { max-width: var(--mw-form);    margin: 0 auto; }
.container-reading { max-width: var(--mw-reading); margin: 0 auto; }

/* 後方互換: 既存の .main クラスも一応効かせる（新規コードでは .app-content を使用） */
.main {
    flex: 1;
    padding: var(--sp-6) var(--sp-4);
    width: 100%;
}

/* ===== レガシーヘッダー（認証ページなど、サイドバー非表示環境で使用） ===== */
.header {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
    padding: var(--sp-3) var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.header__brand {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    color: var(--color-text-on-dark);
}
.header__brand:hover { text-decoration: none; color: var(--color-accent); }

.header__user {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
}

.header__user-name { color: var(--color-text-on-dark); }

/* ===== モバイル (~860px): サイドバーをドロワー化 ===== */
@media (max-width: 860px) {
    .app-shell { grid-template-columns: 1fr; }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        z-index: 100;
    }
    .app-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

    .app-topbar__toggle { display: inline-flex; }

    .app-content { padding: var(--sp-4); }

    /* ドロワー開閉時のオーバーレイ */
    .app-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 90;
    }
    .app-overlay.is-open { display: block; }
}

/* ===== ボタン ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2) var(--sp-6);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    min-height: 44px;
    transition: background-color 150ms, border-color 150ms;
    text-decoration: none;
    white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}
.btn--primary:hover { background: var(--color-primary-hover); text-decoration: none; color: var(--color-text-on-dark); }

.btn--secondary {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--secondary:hover { background: var(--color-bg-subtle); text-decoration: none; }

.btn--danger {
    background: var(--color-danger);
    color: var(--color-text-on-dark);
}

.btn--block { width: 100%; }

/* 小サイズ修飾子: テーブル内アクション等（削除・編集ボタン） */
.btn--sm {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-xs);
    min-height: auto;
}

/* ===== フォーム =====
   管理画面の既定は Smaregi 風 2 カラム（ラベル : 入力 = 25 : 75、入力は可変幅）。
   ラベル列は最低幅 140px を保持し、下回るコンテナ幅では縦積みに切り替わる。
   認証ページ (.main 内 .container-form / .auth-page) は従来の縦積みにフォールバック。 */
.form-field {
    display: grid;
    grid-template-columns: minmax(140px, 25%) 1fr;
    gap: var(--sp-2) var(--sp-4);
    align-items: start;
    padding: var(--sp-3) 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}
.form-field:last-child { border-bottom: none; }

.form-field__label {
    padding-top: var(--sp-2);
    margin-bottom: 0;
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);  /* 入力と同サイズに揃える */
    color: var(--color-text);
    min-width: 0;          /* grid cell overflow 対策 */
    word-break: break-word;
}

.form-field__input,
.form-field__select,
.form-field__textarea {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-base);  /* iOS zoom 回避のため 16px 以上 */
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 150ms, box-shadow 150ms;
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

/* 補助テキスト: 入力列（2 列目）の下に配置 */
.form-field__help,
.form-field__error {
    grid-column: 2;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
}
.form-field__help  { color: var(--color-text-muted); }
.form-field__error { color: var(--color-danger); }

/* 狭いコンテナで 1 カラム縦積みに切替。
   コンテナクエリが効くように .app-content を inline-size コンテナに設定している。
   ビューポート未対応ブラウザ向けにメディアクエリも併記。 */
@container appcontent (max-width: 640px) {
    .form-field { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-2) 0; }
    .form-field__label { padding-top: 0; }
    .form-field__help,
    .form-field__error { grid-column: 1; }
}

/* フォールバック (media query): 画面幅ベース。
   コンテナクエリ対応ブラウザでは上の @container が優先されます。 */
@media (max-width: 640px) {
    .form-field { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-2) 0; }
    .form-field__label { padding-top: 0; }
    .form-field__help,
    .form-field__error { grid-column: 1; }
}

/* 認証済みレイアウト (.app-content) では container-* の幅制約を解除（fluid 運用）。
   フォームは 2 カラム（Smaregi 風）をそのまま使う。 */
.app-content .container-reading,
.app-content .container-form {
    max-width: none;
}

/* 未認証レイアウト (.main 内) の .container-form / .auth-page は従来の狭幅 + 縦積み
   （ログイン・パスワードリセット・招待受諾など認証系フォームの見た目維持） */
.main .container-form .form-field,
.main .auth-page .form-field {
    display: block;
    border-bottom: none;
    padding: 0;
    margin-bottom: var(--sp-4);
}
.main .container-form .form-field__label,
.main .auth-page .form-field__label {
    display: block;
    flex: none;
    padding-top: 0;
    margin-bottom: var(--sp-1);
}
.main .container-form .form-field__input,
.main .container-form .form-field__select,
.main .container-form .form-field__textarea,
.main .auth-page .form-field__input,
.main .auth-page .form-field__select,
.main .auth-page .form-field__textarea {
    width: 100%;
    max-width: none;
}
.main .container-form .form-field__help,
.main .container-form .form-field__error,
.main .auth-page .form-field__help,
.main .auth-page .form-field__error {
    margin-left: 0;
    max-width: none;
    margin-top: var(--sp-1);
}

/* ===== カード ===== */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

/* ===== Filter Bar =====
   一覧ページの上部に置く検索・絞り込みフィルタのコンポーネント。
   .form-field とは別系統（ラベルを入力の上に置く縦並び小型ユニットを横に敷き詰める）。
   各フィールドは flex で伸縮し、画面幅に応じて自動で折り返す。 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding: var(--sp-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.filter-bar__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-end;
}

.filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 180px;
    min-width: 180px;
    max-width: 320px;
}

.filter-bar__field label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    margin: 0;
}

.filter-bar__field input:not([type="checkbox"]):not([type="radio"]),
.filter-bar__field select {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 150ms, box-shadow 150ms;
}
.filter-bar__field input:not([type="checkbox"]):not([type="radio"]):focus,
.filter-bar__field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.filter-bar__field--checkbox {
    flex: 0 0 auto;
    min-width: auto;
    justify-content: flex-end;
    padding-bottom: var(--sp-2);  /* 他のフィールドと下端を揃える */
}
.filter-bar__field--checkbox label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--color-text);
    cursor: pointer;
}

.filter-bar__actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}
.filter-bar__actions .btn {
    min-height: auto;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
}

/* ===== Page Header =====
   ページ先頭の h1 + 右端アクション（新規作成ボタン等）を揃える。 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header__actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}

/* 戻るリンク（show / edit 冒頭に置く「← 〇〇に戻る」） */
.back-link {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
}

/* ===== Section Header =====
   カード内の h2 + 右端メタ（件数・更新日時等）。 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}
.section-header h2,
.section-header h3 { margin: 0; }
.section-header__meta {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.section-header__actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ===== Form Actions =====
   フォーム送信ボタン行（primary + secondary 等）を画面ごとに揃える。
   直前要素（.form-field など）と視覚的に余白を確保する。 */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
}

/* ===== Data Table =====
   一覧ページの標準テーブル。セル padding / 区切り線を内蔵する。 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.data-table thead tr {
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.data-table th,
.data-table td {
    padding: var(--sp-2);
    vertical-align: top;
}
.data-table tbody tr {
    border-bottom: 1px solid var(--color-border);
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
.data-table td--muted,
.data-table .text-muted {
    color: var(--color-text-muted);
}
.data-table td--xs,
.data-table .text-xs {
    font-size: var(--fs-xs);
}
.data-table td--nowrap {
    white-space: nowrap;
}
.data-table th--right,
.data-table td--right {
    text-align: right;
}
.data-table th--center,
.data-table td--center {
    text-align: center;
}

/* ===== Pagination =====
   一覧ページ下部の「← 前へ / X / Y ページ / 次へ →」。 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}
.pagination__info {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* ===== List Item =====
   カード内にフラットに並べる項目（通知・メッセージ・履歴エントリ等）。
   最後の要素は区切り線を出さない。 */
.list-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.list-item:last-child {
    border-bottom: none;
}
.list-item__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}
.list-item__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
}

/* ===== Meta Info =====
   フォームの下に置く「最終更新・作成日」などの小さなメタ情報。
   編集カード末尾に配置する。 */
.meta-info {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

/* ===== Danger Zone =====
   削除など取り消し不能な操作を、普段は閉じたアコーディオン内に収める。
   目立ちすぎないように通常時は summary のみ小さく表示し、展開時だけ赤系 UI を出す。 */
.danger-zone {
    margin-top: var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
}
.danger-zone > summary {
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    list-style: none;
    user-select: none;
}
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary::before {
    content: '▸ ';
    display: inline-block;
    margin-right: var(--sp-1);
    transition: transform 120ms;
}
.danger-zone[open] > summary::before {
    transform: rotate(90deg);
}
.danger-zone[open] > summary {
    color: var(--color-danger);
    border-bottom: 1px solid var(--color-border);
}
.danger-zone__body {
    padding: var(--sp-3);
}
.danger-zone__body .form-field__help {
    margin-bottom: var(--sp-3);
}

/* ===== 認識精度バッジ（文字起こし試行ログ） =====
   読み取り精度を色分けして表示する。
   95% 以上=良好、80-95%=注意、80% 未満=不足（= 自動再試行の境界）。 */
.precision {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}
.precision--good { background: #d1fae5; color: #065f46; }
.precision--warn { background: #fef3c7; color: #854d0e; }
.precision--bad  { background: #fee2e2; color: #991b1b; }

/* ===== フラッシュメッセージ ===== */
.flash {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
}

.flash--success { background: #d1fae5; color: #065f46; border: 1px solid var(--color-success); }
.flash--error   { background: #fee2e2; color: #991b1b; border: 1px solid var(--color-danger); }

/* ===== 認証ページ ===== */
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
}

.auth-card { width: 100%; max-width: 420px; }

.auth-card__title    { text-align: center; margin-bottom: var(--sp-1); font-size: var(--fs-2xl); }
.auth-card__subtitle { text-align: center; margin-bottom: var(--sp-6); color: var(--color-text-muted); font-size: var(--fs-sm); }
.auth-card__logo {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* ===== フッター ===== */
.footer {
    padding: var(--sp-6) var(--sp-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    margin-top: var(--sp-8);
}

/* ===== アバター ===== */
.avatar {
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface, #f1f5f9);
    flex-shrink: 0;
    vertical-align: middle;
}
.avatar--sm { width: 32px; height: 32px; }
.avatar--md { width: 40px; height: 40px; }
.avatar--lg { width: 128px; height: 128px; }

/* ===== モーダル（<dialog> ベース） =====
   docs/18_frontend_design.md §モーダル
   <dialog> は showModal() で開かれた時、ブラウザが自動的にビューポート中央に配置する。
   不要に position/display を上書きすると中央配置が崩れるため、最小限の指定に留める。 */
dialog.modal {
    border: none;
    border-radius: var(--radius-md);
    padding: 0;
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    /* modal__close を absolute 配置するための containing block */
    position: relative;
    /* dialog 全体でスクロール（max-height を超えた分を内部スクロール）*/
    overflow-y: auto;
    overflow-x: hidden;
}
/* ワイドモーダル（フォーム多めのコンテンツ向け）*/
dialog.modal.modal--wide {
    width: min(720px, 90vw);
}
dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}
.modal__body {
    padding: var(--sp-5);
    box-sizing: border-box;
}
.modal__close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    border: none;
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-xl);
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    z-index: 1;
}
.modal__close:hover { background: var(--color-surface, #f1f5f9); }

/* ===== 公開プロフィール ===== */
.public-profile__header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.public-profile__heading { flex: 1; min-width: 0; }
.public-profile__name {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: 1.3;
}
.public-profile__title {
    margin: var(--sp-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.public-profile__intro {
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.public-profile__intro--empty { color: var(--color-text-muted); }

/* ===== アバター入力プレビュー ===== */
.avatar-upload {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.avatar-upload__preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface, #f1f5f9);
    border: 1px solid var(--color-border);
}