/* 움직임 공통 (메인 · 스티커판 · 상세 페이지): 큰 글자 단어별 등장 · 칸 등장 · 페이지 옆으로 넘김 · 작업 흐름 알약
   움직임 줄이기 설정이면 모두 끔 */

/* 큰 글자: 화면에 들어오면 한 글자씩 아래에서 튀어 오름 */
.mz-word { display: inline-block; white-space: nowrap; }
html:lang(ja) .mz-word, html:lang(zh-Hans) .mz-word, html:lang(zh-Hant) .mz-word { display: inline; white-space: normal; }   /* 띄어쓰기 없는 언어는 글자 사이에서 꺾임 */
.mz-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.mz-w > span { display: inline-block; }
.mz-split .mz-w > span { transform: translateY(110%) rotate(8deg); transition: transform .65s cubic-bezier(.3,1.45,.5,1); transition-delay: calc(var(--i) * 38ms); }
.mz-split.mz-in .mz-w > span { transform: none; }

/* 칸: 아래에서 올라오며 살짝 커짐, 같은 줄은 차례로 */
.mz-box.mz-box { opacity: 0; translate: 0 32px; scale: .96; transition: opacity .7s ease, translate .8s cubic-bezier(.2,.75,.2,1), scale .8s cubic-bezier(.2,.75,.2,1), transform .25s ease, background-color .25s ease, color .25s ease; transition-delay: calc(var(--d, 0) * 80ms); }
.mz-box.mz-box.mz-in { opacity: 1; translate: none; scale: none; }   /* translate · scale은 transform과 따로라서 카드 기울기를 안 건드림 */

/* 작업 흐름 알약: 올리면(터치는 누르면) 그 제품 색으로 채워지고 뮤빙이가 위로 톡 */
[data-pop] { position: relative; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
[data-pop] .pop-m { position: absolute; left: 50%; bottom: calc(100% - 6px); width: 64px; height: 64px; object-fit: contain; pointer-events: none; z-index: 3;
  transform: translate(-50%, 30px) scale(.3); opacity: 0; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .2s ease; }
[data-pop]:hover, [data-pop].pop, [data-pop]:focus-within { background: var(--pc) !important; border-color: var(--pc) !important; color: var(--pc-ink) !important; z-index: 2; }
[data-pop]:hover a, [data-pop].pop a, [data-pop]:focus-within a { color: var(--pc-ink); }
[data-pop]:hover .pop-m, [data-pop].pop .pop-m, [data-pop]:focus-within .pop-m { transform: translate(-50%, 0) scale(1); opacity: 1; animation: mz-wiggle .9s ease-in-out .45s infinite; }
@keyframes mz-wiggle { 0%, 100% { transform: translate(-50%, 0) rotate(0); } 25% { transform: translate(-50%, -3px) rotate(-6deg); } 75% { transform: translate(-50%, -3px) rotate(6deg); } }

/* 페이지 옆으로 넘김: 다른 페이지로 갈 때와 메뉴로 다른 칸에 갈 때 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mz-out .42s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: mz-in .42s cubic-bezier(.4,0,.2,1) both; }
html[data-vt="back"]::view-transition-old(root) { animation-name: mz-out-back; }
html[data-vt="back"]::view-transition-new(root) { animation-name: mz-in-back; }
/* 뒤로 가기: 따로 적어야 이 선택자를 모르는 브라우저에서 위 줄까지 버려지지 않음 */
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: mz-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: mz-in-back; }
@keyframes mz-out { to { transform: translateX(-24%); opacity: 0; } }
@keyframes mz-in { from { transform: translateX(24%); opacity: 0; } }
@keyframes mz-out-back { to { transform: translateX(24%); opacity: 0; } }
@keyframes mz-in-back { from { transform: translateX(-24%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mz-split .mz-w > span { transform: none !important; transition: none !important; }
  .mz-box.mz-box { opacity: 1; translate: none; scale: none; transition: none; }
  [data-pop], [data-pop] .pop-m { transition: none; }
  [data-pop]:hover .pop-m, [data-pop].pop .pop-m, [data-pop]:focus-within .pop-m { animation: none; transform: translate(-50%, 0); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* 해 · 달 스위치 (브랜드 사이트와 같은 모양): 알약 안 왼쪽 해 · 오른쪽 달, 노란 손잡이가 지금 테마 쪽으로 미끄러짐.
   높이는 각 페이지 머리 줄에 맞춤. 페이지마다 --tb-bg · --tb-line · --tb-ink로 색을 맞춤 */
.theme-btn { position: relative; flex: none; width: 76px; height: 40px; border-radius: 999px; border: 2px solid var(--tb-line, var(--ink)); background: var(--tb-bg, var(--surface)); color: var(--tb-ink, var(--ink)); display: inline-flex; align-items: center; justify-content: space-between; padding: 0 8px; cursor: pointer; }
.theme-btn svg { position: relative; z-index: 1; width: 18px; height: 18px; flex: none; }
.theme-btn .knob { position: absolute; top: 2px; left: 2px; width: 32px; height: 32px; border-radius: 50%; background: #ffd731; transition: transform .28s cubic-bezier(.3,1.3,.5,1); }
.theme-btn .sun { color: #0b0b0c; }
:root[data-theme="dark"] .theme-btn .knob { transform: translateX(36px); }
:root[data-theme="dark"] .theme-btn .sun { color: inherit; } :root[data-theme="dark"] .theme-btn .moon { color: #0b0b0c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .knob { transform: translateX(36px); } :root:not([data-theme="light"]) .theme-btn .sun { color: inherit; } :root:not([data-theme="light"]) .theme-btn .moon { color: #0b0b0c; } }
.theme-btn:hover .knob { box-shadow: 0 0 0 3px rgba(255, 215, 49, .35); }
html.mz-theming::view-transition-old(root) { animation: mz-tfade .35s ease both reverse; }   /* 테마 바꿀 때는 옆으로 밀지 않고 겹쳐 바뀜 */
html.mz-theming::view-transition-new(root) { animation: mz-tfade .35s ease both; }
@keyframes mz-tfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .theme-btn .knob { transition: none; } }