/* 四柱推命「今日・明日のあなたの運勢」だけで使う見た目
   色は style.css の緑のテーマ（--panel・--soft・--accent・--line）をそのまま使います */

.spaced{margin-top:24px}

/* 結果 */
.today-result{margin-top:24px}
.today-result .today-result-title{margin-bottom:4px}
.today-result .birthday{font-size:15px;color:var(--muted)}
.day-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 22px}
.day-tab{font:inherit;font-size:18px;font-weight:700;color:#2f3a26;background:#fff;border:2px solid var(--accent);border-radius:16px;padding:10px 8px;cursor:pointer;line-height:1.5}
.day-tab span{display:block;font-size:14px;font-weight:400}
.day-tab[aria-selected="true"]{background:var(--accent);color:#fff}
.day-panel[hidden]{display:none}
.day-date{font-size:16px;color:var(--muted);text-align:center}
.day-head{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0 22px}
.day-character{width:150px;height:auto;aspect-ratio:1;object-fit:contain}
.day-god{font-size:16px}
.day-god strong{font-size:20px;margin:0 3px}
.day-title{font-size:26px;line-height:1.5}
.day-block,.day-action{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.day-block h4,.day-action h4{font-size:17px;margin:0 0 6px;color:#435930}
.day-block h4::before{content:"";display:inline-block;width:7px;height:7px;background:var(--accent);transform:rotate(45deg);margin-right:9px;vertical-align:2px}
.day-block p,.day-action p{font-size:17px}
.day-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.day-block.love h4::before{background:#e5a3a0}
.day-block.money h4::before{background:#d9b65c}
.day-action{margin-top:14px;background:var(--soft);border-color:var(--accent)}
.day-action h4::before{content:"✦";margin-right:6px;color:#7d9658}
.day-next{display:grid;gap:12px;justify-items:center;margin-top:26px}
.day-next .retry{min-width:min(100%,420px)}
.day-again{font-size:16px}

/* 占い方（STEP） */
.step-list{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.step-list li{background:var(--soft);border-radius:18px;padding:18px;text-align:center}
.step-no{display:inline-block;font-size:13px;letter-spacing:.08em;background:var(--accent);color:#2f3a26;border-radius:50px;padding:1px 12px}
.step-list h3{font-size:19px;margin:8px 0 6px}
.step-list p{font-size:16px;text-align:left}

/* この占いの見方 */
.guide-h{font-size:20px;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.today-guide>h2+.guide-h{margin-top:14px}
.today-guide p{font-size:17px}
.god-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 8px}
.god-list div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.god-list dt{font-weight:700;font-size:17px}
.god-list dt span{display:inline-block;font-size:14px;background:var(--soft);color:#435930;border-radius:50px;padding:0 10px;margin-right:8px}
.god-list dd{margin:4px 0 0;font-size:16px;color:var(--muted)}

/* よくある質問 */
.faq-list{display:grid;gap:12px;margin-top:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.faq-q,.faq-a{display:flex;gap:10px;align-items:flex-start;font-size:17px}
.faq-q{font-weight:700}
.faq-a{margin-top:8px}
.faq-q span,.faq-a span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;margin-top:3px}
.faq-q span{background:var(--accent);color:#2f3a26}
.faq-a span{background:var(--soft);color:#435930}

/* ほかの占い */
.other-fortunes{text-align:center}
.other-list{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:left}
.other-list a{display:flex;align-items:center;gap:12px;height:100%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;color:var(--ink);text-decoration:none}
.other-list a:hover{border-color:var(--accent);background:var(--soft)}
.other-list img{width:64px;height:64px;object-fit:contain;flex:none}
.other-list strong{display:block;font-size:17px;color:#435930}
.other-list span{font-size:15px;line-height:1.7}

@media(max-width:980px){
  .other-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .day-head{flex-direction:column;gap:6px;text-align:center}
  .day-character{width:130px}
  .day-title{font-size:23px}
  .step-list,.god-list,.other-list,.day-grid{grid-template-columns:minmax(0,1fr)}
  .day-block,.day-action{padding:16px}
}

/* 入力欄：今の app.js（出生時刻の切り替え）が動かないよう、.birth-form とは別の名前にしています */
.today-form{min-width:0}
.today-form fieldset{padding:0;border:0;min-width:0;margin:0}
.today-form legend{font-size:17px;margin-bottom:10px}

/* 結果の本文は左ぞろえ（見出しだけ中央） */
.day-block,.day-action{text-align:left}
.day-block h4,.day-action h4{text-align:center}
/* 緑のボタンの文字は白（このページだけ） */
.today-form .primary,.today-result .retry{color:#fff}