:root {
  --bg: #f4f1f4;
  --accent: #0037b0;
  --accent-ink: #ffffff;
  --accent-soft: #f6f2f7;
  --good: #17633d;
  --warn: #7f2500;
  --bad: #ba1a1a;
  color-scheme: light;

  --sk-line-strong: #747686;
  --sk-font-ko: "Hanken Grotesk", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --sk-font-en: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sk-font-de: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sk-font-es: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sk-font-ja: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  --sk-font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sk-fab-clearance: calc(var(--touch) * 2);

  --sk-hi: #ffffff;
  --sk-lo: #dcd7dd;
  --sk-up: -3px -3px 8px var(--sk-hi), 3px 3px 8px var(--sk-lo);
  --sk-up-sm: -2px -2px 5px var(--sk-hi), 2px 2px 5px var(--sk-lo);
  --sk-in: inset 2px 2px 5px var(--sk-lo), inset -2px -2px 5px var(--sk-hi);

  --gap-line: var(--v-line);
  --gap-item: var(--v-item);
  --gap-block: var(--v-block);
  --gap-section: var(--v-section);

}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --accent: #60a5fa;
    --accent-ink: #0b1a2e;
    --accent-soft: #27272a;
    --good: #83d9a6;
    --warn: #ffb59c;
    --bad: #ffb4ab;
    --sk-line-strong: #44444c;
    --sk-up: none;
    --sk-up-sm: none;
    --sk-in: none;
    color-scheme: dark;
  }
}


@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2190-21BB, U+2212,
    U+2215, U+25A0-25FF, U+2713, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid var(--line); border-radius: var(--r1); }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sk-font-ko);
  font-size: var(--t3);
  line-height: var(--gap-line);
}
:lang(en) { font-family: var(--sk-font-en); }
:lang(de) { font-family: var(--sk-font-de); }
:lang(es) { font-family: var(--sk-font-es); }
:lang(ja) { font-family: var(--sk-font-ja); }

body {
  display: grid;
  grid-template-columns: minmax(0, 100%);
  justify-items: center;
  align-content: start;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
}
body, input, select, textarea, button { font-size: var(--t3); }

[hidden] { display: none !important; }

h1 { font-size: var(--t6); line-height: var(--t6-lh); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; letter-spacing: -0.01em; }
:is(h1, h2, h3):lang(en), :is(h1, h2, h3):lang(de), :is(h1, h2, h3):lang(es) { letter-spacing: -0.03em; }
h1, h2, h3 { overflow-wrap: break-word; }
:is(h1, h2, h3):lang(de) { hyphens: auto; }
p, dd, li { overflow-wrap: break-word; }
dd + dt { margin-top: var(--gap-block); }
small, .hint, .note, .statusline, .kicker, .sample, .source-line { font-size: var(--t2); color: var(--ink-2); }
dt { font-weight: 600; }
dd { color: var(--ink-2); }
ul, ol { list-style: none; }

.num, .numeric, input, output, table, .formula, code, kbd,
.sample, .statusline, .savedd, .savedbase, .condline, #toolcount, .count {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.num, .numeric, .formula, code, kbd, table td, table th, input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: var(--sk-font-num);
}
.num, .numeric { text-align: right; }

[id] { scroll-margin-top: var(--anchor-top); }

a { color: var(--accent); text-underline-offset: var(--s1); }
nav a, :is(p, li, dd, dt, span, div, section, td) > a:only-child, .site a, .menu-panel a, .site-footer a, .crumbs a, .tools-other a, .tool, .skip {
  display: inline-flex; align-items: center; min-width: var(--touch); min-height: var(--touch);
}
a:hover { text-decoration-thickness: calc(var(--s1) / 2); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: calc(var(--s1) / 2) solid var(--accent);
  outline-offset: calc(var(--s1) / 2);
}

button, .button, input, select, textarea {
  font-family: inherit;
  line-height: var(--gap-line);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  color: var(--ink);
}
input, select, textarea {
  font-size: var(--t4); line-height: var(--t5-lh);
  border: calc(var(--s1) * 0.375) solid var(--ink);
  background: var(--bg);
  box-shadow: var(--sk-in);
}
input { font-weight: 600; }
button, .button {
  display: inline-flex; justify-content: center; align-items: center;
  font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--accent); background: transparent;
  border: calc(var(--s1) * 0.375) solid var(--accent);
  box-shadow: var(--sk-up-sm);
}
button:hover:not(:disabled), .button:hover, .btn-sec:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
input:hover:enabled, select:hover:enabled, textarea:hover:enabled { border-color: var(--accent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
button:disabled, .btn:disabled { opacity: .35; cursor: default; }
input:disabled, select:disabled, textarea:disabled { color: var(--ink-2); background: var(--bg); border-color: var(--line); cursor: default; }
input, select, textarea { width: 100%; min-width: 0; }
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
::placeholder { color: var(--ink-2); opacity: 1; }
textarea { resize: vertical; min-height: calc(var(--touch) * 2); font-weight: 400; }
select { appearance: none; padding-right: var(--s6); background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--s4) center, right calc(var(--s4) - var(--s1) + 1px) center;
  background-size: var(--s1) var(--s1), var(--s1) var(--s1);
  background-repeat: no-repeat;
}

button.primary, .button.primary, .cta, .btn-pri {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
button.primary:hover:not(:disabled), .button.primary:hover, .cta:hover, .btn-pri:hover:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
button.danger, .danger { color: var(--bad); border-color: var(--bad); background: transparent; }
button.danger:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--bad); color: var(--bad); }
button.text, .button.text, .btn-txt { background: transparent; border-color: transparent; color: var(--ink-2); padding-inline: var(--s2); box-shadow: none; }
button.text:hover:not(:disabled), .btn-txt:hover:not(:disabled) { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
button[aria-pressed="true"], .is-selected {
  color: var(--accent); border-color: var(--accent); border-bottom-width: var(--s1);
}

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  flex: 0 0 var(--s5); width: var(--s5); height: var(--s5);
  min-width: var(--s5); min-height: var(--s5);
  padding: 0; position: relative;
  background: var(--surface);
  border: calc(var(--s1) / 2) solid var(--control-off);
  box-shadow: none;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--accent); background: var(--accent); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-ink);
  clip-path: polygon(14% 46%, 38% 70%, 86% 22%, 96% 32%, 38% 90%, 4% 56%);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: var(--s1);
  border-radius: 50%; background: var(--accent-ink);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { border-color: var(--line); background: var(--bg); }

