/* =================================================================
 * 1. Theme & Color Variables
 * ================================================================= */
:root {
    /* --- Base Theme (Light Mode) --- */
    --bs-body-bg: #f5f3ed;
    /* 僅かに明るいベージュ系 */
    --bs-body-color: #2e2e2c;
    --bs-card-bg: #ffffff;
    --bs-border-color: #dedcd3;
    --bs-text-muted: #5c5b56;
    --bs-secondary: #8c8b82;
    --bs-title: #ffc107;
    /* ★ 稲妻アイコンのカラーを#ffc107に変更 */
    --bs-form-track-bg-off: #e0e0e0;
    /* トグルOFF/スライダーのトラックの薄い色 */

    /* --- Violet Accent Colors (Light Mode) --- */
    --bs-primary: #7c5ac3;
    /* 濃い紫 */
    --bs-primary-rgb: 124, 90, 195;
    --bs-primary-bg-subtle: #e3ddee;
    /* 薄い紫 */

    /* --- Semantic Colors (Desaturated) --- */
    --bs-success: #17ac69;
    /* 成功: 緑系 */
    --bs-warning: #e2ce16;
    /* 警告: 明るい黄 */
    --bs-danger: #f12809;
    /* 危険/リセット: 明るい赤 */
    --bs-info: #2b98c9;
    /* 情報: 青系 */

    /* --- Derived Colors (Component Overrides) --- */
    --bs-outline-initial-bg: #f0f0f0;
    /* アウトラインボタンの初期グレー */


    /* Special Hover Colors (Fixed Hue) */
    --bs-primary-hover-darken: color-mix(in srgb, var(--bs-primary) 85%, black 15%);
    --bs-outline-primary-hover-bg: color-mix(in srgb, var(--bs-outline-initial-bg) 85%, black 15%);

}

[data-bs-theme="dark"] {
    /* --- Base Theme (Dark Mode) --- */
    --bs-body-bg: #261d3a;
    --bs-body-color: #d8dde2;
    --bs-card-bg: #3c3350;
    --bs-border-color: #495057;
    --bs-text-muted: #a7b0b8;
    --bs-secondary: #5939a2;
    --bs-form-track-bg-off: #4a425c;

    /* --- Violet Accent Colors (Dark) --- */
    --bs-primary: #7c5ac3;
    /* 明るい紫 */
    --bs-primary-rgb: 124, 90, 195;
    --bs-primary-bg-subtle: #3a324d;

    /* --- Semantic Colors (Dark Mode) --- */
    --bs-success: #17ac69;
    --bs-warning: #e2ce16;
    --bs-danger: #f12809;
    --bs-info: #2b98c9;

    /* --- Derived Colors (Dark Mode) --- */
    --bs-outline-initial-bg: #4a425c;

    /* Outline Button Hover Background (Dark Mode) */
    --bs-outline-primary-hover-bg: color-mix(in srgb, var(--bs-outline-initial-bg) 75%, black 25%);
}

/* =================================================================
 * 2. General Layout & Typography
 * ================================================================= */
/* Font-face for custom kana font */
@font-face {
    font-family: 'Kitchen Kana';
    src: url('../kitchen-kana.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, color 0.3s;
}

/* ヘッダータイトルにカスタムフォントを適用 */
.navbar-brand span.fw-bold {
    font-family: 'Kitchen Kana', "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}

.navbar {
    background-color: var(--bs-card-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.navbar .container-fluid {
    max-width: 1300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card {
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.container {
    max-width: 1300px;
}

.result-pane {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.tooltip-inner {
    background-color: #343a40 !important;
    color: #fff !important;
}

.lead-custom {
    max-width: 760px;
}

/* =================================================================
 * 3. Component Overrides & Custom UI
 * ================================================================= */
/* 3-1. General Buttons */
.btn-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
}

/* 稲妻アイコンのカラー設定を上書き */
.navbar-brand .fa-bolt {
    color: var(--bs-title) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-hover-darken);
    --bs-btn-hover-border-color: var(--bs-primary-hover-darken);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary-hover-darken) 90%, black 10%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary-hover-darken) 90%, black 10%);
}

.btn-outline-primary {
    background-color: var(--bs-outline-initial-bg);
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-outline-primary-hover-bg);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
}

/* PDF生成中のボタン色を無彩色に設定 */
#generate-pdf-btn.btn-secondary {
    /* 初期状態と生成中 */
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
}

