/* ---- カラーテーマ（端末のダークモード設定に自動追従） ---- */
        :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;

            /* ★2026-09-15追加: サインアップの得意/苦手分野選択で、取り違え防止のため色分けする */
            --weak-bg: #e8f1fd;
            --weak-border: #b7d4f7;
            --weak-text: #1a56c4;
            --strong-bg: #fdf1e0;
            --strong-border: #f0cf9a;
            --strong-text: #b5690c;

            --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;

                --weak-bg: #15263c;
                --weak-border: #2c4d75;
                --weak-text: #7fb0ff;
                --strong-bg: #3a2a12;
                --strong-border: #6b4d22;
                --strong-text: #ffb74d;

                --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;

            --weak-bg: #15263c;
            --weak-border: #2c4d75;
            --weak-text: #7fb0ff;
            --strong-bg: #3a2a12;
            --strong-border: #6b4d22;
            --strong-text: #ffb74d;

            --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;

            --weak-bg: #1f2f42;
            --weak-border: #375a82;
            --weak-text: #8ec0ff;
            --strong-bg: #453722;
            --strong-border: #6e5530;
            --strong-text: #ffc267;

            --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;
        }
        /* ★2026-09-23: BAIMYロゴ見出しを削除したので、代わりにこの本文見出し自体を
           以前の「見出し+サブ見出し」2行分の余白を1行で受け持つように調整。 */
        #homeScreen h1 {
            color: var(--heading);
            margin: 0 0 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;
        }

        /* ---- ★2026-09-22追加: 「今日のおすすめ」のモード切り替えスイッチ ----
           見出しの右端に置くオン/オフのスライドスイッチ。
           オフ=学習ルートの続き / オン=苦手克服。
           DOM順は input → track → 文字 で(CSSの ~ セレクタでオンの見た目を作るため)、
           表示だけ row-reverse にして「文字 → スイッチ」の並びに見せている。
           色はすべてテーマ変数なので、4テーマ・ダークモードにそのまま追従する。 */
        .home-mode-switch {
            display: inline-flex;
            flex-direction: row-reverse;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
        }
        .home-mode-switch input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        .home-mode-switch-label {
            font-size: 0.82em;
            color: var(--muted);
            white-space: nowrap;
        }
        .home-mode-switch input:checked ~ .home-mode-switch-label {
            color: var(--btn-bg);
            font-weight: bold;
        }
        .home-mode-switch-track {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
            flex-shrink: 0;
            border-radius: 999px;
            background: var(--unit-bg);
            border: 1px solid var(--border);
            transition: background 0.18s ease, border-color 0.18s ease;
        }
        .home-mode-switch-knob {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            /* つまみの色は「オフ=くすんだ文字色」「オン=アクセント上の文字色」。
               ダークテーマでは --card-bg がトラックとほぼ同色でつまみが消えるので、
               白固定でも --card-bg でもなくこの2つを使う。 */
            background: var(--muted2);
            box-shadow: 0 1px 3px var(--card-shadow);
            transition: transform 0.18s ease, background 0.18s ease;
        }
        .home-mode-switch input:checked ~ .home-mode-switch-track {
            background: var(--btn-bg);
            border-color: var(--btn-bg);
        }
        .home-mode-switch input:checked ~ .home-mode-switch-track .home-mode-switch-knob {
            transform: translateX(18px);
            background: var(--btn-text);
        }
        .home-mode-switch input:focus-visible ~ .home-mode-switch-track {
            outline: 2px solid var(--btn-bg);
            outline-offset: 2px;
        }
        @media (prefers-reduced-motion: reduce) {
            .home-mode-switch-track,
            .home-mode-switch-knob { transition: none; }
        }

        /* ---- ★2026-09-22追加: 「今日のおすすめ」の本文(学習ルートモード) ---- */
        .home-rec-card {
            background: var(--card-bg);
            border: 1px solid var(--btn-bg);
            border-radius: 12px;
            padding: 14px 16px;
        }
        .home-rec-progress {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .home-rec-progress .lr-progress-bar {
            flex: 1;
            margin: 0;
        }
        .home-rec-progress-text {
            font-size: 0.78em;
            color: var(--muted);
            white-space: nowrap;
        }
        .home-rec-eyebrow {
            color: var(--btn-bg);
            font-size: 0.78em;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        .home-rec-title {
            font-size: 1.12em;
            font-weight: 600;
            color: var(--heading);
            margin: 4px 0 2px;
        }
        .home-rec-sub {
            color: var(--muted);
            font-size: 0.84em;
            line-height: 1.6;
        }
        .home-rec-lead {
            color: var(--text);
            font-size: 0.9em;
            line-height: 1.7;
            margin: 0 0 12px;
        }
        .home-rec-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 14px;
        }
        .home-rec-actions button {
            flex: 1;
            min-width: 150px;
            margin: 0;
        }
        .home-rec-modeline {
            margin-bottom: 6px;
        }
        /* 演習から戻ってきたときの一言(学習ルート画面の .lr-banner と同じ役割) */
        .home-rec-banner {
            background: var(--answer-bg);
            border: 1px solid var(--answer-border);
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 12px;
            font-size: 0.86em;
            line-height: 1.6;
            color: var(--text);
        }
        .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; }
        /* ★2026-09-21追加: ホームの「過去問で演習」に付ける Math Plus バッジ */
        .home-btn-lock {
            margin-left: 6px;
            padding: 1px 6px;
            border-radius: 4px;
            background: var(--tag-bg);
            color: var(--muted);
            font-size: 0.7em;
            font-weight: normal;
            vertical-align: middle;
        }
        .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;
        }
        /* ★2026-09-23追加: 生年月日入力欄など、フィールド直下に添える補足説明 */
        .auth-fields-hint {
            font-size: 0.78em;
            color: var(--muted);
            margin: -8px 0 14px;
            line-height: 1.5;
        }
        .auth-fields-list {
            /* ★2026-09-15: 得意/苦手を2ステップに分割し、1回に1つのリストしか
               表示しなくなったため、見やすさ優先で180px→260pxに拡大。
               .auth-modal側の90dvh上限+overflow-y:autoが引き続き保険になる。 */
            max-height: 260px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 10px;
        }
        /* ★2026-09-15追加: 苦手=青系・得意=オレンジ系で色分けし、
           どちらの欄を選んでいるか一目で分かるようにする(記入欄の取り違え防止)。
           青とオレンジは赤緑色覚異常でも判別しやすい組み合わせのため採用。 */
        .auth-fields-section-title-weak {
            color: var(--weak-text);
        }
        .auth-fields-section-title-strong {
            color: var(--strong-text);
        }
        .auth-fields-list-weak {
            background: var(--weak-bg);
            border-color: var(--weak-border);
        }
        .auth-fields-list-strong {
            background: var(--strong-bg);
            border-color: var(--strong-border);
        }
        .auth-fields-list-weak .field-check-item input[type="checkbox"] {
            accent-color: var(--weak-text);
        }
        .auth-fields-list-strong .field-check-item input[type="checkbox"] {
            accent-color: var(--strong-text);
        }
        .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-15追加: サインアップの各ステップに付ける簡易な進捗表示(例:「ステップ 1/4」) */
        .auth-fields-step-indicator {
            font-size: 0.75em;
            color: var(--muted2);
            margin: 0 0 4px;
            font-weight: bold;
            letter-spacing: 0.02em;
        }
        /* ★2026-09-15追加: サインアップ「学年」ステップの選択欄 */
        .auth-grade-select {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--input-bg);
            color: var(--text);
            font-size: 0.95em;
            margin: 4px 0 4px;
        }
        /* ★2026-09-15追加: サインアップ「文系/理系」ステップの選択ボタン(単一選択・任意) */
        .auth-track-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 4px 0 4px;
        }
        .auth-track-option {
            text-align: left;
        }
        .auth-track-option-selected {
            background: var(--btn-bg) !important;
            color: var(--btn-text) !important;
            border-color: var(--btn-bg) !important;
        }
        /* ★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-16追加→同日中に
           「できた/できなかった」と見た目が同じすぎるとの指摘を受けて控えめなリンク方式に
           変更) ---- 普段は小さなテキストリンク1本だけを表示し、押した時だけ評価の選択肢
           (既存の.ng-reason-chipを流用したピル状ボタン)を開く。理由チップ自体も同じ
           .ng-reason-*クラスをそのまま流用している(renderFeedbackReasonPicker参照)ので、
           ここで追加するのは色分けとリンクの見た目・そっと促す演出のみ。 */
        .problem-feedback-section {
            display: none;
            margin-top: 14px;
            text-align: right;
        }
        .problem-feedback-link {
            display: inline-block;
            font-size: 0.82em;
            color: var(--muted);
            text-decoration: none;
            border-bottom: 1px dashed var(--muted);
            cursor: pointer;
            transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
        }
        .problem-feedback-link:hover {
            color: var(--btn-bg);
            border-bottom-color: var(--btn-bg);
        }
        .problem-feedback-link.feedback-link-good {
            color: #28a745;
            border-bottom-color: #28a745;
        }
        .problem-feedback-link.feedback-link-bad {
            color: #d64545;
            border-bottom-color: #d64545;
        }
        .problem-feedback-panel {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .problem-feedback-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .ng-reason-chip.feedback-pill-good.selected {
            background: #28a745;
            border-color: #28a745;
        }
        .ng-reason-chip.feedback-pill-bad.selected {
            background: #d64545;
            border-color: #d64545;
        }
        /* ★「たまに入力を促すシステム」。解説を初めて表示した時、まだフィードバックが無ければ
           確率的(3割程度)にリンクの文字色をそっと明滅させるだけに留める(ポップアップや
           パネルの自動展開はしない、控えめな演出)。 */
        @keyframes feedbackLinkNudgePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.45; }
        }
        .problem-feedback-link.feedback-nudge {
            color: var(--btn-bg);
            border-bottom-color: var(--btn-bg);
            animation: feedbackLinkNudgePulse 0.9s ease-in-out 3;
        }

        /* ---- 写真読み込み：合成エディタ(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);
        }
        /* ★2026-09-15追加: 通知ベル(ハンバーガーメニューの反対側、右上に固定表示)。 */
        .notification-bell-btn {
            position: fixed;
            top: 6px;
            right: 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;
        }
        .notification-bell-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            min-width: 16px;
            height: 16px;
            padding: 0 3px;
            border-radius: 8px;
            background: var(--danger-text, #dc2626);
            color: #fff;
            font-size: 0.65em;
            line-height: 16px;
            text-align: center;
            font-weight: 700;
        }
        /* ★2026-09-16追加: お知らせのポップオーバー(ベル押下でその場に開く小さいウィンドウ)。
           外側(オーバーレイ)クリックで閉じる。 */
        .notification-panel-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2650;
            background: transparent;
        }
        .notification-panel {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 54px;
            right: 8px;
            z-index: 2700;
            width: min(320px, calc(100vw - 24px));
            max-height: min(420px, calc(100vh - 90px));
            background: var(--card-bg);
            border: 1px solid var(--item-border);
            border-radius: 14px;
            box-shadow: 0 8px 24px var(--card-shadow);
            overflow: hidden;
        }
        .notification-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid var(--item-border);
            font-weight: 700;
            color: var(--heading);
            flex-shrink: 0;
        }
        .notification-panel-close {
            background: none;
            border: none;
            color: var(--muted);
            font-size: 1.1em;
            line-height: 1;
            cursor: pointer;
            padding: 4px 6px;
        }
        .notification-panel-body {
            overflow-y: auto;
            padding: 4px 4px;
        }
        .notification-item {
            padding: 10px 8px;
            font-size: 0.85em;
            border-bottom: 1px solid var(--item-border);
            border-radius: 8px;
            transition: background-color 0.6s ease, outline-color 0.6s ease;
        }
        .notification-item:last-child { border-bottom: none; }
        .notification-item-clickable {
            cursor: pointer;
        }
        .notification-item-clickable:hover {
            background-color: var(--item-border);
        }
        .notification-highlight {
            background-color: rgba(79, 124, 255, 0.12);
            outline: 2px solid #4f7cff;
            outline-offset: -2px;
        }
        .my-inquiry-reply {
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px dashed var(--border);
        }
        .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;
        }
        /* ★2026-09-23(第2稿): 「もっと特別感・高級感を」という追加要望を受けて全面的に作り直し。
           1稿目は--btn-bg(アプリの通常のアクセントカラー)を薄くまとっただけで、結局ボタン等と
           同じ色味だったため「特別感がない」との指摘だった。今回は課金画面だけ、アプリのテーマ
           (ライト/ダーク/グレー×5アクセントカラー)から意図的に独立した「黒×ゴールド」の固定配色
           にして、他の画面と明確に切り離した。そのため、このカード内の文字色・入力欄・エラー表示は
           var(--muted)等のテーマ変数に頼らず、下記の --plan-* 変数で直接指定している
           (var(--muted)はライトテーマだと暗い色になり、常時ダーク背景のこのカードでは読みにくくなるため)。 */
        .plan-intro-card {
            --plan-gold: #d9b56a;
            --plan-gold-bright: #f4dc9c;
            --plan-gold-dim: #a9803f;
            --plan-cream: #f6efdd;
            --plan-cream-dim: rgba(246, 239, 221, 0.66);
            --plan-cream-faint: rgba(246, 239, 221, 0.42);
            position: relative;
            overflow: hidden;
            color: var(--plan-cream);
            background:
                radial-gradient(120% 100% at 100% 0%, rgba(217, 181, 106, 0.16), transparent 55%),
                linear-gradient(160deg, #14151d 0%, #1a1c26 50%, #221a15 100%);
            border: 1px solid rgba(217, 181, 106, 0.38);
            border-radius: 22px;
            padding: 38px 30px;
            box-shadow:
                0 20px 44px rgba(0, 0, 0, 0.38),
                inset 0 0 0 1px rgba(217, 181, 106, 0.06);
        }
        /* カード上端にうっすら光る金の一本線(高級ギフト箱の縁のような質感) */
        .plan-intro-card::before {
            content: "";
            position: absolute;
            top: 0; left: 10%; right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--plan-gold-bright), transparent);
            opacity: 0.85;
        }
        /* ゆっくり流れる光沢(シャイン)。控えめな1周ループで、動きが苦手な人には出さない */
        .plan-intro-card::after {
            content: "";
            position: absolute;
            top: -50%; left: -60%;
            width: 45%; height: 200%;
            background: linear-gradient(75deg, transparent, rgba(255, 255, 255, 0.07), transparent);
            transform: rotate(8deg);
            animation: planIntroShine 6s ease-in-out infinite;
            pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .plan-intro-card::after { animation: none; display: none; }
        }
        @keyframes planIntroShine {
            0%, 55% { left: -60%; }
            100% { left: 130%; }
        }
        .plan-intro-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(217, 181, 106, 0.12);
            border: 1px solid rgba(217, 181, 106, 0.5);
            color: var(--plan-gold-bright);
            font-size: 0.76em;
            font-weight: bold;
            letter-spacing: 0.08em;
            padding: 5px 14px;
            border-radius: 999px;
            margin-bottom: 18px;
        }
        .plan-intro-header {
            display: flex;
            align-items: baseline;
            gap: 12px;
            flex-wrap: wrap;
            position: relative;
        }
        .plan-intro-header h3 {
            color: var(--plan-cream);
            font-size: 1.75em;
            font-weight: 900;
            letter-spacing: 0.03em;
        }
        .plan-intro-lead {
            color: var(--plan-cream-dim);
            margin: 10px 0 0;
            line-height: 1.75;
        }
        .plan-intro-lead + .plan-intro-lead {
            margin-top: 10px;
        }
        .plan-intro-price-wrap {
            display: inline-flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
        }
        .plan-intro-price {
            font-weight: 900;
            font-size: 1.7em;
            letter-spacing: 0.01em;
            background: linear-gradient(120deg, var(--plan-gold-bright), var(--plan-gold) 55%, var(--plan-gold-dim));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }
        .plan-intro-price-strike {
            color: var(--plan-cream-faint);
            text-decoration: line-through;
            font-size: 0.8em;
        }
        .plan-intro-launch-badge {
            background: linear-gradient(120deg, var(--plan-gold-bright), var(--plan-gold));
            color: #211804;
            font-size: 0.7em;
            font-weight: bold;
            padding: 2px 10px;
            border-radius: 999px;
        }
        /* ★2026-09-23(第3稿): 表の前に「結局どう嬉しいのか」を平易な文章で説明するブロック */
        .plan-intro-benefits {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 24px;
        }
        .plan-intro-benefit {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 16px;
            background: rgba(217, 181, 106, 0.06);
            border: 1px solid rgba(217, 181, 106, 0.18);
            border-radius: 14px;
        }
        .plan-intro-benefit-icon {
            flex-shrink: 0;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(217, 181, 106, 0.16);
            color: var(--plan-gold-bright);
        }
        .plan-intro-benefit-title {
            color: var(--plan-cream);
            font-weight: bold;
            margin-bottom: 3px;
        }
        .plan-intro-benefit-desc {
            color: var(--plan-cream-dim);
            font-size: 0.88em;
            line-height: 1.7;
        }
        .plan-intro-compare-heading {
            color: var(--plan-cream-faint);
            font-size: 0.82em;
            font-weight: bold;
            letter-spacing: 0.05em;
            margin: 28px 0 8px;
        }
        .plan-intro-payment-note {
            text-align: center;
            margin-top: 14px;
            font-size: 0.76em;
            line-height: 1.6;
        }
        .plan-compare-table {
            margin-top: 0;
            border: 1px solid rgba(217, 181, 106, 0.28);
            border-radius: 16px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.015);
        }
        .plan-compare-row {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr;
            gap: 4px;
            padding: 11px 9px;
            border-bottom: 1px solid rgba(217, 181, 106, 0.16);
            font-size: 0.85em;
            align-items: center;
        }
        .plan-compare-row:last-child {
            border-bottom: none;
        }
        .plan-compare-head {
            font-weight: bold;
            color: var(--plan-cream);
            background: rgba(217, 181, 106, 0.10);
            font-size: 0.8em;
        }
        .plan-compare-cell {
            text-align: center;
            color: var(--plan-cream-dim);
            padding: 4px 2px;
            border-radius: 8px;
        }
        .plan-compare-feature-cell {
            text-align: left;
            color: var(--plan-cream-faint);
        }
        .plan-compare-plus {
            color: var(--plan-gold-bright);
            font-weight: bold;
            background: rgba(217, 181, 106, 0.10);
        }
        .plan-compare-head .plan-compare-plus {
            background: rgba(217, 181, 106, 0.22);
        }
        /* Math Plus列の各行に金のチェックを付け、見出し行だけは除外(プラン名なのでチェック不要) */
        .plan-compare-row:not(.plan-compare-head) .plan-compare-plus::before {
            content: "\2713  ";
            font-weight: 900;
        }
        .plan-intro-cta {
            display: block;
            width: 100%;
            box-sizing: border-box;
            margin-top: 24px;
            padding: 16px 20px;
            font-size: 1.08em;
            font-weight: 900;
            letter-spacing: 0.03em;
            border-radius: 14px;
            color: #241a06;
            background: linear-gradient(120deg, var(--plan-gold-bright), var(--plan-gold) 55%, var(--plan-gold-dim));
            box-shadow: 0 10px 26px rgba(217, 181, 106, 0.34);
        }
        .plan-intro-cta:hover {
            background: linear-gradient(120deg, var(--plan-gold), var(--plan-gold-bright) 55%, var(--plan-gold));
        }
        .plan-intro-cancel-note {
            text-align: center;
            color: var(--plan-cream-faint);
            font-size: 0.8em;
            margin-top: 10px;
        }
        .plan-intro-fine-print {
            color: var(--plan-cream-faint);
        }
        /* ★2026-09-23: 生年月日・保護者氏名の入力欄は別画面(mathPlusBirthDateScreen/
           mathPlusGuardianScreen)に分離したため、このカード内には入力欄が無くなった。
           エラーバナー(#mathPlusIntroBanner)の配色のみ、テーマ変数任せだと暗いカード上で
           読みにくくなるため専用に配色する。 */
        .plan-intro-card .auth-error {
            background: rgba(214, 92, 92, 0.14);
            border: 1px solid rgba(214, 92, 92, 0.4);
            color: #ffc7c2;
        }
        .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-16: 使い方を項目ごとの折りたたみ(details)に。項目が増えてもグループ見出し+detailsを足すだけ */