.error, [aria-invalid="true"] { border-color: var(--bad); }
.error-text { color: var(--bad); font-size: var(--t2); }
.warning { color: var(--warn); }
.success { color: var(--good); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


.site-header {
  width: 100%;
  height: calc(var(--s4) * 4);
  display: grid;
  justify-items: center;
  background: var(--surface);
  border-bottom: calc(var(--s1) / 4) solid var(--line);
  box-shadow: var(--sk-up-sm);
}
.header-inner {
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  padding-inline: var(--gutter);
  display: flex;
  column-gap: var(--s2);
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.site { display: flex; align-items: center; min-width: 0; }
.site a {
  display: inline-flex; align-items: center; column-gap: var(--s2);
  font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600;
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.04em;
}
.site a img { flex: none; width: var(--t4); height: var(--t4); border-radius: 0; transform: translateY(calc(var(--s1) / 4)); }
.site a:hover { text-decoration: underline; }

.header-nav { display: grid; grid-template-columns: 1fr auto; flex: 1 1 auto; min-width: 0; column-gap: var(--s2); align-items: center; }
.header-nav .menu-tools { grid-column: 1; justify-self: start; }
@media (max-width: 379px) {
  .header-nav .menu-tools { min-width: 0; }
  .header-nav .menu-tools > summary { white-space: normal; text-align: start; }
}
.header-nav .language { grid-column: 2; }
.menu { position: relative; border: 0; background: var(--surface); }
.menu { align-self: center; }
.menu > summary {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s2); font-size: var(--t2); line-height: var(--gap-line);
  min-width: var(--touch); min-height: var(--touch);
  white-space: nowrap; cursor: pointer; font-weight: 500; color: var(--ink-2);
}
.menu > summary:hover { color: var(--ink); text-decoration: underline; }
.menu[open] > summary { color: var(--ink); text-decoration: underline; }
.menu > summary { column-gap: var(--s2); }
.menu > summary::after {
  content: ""; flex: none; width: var(--s2); height: var(--s2);
  border-right: calc(var(--s1) / 2) solid currentColor; border-bottom: calc(var(--s1) / 2) solid currentColor;
  transform: translateY(calc(var(--s1) * -0.5)) rotate(45deg);
}
.menu[open] > summary::after { transform: translateY(calc(var(--s1) * 0.5)) rotate(225deg); }
.menu-panel {
  position: absolute; right: 0; top: 100%;
  width: calc(var(--s6) * 8);
  padding: var(--s4);
  display: grid; gap: var(--gap-item);
  background: var(--surface);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  box-shadow: var(--shadow-1);
  z-index: 5;
}
.menu-tools .menu-panel { right: auto; left: 0; }
@media (max-width: 379px) {
  .header-inner { position: relative; }
  .header-nav .menu-tools { position: static; }
  .menu-tools .menu-panel { left: var(--gutter); max-inline-size: calc(100% - 2 * var(--gutter)); }
}
.menu-panel strong { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.menu-panel a {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--gap-item); min-height: var(--touch);
  font-size: var(--t2); line-height: var(--gap-line);
}
.menu-panel a[aria-current="page"] { font-weight: 700; }
.menu-panel small { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }

.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2);
  font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2);
}
.crumbs li { display: inline-flex; align-items: center; min-height: var(--touch); }
.crumbs li + li::before { content: "›"; margin-right: var(--s2); color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
.crumbs [aria-current="page"] { color: var(--ink); }

.site-footer {
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
  padding-top: var(--s5);
  padding-bottom: var(--s5);
  margin-top: var(--gap-section);
  border-top: calc(var(--s1) / 4) solid var(--line);
  display: grid; gap: var(--gap-block);
}
.site-footer::after { content: ""; display: block; height: var(--sk-fab-clearance); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap-block) var(--s4); align-items: center; }
.footer-top strong { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--gap-item); }
.site-footer a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  font-size: var(--t2); padding-inline: var(--s2); color: var(--ink-2); text-decoration: none;
}
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer p { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }


main.wrap {
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
  padding-top: var(--s4);
  padding-bottom: var(--s6);
}

main.wrap > * + * { margin-top: var(--gap-section); }
main.wrap > h1 { margin-top: var(--gap-block); }
main.wrap > .lede { margin-top: var(--gap-item); }
[role="tabpanel"] > * + * { margin-top: var(--gap-block); }
.lede { color: var(--ink-2); font-size: var(--t3); line-height: var(--gap-line); }


.t2 .workbench, .t3 .workbench {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 11)), 1fr));
  row-gap: var(--gap-block); column-gap: var(--s5);
  align-items: start;
}

.t4 .block, .t4 section.block { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s5); }
.t4 .block h2 { font-size: var(--t4); line-height: var(--t5-lh); }
.t4 code { font-family: inherit; font-size: inherit; overflow-wrap: anywhere; }


.card {
  display: grid; gap: var(--gap-block); min-width: 0;
  background: var(--surface);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s5);
  box-shadow: var(--sk-up);
}
.stack { display: grid; gap: var(--gap-block); min-width: 0; }
.field { display: flex; flex-direction: column; gap: var(--gap-item); min-width: 0; }
.field > .label, .label { display: block; font-weight: 500; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.hint { display: block; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.row, .fields, .parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 4.5)), 1fr));
  gap: var(--gap-block);
  min-width: 0;
}
.row > *, .fields > *, .parts > * { min-width: 0; }
.row.alignend > .field { justify-content: end; }
.row:has(> .field > input[type="date"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 6)), 1fr)); }
.unitrow, .withunit { display: flex; align-items: center; column-gap: var(--s2); }
.unitrow input, .withunit input { flex: 1; min-width: 0; }
.unitrow .unit, .withunit .unit { flex: none; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); white-space: nowrap; }
.field input[inputmode="decimal"], .field input[inputmode="numeric"] { text-align: right; }
select { width: fit-content; min-width: min(calc(var(--s6) * 5), 100%); max-width: 100%; }
select { overflow: hidden; }
fieldset { min-width: 0; }
legend { padding: 0; font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); margin-bottom: var(--gap-item); }

.chips, .choices, .actions, .modes, .dayrow, .inline-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item);
}
.chip, .choice {
  display: inline-flex; align-items: center; justify-content: center; column-gap: var(--s2);
  min-height: var(--touch); min-width: var(--touch); padding-inline: var(--s4);
  font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2);
  border: calc(var(--s1) / 4) solid transparent; border-radius: var(--r1);
  cursor: pointer; user-select: none;
  box-shadow: var(--sk-in);
}
.chip:hover, .choice:hover { color: var(--ink); }
.chip:has(input:checked), .choice:has(input:checked) {
  color: var(--ink); font-weight: 500;
  background: var(--surface); border-color: var(--sk-line-strong);
  box-shadow: var(--sk-up-sm);
}
.modes .chips .chip:has(input:checked), .chips.modes .chip:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.chip:has(input:disabled), .choice:has(input:disabled) { color: var(--ink-2); cursor: default; }
.modes .chips, .chips.modes, .tabtrack {
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s1);
  gap: var(--s1);
  box-shadow: var(--sk-in);
}
.modes .chips .chip, .chips.modes .chip { flex: 1 1 auto; gap: 0; box-shadow: none; }
.modes .chips .chip > input[type="radio"], .chips.modes .chip > input[type="radio"] {
  position: absolute; flex: none;
  width: 1px; height: 1px; min-width: 1px; min-height: 1px;
  border: 0; background: transparent; clip-path: inset(50%);
}
.modes .chips .chip:has(input:focus-visible), .chips.modes .chip:has(input:focus-visible) {
  outline: calc(var(--s1) / 2) solid var(--accent); outline-offset: calc(var(--s1) / 2);
}

.tabs {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s1);
  box-shadow: var(--sk-in);
}
.tabs button {
  flex: 1 1 calc(var(--s6) * 5); min-height: var(--touch);
  font-size: var(--t3); line-height: var(--gap-line); font-weight: 400;
  color: var(--ink-2); background: transparent;
  border: calc(var(--s1) / 4) solid transparent;
  box-shadow: none;
}
.tabs button:hover:not(:disabled) { background: transparent; color: var(--ink); border-color: transparent; }
.tabs button[aria-selected="true"], .tabs button[aria-pressed="true"] {
  color: var(--accent-ink); font-weight: 600;
  background: var(--accent); border-color: var(--accent); border-bottom-width: calc(var(--s1) / 4);
  box-shadow: var(--sk-up-sm);
}
.tabs button[aria-selected="true"]:hover, .tabs button[aria-pressed="true"]:hover { background: var(--accent); color: var(--accent-ink); }

.result {
  display: grid; gap: var(--gap-block);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  border-top: calc(var(--s1) / 2) solid var(--accent);
  padding: var(--s5);
  box-shadow: var(--sk-in);
}
.result .rlabel, .result .kicker {
  display: block; font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink-2);
}
.result .rlabel:lang(en), .result .rlabel:lang(de), .result .rlabel:lang(es),
:lang(en) .result .rlabel, :lang(de) .result .rlabel, :lang(es) .result .rlabel {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t1); line-height: var(--gap-line);
}
.result .num, .result .clock {
  display: block; font-size: var(--t6); line-height: var(--t6-lh); font-weight: 600; color: var(--ink);
  font-family: inherit; letter-spacing: -0.02em; text-align: center;
}
.result .alt { text-align: center; }
.result .num.sm { font-size: var(--t5); line-height: var(--t5-lh); }
.result .rule, .result .alt, .result .src, .result .hint { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.result .rule + .rule { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s2); }
.result .rule strong { color: var(--ink); font-weight: 600; }
.result .lines { white-space: pre-line; }
.result .src { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s4); }
.result .vatlist { display: grid; gap: var(--gap-item); }
.result .vatrow { display: grid; gap: var(--s1); }
.result .vatlabel { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.result .vatval { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; color: var(--ink); text-align: right; }
.result .num, .result .vatval, .result .clock, .result .kvval { overflow-wrap: anywhere; }
.result .num > span, .result .vatval > span, .result .clock > span { display: inline-block; white-space: nowrap; }
.result[data-empty] { border-top-color: var(--line); }
.result[data-empty] .num { font-size: var(--t3); line-height: var(--gap-line); font-weight: 400; color: var(--ink-2); }
.result[data-state="error"] { border-top-color: var(--bad); }
.result[data-state="error"] .num { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--bad); }
.result .src details { border: 0; padding: 0; }
.result .src details > summary { min-height: var(--touch); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.result .src li, .result .src p { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); white-space: pre-line; }
.result .src ul { display: grid; row-gap: var(--gap-item); }

