/* ==========================================================================
   工资薪金计算器 — 页面级样式
   公共部分（.calc / .wf / .quota / .ded）来自 styles.css 与 annual.css，
   这里只放这一页特有的：小号金额输入、免税线构成表、逐月预扣表、公式块。
   ========================================================================== */

/* ---------- 输入区 ---------- */
/* 金额框直接用 annual.css 的 .ded-row__field（带框、定宽、右对齐），
   与综合所得页保持一致，不再另建一套小号样式。 */
.calc__input .setting {
  gap: 12px;
}

.calc__input .setting__text {
  flex: 1 1 auto;
}

/* 逐项填写面板里的七项 */
.adv__panel .ded-list {
  margin-top: 0;
  border-top: 0;
}

.adv__panel .ded:last-child {
  border-bottom: 0;
}

/* ---------- 免税线构成表 ---------- */
.line-table {
  max-width: 780px;
  margin-bottom: 26px;
  border-top: 1px solid var(--hair);
}

.line-table__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
}

.line-table__k {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}

.line-table__v {
  flex: 0 0 auto;
  min-width: 92px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.line-table__n {
  flex: 0 0 auto;
  width: 200px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

.line-table__row--sum {
  border-bottom: 0;
  font-weight: 600;
}

.line-table__row--sum .line-table__v {
  color: var(--accent);
}

@media (max-width: 720px) {
  .line-table__row {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  .line-table__k {
    flex: 1 1 auto;
  }

  .line-table__v {
    min-width: 0;
  }

  .line-table__n {
    width: 100%;
    font-size: 11.5px;
  }
}

/* ---------- 公式块 ---------- */
.formula {
  max-width: 780px;
  margin-bottom: 26px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-pane);
  background: var(--bg-elevated);
}

.formula__row + .formula__row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

.formula__k {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--text-3);
}

.formula__v {
  display: block;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
}

/* ---------- 正文段落 ---------- */
.prose {
  max-width: 720px;
}

.prose p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
}

.prose p + p {
  margin-top: 14px;
}

.prose b {
  color: var(--text);
  font-weight: 600;
}

/* ---------- 逐月预扣表 ---------- */
.months {
  margin-top: 14px;
  padding: 12px 14px 8px;
  border-radius: 14px;
  background: var(--inset);
}

.months__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.months__t {
  font-size: 13px;
  color: var(--text-2);
}

.months__hint {
  font-size: 11px;
  color: var(--text-3);
}

.months__grid,
.months__row,
.months__foot {
  display: grid;
  /* 末列要放得下「¥2,400,000.00」（88px 时会溢出 1.4px） */
  grid-template-columns: 42px 1fr 1fr 100px;
  gap: 12px;
  align-items: baseline;
}

.months__th {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.months__th--n {
  text-align: right;
}

.months__row {
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 12.5px;
}

.months__row:last-child {
  border-bottom: 0;
}

.months__m {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.months__row .months__tax,
.months__row .months__net,
.months__row .months__cum {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.months__row .months__tax {
  color: var(--text);
}

.months__row .months__net,
.months__row .months__cum {
  color: var(--text-2);
}

/* 跨档的月份：税率跳了，当月税额明显变多，标出来才看得懂 */
.months__row.is-jump .months__tax {
  color: var(--accent);
  font-weight: 600;
}

.months__row.is-jump .months__m {
  color: var(--accent);
}

.months__foot {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--hair-strong);
  font-size: 12px;
  color: var(--text-3);
}

.months__sum {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .months__grid,
  .months__row,
  .months__foot {
    /* 首列要放得下「12 月」，36px 会把月份挤成半截 */
    grid-template-columns: 46px 1fr 1fr;
    gap: 8px;
  }

  .months__row {
    font-size: 12px;
  }

  .months__m {
    font-size: 11.5px;
  }

  .months__cum {
    display: none;
  }

  .months__hint {
    display: none;
  }
}

/* ---------- 提示条 ---------- */
.notice__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-3);
}

