/*
 * カッティングステッカー見積システム プラグイン
 * Version: 2.0.9
 * ファイル名: assets/css/wizard-style.css
 * V2.0.9: v2.0.2(サイズ/枚数入力CSS), v2.0.7(オレンジボタンCSS), v2.0.4(AForms風レイアウト/カテゴリ削除) をすべてマージ。
 */

/* === WordPressテーマとの干渉を防ぐ === */
#designComplexityToolApp h2,
#designComplexityToolApp h3 {
    font-weight: 700 !important;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* === メインコンテナ (v1.5.3 スタイル) === */
#designComplexityToolApp {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f7f8fa;
    max-width: 56rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* V2.0.1: Taildwindの px-4 py-8 をCSSで適用 */
    padding: 2rem 1rem;
}
@media (min-width: 640px) {
    #designComplexityToolApp {
        padding: 2rem;
    }
}

/* === フォーム基本スタイル (v1.5.3 スタイル) === */
#designComplexityToolApp .form-section {
    margin-bottom: 2.5rem;
}
#designComplexityToolApp .form-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}
#designComplexityToolApp .input-group {
    margin-bottom: 1rem;
}
#designComplexityToolApp .input-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
    display: block;
}
#designComplexityToolApp .input-group input[type="text"],
#designComplexityToolApp .input-group input[type="email"],
#designComplexityToolApp .input-group input[type="number"],
#designComplexityToolApp .input-group select,
#designComplexityToolApp .input-group textarea {
    width: 100%;
    padding: 0.625rem 0.9375rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#designComplexityToolApp .input-group input[type="file"] {
    font-size: 0.875rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0.5rem;
    width: 100%;
}
#designComplexityToolApp .input-group input:focus,
#designComplexityToolApp .input-group select:focus,
#designComplexityToolApp .input-group textarea:focus {
    outline: none;
    border-color: #6a3de4;
    box-shadow: 0 0 0 3px rgba(106, 61, 228, 0.1);
}
#designComplexityToolApp .input-group select:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

/* === Step 2: ファイルアップロード (v1.5.3 スタイル) === */
#designComplexityToolApp .drop-zone {
    border: 2px dashed #ccc;
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: #fff;
}
#designComplexityToolApp .drop-zone.dragover {
    background-color: #f0f5ff;
    border-color: #6a3de4;
}
/* プレビューの市松模様をすべてグレー階調にする */
.previewArea {
    position: relative;
    padding: 1rem;
    border-radius: 0.75rem;

    /* ★ 白マスの色（薄いグレー） */
    background-color: #f3f4f6;

    /* ★ 濃いグレーのマス */
    background-image:
        linear-gradient(45deg, #c7c9cc 25%, transparent 25%, transparent 75%, #c7c9cc 75%, #c7c9cc),
        linear-gradient(45deg, #c7c9cc 25%, transparent 25%, transparent 75%, #c7c9cc 75%, #c7c9cc);

    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* 画像自体の背景色は透明にして、市松模様が透けるようにする */
#designComplexityToolApp .preview-img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: transparent; /* ここがポイント：白背景をやめる */
}

/* V2.0.1: Tailwindの .uploadButton をCSSで定義 */
#designComplexityToolApp .uploadButton {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
#designComplexityToolApp .uploadButton:hover {
    background-color: #4338ca; /* indigo-700 */
}

/* === ★ V2.0.2 (V2.0.9): サイズ入力・枚数入力 (単位付き) === */
#designComplexityToolApp .input-with-unit-container {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    background-color: #fff;
}
#designComplexityToolApp .input-with-unit-container:focus-within {
    border-color: #6a3de4;
    box-shadow: 0 0 0 3px rgba(106, 61, 228, 0.1);
}
#designComplexityToolApp .input-with-unit-container input[type="number"] {
    width: 100%; /* flex-grow: 1 相当 */
    border: none;
    box-shadow: none;
    padding: 0.625rem 0.9375rem;
    text-align: right; /* 数値は右寄せ */
}
#designComplexityToolApp .input-with-unit-container input[type="number"]:focus {
    outline: none;
    box-shadow: none;
}
#designComplexityToolApp .input-with-unit-container .unit-label {
    padding: 1.0rem 1rem; /* V2.0.8: 0.5rem -> 0.625rem に戻す */
    background-color: #f3f4f6; /* gray-100 */
    color: #4b5563; /* gray-600 */
    border-left: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
    font-size: 0.875rem;
    font-weight: 500;
}
/* V2.0.2: ステップ4 (枚数) の幅を40%に */
#designComplexityToolApp .quantity-input-container {
    width: 40%;
    min-width: 150px;
}
/* V2.0.1: ステップ2のグリッド (Tailwind .grid.sm:grid-cols-2) */
#designComplexityToolApp .step2-size-inputs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    #designComplexityToolApp .step2-size-inputs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* === ★ V2.0.9: 修正ここまで === */


