/* ==========================================
   デザイントークン
   「教科書・研究レポート」のように、問い → データ → 手法 → 結果 → 解釈 を
   読みやすく並べるための最小限の色・文字・余白。
   色は基調色1色（ドジャーブルー）＋グレー。意味のある場面（有意・注意・エラー）だけ意味色を使う。
   ========================================== */
:root {
    /* 文字・面・罫線 */
    --ink: #17202c;            /* 本文（白地で 16.4:1） */
    --ink-2: #374151;          /* 補足本文（10.3:1） */
    --muted: #556070;          /* 注記・キャプション（6.4:1） */
    --paper: #ffffff;          /* 紙面 */
    --canvas: #f4f8fd;         /* ページ地（ごく淡い青灰） */
    --tint: #f5f9fe;           /* 控えめな面（表の見出し行など） */
    --rule: #d8e2ee;           /* 細い罫線（青みの灰） */
    --rule-strong: #8492a6;    /* 入力欄の枠など強めの罫線（白地 3.2:1） */

    /* 基調色：ドジャーブルー（Dodger Blue #1e90ff）
       明るい色のため、白地の小さな文字や白文字の背景には同系色の濃いめ（--accent）を使い、
       線・枠・選択中の印・大きな文字・フォーカス輪郭には --brand そのものを使う。 */
    --brand: #1e90ff;          /* 基調色（白地で 3.2:1：線・大きな文字・非テキスト要素向け） */
    --accent: #1670c9;         /* リンク・主要ボタン・小さな文字（白地で 5.0:1） */
    --accent-strong: #0f5fa8;  /* hover・強調（6.5:1） */
    --accent-weak: #eaf4ff;    /* 選択中の面 */
    --accent-line: #a8d1ff;    /* 選択中の枠線（淡） */
    --accent-hover: #f3f9ff;   /* 選択肢・行の hover 面 */
    --brand-deep: #0f5fa8;     /* 青い帯の上の部品（白文字 6.5:1） */
    --focus: #1e90ff;          /* :focus-visible の輪郭線 */

    /* 意味色（意味があるときだけ） */
    --ok: #166534;
    --ok-weak: #f0f7f2;
    --warn: #92400e;
    --warn-line: #d97706;
    --warn-weak: #fdf8ec;
    --danger: #b91c1c;
    --danger-weak: #fdf2f2;

    /* 文字 */
    /* 画面全体：教育用に作られた読みやすいユニバーサルデザインフォント（BIZ UDPゴシック） */
    --font-sans: 'BIZ UDPGothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
    /* 図表（グラフ・結果の表）：研究論文向け。欧文 Times New Roman＋和文 明朝体 */
    --font-serif: 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    --text-xs: 0.8125rem;      /* 13px 注記 */
    --text-sm: 0.875rem;       /* 14px 補足 */
    --text-base: 1rem;         /* 16px 本文 */
    --text-md: 1.125rem;       /* 18px 小見出し */
    --text-lg: 1.375rem;       /* 22px 節見出し */
    --text-xl: 1.75rem;        /* 28px ページ見出し */

    /* 形・余白 */
    --radius-sm: 4px;
    --radius: 8px;             /* ボタン・入力欄・選択肢 */
    --radius-lg: 16px;         /* 紙面（カード） */
    --radius-btn: 12px;        /* 主要ボタン */
    --shadow-card: 0 1px 2px rgba(15, 95, 168, 0.06), 0 8px 24px rgba(15, 95, 168, 0.08);  /* 紙面の淡い影 */
    --shadow-card-hover: 0 2px 4px rgba(15, 95, 168, 0.08), 0 14px 32px rgba(15, 95, 168, 0.14);  /* 押せるカードの hover */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur: 150ms;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* 旧変数（既存ルール・分析モジュールとの互換のため新トークンへ割り当て） */
    --primary-color: var(--accent);
    --primary-dark: var(--accent-strong);
    --primary-light: #4da6ff;
    --accent-color: var(--accent);
    --background: var(--canvas);
    --surface: var(--paper);
    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --border-color: var(--rule);
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 6px 16px rgba(23, 32, 44, 0.08);  /* 浮かぶ要素（ドロップダウン等）のみ */
    --shadow-xl: 0 10px 28px rgba(23, 32, 44, 0.12);
}

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

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

/* 全体の背景とフォント設定 */
body {
    background: var(--canvas);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* 数値は桁をそろえる（表・統計量） */
table,
.stat-value,
.file-info-list dd {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--accent);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--accent-strong);
}

/* ローディング画面 */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

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

.loading-content i {
    display: none;
}

.loading-content h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.loading-content p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

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

/* メインアプリ */
#main-app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-6);
}

/* ヒーロー：画面幅いっぱいのドジャーブルーの面。左下にアプリ名（44px）とキャッチコピー（20px 太字）、
   右上に言語切替とマニュアル。帯の上の文字はすべて「大きな文字」（18.7px 以上の太字）なので 3:1 で可。
   右側に散布図と回帰直線をかたどった白い細線（不透明度 8%）を敷く。文字の下には重ねない。
   作者表記のような小さな文字は帯の下（.app-tagline）に置く。 */
.hero-section {
    margin-bottom: var(--space-5);
    color: var(--ink);
}

/* 帯は #main-app の幅を超えて左右いっぱいに伸ばす（横スクロールを生まない box-shadow 方式） */
.app-bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
    align-items: end;
    gap: var(--space-4) var(--space-5);
    min-height: 13.5rem;
    padding: 1.25rem 0 2.25rem;
    background: var(--brand);
    box-shadow: 0 0 0 100vmax var(--brand);
    clip-path: inset(0 -100vmax);
    color: #fff;
}

.app-bar::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(480px, 46%);
    height: 220px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='220' viewBox='0 0 480 220' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M20 30H470M20 80H470M20 130H470M20 180H470'/%3E%3Cpath d='M20 20V200H470' stroke-opacity='0.08' stroke-width='1.5'/%3E%3Cpath d='M20 30h-6M20 80h-6M20 130h-6M20 180h-6M110 200v6M200 200v6M290 200v6M380 200v6'/%3E%3Cg stroke-width='1.5'%3E%3Ccircle cx='37' cy='155' r='4'/%3E%3Ccircle cx='68' cy='144' r='4'/%3E%3Ccircle cx='93' cy='150' r='4'/%3E%3Ccircle cx='111' cy='151' r='4'/%3E%3Ccircle cx='137' cy='141' r='4'/%3E%3Ccircle cx='163' cy='119' r='4'/%3E%3Ccircle cx='195' cy='143' r='4'/%3E%3Ccircle cx='216' cy='110' r='4'/%3E%3Ccircle cx='250' cy='133' r='4'/%3E%3Ccircle cx='275' cy='102' r='4'/%3E%3Ccircle cx='308' cy='78' r='4'/%3E%3Ccircle cx='332' cy='82' r='4'/%3E%3Ccircle cx='346' cy='70' r='4'/%3E%3Ccircle cx='375' cy='93' r='4'/%3E%3Ccircle cx='399' cy='77' r='4'/%3E%3Ccircle cx='432' cy='58' r='4'/%3E%3C/g%3E%3Cpath d='M30 176L460 66' stroke-width='2' stroke-dasharray='1 0'/%3E%3C/svg%3E") no-repeat right bottom / contain;
    pointer-events: none;
}

/* 文字（キャッチコピー 約 600px）と重なりうる幅では線の飾りを出さない */
@media (max-width: 1199px) {
    .app-bar::before {
        display: none;
    }
}

.app-brand {
    grid-area: brand;
    position: relative;
    min-width: 0;
}

.hero-title {
    font-size: 3.25rem;    /* 52px 太字の白（大きな文字：帯の上で 3.24:1） */
    font-weight: 800;
    -webkit-text-stroke: 0.035em currentColor;   /* BIZ UDPゴシックは 700 までのため、ロゴだけ線で太らせる */
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: #fff;
}

.hero-subtitle {
    margin-top: 0.6rem;
    font-size: 1.25rem;    /* 20px 太字の白（大きな文字：3.24:1） */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #fff;
    word-break: auto-phrase;
    text-wrap: balance;
    max-width: 38rem;      /* 右側の線の飾りと重ならない幅（英語表示では 2 行に折り返す） */
}

.app-tagline {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2) 0 0;
}

.hero-caption {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.5;
}

.hero-actions {
    grid-area: actions;
    align-self: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* マニュアルへのリンク：帯の上の白いボタン（濃い青の文字 6.5:1） */
.app-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.35rem 0.9rem;
    border: 1px solid #fff;
    border-radius: var(--radius);
    background: #fff;
    color: var(--brand-deep);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.app-bar-link i {
    color: inherit;
}

.app-bar-link:hover {
    background: var(--accent-weak);
    color: var(--brand-deep);
}

/* 言語切替：濃い青の台に白文字。選択中は白地に濃い青の文字 */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 38px;
    padding: 3px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand-deep);
    color: #fff;
}

.language-switcher > i {
    padding: 0 0.35rem 0 0.45rem;
    font-size: 0.95rem;
}

.language-switcher button {
    min-height: 32px;
    padding: 0.2rem 0.7rem;
    border: 0;
    border-radius: calc(var(--radius) - 3px);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.language-switcher button:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.language-switcher button.active,
.language-switcher button.active:hover {
    background: #fff;
    color: var(--brand-deep);
}

/* 帯の上のフォーカス輪郭は白（青地に対して 3.2:1） */
.app-bar :focus-visible,
.top-nav :focus-visible {
    outline-color: #fff !important;
}

html[lang="en"] [data-asset-locale="ja"] {
    display: none !important;
}

/* ナビゲーションセクション（分析の選び方） */
.navigation-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

/* 節見出し：左に短いドジャーブルーの印（4px） */
.navigation-section h2 {
    position: relative;
    padding-left: 1rem;
    font-size: 2rem;       /* 32px：ページの大見出し */
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-4);
    color: var(--ink);
}

.navigation-section h2::before,
.file-info-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.16em;
    bottom: 0.16em;
    width: 5px;
    border-radius: 3px;
    background: var(--brand);
}

/* 機能一覧：教科書の目次のように、分類見出し＋手法の一覧 */
.feature-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.navigation-subtitle {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: calc(-1 * var(--space-2)) 0 var(--space-5);
}

.category-section {
    padding: 0;
}

.category-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 2px solid var(--brand);
}

/* 分類見出しの左に置くアイコン（手法のアイコンタイルより一回り大きい） */
.category-icon {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 1rem;
}

.category-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-4);
}

.category-info h3 {
    font-size: 1.25rem;    /* 20px */
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}

.category-info p {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

.category-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 0 var(--space-5);
}

