/* 攻略ハブ（/now/ /start/ /growth/ /calendar/ /tools/）。クラス名は gh- 接頭辞だけを使う（.msg・data-open の衝突で表示が壊れた前例を避ける）。
   DESIGN.md の流儀に合わせる: 章は全幅の罫線・余白・見出しで分け、浮いたカードで囲まない（カード内カードを作らない）。
   角丸は8px以下。色は共通トークン（--ink --muted --line --paper --accent --accent-2）だけを使い、独自の配色・グラデーション・影を持たない。
   共通ヘッダー・フッター（.site-header など）には触れない。390px幅で横にはみ出さない（表は行ごとの縦並びにする）。 */
.gh-page { display: block; padding-bottom: 8px; color: var(--ink); overflow-wrap: anywhere; word-break: normal; line-break: strict; }
.gh-page *, .gh-page *::before, .gh-page *::after { min-width: 0; box-sizing: border-box; }
.gh-page a { color: var(--accent-2); text-underline-offset: 2px; }
.gh-page p { margin: 0 0 10px; }

.gh-crumbs { margin: 0 0 14px; font-size: .85rem; color: var(--muted); }
.gh-crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.gh-crumbs li + li::before { content: "›"; margin: 0 .5em; color: var(--muted); }
.gh-crumbs a { color: var(--accent-2); }

.gh-lead { padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
.gh-eyebrow { margin: 0 0 6px; color: var(--accent); font-size: .8rem; font-weight: 800; letter-spacing: .04em; }
.gh-summary { max-width: 44rem; margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.7; }

.gh-band { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.gh-band ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.gh-band li { display: flex; flex-wrap: wrap; gap: 0 8px; }
.gh-band li > span:first-child { font-weight: 700; color: var(--ink); }
.gh-band-sources > span:last-child { display: inline-flex; flex-wrap: wrap; gap: 0 14px; }

.gh-section { margin: 28px 0 0; }
.gh-section h2 { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 1.25rem; line-height: 1.4; }
.gh-section-lead { margin: 10px 0 12px; color: var(--muted); font-size: .92rem; }
.gh-note { padding: 14px 0; border-block: 1px solid var(--line); }
.gh-note h2 { border-bottom: 0; padding-bottom: 0; font-size: 1.1rem; }
.gh-caution { margin: 10px 0 0; color: var(--muted); font-size: .85rem; }
.gh-more { margin: 12px 0 0; font-size: .92rem; }
.gh-plain { margin: 12px 0 0; padding-left: 1.3em; line-height: 1.85; }
.gh-plain li { margin: 0 0 4px; }

/* 表: PC は罫線だけの表、スマートフォンは行ごとの縦並び */
.gh-table-wrap { margin: 12px 0 0; }
.gh-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.6; }
.gh-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gh-table th, .gh-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.gh-page .gh-table thead th { padding-top: 6px; color: var(--muted); font-size: .8rem; font-weight: 700; border-bottom-color: var(--ink); white-space: nowrap; }
.gh-page .gh-table th, .gh-page .gh-table td { background: transparent; text-transform: none; letter-spacing: 0; }
.gh-page .gh-table tbody th { font-size: .95rem; font-weight: 700; color: var(--ink); }
.gh-table tbody th a { font-weight: 700; }
.gh-cell-note { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.gh-ver { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .75rem; font-weight: 400; white-space: nowrap; }
.gh-remain { display: inline-block; color: var(--accent); font-weight: 700; white-space: nowrap; }
.gh-remain.gh-ended { color: var(--muted); }

.gh-state { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 4px; font-size: .75rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.gh-state-official { color: var(--accent-2); }
.gh-state-community { color: var(--gold); }
.gh-state-pending { color: var(--muted); }

/* 並べる項目（新英傑・最新号）。枠で囲まず、上罫線で区切る */
.gh-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 12px 0 0; padding: 0; list-style: none; }
.gh-item { padding: 12px 0; border-top: 1px solid var(--line); }
.gh-item p { margin: 0 0 4px; }
.gh-item-title { font-size: 1.02rem; font-weight: 800; }
.gh-item-meta { color: var(--muted); font-size: .85rem; }
.gh-item-text { font-size: .92rem; }
.gh-video { font-size: .85rem; }
.gh-section > .gh-item { margin-top: 12px; border-top: 1px solid var(--line); }

/* 番号ステップ */
.gh-steps { counter-reset: gh-step; margin: 12px 0 0; padding: 0; list-style: none; }
.gh-step { position: relative; counter-increment: gh-step; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); }
.gh-step::before { content: counter(gh-step); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border: 1px solid var(--ink); border-radius: 6px; font-weight: 800; line-height: 26px; text-align: center; }
.gh-step p { margin: 0 0 4px; }
.gh-step-title { font-size: 1.02rem; font-weight: 800; }
.gh-step-note { color: var(--muted); font-size: .92rem; }
.gh-step-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .92rem; }

.gh-about { color: var(--muted); font-size: .9rem; }
.gh-about h2 { font-size: 1.05rem; }

.gh-next { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.gh-next h2 { margin: 0 0 8px; font-size: 1.05rem; }
.gh-next ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gh-next li { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.gh-next li a { font-weight: 800; }
.gh-next li span { color: var(--muted); font-size: .78rem; }

@media (max-width: 720px) {
  .gh-summary { font-size: 1.02rem; }
  .gh-section h2 { font-size: 1.15rem; }
  .gh-list { grid-template-columns: minmax(0, 1fr); }
  .gh-band ul { flex-direction: column; }
  .gh-table-wrap { overflow: visible; }
  .gh-table, .gh-table tbody, .gh-table tr, .gh-table th, .gh-table td { display: block; width: 100%; }
  .gh-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gh-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .gh-table th, .gh-table td { padding: 2px 0; border-bottom: 0; }
  .gh-table tbody th { padding-bottom: 4px; font-size: 1rem; }
  .gh-table td { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0 10px; }
  .gh-table td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 700; }
  .gh-table td:empty { display: none; }
  .gh-next li { flex: 1 1 calc(50% - 8px); }
}