.notice--line {
  margin-top: 12px;
  background: var(--accent-weak);
  color: var(--text-2);
}

.notice--line .notice__dot {
  background: var(--accent);
}

/* 月薪落在免税线内：进度条转绿，和「要缴税」区分开 */
.quota__fill.is-safe {
  background: #248a3d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .quota__fill.is-safe {
    background: #30d158;
  }
}

:root[data-theme="dark"] .quota__fill.is-safe {
  background: #30d158;
}

/* ---------- 布局微调 ----------
   这一页左列只有一个大输入 + 三行设置，右列有逐月表和明细，
   按内容配比把左列收窄，避免左边大片留白。
   必须限定在桌面宽度内：styles.css 用媒体查询把窄屏改成单列，
   这里的规则在文件后面，不加媒体查询会把它盖掉，窄屏就会挤成两半。 */
@media (min-width: 781px) {
  .calc__body {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.2fr);
  }
}

/* .notice 是 display:flex，单纯写 hidden 属性压不住，会留一条空条 */
.notice[hidden] {
  display: none !important;
}

/* ---------- 三险一金（按城市 / 按险种） ---------- */
.si {
  margin-top: 14px;
  padding: 12px 14px 11px;
  border-radius: 14px;
  background: var(--inset);
}

.si__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.si__title {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
}

.si__amt {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}

.si__city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.si__k {
  font-size: 12.5px;
  color: var(--text-3);
}

.si__sel select {
  min-width: 150px;
}

.si__note {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--text-3);
  text-align: right;
}

.si__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.si__modes[hidden] {
  display: none !important;
}

.si__mode {
  padding: 5px 10px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.si__mode.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}

/* 下限档位：只在「按下限」时出现，缩进一格表明它是按下限的细分 */
.si__pcts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding-left: 10px;
}

/* display:flex 会盖掉 UA 的 [hidden]{display:none}，必须显式压回去 */
.si__pcts[hidden] {
  display: none !important;
}

.si__pcts-k {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.si__pct {
  padding: 3px 9px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}

.si__pct:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.si__pct.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 600;
}

.si__hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}

.si__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.si__item {
  padding: 8px 0;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
}

.si__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.si__l {
  min-width: 0;
  color: var(--text-2);
  white-space: nowrap;
}