/* 手法1件 = 罫線で区切られた1行。押せることは見出しの下線・矢印で示す */
.feature-card {
    position: relative;
    display: block;
    padding: var(--space-3) var(--space-6) var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.feature-card::after {
    content: '\2192' / '';
    position: absolute;
    right: var(--space-2);
    top: var(--space-3);
    color: var(--muted);
    font-size: var(--text-base);
    line-height: 1.6;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* hover の面は罫線の位置を変えずに左へ少しはみ出させる */
.feature-card:hover,
.feature-card:focus-visible {
    background: var(--accent-hover);
    box-shadow: calc(-1 * var(--space-3)) 0 0 var(--accent-hover);
}

.feature-card:hover .feature-card-title,
.feature-card:focus-visible .feature-card-title {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.feature-card:hover::after,
.feature-card:focus-visible::after {
    color: var(--brand);
    transform: translateX(3px);
}

/* グレーアウトされた機能カード（データ条件を満たさない） */
.feature-card.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.feature-card.disabled .feature-card-title,
.feature-card.disabled .feature-card-description {
    color: #8a929d;
}

.feature-card.disabled::after {
    content: '';
}

.feature-card-requirement {
    font-size: var(--text-xs);
    color: var(--warn);
    margin-top: var(--space-1);
}

.feature-card-requirement::before {
    content: '条件: ';
    font-weight: 700;
}

html[lang="en"] .feature-card-requirement::before {
    content: 'Requires: ';
}

/* 一覧では概要図のサムネイルを出さない（分析画面の「概要」で確認できる） */
.feature-card-visual {
    display: none;
}

.feature-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* 手法名の左に置く小さなアイコンタイル（淡い青の面＋青い記号） */
.feature-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: #e8f3ff;
    color: var(--brand-deep);
    font-size: 0.95rem;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.feature-card:hover .feature-card-icon,
.feature-card:focus-visible .feature-card-icon {
    background: var(--brand);
    color: #fff;
}

/* 説明文の左端をタイトルの文字にそろえる */
.feature-card-description,
.feature-card-requirement {
    padding-left: calc(2rem + var(--space-3));
}

.feature-card.disabled .feature-card-icon {
    background: #eef0f3;
    color: #8a929d;
}

.feature-card-description {
    font-size: var(--text-sm);
    color: var(--ink-2);
    line-height: 1.6;
}

.analysis-visual-hero {
    margin: 0 0 var(--space-5);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.analysis-visual-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.analysis-visual-hero figcaption {
    padding: var(--space-2) var(--space-4);
    color: var(--muted);
    font-size: var(--text-sm);
    background: var(--tint);
    border-top: 1px solid var(--rule);
}

/* 生成AI支援 */
.ai-config-section[hidden] {
    display: none;
}

.ai-config-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.ai-config-header {
    width: 100%;
    border: 0;
    background: transparent;
    padding: var(--space-3) var(--space-5);
    color: var(--ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.ai-config-header:hover {
    background: var(--accent-hover);
    transform: none;
    box-shadow: none;
}

.ai-config-chevron {
    color: var(--accent);
    transition: transform 0.18s var(--ease);
}

.ai-config-section:not(.collapsed) .ai-config-chevron {
    transform: rotate(180deg);
}

.ai-config-content {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.25rem 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 1rem;
    align-items: start;
}

.ai-config-section [hidden] {
    display: none !important;
}

.ai-config-section.collapsed .ai-config-content {
    display: none;
}

.ai-config-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ai-config-icon {
    display: none;
}

.ai-config-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.25rem;
}

.ai-config-title-row h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-base);
}

.ai-config-main p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.ai-config-help {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.ai-config-help h4 {
    margin: 0 0 0.45rem;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.ai-config-help ol {
    margin: 0 0 0.75rem 1.25rem;
    padding: 0;
}

.ai-key-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.ai-key-link:hover {
    text-decoration: underline;
}

.ai-config-note {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius);
    background: var(--tint);
    border: 1px solid var(--rule);
}

.ai-config-warning {
    background: #fff7ed;
    border-color: #fdba74;
    color: #7c2d12;
}

.ai-config-policy-links {
    margin: 0.65rem 0 0;
}

.ai-config-policy-links a {
    color: var(--accent);
    font-weight: 700;
}

.ai-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.ai-status-badge.active {
    border-color: #a7f3d0;
    color: #047857;
    background: #ecfdf5;
}

.ai-config-controls {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
}

.ai-eligibility-confirm {
    grid-column: 1 / -1;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.ai-key-storage {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    color: #64748b;
    font-size: 0.8rem;
}

.ai-setting-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #334155;
    font-weight: 700;
    cursor: pointer;
}

.ai-setting-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.ai-key-input {
    width: 100%;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font: inherit;
}

.btn-ai-primary,
.btn-ai-secondary,
.btn-ai-cancel,
.ai-icon-button {
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-ai-primary {
    border: 1px solid var(--brand);
    background: var(--accent);
    color: white;
    padding: 0.7rem 0.9rem;
}

.btn-ai-primary:hover {
    background: var(--accent-strong);
    transform: none;
    box-shadow: none;
}

.btn-ai-secondary {
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    padding: 0.7rem 0.9rem;
}

.btn-ai-secondary:hover {
    background: var(--tint);
    transform: none;
    box-shadow: none;
}

.btn-ai-cancel {
    border: 1px solid #dc2626;
    background: white;
    color: #b91c1c;
    padding: 0.7rem 0.9rem;
}

.btn-ai-cancel:hover {
    background: #fef2f2;
}

.btn-ai-primary:disabled,
.btn-ai-secondary:disabled,
.btn-ai-cancel:disabled,
.ai-icon-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.ai-assist-widget {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9000;
    width: min(560px, calc(100vw - 2rem));
}

/* AI機能だと一目で分かるよう、青から紫へのグラデーションと「きらめき」記号を使う */
.ai-assist-toggle {
    width: auto;
    margin-left: auto;
    border: 1px solid #4338ca;
    background: linear-gradient(135deg, var(--brand-deep) 0%, #4f46e5 55%, #7c3aed 100%);
    color: white;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-lg);
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.ai-assist-panel {
    background: white;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    max-height: min(760px, calc(100vh - 3rem));
    display: flex;
    flex-direction: column;
}

.ai-assist-widget.collapsed {
    width: auto;
    right: 0.5rem;
}

.ai-assist-widget.collapsed .ai-assist-toggle {
    display: inline-flex;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius);
}

.ai-assist-widget.collapsed .ai-assist-toggle span {
    display: none;
}

.ai-assist-widget.collapsed .ai-assist-toggle {
    flex-direction: column;
    gap: 1px;
    border-radius: 14px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ai-assist-widget.collapsed .ai-assist-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35);
}

.ai-sparkle-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: 0 0 auto;
}

.ai-toggle-mark {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
}

/* 開いているときは「AI解釈補助」の文字があるので、AIの小さな文字は出さない */
.ai-assist-widget:not(.collapsed) .ai-toggle-mark {
    display: none;
}

.ai-sparkle-inline {
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.35rem;
    vertical-align: -0.12em;
    fill: #6d28d9;
}

@media (prefers-reduced-motion: reduce) {
    .ai-assist-widget.collapsed .ai-assist-toggle:hover {
        transform: none;
    }
}

.ai-assist-widget.collapsed .ai-assist-panel {
    display: none;
}

.ai-assist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--tint);
    border-bottom: 1px solid var(--rule);
    flex: 0 0 auto;
}

.ai-assist-header h4 {
    margin: 0 0 0.25rem 0;
    color: var(--ink);
    font-size: 1rem;
}

.ai-assist-header p {
    margin: 0;
    color: #475569;
    font-size: 0.85rem;
}

.ai-icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--rule-strong);
    background: white;
    color: var(--ink-2);
}

.ai-header-actions {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.ai-context-note {
    padding: 0.75rem 1rem;
    background: #fffbeb;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
    font-size: 0.82rem;
    flex: 0 0 auto;
}

#ai-beginner-guide {
    flex: 0 0 auto;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ai-beginner-guide {
    max-height: 230px;
    overflow-y: auto;
}

.ai-beginner-guide > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    color: #334155;
    cursor: pointer;
    list-style: none;
}

.ai-beginner-guide > summary::-webkit-details-marker {
    display: none;
}

.ai-beginner-guide > summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: -3px;
}

.ai-beginner-guide > summary i {
    color: var(--accent);
}

.ai-beginner-guide > summary span {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.ai-beginner-guide > summary strong {
    font-size: 0.84rem;
}

.ai-beginner-guide > summary small {
    color: #64748b;
    font-size: 0.75rem;
}

.ai-beginner-guide-body {
    padding: 0 1rem 0.85rem;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.5;
}

.ai-beginner-guide-body > p,
.ai-beginner-guide-body h5 {
    margin: 0 0 0.6rem;
}

.ai-beginner-guide-body ol {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    padding: 0;
    list-style: none;
}

.ai-beginner-guide-body li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.5rem;
}

.ai-beginner-guide-body li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

.ai-beginner-guide-body li p,
.ai-beginner-guide-body li strong,
.ai-beginner-guide-body li small {
    display: block;
    margin: 0;
}

.ai-beginner-guide-body li small {
    margin-top: 0.1rem;
    color: #475569;
    font-size: 0.76rem;
}

.ai-beginner-limit {
    margin: 0 !important;
    padding-top: 0.6rem;
    border-top: 1px solid #cbd5e1;
}

.ai-context-settings {
    flex: 0 0 auto;
    border-bottom: 1px solid #e2e8f0;
    background: white;
    max-height: 210px;
    overflow-y: auto;
}

.ai-context-settings summary {
    padding: 0.65rem 1rem;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    list-style-position: inside;
}

.ai-context-settings summary i {
    margin-right: 0.35rem;
    color: var(--accent);
}

.ai-context-settings-body {
    padding: 0 1rem 0.85rem;
    display: grid;
    grid-template-columns: minmax(140px, 0.75fr) minmax(0, 1.25fr);
    gap: 0.65rem 0.85rem;
    align-items: center;
}

.ai-context-field {
    display: grid;
    gap: 0.3rem;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
}

.ai-context-field select {
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    background: white;
    color: #1e293b;
    font: inherit;
}

.ai-raw-data-toggle {
    align-self: end;
    min-height: 38px;
    font-size: 0.8rem;
}

.ai-context-settings-body > p {
    grid-column: 1 / -1;
    margin: 0;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.5;
}

.ai-context-settings-body > .btn-ai-secondary {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
}

.ai-context-preview {
    grid-column: 1 / -1;
    min-width: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 0.65rem;
}

.ai-context-summary {
    margin: 0 0 0.5rem;
    color: #334155;
    font-size: 0.78rem;
    line-height: 1.5;
}

.ai-context-preview pre {
    margin: 0;
    max-height: 170px;
    overflow: auto;
    border-radius: 6px;
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.65rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.72rem;
    line-height: 1.45;
}

.ai-assist-output {
    flex: 1 1 auto;
    min-height: 140px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    color: #1e293b;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-response-verification {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8rem;
    line-height: 1.45;
}

.ai-response-meta {
    color: #64748b;
    font-size: 0.75rem;
    text-align: right;
}

.ai-assist-output p {
    margin: 0;
}

.ai-assist-output.loading {
    color: var(--accent);
}

.ai-assist-output.error {
    color: #991b1b;
    background: #fef2f2;
}

.ai-chat-message {
    max-width: 92%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    line-height: 1.6;
    word-break: break-word;
}

.ai-chat-message p,
.ai-chat-message ul,
.ai-chat-message ol,
.ai-chat-message blockquote,
.ai-chat-message pre {
    margin: 0 0 0.65rem;
}

.ai-chat-message p:last-child,
.ai-chat-message ul:last-child,
.ai-chat-message ol:last-child,
.ai-chat-message blockquote:last-child,
.ai-chat-message pre:last-child {
    margin-bottom: 0;
}

.ai-chat-message ul,
.ai-chat-message ol {
    padding-left: 1.25rem;
}

.ai-chat-message li + li {
    margin-top: 0.25rem;
}

.ai-chat-message h1,
.ai-chat-message h2,
.ai-chat-message h3,
.ai-chat-message h4 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    color: inherit;
}

.ai-chat-message code {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 4px;
    padding: 0.1rem 0.3rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88em;
}

.ai-chat-message pre {
    overflow-x: auto;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
}

.ai-chat-message pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.ai-chat-message blockquote {
    border-left: 3px solid var(--accent-line);
    padding-left: 0.75rem;
    color: #475569;
}

.ai-chat-message.assistant {
    align-self: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}

.ai-chat-message.user {
    align-self: flex-end;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: white;
    white-space: pre-wrap;
}

.ai-chat-message.system,
.ai-chat-message.error {
    align-self: stretch;
    max-width: 100%;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ai-chat-message.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.ai-chat-input-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: white;
    flex: 0 0 auto;
}

.ai-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.65rem 1rem 0;
    border-top: 1px solid #e2e8f0;
    background: white;
    flex: 0 0 auto;
}

.ai-quick-actions .btn-ai-secondary {
    padding: 0.45rem 0.6rem;
    font-size: 0.76rem;
}

.ai-chat-input {
    width: 100%;
    min-width: 0;
    resize: vertical;
    max-height: 140px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    font: inherit;
    line-height: 1.5;
}

.ai-assist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 1rem 1rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex: 0 0 auto;
}

.ai-assist-panel [hidden] {
    display: none !important;
}

@media (max-height: 900px) {
    .ai-assist-header {
        padding: 0.75rem;
    }

    .ai-context-note {
        padding: 0.55rem 0.75rem;
    }

    .ai-beginner-guide {
        max-height: 130px;
    }

    .ai-context-settings {
        max-height: 150px;
    }

    .ai-context-settings summary {
        padding: 0.55rem 0.75rem;
    }

    .ai-context-settings-body {
        padding: 0 0.75rem 0.65rem;
    }

    .ai-assist-output {
        min-height: 36px;
        padding: 0.75rem;
    }

    .ai-quick-actions {
        padding: 0.5rem 0.75rem 0;
    }

    .ai-quick-actions .btn-ai-secondary {
        padding: 0.4rem 0.55rem;
    }

    .ai-chat-input-area {
        padding: 0.6rem 0.75rem;
    }

    .ai-assist-actions {
        padding: 0.65rem 0.75rem 0.75rem;
    }
}

/* 分析エリア */
.analysis-area {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-6) var(--space-6) var(--space-7);
    margin-bottom: var(--space-6);
    max-width: 100%;
    overflow-x: auto;
}

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

/* 戻る：パンくずのような控えめなテキストボタン */
.btn-back {
    background: transparent;
    color: var(--accent);
    border: 0;
    padding: var(--space-2) 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-back:hover {
    background: transparent;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transform: none;
    box-shadow: none;
}

/* 初学者向けの共通説明 */
.beginner-explanation {
    margin: 0 0 var(--space-5);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: #ffffff;
    overflow: hidden;
}

.beginner-explanation > summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.beginner-explanation > summary::-webkit-details-marker {
    display: none;
}

.beginner-explanation > summary:hover {
    background: var(--tint);
}

.beginner-explanation > summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

.beginner-explanation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    color: var(--muted);
    font-size: 1rem;
}

