.toggle-block {
    margin-bottom: var(--space-6);
    position: relative;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    transition: border-color var(--duration-short) var(--ease);
    min-width: 50%;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    color: var(--color-on-surface);
}

.toggle-block:hover {
    border-color: var(--color-anchor);
}

.toggle-panel {
    display: none;
    padding: var(--space-4);
    padding-bottom: 64px; /* ボタン用の余白 */
    font-size: var(--fs-16);
    line-height: 1.5;
}

.toggle-panel.active {
    display: block;
}

/* コード表示用のパネルのみ pre-wrap を適用 */
/* ショートコード側で content | safe しているため、
   Markdownの変換結果（pタグやpreタグ）に合わせて調整 */
.toggle-panel:not(:has(.katex-wrapper)) {
    white-space: pre-wrap;
    font-family: 'Spline Sans Mono', monospace !important;
}

/* 数式（KaTeX）表示時のリセット（再強化） */
.toggle-panel .katex-wrapper,
.toggle-panel .katex-display,
.toggle-panel .katex {
    white-space: normal !important;
    font-family: KaTeX_Main, 'Times New Roman', serif !important;
}

.toggle-panel .katex-display {
    margin: 0 !important;
    padding: var(--space-2) 0 !important;
}

/* ボタンコンテナ（右下固定） */
.toggle-tabs {
    display: flex;
    column-gap: var(--space-2);
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 10;
}

/* ボタンデザイン */
.toggle-tab {
    display: block;
    background: var(--color-tab-bg);
    position: relative;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-12);
    color: var(--color-tab-text);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: 'Spline Sans Mono', monospace;
    transition: background-color var(--duration-short) var(--ease), color var(--duration-short) var(--ease);
}

/* extend hit area to 48dp without changing the look */
.toggle-tab::after {
    content: "";
    position: absolute;
    inset: -8px -4px;
}

.toggle-tab:hover {
    background-color: color-mix(in srgb, var(--color-tab-bg), var(--color-text) 12%);
    color: var(--color-on-surface);
}

.toggle-tab.active {
    background-color: var(--color-anchor);
    color: var(--color-on-anchor);
    border-color: var(--color-anchor);
}