/* === Self-hosted fonts (replaces Google Fonts CDN) === */

/* Inter — variable font, latin subset, weights 400-600 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans — variable font, latin subset, weights 500-800 */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg-color: #f4f7fb;
    --border-color: rgba(226, 232, 240, 0.8);
    --header-bg: rgba(255, 255, 255, 0.85);
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --primary-gradient-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    --text: #1e293b;
    --text-muted: #64748b;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --card-bg: rgba(255, 255, 255, 0.95);
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --glass-blur: blur(12px);
    /* ツールバー／フィルターヘッダー内のボタン・セレクト・入力の高さ・角丸の共通基準（P-18） */
    --toolbar-ctl-h: 32px;
    --toolbar-ctl-radius: 16px;
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at 15% 50%, rgba(79, 70, 229, 0.04), transparent 25%), radial-gradient(circle at 85% 30%, rgba(124, 58, 237, 0.04), transparent 25%);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app-container {
    display: none; /* Hidden initially, shown after authentication */
    flex-direction: column;
    height: 100vh;
}

header {
    background: var(--header-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    font-size: 1.6rem;
    color: var(--primary);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

header h1 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--text);
}

.btn {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.25;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-gradient-hover);
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
}

/* 無効化されたボタンは押せないことが見た目で伝わるようにする
   （半透明・グレーカーソル・ホバーの浮き上がりを無効化）。
   ページ送りの「前へ/次へ」が端に達したときなど、generic .btn を
   disabled にする箇所で「押せそうに見えるのに反応しない」を防ぐ。表示のみ。 */
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 未保存の編集があるときの保存ボタン強調と「未保存」バッジ */
.btn-dirty {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55), 0 2px 4px rgba(79, 70, 229, 0.25);
}

.unsaved-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background-color: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    /* 未保存の編集があるときだけ表示されるバッジを穏やかに点滅させ、保存忘れに気づきやすくする */
    animation: unsaved-badge-pulse 2s ease-in-out infinite;
}

@keyframes unsaved-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

.unsaved-badge[hidden] {
    display: none;
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--text);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    background-color: #ffffff;
    border-color: #cbd5e1;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px;
    margin-left: 4px;
    border-radius: 6px;
    transition: all 0.2s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.btn-icon:hover {
    background: #e2e8f0;
    color: var(--primary);
}

/* 削除など取り返しのつかない破壊的操作の btn-icon。既定は他のアイコンボタンと同じ控えめな見た目のまま、
   ホバー／フォーカス時のみ淡い赤（danger）を当てて誤クリックを抑止する（P-16, .btn-view-delete と同じ方針。表示のみ・確認ダイアログ挙動は不変） */
.btn-icon-danger:hover:not(:disabled) {
    background: #fef2f2;
    color: #dc2626;
}
.btn-icon-danger:focus-visible {
    color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

/* テキスト付きの btn-secondary 版（P-38, セルコメント削除など）。既定は他の btn-secondary と同じ見た目のまま、
   ホバー／フォーカス時のみ淡い赤（danger）を当てて破壊的操作であることを示す（表示のみ・確認ダイアログ挙動は不変） */
.btn-secondary-danger:hover:not(:disabled) {
    background-color: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}
.btn-secondary-danger:focus-visible {
    color: #dc2626;
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.toolbar {
    background: var(--header-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 90;
}

.axis-config {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.axis-panel, .filters-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(248, 250, 252, 0.7);
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.filters-panel {
    flex-direction: column;
    gap: 0;
}

.config-group {
    display: flex;
    align-items: center;
}

.config-group label {
    margin-right: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    width: auto;
    min-width: 65px;
    text-align: right;
}

.config-group select {
    padding: 6px 12px;
    min-width: 150px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    font-size: 13px;
    color: var(--text);
    transition: border-color 0.2s;
}

.config-group select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

.filters .config-group label {
    width: auto;
    min-width: 0;
}

/* Checkbox styling */
input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Data Grid Container */
.grid-container {
    flex-grow: 1;
    overflow: hidden;
    background: transparent;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Loading Overlay
   P-08: 大きなテナント・多列ビューで再描画に時間がかかると、薄いオーバーレイ＋小さな
   スピナーでは「操作が効いていない／固まった」と誤解されやすい。背景のコントラストを上げ、
   スピナーと文言を白いカード（.loading-panel）にまとめて中央にはっきり浮かせることで、
   処理中であることを明確に伝える。表示のみ・文言のみの調整で挙動は不変。 */
.loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(241, 245, 249, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    pointer-events: all;
}

.loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 40px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: loading-spin 0.7s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

.loading-message {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#data-grid {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    min-width: 100%;
}

/* Base table */
table {
    border-collapse: collapse;
    width: max-content;
    font-size: 0.9rem;
}

/* P-01: 横軸メンバー（列）が少ないとき、グリッド右側に大きな余白ができて間延びして
   見えるのを防ぐ。テーブルを最低でもスクロール領域いっぱい（100%）まで広げ、列が少ない
   ときは各列幅が伸びて余白を埋める。列が多く max-content が 100% を超える場合は従来どおり
   max-content（横スクロール）が優先されるため、多列時の挙動は不変。1列目（勘定科目）は
   既存の width/max-width で頭打ちになるため、余白は主にデータ列へ配分される。
   表示のみで集計・編集・保存には影響しない。 */
#data-grid table {
    min-width: 100%;
}

th, td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    min-width: 80px;
}

th {
    background-color: #f8fafc;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    font-family: var(--font-heading);
}

/* JSpreadsheet Custom Styling Overrides */
.jexcel_container {
    border: none;
    font-family: inherit;
}

.jexcel > thead > tr > td {
    background-color: #f8fafc !important;
    color: #334155 !important;
    font-weight: 700 !important;
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    white-space: normal !important;
    height: auto !important;
    vertical-align: middle !important;
    text-align: center !important;
    min-height: 40px;
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    font-size: 13px !important;
}

/* P-20: jspreadsheet-ce v4 が自動生成する行番号列（1, 2, 3...）を非表示にする。
   実際のDOM構造は #data-grid 自体が .jexcel_container であり（.jspreadsheet という
   親クラスは存在しない）、行番号セルの実クラスは .jexcel_index ではなく .jexcel_row
   （コーナーセルは .jexcel_selectall）のため、旧ルールはどの要素にも一致していなかった
   （実機のDOM調査で確認済み）。display:none で <td> を個別に隠すと <colgroup><col> の
   列幅マッピングが1列ずれ、実際の1列目（勘定科目など、data-x="0"）の幅が壊れる副作用が
   あるため、代わりに <colgroup> 側の対応する <col> に visibility:collapse を指定する。
   これは表全体でその列に属するセル（ヘッダー・本文とも）を列ごと描画から除外しつつ、
   他の列の colgroup インデックス対応やセル位置は保持される（実機で横スクロール・
   列幅リサイズを含めて確認済み）。列幅・固定列（P-04）・集計・編集・保存・
   CSV/Excel出力・コピー（isIndexCell が data-x 属性の有無で別途判定しており、
   このCSSとは独立して元々正しく除外している）には影響しない表示のみの変更。 */
#data-grid table.jexcel > colgroup > col:first-child {
    visibility: collapse;
}

/* Ensure the first actual data column (headers) is visible and styled.
   P-03: 1列目（勘定科目）の見出しは、本文の行ヘッダー（.cell-row-header は左寄せ）と
   左端を揃えるため左寄せにする。他の月ヘッダーは中央寄せのまま。表示のみの調整。 */
.jspreadsheet > .jexcel_content > table > thead > tr > td[data-x="0"],
.jspreadsheet > .jexcel_content > table > thead > tr > td:nth-child(2) {
    display: table-cell !important;
    text-align: left !important;
}

/* P-03: 1列目（行ヘッダー＝勘定科目など）の見出しを、本文のメンバー名（左寄せ）と
   左端で揃えるため左寄せにする。データ列の見出しは従来どおり中央寄せのまま。表示のみ。 */
.jexcel > thead > tr > td[data-x="0"],
.jexcel > thead > tr > td:nth-child(2) {
    text-align: left !important;
}

.jexcel > tbody > tr > td {
    border: 1px solid var(--border-color) !important;
    padding: 6px 10px !important;
    font-size: 14px;
}

.jexcel > tbody > tr > td.readonly {
    background-color: #f8fafc !important;
    color: #64748b !important;
}

.jexcel_content {
    box-shadow: none;
}

/* P-01: 横軸メンバーが少なくテーブルが画面右側まで届かないとき、白いカード内に
   広い余白が残り間延びして見える。コンテンツ領域にうっすらした背景色を敷くことで、
   白いデータセル（jspreadsheet 既定で背景白）が並ぶ「データ範囲」と、その外側の余白を
   視覚的に分離し、「データはここまで」が一目で伝わるようにする。多列で横スクロールが
   必要な場合も挙動は不変（背景色のみの表示調整で、列幅・集計・編集には影響しない）。
   jspreadsheet.min.css が style.css より後に読み込まれるため、#data-grid（ID）で
   詳細度を上げて確実に適用する。 */
#data-grid .jexcel_content {
    background: #f1f5f9;
}

td:first-child, th:first-child {
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 20;
    text-align: left;
    font-weight: 600;
    min-width: 300px;
    width: 320px;
    max-width: 450px;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 2px solid #cbd5e1 !important;
}

/* P-04: グリッド本体では、上の td:first-child ルールは非表示の行番号セル（data-x属性なし）
   にしか一致せず、実際に表示される1列目（勘定科目など、data-x="0"）は固定列になっていなかった
   （横スクロールすると本文と一緒に流れてしまう）。実際の1列目に直接 sticky を当てて固定列として
   機能させる。列幅は既存の列幅設定（jspreadsheet の列幅・リサイズ機能）をそのまま使うため、
   幅・padding 等は上書きしない。表示のみの修正で、集計・編集・保存・列幅リサイズ・
   CSV/Excel出力・コピーには影響しない。
   z-index: ヘッダー行の各セルは jspreadsheet.min.css 側で sticky top + z-index:2 が
   一律に付与されているため、左固定にする1列目ヘッダー（コーナーセル）は横スクロールで
   流れてくる他の列見出しの下に隠れないよう、それより高い 3 を指定する。本文側の1列目は
   同じ行の他セル（既定 z-index）より高く、ヘッダー行（2〜3）より低い 1 にして、
   スクロール時の重なり順（ヘッダー行 > 固定列 > 通常セル）を成立させる。 */
#data-grid .jexcel > thead > tr > td[data-x="0"] {
    position: sticky;
    left: 0;
    z-index: 3;
}
#data-grid .jexcel > tbody > tr > td[data-x="0"] {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* N-17: 横軸の先頭列を指定数だけ横スクロールしても画面左端（行ヘッダー列の右）に固定表示する
   「列固定」。対象列数は表示メニューの「固定する列数」（state.freezeColCount）で選び、
   grid.js の applyFrozenColumns() が対象セル（thead/tbody とも）へ .cell-frozen-col を付与し、
   実測した列幅の累積値を left にJSで設定する（列幅を決め打ちにせず、リサイズ後の実際の
   描画幅を使うため）。z-index は P-04（行ヘッダー列固定）と同じ考え方: ヘッダー行の固定列は
   横スクロールで流れてくる他の列見出しより上（3）、本文の固定列は同じ行の通常セルより上・
   ヘッダー行より下（1）。本文側は cell-editable 等の状態クラスが明示的な背景を持たないため、
   下に隠れず不透明に見えるよう白背景を敷く。 */
#data-grid .jexcel > thead > tr > td.cell-frozen-col {
    position: sticky;
    z-index: 3;
}
#data-grid .jexcel > tbody > tr > td.cell-frozen-col {
    position: sticky;
    z-index: 1;
    background-color: #ffffff;
}
/* 固定列の右端の境界（P-11と同じ考え方の影）。ヘッダー行の td には既に上端固定用の影
   （下記 P-11 のルール）が指定されているため、box-shadow は1つの宣言に両方併記して、
   ヘッダー行の固定列でも右端の影が欠けないようにする（従来は本文側にしか付いておらず、
   ヘッダー行だけ境界が見えなかった）。 */
#data-grid .jexcel > tbody > tr > td.cell-frozen-col-last {
    box-shadow: 2px 0 5px -2px rgba(15, 23, 42, 0.13);
}
#data-grid .jexcel > thead > tr > td.cell-frozen-col-last {
    box-shadow: 0 3px 5px -2px rgba(15, 23, 42, 0.13), 2px 0 5px -2px rgba(15, 23, 42, 0.13);
}
/* 上の cell-frozen-col の白背景は #data-grid でIDによる詳細度を上げているため、後方で
   定義されている cell-summary 等の状態別背景色（IDなしセレクタ）より詳細度が常に高く、
   ソース順に関わらず勝ってしまう。そのため列固定と集計値／読取専用／AIハイライト／
   条件付きハイライトが重なるセルは、意味を持つ背景色が白で覆い隠され「凡例」（P-22）どおりの
   状態表示にならない不具合があった。同じ #data-grid 起点で状態クラスを併記し
   cell-frozen-col 単体より詳細度を上げることで、各状態の背景色を正しく復元する
   （色の値は各状態のルールと同一。判定ロジック・保存・編集には影響しない表示のみの修正）。 */
#data-grid .jexcel > tbody > tr > td.cell-summary.cell-frozen-col {
    background-color: #e2e8f0;
}
#data-grid .jexcel > tbody > tr > td.cell-readonly-leaf.cell-frozen-col {
    background-color: #f1f5f9;
}
#data-grid .jexcel > tbody > tr > td.cell-ai-highlight.cell-frozen-col {
    background-color: #fef3c7;
}
#data-grid .jexcel > tbody > tr > td.cell-cond-high.cell-frozen-col {
    background-color: #fee2e2;
}
#data-grid .jexcel > tbody > tr > td.cell-cond-low.cell-frozen-col {
    background-color: #dbeafe;
}

tbody tr:hover td, tbody tr:hover th {
    background-color: #f1f5f9 !important;
}

th:first-child {
    z-index: 30;
}

/* P-11: ヘッダー行と1列目（勘定科目）はスクロールしても固定されるが、本文との境界に
   視覚差がなく「ここから上／左は固定見出し」と気づきにくい。固定領域の外側エッジに控えめな
   ドロップシャドウを付け、スクロール時に固定行・固定列が本文の上に浮いて見えるようにする。
   jspreadsheet.min.css が style.css より後に読み込まれるため #data-grid で詳細度を上げる。
   表示のみで集計・編集・スクロール挙動には影響しない。 */
#data-grid .jexcel > thead > tr > td {
    box-shadow: 0 3px 5px -2px rgba(15, 23, 42, 0.13);
}
#data-grid td:first-child {
    box-shadow: 2px 0 5px -2px rgba(15, 23, 42, 0.13);
}

input.cell-input {
    width: 100%;
    border: none;
    text-align: right;
    background: transparent;
    font-size: 0.95rem;
    padding: 4px 0;
    font-family: inherit;
}

input.cell-input:focus {
    outline: none;
    background: #fff;
}

/* Global Form Utility Classes */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-heading);
}

