/* ===== Design Tokens (ADS準拠) ===== */
:root {
    /* Font Scale */
    --font-scale: 1.00;

    /* Toolbar icon unified size (alias of 8px scale) */
    --toolbar-icon-size: var(--ds-space-300);

    
    /* Space tokens (8px scale) */
    --ds-space-0: 0px;
    --ds-space-025: 2px;
    --ds-space-050: 4px;
    --ds-space-075: 6px;
    --ds-space-100: 8px;
    --ds-space-150: 12px;
    --ds-space-200: 16px;
    --ds-space-250: 20px;
    --ds-space-300: 24px;
    --ds-space-400: 32px;
    --ds-space-500: 40px;
    --ds-space-600: 48px;
    --ds-space-700: 56px;
    --ds-space-800: 64px;
    
    /* Layout (8px multiples) */
    --toolbar-height: var(--ds-space-700);
    --toc-width: 256px; /* 32×8 */
    --info-width: 304px; /* 38×8 */
    --mobile-tabs-height: var(--ds-space-700);
    
    /* Core color tokens - Dark (デフォルト) */
    --ds-surface: #252525; /* 背景色 */
    --ds-surface-sunken: #1f1f1f;
    --ds-surface-raised: #2f2f2f;
    --ds-text: #ffffff; /* 文字色 */
    --ds-text-subtle: #9BA7B8;
    --ds-text-subtlest: #a8a8a8;
    --ds-border: #3a3a3a;
    --ds-text-inverse: #ffffff;

    /* Brand core tokens (updated to site palette) */
    --ds-brand-primary: #FE5D2C; /* テキスト強調色 */
    --ds-brand-primary-hover: #fe3c22; /* ライン強調色 */
    --ds-brand-contrast-text: #0A0A0A; /* オレンジ上の可読性を優先して黒 */

    /* Brand & status on dark */
    --ds-background-brand-bold: var(--ds-brand-primary);
    --ds-background-brand-bold-hovered: var(--ds-brand-primary-hover);
    --ds-background-success-bold: #22A06B;
    --ds-background-danger-bold: #E34935;
    
    /* Callout colors - Dark */
    --ds-background-note: #2b2b2b; /* 注釈の面 */
    --ds-background-note-bold: #78d3d6; /* 注釈等 */

    /* NPC link underline colors */
    --ds-npc-link-underline: #444;

    /* Overlay colors */
    --ds-overlay-light: rgb(255 255 255 / 5%);

    /* Icon colors */
    --ds-icon-fill: #ffffff;

    /* Shadows */
    --ds-shadow-raised: 0 1px 1px rgb(9 30 66 / 31%), 0 0 1px rgb(9 30 66 / 31%);
    --ds-shadow-overlay: 0 4px 8px rgb(9 30 66 / 31%), 0 0 1px rgb(9 30 66 / 31%);
    --ds-shadow-card: 0 1px 1px rgb(9 30 66 / 31%), 0 0 1px 0 rgb(9 30 66 / 31%);
    --ds-shadow-floating: 0 8px 16px -4px rgb(9 30 66 / 31%), 0 0 1px 0 rgb(9 30 66 / 31%);
    --ds-shadow-sticky: 0 2px 4px rgb(9 30 66 / 30%);
    
    /* Tooltip tokens */
    --ds-tooltip-surface: var(--ds-surface);
    --ds-tooltip-text: var(--ds-text);
    --ds-tooltip-border: var(--ds-border);
    --ds-tooltip-inverse-surface: var(--ds-text);
    --ds-tooltip-inverse-text: var(--ds-text-inverse);
    
    /* Additional colors for memo functionality */
    --ds-text-accent: var(--ds-brand-primary);
    --ds-text-danger: #E34935;
    --ds-background-hover: #333333;
    --ds-border-focused: var(--ds-brand-primary-hover); /* ライン強調色 */
    
    /* GM Note specific color for better distinction */
    --ds-text-gm-note: #8B9CB3;
    --ds-background-gm-note: var(--ds-surface-sunken);

    /* Brand subtle/background & overlay tokens (dark) */
    --ds-background-brand: var(--ds-brand-primary); /* ブランド色（金） */
    --ds-background-brand-bold-subtle: rgb(177 137 80 / 30%);
    --ds-overlay-backdrop: rgb(0 0 0 / 60%);

    /* Highlights (dark) */
    --ds-highlight: rgb(255 215 0 / 20%);
    --ds-highlight-weak: rgb(255 215 0 / 15%);

    /* 背景画像のトーン（ダークはやや強めに） */
    --app-bg-tint-amount: 97%;
    
    /* Heading overrides (dark) */
    --h1-bg-color: var(--ds-text);
    --h1-text-color: var(--ds-surface);

    /* Background image hooks (ADS準拠: 色はトークンでトーン制御) */
    --app-bg-image: none; /* 例: url('assets/bg-wide.jpg') */
    --app-bg-position: center top;
    --app-bg-size: cover; /* 横長画像想定 */
    --app-bg-repeat: no-repeat;
}

/* Light Theme */
[data-theme="light"] {
    /* Core color tokens - Light */
    --ds-surface: #FFF;
    --ds-surface-sunken: #E8EAED;
    --ds-surface-raised: #F1F2F4;
    --ds-text: #1D2125;
    --ds-text-subtle: #44546F;
    --ds-text-subtlest: #626F86;
    --ds-border: #DCDFE4;
    --ds-text-inverse: #FFF;

    /* Brand core tokens (light overrides) */
    --ds-brand-primary: #FE5D2C; /* テキスト強調色 */
    --ds-brand-primary-hover: #fe3c22; /* ライン強調色 */
    --ds-brand-contrast-text: #0A0A0A;

    /* Brand & status on light */
    --ds-background-brand-bold: var(--ds-brand-primary);
    --ds-background-brand-bold-hovered: var(--ds-brand-primary-hover);
    --ds-background-success-bold: #22A06B;
    --ds-background-danger-bold: #AC1010;
    
    /* Callout colors - Light */
    --ds-background-note: #F1F2F4;
    --ds-background-note-bold: #626F86;

    /* NPC link underline colors */
    --ds-npc-link-underline: #DDD;

    /* Overlay colors */
    --ds-overlay-light: rgb(0 0 0 / 5%);

    /* Icon colors */
    --ds-icon-fill: #1D2125;

    /* Shadows */
    --ds-shadow-raised: 0 1px 1px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
    --ds-shadow-overlay: 0 4px 8px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%);
    --ds-shadow-card: 0 1px 1px rgb(9 30 66 / 25%), 0 0 1px 0 rgb(9 30 66 / 31%);
    --ds-shadow-floating: 0 8px 16px -4px rgb(9 30 66 / 25%), 0 0 1px 0 rgb(9 30 66 / 31%);
    --ds-shadow-sticky: 0 2px 4px rgb(9 30 66 / 10%);
    
    /* Additional colors for memo functionality */
    --ds-text-accent: var(--ds-brand-primary);
    --ds-text-danger: #DE350B;
    --ds-background-hover: #F4F5F7;
    --ds-border-focused: var(--ds-brand-primary);
    
    /* GM Note specific color for better distinction */
    --ds-text-gm-note: #5A6C7D;
    --ds-background-gm-note: #E8EAED;

    /* Brand subtle/background & overlay tokens (light) */
    --ds-background-brand: var(--ds-brand-primary); /* 中間強度のブランド色 */
    --ds-background-brand-bold-subtle: rgb(177 137 80 / 25%);
    --ds-overlay-backdrop: rgb(0 0 0 / 50%);

    /* Highlights (light) */
    --ds-highlight: rgb(255 215 0 / 15%);
    --ds-highlight-weak: rgb(255 215 0 / 10%);

    /* 背景画像のトーン（ライトは薄めに） */
    --app-bg-tint-amount: 97%;
    
    /* Heading overrides (light) */
    --h1-bg-color: var(--ds-text);
    --h1-text-color: var(--ds-surface);
}

/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: calc(16px * var(--font-scale));
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
    line-height: 1.6;
    color: var(--ds-text);
    background: var(--ds-surface);
    overflow: hidden;
    height: 100vh;
    /* タッチデバイスでのオーバースクロールを防止 */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* ===== Ruby (ルビ) ===== */
/* 本文用フォントに明朝を使用しているため、ルビは可読性を優先してゴシック系にし、小さめに調整 */
.page-content ruby {
    ruby-position: over;
    ruby-align: center;
}

.page-content rt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 0.6em; /* ベースに追従。本文サイズ変更に連動 */
    line-height: 1.2;
    color: var(--ds-text-subtle);
}

.page-content rb {
    font-variant-east-asian: ruby;
}

/* ===== Toolbar ===== */
.toolbar {
    height: var(--toolbar-height);
    background: var(--ds-surface-sunken);
    border-bottom: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    padding: var(--ds-space-0) var(--ds-space-200);
    gap: var(--ds-space-300);
    z-index: 100;
}

/* 左端ボタン以外を右寄せするためのフレックススペーサ */
.toolbar .toolbar-spacer {
    flex: 1 1 auto;
}

