/* health-supplement-cost-calculator i18n full-release CSS 2026-06-23. Loaded only on locale target pages. */
/* ROBERIN health supplement cost calculator fresh compact tool redesign - 2026-06-23 */
body {
  --hsc-cost-page: #faf2e8;
  --hsc-cost-paper: #fff7e8;
  --hsc-cost-paper-strong: #fffdf7;
  --hsc-cost-paper-soft: #faecd4;
  --hsc-cost-ink: #2b2119;
  --hsc-cost-muted: #5f5042;
  --hsc-cost-line: #6b5745;
  --hsc-cost-line-soft: rgba(107, 87, 69, .34);
  --hsc-cost-green: #e3efd2;
  --hsc-cost-green-ink: #2f4e2e;
  --hsc-cost-blue: #dfeef8;
  --hsc-cost-amber: #f2e3d3;
  --hsc-cost-danger: #823a2d;
  --hsc-cost-shadow: 4px 4px 0 rgba(72, 55, 40, .20);
  --hsc-cost-soft-shadow: 2px 2px 0 rgba(72, 55, 40, .13);
  background:
    linear-gradient(90deg, rgba(107,87,69,.025) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(107,87,69,.022) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--hsc-cost-page);
}

body .cs-site-content > .cs-container,
body .cs-main-content,
body .cs-content-area,
body .cs-entry__container,
body .cs-entry__content-wrap {
  width: 100%;
  max-width: none;
}

body .cs-breadcrumbs,
body .cs-entry__header,
body .health-supplement-cost-wrapper {
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body .cs-entry__header {
  margin-top: 18px;
  margin-bottom: 14px;
  text-align: left;
}

body .cs-entry__title {
  color: var(--hsc-cost-ink);
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.055em;
  word-break: keep-all;
}

.health-supplement-cost-wrapper,
.health-supplement-cost-wrapper *,
.health-supplement-cost-wrapper *::before,
.health-supplement-cost-wrapper *::after {
  box-sizing: border-box;
  min-width: 0;
}

#health-supplement-cost-calculator.hsc-cost-tool {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  margin-bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--hsc-cost-ink);
  line-height: 1.48;
}

.hsc-cost-shell {
  overflow: hidden;
  color: var(--hsc-cost-ink);
  background:
    linear-gradient(rgba(107,87,69,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,87,69,.038) 1px, transparent 1px),
    var(--hsc-cost-paper);
  background-size: 20px 20px, 20px 20px, auto;
  border: 2px solid var(--hsc-cost-line);
  border-radius: 0;
  box-shadow: var(--hsc-cost-shadow);
}

.hsc-cost-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255,253,247,.96), rgba(250,236,212,.92)),
    var(--hsc-cost-paper-strong);
}

.hsc-cost-title-copy {
  display: grid;
  gap: 7px;
}

.hsc-cost-kicker {
  width: fit-content;
  margin: 0;
  padding: 4px 8px;
  color: var(--hsc-cost-ink);
  background: rgba(227,239,210,.82);
  border: 1px solid var(--hsc-cost-line-soft);
  border-radius: 0;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -.02em;
}

.hsc-cost-title h2,
.hsc-cost-panel h3,
.hsc-cost-modal h3 {
  margin: 0;
  color: var(--hsc-cost-ink);
  font-weight: 950;
  letter-spacing: -.04em;
  word-break: keep-all;
}

.hsc-cost-title h2 {
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.12;
}

.hsc-cost-title p:not(.hsc-cost-kicker),
.hsc-cost-panel-head p {
  margin: 0;
  color: var(--hsc-cost-muted);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 760;
  word-break: keep-all;
}
.hsc-cost-flow {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: stretch;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  color: var(--hsc-cost-ink);
  background: rgba(255,253,247,.94);
  border: 2px solid var(--hsc-cost-line);
  box-shadow: var(--hsc-cost-soft-shadow);
}

.hsc-cost-flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 10px;
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  background: rgba(250,236,212,.78);
  border: 1px solid var(--hsc-cost-line-soft);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.025em;
  text-align: center;
  word-break: keep-all;
}

.hsc-cost-flow-step:nth-child(2) {
  background: rgba(227,239,210,.82);
}

.hsc-cost-flow-step:nth-child(3) {
  background: rgba(223,238,248,.86);
}

.hsc-cost-flow-step:nth-child(4) {
  background: rgba(242,227,211,.92);
}

.hsc-cost-flow-step strong {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: var(--hsc-cost-green-ink);
  -webkit-text-fill-color: var(--hsc-cost-green-ink);
  background: var(--hsc-cost-paper-strong);
  border: 1px solid var(--hsc-cost-line);
  font-size: 15px;
  line-height: 1;
  font-weight: 950;
}


.hsc-cost-title-meter {
  display: grid;
  place-items: center;
  min-width: 96px;
  min-height: 58px;
  padding: 8px 10px;
  color: var(--hsc-cost-green-ink);
  background: var(--hsc-cost-green);
  border: 1px solid var(--hsc-cost-line);
  border-radius: 0;
  box-shadow: var(--hsc-cost-soft-shadow);
  text-align: center;
}

.hsc-cost-title-meter strong {
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.hsc-cost-title-meter span {
  color: var(--hsc-cost-green-ink);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
}

.hsc-cost-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "flow flow"
    "input result"
    "compare compare";
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border-top: 2px solid var(--hsc-cost-line);
}

.hsc-cost-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  color: var(--hsc-cost-ink);
  background: rgba(255,253,247,.94);
  border: 2px solid var(--hsc-cost-line);
  border-radius: 0;
  box-shadow: var(--hsc-cost-soft-shadow);
}
.hsc-cost-flow { grid-area: flow; }

.hsc-cost-panel--input { grid-area: input; }
.hsc-cost-panel--result {
  grid-area: result;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.hsc-cost-panel--result .hsc-cost-panel-head {
  padding-bottom: 6px;
}
.hsc-cost-panel--result .hsc-cost-panel-head p {
  display: none;
}
.hsc-cost-panel--result .hsc-cost-result-content {
  align-self: stretch;
}
.hsc-cost-panel--result #add-btn {
  align-self: stretch;
}
.hsc-cost-panel--compare { grid-area: compare; }
.hsc-cost-panel--compare.has-items {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr);
  grid-template-areas:
    "compare-head compare-head"
    "compare-summary compare-summary"
    "compare-list compare-chart";
  align-items: start;
}
.hsc-cost-panel--compare.has-items > .hsc-cost-panel-head { grid-area: compare-head; }
.hsc-cost-panel--compare.has-items .hsc-cost-total-summary { grid-area: compare-summary; }
.hsc-cost-panel--compare.has-items .hsc-cost-compare-list { grid-area: compare-list; }
.hsc-cost-panel--compare.has-items .hsc-cost-compare-chart { grid-area: compare-chart; }

.hsc-cost-panel-head {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hsc-cost-line-soft);
}

.hsc-cost-panel-head h3 {
  font-size: 17px;
  line-height: 1.2;
}

.hsc-cost-panel-head--row {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: 10px;
  align-items: end;
}

.hsc-cost-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.hsc-cost-field--full { grid-column: 1 / -1; }

.hsc-cost-label {
  color: var(--hsc-cost-ink);
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 950;
}

.hsc-cost-control-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hsc-cost-input-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 42px;
  gap: 0;
}

.health-supplement-cost-wrapper :is(input, select, button) {
  font: inherit;
}

.health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select, .hsc-cost-unit-chip, .hsc-cost-unit-display) {
  width: 100%;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 0 !important;
  line-height: 1.1 !important;
}

.health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select) {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-paper-strong) !important;
  border: 2px solid var(--hsc-cost-line) !important;
  box-shadow: inset 0 1px 0 rgba(107,87,69,.07) !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.health-supplement-cost-wrapper .hsc-cost-input::placeholder {
  color: #b7aba0 !important;
  -webkit-text-fill-color: #b7aba0 !important;
  opacity: 1 !important;
  font-weight: 650 !important;
  font-variation-settings: "wght" 650;
}

.health-supplement-cost-wrapper .hsc-cost-input:focus,
.health-supplement-cost-wrapper .hsc-cost-unit-select:focus {
  border-color: #d2aa55 !important;
  box-shadow: inset 0 0 0 1px #d2aa55 !important;
}

.hsc-cost-input-row .hsc-cost-input:first-child {
  border-right: 0 !important;
}

