/* =====================================================================
 * 용어별 실물 미리보기(데모) 스타일 — HTML 조각은 demos.js
 * ---------------------------------------------------------------------
 * 규칙
 *  - 프레임(.dm) 가로 = 100cqw, 세로 = 65cqw. 크기·위치는 전부 cqw.
 *    → 사전 표(약 168px)와 인스펙터(약 280px)에서 같은 데모가 비율 그대로 커집니다.
 *  - 색은 index.html :root 토큰만(--surface --mock --mock2 --mock-ink --ink --muted
 *    --line --callout --callout-ink --accent --dim --hl). 다크 모드 자동 대응.
 *  - 애니메이션은 순수 CSS 무한 반복. 아래 공통 규칙이 길이(--dur)·반복·위상(--ph)을
 *    한 번에 주므로, 각 요소는 animation-name 만 적으면 됩니다(필요하면 timing·duration).
 *    shorthand(animation: …)는 쓰지 마세요 — 위상(--ph)이 지워집니다.
 *  - 한 바퀴 안의 "n초 뒤" 동작은 --t(양수 지연)로 줄 수 있습니다(예: 터치 표시 .dm-tap).
 *  - 애니메이션 없는 기본 스타일 = 동작 줄이기 설정의 정지 화면.
 *    "그 용어가 가장 잘 드러나는 순간"을 기본값으로 두세요.
 * ===================================================================== */

:root{--dm-shine:var(--surface);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--dm-shine:var(--mock-ink);} }
:root[data-theme="dark"]{--dm-shine:var(--mock-ink);}

/* ---------- 공통 ---------- */
.dm-wrap{margin:0 0 10px;}
.dm{--dur:3.6s; --o:cubic-bezier(.22,1,.36,1); --in:cubic-bezier(.55,0,.75,.25); --io:cubic-bezier(.65,0,.35,1);
  position:relative; display:block; width:100%; max-width:168px; aspect-ratio:160/104; container-type:inline-size;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden;
  color:var(--ink); line-height:1; text-align:left; font-weight:400; letter-spacing:0; user-select:none;}
.dm *{box-sizing:border-box; font-size:5.2cqw; line-height:1;
  animation-duration:var(--dur); animation-delay:calc(var(--ph,0s) + var(--t,0s));
  animation-iteration-count:infinite; animation-timing-function:var(--o); animation-fill-mode:both;}
:where(.dm) :where(i,b,s,u,em){display:block; font-style:normal; text-decoration:none;}
.dm b{font-weight:700;}
.dm .a{position:absolute;}
.dm .tx{white-space:nowrap; color:var(--ink);}
.dm .tx.s{font-size:4.2cqw; color:var(--muted);}
.dm .tx.r{color:var(--callout);}
.dm .tx.w{color:var(--surface);}
.dm .tx.c{text-align:center;}
.dm .mono{font-family:var(--mono);}
.dm .dm-l{height:3.6cqw; border-radius:2cqw; background:var(--mock2); margin:0 0 3cqw;}
.dm .dm-l.k{background:var(--ink); opacity:.72;}
.dm .dm-l.r{background:var(--callout);}
.dm .dm-l.w{background:var(--surface);}
.dm .dm-l.m0{margin:0;}
.dm .dm-l.c{margin-left:auto; margin-right:auto;}
.dm .w20{width:20%} .dm .w30{width:30%} .dm .w40{width:40%} .dm .w50{width:50%} .dm .w60{width:60%}
.dm .w70{width:70%} .dm .w80{width:80%} .dm .w90{width:90%} .dm .w100{width:100%}
.dm .w45{width:45%} .dm .w55{width:55%} .dm .w85{width:85%}
.dm .row{display:flex; align-items:center; gap:3cqw;}
.dm .grow{flex:1; min-width:0;}
.dm .th{flex:none; width:10cqw; height:10cqw; border-radius:2cqw; background:var(--mock2);}
/* 공통 바탕 화면 */
.dm-scr{position:absolute; inset:0; padding:16cqw 8cqw 0;}
.dm-hd{position:absolute; top:0; left:0; right:0; height:10cqw; background:var(--mock); border-bottom:1px solid var(--line); z-index:1;}
.dm-cards{display:flex; gap:4cqw; margin-top:5cqw;}
.dm-cards i{flex:1; height:20cqw; border-radius:2.5cqw; background:var(--mock); border:1px solid var(--line);}
.dm-btn{height:7cqw; border-radius:2cqw; background:var(--callout);}
.dm-btn.tx{display:flex; align-items:center; justify-content:center; color:var(--callout-ink); font-weight:700;}
.dm-card{background:var(--surface); border:1px solid var(--line); border-radius:3cqw; box-shadow:0 2cqw 6cqw rgba(0,0,0,.22);}
/* 딤: 열림 4~16% / 닫힘 82~94% (모달·시트·드로어 공통 박자) */
.dm-dim{position:absolute; inset:0; background:var(--dim); animation-name:dm-fade; z-index:2;}
@keyframes dm-fade{0%,4%{opacity:0} 16%,82%{opacity:1} 94%,100%{opacity:0}}
/* 터치 표시(누름): --t 시점에 한 번 퍼짐 */
.dm-tap{position:absolute; width:10cqw; height:10cqw; margin:-5cqw 0 0 -5cqw; border-radius:50%; background:var(--callout);
  opacity:0; z-index:8; pointer-events:none; animation-name:dm-tap; animation-timing-function:ease-out;}
@keyframes dm-tap{0%{opacity:0; transform:scale(.3)} 3%{opacity:.5; transform:scale(.6)} 11%,100%{opacity:0; transform:scale(1.8)}}
/* 손가락(제스처) 표시: 통일된 반투명 원 + 테두리. 움직임은 데모별 keyframes */
.dm-fg{position:absolute; left:0; top:0; width:9cqw; height:9cqw; margin:-4.5cqw 0 0 -4.5cqw; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 .8cqw var(--surface); opacity:0; z-index:9; pointer-events:none;}
/* 마우스 커서(PC 호버 용어) */
.dm-cur{position:absolute; left:0; top:0; width:4.6cqw; height:6.8cqw; background:var(--ink); z-index:9;
  clip-path:polygon(0 0,0 78%,22% 61%,37% 96%,50% 90%,36% 57%,64% 57%);}
/* 아이콘 조각 */
.ic-chev{position:relative; flex:none; width:4cqw; height:4cqw; color:var(--mock-ink);}
.ic-chev::before{content:""; position:absolute; left:50%; top:50%; width:55%; height:55%;
  border-right:max(1.2px,.8cqw) solid currentColor; border-bottom:max(1.2px,.8cqw) solid currentColor;
  transform:translate(-50%,-75%) rotate(45deg);}
.ic-chev.rt::before{transform:translate(-75%,-50%) rotate(-45deg);}
.ic-chev.lf::before{transform:translate(-25%,-50%) rotate(135deg);}
.ic-chev.up::before{transform:translate(-50%,-25%) rotate(-135deg);}
.ic-ham{flex:none; width:6cqw; height:4.6cqw;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 20% no-repeat,
             linear-gradient(var(--ink),var(--ink)) 0 50%/100% 20% no-repeat,
             linear-gradient(var(--ink),var(--ink)) 0 100%/100% 20% no-repeat;}
.ic-ham.g{opacity:.55;}
.ic-spin{flex:none; width:10cqw; height:10cqw; border-radius:50%; border:1.3cqw solid var(--mock2); border-top-color:var(--callout);
  animation-name:dm-rot; animation-duration:.8s; animation-timing-function:linear;}
@keyframes dm-rot{to{transform:rotate(360deg)}}
.ic-star{flex:none; width:10cqw; height:10cqw; background:var(--mock2);
  clip-path:polygon(50% 2%,62% 36%,98% 37%,69% 59%,79% 94%,50% 73%,21% 94%,31% 59%,2% 37%,38% 36%);}
.ic-chk{position:relative; flex:none; width:5cqw; height:5cqw; border-radius:50%; background:var(--accent);}
.ic-chk::before{content:""; position:absolute; left:50%; top:46%; width:26%; height:48%;
  border-right:max(1.2px,.7cqw) solid var(--surface); border-bottom:max(1.2px,.7cqw) solid var(--surface); transform:translate(-50%,-50%) rotate(45deg);}
.ic-mag{position:relative; flex:none; width:4.4cqw; height:4.4cqw; border:max(1.2px,.7cqw) solid var(--mock-ink); border-radius:50%;}
.ic-mag::after{content:""; position:absolute; right:-1.6cqw; bottom:-1.4cqw; width:1.8cqw; height:max(1.2px,.7cqw); background:var(--mock-ink); transform:rotate(45deg);}
.ic-ico{flex:none; width:5cqw; height:5cqw; border-radius:1.4cqw; border:max(1.2px,.7cqw) solid var(--mock-ink);}
.ic-ico.o{border-radius:50%;}

/* =====================================================================
 * 오버레이
 * ===================================================================== */
/* 모달: 가운데 상자, 딤 있음 */
.dm-box{position:absolute; left:50%; top:50%; width:58cqw; padding:8cqw 6cqw 5cqw; transform:translate(-50%,-50%); z-index:3; animation-name:k-modal;}
.dm-box .dm-l{margin-bottom:2.6cqw;}
.dm-box .dm-btn{margin-top:4cqw;}
.dm-x{position:absolute; top:2.6cqw; right:3cqw; width:3.6cqw; height:3.6cqw; border-radius:50%; background:var(--mock2);}
@keyframes k-modal{
  0%,4%{opacity:0; transform:translate(-50%,-50%) scale(.86)}
  16%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1; transform:translate(-50%,-50%) scale(1); animation-timing-function:var(--in)}
  94%,100%{opacity:0; transform:translate(-50%,-50%) scale(.95)}}
/* 바텀 시트: 아래에서 올라오는 넓은 패널 + 핸들 */
.dm-sheet{position:absolute; left:0; right:0; bottom:0; height:44cqw; padding:3cqw 8cqw 0; background:var(--surface);
  border:1px solid var(--line); border-bottom:0; border-radius:5cqw 5cqw 0 0; box-shadow:0 -1.5cqw 5cqw rgba(0,0,0,.18);
  z-index:3; animation-name:k-up;}
.dm-handle{width:14cqw; height:2.2cqw; border-radius:2cqw; background:var(--mock2); margin:0 auto 4cqw;}
.dm-sheet .dm-l{margin-bottom:2.6cqw;}
.dm-sheet .dm-btn{margin-top:3.4cqw;}
@keyframes k-up{
  0%,4%{transform:translateY(105%)}
  16%{transform:translateY(0)}
  82%{transform:translateY(0); animation-timing-function:var(--in)}
  94%,100%{transform:translateY(105%)}}
/* 드롭다운: 누른 칸 바로 아래로 같은 폭 목록이 펼쳐짐 */
.dd-lb{left:8cqw; top:6cqw;}
.dd-sel{position:absolute; left:8cqw; top:12cqw; width:64cqw; height:10cqw; padding:0 3cqw; border:1px solid var(--line); border-radius:2cqw;
  display:flex; align-items:center; justify-content:space-between; background:var(--surface); animation-name:k-dd-sel;}
.dd-sel .ic-chev{margin-left:auto; animation-name:k-dd-chev;}
.dd-v1,.dd-v2{position:absolute; left:3cqw; top:50%; transform:translateY(-50%);}
.dd-v1{animation-name:k-dd-v1;} .dd-v2{opacity:0; animation-name:k-dd-v2;}
.dd-list{position:absolute; left:8cqw; top:22.6cqw; width:64cqw; background:var(--surface); border:1px solid var(--line); border-radius:0 0 2cqw 2cqw;
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.16); z-index:3; animation-name:k-dd-list;}
.dd-list .tx{height:8.6cqw; display:flex; align-items:center; padding:0 3cqw;}
.dd-list .on{animation-name:k-dd-hov;}
.dd-bg{position:absolute; left:8cqw; right:8cqw; top:30cqw;}
@keyframes k-dd-sel{0%,4%{border-color:var(--line)} 8%,44%{border-color:var(--callout)} 50%,100%{border-color:var(--line)}}
@keyframes k-dd-chev{0%,4%{transform:none} 12%,42%{transform:rotate(180deg)} 50%,100%{transform:none}}
@keyframes k-dd-list{0%,5%{clip-path:inset(0 0 100% 0); opacity:0} 14%,42%{clip-path:inset(0 0 0 0); opacity:1} 48%,100%{clip-path:inset(0 0 100% 0); opacity:0}}
@keyframes k-dd-hov{0%,30%{background:transparent} 34%,48%{background:var(--hl)} 52%,100%{background:transparent}}
@keyframes k-dd-v1{0%,44%{opacity:1} 48%,94%{opacity:0} 98%,100%{opacity:1}}
@keyframes k-dd-v2{0%,44%{opacity:0} 48%,94%{opacity:1} 98%,100%{opacity:0}}
.dm-dropdown .dm-tap.t1{left:40cqw; top:17cqw; --t:0s;}
.dm-dropdown .dm-tap.t2{left:30cqw; top:44cqw; --t:calc(var(--dur) * .36);}
/* 툴팁: 커서를 올리면 검은 말풍선 한 줄 */
.tt-row{position:absolute; left:14cqw; top:36cqw; display:flex; align-items:center; gap:2cqw;}
.tt-i{flex:none; width:5.4cqw; height:5.4cqw; border-radius:50%; border:max(1.2px,.6cqw) solid var(--muted); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:3.6cqw; font-weight:700;}
.tt-b{position:absolute; left:61cqw; top:22cqw; transform:translateX(-50%); padding:2cqw 3cqw; border-radius:1.6cqw; background:var(--ink); z-index:3;
  animation-name:k-tt-b;}
