/* ROBERIN 강아지 나이 계산기 - The New workspace (20260717b)
 * Scope: .tn-da-* only. Input = full-width field bar (breed select + age + size). Result = desktop
 * 2-column: summary left (big age + life-stage scale + remaining-life meter), detail right
 * (2x2 method-comparison cards + breed-info card) to fill the width densely. Warm newsprint palette,
 * scheme-flipping tokens (dark #8), no left rails (#30), empty-load renders the scale frame (#10). */

.tn-da-page { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; color: #1a1208; -webkit-text-fill-color: currentColor; }
.tn-da-page, .tn-da-page * { box-sizing: border-box; }

.tn-da-tool {
  --da-ink: #1a1208; --da-muted: #5a4a30; --da-line: #b8a888; --da-soft: #ddd4be;
  --da-paper: #faf6ee; --da-wash: #f5efdf;
  --da-surface: rgba(255, 252, 244, 0.74); --da-card: rgba(255, 252, 244, 0.5); --da-chip-bg: rgba(255, 252, 244, 0.4);
  --da-accent: #c44a00; --da-on-accent: #fbf4e8;
  --da-btn-sec-bg: #ede6d4; --da-btn-sec-hover: #dfd4bb; --da-btn-sec-text: #1a1208;
  margin: 0 auto 18px; border-top: 2px solid var(--da-ink); border-bottom: 1px solid var(--da-line);
  background: linear-gradient(180deg, var(--da-paper), var(--da-wash));
  color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); color-scheme: light;
  padding: 18px; display: grid; gap: 14px;
}
.tn-da-tool ul, .tn-da-tool ol, .tn-da-tool li, .tn-da-tool dd { margin: 0; padding: 0; list-style: none; }
.tn-da-tool dl, .tn-da-tool dt, .tn-da-tool p { margin: 0; padding: 0; }