.hsc-cost-unit-select,
.hsc-cost-unit-chip,
.hsc-cost-unit-display {
  flex: 0 0 82px;
  width: 82px !important;
}

.hsc-cost-unit-chip,
.hsc-cost-unit-display {
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  background: var(--hsc-cost-paper-soft);
  border: 2px solid var(--hsc-cost-line);
  font-size: 13px;
  font-weight: 920;
  white-space: nowrap;
}

.hsc-cost-primary-actions,
.hsc-cost-compare-actions,
.hsc-cost-modal-footer,
.hsc-cost-saved-actions {
  display: grid;
  gap: 8px;
}

.hsc-cost-primary-actions {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.hsc-cost-compare-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hsc-cost-modal-footer,
.hsc-cost-saved-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.health-supplement-cost-wrapper .hsc-cost-button,
.health-supplement-cost-wrapper .hsc-cost-modal-button,
.health-supplement-cost-wrapper .hsc-cost-saved-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  border: 2px solid var(--hsc-cost-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--hsc-cost-soft-shadow);
  font-size: 13.5px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  font-variation-settings: "wght" 950;
  letter-spacing: -.015em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
}

.health-supplement-cost-wrapper .hsc-cost-button:disabled {
  cursor: not-allowed;
  opacity: .54;
}

.hsc-cost-button:hover:not(:disabled),
.hsc-cost-saved-button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(72,55,40,.16);
}

.hsc-cost-button--primary,
.hsc-cost-modal-button--confirm {
  color: #2b2119 !important;
  -webkit-text-fill-color: #2b2119 !important;
  background: var(--hsc-cost-amber) !important;
}

.hsc-cost-button--soft,
.hsc-cost-saved-button--load {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-paper-strong) !important;
}

.hsc-cost-button--reset,
.hsc-cost-saved-button--delete,
.hsc-cost-modal-button--cancel {
  color: #743528 !important;
  -webkit-text-fill-color: #743528 !important;
  background: #f3dfd3 !important;
}

.hsc-cost-button--add {
  color: var(--hsc-cost-green-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-green-ink) !important;
  background: var(--hsc-cost-green) !important;
}

.health-supplement-cost-wrapper :is(button, input, select):focus-visible,
.hsc-cost-compare-remove:focus-visible,
.hsc-cost-modal-close:focus-visible {
  outline: 3px solid #d6a62b !important;
  outline-offset: 2px !important;
}

.hsc-cost-result-content {
  display: grid;
  gap: 8px;
}

.hsc-cost-placeholder,
.hsc-cost-empty {
  display: grid;
  place-items: center;
  min-height: 74px;
  padding: 12px;
  color: var(--hsc-cost-muted);
  -webkit-text-fill-color: var(--hsc-cost-muted);
  background: rgba(250,236,212,.64);
  border: 1px dashed var(--hsc-cost-line-soft);
  text-align: center;
  font-size: 13.5px;
  font-weight: 750;
}

.hsc-cost-placeholder p { margin: 0; }

.hsc-cost-result-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: var(--hsc-cost-ink);
  background: rgba(250,236,212,.62);
  border: 1px solid var(--hsc-cost-line-soft);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
}

.hsc-cost-result-hero {
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 10px 12px;
  color: var(--hsc-cost-green-ink);
  background: var(--hsc-cost-green);
  border: 2px solid var(--hsc-cost-line);
  box-shadow: var(--hsc-cost-soft-shadow);
  text-align: center;
}

.hsc-cost-result-hero span,
.hsc-cost-result-hero small,
.hsc-cost-metric span,
.summary-label,
.hsc-cost-compare-detail,
.hsc-cost-chart-label,
.hsc-cost-saved-meta {
  color: var(--hsc-cost-muted);
  -webkit-text-fill-color: var(--hsc-cost-muted);
}

.hsc-cost-result-hero span {
  font-size: 12px;
  font-weight: 950;
}

.hsc-cost-result-hero strong {
  color: var(--hsc-cost-green-ink);
  -webkit-text-fill-color: var(--hsc-cost-green-ink);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.hsc-cost-result-hero small {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 850;
}

.hsc-cost-result-metrics,
.hsc-cost-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hsc-cost-metric,
.hsc-cost-summary-card {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  color: var(--hsc-cost-ink);
  background: var(--hsc-cost-paper-strong);
  border: 1px solid var(--hsc-cost-line-soft);
  min-height: 52px;
}

.hsc-cost-metric span {
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 900;
}

.summary-label {
  font-size: 13px;
  line-height: 1.12;
  font-weight: 950;
}

.hsc-cost-metric strong {
  overflow-wrap: anywhere;
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.summary-value {
  overflow-wrap: anywhere;
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  font-size: clamp(19px, 2.15vw, 25px);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.hsc-cost-summary-card.is-highlight,
.hsc-cost-summary-card.is-best {
  background: var(--hsc-cost-blue);
}
.hsc-cost-panel--result .hsc-cost-summary-grid {
  height: 100%;
}

.hsc-cost-panel--result .hsc-cost-summary-card {
  align-content: center;
}

.hsc-cost-total-summary {
  display: grid;
  gap: 8px;
}
.hsc-cost-panel--compare .hsc-cost-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hsc-cost-panel--compare .hsc-cost-summary-card {
  align-content: center;
  min-height: 58px;
}

.hsc-cost-compare-list,
.hsc-cost-chart-bars,
.hsc-cost-saved-list {
  display: grid;
  gap: 8px;
}

.hsc-cost-compare-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.hsc-cost-compare-list > .hsc-cost-empty {
  grid-column: 1 / -1;
}

.hsc-cost-compare-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  grid-template-areas:
    "rank info remove"
    "costs costs costs";
  gap: 8px;
  align-content: start;
  min-height: 92px;
  padding: 8px;
  background: var(--hsc-cost-paper-strong);
  border: 1px solid var(--hsc-cost-line-soft);
}

.hsc-cost-compare-item.is-best {
  background: rgba(227,239,210,.78);
  border-color: var(--hsc-cost-line);
}

.hsc-cost-compare-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--hsc-cost-ink);
  background: var(--hsc-cost-paper-soft);
  border: 1px solid var(--hsc-cost-line);
  font-size: 12px;
  font-weight: 950;
}
.hsc-cost-compare-rank { grid-area: rank; }

.hsc-cost-compare-info,
.hsc-cost-compare-costs,
.hsc-cost-saved-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hsc-cost-compare-info { grid-area: info; }

