@layer wds.components {
/* WDS Accordion — 토큰 전용(DD-4). 펼침은 표시 토글 + compositor 모션만. */
._root_1yjnr_2 {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
  overflow: hidden;
}

._item_1yjnr_10 + ._item_1yjnr_10 {
  border-top: 1px solid var(--wds-color-border);
}

._heading_1yjnr_14 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

._trigger_1yjnr_20 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-4);
  width: 100%;
  padding: var(--wds-space-4) var(--wds-space-6);
  border: 0;
  background: transparent;
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}

._trigger_1yjnr_20:hover {
  background: var(--wds-color-surface-hover);
}

._trigger_1yjnr_20:active {
  background: var(--wds-color-surface-pressed);
}

._trigger_1yjnr_20:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: -2px;
}

._triggerLabel_1yjnr_52 {
  min-width: 0;
}

._chevron_1yjnr_56 {
  flex: none;
  color: var(--wds-color-text-muted);
  transition: transform var(--wds-duration-fast) var(--wds-ease-standard);
}

._chevron_1yjnr_56[data-expanded] {
  transform: rotate(180deg);
}

._content_1yjnr_66 {
  color: var(--wds-color-text-muted);
  animation: _accordion-reveal_1yjnr_1 var(--wds-duration-fast) var(--wds-ease-out);
}

._contentInner_1yjnr_71 {
  padding: 0 var(--wds-space-6) var(--wds-space-4);
  font-size: var(--wds-font-size-body-2);
  line-height: var(--wds-line-height-normal);
}

@keyframes _accordion-reveal_1yjnr_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._chevron_1yjnr_56,
  ._content_1yjnr_66 {
    transition: none;
    animation: none;
  }
}
/* WDS AgentCard — 토큰 전용(DD-4). 상태 칩 색은 status-text 토큰(AA 보장 쌍). */
._card_13yx3_2 {
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
  padding: var(--wds-space-4);
}

._head_13yx3_9 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
}

._avatar_13yx3_15 {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--wds-space-10);
  height: var(--wds-space-10);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-semibold);
  font-size: var(--wds-font-size-body-1);
}

._identity_13yx3_28 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

._name_13yx3_35 {
  font-weight: var(--wds-font-weight-semibold);
  font-size: var(--wds-font-size-body-1);
  color: var(--wds-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._role_13yx3_44 {
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 상태 칩 ── */
._state_13yx3_53 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  padding: var(--wds-space-1) var(--wds-space-2);
  border-radius: var(--wds-radius-full);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
}

._dot_13yx3_64 {
  width: var(--wds-space-2);
  height: var(--wds-space-2);
  border-radius: var(--wds-radius-full);
  background: currentcolor;
}

._idle_13yx3_71 {
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
}

._running_13yx3_76 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}
._running_13yx3_76 ._dot_13yx3_64 {
  /* 장식 모션 — ambient.breath 토큰(1.6s). Flutter WizMotion.ambientBreath와 cross-target SSOT */
  animation: _agent-pulse_13yx3_1 var(--wds-ambient-breath) var(--wds-ease-standard) infinite;
}

/* 틴트 8% — 12%는 success-text(green700)와 4.39:1로 AA(4.5) 미달 (axe 실측) */
._done_13yx3_86 {
  background: color-mix(in srgb, var(--wds-color-success) 8%, var(--wds-color-surface));
  color: var(--wds-color-success-text);
}

._error_13yx3_91 {
  background: color-mix(in srgb, var(--wds-color-error) 8%, var(--wds-color-surface));
  color: var(--wds-color-error-text);
}

/* ── 결과 영역 ── */
._result_13yx3_97 {
  margin-top: var(--wds-space-3);
  padding: var(--wds-space-3);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface-muted);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
  word-break: keep-all;
}

@keyframes _agent-pulse_13yx3_1 {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._running_13yx3_76 ._dot_13yx3_64 {
    animation: none;
  }
}
/* WDS ComposerBar — 토큰 전용(DD-4). Input/AiChatInput과 동일한 포커스 링 어휘.
   ChatGPT GPT-5 구조: 고정 grid [lead | text | trail]에 align-items:end — 멀티라인 시 +·트레일이
   하단에 머무를 뿐(텔레포트 없음). ★반경은 radius-xxl(28px)로 고정 — 단행 높이(52px)의 절반보다
   크므로 단행은 stadium(알약), 멀티라인은 둥근 박스로 자동으로 보인다(반경이 안 바뀌니 모서리 모핑
   끊김이 없다 = ChatGPT 동작). box-sizing 명시(임의 임베드 안정). */
._bar_1yi6l_6 {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'lead text trail';
  /* 멀티라인 시 +·트레일은 하단에 머문다(텍스트는 위로 자람). 단행은 textarea가 align-self:center로 정렬. */
  align-items: end;
  column-gap: var(--wds-space-2);
  /* 상하 space-2로 lg(52px) 안에서 컨트롤이 대칭 여백을 갖는다 */
  padding: var(--wds-space-2);
  min-height: var(--wds-control-height-lg);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  /* 떠 있는 컴포저 — ChatGPT/Figma식 소프트 그림자(float). 포커스 시 링과 함께 유지. */
  box-shadow: var(--wds-shadow-md);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._bar_1yi6l_6:focus-within {
  border-color: var(--wds-input-border-focus);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent),
    var(--wds-shadow-md);
}

/* ★고정 반경(xxl=28px > 단행 높이 52px의 절반) — 단행 stadium, 멀티라인 box. 반경이 안 바뀌어
   전환 시 모서리 끊김이 없다(ChatGPT 동작). pill·boxed 둘 다 같은 반경(GPT-5는 한 형태이고,
   stadium↔box는 *높이*가 가른다) — 변형은 API 호환을 위해 유지한다. */
._pill_1yi6l_35 {
  border-radius: var(--wds-radius-xxl);
}
._boxed_1yi6l_38 {
  border-radius: var(--wds-radius-xxl);
}

._disabled_1yi6l_42 {
  background: var(--wds-input-bg-disabled);
  cursor: not-allowed;
}

/* 슬롯 — 액션. align-end(.bar)로 멀티라인 시 하단에 머문다. */
._lead_1yi6l_48 {
  grid-area: lead;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
}
._trail_1yi6l_54 {
  grid-area: trail;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
}

._textarea_1yi6l_61 {
  grid-area: text;
  /* 단행은 행 중앙(컨트롤과 정렬), 멀티라인은 자신이 행을 채운다. */
  align-self: center;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  line-height: 1.5;
  color: var(--wds-input-fg);
  /* resting 최소 높이 — minRows × body-1 행간(미지정이면 var 폴백 0 = 단행). 상한과 무관. */
  min-height: calc(var(--wds-font-size-body-1) * 1.5 * var(--wds-composer-min-rows, 0));
  /* 약 7줄 상한 — 초과분은 내부 스크롤 */
  max-height: 10.5rem;
  overflow-y: hidden;
  padding-block: var(--wds-space-1);
}
._textarea_1yi6l_61::placeholder {
  color: var(--wds-input-placeholder);
}
._textarea_1yi6l_61:disabled {
  cursor: not-allowed;
}
/* WDS IconButton — 토큰 전용(DD-4). 시드 대비: control 높이 토큰화 · sm 44px 히트 영역(§5). */
._button_lcyr1_2 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--wds-radius-control);
  color: var(--wds-color-text-muted);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard),
    transform var(--wds-duration-fast) var(--wds-ease-standard);
}
._button_lcyr1_2:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._button_lcyr1_2:active:not(:disabled) {
  transform: translateY(1px);
}
._button_lcyr1_2:disabled {
  cursor: not-allowed;
}

/* round — 완전 원형(ChatGPT식 컴포저 액션). square 기본은 radius-control 둥근 사각. */
._round_lcyr1_30 {
  border-radius: var(--wds-radius-full);
}

._icon_lcyr1_34 {
  display: inline-flex;
  line-height: 0;
}

/* 로딩 Spinner — 변형 잉크(예: solid 흰색)를 그대로 상속 */
._loadingSpinner_lcyr1_40 {
  color: inherit;
}

/* ── Variants ── */
._ghost_lcyr1_45 {
  background: transparent;
}
._ghost_lcyr1_45:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._ghost_lcyr1_45:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._ghost_lcyr1_45:disabled {
  color: var(--wds-color-disabled-fg);
}

._subtle_lcyr1_59 {
  background: var(--wds-color-surface-muted);
}
._subtle_lcyr1_59:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._subtle_lcyr1_59:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._subtle_lcyr1_59:disabled {
  background: var(--wds-color-disabled-bg);
  color: var(--wds-color-disabled-fg);
}

/* solid 채움은 Button primary와 동일한 primary-strong 계열 (DD-6 AA 채움) */
._solid_lcyr1_75 {
  background: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
}
._solid_lcyr1_75:hover:not(:disabled) {
  background: var(--wds-color-primary-strong-hover);
}
._solid_lcyr1_75:active:not(:disabled) {
  background: var(--wds-color-primary-strong-active);
}
._solid_lcyr1_75:disabled {
  background: var(--wds-color-disabled-bg);
  color: var(--wds-color-disabled-fg);
}

/* ink — AI 표면 무채색 주액션(ChatGPT식 흑백). 라이트=근검정/다크=흰색 (ink 토큰이 테마 반전) */
._ink_lcyr1_91 {
  background: var(--wds-color-ink);
  color: var(--wds-color-on-ink);
}
._ink_lcyr1_91:hover:not(:disabled) {
  background: var(--wds-color-ink-hover);
}
._ink_lcyr1_91:active:not(:disabled) {
  background: var(--wds-color-ink-active);
}
._ink_lcyr1_91:disabled {
  background: var(--wds-color-disabled-bg);
  color: var(--wds-color-disabled-fg);
}

/* ── Sizes — control 높이 토큰 (Button과 같은 줄 정렬, sm 32 / md 44px) ── */
._sm_lcyr1_107 {
  width: var(--wds-control-height-sm);
  height: var(--wds-control-height-sm);
}
._md_lcyr1_111 {
  width: var(--wds-control-height-md);
  height: var(--wds-control-height-md);
}

/* 시각 32px(sm) — 히트 영역 44px 확장: (44 - 32) / 2 = space-3 / 2 (§5) */
._sm_lcyr1_107::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
/* WDS Spinner — 토큰 전용(DD-4). transform 회전만(컴포지터 친화). */
._spinner_1npt5_2 {
  display: inline-flex;
  color: var(--wds-color-primary);
  line-height: 0;
}

._svg_1npt5_8 {
  width: 1em;
  height: 1em;
  animation: _wds-spin_1npt5_1 var(--wds-duration-slow) linear infinite;
}

._track_1npt5_14 {
  stroke: currentcolor;
  opacity: 0.2;
}

._head_1npt5_19 {
  stroke: currentcolor;
}

/* 크기 — icon.size 토큰과 동기 (1em 기법: font-size가 곧 지름) */
._sm_1npt5_24 {
  font-size: var(--wds-icon-size-sm);
}
._md_1npt5_27 {
  font-size: var(--wds-icon-size-md);
}
._lg_1npt5_30 {
  font-size: var(--wds-icon-size-lg);
}

@keyframes _wds-spin_1npt5_1 {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._svg_1npt5_8 {
    /* 정지 — '진행 중'은 role="status" + aria-label('로딩 중')로 전달 (Progress 인디터미닛과 동일 정책).
       과거 '감속(1.6s)' 의도는 무효였다: 전역 wds.base 의 reduced-motion kill
       (animation-* !important)을 못 이긴다. @layer 에서 !important 는 *이른* 레이어가 우선이라
       wds.components(이 파일)의 선언은 — !important 를 붙여도 — wds.base 를 못 이긴다.
       animation:none 은 animation-name 을 비워(kill 의 important duration 이 무의미) 확실히 정지시킨다. */
    animation: none;
  }
}
/* WDS Alert — standard 외형(뉴트럴 표면 + 채운 아이콘 배지 + hairline + 떠오름).
   배지 채움 = *-text(깊은 잉크), 글리프 = surface — 두 색은 테마마다 반대 끝에 있어
   라이트/다크 모두 AA(4.5:1) 대비가 보장된다(*-text↔surface는 빌드 게이트로 강제). */
._alert_p6ndp_4 {
  --wds-alert-badge-size: calc(var(--wds-icon-size-md) + var(--wds-space-2) * 2);
  --wds-alert-title-line: calc(var(--wds-font-size-body-2) * var(--wds-line-height-normal));

  display: flex;
  align-items: flex-start;
  gap: var(--wds-space-3);
  padding: var(--wds-space-4);
  border-radius: var(--wds-radius-lg);
  background: var(--wds-alert-surface);
  border: 1px solid var(--wds-alert-border);
  box-shadow: var(--wds-shadow-sm);
}

/* 아이콘 배지 — 채운 원. 글리프 색은 surface라 테마가 바뀌면 배지·글리프가 함께 반전된다.
   배지 중심을 제목 첫 줄 중심에 맞춘다(음의 마진으로 줄 위로 끌어올림 — 본문 유무와 무관). */
._icon_p6ndp_20 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-alert-badge-size);
  height: var(--wds-alert-badge-size);
  margin-block-start: calc((var(--wds-alert-title-line) - var(--wds-alert-badge-size)) / 2);
  border-radius: var(--wds-radius-full);
}
._icon_p6ndp_20 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-surface);
}

._content_p6ndp_36 {
  flex: 1;
  min-width: 0;
}

/* 닫기 버튼 — 후행 고정, 배지와 동일하게 제목 첫 줄 중심에 맞춘다(히트 영역은 44px 유지) */
._dismiss_p6ndp_42 {
  flex: none;
  margin-block-start: calc((var(--wds-alert-title-line) - var(--wds-control-height-sm)) / 2);
  margin-inline-end: calc(-1 * var(--wds-space-2));
}

._title_p6ndp_48 {
  margin: 0;
  font-size: var(--wds-font-size-body-2);
  line-height: var(--wds-line-height-normal);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}

._body_p6ndp_57 {
  margin-top: var(--wds-space-1);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
  word-break: keep-all;
}

/* 액션 슬롯 — 본문 아래 텍스트 버튼 행(Material 3 banner). 제목·본문 시작선에 정렬.
   color는 변형 액센트(*-text)를 상속 제공 — 텍스트 링크 액션이 color:inherit로 받는다 */
._actions_p6ndp_66 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wds-space-3);
  margin-top: var(--wds-space-3);
}

/* ── 변형 — standard 배지(solid 채움) + 액션 액센트색 ── */
._info_p6ndp_74 ._icon_p6ndp_20 {
  background: var(--wds-color-info-text);
}
._success_p6ndp_77 ._icon_p6ndp_20 {
  background: var(--wds-color-success-text);
}
._warning_p6ndp_80 ._icon_p6ndp_20 {
  background: var(--wds-color-warning-text);
}
._error_p6ndp_83 ._icon_p6ndp_20 {
  background: var(--wds-color-error-text);
}

/* 액션 액센트색 — 텍스트 링크 액션이 상속받는다(standard·tonal 공통) */
._info_p6ndp_74 ._actions_p6ndp_66 {
  color: var(--wds-color-info-text);
}
._success_p6ndp_77 ._actions_p6ndp_66 {
  color: var(--wds-color-success-text);
}
._warning_p6ndp_80 ._actions_p6ndp_66 {
  color: var(--wds-color-warning-text);
}
._error_p6ndp_83 ._actions_p6ndp_66 {
  color: var(--wds-color-error-text);
}

/* ── tonal 외형 — 8% 액센트 틴트 + 액센트 링 + 평면(그림자 없음) + 액센트 제목.
   8% 틴트 위 *-text 잉크는 AA 4.5:1 보장(12%는 미달 — 기존 사용처 가드 실측). ── */
._tonal_p6ndp_103 {
  box-shadow: none;
}
._tonal_p6ndp_103._info_p6ndp_74 {
  background: color-mix(in srgb, var(--wds-color-info) 8%, var(--wds-color-surface));
  border-color: color-mix(in srgb, var(--wds-color-info) 30%, var(--wds-color-surface));
}
._tonal_p6ndp_103._success_p6ndp_77 {
  background: color-mix(in srgb, var(--wds-color-success) 8%, var(--wds-color-surface));
  border-color: color-mix(in srgb, var(--wds-color-success) 30%, var(--wds-color-surface));
}
._tonal_p6ndp_103._warning_p6ndp_80 {
  background: color-mix(in srgb, var(--wds-color-warning) 8%, var(--wds-color-surface));
  border-color: color-mix(in srgb, var(--wds-color-warning) 30%, var(--wds-color-surface));
}
._tonal_p6ndp_103._error_p6ndp_83 {
  background: color-mix(in srgb, var(--wds-color-error) 8%, var(--wds-color-surface));
  border-color: color-mix(in srgb, var(--wds-color-error) 30%, var(--wds-color-surface));
}
._tonal_p6ndp_103._info_p6ndp_74 ._title_p6ndp_48 {
  color: var(--wds-color-info-text);
}
._tonal_p6ndp_103._success_p6ndp_77 ._title_p6ndp_48 {
  color: var(--wds-color-success-text);
}
._tonal_p6ndp_103._warning_p6ndp_80 ._title_p6ndp_48 {
  color: var(--wds-color-warning-text);
}
._tonal_p6ndp_103._error_p6ndp_83 ._title_p6ndp_48 {
  color: var(--wds-color-error-text);
}

/* tonal 배지 — soft(연한 틴트 원 + 액센트 글리프). standard의 solid 채움을 대체.
   글리프는 *-text(비텍스트, 3:1 충족) — 틴트 원 위에서 두 테마 모두 대비 확보. */
._tonal_p6ndp_103._info_p6ndp_74 ._icon_p6ndp_20 {
  background: color-mix(in srgb, var(--wds-color-info) 24%, var(--wds-color-surface));
}
._tonal_p6ndp_103._success_p6ndp_77 ._icon_p6ndp_20 {
  background: color-mix(in srgb, var(--wds-color-success) 24%, var(--wds-color-surface));
}
._tonal_p6ndp_103._warning_p6ndp_80 ._icon_p6ndp_20 {
  background: color-mix(in srgb, var(--wds-color-warning) 24%, var(--wds-color-surface));
}
._tonal_p6ndp_103._error_p6ndp_83 ._icon_p6ndp_20 {
  background: color-mix(in srgb, var(--wds-color-error) 24%, var(--wds-color-surface));
}
._tonal_p6ndp_103._info_p6ndp_74 ._icon_p6ndp_20 svg {
  color: var(--wds-color-info-text);
}
._tonal_p6ndp_103._success_p6ndp_77 ._icon_p6ndp_20 svg {
  color: var(--wds-color-success-text);
}
._tonal_p6ndp_103._warning_p6ndp_80 ._icon_p6ndp_20 svg {
  color: var(--wds-color-warning-text);
}
._tonal_p6ndp_103._error_p6ndp_83 ._icon_p6ndp_20 svg {
  color: var(--wds-color-error-text);
}
/* WDS AnimatedIcon — generated icon wrapper with CSS-only motion presets. */
._root_1n1n2_2 {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: inherit;
  line-height: 0;
  vertical-align: middle;
}

._root_1n1n2_2 > svg {
  flex-shrink: 0;
}

._root_1n1n2_2[data-wds-icon-effect]:not([data-wds-icon-by-layer='true']) > svg,
._root_1n1n2_2[data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer])) > svg,
._root_1n1n2_2[data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: var(--wds-animated-icon-duration);
  animation-timing-function: var(--wds-ease-standard, cubic-bezier(0.2, 0, 0, 1));
  animation-delay: 0ms;
  animation-iteration-count: var(--wds-animated-icon-iteration-count);
  animation-direction: var(--wds-animated-icon-direction);
  animation-fill-mode: both;
}

._root_1n1n2_2[data-wds-icon-by-layer='true'] [data-wds-icon-layer='secondary'] {
  animation-delay: calc(var(--wds-animated-icon-duration) * 0.12);
}

._root_1n1n2_2[data-wds-icon-effect='pulse']:not([data-wds-icon-by-layer='true']) > svg,
._root_1n1n2_2[data-wds-icon-effect='pulse'][data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer]))
  > svg,
._root_1n1n2_2[data-wds-icon-effect='pulse'][data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
  animation-name: _wds-animated-icon-pulse_1n1n2_1;
}

._root_1n1n2_2[data-wds-icon-effect='scale']:not([data-wds-icon-by-layer='true']) > svg,
._root_1n1n2_2[data-wds-icon-effect='scale'][data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer]))
  > svg,
._root_1n1n2_2[data-wds-icon-effect='scale'][data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
  animation-name: _wds-animated-icon-scale_1n1n2_1;
}

._root_1n1n2_2[data-wds-icon-effect='breathe']:not([data-wds-icon-by-layer='true']) > svg,
._root_1n1n2_2[data-wds-icon-effect='breathe'][data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer]))
  > svg,
._root_1n1n2_2[data-wds-icon-effect='breathe'][data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
  animation-name: _wds-animated-icon-breathe_1n1n2_1;
}

._root_1n1n2_2[data-wds-icon-effect='wiggle']:not([data-wds-icon-by-layer='true']) > svg,
._root_1n1n2_2[data-wds-icon-effect='wiggle'][data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer]))
  > svg,
._root_1n1n2_2[data-wds-icon-effect='wiggle'][data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
  animation-name: _wds-animated-icon-wiggle_1n1n2_1;
}

._root_1n1n2_2[data-wds-icon-effect='rotate']:not([data-wds-icon-by-layer='true']) > svg,
._root_1n1n2_2[data-wds-icon-effect='rotate'][data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer]))
  > svg,
._root_1n1n2_2[data-wds-icon-effect='rotate'][data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
  animation-name: _wds-animated-icon-rotate_1n1n2_1;
  animation-timing-function: linear;
}

@keyframes _wds-animated-icon-pulse_1n1n2_1 {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.58;
  }
}

@keyframes _wds-animated-icon-scale_1n1n2_1 {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

@keyframes _wds-animated-icon-breathe_1n1n2_1 {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes _wds-animated-icon-wiggle_1n1n2_1 {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-8deg);
  }

  75% {
    transform: rotate(8deg);
  }
}

@keyframes _wds-animated-icon-rotate_1n1n2_1 {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._root_1n1n2_2[data-wds-icon-effect]:not([data-wds-icon-by-layer='true']) > svg,
  ._root_1n1n2_2[data-wds-icon-by-layer='true']:not(:has([data-wds-icon-layer])) > svg,
  ._root_1n1n2_2[data-wds-icon-by-layer='true'] [data-wds-icon-layer] {
    animation: none;
  }
}
/* WDS AnimatedNumber — dashboard/chart count-up numeric text. */
._root_9h4vr_2 {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  line-height: inherit;
  white-space: nowrap;
}

._value_9h4vr_10,
._reserve_9h4vr_11 {
  grid-area: 1 / 1;
  display: inline-block;
}

._reserve_9h4vr_11 {
  visibility: hidden;
}

._srOnly_9h4vr_20 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* WDS 차트 공유 chrome — 토큰 전용(DD-4). 잉크 위계: 데이터 > 축 > 그리드. 다크는 토큰 자동 재바인딩. */

._figure_1ulrc_3 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
  width: 100%;
}

/* ── 플롯(SVG) — 고정 viewBox, 컨테이너가 비례 스케일(ResizeObserver 불요) ── */
._plot_1ulrc_12 {
  position: relative;
  width: 100%;
}

._svg_1ulrc_17 {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── 그리드·축 ── */
._gridLine_1ulrc_25 {
  stroke: var(--wds-color-border-subtle);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

._axisLine_1ulrc_31 {
  stroke: var(--wds-color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

._zeroLine_1ulrc_37 {
  stroke: var(--wds-color-border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

._tickLabel_1ulrc_43 {
  fill: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-regular);
  font-variant-numeric: tabular-nums;
}

._tickLabelY_1ulrc_51 {
  text-anchor: end;
}

/* 보조(우) y축 라벨(ADR-019 Phase 2, 이중 Y) — 플롯 우측에 start 정렬(좌축 end의 미러). */
._tickLabelYSecondary_1ulrc_56 {
  text-anchor: start;
}

._tickLabelX_1ulrc_60 {
  text-anchor: middle;
}

/* ── 시리즈 — 선/영역/막대 ── */
._line_1ulrc_65 {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* 그리기 진입 — pathLength="1" 정규화. dash를 경로의 2배(over-cover)로 잡아 *종료 상태*(offset 0)에서
     선이 끝까지 그려지게 한다. Chromium은 dash=pathLength(=1)일 때 곡선 경로를 ~82%만 칠해 끝 ~18%
     (마지막 1~2 포인트)를 영구히 자른다(애니 종료 상태라 지속). dash=2면 dash[0,2]가 경로[0,1]를 완전
     커버. dashoffset 2→0: 시작은 gap이 경로를 덮어 숨김, 종료는 완전. fill-mode both로 시작 전 숨김 */
  stroke-dasharray: 2;
  animation: _chart-draw_1ulrc_1 var(--wds-duration-slow) var(--wds-ease-out) both;
}

._area_1ulrc_79 {
  stroke: none;
  /* 선 draw-in(slow)과 동시 완료 — 채움이 선보다 앞서 나타나는 desync 방지 */
  animation: _chart-fade_1ulrc_1 var(--wds-duration-slow) var(--wds-ease-out) both;
}

._bar_1ulrc_85 {
  animation: _chart-fade_1ulrc_1 var(--wds-duration-normal) var(--wds-ease-out) both;
}

._marker_1ulrc_89 {
  stroke: var(--wds-color-surface);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  /* 선 draw-in(slow) 완료 후 등장 — 마커가 선보다 먼저 떠 끝점이 분리돼 보이는 desync 방지 */
  animation: _chart-fade_1ulrc_1 var(--wds-duration-normal) var(--wds-ease-out) var(--wds-duration-slow) both;
}

/* 범례 호버 디밍 — 비활성 시리즈를 가라앉힌다(designed state) */
._seriesDimmed_1ulrc_98 {
  opacity: 0.22;
  transition: opacity var(--wds-duration-fast) var(--wds-ease-standard);
}

._seriesActive_1ulrc_103 {
  transition: opacity var(--wds-duration-fast) var(--wds-ease-standard);
}

/* ── 범례 ── */
._legend_1ulrc_108 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wds-space-2) var(--wds-space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

._legendBottom_1ulrc_117 {
  margin-top: var(--wds-space-1);
}

._legendItem_1ulrc_121 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  padding: 0;
  background: none;
  border: none;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text);
  cursor: pointer;
  border-radius: var(--wds-radius-sm);
}

._legendItem_1ulrc_121:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._legendMarkerLine_1ulrc_141 {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: var(--wds-radius-full);
}

._legendMarkerSquare_1ulrc_148 {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: var(--wds-radius-sm);
}

._legendInactive_1ulrc_155 {
  opacity: 0.45;
}

/* 토글 off(숨김) — 3중 신호: 취소선(forced-colors 생존)+디밍+마커 hollow */
._legendOff_1ulrc_160 {
  opacity: 0.55;
  text-decoration: line-through;
}

._legendMarkerOff_1ulrc_165 {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wds-color-border-strong);
}

/* 산점도 추세선(ScatterChart showTrendLine) — 최소제곱 회귀선. 점선·시리즈 마커 색(인라인 stroke).
   선이 아니라 *보조 추세*라 얇고 옅게(연결선 오인 회피). stroke는 DD-4 미검사 속성, 색은 인라인 토큰. */
._trendLine_1ulrc_172 {
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
  /* 마커(slow 지연 후 fade)와 동시 등장 — 점군이 자리잡은 뒤 추세선이 올라온다 */
  animation: _chart-fade_1ulrc_1 var(--wds-duration-normal) var(--wds-ease-out) var(--wds-duration-slow) both;
}

/* L3 기준선(referenceLine 헬퍼) — 점선 + 라벨. stroke/fill은 DD-4 미검사 속성. */
._refLine_1ulrc_183 {
  stroke: var(--wds-color-text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

._refLineLabel_1ulrc_190 {
  fill: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
}

/* L3 임계 구간 밴드(xBand 헬퍼) — 두 x값 사이 음영. fill은 DD-4 미검사 속성, 토큰 var()만. */
._xBand_1ulrc_198 {
  fill: var(--wds-color-border-subtle);
  opacity: 0.5;
}

/* 다크에선 border-subtle@0.5가 배경과 거의 분간 안 됨 → opacity 상향(라이트/다크 패리티). */
[data-theme='dark'] ._xBand_1ulrc_198 {
  opacity: 0.85;
}

._xBandLabel_1ulrc_208 {
  fill: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
}

/* L3 점 강조 주석(marker 헬퍼) — 데이터 점 위 원 + 라벨. fill/stroke는 DD-4 미검사 속성. */
._markerDot_1ulrc_216 {
  fill: var(--wds-color-text);
  stroke: var(--wds-color-surface);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

._markerLabel_1ulrc_223 {
  fill: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
}

/* 세로 범례(좌/우 위치) */
._legendVertical_1ulrc_231 {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--wds-space-2);
}

/* 좌/우 범례 레이아웃 — 범례·플롯만 row. DOM 순서(범례→플롯) 고정, 우측은 CSS order로만 시각 이동 */
._legendRow_1ulrc_239 {
  display: flex;
  align-items: stretch;
  gap: var(--wds-space-4);
  width: 100%;
}

._legendRow_1ulrc_239 ._plot_1ulrc_12 {
  flex: 1 1 auto;
  min-width: 0;
}

._legendRow_1ulrc_239 ._legend_1ulrc_108 {
  flex: 0 0 auto;
  max-width: 30%;
  align-self: center;
}

._legendRow_1ulrc_239[data-legend-position='right'] ._legend_1ulrc_108 {
  order: 2;
}

/* compact(≤599) — 좌/우 범례를 세로 스택(범례 위, 가로)으로 강등(세로 컬럼이 모바일서 플롯을 으깸) */
@media (max-width: 599px) {
  ._legendRow_1ulrc_239 {
    flex-direction: column;
  }

  ._legendRow_1ulrc_239 ._legend_1ulrc_108 {
    max-width: 100%;
    order: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: stretch;
  }
}

/* ── 툴팁 호버 밴드(WDS Tooltip 도그푸딩 — x인덱스별, 마우스 전용) ── */
._tooltipLayer_1ulrc_277 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

._tooltipBand_1ulrc_283 {
  position: absolute;
  pointer-events: auto;
  cursor: default;
}

/* WDS Tooltip .wrap에 병합 — 위치는 건드리지 않고 밴드를 채우기만(specificity 충돌 회피) */
._bandTrigger_1ulrc_290 {
  width: 100%;
  height: 100%;
}

._bandHit_1ulrc_295 {
  width: 100%;
  height: 100%;
}

/* 크로스헤어 — 호버 시 세로 가이드(순수 CSS, 상태 무관) */
._bandHit_1ulrc_295::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--wds-color-border-strong);
  opacity: 0;
  transition: opacity var(--wds-duration-fast) var(--wds-ease-standard);
}

._tooltipBand_1ulrc_283:hover ._bandHit_1ulrc_295::after {
  opacity: 0.6;
}

/* ── 활성 포인트 인디케이터(세로 라인/영역) ── */
/* 레이어가 포인터를 받아 최근접 데이터 점을 추적(밴드는 위에서 값 카드 호버 유지). */
._tooltipLayerInteractive_1ulrc_319 {
  pointer-events: auto;
  cursor: crosshair; /* 호버 스크럽·드래그 구간 선택 어포던스. */
  /* 터치: 수평 드래그=구간 선택(포인터 핸들러로), 수직 드래그=페이지 스크롤(브라우저로 위임).
     pan-y가 없으면 브라우저가 터치 드래그를 스크롤로 가로채 구간 선택이 깨진다(스크롤 보존 + 스크럽 양립). */
  touch-action: pan-y;
}

/* 단일 크로스헤어가 가이드를 그리므로 밴드별 크로스헤어는 숨김(이중선 방지). */
._tooltipLayerInteractive_1ulrc_319 ._bandHit_1ulrc_295::after {
  display: none;
}

/* 단일 세로 크로스헤어 — 위치는 인라인 transform(translateX), 최근접 점 x로 부드럽게 활주. */
._activeCrosshair_1ulrc_333 {
  position: absolute;
  left: 0;
  width: 1.5px;
  background: var(--wds-color-border-strong);
  opacity: 0.55;
  pointer-events: none;
  /* 전환 없이 즉시 추적 — 커서를 1:1로 따른다. 위치는 인라인 transform, 부드러움은 rAF 프레임정렬+데이터 밀도. */
}

/* 강조 dot — 시리즈색 채움 + surface 링(상시 마커보다 또렷), 위치는 인라인 transform. */
._activeDot_1ulrc_344 {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--wds-dot-color);
  border: 2.5px solid var(--wds-color-surface);
  box-shadow: var(--wds-shadow-sm);
  pointer-events: none;
  /* 전환 없이 즉시 스냅 — 커서를 1:1로 따른다. 위치는 인라인 transform, rAF 프레임정렬로 부드러움. */
}

._pointTooltipAnchor_1ulrc_358 {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

._pointTooltipBubble_1ulrc_365 {
  position: absolute;
  left: 0;
  bottom: calc(var(--wds-space-2) + var(--wds-space-1));
  z-index: var(--wds-z-tooltip);
  width: max-content;
  max-width: min(20rem, calc(100vw - var(--wds-space-8)));
  padding: var(--wds-space-2) var(--wds-space-3);
  color: var(--wds-color-bg);
  background: var(--wds-color-text);
  border-radius: var(--wds-radius-sm);
  box-shadow: var(--wds-shadow-md);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  text-align: start;
  white-space: normal;
  word-break: keep-all;
  transform: translateX(calc(-50% + var(--wds-chart-tooltip-shift-x, 0px)));
  animation: _chart-fade_1ulrc_1 var(--wds-duration-fast) var(--wds-ease-standard);
}

._pointTooltipBubble_1ulrc_365::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--wds-chart-tooltip-arrow-x, 50%);
  transform: translateX(-50%);
  border-width: var(--wds-space-1);
  border-style: solid;
  border-color: var(--wds-color-text) transparent transparent transparent;
}