.beginner-explanation-label {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.beginner-explanation-label strong {
    font-size: 1.05rem;
    line-height: 1.35;
}

.beginner-explanation-label small {
    margin-top: 0.1rem;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.35;
}

.beginner-explanation-chevron {
    flex: 0 0 auto;
    color: #64748b;
    transition: transform 0.2s ease;
}

.beginner-explanation[open] .beginner-explanation-chevron {
    transform: rotate(180deg);
}

.beginner-explanation-body {
    padding: 1rem 1.15rem 1.1rem;
    border-top: 1px solid #dcfce7;
}

.beginner-explanation-summary {
    margin: 0 0 1rem;
    color: #14532d;
    font-size: 1.04rem;
    font-weight: 600;
}

.inquiry-flow-section {
    margin: 0 0 1.1rem;
}

.inquiry-flow-section > h4 {
    margin: 0 0 0.55rem;
    color: #334155;
    font-size: 0.92rem;
}

.inquiry-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.inquiry-flow li {
    display: flex;
    min-width: 0;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    border-left: 1px solid #cbd5e1;
    background: #f8fafc;
}

.inquiry-flow li:first-child {
    border-left: 0;
}

.inquiry-flow li.is-current {
    background: var(--paper);
    box-shadow: inset 0 -3px 0 var(--brand);
}

.result-beginner-body .inquiry-flow li.is-current {
    background: var(--paper);
    box-shadow: inset 0 -3px 0 var(--brand);
}

.inquiry-flow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.45rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: #334155;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.inquiry-flow li > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.inquiry-flow strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    color: #1e293b;
    font-size: 0.82rem;
}

.inquiry-flow strong em {
    padding: 0.08rem 0.32rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: #166534;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 700;
}

.result-beginner-body .inquiry-flow strong em {
    color: #075985;
}

.inquiry-flow small {
    color: #475569;
    font-size: 0.74rem;
    line-height: 1.4;
}

.beginner-explanation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 1.5rem;
}

.beginner-explanation-grid section {
    min-width: 0;
}

.beginner-explanation-grid h4 {
    margin: 0 0 0.55rem;
    color: #334155;
    font-size: 0.98rem;
}

.beginner-explanation-grid h4 i {
    width: 1.2rem;
    color: #15803d;
}

.beginner-explanation-grid ol {
    margin: 0;
    padding-left: 1.45rem;
}

.beginner-explanation-grid li {
    margin-bottom: 0.35rem;
}

.beginner-explanation-caution {
    padding-left: 1rem;
    border-left: 3px solid #f59e0b;
}

.beginner-explanation-caution h4 i {
    color: #b45309;
}

.beginner-explanation-caution p {
    margin: 0;
}

.beginner-next-section,
.result-next-section {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e2e8f0;
}

.beginner-next-section h4,
.result-next-section h4 {
    margin: 0 0 0.65rem;
    color: #334155;
    font-size: 0.98rem;
}

.beginner-next-section h4 i {
    width: 1.2rem;
    color: #15803d;
}

.result-next-section h4 i {
    width: 1.2rem;
    color: #0369a1;
}

.beginner-next-actions,
.result-next-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding-left: 1.4rem;
}

.beginner-next-actions li,
.result-next-actions li {
    padding-left: 0.15rem;
}

.beginner-next-actions strong,
.result-next-actions strong,
.beginner-next-actions span,
.result-next-actions span {
    display: block;
}

.beginner-next-actions strong,
.result-next-actions strong {
    color: #1e293b;
    line-height: 1.5;
}

.beginner-next-actions span,
.result-next-actions span {
    margin-top: 0.25rem;
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.5;
}

.beginner-next-actions b,
.result-next-actions b {
    color: #334155;
}

.beginner-explanation-detail-note {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.84rem;
}

/* 分析結果のポイントを説明する共通エクスパンダー */
.result-beginner-explanation {
    margin: 0 0 var(--space-5);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: #ffffff;
    overflow: hidden;
}

.result-beginner-explanation > summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.result-beginner-explanation > summary::-webkit-details-marker {
    display: none;
}

.result-beginner-explanation > summary:hover {
    background: var(--tint);
}

.result-beginner-explanation > summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

.result-beginner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.25rem;
    width: 1.25rem;
    color: var(--muted);
    font-size: 1rem;
}

.result-beginner-label {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.result-beginner-label strong {
    font-size: 1.05rem;
    line-height: 1.35;
}

.result-beginner-label small {
    margin-top: 0.1rem;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.35;
}

.result-beginner-chevron {
    flex: 0 0 auto;
    color: #64748b;
    transition: transform 0.2s ease;
}

.result-beginner-explanation[open] .result-beginner-chevron {
    transform: rotate(180deg);
}

.result-beginner-body {
    padding: 1rem 1.15rem 1.1rem;
    border-top: 1px solid #e0f2fe;
}

.result-beginner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.5rem;
}

.result-beginner-grid section {
    min-width: 0;
}

.result-beginner-grid h4,
.result-beginner-caution h4 {
    margin: 0 0 0.65rem;
    color: #334155;
    font-size: 0.98rem;
}

.result-beginner-grid h4 i,
.result-beginner-caution h4 i {
    width: 1.2rem;
    color: #0369a1;
}

.result-beginner-summary-list {
    margin: 0;
    padding-left: 1.4rem;
}

.result-beginner-summary-list li {
    margin-bottom: 0.55rem;
    line-height: 1.65;
}

.result-metric-list {
    margin: 0;
}

.result-metric-list > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.65rem 0;
    border-top: 1px solid #e2e8f0;
}

.result-metric-list > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.result-metric-list dt {
    color: var(--accent-strong);
    font-weight: 700;
}

.result-metric-list dd {
    margin: 0;
    display: grid;
    gap: 0.28rem;
    line-height: 1.55;
}

.result-metric-meaning {
    color: #334155;
}

.result-metric-reading {
    color: #475569;
    font-size: 0.9rem;
}

.result-metric-reading strong {
    color: #075985;
}

.result-metric-empty {
    margin: 0;
    color: #64748b;
}

.result-beginner-caution {
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
}

.result-beginner-caution h4 i {
    color: #b45309;
}

.result-beginner-caution p {
    margin: 0;
    line-height: 1.6;
}

.result-beginner-detail-note {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.84rem;
}

/* フッター：濃い青（#0f5fa8）の帯に白文字（6.52:1）。帯は左右と下へ画面の端まで伸ばす */
.footer {
    padding: var(--space-6) 0 var(--space-5);
    margin-top: var(--space-7);
    background: var(--brand-deep);
    box-shadow: 0 0 0 100vmax var(--brand-deep);
    clip-path: inset(0 -100vmax -100vmax);
    color: #fff;
    font-size: var(--text-sm);
}

.footer-content p {
    color: #fff;
    margin-bottom: 0.15rem;
}

.footer-content p:first-child {
    font-weight: 700;
}

.footer-links {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.footer-links a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--dur) var(--ease);
}

.footer-links a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

.footer :focus-visible {
    outline-color: #fff !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-section {
        margin-bottom: var(--space-4);
    }

    /* 狭い画面：1 行目に操作、その下にアプリ名とキャッチコピー（コンパクトに） */
    .app-bar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "actions" "brand";
        min-height: 0;
        padding: 0.875rem 0 1.25rem;
        gap: var(--space-3);
    }


    .hero-title {
        font-size: 2.125rem;  /* 34px 太字 */
    }

    .hero-subtitle {
        margin-top: 0.4rem;
        font-size: 1.1875rem; /* 19px 太字＝大きな文字の下限（18.7px）以上 */
    }

    .hero-actions {
        justify-content: space-between;
        gap: var(--space-2);
    }

    #main-app {
        padding: 0 var(--space-4) var(--space-4);
    }

    .navigation-section {
        padding: var(--space-5) var(--space-4);
    }

    .navigation-section h2 {
        font-size: var(--text-lg);
    }

    .analysis-area {
        padding: var(--space-5) var(--space-4) var(--space-6);
    }

    .ai-assist-output {
        min-height: 32px;
    }

    .beginner-explanation-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

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

    .inquiry-flow li:nth-child(3) {
        border-top: 1px solid #cbd5e1;
        border-left: 0;
    }

    .inquiry-flow li:nth-child(4) {
        border-top: 1px solid #cbd5e1;
    }

    .beginner-next-actions,
    .result-next-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .result-beginner-grid {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .result-metric-list > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .beginner-explanation-caution {
        padding-top: 0.85rem;
        padding-left: 0;
        border-top: 3px solid #f59e0b;
        border-left: 0;
    }

    .ai-config-header,
    .ai-config-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .ai-config-content {
        grid-template-columns: 1fr;
    }

    .ai-config-controls {
        grid-template-columns: 1fr;
    }

    .ai-assist-widget {
        right: 1rem;
        bottom: 1rem;
        width: calc(100vw - 2rem);
    }

    .ai-assist-panel {
        max-height: calc(100vh - 2rem);
    }

    .ai-assist-widget.collapsed {
        width: auto;
        right: 1rem;
    }

    .ai-assist-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ai-assist-actions #ai-copy-context-btn {
        grid-column: 1 / -1;
    }

    .ai-context-settings-body {
        grid-template-columns: 1fr;
    }

    .ai-context-settings-body > p,
    .ai-context-settings-body > .btn-ai-secondary,
    .ai-context-preview {
        grid-column: 1;
    }

    .category-cards {
        grid-template-columns: 1fr;
    }

    /* Mobile Upload Area */
    .upload-area {
        padding: 1.5rem;
    }

    .data-input-panel {
        flex-direction: column;
        gap: 1.5rem;
    }

    .upload-info {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .upload-buttons {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
        align-items: stretch;
    }

    .upload-hint {
        margin: 0.5rem 0;
    }

    .btn-upload,
    .btn-demo {
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }

    .paste-input-heading,
    .paste-input-footer {
        align-items: stretch;
    }

    .paste-input-footer {
        flex-direction: column;
    }

    .paste-input-footer .btn-upload {
        width: 100%;
    }
}

/* フォーム要素 */
input[type="file"],
select,
input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background-color: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color 0.15s ease;
}

input[type="file"]:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
    border-color: var(--brand);
}

/* 既定のボタン = 主要操作（藍の塗り）。動きや影で飾らない */
button {
    background: var(--accent);
    color: white;
    border: 1px solid transparent;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.4;
}

button:hover {
    background: var(--accent-strong);
}

/* 主要ボタン（ファイルを選択・分析する・各分析の実行）：ドジャーブルーの塗りに 19px 太字の白
   （大きな文字のため 3.24:1 で可）。hover は #1670c9（5.0:1）、押すとわずかに沈む */
.btn-upload,
.guided-run-btn,
.btn-analysis {
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--radius-btn);
    padding: 0.85rem 2rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(15, 95, 168, 0.2), 0 4px 12px rgba(30, 144, 255, 0.22);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 80ms var(--ease);
}

.btn-upload:hover:not(:disabled),
.guided-run-btn:hover:not(:disabled),
.btn-analysis:hover:not(:disabled) {
    background: var(--accent);
    box-shadow: 0 1px 2px rgba(15, 95, 168, 0.22), 0 6px 16px rgba(15, 95, 168, 0.26);
}

.btn-upload:active:not(:disabled),
.btn-analysis:active:not(:disabled),
.guided-run-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(15, 95, 168, 0.2);
}

.btn-upload:disabled,
.guided-run-btn:disabled,
.btn-analysis:disabled {
    box-shadow: none;
}

/* 副ボタン：白地に #1670c9 の文字、2px のドジャーブルー枠 */
.btn-demo,
.guided-btn:not(.guided-btn-primary) {
    background: var(--paper);
    color: var(--accent);
    border: 2px solid var(--brand);
    font-weight: 700;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-demo:hover,
.guided-btn:not(.guided-btn-primary):hover {
    background: var(--accent-weak);
    color: var(--accent-strong);
}

button:disabled {
    background: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
    transform: none;
}

/* メインアップロードセクション */
.upload-section-main {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}

/* アップロードエリア */
.upload-section {
    margin-bottom: 2rem;
}

.upload-area {
    border: 1.5px dashed #9cc7f2;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    background: #f7fbff;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    cursor: default;
    position: relative;
}

.upload-area:hover {
    border-color: var(--brand);
    background: var(--accent-hover);
}

.upload-area.drag-over {
    border-color: var(--brand);
    border-style: solid;
    background: var(--accent-weak);
}

.data-input-switcher {
    display: flex;
    gap: var(--space-5);
    margin: 0 0 var(--space-5);
    border-bottom: 1px solid var(--rule);
}

.data-input-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    color: var(--muted);
    display: inline-flex;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.4rem 0.1rem 0.5rem;
    font-weight: 700;
}

.data-input-tab i {
    font-size: 0.9em;
}

.data-input-tab:hover {
    background: transparent;
    color: var(--ink);
}