.help-group-title {
    color: var(--muted);
    font-size: 0.85em;
    font-weight: 600;
    margin: 22px 0 6px;
}
.help-item {
    border: 1px solid var(--item-border);
    border-radius: 10px;
    background: var(--item-bg);
    margin-bottom: 8px;
}
.help-item > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 36px 12px 14px;
    position: relative;
    color: var(--heading);
    font-weight: 600;
}
.help-item > summary::-webkit-details-marker { display: none; }
.help-item > summary::after {
    content: '›';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--muted);
    transition: transform 0.15s;
}
.help-item[open] > summary::after { transform: translateY(-50%) rotate(-90deg); }
.help-item-body { padding: 0 14px 12px; }
.help-lv-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 0.92em; }
.help-lv-table th, .help-lv-table td { border-top: 1px solid var(--divider); padding: 7px 6px; text-align: left; vertical-align: top; color: var(--text); }
.help-lv-table th { white-space: nowrap; width: 3.5em; font-weight: 600; }

/* ============================================================
   ★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-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.admin-user-result-row-clickable:hover {
    background-color: var(--item-border);
}
.admin-inquiry-reply-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-inquiry-reply-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.9em;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    resize: vertical;
}
.admin-inquiry-reply-form button {
    align-self: flex-start;
}
.admin-inquiry-reply-done {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.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);
}

/* ★2026-09-16追加: 管理者ダッシュボードの問題フィードバック一覧。
   一覧の見た目自体は.admin-inquiry-*を流用し、評価ラベルの色分けと
   絞り込みボタンの選択状態だけをここで追加する。 */
