/* DOJITO tools 공통 디자인 틀 (dojo-ui) v1 — 2026-10-13 유나·서윤
   모든 웹툴이 같이 쓴다. 규칙·예시: tools/ui/README.md, 견본: tools/ui/kit.html, 지침: .claude/skills/design/SKILL.md
   구조 참고: shadcn/ui(MIT, © 2023 shadcn) 의 토큰 이름·부품 비율. 코드 복사 아님(순수 CSS 재작성).
   글꼴: Pretendard Variable(SIL OFL 1.1) — 페이지 <head> 에 kit.FONT_LINK 를 넣는다. 없으면 시스템 글꼴로 떨어진다.
   도구 고유 스타일은 이 파일 뒤에 이어 붙이고(빌드가 합침), 여기 토큰(var(--…))만 쓴다. 색 hex 를 도구 CSS 에 새로 쓰지 않는다. */

/* ---------- 1. 토큰 ---------- */
:root{
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  /* v1.1 (2026-10-14 T-20261014-153): 밝은 화면 색을 dojito.com 에 맞춤 — 글자 네이비 #0B1F3A, 보조 #51617D, 선 #E5E9F2/#D3DAE8, 바탕 #F5F7FB, 강조 파랑 #2952E3 하나 */
  --bg:#ffffff; --fg:#0b1f3a; --surface:#f5f7fb; --card:#ffffff;
  --muted:#f5f7fb; --muted-fg:#51617d;          /* 흰 바탕 대비 6.3:1 */
  --border:#e5e9f2; --input:#d3dae8;
  --primary:#2952e3; --primary-fg:#ffffff; --primary-soft:#eaf0fb;   /* dojito.com 파랑 — 링크·포커스·선택 (흰 바탕 6.2:1) */
  --danger:#b42318; --danger-soft:#fef3f2; --warn:#8a4b06; --warn-soft:#fff8e6; --ok:#067647;
  --ring:color-mix(in srgb,var(--primary) 35%,transparent);
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgb(24 24 27/.05); --shadow:0 1px 3px rgb(24 24 27/.06),0 1px 2px rgb(24 24 27/.04);
  /* 글자 크기: 13·14·16·18·22·30·40 (본문 16 기준 비율) */
  --t-xs:13px; --t-sm:14px; --t-base:16px; --t-lg:18px; --t-xl:22px; --t-2xl:30px; --t-3xl:40px;
  --container:1120px; --gutter:20px; --header-h:56px;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0b0b0d; --fg:#f4f4f5; --surface:#111114; --card:#141417;
  --muted:#1d1d21; --muted-fg:#a6a6b0; --border:#2a2a30; --input:#3c3c44;
  --primary:#93a6f6; --primary-fg:#0b0b0d; --primary-soft:#1a1f3a;
  --danger:#ff8a7a; --danger-soft:#2a1210; --warn:#f5c26b; --warn-soft:#271d08; --ok:#5fd39b;
  --shadow-sm:none; --shadow:none; color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b0b0d; --fg:#f4f4f5; --surface:#111114; --card:#141417;
  --muted:#1d1d21; --muted-fg:#a6a6b0; --border:#2a2a30; --input:#3c3c44;
  --primary:#93a6f6; --primary-fg:#0b0b0d; --primary-soft:#1a1f3a;
  --danger:#ff8a7a; --danger-soft:#2a1210; --warn:#f5c26b; --warn-soft:#271d08; --ok:#5fd39b;
  --shadow-sm:none; --shadow:none; color-scheme:dark;
}}

/* ---------- 2. 기본 요소 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--fg);font-family:var(--font-sans);font-size:var(--t-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;font-feature-settings:"ss06"}
h1,h2,h3{line-height:1.25;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:var(--t-2xl);font-weight:750}
h2{font-size:var(--t-xl);font-weight:700;margin:48px 0 14px}
h3{font-size:var(--t-lg);font-weight:650;margin:24px 0 8px}
p{margin:0 0 12px}
a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
strong{font-weight:650}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (min-width:768px){h1{font-size:var(--t-3xl)}}

/* ---------- 3. 레이아웃 ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:599px){:root{--gutter:16px}}
.page{padding-top:28px;padding-bottom:24px}
@media (min-width:768px){.page{padding-top:44px}}
.split{display:grid;gap:20px;margin:24px 0}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
  .split>.sticky-col{position:sticky;top:calc(var(--header-h) + 16px)}}
.prose{max-width:72ch}
.prose ol,.prose ul{padding-left:1.3em;margin:0 0 12px}.prose li{margin:6px 0}
.stack>*+*{margin-top:12px}

/* ---------- 4. 머리말 ---------- */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.site-header .bar{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:baseline;gap:8px;color:var(--fg);text-decoration:none;font-weight:750;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.brand-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:800;align-self:center}
.brand small{font-size:var(--t-xs);font-weight:500;color:var(--muted-fg);letter-spacing:0}
.site-nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 11px;border-radius:var(--radius-sm);color:var(--muted-fg);
  text-decoration:none;font-size:var(--t-sm);font-weight:500;white-space:nowrap}
