/*
 * 全体の質感
 *
 * 配色（濃紺＋ゴールド）は renderer.tsx の tailwind.config で定義している。
 * ここでは書体・余白・影など、色以外の部分を整える。
 */

:root {
  --ink: #1C2836;        /* 本文の濃紺 */
  --ink-soft: #4E5867;
  --gold: #C9A961;
  --paper: #F5F4F1;      /* 背景の生成り */
  --line: #E2E0DA;
}

body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  /* ごく淡い縦のグラデーションで紙のような奥行きを出す */
  background-image: linear-gradient(180deg, #FAF9F7 0%, #F5F4F1 55%, #EFEDE8 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* 見出しは明朝で品を出す */
h1, h2, h3, h4, h5 {
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* 干支・星名など占術用語は明朝の方が締まる */
.term, .kanshi {
  font-family: 'Noto Serif JP', serif;
}

/* カードは影を弱め、細い罫で輪郭を出す */
.shadow, .shadow-md, .shadow-lg {
  box-shadow: 0 1px 2px rgba(28, 40, 54, 0.04), 0 8px 24px -12px rgba(28, 40, 54, 0.14) !important;
}

.rounded-lg { border-radius: 0.5rem; }

/* 白いカードに極細の罫を足して輪郭を締める */
.bg-white {
  border-color: var(--line);
}

/* 入力欄 */
input[type="text"], input[type="number"], input[type="date"],
input[type="password"], select, textarea {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #FFFFFF;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18) !important;
}

/* ラジオ・チェックの色を基調に合わせる（既定の青のままだと浮く） */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--gold);
}

/* 選択中の項目を金の細罫で示す */
label:has(input[type="radio"]:checked) {
  border-color: var(--gold) !important;
  background-color: #FBF8F1;
}

/* ボタンの押し心地 */
button, .btn {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.03em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
button:active { transform: translateY(1px); }

/* 罫線 */
hr, .border, .border-t, .border-b, .border-2 { border-color: var(--line); }

/* スクロールバー（横スクロールする一覧で目障りにならないように） */
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: #CFCCC4; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* 以前のけばけばしい発光影は残しつつ、控えめな影に置き換える */
.shadow-glow, .shadow-glow-pink, .shadow-glow-red {
  box-shadow: 0 8px 28px -14px rgba(28, 40, 54, 0.35) !important;
}

/* グラデーション枠は金の細罫に */
.gradient-border { position: relative; background: #fff; border-radius: 0.5rem; }
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 0.5rem;
  padding: 1px;
  background: linear-gradient(160deg, var(--gold), #E2D6B4, var(--gold));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* アニメーション（既存のクラスを維持） */
@keyframes pulse-slow { 0%,100% { opacity: 1 } 50% { opacity: .85 } }
@keyframes bounce-slow { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }

* { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ============================================================
   高級感のための調整
   参考にした共通則：余白を広く、線は細く、色数は少なく、
   書体の大小差で情報の序列をつける。
   ============================================================ */

/* --- 線 ------------------------------------------------- */
/* 2pxの色付き枠は太くて野暮ったい。すべて1pxの細罫にする */
.border-2 { border-width: 1px !important; }

/* 角は浅く。丸すぎると柔らかくなりすぎる */
.rounded-lg, .rounded-md, .rounded { border-radius: 3px !important; }
.rounded-full { border-radius: 9999px !important; }

/* --- 余白 ----------------------------------------------- */
/* 節と節のあいだをゆったり取る。ここが詰まると一気に安く見える */
#result > .space-y-6 > * + * { margin-top: 2.5rem !important; }

/* カードの内側も広げる */
#result .p-6 { padding: 1.75rem !important; }
@media (min-width: 640px) {
  #result .p-6 { padding: 2.25rem !important; }
}

/* --- 書体 ----------------------------------------------- */
/* 大きな数字は明朝の細めに。太いゴシックの巨大数字は素人っぽく見える */
.text-4xl, .text-3xl, .text-2xl {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.text-4xl { line-height: 1.25; }

/* 節の見出し：小さめ・字間広め。大きく太くしない */
#result h4 {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  margin-bottom: 1.5rem !important;
}

/* 「番号:」「エネルギー:」などの小見出しは静かに */
.text-xs { letter-spacing: 0.08em; }

/* --- 色 ------------------------------------------------- */
/* 節見出しの色を落ち着かせ、金の縦罫だけを効かせる */
#result h4 { color: var(--ink) !important; }

/* 主要ボタンは塗りを濃紺で統一し、金は差し色に留める */
button.bg-purple-600, .bg-purple-600 { background-color: #2C3E50 !important; }
button.bg-purple-600:hover, .hover\:bg-purple-700:hover { background-color: #1C2836 !important; }

/* --- 操作性 --------------------------------------------- */
/* 見やすさのため本文は詰めすぎない */
#result p, #result .text-sm { line-height: 1.8; }

/* タップ領域はしっかり確保する（スマホでの誤操作を防ぐ） */
@media (max-width: 640px) {
  button, .cursor-pointer { min-height: 40px; }
}

/* --- 数字の色を絞る --------------------------------------
   柱ごとに数字の色を変えると視線が散る。
   数字はすべて濃紺に統一し、金はエネルギー値だけに使う。
   どの柱かは見出し（日柱・月柱…）で分かるので情報は失われない。
   -------------------------------------------------------- */
#result .text-4xl.text-purple-600,
#result .text-4xl.text-blue-600,
#result .text-4xl.text-green-600,
#result .text-4xl.text-amber-600 {
  color: var(--ink) !important;
}

#result .text-2xl.text-orange-500 {
  color: var(--gold) !important;
}

/* 「番号:」「エネルギー:」のラベルは限界まで静かに */
#result .text-xs.text-gray-500 { color: #8F99A8 !important; }

/* --- 読みやすさの確保 ------------------------------------
   淡い色の上に白文字を置くと読めなくなる。
   小さな文字ほどコントラストを厳しく取る。
   -------------------------------------------------------- */

/* 「番号:」などのラベルは静かにしつつ、読める濃さを保つ */
#result .text-xs.text-gray-500 { color: #515B68 !important; }

/* 金は白地だと薄い。文字に使うときは一段濃くする */
#result .text-2xl.text-orange-500 { color: #AC8C48 !important; }
#result .text-amber-600, #result .text-yellow-600,
#result .text-pink-600, #result .text-amber-700 { color: #8A6F39 !important; }

/* 色地に白文字を載せるボタンは、地を十分濃くする */
#result .bg-emerald-500 { background-color: #4A6E53 !important; }
#result .bg-emerald-500:hover { background-color: #3C5843 !important; }

/* 「該当なし」を示す × や － は控えめにしたいが、薄すぎると読めない */
#result .text-gray-300 { color: #9AA3B0 !important; }

/* 本命星などの円形バッジ：白文字を載せるので地を濃くする */
#result .from-emerald-500 { --tw-gradient-from: #3C5843 var(--tw-gradient-from-position) !important; }
#result .to-emerald-700 { --tw-gradient-to: #2E4333 var(--tw-gradient-to-position) !important; }

/* 「該当なし」の × は、控えめでも判読できる濃さにする */
#result .text-gray-300 { color: #868F9D !important; }

/* 推命リズムの金の棒：白文字を載せるので地を十分濃くする */
#result .from-yellow-600 { --tw-gradient-from: #6B562D var(--tw-gradient-from-position) !important; }
#result .to-yellow-800 { --tw-gradient-to: #453820 var(--tw-gradient-to-position) !important; }