/* =========================================================
   layout.css
   - サイト全体の「土台」だけを書く
   - 文字/余白/ベースレイアウト/コンテナ/共通ユーティリティ
   - “部品（カード等）”は components.css に書く
   ========================================================= */

/* -------------------------
   Reset (minimum)
------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* -------------------------
   Base Typography
------------------------- */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: var(--pub-font-base, 15px);
  line-height: 1.7;
  color: var(--pub-text, #111827);
  background: var(--pub-bg, #f5f6f8);
}

/* Base spacing for text blocks */
p {
  margin: 0 0 12px 0;
}

h1, h2, h3 {
  line-height: 1.25;
}

/* Default text links (exclude UI controls / cards) */
main a:not(.card-link):not(.category-chip):not(.back-link):not(.btn):not(.site-header__brand):not(.site-footer__link){
  color: var(--pub-accent, #1565c0);
  text-decoration: none;
}
main a:not(.card-link):not(.category-chip):not(.back-link):not(.btn):not(.site-header__brand):not(.site-footer__link):hover{
  color: var(--pub-accent2, #1d4ed8);
}

/* Accessible focus */
:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--pub-accent, #2563eb) 55%, transparent);
  outline-offset: 3px;
}

/* -------------------------
   Site Container
   - header.php の <div class="container"> を想定
------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* -------------------------
   Common Page Wrappers
------------------------- */
main {
  display: block;
}

/* “中身を 1100px に揃える”ラッパー（必要な箇所だけ使う） */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* -------------------------
   Utilities (small)
------------------------- */
.u-muted {
  color: var(--pub-muted, #6b7280);
}

.u-small {
  font-size: var(--pub-font-sm, 13px);
}

.u-m0 { margin: 0; }
.u-mb-10 { margin-bottom: 10px; }
.u-lh-19 { line-height: 1.9; }
.u-center { text-align: center; }
.u-max-468 { max-width: 468px; }

.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mb-12 { margin-bottom: 12px; }