.hsc-cost-compare-name,
.hsc-cost-saved-name {
  overflow: hidden;
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsc-cost-compare-detail,
.hsc-cost-compare-costs span,
.hsc-cost-saved-meta {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.hsc-cost-compare-costs {
  grid-area: costs;
  text-align: left;
  padding-top: 5px;
  border-top: 1px dashed var(--hsc-cost-line-soft);
}

.hsc-cost-compare-costs strong {
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 950;
}

.hsc-cost-compare-remove,
.hsc-cost-modal-close {
  appearance: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #743528;
  -webkit-text-fill-color: #743528;
  background: #f3dfd3;
  border: 1px solid var(--hsc-cost-line);
  border-radius: 0;
  font-size: 19px;
  line-height: 1;
  font-weight: 950;
  cursor: pointer;
}
.hsc-cost-compare-remove {
  grid-area: remove;
  justify-self: end;
}

.hsc-cost-compare-chart {
  display: grid;
  gap: 7px;
  padding: 8px;
  background: rgba(250,236,212,.58);
  border: 1px solid var(--hsc-cost-line-soft);
}

.hsc-cost-chart-title {
  color: var(--hsc-cost-ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
}

.hsc-cost-chart-row {
  display: grid;
  grid-template-columns: minmax(72px, 116px) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.hsc-cost-chart-label {
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsc-cost-chart-track {
  overflow: hidden;
  min-height: 26px;
  background: var(--hsc-cost-paper-strong);
  border: 1px solid var(--hsc-cost-line-soft);
}

.hsc-cost-chart-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 52px;
  min-height: 24px;
  padding: 0 7px;
  color: var(--hsc-cost-ink);
  background: var(--hsc-cost-blue);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}

.hsc-cost-chart-fill.is-best {
  background: var(--hsc-cost-green);
}

.hsc-cost-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(330px, calc(100vw - 32px));
  padding: 10px 12px;
  color: var(--hsc-cost-ink);
  background: var(--hsc-cost-paper-strong);
  border: 2px solid var(--hsc-cost-line);
  box-shadow: var(--hsc-cost-shadow);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

.hsc-cost-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.hsc-cost-toast-mark {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--hsc-cost-green-ink);
  background: var(--hsc-cost-green);
  border: 1px solid var(--hsc-cost-line);
  font-weight: 950;
}

.hsc-cost-toast-content {
  display: grid;
  gap: 2px;
}

.hsc-cost-toast-title {
  color: var(--hsc-cost-ink);
  -webkit-text-fill-color: var(--hsc-cost-ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
}

.hsc-cost-toast-value {
  color: var(--hsc-cost-muted);
  -webkit-text-fill-color: var(--hsc-cost-muted);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 760;
}

.hsc-cost-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(32, 24, 17, .52);
}

.hsc-cost-modal {
  display: grid;
  gap: 0;
  width: min(460px, 100%);
  max-height: min(80vh, 620px);
  overflow: hidden;
  color: var(--hsc-cost-ink);
  background: var(--hsc-cost-paper);
  border: 2px solid var(--hsc-cost-line);
  box-shadow: var(--hsc-cost-shadow);
}

.hsc-cost-modal-header,
.hsc-cost-modal-body,
.hsc-cost-modal-footer {
  padding: 12px;
}

.hsc-cost-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed var(--hsc-cost-line-soft);
}

.hsc-cost-modal-body {
  overflow-y: auto;
}

.hsc-cost-modal-footer {
  border-top: 1px dashed var(--hsc-cost-line-soft);
}

.hsc-cost-saved-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 8px;
  align-items: center;
  padding: 9px;
  background: var(--hsc-cost-paper-strong);
  border: 1px solid var(--hsc-cost-line-soft);
}

body[data-scheme="dark"],
body[data-scheme="inverse"] {
  --hsc-cost-page: #201811;
  --hsc-cost-paper: #2b2119;
  --hsc-cost-paper-strong: #33271d;
  --hsc-cost-paper-soft: #3d2d20;
  --hsc-cost-ink: #f7ebd8;
  --hsc-cost-muted: #f0dfc5;
  --hsc-cost-line: #a98b6b;
  --hsc-cost-line-soft: rgba(169,139,107,.54);
  --hsc-cost-green: #344a32;
  --hsc-cost-green-ink: #f7ebd8;
  --hsc-cost-blue: #233c43;
  --hsc-cost-amber: #d2aa55;
  --hsc-cost-shadow: 4px 4px 0 rgba(0,0,0,.34);
  --hsc-cost-soft-shadow: 2px 2px 0 rgba(0,0,0,.24);
  color: #f2e4cf !important;
  background:
    linear-gradient(90deg, rgba(229,196,139,.055) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(229,196,139,.045) 1px, transparent 1px) 0 0 / 18px 18px,
    #201811 !important;
}

.hsc-cost-tool.dark {
  --hsc-cost-paper: #2b2119;
  --hsc-cost-paper-strong: #33271d;
  --hsc-cost-paper-soft: #3d2d20;
  --hsc-cost-ink: #f7ebd8;
  --hsc-cost-muted: #f0dfc5;
  --hsc-cost-line: #a98b6b;
  --hsc-cost-line-soft: rgba(169,139,107,.54);
  --hsc-cost-green: #344a32;
  --hsc-cost-green-ink: #f7ebd8;
  --hsc-cost-blue: #233c43;
  --hsc-cost-amber: #d2aa55;
}

body[data-scheme="dark"] :is(.hsc-cost-shell, .hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
body[data-scheme="inverse"] :is(.hsc-cost-shell, .hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
.hsc-cost-tool.dark :is(.hsc-cost-shell, .hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item) {
  color: var(--hsc-cost-ink) !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .hsc-cost-title,
body[data-scheme="inverse"] .hsc-cost-title,
.hsc-cost-tool.dark .hsc-cost-title {
  background:
    linear-gradient(135deg, rgba(51,39,29,.98), rgba(43,33,25,.94)),
    #33271d !important;
}
body[data-scheme="dark"] .hsc-cost-panel,
body[data-scheme="inverse"] .hsc-cost-panel,
.hsc-cost-tool.dark .hsc-cost-panel {
  background: rgba(51, 39, 29, .96) !important;
}

body[data-scheme="dark"] .hsc-cost-kicker,
body[data-scheme="inverse"] .hsc-cost-kicker,
.hsc-cost-tool.dark .hsc-cost-kicker {
  color: #f7ebd8 !important;
  -webkit-text-fill-color: #f7ebd8 !important;
  background: #3d2d20 !important;
  border-color: #a98b6b !important;
}

body[data-scheme="dark"] .hsc-cost-title-meter,
body[data-scheme="inverse"] .hsc-cost-title-meter,
body[data-scheme="dark"] .hsc-cost-result-hero,
body[data-scheme="inverse"] .hsc-cost-result-hero,
body[data-scheme="dark"] .hsc-cost-button--add,
body[data-scheme="inverse"] .hsc-cost-button--add,
.hsc-cost-tool.dark :is(.hsc-cost-title-meter, .hsc-cost-result-hero, .hsc-cost-button--add) {
  color: #f7ebd8 !important;
  -webkit-text-fill-color: #f7ebd8 !important;
  background: #344a32 !important;
}

body[data-scheme="dark"] .hsc-cost-button--primary,
body[data-scheme="inverse"] .hsc-cost-button--primary,
body[data-scheme="dark"] .hsc-cost-modal-button--confirm,
body[data-scheme="inverse"] .hsc-cost-modal-button--confirm,
.hsc-cost-tool.dark :is(.hsc-cost-button--primary, .hsc-cost-modal-button--confirm) {
  color: #201811 !important;
  -webkit-text-fill-color: #201811 !important;
  background: #d2aa55 !important;
}

body[data-scheme="dark"] :is(.hsc-cost-input, .hsc-cost-unit-select),
body[data-scheme="inverse"] :is(.hsc-cost-input, .hsc-cost-unit-select),
.hsc-cost-tool.dark :is(.hsc-cost-input, .hsc-cost-unit-select) {
  color: #fff5df !important;
  -webkit-text-fill-color: #fff5df !important;
  caret-color: #f0c86a !important;
  background: #241c15 !important;
  border-color: #a98b6b !important;
  color-scheme: dark;
}

body[data-scheme="dark"] .hsc-cost-input::placeholder,
body[data-scheme="inverse"] .hsc-cost-input::placeholder,
.hsc-cost-tool.dark .hsc-cost-input::placeholder {
  color: #d9c7ab !important;
  -webkit-text-fill-color: #d9c7ab !important;
}

body[data-scheme="dark"] :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
body[data-scheme="inverse"] :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
.hsc-cost-tool.dark :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart) {
  color: #f0dfc5 !important;
  -webkit-text-fill-color: #f0dfc5 !important;
  background: #241c15 !important;
  border-color: #725b46 !important;
}
body[data-scheme="dark"] .hsc-cost-flow-step,
body[data-scheme="inverse"] .hsc-cost-flow-step,
.hsc-cost-tool.dark .hsc-cost-flow-step {
  color: #f4e5cf !important;
  -webkit-text-fill-color: #f4e5cf !important;
  background: #2b2119 !important;
  border-color: #725b46 !important;
}

body[data-scheme="dark"] .hsc-cost-flow-step strong,
body[data-scheme="inverse"] .hsc-cost-flow-step strong,
.hsc-cost-tool.dark .hsc-cost-flow-step strong {
  color: #e8f5d5 !important;
  -webkit-text-fill-color: #e8f5d5 !important;
  background: #30462d !important;
  border-color: #a98b6b !important;
}


body[data-scheme="dark"] .hsc-cost-button--reset,
body[data-scheme="inverse"] .hsc-cost-button--reset,
body[data-scheme="dark"] .hsc-cost-saved-button--delete,
body[data-scheme="inverse"] .hsc-cost-saved-button--delete,
body[data-scheme="dark"] .hsc-cost-compare-remove,
body[data-scheme="inverse"] .hsc-cost-compare-remove,
.hsc-cost-tool.dark :is(.hsc-cost-button--reset, .hsc-cost-saved-button--delete, .hsc-cost-compare-remove) {
  color: #fff0dd !important;
  -webkit-text-fill-color: #fff0dd !important;
  background: #5a3028 !important;
  border-color: #c98266 !important;
}

@media (max-width: 980px) {
  body .cs-breadcrumbs,
  body .cs-entry__header,
  body .health-supplement-cost-wrapper {
    width: min(980px, calc(100vw - 20px));
  }

  .hsc-cost-body,
  .hsc-cost-panel-head--row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .hsc-cost-flow,
  .hsc-cost-panel--input,
  .hsc-cost-panel--result,
  .hsc-cost-panel--compare {
    grid-area: auto;
  }

  .hsc-cost-panel-head--row {
    align-items: stretch;
  }
  .hsc-cost-panel--result,
  .hsc-cost-panel--compare.has-items {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .hsc-cost-panel--result > .hsc-cost-panel-head,
  .hsc-cost-panel--result .hsc-cost-result-content,
  .hsc-cost-panel--result #add-btn,
  .hsc-cost-panel--result .hsc-cost-total-summary,
  .hsc-cost-panel--compare.has-items > .hsc-cost-panel-head,
  .hsc-cost-panel--compare.has-items .hsc-cost-total-summary,
  .hsc-cost-panel--compare.has-items .hsc-cost-compare-list,
  .hsc-cost-panel--compare.has-items .hsc-cost-compare-chart {
    grid-area: auto;
  }

}
@media (max-width: 900px) {
  .hsc-cost-flow,
  .hsc-cost-control-matrix,
  .hsc-cost-result-metrics,
  .hsc-cost-summary-grid,
  .hsc-cost-panel--compare .hsc-cost-summary-grid,
  .hsc-cost-compare-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body .cs-breadcrumbs,
  body .cs-entry__header,
  body .health-supplement-cost-wrapper {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }

  .hsc-cost-shell {
    box-shadow: 3px 3px 0 rgba(72,55,40,.16);
  }

  .hsc-cost-title,
  .hsc-cost-body,
  .hsc-cost-panel {
    padding: 10px;
  }

  .hsc-cost-title {
    grid-template-columns: 1fr;
  }

  .hsc-cost-title-meter {
    min-height: 44px;
    grid-template-columns: auto 1fr;
    justify-content: start;
    justify-items: start;
  }

  .hsc-cost-flow,
  .hsc-cost-control-matrix,
  .hsc-cost-result-metrics,
  .hsc-cost-summary-grid,
  .hsc-cost-panel--compare .hsc-cost-summary-grid,
  .hsc-cost-modal-footer,
  .hsc-cost-saved-actions {
    grid-template-columns: 1fr;
  }

  .hsc-cost-primary-actions,
  .hsc-cost-compare-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hsc-cost-button--primary {
    grid-column: 1 / -1;
  }
  .hsc-cost-empty {
    grid-column: 1 / -1;
  }


  .hsc-cost-compare-list,
  .hsc-cost-compare-item {
    grid-template-columns: 1fr;
  }

  .hsc-cost-compare-item {
    grid-template-areas:
      "rank"
      "info"
      "costs"
      "remove";
    min-height: 0;
  }

  .hsc-cost-compare-costs {
    grid-column: auto;
    text-align: left;
  }

  .hsc-cost-compare-remove {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
  }

  .hsc-cost-chart-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .hsc-cost-saved-item {
    grid-template-columns: 1fr;
  }

  .hsc-cost-toast {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  body .entry-content [data-ad-slot="7492498702"],
  body .entry-content [data-roberin-qa-ad-slot="7492498702"] {
    width: 100% !important;
    margin: 18px auto !important;
  }
}

@media (max-width: 370px) {
  .hsc-cost-title,
  .hsc-cost-body,
  .hsc-cost-panel {
    padding: 8px;
  }

  .hsc-cost-unit-select,
  .hsc-cost-unit-chip,
  .hsc-cost-unit-display {
    flex-basis: 66px;
    width: 66px !important;
    padding-left: 6px;
    padding-right: 6px;
  }

  .hsc-cost-compare-actions,
  .hsc-cost-primary-actions {
    gap: 6px;
  }
}

/* Preserved existing ad flow and article-body CSS; tool-only redesign must not change these lanes. */
/* Ad flow: keep the after-tool slot frameless and centered between tool and article. */
body .entry-content > .health-supplement-cost-wrapper + .roberin-qa-ad-placeholder,
body .entry-content > .health-supplement-cost-wrapper + ins.adsbygoogle,
body .entry-content > .health-supplement-cost-wrapper + .adsbygoogle,
body .entry-content [data-ad-slot="7492498702"],
body .entry-content [data-roberin-qa-ad-slot="7492498702"] {
  display: block !important;
  width: min(100%, 728px) !important;
  max-width: 100% !important;
  margin: 22px auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .entry-content > .health-supplement-cost-wrapper + .roberin-qa-ad-placeholder + article,
body .entry-content > .health-supplement-cost-wrapper + ins.adsbygoogle + script + article,
body .entry-content > .health-supplement-cost-wrapper + ins.adsbygoogle + article,
body .entry-content [data-roberin-qa-ad-slot="7492498702"] + article {
  display: flow-root !important;
  margin-top: 0 !important;
}

body .entry-content > .roberin-qa-ad-placeholder,
body .entry-content > ins.adsbygoogle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Phase 2 body redesign - 2026-05-21
   Body reference role map: https://roberin.com/projects/pdf-page-deletion/ */
body {
  --hsc-article-panel: #f8efe2;
  --hsc-article-card: #fff8ed;
  --hsc-article-text: #34281f;
  --hsc-article-muted: #574838;
  --hsc-article-line: #6b5745;
  --hsc-article-line-soft: rgba(107, 87, 69, .34);
  --hsc-article-accent-paper: #e2edd8;
  --hsc-article-mustard: #d2aa55;
  --hsc-article-mustard-soft: #efdc9d;
  --hsc-article-focus: #4f7d94;
  --hsc-article-shadow: rgba(82, 65, 50, .18);
  --hsc-article-soft-shadow: rgba(82, 65, 50, .13);
}

body .entry-content article.roberin-article-body.hsc-article,
body .hsc-article {
  position: relative;
  z-index: 0;
  display: grid !important;
  gap: 18px !important;
  box-sizing: border-box !important;
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: 980px !important;
  min-width: 0 !important;
  margin: clamp(24px, 4vw, 42px) auto !important;
  padding: clamp(16px, 3vw, 28px) !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  background:
    linear-gradient(rgba(107, 87, 69, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 87, 69, .04) 1px, transparent 1px),
    var(--hsc-article-panel) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  border: 2px solid var(--hsc-article-line) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--hsc-article-shadow) !important;
  overflow: hidden !important;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.72 !important;
  word-break: keep-all !important;
}

body .hsc-article,
body .hsc-article *,
body .hsc-article *::before,
body .hsc-article *::after {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

body .hsc-article :is(p, li, td, th, summary, span, strong, code, h2, h3) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

body .hsc-article__hero,
body .hsc-article__section {
  display: grid !important;
  gap: 13px !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .hsc-article__hero {
  padding: 0 0 22px !important;
  border-bottom: 1px dashed var(--hsc-article-line-soft) !important;
}

body .hsc-article__section + .hsc-article__section {
  margin-top: 6px !important;
  padding-top: 22px !important;
  border-top: 1px dashed var(--hsc-article-line-soft) !important;
}

body .hsc-article__kicker {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  background: var(--hsc-article-accent-paper) !important;
  border: 1px solid var(--hsc-article-line) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--hsc-article-soft-shadow) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
}

body .hsc-article h2,
body .hsc-article h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-left-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: -.02em !important;
  word-break: keep-all !important;
}

body .hsc-article h2 {
  font-size: clamp(25px, 3vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
}

body .hsc-article h3 {
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

body .hsc-article p,
body .hsc-article li,
body .hsc-article summary {
  margin: 0 !important;
  color: var(--hsc-article-muted) !important;
  -webkit-text-fill-color: var(--hsc-article-muted) !important;
  font-size: 15px !important;
  font-weight: 680 !important;
  line-height: 1.72 !important;
  overflow-wrap: anywhere !important;
}

body .hsc-article strong {
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  font-weight: 920 !important;
}

body .hsc-article__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .hsc-article__nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  text-decoration: none !important;
  background: var(--hsc-article-card) !important;
  border: 1px solid var(--hsc-article-line) !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body .hsc-article__nav a:hover,
body .hsc-article__nav a:focus-visible {
  background: var(--hsc-article-mustard-soft) !important;
  outline: 2px solid var(--hsc-article-focus) !important;
  outline-offset: 2px !important;
}

body .hsc-article__grid,
body .hsc-article__process-grid,
body .hsc-article__use-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .hsc-article__use-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body .hsc-article__card,
body .hsc-article__process,
body .hsc-article__use,
body .hsc-article__notice,
body .hsc-article details {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 12px !important;
  color: var(--hsc-article-muted) !important;
  -webkit-text-fill-color: var(--hsc-article-muted) !important;
  background: var(--hsc-article-card) !important;
  border: 1px solid var(--hsc-article-line) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 var(--hsc-article-soft-shadow) !important;
}

body .hsc-article__notice {
  background: rgba(239, 225, 188, .64) !important;
  border-style: dashed !important;
}

body .hsc-article__process {
  background: rgba(226, 237, 216, .70) !important;
}

body .hsc-article__use span,
body .hsc-article__process span {
  color: var(--hsc-article-muted) !important;
  -webkit-text-fill-color: var(--hsc-article-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

body .hsc-article code {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 8px !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  background: var(--hsc-article-card) !important;
  border: 1px solid var(--hsc-article-line-soft) !important;
  border-radius: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: .92em !important;
  font-weight: 780 !important;
  line-height: 1.48 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body .hsc-article :is(ul, ol) {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

body .hsc-article ol,
body .hsc-article ol.hsc-article__steps {
  counter-reset: hsc-article-step !important;
}

body .hsc-article :is(ul, ol) > li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-wrap: anywhere !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .hsc-article :is(ul, ol) > li::before {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  box-sizing: border-box !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  border-radius: 0 !important;
}

body .hsc-article ul > li::before {
  content: "" !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  background: var(--hsc-article-mustard) !important;
  border: 1px solid var(--hsc-article-line) !important;
  box-shadow: 1px 1px 0 rgba(82, 65, 50, .22) !important;
  line-height: 1 !important;
}

body .hsc-article ol > li,
body .hsc-article ol.hsc-article__steps > li {
  counter-increment: hsc-article-step !important;
}

body .hsc-article ol > li::before,
body .hsc-article ol.hsc-article__steps > li::before {
  content: counter(hsc-article-step) !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--hsc-article-mustard-soft) !important;
  border: 1px solid var(--hsc-article-line) !important;
  box-shadow: 1px 1px 0 rgba(82, 65, 50, .22) !important;
  font-size: 11px !important;
  font-weight: 920 !important;
  line-height: 1 !important;
}

body .hsc-article__li-text {
  display: block !important;
  min-width: 0 !important;
  align-self: center !important;
}

body .hsc-article details {
  margin: 0 !important;
}

body .hsc-article summary {
  cursor: pointer !important;
  color: var(--hsc-article-text) !important;
  -webkit-text-fill-color: var(--hsc-article-text) !important;
  font-weight: 950 !important;
  line-height: 1.45 !important;
  list-style-position: inside !important;
}

body .hsc-article summary::after {
  content: none !important;
  display: none !important;
}

body .hsc-article details[open] summary {
  margin-bottom: 8px !important;
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="dark"] .hsc-article,
body[data-scheme="inverse"] .hsc-article {
  color: #f2e4cf !important;
  -webkit-text-fill-color: #f2e4cf !important;
  background-image:
    linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px) !important;
  background-color: #33271d !important;
  border-color: #a98b6b !important;
}

body[data-scheme="dark"] .hsc-article :is(h2, h3, strong, summary),
body[data-scheme="inverse"] .hsc-article :is(h2, h3, strong, summary) {
  color: #f2e4cf !important;
  -webkit-text-fill-color: #f2e4cf !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-scheme="dark"] .hsc-article :is(p, li, span),
body[data-scheme="inverse"] .hsc-article :is(p, li, span) {
  color: #f0dfc5 !important;
  -webkit-text-fill-color: #f0dfc5 !important;
}

body[data-scheme="dark"] .hsc-article__card,
body[data-scheme="dark"] .hsc-article__process,
body[data-scheme="dark"] .hsc-article__use,
body[data-scheme="dark"] .hsc-article__notice,
body[data-scheme="dark"] .hsc-article details,
body[data-scheme="dark"] .hsc-article__nav a,
body[data-scheme="inverse"] .hsc-article__card,
body[data-scheme="inverse"] .hsc-article__process,
body[data-scheme="inverse"] .hsc-article__use,
body[data-scheme="inverse"] .hsc-article__notice,
body[data-scheme="inverse"] .hsc-article details,
body[data-scheme="inverse"] .hsc-article__nav a {
  background-color: #33271d !important;
  border-color: rgba(169, 139, 107, .72) !important;
  box-shadow: 3px 3px 0 rgba(32, 24, 17, .52) !important;
}

body[data-scheme="dark"] .hsc-article__notice,
body[data-scheme="dark"] .hsc-article__process,
body[data-scheme="inverse"] .hsc-article__notice,
body[data-scheme="inverse"] .hsc-article__process {
  background-color: rgba(36, 28, 21, .56) !important;
}

body[data-scheme="dark"] .hsc-article code,
body[data-scheme="inverse"] .hsc-article code {
  color: #f2e4cf !important;
  -webkit-text-fill-color: #f2e4cf !important;
  background: #241c15 !important;
  border-color: rgba(169, 139, 107, .56) !important;
}

body[data-scheme="dark"] .hsc-article :is(ul, ol) > li::before,
body[data-scheme="inverse"] .hsc-article :is(ul, ol) > li::before {
  border-color: #a98b6b !important;
}

body .entry-content [data-roberin-qa-ad-slot="7492498702"] + article.roberin-article-body.hsc-article,
body .entry-content [data-ad-slot="7492498702"] + article.roberin-article-body.hsc-article,
body .entry-content > .health-supplement-cost-wrapper + ins.adsbygoogle + script + article.roberin-article-body.hsc-article,
body .entry-content > .health-supplement-cost-wrapper + ins.adsbygoogle + article.roberin-article-body.hsc-article {
  margin-top: 0 !important;
}

@media (max-width: 920px) {
  body .hsc-article__use-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body .entry-content article.roberin-article-body.hsc-article,
  body .hsc-article {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 12px !important;
    box-shadow: 4px 4px 0 rgba(82, 65, 50, .16) !important;
  }

  body .hsc-article__grid,
  body .hsc-article__process-grid,
  body .hsc-article__use-grid {
    grid-template-columns: 1fr !important;
  }

  body .hsc-article h3 {
    font-size: 18px !important;
  }
}

@media (max-width: 370px) {
  body .hsc-article h2 {
    font-size: 25.2px !important;
  }
}

/* Phase 2 v5: match PDF reference dark kicker contrast. */
body[data-scheme="dark"] .hsc-article__kicker,
body[data-scheme="inverse"] .hsc-article__kicker {
  color: #f2e4cf !important;
  -webkit-text-fill-color: #f2e4cf !important;
  background-color: #344a32 !important;
  border-color: #a98b6b !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .2) !important;
}

/* Phase 2 v6: align article dark shell shadow/background with reference rhythm. */
body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="dark"] .hsc-article,
body[data-scheme="inverse"] .hsc-article {
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .32) !important;
}

@media (max-width: 640px) {
  body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="dark"] .hsc-article,
  body[data-scheme="inverse"] .hsc-article {
    background-color: #35291f !important;
    box-shadow: 4px 4px 0 rgba(82, 65, 50, .16) !important;
  }
}

/* Phase 2 v7: force article panel/shadow computed values to match the reference article. */
body .entry-content article.roberin-article-body.hsc-article,
body .hsc-article {
  box-shadow: 5px 5px 0 rgba(82, 65, 50, .22) !important;
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="dark"] .hsc-article,
body[data-scheme="inverse"] .hsc-article {
  background:
    linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px),
    #34281e !important;
  background-size: 28px 28px, 28px 28px, auto !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .32) !important;
}

@media (max-width: 640px) {
  body .entry-content article.roberin-article-body.hsc-article,
  body .hsc-article {
    box-shadow: 4px 4px 0 rgba(82, 65, 50, .16) !important;
  }

  body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="dark"] .hsc-article,
  body[data-scheme="inverse"] .hsc-article {
    background:
      linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px),
      #35291f !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    box-shadow: 4px 4px 0 rgba(82, 65, 50, .16) !important;
  }
}

@media (max-width: 370px) {
  body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="dark"] .hsc-article,
  body[data-scheme="inverse"] .hsc-article {
    background:
      linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px),
      #362a20 !important;
    background-size: 28px 28px, 28px 28px, auto !important;
  }
}

/* Phase 2 v8: use the same dark article base color as the reference at every viewport. */
body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
body[data-scheme="dark"] .hsc-article,
body[data-scheme="inverse"] .hsc-article {
  background:
    linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px),
    #33271d !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

@media (max-width: 640px) {
  body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="dark"] .hsc-article,
  body[data-scheme="inverse"] .hsc-article {
    background:
      linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px),
      #33271d !important;
    background-size: 28px 28px, 28px 28px, auto !important;
  }
}