._pointTooltipBubble_1ulrc_365[data-side='bottom'] {
  top: calc(var(--wds-space-2) + var(--wds-space-1));
  bottom: auto;
}

._pointTooltipBubble_1ulrc_365[data-side='bottom']::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--wds-color-text) transparent;
}

._pointTooltipTitle_1ulrc_410 {
  display: block;
  margin-bottom: var(--wds-space-1);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
}

._pointTooltipBody_1ulrc_417 {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  ._activeCrosshair_1ulrc_333,
  ._activeDot_1ulrc_344 {
    transition: none;
  }

  ._pointTooltipBubble_1ulrc_365 {
    animation: none;
  }
}

/* 구간 선택 밴드 — 클릭-드래그한 두 점 사이 음영. 양 끝 라인은 크로스헤어가, 점은 dot가 표시. */
._selectionBand_1ulrc_433 {
  position: absolute;
  background: var(--wds-color-border-strong);
  opacity: 0.1;
  pointer-events: none;
}

/* ── 빈 상태 ── */
._empty_1ulrc_441 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
}

/* ── 캡션 ── */
._caption_1ulrc_452 {
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  line-height: var(--wds-line-height-normal);
}

/* ── sr-only 데이터 표(스크린리더 정본) ── */
._srOnly_1ulrc_460 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* <table>은 auto-layout이라 width:1px을 무시하고 콘텐츠 폭으로 커진다(position:absolute라 페이지
     가로 오버플로 유발). fixed로 표 박스를 width에 묶는다(SR DOM·시멘틱은 불변). */
  table-layout: fixed;
}

@keyframes _chart-draw_1ulrc_1 {
  from {
    /* dasharray 2와 짝 — gap(2..4)이 경로(0..1)를 덮어 시작 시 완전 숨김 */
    stroke-dashoffset: 2;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes _chart-fade_1ulrc_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* reduced-motion = 정지(이름 비우기) + 최종 상태 즉시(WDS 정본). 데이터는 표가 상시 전달. */
@media (prefers-reduced-motion: reduce) {
  ._line_1ulrc_65 {
    animation: none;
    stroke-dasharray: none;
  }

  ._area_1ulrc_79,
  ._bar_1ulrc_85,
  ._marker_1ulrc_89 {
    animation: none;
  }

  ._seriesDimmed_1ulrc_98,
  ._seriesActive_1ulrc_103,
  ._bandHit_1ulrc_295::after {
    transition: none;
  }
}

/* forced-colors(Windows 고대비) — 그리드·축선을 시스템 색으로 보존해 데이터 영역이 안 사라지게.
   데이터 색(시리즈)은 시스템 색으로 강제 수렴할 수 있으나, line은 마커 모양으로 구분되고
   전 값은 sr-only 데이터 표가 정본이다. bar/area 패턴 채움은 P2. */
@media (forced-colors: active) {
  ._gridLine_1ulrc_25 {
    stroke: GrayText;
  }

  ._axisLine_1ulrc_31,
  ._zeroLine_1ulrc_37 {
    stroke: CanvasText;
  }

  ._marker_1ulrc_89 {
    stroke: Canvas;
  }
}
/* ChartDataState — 차트 데이터 상태(로딩·에러·빈) 컨테이너. 토큰 전용(DD-4). */

/* 상태 컨테이너 — 차트 플롯 영역과 동일 배치(figure 안에서 plot 자리를 대체). */
._stateWrap_1nv8z_4 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  min-height: 8rem;
  width: 100%;
  padding: var(--wds-space-4);
  box-sizing: border-box;
}

/* Skeleton rect — 100%×100% fill. stateWrap minHeight가 최소 높이 전달. */
._skeleton_1nv8z_16 {
  min-height: inherit;
  border-radius: var(--wds-radius-sm);
}

/* 에러·빈 상태는 EmptyState·Alert가 자체 패딩 제공 — stateWrap은 stretching만 담당. */
/* WDS Skeleton — 토큰 전용(DD-4). 모션은 opt-in 모디파이어, reduced-motion 정적. */
._skeleton_114hb_2 {
  /* 기본 tone(default) = border(gray-200) — 라이트 표면에서도 또렷하게 보임 */
  background: var(--wds-color-border);
}

/* 색 강도(tone) — default는 .skeleton base가 담당. subtle/strong만 오버라이드. */
._subtle_114hb_8 {
  background: var(--wds-color-surface-muted);
}
._strong_114hb_11 {
  background: var(--wds-color-border-strong);
}

/* 형태(variant) — radius/높이만 담당, 애니메이션과 직교 */
._text_114hb_16 {
  width: 100%;
  height: var(--wds-space-4);
  border-radius: var(--wds-radius-sm);
}
._rect_114hb_21 {
  border-radius: var(--wds-radius-md);
}
._rounded_114hb_24 {
  border-radius: var(--wds-radius-lg);
}
._circle_114hb_27 {
  border-radius: var(--wds-radius-full);
}

/* 모션(animation) — opt-in 모디파이어. 컴포지터 친화 속성만 사용. */
._pulse_114hb_32 {
  /* 호흡 주기 — ambient.breath 토큰(1.6s). Flutter WizMotion.ambientBreath와 cross-target SSOT */
  animation: _wds-skeleton-pulse_114hb_1 var(--wds-ambient-breath) var(--wds-ease-standard) infinite;
}

._none_114hb_37 {
}

._wave_114hb_40 {
  position: relative;
  overflow: hidden;
}
._wave_114hb_40::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  /*
   * 셰머 밴드 — surface(밝은 톤)를 muted 위에 70%로 섞어 라이트/다크 모두에서
   * 또렷하되 과하지 않게. 55% 시작 힌트는 라이트에서 다소 흐려 70%로 상향:
   * 라이트=흰빛 하이라이트가 확실히 스치고, 다크=surface가 어두워도 muted와
   * 대비가 충분해 밴드가 보임. 양 끝 transparent로 부드러운 감쇠.
   */
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--wds-color-surface) 70%, transparent) 50%,
    transparent 100%
  );
  animation: _wds-skeleton-wave_114hb_1 var(--wds-ambient-breath) var(--wds-ease-standard) infinite;
}

@keyframes _wds-skeleton-pulse_114hb_1 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes _wds-skeleton-wave_114hb_1 {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._pulse_114hb_32 {
    animation: none;
  }
  ._wave_114hb_40::after {
    animation: none;
  }
}
/* WDS EmptyState — 토큰 전용(DD-4). 중앙 정렬 + surface-muted 원형 아이콘 영역. */
._emptyState_b86ko_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wds-space-2);
  padding: var(--wds-space-10) var(--wds-space-6);
  text-align: center;
}

/* 아이콘 슬롯 — surface-muted 원형 영역, 잉크는 text-muted */
._icon_b86ko_13 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-12);
  height: var(--wds-space-12);
  margin-block-end: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
}

/* 일러스트 슬롯 — 자체 프레임(원형 배경 없음). icon 대신 렌더되며 더 큼. 장식. */
._illustration_b86ko_26 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--wds-space-2);
}

._title_b86ko_33 {
  margin: 0;
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}

._description_b86ko_41 {
  margin: 0;
  max-inline-size: 28rem;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
  word-break: keep-all;
}

._action_b86ko_49 {
  margin-block-start: var(--wds-space-2);
}
/* Empty State 스팟 일러스트 — 단일 버전 인라인 SVG. width(attr) 기준, 높이는 viewBox 비율을 따른다.
   색은 var(--esc-*) 토큰화 — 라이트는 fallback(원본)으로 무변경, 다크만 아래에서 override한다. */

._spot_kbxwu_4 {
  display: inline-block;
  height: auto;
  /* 자체 backdrop을 가진 씬이므로 폭을 넘기지 않게만 제한 */
  max-width: 100%;
}

/* 다크 테마: 중립/면/헤일로 색만 어둡게 재해석.
   블루 액센트(#1485fd 등)·스킨·옐로우는 fallback 원본을 그대로 유지(여기에 미정의 → 변경 안 됨). */
[data-theme='dark'] ._spot_kbxwu_4 {
  /* 면/카드/페이지(white) — 컨테이너 surface 토큰에 맞춰 가장자리가 자연스럽게 녹게 한다.
     (라이트의 흰 종이=흰 배경 melt 동작을 다크에서 재현 → No Data 문서 하단의 사각 잔상 제거) */
  --esc-white: var(--wds-color-surface);
  /* 드롭섀도 카드(필터 그룹) 본문 + 외곽선 — 배경과 구분되게(Groups 아이콘처럼).
     본문은 surface보다 살짝 밝게, 외곽선은 밝은 라인으로 가장자리를 또렷하게. */
  --esc-card: #2c333f;
  --esc-card-stroke: #4c576e;
  /* 그 외 밝은 표면/벽(씬) — 어두운 표면 램프 */
  --esc-fafafa: #2e3542;
  --esc-f5f5f5: #303744;
  --esc-f0f0f0: #333a47;
  --esc-ebebeb: #363d4a;
  --esc-e6e6e6: #39404e;
  --esc-e0e0e0: #3c4351;
  --esc-dbdbdb: #3f4654;
  --esc-c7c7c7: #4a5160;
  --esc-a6a6a6: #5e6675;
  /* 헤일로/배경 그라데이션 — 표면보다 살짝 다른 톤으로 은은하게 */
  --esc-e3ecfa: #2b3340;
  --esc-dae7ff: #2d3542;
  --esc-dfeafb: #2c3340;
  --esc-e1ebfa: #2d3441;
  --esc-dee9fc: #2f3744;
  /* 라이트 블루 플레이스홀더 — 표면보다 밝은 블루-그레이로 가독 유지 */
  --esc-b4daff: #3b4b66;
  --esc-a0bdff: #465672;
  --esc-8da8df: #4f5e7a;
  /* 어두운 외곽선/디테일 — 다크 배경에서 사라지지 않게 밝게 */
  --esc-263238: #aab4c3;
  --esc-455a64: #8995a7;
}
/* WDS Tooltip — 토큰 전용(DD-4). 텍스트/배경 토큰 반전으로 라이트/다크 모두 고대비. */
._wrap_1efvd_2 {
  position: relative;
  display: inline-flex;
}

._tooltip_1efvd_7 {
  position: absolute;
  bottom: calc(100% + var(--wds-space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--wds-z-tooltip);
  /* 좁은 트리거 기준 shrink-to-fit 방지 — 내용 폭으로 잡고 16rem에서 줄바꿈 */
  width: max-content;
  max-width: 16rem;
  padding: var(--wds-space-1) var(--wds-space-2);
  background: var(--wds-color-text);
  color: var(--wds-color-bg);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  /* 긴 내용은 max-width 안에서 단어 단위 줄바꿈 — nowrap은 16rem 상한과 모순 */
  white-space: normal;
  word-break: keep-all;
  border-radius: var(--wds-radius-sm);
  box-shadow: var(--wds-shadow-md);
  /* 호버 가능(WCAG 1.4.13): 포인터가 버블에 올라가도 사라지지 않도록 이벤트 허용 */
  pointer-events: auto;
  animation: _tooltip-in_1efvd_1 var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast);
}

/* rich: 제목+본문 카드 — 더 넓고 좌측 정렬 (M3, ADR-012 B-P1) */
._rich_1efvd_34 {
  max-width: 20rem;
  padding: var(--wds-space-2) var(--wds-space-3);
  text-align: start;
}

._title_1efvd_40 {
  display: block;
  margin-bottom: var(--wds-space-1);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
}

._body_1efvd_47 {
  display: block;
}

/* 화살표 — border 트릭(상단만 채움). border-*-color는 /color$/ 토큰 게이트를 통과한다 */
._tooltip_1efvd_7::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: var(--wds-space-1);
  border-style: solid;
  border-color: var(--wds-color-text) transparent transparent transparent;
}

/* floating — 포털(body) fixed 배치. top/left/화살표는 collision solver가 계산한다. */
._floating_1efvd_64 {
  position: fixed;
  bottom: auto;
  left: 0;
  top: 0;
  max-width: min(20rem, calc(100vw - var(--wds-space-4)));
  transform: none;
}

._floatingTop_1efvd_73 {
  transform: none;
}

/* 아래 배치 — 화살표를 위로 뒤집는다 */
._floatingBottom_1efvd_78 {
  transform: none;
}

._floatingTop_1efvd_73::after,
._floatingBottom_1efvd_78::after {
  left: var(--wds-tooltip-arrow-x, 50%);
  transform: translateX(-50%);
}

._floatingBottom_1efvd_78::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--wds-color-text) transparent;
}

._floatingLeft_1efvd_94::after {
  top: var(--wds-tooltip-arrow-y, 50%);
  bottom: auto;
  left: 100%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--wds-color-text);
}

._floatingRight_1efvd_102::after {
  top: var(--wds-tooltip-arrow-y, 50%);
  bottom: auto;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border-color: transparent var(--wds-color-text) transparent transparent;
}

/* 방향 변형 — 가장자리 트리거가 overflow 컨테이너 안쪽을 향하게(경계 잘림 회피). 화살표도 함께 회전. */
._bottom_1efvd_112 {
  top: calc(100% + var(--wds-space-2));
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

._bottom_1efvd_112::after {
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--wds-color-text) transparent;
}

._left_1efvd_127 {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + var(--wds-space-2));
  transform: translateY(-50%);
}

._left_1efvd_127::after {
  top: 50%;
  bottom: auto;
  left: 100%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--wds-color-text);
}

._right_1efvd_143 {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--wds-space-2));
  transform: translateY(-50%);
}

._right_1efvd_143::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border-color: transparent var(--wds-color-text) transparent transparent;
}

@keyframes _tooltip-in_1efvd_1 {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._tooltip_1efvd_7 {
    animation: none;
  }
}
/*
 * AuthMethodButton — Button(secondary) 위 아이콘 + 라벨 정렬 보조.
 * 색·높이·radius·포커스는 Button이 소유한다(여기선 아이콘 슬롯만 한정).
 */

/* 아이콘 슬롯 — 코어 아이콘(currentColor)이 라벨과 같은 베이스라인에 정렬.
   size prop(18px)이 시각 크기를 정하고 flex:none로 라벨 압력에 줄지 않게 고정. */
._icon_krw1y_8 {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

._label_krw1y_15 {
  display: inline-flex;
  align-items: center;
}
/* WDS Button — 토큰 전용(DD-4). 시드 대비: 높이 토큰화 · AA 채움(DD-6) · 포커스 링. */
._button_lt829_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wds-space-2);
  font-family: var(--wds-font-sans);
  font-weight: var(--wds-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--wds-button-radius);
  /* 연속 곡률(08) — 기본 round, .wds-squircle 스코프서 초타원(Chromium 139+, 그 외 원호 폴백). */
  corner-shape: var(--wds-corner-shape, round);
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._button_lt829_2:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._button_lt829_2:disabled {
  cursor: not-allowed;
}

/* ── Size — control 높이 토큰 (Flutter 패리티, COMPONENT_API §4-2) ── */
._sm_lt829_31 {
  height: var(--wds-button-height-sm);
  padding-inline: var(--wds-space-3);
  font-size: var(--wds-font-size-body-2);
}
._md_lt829_36 {
  height: var(--wds-button-height-md);
  padding-inline: var(--wds-space-4);
  font-size: var(--wds-font-size-body-1);
}
._lg_lt829_41 {
  height: var(--wds-button-height-lg);
  padding-inline: var(--wds-space-6);
  font-size: var(--wds-font-size-body-1);
}

/* ── Primary ── */
._primary_lt829_48 {
  background: var(--wds-button-bg);
  color: var(--wds-button-fg);
}
._primary_lt829_48:hover:not(:disabled) {
  background: var(--wds-button-bg-hover);
}
._primary_lt829_48:active:not(:disabled) {
  background: var(--wds-button-bg-active);
}
._primary_lt829_48:disabled {
  background: var(--wds-button-bg-disabled);
  color: var(--wds-button-fg-disabled);
}

/* ── Secondary (outline) — 라벨은 primary-text(AA 보장 잉크, DD-6) ── */
._secondary_lt829_64 {
  background: var(--wds-color-surface);
  color: var(--wds-color-primary-text);
  border-color: var(--wds-color-border-strong);
}
._secondary_lt829_64:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  border-color: var(--wds-color-primary);
}
._secondary_lt829_64:active:not(:disabled) {
  background: var(--wds-color-surface-selected);
}
._secondary_lt829_64:disabled {
  color: var(--wds-color-text-placeholder);
  border-color: var(--wds-color-border);
}

/* ── Ghost ── */
._ghost_lt829_82 {
  background: transparent;
  color: var(--wds-color-text-muted);
}
._ghost_lt829_82:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._ghost_lt829_82:active:not(:disabled) {
  background: var(--wds-color-surface-selected);
}
._ghost_lt829_82:disabled {
  color: var(--wds-color-text-placeholder);
}

._fullWidth_lt829_97 {
  width: 100%;
}

/* 로딩 Spinner — 변형 잉크(예: primary 흰색)를 그대로 상속 */
._loadingSpinner_lt829_102 {
  color: inherit;
}
/* WDS Autocomplete — 토큰 전용(DD-4). 트리거는 Input 어휘, 팝업은 dropdown 어휘(Select과 동일). */
._root_m34pk_2 {
  position: relative;
  display: inline-block;
  /* 칩 + 입력 어포던스 기준 최소 폭 (MultiSelect 16rem과 같은 지위의 레이아웃 값) */
  min-width: 16rem;
}

/* ── 트리거 — 칩 줄바꿈을 허용하는 Input 어휘, 포커스 링은 wrap :focus-within ── */
._wrap_m34pk_10 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wds-space-1);
  min-height: var(--wds-input-height);
  padding-block: var(--wds-space-1);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._wrap_m34pk_10:focus-within {
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

._disabled_m34pk_30 {
  background: var(--wds-input-bg-disabled);
}

._input_m34pk_34 {
  flex: 1;
  min-width: 6rem;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wds-input-fg);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
}
._input_m34pk_34::placeholder {
  color: var(--wds-input-placeholder);
}
._input_m34pk_34:disabled {
  cursor: not-allowed;
}

/* maxSelections 도달 안내 */
._hint_m34pk_53 {
  margin: var(--wds-space-1) 0 0;
  color: var(--wds-color-text-subtle);
  font-size: var(--wds-font-size-caption);
}

/* ── 팝업 — z-dropdown · surface-raised · shadow-lg (Select 플립 패턴) ── */
._list_m34pk_60 {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  margin: 0;
  padding: var(--wds-space-1);
  list-style: none;
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  /* 약 6옵션 상한 — 초과분은 내부 스크롤 (Select과 동일) */
  max-height: 16rem;
  overflow-y: auto;
  animation: _list-in_m34pk_1 var(--wds-duration-fast) var(--wds-ease-out);
}
._flipped_m34pk_77 {
  top: auto;
  bottom: calc(100% + var(--wds-space-1));
}

._option_m34pk_82 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--wds-control-height-sm);
  padding-block: var(--wds-space-1);
  padding-inline: var(--wds-space-3);
  border-radius: var(--wds-radius-sm);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  cursor: pointer;
}
._active_m34pk_94 {
  background: var(--wds-color-surface-hover);
}
._option_m34pk_82:active {
  background: var(--wds-color-surface-pressed);
}

._optionLabel_m34pk_101 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._optionDescription_m34pk_106 {
  overflow: hidden;
  color: var(--wds-color-text-subtle);
  font-size: var(--wds-font-size-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 로딩/빈 상태 ── */
._loadingRow_m34pk_115 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wds-space-4);
  color: var(--wds-color-text-muted);
}
._empty_m34pk_122 {
  padding: var(--wds-space-4);
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-2);
  text-align: center;
}

@keyframes _list-in_m34pk_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._wrap_m34pk_10 {
    transition: none;
  }
  ._list_m34pk_60 {
    animation: none;
  }
}
/* WDS Tag — 토큰 전용(DD-4). 상태색 잉크는 *-text, 틴트 8%(12% AA 미달 전례). */
._tag_mq66o_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  font-weight: var(--wds-font-weight-medium);
  white-space: nowrap;
  max-width: 100%;
}

._label_mq66o_12 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 크기 ── */
._sm_mq66o_19 {
  padding: var(--wds-space-1) var(--wds-space-2);
  font-size: var(--wds-font-size-caption);
}
._md_mq66o_23 {
  padding: var(--wds-space-1) var(--wds-space-3);
  font-size: var(--wds-font-size-body-2);
}

/* ── 변형 ── */
._neutral_mq66o_29 {
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
}

._primary_mq66o_34 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}

._success_mq66o_39 {
  background: color-mix(in srgb, var(--wds-color-success) 8%, var(--wds-color-surface));
  color: var(--wds-color-success-text);
}

._warning_mq66o_44 {
  background: color-mix(in srgb, var(--wds-color-warning) 8%, var(--wds-color-surface));
  color: var(--wds-color-warning-text);
}

._error_mq66o_49 {
  background: color-mix(in srgb, var(--wds-color-error) 8%, var(--wds-color-surface));
  color: var(--wds-color-error-text);
}

/* ── 제거 버튼 — 시각 작음 + 44px 히트 영역 ── */
._remove_mq66o_55 {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  margin-inline-end: calc(-1 * var(--wds-space-1));
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-full);
  background: transparent;
  color: currentcolor;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 icon-size-md(20px) → 44px 히트 영역: (44 - 20) / 2 = space-3(12px) (IconButton §5 미러) */
._remove_mq66o_55::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--wds-space-3));
}
._remove_mq66o_55:hover {
  opacity: 1;
}
/* 눌림 — IconButton ghost와 같은 어휘의 pressed 배경 */
._remove_mq66o_55:active {
  background: var(--wds-color-surface-pressed);
}
._remove_mq66o_55:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._remove_mq66o_55 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}
/* WDS Avatar — 토큰 전용(DD-4). 이니셜 폴백은 primary-subtle + primary-text(AgentCard 아바타 선례).
 * 시드 대비: 크기를 space 토큰에 정렬 — sm 32 / md 40 / lg 48px. */
._avatar_136km_3 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}

._img_136km_15 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._fallback_136km_21 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: var(--wds-font-weight-semibold);
}

/* ── Sizes — space 토큰 정렬 ── */
._sm_136km_31 {
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  font-size: var(--wds-font-size-caption);
}
._md_136km_36 {
  width: var(--wds-space-10);
  height: var(--wds-space-10);
  font-size: var(--wds-font-size-body-2);
}
._lg_136km_41 {
  width: var(--wds-space-12);
  height: var(--wds-space-12);
  font-size: var(--wds-font-size-body-1);
}
/* WDS Badge — 토큰 전용(DD-4). 시드 대비: gray 원시값 → semantic, 틴트는 8% 고정
 * (12%는 success-text와 4.39:1로 AA 미달 — AgentCard axe 실측 선례). */
._badge_1a9lf_3 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  padding: var(--wds-space-1) var(--wds-space-2);
  border-radius: var(--wds-radius-full);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  white-space: nowrap;
}

/* dot: 내용 없는 작은 알림 점 (ADR-012 B-P1) */
._badge_1a9lf_3._dot_1a9lf_16 {
  gap: 0;
  width: var(--wds-space-2);
  height: var(--wds-space-2);
  padding: 0;
}

/* count: 숫자 배지 — 원형 유지 + 중앙 정렬 (ADR-012 B-P1) */
._badge_1a9lf_3._count_1a9lf_24 {
  justify-content: center;
  min-width: var(--wds-space-4);
  padding-block: 0;
  padding-inline: var(--wds-space-1);
}

._neutral_1a9lf_31 {
  background: var(--wds-badge-neutral-bg);
  color: var(--wds-badge-neutral-fg);
}
._primary_1a9lf_35 {
  background: var(--wds-badge-primary-bg);
  color: var(--wds-badge-primary-fg);
}
._success_1a9lf_39 {
  background: color-mix(in srgb, var(--wds-color-success) 8%, var(--wds-color-surface));
  color: var(--wds-color-success-text);
}
._warning_1a9lf_43 {
  background: color-mix(in srgb, var(--wds-color-warning) 8%, var(--wds-color-surface));
  color: var(--wds-color-warning-text);
}
._error_1a9lf_47 {
  background: color-mix(in srgb, var(--wds-color-error) 8%, var(--wds-color-surface));
  color: var(--wds-color-error-text);
}
._info_1a9lf_51 {
  background: color-mix(in srgb, var(--wds-color-info) 8%, var(--wds-color-surface));
  color: var(--wds-color-info-text);
}
/* WDS BadgeToggle — 토큰 전용(DD-4). radius-full 필 + 선택 = primary-subtle 슬라이딩 알약(thumb). */
._group_kgyn7_2 {
  position: relative; /* thumb의 offsetParent + 절대 위치 기준 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wds-space-2);
}

/* 선택 알약 — 비선택 필(z-index 1) 위(z-index 2)를 미끄러져 이동 중에도 가려지지 않고,
   선택 필(z-index 3)은 그 위라 텍스트가 또렷하다. translate/크기는 인라인 style(선택 필 측정값). */
._thumb_kgyn7_12 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--wds-color-primary-subtle);
  border-radius: var(--wds-radius-full);
  box-shadow: var(--wds-shadow-sm);
  /* 위치/크기는 인라인 CSS 변수(선택 필 측정값). 슬라이드는 SegmentedButton과 동일 스프링. */
  transform: translate(var(--bt-thumb-x, 0), var(--bt-thumb-y, 0))
    scale(var(--bt-thumb-press, 1));
  transform-origin: center;
  transition:
    transform var(--wds-thumb-motion-duration, var(--wds-spring-spatial-fast-duration)) var(--wds-spring-spatial-fast),
    width var(--wds-thumb-motion-duration, var(--wds-spring-spatial-fast-duration)) var(--wds-spring-spatial-fast),
    height var(--wds-thumb-motion-duration, var(--wds-spring-spatial-fast-duration)) var(--wds-spring-spatial-fast);
  pointer-events: none;
}

/* 누름 피드백 — 선택 필을 누르면 알약이 살짝 수축한다. 위치는 보존. */
._group_kgyn7_2:has(._pill_kgyn7_32[aria-checked='true']:active) ._thumb_kgyn7_12 {
  --bt-thumb-press: 0.94;
}

._pill_kgyn7_32 {
  position: relative;
  z-index: 1; /* thumb 아래 — 이동 중 thumb이 비선택 필 위를 지난다 */
  display: inline-flex;
  align-items: center;
  height: var(--wds-space-8);
  padding-inline: var(--wds-space-3);
  border: 1px solid transparent;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 필 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._pill_kgyn7_32::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}

._pill_kgyn7_32:hover:not(:disabled):not([aria-checked='true']) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
/* 눌림 — neutral 면에만 pressed. 선택(primary-subtle) 필은 유지 */
._pill_kgyn7_32:active:not(:disabled):not([aria-checked='true']) {
  background: var(--wds-color-surface-pressed);
}
._pill_kgyn7_32:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 선택 = 슬라이딩 thumb가 면(primary-subtle)·리프트를 제공 → 필은 투명, thumb 위(z-index 3)에서 텍스트만 강조 */
._pill_kgyn7_32[aria-checked='true'] {
  z-index: 3;
  background: transparent;
  border-color: transparent;
  color: var(--wds-color-primary-text);
}

._pill_kgyn7_32:disabled {
  background: var(--wds-color-disabled-bg);
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  ._pill_kgyn7_32,
  ._thumb_kgyn7_12 {
    transition: none;
  }
}
/* WDS BottomSheet — 토큰 전용(DD-4). 등장 모션은 compositor 속성만. */
._overlay_jjnmb_2 {
  position: fixed;
  inset: 0;
  z-index: var(--wds-z-modal);
  display: flex;
  align-items: flex-end;
  background: var(--wds-color-overlay);
  animation: _overlay-in_jjnmb_1 var(--wds-duration-fast) var(--wds-ease-out);
}

/* standard(ADR-012 B-P2) — 스크림 없이 본문과 공존. 오버레이가 클릭을 가로채지 않고
   패널만 상호작용 가능하게 둔다. */
._standard_jjnmb_14 {
  background: transparent;
  pointer-events: none;
}
._standard_jjnmb_14 ._panel_jjnmb_18 {
  pointer-events: auto;
}

._panel_jjnmb_18 {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 모바일 시트 상한 — 상단 컨텍스트 일부 노출 (레이아웃 값, 토큰 범위 밖) */
  max-height: 85dvh;
  background: var(--wds-color-surface-raised);
  border-radius: var(--wds-radius-xl) var(--wds-radius-xl) 0 0;
  box-shadow: var(--wds-shadow-xl);
  outline: none;
  animation: _sheet-in_jjnmb_1 var(--wds-duration-normal) var(--wds-ease-emphasized-decelerate);
  transition:
    transform var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast),
    height var(--wds-spring-spatial-default-duration) var(--wds-spring-spatial-default),
    max-height var(--wds-spring-spatial-default-duration) var(--wds-spring-spatial-default);
  will-change: transform;
}

._panel_jjnmb_18[data-wds-bottom-sheet-dragging='true'] {
  transition: none;
}

._half_jjnmb_44 {
  height: 50dvh;
}
._full_jjnmb_47 {
  height: 85dvh;
}

._handleArea_jjnmb_51 {
  display: flex;
  justify-content: center;
  padding: var(--wds-space-2) 0 var(--wds-space-1);
  cursor: grab;
  touch-action: none;
}
._handleArea_jjnmb_51:active {
  cursor: grabbing;
}

._handle_jjnmb_51 {
  width: var(--wds-space-10);
  height: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border-strong);
}

._header_jjnmb_69 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-4);
  padding: var(--wds-space-2) var(--wds-space-6) var(--wds-space-3);
}
._header_jjnmb_69[data-visible='false'] {
  display: block;
  height: 0;
  padding: 0;
}

._title_jjnmb_82 {
  margin: 0;
  font-size: var(--wds-font-size-h3);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}
._titleVisuallyHidden_jjnmb_89 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

._close_jjnmb_101 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px + 히트 44px (모바일 표면의 기본 컨트롤) */
._close_jjnmb_101::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._close_jjnmb_101:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._close_jjnmb_101:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._close_jjnmb_101:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._close_jjnmb_101 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._body_jjnmb_140 {
  padding: 0 var(--wds-space-6) var(--wds-space-4);
  overflow-y: auto;
  color: var(--wds-color-text);
  flex: 1;
  min-height: 0;
}

._footer_jjnmb_148 {
  display: flex;
  gap: var(--wds-space-2);
  padding: var(--wds-space-3) var(--wds-space-6)
    calc(var(--wds-space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--wds-color-border);
}
/* 푸터 버튼은 균등 폭이 모바일 관례 */
._footer_jjnmb_148 > * {
  flex: 1;
}

@keyframes _overlay-in_jjnmb_1 {
  from {
    opacity: 0;
  }
}
@keyframes _sheet-in_jjnmb_1 {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._overlay_jjnmb_2,
  ._panel_jjnmb_18 {
    animation: none;
    transition: none;
  }
}
/* WDS Breadcrumb — 토큰 전용(DD-4). */
._list_24zik_2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wds-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

._item_24zik_12 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  font-size: var(--wds-font-size-body-2);
}

._link_24zik_19 {
  color: var(--wds-color-text-muted);
  text-decoration: none;
  border-radius: var(--wds-radius-sm);
  transition: color var(--wds-duration-fast) var(--wds-ease-standard);
}
._link_24zik_19:hover {
  color: var(--wds-color-link-hover);
  text-decoration: underline;
}
._link_24zik_19:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._text_24zik_34 {
  color: var(--wds-color-text-muted);
}

._current_24zik_38 {
  color: var(--wds-color-text);
  font-weight: var(--wds-font-weight-medium);
}

._separator_24zik_43 {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  color: var(--wds-color-text-placeholder);
}
/* WDS Calendar — 토큰 전용(DD-4). 범위 사이는 primary-subtle, 시작/끝 라운드. */
._calendar_1wgqy_2 {
  display: inline-flex;
  flex-direction: column;
  gap: var(--wds-space-3);
  padding: var(--wds-space-4);
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
}

._header_1wgqy_12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-2);
}