/* === 汎用ローダー (v1.5.3 スタイル) === */
#designComplexityToolApp .loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #6a3de4;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 1rem auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === メッセージボックス (v1.5.3 スタイル) === */
.custom-message-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #f8d7da; color: #721c24; padding: 1rem 1.5rem; border: 1px solid #f5c6cb; border-radius: 0.375rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); z-index: 10001; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; max-width: 90%; }
.custom-message-box.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.custom-message-box.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
.custom-message-box.info { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }

/* === モーダル (v1.5.3 スタイル) === */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;

    /* ▼ここがポイント：中央揃え → 上寄せ＋スクロール */
    align-items: flex-start;
    justify-content: center;

    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;

    /* 画面が狭い時に中身をスクロールできるように */
    overflow-y: auto;
    padding: 2rem 1rem;
}

.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 440px;
    transform: scale(0.95);
    transition: transform 0.3s ease;

    /* 画面が狭い時でも上下に少し余白を確保 */
    margin: 1rem 0;
}

.modal-overlay.show .modal-content { transform: scale(1); }
.modal-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 2rem; text-align: center; color: #1f2937; }
.modal-input-group { margin-bottom: 1.5rem; text-align: left; }
.modal-input-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #374151; font-size: 0.875rem; }
.modal-input-group input { 
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 1rem;
}
.modal-input-group input:focus {
     outline: none;
    border-color: #6a3de4;
    box-shadow: 0 0 0 3px rgba(106, 61, 228, 0.2);
}
.modal-buttons { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.modal-buttons button { width: 100%; padding: 0.875rem 1rem; border-radius: 0.375rem; font-size: 1rem; font-weight: 700; border: none; cursor: pointer; transition: background-color 0.2s; }
.modal-button-primary { background-color: #6366f1; color: white; }
.modal-button-primary:hover { background-color: #4f46e5; }
.modal-button-secondary { background-color: #e5e7eb; color: #374151; }
.modal-button-secondary:hover { background-color: #d1d5db; }
.error-message { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; display: none; }
.ai-upload-area { border: 2px dashed #d1d5db; border-radius: 0.5rem; padding: 1rem; text-align: center; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; background-color: #f9fafb; }
.ai-upload-area.dragover { background-color: #f0f5ff; border-color: #6a3de4; }
.file-info-text { margin-top: 0.75rem; font-weight: 500; color: #1f2937; font-size: 0.875rem; }


/* === Step 6: カラープレビュー (v1.5.3 スタイル) === */
#designComplexityToolApp .color-preview-box {
    width: 50px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
/* V2.0.1: Tailwind .input-group をCSSで定義 */
#designComplexityToolApp .colorDropdownContainer .input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#designComplexityToolApp .colorDropdownContainer .input-group label {
    margin-bottom: 0;
    flex-shrink: 0;
}
#designComplexityToolApp .colorDropdownContainer .input-group select {
    flex-grow: 1;
}

/* === ラジオボタングループ (v1.5.3 スタイル) === */
#designComplexityToolApp .radio-group-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: #fff;
}
#designComplexityToolApp .radio-group-item:has(input:checked) {
    background-color: #f0f5ff;
    border-color: #6a3de4;
}
#designComplexityToolApp .radio-group-item input[type="radio"] {
    margin-top: 0.2rem;
    margin-right: 0.75rem;
    accent-color: #6a3de4;
    flex-shrink: 0;
}
#designComplexityToolApp .radio-group-item .plan-description, 
#designComplexityToolApp .radio-group-item .shipping-description {
    font-size: 0.875rem;
    color: #6b7280;
}
/* V2.0.1: Tailwind .radio-group をCSSで定義 */
#designComplexityToolApp .radio-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap; /* レスポンシブ対応 */
}
#designComplexityToolApp .radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0; /* .input-groupのスタイルを上書き */
    font-weight: 400; /* .input-groupのスタイルを上書き */
    color: #333; /* .input-groupのスタイルを上書き */
}
#designComplexityToolApp .radio-group input[type="radio"] {
    margin-right: 0.5rem;
}


