/* =========================================
   common.css  — Base Layout Only (non-invasive)
   ========================================= */
:root{
  --container: 1800px;
  --page-padding: 16px;
}
*{ box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

/* 3段レイアウト（ヘッダ/本文/フッタ） */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0 auto;
  /* ここでは色や背景を設定しない */
  font-family: "Inter","Noto Sans JP","メイリオ",sans-serif;
}

/* コンテナ中央寄せ（装飾は各ページ/テーマ側に任せる） */
.container,
body header,
div#div_inp,
#divid1,
footer{
  width: min(96vw, var(--container)) !important;
  margin-inline: auto;
}

/* 本文 */
#divid1{
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  width: min(96vw, var(--container)) !important;
  align-items: center;
  margin: 24px auto;
  padding: var(--page-padding);
  border-radius: 12px; /* 装飾は軽め。色は付けない */
}

/* 共通カードの最低限（色はページ/テーマ任せ） */
.card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

footer{ flex: 0 0 auto; margin-top: auto; }
footer small{
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  /* 色はテーマ or ページで定義 */
}

/* レスポンシブ */
@media (max-width: 1200px){
  :root{ --container: 1300px; }
  .wrap{ grid-template-columns: 60% 40%; gap: 20px; }
}
@media (max-width: 900px){
  .wrap{ grid-template-columns: 1fr; gap: 16px; }
  img{ max-width: 100%; height: auto; }
}

/* ===== Sticky footer 安定化（全ページ共通）===== */
html, body {
  height: 100%;
  min-height: 100svh;  /* モバイルUIの高さ変動にも強い */
}

body {
  display: flex;
  flex-direction: column;
}

/* メイン領域は “縮め可” にして内部スクロールへ高さを渡す */
#divid1 {
  flex: 1 1 auto !important;
  min-height: 0 !important;        /* ←超重要：子の overflow が効く */
  display: flex;
}

/* ページ側コンテナは縦並び＆縮め可 */
#divid1 > .container,
#divid1 > .wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;                    /* ←これがないと子がはみ出す */
}

/* 共通カードも高さで突っ張らないように */
.card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}