:root {
  --td-ink: #17221c;
  --td-muted: #526057;
  --td-paper: #f8f8ef;
  --td-line: #cdd3c6;
  --td-deep: #121e19;
  --td-lime: #ddf95a;
  --td-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 20px; }
body { margin: 0; background: var(--td-paper); color: var(--td-ink); font: 16px/1.62 "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, p, figure, dl { margin: 0; }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
::selection { background: var(--td-lime); color: var(--td-deep); }
:focus-visible { outline: 2px solid #466322; outline-offset: 4px; }
.td-skip { position: fixed; z-index: 3; top: 8px; left: 8px; transform: translateY(-150%); background: var(--td-lime); color: var(--td-deep); padding: 10px 15px; }
.td-skip:focus { transform: translateY(0); }
.td-wrap { width: min(calc(100% - 88px), 1216px); margin-inline: auto; }
.td-footer { display: flex; align-items: center; justify-content: space-between; gap: 13px 26px; }
.td-footer nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.td-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .87rem; font-weight: 650; }
.td-footer nav a:hover { text-decoration: underline; text-underline-offset: .25em; }
.td-hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 65% 40%, #20362b 0%, var(--td-deep) 70%);
  color: #f9fbef;
}
.td-hero-visual { position: relative; }
.td-particles { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.td-hero :focus-visible { outline-color: var(--td-lime); }
.td-hero-grid { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1fr); align-items: center; gap: clamp(26px, 5vw, 74px); padding-block: clamp(38px, 5.7vw, 79px); }
.td-index { color: var(--td-lime); font-size: .85rem; font-weight: 720; }
.td-intro h1 { margin-top: 15px; font-size: clamp(2.48rem, 4.85vw, 4.65rem); line-height: 1.13; letter-spacing: -.066em; font-weight: 800; }
.td-intro p { max-width: 32ch; margin-top: 20px; color: #c5d0c6; font-size: clamp(1rem, 1.5vw, 1.14rem); }
.td-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 21px; margin-top: 27px; }
.td-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; width: fit-content; min-height: 48px; padding: 8px 16px; background: var(--td-lime); border: 1px solid var(--td-lime); border-radius: 3px; color: var(--td-deep); font-size: .92rem; font-weight: 780; cursor: pointer; }
.td-button:hover { background: #ecff9c; }
.td-link { display: inline-flex; align-items: center; gap: 7px; color: #2d5024; min-height: 44px; font-size: .92rem; font-weight: 720; text-decoration: underline; text-underline-offset: .27em; }
.td-hero .td-link { color: #e7eddf; }
.td-hero-photo { min-width: 0; overflow: hidden; border: 1px solid #405247; border-radius: 7px; background: #1a2821; }
.td-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.td-hero-photo figcaption, .td-evidence-head, .td-workflow-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px 12px; }
.td-hero-photo figcaption { min-height: 45px; padding-inline: 13px 3px; color: #ced8cf; font-size: .78rem; }
.td-hero-photo figcaption span:first-child { font-weight: 670; }
.td-motion-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 3px; color: #e0e9df; background: transparent; cursor: pointer; }
.td-motion-toggle[hidden], .td-motion-toggle:not([aria-pressed="true"]) .td-motion-play, .td-motion-toggle[aria-pressed="true"] .td-motion-pause { display: none; }
.td-motion-toggle:hover { background: #2a4032; }
.td-motion-toggle:focus-visible { outline-offset: -3px; }
.td-workflow-head .td-motion-toggle { color: #3f573e; }
.td-workflow-head .td-motion-toggle:hover { background: #e8eddb; }
.td-sample { width: fit-content; padding: 3px 8px; border: 1px solid var(--td-line); border-radius: 3px; color: var(--td-muted); font-size: .76rem; font-weight: 650; }
.td-section { padding-block: clamp(42px, 6vw, 74px); }
.td-section-head h2 { font-size: clamp(1.76rem, 3.55vw, 3.04rem); line-height: 1.18; letter-spacing: -.058em; font-weight: 790; }
.td-section-head p { margin-top: 10px; color: var(--td-muted); }
.td-section-head .td-link { margin-top: 8px; }
.td-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: clamp(9px,2vw,24px); padding: 0; margin: 23px 0 0; list-style: none; }
.td-flow li { min-width: 0; overflow: hidden; border: 1px solid var(--td-line); border-radius: 7px; background: #fdfdf8; }
.td-flow-image { overflow: hidden; background: #203027; }
.td-flow-visual { position: relative; }
.td-flow-image img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.td-flow-motion { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.td-flow-content { padding: clamp(12px,2vw,21px); }
.td-flow-title { display: flex; align-items: center; gap: 9px; }
.td-flow-title > span { flex: none; color: #50654a; font: 750 .8rem/1.3 var(--td-mono); }
.td-flow h3 { font-size: clamp(1.07rem,2vw,1.35rem); line-height: 1.35; }
.td-flow p { margin-top: 7px; color: var(--td-muted); font-size: .9rem; }
.td-step-details { margin-top: 9px; }
.td-step-details summary { min-height: 37px; padding-block: 6px; color: #345a2f; font-size: .83rem; font-weight: 690; cursor: pointer; }
.td-mini { overflow: hidden; border: 1px solid #d5ddd1; border-radius: 5px; background: #f0f3ed; }
.td-mini-bar { padding: 8px 11px; border-bottom: 1px solid #d5ddd1; color: #3c4e40; font-size: .79rem; font-weight: 720; }
.td-mini-body { display: grid; align-content: center; min-height: 96px; padding: 11px; }
.td-mini-field { display: grid; gap: 2px; min-width: 0; padding: 8px 9px; border: 1px solid #d1dad0; border-radius: 3px; background: #fff; color: #304d38; font: .75rem/1.45 var(--td-mono); }
.td-mini-field span:last-child { color: #465a49; }
.td-mini-row { display: flex; align-items: center; gap: 8px; font-size: .83rem; }
.td-mini-row small { display: block; color: var(--td-muted); }
.td-mini-file { flex: none; padding: 7px 6px; border: 1px solid #77916f; border-radius: 3px; color: #345a2f; font: 750 .75rem var(--td-mono); }
.td-mini-rows { padding-block: 5px; }
.td-mini-rows .td-mini-row { justify-content: space-between; padding-block: 4px; }
.td-mini-rows .td-mini-row + .td-mini-row { border-top: 1px solid #d5ddd1; }
.td-mini-chip { display: inline-block; padding: 2px 7px; border-radius: 3px; background: #dfead9; color: #214f32; font-size: .73rem; font-weight: 730; }
.td-results { border-block: 1px solid var(--td-line); background: #e9eee5; }
.td-evidence, .td-ai, .td-questions { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); align-items: center; gap: clamp(18px, 6vw, 90px); }
.td-evidence-board { padding: clamp(12px,2.6vw,23px); border: 1px solid var(--td-line); border-radius: 7px; background: #fdfdf8; }
.td-evidence-head { padding-bottom: 10px; border-bottom: 1px solid var(--td-line); }
.td-evidence-body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); align-items: center; gap: clamp(10px,2.3vw,26px); padding-top: 12px; }
.td-evidence-image { display: grid; place-items: center; gap: 7px; background: #182821; border-radius: 5px; padding: 10px; }
.td-evidence-image img { display: block; width: min(100%,150px); height: auto; border: 1px solid #57665e; border-radius: 4px; }
.td-evidence-image > span { color: #e7efe5; font-size: .76rem; text-decoration: underline; text-underline-offset: .22em; }
.td-evidence-body dl > div { padding-block: 9px; border-bottom: 1px solid var(--td-line); }
.td-evidence-body dt { color: var(--td-muted); font-size: .79rem; }
.td-evidence-body dd { margin: 1px 0 0; font-size: .95rem; font-weight: 680; }
.td-evidence-board figcaption { margin-top: 10px; color: var(--td-muted); font-size: .77rem; }
.td-ai { border-bottom: 1px solid var(--td-line); }
.td-ai .td-ai-guide { min-width: 0; padding: clamp(15px,3vw,26px); border: 1px solid var(--td-line); border-radius: 7px; background: #fdfdf8; }
.td-ai-guide p { color: var(--td-muted); font-size: .91rem; }
.td-ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.td-ai-status { color: #385332; font-size: .79rem; }
.td-ai-guide details { margin-top: 10px; }
.td-ai-guide summary, .td-faq summary { min-height: 44px; cursor: pointer; font-weight: 690; }
.td-ai-guide summary { padding: 9px 0; font-size: .86rem; }
.td-ai-guide textarea { display: block; width: 100%; padding: 10px; border: 1px solid var(--td-line); border-radius: 3px; color: var(--td-ink); background: #fcfcf7; font-size: .85rem; resize: vertical; }
.td-questions { align-items: start; }
.td-faq { border-top: 1px solid var(--td-ink); }
.td-faq details { border-bottom: 1px solid var(--td-line); }
.td-faq summary { padding-block: 11px; }
.td-faq p { padding-bottom: 13px; color: var(--td-muted); font-size: .9rem; }
.td-footer { flex-wrap: wrap; padding-block: 17px 23px; border-top: 1px solid var(--td-line); }
.td-company img { display: block; width: 118px; height: auto; }
.td-footer nav a { color: var(--td-muted); }
@media (prefers-reduced-motion: no-preference) {
  .td-hero-photo { animation: td-photo-in .58s ease-out both; }
  .td-flow li, .td-evidence-image, .td-button { transition: border-color .22s, box-shadow .22s, background-color .22s; }
  .td-flow-visual { transition: transform .36s ease-out; }
  .td-flow-visual.is-playing .td-flow-motion {
    visibility: visible;
    animation: td-flow-cycle 7s linear both;
  }

  .is-playing .td-link-source { stroke-dasharray: 1; animation: td-link-source .86s .24s both; }
  .is-playing .td-link-packet, .is-playing .td-link-tail {
    stroke-dasharray: .15 1;
    filter: drop-shadow(0 0 6px #bbeb75);
    animation: td-link-travel 1.22s 1.02s both;
  }
  .is-playing .td-link-tail { stroke-dasharray: .065 1; animation-delay: 1.13s; }
  .is-playing .td-link-received { animation: td-mark-in .36s 2.18s both; }

  .td-register-mark { --td-mark-delay: .42s; }
  .td-register-mark:nth-child(2) { --td-mark-delay: .99s; }
  .td-register-mark:nth-child(3) { --td-mark-delay: 1.56s; }
  .td-register-done { --td-mark-delay: 2.22s; }
  .td-result-done { --td-mark-delay: 2.88s; }
  .is-playing :is(.td-register-mark, .td-register-done, .td-result-done) { animation: td-mark-in .24s var(--td-mark-delay) both; }
  .is-playing .td-motion-tick {
    stroke-dasharray: 1;
    animation: td-mark-draw .31s calc(var(--td-mark-delay) + .09s) both;
  }

  .is-playing .td-result-scan { animation: td-screen-scan 1.48s .25s both; }
  .is-playing .td-result-row { stroke-dasharray: 1; animation: td-row-read .78s 1.7s both; }
  .is-playing .td-result-row-second { animation-delay: 2.26s; }
}
@keyframes td-photo-in {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes td-flow-cycle {
  0%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes td-link-source {
  from { opacity: 0; stroke-dashoffset: 1; }
  22%, 66% { opacity: 1; }
  70% { stroke-dashoffset: 0; }
  to { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes td-link-travel {
  from { opacity: 0; stroke-dashoffset: .15; }
  14%, 88% { opacity: 1; }
  to { opacity: 0; stroke-dashoffset: -.98; }
}
@keyframes td-mark-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes td-mark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes td-screen-scan {
  from { opacity: 0; transform: translateY(0); }
  18%, 82% { opacity: 1; }
  to { opacity: 0; transform: translateY(224px); }
}
@keyframes td-row-read {
  from { opacity: 0; stroke-dashoffset: 1; }
  60% { opacity: .42; stroke-dashoffset: 0; }
  to { opacity: .19; stroke-dashoffset: 0; }
}
@media (hover: hover) {
  .td-flow li:hover { border-color: #9daa97; box-shadow: 0 9px 20px #17221c15; }
  .td-evidence-image:hover { background: #2a4032; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .td-flow li:hover .td-flow-visual { transform: scale(1.035); }
}
@media (max-width: 890px) {
  .td-wrap { width: calc(100% - 48px); }
}
@media (max-width: 680px) {
  .td-wrap { width: calc(100% - 34px); }
  .td-hero-grid, .td-flow, .td-evidence, .td-ai, .td-questions { grid-template-columns: minmax(0,1fr); }
  .td-hero-grid { padding-block: 33px 25px; gap: 23px; }
  .td-intro h1 { font-size: clamp(2.48rem,9vw,3.65rem); }
  .td-intro p { margin-top: 12px; }
  .td-actions { margin-top: 16px; }
  .td-section-head h2 br { display: none; }
  .td-flow { gap: 12px; }
  .td-flow-image img { aspect-ratio: 16/9; }
  .td-mini-body { min-height: 74px; }
}