/* ==========================================
   1. テーマ定義 (CSS変数)
   ========================================== */

/* デフォルト：ダークテーマ (ホワサバ極寒ブルー) */
:root,
[data-bs-theme="dark"],
[data-theme="dark"] {
   /* --- 既存の変数 --- */
   --bg-main: #0f172a;
   --bg-card: #1e293b;
   --bg-header: #090d16;
   --border-color: #334155;
   --text-main: #f8fafc;
   --text-muted: #94a3b8;
   --nav-text: #e2e8f0;
   --accent-ice: #38bdf8;
   --ad-bg: #0f172a;

   /* --- 記事・アクセント拡張変数（新規追加） --- */
   --accent-story-border: #a855f7;        /* ストーリー枠の左線（オーロラパープル） */
   --accent-story-bg: rgba(168, 85, 247, 0.08); /* ストーリー枠背景 */
   --accent-story-title: #c084fc;       /* ストーリー見出し文字 */

   --accent-advice-border: #f59e0b;       /* 筆者一言アドバイス左線（アンバーゴールド） */
   --accent-advice-bg: rgba(245, 158, 11, 0.08);/* アドバイス背景 */
   --accent-advice-title: #fbbf24;      /* アドバイス見出し文字 */
}

/* figure-caption の視認性補正（Bootstrap標準の色指定を強制上書き） */
.figure-caption,
[data-theme="dark"] .figure-caption,
[data-bs-theme="dark"] .figure-caption {
    color: #94a3b8 !important; /* ダーク背景でもはっきり見えるライトグレー */
}

/* ライトモード時は暗めのグレー */
[data-theme="light"] .figure-caption,
[data-bs-theme="light"] .figure-caption {
    color: #64748b !important;
}

/* ライトテーマ (明るいホワイト) */
[data-bs-theme="light"],
[data-theme="light"] {
   /* --- 既存の変数 --- */
   --bg-main: #f1f5f9;
   --bg-card: #ffffff;
   --bg-header: #ffffff;
   --border-color: #cbd5e1;
   --text-main: #0f172a;
   --text-muted: #64748b;
   --nav-text: #334155;
   --accent-ice: #0284c7;
   --ad-bg: #f8fafc;

   /* --- 記事・アクセント拡張変数（新規追加・ライト用） --- */
   --accent-story-border: #9333ea;
   --accent-story-bg: #f3e8ff;
   --accent-story-title: #7e22ce;

   --accent-advice-border: #d97706;
   --accent-advice-bg: #fffbeb;
   --accent-advice-title: #b45309;
}

/* ==========================================
   2. 全体・共通ベーススタイル
   ========================================== */
body {
   background-color: var(--bg-main);
   color: var(--text-main);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   transition: background-color 0.2s ease, color 0.2s ease;
}

/* bg-body-tertiary を追加してカード色と連動 */
.card,
.hero-box,
.list-group-item,
.bg-body-tertiary {
   background-color: var(--bg-card) !important;
   border-color: var(--border-color);
   color: var(--text-main);
}

.hero-box {
    border-left: 4px solid var(--accent-ice);
}

/* ヘッダー・フッター */
.app-header, footer {
    background-color: var(--bg-header);
    border-color: var(--border-color);
}
.app-header .nav-link, footer a, footer p {
    color: var(--nav-text);
}
.app-header .nav-link:hover, footer a:hover {
    color: var(--accent-ice);
}

/* テキスト・ボタン */
h1, h2, h3, h4, h5, h6, .card-title, .text-light-heading {
    color: var(--text-main);
}
.text-muted {
    color: var(--text-muted) !important;
}
a {
    color: var(--accent-ice);
    text-decoration: none;
}
.btn-fire {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: #ffffff;
    border: none;
    font-weight: bold;
}
.btn-fire:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
}

/* フォーム・セレクトボックス・インプットグループの色味適用 */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--form-bg);
    border-color: var(--form-border);
    color: var(--form-text);
}

/* ダークモード時のセレクトボックス矢印を白色に変更 */
[data-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control:focus,
.form-select:focus {
    background-color: var(--form-bg);
    border-color: var(--accent-ice);
    color: var(--form-text);
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25);
}

.ad-placeholder {
    background-color: var(--ad-bg);
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
}

/* ゲーム内アイコン共通 */
.game-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: -4px;
}


/* ==========================================
   3. 溶鉱炉データ一覧（データテーブル用スコープ）
   ========================================== */

/* テーブル全体のテーマ連動設定 */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-border-color: var(--border-color);
    color: var(--text-main);
}
.table thead {
    background-color: var(--bg-header);
    color: var(--text-muted);
}

/* ホバー時の背景色＆文字色維持 */
.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
}
.table tbody tr:hover td {
    color: inherit;
}
[data-bs-theme="light"] .table tbody tr:hover,
[data-theme="light"] .table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* 精錬火晶のテーマ連動カラー */
.text-ref-fc {
    color: var(--sim-reffc-label) !important;
    font-weight: bold;
}

/* デフォルト（標準表示時）の初期表示制御 */
.pc-only-table { display: none; }
.mobile-only-table { display: table; }

