/* =================================================================
 * 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;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bs-body-bg-rgb), 0.7);
    display: none; /* JSで 'flex' に変更して表示 */
    align-items: center;
    justify-content: center;
    z-index: 1090;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ドラッグ&ドロップ エリア */
#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: 500px;
    overflow-y: auto;
}

/* --- 3. サジェストキーワード抽出ツール用 追加スタイル --- */

#baseKeyword::placeholder {
    opacity: 0.35 !important;
}
[data-bs-theme="dark"] #baseKeyword::placeholder {
    opacity: 0.25 !important;
}

.keyword-row {
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}
.keyword-row:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

.keyword-text {
    position: relative;
    display: inline-block;
}
.keyword-text::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--bs-primary);
    transform-origin: bottom right;
    transition: transform 0.2s ease-out;
}
.keyword-text:hover {
    color: var(--bs-primary);
}
.keyword-text:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.copy-single-btn {
    padding: 0 0.4rem !important;
    font-size: 0.85rem !important;
    opacity: 0; 
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.keyword-row:hover .copy-single-btn {
    opacity: 1;
}
.copy-single-btn:hover {
    background-color: var(--bs-secondary-bg);
}

/* インテントマップ用スタイル */
.bg-intent-know { background-color: rgba(13, 110, 253, 0.1); }
.bg-intent-buy  { background-color: rgba(255, 193, 7, 0.1); }
.bg-intent-do   { background-color: rgba(25, 135, 84, 0.1); }
.bg-intent-go   { background-color: rgba(220, 53, 69, 0.1); }

[data-bs-theme="dark"] .bg-intent-know { background-color: rgba(13, 110, 253, 0.2); }
[data-bs-theme="dark"] .bg-intent-buy  { background-color: rgba(255, 193, 7, 0.2); }
[data-bs-theme="dark"] .bg-intent-do   { background-color: rgba(25, 135, 84, 0.2); }
[data-bs-theme="dark"] .bg-intent-go   { background-color: rgba(220, 53, 69, 0.2); }

.intent-list-wrapper {
    max-height: 250px;
    overflow-y: auto;
}
.intent-list-wrapper::-webkit-scrollbar {
    width: 6px;
}
.intent-list-wrapper::-webkit-scrollbar-track {
    background: transparent; 
}
.intent-list-wrapper::-webkit-scrollbar-thumb {
    background: var(--bs-border-color); 
    border-radius: 3px;
}

/* --- 4. 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);
}