.site-nav a:hover{color:var(--fg);background:var(--muted)}
.site-nav a[aria-current=page]{color:var(--fg);background:var(--muted);font-weight:650}
.theme-toggle{margin-left:auto;flex:none}
@media (max-width:899px){
  .site-header .bar{flex-wrap:wrap;gap:0 12px}
  .site-nav{order:3;flex-basis:100%;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}

/* ---------- 5. 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-sm);
  border:1px solid transparent;font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1;cursor:pointer;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.btn-primary{background:var(--fg);color:var(--bg)}.btn-primary:hover{background:color-mix(in srgb,var(--fg) 86%,var(--bg))}
.btn-outline{background:var(--card);color:var(--fg);border-color:var(--input)}.btn-outline:hover{background:var(--muted)}
.btn-ghost{background:transparent;color:var(--fg)}.btn-ghost:hover{background:var(--muted)}
.btn-lg{min-height:48px;padding:0 20px;font-size:var(--t-base)}
.btn-icon{width:40px;padding:0}
.btn svg{width:18px;height:18px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}

/* ---------- 6. 카드·배지·알림 ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
@media (max-width:599px){.card{padding:16px}}
.badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--muted-fg);font-size:var(--t-xs);font-weight:600;letter-spacing:0;white-space:nowrap;vertical-align:middle}
h1 .badge{position:relative;top:-.3em;margin-left:6px}
.alert{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:12px 14px;font-size:var(--t-sm);margin:12px 0;background:var(--card)}
.alert-warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--border));border-left-color:var(--warn);background:var(--warn-soft);color:var(--fg)}
.alert-danger{border-color:color-mix(in srgb,var(--danger) 40%,var(--border));border-left-color:var(--danger);background:var(--danger-soft);color:var(--fg)}
.alert-info{border-left-color:var(--primary);background:var(--primary-soft)}
.note{font-size:var(--t-sm);color:var(--muted-fg);line-height:1.6}
.lead{font-size:var(--t-lg);color:var(--muted-fg);max-width:62ch;margin:12px 0 0}
.lead strong{color:var(--fg)}
.crumb{font-size:var(--t-sm);color:var(--muted-fg);margin:0 0 12px}.crumb a{color:var(--muted-fg)}
.crumb a:hover{color:var(--fg)}

/* ---------- 7. 입력 ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid>.full,.form-grid>.chips{grid-column:1/-1}
.form-grid>.field:last-of-type:nth-of-type(odd):not(:has(~.field)){grid-column:1/-1}
.field{display:grid;gap:6px;align-content:start;font-size:var(--t-sm);font-weight:600;color:var(--fg);position:relative}
.field-hint{font-weight:400;color:var(--muted-fg);font-size:var(--t-xs)}
.input-wrap{position:relative;display:block}
.input{width:100%;min-width:0;min-height:46px;padding:0 12px;border:1px solid var(--input);border-radius:var(--radius);background:var(--card);color:var(--fg);
  font:inherit;font-size:var(--t-lg);font-weight:500;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.input:hover{border-color:color-mix(in srgb,var(--fg) 35%,var(--input))}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.input-wrap:has(.field-suffix) .input{padding-right:3.2em}
.field-suffix{position:absolute;right:12px;top:0;bottom:0;display:flex;align-items:center;color:var(--muted-fg);font-size:var(--t-sm);font-weight:500;pointer-events:none}
input[type=date].input{font-size:var(--t-base)}
@media (max-width:359px){.form-grid{grid-template-columns:1fr}}

/* 칩(빠른 선택·토글 묶음) */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips-label{flex-basis:100%;font-size:var(--t-sm);font-weight:600;color:var(--muted-fg)}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid var(--input);border-radius:var(--radius-sm);
  background:var(--card);color:var(--fg);font:inherit;font-size:var(--t-sm);font-weight:550;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s}
