{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tokens",
  "type": "registry:file",
  "title": "ATOM tokens",
  "description": "foundation 토큰(color, typography, spacing, radius, shadow, motion)과 base 리셋, 원본 불일치 보정(fixes.css)을 담은 CSS. 라이트/다크 모드 포함.",
  "files": [
    {
      "path": "poc/design-system/implement/src/styles/atom/tokens.css",
      "content": "/* ============================================================================\n   ATOM Design System — Design Tokens\n   ----------------------------------------------------------------------------\n   Light is the base palette on :root.\n   Dark is redefined three times so every theme state resolves correctly:\n     1. @media (prefers-color-scheme: dark) guarded by :not([data-theme=\"light\"])\n     2. :root[data-theme=\"dark\"]  (explicit user choice wins in both directions)\n   Never give a color its only definition inside a media block.\n   ========================================================================== */\n\n:root {\n  /* --- Palette: neutral ------------------------------------------------- */\n  --atom-gray-00: #ffffff;\n  --atom-gray-50: #f9f9fa;\n  --atom-gray-100: #f3f3f5;\n  --atom-gray-200: #ebecef;\n  --atom-gray-300: #dcdde3;\n  --atom-gray-400: #c0c2cc;\n  --atom-gray-500: #9fa1ad;\n  --atom-gray-600: #7a7c8b;\n  --atom-gray-700: #55586d;\n  --atom-gray-800: #33343d;\n  --atom-gray-900: #1a1b20;\n  --atom-gray-1000: #0f1014;\n\n  /* --- Palette: primary (brand) — base is primary-600 -------------------- */\n  --atom-primary-50: #f1f1fb;\n  --atom-primary-100: #dadcf6;\n  --atom-primary-200: #c2c5f0;\n  --atom-primary-500: #5d64cb;\n  --atom-primary-600: #383fae;\n  --atom-primary-700: #2d338b;\n\n  /* --- Palette: semantic accents ----------------------------------------\n     `blue` sits in the cyan half (~194 deg) on purpose: it drives\n     fg-informative, and at the brand's 236 deg the two were only 25 deg\n     apart — an info icon read as a brand accent. */\n  --atom-blue-50: #f1f9fb;\n  --atom-blue-100: #d5eef6;\n  --atom-blue-600: #0e7290;\n  --atom-green-50: #e9f8ef;\n  --atom-green-100: #d1f0dd;\n  --atom-green-500: #12b76a;\n  --atom-green-700: #1a7f4b;\n  --atom-red-50: #fdeded;\n  --atom-red-100: #fbdcdc;\n  --atom-red-600: #e5484d;\n  --atom-red-700: #c62b31;\n  --atom-yellow-50: #fff8e6;\n  --atom-yellow-100: #ffefc4;\n  --atom-yellow-700: #9a6800;\n\n  /* --- Surfaces --------------------------------------------------------- */\n  --atom-bg-canvas: var(--atom-gray-00);\n  --atom-bg-layer: var(--atom-gray-00);\n  --atom-bg-layer-raised: var(--atom-gray-00);\n  --atom-bg-neutral-weak: var(--atom-gray-100);\n  --atom-bg-neutral-solid: var(--atom-gray-900);\n  --atom-bg-placeholder: var(--atom-gray-100);\n  --atom-bg-scrim: rgba(0, 0, 0, 0.5);\n  /* Tooltips stay a dark chip in both themes — in dark they must sit *above*\n     the card surface, so they get their own pair rather than reusing the\n     inverted neutral scale. */\n  --atom-bg-tooltip: #1a1b20;\n  --atom-fg-tooltip: #ffffff;\n  --atom-skeleton-shimmer: rgba(255, 255, 255, 0.6);\n\n  /* Interactive overlays — the header + sidebar active pills. Tinted with the\n     brand rather than plain black so a selected item reads as \"current\" and not\n     merely \"shaded\". Alpha runs higher than the neutral version did: a coloured\n     wash at the same opacity reads weaker than black. */\n  --atom-bg-nav-active: rgba(56, 63, 174, 0.05);\n  --atom-bg-nav-hover: rgba(56, 63, 174, 0.038);\n  --atom-bg-side-active: rgba(56, 63, 174, 0.09);\n  --atom-bg-side-hover: rgba(56, 63, 174, 0.053);\n\n  /* --- Foreground ------------------------------------------------------- */\n  --atom-fg-neutral: #1a1b20;\n  --atom-fg-neutral-muted: #55586d;\n  --atom-fg-neutral-subtle: var(--atom-gray-500);\n  --atom-fg-side-item: #55586d;\n  --atom-fg-on-solid: var(--atom-gray-00);\n  --atom-fg-brand: var(--atom-primary-600);\n  --atom-fg-placeholder-icon: var(--atom-gray-300);\n\n  /* --- Borders ---------------------------------------------------------- */\n  --atom-border-subtle: var(--atom-gray-200);\n  --atom-border-default: var(--atom-gray-300);\n  --atom-border-strong: var(--atom-gray-900);\n\n  /* --- Elevation -------------------------------------------------------- */\n  --atom-shadow-s1: 0 1px 2px rgba(0, 0, 0, 0.06);\n  --atom-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.08);\n  --atom-shadow-s3: 0 8px 24px rgba(0, 0, 0, 0.12);\n\n  /* --- Semantic status pairs --------------------------------------------\n     Derived from the palette above, so a single declaration resolves in both\n     themes — the palette is what gets redefined for dark. */\n  --atom-bg-critical-solid: var(--atom-red-600);\n  --atom-bg-critical-weak: var(--atom-red-50);\n  --atom-fg-critical: var(--atom-red-600);\n  --atom-fg-critical-contrast: var(--atom-red-700);\n  --atom-bg-positive-weak: var(--atom-green-50);\n  --atom-fg-positive: var(--atom-green-500);\n  --atom-fg-positive-contrast: var(--atom-green-700);\n  --atom-bg-informative-weak: var(--atom-blue-50);\n  --atom-fg-informative: var(--atom-blue-600);\n  --atom-bg-warning-weak: var(--atom-yellow-50);\n  --atom-fg-warning: var(--atom-yellow-700);\n\n  /* --- Chart series (validated, not derived from the ramps above) --------\n     A categorical palette answers a job none of the ramps above can: telling\n     series apart. The ramps here are built for UI state, so they offer three\n     usable hue families and reserve green/red/yellow for status — and a status\n     hue must never impersonate a series.\n\n     So these six are new steps, chosen against the six checks in\n     scripts/validate_palette.js of the data-viz method and re-run on every\n     change. Slot 1 is primary-600 unchanged, so a one-series chart is brand\n     coloured. Measured on the light chart surface (#ffffff), adjacent pairlist:\n     worst CVD ΔE 10.5 (deutan), worst normal-vision ΔE 31.1. Slot 4 sits at\n     2.17:1 — under 3:1 by design, which obliges the relief rule (visible\n     labels or the table view), never colour alone.\n\n     The order is the colour-blind-safety mechanism, not taste. Do not reorder\n     or add a seventh without re-running the validator. */\n  --atom-chart-series-1: #383fae;\n  --atom-chart-series-2: #eb6834;\n  --atom-chart-series-3: #0b8fb5;\n  --atom-chart-series-4: #eda100;\n  --atom-chart-series-5: #c2379b;\n  --atom-chart-series-6: #1a7f4b;\n\n  /* Ink for a label set inside a series fill. Slots 2·3·4 measure 3.20 / 3.74 /\n     2.17 against white — under 4.5:1 for an 11px label — while ink on the same\n     three fills measures 5.37 / 4.59 / 7.94. Those slots use this; 1·5·6 stay on\n     --atom-fg-on-solid (8.43 / 4.87 / 5.02). In dark mode every slot wants ink,\n     and --atom-fg-on-solid already resolves to it, so this value matches. */\n  --atom-chart-on-fill-ink: #1a1b20;\n\n  /* --- Docs surfaces ----------------------------------------------------\n     The demo stage has to sit a step away from bg-neutral-weak: a `weak`\n     variant or a readonly input placed on it would otherwise vanish into the\n     background. gray-200 keeps that contrast in both themes. */\n  --atom-bg-stage: var(--atom-gray-200);\n  --atom-bg-code: var(--atom-gray-50);\n\n  /* --- Radius (measured from source) ------------------------------------ */\n  --atom-radius-r1: 4px;\n  --atom-radius-r2: 8px;\n  --atom-radius-r3: 12px;\n  --atom-radius-r4: 16px;\n  --atom-radius-full: 9999px;\n\n  /* --- Control surface ---------------------------------------------------\n     The box a Field's Control slot holds — Input, Textarea, Select, Multi\n     Select, Date Input, Time Input, Input Button. A field can put two or three\n     of them in one row, so the height, the resting border and the focus ring\n     are one decision here instead of seven. Button keeps its own height and is\n     stretched to the row by field.css when it joins a combination.\n\n     48 / 40 / 56 happen to equal x12 / x10 / x14, but a control height is not\n     spacing — moving the spacing scale must not move a control.\n\n     The rings are whole `box-shadow` values, not widths and colours, because\n     every control draws its border as an inset shadow: one token then replaces\n     the whole declaration and the states cannot drift apart.\n\n     The resting width is 1px — Button's, since a Button standing in a control\n     row is the one member whose border ATOM does not own. hover keeps that\n     width and only darkens. The two state rings stay 2px: Button's own focus\n     ring is 2px too, and a state has to read from further away than an edge. */\n  --atom-control-h: 48px;\n  --atom-control-h-small: 40px;\n  --atom-control-h-large: 56px;\n  --atom-control-border: inset 0 0 0 1px var(--atom-border-default);\n  --atom-control-border-hover: inset 0 0 0 1px var(--atom-fg-neutral-subtle);\n  --atom-control-border-focus: inset 0 0 0 2px var(--atom-primary-600);\n  --atom-control-border-invalid: inset 0 0 0 2px var(--atom-fg-critical);\n\n  /* --- Spacing: x-scale (measured from source) -------------------------- */\n  --atom-x1: 4px;\n  --atom-x2: 8px;\n  --atom-x3: 12px;\n  --atom-x4: 16px;\n  --atom-x5: 20px;\n  --atom-x6: 24px;\n  --atom-x7: 28px;\n  --atom-x8: 32px;\n  --atom-x10: 40px;\n  --atom-x12: 48px;\n  --atom-x14: 56px;\n\n  /* --- Typography ------------------------------------------------------- */\n  --atom-font-sans: \"Pretendard Variable\", Pretendard, -apple-system,\n    BlinkMacSystemFont, system-ui, Roboto, \"Helvetica Neue\", \"Segoe UI\",\n    \"Apple SD Gothic Neo\", \"Noto Sans KR\", \"Malgun Gothic\", sans-serif;\n  --atom-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas,\n    \"Liberation Mono\", monospace;\n\n  /* --- Typography: t-scale (sizes measured from source) ---------------- */\n  /* Size and line-height are separate tokens so either can be overridden\n     alone. Tracking only exists from t7 up; below that it is `normal`. */\n  --atom-t1-size: 11px;\n  --atom-t1-line: 1.4;\n  --atom-t2-size: 12px;\n  --atom-t2-line: 1.5;\n  --atom-t3-size: 13px;\n  --atom-t3-line: 1.5;\n  --atom-t4-size: 14px;\n  --atom-t4-line: 1.55;\n  --atom-t5-size: 15px;\n  --atom-t5-line: 1.7;\n  --atom-t6-size: 16px;\n  --atom-t6-line: 1.7;\n  --atom-t7-size: 18px;\n  --atom-t7-line: 1.5;\n  --atom-t7-tracking: -0.01em;\n  --atom-t8-size: 20px;\n  --atom-t8-line: 1.45;\n  --atom-t8-tracking: -0.01em;\n  --atom-t9-size: 24px;\n  --atom-t9-line: 1.45;\n  --atom-t9-tracking: -0.01em;\n  --atom-t10-size: 32px;\n  --atom-t10-line: 1.25;\n  --atom-t10-tracking: -0.02em;\n  --atom-t11-size: 44px;\n  --atom-t11-line: 1.15;\n  --atom-t11-tracking: -0.02em;\n  --atom-t12-size: 60px;\n  --atom-t12-line: 1.1;\n  --atom-t12-tracking: -0.025em;\n\n  /* --- Typography: weight ---------------------------------------------- */\n  --atom-weight-regular: 400;\n  --atom-weight-medium: 500;\n  --atom-weight-semibold: 600;\n  --atom-weight-bold: 700;\n\n  /* --- Layout ------------------------------------------------------------\n     The shell is full-bleed, so only the fixed columns are tokens — main takes\n     whatever is left. The source's 1552px cap (and its 1312 / 1112 main widths)\n     no longer exist; see .atom-layout in layout.css. */\n  --atom-header-h: 76px;\n  --atom-sidebar-w: 240px;\n  --atom-toc-w: 200px;\n  --atom-sidebar-item-h: 36px;\n\n  /* --- Motion ----------------------------------------------------------- */\n  --atom-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --atom-duration-fast: 120ms;\n  --atom-duration-base: 200ms;\n  --atom-duration-slow: 600ms;\n\n  color-scheme: light;\n}\n\n/* ---------------------------------------------------------------------------\n   Dark — system preference (only when the user has not forced light)\n   ------------------------------------------------------------------------ */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --atom-gray-00: #161618;\n    --atom-gray-50: #1a1b1f;\n    --atom-gray-100: #1d1e25;\n    --atom-gray-200: #24252b;\n    --atom-gray-300: #2f3038;\n    --atom-gray-400: #4a4c56;\n    --atom-gray-500: #6f717d;\n    --atom-gray-600: #9697a0;\n    --atom-gray-700: #b4b5bc;\n    --atom-gray-800: #dcdde3;\n    --atom-gray-900: #eaeaec;\n    --atom-gray-1000: #f3f3f5;\n\n    --atom-primary-50: #101232;\n    --atom-primary-100: #161945;\n    --atom-primary-200: #202564;\n    --atom-primary-500: #868cea;\n    --atom-primary-600: #4750d1;\n    --atom-primary-700: #9da2f1;\n\n    --atom-blue-50: #0e282f;\n    --atom-blue-100: #153742;\n    --atom-blue-600: #51c7ec;\n    --atom-green-50: #0d2118;\n    --atom-green-100: #123222;\n    --atom-green-500: #34d391;\n    --atom-green-700: #5fdca7;\n    --atom-red-50: #2b1315;\n    --atom-red-100: #3d1a1c;\n    --atom-red-600: #ff6369;\n    --atom-red-700: #ff8d91;\n    --atom-yellow-50: #241a05;\n    --atom-yellow-100: #35270a;\n    --atom-yellow-700: #e0b44b;\n\n    --atom-bg-canvas: #161618;\n    /* bg-layer must stay lighter than bg-placeholder so preview surfaces read\n       as cards sitting *on* the thumbnail frame, the way they do in light. */\n    --atom-bg-layer: #26272e;\n    --atom-bg-layer-raised: #2f3038;\n    --atom-bg-neutral-weak: #2f3038;\n    --atom-bg-neutral-solid: #f3f3f5;\n    --atom-bg-placeholder: #1d1e25;\n    --atom-bg-scrim: rgba(0, 0, 0, 0.6);\n    --atom-bg-tooltip: #3a3b45;\n    --atom-fg-tooltip: #f3f3f5;\n    --atom-skeleton-shimmer: rgba(255, 255, 255, 0.07);\n\n    --atom-bg-nav-active: rgba(157, 162, 241, 0.085);\n    --atom-bg-nav-hover: rgba(157, 162, 241, 0.06);\n    --atom-bg-side-active: rgba(157, 162, 241, 0.15);\n    --atom-bg-side-hover: rgba(157, 162, 241, 0.095);\n\n    --atom-fg-neutral: #eaeaec;\n    --atom-fg-neutral-muted: #9697a0;\n    --atom-fg-neutral-subtle: #6f717d;\n    --atom-fg-side-item: #b4b5bc;\n    --atom-fg-on-solid: #161618;\n    --atom-fg-brand: var(--atom-primary-700);\n    --atom-fg-placeholder-icon: #3a3b45;\n\n    --atom-border-subtle: #24252b;\n    --atom-border-default: #2f3038;\n    --atom-border-strong: #eaeaec;\n\n    /* red-600 is lightened for readable text in dark; a solid fill has to stay\n       dark enough to carry a white label. */\n    --atom-bg-critical-solid: #c8353a;\n\n    --atom-shadow-s1: 0 1px 2px rgba(0, 0, 0, 0.4);\n    --atom-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.5);\n    --atom-shadow-s3: 0 8px 24px rgba(0, 0, 0, 0.6);\n\n    color-scheme: dark;\n\n    /* Chart series — re-stepped for the dark surface (#26272e), not flipped.\n       Validated as a set: adjacent worst CVD ΔE 9.7 (deutan) / 8.4 (tritan),\n       worst normal-vision ΔE 22.9, all six clear 3:1. Slots 1 and 3 sit further\n       apart here than a straight lightening would put them — at the lighter\n       steps indigo and teal collapsed to ΔE 13.8, under the 15 floor. */\n    --atom-chart-series-1: #8069e2;\n    --atom-chart-series-2: #e0703c;\n    --atom-chart-series-3: #0fa5bd;\n    --atom-chart-series-4: #bd8708;\n    --atom-chart-series-5: #cc4fa4;\n    --atom-chart-series-6: #22a866;\n    --atom-chart-on-fill-ink: #161618;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   Dark — explicit user choice (must win over prefers-color-scheme: light)\n   ------------------------------------------------------------------------ */\n:root[data-theme=\"dark\"] {\n  --atom-gray-00: #161618;\n  --atom-gray-50: #1a1b1f;\n  --atom-gray-100: #1d1e25;\n  --atom-gray-200: #24252b;\n  --atom-gray-300: #2f3038;\n  --atom-gray-400: #4a4c56;\n  --atom-gray-500: #6f717d;\n  --atom-gray-600: #9697a0;\n  --atom-gray-700: #b4b5bc;\n  --atom-gray-800: #dcdde3;\n  --atom-gray-900: #eaeaec;\n  --atom-gray-1000: #f3f3f5;\n\n  --atom-primary-50: #101232;\n  --atom-primary-100: #161945;\n  --atom-primary-200: #202564;\n  --atom-primary-500: #868cea;\n  --atom-primary-600: #4750d1;\n  --atom-primary-700: #9da2f1;\n\n  --atom-blue-50: #0e282f;\n  --atom-blue-100: #153742;\n  --atom-blue-600: #51c7ec;\n  --atom-green-50: #0d2118;\n  --atom-green-100: #123222;\n  --atom-green-500: #34d391;\n  --atom-green-700: #5fdca7;\n  --atom-red-50: #2b1315;\n  --atom-red-100: #3d1a1c;\n  --atom-red-600: #ff6369;\n  --atom-red-700: #ff8d91;\n  --atom-yellow-50: #241a05;\n  --atom-yellow-100: #35270a;\n  --atom-yellow-700: #e0b44b;\n\n  --atom-bg-canvas: #161618;\n  /* See the note in the prefers-color-scheme block above. */\n  --atom-bg-layer: #26272e;\n  --atom-bg-layer-raised: #2f3038;\n  --atom-bg-neutral-weak: #2f3038;\n  --atom-bg-neutral-solid: #f3f3f5;\n  --atom-bg-placeholder: #1d1e25;\n  --atom-bg-scrim: rgba(0, 0, 0, 0.6);\n  --atom-bg-tooltip: #3a3b45;\n  --atom-fg-tooltip: #f3f3f5;\n  --atom-skeleton-shimmer: rgba(255, 255, 255, 0.07);\n\n  --atom-bg-nav-active: rgba(157, 162, 241, 0.085);\n  --atom-bg-nav-hover: rgba(157, 162, 241, 0.06);\n  --atom-bg-side-active: rgba(157, 162, 241, 0.15);\n  --atom-bg-side-hover: rgba(157, 162, 241, 0.095);\n\n  --atom-fg-neutral: #eaeaec;\n  --atom-fg-neutral-muted: #9697a0;\n  --atom-fg-neutral-subtle: #6f717d;\n  --atom-fg-side-item: #b4b5bc;\n  --atom-fg-on-solid: #161618;\n  --atom-fg-brand: var(--atom-primary-700);\n  --atom-fg-placeholder-icon: #3a3b45;\n\n  --atom-border-subtle: #24252b;\n  --atom-border-default: #2f3038;\n  --atom-border-strong: #eaeaec;\n\n  /* red-600 is lightened for readable text in dark; a solid fill has to stay\n     dark enough to carry a white label. */\n  --atom-bg-critical-solid: #c8353a;\n\n  --atom-shadow-s1: 0 1px 2px rgba(0, 0, 0, 0.4);\n  --atom-shadow-s2: 0 2px 8px rgba(0, 0, 0, 0.5);\n  --atom-shadow-s3: 0 8px 24px rgba(0, 0, 0, 0.6);\n\n  color-scheme: dark;\n\n  /* Chart series — re-stepped for the dark surface (#26272e), not flipped.\n     Validated as a set: adjacent worst CVD ΔE 9.7 (deutan) / 8.4 (tritan),\n     worst normal-vision ΔE 22.9, all six clear 3:1. Slots 1 and 3 sit further\n     apart here than a straight lightening would put them — at the lighter\n     steps indigo and teal collapsed to ΔE 13.8, under the 15 floor. */\n  --atom-chart-series-1: #8069e2;\n  --atom-chart-series-2: #e0703c;\n  --atom-chart-series-3: #0fa5bd;\n  --atom-chart-series-4: #bd8708;\n  --atom-chart-series-5: #cc4fa4;\n  --atom-chart-series-6: #22a866;\n  --atom-chart-on-fill-ink: #161618;\n\n}\n\n/* Explicit light must also win over a dark system preference. The base :root\n   block already holds every light value, so this only needs color-scheme. */\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n}\n\n/* ---------------------------------------------------------------------------\n   Sidebar item height steps up with viewport (measured: 36 / 38 / 40)\n   ------------------------------------------------------------------------ */\n@media (min-width: 1120px) {\n  :root {\n    --atom-sidebar-item-h: 38px;\n  }\n}\n@media (min-width: 1280px) {\n  :root {\n    --atom-sidebar-item-h: 40px;\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/atom/tokens.css"
    },
    {
      "path": "poc/design-system/implement/src/styles/atom/base.css",
      "content": "/* ============================================================================\n   ATOM Design System — Base / reset\n   ========================================================================== */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n* {\n  margin: 0;\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\nbody {\n  min-height: 100dvh;\n  background: var(--atom-bg-canvas);\n  color: var(--atom-fg-neutral);\n  font-family: var(--atom-font-sans);\n  font-size: 16px;\n  line-height: 1.25;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  overflow-x: hidden;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n  display: block;\n  max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n  font: inherit;\n  color: inherit;\n}\n\nbutton {\n  background: none;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\np,\nh1,\nh2,\nh3,\nh4 {\n  overflow-wrap: break-word;\n}\n\nh1,\nh2,\nh3,\nh4 {\n  font-weight: 500;\n  line-height: 1.25;\n}\n\nul,\nol {\n  list-style: none;\n  padding: 0;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n:focus-visible {\n  outline: 2px solid var(--atom-primary-600);\n  outline-offset: 2px;\n  border-radius: var(--atom-radius-r1);\n}\n\n/* Screen-reader only — used by the recommended dot and icon buttons */\n.atom-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n/* Holder for engine/shell-markup.js — the icon sprite has to stay in the render\n   tree (0x0, clipped) so <use href=\"#atom-i-*\"> resolves; display:none on an\n   svg sprite's parent is unreliable. Templates never render either way. */\n.atom-shell-holder {\n  position: absolute;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n\n/* Korean copy should not break mid-word */\n.atom-break-keep {\n  word-break: keep-all;\n  overflow-wrap: break-word;\n}\n\n::selection {\n  background: var(--atom-primary-200);\n  color: var(--atom-fg-neutral);\n}\n\n/* Hide scrollbars in the sidebar without losing scrollability */\n.atom-scroll-hidden {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.atom-scroll-hidden::-webkit-scrollbar {\n  display: none;\n}\n",
      "type": "registry:file",
      "target": "styles/atom/base.css"
    },
    {
      "path": "poc/design-system/implement/src/styles/fixes.css",
      "content": "/* ============================================================================\n   @atom/ui — 원본 불일치 보정\n   ----------------------------------------------------------------------------\n   atom/ 아래 파일은 03_ASSET_GUIDE/styles 의 사본이라 고치지 않고, 필요한 보정을\n   여기에 모읍니다. 각 항목은 implement/README.md \"문서와 다르게 구현한 부분\" 표와\n   번호가 같습니다. index.css 가 이 파일을 가장 마지막에 불러옵니다.\n   ========================================================================== */\n\n/* [F1] 테마와 무관하게 흰색인 전경 토큰 --atom-fg-on-brand\n   원본: button.css · badge.css 의 brand-solid / critical-solid 가 color: #fff 를 직접 씀\n   (catalog/button.js NOTE — \"--atom-fg-on-brand 처럼 테마와 무관하게 흰색인 토큰이 없어서 생긴 우회\").\n   값은 원본과 같은 #ffffff 이므로 화면은 바뀌지 않습니다. */\n:root {\n  --atom-fg-on-brand: #ffffff;\n}\n.atom-button--variant_brand-solid,\n.atom-button--variant_critical-solid,\n.atom-badge--variant_brand-solid,\n.atom-badge--variant_critical-solid {\n  color: var(--atom-fg-on-brand);\n}\n\n/* [F2] 역할 토큰 --atom-bg-brand-weak\n   원본: badge.css 의 brandWeak · positiveWeak · informativeWeak 가 팔레트를 직접 참조\n   (catalog/badge.js NOTE — \"역할 토큰을 추가해 정리할 여지가 있습니다\").\n   값은 원본이 참조하던 팔레트와 같습니다. */\n:root {\n  --atom-bg-brand-weak: var(--atom-primary-50);\n}\n.atom-badge--variant_brand-weak {\n  background: var(--atom-bg-brand-weak);\n}\n.atom-badge--variant_positive-weak {\n  background: var(--atom-bg-positive-weak);\n  color: var(--atom-fg-positive-contrast);\n}\n.atom-badge--variant_informative-weak {\n  background: var(--atom-bg-informative-weak);\n  color: var(--atom-fg-informative);\n}\n\n/* [F3] 시스템 다크 모드의 차트 시리즈 색 — 원본 tokens.css 의 문법 오류라 덮어쓰기로 고칠 수 없어\n   scripts/sync-atom.mjs 가 복사하면서 보정합니다 (atom/tokens.css). */\n\n/* [F4] Select · Multi Select — 키보드 현재 항목(aria-activedescendant) 표시\n   원본: autocomplete.css 에만 [data-active] 규칙이 있고 select.css · multi-select.css 에는 없어\n   ↑ ↓ 로 움직여도 현재 항목이 보이지 않음. autocomplete 와 같은 값을 씁니다. */\n.atom-select__option[data-active]:not([aria-disabled=\"true\"]),\n.atom-multi-select__option[data-active]:not([aria-disabled=\"true\"]) {\n  background: var(--atom-bg-side-active);\n}\n\n/* [F5] Select · Multi Select Listbox 최대 높이\n   원본: select.md WARNING — \"max-height 도 overflow 도 지정되어 있지 않아 … 최대 높이·내부 스크롤을\n   정해야 합니다\". 흐름 안 배치(원본 의도)는 그대로 두고 높이만 제한합니다. 값은 Option 8행 남짓. */\n.atom-select__listbox,\n.atom-multi-select__listbox {\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n/* [F6] Multi Select Trigger 를 <div role=\"combobox\"> 로 렌더 (원본 마크업은 button 안에 button 이 중첩)\n   button 이 주던 커서 · 선택 방지를 보충합니다. */\n.atom-multi-select__trigger {\n  cursor: pointer;\n  user-select: none;\n}\n\n/* [F7] Text Input — hover 테두리가 포커스 링 · 비활성 상태를 덮음\n   원본: .atom-text-input:hover:not(--focused)… 의 우선순위가 :focus-within 과 비활성 규칙보다 높음. */\n.atom-text-input:hover:focus-within {\n  box-shadow: var(--atom-control-border-focus);\n}\n.atom-text-input--disabled:hover,\n.atom-text-input:hover:has(.atom-text-input__control[disabled]) {\n  box-shadow: var(--atom-control-border);\n}\n\n/* [F8] Radio Card 포커스 표시 — 원본 radio.md 가 \"현재 없음\" 이라고 명시 */\n.atom-radio-card:has(:focus-visible) {\n  outline: 2px solid var(--atom-primary-600);\n  outline-offset: 2px;\n}\n\n/* [F9] Toast 가 Dialog 아래에 깔림\n   원본: toast.css z-index 80 · 주석 \"Dialog 보다 위\" ↔ dialog.css scrim z-index 100. */\n.atom-toast-group--anchor_screen,\n.atom-toast-group--anchor_parent {\n  z-index: 110;\n}\n\n/* [F10] Time Chip 터치 드래그 — touch-action 이 없어 끌면 페이지가 스크롤되고 pointercancel 발생 */\n.atom-time-chip__grid {\n  touch-action: none;\n}\n\n/* [F11] Shape Map 포커스 — SVG <g> 에 outline 을 그리지 않는 브라우저(Firefox 등) 보완 */\n.atom-shape-map__region:focus-visible path,\n.atom-shape-map__area:focus-visible {\n  stroke: var(--atom-fg-brand);\n  stroke-width: 2;\n}\n\n/* [F12] Date Input 트리거 비활성 표현 — time-input.css 에는 있고 date-input.css 에는 없음 */\n.atom-date-input__trigger[disabled] {\n  pointer-events: none;\n  opacity: 0.45;\n}\n\n/* [F13] Grid 헤더 셀 포커스 링 — sticky 헤더 · 가로 스크롤 안에서 바깥으로 그린 outline 이 잘림 */\n.atom-grid__th:focus-visible,\n.atom-grid__check:focus-visible {\n  outline-offset: -2px;\n}\n\n/* [F14] Grid 숫자 열 헤더 정렬\n   원본: .atom-grid__th--align_end { text-align: right } 가 있지만 .atom-grid__thead .atom-grid__th { text-align: left }\n   의 우선순위가 더 높아 헤더 라벨이 왼쪽에 남음 (셀은 오른쪽). 원본 규칙이 의도한 정렬을 살립니다. */\n.atom-grid__thead .atom-grid__th--align_end {\n  text-align: right;\n}\n.atom-grid__thead .atom-grid__th--align_center {\n  text-align: center;\n}\n\n/* [F15] 팝오버가 주변 영역을 늘림\n   원본: select.css · multi-select.css · autocomplete.css 의 listbox 는 흐름 안에 있어 열면 아래 내용을 밀어내고,\n   date-input.css · time-input.css 의 popover 는 absolute 라 문서 스크롤 영역을 늘리거나 overflow 컨테이너에 잘림.\n   모두 position: fixed 로 띄우고 위치(아래 / 공간이 모자라면 위, 끝 맞춤)는 lib/use-anchored-position.ts 가 계산합니다.\n   간격 6px 은 원본 margin-top · top 오프셋과 같고 훅이 줍니다. */\n.atom-select__listbox,\n.atom-multi-select__listbox,\n.atom-autocomplete__listbox,\n.atom-date-input__popover,\n.atom-time-input__popover {\n  position: fixed;\n  inset: auto;\n  z-index: 20;\n  margin-top: 0;\n  max-width: calc(100vw - 16px);\n}\n",
      "type": "registry:file",
      "target": "styles/fixes.css"
    }
  ],
  "docs": "전역 CSS 에서 아래 순서로 import 하세요. (경로는 전역 CSS 파일 위치 기준)\n  @import \"./styles/atom/tokens.css\";\n  @import \"./styles/atom/base.css\";\n  @import \"./styles/atom/elements/<설치한 컴포넌트>.css\";   /* 컴포넌트마다 */\n  @import \"./styles/fixes.css\";                            /* 맨 마지막 */\n@atom/all 로 설치했다면 위 전부를 묶은 styles/atom-ui.css 하나만 import 하면 됩니다.",
  "categories": [
    "foundation"
  ],
  "meta": {
    "version": "0.1.0"
  }
}