.admin-feedback-rating-good { color: #28a745; }
.admin-feedback-rating-bad { color: #d64545; }
/* ★2026-09-16追加: フィードバック一覧の題名から問題文そのものへ飛べるリンク */
.admin-feedback-problem-link {
    color: var(--btn-bg);
    text-decoration: underline;
    cursor: pointer;
}
.admin-feedback-problem-link:hover {
    opacity: 0.8;
}
.admin-user-search-row button.active {
    background: var(--btn-bg);
    color: var(--btn-text, #ffffff);
    border-color: var(--btn-bg);
}

/* ---- 2026-09-17追加: 写真読み込み問題の機械検算の表示 ---- */
.photo-verify-status {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9em;
    white-space: normal;
}
.photo-verify-pending { color: var(--muted); border: 1px dashed var(--muted2); }
.photo-verify-pass {
    display: inline-block;
    color: var(--success-text);
    border: 1px solid var(--success-text);
    font-weight: bold;
    padding: 2px 10px;
}
.photo-verify-fail { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-text); }
.photo-verify-fail .photo-verify-retry { margin-top: 8px; }
.photo-verify-note { margin-top: 6px; color: var(--muted); }
.photo-verify-spinner {
    display: inline-block; width: 0.9em; height: 0.9em; margin-right: 6px; vertical-align: -0.1em;
    border: 2px solid var(--muted2); border-top-color: transparent; border-radius: 50%;
    animation: photo-verify-spin 0.8s linear infinite;
}
@keyframes photo-verify-spin { to { transform: rotate(360deg); } }

.photo-verify-muted { color: var(--muted); font-size: 0.82em; padding: 2px 0; }

/* ============================================================
   ★2026-09-19追加: 過去問専用検索(Math Plus限定)
   既存の --item-bg / --item-border / --tag-bg などをそのまま使い、
   新しい配色は増やさない(4テーマ・ダークモードにそのまま追従させるため)。
   ============================================================ */
.past-exam-lead { color: var(--muted); margin-top: -4px; }

.past-exam-filter {
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 4px;
}

/* --- 画面A: 大学カード --- */
.past-exam-univ-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--item-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 12px;
    background: var(--item-bg);
    cursor: pointer;
}
.past-exam-univ-main { flex: 1; min-width: 0; }
.past-exam-univ-name { font-weight: 600; }
.past-exam-univ-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.85em;
}
.past-exam-solved-count { color: var(--success-text); }
.past-exam-arrow { color: var(--muted); flex-shrink: 0; }