/* Name compact select and input styles - 削除（.name-compact内で再定義） */

/* 統一の高さを定義 */
.toolbar button,
.toolbar input,
.toolbar select {
    height: var(--ds-space-500); /* 40px で統一 */
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
    border-radius: var(--ds-space-050);
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.toolbar button {
    padding: var(--ds-space-0) var(--ds-space-200);
    min-width: var(--ds-space-500); /* 正方形に近い形 */
    cursor: pointer;
}

.toolbar input {
    padding: 0 var(--ds-space-200);
    cursor: text;
}

.toolbar select {
    padding: 0 var(--ds-space-200);
    cursor: pointer;
}

/* Icon images inside toolbar buttons */
.toolbar .icon-img {
    width: var(--toolbar-icon-size);
    height: var(--toolbar-icon-size);
    display: block;
    pointer-events: none;
}

/* SVGスプライトアイコンのサイズ調整 */
.icon-img {
    width: 24px;
    height: 24px;
}

.memo-btn-icon .icon-img {
    width: 16px;
    height: 16px;
}

/* 角枠なしのアイコンボタン */
.toolbar .icon-btn {
    background: transparent;
    border: none;
    min-width: var(--ds-space-500);
    width: var(--ds-space-500);
    height: var(--ds-space-500);
    padding: 0;
    line-height: 0;
    position: relative;
    transition: all 0.2s ease;
}

.toolbar .icon-btn:hover {
    background: transparent;
}

.toolbar .icon-btn .icon-img {
    transition: transform 0.15s ease;
}

.toolbar .icon-btn:hover .icon-img {
    transform: scale(1.12);
}

/* 情報タブアイコンの3D回転アニメーション */
#toggle-info .icon-img {
    transition: transform 0.3s ease;
    transform-origin: center;
}

#toggle-info[aria-expanded="false"] .icon-img {
    transform: rotateY(180deg);
}

#toggle-info:hover .icon-img {
    transform: scale(1.12);
}

#toggle-info[aria-expanded="false"]:hover .icon-img {
    transform: rotateY(180deg) scale(1.12);
}

.toolbar .icon-btn:focus-visible {
    outline: 2px solid var(--ds-border-focused);
    outline-offset: 2px;
}

/* Font scale selector overlay */
.font-scale-control {
    position: relative;
}

.font-scale-control #font-scale {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.0001; /* 透明にしてクリック領域だけ提供 */
    cursor: pointer;
}

.font-scale-control:hover #font-scale-btn .icon-img {
    transform: scale(1.12);
}

/* カスタムメニュー（文字サイズ/名前置換 共通） */
.font-scale-menu {
    position: absolute;
    top: calc(100% + var(--ds-space-100));
    right: 0;
    width: max-content; /* コンテンツ幅に合わせる */
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    box-shadow: var(--ds-shadow-overlay);
    padding: var(--ds-space-050);
    z-index: 1000;
}

.font-scale-option {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* テキストを右寄せ */
    gap: var(--ds-space-100);
    padding: var(--ds-space-100) var(--ds-space-150);
    border-radius: var(--ds-space-050);
    color: var(--ds-text);
    cursor: pointer;
    text-align: right;
}

.font-scale-option:hover,
.font-scale-option[aria-selected="true"] {
    background: var(--ds-surface-raised);
}

/* 黒丸インジケータ（選択中） */
.font-scale-option[aria-selected="true"]::before {
    content: '';
    display: inline-block;
    width: var(--ds-space-100);
    height: var(--ds-space-100);
    border-radius: 50%;
    background: var(--ds-text);
    margin-right: var(--ds-space-100);
}

/* HOメニュー: プレースホルダー「名前置換」には黒丸を出さない */
.font-scale-option.ho-option[data-key=""][aria-selected="true"]::before {
    content: none;
    display: none;
}

.font-scale-control .dropdown-caret {
    font-size: 10px;
    position: absolute;
    right: var(--ds-space-100);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    color: var(--ds-icon-fill);
}

/* Page Tabs */
.page-tabs {
    display: flex;
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
    position: relative;
}

.page-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ds-border);
}

.page-tabs button {
    flex: 1;
    padding: var(--ds-space-200) var(--ds-space-300);
    background: transparent;
    border: none;
    color: var(--ds-text-subtle);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    transition: all 0.2s ease;
    border-radius: 0;
}

.page-tabs button[aria-selected="true"] {
    color: var(--ds-background-brand-bold);
    font-weight: 600;
}

.page-tabs button[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ds-background-brand-bold);
    z-index: 1;
}

.page-tabs button:hover:not([aria-selected="true"]) {
    color: var(--ds-text);
    background: var(--ds-surface-raised);
}

.page-tabs button:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: -2px;
    border-radius: var(--ds-space-050);
}

/* Page tabs icon styling - 他のツールバーアイコンと統一 */
.page-tabs .icon-img {
    width: var(--ds-space-200);
    height: var(--ds-space-200);
    transition: all 0.2s ease;
}

.page-tabs button[aria-selected="true"] .icon-img {
    fill: var(--ds-background-brand-bold);
}

.page-tabs button:hover:not([aria-selected="true"]) .icon-img {
    opacity: 1;
}

/* 情報タブのアイコンを180度回転 */
.page-tabs button[data-page="info"] .icon-img {
    transform: rotate(180deg);
}

/* ページタブのカスタムツールチップ - ::beforeを使用してアンダーバーと競合を避ける */
.page-tabs button::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + var(--ds-space-100));
    left: 50%;
    transform: translateX(-50%);
    background: var(--ds-text);
    color: var(--ds-surface);
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-space-025);
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: var(--ds-shadow-raised);
}

/* ダークテーマ時のタブツールチップは濃背景に淡文字を維持 */
[data-theme="dark"] .page-tabs button::before {
    background: var(--ds-text);
    color: var(--ds-surface);
}

.page-tabs button:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ツールバーアイコンのツールチップはJavaScriptで実装 */

/* ===== Toolbar Tooltip (data-tooltip) ===== */
.toolbar [data-tooltip] {
    position: relative;
}

.toolbar [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + var(--ds-space-100));
    left: 50%;
    transform: translateX(-50%);
    background: var(--ds-text);
    color: var(--ds-surface);
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-space-025);
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: var(--ds-shadow-raised);
}

.toolbar [data-tooltip]:hover::before,
.toolbar [data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* Dark theme: use dark surface with light text for stronger contrast */
[data-theme="dark"] .toolbar [data-tooltip]::before {
    background: var(--ds-text);
    color: var(--ds-surface);
    border: 1px solid var(--ds-border);
}

/* モバイル/タッチ環境ではツールチップ非表示（アイコンのツールチップをオフ） */
@media (hover: none), (pointer: coarse) {
    .page-tabs button::before,
    .toolbar [data-tooltip]::before {
        content: none !important;
    }
}

.toolbar button:hover {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    border-color: var(--ds-background-brand-bold);
}



.toolbar button:focus-visible,
.toolbar input:focus-visible,
.toolbar select:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: 2px;
}

/* search UI removed */

