/* =============================================
   水滸伝 読破ガイド — カスタムCSS
   色はすべて CSS変数 (--ch-*, --PRIMARY-color 等) で指定。
   ダーク/ライト切替は theme-suikoden*.css が担う。
   ============================================= */

/* ---------- フォント ---------- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500&display=swap');

/*
  --font-serif  : 本文・見出し
  --font-sans   : UI・ラベル
  --font-size-base : 基準サイズ（JS で上書き可）
*/
:root {
  --font-serif:     'Shippori Mincho', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --font-sans:      'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
  --font-size-base: 1rem;
  --line-height:    1.95;
}

/* 本文・見出しにセリフ体 */
body,
.default p,
.default li {
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  letter-spacing: 0.03em;
}

h1, h2, h3, h4, h5, h6,
.default h1, .default h2, .default h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* サイドバー・UI はサンセリフ */
#sidebar,
.topbar,
#reading-ui-bar,
.reading-nav,
button,
.btn-mark-read,
.btn-next-section,
.btn-read-and-next {
  font-family: var(--font-sans);
}

/* ---------- コンテンツエリア ---------- */
.default {
  max-width: 760px;
  padding: 0.5rem 0;
}

/* h2 セクションヘッダー — 金色の左ボーダー */
.default h2 {
  font-size: calc(var(--font-size-base) * 1.15);
  color: var(--PRIMARY-color);
  border-left: 3px solid var(--PRIMARY-color);
  padding-left: 0.75rem;
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

/* h3 — 小見出し */
.default h3 {
  font-size: var(--font-size-base);
  color: var(--MAIN-TEXT-color);
  border-bottom: 1px solid rgb(var(--ch-border) / 80%);
  padding-bottom: 0.3rem;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

/* 区切り線 */
.default hr {
  border: none;
  border-top: 1px solid rgb(var(--ch-border) / 80%);
  margin: 1.8rem 0;
}

/* ---------- テーブル ---------- */
.default table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: calc(var(--font-size-base) * 0.9);
  font-family: var(--font-sans);
  table-layout: auto;
}
.default table th {
  background: rgb(var(--ch-gold) / 12%);
  color: rgb(var(--ch-text-warm) / 90%);
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid rgb(var(--ch-border));
  text-align: left;
  white-space: nowrap;
}
.default table td {
  padding: 8px 14px;
  border: 1px solid rgb(var(--ch-border));
  color: rgb(var(--ch-text-warm) / 90%);
  vertical-align: top;
  line-height: 1.7;
}
/* 1列目・2列目は内容幅に収める（折り返し禁止）*/
.default table td:nth-child(1),
.default table td:nth-child(2),
.default table th:nth-child(1),
.default table th:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}
.default table tr:hover td {
  background: rgb(var(--ch-gold) / 4%);
}

/* ---------- リスト ---------- */
.default ul li {
  margin-bottom: 0.35rem;
}
.default strong {
  color: var(--MAIN-TITLES-TEXT-color);
  font-weight: 600;
}

/* ---------- ホバーポップアップ ---------- */
.suikoden-popup {
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  min-width: 180px;
  /* フォールバック値付き — テーマCSS未ロードでも表示される */
  background: rgba(22, 18, 12, 0.97);
  background: rgb(var(--ch-ink-2, 22 18 12) / 97%);
  border: 1px solid rgba(194, 154, 72, 0.5);
  border: 1px solid rgb(var(--ch-gold, 194 154 72) / 50%);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 40%);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.65;
  pointer-events: auto;
}

.popup-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgb(var(--ch-border));
}
.popup-type    { font-size: 0.9rem; opacity: 0.7; }
.popup-name    { font-size: 0.95rem; font-weight: 600; color: rgba(194,154,72,1); color: var(--PRIMARY-color); font-family: var(--font-serif); }
.popup-reading { font-size: 0.78rem; color: rgba(140,128,110,1); color: rgb(var(--ch-text-dimmer, 140 128 110)); }
.popup-alias   {
  font-size: 0.75rem;
  color: var(--SECONDARY-color);
  padding: 1px 5px;
  border: 1px solid rgb(var(--ch-blue-steel) / 30%);
  border-radius: 3px;
}
.popup-body {
  color: rgba(200, 188, 170, 0.95);
  color: rgb(var(--ch-text-warm, 222 210 192) / 95%);
  font-size: 0.83rem;
}

/* ポップアップOFF時 */
body.popup-disabled .tooltip-trigger {
  cursor: text;
  border-bottom: none !important;
}

/* ---------- ツールチップトリガー ---------- */
.tooltip-trigger {
  border-bottom: 1px dotted rgb(var(--ch-gold) / 50%);
  cursor: help;
}
.tooltip-trigger:hover {
  background: rgb(var(--ch-gold) / 10%);
  border-radius: 2px;
}
.tooltip-location { border-bottom-color: rgb(var(--ch-green) / 55%); }
.tooltip-term     { border-bottom-color: rgb(var(--ch-blue-steel) / 55%); }

