/* Pumpkin Labo tools — 共通デザイントークン & 共通レイアウト
   ヘッダー (_header.html) / フッター (_footer.html) のスタイルもここに集約。
   max-width はツール毎に変わるので CSS 変数化 (--container-max)。
   1200px が必要なツールは :root { --container-max: 1200px; } で上書き。 */

/* ===== SML Aliceblue palette =====
   2026-05 にPumpkin Autumnパレットから移行. ロール名 (--pumpkin / --wine / --cream / --green)
   は互換性維持のため変更せず、値だけ差し替えている.
   - --pumpkin (旧オレンジ) → Royal Blue (#1E88E5)  …  primaryアクセント
   - --wine    (旧ワイン)   → Deep Navy (#102A4C)  …  テキスト・ボーダー・影
   - --cream   (旧クリーム) → Aliceblue (#F0F8FF)  …  ベース背景
   - --green  はそのまま (success / secondary cardロール)
*/
:root {
  --pumpkin: #1e88e5;
  --pumpkin-light: #5fadf2;
  --pumpkin-dark: #1565c0;
  --wine: #102a4c;
  --wine-dark: #0a1b30;
  --green: #2e7d32;
  --cream: #f0f8ff;
  --cream-dark: #e7f3fb;
  --container-max: 1100px;
  /* 新規: 旧版で多用されていた raw rgba 値を集約 */
  --pumpkin-rgba-soft: rgba(30, 136, 229, 0.22);
  --pumpkin-rgba-glow: rgba(30, 136, 229, 0.25);
  --wine-rgba-faint:   rgba(16, 42, 76, 0.07);
}

/* 旧コードで rgba(232, 146, 60, ...) や rgba(91, 42, 77, ...) を多用していた箇所への配慮として、
   page-titleの:rotate帯やbody背景のグラデは _common.css 側で再定義済み. 個別ツールに残る
   rgba ハードコードは段階的に置き換える方針. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  font-family: 'Poppins', 'M PLUS Rounded 1c', sans-serif;
  color: var(--wine-dark);
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(30, 136, 229, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(251, 192, 45, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(16, 42, 76, 0.10) 0%, transparent 50%),
    linear-gradient(135deg, #f0f8ff 0%, #dcecf9 100%);
  background-attachment: fixed;
  position: relative;
  padding-bottom: 40px;
}

body::before {
  content: ""; position: fixed; inset: 0;
  background-image: radial-gradient(circle, rgba(16, 42, 76, 0.07) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  pointer-events: none; z-index: 0;
}

header {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 40px;
  max-width: var(--container-max); margin: 0 auto;
}

.brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 800; font-size: 18px; letter-spacing: 0.04em;
  color: var(--wine);
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.brand::before {
  content: ""; display: inline-block; width: 12px; height: 12px;
  border-radius: 50%; background: var(--pumpkin);
  box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.25);
}

.nav-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.15em;
  color: var(--wine); opacity: 0.7; text-transform: uppercase;
}

.header-nav { display: flex; align-items: center; gap: 12px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 2px solid var(--wine);
  border-radius: 999px;
  font-family: 'Poppins', 'M PLUS Rounded 1c', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--wine);
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--wine);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.back-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--wine);
  background: var(--cream);
}
.back-link:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--wine);
}

footer {
  position: relative; z-index: 1;
  padding: 24px 40px 8px;
  text-align: center;
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--wine); opacity: 0.6;
}