._nav_1wgqy_19 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃) */
._nav_1wgqy_19::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._nav_1wgqy_19:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._nav_1wgqy_19:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._nav_1wgqy_19:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._navIcon_1wgqy_52 {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._monthLabel_1wgqy_57 {
  flex: 1;
  text-align: center;
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
}
._monthLabelButton_1wgqy_64 {
  flex: 1;
  min-width: 0;
  height: var(--wds-space-8);
  padding-inline: var(--wds-space-2);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._monthLabelButton_1wgqy_64:hover {
  background: var(--wds-color-surface-hover);
}
._monthLabelButton_1wgqy_64:active {
  background: var(--wds-color-surface-pressed);
}
._monthLabelButton_1wgqy_64:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._grid_1wgqy_92 {
  border-collapse: collapse;
}

._pickerGrid_1wgqy_96 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
  min-width: calc(var(--wds-space-8) * 7);
}
._pickerRow_1wgqy_102 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wds-space-2);
}
._pickerCell_1wgqy_107 {
  min-width: 0;
}
._pickerOption_1wgqy_110 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--wds-space-8);
  padding-inline: var(--wds-space-2);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface);
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._pickerOption_1wgqy_110:hover:not(:disabled) {
  border-color: var(--wds-color-primary);
  background: var(--wds-color-surface-hover);
}
._pickerOption_1wgqy_110:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._pickerOption_1wgqy_110:disabled {
  border-color: var(--wds-color-border);
  background: var(--wds-color-surface);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}
._pickerOptionSelected_1wgqy_144 {
  border-color: var(--wds-color-primary-strong);
  background: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
}
._pickerOptionSelected_1wgqy_144:hover:not(:disabled) {
  background: var(--wds-color-primary-strong-hover);
  color: var(--wds-color-on-primary);
}

._weekRow_1wgqy_154 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

._weekday_1wgqy_159 {
  padding-block: var(--wds-space-1);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
}
._weekdaySaturday_1wgqy_165 {
  color: var(--wds-color-primary-text);
}
._weekdaySunday_1wgqy_168 {
  color: var(--wds-color-error-text);
}

._cell_1wgqy_172 {
  padding: 0;
  text-align: center;
  line-height: 0;
}
._emptyCell_1wgqy_177 {
  background: transparent;
}
._emptyDay_1wgqy_180 {
  display: inline-flex;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
}
._cellInRange_1wgqy_185,
._cellRangeStart_1wgqy_186,
._cellRangeEnd_1wgqy_187 {
  background: var(--wds-color-primary-subtle);
}
._cellRangeStart_1wgqy_186 {
  border-top-left-radius: var(--wds-radius-md);
  border-bottom-left-radius: var(--wds-radius-md);
}
._cellRangeEnd_1wgqy_187 {
  border-top-right-radius: var(--wds-radius-md);
  border-bottom-right-radius: var(--wds-radius-md);
}

._day_1wgqy_199 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 1px solid transparent;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._day_1wgqy_199:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — neutral 면에만. 선택/범위(primary 계열) 배경은 덮지 않는다 */
._day_1wgqy_199:active:not(:disabled):not(._selected_1wgqy_222):not(._inRange_1wgqy_222) {
  background: var(--wds-color-surface-pressed);
}
._day_1wgqy_199:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  z-index: var(--wds-z-dropdown);
}
._day_1wgqy_199:disabled {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

/* 주말 — 주요 상태(선택/범위/비활성/외부월)는 각 상태 색을 우선한다 */
._saturday_1wgqy_236:not(:disabled):not(._outside_1wgqy_236):not(._selected_1wgqy_222):not(._rangeStart_1wgqy_236):not(._rangeEnd_1wgqy_236):not(._inRange_1wgqy_222) {
  color: var(--wds-color-primary-text);
}
._sunday_1wgqy_239:not(:disabled):not(._outside_1wgqy_236):not(._selected_1wgqy_222):not(._rangeStart_1wgqy_236):not(._rangeEnd_1wgqy_236):not(._inRange_1wgqy_222) {
  color: var(--wds-color-error-text);
}

/* 이번 달 외 날짜 — muted */
._outside_1wgqy_236 {
  color: var(--wds-color-text-placeholder);
}

/* 오늘 — 보더 표시 */
._today_1wgqy_249 {
  border-color: var(--wds-color-primary);
}

/* 범위 사이 — primary-subtle 배경 (시작/끝 사이) */
._inRange_1wgqy_222 {
  background: transparent;
  color: var(--wds-color-primary-text);
  border-radius: 0;
}

/* 선택 — primary-strong 채움 + on-primary (DD-6: 날짜 숫자는 본문 크기 텍스트라 AA 4.5:1 보장 필요) */
._selected_1wgqy_222 {
  background: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
  border-color: transparent;
}
._selected_1wgqy_222:hover:not(:disabled) {
  background: var(--wds-color-primary-strong-hover);
}

/* 범위 시작/끝 — 바깥쪽만 라운드 처리 */
._rangeStart_1wgqy_236 {
  background: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
  border-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
._rangeEnd_1wgqy_236 {
  background: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
  border-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
._rangeStart_1wgqy_236:hover:not(:disabled),
._rangeEnd_1wgqy_236:hover:not(:disabled) {
  background: var(--wds-color-primary-strong-hover);
}

@media (max-width: 767px) {
  ._grid_1wgqy_92 {
    align-self: center;
    width: min(100%, calc(var(--wds-control-height-md) * 7));
  }

  ._weekRow_1wgqy_154 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  ._emptyDay_1wgqy_180,
  ._day_1wgqy_199 {
    width: 100%;
    height: var(--wds-control-height-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._nav_1wgqy_19,
  ._monthLabelButton_1wgqy_64,
  ._pickerOption_1wgqy_110,
  ._day_1wgqy_199 {
    transition: none;
  }
}
/* WDS Callout — 토큰 전용(DD-4). 틴트는 배경에만; 루트 color=톤 잉크(아이콘·제목 상속), 본문은 진한 중립. */
._callout_k2d4g_2 {
  display: flex;
  gap: var(--wds-space-3);
  padding: var(--wds-space-4);
  border-radius: var(--wds-radius-md);
}

._icon_k2d4g_9 {
  flex-shrink: 0;
  display: inline-flex;
  line-height: var(--wds-line-height-tight);
  color: inherit;
}

._body_k2d4g_16 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-1);
}

._title_k2d4g_23 {
  margin: 0;
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: inherit;
}

._content_k2d4g_30 {
  font-size: var(--wds-font-size-body-2);
  line-height: var(--wds-line-height-normal);
  color: var(--wds-color-text);
}

._info_k2d4g_36 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}
._success_k2d4g_40 {
  background: color-mix(in srgb, var(--wds-color-success) 8%, var(--wds-color-surface));
  color: var(--wds-color-success-text);
}
._warning_k2d4g_44 {
  background: color-mix(in srgb, var(--wds-color-warning) 8%, var(--wds-color-surface));
  color: var(--wds-color-warning-text);
}
._error_k2d4g_48 {
  background: color-mix(in srgb, var(--wds-color-error) 8%, var(--wds-color-surface));
  color: var(--wds-color-error-text);
}
/* WDS Card — surface + border + radius. 토큰 전용(DD-4). */
._card_ffpco_2 {
  background: var(--wds-card-surface);
  border: 1px solid var(--wds-card-border);
  border-radius: var(--wds-radius-lg);
  /* 연속 곡률(08) — 기본 round, .wds-squircle 스코프서 초타원(Chromium 139+, 그 외 원호 폴백). */
  corner-shape: var(--wds-corner-shape, round);
  overflow: hidden;
}

/* ── emphasis 축 (outlined / filled / elevated) ──────────────────── */
/* outlined = 기본(플랫): surface + border. */
._outlined_ffpco_13 {
  background: var(--wds-card-surface);
  border-color: var(--wds-card-border);
}
/* filled = 톤 표면, 보더 없음. */
._filled_ffpco_18 {
  background: var(--wds-card-surface-filled);
  border-color: transparent;
}
/* elevated = 그림자(강조용). shadow=true 하위호환 매핑. */
._elevated_ffpco_23 {
  border-color: transparent;
  box-shadow: var(--wds-shadow-md);
}

/* ── function 축 — clickable(상태는 표면·보더로, 그림자 아님) ───────── */
._interactive_ffpco_29 {
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._interactive_ffpco_29:hover {
  background: var(--wds-color-surface-hover);
}
._interactive_ffpco_29:active {
  background: var(--wds-color-surface-pressed);
}
._interactive_ffpco_29:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* ── 슬롯 ──────────────────────────────────────────────────────── */
/* media = 풀-블리드 상단(패딩 없음). 인라인 갭 방지 + 폭 채움. */
._media_ffpco_46 {
  display: block;
}
._media_ffpco_46 img,
._media_ffpco_46 svg,
._media_ffpco_46 video {
  display: block;
  width: 100%;
  height: auto;
}
._header_ffpco_56 {
  padding: var(--wds-space-4) var(--wds-space-6);
  border-bottom: 1px solid var(--wds-card-border);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}
._body_ffpco_63 {
  padding: var(--wds-space-6);
}
._footer_ffpco_66 {
  padding: var(--wds-space-4) var(--wds-space-6);
  border-top: 1px solid var(--wds-card-border);
}
/* WDS Carousel — 토큰 전용(DD-4). 색/여백/반경/폰트는 모두 var(--wds-*).
   아이템 폭은 %/구조값(기하) — variant별 레이아웃을 결정한다. */
._root_10q3s_3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  width: 100%;
  /* flex 부모(예: justify-content:center 프리뷰 패널) 안에서 min-content(컨트롤+카드 합)로
     버티지 않고 컨테이너 폭으로 줄어들게 한다 — 안 그러면 inline 컨트롤이 좁은 패널 밖으로
     잘린다(Playground 320px 오버플로). 리포 전반의 flex 안전 관례(Split·RadioGroup 등). */
  min-width: 0;
}

/* 스크롤 컨테이너(트랙) — scroll-snap 가로 스크롤 */
._track_10q3s_16 {
  display: flex;
  flex: 1 1 auto;
  gap: var(--wds-space-4);
  min-width: 0;
  padding-block: var(--wds-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

._track_10q3s_16::-webkit-scrollbar {
  display: none;
}

._track_10q3s_16:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wds-radius-md);
}

/* 슬라이드 — flex 아이템. 폭은 variant에서 지정 */
._item_10q3s_39 {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

/* multiBrowse(기본): 여러 아이템이 동시에 보이도록 좁은 폭.
   바닥값 7.5rem(120px) — 좁은 트랙(예: 320px 뷰포트의 ~142px 트랙)에서 40%가 ~57px로 붕괴해
   카드 텍스트가 세로로 깨지는 문제 방지(아트디렉션 검수). 뷰포트가 아닌 트랙 폭에 반응하므로
   좁은 컨테이너에서도 견고. 넓은 폭에선 40%가 이겨 기존 멀티브라우즈 레이아웃 유지. */
._track_10q3s_16[data-variant='multiBrowse'] ._item_10q3s_39 {
  flex-basis: max(40%, 7.5rem);
}

/* hero: 큰 포컬 아이템 1개 + 다음 아이템 peek */
._track_10q3s_16[data-variant='hero'] ._item_10q3s_39 {
  flex-basis: 80%;
}

/* fullScreen: 뷰포트 폭당 아이템 1개 */
._track_10q3s_16[data-variant='fullScreen'] ._item_10q3s_39 {
  flex-basis: 100%;
  scroll-snap-align: center;
}

/* 이전/다음 컨트롤 — 다른 아이콘 버튼과 동일한 surface + shadow 어휘 */
._control_10q3s_65 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-10);
  height: var(--wds-space-10);
  padding: 0;
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface);
  box-shadow: var(--wds-shadow-sm);
  color: var(--wds-color-text);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}

._control_10q3s_65:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  box-shadow: var(--wds-shadow-md);
}

._control_10q3s_65:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}

._control_10q3s_65:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._control_10q3s_65:disabled {
  color: var(--wds-color-text-placeholder);
  box-shadow: none;
  cursor: not-allowed;
}

._icon_10q3s_105 {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

/* overlay 배치 — 컨트롤을 슬라이드 위로 띄운다(트랙이 루트 폭을 채움).
   컨트롤엔 data-wds-surface="floating"가 붙어 liquid-glass 스코프에서 clear 글래스로 칠해진다.
   기본(solid) 테마에선 일반 불투명 버튼으로 보인다.

   ※ compact(<600px, ADR-012 BP.compact)에서는 띄우기를 끄고 inline 흐름으로 폴백한다 — 40px
   컨트롤 2개가 좁은 슬라이드(~296px@320뷰포트)의 약 1/3을 영구히 가려 미디어 가장자리를 잠식하는
   문제 회피(아트디렉션 검수 H-2). 폴백 시 컨트롤은 .control 기본 inline-flex 흐름으로 트랙 옆에
   놓여 콘텐츠를 가리지 않으며, floating 글래스 surface 계약은 유지된다. medium/expanded(≥600px,
   태블릿·데스크톱 — overlay의 의도된 미디어 갤러리 용처)에서만 띄운다. 600px 리터럴은 SSOT
   bp.compact 파생값으로, 드리프트 가드(breakpoint-css-parity.test)가 정합을 강제한다. */
@media (min-width: 600px) {
  ._root_10q3s_3[data-controls='overlay'] ._control_10q3s_65 {
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
  }
  ._root_10q3s_3[data-controls='overlay'] ._prev_10q3s_127 {
    inset-inline-start: var(--wds-space-3);
  }
  ._root_10q3s_3[data-controls='overlay'] ._next_10q3s_130 {
    inset-inline-end: var(--wds-space-3);
  }
}
/* 상호작용 상태는 불투명 surface로 튀지 않고 clear 글래스 가족 안에서 피드백한다 — 컴포넌트
   :hover/:active/:disabled 특이도가 테마 floating 계약(0,2,0)을 이기는 역전을 overlay 스코프에서
   글래스-친화 값으로 덮어 해소(아트디렉션 검수 C-1·H-1). backdrop-filter는 테마가 유지한다.
   resting 60%(material.clear) → hover 78 → active 88(또렷) · disabled 42(옅게)+shadow 유지. */
._root_10q3s_3[data-controls='overlay'] ._control_10q3s_65:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-lowest) 78%, transparent);
}
._root_10q3s_3[data-controls='overlay'] ._control_10q3s_65:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-lowest) 88%, transparent);
}
._root_10q3s_3[data-controls='overlay'] ._control_10q3s_65:disabled {
  background-color: color-mix(in srgb, var(--wds-color-surface-container-lowest) 42%, transparent);
  box-shadow: var(--wds-shadow-sm);
}

/* 모션 허용 시에만 부드러운 스크롤 — prefers-reduced-motion 존중 */
@media (prefers-reduced-motion: no-preference) {
  ._track_10q3s_16 {
    scroll-behavior: smooth;
  }
}
/* WDS DropdownMenu — 토큰 전용(DD-4). 등장 모션은 compositor 속성(opacity/transform)만. */
._root_1qthv_2 {
  position: relative;
  display: inline-block;
}

/* 트리거 — secondary 컨트롤 외형. 높이는 control 토큰(44px)이라 터치 타깃 별도 확장 불요 */
._trigger_1qthv_8 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  height: var(--wds-control-height-md);
  padding-inline: var(--wds-space-4);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text);
  background: var(--wds-color-surface);
  border: 1px solid transparent;
  border-color: var(--wds-color-border-strong);
  border-radius: var(--wds-radius-control);
  cursor: pointer;
  transition:
    background-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast),
    border-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast);
}
._trigger_1qthv_8:hover {
  background: var(--wds-color-surface-hover);
  border-color: var(--wds-color-primary);
}
/* 눌림 — 열림(surface-selected) 상태는 덮지 않고 닫힌 트리거에만 */
._trigger_1qthv_8:not([aria-expanded='true']):active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._trigger_1qthv_8[aria-expanded='true'] {
  background: var(--wds-color-surface-selected);
}
._trigger_1qthv_8:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 아이콘 트리거(triggerVariant="icon") — ghost 정사각 아이콘 버튼. 텍스트 버튼 외형(border·surface·
   가로 패딩) 무효화, chevron 없음. 카드 헤더 툴바 관용구(대시보드 ⋯/편집/확대와 동형). aria-label 필수. */
/* triggerSize/triggerShape — 컴포저 액션과 정렬(sm 32px·완전 원형). icon 트리거에 주로 사용. */
._triggerSm_1qthv_46 {
  height: var(--wds-control-height-sm);
}
._iconTrigger_1qthv_49._triggerSm_1qthv_46 {
  width: var(--wds-control-height-sm);
}
._triggerRound_1qthv_52 {
  border-radius: var(--wds-radius-full);
}

/* ghost — 무테 컴팩트 텍스트+chevron(컴포저 모델 선택 등 인라인). sm 높이·투명·ghost hover. */
._ghostTrigger_1qthv_57 {
  height: var(--wds-control-height-sm);
  padding-inline: var(--wds-space-2);
  color: var(--wds-color-text-muted);
  background: transparent;
  border-color: transparent;
}
._ghostTrigger_1qthv_57:hover {
  background: var(--wds-color-surface-hover);
  border-color: transparent;
  color: var(--wds-color-text);
}
._ghostTrigger_1qthv_57:not([aria-expanded='true']):active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
  color: var(--wds-color-text);
}
._ghostTrigger_1qthv_57[aria-expanded='true'] {
  background: var(--wds-color-surface-selected);
  border-color: transparent;
  color: var(--wds-color-text);
}

._iconTrigger_1qthv_49 {
  width: var(--wds-control-height-md);
  padding-inline: 0;
  justify-content: center;
  color: var(--wds-color-text-muted);
  background: transparent;
  border-color: transparent;
}
._iconTrigger_1qthv_49:hover {
  background: var(--wds-color-surface-hover);
  border-color: transparent;
  color: var(--wds-color-text);
}
/* 눌림 — 닫힌 트리거에만(열림 surface-selected는 덮지 않음). 면 진해짐 + 글리프 full 잉크 */
._iconTrigger_1qthv_49:not([aria-expanded='true']):active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
  color: var(--wds-color-text);
}
._iconTrigger_1qthv_49[aria-expanded='true'] {
  color: var(--wds-color-text);
}

._chevron_1qthv_101 {
  flex: none;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  color: var(--wds-color-text-muted);
  transition: transform var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast);
}
._trigger_1qthv_8[aria-expanded='true'] ._chevron_1qthv_101 {
  transform: rotate(180deg);
}

._menu_1qthv_112 {
  position: absolute;
  top: calc(100% + var(--wds-space-2));
  left: 0;
  z-index: var(--wds-z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  max-height: var(--wds-dropdown-menu-available-block-size, calc(100vh - var(--wds-space-4)));
  padding: var(--wds-space-1);
  background: var(--wds-color-surface-raised);
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  overflow-y: auto;
  /* 마우스 오픈 시 컨테이너로 프로그램 포커스 — 항목 선활성 방지. 컨테이너엔 포커스 링 없음. */
  outline: none;
  transform: translateX(var(--wds-dropdown-menu-shift-x, 0px));
  animation: _menu-in_1qthv_1 var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast);
}

._menuTop_1qthv_134 {
  top: auto;
  bottom: calc(100% + var(--wds-space-2));
}

/* 헤더 없는 구분선 — 메뉴 패딩을 상쇄해 좌우 가장자리까지(가로 음수 마진) */
._separator_1qthv_140 {
  height: 1px;
  margin: var(--wds-space-1) calc(-1 * var(--wds-space-1));
  background: var(--wds-color-border-subtle);
}

/* 서브메뉴 — 부모 항목 우측으로 펼침. wrap이 앵커(relative), submenu가 absolute. */
._submenuWrap_1qthv_147 {
  position: relative;
  display: flex;
  flex-direction: column;
}
._submenu_1qthv_147 {
  position: absolute;
  top: calc(-1 * var(--wds-space-1));
  left: 100%;
  z-index: var(--wds-z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  max-height: var(--wds-dropdown-submenu-available-block-size, calc(100vh - var(--wds-space-4)));
  padding: var(--wds-space-1);
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  overflow-y: auto;
  outline: none;
  transform: translate(
    var(--wds-dropdown-submenu-shift-x, 0px),
    var(--wds-dropdown-submenu-shift-y, 0px)
  );
}
._submenuLeft_1qthv_173 {
  right: 100%;
  left: auto;
}
._submenuChevron_1qthv_177 {
  flex: none;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  color: var(--wds-color-text-muted);
}

/* 옵션 행 — 리스트형 팝업 공통 어휘(40px 행·inline 12px·gap 8px·radius sm) */
._item_1qthv_185 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  width: 100%;
  min-height: var(--wds-space-10);
  padding-block: var(--wds-space-1);
  padding-inline: var(--wds-space-3);
  border: 0;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  text-align: left;
  color: var(--wds-color-text);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast);
}
._item_1qthv_185:hover:not(:disabled),
._item_1qthv_185:focus {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — neutral hover 면에만. danger는 자체 error 틴트 하이라이트 유지 */
._item_1qthv_185:not(._danger_1qthv_209):active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._item_1qthv_185:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: -2px;
}
._item_1qthv_185:disabled {
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}

/* 라벨 — 가용 폭을 채워 trailingText를 우측으로 밀어낸다 */
._label_1qthv_222 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 라벨 앞 아이콘 — 장식(aria-hidden), 메뉴 아이콘 치수 토큰 */
._leadingIcon_1qthv_231 {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  color: var(--wds-color-text-muted);
}
._danger_1qthv_209 ._leadingIcon_1qthv_231 {
  color: var(--wds-color-error-text);
}

/* 라벨 우측 보조 텍스트(숏컷 등) — muted·작은 글자·우측 정렬 */
._trailingText_1qthv_245 {
  flex: none;
  margin-inline-start: var(--wds-space-4);
  font-size: var(--wds-font-size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--wds-color-text-muted);
}

/* 섹션 헤더 — 비대화형(role="presentation"). 캡션 톤, 메뉴 항목과 정렬 */
._groupHeader_1qthv_254 {
  padding-block: var(--wds-space-1);
  padding-inline: var(--wds-space-3);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
  user-select: none;
}
/* 첫 항목이 아닌 헤더 위에는 구분 여백 — 섹션 간 리듬 */
._groupHeader_1qthv_254:not(:first-child) {
  margin-top: var(--wds-space-1);
}

/* 파괴적 액션 — error 잉크 + 10% 틴트 하이라이트 (시드 destructive 포팅) */
._danger_1qthv_209 {
  color: var(--wds-color-error-text);
}
._danger_1qthv_209:hover:not(:disabled),
._danger_1qthv_209:focus {
  background: color-mix(in srgb, var(--wds-color-error) 10%, var(--wds-color-surface-raised));
}
._danger_1qthv_209:disabled {
  color: var(--wds-color-disabled-fg);
}

@keyframes _menu-in_1qthv_1 {
  from {
    opacity: 0;
    transform: translateX(var(--wds-dropdown-menu-shift-x, 0px)) translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._menu_1qthv_112 {
    animation: none;
  }
  ._chevron_1qthv_101 {
    transition: none;
  }
}
/* WDS ChatMessage — GPT-5 비대칭 대화 메시지. 토큰 전용(DD-4). */
._msg_vako0_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-1);
  animation: _msgIn_vako0_1 180ms ease-out;
}

/* user — 연회색 버블, 우측 정렬(아바타·타임스탬프 없음) */
._user_vako0_10 {
  align-items: flex-end;
}

._userBubble_vako0_14 {
  width: fit-content;
  max-width: 80%;
  padding: var(--wds-space-3) var(--wds-space-4);
  border-radius: var(--wds-radius-xl);
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  line-height: 1.6;
  word-break: break-word;
}

/* assistant — 버블 없는 전폭 텍스트(GPT-5) */
._assistantText_vako0_27 {
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 화자 구분 — 시각 외 보조기술 전용 텍스트 */
._srOnly_vako0_36 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes _msgIn_vako0_1 {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._msg_vako0_2 {
    animation: none;
  }
}
/* WDS ChatThread — 대화 스크롤 로그. 토큰 전용(DD-4). */
._thread_1359y_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-4);
  min-height: 0;
  overflow-y: auto;
}
/* WDS Checkbox — 토큰 전용(DD-4). component 토큰 --wds-checkbox-* 소비. */
._root_1ergb_2 {
  /* .input(시각 숨김 absolute) 담기용 — 히트 영역(::after)은 .box에 건다. */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  cursor: pointer;
}

/* 시각적으로 숨기되 포커스/스크린리더 유지(box 바로 앞에 위치). */
._input_1ergb_3 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

._box_1ergb_3 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: var(--wds-checkbox-check);
  background: var(--wds-checkbox-bg);
  border: 1px solid var(--wds-checkbox-border);
  border-radius: var(--wds-checkbox-radius);
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 18px 박스 → control.height-md(44px) 히트 영역 역산 확장 (Switch `.track::after` 동형).
   inset이 음수((1.125rem-2.75rem)/2 = -13px)가 되어 박스 기준 44×44 비-리플로 터치 타깃을
   만든다(WCAG 2.5.5 AAA / iOS HIG, Flutter ConstrainedBox(44) 패리티). 라벨은 <label>
   래핑으로 그대로 클릭 가능하며 히트 폭을 더 넓힌다.
   주의(의도된 절충): 짧은 행을 작은 gap(<26px)으로 세로로 빽빽이 쌓으면 비가시 ::after
   히트존이 인접 행과 ~10–15px 겹친다(겹침 구간은 위에 페인트되는 아래쪽 체크박스가 차지 —
   박스 중심은 안전). 비-리플로 제약상 불가피하며 Switch와 동질. 빽빽한 묶음에서 겹침 없는
   분리가 필요하면 행을 분산(RadioGroup은 행 min-height로 처리)하거나 gap을 넓힌다. */
._box_1ergb_3::after {
  content: '';
  position: absolute;
  inset: calc((1.125rem - var(--wds-control-height-md)) / 2);
}

._check_1ergb_55,
._dash_1ergb_56 {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--wds-duration-fast) var(--wds-ease-standard),
    transform var(--wds-duration-fast) var(--wds-ease-standard);
}

._input_1ergb_3:checked + ._box_1ergb_3,
._input_1ergb_3:indeterminate + ._box_1ergb_3 {
  background: var(--wds-checkbox-bg-checked);
  border-color: var(--wds-checkbox-bg-checked);
}
._input_1ergb_3:checked:not(:indeterminate) + ._box_1ergb_3 ._check_1ergb_55 {
  opacity: 1;
  transform: scale(1);
}
._input_1ergb_3:indeterminate + ._box_1ergb_3 ._dash_1ergb_56 {
  opacity: 1;
  transform: scale(1);
}

._input_1ergb_3:focus-visible + ._box_1ergb_3 {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* sm 크기 (ADR-012 B-P2) — 박스 16px, 체크/대시 12px. 16px 기준으로 44px 히트 영역 재역산. */
._root_1ergb_2[data-size='sm'] ._box_1ergb_3 {
  width: 1rem;
  height: 1rem;
}
._root_1ergb_2[data-size='sm'] ._box_1ergb_3::after {
  inset: calc((1rem - var(--wds-control-height-md)) / 2);
}
._root_1ergb_2[data-size='sm'] ._check_1ergb_55,
._root_1ergb_2[data-size='sm'] ._dash_1ergb_56 {
  width: 0.75rem;
  height: 0.75rem;
}

._label_1ergb_100 {
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
}

._disabled_1ergb_105 {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  ._box_1ergb_3,
  ._check_1ergb_55,
  ._dash_1ergb_56 {
    transition: none;
  }
}
/* WDS Chip — 토큰 전용(DD-4). M3 칩(assist/suggestion/filter/input). 둥근 알약. */
._chip_1xxc5_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  max-width: 100%;
  padding: var(--wds-space-1) var(--wds-space-3);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface);
  color: var(--wds-color-text);
  font-family: inherit;
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  white-space: nowrap;
}

._label_1xxc5_18 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._leading_1xxc5_24 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: calc(-1 * var(--wds-space-1));
}
._leading_1xxc5_24 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

/* ── 크기 ── */
._chip_1xxc5_2[data-size='sm'] {
  padding: var(--wds-space-1) var(--wds-space-2);
  font-size: var(--wds-font-size-caption);
}

/* ── 액션 칩(assist/suggestion/filter) — <button> 공유 ── */
._action_1xxc5_43 {
  position: relative;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}

/* sm 액션 칩 — caption 폰트/축소 패딩으로 시각 높이 ~28px(44px 미만). ::after 블록축
   히트 영역 확장(IconButton §5 미러, 토큰 전용)으로 ≥44px 터치 타깃 확보. 인라인 축은
   인접 칩과 겹치지 않게 확장하지 않는다. */
._action_1xxc5_43[data-size='sm']::after {
  content: '';
  position: absolute;
  inset-block: calc(-1 * var(--wds-space-3));
  inset-inline: 0;
}
._action_1xxc5_43:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — neutral 면에만 pressed. filter 선택(primary-subtle)은 유지 */
._action_1xxc5_43:active:not(:disabled):not([data-selected='true']) {
  background: var(--wds-color-surface-pressed);
}
._action_1xxc5_43:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._action_1xxc5_43:disabled {
  color: var(--wds-color-text-placeholder);
  background: var(--wds-color-surface-muted);
  border-color: var(--wds-color-border);
  cursor: not-allowed;
}

/* suggestion — 더 가벼운 표면(투명 배경 + 보더) */
._suggestion_1xxc5_79 {
  background: transparent;
}

/* ── filter — 토글 칩. 선택 시 primary-subtle 채움 + primary 잉크 + 체크 ── */
._filter_1xxc5_84[data-selected='true'] {
  background: var(--wds-color-primary-subtle);
  border-color: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}
._filter_1xxc5_84[data-selected='true']:hover:not(:disabled) {
  background: var(--wds-color-primary-subtle);
}

/* ── input — 비-버튼 <span> + 제거 버튼 ── */
._input_1xxc5_94[data-disabled] {
  color: var(--wds-color-text-placeholder);
  background: var(--wds-color-surface-muted);
}

/* 제거 버튼 — 시각 작음 + 충분한 히트 영역 (Tag 패턴) */
._remove_1xxc5_100 {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  margin-inline-end: calc(-1 * var(--wds-space-1));
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-full);
  background: transparent;
  color: currentcolor;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 icon-size-md(20px) → 44px 히트 영역: (44 - 20) / 2 = space-3(12px) (IconButton §5 미러) */
._remove_1xxc5_100::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--wds-space-3));
}
._remove_1xxc5_100:hover:not(:disabled) {
  opacity: 1;
}
/* 눌림 — IconButton ghost와 같은 어휘의 pressed 배경 */
._remove_1xxc5_100:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._remove_1xxc5_100:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._remove_1xxc5_100:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
._remove_1xxc5_100 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  ._action_1xxc5_43,
  ._remove_1xxc5_100 {
    transition: none;
  }
}
/* WDS ChipGroup — 토큰 전용(DD-4). 단일 선택 칩 그룹, 가로 스크롤. 알약 비주얼은 Chip 미러. */

/* radiogroup = 칩 레일과 좌우 보조 버튼을 담는 루트. 외부 레이아웃 className/ref는 여기에 유지한다. */
._group_1j9ri_4 {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

/* rail = 가로 스크롤 컨테이너. 좁은 폭에서 칩이 줄바꿈 대신 가로 스크롤된다.
   선택 컨트롤이므로 마우스 release 뒤 관성 스냅은 쓰지 않고, 손을 놓은 위치에 즉시 멈춘다.
   overflow-x:auto면 사양상 overflow-y도 auto로 계산 → sm 칩의 ::after 히트영역(블록축 ±space-3)이
   넘쳐 가짜 세로 스크롤바가 생긴다. 세로 패딩으로 히트영역+포커스링을 품어(=오버플로 0) 막는다. */
._rail_1j9ri_14 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-block: var(--wds-space-3);
  -webkit-overflow-scrolling: touch;
  /* CSS scroll-snap은 쓰지 않는다 — 선택 칩은 사용자가 놓은 위치를 보존해야 한다. */
  /* 스크롤바는 숨긴다 — 스크롤 신호는 "끝단 칩 잘림(bleed)" 어포던스로 전달한다(WDS 필터 칩).
     키보드(화살표 roving)·마우스 드래그·터치 스와이프로 조작하므로 시각 스크롤바는 불필요. */
  scrollbar-width: none; /* Firefox */
}
._group_1j9ri_4[data-can-scroll-start='true'][data-can-scroll-end='false'] ._rail_1j9ri_14 {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--wds-control-height-sm) + var(--wds-space-1)),
    #000 calc(var(--wds-control-height-sm) + var(--wds-space-4)),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--wds-control-height-sm) + var(--wds-space-1)),
    #000 calc(var(--wds-control-height-sm) + var(--wds-space-4)),
    #000 100%
  );
}
._group_1j9ri_4[data-can-scroll-start='false'][data-can-scroll-end='true'] ._rail_1j9ri_14 {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--wds-control-height-sm) - var(--wds-space-4)),
    transparent calc(100% - var(--wds-control-height-sm) - var(--wds-space-1)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--wds-control-height-sm) - var(--wds-space-4)),
    transparent calc(100% - var(--wds-control-height-sm) - var(--wds-space-1)),
    transparent 100%
  );
}
._group_1j9ri_4[data-can-scroll-start='true'][data-can-scroll-end='true'] ._rail_1j9ri_14 {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--wds-control-height-sm) + var(--wds-space-1)),
    #000 calc(var(--wds-control-height-sm) + var(--wds-space-4)),
    #000 calc(100% - var(--wds-control-height-sm) - var(--wds-space-4)),
    transparent calc(100% - var(--wds-control-height-sm) - var(--wds-space-1)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--wds-control-height-sm) + var(--wds-space-1)),
    #000 calc(var(--wds-control-height-sm) + var(--wds-space-4)),
    #000 calc(100% - var(--wds-control-height-sm) - var(--wds-space-4)),
    transparent calc(100% - var(--wds-control-height-sm) - var(--wds-space-1)),
    transparent 100%
  );
}
/* Chromium·Safari 스크롤바 숨김 */
._rail_1j9ri_14::-webkit-scrollbar {
  display: none;
}
/* 드래그 중 — useDragScroll이 data-grabbing을 토글한다(칩 위에선 chip:pointer가 우선). */
._rail_1j9ri_14[data-grabbing] {
  cursor: grabbing;
}