/* ---------- 読書コントロールバー ---------- */
#reading-ui-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--ch-border) / 50%);
  font-size: 0.8rem;
  font-family: var(--font-sans);
  flex-wrap: wrap;
}

#reading-pos-display {
  cursor: pointer;
  color: var(--PRIMARY-color);
  padding: 3px 9px;
  border: 1px solid rgb(var(--ch-gold) / 35%);
  border-radius: 4px;
  user-select: none;
  transition: background 0.15s;
}
#reading-pos-display:hover { background: rgb(var(--ch-gold) / 8%); }

#popup-toggle {
  cursor: pointer;
  padding: 3px 9px;
  border: 1px solid rgb(var(--ch-blue-steel) / 35%);
  border-radius: 4px;
  background: transparent;
  color: var(--SECONDARY-color);
  font-size: 0.8rem;
  user-select: none;
  transition: background 0.15s;
}
#popup-toggle:hover     { background: rgb(var(--ch-blue-steel) / 8%); }
#popup-toggle.popup-off { color: rgb(var(--ch-text-dimmer)); border-color: rgb(var(--ch-border) / 35%); }

#theme-toggle {
  cursor: pointer;
  padding: 3px 9px;
  border: 1px solid rgb(var(--ch-gold) / 30%);
  border-radius: 4px;
  background: transparent;
  color: var(--PRIMARY-color);
  font-size: 0.8rem;
  user-select: none;
  transition: background 0.15s;
}
#theme-toggle:hover { background: rgb(var(--ch-gold) / 8%); }

/* ---------- フォント・サイズ コントロール ---------- */
.ui-bar-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgb(var(--ch-border) / 90%);
  margin: 0 4px;
  vertical-align: middle;
}

.ctrl-label {
  font-size: 0.72rem;
  color: rgb(var(--ch-text-dimmer));
  margin-right: 4px;
  user-select: none;
}

/* フォント種類 */
.font-family-ctrl {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ff-btn {
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid rgb(var(--ch-border) / 90%);
  border-radius: 3px;
  background: transparent;
  color: rgb(var(--ch-text-dim));
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.5;
  transition: background 0.12s, color 0.12s;
}
.ff-btn:hover     { background: rgb(var(--ch-gold) / 10%); color: var(--PRIMARY-color); }
.ff-btn.ff-active { background: rgb(var(--ch-gold) / 15%); color: var(--PRIMARY-color); border-color: rgb(var(--ch-gold) / 45%); }

/* フォントサイズ */
.font-size-ctrl {
  display: flex;
  align-items: center;
  gap: 3px;
}

.fs-btn {
  cursor: pointer;
  padding: 2px 7px;
  border: 1px solid rgb(var(--ch-border) / 90%);
  border-radius: 3px;
  background: transparent;
  color: rgb(var(--ch-text-dim));
  font-family: var(--font-sans);
  line-height: 1.5;
  transition: background 0.12s, color 0.12s;
}
.fs-btn:hover     { background: rgb(var(--ch-gold) / 10%); color: var(--PRIMARY-color); }
.fs-btn.fs-active { background: rgb(var(--ch-gold) / 15%); color: var(--PRIMARY-color); border-color: rgb(var(--ch-gold) / 45%); }

/* サイズボタンの視覚的な大きさに差をつける */
.fs-btn[data-fs="xs"] { font-size: 0.65rem; }
.fs-btn[data-fs="s"]  { font-size: 0.75rem; }
.fs-btn[data-fs="m"]  { font-size: 0.82rem; }
.fs-btn[data-fs="l"]  { font-size: 0.92rem; }
.fs-btn[data-fs="xl"] { font-size: 1.02rem; }

/* ---------- 読書位置 手動セレクター モーダル ---------- */
#pos-selector-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 65%);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
#pos-selector-overlay.active {
  display: flex;
}

#pos-selector-modal {
  background: rgb(var(--ch-ink-2) / 98%);
  border: 1px solid rgb(var(--ch-gold) / 45%);
  border-radius: 8px;
  padding: 1.5rem 1.8rem;
  min-width: 260px;
  max-width: 360px;
  width: 90vw;
  box-shadow: 0 14px 48px rgb(0 0 0 / 50%);
  font-family: var(--font-sans);
}

.pos-modal-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--PRIMARY-color);
  margin-bottom: 0.35rem;
}

.pos-modal-note {
  font-size: 0.75rem;
  color: rgb(var(--ch-text-dimmer));
  margin-bottom: 1.3rem;
}

