/* ===== 九星気学 2027年の運勢 ===== */

.ks-phase { display: none; }
.ks-phase.active { display: block; }

/* --- 入力フォーム --- */
.ks-form-ttl { font-size: 16px; font-weight: 700; color: #1a1440; text-align: center; margin-bottom: 14px; }
.ks-form-ttl::before { content: '👤 '; }
.ks-form-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.ks-select {
  font-family: inherit; font-size: 16px; font-weight: 500; color: #1a1440;
  background: #f9f8ff; border: 1.5px solid #e0ddf8; border-radius: 12px;
  padding: 12px 10px; min-width: 78px; cursor: pointer;
  appearance: none; -webkit-appearance: none; text-align: center; transition: border-color .18s;
}
.ks-select:focus { outline: none; border-color: #7F77DD; }
.ks-unit { font-size: 14px; color: #6b60b0; margin-right: 4px; }
.ks-err { font-size: 13px; color: #c0392b; background: #fdecea; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; line-height: 1.7; }

.ks-btn {
  display: block; width: 100%; font-family: inherit; font-size: 16px; font-weight: 700; color: #fff;
  background: #7F77DD; border: none; border-radius: 14px; padding: 17px; margin-top: 6px; cursor: pointer;
  letter-spacing: .04em; box-shadow: 0 4px 16px rgba(127,119,221,.32); transition: transform .18s, box-shadow .18s;
}
.ks-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(127,119,221,.42); }

.ks-note {
  font-size: 12px; color: #999; line-height: 1.8; margin-top: 16px; padding: 10px 14px;
  background: #f9f8ff; border-radius: 10px; border-left: 3px solid #AFA9EC;
}
.res-banner + .ks-note { margin: -8px 0 18px; }

/* --- 鑑定中 --- */
.ks-loading-card { text-align: center; padding: 56px 22px; }
.ks-loading-ring {
  width: 62px; height: 62px; margin: 0 auto 22px;
  border: 4px solid #e0ddf8; border-top-color: #7F77DD; border-radius: 50%;
  animation: ksSpin 1s linear infinite;
}
@keyframes ksSpin { to { transform: rotate(360deg); } }
.ks-loading-txt { font-size: 17px; font-weight: 700; color: #534AB7; margin-bottom: 8px; }
.ks-loading-sub { font-size: 13px; color: #999; line-height: 1.7; }

/* --- 本文の行ブロック --- */
.ks-line { display: block; }
.ks-line + .ks-line { margin-top: .85em; }

/* --- 2027年の運勢（見出し） --- */
.ks-year {
  text-align: center; background: linear-gradient(135deg, #fff7e6, #fdeef4);
  border-radius: 16px; padding: 20px 16px; margin-bottom: 14px;
}
.ks-year-lbl { font-size: 12px; color: #b07a2a; font-weight: 700; letter-spacing: .1em; margin-bottom: 6px; }
.ks-year-ttl { font-size: 28px; font-weight: 800; color: #1a1440; line-height: 1.3; }
.ks-year-sub { display: block; font-size: 14px; font-weight: 700; color: #b0417a; margin-top: 4px; }
.ks-year-pal { font-size: 12px; color: #888; margin-top: 8px; }

.ks-rate { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ks-rate-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #666; }
.ks-rate-row b { color: #E8A317; font-size: 15px; letter-spacing: 1px; font-weight: 400; }

.ks-adv { margin-top: 12px; }
.ks-adv .aval { font-size: 13px; font-weight: 400; line-height: 1.85; color: #333; }
.ks-adv .akey { font-size: 11px; color: #7F77DD; font-weight: 700; margin-bottom: 8px; }

.ks-care {
  font-size: 13px; color: #444; line-height: 1.85; background: #fff5f5; border-radius: 12px;
  padding: 12px 15px; margin-top: 12px; border-left: 3px solid #e57373;
}
.ks-care--love { background: #f9f8ff; border-left-color: #7F77DD; }
.ks-care-key { display: block; font-size: 11px; font-weight: 700; color: #c0392b; margin-bottom: 4px; letter-spacing: .04em; }
.ks-care--love .ks-care-key { color: #7F77DD; }

.ks-tip { background: #534AB7; border-radius: 14px; padding: 18px; margin-top: 12px; }
.ks-tip-ttl { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 6px; letter-spacing: .08em; }
.ks-tip-body { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.8; }

/* --- 九星盤 --- */
.ks-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 420px; margin: 0 auto 12px; }
.ks-cell {
  position: relative; background: #f9f8ff; border: 1.5px solid #e0ddf8; border-radius: 12px;
  padding: 10px 4px 12px; text-align: center; min-height: 82px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ks-cell-dir { font-size: 11px; color: #888; font-weight: 700; }
.ks-cell-star { font-size: 13px; color: #1a1440; font-weight: 700; }
.ks-cell-tag { font-size: 10px; font-weight: 700; line-height: 1.3; }
.ks-cell.is-center { background: #1a1440; border-color: #1a1440; }
.ks-cell.is-center .ks-cell-dir { color: rgba(255,255,255,.6); }
.ks-cell.is-center .ks-cell-star { color: #FFD76A; }
.ks-cell.is-good { background: #e9f8ef; border-color: #7dcea0; }
.ks-cell.is-good .ks-cell-tag { color: #1e8449; }
.ks-cell.is-bad { background: #fdf0f0; border-color: #f1b0b0; }
.ks-cell.is-bad .ks-cell-tag { color: #c0392b; }
.ks-cell.is-me { box-shadow: 0 0 0 3px #7F77DD inset; }
.ks-cell.is-me::after {
  content: 'あなた'; position: absolute; top: -8px; right: -4px; background: #7F77DD; color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}

.ks-dir { display: flex; flex-direction: column; gap: 8px; }
.ks-dir-row { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 12px 15px; }
.ks-dir-row.is-good { background: #e9f8ef; }
.ks-dir-row.is-bad { background: #fdf0f0; }
.ks-dir-key { font-size: 12px; font-weight: 700; flex-shrink: 0; width: 48px; padding-top: 1px; }
.ks-dir-row.is-good .ks-dir-key { color: #1e8449; }
.ks-dir-row.is-bad .ks-dir-key { color: #c0392b; }
.ks-dir-val { font-size: 14px; color: #333; line-height: 1.8; font-weight: 700; }
.ks-dir-row.is-bad .ks-dir-val { font-size: 13px; font-weight: 500; }
.ks-small { font-size: 12px; color: #999; line-height: 1.8; margin-top: 10px; }
.ks-board-cap { text-align: center; margin: -4px 0 12px; }

/* --- 月ごとの運気 --- */
.ks-best { font-size: 14px; color: #333; background: #fff7e6; border-radius: 12px; padding: 12px 15px; margin-bottom: 10px; }
.ks-best b { color: #b0417a; }
.ks-months { display: flex; flex-direction: column; gap: 6px; }
.ks-mon { background: #f9f8ff; border-radius: 12px; padding: 10px 14px; }
.ks-mon.is-best { background: #fff7e6; box-shadow: 0 0 0 1.5px #f3c56b inset; }
.ks-mon-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ks-mon-when { font-size: 15px; font-weight: 700; color: #1a1440; }
.ks-mon-from { font-size: 11px; color: #aaa; }
.ks-mon-bar { background: #e0ddf8; border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 6px; }
.ks-mon-fill { height: 6px; border-radius: 4px; background: #7F77DD; transition: width .8s ease; }
.ks-mon.is-best .ks-mon-fill { background: #E8A317; }
.ks-mon-body { font-size: 12px; color: #555; line-height: 1.7; }
.ks-mon-ttl { font-weight: 700; color: #534AB7; margin-right: 6px; }

/* --- アコーディオン --- */
.ks-acc { margin-top: 22px; }
.ks-acc-btn {
  width: 100%; font-family: inherit; font-size: 14px; font-weight: 700; color: #534AB7;
  background: #f9f8ff; border: 1.5px solid #e0ddf8; border-radius: 12px; padding: 15px; cursor: pointer; transition: background .18s;
}
.ks-acc-btn:hover { background: #eeedfe; }
.ks-acc-body { margin-top: 12px; }
.ks-detail { background: #f9f8ff; border-radius: 12px; padding: 20px 18px; }
.ks-detail-ttl {
  font-size: 13px; font-weight: 700; color: #7F77DD; margin: 18px 0 8px; padding-left: 8px;
  border-left: 3px solid #7F77DD; letter-spacing: .04em;
}
.ks-detail-ttl:first-child { margin-top: 0; }
.ks-detail-text { font-size: 13px; color: #444; line-height: 2; }
.ks-detail-text + .ks-detail-text { margin-top: .85em; }

@media (max-width: 420px) {
  .ks-select { min-width: 68px; font-size: 15px; padding: 11px 6px; }
  .ks-year-ttl { font-size: 24px; }
  .ks-cell { min-height: 74px; padding: 8px 2px 10px; }
  .ks-cell-star { font-size: 12px; }
}

/* 記事の一番下に置くシェアボタン */
#ks-share-bottom { margin: 28px 0 8px; }
#ks-share-bottom .sbtn, #ks-share-bottom .sbtn:hover { text-decoration: none; color: #fff; }