/* 보조 이동 버튼 — 드래그/스와이프를 유지하면서 긴 칩 목록의 발견성을 보강한다. */
._scrollButton_1j9ri_90 {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-control-height-sm);
  height: var(--wds-control-height-sm);
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-full);
  background: transparent;
  color: var(--wds-color-text-muted);
  box-shadow: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._scrollButton_1j9ri_90[data-side='start'] {
  inset-inline-start: 0;
}
._scrollButton_1j9ri_90[data-side='end'] {
  inset-inline-end: 0;
}
._scrollButton_1j9ri_90 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}
._scrollButton_1j9ri_90:hover {
  color: var(--wds-color-text);
}
._scrollButton_1j9ri_90:active {
  color: var(--wds-color-primary-text);
}
._scrollButton_1j9ri_90:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._scrollButton_1j9ri_90::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}

/* ── 알약 — Chip .chip + .action 어휘 미러 ── */
._chip_1j9ri_137 {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  padding: var(--wds-space-1) var(--wds-space-3);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface);
  color: var(--wds-color-text);
  font-family: inherit;
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}

._label_1j9ri_159 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._leading_1j9ri_165 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: calc(-1 * var(--wds-space-1));
}
._leading_1j9ri_165 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

/* ── 선택 — primary-subtle 채움 + primary 잉크 + 선행 체크 (Chip filter 선택과 동일) ── */
._chip_1j9ri_137[data-selected='true'] {
  background: var(--wds-color-primary-subtle);
  border-color: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}
._chip_1j9ri_137[data-selected='true']:hover:not(:disabled) {
  background: var(--wds-color-primary-subtle);
}

._chip_1j9ri_137:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — neutral 면에만 pressed. 선택(primary-subtle)은 유지 */
._chip_1j9ri_137:active:not(:disabled):not([data-selected='true']) {
  background: var(--wds-color-surface-pressed);
}
._chip_1j9ri_137:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._chip_1j9ri_137:disabled {
  color: var(--wds-color-text-placeholder);
  background: var(--wds-color-surface-muted);
  border-color: var(--wds-color-border);
  cursor: not-allowed;
}

/* ── sm — caption 폰트/축소 패딩(시각 ~28px) + ::after 블록축 히트 영역으로 ≥44px 터치 타깃.
   인라인 축은 인접 칩과 겹치지 않게 확장하지 않는다(Chip §sm 미러). 컨테이너 padding-block이
   이 ::after 확장을 품어 세로 오버플로를 0으로 유지. ── */
._group_1j9ri_4[data-size='sm'] ._chip_1j9ri_137 {
  padding: var(--wds-space-1) var(--wds-space-2);
  font-size: var(--wds-font-size-caption);
}
._group_1j9ri_4[data-size='sm'] ._chip_1j9ri_137::after {
  content: '';
  position: absolute;
  inset-block: calc(-1 * var(--wds-space-3));
  inset-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._rail_1j9ri_14 {
    scroll-behavior: auto;
  }
  ._chip_1j9ri_137,
  ._scrollButton_1j9ri_90 {
    transition: none;
  }
}
/* WDS ColorPicker — 토큰 전용(DD-4). 동적 색(스와치·그라디언트)은 인라인 style이 소유. */
._root_eyfc5_2 {
  position: relative;
  display: inline-block;
}

/* ── 트리거 스와치 — 시각 32px + 히트 44px ── */
._trigger_eyfc5_8 {
  position: relative;
  display: inline-flex;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  padding: var(--wds-space-1);
  border: 1px solid transparent;
  border-color: var(--wds-color-border-strong);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface);
  cursor: pointer;
  transition: border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._trigger_eyfc5_8::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._trigger_eyfc5_8:hover {
  border-color: var(--wds-color-primary);
}
._trigger_eyfc5_8[aria-expanded='true'] {
  border-color: var(--wds-color-primary);
}
._trigger_eyfc5_8:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._swatch_eyfc5_36 {
  display: flex;
  flex: 1;
  overflow: hidden;
  border-radius: var(--wds-radius-sm);
}
._swatchColor_eyfc5_42 {
  flex: 1;
}

/* 투명 표시 체커보드 — 동적 색 오버레이(.swatchColor/알파 트랙)가 위에 얹힌다 */
._checkerboard_eyfc5_47 {
  background: repeating-conic-gradient(var(--wds-color-border) 0% 25%, transparent 0% 50%)
    0 0 / var(--wds-space-2) var(--wds-space-2);
}

/* ── field 트리거 — 스와치 + HEX 텍스트 (Input 어휘 높이) ── */
._fieldTrigger_eyfc5_53 {
  width: auto;
  height: var(--wds-input-height);
  align-items: center;
  gap: var(--wds-space-2);
  padding-inline: var(--wds-space-2) var(--wds-space-3);
  border-color: var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  background: var(--wds-input-bg);
}
._fieldTrigger_eyfc5_53 ._swatch_eyfc5_36 {
  flex: none;
  width: var(--wds-space-6);
  height: var(--wds-space-6);
}
._fieldValue_eyfc5_68 {
  color: var(--wds-input-fg);
  font-family: var(--wds-font-mono);
  font-size: var(--wds-font-size-body-2);
}

/* ── 팝업 패널 ── */
._panel_eyfc5_75 {
  position: absolute;
  top: calc(100% + var(--wds-space-2));
  left: 0;
  z-index: var(--wds-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
  width: 16rem;
  padding: var(--wds-space-4);
  background: var(--wds-color-surface-raised);
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  animation: _panel-in_eyfc5_1 var(--wds-duration-fast) var(--wds-ease-out);
}

/* floating — body로 포털 시 fixed 배치. top/left는 인라인(트리거 rect 기준). */
._panelFloating_eyfc5_94 {
  position: fixed;
  top: auto;
  left: auto;
}

/* ── 모드 탭 (스펙트럼/그리드/슬라이더) — APG tablist 축소판 ── */
._modeTabs_eyfc5_101 {
  display: flex;
  gap: var(--wds-space-1);
  padding: var(--wds-space-1);
  background: var(--wds-color-surface-muted);
  border-radius: var(--wds-radius-md);
}
._modeTab_eyfc5_101 {
  flex: 1;
  padding-block: var(--wds-space-1);
  border: 0;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-caption);
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--wds-duration-fast) var(--wds-ease-standard),
    background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._modeTab_eyfc5_101:hover {
  color: var(--wds-color-text);
}
._modeTab_eyfc5_101[aria-selected='true'] {
  background: var(--wds-color-surface-raised);
  color: var(--wds-color-text);
  box-shadow: var(--wds-shadow-sm);
}
._modeTab_eyfc5_101:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: -2px;
}

/* 모드 본문 — 패널 gap과 동일 리듬 */
._modeBody_eyfc5_136 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

/* ── grid 모드 — 12열(GRID_HUE_COUNT와 동기) × 10행 생성 팔레트 ── */
._grid_eyfc5_143 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--wds-space-1);
}
._gridCell_eyfc5_148 {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-sm);
  cursor: pointer;
}
._gridCell_eyfc5_148:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 1px;
}
/* 선택 링 — 셀 명도 기반 대비(밝은 색 → 어두운 링 / 어두운 색 → 밝은 링) */
._gridCellRingDark_eyfc5_160 {
  box-shadow: inset 0 0 0 2px var(--wds-black);
}
._gridCellRingLight_eyfc5_163 {
  box-shadow: inset 0 0 0 2px var(--wds-white);
}

/* ── sliders 모드 — R/G/B 채널 행 ── */
._sliders_eyfc5_168 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
}
._channelRow_eyfc5_173 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
}
/* .rangeWrap과 cx 합성 — 행 안에서 트랙이 남은 폭 차지 */
._channelRangeWrap_eyfc5_179 {
  flex: 1;
  min-width: 0;
}

/* ── 표시 포맷 토글 (HEX/RGB/HSL 순환) ── */
._formatToggle_eyfc5_185 {
  flex: none;
  height: var(--wds-control-height-sm);
  padding-inline: var(--wds-space-2);
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-control-sm);
  background: transparent;
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-mono);
  font-size: var(--wds-font-size-caption);
  cursor: pointer;
  transition:
    color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._formatToggle_eyfc5_185:hover {
  color: var(--wds-color-primary);
  border-color: var(--wds-color-primary);
}
._formatToggle_eyfc5_185:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* ── 최근 색 그룹 (캡션 + 스와치 그리드) ── */
._swatchSection_eyfc5_211 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-1);
}
._groupLabel_eyfc5_216 {
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-caption);
}

/* ── SV 스펙트럼 ── */
._spectrum_eyfc5_222 {
  position: relative;
  height: 10rem;
  border-radius: var(--wds-radius-sm);
  cursor: crosshair;
  touch-action: none;
}
._thumb_eyfc5_229 {
  position: absolute;
  display: flex;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  padding: var(--wds-space-1);
  transform: translate(-50%, -50%);
  border-radius: var(--wds-radius-full);
  background: var(--wds-white);
  box-shadow: var(--wds-shadow-sm);
  cursor: grab;
}
._thumb_eyfc5_229:active {
  cursor: grabbing;
}
._thumb_eyfc5_229:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._thumbColor_eyfc5_248 {
  flex: 1;
  border-radius: var(--wds-radius-full);
}

/* ── Hue/Alpha 슬라이더 — 트랙(인라인 그라디언트 div) + 네이티브 range 썸 ── */
._rangeWrap_eyfc5_178 {
  position: relative;
  display: flex;
  align-items: center;
}
._rangeTrack_eyfc5_259 {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--wds-space-3);
  transform: translateY(-50%);
  border-radius: var(--wds-radius-full);
  pointer-events: none;
}
._range_eyfc5_178 {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--wds-control-height-md); /* 44px 히트 — 썸보다 큰 터치 타깃 */
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
._range_eyfc5_178:focus-visible {
  outline: none; /* 링은 썸에 그린다 */
}
._range_eyfc5_178::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  border: 0;
  border-radius: 50%;
  background: var(--wds-white);
  box-shadow: var(--wds-shadow-md);
}
._range_eyfc5_178:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._range_eyfc5_178::-moz-range-thumb {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  border: 0;
  border-radius: 50%;
  background: var(--wds-white);
  box-shadow: var(--wds-shadow-md);
}
._range_eyfc5_178:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

/* ── HEX 입력 + 스포이드 ── */
._hexRow_eyfc5_308 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
}
._hexInput_eyfc5_313 {
  flex: 1;
  min-width: 0;
  height: var(--wds-control-height-sm);
  padding-inline: var(--wds-space-2);
  border: 1px solid transparent;
  border-color: var(--wds-input-border);
  border-radius: var(--wds-radius-control-sm);
  background: var(--wds-input-bg);
  color: var(--wds-input-fg);
  font-family: var(--wds-font-mono);
  font-size: var(--wds-font-size-body-2);
}
._hexInput_eyfc5_313:focus-visible {
  outline: none;
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._hexInput_eyfc5_313[aria-invalid='true'] {
  border-color: var(--wds-input-border-invalid);
}

/* .hexInput과 cx 합성 — sliders 모드 채널 숫자 입력(고정 폭) */
._channelInput_eyfc5_336 {
  flex: none;
  width: 3.5rem;
}

._eyedropper_eyfc5_341 {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  transition:
    color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._eyedropper_eyfc5_341::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._eyedropper_eyfc5_341:hover {
  color: var(--wds-color-primary);
  border-color: var(--wds-color-primary);
}
._eyedropper_eyfc5_341:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._eyedropper_eyfc5_341 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

/* ── 프리셋 스와치 그리드 ── */
._presets_eyfc5_378 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wds-space-2);
}
._preset_eyfc5_378 {
  position: relative;
  width: var(--wds-space-6);
  height: var(--wds-space-6);
  padding: 0;
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-sm);
  cursor: pointer;
}
._preset_eyfc5_378::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._preset_eyfc5_378[aria-pressed='true'] {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 1px;
}
._preset_eyfc5_378:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

@keyframes _panel-in_eyfc5_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._panel_eyfc5_75 {
    animation: none;
  }
  ._trigger_eyfc5_8,
  ._eyedropper_eyfc5_341,
  ._modeTab_eyfc5_101,
  ._formatToggle_eyfc5_185 {
    transition: none;
  }
}
/* WDS CopyButton — 토큰 전용(DD-4). ghost 아이콘 버튼 + 상태 색 전환. */
._button_15gm6_2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--wds-radius-control-sm);
  background: transparent;
  color: var(--wds-color-text-subtle);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (터치 타깃) */
._button_15gm6_2::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._button_15gm6_2:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._button_15gm6_2:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._button_15gm6_2:disabled {
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}
._button_15gm6_2:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 복사됨 — 성공 잉크 (색+아이콘 병행이라 색맹 안전) */
._copied_15gm6_42 {
  color: var(--wds-color-success-text);
}
/* 실패 — 오류 잉크 + 경고 아이콘으로 가시화 */
._error_15gm6_46 {
  color: var(--wds-color-error-text);
}

/* 상태 아이콘 등장 모션 — compositor 속성만(opacity/transform) */
._stateIcon_15gm6_51 {
  animation: _state-pop_15gm6_1 var(--wds-duration-fast) var(--wds-ease-standard);
}
@keyframes _state-pop_15gm6_1 {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  ._button_15gm6_2 {
    transition: none;
  }
  ._stateIcon_15gm6_51 {
    animation: none;
  }
}

/* 시각적 숨김 — aria-live 상태 텍스트용 */
._srOnly_15gm6_74 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* WDS Command — 토큰 전용(DD-4). 시드 스킨을 자체 구현 마크업에 맞게 포팅. */
._command_kj94q_2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--wds-color-surface);
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
  color: var(--wds-color-text);
  box-shadow: var(--wds-shadow-sm);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 포커스 링 — Input의 focus-within 컨벤션과 동일 */
._command_kj94q_2:focus-within {
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

._inputWrap_kj94q_23 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  padding: 0 var(--wds-space-4);
  border-bottom: 1px solid var(--wds-color-border);
}

._searchIcon_kj94q_31 {
  flex: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-muted);
}

._input_kj94q_23 {
  height: 3rem;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  color: var(--wds-color-text);
  outline: none;
}
._input_kj94q_23::placeholder {
  color: var(--wds-color-text-placeholder);
}

._list_kj94q_52 {
  list-style: none;
  margin: 0;
  max-height: 20rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wds-color-border-strong) transparent;
  /* 리스트형 팝업 공통 패딩 (Select·MultiSelect·TimePicker·DropdownMenu와 동일) */
  padding: var(--wds-space-1);
}

/* 옵션 행 — 리스트형 팝업 공통 어휘(40px 행·inline 12px·gap 8px·radius sm) */
._item_kj94q_65 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-height: var(--wds-space-10);
  padding-block: var(--wds-space-1);
  padding-inline: var(--wds-space-3);
  border-radius: var(--wds-radius-sm);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
  text-align: start;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._item_kj94q_65:hover {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — 비버튼(li)이라 :disabled 대신 .disabled 클래스 가드 */
._item_kj94q_65:not(._disabled_kj94q_83):active {
  background: var(--wds-color-surface-pressed);
}
/* 키보드 활성 항목 — aria-activedescendant 대상. hover와 같은 surface 어휘 */
._active_kj94q_88,
._active_kj94q_88:hover {
  background: var(--wds-color-surface-hover);
}
._disabled_kj94q_83,
._disabled_kj94q_83:hover {
  background: transparent;
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}

._empty_kj94q_99 {
  margin: 0;
  padding: var(--wds-space-8) 0;
  text-align: center;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
}
/* WDS Container — 토큰 전용. 중앙 정렬 + size별 max-width + 인라인 패딩(거터). */
._container_1n9dr_2 {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wds-container-pad, 0);
}

._content_1n9dr_8 {
  max-width: var(--wds-container-max);
}

._prose_1n9dr_12 {
  max-width: var(--wds-container-prose);
}

._full_1n9dr_16 {
  max-width: none;
}
/* WDS DataGrid — 토큰 전용(DD-4). Table 기반 + 정렬/선택/편집/페이징 표면. */
._root_86jde_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

._scroll_86jde_8 {
  overflow-x: auto;
}
._scroll_86jde_8:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* stickyHeader — 세로 스크롤 컨테이너화(기본 24rem ≈ 10행). 높이는 소비자가 재정의 */
._stickyScroll_86jde_17 {
  overflow-y: auto;
  max-height: 24rem;
}
._stickyScroll_86jde_17 ._th_86jde_21 {
  position: sticky;
  top: 0;
  z-index: 1;
}

._table_86jde_27 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
}

._caption_86jde_34 {
  caption-side: top;
  text-align: start;
  margin-bottom: var(--wds-space-2);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

._th_86jde_21 {
  padding: var(--wds-space-3) var(--wds-space-4);
  text-align: start;
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text-muted);
  background: var(--wds-color-surface-muted);
  border-bottom: 1px solid var(--wds-color-border-strong);
  white-space: nowrap;
}

/* 정렬 헤더 버튼 — 셀 텍스트와 동일한 시각, 44px 히트 영역 확장 */
._sortButton_86jde_53 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
._sortButton_86jde_53::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._sortButton_86jde_53:hover {
  color: var(--wds-color-text);
}
._sortButton_86jde_53:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._sortIcon_86jde_78 {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  opacity: 0.35;
  transition:
    transform var(--wds-duration-fast) var(--wds-ease-standard),
    opacity var(--wds-duration-fast) var(--wds-ease-standard);
}
._sortActive_86jde_86 {
  opacity: 1;
  color: var(--wds-color-primary);
}
/* asc = 위 화살표(180° 회전), desc = 기본 아래 방향 */
._sortAsc_86jde_91 {
  transform: rotate(180deg);
}

._td_86jde_95 {
  padding: var(--wds-space-3) var(--wds-space-4);
  border-bottom: 1px solid var(--wds-color-border);
}

/* 편집 가능 셀 — 포커스 경로 표시 */
._editable_86jde_101 {
  cursor: text;
}
._editable_86jde_101:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: -2px;
}

/* 인라인 에디터 — 셀 패딩 안에서 입력 높이 유지 */
._editor_86jde_110 {
  width: 100%;
  min-width: var(--wds-space-16);
  padding: var(--wds-space-1) var(--wds-space-2);
  border: 1px solid var(--wds-input-border-focus);
  border-radius: var(--wds-radius-sm);
  background: var(--wds-input-bg);
  color: var(--wds-input-fg);
  font: inherit;
}
._editor_86jde_110:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 1px;
}

._row_86jde_125 {
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._row_86jde_125:hover {
  background: var(--wds-color-surface-hover);
}

/* 선택 행 — hover보다 우선 */
._selected_86jde_133,
._selected_86jde_133:hover {
  background: var(--wds-color-surface-selected);
}

/* 체크박스 칼럼 — 셀 안에서 수평·수직 중앙 */
._checkboxCell_86jde_139 {
  width: var(--wds-space-10);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
._checkboxCell_86jde_139 > * {
  vertical-align: middle;
}

._center_86jde_149 {
  text-align: center;
}
._right_86jde_152 {
  text-align: end;
}

._empty_86jde_156 {
  padding: var(--wds-space-8);
  text-align: center;
  color: var(--wds-color-text-muted);
}

._footer_86jde_162 {
  display: flex;
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  ._row_86jde_125,
  ._sortIcon_86jde_78 {
    transition: none;
  }
}
/* WDS Pagination — 토큰 전용(DD-4). 버튼 시각 32px + 44px 히트 영역. */
._pagination_7a6uk_2 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-1);
}

._list_7a6uk_8 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 공통 셀 — control(이전/다음) · page 둘 다 32px 시각 정사각형 */
._control_7a6uk_18,
._page_7a6uk_19 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wds-space-8);
  height: var(--wds-space-8);
  padding-inline: var(--wds-space-2);
  border: 1px solid transparent;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}

/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._control_7a6uk_18::after,
._page_7a6uk_19::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}

._control_7a6uk_18:hover:not(:disabled),
._page_7a6uk_19:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}

/* 눌림 — neutral 면에만 pressed. 현재 페이지(.active, primary-subtle)는 유지 */
._control_7a6uk_18:active:not(:disabled),
._page_7a6uk_19:active:not(:disabled):not(._active_7a6uk_53) {
  background: var(--wds-color-surface-pressed);
}

._control_7a6uk_18:focus-visible,
._page_7a6uk_19:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._control_7a6uk_18:disabled {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

/* 현재 페이지 강조 */
._active_7a6uk_53 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-semibold);
}
._active_7a6uk_53:hover {
  background: var(--wds-color-primary-subtle);
}

/* 줄임(…) 셀 — 페이지 버튼과 동일한 셀 메트릭(폭/높이/보더/타이포)으로 수직·수평 중앙 */
._gap_7a6uk_81 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wds-space-8);
  height: var(--wds-space-8);
  padding-inline: var(--wds-space-2);
  border: 1px solid transparent;
  color: var(--wds-color-text-placeholder);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  line-height: 1;
  user-select: none;
}

._icon_7a6uk_96 {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

/* dots — 점 페이지 컨트롤(소량 페이지·모바일). 작은 점 + 44px 히트 영역 (ADR-012 B-P1) */
._dots_7a6uk_102 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

._dot_7a6uk_102 {
  position: relative;
  display: block;
  width: var(--wds-space-2);
  height: var(--wds-space-2);
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border);
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}

._dot_7a6uk_102::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--wds-space-3));
}

._dot_7a6uk_102:hover {
  background: var(--wds-color-text-muted);
}

._dot_7a6uk_102:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 3px;
}

._dotActive_7a6uk_139 {
  background: var(--wds-color-primary);
}

@media (prefers-reduced-motion: reduce) {
  ._dot_7a6uk_102 {
    transition: none;
  }
}
/* WDS DatePicker — 토큰 전용(DD-4). 트리거는 Input 어휘, 팝업은 dropdown 어휘(Select과 동일). */
._root_yk54r_2 {
  position: relative;
  display: inline-block;
}

._trigger_yk54r_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-2);
  width: 100%;
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._trigger_yk54r_7:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._trigger_yk54r_7:disabled {
  background: var(--wds-input-bg-disabled);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}
._open_yk54r_37 {
  border-color: var(--wds-input-border-focus);
}

._value_yk54r_41 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._placeholder_yk54r_48 {
  color: var(--wds-input-placeholder);
}

._icon_yk54r_52 {
  flex: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-subtle);
}

/* modalInput 직접 입력 필드 — Input 어휘 재사용, 달력 위에 배치 (ADR-012 B-P2) */
._dateInput_yk54r_60 {
  display: block;
  width: 100%;
  height: var(--wds-input-height);
  margin-bottom: var(--wds-space-3);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  transition: border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._dateInput_yk54r_60::placeholder {
  color: var(--wds-input-placeholder);
}
._dateInput_yk54r_60:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  border-color: var(--wds-input-border-focus);
}

._popup_yk54r_84 {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  background: var(--wds-color-surface-raised);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  max-height: var(--wds-datepicker-available-block-size, calc(100vh - var(--wds-space-4)));
  overflow: auto;
  transform: translateX(var(--wds-datepicker-shift-x, 0px));
  animation: _popup-in_yk54r_1 var(--wds-duration-fast) var(--wds-ease-emphasized-decelerate);
}
._flipped_yk54r_97 {
  top: auto;
  bottom: calc(100% + var(--wds-space-1));
}

/* compositor 전용 모션 — opacity/transform만 */
@keyframes _popup-in_yk54r_1 {
  from {
    opacity: 0;
    transform: translateX(var(--wds-datepicker-shift-x, 0px)) translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._trigger_yk54r_7 {
    transition: none;
  }
  ._popup_yk54r_84 {
    animation: none;
  }
}
/* WDS Modal — 토큰 전용(DD-4). 등장 모션은 compositor 속성(opacity/transform)만. */
._overlay_f6oyw_2 {
  position: fixed;
  inset: 0;
  z-index: var(--wds-z-modal);
  display: grid;
  place-items: center;
  padding: var(--wds-space-4);
  background: var(--wds-modal-scrim);
  animation: _overlay-in_f6oyw_1 var(--wds-duration-fast) var(--wds-ease-out);
}

._panel_f6oyw_13 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - var(--wds-space-16));
  background: var(--wds-modal-surface);
  border-radius: var(--wds-radius-xl);
  box-shadow: var(--wds-shadow-xl);
  outline: none;
  animation: _panel-in_f6oyw_1 var(--wds-duration-normal) var(--wds-ease-emphasized-decelerate);
}

/* 모달 폭 3단 — 컴포넌트 고유 레이아웃 값(토큰 신설 기준 §4 미충족, P5 패리티 시 재평가) */
._sm_f6oyw_26 {
  max-width: 25rem;
}
._md_f6oyw_29 {
  max-width: 35rem;
}
._lg_f6oyw_32 {
  max-width: 45rem;
}

._header_f6oyw_36 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-4);
  padding: var(--wds-space-4) var(--wds-space-6);
  border-bottom: 1px solid var(--wds-color-border);
}

._title_f6oyw_45 {
  margin: 0;
  font-size: var(--wds-font-size-h3);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}

._close_f6oyw_53 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._close_f6oyw_53::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._close_f6oyw_53:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._close_f6oyw_53:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._close_f6oyw_53:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._close_f6oyw_53 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._body_f6oyw_92 {
  padding: var(--wds-space-6);
  overflow-y: auto;
  color: var(--wds-color-text);
}

._footer_f6oyw_98 {
  display: flex;
  justify-content: flex-end;
  gap: var(--wds-space-2);
  padding: var(--wds-space-4) var(--wds-space-6);
  border-top: 1px solid var(--wds-color-border);
}

@keyframes _overlay-in_f6oyw_1 {
  from {
    opacity: 0;
  }
}
@keyframes _panel-in_f6oyw_1 {
  from {
    opacity: 0;
    transform: translateY(var(--wds-space-2)) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._overlay_f6oyw_2,
  ._panel_f6oyw_13 {
    animation: none;
  }
}
/* WDS DateRangePicker — 토큰 전용(DD-4). 트리거는 Input 어휘, 팝업은 dropdown 어휘. */
._root_185yp_2 {
  position: relative;
  display: inline-block;
}

._trigger_185yp_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-2);
  width: 100%;
  min-width: 16rem;
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._trigger_185yp_7:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._trigger_185yp_7:disabled {
  background: var(--wds-input-bg-disabled);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}
._open_185yp_38 {
  border-color: var(--wds-input-border-focus);
}

._value_185yp_42 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._placeholder_185yp_49 {
  color: var(--wds-input-placeholder);
}

._icon_185yp_53 {
  flex: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-subtle);
}

._popup_185yp_60 {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
  width: max-content;
  /* 듀얼 먼스가 뷰포트를 넘지 않게 — 좁으면 내부 달력이 세로 스택 */
  max-width: calc(100vw - var(--wds-space-8));
  padding: var(--wds-space-4);
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
  box-shadow: var(--wds-shadow-lg);
  animation: _popup-in_185yp_1 var(--wds-duration-fast) var(--wds-ease-emphasized-decelerate);
}

/* ── 모드 토글 2탭 (aria-pressed) ── */
._tabs_185yp_80 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wds-space-1);
  padding: var(--wds-space-1);
  background: var(--wds-color-surface-muted);
  border-radius: var(--wds-radius-md);
}
._tab_185yp_80 {
  height: var(--wds-control-height-sm);
  border: 0;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._tab_185yp_80:hover {
  color: var(--wds-color-text);
}
._tab_185yp_80:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._tab_185yp_80[aria-pressed='true'] {
  background: var(--wds-color-surface-raised);
  color: var(--wds-color-primary-text);
  box-shadow: var(--wds-shadow-sm);
}

/* ── 임의 선택(프리셋) 패널 ── */
._presetPanel_185yp_116 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
  min-width: 18rem;
}

._presetSection_185yp_123 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
}

._presetSectionLabel_185yp_129 {
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
}

._presetGrid_185yp_135 {
  display: flex;
  flex-wrap: wrap;
  /* 32px 버튼 + 12px 간격 — ::after 44px 히트 확장이 서로 겹치지 않는 최소 간격 */
  gap: var(--wds-space-3);
}
._presetGridMonths_185yp_141 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

._presetButton_185yp_146 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wds-space-8);
  height: var(--wds-space-8);
  padding-inline: var(--wds-space-2);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface);
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃) */
._presetButton_185yp_146::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._presetButton_185yp_146:hover {
  background: var(--wds-color-surface-hover);
  border-color: var(--wds-color-border-strong);
}
/* 눌림 — neutral 면에만. 선택(aria-pressed, primary 채움) 배경은 덮지 않는다 */
._presetButton_185yp_146:active:not(:disabled):not([aria-pressed='true']) {
  background: var(--wds-color-surface-pressed);
}
._presetButton_185yp_146:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
/* 활성 프리셋 — primary-strong 채움 (DD-6: 프리셋 라벨은 본문 크기 텍스트라 AA 4.5:1 보장 필요) */
._presetButton_185yp_146[aria-pressed='true'] {
  background: var(--wds-color-primary-strong);
  border-color: transparent;
  color: var(--wds-color-on-primary);
}
._presetButton_185yp_146[aria-pressed='true']:hover {
  background: var(--wds-color-primary-strong-hover);
}

/* ── 달력 선택 — 요약 + 듀얼 먼스 (좁은 화면은 세로 스택) ── */
._calendarPanel_185yp_195 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

._rangeSummary_185yp_201 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wds-space-3);
  padding: 0 var(--wds-space-1) var(--wds-space-3);
  border-bottom: 1px solid var(--wds-color-border);
}

._calendars_185yp_209 + ._rangeSummary_185yp_201,
._presetPanel_185yp_116 + ._rangeSummary_185yp_201 {
  padding: var(--wds-space-3) var(--wds-space-1) 0;
  border-top: 1px solid var(--wds-color-border);
  border-bottom: 0;
}

._rangeSummaryItem_185yp_216 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-1);
  min-width: 0;
}

._rangeSummaryLabel_185yp_223 {
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
  word-break: keep-all;
}

._rangeSummaryInput_185yp_230 {
  width: 100%;
  min-width: 0;
  height: var(--wds-control-height-sm);
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--wds-font-weight-semibold);
  outline: none;
}
._rangeSummaryInput_185yp_230::placeholder {
  color: var(--wds-color-text-placeholder);
  font-weight: var(--wds-font-weight-regular);
}
._rangeSummaryInput_185yp_230:hover {
  background: var(--wds-color-surface-hover);
}
._rangeSummaryInput_185yp_230:focus {
  background: var(--wds-color-surface-raised);
  box-shadow: 0 0 0 2px var(--wds-color-focus-ring);
}
._rangeSummaryInputEmpty_185yp_256 {
  color: var(--wds-color-text-placeholder);
  font-weight: var(--wds-font-weight-regular);
}
._rangeSummaryInputInvalid_185yp_260 {
  box-shadow: 0 0 0 2px var(--wds-color-error);
}

._calendars_185yp_209 {
  display: flex;
  gap: var(--wds-space-4);
}
._calendarsStacked_185yp_268 {
  flex-direction: column;
}

