/* ==============================
   Toriumi Manual CSS (FULL REPLACE)
   ============================== */

:root{
  --req:#ffe8d7;   /* 必須(オレンジ) */
  --opt:#eaf3ff;   /* 任意(青) */
  --line:#cfd6e0;
  --ink:#222;
  --panel:#f9fbff;
  --focus:#1a73e8;
}

/* ---------- Base ---------- */
.tomn-wrap{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink);
}

/* ---------- a: 入力フォーム ---------- */
.tomn-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  background:var(--panel);
  padding:1rem;
  border:1px solid #dbe3f1;
  border-radius:.75rem;
  margin-bottom:1rem;
}
@media (max-width:768px){
  .tomn-form{ grid-template-columns:1fr; }
}
.tomn-form label{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.9rem;
  border-radius:.5rem;
  padding:.35rem .45rem;
}
.t-req{ background:var(--req); }
.t-opt{ background:var(--opt); }

.tomn-input,
.tomn-select{
  border:1px solid #cfcfd2;
  border-radius:.5rem;
  padding:.45rem .55rem;
  font-size:1rem;
  background:#fff;
  width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.tomn-input:focus,
.tomn-select:focus{
  outline:0;
  border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--focus) 20%, transparent);
}
.tomn-row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:.25rem; }

