.csf-wrap { max-width: 820px; margin: 0 auto; }
.csf-row { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.csf-dob { flex: 1; padding: 14px 16px; border: 2px solid #caa06b; border-radius: 6px; font-size: 18px; }
.csf-btn { color: #fff !important; }
.csf-btn span { margin-left: 8px; }
.csf-loading .csf-btn { opacity: .7; pointer-events: none; }
.csf-result { margin-top: 12px; font-size: 18px; }
.csf-intro { text-align: center; line-height: 1.6; margin-bottom: 18px; }
.csf-strong { color: #b48938; font-weight: 700; }

.csf-table { width: 100%; border: 1px solid #e6dccf; border-radius: 8px; overflow: hidden; }
.csf-table-head, .csf-row { display: grid; grid-template-columns: 1fr 180px; }
.csf-table-head { background: #b0894a; color: #fff; font-weight: 700; }
.csf-table-head .csf-col { padding: 14px 16px; }
.csf-row .csf-col { padding: 12px 16px; border-top: 1px solid #efe8de; }
.csf-row.section { background: #f6efe7; font-weight: 700; }
.csf-row.total { background: #fbf7f1; font-weight: 700; }
.csf-col.amount { text-align: right; }
.csf-sub { font-size: 12px; color: #0b2159; margin-top: 6px; }
.csf-footer-note { font-size: 14px; margin-top: 12px; color: #0b2159; }
.csf-error { color: #b00020; }

@media (max-width: 600px) {
  .csf-table-head, .csf-row { grid-template-columns: 1fr 120px; }
  .csf-dob { font-size: 16px; }
  .csf-btn { font-size: 16px; }
}