/* スマホ画面（完全なモバイル）ではワイド切り替えボタン自体を非表示に */
@media (max-width: 767.98px) {
    #toggleWide { display: none !important; }
}

/* --- PC用テーブル設定 --- */
#furnaceTablePc {
    white-space: nowrap;
}
#furnaceTablePc th,
#furnaceTablePc td {
    padding: 0.6rem 0.5rem;
    font-size: 0.875rem;
}

/* --- スマホ用・標準表示用テーブル設定 --- */
#furnaceTableMobile th,
#furnaceTableMobile td {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.cost-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
}
.cost-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

#furnaceTableMobile .req-text {
    word-break: keep-all;
    overflow-wrap: break-word;
}
#furnaceTableMobile .req-item {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.15rem;
}

/* ==========================================
   4. 建造シミュレーター（接頭辞 .sim- で衝突を完全防止）
   ========================================== */

/* --- 計算結果エリア --- */
.sim-result-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

/* 資源カード本体 */
.sim-res-card {
    background-color: var(--sim-res-bg);
    border: 1px solid var(--sim-res-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    padding: 0.4rem 0.2rem !important; /* カード内部の余白調整 */
}

/* 資源カードのラベル（カード幅に合わせて可変） */
.sim-res-label {
    font-size: clamp(0.65rem, 1.4vw, 0.8rem);
    color: var(--sim-res-label);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 資源カードの数値（カード幅に合わせて可変） */
.sim-res-value {
    color: var(--sim-res-value);
    font-size: clamp(0.7rem, 1.8vw, 1.1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 全画面共通の推定合計建造時間（秒落ちを絶対防止＋滑らか伸縮） */
#resultTime {
    font-size: clamp(1.4rem, 3.8vw, 2.5rem);
    white-space: nowrap;
    word-break: keep-all;
}

/* 火晶 / 精錬火晶の強調背景 */
.sim-res-card-fc {
    background-color: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
}
.sim-res-card-reffc {
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
}

.sim-text-fc { color: var(--sim-fc-label); }
.sim-text-reffc { color: var(--sim-reffc-label); }
.sim-text-secondary { color: var(--sim-res-label); }


/* --- フォーム・レイアウト整形（全画面幅対応） --- */
.sim-micro-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* インプットグループの崩れ防止 */
.input-group-sm > .form-control,
.input-group-sm > .input-group-text,
.input-group-sm > .form-select {
    font-size: 0.85rem;
}


/* --- レスポンシブ メディアクエリ --- */

/* スマホ最適化（幅576px未満） */
@media (max-width: 575.98px) {
    .sim-res-card { padding: 0.5rem !important; }
    .sim-res-label { font-size: clamp(0.65rem, 3vw, 0.75rem); }
    .sim-res-value { font-size: clamp(0.75rem, 3.5vw, 0.95rem); }
}

/* タブレット〜PCサイズのサイドバー・メインコンテンツの比率固定 */
@media (min-width: 992px) {
    .sim-main-content {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    .sim-sidebar {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

/* ==========================================
   記事詳細ページ・サイドバー微調整
   ========================================== */

/* 1. 本文上のカテゴリーバッジ（文字色視認性アップ） */
#article-detail header .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.25) !important;
    color: #4dd495 !important; /* 暗い背景でもハッキリ見えるグリーン */
    border: 1px solid rgba(77, 212, 149, 0.3) !important;
}

/* 2. サイドバー著者プロフィールの氷マーク位置調整 */
.sidebar-author-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 3. 本文内のバッジ視認性補正 */
/* 木材獲得・食料＆居住バッジ */
#article-detail .article-body .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

/* 達成で資源報酬！バッジ */
#article-detail .article-body .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.25) !important;
    color: #ffc107 !important;
    border: 1px solid rgba(255, 193, 7, 0.4) !important;
}

/* 「吹雪に備えよ！」枠内の文字色補正 */
#article-detail .article-body .border-warning .text-warning {
    color: #ffc107 !important;
}

/* ==========================================
   記事詳細ページ スタイル・配色調整
   ========================================== */

/* STORY枠の専用配色 */
.article-story-box {
    border-left: 4px solid var(--accent-story-border);
    background-color: var(--accent-story-bg) !important;
}
.article-story-box .story-title {
    color: var(--accent-story-title);
}

/* 筆者一言アドバイス枠の専用配色 */
.article-advice-box {
    border-left: 4px solid var(--accent-advice-border);
    background-color: var(--accent-advice-bg) !important;
}
.article-advice-box .advice-title {
    color: var(--accent-advice-title);
}

/* ==========================================
   導入記事（introduction）固有スタイル補正
   ========================================== */

/* 1. 一言部分の4つの特徴ボックス（白飛び防止） */
.intro-feature-box {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: all 0.2s ease;
}

/* 2. 内部リンク用リストグループ（ホバー視認性向上） */
#article-detail .list-group-item-action {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color);
    transition: background-color 0.15s ease, color 0.15s ease;
}

#article-detail .list-group-item-action:hover,
#article-detail .list-group-item-action:focus {
    background-color: rgba(56, 189, 248, 0.12); /* ほんのりアイスブルー */
    color: var(--accent-ice);                   /* マウスを乗せたら鮮やかな水色 */
    border-color: var(--accent-ice);
}

/* ホバー時の矢印アイコン挙動 */
#article-detail .list-group-item-action:hover .fa-chevron-right {
    color: var(--accent-ice) !important;
    transform: translateX(3px);
    transition: transform 0.15s ease;
}

