.tn-age-page,
.tn-age-page * { box-sizing: border-box; }

.tn-age-page {
  --tn-age-paper: #faf6ee;
  --tn-age-wash: #f5efdf;
  --tn-age-panel: #fffaf0;
  --tn-age-ink: #1a1208;
  --tn-age-muted: #5a4a30;
  --tn-age-line: #b8a888;
  --tn-age-soft-line: #ddd4be;
  --tn-age-accent: #c44a00;
  --tn-age-primary-bg: #1a1208;
  --tn-age-primary-ink: #fff7e8;
  --tn-age-secondary-bg: #ede6d4;
  --tn-age-secondary-ink: #1a1208;
  --tn-age-danger-bg: #f4dfd8;
  --tn-age-danger-ink: #8e2f1c;
  --tn-age-success-bg: #26351f;
  --tn-age-success-ink: #f3ffe5;
  --tn-age-success-line: #7d965e;
  width: min(1180px, calc(100vw - 10px));
  margin: 0 auto;
  color: var(--tn-age-ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.tn-age-page :where(ul, ol) {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tn-age-tool {
  margin: 0 0 18px;
  color: var(--tn-age-ink);
  background:
    linear-gradient(90deg, rgba(184, 168, 136, .13) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(0deg, rgba(184, 168, 136, .10) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--tn-age-paper);
  border: 1px solid var(--tn-age-line);
  border-radius: 0;
  padding: 12px;
  overflow: hidden;
}

.tn-age-workspace {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 10px;
  align-items: stretch;
}

.tn-age-pane {
  min-width: 0;
  background: color-mix(in srgb, var(--tn-age-panel) 92%, transparent);
  border: 1px solid var(--tn-age-line);
  border-radius: 0;
  padding: 12px;
}

.tn-age-kicker {
  margin: 0 0 9px;
  color: var(--tn-age-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tn-age-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.tn-age-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  color: var(--tn-age-muted);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 850;
}

.tn-age-field input {
  width: 100%;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 7px 9px;
  color: var(--tn-age-ink);
  -webkit-text-fill-color: var(--tn-age-ink);
  background: var(--tn-age-panel);
  border: 1px solid var(--tn-age-line);
  border-radius: 0;
  box-shadow: none;
  font: 800 13px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

.tn-age-field input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tn-age-accent) 55%, transparent);
  outline-offset: 1px;
}

.tn-age-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 0;
}

.tn-age-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--tn-age-line);
  border-radius: 0;
  box-shadow: none;
  font: 900 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

.tn-age-button--primary {
  color: var(--tn-age-primary-ink);
  -webkit-text-fill-color: var(--tn-age-primary-ink);
  background: var(--tn-age-primary-bg);
  border-color: var(--tn-age-primary-bg);
}

.tn-age-button--quiet {
  color: var(--tn-age-secondary-ink);
  -webkit-text-fill-color: var(--tn-age-secondary-ink);
  background: var(--tn-age-secondary-bg);
  border-color: var(--tn-age-secondary-line, var(--tn-age-line));
}

.tn-age-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--tn-age-secondary-bg) 78%, var(--tn-age-accent));
}

.tn-age-button--primary:hover {
  color: var(--tn-age-primary-ink);
  -webkit-text-fill-color: var(--tn-age-primary-ink);
  background: #824826;
  border-color: #824826;
}

.tn-age-button:focus { outline: 0; }
.tn-age-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tn-age-accent) 65%, transparent);
  outline-offset: 2px;
}

.tn-age-status {
  min-height: 32px;
  margin: 9px 0 0;
  padding: 7px 9px;
  color: var(--tn-age-muted);
  -webkit-text-fill-color: var(--tn-age-muted);
  background: var(--tn-age-wash);
  border: 1px solid var(--tn-age-soft-line);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 750;
}

.tn-age-status[data-tone="error"] {
  color: var(--tn-age-danger-ink);
  -webkit-text-fill-color: var(--tn-age-danger-ink);
  background: var(--tn-age-danger-bg);
  border-color: color-mix(in srgb, var(--tn-age-danger-ink) 34%, var(--tn-age-soft-line));
}

.tn-age-status[data-tone="success"] {
  color: var(--tn-age-success-ink);
  -webkit-text-fill-color: var(--tn-age-success-ink);
  background: var(--tn-age-success-bg);
  border-color: var(--tn-age-success-line);
}

.tn-age-primary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
  padding: 14px;
  background: var(--tn-age-wash);
  border: 1px solid var(--tn-age-line);
  min-width: 0;
  overflow: hidden;
}

