/* 계산기 페이지 (common.css 위에 얹는다) */
.calc-page { max-width: 820px; margin: 16px auto 0; padding: 0 16px 24px; color: var(--ui-text); }
.calc-page .crumbs { margin-bottom: 14px; }
.calc-page h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; }
.calc-lead { margin-top: 8px; color: var(--ui-sub); font-size: 15.5px; line-height: 1.7; }
.calc-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 22px; overflow: hidden;
  border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
}
.calc-form { display: grid; gap: 14px; align-content: start; padding: 22px; }
.calc-out { display: grid; gap: 2px; align-content: start; padding: 22px; background: color-mix(in srgb, var(--ui-primary) 5%, var(--ui-bg)); border-left: 1px solid var(--ui-border); }
.cf { display: grid; gap: 6px; }
.cf > span { font-size: 13px; font-weight: 600; color: var(--ui-sub); }
.cf small { font-size: 12px; color: var(--ui-muted); }
.cf-in { display: flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 11px; background: var(--ui-bg); }
.cf-in:focus-within { border-color: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent); }
.cf-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ui-text); font: inherit; font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-in em { flex: none; margin-left: 8px; color: var(--ui-muted); font-style: normal; font-size: 14px; }
.cf-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-seg label { cursor: pointer; }
.cf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cf-seg span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-bg); font-size: 14px; font-weight: 600; }
.cf-seg input:checked + span { border-color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 12%, var(--ui-surface)); color: var(--ui-primary); }
.cf-seg input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 25%, transparent); }
.co { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ui-border); font-size: 14px; }
.co span { color: var(--ui-sub); }
.co b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.co-big { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 0; }
.co-big b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ui-primary); }
.calc-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--ui-surface); border: 1px solid var(--ui-border); color: var(--ui-sub); font-size: 13px; line-height: 1.6; }
.calc-page .g-grid { margin-top: 28px; }
.calc-page .g-card { font-size: 14.5px; line-height: 1.75; }
.calc-page .g-h3 { margin: 40px 0 14px; }
.calc-disclaimer { margin-top: 26px; font-size: 12.5px; color: var(--ui-muted); line-height: 1.7; }
/* 첫 화면 계산기 목록 */
.calc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.calc-link {
  display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 14px;
  background: var(--ui-surface); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s;
}
.calc-link:hover { border-color: var(--ui-primary); transform: translateY(-2px); }
.calc-link i { font-style: normal; font-size: 24px; }
.calc-link b { display: block; font-size: 15px; }
.calc-link small { display: block; margin-top: 1px; color: var(--ui-muted); font-size: 12px; }
@media (max-width: 720px) {
  .calc-box { grid-template-columns: 1fr; }
  .calc-out { border-left: 0; border-top: 1px solid var(--ui-border); }
  .co-big b { font-size: 26px; }
}