/* --- 画面B: 理系/文系タブ --- */
.past-exam-tabs { display: flex; gap: 8px; margin: 12px 0 4px; }
.past-exam-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--item-border);
    border-radius: 8px;
    background: var(--item-bg);
    color: var(--text);
    cursor: pointer;
    font-size: 0.95em;
}
.past-exam-tab.active {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-text);
}

/* --- 画面B: 年度カード --- */
.past-exam-year-card {
    border: 1px solid var(--item-border);
    border-radius: 8px;
    margin-top: 12px;
    background: var(--item-bg);
    overflow: hidden;
}
.past-exam-year-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}
.past-exam-year-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.past-exam-year-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.past-exam-partial { color: var(--muted); font-size: 0.8em; }
.past-exam-status {
    font-size: 0.8em;
    color: var(--muted);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--tag-bg);
}
.past-exam-status.done { color: var(--success-text); }

.past-exam-year-body { padding: 0 16px 16px; }
.past-exam-problem-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    cursor: pointer;
}
.past-exam-problem-row.solved .past-exam-qnum { color: var(--success-text); }
.past-exam-qnum { font-weight: 600; min-width: 4em; }
.past-exam-topic { flex: 1; min-width: 0; color: var(--muted); font-size: 0.9em; }
.past-exam-year-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.past-exam-start-btn { flex: 1 1 200px; margin-top: 0; }
.past-exam-print-btn { flex: 0 0 auto; white-space: nowrap; }

