/* Approved simple calculator. The document owns scrolling; the fee popup is separate. */
#horangi-margin-simple {
  --hm-ink: #332f2b;
  --hm-muted: #81796f;
  --hm-line: #eae5dd;
  --hm-orange: #c5681e;
  --hm-brown: #5d402b;
  --hm-soft: #fff7ed;
  --hm-red: #b94339;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  background: #fff;
  color: var(--hm-ink);
  color-scheme: light;
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
#horangi-margin-simple *, #horangi-margin-simple *::before, #horangi-margin-simple *::after { box-sizing: border-box; }
#horangi-margin-simple [hidden] { display: none !important; }
#horangi-margin-simple .hm-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 22px; align-items: start; }
#horangi-margin-simple .hm-inputs { min-width: 0; margin: 0; padding: 24px; border: 1px solid var(--hm-line); border-radius: 10px; background: #fff; }
#horangi-margin-simple .hm-section + .hm-section { margin-top: 23px; padding-top: 22px; border-top: 1px solid var(--hm-line); }
#horangi-margin-simple h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--hm-ink); font-size: 16px; font-weight: 750; line-height: 1.35; letter-spacing: -.3px; }
#horangi-margin-simple .hm-step { color: var(--hm-orange); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
#horangi-margin-simple .hm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 16px; }
#horangi-margin-simple .hm-field { display: block; min-width: 0; margin: 0; color: #5b5148; font-size: 13px; font-weight: 600; }
#horangi-margin-simple .hm-wide { grid-column: 1 / -1; }
#horangi-margin-simple .hm-field > .hm-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; line-height: 1.5; }
#horangi-margin-simple .hm-label small { margin-left: 3px; color: var(--hm-muted); font-size: 11px; font-weight: 400; }
#horangi-margin-simple .hm-control { position: relative; display: flex; align-items: center; min-width: 0; }
#horangi-margin-simple .hm-field input[data-margin-input] { width: 100%; min-width: 0; height: 44px; margin: 0; padding: 8px 35px 8px 12px; border: 1px solid #dcd6cd; border-radius: 6px; background: #fff; color: var(--hm-ink); font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums; text-align: right; transition: border-color .15s; }
#horangi-margin-simple .hm-field input[data-margin-input="productName"] { padding-right: 12px; text-align: left; }
#horangi-margin-simple .hm-field input::placeholder { color: #a39a90; font-size: 13px; opacity: 1; }
#horangi-margin-simple .hm-field input:focus { border-color: var(--hm-orange); outline: 2px solid #e7954340; outline-offset: 1px; }
#horangi-margin-simple .hm-field input[aria-invalid="true"] { border-color: var(--hm-red); }
#horangi-margin-simple .hm-field input[data-margin-input]:disabled { border-color: #e5e1da; background: #f2f0ec; color: #a29a90; cursor: not-allowed; }
#horangi-margin-simple .hm-field input::-webkit-inner-spin-button, #horangi-margin-simple .hm-field input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
#horangi-margin-simple .hm-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
#horangi-margin-simple .hm-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--hm-muted); font-size: 12px; font-style: normal; font-weight: 400; pointer-events: none; }
#horangi-margin-simple .hm-note { margin: 7px 0 0; color: var(--hm-muted); font-size: 11px; font-weight: 400; line-height: 1.6; }
#horangi-margin-simple .hm-section-note { margin: -8px 0 16px; color: var(--hm-muted); font-size: 12px; font-weight: 400; line-height: 1.6; }
#horangi-margin-simple .field-error { display: block; margin-top: 6px; color: var(--hm-red); font-size: 12px; font-weight: 400; line-height: 1.5; }
#horangi-margin-simple .field-error:empty { display: none; }
#horangi-margin-simple .hm-manual { display: flex; align-items: center; gap: 7px; margin: 15px 0 0; color: #74695e; font-size: 12px; font-weight: 400; cursor: pointer; }
#horangi-margin-simple .hm-manual input[type="checkbox"] { flex: 0 0 15px; width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; accent-color: var(--hm-orange); }
#horangi-margin-simple #override-field { margin-top: 12px; }
#horangi-margin-simple .hm-result { position: static; min-width: 0; border: 1px solid var(--hm-line); border-radius: 10px; background: #fff; overflow: hidden; font-variant-numeric: tabular-nums; }
#horangi-margin-simple .hm-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--hm-line); background: #faf8f5; }
#horangi-margin-simple .hm-result-head h2 { margin: 0; }
#horangi-margin-simple .hm-result-section { padding: 22px; }
#horangi-margin-simple .hm-result-section + .hm-result-section { border-top: 1px solid var(--hm-line); }
#horangi-margin-simple h3 { margin: 0 0 15px; color: #72685e; font-size: 13px; font-weight: 650; line-height: 1.5; }
#horangi-margin-simple .hm-cost-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#horangi-margin-simple .hm-cost-pair span { display: block; margin-bottom: 5px; color: #7e7368; font-size: 12px; }
#horangi-margin-simple .hm-cost-pair strong { color: var(--hm-brown); font-size: 23px; font-weight: 750; letter-spacing: -.7px; line-height: 1.3; overflow-wrap: anywhere; }
#horangi-margin-simple .hm-cost-pair strong small { margin-left: 3px; font-size: 13px; font-weight: 500; letter-spacing: 0; }
#horangi-margin-simple .hm-judgement { margin: 13px 0 0; color: #78634f; font-size: 12px; line-height: 1.6; }
#horangi-margin-simple .hm-judgement[data-tone="bad"] { color: var(--hm-red); }
#horangi-margin-simple .hm-hero { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 17px; }
#horangi-margin-simple .hm-big { color: var(--hm-orange); font-size: 34px; font-weight: 780; line-height: 1.15; letter-spacing: -1.2px; overflow-wrap: anywhere; }
#horangi-margin-simple .hm-big small { margin-left: 4px; font-size: 17px; font-weight: 500; letter-spacing: 0; }
#horangi-margin-simple .hm-rate { color: #887766; font-size: 13px; white-space: nowrap; }
#horangi-margin-simple .hm-rows { display: grid; gap: 9px; margin: 0; }
#horangi-margin-simple .hm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13px; }
#horangi-margin-simple .hm-row dt { color: #7a7167; font-weight: 400; }
#horangi-margin-simple .hm-row dd { margin: 0; color: #3e352e; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
#horangi-margin-simple .hm-result details { margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--hm-line); }
#horangi-margin-simple .hm-result summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; color: #8d7763; font-size: 12px; list-style: none; cursor: pointer; }
#horangi-margin-simple .hm-result summary::-webkit-details-marker { display: none; }
#horangi-margin-simple .hm-result summary svg { flex: 0 0 14px; width: 14px; height: 14px; transition: transform .15s; }
#horangi-margin-simple .hm-result details[open] summary svg { transform: rotate(180deg); }
#horangi-margin-simple .hm-result details .hm-rows { margin-top: 13px; }
#horangi-margin-simple .hm-plan { background: #fffaf3; }
#horangi-margin-simple .hm-plan h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#horangi-margin-simple .hm-plan h3 span { color: #9b8069; font-size: 12px; font-weight: 400; }
#horangi-margin-simple .hm-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid #eadbc9; }
#horangi-margin-simple .hm-total .hm-label { color: var(--hm-brown); font-size: 13px; font-weight: 650; }
#horangi-margin-simple .hm-total strong { color: var(--hm-brown); font-size: 27px; font-weight: 750; line-height: 1.2; letter-spacing: -.8px; overflow-wrap: anywhere; }
#horangi-margin-simple .hm-total strong small { margin-left: 3px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
#horangi-margin-simple .hm-roi { margin: 7px 0 0; color: #9a7e63; font-size: 12px; text-align: right; }
#horangi-margin-simple .hm-negative { color: var(--hm-red) !important; }
#horangi-margin-simple .hm-foot { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 18px 0 0; color: var(--hm-muted); font-size: 11px; line-height: 1.7; }
#horangi-margin-simple .hm-alert { margin: 12px 0 0; color: var(--hm-red); font-size: 12px; }
#horangi-margin-simple .hm-result-placeholder { color: var(--hm-muted); }
#horangi-margin-simple .fee-applied-note { margin: 8px 0 0; color: var(--hm-orange); font-size: 12px; line-height: 1.6; }
#horangi-margin-simple .fee-applied-note:empty { display: none; }
#horangi-margin-simple :is(button, summary, a):focus-visible { outline: 2px solid var(--hm-orange); outline-offset: 3px; }