/* P-81: 入力欄と紐付いたラベル（for 付き）はクリックでフォーカスが移るため、
   その当たり判定があることをカーソル形状で示す。for の無い見出し（span）は既定のまま。 */
label.form-label[for] {
    cursor: pointer;
}

/* Global Form Input Style */
.form-input {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--text);
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.form-input::placeholder {
    color: #94a3b8;
}

/* Password field with show/hide toggle */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-input {
    padding-right: 40px;
}

.btn-toggle-password {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    font-size: 15px;
    color: var(--text-muted);
}

.btn-toggle-password:hover {
    color: var(--text);
}

/* テナントIDの空き状況インジケーター（登録フォーム） */
.tenant-id-status {
    font-weight: 600;
}
.tenant-id-status.is-ok {
    color: #059669;
}
.tenant-id-status.is-ng {
    color: #dc2626;
}
.tenant-id-status.is-checking {
    color: var(--text-muted);
    font-weight: 500;
}

/* パスワード要件のライブ表示（登録フォーム） */
.password-requirements {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.password-req {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.password-req::before {
    content: "○";
    font-size: 11px;
    font-weight: 700;
}
.password-req.is-met {
    color: #059669;
}
.password-req.is-met::before {
    content: "✓";
}

/* メールアドレスの打ち間違い訂正候補（登録フォーム）。確認コードが届かない離脱を防ぐ */
.email-suggestion {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}
.email-suggestion-fix {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

/* Slim table for management */
.management-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.management-table th, .management-table td {
    padding: 14px 16px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.management-table th {
    background-color: #f8fafc;
    font-weight: 700;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 13px;
}

.management-table tr:last-child td {
    border-bottom: none;
}

.management-table tr:hover td {
    background-color: #f1f5f9;
}

/* Badge styles for roles */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
}
.badge.SuperAdmin { background-color: #fef3c7; color: #92400e; border: 1px solid #fde68a;}
.badge.TenantAdmin { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0;}
.badge.GeneralUser { background-color: #e0f2fe; color: #075985; border: 1px solid #bae6fd;}
.badge-pending { background-color: #fef3c7; color: #92400e; border: 1px solid #fde68a; text-transform: none; letter-spacing: normal; }
.badge-active { background-color: #f1f5f9; color: #475569; border: 1px solid var(--border-color); text-transform: none; letter-spacing: normal; }

/* Modal styles */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: modalBgFadeIn 0.2s ease-out;
}

@keyframes modalBgFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content { 
    background-color: #ffffff; 
    margin: 3% auto; 
    border: 1px solid rgba(255,255,255,0.2); 
    width: 90%; 
    max-width: 1200px;
    height: 85%; 
    display: flex; 
    flex-direction: column; 
    border-radius: 16px; 
    box-shadow: var(--shadow-lg); 
    animation: modalContentFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalContentFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header { 
    padding: 20px 24px; 
    background-color: rgba(255, 255, 255, 0.9); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
}

.modal-footer {
    padding: 16px 24px;
    background-color: #f8fafc;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-header h2 { 
    margin: 0; 
    font-size: 1.25rem; 
    font-weight: 700; 
    color: var(--text); 
    font-family: var(--font-heading);
}

.close-btn { 
    color: #94a3b8; 
    font-size: 24px; 
    font-weight: 400; 
    cursor: pointer; 
    transition: color 0.2s; 
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-btn:hover { 
    color: var(--text); 
    background-color: #f1f5f9;
}

.modal-body { 
    display: flex; 
    flex-grow: 1; 
    overflow: hidden; 
    background-color: #ffffff; 
}

.dim-sidebar { 
    width: 260px; 
    border-right: 1px solid var(--border-color); 
    background: #f8fafc; 
    padding: 20px; 
}

.dim-sidebar ul { list-style-type: none; padding: 0; margin: 0; }

.dim-sidebar li { 
    padding: 12px 16px; 
    cursor: pointer; 
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-muted);
}

.dim-sidebar li:hover { 
    background: #e2e8f0; 
    color: var(--text); 
}

.dim-sidebar li.active { 
    background: var(--primary); 
    color: white; 
    font-weight: 600; 
    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.dim-main { 
    flex-grow: 1; 
    padding: 30px; 
    overflow-y: auto; 
    background: #ffffff; 
}

.btn-danger { 
    background: #ef4444; 
    color: white; 
    border: none;
}
.btn-danger:hover { 
    background: #dc2626; 
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}

#dim-edit-table { width: 100%; }
#dim-edit-table th, #dim-edit-table td { text-align: left; background: none; position: static; min-width: auto; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Auth / Card Layouts */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-color);
    padding: 20px;
    box-sizing: border-box;
}

.login-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 40px 48px;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 460px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
}

.login-card h1 {
    margin-top: 0;
    margin-bottom: 30px;
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 800;
    text-align: center;
    font-family: var(--font-heading);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-center { text-align: center; }

#error-msg {
    color: #ef4444;
    margin-top: 15px;
    font-size: 13px;
    display: none;
    text-align: left;
    background-color: #fef2f2;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #fee2e2;
    font-weight: 500;
}

/* Information Guide Banner (for aggregated view mode) */
.info-banner {
    display: none; /* Controlled by JS */
    align-items: center;
    gap: 12px;
    background-color: #f0f7ff; /* Very soft slate blue */
    border: 1px solid #e0f2fe;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-banner-icon {
    color: #0284c7; /* Sky blue information icon */
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-banner-text {
    color: #0369a1;
    font-size: 13.5px;
    line-height: 1.5;
}

.info-banner-text strong {
    font-weight: 700;
}

.info-banner-text span.dim-pill {
    background-color: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid #bae6fd;
    font-size: 12px;
    margin: 0 2px;
    display: inline-block;
}

/* Selection status bar below the grid (Excel-like: count/sum/average of the selected cells) */
.grid-selection-stats {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* 操作ボタン群（一括入力・Undo/Redo・コメント）は左側にまとめ、読み取り情報（入力完了率・選択統計）は
       右側にまとめる。space-between だと画面幅に応じて5要素が均等に離れ、操作ボタン同士のまとまりが崩れて
       いた（P-73）。.grid-comment-group の margin-right:auto で左右2グループに分けている。 */
    gap: 18px;
    padding: 8px 16px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.grid-selection-stats strong {
    color: var(--text);
    font-weight: 700;
    margin-left: 4px;
}

/* 選択範囲への一括入力（ステータスバー左側）: 範囲選択後に値を入力し、選択範囲内の
   編集可能セルすべてへ一括で書き込む。 */
.grid-fill-group { display: flex; align-items: center; gap: 6px; }
/* 一括入力欄が「選択範囲に対する操作」であることを初見でも一目で分かるよう見出しを付ける（P-05）。表示のみ。 */
.grid-fill-label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; color: var(--text-muted); white-space: nowrap; margin-right: 2px; }
.grid-fill-label i { color: #94a3b8; font-size: 11px; }
.grid-fill-input { width: 110px; height: var(--toolbar-ctl-h); padding: 0 8px; font-size: 12.5px; }
.grid-fill-btn { height: var(--toolbar-ctl-h); padding: 0 12px; font-size: 12.5px; white-space: nowrap; }

/* Undo/Redo（N-11）: 保存前の編集操作を元に戻す/やり直す。履歴が空のときは無効化表示。 */
.grid-undo-group { display: flex; align-items: center; gap: 4px; }
.grid-undo-btn, .grid-redo-btn { height: var(--toolbar-ctl-h); width: 34px; padding: 0; font-size: 13px; }

/* セルコメント: 単一セル選択時のみ有効化されるボタン。既存コメントがあるときは active クラスで強調する。 */
/* 操作ボタン群の右端。margin-right:auto で残りの余白を吸収し、これ以降の読み取り情報（完了率バッジ・選択統計）を
   右側にまとめて押し出す。入力完了率バッジが非表示（.hidden）でも成立する（P-73）。 */
.grid-comment-group { display: flex; align-items: center; margin-right: auto; }
.grid-comment-btn { height: var(--toolbar-ctl-h); padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.grid-comment-btn.btn-cell-comment-active { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.cell-comment-textarea { resize: vertical; min-height: 110px; }

/* N-06: データ入力完了率インジケーター。現在描画中の末端×末端セルのうち、値が入力済み（非ゼロ）の
   件数をバッジで常時表示する（選択操作とは独立、renderGrid のたびに更新）。 */
.grid-completion-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; background: #fff; border: 1px solid var(--border-color); border-radius: 999px; font-size: 12px; white-space: nowrap; color: var(--text-muted); }
.grid-completion-badge i { color: #94a3b8; font-size: 11px; }
.grid-completion-badge #grid-completion-badge-text strong { color: var(--text); font-weight: 700; }
/* 全セル入力済みのときは達成を視覚的に強調する。 */
.grid-completion-badge.grid-completion-full { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.grid-completion-badge.grid-completion-full i { color: #22c55e; }
.grid-completion-badge.grid-completion-full #grid-completion-badge-text strong { color: #15803d; }

/* 未選択時はヒント文を控えめ（イタリック・淡色）にして「セルを選ぶと集計が出る」ことを促す。 */
.grid-selection-stats-text.selection-stats-hint { font-style: italic; color: #94a3b8; }
/* 範囲選択中はバー全体を淡い藍色にし、各指標をピル状にまとめて素早く読み取れるようにする。 */
.grid-selection-stats.selection-stats-active { background: #eef2ff; border-color: #c7d2fe; }
.grid-selection-stats-text .sel-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; margin-right: 8px; background: #fff; border: 1px solid #c7d2fe; border-radius: 999px; }
.grid-selection-stats-text .sel-stat:last-child { margin-right: 0; }
.grid-selection-stats-text .sel-stat-key { color: var(--text-muted); font-size: 11.5px; }
.grid-selection-stats-text .sel-stat strong { margin-left: 0; color: var(--primary); }

/* N-35: 統計表示中はテキスト全体がコピーボタンになる（未選択のヒント表示中は role/tabindex ごと外す）。
   末尾のコピーアイコンで「押せる」ことを示し、ホバー・フォーカスで手掛かりを強める。 */
.grid-selection-stats-text.selection-stats-copyable { cursor: pointer; border-radius: 999px; }
.grid-selection-stats-text .sel-stat-copy-icon { margin-left: 8px; color: #94a3b8; font-size: 11.5px; vertical-align: middle; }
.grid-selection-stats-text.selection-stats-copyable:hover .sel-stat-copy-icon,
.grid-selection-stats-text.selection-stats-copyable:focus-visible .sel-stat-copy-icon { color: var(--primary); }
.grid-selection-stats-text.selection-stats-copyable:hover .sel-stat { border-color: var(--primary); }
.grid-selection-stats-text.selection-stats-copyable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================================================
   Auth page enhancements
   ============================================================ */

.auth-logo-icon {
    width: 52px;
    height: 52px;
    background: var(--primary-gradient);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.otp-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    display: block;
}

.otp-input {
    font-size: 2rem !important;
    letter-spacing: 12px;
    text-align: center;
    font-weight: 700;
    padding: 14px !important;
}

.required-star {
    color: #ef4444;
}

.error-msg-box {
    display: none;
    color: #ef4444;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* Template selection cards (register page) */
.template-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s;
    background: #fff;
}

.template-card:hover {
    border-color: var(--primary);
    background: #f5f3ff;
}

.template-card.selected {
    border-color: var(--primary);
    background: #ede9fe;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.template-card-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.template-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    font-family: var(--font-heading);
    margin-bottom: 3px;
}

.template-card.selected .template-card-title {
    color: var(--primary);
}

.template-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.template-card-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

/* 閉じている details の中身は UA スタイルで隠れるが、.template-cards の display:flex が
   それを上書きしてしまうため、明示的に非表示にする */
.template-more:not([open]) > .template-cards {
    display: none;
}

.template-more-summary {
    cursor: pointer;
    padding: 10px 2px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    list-style: none;
    user-select: none;
}

.template-more-summary::-webkit-details-marker {
    display: none;
}

.template-more-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.18s;
}

.template-more[open] > .template-more-summary::before {
    transform: rotate(90deg);
}

/* ============================================================
   Landing page
   ============================================================ */

.landing-body {
    background: #0a0d14;
    color: #f8fafc;
    overflow-x: hidden;
}

/* Nav */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(10, 13, 20, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--primary-gradient);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 900;
    color: white;
}

.nav-logo span {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-ghost-nav {
    padding: 8px 20px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s;
    border: none;
    background: none;
    cursor: pointer;
}

.btn-ghost-nav:hover {
    color: #f8fafc;
}

.btn-primary-nav {
    padding: 9px 22px;
    border-radius: 9px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-decoration: none;
    background: var(--primary-gradient);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.4);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary-nav:hover {
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.55);
    transform: translateY(-1px);
}

/* Hero */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 88px 32px 60px;
    overflow: hidden;
    gap: 48px;
}

.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(79, 70, 229, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.hero-glow-1 {
    width: 600px;
    height: 400px;
    background: rgba(79, 70, 229, 0.18);
    top: -100px;
    left: -200px;
}

.hero-glow-2 {
    width: 500px;
    height: 350px;
    background: rgba(124, 58, 237, 0.14);
    top: 100px;
    right: -150px;
}

.hero-content {
    position: relative;
    text-align: center;
    max-width: 760px;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(79, 70, 229, 0.15);
    border: 1px solid rgba(79, 70, 229, 0.35);
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #a5b4fc;
    margin-bottom: 28px;
    font-family: var(--font-heading);
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #f8fafc;
    margin: 0 0 24px;
}

.gradient-text {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.75;
    margin: 0 0 40px;
}

.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-trust {
    display: flex;
    gap: 10px 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.hero-trust-check {
    color: #22c55e;
    font-weight: 800;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(79, 70, 229, 0.45);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-primary:hover {
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.6);
    transform: translateY(-2px);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f8fafc;
}

/* Tenant capacity meter (landing hero) */
.hero-capacity {
    margin: 28px auto 0;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
    animation: fadeSlideUp 0.55s 0.3s cubic-bezier(0.4,0,0.2,1) both;
}

.capacity-top {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
}

.capacity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #64748b;
}

.capacity-bar {
    margin: 12px 0 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.capacity-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #64748b;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.capacity-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #94a3b8;
}

.capacity-remaining {
    font-weight: 700;
}

/* Policy line shown in place of the numbers while slots are plentiful.
   No `display` here on purpose, so the `hidden` attribute set by landing.js works. */
.capacity-note {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #94a3b8;
}

/* Quiet mode (施策T): while there is plenty of room, exposing the current tenant
   count is negative social proof and the scarcity nudge has not kicked in yet, so
   the progress bar and the numbers are suppressed. `.capacity-meta` sets
   `display:flex`, which beats the UA `[hidden]` rule — hence an explicit override
   rather than toggling `hidden` on those two elements from JS. */
.hero-capacity.cap-quiet .capacity-bar,
.hero-capacity.cap-quiet .capacity-meta {
    display: none;
}

/* Plenty of room — calm green */
.hero-capacity.cap-ok .capacity-dot,
.hero-capacity.cap-ok .capacity-bar-fill { background: #22c55e; }
.hero-capacity.cap-ok .capacity-remaining { color: #4ade80; }

/* Unlimited — neutral indigo accent */
.hero-capacity.cap-unlimited .capacity-dot,
.hero-capacity.cap-unlimited .capacity-bar-fill { background: var(--primary-gradient); }

/* Few slots left — urgent amber, pulsing dot to nudge action */
.hero-capacity.cap-low {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.08);
}
.hero-capacity.cap-low .capacity-dot {
    background: #f59e0b;
    animation: capacityPulse 1.4s ease-in-out infinite;
}
.hero-capacity.cap-low .capacity-bar-fill { background: linear-gradient(90deg, #f59e0b, #f97316); }
.hero-capacity.cap-low .capacity-label,
.hero-capacity.cap-low .capacity-remaining { color: #fbbf24; }

/* Full — registration closed */
.hero-capacity.cap-full {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
}
.hero-capacity.cap-full .capacity-dot,
.hero-capacity.cap-full .capacity-bar-fill { background: #ef4444; }
.hero-capacity.cap-full .capacity-label,
.hero-capacity.cap-full .capacity-remaining { color: #f87171; }

@keyframes capacityPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* Dashboard preview mock */
.hero-preview {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
}

.preview-window {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(79, 70, 229, 0.15);
}

.preview-titlebar {
    background: #f1f5f9;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.preview-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.preview-content {
    padding: 16px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.preview-logo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-btn-fake {
    width: 72px;
    height: 24px;
    border-radius: 6px;
}

.preview-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.preview-pill {
    padding: 4px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    font-family: var(--font-heading);
}

.preview-pill.ai {
    background: linear-gradient(135deg, #ede9fe, #fce7f3);
    border-color: #ddd6fe;
    color: #7c3aed;
}

.preview-grid {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    font-size: 12px;
}

.preview-grid-header,
.preview-grid-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

.preview-grid-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.pg-cell {
    padding: 7px 10px;
    border-right: 1px solid #e2e8f0;
    color: #334155;
    font-family: var(--font-body);
}

.pg-cell:last-child {
    border-right: none;
}

.pg-th {
    font-weight: 700;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    font-family: var(--font-heading);
}

.pg-label {
    font-weight: 600;
    color: #1e293b;
    background: #fafbfc;
}

.pg-indent {
    padding-left: 22px;
    color: #475569;
    font-weight: 500;
}

.pg-highlight {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    text-align: right;
}

.preview-grid-row {
    border-bottom: 1px solid #f1f5f9;
}

.preview-grid-row:last-child {
    border-bottom: none;
}

.preview-grid-row-alt .pg-cell {
    background: #fef9ec;
}

.preview-grid-bold .pg-label {
    color: #4f46e5;
    font-weight: 700;
}

/* Preview body split (grid + AI panel) */
.preview-body-split {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.preview-grid-wrap {
    flex: 1;
    min-width: 0;
}

.pg-num {
    text-align: right;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.pg-trend {
    font-size: 10px;
    margin-left: 2px;
}

.pg-trend.up {
    color: #16a34a;
}

/* AI Summary panel in preview */
.preview-ai-panel {
    width: 200px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #faf5ff, #fdf4ff);
    border: 1px solid #e9d5ff;
    border-radius: 10px;
    padding: 12px;
    font-size: 11px;
}

.preview-ai-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.preview-ai-sparkle {
    font-size: 13px;
}

.preview-ai-title {
    font-weight: 700;
    color: #6d28d9;
    font-family: var(--font-heading);
    font-size: 11px;
}

.preview-ai-model {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    color: #a78bfa;
    background: #ede9fe;
    padding: 1px 6px;
    border-radius: 999px;
    font-family: var(--font-heading);
}

.preview-ai-body {
    border-top: 1px solid #e9d5ff;
    padding-top: 8px;
}

.preview-ai-text {
    color: #374151;
    line-height: 1.6;
    font-size: 10.5px;
    margin: 0;
}

.preview-ai-up {
    color: #16a34a;
    font-weight: 700;
}

.preview-ai-highlight {
    background: linear-gradient(135deg, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.preview-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.preview-ai-chip {
    font-size: 9px;
    font-weight: 600;
    color: #6d28d9;
    background: #ede9fe;
    border-radius: 999px;
    padding: 2px 7px;
    font-family: var(--font-heading);
}

.ai-chip-warn {
    color: #b45309;
    background: #fef3c7;
}

/* Nav scroll state */
.landing-nav.nav-scrolled {
    background: rgba(10, 11, 20, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Entry animations */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-badge {
    animation: fadeSlideUp 0.5s cubic-bezier(0.4,0,0.2,1) both;
}

.hero-title {
    animation: fadeSlideUp 0.55s 0.08s cubic-bezier(0.4,0,0.2,1) both;
}

.hero-subtitle {
    animation: fadeSlideUp 0.55s 0.16s cubic-bezier(0.4,0,0.2,1) both;
}

.hero-cta {
    animation: fadeSlideUp 0.55s 0.24s cubic-bezier(0.4,0,0.2,1) both;
}

.hero-trust {
    animation: fadeSlideUp 0.55s 0.30s cubic-bezier(0.4,0,0.2,1) both;
}

.hero-preview {
    animation: fadeSlideUp 0.7s 0.35s cubic-bezier(0.4,0,0.2,1) both;
}

/* Feature card hover glow */
.feature-card {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(79, 70, 229, 0.18), 0 0 0 1px rgba(129, 140, 248, 0.3);
    border-color: rgba(129, 140, 248, 0.3);
}

/* Features */
.features-section {
    padding: 100px 32px;
    background: #0d1117;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #818cf8;
    font-family: var(--font-heading);
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.section-subtitle {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 64px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    text-align: left;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.25s;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(79, 70, 229, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.feature-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 10px;
}

.feature-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* How It Works (3 Steps) */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    text-align: left;
}

.step-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.25s;
}

.step-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(79, 70, 229, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.step-number {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.09);
}

.step-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.step-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 10px;
}

.step-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* FAQ Section */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 4px 22px;
    transition: border-color 0.2s, background 0.2s;
}

.faq-item[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(79, 70, 229, 0.3);
}

.faq-item summary {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    cursor: pointer;
    list-style: none;
    padding: 18px 28px 18px 0;
    position: relative;
    outline: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: #818cf8;
    transition: transform 0.2s;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: "\2212"; /* minus */
}

.faq-item p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    padding: 0 0 20px;
}

.faq-item p a { color: #818cf8; text-decoration: underline; }

/* CTA Section */
.cta-section {
    position: relative;
    padding: 100px 32px;
    background: #0a0d14;
    text-align: center;
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    width: 600px;
    height: 400px;
    background: rgba(79, 70, 229, 0.12);
    border-radius: 50%;
    filter: blur(80px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.cta-inner h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.cta-inner p {
    color: #64748b;
    font-size: 1.05rem;
    margin: 0;
}

/* Pricing */
.pricing-section {
    background: #0a0d14;
}

.pricing-card {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 36px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(79, 70, 229, 0.18);
    text-align: center;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #c7d2fe;
    background: rgba(79, 70, 229, 0.18);
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 20px;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.pricing-amount {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pricing-period {
    color: #94a3b8;
    font-size: 0.95rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
    display: grid;
    gap: 12px;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #cbd5e1;
    font-size: 0.98rem;
    line-height: 1.5;
}

.pricing-features li i {
    color: #34d399;
    margin-top: 3px;
    flex-shrink: 0;
}

.pricing-note {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 24px 0 0;
}

.pricing-note a {
    color: #818cf8;
}

/* Footer */
.landing-footer {
    background: #070a10;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 28px 32px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Spinner Animation */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
    margin-right: 6px;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast Notifications */
/* top はヘッダー実高さ（JS が --header-h に反映、utils.js の initToastPosition）+ 余白。
   ヘッダーは画面幅で1〜2行に折り返すため固定値ではなく変数化し、右上の保存・アカウント等の
   操作ボタンにトーストが重なってクリックできなくなるのを防ぐ（P-33）。JS未反映時は既定値64pxで代用。 */
#toast-container {
    position: fixed;
    top: calc(var(--header-h, 64px) + 12px);
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-muted);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    animation: toast-in 0.25s ease-out;
    word-break: break-word;
}

.toast.toast-hide {
    animation: toast-out 0.2s ease-in forwards;
}

.toast-icon { flex-shrink: 0; margin-top: 1px; font-size: 16px; }
.toast-body { flex-grow: 1; white-space: pre-line; }
.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}
.toast-close:hover { color: var(--text); }

.toast-success { border-left-color: #10b981; }
.toast-success .toast-icon { color: #10b981; }
.toast-error { border-left-color: #ef4444; }
.toast-error .toast-icon { color: #ef4444; }
.toast-warning { border-left-color: #f59e0b; }
.toast-warning .toast-icon { color: #f59e0b; }
.toast-info { border-left-color: var(--primary); }
.toast-info .toast-icon { color: var(--primary); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(20px); }
}

@media (prefers-reduced-motion: reduce) {
    .toast, .toast.toast-hide { animation: none; }
    .unsaved-badge { animation: none; }
}

/* === Migrated from inline styles === */

/* Utility */
.hidden { display: none !important; }
.text-primary { color: var(--primary); }
.cursor-pointer { cursor: pointer; }

/* Auth pages */
.auth-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 30px; }
.auth-footer { margin-top: 25px; border-top: 1px solid var(--border-color); padding-top: 20px; }
.auth-link { font-size: 14px; color: var(--primary); text-decoration: none; font-weight: 600; }
.btn-auth { width: 100%; padding: 12px; font-size: 16px; margin-top: 15px; }
.btn-auth-dark { width: 100%; padding: 12px; font-size: 16px; margin-top: 15px; background-color: var(--text); color: #fff; border-color: var(--text); }
.btn-full { width: 100%; }
.btn-mt { margin-top: 10px; }
.otp-sent-msg { font-size: 14px; margin-bottom: 20px; color: var(--primary); }
.form-error-msg { color: #ef4444; margin-top: 15px; font-size: 14px; }
.target-email-label { font-size: 14px; color: var(--primary); font-weight: 700; margin-bottom: 30px; }
.input-help-text { font-size: 12px; color: var(--text-muted); margin-top: 5px; text-align: left; }
.btn-form-submit { width: 100%; padding: 12px; font-size: 16px; margin-top: 15px; }

/* System admin page layout */
.page-content { padding: 20px; max-width: 1200px; margin: 0 auto; }
.header-user-info { margin-right: 15px; color: #555; font-weight: bold; }
.admin-card { background: white; padding: 30px; border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 30px; border: 1px solid var(--border-color); }
.admin-card-title { margin-top: 0; margin-bottom: 25px; font-size: 1.25rem; font-weight: 700; }
.form-section { margin-bottom: 30px; background: #f8fafc; padding: 20px; border-radius: 10px; border: 1px solid var(--border-color); }
.form-section-row { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.form-section-row-sm { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; }
.form-group-inline { margin-bottom: 0; }
.input-w-150 { width: 150px; }
.input-w-160 { width: 160px; }
.input-w-180 { width: 180px; }
.input-w-230 { width: 230px; }
.input-w-250 { width: 250px; }
.btn-action { height: 42px; }
.btn-refresh { height: 38px; padding: 0 14px; }
.btn-page { padding: 6px 14px; }
.audit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
/* P-57: 「ラベル＋コントロール」を1つのflexアイテム（audit-filter-item）にまとめて折り返し単位にし、
   ラベルと入力欄が別々の行に分かれて左端が不揃いになるのを防ぐ。操作ボタン群（audit-actions）も
   独立したグループとして右寄せ・折り返しさせる。絞り込みロジック・API呼び出しには影響しない。 */
.audit-controls { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
.audit-filter-item { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.audit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.audit-label-nowrap { margin-bottom: 0; white-space: nowrap; }
.audit-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.audit-page-info { font-size: 13px; color: #555; }
/* P-66: ユーザー一覧の状態バッジ（.badge-active等）と同じ「淡い背景＋枠＋角丸」のピル状に揃え、
   操作ログの結果表示だけが背景・枠なしの色文字のまま浮いていた不統一を解消（表示のみ、判定ロジックは不変）。 */
.audit-status-success { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700; color: #059669; background-color: #d1fae5; border: 1px solid #a7f3d0; }
.audit-status-error { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 700; color: #dc2626; background-color: #fef2f2; border: 1px solid #fecaca; }
.audit-target-jumpable { cursor: pointer; color: var(--primary); text-decoration: underline dotted; }
.audit-target-jumpable:hover { color: var(--primary-hover); }
/* E-79: 監査ログ表のセル装飾。テナント向け（audit-log.js）とSuperAdmin向け（system.js）の
   両方から使う共通クラス。system.js は非ESモジュールで utils.js を import できないため
   （E-70・E-73 と同じ制約）、共有できるのは CSS 側のみ。
   Target列の最大幅はテナント向け240px／SuperAdmin向け200pxと元から異なるため、
   現状の見た目を変えないよう CSS 変数で画面ごとの値を維持している。
   セレクタを `td.` で修飾しているのは、上方の全体ルール `td:first-child, th:first-child`
   （503行目、詳細度 0-1-1）が `white-space: pre` を当てており、素のクラス（詳細度 0-1-0）
   では日時列（1列目）で負けてしまうため。同詳細度かつ後方定義でこちらが勝つ＝置換前の
   インラインstyleと同じ計算値を維持する。 */
td.audit-cell-compact { font-size: 12px; }
td.audit-cell-nowrap { white-space: nowrap; }
td.audit-cell-truncate { font-size: 12px; max-width: var(--audit-cell-max-width, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.audit-cell-truncate-narrow { --audit-cell-max-width: 200px; }
.col-min-date { min-width: 140px; }
.ai-section { display: none; margin-top: 20px; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); padding: 20px; border-radius: 10px; border: 1px solid #ddd6fe; box-shadow: var(--shadow-sm); }
.ai-section-title { font-weight: 700; color: #6d28d9; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ai-icon { color: #7c3aed; }
.ai-textarea { width: 100%; height: 80px; resize: none; border-color: #c084fc; font-family: inherit; font-size: 13.5px; box-sizing: border-box; }
.ai-usage-count-danger { color: #ef4444; }
.ai-usage-count-warning { color: #f59e0b; }
.ai-usage-count-normal { color: #7c3aed; }

/* app.html header */
.header-btn-mr { margin-right: 10px; }
.header-btn-mr-lg { margin-right: 15px; }

/* Header dropdown menus (データ / 管理者メニュー / アカウント) */
.header-menu { position: relative; display: inline-block; }
.header-menu-caret { font-size: 0.7em; margin-left: 2px; opacity: 0.7; transition: transform 0.2s; }
.header-menu.open .header-menu-caret { transform: rotate(180deg); }
.header-menu-trigger-account { padding-left: 12px; padding-right: 12px; }
.header-menu-trigger-account i.fa-circle-user { font-size: 1.1rem; }
.header-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 200;
    display: none;
}
.header-menu-dropdown-right { left: auto; right: 0; }
.header-menu.open .header-menu-dropdown { display: block; }
.header-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.header-menu-item:hover { background: rgba(79, 70, 229, 0.08); }
.header-menu-item i { width: 18px; text-align: center; color: var(--text-muted); }
.header-menu-item-danger { color: #dc2626; }
.header-menu-item-danger i { color: #dc2626; }
.header-menu-item-danger:hover { background: rgba(239, 68, 68, 0.1); }
.header-menu-item-file-hint {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.header-menu-item-file-hint-danger { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.header-menu-divider { height: 1px; background: var(--border-color); margin: 6px 4px; }
.header-menu-userinfo { padding: 8px 12px 4px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
/* ユーザー情報末尾のロールバッジ（.badge、user-modal.jsのユーザー一覧と同じ配色）に上余白を付け、
   メール・テナントIDのテキストから視覚的に分離する（P-46, 表示のみ） */
.header-user-role-badge { margin-top: 4px; }

/* 表示オプションのドロップダウン（チェックボックス群＋グループ見出し） */
.display-menu-dropdown { min-width: 220px; }
.display-menu-group-title { padding: 6px 12px 2px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--text-muted); }
.display-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.display-menu-option:hover { background: rgba(79, 70, 229, 0.08); }
.display-menu-option input { cursor: pointer; }
/* P-09: チェック済みのオプションを淡い藍背景＋藍文字で強調し、オン/オフを一目で
   把握できるようにする（チェックマークだけでは状態が分かりにくい）。ドロップダウン内の
   表示オプションが対象。表示のみ（CSS のみ）で挙動は変えない。 */
.display-menu-option:has(input:checked) {
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary);
}
/* N-02: 表示単位（円/千円/百万円）セレクトは他のオプションとレイアウトを揃えつつ、
   ラベルとセレクトを両端に配置してホバー時のクリック領域を確保する。 */
.display-menu-option-select { justify-content: space-between; cursor: default; }
.display-unit-select { width: auto; padding: 3px 6px; font-size: 13px; }
/* N-07: 条件付きハイライトの閾値入力（円）。表示単位セレクトと同じ横並びレイアウトに揃える。 */
.cond-highlight-threshold-input { width: 100px; padding: 3px 6px; font-size: 13px; text-align: right; }
/* P-63: 条件付きハイライトのチェックボックスがOFFの間、閾値欄も無効・淡色化して
   機能自体がONに見えないようにする（disabledはtoolbar.jsのupdateCondHighlightThresholdUi()が制御）。 */
.cond-highlight-threshold-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* app.html toolbar */
/* 軸設定パネルの役割（縦軸／横軸）を左端のアクセント色と方向アイコンで一目で区別できるようにする。
   密なツールバーで「どちらが行・列の設定か」を初見でも迷わず把握でき、色は既存パレット内（藍＝primary／空色＝info）に収める。 */
.axis-panel-row { border-left: 3px solid var(--primary); }
.axis-panel-col { border-left: 3px solid #0ea5e9; }
/* P-07: 表示オプション・グラフ・検索をまとめた「ツール」パネルにも左端アクセントを付け、
   縦軸（藍）・横軸（空色）と並ぶ機能グループとして視覚的なリズムを作る。色は中立的な
   スレートで、軸設定やAI（紫）と役割が混ざらないようにする。表示のみの調整。 */
.axis-panel-tools { border-left: 3px solid #64748b; }
.axis-role-icon { margin-right: 5px; font-size: 12px; }
.axis-panel-row .axis-role-icon { color: var(--primary); }
.axis-panel-col .axis-role-icon { color: #0ea5e9; }
.config-group-gap { gap: 15px; }

/* ツールバー内の単独アイコンボタン（軸の縦横入れ替え・横軸詳細設定・グリッド内検索の前後/クリア）は、
   既定の透明な btn-icon のままだと「ただのアイコン」に見えて初見ユーザーに押せると気づかれにくい。
   常時うっすらと枠線・背景を付けてボタンであることを示し、ホバーで藍色に強調、
   無効時は淡色にして操作不可を伝える。挙動・配置は変えず、見た目のアフォーダンスのみ強化。 */
.btn-icon-chip {
    background-color: #fff;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.btn-icon-chip:hover:not(:disabled) {
    background-color: #eef2ff;
    border-color: #c7d2fe;
    color: var(--primary);
}
.btn-icon-chip:disabled {
    background-color: #f1f5f9;
    border-color: var(--border-color);
    color: #cbd5e1;
    box-shadow: none;
    cursor: default;
}
.label-flex { white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.label-nowidth { width: auto; text-align: left; cursor: pointer; }
.label-nowidth-flex { width: auto; text-align: left; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
/* P-09: 縦軸／横軸パネルのチェックボックスラベル（すべて表示・末端メンバーのみ・集計位置）も
   トグルチップ風にして、チェック済みの状態を一目で分かるようにする。常時わずかな余白・角丸を
   持たせて見た目を安定させ、チェック時に淡い藍背景＋藍文字＋ブランド色のチェックボックスで強調する。
   表示のみ（CSS のみ）で挙動・配置ロジックは変えない。 */
.label-flex, .label-nowidth, .label-nowidth-flex {
    padding: 3px 8px;
    border-radius: 7px;
    transition: background-color 0.15s, color 0.15s;
}
.label-flex input[type="checkbox"],
.label-nowidth input[type="checkbox"],
.label-nowidth-flex input[type="checkbox"],
.display-menu-option input[type="checkbox"] {
    accent-color: var(--primary);
}
.label-flex:has(input:checked),
.label-nowidth:has(input:checked),
.label-nowidth-flex:has(input:checked) {
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary);
}
/* AI サマリ操作パネル: 横幅いっぱいに広げず（flex-grow を外す）コンテンツ幅に収め、
   ツールバー内で間延びしないコンパクトな見た目にする（P-02）。タイトルと利用回数を
   1行にまとめて高さも抑える。機能（生成・利用回数表示・履歴）は不変。 */
.ai-summary-panel-inner { display: flex; flex-direction: column; justify-content: center; gap: 6px; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); padding: 10px 14px; border: 1px solid #ddd6fe; border-radius: 12px; min-width: 220px; }
.ai-panel-headline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-panel-title { font-weight: 700; color: #6d28d9; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ai-panel-usage { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.ai-usage-label { font-weight: 600; }
.ai-reset-label { color: #9ca3af; }
.ai-panel-actions { display: flex; gap: 8px; }
.btn-ai-summarize { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); padding: 8px 12px; font-size: 13px; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.2); flex: 1; }
.btn-ai-history { padding: 8px 12px; font-size: 13px; border-radius: 8px; flex-shrink: 0; }
.filters-header { font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; color: var(--primary); }
/* 各フィルター見出しの漏斗アイコン（このコントロールが絞り込みであることを示す視覚的アンカー） */
.filter-dim-icon { color: #94a3b8; font-size: 11px; margin-right: 5px; }
/* 絞り込み対象ディメンションが無いときのヒント */
.filters-empty-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 2px; color: var(--text-muted); font-size: 12.5px; }
.filters-empty-hint i { color: #94a3b8; }
/* 既定値（先頭メンバー）から変更済み＝「絞り込み中」のフィルターを一目で分かるよう強調する
   （P-45, buildFiltersUIでの判定に連動。表示のみでonFilterChangeのロジックには影響しない） */
.filter-active label { color: var(--primary); font-weight: 700; }
.filter-active .filter-dim-icon { color: var(--primary); }
.filter-active label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--primary);
    vertical-align: middle;
}
.filter-active select { border-color: var(--primary); background-color: rgba(79, 70, 229, 0.05); }
/* 「表示」ドロップダウンの設定が既定値から1つでも変更されている場合、閉じた状態でも分かるよう
   ボタン自体を強調する（P-61, filter-activeと同じ考え方。表示のみで各設定の保存・描画ロジックには影響しない） */
#btn-display-menu.display-menu-active { color: var(--primary); border-color: var(--primary); background-color: rgba(79, 70, 229, 0.05); position: relative; }
#btn-display-menu.display-menu-active::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}
/* ビュー操作群（選択・保存・既定・複製・リンク・削除）を淡い枠＋背景のチップとしてまとめ、
   隣り合う「フィルター」見出しとの境界を明確にして操作グループの塊を一目で示す（P-14, 表示のみ） */
.view-management-row { display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: rgba(248, 250, 252, 0.7); border: 1px solid var(--border-color); border-radius: 20px; }
/* ビュー管理クラスタの先頭ラベル（保存ビューの呼び出し／保存であることを示すアンカー） */
.view-management-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; padding-left: 2px; }
.view-management-label i { color: #94a3b8; font-size: 11px; }
.view-select { width: 180px; height: var(--toolbar-ctl-h); padding: 0 8px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
/* 保存ビューが多いテナント向けの名称絞り込みボックス（N-31）。ビュー件数が少ない間は hidden で隠れる */
.view-filter-input { width: 150px; height: var(--toolbar-ctl-h); padding: 0 8px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
.btn-view-save { height: var(--toolbar-ctl-h); padding: 0 12px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
.btn-view-delete { height: var(--toolbar-ctl-h); padding: 0 10px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
/* 削除は取り返しのつかない破壊的操作。既定は他のセカンダリ操作と同じ控えめな見た目のまま、
   ホバー／フォーカス時のみ淡い赤（danger）を当てて誤クリックを抑止する（P-13, 表示のみ・確認ダイアログ挙動は不変） */
.btn-view-delete:hover:not(:disabled) { color: #dc2626; border-color: #fca5a5; background-color: #fef2f2; }
.btn-view-delete:focus-visible { color: #dc2626; border-color: #f87171; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.btn-view-duplicate { height: var(--toolbar-ctl-h); padding: 0 10px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
.btn-view-copy-link { height: var(--toolbar-ctl-h); padding: 0 10px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
/* 既定ビュー（次回ログイン時に自動読込）の設定トグル。設定中は星を塗りつぶし金色で表示する */
.btn-view-default { height: var(--toolbar-ctl-h); padding: 0 10px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
.btn-view-default.active { color: #b45309; border-color: #f59e0b; background: #fffbeb; }
.btn-view-default:disabled { opacity: 0.5; cursor: not-allowed; }
/* お気に入りビュー（ブラウザ単位、複数登録可）のトグル。既定ビューと区別できるよう青系で表示する */
.btn-view-star { height: var(--toolbar-ctl-h); padding: 0 10px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); }
.btn-view-star.active { color: #1d4ed8; border-color: #60a5fa; background: #eff6ff; }
.btn-view-star:disabled { opacity: 0.5; cursor: not-allowed; }

/* app.html AI summary panel — グリッドを押し下げない右サイドのオーバーレイドロワー */
.ai-summary-box { display: none; position: absolute; top: 24px; right: 24px; bottom: 24px; width: min(460px, calc(100% - 48px)); z-index: 150; flex-direction: column; background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.97) 100%); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 16px 20px; border: 1px solid #c084fc; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.3), 0 4px 10px -4px rgba(0, 0, 0, 0.1); border-left: 4px solid #7c3aed; }
.ai-summary-box.open { display: flex; animation: ai-summary-slide-in 0.25s ease-out; }
@keyframes ai-summary-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* app.html グリッド内検索（縦軸/横軸メンバー、N-13） */
.grid-search-group { display: flex; align-items: center; gap: 4px; }
.grid-search-icon { color: #94a3b8; font-size: 13px; }
/* 検索対象軸（縦軸/横軸）セレクト。検索入力と揃えた高さ・角丸で1つの検索コントロール群に見せる */
.grid-search-axis-select { height: var(--toolbar-ctl-h); padding: 0 6px; font-size: 12px; border-radius: var(--toolbar-ctl-radius); color: var(--text-muted); }
/* 検索入力の角丸をビュー操作群・グラフ開くボタンと揃え、ツールバー内の基準を統一（P-18, 表示のみ） */
.grid-search-input { height: var(--toolbar-ctl-h); padding: 0 8px; font-size: 13px; border-radius: var(--toolbar-ctl-radius); }
/* 検索一致件数をピル（バッジ）状に整形し、一致あり／0件で色を変えて検索結果を直感的に示す（P-15, 表示・整形のみ） */
.grid-search-count { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #64748b; min-width: 44px; height: 22px; padding: 0 8px; border-radius: 11px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color 0.12s, color 0.12s; }
/* 一致あり: ブランド藍のバッジ */
.grid-search-count.grid-search-count-hit { color: #4338ca; background-color: #eef2ff; }
/* 0件: 淡い赤で「見つからない」ことをはっきり示す */
.grid-search-count.grid-search-count-none { color: #dc2626; background-color: #fef2f2; }
/* 未検索（空）時はバッジ地色を出さない */
.grid-search-count:empty { background-color: transparent; }

/* セル値の検索・置換（N-30）: 「検索」の件数プレビュー行。一致あり=藍／0件・エラー=赤で、
   grid-search-count のバッジ配色と揃える。空のときは余白を出さない。 */
.find-replace-result { margin: 4px 0 0; min-height: 1.2em; font-size: 0.9rem; font-weight: 600; }
.find-replace-result:empty { margin: 0; min-height: 0; }
.find-replace-result-hit { color: #4338ca; }
.find-replace-result-none { color: #dc2626; }

/* app.html chart panel — AIサマリと同方式の右サイドオーバーレイドロワー */
/* グラフ開くボタンの角丸をビュー操作群・検索入力と揃え、ツールバー内の基準を統一（P-18, 表示のみ） */
.btn-open-chart { height: var(--toolbar-ctl-h); padding: 0 12px; font-size: 13px; white-space: nowrap; border-radius: var(--toolbar-ctl-radius); }
.chart-box { display: none; position: absolute; top: 24px; right: 24px; bottom: 24px; width: min(560px, calc(100% - 48px)); z-index: 150; flex-direction: column; background: rgba(255, 255, 255, 0.98); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 16px 20px; border: 1px solid #93c5fd; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25), 0 4px 10px -4px rgba(0, 0, 0, 0.1); border-left: 4px solid #2563eb; }
.chart-box.open { display: flex; animation: ai-summary-slide-in 0.25s ease-out; }
.chart-box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
.chart-box-title { font-weight: 700; color: #1d4ed8; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.chart-box-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.chart-type-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.chart-seg { background: transparent; border: none; border-left: 1px solid var(--border-color); padding: 7px 13px; font-size: 13px; cursor: pointer; color: var(--text-muted); }
.chart-seg:first-child { border-left: none; }
/* 非選択のセグメント（棒/折れ線/円）にもホバー反応を付けて、切り替えボタンであることを伝える */
.chart-seg:not(.chart-seg-on):hover { background: #eff6ff; color: #1d4ed8; }
.chart-seg-on { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.chart-ctl-field { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.chart-ctl-field select { height: 32px; width: auto; font-size: 12px; }
.chart-ctl-check { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; }
/* P-65: 縦軸/横軸パネルや「表示」ドロップダウンのチェックボックス群と同じ考え方で、
   チェック時に淡い藍背景＋藍文字で強調する。既定でONの設定であることを一目で伝える（表示のみ）。 */
.chart-ctl-check:has(input:checked) { background: rgba(79, 70, 229, 0.12); color: var(--primary); }
.chart-canvas-wrap { flex: 1; min-height: 0; position: relative; }
/* 円グラフの前提（負の合計値は除外等）を本文と同化させず、インフォボックス風に強調して見落としを防ぐ（P-17, 表示のみ・グラフ描画ロジックには影響なし） */
.chart-pie-note { display: none; font-size: 11.5px; color: #1e40af; margin-top: 8px; flex-shrink: 0; line-height: 1.5; background: #eff6ff; border-left: 3px solid #93c5fd; border-radius: 6px; padding: 8px 10px; }
.chart-pie-note i { color: #3b82f6; margin-right: 4px; }
.chart-box-actions { display: flex; gap: 8px; margin-top: 12px; flex-shrink: 0; padding-top: 10px; border-top: 1px solid var(--border-color); }
.ai-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-shrink: 0; }
.ai-summary-title { font-weight: 700; color: #6d28d9; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.ai-gradient-icon { background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.ai-summary-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
.ai-history-label { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.ai-history-select { flex: 1; min-width: 0; height: 30px; padding: 0 8px; font-size: 12px; }
.ai-summary-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; flex-shrink: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.ai-summary-content { color: #334155; font-size: 14px; line-height: 1.6; flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; }
/* AIサマリ本文のマークダウン整形（markdown.js の出力に対応） */
.ai-summary-content h1, .ai-summary-content h2 { font-size: 1.05rem; font-weight: 700; color: #6d28d9; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #ddd6fe; }
.ai-summary-content h3, .ai-summary-content h4, .ai-summary-content h5, .ai-summary-content h6 { font-size: 0.95rem; font-weight: 700; color: #6d28d9; margin: 14px 0 6px; }
.ai-summary-content h1:first-child, .ai-summary-content h2:first-child, .ai-summary-content h3:first-child, .ai-summary-content p:first-child { margin-top: 0; }
.ai-summary-content p { margin: 0 0 10px; }
.ai-summary-content ul, .ai-summary-content ol { margin: 0 0 10px; padding-left: 20px; }
.ai-summary-content li { margin: 4px 0; }
.ai-summary-content code { background: #f1f5f9; border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.ai-summary-content hr { border: none; border-top: 1px solid var(--border-color); margin: 12px 0; }

/* app.html modals */
.dim-edit-header { margin-bottom: 25px; display: flex; justify-content: space-between; align-items: flex-end; background: #f8fafc; padding: 20px; border-radius: 10px; border: 1px solid var(--border-color); }
.dim-edit-left { display: flex; align-items: flex-end; gap: 20px; }
/* P-54: 名称（日本語）を主見出しとして先に置き、内部ID（英語）はラベル付きの控えめなチップとして後ろに添える（表示のみ・ロジック不変） */
.dim-edit-id-group { display: flex; align-items: baseline; gap: 6px; }
.dim-edit-id-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dim-edit-title { margin: 0; color: var(--text-muted); font-weight: 600; font-size: 0.95rem; font-family: monospace; min-width: 70px; }
.dim-input-desc { width: 250px; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.ai-dim-box { margin-bottom: 25px; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); padding: 20px; border-radius: 12px; border: 1px solid #ddd6fe; box-shadow: var(--shadow-sm); }
.ai-dim-header { font-weight: 700; color: #6d28d9; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ai-dim-usage-info { margin-left: auto; font-size: 11px; font-weight: normal; display: flex; align-items: center; gap: 4px; }
.ai-dim-row { display: flex; gap: 12px; align-items: flex-end; }
.ai-dim-textarea { height: 60px; flex-grow: 1; resize: none; font-size: 13.5px; border-color: #c084fc; font-family: inherit; box-sizing: border-box; }
.btn-ai-dim { height: 60px; min-width: 140px; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%); border-color: transparent; box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.2); white-space: nowrap; }
.ai-dim-error { display: none; margin-top: 10px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #92400e; line-height: 1.6; }
.btn-add-dim-row { margin-top: 10px; }
.btn-add-dimension { width: 100%; margin-bottom: 10px; }

/* Dimension editor: table (left) + live tree preview (right) */
.dim-edit-split { display: flex; gap: 20px; align-items: flex-start; }
.dim-edit-table-col { flex: 1 1 60%; min-width: 0; }
.dim-tree-col { flex: 1 1 40%; min-width: 260px; position: sticky; top: 0; }
.dim-tree-col-header { font-weight: 700; color: var(--primary); font-size: 0.95rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dim-tree-col-hint { font-weight: 400; font-size: 11px; color: #94a3b8; }
.dim-tree-preview { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; max-height: 480px; overflow: auto; font-size: 13px; }
.dim-tree-empty { color: #94a3b8; font-size: 13px; margin: 0; line-height: 1.6; }
.dim-tree-root, .dim-tree-children { list-style: none; margin: 0; padding: 0; }
.dim-tree-children { margin-left: 10px; padding-left: 14px; border-left: 1px dashed #cbd5e1; }
.dim-tree-node { margin: 3px 0; }
.dim-tree-label { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 6px; }
.dim-tree-label:hover { background: #eef2ff; }
.dim-tree-icon { color: #6366f1; width: 16px; text-align: center; }
.dim-tree-icon-leaf { color: #94a3b8; width: 16px; text-align: center; }
.dim-tree-id { font-weight: 600; color: var(--text-color); }
.dim-tree-id-missing { color: #cbd5e1; font-weight: 400; font-style: italic; }
.dim-tree-desc { color: #64748b; }
.dim-tree-desc::before { content: '— '; color: #cbd5e1; }
.dim-tree-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 2px; }
.dim-tree-badge-revenue { background: #dcfce7; color: #15803d; }
.dim-tree-badge-expense { background: #fee2e2; color: #b91c1c; }
.dim-tree-cycle { color: #b91c1c; font-size: 11px; margin: 2px 0 2px 22px; }
@media (max-width: 960px) {
    .dim-edit-split { flex-direction: column; }
    .dim-tree-col { position: static; width: 100%; }
}
.modal-content-user { max-width: 800px; }
.modal-body-user { padding: 30px; flex-direction: column; }
.user-create-row { margin-bottom: 25px; display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; background: #f8fafc; padding: 20px; border-radius: 10px; border: 1px solid var(--border-color); }
.table-scroll { flex-grow: 1; overflow-y: auto; }
.modal-content-axis { max-width: 900px; }
.modal-body-axis { padding: 20px; flex-direction: column; }
.axis-desc { margin-bottom: 15px; color: #64748b; font-size: 0.9rem; }
/* P-31: 期間一括切替パネルは下の個別設定テーブルとは別の操作グループだが、地の背景色のみ
   では境界が弱く地続きに見えていた。P-07 と同系統の左アクセント（未使用のティール系）＋
   アイコン付き見出しで「これは一括操作」であることを明示し、個別設定表の直前にも小見出しを
   追加して二段構成であることを示す。表示のみでフィルター上書きロジックには影響しない。 */
.axis-bulk-panel { background: #f8fafc; border: 1px solid var(--border-color); border-left: 3px solid #0d9488; border-radius: 10px; padding: 14px 16px; margin-bottom: 15px; }
.axis-bulk-title i { color: #0d9488; margin-right: 4px; }
.axis-individual-heading { font-weight: 600; font-size: 0.85rem; color: #475569; margin: 0 0 8px; }
.axis-individual-heading i { color: #64748b; margin-right: 4px; }
.axis-bulk-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; }
.axis-bulk-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.axis-bulk-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: #475569; min-width: 160px; }
.axis-bulk-field .form-input { height: 34px; padding: 4px 8px; }
.axis-bulk-hint { margin: 10px 0 0; color: #64748b; font-size: 0.8rem; }
.axis-table-wrap { flex-grow: 1; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.modal-content-save-view { max-width: 400px; height: auto; }
#view-description-input { width: 100%; resize: vertical; }
.modal-body-save-view { padding: 20px; flex-direction: column; }
/* P-30: 利用状況サマリは複数の指標カード＋5列テーブルを持ち、他の単一入力欄向けモーダル
   （modal-content-save-view, max-width:400px）を流用すると窮屈に折り返す。専用に少し広い
   幅を確保し、指標カードを余裕を持って並べられるようにする（表示のみ・集計ロジック不変）。 */
.modal-content-data-summary { max-width: 640px; height: auto; }
.view-public-row { display: flex; gap: 20px; margin-top: 5px; }
/* P-69: 公開設定のラジオだけ P-09 のトグルチップ風の選択強調から取り残されていたため、
   チェックボックス群（.label-flex 等）と同じ淡い藍背景＋藍文字＋ブランド色の accent を当て、
   どちらが選択中か一目で分かるようにする（表示のみ・公開設定の保存値には影響しない）。 */
.label-radio {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
}
.label-radio input[type="radio"] { accent-color: var(--primary); }
.label-radio:has(input:checked) {
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary);
}
.modal-content-delete-tenant { max-width: 480px; height: auto; }
.modal-header-danger { background: linear-gradient(135deg, #fee2e2, #fecaca); border-bottom: 1px solid #fca5a5; }
.modal-title-danger { color: #b91c1c; }
.modal-body-delete { padding: 24px; flex-direction: column; gap: 16px; }
.delete-warning-box { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 14px; color: #7f1d1d; font-size: 14px; line-height: 1.6; }
.delete-label-danger { color: #7f1d1d; }
.btn-confirm-delete-disabled { opacity: 0.5; cursor: not-allowed; }
.col-th-account-type { display: none; }

/* Backup restore: preview manifest of the chosen file (shown before the destructive overwrite). */
.backup-manifest { background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 14px; }
.backup-manifest-title { font-size: 13px; font-weight: 600; color: var(--text-color); margin-bottom: 8px; }
.backup-manifest-list { margin: 0; }
.backup-manifest-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.backup-manifest-row dt { color: #64748b; margin: 0; }
.backup-manifest-row dd { margin: 0; font-weight: 600; color: var(--text-color); }

/* 値をコピーの「既存値を上書き」チェックボックス: データを消しうる操作なので警告色で目立たせる（表示のみ）。 */
.copy-member-overwrite-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 14px;
    cursor: pointer;
}
.copy-member-overwrite-option input[type="checkbox"] { accent-color: #d97706; }
.copy-member-overwrite-option i { color: #d97706; }

/* terms.html */
body.terms-page { background: var(--bg-color); min-height: 100vh; padding: 40px 20px 80px; }
.terms-container { max-width: 800px; margin: 0 auto; background: rgba(255,255,255,0.85); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; padding: 48px 56px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); }
.terms-logo { text-align: center; margin-bottom: 32px; }
.terms-logo .auth-logo-icon { margin: 0 auto 12px; }
.terms-container h1 { font-size: 1.75rem; text-align: center; margin: 0 0 8px; }
.terms-date { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 36px; }
.alpha-notice { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #f59e0b; border-radius: 12px; padding: 20px 24px; margin-bottom: 36px; }
.alpha-notice-title { font-size: 15px; font-weight: 700; color: #92400e; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.alpha-notice p { margin: 0; font-size: 14px; color: #78350f; line-height: 1.7; }
.alpha-notice ul { margin-top: 10px; padding-left: 20px; color: #78350f; font-size: 14px; line-height: 1.7; }
.alpha-notice .alpha-notice-footnote { margin-top: 10px; }
.terms-section { margin-bottom: 32px; }
.terms-section h2 { font-size: 1rem; font-weight: 700; color: var(--text); border-bottom: 2px solid var(--primary); padding-bottom: 8px; margin: 0 0 14px; }
.terms-section p, .terms-section li { font-size: 14px; color: var(--text-muted); line-height: 1.8; margin: 0 0 8px; }
.terms-section ul, .terms-section ol { padding-left: 20px; margin: 8px 0; }
.terms-section li { margin-bottom: 6px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 600; margin-top: 32px; }
.back-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .terms-container { padding: 32px 24px; }
}

/* register.html terms modal */
.modal-high-z { z-index: 1000; }
.modal-content-terms { max-width: 680px; max-height: 85vh; display: flex; flex-direction: column; margin: 5% auto; }
.modal-header-title-sm { margin: 0; font-size: 1.1rem; }
.btn-close-modal { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-muted); line-height: 1; padding: 4px 8px; }
.terms-modal-body { overflow-y: auto; flex: 1; padding: 24px 28px; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.terms-modal-notice { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #f59e0b; border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; }
.terms-modal-notice-title { font-size: 14px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.terms-modal-notice-p { margin: 0 0 8px; color: #78350f; }
.terms-modal-notice-ul { margin: 0; padding-left: 18px; color: #78350f; }
.terms-modal-notice-footer { margin: 8px 0 0; color: #78350f; }
.terms-modal-section-title { font-size: 13px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin: 20px 0 10px; }
.terms-modal-list { padding-left: 18px; margin: 0; }
.terms-modal-date { margin-top: 24px; text-align: right; color: var(--text-muted); font-size: 12px; }
.btn-terms-agree { padding: 10px 24px; }



/* ── Class-based styles introduced by the JS module refactor (replacing inline styles) ── */

/* Spinner variants (previously set via inline style on each button) */
.spinner-dark { border-color: #555; border-top-color: transparent; }
.spinner-light { border-color: #fff; border-top-color: transparent; }

/* P-06: 横長の表（横軸メンバーが多い表）では、視線が横に移動する間に1行ずれて
   読み間違えやすい。偶数行にごく淡い背景色（ゼブラ縞）を敷いて視線を誘導する。
   集計（cell-summary）・親見出し（cell-row-header-parent）・読取専用（cell-readonly-leaf）・
   AIハイライト（cell-ai-highlight）・検索一致（cell-search-match-active）など明示的な
   背景を持つセル状態は、同じ詳細度かつ本ルールより後方に定義されているため後勝ちで
   従来色を維持する。行ホバー（!important）も従来どおり優先される。
   表示のみの調整で集計・編集・保存には影響しない。 */
.jexcel > tbody > tr:nth-child(even) > td {
    background-color: #f8fafc;
}

/* Grid cell states (set by updateTable in grid.js) */
.jexcel > tbody > tr > td.cell-readonly-leaf {
    background-color: #f1f5f9;
    /* 入力不可だが集計前の実値を表示するセル。読みやすさのためテキスト濃度を上げつつ
       （旧 #94a3b8 は背景との対比が不足し WCAG AA 未満だった）、入力可能セルとは
       依然として区別できる落ち着いた色味に揃える。 */
    color: #64748b;
    cursor: not-allowed;
    font-weight: normal;
    text-align: right;
}
.jexcel > tbody > tr > td.cell-summary {
    background-color: #e2e8f0;
    color: #1e293b;
    /* N-26: ダブルクリックで内訳モーダルを開けるため、編集不可を示す not-allowed ではなく
       クリック可能を示すカーソルにする。 */
    cursor: zoom-in;
    font-weight: 700;
    text-align: right;
}
.jexcel > tbody > tr > td.cell-editable {
    cursor: cell;
    font-weight: normal;
    text-align: right;
}

/* 行ホバー: グリッドの行全体をブランド配色の淡い藍色で強調する（密なグリッドでの
   行追跡を助ける）。汎用の tbody 行ホバー（グレー）より高い詳細度＋!important で
   データグリッドだけを上書きし、管理テーブルのホバーには影響しない。 */
.jexcel > tbody > tr:hover > td,
.jexcel > tbody > tr:hover > th {
    background-color: #eef2ff !important;
}

/* P-08: 数値列の桁を等幅（tabular-nums）にして列内の数字を縦に揃え、桁数の異なる金額が
   混在しても読みやすくする。右寄せの数値セル（入力可能・集計・読み取り専用 leaf）にのみ適用し、
   行ヘッダー（文字列）は対象外。桁区切り・△・赤字などの表示加工と併用でき、内部データ・編集・
   CSV/Excel 出力には一切影響しない表示のみの調整。 */
.jexcel > tbody > tr > td.cell-editable,
.jexcel > tbody > tr > td.cell-summary,
.jexcel > tbody > tr > td.cell-readonly-leaf {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 入力可能セルにポインタを乗せたとき、より濃い藍色＋内枠線で「ここに直接入力できる」
   ことを一目で示す（初見ユーザーが入力対象セルを迷わず見つけられるようにする affordance）。
   表示のみの変更で編集判定・保存等の挙動には影響しない。 */
.jexcel > tbody > tr > td.cell-editable:hover {
    background-color: #e0e7ff !important;
    box-shadow: inset 0 0 0 1.5px var(--primary);
    cursor: cell;
}
.jexcel > tbody > tr > td.cell-row-header {
    font-weight: 500;
    text-align: left;
}
.jexcel > tbody > tr > td.cell-row-header-parent {
    font-weight: 700;
    background-color: #e2e8f0;
    color: #1e293b;
    text-align: left;
}

/* 負の数を赤字表示（updateTable が付与、他の cell-* 状態に重ねて文字色のみ上書き） */
.jexcel > tbody > tr > td.cell-negative {
    color: #dc2626;
}

/* AIサマリの指摘箇所ハイライト（updateTable が付与、他の cell-* 状態に重ねて適用） */
.jexcel > tbody > tr > td.cell-ai-highlight {
    background-color: #fef3c7;
    box-shadow: inset 0 0 0 1.5px #f59e0b;
    cursor: help;
    position: relative;
}
/* 右上の紫コーナーマークで「AIの指摘」だと分かるようにする */
.jexcel > tbody > tr > td.cell-ai-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #7c3aed transparent transparent;
}

/* 条件付きハイライト: 閾値超過（赤系）・未達（青系）（updateTable が付与、他の cell-* 状態に
   重ねて適用。AIハイライト（黄背景+紫コーナー）とは背景色が異なるため共存しても判別できる） */
.jexcel > tbody > tr > td.cell-cond-high {
    background-color: #fee2e2;
    box-shadow: inset 0 0 0 1.5px #dc2626;
}
.jexcel > tbody > tr > td.cell-cond-low {
    background-color: #dbeafe;
    box-shadow: inset 0 0 0 1.5px #2563eb;
}

/* グリッド内検索（縦軸メンバー）の一致ハイライト（updateTable が付与） */
.jexcel > tbody > tr > td.cell-search-match {
    box-shadow: inset 0 0 0 1.5px #f59e0b;
}
.jexcel > tbody > tr > td.cell-search-match-active {
    background-color: #fef3c7;
    box-shadow: inset 0 0 0 2px #d97706;
}

/* グリッド内検索（横軸メンバー、N-13）の一致ハイライト: ヘッダーセルは updateTable の対象外
   なので applyColumnSearchHighlight（grid.js）が描画後に直接クラスを付与する。縦軸と同じ
   配色・強度で統一し、検索対象軸が変わっても見た目の一貫性を保つ。 */
.jexcel > thead > tr > td.cell-search-match {
    box-shadow: inset 0 0 0 1.5px #f59e0b !important;
}
.jexcel > thead > tr > td.cell-search-match-active {
    background-color: #fef3c7 !important;
    box-shadow: inset 0 0 0 2px #d97706 !important;
}

/* セルコメント（注記）が付いているセルの目印（updateTable が付与）。右上の青コーナーマークで
   AIサマリ指摘の紫コーナーマーク（.cell-ai-highlight）と見分けられるようにする。 */
.jexcel > tbody > tr > td.cell-has-comment {
    position: relative;
}
.jexcel > tbody > tr > td.cell-has-comment::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 7px 7px 0;
    border-color: transparent #2563eb transparent transparent;
}

/* P-22: グリッドのセル背景色・マークの意味を示す凡例（header-menu ドロップダウン）。
   実際のセルクラス（.cell-editable 等）は #data-grid .jexcel 配下でのみ配色されるため、
   ドロップダウン内の色見本は同じ色調を再現した専用クラスで表示する（判定ロジック・
   ツールチップには影響しない表示専用の追加）。 */
.cell-legend-dropdown {
    min-width: 220px;
    padding: 10px 4px;
}
.cell-legend-title {
    padding: 2px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cell-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text);
}
.legend-swatch {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
}
.legend-swatch-editable { border-color: #cbd5e1; }
.legend-swatch-readonly { background-color: #f1f5f9; border-color: #94a3b8; }
.legend-swatch-summary { background-color: #e2e8f0; border-color: #64748b; }
.legend-swatch-comment::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #2563eb transparent transparent;
}
.legend-swatch-ai {
    background-color: #fef3c7;
    box-shadow: inset 0 0 0 1.5px #f59e0b;
}
.legend-swatch-ai::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #7c3aed transparent transparent;
}
.legend-swatch-cond-high {
    background-color: #fee2e2;
    box-shadow: inset 0 0 0 1.5px #dc2626;
}
.legend-swatch-cond-low {
    background-color: #dbeafe;
    box-shadow: inset 0 0 0 1.5px #2563eb;
}
/* P-56: 条件付きハイライトが無効（既定）のときは凡例の該当2項目を淡色化し、
   「現在OFFである」ことを一目で分かるよう小さな注記を添える（toolbar.js の
   updateCellLegendUi() が state.condHighlightEnabled に応じてクラスを切り替える）。 */
.cell-legend-off-note {
    display: none;
    font-size: 11px;
    color: var(--text-muted);
}
.cell-legend-item-cond.cell-legend-item-inactive {
    opacity: 0.45;
}
.cell-legend-item-cond.cell-legend-item-inactive .cell-legend-off-note {
    display: inline;
}

/* ハイライトセルのカスタムツールチップ（grid.js initAiHighlightTooltip が配置） */
.ai-cell-tooltip {
    display: none;
    position: fixed;
    z-index: 600;
    max-width: 320px;
    background: #1e293b;
    color: #f8fafc;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 8px 12px 8px 10px;
    border-radius: 8px;
    border-left: 3px solid #7c3aed;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    white-space: pre-line;
}
.ai-cell-tooltip.visible { display: block; }
.ai-cell-tooltip::before {
    content: '✦ AI分析コメント';
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #c4b5fd;
    margin-bottom: 3px;
    letter-spacing: 0.03em;
}

/* Expand-member select when "show all" is checked */
.select-disabled { opacity: 0.35; pointer-events: none; }

/* Axis override modal */
.axis-member-cell {
    font-weight: 600;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    white-space: nowrap;
}
.axis-member-desc { color: #64748b; font-weight: normal; }
.axis-override-select { width: 100%; padding: 4px 8px; height: 34px; }
.axis-override-active {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: bold;
    background-color: #eff6ff;
}

/* Dimension edit table */
.dim-cell-input { width: 100%; text-align: left; padding: 4px 8px; }
.dim-cell-select { padding: 4px; }
.btn-dim-row-delete, .btn-user-row-delete { padding: 4px 10px; font-size: 12px; }
.ai-dim-error-detail { font-size: 12px; opacity: 0.8; }

/* Cell comment list modal (N-03) */
.cell-comment-list-text { white-space: pre-wrap; word-break: break-word; }
.cell-comment-list-action { white-space: nowrap; }
.btn-cell-comment-jump { padding: 4px 10px; font-size: 12px; }
/* N-14: 更新者・更新日時列は折り返さず、やや控えめな文字色で補足情報として表示する */
.cell-comment-list-updated-by,
.cell-comment-list-updated-at { white-space: nowrap; font-size: 12px; color: var(--text-muted); }

/* N-25: 未読コメントの件数バッジ（「データ」メニューのトリガーと「コメント一覧」項目）と、
   一覧内で新着行を示す NEW マーク。未保存バッジ（.unsaved-badge）が「注意（橙）」なのに対し、
   こちらは「新着のお知らせ（赤）」として区別する。 */
.comment-unread-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.comment-unread-badge[hidden] { display: none; }

/* メニュー項目内では右端に寄せ、項目ラベルと重ならないようにする */
.comment-unread-badge-menu-item { margin-left: auto; }

.cell-comment-new-mark {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 3px;
    background-color: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    vertical-align: middle;
}

.cell-comment-list-unread { background-color: #fef2f2; }

/* Cell drilldown modal (N-26): 内訳一覧の数値列は右寄せ・等幅数字。合計行(tfoot)は
   一覧との区切りが分かるよう太字＋上枠線にする。 */
.cell-drilldown-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
#cell-drilldown-modal tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--border, #e2e8f0);
}
#cell-drilldown-note { font-size: 12px; }

/* =========================================================================
   Use-case page (/usecases) — conversation-style story.
   Reuses the landing dark theme (.landing-body, nav, footer, cta).
   ========================================================================= */

/* Hero */
.uc-hero {
    position: relative;
    overflow: hidden;
    padding: 140px 24px 64px;
    text-align: center;
}

.uc-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.uc-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #f8fafc;
    margin: 22px 0 18px;
}

.uc-hero-sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: #94a3b8;
    line-height: 1.8;
    margin: 0 0 40px;
}

/* Cast line-up */
.uc-cast {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.uc-cast-item {
    flex: 1 1 200px;
    max-width: 230px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 16px;
    text-align: center;
}

.uc-cast-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: #f1f5f9;
    margin-top: 12px;
}

.uc-cast-role {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.5;
}

/* Avatars (shared between cast + chat) */
.uc-ava {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
}

.uc-cast-item .uc-ava { margin: 0 auto; }

.uc-ava-boss  { background: linear-gradient(135deg, #475569, #334155); }
.uc-ava-staff { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.uc-ava-guide { background: var(--primary-gradient); box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45); }

/* Chat section */
.uc-chat-section {
    padding: 40px 24px 90px;
    background: #0d1117;
}

.uc-chat {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Scene divider */
.uc-scene-label {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: #cbd5e1;
    margin: 34px 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.uc-scene-label span {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--primary-gradient);
    padding: 4px 10px;
    border-radius: 999px;
}

/* Chat message rows */
.uc-msg {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    max-width: 86%;
}

.uc-msg .uc-ava {
    width: 42px;
    height: 42px;
    font-size: 17px;
    border-radius: 12px;
}

.uc-from-staff { align-self: flex-start; }
.uc-from-boss  { align-self: flex-end; flex-direction: row-reverse; }
.uc-from-guide { align-self: center; max-width: 94%; }

.uc-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
}

.uc-bubble p {
    margin: 0;
    color: #cbd5e1;
    font-size: 14.5px;
    line-height: 1.75;
}

.uc-bubble p strong { color: #f8fafc; font-weight: 700; }

.uc-who {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.uc-from-boss .uc-bubble {
    border-bottom-right-radius: 4px;
    background: rgba(71, 85, 105, 0.18);
    border-color: rgba(148, 163, 184, 0.2);
}
.uc-from-boss .uc-who { justify-content: flex-end; }

.uc-from-staff .uc-bubble {
    border-bottom-left-radius: 4px;
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(56, 189, 248, 0.2);
}

.uc-from-guide .uc-bubble {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(124, 58, 237, 0.12));
    border-color: rgba(129, 140, 248, 0.32);
    width: 100%;
}

.uc-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #c084fc;
    background: rgba(192, 132, 252, 0.14);
    border: 1px solid rgba(192, 132, 252, 0.3);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* Feature pill inside guide bubbles */
.uc-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    color: #ddd6fe;
    background: rgba(124, 58, 237, 0.22);
    border: 1px solid rgba(167, 139, 250, 0.35);
    padding: 6px 13px;
    border-radius: 999px;
}

/* "What is it" callout */
.uc-callout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(129, 140, 248, 0.25);
    border-left: 3px solid #818cf8;
    border-radius: 14px;
    padding: 22px 24px;
    margin: 8px 0;
}

.uc-callout-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
}

.uc-callout-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    color: #f8fafc;
    margin-bottom: 6px;
}

.uc-callout p {
    margin: 0;
    color: #94a3b8;
    font-size: 14.5px;
    line-height: 1.75;
}

.uc-callout p strong { color: #e2e8f0; }

/* Use-case cards grid */
.uc-usecases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 8px 0;
}

.uc-uc-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.uc-uc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.uc-uc-card h3 {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 16px 0 8px;
}

.uc-uc-card p {
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}

/* Embedded product screenshots inside the conversation */
.uc-shot {
    margin: 12px auto;
    max-width: 680px;
    width: 100%;
}

.uc-shot-cap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 12px;
    text-align: center;
}

.uc-shot-cap i { color: #a78bfa; }

.uc-shot-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #64748b;
    text-align: center;
}

/* On narrow screens the grid + AI panel should stack rather than overflow. */
@media (max-width: 560px) {
    .uc-shot .preview-body-split { flex-direction: column; }
    .uc-shot .preview-ai-panel { width: 100%; }
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity, transform;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/*
 * Narrow-screen public nav: the landing nav has grown to 6 links
 * (活用シーン/テンプレート/料金/ブログ/ログイン/無料で始める) and no longer
 * fits on one line below ~720px — the primary "無料で始める" CTA was being
 * pushed off the right edge and rendered completely unreachable on phones.
 * On narrow screens we hide the informational ghost links (still reachable
 * from the page body and footer) and keep only ログイン + the CTA, so the main
 * conversion action is always visible. The rule is order-based, not text-based,
 * so it works across every public page (ログイン is always the last ghost link
 * before the primary CTA = :nth-last-child(2)).
 */
@media (max-width: 720px) {
    .nav-actions .btn-ghost-nav:not(:nth-last-child(2)) { display: none; }
}

@media (max-width: 600px) {
    .uc-hero { padding: 116px 18px 48px; }
    .uc-msg { max-width: 100%; }
    .uc-callout { flex-direction: column; gap: 12px; }

    /* Keep the simplified (ログイン + CTA) nav on one tidy line. */
    .nav-inner { padding: 12px 16px; }
    .nav-actions { gap: 6px; }
    .nav-actions .btn-ghost-nav { padding: 8px 10px; }
    .nav-actions .btn-primary-nav { padding: 9px 14px; }
    .btn-ghost-nav, .btn-primary-nav { white-space: nowrap; font-size: 13px; }
}

/* ===== 法務ページ共通：脚注リンク・特商法テーブル ===== */
.terms-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
}
.terms-footer-links a { color: var(--primary); text-decoration: none; font-weight: 600; }
.terms-footer-links a:hover { text-decoration: underline; }

.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td {
    text-align: left;
    vertical-align: top;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    line-height: 1.7;
}
.legal-table th {
    width: 34%;
    font-weight: 700;
    color: var(--text);
    background: rgba(79, 70, 229, 0.04);
    white-space: nowrap;
}
.legal-table td { color: var(--text-muted); }
.legal-table a { color: var(--primary); }
.legal-note { display: inline-block; margin-top: 4px; font-size: 12px; color: #94a3b8; }

@media (max-width: 600px) {
    .legal-table th, .legal-table td { display: block; width: 100%; white-space: normal; }
    .legal-table th { border-bottom: none; padding-bottom: 4px; }
    .legal-table td { padding-top: 4px; }
}

/* ===== セキュリティページ ===== */
.sec-hero { position: relative; overflow: hidden; padding: 140px 24px 64px; text-align: center; }
.sec-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.sec-hero-title { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; line-height: 1.25; margin: 20px 0 16px; color: var(--text); }
.sec-hero-sub { font-size: 1.05rem; line-height: 1.9; color: var(--text-muted); margin: 0; }

.sec-detail-section { padding: 64px 24px; background: #fff; }
.sec-detail-inner { max-width: 760px; margin: 0 auto; }
.sec-detail-title { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; color: var(--text); margin: 8px 0 32px; }
.sec-qa { padding: 22px 0; border-bottom: 1px solid var(--border-color); }
.sec-qa:last-child { border-bottom: none; }
.sec-qa h3 { display: flex; align-items: flex-start; gap: 10px; font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.sec-qa h3 i { color: var(--primary); margin-top: 3px; }
.sec-qa p { font-size: 14px; line-height: 1.9; color: var(--text-muted); margin: 0; }
.sec-qa a { color: var(--primary); font-weight: 600; }

.sec-honesty-section { padding: 0 24px 72px; background: #fff; }
.sec-honesty-inner { max-width: 760px; margin: 0 auto; }
.sec-honesty-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 28px 30px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #ddd6fe;
}
.sec-honesty-icon { font-size: 28px; color: var(--primary); flex-shrink: 0; line-height: 1; margin-top: 2px; }
.sec-honesty-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--text); margin: 0 0 10px; }
.sec-honesty-card p { font-size: 14px; line-height: 1.9; color: var(--text-muted); margin: 0; }
.sec-honesty-card a { color: var(--primary); font-weight: 600; }

/* フッターのリンク列（ランディング／セキュリティ共通） */
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; }
.footer-links a { color: #94a3b8; font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: #f8fafc; }

@media (max-width: 600px) {
    .sec-hero { padding: 116px 18px 48px; }
    .sec-honesty-card { flex-direction: column; gap: 12px; }
}

/* =========================================================================
   操作マニュアル ビューア (manual.html)
   ========================================================================= */
.manual-body { background: var(--bg-color); color: var(--text); min-height: 100vh; }
.manual-header {
    position: sticky; top: 0; z-index: 10;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-color);
}
.manual-header-inner {
    max-width: 920px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.manual-main { max-width: 920px; margin: 0 auto; padding: 32px 24px 80px; }
.manual-content { font-size: 15px; line-height: 1.75; color: var(--text); }
.manual-content h1 { font-size: 1.8rem; font-weight: 800; margin: 8px 0 20px; }
.manual-content h2 {
    font-size: 1.35rem; font-weight: 700; margin: 36px 0 14px;
    padding-bottom: 8px; border-bottom: 2px solid var(--border-color);
}
.manual-content h3 { font-size: 1.12rem; font-weight: 700; margin: 26px 0 10px; color: var(--primary); }
.manual-content h4, .manual-content h5, .manual-content h6 { font-size: 1rem; font-weight: 700; margin: 18px 0 8px; }
.manual-content p { margin: 0 0 14px; }
.manual-content a { color: var(--primary); text-decoration: underline; }
.manual-content ul, .manual-content ol { margin: 0 0 14px; padding-left: 24px; }
.manual-content li { margin: 6px 0; }
.manual-content code {
    background: #f1f5f9; border: 1px solid var(--border-color);
    border-radius: 4px; padding: 1px 6px; font-size: 0.9em;
}
.manual-content hr { border: none; border-top: 1px solid var(--border-color); margin: 28px 0; }
.manual-content blockquote {
    margin: 0 0 16px; padding: 12px 16px;
    border-left: 4px solid var(--primary);
    background: rgba(79, 70, 229, 0.06);
    border-radius: 0 8px 8px 0; color: var(--text-muted);
}
.manual-content table {
    width: 100%; border-collapse: collapse; margin: 0 0 18px;
    font-size: 14px; background: #fff;
    border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden;
}
.manual-content th, .manual-content td {
    border: 1px solid var(--border-color); padding: 8px 12px; text-align: left; vertical-align: top;
}
.manual-content thead th { background: #f8fafc; font-weight: 700; }
.manual-content tbody tr:nth-child(even) { background: rgba(248, 250, 252, 0.6); }
.manual-loading, .manual-error { color: var(--text-muted); text-align: center; padding: 48px 0; }
.manual-error { color: #dc2626; }

/* ==========================================================================
   Utility classes (migrated from inline style= attributes).
   Generated to allow CSP style-src to drop 'unsafe-inline'. Do not hand-edit
   names; see tmp_migrate_inline_styles.py history if regenerating.
   ========================================================================== */
.u-accent-color-var-primary { accent-color: var(--primary); }
.u-align-items-center { align-items:center; }
.u-align-items-flex-start { align-items: flex-start; }
.u-background-0a0e14 { background:#0a0e14; }
.u-background-28c840 { background:#28c840; }
.u-background-e2e8f0 { background:#e2e8f0; }
.u-background-f1f5f9 { background:#f1f5f9; }
.u-background-febc2e { background:#febc2e; }
.u-background-fef3c7 { background: #fef3c7; }
.u-background-ff5f57 { background:#ff5f57; }
.u-background-linear-gradient-135deg-dbeafe-bfdbfe { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.u-background-linear-gradient-135deg-dcfce7-bbf7d0 { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
.u-background-linear-gradient-135deg-e0e7ff-c7d2fe { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.u-background-linear-gradient-135deg-e0f2fe-bae6fd { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.u-background-linear-gradient-135deg-ede9fe-ddd6fe { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.u-background-linear-gradient-135deg-f3e8ff-e9d5ff { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
.u-background-linear-gradient-135deg-fce7f3-fbcfe8 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.u-background-linear-gradient-135deg-fef3c7-fde68a { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.u-background-none { background:none; }
.u-background-var-primary-gradient { background: var(--primary-gradient); }
.u-border-radius-10px { border-radius: 10px; }
.u-border-radius-4px { border-radius:4px; }
.u-border-top-1px-solid-var-border-color { border-top: 1px solid var(--border-color); }
.u-border-1px-solid-e2e8f0 { border:1px solid #e2e8f0; }
.u-border-1px-solid-f59e0b { border: 1px solid #f59e0b; }
.u-border-none { border:none; }
.u-color-0284c7 { color:#0284c7; }
.u-color-059669 { color: #059669; }
.u-color-16a34a { color:#16a34a; }
.u-color-1e293b { color:#1e293b; }
.u-color-2563eb { color:#2563eb; }
.u-color-4f46e5 { color:#4f46e5; }
.u-color-64748b { color:#64748b; }
.u-color-78350f { color: #78350f; }
.u-color-7c3aed { color:#7c3aed; }
.u-color-92400e { color: #92400e; }
.u-color-9333ea { color:#9333ea; }
.u-color-d97706 { color:#d97706; }
.u-color-db2777 { color:#db2777; }
.u-color-f8fafc { color:#f8fafc; }
.u-color-var-primary { color: var(--primary); }
.u-color-var-text { color: var(--text); }
.u-color-var-text-muted { color: var(--text-muted); }
.u-cursor-pointer { cursor: pointer; }
.u-display-block { display: block; }
.u-display-flex { display:flex; }
.u-display-none { display:none; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-font-family-inherit { font-family: inherit; }
.u-font-family-monospace { font-family: monospace; }
.u-font-size-1-5rem { font-size: 1.5rem; }
.u-font-size-12px { font-size:12px; }
.u-font-size-13px { font-size:13px; }
.u-font-size-14px { font-size:14px; }
.u-font-size-15px { font-size: 15px; }
.u-font-weight-600 { font-weight: 600; }
.u-font-weight-700 { font-weight:700; }
.u-gap-10px { gap: 10px; }
.u-gap-4px { gap:4px; }
.u-gap-6px { gap:6px; }
.u-height-16px { height: 16px; }
.u-height-20px { height:20px; }
.u-height-22px { height:22px; }
.u-height-28px { height:28px; }
.u-justify-content-space-between { justify-content: space-between; }
.u-letter-spacing-0-5px { letter-spacing: 0.5px; }
.u-line-height-1-6 { line-height: 1.6; }
.u-margin-bottom-0 { margin-bottom:0; }
.u-margin-bottom-12px { margin-bottom: 12px; }
.u-margin-bottom-20px { margin-bottom: 20px; }
.u-margin-bottom-28px { margin-bottom: 28px; }
.u-margin-bottom-6px { margin-bottom: 6px; }
.u-margin-left-12px { margin-left:12px; }
.u-margin-left-4px { margin-left: 4px; }
.u-margin-left-auto { margin-left:auto; }
.u-margin-right-8px { margin-right: 8px; }
.u-margin-top-4px-2 { margin-top: -4px; }
.u-margin-top-12px { margin-top: 12px; }
.u-margin-top-16px { margin-top: 16px; }
.u-margin-top-20px { margin-top: 20px; }
.u-margin-top-28px { margin-top: 28px; }
.u-margin-top-2px { margin-top: 2px; }
.u-margin-top-36px { margin-top:36px; }
.u-margin-top-3px { margin-top: 3px; }
.u-margin-top-4px { margin-top: 4px; }
.u-margin-top-8px { margin-top:8px; }
.u-margin-0 { margin:0; }
.u-margin-10px-0-0 { margin: 10px 0 0; }
.u-margin-8px-0-0 { margin: 8px 0 0; }
.u-max-width-500px { max-width: 500px; }
.u-padding-top-20px { padding-top: 20px; }
.u-padding-0 { padding:0; }
.u-padding-12px { padding: 12px; }
.u-padding-16px { padding: 16px; }
.u-resize-vertical { resize: vertical; }
.u-text-align-center { text-align:center; }
.u-text-align-left { text-align:left; }
.u-text-decoration-none { text-decoration: none; }
.u-text-decoration-underline { text-decoration: underline; }
.u-user-select-none { user-select: none; }
.u-width-100 { width: 100%; }
.u-width-16px { width: 16px; }
.u-width-20px { width:20px; }
.u-width-22px { width:22px; }
.u-width-28px { width:28px; }

/* Small semantic classes for HTML generated in JS (system.js) — kept out of the
   auto-generated utility block above. */
.spinner-on-primary { border-color:#fff; border-top-color:transparent; }
.table-empty-cell { text-align:center; color:#888; padding:20px; }

/* 利用状況サマリ（データメニュー → 利用状況サマリ） */
.summary-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.summary-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.summary-card-value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}
.summary-card-label {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.summary-table th,
.summary-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.summary-table th {
    color: var(--text-muted);
    font-weight: 600;
}
.summary-table .summary-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.summary-rate-cell { min-width: 120px; }
.summary-rate-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.summary-rate-bar {
    flex: 1 1 auto;
    max-width: 80px;
    height: 8px;
    border-radius: 999px;
    background: var(--border-color);
    overflow: hidden;
}
.summary-rate-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
}
.summary-rate-fill.summary-rate-high { background: #22c55e; }
.summary-rate-fill.summary-rate-mid { background: #f59e0b; }
.summary-rate-fill.summary-rate-low { background: #ef4444; }
.summary-rate-text {
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ブログ（コンテンツSEO） — /blog, /blog/{slug}
   ========================================================================= */
.blog-hero { position: relative; overflow: hidden; padding: 140px 24px 64px; text-align: center; }
.blog-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.blog-hero-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: #f8fafc; margin: 20px 0 16px; }
.blog-hero-sub { font-size: 1.05rem; line-height: 1.9; color: #94a3b8; margin: 0; }

.blog-list-section { padding: 24px 32px 100px; background: #0d1117; }
.blog-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.blog-card { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 28px; text-decoration: none; transition: all 0.25s; }
.blog-card:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(79, 70, 229, 0.3); transform: translateY(-4px); }
.blog-card-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: #818cf8; text-transform: uppercase; margin-bottom: 14px; }
.blog-card h2 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #f1f5f9; margin: 0 0 10px; line-height: 1.5; }
.blog-card p { font-size: 13.5px; color: #94a3b8; line-height: 1.8; margin: 0 0 16px; flex-grow: 1; }
.blog-card-read-more { font-size: 13px; font-weight: 600; color: #818cf8; }

/* Article (blog post) */
.article-hero { position: relative; overflow: hidden; padding: 130px 24px 48px; text-align: center; }
.article-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.article-breadcrumb { font-size: 12.5px; color: #64748b; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.article-breadcrumb a { color: #94a3b8; text-decoration: none; }
.article-breadcrumb a:hover { color: #cbd5e1; text-decoration: underline; }
.article-breadcrumb-sep { color: #475569; }
.article-breadcrumb-current { color: #94a3b8; }
.article-hero-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: #818cf8; text-transform: uppercase; margin-bottom: 14px; }
.article-hero-title { font-family: var(--font-heading); font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; color: #f8fafc; margin: 0 0 18px; }
.article-hero-meta { font-size: 13px; color: #64748b; }

.article-content { padding: 56px 24px 72px; background: #fff; }
.article-prose { max-width: 680px; margin: 0 auto; }
.article-prose h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--text); margin: 44px 0 16px; letter-spacing: -0.01em; }
.article-prose h2:first-child { margin-top: 0; }
.article-prose h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 32px 0 12px; }
.article-prose p { font-size: 15px; line-height: 2; color: var(--text-muted); margin: 0 0 18px; }
.article-prose ul, .article-prose ol { padding-left: 22px; margin: 0 0 18px; }
.article-prose li { font-size: 15px; line-height: 1.9; color: var(--text-muted); margin-bottom: 8px; }
.article-prose strong { color: var(--text); }
.article-prose a { color: var(--primary); font-weight: 600; }
.article-callout { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px; padding: 20px 24px; margin: 28px 0; }
.article-callout p { margin: 0; color: #4c1d95; }
.article-callout p:not(:last-child) { margin-bottom: 10px; }
.article-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 600; margin-top: 8px; }
.article-back-link:hover { text-decoration: underline; }
.article-related { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-color); }
.article-related h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.article-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.article-related a { color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.article-related a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .blog-hero, .article-hero { padding: 116px 18px 40px; }
}

/* =========================================================================
   キーボードショートカットヘルプモーダル
   ========================================================================= */
.modal-content-keyboard-help { max-width: 560px; width: 100%; }
/* 他の .modal-body-* 同様に flex-direction: column を指定しないと、基底の .modal-body
   （display:flex、行方向）がそのまま効き、各セクションが横並びの列に押し込まれて
   説明文が1文字ずつ縦積みで折り返される（P-49）。 */
.modal-body-keyboard-help { padding: 8px 24px 20px; flex-direction: column; overflow-y: auto; }

/* <kbd> 要素: キーキャップ風のスタイル */
kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 5px;
    white-space: nowrap;
    line-height: 1.5;
}

/* セクション見出し */
.kb-section { margin-bottom: 20px; }
.kb-section:last-child { margin-bottom: 0; }
.kb-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

/* ショートカット行: キー列と説明列を2カラムで揃える */
.kb-list { margin: 0; padding: 0; }
.kb-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}
.kb-row dt { font-size: 13px; }
.kb-row dd { margin: 0; font-size: 13px; color: var(--text); }

/* =========================================================================
   N-43: はじめかたガイド（初回ログイン時の「最初にやること3ステップ」）
   公開ページの #how と同じ3ステップを、プランナーの明るい配色に合わせて
   縦積みのリストで見せる（ランディングの .step-card はダーク配色前提のため
   流用しない）。表示専用でデータ・集計には影響しない。
   ========================================================================= */
.modal-content-onboarding { max-width: 620px; width: 100%; }
.modal-body-onboarding { padding: 8px 24px 20px; flex-direction: column; overflow-y: auto; }

.ob-lead {
    margin: 4px 0 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
}

.ob-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ob-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #f8fafc;
}

.ob-step-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: var(--primary);
}

.ob-step-body { min-width: 0; }

.ob-step-title {
    margin: 2px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.ob-step-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

.ob-step-action { margin-top: 10px; }
/* .btn が display: inline-flex を明示しているため、UA の [hidden] { display: none } は
   上書きされてしまう。.freesheet-visibility-badge[hidden] / .ff-arg-member[hidden] と
   同じ作法で companion ルールを添える。 */
.ob-step-action[hidden] {
    display: none;
}

.ob-note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* =========================================================================
   キーボード操作のフォーカス表示（アクセシビリティ）
   マウスのクリックでは出さず、Tab 等のキーボード操作時のみ明確なフォーカス
   リングを表示する（:focus-visible）。ボタン・アイコンボタン・ドロップダウン
   項目・チェックボックス／ラジオ・セグメント切替など、これまで視覚的な
   フォーカス指標が無かった要素に統一したリングを与え、キーボードだけでも
   現在位置を見失わないようにする。テキスト入力／セレクトは既存の :focus
   リング（border + box-shadow）があるため対象外。
   ========================================================================= */
.btn:focus-visible,
.btn-icon:focus-visible,
.header-menu-item:focus-visible,
.header-menu-trigger:focus-visible,
.chart-seg:focus-visible,
.close-btn:focus-visible,
.template-card:focus-visible,
.template-more-summary:focus-visible,
.dim-sidebar li:focus-visible,
.audit-target-jumpable:focus-visible,
#data-grid:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* グリッド領域は枠線とぴったり合うようリングを内側寄りに */
#data-grid:focus-visible {
    outline-offset: -2px;
    border-radius: 12px;
}

/* =========================================================================
   N-01: グリッド印刷（印刷プレビュー）
   ヘッダー・ツールバー・サイドパネル・モーダルを非表示にし、グリッドのみを
   スクロールなしのフルサイズで印刷する。#data-grid の高さ・overflow は
   jspreadsheet が inline style で固定するため !important で上書きする。
   表示専用の調整でデータ・編集内容には影響しない。
   ========================================================================= */
@media print {
    body {
        background: #fff;
    }

    header,
    .toolbar,
    #grid-selection-stats,
    #ai-summary-display,
    #chart-panel,
    #info-banner,
    .loading-overlay,
    .modal {
        display: none !important;
    }

    .app-container {
        display: block !important;
        height: auto !important;
    }

    .grid-container {
        overflow: visible !important;
        padding: 0 !important;
        display: block !important;
    }

    #data-grid {
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    #data-grid .jexcel_content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
    }

    #data-grid table {
        width: 100% !important;
    }

    td:first-child, th:first-child,
    #data-grid .jexcel > thead > tr > td {
        position: static !important;
        box-shadow: none !important;
    }

    th, td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================================
   フリーシートモード（N-23 アドバンスPlanner）
   body.freesheet-mode でピボット系UIとフリーシートの表示を入れ替える。
   表示切替はクラスのみで行い、インライン style は使わない（CSP 準拠）。
   ============================================================ */

.freesheet-container {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 16px 24px 24px;
    gap: 10px;
}

body.freesheet-mode .toolbar,
body.freesheet-mode .grid-container,
body.freesheet-mode #btn-submit {
    display: none;
}

body.freesheet-mode .freesheet-container {
    display: flex;
}

.freesheet-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.freesheet-mode-label {
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.freesheet-title {
    font-weight: 600;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* P-75: 読込中フリーシートの共有範囲（公開＝テナント全員 / 自分のみ）を示すバッジ。
   ユーザー状態バッジ（.badge-active / .badge-pending）と同じピル作法。公開設定ラジオ（P-69）の
   藍系トーンに合わせ、公開＝淡い藍・自分のみ＝淡いスレートで区別する。表示のみ。 */
.freesheet-visibility-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
/* display を明示しているため、UA の [hidden] { display: none } は上書きされてしまう。
   .unsaved-badge[hidden] / .comment-unread-badge[hidden] と同じ作法で companion ルールを添える。 */
.freesheet-visibility-badge[hidden] {
    display: none;
}
.freesheet-visibility-badge-public {
    background-color: rgba(79, 70, 229, 0.12);
    color: var(--primary);
    border: 1px solid rgba(79, 70, 229, 0.25);
}
.freesheet-visibility-badge-private {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid var(--border-color);
}

/* P-74: フリーシートツールバーの「シート識別（ラベル・タイトル・読込セレクト）」と
   操作ボタン群、および操作ボタンの機能グループ間に細い縦罫で視覚的リズムを付ける（P-07/P-14と同じ観点）。
   flex-wrap 折り返し時は通常の flex アイテムとして流れ、レイアウトは崩れない。 */
.freesheet-toolbar-sep {
    width: 1px;
    align-self: stretch;
    min-height: 20px;
    background: var(--border-color);
    margin: 0 2px;
}

.freesheet-select {
    min-width: 200px;
    max-width: 320px;
}

/* P-76: 数式ヘルプは <details> の二段構成。要点1行は常時見えるので初見でも迷わず、
   習熟ユーザーは畳んでグリッドの表示領域を広げられる（開閉状態は free-sheet.js が localStorage に保存）。
   CSP でインライン script/style が禁止されているため、開閉は <details> のネイティブ挙動を使う。 */
.freesheet-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.freesheet-hint-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    cursor: pointer;
    padding: 2px 0;
    /* 既定の三角マーカーを消し、右端のシェブロンで開閉を示す */
    list-style: none;
}
.freesheet-hint-summary::-webkit-details-marker {
    display: none;
}
.freesheet-hint-summary:hover {
    color: var(--text-color);
}
.freesheet-hint-summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.freesheet-hint-lead {
    min-width: 0;
}

/* 「詳しい書き方」トグルは淡いチップ。開いているときはシェブロンを反転させる。 */
.freesheet-hint-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.freesheet-hint-chevron {
    font-size: 9px;
    transition: transform 0.15s ease;
}
.freesheet-hint[open] .freesheet-hint-chevron {
    transform: rotate(180deg);
}

.freesheet-hint-body {
    padding: 4px 0 0 20px;
}

.freesheet-hint code {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 4px;
}

#freesheet-grid {
    flex-grow: 1;
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* 数式セル: 計算結果を表示中であることを控えめな色とマークで示す */
#freesheet-grid td.fs-formula-cell {
    background: #f5f9ff;
    color: #1d4ed8;
    font-variant-numeric: tabular-nums;
}

#freesheet-grid td.fs-formula-error {
    background: #fef2f2;
    color: #b91c1c;
    font-weight: 600;
}

.freesheet-settings-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

/* フリーシート「関数の挿入」ダイアログ（N-23 追補）。左に関数一覧、右にラベル付き入力欄＋
   プレビューという2ペイン構成は dim-modal（ディメンション管理）と同じ .dim-sidebar/.dim-main
   を流用し、専用CSSは狭いサイズ調整と入力フォーム部分のみに絞る。 */
.modal-content-formula-builder {
    max-width: 760px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    margin: 4% auto;
}

.modal-body-formula-builder {
    overflow: hidden;
    flex: 1;
}

.modal-body-formula-builder .dim-sidebar { width: 220px; }
.modal-body-formula-builder .dim-sidebar ul { display: flex; flex-direction: column; gap: 2px; }
.modal-body-formula-builder .dim-main { padding: 24px; }

.ff-target-cell {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--text);
}

.ff-function-desc {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.ff-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.ff-form-row-label {
    display: flex;
    align-items: center;
}

.ff-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ff-form-pane select.form-input:disabled,
.ff-form-pane input.form-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: #f1f5f9;
}

/* ZD 引数行: 指定方法（メンバー／セル参照）と値の入力欄を縦に並べる（N-39） */
.ff-arg-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ff-arg-mode {
    max-width: 220px;
}

.ff-arg-member[hidden] {
    display: none;
}

.ff-arg-ref {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ff-arg-ref[hidden] {
    display: none;
}

.ff-arg-ref-input {
    max-width: 120px;
}

.ff-arg-ref-input.ff-invalid {
    border-color: #dc2626;
}

/* ZD表ウィザード: 行／列の軸ブロックを2カラムに並べる（N-38） */
.ff-axis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ff-axis-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ff-axis-title {
    margin: 0;
    font-weight: 600;
    color: var(--text);
}

.ff-axis-members {
    height: auto;
    padding: 4px;
}

.ff-fixed-block {
    margin-bottom: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.ff-table-options {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.ff-table-options .ff-form-row {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    gap: 8px;
}

.ff-label-mode {
    max-width: 180px;
}

@media (max-width: 720px) {
    .ff-axis-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ff-preview-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.ff-preview-text {
    display: block;
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    word-break: break-all;
    white-space: pre-wrap;
}

.ff-preview-hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================================
   画面ツアーページ（/tour・施策 O）
   実画面のスクリーンショットを「表 → 集計 → 解釈 → 入出力」の
   順に縦読みで並べる。配色は landing-body のダークテーマに合わせ、
   スクリーンショット（明るい UI）だけが浮き上がるようにする。
   ============================================================ */

.tour-note {
    max-width: 860px;
    margin: 0 auto 56px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid #818cf8;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.8;
    text-align: left;
}

.tour-note i {
    margin-right: 8px;
    color: #818cf8;
}

.tour-note strong {
    color: #e2e8f0;
}

.tour-step {
    max-width: 1000px;
    margin: 0 auto 88px;
    text-align: left;
}

.tour-step-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.tour-step-num {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
}

/* 見出しブロック内では section-label の既定の下余白を詰める。 */
.tour-step-head .section-label {
    margin-bottom: 4px;
}

.tour-step-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.tour-step-lead {
    margin: 0 0 24px;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.9;
}

.tour-step-lead strong {
    color: #e2e8f0;
}

.tour-figure {
    margin: 0 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.tour-figure-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tour-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* 画面幅が広いときはスクロール不要なので案内も出さない。 */
.tour-scroll-hint {
    display: none;
}

.tour-figure figcaption {
    padding: 12px 16px;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.8;
}

.tour-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.tour-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.94rem;
    line-height: 1.8;
}

.tour-points i {
    margin-top: 6px;
    color: #34d399;
    font-size: 0.78rem;
}

@media (max-width: 720px) {
    .tour-step {
        margin-bottom: 64px;
    }

    .tour-step-head {
        gap: 12px;
    }

    .tour-step-num {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .tour-figure {
        border-radius: 10px;
    }

    /*
     * 横長の管理画面をスマホ幅に押し込むと文字が読めなくなるため、
     * 図だけを横スクロールさせる（ページ本体は横スクロールさせない）。
     */
    .tour-figure img {
        width: 760px;
        max-width: none;
    }

    .tour-scroll-hint {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-size: 0.78rem;
    }
}

/* ------------------------------------------------------------------
   無料テンプレート配布ページ（/downloads）
   ------------------------------------------------------------------ */
.dl-card {
    display: flex;
    flex-direction: column;
}

.dl-meta {
    list-style: none;
    /* 下マージンでボタンとの最小間隔を確保する（ボタン側は margin-top: auto で下端に寄せるため）。 */
    margin: 16px 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-meta li {
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dl-meta i {
    color: #6366f1;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* カードの本文量が違ってもボタンの高さが揃うよう、下端に寄せる。 */
.dl-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ------------------------------------------------------------------
   損益分岐点 計算ツール（/break-even-calculator・施策 V）
   landing-body のダークテーマ上で、左に入力・右に結果を並べる。
   狭幅では 1 カラムに落として入力 → 結果の縦読みにする。
   ------------------------------------------------------------------ */
.bec-tool {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px;
    margin-top: 28px;
    text-align: left;
}

.bec-inputs,
.bec-results {
    padding: 26px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.bec-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
}

.bec-block-title i {
    color: #818cf8;
    font-size: 0.95rem;
}

.bec-field {
    margin-bottom: 18px;
}

.bec-field label {
    display: block;
    margin-bottom: 6px;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
}

.bec-input,
.bec-select {
    width: 100%;
    padding: 11px 13px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #f8fafc;
    font-family: inherit;
    font-size: 1rem;
}

.bec-input:focus,
.bec-select:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.22);
}

.bec-hint {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.7;
}

.bec-error {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(248, 113, 113, 0.09);
    border: 1px solid rgba(248, 113, 113, 0.32);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 0.86rem;
    line-height: 1.8;
}

.bec-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bec-headline-label {
    color: #94a3b8;
    font-size: 0.88rem;
}

.bec-headline-value {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #f8fafc;
}

.bec-bar {
    margin-top: 18px;
}

.bec-bar-track {
    position: relative;
    height: 14px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

.bec-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 999px;
}

/* 損益分岐点の位置を示す縦線。fill の上に重ねるので overflow: hidden の内側に置く。 */
.bec-bar-marker {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #fbbf24;
}

.bec-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.bec-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: middle;
}

.bec-swatch-sales {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.bec-swatch-bep {
    background: #fbbf24;
}

.bec-verdict {
    margin: 18px 0 0;
    padding: 13px 15px;
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid #818cf8;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.85;
}

.bec-verdict:empty {
    display: none;
}

.bec-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 0;
}

.bec-metric {
    padding: 13px 15px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.bec-metric-wide {
    grid-column: 1 / -1;
}

.bec-metric dt {
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.6;
}

.bec-metric dd {
    margin: 4px 0 0;
    color: #f8fafc;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}

.bec-privacy {
    margin: 18px 0 0;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.8;
}

.bec-privacy i {
    margin-right: 6px;
    color: #34d399;
}

.bec-formula-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 28px;
    text-align: left;
}

.bec-formula {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.bec-formula h3 {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.7;
    color: #a5b4fc;
}

.bec-formula p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.9;
}

@media (max-width: 900px) {
    .bec-tool {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .bec-inputs,
    .bec-results {
        padding: 20px;
    }

    .bec-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}