/* Name Replace */
.name-replace {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.name-replace label {
    font-size: 0.9rem;
    color: var(--ds-text-subtle);
}

.name-replace .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.name-compact {
    display: flex;
    align-items: center;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    padding: var(--ds-space-0) var(--ds-space-0) var(--ds-space-0) var(--ds-space-100);
    height: var(--ds-space-500);
    gap: 0;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.name-compact:focus-within {
    border-color: var(--ds-background-brand-bold);
}

.name-compact select {
    border: none;
    background: transparent;
    color: var(--ds-text);
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--ds-space-0) var(--ds-space-050);
    min-width: 80px;
    cursor: pointer;
    outline: none;
}

.name-compact select:focus {
    outline: none;
}

.name-compact select option {
    background: var(--ds-surface);
    color: var(--ds-text);
}

.name-compact input {
    border: none;
    background: transparent;
    color: var(--ds-text);
    font-size: 0.875rem;
    padding: var(--ds-space-0) var(--ds-space-050);
    min-width: 120px;
    outline: none;
}

.name-compact input::placeholder {
    color: var(--ds-text-subtlest);
}

.name-compact input:focus {
    outline: none;
}

/* 名前置換入力欄グループ */
.name-input-group {
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
}

/* 名前置換行の高さに親ボックスを合わせる（ホバー背景が途切れないように） */
.name-compact .name-input-group {
    height: 100%;
}

/* select の直後の input だけ余白をつける（ボタン直前の白帯を無くす） */
.name-compact select + .name-input-group {
    margin-left: var(--ds-space-100);
}

.name-compact .apply-btn {
    border: none;
    background: transparent;
    height: 100%;
    padding: var(--ds-space-0) var(--ds-space-100);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.2s ease;
    color: var(--ds-text-accent);
    min-width: var(--ds-space-400);
}

.name-compact .apply-btn:hover {
    background: var(--ds-background-hover);
}

.name-compact .apply-btn:focus-visible {
    outline: 2px solid var(--ds-border-focused);
    outline-offset: 2px;
}

.name-compact .apply-btn .icon-img {
    width: 16px;
    height: 16px;
}

/* 適用ボタンのCSSツールチップは親の overflow:hidden で切れるため無効化し、JSツールチップを使用する */
.name-compact .apply-btn[data-tooltip]::before {
    content: none;
}



/* Font Size - removed as it's now a button */

/* ===== 名前置換 展開時のトップバー挙動 ===== */
/* 記入欄展開時: 入力UIを80%幅に広げ、他アイコンは非表示 */
@media (width <= 979px) {
	.toolbar.name-replace-expanded > *:not(.toolbar-spacer):not(.name-replace) {
		display: none !important;
	}

	.toolbar.name-replace-expanded {
		justify-content: center;
	}

	.toolbar.name-replace-expanded .toolbar-spacer {
		display: none !important;
	}

	.toolbar.name-replace-expanded .name-replace {
		flex: 0 0 80vw;
		max-width: 80vw;
	}

	.toolbar.name-replace-expanded .name-compact {
		width: 100%;
	}

	.toolbar.name-replace-expanded .name-compact .name-input-group #ho-name {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

@media (width > 979px) {
	/* デスクトップでは従来表示を維持 */
	.toolbar.name-replace-expanded {
		justify-content: flex-start;
	}
	.toolbar.name-replace-expanded .toolbar-spacer {
		display: block !important;
	}
	.toolbar.name-replace-expanded > *:not(.toolbar-spacer):not(.name-replace) {
		display: initial !important;
	}
	.toolbar.name-replace-expanded .name-replace {
		flex: initial;
		max-width: none;
	}
}

/* ===== HO select custom overlay ===== */
.ho-select-control {
    position: relative;
    display: inline-block;
}

.ho-select-control .ho-select-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
}

/* 見た目は既存selectのまま。ホバーやフォーカスで色を変えない */
.toolbar .ho-select-overlay:hover,
.toolbar .ho-select-overlay:active {
    background: transparent !important;
    color: inherit !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.toolbar .ho-select-overlay:focus,
.toolbar .ho-select-overlay:focus-visible {
    outline: none !important;
}

/* Theme Toggle */
#theme-toggle .icon-light {
    display: none;
}

#theme-toggle .icon-dark {
    display: inline;
}

[data-theme="light"] #theme-toggle .icon-light {
    display: inline;
}

[data-theme="light"] #theme-toggle .icon-dark {
    display: none;
}

/* Let svg icons follow text color */

/* ===== Main Container ===== */
.main-container {
    display: flex;
    height: calc(100vh - var(--toolbar-height));
    position: relative;
}

/* ===== TOC Pane ===== */
.toc-pane {
    width: var(--toc-width);
    background: var(--ds-surface-sunken);
    border-right: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s;
}

.toc-pane[hidden],
.toc-pane.collapsed {
    margin-left: calc(-1 * var(--toc-width));
}

.toc-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-space-200);
}

.toc-content h2 {
    font-size: 1.2rem;
    margin-bottom: var(--ds-space-200);
    color: var(--ds-text);
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.toc-content h2:hover {
    opacity: 0.7;
}

/* マスタートグル（test1準拠） */
.toc-master-toggle {
    cursor: pointer;
    font-size: 1em;
    transition: transform 0.2s ease;
    margin-left: 8px;
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
}

.toc-master-toggle::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--ds-text);
    border-bottom: 1.5px solid var(--ds-text);
    transform: rotate(-45deg);
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px;
}

.toc-master-toggle.all-open {
    transform: rotate(90deg);
}

