/* 움직임(아이폰 느낌). 스프링 곡선: 빠르게 출발해 부드럽게 멈춤 */
:root {
  --spring: cubic-bezier(.32, .72, 0, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ── 누르는 느낌: 누르면 살짝 작아지고 놓으면 통통 돌아옴 ── */
:is(button, .btn, .app, .chip, .drawer__item, .dv-item__main, .link, label.btn, .dv-crumb, .dv-action, .dv-tree__pick):not(:disabled):not([disabled]) {
  transition: transform .5s var(--bounce), background-color .2s, color .2s, box-shadow .25s, opacity .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
:is(button, .btn, .app, .chip, label.btn, .dv-tree__pick):not(:disabled):not([disabled]):active { transform: scale(.95); transition-duration: .1s; }
:is(.dv-item__main, .drawer__item, .dv-action, .link):not(:disabled):active { transform: scale(.98); transition-duration: .1s; }
/* 자기 자리를 transform으로 잡는 것들 */
.dv-viewer__nav, .dv-viewer__nav:active { transition: background-color .2s, opacity .2s !important; transform: translateY(-50%) !important; }
.dv-list[data-layout="list"] .dv-item__more, .dv-list[data-layout="list"] .dv-item__more:active { transform: translateY(-50%) !important; }
.home-editing .app, .app.is-dragging { transition: none !important; }

/* ── 세그먼트 알약 ── */
.seg { position: relative; isolation: isolate; }
.seg.has-pill::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--pill-w); height: var(--pill-h); transform: translate(var(--pill-x), var(--pill-y));
  border-radius: 10px; background: var(--seg-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .04);
  transition: transform .5s var(--spring), width .5s var(--spring), height .5s var(--spring);
}
.seg.has-pill.pill-still::before { transition: none; }
.seg.has-pill > button { position: relative; z-index: 1; transition: color .25s, transform .5s var(--bounce); }
.seg.has-pill > button[aria-pressed="true"] { background: transparent; box-shadow: none; }

/* ── 창: 휴대폰은 아래에서 올라오고, 넓은 화면은 가운데서 살짝 커지며 나타남 ── */
@keyframes rl-sheet-up { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes rl-sheet-down { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }
@keyframes rl-zoom-in { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rl-zoom-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes rl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rl-drawer-in { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes rl-drawer-out { from { transform: none; } to { transform: translate3d(-100%, 0, 0); } }
@keyframes rl-viewer-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes rl-viewer-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.94); } }
@keyframes rl-rise { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rl-drop { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
@keyframes rl-push { from { opacity: .4; transform: translate3d(36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes rl-back { from { opacity: .4; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes rl-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

dialog[open]::backdrop { animation: rl-fade-in .35s var(--ease-out); }
dialog.is-closing::backdrop { animation: rl-fade-out .3s var(--ease-out) forwards; }

.sheet[open], .compose[open] { animation: rl-zoom-in .42s var(--spring); }
.sheet.is-closing, .compose.is-closing { animation: rl-zoom-out .26s var(--ease-out) forwards; }
@media (max-width: 40rem) {
  .sheet[open], .compose[open] { animation: rl-sheet-up .5s var(--spring); }
  .sheet.is-closing, .compose.is-closing { animation: rl-sheet-down .34s var(--spring) forwards; }
}
.drawer { transition: none; transform: none; }
.drawer[open] { animation: rl-drawer-in .45s var(--spring); }
.drawer.is-closing { animation: rl-drawer-out .3s var(--spring) forwards; }
.dv-viewer[open] { animation: rl-viewer-in .4s var(--spring); }
.dv-viewer.is-closing { animation: rl-viewer-out .26s var(--ease-out) forwards; }
.dv-viewer.is-closing::backdrop { animation: rl-fade-out .26s forwards; }

/* 메뉴 안 항목은 차례로 미끄러져 들어옴 */
.drawer[open] .drawer__item { animation: rl-back .5s var(--spring) backwards; }
.drawer[open] .drawer__nav > :nth-child(1) { animation-delay: .03s; }
.drawer[open] .drawer__nav > :nth-child(2) { animation-delay: .05s; }
.drawer[open] .drawer__nav > :nth-child(3) { animation-delay: .07s; }
.drawer[open] .drawer__nav > :nth-child(4) { animation-delay: .09s; }
.drawer[open] .drawer__nav > :nth-child(5) { animation-delay: .11s; }
.drawer[open] .drawer__nav > :nth-child(6) { animation-delay: .13s; }
.drawer[open] .drawer__nav > :nth-child(7) { animation-delay: .15s; }
.drawer[open] .drawer__nav > :nth-child(8) { animation-delay: .17s; }
.drawer[open] .drawer__nav > :nth-child(9) { animation-delay: .19s; }
.drawer[open] .drawer__nav > :nth-child(n+10) { animation-delay: .21s; }

/* 창 안 구역도 살짝 늦게 떠오름 */
.sheet[open] .sheet__sec { animation: rl-drop .45s var(--spring) backwards; }
.sheet[open] .sheet__sec:nth-of-type(2) { animation-delay: .04s; }
.sheet[open] .sheet__sec:nth-of-type(3) { animation-delay: .07s; }
.sheet[open] .sheet__sec:nth-of-type(n+4) { animation-delay: .1s; }

/* ── 알림: 아래에서 튀어 오름 ── */
.toast { transform: translate(-50%, 1.25rem) scale(.92); transition: opacity .25s var(--ease-out), transform .55s var(--bounce); }
.toast.is-on { transform: translate(-50%, 0) scale(1); }

/* ── 숨겼다 보이는 것들 ── */
.dv-selbar:not([hidden]) { animation: rl-rise .45s var(--spring); }
.dv-uploads:not([hidden]) { animation: rl-rise .45s var(--spring); }
.dv-viewer__info:not([hidden]) { animation: rl-drop .35s var(--spring); }
.dv-share__link:not([hidden]) { animation: rl-drop .35s var(--spring); }
.dv-drop:not([hidden]) { animation: rl-fade-in .2s; }
#home-notice:not([hidden]), .dv-trash-note:not([hidden]) { animation: rl-drop .4s var(--spring); }
.msg.is-error:not(:empty), .msg.is-ok:not(:empty) { animation: rl-drop .3s var(--spring); }
.badge:not([hidden]) { animation: rl-pop .4s var(--bounce); }

/* 휴대폰 메일: 목록 ↔ 읽기 */
@media (max-width: 59.99rem) {
  body.is-reading .mail__read { animation: rl-push .45s var(--spring); }
  body:not(.is-reading) .mail__list { animation: rl-back .45s var(--spring); }
}

/* 체크 표시 */
.ti__check { transition: background-color .25s, border-color .25s, transform .5s var(--bounce); }
.ti__check svg { transition: stroke .2s; }
.dv-item.is-sel .dv-check::after { animation: rl-pop .35s var(--bounce); }
.dv-item { transition: box-shadow .25s, background-color .25s, transform .5s var(--bounce); }
.dv-check { transition: background-color .2s, border-color .2s; }
.app__ctrl > * { animation: rl-pop .35s var(--bounce); }
.home-editing .app__ctrl > * { animation: rl-pop .35s var(--bounce); }

/* 입력칸 포커스, 스위치 */
.input, .select, .dv-search, .stack-input { transition: border-color .2s, background-color .2s, box-shadow .25s; }
.switch input { transition: background-color .3s; }
.switch input::after { transition: transform .45s var(--bounce); }
.dv-meter__bar i, .peek-meter > i b, .dv-up__bar i { transition: width .6s var(--spring); }

/* ── 동작 줄이기 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}