/* ---- カラーテーマ（端末のダークモード設定に自動追従） ---- */
        :root {
            --bg: #fafaf8;
            --text: #31353b;
            --heading: #14171a;
            --muted: #7c828a;
            --muted2: #a2a7ad;
            --card-bg: #ffffff;
            --card-shadow: rgba(20, 23, 26, 0.07);
            --border: #e6e7e5;
            --divider: #eef0ee;

            --btn-bg: #009276;
            --btn-text: #ffffff;
            --btn-hover: #00715a;

            --btn-secondary-bg: #6c757d;
            --btn-secondary-hover: #565e64;

            --item-border: #e9ecef;
            --item-bg: #fafafa;
            --item-hover: #f1f3f4;

            --badge-bg: #d4f3ea;
            --badge-text: #009276;

            --tag-bg: #eef0ee;
            --tag-text: #4a4e52;

            --overlap-badge-bg: #fff3cd;
            --overlap-badge-text: #8a6d00;

            --unit-bg: #eef1f4;
            --unit-text: #99a1a8;

            --answer-bg: #eef9f2;
            --answer-border: #cdeedb;

            --danger-bg: #fdecea;
            --danger-border: #f5c2c0;
            --danger-text: #b3261e;
            --success-text: #1e7e34;

            --input-bg: #ffffff;
        }

        @media (prefers-color-scheme: dark) {
            /* data-theme が明示的に指定されている場合は、そちら(手動選択)を優先する */
            :root:not([data-theme]) {
                --bg: #0c0c0c;
                --text: #e4e4e4;
                --heading: #f2f2f2;
                --muted: #aaaaaa;
                --muted2: #7c7c7c;
                --card-bg: #1a1a1a;
                --card-shadow: rgba(0, 0, 0, 0.5);
                --border: #444444;
                --divider: #2e2e2e;

                --btn-bg: #4285f4;
                --btn-text: #0c0c0c;
                --btn-hover: #6aa1f7;

                --btn-secondary-bg: #3a3f44;
                --btn-secondary-hover: #4a4f55;

                --item-border: #333333;
                --item-bg: #202020;
                --item-hover: #292929;

                --badge-bg: #1e3a5f;
                --badge-text: #8ab4f8;

                --tag-bg: #262a29;
                --tag-text: #b9bec1;

                --overlap-badge-bg: #4a3c00;
                --overlap-badge-text: #ffd766;

                --unit-bg: #232323;
                --unit-text: #7c7c7c;

                --answer-bg: #14231a;
                --answer-border: #1f3d2b;

                --danger-bg: #3a1a17;
                --danger-border: #5c2b26;
                --danger-text: #ff8a80;
                --success-text: #4caf50;

                --input-bg: #161616;
            }
        }

        /* ---- 設定 > 外観 で手動選択した場合のテーマ(端末のダークモード設定より優先) ---- */
        :root[data-theme="dark"] {
            --bg: #0c0c0c;
            --text: #e4e4e4;
            --heading: #f2f2f2;
            --muted: #aaaaaa;
            --muted2: #7c7c7c;
            --card-bg: #1a1a1a;
            --card-shadow: rgba(0, 0, 0, 0.5);
            --border: #444444;
            --divider: #2e2e2e;

            --btn-bg: #0dcaa9;
            --btn-text: #001d15;
            --btn-hover: #60ddc0;

            --btn-secondary-bg: #3a3f44;
            --btn-secondary-hover: #4a4f55;

            --item-border: #333333;
            --item-bg: #202020;
            --item-hover: #292929;

            --badge-bg: #00372c;
            --badge-text: #0dcaa9;

            --tag-bg: #262a29;
            --tag-text: #b9bec1;

            --overlap-badge-bg: #4a3c00;
            --overlap-badge-text: #ffd766;

            --unit-bg: #232323;
            --unit-text: #7c7c7c;

            --answer-bg: #14231a;
            --answer-border: #1f3d2b;

            --danger-bg: #3a1a17;
            --danger-border: #5c2b26;
            --danger-text: #ff8a80;
            --success-text: #4caf50;

            --input-bg: #161616;
        }
        :root[data-theme="gray"] {
            --bg: #2c2e33;
            --text: #e6e6e6;
            --heading: #ffffff;
            --muted: #b3b3b3;
            --muted2: #8f8f8f;
            --card-bg: #3a3d42;
            --card-shadow: rgba(0, 0, 0, 0.35);
            --border: #5a5e65;
            --divider: #4a4e55;

            --btn-bg: #0dcaa9;
            --btn-text: #001d15;
            --btn-hover: #60ddc0;

            --btn-secondary-bg: #565a61;
            --btn-secondary-hover: #666b73;

            --item-border: #4a4e55;
            --item-bg: #35383d;
            --item-hover: #40444b;

            --badge-bg: #00372c;
            --badge-text: #0dcaa9;

            --tag-bg: #40444a;
            --tag-text: #c9cdd1;

            --overlap-badge-bg: #5a4a1f;
            --overlap-badge-text: #ffe08a;

            --unit-bg: #3a3d42;
            --unit-text: #9a9a9a;

            --answer-bg: #263b2c;
            --answer-border: #375240;

            --danger-bg: #4a2a26;
            --danger-border: #6b3a33;
            --danger-text: #ff9a8e;
            --success-text: #66c96b;

            --input-bg: #35383d;
        }

        /* ---- テーマカラー(アクセントカラー)プリセット 2026-09-08追加 ---- */
        :root[data-accent="blue"] {
            --btn-bg: #1f7dcf;
            --btn-hover: #005fad;
            --badge-bg: #daeeff;
            --badge-text: #1f7dcf;
        }
        :root[data-theme="dark"][data-accent="blue"] {
            --btn-bg: #63b3ff;
            --btn-text: #03172c;
            --btn-hover: #88caff;
            --badge-bg: #142f4b;
            --badge-text: #63b3ff;
        }
        :root[data-theme="gray"][data-accent="blue"] {
            --btn-bg: #63b3ff;
            --btn-text: #03172c;
            --btn-hover: #88caff;
            --badge-bg: #142f4b;
            --badge-text: #63b3ff;
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme])[data-accent="blue"] {
                --btn-bg: #63b3ff;
                --btn-text: #03172c;
                --btn-hover: #88caff;
                --badge-bg: #142f4b;
                --badge-text: #63b3ff;
            }
        }
        :root[data-accent="violet"] {
            --btn-bg: #8962c5;
            --btn-hover: #6c44a4;
            --badge-bg: #eee6ff;
            --badge-text: #8962c5;
        }
        :root[data-theme="dark"][data-accent="violet"] {
            --btn-bg: #bc98f9;
            --btn-text: #1a1029;
            --btn-hover: #d0b2ff;
            --badge-bg: #332647;
            --badge-text: #bc98f9;
        }
        :root[data-theme="gray"][data-accent="violet"] {
            --btn-bg: #bc98f9;
            --btn-text: #1a1029;
            --btn-hover: #d0b2ff;
            --badge-bg: #332647;
            --badge-text: #bc98f9;
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme])[data-accent="violet"] {
                --btn-bg: #bc98f9;
                --btn-text: #1a1029;
                --btn-hover: #d0b2ff;
                --badge-bg: #332647;
                --badge-text: #bc98f9;
            }
        }
        :root[data-accent="rose"] {
            --btn-bg: #c34e54;
            --btn-hover: #a12e39;
            --badge-bg: #ffe3e1;
            --badge-text: #c34e54;
        }
        :root[data-theme="dark"][data-accent="rose"] {
            --btn-bg: #fa8789;
            --btn-text: #290b0c;
            --btn-hover: #ffa4a4;
            --badge-bg: #472021;
            --badge-text: #fa8789;
        }
        :root[data-theme="gray"][data-accent="rose"] {
            --btn-bg: #fa8789;
            --btn-text: #290b0c;
            --btn-hover: #ffa4a4;
            --badge-bg: #472021;
            --badge-text: #fa8789;
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme])[data-accent="rose"] {
                --btn-bg: #fa8789;
                --btn-text: #290b0c;
                --btn-hover: #ffa4a4;
                --badge-bg: #472021;
                --badge-text: #fa8789;
            }
        }
        :root[data-accent="amber"] {
            --btn-bg: #af6700;
            --btn-hover: #894e00;
            --badge-bg: #fbe8d3;
            --badge-text: #af6700;
        }
        :root[data-theme="dark"][data-accent="amber"] {
            --btn-bg: #e69c3a;
            --btn-text: #241100;
            --btn-hover: #f6b669;
            --badge-bg: #412805;
            --badge-text: #e69c3a;
        }
        :root[data-theme="gray"][data-accent="amber"] {
            --btn-bg: #e69c3a;
            --btn-text: #241100;
            --btn-hover: #f6b669;
            --badge-bg: #412805;
            --badge-text: #e69c3a;
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme])[data-accent="amber"] {
                --btn-bg: #e69c3a;
                --btn-text: #241100;
                --btn-hover: #f6b669;
                --badge-bg: #412805;
                --badge-text: #e69c3a;
            }
        }
        :root[data-accent="green"] {
            --btn-bg: #33903c;
            --btn-hover: #02721c;
            --badge-bg: #ddf2dd;
            --badge-text: #33903c;
        }
        :root[data-theme="dark"][data-accent="green"] {
            --btn-bg: #71c575;
            --btn-text: #051c07;
            --btn-hover: #91d993;
            --badge-bg: #18361a;
            --badge-text: #71c575;
        }
        :root[data-theme="gray"][data-accent="green"] {
            --btn-bg: #71c575;
            --btn-text: #051c07;
            --btn-hover: #91d993;
            --badge-bg: #18361a;
            --badge-text: #71c575;
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme])[data-accent="green"] {
                --btn-bg: #71c575;
                --btn-text: #051c07;
                --btn-hover: #91d993;
                --badge-bg: #18361a;
                --badge-text: #71c575;
            }
        }

        body {
            font-family: 'Zen Kaku Gothic New', 'Helvetica Neue', 'Hiragino Sans', Arial, sans-serif;
            max-width: 850px;
            margin: 64px auto 40px;
            padding: 0 20px;
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.8;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 8px var(--card-shadow);
            margin-bottom: 20px;
        }
        h2, h3 { color: var(--heading); margin-top: 0; }
        input[type="text"], textarea {
            background-color: var(--input-bg);
            color: var(--text);
            border: 1px solid var(--border);
        }
        input[type="text"] {
            width: 70%;
            padding: 10px;
            border-radius: 6px;
            font-size: 1em;
        }
        @media (max-width: 480px) {
            input[type="text"] {
                width: 100%;
                margin-bottom: 10px;
                box-sizing: border-box;
            }
        }
        textarea { font-family: inherit; }
        button {
            background-color: var(--btn-bg);
            color: var(--btn-text);
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 10px;
            cursor: pointer;
            font-family: inherit;
        }
        button:disabled {
            background-color: var(--btn-secondary-bg);
            color: var(--muted2);
            cursor: not-allowed;
            opacity: 0.6;
        }
        button:hover { background-color: var(--btn-hover); }
        button.secondary-btn {
            background-color: var(--item-bg);
            color: var(--text);
            border: 1px solid var(--border);
        }
        button.secondary-btn:hover { background-color: var(--item-hover); }

        .problem-item {
            border: 1px solid var(--item-border);
            border-radius: 8px;
            padding: 16px;
            margin-top: 12px;
            background: var(--item-bg);
            cursor: pointer;
        }
        .problem-item:hover {
            background: var(--item-hover);
        }
        /* ---- 2026-09-09追加: 解答済みの問題を一目で分かるように左端に色を付ける ---- */
        .problem-item.solved-ok {
            border-left: 4px solid var(--success-text);
        }
        .problem-item.solved-ng {
            border-left: 4px solid var(--danger-text);
        }
        .badge {
            display: inline-block;
            background: var(--tag-bg);
            color: var(--tag-text);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.85em;
            margin-right: 6px;
        }
        /* ---- 2026-09-09追加: 解答済みバッジ(できた/できなかったで色を分ける) ---- */
        .badge-solved {
            display: inline-block;
            border: 1px solid var(--muted2);
            color: var(--muted);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.85em;
            margin-right: 6px;
            font-weight: bold;
        }
        .badge-solved-ok {
            border-color: var(--success-text);
            color: var(--success-text);
        }
        .badge-solved-ng {
            border-color: var(--danger-text);
            color: var(--danger-text);
        }
        .overlap-badge {
            display: inline-block;
            background: var(--overlap-badge-bg);
            color: var(--overlap-badge-text);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.85em;
            margin-right: 6px;
            font-weight: bold;
        }

        /* ---- 問題詳細情報画面（分野・難易度・タグ） ---- */
        .info-row {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--divider);
            align-items: flex-start;
        }
        .info-row:last-child { border-bottom: none; }
        .info-label {
            flex: 0 0 90px;
            color: var(--muted);
            font-size: 0.9em;
            font-weight: bold;
            padding-top: 2px;
        }
        .info-value {
            flex: 1;
        }
        .tag-chip {
            display: inline-block;
            background: var(--unit-bg);
            color: var(--text);
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 0.85em;
            margin: 0 6px 6px 0;
        }
        .tag-chip-suggest {
            display: inline-block;
            background: var(--unit-bg);
            color: var(--text);
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 0.85em;
            margin: 0 6px 6px 0;
            border: 1px solid var(--divider);
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        .tag-chip-suggest:hover {
            background: var(--btn-bg);
            color: var(--btn-text);
        }
        .detail-search-toggle-btn {
            background: none;
            color: var(--btn-bg);
            border: none;
            padding: 4px 6px;
            font-size: 0.8em;
            margin-left: auto;
            cursor: pointer;
        }
        .detail-search-toggle-btn:hover {
            background: none;
            text-decoration: underline;
        }
        .unit-accordion-header {
            border: 1px solid var(--divider);
            margin-bottom: 4px;
        }
        .subunit-accordion-header {
            border: 1px solid var(--divider);
            margin-bottom: 4px;
            font-size: 0.92em;
        }
        .group-mode-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8em;
            color: var(--muted);
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
        }
        .group-mode-toggle input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .problem-item.group-selectable {
            cursor: pointer;
        }
        .problem-item.selected {
            border-color: var(--btn-bg);
            background: var(--unit-bg);
        }
        .group-select-checkbox {
            width: 18px;
            height: 18px;
            margin-bottom: 8px;
            cursor: pointer;
        }
        .group-selection-bar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--btn-bg);
            color: var(--btn-text);
            padding: 14px 20px;
            align-items: center;
            justify-content: space-between;
            font-weight: bold;
            cursor: pointer;
            z-index: 500;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        }
        .group-selection-bar .arrow {
            font-size: 1.3em;
        }
        .group-preview-item {
            border: 1px solid var(--item-border);
            border-radius: 8px;
            padding: 16px;
            margin-top: 12px;
            background: var(--item-bg);
        }
        .group-preview-item-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 4px;
        }
        .group-remove-btn {
            background: none;
            border: 1px solid var(--divider);
            color: var(--muted);
            padding: 4px 10px;
            font-size: 0.8em;
            border-radius: 6px;
            cursor: pointer;
            flex-shrink: 0;
        }
        .group-remove-btn:hover {
            background: var(--item-hover);
            color: var(--text);
        }
        .unit-tag-submenu {
            flex-direction: row !important;
            flex-wrap: wrap;
            padding-left: 4px;
            margin-bottom: 10px;
        }
        .level-bar {
            background: var(--divider);
            border-radius: 4px;
            height: 8px;
            margin-top: 8px;
            max-width: 220px;
            overflow: hidden;
        }
        .level-bar-fill {
            background: var(--btn-bg);
            height: 100%;
            border-radius: 4px;
        }
        .study-summary-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .study-summary-stat {
            flex: 1;
            min-width: 100px;
            background: var(--item-bg);
            border: 1px solid var(--item-border);
            border-radius: 10px;
            padding: 12px 14px;
        }
        .study-summary-stat-label {
            font-size: 0.78em;
            color: var(--muted);
        }
        .study-summary-stat-value {
            font-size: 1.4em;
            font-weight: bold;
            color: var(--heading);
            margin-top: 2px;
        }
        .study-section-title {
            font-size: 1em;
            color: var(--heading);
            margin: 24px 0 10px;
        }
        .study-chart-scroll {
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .study-chart-subtitle {
            font-size: 0.75em;
            font-weight: normal;
            color: var(--muted);
        }
        /* ---- 学習状況グラフの期間切り替え・前後ナビゲーション(2026-09-10追加) ---- */
        .study-chart-header-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px 10px;
            margin: 24px 0 10px;
        }
        .study-chart-header-row .study-section-title {
            flex: 1;
            min-width: 160px;
        }
        .study-chart-range-btns {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }
        .study-chart-range-btn {
            background: var(--item-bg);
            color: var(--body-text, var(--heading));
            border: 1px solid var(--item-border);
            border-radius: 999px;
            padding: 5px 12px;
            font-size: 0.8em;
            cursor: pointer;
        }
        .study-chart-range-btn:hover {
            background: var(--btn-hover);
        }
        .study-chart-range-btn.active {
            background: var(--btn-bg);
            color: var(--btn-text);
            border-color: var(--btn-bg);
        }
        .study-chart-nav-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
        }
        .study-chart-nav-btn {
            background: none;
            border: none;
            color: var(--muted);
            font-size: 0.8em;
            padding: 4px 2px;
            cursor: pointer;
        }
        .study-chart-nav-btn:hover:not(:disabled) {
            color: var(--heading);
        }
        .study-chart-nav-btn:disabled {
            color: var(--muted2);
            cursor: not-allowed;
            opacity: 0.5;
        }
        .study-chart {
            display: flex;
            align-items: flex-end;
            gap: 5px;
            min-width: max-content;
            padding: 20px 4px 0;
        }
        /* 本数が少ない(1週間/1ヶ月)ときは、幅いっぱいに中央寄せで並べる「fillモード」。
           1週間(wide)は棒を太く・間隔を広く、1ヶ月(fillだがwideでない)は
           棒を細めに・間隔を狭くして詰め込む。3ヶ月は従来通り固定幅+横スクロール。 */
        .study-chart.study-chart-fill {
            width: 100%;
            min-width: 0;
            justify-content: center;
            gap: 4px;
        }
        .study-chart.study-chart-fill.study-chart-fill-wide {
            gap: 14px;
        }
        .study-chart-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 16px;
            flex-shrink: 0;
        }
        .study-chart-fill .study-chart-col {
            width: auto;
            flex: 1 1 0;
            max-width: 24px;
        }
        .study-chart-fill.study-chart-fill-wide .study-chart-col {
            max-width: 64px;
        }
        .study-chart-bar-area {
            position: relative;
            height: 140px;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            border-bottom: 1px solid var(--item-border);
        }
        .study-chart-bar {
            width: 10px;
            border-radius: 3px 3px 0 0;
            background: var(--btn-bg);
            transition: height 0.2s ease, width 0.2s ease;
        }
        .study-chart-fill .study-chart-bar {
            width: 60%;
            max-width: 12px;
        }
        .study-chart-fill.study-chart-fill-wide .study-chart-bar {
            max-width: 32px;
        }
        .study-chart-bar.today {
            background: #28a745;
        }
        .study-chart-bar-value {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6em;
            color: var(--muted);
            white-space: nowrap;
        }
        .study-chart-bar-label {
            display: block;
            height: 12px;
            line-height: 12px;
            font-size: 0.62em;
            color: var(--muted2);
            margin-top: 4px;
            white-space: nowrap;
        }
        .study-chart-bar-label-today {
            color: var(--heading);
            font-weight: bold;
        }
        .study-tag-row {
            margin-bottom: 14px;
        }
        .study-tag-row-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 0.9em;
            margin-bottom: 4px;
            gap: 8px;
        }
        .study-tag-name {
            color: var(--text);
        }
        .study-tag-rate {
            color: var(--muted);
            flex-shrink: 0;
            font-size: 0.9em;
        }
        .study-empty-note {
            color: var(--muted);
            font-size: 0.9em;
        }

        /* ---- 写真読み込み：読み取り確度バッジ ---- */
        .conf-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: bold;
        }
        .conf-high { background: var(--answer-bg); color: var(--success-text); border: 1px solid var(--answer-border); }
        .conf-medium { background: var(--overlap-badge-bg); color: var(--overlap-badge-text); }
        .conf-low { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }
        .detail-header-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }
        .detail-header-row h3 {
            margin: 0;
            flex: 1;
        }
        #selectedProblem {
            white-space: pre-wrap;
            overflow-wrap: break-word;
            font-size: 1.12em;
            line-height: 1.75;
            font-weight: 500;
            color: var(--heading);
            margin: 6px 0 18px 0;
        }
        #solution-area { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }

        /* ---- 数式（KaTeX）がカード幅からはみ出さないようにする ---- */
        #selectedProblem, #solution-area, .ai-chat-bubble {
            max-width: 100%;
        }
        .katex-display {
            display: block;
            overflow-x: auto;
            overflow-y: hidden;
            max-width: 100%;
            padding: 6px 2px;
            box-sizing: border-box;
        }
        .katex {
            display: inline-block;
            white-space: normal;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            vertical-align: middle;
        }
        .katex-display > .katex {
            display: inline-block;
            max-width: 100%;
            text-align: initial;
        }

        /* ---- 画面切り替え共通 ---- */
        .screen { display: none; }
        .screen.active { display: block; }

        .back-btn {
            background: none;
            color: var(--btn-bg);
            padding: 6px 0;
            margin-bottom: 16px;
            font-size: 0.95em;
        }
        .back-btn:hover { background: none; text-decoration: underline; color: var(--btn-hover); }

        /* ---- ホーム画面 ---- */
        #homeScreen.active {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 60vh;
            justify-content: center;
            text-align: center;
        }
        #homeScreen h1 {
            color: var(--heading);
            margin-bottom: 4px;
        }
        #homeScreen p.lead {
            color: var(--muted);
            margin-top: 0;
            margin-bottom: 36px;
        }
        /* ---- 個人AI分析機能: 今日のおすすめ(ホーム画面ウィジェット) ---- */
        .ai-analysis-widget {
            text-align: left;
            max-width: 640px;
            margin: 0 auto 32px;
        }
        .ai-analysis-widget:empty {
            margin-bottom: 0;
        }
        .ai-analysis-widget-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .ai-analysis-mode-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--badge-bg);
            color: var(--badge-text);
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 0.8em;
            font-weight: bold;
        }
        .ai-analysis-widget-title {
            font-weight: bold;
            color: var(--heading);
        }
        .ai-analysis-comment {
            color: var(--text);
            font-size: 0.92em;
            line-height: 1.6;
            margin: 0 0 4px;
        }
        .analysis-rec-reason {
            font-size: 0.8em;
            color: var(--muted);
            margin-top: 6px;
        }
        /* ---- 個人AI分析: 推薦問題のグループ化表示 2026-09-09追加 ---- */
        .analysis-rec-group {
            margin-bottom: 16px;
        }
        .analysis-rec-group:last-child {
            margin-bottom: 0;
        }
        .analysis-rec-group-head {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 2px;
        }
        .analysis-rec-group-label {
            font-weight: bold;
            color: var(--heading);
            font-size: 0.92em;
        }
        .analysis-rec-group-count {
            font-size: 0.78em;
            color: var(--muted2);
        }
        .analysis-rec-group-message {
            font-size: 0.85em;
            color: var(--muted);
            margin: 0 0 8px;
            line-height: 1.5;
        }
        .analysis-rec-group-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .analysis-rec-group-practice-btn {
            margin-top: 10px;
        }
        /* ---- 2026-09-09追加: 個人AI分析「◯◯連続演習」の問題数選択モーダル ---- */
        .group-count-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 3100;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .group-count-modal-overlay.active {
            display: flex;
        }
        .group-count-modal {
            position: relative;
            background: var(--item-bg);
            border: 1px solid var(--item-border);
            border-radius: 14px;
            padding: 28px 24px 24px;
            max-width: 360px;
            width: 100%;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
        }
        .group-count-modal h3 {
            margin: 0 0 4px;
        }
        .group-count-modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            color: var(--muted);
            padding: 6px;
            border-radius: 8px;
        }
        .group-count-modal-close:hover {
            background: var(--item-hover);
        }
        .group-count-modal-desc {
            color: var(--muted);
            font-size: 0.9em;
            margin: 4px 0 20px;
        }
        .group-count-stepper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 8px;
        }
        .group-count-stepper-btn {
            width: 40px;
            height: 40px;
            padding: 0;
            font-size: 1.3em;
            line-height: 1;
            border-radius: 50%;
            background-color: var(--item-bg);
            color: var(--text);
            border: 1px solid var(--item-border);
        }
        .group-count-stepper-btn:hover {
            background-color: var(--item-hover);
        }
        .group-count-stepper-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            background-color: var(--item-bg);
            color: var(--muted2);
        }
        .group-count-value {
            font-size: 1.4em;
            font-weight: bold;
            min-width: 3.5em;
            text-align: center;
        }
        .group-count-modal-note {
            text-align: center;
            color: var(--muted2);
            font-size: 0.8em;
            margin: 0 0 20px;
            min-height: 1.2em;
        }
        .group-count-modal-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        /* ---- 個人AI分析: 原因分析(B)・再発分析(C)・成長分析(D) 2026-09-05追加 ---- */
        .ai-analysis-extra {
            margin-top: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .ai-analysis-extra-block {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 12px 14px;
        }
        .ai-analysis-extra-title {
            font-weight: bold;
            color: var(--heading);
            font-size: 0.9em;
            margin-bottom: 6px;
        }
        .ai-analysis-extra-lead {
            font-size: 0.85em;
            color: var(--text);
            margin: 0 0 6px;
        }
        .ai-analysis-extra-row {
            font-size: 0.85em;
            color: var(--text);
            margin-bottom: 4px;
            line-height: 1.5;
        }
        .home-buttons {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            /* ★2026-09-12追加: ボタン群をAIおすすめウィジェットより上に移動した際、
               下に隙間が無く詰まって見えるとの指摘があったため余白を追加。 */
            margin-bottom: 32px;
        }
        .home-btn {
            background: var(--card-bg);
            color: var(--heading);
            width: 260px;
            padding: 32px 20px;
            border-radius: 18px;
            box-shadow: 0 2px 10px var(--card-shadow);
            border: 2px solid transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            transition: border-color 0.15s, transform 0.15s;
        }
        .home-btn:hover {
            background: var(--card-bg);
            border-color: var(--btn-bg);
            transform: translateY(-2px);
        }
        .home-btn-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: var(--badge-bg);
            color: var(--btn-bg);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .home-btn-title { font-size: 1.1em; font-weight: bold; }
        .home-btn-desc { font-size: 0.85em; color: var(--muted2); }

        /* ---- 学習画面（単元一覧） ---- */
        .unit-grid-3col {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 16px;
        }
        .unit-btn {
            background: var(--unit-bg);
            color: var(--unit-text);
            padding: 22px 10px;
            border-radius: 10px;
            font-size: 1em;
            font-weight: bold;
            cursor: not-allowed;
        }
        .unit-btn:hover { background: var(--unit-bg); }
        .coming-soon-note {
            margin-top: 16px;
            font-size: 0.85em;
            color: var(--muted2);
        }

                /* ---- 学習画面の拡張スタイル ---- */
        .unit-btn.active-subject {
            background: var(--btn-bg);
            color: var(--btn-text);
            cursor: pointer;
        }
        .unit-btn.active-subject:hover {
            background: var(--btn-hover);
        }
        .chapter-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .chapter-item {
            background: var(--item-bg);
            border: 1px solid var(--item-border);
            border-radius: 8px;
            padding: 14px 18px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .chapter-item:hover {
            background: var(--item-hover);
        }
        .chapter-title {
            font-weight: bold;
            font-size: 1.05em;
            color: var(--heading);
        }
        .section-list {
            margin-top: 12px;
            padding-top: 8px;
            border-top: 1px dashed var(--divider);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .section-item {
            padding: 8px 12px;
            background: var(--card-bg);
            border-radius: 6px;
            border: 1px solid var(--border);
            font-size: 0.95em;
            color: var(--text);
            cursor: pointer;
            transition: background-color 0.15s, border-color 0.15s;
        }
        .section-item:hover {
            background: var(--badge-bg);
            border-color: var(--badge-text);
            color: var(--badge-text);
        }


        /* ---- 問題詳細画面 下部ナビ ---- */
        .detail-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--divider);
            flex-wrap: wrap;
            gap: 12px;
        }
        #similarResultsCard { display: none; }
        #diagram-area {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
        #diagram-area svg {
            max-width: 360px;   /* ★ここで表示上限のサイズを指定 */
            width: 100%;
            height: auto;
            background: var(--card-bg);
            border-radius: 8px;
            padding: 8px;
            box-sizing: border-box;
        }

        /* ============ ログイン機能 ============ */
        .auth-bar {
            position: fixed;
            top: 10px;
            right: 12px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85em;
            background: var(--card-bg);
            padding: 6px 10px;
            border-radius: 20px;
            box-shadow: 0 1px 4px var(--card-shadow);
            border: 1px solid var(--item-border);
        }
        .auth-bar button {
            font-size: 0.85em;
            padding: 5px 10px;
            margin: 0;
            width: auto;
        }
        .auth-bar .auth-username {
            color: var(--heading);
            font-weight: bold;
            white-space: nowrap;
        }
        .auth-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            /* ★2026-09-12追加: モバイル実機で「得意/苦手分野の選択画面が見切れる」報告への対応。
               スマホのアドレスバーの出入りで実際に見える高さが100vh/90vhより小さくなることがあり、
               中央寄せのモーダルがその分はみ出て、下端(送信ボタン等)が画面外に隠れてしまっていた。
               オーバーレイ自体にもスクロールを持たせ、はみ出た分は必ず縦スクロールで見られるようにする。 */
            overflow-y: auto;
            padding: 24px 0;
            box-sizing: border-box;
        }
        .auth-modal-overlay.active {
            display: flex;
        }
        /* ★2026-09-08追加: ページ読み込み直後はログイン確認が済むまでログインフォーム
           自体を隠し、代わりにこの読み込み中表示だけを見せる。ログイン済みユーザーが
           リロードするたびに一瞬ログインフォームが見えてしまう問題への対策。 */
        .auth-checking-loader {
            display: none;
            color: var(--muted);
            font-size: 0.95em;
        }
        .auth-modal-overlay.checking .auth-checking-loader {
            display: block;
        }
        .auth-modal-overlay.checking .auth-modal {
            display: none;
        }
        .auth-modal {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 24px;
            width: 90%;
            max-width: 360px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.2);
            /* ★2026-09-05修正: 新規登録ステップ2(得意/苦手分野の自己申告)はチェックボックスが
               大量にあり、画面の高さを超えることが多い。max-height/overflow-yが無いと、
               中身が画面からはみ出たまま操作不能になってしまうバグがあったため追加。
               ★2026-09-12追加修正: 90vhはモバイルのアドレスバー分を考慮しないため、実機では
               まだ下端が見切れるとの報告があった。対応ブラウザではdvh(動的ビューポート高さ)を
               優先させ、外側の.auth-modal-overlay側にもスクロールの保険をかけた(上のコメント参照)。 */
            max-height: 90vh;
            max-height: 90dvh;
            margin: 0 auto;
            overflow-y: auto;
            box-sizing: border-box;
        }
        .auth-modal h3 {
            margin-top: 0;
            color: var(--heading);
        }
        .auth-modal label {
            display: block;
            font-size: 0.85em;
            color: var(--muted);
        }
        .auth-modal input, .auth-modal select, .auth-modal textarea {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 6px;
            margin-bottom: 14px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            box-sizing: border-box;
            font-family: inherit;
            font-size: 1em;
        }
        .auth-modal textarea {
            resize: vertical;
            min-height: 90px;
        }
        .auth-modal input[type="checkbox"] {
            display: inline-block;
            width: auto;
            margin: 0;
        }
        .auth-remember-row {
            margin: -4px 0 16px;
        }
        .auth-modal label.auth-remember-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
            color: var(--text);
            cursor: pointer;
        }
        .auth-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-top: 18px;
        }
        .auth-link {
            color: var(--btn-bg);
            text-decoration: underline;
            font-size: 0.85em;
            cursor: pointer;
            background: none;
        }
        .auth-link:hover {
            color: var(--btn-hover);
        }
        .auth-error {
            color: var(--danger-text);
            background: var(--danger-bg);
            border: 1px solid var(--danger-border);
            border-radius: 6px;
            padding: 8px 10px;
            margin-bottom: 12px;
            font-size: 0.9em;
            display: none;
        }
        /* ---- ★2026-09-10追加: パスワード入力欄の「目」アイコンで表示/非表示を切り替える ---- */
        .password-input-wrapper {
            position: relative;
            margin-top: 6px;
            margin-bottom: 14px;
        }
        .password-input-wrapper input {
            margin: 0;
            padding-right: 42px;
        }
        .password-toggle-btn {
            position: absolute;
            top: 50%;
            right: 6px;
            transform: translateY(-50%);
            background: none;
            border: none;
            padding: 4px;
            cursor: pointer;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .password-toggle-btn:hover {
            color: var(--text);
        }
        .password-toggle-btn svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        /* ---- ★2026-09-10追加: 新規登録ステップ1.5: メールアドレス確認コード(2段階認証) ---- */
        .auth-code-input {
            font-size: 1.4em;
            letter-spacing: 0.4em;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .auth-link-disabled {
            pointer-events: none;
            opacity: 0.55;
            text-decoration: none;
        }
        /* ★2026-09-10追加: 確認コード認証に成功した瞬間だけ出す「確認できました」アニメーション */
        .auth-code-success {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 0 12px;
            color: var(--success-text, #1b8a4c);
        }
        .auth-code-success-icon {
            color: var(--success-text, #1b8a4c);
            animation: authCodeSuccessPop 0.35s ease-out;
        }
        .auth-code-success-circle {
            stroke-dasharray: 182;
            stroke-dashoffset: 182;
            animation: authCodeSuccessDraw 0.5s ease-out forwards;
        }
        .auth-code-success-check {
            stroke-dasharray: 32;
            stroke-dashoffset: 32;
            animation: authCodeSuccessDraw 0.35s 0.35s ease-out forwards;
        }
        .auth-code-success-text {
            margin: 14px 0 0;
            font-weight: bold;
            font-size: 1.05em;
            color: var(--heading);
            opacity: 0;
            animation: authCodeSuccessFadeIn 0.3s 0.55s ease-out forwards;
        }
        @keyframes authCodeSuccessDraw {
            to { stroke-dashoffset: 0; }
        }
        @keyframes authCodeSuccessPop {
            from { transform: scale(0.7); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes authCodeSuccessFadeIn {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* ---- 新規登録ステップ2: 得意/苦手分野の自己申告(個人AI分析機能) ---- */
        .auth-fields-intro {
            font-size: 0.85em;
            color: var(--muted);
            margin: 0 0 14px;
            line-height: 1.5;
        }
        .auth-fields-section-title {
            font-weight: bold;
            color: var(--heading);
            font-size: 0.9em;
            margin: 16px 0 8px;
        }
        .auth-fields-list {
            max-height: 180px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 10px;
        }
        .auth-fields-group {
            margin-bottom: 10px;
        }
        .auth-fields-group:last-child {
            margin-bottom: 0;
        }
        .auth-fields-group-title {
            font-size: 0.8em;
            color: var(--muted);
            margin-bottom: 4px;
        }
        .field-check-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 2px;
            font-size: 0.9em;
            color: var(--text);
            cursor: pointer;
        }
        .field-check-item input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
        .auth-fields-buttons {
            display: flex;
            gap: 10px;
            margin-top: 18px;
        }
        .auth-fields-buttons button {
            flex: 1;
        }
        /* ★2026-09-08: お気に入りボタンはタイトル行の右上に小さく配置する(.detail-header-row側) */
        .user-actions-row {
            display: none;
            flex-shrink: 0;
        }
        .user-actions-row > button {
            width: auto;
            margin: 0;
            white-space: nowrap;
            font-size: 0.8em;
            padding: 6px 12px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        /* ★2026-09-08: できた/できなかった・お気に入りは、押すまでは主張を抑えたゴースト調にする */
        .user-actions-row > button,
        .solve-result-row button {
            background-color: var(--item-bg);
            color: var(--text);
            border: 1px solid var(--border);
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .user-actions-row > button:hover,
        .solve-result-row button:hover {
            background-color: var(--item-hover);
        }
        .solve-result-section {
            display: none;
            flex-direction: column;
            gap: 10px;
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid var(--divider);
        }
        .solve-result-label {
            font-size: 0.9em;
            color: var(--muted);
            font-weight: 500;
        }
        .solve-result-row {
            display: flex;
            gap: 10px;
        }
        .solve-result-row button {
            flex: 1;
            margin: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .user-actions-row button.active,
        .solve-result-row button.active {
            background: #28a745;
            color: #ffffff;
            border-color: #28a745;
        }
        .solve-result-row button.solve-result-ng.active {
            background: #d64545;
            color: #ffffff;
            border-color: #d64545;
        }
        /* ★2026-09-08追加: できた/できなかったを押した瞬間、⭕✕のアイコンを
           「線が描かれる」ように見せるアニメーション(pathLength=1に正規化してあるので
           dasharray/dashoffsetは常に0〜1の範囲で扱える) */
        .solve-result-row .draw-path {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            transition: stroke-dashoffset 0.35s ease 0.05s;
        }
        .solve-result-row button.active .draw-path {
            stroke-dashoffset: 0;
        }
        /* ---- できなかった理由チップ(個人AI分析機能③、2026-09-05追加) ---- */
        .ng-reason-label {
            display: block;
            font-size: 0.8em;
            color: var(--muted);
            margin-bottom: 6px;
        }
        .ng-reason-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .ng-reason-chip {
            margin: 0;
            padding: 6px 12px;
            font-size: 0.82em;
            border-radius: 999px;
            border: 1px solid var(--item-border);
            background: var(--item-bg);
            color: var(--text);
            cursor: pointer;
        }
        .ng-reason-chip:hover {
            background: var(--item-hover);
        }
        .ng-reason-chip.selected {
            background: var(--btn-bg);
            color: #ffffff;
            border-color: var(--btn-bg);
        }
        /* ★2026-09-12追加: 複数選択+「その他」自由記述対応 */
        .ng-reason-chip-add-other {
            border-style: dashed;
        }
        .ng-reason-chip-other.selected {
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ng-reason-other-input {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        .ng-reason-other-input input {
            flex: 1;
            margin: 0;
            padding: 6px 10px;
            font-size: 0.85em;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            box-sizing: border-box;
        }
        .ng-reason-other-input button {
            padding: 6px 14px;
            font-size: 0.85em;
        }

        /* ---- 写真読み込み：合成エディタ(2026-09-12追加→同日中にv2〜v6と段階的に刷新) ----
           生徒はLaTeXを読めない前提なので、生のLaTeXソースをそのまま編集させる方式は使わない。
           v3では区間ごとに個別の箱+切り替えボタンを試したが、文章がブツブツに分断されて
           読みにくいとの指摘を受け、v4で「文章と数式が一つの地の文として自然に混在する、
           枠で区切らない一つの流れ」に戻した。文章はcontenteditableなspan(枠なし)、数式は
           MathLive(GeoGebraの数式入力のように、フォーカスしていない時も常にレンダリングされた
           見た目で、クリックするとその場で編集できる)の<math-field>で、どちらも並べて置くだけ
           (#photoComposer自体は普通の流し込みコンテナで、箱としての装飾はしない)。
           v5でMathLive自体のborder/background・標準搭載アイコンを撤去したが、実機で見ると
           MathLiveのシャドウDOM内部(::part(container))が独自に白い箱を描画していたことが
           判明(v6で修正、下記参照)。またv5の削除✕ボタンも「数式の箱という概念」に見えると
           の指摘を受け、v6で廃止し、数式が空の状態でBackspaceキーを押すと消えるという
           キーボード操作に統一した(専用ボタンなし)。
           AIが文字/数式の判定を間違えていた場合の訂正は次の2方向の非対称な操作にした:
           (a)本当は数式だった文字→そこにカーソルを置いて下の共通「数式を挿入」ボタンを押すと
              その位置に新しい数式入力欄が挿入される(#photoMathInsertBtn→insertMathFieldAtCursor)。
           (b)本当は文字だった数式→その数式にカーソルを置き、中身が空ならBackspaceキーで
              その場から取り除いて文字を打ち直す。
           ここが編集欄であると同時にプレビューでもある。 */
        .pht-composer {
            padding: 14px;
            background: var(--item-bg);
            border-radius: 8px;
            line-height: 2.3;
            font-size: 1em;
        }
        .pht-composer-text {
            display: inline;
            white-space: pre-wrap;
            outline: none;
        }
        /* v6-fix(2026-09-13): 数式(math-field)の直後に作る「空の着地用文章スパン」は
           ゼロ幅スペース1文字だけで見た目上は幅0pxのため、実機のSafariでその隙間を
           タップしても、ネイティブのキャレット配置ロジックが「一番近い実際に見える
           文字」である直前の数式自体にフォーカスを吸着させてしまい、意図した文章側へ
           カーソルが置けない不具合の原因になっていた(Webインスペクタのコンソールログで
           実際に確認済み)。幅をわずかに持たせて実際にタップできる面積を作ることで、
           数式へ吸着せず着地用スパン自身がタップされるようにする。 */
        .pht-tap-landing {
            display: inline-block;
            min-width: 14px;
        }
        .pht-composer-text:focus {
            background: var(--item-hover);
            border-radius: 3px;
        }
        .pht-composer-math {
            display: inline-block;
            vertical-align: middle;
            /* 「枠で囲まれた箱に見える」との指摘を受け、v4まであったborder/backgroundによる
               箱の見た目を撤廃。地の文と同じように、数式もレンダリングされた記号がそのまま
               並んでいるだけに見えるようにした(見分けは数式自体の描画のみ、クリック/
               フォーカス時だけ薄くハイライトする)。 */
            padding: 1px 2px;
            border-radius: 4px;
            /* MathLiveはデフォルトでページのcolorを引き継がないため、ダークテーマで
               数式が黒文字のまま見づらくなる問題(2026-09-12指摘)への対応として明示指定する。
               (MathLive公式のカスタマイズ用CSS変数には専用のテキスト色指定は無く、
               通常のCSS colorプロパティを直接指定するのが実際の対処法。
               参考: cortex-js/cortexjs.io issue #14) */
            color: var(--text);
            min-width: 12px;
            /* ★2026-09-12 v7で判明した真の原因への対応:
               v6では::part(container)/::part(content)を透明化したが、それでも実機で
               白い箱が残った。mathlive本体のバンドル(mathlive.mjs)を直接調べたところ、
               <math-field>要素そのもの(シャドウDOM内部ではなくホスト要素自身)に対して
               ライブラリが下記のデフォルトスタイルをadoptedStyleSheets経由で必ず適用して
               いることが判明した:
                 :host { background-color: field; color: fieldtext;
                         border: 1px solid #acacac; border-radius: 2px; }
               (background-color: field / color: fieldtext は「フォーム入力欄」を表す
               CSSシステムカラーで、まさにこの「白っぽい箱+薄いグレー文字」の正体。
               ::part()はシャドウDOM内部の子要素にしか効かず、この:hostルールそのものは
               外側からのクラスセレクタで上書きできる仕組みだが、詳細度が同点になり
               実機では上書きが安定しなかったため、!importantで確実に上書きする。) */
            background-color: transparent !important;
            border: none !important;
            border-radius: 4px !important;
        }
        .pht-composer-math:focus-within {
            background: var(--item-hover);
        }
        .pht-composer-math:focus,
        .pht-composer-math:focus-within {
            outline: none !important;
        }
        /* シャドウDOM内部(::part(container)/::part(content))の背景も念のため透明化。
           上のホスト要素側の!important指定が本命の修正だが、こちらも保険として残す。 */
        .pht-composer-math::part(container) {
            background: transparent;
            border: none;
        }
        .pht-composer-math::part(content) {
            background: transparent;
        }
        /* MathLive標準搭載のメニュー(☰)・仮想キーボード切替(⌨)アイコンは、常時表示だと
           数式が「操作ボタン付きの箱」に見えてしまう主因だったため非表示にする。
           (メニュー自体は右クリック/長押し/ショートカットで引き続き使える。
           参考: MathLive公式ドキュメント ::part(menu-toggle) / ::part(virtual-keyboard-toggle)) */
        .pht-composer-math::part(menu-toggle),
        .pht-composer-math::part(virtual-keyboard-toggle) {
            display: none;
        }
        /* 数式が「ここ違うかも」フラグ付きの場合の強調表示(文章側の.pht-flagと揃え、
           箱ではなく下線で示す) */
        .pht-composer-math.pht-flag-math {
            border-bottom: 2px dashed var(--danger-text, #c0392b);
            background: var(--danger-bg);
        }
        /* 文章中の「ここ違うかも」ハイライト(タップで理由・候補パネルを開く) */
        .pht-flag {
            cursor: pointer;
            border-bottom: 2px dashed var(--danger-text, #c0392b);
            background: var(--danger-bg);
            border-radius: 3px;
            padding: 0 2px;
        }
        .pht-flag:hover {
            filter: brightness(0.95);
        }
        /* 合成エディタ全体の下に置く、共通の「数式を挿入」「改行を挿入」ボタン
           (区間ごとではなく1つだけ。v11で改行挿入ボタンを追加したので横並び+折り返し可に) */
        .pht-composer-toolbar {
            margin-top: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .pht-math-insert-btn {
            font-size: 0.85em;
            padding: 6px 14px;
            background: transparent;
            border: 1px solid var(--item-border);
            color: var(--text);
            border-radius: 999px;
            cursor: pointer;
        }
        .pht-math-insert-btn:hover {
            background: var(--item-hover);
        }

        /* タップした「ここ違うかも」箇所の理由・言い換え候補を表示するパネル */

        .pht-panel {
            margin-top: 14px;
            padding: 12px 16px;
            background: var(--item-bg);
            border: 1px solid var(--danger-border);
            border-radius: 8px;
        }
        .pht-panel-quote {
            font-weight: bold;
            padding: 4px 0;
        }
        .pht-panel-reason {
            font-size: 0.85em;
            color: var(--muted);
            margin-top: 2px;
        }
        .pht-panel-hint {
            font-size: 0.78em;
            color: var(--muted);
            margin-top: 10px;
        }
        .pht-panel-candidates {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .pht-candidate-chip {
            margin: 0;
            padding: 6px 12px;
            font-size: 0.85em;
            border-radius: 999px;
            border: 1px solid var(--item-border);
            background: var(--card-bg, var(--item-bg));
            color: var(--text);
            cursor: pointer;
        }
        .pht-candidate-chip:hover {
            background: var(--item-hover);
        }
        .pht-panel-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        .pht-panel-ok-btn {
            font-size: 0.85em;
            padding: 6px 14px;
            background: transparent;
            border: 1px solid var(--item-border);
            color: var(--text);
        }

        /* ============ ハンバーガーメニュー ============ */
        .hamburger-btn {
            position: fixed;
            top: 6px;
            left: 8px;
            z-index: 2600;
            width: 42px;
            height: 42px;
            padding: 0;
            margin: 0;
            border-radius: 50%;
            background: var(--card-bg);
            color: var(--heading);
            box-shadow: 0 1px 4px var(--card-shadow);
            border: 1px solid var(--item-border);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hamburger-icon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4px;
            width: 18px;
            height: 14px;
        }
        .hamburger-icon span {
            display: block;
            width: 100%;
            height: 2px;
            border-radius: 1px;
            background: var(--heading);
        }
        .side-menu-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 2400;
        }
        .side-menu-overlay.active {
            display: block;
        }
        .side-menu {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 280px;
            max-width: 82vw;
            background: var(--card-bg);
            z-index: 2500;
            box-shadow: 2px 0 16px rgba(0,0,0,0.15);
            transform: translateX(-100%);
            transition: transform 0.25s ease;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }
        .side-menu.active {
            transform: translateX(0);
        }
        .side-menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 16px 8px;
        }
        .side-menu-title {
            font-weight: bold;
            color: var(--heading);
        }
        .side-menu-close {
            background: none;
            width: auto;
            margin: 0;
            padding: 4px 8px;
            color: var(--muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .side-menu-items {
            padding: 8px 10px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .side-menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin: 0;
            padding: 12px 10px;
            background: none;
            color: var(--text);
            text-align: left;
            border-radius: 8px;
            font-size: 0.95em;
        }
        .side-menu-item:hover {
            background: var(--item-hover);
        }
        .side-menu-item:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            background: none;
        }
        .chevron-icon {
            display: inline-flex;
            transition: transform 0.2s ease;
            color: var(--muted);
        }
        .chevron-icon.rotated {
            transform: rotate(180deg);
        }
        .side-submenu {
            display: none;
            flex-direction: column;
            padding-left: 20px;
            gap: 2px;
        }
        .side-submenu.open {
            display: flex;
        }
        .side-submenu-item {
            width: 100%;
            margin: 0;
            padding: 10px 10px;
            background: none;
            color: var(--muted);
            text-align: left;
            border-radius: 8px;
            font-size: 0.9em;
        }
        .side-submenu-item:hover {
            background: var(--item-hover);
            color: var(--text);
        }
        .side-menu-footer {
            margin-top: auto;
            padding: 10px 10px 18px;
            border-top: 1px solid var(--divider);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .side-menu-account {
            padding: 10px 10px 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }
        .avatar-picker {
            display: none;
            position: absolute;
            top: 56px;
            left: 0;
            z-index: 10;
            width: 220px;
            background: var(--card-bg);
            border: 1px solid var(--item-border);
            border-radius: 10px;
            box-shadow: 0 2px 10px var(--card-shadow);
            padding: 10px;
        }
        .avatar-picker.active {
            display: block;
        }
        .avatar-picker-emojis {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-bottom: 8px;
        }
        .avatar-picker-emojis button {
            background: var(--item-bg);
            border: 1px solid var(--item-border);
            border-radius: 8px;
            font-size: 1.2em;
            padding: 6px 0;
            color: inherit;
        }
        .avatar-picker-emojis button:hover {
            background: var(--item-hover);
        }
        .avatar-picker-upload {
            width: 100%;
            background: var(--btn-secondary-bg);
        }
        .avatar-crop-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 3000;
            align-items: center;
            justify-content: center;
        }
        .avatar-crop-overlay.active {
            display: flex;
        }
        .avatar-crop-modal {
            background: var(--card-bg);
            border-radius: 14px;
            padding: 20px;
            width: 300px;
            max-width: 90vw;
            text-align: center;
        }
        .avatar-crop-modal h3 {
            margin-top: 0;
            color: var(--heading);
        }
        .avatar-crop-hint {
            font-size: 0.8em;
            color: var(--muted);
            margin: -8px 0 14px;
        }
        .avatar-crop-frame {
            width: 240px;
            height: 240px;
            margin: 0 auto 16px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            background: #000;
            border: 2px solid var(--border);
            touch-action: none;
            cursor: grab;
        }
        .avatar-crop-frame img {
            position: absolute;
            max-width: none;
            user-select: none;
            -webkit-user-drag: none;
            pointer-events: none;
        }
        .avatar-crop-zoom {
            width: 100%;
            margin-bottom: 18px;
        }
        .avatar-crop-buttons {
            display: flex;
            gap: 10px;
        }
        .avatar-crop-buttons button {
            flex: 1;
            margin: 0;
        }
        .side-menu-account-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .side-menu-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--badge-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
            flex-shrink: 0;
            overflow: hidden;
        }
        .side-menu-username {
            font-weight: bold;
            color: var(--heading);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .side-menu-account button {
            width: 100%;
            margin: 0;
        }
        .side-menu-promo {
            padding: 0 0 8px;
        }
        .side-menu-promo-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--badge-bg);
            border: 1px solid var(--btn-bg);
            border-radius: 12px;
            padding: 12px 12px;
            color: var(--text);
            text-align: left;
            margin: 0;
        }
        .side-menu-promo-btn:hover {
            background: var(--item-hover);
        }
        .side-menu-promo-star {
            font-size: 1.15em;
            flex-shrink: 0;
        }
        .side-menu-promo-text {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
            gap: 1px;
        }
        .side-menu-promo-title {
            font-weight: bold;
            color: var(--heading);
            font-size: 0.92em;
        }
        .side-menu-promo-sub {
            font-size: 0.75em;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .side-menu-promo-arrow {
            color: var(--btn-bg);
            font-weight: bold;
            font-size: 1.2em;
            flex-shrink: 0;
        }
        .hamburger-btn.hidden {
            display: none;
        }
        .settings-info-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 4px;
            border-bottom: 1px solid var(--divider);
            gap: 12px;
        }
        .settings-avatar-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 4px;
            border-bottom: 1px solid var(--divider);
            position: relative;
        }
        .settings-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--badge-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4em;
            flex-shrink: 0;
            cursor: pointer;
            overflow: hidden;
        }
        .settings-info-row:last-child {
            border-bottom: none;
        }
        .settings-info-label {
            color: var(--muted);
            flex-shrink: 0;
        }
        .settings-static-text {
            color: var(--text);
            white-space: pre-wrap;
        }
        .plan-intro-header {
            display: flex;
            align-items: baseline;
            gap: 10px;
            flex-wrap: wrap;
        }
        .plan-intro-price-wrap {
            display: inline-flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
        }
        .plan-intro-price {
            color: var(--btn-bg);
            font-weight: bold;
        }
        .plan-intro-price-strike {
            color: var(--muted);
            text-decoration: line-through;
            font-size: 0.9em;
        }
        .plan-intro-launch-badge {
            background: var(--btn-bg);
            color: var(--btn-text);
            font-size: 0.72em;
            font-weight: bold;
            padding: 2px 9px;
            border-radius: 999px;
        }
        .plan-compare-table {
            margin-top: 18px;
            border: 1px solid var(--divider);
            border-radius: 10px;
            overflow: hidden;
        }
        .plan-compare-row {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr;
            gap: 4px;
            padding: 10px 8px;
            border-bottom: 1px solid var(--divider);
            font-size: 0.85em;
            align-items: center;
        }
        .plan-compare-row:last-child {
            border-bottom: none;
        }
        .plan-compare-head {
            font-weight: bold;
            color: var(--heading);
            background: var(--item-bg);
            font-size: 0.8em;
        }
        .plan-compare-cell {
            text-align: center;
            color: var(--text);
        }
        .plan-compare-feature-cell {
            text-align: left;
            color: var(--muted);
        }
        .plan-compare-plus {
            color: var(--btn-bg);
            font-weight: bold;
        }
        .option-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 14px;
        }
        .option-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin: 0;
            padding: 14px;
            background: var(--item-bg);
            border: 1px solid var(--item-border);
            color: var(--text);
            text-align: left;
            border-radius: 8px;
        }
        .option-item:hover {
            background: var(--item-hover);
        }
        .option-item-title {
            display: block;
            font-weight: bold;
            color: var(--heading);
        }
        .option-item-desc {
            display: block;
            font-size: 0.8em;
            color: var(--muted);
            margin-top: 2px;
        }
        .option-item-check {
            color: var(--btn-bg);
            font-weight: bold;
            visibility: hidden;
            flex-shrink: 0;
            margin-left: 12px;
        }
        .option-item.selected {
            border-color: var(--btn-bg);
        }
        .option-item.selected .option-item-check {
            visibility: visible;
        }
        /* ---- 設定 > 外観 > テーマカラー(アクセントカラー)のスウォッチ 2026-09-08追加 ---- */
        .accent-swatch-row {
            display: flex;
            gap: 12px;
            margin-top: 14px;
            flex-wrap: wrap;
        }
        .accent-swatch {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--swatch-color);
            border: 3px solid transparent;
            padding: 0;
            cursor: pointer;
            box-shadow: 0 1px 3px var(--card-shadow);
            transition: transform 0.15s, border-color 0.15s;
        }
        .accent-swatch:hover {
            transform: scale(1.08);
        }
        .accent-swatch.selected {
            border-color: var(--heading);
        }
        /* ---- 設定 > 数式・文字サイズ(スライダー) ---- */
        .font-size-slider-card {
            margin-top: 18px;
        }
        .font-size-slider-value {
            text-align: center;
            font-size: 0.85em;
            color: var(--muted);
            margin-bottom: 10px;
        }
        .font-size-slider-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .font-size-slider-icon {
            color: var(--muted);
            flex-shrink: 0;
            line-height: 1;
        }
        .font-size-slider-icon.small { font-size: 0.8em; }
        .font-size-slider-icon.large { font-size: 1.5em; }
        input[type="range"].font-size-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 3px;
            background: var(--divider);
            outline: none;
            margin: 0;
        }
        input[type="range"].font-size-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--btn-bg);
            border: 3px solid var(--card-bg);
            box-shadow: 0 1px 4px rgba(0,0,0,0.35);
            cursor: pointer;
        }
        input[type="range"].font-size-slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--btn-bg);
            border: 3px solid var(--card-bg);
            box-shadow: 0 1px 4px rgba(0,0,0,0.35);
            cursor: pointer;
        }
        input[type="range"].font-size-slider::-moz-range-track {
            height: 6px;
            border-radius: 3px;
            background: var(--divider);
        }
        .font-size-slider-preview {
            margin-top: 20px;
            padding: 14px;
            background: var(--item-bg);
            border: 1px solid var(--item-border);
            border-radius: 8px;
            color: var(--text);
            text-align: center;
        }
        .auth-success {
            color: var(--success-text);
            background: var(--answer-bg);
            border: 1px solid var(--answer-border);
            border-radius: 6px;
            padding: 8px 10px;
            margin-bottom: 12px;
            font-size: 0.9em;
            display: none;
        }
        .settings-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
        }
        .settings-card-header h3 {
            margin: 0;
        }
        .settings-edit-btn {
            width: auto;
            margin: 0;
            padding: 6px 14px;
            font-size: 0.85em;
            background: var(--btn-bg);
            flex-shrink: 0;
        }
        .settings-account-footer {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--divider);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .settings-account-footer button {
            width: 100%;
            margin: 0;
        }
        .settings-danger-zone {
            margin-top: 8px;
            padding-top: 16px;
            border-top: 1px dashed var(--border);
        }
        .settings-danger-zone-label {
            font-size: 0.8em;
            color: var(--muted);
            margin: 0 0 10px;
        }
        .settings-danger-zone-desc {
            font-size: 0.85em;
            color: var(--muted);
            margin: -6px 0 14px;
        }
        button.danger-btn {
            background-color: #d64545;
            color: #ffffff;
        }
        button.danger-btn:hover {
            background-color: #b83333;
        }
        .delete-account-modal-buttons {
            display: flex;
            gap: 10px;
        }
        .delete-account-modal-buttons button {
            flex: 1;
            margin: 0;
        }
        .settings-form label {
            display: block;
            font-size: 0.85em;
            color: var(--muted);
        }
        .settings-form input, .settings-form select, .settings-form textarea {
            display: block;
            width: 100%;
            max-width: 340px;
            padding: 10px;
            margin-top: 6px;
            margin-bottom: 14px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            box-sizing: border-box;
            font-family: inherit;
            font-size: 1em;
        }
        .settings-form textarea {
            resize: vertical;
            min-height: 100px;
        }
        .settings-info-row input[type="email"] {
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            max-width: 60%;
            box-sizing: border-box;
        }
        .history-date-label {
            display: block;
            font-size: 0.8em;
            color: var(--muted);
            margin-bottom: 4px;
        }

        /* ---- AI質問チャット履歴一覧：直近メッセージのプレビュー ---- */
        .ai-chat-history-preview {
            margin-top: 6px;
            font-size: 0.85em;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* ---- AI質問チャット ----
           ・デフォルト(ウィンドウ幅が十分でない=スマホ等)：画面下半分のシート。
             上部のハンドルをドラッグ(スワイプ)すると高さを調整でき、
             下まで縮めて離すと閉じる。
           ・ウィンドウ幅が十分あるPC(下の @media 参照)：右側の固定パネルに切り替え、
             左側に解説、右側にチャットを並べて表示する。 */
        .ai-chat-overlay {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: auto;
            height: 55vh;
            min-height: 200px;
            max-height: 92vh;
            background: var(--bg);
            z-index: 3200;
            flex-direction: column;
            border-radius: 16px 16px 0 0;
            border-top: 1px solid var(--divider);
            box-shadow: 0 -2px 20px var(--card-shadow);
            /* ★2026-09-12追加: この下シートは画面の下55%しか覆っておらず、背後の問題/解説画面
               (body)がそのままスクロール可能な状態で残っていた。メッセージ欄の中身が少ない
               (=ai-chat-messages自体にスクロール余地が無い)うちは、チャット欄内でスワイプしても
               背後のbodyへスクロールが素通りしてしまい、「チャット側でスクロールしようとしても
               問題や解説の方がスクロールされる」という報告につながっていた。開いている間は
               背後(body)のスクロールをロックし、必ずチャット欄内のスクロールとして扱わせる。 */
            overscroll-behavior: contain;
        }
        .ai-chat-overlay.active {
            display: flex;
        }
        /* body側のロックはスマホ等の下シート表示の時だけ有効にする。
           PC分割表示(下の @media (min-width: 800px) 参照)では左側の問題/解説を
           チャットを開いたままスクロールしたいので、そちらでは元に戻す。 */
        body.ai-chat-open {
            overflow: hidden;
        }
        .ai-chat-overlay.ai-chat-dragging {
            transition: none;
        }
        .ai-chat-drag-handle {
            display: flex;
            justify-content: center;
            padding: 8px 0 4px;
            cursor: grab;
            touch-action: none;
            flex-shrink: 0;
        }
        .ai-chat-overlay.ai-chat-dragging .ai-chat-drag-handle {
            cursor: grabbing;
        }
        .ai-chat-drag-handle-bar {
            width: 40px;
            height: 4px;
            border-radius: 2px;
            background: var(--border);
        }
        .ai-chat-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--divider);
            box-shadow: 0 1px 4px var(--card-shadow);
            flex-shrink: 0;
        }
        .ai-chat-close-btn {
            width: 36px;
            height: 36px;
            padding: 0;
            border-radius: 50%;
            background: var(--item-bg);
            color: var(--heading);
            border: 1px solid var(--item-border);
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .ai-chat-title {
            flex: 1;
            font-weight: bold;
            color: var(--heading);
            font-size: 0.95em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ai-chat-messages {
            flex: 1;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--bg);
        }
        .ai-chat-empty-hint {
            color: var(--muted);
            text-align: center;
            margin-top: 24px;
            font-size: 0.9em;
        }
        .ai-chat-bubble {
            max-width: 78%;
            padding: 10px 14px;
            border-radius: 16px;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow-wrap: break-word;
            font-size: 0.95em;
        }
        .ai-chat-bubble-user {
            align-self: flex-end;
            background: var(--btn-bg);
            color: var(--btn-text);
            border-bottom-right-radius: 4px;
        }
        .ai-chat-bubble-ai {
            align-self: flex-start;
            background: var(--card-bg);
            color: var(--text);
            border: 1px solid var(--item-border);
            border-bottom-left-radius: 4px;
        }
        .ai-chat-bubble-loading {
            color: var(--muted);
            font-style: italic;
        }
        .ai-chat-char-count {
            font-size: 0.75em;
            color: var(--muted);
            text-align: right;
            padding: 0 14px 4px;
            flex-shrink: 0;
        }
        .ai-chat-input-row {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            padding: 8px 12px 12px;
            background: var(--card-bg);
            border-top: 1px solid var(--divider);
            flex-shrink: 0;
        }
        .ai-chat-input-row textarea {
            flex: 1;
            resize: none;
            border-radius: 18px;
            padding: 10px 14px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text);
            max-height: 100px;
            font-family: inherit;
            font-size: 0.95em;
            box-sizing: border-box;
        }
        .ai-chat-send-btn {
            border-radius: 50%;
            width: 42px;
            height: 42px;
            padding: 0;
            background: var(--btn-bg);
            color: var(--btn-text);
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* ---- AIチャット：送信取り消し用の右クリックメニュー ---- */
        .ai-chat-context-menu {
            display: none;
            position: fixed;
            z-index: 3300;
            background: var(--card-bg);
            border: 1px solid var(--item-border);
            border-radius: 8px;
            box-shadow: 0 4px 16px var(--card-shadow);
            overflow: hidden;
            min-width: 170px;
        }
        .ai-chat-context-menu.active {
            display: block;
        }
        .ai-chat-context-menu button {
            display: block;
            width: 100%;
            margin: 0;
            padding: 10px 16px;
            background: none;
            border: none;
            border-radius: 0;
            color: var(--danger-text);
            text-align: left;
            font-size: 0.9em;
        }
        .ai-chat-context-menu button:hover {
            background: var(--item-hover);
        }

        /* ---- AI質問履歴一覧のカード：「問題を見る」「チャット欄を見る」の2ボタン ---- */
        .ai-chat-history-item {
            cursor: default;
        }
        .ai-chat-history-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        .ai-chat-history-actions button {
            flex: 1;
            margin: 0;
        }

        /* ---- ウィンドウ幅が十分あるPCでは、チャットを右側の固定パネルにして
               左側に解説(問題詳細画面)、右側にチャットを並べて表示する ---- */
        @media (min-width: 800px) {
            body.ai-chat-open {
                margin-right: 360px;
                /* ★2026-09-12: モバイル用のスクロールロック(上の定義)をPC分割表示では解除し、
                   左側の問題/解説パネルを従来通りスクロールできるようにする。 */
                overflow: auto;
            }
            .ai-chat-overlay {
                top: 0;
                left: auto;
                right: 0;
                bottom: 0;
                height: auto;
                min-height: 0;
                max-height: none;
                width: 360px;
                border-radius: 0;
                border-top: none;
                border-left: 1px solid var(--divider);
                box-shadow: -2px 0 16px var(--card-shadow);
            }
            .ai-chat-drag-handle {
                display: none;
            }
        }

/* ============================================================
   ★2026-09-10追加: 設定>使い方 の小見出し
   ============================================================ */
.help-section-title {
    color: var(--heading);
    margin: 22px 0 6px;
    font-size: 1.03em;
}

/* ============================================================
   ★2026-09-10追加: 初回サインアップ時の使い方ツアー(モーダル)
   ============================================================ */
.onboarding-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 3400;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.onboarding-overlay.active {
    display: flex;
}
.onboarding-modal {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 28px 24px 20px;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.onboarding-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
}
.onboarding-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: var(--border);
    transition: width 0.15s ease, background-color 0.15s ease;
}
.onboarding-dot.active {
    width: 18px;
    background: var(--btn-bg);
}
.onboarding-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--badge-bg);
    font-size: 26px;
    line-height: 1;
}
.onboarding-title {
    margin: 0 0 8px;
}
.onboarding-desc {
    color: var(--text);
    margin: 0 0 22px;
    line-height: 1.65;
    font-size: 0.96em;
}
.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.onboarding-skip-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.92em;
    cursor: pointer;
    padding: 8px;
}
.onboarding-footer button:not(.onboarding-skip-btn) {
    flex: 1;
    max-width: 160px;
    margin-left: auto;
}

