/* Calculator: mobile-only overrides (same touch + narrow condition as the other *-mobile.css files).
   Everything lives inside the media query, so the PC design is untouched. */
@media (max-width: 899px) {
  .desktop-site .calculator-page * { min-width: 0; }

  /* hero: title and description on top, the "back to round" link as a small pill underneath (was squeezed into 3 lines) */
  .desktop-site .calculator-hero-inner { min-height: 0; padding: 22px 0 20px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
  .desktop-site .calculator-hero h1 { font-size: 28px; }
  .desktop-site .calculator-hero h1 + p { margin-top: 10px; font-size: 14px; }
  .desktop-site .calculator-back-link { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; white-space: nowrap; }

  .desktop-site .calculator-content { width: min(100% - 32px, 1280px); padding-top: 16px; }
  .desktop-site .calculator-input-pane,
  .desktop-site .calculator-result-pane { padding: 22px 16px; }
  .desktop-site .calculator-input-pane > h2 { font-size: 20px; }

  /* amount input */
  .desktop-site .calculator-amount-box { height: 64px; margin-top: 16px; padding: 0 16px; border-radius: 12px; }
  .desktop-site .calculator-amount-box input { font-size: 26px; }
  .desktop-site .calculator-amount-box > span { font-size: 16px; }

  /* label above the round picker instead of squeezed beside it */
  .desktop-site .calculator-input-meta { min-height: 0; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
  .desktop-site .calculator-input-meta > span { font-size: 13px; }
  .desktop-site .calculator-input-meta .round-select-wrap { width: 160px; }
  .desktop-site .calculator-input-meta .round-select-wrap::after { right: 16px; width: 7px; height: 7px; }
  .desktop-site .calculator-input-meta .round-select { height: 40px; border-radius: 20px; padding: 0 34px 0 16px; font-size: 14px; }

  /* rank buttons: 2 columns, the amount stays on one line, the last one spans the row */
  .desktop-site .calculator-rank-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .desktop-site .calculator-rank-options button { min-height: 48px; padding: 0 6px; border-radius: 12px; }
  .desktop-site .calculator-rank-options strong { font-size: 14px; white-space: nowrap; }
  .desktop-site .calculator-rank-options button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .desktop-site .rank-option-caption { margin-top: 10px; font-size: 12px; }

  /* tax result rows: label left, amount right, amounts never wrap ("원" used to drop to the next line) */
  .desktop-site .calculator-result h3 { font-size: 20px; margin-bottom: 8px; }
  .desktop-site .calculator-result dl > div { min-height: 50px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; font-size: 14px; }
  .desktop-site .calculator-result dd { font-size: 15px; white-space: nowrap; }
  .desktop-site .calculator-result dt small { font-size: 12px; }
  .desktop-site .calculator-result .tax-total dt { flex: 1 1 100%; }
  .desktop-site .calculator-result .tax-total dd { margin-left: auto; }

  /* net amount box: labels and the big number each stay on one line */
  .desktop-site .calculator-net-box { min-height: 0; margin-top: 16px; padding: 18px 16px; gap: 10px; border-radius: 14px; }
  .desktop-site .calculator-net-box > div { gap: 8px; }
  .desktop-site .calculator-net-box span { font-size: 13px; white-space: nowrap; }
  .desktop-site .calculator-net-box strong { font-size: clamp(19px, 6vw, 26px); white-space: nowrap; }
  .desktop-site .calculator-net-box small { font-size: 12px; white-space: nowrap; }
  .desktop-site .calculator-rounding-note { font-size: 12px; }
}