.condline { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); overflow-wrap: break-word; }
.condline:empty { display: none; }

.copyrow, .resetrow, .next {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-item); column-gap: var(--s4);
}
.result .copyrow, .result .actions { justify-content: flex-end; }
.copyrow > button:first-of-type:not(.secondary) {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.copyrow > button:first-of-type:not(.secondary):hover:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: var(--surface);
}
.next a.btn-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.next a.btn-pri:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.linkbtn, .ghost, .next a {
  display: inline-flex; justify-content: center; align-items: center;
  min-width: var(--touch); min-height: var(--touch); padding: var(--s3) var(--s4);
  border: calc(var(--s1) * 0.375) solid var(--accent); border-radius: var(--r1);
  background: transparent; color: var(--accent);
  font-family: inherit; font-size: var(--t3); line-height: 1; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.linkbtn:hover, .ghost:hover, .next a:hover { background: var(--accent-soft); border-color: var(--accent); }
.linkbtn.danger { color: var(--bad); border-color: var(--bad); }
.linkbtn.danger:hover { background: var(--bg); border-color: var(--bad); }
.ghost { border-style: solid; width: 100%; }
.rowdel, button.rowdel, .savedlist button[data-act="del"] { color: var(--bad); border-color: var(--bad); }
.rowdel:hover:not(:disabled) { background: var(--bg); }
.next .hint { flex: 1 1 100%; }
.copystate { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.copyfallback { font-size: var(--t2); line-height: var(--gap-line); }

:root { --control-off: color-mix(in srgb, var(--ink-2) 85%, var(--surface)); }

.tog { display: inline-flex; align-items: center; column-gap: var(--s2); min-height: var(--touch); cursor: pointer; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.tog input[type="checkbox"] {
  appearance: none; margin: 0; padding: 0; position: relative; flex: none;
  width: calc(var(--touch) - var(--s1)); height: var(--s5); min-width: 0; min-height: 0;
  border: 0; border-radius: var(--r2); background: var(--control-off); transition: background .15s;
}
.tog input[type="checkbox"]::after {
  content: ""; position: absolute; top: var(--s1); left: var(--s1);
  width: var(--s4); height: var(--s4); border-radius: var(--r2); background: var(--surface);
  clip-path: none; transition: left .15s;
}
.tog input[type="checkbox"]:checked { background: var(--accent); }
.tog input[type="checkbox"]:checked::after { left: calc(var(--touch) - var(--s1) - var(--s4) - var(--s1)); background: var(--accent-ink); }
.togs { display: flex; flex-wrap: wrap; gap: var(--gap-item) var(--s5); align-items: center; }
.togs .hints { flex: 1 1 auto; min-width: 0; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.togs .hints .hint { display: inline; }

.bizrow { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-item); column-gap: var(--s2); min-width: 0; }
.workchip {
  display: inline-flex; align-items: center; column-gap: var(--s2);
  min-height: var(--touch); padding-block: 0; padding-inline: var(--s3);
  font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink);
  background: var(--surface); border: calc(var(--s1) / 4) solid var(--sk-line-strong); border-radius: var(--r1);
  font-variant-numeric: tabular-nums lining-nums; white-space: normal; text-align: start;
  box-shadow: var(--sk-up-sm);
}
.workchip:hover:not(:disabled) { background: var(--surface); border-color: var(--accent); color: var(--ink); }
.workchip::after {
  content: ""; width: var(--s3); height: var(--s3);
  border-right: calc(var(--s1) / 2) solid var(--accent); border-bottom: calc(var(--s1) / 2) solid var(--accent);
  transform: translateY(calc(var(--s1) * -0.5)) rotate(45deg);
}
.workchip[aria-expanded="true"] { border-color: var(--accent); }
.workchip[aria-expanded="true"]::after { transform: translateY(calc(var(--s1) * 0.5)) rotate(225deg); }
.workchip:disabled { opacity: .35; cursor: not-allowed; }
.workslot { display: contents; }
.workpanel {
  display: grid; row-gap: var(--gap-block);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s4);
  box-shadow: var(--sk-in);
}
.workpanel .chip:has(input:checked) { background: var(--surface); }
.workpanel p + p { margin-top: 0; }
.workpanel .resetrow .hint { flex: 1 1 100%; }
.workhead { display: flex; align-items: center; justify-content: space-between; column-gap: var(--s3); }
.worktitle { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.workecho { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; }
.workecho.is-updated { color: var(--accent); }
@keyframes numpulse { 0% { transform: scale(1.06); color: var(--accent); } 100% { transform: none; color: var(--ink); } }
.result .num.is-updated { animation: numpulse .5s ease-out 1; }

.rel { position: relative; }
.exbadge {
  display: none; position: absolute; top: calc(var(--s3) * -1); right: var(--s3); z-index: 1;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--t1); line-height: var(--gap-line); font-weight: 700;
  padding: 0 var(--s2); border-radius: var(--r2);
  box-shadow: var(--sk-up-sm);
}
.ex .exbadge { display: block; }
.ex .rel > .card, .ex .rel > .result { border-style: dashed; border-color: var(--accent); }
.ex .result .num, .ex .result .vatval { color: var(--ink-2); }
.ex .result.tsresult:not([data-empty]):not([data-state="error"]) .num { color: var(--ink); }
.result .acts { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--gap-item); column-gap: var(--s3); margin-top: 0; }
.result > :is(.rule, .alt):empty { display: none; }

details:not(.menu) { border-top: calc(var(--s1) / 4) solid var(--line); }
details:not(.menu) > summary {
  min-height: var(--touch); padding-block: var(--s2); align-content: center;
  font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink);
  cursor: pointer;
}
details:not(.menu) > summary > h2 { display: inline; font: inherit; letter-spacing: inherit; }
details:not(.menu) > :not(summary) { margin-top: var(--gap-block); }
details:not(.menu) > :last-child { margin-bottom: var(--gap-block); }
details:not(.menu) p + p, .result .src p + p { margin-top: var(--gap-item); }
details:not(.menu) p, details:not(.menu) dd, details:not(.menu) li { font-size: var(--t2); line-height: var(--gap-line); }
details:not(.menu) p { max-width: 65ch; }

.faq dl { max-width: 65ch; display: grid; gap: 0; }
.faq dt { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); margin-top: var(--gap-block); }
.faq dd { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.rules { display: grid; gap: 0; }
.rules dt { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); margin-top: var(--gap-block); }
.rules dd { font-size: var(--t3); line-height: var(--gap-line); color: var(--ink-2); }
.faq dl > dt:first-child, .rules > dt:first-child { margin-top: 0; }

