/*
 * onsen-forum.jp リニューアル v1 デザイントークン (DADS準拠 + NPO固有)
 * Phase 1 試作版
 */

:root {
  /* ============ Color ============ */
  /* Primary (DADS Navy 系) */
  --color-primary-900: #0c2340;
  --color-primary-700: #1a3a6b;
  --color-primary-500: #2c5b9f;
  --color-primary-300: #5b87c4;
  --color-primary-100: #d5e2f3;

  /* Accent (NPO固有・深緑 = 適応症等の「健康」セマンティクス専用) */
  --color-accent-700: #1d5a3a;
  --color-accent-500: #2e7e54;
  --color-accent-100: #d6ebe0;

  /* 金泉 (有馬の鉄泉の琥珀。温泉らしさを担う差し色 — 湯気マーク・罫線など少量使用に限定) */
  --color-kinsen-700: #8f4a24;
  --color-kinsen-500: #b0653a;
  --color-kinsen-100: #f4e7dc;

  /* 生成り (和紙の紙色。交互セクション背景用) */
  --color-paper: #faf7f1;

  /* Neutral (DADS Gray 系) */
  --color-text: #1a1a1a;
  --color-text-muted: #555;
  --color-text-disabled: #888;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f7;
  --color-border: #d6d6d6;
  --color-border-strong: #9a9a9a;

  /* Functional */
  --color-link: #1851a3;
  --color-link-visited: #5e3a8a;
  --color-link-hover: #0c3478;
  --color-focus: #ffb800;
  --color-error: #c01a1a;
  --color-success: #1d6e2d;

  /* ============ Typography ============ */
  /* 本文=ゴシック (高齢読者の可読性優先) / 見出し=明朝 (40年の学術・湯治文化の声)。和の編集誌の骨格 */
  --font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Font sizes (18px base for accessibility) */
  --font-size-base: 18px;
  --font-size-xs: 0.78rem;   /* 14px */
  --font-size-sm: 0.89rem;   /* 16px */
  --font-size-md: 1rem;      /* 18px (base) */
  --font-size-lg: 1.22rem;   /* 22px */
  --font-size-xl: 1.5rem;    /* 27px */
  --font-size-2xl: 1.89rem;  /* 34px */
  --font-size-3xl: 2.33rem;  /* 42px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.4;
  --line-height-base: 1.8;
  --line-height-relaxed: 2.0;

  /* ============ Spacing (4/8/16/24/32/48/64) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ============ Layout ============ */
  --layout-max-width: 1200px;
  /* 720px (35em) では2列カードの説明文が半端な位置で折り返すため一段拡張 (2026-08-03 ユーザーFB)。
     約43字/行はゴシック本文の可読範囲内 */
  --layout-content-max-width: 780px;
  --layout-gutter: var(--space-4);

  /* ============ Radius ============ */
  --radius-xs: 2px;  /* 顔写真など、角をわずかに落とすだけの箇所用 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ============ Shadow ============ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);

  /* ============ Breakpoints (参考) ============ */
  /* --bp-mobile: 640px; --bp-tablet: 1024px; --bp-desktop: 1280px; */
}

/* ============ Reset & Base ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: "palt";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 600; /* 明朝はboldだと墨溜まりして重い。600で品位を保つ */
  line-height: var(--line-height-tight);
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-3);
  color: var(--color-primary-900);
  font-feature-settings: "palt";
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); margin-top: var(--space-6); }
h3 { font-size: var(--font-size-xl); margin-top: var(--space-5); }
h4 { font-size: var(--font-size-lg); margin-top: var(--space-4); }

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:visited {
  color: var(--color-link-visited);
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration-thickness: 0.15em;
}

