/* 클체 계산기 */
.cc-tools { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.cc-source { font-size: 12.5px; color: var(--faint); }
.cc-source a { color: inherit; }
.cc-tool-btns { display: inline-flex; gap: 6px; margin-left: auto; }
.cc-tool-btns svg { width: 15px; height: 15px; }

.cc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.cc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cc-group { overflow: hidden; }
.cc-group .card-head small { font-weight: 500; color: var(--faint); font-size: 12px; }
.cc-note { margin: -4px 16px 8px; font-size: 12.5px; color: var(--faint); }
.cc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-table th { padding: 6px 16px; font-size: 12px; font-weight: 600; color: var(--faint); text-align: left; border-bottom: 1px solid var(--border); }
.cc-table td { padding: 5px 16px; border-bottom: 1px solid var(--border); }
.cc-table tr:last-child td { border-bottom: 0; }
.cc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-table input { width: 76px; min-height: 32px; padding: 3px 8px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.cc-table tr.has td { background: var(--accent-soft); }
.cc-table tfoot td { font-weight: 700; background: var(--surface-2); }
.cc-grade { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.cc-grade::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--faint)); }
.g-adv { --dot: #3ba55d; } .g-rare { --dot: #3b82f6; } .g-hero { --dot: #a855f7; } .g-legend { --dot: #e6a23c; }
.g-myth { --dot: #e2463b; } .g-ancient { --dot: #14b8a6; } .g-unique { --dot: #b07a4a; }
.cc-free { color: var(--green); font-weight: 650; }

.cc-result { position: sticky; top: 76px; padding-bottom: 14px; }
.cc-total { margin: 4px 16px 10px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-total span { font-size: 13.5px; font-weight: 600; color: var(--accent-strong); }
.cc-total b { font-size: 28px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.cc-lines { margin: 0 16px; padding: 4px 0 8px; border-bottom: 1px solid var(--border); }
.cc-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.cc-lines dt { font-size: 13.5px; color: var(--muted); display: flex; flex-direction: column; }
.cc-lines dt small { font-size: 11.5px; color: var(--faint); }
.cc-lines dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cc-lines dd input { width: 92px; min-height: 30px; padding: 3px 8px; text-align: right; font-weight: 650; }
.cc-sum dt { color: var(--text); font-weight: 650; }
.cc-sum dd { font-size: 16px; color: var(--accent-strong); }
.cc-plan { margin: 10px 16px 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-sm); }
.cc-plan h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.cc-plan h3 svg { width: 16px; height: 16px; color: var(--accent); }
.cc-plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 13.5px; }
.cc-plan-row:first-child { border-top: 0; }
.cc-plan-row small { display: block; color: var(--faint); font-size: 11.5px; }
.cc-plan-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-plan-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cc-plan-total > span { min-width: 0; line-height: 1.35; }
.cc-plan-total small { display: block; color: var(--faint); font-size: 11.5px; }
.cc-plan-total b { flex-shrink: 0; white-space: nowrap; font-size: 20px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.cc-plan-empty { font-size: 13px; color: var(--faint); }
.cc-prices { margin: 10px 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cc-prices summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--muted); padding: 4px 0; }
.cc-prices summary small { font-weight: 500; color: var(--faint); margin-left: 4px; }
.cc-prices summary small b { color: var(--text); }
.cc-prices .cc-lines { margin: 0; border-bottom: 0; }
.cc-price-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 6px 0 2px; font-size: 13px; }
.cc-price-grid span small { color: var(--faint); margin-left: 4px; }
.cc-price-grid input { width: 110px; min-height: 30px; padding: 3px 8px; text-align: right; font-weight: 650; }
.cc-bars { margin: 12px 16px 0; display: flex; flex-direction: column; gap: 7px; }
.cc-bar { font-size: 12.5px; }
.cc-bar div { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 3px; }
.cc-bar div b { color: var(--text); font-variant-numeric: tabular-nums; }
.cc-bar i { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cc-bar i span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.cc-rules { margin-top: 16px; }
.cc-rules ul { margin: 0; padding: 4px 16px 4px 34px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.cc-rules p { margin: 10px 16px 14px; font-size: 12.5px; }

@media (max-width: 1280px) { .cc-groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .cc-layout { grid-template-columns: minmax(0, 1fr); }
  .cc-result { position: static; order: -1; }
  .cc-tool-btns { margin-left: 0; }
  .cc-table input, .cc-lines dd input { font-size: 16px; }
}