/* ★2026-09-21追加: スマホで大問一覧が極端に読みづらくなる不具合の修正。
   .past-exam-topic が flex:1 + min-width:0 のため、難易度・文理共通バッジに幅を
   取られると1〜2文字ずつ縦に折り返されて表示されていた(iPhone実機で確認)。
   狭い画面では「第N問 + バッジ」を1行目、トピックを2行目の全幅に落とす。 */
@media (max-width: 600px) {
    .past-exam-problem-row {
        align-items: baseline;
        row-gap: 4px;
        padding: 12px 0;
    }
    .past-exam-qnum { min-width: 3.5em; }
    .past-exam-topic {
        order: 3;
        flex: 0 0 100%;
        min-width: 100%;
        line-height: 1.6;
    }
    .past-exam-year-actions > button { flex: 1 1 100%; }
}

/* --- サイドメニューの「Plus」バッジ --- */
.side-submenu-lock {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--tag-bg);
    color: var(--muted);
    font-size: 0.75em;
}
/* ============ 印刷(問題のみ・本番形式) 2026-09-19追加 ============
   仕様: [[project_print_feature_2026-09-19]]
   #printRoot は普段 display:none の非表示コンテナ。印刷時だけ @media print で
   それ以外の要素を全部隠し、printRoot だけを紙面として出す(既存画面の構造には手を入れない)。
   図の色は描画時に SVG 属性へ焼き込まれるため、この CSS だけではダークテーマの図を
   白背景向けに直せない。app.js の buildPrintSheet 実行中だけ figureForceLightTheme を
   true にしてライト固定で描画させ、念のためこの CSS でも svg の background を白へ
   二重に上書きしている。 */