a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ============ Layout components ============ */
.container {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.content {
  max-width: var(--layout-content-max-width);
  margin-inline: auto;
}

/* \n 入りテキスト (研究会案内の日時/会場/会費など) を行構造のまま表示する汎用ユーティリティ */
.keep-breaks {
  white-space: pre-line;
}

/* ============ Header ============ */
.site-header {
  background: var(--color-primary-900);
  color: var(--color-bg);
  padding-block: var(--space-3);
  /* ハンバーガー化 (2026-08-02) でモバイルもヘッダーが1行になったため全幅で追随 */
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(10, 30, 60, 0.25);
}

/* アンカー遷移 (#kokusaikoryu, #kai-NNN 等) が固定ヘッダーに隠れないように */
html {
  scroll-padding-top: 80px;
}

@media (min-width: 1025px) {
  html {
    scroll-padding-top: 96px;
  }
}

.site-header a {
  color: var(--color-bg);
}

.site-title a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* p の行ボックスがアンカー (inline-flex) を上に押し出し、ナビ文字と縦中心が
   6.8px ズレていたのを解消 (2026-08-03 実測)。flex化で p の高さ = a の高さになる */
.site-title {
  display: flex;
  align-items: center;
}

.site-logo {
  display: block;
  width: auto;
  height: 44px;
  /* 光学補正: マークは上部の湯気ぶん本体(楕円)が下寄りのため、幾何中央揃えだと
     サイト名が上に見える (実測: 楕円中心がテキスト中心より約4px下)。3px持ち上げて調整 */
  transform: translateY(-3px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-title {
  /* 22px はモバイル390pxで折り返すため PC20px/モバイル18px (2026-08-02 ユーザー決定・CODEX同意見) */
  font-size: 1.11rem; /* 20px */
  font-weight: var(--font-weight-bold);
  margin: 0;
}

@media (max-width: 1024px) {
  .site-title {
    font-size: var(--font-size-md); /* 18px。375px以下でも1行を維持 */
  }
}

/* サイト名の常時下線は外す (ブランド要素のため。hover/focusでのみ表示) */
.site-title a {
  text-decoration: none;
}

.site-title a:hover,
.site-title a:focus-visible {
  text-decoration: underline;
}

.global-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.global-nav a {
  display: inline-block;
  min-height: 44px;
  padding: var(--space-2); /* 8項目ナビをPC幅1行に収めるため左右を詰める (タップ領域44pxは維持) */
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.global-nav a:hover,
.global-nav a:focus {
  background: var(--color-primary-700);
  text-decoration: underline;
}

/* ============ モバイルナビ (ハンバーガー) ============ */
.nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .site-header .container {
    flex-wrap: nowrap; /* ロゴ+ボタンの1行固定 (ナビは下に展開) */
  }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-bg);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* 開いたら ✕ に変形 */
  .nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ドロップダウン (位置基準 = sticky な .site-header) */
  .global-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary-900);
    box-shadow: 0 6px 12px rgba(10, 30, 60, 0.35);
    border-top: 1px solid var(--color-primary-700);
  }

  .nav-open .global-nav { display: block; }

  .global-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--layout-gutter);
  }

  .global-nav a {
    display: block;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-primary-700);
  }

  .global-nav li:last-child a {
    border-bottom: none;
  }
}

/* ============ Hero ============ */
/* 地紋 = 公式ロゴマークをうっすら (白7%)。右下に少し切らして置く */
.hero {
  background:
    url('/images/logo-mark-ghost.png') no-repeat right -80px bottom -100px / 480px auto,
    linear-gradient(135deg, var(--color-primary-900), var(--color-primary-700));
  color: var(--color-bg);
  padding-block: var(--space-7);
}

.hero h1 {
  color: var(--color-bg);
  margin-bottom: var(--space-3);
}

.hero p {
  font-size: var(--font-size-lg);
  margin: 0;
}

/* ============ Section ============ */
/* 帯の色分けはしない。区切りは余白と極細罫のみ (引き算の設計) */
section {
  padding-block: var(--space-7);
}

main > section + section {
  border-top: 1px solid #ececec;
}

/* ============ 湯気の三条 (サイト署名モチーフ) ============ */
/* セクション見出しの先頭に立ち上る湯気。使用は「見出しマーク」と「ヒーローの地紋」の2箇所に限定 */
.content > h2::before,
.content > section > h2::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 23px;
  margin-right: var(--space-2);
  background: url('/images/logo-mark-navy-s.png') no-repeat center / contain;
}