@media (max-width: 370px) {
  body[data-scheme="dark"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="inverse"] .entry-content article.roberin-article-body.hsc-article,
  body[data-scheme="dark"] .hsc-article,
  body[data-scheme="inverse"] .hsc-article {
    background:
      linear-gradient(rgba(169, 139, 107, .075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(169, 139, 107, .06) 1px, transparent 1px),
      #33271d !important;
    background-size: 28px 28px, 28px 28px, auto !important;
  }
}
/* Phase 1 dark color calibration follow-up — tool-only contract color tone repair. */
body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper,
body.dark-mode .health-supplement-cost-wrapper,
.health-supplement-cost-wrapper.hsc-cost-tool.dark {
  --hsc-cost-page: #1f1a14;
  --hsc-cost-paper: #211d18;
  --hsc-cost-paper-strong: #2b261f;
  --hsc-cost-paper-soft: #3a3024;
  --hsc-cost-ink: #f6ecd9;
  --hsc-cost-muted: #d0bfa5;
  --hsc-cost-line: #e2c98d;
  --hsc-cost-line-soft: rgba(226, 201, 141, .56);
  --hsc-cost-green: #294426;
  --hsc-cost-green-ink: #f6ecd9;
  --hsc-cost-blue: #214049;
  --hsc-cost-amber: #e7bd6f;
  --hsc-cost-shadow: 4px 4px 0 rgba(0, 0, 0, .34);
  --hsc-cost-soft-shadow: 2px 2px 0 rgba(0, 0, 0, .24);
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-shell,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-shell,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-shell,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-shell {
  color: var(--hsc-cost-ink) !important;
  background:
    linear-gradient(rgba(226, 201, 141, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 201, 141, .045) 1px, transparent 1px),
    var(--hsc-cost-paper) !important;
  background-size: 20px 20px, 20px 20px, auto !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-title,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-title,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-title,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-title {
  color: var(--hsc-cost-ink) !important;
  background:
    linear-gradient(90deg, rgba(43, 38, 31, .96), rgba(32, 29, 24, .96) 64%, rgba(226, 201, 141, .16)),
    var(--hsc-cost-paper-strong) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-kicker,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-kicker,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-kicker,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-kicker {
  color: var(--hsc-cost-muted) !important;
  -webkit-text-fill-color: var(--hsc-cost-muted) !important;
  background: var(--hsc-cost-paper-soft) !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item) {
  color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-paper-strong) !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow {
  background: var(--hsc-cost-paper) !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow-step,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow-step,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  border-color: rgba(226, 201, 141, .64) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(1) {
  background: #2b261f !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(2) {
  background: #294426 !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(3) {
  background: #214049 !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(4) {
  background: #3a3024 !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step strong,
body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-compare-rank,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-compare-rank,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-compare-rank,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-compare-rank {
  color: #f6ecd9 !important;
  -webkit-text-fill-color: #f6ecd9 !important;
  background: #1f1a14 !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-input, .hsc-cost-unit-select) {
  color: #fff5df !important;
  -webkit-text-fill-color: #fff5df !important;
  background: #1f1a14 !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart) {
  color: var(--hsc-cost-muted) !important;
  -webkit-text-fill-color: var(--hsc-cost-muted) !important;
  background: #1f1a14 !important;
  border-color: rgba(226, 201, 141, .46) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best, .hsc-cost-summary-card.is-best),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best, .hsc-cost-summary-card.is-best),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best, .hsc-cost-summary-card.is-best),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best, .hsc-cost-summary-card.is-best) {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-green) !important;
  border-color: var(--hsc-cost-line) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill) {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-blue) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .health-supplement-cost-wrapper .hsc-cost-button--primary,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body .health-supplement-cost-wrapper .hsc-cost-button--primary,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-button--primary,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-button--primary {
  color: #201811 !important;
  -webkit-text-fill-color: #201811 !important;
  background: var(--hsc-cost-amber) !important;
  border-color: var(--hsc-cost-line) !important;
}


/* body salary-first i18n scope */
/* Health supplement cost calculator body — salary-first article contract 2026-06-23 */
body .entry-content > article.roberin-article-body.supplement-cost-body-article,
body .entry-content article.roberin-article-body.supplement-cost-body-article {
  --supplement-cost-body-paper: #f8efe2;
  --supplement-cost-body-card: #fffaf1;
  --supplement-cost-body-card-strong: #fffdf7;
  --supplement-cost-body-ink: #34281f;
  --supplement-cost-body-muted: #6b5745;
  --supplement-cost-body-line: #6b5745;
  --supplement-cost-body-line-soft: rgba(107, 87, 69, 0.28);
  --supplement-cost-body-grid: rgba(107, 87, 69, 0.052);
  --supplement-cost-body-green: #e3efd2;
  --supplement-cost-body-blue: #dfeef8;
  --supplement-cost-body-amber: #f7df9d;
  --supplement-cost-body-shadow: 5px 5px 0 rgba(82, 65, 50, 0.2);
  --supplement-cost-body-shadow-tight: 3px 3px 0 rgba(82, 65, 50, 0.16);
  box-sizing: border-box !important;
  width: min(100% - 32px, 980px) !important;
  max-width: 980px !important;
  margin: 30px auto 42px !important;
  padding: 28px !important;
  color: var(--supplement-cost-body-ink) !important;
  background:
    linear-gradient(var(--supplement-cost-body-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--supplement-cost-body-grid) 1px, transparent 1px),
    var(--supplement-cost-body-paper) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  border: 2px solid var(--supplement-cost-body-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--supplement-cost-body-shadow) !important;
  font-family: "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
}

body .supplement-cost-body-article,
body .supplement-cost-body-article *,
body .supplement-cost-body-article *::before,
body .supplement-cost-body-article *::after {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

body .supplement-cost-body-article :where(h2, h3, h4, p, ul, ol, li) {
  margin: 0 !important;
}

body .supplement-cost-body-article__hero {
  padding: 0 0 20px !important;
  border-bottom: 1px dashed var(--supplement-cost-body-line-soft) !important;
}

body .supplement-cost-body-article__section {
  padding: 22px 0 0 !important;
}

body .supplement-cost-body-article__section + .supplement-cost-body-article__section {
  margin-top: 22px !important;
  border-top: 1px dashed var(--supplement-cost-body-line-soft) !important;
}

body .supplement-cost-body-article__kicker {
  display: inline-block !important;
  margin: 0 0 9px !important;
  padding: 5px 8px !important;
  color: var(--supplement-cost-body-muted) !important;
  background: var(--supplement-cost-body-amber) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

body .supplement-cost-body-article h2 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--supplement-cost-body-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1.24 !important;
  word-break: keep-all !important;
}

body .supplement-cost-body-article h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--supplement-cost-body-ink) !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.34 !important;
}

body .supplement-cost-body-article p,
body .supplement-cost-body-article li,
body .supplement-cost-body-article summary {
  color: var(--supplement-cost-body-muted) !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  line-height: 1.72 !important;
  word-break: keep-all !important;
}

body .supplement-cost-body-article strong {
  color: var(--supplement-cost-body-ink) !important;
  font-weight: 950 !important;
}

body .supplement-cost-body-article__hero > p:not(.supplement-cost-body-article__kicker),
body .supplement-cost-body-article__section > p {
  margin-top: 10px !important;
  max-width: 860px !important;
}

body .supplement-cost-body-article__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
  position: static !important;
}