/* ★2026-09-21改訂: #printRoot は「画面には見えないが、レイアウトはされている」状態で置く。
   display:none にすると、WebKit(iOS Safari)が一度もレイアウトしていない要素を印刷時に
   出し損ねて紙面が真っ白になることがある。画面外に固定配置して visibility:hidden に
   しておけば、ユーザーには一切見えないままレイアウトだけは行われるのでこれを回避できる。
   (当初は印刷直前に body.printing を付けて画面に実体化させたが、印刷ダイアログの裏に
    紙面が丸見えになって混乱を招いたため取りやめた) */
#printRoot {
    position: fixed;
    top: 0;
    left: -10000px;
    width: 190mm;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

@media print {
    @page { size: A4 portrait; margin: 16mm 14mm; }

    body > *:not(#printRoot) { display: none !important; }

    #printRoot {
        display: block !important;
        /* 画面用の「画面外に固定配置+visibility:hidden」を打ち消して通常の紙面に戻す */
        position: static;
        top: auto;
        left: auto;
        width: auto;
        visibility: visible;
        z-index: auto;
        background: #fff;
        color: #000;
        font-family: inherit;
    }
    #printRoot svg { background: #fff !important; }

    .print-sheet-header { margin-bottom: 16px; }
    .print-sheet-header h1 { font-size: 15px; margin: 0 0 4px; }
    .print-sheet-header .print-sheet-sub { font-size: 11px; color: #444; }

    /* 2026-09-19追記: 1つの大問(見出し+本文+図)が途中でページをまたがないようにする。
       大問と大問の間に強制改ページは入れないので(紙が無駄になる)、収まる分は同じページに
       詰めて流し込まれ、収まらない大問だけ丸ごと次ページへ送られる。ただし1大問が
       1ページに収まらないほど長い場合はbreak-insideだけでは防げず、そこはページをまたぐ。 */
    .print-sheet-problem {
        margin-bottom: 32px;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .print-sheet-qnum {
        font-weight: bold;
        font-size: 13px;
        margin-bottom: 8px;
        break-after: avoid;
    }
    /* 2026-09-19追記: 図が無い問題(renderProblemTextWithFiguresがcontainer.textContentに
       直接流し込む分岐)で改行が全部消えていた不具合の修正。データ側(problem_latex)には
       \n\nの段落区切りがちゃんと入っているのに、white-space:pre-wrapが無いため
       ブラウザがすべて1つのスペースに畳んでいた。画面表示の#selectedProblemと同じく
       コンテナ自身にwhite-space: pre-wrapを指定する(図ありの分岐は子divに
       インラインで既に指定済みなので影響なし)。 */
    .print-sheet-body {
        font-size: 12.5px;
        line-height: 1.75;
        white-space: pre-wrap;
        overflow-wrap: break-word;
    }
    .print-sheet-body > div { white-space: pre-wrap; overflow-wrap: break-word; }
    .print-sheet-body svg {
        max-width: 68mm;
        width: 100%;
        height: auto;
        display: block;
        margin: 10px auto;
    }
    /* 2026-09-19追記: 分数の分子・分母がズレる不具合の対策。
       KaTeXは「行送り(line-height)がnormalであること」を前提に、分数などの上下位置を
       負のmarginで計算している(KaTeX公式の既知事項)。.print-sheet-bodyに行間を広げるため
       line-height:1.75を指定しているせいで、この前提が崩れて分数の位置計算がズレる。
       印刷内の.katexだけline-height:normalに戻して計算のズレを解消する。
       あわせて、印刷では横スクロールが起きないのでoverflowもvisibleにしておく
       (画面用のoverflow-y:hiddenが分数の描画を切り詰めている可能性への保険)。 */
    #printRoot .katex,
    #printRoot .katex-display {
        overflow: visible;
    }
    #printRoot .katex { line-height: normal; }

    .katex-display { break-inside: avoid; }

    /* 2026-09-19追記: 出典を「ページ下部にfixedで固定・毎ページ繰り返す」方式から
       「大問ごとの末尾に差し込む」方式に変更(理由はapp.jsのbuildPrintCitation参照)。
       .print-sheet-problem自体がbreak-inside: avoidなので、この出典表示は必ず
       その大問と同じページに収まる。 */
    /* ★2026-09-21改訂: 出典は「大問ごと」ではなく「各ページの一番下」に出す。
       紙面全体を1つのtableに入れ、出典を<tfoot>に置くと、印刷時にブラウザが
       tfootを各ページの末尾で繰り返してくれる(position:fixedは以前これができず
       最後のページに1回しか出なかったためボツにした)。
       PDF(サーバー生成)側は、Playwrightのフッタが出典・サイトURL・ページ番号を
       描くので、紙面にはこのtfootを作らない。 */
    .print-sheet-table {
        width: 100%;
        border-collapse: collapse;
    }
    .print-sheet-table > tbody > tr > td,
    .print-sheet-table > tfoot > tr > td {
        padding: 0;
        border: 0;
        vertical-align: top;
    }
    .print-sheet-table > tfoot { display: table-footer-group; }

    .print-sheet-citation {
        margin-top: 10px;
        padding-top: 6px;
        border-top: 1px solid #ccc;
        text-align: center;
        font-size: 8.5px;
        color: #444;
    }
}

/* ============================================================
   ★2026-09-21追加: 学習ルート
   色は既存のテーマ変数だけで組み立てているので、4テーマ・ダークモードに自動で追従する。
   ============================================================ */

/* ---- 目指すレベル帯の表示バー(一覧画面の上部) ---- */
.lr-target-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--item-bg);
    border: 1px solid var(--item-border);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 14px 0 18px;
}
.lr-target-bar-label { color: var(--muted); font-size: 0.86em; }
.lr-target-bar-value { color: var(--text); font-weight: 600; }
.lr-target-bar-btn {
    background: none;
    border: none;
    color: var(--btn-bg);
    font-size: 0.86em;
    padding: 4px 2px;
    cursor: pointer;
    width: auto;
}
.lr-target-bar-btn:hover { text-decoration: underline; background: none; }