.data-input-tab.active {
    background: transparent;
    border-bottom-color: var(--brand);
    color: var(--accent-strong);
}

.data-input-panel {
    align-items: center;
    display: flex;
    gap: var(--space-6);
    justify-content: space-between;
    flex-wrap: wrap;
}

.data-input-panel[hidden] {
    display: none !important;
}

.paste-input-panel {
    display: block;
    margin: 0 auto;
    max-width: 920px;
}

.paste-input-heading,
.paste-input-footer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.paste-input-heading {
    margin-bottom: 0.75rem;
}

.paste-input-heading h3 {
    margin: 0;
}

.paste-input-heading p,
.paste-input-footer span {
    color: #64748b;
    font-size: 0.84rem;
    margin: 0.25rem 0 0;
}

.tabular-grid-toolbar {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    display: flex;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
}

.tabular-grid-action {
    align-items: center;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #334155;
    display: inline-flex;
    font-size: 0.82rem;
    gap: 0.35rem;
    justify-content: center;
    min-height: 32px;
    min-width: 52px;
    padding: 0.35rem 0.55rem;
}

.tabular-grid-action:hover:not(:disabled) {
    background: #eef6ff;
    border-color: #60a5fa;
    box-shadow: none;
    color: var(--accent);
    transform: none;
}

.tabular-grid-action:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.tabular-grid-toolbar-divider {
    align-self: stretch;
    background: #cbd5e1;
    margin: 0 0.15rem;
    width: 1px;
}

.tabular-grid-shell {
    background: white;
    border: 1px solid #94a3b8;
    border-radius: 0 0 4px 4px;
    max-height: 23rem;
    overflow: auto;
    overscroll-behavior: contain;
    position: relative;
}

.tabular-data-grid {
    background: white;
    border-collapse: separate;
    border-spacing: 0;
    color: #1f2937;
    font-family: inherit;
    font-size: 0.86rem;
    min-width: 100%;
    table-layout: fixed;
    width: max-content;
}

.tabular-grid-corner,
.tabular-grid-column-header {
    background: #e2e8f0;
    border-bottom: 1px solid #94a3b8;
    border-right: 1px solid #cbd5e1;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    height: 30px;
    padding: 0.25rem 0.5rem;
    position: sticky;
    text-align: center;
    top: 0;
    z-index: 4;
}

.tabular-grid-corner {
    left: 0;
    min-width: 72px;
    width: 72px;
    z-index: 6;
}

.tabular-grid-column-header {
    min-width: 164px;
    width: 164px;
}

.tabular-grid-row-header {
    background: #f1f5f9;
    border-bottom: 1px solid #d8e0e8;
    border-right: 1px solid #94a3b8;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    height: 38px;
    left: 0;
    min-width: 72px;
    padding: 0.2rem 0.35rem;
    position: sticky;
    text-align: center;
    width: 72px;
    z-index: 3;
}