body .supplement-cost-body-article__nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  color: var(--supplement-cost-body-ink) !important;
  background: var(--supplement-cost-body-card) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(82, 65, 50, 0.14) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body .supplement-cost-body-article__grid,
body .supplement-cost-body-article__formula-grid,
body .supplement-cost-body-article__walkthrough,
body .supplement-cost-body-article__source-list,
body .supplement-cost-body-article__faq-list {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 16px !important;
  min-width: 0 !important;
}

body .supplement-cost-body-article__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body .supplement-cost-body-article__formula-grid,
body .supplement-cost-body-article__walkthrough {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body .supplement-cost-body-article__source-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body .supplement-cost-body-article__card,
body .supplement-cost-body-article__formula,
body .supplement-cost-body-article__walk-step,
body .supplement-cost-body-article__source-list a,
body .supplement-cost-body-article__notice,
body .supplement-cost-body-article details {
  min-width: 0 !important;
  color: var(--supplement-cost-body-muted) !important;
  background: var(--supplement-cost-body-card) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--supplement-cost-body-shadow-tight) !important;
}

body .supplement-cost-body-article__card,
body .supplement-cost-body-article__notice {
  padding: 15px !important;
}

body .supplement-cost-body-article__card p,
body .supplement-cost-body-article__notice p {
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.66 !important;
}