.chip:hover{background:var(--muted)}
.chip.on,.chip[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
@media (max-width:599px){.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.chips-label{grid-column:1/-1}
  .form-grid .input{font-size:17px;padding-left:10px}.form-grid .input-wrap:has(.field-suffix) .input{padding-right:2em}.form-grid .field-suffix{right:10px}
  .chips:has(.chip:nth-of-type(4):last-of-type){grid-template-columns:repeat(2,minmax(0,1fr))}
  .chip{padding:0 6px;min-height:42px}}

/* ---------- 8. 명세서(결과) — 이 틀의 대표 부품. 결과 숫자는 '종이 명세서'처럼: 위 큰 금액, 아래 항목 줄, 이중선 합계, 찢긴 아래끝 ---------- */
.slip{position:relative;background:var(--card);border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:22px 22px 26px;box-shadow:var(--shadow);margin:0 0 14px}
.slip::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-10px;height:10px;background:var(--card);
  border-left:1px solid var(--border);border-right:1px solid var(--border);
  -webkit-mask:radial-gradient(circle at 7px 10px,transparent 6px,#000 6.5px) -7px 0/14px 10px repeat-x;
          mask:radial-gradient(circle at 7px 10px,transparent 6px,#000 6.5px) -7px 0/14px 10px repeat-x}
.slip-label{font-size:var(--t-sm);font-weight:600;color:var(--muted-fg);margin:0}
.slip-total{display:block;font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:4px 0 0;font-variant-numeric:tabular-nums;color:var(--fg)}
.slip-total small{font-size:.5em;font-weight:700;margin-left:2px;letter-spacing:0}
.slip-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:12px 0 0;padding:0;list-style:none;font-size:var(--t-sm);color:var(--muted-fg)}
.slip-meta b{color:var(--fg);font-weight:650;font-variant-numeric:tabular-nums;margin-left:4px}
.slip-lines{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:15px;border:0;background:none}
.slip-lines caption{caption-side:top;text-align:left;font-size:var(--t-xs);font-weight:650;color:var(--muted-fg);padding:0 0 6px;background:none}
.slip-lines th,.slip-lines td{padding:9px 0;border:0;border-top:1px dashed var(--border);text-align:left;font-weight:450;background:none;vertical-align:top}
.slip-lines thead th{border-top:0;font-size:var(--t-xs);font-weight:650;color:var(--muted-fg);padding-top:0}
.slip-lines .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:550}
.slip-lines .num~.num{padding-left:16px}
.slip-lines tr.minus td.num{color:var(--muted-fg)}
.slip-lines tr.sum td{border-top:3px double var(--fg);font-weight:750;font-size:var(--t-base);padding-top:12px}
.slip-lines .why{display:block;color:var(--muted-fg);font-size:var(--t-xs);font-weight:400;margin-top:1px}
.slip-lines tr.sum td.num{color:var(--fg)}
.slip .note{margin:14px 0 0}
@media (min-width:600px){.slip{padding:26px 28px 30px}.slip-total{font-size:52px}}
@media (max-width:359px){.slip-total{font-size:38px}}

/* ---------- 9. 표 ---------- */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:auto;background:var(--card);-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table caption{text-align:left;font-weight:650;padding:12px 14px;border-bottom:1px solid var(--border)}
.table th,.table td{padding:11px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table thead th{font-size:var(--t-xs);font-weight:650;color:var(--muted-fg);background:var(--surface);white-space:nowrap}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:color-mix(in srgb,var(--muted) 60%,transparent)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table td.sub{color:var(--muted-fg);font-size:var(--t-sm)}
.table tr.hl td{background:var(--primary-soft);font-weight:650}
.table a{font-weight:550}
.table-wrap.tall{max-height:75vh}
.table-wrap.tall thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--border)}
@media (max-width:599px){.table{font-size:14px}.table th,.table td{padding:9px 10px}}

/* ---------- 10. 접기(자주 묻는 질문) ---------- */
.accordion{border-top:1px solid var(--border);max-width:72ch}
.accordion details{border-bottom:1px solid var(--border)}
.accordion summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:12px 0;cursor:pointer;font-weight:600;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted-fg);border-bottom:2px solid var(--muted-fg);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.accordion details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.accordion summary:hover{text-decoration:underline;text-underline-offset:3px}
.accordion details p{margin:0 0 16px;color:var(--muted-fg)}