.source-block { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s4); display: grid; gap: var(--gap-item); }
.source-block p, .note { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.notice { border: calc(var(--s1) / 4) solid var(--warn); padding: var(--s4); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.statusline { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.example { border: calc(var(--s1) / 4) solid var(--line); padding: var(--s4); font-size: var(--t2); line-height: var(--gap-line); }
.badge { font-size: var(--t1); line-height: var(--gap-line); font-weight: 600; color: var(--warn); border: calc(var(--s1) / 4) solid var(--warn); padding-inline: var(--s2); }
.savedd { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); white-space: nowrap; }
.savedbase { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.block { display: grid; gap: var(--gap-block); }
.block h2 { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; }
.adslot {
  min-height: calc(var(--touch) * 2); border: calc(var(--s1) / 4) solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: var(--t2);
}

.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 11)), 1fr));
  gap: var(--gap-block);
}
.tool {
  display: grid; gap: var(--gap-item); align-content: start;
  padding: var(--s5);
  background: var(--surface);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--sk-up);
}
.tool:hover { border-color: var(--sk-line-strong); }
.tool h2, .tool h3, .tool b { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.tool h2 span, .tool code { font: inherit; color: inherit; }
.tool > span { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.tool .sample { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); text-align: left; }
.tool .state { display: block; font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.tool .state.on { color: var(--accent); }
.tool:hover h2, .tool:hover h3, .tool:hover b { text-decoration: underline; }
.tool[aria-disabled="true"] { color: var(--ink-2); cursor: default; }
.tool[aria-disabled="true"]:hover h2 { text-decoration: none; }
.tools-other { display: grid; gap: var(--gap-item); }
.tools-other li { font-size: var(--t3); line-height: var(--gap-line); }
.tools-other a { color: var(--ink); text-decoration: none; border-bottom: calc(var(--s1) / 4) solid var(--line); }
.tools-other a:hover { color: var(--ink); border-bottom-color: var(--sk-line-strong); text-decoration: underline; }

.toolfilter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-block) var(--s4);
}
.toolfilter .modes { flex: 1 1 calc(var(--s6) * 11); min-width: 0; }
.toolfilter .toolsearch { flex: 1 1 calc(var(--s6) * 8); min-width: 0; }
.toolfilter .chip .count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.toolfilter .chip .count { margin-inline-start: var(--s1); }
.toolfilter .chip:has(input:checked) .count { color: var(--accent-ink); }
#toolcount { flex: 1 1 100%; text-align: right; }
#toolcount.is-empty {
  text-align: center;
  padding: var(--s6) var(--s4);
  font-size: var(--t4); line-height: var(--t5-lh); color: var(--ink);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
}
.emptyhint { text-align: center; color: var(--ink-2); }

.note.shortcut {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item);
  background: var(--accent-soft);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r1);
  padding: var(--s4);
}
.note.shortcut b { color: var(--ink); font-weight: 500; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--s5); padding-inline: var(--s2);
  font-family: var(--sk-font-num); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink);
  background: var(--surface); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r1);
}

.quickadjust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item); margin-top: 0; }
.quickadjust .label { color: var(--ink-2); font-weight: 400; }
.quickadjust .chips { gap: var(--gap-item); }
.quickadjust button {
  min-width: auto; padding-inline: var(--s4);
  font-size: var(--t2); line-height: var(--gap-line); font-weight: 500;
  background: var(--accent-soft); border-color: transparent; color: var(--ink);
  box-shadow: none;
}
.quickadjust button:hover:not(:disabled) { background: var(--surface); border-color: var(--sk-line-strong); }

.tablescroll { overflow-x: auto; }
.table-scroll { overflow: auto; max-height: calc(var(--s6) * 14); }
.tablescroll, .table-scroll, .chartscroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chartscroll, .tablescroll {
  background:
    linear-gradient(to right, var(--bg), transparent) 0 0 / var(--s5) 100% no-repeat local,
    linear-gradient(to left, var(--bg), transparent) 100% 0 / var(--s5) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--line) 90%, transparent), transparent) 0 0 / var(--s4) 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--line) 90%, transparent), transparent) 100% 0 / var(--s4) 100% no-repeat;
}
.table-scroll thead th { position: sticky; top: 0; background: var(--surface); }
table { width: 100%; border-collapse: collapse; text-align: right; }
th, td { padding: var(--s2); border-bottom: calc(var(--s1) / 4) solid var(--line); vertical-align: top; text-align: right; font-size: var(--t2); line-height: var(--gap-line); }
th { color: var(--ink-2); font-weight: 600; }
caption { text-align: left; font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); padding-bottom: var(--s2); }
.dtable { white-space: nowrap; }
.dtable tbody th { text-align: left; color: var(--ink-2); }
.dtable.wraplabel tbody th, .dtable.wraplabel thead th:first-child { white-space: normal; min-width: 6.5em; }
.ltable th, .ltable td { text-align: left; vertical-align: top; }
.ltable th[scope="row"] { white-space: nowrap; }
.ltable td { white-space: pre-wrap; overflow-wrap: break-word; }
.compact-table th, .compact-table td { padding: var(--s1); }
.table-context { background: var(--surface); padding: var(--s4); display: grid; gap: var(--gap-block); }

.chartbox { display: grid; gap: var(--gap-item); }
.charthead { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.chartscroll { overflow-x: auto; }
.chartscroll svg { display: block; width: 100%; min-width: calc(var(--s6) * 16); height: auto; }
.chartscroll .grid { stroke: var(--line); stroke-width: calc(var(--s1) / 4); }
.chartscroll .axis { stroke: var(--line); stroke-width: calc(var(--s1) / 4); }
.chartscroll .ytick, .chartscroll .xtick { fill: var(--ink-2); font-size: var(--t1); }
.chartscroll .axistitle { fill: var(--ink-2); font-size: var(--t1); }
.chartscroll .c-base { fill: var(--ink-2); }
.chartscroll .c-contrib { fill: var(--sk-line-strong); }
.chartscroll .c-profit { fill: var(--accent); }
.chartscroll .c-loss { fill: var(--surface); stroke: var(--bad); stroke-width: calc(var(--s1) / 4); stroke-dasharray: 3 2; }
.chartscroll .c-total { stroke: var(--ink); stroke-width: calc(var(--s1) / 2); }
.legend { display: flex; flex-wrap: wrap; gap: var(--gap-item) var(--s4); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.legend li { display: flex; align-items: center; column-gap: var(--s2); }
.sw { display: inline-block; width: var(--t1); height: var(--t1); }
.sw.c-base { background: var(--ink-2); }
.sw.c-contrib { background: var(--sk-line-strong); }
.sw.c-profit { background: var(--accent); }
.sw.c-total { height: calc(var(--s1) / 2); background: var(--ink); }

.savedbox { display: grid; gap: var(--gap-item); }
.savedlist { display: grid; }
.savedlist li {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-block) var(--s4);
  padding-block: var(--s2); border-bottom: calc(var(--s1) / 4) solid var(--line);
}
.savedlist li:last-child { border-bottom: 0; }
.saveditem { flex: 1; min-width: 0; font-size: var(--t3); line-height: var(--gap-line); }

.grp { display: grid; gap: var(--gap-block); }
.grph { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item); font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; color: var(--ink); }
.buyrow { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--gap-block) var(--s4); }
.buyrow .field { flex: 1 1 calc(var(--s6) * 5); min-width: 0; }
.lbozrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-item) var(--s3); }
.lbozrow .rowname { flex: none; font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.lbozrow .unitrow { flex: 1 1 calc(var(--s6) * 6); min-width: 0; }
.sumrow .unitrow { flex-basis: 100%; }
.sumrow .unitrow input { padding-inline: var(--s2); }
.sumrow .unitrow input[data-k="h"] { flex-grow: 2; }
.modeline { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-item) var(--s4); }
.modeline > .field + .field { flex: 1 1 0; }
.dtable tr.is-input > * { background: var(--accent-soft); font-weight: 600; color: var(--ink); }
.coords { display: grid; gap: var(--gap-block); }
.coordrow { display: grid; gap: var(--gap-item); }
.coordline { display: flex; align-items: center; column-gap: var(--s3); }
.coordval { flex: 1; min-width: 0; font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.adv { display: grid; }
.work { display: grid; }
.related ul {
  display: grid; gap: var(--gap-block);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--s6) * 8)), 1fr));
}
.related li { font-size: var(--t3); line-height: var(--gap-line); }
.related li > a {
  display: grid; gap: var(--s1); align-content: center;
  padding: var(--s4); min-height: var(--touch);
  background: var(--surface); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r1);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.related li > a:hover { border-color: var(--sk-line-strong); text-decoration: underline; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field:not(:focus-within):not([data-hold]) > .hint-focus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: -999px; top: var(--s2); z-index: 30;
  background: var(--surface); color: var(--accent); font-weight: 600; text-decoration: none;
  padding: var(--s2) var(--s4); border: calc(var(--s1) / 2) solid var(--accent);
}
.skip:focus { left: var(--s4); }