.toc-nav {
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.toc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-nav li {
    margin-bottom: var(--ds-space-050);
}

.toc-nav a {
    color: var(--ds-text-subtle);
    text-decoration: none;
    display: block;
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-space-050);
    transition: all 0.2s;
    font-size: 0.9em;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ネストされたリンクのスタイル調整 */
.nested-toc a {
    color: var(--ds-text-subtle);
    text-decoration: none;
    display: block;
    padding: 1px 0;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: normal;
    position: relative; /* チェック表示のために基準化 */
    padding-left: 1.2em; /* チェックマーク分の余白 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 目次：階層ごとの視覚差異（H2/H3） */
.toc-nav a.toc-scene-link {
    /* H2（シーン）: 強め、左寄せ */
    color: var(--ds-text);
    font-weight: normal;
    padding-left: var(--ds-space-150);
}

.toc-nav a.toc-investigation-link {
    /* H3（調査箇所）: サブ階層、右インデント */
    color: var(--ds-text-subtle);
    font-weight: 500;
    padding-left: var(--ds-space-500);
}

.nested-toc a:hover {
    color: var(--ds-background-brand-bold);
    background-color: var(--ds-overlay-light);
}

.nested-toc a.active {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
}

.toc-item a {
    color: var(--ds-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 1px 0;
    border-radius: 4px;
    /* 省略表記（ellipsis）を有効化 */
    min-width: 0; /* flex 子要素が縮められるように */
    max-width: 100%;
    flex: 1 1 0; /* コンテンツ幅に依存せず縮小可 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-item a:hover {
    color: var(--ds-background-brand-bold);
    background-color: var(--ds-overlay-light);
}

.toc-nav a:hover {
    background: var(--ds-surface-raised);
    color: var(--ds-text);
}

.toc-nav a.active {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
}



/* 目次の完了表示（チェックマーク） */
.nested-toc a.completed::before {
    content: '✓';
    color: var(--ds-text);
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0.05em;
}

/* ハイライト時のチェックマーク色 */
.nested-toc a.completed.active::before {
    color: var(--ds-text-inverse);
}

/* TOC groups (test1準拠) */
.toc-group {
    margin: 0;
}

.toc-item {
    display: flex;
    width: 100%;
    align-items: center;
    cursor: pointer;
    gap: 0.5em; /* トグルとテキストの間に少し余白 */
}



.toc-toggle {
    display: inline-block;
    width: 1em; /* アイコン幅を文字幅に合わせて余白削減 */
    text-align: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    font-size: 0.6em;
    cursor: pointer;
}

.nested-toc {
    list-style: none;
    padding-left: 20px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.nested-toc li {
    margin: 0;
}

.toc-group.open > .nested-toc {
    max-height: 500px;
}

.toc-group.open > .toc-item .toc-toggle {
    transform: rotate(90deg);
}



/* ===== Content Pane ===== */
.content-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 本文バック: サーフェスで薄くトーン → 画像 → サーフェス */
    background:
        linear-gradient(
            color-mix(in srgb, var(--ds-surface) var(--app-bg-tint-amount), transparent),
            color-mix(in srgb, var(--ds-surface) var(--app-bg-tint-amount), transparent)
        ),
        var(--app-bg-image),
        var(--ds-surface);
    background-position: var(--app-bg-position);
    background-size: var(--app-bg-size);
    background-repeat: var(--app-bg-repeat);
}

.page {
    flex: 1;
    overflow-y: auto;
    position: relative;
    scroll-behavior: smooth;
    /* タッチデバイスでのオーバースクロールを防止 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.page-content {
    padding: var(--ds-space-400);
    max-width: 800px;
    margin: 0 auto;
}

/* 本文タイポグラフィのみ明朝系を適用（システムUIはボディのゴシックを維持） */
.page-content p,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content li,
.page-content blockquote,
.page-content table,
.page-content th,
.page-content td,
.page-content dt,
.page-content dd,
.page-content figcaption,
.page-content a {
    font-family: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.page-content h1 {
    font-size: clamp(2.0rem, 4vw, 2rem);
    margin-top: var(--ds-space-800); /* 64px: 前のセクションとの大きな余白 */
    margin-bottom: var(--ds-space-100);
    color: var(--h1-text-color);
    background: var(--h1-bg-color);
    text-align: center;
    padding: 0.5em 0.8em;
    border-radius: var(--ds-space-050);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 最初のH1には上余白を付けない */
.page-content h1:first-child {
    margin-top: 0;
}

/* 章見出しのサブタイトル */
.page-content .chapter-subtitle {
    font-size: 0.9rem;
    color: var(--ds-text-subtle);
    text-align: center;
    margin-bottom: var(--ds-space-300);
    font-style: italic;
    font-weight: 400;
}

/* 章見出し内のサブタイトル（黒枠内） */
.page-content h1 .chapter-subtitle {
    font-size: 0.8rem;
    color: var(--h1-text-color);
    text-align: center;
    margin-top: var(--ds-space-100);
    margin-bottom: 0;
    font-style: normal;
    font-weight: 400;
    display: block;
}

.page-content h2 {
    font-size: 1.7rem;
    margin-top: var(--ds-space-600); /* 48px: トピック間の大きな余白 */
    margin-bottom: var(--ds-space-100); /* 8px: サブタイトルとの間隔を縮小 */
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-brand-primary-hover);
    padding-bottom: 0.3em;
    font-weight: 600;
    text-align: center;
}

/* シーン見出しのサブタイトル */
.page-content .scene-subtitle {
    font-size: 0.85rem;
    color: var(--ds-text-subtle);
    margin-bottom: var(--ds-space-250); /* 20px: 本文との間隔 */
    font-style: italic;
    font-weight: 400;
    text-align: center;
}

.page-content h3 {
    font-size: 1.3em;
    margin-top: var(--ds-space-500); /* 40px: サブトピック間の中程度の余白 */
    margin-bottom: var(--ds-space-200); /* 16px: 見出し後の適切な余白 */
    color: var(--ds-text);
    font-weight: 600;
}

/* 調査箇所見出し（H3）はscene-content内でも同じスタイルを適用 */
.page-content .scene-content h3 {
    font-size: 1.3em;
    margin-top: var(--ds-space-500); /* 40px: サブトピック間の中程度の余白 */
    margin-bottom: var(--ds-space-200); /* 16px: 見出し後の適切な余白 */
    color: var(--ds-text);
    font-weight: 600;
}

/* NPC link (test1 equivalent): dotted underline + brand color */
.npc-link {
    color: inherit; /* 文字色は変えない */
    text-decoration: underline dotted var(--ds-npc-link-underline) 2px;
    text-underline-offset: 3px;
    cursor: help;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

.npc-link:hover,
.npc-link:focus {
    color: inherit; /* 色変更なし */
    outline: none;
    text-decoration-color: var(--ds-npc-link-underline);
}

/* External link: ページのトーンに合わせた控えめなスタイル */
.page-content a[href^="http"] {
    color: var(--ds-text-subtle);
    text-decoration: underline;
    text-decoration-color: var(--ds-border);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
    position: relative;
}

.page-content a[href^="http"]:hover,
.page-content a[href^="http"]:focus {
    color: var(--ds-text);
    text-decoration-color: var(--ds-text);
    outline: none;
}

.page-content a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: var(--ds-space-025);
}

/* Scene link: ボタン風リンク */
.scene-link {
    display: inline-block;
    color: var(--ds-text);
    text-decoration: none;
    cursor: pointer;
    background-color: var(--ds-background-brand-bold-subtle);
    border: 1px solid var(--ds-background-brand);
    border-radius: var(--ds-space-100);
    padding: var(--ds-space-100) var(--ds-space-200);
    margin: var(--ds-space-050);
    font-weight: 500;
    transition: all 0.15s ease;
    box-shadow: var(--ds-shadow-raised);
}

.scene-link:hover,
.scene-link:focus {
    background-color: var(--ds-background-brand);
    border-color: var(--ds-background-brand-bold);
    color: var(--ds-brand-contrast-text);
    outline: none;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--ds-shadow-overlay);
}

/* Dialogue style: speaker name (smaller, subtle) - NPC名のみ */
.page-content .scene-content h4:not(.callout__title) {
    font-size: 0.8em;
    font-weight: 600;
    font-style: normal;
    margin-top: var(--ds-space-300); /* 24px: セリフ前の余白 */
    margin-bottom: var(--ds-space-050); /* 4px: セリフ後の最小余白 */
    line-height: 1.7;
    color: var(--ds-text-subtle);
    letter-spacing: 0.02em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

.page-content .scene-content h4.speech {
    font-size: 0.9em;
    font-weight: bold;
    font-style: normal;
    margin-top: var(--ds-space-025); /* 2px: 最小余白 */
    margin-bottom: var(--ds-space-200); /* 16px: セリフ後の適切な余白 */
    line-height: 1.7;
    color: var(--ds-text-subtle);
}

.page-content p {
    margin-bottom: var(--ds-space-200); /* 16px: 段落間の適切な余白 */
    line-height: 1.7;
    letter-spacing: 0.005em;
}

/* Scene */
.scene {
    position: relative;
    margin-bottom: var(--ds-space-800); /* 64px: シーン間の最大余白 */
    padding-bottom: var(--ds-space-400);
}

/* 折り畳み機能は廃止（矢印とdisplay切替を無効化） */

/* 完了（済）表示 */
.scene.completed .scene-content,
.scene.completed h2,
.scene.completed h3,
.scene.completed p,
.scene.completed .shared-info,
.scene.completed .branch,
.scene.completed table,
.scene.completed li {
    opacity: 0.55;
    transition: opacity 0.2s ease-in-out;
}

.scene.completed .complete-btn {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    border-color: var(--ds-background-brand-bold);
    opacity: 1;
}

.scene.completed .complete-btn:hover {
    background: var(--ds-background-brand-bold-hovered);
    border-color: var(--ds-background-brand-bold-hovered);
    transform: scale(1.05);
}

/* Shared Info */
.shared-info {
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-100);
    padding: var(--ds-space-200);
    margin: var(--ds-space-300) 0;
}

.shared-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-100);
}

.shared-info h3 {
    font-size: 1.3em;
    margin-bottom: var(--ds-space-100);
    color: var(--ds-background-brand-bold);
    font-weight: 600;
}

/* 共有情報のコンテンツ部分 - 最優先で適用 */
.page-content .shared-info p,
.shared-info .shared-info-header + p,
div.shared-info p,
.shared-info p:not(h4) {
    font-size: 0.8rem !important;
    line-height: 1.7 !important;
    font-family: inherit !important;
    padding-right: var(--ds-space-500);
}

/* 共有情報の本文をシステムフォントで統一（見出し/段落/リスト/表/リンクまで適用） */
.page-content .shared-info :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, table, th, td, dt, dd, figcaption, a) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

/* コールアウトの本文もシステムフォントで統一 */
.page-content .callout__content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, table, th, td, dt, dd, figcaption, a) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

/* 念のため階層内の全要素にも適用（コード系は除外） */
.page-content .shared-info :not(code):not(pre):not(kbd):not(samp) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}
.page-content .callout__content :not(code):not(pre):not(kbd):not(samp) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

/* グローバル指定（.page-content に依存しない） */
.shared-info :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, table, th, td, dt, dd, figcaption, a) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}
.callout__content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, table, th, td, dt, dd, figcaption, a) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}
.shared-info :not(code):not(pre):not(kbd):not(samp) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}
.callout__content :not(code):not(pre):not(kbd):not(samp) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif !important;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ds-space-500);
    height: var(--ds-space-500);
    background: transparent;
    color: var(--ds-text-subtle);
    border: none;
    border-radius: var(--ds-space-050);
    cursor: pointer;
    transition: color 0.2s, transform 0.1s ease-out;
}

.copy-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentcolor;
    fill: none;
    display: block;
}

/* アイコンの表示切り替え */
.copy-btn .icon-check { display: none; }
.copy-btn.copied .icon-copy { display: none; }
.copy-btn.copied .icon-check { display: block; }

.shared-info-header + p { margin-top: var(--ds-space-200); }

.copy-btn:hover { color: var(--ds-background-brand-bold); }
.copy-btn:active { transform: scale(0.98); }

/* Callout Components (Atlassian Design System準拠) */
.callout {
    border-radius: var(--ds-space-100);
    margin: var(--ds-space-300) 0;
    padding: var(--ds-space-200);
    box-shadow: var(--ds-shadow-raised);
    border-left: var(--ds-space-050) solid;
    transition: box-shadow 0.2s ease-in-out;
}

.callout__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-100);
    margin-bottom: var(--ds-space-150);
}

.callout__title {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0;
    color: var(--ds-text);
}

.callout__content {
    line-height: 1.7;
    padding-left: var(--ds-space-500);
}

.callout__content p {
    margin: var(--ds-space-100) 0;
    padding-right: var(--ds-space-500);
}

.callout__content p:first-child {
    margin-top: 0;
}

.callout__content p:last-child {
    margin-bottom: 0;
}

/* Callout variants - note type only */
.callout--note {
    background: var(--ds-background-note);
    border-left-color: var(--ds-background-brand-bold);
}

.callout--note .callout__title {
    color: var(--ds-background-note-bold);
}

/* Callout in completed scene */
.scene.completed .callout {
    opacity: 0.55;
    transition: opacity 0.2s ease-in-out;
}

.copy-btn.copied { color: var(--ds-background-success-bold); }

/* Branch */
.branch {
    background: var(--ds-surface-raised);
    border-radius: var(--ds-space-100);
    padding: var(--ds-space-200);
    margin: var(--ds-space-300) 0;
}

.branch p {
    margin-bottom: var(--ds-space-200);
    font-weight: bold;
}

.branch-btn {
    display: block;
    width: 100%;
    padding: var(--ds-space-150);
    margin-bottom: var(--ds-space-100);
    background: var(--ds-surface);
    border: 2px solid var(--ds-background-brand-bold);
    border-radius: var(--ds-space-050);
    color: var(--ds-background-brand-bold);
    cursor: pointer;
    transition: all 0.2s;
}

.branch-btn:hover {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
}

