/* Generated by tools/split-subpage-css.php. Edit assets/css/source/subpage-modern.full.css instead. */
.lunar-heading { margin-bottom: 30px; text-align: left; }
.lunar-eyebrow { margin: 0 0 8px; color: #0f766e; font-size: .84rem; font-weight: 900; }
.lunar-heading h1 { margin-bottom: 12px; color: #172033; font-size: clamp(30px, 4vw, 42px); line-height: 1.2; letter-spacing: 0; }
.lunar-heading > p:last-child { max-width: 820px; margin: 0; color: #5b687b; font-size: .94rem; line-height: 1.75; }
.lunar-tool { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; padding: 24px; border: 1px solid #d9e1eb; border-radius: 8px; background: #fff; }
.lunar-form { display: grid; gap: 18px; min-width: 0; }
.lunar-form h2, .lunar-result h2 { margin: 0; color: #172033; font-size: 1.2rem; }
.lunar-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lunar-mode label { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; border: 1px solid #d9e1eb; border-radius: 999px; background: #f8fafc; color: #334155; font-size: .82rem; font-weight: 900; cursor: pointer; }
.lunar-mode label.is-active { border-color: #0f766e; background: #e8f6f2; color: #0f625c; box-shadow: inset 0 0 0 1px #0f766e; }
.lunar-mode input { margin: 0; }
.lunar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lunar-field { display: grid; gap: 7px; min-width: 0; }
.lunar-field label { color: #26354a; font-size: .86rem; font-weight: 900; }
.lunar-field input { width: 100%; height: 48px; margin: 0; }
.lunar-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: #334155; font-weight: 800; }
.lunar-check input { margin: 0; }
.lunar-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.lunar-actions button { min-height: 46px; margin: 0; white-space: nowrap; }
.lunar-primary { background: #0f766e !important; }
.lunar-primary:hover { background: #0b625c !important; }
.lunar-secondary { background: #e8edf4 !important; color: #314158 !important; }
.lunar-result { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 20px; border: 1px solid #d9e1eb; border-radius: 8px; background: #f8fafc; }
.lunar-main-result { padding: 18px; border: 1px solid #cde8e1; border-radius: 8px; background: #f3fbf8; }
.lunar-main-result span { display: block; margin-bottom: 5px; color: #0f766e; font-size: .74rem; font-weight: 900; }
.lunar-main-result strong { display: block; color: #172033; font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1.28; word-break: keep-all; }
.lunar-detail { display: grid; gap: 1px; overflow: hidden; border: 1px solid #dce3ec; border-radius: 8px; background: #dce3ec; }
.lunar-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; color: #26354a; font-size: .84rem; line-height: 1.45; }
.lunar-row span { color: #657389; }
.lunar-row strong { text-align: right; overflow-wrap: anywhere; }
.lunar-status { min-height: 22px; margin: 0 !important; color: #64748b !important; font-size: .82rem !important; line-height: 1.6 !important; }
.lunar-guide { margin-top: 44px; padding-top: 30px; border-top: 1px solid #dde4ed; }
.lunar-guide-heading h2 { margin-bottom: 10px; color: #172033; font-size: 1.45rem; }
.lunar-guide-heading p { max-width: 820px; margin: 0; color: #5c697c; line-height: 1.75; }
.lunar-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin-top: 22px; }
.lunar-guide-grid section { padding: 22px 0; border-bottom: 1px solid #e2e7ee; }
.lunar-guide-grid h3 { margin-bottom: 8px; color: #1f2c40; font-size: 1rem; }
.lunar-guide-grid p { margin: 0; color: #5f6d80; font-size: .88rem; line-height: 1.75; }
.lunar-note { margin-top: 22px !important; padding: 16px 18px; border: 1px solid #dce3ec; border-radius: 8px; background: #f8fafc; color: #5f6d80 !important; font-size: .84rem !important; line-height: 1.7 !important; }
@media screen and (max-width: 980px) {
.lunar-tool, .lunar-guide-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 620px) {
.lunar-tool { padding: 16px; }
.lunar-mode, .lunar-grid, .lunar-actions { grid-template-columns: 1fr; }
.lunar-actions button { width: 100%; }
.lunar-row { display: grid; gap: 4px; }
.lunar-row strong { text-align: left; }
}