/* ───────────────────────────────────────────────
   動員グループ専用スタイル(socionics.or.jp 共通)
   ─────────────────────────────────────────────── */

:root {
  --accent: #f4a261;
  --accent-dark: #e08f4d;
  --text: #333333;
  --text-light: #666666;
  --text-muted: #999999;
  --border: #e5e5e5;
  --border-soft: #f0f0f0;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --bg-tag: #f5f5f5;
  --bg-quote: #fdf6ed;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;

  /* 8 動員グループの色 ── 化学反応性 */
  --mob-catalysis: #d4a847;        /* 触媒・淡金 */
  --mob-corrosion: #a8593a;        /* 腐食・錆 */
  --mob-extraction: #c98f48;       /* 抽出・琥珀 */
  --mob-crystallization: #8da3c0;  /* 結晶化・氷青 */
  --mob-emulsion: #c9a368;         /* 乳化・クリーム金 */
  --mob-alloy: #b0683e;            /* 合金・溶銅 */
  --mob-neutralization: #9a8ba8;   /* 中和・薄紫 */
  --mob-polymerization: #4a6f5a;   /* 重合・深森 */

  /* 譲歩系(柔軟)/頑固系(構造) */
  --mob-yielding: #c9a368;
  --mob-obstinate: #6a7d8e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  background: var(--bg);
}