.tabular-grid-row-header small {
    color: #047857;
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.tabular-grid-name-row-header {
    background: #dff7ed;
    color: #065f46;
}

.tabular-grid-cell {
    background: white;
    border-bottom: 1px solid #d8e0e8;
    border-right: 1px solid #d8e0e8;
    box-sizing: border-box;
    cursor: text;
    height: 38px;
    line-height: 1.35;
    max-width: 320px;
    min-width: 164px;
    outline: none;
    overflow-wrap: anywhere;
    padding: 0.45rem 0.55rem;
    text-align: left;
    vertical-align: middle;
    white-space: pre-wrap;
    width: 164px;
}

.tabular-grid-cell:hover {
    background: #f8fbff;
}

.tabular-grid-cell[data-grid-mode="navigation"] {
    caret-color: transparent;
    cursor: cell;
}

.tabular-grid-cell:focus,
.tabular-grid-cell.active {
    background: var(--accent-weak);
    box-shadow: inset 0 0 0 2px var(--accent);
    position: relative;
    z-index: 2;
}

.tabular-grid-cell.editing {
    background: white;
    box-shadow: inset 0 0 0 2px #0f766e;
    caret-color: auto;
    cursor: text;
}

.vis-tooltip .tm-network-tooltip {
    display: grid;
    gap: 2px;
    line-height: 1.45;
}

.vis-tooltip .tm-network-tooltip-title {
    color: #111827;
    font-weight: 700;
}

.tabular-grid-header-cell {
    background: #ecfdf5;
    border-bottom-color: #86cbb0;
    color: #064e3b;
    font-weight: 700;
}

.tabular-grid-header-cell:hover {
    background: #e2f8ee;
}

.paste-input-footer {
    margin-top: 0.75rem;
}

.paste-input-footer .btn-upload {
    flex: 0 0 auto;
    margin: 0;
}

.icon-button-subtle {
    align-items: center;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.icon-button-subtle:hover {
    background: #e2e8f0;
    box-shadow: none;
    transform: none;
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.upload-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
}

.upload-icon {
    display: none;
}

.upload-area h3 {
    font-size: var(--text-md);
    margin-bottom: 0.1rem;
    color: var(--ink);
}

@keyframes float {

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

    50% {
        transform: translateY(-8px);
    }
}

.upload-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.upload-buttons {
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-upload {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.upload-hint {
    margin: 0 var(--space-1);
    font-size: var(--text-sm);
    color: var(--muted);
    display: inline-block;
}

/* 副次操作（枠線のみ） */
.btn-demo {
    min-height: 3.375rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-btn);
    font-size: var(--text-base);
    letter-spacing: 0.02em;
}

/* ファイル情報 */
.file-info {
    margin-top: var(--space-5);
    padding: 0;
    background: transparent;
}

.file-info-title {
    position: relative;
    padding-left: 0.875rem;
    font-size: 1.25rem;    /* 20px */
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

/* 読み込んだデータの情報：表の見出しのように「項目 / 値」を横に並べる */
.file-info-list {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    margin: 0;
}

.file-info-list > div {
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    min-width: 0;
}

.file-info-list > div + div {
    padding-left: var(--space-4);
    border-left: 1px solid var(--rule);
}

.file-info-list dt {
    font-size: var(--text-xs);
    color: var(--muted);
}

.file-info-list dd {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.loading {
    text-align: center;
    color: var(--text-secondary);
}

.loading i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.success-message {
    text-align: center;
    color: #10b981;
}

.success-message i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.error-message {
    text-align: center;
    color: #ef4444;
}

.error-message i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.file-name {
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

.btn-retry {
    margin-top: 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-retry:hover {
    background: var(--primary-dark);
}

/* ユーティリティクラス */
.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

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

.text-muted {
    color: var(--text-secondary);
}

/* グラフエリア */
#plot-area {
    margin-top: var(--space-6);
    padding: 0;
    background: white;
}

/* 結果テーブル */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

/* 表は論文の表のように横罫線だけで組む：上下を太線、見出しの下を細線 */
table th,
table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

table thead th {
    background: transparent;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    vertical-align: bottom;
}

table th {
    background: transparent;
    font-weight: 700;
    color: var(--ink);
}

table tbody tr:hover {
    background: var(--tint);
}

/* 折りたたみ可能なセクション */
/* 折りたたみ = 罫線で区切った見出し行。開くと本文が続く */
.collapsible-section {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--paper);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.collapsible-header:hover {
    background: var(--accent-hover);
}

.collapsible-header:not(.collapsed) {
    border-bottom: 1px solid var(--rule);
}

.collapsible-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.collapsible-header h3 > i {
    color: var(--accent);
    font-size: 0.9em;
    width: 1.1em;
    text-align: center;
}

.collapsible-header i.toggle-icon {
    font-size: 0.85rem;
    color: var(--accent);
    transition: transform 0.18s var(--ease);
}

.collapsible-header.collapsed i.toggle-icon {
    transform: rotate(-90deg);
}

.collapsible-content {
    padding: var(--space-5);
    max-height: 2000px;
    overflow: hidden;
    max-width: 100%;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.collapsible-content.collapsed {
    max-height: 0;
    padding: 0 var(--space-5);
}

/* ページ下部の「このアプリケーションについて」などは紙面（カード）として */
#main-app > .info-sections > .collapsible-section {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* データ概要表示 */
.data-overview {
    margin-top: 1.5rem;
}

.data-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.data-stat-card {
    background: transparent;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--ink);
    border-radius: 0;
    text-align: left;
}

.data-stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.data-stat-card .stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink);
}

/* テーブルのスクロール */
.table-container {
    overflow-x: auto;
    margin: 1rem 0;
    max-height: 50vh;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 枠の中にさらに表の枠がある場合（データプレビューなど）は、内側の枠だけをスクロールさせる。
   外側もスクロールすると、内側の横スクロールバーが外側の枠に隠れて操作できなくなる */
.table-container:has(.table-container) {
    overflow: visible;
    max-height: none;
}

/* 情報セクション */
.info-sections {
    margin-bottom: var(--space-6);
}

.info-sections .collapsible-content {
    line-height: 1.8;
}

.info-sections h4 {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--ink);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-sections .collapsible-content > h4:first-child {
    margin-top: 0;
}

.info-sections ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.info-sections ul li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.info-sections ul li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 1.15rem;
    width: 0.35rem;
    height: 0.35rem;
    background: var(--muted);
    border-radius: 50%;
}

/* 用語・ポイントの囲み（教科書の「ポイント」欄） */
.info-sections .note {
    background: var(--tint);
    border-left: 3px solid var(--ink);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    border-radius: 0;
}

/* 分析手法グリッド */
.analysis-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 0 var(--space-5);
    margin-top: var(--space-2);
}

.method-item {
    background: transparent;
    border-bottom: 1px solid var(--rule);
    padding: var(--space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.method-item i {
    font-size: 0.95rem;
    width: 1.2em;
    text-align: center;
    color: var(--muted);
}

.method-item span {
    font-weight: 500;
    color: var(--text-primary);
}

/* 使い方ステップ */
.usage-step {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
}

.step-number {
    flex-shrink: 0;
    width: 1.75rem;
    color: var(--accent-strong);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--text-lg);
    line-height: 1.2;
}

.step-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.step-content p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Tips */
.info-sections .tips {
    margin-top: 1.5rem;
}

.info-sections .tips ul li {
    padding: var(--space-2) 0 var(--space-2) 1.5rem;
    border-bottom: 1px solid var(--rule);
}

/* 更新履歴 */
.changelog {
    margin-top: 1rem;
}

.changelog-entry {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
    margin-bottom: var(--space-5);
    position: relative;
}

.changelog-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.changelog-version {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--ink);
}

.changelog-date {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.changelog-entry h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.changelog-entry ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.changelog-entry ul li {
    padding: 0.25rem 0;
    color: var(--text-secondary);
}

.changelog-entry ul li::before {
    display: none;
}

/* GitHub情報 */
.github-info {
    background: var(--tint);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.github-info i {
    font-size: 1.5rem;
    color: #333;
}

.github-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.github-info a:hover {
    text-decoration: underline;
}



/* MultiSelect Component Styles */
.multiselect-wrapper {
    position: relative;
    width: 100%;
}

.multiselect-input {
    min-height: 44px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    /* Match padding */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: white;
    transition: all 0.3s ease;
}

.multiselect-input:focus-within {
    border-color: var(--brand);
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.multiselect-wrapper.active .multiselect-input {
    border-color: var(--brand);
}

.multiselect-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.multiselect-tag {
    background: var(--accent-weak);
    color: var(--accent-strong);
    border: 1px solid var(--accent-line);
    border-radius: 4px;
    padding: 2px 4px 2px 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.multiselect-remove {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
}

.multiselect-remove:hover,
.multiselect-remove:focus-visible {
    background: var(--accent-line);
    color: #b91c1c;
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.multiselect-trigger {
    min-width: 120px;
    min-height: 32px;
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    padding: 4px;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.multiselect-trigger:focus-visible {
    outline: none;
}

.multiselect-placeholder {
    overflow-wrap: anywhere;
}

.multiselect-chevron {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 0 8px;
}

.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.multiselect-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.multiselect-options li {
    min-height: 40px;
    padding: 8px 12px 8px 36px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.95rem;
    position: relative;
}

.multiselect-options li:hover,
.multiselect-options li:focus-visible {
    background: #f1f5f9;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.multiselect-option[aria-selected="true"] {
    background: var(--accent-weak);
    font-weight: 600;
}

.multiselect-option[aria-selected="true"]::before {
    content: "\2713";
    position: absolute;
    left: 14px;
    color: #075985;
    font-weight: 700;
}

.multiselect-options .no-options {
    color: var(--text-secondary);
    cursor: default;
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
}

/* Analysis Button */
/* 分析の実行ボタン：画面で最も重要な操作。幅いっぱいにせず、左寄せで明確に */
.btn-analysis {
    margin-top: var(--space-5);
    width: auto;
    min-width: min(100%, 16rem);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
}

/* t-test Radio-like Labels */
.ttest-radio-label {
    flex: 1;
    min-width: 200px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: border-color 0.15s;
    border: 1px solid var(--rule);
    background: var(--paper);
}

.ttest-radio-label:hover {
    border-color: var(--rule-strong);
}

.ttest-radio-label.selected {
    background: var(--accent-weak);
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand), inset 4px 0 0 var(--brand);
}

/* --- Text Mining Tab & KWIC Extensions --- */

/* 分析画面のページ見出し（見出し＋1行説明＋太罫） */
.analysis-title-banner {
    padding: 1.75rem 2rem;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--accent-weak);
    color: var(--ink);
}

.analysis-title-banner h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--brand-deep);
}

.analysis-title-banner h3 > i {
    display: none;
}

.analysis-title-banner p {
    margin: 0.5rem 0 0;
    color: var(--ink-2);
}

@media (max-width: 768px) {
    .analysis-title-banner {
        padding: 1.25rem;
    }

    .analysis-title-banner h3 {
        font-size: 1.5rem;
    }
}

.tm-settings-panel {
    background: white;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

.tm-input-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tm-input-toolbar > span {
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
}

.tm-input-panel[hidden] {
    display: none;
}

.tm-input-panel > label {
    align-items: center;
    color: #2d3748;
    display: flex;
    font-weight: 700;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.tm-input-panel > label small,
.tm-input-status {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}

#tm-direct-text {
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    color: #1f2937;
    font: inherit;
    line-height: 1.65;
    min-height: 11rem;
    padding: 0.85rem;
    resize: vertical;
    width: 100%;
}

#tm-direct-text:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.12);
    outline: none;
}

.tm-input-status {
    margin-top: 0.4rem;
    text-align: right;
}

.tm-variable-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.tm-advanced-settings {
    border-top: 1px solid var(--border-color);
    margin: 0.25rem 0 1.25rem;
    padding-top: 0.75rem;
}

.tm-advanced-settings summary {
    color: #334155;
    cursor: pointer;
    font-weight: 700;
    padding: 0.5rem 0;
}

.tm-settings-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 0.85rem;
    padding-top: 0.75rem;
}

.tm-settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
}

.tm-settings-grid input,
.tm-settings-grid select,
.tm-settings-grid textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: white;
    color: #1f2937;
    font: inherit;
    padding: 0.6rem 0.7rem;
}

.tm-settings-grid textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.tm-wide-setting {
    grid-column: span 2;
}

.tm-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid #cbd5e1;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
}

.tm-section-title h4 {
    color: #1f2937;
    font-size: 1.15rem;
    margin: 0;
}

.tm-section-title span,
.tm-count-badge {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.tm-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.tm-summary-strip > div {
    background: white;
    border-right: 1px solid #e2e8f0;
    min-width: 0;
    padding: 0.75rem 0.85rem;
}

.tm-summary-strip > div:last-child {
    border-right: 0;
}

.tm-summary-strip span,
.tm-summary-strip strong {
    display: block;
}

.tm-summary-strip span {
    color: #64748b;
    font-size: 0.76rem;
}

.tm-summary-strip strong {
    color: #1f2937;
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.tm-summary-strip .tm-engine-name {
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tm-method-note,
.tm-engine-warning,
.tm-category-method {
    border-left: 4px solid #0284c7;
    background: #f0f9ff;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
}

.tm-engine-warning {
    background: #fff7ed;
    border-left-color: #ea580c;
}

.tm-category-method {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #7c3aed;
    border-radius: 0 8px 8px 0;
}

.tm-result-panel {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    margin-bottom: 1rem;
    min-width: 0;
    padding: 1rem;
}

.tm-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.tm-panel-heading h6 {
    color: #334155;
    font-size: 0.98rem;
    margin: 0;
}

.tm-panel-heading p {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0.25rem 0 0;
}

.tm-table-scroll {
    max-height: 340px;
    overflow: auto;
}

.tm-term-table,
.tm-feature-table {
    font-size: 0.86rem;
    width: 100%;
}

.tm-term-table thead,
.tm-feature-table thead {
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tm-term-link {
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-align: left;
}

.tm-term-link:hover {
    text-decoration: underline;
}

.tm-pos-label {
    align-items: center;
    color: #475569;
    display: inline-flex;
    gap: 0.35rem;
    white-space: nowrap;
}

.tm-pos-label i,
.tm-pos-column-title i,
.tm-legend-items i,
.tm-community-list i {
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 0.72rem;
    width: 0.72rem;
}

.tm-significant-row {
    background: var(--accent-weak);
}

.tm-table-footnote {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.5;
    margin-top: 0.55rem;
}

.tm-group-comparison-panel {
    border-color: var(--accent-line);
}

.tm-comparison-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.tm-segmented-control {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    display: inline-flex;
    overflow: hidden;
    padding: 2px;
}

.tm-segmented-control button {
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #475569;
    font-size: 0.8rem;
    min-height: 34px;
    padding: 0.4rem 0.75rem;
}

.tm-segmented-control button:hover {
    background: #e2e8f0;
    box-shadow: none;
    transform: none;
}

.tm-segmented-control button.active {
    background: white;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
    color: var(--accent);
}

.tm-segmented-control button:disabled {
    background: transparent;
    color: #94a3b8;
    opacity: 0.65;
}

.tm-comparison-legend {
    align-items: center;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.76rem;
    gap: 0.35rem 0.8rem;
}

.tm-comparison-legend[hidden] {
    display: none;
}

.tm-comparison-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.tm-comparison-legend i {
    border: 1px solid rgba(15, 23, 42, 0.12);
    display: inline-block;
    height: 0.7rem;
    width: 0.7rem;
}

.tm-z-positive-swatch {
    background: var(--accent-line);
}

.tm-z-negative-swatch {
    background: #fecaca;
}

.tm-comparison-scroll {
    max-height: 520px;
}

.tm-comparison-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    min-width: 100%;
    table-layout: auto;
    width: max-content;
}

.tm-comparison-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.tm-comparison-table th,
.tm-comparison-table td {
    height: 52px;
    min-width: 140px;
    padding: 0.45rem 0.6rem;
    text-align: center;
}

.tm-comparison-table .tm-comparison-term-column {
    background: white;
    box-shadow: 1px 0 0 #e2e8f0;
    left: 0;
    min-width: 210px;
    position: sticky;
    text-align: left;
    width: 210px;
    z-index: 2;
}

.tm-comparison-table thead .tm-comparison-term-column {
    background: #f8fafc;
    z-index: 4;
}

.tm-comparison-term-column .tm-pos-label {
    display: flex;
    font-size: 0.7rem;
    font-weight: 400;
    margin-top: 0.2rem;
}

.tm-comparison-group-header {
    background: #f8fafc;
    color: #334155;
    overflow-wrap: anywhere;
}

.tm-comparison-group-header small {
    color: #64748b;
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 0.15rem;
}

.tm-group-comparison-cell {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.tm-group-comparison-cell::before {
    bottom: 4px;
    content: "";
    left: 4px;
    position: absolute;
    top: 4px;
    z-index: -1;
}

.tm-group-comparison-cell.tm-rate-cell::before {
    background: #d6eaff;
    width: var(--tm-rate-width);
}

.tm-group-comparison-cell.tm-z-positive::before,
.tm-group-comparison-cell.tm-z-negative::before,
.tm-group-comparison-cell.tm-z-neutral::before {
    opacity: var(--tm-z-opacity, 0.12);
    right: 4px;
}

.tm-group-comparison-cell.tm-z-positive::before {
    background: var(--brand);
}

.tm-group-comparison-cell.tm-z-negative::before {
    background: #ef4444;
}

.tm-group-comparison-cell.tm-z-neutral::before {
    background: #cbd5e1;
}

.tm-group-comparison-cell .tm-group-value,
.tm-group-comparison-cell .tm-group-detail {
    display: block;
}

.tm-group-comparison-cell .tm-group-value {
    color: #1f2937;
    font-size: 0.84rem;
}

.tm-group-comparison-cell .tm-group-detail {
    color: #64748b;
    font-size: 0.68rem;
    margin-top: 0.1rem;
}

.tm-pos-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.tm-pos-column {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.tm-pos-column-title {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    display: flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
}

.tm-pos-column ol {
    counter-reset: pos-rank;
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.65rem 0.55rem;
}

.tm-pos-column li {
    align-items: center;
    counter-increment: pos-rank;
    display: grid;
    font-size: 0.82rem;
    gap: 0.4rem;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    min-height: 1.8rem;
}

.tm-pos-column li::before {
    color: #94a3b8;
    content: counter(pos-rank);
}

.tm-pos-column li > span {
    color: #64748b;
    text-align: right;
}

.tm-visual-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tm-visual-panel {
    overflow: hidden;
}

.tm-visual-heading {
    align-items: center;
}

.download-btn {
    align-items: center;
    background: var(--accent);
    border: 0;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
}

.download-btn:hover {
    background: var(--accent);
}

.tm-wordcloud-canvas {
    cursor: pointer;
    display: block;
    height: 390px;
    max-width: 100%;
    width: 100%;
}

.tm-network-canvas {
    border: 1px solid #e2e8f0;
    height: 500px;
    min-width: 0;
    width: 100%;
}

.tm-visual-legend {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    font-size: 0.8rem;
    line-height: 1.55;
    margin-top: 0.7rem;
    padding: 0.65rem 0.75rem;
}

.tm-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.45rem;
}

.tm-legend-items span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.visualization-item-editor {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #1f2937;
    margin: 0.65rem 0;
    overflow: hidden;
}

.visualization-item-editor > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.85rem;
    font-weight: 700;
    gap: 0.5rem;
    list-style: none;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    user-select: none;
}

.visualization-item-editor > summary::-webkit-details-marker {
    display: none;
}

.visualization-item-editor > summary::after {
    color: #64748b;
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-size: 0.7rem;
    font-weight: 900;
    margin-left: auto;
}

.visualization-item-editor[open] > summary::after {
    content: "\f077";
}

.visualization-item-editor > summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: -3px;
}

.visualization-item-editor-body {
    border-top: 1px solid #cbd5e1;
    padding: 0.75rem;
}

.visualization-item-editor-fields {
    display: grid;
    gap: 0.65rem;
}

.visualization-item-editor-field {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(10.5rem, 0.55fr) minmax(12rem, 1fr);
}

.visualization-item-editor-field-compact {
    grid-template-columns: minmax(10.5rem, 1fr);
}

.visualization-item-editor-label {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.visualization-bulk-editor {
    flex: 1 0 100%;
    margin: 0.15rem 0 0;
    width: 100%;
}

.visualization-bulk-editor > summary {
    background: #eef6ff;
    color: #0c4a6e;
}

.visualization-bulk-note {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.55;
    margin: 0;
}

.visualization-bulk-axis-range-row {
    grid-template-columns: 3rem minmax(9rem, 0.8fr) minmax(8rem, 1fr) minmax(8rem, 1fr);
}

.visualization-bulk-size-toggle {
    border-top: 1px solid #dbe4ee;
    color: #334155;
    padding-top: 0.75rem;
}

.visualization-bulk-actions {
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
}

.visualization-bulk-status {
    color: #475569;
    flex: 1 1 auto;
    font-size: 0.78rem;
    line-height: 1.45;
}

.visualization-bulk-status[data-status="success"] {
    color: #047857;
}

.visualization-bulk-status[data-status="warning"],
.visualization-bulk-status[data-status="error"] {
    color: #b42318;
    font-weight: 600;
}

.visualization-bulk-apply {
    align-items: center;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
}

.visualization-bulk-apply:hover {
    background: var(--accent);
}

.visualization-item-editor-size {
    border: 0;
    border-top: 1px solid #dbe4ee;
    margin: 0.1rem 0 0;
    min-width: 0;
    padding: 0.75rem 0 0;
}

.visualization-item-editor-axis-range {
    border: 0;
    border-top: 1px solid #dbe4ee;
    margin: 0.1rem 0 0;
    min-width: 0;
    padding: 0.75rem 0 0;
}

.visualization-item-editor-axis-range > legend {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 0.35rem 0 0;
}

.visualization-axis-range-controls {
    display: grid;
    gap: 0.55rem;
}

.visualization-axis-range-row {
    align-items: end;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 3rem minmax(4.5rem, auto) minmax(8rem, 1fr) minmax(8rem, 1fr);
    min-width: 0;
}

.visualization-axis-range-name {
    align-self: center;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
}

.visualization-axis-range-auto {
    align-self: center;
    min-height: 2.25rem;
}

.visualization-axis-range-part {
    color: #475569;
    display: grid;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.2rem;
    min-width: 0;
}

.visualization-axis-range-error {
    color: #b42318;
    font-size: 0.75rem;
    font-weight: 600;
    grid-column: 3 / -1;
    line-height: 1.45;
}

.visualization-axis-range-error[hidden] {
    display: none;
}

.visualization-item-editor-size > legend {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 0.35rem 0 0;
}

.visualization-size-controls {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) minmax(8rem, 0.7fr);
}

.visualization-size-control {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.visualization-size-control > label {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
}

.visualization-ratio-inputs {
    align-items: end;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.visualization-ratio-inputs[hidden] {
    display: none;
}

.visualization-ratio-part {
    color: #475569;
    display: grid;
    font-size: 0.72rem;
    font-weight: 700;
    gap: 0.2rem;
    min-width: 0;
}

.visualization-ratio-separator {
    color: #64748b;
    font-weight: 700;
    padding-bottom: 0.55rem;
}

.visualization-size-range {
    align-items: center;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(6rem, 1fr) 3.2rem;
    min-height: 2.25rem;
}

.visualization-size-range input[type="range"] {
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    min-width: 0;
    width: 100%;
}

.visualization-size-range output {
    color: #1e3a5f;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.visualization-item-editor-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.45rem;
    line-height: 1.35;
}

.visualization-item-editor-toggle input {
    accent-color: var(--accent);
    flex: 0 0 auto;
    height: 1rem;
    margin: 0;
    width: 1rem;
}

.visualization-item-editor-input {
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    color: #111827;
    font: inherit;
    font-size: 0.84rem;
    min-height: 2.25rem;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    width: 100%;
}

.visualization-item-editor-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    outline: 0;
}

.visualization-item-editor-input:disabled {
    background: #eef2f7;
    color: #64748b;
    cursor: not-allowed;
}

.visualization-item-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.visualization-item-editor-reset {
    align-items: center;
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.4rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.6rem;
}

.visualization-item-editor-reset:hover {
    background: #f1f5f9;
    border-color: #64748b;
}

.editable-table-caption {
    caption-side: top;
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.4rem 0.25rem 0.65rem;
    text-align: left;
}

@media (max-width: 640px) {
    .visualization-item-editor-field {
        align-items: stretch;
        gap: 0.4rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .visualization-size-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .visualization-axis-range-row {
        align-items: center;
        grid-template-columns: minmax(3rem, auto) minmax(5rem, 1fr);
    }

    .visualization-bulk-axis-range-row {
        grid-template-columns: minmax(3rem, auto) minmax(8rem, 1fr);
    }

    .visualization-axis-range-part {
        grid-column: 1 / -1;
    }

    .visualization-axis-range-error {
        grid-column: 1 / -1;
    }

    .visualization-bulk-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .visualization-bulk-apply {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .js-plotly-plot .modebar-btn:not([data-title="Download plot as a png"]):not([data-title="Reset axes"]) {
        display: none !important;
    }
}

.tm-community-list {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 0.55rem;
}

.tm-community-list > div {
    align-items: flex-start;
    display: flex;
    gap: 0.4rem;
    min-width: 0;
}

.tm-community-list i {
    margin-top: 0.25rem;
}

.tm-category-stack {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.tm-category-section {
    border-top: 3px solid #cbd5e1;
    padding-top: 1.5rem;
}

.tm-category-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.tm-muted {
    color: #64748b;
    font-size: 0.8rem;
}

/* Tabs */
.tab-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--ink);
    background: transparent;
}

.tab-btn.active {
    color: var(--ink);
    border-bottom-color: var(--brand);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* KWIC (Key Word In Context) Panel */
.kwic-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    transition: right 0.3s ease;
    padding: 1.5rem;
    overflow-y: auto;
}

.kwic-panel.open {
    right: 0;
}

.kwic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.kwic-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-primary);
}

.kwic-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

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

.kwic-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--background);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.kwic-summary {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.kwic-summary span,
.kwic-source {
    color: #64748b;
    font-size: 0.78rem;
}

.kwic-source {
    display: block;
    margin-bottom: 0.35rem;
}

.kwic-keyword {
    color: var(--primary-color);
    font-weight: bold;
    background: rgba(30, 144, 255, 0.1);
    padding: 0 2px;
    border-radius: 2px;
}

.kwic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(2px);
}

.kwic-overlay.open {
    display: block;
}



/* =========================================
   Mobile Optimization (Responsive)
   ========================================= */
@media (max-width: 768px) {

    /* Touch Target Size: Min 48px for accessibility */
    button,
    select,
    input[type="text"],
    input[type="number"],
    input[type="file"],
    .tab-btn {
        min-height: 48px;
        font-size: 16px;
        /* Prevent iOS zoom */
        margin-bottom: 0.5rem;
        /* Ensure spacing */
    }

    /* Adjust padding for touch */
    input,
    select {
        padding: 0.75rem 1rem;
    }

    button {
        padding: 0.75rem 1.5rem;
    }

    /* Container Spacing */
    #main-app {
        padding: 0 1rem 1rem;
    }

    /* Stacking Grids */
    .grid-2-cols,
    .upload-section .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .tm-settings-grid,
    .tm-summary-strip,
    .tm-visual-grid {
        grid-template-columns: 1fr;
    }

    .tm-wide-setting {
        grid-column: span 1;
    }

    .tm-summary-strip > div {
        border-bottom: 1px solid #e2e8f0;
        border-right: 0;
    }

    .tm-summary-strip > div:last-child {
        border-bottom: 0;
    }

    .tm-panel-heading,
    .tm-visual-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-wordcloud-canvas {
        height: 330px;
    }

    .download-btn {
        align-self: flex-end;
    }

    .tm-comparison-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-segmented-control {
        width: 100%;
    }

    .tm-segmented-control button {
        flex: 1;
    }

    .tm-comparison-table th,
    .tm-comparison-table td {
        min-width: 112px;
    }

    .tm-comparison-table .tm-comparison-term-column {
        min-width: 130px;
        width: 130px;
    }

    .tm-network-canvas {
        height: 410px;
    }

    /* KWIC Panel - Full screen on mobile */
    .kwic-panel {
        width: 100%;
        right: -100%;
    }

    .kwic-panel.open {
        right: 0;
    }
}

/* =========================================
   Demo Data Modal
   ========================================= */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(23, 32, 44, 0.55);
    animation: fadeIn 0.2s ease;
}