.tn-age-primary span {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--tn-age-ink);
  -webkit-text-fill-color: var(--tn-age-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 8vw, 86px);
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tn-age-primary b {
  align-self: center;
  min-width: 0;
  max-width: 100%;
  color: var(--tn-age-muted);
  -webkit-text-fill-color: var(--tn-age-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tn-age-primary p {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--tn-age-muted);
  -webkit-text-fill-color: var(--tn-age-muted);
  font-size: 13.5px;
  line-height: 1.38;
  font-weight: 800;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tn-age-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.tn-age-detail-grid > div {
  min-width: 0;
  padding: 8px;
  background: var(--tn-age-panel);
  border: 1px solid var(--tn-age-soft-line);
}

.tn-age-detail-grid span,
.tn-age-detail-grid strong {
  display: block;
  min-width: 0;
}

.tn-age-detail-grid span {
  margin: 0 0 4px;
  color: var(--tn-age-muted);
  -webkit-text-fill-color: var(--tn-age-muted);
  font-size: 11.5px;
  line-height: 1.15;
  font-weight: 850;
}

.tn-age-detail-grid strong {
  color: var(--tn-age-ink);
  -webkit-text-fill-color: var(--tn-age-ink);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tn-age-notice {
  margin: 10px 0 0;
  padding: 8px 10px;
  color: var(--tn-age-muted);
  -webkit-text-fill-color: var(--tn-age-muted);
  background: var(--tn-age-wash);
  border: 1px solid var(--tn-age-soft-line);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
  word-break: keep-all;
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-page {
  --tn-age-paper: #201811;
  --tn-age-wash: #2b2119;
  --tn-age-panel: #241c15;
  --tn-age-ink: #f7ebd8;
  --tn-age-muted: #d8c4a6;
  --tn-age-line: #8b7558;
  --tn-age-soft-line: #5b4934;
  --tn-age-accent: #f0a15f;
  --tn-age-primary-bg: #6a3b1f;
  --tn-age-primary-ink: #f7ead1;
  --tn-age-secondary-bg: #2f2115;
  --tn-age-secondary-ink: #f7ead1;
  --tn-age-secondary-line: #826744;
  --tn-age-danger-bg: #4b241d;
  --tn-age-danger-ink: #ffd4c8;
  --tn-age-success-bg: #24351f;
  --tn-age-success-ink: #f3ffe5;
  --tn-age-success-line: #86a564;
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-tool,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-pane,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-primary,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-detail-grid > div,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-notice,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-status {
  color: var(--tn-age-ink);
  -webkit-text-fill-color: var(--tn-age-ink);
}

html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-tool,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-pane,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-primary,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-detail-grid > div,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-notice,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-status {
  color: var(--tn-age-ink);
  -webkit-text-fill-color: var(--tn-age-ink);
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-field input,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-field input {
  color: var(--tn-age-ink);
  -webkit-text-fill-color: var(--tn-age-ink);
  background: #1b140f;
  color-scheme: dark;
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-kicker,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-field,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-primary b,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-primary p,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-detail-grid span,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-notice,
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-status,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-kicker,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-field,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-primary b,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-primary p,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-detail-grid span,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-notice,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-status {
  color: var(--tn-age-muted);
  -webkit-text-fill-color: var(--tn-age-muted);
}

body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-l="dark"], [data-scheme="auto"][data-d="dark"]) .tn-age-status[data-tone="success"],
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-age-status[data-tone="success"] {
  color: var(--tn-age-success-ink);
  -webkit-text-fill-color: var(--tn-age-success-ink);
  background: var(--tn-age-success-bg);
  border-color: var(--tn-age-success-line);
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-age-page {
    --tn-age-paper: #201811;
    --tn-age-wash: #2b2119;
    --tn-age-panel: #241c15;
    --tn-age-ink: #f7ebd8;
    --tn-age-muted: #d8c4a6;
    --tn-age-line: #8b7558;
    --tn-age-soft-line: #5b4934;
    --tn-age-accent: #f0a15f;
    --tn-age-primary-bg: #6a3b1f;
    --tn-age-primary-ink: #f7ead1;
    --tn-age-secondary-bg: #2f2115;
    --tn-age-secondary-ink: #f7ead1;
    --tn-age-secondary-line: #826744;
    --tn-age-danger-bg: #4b241d;
    --tn-age-danger-ink: #ffd4c8;
    --tn-age-success-bg: #24351f;
    --tn-age-success-ink: #f3ffe5;
    --tn-age-success-line: #86a564;
  }

  body[data-scheme="auto"] .tn-age-field input {
    color: var(--tn-age-ink);
    -webkit-text-fill-color: var(--tn-age-ink);
    background: #1b140f;
    color-scheme: dark;
  }

  body[data-scheme="auto"] .tn-age-button--primary {
    color: var(--tn-age-primary-ink);
    -webkit-text-fill-color: var(--tn-age-primary-ink);
    background: var(--tn-age-primary-bg);
  }

  body[data-scheme="auto"] .tn-age-button--quiet {
    color: var(--tn-age-secondary-ink);
    -webkit-text-fill-color: var(--tn-age-secondary-ink);
    background: var(--tn-age-secondary-bg);
  }

  body[data-scheme="auto"] .tn-age-status[data-tone="success"] {
    color: var(--tn-age-success-ink);
    -webkit-text-fill-color: var(--tn-age-success-ink);
    background: var(--tn-age-success-bg);
    border-color: var(--tn-age-success-line);
  }
}

@media (max-width: 760px) {
  .tn-age-tool { padding: 9px; }
  .tn-age-workspace { grid-template-columns: 1fr; gap: 8px; }
  .tn-age-pane { padding: 10px; }
  .tn-age-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .tn-age-page { width: min(100% - 10px, 1180px); }
  .tn-age-date-row { gap: 6px; }
  .tn-age-field input { height: 36px; padding: 6px; font-size: 12px; }
  .tn-age-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .tn-age-button { height: 34px; min-height: 34px; padding: 0 3px; font-size: 11px; letter-spacing: -.04em; }
  .tn-age-primary { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 12px; }
  .tn-age-primary span { font-size: clamp(38px, 13vw, 54px); }
  .tn-age-primary b { font-size: 11.5px; }
  .tn-age-detail-grid { gap: 5px; }
  .tn-age-detail-grid > div { padding: 7px 6px; }
  .tn-age-detail-grid strong { font-size: 12px; }
}

@media (max-width: 370px) {
  .tn-age-tool { padding: 8px 6px; }
  .tn-age-pane { padding: 8px; }
  .tn-age-date-row { grid-template-columns: 1fr; }
  .tn-age-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tn-age-actions .tn-age-button:nth-child(3) { grid-column: span 1; }
}