/* Keep account storage controls and history at the same readable width. */
.margin-page > :is(.page-head, .notice, .margin-save-action, .margin-history, .footer-info) { width: 100%; max-width: 1160px; margin-inline: auto; }
.commerce-surface[data-commerce-page="calculator"] .margin-page .page-head h1 { color: #5d402b; font-size: 28px; line-height: 1.3; }
.margin-page .page-head .subtitle { color: #81796f; font-size: 13px; }
.margin-page .page-head .actions { flex-wrap: wrap; justify-content: flex-end; }
.margin-page .page-head .btn { min-height: 38px; font-size: 12px; }
.margin-page > .notice { margin-bottom: 22px; border-color: #eae5dd; background: #faf8f5; color: #81796f; font-size: 12px; }
.margin-page > .notice button { min-height: 25px; color: #9a4b12; font-size: 12px; }
.margin-page .margin-save-action { margin-top: 28px; }
.commerce-surface .margin-page .margin-save-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 16px 24px; border-radius: 10px; font-size: 17px; font-weight: 750; line-height: 1.5; }
.margin-page .margin-save-button:focus-visible { outline: 2px solid #c5681e; outline-offset: 3px; }
.commerce-surface .margin-page .margin-history { margin-top: 28px; padding: 22px 24px; border: 1px solid #eae5dd; border-radius: 10px; background: #fff; }
.commerce-surface .margin-page .margin-save-action + .margin-history { margin-top: 32px; }
.margin-page .margin-history .section-head { align-items: flex-start; flex-wrap: wrap; }
.margin-page .margin-history h2 { color: #332f2b; font-size: 16px; font-weight: 750; }
.margin-page .margin-history .subtitle { color: #81796f; font-size: 12px; }
.margin-page .margin-history .actions { flex-wrap: wrap; }
.margin-page .margin-history .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.margin-page .margin-history table { font-size: 13px; }
.margin-page .margin-history th { padding: 12px; color: #81796f; background: #faf8f5; font-size: 12px; }
.margin-page .margin-history td { padding: 14px 12px; color: #332f2b; }
.margin-page .margin-history :is(th, td) { border-color: #eae5dd; }
.margin-page .margin-history .empty { color: #81796f; font-size: 13px; }
.margin-page .margin-history .empty strong { color: #5d402b; font-size: 15px; }
.margin-page > .footer-info { padding-bottom: 105px; color: #81796f; font-size: 11px; }

.margin-page .margin-history-name { min-width: 140px; text-align: left; }
.margin-page .margin-history-actions { display: flex; justify-content: center; align-items: center; gap: 6px; white-space: nowrap; }
.margin-page .margin-history-actions .btn { flex-shrink: 0; }
.margin-page .margin-history-connect { color: #874417; border-color: #dcc5ad; background: #fff8ee; }
.margin-page .margin-history-connect[aria-expanded="true"] { color: #fff; border-color: #9a4b12; background: #9a4b12; }
.margin-page .margin-history tr.margin-history-link-row > td { padding: 0; text-align: left; }
.margin-page .margin-keyword-link { padding: 20px 24px; background: #fffaf3; color: #332f2b; }
.margin-page #margin-history-notice:empty { display: none; }
.margin-page .mkl-history-notice { margin-bottom: 14px; padding: 12px 16px; border: 1px solid #eae5dd; border-radius: 6px; background: #faf8f5; }
.margin-page .mkl-history-notice :is(.mkl-note,.mkl-entry) { margin-top: 0; padding-top: 0; border-top: 0; }
.margin-page .mkl-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.margin-page .mkl-label { display: block; margin-bottom: 4px; color: #81796f; font-size: 12px; }
.margin-page .mkl-heading strong { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.margin-page .mkl-heading strong small { margin-left: 7px; color: #81796f; font-size: 12px; font-weight: 400; }
.margin-page .mkl-note { margin: 8px 0 0; color: #81796f; font-size: 12px; line-height: 1.6; }
.margin-page .mkl-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eae5dd; }
.margin-page .mkl-picker label { grid-column: 1 / -1; color: #5d402b; font-size: 12px; font-weight: 600; }
.margin-page .mkl-picker select { width: 100%; min-width: 0; min-height: 38px; padding: 8px 12px; border: 1px solid #dcd6cd; border-radius: 6px; background: #fff; color: #332f2b; font: inherit; font-size: 13px; }
.margin-page .mkl-entry { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eae5dd; }
.margin-page .mkl-entry .btn { margin-top: 9px; }
.margin-page .mkl-actions { display: flex; align-items: center; gap: 7px; }
.margin-page .mkl-picker :is(.mkl-note,.mkl-error), .margin-page .mkl-manage { grid-column: 1 / -1; }
.margin-page .mkl-manage { width: fit-content; color: #9a4b12; font-size: 12px; text-decoration: none; }
.margin-page .mkl-manage:hover { text-decoration: underline; }
.margin-page .mkl-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #b94339; font-size: 12px; }
.margin-page .mkl-record-link { display: block; margin-top: 4px; color: #9a4b12; font-size: 11px; }
.margin-page .margin-keyword-link .btn { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.margin-page .margin-keyword-link :is(button,select,a):focus-visible { outline: 2px solid #c5681e; outline-offset: 3px; }

@media (max-width: 900px) {
  #horangi-margin-simple .hm-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #horangi-margin-simple .hm-inputs { padding: 21px; }
  #horangi-margin-simple :is(.hm-result-head, .hm-result-section) { padding: 21px; }
  .margin-page .page-head .actions { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .margin-page .mkl-picker { grid-template-columns: minmax(0, 1fr); }
  .margin-page .margin-keyword-link { padding: 16px; }
  .margin-page > .notice { align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; }
  .margin-page > .notice button { margin-left: 0; }
  .commerce-surface .margin-page .margin-history { padding: 18px; }
  .margin-page .margin-history .section-head > .actions { margin-top: 5px; }
}
@media (max-width: 390px) {
  #horangi-margin-simple .hm-inputs, #horangi-margin-simple .hm-result-section, #horangi-margin-simple .hm-result-head { padding: 17px; }
  #horangi-margin-simple .hm-fields { gap: 14px 12px; }
  #horangi-margin-simple .hm-field > .hm-label { display: flex; align-content: flex-end; flex-wrap: wrap; gap: 0 3px; min-height: 39px; }
  #horangi-margin-simple .hm-wide > .hm-label { min-height: 0; }
  #horangi-margin-simple .hm-label small { margin-left: 0; }
  #horangi-margin-simple .hm-big { font-size: 30px; }
  #horangi-margin-simple .hm-total strong { font-size: 25px; }
  .margin-page .page-head .btn { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #horangi-margin-simple .hm-field input, #horangi-margin-simple .hm-result summary svg { transition: none; }
}
@media print {
  #horangi-margin-simple .hm-layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 14px; }
  #horangi-margin-simple :is(.hm-inputs, .hm-result) { break-inside: avoid; }
  .margin-page > .notice, .margin-page .margin-save-action, .margin-page .margin-history { display: none; }
}