/* === V2.0.4 (V2.0.9): Step 11: AForms風 見積もりテーブル (カテゴリ削除) === */
#designComplexityToolApp .quote-table-container {
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden;
    background-color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
}
/* ヘッダー */
#designComplexityToolApp .quote-table-header {
    display: none; /* スマホでは非表示 */
    background-color: #f9fafb; /* gray-50 */
    font-weight: 500;
    color: #6b7280; /* gray-500 */
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
/* 明細行 */
#designComplexityToolApp .quote-table-row {
    border-bottom: 1px solid #e5e7eb;
}
#designComplexityToolApp .quote-table-row:last-child {
    border-bottom: none;
}
/* V2.0.4: デザイン名ヘッダー行 (カテゴリ列の代わり) */
#designComplexityToolApp .quote-table-row-design-header {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 600;
    color: #1f2937; /* gray-800 */
    padding: 0.75rem 1rem;
    font-size: 1rem;
}
/* セル共通 */
#designComplexityToolApp .quote-cell {
    padding: 0.75rem 1rem;
    color: #111827; /* gray-900 */
}
/* 項目セル (スマホ用) */
#designComplexityToolApp .cell-item {
    font-weight: 600;
    font-size: 1rem;
}
#designComplexityToolApp .item-details {
    font-size: 0.875rem;
    font-weight: 400;
    color: #4b5563; /* gray-600 */
    display: block;
    margin-top: 0.125rem;
}
/* 割引行 */
#designComplexityToolApp .discount-row .cell-item,
#designComplexityToolApp .discount-row .cell-price {
    color: #dc2626; /* red-600 */
    font-weight: 600;
}
/* 単価・数量 (スマホ用) */
#designComplexityToolApp .cell-unitprice,
#designComplexityToolApp .cell-quantity {
    display: inline-block;
    padding: 0;
    font-size: 0.875rem;
    color: #6b7280;
    margin-right: 0.75rem;
}
#designComplexityToolApp .cell-unitprice:before { content: "単価: "; }
#designComplexityToolApp .cell-quantity:before { content: "数量: "; }

/* 金額 (スマホ用) */
#designComplexityToolApp .cell-price {
    font-size: 1.125rem;
    font-weight: 600;
    text-align: right;
    padding-top: 0.25rem;
}