/* 각 달력 컬럼은 독립 Calendar 그리드를 유지한다. */
._calendarColumn_185yp_273 {
  display: flex;
  flex-direction: column;
}
._mobileCalendar_185yp_277 {
  width: 100%;
  padding-inline: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* 모바일 분기 — bp.mobile(767px)과 동일 기준. CSS var는 media query에 못 쓴다. */
@media (max-width: 767px) {
  ._calendars_185yp_209 {
    flex-direction: column;
  }
}

/* ── 푸터 — 초기화 / 선택완료 ── */
._footer_185yp_292 {
  display: flex;
  gap: var(--wds-space-2);
  width: 100%;
}
._footer_185yp_292 > * {
  flex: 1;
}

._resetButton_185yp_301,
._cancelButton_185yp_302,
._confirmButton_185yp_303 {
  height: var(--wds-control-height-md);
  padding-inline: var(--wds-space-4);
  border: 1px solid transparent;
  border-radius: var(--wds-button-radius);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._resetButton_185yp_301,
._cancelButton_185yp_302 {
  background: var(--wds-color-surface);
  border-color: var(--wds-color-border-strong);
  color: var(--wds-color-primary-text);
}
._resetButton_185yp_301:hover,
._cancelButton_185yp_302:hover {
  background: var(--wds-color-surface-hover);
  border-color: var(--wds-color-primary);
}
._resetButton_185yp_301:active:not(:disabled),
._cancelButton_185yp_302:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._confirmButton_185yp_303 {
  background: var(--wds-button-bg);
  color: var(--wds-button-fg);
}
._confirmButton_185yp_303:hover {
  background: var(--wds-button-bg-hover);
}
._confirmButton_185yp_303:disabled {
  background: var(--wds-button-bg-disabled);
  color: var(--wds-button-fg-disabled);
  cursor: not-allowed;
}
._confirmButton_185yp_303:disabled:hover {
  background: var(--wds-button-bg-disabled);
}
._resetButton_185yp_301:focus-visible,
._cancelButton_185yp_302:focus-visible,
._confirmButton_185yp_303:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* BottomSheet 본문 — 탭/패널 세로 흐름 */
._sheetBody_185yp_354 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

/* compositor 전용 모션 — opacity/transform만 */
@keyframes _popup-in_185yp_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._trigger_185yp_7,
  ._tab_185yp_80,
  ._presetButton_185yp_146,
  ._resetButton_185yp_301,
  ._cancelButton_185yp_302,
  ._confirmButton_185yp_303 {
    transition: none;
  }
  ._popup_185yp_60 {
    animation: none;
  }
}
/* WDS DayPicker — 토큰 전용(DD-4). 선택은 primary 채움 + on-primary (Calendar.selected와 동일 어휘). */
._root_129ce_2 {
  gap: var(--wds-space-1);
}

/* week — 일~토 7버튼 한 줄 */
._week_129ce_7 {
  display: inline-flex;
  flex-wrap: wrap;
}

/* monthly — 1~31, 달력과 같은 7열 그리드 */
._monthly_129ce_13 {
  display: inline-grid;
  grid-template-columns: repeat(7, var(--wds-control-height-md));
}

/* 버튼 — 44px(control.height-md) 정사각 히트 영역 */
._day_129ce_19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-control-height-md);
  height: var(--wds-control-height-md);
  padding: 0;
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-full);
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._day_129ce_19:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — neutral 면에만. 선택(aria-pressed, AA 채움) 배경은 덮지 않는다 */
._day_129ce_19:active:not(:disabled):not([aria-pressed='true']) {
  background: var(--wds-color-surface-pressed);
}
._day_129ce_19:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 선택 — AA 채움(button.bg = primary-strong 트리오, DD-6: 14px 라벨은 600 채움 4.38:1 미달) */
._day_129ce_19[aria-pressed='true'] {
  background: var(--wds-button-bg);
  border-color: var(--wds-button-bg);
  color: var(--wds-button-fg);
  font-weight: var(--wds-font-weight-medium);
}
._day_129ce_19[aria-pressed='true']:hover:not(:disabled) {
  background: var(--wds-button-bg-hover);
  border-color: var(--wds-button-bg-hover);
}

._day_129ce_19:disabled {
  background: var(--wds-input-bg-disabled);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  ._day_129ce_19 {
    transition: none;
  }
}
/* WDS Drawer — 토큰 전용(DD-4). 슬라이드 모션은 compositor 속성(opacity/transform)만. */
._overlay_myykz_2 {
  position: fixed;
  inset: 0;
  z-index: var(--wds-z-modal);
  background: var(--wds-color-overlay);
  animation: _overlay-in_myykz_1 var(--wds-duration-fast) var(--wds-ease-out);
}

._panel_myykz_10 {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--wds-color-surface-raised);
  box-shadow: var(--wds-shadow-xl);
  outline: none;
}

/* 패널 폭/높이 상한 — 컴포넌트 고유 레이아웃 값(토큰 신설 기준 §4 미충족, Modal과 동일 판단) */
._right_myykz_20,
._left_myykz_21 {
  top: 0;
  bottom: 0;
  width: min(25rem, calc(100dvw - var(--wds-space-12)));
}
._right_myykz_20 {
  right: 0;
  animation: _slide-in-right_myykz_1 var(--wds-duration-normal) var(--wds-ease-emphasized-decelerate);
}
._left_myykz_21 {
  left: 0;
  animation: _slide-in-left_myykz_1 var(--wds-duration-normal) var(--wds-ease-emphasized-decelerate);
}
._bottom_myykz_34 {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100dvh - var(--wds-space-16));
  border-radius: var(--wds-radius-xl) var(--wds-radius-xl) 0 0;
  animation: _slide-in-bottom_myykz_1 var(--wds-duration-normal) var(--wds-ease-emphasized-decelerate);
}

._header_myykz_43 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-4);
  padding: var(--wds-space-4) var(--wds-space-6);
  border-bottom: 1px solid var(--wds-color-border);
}

._title_myykz_52 {
  margin: 0;
  font-size: var(--wds-font-size-h3);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}

._close_myykz_60 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._close_myykz_60::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._close_myykz_60:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._close_myykz_60:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._close_myykz_60:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._close_myykz_60 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._body_myykz_99 {
  flex: 1;
  padding: var(--wds-space-6);
  overflow-y: auto;
  color: var(--wds-color-text);
}

._footer_myykz_106 {
  display: flex;
  justify-content: flex-end;
  gap: var(--wds-space-2);
  padding: var(--wds-space-4) var(--wds-space-6);
  border-top: 1px solid var(--wds-color-border);
}

@keyframes _overlay-in_myykz_1 {
  from {
    opacity: 0;
  }
}
@keyframes _slide-in-right_myykz_1 {
  from {
    transform: translateX(100%);
  }
}
@keyframes _slide-in-left_myykz_1 {
  from {
    transform: translateX(-100%);
  }
}
@keyframes _slide-in-bottom_myykz_1 {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._overlay_myykz_2,
  ._panel_myykz_10 {
    animation: none;
  }
}
/* WDS FileUpload — 토큰 전용(DD-4). 드롭존 + 파일 목록 + 인라인 오류. */
._root_jwojd_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

._dropzone_jwojd_8 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wds-space-16);
  padding: var(--wds-space-6) var(--wds-space-4);
  border: 1px dashed var(--wds-color-border-strong);
  border-radius: var(--wds-radius-lg);
  background: var(--wds-color-surface-muted);
  cursor: pointer;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._dropzone_jwojd_8:hover {
  background: var(--wds-color-surface-hover);
}
._dropzone_jwojd_8:active {
  background: var(--wds-color-surface-pressed);
}
._dropzone_jwojd_8:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 드래그 오버 — primary 보더 하이라이트 */
._dragging_jwojd_34 {
  border-color: var(--wds-color-primary);
  border-style: solid;
  background: var(--wds-color-primary-subtle);
}

._dropzoneLabel_jwojd_40 {
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
  /* 드래그 중 자식 요소가 dragleave를 유발하지 않게 */
  pointer-events: none;
}

/* 시각 숨김 — 포커스/스크린리더 경로는 영역(role=button)이 담당 */
._hiddenInput_jwojd_48 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

._errors_jwojd_61 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-1);
}
._error_jwojd_61 {
  margin: 0;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-error-text);
}

._fileList_jwojd_72 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

._fileItem_jwojd_81 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-1);
  padding: var(--wds-space-2) var(--wds-space-3);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface);
}

/* 이름·크기·제거 버튼 행 — 상태 블록은 행 아래에 쌓인다 */
._fileRow_jwojd_92 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
}

._fileName_jwojd_98 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
}

._fileSize_jwojd_108 {
  flex: none;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

/* 제거 버튼 — 시각 24px + ≥44px 히트 영역 확장 */
._removeButton_jwojd_115 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--wds-space-6);
  height: var(--wds-space-6);
  padding: 0;
  border: none;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 space-6(24px) → ≥44px 히트 영역: space-3(12px) inset → 48px (Tag/Chip 미러) */
._removeButton_jwojd_115::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--wds-space-3));
}
._removeButton_jwojd_115:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._removeButton_jwojd_115:active {
  background: var(--wds-color-surface-pressed);
}
._removeButton_jwojd_115:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._removeIcon_jwojd_151 {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

/* ─── 제어 모드 상태(items) ─── */
._status_jwojd_157 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-width: 0;
}

._statusSuccess_jwojd_164 {
  color: var(--wds-color-success-text);
}

._statusError_jwojd_168 {
  color: var(--wds-color-error-text);
}

._statusIcon_jwojd_172 {
  flex: none;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

._statusText_jwojd_178 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--wds-font-size-caption);
}

._statusProgress_jwojd_185 {
  width: 100%;
}

@media (max-width: 599px) {
  ._fileItem_jwojd_81 {
    padding: var(--wds-space-3);
  }

  ._fileRow_jwojd_92 {
    align-items: flex-start;
    gap: var(--wds-space-2);
  }

  ._fileName_jwojd_98 {
    flex-basis: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  ._fileSize_jwojd_108 {
    margin-block-start: var(--wds-space-1);
  }

  ._status_jwojd_157 {
    flex-wrap: wrap;
  }

  ._statusText_jwojd_178 {
    flex: 1 1 100%;
  }
}

/* 재시도 — 텍스트 버튼 + 44px 히트 확장 */
._retryButton_jwojd_219 {
  position: relative;
  flex: none;
  padding: 0 var(--wds-space-1);
  border: none;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-primary);
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._retryButton_jwojd_219::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._retryButton_jwojd_219:hover {
  background: var(--wds-color-surface-hover);
}
._retryButton_jwojd_219:active {
  background: var(--wds-color-surface-pressed);
}
._retryButton_jwojd_219:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 시각 숨김 — 라이브 리전·보조 텍스트용 */
._visuallyHidden_jwojd_248 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ─── picture-card 그리드 ─── */
._cardGrid_jwojd_261 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--wds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

._card_jwojd_261 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface-muted);
  overflow: hidden;
}

._cardThumb_jwojd_282 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 비이미지 폴백 — 확장자 라벨 (아이콘 세트에 문서 아이콘 부재) */
._cardFallback_jwojd_291 {
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text-muted);
}

._cardName_jwojd_297 {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--wds-space-1) var(--wds-space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text);
  background: color-mix(in srgb, var(--wds-color-surface) 82%, transparent);
}

/* 상태 오버레이 — 라이트/다크 모두에서 읽히도록 surface 기반 반투명 스크림 */
._cardOverlay_jwojd_311 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wds-space-2);
  background: color-mix(in srgb, var(--wds-color-surface) 85%, transparent);
}
._cardOverlay_jwojd_311 ._status_jwojd_157 {
  flex-wrap: wrap;
  justify-content: center;
}

._cardBadge_jwojd_325 {
  position: absolute;
  top: var(--wds-space-1);
  inset-inline-start: var(--wds-space-1);
  display: inline-flex;
}

._cardRemove_jwojd_332 {
  position: absolute;
  top: var(--wds-space-1);
  inset-inline-end: var(--wds-space-1);
  background: color-mix(in srgb, var(--wds-color-surface) 85%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  ._dropzone_jwojd_8,
  ._removeButton_jwojd_115,
  ._retryButton_jwojd_219 {
    transition: none;
  }
}
/* WDS Progress — 토큰 전용(DD-4). 모션은 compositor 속성(transform)만. */
._progress_1597x_2 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
  width: 100%;
}

._track_1597x_9 {
  flex: 1;
  position: relative;
  height: var(--wds-space-2);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
  overflow: hidden;
}

._bar_1597x_18 {
  height: 100%;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-primary);
  transition: width var(--wds-duration-normal) var(--wds-ease-standard);
}

/* indeterminate — 트랙 폭의 일부가 왕복(transform만 사용) */
._indeterminate_1597x_26 {
  position: absolute;
  inset-block: 0;
  width: 40%;
  transition: none;
  animation: _progress-slide_1597x_1 1.4s var(--wds-ease-standard) infinite;
}

._value_1597x_34 {
  flex: none;
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes _progress-slide_1597x_1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._indeterminate_1597x_26 {
    /* 모션 정지 — 진행 중임은 showValue 라벨('진행 중')로 전달 */
    animation: none;
    inset-inline-start: 0;
    transform: none;
  }
}
/* WDS FormField — 토큰 전용(DD-4). 라벨/설명/오류 타이포. */
._field_2lf8x_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
}
._label_2lf8x_7 {
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text);
}
._req_2lf8x_12 {
  color: var(--wds-color-error);
}
._description_2lf8x_15 {
  margin: 0;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-subtle);
}
._error_2lf8x_20 {
  margin: 0;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-error-text);
}
/*
 * WDS FormMessage — Tier 2 폼 레벨 인라인 메시지.
 * 무배경 + *-text 잉크(surface 위 AA 보장 토큰 페어). Alert(틴트 배너)와 달리
 * 폼 흐름에 가볍게 인라인으로 머문다. 아이콘은 currentColor를 상속한다.
 */
._message_tqd1n_6 {
  display: flex;
  align-items: flex-start;
  gap: var(--wds-space-2);
  margin: 0;
  font-size: var(--wds-font-size-body-2);
  line-height: 1.5;
  word-break: keep-all;
}

._icon_tqd1n_16 {
  flex: none;
  display: inline-flex;
  margin-block-start: 0.1em;
}
._icon_tqd1n_16 svg {
  width: var(--wds-icon-size-sm, 1rem);
  height: var(--wds-icon-size-sm, 1rem);
}

._text_tqd1n_26 {
  min-width: 0;
}

/* ── 변형 — 아이콘·텍스트 모두 *-text 잉크 상속 ── */
._info_tqd1n_31 {
  color: var(--wds-color-info-text);
}
._success_tqd1n_34 {
  color: var(--wds-color-success-text);
}
._warning_tqd1n_37 {
  color: var(--wds-color-warning-text);
}
._error_tqd1n_40 {
  color: var(--wds-color-error-text);
}
/* WDS FunnelChart — 토큰 전용(DD-4). 밴드는 원시 blue/green 램프 그라데이션(<defs>, 다크 고정). */
._root_mrgcc_2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wds-space-3);
  margin: 0;
}

/* 고정 viewBox + 반응형. */
._svg_mrgcc_11 {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 단계 사다리꼴 — fill은 인라인 그라데이션 참조(url(#…)). */
._band_mrgcc_18 {
  stroke: none;
}

/* 값 — 밴드 안 크게(흰 글자). 원시 램프 위라 양 테마 legible(large bold ≥3:1). */
._value_mrgcc_23 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-title-l);
  font-weight: var(--wds-font-weight-bold);
  fill: var(--wds-white);
  font-variant-numeric: tabular-nums;
}

/* 좌측 단계명. */
._stageLabel_mrgcc_32 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
  fill: var(--wds-color-text);
}

/* 좌측 값 폴백(좁은 밴드) — 단계명 아래 보조. 더 작게(label-s)로 단계명(body-2 semibold)에 위계 양보. */
._stageValue_mrgcc_40 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-label-s);
  fill: var(--wds-color-text);
  font-variant-numeric: tabular-nums;
}

/* 우측 직전 대비 전환율. */
._percent_mrgcc_48 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  fill: var(--wds-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 최대 이탈 단계 강조 — warning(amber), 다크 리바인딩 안전(amber-700→amber-400). */
._percentDrop_mrgcc_56 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
  fill: var(--wds-color-warning-text);
  font-variant-numeric: tabular-nums;
}

/* "최대 이탈" 라벨. */
._dropFlag_mrgcc_65 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-label-s);
  fill: var(--wds-color-warning-text);
}

/* sr-only 데이터 표 — 정본. 시각만 aria-hidden. */
._srTable_mrgcc_72 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* figcaption — Chart/Pie 등 다수 차트 정본과 동일 body-2(표현 일관성). */
._caption_mrgcc_85 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  line-height: normal;
  color: var(--wds-color-text-muted);
}
/* WDS GaugeChart — 토큰 전용(DD-4). 값 아크 색은 톤(임계 구간) 인라인. */
._root_e939z_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wds-space-2);
  margin: 0;
}

._svg_e939z_10 {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 트랙 아크 — 채움 없음(스트로크만), 둥근 끝. */
._track_e939z_17 {
  fill: none;
  stroke: var(--wds-color-surface-muted);
  stroke-linecap: round;
}

/* 값 아크 — stroke는 톤 인라인. 채움 없음, 둥근 끝. */
._valueArc_e939z_24 {
  fill: none;
  stroke-linecap: round;
}

/* 값→목표 "남은 거리" 아크 — 톤 인라인, 옅게(미달분 시각화). 둥근 끝 없음(트랙과 구분). */
._gapArc_e939z_30 {
  fill: none;
  stroke-opacity: 0.22;
  stroke-linecap: butt;
}

/* 목표 노치 헤일로 — 표면색 외곽으로 아크/트랙 위에서 분리. */
._targetHalo_e939z_37 {
  stroke: var(--wds-color-surface);
  stroke-width: 5;
  stroke-linecap: butt;
}

/* 목표 마커 — 아크 가로지르는 정밀 노치(둥글지 않음). */
._targetMark_e939z_44 {
  stroke: var(--wds-color-text);
  stroke-width: 2.5;
  stroke-linecap: butt;
}

/* 아크 양 끝 min/max 라벨. */
._endLabel_e939z_51 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  fill: var(--wds-color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 중앙 큰 값. */
._bigValue_e939z_59 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-h2);
  font-weight: var(--wds-font-weight-bold);
  fill: var(--wds-color-text);
  font-variant-numeric: tabular-nums;
}

/* 중앙 라벨(지표명). */
._centerLabel_e939z_68 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  fill: var(--wds-color-text-muted);
}

/* 달성률 — 톤 색 인라인. */
._percent_e939z_75 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* sr-only 데이터 표 — 정본. 시각만 aria-hidden. */
._srTable_e939z_83 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._caption_e939z_95 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  line-height: normal;
  color: var(--wds-color-text-muted);
}
/* WDS Grid — 토큰 전용. columns/gap은 커스텀 프로퍼티로 주입, gap 기본은 --wds-grid-gutter. */
._grid_n3cq4_2 {
  display: grid;
  grid-template-columns: repeat(var(--wds-grid-columns, 12), minmax(0, 1fr));
  gap: var(--wds-grid-gap, var(--wds-grid-gutter));
}

/* 트랙 내부 콘텐츠(긴 텍스트/코드)가 컬럼을 밀어내지 않도록 */
._item_n3cq4_9 {
  min-width: 0;
}
/* WDS HeatmapChart — 토큰 전용(DD-4). 순차 색은 chart-1 토큰 + 레벨 불투명도(인라인). */
._root_11dqo_2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wds-space-3);
  margin: 0;
}

/* 고정 viewBox + 반응형 — 셀이 정사각 유지(균일 스케일). */
._svg_11dqo_11 {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 값 셀 — fill·fillOpacity는 인라인(레벨 불투명도). */
._cell_11dqo_18 {
  stroke: none;
}

/* 결측 셀(데이터 없음) — 중립 표면 + 점선 테두리(형태 채널)로 "값 0"·최저 레벨과
   색맹·저대비에서도 구분(색 단독 의존 회피, markerShape 철학). */
._cellEmpty_11dqo_24 {
  fill: var(--wds-color-surface-muted);
  stroke: var(--wds-color-border);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* 축 라벨 — SVG user-space 폰트(caption 토큰 = 12 user unit). */
._axisLabel_11dqo_32 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  fill: var(--wds-color-text-muted);
}

/* 순차 범례 — 적음 ▢▢▢▢▢ 많음 (값 정본은 sr-only 표). */
._legend_11dqo_39 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

._legendCap_11dqo_48 {
  font-variant-numeric: tabular-nums;
}

._legendSwatches_11dqo_52 {
  display: flex;
  gap: var(--wds-space-1);
}

._legendSwatch_11dqo_52 {
  width: var(--wds-space-3);
  height: var(--wds-space-3);
  border-radius: var(--wds-radius-sm);
}

/* sr-only 데이터 표 — 정본. 시각만 aria-hidden. */
._srTable_11dqo_64 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._caption_11dqo_76 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}
/* WDS IconTile — 토큰 전용(DD-4). 틴트는 배경에만, 아이콘은 진한 토큰(대비 보장). */
._tile_1m7eb_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--wds-radius-lg);
}

._sm_1m7eb_10 {
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border-radius: var(--wds-radius-md);
}
._md_1m7eb_15 {
  width: var(--wds-space-10);
  height: var(--wds-space-10);
}
._lg_1m7eb_19 {
  width: var(--wds-space-12);
  height: var(--wds-space-12);
}

._accent_1m7eb_24 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}
._neutral_1m7eb_28 {
  background: color-mix(in srgb, var(--wds-color-text) 6%, var(--wds-color-surface));
  color: var(--wds-color-text-muted);
}
._success_1m7eb_32 {
  background: color-mix(in srgb, var(--wds-color-success) 12%, var(--wds-color-surface));
  color: var(--wds-color-success-text);
}
._warning_1m7eb_36 {
  background: color-mix(in srgb, var(--wds-color-warning) 12%, var(--wds-color-surface));
  color: var(--wds-color-warning-text);
}
/* IdeaCards — 컴포저 아래 가로 아이디어 카드 레일(GPT 「아이디어 둘러보기」). --wds 토큰 전용. */

._section_19dzi_3 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}
._head_19dzi_8 {
  margin: 0;
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
}

._card_19dzi_15,
._upload_19dzi_16 {
  position: relative;
  display: flex;
  width: 7.5rem;
  height: 10rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-lg);
  overflow: hidden;
  cursor: pointer;
  /* 레일 overflow-y:hidden이 바깥 그림자/이동을 잘라내므로 hover는 밝기만(경계 안에서) */
  transition: filter var(--wds-duration-fast) var(--wds-ease-standard);
}
._card_19dzi_15 {
  align-items: flex-end;
  background: var(--idea-bg, var(--wds-color-surface-muted));
}
._card_19dzi_15::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--wds-color-overlay), transparent 55%);
}
._card_19dzi_15:hover,
._upload_19dzi_16:hover {
  filter: brightness(1.06);
}
._card_19dzi_15:focus-visible,
._upload_19dzi_16:focus-visible {
  outline: 2px solid var(--wds-color-primary);
  outline-offset: -2px;
}
._label_19dzi_49 {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--wds-space-2);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-on-primary);
  text-align: left;
}

._upload_19dzi_16 {
  align-items: center;
  justify-content: center;
  background: var(--wds-color-surface-muted);
  border: 1px dashed var(--wds-color-border);
  color: var(--wds-color-text-muted);
}
._uploadLabel_19dzi_67 {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--wds-space-2);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
}
/* ScrollRail — 가로 오버플로 단일행 스크롤러. --wds 토큰 소비(DD-4). */

._wrap_1mu2y_3 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

._rail_1mu2y_10 {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--wds-space-2);
  overflow-x: auto;
  overflow-y: hidden;
  /* 스냅은 JS로 처리(드래그 종료 시 가장 가까운 카드로 부드럽게) — CSS scroll-snap은 작은 드래그를
     시작점으로 즉시 튕겨 부자연스러웠다. */
  /* 포커스된 칩이 엣지 페이드(1.5rem=space-6) 아래로 들어가 포커스 링이 깎이지 않게 — WCAG 2.4.13 */
  scroll-padding-inline: var(--wds-space-6);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* 엣지 페이드 — wrap의 끝단 data-attr이 좌/우 페이드 폭을 켠다(넘칠 때만) */
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
}
._rail_1mu2y_10::-webkit-scrollbar {
  display: none;
}
._rail_1mu2y_10[data-grabbing] {
  cursor: grabbing;
}
._rail_1mu2y_10 > * {
  flex: 0 0 auto;
}
._rail_1mu2y_10:focus-visible {
  outline: 2px solid var(--wds-color-primary);
  outline-offset: 2px;
  border-radius: var(--wds-radius-sm);
}

/* 넘칠 때만 해당 쪽 페이드 — data-at-start/end='false'이면 더 스크롤할 콘텐츠가 있음 */
._wrap_1mu2y_3[data-at-start='false'] ._rail_1mu2y_10 {
  --fade-l: 1.5rem;
}
._wrap_1mu2y_3[data-at-end='false'] ._rail_1mu2y_10 {
  --fade-r: 1.5rem;
}

/* ── 화살표 — 마우스 어포던스(끝단서 숨김, 넘침 없으면 제거) ──────────────── */
._arrow_1mu2y_66 {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface);
  color: var(--wds-color-text-muted);
  cursor: pointer;
  transition:
    opacity var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
._arrow_1mu2y_66:hover:not(:disabled) {
  border-color: var(--wds-color-border-strong);
  color: var(--wds-color-text);
}
._arrow_1mu2y_66:focus-visible {
  outline: 2px solid var(--wds-color-primary);
  outline-offset: 2px;
}
/* 끝단: 비활성 화살표는 공간만 유지(스크롤 중 레이아웃 시프트 방지) */
._arrow_1mu2y_66:disabled {
  opacity: 0;
  pointer-events: none;
}
/* 넘침 자체가 없으면 양쪽 화살표 제거 — 레일이 전체 폭 사용 */
._wrap_1mu2y_3[data-at-start='true'][data-at-end='true'] ._arrow_1mu2y_66 {
  display: none;
}
._prev_1mu2y_99 {
  margin-right: var(--wds-space-2);
}
._next_1mu2y_102 {
  margin-left: var(--wds-space-2);
}
._icon_1mu2y_105 {
  width: 1.1rem;
  height: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  ._rail_1mu2y_10 {
    scroll-behavior: auto;
  }
  ._arrow_1mu2y_66 {
    transition: none;
  }
}
/* WDS Input — 토큰 전용(DD-4). 시드 대비: 높이·invalid 보더 토큰화. */
._wrap_1h2ox_2 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._wrap_1h2ox_2:focus-within {
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

/* ── 크기 (size) ── md는 .wrap 기본값(control-height-md). sm·lg만 모디파이어로
   높이(control-height 토큰)·패딩·gap·폰트를 스케일. 선택 컨트롤과 동일 sm/md/lg. */
._sm_1h2ox_22 {
  height: var(--wds-control-height-sm);
  padding-inline: var(--wds-space-2);
  gap: var(--wds-space-1);
  font-size: var(--wds-font-size-body-2);
}
._lg_1h2ox_28 {
  height: var(--wds-control-height-lg);
  padding-inline: var(--wds-space-4);
}

._invalid_1h2ox_33 {
  border-color: var(--wds-input-border-invalid);
}
._invalid_1h2ox_33:focus-within {
  border-color: var(--wds-input-border-invalid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-error) 18%, transparent);
}

._disabled_1h2ox_41 {
  background: var(--wds-input-bg-disabled);
}

._leading_1h2ox_45,
._trailing_1h2ox_46 {
  display: inline-flex;
  align-items: center;
  color: var(--wds-color-text-subtle);
  flex: none;
}

/* 슬롯에 직접 꽂힌 svg 기본 크기 — icon-size-sm. 크기 없는 인라인 svg가 0×0으로
   사라지던 결함(P5 Flutter 패리티 실측에서 검출 — wiz_ui WizInput의 IconTheme
   sm 기본과 동일 계약). 중첩 버튼(.peek 등) 내부 svg는 소비자가 결정. */
._leading_1h2ox_45 > svg,
._trailing_1h2ox_46 > svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

/* clearable 비우기 버튼 — trailing 슬롯 (ADR-012 B-P1, SearchField 패턴 정합) */
._clear_1h2ox_63 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-full);
  background: transparent;
  color: var(--wds-color-text-subtle);
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._clear_1h2ox_63:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._clear_1h2ox_63:active {
  background: var(--wds-color-surface-pressed);
}
._clear_1h2ox_63:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 1px;
}
._clear_1h2ox_63 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  ._clear_1h2ox_63 {
    transition: none;
  }
}

._input_1h2ox_100 {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wds-input-fg);
  font: inherit;
}
._input_1h2ox_100::placeholder {
  color: var(--wds-input-placeholder);
}
._input_1h2ox_100:disabled {
  cursor: not-allowed;
}
/* WDS KnowledgeCard — Flutter WizKnowledgeCard 패리티. 토큰 전용(DD-4). */
._card_1nsbp_2 {
  display: flex;
  align-items: flex-start;
  gap: var(--wds-space-3);
  padding: var(--wds-space-4);
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
}

/* clickable — 상태는 표면·보더로(그림자 아님). selected가 hover/pressed보다 우선. */
._interactive_1nsbp_13 {
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._interactive_1nsbp_13:hover:not(._selected_1nsbp_17) {
  background: var(--wds-color-surface-hover);
}
._interactive_1nsbp_13:active:not(._selected_1nsbp_17) {
  background: var(--wds-color-surface-pressed);
}
._interactive_1nsbp_13:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._selected_1nsbp_17 {
  background: var(--wds-color-surface-selected);
  border-color: var(--wds-color-primary);
}

/* 소스 타입 아이콘 타일 32px(space-8) — AgentCard 아바타(40)보다 한 단계 작게. */
._iconTile_1nsbp_34 {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-subtle);
}
._selected_1nsbp_17 ._iconTile_1nsbp_34 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
}

._content_1nsbp_49 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

._title_1nsbp_56 {
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 발췌 2줄 클램프 */
._excerpt_1nsbp_66 {
  margin-top: var(--wds-space-1);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._meta_1nsbp_77 {
  margin-top: var(--wds-space-2);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-subtle);
}
/*
 * LoginMethods — 인증 방식 버튼 풀폭 균등 스택 + 라벨 구분선.
 * WDS semantic 토큰만 소비(로그인 데모 login-pattern.module.css의 .divider/.methods 미러).
 */

._root_ub65z_6 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-6);
  width: 100%;
}

/* 가운데 정렬 라벨 구분선("또는") — 양옆 헤어라인 + 가운데 캡션.
   1차 폼 영역과 방식 목록을 가른다. */
._divider_ub65z_3 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-4);
  color: var(--wds-color-text-subtle);
  font-size: var(--wds-font-size-caption);
}

._divider_ub65z_3::before,
._divider_ub65z_3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--wds-color-border-subtle);
}

/* prominence parity — 모든 방식 버튼이 동일 폭(풀폭)·동일 간격. */
._methods_ub65z_3 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

._methods_ub65z_3 > * {
  width: 100%;
}
/* LoginSurface — 단일 인증 패널 recipe. 토큰 전용. */

._surface_1p22z_3 {
  width: min(100%, var(--wds-login-surface-max-width));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-6);
  padding: var(--wds-space-8);
  color: var(--wds-color-text);
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border-subtle);
  border-radius: var(--wds-radius-xl);
}

._sizeSm_1p22z_16 {
  --wds-login-surface-max-width: 390px;
}

._sizeMd_1p22z_20 {
  --wds-login-surface-max-width: 440px;
}

._header_1p22z_24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wds-space-2);
  text-align: center;
}

._brand_1p22z_32 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wds-space-2);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  line-height: 1.4;
}

._title_1p22z_43 {
  margin: 0;
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-h2);
  font-weight: var(--wds-font-weight-medium);
  line-height: 1.25;
  letter-spacing: 0;
  word-break: keep-all;
}

._subtitle_1p22z_53 {
  max-width: 32rem;
  margin: 0;
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-regular);
  line-height: 1.55;
  word-break: keep-all;
}

._body_1p22z_63,
._actions_1p22z_64,
._footer_1p22z_65 {
  display: flex;
  flex-direction: column;
}

._body_1p22z_63 {
  gap: var(--wds-space-5);
}

._actions_1p22z_64 {
  gap: var(--wds-space-4);
}

._footer_1p22z_65 {
  align-items: center;
  gap: var(--wds-space-2);
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-regular);
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 599px) {
  ._surface_1p22z_3 {
    padding: var(--wds-space-6);
    border-radius: var(--wds-radius-lg);
  }
}
/* WIZ 브랜드 로고(Quintal Bloom 심볼) — 라이트/다크 두 SVG를 data-theme로 전환.
   포털 globals.css의 .wds-symbol 규칙 이식. 색 값 없음(브랜드 색은 TSX SVG fill) → DD-4 무관.
   build 시 vite 플러그인이 전체를 @layer wds.components로 감싼다. */

._root_1gml4_5 {
  display: inline-flex;
  flex-shrink: 0;
}

._root_1gml4_5 svg {
  width: 100%;
  height: 100%;
}

/* tone onLight/onColor — 테마 무관 단일 변형 상시 표시 */
._solo_1gml4_16 {
  display: block;
}

/* 기본(테마 미지정·라이트): 라이트 표시, 다크 숨김 */
._dark_1gml4_21 {
  display: none;
}

[data-theme='dark'] ._light_1gml4_25 {
  display: none;
}

[data-theme='dark'] ._dark_1gml4_21 {
  display: block;
}

/* 강제 라이트 스코프(데모 패널 등)에서도 동일 */
[data-theme='light'] ._light_1gml4_25 {
  display: block;
}

[data-theme='light'] ._dark_1gml4_21 {
  display: none;
}
/* Markdown — .prose 컨테이너 + 자손 선택자로 토큰화(DD-4). AI 메시지 본문 렌더용. */

