/* T1 기본 부품 — shadcn/ui 기본(new-york) 스타일의 크기·모서리·테두리·그림자·포커스 링을 순수 CSS 로 옮긴 것.
   색은 tokens.css 의 --ui-* 역할 변수만 쓴다. tokens.css 바로 뒤에 통째로 붙여 넣는다.
   클래스 이름은 shadcn 컴포넌트·변형 이름에 ui- 접두사를 붙인 것이다: <button class="ui-btn ui-btn-outline ui-btn-sm">
   접두사 이유: 이미 자체 CSS 가 있는 페이지(archify 등)에 붙여도 .card 같은 흔한 이름과 겹쳐 남의 부품을 바꾸지 않게. 요소 선택자도 쓰지 않는다. */

/* 버튼 — Button: default / secondary / outline / ghost / destructive / link, 크기 sm / lg / icon */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.25rem; padding: 0.5rem 1rem; white-space: nowrap;
  font: 500 14px/20px 'Plus Jakarta Sans', sans-serif;
  border: 1px solid transparent; border-radius: calc(var(--ui-radius) - 2px);
  background: var(--ui-primary); color: var(--ui-primary-fg); box-shadow: var(--ui-shadow-xs);
  cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s;
}
.ui-btn:hover { background: color-mix(in srgb, var(--ui-primary) 90%, transparent); }
.ui-btn:focus-visible { outline: none; border-color: var(--ui-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-ring) 50%, transparent); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.ui-btn-secondary { background: var(--ui-secondary); color: var(--ui-secondary-fg); }
.ui-btn-secondary:hover { background: color-mix(in srgb, var(--ui-secondary) 80%, transparent); }
.ui-btn-outline { background: var(--ui-card); color: var(--ui-card-fg); border-color: var(--ui-border); }
.ui-btn-outline:hover, .ui-btn-ghost:hover { background: var(--ui-accent); color: var(--ui-accent-fg); }
.ui-btn-ghost { background: transparent; color: var(--ui-card-fg); box-shadow: none; }
.ui-btn-destructive { background: var(--ui-destructive); color: var(--ui-destructive-fg); }
.ui-btn-destructive:hover { background: color-mix(in srgb, var(--ui-destructive) 90%, transparent); }
.ui-btn-link { background: transparent; color: var(--primary); box-shadow: none; text-underline-offset: 4px; }
.ui-btn-link:hover { background: transparent; text-decoration: underline; }
.ui-btn-sm { height: 2rem; padding: 0 0.75rem; gap: 0.375rem; }
.ui-btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.ui-btn-icon { width: 2.25rem; padding: 0; }

/* 카드 — Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter */
.ui-card {
  display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0;
  background: var(--ui-card); color: var(--ui-card-fg);
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px); box-shadow: var(--ui-shadow-sm);
}
.ui-card-header { display: grid; gap: 0.375rem; padding: 0 1.5rem; }
.ui-card-title { margin: 0; font-weight: 600; line-height: 1; }
.ui-card-description { margin: 0; font-size: 14px; line-height: 20px; color: var(--ui-muted-fg); }
.ui-card-content { padding: 0 1.5rem; }
.ui-card-footer { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem; }

/* 배지 — Badge: default / secondary / destructive / outline */
.ui-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; width: fit-content;
  padding: 0.125rem 0.5rem; white-space: nowrap; font: 500 12px/16px 'Plus Jakarta Sans', sans-serif;
  border: 1px solid transparent; border-radius: calc(var(--ui-radius) - 2px);
  background: var(--ui-primary); color: var(--ui-primary-fg);
}
.ui-badge-secondary { background: var(--ui-secondary); color: var(--ui-secondary-fg); }
.ui-badge-destructive { background: var(--ui-destructive); color: var(--ui-destructive-fg); }
.ui-badge-outline { background: transparent; color: var(--ui-card-fg); border-color: var(--ui-border); }

/* 입력 — Input / Textarea / Select(네이티브) / Label */
.ui-input, .ui-textarea, .ui-select {
  box-sizing: border-box; width: 100%; min-width: 0; height: 2.25rem; padding: 0.25rem 0.75rem;
  font: 400 14px/20px 'Plus Jakarta Sans', sans-serif; color: var(--ui-card-fg);
  background: transparent; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) - 2px);
  box-shadow: var(--ui-shadow-xs); transition: border-color .15s, box-shadow .15s;
}
.ui-textarea { height: auto; min-height: 4rem; padding: 0.5rem 0.75rem; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-muted-fg); }
.ui-input:focus-visible, .ui-textarea:focus-visible, .ui-select:focus-visible {
  outline: none; border-color: var(--ui-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-ring) 50%, transparent);
}
.ui-input:disabled, .ui-textarea:disabled, .ui-select:disabled { cursor: not-allowed; opacity: .5; }
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"] {
  border-color: var(--ui-destructive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-destructive) 20%, transparent);
}
.ui-label { display: flex; align-items: center; gap: 0.5rem; font: 500 14px/1 'Plus Jakarta Sans', sans-serif; }

/* 체크박스·라디오·진행바 — 네이티브 요소에 주황만 입힌다. accent-color 는 상속되므로 <body> 나 <form> 에 한 번 붙인다 */
.ui-accent { accent-color: var(--ui-primary); }
.ui-accent input[type="checkbox"], .ui-accent input[type="radio"] { width: 1rem; height: 1rem; }

/* 표 — Table */
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; caption-side: bottom; }
.ui-table th { height: 2.5rem; padding: 0 0.5rem; text-align: left; font-weight: 500; white-space: nowrap; }
.ui-table td { padding: 0.5rem; }
.ui-table tr { border-bottom: 1px solid var(--ui-border); transition: background-color .15s; }
.ui-table tbody tr:last-child { border-bottom: 0; }
.ui-table tbody tr:hover { background: color-mix(in srgb, var(--ui-muted) 50%, transparent); }
.ui-table caption { margin-top: 1rem; color: var(--ui-muted-fg); }

/* 알림 — Alert: default / destructive */
.ui-alert {
  display: grid; gap: 0.125rem; padding: 0.75rem 1rem; font-size: 14px; line-height: 20px;
  background: var(--ui-card); color: var(--ui-card-fg);
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
}
.ui-alert-title { font-weight: 500; }
.ui-alert-description { color: var(--ui-muted-fg); }
.ui-alert-destructive, .ui-alert-destructive .ui-alert-description { color: var(--ui-destructive); }

/* 구분선 — Separator */
.ui-separator { height: 1px; border: 0; margin: 0; background: var(--ui-border); }