/* 骨組み。ヘッダー・フッター・本体の器だけ。
   中に入る部品の見た目は components.css。 */

/* ── ヘッダー ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: var(--w-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 16px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  font-size: var(--fs-nav);
  color: var(--nav-ink);
  padding: 9px 11px;
  border-radius: var(--r-nav);
}

.site-nav a:hover { background: var(--nav-hover); color: var(--nav-ink); }

/* いま開いているページ。sync-partials.py が aria-current を付ける */
.site-nav a[aria-current="page"] {
  background: var(--nav-hover);
  font-weight: 700;
}

/* ── ロゴ（黒石と白石を重ねた印）──
   画像を持たず CSS の円で描く。--size を変えればヘッダー用にも
   フッター用にもなる。石の直径は印の 65 %、白石だけ 1px 上に置くのは
   design 稿の実測どおり（2 つを水平に並べると重心が下がって見える） */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.brand__mark {
  position: relative;
  display: inline-block;
  width: var(--size, 34px);
  height: var(--size, 34px);
  flex: none;
}

.brand__mark::before,
.brand__mark::after {
  content: '';
  position: absolute;
  width: calc(var(--size, 34px) * .65);
  height: calc(var(--size, 34px) * .65);
  border-radius: 50%;
}

.brand__mark::before {          /* 黒石。左下に置く */
  left: 0;
  top: calc(var(--size, 34px) * .205);
  background: var(--logo-black);
}

.brand__mark::after {           /* 白石。右上に置く */
  right: 0;
  top: calc(var(--size, 34px) * .03);
  background: var(--logo-white);
  border: 1px solid var(--logo-white-edge);
}

.brand__text { display: flex; flex-direction: column; line-height: 1.2; }

.brand__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-lead);
  color: var(--ink);
  letter-spacing: .02em;
}

.brand__reading {
  font-size: var(--fs-logo-sub);
  letter-spacing: .14em;
  color: var(--muted-soft);
}

/* ── 本体 ── */
.site-main {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 16px 14px 0;
}

.section { padding: 44px 0 4px; }
.section--first { padding: 12px 0 8px; } /* 対局区。H1 は header の Logo 列へ */
.section--last { padding: 44px 0 44px; }

/* 本文・FAQ・お知らせは 720px で折り返す。
   920px のまま流すと 1 行が 85 字を超えて行を見失う（PLAYBOOK §6） */
.section__body { max-width: var(--w-article); }

/* ── フッター ── */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
}

.site-footer__inner {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 26px 16px 20px;
}

.site-footer .brand { gap: 9px; margin-bottom: 10px; }
.site-footer .brand__name { color: var(--on-fill); font-size: var(--fs-logo); }

.site-footer__nav {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
  font-size: var(--fs-footnav);
}

.site-footer__nav a { color: var(--footer-ink); text-decoration: none; }
.site-footer__nav a:hover { color: var(--on-fill); }
/* 法務・問い合わせは一段沈める —— 主たる導線ではない */
.site-footer__nav a.is-sub { color: var(--footer-sub); }

.site-footer__note {
  border-top: 1px solid var(--line-footer);
  text-align: center;
  font-size: var(--fs-copy);
  padding: 13px;
  color: var(--footer-sub);
}

/* 非公式である旨の名乗り（PLAYBOOK §7）。
   五目並べ は一般名称で商標の問題は無いが、
   「誰が作っているのか」への答えは AdSense の審査で必ず探される */
.site-footer__disclaimer {
  margin-top: 8px;
  font-size: var(--fs-copy);
  color: var(--footer-sub);
  line-height: 1.6;
}