/* 토스 디자인 시스템(TDS)의 컴포넌트 구분을 따른 공통 스타일.
   Button(fill, weak), SegmentedControl, Badge, ConfirmDialog, Toast, Skeleton. 각 화면의 <style> 뒤에 불러온다. */
.btn, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 12px; padding: 8px 14px; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.1s, filter 0.1s; }
.btn { background: var(--accent); color: var(--on-accent); }                                  /* fill: 한 구역의 주 동작 */
.btn-ghost { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } /* weak: 보조 동작 */
.btn.danger { background: var(--danger); color: #fff; }
.btn-ghost.danger { color: var(--danger); }
.btn:active, .btn-ghost:active, .go:active, .seg button:active { transform: scale(0.97); filter: brightness(0.94); }
.btn:disabled, .btn-ghost:disabled { opacity: 0.4; cursor: default; transform: none; }
:is(.btn, .btn-ghost, .go, .seg button, select, input, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[aria-busy="true"], .btn-ghost[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; } /* 로딩 중에도 버튼 너비는 그대로 */
.btn[aria-busy="true"]::after, .btn-ghost[aria-busy="true"]::after { content: "•••"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-accent); animation: ui-pulse 0.9s infinite; }
.btn-ghost[aria-busy="true"]::after { color: var(--ink); }
.go { min-height: 40px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg button { min-height: 34px; border: 0; border-radius: 9px; padding: 6px 12px; background: transparent; color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }

.filters select, select, input[type="search"], input[type="number"], .dlg input { min-height: 40px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; }
select:disabled { opacity: 0.4; }

.status, .new, .chip, .person { border: 0; border-radius: 6px; padding: 2px 7px; font-size: 0.75rem; font-weight: 600; }
.chip { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.chip.main { background: var(--accent-soft); color: var(--accent); }

dialog.dlg { width: min(340px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 22px 20px 16px; background: var(--surface); color: var(--ink); }
dialog.dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.dlg h3 { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.35; }
.dlg p { margin: 0 0 14px; color: var(--muted); font-size: 0.9375rem; }
.dlg input { width: 100%; margin-bottom: 14px; }
.dlg .dlg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dlg .btn, .dlg .btn-ghost { min-height: 48px; font-size: 1rem; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 2000; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; background: #2b2f36; color: #fff; font-size: 0.9375rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); animation: ui-up 0.2s ease-out; }

.skel { display: grid; gap: 10px; }
.skel i { display: block; height: 56px; border-radius: 12px; background: linear-gradient(90deg, var(--line) 25%, var(--surface) 50%, var(--line) 75%); background-size: 200% 100%; animation: ui-shimmer 1.3s linear infinite; }

@keyframes ui-pulse { 50% { opacity: 0.35; } }
@keyframes ui-up { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel i, .toast, .btn::after, .btn-ghost::after { animation: none; } .btn, .btn-ghost { transition: none; } }