/* Complete Button */
.complete-btn {
    position: absolute;
    bottom: var(--ds-space-0);
    right: var(--ds-space-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-space-400);
    height: var(--ds-space-400);
    background: var(--ds-surface-raised);
    color: var(--ds-text-subtlest);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.complete-btn:hover {
    background: var(--ds-surface-raised);
    color: var(--ds-text);
    border-color: var(--ds-text-subtle);
    opacity: 1;
    transform: scale(1.05);
}

.complete-btn:active {
    transform: scale(0.95);
}

.scene.collapsed .complete-btn {
    display: none;
}



/* ===== Info Pane ===== */
.info-pane {
    width: var(--info-width);
    background: var(--ds-surface-sunken);
    border-left: 1px solid var(--ds-border);
    overflow-y: auto;
    transition: margin-right 0.3s;
}

.info-pane[hidden],
.info-pane.collapsed {
    margin-right: calc(-1 * var(--info-width));
}

.info-content {
    padding: var(--ds-space-200);
}

.info-content h2 {
    font-size: 1.2rem;
    margin-bottom: var(--ds-space-200);
    color: var(--ds-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.info-content h2:hover {
    opacity: 0.7;
}

/* 情報マスタートグル（目次と同じスタイル） */
.info-master-toggle {
    cursor: pointer;
    font-size: 1em;
    transition: transform 0.2s ease;
    margin-left: 8px;
    width: 10px;
    height: 10px;
    position: relative;
    display: inline-block;
}

.info-master-toggle::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--ds-text);
    border-bottom: 1.5px solid var(--ds-text);
    transform: rotate(-45deg);
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px;
}

.info-master-toggle.all-open {
    transform: rotate(90deg);
}

.info-section {
    /* セクション間は>=3単位（24→32に増） */
    margin-bottom: var(--ds-space-500);
}

.info-section summary {
    font-weight: bold;
    /* 内側余白=1.5単位、タップ領域は>=48dpを確保 */
    padding: var(--ds-space-150);
    min-height: var(--ds-space-600);
    display: flex; /* 既定マーカーが消えるため、擬似要素で代替 */
    align-items: center;
    list-style: none; /* 既定の三角を抑止 */
    background: var(--ds-surface-raised);
    border-radius: var(--ds-space-050);
    cursor: pointer;
    transition: all 0.2s;
}

/* カスタムトグル（▶ を回転させて ▼ に） */
.info-section summary::before {
    content: '▶';
    display: inline-block;
    width: 1em;
    margin-right: var(--ds-space-100);
    color: var(--ds-text-subtle);
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

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

/* ホバー時は文字色と同様に矢印も白へ */
.info-section summary:hover::before {
    color: var(--ds-text-inverse);
}

.info-section summary:hover {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
}

.info-section[open] summary {
    border-radius: var(--ds-space-050) var(--ds-space-050) 0 0;
}

/* NPC & Term Cards */
.npc-card,
.term-card,
.npc-info,
.term-info {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    padding: var(--ds-space-200);
    margin-top: var(--ds-space-100);
}

.npc-card h3,
.term-card h3,
.npc-info h3,
.term-info h3 {
    font-size: 1rem;
    margin-bottom: var(--ds-space-100);
    color: var(--ds-background-brand-bold);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-100);
}



/* キャラ駒コピーボタン */
.character-token-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ds-space-300);
    height: var(--ds-space-300);
    background: transparent;
    color: var(--ds-text-subtle);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.character-token-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentcolor;
    fill: none;
    display: block;
}

/* アイコンの表示切り替え */
.character-token-btn .icon-check { display: none; }

.character-token-btn:hover:not(:disabled) { 
    border-color: var(--ds-background-brand-bold-hovered);
}

.character-token-btn:active:not(:disabled) { 
    transform: scale(0.98); 
}

.character-token-btn:disabled {
    opacity: 0.7;
    pointer-events: none;
}

.character-token-btn:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: 2px;
    border-radius: var(--ds-space-050);
}



.npc-card dl,
.npc-info dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-100);
}

.npc-card dt,
.npc-info dt {
    font-weight: bold;
    color: var(--ds-text-subtle);
}

.npc-card dd,
.npc-info dd {
    color: var(--ds-text);
}

/* ===== ステータス棒グラフ（ADS準拠） ===== */
.status-chart-container {
    margin: var(--ds-space-150) 0;
}

.status-chart {
    display: grid;
    gap: var(--ds-space-100);
}

.status-row {
    display: grid;
    grid-template-columns: auto var(--ds-space-400) 1fr;
    align-items: center;
    gap: var(--ds-space-100);
}

.status-label {
    color: var(--ds-text);
    font-weight: 600;
}

.status-value {
    color: var(--ds-text-subtle);
    text-align: right;
}

.status-bar {
    position: relative;
    height: var(--ds-space-300);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-space-050);
    overflow: hidden;
}

/* 枠線をフィルの上に重ねる */
.status-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--ds-border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

/* 1刻みの目盛り線をフィルの上に重ねる */
.status-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--ds-border) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    background-repeat: repeat-x;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.status-bar__fill {
    position: absolute;
    inset: 0 0 0 0;
    width: var(--status-fill, 0%);
    background: var(--ds-background-brand-bold);
    transition: width 0.3s ease;
    z-index: 0; /* 枠線/目盛りより下に */
}

/* 6を超えた値は赤で強調 */
.status-value--over {
    color: var(--ds-text-danger);
    font-weight: 700;
}

/* 情報ペイン内/本文ページ内のテーブルコンテナ */
.npc-card .table-container,
.term-card .table-container,
.npc-info .table-container,
.term-info .table-container,
.page-content .table-container {
    overflow-x: auto;
    margin: var(--ds-space-100) 0;
    border-radius: var(--ds-space-050);
}

/* 情報ペイン内/本文ページ内のテーブル */
.npc-card table,
.term-card table,
.npc-info table,
.term-info table,
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0; /* コンテナ内なのでマージンを0に */
    background: var(--ds-surface);
}

/* 列数に応じたテーブル幅調整 */
/* 2列テーブルは最小幅を設けない（狭い情報ペインでの横スクロール抑制） */

.npc-card table.table-3cols,
.term-card table.table-3cols,
.npc-info table.table-3cols,
.term-info table.table-3cols,
.page-content table.table-3cols {
    min-width: 400px; /* 3列テーブルは中程度 */
}

.npc-card table.table-manycols,
.term-card table.table-manycols,
.npc-info table.table-manycols,
.term-info table.table-manycols,
.page-content table.table-manycols {
    min-width: 600px; /* 多列テーブルは広く */
}

.npc-card table th,
.term-card table th,
.npc-info table th,
.term-info table th,
.page-content table th {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    padding: var(--ds-space-075);
    text-align: left;
    font-weight: bold;
    color: var(--ds-text);
    white-space: nowrap; /* ヘッダーは改行しない */
}

.npc-card table td,
.term-card table td,
.npc-info table td,
.term-info table td {
    border: 1px solid var(--ds-border);
    padding: var(--ds-space-075); /* 情報ペイン内は少し小さく */
    color: var(--ds-text);
    overflow-wrap: break-word; /* 長いテキストは改行 */
}

.npc-card table tr:nth-child(even),
.term-card table tr:nth-child(even),
.npc-info table tr:nth-child(even),
.term-info table tr:nth-child(even) {
    background: var(--ds-surface);
}

.npc-card table tr:hover,
.term-card table tr:hover,
.npc-info table tr:hover,
.term-info table tr:hover {
    background: var(--ds-surface-raised);
}



/* ===== Tooltip ===== */
.tooltip {
    position: absolute;
    background: var(--ds-tooltip-surface);
    border: 1px solid var(--ds-tooltip-border);
    border-radius: var(--ds-space-050);
    padding: var(--ds-space-150);
    box-shadow: var(--ds-shadow-overlay);
    max-width: 300px;
    min-width: 280px;
    z-index: 1000;
    pointer-events: auto; /* スクロール可能に */
    max-height: 50vh;      /* 長文対策 */
    overflow-y: auto;
}

.tooltip.fixed {
    border-color: var(--ds-background-brand-bold);
    border-width: 2px;
}

/* モバイル版メモツールチップ用のスタイル調整 */
.tooltip.mobile-memo-tooltip-container {
    height: 60vh; /* 固定の高さを設定 */
    max-width: 90vw;
    min-width: 280px;
    overflow: hidden; /* ツールチップ自体のスクロールを無効化 */
}



/* ===== Mobile Tabs ===== */
.mobile-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-tabs-height);
    background: var(--ds-surface-sunken);
    border-top: 1px solid var(--ds-border);
    z-index: 100;
    /* 画面幅いっぱいに背景を広げる */
    width: 100vw;
    max-width: 100vw;
    /* タッチデバイスでのオーバースクロールを防止 */
    overscroll-behavior: none;
    touch-action: none;
}

.mobile-tabs button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-050);
    background: transparent;
    border: none;
    color: var(--ds-text-subtle);
    padding: var(--ds-space-100);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.mobile-tabs button[aria-selected="true"] {
    color: var(--ds-background-brand-bold);
}

.mobile-tabs button[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ds-background-brand-bold);
    z-index: 1;
}

.mobile-tabs button .icon-img {
    width: var(--ds-space-500);
    height: var(--ds-space-500);
    transition: all 0.2s ease;
}

.mobile-tabs button[aria-selected="true"] .icon-img {
    fill: var(--ds-background-brand-bold);
}