[data-bs-theme="dark"] #generate-pdf-btn.btn-secondary {
    --bs-btn-bg: #495057;
    --bs-btn-border-color: #495057;
    --bs-btn-color: #ccc;
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #495057;
}

/* 3-2. Drop Zone */
#drop-area {
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    padding: 2rem;
    cursor: pointer;
    text-align: center;
    background-color: var(--bs-card-bg);
}

/* 3-3. Preview */
#preview-area {
    height: 100%;
    overflow-y: auto;
    border-radius: 1rem;
    padding: 1rem;
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pdf-page-preview {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    /* 用紙の背景は白に固定 */
    flex-shrink: 0;
    margin: 20px;
}

/* プレビューのプレースホルダ ('ここにプレビューが表示されます。') の色調整 */
#preview-area p#preview-placeholder {
    color: var(--bs-text-muted) !important;
}

/* 3-4. Toasts */
.toast-container {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1080
}

.toast-success {
    background-color: var(--bs-success);
    color: white;
}

.toast-danger {
    background-color: var(--bs-danger);
    color: white;
}

.toast-warning {
    background-color: var(--bs-warning);
    color: var(--bs-body-color);
}

.toast-info {
    background-color: var(--bs-info);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .toast-warning,
[data-bs-theme="dark"] .toast-info {
    color: #fff;
}

/* 3-5. Share Modal (丸いアイコン) */
.share-grid {
    display: grid;
    grid-template-columns: repeat(6, 48px);
    gap: 12px;
    justify-content: start;
}

@media (max-width: 480px) {
    .share-grid {
        grid-template-columns: repeat(4, 48px);
    }
}

.share-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* 丸に戻す */
    border: 1px solid var(--bs-border-color);
    background: var(--bs-card-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.share-icon:hover {
    background-color: var(--bs-border-color);
}


/* 3-6. Slider (Range) Colors */
.form-range {
    /* トラックOFF部分 */
    --bs-form-range-track-bg: var(--bs-form-track-bg-off);
    /* トラックON部分 */
    --bs-form-range-progress-bg: var(--bs-primary);
    /* 玉の色 */
    --bs-form-range-thumb-bg: var(--bs-primary);
    /* フォーカス時の影（バイオレット） */
    --bs-form-range-thumb-focus-box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
}

/* Webkit/Firefox スライダー対応 - 玉の色と影を固定 */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle);
}


/* 3-7. Switch (Toggle) Colors (玉が出るデザイン + バイオレット統一) */
.form-check-input {
    /* トラックの初期設定（OFF時） */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e");
    background-color: var(--bs-form-track-bg-off);
    border-color: var(--bs-border-color);
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .15s ease-in-out, transform .3s ease-in-out;

    /* サイズ調整 (玉が出るように) */
    width: 2.2rem;
    height: 1.2rem;
}

.form-check-input:checked {
    /* ON時のトラック色（バイオレット） */
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;

    /* ON時の玉の色 (白) と移動 */
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");

    /* 玉が出るように調整 */
    transform: translateX(1rem);
}

/* OFF時のホバー/アクティブ時の青いちらつき抑制 */
.form-check-input:not(:checked) {
    background-image: var(--bs-form-switch-bg);
}

.form-check-input:not(:checked):hover,
.form-check-input:not(:checked):active,
.form-check-input:not(:checked):focus {
    background-color: var(--bs-form-track-bg-off) !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: none !important;
}

/* ON/OFF共通: フォーカス時の青いリングをバイオレットに */
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem var(--bs-primary-bg-subtle) !important;
}