._prose_os4qo_1 {
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* 블록 세로 리듬 — 첫 블록 margin 0, 이후 위 여백 */
._prose_os4qo_1 > * {
  margin: 0;
}
._prose_os4qo_1 > * + * {
  margin-top: var(--wds-space-3);
}

._prose_os4qo_1 h1,
._prose_os4qo_1 h2,
._prose_os4qo_1 h3,
._prose_os4qo_1 h4,
._prose_os4qo_1 h5,
._prose_os4qo_1 h6 {
  font-weight: var(--wds-font-weight-semibold);
  line-height: 1.3;
}
._prose_os4qo_1 h1 {
  font-size: var(--wds-font-size-h1);
}
._prose_os4qo_1 h2 {
  font-size: var(--wds-font-size-h2);
}
._prose_os4qo_1 h3 {
  font-size: var(--wds-font-size-h3);
}
._prose_os4qo_1 h4,
._prose_os4qo_1 h5,
._prose_os4qo_1 h6 {
  font-size: var(--wds-font-size-body-1);
}
/* 헤딩이 다른 블록 뒤에 오면 섹션 구분을 위해 위 여백을 키운다 */
._prose_os4qo_1 * + h1,
._prose_os4qo_1 * + h2,
._prose_os4qo_1 * + h3 {
  margin-top: var(--wds-space-5);
}

._prose_os4qo_1 a {
  color: var(--wds-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--wds-duration-fast) var(--wds-ease-standard);
}
._prose_os4qo_1 a:hover {
  color: var(--wds-color-link-hover);
}

._prose_os4qo_1 strong {
  font-weight: var(--wds-font-weight-semibold);
}
._prose_os4qo_1 em {
  font-style: italic;
}

/* 인라인 코드 */
._prose_os4qo_1 code {
  font-family: var(--wds-font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--wds-radius-sm);
  background: var(--wds-color-surface-muted);
}

/* 코드 블록 */
._prose_os4qo_1 pre {
  font-family: var(--wds-font-mono);
  padding: var(--wds-space-3);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface-muted);
  overflow-x: auto;
  line-height: 1.5;
}
._prose_os4qo_1 pre code {
  font-size: var(--wds-font-size-body-2);
  padding: 0;
  background: none;
  border-radius: 0;
}

/* 리스트 */
._prose_os4qo_1 ul,
._prose_os4qo_1 ol {
  padding-inline-start: var(--wds-space-5);
}
._prose_os4qo_1 ul {
  list-style: disc;
}
._prose_os4qo_1 ol {
  list-style: decimal;
}
._prose_os4qo_1 li + li {
  margin-top: var(--wds-space-1);
}

/* 인용 */
._prose_os4qo_1 blockquote {
  padding-inline-start: var(--wds-space-3);
  border-inline-start: 2px solid var(--wds-color-border);
  color: var(--wds-color-text-muted);
}

/* 구분선 */
._prose_os4qo_1 hr {
  border: 0;
  border-top: 1px solid var(--wds-color-border);
}

/* 스트리밍 커서 — GPT식 블록 캐럿. reduced-motion이면 정지(steady, 진행은 aria-busy로 전달). */
._caret_os4qo_119 {
  display: inline-block;
  width: 0.5ch;
  height: 1.05em;
  margin-inline-start: 1px;
  vertical-align: text-bottom;
  background: var(--wds-color-text);
  animation: _wds-md-caret-blink_os4qo_1 1.06s step-end infinite;
}
@keyframes _wds-md-caret-blink_os4qo_1 {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  ._caret_os4qo_119 {
    animation: none;
    opacity: 1;
  }
}
/* WDS MessageActions — assistant 액션바. ghost 아이콘이 텍스트 시작선에 정렬. 토큰 전용(DD-4). */
._actions_10gst_2 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-1);
  margin-top: var(--wds-space-1);
  margin-inline-start: calc(var(--wds-space-2) * -1);
}
/* ModeComposer — ComposerBar 위 모드 시스템(활성 모드 칩 + 제안 칩). --wds 토큰 전용. */

._composer_ula0z_3 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}

/* ── 활성 모드 칩(컴포저 리딩) ─────────────────────────────────────── */
._modeChip_ula0z_10 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  padding-block: 2px;
  padding-inline: var(--wds-space-2);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
  white-space: nowrap;
}
._modeChipIcon_ula0z_22 {
  display: inline-flex;
  color: var(--wds-color-primary);
}
._modeChipIcon_ula0z_22 svg {
  width: 18px;
  height: 18px;
}
._modeChipClear_ula0z_30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  border-radius: var(--wds-radius-full);
  transition: color var(--wds-duration-fast) var(--wds-ease-standard);
}
._modeChipClear_ula0z_30 svg {
  width: 14px;
  height: 14px;
}
._modeChipClear_ula0z_30:hover {
  color: var(--wds-color-text);
}

/* ── 빈 상태 제안 칩(컴포저 아래) ───────────────────────────────────── */
._suggestions_ula0z_51 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wds-space-2);
}
/* WDS MultiSelect — 토큰 전용(DD-4). 트리거는 Input 어휘, 팝업은 dropdown 어휘. */
._root_1e2ea_2 {
  position: relative;
  display: inline-block;
  /* 칩 + 검색 어포던스 기준 최소 폭 (Select 14rem과 같은 지위의 레이아웃 값) */
  min-width: 16rem;
}

/* ── 트리거 — 칩 줄바꿈을 허용하는 Input 어휘 ── */
._trigger_1e2ea_10 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  width: 100%;
  min-height: var(--wds-input-height);
  padding-block: var(--wds-space-1);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  cursor: pointer;
  /* 빠른/더블 클릭 시 라벨이 텍스트 선택되어 '전체 선택'처럼 보이던 문제 차단 */
  user-select: none;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._trigger_1e2ea_10:focus-visible {
  outline: none;
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._disabled_1e2ea_36 {
  background: var(--wds-input-bg-disabled);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

._chips_1e2ea_42 {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wds-space-1);
  min-width: 0;
}

._placeholder_1e2ea_51 {
  overflow: hidden;
  color: var(--wds-input-placeholder);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* +N 초과 표시 — neutral 칩과 같은 어휘의 합산 배지 */
._overflow_1e2ea_59 {
  padding: var(--wds-space-1) var(--wds-space-2);
  background: var(--wds-color-surface-muted);
  border-radius: var(--wds-radius-full);
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  white-space: nowrap;
}

/* 전체 비우기 × — 시각 작음 + 44px 히트 영역 */
._clear_1e2ea_70 {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-full);
  background: transparent;
  color: var(--wds-color-text-subtle);
  cursor: pointer;
  transition: color var(--wds-duration-fast) var(--wds-ease-standard);
}
._clear_1e2ea_70::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._clear_1e2ea_70:hover {
  color: var(--wds-color-text);
}
._clear_1e2ea_70:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._clear_1e2ea_70 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

._chevron_1e2ea_103 {
  flex: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-subtle);
  transition: transform var(--wds-duration-fast) var(--wds-ease-standard);
}
._open_1e2ea_110 ._chevron_1e2ea_103 {
  transform: rotate(180deg);
}

/* ── 팝업 ── */
._popup_1e2ea_115 {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  overflow: hidden;
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  animation: _popup-in_1e2ea_1 var(--wds-duration-fast) var(--wds-ease-out);
}
._flipped_1e2ea_127 {
  top: auto;
  bottom: calc(100% + var(--wds-space-1));
}

/* ── 검색 입력 ── */
._searchBox_1e2ea_133 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  padding-inline: var(--wds-space-3);
  border-bottom: 1px solid var(--wds-color-border-subtle);
}
._searchIcon_1e2ea_140 {
  flex: none;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  color: var(--wds-color-text-subtle);
}
._searchInput_1e2ea_146 {
  flex: 1;
  min-width: 0;
  height: var(--wds-control-height-md);
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wds-input-fg);
  font: inherit;
  font-size: var(--wds-font-size-body-1);
}
._searchInput_1e2ea_146::placeholder {
  color: var(--wds-input-placeholder);
}

/* ── 리스트 행 ── */
._list_1e2ea_162 {
  margin: 0;
  padding: var(--wds-space-1);
  list-style: none;
  /* 약 6옵션 상한 — 초과분은 내부 스크롤 (Select과 동일) */
  max-height: 16rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wds-color-border-strong) transparent;
  /* 옵션 라벨 텍스트 선택 차단 — 검색 입력(.searchInput)은 list 밖이라 영향 없음 */
  user-select: none;
}

/* 옵션 행 — 리스트형 팝업 공통 어휘(40px 행·inline 12px·gap 8px·radius sm) */
._optionRow_1e2ea_176 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-height: var(--wds-space-10);
  padding-inline: var(--wds-space-3);
  border-radius: var(--wds-radius-sm);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
}
._optionRow_1e2ea_176[aria-selected='true'] {
  background: var(--wds-color-surface-selected);
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-medium);
}
._active_1e2ea_193 {
  background: var(--wds-color-surface-hover);
}
._active_1e2ea_193[aria-selected='true'] {
  background: var(--wds-color-surface-selected);
}
/* 눌림 — neutral 면에만 pressed. 선택(surface-selected) 행은 유지 */
._optionRow_1e2ea_176:active:not([aria-selected='true']):not(._optionDisabled_1e2ea_200) {
  background: var(--wds-color-surface-pressed);
}
._optionDisabled_1e2ea_200 {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}
._allRow_1e2ea_207,
._groupRow_1e2ea_208 {
  font-weight: var(--wds-font-weight-medium);
}
._groupedOption_1e2ea_211 {
  padding-inline-start: var(--wds-space-6);
}

._rowLabel_1e2ea_215 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 선택 불가 그룹 헤더 — 옵션 행과 같은 inline 패딩으로 좌측 정렬선 일치 */
._groupHeader_1e2ea_222 {
  padding: var(--wds-space-2) var(--wds-space-3) var(--wds-space-1);
  color: var(--wds-color-text-subtle);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-semibold);
}

/* ── 행 내부 시각 체크박스 — Checkbox 토큰 어휘 공유 ── */
._box_1e2ea_230 {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--wds-checkbox-bg);
  border: 1px solid var(--wds-checkbox-border);
  border-radius: var(--wds-checkbox-radius);
  color: var(--wds-checkbox-check);
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._boxOn_1e2ea_246 {
  background: var(--wds-checkbox-bg-checked);
  border-color: var(--wds-checkbox-bg-checked);
}
._mark_1e2ea_250 {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--wds-duration-fast) var(--wds-ease-standard),
    transform var(--wds-duration-fast) var(--wds-ease-standard);
}
._markOn_1e2ea_260 {
  opacity: 1;
  transform: scale(1);
}

/* ── 로딩/빈 상태 ── */
._loadingRow_1e2ea_266 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wds-space-6);
  color: var(--wds-color-text-muted);
}
._empty_1e2ea_273 {
  padding: var(--wds-space-4);
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-2);
  text-align: center;
}

/* ── 모바일 시트 체크리스트 ── */
._sheetSearch_1e2ea_281 {
  height: var(--wds-input-height);
  margin-block-end: var(--wds-space-2);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
}
._sheetList_1e2ea_287 {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
._sheetRow_1e2ea_294 {
  display: flex;
  align-items: stretch;
}
/* Checkbox 라벨 포함 행 전체를 터치 타깃으로 — 모바일 최소 높이 */
._sheetCheckbox_1e2ea_299 {
  width: 100%;
  min-height: var(--wds-control-height-md);
}
._sheetAll_1e2ea_303,
._sheetGroupRow_1e2ea_304 {
  font-weight: var(--wds-font-weight-medium);
}
._sheetGroupHeader_1e2ea_307 {
  padding: var(--wds-space-3) 0 var(--wds-space-1);
  color: var(--wds-color-text-subtle);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-semibold);
}

@keyframes _popup-in_1e2ea_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._trigger_1e2ea_10,
  ._chevron_1e2ea_103,
  ._clear_1e2ea_70,
  ._box_1e2ea_230,
  ._mark_1e2ea_250 {
    transition: none;
  }
  ._popup_1e2ea_115 {
    animation: none;
  }
}
/* WDS OneTimeCodeInput. DD-4: 색·라디우스·폰트는 --wds-* 토큰만. */

._root_14mxh_3 {
  display: inline-flex;
  gap: var(--wds-space-2);
}

._box_14mxh_8 {
  width: var(--wds-control-height-md);
  height: var(--wds-control-height-md);
  padding: 0;
  text-align: center;
  font-size: var(--wds-font-size-title-l);
  font-weight: var(--wds-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--wds-color-text);
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  caret-color: var(--wds-color-primary);
  transition: border-color var(--wds-duration-fast) var(--wds-ease-standard);
}

._box_14mxh_8:hover:not(:disabled) {
  border-color: var(--wds-color-border-strong);
}

._box_14mxh_8:focus-visible {
  outline: 2px solid var(--wds-color-primary);
  outline-offset: 1px;
  border-color: var(--wds-color-primary);
}

/* 오류 — 테두리를 error 토큰으로(aria-invalid는 컴포넌트가 부여) */
._invalid_14mxh_35 ._box_14mxh_8 {
  border-color: var(--wds-color-error);
}

._invalid_14mxh_35 ._box_14mxh_8:focus-visible {
  outline-color: var(--wds-color-error);
  border-color: var(--wds-color-error);
}

/* 비활성 */
._disabled_14mxh_45 ._box_14mxh_8,
._box_14mxh_8:disabled {
  color: var(--wds-color-text-subtle);
  background: var(--wds-color-surface-muted);
  cursor: not-allowed;
}
/* WDS PasswordStrength. DD-4: 색·라디우스·폰트는 --wds-* 토큰만. */

._root_7bds0_3 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-3);
}

._meter_7bds0_9 {
  display: inline-flex;
  gap: var(--wds-space-1);
}

._seg_7bds0_14 {
  width: var(--wds-space-6);
  height: var(--wds-space-2);
  border-radius: var(--wds-radius-sm);
  background: var(--wds-color-border);
}

._label_7bds0_21 {
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
}

/* ── 레벨별 색(채워진 세그먼트 + 라벨) ──────────────────────────────────── */
._weak_7bds0_28 ._on_7bds0_28 {
  background: var(--wds-color-error);
}

._weak_7bds0_28 ._label_7bds0_21 {
  color: var(--wds-color-error-text);
}

._fair_7bds0_36 ._on_7bds0_28,
._good_7bds0_37 ._on_7bds0_28 {
  background: var(--wds-color-warning);
}

._fair_7bds0_36 ._label_7bds0_21,
._good_7bds0_37 ._label_7bds0_21 {
  color: var(--wds-color-warning-text);
}

._strong_7bds0_46 ._on_7bds0_28 {
  background: var(--wds-color-success);
}

._strong_7bds0_46 ._label_7bds0_21 {
  color: var(--wds-color-success-text);
}
/* 파이/도넛 — SVG 슬라이스 + 범례(우측 기본) + sr-only 표. 색은 차트 토큰(다크 자동). */
._root_14n8q_2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
}

._rootBottom_14n8q_10 {
  flex-direction: column;
  align-items: center;
}

/* 도넛 중앙 텍스트 앵커 — 플롯 위 절대 배치. */
._plotWrap_14n8q_16 {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

._svg_14n8q_22 {
  display: block;
}

/* 슬라이스 — surface 색 얇은 구분선으로 인접 조각 경계를 또렷하게(라운드 조인). */
._slice_14n8q_27 {
  stroke: var(--wds-color-surface);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* 빈 상태 — 데이터 0이면 옅은 링만. */
._emptyRing_14n8q_34 {
  fill: none;
  stroke: var(--wds-color-border);
  stroke-width: 1.5;
}

/* 도넛 중앙 — 합계/라벨. */
._center_14n8q_41 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  pointer-events: none;
}

._centerLabel_14n8q_52 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

._centerValue_14n8q_58 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-h3);
  font-weight: var(--wds-font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--wds-color-text);
}

/* 범례 — 색칩 + 범주명 + 비율. */
._legend_14n8q_67 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

._legendItem_14n8q_76 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
}

._chip_14n8q_85 {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--wds-radius-sm);
}

._legendLabel_14n8q_92 {
  flex: 1;
}

._legendPercent_14n8q_96 {
  font-variant-numeric: tabular-nums;
  color: var(--wds-color-text-muted);
}

/* sr-only 데이터 표 — 시각엔 숨기되 SR엔 정본 노출. */
._srTable_14n8q_102 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._caption_14n8q_114 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
}
/* WDS Popover — 토큰 전용(DD-4). 등장 모션은 compositor 속성(opacity/transform)만. */
._root_dg1mb_2 {
  position: relative;
  display: inline-block;
}

/* 트리거 — secondary 컨트롤 외형. 높이는 control 토큰(44px)이라 터치 타깃 별도 확장 불요 */
._trigger_dg1mb_8 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  height: var(--wds-control-height-md);
  padding-inline: var(--wds-space-4);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text);
  background: var(--wds-color-surface);
  border: 1px solid transparent;
  border-color: var(--wds-color-border-strong);
  border-radius: var(--wds-radius-control);
  cursor: pointer;
  transition:
    background-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast),
    border-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast);
}
._trigger_dg1mb_8:hover {
  background: var(--wds-color-surface-hover);
  border-color: var(--wds-color-primary);
}
/* 눌림 — 열림(surface-selected) 상태는 덮지 않고 닫힌 트리거에만 */
._trigger_dg1mb_8:not([aria-expanded='true']):active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._trigger_dg1mb_8[aria-expanded='true'] {
  background: var(--wds-color-surface-selected);
}
._trigger_dg1mb_8:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._panel_dg1mb_43 {
  position: absolute;
  top: calc(100% + var(--wds-space-2));
  left: 0;
  z-index: var(--wds-z-dropdown);
  min-width: 14rem;
  max-width: 20rem;
  max-height: var(--wds-popover-available-block-size, calc(100vh - var(--wds-space-4)));
  padding: var(--wds-space-4);
  background: var(--wds-color-surface-raised);
  border: 1px solid transparent;
  border-color: var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-2);
  overflow: auto;
  transform: translateX(var(--wds-popover-shift-x, 0px));
  animation: _panel-in_dg1mb_1 var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast);
}

/* Native Popover API: manual top-layer에서도 WDS geometry가 좌표와 크기를 계속 소유한다. */
._panel_dg1mb_43[popover='manual'] {
  right: auto;
  bottom: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: auto;
  transition:
    opacity var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast),
    transform var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast),
    overlay var(--wds-spring-spatial-fast-duration) allow-discrete,
    display var(--wds-spring-spatial-fast-duration) allow-discrete;
  transition-behavior: allow-discrete;
}

._panel_dg1mb_43[popover='manual']:popover-open {
  opacity: 1;
}

._panel_dg1mb_43._top_dg1mb_85[popover='manual'] {
  bottom: calc(100% + var(--wds-space-2));
}

/* 뷰포트 하단 공간 부족 시 상단 플립 */
._top_dg1mb_85 {
  top: auto;
  bottom: calc(100% + var(--wds-space-2));
}

._panel_dg1mb_43._topLayer_dg1mb_95 {
  position: fixed;
  top: var(--wds-popover-fixed-top, 0px);
  left: var(--wds-popover-fixed-left, 0px);
  right: auto;
  bottom: auto;
  margin: 0;
  transform: none;
}
._panel_dg1mb_43._topLayer_dg1mb_95._top_dg1mb_85 {
  top: var(--wds-popover-fixed-top, 0px);
  bottom: auto;
}
._panel_dg1mb_43._topLayer_dg1mb_95._anchorPositioned_dg1mb_108 {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: var(--wds-space-2) 0 0;
}
._panel_dg1mb_43._topLayer_dg1mb_95._anchorPositioned_dg1mb_108._top_dg1mb_85 {
  top: auto;
  bottom: auto;
  margin: 0 0 var(--wds-space-2);
}

@starting-style {
  ._panel_dg1mb_43[popover='manual']:popover-open {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

@keyframes _panel-in_dg1mb_1 {
  from {
    opacity: 0;
    transform: translateX(var(--wds-popover-shift-x, 0px)) translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._panel_dg1mb_43 {
    animation: none;
  }
}
/*
 * WDS ProviderButton — 서드파티 사인인 버튼.
 * 형태(높이·라운드·패딩·gap·폰트·포커스)는 **DS Button md 규칙을 그대로 상속**
 * (button-height-md · button-radius · space-4 padding · space-2 gap · font-sans · medium · body-1).
 * 오직 **외형 색만 브랜드 고정 hex**로 덮어쓴다(테마 무관 불변 — DD-4 토큰 규칙의 의도적 예외).
 */
._btn_gm9nl_7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wds-space-2);
  height: var(--wds-button-height-md);
  padding-inline: var(--wds-space-4);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--wds-button-radius);
  transition: filter var(--wds-duration-fast) var(--wds-ease-standard);
}

._btn_gm9nl_7:hover {
  filter: brightness(0.96);
}

._btn_gm9nl_7:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._btn_gm9nl_7:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

._fullWidth_gm9nl_40 {
  width: 100%;
}

._glyph_gm9nl_44 {
  display: inline-flex;
  flex: none;
}
._glyph_gm9nl_44 svg {
  width: 18px;
  height: 18px;
  display: block;
}

._label_gm9nl_54 {
  white-space: nowrap;
}

/* ── 브랜드 고정 외형(hex 불변) ─────────────────────────── */
/* stylelint-disable declaration-property-value-allowed-list -- 브랜드 Provider 버튼은 각 브랜드 가이드라인상 정확한 색(#000000·Google 4색 등)이 필수 — DD-4 토큰 규칙의 의도적·문서화된 예외 (ProviderButton.tsx 외형 색 불변) */
/* Apple — black / white / white-outline */
._appleBlack_gm9nl_61 {
  background: #000000;
  color: #ffffff;
}
._appleWhite_gm9nl_65 {
  background: #ffffff;
  color: #000000;
}
._appleOutline_gm9nl_69 {
  background: #ffffff;
  color: #000000;
  border-color: #000000;
}

/* Google — light / dark / neutral (G 로고는 항상 4색 고정) */
._googleLight_gm9nl_76 {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #747775;
}
._googleDark_gm9nl_81 {
  background: #131314;
  color: #e3e3e3;
  border-color: #8e918f;
}
._googleNeutral_gm9nl_86 {
  background: #f2f2f2;
  color: #1f1f1f;
}

/* Microsoft — light / dark (4색 심볼은 고정, 기업 SSO와 별개) */
._microsoftLight_gm9nl_92 {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #8a8886;
}
._microsoftDark_gm9nl_97 {
  background: #2f2f2f;
  color: #ffffff;
  border-color: #2f2f2f;
}
/* stylelint-enable declaration-property-value-allowed-list */
/* WDS QuantityStepper — 토큰 전용(DD-4). 입력 vocabulary(--wds-input-*) 재사용. */
._root_zs4jg_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-1);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._root_zs4jg_2:focus-within {
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

._disabled_zs4jg_20 {
  background: var(--wds-input-bg-disabled);
}

/* −/+ 버튼 — 시각 크기는 control-height-sm, 히트 영역은 ::after로 44px(control-height-md)까지 확장(§5) */
._button_zs4jg_25 {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-control-height-sm);
  height: var(--wds-control-height-sm);
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-control);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 32px(sm) 버튼 → 44px 히트 영역: (44 - 32) / 2 = space-3 / 2 (§5) */
._button_zs4jg_25::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._button_zs4jg_25:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._button_zs4jg_25:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._button_zs4jg_25:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 1px;
}
._button_zs4jg_25:disabled {
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}

._button_zs4jg_25 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._input_zs4jg_70 {
  width: 3ch;
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wds-input-fg);
  font: inherit;
  text-align: center;
}
._input_zs4jg_70:disabled {
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}

/* sm 크기 (ADR-012 C) — 높이를 control-height-sm로 줄이고 입력 폰트를 축소. 히트 영역은 44px 유지 */
._root_zs4jg_2[data-size='sm'] {
  height: var(--wds-control-height-sm);
}
._root_zs4jg_2[data-size='sm'] ._input_zs4jg_70 {
  font-size: var(--wds-font-size-body-2);
}

@media (prefers-reduced-motion: reduce) {
  ._root_zs4jg_2,
  ._button_zs4jg_25 {
    transition: none;
  }
}
/* WDS RadarChart — 토큰 전용(DD-4). 시리즈 색은 차트 토큰 인라인(var(--wds-chart-N)). */
._root_g11ay_2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wds-space-3);
  margin: 0;
}

._svg_g11ay_10 {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 격자 링(폴리곤) — 채움 없음, 옅은 보더. */
._ring_g11ay_17 {
  fill: none;
  stroke: var(--wds-color-border);
  stroke-width: 1;
}

/* 축 스포크. */
._spoke_g11ay_24 {
  stroke: var(--wds-color-border);
  stroke-width: 1;
}

/* 시리즈 면적 — fill/stroke는 톤 인라인, 외곽선만 두껍게. */
._area_g11ay_30 {
  stroke-width: 2;
  stroke-linejoin: round;
}

/* 시리즈 정점 마커 — fill은 톤 인라인, surface 분리링으로 겹친 채움 위에서 분리. */
._marker_g11ay_36 {
  stroke: var(--wds-color-surface);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* 레벨 값 라벨(상단 축) — surface 헤일로로 데이터 위에서 가독. */
._levelLabel_g11ay_43 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-label-s);
  fill: var(--wds-color-text-muted);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--wds-color-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* 축 라벨. */
._axisLabel_g11ay_55 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  fill: var(--wds-color-text);
}

/* 범례. */
._legend_g11ay_63 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wds-space-4);
}

._legendItem_g11ay_70 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
}

._swatch_g11ay_79 {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  overflow: visible;
  flex: none;
}

/* sr-only 데이터 표 — 정본. 시각만 aria-hidden. */
._srTable_g11ay_88 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

._caption_g11ay_100 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  line-height: normal;
  color: var(--wds-color-text-muted);
}
/* WDS RadioGroup — 토큰 전용(DD-4). 선택 도트는 transform scale(compositor)만. */
._group_1ml2h_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
}

._radio_1ml2h_8 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-height: var(--wds-space-8);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wds-color-text);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
  position: relative;
}
/* 시각 32px 행 유지 + 히트 영역을 control.height-md(44px)로 확장 — IconButton/Switch와 동일.
   inset이 음수가 되어(=(32-44)/2) 위아래로 넘쳐 44px 터치 타깃을 만든다(§5 모바일 가이드).
   행 최소 높이(space.8)가 두 size 공통이므로 sm에서도 44px가 그대로 보장된다. */
._radio_1ml2h_8::after {
  content: '';
  position: absolute;
  inset: calc((var(--wds-space-8) - var(--wds-control-height-md)) / 2);
}
._radio_1ml2h_8:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wds-radius-sm);
}
._radio_1ml2h_8:disabled {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}
._radio_1ml2h_8:hover:not(:disabled) ._control_1ml2h_41 {
  border-color: var(--wds-color-primary);
}

._control_1ml2h_41 {
  flex: none;
  position: relative;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  border: 1px solid var(--wds-color-border-strong);
  border-radius: 50%;
  background: var(--wds-color-surface);
  transition: border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 선택 도트 — 컨트롤의 50% 크기, scale 등장 */
._control_1ml2h_41::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--wds-color-primary);
  transform: scale(0);
  transition: transform var(--wds-duration-fast) var(--wds-ease-standard);
}
._radio_1ml2h_8[aria-checked='true'] ._control_1ml2h_41 {
  border-color: var(--wds-color-primary);
}
._radio_1ml2h_8[aria-checked='true'] ._control_1ml2h_41::after {
  transform: scale(1);
}
._radio_1ml2h_8:disabled ._control_1ml2h_41 {
  background: var(--wds-color-surface-muted);
  border-color: var(--wds-color-border);
}
._radio_1ml2h_8:disabled ._control_1ml2h_41::after {
  background: var(--wds-color-text-placeholder);
}

._label_1ml2h_79 {
  min-width: 0;
}

/* sm 크기 (ADR-012 B-P2) — 컨트롤 icon.size-sm + body-2 라벨. 도트(::after)는 비율 유지 */
._group_1ml2h_2[data-size='sm'] ._control_1ml2h_41 {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}
._group_1ml2h_2[data-size='sm'] ._radio_1ml2h_8 {
  font-size: var(--wds-font-size-body-2);
}

@media (prefers-reduced-motion: reduce) {
  ._control_1ml2h_41,
  ._control_1ml2h_41::after {
    transition: none;
  }
}
/* WDS RangeSlider — 토큰 전용(DD-4). 두 네이티브 range를 겹쳐 두-썸 범위를 구성.
   기하(채움 트랙 left/right %)만 인라인 스타일로 허용, 색·치수는 토큰. */
._root_13y5k_3 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
  width: 100%;
}

/* 두 input + 채움 트랙을 같은 좌표에 겹치는 컨테이너 */
._field_13y5k_11 {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--wds-control-height-md); /* 44px 히트 — 썸보다 큰 터치 타깃 */
}

/* 공통 회색 트랙 — 두 input 아래에 깔리는 배경 */
._track_13y5k_19 {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--wds-space-1);
  margin-top: calc(var(--wds-space-1) / -2);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border);
  pointer-events: none;
}

/* 두 썸 사이 채움 — primary. left/right 인셋은 인라인(%)로 주입 */
._fill_13y5k_31 {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-primary);
}

/* 겹친 두 input — 트랙 위에 절대배치. 트랙 배경은 투명(공통 .track이 담당),
   썸만 보이게 한다. 트랙 영역의 포인터는 통과시키고 썸에서만 잡는다. */
._input_13y5k_41 {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none; /* 트랙 영역 클릭은 통과 — 두 input 겹침에도 양쪽 썸 조작 가능 */
}
._input_13y5k_41:focus-visible {
  outline: none; /* 링은 썸에 그린다 */
}

/* 높은 값 input을 위에 — 두 썸이 겹칠 때도 high 썸을 잡을 수 있게 */
._high_13y5k_58 {
  z-index: 2;
}
._low_13y5k_61 {
  z-index: 1;
}
/* 두 썸이 겹쳤을 때 낮은 값 썸을 위로 — 포인터로 잡아 왼쪽으로 끌 수 있게 */
._low_13y5k_61[data-on-top] {
  z-index: 3;
}

/* ── WebKit ── */
._input_13y5k_41::-webkit-slider-runnable-track {
  height: var(--wds-space-1);
  background: transparent;
}
._input_13y5k_41::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  /* 4px 트랙 중심 정렬: (4px - 20px) / 2 */
  margin-top: calc((var(--wds-space-1) - var(--wds-icon-size-md)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--wds-color-primary);
  box-shadow: var(--wds-shadow-sm);
  pointer-events: auto; /* 썸만 잡는다 */
  cursor: pointer;
}
._input_13y5k_41:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._root_13y5k_3[data-disabled] ._input_13y5k_41::-webkit-slider-thumb {
  background: var(--wds-color-text-placeholder);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Firefox ── */
._input_13y5k_41::-moz-range-track {
  height: var(--wds-space-1);
  background: transparent;
}
._input_13y5k_41::-moz-range-thumb {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  border: 0;
  border-radius: 50%;
  background: var(--wds-color-primary);
  box-shadow: var(--wds-shadow-sm);
  pointer-events: auto;
  cursor: pointer;
}
._input_13y5k_41:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._root_13y5k_3[data-disabled] ._input_13y5k_41::-moz-range-thumb {
  background: var(--wds-color-text-placeholder);
  box-shadow: none;
  cursor: not-allowed;
}

/* 비활성 — 트랙·채움 가라앉힘 */
._root_13y5k_3[data-disabled] ._track_13y5k_19 {
  background: var(--wds-color-border-subtle);
}
._root_13y5k_3[data-disabled] ._fill_13y5k_31 {
  background: var(--wds-color-text-placeholder);
}

._value_13y5k_129 {
  flex: none;
  /* "100 – 100" 기준 최소 폭 — 라벨 갱신 시 레이아웃 시프트 방지 */
  min-width: 7ch;
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
}
/* WDS ReorderList — keyboard-first reorder with pointer FLIP enhancement. */
._root_wj1fh_2 {
  width: 100%;
}

._list_wj1fh_6 {
  display: grid;
  gap: var(--wds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

._item_wj1fh_14 {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--wds-space-3);
  min-height: var(--wds-space-12);
  padding: var(--wds-space-2) var(--wds-space-3);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  background: var(--wds-color-surface);
  color: var(--wds-color-text);
  transition:
    transform var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast),
    background-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast),
    border-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast),
    box-shadow var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast);
}

._item_wj1fh_14[data-drop-target='true'] {
  border-color: var(--wds-color-primary);
  background: var(--wds-color-primary-subtle);
}

._item_wj1fh_14[data-dragging='true'] {
  z-index: 1;
  border-color: var(--wds-color-primary);
  box-shadow: var(--wds-shadow-md);
  will-change: transform;
}

._item_wj1fh_14[data-disabled='true'] {
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
}

._handle_wj1fh_50 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-10);
  height: var(--wds-space-10);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: grab;
  touch-action: none;
}

._handle_wj1fh_50:hover:not(:disabled) {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}

._handle_wj1fh_50:active:not(:disabled) {
  cursor: grabbing;
  background: var(--wds-color-surface-pressed);
}

._handle_wj1fh_50:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._handle_wj1fh_50:disabled {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

._handleIcon_wj1fh_85 {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._content_wj1fh_90 {
  min-width: 0;
}

._srOnly_wj1fh_94 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._item_wj1fh_14 {
    transition: none;
  }
}
._root_12r2m_1 {
  position: fixed;
  inset: 0;
  z-index: var(--wds-z-modal);
}

._overlay_12r2m_7 {
  position: absolute;
  inset: 0;
  background: var(--wds-color-overlay);
}

._panel_12r2m_13 {
  position: relative;
  margin: 15vh auto 0;
  width: min(560px, calc(100vw - var(--wds-space-8)));
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
  box-shadow: var(--wds-shadow-xl);
  overflow: hidden;
}

._inputRow_12r2m_24 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
  padding: var(--wds-space-3) var(--wds-space-4);
  border-bottom: 2px solid var(--wds-color-border-subtle);
  transition: border-color var(--wds-duration-fast) var(--wds-ease-standard);
}

