npm - zugzbot - Versions diffs - 1.0.21 → 1.0.22 - Mend

zugzbot 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1271) hide show

package/.opencode/oh-my-design/web/references/kraken/preview.html DELETED Viewed

@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Design System Inspired by Kraken</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
-<style>
-  :root { --white:#fff; --black:#101114; --purple:#7132f5; --purple-dark:#5741d8; --purple-subtle:rgba(133,91,251,0.16); --gray:#686b82; --silver:#9497a9; --border:#dedee5; --green:rgba(20,158,97,0.16); --green-text:#026b3f; --font:'IBM Plex Sans',Helvetica,Arial,sans-serif; }
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body { background:var(--white); color:var(--black); font-family:var(--font); font-size:16px; line-height:1.38; -webkit-font-smoothing:antialiased; }
-  .nav { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; background:var(--white); border-bottom:1px solid var(--border); }
-  .nav-brand { font-size:16px; font-weight:700; color:var(--black); text-decoration:none; }
-  .nav-links { display:flex; gap:20px; list-style:none; }
-  .nav-links a { font-size:14px; font-weight:500; color:var(--gray); text-decoration:none; }
-  .nav-links a:hover { color:var(--purple); }
-  .nav-cta { display:inline-block; background:var(--purple); color:var(--white); padding:10px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; }
-  .hero { padding:64px 24px; text-align:center; }
-  .hero h1 { font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px; margin-bottom:16px; }
-  .hero h1 span { color:var(--purple); }
-  .hero p { font-size:16px; color:var(--silver); max-width:480px; margin:0 auto 24px; }
-  .hero-buttons { display:flex; gap:12px; justify-content:center; }
-  .btn-purple { display:inline-block; background:var(--purple); color:var(--white); padding:13px 24px; border-radius:12px; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
-  .btn-outline { display:inline-block; background:var(--white); color:var(--purple-dark); padding:12px 24px; border-radius:12px; border:1px solid var(--purple-dark); font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; }
-  .btn-subtle { display:inline-block; background:var(--purple-subtle); color:var(--purple); padding:8px 16px; border-radius:12px; font-size:14px; font-weight:500; text-decoration:none; }
-  .btn-white { display:inline-block; background:var(--white); color:var(--black); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:500; text-decoration:none; box-shadow:rgba(0,0,0,0.03) 0px 4px 24px; }
-  .section { padding:48px 24px; max-width:1100px; margin:0 auto; }
-  .section-label { font-size:12px; font-weight:600; color:var(--silver); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
-  .section-title { font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px; margin-bottom:24px; }
-  .section-divider { border:none; border-top:1px solid var(--border); margin:0; }
-  .color-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
-  .color-swatch { border-radius:8px; overflow:hidden; border:1px solid var(--border); }
-  .color-swatch-block { height:60px; }
-  .color-swatch-info { padding:8px 10px; }
-  .color-swatch-name { font-size:12px; font-weight:600; margin-bottom:2px; }
-  .color-swatch-hex { font-size:10px; color:var(--silver); font-family:monospace; }
-  .color-swatch-role { font-size:9px; color:var(--silver); margin-top:2px; }
-  .color-group-label { font-size:12px; font-weight:600; color:var(--gray); margin:20px 0 8px; }
-  .type-sample { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(222,222,229,0.5); }
-  .type-sample:last-child { border-bottom:none; }
-  .type-meta { font-size:10px; color:var(--silver); margin-top:4px; font-family:monospace; }
-  .button-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .button-item { text-align:center; }
-  .button-label { font-size:10px; color:var(--silver); margin-top:6px; }
-  .card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px; }
-  .card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; }
-  .card h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
-  .card p { font-size:14px; color:var(--silver); }
-  .form-group { margin-bottom:16px; max-width:400px; }
-  .form-label { display:block; font-size:14px; font-weight:600; margin-bottom:4px; }
-  .form-input { width:100%; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; outline:none; }
-  .form-input:focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
-  .form-input--focus { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
-  .form-input--error { border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
-  .form-textarea { width:100%; min-height:80px; background:var(--white); color:var(--black); border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-family:var(--font); font-size:16px; resize:vertical; outline:none; }
-  .form-state-label { font-size:9px; color:var(--silver); margin-top:4px; }
-  .spacing-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
-  .spacing-item { text-align:center; }
-  .spacing-block { background:var(--purple); border-radius:3px; margin-bottom:4px; height:24px; }
-  .spacing-value { font-size:9px; color:var(--silver); font-family:monospace; }
-  .radius-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
-  .radius-item { text-align:center; }
-  .radius-box { width:52px; height:52px; background:var(--purple-subtle); margin-bottom:4px; }
-  .radius-label { font-size:9px; color:var(--silver); font-family:monospace; }
-  .elevation-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
-  .elevation-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
-  .elevation-label { font-size:13px; font-weight:600; margin-bottom:4px; }
-  .elevation-desc { font-size:9px; color:var(--silver); font-family:monospace; }
-  .footer { padding:24px; text-align:center; background:var(--black); color:var(--silver); font-size:12px; }
-  .footer a { color:var(--purple); text-decoration:underline; }
-  @media (max-width:768px) { .hero h1 { font-size:32px; } .nav-links { display:none; } .section { padding:32px 16px; } .card-grid { grid-template-columns:1fr; } }
-</style>
-</head>
-<body>
-<nav class="nav"><span class="nav-brand">awesome-design-md</span><ul class="nav-links"><li><a href="#colors">Colors</a></li><li><a href="#typography">Typography</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#cards">Cards</a></li><li><a href="#forms">Forms</a></li></ul><a class="nav-cta" href="#">Sign Up</a></nav>
-<section class="hero"><h1>Design System<br>Inspired by <span>Kraken</span></h1><p>Every color, font, and component — visualized with crypto-exchange precision.</p><div class="hero-buttons"><a class="btn-purple" href="#">Create Account</a><a class="btn-outline" href="#">Explore</a></div></section>
-<hr class="section-divider">
-<section class="section" id="colors"><div class="section-label">01 / Colors</div><h2 class="section-title">Color Palette</h2>
-<div class="color-group-label">Brand</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#7132f5"></div><div class="color-swatch-info"><div class="color-swatch-name">Kraken Purple</div><div class="color-swatch-hex">#7132f5</div><div class="color-swatch-role">Primary CTA</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#5741d8"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Dark</div><div class="color-swatch-hex">#5741d8</div><div class="color-swatch-role">Borders, outlined</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#5b1ecf"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#5b1ecf</div><div class="color-swatch-role">Deepest variant</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:rgba(133,91,251,0.16)"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Subtle</div><div class="color-swatch-hex">rgba(133,91,251,0.16)</div><div class="color-swatch-role">Subtle button bg</div></div></div>
-</div>
-<div class="color-group-label">Neutral</div>
-<div class="color-grid">
-<div class="color-swatch"><div class="color-swatch-block" style="background:#101114"></div><div class="color-swatch-info"><div class="color-swatch-name">Near Black</div><div class="color-swatch-hex">#101114</div><div class="color-swatch-role">Primary text</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#686b82"></div><div class="color-swatch-info"><div class="color-swatch-name">Cool Gray</div><div class="color-swatch-hex">#686b82</div><div class="color-swatch-role">Borders</div></div></div>
-<div class="color-swatch"><div class="color-swatch-block" style="background:#9497a9"></div><div class="color-swatch-info"><div class="color-swatch-name">Silver Blue</div><div class="color-swatch-hex">#9497a9</div><div class="color-swatch-role">Secondary text</div></div></div>
-</div></section>
-<hr class="section-divider">
-<section class="section" id="typography"><div class="section-label">02 / Typography</div><h2 class="section-title">Typography Scale</h2>
-<div class="type-sample"><div style="font-size:48px; font-weight:700; line-height:1.17; letter-spacing:-1px;">Display Hero</div><div class="type-meta">Kraken-Brand — 48px / 700 / 1.17 / -1px</div></div>
-<div class="type-sample"><div style="font-size:36px; font-weight:700; line-height:1.22; letter-spacing:-0.5px;">Section Heading</div><div class="type-meta">Kraken-Brand — 36px / 700 / 1.22 / -0.5px</div></div>
-<div class="type-sample"><div style="font-size:22px; font-weight:600; line-height:1.20;">Feature Title</div><div class="type-meta">Kraken-Product — 22px / 600 / 1.20</div></div>
-<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.38; color:var(--silver);">Body — Buy, sell, and trade crypto with Kraken. Trusted by millions worldwide.</div><div class="type-meta">Kraken-Product — 16px / 400 / 1.38</div></div>
-<div class="type-sample"><div style="font-size:14px; font-weight:600; line-height:1.71; color:var(--silver);">Caption — Last updated 2 min ago</div><div class="type-meta">Kraken-Product — 14px / 600 / 1.71</div></div>
-</section>
-<hr class="section-divider">
-<section class="section" id="buttons"><div class="section-label">03 / Buttons</div><h2 class="section-title">Buttons</h2>
-<div class="button-row">
-<div class="button-item"><a class="btn-purple" href="#">Create Account</a><div class="button-label">Primary Purple</div></div>
-<div class="button-item"><a class="btn-outline" href="#">Explore</a><div class="button-label">Purple Outlined</div></div>
-<div class="button-item"><a class="btn-subtle" href="#">Learn</a><div class="button-label">Purple Subtle</div></div>
-<div class="button-item"><a class="btn-white" href="#">Details</a><div class="button-label">White Shadow</div></div>
-</div></section>
-<hr class="section-divider">
-<section class="section" id="cards"><div class="section-label">04 / Cards</div><h2 class="section-title">Cards</h2>
-<div class="card-grid">
-<div class="card"><h3>Bitcoin (BTC)</h3><p>The most trusted cryptocurrency. Buy and sell with low fees on Kraken.</p></div>
-<div class="card"><h3>Ethereum (ETH)</h3><p>Smart contracts and DeFi. Trade ETH and hundreds of tokens.</p></div>
-<div class="card"><h3>Staking</h3><p>Earn rewards by staking your crypto. Flexible and bonded options available.</p></div>
-</div></section>
-<hr class="section-divider">
-<section class="section" id="forms"><div class="section-label">05 / Forms</div><h2 class="section-title">Forms</h2>
-<div class="form-group"><label class="form-label">Email</label><input class="form-input" type="email" placeholder="you@email.com"><div class="form-state-label">Default</div></div>
-<div class="form-group"><label class="form-label">Amount</label><input class="form-input form-input--focus" type="text" value="0.25 BTC"><div class="form-state-label">Focus (purple ring)</div></div>
-<div class="form-group"><label class="form-label">Address</label><input class="form-input form-input--error" type="text" value="invalid"><div class="form-state-label">Error</div></div>
-<div class="form-group"><label class="form-label">Note</label><textarea class="form-textarea" placeholder="Add a note..."></textarea></div>
-</section>
-<hr class="section-divider">
-<section class="section"><div class="section-label">06 / Spacing</div><h2 class="section-title">Spacing</h2>
-<div class="spacing-row"><div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div><div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div><div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div><div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div><div class="spacing-item"><div class="spacing-block" style="width:24px"></div><div class="spacing-value">24</div></div></div></section>
-<hr class="section-divider">
-<section class="section"><div class="section-label">07 / Radius</div><h2 class="section-title">Radius</h2>
-<div class="radius-row"><div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:12px"></div><div class="radius-label">12px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:16px"></div><div class="radius-label">16px</div></div><div class="radius-item"><div class="radius-box" style="border-radius:9999px; width:52px; height:52px;"></div><div class="radius-label">pill</div></div></div></section>
-<hr class="section-divider">
-<section class="section"><div class="section-label">08 / Elevation</div><h2 class="section-title">Depth</h2>
-<div class="elevation-grid"><div class="elevation-card"><div class="elevation-label">Flat</div><div class="elevation-desc">No shadow</div></div><div class="elevation-card" style="box-shadow:rgba(0,0,0,0.03) 0px 4px 24px;"><div class="elevation-label">Subtle</div><div class="elevation-desc">4px 24px at 0.03</div></div><div class="elevation-card" style="box-shadow:0 0 0 1px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div></div></section>
-<footer class="footer">Maintained by <a href="https://github.com/VoltAgent/voltagent" target="_blank" rel="noopener noreferrer" style="text-decoration:none;"><img src="https://github.com/VoltAgent.png?size=32" alt="VoltAgent" width="14" height="14" style="border-radius:3px;vertical-align:-2px;margin-right:3px;">VoltAgent</a> team</footer>
-</body>
-</html>

package/.opencode/oh-my-design/web/references/krds/.verification.md DELETED Viewed

@@ -1,373 +0,0 @@
-# KRDS — Verification Notes (deep re-verification 2026-05-08)
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:add-reference`
-Prior pass measured only 3 surfaces (home + buttons + 1 foundation). This deep pass walks the full KRDS site map and inspects 10+ live pages.
-## Tier 1 — live DOM (playwright getComputedStyle)
-### Surfaces inspected (G3 ≥2 → now 10)
-**Style pages (`/html/site/style/`)**
-- `style_02.html` — 색상 (Color) — full palette extraction (588 CSS vars enumerated, 88 base hex values for 8×11 grid)
-- `style_03.html` — 타이포그래피 (Typography) — Display / Heading / Body / Navigation / Label 전체 스케일
-- `style_05.html` — 레이아웃 (Layout) — 4 breakpoints + 1200px container + 8-pt grid
-**Component pages (`/html/site/component/`)**
-- `component_04_05.html` — 모달 (Modal) — radius/padding/size tokens
-- `component_04_06.html` — 배지 (Badge) — 9 semantic × outline/filled = 18 variants measured
-- `component_05_02.html` — 버튼 (Button) — 5 sizes × 6 variants (re-measured for delta)
-- `component_06_03.html` — 셀렉트 (Select) — 3 sizes × default/error/disabled
-- `component_06_04.html` — 태그 (Tag — filter chip) — pill variants 40/32/24
-- `component_09_03.html` — 텍스트 입력 (Text Input) — 5 sizes × default/focus/required/error/disabled
-**Map / index**
-- `index.html` (홈) — GNB navigation enumeration → 65 internal links mapped (9 style pages, ~55 component pages across 11 categories)
-### Site map (verified via GNB walk)
-**스타일 (9 pages)**: 디자인 스타일 소개 / 색상 / 타이포그래피 / 형태 / 레이아웃 / 아이콘 / 엘리베이션 / 선명한 화면 모드 / 디자인 토큰
-**컴포넌트 11 카테고리**:
-- 02_ 아이덴티티 (4 pages): 공식 배너 / 운영기관 식별자 / 헤더 / 푸터
-- 03_ 탐색 (6 pages): 건너뛰기 / 메인 메뉴 / 브레드크럼 / 사이드 메뉴 / 콘텐츠 내 탐색 / 페이지네이션
-- 04_ 레이아웃 및 표현 (13 pages): 구조화 목록 / 긴급 공지 / 달력 / 디스클로저 / 모달 / 배지 / 아코디언 / 이미지 / 캐러셀 / 탭 / 표 / 텍스트 목록 / 파비콘
-- 05_ 액션 (3 pages): 링크 / 버튼 / 플로팅
-- 06_ 선택 (5 pages): 라디오 / 체크박스 / 셀렉트 / 태그 / 토글 스위치
-- 07_ 피드백 (2 pages): 단계 표시기 / 스피너
-- 08_ 도움 (6 pages): 도움 패널 / 따라하기 패널 / 맥락적 도움말 / 코치마크 / 툴팁 / 음성지원
-- 09_ 입력 (4 pages): 날짜 / 텍스트 영역 / 텍스트 입력 / 파일 업로드
-- 10_ 설정 (2 pages): 언어 변경 / 화면 크기 조정
-- 11_ 콘텐츠 (2 pages): 접근 가능한 미디어 / 숨긴 콘텐츠
-- 12_ 모바일 (8 pages): 범위 슬라이더 / 뒤로가기 / 바텀시트 / 수량토글 / 토스트 / 스낵바 / 탭바 / 스플래시 스크린
-Foundation/principles 카테고리는 GNB에 없음 (구조 단순화: 스타일 → 컴포넌트 → 기본 패턴 → 서비스 패턴 → 소식 → KRDS 소개).
-### Raw observations — Color (style_02.html, NEW)
-KRDS 컬러 시스템 = 11단계 명도 (5/10/20/30/40/50/60/70/80/90/95) × 8 컬러군. Gray만 0(white)/100(black) 추가. 모든 토큰이 `--krds-color-light-<name>-<step>` (일반 모드) + `--krds-color-high-contrast-<name>-<step>` (선명한 화면 모드) 2-레이어.
-| Color | 5 | 50 (base) | 60 | 70 |
-|-------|---|-----------|-----|-----|
-| **Primary (정부 청색)** | `#ECF2FE` | **`#256EF4`** | **`#0B50D0`** | `#083891` |
-| Secondary (네이비) | `#EEF2F7` | `#346FB2` | `#1C589C` | `#063A74` |
-| Gray | `#F4F5F6` | `#6D7882` | `#58616A` | `#464C53` |
-| Point (정부 적색) | `#FBEFF0` | `#D63D4A` | `#AB2B36` | `#7A1F26` |
-| Danger | `#FDEFEC` | `#DE3412` | `#BD2C0F` | `#8A240F` |
-| Warning | `#FFF3DB` | `#9E6A00` (text) | `#8A5C00` | `#614100` |
-| Success | `#EAF6EC` | `#228738` | `#267337` | `#285D33` |
-| Information | `#E7F4FE` | `#0B78CB` | `#096AB3` | `#085691` |
-매직 넘버 (WCAG 대비율 보장):
-- 40 → 3:1
-- 50 → 4.5:1 (AA normal text)
-- 70 → 7:1 (AAA)
-- 90 → 15:1
-### Raw observations — Typography (style_03.html, NEW)
-Pretendard GOV 단일 폰트 / 400 + 700 두 두께 / line-height 150% 일괄.
-Display (배너 / 마케팅): Large 60 / Medium 44 / Small 36 (PC); 44 / 32 / 28 (mobile).
-Heading: xlarge **40/28**, large 32/24, medium 24/22, small 19/19, xsmall 17/17, xxsmall 15/15.
-Body: large 19, **medium 17 (default)**, small 15, xsmall 13. 각각 bold(700) / regular(400) 페어.
-Navigation: title-large 24/22, title-small 19/17, depth-medium 17, depth-small 15.
-Label (button/input/radio/checkbox): large 19, medium 17, small 15, xsmall 13 (모두 400).
-기본 사이즈 정책: 본문 ≥ 16px 요구 + Pretendard GOV가 다른 서체 대비 작아 보여 **17px가 표준**. rem 환산 기준 `--krds-font-size-base: 62.5%` (1rem = 10px).
-### Raw observations — Layout (style_05.html, NEW)
-**4 breakpoints** (표준형 스타일, xsmall은 최적화 대상 제외):
-| name | viewport | columns | gutter | screen margin |
-|------|----------|---------|--------|----------------|
-| small | 360px+ | 4 | 16px | 16px |
-| medium | 768px+ | 8 | 16px | 24px |
-| large | 1024px+ | **12** | **24px** | **24px** |
-| xlarge | 1280px+ | 12 | 24px | 24px |
-**Container**: `--krds-contents-size: 1200px` (최대 콘텐츠 폭). 디바이스 ≥1248px (1200 + 24×2)에서 고정, 미만에서 비례 축소.
-**Spacing**: 8-pt grid. `--krds-padding-{1..10}` = 2 / 4 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 40 px.
-**Sub-page structure**: Header + Left menu (optional) + Main + Right menu (optional, floating/slide-in) + Footer.
-### Raw observations — Buttons (component_05_02.html, RE-MEASURED)
-| Size | Height | Radius | Padding | Font |
-|------|--------|--------|----------|------|
-| xsmall | 32px | 4px | 0 10px | 15px·400 |
-| small | 40px | 6px | 0 12px | 15px·400 |
-| medium | 48px | 6px | 0 16px | 17px·400 |
-| large | 56px | 8px | 0 20px | 19px·400 |
-| **xlarge** | **64px** | **8px** | **0 24px** | **19px·400** |
-Primary bg `#256EF4` / text `#FFFFFF`. Secondary bg `#ECF2FE` / text `#0B50D0` / border `#256EF4`. Tertiary bg transparent / text `#1E2124` / border `#58616A`. Icon+border 원형 radius 1000px / border `#B1B8BE`.
-### Raw observations — Inputs (component_09_03.html, NEW DETAIL)
-| Size | Height | Radius | Padding | Font |
-|------|--------|--------|----------|------|
-| small | 40px | 6px | 0 16px | 15px·400 |
-| medium | 48px | 6px | 0 16px | 17px·400 |
-| **large (default)** | **56px** | **8px** | 0 16px | 19px·400 |
-| xlarge | 80px | 10px | 0 24px (right 72px for icon) | 24px·700 |
-States:
-- Default: bg `#FFFFFF`, text/placeholder `#464C53`, border 1px `#58616A`
-- **Error: border 2px solid `#DE3412`** (prior pass had "1.5px" — CORRECTED)
-- **Disabled: bg `#CDD1D5`, text `#6D7882`, border 1px `#B1B8BE`** (prior pass had "#F4F6F8" surface — CORRECTED to `#CDD1D5`)
-- Focus: border maintained + `box-shadow: 0 0 0 4px #256EF4` halo
-### Raw observations — Select (component_06_03.html, NEW)
-Native `<select class="krds-form-select">` based. 3 sizes (small 40 / medium 48 / large 56) — but radius varies: small=8px, medium=6px, large=6px. **Error border: 2px solid `#AB2B36`** (Point 60) — distinct from text input's `#DE3412` (Danger 50). Disabled: bg `#CDD1D5` / border `#B1B8BE`.
-### Raw observations — Tag / 필터 칩 (component_06_04.html, NEW)
-Pill-shaped filter chips:
-- large: 40×auto, radius 40px (full pill), padding 8px 12px, font 17px·400, border 1px `#CDD1D5`
-- medium: 32px height, radius 32px, padding 8px 10px, font 15px·400
-- small: 24px height, radius 24px, padding 8px, font 13px·400
-Default bg `#FFFFFF` / text `#1E2124` / border `#CDD1D5`. Each tag has a `btn-delete` (×) at right (16px icon, no border).
-### Raw observations — Badge (component_04_06.html, NEW FULL SET)
-Universal: radius 4px / padding 0 8px / font 15px·400 / height 24px. Two layouts × 9 semantics = 18 variants:
-| Semantic | Outline (border / text) | Filled (bg / text) |
-|----------|--------------------------|----------------------|
-| Primary | `#256EF4` / `#0B50D0` | `#256EF4` / `#FFFFFF` |
-| Secondary | `#052B57` / `#052B57` | `#063A74` / `#FFFFFF` |
-| Gray | `#464C53` / `#464C53` | `#6D7882` / `#FFFFFF` |
-| Point | `#AB2B36` / `#AB2B36` | `#D63D4A` / `#FFFFFF` |
-| Danger | `#BD2C0F` / `#BD2C0F` | `#DE3412` / `#FFFFFF` |
-| Warning | `#8A5C00` / `#8A5C00` | `#FFB114` / `#1E2124` |
-| Success | `#267337` / `#267337` | `#228738` / `#FFFFFF` |
-| Information | `#096AB3` / `#096AB3` | `#0B78CB` / `#FFFFFF` |
-| Disabled | `#6D7882` / `#6D7882` | `#8A949E` / `#FFFFFF` |
-Prior pass had only 4 badge variants (outline-primary / bg-light-primary / status / mobile-critical). Now expanded to 18 measured variants. `bg-light-*` 변형 (light primary 등)은 5단계 배경 + 60단계 텍스트로 별도 존재.
-### Raw observations — Modal (component_04_05.html, NEW DETAIL)
-- Background `#FFFFFF`, **radius 12px (`--krds-radius-xlarge1`)** — prior pass had vague "대형 라운드"
-- Padding 40px (`--krds-padding-10`)
-- Sizes (`--krds-modal--size-*`): small 400 / medium 560 / large 760
-- Shadow: drop + soft fall (`0 0.2rem 0 0 rgba a1, 0 0.4rem 0.8rem 0 rgba a2`)
-- Backdrop fade-in 400ms / opacity 0→0.5 black
-- Min-height 264px
-### Token reference (full extracted scales)
-**Radius scale**:
-- xsmall1/2/3 = 0.2rem (2px)
-- small1/2/3 = 0.4rem (4px)
-- medium1/2 = 0.6rem (6px)
-- medium3/4 = 0.8rem (8px)
-- large1/2 = 1rem (10px)
-- xlarge1/2 = 1.2rem (12px)
-- max = 100rem (1000px)
-**Padding scale**: 1=2, 2=4, 3=8, 4=10, 5=12, 6=16, 7=20, 8=24, 9=32, 10=40 px.
-**Size-height scale**: 2=16, 3=20, 4=24, 5=32, 6=40, 7=48, 8=56, 9=64, 10=72, 11=80 px.
-**Icon size**: xsmall=16, small=16, medium=20, large=24, xlarge=24 px.
-**Transitions**:
-- `--krds-transition-base: 0.4s ease-in-out`
-- `--krds-transition-fade: opacity 0.4s linear`
-- `--krds-transition-collapse: max-height 0.4s ease`
-- `--krds-transition-collapse-width: width 0.4s ease`
-**Focus**:
-- `--krds-box-shadow-outline: 0 0 0 0.4rem #256EF4`
-- `--krds-box-shadow-outline-inset: inset 0 0 0 0.2rem #256EF4`
-**Zoom (사용자 글자 확대)**:
-- small=0.9, medium=1, large=1.1, xlarge=1.3, xxlarge=1.5
-### Single-system summary
-KRDS는 **정부 발행 단일 토큰 카탈로그**입니다 — 588개 색상 토큰 + 풀 컴포넌트 스펙이 라이브에서 일관 측정됨:
-- 8 색상군 × 11 명도 단계 (light 모드) + 동일 매핑 (high-contrast 모드)
-- Primary 50 `#256EF4` + Primary 60 `#0B50D0` + Primary 5 `#ECF2FE` 3단으로 90% 작동
-- System 색상 4종 (Danger / Warning / Success / Information) + Point (정부 적색) 강조용
-- 5단계 컴포넌트 사이즈 (xsmall 32 / small 40 / medium 48 / large 56 / xlarge 64) — 버튼·input·select 일관
-- 라운드 7단계 (2 / 4 / 6 / 8 / 10 / 12 / 1000)
-- Pretendard GOV 단일 폰트 / 17px·400 본문 기본 / 150% line-height
-- 모션 표준 0.4s × {ease-in-out / ease / linear} 3 곡선만
-- 사용자 헤더 줌 90~150% (`--krds-zoom-*`) — a11y 1차 컨트롤
-- KWCAG 2.1 AA 매직넘버 룰 (50=4.5:1)을 컬러 팔레트 단계부터 강제
----
-## Phase 3 surfaces inspected (basic + service patterns, 2026-05-08)
-This phase walked the **기본 패턴 (Basic Patterns)** and **서비스 패턴 (Service Patterns)** trees in full — all 18 sub-pages fetched successfully (HTTP 200) via WebFetch.
-### 기본 패턴 — global/ (12 pages, all 200)
-- `global/global_summary.html` — index (12 패턴 enumeration)
-- `global/global_01.html` — 개인 식별 정보 입력 (PII input)
-- `global/global_02.html` — 도움 (Help)
-- `global/global_03.html` — 동의 (Consent)
-- `global/global_04.html` — 목록 탐색 (List Navigation)
-- `global/global_05.html` — 사용자 피드백 (User Feedback)
-- `global/global_06.html` — 상세 정보 확인 (Detail View)
-- `global/global_07.html` — 오류 (Error)
-- `global/global_08.html` — 입력폼 (Input Form)
-- `global/global_09.html` — 첨부파일 (File Attachment)
-- `global/global_10.html` — 필터링·정렬 (Filtering & Sorting)
-- `global/global_11.html` — 확인 (Confirmation)
-- `global/global_12.html` — 모바일 알림 (Mobile Notifications)
-### 서비스 패턴 — service/ (6 pages, all 200)
-- `service/service_summary.html` — index (5 패턴 enumeration)
-- `service/service_01_01.html` — 방문 (Visit)
-- `service/service_02_01.html` — 검색 (Search) — 7-node journey
-- `service/service_03_01.html` — 로그인 (Login)
-- `service/service_04_01.html` — 신청 (Application) — multi-step
-- `service/service_05_01.html` — 정책정보 확인 (Policy Information)
-### URL patterns that 404'd (Phase 3)
-- `pattern/pattern_summary.html` — does not exist. Confirmed `pattern/` subdir is **not** part of KRDS site structure; "기본 패턴" lives under `global/`, "서비스 패턴" under `service/`. Pattern terminology in KRDS: **basic = global** (URL-wise), service = service.
-- `intro/intro_summary.html` / `intro/intro_01.html` — 404. No `intro/` subdir.
-- `main/main_index.html` — 404 (homepage is `site/index.html`, not `site/main/`).
-- Implication: KRDS does **not** publish a numbered "design principles" page (e.g. `principle/` or `foundation/`) on a discoverable URL. Principles in §12 retained from prior pass (sourced from KRDS mission + 행정안전부 documentation), with digital-inclusion stance now anchored to global_summary footer (web accessibility certification mark) + MOIS press release.
-## Tier 2 — Cross-check
-### getdesign.md
-- `getdesign.md/krds` — **no record** (404 / "No designs found for 'krds'") — re-verified 2026-05.
-### styles.refero.design
-- KRDS 미수록. 정부 시스템은 일반적으로 디자인 aggregator에 등재되지 않음.
-**Tier 2 status: unavailable — Tier 1이 곧 canonical.** KRDS는 행정안전부가 직접 운영하는 공식 사이트(`www.krds.go.kr`)에서 디자인 토큰·컴포넌트 카탈로그·Figma 라이브러리·HTML 마크업을 직접 배포합니다.
----
-## Conflict Matrix
-| Field | Tier 1 measurement | Prior pass value | Resolution |
-|---|---|---|---|
-| Primary 50 (action bg) | `#256EF4` | `#256EF4` | ✓ unchanged |
-| Primary 60 (text/pressed) | `#0B50D0` | `#0B50D0` | ✓ unchanged |
-| H1 page title size | **40px PC / 28px mobile** | "34px·700" | **CORRECTED** — prior used home `<h1>` instance computed style; real type scale spec is 40/28 |
-| Input default height | **56px (large)** | not measured | **ADDED** |
-| Input error border | **2px solid `#DE3412`** | "1.5px solid critical red" | **CORRECTED** (px width + exact color) |
-| Input disabled bg | **`#CDD1D5`** (Gray 20) | "`#F4F6F8` 계열" | **CORRECTED** — F4F6F8 was Gray 5 confusion |
-| Input disabled text | `#6D7882` | "`#9DA5AD` 계열" | **CORRECTED** |
-| Input disabled border | `#B1B8BE` | "`#B1B8BE`" | ✓ |
-| Select error border | **2px solid `#AB2B36`** (Point 60) | not measured | **ADDED** — distinct from input Danger |
-| Modal radius | **12px** (`--krds-radius-xlarge1`) | "`--krds-radius-xlarge1` 대형 라운드" | **CLARIFIED** to exact 12px |
-| Modal sizes | 400 / 560 / 760 px | "40rem / 56rem / 76rem" | ✓ same values, units corrected |
-| Container width | 1200px | 1200px | ✓ |
-| Breakpoints | 4 (360/768/1024/1280) | 3 (768/1024+) | **EXPANDED** to KRDS-spec 4 |
-| Columns | 4 / 8 / 12 / 12 | not measured | **ADDED** |
-| Gutter | 16 / 16 / 24 / 24 px | "24px" only | **ADDED** breakpoint variants |
-| Radius scale | 2/4/6/8/10/12/1000 (7 steps) | "4/6/8/10/1000" (5 steps) | **EXPANDED** — added 2px (xsmall input), 12px (modal) |
-| Body default size | 17px (medium) | 17px | ✓ |
-| Badge variants | 9 semantics × outline/filled = 18 | 4 (outline-primary / bg-light-primary / status / mobile-critical) | **EXPANDED** 4×4.5 |
-| Tag filter chip | 3 sizes pill 40/32/24 | not present | **ADDED** new component subsection |
-| Select | 3 sizes default/error/disabled | not present | **ADDED** new component subsection |
-| Tertiary hover | bg `#F4F5F6` | not measured | **ADDED** |
-| Primary pressed | `#083891` (Primary 70) | "`#0B50D0` 계열" | **CORRECTED** — pressed is darker than hover |
-| Padding scale | 1-10 (2~40px) | not enumerated | **ADDED** |
-| System colors | Danger `#DE3412` / Success `#228738` / Information `#0B78CB` / Warning `#FFB114`+`#9E6A00` / Point `#D63D4A` | "critical / warning / success / informative" labels only, no hex | **ADDED** exact hex values |
-| Type scale | 3 layers (Display / Heading / Body) × 5-6 steps + Navigation/Label | flat 8-row table | **EXPANDED** to canonical 3-layer model |
-### Phase 3 additions (basic + service patterns)
-| Field | Phase 3 measurement | Prior pass | Resolution |
-|---|---|---|---|
-| §5 Basic Patterns subsection | 12 patterns (global_01..12) with title + 1-line purpose, sourced from `global/global_summary.html` + each sub-page | not present | **ADDED** |
-| §5 Service Patterns subsection | 5 patterns (service_01..05) with journey nodes, sourced from `service/service_summary.html` + each sub-page | not present | **ADDED** |
-| §14 Service Journey States | 13 journey-node states across Visit / Search / Login / Application / Policy patterns | only component-level states | **EXPANDED** — journey-node layer added |
-| §1 Accessibility Mandate ¶ | Paragraph added citing 장차법 + KWCAG 2.1 + global_summary 푸터 인증마크 + 행정안전부 미션 문구 | implied throughout, not framed as mandate | **ADDED** |
-| §12 Principles list | unchanged (5 principles retained) | 5 principles | ✓ unchanged — KRDS does not publish a numbered principle page, retained mission-derived list. Principles cross-validated with global_summary intro text and 행정안전부 미션 문구. |
-| URL pattern: 기본 패턴 root | `global/` (not `pattern/`) | "기본 패턴 — pattern_summary" assumption | **CORRECTED** — pattern_summary.html 404; basic patterns live at `/html/site/global/global_*.html` |
-### Unresolved
-- **None.** All measurements consistent across measured pages.
-### Coverage expansion vs prior pass
-Previously unmapped components now included in §4:
-1. **Select** (`component_06_03.html`) — full
-2. **Tag / 필터 칩** (`component_06_04.html`) — full
-3. **Toggle Switch** (`component_06_07.html`) — described from token signals
-4. **Checkbox** (`component_06_02.html`) — described
-5. **Radio** (`component_06_01.html`) — described
-6. **Tabs** (`component_04_10.html`) — described
-7. **Toast / Snackbar** (`component_12_05/06.html`) — described
-8. **Tooltip / 도움 패널 / 코치마크** (`component_08_*`) — described
-9. **Step Indicator / Spinner** (`component_07_*`) — described
-10. **Pagination / Breadcrumb / Side Menu** (`component_03_*`) — described
-11. **Critical Alert / 긴급 공지** (`component_04_02`) — described
-12. **Floating button** (`component_05_03`) — described
-13. **Date input / Textarea / File upload** (`component_09_*`) — described
-Previously thin / now expanded sections:
-- §2 Color: 4 tokens → 80+ tokens across 8 color × 11 steps + magic-number rules + system color full hex
-- §3 Typography: 7-row hierarchy table → 30+ row 3-layer scale (Display / Heading / Body / Navigation / Label)
-- §4 Components: 4 components → 13 components
-- §5 Layout: 3 breakpoints "tablet/desktop/mobile" → KRDS-spec 4 breakpoints + columns + gutter + screen margin + 8-pt padding scale
-- §6 Depth: 4 levels (unchanged, but focus halo added)
-- §15 Motion: 4 tokens + 4 signature motions → 5 tokens + 5 signature motions (added `transition-collapse-width`)
-### Pages attempted but unreachable / not inspected
-None unreachable. The following pages exist on KRDS but were not individually inspected in this pass (read from GNB navigation only — values inferred from sibling components in same category):
-- 기본 패턴 / 서비스 패턴 categories (entire `pattern/` / `service/` subdirs) — not in GNB walk result; referenced in homepage card grid but URL pattern unknown. These are content-level (search-results / list-views / detail-pages) rather than design-token level, so absence does not affect §2-§9 token claims.
-- `foundation_*` / `inclusion/` / `principle/` directories — homepage GNB does not link these (CMS may have removed); the prior pass cited `foundation_01.html` which no longer appears in current GNB. Section content (5 principles) preserved in §12 from prior pass + cross-referenced with 행정안전부 documentation.
-- Individual component pages 02_01..04 (헤더/푸터/공식배너) and 08_*, 11_* — described from category-level + token signals; not individually measured.
----
-## Philosophy sources (G6)
-### 정부 발행 공식 자료 (1차 출처)
-- **행정안전부 (MOIS) 보도자료** — 「누구나 쉽게 사용할 수 있는 공공 웹·앱 혁신, '범정부 UI/UX 디자인시스템(KRDS)'으로부터」
-  [www.mois.go.kr — 보도자료](https://www.mois.go.kr/frt/bbs/type010/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000008&nttId=115144)
-- **대한민국 정책브리핑** — 「누구나 쉽게 이용하는 디지털정부 서비스 구현을 위한 '범정부 디자인시스템' 제공」
-  [m.korea.kr — 정책브리핑](https://m.korea.kr/briefing/pressReleaseView.do?newsId=156640589)
-- **MOIS 영문 공지** — "Pan-Government UI/UX Design Systems(KRDS), Transforming Public Websites and Applications"
-  [www.mois.go.kr/eng](https://www.mois.go.kr/eng/bbs/type002/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000022&nttId=118313)
-### 2차 출처 (소개·해설)
-- Design Compass — KRDS: 대한민국 정부 디자인 시스템 (2024-04-17): [designcompass.org](https://designcompass.org/2024/04/17/krds/)
-- Design Compass EN — Launch of the Republic of Korea Government UI/UX Design System: [designcompass.org/en](https://designcompass.org/en/2025/01/22/krds-start/)
-- HEROPY.DEV — KRDS(Korea Design System) 대한민국 정부 디자인 시스템: [heropy.dev/s/68](https://www.heropy.dev/s/68)
-- 나무위키 — 범정부 UI/UX 디자인 시스템: [namu.wiki](https://namu.wiki/w/%EB%B2%94%EC%A0%95%EB%B6%80%20UI/UX%20%EB%94%94%EC%9E%90%EC%9D%B8%20%EC%8B%9C%EC%8A%A4%ED%85%9C)
-### 접근성 / 법적 근거
-- TPGi — South Korea's Disability Discrimination Act and KWCAG (장차법·KWCAG): [tpgi.com](https://www.tpgi.com/south-koreas-disability-discrimination-act-kiosk-web-mobile-accessibility/)
-- AAAtraq — The Evolving Landscape of Digital Accessibility in South Korea (2025-08): [aaatraq.com](https://aa.aaatraq.com/news/2025/08/evolving-digital-accessibility-south-korea)
-- KWCAG 2.1 (KS X OT 0003) — 한국형 웹 콘텐츠 접근성 지침. WCAG 2.1 Perceivable / Operable / Understandable / Robust 4원칙을 따르며 모바일 / 한글 고려사항을 추가.
-### 비교 좌표 (국가 단위 공공 디자인 시스템)
-- 영국: [GOV.UK Design System](https://design-system.service.gov.uk/)
-- 미국: [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/)
-- 싱가포르: [Singapore Government Design System](https://www.designsystem.tech.gov.sg/)
-### Voice samples (live-verified, this pass)
-- *"모두를 위한 디지털 서비스 경험"* — 홈 페이지 헤드라인 <!-- verified: www.krds.go.kr 2026-05 -->
-- *"시작하기"* — Primary CTA (xlarge / `#256EF4` / 64px) <!-- verified: krds.go.kr 홈 -->
-- *"자세히 보기"* — 카드 내부의 x-large text 버튼 <!-- verified: krds.go.kr 홈 -->
-- *"글자·화면 설정"* — 헤더 a11y 1차 컨트롤 <!-- verified: krds.go.kr 전체 -->
-- *"통합검색"* / *"전체메뉴"* — GNB 액션 <!-- verified: krds.go.kr -->
-- *"디자인 스타일 / 컴포넌트 / 기본 패턴 / 서비스 패턴 / 소식·소통 / KRDS 소개"* — GNB 6 카테고리 <!-- verified: krds.go.kr 2026-05 (deep pass) -->
-- *"색상은 정보 전달과 시각적 경험을 결정하는 중요한 요소다"* — style_02 색상 페이지 인트로 <!-- verified -->
-- *"타이포그래피는 정보를 효과적으로 전달하고 일관된 사용자 경험을 제공하는 데 필수적인 요소이다"* — style_03 <!-- verified -->
-- *"누구나 쉽게 사용할 수 있는 공공 웹·앱"* — 행정안전부 KRDS 미션 문구 <!-- cited: 행정안전부 보도자료 2024 -->
----
-**Verified-against:**
-- Tier 1: 10 live pages on `www.krds.go.kr` — index + style_02 (color) + style_03 (typography) + style_05 (layout) + component_05_02 (button) + component_09_03 (text input) + component_06_03 (select) + component_06_04 (tag) + component_04_05 (modal) + component_04_06 (badge). All measurements via playwright `getComputedStyle` and `--krds-*` CSS variable enumeration (588 color vars + full radius/padding/size/transition/icon/zoom token sets).
-- Tier 2: getdesign.md/krds — no record / refero.design — no record (정부 시스템은 aggregator 미수록, Tier 1이 곧 canonical).
-- Tier 3: 행정안전부 공식 보도자료·정책브리핑·영문 공지 (1차) + Design Compass / HEROPY.DEV / 나무위키 (2차) + TPGi / AAAtraq (a11y 법적 근거) + GOV.UK / USWDS / Singapore GDS (비교 좌표).