/* 위약금 계산기(BOB-1423): guide.css 위에 얹는 폼·결과 */
:root { --edge: #857e8b; } /* 앱 styles.css 의 입력 테두리 토큰 */
.form { display: flex; flex-direction: column; gap: 14px; }
.f { display: flex; flex-direction: column; gap: 6px; }
.f label { font: 600 13px/18px var(--f); color: var(--ink-2); }
/* 입력칸: 앱 ui.css 의 52px 칸과 같다(band 바탕·--edge 테두리, 포커스는 lilac-ink 1px 더 굵게) */
.f input, .f textarea { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--band); color: var(--ink); font: 400 16px/24px var(--f); }
.f textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--sub); opacity: 1; }
.f input:focus, .f textarea:focus { outline: none; background: var(--surface); border-color: var(--lilac-ink); box-shadow: 0 0 0 1px var(--lilac-ink); }
.f .hint { font: 400 13px/18px var(--f); color: var(--sub); }
.two { display: grid; grid-template-columns: 1fr; gap: 14px; }
.res { padding: 14px 16px; border-radius: 16px; background: var(--band); display: flex; flex-direction: column; gap: 8px; }
.res:empty { display: none; }
.kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.kv span { color: var(--ink-2); }
.kv b { text-align: right; font-variant-numeric: tabular-nums; }
.kv.strong { padding-top: 8px; border-top: 1px solid var(--line); }
.kv.strong b { font-size: 22px; line-height: 30px; color: var(--rose); }
#note { color: var(--sub); }
tr.on td { background: #fbeef2; font-weight: 700; }
.sbs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sbs > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sbs h3 { margin: 0 0 6px; font: 600 13px/18px var(--f); color: var(--sub); }
.sbs p { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } .sbs { grid-template-columns: 1fr 1fr; } }