/* --- PC表示 (641px以上) --- */
@media (min-width: 641px) {
    /* V2.0.4: 4列レイアウト (カテゴリ削除) */
    #designComplexityToolApp .quote-table-header,
    #designComplexityToolApp .quote-table-row {
        display: grid;
        /* V2.0.9: 4列のレイアウトを修正 (項目を広く) */
        grid-template-columns: 3fr 1fr 1fr 1.2fr; /* 項目, 単価, 数量, 金額 */
        align-items: center;
    }
    #designComplexityToolApp .quote-table-header {
        padding: 0;
    }
    #designComplexityToolApp .quote-table-header .quote-cell {
        padding: 0.5rem 1rem;
    }
    /* V2.0.4: デザイン名ヘッダー行 (PC) */
    #designComplexityToolApp .quote-table-row-design-header {
        grid-column: 1 / -1; /* 全幅 */
        padding: 0.75rem 1rem;
    }
    /* 項目 */
    #designComplexityToolApp .cell-item {
        font-weight: 400;
        font-size: 0.875rem;
    }
    /* V2.0.9: カテゴリ列は存在しないので削除 */
    /* #designComplexityToolApp .cell-category { ... } */

    /* 単価・数量・金額 */
    #designComplexityToolApp .cell-unitprice,
    #designComplexityToolApp .cell-quantity,
    #designComplexityToolApp .cell-price {
        text-align: right;
        font-size: 0.875rem;
        font-weight: 400;
        padding: 0.75rem 1rem;
    }
    #designComplexityToolApp .cell-unitprice:before,
    #designComplexityToolApp .cell-quantity:before {
        content: ""; /* PCでは「単価:」などを非表示 */
    }
    #designComplexityToolApp .cell-price {
        font-size: 0.95rem;
        font-weight: 600;
    }
    /* V2.0.4: 割引行 (PC) */
    #designComplexityToolApp .discount-row .cell-item {
        grid-column: 1 / 4; /* 3列結合 */
        text-align: right;
        font-weight: 600;
    }
    #designComplexityToolApp .discount-row .cell-price {
        font-weight: 600;
    }
}
/* === V2.0.9: 見積もりテーブルここまで === */


/* === 合計金額欄 (v1.5.3 スタイル) === */
#designComplexityToolApp .price-summary-list {
    margin-top: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: #fff;
}
#designComplexityToolApp .price-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; }
#designComplexityToolApp .price-summary-row:last-child { border-bottom: none; }
#designComplexityToolApp .price-summary-row dt { font-weight: 500; color: #374151; }
#designComplexityToolApp .price-summary-row dd { font-weight: 600; color: #1f2937; font-size: 1.125rem; text-align: right; white-space: nowrap; }
#designComplexityToolApp .price-summary-row.total-row { background-color: #f9fafb; border-top: 2px solid #6a3de4; padding: 1rem 1.5rem; }
#designComplexityToolApp .price-summary-row.total-row dt { font-size: 1.25rem; font-weight: 700; color: #4f46e5; }
#designComplexityToolApp .price-summary-row.total-row dd { font-size: 1.75rem; font-weight: 700; color: #4f46e5; }

/* === アニメーション (v1.5.3 スタイル) === */
@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
#designComplexityToolApp #createQuoteButton.pulsing-button {
    animation: pulse-shadow 2s infinite;
}
@keyframes blink-animation {
    50% { background-color: #4f46e5; } /* 少し濃い紫色 */
}
#designComplexityToolApp .blinking-button {
    animation: blink-animation 1.5s ease-in-out infinite;
}
#designComplexityToolApp .input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* === ナビゲーションボタン (v1.5.3 スタイル) === */
#designComplexityToolApp .wizard-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}
#designComplexityToolApp .wizard-btn {
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1rem;
}
#designComplexityToolApp .wizard-btn.next {
    background-color: #6a3de4;
    color: white;
}
#designComplexityToolApp .wizard-btn.next:hover:not(:disabled) {
    background-color: #5833b8;
}
#designComplexityToolApp .wizard-btn.prev {
    background-color: #e5e7eb;
    color: #374151;
}
#designComplexityToolApp .wizard-btn.prev:hover:not(:disabled) {
     background-color: #d1d5db;
}
#designComplexityToolApp .wizard-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    color: #777;
}

/* ★★★ V2.0.7: オレンジ色のボタンを追加 ★★★ */
#designComplexityToolApp .wizard-btn.orange {
    background-color: #f97316; /* オレンジ */
    color: white;
}
#designComplexityToolApp .wizard-btn.orange:hover:not(:disabled) {
    background-color: #ea580c; /* 濃いオレンジ */
}

/* === Step 8: デザイン追加ボタン (v1.5.3 スタイル) === */
#designComplexityToolApp #addDesignYes {
    background-color: #22c55e; /* green-500 */
    color: white;
}
#designComplexityToolApp #addDesignYes:hover {
    background-color: #16a34a; /* green-600 */
}

/* === Step 11: 見積もりボタン (v1.5.3 スタイル) === */
#designComplexityToolApp #createQuoteButton {
    background-color: #dc2626; /* red-600 */
    color: white;
    font-weight: 700;
    padding: 0.875rem 2rem;
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.125rem; /* text-lg */
}
#designComplexityToolApp #createQuoteButton:hover {
    background-color: #b91c1c; /* red-700 */
}

