.work-income-calculator.work-income-rec-tool,
.work-income-calculator.work-income-rec-tool *,
.work-income-calculator.work-income-rec-tool *::before,
.work-income-calculator.work-income-rec-tool *::after {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

.work-income-calculator.work-income-rec-tool {
  --work-income-shell: #faf2e8;
  --work-income-paper: #fff7e8;
  --work-income-panel: #fffdf7;
  --work-income-input: #fffaf1;
  --work-income-line: #6b5745;
  --work-income-line-soft: rgba(107, 87, 69, 0.24);
  --work-income-ink: #2b2119;
  --work-income-muted: #725f50;
  --work-income-cta: #f2e3d3;
  --work-income-cta-hover: #ead2bd;
  --work-income-green: #e3efd2;
  --work-income-blue: #dfeef8;
  --work-income-amber: #f7df9d;
  --work-income-red: #9c4d3f;
  --work-income-shadow: 5px 5px 0 rgba(107, 87, 69, 0.2);
  --work-income-shadow-sm: 3px 3px 0 rgba(107, 87, 69, 0.16);

  position: relative !important;
  isolation: isolate !important;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 16px auto 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--work-income-ink) !important;
  border: 2px solid var(--work-income-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--work-income-shadow) !important;
  font-family: "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background:
    linear-gradient(90deg, rgba(107, 87, 69, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(107, 87, 69, 0.055) 1px, transparent 1px),
    linear-gradient(135deg, #fffaf0 0%, var(--work-income-shell) 100%) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
}

.work-income-calculator.work-income-rec-tool :where(h2, h3, p, strong, span, label) {
  margin: 0 !important;
}

.work-income-calculator.work-income-rec-tool :where(button, input) {
  border-radius: 0 !important;
}

.work-income-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(--work-income-line) !important;
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.99), rgba(255, 249, 238, 0.98) 64%, rgba(247, 223, 157, 0.3)),
    var(--work-income-paper) !important;
}