/* ---- full-width input field bar ---- */
.tn-da-fieldbar { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px minmax(220px, auto) minmax(150px, auto); gap: 10px; align-items: end; }
.tn-da-field { display: grid; gap: 5px; min-width: 0; margin: 0; border: 0; background: none; }
.tn-da-field > span { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.02em; }
.tn-da-control { display: flex; align-items: center; min-width: 0; height: 40px; border: 1px solid var(--da-line); background: var(--da-surface); }
.tn-da-control input, .tn-da-control select { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; outline: 0; appearance: none; -webkit-appearance: none; }
.tn-da-control input::placeholder { color: var(--da-muted); opacity: 0.5; -webkit-text-fill-color: var(--da-muted); }
.tn-da-control input:focus-visible, .tn-da-control select:focus-visible { outline: 2px solid var(--da-accent); outline-offset: -2px; }
.tn-da-control--suffix b { display: inline-flex; align-items: center; padding: 0 9px; border-left: 1px solid var(--da-soft); color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: nowrap; }
/* breed select with chevron affordance */
.tn-da-control--select { position: relative; }
.tn-da-control--select select { padding-right: 30px; cursor: pointer; font: 700 14px/1 "Noto Sans KR", system-ui, sans-serif; }
.tn-da-control--select::after { content: ""; position: absolute; top: 50%; right: 12px; width: 8px; height: 8px; border-right: 1.5px solid var(--da-muted); border-bottom: 1.5px solid var(--da-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.tn-da-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 40px; border: 1px solid var(--da-line); background: var(--da-chip-bg); overflow: hidden; }
.tn-da-size { height: 40px; border: 0; border-right: 1px solid var(--da-line); border-radius: 0; background: transparent; color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tn-da-size:last-child { border-right: 0; }
.tn-da-size.is-active { background: var(--da-accent); color: var(--da-on-accent); -webkit-text-fill-color: var(--da-on-accent); }
.tn-da-size:focus-visible { outline: 2px solid var(--da-accent); outline-offset: -3px; }

.tn-da-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-da-actions > button { display: grid; place-items: center; height: 40px; padding: 0 12px; border: 1px solid var(--da-line); border-radius: 0; background: var(--da-btn-sec-bg); color: var(--da-btn-sec-text); -webkit-text-fill-color: var(--da-btn-sec-text); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; letter-spacing: 0.02em; cursor: pointer; transition: background-color .15s ease; }
.tn-da-actions > button:hover { background: var(--da-btn-sec-hover); }
.tn-da-actions > button:focus-visible { outline: 2px solid var(--da-accent); outline-offset: 2px; }

.tn-da-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-da-chip { flex: 0 0 auto; min-height: 30px; padding: 0 11px; border: 1px solid var(--da-line); border-radius: 0; background: var(--da-chip-bg); color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; cursor: pointer; transition: background-color .15s ease; }
.tn-da-chip:hover { background: var(--da-btn-sec-hover); }
.tn-da-chip:focus-visible { outline: 2px solid var(--da-accent); outline-offset: 2px; }

.tn-da-status { min-height: 18px; color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tn-da-status[data-state="error"] { color: #b3341a; -webkit-text-fill-color: #b3341a; }
.tn-da-status[data-state="success"] { color: #3f6d2f; -webkit-text-fill-color: #3f6d2f; }

/* ---- result: desktop 2-column (summary left / detail right) ---- */
.tn-da-result { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 12px; align-items: start; }
.tn-da-summary, .tn-da-detail { display: grid; gap: 10px; align-content: start; min-width: 0; }

.tn-da-main { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--da-line); background: var(--da-surface); }
.tn-da-main > span { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.tn-da-main > strong { font: 700 clamp(30px, 5.4vw, 46px)/1.08 "Times New Roman", Times, Georgia, serif; color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; white-space: nowrap; }
.tn-da-main > em { min-height: 17px; color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-style: normal; }

/* life-stage scale (visual affordance #15) */
.tn-da-scale { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--da-soft); background: var(--da-card); }
.tn-da-scale-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tn-da-scale-title { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.tn-da-scale-stage { color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tn-da-scale-track { position: relative; padding-top: 8px; }
.tn-da-scale-zones { display: flex; height: 36px; border: 1px solid var(--da-line); background: var(--da-surface); overflow: hidden; }
.tn-da-zone { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; border-right: 1px solid var(--da-soft); background: var(--da-chip-bg); }
.tn-da-zone:last-child { border-right: 0; }
.tn-da-zone em { padding: 0 2px; color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 9.5px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-da-zone.is-active { background: color-mix(in srgb, var(--da-accent) 24%, var(--da-surface)); }
.tn-da-zone.is-active em { color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); }
.tn-da-marker { position: absolute; top: 2px; bottom: 0; left: 0; width: 2px; background: var(--da-accent); opacity: 0; transform: translateX(-1px); transition: left .25s ease, opacity .15s ease; }
.tn-da-marker::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--da-accent); }

/* remaining-life meter */
.tn-da-remain { display: grid; gap: 7px; padding: 12px 14px; border: 1px solid var(--da-soft); background: var(--da-card); }
.tn-da-remain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tn-da-remain-title { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.tn-da-remain-value { color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font: 700 15px/1.2 "Times New Roman", Times, Georgia, serif; font-variant-numeric: tabular-nums lining-nums; }
.tn-da-remain-track { position: relative; height: 10px; background: var(--da-surface); border: 1px solid var(--da-line); overflow: hidden; }
.tn-da-remain-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--da-accent); opacity: 0.75; transition: width .25s ease; }
.tn-da-remain-foot { display: flex; justify-content: space-between; color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* method comparison — 2x2 dense cards */
.tn-da-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-da-method { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid var(--da-soft); background: var(--da-card); }
.tn-da-method--primary { border-color: var(--da-line); background: var(--da-surface); }
.tn-da-method dt { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.02em; }
.tn-da-method dd { color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font: 700 20px/1.15 "Times New Roman", Times, Georgia, serif; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tn-da-method .tn-da-method-note { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 500 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* breed info card */
.tn-da-breedcard { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--da-line); background: var(--da-surface); }
.tn-da-breedcard-title { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.tn-da-breedcard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-da-breedcard-grid > div { display: grid; gap: 2px; }
.tn-da-breedcard-grid dt { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tn-da-breedcard-grid dd { color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); font: 700 14px/1.25 "Times New Roman", Times, Georgia, serif; font-variant-numeric: tabular-nums lining-nums; }
.tn-da-breednote { color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 500 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.tn-da-disclaimer { margin: 0; color: var(--da-muted); -webkit-text-fill-color: var(--da-muted); font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* big result number: lining figures (Times) + smaller muted unit, baseline-aligned (fixes number/unit height) */
.tn-da-main > strong .tn-da-num { font-variant-numeric: tabular-nums lining-nums; }
.tn-da-main > strong .tn-da-unit { font-size: 0.52em; font-weight: 700; opacity: 0.72; margin-inline-start: 0.06em; vertical-align: baseline; -webkit-text-fill-color: currentColor; }

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .tn-da-fieldbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-da-field--breed, .tn-da-field--size, .tn-da-field--actions { grid-column: 1 / -1; }
  .tn-da-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .tn-da-methods { grid-template-columns: minmax(0, 1fr); }
  .tn-da-zone em { font-size: 8px; }
}

/* ---- Dark / inverse / auto-dark: scheme tokens + text-fill (#8) ---- */
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-d="dark"], [data-scheme="auto"][data-l="dark"]):not([data-scheme="light"]) .tn-da-tool,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-da-tool,
html[data-scheme="inverse"] body:not([data-scheme="light"]) .tn-da-tool {
  --da-ink: #efe6d2; --da-muted: #c3b492; --da-line: #6f6047; --da-soft: #574a37;
  --da-paper: #241d12; --da-wash: #2c2417;
  --da-surface: rgba(58, 48, 32, 0.5); --da-card: rgba(58, 48, 32, 0.5); --da-chip-bg: rgba(58, 48, 32, 0.36);
  --da-accent: #e8823f; --da-on-accent: #241d12;
  --da-btn-sec-bg: #33291a; --da-btn-sec-hover: #453720; --da-btn-sec-text: #efe6d2;
  color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"]:not([data-scheme="light"]) .tn-da-tool {
    --da-ink: #efe6d2; --da-muted: #c3b492; --da-line: #6f6047; --da-soft: #574a37;
    --da-paper: #241d12; --da-wash: #2c2417;
    --da-surface: rgba(58, 48, 32, 0.5); --da-card: rgba(58, 48, 32, 0.5); --da-chip-bg: rgba(58, 48, 32, 0.36);
    --da-accent: #e8823f; --da-on-accent: #241d12;
    --da-btn-sec-bg: #33291a; --da-btn-sec-hover: #453720; --da-btn-sec-text: #efe6d2;
    color: var(--da-ink); -webkit-text-fill-color: var(--da-ink); color-scheme: dark;
  }
}