.unitrow select { flex: none; min-width: 0; width: auto; }
.row.pricedown { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.pitibreak { display: grid; row-gap: var(--gap-item); }
.pitibar { display: block; width: 100%; height: var(--s3); border-radius: var(--r1); overflow: hidden; background: var(--line); }
.pitibar rect { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pitiparts { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--gap-item); }
.pitiparts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.pitiparts .pv { text-align: end; font-variant-numeric: tabular-nums lining-nums; }
.pitiparts .sw { width: var(--s3); height: var(--s3); border-radius: var(--r1); }
.sw-pi { fill: var(--accent); background: var(--accent); }
.sw-tax { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.sw-insurance { fill: color-mix(in srgb, var(--accent) 25%, var(--surface)); background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.sw-pmi { fill: var(--warn); background: var(--warn); }
.sw-hoa { fill: var(--ink-2); background: var(--ink-2); }

.tdeegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: var(--gap-block) var(--s2); }
.tdeegrid > .wide { grid-column: span 3; }
.tdeegrid:has(> [hidden] #height-ft) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdeegrid:has(> [hidden] #height-ft) > .wide { grid-column: span 2; }
.tdeegrid input { padding-inline: var(--s2); }
.tdeetable thead th { white-space: normal; }
.tdeetable .subline { display: block; font-weight: 400; color: var(--ink-2); }
.tdeetable .selbadge { display: inline-block; margin-inline-start: var(--s2); padding-inline: var(--s1); font-size: var(--t1); font-weight: 600; color: var(--ink); border: calc(var(--s1) / 4) solid var(--ink-2); border-radius: var(--r1); white-space: nowrap; }

.result .agetotals { display: grid; gap: var(--gap-item); }
.result .kv { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s3); }
.result .kvval { flex-grow: 1; min-width: 0; text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

[data-task]:not(:where(section)) { display: contents; }
main.wrap > * + [data-task]:not(:where(section)) > :first-child, main.wrap > [data-task]:not(:where(section)) > * + * { margin-top: var(--gap-section); }
main.wrap > * + [data-task]:not(:where(section)) > .lede:first-child { margin-top: var(--gap-item); }


.result .verdict { color: var(--ink); font-weight: 600; }
.result[data-verdict="impossible"] { border-top-color: var(--bad); }


.tccard { padding: var(--s3); }
.tctable { table-layout: fixed; }
.tctable caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tctable th, .tctable td { padding: 0 0 0 var(--s1); text-align: left; vertical-align: middle; }
.tctable :is(th, td):first-child { padding-inline-start: 0; }
.tctable thead th { white-space: normal; }
.tctable .tcday { width: calc(var(--s6) * 1.125); }
.tctable .tclunch { width: calc(var(--s6) * 1.625); }
.tctable tbody th { color: var(--ink); }
.tctable input { padding: var(--s2) var(--s1); }
.tctable input[data-k="lunch"] { text-align: right; }
.tccard > .btn { justify-self: start; }
.rel:has(> .result[data-example]) > .exbadge { display: block; }
.rel > .result[data-example] { border-style: dashed; border-color: var(--accent); }
.result[data-example] .num { color: var(--ink-2); }
@media print {
  .p-time-card-calculator-en body > :not(main) { display: none !important; }
  .p-time-card-calculator-en main.wrap { max-width: none; margin: 0; padding: 0; }
  .p-time-card-calculator-en main.wrap > :not([data-task]) { display: none !important; }
  .p-time-card-calculator-en [data-task] :is(#add-weekend, .exbadge, .acts, .copystate, .copyfallback) { display: none !important; }
  .p-time-card-calculator-en :is(.tccard, .result) { box-shadow: none; background: none; border-color: #888; }
  .p-time-card-calculator-en .tctable caption { position: static; width: auto; height: auto; overflow: visible; clip-path: none; text-align: left; font-size: 14pt; font-weight: 700; color: #000; }
  .p-time-card-calculator-en .tctable :is(th, td) { font-size: 11pt; color: #000; border-bottom: 0.2mm solid #888; }
  .p-time-card-calculator-en .tctable input { border: 0; outline: 0; background: none; box-shadow: none; padding: 1mm 0; min-height: 0; font-size: 11pt; color: #000; }
  .p-time-card-calculator-en .result :is(.rlabel, .rule, .alt) { font-size: 11pt; color: #000; }
  .p-time-card-calculator-en .result .num { font-size: 20pt; color: #000; }
}


.result .ccmsg { font-size: var(--t3); line-height: var(--gap-line); color: var(--ink-2); }
.result[data-state="error"] .ccmsg { font-weight: 600; color: var(--bad); }
.cctable tbody tr:nth-child(-n+2) td:not(.cstat) { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cctable:has(thead th:nth-child(3)) tbody tr:nth-child(-n+2) td:not(.cstat) { font-size: var(--t3); line-height: var(--gap-line); }
.cctable th, .cctable td { padding-block: var(--s1); }
.cctable thead th { white-space: normal; }
.ex .cctable tbody tr td:not(.cstat) { color: var(--ink-2); }
.cctable td.cstat { white-space: normal; text-align: left; color: var(--ink); border-inline-start: calc(var(--s1) / 2) solid var(--warn); }
.cctable td.cstat > span { display: block; }
.cctable td.cstat > span:first-child { font-weight: 600; }
.cctable td.cstat > span + span { margin-top: var(--gap-item); }

.piecehead { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--gap-item); column-gap: var(--s3); }
.piecehead .rowname { flex: none; font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.piecelist > .piece + .piece { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s4); }
.piecelist + #add-row { justify-self: start; }
.piecelist > .piece, .piece > .row { gap: var(--gap-item) var(--s4); }


.ratelink { justify-self: end; }
.result[data-verdict="unreachable"] { border-top-color: var(--warn); }
.ratetable thead th { white-space: normal; }
.ratechip { justify-self: start; }


.pregtable thead th { white-space: normal; }
.pregtable td:last-child { white-space: normal; text-align: left; min-width: calc(var(--s6) * 4); }
.pregtable td:last-child > span { display: block; }
.pregrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap-block); }
.pregrow > .field { flex: 1 1 calc(var(--s6) * 6); }
.pregrow > #cycle-field { flex: 1 1 calc(var(--s6) * 2.5); }
.pregsources { display: grid; gap: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }


.lede.subtitle { color: var(--ink); font-weight: 600; }



.result[data-verdict="noroom"] { border-top-color: var(--warn); }
.result[data-verdict="noroom"] .num { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
input[data-flag] { border-color: var(--warn); }



.powfields { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: var(--s3); row-gap: var(--gap-block); }
.powfields > .field { flex: 1 1 calc(var(--s6) * 3); }
.powcaret { flex: none; display: flex; align-items: center; min-height: var(--touch); font-size: var(--t4); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.withunit > .usee { flex: none; min-width: var(--touch); }
.powresult .kvval, .powresult .digits { overflow-wrap: anywhere; }
.powresult .alldigits > summary { font-size: var(--t2); color: var(--ink-2); }
.powresult .digits { max-height: calc(var(--s6) * 8); overflow-y: auto; font-size: var(--t2); line-height: var(--gap-line); font-variant-numeric: tabular-nums; }
.result[data-verdict="none"] { border-top-color: var(--warn); }



.wglist { display: grid; row-gap: var(--gap-item); min-width: 0; }
.wgrow { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--s6) * 2.5) calc(var(--s6) * 1.75) calc(var(--s6) * 2.25); column-gap: var(--s2); align-items: center; min-width: 0; }
.wghead > span { font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; color: var(--ink); white-space: nowrap; }
.wgrow > input { padding-inline: var(--s1); }
.wgrow > input[data-k="grade"], .wgrow > input[data-k="weight"] { text-align: right; }
.wgrow > [data-remove] { justify-self: end; }
.wglist + #add-row { justify-self: start; }
.result > .wgpoints:empty { display: none; }



.payperiods .chips .chip { padding-inline: var(--s2); }
.row.payhours { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--s6) * 4.5)), 1fr)); }
.result .num > .payunit { font-size: var(--t3); line-height: var(--gap-line); font-weight: 400; color: var(--ink-2); }
.payvalue input { text-align: right; font-family: var(--sk-font-num); }
.paytable thead th { white-space: normal; }




.row.hsunits > .hsunit { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--gap-item); align-content: start; }
.hsgroup, .hsamounts { display: grid; row-gap: var(--gap-item); min-width: 0; }
.result.hsresult { grid-template-columns: minmax(0, 1fr); }
.hsresult .num { overflow-wrap: anywhere; }
.result.hexresult { grid-template-columns: minmax(0, 1fr); }
.hexresult .num, .hexresult .lines { overflow-wrap: anywhere; }
.hexresult .num > .seg { display: inline-block; max-width: 100%; white-space: normal; }
.row.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subfield { display: flex; flex-direction: column; justify-content: end; gap: var(--gap-item); min-width: 0; }
.pacecard { padding: var(--s2); gap: var(--gap-item); }
.pickrow { grid-template-columns: minmax(0, 1fr); }
.pickrow select { width: 100%; }
.pickrow > .pickinline { flex-direction: row; align-items: center; column-gap: var(--s2); }
.pickrow > .pickinline > .label { flex: none; }
.pickrow > .pickinline select { flex: 1 1 auto; width: auto; }
.paceresult { padding-top: var(--s4); }
.pacecard .adv > :not(summary) { margin-top: var(--gap-item); }
.paceresult > div:empty { display: none; }
.splittable { table-layout: fixed; }
.splittable thead th { white-space: normal; text-align: left; }
.splittable td { text-align: left; }
.moneycard { padding: var(--s3); gap: var(--gap-item); }
.moneycard .adv > :not(summary) { margin-top: var(--gap-item); }
.moneyanswer { display: grid; gap: var(--gap-item); }
.result .num.moneynum { font-size: var(--t4); line-height: var(--gap-line); }
.moneylines { display: grid; gap: var(--gap-item); }
.moneylines > p { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.moneylines > p + p { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s2); }
.moneyresult > div:empty, .moneyresult > p:empty { display: none; }
.moneyresult:is([data-state="error"], [data-state="pending"]) > .moneyanswer { display: none; }
.moneytable { table-layout: fixed; }
.moneytable thead th { white-space: normal; text-align: left; }
.moneytable td { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.moneytable th:nth-child(1), .moneytable th:nth-child(2) { width: 15%; }
.p-how-long-will-the-money-last-calculator-en main.t2 > h1 { font-size: var(--t5); line-height: var(--t5-lh); }
.result[data-verdict="loss"] { border-top-color: var(--warn); }
.hstable tr.hsnet > * { color: var(--ink); font-weight: 600; border-top: calc(var(--s1) / 2) solid var(--ink-2); }




.macromodes .chips .chip { padding-inline: var(--s2); }
.row.macrorow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-block) var(--s2); }
.row.macrorow input { padding-inline: var(--s2); }
.pitiparts.macroparts li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sw-protein { fill: var(--accent); background: var(--accent); }
.sw-carb { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.sw-fat { fill: var(--ink-2); background: var(--ink-2); }




.cytable { table-layout: fixed; }
.cytable caption { text-align: start; padding-block-end: var(--s2); font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.cytable thead th { white-space: normal; }
.cytable thead th:nth-child(2) { width: calc(var(--s6) * 3.25); }
.cytable thead th:first-child, .cytable th[scope="row"] { text-align: start; }
.cytable th[scope="row"] { color: var(--ink); vertical-align: middle; }
.cytable td { vertical-align: middle; overflow-wrap: anywhere; }
.cytable td > input { width: 100%; padding-inline: var(--s1); text-align: right; }
.cytable td[data-state="error"] { text-align: start; color: var(--bad); }



.prdrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap-block); }
.prdrow > .field { flex: 1 1 calc(var(--s6) * 2.5); }
.result[data-verdict="skipped"] { border-top-color: var(--warn); }
.prdtable th, .prdtable td { white-space: normal; text-align: left; }
.prdcals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--s6) * 8)), 1fr)); row-gap: var(--gap-block); column-gap: var(--s5); }
.prdcal { table-layout: fixed; border-collapse: separate; border-spacing: calc(var(--s1) / 2); }
.prdcal th, .prdcal td { padding: var(--s1) 0; border-bottom: 0; text-align: center; font-variant-numeric: tabular-nums; }
.prdcal th { font-weight: 500; }
.prd-p { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.prd-p.prd-o::after { background: var(--accent-ink); }
.prd-f { outline: calc(var(--s1) / 2) dashed var(--accent); outline-offset: calc(var(--s1) / -2); }
.prd-o::after { content: ''; display: block; width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--ink); margin: 0 auto; }
.prdlegend { display: flex; flex-wrap: wrap; row-gap: var(--gap-item); column-gap: var(--s4); list-style: none; padding: 0; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.prdlegend li { display: flex; align-items: center; column-gap: var(--s2); }
.prdsw { display: inline-flex; align-items: center; justify-content: center; width: var(--s5); height: var(--s5); }
.prdsw.prd-o::after { margin: 0; }




.result[data-verdict="toohigh"], .result[data-verdict="nosize"] { border-top-color: var(--warn); }
.result[data-verdict="toohigh"] .num, .result[data-verdict="nosize"] .num { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.strandonly { display: block; margin-top: var(--gap-item); }




.cashcard { padding: var(--s3); }
.cashtable { table-layout: fixed; }
.cashtable caption { color: var(--ink); }
.cashtable th, .cashtable td { padding: var(--s1); vertical-align: middle; }
.cashtable thead th { white-space: normal; hyphens: auto; overflow-wrap: anywhere; vertical-align: bottom; }
.cashtable tbody th { text-align: left; color: var(--ink); }
.billtable thead th:nth-child(n+2) { width: calc(var(--s6) * 3); }
.cointable thead th:nth-child(2) { width: calc(var(--s6) * 2.25); }
.cointable thead th:nth-child(4) { width: calc(var(--s6) * 2.125); }
.cashtable thead th:first-child { text-align: left; }
.cointable thead th:nth-child(3) { width: calc(var(--s6) * 2); }
.cashtable input { text-align: right; padding-inline: var(--s2); }
.cashtable td.sub { white-space: normal; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cointable tbody tr:not(.rollnote) > * { border-bottom: 0; }
.cashtable tr.rollnote td, .cashtable tr.rowerr td { text-align: left; white-space: normal; padding-top: 0; }
.cashtable tr.rollnote td { color: var(--ink-2); }
.result[data-verdict="short"] { border-top-color: var(--warn); }
.cashsheet { position: absolute; left: -400vw; top: 0; width: 180mm; font-size: 10pt; }
.cashsheet:empty { display: none; }
.cashsheet > * + * { margin-top: var(--gap-item); }
.cashsheet h2 { font-size: 14pt; }
.cashsheet table { table-layout: auto; }
.cashsheet caption, .cashsheet th, .cashsheet td, .cashsheet p { font-size: 10pt; }
.cashsheet th, .cashsheet td { padding: 1mm 2mm; border-bottom: 0.2mm solid var(--line); }
.cashsheet tbody th { text-align: left; }
.cashsheet .csroll { display: block; font-size: 8.5pt; font-weight: 400; }
.cashsheet .cstotal { font-weight: 700; }
@media print {
  body.has-cashsheet { background: #fff; color: #000; }
  body.has-cashsheet .site-header, body.has-cashsheet .site-footer { display: none !important; }
  body.has-cashsheet main.wrap > :not(.cashsheet) { display: none !important; }
  body.has-cashsheet main.wrap { max-width: none; margin: 0; padding: 0; }
  body.has-cashsheet .cashsheet { position: static; width: auto; }
  body.has-cashsheet .cashsheet :is(h2, caption, th, td, p) { color: #000; }
  body.has-cashsheet .cashsheet :is(th, td) { border-bottom-color: #888; }
}




.lscard { padding: var(--s3); }
.lsgrid { gap: var(--gap-item); }
.lseq { display: flex; align-items: center; column-gap: var(--s1); min-width: 0; }
.lseq > input { flex: 1 1 0; min-width: var(--touch); padding-inline: var(--s1); text-align: center; }
.lssym { flex: none; font-size: var(--t4); line-height: var(--gap-line); font-weight: 600; color: var(--ink); font-style: italic; }
.lssym.lsplus { font-style: normal; color: var(--ink-2); }
.result:not([data-empty]):not([data-state="error"]) .num.lsanswer { display: grid; justify-items: center; row-gap: var(--gap-item); font-size: var(--t5); line-height: var(--t5-lh); overflow-wrap: anywhere; }
.result:not([data-empty]):not([data-state="error"]) .num.lsanswer.sm { font-size: var(--t4); }
.result .num.lsanswer > .lsvar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: var(--s2); white-space: normal; }
.lsvar > .lsdec { font-size: var(--t3); line-height: var(--gap-line); font-weight: 500; letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lsnotes, .lsverify, .lsstepsbody, .lsstep, .lscheckbody, .lscheckout, .lsprinthead { display: grid; row-gap: var(--gap-item); min-width: 0; }
.lsverify { border-top: calc(var(--s1) / 4) solid var(--line); padding-top: var(--s2); }
.lslabel { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.lslist { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--gap-item); }
.lslist > li, .lsop, .lsnote, .lsurl { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lsop { color: var(--ink); }
.lsstepsbody { row-gap: var(--gap-block); padding-block: var(--s2); }
.lsmatrix { width: auto; max-width: 100%; table-layout: auto; }
.lsmatrix th, .lsmatrix td { padding: var(--s1) var(--s3); text-align: center; overflow-wrap: anywhere; }
.lsmatrix .lsrhs { border-inline-start: calc(var(--s1) / 2) solid var(--ink-2); }
.lscheckbody { row-gap: var(--gap-block); padding-block: var(--s2); }
.lscheckbody > .btn { justify-self: start; }
.lscheckout > :empty { display: none; }
.lscheckmsg { font-weight: 600; color: var(--ink); }
.lscheckout[data-verdict="mismatch"] .lscheckmsg, .lscheckout[data-verdict="none"] .lscheckmsg, .lscheckout[data-verdict="error"] .lscheckmsg { color: var(--bad); }
.lsprint { display: none; }
.lsprinttitle { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 700; color: var(--ink); }
@media print {
  .p-solving-systems-of-equations-calculator-en :is(.site-header, .site-footer, .crumbs, h1, .lede, .rel, main > [data-task] > .field, .lscheck, .resetrow, main > details, main > .block, .source-block, .acts, .copystate, .copyfallback, #steps > summary) { display: none !important; }
  .p-solving-systems-of-equations-calculator-en .lsprint { display: grid; }
  .p-solving-systems-of-equations-calculator-en main { font-size: 11pt; }
  .p-solving-systems-of-equations-calculator-en .result { box-shadow: none; background: none; }
  .p-solving-systems-of-equations-calculator-en :is(.lslabel, .lslist > li, .lsop, .lsnote, .lsurl, .lsmatrix th, .lsmatrix td, .result .rlabel, .result .rule, .lsdec) { font-size: 10.5pt; color: #000; }
  .p-solving-systems-of-equations-calculator-en .lsprinttitle { font-size: 14pt; }
  .p-solving-systems-of-equations-calculator-en .result:not([data-empty]):not([data-state="error"]) .num.lsanswer { font-size: 16pt; color: #000; }
  .p-solving-systems-of-equations-calculator-en .lsstep { break-inside: avoid; }
}




.fracrow { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); row-gap: var(--gap-block); }
.fracop { flex: 1 1 calc(var(--s6) * 7); display: flex; align-items: center; column-gap: var(--s2); min-width: 0; }
.fracops { flex: 0 1 auto; }
.fracops .chips .chip { font-size: var(--t4); }
.fracop > .fracbox, .fracstack { flex: 1 1 calc(var(--s6) * 2.5); max-width: calc(var(--s6) * 4); min-width: 0; }
.fracstack { display: flex; flex-direction: column; row-gap: 0; }
.fracbox { text-align: center; padding-inline: var(--s2); }
.fracbar { display: block; height: var(--s2); background: linear-gradient(var(--ink), var(--ink)) center / 100% calc(var(--s1) / 2) no-repeat; }
.signbtn { flex: none; padding-inline: var(--s2); font-size: var(--t4); }
.signbtn[data-neg="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.signbtn[data-neg="true"]:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.fracop > [data-flag], .fracstack > [data-flag] { border-color: var(--warn); }
.fracresult .num, .fracresult .kvval { overflow-wrap: anywhere; }
.fracsteps .fracsteplist { display: grid; row-gap: var(--gap-item); padding-inline-start: var(--s5); list-style: decimal; }
.fracsteps .fracsteplist > li { font-size: var(--t3); line-height: var(--gap-line); color: var(--ink); overflow-wrap: anywhere; }
.fraccheck .withunit > .btn { flex: none; }
.checkstate { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.checkstate:empty { display: none; }
.checkstate[data-state="error"] { color: var(--bad); }
.fracprint { display: none; }
@media print {
  body:has(.fracsteps) > :not(main) { display: none !important; }
  body:has(.fracsteps) main.wrap { max-width: none; padding: 0; }
  body:has(.fracsteps) main.wrap > :not([data-task]) { display: none !important; }
  [data-task]:has(> .fracsteps) > :is(.rel, .field, .fraccheck) { display: none !important; }
  .fracresult :is(.acts, .copystate, .copyfallback) { display: none !important; }
  .fracresult { box-shadow: none; }
  .fracprint { display: block; font-size: 11pt; color: var(--ink); }
  .frachead .fractitle { font-size: 14pt; font-weight: 600; }
  .fracsteps > summary { display: none; }
  .fracsteps::details-content { content-visibility: visible; display: block; }
  .fracsteps { border-top: 0; }
  .fracsteps .fracsteplist > li, .fracsteps .fracprint, .result.fracresult :is(.kv, .rule, .rlabel) { font-size: 11pt; }
  .fracresult .num { font-size: 20pt; color: var(--ink); }
}


.hepay { display: grid; row-gap: var(--gap-block); min-width: 0; }
.row.hecltv > .modes { align-self: end; }
.helimit { display: grid; row-gap: var(--gap-item); min-width: 0; }
.helimit .rlabel { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.helimit .lnum { font-size: var(--t4); line-height: var(--gap-line); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hestatus { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); border-inline-start: calc(var(--s1) / 2) solid var(--warn); padding-inline-start: var(--s2); }
.hestatus:empty { display: none; }


.oplegs { display: grid; row-gap: var(--gap-block); min-width: 0; }
.oplegs > .copystate:empty { display: none; }
.opleg .modes .chips .chip { padding-inline: var(--s2); }
.opleg .legsum { flex: 1 1 auto; min-width: 0; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); font-variant-numeric: tabular-nums; }
.opmsg, .fieldmsg { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--bad); }
.opmsg:empty, .fieldmsg:empty { display: none; }
.chartscroll .c-pl { fill: none; stroke: var(--accent); stroke-width: calc(var(--s1) / 2); stroke-linejoin: round; }
.chartscroll .c-zero { stroke: var(--ink-2); stroke-width: calc(var(--s1) / 4); }
.chartscroll .c-sel { fill: var(--ink); }
.optable thead th { white-space: normal; }
.optable .subline { display: block; font-weight: 400; color: var(--ink-2); }


.row.savrate { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.savrate .modes .chips { flex-wrap: nowrap; }
.savrate .modes .chips .chip { padding-inline: var(--s2); text-align: center; }

.gfstack { display: grid; row-gap: var(--gap-block); min-width: 0; }
.gfcard { row-gap: var(--gap-item); padding: var(--s2) var(--s3); }
.gfresult { padding: var(--s2) var(--s3) var(--s3); }
.gfrows { display: grid; row-gap: var(--gap-item); min-width: 0; }
.gfrow { display: flex; align-items: center; column-gap: var(--s2); min-width: 0; }
.gfrow input { flex: 1 1 auto; min-width: 0; font-family: var(--sk-font-num); padding-block: var(--s1); }
main.wrap > * + [data-task] > .gfstack:first-child { margin-top: var(--gap-block); }
.gfname { flex: none; min-width: var(--s5); font-size: var(--t3); line-height: var(--gap-line); font-weight: 700; color: var(--accent); }
.gfname[data-series="2"] { color: var(--warn); }
.gfname[data-series="3"] { color: var(--good); }
.gfname[data-series="4"] { color: var(--bad); }
.gfname[data-series="5"] { color: var(--ink); }
.gfprefix { flex: none; font-family: var(--sk-font-num); font-size: var(--t3); line-height: var(--gap-line); color: var(--ink-2); white-space: nowrap; }
.gfrow .gfdel { flex: none; min-width: var(--touch); min-height: var(--touch); padding-block: 0; padding-inline: var(--s2); }
.gfmsg { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--bad); }
.gfmsg:empty { display: none; }
.gfaddrow { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); row-gap: var(--gap-item); }
.gfaddrow .copystate:empty { display: none; }
#add-fn { padding-block: var(--s2); }
#add-fn[aria-disabled="true"], .btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.gfplot { touch-action: pan-y; cursor: grab; min-width: 0; }
.gfplot[data-yfixed] { touch-action: none; }
.gfplot svg { display: block; width: 100%; height: auto; border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r1); user-select: none; }
.gfplot .gf-bg { fill: var(--surface); }
.gfplot .gf-grid { stroke: var(--line); stroke-width: 0.5; }
.gfplot .gf-axis { stroke: var(--ink-2); stroke-width: 1; }
.gfplot .gf-tick { fill: var(--ink-2); font-size: var(--t1); font-family: var(--sk-font-num); }
.gfplot path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gfplot .gf-c1 { stroke: var(--accent); }
.gfplot .gf-c2 { stroke: var(--warn); }
.gfplot .gf-c3 { stroke: var(--good); }
.gfplot .gf-c4 { stroke: var(--bad); }
.gfplot .gf-c5 { stroke: var(--ink); }
.gfplot .gf-pt { fill: var(--ink); }
.gfwarn { font-size: var(--t2); line-height: var(--gap-line); font-weight: 600; color: var(--ink); border-inline-start: calc(var(--s1) / 2) solid var(--warn); padding-inline-start: var(--s2); }
.gfresult .gflines { display: grid; row-gap: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); text-align: left; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ex .gfresult .gflines { color: var(--ink-2); }
.gfacts, .gftable, .gfwin { display: grid; row-gap: var(--gap-item); min-width: 0; }
.gfacts .copystate:empty { display: none; }
.gfbtns { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); row-gap: var(--gap-item); }
.gfvalues td, .gfvalues th { font-variant-numeric: tabular-nums; }

.result .answer { display: grid; gap: var(--gap-item); }
.todayline { display: grid; gap: var(--gap-item); }

.result-lines, .nowline { display: grid; gap: var(--gap-item); }
.nowline { padding: var(--s3); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r1); }
.result-lines .coordval, .nowline .coordval { flex: 1 1 auto; font-size: var(--t2); font-weight: 400; color: var(--ink-2); }
.result-lines .coordline, .nowline .coordline { flex-wrap: wrap; row-gap: var(--gap-item); }
.coordval .isoval { white-space: nowrap; }
.card.compact { padding: var(--s3); gap: var(--gap-item); }

.offcard { padding: var(--s3); gap: var(--gap-item); }
.offcard .adv > :not(summary), .offtirefold > :not(summary) { margin-top: var(--gap-item); }
.offpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-item) var(--s3); min-width: 0; }
.offpair > * { min-width: 0; }
.offpair input { width: 100%; min-width: 0; text-align: right; }
.offpair .colhead { font-weight: 600; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); border-bottom: calc(var(--s1) / 4) solid var(--line); padding-bottom: var(--s1); }
.offans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-item) var(--s3); }
.offans .cell { display: grid; gap: 0; align-content: start; min-width: 0; }
.result .offans .num { text-align: left; }
.offans .num .unit { font-size: var(--t3); font-weight: 600; margin-left: var(--s1); }
.offdir { display: flex; align-items: center; column-gap: var(--s1); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.offdir svg { flex: none; width: 1.25em; height: 1.25em; }
.offdir[data-arrow="left"] svg { transform: scaleX(-1); }
.offdir[data-arrow="none"] svg { visibility: hidden; }
.offresult:is([data-empty], [data-state="error"]) .offans { display: none; }
.offdiagram { display: grid; gap: var(--gap-item); }
.offdiagram svg { width: 100%; height: auto; display: block; color: var(--ink); }
.offdiagram figcaption { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.offtire { display: grid; gap: var(--gap-item); }
.offtire > p { font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }

.gaicard { padding: var(--s3); gap: var(--gap-item); }
.gaigrid { display: grid; grid-template-columns: minmax(3.5em, auto) repeat(3, minmax(0, 1fr)); gap: var(--gap-item) var(--s2); align-items: end; }
.gaigrid > * { min-width: 0; }
.gaigrid .ghead { font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.gaigrid .colhead { font-weight: 600; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); align-self: center; }
.gaigrid input { width: 100%; min-width: 0; text-align: right; }
.gairowmsg { grid-column: 1 / -1; margin: 0; display: grid; gap: 0; }
.gairowmsg:not(:has(.fieldmsg:not(:empty))) { display: none; }
.gaispeed { display: flex; align-items: end; column-gap: var(--s2); }
.gaispeed .field { flex: 0 1 9em; min-width: 0; }
.gaispeed input { width: 100%; text-align: right; }
.gaispeed .unit { padding-bottom: var(--s2); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.gaitable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gaitable caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gaitable th, .gaitable td { padding: var(--s1) 0 var(--s1) var(--s2); text-align: right; border-bottom: calc(var(--s1) / 4) solid var(--line); font-variant-numeric: tabular-nums; }
.gaitable thead th { font-size: var(--t1); line-height: var(--gap-line); font-weight: 600; color: var(--ink-2); }
.gaitable th:first-child { text-align: left; padding-left: 0; width: 22%; }
.gaitable thead th:last-child { width: 30%; }
.gaitable tbody th { font-weight: 400; font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.gaitable tbody td { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink); }
.gaitable tr.big th { color: var(--ink); font-weight: 600; }
.gaitable tr.big td { font-size: var(--t4); line-height: var(--t5-lh); font-weight: 700; }
.ex .gaitable tr.big td { color: var(--ink-2); }
.gaitable .rowunit { margin-left: var(--s1); font-size: var(--t1); font-weight: 400; color: var(--ink-2); }
.gaispeedlines { display: grid; gap: var(--gap-item); }
.gaispeedlines p { margin: 0; font-size: var(--t3); line-height: var(--gap-line); font-weight: 600; color: var(--ink); }
.gairesult:is([data-empty], [data-state="error"]) .gaitable { display: none; }


:where(.p-percentage-calculator-ko, .p-percentage-calculator-en) .card input[type="text"] { text-align: right; }

:where(.p-centimeters-to-megameters-en) .example p { white-space: pre-line; }

:where(.p-suneung-dday-ko) .srcbox { display: grid; gap: var(--gap-item); }
:where(.p-suneung-dday-ko) .srcbox .note { overflow-wrap: break-word; }

:where(.p-calendar-ja, .p-dallyeok-ko) .tool h3 { font-size: var(--t3); line-height: var(--gap-line); font-weight: 700; color: var(--ink); }



.p-build-loan-calculator-en .buildloan-table { width: 100%; table-layout: fixed; }
.p-build-loan-calculator-en .buildloan-table th:first-child { width: 12%; }
.p-build-loan-calculator-en .buildloan-table td { overflow-wrap: anywhere; }
.p-build-loan-calculator-en .buildloan-table input { width: 100%; min-width: 0; }
.p-build-loan-calculator-en #answer .num { display: block; }

@media (max-width: 480px) {
  .p-build-loan-calculator-en .buildloan-table thead { display: none; }
  .p-build-loan-calculator-en .buildloan-table tbody { display: grid; gap: var(--gap-item); }
  .p-build-loan-calculator-en .buildloan-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: calc(var(--s1) / 4) solid var(--line); padding-block: var(--s2); }
  .p-build-loan-calculator-en .buildloan-table th,
  .p-build-loan-calculator-en .buildloan-table td { width: auto; border: 0; white-space: normal; text-align: left; padding: var(--s1); }
  .p-build-loan-calculator-en .buildloan-table th,
  .p-build-loan-calculator-en .buildloan-table td:nth-child(2) { grid-column: 1 / -1; }
  .p-build-loan-calculator-en .buildloan-table th::before { content: attr(data-label) " "; }
  .p-build-loan-calculator-en .buildloan-table td::before { content: attr(data-label); display: block; font-size: var(--t2); color: var(--ink-2); }
}