/* =========================================
   Theme 1: 綺麗め・透明感 (.theme-situation-clean)
========================================= */

/* 1. カラーパレットと全体変数の上書き */
html.theme-situation-clean {
    --bg-main: #fafbfc;
    --bg-card: rgba(255, 255, 255, 0.6);
    --bg-card-hover: rgba(255, 255, 255, 0.8);
    --text-main: #475569;
    --text-muted: #64748b;
    --primary: #6b7a99;
    --primary-hover: #546280;
    --accent: #c48c9f;
    --accent-glow: rgba(220, 164, 182, 0.3);
    --border: rgba(0, 0, 0, 0.15);
    --border-focus: var(--accent);
    --radius: 12px;

    /* エフェクト用変数の無効化・調整 */
    --bg-pattern: none;
    --shadow-main-glow: none;
    --shadow-accent-glow: 0 4px 15px var(--accent-glow);
    --shadow-text-glow: none;
    --shadow-box-glow: 0 8px 32px rgba(0, 0, 0, 0.04);
    --display-hologram: none;
    --result-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(245, 247, 250, 0.9) 100%);
    --glass-blur: blur(16px);
}

/* 2. テーマ専用のレイアウト調整 */
.theme-situation-clean body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

/* 見出しは上品な明朝体に */
.theme-situation-clean h2,
.theme-situation-clean .carte-title {
    font-family: 'Noto Serif JP', 'Yu Mincho', serif;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 24px;
}

/* すりガラス風パネルの微調整 */
.theme-situation-clean .glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-box-glow);
}

/* ボタンの透明感 */
.theme-situation-clean .btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(155, 164, 181, 0.3);
    transition: var(--transition);
}

.theme-situation-clean .btn-primary:hover {
    background-color: var(--accent);
    box-shadow: 0 6px 16px var(--accent-glow);
    transform: translateY(-2px);
}

/* フォーム要素の微調整（綺麗め）★textareaを追加 */
.theme-situation-clean .form-section input:not([type="radio"]):not([type="checkbox"]),
.theme-situation-clean .form-section select,
.theme-situation-clean .form-section textarea {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--text-main);
    transition: var(--transition);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    width: 100%;
}

.theme-situation-clean .form-section input:focus,
.theme-situation-clean .form-section select:focus,
.theme-situation-clean .form-section textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(220, 164, 182, 0.2);
}

/* ★追加: ファイル選択ボタンの統一感（綺麗め） */
.theme-situation-clean input[type="file"]::file-selector-button {
    background-color: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(155, 164, 181, 0.2);
}

.theme-situation-clean input[type="file"]::file-selector-button:hover {
    background-color: var(--accent);
    box-shadow: 0 4px 10px var(--accent-glow);
}

/* ★追加: 必須バッジのカラーリング（綺麗め） */
.theme-situation-clean .required-badge {
    background-color: var(--accent);
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8em;
    margin-left: 6px;
    box-shadow: 0 2px 4px rgba(196, 140, 159, 0.3);
    vertical-align: middle;
}