/* ★2026-09-10追加: 運営ダッシュボード(会員数・MathPlus在籍数・機能別利用状況等) */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 12px 0 20px;
}
.admin-stat-card {
    background: var(--item-bg);
    border: 1px solid var(--item-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.admin-stat-label {
    font-size: 0.75em;
    color: var(--muted);
    margin-bottom: 4px;
}
.admin-stat-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--heading);
}
.admin-section-title {
    font-size: 0.92em;
    font-weight: 600;
    color: var(--heading);
    margin: 22px 0 8px;
}
.admin-usage-list {
    border: 1px solid var(--item-border);
    border-radius: 8px;
    padding: 4px 12px;
}
.admin-usage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--item-border);
    font-size: 0.85em;
}
.admin-usage-row:last-child { border-bottom: none; }
.admin-usage-label {
    flex: 0 0 130px;
    color: var(--text);
}
.admin-usage-bar-track {
    flex: 1;
    background: var(--item-border);
    border-radius: 6px;
    overflow: hidden;
    height: 8px;
}
.admin-usage-bar-fill {
    height: 100%;
    background: var(--btn-bg);
}
.admin-usage-count {
    flex: 0 0 40px;
    text-align: right;
    color: var(--muted);
    font-size: 0.9em;
}
.admin-problem-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--item-border);
    border-radius: 8px;
}
.admin-problem-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.82em;
    border-bottom: 1px solid var(--item-border);
}
.admin-problem-row:last-child { border-bottom: none; }
.admin-refresh-note {
    font-size: 0.75em;
    color: var(--muted);
    margin-top: 4px;
}

/* ★2026-09-14追加: 管理者ダッシュボードのユーザー検索・お問い合わせ一覧 */
.admin-user-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.admin-user-search-row input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    box-sizing: border-box;
    font-size: 0.9em;
}
.admin-user-search-row button {
    margin: 0;
    white-space: nowrap;
}
.admin-user-result-list {
    border: 1px solid var(--item-border);
    border-radius: 8px;
    margin-bottom: 4px;
}
.admin-user-result-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    padding: 8px 10px;
    font-size: 0.85em;
    border-bottom: 1px solid var(--item-border);
}
.admin-user-result-row:last-child { border-bottom: none; }
.admin-user-result-email {
    color: var(--heading);
    font-weight: 600;
}
.admin-inquiry-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--item-border);
    border-radius: 8px;
}
.admin-inquiry-row {
    padding: 10px 12px;
    font-size: 0.85em;
    border-bottom: 1px solid var(--item-border);
}
.admin-inquiry-row:last-child { border-bottom: none; }
.admin-inquiry-row-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.9em;
}
.admin-inquiry-category {
    color: var(--heading);
    font-weight: 600;
}
.admin-inquiry-message {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}