/* css/tax.css — 세금은 어떻게 걷히나.
   civics.css를 함께 싣고 그 위에 얹는다. 예산 지면과 달리 여기서 어려운 것은
   숫자의 크기가 아니라 이름의 개수다. 스물다섯 개가 한 화면에 들어와야 하므로
   카드를 작게 잡고, 축을 누르면 해당하지 않는 것이 흐려지도록 했다.
   지우지 않고 흐리게만 하는 것은 전체 속 위치를 계속 보여주기 위해서다. */

/* ── ① 네 순간 ── */
.tx-moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tx-moment {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 16px 17px;
}
.tx-moment-n {
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--gold);
}
.tx-moment-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-faint);
}
.tx-moment-d {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-dim); word-break: keep-all;
  margin-top: 3px;
}
.tx-moment-ex {
  font-size: 11.5px; color: var(--ink-faint); word-break: keep-all;
  border-top: 1px solid var(--line); padding-top: 7px; margin-top: auto;
}

/* ── ② 스물다섯 개의 이름 ── */
.tx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tx-chip {
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  padding: 6px 13px; font-family: inherit; font-size: 12.5px; color: var(--ink-dim);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.tx-chip:hover { border-color: var(--gold); color: var(--gold); }
.tx-chip.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }

.tx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tx-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-card);
  padding: 13px 13px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s, opacity .2s;
}
.tx-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.tx-card-n {
  font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--ink);
  word-break: keep-all; line-height: 1.4;
}
.tx-card:hover .tx-card-n { color: var(--gold); }
.tx-card-tags {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint);
  word-break: keep-all; line-height: 1.5;
}
.tx-card.is-big { border-color: var(--gold); background: var(--gold-soft); }
.tx-card.is-local { border-style: dashed; }
.tx-card.is-purpose .tx-card-tags { color: var(--gold); }
.tx-card.is-off { opacity: .22; }
.tx-card.is-off:hover { opacity: .5; }

.tx-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
  font-size: 11.5px; color: var(--ink-faint);
}
.tx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tx-legend i {
  width: 15px; height: 11px; border-radius: 3px; border: 1px solid var(--line);
  display: inline-block;
}
.tx-legend i.k-big { border-color: var(--gold); background: var(--gold-soft); }
.tx-legend i.k-local { border-style: dashed; }

/* ── ③ 네 개의 축 ── */
.tx-axes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tx-axis {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 17px 19px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.tx-axis:hover { border-color: var(--gold); transform: translateY(-2px); }
.tx-axis-q {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint);
}
.tx-axis-pair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-axis-pair em {
  font-style: normal; font-family: var(--serif); font-weight: 700; font-size: 16px;
  color: var(--ink);
}
.tx-axis:hover .tx-axis-pair em { color: var(--gold); }
.tx-axis-pair i { font-style: normal; color: var(--ink-faint); font-size: 13px; }
.tx-axis-d {
  font-size: 12.5px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all;
}

/* ── ④ 누진세의 계단 ── */
.tx-modes { display: flex; gap: 6px; margin-bottom: 16px; }
.tx-mode {
  border: 1px solid var(--line); border-radius: 8px; background: transparent;
  padding: 8px 15px; font-family: inherit; font-size: 13px; color: var(--ink-dim);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.tx-mode.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }

.tx-input-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 15px 18px; margin-bottom: 14px;
}
.tx-input-row label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint);
}
.tx-input-row input[type="number"] {
  flex: 1; min-width: 130px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  padding: 9px 12px; font-family: var(--mono); font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tx-input-row input[type="number"]:focus { outline: none; border-color: var(--gold); }
.tx-input-unit {
  font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.tx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tx-presets > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-preset {
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  padding: 5px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.tx-preset:hover { border-color: var(--gold); color: var(--gold); }

/* 참고표 — 계산이 아니라 고정된 어림값이다.
   계산 결과(tx-out)와 시각적으로 구별되도록 테두리를 점선으로 두고
   금액에 강조색을 쓰지 않았다. 이것을 결과로 오해하면 안 되기 때문이다. */
.tx-example {
  border: 1px dashed var(--line); border-radius: 12px; padding: 16px 18px;
  margin-bottom: 20px;
}
.tx-ex-h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-faint);
  margin: 0 0 12px;
}
.tx-ex-tb { width: 100%; border-collapse: collapse; }
.tx-ex-tb th, .tx-ex-tb td {
  text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-ex-tb thead th {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); font-weight: 400;
  letter-spacing: .04em;
}
.tx-ex-tb tbody th {
  text-align: left; font-family: var(--serif); font-weight: 700; font-size: 13px;
  color: var(--ink);
}
.tx-ex-tb tbody tr:last-child th, .tx-ex-tb tbody tr:last-child td { border-bottom: 0; }
.tx-ex-foot {
  font-size: 11.5px; line-height: 1.8; color: var(--ink-faint); word-break: keep-all;
  margin: 12px 0 0;
}

.tx-out-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }.tx-out, .tx-fact {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 15px 16px;
}
.tx-out.is-hot, .tx-fact.is-hot { border-color: var(--gold); background: var(--gold-soft); }
.tx-out-k, .tx-fact-k { font-size: 11.5px; color: var(--ink-faint); word-break: keep-all; }
.tx-out-v, .tx-fact-v {
  font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.tx-out.is-hot .tx-out-v, .tx-fact.is-hot .tx-fact-v { color: var(--gold); }
.tx-out-s, .tx-fact-s {
  font-size: 11px; color: var(--ink-dim); word-break: keep-all; line-height: 1.55;
}

.tx-steps { display: flex; flex-direction: column; gap: 4px; }
.tx-step {
  display: grid; grid-template-columns: 46px 150px 1fr 92px; align-items: center; gap: 11px;
  padding: 6px 8px; border-radius: 7px; opacity: .38;
}
.tx-step.is-on { opacity: 1; background: var(--gold-soft); }
.tx-step-r {
  font-family: var(--mono); font-size: 12.5px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.tx-step-band {
  font-size: 11.5px; color: var(--ink-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tx-step-bar { height: 15px; background: var(--line); border-radius: 4px; overflow: hidden; }
.tx-step-bar i { display: block; height: 100%; background: var(--ink-faint); }
.tx-step.is-on .tx-step-bar i { background: var(--gold); }
.tx-step-v {
  font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums;
}

.tx-stair-sum {
  border-left: 2px solid var(--gold); padding: 2px 0 2px 13px; margin: 18px 0 0;
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); word-break: keep-all;
}
.tx-stair-sum b { color: var(--ink); }
.tx-stair-note {
  border: 1px dashed var(--line); border-radius: 11px; padding: 14px 16px; margin: 14px 0 0;
  font-size: 12px; line-height: 1.85; color: var(--ink-faint); word-break: keep-all;
}

/* ── ⑤ 세수 구조 ── */
.tx-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.tx-revs { display: flex; flex-direction: column; gap: 5px; }
.tx-rev {
  display: grid; grid-template-columns: 128px 1fr 62px 62px; align-items: center; gap: 11px;
  border: 0; background: transparent; padding: 6px; border-radius: 7px;
  cursor: pointer; font-family: inherit; color: inherit; text-align: left;
  transition: background .15s;
}
.tx-rev:hover { background: var(--gold-soft); }
.tx-rev-n { font-size: 13px; color: var(--ink); word-break: keep-all; }
.tx-rev-bar { height: 17px; background: var(--line); border-radius: 4px; overflow: hidden; }
.tx-rev-bar i { display: block; height: 100%; background: var(--ink-faint); }
.tx-rev:hover .tx-rev-bar i { background: var(--gold); }
.tx-rev-v {
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
  text-align: right; font-variant-numeric: tabular-nums;
}
.tx-rev-d {
  font-family: var(--mono); font-size: 11px; color: var(--gold);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── ⑥ 조세법률주의 ── */
.tx-quote {
  margin: 0 0 20px; padding: 18px 22px;
  border-left: 3px solid var(--gold); background: var(--gold-soft);
  border-radius: 0 10px 10px 0;
  font-family: var(--serif); font-size: 15px; line-height: 1.9; color: var(--ink);
  word-break: keep-all;
}
.tx-cal { list-style: none; margin: 22px 0 0; padding: 0; }
.tx-cal-item {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.tx-cal-item:last-child { border-bottom: 0; }
.tx-cal-item.is-key {
  background: var(--gold-soft); border-radius: 9px; padding-left: 12px; padding-right: 12px;
}
.tx-cal-m {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold);
  padding-top: 2px; word-break: keep-all; line-height: 1.55;
}
.tx-cal-body { display: flex; flex-direction: column; gap: 3px; }
.tx-cal-t { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.tx-cal-who { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.tx-cal-d {
  font-size: 13px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all;
  margin-top: 2px;
}
.tx-signal {
  border: 1px dashed var(--gold); border-radius: 11px; padding: 15px 17px; margin: 20px 0 0;
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); word-break: keep-all;
}

/* ── ⑦ 부담률 ── */
.tx-burdens { display: flex; flex-direction: column; gap: 7px; margin: 20px 0; }
.tx-burden {
  display: grid; grid-template-columns: 200px 1fr 56px; align-items: center; gap: 12px;
}
.tx-burden-n { font-size: 12.5px; color: var(--ink-dim); word-break: keep-all; }
.tx-burden.is-kr .tx-burden-n { color: var(--ink); font-weight: 500; }
.tx-burden-bar { height: 17px; background: var(--line); border-radius: 4px; overflow: hidden; }
.tx-burden-bar i { display: block; height: 100%; background: var(--ink-faint); }
.tx-burden.is-kr .tx-burden-bar i { background: var(--gold); }
.tx-burden-v {
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
  text-align: right; font-variant-numeric: tabular-nums;
}
.tx-gap { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: txg; }
.tx-gap li {
  position: relative; counter-increment: txg; padding: 0 0 18px 38px;
  border-left: 1px solid var(--line); margin-left: 11px;
}
.tx-gap li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tx-gap li::before {
  content: counter(txg); position: absolute; left: -11px; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
}
.tx-gap h3 {
  font-family: var(--serif); font-size: 15px; margin: 0 0 5px; color: var(--ink);
  word-break: keep-all;
}
.tx-gap p { font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }
.tx-caution {
  border: 1px dashed var(--line); border-radius: 11px; padding: 15px 17px; margin: 0;
  font-size: 12.5px; line-height: 1.9; color: var(--ink-faint); word-break: keep-all;
}

/* ── 좁은 화면 ── */
@media (max-width: 980px) {
  .tx-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .tx-moments { grid-template-columns: repeat(2, 1fr); }
  .tx-axes { grid-template-columns: 1fr; }
  .tx-out-row, .tx-facts { grid-template-columns: repeat(2, 1fr); }
  .tx-grid { grid-template-columns: repeat(3, 1fr); }
  .tx-burden { grid-template-columns: 148px 1fr 50px; gap: 9px; }
}
@media (max-width: 640px) {
  .tx-grid { grid-template-columns: repeat(2, 1fr); }
  .tx-out-v, .tx-fact-v { font-size: 18px; }
  .tx-step { grid-template-columns: 40px 1fr 76px; gap: 8px; }
  .tx-step-band { display: none; }
  .tx-rev { grid-template-columns: 96px 1fr 52px 50px; gap: 8px; }
  .tx-rev-n { font-size: 12px; }
  .tx-cal-item { grid-template-columns: 1fr; gap: 4px; }
  .tx-cal-m { padding-top: 0; }
  .tx-burden { grid-template-columns: 1fr; gap: 3px; }
  .tx-burden-v { text-align: left; }
  .tx-ex-tb th, .tx-ex-tb td { font-size: 11.5px; padding: 7px 3px; }
  .tx-ex-tb tbody th { font-size: 12px; }
}