._inputRow_12r2m_24:focus-within {
  border-bottom-color: var(--wds-color-focus-ring);
}

._inputIcon_12r2m_37 {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-subtle);
  flex-shrink: 0;
}

._input_12r2m_24 {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--wds-font-size-body-1);
  color: var(--wds-color-text);
}

._input_12r2m_24::placeholder {
  color: var(--wds-color-text-placeholder);
}

._closeButton_12r2m_58 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wds-space-8);
  min-height: var(--wds-space-8);
  border: none;
  border-radius: var(--wds-radius-sm);
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
  cursor: pointer;
}

._closeButton_12r2m_58:hover {
  color: var(--wds-color-text);
}

._closeDesktop_12r2m_75 {
  font-family: var(--wds-font-mono);
  font-size: var(--wds-font-size-caption);
  line-height: 1;
}

._closeMobile_12r2m_81 {
  display: none;
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

._body_12r2m_87 {
  max-height: 50vh;
  overflow-y: auto;
}

._message_12r2m_92 {
  padding: var(--wds-space-8) var(--wds-space-4);
  text-align: center;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-subtle);
}

._groupHeading_12r2m_99 {
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wds-color-text-subtle);
  padding: var(--wds-space-3) var(--wds-space-4) 0;
}

._results_12r2m_108 {
  padding: var(--wds-space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._result_12r2m_108 {
  display: flex;
  align-items: stretch;
  border-radius: var(--wds-radius-sm);
}

._resultSection_12r2m_121 {
  margin-left: var(--wds-space-6);
}

._resultActive_12r2m_125 {
  background: var(--wds-color-surface-selected);
}

._resultButton_12r2m_129 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
  flex: 1;
  min-width: 0;
  padding: var(--wds-space-2) var(--wds-space-3);
  border: none;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

._resultButton_12r2m_129[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.56;
}

._resultNum_12r2m_149,
._resultTreeIcon_12r2m_150 {
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-placeholder);
  flex-shrink: 0;
  width: var(--wds-space-4);
  text-align: center;
}

._resultIcon_12r2m_158 {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
  color: var(--wds-color-text-placeholder);
  flex-shrink: 0;
}

._resultActive_12r2m_125 ._resultNum_12r2m_149,
._resultActive_12r2m_125 ._resultTreeIcon_12r2m_150,
._resultActive_12r2m_125 ._resultIcon_12r2m_158 {
  color: var(--wds-color-primary-text);
}

._resultBody_12r2m_171 {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

._resultTitle_12r2m_178 {
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text);
}

._resultActive_12r2m_125 ._resultTitle_12r2m_178 {
  color: var(--wds-color-primary-text);
}

._resultMatchLabel_12r2m_188 {
  margin-top: 1px;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

._resultSummary_12r2m_194 {
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._resultBadge_12r2m_202 {
  align-self: center;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-caption);
  padding: 0 var(--wds-space-2);
  flex-shrink: 0;
}

._mark_12r2m_212 {
  background: transparent;
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--wds-blue-100);
  text-underline-offset: 2px;
}

._removeButton_12r2m_221 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  border: none;
  border-radius: var(--wds-radius-sm);
  background: transparent;
  color: var(--wds-color-text-placeholder);
  cursor: pointer;
  flex-shrink: 0;
}

._removeButton_12r2m_221:hover {
  color: var(--wds-color-error);
  background: var(--wds-color-surface-muted);
}

._footerHints_12r2m_239 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-4);
  padding: var(--wds-space-2) var(--wds-space-4);
  border-top: 1px solid var(--wds-color-border-subtle);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-subtle);
}

._footerHints_12r2m_239 span {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-1);
}

._kbd_12r2m_255 {
  font-family: var(--wds-font-mono);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
  background: var(--wds-color-surface-muted);
  border-radius: var(--wds-radius-sm);
  padding: 0 var(--wds-space-1);
  line-height: 1.7;
}

@media (max-width: 767px) {
  ._overlay_12r2m_7 {
    display: none;
  }

  ._panel_12r2m_13 {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  ._inputRow_12r2m_24 {
    padding: var(--wds-space-3);
    min-height: calc(var(--wds-space-12) + var(--wds-space-2));
  }

  ._closeDesktop_12r2m_75,
  ._footerHints_12r2m_239 {
    display: none;
  }

  ._closeMobile_12r2m_81 {
    display: block;
  }

  ._body_12r2m_87 {
    flex: 1;
    max-height: none;
  }

  ._resultSection_12r2m_121 {
    margin-left: var(--wds-space-4);
  }
}
/* WDS SearchField — 토큰 전용(DD-4). Input과 동일한 포커스 링 어휘. */
._wrap_1ni9d_2 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3) var(--wds-space-2);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._wrap_1ni9d_2:focus-within {
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

._disabled_1ni9d_20 {
  background: var(--wds-input-bg-disabled);
}

._leading_1ni9d_24 {
  display: inline-flex;
  align-items: center;
  color: var(--wds-color-text-subtle);
  flex: none;
}
._leading_1ni9d_24 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._input_1ni9d_35 {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--wds-input-fg);
  font: inherit;
}
._input_1ni9d_35::placeholder {
  color: var(--wds-input-placeholder);
}
._input_1ni9d_35:disabled {
  cursor: not-allowed;
}
/* 네이티브 webkit 지우기 버튼 숨김 — 커스텀 clear 버튼으로 대체 */
._input_1ni9d_35::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

._clear_1ni9d_57 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._clear_1ni9d_57::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._clear_1ni9d_57:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._clear_1ni9d_57:active {
  background: var(--wds-color-surface-pressed);
}
._clear_1ni9d_57:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._clear_1ni9d_57 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  ._wrap_1ni9d_2,
  ._clear_1ni9d_57 {
    transition: none;
  }
}
/* WDS SegmentedButton — 토큰 전용(DD-4). 연결형 선택 컨트롤:
   눌린 회색 트랙 위에 뜬 흰 active tile이 스프링으로 미끄러진다. 타일 그림자가 보이도록 트랙은
   클리핑하지 않고, 세그먼트 면(hover/pressed·multi 눌림)은 ::before inset 알약으로 그려 트랙
   모서리 침범을 막는다. 브랜드/강조는 선택된 *텍스트*(primary-text)가 담당.
   inset 알약 반경 = 트랙 반경 − 3px 인셋(동심). DD-4가 로컬 var를 막아 calc를 각 곳에 인라인. */
._track_7i8iq_6 {
  position: relative; /* thumb의 offsetParent + 절대 위치 기준 */
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-control);
  /* 눌린 트랙 — 패널(surface-muted=gray-100)보다 한 단계 어두운 회색(≈gray-200)이라야 같은 색
     패널 위에서도 트랙 영역이 보인다. surface-muted는 패널과 동일색이라 묻혔다(WDS에 전용 sunken
     토큰이 없어 surface-pressed의 gray-200 톤을 차용 — 다크는 아래 override가 surface로 교체). */
  background: var(--wds-color-surface-pressed);
}

/* 슬라이딩 active tile — 눌린 트랙(z 0) 위에 뜬 중립 흰 타일. 보이는 그림자로 "떠 있음"이 읽힌다.
   x는 인라인 CSS 변수(--seg-thumb-x), width는 인라인. 슬라이드/누름은 스프링(살짝 정착). */
._thumb_7i8iq_20 {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border-subtle);
  border-radius: calc(var(--wds-radius-control) - 3px);
  box-shadow: var(--wds-shadow-md); /* 미클립 소프트 드롭 — 타일이 또렷이 떠 보인다 */
  transform: translateX(var(--seg-thumb-x, 0)) scale(var(--seg-thumb-press, 1));
  transform-origin: center;
  transition:
    transform var(--wds-thumb-motion-duration, var(--wds-spring-spatial-fast-duration)) var(--wds-spring-spatial-fast),
    width var(--wds-thumb-motion-duration, var(--wds-spring-spatial-fast-duration)) var(--wds-spring-spatial-fast);
  pointer-events: none;
}

/* 누름 피드백 — 선택 세그먼트를 누르면 타일이 살짝 수축한다. 위치(translateX)는 보존. */
._track_7i8iq_6:has(._segment_7i8iq_40[aria-checked='true']:active) ._thumb_7i8iq_20 {
  --seg-thumb-press: 0.94;
}

/* 다크 재스코프 — surface/surface-muted는 테마 간 명도 관계가 뒤집힌다(다크에선 muted가 더 밝음).
   "타일 = 더 밝은 면" 불변식을 지키려 다크에선 트랙=어두운 surface, 타일=밝은 surface-muted로
   교환한다(css-var 중첩 재테마 규약: 데모 패널 다크 스코프에도 적용). */
[data-theme='dark'] ._track_7i8iq_6 {
  background: var(--wds-color-surface);
  border-color: var(--wds-color-border-subtle);
}
[data-theme='dark'] ._thumb_7i8iq_20 {
  background: var(--wds-color-surface-muted);
  border-color: var(--wds-color-border-strong);
}

._segment_7i8iq_40 {
  position: relative;
  z-index: 1; /* 텍스트가 타일·면 레이어 위에 읽힌다 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--wds-control-height-md);
  padding-inline: var(--wds-space-4);
  border: 0;
  background: transparent; /* 면은 ::before 알약으로만 채운다 */
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--wds-duration-fast) var(--wds-ease-standard);
}

/* 세그먼트 면 레이어 — 타일과 같은 모양의 inset 알약. hover/pressed(중립)·multi 눌림(primary)에 쓴다.
   inset이라 트랙 모서리를 침범하지 않아 클리핑이 불필요하다. 텍스트 뒤(z -1). */
._segment_7i8iq_40::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: calc(var(--wds-radius-control) - 3px);
  background: transparent;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
  pointer-events: none;
}

._segment_7i8iq_40:hover:not(:disabled):not([aria-checked='true']):not([aria-pressed='true']) {
  color: var(--wds-color-text);
}
/* hover/pressed = 중립 상태 레이어(text 틴트). 트랙이 surface-pressed(gray-200)라 솔리드 면색은
   충돌하므로, 트랙 색과 무관히 대비되는 반투명 오버레이로 둔다(라이트=어둡게·다크=밝게, 테마 정합). */
._segment_7i8iq_40:hover:not(:disabled):not([aria-checked='true']):not([aria-pressed='true'])::before {
  background: color-mix(in srgb, var(--wds-color-text) 5%, transparent);
}
._segment_7i8iq_40:active:not(:disabled):not([aria-checked='true']):not([aria-pressed='true'])::before {
  background: color-mix(in srgb, var(--wds-color-text) 9%, transparent);
}

._segment_7i8iq_40:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: -2px;
  border-radius: calc(var(--wds-radius-control) - 3px);
}

/* 눌림(multi) — thumb 없이 세그먼트 면을 primary 틴트 알약으로 채움(::before, inset) */
._segment_7i8iq_40[aria-pressed='true'] {
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-semibold);
}
._segment_7i8iq_40[aria-pressed='true']::before {
  background: var(--wds-color-primary-subtle);
}

/* 선택(single) — 슬라이딩 흰 타일이 면을 제공 → 세그먼트는 투명, 텍스트만 브랜드 강조 */
._segment_7i8iq_40[aria-checked='true'] {
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-semibold);
}

._segment_7i8iq_40:disabled {
  color: var(--wds-color-disabled-fg);
  cursor: not-allowed;
}
._segment_7i8iq_40:disabled::before {
  background: var(--wds-color-disabled-bg);
}

/* sm 크기 (ADR-012 B-P2 패리티) — 낮은 높이·여백·폰트 + inset 알약 반경 축소 */
._track_7i8iq_6[data-size='sm'] {
  border-radius: var(--wds-radius-control-sm);
}
._track_7i8iq_6[data-size='sm'] ._thumb_7i8iq_20,
._track_7i8iq_6[data-size='sm'] ._segment_7i8iq_40::before,
._track_7i8iq_6[data-size='sm'] ._segment_7i8iq_40:focus-visible {
  border-radius: calc(var(--wds-radius-control-sm) - 3px);
}
._track_7i8iq_6[data-size='sm'] ._segment_7i8iq_40 {
  height: var(--wds-control-height-sm);
  padding-inline: var(--wds-space-3);
  font-size: var(--wds-font-size-body-2);
}
/* 시각 32px(sm) — 블록 축 히트 영역 44px 확장: (44 - 32) / 2 = space-3 / 2 (IconButton §5 미러).
   세그먼트는 연결된 트랙이라 인라인 축은 인접 세그먼트와 겹치지 않게 확장하지 않는다. */
._track_7i8iq_6[data-size='sm'] ._segment_7i8iq_40::after {
  content: '';
  position: absolute;
  inset-block: calc(-1 * (var(--wds-space-3) / 2));
  inset-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._segment_7i8iq_40,
  ._segment_7i8iq_40::before,
  ._thumb_7i8iq_20 {
    transition: none;
  }
}
/* WDS Select — 토큰 전용(DD-4). 트리거는 Input 어휘, 팝업은 dropdown 어휘. */
._root_mdwix_2 {
  position: relative;
  display: inline-block;
  /* 컴포넌트 고유 레이아웃 값 — 옵션 라벨 기준 최소 폭 (Modal 폭과 동일 지위) */
  min-width: 14rem;
}

._trigger_mdwix_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-2);
  width: 100%;
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
  /* 빠른/더블 클릭 시 라벨 텍스트 선택 방지 (리스트형 팝업 공통) */
  user-select: none;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._trigger_mdwix_9:focus-visible {
  outline: none;
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._trigger_mdwix_9:disabled {
  background: var(--wds-input-bg-disabled);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

/* ── 크기 (size) ── md는 .trigger 기본(control-height-md). sm·lg만 모디파이어.
   Input .sm/.lg와 동일 스케일(높이·패딩·폰트). */
._sm_mdwix_44 {
  height: var(--wds-control-height-sm);
  padding-inline: var(--wds-space-2);
  font-size: var(--wds-font-size-body-2);
}
._lg_mdwix_44 {
  height: var(--wds-control-height-lg);
  padding-inline: var(--wds-space-4);
}

/* ── 검증 실패 (invalid) ── Input과 동일 어휘(에러 보더 + 에러 포커스 링). */
._invalid_mdwix_56 {
  border-color: var(--wds-input-border-invalid);
}
._invalid_mdwix_56:focus-visible {
  border-color: var(--wds-input-border-invalid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-error) 18%, transparent);
}

._value_mdwix_64 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._placeholder_mdwix_71 {
  color: var(--wds-input-placeholder);
}

._chevron_mdwix_75 {
  flex: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-subtle);
  transition: transform var(--wds-duration-fast) var(--wds-ease-standard);
}
._open_mdwix_82 ._chevron_mdwix_75 {
  transform: rotate(180deg);
}

._list_mdwix_86 {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  margin: 0;
  padding: var(--wds-space-1);
  list-style: none;
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  /* 약 6옵션 상한 — 초과분은 내부 스크롤 */
  max-height: min(16rem, var(--wds-select-available-block-size, 16rem));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wds-color-border-strong) transparent;
  user-select: none;
  transform: translateX(var(--wds-select-shift-x, 0px));
  animation: _list-in_mdwix_1 var(--wds-duration-fast) var(--wds-ease-out);
}
._flipped_mdwix_107 {
  top: auto;
  bottom: calc(100% + var(--wds-space-1));
}

/* 옵션 행 — 리스트형 팝업 공통 어휘(40px 행·inline 12px·gap 8px·radius sm) */
._option_mdwix_113 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-height: var(--wds-space-10);
  padding-inline: var(--wds-space-3);
  border-radius: var(--wds-radius-sm);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
}
._option_mdwix_113[aria-selected='true'] {
  background: var(--wds-color-surface-selected);
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-medium);
}
._active_mdwix_130 {
  background: var(--wds-color-surface-hover);
}
._active_mdwix_130[aria-selected='true'] {
  background: var(--wds-color-surface-selected);
}
/* 눌림 — neutral 면에만 pressed. 선택(surface-selected) 행은 유지 */
._option_mdwix_113:active:not([aria-selected='true']):not(._optionDisabled_mdwix_137) {
  background: var(--wds-color-surface-pressed);
}
._optionDisabled_mdwix_137 {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

/* 그룹 헤더 — 비대화(role=presentation). 옵션 행보다 작은 라벨, 클릭/호버 없음 */
._groupHeader_mdwix_146 {
  display: flex;
  align-items: center;
  min-height: var(--wds-space-8);
  padding-inline: var(--wds-space-3);
  color: var(--wds-color-text-subtle);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}
/* 첫 헤더가 아니면 위 그룹과 시각적 구분 */
._groupHeader_mdwix_146:not(:first-child) {
  margin-top: var(--wds-space-1);
}

/* mobile 모드 — BottomSheet body 안의 옵션 리스트 (포지셔닝 없음, DK 표준) */
._sheetList_mdwix_164 {
  margin: 0;
  padding: 0;
  list-style: none;
}

._sheetOption_mdwix_170 {
  /* 모바일 히트 타깃 — input.height(44px)와 동일 어휘 */
  min-height: var(--wds-input-height);
}
._sheetOption_mdwix_170:hover {
  background: var(--wds-color-surface-hover);
}

@keyframes _list-in_mdwix_1 {
  from {
    opacity: 0;
    transform: translateX(var(--wds-select-shift-x, 0px)) translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._trigger_mdwix_9,
  ._chevron_mdwix_75 {
    transition: none;
  }
  ._list_mdwix_86 {
    animation: none;
  }
}
/* WDS Separator — 토큰 전용(DD-4). 1px 헤어라인 — color.border 소비. */
._separator_iv2ca_2 {
  flex-shrink: 0;
  background: var(--wds-color-border);
}

._horizontal_iv2ca_7 {
  width: 100%;
  height: 1px;
}

._vertical_iv2ca_12 {
  width: 1px;
  height: 100%;
  /* 플렉스 컨테이너 안에서는 부모 높이 지정 없이도 늘어나도록 */
  align-self: stretch;
}
/* WDS SkeletonCard — 토큰 전용(DD-4). Card 실루엣(border·radius·surface) + 본문 패딩 레이아웃 */
._card_dyjvx_2 {
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-lg);
  overflow: hidden;
}

._body_dyjvx_9 {
  padding: var(--wds-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-3);
}
/* WDS SkeletonImage — 토큰 전용(DD-4). 이미지/썸네일 aspect-ratio 플레이스홀더. */

._root_16ksw_3 {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Skeleton 프리미티브가 컨테이너를 가득 채우도록 절대 포지셔닝 */
._fill_16ksw_11 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* 중앙 장식 글리프 — 절대 중앙 배치, pointer-events 없음 */
._icon_16ksw_20 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--wds-space-6);
  height: var(--wds-space-6);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Skeleton 프리미티브가 자체 reduced-motion 처리 담당 — 여기선 pass-through */
}
/* WDS SkeletonList — 토큰 전용(DD-4). 반복 행 리스트 레이아웃 플레이스홀더 */

._list_nfknm_3 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-4);
}

/* divided 모드: gap 제거 후 border-top 구분선으로 대체 */
._divided_nfknm_10 {
  gap: 0;
}

._divided_nfknm_10 ._row_nfknm_14 {
  padding-block: var(--wds-space-4);
}

._divided_nfknm_10 ._row_nfknm_14:first-child {
  padding-block-start: 0;
}

._divided_nfknm_10 ._row_nfknm_14:last-child {
  padding-block-end: 0;
}

._divided_nfknm_10 ._row_nfknm_14 + ._row_nfknm_14 {
  border-top: 1px solid var(--wds-color-border);
  margin-top: 0;
}

._row_nfknm_14 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--wds-space-3);
}

._lines_nfknm_38 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
}
/* WDS SkeletonLoadable — 토큰 전용(DD-4). 로딩→콘텐츠 전환 컨테이너. */
._root_td3my_2 {
  display: contents;
}

/* 시각적으로 숨긴 라이브 리전 — 스크린리더 전용 알림 채널(CopyButton 패턴과 동일) */
._srOnly_td3my_7 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 실콘텐츠 래퍼 — loaded=true일 때 opacity 0→1 fade-in */
._content_td3my_20 {
  animation: _wds-loadable-fadein_td3my_1 var(--wds-duration-normal, 200ms) var(--wds-ease-standard) both;
}

@keyframes _wds-loadable-fadein_td3my_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._content_td3my_20 {
    animation: none;
  }
}
/* WDS SkeletonMedia — 토큰 전용(DD-4). 아바타+텍스트 미디어 오브젝트 레이아웃. */
._root_1r9n1_2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--wds-space-3);
}

._body_1r9n1_9 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--wds-space-2);
}
/* WDS SkeletonTable — 토큰 전용(DD-4). 데이터 테이블 레이아웃 플레이스홀더. */

/* 루트: CSS 그리드 컨테이너 — gridTemplateColumns는 인라인 스타일로 주입 */
._root_9aovw_4 {
  display: grid;
  width: 100%;
}

/* 헤더 셀 — Table .th에 맞춤: padding·background·border-bottom */
._headerCell_9aovw_10 {
  padding: var(--wds-space-3) var(--wds-space-4);
  background: var(--wds-color-surface-container-high);
  border-bottom: 1px solid var(--wds-color-border);
}

/* 바디 셀 — Table .td에 맞춤: padding·border-bottom */
._bodyCell_9aovw_17 {
  padding: var(--wds-space-3) var(--wds-space-4);
  border-bottom: 1px solid var(--wds-color-border);
}

@media (prefers-reduced-motion: reduce) {
  /* 자식 Skeleton의 reduced-motion 처리는 Skeleton.module.css에 위임 */
}
/* WDS SkeletonText — 토큰 전용(DD-4). 단락 플레이스홀더: flex 컬럼으로 줄 쌓기. */
._root_7q8xh_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
}
/* WDS Slider — 토큰 전용(DD-4). 네이티브 range의 트랙/썸만 토큰으로 재스킨. */
._root_aqtkf_2 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-3);
  width: 100%;
}

._input_aqtkf_9 {
  flex: 1;
  min-width: 0;
  height: var(--wds-control-height-md); /* 44px 히트 — 썸보다 큰 터치 타깃 */
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
._input_aqtkf_9:disabled {
  cursor: not-allowed;
}
._input_aqtkf_9:focus-visible {
  outline: none; /* 링은 썸에 그린다 */
}

/* ── WebKit ── */
._input_aqtkf_9::-webkit-slider-runnable-track {
  height: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border);
}
._input_aqtkf_9::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  /* 4px 트랙 중심 정렬: (4px - 20px) / 2 */
  margin-top: calc((var(--wds-space-1) - var(--wds-icon-size-md)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--wds-color-primary);
  box-shadow: var(--wds-shadow-sm);
}
._input_aqtkf_9:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._input_aqtkf_9:disabled::-webkit-slider-thumb {
  background: var(--wds-color-text-placeholder);
  box-shadow: none;
}
._input_aqtkf_9:disabled::-webkit-slider-runnable-track {
  background: var(--wds-color-border-subtle);
}

/* ── Firefox ── */
._input_aqtkf_9::-moz-range-track {
  height: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border);
}
._input_aqtkf_9::-moz-range-thumb {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  border: 0;
  border-radius: 50%;
  background: var(--wds-color-primary);
  box-shadow: var(--wds-shadow-sm);
}
._input_aqtkf_9:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}
._input_aqtkf_9:disabled::-moz-range-thumb {
  background: var(--wds-color-text-placeholder);
  box-shadow: none;
}
._input_aqtkf_9:disabled::-moz-range-track {
  background: var(--wds-color-border-subtle);
}

._value_aqtkf_80 {
  flex: none;
  /* 3자리 값(100) 기준 최소 폭 — 라벨 갱신 시 레이아웃 시프트 방지 */
  min-width: 3ch;
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text-muted);
}
/* 초소형 무축 차트 — 색은 단일 토큰 --wds-spark-color(컴포넌트가 trend/color에서 인라인 주입). */
._root_1bty8_2 {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}

/* 선 — viewBox 1:1(스케일 없음)이라 stroke-width가 곧 px. 부드러운 캡/조인. */
._line_1bty8_9 {
  fill: none;
  stroke: var(--wds-spark-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 영역 — 저불투명 채움(선 아래). */
._area_1bty8_18 {
  fill: var(--wds-spark-color);
  opacity: 0.16;
}

/* 막대 — 채움 단색. */
._bar_1bty8_24 {
  fill: var(--wds-spark-color);
}

/* 마지막 강조 점 — 선/영역 끝값. */
._lastPoint_1bty8_29 {
  fill: var(--wds-spark-color);
}
/* WDS Split — 토큰 전용. 좌 52% / 우 48%, compact(<600px)에서 세로 적층. */
._split_fyp77_2 {
  display: flex;
  gap: var(--wds-split-gap, 0);
}

._split_fyp77_2 > :first-child {
  flex: 0 1 var(--wds-split-left);
  min-width: 0;
}

._split_fyp77_2 > :nth-child(2) {
  flex: 0 1 var(--wds-split-right);
  min-width: 0;
}

/* compact 경계 — ADR-012 BP.compact(600px). 셸 CSS↔SSOT 정합은 드리프트 가드가 검증. */
@media (max-width: 599.98px) {
  ._split_fyp77_2 {
    flex-direction: column;
  }

  ._split_fyp77_2 > :first-child,
  ._split_fyp77_2 > :nth-child(2) {
    flex-basis: auto;
  }
}
/* WDS Splitter — 토큰 전용(DD-4). 구분선 하이라이트는 background/color 전환만. */
._root_omh0j_2 {
  display: flex;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
._horizontal_omh0j_8 {
  flex-direction: row;
}
._vertical_omh0j_11 {
  flex-direction: column;
}
/* 드래그 중 텍스트 선택 방지 — 패널 콘텐츠까지 전파 */
._dragging_omh0j_15 {
  user-select: none;
  -webkit-user-select: none;
}

._panel_omh0j_20 {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  /* 패널은 항상 단일 자식 — 그 자식이 패널을 채우게 한다(콘텐츠가 콘텐츠-높이로 떠
     구분선만 풀 높이로 overhang하는 것 방지). 구성과 정렬: 데모 스테이지 통일/동일 높이. */
  display: flex;
  flex-direction: column;
}
._panel_omh0j_20 > * {
  flex: 1 1 auto;
  min-height: 0;
}
._grow_omh0j_35 {
  flex: 1 1 0;
  flex-basis: 0;
}

/* ── 구분선 — 시각 8px 트랙 + 중앙 2px 라인(::before) + 44px 히트(::after) ── */
._separator_omh0j_41 {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
._horizontal_omh0j_8 > ._separator_omh0j_41 {
  width: var(--wds-space-2);
  cursor: col-resize;
}
._vertical_omh0j_11 > ._separator_omh0j_41 {
  height: var(--wds-space-2);
  cursor: row-resize;
}
/* 시각 8px 트랙 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._separator_omh0j_41::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
/* 중앙 라인 */
._separator_omh0j_41::before {
  content: '';
  position: absolute;
  background: var(--wds-color-border);
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._horizontal_omh0j_8 > ._separator_omh0j_41::before {
  inset-block: 0;
  inline-size: 2px;
}
._vertical_omh0j_11 > ._separator_omh0j_41::before {
  inset-inline: 0;
  block-size: 2px;
}

/* hover/active/focus — primary 하이라이트 (라인 + 핸들 점) */
._separator_omh0j_41:hover::before,
._separator_omh0j_41:active::before,
._separator_omh0j_41:focus-visible::before {
  background: var(--wds-color-primary);
}
._separator_omh0j_41:hover ._handle_omh0j_85,
._separator_omh0j_41:active ._handle_omh0j_85,
._separator_omh0j_41:focus-visible ._handle_omh0j_85 {
  background: var(--wds-color-primary);
}
._separator_omh0j_41:hover ._handle_omh0j_85::before,
._separator_omh0j_41:hover ._handle_omh0j_85::after,
._separator_omh0j_41:active ._handle_omh0j_85::before,
._separator_omh0j_41:active ._handle_omh0j_85::after,
._separator_omh0j_41:focus-visible ._handle_omh0j_85::before,
._separator_omh0j_41:focus-visible ._handle_omh0j_85::after {
  background: var(--wds-color-primary);
}
._separator_omh0j_41:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wds-radius-sm);
}

/* ── 핸들 점 3개 — 가운데 점 실요소 + 양옆 ::before/::after ── */
._handle_omh0j_85 {
  position: relative;
  z-index: 1;
  width: var(--wds-space-1);
  height: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border-strong);
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._handle_omh0j_85::before,
._handle_omh0j_85::after {
  content: '';
  position: absolute;
  width: var(--wds-space-1);
  height: var(--wds-space-1);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-border-strong);
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._horizontal_omh0j_8 > ._separator_omh0j_41 ._handle_omh0j_85::before {
  top: calc(-1 * var(--wds-space-2));
  left: 0;
}
._horizontal_omh0j_8 > ._separator_omh0j_41 ._handle_omh0j_85::after {
  bottom: calc(-1 * var(--wds-space-2));
  left: 0;
}
._vertical_omh0j_11 > ._separator_omh0j_41 ._handle_omh0j_85::before {
  left: calc(-1 * var(--wds-space-2));
  top: 0;
}
._vertical_omh0j_11 > ._separator_omh0j_41 ._handle_omh0j_85::after {
  right: calc(-1 * var(--wds-space-2));
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._separator_omh0j_41::before,
  ._handle_omh0j_85,
  ._handle_omh0j_85::before,
  ._handle_omh0j_85::after {
    transition: none;
  }
}
/* WDS Stack — 토큰 전용. gap은 --wds-stack-gap(소비자가 --wds-space-* 주입)으로 백킹. */
._stack_w11ps_2 {
  display: flex;
  gap: var(--wds-stack-gap, 0);
}

._vertical_w11ps_7 {
  flex-direction: column;
}

._horizontal_w11ps_11 {
  flex-direction: row;
}

._wrap_w11ps_15 {
  flex-wrap: wrap;
}

._align-start_w11ps_19 {
  align-items: flex-start;
}

._align-center_w11ps_23 {
  align-items: center;
}

._align-end_w11ps_27 {
  align-items: flex-end;
}

._align-stretch_w11ps_31 {
  align-items: stretch;
}

._justify-start_w11ps_35 {
  justify-content: flex-start;
}

._justify-center_w11ps_39 {
  justify-content: center;
}

._justify-end_w11ps_43 {
  justify-content: flex-end;
}

._justify-between_w11ps_47 {
  justify-content: space-between;
}
/* WDS StepBadge — 토큰 전용(DD-4). 활성=primary 채움, 비활성=surface+보더. */
._step_1kgsg_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--wds-space-6);
  height: var(--wds-space-6);
  border-radius: var(--wds-radius-full);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border-strong);
  color: var(--wds-color-text-muted);
}

/* 활성: 숫자(텍스트)가 채움 위에 오므로 primary-strong(blue700, AA 7.3:1) — Button과 동일 패턴(DD-6). */
._step_1kgsg_2._active_1kgsg_19 {
  background: var(--wds-color-primary-strong);
  border-color: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
}
/* WDS Stepper — 토큰 전용(DD-4). 상태는 색+마커(체크/숫자) 병행으로 색맹 안전. */
._stepper_g81yr_2 {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

._step_g81yr_2 {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wds-space-2);
  text-align: center;
  padding-inline: var(--wds-space-2);
}

/* 연결선 — 다음 단계로 이어지는 가로선(마지막 단계 제외) */
._step_g81yr_2:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--wds-space-8) / 2);
  inset-inline-start: calc(50% + var(--wds-space-8) / 2 + var(--wds-space-2));
  inline-size: calc(100% - var(--wds-space-8) - var(--wds-space-4));
  block-size: 2px;
  background: var(--wds-color-border);
}
/* 완료 단계에서 나가는 선은 강조 */
._complete_g81yr_31:not(:last-child)::after {
  background: var(--wds-color-primary);
}

/* ── 마커 ── */
._marker_g81yr_36 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  border-radius: var(--wds-radius-full);
  border: 1px solid transparent;
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
}
._marker_g81yr_36 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

._complete_g81yr_31 ._marker_g81yr_36 {
  /* wds-aa-allow-on-primary: 완료 단계 체크 아이콘(비텍스트) — 숫자는 current/upcoming만 표시 */
  background: var(--wds-color-primary);
  color: var(--wds-color-on-primary);
}

._current_g81yr_58 ._marker_g81yr_36 {
  background: var(--wds-color-primary-subtle);
  color: var(--wds-color-primary-text);
  border-color: var(--wds-color-primary);
}

._upcoming_g81yr_64 ._marker_g81yr_36 {
  background: var(--wds-color-surface-muted);
  color: var(--wds-color-text-muted);
}

/* ── 본문 ── */
._body_g81yr_70 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wds-space-1);
  min-width: 0;
  max-inline-size: 100%;
}

/* 한글 라벨은 단어 단위로만 줄바꿈(keep-all) — "장바구\n니" 같은 음절 분리 방지 */
._label_g81yr_80 {
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-medium);
  color: var(--wds-color-text-muted);
  text-align: center;
  word-break: keep-all;
}
._current_g81yr_58 ._label_g81yr_80,
._complete_g81yr_31 ._label_g81yr_80 {
  color: var(--wds-color-text);
}

._description_g81yr_92 {
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
  text-align: center;
  word-break: keep-all;
}