.pos-modal-selects {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.3rem;
}

.pos-modal-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: rgb(var(--ch-text-warm) / 90%);
}

.pos-sel-label {
  min-width: 1.2em;
}

.pos-modal-row select {
  background: rgb(var(--ch-ink-3));
  border: 1px solid rgb(var(--ch-border));
  border-radius: 4px;
  color: rgb(var(--ch-text-warm) / 90%);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  padding: 3px 8px;
  cursor: pointer;
  min-width: 4rem;
}
.pos-modal-row select:focus {
  outline: none;
  border-color: rgb(var(--ch-gold) / 55%);
}

.pos-modal-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}

#pos-modal-cancel {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgb(var(--ch-border));
  border-radius: 4px;
  color: rgb(var(--ch-text-dim));
  font-family: var(--font-sans);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s;
}
#pos-modal-cancel:hover { background: rgb(var(--ch-border) / 30%); }

#pos-modal-apply {
  padding: 6px 18px;
  background: rgb(var(--ch-gold) / 15%);
  border: 1px solid rgb(var(--ch-gold) / 55%);
  border-radius: 4px;
  color: var(--PRIMARY-color);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
#pos-modal-apply:hover { background: rgb(var(--ch-gold) / 28%); }

.pos-modal-footer {
  text-align: center;
  padding-top: 0.6rem;
  border-top: 1px solid rgb(var(--ch-border) / 60%);
}

#pos-modal-reset {
  background: transparent;
  border: none;
  color: rgb(var(--ch-text-dimmer));
  font-family: var(--font-sans);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 0;
  transition: color 0.12s;
}
#pos-modal-reset:hover { color: rgb(var(--ch-red-reset)); }

/* ---------- 節ナビゲーション（ページ末尾） ---------- */
.reading-nav {
  margin-top: 3rem;
  padding: 1.2rem 0 0.5rem;
  border-top: 1px solid rgb(var(--ch-border) / 80%);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
}

.btn-mark-read {
  padding: 7px 15px;
  background: transparent;
  border: 1px solid rgb(var(--ch-green-btn) / 45%);
  border-radius: 5px;
  color: rgb(var(--ch-green));
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.btn-mark-read:hover { background: rgb(var(--ch-green-btn) / 10%); }
.btn-mark-read.already-read {
  color: rgb(var(--ch-text-dimmer));
  border-color: rgb(var(--ch-border) / 90%);
  cursor: default;
}

.btn-next-section {
  padding: 7px 15px;
  background: transparent;
  border: 1px solid rgb(var(--ch-blue-steel) / 45%);
  border-radius: 5px;
  color: var(--SECONDARY-color);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.15s;
}
.btn-next-section:hover { background: rgb(var(--ch-blue-steel) / 10%); }

.btn-read-and-next {
  padding: 7px 18px;
  background: transparent;
  border: 1px solid rgb(var(--ch-gold) / 50%);
  border-radius: 5px;
  color: var(--PRIMARY-color);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s;
}
.btn-read-and-next:hover { background: rgb(var(--ch-gold) / 10%); }

/* ---------- 巻・章 自動ナビゲーション ---------- */
.section-nav-container {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--ch-border) / 80%);
  font-family: var(--font-sans);
}

.section-nav-heading {
  font-size: 0.82em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--ch-text-dim));
  margin-bottom: 1.4rem;
}

.section-nav-empty { color: rgb(var(--ch-text-dimmer)); font-style: italic; font-size: 0.88em; }

/* 巻ページ — 章ブロック */
.chapter-list { display: flex; flex-direction: column; gap: 1.2rem; }

.chapter-block {
  border: 1px solid rgb(var(--ch-border));
  border-radius: 6px;
  padding: 1rem 1.2rem;
  background: rgb(var(--ch-ink-2) / 60%);
}

.chapter-title {
  font-size: 0.88em;
  font-weight: 600;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--ch-border) / 70%);
  font-family: var(--font-serif);
}
.chapter-title a { color: var(--PRIMARY-color); text-decoration: none; }
.chapter-title a:hover { color: var(--PRIMARY-HOVER-color); }

.section-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }

.section-item {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.86em;
  border-radius: 4px;
  transition: background 0.12s;
}
.section-item:hover { background: rgb(var(--ch-gold) / 6%); }

.section-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  text-decoration: none;
  flex: 1;
}
.section-num                       { color: rgb(var(--ch-text-dim)); font-size: 0.78em; min-width: 2.8rem; flex-shrink: 0; }
.section-link .section-title       { color: rgb(var(--ch-text-warm)); }
.section-link:hover .section-title { color: var(--MAIN-TITLES-TEXT-color); }

.section-chars {
  margin-left: auto;
  padding-right: 8px;
  color: rgb(var(--ch-text-dimmer));
  font-size: 0.76em;
  white-space: nowrap;
}