/* ---- 到達度 ---- */
.lr-progress-card {
    background: var(--answer-bg);
    border: 1px solid var(--answer-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.lr-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.lr-progress-percent { font-size: 1.9em; font-weight: 700; color: var(--heading); line-height: 1.1; }
.lr-progress-count { color: var(--muted); font-size: 0.85em; }
.lr-progress-bar {
    height: 8px;
    border-radius: 5px;
    background: var(--unit-bg);
    overflow: hidden;
    margin: 12px 0 8px;
}
.lr-progress-bar span { display: block; height: 100%; background: var(--btn-bg); border-radius: 5px; }
.lr-progress-note { color: var(--muted); font-size: 0.8em; line-height: 1.6; }

/* ---- 次にやること ---- */
.lr-next-card {
    background: var(--card-bg);
    border: 1px solid var(--btn-bg);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.lr-next-eyebrow { color: var(--btn-bg); font-size: 0.78em; font-weight: 600; letter-spacing: 0.04em; }
.lr-next-title { font-size: 1.2em; font-weight: 600; color: var(--heading); margin: 4px 0 2px; }
.lr-next-sub { color: var(--muted); font-size: 0.85em; line-height: 1.6; }
.lr-next-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.lr-next-actions button { flex: 1; min-width: 150px; }
.lr-count-select {
    width: auto;
    min-width: 92px;
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
}

/* ---- 単元詳細: いま取り組む技法 ---- */
.lr-current-card {
    background: var(--answer-bg);
    border: 1px solid var(--answer-border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
}
.lr-current-eyebrow {
    color: var(--btn-bg);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.lr-current-title { font-size: 1.24em; font-weight: 600; color: var(--heading); margin: 4px 0 10px; }
.lr-current-progress { color: var(--text); font-size: 0.9em; line-height: 1.7; }
.lr-current-note { color: var(--muted); font-size: 0.82em; line-height: 1.6; margin-top: 6px; }
.lr-current-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.lr-current-actions button { flex: 1; min-width: 160px; }

/* ---- 単元の一覧: まず教科(数学I〜C)を選ばせてから単元を出す ---- */
/* ★2026-09-23追加: 全単元をフラットに並べると見づらいというユーザー指摘への対応。
   「初学で学ぶ」画面(learnScreen)の教科選択と同じ二段階ナビゲーションに揃えた。 */
.lr-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}
/* ★2026-09-23: 最初は「初学で学ぶ」と同じ塗りつぶしボタンにしていたが、この画面の
   他のカード(lr-unit-row等)と並ぶと主張が強すぎるとの指摘で、同じ落ち着いたカード調に
   揃えた。<button>(選べる教科)と<div>(対象外の教科)の両方に使う。 */
.lr-subject-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    background: var(--item-bg);
    color: var(--text);
    border: 1px solid var(--item-border);
    border-radius: 10px;
    padding: 12px 10px;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;
}
.lr-subject-btn:hover { background: var(--item-hover); }
.lr-subject-btn.is-not-ready { opacity: 0.55; cursor: default; }
.lr-subject-name { font-size: 0.95em; font-weight: 600; color: var(--text); }
.lr-subject-sub { font-size: 0.72em; font-weight: normal; color: var(--muted); white-space: nowrap; }
.lr-subject-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 4px;
}
.lr-subject-head h3 { margin: 0; }
.lr-subject-back {
    background: none;
    color: var(--muted);
    padding: 4px 0;
    font-size: 0.85em;
    text-decoration: underline;
}
.lr-subject-back:hover { background: none; color: var(--text); }
.lr-unit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--item-bg);
    border: 1px solid var(--item-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 6px;
    box-sizing: border-box;
    color: var(--text);
    cursor: pointer;
}
.lr-unit-row:hover { background: var(--item-hover); }
.lr-unit-row.is-not-ready { opacity: 0.6; }
.lr-unit-name { font-size: 0.97em; color: var(--text); }
.lr-unit-sub { display: block; font-size: 0.76em; color: var(--muted); margin-top: 2px; }
/* 単元の行の右側に出す、その単元の進み具合 */
.lr-unit-meter { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lr-unit-bar {
    width: 64px;
    height: 6px;
    border-radius: 4px;
    background: var(--unit-bg);
    overflow: hidden;
}
.lr-unit-bar span { display: block; height: 100%; background: var(--btn-bg); border-radius: 4px; }
.lr-unit-percent { font-size: 0.78em; color: var(--muted); min-width: 2.6em; text-align: right; }
.lr-unit-percent.done { color: var(--btn-bg); font-weight: 600; }

/* 技法の行に添える小さな札(準備中・この目標では出番なし) */
.lr-tech-flag {
    background: var(--unit-bg);
    color: var(--unit-text);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7em;
    margin-left: 6px;
    white-space: nowrap;
}
.lr-tech-section-head {
    margin: 18px 0 6px;
    font-size: 0.8em;
    color: var(--muted);
}

/* ---- 単元詳細のマス ---- */
.lr-cell {
    border: 1px solid var(--item-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--item-bg);
}
.lr-cell.is-current { border-color: var(--btn-bg); background: var(--card-bg); }
.lr-cell.is-not-ready { opacity: 0.7; }
.lr-cell.is-optional { opacity: 0.8; }
.lr-cell-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lr-cell-title { font-weight: 600; color: var(--heading); }
.lr-cell-flag {
    background: var(--badge-bg);
    color: var(--badge-text);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.7em;
    font-weight: 600;
}
.lr-cell-flag.muted { background: var(--unit-bg); color: var(--unit-text); font-weight: 400; }
.lr-cell-body { color: var(--text); font-size: 0.86em; line-height: 1.7; margin-top: 6px; }
.lr-cell-note { color: var(--muted); font-size: 0.79em; line-height: 1.6; margin-top: 4px; }
.lr-cell-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.lr-cell-actions button { flex: 1; min-width: 150px; }

/* ---- マスの中の技法グループ ---- */
.lr-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--item-border);
    border-radius: 9px;
    padding: 9px 12px;
    margin-top: 6px;
    box-sizing: border-box;
    color: var(--text);
}
.lr-group-row.clickable { cursor: pointer; }
.lr-group-row.clickable:hover { background: var(--item-hover); }
.lr-group-row.is-current { border-color: var(--btn-bg); }
.lr-group-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    flex-shrink: 0;
    background: var(--unit-bg);
    color: var(--unit-text);
}
.lr-group-icon.done { background: var(--btn-bg); color: var(--btn-text); }
.lr-group-icon.current { background: var(--badge-bg); color: var(--badge-text); }
.lr-group-body { flex: 1; min-width: 0; }
.lr-group-name { display: block; font-size: 0.9em; color: var(--text); }
.lr-group-sub { display: block; font-size: 0.75em; color: var(--muted); margin-top: 2px; }