._number_g81yr_99 {
  line-height: 1;
}

/* 스크린리더 전용 — 완료 보조 텍스트 */
._visuallyHidden_g81yr_104 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
._root_48jvv_1 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 기간 선택(중앙) + 컨트롤 슬롯(우측)을 한 행에 수직 중앙 정렬. 1fr·auto·1fr로 기간을 진짜 중앙에. */
._controlsRow_48jvv_8 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

._periods_48jvv_15 {
  grid-column: 2;
}

._controlsTrailing_48jvv_19 {
  grid-column: 3;
  justify-self: end;
}

/* 스크럽 readout 밴드 — 차트 위 예약 영역(idle 시 빈칸으로 레이아웃 시프트 방지). */
._readout_48jvv_25 {
  position: relative;
  width: 100%;
  height: 2.75rem;
}

/* 정밀 시각+가격 콜아웃 — 크로스헤어 x를 추종(translateX -50%), 마우스 전용·aria-hidden 하위. */
._callout_48jvv_32 {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

._calloutTime_48jvv_45 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

._calloutPrice_48jvv_51 {
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  font-variant-numeric: tabular-nums;
}

/* 구간 변화 — 본문 텍스트라 text 변형(≥5:1)으로 AA(채움색 success/error는 3:1 비텍스트용). */
._calloutGain_48jvv_60 {
  color: var(--wds-color-success-text);
}

._calloutLoss_48jvv_64 {
  color: var(--wds-color-error-text);
}

/* 개장가(전일종가) 점선 기준선 — WDS 금융 차트의 절제된 참조선. */
._baseline_48jvv_69 {
  stroke: var(--wds-color-border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

/* 거래량 막대 — 하단 패널(가격과 같은 SVG·xScale이라 x 정렬 정확). 무채색 muted 라인 뷰. */
._volumeBar_48jvv_77 {
  fill: var(--wds-color-border-strong);
  opacity: 0.3;
}

/* 캔들스틱 — 심지(고·저)는 가는 선, 몸통(시·종)은 막대. 색은 인라인(상승/하락 per 캔들). */
._candleWick_48jvv_83 {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* OHLC readout — 캔들 스크럽 시 시·고·저·종. 좁은 뷰포트선 줄바꿈(오버플로 방지), 각 항목은 안 깨짐. */
._calloutOhlc_48jvv_89 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.125rem 0.5rem;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--wds-color-text);
}

._calloutOhlc_48jvv_89 > span {
  white-space: nowrap;
}
/* WDS Switch — 토큰 전용(DD-4). 썸 이동은 transform(compositor)만. */
._root_1pmfr_2 {
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  cursor: pointer;
  user-select: none;
}
._disabled_1pmfr_9 {
  cursor: not-allowed;
  color: var(--wds-color-text-placeholder);
}

/* 트랙 — 컴포넌트 고유 비주얼 값 44×24px (Modal 폭과 동일 지위, P5 패리티 시 재평가) */
._track_1pmfr_15 {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--wds-color-border-strong);
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 24px 트랙 → 44px(control.height-md) 히트 영역 확장 (모바일 터치 타깃 가이드) */
._track_1pmfr_15::after {
  content: '';
  position: absolute;
  inset: calc((1.5rem - var(--wds-control-height-md)) / 2);
}
._track_1pmfr_15[aria-checked='true'] {
  background: var(--wds-color-primary);
  border-color: var(--wds-color-primary);
}
._track_1pmfr_15:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._track_1pmfr_15:disabled {
  background: var(--wds-color-surface-muted);
  border-color: var(--wds-color-border);
  cursor: not-allowed;
}

/* 썸 18px — 보더 1px 안쪽 2px 여백, 이동 거리 = 42 - 18 - 4 = 20px(1.25rem) */
._thumb_1pmfr_50 {
  position: absolute;
  left: 0.125rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--wds-color-on-primary);
  box-shadow: var(--wds-shadow-sm);
  transform: translate(0, -50%);
  transition: transform var(--wds-duration-fast) var(--wds-ease-standard);
}
._track_1pmfr_15[aria-checked='true'] ._thumb_1pmfr_50 {
  transform: translate(1.25rem, -50%);
}
._track_1pmfr_15:disabled ._thumb_1pmfr_50 {
  background: var(--wds-color-surface);
  box-shadow: none;
}

/* sm 크기 (ADR-012 B-P2) — 트랙 36×20, 썸 14px, 이동 거리 1rem. 히트 영역은 44px 유지 */
._track_1pmfr_15[data-size='sm'] {
  width: 2.25rem;
  height: 1.25rem;
}
._track_1pmfr_15[data-size='sm']::after {
  inset: calc((1.25rem - var(--wds-control-height-md)) / 2);
}
._track_1pmfr_15[data-size='sm'] ._thumb_1pmfr_50 {
  width: 0.875rem;
  height: 0.875rem;
}
._track_1pmfr_15[data-size='sm'][aria-checked='true'] ._thumb_1pmfr_50 {
  transform: translate(1rem, -50%);
}

._label_1pmfr_86 {
  font-size: var(--wds-font-size-body-1);
}

@media (prefers-reduced-motion: reduce) {
  ._track_1pmfr_15,
  ._thumb_1pmfr_50 {
    transition: none;
  }
}
/* WDS Toast — 토큰 전용(DD-4). 모션은 compositor 속성(opacity/transform)만. */
._stack_5i7dk_2 {
  position: fixed;
  inset-block-end: var(--wds-space-4);
  inset-inline-end: var(--wds-space-4);
  z-index: var(--wds-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wds-space-2);
}

._toast_5i7dk_13 {
  display: flex;
  align-items: flex-start;
  gap: var(--wds-space-3);
  width: 20rem;
  max-width: calc(100vw - var(--wds-space-8));
  padding: var(--wds-space-3) var(--wds-space-4);
  background: var(--wds-toast-surface);
  border: 1px solid var(--wds-toast-border);
  border-radius: var(--wds-radius-lg);
  box-shadow: var(--wds-shadow-lg);
  animation: _toast-in_5i7dk_1 var(--wds-duration-normal) var(--wds-ease-emphasized-decelerate);
}

/* 퇴장 — Toast.tsx EXIT_DURATION_MS(250ms) = --wds-duration-normal 과 동기 */
._leaving_5i7dk_28 {
  animation: _toast-out_5i7dk_1 var(--wds-duration-normal) var(--wds-ease-standard) forwards;
}

._icon_5i7dk_32 {
  flex: none;
  display: inline-flex;
  color: var(--wds-color-text-muted);
}

._toast_5i7dk_13[data-variant='info'] ._icon_5i7dk_32 {
  color: var(--wds-color-info-text);
}

._toast_5i7dk_13[data-variant='success'] ._icon_5i7dk_32 {
  color: var(--wds-color-success-text);
}

._toast_5i7dk_13[data-variant='warning'] ._icon_5i7dk_32 {
  color: var(--wds-color-warning-text);
}

._toast_5i7dk_13[data-variant='error'] ._icon_5i7dk_32 {
  color: var(--wds-color-error-text);
}

._icon_5i7dk_32 svg {
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
}

._content_5i7dk_59 {
  flex: 1;
  min-width: 0;
}

._title_5i7dk_64 {
  margin: 0;
  font-size: var(--wds-font-size-body-2);
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text);
  word-break: keep-all;
}

._description_5i7dk_72 {
  margin: var(--wds-space-1) 0 0;
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
  word-break: keep-all;
}

._close_5i7dk_79 {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  margin: calc(-1 * var(--wds-space-1)) calc(-1 * var(--wds-space-2)) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--wds-radius-md);
  background: transparent;
  color: var(--wds-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    color var(--wds-duration-fast) var(--wds-ease-standard);
}
/* 시각 32px 유지 + 히트 영역 44px 확장 (모바일 터치 타깃 가이드) */
._close_5i7dk_79::after {
  content: '';
  position: absolute;
  inset: calc(-1 * (var(--wds-space-3) / 2));
}
._close_5i7dk_79:hover {
  background: var(--wds-color-surface-hover);
  color: var(--wds-color-text);
}
._close_5i7dk_79:active:not(:disabled) {
  background: var(--wds-color-surface-pressed);
}
._close_5i7dk_79:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._close_5i7dk_79 svg {
  width: var(--wds-icon-size-sm);
  height: var(--wds-icon-size-sm);
}

@keyframes _toast-in_5i7dk_1 {
  from {
    opacity: 0;
    transform: translateY(var(--wds-space-2));
  }
}

@keyframes _toast-out_5i7dk_1 {
  to {
    opacity: 0;
    transform: translateY(var(--wds-space-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._toast_5i7dk_13,
  ._leaving_5i7dk_28 {
    animation: none;
  }
}
/* WDS Table — 토큰 전용(DD-4). 좁은 뷰포트는 래퍼 가로 스크롤로 대응. */
._scroll_gsk7z_2 {
  overflow-x: auto;
}
._scroll_gsk7z_2:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

._table_gsk7z_10 {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wds-font-size-body-2);
  color: var(--wds-color-text);
}

._caption_gsk7z_17 {
  caption-side: top;
  text-align: start;
  margin-bottom: var(--wds-space-2);
  font-size: var(--wds-font-size-caption);
  color: var(--wds-color-text-muted);
}

._th_gsk7z_25 {
  padding: var(--wds-space-3) var(--wds-space-4);
  text-align: start;
  font-weight: var(--wds-font-weight-semibold);
  color: var(--wds-color-text-muted);
  background: var(--wds-color-surface-muted);
  border-bottom: 1px solid var(--wds-color-border-strong);
  white-space: nowrap;
}

._td_gsk7z_35 {
  padding: var(--wds-space-3) var(--wds-space-4);
  border-bottom: 1px solid var(--wds-color-border);
}

._row_gsk7z_40 {
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._row_gsk7z_40:hover {
  background: var(--wds-color-surface-hover);
}

._center_gsk7z_47 {
  text-align: center;
}
._right_gsk7z_50 {
  text-align: end;
}

._empty_gsk7z_54 {
  padding: var(--wds-space-8);
  text-align: center;
  color: var(--wds-color-text-muted);
}

/* ── 변형: 밀도 (compact) ─────────────────────────────────────────────────
   기본 comfortable는 위 .th/.td(space-3×space-4) 그대로. compact만 축소. */
._compact_gsk7z_62 ._th_gsk7z_25,
._compact_gsk7z_62 ._td_gsk7z_35 {
  padding: var(--wds-space-2) var(--wds-space-3);
}

/* ── 변형: 구분선 (grid) ──────────────────────────────────────────────────
   전 셀 보더(세로+가로) — 숫자 밀집·스프레드시트형. 헤더 띠는 유지. */
._grid_gsk7z_69 ._th_gsk7z_25,
._grid_gsk7z_69 ._td_gsk7z_35 {
  border: 1px solid var(--wds-color-border);
}
/* grid에서도 헤더↔본문 경계는 더 진한 띠 유지(헤더 위계 보존) */
._grid_gsk7z_69 ._th_gsk7z_25 {
  border-bottom-color: var(--wds-color-border-strong);
}

/* ── 변형: 구분선 (none) ──────────────────────────────────────────────────
   보더리스 — 헤더 띠로만 구분, 행 구분선 제거. */
._none_gsk7z_80 ._th_gsk7z_25,
._none_gsk7z_80 ._td_gsk7z_35 {
  border-bottom: none;
}

/* ── 변형: 줄무늬 (zebra) ─────────────────────────────────────────────────
   짝수 행에 중립 표면(헤더 띠보다 옅게). 줄무늬가 행 구분 역할을 하므로
   td 하단 보더는 제거(줄무늬 OR 보더 — 중복 방지). hover는 줄무늬를 이긴다. */
._striped_gsk7z_88 ._td_gsk7z_35 {
  border-bottom: none;
}
/* 줄무늬는 캔버스 표면에 의존하지 않고 결정적이어야 한다 — 홀수=surface,
   짝수=surface-muted를 명시. transparent 합성(60%)은 라이트에서 델타가 거의
   사라져(≈1.03) 변형 목적이 무력화되므로 쓰지 않는다. hover는 줄무늬를 이긴다. */
._striped_gsk7z_88 ._row_gsk7z_40 {
  background: var(--wds-color-surface);
}
._striped_gsk7z_88 ._row_gsk7z_40:nth-child(even) {
  background: var(--wds-color-surface-muted);
}
._striped_gsk7z_88 ._row_gsk7z_40:hover {
  background: var(--wds-color-surface-hover);
}

/* ── 변형: 헤더 고정 (stickyHeader) ───────────────────────────────────────
   maxHeight로 세로 스크롤 영역이 생기면 헤더가 상단에 핀. th 배경이 불투명
   (surface-muted)이라 본문이 비치지 않는다. */
._stickyHeader_gsk7z_107 ._th_gsk7z_25 {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ── 반응형: 카드 스택 (responsive="cards") ───────────────────────────────────
   좁은 컨테이너에서 각 행을 카드로 스택. CSS Container Query 기반 — 뷰포트가 아닌
   컨테이너 폭에 반응(사이드바·split·모달 안에서도 올바르게 전환). zero-JS·SSR 안전.
   임계값은 600px 고정(= ADR-012 compact). @container 조건은 커스텀 프로퍼티(var())를
   받지 못하므로 리터럴 — 가변 임계값은 후속 단계(P1)에서 모디파이어로 제공. */
._responsiveCards_gsk7z_118 {
  container-type: inline-size;
}
/* 넓은 컨테이너: 셀 라벨 숨김 — table 시맨틱·기존 외관을 그대로 유지 */
._cellLabel_gsk7z_122 {
  display: none;
}

@container (max-width: 600px) {
  /* 표 격자 해제 → 블록 흐름(행=카드, 셀=라벨/값 줄). table role도 함께 해제되어
     "레코드 리스트"로 읽힌다 — 라벨↔값 DOM 인접으로 의미 보존. */
  ._responsiveCards_gsk7z_118 table,
  ._responsiveCards_gsk7z_118 tbody,
  ._responsiveCards_gsk7z_118 tr,
  ._responsiveCards_gsk7z_118 td {
    display: block;
  }

  /* caption은 블록으로 — table이 display:block이 되면 table-caption이 min-content로
     쪼그라들어 세로 텍스트가 되는 것을 방지(카드 리스트의 제목으로 정상 흐름). */
  ._responsiveCards_gsk7z_118 caption {
    display: block;
  }

  /* 헤더 행은 시각·접근성에서 제거(각 셀이 자체 라벨을 가짐) */
  ._responsiveCards_gsk7z_118 thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 행 → 카드 표면. WDS 카드 관행대로 space-4 사방 균등 호흡(표 행이 아닌 "표면"으로 읽히게). */
  ._responsiveCards_gsk7z_118 tr {
    margin-bottom: var(--wds-space-3);
    padding: var(--wds-space-4);
    border: 1px solid var(--wds-color-border);
    border-radius: var(--wds-radius-md);
    background: var(--wds-color-surface);
  }
  /* 카드 모드에선 줄무늬·hover 배경을 끈다(카드 표면이 정본) */
  ._responsiveCards_gsk7z_118._responsiveCards_gsk7z_118 tr,
  ._responsiveCards_gsk7z_118 ._striped_gsk7z_88 ._row_gsk7z_40:nth-child(even),
  ._responsiveCards_gsk7z_118 ._row_gsk7z_40:hover {
    background: var(--wds-color-surface);
  }

  /* 셀 → 라벨/값 2단(좌: 라벨, 우: 값). align(center/right)은 카드선 무시(좌측 정렬).
     셀 상하 패딩은 행간 리듬용 — 카드 가장자리(첫/끝 셀)는 tr 패딩만 쓰도록 상쇄. */
  ._responsiveCards_gsk7z_118 td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wds-space-4);
    padding: var(--wds-space-2) 0;
    border: none;
    text-align: start;
  }
  ._responsiveCards_gsk7z_118 td:first-child {
    padding-top: 0;
  }
  ._responsiveCards_gsk7z_118 td:last-child {
    padding-bottom: 0;
  }
  ._responsiveCards_gsk7z_118 td._center_gsk7z_47,
  ._responsiveCards_gsk7z_118 td._right_gsk7z_50 {
    text-align: start;
  }

  /* 라벨="키"(보조) — muted 색만으로 구분, 굵기는 값과 경쟁하지 않게 regular 유지 */
  ._responsiveCards_gsk7z_118 ._cellLabel_gsk7z_122 {
    display: block;
    flex: none;
    color: var(--wds-color-text-muted);
  }
  /* 값="데이터"(주인공) — flex로 우측 끝에 배치되되, 다줄 값은 좌측 정렬(우측정렬 다줄의
     들쭉날쭉 방지). 짧은 값은 space-between이 우측 끝으로 민다. */
  ._responsiveCards_gsk7z_118 ._cellValue_gsk7z_198 {
    min-width: 0; /* 긴 값 줄바꿈 허용(가로 넘침 방지) */
    text-align: start;
    overflow-wrap: anywhere;
  }

  /* 제목 셀 — 라벨 없이 한 줄 강조(카드 헤더). 제목↔본문 분리를 행간(16px)보다 키운다. */
  ._responsiveCards_gsk7z_118 td._cellPrimary_gsk7z_205 {
    display: block;
    padding-top: 0;
    padding-bottom: var(--wds-space-3);
    font-size: var(--wds-font-size-body-1);
    font-weight: var(--wds-font-weight-semibold);
  }
  ._responsiveCards_gsk7z_118 td._cellPrimary_gsk7z_205 ._cellValue_gsk7z_198 {
    text-align: start;
  }

  /* 빈 상태는 카드화하지 않고 중앙 정렬 유지 */
  ._responsiveCards_gsk7z_118 ._empty_gsk7z_54 {
    display: block;
    text-align: center;
  }
}

/* ── 반응형: 비교형 컬럼 우선순위 (responsive="columns") ───────────────────────
   ResizeObserver(클라이언트)가 폭을 측정해 우선순위 낮은 컬럼부터 숨기고, 숨긴 값은 행
   펼치기 상세에 노출한다. 첫 컬럼은 항상 보이며 가로 스크롤 시 sticky로 고정. 토큰 전용(DD-4). */
._srOnly_gsk7z_226 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 첫 컬럼(식별자) sticky 고정 — 가로 스크롤 시에도 행을 식별. 불투명 배경으로 내용 비침 방지. */
._columnsResponsive_gsk7z_240 ._stickyFirst_gsk7z_240 {
  position: sticky;
  left: 0;
  z-index: 1;
}
._columnsResponsive_gsk7z_240 td._stickyFirst_gsk7z_240 {
  background: var(--wds-color-surface);
}
._columnsResponsive_gsk7z_240 ._row_gsk7z_40:hover td._stickyFirst_gsk7z_240 {
  background: var(--wds-color-surface-hover);
}

/* 펼치기 컨트롤 컬럼 — 좁게, 가운데. */
._columnsResponsive_gsk7z_240 ._controlCol_gsk7z_253 {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

/* 펼치기 버튼 — 고스트, 44×44 히트(::after), +/− 글리프. */
._expandButton_gsk7z_260 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-sm);
  background: var(--wds-color-surface);
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-1);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--wds-duration-fast) var(--wds-ease-standard),
    border-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._expandButton_gsk7z_260::after {
  content: '';
  position: absolute;
  inset: -8px;
}
._expandButton_gsk7z_260:hover {
  background: var(--wds-color-surface-hover);
  border-color: var(--wds-color-border-strong);
}
._expandButton_gsk7z_260:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}

/* 펼친 상세 행 — 숨긴 컬럼의 라벨↔값. 부모 행과 묶여 보이도록 옅은 표면. */
._detailRow_gsk7z_294 > td {
  padding: var(--wds-space-3) var(--wds-space-4);
  background: var(--wds-color-surface-muted);
  border-bottom: 1px solid var(--wds-color-border);
}
._detailList_gsk7z_299 {
  margin: 0;
  display: grid;
  gap: var(--wds-space-2);
}
._detailPair_gsk7z_304 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wds-space-4);
}
._detailLabel_gsk7z_310 {
  flex: none;
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-body-2);
}
._detailValue_gsk7z_315 {
  margin: 0;
  min-width: 0;
  text-align: end;
  overflow-wrap: anywhere;
}
/* WDS Tabs — 토큰 전용(DD-4). 활성 인디케이터는 하단 보더 primary. */
._root_1wg3h_2 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-4);
}

._list_1wg3h_8 {
  display: flex;
  gap: var(--wds-space-1);
  /* 비활성 탭의 투명 보더와 합쳐 활성 인디케이터 라인을 형성 */
  border-bottom: 1px solid var(--wds-color-border);
}

/* scrollable: 탭이 많을 때 줄바꿈 대신 가로 스크롤 (M3, ADR-012 B-P1) */
._list_1wg3h_8[data-variant='scrollable'] {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

._list_1wg3h_8[data-variant='scrollable'] ._trigger_1wg3h_22 {
  flex: 0 0 auto;
}

/* fixed(기본): 균등폭 — 탭이 전폭을 균등 분배하고 라벨 중앙 정렬.
   M3 fixed tabs · Flutter WizTabsVariant.fixed(Expanded + Alignment.center) 패리티.
   (이전엔 규칙 부재로 좌측 자연폭 패킹 — Tabs.tsx 문서 '균등 배치'와 불일치한 버그였음) */
._list_1wg3h_8[data-variant='fixed'] ._trigger_1wg3h_22 {
  flex: 1 1 0;
  justify-content: center;
}

/* secondary: 하위 위계 — 작은 폰트·여백 (M3 secondary tabs) */
._list_1wg3h_8[data-level='secondary'] ._trigger_1wg3h_22 {
  padding: var(--wds-space-2) var(--wds-space-3);
  font-size: var(--wds-font-size-body-2);
}

._trigger_1wg3h_22 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wds-space-2);
  padding: var(--wds-space-3) var(--wds-space-4);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--wds-color-text-muted);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-weight: var(--wds-font-weight-medium);
  line-height: var(--wds-line-height-tight);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast),
    border-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast),
    background-color var(--wds-spring-effect-fast-duration) var(--wds-spring-effect-fast);
}

._trigger_1wg3h_22:hover:not(:disabled) {
  color: var(--wds-color-text);
}

._trigger_1wg3h_22:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: -2px;
  border-radius: var(--wds-radius-sm);
}

._trigger_1wg3h_22[aria-selected='true'] {
  color: var(--wds-color-primary-text);
  border-bottom-color: var(--wds-color-primary);
}

._trigger_1wg3h_22:disabled {
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}

._content_1wg3h_83 {
  color: var(--wds-color-text);
  animation: _tab-fade_1wg3h_1 var(--wds-spring-spatial-fast-duration) var(--wds-spring-spatial-fast);
}

._content_1wg3h_83:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wds-radius-sm);
}

@keyframes _tab-fade_1wg3h_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  ._content_1wg3h_83 {
    animation: none;
  }
}
/* WDS TextLink — 토큰 전용(DD-4). color.link 쌍 소비, 본문 내 줄바꿈 허용(inline 유지). */
._link_10vw5_1 {
  color: var(--wds-color-link);
  font-weight: var(--wds-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--wds-duration-fast) var(--wds-ease-standard);
}
._link_10vw5_1:hover {
  color: var(--wds-color-link-hover);
  text-decoration: underline;
}
._link_10vw5_1:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--wds-radius-sm);
}

._muted_10vw5_19 {
  color: var(--wds-color-text-muted);
  font-weight: var(--wds-font-weight-regular);
}
._muted_10vw5_19:hover {
  color: var(--wds-color-text);
}

._disabled_10vw5_27 {
  color: var(--wds-color-text-placeholder);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}

/* 외부 링크 아이콘 — 1em 동기(폰트 크기 추종), 베이스라인 미세 정렬 */
._externalIcon_10vw5_35 {
  width: 1em;
  height: 1em;
  margin-left: var(--wds-space-1);
  vertical-align: -0.125em;
}

/* 시각 숨김(보조기술 전용) — "(새 창 열림)" 안내 */
._srOnly_10vw5_43 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* WDS Textarea — 토큰 전용(DD-4). Input과 동일한 보더/포커스 링 어휘. */
._textarea_d9fnr_2 {
  display: block;
  width: 100%;
  padding: var(--wds-space-2) var(--wds-space-3);
  background: var(--wds-input-bg);
  color: var(--wds-input-fg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  line-height: var(--wds-line-height-normal);
  outline: none;
  resize: vertical;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._textarea_d9fnr_2::placeholder {
  color: var(--wds-input-placeholder);
}
/* 텍스트 입력은 마우스 포커스도 링 표시 — Input wrap:focus-within과 동일 어휘 */
._textarea_d9fnr_2:focus {
  border-color: var(--wds-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-primary) 18%, transparent);
}

/* ── 크기 (size) ── md는 .textarea 기본. sm·lg만 모디파이어로 폰트·패딩 스케일
   (높이는 rows 기반이라 미변경). Input .sm/.lg와 동일 스케일. */
._sm_d9fnr_29 {
  padding: var(--wds-space-1) var(--wds-space-2);
  font-size: var(--wds-font-size-body-2);
}
._lg_d9fnr_29 {
  padding: var(--wds-space-3) var(--wds-space-4);
}

._invalid_d9fnr_38 {
  border-color: var(--wds-input-border-invalid);
}
._invalid_d9fnr_38:focus {
  border-color: var(--wds-input-border-invalid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wds-color-error) 18%, transparent);
}

._textarea_d9fnr_2:disabled {
  background: var(--wds-input-bg-disabled);
  cursor: not-allowed;
  resize: none;
}
/* WDS TimePicker — 토큰 전용(DD-4). 트리거는 Input 어휘, 팝업은 dropdown 어휘(Select과 동일). */
._root_evoen_2 {
  position: relative;
  display: inline-block;
  /* 'HH:mm' + 아이콘 기준 최소 폭 — Select(14rem)보다 좁은 시간 전용 폭 */
  min-width: 9rem;
}

._trigger_evoen_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wds-space-2);
  width: 100%;
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font: inherit;
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  text-align: start;
  cursor: pointer;
  /* 빠른/더블 클릭 시 라벨 텍스트 선택 방지 (리스트형 팝업 공통) */
  user-select: none;
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    box-shadow var(--wds-duration-fast) var(--wds-ease-standard);
}
._trigger_evoen_9:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._trigger_evoen_9:disabled {
  background: var(--wds-input-bg-disabled);
  color: var(--wds-color-text-placeholder);
  cursor: not-allowed;
}
._open_evoen_41 {
  border-color: var(--wds-input-border-focus);
}

._value_evoen_45 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._placeholder_evoen_52 {
  color: var(--wds-input-placeholder);
}

._icon_evoen_56 {
  flex: none;
  width: var(--wds-icon-size-md);
  height: var(--wds-icon-size-md);
  color: var(--wds-color-text-subtle);
}

._list_evoen_63 {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  margin: 0;
  padding: var(--wds-space-1);
  list-style: none;
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  /* 약 6옵션 상한 — 초과분은 내부 스크롤 (Select과 동일) */
  max-height: 16rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wds-color-border-strong) transparent;
  user-select: none;
  animation: _list-in_evoen_1 var(--wds-duration-fast) var(--wds-ease-emphasized-decelerate);
}
._flipped_evoen_83 {
  top: auto;
  bottom: calc(100% + var(--wds-space-1));
}

/* BottomSheet 본문 안에서는 인라인 흐름 — 시트가 표면/스크롤을 소유 */
._sheetList_evoen_89 {
  position: static;
  max-height: none;
  border: 0;
  box-shadow: none;
  animation: none;
  background: transparent;
}

/* 옵션 행 — 리스트형 팝업 공통 어휘(40px 행·inline 12px·gap 8px·radius sm) */
._option_evoen_99 {
  display: flex;
  align-items: center;
  gap: var(--wds-space-2);
  min-height: var(--wds-space-10);
  padding-inline: var(--wds-space-3);
  border-radius: var(--wds-radius-sm);
  color: var(--wds-color-text);
  font-size: var(--wds-font-size-body-1);
  font-variant-numeric: tabular-nums;
  text-align: start;
  cursor: pointer;
}
._option_evoen_99[aria-selected='true'] {
  background: var(--wds-color-surface-selected);
  color: var(--wds-color-primary-text);
  font-weight: var(--wds-font-weight-medium);
}
._active_evoen_117 {
  background: var(--wds-color-surface-hover);
}
._active_evoen_117[aria-selected='true'] {
  background: var(--wds-color-surface-selected);
}
/* 눌림 — neutral 면에만. 선택(surface-selected) 배경은 덮지 않는다 */
._option_evoen_99:active:not([aria-selected='true']) {
  background: var(--wds-color-surface-pressed);
}

@keyframes _list-in_evoen_1 {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--wds-space-1)));
  }
}

/* ───────────────────────── dial 모드 (시계판, ADR-012 Track C) ───────────────────────── */

/* dial 오버레이 표면 — 데스크톱 팝업일 때 list와 동일한 raised 표면/그림자/플로팅 */
._dialSurface_evoen_138 {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--wds-space-1));
  z-index: var(--wds-z-dropdown);
  padding: var(--wds-space-3);
  background: var(--wds-color-surface-raised);
  border: 1px solid var(--wds-color-border);
  border-radius: var(--wds-radius-md);
  box-shadow: var(--wds-shadow-lg);
  animation: _list-in_evoen_1 var(--wds-duration-fast) var(--wds-ease-emphasized-decelerate);
}

/* dial 본문 — 입력 + 단계 헤딩 + 시계판 세로 스택 */
._dial_evoen_138 {
  display: flex;
  flex-direction: column;
  gap: var(--wds-space-2);
  align-items: center;
}

._dialInput_evoen_159 {
  width: 100%;
  height: var(--wds-input-height);
  padding-inline: var(--wds-space-3);
  background: var(--wds-input-bg);
  border: 1px solid var(--wds-input-border);
  border-radius: var(--wds-input-radius);
  color: var(--wds-input-fg);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-1);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
._dialInput_evoen_159:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
._dialInput_evoen_159[aria-invalid='true'] {
  border-color: var(--wds-input-border-invalid);
}

._dialStep_evoen_180 {
  margin: 0;
  color: var(--wds-color-text-muted);
  font-size: var(--wds-font-size-caption);
  font-weight: var(--wds-font-weight-medium);
}

/* 시계판 — 정사각 원형 트랙. 숫자 버튼을 transform으로 둘레에 배치 (구조적 px/deg 허용, DD-4 예외) */
._face_evoen_188 {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: var(--wds-radius-full);
  background: var(--wds-color-surface-muted);
}

/* 숫자 버튼 — 중심에서 회전(angle) 후 반지름만큼 바깥으로 이동, 다시 역회전해 글자 정립 */
._tick_evoen_197 {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wds-space-8);
  height: var(--wds-space-8);
  margin: calc(var(--wds-space-8) / -2);
  border: 0;
  border-radius: var(--wds-radius-full);
  background: transparent;
  color: var(--wds-color-text);
  font-family: var(--wds-font-sans);
  font-size: var(--wds-font-size-body-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--wds-duration-fast) var(--wds-ease-standard);
}
._tick_evoen_197:hover {
  background: var(--wds-color-surface-hover);
}
/* 눌림 — neutral 면에만. 선택(tickSelected, primary 채움) 배경은 덮지 않는다 */
._tick_evoen_197:active:not(:disabled):not(._tickSelected_evoen_221) {
  background: var(--wds-color-surface-pressed);
}
._tick_evoen_197:focus-visible {
  outline: 2px solid var(--wds-color-focus-ring);
  outline-offset: 2px;
}
/* 선택 — primary-strong 채움 (DD-6: 시각 텍스트는 본문 크기라 AA 4.5:1 보장 필요) */
._tickSelected_evoen_221 {
  background: var(--wds-color-primary-strong);
  color: var(--wds-color-on-primary);
}
._tickSelected_evoen_221:hover {
  background: var(--wds-color-primary-strong-hover);
}

/* 바깥 링 반지름 96px, 안쪽 링 60px — rotate→translate→counter-rotate로 둘레 배치 */
._ringOuter_evoen_238 {
  transform: rotate(var(--wds-dial-angle)) translateY(-96px)
    rotate(calc(-1 * var(--wds-dial-angle)));
}
._ringInner_evoen_242 {
  transform: rotate(var(--wds-dial-angle)) translateY(-60px)
    rotate(calc(-1 * var(--wds-dial-angle)));
}

@media (prefers-reduced-motion: reduce) {
  ._trigger_evoen_9 {
    transition: none;
  }
  ._list_evoen_63 {
    animation: none;
  }
  ._dialSurface_evoen_138 {
    animation: none;
  }
  ._tick_evoen_197 {
    transition: none;
  }
}
/* WDS TintPanel — 토큰 전용(DD-4). active=틴트 배경 + accent 보더(텍스트 잉크 아님 → DD-6 비대상). */
._panel_cr1t2_2 {
  padding: var(--wds-space-4);
  border-radius: var(--wds-radius-lg);
  background: var(--wds-color-surface);
  border: 1px solid var(--wds-color-border);
  transition:
    border-color var(--wds-duration-fast) var(--wds-ease-standard),
    background-color var(--wds-duration-fast) var(--wds-ease-standard);
}

._panel_cr1t2_2._active_cr1t2_12 {
  background: var(--wds-color-primary-subtle);
  border-color: var(--wds-color-primary);
}
}