/* star365 ui24 kit v1 — 도구 앱 화면에 «얹는» UI 용어 부분집합. 단일 출처: /opt/star365-hq/ui24-kit/ (서비스 public/ 에는 사본)
   기존 화면을 바꾸지 않는다 — data-ui24-* / data-tip 속성이 붙은 곳과 전역 트랜지션만 건드린다.
   적용 용어: #13 툴팁 · #14 토스트 · #16 스켈레톤 · #18/#19 리빌+스태거 · #20 트랜지션 · #21 글래스 · #24 눌림.
   모든 모션은 prefers-reduced-motion 에서 꺼진다. 색은 변수로 덮어쓸 수 있다(밝은 서비스는 --ui24-bg/--ui24-fg 재정의). */
:root{--ui24-t:.2s ease;--ui24-bg:rgba(17,24,39,.93);--ui24-fg:#f8fafc;--ui24-bd:rgba(255,255,255,.2);--ui24-err:rgba(179,38,30,.96)}

/* #20 스무스 트랜지션 — 상태가 바뀔 때 뚝 끊기지 않게(공통 토큰) */
button,a,[role=button],summary,select,input[type=checkbox],input[type=radio]{transition:background-color var(--ui24-t),border-color var(--ui24-t),color var(--ui24-t),opacity var(--ui24-t),box-shadow var(--ui24-t),transform var(--ui24-t),filter var(--ui24-t)}

/* #24 마이크로 인터랙션 — 눌림 반응 */
button:not(:disabled):active,[role=button]:not([aria-disabled=true]):active{transform:scale(.97)}

/* #13 툴팁 — hover·키보드 포커스 전용(터치에선 data-tip 이 aria-description 으로만 남는다). 숨김은 display:none → 가장자리 가로 스크롤을 만들지 않는다 */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:min(240px,70vw);padding:7px 11px;border-radius:8px;background:var(--ui24-bg);color:var(--ui24-fg);border:1px solid var(--ui24-bd);font:400 12.5px/1.45 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;text-align:left;white-space:normal;pointer-events:none;z-index:60;text-transform:none;letter-spacing:0}
[data-tip]:hover::after,[data-tip]:focus-visible::after{display:block;animation:ui24-fade .16s ease}
[data-tip][data-tip-pos=end]::after{left:auto;right:0;transform:none}
[data-tip][data-tip-pos=start]::after{left:0;transform:none}
[data-tip][data-tip-pos=below]::after{bottom:auto;top:calc(100% + 8px)}
@keyframes ui24-fade{from{opacity:0}to{opacity:1}}

/* #14 토스트 + #21 글래스(불투명 93% 라 글자 대비 유지, 미지원 브라우저는 불투명 그대로) */
.ui24-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:100;max-width:min(92vw,440px);padding:11px 18px;border-radius:10px;background:var(--ui24-bg);color:var(--ui24-fg);border:1px solid var(--ui24-bd);font:500 14px/1.4 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity var(--ui24-t),transform var(--ui24-t)}
.ui24-toast.on{opacity:1;transform:translate(-50%,0)}
.ui24-toast.err{background:var(--ui24-err);color:#fff}
@supports (backdrop-filter:blur(1px)){.ui24-toast{backdrop-filter:blur(10px)}}

/* #16 스켈레톤 — 불러오는 동안 빈 화면 대신 윤곽(aria-hidden 으로 두고, 컨테이너에 role=status aria-busy) */
.ui24-skel{border-radius:12px;background:rgba(127,127,127,.16)}
@media (prefers-reduced-motion:no-preference){
.ui24-skel{background:linear-gradient(100deg,rgba(127,127,127,.12) 30%,rgba(127,127,127,.28) 50%,rgba(127,127,127,.12) 70%) 0 0/230% 100%;animation:ui24-sk 1.3s linear infinite}
@keyframes ui24-sk{to{background-position:-130% 0}}
/* #18 리빌 + #19 스태거 — [data-ui24-reveal] 의 자식이 생길 때 순서대로 올라온다(Alpine x-for 의 <template> 이 1번째 자식이라 2번째부터 센다) */
@keyframes ui24-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-ui24-reveal]>*:not(template){animation:ui24-rise .42s cubic-bezier(.2,.8,.2,1) both}
[data-ui24-reveal]>*:nth-child(3){animation-delay:.05s}[data-ui24-reveal]>*:nth-child(4){animation-delay:.1s}[data-ui24-reveal]>*:nth-child(5){animation-delay:.15s}
[data-ui24-reveal]>*:nth-child(6){animation-delay:.2s}[data-ui24-reveal]>*:nth-child(7){animation-delay:.25s}[data-ui24-reveal]>*:nth-child(8){animation-delay:.3s}
[data-ui24-reveal]>*:nth-child(n+9){animation-delay:.35s}
}
@media (prefers-reduced-motion:reduce){
button:not(:disabled):active,[role=button]:active{transform:none}
.ui24-toast,[data-tip]::after{transition:none;animation:none!important}
}