/* ── Site Header ── */
.site-header { border-bottom: 1px solid var(--border-soft); padding: 14px 24px; background: white; }
.site-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo { width: 32px; height: 32px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.site-nav { display: flex; gap: 24px; font-size: 14px; align-items: center; }
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

/* ── Section Header(セクションタイトル+タブ+グループナビ)── */
.section-header { border-bottom: 1px solid var(--border-soft); padding: 18px 24px 14px; background: var(--bg-soft); }
.section-header-inner { max-width: 1200px; margin: 0 auto; }
.section-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.section-title { font-family: var(--serif); font-size: 16px; font-weight: 600; margin-right: 8px; }
.tab-link { font-size: 13px; color: var(--text-light); text-decoration: none; padding: 5px 12px; border-radius: 6px; transition: background 0.15s; }
.tab-link:hover { background: var(--bg-tag); }
.tab-link.active { background: var(--bg-tag); color: var(--text); font-weight: 600; }

/* ── Group Navigation(8 グループのチップ式リンク)── */
.group-nav-row { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 8px; align-items: center; }
.group-nav-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 8px; }
.group-nav-row a.gn-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); text-decoration: none; padding: 4px 10px; border-radius: 4px; transition: background 0.15s; line-height: 1.5; white-space: nowrap; }
.group-nav-row a.gn-link:hover { background: var(--bg-tag); }
.group-nav-row a.gn-link.active { background: rgba(244,162,97,0.18); color: var(--text); font-weight: 600; }
.gn-code { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--accent-dark); }
.gn-code.yielding { color: #c98d2f; }
.gn-code.obstinate { color: #2f6f7a; }

/* ── Hero(ブーケ式)── */
.hero-bouquet { margin: 24px auto 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-width: 720px; }
.hero-bouquet img { width: 100%; height: auto; display: block; }
.hero-info { max-width: 720px; margin: 0 auto 36px; text-align: center; padding: 0 16px; }
.hero-info .hero-badges { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.hero-info .hero-badge { background: var(--bg-tag); color: var(--text-light); padding: 3px 10px; font-size: 11px; border-radius: 11px; font-family: var(--mono); letter-spacing: 0.05em; }
.hero-info .hero-badge.b-yielding { background: rgba(201,141,47,0.12); color: #c98d2f; }
.hero-info .hero-badge.b-obstinate { background: rgba(47,111,122,0.12); color: #2f6f7a; }
.hero-info .hero-badge.b-democratic { background: rgba(143,188,143,0.15); color: #4f7a4f; }
.hero-info .hero-badge.b-aristocratic { background: rgba(106,138,175,0.15); color: #4a6b8a; }
.hero-info .hero-title { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: 0.06em; margin: 0 0 4px; color: var(--text); }
.hero-info .hero-subtitle { font-family: var(--serif); font-size: 18px; color: var(--text-light); margin-bottom: 10px; letter-spacing: 0.04em; }
.hero-info .hero-caption { font-family: var(--serif); font-size: 14px; color: var(--text-muted); }
@media (max-width: 760px) {
  .hero-bouquet { max-width: 100%; margin: 16px 16px 12px; }
  .hero-info { padding: 0 16px; margin-bottom: 28px; }
  .hero-info .hero-title { font-size: 28px; }
  .hero-info .hero-subtitle { font-size: 16px; }
}

/* ── Breadcrumb ── */
.breadcrumb { max-width: 840px; margin: 32px auto 0; padding: 0 24px; font-size: 14px; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ── Main ── */
main { max-width: 840px; margin: 0 auto; padding: 48px 24px 80px; }
main.with-breadcrumb { padding-top: 24px; }
main.overview-page { padding-top: 24px; }

h2 { font-family: var(--serif); font-size: 22px; font-weight: 350; letter-spacing: 0.04em; border-left: 4px solid var(--accent); padding: 0 14px; margin: 56px 0 24px; line-height: 1.4; color: var(--text); text-align: left; }
main.overview-page h2 { font-size: 26px; }
h2:first-of-type { margin-top: 0; }
h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--text); margin: 32px 0 14px; text-align: left; }
main.overview-page h3 { font-size: 20px; margin: 40px 0 18px; letter-spacing: 0.04em; }
h3 .num { color: var(--accent); margin-right: 8px; }

p { margin-bottom: 18px; line-height: 1.95; font-size: 16px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 17px; color: var(--text); }
strong { font-weight: 600; }
a.text-link { color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid var(--border); }
a.text-link:hover { border-bottom-color: var(--accent); }

/* ── Naming Origin Aside ── */
.naming-origin { background: var(--bg-quote); border-left: 4px solid var(--accent); padding: 22px 26px; margin: 0 0 36px; border-radius: 0 6px 6px 0; }
.no-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.no-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.no-name { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--text); }
.no-en { font-family: var(--serif); font-size: 16px; color: var(--text-light); font-style: italic; }
.no-etym { font-size: 13.5px; color: var(--text-light); margin-bottom: 6px; }
.no-etym-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-muted); margin-right: 6px; padding: 1px 6px; background: white; border-radius: 3px; }
.no-meaning { font-size: 14px; color: var(--text); line-height: 1.75; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th { font-family: var(--serif); font-weight: 600; color: var(--text); background: var(--bg-soft); }
td { color: var(--text); }

/* ── Group Cards(概論)── */
.group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 40px; }
.group-card { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; transition: all 0.2s; display: block; color: var(--text); text-decoration: none; }
.group-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); border-color: var(--border); }
.group-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft); }
.group-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.group-card:hover .group-card-thumb img { transform: scale(1.05); }
.group-card-body { padding: 16px 20px 18px; border-top: 3px solid var(--mob-catalysis); }
.group-card.gc-1 .group-card-body { border-top-color: var(--mob-catalysis); }
.group-card.gc-2 .group-card-body { border-top-color: var(--mob-corrosion); }
.group-card.gc-3 .group-card-body { border-top-color: var(--mob-extraction); }
.group-card.gc-4 .group-card-body { border-top-color: var(--mob-crystallization); }
.group-card.gc-5 .group-card-body { border-top-color: var(--mob-emulsion); }
.group-card.gc-6 .group-card-body { border-top-color: var(--mob-alloy); }
.group-card.gc-7 .group-card-body { border-top-color: var(--mob-neutralization); }
.group-card.gc-8 .group-card-body { border-top-color: var(--mob-polymerization); }
.group-card-no { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.group-card-name { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.group-card-eng { font-size: 12px; color: var(--text-light); margin-bottom: 10px; font-family: var(--mono); letter-spacing: 0.04em; }
.group-card-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.group-card-meta span { padding: 1px 7px; background: var(--bg-tag); border-radius: 3px; }
@media (max-width: 720px) { .group-grid { grid-template-columns: 1fr; } }

/* ── Member Grid ── */
.member-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 28px; }
.member-card { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 6px; padding: 16px 18px; }
.member-type { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.04em; margin-bottom: 4px; }
.member-jname { font-family: var(--serif); font-size: 15px; color: var(--text); margin-bottom: 8px; font-weight: 500; }
.member-meta { font-size: 11.5px; color: var(--text-light); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.member-meta span { padding: 1px 7px; background: white; border-radius: 3px; border: 1px solid var(--border-soft); }
@media (max-width: 720px) { .member-grid { grid-template-columns: 1fr; } }

/* ── Relation Matrix ── */
.rel-matrix { display: grid; grid-template-columns: 88px repeat(4, 1fr); gap: 3px; margin: 18px 0 24px; font-size: 12.5px; }
.rel-matrix .cell { padding: 10px 6px; text-align: center; background: var(--bg-soft); border-radius: 4px; color: var(--text); font-size: 11.5px; }
.rel-matrix .head { background: white; border: 1px solid var(--border-soft); font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--text); padding: 8px 4px; }
.rel-matrix .row-head { background: white; border: 1px solid var(--border-soft); font-family: var(--mono); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.rel-id { background: #e9eaec; color: var(--text-light); }
.rel-du { background: #d5edd1; color: #2c5f30; font-weight: 600; }
.rel-tr { background: #fce8d0; color: #c05a1a; font-weight: 600; }
.rel-co { background: #f5d8d8; color: #a83434; font-weight: 600; }

.rel-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 14px 0 20px; font-size: 13px; padding: 14px 18px; background: var(--bg-soft); border-radius: 6px; }
.rel-legend-item { display: flex; align-items: center; gap: 8px; color: var(--text); }
.rel-legend-color { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }

/* ── Callout ── */
.callout { background: var(--bg-quote); border-left: 4px solid var(--accent); padding: 18px 22px; margin: 24px 0; border-radius: 0 6px 6px 0; font-size: 14.5px; color: var(--text); line-height: 1.85; }
.callout-rxn { background: var(--bg-soft); border-left: 4px solid var(--mob-catalysis); padding: 20px 24px; margin: 24px 0; border-radius: 0 6px 6px 0; }
.callout-rxn .cr-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.callout-rxn .cr-body { font-size: 14.5px; line-height: 1.85; color: var(--text); }

/* ── Pair List ── */
.pair-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0 20px; }
.pair-item { display: flex; gap: 14px; padding: 12px 16px; background: white; border: 1px solid var(--border-soft); border-radius: 5px; align-items: center; flex-wrap: wrap; }
.pair-types { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--text); min-width: 130px; }
.pair-desc { font-size: 13px; color: var(--text-light); flex: 1; }
.pair-tag { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 3px; align-self: flex-start; text-transform: uppercase; }
.pair-tag.duality { background: #d5edd1; color: #2c5f30; }
.pair-tag.transcendence { background: #fce8d0; color: #c05a1a; }
.pair-tag.correctional { background: #f5d8d8; color: #a83434; }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--border-soft); padding: 32px 24px; text-align: center; font-size: 13px; color: var(--text-muted); background: var(--bg-soft); }
.site-footer p { margin: 0; }

/* ── Next/Prev Nav ── */
.page-nav { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--border-soft); gap: 16px; }
.page-nav a { font-size: 13px; color: var(--text-light); text-decoration: none; }
.page-nav a:hover { color: var(--accent-dark); }
.page-nav .pn-center { font-family: var(--serif); color: var(--text-muted); font-size: 13px; }

/* ── Quotation Block(古典記述用)── */
blockquote { background: var(--bg-soft); border-left: 3px solid var(--accent); padding: 14px 20px; margin: 20px 0; font-size: 14.5px; line-height: 1.85; color: var(--text); border-radius: 0 4px 4px 0; }
blockquote cite { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); font-style: normal; }


/* ─────────────────────────────────────────────
   ラビリンス専用カスタマイズ
   ───────────────────────────────────────────── */

:root {
  /* 8 ラビリンスグループ色 ── 8 種の迷宮 */
  --lab-1: #b08968;  /* L1 静α迷宮 ── 砂岩・古代の知 */
  --lab-2: #c9783a;  /* L2 動α迷宮 ── 銅・行動の熱 */
  --lab-3: #6a5078;  /* L3 静β迷宮 ── 紫水晶・帝国の影 */
  --lab-4: #a8423a;  /* L4 動β迷宮 ── 朱・指導の炎 */
  --lab-5: #708060;  /* L5 静γ迷宮 ── 古オリーブ・市場の慎重 */
  --lab-6: #c4a04a;  /* L6 動γ迷宮 ── 金・市場の流動 */
  --lab-7: #4a6878;  /* L7 静δ迷宮 ── 青鋼・伝統の沈黙 */
  --lab-8: #5a7048;  /* L8 動δ迷宮 ── 苔緑・革命の生命 */
}

/* ラビリンスナビゲーション ── 静動軸でグルーピング */
.group-nav-row a.gn-link .gn-code.static-axis { color: #6a5078; }
.group-nav-row a.gn-link .gn-code.dynamic-axis { color: #c9783a; }

/* グループカード色 ── 8 ラビリンス */
.group-card.gc-1 .group-card-body { border-top-color: var(--lab-1); }
.group-card.gc-2 .group-card-body { border-top-color: var(--lab-2); }
.group-card.gc-3 .group-card-body { border-top-color: var(--lab-3); }
.group-card.gc-4 .group-card-body { border-top-color: var(--lab-4); }
.group-card.gc-5 .group-card-body { border-top-color: var(--lab-5); }
.group-card.gc-6 .group-card-body { border-top-color: var(--lab-6); }
.group-card.gc-7 .group-card-body { border-top-color: var(--lab-7); }
.group-card.gc-8 .group-card-body { border-top-color: var(--lab-8); }

/* ミノタウロス引用ブロック */
.myth-block {
  background: linear-gradient(180deg, #fdf6ed 0%, var(--bg-soft) 100%);
  border-left: 4px solid #b08968;
  padding: 24px 28px;
  margin: 28px 0;
  border-radius: 0 8px 8px 0;
}
.myth-block .myth-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #8b6f4a;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.myth-block h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #5a4530;
}
.myth-block p { color: var(--text); font-size: 14.5px; margin-bottom: 12px; }
.myth-block p:last-child { margin-bottom: 0; }

/* 4 役割マッピング(自己・鏡像・仮面・ミノタウロス) */
.role-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 24px 0 32px;
}
.role-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 18px 16px;
  text-align: center;
  border-top: 3px solid var(--accent);
}
.role-card.r-self { border-top-color: #6a8aaf; }
.role-card.r-mirror { border-top-color: #8fbc8f; }
.role-card.r-mask { border-top-color: #c9954d; }
.role-card.r-shadow { border-top-color: #a8423a; }
.role-icon {
  font-family: var(--serif);
  font-size: 28px;
  margin-bottom: 8px;
  color: var(--text);
}
.role-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.role-rel {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.role-desc {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.7;
  text-align: left;
}
@media (max-width: 720px) {
  .role-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 神話タイムライン */
.myth-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 28px;
}
.myth-step {
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 14px 12px;
  position: relative;
}
.myth-step-no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #8b6f4a;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.myth-step-title {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.myth-step-desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.65;
}
@media (max-width: 720px) {
  .myth-timeline { grid-template-columns: 1fr 1fr; }
}


/* ─────────────────────────────────────────────
   ラビリンス個別ページ用追加 CSS
   ───────────────────────────────────────────── */

/* 静動バッジ色 */
.hero-badge.b-static { background: #4a6878; color: white; }
.hero-badge.b-dynamic { background: #c9783a; color: white; }

/* タブ・グループナビのアクティブ */
.tab-link.active { color: var(--text); border-bottom-color: var(--accent); }
.gn-link.active { background: var(--bg-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }

/* メンバーグリッド */
.member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 24px 0 32px;
}
.member-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 16px 14px 14px;
  text-align: center;
  border-top: 3px solid var(--accent);
}
.member-type {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.member-jname {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.member-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: left;
}
.member-meta span {
  padding: 2px 0;
  border-bottom: 1px dotted var(--border-soft);
}
.member-meta span:last-child { border-bottom: none; }
@media (max-width: 720px) {
  .member-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 関係マトリクス */
.rel-matrix {
  display: grid;
  grid-template-columns: 100px repeat(4, 1fr);
  gap: 2px;
  margin: 20px 0 28px;
  font-family: var(--mono);
}
.rel-matrix .cell {
  padding: 10px 8px;
  text-align: center;
  font-size: 12.5px;
  background: white;
  border-radius: 3px;
}
.rel-matrix .cell.head {
  background: #f0e8d8;
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
}
.rel-matrix .cell.row-head {
  background: #f0e8d8;
  font-weight: 700;
  font-size: 11px;
  text-align: right;
  padding-right: 12px;
}
.rel-matrix .cell.rel-id { background: #e5e7eb; color: var(--text); font-weight: 600; }
.rel-matrix .cell.rel-mi { background: #d4e8d4; color: #3a5d3a; font-weight: 600; }
.rel-matrix .cell.rel-ro { background: #f4d8a8; color: #7a5520; font-weight: 600; }
.rel-matrix .cell.rel-co { background: #f0c0b8; color: #8a3528; font-weight: 600; }

/* 関係レジェンド */
.rel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0 18px;
  font-size: 13px;
}
.rel-legend-item { display: flex; align-items: center; gap: 8px; }
.rel-legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.rel-legend-color.rel-id { background: #e5e7eb; }
.rel-legend-color.rel-mi { background: #d4e8d4; }
.rel-legend-color.rel-ro { background: #f4d8a8; }
.rel-legend-color.rel-co { background: #f0c0b8; }

/* ペアグリッド */
.pair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0 28px;
}
.pair-item {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pair-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pair-tag.mirror { background: #d4e8d4; color: #3a5d3a; }
.pair-tag.role { background: #f4d8a8; color: #7a5520; }
.pair-tag.conflict { background: #f0c0b8; color: #8a3528; }
.pair-types {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.pair-desc {
  font-size: 12.5px;
  color: var(--text-light);
}
@media (max-width: 720px) {
  .pair-grid { grid-template-columns: 1fr; }
  .pair-item { flex-wrap: wrap; }
}

/* ページナビゲーション */
.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--serif);
  font-size: 14px;
}
.page-nav a { color: var(--text); text-decoration: none; transition: color 0.15s; }
.page-nav a:hover { color: var(--accent-dark, #b8682d); }
.page-nav .pn-center {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}


/* ─────────────────────────────────────────────
   オクタド専用カスタマイズ
   ───────────────────────────────────────────── */

:root {
  /* 4 オクタド色 ── 危機・遷移サイクルの 4 相 */
  --oct-quest:   #c4a04a;  /* クエスト ── 金・探索の光 */
  --oct-forge:   #a8593a;  /* フォージ ── 溶銅・建設の熱 */
  --oct-herald:  #6a5078;  /* ヘラルド ── 紫・告知の予兆 */
  --oct-judge:   #4a6878;  /* ジャッジ ── 青鋼・検証の冷静 */

  /* 2 ブロック色 ── 主導系(認識)/ 無視系(距離) */
  --oct-leading:  #708060;  /* 主導系 ── 古オリーブ・認識 */
  --oct-ignoring: #9a8ba8;  /* 無視系 ── 薄紫・距離 */
}

/* オクタドナビゲーション ── 構築相/吟味相でグルーピング */
.group-nav-row a.gn-link .gn-code.phase-build { color: #b8682d; }
.group-nav-row a.gn-link .gn-code.phase-examine { color: #5a5078; }

/* グループカード色 ── 4 オクタド */
.group-card.gc-1 .group-card-body { border-top-color: var(--oct-quest); }
.group-card.gc-2 .group-card-body { border-top-color: var(--oct-forge); }
.group-card.gc-3 .group-card-body { border-top-color: var(--oct-herald); }
.group-card.gc-4 .group-card-body { border-top-color: var(--oct-judge); }

/* オクタド概論では 4 カードを 2×2 で */
.group-grid.octad-grid { grid-template-columns: repeat(2, 1fr); }

/* ── サイクル図(危機・遷移サイクル)── */
.cycle-diagram {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 28px 0 16px;
  position: relative;
}
.cycle-phase {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px 16px 16px;
  text-align: center;
  position: relative;
  margin: 0 6px;
  border-top: 3px solid var(--accent);
}
.cycle-phase.cp-quest  { border-top-color: var(--oct-quest); }
.cycle-phase.cp-forge  { border-top-color: var(--oct-forge); }
.cycle-phase.cp-herald { border-top-color: var(--oct-herald); }
.cycle-phase.cp-judge  { border-top-color: var(--oct-judge); }
.cycle-phase-no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.cycle-phase-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cycle-phase-axis {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.cycle-phase-role {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.6;
}
.cycle-arrow {
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  margin: 6px 0 24px;
  letter-spacing: 0.2em;
}
.cycle-bridge {
  display: inline-block;
  font-size: 11px;
  color: var(--accent-dark);
  font-family: var(--mono);
}
@media (max-width: 720px) {
  .cycle-diagram { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cycle-phase { margin: 0; }
}

/* ── 2 ブロック内訳バー ── */
.block-breakdown {
  margin: 20px 0 28px;
}
.block-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.block-bar-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  min-width: 96px;
  color: var(--text);
}
.block-bar-track {
  flex: 1;
  height: 26px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
.block-bar-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: white;
}
.bb-leading  { background: var(--oct-leading); }
.bb-ignoring { background: var(--oct-ignoring); }

/* ── トポロジー2法則カード ── */
.topo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
.topo-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 20px 22px;
}
.topo-card.tc-bind { border-top: 3px solid var(--oct-leading); }
.topo-card.tc-split { border-top: 3px solid var(--oct-ignoring); }
.topo-card-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tc-bind .topo-card-eyebrow { color: #5a6f4a; }
.tc-split .topo-card-eyebrow { color: #6a5a7a; }
.topo-card-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.topo-card-body { font-size: 13.5px; color: var(--text-light); line-height: 1.8; }
@media (max-width: 720px) {
  .topo-grid { grid-template-columns: 1fr; }
}

/* 関係タグ色(オクタド用) */
.pair-tag.kindred   { background: #dde8d0; color: #4a6030; }
.pair-tag.business  { background: #dde8d0; color: #4a6030; }
.pair-tag.ideal     { background: #e8e0d0; color: #7a6020; }
.pair-tag.detached  { background: #e0dce8; color: #5a4a7a; }
.pair-tag.distrust  { background: #e8dce0; color: #7a4a5a; }
.pair-tag.tedium    { background: #e8dce0; color: #7a4a5a; }
.pair-tag.distance  { background: #d8c8c8; color: #7a3a3a; }

/* ── 関係内訳(rel-breakdown)── */
.rel-breakdown { margin: 20px 0 28px; }
.rb-group { margin-bottom: 18px; }
.rb-group-head {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 5px 5px 0 0;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rb-group-head.rb-leading { background: var(--oct-leading); }
.rb-group-head.rb-ignoring { background: var(--oct-ignoring); }
.rb-group-count { font-size: 11px; font-weight: 500; opacity: 0.9; }
.rb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
}
.rb-row:last-child { border-radius: 0 0 5px 5px; }
.rb-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  min-width: 56px;
  color: var(--text);
}
.rb-bar {
  flex: 1;
  height: 12px;
  background: #ececec;
  border-radius: 6px;
  overflow: hidden;
  max-width: 280px;
}
.rb-fill { height: 100%; border-radius: 6px; }
.rb-fill.bb-leading { background: var(--oct-leading); }
.rb-fill.bb-ignoring { background: var(--oct-ignoring); }
.rb-val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-light);
  min-width: 86px;
}
.rb-cnt {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 28px;
  text-align: right;
}
@media (max-width: 720px) {
  .rb-val { display: none; }
  .rb-bar { max-width: none; }
}

/* ── 3軸 共通特性カード ── */
.axis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.axis-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 20px 20px 18px;
  border-top: 3px solid var(--accent);
}
.axis-card-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.axis-card-poles {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  margin-bottom: 12px;
}
.axis-card-pole {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.axis-card-pole.dim { color: var(--text-muted); font-weight: 400; }
.axis-card-vs { font-size: 12px; color: var(--text-muted); }
.axis-card-body { font-size: 13px; color: var(--text-light); line-height: 1.75; }
@media (max-width: 720px) {
  .axis-grid { grid-template-columns: 1fr; }
}

/* ── 分担格子(2気質 × 4クラブ)── */
.division-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  margin: 20px 0 18px;
}
.division-table th {
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  padding: 4px 8px;
  text-align: center;
  border: none;
}
.division-table th.corner { text-align: left; }
.division-table th.row-label {
  text-align: right;
  color: var(--text);
  font-size: 11.5px;
  white-space: nowrap;
  vertical-align: middle;
  width: 110px;
}
.division-table td {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
  vertical-align: middle;
}
.dt-type {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.dt-jname {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.dt-quadra {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}
.division-table tr.row-active td { border-top: 2px solid var(--oct-leading); }
.division-table tr.row-receptive td { border-top: 2px solid var(--oct-ignoring); }
@media (max-width: 720px) {
  .division-table { border-spacing: 4px; }
  .division-table th.row-label { width: 64px; font-size: 10px; }
  .dt-jname { font-size: 12px; }
  .dt-type { font-size: 10.5px; }
}

/* ── 分担の2軸 説明 ── */
.role-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 28px;
}
.role-split-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px 20px;
}
.role-split-card.rs-temperament { border-left: 4px solid var(--oct-leading); }
.role-split-card.rs-club { border-left: 4px solid var(--accent); }
.role-split-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.role-split-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.role-split-body { font-size: 13px; color: var(--text-light); line-height: 1.78; }
@media (max-width: 720px) {
  .role-split-grid { grid-template-columns: 1fr; }
}

/* ── 個別ページ メンバーカードグリッド ── */
.oct-member-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0 32px;
}
.oct-member {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 14px 10px 12px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
  display: block;
}
.oct-member:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.oct-member img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border-soft);
  margin-bottom: 8px;
}
.om-quadra {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.om-type {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 2px 0 1px;
}
.om-jname {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
@media (max-width: 720px) {
  .oct-member-grid { grid-template-columns: repeat(2, 1fr); }
}