/* ============ Card grid (トップ導線 / business / organization 共用) ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  /* card-cta を下端に押し下げるための flex 化 (通常フローの見た目は不変) */
  display: flex;
  flex-direction: column;
}

/* カード末尾の「詳細 →」リンク行: 説明文の行数差に関係なく右下に揃える (2026-08-03 ユーザーFB) */
.card-cta {
  margin-top: auto; /* .card の flex 化とセット。クラス指定なので .card p より優先される */
  margin-bottom: 0;
  padding-top: var(--space-2);
  text-align: right;
}

/* 全面タップ化 (2026-08-05 ユーザーFB): カード/行の単独リンクに .stretch-link を付けると
   親 (position:relative の .card / .news-item) 全体がタップ可能になる。
   リンクが1つだけの要素にのみ使うこと (複数リンクがあると overlay が他リンクを塞ぐ) */
.card,
.news-item {
  position: relative;
}
.stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card:hover {
  border-color: var(--color-primary-500);
}
.news-item:has(.stretch-link):hover {
  background: var(--color-bg-alt);
}

.card h2,
.card h3 {
  /* カード見出しは本文書体。明朝は大見出し (h1/セクションh2) 専用に絞る */
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.card p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-wrap: pretty; /* 「〜の記/録」のような1〜2文字だけの折り返しを避ける (対応ブラウザのみ) */
}

/* ============ News card ============ */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.news-item {
  display: grid;
  /* 日付+カテゴリ列は固定幅: カテゴリの文字数差 (月例研究会/総会) でタイトル開始位置が
     行ごとにズレるのを防ぐ (2026-08-03 ユーザーFB) */
  grid-template-columns: minmax(10.5rem, max-content) 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);
  border-left: 4px solid var(--color-primary-500);
  border-radius: var(--radius-sm);
}

.news-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.news-category {
  display: inline-block;
  font-size: var(--font-size-xs);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-left: var(--space-2);
}

/* ============ Getsurei timeline ============ */
.getsurei-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.getsurei-filter-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-md);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.getsurei-filter-btn[aria-pressed="true"] {
  background: var(--color-primary-700);
  color: var(--color-bg);
  border-color: var(--color-primary-700);
}

.getsurei-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 3px solid var(--color-primary-300);
}

.getsurei-item {
  position: relative;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  margin-bottom: var(--space-3);
}

.getsurei-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: var(--space-4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary-500);
  border: 3px solid var(--color-bg);
}

.getsurei-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.getsurei-theme {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-900);
  margin: var(--space-1) 0;
}

.getsurei-docs {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.getsurei-photos {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.getsurei-photos img {
  height: auto;
  border-radius: var(--radius-sm);
}

.getsurei-upcoming-box {
  border: 1px solid var(--color-primary-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  background: var(--color-primary-100);
}

.getsurei-doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-100);
  color: var(--color-primary-900);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.getsurei-doc-link::before {
  content: "📄";
  font-size: 1.2em;
}

.getsurei-doc-link:hover,
.getsurei-doc-link:focus {
  background: var(--color-primary-300);
  text-decoration: underline;
}

/* ============ Breadcrumb ============ */
.breadcrumb {
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--color-text-muted);
}

/* ============ Footer ============ */
.site-footer {
  background: var(--color-primary-900);
  color: var(--color-bg);
  padding-block: var(--space-5);
  margin-top: var(--space-7);
}

.site-footer a {
  color: var(--color-primary-100);
}

.site-footer .footer-en {
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: var(--space-2);
}

/* ============ Dead link (外部リンク切れの非リンク化) ============ */
/* scripts/mark-deadlinks.mjs がビルド後に <a> を置換して付与 (2026-08 全数実測) */
.dead-link-note {
  color: var(--color-text-muted);
  font-size: 0.8em;
  white-space: nowrap;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
  :root {
    --font-size-3xl: 1.78rem;
    --font-size-2xl: 1.44rem;
  }

  /* (旧: ヘッダー縦積み+ナビ全幅のルールはハンバーガー化 2026-08-02 で撤去) */

  .news-item {
    grid-template-columns: 1fr;
  }
}