.si__l em {
  margin-left: 7px;
  font-style: normal;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.si__v {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 第二行：基数与百分比就地可改，桌面和窄屏都是同一套 */
.si__calc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 5px;
  margin-top: 3px;
}

.si__calc-k {
  font-size: 11px;
  color: var(--text-3);
}

.si__calc-k[hidden],
.si__fld[hidden],
.si__flag[hidden],
.si__undo[hidden] {
  display: none !important;
}

.si__in {
  width: 80px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.si__in:hover {
  border-color: var(--hair-strong);
}

.si__in:focus {
  outline: none;
  border-color: var(--accent);
  color: var(--text);
}

.si__fld--pct {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.si__in--pct {
  width: 47px;
  padding-right: 3px;
  text-align: right;
}

.si__pctsign {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-3);
}

.si__undo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
}

.si__undo:hover {
  background: var(--row-hover);
  color: var(--accent);
}

.si__flag {
  font-style: normal;
  font-size: 10.5px;
  color: #c93400;
}

/* 失业与养老共用社保基数，这里只展示不重复开口子 */
.si__shared {
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.si__shared i {
  margin-left: 5px;
  font-style: normal;
  font-size: 10px;
  color: var(--text-3);
}

.si__item.is-over .si__in {
  border-color: var(--hair-strong);
}

/* 公积金比例：因城而异（上海只有 5%–7%），就地选 */
.si__rate {
  position: relative;
  display: inline-block;
}

.si__rate-sel {
  margin-left: 6px;
  padding: 1px 11px 1px 1px;
  border: 0;
  border-bottom: 1px dashed var(--hair-strong);
  border-radius: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.si__rate::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -3px;
  border-right: 1.2px solid var(--text-3);
  border-bottom: 1.2px solid var(--text-3);
  transform: rotate(45deg);
  pointer-events: none;
}

.si__rate-sel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 数据来源收在折叠里，平时不占版面 */
.si__srcd {
  margin-top: 8px;
}

.si__srcd > summary {
  width: fit-content;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px dotted var(--hair-strong);
}

.si__srcd > summary::-webkit-details-marker {
  display: none;
}

.si__srcd > summary:hover {
  color: var(--text-2);
}

.si__src {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.55;
}

.si__fb {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px dashed var(--hair-strong);
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
}

.si__fb em {
  font-style: normal;
  color: var(--accent);
}

/* ---------- 专项附加扣除：合计数与逐项表框在一起 ---------- */
.ded-card {
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
}

.ded-card .setting {
  padding: 10px 0 9px;
  border-bottom: 0;
}

.ded-card .setting__label {
  white-space: nowrap;
}

.ded-card .adv {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid var(--hair);
}

.ded-card .adv > summary {
  padding: 9px 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.ded-card .adv[open] > summary {
  color: var(--text-2);
}

.ded-card .adv__panel {
  margin-top: 0;
  padding: 2px 0 10px;
  border-top: 0;
}

.ded-card .adv__panel .ded-list {
  margin-top: 0;
}

/* 窄屏：卡片内宽被吃掉一截，标题与金额框改成上下排，别把标题挤成两行 */
@media (max-width: 420px) {
  .setting {
    flex-wrap: wrap;
    row-gap: 7px;
  }

  .setting__text {
    flex: 1 1 100%;
  }

  .ded-card .ded-row__field,
  .setting > .ded-row__field {
    width: 140px;
  }
}

/* ---------- 计算过程（公式块） ---------- */
.fx {
  margin-top: 14px;
  padding: 11px 13px 5px;
  border: 1px solid var(--hair);
  border-radius: 13px;
}

.fx__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.fx__t {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}

.fx__hint {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.fx__body {
  margin-top: 3px;
}

.fx__empty {
  margin: 4px 0 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-3);
}

.fx__row {
  padding: 6px 0;
  border-top: 1px solid var(--hair);
}

.fx__row:first-child {
  border-top: 0;
}

.fx__k {
  margin-right: 7px;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}

/* 带逐项算式的那一行，标签单独占一行，下面的小算式才好对齐 */
.fx__row--list .fx__k {
  display: block;
  margin: 0 0 2px;
}

.fx__e {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.fx__e b {
  font-weight: 600;
  color: var(--text);
}

.fx__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fx__line b {
  white-space: nowrap;
}

.fx__line--sum {
  margin-top: 2px;
  padding-top: 3px;
  border-top: 1px dashed var(--hair);
  color: var(--text-3);
}

.fx__sub {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-3);
}

/* ---------- 月份切换 ---------- */
/* 空状态（还没填月薪）下这几块没有意义，整块收起来 */
.months[hidden],
.annual[hidden],
.wfbox[hidden] {
  display: none !important;
}

.monthpick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 13px 0 2px;
}

.monthpick[hidden] {
  display: none;
}

.mp {
  min-width: 28px;
  padding: 4px 6px;
  border: 1px solid var(--hair-strong);
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.mp:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mp:first-child {
  padding: 4px 9px;
}

.mp.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
  font-weight: 500;
}

/* ---------- 逐月表可点 ---------- */
.months__row {
  cursor: pointer;
}

.months__row:hover {
  background: var(--row-hover);
}

.months__row.is-sel {
  background: var(--key-tint);
}

.months__row.is-sel .months__m {
  color: var(--accent);
  font-weight: 500;
}

/* ---------- 全年汇总条 ---------- */
.annual {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--inset-strong);
  font-size: 12px;
  color: var(--text-3);
}

.annual__t {
  color: var(--text-2);
}

.annual__i b {
  margin-left: 3px;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- 全年明细折叠 ---------- */
.wfbox {
  margin-top: 10px;
}

.wfbox > summary {
  padding: 9px 0;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}

.wfbox > summary em {
  margin-left: 8px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-3);
}

@media (max-width: 380px) {
  .si__k {
    white-space: nowrap;
  }

  .si__sel select {
    min-width: 104px;
  }

  .si__mode {
    padding: 4px 7px;
    font-size: 11.5px;
  }

  .si__pcts {
    gap: 5px;
    padding-left: 0;
  }

  .si__pcts-k {
    font-size: 11px;
  }

  .si__pct {
    padding: 3px 7px;
    font-size: 11px;
  }

  .si__item {
    font-size: 12px;
  }

  .si__in {
    width: 72px;
  }

  .si__in--pct {
    width: 44px;
  }

  .si__calc {
    gap: 3px 4px;
  }

  .si__l em {
    margin-left: 5px;
  }

  .fx__k {
    font-size: 11px;
  }

  .fx__e {
    font-size: 11.5px;
  }

  .mp {
    min-width: 26px;
    padding: 4px 5px;
    font-size: 11.5px;
  }
}

/* ==========================================================================
   免税 / 应税 双色、个税强调、单位缴费、基数档位
   ========================================================================== */

/* ---------- 免税线：绿色 = 免税，蓝色 = 要缴税 ---------- */
.quota__bar {
  display: flex;
  gap: 0;
}

.quota__fill {
  height: 100%;
  border-radius: 999px 0 0 999px;
  background: #248a3d;
}

/* 只有免税部分、没有应税部分时，右端也要圆 */
.quota__fill:last-child,
.quota__fill[style*="100%"] {
  border-radius: 999px;
}

.quota__tax {
  flex: 1 1 auto;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: #0071e3;
  opacity: 0.85;
}

.quota__tax[hidden] {
  display: none;
}

.quota__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -2px 0 8px;
  font-size: 11.5px;
  color: var(--text-3);
  flex-wrap: wrap;
}