/* 章ページ — 節カード */
.section-cards { display: flex; flex-direction: column; gap: 6px; }

.section-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: rgb(var(--ch-ink-2) / 60%);
  border: 1px solid rgb(var(--ch-border));
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.section-card:hover {
  background: rgb(var(--ch-gold) / 6%);
  border-color: rgb(var(--ch-gold) / 35%);
}

.section-card-num {
  font-size: 0.78em;
  color: rgb(var(--ch-gold) / 80%);
  font-weight: 600;
  min-width: 3.2rem;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.section-card-body { flex: 1; min-width: 0; }
.section-card-title {
  color: rgb(var(--ch-text-warm) / 95%);
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 3px;
  font-family: var(--font-serif);
}
.section-card:hover .section-card-title { color: var(--MAIN-TITLES-TEXT-color); }

.section-card-chars,
.section-card-locs {
  font-size: 0.76em;
  color: rgb(var(--ch-text-dimmer));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-sans);
}

.section-card-arrow {
  color: rgb(var(--ch-border));
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
  font-family: var(--font-sans);
}
.section-card:hover .section-card-arrow {
  color: rgb(var(--ch-gold) / 80%);
  transform: translateX(3px);
}

/* =============================================
   地図（Leaflet.js）
   ============================================= */

.map-wrapper {
  margin: 1.2rem 0 2rem;
  font-family: var(--font-sans);
}

/* コントロールバー */
.map-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
  padding: 0.55rem 0.9rem;
  background: rgb(var(--ch-ink-3, 32 26 18) / 80%);
  border: 1px solid rgb(var(--ch-border, 52 44 32) / 60%);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 0.82rem;
  color: rgb(var(--ch-text-dim, 140 128 110));
}

.map-ctrl-label {
  font-size: 0.78rem;
  color: rgb(var(--ch-text-dimmer, 100 92 78));
  margin-right: 0.2rem;
}

.map-filter-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.map-filter-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  color: rgb(var(--ch-text-warm, 222 210 192));
  transition: color 0.15s;
}
.map-filter-label:hover { color: rgb(var(--ch-gold, 194 154 72)); }

.map-pos-toggle {
  margin-left: auto;
}

/* 地図本体 */
#suikoden-map {
  height: 500px;
  border: 1px solid rgb(var(--ch-border, 52 44 32) / 60%);
  border-top: none;
  border-bottom: none;
}

/* Leaflet ポップアップの上書き */
.leaflet-popup-content-wrapper {
  background: rgb(var(--ch-ink-2, 22 18 12) / 97%);
  background: rgba(22, 18, 12, 0.97);
  color: rgb(var(--ch-text-warm, 222 210 192));
  border: 1px solid rgb(var(--ch-gold, 194 154 72) / 40%);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content {
  margin: 10px 14px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
}
.leaflet-popup-close-button {
  color: rgb(var(--ch-text-dim, 140 128 110)) !important;
}
.leaflet-popup-close-button:hover {
  color: rgb(var(--ch-gold, 194 154 72)) !important;
}
.map-popup-name {
  font-size: 1.05em;
  font-weight: 600;
  color: rgb(var(--ch-gold, 194 154 72));
}
.map-popup-reading {
  font-size: 0.85em;
  color: rgb(var(--ch-text-dim, 140 128 110));
}
.map-popup-meta {
  font-size: 0.78em;
  color: rgb(var(--ch-text-dimmer, 100 92 78));
  margin-top: 2px;
}
.map-popup-desc {
  margin-top: 6px;
  font-size: 0.88em;
  line-height: 1.55;
  color: rgb(var(--ch-text-warm, 222 210 192));
}

/* 凡例 */
.map-legend {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.9rem;
  background: rgb(var(--ch-ink-3, 32 26 18) / 80%);
  border: 1px solid rgb(var(--ch-border, 52 44 32) / 60%);
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-size: 0.78rem;
  color: rgb(var(--ch-text-dim, 140 128 110));
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.legend-dot.city       { background: #5b9bd5; }
.legend-dot.stronghold { background: #d55b5b; }
.legend-dot.mountain   { background: #5bd58c; }
.legend-dot.region     { background: #d5a85b; }

/* ライトテーマ対応 */
[data-r-theme-variant="suikoden-light"] .map-controls,
[data-r-theme-variant="suikoden-light"] .map-legend {
  background: rgba(240, 232, 216, 0.9);
  border-color: rgba(148, 112, 28, 0.3);
}
[data-r-theme-variant="suikoden-light"] .leaflet-popup-content-wrapper {
  background: rgba(252, 248, 238, 0.97);
  color: rgba(42, 30, 16, 1);
  border-color: rgba(148, 112, 28, 0.5);
}