.tt-b::after{content:""; position:absolute; left:50%; bottom:-1.6cqw; margin-left:-1.6cqw; border:1.6cqw solid transparent; border-bottom:0; border-top-color:var(--ink);}
.tt-b .tx{font-size:4.2cqw; color:var(--surface);}
.dm-tooltip .dm-cur{transform:translate(61cqw,37cqw); animation-name:k-tt-cur;}
.tt-bg{position:absolute; left:14cqw; right:14cqw; top:48cqw;}
@keyframes k-tt-b{0%,16%{opacity:0; transform:translate(-50%,1.5cqw)} 22%,66%{opacity:1; transform:translate(-50%,0)} 72%,100%{opacity:0; transform:translate(-50%,0)}}
@keyframes k-tt-cur{0%{transform:translate(84cqw,56cqw)} 14%,64%{transform:translate(61cqw,37cqw)} 80%,100%{transform:translate(84cqw,56cqw)}}
/* 팝오버: 눌러서 열리는 흰 판(버튼 포함), 바깥을 누르면 닫힘 */
.po-row{position:absolute; left:8cqw; right:8cqw; top:9cqw; display:flex; align-items:center; justify-content:space-between;}
.po-btn{padding:1.6cqw 2.6cqw; border:1px solid var(--line); border-radius:1.6cqw; font-size:4.2cqw; color:var(--ink); animation-name:k-po-btn;}
.po-p{position:absolute; right:6cqw; top:20cqw; width:56cqw; padding:3.4cqw; z-index:3; animation-name:k-po;}
.po-p::before{content:""; position:absolute; right:8cqw; top:-1.6cqw; width:3cqw; height:3cqw; background:var(--surface);
  border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg);}
.po-p .tx{margin-bottom:2.4cqw;}
.po-p .po-go{display:inline-block; padding:1.6cqw 2.6cqw; border-radius:1.6cqw; background:var(--callout); color:var(--callout-ink); font-size:4cqw; font-weight:700;}
.po-bg{position:absolute; left:8cqw; right:8cqw; top:22cqw;}
@keyframes k-po{0%,8%{opacity:0; transform:translateY(-2cqw) scale(.96)} 16%,74%{opacity:1; transform:none} 82%,100%{opacity:0; transform:translateY(-1cqw)}}
@keyframes k-po-btn{0%,6%{border-color:var(--line)} 10%,76%{border-color:var(--callout)} 82%,100%{border-color:var(--line)}}
.dm-popover .dm-tap.t1{left:78cqw; top:12cqw; --t:0s;}
.dm-popover .dm-tap.t2{left:20cqw; top:55cqw; --t:calc(var(--dur) * .72);}
/* 딤: 뒤를 덮는 반투명 층 — 딤을 누르면 닫힘 */
.dm-dimd .dm-dim{animation-name:k-dimd;}
.dm-dimd .dm-sheet{height:30cqw; animation-name:k-dimd-up;}
.dim-tag{position:absolute; left:6cqw; top:6cqw; z-index:4; padding:1.6cqw 2.6cqw; border-radius:5cqw; background:var(--callout);
  font-size:4cqw; color:var(--callout-ink); font-weight:700; animation-name:k-dimd;}
.dm-dimd .dm-tap{left:58cqw; top:20cqw; --t:calc(var(--dur) * .72); background:var(--surface);}
@keyframes k-dimd{0%,4%{opacity:0} 16%,76%{opacity:1} 86%,100%{opacity:0}}
@keyframes k-dimd-up{0%,4%{transform:translateY(105%)} 16%,76%{transform:none} 86%,100%{transform:translateY(105%)}}

/* =====================================================================
 * 피드백
 * ===================================================================== */
/* 토스트: 딤 없이, 하단 어두운 알약이 떴다 사라짐 */
.dm-toast .dm-tap{left:73cqw; top:50cqw; --t:0s;}
.dm-pill{position:absolute; left:50%; bottom:5cqw; width:62cqw; height:11cqw; padding:0 4.5cqw; border-radius:6cqw; background:var(--ink);
  display:flex; align-items:center; gap:3cqw; box-shadow:0 1.5cqw 4cqw rgba(0,0,0,.22); transform:translate(-50%,0); z-index:3;
  animation-name:k-toast;}
.dm-ok{flex:none; width:4.4cqw; height:4.4cqw; border-radius:50%; background:var(--callout);}
.dm-pl{flex:1; height:3cqw; border-radius:2cqw; background:var(--surface); opacity:.75;}
@keyframes k-toast{
  0%,4%{opacity:0; transform:translate(-50%,150%)}
  16%{opacity:1; transform:translate(-50%,0)}
  82%{opacity:1; transform:translate(-50%,0); animation-timing-function:var(--in)}
  92%,100%{opacity:0; transform:translate(-50%,40%)}}
/* 스켈레톤: 뼈대 위로 빛이 지나감 → 실제 콘텐츠 */
.dm-sk-layer{position:absolute; inset:0; padding:6cqw 8cqw;}
.dm-row{display:flex; align-items:center; gap:4cqw; margin-bottom:4.5cqw;}
.dm-row span{flex:1; min-width:0;}
.dm-row .dm-l:last-child{margin-bottom:0;}
.dm-th{flex:none; width:13cqw; height:13cqw; border-radius:2.5cqw; background:var(--mock2);}
.dm-sk-bone{animation-name:k-bone; animation-timing-function:ease;}
.dm-sk-bone .dm-th,.dm-sk-bone .dm-l{
  background:linear-gradient(100deg,var(--mock2) 0 35%,var(--dm-shine) 50%,var(--mock2) 65% 100%);
  background-size:200cqw 100%; animation-name:k-shim; animation-duration:calc(var(--dur) / 3); animation-timing-function:linear;}
@keyframes k-shim{from{background-position:-150cqw 0} to{background-position:50cqw 0}}
.dm-sk-real{opacity:0; animation-name:k-real;}
.dm-sk-real .dm-th{background:var(--callout); opacity:.28;}
.dm-sk-real .dm-l{background:var(--ink); opacity:.75;}
.dm-sk-real .dm-l.pr{background:var(--callout); opacity:1;}
@keyframes k-bone{0%,55%{opacity:1} 62%,90%{opacity:0} 97%,100%{opacity:1}}
@keyframes k-real{0%,55%{opacity:0; transform:translateY(2cqw)} 62%,90%{opacity:1; transform:none} 97%,100%{opacity:0; transform:none}}
/* 스피너: 레이아웃 없이 도는 아이콘만 */
.dm-spinner .ic-spin{position:absolute; left:43cqw; top:24cqw; width:14cqw; height:14cqw; border-width:1.6cqw;}
.dm-spinner .tx{position:absolute; left:0; right:0; top:44cqw;}
/* 프로그레스 바: 진행률만큼 채워짐 → 완료 */
.pg-card{position:absolute; left:8cqw; right:8cqw; top:12cqw; padding:4cqw;}
.pg-file{flex:none; width:8cqw; height:10cqw; border-radius:1cqw; background:var(--mock2); clip-path:polygon(0 0,65% 0,100% 30%,100% 100%,0 100%);}
.pg-trk{height:2.8cqw; border-radius:2cqw; background:var(--mock2); margin-top:4.5cqw; overflow:hidden;}
.pg-fill{height:100%; width:100%; border-radius:2cqw; background:var(--callout); transform-origin:left; animation-name:k-pg; animation-timing-function:linear;}
.pg-card .ic-chk{animation-name:k-pg-ok;}
.pg-st{position:absolute; left:8cqw; right:8cqw; top:44cqw;}
.pg-st .tx{position:absolute; left:0;}
.pg-st .s1{animation-name:k-pg-s1;} .pg-st .s2{opacity:0; animation-name:k-pg-s2; color:var(--accent);}
@keyframes k-pg{0%,4%{transform:scaleX(0); background:var(--callout)} 18%{transform:scaleX(.22)} 30%{transform:scaleX(.38)} 46%{transform:scaleX(.7)} 62%{transform:scaleX(1); background:var(--callout)} 63%,92%{transform:scaleX(1); background:var(--accent)} 97%,100%{transform:scaleX(0)}}
@keyframes k-pg-ok{0%,62%{opacity:0; transform:scale(.4)} 68%,92%{opacity:1; transform:none} 96%,100%{opacity:0}}
@keyframes k-pg-s1{0%,62%{opacity:1} 66%,94%{opacity:0} 98%,100%{opacity:1}}
@keyframes k-pg-s2{0%,62%{opacity:0} 66%,94%{opacity:1} 98%,100%{opacity:0}}
/* 코치마크: 시스템이 먼저 띄우는 스포트라이트 + 안내 말풍선 */
.cm-ic{position:absolute; top:2.5cqw; width:5cqw; height:5cqw; border-radius:50%; background:var(--mock2); z-index:2;}
.cm-nav{position:absolute; left:0; right:0; bottom:0; height:11cqw; border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:center; background:var(--surface);}
.cm-spot{position:absolute; left:0; top:0; width:13cqw; height:13cqw; margin:-6.5cqw 0 0 -6.5cqw; border-radius:50%;
  box-shadow:0 0 0 100cqw var(--dim), inset 0 0 0 max(1.5px,.7cqw) var(--callout); z-index:4; transform:translate(88cqw,5cqw); animation-name:k-cm-spot;}
.cm-b{position:absolute; left:0; top:0; width:48cqw; padding:3cqw; z-index:5; transform:translate(46cqw,14cqw); animation-name:k-cm-b;}
.cm-b .dm-l{margin-bottom:2cqw;}
.cm-b .cm-n{margin-left:auto; width:12cqw; height:5cqw; border-radius:1.4cqw; background:var(--callout);}
@keyframes k-cm-spot{0%{opacity:0; transform:translate(88cqw,5cqw) scale(1.6)} 8%,44%{opacity:1; transform:translate(88cqw,5cqw)}
  54%,88%{opacity:1; transform:translate(37.5cqw,59.5cqw)} 96%,100%{opacity:0; transform:translate(37.5cqw,59.5cqw)}}
@keyframes k-cm-b{0%,4%{opacity:0; transform:translate(46cqw,14cqw)} 10%,42%{opacity:1; transform:translate(46cqw,14cqw)} 47%{opacity:0; transform:translate(46cqw,14cqw)}
  50%{opacity:0; transform:translate(16cqw,27cqw)} 58%,88%{opacity:1; transform:translate(16cqw,27cqw)} 96%,100%{opacity:0; transform:translate(16cqw,27cqw)}}
.dm-coachmark .dm-tap{left:83cqw; top:31cqw; --t:calc(var(--dur) * .38);}
/* 로딩 오버레이: 화면 전체를 막고 가운데 스피너 */
.lo-cta{position:absolute; left:6cqw; right:6cqw; bottom:4cqw; height:11cqw; border-radius:2.4cqw; background:var(--callout);
  display:flex; align-items:center; justify-content:center; color:var(--callout-ink); font-weight:700;}
.dm-loadingoverlay .dm-dim{animation-name:k-lo;}
.lo-box{position:absolute; left:50%; top:50%; width:22cqw; height:22cqw; margin:-11cqw 0 0 -11cqw; border-radius:4cqw; background:var(--surface);
  display:flex; align-items:center; justify-content:center; z-index:3; animation-name:k-lo;}
.dm-loadingoverlay .dm-tap{left:50cqw; top:55cqw; --t:0s;}
@keyframes k-lo{0%,8%{opacity:0} 14%,74%{opacity:1} 82%,100%{opacity:0}}
/* 오프라인 배너: 상단 띠로 끊김 알림 → 재연결 */
.of-b{position:absolute; left:0; right:0; top:10cqw; height:10cqw; padding:0 5cqw; display:flex; align-items:center; gap:2.4cqw;
  background:var(--ink); z-index:0; animation-name:k-of-b;}
.of-b .tx{font-size:4.2cqw; color:var(--surface);}
.of-b2{background:var(--accent); opacity:0; animation-name:k-of-b2;}
.of-ex{flex:none; width:5cqw; height:5cqw; border-radius:50%; background:var(--callout); color:var(--surface); font-weight:700; font-size:3.8cqw;
  display:flex; align-items:center; justify-content:center;}
.dm-offline .dm-scr{animation-name:k-of-c;}
@keyframes k-of-b{0%,6%{transform:translateY(-100%)} 16%,66%{transform:none; opacity:1} 70%,100%{transform:none; opacity:0}}
@keyframes k-of-b2{0%,66%{opacity:0; transform:none} 70%,82%{opacity:1; transform:none} 92%,100%{opacity:1; transform:translateY(-100%)}}
@keyframes k-of-c{0%,8%{opacity:1; transform:none} 16%,66%{opacity:.35; transform:translateY(10cqw)} 72%,82%{opacity:1; transform:translateY(10cqw)} 92%,100%{opacity:1; transform:none}}

/* =====================================================================
 * 콘텐츠
 * ===================================================================== */