.mobile-tabs button span:last-child {
    font-size: 0.55rem;
    font-weight: 500;
}

/* search highlight removed */

/* ===== Handout ===== */
.handout {
    background: var(--ds-surface-raised);
    border-radius: var(--ds-space-100);
    padding: var(--ds-space-200);
    margin-bottom: var(--ds-space-200);
}

.handout h3 {
    color: var(--ds-background-brand-bold);
    margin-bottom: var(--ds-space-100);
}

/* ===== GM Note ===== */
.gm-note {
    /* まず不透明トークンを指定（フォールバック） */
    background: var(--ds-background-gm-note);
    /* 透け感を付与（デザイントークンベース） */
    background: color-mix(in srgb, var(--ds-background-gm-note) 80%, transparent);
    border-radius: var(--ds-space-050);
    padding: var(--ds-space-200) var(--ds-space-500);
    margin: var(--ds-space-300) 0;
    font-style: italic;
    color: var(--ds-text-gm-note);
    font-size: 0.85rem;
}

.gm-note p {
    margin-bottom: 0;
}

/* GM Note内のテーブルスタイル */
.gm-note table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ds-space-200) 0;
    font-style: normal;
    font-size: 0.9em;
    background: var(--ds-surface);
}

.gm-note table th {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    padding: var(--ds-space-100);
    text-align: left;
    font-weight: bold;
    color: var(--ds-text);
}

.gm-note table td {
    border: 1px solid var(--ds-border);
    padding: var(--ds-space-100);
    color: var(--ds-text);
}

.gm-note table tr:nth-child(even) {
    background: var(--ds-surface);
}

.gm-note table tr:hover {
    background: var(--ds-surface-raised);
}

/* 通常のテーブルスタイル */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--ds-space-200) 0;
    font-size: 0.9em;
    background: var(--ds-surface);
}

table th {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    padding: var(--ds-space-100);
    text-align: left;
    font-weight: bold;
    color: var(--ds-text);
}

table td {
    border: 1px solid var(--ds-border);
    padding: var(--ds-space-100);
    color: var(--ds-text);
}

table tr:nth-child(even) {
    background: var(--ds-surface);
}

table tr:hover {
    background: var(--ds-surface-raised);
}

/* ===== SANチェック ===== */

/* JavaScriptで動的にスタイル適用するため、CSS定義は不要 */

/* ===== Responsive Design ===== */
@media (width <= 979px) {
    /* スマホ版での固定表示を確実にする */
    .toolbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        /* 横スクロール禁止 */
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Show mobile tabs */
    .mobile-tabs {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        /* 画面幅いっぱいに広げる */
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* 目次タブのみ80%に制限 */
    .mobile-tabs[data-page="main"] {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        max-width: 80vw !important;
    }
    
    .mobile-tabs[aria-hidden="true"] {
        display: none !important;
    }
    
    /* Hide desktop page tabs on mobile */
    .desktop-only {
        display: none !important;
    }
    
    /* Adjust main container for mobile tabs */
    .main-container {
        height: calc(100vh - var(--toolbar-height) - var(--mobile-tabs-height));
        /* スマホ版での位置調整 */
        margin-top: var(--toolbar-height);
        margin-bottom: var(--mobile-tabs-height);
        /* 横スクロール禁止 */
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        /* タッチデバイスでのオーバースクロールを防止 */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Full width panes on mobile */
    .toc-pane,
    .info-pane {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 10;
    }
    
    .toc-pane {
        left: 0;
        width: 80%;
    }
    
    .info-pane {
        right: 0;
        width: 80%;
    }
    
    .toc-pane[hidden],
    .toc-pane.collapsed {
        margin-left: -100%;
    }
    
    .info-pane[hidden],
    .info-pane.collapsed {
        margin-right: -100%;
    }
    
    /* モバイル時のバックドロップ（暗転） */
    .mobile-backdrop {
        position: absolute;
        inset: 0;
        background: var(--ds-overlay-backdrop);
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 5;
        pointer-events: none; /* 背景クリック検知は main-container に委譲 */
    }
    .mobile-backdrop.active {
        opacity: 1;
    }
    
    /* Simplify toolbar on mobile */
    .toolbar {
        padding: var(--ds-space-0) var(--ds-space-100);
        gap: var(--ds-space-100);
    }
    
    .font-size {
        display: none;
    }
    
    /* モバイル時の名前置換入力欄制御 */
    .name-replace .name-input-group {
        display: none;
        width: 100%;
    }
    
    /* モバイル時のHO名入力欄の横幅を70%に縮小 */
    .name-compact .name-input-group #ho-name {
        width: 70%;
        flex: 0 0 70%;
        min-width: 0; /* 既定のmin-widthを上書きして縮小を許可 */
    }

    /* 適用ボタンを右寄せ */
    .name-compact .name-input-group .apply-btn {
        margin-left: auto;
    }

    /* 展開時は入力幅を可変にしつつボタンを右端へ */
    .toolbar.name-replace-expanded .name-compact .name-input-group #ho-name {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* モバイル時のペイン開閉ボタン制御 */
    .toolbar .hide-on-mobile {
        display: none;
    }
    
    .search-container {
        max-width: none;
    }
}

/* デスクトップ版でのトップバー位置調整 */
@media (width > 979px) {
    .toolbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    .main-container {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (width <= 600px) {
    .page-content {
        padding: var(--ds-space-200);
    }
    
    .page-content h1 {
        font-size: clamp(1rem, 3.5vw, 1.5rem);
        margin-top: var(--ds-space-500); /* 40px: モバイルでは少し小さめの余白 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* モバイルでも最初のH1には上余白を付けない */
    .page-content h1:first-child {
        margin-top: 0;
    }
    
    .page-content h2 {
        font-size: 1.25rem;
    }
    
    /* Mobile完了ボタン調整 */
    .complete-btn {
        bottom: var(--ds-space-0);
        right: var(--ds-space-0);
        width: var(--ds-space-300);
        height: var(--ds-space-300);
        font-size: 0.75rem;
    }
}

/* ===== Print Styles ===== */
@media print {
    .toolbar,
    .toc-pane,
    .info-pane,
    .mobile-tabs,

    .complete-btn,
    .copy-btn,
    .branch-btn {
        display: none !important;
    }
    
    .content-pane {
        width: 100%;
    }
    
    .scene.collapsed .scene-content {
        display: block;
    }
}

/* ===== Focus Visible ===== */
:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: 2px;
}

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: var(--ds-space-100);
    height: var(--ds-space-100);
}

::-webkit-scrollbar-track {
    background: var(--ds-surface-sunken);
}

::-webkit-scrollbar-thumb {
    background: var(--ds-text-subtlest);
    border-radius: var(--ds-space-050);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ds-text-subtle);
}

/* ===== Q&A Styling ===== */
.qa-pair {
    margin: var(--ds-space-300) 0; /* 24px: Q&A前後の余白 */
}

.qa-pair .question {
    color: var(--ds-background-brand-bold);
    font-weight: 600;
    margin-bottom: var(--ds-space-150); /* 12px: 質問後の余白 */
}

.qa-pair .answer {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ds-text-subtle);
    margin-left: var(--ds-space-150); /* 12px: 左インデント */
}

/* ===== Still Image Styling ===== */
.still-image {
    margin: var(--ds-space-300) 0;
    text-align: center;
    border-radius: var(--ds-space-100);
    overflow: hidden;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
}

.still-image img {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* ===== Image Gallery Styling ===== */
.image-gallery {
    margin: var(--ds-space-300) 0;
    text-align: center;
    border-radius: var(--ds-space-100);
    overflow: hidden;
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    position: relative;
}

.image-gallery-container {
    position: relative;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}

.image-gallery-slide {
    display: none;
    width: 100%;
    text-align: center;
}

.image-gallery-slide.active {
    display: block;
}

.image-gallery-slide img {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.image-gallery-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--ds-space-200);
    pointer-events: none;
    z-index: 10;
}

.gallery-nav-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: var(--ds-text-inverse);
    width: var(--ds-space-600);
    height: var(--ds-space-600);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

.gallery-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.gallery-nav-btn:focus-visible {
    outline: 2px solid var(--ds-border-focused);
    outline-offset: 2px;
}



/* レスポンシブ対応 */
@media (width <= 768px) {
    .still-image {
        margin: var(--ds-space-200) 0;
    }
    
    .image-gallery {
        margin: var(--ds-space-200) 0;
    }
    
    .gallery-nav-btn {
        width: var(--ds-space-500);
        height: var(--ds-space-500);
        font-size: 1.25rem;
    }
    
    .image-gallery-nav {
        padding: 0 var(--ds-space-100);
    }
    

}

/* ===== NPC・用語情報スタイル ===== */
.npc-info,
.term-info {
    margin-bottom: var(--ds-space-300);
    padding: var(--ds-space-200);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-100);
    position: relative;
}

.npc-info.collapsed .npc-content,
.term-info.collapsed .term-content {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.npc-info.collapsed .npc-content::after,
.term-info.collapsed .term-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--ds-surface));
    pointer-events: none;
}

