/* ===========================================================
   チュンジー（琉球象棋）紹介サイト 共通スタイル
   琉球・沖縄の伝統色をイメージした配色
   =========================================================== */

:root {
  --aka-gawara: #b5401f;   /* 赤瓦のテラコッタ */
  --aka-gawara-dark: #8c2d12;
  --ryukyu-ai: #1c3d5a;    /* 琉球藍 */
  --ryukyu-ai-light: #2f5f80;
  --kin: #c69a3a;          /* 金 */
  --kin-light: #e3c870;
  --washi: #f6efe2;        /* 和紙・生成り */
  --washi-dark: #ece0cb;
  --sumi: #2b2520;         /* 墨 */
  --midori: #3f7a5a;       /* 芭蕉布の緑 */
  --shadow: rgba(43, 37, 32, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
               "Noto Serif JP", "MS PMincho", serif;
  color: var(--sumi);
  background-color: var(--washi);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(198,154,58,0.06), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(28,61,90,0.05), transparent 45%);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

/* ---------- ヘッダー ---------- */
.site-header {
  background:
    linear-gradient(135deg, var(--aka-gawara), var(--aka-gawara-dark));
  color: var(--washi);
  border-bottom: 5px solid var(--kin);
  box-shadow: 0 2px 12px var(--shadow);
  position: relative;
}

.site-header::after {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(
    45deg, var(--kin), var(--kin) 8px,
    var(--kin-light) 8px, var(--kin-light) 16px);
  opacity: 0.85;
}

.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.4rem 1.2rem 1rem;
  text-align: center;
}

.site-title {
  margin: 0;
  font-size: 2.1rem;
  letter-spacing: 0.16em;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}

.site-title .yomi {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  margin-top: 0.3rem;
  color: var(--kin-light);
}

.site-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  opacity: 0.92;
}

/* ---------- ナビゲーション ---------- */
nav.main-nav {
  background: var(--ryukyu-ai);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px var(--shadow);
}

nav.main-nav ul {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

nav.main-nav a {
  display: block;
  padding: 0.8rem 0.9rem;
  color: var(--washi);
  text-decoration: none;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  border-bottom: 3px solid transparent;
}

nav.main-nav a:hover {
  background: var(--ryukyu-ai-light);
  color: var(--kin-light);
}

nav.main-nav a.active {
  background: var(--aka-gawara);
  border-bottom-color: var(--kin);
}

/* ---------- 本文レイアウト ---------- */
main {
  max-width: 920px;
  margin: 0 auto;
  padding: 2.4rem 1.3rem 3.5rem;
}

.hero {
  text-align: center;
  padding: 2.6rem 1.2rem;
  margin-bottom: 2.4rem;
  background: linear-gradient(180deg, #ffffff, var(--washi));
  border: 1px solid var(--washi-dark);
  border-radius: 10px;
  box-shadow: 0 6px 20px var(--shadow);
}

.hero h2 {
  font-size: 1.7rem;
  color: var(--aka-gawara-dark);
  margin: 0 0 0.8rem;
  letter-spacing: 0.08em;
}

.hero p { margin: 0.4rem 0; font-size: 1.05rem; }

section.card {
  background: #fff;
  border: 1px solid var(--washi-dark);
  border-left: 6px solid var(--aka-gawara);
  border-radius: 8px;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.8rem;
  box-shadow: 0 3px 12px var(--shadow);
}

section.card.indigo { border-left-color: var(--ryukyu-ai); }
section.card.gold   { border-left-color: var(--kin); }
section.card.green  { border-left-color: var(--midori); }

h2.section-title {
  font-size: 1.45rem;
  color: var(--aka-gawara-dark);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dotted var(--kin);
  letter-spacing: 0.06em;
}

section.card.indigo h2.section-title { color: var(--ryukyu-ai); }

h3.sub-title {
  font-size: 1.15rem;
  color: var(--ryukyu-ai);
  margin: 1.4rem 0 0.6rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--kin);
}

p { margin: 0.6rem 0; }

a { color: var(--aka-gawara-dark); }

.lead {
  font-size: 1.08rem;
  color: var(--sumi);
}

.note {
  background: var(--washi);
  border: 1px dashed var(--ryukyu-ai-light);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  margin: 1.1rem 0;
}

.note strong { color: var(--aka-gawara-dark); }

/* ---------- テーブル ---------- */
table.kif {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.97rem;
  background: #fff;
}

table.kif caption {
  caption-side: top;
  text-align: left;
  font-weight: bold;
  color: var(--ryukyu-ai);
  margin-bottom: 0.5rem;
}

table.kif th, table.kif td {
  border: 1px solid var(--washi-dark);
  padding: 0.6rem 0.8rem;
  text-align: center;
}

table.kif thead th {
  background: var(--ryukyu-ai);
  color: var(--washi);
  letter-spacing: 0.05em;
}

table.kif tbody tr:nth-child(even) { background: var(--washi); }

table.kif .koma {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--aka-gawara-dark);
}