.quota__lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.quota__lg i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.quota__lg--free i { background: #248a3d; }
.quota__lg--tax i { background: #0071e3; }

.quota__lg b {
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .quota__fill,
:root[data-theme="dark"] .quota__lg--free i { background: #30d158; }

:root[data-theme="dark"] .quota__tax,
:root[data-theme="dark"] .quota__lg--tax i { background: #0a84ff; }

/* ---------- 个税：产生了就摆出来，别让人在算式里找 ---------- */
.taxpill {
  display: inline-flex;
  /* 父级是纵向 flex，不写 align-self 会被拉成通栏，药丸就变成一条横带 */
  align-self: flex-start;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  margin-top: 10px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(175, 82, 222, 0.12);
  color: #8e44ad;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.taxpill__v {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

:root[data-theme="dark"] .taxpill {
  background: rgba(191, 90, 242, 0.18);
  color: #bf5af2;
}

.taxpill[hidden] { display: none !important; }

/* ---------- 逐月表：多一列「累计免税」 ---------- */
.months__grid,
.months__row,
.months__foot {
  grid-template-columns: 42px 1fr 1fr 96px 96px;
}

.months__row .months__ex,
.months__foot .months__ex {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #248a3d;
}

:root[data-theme="dark"] .months__row .months__ex,
:root[data-theme="dark"] .months__foot .months__ex {
  color: #30d158;
}

/* ---------- 基数：按上年月均 / 社平档位 ---------- */
.si__last,
.si__tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  flex-wrap: wrap;
}

.si__last[hidden],
.si__tier[hidden] {
  display: none !important;
}

.si__last-k,
.si__tier-k {
  font-size: 12px;
  color: var(--text-2);
}

.si__last-f {
  flex: 0 0 auto;
}

.si__tier-sel select {
  padding: 6px 26px 6px 9px;
  font-size: 12.5px;
}

.si__tier-note {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- 企业（单位）缴费 ---------- */
.er {
  margin-top: 14px;
  padding: 13px 14px 12px;
  border-radius: 14px;
  background: var(--inset);
}

.er__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.er__t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}

.er__v {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.er__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.er__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  color: var(--text-2);
}

.er__item:first-child { border-top: 0; }

.er__item em {
  font-style: normal;
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.er__item b {
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.er__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--hair-strong);
}

.er__sum-k {
  font-size: 12.5px;
  color: var(--text-2);
}

.er__sum-k em {
  font-style: normal;
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.er__sum-v {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.er__note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-3);
}

.er__note[hidden] { display: none !important; }

/* 窄屏：逐月表藏掉「累计应税」，把位置让给累计免税 */
@media (max-width: 600px) {
  .months__grid,
  .months__row,
  .months__foot {
    grid-template-columns: 46px 1fr 1fr 1fr;
  }

  .months__row { font-size: 12px; }

  .months__ex { display: block; }
  .months__cum { display: none; }
}

@media (max-width: 380px) {
  .months__row .months__ex,
  .months__foot .months__ex { font-size: 11px; }
}

/* 320px 级别放不下四列数字：只留月份 / 个税 / 到手，累计免税与累计应税都收起来。
   390px 起（主流手机宽度）仍能看到累计免税。
   ⚠ 必须排在下面 max-width:600px 那条之后，否则被它的 4 列声明盖掉，剩个空轨道。 */

/* 累计免税列的紧凑写法：桌面用 ¥ 与两位小数，窄屏用整数，避免把表格撑出边界 */
.months__ex .ex-short { display: none; }
.months__ex .ex-full { display: inline; }

.months__tax,
.months__net,
.months__ex,
.months__cum {
  white-space: nowrap;
}

/* 781–900px 是两栏布局里最挤的一段：结果栏只有约 370px，
   五列按 96px 排会顶出去，这里把后两列收窄、数字降半号，仍然一屏排得下。 */
@media (min-width: 781px) and (max-width: 900px) {
  .months__grid,
  .months__row,
  .months__foot {
    grid-template-columns: 38px 1fr 1fr 84px 84px;
    gap: 4px;
  }

  .months__th { font-size: 10px; }
  .months__row { font-size: 11.5px; }
  .months__ex .ex-full { display: none; }
  .months__ex .ex-short { display: inline; }
}

@media (max-width: 600px) {
  .months__grid,
  .months__row,
  .months__foot {
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .months__ex .ex-full { display: none; }
  .months__ex .ex-short { display: inline; }

  .months__th { font-size: 9.5px; }
  .months__row { font-size: 11px; }
}

@media (max-width: 360px) {
  .months__grid,
  .months__row,
  .months__foot {
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
  }

  .months__ex,
  .months__cum {
    display: none !important;
  }
}

/* 合计行：与明细用同一条底线，但数字加粗一档 */
.er__item--sum {
  border-top: 1px solid var(--hair-strong);
  margin-top: 2px;
  padding-top: 9px;
  color: var(--text-2);
}

.er__item--sum b {
  font-weight: 650;
}

/* 「工资 ＋ 单位缴费」这行说明在窄屏会把「费」挤到下一行，强制它整体换行 */
.er__sum {
  flex-wrap: wrap;
}

.er__sum-k {
  white-space: nowrap;
}

.er__sum-v {
  margin-left: auto;
}

/* 企业卡在 320 下：标题别折、基数×比例跟标签同一行 */
.er__head {
  flex-wrap: wrap;
}

.er__t {
  white-space: nowrap;
}

.er__item > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.er__item em {
  white-space: nowrap;
}

.er__item b {
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .er__item em { font-size: 10.5px; }
}