.modal-content.demo-modal-content {
    background-color: var(--paper);
    margin: 4vh auto;
    padding: var(--space-6);
    border: 1px solid var(--rule-strong);
    width: 95%;
    max-width: 800px;
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--space-3);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
}

@media (max-width: 640px) {
    .modal-content.demo-modal-content {
        margin: 0.75rem auto;
        max-height: calc(100dvh - 1.5rem);
        padding: 1.5rem;
    }

}

.modal-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.close-modal {
    color: #64748b;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--ink);
    text-decoration: none;
}

.demo-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-2) var(--space-4);
}

.demo-option-btn {
    display: flex;
    align-items: center;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-btn);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    width: 100%;
    color: var(--ink);
    font-weight: 400;
}

.demo-option-btn:hover {
    border-color: var(--brand);
    background: var(--paper);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* 手法一覧と同じアイコンタイル。推奨データだけ青い面で目立たせる */
.demo-option-btn {
    gap: var(--space-3);
}

.demo-option-btn .icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: #e8f3ff;
    color: var(--brand-deep);
    font-size: 1rem;
}

.demo-option-btn.primary .icon {
    background: var(--brand);
    color: #fff;
}

.demo-option-btn .info {
    display: flex;
    flex-direction: column;
}

.demo-option-btn .info strong {
    font-size: var(--text-base);
    margin-bottom: 0.1rem;
    color: var(--ink);
}

.demo-option-btn .info span {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* おすすめのデータ（左の罫線で示す） */
.demo-option-btn.primary {
    border-color: var(--brand);
    box-shadow: inset 4px 0 0 var(--brand);
}

.demo-option-btn.primary:hover {
    box-shadow: inset 4px 0 0 var(--brand), var(--shadow-card-hover);
}

.demo-option-btn.primary:hover {
    background: var(--accent-weak);
}

/* =========================================
   Data Merge Layout
   ========================================= */
.merge-container {
    min-width: 0;
}

.merge-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.merge-file-card,
.merge-control-field {
    min-width: 0;
}

.merge-container .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.merge-container .table-container table {
    width: max-content;
    min-width: 100%;
    max-width: none;
}

.merge-controls-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: end;
}

.merge-suffix-fields,
.merge-download-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.merge-action {
    min-width: 0;
}

.merge-action .btn-analysis,
#merge-download-btn {
    margin-top: 0;
}

.merge-download-controls {
    gap: 1rem;
}

.merge-download-controls label {
    flex-shrink: 0;
}

.merge-download-controls select {
    min-width: 0;
}

#merge-download-btn {
    width: auto;
    min-width: 12rem;
    white-space: normal;
}

@media (max-width: 1024px) {
    .merge-controls-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .data-input-panel {
        flex-direction: column;
        gap: 1.5rem;
    }

    .paste-input-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .paste-input-footer .btn-upload {
        width: 100%;
    }

    .tabular-grid-toolbar {
        overflow-x: auto;
    }

    .tabular-grid-action {
        flex: 0 0 auto;
    }

    .tabular-grid-shell {
        max-height: 19rem;
    }

    .tabular-grid-column-header,
    .tabular-grid-cell {
        min-width: 136px;
        width: 136px;
    }

    .tabular-grid-corner,
    .tabular-grid-row-header {
        min-width: 58px;
        width: 58px;
    }

    .tm-input-toolbar,
    .tm-input-panel > label {
        align-items: stretch;
        flex-direction: column;
    }

    .tm-input-toolbar .tm-segmented-control {
        width: 100%;
    }

    .merge-upload-grid,
    .merge-controls-grid {
        grid-template-columns: 1fr;
    }

    .merge-download-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .merge-action .btn-analysis,
    #merge-download-btn {
        width: 100%;
    }
}

/* ==========================================
   分析画面のデザイン層
   各分析モジュールの render() には共通のインラインスタイル（青い見出し帯・影付きの白カード等）が
   書かれている。モジュール側を一つずつ書き換えずに、ここで教科書・論文の体裁にそろえる。
   （インラインスタイルを上書きするため、この節に限り !important を使う）
   ========================================== */

/* ---- ページ見出し：青い帯 → 見出し＋1行説明＋罫線 ---- */
#analysis-content div[style*="background: #1e90ff"] {
    background: transparent !important;
    color: var(--ink) !important;
    padding: 0 0 var(--space-3) !important;
    margin-bottom: var(--space-5) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--rule);
}

#analysis-content div[style*="background: #1e90ff"] > h3 {
    font-size: var(--text-lg) !important;
    line-height: 1.4;
    color: var(--ink);
}

#analysis-content div[style*="background: #1e90ff"] > h3 > i,
#analysis-content div[style*="background: #1e90ff"] > span[style*="border-radius: 50%"] {
    display: none;
}

#analysis-content div[style*="background: #1e90ff"] > p {
    opacity: 1 !important;
    color: var(--ink-2);
    font-size: var(--text-base);
}

/* 分析画面の先頭にある見出しは「ページ見出し」として大きく、下を太罫に */
/* ページ見出し：淡い青（#eaf4ff）の見出し面に、濃い青（#0f5fa8・5.86:1）の大きな分析名 */
#analysis-content > * > div[style*="background: #1e90ff"]:first-child {
    background: var(--accent-weak) !important;
    border: 0;
    border-radius: var(--radius-lg) !important;
    padding: 1.75rem 2rem !important;
    margin-bottom: var(--space-5) !important;
}

#analysis-content > * > div[style*="background: #1e90ff"]:first-child > h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--brand-deep) !important;
}

#analysis-content > * > div[style*="background: #1e90ff"]:first-child > h3 {
    margin: 0 !important;
}

#analysis-content > * > div[style*="background: #1e90ff"]:first-child > p {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    color: var(--ink-2) !important;
}

@media (max-width: 768px) {
    #analysis-content > * > div[style*="background: #1e90ff"]:first-child {
        padding: 1.25rem 1.25rem !important;
    }

    #analysis-content > * > div[style*="background: #1e90ff"]:first-child > h3 {
        font-size: 1.5rem !important;
    }
}

/* ---- 白いカード（影付き） → 罫線で囲んだ節 ---- */
#analysis-content [style*="box-shadow: 0 2px 4px"],
#analysis-content [style*="box-shadow: 0 4px 6px"],
#analysis-content [style*="box-shadow: 0 1px 3px"] {
    box-shadow: none !important;
}

#analysis-content div[style*="background: white"][style*="padding: 1.5rem"],
#analysis-content div[style*="background: #ffffff"][style*="padding: 1.5rem"] {
    border: 1px solid var(--rule);
    border-radius: var(--radius) !important;
}

/* 結果を示す節は、上に罫線を引いた紙面の続きとして見せる */
#analysis-content #analysis-results > div[style*="background: white"],
#analysis-content #results-section > div[style*="background: white"],
#analysis-content #fa-analysis-results > div[style*="background: white"] {
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0 !important;
    padding: var(--space-5) 0 var(--space-2) !important;
    margin-bottom: var(--space-4) !important;
}

