/* app.css */

body {
    font-family: "Biz UDPGothic", "Noto Sans JP", sans-serif;
}

/* プルトゥリフレッシュ無効化 */
body, html {
    overscroll-behavior-y: contain;
}

/* Vue.js クローク */
[v-cloak] {
    display: none;
}

/* ===========================
   共通コンポーネントスタイル
   =========================== */

/* ヘッダー */
.app-header {
    background-color: var(--theme-bg-primary, white);
    box-shadow: 0 1px 3px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ベータバッジ */
.beta-badge {
    display: inline-block;
    background: var(--theme-beta-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: var(--theme-btn-primary-text, #ffffff);
    font-size: 0.625rem;
    font-weight: bold;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px var(--theme-beta-shadow, rgba(102, 126, 234, 0.3));
}

@media (max-width: 640px) {
    .beta-badge {
        font-size: 0.5625rem;
        padding: 0.125rem 0.3rem;
    }
}

/* ドロップダウンメニュー（シンプル実装） */
.dropdown {
    position: relative;
}

.dropdown-btn {
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    background-color: transparent;
    color: var(--theme-text-secondary, #6b7280);
    border-radius: 0.375rem;
    font-size: 1.5rem;
    line-height: 1;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.dropdown-btn:hover {
    background-color: var(--theme-bg-tertiary, #f3f4f6);
    color: var(--theme-text-primary, #374151);
}

.dropdown-btn:active {
    background-color: var(--theme-border-hover, #e5e7eb);
}

/* 背景オーバーレイ */
.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 40;
}

/* ドロップダウンメニュー本体 */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    width: 200px;
    background-color: var(--theme-bg-primary, white);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1)), 0 4px 6px -2px var(--theme-shadow, rgba(0, 0, 0, 0.05));
    z-index: 50;
    overflow: hidden;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 1rem;
    color: var(--theme-text-primary, #374151);
    background-color: var(--theme-bg-primary, white);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: var(--theme-bg-tertiary, #f3f4f6);
}

.dropdown-item:active {
    background-color: var(--theme-border-hover, #e5e7eb);
}

.dropdown-item i {
    width: 1.25rem;
    color: var(--theme-brand-primary, #2563eb);
}

/* ユーザーメニュー */
.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--theme-bg-primary, white);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #374151);
}

.user-menu-btn:hover {
    background-color: var(--theme-bg-secondary, #f9fafb);
    border-color: var(--theme-border-hover, #9ca3af);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .user-name {
        display: none;
    }

    .user-menu-btn {
        border: none;
        background-color: transparent;
        padding: 0.25rem;
    }

    .user-menu-btn:hover {
        background-color: transparent;
        border-color: transparent;
    }

    .user-menu-btn .fa-chevron-down {
        display: none;
    }

    .login-btn {
        display: none;
    }
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    width: 250px;
    background-color: var(--theme-bg-primary, white);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1)), 0 4px 6px -2px var(--theme-shadow, rgba(0, 0, 0, 0.05));
    z-index: 50;
    overflow: hidden;
}

.user-info {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
    background-color: var(--theme-bg-secondary, #f9fafb);
}

.user-email {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-plan-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--theme-bg-tertiary, #f3f4f6);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.25rem;
    color: var(--theme-brand-primary, #1e40af);
}

.user-plan-badge i.fa-crown {
    color: var(--theme-warning, #f59e0b);
}

.user-plan-badge i.fa-user {
    color: var(--theme-text-secondary, #6b7280);
}

.login-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--theme-btn-primary-bg, #2563eb);
    color: var(--theme-btn-primary-text, white);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.login-btn:hover {
    background-color: var(--theme-btn-primary-hover, #1d4ed8);
}

.login-btn:active {
    background-color: var(--theme-btn-primary-hover, #1e40af);
}

/* 単語カード */
.word-card {
    background-color: var(--theme-bg-primary, white);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
    padding: 1.5rem;
}

@media (max-width: 640px) {
    .word-card {
        padding: 1rem;
    }
}

@media (max-width: 375px) {
    .word-card {
        padding: 0.75rem;
    }
}

/* 単語表示 */
.word-display {
    text-align: center;
    margin-bottom: 1.5rem;
}

.word-title {
    flex: 1;
    text-align: center;
    font-size: 2.75rem;
    font-weight: bold;
    color: var(--theme-text-primary, #1f2937);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 640px) {
    .word-title {
        font-size: 2rem;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .word-title {
        font-size: 2.25rem;
    }
}

/* CEFRレベルバッジ */
.cefr-badge {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid;
}

/* レベルバッジの色設定（CEFR等） */
.difficulty-A {
    background-color: var(--theme-success-bg, #dcfce7);
    color: var(--theme-success-text, #166534);
    border-color: var(--theme-success-border, #4ade80);
}

.difficulty-B {
    background-color: var(--theme-warning-bg, #fef3c7);
    color: var(--theme-warning-text, #92400e);
    border-color: var(--theme-warning-border, #fbbf24);
}

.difficulty-C {
    background-color: var(--theme-error-bg, #fecaca);
    color: var(--theme-error-text, #991b1b);
    border-color: var(--theme-error-border, #f87171);
}

@media (max-width: 640px) {
    .cefr-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
}

/* 意味の前に表示する品詞バッジ（インライン） */
.pos-badge-inline {
    display: inline-block;
    background-color: var(--theme-info, #3b82f6);
    color: var(--theme-btn-primary-text, #ffffff);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* 複数品詞グループの間隔 */
.pos-group {
    display: inline-block;
    margin-right: 1rem;
}

.pos-group:last-child {
    margin-right: 0;
}

@media (max-width: 640px) {
    .pos-badge-inline {
        font-size: 0.75rem;
        padding: 0 0.4rem;
        margin-right: 0.375rem;
    }

    .pos-group {
        margin-right: 0.75rem;
    }
}

/* 発音ボタン */
.pronunciation-btn {
    padding: 0;
    background-color: var(--theme-success, #10b981);
    color: var(--theme-btn-primary-text, #ffffff);
    border-radius: 9999px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px -1px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pronunciation-btn:hover {
    background-color: var(--theme-success-hover, #059669);
    box-shadow: 0 4px 6px -1px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
}

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

/* ステータストグルボタン */
.status-toggle-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 9999px;
    background: var(--theme-bg-tertiary, #f3f4f6);
    color: var(--theme-text-secondary, #9ca3af);
    border: 2px solid var(--theme-border, #e5e7eb);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.status-toggle-btn:hover {
    background: var(--theme-border-hover, #e5e7eb);
    transform: scale(1.05);
}

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

/* 重要ボタン：アクティブ時 */
.status-toggle-btn.status-active .fa-star {
    color: var(--theme-warning, #fbbf24);
}

.status-toggle-btn.status-active:has(.fa-star) {
    background: var(--theme-bg-secondary, #fef3c7);
    border-color: var(--theme-warning, #fbbf24);
    box-shadow: 0 2px 8px var(--theme-shadow-medium, rgba(251, 191, 36, 0.3));
}

/* 習得済みボタン：アクティブ時 */
.status-toggle-btn.status-active .fa-check-circle {
    color: var(--theme-success, #10b981);
}

.status-toggle-btn.status-active:has(.fa-check-circle) {
    background: var(--theme-bg-secondary, #d1fae5);
    border-color: var(--theme-success, #10b981);
    box-shadow: 0 2px 8px var(--theme-shadow-medium, rgba(16, 185, 129, 0.3));
}

/* 単語一覧用の小さいトグルボタン */
.status-toggle-btn-small {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 9999px;
    background: var(--theme-bg-tertiary, #f3f4f6);
    color: var(--theme-text-secondary, #9ca3af);
    border: 2px solid var(--theme-border, #e5e7eb);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.status-toggle-btn-small:hover {
    background: var(--theme-border-hover, #e5e7eb);
    transform: scale(1.05);
}

.status-toggle-btn-small:active {
    transform: scale(0.95);
}

/* 重要ボタン：アクティブ時 */
.status-toggle-btn-small.status-active .fa-star {
    color: var(--theme-warning, #fbbf24);
}

.status-toggle-btn-small.status-active:has(.fa-star) {
    background: var(--theme-bg-secondary, #fef3c7);
    border-color: var(--theme-warning, #fbbf24);
    box-shadow: 0 2px 6px var(--theme-shadow-medium, rgba(251, 191, 36, 0.3));
}

/* 習得済みボタン：アクティブ時 */
.status-toggle-btn-small.status-active .fa-check-circle {
    color: var(--theme-success, #10b981);
}

.status-toggle-btn-small.status-active:has(.fa-check-circle) {
    background: var(--theme-bg-secondary, #d1fae5);
    border-color: var(--theme-success, #10b981);
    box-shadow: 0 2px 6px var(--theme-shadow-medium, rgba(16, 185, 129, 0.3));
}

@media (max-width: 640px) {
    .pronunciation-btn {
        width: 36px;
        height: 36px;
    }

    .status-toggle-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* 単語ステータスドロップダウン */

/* ステータスバッジ */
/* 単語表示部分のステータスアイコン（小さめ） */
/* ステータス変更アクションボタン */
.status-action-btn {
    flex: 1;
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 2px solid;
    font-size: 0.875rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-center: center;
    cursor: pointer;
}

.status-action-important {
    background-color: var(--theme-bg-secondary, #fffbeb);
    border-color: var(--theme-warning, #fbbf24);
    color: var(--theme-text-primary, #92400e);
}

.status-action-important:hover {
    background-color: var(--theme-bg-tertiary, #fef3c7);
}

.status-action-important.status-active {
    background-color: var(--theme-warning, #fbbf24);
    color: var(--theme-btn-primary-text, #ffffff);
    font-weight: 700;
}

.status-action-mastered {
    background-color: var(--theme-bg-secondary, #ecfdf5);
    border-color: var(--theme-success, #10b981);
    color: var(--theme-text-primary, #065f46);
}

.status-action-mastered:hover {
    background-color: var(--theme-bg-tertiary, #d1fae5);
}

.status-action-mastered.status-active {
    background-color: var(--theme-success, #10b981);
    color: var(--theme-btn-primary-text, #ffffff);
    font-weight: 700;
}

/* スタート画面のETYMOLOGYカード */
.etymology-demo-card {
    background-color: var(--theme-bg-primary, white);
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
    max-width: 500px;
    margin: 0 auto;
}

/* 語源パーツ */
.etymology-parts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.etymology-part {
    cursor: pointer;
    transition: all 0.2s;
}

.etymology-part:hover {
    transform: scale(1.05);
}

.etymology-part:active {
    transform: scale(0.95);
}

.etymology-box {
    padding: 0.75rem 0.5rem;
    border-radius: 0.5rem;
    border: 2px solid;
    transition: all 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@media (min-width: 641px) {
    .etymology-box {
        padding: 0.5rem 0.75rem;
    }
}

.etymology-box:hover {
    box-shadow: 0 4px 6px -1px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
}

/* アクティブな語源ボックス */
.etymology-active {
    border-width: 4px !important;
    box-shadow: 0 4px 12px var(--theme-shadow-large, rgba(0, 0, 0, 0.15)) !important;
}

.part-text {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
}

@media (min-width: 641px) {
    .part-text {
        font-size: 1.25rem;
    }
}

.part-meaning {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.125rem;
    opacity: 0.75;
}

/* 語源の色 */
.etymology-prefix {
    background-color: color-mix(in srgb, var(--theme-info) 20%, var(--theme-bg-primary));
    border-color: var(--theme-info);
    color: var(--theme-brand-primary);
}

.etymology-root {
    background-color: color-mix(in srgb, var(--theme-error) 20%, var(--theme-bg-primary));
    border-color: var(--theme-error);
    color: var(--theme-error);
}

.etymology-suffix {
    background-color: color-mix(in srgb, var(--theme-success) 20%, var(--theme-bg-primary));
    border-color: var(--theme-success);
    color: var(--theme-success);
}

/* 意味と例文 */
.word-meaning {
    text-align: center;
    margin-bottom: 1rem;
}

.meaning-text {
    font-size: 1.25rem;
    color: var(--theme-text-primary, #374151);
    margin-bottom: 0.5rem;
}

/* すりガラス効果（transitionなし） */
.blur-text {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    color: var(--theme-text-secondary, #9ca3af);
}

@media (max-width: 640px) {
    .meaning-text {
        font-size: 1.125rem;
    }
}

.pronunciation-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 0.5rem;
}

@media (min-width: 641px) {
    .pronunciation-container {
        align-items: center;
        gap: 0.75rem;
    }
}

.example-text {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #4b5563);
    flex: 1;
    text-align: left;
    line-height: 1.5;
}

@media (min-width: 641px) {
    .example-text {
        font-size: 0.9375rem;
        text-align: center;
    }
}

/* ボタン共通 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
    min-width: 44px;
    min-height: 44px;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* ナビゲーションボタンエリア */
.navigation-buttons {
    margin-top: 1.5rem;
}

/* スマホではボタンのパディングを調整 */
@media (max-width: 640px) {
    .btn {
        padding: 0.75rem 1rem;
    }
}

.btn-primary {
    background-color: var(--theme-btn-primary-bg, #2563eb);
    color: var(--theme-btn-primary-text, white);
}

.btn-primary:hover {
    background-color: var(--theme-btn-primary-hover, #1d4ed8);
}

.btn-secondary {
    background-color: var(--theme-success, #10b981);
    color: var(--theme-btn-primary-text, #ffffff);
}

.btn-secondary:hover {
    background-color: var(--theme-success-hover, #059669);
}

/* 和訳コンテナ */
.meaning-container {
    position: relative;
    display: inline-block;
}

/* クリック可能な和訳 */
.meaning-clickable {
    cursor: pointer;
}

/* 目玉アイコン（和訳の上に重ねて表示） */
.reveal-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: var(--theme-warning, #f4a022);
    pointer-events: none;
    z-index: 10;
    text-shadow:
        0 0 8px var(--theme-bg-primary, rgba(255, 255, 255, 0.9)),
        0 0 12px var(--theme-bg-primary, rgba(255, 255, 255, 0.7)),
        0 2px 4px var(--theme-shadow-medium, rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0 2px 6px var(--theme-shadow-large, rgba(0, 0, 0, 0.4)));
}

/* 小さめの鍵アイコン（notesなど小さいテキスト用） */
.reveal-icon-small {
    font-size: 1rem;
}

@media (max-width: 640px) {
    .reveal-icon {
        font-size: 1.5rem;
    }

    .reveal-icon-small {
        font-size: 0.875rem;
    }
}

/* 語源ナビゲーション用ボタン（語源一覧、前後移動） */
.btn-etymology {
    background-color: var(--theme-info, #3b82f6);
    color: var(--theme-btn-primary-text, #ffffff);
    padding: 0.75rem 1rem;
}

.btn-etymology:hover {
    background-color: var(--theme-btn-primary-bg, #2563eb);
}

.btn-etymology-disabled {
    background-color: var(--theme-border-hover, #e5e7eb);
    color: var(--theme-text-secondary, #9ca3af);
    cursor: not-allowed;
    padding: 0.75rem 1rem;
}

.btn-etymology-disabled:hover {
    background-color: var(--theme-border-hover, #e5e7eb);
}

/* ランダムボタン - 新しい色（紫系） */
.btn-random {
    background-color: var(--theme-brand-primary, #8b5cf6);
    color: var(--theme-btn-primary-text, #ffffff);
}

.btn-random:hover {
    background-color: var(--theme-brand-hover, #7c3aed);
}

/* 古いナビゲーションボタンのスタイル（互換性のため残す） */
.btn-nav {
    background-color: var(--theme-info, #3b82f6);
    color: var(--theme-btn-primary-text, #ffffff);
    padding: 0.75rem 1rem;
}

.btn-nav:hover {
    background-color: var(--theme-btn-primary-bg, #2563eb);
}

.btn-nav-disabled {
    background-color: var(--theme-border-hover, #e5e7eb);
    color: var(--theme-text-secondary, #9ca3af);
    cursor: not-allowed;
    padding: 0.75rem 1rem;
}

.btn-nav-disabled:hover {
    background-color: var(--theme-border-hover, #e5e7eb);
}

.btn-danger {
    background-color: var(--theme-error, #ef4444);
    color: var(--theme-btn-primary-text, #ffffff);
}

.btn-danger:hover {
    background-color: var(--theme-error-hover, #dc2626);
}

/* リストアイテム */
.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.list-item:hover {
    background-color: var(--theme-bg-secondary, #f9fafb);
}

/* メモボックス */
.note-box {
    background-color: var(--theme-bg-secondary, #eff6ff);
    border-left: 4px solid var(--theme-info, #3b82f6);
    padding: 1rem;
    border-radius: 0.25rem;
}

/* ===========================
   設定画面スタイル
   =========================== */

.settings-section {
    padding: 1.25rem;
    background-color: var(--theme-bg-secondary, #f9fafb);
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border, #e5e7eb);
}

.settings-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.settings-item {
    margin-bottom: 1rem;
}

.settings-item:last-child {
    margin-bottom: 0;
}

.settings-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--theme-text-primary, #374151);
}

.settings-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: var(--theme-btn-primary-bg, #2563eb);
}

.settings-radio {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: var(--theme-btn-primary-bg, #2563eb);
}

.settings-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--theme-text-primary, #4b5563);
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.settings-radio-label:hover {
    background-color: var(--theme-bg-tertiary, #f3f4f6);
}

.settings-description {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #6b7280);
    margin-top: 0.25rem;
    line-height: 1.5;
}

/* 難易度チェックボックス */
.difficulty-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.difficulty-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
}

.difficulty-checkbox-label:hover {
    background-color: var(--theme-bg-tertiary, #f3f4f6);
}

.difficulty-badge {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    min-width: 3rem;
    text-align: center;
}

.difficulty-A1 {
    background-color: var(--theme-btn-good-bg, #dcfce7);
    color: var(--theme-btn-good-text, #15803d);
    border: 1px solid var(--theme-success, #10b981);
}

.difficulty-A2 {
    background-color: var(--theme-btn-easy-bg, #dbeafe);
    color: var(--theme-btn-easy-text, #1d4ed8);
    border: 1px solid var(--theme-info, #3b82f6);
}

.difficulty-B1 {
    background-color: var(--theme-warning-bg, #fef3c7);
    color: var(--theme-warning-text, #92400e);
    border: 1px solid var(--theme-warning, #b45309);
}

.difficulty-B2 {
    background-color: var(--theme-btn-hard-bg, #ffedd5);
    color: var(--theme-btn-hard-text, #c2410c);
    border: 1px solid var(--theme-warning-hover, #92400e);
}

.difficulty-C1 {
    background-color: var(--theme-btn-again-bg, #fee2e2);
    color: var(--theme-btn-again-text, #b91c1c);
    border: 1px solid var(--theme-error, #dc2626);
}

.difficulty-C2 {
    background-color: var(--theme-error-hover, #b91c1c);
    color: var(--theme-btn-primary-text, #ffffff);
    border: 1px solid var(--theme-error, #dc2626);
}

.difficulty-\- {
    background-color: var(--theme-btn-secondary-bg, #f3f4f6);
    color: var(--theme-text-secondary, #6b7280);
    border: 1px solid var(--theme-border-hover, #d1d5db);
}

/* 統計グリッド */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background-color: var(--theme-bg-primary, white);
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border, #e5e7eb);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #6b7280);
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: bold;
    color: var(--theme-brand-primary, #2563eb);
}

/* モーダル */
.modal-fade-enter-active,
.modal-fade-leave-active {
    transition: opacity 0.3s ease;
}

.modal-fade-enter,
.modal-fade-leave-to {
    opacity: 0;
}

.modal-fade-enter-active .bg-white,
.modal-fade-leave-active .bg-white {
    transition: transform 0.3s ease;
}

.modal-fade-enter .bg-white {
    transform: scale(0.9);
}

.modal-fade-leave-to .bg-white {
    transform: scale(0.9);
}

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--theme-bg-secondary, #f1f1f1);
}

::-webkit-scrollbar-thumb {
    background: var(--theme-border-hover, #c1c1c1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-secondary, #a8a8a8);
}

/* タップ時のハイライト無効化 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* テキスト選択の色 */
::selection {
    background-color: var(--theme-brand-primary, #3b82f6);
    color: var(--theme-btn-primary-text, #ffffff);
}

::-moz-selection {
    background-color: var(--theme-brand-primary, #3b82f6);
    color: var(--theme-btn-primary-text, #ffffff);
}

/* レスポンシブ調整 */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body {
        font-size: 14px;
    }

    h1, h2, h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 375px) {
    body {
        font-size: 13px;
    }
}

/* ローディングアニメーション */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* パルスアニメーション */
@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

button:active {
    animation: pulse-subtle 0.3s ease;
}

/* 再生中のハイライト */
.playing-highlight {
    /* Uses theme-info color (#3b82f6) at 15% opacity */
    background-color: rgba(59, 130, 246, 0.15);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.word-title.playing-highlight {
    color: var(--theme-brand-primary, #2563eb);
}

.example-text.playing-highlight {
    color: var(--theme-brand-primary, #2563eb);
    font-weight: 500;
}

/* テキストエリアのアクションボタン */
.textarea-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-bg-primary, rgba(255, 255, 255, 0.9));
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 0.375rem;
    color: var(--theme-text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.textarea-action-btn:hover {
    background-color: var(--theme-bg-primary, white);
    color: var(--theme-brand-primary, #2563eb);
    border-color: var(--theme-brand-primary, #2563eb);
    box-shadow: 0 2px 4px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
}

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

/* モバイルでのタップターゲットサイズ */
@media (max-width: 640px) {
    .textarea-action-btn {
        width: 36px;
        height: 36px;
    }
}

/* Notyfのカスタムスタイル */
.notyf__wrapper{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.notyf__toast {
    max-width: 500px !important;
    min-width: 300px !important;
    width: auto !important;
}

/*
.notyf__message {
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
}

.notyf__icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.5rem !important;
} */

/* モーダルオーバーレイ */
.fixed.inset-0 {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* ローディングスピナー */
.animate-spin {
    animation: spin 1s linear infinite;
}

/* ===========================
   デバッグカードスタイル
   =========================== */

/* デバッグレイアウトラッパー（2カラムレイアウト） */
.debug-layout-wrapper {
    display: block;
}

/* デスクトップ：2カラムグリッド */
@media (min-width: 768px) {
    .debug-layout-wrapper.has-issue-panel {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 1.5rem;
        align-items: start;
    }
}

/* モバイル：問題報告パネルを非表示 */
@media (max-width: 767px) {
    .issue-panel-desktop {
        display: none !important;
    }
}

/* 問題報告パネル（右側） */
.issue-report-panel {
    background-color: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.issue-report-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* デバッグナビゲーション */
.debug-navigation {
    background-color: white;
    border: 2px solid #3b82f6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.debug-nav-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.debug-nav-mode-btn {
    flex: 0 0 auto;
    min-width: 110px;
    padding: 0.625rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.debug-nav-mode-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

.debug-nav-mode-btn:active {
    transform: translateY(0);
}

.debug-nav-position-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #dbeafe;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    white-space: nowrap;
}

.debug-nav-position-input {
    width: 100px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
    background-color: white;
    border: 2px solid #3b82f6;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    outline: none;
    transition: all 0.2s;
}

.debug-nav-position-input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.debug-nav-position-separator {
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0.25rem;
}

.debug-nav-position-total {
    font-size: 1rem;
    font-weight: 600;
    color: #1e40af;
}

/* データソース情報 */
.data-source-info {
    background-color: white;
    border: 2px solid #10b981;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.data-source-value {
    color: #065f46;
    font-family: monospace;
    font-size: 0.875rem;
    font-weight: 600;
}

.data-source-separator {
    color: #10b981;
    font-weight: 700;
    font-size: 1rem;
}

/* 問題タイプボタン（パネル用） */
.issue-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.issue-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.375rem;
    background-color: white;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.issue-type-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.issue-type-btn.active {
    background-color: #fef3c7;
    border-width: 3px;
    font-weight: 600;
}

.issue-icon {
    font-size: 1.25rem;
}

.issue-label {
    text-align: center;
    color: #374151;
    line-height: 1.2;
}

/* メモ入力（パネル用） */
.issue-note-input {
    width: 100%;
    padding: 0.625rem;
    border: 2px solid #fbbf24;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.75rem;
}

.issue-note-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* ボタン（パネル用） */
.issue-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.issue-btn {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
}

.issue-btn-primary {
    background-color: #f59e0b;
    color: white;
    border: none;
}

.issue-btn-primary:hover {
    background-color: #d97706;
}

.issue-btn-secondary {
    background-color: #3b82f6;
    color: white;
    border: none;
}

.issue-btn-secondary:hover {
    background-color: #2563eb;
}

.issue-btn-tertiary {
    background-color: #10b981;
    color: white;
    border: none;
}

.issue-btn-tertiary:hover {
    background-color: #059669;
}

/* 既存の問題表示（パネル用） */
.existing-issues {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #fbbf24;
}

.existing-issues-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.75rem;
}

.issue-item {
    background-color: white;
    border: 1px solid #fbbf24;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.issue-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.issue-item-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.issue-item-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.issue-item-note {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.btn-delete-issue {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #ef4444;
    color: white;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-delete-issue:hover {
    background-color: #dc2626;
}

/* デバッグカード本体 */
.debug-card {
    background-color: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* デバッグヘッダー */
.debug-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.debug-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.debug-collapse-btn {
    background: none;
    border: none;
    color: #92400e;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    transition: transform 0.2s;
}

.debug-collapse-btn:hover {
    transform: scale(1.1);
}

/* デバッグコンテンツ */
.debug-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* デバッグセクション */
.debug-section {
    background-color: white;
    border-radius: 0.375rem;
    padding: 0.875rem;
    border: 1px solid #fbbf24;
}

.debug-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* デバッグ情報ボックス */
.debug-info-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.debug-info-item {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.debug-info-label {
    font-weight: 600;
    color: #78350f;
    min-width: 80px;
}

.debug-info-value {
    color: #92400e;
    font-family: monospace;
}

/* YAML表示 */
.debug-yaml-display {
    background-color: #1f2937;
    color: #d1d5db;
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    padding: 0.75rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* 問題報告セクション */
.debug-issue-report {
    background-color: #fef3c7;
    border-color: #f59e0b;
}

/* 問題タイプボタン */
.debug-issue-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.debug-issue-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.5rem;
    background-color: white;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8125rem;
}

.debug-issue-type-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.debug-issue-type-btn.active {
    background-color: #fef3c7;
    border-width: 3px;
    font-weight: 600;
}

.debug-issue-icon {
    font-size: 1.5rem;
}

.debug-issue-label {
    text-align: center;
    color: #374151;
    line-height: 1.2;
}

/* メモ入力 */
.debug-issue-note-input {
    width: 100%;
    padding: 0.625rem;
    border: 2px solid #fbbf24;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.75rem;
}

.debug-issue-note-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* デバッグボタン */
.debug-issue-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.debug-btn {
    flex: 1;
    min-width: 100px;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
}

.debug-btn-primary {
    background-color: #f59e0b;
    color: white;
    border: none;
}

.debug-btn-primary:hover {
    background-color: #d97706;
}

.debug-btn-secondary {
    background-color: #3b82f6;
    color: white;
    border: none;
}

.debug-btn-secondary:hover {
    background-color: #2563eb;
}

.debug-btn-tertiary {
    background-color: #10b981;
    color: white;
    border: none;
}

.debug-btn-tertiary:hover {
    background-color: #059669;
}

/* 既存の問題表示 */
.debug-existing-issues {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #fbbf24;
}

.debug-existing-issues-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.75rem;
}

.debug-issue-item {
    background-color: white;
    border: 1px solid #fbbf24;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.debug-issue-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.debug-issue-item-date {
    font-size: 0.75rem;
    color: #6b7280;
}

.debug-issue-item-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.debug-issue-item-note {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.debug-btn-delete-issue {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #ef4444;
    color: white;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.debug-btn-delete-issue:hover {
    background-color: #dc2626;
}

/* ===========================
   問題一覧モーダルスタイル
   =========================== */

/* モーダルオーバーレイ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* モーダルコンテンツ */
.modal-content {
    background-color: var(--theme-bg-primary, white);
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.issue-list-modal {
    /* モーダル固有のスタイルはここに追加 */
}

/* モーダルヘッダー */
.issue-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
}

.issue-list-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1f2937);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--theme-text-secondary, #6b7280);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background-color: var(--theme-bg-tertiary, #f3f4f6);
    color: var(--theme-text-primary, #374151);
}

/* 統計情報 */
.issue-stats {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
    overflow-x: auto;
}

.issue-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.issue-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #f59e0b;
}

.issue-stat-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-align: center;
}

/* フィルター */
.issue-filters {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.issue-filter-select {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.issue-search-input {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.issue-search-input:focus,
.issue-filter-select:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* 問題リストコンテナ */
.issue-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.issue-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

/* 問題リストアイテム */
.issue-list-item {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.issue-list-item:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.issue-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.issue-list-item-word {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
}

.issue-list-item-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-weight: 600;
    color: white;
}

.issue-list-item-note {
    font-size: 0.9375rem;
    color: #4b5563;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.issue-list-item-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.issue-list-item-source,
.issue-list-item-date {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.issue-list-item-delete {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: #ef4444;
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.issue-list-item-delete:hover {
    background-color: #dc2626;
}

/* モーダルフッター */
.issue-list-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.issue-list-btn {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

.issue-list-btn-primary {
    background-color: #f59e0b;
    color: white;
    border: none;
}

.issue-list-btn-primary:hover {
    background-color: #d97706;
}

.issue-list-btn-secondary {
    background-color: #3b82f6;
    color: white;
    border: none;
}

.issue-list-btn-secondary:hover {
    background-color: #2563eb;
}

.issue-list-btn-danger {
    background-color: #ef4444;
    color: white;
    border: none;
}

.issue-list-btn-danger:hover {
    background-color: #dc2626;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
    .debug-issue-types {
        grid-template-columns: repeat(2, 1fr);
    }

    .debug-issue-actions {
        flex-direction: column;
    }

    .debug-btn {
        width: 100%;
    }

    .issue-filters {
        flex-direction: column;
    }

    .issue-list-footer {
        flex-direction: column;
    }

    .issue-list-btn {
        width: 100%;
    }
}

      /* テーマシステム */
      /* 1. Standard（Tailwindデフォルトにさらに寄せて洗練） */
      :root,
      [data-theme="standard"] {
        --theme-bg-primary: #ffffff;
        --theme-bg-secondary: #f6f6f6;
        --theme-bg-tertiary: #f0f1f3;
        --theme-text-primary: #111827;
        --theme-text-secondary: #6b7280;
        --theme-brand-primary: #4f46e5; /* indigo-600 for better contrast */
        --theme-brand-secondary: #6366f1; /* indigo-500 */
        --theme-brand-hover: #4338ca; /* indigo-700 */
        --theme-success: #047857; /* emerald-700 for better contrast */
        --theme-success-hover: #065f46;
        --theme-error: #dc2626; /* red-600 */
        --theme-error-hover: #b91c1c;
        --theme-warning: #b45309; /* amber-700 for better contrast */
        --theme-warning-hover: #92400e;
        --theme-info: #3b82f6;
        --theme-border: #e5e7eb;
        --theme-border-hover: #d1d5db;
        --theme-shadow: rgba(0, 0, 0, 0.06);
        --theme-shadow-medium: rgba(0, 0, 0, 0.1);
        --theme-shadow-large: rgba(0, 0, 0, 0.15);
        --theme-input-bg: #ffffff;
        --theme-input-border: #d1d5db;
        --theme-input-focus: #6366f1;
        --theme-btn-primary-bg: #6366f1;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #4f46e5;
        --theme-btn-secondary-bg: #f3f4f6;
        --theme-btn-secondary-hover: #e5e7eb;
        --theme-warning-bg-light: #fef3c7; /* amber-100 */
        --theme-warning-bg: #fef3c7; /* amber-100 */
        --theme-warning-border: #fcd34d; /* amber-300 */
        --theme-warning-text: #92400e; /* amber-800 */
        --theme-folder-open: #eab308; /* yellow-500 */
        --theme-folder-closed: #facc15; /* yellow-400 */
        --theme-code-bg: #f3f4f6; /* gray-100 inline code */
        --theme-code-block-bg: #1f2937; /* gray-800 code block */
        --theme-code-block-text: #f9fafb; /* gray-50 */

        /* カード背景グラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #dbeafe 0%,
          #bfdbfe 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);

        /* 回答ボタン */
        --theme-btn-again-bg: #fee2e2;
        --theme-btn-again-text: #b91c1c;
        --theme-btn-again-hover: #fecaca;

        --theme-btn-hard-bg: #ffedd5;
        --theme-btn-hard-text: #c2410c;
        --theme-btn-hard-hover: #fed7aa;

        --theme-btn-good-bg: #dcfce7;
        --theme-btn-good-text: #15803d;
        --theme-btn-good-hover: #bbf7d0;

        --theme-btn-easy-bg: #dbeafe;
        --theme-btn-easy-text: #1d4ed8;
        --theme-btn-easy-hover: #bfdbfe;

        /* Cloze削除 */
        --theme-cloze-blank-bg: #fef3c7;
        --theme-cloze-blank-text: #92400e;
        --theme-cloze-blank-border: #f59e0b;

        --theme-cloze-answer-bg: #d1fae5;
        --theme-cloze-answer-text: #065f46;
        --theme-cloze-answer-border: #10b981;

        /* ヒント */
        --theme-hint-button-bg: #e0e7ff;
        --theme-hint-button-text: #4338ca;
        --theme-hint-button-hover: #c7d2fe;
        --theme-hint-content-bg: #fef3c7;
        --theme-hint-content-text: #92400e;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #ecfdf5;
        --theme-type-answer-text: #065f46;
      }

      /* 2. Pastel (2025年最新トレンドの"優しすぎる"パステル) */
      [data-theme="pastel"] {
        --theme-bg-primary: #fefce8;
        --theme-bg-secondary: #fafaf9;
        --theme-bg-tertiary: #f5f5f4;
        --theme-text-primary: #422006;
        --theme-text-secondary: #6b4e18;
        --theme-brand-primary: #9333ea; /* purple-600 for better contrast */
        --theme-brand-secondary: #c084fc; /* purple-400 */
        --theme-brand-hover: #7c3aed; /* violet-600 */
        --theme-success: #16a34a; /* green-600 for better contrast */
        --theme-success-hover: #15803d;
        --theme-error: #e11d48; /* rose-600 */
        --theme-error-hover: #be123c;
        --theme-warning: #ca8a04; /* yellow-600 for better contrast */
        --theme-warning-hover: #a16207;
        --theme-info: #2563eb;
        --theme-border: #e9d5ff;
        --theme-border-hover: #d8b4fe;
        --theme-shadow: rgba(202, 138, 255, 0.12);
        --theme-shadow-medium: rgba(202, 138, 255, 0.18);
        --theme-shadow-large: rgba(202, 138, 255, 0.25);
        --theme-input-bg: #ffffff;
        --theme-input-border: #e9d5ff;
        --theme-input-focus: #9333ea;
        --theme-btn-primary-bg: #9333ea;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #7c3aed;
        --theme-btn-secondary-bg: #fafaf9;
        --theme-btn-secondary-hover: #f5f5f4;
        --theme-warning-bg-light: #fef9e7; /* より明るいクリーム色 */
        --theme-warning-bg: #fef3c7;
        --theme-warning-border: #e9d5ff; /* purple系のパステルボーダー */
        --theme-warning-text: #7c3aed; /* purple系のテキスト */
        --theme-folder-open: #c084fc; /* purple-400 パステルに合わせる */
        --theme-folder-closed: #d8b4fe; /* purple-300 */
        --theme-code-bg: #faf5ff; /* purple-50 */
        --theme-code-block-bg: #7c3aed; /* violet-600 */
        --theme-code-block-text: #fefce8;

        /* カード背景グラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #fae8ff 0%,
          #f3e8ff 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);

        /* 回答ボタン */
        --theme-btn-again-bg: #fce7f3;
        --theme-btn-again-text: #be123c;
        --theme-btn-again-hover: #fbcfe8;

        --theme-btn-hard-bg: #fed7aa;
        --theme-btn-hard-text: #92400e;
        --theme-btn-hard-hover: #fbbf24;

        --theme-btn-good-bg: #d1fae5;
        --theme-btn-good-text: #15803d;
        --theme-btn-good-hover: #a7f3d0;

        --theme-btn-easy-bg: #e9d5ff;
        --theme-btn-easy-text: #7c3aed;
        --theme-btn-easy-hover: #d8b4fe;

        /* Cloze削除 */
        --theme-cloze-blank-bg: #fef3c7;
        --theme-cloze-blank-text: #92400e;
        --theme-cloze-blank-border: #d8b4fe;

        --theme-cloze-answer-bg: #d1fae5;
        --theme-cloze-answer-text: #065f46;
        --theme-cloze-answer-border: #a7f3d0;

        /* ヒント */
        --theme-hint-button-bg: #e9d5ff;
        --theme-hint-button-text: #7c3aed;
        --theme-hint-button-hover: #d8b4fe;
        --theme-hint-content-bg: #fef3c7;
        --theme-hint-content-text: #92400e;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #d1fae5;
        --theme-type-answer-text: #065f46;
      }

      /* 3. Chic (超エレガントなベージュ・グレージュ系 2025大本命) */
      [data-theme="chic"] {
        --theme-bg-primary: #faf9f6;
        --theme-bg-secondary: #f2ede8;
        --theme-bg-tertiary: #e7e1db;
        --theme-text-primary: #2d241d;
        --theme-text-secondary: #4a3f35;
        --theme-brand-primary: #57534e; /* stone-600 for better contrast */
        --theme-brand-secondary: #78716c; /* stone-500 */
        --theme-brand-hover: #44403c; /* stone-700 */
        --theme-success: #15803d; /* green-700 */
        --theme-success-hover: #166534;
        --theme-error: #be123c; /* rose-700 for better contrast */
        --theme-error-hover: #9f1239;
        --theme-warning: #a16207; /* yellow-700 */
        --theme-warning-hover: #854d0e;
        --theme-info: #bfdbfe;
        --theme-border: #d6d3d1;
        --theme-border-hover: #a8a29e;
        --theme-shadow: rgba(0, 0, 0, 0.06);
        --theme-shadow-medium: rgba(0, 0, 0, 0.09);
        --theme-shadow-large: rgba(0, 0, 0, 0.12);
        --theme-input-bg: #ffffff;
        --theme-input-border: #d6d3d1;
        --theme-input-focus: #78716c;
        --theme-btn-primary-bg: #2d241d;
        --theme-btn-primary-text: #faf9f6;
        --theme-btn-primary-hover: #1c1917;
        --theme-btn-secondary-bg: #f2ede8;
        --theme-btn-secondary-hover: #e7e1db;
        --theme-warning-bg-light: #f5f3f0; /* ベージュライト */
        --theme-warning-bg: #e7e1db;
        --theme-warning-border: #c4b5a0; /* 温かみのあるベージュ */
        --theme-warning-text: #5d4e37; /* ダークブラウン */
        --theme-folder-open: #78716c; /* stone-500 */
        --theme-folder-closed: #a8a29e; /* stone-400 */
        --theme-code-bg: #e7e1db;
        --theme-code-block-bg: #2d241d;
        --theme-code-block-text: #faf9f6;

        /* カード背景グラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #f5f3f0 0%,
          #e7e1db 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #faf9f6 0%, #f2ede8 100%);

        /* 回答ボタン */
        --theme-btn-again-bg: #f2ede8;
        --theme-btn-again-text: #be123c;
        --theme-btn-again-hover: #e7e1db;

        --theme-btn-hard-bg: #e7e1db;
        --theme-btn-hard-text: #78716c;
        --theme-btn-hard-hover: #d6d3d1;

        --theme-btn-good-bg: #f5f3f0;
        --theme-btn-good-text: #15803d;
        --theme-btn-good-hover: #e7e1db;

        --theme-btn-easy-bg: #faf9f6;
        --theme-btn-easy-text: #57534e;
        --theme-btn-easy-hover: #f2ede8;

        /* Cloze削除 */
        --theme-cloze-blank-bg: #e7e1db;
        --theme-cloze-blank-text: #2d241d;
        --theme-cloze-blank-border: #a8a29e;

        --theme-cloze-answer-bg: #f5f3f0;
        --theme-cloze-answer-text: #2d241d;
        --theme-cloze-answer-border: #78716c;

        /* ヒント */
        --theme-hint-button-bg: #e7e1db;
        --theme-hint-button-text: #2d241d;
        --theme-hint-button-hover: #d6d3d1;
        --theme-hint-content-bg: #f5f3f0;
        --theme-hint-content-text: #4a3f35;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #f5f3f0;
        --theme-type-answer-text: #2d241d;
      }

      /* 4. High Contrast (色覚多様性＋WCAG AAA完全準拠) */
      [data-theme="high-contrast"] {
        --theme-bg-primary: #000000;
        --theme-bg-secondary: #1a1a1a;
        --theme-bg-tertiary: #2d2d2d;
        --theme-text-primary: #ffffff;
        --theme-text-secondary: #e0e0e0;
        --theme-brand-primary: #00ffff; /* 純粋シアン (全色覚で識別可) */
        --theme-brand-secondary: #00cccc;
        --theme-brand-hover: #00aaaa;
        --theme-success: #00ff00;
        --theme-success-hover: #00cc00;
        --theme-error: #ff0040;
        --theme-error-hover: #cc0033;
        --theme-warning: #ffff00;
        --theme-warning-hover: #cccc00;
        --theme-info: #0099ff;
        --theme-border: #ffffff;
        --theme-border-hover: #cccccc;
        --theme-shadow: none;
        --theme-shadow-medium: none;
        --theme-shadow-large: none;
        --theme-input-bg: #000000;
        --theme-input-border: #ffffff;
        --theme-input-focus: #00ffff;
        --theme-btn-primary-bg: #00ffff;
        --theme-btn-primary-text: #000000;
        --theme-btn-primary-hover: #00cccc;
        --theme-btn-secondary-bg: #404040;
        --theme-btn-secondary-hover: #505050;
        --theme-warning-bg-light: #1a1a1a; /* ダーク背景 */
        --theme-warning-bg: #2d2d2d;
        --theme-warning-border: #ffff00; /* 純粋な黄色 */
        --theme-warning-text: #ffff00;
        --theme-folder-open: #ffff00; /* 純粋な黄色 */
        --theme-folder-closed: #ffff00;
        --theme-code-bg: #2d2d2d;
        --theme-code-block-bg: #000000;
        --theme-code-block-text: #00ffff; /* シアン */

        /* カード背景グラデーション */
        --theme-card-front-bg: #000000;
        --theme-card-back-bg: #000000;

        /* 回答ボタン */
        --theme-btn-again-bg: #000000;
        --theme-btn-again-text: #ff0040;
        --theme-btn-again-hover: #ffffff;

        --theme-btn-hard-bg: #000000;
        --theme-btn-hard-text: #ffff00;
        --theme-btn-hard-hover: #ffffff;

        --theme-btn-good-bg: #000000;
        --theme-btn-good-text: #00ff00;
        --theme-btn-good-hover: #ffffff;

        --theme-btn-easy-bg: #000000;
        --theme-btn-easy-text: #00ffff;
        --theme-btn-easy-hover: #ffffff;

        /* Cloze削除 */
        --theme-cloze-blank-bg: #ffff00;
        --theme-cloze-blank-text: #000000;
        --theme-cloze-blank-border: #ffffff;

        --theme-cloze-answer-bg: #00ff00;
        --theme-cloze-answer-text: #000000;
        --theme-cloze-answer-border: #ffffff;

        /* ヒント */
        --theme-hint-button-bg: #00ffff;
        --theme-hint-button-text: #000000;
        --theme-hint-button-hover: #00cccc;
        --theme-hint-content-bg: #ffff00;
        --theme-hint-content-text: #000000;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #00ff00;
        --theme-type-answer-text: #000000;
      }

      /* 5. Grayscale (完全モノクロでも美しいグラデーション) */
      [data-theme="grayscale"] {
        --theme-bg-primary: #ffffff;
        --theme-bg-secondary: #f8f8f8;
        --theme-bg-tertiary: #eeeeee;
        --theme-text-primary: #1a1a1a;
        --theme-text-secondary: #555555;
        --theme-brand-primary: #333333;
        --theme-brand-secondary: #444444;
        --theme-brand-hover: #000000;
        --theme-success: #555555;
        --theme-success-hover: #333333;
        --theme-error: #222222;
        --theme-error-hover: #000000;
        --theme-warning: #777777;
        --theme-info: #666666;
        --theme-border: #cccccc;
        --theme-border-hover: #999999;
        --theme-shadow: rgba(0, 0, 0, 0.1);
        --theme-shadow-medium: rgba(0, 0, 0, 0.15);
        --theme-shadow-large: rgba(0, 0, 0, 0.2);
        --theme-input-bg: #ffffff;
        --theme-input-border: #cccccc;
        --theme-input-focus: #000000;
        --theme-btn-primary-bg: #222222;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #000000;
        --theme-btn-secondary-bg: #f0f0f0;
        --theme-btn-secondary-hover: #e0e0e0;
        --theme-warning-bg-light: #f5f5f5;
        --theme-warning-bg: #eeeeee;
        --theme-warning-border: #999999;
        --theme-warning-text: #333333;
        --theme-folder-open: #666666;
        --theme-folder-closed: #888888;
        --theme-code-bg: #eeeeee;
        --theme-code-block-bg: #222222;
        --theme-code-block-text: #ffffff;

        /* カード背景グラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #e5e5e5 0%,
          #d4d4d4 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);

        /* 回答ボタン */
        --theme-btn-again-bg: #f5f5f5;
        --theme-btn-again-text: #1a1a1a;
        --theme-btn-again-hover: #333333;

        --theme-btn-hard-bg: #e5e5e5;
        --theme-btn-hard-text: #1a1a1a;
        --theme-btn-hard-hover: #333333;

        --theme-btn-good-bg: #d4d4d4;
        --theme-btn-good-text: #1a1a1a;
        --theme-btn-good-hover: #333333;

        --theme-btn-easy-bg: #c4c4c4;
        --theme-btn-easy-text: #1a1a1a;
        --theme-btn-easy-hover: #333333;

        /* Cloze削除 */
        --theme-cloze-blank-bg: #d4d4d4;
        --theme-cloze-blank-text: #1a1a1a;
        --theme-cloze-blank-border: #999999;

        --theme-cloze-answer-bg: #e5e5e5;
        --theme-cloze-answer-text: #1a1a1a;
        --theme-cloze-answer-border: #777777;

        /* ヒント */
        --theme-hint-button-bg: #d4d4d4;
        --theme-hint-button-text: #1a1a1a;
        --theme-hint-button-hover: #c4c4c4;
        --theme-hint-content-bg: #e5e5e5;
        --theme-hint-content-text: #1a1a1a;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #e5e5e5;
        --theme-type-answer-text: #1a1a1a;
      }

      /* 6. Dark (2025年最新の"柔らかくて目に優しい"ダーク) */
      [data-theme="dark"] {
        --theme-bg-primary: #0f172a; /* slate-950 */
        --theme-bg-secondary: #1e293b; /* slate-800 */
        --theme-bg-tertiary: #334155; /* slate-700 */
        --theme-text-primary: #f1f5f9; /* slate-100 */
        --theme-text-secondary: #cbd5e1; /* slate-300 */
        --theme-brand-primary: #a78bfa; /* violet-400 (ダークでも映える) */
        --theme-brand-secondary: #c4b5fd; /* violet-300 */
        --theme-brand-hover: #8b5cf6; /* violet-500 */
        --theme-success: #86efac;
        --theme-success-hover: #4ade80;
        --theme-error: #fda4af;
        --theme-error-hover: #f87171;
        --theme-warning: #fde047;
        --theme-warning-hover: #facc15;
        --theme-info: #93c5fd;
        --theme-border: #475569;
        --theme-border-hover: #64748b;
        --theme-shadow: rgba(0, 0, 0, 0.3);
        --theme-shadow-medium: rgba(0, 0, 0, 0.4);
        --theme-shadow-large: rgba(0, 0, 0, 0.5);
        --theme-input-bg: #1e293b;
        --theme-input-border: #475569;
        --theme-input-focus: #a78bfa;
        --theme-btn-primary-bg: #a78bfa;
        --theme-btn-primary-text: #1e1b4b;
        --theme-btn-primary-hover: #8b5cf6;
        --theme-btn-secondary-bg: #334155;
        --theme-btn-secondary-hover: #475569;
        --theme-warning-bg-light: #1e293b; /* slate-800 */
        --theme-warning-bg: #334155; /* slate-700 */
        --theme-warning-border: #fde047; /* yellow-300 */
        --theme-warning-text: #fde047;
        --theme-folder-open: #fde047; /* yellow-300 */
        --theme-folder-closed: #facc15; /* yellow-400 */
        --theme-code-bg: #334155; /* slate-700 */
        --theme-code-block-bg: #0f172a; /* slate-950 */
        --theme-code-block-text: #f1f5f9; /* slate-100 */

        /* カード背景グラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #1e3a5f 0%,
          #172554 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #14532d 0%, #166534 100%);

        /* 回答ボタン */
        --theme-btn-again-bg: #7f1d1d;
        --theme-btn-again-text: #fecaca;
        --theme-btn-again-hover: #991b1b;

        --theme-btn-hard-bg: #78350f;
        --theme-btn-hard-text: #fed7aa;
        --theme-btn-hard-hover: #92400e;

        --theme-btn-good-bg: #14532d;
        --theme-btn-good-text: #bbf7d0;
        --theme-btn-good-hover: #166534;

        --theme-btn-easy-bg: #1e3a8a;
        --theme-btn-easy-text: #bfdbfe;
        --theme-btn-easy-hover: #1e40af;

        /* Cloze削除 */
        --theme-cloze-blank-bg: #fde047;
        --theme-cloze-blank-text: #1a1a1a;
        --theme-cloze-blank-border: #facc15;

        --theme-cloze-answer-bg: #86efac;
        --theme-cloze-answer-text: #1a1a1a;
        --theme-cloze-answer-border: #4ade80;

        /* ヒント */
        --theme-hint-button-bg: #a78bfa;
        --theme-hint-button-text: #1e1b4b;
        --theme-hint-button-hover: #8b5cf6;
        --theme-hint-content-bg: #fde047;
        --theme-hint-content-text: #1a1a1a;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #86efac;
        --theme-type-answer-text: #1a1a1a;
      }
      /* 改善版テーマシステム CSS変数 */
      /* フラッシュカード学習アプリ用 - 子供向け配色最適化 */

      /* 7. Moon */
      [data-theme="moon"] {
        /* ベース：清潔な白ベース（セーラー服） */
        --theme-bg-primary: #ffffff;
        --theme-bg-secondary: #f8f9ff; /* 淡い青みがかった白 */
        --theme-bg-tertiary: #f0f4ff;

        /* テキスト：読みやすい濃紺 */
        --theme-text-primary: #1e3a5f; /* ネイビー */
        --theme-text-secondary: #4a5f7f;

        /* ブランド：セーラームーンのピンク＋ゴールド */
        --theme-brand-primary: #ff69b4; /* ピンク（ティアラの宝石） */
        --theme-brand-secondary: #ffd700; /* ゴールド（ティアラ） */
        --theme-brand-hover: #ff1493; /* 濃いピンク */

        /* 状態色：セーラー戦士カラー */
        --theme-success: #4169e1; /* ロイヤルブルー（スカート） */
        --theme-success-hover: #1e3a8a;
        --theme-error: #dc143c; /* クリムゾン（リボン） */
        --theme-error-hover: #b22222;
        --theme-warning: #ffd700; /* ゴールド */
        --theme-warning-hover: #ffb700;
        --theme-info: #87ceeb; /* スカイブルー */

        /* ボーダー＆シャドウ：柔らかい青系 */
        --theme-border: #d6e4ff;
        --theme-border-hover: #adc6ff;
        --theme-shadow: rgba(65, 105, 225, 0.15);
        --theme-shadow-medium: rgba(65, 105, 225, 0.25);
        --theme-shadow-large: rgba(65, 105, 225, 0.35);

        /* 入力フィールド */
        --theme-input-bg: #ffffff;
        --theme-input-border: #d6e4ff;
        --theme-input-focus: #ff69b4;

        /* ボタン */
        --theme-btn-primary-bg: #ff69b4;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #ff1493;
        --theme-btn-secondary-bg: #f0f4ff;
        --theme-btn-secondary-hover: #d6e4ff;

        /* カード背景：柔らかい青のグラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #ffffff 0%,
          #f8f9ff 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #fffef7 0%, #fffacd 100%);

        /* 学習モーダル背景：セーラームーンカラー 縦縞 */
        --theme-study-modal-bg: repeating-linear-gradient(
          to right,
          rgba(255, 105, 180, 0.7) 0px,
          rgba(255, 105, 180, 0.7) 40px,
          rgba(255, 215, 0, 0.7) 40px,
          rgba(255, 215, 0, 0.7) 80px,
          rgba(65, 105, 225, 0.7) 80px,
          rgba(65, 105, 225, 0.7) 120px
        );
        --theme-study-modal-bg-size: auto;

        /* 回答ボタン：明確な色分け */
        --theme-btn-again-bg: #ffe4e1;
        --theme-btn-again-text: #dc143c;
        --theme-btn-again-hover: #ffd4d4;

        --theme-btn-hard-bg: #fff4e6;
        --theme-btn-hard-text: #d97706;
        --theme-btn-hard-hover: #ffe4cc;

        --theme-btn-good-bg: #e6f4ff;
        --theme-btn-good-text: #1e3a8a;
        --theme-btn-good-hover: #d6e4ff;

        --theme-btn-easy-bg: #f0ffe6;
        --theme-btn-easy-text: #15803d;
        --theme-btn-easy-hover: #e0ffcc;

        /* Cloze削除：ピンク→青の変化 */
        --theme-cloze-blank-bg: #ffe4f0;
        --theme-cloze-blank-text: #c71585;
        --theme-cloze-blank-border: #ff69b4;

        --theme-cloze-answer-bg: #e6f4ff;
        --theme-cloze-answer-text: #1e3a8a;
        --theme-cloze-answer-border: #4169e1;

        /* ヒント：ゴールドで目立つ */
        --theme-hint-button-bg: #ffd700;
        --theme-hint-button-text: #8b4513;
        --theme-hint-button-hover: #ffb700;
        --theme-hint-content-bg: #fffacd;
        --theme-hint-content-text: #8b4513;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #f0ffe6;
        --theme-type-answer-text: #15803d;

        /* コード */
        --theme-code-bg: #f0f4ff;
        --theme-code-block-bg: #1e3a8a;
        --theme-code-block-text: #e6f4ff;

        --theme-warning-bg-light: #fffacd;
        --theme-warning-bg: #fff4e6;
        --theme-warning-border: #ffd700;
        --theme-warning-text: #8b4513;
        --theme-folder-open: #ffd700;
        --theme-folder-closed: #ffb700;
      }

      /* 8. mars */
      [data-theme="mars"] {
        /* ベース：清潔な白ベース（セーラー服） */
        --theme-bg-primary: #ffffff;
        --theme-bg-secondary: #fff5f5; /* ごく淡いローズ */
        --theme-bg-tertiary: #ffe4e1;

        /* テキスト：読みやすい濃い紫 */
        --theme-text-primary: #4b0082; /* インディゴ（髪色） */
        --theme-text-secondary: #6a0dad;

        /* ブランド：赤＋紫の組み合わせ */
        --theme-brand-primary: #dc143c; /* クリムゾン（スカート） */
        --theme-brand-secondary: #9932cc; /* ダークオーキッド（髪） */
        --theme-brand-hover: #b22222;

        /* 状態色 */
        --theme-success: #9932cc; /* 紫（髪色） */
        --theme-success-hover: #7b1fa2;
        --theme-error: #dc143c; /* 赤（スカート） */
        --theme-error-hover: #b22222;
        --theme-warning: #ff6347; /* トマト（明るい赤） */
        --theme-warning-hover: #ff4500;
        --theme-info: #dda0dd; /* プラム */

        /* ボーダー＆シャドウ：紫系 */
        --theme-border: #e9d5ff;
        --theme-border-hover: #d8b4fe;
        --theme-shadow: rgba(153, 50, 204, 0.15);
        --theme-shadow-medium: rgba(153, 50, 204, 0.25);
        --theme-shadow-large: rgba(153, 50, 204, 0.35);

        /* 入力フィールド */
        --theme-input-bg: #ffffff;
        --theme-input-border: #e9d5ff;
        --theme-input-focus: #dc143c;

        /* ボタン */
        --theme-btn-primary-bg: #dc143c;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #b22222;
        --theme-btn-secondary-bg: #fff5f5;
        --theme-btn-secondary-hover: #ffe4e1;

        /* カード背景：柔らかい赤と紫のグラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #ffffff 0%,
          #fff8f8 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #faf8ff 0%, #f8f5ff 100%);

        /* 学習モーダル背景：セーラーマーズカラー 縦縞 */
        --theme-study-modal-bg: repeating-linear-gradient(
          to right,
          rgba(220, 20, 60, 0.7) 0px,
          rgba(220, 20, 60, 0.7) 40px,
          rgba(153, 50, 204, 0.7) 40px,
          rgba(153, 50, 204, 0.7) 80px
        );
        --theme-study-modal-bg-size: auto;

        /* 回答ボタン */
        --theme-btn-again-bg: #ffe4e1;
        --theme-btn-again-text: #8b0000;
        --theme-btn-again-hover: #ffd4d4;

        --theme-btn-hard-bg: #fce4ec;
        --theme-btn-hard-text: #c2185b;
        --theme-btn-hard-hover: #f8bbd0;

        --theme-btn-good-bg: #f3e5f5;
        --theme-btn-good-text: #6a1b9a;
        --theme-btn-good-hover: #e1bee7;

        --theme-btn-easy-bg: #fff9e6;
        --theme-btn-easy-text: #d97706;
        --theme-btn-easy-hover: #fff4cc;

        /* Cloze削除：赤→紫の変化 */
        --theme-cloze-blank-bg: #ffe4e1;
        --theme-cloze-blank-text: #8b0000;
        --theme-cloze-blank-border: #dc143c;

        --theme-cloze-answer-bg: #f3e5f5;
        --theme-cloze-answer-text: #4b0082;
        --theme-cloze-answer-border: #9932cc;

        /* ヒント：紫で神秘的に */
        --theme-hint-button-bg: #e1bee7;
        --theme-hint-button-text: #4b0082;
        --theme-hint-button-hover: #ce93d8;
        --theme-hint-content-bg: #f3e5f5;
        --theme-hint-content-text: #4b0082;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #f3e5f5;
        --theme-type-answer-text: #4b0082;

        /* コード */
        --theme-code-bg: #fff5f5;
        --theme-code-block-bg: #4b0082;
        --theme-code-block-text: #f3e5f5;

        --theme-warning-bg-light: #fff9e6;
        --theme-warning-bg: #fff4e6;
        --theme-warning-border: #ff6347;
        --theme-warning-text: #8b4513;
        --theme-folder-open: #dc143c;
        --theme-folder-closed: #9932cc;
      }

      /* 9. Tricolor (三色) - トリコロールで爽やか */
      [data-theme="tricolor"] {
        /* ベース：純白（ガンダムの白） */
        --theme-bg-primary: #ffffff;
        --theme-bg-secondary: #f0f8ff; /* アリスブルー */
        --theme-bg-tertiary: #e6f2ff;

        /* テキスト：濃いネイビー */
        --theme-text-primary: #1e3a5f;
        --theme-text-secondary: #2c5282;

        /* ブランド：連邦ブルー */
        --theme-brand-primary: #3b82f6; /* 青（ガンダムブルー） */
        --theme-brand-secondary: #60a5fa;
        --theme-brand-hover: #2563eb;

        /* 状態色：トリコロール */
        --theme-success: #3b82f6; /* 青 */
        --theme-success-hover: #2563eb;
        --theme-error: #ef4444; /* 赤（ビームサーベル） */
        --theme-error-hover: #dc2626;
        --theme-warning: #fbbf24; /* 黄色（装甲アクセント） */
        --theme-warning-hover: #f59e0b;
        --theme-info: #3b82f6;

        /* ボーダー＆シャドウ：青系 */
        --theme-border: #bfdbfe;
        --theme-border-hover: #93c5fd;
        --theme-shadow: rgba(59, 130, 246, 0.15);
        --theme-shadow-medium: rgba(59, 130, 246, 0.25);
        --theme-shadow-large: rgba(59, 130, 246, 0.35);

        /* 入力フィールド */
        --theme-input-bg: #ffffff;
        --theme-input-border: #bfdbfe;
        --theme-input-focus: #3b82f6;

        /* ボタン */
        --theme-btn-primary-bg: #3b82f6;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #2563eb;
        --theme-btn-secondary-bg: #f0f8ff;
        --theme-btn-secondary-hover: #e6f2ff;

        /* カード背景：柔らかい青のグラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #ffffff 0%,
          #f8faff 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #fffef8 0%, #fffcf0 100%);

        /* 学習モーダル背景：ガンダムトリコロール 縦縞 */
        --theme-study-modal-bg: repeating-linear-gradient(
          to right,
          rgba(255, 255, 255, 0.8) 0px,
          rgba(255, 255, 255, 0.8) 40px,
          rgba(59, 130, 246, 0.7) 40px,
          rgba(59, 130, 246, 0.7) 80px,
          rgba(239, 68, 68, 0.7) 80px,
          rgba(239, 68, 68, 0.7) 120px,
          rgba(251, 191, 36, 0.7) 120px,
          rgba(251, 191, 36, 0.7) 160px
        );
        --theme-study-modal-bg-size: auto;

        /* 回答ボタン：トリコロール配色 */
        --theme-btn-again-bg: #fee2e2;
        --theme-btn-again-text: #dc2626;
        --theme-btn-again-hover: #fecaca;

        --theme-btn-hard-bg: #fef3c7;
        --theme-btn-hard-text: #d97706;
        --theme-btn-hard-hover: #fde68a;

        --theme-btn-good-bg: #dbeafe;
        --theme-btn-good-text: #1e40af;
        --theme-btn-good-hover: #bfdbfe;

        --theme-btn-easy-bg: #f0fdf4;
        --theme-btn-easy-text: #15803d;
        --theme-btn-easy-hover: #dcfce7;

        /* Cloze削除：白→青の変化 */
        --theme-cloze-blank-bg: #f0f8ff;
        --theme-cloze-blank-text: #1e3a5f;
        --theme-cloze-blank-border: #93c5fd;

        --theme-cloze-answer-bg: #dbeafe;
        --theme-cloze-answer-text: #1e40af;
        --theme-cloze-answer-border: #3b82f6;

        /* ヒント：黄色で目立つ */
        --theme-hint-button-bg: #fbbf24;
        --theme-hint-button-text: #78350f;
        --theme-hint-button-hover: #f59e0b;
        --theme-hint-content-bg: #fef3c7;
        --theme-hint-content-text: #78350f;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #dbeafe;
        --theme-type-answer-text: #1e40af;

        /* コード */
        --theme-code-bg: #f0f8ff;
        --theme-code-block-bg: #1e3a8a;
        --theme-code-block-text: #dbeafe;

        --theme-warning-bg-light: #fef3c7;
        --theme-warning-bg: #fef3c7;
        --theme-warning-border: #fbbf24;
        --theme-warning-text: #78350f;
        --theme-folder-open: #fbbf24;
        --theme-folder-closed: #3b82f6;
      }

      /* 10. Twilight (黄昏) - 宇宙の黄昏、紫の栄光 */
      [data-theme="twilight"] {
        /* ベース：ダークグレー（宇宙空間） */
        --theme-bg-primary: #1a1a1a;
        --theme-bg-secondary: #2d2d2d; /* ダークグレー */
        --theme-bg-tertiary: #3a3a3a;

        /* テキスト：明るいグレー */
        --theme-text-primary: #e0e0e0; /* ライトグレー */
        --theme-text-secondary: #bfbfbf;

        /* パープル */
        --theme-brand-primary: #b058ff; /* バイオレット */
        --theme-brand-secondary: #a855f7;
        --theme-brand-hover: #7c3aed;

        /* 状態色：紫とグリーンの組み合わせ */
        --theme-success: #22c55e; /* グリーン（モノアイ） */
        --theme-success-hover: #16a34a;
        --theme-error: #ef4444; /* レッド */
        --theme-error-hover: #dc2626;
        --theme-warning: #eab308; /* イエロー */
        --theme-warning-hover: #ca8a04;
        --theme-info: #a855f7;

        /* ボーダー＆シャドウ：紫系 */
        --theme-border: #4a4a4a;
        --theme-border-hover: #6b7280;
        --theme-shadow: rgba(147, 51, 234, 0.3);
        --theme-shadow-medium: rgba(147, 51, 234, 0.4);
        --theme-shadow-large: rgba(147, 51, 234, 0.5);

        /* 入力フィールド */
        --theme-input-bg: #2d2d2d;
        --theme-input-border: #4a4a4a;
        --theme-input-focus: #9333ea;

        /* ボタン */
        --theme-btn-primary-bg: #9333ea;
        --theme-btn-primary-text: #ffffff;
        --theme-btn-primary-hover: #7c3aed;
        --theme-btn-secondary-bg: #3a3a3a;
        --theme-btn-secondary-hover: #4a4a4a;

        /* カード背景：ダークグレーから紫への柔らかいグラデーション */
        --theme-card-front-bg: linear-gradient(
          135deg,
          #2d2d2d 0%,
          #3a2d4a 100%
        );
        --theme-card-back-bg: linear-gradient(135deg, #2d2d2d 0%, #2d3a2d 100%);

        /* 学習モーダル背景：ジオンカラー 縦縞 */
        --theme-study-modal-bg: repeating-linear-gradient(
          to right,
          rgba(34, 197, 94, 0.7) 0px,
          rgba(34, 197, 94, 0.7) 40px,
          rgba(147, 51, 234, 0.7) 40px,
          rgba(147, 51, 234, 0.7) 80px
        );
        --theme-study-modal-bg-size: auto;

        /* 回答ボタン：ダークテーマ対応 */
        --theme-btn-again-bg: #4a2d2d;
        --theme-btn-again-text: #fca5a5;
        --theme-btn-again-hover: #5a3d3d;

        --theme-btn-hard-bg: #4a3d2d;
        --theme-btn-hard-text: #fcd34d;
        --theme-btn-hard-hover: #5a4d3d;

        --theme-btn-good-bg: #2d3a4a;
        --theme-btn-good-text: #93c5fd;
        --theme-btn-good-hover: #3d4a5a;

        --theme-btn-easy-bg: #2d4a3a;
        --theme-btn-easy-text: #86efac;
        --theme-btn-easy-hover: #3d5a4a;

        /* Cloze削除：紫→グリーンの変化 */
        --theme-cloze-blank-bg: #4a2d5a;
        --theme-cloze-blank-text: #e9d5ff;
        --theme-cloze-blank-border: #9333ea;

        --theme-cloze-answer-bg: #2d4a3a;
        --theme-cloze-answer-text: #86efac;
        --theme-cloze-answer-border: #22c55e;

        /* ヒント：グリーン（モノアイ） */
        --theme-hint-button-bg: #2d4a3a;
        --theme-hint-button-text: #86efac;
        --theme-hint-button-hover: #3d5a4a;
        --theme-hint-content-bg: #1a2a1a;
        --theme-hint-content-text: #86efac;

        /* タイプ入力の答え */
        --theme-type-answer-bg: #2d4a3a;
        --theme-type-answer-text: #86efac;

        /* コード */
        --theme-code-bg: #3a3a3a;
        --theme-code-block-bg: #1a1a1a;
        --theme-code-block-text: #e9d5ff;

        --theme-warning-bg-light: #3a3a2d;
        --theme-warning-bg: #4a4a3a;
        --theme-warning-border: #eab308;
        --theme-warning-text: #fde047;
        --theme-folder-open: #22c55e;
        --theme-folder-closed: #9333ea;
      }

      /* テーマ対応の共通クラス */
      .theme-bg-primary {
        background-color: var(--theme-bg-primary);
        color: var(--theme-text-primary);
      }

      .theme-bg-secondary {
        background-color: var(--theme-bg-secondary);
        color: var(--theme-text-primary);
      }

      .theme-text-primary {
        color: var(--theme-text-primary);
      }

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

      .theme-btn-primary {
        background-color: var(--theme-brand-primary);
        color: var(--theme-btn-primary-text, #ffffff);
        border: none;
        padding: 0.5rem 1rem;
      }

      .theme-btn-primary:hover:not(:disabled) {
        background-color: var(--theme-brand-hover);
      }

      .theme-btn-success {
        background-color: var(--theme-success);
        color: var(--theme-btn-primary-text, #ffffff);
        border: none;
        padding: 0.5rem 1rem;
      }

      .theme-btn-success:hover:not(:disabled) {
        background-color: var(--theme-success-hover);
      }

      .theme-btn-error {
        background-color: var(--theme-error);
        color: var(--theme-btn-primary-text, #ffffff);
        border: none;
        padding: 0.5rem 1rem;
      }

      .theme-btn-error:hover:not(:disabled) {
        background-color: var(--theme-error-hover);
      }

      /* High Contrast テーマでのボタンの追加強調 */
      [data-theme="high-contrast"] .theme-btn-primary,
      [data-theme="high-contrast"] .theme-btn-success,
      [data-theme="high-contrast"] .theme-btn-error {
        border: 2px solid var(--theme-text-primary);
        font-weight: bold;
      }

      /* Grayscale テーマでのボタンの追加強調 */
      [data-theme="grayscale"] .theme-btn-primary,
      [data-theme="grayscale"] .theme-btn-success,
      [data-theme="grayscale"] .theme-btn-error {
        border: 2px solid var(--theme-text-primary);
      }

      /* ========================================
        Tailwindクラスをテーマ変数でオーバーライド
        ======================================== */

      /* --- 基本背景色 --- */
      body[data-theme] .bg-white,
      [data-theme] .bg-white {
        background-color: var(--theme-bg-primary) !important;
      }
      body[data-theme] .bg-gray-50,
      [data-theme] .bg-gray-50 {
        background-color: var(--theme-bg-secondary) !important;
      }
      body[data-theme] .bg-gray-100,
      [data-theme] .bg-gray-100 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      body[data-theme] .bg-gray-200,
      [data-theme] .bg-gray-200 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      body[data-theme] .bg-gray-300,
      [data-theme] .bg-gray-300 {
        background-color: var(--theme-border) !important;
      }
      body[data-theme] .bg-gray-600,
      [data-theme] .bg-gray-600 {
        background-color: var(--theme-text-secondary) !important;
      }
      body[data-theme] .bg-gray-700,
      [data-theme] .bg-gray-700 {
        background-color: var(--theme-text-primary) !important;
      }
      body[data-theme] .bg-gray-900,
      [data-theme] .bg-gray-900 {
        background-color: var(--theme-text-primary) !important;
      }

      /* --- モーダルオーバーレイ --- */
      [data-theme] .bg-black {
        background-color: var(--theme-bg-tertiary) !important;
      }
      /* bg-opacity-50 は Tailwind の背景色不透明度なので、要素全体の opacity は変更しない */
      /* darkとhigh-contrastテーマでは暗めに */
      [data-theme="dark"] .bg-black,
      [data-theme="high-contrast"] .bg-black {
        background-color: rgba(0, 0, 0, 0.8) !important;
      }

      /* --- ブランドカラー背景 (indigo/blue/purple) --- */
      [data-theme] .bg-indigo-50,
      [data-theme] .bg-blue-50,
      [data-theme] .bg-purple-50 {
        background-color: var(--theme-bg-secondary) !important;
      }
      [data-theme] .bg-indigo-100,
      [data-theme] .bg-blue-100,
      [data-theme] .bg-purple-100 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .bg-indigo-200,
      [data-theme] .bg-blue-200,
      [data-theme] .bg-purple-200 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .bg-indigo-600,
      [data-theme] .bg-blue-600,
      [data-theme] .bg-purple-600 {
        background-color: var(--theme-brand-primary) !important;
      }
      [data-theme] .bg-indigo-700,
      [data-theme] .bg-blue-700,
      [data-theme] .bg-purple-700 {
        background-color: var(--theme-brand-hover) !important;
      }

      /* --- 成功カラー背景 (green) --- */
      [data-theme] .bg-green-50 {
        background-color: var(--theme-bg-secondary) !important;
      }
      [data-theme] .bg-green-100 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .bg-green-200,
      [data-theme] .bg-green-300 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .bg-green-600 {
        background-color: var(--theme-success) !important;
      }
      [data-theme] .bg-green-700 {
        background-color: var(--theme-success-hover) !important;
      }

      /* --- エラーカラー背景 (red) --- */
      [data-theme] .bg-red-50 {
        background-color: var(--theme-bg-secondary) !important;
      }
      [data-theme] .bg-red-600 {
        background-color: var(--theme-error) !important;
      }
      [data-theme] .bg-red-700 {
        background-color: var(--theme-error-hover) !important;
      }

      /* --- 警告カラー背景 (yellow/orange) --- */
      [data-theme] .bg-yellow-50,
      [data-theme] .bg-orange-50 {
        background-color: var(--theme-bg-secondary) !important;
      }
      [data-theme] .bg-yellow-100,
      [data-theme] .bg-yellow-200,
      [data-theme] .bg-yellow-300,
      [data-theme] .bg-orange-100,
      [data-theme] .bg-orange-200 {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .bg-yellow-600,
      [data-theme] .bg-orange-600 {
        background-color: var(--theme-warning) !important;
      }
      [data-theme] .bg-yellow-700,
      [data-theme] .bg-orange-700 {
        background-color: var(--theme-warning) !important;
      }

      /* --- テキスト色 --- */
      [data-theme] .text-gray-400,
      [data-theme] .text-gray-500 {
        color: var(--theme-text-secondary) !important;
      }
      [data-theme] .text-gray-600,
      [data-theme] .text-gray-700 {
        color: var(--theme-text-secondary) !important;
      }
      [data-theme] .text-gray-800,
      [data-theme] .text-gray-900 {
        color: var(--theme-text-primary) !important;
      }

      /* --- ブランドカラーテキスト --- */
      [data-theme] .text-indigo-500,
      [data-theme] .text-indigo-600,
      [data-theme] .text-indigo-700,
      [data-theme] .text-indigo-800,
      [data-theme] .text-indigo-900,
      [data-theme] .text-blue-600,
      [data-theme] .text-blue-700,
      [data-theme] .text-blue-800,
      [data-theme] .text-purple-600,
      [data-theme] .text-purple-700 {
        color: var(--theme-brand-primary) !important;
      }

      /* ホバー時のブランドカラーテキスト */
      [data-theme] .hover\:text-blue-700:hover,
      [data-theme] .hover\:text-indigo-700:hover {
        color: var(--theme-brand-hover) !important;
      }

      /* --- 成功カラーテキスト --- */
      [data-theme] .text-green-400,
      [data-theme] .text-green-600,
      [data-theme] .text-green-700,
      [data-theme] .text-green-800 {
        color: var(--theme-success) !important;
      }

      /* --- エラーカラーテキスト --- */
      [data-theme] .text-red-600,
      [data-theme] .text-red-700,
      [data-theme] .text-red-800 {
        color: var(--theme-error) !important;
      }

      /* --- 警告カラーテキスト --- */
      [data-theme] .text-yellow-300,
      [data-theme] .text-yellow-500,
      [data-theme] .text-yellow-600,
      [data-theme] .text-yellow-700,
      [data-theme] .text-yellow-800,
      [data-theme] .text-orange-600,
      [data-theme] .text-orange-500 {
        color: var(--theme-warning) !important;
      }

      /* --- ボーダー色 --- */
      [data-theme] .border-gray-200 {
        border-color: var(--theme-border) !important;
      }
      [data-theme] .border-gray-300 {
        border-color: var(--theme-border-hover) !important;
      }

      /* --- ブランドカラーボーダー --- */
      [data-theme] .border-indigo-200,
      [data-theme] .border-blue-200,
      [data-theme] .border-purple-200 {
        border-color: var(--theme-border) !important;
      }
      [data-theme] .border-indigo-300,
      [data-theme] .border-indigo-400,
      [data-theme] .border-indigo-500,
      [data-theme] .border-indigo-600 {
        border-color: var(--theme-brand-primary) !important;
      }

      /* --- 成功カラーボーダー --- */
      [data-theme] .border-green-200,
      [data-theme] .border-green-300,
      [data-theme] .border-green-400 {
        border-color: var(--theme-success) !important;
      }

      /* --- エラーカラーボーダー --- */
      [data-theme] .border-red-200,
      [data-theme] .border-red-300 {
        border-color: var(--theme-error) !important;
      }

      /* --- 警告カラーボーダー --- */
      [data-theme] .border-yellow-200,
      [data-theme] .border-yellow-300,
      [data-theme] .border-yellow-400,
      [data-theme] .border-orange-200,
      [data-theme] .border-orange-300 {
        border-color: var(--theme-warning) !important;
      }

      /* --- ホバー状態: 背景 --- */
      [data-theme] .hover\:bg-white:hover {
        background-color: var(--theme-bg-primary) !important;
      }
      [data-theme] .hover\:bg-gray-50:hover {
        background-color: var(--theme-bg-secondary) !important;
      }
      [data-theme] .hover\:bg-gray-100:hover {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .hover\:bg-gray-200:hover {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .hover\:bg-indigo-50:hover,
      [data-theme] .hover\:bg-blue-50:hover {
        background-color: var(--theme-bg-secondary) !important;
      }
      [data-theme] .hover\:bg-indigo-100:hover {
        background-color: var(--theme-bg-tertiary) !important;
      }
      [data-theme] .hover\:bg-indigo-700:hover,
      [data-theme] .hover\:bg-blue-700:hover {
        background-color: var(--theme-brand-hover) !important;
      }
      [data-theme] .hover\:bg-green-700:hover {
        background-color: var(--theme-success-hover) !important;
      }
      [data-theme] .hover\:bg-red-700:hover {
        background-color: var(--theme-error-hover) !important;
      }

      /* --- ホバー状態: ボーダー --- */
      [data-theme] .hover\:border-gray-300:hover {
        border-color: var(--theme-border-hover) !important;
      }
      [data-theme] .hover\:border-indigo-500:hover,
      [data-theme] .hover\:border-blue-500:hover {
        border-color: var(--theme-brand-primary) !important;
      }

      /* --- ホバー状態: テキスト --- */
      [data-theme] .hover\:text-indigo-600:hover,
      [data-theme] .hover\:text-blue-600:hover {
        color: var(--theme-brand-primary) !important;
      }
      [data-theme] .hover\:text-indigo-700:hover,
      [data-theme] .hover\:text-blue-700:hover {
        color: var(--theme-brand-hover) !important;
      }
      [data-theme] .hover\:text-gray-600:hover,
      [data-theme] .hover\:text-gray-700:hover {
        color: var(--theme-text-secondary) !important;
      }

      /* --- シャドウ --- */
      [data-theme] .shadow {
        box-shadow: 0 1px 3px 0 var(--theme-shadow),
          0 1px 2px 0 var(--theme-shadow) !important;
      }
      [data-theme] .shadow-sm {
        box-shadow: 0 1px 2px 0 var(--theme-shadow) !important;
      }
      [data-theme] .shadow-md {
        box-shadow: 0 4px 6px -1px var(--theme-shadow-medium),
          0 2px 4px -1px var(--theme-shadow) !important;
      }
      [data-theme] .shadow-lg {
        box-shadow: 0 10px 15px -3px var(--theme-shadow-large),
          0 4px 6px -2px var(--theme-shadow-medium) !important;
      }
      [data-theme] .shadow-xl {
        box-shadow: 0 20px 25px -5px var(--theme-shadow-large),
          0 10px 10px -5px var(--theme-shadow-medium) !important;
      }
      [data-theme] .shadow-2xl {
        box-shadow: 0 25px 50px -12px var(--theme-shadow-large) !important;
      }

      /* --- bodyとグラデーション背景のオーバーライド --- */
      [data-theme] body {
        background: var(--theme-bg-secondary) !important;
      }
      [data-theme] .bg-gradient-to-br,
      [data-theme] .bg-gradient-to-r,
      [data-theme] .bg-gradient-to-l,
      [data-theme] .bg-gradient-to-t,
      [data-theme] .bg-gradient-to-b {
        background: var(--theme-bg-secondary) !important;
      }

      /* --- リング (フォーカス状態) --- */
      [data-theme] .ring-indigo-500,
      [data-theme] .ring-blue-500 {
        --tw-ring-color: var(--theme-brand-primary) !important;
      }
      [data-theme] .focus\:ring-indigo-500:focus,
      [data-theme] .focus\:ring-blue-500:focus {
        --tw-ring-color: var(--theme-brand-primary) !important;
      }

      /* --- フォーカス状態: ボーダー --- */
      [data-theme] .focus\:border-indigo-500:focus,
      [data-theme] .focus\:border-blue-500:focus {
        border-color: var(--theme-input-focus) !important;
      }

      /* --- Divide (区切り線) --- */
      [data-theme] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        border-color: var(--theme-border) !important;
      }

      /* --- その他のリングカラー --- */
      [data-theme] .ring-indigo-200,
      [data-theme] .ring-purple-500 {
        --tw-ring-color: var(--theme-brand-primary) !important;
      }

      /* --- デフォルトテキスト色の調整 --- */
      /* テキスト色が指定されていない要素は、テーマのプライマリテキスト色を使用 */
      /* ただし、ボタン内の要素は除外 */
      [data-theme]
        span:not([class*="text-"]):not([style*="color"]):not(button span):not(
          button *
        ),
      [data-theme]
        p:not([class*="text-"]):not([style*="color"]):not(button p):not(
          button *
        ),
      [data-theme]
        div:not([class*="text-"]):not([style*="color"]):not(button div):not(
          button *
        ),
      [data-theme] li:not([class*="text-"]):not([style*="color"]),
      [data-theme] h1:not([class*="text-"]):not([style*="color"]),
      [data-theme] h2:not([class*="text-"]):not([style*="color"]),
      [data-theme] h3:not([class*="text-"]):not([style*="color"]),
      [data-theme] h4:not([class*="text-"]):not([style*="color"]),
      [data-theme] h5:not([class*="text-"]):not([style*="color"]),
      [data-theme] h6:not([class*="text-"]):not([style*="color"]),
      [data-theme] label:not([class*="text-"]):not([style*="color"]),
      [data-theme] a:not([class*="text-"]):not([style*="color"]) {
        color: var(--theme-text-primary);
      }

      /* ボタン内の要素は親の色を継承 */
      [data-theme] button span:not([class*="text-"]),
      [data-theme] button p:not([class*="text-"]),
      [data-theme] button div:not([class*="text-"]),
      [data-theme] button i:not([class*="text-"]) {
        color: inherit !important;
      }

      /* ボタンの bg-blue-600/indigo-600 + text-white の組み合わせに対して、
         テーマごとの適切なボタン色を適用 */
      [data-theme] button.bg-blue-600,
      [data-theme] button.bg-indigo-600 {
        background-color: var(
          --theme-btn-primary-bg,
          var(--theme-brand-primary)
        ) !important;
      }

      /* ボタンの text-white をテーマ変数にマッピング (bg-blue/indigo の場合のみ) */
      [data-theme] button.bg-blue-600.text-white,
      [data-theme] button.bg-indigo-600.text-white {
        color: var(--theme-btn-primary-text, #ffffff) !important;
      }

      /* standard, pastel テーマでは確実に白文字 */
      [data-theme="standard"] button.bg-blue-600.text-white,
      [data-theme="standard"] button.bg-indigo-600.text-white,
      [data-theme="standard"] button.bg-green-600.text-white,
      [data-theme="pastel"] button.bg-blue-600.text-white,
      [data-theme="pastel"] button.bg-indigo-600.text-white,
      [data-theme="pastel"] button.bg-green-600.text-white {
        color: #ffffff !important;
      }

      /* green ボタンは成功色を使用 (テキストは白のまま) */
      [data-theme] button.bg-green-600 {
        background-color: var(--theme-success) !important;
        color: #ffffff !important;
      }

      /* high-contrast テーマでは緑ボタンの文字を黒に */
      [data-theme="high-contrast"] button.bg-green-600 {
        background-color: var(--theme-success) !important;
        color: #000000 !important;
      }

      /* dark テーマでは緑ボタンの文字を黒に */
      [data-theme="dark"] button.bg-green-600 {
        background-color: var(--theme-success) !important;
        color: #000000 !important;
      }

      /* 通常の text-white は常に白 (ボタン以外のテキストなど) */
      [data-theme] .text-white {
        color: #ffffff !important;
      }

      /* ボタン内のアイコンは親のテキスト色を継承 */
      [data-theme] button i,
      [data-theme] a i {
        color: inherit !important;
      }

      /* text-whiteを持つ要素内のアイコンも白に */
      [data-theme] .text-white i {
        color: #ffffff !important;
      }

      /* --- フォーム要素のテーマ対応 --- */
      [data-theme] input:not([type="radio"]):not([type="checkbox"]),
      [data-theme] textarea,
      [data-theme] select {
        background-color: var(--theme-input-bg);
        color: var(--theme-text-primary);
        border-color: var(--theme-input-border);
      }

      [data-theme] input:focus:not([type="radio"]):not([type="checkbox"]),
      [data-theme] textarea:focus,
      [data-theme] select:focus {
        border-color: var(--theme-input-focus);
        outline: none;
      }

      /* プレースホルダーの色 */
      [data-theme] input::placeholder,
      [data-theme] textarea::placeholder {
        color: var(--theme-text-secondary);
        opacity: 0.6;
      }

      /* --- Amber警告カラー背景 --- */
      [data-theme] .bg-amber-50 {
        background-color: var(--theme-warning-bg-light) !important;
      }
      [data-theme] .bg-amber-100 {
        background-color: var(--theme-warning-bg) !important;
      }

      /* --- Amber警告カラーテキスト --- */
      [data-theme] .text-amber-800 {
        color: var(--theme-warning-text) !important;
      }

      /* --- Amber警告カラーボーダー --- */
      [data-theme] .border-amber-200 {
        border-color: var(--theme-warning-border) !important;
      }

      /* --- フォルダーアイコンの色 --- */
      [data-theme] .text-yellow-400 {
        color: var(--theme-folder-closed) !important;
      }
      [data-theme] .text-yellow-500 {
        color: var(--theme-folder-open) !important;
      }

      /* ========================================
           テーマ別の特別調整
           ======================================== */

      /* --- ダークテーマ専用の調整 --- */
      /* ダークテーマでは、コントラストを強化してボーダーを見やすく */
      [data-theme="dark"] .border,
      [data-theme="dark"] [class*="border-"] {
        border-width: 1px;
      }

      /* ダークテーマでモーダルとドロップダウンのボーダーを強化 */
      [data-theme="dark"] .dropdown-menu,
      [data-theme="dark"] .user-dropdown-menu {
        border: 2px solid var(--theme-border);
      }

      /* ダークテーマでカードのボーダーを明るく */
      [data-theme="dark"] .theme-card,
      [data-theme="dark"] .settings-section {
        border-color: var(--theme-border-hover);
      }

      /* --- 高コントラストテーマ専用の調整 --- */
      /* 高コントラストテーマでは、すべてのボーダーを太く */
      [data-theme="high-contrast"] .border,
      [data-theme="high-contrast"] [class*="border-"],
      [data-theme="high-contrast"] .dropdown-menu,
      [data-theme="high-contrast"] .user-dropdown-menu,
      [data-theme="high-contrast"] .theme-card,
      [data-theme="high-contrast"] .settings-section {
        border-width: 2px !important;
        border-color: var(--theme-border) !important;
      }

      /* 高コントラストテーマでボタンを太いボーダーで強調 */
      [data-theme="high-contrast"] button,
      [data-theme="high-contrast"] .btn,
      [data-theme="high-contrast"] .dropdown-item,
      [data-theme="high-contrast"] .theme-card {
        border: 2px solid var(--theme-text-primary) !important;
        font-weight: bold;
      }

      /* --- グレースケールテーマ専用の調整 --- */
      /* グレースケールテーマでコントラストを向上 */
      [data-theme="grayscale"] .dropdown-menu,
      [data-theme="grayscale"] .user-dropdown-menu,
      [data-theme="grayscale"] .theme-card,
      [data-theme="grayscale"] .settings-section {
        border-width: 2px;
        border-color: var(--theme-border);
      }

      [data-theme="grayscale"] button,
      [data-theme="grayscale"] .btn,
      [data-theme="grayscale"] .theme-card {
        border: 2px solid var(--theme-border) !important;
      }

      [data-theme="high-contrast"] .card-menu-item:hover,
      [data-theme="dark"] .card-menu-item:hover {
        background: var(--theme-bg-secondary) !important;
      }