body .supplement-cost-body-article__formula,
body .supplement-cost-body-article__walk-step {
  padding: 13px 10px !important;
  text-align: center !important;
}

body .supplement-cost-body-article__formula span,
body .supplement-cost-body-article__walk-step span {
  display: block !important;
  color: var(--supplement-cost-body-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body .supplement-cost-body-article__formula strong,
body .supplement-cost-body-article__walk-step strong {
  display: block !important;
  margin-top: 7px !important;
  min-width: 0 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body .supplement-cost-body-article__walk-step.is-result {
  background: var(--supplement-cost-body-green) !important;
}

body .supplement-cost-body-article__notice {
  margin-top: 16px !important;
  background: var(--supplement-cost-body-blue) !important;
}

body .supplement-cost-body-article__source-list a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 5px 12px !important;
  align-items: center !important;
  padding: 13px 13px 13px 14px !important;
  background: var(--supplement-cost-body-card-strong) !important;
  border-width: 2px !important;
  box-shadow: 3px 3px 0 rgba(82, 65, 50, 0.18) !important;
  text-decoration: none !important;
}

body .supplement-cost-body-article__source-list a::after {
  content: "열기" !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  color: var(--supplement-cost-body-ink) !important;
  background: var(--supplement-cost-body-amber) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(82, 65, 50, 0.16) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body .supplement-cost-body-article__source-list a:hover,
body .supplement-cost-body-article__source-list a:focus-visible {
  color: var(--supplement-cost-body-ink) !important;
  background: var(--supplement-cost-body-card) !important;
  box-shadow: 4px 4px 0 rgba(82, 65, 50, 0.22) !important;
  transform: translate(-1px, -1px) !important;
}

body .supplement-cost-body-article__source-list a strong {
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
}

body .supplement-cost-body-article__source-list a span {
  min-width: 0 !important;
  color: var(--supplement-cost-body-muted) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.48 !important;
}

body .supplement-cost-body-article :where(ul, ol) {
  padding: 0 !important;
  list-style: none !important;
}

body .supplement-cost-body-article li {
  position: relative !important;
  padding-left: 34px !important;
}

body .supplement-cost-body-article li::before {
  content: none !important;
}

body .supplement-cost-body-article__steps,
body .supplement-cost-body-article__checklist {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
}

body .supplement-cost-body-article__steps {
  counter-reset: supplementCostBodyStep !important;
}

body .supplement-cost-body-article__steps > li,
body .supplement-cost-body-article__checklist > li {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  background: var(--supplement-cost-body-card) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  box-shadow: 2px 2px 0 rgba(82, 65, 50, 0.12) !important;
}

body .supplement-cost-body-article__steps > li {
  counter-increment: supplementCostBodyStep !important;
}

body .supplement-cost-body-article__steps > li::before,
body .supplement-cost-body-article__checklist > li::before {
  position: static !important;
  display: inline-grid !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: 0 !important;
  align-self: center !important;
  place-items: center !important;
  color: var(--supplement-cost-body-ink) !important;
  background: var(--supplement-cost-body-amber) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  box-shadow: 1px 1px 0 rgba(82, 65, 50, 0.22) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body .supplement-cost-body-article__steps > li::before {
  content: counter(supplementCostBodyStep) !important;
}

body .supplement-cost-body-article__checklist > li::before {
  content: "" !important;
}

body .supplement-cost-body-article__li-text {
  display: block !important;
  min-width: 0 !important;
  grid-column: 2 !important;
  align-self: center !important;
}

body .supplement-cost-body-article details {
  box-shadow: none !important;
}

body .supplement-cost-body-article summary {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: center !important;
  padding: 12px !important;
  color: var(--supplement-cost-body-ink) !important;
  cursor: pointer !important;
  font-weight: 950 !important;
  list-style: none !important;
}

body .supplement-cost-body-article summary::-webkit-details-marker {
  display: none !important;
}

body .supplement-cost-body-article summary::before {
  content: "+" !important;
  display: inline-grid !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: 0 !important;
  align-self: center !important;
  place-items: center !important;
  color: var(--supplement-cost-body-ink) !important;
  background: var(--supplement-cost-body-amber) !important;
  border: 1px solid var(--supplement-cost-body-line) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body .supplement-cost-body-article details[open] summary {
  border-bottom: 1px dashed var(--supplement-cost-body-line-soft) !important;
}

body .supplement-cost-body-article details[open] summary::before {
  content: "-" !important;
}

body .supplement-cost-body-article details p {
  padding: 12px !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.supplement-cost-body-article,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.supplement-cost-body-article,
html[data-scheme="dark"] body .entry-content article.roberin-article-body.supplement-cost-body-article,
html[data-scheme="inverse"] body .entry-content article.roberin-article-body.supplement-cost-body-article {
  --supplement-cost-body-paper: #2b2119;
  --supplement-cost-body-card: #33271d;
  --supplement-cost-body-card-strong: #241c15;
  --supplement-cost-body-ink: #f7ebd8;
  --supplement-cost-body-muted: #ead8bd;
  --supplement-cost-body-line: #a98b6b;
  --supplement-cost-body-line-soft: rgba(169, 139, 107, 0.42);
  --supplement-cost-body-grid: rgba(229, 196, 139, 0.055);
  --supplement-cost-body-green: #344a32;
  --supplement-cost-body-blue: #233c43;
  --supplement-cost-body-amber: #5a461e;
  --supplement-cost-body-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
  --supplement-cost-body-shadow-tight: 3px 3px 0 rgba(0, 0, 0, 0.24);
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a,
html[data-scheme="dark"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a,
html[data-scheme="inverse"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a {
  background: #241c15 !important;
  background-color: #241c15 !important;
  background-image: none !important;
  color: #ead8bd !important;
  border-color: #a98b6b !important;
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a strong,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a strong,
html[data-scheme="dark"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a strong,
html[data-scheme="inverse"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a strong {
  color: #f7ebd8 !important;
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a span,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a span,
html[data-scheme="dark"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a span,
html[data-scheme="inverse"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a span {
  color: #ead8bd !important;
}

body[data-scheme="dark"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a::after,
body[data-scheme="inverse"] .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a::after,
html[data-scheme="dark"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a::after,
html[data-scheme="inverse"] body .entry-content article.roberin-article-body.supplement-cost-body-article .supplement-cost-body-article__source-list a::after {
  background: #5a461e !important;
  background-color: #5a461e !important;
  background-image: none !important;
  color: #f7ebd8 !important;
  border-color: #a98b6b !important;
}

@media (prefers-color-scheme: dark) {
  body:not([data-scheme="light"]) .entry-content article.roberin-article-body.supplement-cost-body-article {
    --supplement-cost-body-paper: #2b2119;
    --supplement-cost-body-card: #33271d;
    --supplement-cost-body-card-strong: #241c15;
    --supplement-cost-body-ink: #f7ebd8;
    --supplement-cost-body-muted: #ead8bd;
    --supplement-cost-body-line: #a98b6b;
    --supplement-cost-body-line-soft: rgba(169, 139, 107, 0.42);
    --supplement-cost-body-grid: rgba(229, 196, 139, 0.055);
    --supplement-cost-body-green: #344a32;
    --supplement-cost-body-blue: #233c43;
    --supplement-cost-body-amber: #5a461e;
    --supplement-cost-body-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
    --supplement-cost-body-shadow-tight: 3px 3px 0 rgba(0, 0, 0, 0.24);
  }
}

@media (max-width: 900px) {
  body .supplement-cost-body-article__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body .entry-content > article.roberin-article-body.supplement-cost-body-article,
  body .entry-content article.roberin-article-body.supplement-cost-body-article {
    width: min(100% - 20px, 980px) !important;
    margin: 24px auto 34px !important;
    padding: 18px !important;
  }

  body .supplement-cost-body-article h2 {
    font-size: 24px !important;
  }

  body .supplement-cost-body-article__grid,
  body .supplement-cost-body-article__formula-grid,
  body .supplement-cost-body-article__walkthrough,
  body .supplement-cost-body-article__source-list {
    grid-template-columns: 1fr !important;
  }

  body .supplement-cost-body-article__nav a {
    white-space: normal !important;
  }
}

@media (max-width: 390px) {
  body .entry-content > article.roberin-article-body.supplement-cost-body-article,
  body .entry-content article.roberin-article-body.supplement-cost-body-article {
    width: min(100% - 16px, 980px) !important;
    padding: 16px !important;
  }

  body .supplement-cost-body-article p,
  body .supplement-cost-body-article li,
  body .supplement-cost-body-article summary {
    font-size: 14px !important;
  }

  body .supplement-cost-body-article__formula strong,
  body .supplement-cost-body-article__walk-step strong {
    font-size: 15px !important;
  }
}

/* activeCssFreshPathGate: health-supplement-cost-calculator-body-salary-family-20260623.css supplement-cost-body-article */


/* dark-mode repaired i18n scope */
/* Health supplement cost calculator dark color calibration — 2026-06-23.
   Tool-only override: restores warm Roberin dark paper tone and removes light-state leaks. */
body[data-scheme="dark"] .health-supplement-cost-wrapper,
body[data-scheme="inverse"] .health-supplement-cost-wrapper,
html[data-scheme="dark"] body .health-supplement-cost-wrapper,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper,
body.dark-mode .health-supplement-cost-wrapper,
.health-supplement-cost-wrapper.hsc-cost-tool.dark {
  --hsc-cost-page: #1f1a14;
  --hsc-cost-paper: #211d18;
  --hsc-cost-paper-strong: #2b261f;
  --hsc-cost-paper-soft: #3a3024;
  --hsc-cost-ink: #f6ecd9;
  --hsc-cost-muted: #d0bfa5;
  --hsc-cost-line: #e2c98d;
  --hsc-cost-line-soft: rgba(226, 201, 141, .56);
  --hsc-cost-green: #294426;
  --hsc-cost-green-ink: #f6ecd9;
  --hsc-cost-blue: #214049;
  --hsc-cost-amber: #e7bd6f;
  --hsc-cost-shadow: 4px 4px 0 rgba(0, 0, 0, .34);
  --hsc-cost-soft-shadow: 2px 2px 0 rgba(0, 0, 0, .24);
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-shell,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-shell,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-shell,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-shell,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-shell,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-shell {
  color: var(--hsc-cost-ink) !important;
  background:
    linear-gradient(rgba(226, 201, 141, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 201, 141, .045) 1px, transparent 1px),
    var(--hsc-cost-paper) !important;
  background-size: 20px 20px, 20px 20px, auto !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-title,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-title,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-title,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-title,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-title,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-title {
  color: var(--hsc-cost-ink) !important;
  background:
    linear-gradient(90deg, rgba(43, 38, 31, .96), rgba(32, 29, 24, .96) 64%, rgba(226, 201, 141, .16)),
    var(--hsc-cost-paper-strong) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-kicker,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-kicker,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-kicker,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-kicker,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-kicker,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-kicker {
  color: var(--hsc-cost-muted) !important;
  -webkit-text-fill-color: var(--hsc-cost-muted) !important;
  background: var(--hsc-cost-paper-soft) !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
body[data-scheme="inverse"] .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
html[data-scheme="dark"] body .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-panel, .hsc-cost-modal, .hsc-cost-toast, .hsc-cost-saved-item) {
  color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-paper-strong) !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow {
  background: var(--hsc-cost-paper) !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow-step,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow-step,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow-step,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow-step,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  border-color: rgba(226, 201, 141, .64) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(1),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(1) {
  background: #2b261f !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(2),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(2) {
  background: #294426 !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(3),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(3) {
  background: #214049 !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step:nth-child(4),
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step:nth-child(4) {
  background: #3a3024 !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-flow-step strong,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-flow-step strong {
  color: #f6ecd9 !important;
  -webkit-text-fill-color: #f6ecd9 !important;
  background: #1f1a14 !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
body[data-scheme="inverse"] .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
html[data-scheme="dark"] body .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-input, .hsc-cost-unit-select),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-input, .hsc-cost-unit-select) {
  color: #fff5df !important;
  -webkit-text-fill-color: #fff5df !important;
  background: #1f1a14 !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
body[data-scheme="inverse"] .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
html[data-scheme="dark"] body .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-unit-chip, .hsc-cost-unit-display, .hsc-cost-placeholder, .hsc-cost-empty, .hsc-cost-result-name, .hsc-cost-compare-chart) {
  color: var(--hsc-cost-muted) !important;
  -webkit-text-fill-color: var(--hsc-cost-muted) !important;
  background: #1f1a14 !important;
  border-color: rgba(226, 201, 141, .46) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best),
body[data-scheme="inverse"] .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best),
html[data-scheme="dark"] body .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-result-hero, .hsc-cost-button--add, .hsc-cost-compare-item.is-best, .hsc-cost-chart-fill.is-best) {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-green) !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
body[data-scheme="inverse"] .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
html[data-scheme="dark"] body .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
html[data-scheme="inverse"] body .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
body.dark-mode .health-supplement-cost-wrapper :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill),
.health-supplement-cost-wrapper.hsc-cost-tool.dark :is(.hsc-cost-summary-card.is-highlight, .hsc-cost-chart-fill) {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-blue) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-summary-card.is-best,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-summary-card.is-best,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-summary-card.is-best,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-summary-card.is-best,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-summary-card.is-best,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-summary-card.is-best {
  color: var(--hsc-cost-ink) !important;
  -webkit-text-fill-color: var(--hsc-cost-ink) !important;
  background: var(--hsc-cost-green) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-compare-rank,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-compare-rank,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-compare-rank,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-compare-rank,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-compare-rank,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-compare-rank {
  color: #f6ecd9 !important;
  -webkit-text-fill-color: #f6ecd9 !important;
  background: #1f1a14 !important;
  border-color: var(--hsc-cost-line) !important;
}

body[data-scheme="dark"] .health-supplement-cost-wrapper .hsc-cost-button--primary,
body[data-scheme="inverse"] .health-supplement-cost-wrapper .hsc-cost-button--primary,
html[data-scheme="dark"] body .health-supplement-cost-wrapper .hsc-cost-button--primary,
html[data-scheme="inverse"] body .health-supplement-cost-wrapper .hsc-cost-button--primary,
body.dark-mode .health-supplement-cost-wrapper .hsc-cost-button--primary,
.health-supplement-cost-wrapper.hsc-cost-tool.dark .hsc-cost-button--primary {
  color: #201811 !important;
  -webkit-text-fill-color: #201811 !important;
  background: var(--hsc-cost-amber) !important;
  border-color: var(--hsc-cost-line) !important;
}


body .hsc-cost-tool[data-locale] .hsc-cost-flow-step{min-width:0;}
body .hsc-cost-tool[data-locale] .hsc-cost-button,body .hsc-cost-tool[data-locale] .hsc-cost-input,body .hsc-cost-tool[data-locale] .hsc-cost-select-input{letter-spacing:0!important;}

/* 20260623 i18n final QA hardening: locale controls + body counter isolation */
html body .health-supplement-cost-wrapper.hsc-cost-tool .hsc-cost-input-row :is(.hsc-cost-unit-select, .hsc-cost-unit-chip, .hsc-cost-unit-display) {
  min-width: 88px !important;
}

html body article.roberin-article-body.supplement-cost-body-article ol.supplement-cost-body-article__steps {
  counter-reset: supplementCostBodyStep 0 !important;
  list-style: none !important;
}

html body article.roberin-article-body.supplement-cost-body-article ol.supplement-cost-body-article__steps > li {
  counter-increment: supplementCostBodyStep 1 !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
}

html body article.roberin-article-body.supplement-cost-body-article ol.supplement-cost-body-article__steps > li::before {
  content: counter(supplementCostBodyStep) !important;
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: 0 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body article.roberin-article-body.supplement-cost-body-article ul.supplement-cost-body-article__checklist > li::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  width: 22px !important;
  height: 22px !important;
  margin-top: 0 !important;
}