/* === Step 11: PDF/製作依頼ボタン (v1.5.3 スタイル) === */
#designComplexityToolApp #actionButtonContainer {
    margin-top: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 640px) {
    #designComplexityToolApp #actionButtonContainer {
        flex-direction: row;
        justify-content: center;
    }
}
#designComplexityToolApp #actionButtonContainer button {
    width: 100%;
    font-weight: 700;
    padding: 0.875rem 2rem;
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1rem;
}
@media (min-width: 640px) {
    #designComplexityToolApp #actionButtonContainer button {
        width: auto;
    }
}
#designComplexityToolApp #actionButtonContainer #downloadPdfButton {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
}
#designComplexityToolApp #actionButtonContainer #downloadPdfButton:hover {
    background-color: #4338ca; /* indigo-700 */
}
#designComplexityToolApp #actionButtonContainer #requestProductionButton {
    background-color: #16a34a; /* green-600 */
    color: white;
}
#designComplexityToolApp #actionButtonContainer #requestProductionButton:hover {
    background-color: #15803d; /* green-700 */
}


/* === デザイン名ヘッダー (v1.5.3 スタイル) === */
#designComplexityToolApp .design-name-header {
    font-size: 1.125rem;
    font-weight: 700;
    color: #4f46e5;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

/* === V2.0.1: テキスト画像ジェネレーター用のCSS === */
#designComplexityToolApp #text-image-generator-app {
    line-height: 1.5;
}
#designComplexityToolApp #text-image-generator-app #textCanvas-generator {
    display: none;
}
#designComplexityToolApp #text-image-generator-app input[type="file"] {
     font-size: 0.875rem;
}
/* V2.0.1: テキストジェネレーターのグリッド (Tailwind .md:grid-cols-3) */
#designComplexityToolApp .text-gen-size-inputs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    #designComplexityToolApp .text-gen-size-inputs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* V2.0.1: リアルタイムプレビュー (Tailwind .relative) */
#designComplexityToolApp #realtime-preview-area {
    position: relative;
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background-color: #f9fafb; /* gray-50 */
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#designComplexityToolApp #realtime-preview-img {
    max-width: 100%;
    max-height: 200px;
    transition: opacity 0.2s;
    opacity: 0;
}
#designComplexityToolApp #realtime-loader {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
#designComplexityToolApp #realtime-loader p {
    margin-left: 0.5rem;
    color: #4b5563; /* gray-600 */
}
/* ================================
   Lightning テーマの影響を打ち消す用
   ウィザード内フォームのリセット・共通スタイル
   ================================ */

/* 基本のボックスサイズ */
#designComplexityToolApp,
#designComplexityToolApp * {
    box-sizing: border-box;
}

/* input / select / textarea のベーススタイル */
#designComplexityToolApp input,
#designComplexityToolApp select,
#designComplexityToolApp textarea {
    margin: 0 !important;              /* Lightning の margin を打ち消す */
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    padding: 0.45rem 0.6rem;
    background-color: #ffffff;
    max-width: 100%;
}

/* type="number" のズレ防止（Lightning のフォーム系から切り離す） */
#designComplexityToolApp input[type="number"] {
    -moz-appearance: textfield;
}
#designComplexityToolApp input[type="number"]::-webkit-outer-spin-button,
#designComplexityToolApp input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* label の下マージンもウィザード用に統一 */
#designComplexityToolApp .input-group > label,
#designComplexityToolApp label {
    margin: 0 0 0.25rem 0;
    font-weight: 500;
    display: block;
}

/* ボタンも Lightning と切り分け */
#designComplexityToolApp button {
    margin: 0 !important;
    border-radius: 9999px;
    border: none;
    padding: 0.5rem 1.2rem;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 既存の「次へ」「戻る」などに合わせて色を揃えたい場合はお好みで */