/* ---------- 11. 링크 카드(다른 도구) ---------- */
.link-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.link-grid li{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:14px 16px;font-size:var(--t-sm);color:var(--muted-fg);line-height:1.5;transition:border-color .15s}
.link-grid li:hover{border-color:color-mix(in srgb,var(--fg) 40%,var(--border))}
.link-grid a{display:block;color:var(--fg);font-size:var(--t-base);font-weight:650;text-decoration:none;margin-bottom:2px}
.link-grid a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.link-grid a:focus-visible{outline:none}.link-grid li:has(a:focus-visible){box-shadow:0 0 0 3px var(--ring)}

/* ---------- 12. 바닥글·광고·빈 화면 ---------- */
.site-footer{margin-top:64px;border-top:1px solid var(--border);background:var(--bg);color:var(--muted-fg);font-size:var(--t-sm)}
.site-footer .container{padding-top:28px;padding-bottom:36px}
.site-footer p{max-width:80ch;margin:0 0 10px}
.site-footer a{color:var(--fg)}
.site-footer .foot-brand{color:var(--fg);font-weight:650}
.ad{margin:32px 0;min-height:100px;position:relative;border:1px dashed var(--input);border-radius:var(--radius);background:var(--card)}
.ad-label{position:absolute;top:4px;left:10px;font-size:var(--t-xs);color:var(--muted-fg)}
.ad:not(:has(ins)){display:none}
.empty{padding:32px 0 8px}
.empty-code{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:0 0 12px;color:var(--muted-fg);font-variant-numeric:tabular-nums}
.empty .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* --- korean-verbs --- */
[lang=ko]{word-break:keep-all}
.chip small{margin-left:6px;font-size:var(--t-xs);opacity:.75}
.who .chip{flex:1 1 auto}
@media (max-width:599px){.who{grid-template-columns:1fr!important}.who .chip{justify-content:space-between;padding:0 14px}}
.slip-total{word-break:keep-all}
.steps td.n{width:2.2em;color:var(--muted-fg);font-variant-numeric:tabular-nums;font-weight:650}
.steps tr{animation:kv-in .25s ease-out both;animation-delay:calc(var(--i) * 60ms)}
@keyframes kv-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.muted{color:var(--muted-fg)}
.grid th[scope=row]{font-size:var(--t-sm);color:var(--muted-fg);white-space:nowrap}
.grid td{padding:6px 8px}
.cell{width:100%;min-height:40px;padding:6px 10px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--fg);font:inherit;font-size:var(--t-base);font-weight:550;text-align:left;cursor:pointer}
.cell:hover{background:var(--muted)}
.cell.on{background:var(--fg);color:var(--bg)}
.cell:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--primary);text-decoration:underline;cursor:pointer}
.up{margin-top:40px}.up h2{margin-top:0}
.soon{margin:0}
.buyrow{display:grid;gap:10px;justify-items:start}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);min-height:44px;cursor:pointer}
.agree input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--fg)}
.btn.off{background:var(--muted);color:var(--muted-fg);pointer-events:none}
.score{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:var(--header-h);z-index:5;background:var(--surface);padding:10px 0;margin:16px 0 0}
.quiz{list-style:none;margin:8px 0 24px;padding:0;display:grid;gap:12px;counter-reset:q}
.quiz li{counter-increment:q}
.qwho::before{content:counter(q) ". ";color:var(--muted-fg);font-weight:650}
.qopts{display:grid;gap:8px;margin:10px 0 0}
.qopts .chip{justify-content:flex-start;white-space:normal;text-align:left;min-height:44px;padding:8px 14px;font-size:var(--t-base)}
.qopts .chip.right{border-color:var(--ok);box-shadow:inset 3px 0 0 var(--ok)}
.qopts .chip.okay{border-color:var(--primary);box-shadow:inset 3px 0 0 var(--primary)}
.qopts .chip.wrong{border-color:var(--danger);box-shadow:inset 3px 0 0 var(--danger)}
.qopts .chip:disabled{cursor:default;color:var(--fg)}
.why{margin:10px 0 0}
.toc{margin:16px 0 0}.toc .chip{text-decoration:none}
@media (max-width:599px){.toc{display:flex}}
@media (max-width:1023px){.split{grid-template-columns:minmax(0,1fr)}}
.ctl>.card+.card{margin-top:12px}
.opts select.input{font-size:var(--t-base)}
@media (max-width:1023px){.ctl{display:contents}#kv-form{order:0}.res{order:1}#kv-opts{order:2}}
@media (max-width:599px){#kv-form .chips{display:flex}#kv-form .chip{min-height:40px;padding:0 12px}}
.cell{white-space:nowrap}