/* src/public/css/calculator/subscription-proration.css … サブスク日割り計算の見た目
   💡 入力欄・ボタン・結果のカード・表は、共通の money.css・calc-common.css を使います（ダークモードは theme-dark.css の末尾） */

/* 求めるもの（即解約／アップグレード） */
.sp-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.sp-mode-label { font-weight: bold; color: #1e3c72; }
.sp-mode label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

#sp-form > .mc-grid { align-items: end; }
#sp-form input[type="date"] { width: 100%; box-sizing: border-box; padding: 9px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; background: #fff; }
#sp-form input[type="date"][readonly] { background: #f1f5f9; color: #475569; }
#sp-form .mc-grid select { width: 100%; }

/* いちばん上のカードは、1行を広く使う */
.mc-cards.sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-card-main { grid-column: 1 / -1; }
.sp-card-main .mc-card-val { font-size: 2rem; }
.sp-card-main .mc-card-val.is-pay { color: #b45309; }
.sp-card-text { font-size: 0.95rem; color: #1e293b; }

.sp-bd-title { margin: 16px 0 6px; font-size: 1rem; }
.mc-table.sp-bd tbody th { font-weight: normal; white-space: normal; overflow-wrap: break-word; hyphens: auto; min-width: 7em; }
.mc-table.sp-bd td { white-space: normal; }
.sp-disclaimer { margin-top: 10px; font-size: 0.85rem; color: #92400e; }
.mc-table.sp-day-table thead th { white-space: normal; overflow-wrap: anywhere; }
.mc-table.sp-day-table tbody th { font-weight: normal; white-space: normal; overflow-wrap: anywhere; }
.mc-table tr.is-current th, .mc-table tr.is-current td { font-weight: bold; }

@media (max-width: 600px) {
    .mc-cards.sp-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mc-form .sp-opt-grid { grid-template-columns: 1fr; }
    .sp-card-main .mc-card-val { font-size: 1.7rem; }
    #sp-form input[type="date"] { font-size: 16px; }
    .mc-table.sp-day-table th, .mc-table.sp-day-table td { padding-left: 4px; padding-right: 4px; }
}