/* 아코디언: 펼치면 아래 항목이 밀려 내려감 */
.dm-acc{position:absolute; inset:0; padding:4cqw 6cqw;}
.dm-ai{border:1px solid var(--line); border-radius:2.5cqw; margin-bottom:2.5cqw; background:var(--surface); overflow:hidden;}
.dm-ah{display:flex; align-items:center; justify-content:space-between; height:10cqw; padding:0 4cqw;}
.dm-ah .dm-l{margin:0;}
.dm-ai.on .dm-ah{background:var(--hl); animation-name:k-acc-hl; animation-timing-function:var(--io);}
.dm-ai.on .dm-ah .dm-l{background:var(--ink); opacity:.75; animation-name:k-acc-ttl; animation-timing-function:var(--io);}
.dm-ai.on .ic-chev{color:var(--callout); transform:rotate(180deg); animation-name:k-rot180; animation-timing-function:var(--io);}
.dm-ap{height:13cqw; padding:0 4cqw; overflow:hidden; animation-name:k-acc; animation-timing-function:var(--io);}
.dm-ap .dm-l:first-child{margin-top:2cqw;}
@keyframes k-acc{0%,10%{height:0} 30%,68%{height:13cqw} 88%,100%{height:0}}
@keyframes k-rot180{0%,10%{transform:none} 30%,68%{transform:rotate(180deg)} 88%,100%{transform:none}}
@keyframes k-acc-hl{0%,10%{background:transparent} 30%,68%{background:var(--hl)} 88%,100%{background:transparent}}
@keyframes k-acc-ttl{0%,10%{background:var(--mock2); opacity:1} 30%,68%{background:var(--ink); opacity:.75} 88%,100%{background:var(--mock2); opacity:1}}
/* 캐러셀: 배너가 옆으로 넘어가고 인디케이터 점이 따라감 */
.dm-carousel{--dur:4.5s;}
.cr-b{position:absolute; left:5cqw; right:5cqw; top:5cqw; height:36cqw; border-radius:3cqw; overflow:hidden;}
.cr-s{display:flex; width:400%; height:100%; animation-name:k-cr; animation-timing-function:var(--io);}
.cr-s > i{flex:1; height:100%; padding:7cqw 6cqw; position:relative;}
.cr-s > i .dm-l{background:var(--surface); opacity:.95;}
.cr-s > i::after{content:""; position:absolute; right:7cqw; bottom:6cqw; width:16cqw; height:16cqw; border-radius:50%; background:var(--surface); opacity:.28;}
.cr-1{background:var(--callout);} .cr-2{background:var(--accent);} .cr-3{background:var(--mock-ink);}
.cr-d{position:absolute; left:50%; top:44cqw; transform:translateX(-50%); display:flex; gap:2cqw;}
.cr-d i{width:2.2cqw; height:2.2cqw; border-radius:2cqw; background:var(--mock2);}
.cr-di{position:absolute; left:0; top:0; width:2.2cqw !important; background:var(--callout) !important; animation-name:k-cr-d; animation-timing-function:var(--io);}
.cr-bg{position:absolute; left:5cqw; right:5cqw; top:52cqw;}
@keyframes k-cr{0%,22%{transform:none} 30%,52%{transform:translateX(-25%)} 60%,82%{transform:translateX(-50%)} 90%,100%{transform:translateX(-75%)}}
@keyframes k-cr-d{0%,22%{transform:none} 30%,52%{transform:translateX(4.2cqw)} 60%,82%{transform:translateX(8.4cqw)} 90%,100%{transform:none}}
/* 칩: 눌러서 켜고 끄는 알약 */
.cp-row{position:absolute; left:6cqw; right:0; top:14cqw; display:flex; gap:2.4cqw;}
.cp{position:relative; flex:none; height:9cqw; padding:0 3.4cqw; border:1px solid var(--line); border-radius:5cqw; display:flex; align-items:center; font-size:4.4cqw; color:var(--ink); background:var(--surface);}
.cp-on{position:absolute; inset:-1px; border-radius:5cqw; background:var(--callout); color:var(--callout-ink); display:flex; align-items:center; justify-content:center; gap:1cqw; font-size:4.4cqw; font-weight:700;}
.cp-on::before{content:""; width:1.3cqw; height:2.4cqw; border-right:max(1.2px,.6cqw) solid currentColor; border-bottom:max(1.2px,.6cqw) solid currentColor; transform:rotate(45deg) translateY(-.4cqw);}
.cp2 .cp-on{animation-name:k-cp2;} .cp3 .cp-on{animation-name:k-cp3;}
@keyframes k-cp2{0%,8%{opacity:0; transform:scale(.9)} 13%,68%{opacity:1; transform:none} 73%,100%{opacity:0; transform:scale(.95)}}
@keyframes k-cp3{0%,38%{opacity:0; transform:scale(.9)} 43%,92%{opacity:1; transform:none} 97%,100%{opacity:0}}
.dm-chip .dm-tap.t1{left:36cqw; top:18.5cqw; --t:0s;}
.dm-chip .dm-tap.t2{left:60cqw; top:18.5cqw; --t:calc(var(--dur) * .3);}
.dm-chip .dm-tap.t3{left:36cqw; top:18.5cqw; --t:calc(var(--dur) * .6);}
.cp-bg{position:absolute; left:6cqw; right:6cqw; top:30cqw;}
/* 별점: 왼쪽부터 차례로 채워짐 */
.rtg{position:absolute; left:15cqw; top:16cqw; display:flex; gap:2cqw;}
.rtg > i{position:relative; width:12cqw; height:12cqw;}
.rtg .ic-star{position:absolute; inset:0; width:100%; height:100%;}
.rtg .f{background:var(--callout);}
.rtg .f1{animation-name:k-rt1;} .rtg .f2{animation-name:k-rt2;} .rtg .f3{animation-name:k-rt3;} .rtg .f4{animation-name:k-rt4;}
@keyframes k-rt1{0%,8%{opacity:0; transform:scale(.5)} 12%,88%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-rt2{0%,15%{opacity:0; transform:scale(.5)} 19%,88%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-rt3{0%,22%{opacity:0; transform:scale(.5)} 26%,88%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-rt4{0%,29%{opacity:0; transform:scale(.5)} 33%{opacity:1; transform:scale(1.2)} 37%,88%{opacity:1; transform:none} 94%,100%{opacity:0}}
.rt-sc{position:absolute; left:0; right:0; top:36cqw; display:flex; justify-content:center; align-items:baseline; gap:2cqw; animation-name:k-rt-sc;}
.rt-sc b{font-size:8cqw; color:var(--ink);}
@keyframes k-rt-sc{0%,34%{opacity:0} 40%,88%{opacity:1} 94%,100%{opacity:0}}
.dm-rating .dm-fg{animation-name:k-rt-fg;}
@keyframes k-rt-fg{0%,6%{opacity:0; transform:translate(21cqw,24cqw)} 9%{opacity:.35; transform:translate(21cqw,24cqw)} 33%{opacity:.35; transform:translate(63cqw,24cqw)} 40%,100%{opacity:0; transform:translate(63cqw,24cqw)}}

/* =====================================================================
 * 상품 목록·커머스
 * ===================================================================== */
.dm-filter{--dur:4s;}
.fi-row{position:absolute; left:5cqw; top:4cqw; display:flex; gap:2cqw;}
.fi-row .cp{height:8cqw; font-size:4cqw; padding:0 3cqw;}
.fi-row .cp-on{font-size:4cqw;}
.fi-row .cp-on::before{display:none;}
.fi-all .cp-on{animation-name:k-fi-all;} .fi-free .cp-on{animation-name:k-fi-free;}
@keyframes k-fi-all{0%,10%{opacity:1} 14%,84%{opacity:0} 90%,100%{opacity:1}}
@keyframes k-fi-free{0%,10%{opacity:0} 14%,84%{opacity:1} 90%,100%{opacity:0}}
.fi-cnt{position:absolute; left:5cqw; top:14.5cqw;}
.fi-cnt .tx{position:absolute; left:0; top:0;}
.fi-cnt .c1{animation-name:k-fi-all;} .fi-cnt .c2{opacity:0; animation-name:k-fi-free;}
.fi-list{position:absolute; left:5cqw; right:5cqw; top:21cqw;}
.fi-it{display:flex; align-items:center; gap:3cqw; height:10.5cqw; overflow:hidden;}
.fi-it .th{width:8cqw; height:8cqw;}
.fi-it .grow .dm-l{margin-bottom:2cqw;}
.fi-it .grow .dm-l:last-child{margin:0;}
.fi-it.out{animation-name:k-fi-out; animation-timing-function:var(--io);}
@keyframes k-fi-out{0%,14%{height:10.5cqw; opacity:1} 24%,84%{height:0; opacity:0} 94%,100%{height:10.5cqw; opacity:1}}
.dm-filter .dm-tap{left:29cqw; top:8cqw; --t:0s;}
/* 카운트다운: 1초씩 줄다가 0이 되면 마감 */
.dm-countdown{--dur:4.5s;}
.cd-card{position:absolute; left:6cqw; right:6cqw; top:5cqw; height:30cqw; padding:3.4cqw 4cqw; border-radius:3cqw; background:var(--hl); border:1px solid var(--line);}
.cd-t{display:flex; align-items:flex-end; margin-top:3cqw; font-family:var(--mono); font-weight:700; animation-name:k-cd-dim;}
.cd-t > span,.cd-t .od i{font-size:10cqw; height:10cqw; line-height:10cqw; color:var(--ink);}
.cd-t .od{height:10cqw; overflow:hidden;}
.cd-t .od > span{display:block; animation-name:k-cd-od;}
.cd-t .od i{font-family:var(--mono); color:var(--callout);}
@keyframes k-cd-od{0%,19%{transform:none} 22%,39%{transform:translateY(-10cqw)} 42%,59%{transform:translateY(-20cqw)} 62%,100%{transform:translateY(-30cqw)}}
@keyframes k-cd-dim{0%,62%{opacity:1} 66%,94%{opacity:.3} 98%,100%{opacity:1}}
.cd-bar{height:2cqw; border-radius:2cqw; background:var(--mock2); margin-top:3.4cqw; overflow:hidden;}
.cd-bar i{height:100%; width:30%; background:var(--callout); transform-origin:left; animation-name:k-cd-bar; animation-timing-function:linear;}
@keyframes k-cd-bar{0%{transform:none} 62%,96%{transform:scaleX(0)} 100%{transform:none}}
.cd-stamp{position:absolute; right:7cqw; top:15cqw; padding:1.6cqw 3cqw; border:max(1.5px,.7cqw) solid var(--callout); border-radius:1.6cqw; color:var(--callout); font-weight:700; font-size:5cqw;
  transform:rotate(-8deg); opacity:0; animation-name:k-cd-st;}
@keyframes k-cd-st{0%,62%{opacity:0; transform:rotate(-8deg) scale(1.5)} 67%,94%{opacity:1; transform:rotate(-8deg)} 98%,100%{opacity:0}}
.cd-btn{position:absolute; left:6cqw; right:6cqw; top:42cqw; height:11cqw; border-radius:2.4cqw;}
.cd-btn .tx{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:2.4cqw; font-weight:700;}
.cd-btn .b1{background:var(--callout); color:var(--callout-ink); animation-name:k-cd-b1;}
.cd-btn .b2{background:var(--mock2); color:var(--mock-ink); opacity:0; animation-name:k-cd-b2;}
@keyframes k-cd-b1{0%,62%{opacity:1} 66%,94%{opacity:0} 98%,100%{opacity:1}}
@keyframes k-cd-b2{0%,62%{opacity:0} 66%,94%{opacity:1} 98%,100%{opacity:0}}

/* =====================================================================
 * 내비게이션
 * ===================================================================== */
/* 드로어: 옆에서 서랍처럼, 뒤에 딤 */
.dm-hd .ic-ham{position:absolute; left:4cqw; top:2.7cqw;}
.dm-drawer .dm-tap{left:7cqw; top:5cqw; --t:0s;}
.dw-p{position:absolute; left:0; top:0; bottom:0; width:56cqw; padding:6cqw; background:var(--surface); border-right:1px solid var(--line);
  box-shadow:2cqw 0 6cqw rgba(0,0,0,.2); z-index:3; animation-name:k-drawer;}
.dw-pf{display:flex; align-items:center; gap:3cqw; padding-bottom:4cqw; margin-bottom:4cqw; border-bottom:1px solid var(--line);}
.dw-av{flex:none; width:8cqw; height:8cqw; border-radius:50%; background:var(--callout); opacity:.85;}
@keyframes k-drawer{0%,4%{transform:translateX(-102%)} 16%{transform:none} 82%{transform:none; animation-timing-function:var(--in)} 94%,100%{transform:translateX(-102%)}}
/* 메가 메뉴: GNB에 올리면 화면 폭 다단 패널 */
.mm-hd{position:absolute; left:0; right:0; top:0; height:11cqw; background:var(--surface); border-bottom:1px solid var(--line); z-index:2;
  display:flex; align-items:center; gap:4cqw; padding:0 4cqw;}
.mm-logo{flex:none; width:7cqw; height:4.4cqw; border-radius:1cqw; background:var(--callout);}
.mm-hd .dm-l{flex:none; width:11cqw; margin:0;}
.mm-ul{position:absolute; left:30cqw; top:9.4cqw; width:11cqw; height:max(2px,1cqw); background:var(--callout); z-index:3; animation-name:k-mm-ul;}
.mm-p{position:absolute; left:0; right:0; top:11cqw; height:31cqw; padding:4cqw 5cqw; background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 3cqw 6cqw rgba(0,0,0,.14); display:grid; grid-template-columns:repeat(3,1fr); gap:4cqw; z-index:2; animation-name:k-mm-p;}
.mm-p .dm-l{margin-bottom:2.6cqw;}
.dm-megamenu .dm-cur{transform:translate(35cqw,6cqw); animation-name:k-mm-cur;}
@keyframes k-mm-cur{0%{transform:translate(78cqw,52cqw)} 14%,78%{transform:translate(35cqw,6cqw)} 92%,100%{transform:translate(78cqw,52cqw)}}
@keyframes k-mm-ul{0%,12%{opacity:0} 16%,80%{opacity:1} 86%,100%{opacity:0}}
@keyframes k-mm-p{0%,14%{opacity:0; transform:translateY(-3cqw)} 22%,80%{opacity:1; transform:none} 88%,100%{opacity:0; transform:translateY(-2cqw)}}
/* 플라이아웃: 꺾쇠 항목에 올리면 옆으로 한 단계씩 */
.fo-m,.fo-s1,.fo-s2{position:absolute; padding:1.4cqw; background:var(--surface); border:1px solid var(--line); border-radius:2cqw;}
.fo-m{left:5cqw; top:5cqw; width:33cqw;}
.fo-s1{left:39cqw; top:14cqw; width:29cqw; box-shadow:0 2cqw 5cqw rgba(0,0,0,.15); z-index:2; animation-name:k-fo-s1;}
.fo-s2{left:69cqw; top:23cqw; width:26cqw; box-shadow:0 2cqw 5cqw rgba(0,0,0,.15); z-index:3; animation-name:k-fo-s2;}
.fo-r{display:flex; align-items:center; justify-content:space-between; height:9cqw; padding:0 2cqw; border-radius:1.4cqw;}
.fo-r .dm-l{margin:0;}
.fo-m .fo-r.on{animation-name:k-fo-h1;}
.fo-s1 .fo-r.on{animation-name:k-fo-h2;}
.dm-flyout .dm-cur{transform:translate(55cqw,29cqw); animation-name:k-fo-cur;}
@keyframes k-fo-cur{0%{transform:translate(55cqw,56cqw)} 12%,34%{transform:translate(24cqw,20cqw)} 42%,80%{transform:translate(55cqw,29cqw)} 92%,100%{transform:translate(55cqw,56cqw)}}
@keyframes k-fo-h1{0%,11%{background:transparent} 14%,84%{background:var(--hl)} 90%,100%{background:transparent}}
@keyframes k-fo-h2{0%,40%{background:transparent} 43%,84%{background:var(--hl)} 90%,100%{background:transparent}}
@keyframes k-fo-s1{0%,12%{opacity:0; transform:translateX(-3cqw)} 18%,84%{opacity:1; transform:none} 90%,100%{opacity:0}}
@keyframes k-fo-s2{0%,42%{opacity:0; transform:translateX(-3cqw)} 48%,84%{opacity:1; transform:none} 90%,100%{opacity:0}}
/* 트리 메뉴: 상위 항목 아래로 하위 메뉴(들여쓰기) */
.tmn{position:absolute; inset:0; padding:3cqw 6cqw;}
.tm-r{display:flex; align-items:center; gap:2.4cqw; height:9cqw;}
.tm-r .dm-l{margin:0;}
.tm-r .fd{flex:none; width:4.6cqw; height:3.8cqw; border-radius:.8cqw; background:var(--mock-ink); opacity:.55;}
.tm-r.on .ic-chev{color:var(--callout); transform:rotate(90deg); animation-name:k-tm-chev; animation-timing-function:var(--io);}
.tm-r.on .dm-l{background:var(--ink); opacity:.72;}
.tm-c{height:21cqw; overflow:hidden; position:relative; animation-name:k-tm-c; animation-timing-function:var(--io);}
.tm-c::before{content:""; position:absolute; left:2cqw; top:0; bottom:2cqw; width:1px; background:var(--line);}
.tm-cr{display:flex; align-items:center; gap:2.4cqw; height:7cqw; padding-left:9cqw;}
.tm-cr::before{content:""; flex:none; width:1.6cqw; height:1.6cqw; border-radius:50%; background:var(--mock-ink);}
.tm-cr .dm-l{margin:0;}
.tm-cr.sel .dm-l{background:var(--callout);}
.tm-cr.sel::before{background:var(--callout);}
@keyframes k-tm-c{0%,10%{height:0} 28%,70%{height:21cqw} 88%,100%{height:0}}
@keyframes k-tm-chev{0%,10%{transform:none} 28%,70%{transform:rotate(90deg)} 88%,100%{transform:none}}
.dm-treemenu .dm-tap{left:14cqw; top:16.5cqw; --t:0s;}
.dm-treemenu .dm-tap.t2{--t:calc(var(--dur) * .68);}
/* 햄버거: ☰ 아이콘 자체 → 누르면 ✕로 바뀌며 메뉴가 열림 */
.hb-hd{position:absolute; left:0; right:0; top:0; height:13cqw; background:var(--mock); border-bottom:1px solid var(--line); z-index:4;}
.hb-ic{position:absolute; left:5cqw; top:3.5cqw; width:8cqw; height:6cqw;}
.hb-ic i{position:absolute; left:0; width:100%; height:1.2cqw; border-radius:1cqw; background:var(--ink);}
.hb-ic .b1{top:0; transform:translateY(2.4cqw) rotate(45deg); background:var(--callout); animation-name:k-hb1;}
.hb-ic .b2{top:2.4cqw; opacity:0; animation-name:k-hb2;}
.hb-ic .b3{top:4.8cqw; transform:translateY(-2.4cqw) rotate(-45deg); background:var(--callout); animation-name:k-hb3;}
@keyframes k-hb1{0%,12%{transform:none} 22%,78%{transform:translateY(2.4cqw) rotate(45deg); background:var(--callout)} 88%,100%{transform:none}}
@keyframes k-hb2{0%,12%{opacity:1} 18%,82%{opacity:0} 88%,100%{opacity:1}}
@keyframes k-hb3{0%,12%{transform:none} 22%,78%{transform:translateY(-2.4cqw) rotate(-45deg); background:var(--callout)} 88%,100%{transform:none}}
.hb-ring{position:absolute; left:2cqw; top:0.5cqw; width:14cqw; height:12cqw; border-radius:2.4cqw; border:max(1.5px,.6cqw) solid var(--callout); z-index:5; animation-name:k-hb-ring;}
@keyframes k-hb-ring{0%{opacity:0; transform:scale(1.25)} 6%{opacity:1; transform:none} 12%,100%{opacity:0}}
.hb-dim{position:absolute; left:0; right:0; top:13cqw; bottom:0; background:var(--dim); z-index:2; animation-name:k-hb-dim;}
.hb-dw{position:absolute; left:0; top:13cqw; bottom:0; width:50cqw; padding:5cqw 6cqw; background:var(--surface); border-right:1px solid var(--line); z-index:3; animation-name:k-hb-dw;}
@keyframes k-hb-dim{0%,14%{opacity:0} 24%,78%{opacity:1} 88%,100%{opacity:0}}
@keyframes k-hb-dw{0%,14%{transform:translateX(-102%)} 24%,78%{transform:none} 88%,100%{transform:translateX(-102%)}}
.dm-hamburger .dm-tap{left:9cqw; top:6.5cqw; --t:calc(var(--dur) * .08);}
.dm-hamburger .dm-scr{padding-top:19cqw;}
/* 탭 바: 같은 층위 콘텐츠 전환, 밑줄이 옮겨감 */
.dm-tabbar{--dur:4.2s;}
.tb-row{position:absolute; left:0; right:0; top:10cqw; height:10cqw; display:flex; border-bottom:1px solid var(--line); background:var(--surface); z-index:1;}
.tb-row .tx{flex:1; display:flex; align-items:center; justify-content:center; font-size:4.6cqw; color:var(--muted);}
.tb-ind{position:absolute; left:0; bottom:-1px; width:33.333cqw; height:max(2px,1cqw); z-index:2; animation-name:k-tb; animation-timing-function:var(--io);}
.tb-ind::before{content:""; position:absolute; left:20%; right:20%; top:0; bottom:0; background:var(--callout); border-radius:1cqw;}
.tb-ct{position:absolute; left:0; top:20cqw; width:300cqw; height:45cqw; display:flex; animation-name:k-tb-ct; animation-timing-function:var(--io);}
.tb-ct > i{width:100cqw; padding:5cqw 6cqw;}
@keyframes k-tb{0%,24%{transform:none} 32%,57%{transform:translateX(100%)} 65%,90%{transform:translateX(200%)} 98%,100%{transform:none}}
@keyframes k-tb-ct{0%,24%{transform:none} 32%,57%{transform:translateX(-100cqw)} 65%,90%{transform:translateX(-200cqw)} 98%,100%{transform:none}}
.dm-tabbar .dm-tap.t1{left:50cqw; top:15cqw; --t:calc(var(--dur) * .2);}
.dm-tabbar .dm-tap.t2{left:83cqw; top:15cqw; --t:calc(var(--dur) * .53);}
.dm-tabbar .dm-tap.t3{left:17cqw; top:15cqw; --t:calc(var(--dur) * .86);}
/* 바텀 내비게이션: 하단 고정 메뉴, 누른 메뉴가 빨갛게 */
.dm-bottomnav{--dur:4.2s;}
.bn{position:absolute; left:0; right:0; bottom:0; height:13cqw; border-top:1px solid var(--line); background:var(--surface); display:flex; z-index:2;}
.bn > i{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4cqw;}
.bn > i u{width:8cqw; height:1.6cqw; border-radius:1cqw; background:var(--mock2);}
.bn-ind{position:absolute; left:0; top:0; bottom:0; width:25cqw; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4cqw; z-index:3;
  animation-name:k-bn; animation-timing-function:var(--io);}
.bn-ind .ic-ico{border-color:var(--callout); background:var(--hl);}
.bn-ind u{width:8cqw; height:1.6cqw; border-radius:1cqw; background:var(--callout);}
@keyframes k-bn{0%,26%{transform:none} 32%,58%{transform:translateX(25cqw)} 64%,90%{transform:translateX(50cqw)} 96%,100%{transform:none}}
.dm-bottomnav .dm-scr{animation-name:k-bn-c;}
@keyframes k-bn-c{0%,26%{opacity:1} 29%{opacity:.15} 32%,58%{opacity:1} 61%{opacity:.15} 64%,90%{opacity:1} 93%{opacity:.15} 96%,100%{opacity:1}}
.dm-bottomnav .dm-tap.t1{left:37.5cqw; top:58cqw; --t:calc(var(--dur) * .22);}
.dm-bottomnav .dm-tap.t2{left:62.5cqw; top:58cqw; --t:calc(var(--dur) * .54);}
.dm-bottomnav .dm-tap.t3{left:12.5cqw; top:58cqw; --t:calc(var(--dur) * .86);}
/* 스택 내비게이션: 새 화면이 위에 쌓이고(푸시) 빠짐(팝) */
.dm-stacknav{--dur:4.2s;}
.sn-a,.sn-b{position:absolute; inset:0; background:var(--surface);}
.sn-a{animation-name:k-sn-a;}
.sn-adim{position:absolute; inset:0; background:var(--dim); animation-name:k-sn-dim;}
.sn-b{box-shadow:-2cqw 0 6cqw rgba(0,0,0,.25); border-left:1px solid var(--line); z-index:2; animation-name:k-sn-b;}
.sn-h{height:10cqw; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:3cqw; padding:0 4cqw; background:var(--mock);}
.sn-h .dm-l{margin:0;}
.sn-list{padding:3cqw 6cqw;}
.sn-list .fo-r{padding:0;}
.sn-img{height:20cqw; margin:4cqw 6cqw 3cqw; border-radius:2.4cqw; background:var(--mock2);}
.sn-b .dm-l{margin-left:6cqw;}
.sn-lb{position:absolute; right:4cqw; bottom:4cqw; z-index:4; padding:1.6cqw 3cqw; border-radius:5cqw; background:var(--ink); color:var(--surface); font-size:4cqw; font-weight:700;}
.sn-lb.l1{animation-name:k-sn-l1;} .sn-lb.l2{opacity:0; animation-name:k-sn-l2;}
@keyframes k-sn-b{0%,10%{transform:translateX(100%)} 26%,58%{transform:none} 74%,100%{transform:translateX(100%)}}
@keyframes k-sn-a{0%,10%{transform:none} 26%,58%{transform:translateX(-25%)} 74%,100%{transform:none}}
@keyframes k-sn-dim{0%,10%{opacity:0} 26%,58%{opacity:.7} 74%,100%{opacity:0}}
@keyframes k-sn-l1{0%,8%{opacity:0} 14%,48%{opacity:1} 54%,100%{opacity:0}}
@keyframes k-sn-l2{0%,54%{opacity:0} 60%,86%{opacity:1} 92%,100%{opacity:0}}
.dm-stacknav .dm-tap.t1{left:45cqw; top:18cqw; --t:calc(var(--dur) * .02);}
.dm-stacknav .dm-tap.t2{left:6cqw; top:5cqw; --t:calc(var(--dur) * .5);}

/* =====================================================================
 * 폼·입력
 * ===================================================================== */
/* 토글 스위치: 누르는 즉시 켜짐/꺼짐 */
.tg-rows{position:absolute; left:7cqw; right:7cqw; top:6cqw;}
.tg-r{display:flex; align-items:center; gap:3cqw; height:17cqw; border-bottom:1px solid var(--line);}
.tg-r:last-child{border-bottom:0;}
.tg-r .dm-l{margin:0;}
.tg-ic{flex:none; width:6cqw; height:6cqw; border-radius:50%; background:var(--mock2);}
.tg{position:relative; flex:none; margin-left:auto; width:18cqw; height:10cqw; border-radius:5cqw; background:var(--mock2);}
.tg i{position:absolute; left:1.2cqw; top:1.2cqw; width:7.6cqw; height:7.6cqw; border-radius:50%; background:var(--surface); box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.25);}
.tg.on{background:var(--callout);} .tg.on i{transform:translateX(8cqw);}
.tg.an{background:var(--callout); animation-name:k-tg; animation-timing-function:var(--io);}
.tg.an i{transform:translateX(8cqw); animation-name:k-tg-k; animation-timing-function:var(--io);}
.tg-ic.an{background:var(--callout); animation-name:k-tg-ic;}
@keyframes k-tg{0%,10%{background:var(--mock2)} 16%,58%{background:var(--callout)} 64%,100%{background:var(--mock2)}}
@keyframes k-tg-k{0%,10%{transform:none} 16%,58%{transform:translateX(8cqw)} 64%,100%{transform:none}}
@keyframes k-tg-ic{0%,10%{background:var(--mock2)} 16%,58%{background:var(--callout)} 64%,100%{background:var(--mock2)}}
.dm-toggle .dm-tap.t1{left:84cqw; top:14.5cqw; --t:calc(var(--dur) * .04);}
.dm-toggle .dm-tap.t2{left:84cqw; top:14.5cqw; --t:calc(var(--dur) * .52);}
/* 세그먼티드 컨트롤: 같은 내용을 목록 ↔ 격자 보기로 */
.sg{position:absolute; left:24cqw; top:4cqw; width:52cqw; height:10cqw; padding:1cqw; border-radius:2.4cqw; background:var(--mock); border:1px solid var(--line); display:flex;}
.sg-p{position:absolute; left:1cqw; top:1cqw; width:calc(50% - 1cqw); height:calc(100% - 2cqw); border-radius:1.8cqw; background:var(--surface);
  box-shadow:0 .5cqw 1.5cqw rgba(0,0,0,.18); animation-name:k-sg-p; animation-timing-function:var(--io);}
.sg > i:not(.sg-p){position:relative; flex:1; display:flex; align-items:center; justify-content:center;}
.sg-gi{width:5cqw; height:5cqw;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/42% 42% no-repeat, linear-gradient(var(--ink),var(--ink)) 100% 0/42% 42% no-repeat,
             linear-gradient(var(--ink),var(--ink)) 0 100%/42% 42% no-repeat, linear-gradient(var(--ink),var(--ink)) 100% 100%/42% 42% no-repeat; opacity:.6;}
.sg .ic-ham{width:5cqw; height:4.2cqw; opacity:.6;}
.sg-lv,.sg-gv{position:absolute; left:8cqw; right:8cqw; top:19cqw;}
.sg-lv{animation-name:k-sg-lv;} .sg-gv{opacity:0; animation-name:k-sg-gv;}
.sg-lv .row{margin-bottom:3cqw;}
.sg-lv .row .dm-l{margin:0;}
.sg-gv{display:grid; grid-template-columns:repeat(3,1fr); gap:3cqw;}
.sg-gv i{height:18cqw; border-radius:2cqw; background:var(--mock2);}
@keyframes k-sg-p{0%,38%{transform:none} 46%,86%{transform:translateX(100%)} 94%,100%{transform:none}}
@keyframes k-sg-lv{0%,38%{opacity:1; transform:none} 44%,88%{opacity:0; transform:translateY(2cqw)} 94%,100%{opacity:1; transform:none}}
@keyframes k-sg-gv{0%,40%{opacity:0; transform:translateY(2cqw)} 46%,86%{opacity:1; transform:none} 92%,100%{opacity:0}}
.dm-segmented .dm-tap.t1{left:63cqw; top:9cqw; --t:calc(var(--dur) * .34);}
.dm-segmented .dm-tap.t2{left:37cqw; top:9cqw; --t:calc(var(--dur) * .84);}
/* 자동완성: 입력하는 중에 추천어 목록 */
.ac-in{position:absolute; left:6cqw; right:6cqw; top:5cqw; height:11cqw; padding:0 3cqw; display:flex; align-items:center; gap:2.4cqw;
  border:max(1.2px,.5cqw) solid var(--callout); border-radius:5.5cqw; background:var(--surface);}
.ac-tx{overflow:hidden; white-space:nowrap; width:3.1em; font-size:5.2cqw; animation-name:k-ac-tx; animation-timing-function:steps(3,end);}
.ac-cr{flex:none; width:max(1px,.4cqw); height:5.4cqw; background:var(--ink); animation-name:k-blink; animation-duration:.8s; animation-timing-function:steps(1,end);}
@keyframes k-blink{50%{opacity:0}}
@keyframes k-ac-tx{0%,4%{width:0} 24%,90%{width:3.1em} 94%,100%{width:0}}
.ac-s{position:absolute; left:6cqw; right:6cqw; top:18cqw; padding:1cqw 0; z-index:2; animation-name:k-ac-s;}
.ac-s .ac-r{display:flex; align-items:center; gap:2.4cqw; height:8.6cqw; padding:0 3cqw;}
.ac-s .ac-r .tx b{display:inline; color:var(--callout); font-size:inherit;}
.ac-s .ac-r .ic-mag{width:3.4cqw; height:3.4cqw;}
.ac-s .ac-r.on{animation-name:k-ac-hov;}
@keyframes k-ac-s{0%,24%{opacity:0; transform:translateY(-2cqw)} 30%,88%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-ac-hov{0%,56%{background:transparent} 60%,84%{background:var(--hl)} 88%,100%{background:transparent}}
/* 유효성 검사: 조건을 다 만족해야 다음 버튼이 켜짐 */
.va-in{position:absolute; left:6cqw; right:6cqw; top:6cqw; height:11cqw; padding:0 3cqw; display:flex; align-items:center; border:1px solid var(--line); border-radius:2cqw; animation-name:k-va-in;}
.va-tx{overflow:hidden; white-space:nowrap; width:8ch; font-family:var(--mono); animation-name:k-va-tx; animation-timing-function:steps(8,end);}
@keyframes k-va-tx{0%,6%{width:0} 50%,92%{width:8ch} 96%,100%{width:0}}
@keyframes k-va-in{0%,50%{border-color:var(--line)} 54%,92%{border-color:var(--accent)} 96%,100%{border-color:var(--line)}}
.va-rules{position:absolute; left:7cqw; top:21cqw;}
.va-r{display:flex; align-items:center; gap:2cqw; height:7cqw;}
.va-r .ic-chk{width:4.4cqw; height:4.4cqw;}
.va-r .ic-chk{background:var(--accent);}
.va-r.r1 .ic-chk{animation-name:k-va-r1;} .va-r.r2 .ic-chk{animation-name:k-va-r2;}
@keyframes k-va-r1{0%,49%{background:var(--mock2); transform:none} 52%{transform:scale(1.25)} 52%,92%{background:var(--accent)} 56%{transform:none} 96%,100%{background:var(--mock2)}}
@keyframes k-va-r2{0%,32%{background:var(--mock2); transform:none} 35%{transform:scale(1.25)} 35%,92%{background:var(--accent)} 39%{transform:none} 96%,100%{background:var(--mock2)}}
.va-b{position:absolute; left:6cqw; right:6cqw; bottom:5cqw; height:11cqw; border-radius:2.4cqw; display:flex; align-items:center; justify-content:center;
  font-weight:700; background:var(--callout); color:var(--callout-ink); animation-name:k-va-b;}
@keyframes k-va-b{0%,50%{background:var(--mock2); color:var(--mock-ink)} 54%,92%{background:var(--callout); color:var(--callout-ink)} 96%,100%{background:var(--mock2); color:var(--mock-ink)}}
.dm-validation .dm-tap{left:50cqw; top:54.5cqw; --t:calc(var(--dur) * .7);}
/* 인라인 에러: 틀린 칸 바로 아래 빨간 글씨 */
.fe-f{position:absolute; left:6cqw; right:6cqw;}
.fe-f .tx.s{margin-bottom:1.6cqw;}
.fe-box{height:10cqw; padding:0 3cqw; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:2cqw;}
.fe-f1{top:4cqw;} .fe-f2{top:24cqw;}
.fe-f2 .fe-box{border-color:var(--callout); animation-name:k-fe-box;}
.fe-typed{overflow:hidden; white-space:nowrap; width:9ch; font-family:var(--mono); animation-name:k-fe-tx; animation-timing-function:steps(9,end);}
@keyframes k-fe-tx{0%,4%{width:0} 26%,92%{width:9ch} 96%,100%{width:0}}
@keyframes k-fe-box{0%,32%{border-color:var(--line); transform:none} 34%{border-color:var(--callout); transform:translateX(-1.4cqw)} 37%{transform:translateX(1.4cqw)} 40%{transform:translateX(-.8cqw)} 43%,90%{border-color:var(--callout); transform:none} 96%,100%{border-color:var(--line)}}
.fe-ex{flex:none; width:4.6cqw; height:4.6cqw; border-radius:50%; background:var(--callout); color:var(--surface); font-weight:700; font-size:3.4cqw;
  display:flex; align-items:center; justify-content:center; animation-name:k-fe-msg;}
.fe-msg{margin-top:1.8cqw; animation-name:k-fe-msg;}
@keyframes k-fe-msg{0%,33%{opacity:0; transform:translateY(-1cqw)} 38%,90%{opacity:1; transform:none} 96%,100%{opacity:0}}
/* 비밀번호 보기 토글: 눈 아이콘으로 ●●● ↔ 글자 */
.pw-lb{left:7cqw; top:10cqw;}
.pw-in{position:absolute; left:6cqw; right:6cqw; top:16cqw; height:14cqw; padding:0 3.4cqw; border:1px solid var(--line); border-radius:2.4cqw; display:flex; align-items:center;}
.pw-t{position:absolute; left:3.4cqw; top:50%; transform:translateY(-50%); font-size:6cqw;}
.pw-t.dots{letter-spacing:.6cqw; font-size:4.6cqw; animation-name:k-pw-d;}
.pw-t.plain{font-family:var(--mono); opacity:0; animation-name:k-pw-p;}
@keyframes k-pw-d{0%,18%{opacity:1} 22%,70%{opacity:0} 74%,100%{opacity:1}}
@keyframes k-pw-p{0%,18%{opacity:0} 22%,70%{opacity:1} 74%,100%{opacity:0}}
.pw-eye{position:absolute; right:4cqw; top:50%; width:8cqw; height:5cqw; margin-top:-2.5cqw; border:max(1.2px,.7cqw) solid var(--mock-ink); border-radius:50% / 60%;}
.pw-eye::before{content:""; position:absolute; left:50%; top:50%; width:2.4cqw; height:2.4cqw; margin:-1.2cqw 0 0 -1.2cqw; border-radius:50%; background:var(--mock-ink);}
.pw-sl{position:absolute; left:50%; top:50%; width:11cqw; height:max(1.5px,.8cqw); margin:-.4cqw 0 0 -5.5cqw; background:var(--mock-ink); box-shadow:0 0 0 max(1px,.4cqw) var(--surface);
  transform:rotate(-35deg); animation-name:k-pw-sl;}
@keyframes k-pw-sl{0%,18%{opacity:0} 22%,70%{opacity:1} 74%,100%{opacity:0}}
.pw-btn{position:absolute; left:6cqw; right:6cqw; top:39cqw; height:11cqw; border-radius:2.4cqw;}
.dm-pwtoggle .dm-tap.t1{left:86cqw; top:23cqw; --t:calc(var(--dur) * .14);}
.dm-pwtoggle .dm-tap.t2{left:86cqw; top:23cqw; --t:calc(var(--dur) * .66);}
/* OTP: 한 칸에 숫자 하나, 채우면 다음 칸으로 */
.ot-h{left:0; right:0; top:8cqw;}
.ot{position:absolute; left:10.75cqw; top:19cqw; display:flex; gap:2.5cqw;}
.ot > i{position:relative; width:11cqw; height:15cqw; border:1px solid var(--line); border-radius:2cqw; display:flex; align-items:center; justify-content:center;}
.ot > i b{font-size:7cqw; font-family:var(--mono);}
.ot .d1 b{animation-name:k-ot1;} .ot .d2 b{animation-name:k-ot2;} .ot .d3 b{animation-name:k-ot3;}
.ot .d4 b{animation-name:k-ot4;} .ot .d5 b{animation-name:k-ot5;} .ot .d6 b{animation-name:k-ot6;}
@keyframes k-ot1{0%,9%{opacity:0; transform:translateY(2cqw)} 12%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-ot2{0%,18%{opacity:0; transform:translateY(2cqw)} 21%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-ot3{0%,27%{opacity:0; transform:translateY(2cqw)} 30%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-ot4{0%,36%{opacity:0; transform:translateY(2cqw)} 39%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-ot5{0%,45%{opacity:0; transform:translateY(2cqw)} 48%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
@keyframes k-ot6{0%,54%{opacity:0; transform:translateY(2cqw)} 57%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
.ot-f{position:absolute; left:10.75cqw; top:19cqw; width:11cqw; height:15cqw; border:max(1.5px,.7cqw) solid var(--callout); border-radius:2cqw; z-index:2;
  animation-name:k-ot-f; animation-timing-function:steps(1,end);}
@keyframes k-ot-f{0%{transform:none; opacity:1} 10%{transform:translateX(13.5cqw)} 19%{transform:translateX(27cqw)} 28%{transform:translateX(40.5cqw)}
  37%{transform:translateX(54cqw)} 46%{transform:translateX(67.5cqw)} 55%,94%{transform:translateX(67.5cqw); opacity:0} 96%,100%{transform:none; opacity:1}}
.ot-ok{position:absolute; left:0; right:0; top:41cqw; display:flex; justify-content:center; align-items:center; gap:2cqw; animation-name:k-ot-ok;}
.ot-ok .tx{color:var(--accent); font-weight:700;}
@keyframes k-ot-ok{0%,58%{opacity:0; transform:translateY(1.5cqw)} 63%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
/* 데이트피커: 칸을 누르면 달력이 열리고, 고르면 닫히며 채워짐 */
.dp-in{position:absolute; left:6cqw; right:6cqw; top:5cqw; height:11cqw; padding:0 3cqw; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:2cqw;}
.dp-in .v{position:absolute; left:3cqw; top:50%; transform:translateY(-50%);}
.dp-in .v1{animation-name:k-dp-v1;} .dp-in .v2{opacity:0; font-family:var(--mono); animation-name:k-dp-v2;}
@keyframes k-dp-v1{0%,60%{opacity:1} 64%,94%{opacity:0} 98%,100%{opacity:1}}
@keyframes k-dp-v2{0%,60%{opacity:0} 64%,94%{opacity:1} 98%,100%{opacity:0}}
.dp-ic{position:absolute; right:3cqw; top:50%; width:5.4cqw; height:5cqw; margin-top:-2.5cqw; border:max(1.2px,.6cqw) solid var(--mock-ink); border-top-width:max(2px,1.4cqw); border-radius:1cqw;}
.dp-c{position:absolute; left:6cqw; width:56cqw; top:18cqw; padding:2.4cqw 3cqw; z-index:3; animation-name:k-dp-c;}
.dp-ch{display:flex; align-items:center; justify-content:space-between; margin-bottom:2cqw;}
.dp-ch .tx{font-size:4.2cqw; font-weight:700;}
.dp-ch .ic-chev{width:3cqw; height:3cqw;}
.dp-g{display:grid; grid-template-columns:repeat(7,1fr); gap:1.2cqw 1cqw;}
.dp-g i{height:4.4cqw; border-radius:1cqw; background:var(--mock);}
.dp-g i.sel{position:relative;}
.dp-g i.sel u{position:absolute; left:50%; top:50%; width:5.6cqw; height:5.6cqw; margin:-2.8cqw 0 0 -2.8cqw; border-radius:50%; background:var(--callout); animation-name:k-dp-sel;}
@keyframes k-dp-c{0%,6%{opacity:0; transform:translateY(-2cqw)} 12%,56%{opacity:1; transform:none} 62%,100%{opacity:0; transform:translateY(-1cqw)}}
.dm-datepicker .dm-tap.t1{left:50cqw; top:10.5cqw; --t:0s;}
.dm-datepicker .dm-tap.t2{left:40cqw; top:41cqw; --t:calc(var(--dur) * .38);}
@keyframes k-dp-sel{0%,40%{opacity:0; transform:scale(.4)} 44%,58%{opacity:1; transform:none} 62%,100%{opacity:0}}

/* =====================================================================
 * 동작·상태
 * ===================================================================== */
/* 플로팅 버튼: 콘텐츠가 흘러가도 화면 위에 떠 있는 둥근 버튼 */
.dm-floating{--dur:4.5s;}
.fl-c{position:absolute; left:6cqw; right:6cqw; top:4cqw; animation-name:k-scroll50; animation-timing-function:linear;}
.fl-c .row{height:14cqw;}
.fl-c .th{width:11cqw; height:11cqw;}
.fl-c .grow .dm-l{margin-bottom:2cqw;}
@keyframes k-scroll50{from{transform:none} to{transform:translateY(-84cqw)}}
.fl-f{position:absolute; right:5cqw; bottom:5cqw; width:13cqw; height:13cqw; border-radius:50%; background:var(--callout); z-index:3;
  box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.3);}
.fl-f::before,.fl-f::after{content:""; position:absolute; left:50%; top:50%; width:5.4cqw; height:max(1.5px,.9cqw); margin:-.45cqw 0 0 -2.7cqw; background:var(--callout-ink); border-radius:1cqw;}
.fl-f::after{transform:rotate(90deg);}
.fl-t{position:absolute; right:7cqw; bottom:21cqw; width:9cqw; height:9cqw; border-radius:50%; background:var(--surface); border:1px solid var(--line); z-index:3;
  box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center;}
.fl-t .ic-chev{color:var(--ink);}
/* 스티키: 자기 자리에 있다가 위에 닿는 순간 붙음 */
.dm-sticky{--dur:4s;}
.st-c{position:absolute; left:0; right:0; top:0; transform:translateY(-40cqw); animation-name:k-st-c; animation-timing-function:linear;}
.st-hero{height:20cqw; margin:4cqw 6cqw 2cqw; border-radius:2.4cqw; background:var(--mock2);}
.st-gap{height:10cqw;}
.st-c .row{margin:0 6cqw; height:12cqw;}
.st-c .row .dm-l{margin-bottom:2cqw;}
.st-b{position:absolute; left:0; right:0; top:0; height:10cqw; display:flex; align-items:center; justify-content:space-around; background:var(--surface);
  border-bottom:max(1.5px,.7cqw) solid var(--callout); border-top:1px solid var(--line); z-index:2;
  animation-name:k-st-b; animation-timing-function:linear;}
.st-b .dm-l{margin:0; width:16cqw;}
.st-b .dm-l.k{opacity:.8;}
@keyframes k-st-c{0%{transform:none} 70%,85%{transform:translateY(-40cqw)} 100%{transform:none}}
@keyframes k-st-b{0%{transform:translateY(26cqw); box-shadow:none} 45.5%{transform:none; box-shadow:none} 47%,88%{transform:none; box-shadow:0 1.5cqw 3cqw rgba(0,0,0,.18)} 90.25%{transform:none; box-shadow:none} 100%{transform:translateY(26cqw)}}
/* 픽스드: 처음부터 끝까지 같은 자리(상단 앱바) */
.dm-fixed{--dur:4.5s;}
.fx-h{position:absolute; left:0; right:0; top:0; height:11cqw; display:flex; align-items:center; gap:3cqw; padding:0 4cqw; background:var(--surface);
  border-bottom:max(1.5px,.7cqw) solid var(--callout); z-index:2; box-shadow:0 1cqw 3cqw rgba(0,0,0,.12);}
.fx-h .dm-l{margin:0;}
.fx-h .ic-ico{margin-left:auto;}
.fx-c{position:absolute; left:6cqw; right:6cqw; top:14cqw; animation-name:k-scroll50; animation-timing-function:linear;}
.fx-c .row{height:14cqw;}
.fx-c .th{width:11cqw; height:11cqw;}
.fx-c .grow .dm-l{margin-bottom:2cqw;}
/* 펼침/접힘: 잘린 본문 → 더보기 → 전체 → 접기 */
.ds{position:absolute; left:7cqw; right:7cqw; top:5cqw;}
.ds-p{position:relative; height:13cqw; overflow:hidden; margin-top:3cqw; animation-name:k-ds-p; animation-timing-function:var(--io);}
.ds-p .dm-l{margin-bottom:2.6cqw;}
.ds-fade{position:absolute; left:0; right:0; bottom:0; height:8cqw; background:linear-gradient(rgba(0,0,0,0),var(--surface)); animation-name:k-ds-f;}
.ds-btn{position:relative; margin:2cqw auto 0; width:30cqw; height:8cqw; border:1px solid var(--line); border-radius:4cqw; display:flex; align-items:center; justify-content:center; gap:1.6cqw;}
.ds-btn .lb{position:relative; width:10cqw; height:5cqw;}
.ds-btn .lb .tx{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:4.2cqw;}
.ds-btn .lb .t1{animation-name:k-ds-t1;} .ds-btn .lb .t2{opacity:0; animation-name:k-ds-t2;}
.ds-btn .ic-chev{width:3cqw; height:3cqw; color:var(--callout); animation-name:k-ds-ch; animation-timing-function:var(--io);}
@keyframes k-ds-p{0%,12%{height:13cqw} 28%,70%{height:31cqw} 86%,100%{height:13cqw}}
@keyframes k-ds-f{0%,12%{opacity:1} 22%,76%{opacity:0} 86%,100%{opacity:1}}
@keyframes k-ds-t1{0%,14%{opacity:1} 18%,72%{opacity:0} 76%,100%{opacity:1}}
@keyframes k-ds-t2{0%,14%{opacity:0} 18%,72%{opacity:1} 76%,100%{opacity:0}}
@keyframes k-ds-ch{0%,12%{transform:none} 26%,70%{transform:rotate(180deg)} 84%,100%{transform:none}}
.dm-disclosure .dm-tap.t1{left:50cqw; top:30cqw; --t:calc(var(--dur) * .04);}
.dm-disclosure .dm-tap.t2{left:50cqw; top:48cqw; --t:calc(var(--dur) * .62);}
/* 셰브론: ▾는 펼침(돌아서 ▴), ›는 다음 단계로 이동 */
.cv-r{position:absolute; left:6cqw; right:6cqw; display:flex; align-items:center; justify-content:space-between; height:12cqw; padding:0 3cqw; border:1px solid var(--line); border-radius:2.4cqw; background:var(--surface);}
.cv-r .dm-l{margin:0;}
.cv-r .ic-chev{width:7cqw; height:7cqw; color:var(--callout);}
.cv-r .ic-chev::before{border-width:max(1.5px,1.1cqw);}
.cv-a{top:5cqw; z-index:1;}
.cv-a .ic-chev{animation-name:k-cv-a; animation-timing-function:var(--io);}
.cv-pa{position:absolute; left:6cqw; right:6cqw; top:17cqw; height:12cqw; padding:3cqw; border:1px solid var(--line); border-top:0; border-radius:0 0 2.4cqw 2.4cqw;
  transform-origin:top; animation-name:k-cv-pa; animation-timing-function:var(--io);}
.cv-pa .dm-l{margin-bottom:2cqw;}
.cv-b{top:36cqw; animation-name:k-cv-b;}
.cv-b .ic-chev{animation-name:k-cv-bc;}
@keyframes k-cv-a{0%,8%{transform:none} 20%,42%{transform:rotate(180deg)} 54%,100%{transform:none}}
@keyframes k-cv-pa{0%,8%{transform:scaleY(0); opacity:0} 20%,42%{transform:none; opacity:1} 54%,100%{transform:scaleY(0); opacity:0}}
@keyframes k-cv-b{0%,64%{background:var(--surface)} 68%,84%{background:var(--hl)} 90%,100%{background:var(--surface)}}
@keyframes k-cv-bc{0%,64%{transform:none} 68%{transform:translateX(2cqw)} 72%{transform:none} 76%{transform:translateX(2cqw)} 80%,100%{transform:none}}
.dm-chevron .dm-tap.t1{left:84cqw; top:11cqw; --t:calc(var(--dur) * .02);}
.dm-chevron .dm-tap.t2{left:84cqw; top:42cqw; --t:calc(var(--dur) * .6);}
/* 무한 스크롤: 끝에 닿으면 로딩 → 아래로 이어 붙음 */
.dm-infinitescroll{--dur:4.2s;}
.is-l{position:absolute; left:6cqw; right:6cqw; top:4cqw; animation-name:k-is-l;}
.is-l .row{height:12cqw;}
.is-l .th{width:9cqw; height:9cqw;}
.is-l .grow .dm-l{margin-bottom:2cqw;}
.is-sp{height:12cqw; display:flex; align-items:center; justify-content:center; animation-name:k-is-sp;}
.is-sp .ic-spin{width:7cqw; height:7cqw; border-width:1cqw;}
.is-new{animation-name:k-is-new;}
.is-new .row{background:var(--hl); border-radius:2cqw; padding:0 2cqw;}
@keyframes k-is-l{0%{transform:none; opacity:1} 28%,50%{transform:translateY(-26cqw)} 84%{transform:translateY(-58cqw); opacity:1} 92%{transform:translateY(-58cqw); opacity:0} 96%{transform:none; opacity:0} 100%{opacity:1}}
@keyframes k-is-sp{0%,24%{opacity:0} 28%,48%{opacity:1; height:12cqw} 54%,100%{opacity:0; height:0}}
@keyframes k-is-new{0%,48%{opacity:0; transform:translateY(3cqw)} 56%,100%{opacity:1; transform:none}}
/* 스와이프: 리스트 항목을 밀면 삭제 버튼이 드러남 */
.sw-l{position:absolute; left:0; right:0; top:12cqw;}
.sw-it{position:relative; height:15cqw; border-bottom:1px solid var(--line);}
.sw-fr{position:absolute; inset:0; padding:0 6cqw; display:flex; align-items:center; gap:3cqw; background:var(--surface);}
.sw-fr .dm-l{margin-bottom:2cqw;}
.sw-act{position:absolute; right:0; top:0; bottom:0; width:24cqw; background:var(--callout); color:var(--callout-ink); font-weight:700; display:flex; align-items:center; justify-content:center;}
.sw-it.on .sw-fr{transform:translateX(-24cqw); animation-name:k-sw-fr;}
@keyframes k-sw-fr{0%,8%{transform:none} 30%,62%{transform:translateX(-24cqw)} 80%,100%{transform:none}}
.dm-swipe .dm-fg{animation-name:k-sw-fg;}
@keyframes k-sw-fg{0%,4%{opacity:0; transform:translate(74cqw,34.5cqw)} 8%{opacity:.35; transform:translate(74cqw,34.5cqw)} 30%{opacity:.35; transform:translate(50cqw,34.5cqw)} 36%{opacity:0; transform:translate(50cqw,34.5cqw)}
  56%{opacity:0; transform:translate(50cqw,34.5cqw)} 62%{opacity:.35; transform:translate(50cqw,34.5cqw)} 80%{opacity:.35; transform:translate(74cqw,34.5cqw)} 86%,100%{opacity:0; transform:translate(74cqw,34.5cqw)}}
/* 풀 투 리프레시: 맨 위에서 당기면 새로고침 표시 → 새 항목 */
.pr-l{position:absolute; left:0; right:0; top:10cqw; bottom:-20cqw; padding:3cqw 6cqw; background:var(--surface); z-index:1; transform:translateY(11cqw); animation-name:k-pr-l;}
.pr-l .row{height:12cqw;}
.pr-l .th{width:9cqw; height:9cqw;}
.pr-l .grow .dm-l{margin-bottom:2cqw;}
.pr-l .row.nw{border-radius:2cqw; padding:0 2cqw; margin:0 -2cqw; animation-name:k-pr-nw;}
.pr-i{position:absolute; left:50%; top:10cqw; width:9cqw; height:9cqw; margin-left:-4.5cqw; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 1cqw 3cqw rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; z-index:0; transform:translateY(1cqw); animation-name:k-pr-i;}
.pr-i .ic-spin{width:5.4cqw; height:5.4cqw; border-width:.9cqw;}
@keyframes k-pr-l{0%,6%{transform:none} 30%{transform:translateY(16cqw)} 36%,60%{transform:translateY(11cqw)} 70%,100%{transform:none}}
@keyframes k-pr-i{0%,6%{transform:translateY(-6cqw) scale(.5); opacity:0} 30%{transform:translateY(3cqw); opacity:1} 36%,60%{transform:translateY(1cqw); opacity:1} 68%,100%{transform:translateY(-6cqw) scale(.5); opacity:0}}
@keyframes k-pr-nw{0%,62%{background:transparent} 68%,84%{background:var(--hl)} 94%,100%{background:transparent}}
.dm-pulltorefresh .dm-hd{z-index:3;}
.dm-pulltorefresh .dm-fg{animation-name:k-pr-fg;}
@keyframes k-pr-fg{0%,2%{opacity:0; transform:translate(64cqw,18cqw)} 6%{opacity:.35; transform:translate(64cqw,18cqw)} 30%{opacity:.35; transform:translate(64cqw,34cqw)} 36%,100%{opacity:0; transform:translate(64cqw,34cqw)}}
/* 스플래시: 앱을 켤 때 잠깐 뜨는 로고 화면 */
.sp-s{position:absolute; inset:0; background:var(--callout); z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqw; animation-name:k-sp-s;}
.sp-lg{width:17cqw; height:17cqw; border-radius:4.4cqw; background:var(--surface); display:flex; align-items:center; justify-content:center; animation-name:k-sp-lg;}
.sp-lg::before{content:""; width:7cqw; height:7cqw; border-radius:50%; background:var(--callout);}
.sp-s .dm-l{width:16cqw; background:var(--surface); opacity:.9; margin:0; animation-name:k-sp-lg;}
@keyframes k-sp-s{0%,52%{opacity:1} 62%,92%{opacity:0} 100%{opacity:1}}
@keyframes k-sp-lg{0%{opacity:0; transform:scale(.7)} 14%,92%{opacity:1; transform:none} 100%{opacity:0; transform:scale(.7)}}
/* 온보딩: 첫 사용자 소개 페이지 넘김 → 시작하기 */
.dm-onboarding{--dur:4.5s;}
.ob-s{position:absolute; left:0; top:0; width:300cqw; height:44cqw; display:flex; animation-name:k-ob; animation-timing-function:var(--io);}
.ob-s > i{width:100cqw; padding-top:6cqw; display:flex; flex-direction:column; align-items:center;}
.ob-il{width:20cqw; height:20cqw; border-radius:50%; background:var(--hl); display:flex; align-items:center; justify-content:center; margin-bottom:4cqw;}
.ob-il::before{content:""; width:8cqw; height:8cqw; background:var(--callout);}
.ob-s .p1 .ob-il::before{border-radius:1.6cqw;}
.ob-s .p2 .ob-il::before{border-radius:50%;}
.ob-s .p3 .ob-il::before{clip-path:polygon(50% 2%,62% 36%,98% 37%,69% 59%,79% 94%,50% 73%,21% 94%,31% 59%,2% 37%,38% 36%);}
.ob-s .dm-l{margin:0 auto 2.4cqw;}
.ob-skip{position:absolute; right:5cqw; top:4cqw;}
.ob-d{position:absolute; left:50%; top:47cqw; transform:translateX(-50%); display:flex; gap:2cqw;}
.ob-d i{width:2.2cqw; height:2.2cqw; border-radius:2cqw; background:var(--mock2);}
.ob-d .cr-di{animation-name:k-ob-d;}
.ob-b{position:absolute; left:8cqw; right:8cqw; bottom:4cqw; height:10cqw; border-radius:2.4cqw; background:var(--callout); color:var(--callout-ink); font-weight:700;
  display:flex; align-items:center; justify-content:center; animation-name:k-ob-b;}
@keyframes k-ob{0%,22%{transform:none; opacity:1} 30%,52%{transform:translateX(-100cqw)} 60%,90%{transform:translateX(-200cqw); opacity:1} 94%{transform:translateX(-200cqw); opacity:0} 96%{transform:none; opacity:0} 100%{transform:none; opacity:1}}
@keyframes k-ob-d{0%,22%{transform:none} 30%,52%{transform:translateX(4.2cqw)} 60%,94%{transform:translateX(8.4cqw)} 96%,100%{transform:none}}
@keyframes k-ob-b{0%,58%{opacity:0; transform:translateY(3cqw)} 64%,90%{opacity:1; transform:none} 94%,100%{opacity:0}}
.dm-onboarding .dm-tap{left:50cqw; top:56cqw; --t:calc(var(--dur) * .8);}
/* 버튼 상태: 기본 → 눌림 → 로딩 → 비활성 */
.dm-btnstate{--dur:4.4s;}
.bs-b{position:absolute; left:18cqw; right:18cqw; top:13cqw; height:15cqw; border-radius:3cqw; background:var(--callout); display:flex; align-items:center; justify-content:center;
  animation-name:k-bs-b; animation-timing-function:steps(1,end);}
.bs-b .tx{color:var(--callout-ink); font-weight:700; font-size:5.6cqw; animation-name:k-bs-tx; animation-timing-function:steps(1,end);}
.bs-b .ic-spin{position:absolute; left:50%; top:50%; width:7cqw; height:7cqw; margin:-3.5cqw 0 0 -3.5cqw; border-width:1cqw; border-color:rgba(255,255,255,.35); border-top-color:var(--callout-ink);
  opacity:0;}
.bs-sp{position:absolute; inset:0; opacity:0; animation-name:k-bs-sp; animation-timing-function:steps(1,end);}
@keyframes k-bs-b{0%{background:var(--callout); transform:none; filter:none}
  25%{background:var(--callout); transform:scale(.94); filter:brightness(.82)}
  50%{background:var(--callout); transform:none; filter:none}
  75%,100%{background:var(--mock2); transform:none; filter:none}}
@keyframes k-bs-tx{0%{opacity:1; color:var(--callout-ink)} 50%{opacity:0} 75%,100%{opacity:1; color:var(--mock-ink)}}
@keyframes k-bs-sp{0%,49.9%{opacity:0} 50%,74.9%{opacity:1} 75%,100%{opacity:0}}
.bs-sp .ic-spin{opacity:1;}
.bs-cap{position:absolute; left:0; right:0; top:34cqw; height:6cqw;}
.bs-cap .tx{position:absolute; left:0; right:0; text-align:center; opacity:0; font-weight:700;}
.bs-cap .c1{animation-name:k-bs-c1;} .bs-cap .c2{animation-name:k-bs-c2;} .bs-cap .c3{animation-name:k-bs-c3;} .bs-cap .c4{animation-name:k-bs-c4;}
@keyframes k-bs-c1{0%,24.9%{opacity:1} 25%,100%{opacity:0}}
@keyframes k-bs-c2{0%,24.9%{opacity:0} 25%,49.9%{opacity:1} 50%,100%{opacity:0}}
@keyframes k-bs-c3{0%,49.9%{opacity:0} 50%,74.9%{opacity:1} 75%,100%{opacity:0}}
@keyframes k-bs-c4{0%,74.9%{opacity:0} 75%,100%{opacity:1}}
.bs-st{position:absolute; left:50%; top:46cqw; transform:translateX(-50%); display:flex; gap:2cqw;}
.bs-st i{width:2.2cqw; height:2.2cqw; border-radius:2cqw; background:var(--mock2);}
.bs-st .cr-di{animation-name:k-bs-d; animation-timing-function:steps(1,end);}
@keyframes k-bs-d{0%{transform:none} 25%{transform:translateX(4.2cqw)} 50%{transform:translateX(8.4cqw)} 75%,100%{transform:translateX(12.6cqw)}}
.dm-btnstate .dm-tap{left:50cqw; top:20.5cqw; --t:calc(var(--dur) * .23);}
/* 스피드 다이얼: FAB를 누르면 작은 버튼들이 위로 펼쳐짐 */
.sd-dim{position:absolute; inset:0; background:var(--surface); opacity:.82; z-index:2; animation-name:k-sd-dim;}
@keyframes k-sd-dim{0%,8%{opacity:0} 16%,76%{opacity:.82} 86%,100%{opacity:0}}
.sd-f{position:absolute; right:5cqw; bottom:5cqw; width:13cqw; height:13cqw; border-radius:50%; background:var(--callout); z-index:4; box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.3);}
.sd-f > i{position:absolute; inset:0; transform:rotate(135deg); animation-name:k-sd-x; animation-timing-function:var(--io);}
.sd-f > i::before,.sd-f > i::after{content:""; position:absolute; left:50%; top:50%; width:5.4cqw; height:max(1.5px,.9cqw); margin:-.45cqw 0 0 -2.7cqw; background:var(--callout-ink); border-radius:1cqw;}
.sd-f > i::after{transform:rotate(90deg);}
@keyframes k-sd-x{0%,8%{transform:none} 16%,76%{transform:rotate(135deg)} 86%,100%{transform:none}}
.sd-m{position:absolute; right:7cqw; display:flex; align-items:center; gap:2.4cqw; z-index:4;}
.sd-m .lb{padding:1.4cqw 2.4cqw; border-radius:1.4cqw; background:var(--surface); border:1px solid var(--line); font-size:4cqw; box-shadow:0 .8cqw 2cqw rgba(0,0,0,.12);}
.sd-m .bt{width:9cqw; height:9cqw; border-radius:50%; background:var(--surface); border:1px solid var(--line); box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center;}
.sd-m .bt::before{content:""; width:3.4cqw; height:3.4cqw; border-radius:1cqw; background:var(--mock-ink);}
.sd-m.m1{bottom:21cqw; animation-name:k-sd-m1;} .sd-m.m2{bottom:32cqw; animation-name:k-sd-m2;} .sd-m.m3{bottom:43cqw; animation-name:k-sd-m3;}
@keyframes k-sd-m1{0%,12%{opacity:0; transform:translateY(5cqw) scale(.6)} 20%,76%{opacity:1; transform:none} 84%,100%{opacity:0; transform:translateY(5cqw) scale(.6)}}
@keyframes k-sd-m2{0%,15%{opacity:0; transform:translateY(5cqw) scale(.6)} 23%,76%{opacity:1; transform:none} 84%,100%{opacity:0; transform:translateY(5cqw) scale(.6)}}
@keyframes k-sd-m3{0%,18%{opacity:0; transform:translateY(5cqw) scale(.6)} 26%,76%{opacity:1; transform:none} 84%,100%{opacity:0; transform:translateY(5cqw) scale(.6)}}
.dm-speeddial .dm-tap.t1{left:88.5cqw; top:53.5cqw; --t:calc(var(--dur) * .04);}
.dm-speeddial .dm-tap.t2{left:88.5cqw; top:53.5cqw; --t:calc(var(--dur) * .72);}
/* 드래그 정렬: 손잡이를 길게 눌러 끌면 순서가 바뀜 */
.dm-reorder{--dur:4.2s;}
.ro-l{position:absolute; left:6cqw; right:6cqw; top:5cqw; animation-name:k-ro-l;}
@keyframes k-ro-l{0%,88%{opacity:1} 92%,96%{opacity:0} 100%{opacity:1}}
.ro-it{position:relative; height:12cqw; margin-bottom:1.6cqw; padding:0 3cqw; display:flex; align-items:center; gap:3cqw; background:var(--surface); border:1px solid var(--line); border-radius:2.4cqw;}
.ro-it .dm-l{margin:0;}
.ro-it .th{width:7cqw; height:7cqw;}
.ro-it .ic-ham{margin-left:auto; width:5cqw; height:3.6cqw; opacity:.5;}
.ro-it.dn{animation-name:k-ro-dn; animation-timing-function:var(--io);}
.ro-it.mv{z-index:2; border-color:var(--callout); animation-name:k-ro-mv; animation-timing-function:var(--io);}
.ro-it.mv .th{background:var(--callout); opacity:.35;}
@keyframes k-ro-dn{0%,22%{transform:none} 48%,92%{transform:translateY(13.6cqw)} 96%,100%{transform:none}}
@keyframes k-ro-mv{0%,10%{transform:none; box-shadow:none} 18%,22%{transform:scale(1.04); box-shadow:0 2cqw 5cqw rgba(0,0,0,.22)} 48%{transform:translateY(-27.2cqw) scale(1.04); box-shadow:0 2cqw 5cqw rgba(0,0,0,.22)}
  54%,92%{transform:translateY(-27.2cqw); box-shadow:none} 96%,100%{transform:none; box-shadow:none}}
.dm-reorder .dm-fg{animation-name:k-ro-fg; animation-timing-function:var(--io);}
@keyframes k-ro-fg{0%,4%{opacity:0; transform:translate(85cqw,37.4cqw)} 8%,22%{opacity:.35; transform:translate(85cqw,37.4cqw)} 48%{opacity:.35; transform:translate(85cqw,10.2cqw)} 56%,100%{opacity:0; transform:translate(85cqw,10.2cqw)}}
.ro-ring{position:absolute; left:85cqw; top:37.4cqw; width:14cqw; height:14cqw; margin:-7cqw 0 0 -7cqw; border-radius:50%; border:max(1.5px,.7cqw) solid var(--callout); z-index:9; opacity:0; animation-name:k-ro-ring;}
@keyframes k-ro-ring{0%,7%{opacity:0; transform:scale(.4)} 16%{opacity:1; transform:scale(1)} 20%,100%{opacity:0; transform:scale(1.2)}}

/* =====================================================================
 * 앱 전용
 * ===================================================================== */
/* 액션 시트: 아래에서 행동 버튼 묶음 + 따로 떨어진 취소 */
.as-g{position:absolute; left:5cqw; right:5cqw; bottom:18cqw; border:1px solid var(--line); border-radius:3.4cqw; background:var(--surface); overflow:hidden; z-index:3; animation-name:k-as;}
.as-g .tx,.as-c{height:9cqw; display:flex; align-items:center; justify-content:center; font-size:4.6cqw;}
.as-g .tx{color:var(--accent); border-bottom:1px solid var(--line);}
.as-g .tx:last-child{border-bottom:0; color:var(--callout);}
.as-c{position:absolute; left:5cqw; right:5cqw; bottom:5cqw; height:10cqw; border:1px solid var(--line); border-radius:3.4cqw; background:var(--surface); color:var(--accent); font-weight:700; z-index:3; animation-name:k-as;}
@keyframes k-as{0%,4%{transform:translateY(160%)} 16%{transform:none} 82%{transform:none; animation-timing-function:var(--in)} 94%,100%{transform:translateY(160%)}}
/* 얼럿: OS 표준 작은 확인 창(제목 + 버튼 두 개) */
.al{position:absolute; left:50%; top:50%; width:58cqw; transform:translate(-50%,-50%); border:1px solid var(--line); border-radius:4cqw; background:var(--surface); z-index:3; text-align:center; overflow:hidden; animation-name:k-al;}
.al .tx{text-align:center;}
.al .t1{margin-top:4.6cqw; font-weight:700; font-size:5cqw;}
.al .t2{margin:2.2cqw 0 4.4cqw;}
.al-bt{display:flex; border-top:1px solid var(--line);}
.al-bt .tx{flex:1; height:9.6cqw; display:flex; align-items:center; justify-content:center; font-size:4.8cqw; color:var(--accent);}
.al-bt .tx + .tx{border-left:1px solid var(--line); color:var(--callout); font-weight:700;}
@keyframes k-al{0%,4%{opacity:0; transform:translate(-50%,-50%) scale(1.18)} 14%,84%{opacity:1; transform:translate(-50%,-50%) scale(1)} 92%,100%{opacity:0; transform:translate(-50%,-50%) scale(1)}}
/* 푸시 알림: 앱 밖(홈 화면) 위쪽으로 내려오는 OS 알림 */
.ps-home{position:absolute; inset:0; background:var(--mock);}
.ps-sb{position:absolute; left:5cqw; right:5cqw; top:2.4cqw; display:flex; justify-content:space-between; align-items:center;}
.ps-sb .tx{font-size:3.6cqw; font-weight:700;}
.ps-sb i{width:6cqw; height:2.6cqw; border-radius:.8cqw; border:max(1px,.5cqw) solid var(--ink); opacity:.7;}
.ps-gr{position:absolute; left:8cqw; right:8cqw; top:24cqw; display:grid; grid-template-columns:repeat(5,1fr); gap:4cqw 5.5cqw;}
.ps-gr i{aspect-ratio:1; border-radius:2.8cqw; background:var(--mock2);}
.ps-gr i.me{background:var(--callout);}
.ps-b{position:absolute; left:4cqw; right:4cqw; top:3cqw; padding:3cqw; border-radius:3.6cqw; display:flex; gap:2.6cqw; align-items:center; z-index:3; animation-name:k-ps;}
.ps-ic{flex:none; width:9cqw; height:9cqw; border-radius:2.2cqw; background:var(--callout);}
.ps-b .tx{font-size:4cqw;}
.ps-b .tx.t1{font-weight:700; margin-bottom:1.6cqw;}
.ps-b .tm{margin-left:auto; align-self:flex-start;}
@keyframes k-ps{0%,6%{transform:translateY(-140%)} 18%{transform:none} 80%{transform:none; animation-timing-function:var(--in)} 92%,100%{transform:translateY(-140%)}}
/* 롱 프레스: 길게 누르면(링이 차오름) 부가 메뉴 */
.lp-g{position:absolute; left:6cqw; right:6cqw; top:13cqw; display:flex; gap:4cqw;}
.lp-c{flex:1; height:30cqw; padding:2.4cqw; border:1px solid var(--line); border-radius:2.4cqw; background:var(--surface);}
.lp-c .th{width:100%; height:15cqw; margin-bottom:2.4cqw;}
.lp-c .dm-l{margin-bottom:2cqw;}
.lp-c.on{position:relative; z-index:3; animation-name:k-lp-c;}
.dm-longpress .dm-dim{animation-name:k-lp-dim;}
@keyframes k-lp-dim{0%,26%{opacity:0} 32%,80%{opacity:1} 88%,100%{opacity:0}}
@keyframes k-lp-c{0%,26%{transform:none; box-shadow:none} 32%,80%{transform:scale(1.05); box-shadow:0 2cqw 6cqw rgba(0,0,0,.3)} 88%,100%{transform:none; box-shadow:none}}
.lp-m{position:absolute; left:20cqw; top:30cqw; width:54cqw; padding:1cqw 0; z-index:4; animation-name:k-lp-m;}
.lp-m .tx{height:7.4cqw; display:flex; align-items:center; gap:2.4cqw; padding:0 3cqw; font-size:4.4cqw;}
.lp-m .tx::before{content:""; width:3.4cqw; height:3.4cqw; border-radius:1cqw; border:max(1px,.6cqw) solid currentColor; opacity:.7;}
.lp-m .tx.r{color:var(--callout);}
@keyframes k-lp-m{0%,28%{opacity:0; transform:scale(.9) translateY(-2cqw)} 34%,80%{opacity:1; transform:none} 88%,100%{opacity:0}}
.lp-ring{position:absolute; left:26cqw; top:26cqw; width:15cqw; height:15cqw; margin:-7.5cqw 0 0 -7.5cqw; border-radius:50%; border:max(1.5px,.8cqw) solid var(--callout); z-index:9; opacity:0; animation-name:k-lp-ring;}
@keyframes k-lp-ring{0%,6%{opacity:0; transform:scale(.4)} 26%{opacity:1; transform:scale(1)} 30%,100%{opacity:0; transform:scale(1.25)}}
.dm-longpress .dm-fg{animation-name:k-lp-fg;}
@keyframes k-lp-fg{0%,3%{opacity:0; transform:translate(26cqw,26cqw)} 6%,30%{opacity:.35; transform:translate(26cqw,26cqw) scale(.85)} 36%,100%{opacity:0; transform:translate(26cqw,26cqw)}}
/* 백 제스처: 화면 왼쪽 가장자리에서 쓸어 이전 화면으로 */
.bg-p,.bg-c{position:absolute; inset:0; background:var(--surface);}
.bg-p{transform:translateX(-12%); animation-name:k-bg-p;}
.bg-pd{position:absolute; inset:0; background:var(--dim); opacity:.35; animation-name:k-bg-pd;}
.bg-c{z-index:2; box-shadow:-2cqw 0 6cqw rgba(0,0,0,.25); transform:translateX(45cqw); animation-name:k-bg-c;}
.bg-e{position:absolute; left:0; top:0; bottom:0; width:4cqw; background:linear-gradient(90deg,var(--callout),transparent); z-index:3; opacity:0; animation-name:k-bg-e;}
@keyframes k-bg-c{0%,8%{transform:none; opacity:1} 44%{transform:translateX(75cqw)} 52%,84%{transform:translateX(102%); opacity:1} 85%{transform:none; opacity:0} 96%,100%{transform:none; opacity:1}}
@keyframes k-bg-p{0%,8%{transform:translateX(-25%)} 52%,100%{transform:none}}
@keyframes k-bg-pd{0%,8%{opacity:.7} 52%,100%{opacity:0}}
@keyframes k-bg-e{0%,2%{opacity:0} 6%{opacity:.9} 14%,100%{opacity:0}}
.dm-backgesture .dm-fg{animation-name:k-bg-fg;}
@keyframes k-bg-fg{0%,3%{opacity:0; transform:translate(4cqw,36cqw)} 8%{opacity:.35; transform:translate(4cqw,36cqw)} 44%{opacity:.35; transform:translate(79cqw,36cqw)} 50%,100%{opacity:0; transform:translate(79cqw,36cqw)}}
/* 휠 피커: 원통을 굴려 가운데 줄에 맞춤 */
.wp-t{position:absolute; left:0; right:0; top:4cqw;}
.wp{position:absolute; left:10cqw; right:10cqw; top:12cqw; height:48cqw; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);}
.wp-band{position:absolute; left:0; right:0; top:19.5cqw; height:9cqw; border-radius:2cqw; background:var(--mock); border:1px solid var(--line);}
.wp-col{position:absolute; top:19.5cqw; text-align:center;}
.wp-col span{display:block; height:9cqw; line-height:9cqw; font-size:5.6cqw; font-family:var(--mono);}
.wp-y{left:6cqw; width:34cqw; animation-name:k-wp-y; animation-timing-function:cubic-bezier(.2,.9,.3,1.12);}
.wp-m{left:50cqw; width:24cqw; animation-name:k-wp-m; animation-timing-function:cubic-bezier(.2,.9,.3,1.12);}
@keyframes k-wp-y{0%,8%{transform:none} 36%,92%{transform:translateY(-45cqw)} 100%{transform:none}}
@keyframes k-wp-m{0%,30%{transform:none} 56%,92%{transform:translateY(-27cqw)} 100%{transform:none}}
.dm-wheelpicker .dm-fg{animation-name:k-wp-fg;}
@keyframes k-wp-fg{0%,4%{opacity:0; transform:translate(33cqw,50cqw)} 8%{opacity:.35; transform:translate(33cqw,50cqw)} 22%{opacity:.35; transform:translate(33cqw,22cqw)} 26%{opacity:0; transform:translate(33cqw,22cqw)}
  30%{opacity:0; transform:translate(66cqw,50cqw)} 34%{opacity:.35; transform:translate(66cqw,50cqw)} 46%{opacity:.35; transform:translate(66cqw,28cqw)} 50%,100%{opacity:0; transform:translate(66cqw,28cqw)}}
/* 햅틱: 누르는 순간 기기가 짧게 떨림 */
.hp-ph{position:absolute; left:37cqw; top:5cqw; width:26cqw; height:55cqw; border:max(1.5px,.9cqw) solid var(--ink); border-radius:5cqw; background:var(--surface); padding:6cqw 3cqw; animation-name:k-hp;}
.hp-ph::before{content:""; position:absolute; left:50%; top:2cqw; width:7cqw; height:1.6cqw; margin-left:-3.5cqw; border-radius:1cqw; background:var(--ink); opacity:.6;}
.hp-ph .dm-l{margin-bottom:2.4cqw;}
.hp-bt{position:absolute; left:3cqw; right:3cqw; bottom:5cqw; height:7cqw; border-radius:1.6cqw; background:var(--callout);}
@keyframes k-hp{0%,22%{transform:none} 23.5%{transform:translateX(-1.2cqw) rotate(-2deg)} 25%{transform:translateX(1.2cqw) rotate(2deg)} 26.5%{transform:translateX(-1.2cqw) rotate(-2deg)}
  28%{transform:translateX(1cqw) rotate(1.5deg)} 29.5%{transform:translateX(-.8cqw)} 31%,100%{transform:none}}
.hp-w{position:absolute; top:22cqw; width:6cqw; height:16cqw; animation-name:k-hp-w;}
.hp-w::before,.hp-w::after{content:""; position:absolute; top:0; bottom:0; border-radius:50%; border:max(1.5px,.8cqw) solid transparent;}
.hp-w.l{left:25cqw;} .hp-w.r{left:69cqw;}
.hp-w.l::before{left:2.4cqw; right:-4cqw; border-left-color:var(--callout);}
.hp-w.l::after{left:0; right:-2cqw; top:-3cqw; bottom:-3cqw; border-left-color:var(--callout); opacity:.6;}
.hp-w.r::before{left:-4cqw; right:2.4cqw; border-right-color:var(--callout);}
.hp-w.r::after{left:-2cqw; right:0; top:-3cqw; bottom:-3cqw; border-right-color:var(--callout); opacity:.6;}
@keyframes k-hp-w{0%,22%{opacity:0; transform:scale(.8)} 24%,32%{opacity:1; transform:none} 38%,100%{opacity:0; transform:scale(1.1)}}
.dm-haptic .dm-tap{left:50cqw; top:51.5cqw; --t:calc(var(--dur) * .2);}

/* ---------- 인스펙터(우측 설명 패널) 미리보기 ---------- */
.ins-demo{margin:0 0 14px;}
.ins-demo .dm{max-width:280px; border-radius:12px;}
@media (max-width: 860px){ .ins-demo .dm{max-width:220px;} }

/* 동작 줄이기: 애니메이션을 끄고 기본 스타일(대표 정지 화면)만 보여줌 */
@media (prefers-reduced-motion: reduce){ .dm,.dm *{animation:none !important;} }