/* ---- 完走したときの案内・演習後の一言 ---- */
.lr-finish-card {
    background: var(--item-bg);
    border: 1px solid var(--item-border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}
.lr-banner {
    background: var(--answer-bg);
    border: 1px solid var(--answer-border);
    color: var(--text);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.92em;
    line-height: 1.6;
}

/* ---- 目指すレベル帯の選択モーダル ---- */
.lr-level-modal { max-width: 420px; text-align: left; }
.lr-level-option {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--item-bg);
    border: 1px solid var(--item-border);
    border-radius: 10px;
    padding: 13px 15px;
    margin-bottom: 9px;
    cursor: pointer;
    box-sizing: border-box;
    color: var(--text);
}
.lr-level-option:hover { background: var(--item-hover); }
.lr-level-option.selected { border-color: var(--btn-bg); background: var(--answer-bg); }
.lr-level-option-label { display: block; font-weight: 600; color: var(--heading); }
.lr-level-option-desc { display: block; color: var(--muted); font-size: 0.82em; margin-top: 3px; line-height: 1.5; }
/* ★2026-09-22: 無料プランでは選べない目標(共通テストレベルより上)。押すとMath Plusの紹介へ */
.lr-level-option.locked .lr-level-option-label { color: var(--muted); }

/* ★2026-09-22: 無料プランで目標が共通テストレベルに頭打ちされているときの案内 */
.lr-plan-note {
    margin: 8px 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--item-bg);
    color: var(--muted);
    font-size: 0.82em;
    line-height: 1.7;
}
.lr-plan-note-btn {
    display: block;
    width: auto;
    margin-top: 8px;
    padding: 7px 14px;
    font-size: 1em;
}