@charset "UTF-8";
/* ==========================================================================
   layout.css — コンテナ・セクション・グリッド
   サイト非依存レイヤー。
   ========================================================================== */

/* --- コンテナ ------------------------------------------------------------ */
.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 散文が主体のページ用。見出しと本文の左端を揃え、行長を読みやすく保つ。
   .wrap と併用する: <div class="wrap wrap-narrow"> */
.wrap-narrow{ max-width:var(--container-narrow); }

/* このコンテナ自体が行長を制御するため、内部の幅制限は解除して軸を揃える。
   解除しないと見出しだけが広く、本文が左に寄って見える */
.wrap-narrow .prose,
.wrap-narrow .signature,
.wrap-narrow .sub,
.wrap-narrow .lead{ max-width:none; }

/* --- セクション ---------------------------------------------------------- */
section{ padding-block:var(--sp-72); }

/* 背景を白と --surface で交互にして、罫線に頼らず区切りを示す */
.sec-alt{
  background:var(--surface);
  border-block:1px solid var(--hairline);
}

/* --- グリッド ------------------------------------------------------------ */
.grid{ display:grid; gap:var(--sp-24); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

/* --- スタック（縦並び） -------------------------------------------------- */
.stack{ display:flex; flex-direction:column; }
.stack-8 { gap:var(--sp-8); }
.stack-12{ gap:var(--sp-12); }
.stack-16{ gap:var(--sp-16); }

/* --- 横スクロール領域（広い表・図） -------------------------------------- */
.scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2, 1fr); }
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
  .grid-2{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  section{ padding-block:var(--sp-56); }
  .grid-4,
  .grid-3,
  .grid-2{ grid-template-columns:1fr; }
}