/* ---------- 駒記号バッジ ---------- */
.piece-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  border: 2px solid var(--aka-gawara-dark);
  color: var(--aka-gawara-dark);
  background: #fff7ec;
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0 0.15em;
  vertical-align: middle;
}
.piece-badge.black {
  border-color: var(--sumi);
  color: var(--sumi);
  background: #f0f0ee;
}

/* ---------- 図解グリッド ---------- */
.move-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 1.4rem 0;
}

.move-card {
  background: var(--washi);
  border: 1px solid var(--washi-dark);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

.move-card h4 {
  margin: 0 0 0.5rem;
  color: var(--aka-gawara-dark);
  font-size: 1.05rem;
}

.move-card .names {
  font-size: 0.86rem;
  color: var(--ryukyu-ai);
  margin-bottom: 0.5rem;
}

/* SVG ミニ盤 */
.mini-board { display: block; margin: 0.4rem auto; }

/* ---------- ボタン ---------- */
.btn, button.btn {
  display: inline-block;
  background: var(--aka-gawara);
  color: var(--washi);
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 8px var(--shadow);
  transition: transform 0.12s, background 0.2s;
}
.btn:hover, button.btn:hover { background: var(--aka-gawara-dark); transform: translateY(-2px); }
.btn.indigo { background: var(--ryukyu-ai); }
.btn.indigo:hover { background: var(--ryukyu-ai-light); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.4rem;
}

/* ---------- カード型リンク（トップページ） ---------- */
.tile-grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 2rem 0;
}

.tile {
  display: block;
  text-decoration: none;
  color: var(--sumi);
  background: #fff;
  border: 1px solid var(--washi-dark);
  border-top: 5px solid var(--aka-gawara);
  border-radius: 10px;
  padding: 1.4rem 1.3rem;
  box-shadow: 0 4px 14px var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 8px 22px var(--shadow); }
.tile:nth-child(2) { border-top-color: var(--ryukyu-ai); }
.tile:nth-child(3) { border-top-color: var(--kin); }
.tile:nth-child(4) { border-top-color: var(--midori); }

.tile .tile-icon { font-size: 2rem; }
.tile h3 { margin: 0.5rem 0 0.4rem; color: var(--aka-gawara-dark); }
.tile p { font-size: 0.9rem; margin: 0; color: #5a5048; }

/* ---------- 年表 ---------- */
.timeline { list-style: none; padding: 0; margin: 1.2rem 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7.5rem;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--kin);
}
.timeline li {
  position: relative;
  padding: 0.6rem 0 0.6rem 9.5rem;
  min-height: 2.2rem;
}
.timeline .year {
  position: absolute;
  left: 0; top: 0.6rem;
  width: 6.6rem;
  text-align: right;
  font-weight: bold;
  color: var(--ryukyu-ai);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 6.9rem; top: 1.1rem;
  width: 13px; height: 13px;
  background: var(--aka-gawara);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--kin);
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--ryukyu-ai);
  color: var(--washi);
  text-align: center;
  padding: 1.8rem 1.2rem;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  border-top: 5px solid var(--kin);
}
.site-footer a { color: var(--kin-light); }
.site-footer .sources { font-size: 0.78rem; opacity: 0.85; margin-top: 0.8rem; line-height: 1.7; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 600px) {
  .site-title { font-size: 1.5rem; }
  nav.main-nav ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
                    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav.main-nav ul::-webkit-scrollbar { display: none; }
  nav.main-nav a { padding: 0.6rem 0.85rem; font-size: 0.9rem; letter-spacing: 0; }
  main { padding: 1.6rem 0.9rem 2.5rem; }
  section.card { padding: 1.2rem 1.1rem; }
  .timeline::before { left: 5rem; }
  .timeline li { padding-left: 6.6rem; }
  .timeline .year { width: 4.2rem; font-size: 0.85rem; }
  .timeline li::before { left: 4.4rem; }
}
.site-footer .operator { margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.9; line-height: 1.8; }
.site-footer .nw { display: inline-block; }