/* ---- 節見出し（青文字） → 本文色の見出し。アイコンは控えめに ---- */
#analysis-content h4[style*="color: #1e90ff"],
#analysis-content h3[style*="color: #1e90ff"],
#analysis-content h5[style*="color: #1e90ff"] {
    color: var(--ink) !important;
    font-weight: 700 !important;
}

#analysis-content h4[style*="font-size: 1.3rem"] {
    font-size: var(--text-lg) !important;
    line-height: 1.4;
}

#analysis-content h4[style*="color: #1e90ff"],
#analysis-content h3[style*="color: #1e90ff"] {
    letter-spacing: 0.02em;
}

/* 節見出しのアイコンは基調色（文字ではない飾りのため 3:1 で可） */
#analysis-content h4[style*="color: #1e90ff"] > i,
#analysis-content h3[style*="color: #1e90ff"] > i {
    color: var(--brand);
    font-size: 0.85em;
    margin-right: 0.2em;
}

#analysis-content [style*="color: #1e90ff"]:not(h3):not(h4):not(h5) {
    color: var(--accent) !important;
}

#analysis-content strong[style*="color: #1e90ff"],
#analysis-content label[style*="color: #1e90ff"] {
    color: var(--ink) !important;
}

/* 色の付いた見出し（紫・橙など）も本文色に */
#analysis-content h3[style*="color: #dd6b20"],
#analysis-content h4[style*="color: #dd6b20"],
#analysis-content h4[style*="color: #805ad5"],
#analysis-content h4[style*="color: #553c9a"] {
    color: var(--ink) !important;
}

/* ---- 説明・補足の囲み ---- */
#analysis-content [style*="background: #f1f8ff"] {
    background: var(--tint) !important;
    border-left: 3px solid var(--ink) !important;
}

#analysis-content [style*="background: #fafbfc"],
#analysis-content [style*="background: #f8f9fa"] {
    background: var(--tint) !important;
    border-radius: var(--radius) !important;
}

#analysis-content [style*="background: #faf5ff"],
#analysis-content [style*="background: #f0f9ff"],
#analysis-content [style*="background: #f0f7ff"],
#analysis-content [style*="background: #eff6ff"],
#analysis-content [style*="background-color: #eff6ff"],
#analysis-content [style*="background: #e6f0ff"] {
    background: var(--tint) !important;
}

#analysis-content [style*="border-left: 5px solid"],
#analysis-content [style*="border-left: 4px solid"] {
    border-left-width: 3px !important;
}

#analysis-content [style*="border-left: 5px solid #805ad5"],
#analysis-content [style*="border-left: 4px solid #1e90ff"],
#analysis-content [style*="border-left: 5px solid #1e90ff"] {
    border-left-color: var(--ink) !important;
}

#analysis-content [style*="border-top: 4px solid #dd6b20"] {
    border-top: 1px solid var(--rule) !important;
}

#analysis-content [style*="border-radius: 12px"] {
    border-radius: var(--radius) !important;
}

/* データ加工・結合・因子得点のグラデーション見出し */
#analysis-content .collapsible-header[style*="linear-gradient"] {
    background: var(--paper) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    padding: var(--space-3) var(--space-4) !important;
}

#analysis-content .collapsible-header[style*="linear-gradient"] h3 {
    color: var(--ink) !important;
    font-size: var(--text-md) !important;
}

#analysis-content .collapsible-header[style*="linear-gradient"] span[style*="border-radius: 50%"] {
    display: none !important;
}

#analysis-content .collapsible-header[style*="linear-gradient"] .toggle-icon {
    color: var(--muted) !important;
}

/* ---- 入力欄・ボタン ---- */
#analysis-content select,
#analysis-content input[type="text"],
#analysis-content input[type="number"],
#analysis-content textarea {
    border: 1px solid var(--rule-strong) !important;
    border-radius: var(--radius) !important;
    background-color: var(--paper);
    color: var(--ink);
}

#analysis-content select:disabled {
    background-color: var(--tint);
    color: var(--muted);
}

/* createAnalysisButton() の既定色 #1e90ff と、紫の実行ボタンをドジャーブルーにそろえる */
.btn-analysis[style*="rgb(30, 144, 255)"],
.btn-analysis[style*="#1e90ff"],
.btn-analysis[style*="#805ad5"],
.btn-analysis[style*="#7c3aed"],
.btn-analysis[style*="#2563eb"] {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
}

.btn-analysis[style]:hover:not(:disabled) {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
}

/* 「表をコピー」などの小さな操作は枠線ボタン */
.apa-table-wrapper > button,
#analysis-content .btn-sm,
#analysis-content .btn-outline-secondary {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    padding: 0.35rem 0.75rem;
    font-weight: 600;
}

.apa-table-wrapper > button:hover,
#analysis-content .btn-sm:hover,
#analysis-content .btn-outline-secondary:hover {
    background: var(--tint);
}

/* EDA などのタブ → 下線タブ（初学者モードと同じ形） */
#analysis-content .tab-navigation {
    gap: var(--space-5) !important;
    border-bottom: 1px solid var(--rule) !important;
    margin-bottom: var(--space-5) !important;
    flex-wrap: wrap;
}

#analysis-content .tab-button,
#analysis-content .tab-button.active,
#analysis-content .tab-button:not(.active):hover {
    flex: 0 0 auto !important;
    background: transparent !important;
    color: var(--muted) !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -1px;
    padding: var(--space-2) 0.1rem !important;
    font-size: var(--text-base) !important;
}

#analysis-content .tab-button.active {
    color: var(--ink) !important;
    border-bottom-color: var(--brand) !important;
}

#analysis-content .tab-button:not(.active):hover {
    color: var(--ink) !important;
}

#analysis-content .tab-button i {
    display: none;
}

/* ---- 結果表：論文の表（横罫線のみ） ---- */
#analysis-content table.table {
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

#analysis-content table.table th,
#analysis-content table.table td {
    border-left: 0;
    border-right: 0;
}

#analysis-content table.table thead tr:last-child th {
    border-bottom: 1px solid var(--ink);
}

#analysis-content table.table tbody tr:last-child td,
#analysis-content table.table tbody tr:last-child th {
    border-bottom: 0;
}

#analysis-content table thead tr[style*="background"],
#analysis-content table thead th[style*="background"],
#analysis-content table tr[style*="background: #f8f9fa"],
#analysis-content table tr[style*="background: #f1f5f9"] {
    background: var(--paper) !important;
}

.editable-table-caption {
    color: var(--ink);
    font-size: var(--text-base);
}

.apa-table-wrapper {
    border-color: var(--rule) !important;
    border-radius: var(--radius-sm) !important;
}

/* 概要図・説明画像は図版として細い枠で */
#analysis-content img[src^="image/"] {
    border-radius: var(--radius-sm) !important;
    border-color: var(--rule) !important;
}

/* 可視化オプションの帯 */
.visualization-controls,
#analysis-content [style*="background: #f0f9ff"][style*="border: 1px solid #bae6fd"] {
    background: var(--tint) !important;
    border-color: var(--rule) !important;
    border-radius: var(--radius) !important;
}

/* 概要イラストは分析名の見出しの下に、本文の幅いっぱいで置く（図の中の文字を読めるように） */
#analysis-content .analysis-visual-hero {
    margin: 0 0 var(--space-5);
}

#analysis-content .analysis-visual-hero a {
    display: block;
}

#analysis-content .analysis-visual-hero a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* データ加工の紫の見出し・タブ */
#analysis-content h4[style*="color: #6b46c1"] {
    color: var(--ink) !important;
}

#analysis-content [style*="color: #553c9a"] {
    color: var(--ink-2) !important;
}

#analysis-content .tab-btn {
    color: var(--muted) !important;
    border-bottom-color: transparent !important;
}

#analysis-content .tab-btn.active:not([style*="border-bottom"]),
#analysis-content .tab-btn[style*="#6b46c1"],
#analysis-content .tab-btn[style*="rgb(107, 70, 193)"] {
    color: var(--ink) !important;
    border-bottom-color: var(--brand) !important;
}

/* 見出しを兼ねる折りたたみ（データ加工など）はページ見出しの大きさに */
#analysis-content > * > .collapsible-section:first-child .collapsible-header[style*="linear-gradient"] h3,
#analysis-content > * > .collapsible-section:first-child > .collapsible-header[style*="linear-gradient"] h3 {
    font-size: var(--text-lg) !important;
}

/* 表の中の変数名（青文字）は本文色の太字に */
#analysis-content table [style*="color: #1e90ff"] {
    color: var(--ink) !important;
}

/* 実行ボタンはどの画面でも同じ藍（色で手法を区別しない） */
#analysis-content .btn-analysis {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: #fff !important;
}

#analysis-content .btn-analysis:hover:not(:disabled) {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
    filter: none;
}

#analysis-content .btn-analysis:disabled {
    background: #e5e7eb !important;
    color: #6b7280 !important;
}

/* サンプルサイズなどの数値カード */
.sample-size-block {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.sample-size-block h4 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.sample-size-block h4 > i {
    color: var(--brand);
    font-size: 0.85em;
}

.sample-size-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
}

.sample-size-list > div {
    flex: 1 1 8rem;
    padding: var(--space-2) var(--space-4);
    border-left: 1px solid var(--rule);
}

.sample-size-list > div:first-child {
    border-left: 0;
    padding-left: 0;
}

.sample-size-list dt {
    font-size: var(--text-sm);
    color: var(--muted);
}

.sample-size-list dd {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ==========================================
   共通：フォーカス・動き・狭い画面
   ========================================== */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.collapsible-header:focus-visible,
.ai-config-header:focus-visible {
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* 動きを減らす設定では、hover で浮く・押して沈む・矢印が進む動きをなくす */
    .guided-choice:hover,
    .demo-option-btn:hover,
    .btn-upload:active,
    .btn-analysis:active,
    .guided-run-btn:active,
    .feature-card:hover::after,
    .guided-run-btn:hover::after {
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .file-info-list {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .file-info-list > div:first-child {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--rule);
        padding-right: 0;
    }

    .file-info-list > div:nth-child(2) {
        padding-left: 0;
        border-left: 0;
    }

    .upload-section-main {
        padding: var(--space-4);
    }

    .upload-area {
        padding: var(--space-4);
    }

    .data-input-panel {
        align-items: stretch;
    }

    .upload-info {
        text-align: left;
        align-items: flex-start;
    }

    .btn-analysis {
        width: 100%;
    }

    .language-switcher button {
        min-height: 40px;
        margin: 0;
        padding: 0.2rem 0.7rem;
        font-size: var(--text-sm);
    }

    .app-bar-link {
        min-height: 44px;
    }

    #analysis-content div[style*="padding: 1.5rem"] {
        padding: var(--space-4) !important;
    }

    #analysis-content div[style*="padding: 1rem"] {
        padding: var(--space-3) !important;
    }

    .analysis-area {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    #main-app {
        padding: 0 var(--space-3) var(--space-4);
    }

    #analysis-content > * > div[style*="background: #1e90ff"]:first-child > h3 {
        font-size: var(--text-lg) !important;
    }
}

/* =========================================
   Print / PDF output
   ========================================= */
@page {
    margin: 12mm;
}

@media print {
    html,
    body {
        background: #fff !important;
        color: #000 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* 紙面の影は印刷しない */
    .analysis-area,
    .guided-decision {
        box-shadow: none !important;
    }

    .hero-section,
    #ai-config-section,
    #upload-section-main,
    #data-preview-section,
    #navigation-section,
    #analysis-header,
    #ai-assist-widget,
    #main-app > .info-sections,
    .footer,
    .modal,
    .analysis-setup-panel,
    .beginner-explanation,
    .result-beginner-explanation,
    .visualization-item-editor,
    .visualization-controls,
    .modebar-container,
    .download-btn,
    .copy-table-btn,
    .btn-copy,
    .btn-analysis,
    .btn-back {
        display: none !important;
    }

    #analysis-content button,
    #analysis-content input,
    #analysis-content select,
    #analysis-content textarea,
    .apa-table-wrapper > button {
        display: none !important;
    }

    .ttest-container > .info-sections,
    #ttest-data-overview {
        display: none !important;
    }

    #main-app,
    #analysis-area,
    #analysis-content {
        background: #fff !important;
        box-shadow: none !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .table-container,
    .apa-table-wrapper {
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
    }

    table {
        border-collapse: collapse;
        font-size: 8.5pt;
        width: 100% !important;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    tr,
    img,
    canvas,
    .js-plotly-plot,
    .plot-container,
    .tm-wordcloud-card,
    .tm-network-card {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

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

    .js-plotly-plot,
    .plot-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .js-plotly-plot .svg-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* ==========================================
   初学者モード（目的から選ぶ）
   ワークシートのように「設問 → 選択 → 実行」が上から順に読めるデザイン
   ========================================== */
.navigation-section.is-beginner-mode > .feature-grid,
.navigation-section.is-beginner-mode > .navigation-subtitle {
    display: none;
}

.navigation-section:not(.is-beginner-mode) > .guided-panel {
    display: none;
}

#data-preview-section {
    margin: var(--space-4) 0 0;
}

#data-preview-section .collapsible-section:last-child {
    margin-bottom: 0;
}

.ui-mode-switch {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.ui-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
}

.ui-mode-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    padding: 0.5rem 0.1rem 0.65rem;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ui-mode-tab span {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
}

.ui-mode-tab[aria-pressed="true"] {
    color: var(--accent-strong);
    border-bottom-color: var(--brand);
}

.ui-mode-tab:hover {
    background: none;
    color: var(--ink);
    border-bottom-color: var(--accent-line);
}

.ui-mode-tab[aria-pressed="true"]:hover {
    color: var(--accent-strong);
    border-bottom-color: var(--brand);
}

.ui-mode-tab:focus-visible,
.guided-run-btn:focus-visible,
.guided-btn:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.guided-lead {
    color: var(--ink-2);
    margin-bottom: 1.25rem;
    max-width: 52rem;
}

.guided-no-data {
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--accent-weak);
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--ink);
}