.npc-info.expanded .npc-content,
.term-info.expanded .term-content {
    max-height: none;
    overflow: visible;
}

.npc-info h3,
.term-info h3 {
    margin: 0 0 var(--ds-space-150) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-border);
    padding-bottom: var(--ds-space-100);
}

/* ### カテゴリ（【人物】など）の下線を削除 */
.npc-content h3,
.term-content h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin: var(--ds-space-150) 0 var(--ds-space-100) 0;
}

.npc-content,
.term-content {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ds-text);
}

.npc-content p,
.term-content p {
    margin: var(--ds-space-100) 0;
}

.npc-content h4,
.term-content h4 {
    margin: var(--ds-space-150) 0 var(--ds-space-100) 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
}

.npc-content ul,
.term-content ul {
    margin: var(--ds-space-100) 0;
    padding-left: var(--ds-space-200);
}

.npc-content li,
.term-content li {
    margin: var(--ds-space-050) 0;
}

/* もっと見るボタン */
.show-more-btn {
    background: none;
    border: none;
    color: var(--ds-background-brand-bold);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: var(--ds-space-100) 0;
    margin-top: var(--ds-space-100);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.show-more-btn:hover {
    color: var(--ds-background-brand-bold-hovered);
}

.show-more-btn:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: 2px;
    border-radius: var(--ds-space-050);
}



/* ===== メモ機能 ===== */

/* 検索機能共通スタイル */
.memo-search,
.npc-search,
.term-search {
    position: relative;
    margin-bottom: var(--ds-space-150);
}

.memo-search input,
.npc-search input,
.term-search input {
    width: 100%;
    padding: var(--ds-space-100) var(--ds-space-200);
    padding-right: var(--ds-space-400);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.memo-search input:focus,
.npc-search input:focus,
.term-search input:focus {
    outline: none;
    border-color: var(--ds-background-brand-bold);
    box-shadow: 0 0 0 2px var(--ds-background-brand-bold-subtle);
}

.memo-search-clear,
.npc-search-clear,
.term-search-clear {
    position: absolute;
    right: var(--ds-space-100);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ds-text-subtle);
    cursor: pointer;
    padding: var(--ds-space-025);
    border-radius: var(--ds-space-025);
    transition: all 0.2s;
    display: none;
}

.memo-search-clear:hover,
.npc-search-clear:hover,
.term-search-clear:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
}





/* メモリスト */
.memo-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.memo-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    padding: var(--ds-space-200);
    transition: all 0.2s;
    margin: 0;
}

/* メモカード間の隙間（NPC・用語カードと同じ仕様） */
.memo-card:not(:first-child) {
    margin-top: var(--ds-space-100);
}

.memo-card:hover {
    border-color: var(--ds-border-focused);
    box-shadow: var(--ds-shadow-card);
}

.memo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--ds-space-100);
}

.memo-card-title {
    font-weight: bold;
    color: var(--ds-background-brand-bold);
    font-size: 1rem;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.memo-card-actions {
    display: flex;
    gap: var(--ds-space-050);
}

.memo-card-action {
    background: transparent;
    border: none;
    color: var(--ds-text-subtle);
    cursor: pointer;
    padding: var(--ds-space-025);
    border-radius: var(--ds-space-025);
    transition: all 0.2s;
}

.memo-card-action:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
}

.memo-card-action.delete:hover {
    background: var(--ds-text-danger);
    color: var(--ds-text-inverse);
}

.memo-card-content {
    color: var(--ds-text);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: var(--ds-space-100) 0;
    position: relative;
}

.memo-card.collapsed .memo-card-content {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.memo-card.collapsed .memo-card-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--ds-surface));
    pointer-events: none;
}

.memo-card.expanded .memo-card-content {
    max-height: none;
    overflow: visible;
}

.memo-content-text {
    margin-bottom: var(--ds-space-100);
}

/* メモ用のもっと見るボタン（NPC・用語と同じスタイル） */
.memo-card .show-more-btn {
    background: none;
    border: none;
    color: var(--ds-background-brand-bold);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: var(--ds-space-100) 0;
    margin-top: var(--ds-space-100);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.memo-card .show-more-btn:hover {
    color: var(--ds-background-brand-bold-hovered);
}

.memo-card .show-more-btn:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: 2px;
    border-radius: var(--ds-space-050);
}



.memo-scroll-btn {
    background: transparent;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    color: var(--ds-text-subtle);
    cursor: pointer;
    padding: var(--ds-space-050) var(--ds-space-100);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    margin-left: auto;
}

.memo-scroll-btn:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
    border-color: var(--ds-border-focused);
}

.memo-scroll-btn:focus-visible {
    outline: 2px solid var(--ds-background-brand-bold);
    outline-offset: 2px;
    border-radius: var(--ds-space-050);
}

.memo-card-actions-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-100);
}

.memo-card-meta {
    font-size: 0.75rem;
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-100);
    padding-top: var(--ds-space-100);
    border-top: 1px solid var(--ds-border);
}

.memo-empty,
.memo-search-empty,
.npc-search-empty,
.term-search-empty {
    text-align: center;
    padding: var(--ds-space-300);
    color: var(--ds-text-subtle);
}

.memo-empty p,
.memo-search-empty p,
.npc-search-empty p,
.term-search-empty p {
    margin: var(--ds-space-050) 0;
    font-size: 0.9rem;
}

/* メモボタン（選択時に表示） */
.memo-button {
    position: fixed;
    z-index: 1000;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    box-shadow: var(--ds-shadow-overlay);
    padding: var(--ds-space-100);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 見た目の円全体をクリック可能に */
    opacity: 0;
    visibility: hidden;

    /* アニメーションを無効にして点滅を防ぐ */
    transition: none;
}

.memo-button.show {
    opacity: 1;
    visibility: visible;
}

.memo-btn-icon {
    background: transparent;
    border: none;
    color: var(--ds-text);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memo-btn-icon:hover {
    background: var(--ds-background-hover);
    transform: scale(1.1);
}

/* コンテナにホバーした場合もアイコンがポップする */
.memo-button:hover .memo-btn-icon {
    background: var(--ds-background-hover);
    transform: scale(1.1);
}

/* メモモーダル */
.memo-modal {
    position: fixed;
    inset: 0;
    background: var(--ds-overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.memo-modal.show {
    opacity: 1;
    visibility: visible;
}

.memo-modal-content {
    background: var(--ds-surface);
    border-radius: var(--ds-space-050);
    box-shadow: var(--ds-shadow-floating);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.memo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ds-space-200);
    border-bottom: 1px solid var(--ds-border);
}

.memo-modal-header h3 {
    margin: 0;
    color: var(--ds-text);
    font-size: 1.1rem;
}

.memo-modal-close {
    background: transparent;
    border: none;
    color: var(--ds-text-subtle);
    cursor: pointer;
    padding: var(--ds-space-050);
    border-radius: var(--ds-space-025);
    transition: all 0.2s;
}

.memo-modal-close:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
}

.memo-modal-body {
    padding: var(--ds-space-200);
    flex: 1;
    overflow-y: auto;
}

.memo-selected-text {
    margin-bottom: var(--ds-space-200);
}

.memo-selected-text label {
    display: block;
    font-weight: bold;
    color: var(--ds-text);
    margin-bottom: var(--ds-space-100);
    font-size: 0.9rem;
}

.memo-selected-text-content {
    background: var(--ds-surface-sunken);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-025);
    padding: var(--ds-space-150);
    font-size: 0.9rem;
    color: var(--ds-text);
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
}

.memo-input {
    margin-bottom: var(--ds-space-200);
}

.memo-input label {
    display: block;
    font-weight: bold;
    color: var(--ds-text);
    margin-bottom: var(--ds-space-100);
    font-size: 0.9rem;
}

.memo-input textarea {
    width: 100%;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-025);
    padding: var(--ds-space-150);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ds-text);
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s;
}

.memo-input textarea:focus {
    outline: none;
    border-color: var(--ds-border-focused);
}

.memo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-100);
    padding: var(--ds-space-200);
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

.memo-btn {
    padding: var(--ds-space-100) var(--ds-space-200);
    border: none;
    border-radius: var(--ds-space-025);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.memo-btn-secondary {
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
}

.memo-btn-secondary:hover {
    background: var(--ds-background-hover);
}

.memo-btn-primary {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
}

.memo-btn-primary:hover {
    background: var(--ds-background-brand);
    color: var(--ds-text);
}

.memo-btn-primary:disabled {
    background: var(--ds-background-sunken);
    color: var(--ds-text-subtle);
    cursor: not-allowed;
}

/* レスポンシブ対応 */
@media (width <= 768px) {
    .memo-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .memo-modal-header,
    .memo-modal-body,
    .memo-modal-footer {
        padding: var(--ds-space-150);
    }
    
    .memo-modal-footer {
        flex-direction: column;
    }
    
    .memo-btn {
        width: 100%;
    }
}

/* ===== 確認ダイアログ ===== */
.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ds-overlay-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.confirm-modal.show {
    opacity: 1;
    visibility: visible;
}

.confirm-modal-content {
    background: var(--ds-surface);
    border-radius: var(--ds-space-100);
    box-shadow: var(--ds-shadow-floating);
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.confirm-modal.show .confirm-modal-content {
    transform: scale(1);
}

.confirm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-200);
    border-bottom: 1px solid var(--ds-border);
}