.work-income-rec-title-copy {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.work-income-rec-kicker {
  width: fit-content !important;
  padding: 4px 8px !important;
  border: 1.5px solid var(--work-income-line) !important;
  background: #f4dfba !important;
  color: var(--work-income-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

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

.work-income-rec-title p:not(.work-income-rec-kicker) {
  max-width: 650px !important;
  color: var(--work-income-muted) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

.work-income-rec-badge {
  display: inline-grid !important;
  min-height: 34px !important;
  place-items: center !important;
  padding: 6px 10px !important;
  border: 1.5px solid var(--work-income-line) !important;
  background: var(--work-income-green) !important;
  box-shadow: var(--work-income-shadow-sm) !important;
  color: var(--work-income-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.work-income-rec-main {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 12px !important;
}

.work-income-rec-panel,
.work-income-rec-note-strip {
  min-width: 0 !important;
  border: 1.5px solid var(--work-income-line) !important;
  background: rgba(255, 253, 247, 0.92) !important;
  box-shadow: var(--work-income-shadow-sm) !important;
}

.work-income-rec-panel {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 10px !important;
}

.work-income-rec-panel--conditions,
.work-income-rec-panel--results {
  height: 100% !important;
}

.work-income-rec-panel--results {
  align-content: stretch !important;
  grid-template-rows: auto minmax(120px, 0.8fr) minmax(0, 1fr) !important;
}

.work-income-rec-purchase {
  grid-column: 1 / -1 !important;
}

.work-income-rec-panel-head {
  display: grid !important;
  gap: 4px !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid var(--work-income-line) !important;
}

.work-income-rec-panel-head h3 {
  color: var(--work-income-ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  word-break: keep-all !important;
}

.work-income-rec-panel-head p {
  color: var(--work-income-muted) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

.work-income-rec-mode-grid,
.work-income-rec-field-grid,
.work-income-rec-action-row,
.work-income-rec-metric-grid,
.work-income-rec-purchase-grid,
.work-income-rec-quick-grid {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.work-income-rec-mode-grid,
.work-income-rec-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.work-income-rec-field-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.work-income-rec-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: stretch !important;
  grid-auto-rows: minmax(62px, 1fr) !important;
}

.work-income-rec-purchase-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.85fr) !important;
  align-items: stretch !important;
}

.work-income-rec-quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.work-income-rec-choice {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 8px !important;
  border: 1.5px solid var(--work-income-line) !important;
  background: var(--work-income-panel) !important;
  box-shadow: var(--work-income-shadow-sm) !important;
  color: var(--work-income-ink) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  word-break: keep-all !important;
}

.work-income-rec-choice.is-active {
  background: var(--work-income-cta) !important;
}

.work-income-rec-choice input {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.work-income-rec-field {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 9px !important;
  border: 1px solid var(--work-income-line-soft) !important;
  background: rgba(255, 247, 232, 0.58) !important;
}

.work-income-rec-field-label {
  color: var(--work-income-ink) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.work-income-rec-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-width: 0 !important;
  border: 1.5px solid var(--work-income-line) !important;
  background: var(--work-income-input) !important;
}

.work-income-rec-control input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--work-income-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  outline: 0 !important;
}

.work-income-rec-control input::placeholder {
  color: #b7aba0 !important;
  opacity: 1 !important;
}

.work-income-rec-control input:focus {
  box-shadow: inset 0 0 0 2px rgba(210, 170, 85, 0.48) !important;
}

.work-income-rec-unit {
  padding: 0 9px !important;
  border-left: 1px solid var(--work-income-line-soft) !important;
  color: var(--work-income-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.work-income-rec-field-meta {
  color: var(--work-income-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

.work-income-rec-button,
.work-income-rec-quick {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 8px !important;
  border: 1.5px solid var(--work-income-line) !important;
  background: var(--work-income-panel) !important;
  box-shadow: var(--work-income-shadow-sm) !important;
  color: var(--work-income-ink) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease !important;
  word-break: keep-all !important;
}

.work-income-rec-button:hover,
.work-income-rec-quick:hover {
  background: var(--work-income-cta-hover) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 rgba(107, 87, 69, 0.18) !important;
}

.work-income-rec-button:active,
.work-income-rec-quick:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 2px 2px 0 rgba(107, 87, 69, 0.16) !important;
}

.work-income-rec-button--primary {
  background: var(--work-income-cta) !important;
}

.work-income-rec-quick {
  flex-direction: column !important;
  min-height: 46px !important;
  gap: 3px !important;
  padding: 7px 5px !important;
}

.work-income-rec-quick strong {
  color: var(--work-income-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.work-income-rec-quick span {
  color: var(--work-income-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.work-income-rec-hero-result {
  display: grid !important;
  gap: 5px !important;
  place-items: center !important;
  min-height: 118px !important;
  padding: 12px !important;
  border: 2px solid var(--work-income-line) !important;
  background: var(--work-income-green) !important;
  box-shadow: var(--work-income-shadow-sm) !important;
  text-align: center !important;
}

.work-income-rec-hero-result span {
  color: var(--work-income-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.work-income-rec-hero-result strong {
  color: var(--work-income-ink) !important;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  overflow-wrap: anywhere !important;
}

.work-income-rec-hero-result em {
  color: var(--work-income-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  word-break: keep-all !important;
}

.work-income-rec-metric {
  display: grid !important;
  gap: 4px !important;
  min-height: 62px !important;
  place-items: center !important;
  padding: 8px !important;
  border: 1px solid var(--work-income-line-soft) !important;
  background: var(--work-income-panel) !important;
  text-align: center !important;
}

.work-income-rec-metric span {
  color: var(--work-income-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.work-income-rec-metric strong {
  color: var(--work-income-ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
}

.work-income-rec-purchase-form {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  align-content: start !important;
}

.work-income-rec-purchase-result {
  display: grid !important;
  gap: 9px !important;
  min-width: 0 !important;
  align-content: stretch !important;
}

.work-income-rec-purchase-card {
  display: grid !important;
  min-height: 86px !important;
  place-items: center !important;
  padding: 10px !important;
  border: 2px solid var(--work-income-line) !important;
  background: var(--work-income-blue) !important;
  box-shadow: var(--work-income-shadow-sm) !important;
  text-align: center !important;
}

.work-income-rec-purchase-card[hidden] {
  display: none !important;
}

.work-income-rec-purchase-card strong {
  color: var(--work-income-ink) !important;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.work-income-rec-purchase-card span {
  margin-top: 5px !important;
  color: var(--work-income-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.work-income-rec-status,
.work-income-rec-note-strip {
  grid-column: 1 / -1 !important;
}

.work-income-rec-status {
  min-height: 18px !important;
  color: var(--work-income-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

.work-income-rec-status.is-warning {
  color: var(--work-income-red) !important;
}

.work-income-rec-note-strip {
  padding: 10px 11px !important;
  color: var(--work-income-muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

.work-income-rec-note-strip strong {
  color: var(--work-income-ink) !important;
  font-weight: 950 !important;
}

html.theme-dark .work-income-calculator.work-income-rec-tool,
body.theme-dark .work-income-calculator.work-income-rec-tool,
body.dark-mode .work-income-calculator.work-income-rec-tool,
.dark .work-income-calculator.work-income-rec-tool,
.work-income-calculator.work-income-rec-tool.dark {
  --work-income-shell: #241f1a;
  --work-income-paper: #302820;
  --work-income-panel: #2b251f;
  --work-income-input: #1f1b17;
  --work-income-line: #d2b892;
  --work-income-line-soft: rgba(210, 184, 146, 0.28);
  --work-income-ink: #fff7e8;
  --work-income-muted: #e3d0b8;
  --work-income-cta: #6f5439;
  --work-income-cta-hover: #7e6245;
  --work-income-green: #31422e;
  --work-income-blue: #27394a;
  --work-income-amber: #5d4825;
  --work-income-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
  --work-income-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.28);
  background:
    linear-gradient(90deg, rgba(210, 184, 146, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(210, 184, 146, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #1d1814 0%, var(--work-income-shell) 100%) !important;
}

html.theme-dark .work-income-rec-title,
body.theme-dark .work-income-rec-title,
body.dark-mode .work-income-rec-title,
.dark .work-income-rec-title,
.work-income-rec-tool.dark .work-income-rec-title {
  background:
    linear-gradient(90deg, rgba(48, 40, 32, 0.98), rgba(43, 37, 31, 0.98) 64%, rgba(93, 72, 37, 0.45)),
    var(--work-income-paper) !important;
}

html.theme-dark .work-income-rec-kicker,
body.theme-dark .work-income-rec-kicker,
body.dark-mode .work-income-rec-kicker,
.dark .work-income-rec-kicker,
.work-income-rec-tool.dark .work-income-rec-kicker {
  background: #47351f !important;
}

html.theme-dark .work-income-rec-field,
body.theme-dark .work-income-rec-field,
body.dark-mode .work-income-rec-field,
.dark .work-income-rec-field,
.work-income-rec-tool.dark .work-income-rec-field {
  background: rgba(48, 40, 32, 0.62) !important;
}

@media (max-width: 860px) {
  .work-income-rec-main {
    grid-template-columns: 1fr !important;
  }

  .work-income-rec-purchase,
  .work-income-rec-status,
  .work-income-rec-note-strip {
    grid-column: auto !important;
  }

  .work-income-rec-purchase-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  .work-income-calculator.work-income-rec-tool {
    width: min(100% - 12px, 100%) !important;
    margin: 12px auto 20px !important;
  }

  .work-income-rec-title {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  .work-income-rec-title h2 {
    font-size: 20px !important;
  }

  .work-income-rec-title p:not(.work-income-rec-kicker) {
    font-size: 12px !important;
  }

  .work-income-rec-badge {
    width: fit-content !important;
    min-height: 30px !important;
  }

  .work-income-rec-main {
    gap: 9px !important;
    padding: 9px !important;
  }

  .work-income-rec-panel {
    gap: 9px !important;
    padding: 9px !important;
  }

  .work-income-rec-metric-grid,
  .work-income-rec-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .work-income-rec-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .work-income-rec-choice,
  .work-income-rec-button {
    min-height: 38px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
  }

  .work-income-rec-quick {
    min-height: 44px !important;
  }

  .work-income-rec-hero-result {
    min-height: 104px !important;
  }

  .work-income-rec-hero-result strong {
    font-size: 29px !important;
  }

  .work-income-rec-purchase-card strong {
    font-size: 24px !important;
  }
}