/* =============================================================
   UTSUWA GUIDE  ハブページ共通スタイル（intro / story 共用）
   本実装で style.css として CDN 配信。ここは1ファイルにまとめた版。
   ハブ2枚（/c/knowledge/intro・/c/knowledge/story）で同一レイアウト。
   差し替えるのは各 skeleton の :root 内アクセント変数と hero 文言のみ。
   ============================================================= */
.ug-hub :where(*) { box-sizing: border-box; }
.ug-hub {
  --ug-sp-1: 8px;  --ug-sp-2: 13px; --ug-sp-3: 21px;
  --ug-sp-4: 34px; --ug-sp-5: 55px; --ug-sp-6: 89px;
  --ug-c-bg: #ffffff;
  --ug-c-bg-soft: #f7f1e8;
  --ug-c-ink: #3a322a;
  --ug-c-ink-soft: #5a504a;
  --ug-c-line: #e2e0dd;
  --ug-c-mute: #8a7e6f;
  --ug-c-accent: #b08560;
  --ug-c-accent-deep: #8a6440;
  /* ▼ ハブごとに差し替える主色（intro=金茶／story=藍）。他は共通 ▼ */
  --ug-c-key: #b08560;
  --ug-c-key-deep: #8a6440;
  --ug-c-key-light: #efe3d3;
  background: var(--ug-c-bg);
  color: var(--ug-c-ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.ug-hub section { padding: var(--ug-sp-6) var(--ug-sp-5); }
.ug-hub-inner { max-width: 1120px; margin: 0 auto; }

/* ===== HERO ===== */
.ug-hub-hero {
  background: var(--ug-c-bg);
  padding: var(--ug-sp-6) var(--ug-sp-5) var(--ug-sp-5);
  text-align: center;
}
.ug-hub-hero-eyebrow {
  display: inline-block;
  font-size: 12px; letter-spacing: 0.2em;
  padding: 5px 16px; color: #fff;
  background: var(--ug-c-key); border-radius: 2px;
  margin: 0 0 var(--ug-sp-3);
}
.ug-hub-hero-title {
  font-weight: 500; font-size: 32px; line-height: 1.5;
  margin: 0 0 var(--ug-sp-2); color: var(--ug-c-ink);
}
.ug-hub-hero-lead {
  max-width: 640px; margin: 0 auto;
  font-size: 15px; color: var(--ug-c-ink-soft);
}

/* ===== シリーズ・グループ ===== */
.ug-hub-group { padding-top: var(--ug-sp-5); padding-bottom: var(--ug-sp-5); background: var(--ug-c-bg); } /* 全グループ白・区切りは group-head の罫線に統一 */
.ug-hub-group-head {
  max-width: 1120px; margin: 0 auto var(--ug-sp-4);
  padding-bottom: var(--ug-sp-2);
  border-bottom: 2px solid var(--ug-c-key-light);
}
.ug-hub-group-title {
  font-weight: 500; font-size: 22px; color: var(--ug-c-ink);
  margin: 0 0 6px;
}
.ug-hub-group-sub { font-size: 13px; color: var(--ug-c-mute); margin: 0; }

/* ===== カードグリッド ===== */
.ug-hub-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; gap: var(--ug-sp-3);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .ug-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ug-hub-grid { grid-template-columns: 1fr; } }

/* 1カード＝1リンクブロック */
.ug-hubcard {
  display: flex; flex-direction: column;
  padding: var(--ug-sp-3) var(--ug-sp-3) var(--ug-sp-4);
  background: var(--ug-c-bg);
  border: 1px solid var(--ug-c-line); border-radius: 4px;
  text-decoration: none; color: var(--ug-c-ink);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ug-hubcard:hover {
  border-color: var(--ug-c-key);
  box-shadow: 0 6px 20px rgba(58,50,42,.10);
  transform: translateY(-2px);
}
.ug-hubcard-no {
  font-size: 12px; letter-spacing: 0.15em;
  color: var(--ug-c-key-deep); font-weight: 700;
  margin: 0 0 var(--ug-sp-1);
}
.ug-hubcard-title {
  font-weight: 500; font-size: 17px; line-height: 1.55;
  color: var(--ug-c-ink); margin: 0 0 var(--ug-sp-1);
}
.ug-hubcard-desc {
  font-size: 13px; line-height: 1.75; color: var(--ug-c-ink-soft);
  margin: 0;
}
.ug-hubcard-go {
  margin-top: auto; padding-top: var(--ug-sp-2);
  font-size: 13px; color: var(--ug-c-key-deep); font-weight: 500;
}
.ug-hubcard-go::after { content: " \2192"; }

/* ===== 他ハブへの相互導線 ===== */
.ug-hub-cross { text-align: center; }
.ug-hub-cross-btn {
  display: inline-block; padding: 14px 32px;
  border: 1px solid var(--ug-c-key); border-radius: 3px;
  color: var(--ug-c-key-deep); text-decoration: none; font-weight: 500;
}
.ug-hub-cross-btn:hover { background: var(--ug-c-key); color: #fff; }

/* ===== a:visited 防御（§⑩-B・新リンククラスは必ずここに追記）===== */
.ug-hubcard:link, .ug-hubcard:visited, .ug-hubcard:hover, .ug-hubcard:active, .ug-hubcard:focus { color: var(--ug-c-ink) !important; }
.ug-hub-cross-btn:link, .ug-hub-cross-btn:visited, .ug-hub-cross-btn:active, .ug-hub-cross-btn:focus { color: var(--ug-c-key-deep) !important; }
.ug-hub-cross-btn:hover { color: #fff !important; }