/* ============================================================
   carcamp ATLAS Theme — style.css の上に重ねるビジュアルテーマ
   新しい font / palette / layout 調整のみを記述。
   既存セレクター・クラス名は一切変更しない。
============================================================ */

/* ── フォント追加 ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&display=swap');

/* ── CSS 変数 再定義（既存を上書き） ─────────────────────── */
:root {
  --primary:       #3c6332;
  --primary-light: #5a8f48;
  --primary-dark:  #244b1e;
  --accent:        #b86a1e;
  --accent-light:  #d48840;
  --bg:            #ebe8e0;
  --card-bg:       #f8f6f2;
  --surface:       #f2efe8;
  --text:          #1c1a16;
  --text-muted:    #6c6860;
  --border:        #d0ccc5;
  --header-bg:     #1c2f12;
  --radius:        6px;
}

/* ── ヘッダー ────────────────────────────────────────────── */
header {
  background:
    linear-gradient(135deg, #1c2f12 0%, #274218 40%, #1c2f12 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* ロゴに Noto Serif JP を適用 */
header h1 {
  font-family: 'Noto Serif JP', 'Noto Sans JP', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .02em;
  font-weight: 700;
}
/* キャラバン icon を明るいリーフグリーンに */
.lc-logo { color: #8ac96a; }

/* α バッジをより馴染むアクセントに */
.alpha-badge {
  background: var(--accent);
  font-size: .56rem;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: .06em;
}

/* ── α テスト告知バー ────────────────────────────────────── */
#alpha-bar {
  background: var(--surface);
  color: var(--text-muted);
  font-size: .74rem;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
}
#alpha-bar a { color: var(--primary); }

/* ── フィルタバー ────────────────────────────────────────── */
/* 緑背景 → 白地のピルナビに反転 */
#filter-bar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 7px 14px;
}
.filter-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .76rem;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--primary-light);
}
.filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── サイドバー ──────────────────────────────────────────── */
#sidebar {
  background: var(--card-bg);
  border-left: 1px solid var(--border);
}
#sidebar-tabs {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.sidebar-tab {
  font-size: .80rem;
  padding: 10px 6px;
}
.sidebar-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  border-bottom-width: 3px;
}
.sidebar-tab:hover:not(.active) { color: var(--text); }

/* 検索バーを角丸から角ばった洗練スタイルへ */
.sidebar-search-wrap {
  padding: 8px 12px 7px;
  background: var(--card-bg);
}
.sidebar-search-inner {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px 6px 12px;
  transition: border-color .15s;
}
.sidebar-search-inner:focus-within {
  border-color: var(--primary);
  background: #fff;
}

/* ── スポットカード ───────────────────────────────────────── */
.spot-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: none;
  border-left: 3px solid transparent;
  transition: border-left-color .18s, box-shadow .18s, transform .12s;
  overflow: visible;
}
.spot-card:hover {
  border-left-color: var(--primary-light);
  box-shadow: 0 3px 12px rgba(0,0,0,.09);
  transform: translateY(-1px);
}
.card-thumb {
  background: #d8e8ce;
}
.card-thumb.card-thumb-icon {
  background: #e0ecd8;
}
.card-name { color: var(--text); font-size: .86rem; }
.card-addr { color: var(--text-muted); }
.good-badge   { color: var(--accent); }
.review-count { color: var(--primary); }
.card-elev    { color: var(--primary-light); }

/* マイスポットカード */
.my-spot-actions {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* ── モーダル ─────────────────────────────────────────────── */
.modal {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.modal-header {
  background: var(--header-bg);
  border-radius: 10px 10px 0 0;
  padding: 14px 18px;
}

/* Auth モーダル */
.modal-auth .auth-tab.active { color: var(--primary); }

/* 詳細モーダル ヒーロー画像 */
.detail-hero-img { border-radius: 0; }

/* Tips モーダル */
.tips-header {
  background: linear-gradient(135deg, #1c2f12 0%, #274218 100%);
}

/* ── ボタン ───────────────────────────────────────────────── */
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline-white {
  border: 1px solid rgba(255,255,255,.38);
  font-size: .76rem;
  padding: 4px 11px;
  border-radius: 4px;
}
.btn-outline-white:hover { background: rgba(255,255,255,.1); }

/* check-item のチェック済みスタイル */
.check-item:has(input:checked) {
  background: #dce8d5;
  border-color: var(--primary-light);
  color: var(--primary-dark);
}

/* ── 口コミカード ─────────────────────────────────────────── */
.review-card {
  background: var(--surface);
  border-left: 3px solid var(--primary-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 14px;
}
.review-cat-badge { background: var(--primary); }
.cat-tab.active {
  background: var(--primary);
  border-color: var(--primary);
}
.rev-cat-tab.active {
  background: var(--primary);
  border-color: var(--primary);
}
.rsec-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── 施設タイル ───────────────────────────────────────────── */
.facility-tile.active {
  background: #dce8d5;
  color: var(--primary);
  border-color: var(--primary-light);
}
.facility-tile.active:hover { background: #ccdfc4; }
.facility-tile.active.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
}

/* ── ランキング ───────────────────────────────────────────── */
.ranking-type-tab.active { background: var(--primary); border-color: var(--primary); }
.ranking-scope-btn.active { background: var(--primary); border-color: var(--primary); }

/* ── サイドバータブ（マイページ・スポット一覧） ─────────── */
.mypage-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── ボトムナビ（モバイル）──────────────────────────────── */
@media (max-width: 768px) {
  #bottom-nav {
    background: var(--card-bg);
    border-top: 1px solid var(--border);
  }
  .bnav-item.active { color: var(--primary); }

  #sidebar {
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
  }
  .sidebar-drag-handle { background: var(--card-bg); }
  .sidebar-drag-handle span { background: var(--border); }
}

/* ── スクロールバー ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4bfb8; border-radius: 3px; }

/* ── トースト ─────────────────────────────────────────────── */
#toast {
  background: rgba(28,47,18,.9);
  border-radius: 5px;
  font-size: .83rem;
  letter-spacing: .01em;
}

/* ── 新着バナー ───────────────────────────────────────────── */
.recent-reviews-banner {
  background: rgba(28,47,18,.88);
  border: 1px solid rgba(255,255,255,.08);
}
.rrb-spot { color: #92c870; }

/* ── ズームオーバーレイ ──────────────────────────────────── */
.zoom-overlay {
  background: rgba(28,47,18,.8);
}

/* ── αテスト告知バー（モバイル）────────────────────────── */
@media (max-width: 768px) {
  #alpha-bar { font-size: .7rem; padding: 3px 10px; }
  header h1 { font-size: .92rem; }
}

/* ── Spot ラベル（地図上スポット名） ──────────────────────── */
.spot-label {
  background: rgba(248,246,242,.94);
  border: 1px solid rgba(0,0,0,.1);
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ── ランドマークツールチップ ─────────────────────────────── */
.landmark-tooltip {
  background: rgba(248,246,242,.96);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.landmark-tooltip-name { color: var(--text); }
.landmark-tooltip-text { color: var(--text-muted); }

/* ── 登録ポップアップ ─────────────────────────────────────── */
.register-popup-btns .btn-confirm { background: var(--primary); }
.register-popup-btns .btn-confirm:hover { background: var(--primary-dark); }

/* ── スポット詳細 ─────────────────────────────────────────── */
.type-badge { background: var(--primary); border-radius: 3px; }
.signal-badge.on { background: #d8eace; color: #1e5214; }

/* ── マイスポット 非表示トグル ────────────────────────────── */
.vis-checkbox:checked ~ .vis-slider { background: var(--primary-light); }