/* ==========================================================
   pages/calculator.css — 맞춤 계산 전용
   ========================================================== */

.cl-layout { display: grid; gap: 16px; }
.cl-panel, .cl-result { min-width: 0; }
.cl-presets { margin-bottom: 8px; }
.cl-presets .chip .ico { width: 15px; height: 15px; }

.cl-sliders { display: grid; gap: 4px; }
.cl-slider {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 2px 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--line-2);
}
.cl-slider:last-child { border-bottom: 0; }
.cl-slider label { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.cl-slider label span { display: grid; min-width: 0; line-height: 1.35; }
.cl-slider label b { font-size: 15px; font-weight: 800; }
.cl-slider label small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-slider output { justify-self: end; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cl-slider .range { grid-column: 1 / -1; }

.cl-mix { margin-top: 16px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
.cl-mix-t { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cl-mix-t span { color: var(--warn-deep); }
.cl-mix .wstack { background: #E6E9EF; }
.cl-copy { margin-top: 12px; }

/* 결과 */
#clMine .pick { height: 36px; font-size: 14px; }
.cl-mine-main { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
.cl-idx { display: grid; }
.cl-idx small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.cl-idx-side { display: grid; justify-items: start; gap: 4px; padding-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cl-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 16px; }
.cl-compare > div { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.cl-compare > div.is-now { background: var(--navy-soft); }
.cl-compare small { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.cl-compare b { font-size: 20px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cl-compare em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.cl-arrow { color: var(--ink-4); }
.cl-verdict { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.cl-verdict b { font-weight: 800; color: var(--ink); }
.cl-rank { padding: 16px 10px; }
.cl-rank .card-head { padding: 0 8px; }

@media (min-width: 1000px) {
  .cl-layout { grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
}