.guided-question {
    border: 0;
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 0 0.25rem;
    margin: 0 0 1rem;
    min-width: 0;
}

.guided-question legend {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    float: left;
    width: 100%;
    font-size: 1.5rem;     /* 24px：設問は節見出しの大きさ */
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.45;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}

.guided-question legend + * {
    clear: both;
}

/* 設問番号：ドジャーブルーの丸に白い 19px 太字（大きな文字のため 3.24:1 で可） */
.guided-q-num {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(30, 144, 255, 0.28);
}

.guided-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 0.5rem 1rem;
}

.guided-choices-two {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* 選択肢カード：hover で枠と面がわずかに青み、選択中は淡い青の面＋2px のドジャーブルー枠 */
.guided-choice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 95, 168, 0.05);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* 押せるカードだけ hover で 2px 浮く */
.guided-choice:hover {
    border-color: #7fbcf8;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* 選択中：淡い青の面＋2px の枠＋左 4px の帯（ラジオの印・濃い青の手法名とあわせ、色だけに頼らない） */
.guided-choice.is-selected {
    border-color: var(--brand);
    background: var(--accent-weak);
    box-shadow: inset 0 0 0 1px var(--brand), inset 4px 0 0 var(--brand);
}

.guided-choice.is-selected:hover {
    box-shadow: inset 0 0 0 1px var(--brand), inset 4px 0 0 var(--brand), var(--shadow-card-hover);
}

.guided-choice.is-selected .guided-choice-text strong {
    color: var(--accent-strong);
}

.guided-choice input {
    margin-top: 0.3rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.guided-choice:has(input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* 輪郭はカード側に出すので、ラジオボタン自身の輪郭は二重にしない */
.guided-choice input:focus-visible {
    outline: none;
}

.guided-choice-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.guided-choice-text strong {
    font-size: 1rem;
    letter-spacing: 0.01em;
    transition: color var(--dur) var(--ease);
}

.guided-choice-text span {
    font-size: 0.88rem;
    color: var(--ink-2);
}

.guided-choice-text small {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.guided-variable-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    align-items: start;
}

.guided-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guided-field label,
.guided-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.guided-field select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--paper);
    transition: border-color var(--dur) var(--ease);
}

.guided-field select:hover:not(:disabled) {
    border-color: var(--accent);
}

.guided-field select:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
}

.guided-field-help {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.guided-group-preview {
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-top: -0.5rem;
}

.guided-chip {
    display: inline-block;
    margin: 0.15rem 0.4rem 0 0;
}

.guided-chip small {
    color: var(--text-secondary);
}

.guided-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.guided-check-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    background: var(--paper);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.guided-check-item:hover {
    border-color: #7fbcf8;
    background: var(--accent-hover);
}

.guided-check-item.is-checked {
    border-color: var(--brand);
    background: var(--accent-weak);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.guided-check-item input {
    accent-color: var(--accent);
}

.guided-check-order {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-dark);
}

/* 手法の選び方（判断表） */
/* 判断表・確認表は狭い列でも折り返して収める（共通の表は nowrap のため上書き） */
.guided-guide-table th,
.guided-guide-table td,
.guided-check-table th,
.guided-check-table td,
.guided-sample-table th,
.guided-sample-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 手法の選び方：設問の横に置く「参考」欄。淡い青の面＋左に短い印の見出し */
.guided-guide {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid #d3e5f8;
    border-radius: var(--radius-lg);
    background: #f7fbff;
    padding: 1rem 1.1rem;
}

.guided-guide-title {
    position: relative;
    padding-left: 0.7rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
}

.guided-guide-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 3px;
    border-radius: 2px;
    background: var(--brand);
}

.guided-guide-check {
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-bottom: 0.6rem;
}

.guided-guide-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    background: var(--paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.guided-guide-table th,
.guided-guide-table td {
    border: 0;
    border-top: 1px solid var(--border-color);
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}

.guided-guide-table th + th,
.guided-guide-table th + td,
.guided-guide-table td + td {
    border-left: 1px solid var(--border-color);
}

.guided-guide-table thead th {
    border-top: 0;
    background: var(--accent-weak);
    color: var(--ink);
    font-weight: 700;
}

.guided-guide-table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.guided-actions {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* 分析する：画面でいちばん大事な操作（色・大きさは「主要ボタン」の共通定義）。右の矢印は hover でわずかに進む */
.guided-run-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 14rem;
    font-family: inherit;
    padding: 0.95rem 2.5rem;
    cursor: pointer;
}

.guided-run-btn::after {
    content: '\2192' / '';
    font-weight: 700;
    transition: transform var(--dur) var(--ease);
}

.guided-run-btn:hover:not(:disabled)::after {
    transform: translateX(3px);
}

.guided-run-btn:disabled {
    background: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
}

.guided-error:not(:empty) {
    margin-top: 0.75rem;
    color: var(--danger);
    border-left: 3px solid var(--danger);
    background: var(--danger-weak);
    padding: 0.5rem 0.8rem;
}

/* 分析画面の先頭：手法の選び方 */
.guided-decision {
    background: var(--surface);
    border: 1px solid #cfe3f8;
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.5rem 1.25rem;
    margin-bottom: 1.75rem;
}

.guided-decision-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent-strong);
    letter-spacing: 0.04em;
}

.guided-decision h3 {
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 1.45;
    margin: 0.2rem 0 0.8rem;
}

.guided-path {
    list-style: none;
    counter-reset: guided-path;
    margin: 0;
    padding: 0;
}

.guided-path li {
    counter-increment: guided-path;
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--rule);
    font-size: 0.93rem;
}

.guided-path-label {
    font-weight: 700;
    color: var(--ink-2);
}

.guided-path-label::before {
    content: counter(guided-path) ". ";
    color: var(--accent-strong);
}

.guided-decision-warning {
    border-left: 4px solid #d97706;
    background: #fffbeb;
    padding: 0.5rem 0.8rem;
    margin: 0.5rem 0;
}

.guided-notes {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.9rem 0.6rem 2rem;
    border-radius: var(--radius);
    background: var(--tint);
    font-size: 0.88rem;
    color: var(--ink-2);
}

.guided-notes li + li {
    margin-top: 0.3rem;
}

.guided-decision-details {
    margin-top: 0.75rem;
}

.guided-decision-details > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--primary-dark);
    padding: 0.3rem 0;
}

.guided-decision-body {
    padding: 0.5rem 0 0.25rem;
}

.guided-check + .guided-check {
    margin-top: 1rem;
}

.guided-check h4 {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.guided-check-lead,
.guided-check-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.guided-check-list {
    margin: 0.25rem 0 0.5rem 1.25rem;
    font-size: 0.9rem;
}

.guided-table-wrap {
    overflow-x: auto;
}

.guided-check-table {
    border-collapse: collapse;
    font-size: 0.88rem;
}

.guided-check-table th,
.guided-check-table td {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.35rem 0.9rem 0.35rem 0;
    text-align: left;
    white-space: nowrap;
}

.guided-check-table thead th {
    border-top: 2px solid #334155;
}

.guided-check-table tbody tr:last-child th,
.guided-check-table tbody tr:last-child td {
    border-bottom: 2px solid #334155;
}

.guided-verdict-pass { color: #166534; }
.guided-verdict-fail { color: #9a3412; font-weight: 600; }
.guided-verdict-info { color: var(--accent-strong); }

.guided-decision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* 判断パネルのボタン（小さな文字なので、塗りは 4.5:1 を満たす #1670c9） */
.guided-btn {
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--paper);
    border: 2px solid var(--brand);
    border-radius: 10px;
    padding: 0.5rem 1.15rem;
    cursor: pointer;
}

.guided-btn-primary {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.guided-btn-primary:hover {
    background: var(--accent-strong);
}

@media (max-width: 760px) {
    .guided-variable-layout {
        grid-template-columns: 1fr;
    }

    .guided-path li {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .guided-run-btn {
        width: 100%;
    }
}

@media print {
    .ui-mode-switch,
    .guided-panel,
    .guided-decision-actions {
        display: none !important;
    }
}

/* 対応あり・なしの見本表と説明 */
.guided-sample {
    display: block;
    margin-top: 0.5rem;
}

.guided-sample-caption {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 0.25rem;
}

.guided-sample-table {
    border-collapse: collapse;
    font-size: 0.78rem;
    background: var(--paper);
}

.guided-sample-table th,
.guided-sample-table td {
    border: 1px solid var(--rule);
    padding: 0.15rem 0.6rem;
    text-align: center;
    font-weight: 400;
}

.guided-sample-table th {
    background: var(--accent-weak);
    font-weight: 600;
}

.guided-choices-two .guided-choice {
    padding: 0.9rem 1rem;
}

.guided-explain,
.guided-terms {
    margin-top: 0.75rem;
}

.guided-explain > summary,
.guided-terms > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--accent-strong);
    padding: 0.25rem 0;
}

.guided-explain > summary:hover,
.guided-terms > summary:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.guided-explain-body {
    margin-top: 0.4rem;
    padding: 0.85rem 1.1rem;
    border-left: 4px solid var(--accent-line);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--tint);
    font-size: 0.9rem;
    color: var(--ink);
    max-width: 56rem;
}

.guided-explain-body p + p {
    margin-top: 0.5rem;
}

.guided-explain-tips-title {
    font-weight: 700;
    margin-top: 0.75rem !important;
}

.guided-explain-body ul {
    margin: 0.25rem 0 0 1.25rem;
}

.guided-terms dl {
    margin-top: 0.4rem;
    font-size: 0.84rem;
}

.guided-terms dt {
    font-weight: 700;
    margin-top: 0.5rem;
}

.guided-terms dd {
    margin: 0.1rem 0 0;
    color: var(--ink-2);
}

/* AI解釈補助：研究の目的・問い */
.ai-research-purpose {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.ai-research-purpose label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
}

.ai-research-purpose textarea {
    width: 100%;
    resize: vertical;
    min-height: 3.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
}

.ai-research-purpose textarea:focus-visible {
    outline: 3px solid var(--accent-line);
    outline-offset: 1px;
}

.ai-research-purpose p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* 初学者モード：迷わないためのヒント・注意（データに応じて表示） */
.guided-design-hint {
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--accent-weak);
    padding: 0.6rem 0.95rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    color: var(--ink);
}

.guided-inline-warning {
    border-left: 4px solid #d97706;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: #fffbeb;
    color: #78350f;
    padding: 0.5rem 0.8rem;
    margin-top: 0.5rem;
    font-size: 0.88rem;
}

.guided-group-preview ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0;
}

.guided-group-preview li.is-warning {
    color: #b45309;
    font-weight: 700;
}

.guided-group-preview li small {
    color: var(--text-secondary);
}

.guided-run-status {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #334155;
}

.guided-excluded-note {
    border-top: 1px dashed var(--border-color);
    padding-top: 0.5rem;
}

/* 初学者モード：複数の列で合う手法が分かれたときの案内 */
.guided-other-groups {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--brand);
    background: var(--accent-weak);
    border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}

.guided-other-groups ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.guided-other-groups li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.35rem 0;
}

/* 分析結果の表は、グラフと同じ研究論文向けのフォント（Times New Roman＋明朝体）にする。
   初学者モードの説明パネルや、図の設定などの操作部品の中の表は画面と同じフォントのまま */
#analysis-content table:not(.guided-check-table):not(.guided-guide-table) {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums;
}

/* テキストマイニング：おすすめの強制抽出語・複合語の結合 */
.tm-settings-grid .tm-suggest-setting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.tm-settings-grid .tm-suggest-btn {
    width: auto;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-btn);
    font-size: 0.9rem;
    cursor: pointer;
}

.tm-setting-note,
.tm-suggest-status {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted);
}

.tm-suggest-status:not(:empty) {
    color: var(--accent);
    font-weight: 700;
}

.tm-settings-grid .tm-check-setting {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.tm-settings-grid .tm-check-setting input {
    width: auto;
    flex: 0 0 auto;
}