/* ★追加: トグルスイッチの視認性向上（綺麗め） */
.theme-situation-clean .toggle-switch {
    background-color: rgba(0, 0, 0, 0.08);
}
.theme-situation-clean .toggle-slider {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.theme-situation-clean .toggle-label:has(input:checked) .toggle-switch {
    background-color: var(--primary);
}
.theme-situation-clean .toggle-label:has(input:checked) .toggle-slider {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ★追加: リスト枠が暗いグレーになる問題を強制リセット */
.theme-situation-clean .carte-panel [class*="box"],
.theme-situation-clean .carte-panel [class*="list"],
.theme-situation-clean .carte-panel ul {
    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================
   Theme 2: 耽美・エモい (.theme-situation-aesthetic)
========================================= */

/* 1. カラーパレットと全体変数の上書き */
html.theme-situation-aesthetic {
    --bg-main: #0a0a0c;
    --bg-card: rgba(18, 18, 22, 0.85);
    --bg-card-hover: rgba(28, 28, 34, 0.95);
    --text-main: #fcf8f2;
    --text-muted: #a8a192;
    --primary: #c22929;
    --primary-hover: #b02323;
    --accent: #d4952f;
    --accent-glow: rgba(183, 121, 31, 0.3);
    --border: rgba(212, 149, 47, 0.4);
    --border-focus: var(--accent);
    --radius: 2px;

    /* エフェクト用変数の調整 */
    --bg-pattern: linear-gradient(to bottom, #0a0a0c 0%, #1a1515 50%, #2a1a1a 100%);
    --shadow-main-glow: 0 0 15px rgba(139, 28, 28, 0.4);
    --shadow-box-glow: 0 4px 20px rgba(0, 0, 0, 0.8);
    --display-hologram: none;
    --result-bg: rgba(10, 10, 12, 0.9);
    --glass-blur: blur(4px);
}

/* 2. テーマ専用のレイアウト調整 */
.theme-situation-aesthetic body {
    font-family: 'Noto Serif JP', 'Yu Mincho', 'Sawarabi Mincho', serif;
    font-size: 0.95rem;
    line-height: 2;
    letter-spacing: 0.15em;
}

/* 縦書きの文学的アプローチ */
.theme-situation-aesthetic .carte-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.5rem;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
    padding: 0 20px;
    margin: 0 auto 20px auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    height: 150px;
}

/* フォーム見出しの装飾 */
.theme-situation-aesthetic .form-section h2 {
    color: var(--text-main);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 10px;
}

/* ボタンを蝋封や古い切符のように */
.theme-situation-aesthetic .btn-primary {
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: inset 0 0 10px rgba(183, 121, 31, 0.1);
    letter-spacing: 0.3em;
    font-weight: normal;
}

.theme-situation-aesthetic .btn-primary:hover {
    background-color: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent-glow);
}

/* フォーム要素の微調整（耽美）★textareaを追加 */
.theme-situation-aesthetic .form-section input:not([type="radio"]):not([type="checkbox"]),
.theme-situation-aesthetic .form-section select,
.theme-situation-aesthetic .form-section textarea {
    background: rgba(10, 10, 12, 0.6);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px 12px;
    color: var(--accent);
    font-family: inherit;
    transition: var(--transition);
    width: 100%;
}

.theme-situation-aesthetic .form-section input:focus,
.theme-situation-aesthetic .form-section select:focus,
.theme-situation-aesthetic .form-section textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    background: rgba(18, 18, 22, 0.9);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ★追加: ファイル選択ボタンの統一感（耽美） */
.theme-situation-aesthetic input[type="file"]::file-selector-button {
    background-color: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.theme-situation-aesthetic input[type="file"]::file-selector-button:hover {
    background-color: var(--accent);
    color: #000;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* ★追加: 必須バッジのカラーリング（耽美） */
.theme-situation-aesthetic .required-badge {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 2px;
    padding: 1px 6px;
    font-size: 0.75em;
    margin-left: 6px;
    letter-spacing: 0.1em;
    vertical-align: middle;
}

/* ★追加: リスト枠が暗いグレーになる問題を強制リセット */
.theme-situation-aesthetic .carte-panel [class*="box"],
.theme-situation-aesthetic .carte-panel [class*="list"],
.theme-situation-aesthetic .carte-panel ul {
    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================
   Theme 3: ポップ・手帳風 (.theme-situation-pop)
========================================= */

/* 1. カラーパレットと全体変数の上書き */
html.theme-situation-pop {
    --bg-main: #fffdf7;
    --bg-card: #ffffff;
    --bg-card-hover: #fafafa;
    --text-main: #374151;
    --text-muted: #6b7280;
    --primary: #f59e0b;
    --primary-hover: #d97706;
    --accent: #10b981;
    --accent-glow: rgba(52, 211, 153, 0.4);
    --border: #e5e7eb;
    --border-focus: var(--primary);
    --radius: 8px;

    /* 手帳風の方眼紙エフェクト */
    --bg-pattern: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
    --bg-size: 20px 20px;

    --shadow-main-glow: none;
    --shadow-box-glow: 4px 4px 0px rgba(0, 0, 0, 0.05);
    --display-hologram: none;
    --result-bg: #ffffff;
    --glass-blur: blur(0px);
}

/* 2. テーマ専用のレイアウト調整 */
.theme-situation-pop body {
    font-family: 'Zen Maru Gothic', 'Kiwi Maru', 'Hiragino Rounded Gothic ProN', sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* パネルを付箋のように見せる */
.theme-situation-pop .carte-panel {
    border: 2px solid var(--primary);
    position: relative;
    transform: rotate(-1deg);
}

/* マスキングテープ風の装飾 */
.theme-situation-pop .carte-panel::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: 120px;
    height: 25px;
    background-color: rgba(52, 211, 153, 0.6);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.theme-situation-pop .carte-title {
    color: var(--text-main);
    text-align: center;
    font-weight: bold;
    border-bottom: 3px dotted var(--primary);
    padding-bottom: 10px;
    margin-top: 15px;
}

/* ラベルをマーカー風に */
.theme-situation-pop .carte-item .label {
    background: linear-gradient(transparent 60%, rgba(251, 191, 36, 0.4) 60%);
    padding: 0 4px;
    font-weight: bold;
}

/* ボタンをシール風に */
.theme-situation-pop .btn-primary {
    background-color: var(--primary);
    color: #78350f;
    border: 2px dashed #ffffff;
    box-shadow: 0 0 0 4px var(--primary), 4px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    font-weight: bold;
    transform: rotate(1deg);
}

.theme-situation-pop .btn-primary:hover {
    background-color: var(--primary-hover);
    transform: rotate(0deg) translateY(2px);
    box-shadow: 0 0 0 4px var(--primary-hover), 2px 4px 0px rgba(0, 0, 0, 0.1);
}

/* フォーム要素の微調整（ポップ）★textareaを追加 */
.theme-situation-pop .form-section input:not([type="radio"]):not([type="checkbox"]),
.theme-situation-pop .form-section select,
.theme-situation-pop .form-section textarea {
    background: #ffffff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--text-main);
    font-weight: bold;
    transition: var(--transition);
    width: 100%;
}

.theme-situation-pop .form-section input:focus,
.theme-situation-pop .form-section select:focus,
.theme-situation-pop .form-section textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 2px 2px 0px rgba(245, 158, 11, 0.2);
    transform: translateY(-1px);
}

/* ★追加: ファイル選択ボタンの統一感（ポップ） */
.theme-situation-pop input[type="file"]::file-selector-button {
    background-color: var(--primary);
    color: #ffffff;
    border: 2px dashed #ffffff;
    border-radius: 12px;
    padding: 4px 12px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 0 2px var(--primary), 2px 4px 0px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.theme-situation-pop input[type="file"]::file-selector-button:hover {
    background-color: var(--primary-hover);
    transform: translateY(2px);
    box-shadow: 0 0 0 2px var(--primary-hover), 1px 2px 0px rgba(0, 0, 0, 0.1);
}

/* ★追加: 必須バッジのカラーリング（ポップ） */
.theme-situation-pop .required-badge {
    background-color: #ef4444;
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 6px;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    display: inline-block;
    transform: rotate(-3deg);
    vertical-align: middle;
}

/* =========================================
   修正版: リスト枠（carte-option-block）のデザイン上書き
========================================= */

/* 綺麗め・透明感（クリア）用のリセット */
.theme-situation-clean .carte-option-block {
    /* 暗いグレーを消し、ほんのり白く透ける明るい背景に変更 */
    background-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(155, 164, 181, 0.1) !important;
}

/* ポップ・手帳風用のリセット */
.theme-situation-pop .carte-option-block {
    /* 濁った背景と影を完全に消し、後ろの方眼紙模様を活かす */
    background-color: transparent !important;
    box-shadow: none !important;
    /* 手帳のメモ欄のように、薄い点線の枠を追加（お好みで） */
    border: 2px dotted #e5e7eb !important;
}

/* 耽美・エモい用のリセット（念のための統一感担保） */
.theme-situation-aesthetic .carte-option-block {
    /* 親テーマの固定色ではなく、テーマ専用の半透明の黒に変更 */
    background-color: rgba(10, 10, 12, 0.6) !important;
    box-shadow: none !important;
}