.confirm-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ds-text);
}

.confirm-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ds-space-050);
    border-radius: var(--ds-space-050);
    color: var(--ds-text-subtle);
    transition: all 0.2s ease;
}

.confirm-modal-close:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
}

.confirm-modal-body {
    padding: var(--ds-space-200);
    flex: 1;
}

.confirm-modal-body p {
    margin: 0 0 var(--ds-space-100) 0;
    color: var(--ds-text);
    line-height: 1.5;
}

.confirm-modal-description {
    color: var(--ds-text-subtle) !important;
    font-size: 0.9rem;
    margin-top: var(--ds-space-100) !important;
}

.confirm-modal-footer {
    display: flex;
    gap: var(--ds-space-100);
    padding: var(--ds-space-200);
    border-top: 1px solid var(--ds-border);
    justify-content: flex-end;
}

.confirm-btn {
    padding: var(--ds-space-100) var(--ds-space-200);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    background: var(--ds-surface);
    color: var(--ds-text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 80px;
}

.confirm-btn:hover {
    background: var(--ds-background-hover);
    border-color: var(--ds-border-focused);
}

.confirm-btn:focus {
    outline: 2px solid var(--ds-border-focused);
    outline-offset: 2px;
}

.confirm-btn-primary {
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    border-color: var(--ds-background-brand-bold);
}

.confirm-btn-primary:hover {
    background: var(--ds-background-brand-bold-hovered);
    border-color: var(--ds-background-brand-bold-hovered);
}

.confirm-btn-secondary {
    background: var(--ds-surface);
    color: var(--ds-text);
    border-color: var(--ds-border);
}

.confirm-btn-secondary:hover {
    background: var(--ds-background-hover);
    border-color: var(--ds-border-focused);
}

/* モバイル対応 */
@media (width <= 768px) {
    .confirm-modal-content {
        width: 95%;
        max-width: 350px;
    }
    
    .confirm-modal-header,
    .confirm-modal-body,
    .confirm-modal-footer {
        padding: var(--ds-space-150);
    }
    
    .confirm-modal-footer {
        flex-direction: column;
    }
    
    .confirm-btn {
        width: 100%;
    }
}

/* ===== インラインメモアイコン ===== */
.inline-memo-icon {
    position: absolute;
    bottom: var(--ds-space-0);
    right: calc(-1 * var(--ds-space-400));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-space-400);
    height: var(--ds-space-400);
    color: var(--ds-text-subtle);
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--ds-space-050);
    background: transparent;
    transform: translateY(calc(var(--ds-space-400) / 2 - 0.5em));
}

.inline-memo-icon:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* メモ番号表示 */
.inline-memo-icon .memo-number {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: var(--ds-background-brand-bold) !important;
    color: var(--ds-text-inverse) !important;
    font-size: 0.7rem !important;
    font-weight: bold !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border: 1px solid var(--ds-surface) !important;
    z-index: 10 !important;
    box-shadow: var(--ds-shadow-raised) !important;
}

/* インラインメモアイコンが右ペインと被らないように調整 */

/* モバイルではインラインメモアイコンを非表示にし、ハイライトをタップして開く */
@media (width <= 768px) {
    .inline-memo-icon {
        display: none;
    }
}

/* メモハイライトアニメーション */
@keyframes memo-highlight {
    0% {
        background-color: var(--ds-background-brand);
        transform: scale(1.02);
    }

    100% {
        background-color: var(--ds-surface);
        transform: scale(1);
    }
}

/* ===== 選択範囲ハイライト ===== */
.memo-text-highlight {
    background-color: var(--ds-highlight) !important;
    color: inherit !important;
    padding: 0;
    border-radius: 0;
    box-decoration-break: clone;
    display: inline;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* 空のハイライト要素を非表示 */
.memo-text-highlight:empty,
.memo-text-highlight:blank {
    display: none !important;
}

/* 疑似要素の二重塗りを廃止し、一重の帯に統一 */
/* 使用トークン: var(--ds-highlight) */

/* ===== モバイル用メモアイコン ===== */
.mobile-memo-icon {
    position: fixed;
    bottom: calc(var(--mobile-tabs-height) + var(--ds-space-200));
    right: var(--ds-space-200);
    width: calc(var(--ds-space-600) * 1.3);
    height: calc(var(--ds-space-600) * 1.3);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ds-shadow-floating);
    z-index: 1000;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
}

.mobile-memo-icon svg {
    width: calc(24px * 1.3);
    height: calc(24px * 1.3);
}

.mobile-memo-icon:hover,
.mobile-memo-icon:focus {
    background: var(--ds-surface-raised);
    border-color: var(--ds-border-focused);
    transform: scale(1.05);
    box-shadow: var(--ds-shadow-overlay);
}

.mobile-memo-icon:active {
    transform: scale(0.95);
}

/* モバイル版のみ表示 */
@media (width > 768px) {
    .mobile-memo-icon {
        display: none;
    }
}

/* モバイル版で表示 */
@media (width <= 768px) {
    .mobile-memo-icon {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}

/* モバイル版でメモがある場合のバッジ表示 */
.mobile-memo-icon.has-memos::after {
    content: attr(data-memo-count);
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    font-size: calc(0.75rem * 1.1);
    font-weight: bold;
    width: calc(18px * 1.2);
    height: calc(18px * 1.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--ds-surface);
    box-shadow: var(--ds-shadow-raised);
    padding: 0;
}

/* ===== モバイル用メモツールチップ ===== */
.mobile-memo-tooltip {
    display: flex;
    flex-direction: column;
    height: 100%; /* 親要素（60vh）に合わせる */
    overflow: hidden; /* ツールチップ自体のスクロールを無効化 */
}

.mobile-memo-search {
    position: sticky;
    top: 0;
    background: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
    padding: var(--ds-space-200);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.mobile-memo-search-input {
    flex: 1;
    padding: var(--ds-space-100) var(--ds-space-150);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-050);
    background: var(--ds-surface);
    color: var(--ds-text);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.mobile-memo-search-input:focus {
    border-color: var(--ds-border-focused);
}

.mobile-memo-search-clear {
    display: none;
    background: none;
    border: none;
    color: var(--ds-text-subtle);
    cursor: pointer;
    padding: var(--ds-space-050);
    border-radius: var(--ds-space-050);
    transition: all 0.2s ease;
}

.mobile-memo-search-clear:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
}

.mobile-memo-search-clear[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-memo-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ds-space-200);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
}

/* モバイルツールチップ内のメモカードスタイル調整 */
.mobile-memo-list .memo-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-space-100);
    padding: var(--ds-space-200);
    box-shadow: var(--ds-shadow-card);
    width: 100%; /* 親要素の幅に合わせる */
    max-width: 100%; /* 最大幅を制限 */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

.mobile-memo-list .memo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--ds-space-150);
}

.mobile-memo-list .memo-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ds-text);
    margin: 0;
    flex: 1;
    margin-right: var(--ds-space-100);
}

.mobile-memo-list .memo-card-content {
    margin-bottom: var(--ds-space-150);
}

/* モバイル版メモカードの折りたたみスタイル */
.mobile-memo-list .memo-card.collapsed .memo-card-content {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.mobile-memo-list .memo-card.collapsed .memo-card-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--ds-surface));
    pointer-events: none;
}

.mobile-memo-list .memo-card.expanded .memo-card-content {
    max-height: none;
    overflow: visible;
}

.mobile-memo-list .memo-content-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ds-text);
    word-wrap: break-word; /* 長い単語を折り返す */
    overflow-wrap: break-word; /* モダンブラウザ対応 */
    white-space: pre-wrap; /* 改行を保持しつつ折り返し */
}

.mobile-memo-list .memo-card-actions-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-100);
}

.mobile-memo-list .show-more-btn {
    background: none;
    border: none;
    color: var(--ds-text-accent);
    font-size: 0.75rem;
    cursor: pointer;
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-space-050);
    transition: background-color 0.2s ease;
}

.mobile-memo-list .show-more-btn:hover {
    background: var(--ds-background-hover);
}

.mobile-memo-list .memo-scroll-btn {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-subtle);
    font-size: 0.75rem;
    cursor: pointer;
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-space-050);
    transition: all 0.2s ease;
}

.mobile-memo-list .memo-scroll-btn:hover {
    background: var(--ds-background-hover);
    color: var(--ds-text);
}

/* モバイルツールチップ - メモがない場合の表示 */
.mobile-memo-empty {
    text-align: center;
    padding: var(--ds-space-500) var(--ds-space-300);
    color: var(--ds-text-subtle);
}

.mobile-memo-empty p {
    margin: 0 0 var(--ds-space-100) 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.mobile-memo-empty p:first-child {
    font-weight: 600;
    color: var(--ds-text);
}

.mobile-memo-empty p:last-child {
    margin-bottom: 0;
}