/* =================================================================
 * Page Specific Styles for UI Template (style.css)
 * ================================================================= */

/* --- 1. レイアウトパターン (2カラム用) --- */
.tool-settings,
.tool-results {
    height: 100%;
}

.tool-results {
    display: flex;
    flex-direction: column;
}

.tool-results .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tool-results .card-body > .h-100 {
    flex-grow: 1;
}

.tool-results-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

/* --- 2. 汎用コンポーネント --- */

/* ローディングオーバーレイ */
.loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    display: none; /* JSで flex に切り替え */
    align-items: center;
    justify-content: center;
    z-index: 9999 !important;
}

/* ドラッグ&ドロップ エリア */
#drop-zone {
    background-color: var(--bs-body-bg);
    border: 2px dashed var(--bs-border-color);
    transition: all 0.2s ease;
    cursor: pointer;
}

#drop-zone.drag-over {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

[data-bs-theme="dark"] #drop-zone {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #drop-zone.drag-over {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* 結果テーブルのラッパー */
.result-table-wrapper {
    max-height: 60vh;
    overflow-y: auto;
}

.result-table-wrapper::-webkit-scrollbar {
    width: 8px;
}
.result-table-wrapper::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg); 
}
.result-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-bg); 
    border-radius: 4px;
}
.result-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--bs-secondary); 
}

/* 画像プレビュー用 透過確認チェッカーボード背景 */
.bg-checker {
    background-image: 
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%), 
        linear-gradient(135deg, #e0e0e0 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%), 
        linear-gradient(135deg, transparent 75%, #e0e0e0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
    background-color: #ffffff;
}

/* 同期ホバーズーム用スタイル */
.zoom-container {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}
.zoom-container img {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* --- 3. SEO・GEOコンテンツ用 視認性オーバーライド --- */

/* ダークモード時のテーブルヘッダー・セルの色補正 */
[data-bs-theme="dark"] .seo-table .table-light {
    background-color: var(--bs-gray-800) !important;
    color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-700) !important;
}

[data-bs-theme="dark"] .seo-table .bg-body-tertiary {
    background-color: var(--bs-gray-900) !important;
    color: var(--bs-gray-300) !important;
}

[data-bs-theme="dark"] .seo-table td.text-muted {
    color: var(--bs-gray-400) !important;
}

/* アコーディオン（FAQ）のダークモード補正 */
[data-bs-theme="dark"] .content-seo .accordion-button {
    background-color: var(--bs-gray-900);
    color: var(--bs-gray-200);
}
[data-bs-theme="dark"] .content-seo .accordion-button:not(.collapsed) {
    background-color: var(--bs-gray-800);
    color: var(--bs-primary);
}
[data-bs-theme="dark"] .content-seo .accordion-body {
    background-color: var(--bs-gray-900);
    color: var(--bs-gray-300);
}