#designComplexityToolApp #nextBtn,
#designComplexityToolApp #prevBtn,
#designComplexityToolApp #downloadPdfButton,
#designComplexityToolApp #requestProductionButton {
    background-color: #111827;
    color: #ffffff;
}
/* ================================
   戻る / 次へ ボタンのカスタムスタイル
   ================================ */

/* ボタン共通（負の影響防止） */
#designComplexityToolApp button {
    margin: 0 !important;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    padding: 0.6rem 1.6rem;
    cursor: pointer;
}


/* ▼ 『戻る』ボタン（グレー） */
#designComplexityToolApp #prevBtn {
    background-color: #9ca3af;   /* 落ち着いたグレー */
    color: white;
}
#designComplexityToolApp #prevBtn:hover {
    background-color: #6b7280;   /* 少し濃く */
}


/* ▼ 『次へ』ボタン（赤系 + 点滅） */
#designComplexityToolApp #nextBtn {
    background-color: #e11d48;   /* 赤系（強め） */
    color: white;
    animation: nextBtnBlink 1.2s infinite ease-in-out;
}


/* ▼ 次へボタンの点滅アニメーション */
@keyframes nextBtnBlink {
    0% {
        box-shadow: 0 0 0px rgba(225, 29, 72, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(225, 29, 72, 0.8);
        transform: scale(1.04); /* ほんの少し大きく */
    }
    100% {
        box-shadow: 0 0 0px rgba(225, 29, 72, 0.5);
        transform: scale(1);
    }
}

/* ラジオボタンとテキストの縦位置を揃える */
#designComplexityToolApp .radio-group-item {
    align-items: center;  /* flex-start → center に上書き */
}

/* ラジオボタンの不必要な上マージンを削除 */
#designComplexityToolApp .radio-group-item input[type="radio"] {
    margin-top: 0;        /* 0.2rem → 0 に上書き */
}

/* ============================
   デザイン追加ステップのボタンレイアウト強制
   ============================ */

/* まず、外側のコンテナの Tailwind flex を上書きする */
#designComplexityToolApp .add-design-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;   /* ボタン間のスペース */
    flex-wrap: nowrap !important;
    margin-top: 1.5rem;
}

/* ボタンサイズ */
#designComplexityToolApp .add-design-buttons button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}

/* ▼ PC：横並び */
@media (min-width: 601px) {
    #designComplexityToolApp .add-design-buttons {
        flex-direction: row !important;
    }
}

/* ▼ スマホ：縦並びに変更 */
@media (max-width: 600px) {
    #designComplexityToolApp .add-design-buttons {
        flex-direction: column !important;
    }

    #designComplexityToolApp .add-design-buttons button {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================
   見積もり作成（最終ステップ）ボタンを赤に戻す
   ============================ */

#designComplexityToolApp #nextBtn.final-step,
#designComplexityToolApp .wizard-btn.final-step {
    background-color: #ff6a00 !important;   /* 元の赤系オレンジ */
    border-color: #ff6a00 !important;
    color: #fff !important;
}

#designComplexityToolApp #nextBtn.final-step:hover,
#designComplexityToolApp .wizard-btn.final-step:hover {
    background-color: #e45d00 !important;   /*  hoverで少し暗く */
    border-color: #e45d00 !important;
}

/* ============================================
   Sticky Navigation Buttons（パターンC実装）
   ============================================ */
#designComplexityToolApp .wizard-navigation {
    position: sticky;
    bottom: 0;
    z-index: 999;
    background: #fff;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* 次へボタン（赤 / 点滅アニメーション） */
#designComplexityToolApp .wizard-navigation .next {
    background-color: #e53935 !important;
    color: #fff;
    animation: pulseNext 1.2s infinite;
}

@keyframes pulseNext {
    0%   { opacity: 1;   }
    50%  { opacity: 0.55; }
    100% { opacity: 1;   }
}

/* 戻るボタン（グレー） */
#designComplexityToolApp .wizard-navigation .prev {
    background-color: #9ca3af !important;
    color: #fff;
}

#designComplexityToolApp {
    position: sticky;
    top: 70px;      /* ヘッダーの高さに応じて調整  */
    z-index: 20;
    background: #f5f5f5; /* 任意。チラつき防止 */
}