.cc-installment-calculator-container,
.cc-installment-calculator-container * {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

.cc-installment-calculator-container.cc-installment-redesign-shell {
  width: min(100%, 980px) !important;
  max-width: min(100%, 980px) !important;
  margin: 22px auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cc-installment-rec-tool {
  --cc-installment-shell: #faf2e8;
  --cc-installment-paper: #fff7e8;
  --cc-installment-panel: #fffdf7;
  --cc-installment-input: #fffaf1;
  --cc-installment-line: #604c3d;
  --cc-installment-soft-line: rgba(96, 76, 61, .25);
  --cc-installment-ink: #2b2119;
  --cc-installment-muted: #725f50;
  --cc-installment-cta: #f2e3d3;
  --cc-installment-green: #e3efd2;
  --cc-installment-amber: #f7df9d;
  --cc-installment-fee: #f4c0a0;
  --cc-installment-shadow: 4px 4px 0 var(--cc-installment-line);
  --cc-installment-shadow-soft: 3px 3px 0 rgba(96, 76, 61, .28);
  width: 100% !important;
  overflow: hidden !important;
  border: 2px solid var(--cc-installment-line) !important;
  border-radius: 0 !important;
  background-color: var(--cc-installment-shell) !important;
  background-image:
    linear-gradient(rgba(96, 76, 61, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 76, 61, .06) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  box-shadow: var(--cc-installment-shadow) !important;
  color: var(--cc-installment-ink) !important;
  font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif !important;
}

.cc-installment-rec-tool h2,
.cc-installment-rec-tool h3,
.cc-installment-rec-tool p {
  margin: 0 !important;
}

.cc-installment-rec-tool button,
.cc-installment-rec-tool input {
  min-width: 0 !important;
  border-radius: 0 !important;
  font: inherit !important;
}

.cc-installment-rec-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 13px 15px !important;
  border-bottom: 2px solid var(--cc-installment-line) !important;
  background:
    linear-gradient(90deg, rgba(255, 253, 247, .99), rgba(255, 249, 238, .98) 64%, rgba(247, 223, 157, .32)),
    var(--cc-installment-paper) !important;
}

.cc-installment-rec-kicker {
  margin: 0 0 7px !important;
  color: var(--cc-installment-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.cc-installment-rec-title h2 {
  color: var(--cc-installment-ink) !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  word-break: keep-all !important;
}

.cc-installment-rec-title p:last-child {
  margin-top: 5px !important;
  color: var(--cc-installment-muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.42 !important;
  word-break: keep-all !important;
}

.cc-installment-rec-badge {
  display: inline-grid !important;
  min-height: 32px !important;
  place-items: center !important;
  padding: 6px 9px !important;
  border: 1px solid var(--cc-installment-line) !important;
  background: var(--cc-installment-panel) !important;
  color: var(--cc-installment-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.cc-installment-rec-body {
  display: grid !important;
  gap: 12px !important;
  padding: 12px !important;
  border-top: 0 solid var(--cc-installment-line) !important;
}

.cc-installment-rec-layout {
  display: grid !important;
  grid-template-columns: 392px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

.cc-installment-rec-panel {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 2px solid var(--cc-installment-line) !important;
  border-radius: 0 !important;
  background: var(--cc-installment-panel) !important;
  box-shadow: var(--cc-installment-shadow-soft) !important;
}

.cc-installment-rec-panel-head {
  display: flex !important;
  gap: 12px !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  border-bottom: 1px solid var(--cc-installment-line) !important;
  background: rgba(255, 247, 232, .78) !important;
}

.cc-installment-rec-panel-head h3 {
  color: var(--cc-installment-ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.cc-installment-rec-panel-head p {
  color: var(--cc-installment-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
  text-align: right !important;
  word-break: keep-all !important;
}

.cc-installment-rec-panel-body {
  padding: 11px !important;
}

.cc-installment-rec-field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 9px !important;
}

.cc-installment-rec-field {
  display: grid !important;
  grid-template-rows: 15px 36px 15px !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--cc-installment-line) !important;
  border-radius: 0 !important;
  background: var(--cc-installment-input) !important;
}

.cc-installment-rec-field--full {
  grid-column: 1 / -1 !important;
}

.cc-installment-rec-label {
  overflow: hidden !important;
  color: var(--cc-installment-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 15px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cc-installment-rec-input-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  min-width: 0 !important;
  height: 36px !important;
  border: 1px solid var(--cc-installment-line) !important;
  background: #fffdf8 !important;
}

.cc-installment-rec-input-row input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-installment-ink) !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
  line-height: 34px !important;
  outline: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.cc-installment-rec-input-row input::placeholder {
  color: rgba(114, 95, 80, .45) !important;
}

.cc-installment-rec-input-row span {
  display: grid !important;
  min-width: 34px !important;
  place-items: center !important;
  padding: 0 8px !important;
  border-left: 1px solid var(--cc-installment-line) !important;
  color: var(--cc-installment-muted) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.cc-installment-rec-field-meta {
  min-height: 15px !important;
  overflow: hidden !important;
  color: var(--cc-installment-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cc-installment-rec-presets,
.cc-installment-rec-action-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.cc-installment-rec-button {
  display: inline-grid !important;
  min-height: 36px !important;
  width: 100% !important;
  place-items: center !important;
  padding: 7px 10px !important;
  border: 1px solid var(--cc-installment-line) !important;
  border-radius: 0 !important;
  background: var(--cc-installment-panel) !important;
  box-shadow: 2px 2px 0 rgba(96, 76, 61, .25) !important;
  color: var(--cc-installment-ink) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.cc-installment-rec-button--primary {
  border-width: 2px !important;
  background: var(--cc-installment-cta) !important;
}

.cc-installment-rec-button:disabled {
  cursor: not-allowed !important;
  opacity: .58 !important;
}

.cc-installment-rec-button:focus-visible,
.cc-installment-rec-tool input:focus {
  outline: 2px solid var(--cc-installment-amber) !important;
  outline-offset: 2px !important;
}

.cc-installment-rec-button:not(:disabled):hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 rgba(96, 76, 61, .32) !important;
}

body .entry-content .cc-installment-rec-tool button.cc-installment-rec-button,
body .entry-content .cc-installment-rec-tool .cc-installment-rec-button,
body .cs-entry__content .cc-installment-rec-tool button.cc-installment-rec-button,
body .cs-entry__content .cc-installment-rec-tool .cc-installment-rec-button,
body .cc-installment-rec-tool button.cc-installment-rec-button,
body .cc-installment-rec-tool .cc-installment-rec-button {
  display: grid !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  place-items: center !important;
  padding: 7px 10px !important;
  border-radius: 0 !important;
  font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950 !important;
  line-height: 13.2px !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body .entry-content .cc-installment-rec-tool button.cc-installment-rec-button--primary,
body .entry-content .cc-installment-rec-tool .cc-installment-rec-button--primary,
body .cs-entry__content .cc-installment-rec-tool button.cc-installment-rec-button--primary,
body .cs-entry__content .cc-installment-rec-tool .cc-installment-rec-button--primary,
body .cc-installment-rec-tool button.cc-installment-rec-button--primary,
body .cc-installment-rec-tool .cc-installment-rec-button--primary {
  border-width: 2px !important;
  background: var(--cc-installment-cta) !important;
  color: var(--cc-installment-ink) !important;
}

.cc-installment-rec-summary {
  display: grid !important;
  gap: 10px !important;
}

.cc-installment-rec-main-result {
  display: grid !important;
  min-width: 0 !important;
  min-height: 132px !important;
  align-content: center !important;
  justify-items: center !important;
  padding: 14px 12px !important;
  border: 2px solid var(--cc-installment-line) !important;
  background: var(--cc-installment-green) !important;
  text-align: center !important;
}

.cc-installment-rec-main-result span,
.cc-installment-rec-main-result em,
.cc-installment-rec-metrics span {
  color: var(--cc-installment-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.cc-installment-rec-main-result strong {
  display: block !important;
  margin: 6px 0 !important;
  color: var(--cc-installment-ink) !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
}

.cc-installment-rec-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.cc-installment-rec-metrics div {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 68px !important;
  align-content: center !important;
  padding: 10px !important;
  border: 1px solid var(--cc-installment-line) !important;
  background: var(--cc-installment-input) !important;
}

.cc-installment-rec-metrics strong {
  overflow: hidden !important;
  color: var(--cc-installment-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cc-installment-rec-note {
  padding: 9px 10px !important;
  border: 1px dashed var(--cc-installment-line) !important;
  background: rgba(255, 247, 232, .58) !important;
  color: var(--cc-installment-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

.cc-installment-rec-chart {
  padding: 11px !important;
}

.cc-installment-rec-bars {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cc-installment-rec-bar-block {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--cc-installment-line) !important;
  background: var(--cc-installment-input) !important;
}

.cc-installment-rec-bar-title {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--cc-installment-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.cc-installment-rec-bar-title strong {
  color: var(--cc-installment-ink) !important;
  white-space: nowrap !important;
}

.cc-installment-rec-bar {
  display: flex !important;
  min-width: 0 !important;
  height: 32px !important;
  overflow: hidden !important;
  border: 1px solid var(--cc-installment-line) !important;
  background: #fffdf8 !important;
}

.cc-installment-rec-bar-fill {
  display: grid !important;
  min-width: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  color: var(--cc-installment-ink) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.cc-installment-rec-bar-fill--principal {
  background: var(--cc-installment-green) !important;
}

.cc-installment-rec-bar-fill--fee {
  background: var(--cc-installment-fee) !important;
}

.cc-installment-rec-bar-fill--free {
  background: var(--cc-installment-amber) !important;
}

.cc-installment-rec-bar-fill--paid {
  background: var(--cc-installment-cta) !important;
}

.cc-installment-rec-schedule {
  padding: 0 !important;
}

.cc-installment-rec-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.cc-installment-rec-table {
  width: 100% !important;
  min-width: 690px !important;
  border-collapse: collapse !important;
  color: var(--cc-installment-ink) !important;
  font-variant-numeric: tabular-nums !important;
}

.cc-installment-rec-table th,
.cc-installment-rec-table td {
  padding: 9px 10px !important;
  border-bottom: 1px solid var(--cc-installment-soft-line) !important;
  color: var(--cc-installment-ink) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.cc-installment-rec-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  background: var(--cc-installment-paper) !important;
  font-weight: 950 !important;
}

.cc-installment-rec-table td:first-child,
.cc-installment-rec-table th:first-child {
  text-align: center !important;
}

.cc-installment-rec-table tr:nth-child(even) td {
  background: rgba(255, 247, 232, .48) !important;
}

.cc-installment-rec-table tr:last-child td {
  border-bottom: 0 !important;
  font-weight: 950 !important;
}

.cc-installment-rec-empty {
  display: grid !important;
  min-height: 132px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 7px !important;
  padding: 14px 12px !important;
  border: 2px dashed var(--cc-installment-line) !important;
  background: rgba(255, 250, 241, .72) !important;
  color: var(--cc-installment-muted) !important;
  text-align: center !important;
}

.cc-installment-rec-empty strong {
  color: var(--cc-installment-ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  word-break: keep-all !important;
}

.cc-installment-rec-empty span {
  color: var(--cc-installment-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

.cc-installment-rec-empty--small {
  min-height: 76px !important;
  border-width: 1px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .cc-installment-rec-tool {
  --cc-installment-shell: #2a2119;
  --cc-installment-paper: #34281f;
  --cc-installment-panel: #211913;
  --cc-installment-input: #2f251c;
  --cc-installment-line: #d8bd9b;
  --cc-installment-soft-line: rgba(216, 189, 155, .32);
  --cc-installment-ink: #fff3df;
  --cc-installment-muted: #e0c8a9;
  --cc-installment-cta: #6a4b2d;
  --cc-installment-green: #3f5236;
  --cc-installment-amber: #665127;
  --cc-installment-fee: #7b4a37;
  --cc-installment-shadow: 4px 4px 0 rgba(216, 189, 155, .72);
  --cc-installment-shadow-soft: 3px 3px 0 rgba(216, 189, 155, .24);
  background-image:
    linear-gradient(rgba(216, 189, 155, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 189, 155, .08) 1px, transparent 1px) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .cc-installment-rec-input-row,
body:is([data-scheme="dark"], [data-scheme="inverse"]) .cc-installment-rec-bar {
  background: #261d16 !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .cc-installment-rec-input-row input::placeholder {
  color: rgba(224, 200, 169, .58) !important;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .cc-installment-rec-tool {
    --cc-installment-shell: #2a2119;
    --cc-installment-paper: #34281f;
    --cc-installment-panel: #211913;
    --cc-installment-input: #2f251c;
    --cc-installment-line: #d8bd9b;
    --cc-installment-soft-line: rgba(216, 189, 155, .32);
    --cc-installment-ink: #fff3df;
    --cc-installment-muted: #e0c8a9;
    --cc-installment-cta: #6a4b2d;
    --cc-installment-green: #3f5236;
    --cc-installment-amber: #665127;
    --cc-installment-fee: #7b4a37;
    --cc-installment-shadow: 4px 4px 0 rgba(216, 189, 155, .72);
    --cc-installment-shadow-soft: 3px 3px 0 rgba(216, 189, 155, .24);
    background-image:
      linear-gradient(rgba(216, 189, 155, .08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(216, 189, 155, .08) 1px, transparent 1px) !important;
  }

  body[data-scheme="auto"] .cc-installment-rec-input-row,
  body[data-scheme="auto"] .cc-installment-rec-bar {
    background: #261d16 !important;
  }

  body[data-scheme="auto"] .cc-installment-rec-input-row input::placeholder {
    color: rgba(224, 200, 169, .58) !important;
  }
}

@media (max-width: 860px) {
  .cc-installment-calculator-container.cc-installment-redesign-shell {
    width: min(100% - 20px, 980px) !important;
    margin: 18px auto !important;
  }

  .cc-installment-rec-layout,
  .cc-installment-rec-bars {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  .cc-installment-calculator-container.cc-installment-redesign-shell {
    width: min(100% - 12px, 980px) !important;
    margin: 14px auto !important;
  }

  .cc-installment-rec-tool {
    box-shadow: 3px 3px 0 var(--cc-installment-line) !important;
  }

  .cc-installment-rec-title {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  .cc-installment-rec-badge {
    justify-self: start !important;
  }

  .cc-installment-rec-title h2 {
    font-size: 21px !important;
  }

  .cc-installment-rec-body {
    gap: 10px !important;
    padding: 10px !important;
  }

  .cc-installment-rec-panel-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .cc-installment-rec-panel-head p {
    text-align: left !important;
  }

  .cc-installment-rec-field-grid,
  .cc-installment-rec-metrics {
    grid-template-columns: 1fr !important;
  }

  .cc-installment-rec-main-result {
    min-height: 116px !important;
  }

  .cc-installment-rec-main-result strong {
    font-size: 24px !important;
  }
}

@media (max-width: 380px) {
  .cc-installment-rec-presets,
  .cc-installment-rec-action-row {
    gap: 6px !important;
  }

  .cc-installment-rec-button {
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 11px !important;
  }
}

body .entry-content .cc-installment-rec-tool button.cc-installment-rec-button,
body .entry-content .cc-installment-rec-tool .cc-installment-rec-button,
body .cs-entry__content .cc-installment-rec-tool button.cc-installment-rec-button,
body .cs-entry__content .cc-installment-rec-tool .cc-installment-rec-button,
body .cc-installment-rec-tool button.cc-installment-rec-button,
body .cc-installment-rec-tool .cc-installment-rec-button {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  place-items: center !important;
  padding: 7px 10px !important;
  border: 1px solid var(--cc-installment-line) !important;
  border-radius: 0 !important;
  font-family: "Noto Sans KR", "Malgun Gothic", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950 !important;
  line-height: 13.2px !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body .entry-content .cc-installment-rec-tool button.cc-installment-rec-button--primary,
body .entry-content .cc-installment-rec-tool .cc-installment-rec-button--primary,
body .cs-entry__content .cc-installment-rec-tool button.cc-installment-rec-button--primary,
body .cs-entry__content .cc-installment-rec-tool .cc-installment-rec-button--primary,
body .cc-installment-rec-tool button.cc-installment-rec-button--primary,
body .cc-installment-rec-tool .cc-installment-rec-button--primary {
  border-width: 2px !important;
  background: var(--cc-installment-cta) !important;
  color: var(--cc-installment-ink) !important;
}

@media (max-width: 380px) {
  body .entry-content .cc-installment-rec-tool button.cc-installment-rec-button,
  body .entry-content .cc-installment-rec-tool .cc-installment-rec-button,
  body .cs-entry__content .cc-installment-rec-tool button.cc-installment-rec-button,
  body .cs-entry__content .cc-installment-rec-tool .cc-installment-rec-button,
  body .cc-installment-rec-tool button.cc-installment-rec-button,
  body .cc-installment-rec-tool .cc-installment-rec-button {
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 12px !important;
  }
}
