/* 공통/물닙/물닙.css — 물닙 캐릭터 스테이지 (DESIGN_SPEC §4 무수정 이식)
   원본: ~/.claude/design-port/물닙집사/원본/crowny-butler-messenger.html L177~212
   개조 금지 — 치수·타이밍·좌표는 원본 리터럴 그대로. 색만 물닙토큰.css 변수로 치환(신규색 0).
   의존: 물닙토큰.css (먼저 링크할 것)
   검증: 데모.html headless 캡처 3장 + 디자인이식.sh diff 신규색 0 */

/* ── 4. 물닙 캐릭터 — butler.html 의 레이어·애니메이션 그대로 ───────────── */
.scene{position:relative;width:220px;height:176px}
.stage{position:relative;flex:1}
.ground{position:absolute;left:-18px;right:-18px;bottom:22px;height:1px;background:linear-gradient(90deg,transparent,var(--ground-line) 20%,var(--ground-line) 80%,transparent)}
.ground::after{content:"";position:absolute;left:30%;right:30%;top:-3px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent)}
.drop{position:absolute;left:38px;bottom:0;width:160px;height:160px}
.drop>*{position:absolute;inset:0;width:100%;height:100%}
.drop img{pointer-events:none;user-select:none}
.bob{transform-origin:50% 86%;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-3px) scale(.975,1.03)}50%{transform:translateY(-1px) scale(1.03,.975)}75%{transform:translateY(-3px) scale(.985,1.02)}}
.paper{transform-origin:64.6% 69.8%;animation:sway 3.6s ease-in-out infinite alternate}
@keyframes sway{0%{transform:rotate(-1.6deg)}100%{transform:rotate(1.8deg)}}
.eyes span{position:absolute;width:2.9%;height:4.7%;background:var(--eye);border-radius:50%;transform:translate(-50%,-50%);animation:blink 4.4s infinite}
.eyes .l{left:46.8%;top:48.7%}.eyes .r{left:57.4%;top:48.1%}
.eyes{animation:read 6s ease-in-out infinite}
@keyframes read{0%{transform:translate(-.6%,-.5%)}26%{transform:translate(1.4%,-.5%)}33%{transform:translate(-.6%,.5%)}59%{transform:translate(1.4%,.5%)}66%{transform:translate(-.6%,1.4%)}92%{transform:translate(1.4%,1.4%)}100%{transform:translate(-.6%,-.5%)}}
@keyframes blink{0%,90%,100%{transform:translate(-50%,-50%) scaleY(1)}93%{transform:translate(-50%,-50%) scaleY(.1)}}
.eyes.up{animation:none;transform:translate(.4%,-1.6%)}
.spark{position:absolute;left:150px;top:44px;width:24px;height:24px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.tint{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;background:var(--cheer);mix-blend-mode:color;opacity:0;transition:opacity .6s}
.cheer .tint{opacity:.5}
.butler-sec{margin-top:auto;padding:26px 0 18px;display:grid;justify-items:center;gap:12px;text-align:center}
.say{margin:0;font-size:var(--fs-say);line-height:var(--lh-say);color:var(--say);min-height:25px;transition:opacity .25s}
@media (prefers-reduced-motion:reduce){.bob,.paper,.eyes,.eyes span,.spark{animation:none}}

/* 말풍선 — 흰 바탕, 1.5px 갈색 테두리, 반지름 18, 14/21 */
.bubble{position:absolute;background:var(--white);border:1.5px solid var(--bubble-line);border-radius:var(--r-bubble);padding:10px 12px;font-size:var(--fs-bubble);line-height:var(--lh-bubble);color:var(--bubble-text);white-space:nowrap;letter-spacing:var(--ls-tight-1)}
.bubble::before{content:"";position:absolute;left:14px;bottom:-13px;border-style:solid;border-width:13px 13px 0 0;border-color:var(--bubble-line) transparent transparent transparent}
.bubble::after{content:"";position:absolute;left:15.5px;bottom:-10px;border-style:solid;border-width:10px 10px 0 0;border-color:var(--white) transparent transparent transparent}
.bubble.tail-left::before{left:-13px;bottom:auto;top:50%;margin-top:-10px;border-width:10px 13px 10px 0;border-color:transparent var(--bubble-line) transparent transparent}
.bubble.tail-left::after{left:-10px;bottom:auto;top:50%;margin-top:-8px;border-width:8px 10.5px 8px 0;border-color:transparent var(--white) transparent transparent}
.bubble.tail-r::before{left:24px}.bubble.tail-r::after{left:25.5px}

/* ── 상주 스테이지 (오피스 3앱 공용 — 우하단 도킹) ──────────────────────
   DESIGN_SPEC §4.2 「07 메모」 배치 수치를 그대로 쓰되 컨테이너만 고정 배치로 감싼다. */
.mulnipm-dock{position:fixed;right:20px;bottom:20px;z-index:40;font-family:var(--font);word-break:keep-all;touch-action:none}
.mulnipm-dock .stage{position:relative;width:220px;height:230px;flex:none}
.mulnipm-dock.size-sm .stage{width:180px;height:196px}
.mulnipm-dock.size-lg .stage{width:260px;height:250px}
.mulnipm-dock .drop{left:4px;top:76px;bottom:auto;width:150px;height:150px;cursor:grab}
.mulnipm-dock.size-sm .drop{width:120px;height:120px;top:70px}
.mulnipm-dock.size-lg .drop{width:160px;height:160px;top:86px}
.mulnipm-dock .drop:active{cursor:grabbing}
.mulnipm-dock .ground{left:0;right:auto;width:180px;bottom:23px}
.mulnipm-dock .spark{left:112px;top:94px}
/* 말풍선은 캐릭터 머리 위(꼬리=원본 기본 좌하단). 우하단 도킹이라 오른쪽으로 넘치지 않게 왼쪽 기준. */
.mulnipm-dock .bubble{left:0;top:0;right:auto;width:max-content;max-width:220px;white-space:normal}
.mulnipm-dock .say{padding:0 4px;text-align:center}

/* 접기·펼치기 */
.mulnipm-dock .fold{position:absolute;right:0;top:0;width:var(--touch);height:var(--touch);display:grid;place-items:center;border:0;background:transparent;color:var(--sub);cursor:pointer;border-radius:var(--r-btn)}
.mulnipm-dock .fold svg{width:20px;height:20px}
.mulnipm-dock .fold:focus-visible,.mulnipm-dock .drop:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mulnipm-dock.folded .stage,.mulnipm-dock.folded .say{display:none}
.mulnipm-dock .peek{display:none;width:var(--touch-dot);height:var(--touch-dot);border-radius:50%;border:1.5px solid var(--gold);background:var(--white);color:var(--gold);cursor:pointer;place-items:center}
.mulnipm-dock .peek svg{width:22px;height:22px}
.mulnipm-dock.folded .peek{display:grid}
.mulnipm-dock.folded .fold{display:none}

/* 상호작용 */
.drop.surprise{animation:surprise .42s ease-out}
@keyframes surprise{0%{transform:translateY(0) scale(1,1)}35%{transform:translateY(-8px) scale(1.06,.94)}70%{transform:translateY(2px) scale(.96,1.04)}100%{transform:translateY(0) scale(1,1)}}
.drop.settle{animation:settle .5s ease-out}
@keyframes settle{0%{transform:translateY(-4px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
.drop.warn .ink-layer{animation:crown-drop 1.1s ease-in-out}
@keyframes crown-drop{0%{transform:rotate(0)}30%{transform:rotate(-7deg) translateY(3px)}70%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.drop.surprise,.drop.settle,.drop.warn .ink-layer{animation:none}}

/* ── 회피(P1 후속 2026-09-23) — mount 옵션 avoid 가 가리킨 요소가 보이는 동안만 왼쪽으로 물린다.
   드래그가 남긴 인라인 right 보다 이겨야 하므로 !important. 해제되면 원래 위치로 돌아간다. */
.mulnipm-dock.avoiding { right: var(--avoid-shift, 300px) !important; }

/* ── 「집사에게 말하기」 입력바 (DESIGN_SPEC §0 입력 문법: 54px 「+ | 집사에게 말하기 … ↑」)
   2026-09-23 P1 후속: 크라우니시트 테마.css 에 있던 것을 공통으로 승격 — 독·슬라이드도 같은 클래스를 쓴다.
   값은 전부 물닙토큰.css 변수만 소비한다(이 파일에 hex 0건). */
.mulnipm-dock .ask{display:flex;align-items:center;gap:8px;height:var(--h-ask);margin-top:8px;padding:0 6px 0 4px;background:var(--white);border:1px solid var(--input-line);border-radius:var(--r-input);box-sizing:border-box;width:100%;max-width:260px}
.mulnipm-dock.folded .ask{display:none}
.mulnipm-dock .ask-plus{flex:none;width:var(--touch);height:var(--touch);display:grid;place-items:center;border:0;background:transparent;color:var(--sub);cursor:pointer;border-radius:var(--r-btn)}
.mulnipm-dock .ask-plus svg{width:20px;height:20px}
.mulnipm-dock .ask-div{flex:none;width:1px;height:22px;background:var(--input-div)}
.mulnipm-dock .ask-input{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;font-family:var(--font);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--ink);word-break:keep-all}
.mulnipm-dock .ask-input::placeholder{color:var(--sub)}
.mulnipm-dock .ask-send{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--send);color:var(--white);cursor:pointer}
.mulnipm-dock .ask-send svg{width:18px;height:18px}
.mulnipm-dock .ask-send:focus-visible,.mulnipm-dock .ask-plus:focus-visible,.mulnipm-dock .ask-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mulnipm-dock .say{max-width:260px}
@media (prefers-reduced-motion:reduce){
  .mulnipm-dock .ask,.mulnipm-dock .ask-input,.mulnipm-dock .ask-send{transition:none!important;animation:none!important}
}
@media (max-width:640px){
  .mulnipm-dock{right:12px;bottom:12px}
  .mulnipm-dock .ask{max-width:200px}
}