/* ==========================================
   ライトモード視認性補正
   ========================================== */

/* 1. ハッシュタグ風バッジ (bg-secondary bg-opacity-20) の視認性向上 */
[data-theme="light"] #article-detail .badge.bg-secondary,
[data-bs-theme="light"] #article-detail .badge.bg-secondary {
    background-color: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
}

/* 2. 図説の「第1世代 MAX育成」バッジ (bg-secondary) の視認性向上 */
[data-theme="light"] #section-gen .badge.bg-secondary,
[data-bs-theme="light"] #section-gen .badge.bg-secondary {
    background-color: #475569;
    color: #ffffff;
}

/* ==========================================
   スマホ・レスポンシブ用 ヘッダー補正
   ========================================== */

/* スマホ表示時のロゴ文字サイズ＆溢れ防止 */
@media (max-width: 767.98px) {
    .header-site-logo {
        font-size: clamp(0.85rem, 3.5vw, 1.1rem);
        max-width: 55%;
        line-height: 1.2;
        white-space: normal;
    }
}

/* ハンバーガーボタン本体の枠線とサイズ */
.app-header .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    border-color: var(--border-color);
}

/* DARKテーマ時の三本線（白ベースのSVGに差し替え） */
[data-theme="dark"] .app-header .navbar-toggler-icon,
[data-bs-theme="dark"] .app-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248, 250, 252, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* LIGHTテーマ時の三本線（ダークグレーベースのSVGに差し替え） */
[data-theme="light"] .app-header .navbar-toggler-icon,
[data-bs-theme="light"] .app-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================
   サイドバー リンク・ホバー補正
   ========================================== */

/* 通常時の文字色をハッキリ表示 */
.aside-sidebar .list-group-item-action,
aside .list-group-item-action {
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
    transition: all 0.2s ease;
}

/* ホバー時の背景と文字色 */
.aside-sidebar .list-group-item-action:hover,
.aside-sidebar .list-group-item-action:focus,
aside .list-group-item-action:hover,
aside .list-group-item-action:focus {
    background-color: rgba(56, 189, 248, 0.15) !important; /* アイスブルーの透過背景 */
    color: var(--accent-ice) !important;                 /* 水色に発光 */
    padding-left: 1.25rem !important;                    /* 右にスライド移動 */
}

/* ライトモード時のホバー補正 */
[data-theme="light"] aside .list-group-item-action:hover,
[data-bs-theme="light"] aside .list-group-item-action:hover {
    background-color: rgba(2, 132, 199, 0.1) !important;
}

/* 記事内コンテンツカード・ボタンのレスポンシブ溢れ防止 */
.article-advice-box,
.article-story-box {
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .article-advice-box .btn,
    .article-story-box .btn {
        width: 100%; /* スマホ時はボタンを横幅いっぱいに広げて押しやすく */
        text-center;
    }
}

/* ==========================================
   figure / figcaption スタイル調整
   ========================================== */
/* 画像の高さ制限（インラインstyle排除） */
#section-ad .figure-img {
    max-height: 220px;
    object-fit: contain;
}

/* figure-caption のフォントサイズ固定 */
.figure-caption {
    font-size: 0.75rem;
}

/* ダークモード時の caption 色飛び（可視性）補正 */
[data-theme="dark"] .figure-caption,
[data-bs-theme="dark"] .figure-caption {
    color: var(--text-muted) !important;
}

/* ==========================================
   一言部分の4つの特徴ボックス（はみ出し・文字縮小の根本解決）
   ========================================== */
.intro-feature-box {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: all 0.2s ease;

    /* 上下左右の中央揃え＆高さの均一化 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    height: 100%; /* 親要素の高さに合わせる */
    padding: 0.4rem 0.3rem !important;

    /* 読みやすく適切なフォントサイズ指定（極端な小文字化を防止） */
    font-size: 0.8rem !important;
    line-height: 1.25;
    text-align: center;

    /* 変な位置でのブツ切り改行を防ぎつつ、枠内での自動折り返しを許可 */
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal !important;
}

/* スマホ表示時（幅575.98px以下）の微調整 */
@media (max-width: 575.98px) {
    .intro-feature-box {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.15rem !important;
        min-height: 46px;
    }
}

/* サイドバー内のテーマ連動画像・キャッチ画像補正 */
aside .hero-theme-img,
aside #topHeroImg {
    border-color: var(--border-color) !important;
    background-color: var(--bg-card);
    transition: border-color 0.2s ease;
}

/* ライトモード時の画像うっすらシャドウ・枠線微調整 */
[data-theme="light"] aside .hero-theme-img,
[data-bs-theme="light"] aside .hero-theme-img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}