.tomn-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.tomn-btn{
  appearance:none; border:1px solid #222; border-radius:.6rem;
  padding:.55rem .9rem; background:#fff; cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.tomn-btn:hover{ box-shadow:0 2px 10px #0001; }
.tomn-btn:active{ transform:translateY(1px); }
.tomn-btn.primary{ background:#111; color:#fff; border-color:#111; }

/* a: 60干支/蔵干サブテーブル */
.tomn-subtable{ grid-column:1/-1; width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); margin-top:.5rem; }
.tomn-subtable th,.tomn-subtable td{ border:1px solid var(--line); padding:.5rem; }
.tomn-subtable th{ white-space:nowrap; }
.tomn-subtable .req-row th,.tomn-subtable .req-row td{ background:var(--req); border-color:#f3b692; }
.tomn-subtable .req-row .t-opt{ background:var(--opt)!important; border-color:#cfe1ff; }

/* 時柱の横並び */
.time-line{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* ---------- サマリー ---------- */
#tau-summary #sum-line{ font-size:1.15rem; font-weight:700; }
#tau-summary #sum-alert{ color:#c62828; font-weight:700; margin-top:.25rem; }

/* ---------- b: 鑑定表 ---------- */
.tomn-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); background:#fff; font-size:.95rem; }
.tomn-table th,.tomn-table td{ border:1px solid var(--line); padding:.5rem; vertical-align:middle; }
.tomn-table thead th{ background:#f7f7fb; text-align:center; }
.tomn-table tbody th{ background:#f7f7fb; white-space:nowrap; }

.center{ text-align:center; }
.cell{ min-height:2rem; display:block; }
.mono{ font-feature-settings:'palt'; letter-spacing:.03em; }

/* 60干支セルの三段表示（陰陽五行／60干支／陰陽+支五行）*/
.cell-tri{
  display:grid;
  grid-template-rows:auto auto auto;
  row-gap:2px;
}
.cell-tri .s-top{ text-align:left;  font-size:.85rem; color:#555; }
.cell-tri .s-mid{ text-align:center; font-size:1.15rem; font-weight:700; }
.cell-tri .s-bot{ text-align:right; font-size:.85rem; color:#555; }

/* ---------- カレンダー（6列：西暦／60干支／干支／月／状態／時期） ---------- */
.tau-cal-under{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;  /* 中央: center／左: flex-start */
}
.cal-table{
  font-size:.9rem;
  border-collapse:collapse;
  border:1px solid var(--line);
  background:#fff;
}
.cal-table thead th{ text-align:center; background:#f7f7fb; }
.cal-table td,.cal-table th{ text-align:center; padding:.35rem; border:1px solid var(--line); }

/* 幅と列幅（6列版） */
.cal-six{ width:680px; table-layout:fixed; }
.cal-six th:nth-child(1), .cal-six td:nth-child(1){ min-width:92px; }   /* 西暦 */
.cal-six th:nth-child(2), .cal-six td:nth-child(2){ min-width:110px; }  /* 60干支 */
.cal-six th:nth-child(3), .cal-six td:nth-child(3){ min-width:64px; }   /* 干支（十二支） */
.cal-six th:nth-child(4), .cal-six td:nth-child(4){ min-width:60px; }   /* 月 */
.cal-six th:nth-child(5), .cal-six td:nth-child(5){ min-width:90px; }   /* 状態 */
.cal-six th:nth-child(6), .cal-six td:nth-child(6){ min-width:110px; }  /* 時期 */

@media (max-width:900px){
  .tau-cal-under{ justify-content:center; }
  .cal-six{ width:100%; }
}

/* ---------- 大運（見出し＋表） ---------- */
.tau-daun-under{ margin-top:14px; }

.daun-head{
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:.4rem;
  padding:.4rem .6rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  background:#fff;
}
.daun-title{ font-weight:700; letter-spacing:.02em; }
.daun-dir{ min-width:4rem; color:#444; } /* 順行/逆行表示 */
.daun-years{ margin-left:auto; display:flex; align-items:center; gap:.25rem; }
.daun-years input{
  width:5rem; padding:.35rem .5rem; border:1px solid #cfcfd2; border-radius:.4rem;
  font-size:1rem; text-align:right; background:#fff;
}

.daun-table{
  width:100%; border-collapse:collapse; border:1px solid var(--line); background:#fff; font-size:.9rem;
}
.daun-table thead th{ background:#f7f7fb; }
.daun-table th,.daun-table td{
  border:1px solid var(--line);
  padding:.45rem; text-align:center; vertical-align:middle;
}
.daun-table .rowhead{ background:#f7f7fb; white-space:nowrap; min-width:92px; }

@media (max-width:900px){
  .daun-table{ width:100%; }
}

/* ---------- Print ---------- */
@media print{
  .tomn-wrap{ color:#000; }
  .tomn-form{ border-color:#bbb; background:#fff; }
  .t-req{ background:#fff7f0 !important; }
  .t-opt{ background:#f5f9ff !important; }
  .tomn-btn{ display:none !important; }
}

/* ===== 健康運 ===== */
.tau-health-under{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;   /* 右寄せ。中央= center / 左寄せ= flex-start */
}
.health-table{
  width:420px;
  border:1px solid var(--line);
  border-collapse:collapse;
  background:#fff;
  font-size:.9rem;
}
.health-table caption{
  caption-side:top;
  text-align:left;
  font-weight:700;
  padding:.25rem 0 .35rem;
}
.health-table th,.health-table td{
  border:1px solid var(--line);
  padding:.38rem .5rem;
  vertical-align:middle;
}
.health-table thead th{ background:#f7f7fb; text-align:center; }
.health-table tbody th{ background:#f7f7fb; width:3.5rem; }
.health-table tbody td:nth-child(2),
.health-table tbody td:nth-child(3){ text-align:center; width:3.5rem; }

/* スマホでは中央寄せ＆幅100% */
@media (max-width:900px){
  .tau-health-under{ justify-content:center; }
  .health-table{ width:100%; }
}

/* ===== 守護神 ===== */
.tau-guardian-under{ margin-top:12px; display:flex; justify-content:flex-end; }
.guardian-table{
  width:360px; border:1px solid var(--line); border-collapse:collapse;
  background:#fff; font-size:.9rem;
}
.guardian-table caption{ caption-side:top; text-align:left; font-weight:700; padding:.25rem 0 .35rem; }
.guardian-table th,.guardian-table td{ border:1px solid var(--line); padding:.38rem .5rem; }
.guardian-table tbody th{ background:#f7f7fb; width:6.5rem; white-space:nowrap; }
.guardian-table tbody td{ text-align:left; }
@media (max-width:900px){
  .tau-guardian-under{ justify-content:center; }
  .guardian-table{ width:100%; }
}

/* ===== 守護神（健康運と同じ幅・トーン） ===== */
.tau-guardian-under{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;   /* 右寄せ（中央にしたいときは center） */
}
.guardian-table{
  width:420px;
  border:1px solid var(--line);
  border-collapse:collapse;
  background:#fff;
  font-size:.9rem;
}
.guardian-table caption{
  caption-side:top;
  text-align:left;
  font-weight:700;
  padding:.25rem 0 .35rem;
}
.guardian-table th,.guardian-table td{
  border:1px solid var(--line);
  padding:.38rem .5rem;
  vertical-align:middle;
}
.guardian-table th{ background:#f7f7fb; width:7.5rem; white-space:nowrap; }
.guardian-table td{ text-align:left; }
@media (max-width:900px){
  .tau-guardian-under{ justify-content:center; }
  .guardian-table{ width:100%; }
}

:root{ --opt:#eaf3ff; }           /* ← 好きなブルーに変更してOK */

/* 時柱（任意）行：ブルーバック */
.time-optional th,
.time-optional td,
.time-optional { background: var(--opt) !important; }