/* interact.css — 토스형 인터랙션(가이드 견본). 시간·곡선은 토큰만. */
/* 누름: 살짝 줄었다 돌아온다 */
.btn,.chipx,.fchip,.seg button,.tab,.rcard,.nav-item,.sg-thumb,.check i,.switch i{transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn:active,.chipx:active,.fchip:active,.seg button:active,.rcard:active{transform:scale(.96)}
.nav-item:active,.tab:active{transform:scale(.97)}
.sg-card:active .sg-thumb{transform:scale(.98)}
.nav-item:active{background:var(--surface-3)}
.table tr[data-go] td{transition:background-color var(--dur-fast) var(--ease)}
.table tr[data-go]:active td{background:var(--surface-3)}
[data-go].row:active,.dhead [data-go]:active{opacity:.7}
.check{user-select:none}
.check.is-on i,.check.is-mixed i{animation:ck-pop var(--dur-base) var(--ease)}
.switch{user-select:none}
.chipx{cursor:default}
.fsec .chipx,.fld .chipx{cursor:pointer}
html.cke-on [data-e]:active{transform:none!important}
/* 입력칸: 실제로 누르면 보라 테두리 + 연한 링 */
.ctl{transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ctl:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--primary-100)}
/* 탭 밑줄 · 보기 전환 바탕이 미끄러진다 */
.tabs{position:relative}
.tabs.has-ink .tab[aria-selected="true"]::after{display:none}
.tab-ink{position:absolute;left:0;bottom:-1px;height:3px;border-radius:3px;background:var(--action-bg);pointer-events:none}
.tabs.ink-ready .tab-ink{transition:transform var(--dur-base) var(--ease),width var(--dur-base) var(--ease)}
.seg{position:relative}
.seg button{position:relative;z-index:1}
.seg.has-ink button[aria-pressed=true]{background:transparent;box-shadow:none}
.seg-ink{position:absolute;left:0;top:0;border-radius:calc(var(--radius-btn) - 3px);background:var(--surface);box-shadow:var(--shadow-1);pointer-events:none}
.seg.ink-ready .seg-ink{transition:transform var(--dur-base) var(--ease),width var(--dur-base) var(--ease)}
/* 선택 줄 */
.dt-sel[hidden]{display:none}
.dt-sel.ck-in{animation:ck-down var(--dur-base) var(--ease)}
/* 진행 막대가 차오른다 */
.progress i{animation:ck-fill var(--dur-slow) var(--ease) both}
.sv-stage .progress i{animation-delay:120ms}
/* 화면이 나타날 때: 내용이 아래에서 8px 올라오며 차례로 */
.sv-stage .app-main>*,.sv-stage>:not(.frame),.sv-stage>.frame>div[style]{animation:ck-up var(--dur-slow) var(--ease) both}
.sv-stage .app-main>:nth-child(2){animation-delay:40ms}
.sv-stage .app-main>:nth-child(3){animation-delay:80ms}
.sv-stage .app-main>:nth-child(4){animation-delay:120ms}
.sv-stage .app-main>:nth-child(n+5){animation-delay:160ms}
/* 목록 ↔ 상세: 들어갈 때 오른쪽에서, 뒤로 갈 때 왼쪽에서 */
html.ck-from-r .sv-stage .app-main>*,html.ck-from-l .sv-stage .app-main>*{animation:none}
html.ck-from-r .sv-stage .app-main{animation:ck-in-r var(--dur-base) var(--ease) both}
html.ck-from-l .sv-stage .app-main{animation:ck-in-l var(--dur-base) var(--ease) both}
html.ck-leave .sv-stage .app-main{opacity:0;transform:translateX(calc(var(--ck-dir, 0) * -16px));transition:opacity 120ms var(--ease),transform 120ms var(--ease)}
/* 행이 사라지고 돌아온다 */
.ck-out{opacity:0;transition:opacity var(--dur-fast) var(--ease)}
.ck-in{animation:ck-fade var(--dur-base) var(--ease)}
/* 토스트 */
.ck-toast{position:fixed;left:50%;bottom:24px;z-index:300;display:flex;align-items:center;gap:var(--space-3);max-width:min(calc(100vw - 32px),440px);padding:12px 10px 12px 18px;border-radius:var(--radius-lg);background:var(--neutral-900);color:var(--neutral-0);font:600 var(--fs-body-s)/1.45 var(--font-body);box-shadow:var(--shadow-overlay);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform var(--dur-base) var(--ease),opacity var(--dur-fast) var(--ease)}
.ck-toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.ck-toast .ico{width:20px;height:20px;flex:none;color:var(--present-solid)}
.ck-toast span{flex:1;min-width:0}
.ck-toast button{flex:none;border:0;background:transparent;color:var(--primary-300);font:700 var(--fs-body-s) var(--font-body);cursor:pointer;padding:6px 10px;border-radius:8px}
.ck-toast button:hover{background:var(--neutral-800)}
/* 확인 시트: 아래에서 올라온다 */
.ck-sheet{position:fixed;inset:0;z-index:310}
.ck-scrim{position:absolute;inset:0;background:var(--neutral-900);opacity:0;transition:opacity var(--dur-base) var(--ease)}
.ck-sheet.on .ck-scrim{opacity:.45}
.ck-sheet-p{position:absolute;left:50%;bottom:16px;width:min(calc(100% - 32px),420px);box-sizing:border-box;transform:translate(-50%,calc(100% + 40px));background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);padding:var(--space-6);display:grid;gap:var(--space-2);transition:transform var(--dur-base) var(--ease)}
.ck-sheet.on .ck-sheet-p{transform:translate(-50%,0)}
.ck-sheet-p b{font-size:var(--fs-h4);font-weight:800;letter-spacing:-0.01em;color:var(--text)}
.ck-sheet-p p{margin:0 0 var(--space-3);color:var(--text-2);font-size:var(--fs-body-s);line-height:1.6}
.ck-sheet-f{display:flex;gap:var(--space-2)}
.ck-sheet-f .btn{flex:1}
/* 행 메뉴 */
.ck-pop{position:fixed;z-index:305;transform-origin:top right;animation:ck-pop-in var(--dur-fast) var(--ease)}
.ck-pop.up{transform-origin:bottom right}
@keyframes ck-pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ck-pop-in{from{opacity:0;transform:scale(.96) translateY(-4px)}}
@keyframes ck-up{from{opacity:0;transform:translateY(8px)}}
@keyframes ck-down{from{opacity:0;transform:translateY(-6px)}}
@keyframes ck-in-r{from{opacity:0;transform:translateX(24px)}}
@keyframes ck-in-l{from{opacity:0;transform:translateX(-24px)}}
@keyframes ck-fill{from{width:0}}
@keyframes ck-fade{from{opacity:0}}
@media (prefers-reduced-motion: reduce){.btn:active,.chipx:active,.fchip:active,.seg button:active,.rcard:active,.nav-item:active,.tab:active,.sg-card:active .sg-thumb{transform:none}}
#interaction code{white-space:nowrap}
@media print{.ck-toast,.ck-sheet,.ck-pop{display:none!important}}