/* ============================================================
   巫女まいこ診断 - common.css
   和風トーン（朱・桜・墨・金）/ 神社モチーフ
   ============================================================ */

/* ========== Reset ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ========== Design Tokens ========== */
:root {
  /* --- 主要カラー（良縁カレンダー由来） --- */
  --ake:         #c8434a;   /* 朱 */
  --ake-deep:    #a83139;   /* 深朱（hover/強強調） */
  --ake-light:   #e88891;   /* 淡朱 */
  --kobai:       #d88298;   /* 紅梅 */
  --sakura:      #f7e4e6;   /* 桜 */
  --sakura-pale: #fdf5f6;   /* 桜・最薄 */
  --gold:        #b8965a;   /* 金茶 */
  --gold-light:  #d4b97e;   /* 淡金 */

  /* --- 背景・地色 --- */
  --bg:          #fbf8f3;   /* 和紙地 */
  --bg2:         #ffffff;   /* カード地 */
  --bg3:         #f5efe6;   /* 一段沈めた地（命式表セルなど） */

  /* --- テキスト --- */
  --text:        #3a2e2a;   /* 墨 */
  --text-muted:  #7a6a64;   /* 補助 */
  --text-dim:    #aa9d96;   /* 注釈 */

  /* --- 罫線 --- */
  --line:        #e8ddd1;
  --line-strong: #d4c4b0;   /* 命式表の枠など強めの罫 */

  /* --- 五行カラー（御命式表・五行バー用） --- */
  --gogyo-moku: #6ba883;    /* 木：緑 */
  --gogyo-ka:   #c8434a;    /* 火：朱（--akeと同色） */
  --gogyo-do:   #b8965a;    /* 土：金茶（--goldと同色） */
  --gogyo-kin:  #d4b97e;    /* 金：淡金 */
  --gogyo-sui:  #5c8ea8;    /* 水：藍 */

  /* --- 状態色（運気バッジ等） --- */
  --good:  #6ba883;         /* 吉・追い風 */
  --warn:  #b8965a;         /* 注意・調整 */
  --bad:   #c8434a;         /* 凶・大殺界 */

  /* --- タイポグラフィ --- */
  --font-jp-serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-jp-sans:  'Noto Sans JP', sans-serif;
  --font-en:       'Cormorant Garamond', serif;

  /* --- スペーシング --- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  36px;
  --space-xl:  50px;
  --space-2xl: 80px;

  /* --- 角丸 --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- レイアウト --- */
  --container-max: 1100px;

  /* --- 影 --- */
  --shadow-sm: 0 1px 3px rgba(58,46,42,0.06);
  --shadow-md: 0 4px 16px rgba(58,46,42,0.08);
}

/* ========== Body ========== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-jp-sans);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* ========== 和紙背景の滲み（占いババの星空の置き換え） ========== */
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(200,67,74,0.04) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(216,130,152,0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(184,150,90,0.03) 0%, transparent 40%);
}

/* ========== 共通コンテナ ========== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  position: relative;
  z-index: 1;
}

/* ========== オーナメント（鳥居・菱形・線） ========== */
/* 良縁カレンダーの masthead::after と同じ ⛩ 区切り */
.ornament-torii {
  text-align: center;
  color: var(--ake);
  font-size: 20px;
  margin: var(--space-lg) 0;
}

/* 線＋菱形＋線 のオーナメント */
.header-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-md);
}
.header-ornament .line {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.header-ornament .diamond {
  width: 6px; height: 6px;
  background: var(--ake);
  transform: rotate(45deg);
  opacity: 0.85;
}

/* ========== フッター（共通） ========== */
.footer {
  text-align: center;
  padding: var(--space-lg) var(--space-sm) var(--space-sm);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 2px;
}
.footer-line {
  font-family: var(--font-en);
  letter-spacing: 4px;
  color: var(--gold);
}

/* ========== ユーティリティ ========== */
.text-ake     { color: var(--ake); }
.text-gold    { color: var(--gold); }
.text-muted   { color: var(--text-muted); }
.font-serif   { font-family: var(--font-jp-serif); }
.font-en      { font-family: var(--font-en); }