/* 구름펫 2.0 집 무대 — proto2/style.css(손맛 시험판)에서 방·인형·하루 빛만 옮겼습니다(2026-10-23, 2.0 첫 판 5단계). * ★ 1.0 화면(style.css)을 바꾸지 않게 모두 #world 아래에서만 먹습니다. 시험판의 html·body·button·img·* 규칙은 뺐습니다. * ★ 1.0 과 겹치는 이름은 시험판 쪽을 바꿨습니다 — 클래스 big→wBig · crumb→wCrumb · head→pHead · heart→wHeart · hop→pHop · * out→wOut · pop→wPop · puff→wPuff · spark→wSpark · tilt→pTilt · top→wTop, 키프레임 hop→petHop(시험판엔 hop 이 두 벌이라 * 나중 것이 펫 깡총을 덮었음), 색 --ink→--wInk. 1.0 의 .big·.head·.top·.tag 는 글자만 같아도 모양이 통째로 붙습니다. * ★ svh 는 100vh 를 먼저 쓰고 @supports 안에서 덮습니다(옛 아이폰·옛 카톡·삼성 인터넷은 svh 를 몰라 방 폭이 사라졌음). * ★ 방 크기·자리는 world.js(무대맞추기)가 윗 카드·아래 단추 띠를 재서 다시 넣습니다. 여기 값은 그 전의 기본값입니다. * ★ 2026-10-23 (6단계) 첫 만남(표지·스티커판·봉지·밥 독·끝 쪽지)·새 단장 카드·#rotate 를 맨 아래에 옮겼습니다. 같은 이름 바꾸기 규칙으로 * press→bookPress · tag→stTag · low→stLow · out→stOut·bagOut·hOut · float→wFloat · big→wBig · spark→wSpark(+wBurst) · * top→wTop · hop(까치)→magpieHop · fly(키프레임)→petFly · land→petLand, 스티커판 #sheet→#stickers(1.0 자랑하기 창이 #sheet). * 첫 만남 그림(연필 방·가구 사본·스티커)은 #world.wBook 일 때만, 그것도 표지가 뜬 뒤(wLoad)에 받습니다 — 옛 손님은 안 받음. */ /* ---------- 무대 ---------- */ /* #home 안에서 화면을 꽉 채우고, 1.0 윗 카드(z 6)·아래 단추(z 2)·말풍선(z 5)보다 뒤. z-index 로 제 겹을 묶어 안쪽 겹(펫 3·의성어 12 …)이 1.0 창·주머니 모드 위로 못 올라오게 합니다 */ #world { --paper: #f3e7d3; --wInk: #441f0e; --ui: #5a3e2b; --warm: #e8913a; --fur: #f2dfbf; position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--paper) var(--noise, none); color: var(--ui); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* 무대 안 글은 모두 굵게가 바탕 — 보통 굵기 글꼴(72KB)을 표지 순간에 화면 읽기 줄·글자 없는 칸 때문에 받아 첫 화면이 300KB 를 넘었음 (6단계 검토 느린폰 3·정책 1). 일부러 보통 굵기인 글(끝 쪽지 글·앱 안 안내)만 400 을 적음 */ font-weight: 700; } #world img { -webkit-user-drag: none; } /* 창·산책·주머니 모드가 열리면 무대는 멈춥니다(world.js 멈춤) — 안 보이는데 움직이며 전기만 씀 */ #world.paused, #world.paused *, #world.paused *::before, #world.paused *::after { animation-play-state: paused !important; } /* 가운데 맞춤은 margin 으로 — transform·perspective 는 방을 따로 층으로 묶어, 붙는 동안 펫이 스티커판 아래에 깔렸음(7차 검사) */ #room { --rw: max(100vw, calc(100vh * 768 / 1376)); position: absolute; left: 50%; top: 50%; width: var(--rw); aspect-ratio: 768 / 1376; margin-left: calc(var(--rw) / -2); margin-top: calc(var(--rw) * -0.89583); } @supports (height: 100svh) { #room { --rw: max(100vw, calc(100svh * 768 / 1376)); } } .layer, .prop { position: absolute; inset: 0; pointer-events: none; background: url("art/house_day.webp?v=1") center / 100% 100% no-repeat; } /* 저녁·밤 방 그림 — 덮개 색 대신 그림의 빛(20차 심사관·그림: 막을 덮은 밤·저녁은 「빛」으로 안 읽힘). ★ 그림은 그 빛이 가까울 때만 받습니다(world.js 가 needSunset·needNight 를 붙임) — 낮에 열면 두 장(약 180KB)을 안 받음 */ .layer.lit { opacity: 0; transition: opacity 1.2s ease; background-image: none; } #world.needSunset .layer.litSunset { background-image: url("art/house_sunset.webp?v=1"); } #world.needNight .layer.litNight { background-image: url("art/house_night.webp?v=1"); } /* 낮 방 그림도 아침·낮이 가까울 때만(world.js 가 needDay) — 밤에 열면 낮 그림이 같이 내려와 줄무늬로 섞여 보였음(5단계 검토) */ #world:not(.needDay) .layer.color { background-image: none; } #room.lit .layer.lit { will-change: opacity; } #world[data-light="sunset"] #room.lit .layer.litSunset, #world[data-light="night"] #room.lit .layer.litNight { opacity: 1; } /* 가구 사본 — 색이 닿는 순간만 보이며 톡 들썩(1 이하로 안 줄어 밑그림 가장자리가 안 비침) */ .prop { opacity: 0; } .prop.wPop { opacity: 1; animation: propPop .5s cubic-bezier(.3, 1.2, .5, 1) both; } @keyframes propPop { 0% { transform: scale(1, 1); } 30% { transform: scale(1.035, 1.085); } 58% { transform: scale(1.01, .996); } 80% { transform: scale(1.003, 1.018); } 100% { transform: scale(1, 1); } } .prop.rug.wPop { animation-name: rugFlop; } @keyframes rugFlop { 0% { transform: scale(1, 1); } 30% { transform: scale(1.03, 1.1); } 60% { transform: scale(1.01, .995); } 100% { transform: scale(1, 1); } } .shaft, .winGlow, .lamp, .light, .motes { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.2s ease, background 1.2s ease; } /* 빛 덮개는 방 그림 위·펫 아래 — 펫은 아래 「펫 빛」 필터로 천천히 물듦 */ .light { z-index: 2; } #room:not(.lit) .winGlow, #room:not(.lit) .shaft, #room:not(.lit) .sky, #room:not(.lit) .motes { opacity: 0 !important; } .shaft { background: linear-gradient(200deg, rgba(255, 246, 214, .9), rgba(255, 228, 160, 0) 75%); mix-blend-mode: screen; opacity: .55; animation: shaftBreath 8s ease-in-out infinite; } @keyframes shaftBreath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } .winGlow { opacity: 0; filter: blur(calc(var(--rw, 100vw) * .008)); } .winGlow::before { content: ""; position: absolute; inset: 0; clip-path: var(--glass); background: var(--glow, none); } /* 밤 — 창에서 드는 달빛(19차: 근원 없는 주황 빛무리) */ .lamp { opacity: 0; z-index: 6; background: radial-gradient(ellipse 55% 36% at 74% 76%, rgba(178, 196, 255, .3), rgba(160, 180, 245, .1) 45%, transparent 75%); mix-blend-mode: screen; } .light { opacity: 0; mix-blend-mode: multiply; } .motes { opacity: 0; } .motes i { position: absolute; width: var(--ms, .9%); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 250, 230, .95); box-shadow: 0 0 7px rgba(255, 240, 200, .95); animation: mote 9s ease-in-out infinite; opacity: 0; } @keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 18% { opacity: .95; } 35% { transform: translate(-10px, 14px); } 55% { transform: translate(4px, 26px); } 80% { opacity: .75; } 100% { transform: translate(-22px, 46px); opacity: 0; } } #world[data-light="sunset"] .motes i { background: rgba(255, 214, 150, .95); box-shadow: 0 0 8px rgba(255, 190, 110, .9); } #world[data-light="night"] .motes i { background: rgba(200, 214, 255, .8); box-shadow: 0 0 6px rgba(170, 190, 255, .8); } .sky { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; z-index: 6; } .sky i { position: absolute; width: .5%; aspect-ratio: 1; border-radius: 50%; background: #fff8e6; box-shadow: 0 0 4px #fff3c4; animation: twinkle 3s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } } .sky i:nth-child(2) { left: 71%; top: 20%; } .sky i:nth-child(3) { left: 77%; top: 27%; animation-delay: .7s; } .sky i:nth-child(4) { left: 86%; top: 18.5%; animation-delay: 1.4s; } .sky i:nth-child(5) { left: 73%; top: 33%; animation-delay: 2s; } .sky i:nth-child(6) { left: 88%; top: 30%; animation-delay: 1s; } .sky .moon { display: none; } /* 달은 밤 방 그림에 있음, 별만 반짝 */ /* 하루 빛 — 그림은 한 벌, 빛만 코드 */ #world[data-light="morning"] .light { opacity: .35; background: linear-gradient(160deg, #ffd9a0, #fff1d6 60%); } #world[data-light="morning"] .shaft { opacity: .9; } #world[data-light="day"] .shaft { opacity: .45; } #world[data-light="sunset"] .light { opacity: .12; background: linear-gradient(170deg, #f7a36b, #f6c08f 45%, #c98b9a); } .beam { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1.2s ease; mix-blend-mode: screen; filter: blur(calc(var(--rw, 100vw) * .028)); } .beam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(60% 55%, 100% 52%, 82% 80%, 38% 74%); background: linear-gradient(200deg, rgba(255, 236, 190, .9), rgba(255, 220, 160, .35)); } #room:not(.lit) .beam { opacity: 0 !important; } #world[data-light="morning"] .beam { opacity: .4; } #world[data-light="sunset"] .beam { opacity: .9; } #world[data-light="sunset"] .beam::before { clip-path: polygon(58% 54%, 100% 50%, 76% 92%, 20% 84%); background: linear-gradient(205deg, rgba(255, 168, 96, .95), rgba(255, 128, 84, .4)); } #world[data-light="night"] .beam { opacity: 0; } /* 달빛 웅덩이는 밤 방 그림에 있음 */ #world[data-light="sunset"] .shaft { opacity: .2; background: linear-gradient(205deg, rgba(255, 170, 110, .95), rgba(255, 140, 90, 0) 75%); } #world[data-light="sunset"] .winGlow { opacity: .2; --glow: linear-gradient(180deg, rgba(255, 150, 90, .7), rgba(255, 110, 120, .5)); mix-blend-mode: screen; } #world[data-light="night"] .light { opacity: .16; background: linear-gradient(180deg, #3a3f72, #55527e 60%, #5d5a7c); } #world[data-light="night"] .shaft { opacity: 0; } #world[data-light="night"] .winGlow { opacity: 0; --glow: linear-gradient(180deg, #2a3264 0%, #4a5590 70%, #8b86a8 100%); mix-blend-mode: multiply; } #world[data-light="night"] .lamp { opacity: .45; } #world[data-light="night"] #room.lit .sky { opacity: 1; } #world[data-light="night"] .motes { opacity: .55 !important; } /* 낮 햇빛 속 먼지 — 시험판은 방이 칠해질 때 JS 로 보이게 했는데 옮기며 빠졌음(늘 0 이라 안 보이는 채 돌고만 있었음) */ #room.lit .motes { opacity: 1; } /* 안 보이는 것은 안 움직임(저가 폰 그리기 부담 — 5단계 검토): 별은 밤에만, 밤 빛줄기(투명)는 멈춤 */ #world:not([data-light="night"]) .sky i { animation: none; } #world[data-light="night"] .shaft { animation: none; } /* 몸통·머리·귀 그림이 다 풀릴 때까지 펫을 감춤(world.js 집무대) — 느린 망에서 조각조각 나타났음 */ #pet.wWait { visibility: hidden; } /* 펫 빛 — 펫(과 그릇) 그림 전체에 방 빛 색을 채널마다 곱함(SVG 필터). 값은 world.js(펫빛)가 1.2초에 걸쳐 바꿈 */ #world:not([data-light="day"]) #pet .front { filter: url(#petLight); } #world:not([data-light="day"]) #bowl svg { filter: url(#paperProp) url(#petLight); } #bowl svg { filter: url(#paperProp); } /* 펫 그림 조각(눈은 코드라 빼고)만 먹선을 방 선 색으로 */ #pet img.part { filter: url(#petInk); } /* 펫 발밑 그림자도 때마다 길이·방향이 바뀜(빛은 오른쪽 창) */ #world[data-light="morning"] #pet .shadow { transform: translateX(-9%) scaleX(1.25); } #world[data-light="sunset"] #pet .shadow { transform: translateX(-10%) scaleX(1.36); opacity: .85; } #pet.leanFood .shadow { translate: calc(var(--dir) * 6%) 0; } #world[data-light="night"] #pet .shadow { transform: translateX(-6%) scaleX(1.12); opacity: .7; } /* ---------- 밥그릇·사료 ---------- */ #bowl { position: absolute; left: 20%; bottom: 19%; width: 17%; aspect-ratio: 160 / 96; z-index: 4; pointer-events: none; } #bowl svg { width: 100%; height: 100%; overflow: visible; } #bowl .floorShade { fill: rgba(68, 31, 14, .18); } #bowl .rim { fill: #fbe2da; stroke: #6a3a20; stroke-width: 3.8; } #bowl .inside { fill: #e8aca2; } #bowl .insideShade { fill: #c98479; opacity: .5; } #bowl .cup { fill: #f3bdb4; stroke: #6a3a20; stroke-width: 3.8; stroke-linejoin: round; } #bowl .band { fill: #ebaaa0; } #bowl .pawDot { display: none; } #bowl .food { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .3s; } /* 그릇이 위에서 「통」 떨어짐(말없이 스르르 생겨 「내가 뭘 눌렀나」 했음) */ #bowl.drop { animation: bowlDrop .55s cubic-bezier(.3, 1.4, .5, 1) both; } @keyframes bowlDrop { 0% { transform: translateY(-70%) scale(.9); opacity: 0; } 30% { opacity: 1; } 55% { transform: translateY(0) scale(1.06, .9); } 75% { transform: translateY(-10%) scale(.98, 1.03); } 100% { transform: none; opacity: 1; } } #bowl .shine { fill: none; stroke: #fff6ea; stroke-width: 4; stroke-linecap: round; opacity: .75; } #bowl.away { opacity: 0; transition: opacity .5s ease; } #bowl.slide { transition: left .45s cubic-bezier(.45, 0, .3, 1), bottom .45s cubic-bezier(.45, 0, .3, 1), scale .45s cubic-bezier(.45, 0, .3, 1); scale: var(--bs, 1); } #bowl.underPose { opacity: 0; transition: opacity .1s .1s, left .45s, bottom .45s, scale .45s; } #bowl.slide.away { opacity: 0; transition: opacity .5s ease, left .45s cubic-bezier(.45, 0, .3, 1), bottom .45s cubic-bezier(.45, 0, .3, 1), scale .45s cubic-bezier(.45, 0, .3, 1); } .kibble { position: absolute; width: 9px; height: 8px; border-radius: 50% 45% 55% 50%; background: radial-gradient(circle at 35% 35%, #c88a4e, #8a4f22 70%); border: 1.5px solid var(--wInk); z-index: 5; pointer-events: none; } .kibble.wCrumb { width: 6px; height: 5px; border-width: 1.2px; animation: wCrumb .5s cubic-bezier(.3, .6, .5, 1) both; } @keyframes wCrumb { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 45% { transform: translate(calc(var(--dx) * .6), var(--dy)) rotate(90deg); } 100% { transform: translate(var(--dx), 4px) rotate(200deg); opacity: 0; } } #world[data-light="night"] .kibble { background: radial-gradient(circle at 35% 35%, #8f6a52, #4f3322 70%); border-color: #3a2416; } #world[data-light="sunset"] .kibble { background: radial-gradient(circle at 35% 35%, #c07a48, #7c4220 70%); } /* ---------- 펫 ---------- */ /* 펫 상자 폭 — 2026-10-26 1.3배(46% → 59.8%, 사장님 「1.3배로 해줘」). 화면마다 world.js(무대맞추기)가 #room 에 --petw 를 넣음 (눕힌 폰·넓은 화면은 윗 카드·아래 단추에 닿지 않는 만큼까지만). 발 자리는 그대로라 발을 축으로 커짐. 59.8 은 world.js 펫비와 같아야 함(rules.test) */ #pet { position: absolute; left: 20.1%; bottom: 22.25%; width: var(--petw, 59.8%); aspect-ratio: 1; z-index: 3; touch-action: none; cursor: pointer; } #pet .shadow { position: absolute; left: 16%; right: 16%; bottom: 0; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(68, 31, 14, .42), rgba(68, 31, 14, .16) 62%, rgba(68, 31, 14, 0)); z-index: -1; transition: transform 1.2s, opacity .25s, translate .45s; opacity: 1; } #pet .flight, #pet .squash, #pet .flipper, #pet .front, #pet .pTilt, #pet .tiltAct, #pet .breath, #pet .breathAct { position: absolute; inset: 0; } #pet .tiltAct, #pet .breathAct { transform-origin: 50% 97%; } #pet .part { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* 자세 그림 — 미리 받아 두고 보이기만 바꿈. 보이는 동안 앉은 인형(몸통·머리·귀·꼬리·코드 눈)은 숨김 */ #pet .pose { opacity: 0; transform-origin: 50% 94%; transform: var(--pf, none); } #pet[data-pose] .breathAct > :not(.pose) { opacity: 0; } /* 22차: 녹여 바꾸면 눈·코가 두 벌로 겹쳐 보였음 → 한 번에 */ #pet[data-pose="eat"] .pose[data-p="eat"], #pet[data-pose="beg"] .pose[data-p="beg"], #pet[data-pose="lie"] .pose[data-p="lie"], #pet[data-pose="full"] .pose[data-p="full"], #pet[data-pose="stretch"] .pose[data-p="stretch"], #pet[data-pose="play"] .pose[data-p="play"], #pet[data-pose="half"] .pose[data-p="half"], #pet[data-pose="bark"] .pose[data-p="bark"], #pet[data-pose="wag"] .pose[data-p="wag"], #pet[data-pose="sleep"] .pose[data-p="sleep"] { opacity: 1; } #pet.poseFlip { --pf: scaleX(-1); } /* 그릇이 왼쪽이면 먹기 그림을 좌우로 */ /* 바꿔 끼우는 순간 몸을 한 번 낮춤 — 한 프레임 교체는 「다른 그림으로 바뀌었다」로 읽혔음(6·8차) */ #pet.swapDip .squash { animation: swapDip .3s ease-in-out; } @keyframes swapDip { 0%, 100% { transform: none; } 40% { transform: scale(1.06, .86); } 70% { transform: scale(.97, 1.05); } } /* 먹는 동안 그림 전체를 아래 축으로 살짝 눌렀다 폄 — 고개를 콕콕 */ #pet[data-pose="eat"] .pose[data-p="eat"] { animation: eatBob .42s ease-in-out infinite; } @keyframes eatBob { 0%, 100% { transform: var(--pf, none); } 50% { transform: var(--pf, none) translateY(1.3%) scale(1.012, .972); } } /* 크게 바뀌는 자세의 가리개 — 발치에서 작은 먼지 알갱이 */ .grain { position: absolute; z-index: 5; width: var(--d, 8px); height: var(--d, 8px); margin: calc(var(--d, 8px) / -2) 0 0 calc(var(--d, 8px) / -2); border-radius: 50%; pointer-events: none; background: #f3e6cf; border: 1.5px solid rgba(106, 58, 32, .55); animation: grain .48s cubic-bezier(.2, .7, .4, 1) both; } @keyframes grain { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.8); opacity: 0; } } #world[data-light="night"] .grain { filter: brightness(.6) saturate(.7); } #world[data-light="sunset"] .grain { filter: sepia(.3); } /* 누운 자세는 바닥에 닿는 폭이 넓음 */ #pet[data-pose="lie"] .shadow, #pet[data-pose="full"] .shadow, #pet[data-pose="sleep"] .shadow { scale: 1.28 1.1; } #pet[data-pose="stretch"] .shadow, #pet[data-pose="play"] .shadow, #pet[data-pose="wag"] .shadow { scale: 1.18 1.05; } /* 기지개 동안 엉덩이 쪽을 축으로 앞뒤로 살짝 — 1.5초 정지 그림이었음(23차) */ #pet[data-pose="stretch"] .pose[data-p="stretch"] { animation: stretchRock 1s ease-in-out; transform-origin: 72% 92%; } @keyframes stretchRock { 0%, 100% { transform: var(--pf, none); } 35% { transform: var(--pf, none) rotate(-1.8deg) scale(1.01, .99); } 70% { transform: var(--pf, none) rotate(.8deg); } } /* 자는 동안 — 숨이 길고 깊음(23~7시, rules.밤인가 일 때만. 밤 빛이라도 23시 전에는 안 잠) */ #pet[data-pose="sleep"].breathing .breath { animation-duration: 5.2s; } #pet .flipper { transform-style: preserve-3d; } #pet .front { transition: filter 1.2s; } #pet .wakeGlow { position: absolute; left: -15%; top: -12%; width: 130%; height: 130%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 250, 228, .95), rgba(255, 238, 190, .5) 50%, rgba(255, 238, 190, 0)); animation: wakeGlow .6s ease-out both; } @keyframes wakeGlow { 0% { opacity: 0; transform: scale(.55); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.32); } } /* 「뿅」 나타남·살아나는 순간: 몸 전체가 눌렸다 늘었다 제자리 */ #pet.wPop .breathAct { animation: wakePop .36s ease-out; } @keyframes wakePop { 0% { transform: none; } 22% { transform: scale(1.045, .93); } 52% { transform: scale(.97, 1.045); } 78% { transform: scale(1.01, .99); } 100% { transform: none; } } /* 털기: 몸 가운데(70%)를 축으로 비틀고, 머리는 0.04초 늦게 반대로(19차) */ #pet.shakeOff .tiltAct { animation: shakeOff .5s ease-in-out; transform-origin: 50% 70%; } #pet.shakeOff .headAct { animation: shakeHead .5s ease-in-out .04s; } @keyframes shakeHead { 0%, 100% { transform: none; } 20% { transform: rotate(4deg); } 38% { transform: rotate(-5deg); } 56% { transform: rotate(3.5deg); } 74% { transform: rotate(-2deg); } } @keyframes shakeOff { 0%, 100% { transform: none; } 14% { transform: rotate(-6deg) translateX(-1.6%) scale(1.02, .98); } 32% { transform: rotate(6deg) translateX(1.6%); } 50% { transform: rotate(-4.5deg) translateX(-1.1%); } 68% { transform: rotate(3deg) translateX(.6%); } 84% { transform: rotate(-1deg); } } /* 귀 털기 */ #pet.earFlick .earL { animation: flickL .26s ease-in-out 2 !important; } #pet.earFlick .earR { animation: flickR .26s ease-in-out 2 !important; } @keyframes flickL { 0%, 100% { transform: none; } 40% { transform: skewX(9deg) scaleY(.9); } 70% { transform: skewX(1deg) scaleY(1.02); } } @keyframes flickR { 0%, 100% { transform: none; } 40% { transform: skewX(-9deg) scaleY(.9); } 70% { transform: skewX(-1deg) scaleY(1.02); } } #pet.hopSmall .squash { animation: hopSmall .44s ease-out; } @keyframes hopSmall { 0% { transform: none; } 18% { transform: scale(1.035, .955); } 46% { transform: translateY(-3%) scale(.98, 1.03); } 74% { transform: scale(1.02, .98); } 100% { transform: none; } } /* 막힌 단추를 눌렀을 때: 고개 절레절레(1.0 의 절레를 새 인형에) */ #pet.nope .headAct { animation: nopeHead .42s ease-in-out; } @keyframes nopeHead { 0%, 100% { transform: none; } 22% { transform: rotate(-6deg); } 48% { transform: rotate(6deg); } 72% { transform: rotate(-4deg); } 90% { transform: rotate(2deg); } } /* 목욕: 젖은 느낌(코드) — 털빛이 한 톤 가라앉고 귀가 처짐. 그 뒤 부르르(shakeOff)로 물방울이 튐 */ #pet .breathAct { transition: filter .35s ease; } #pet.wet .breathAct { filter: brightness(.9) saturate(.82) contrast(1.04); } #pet.wet .earL { animation: none; transform: skewX(5deg) scaleY(1.06); } #pet.wet .earR { animation: none; transform: skewX(-5deg) scaleY(1.06); } .wDrip { position: absolute; z-index: 6; width: var(--d, 9px); height: calc(var(--d, 9px) * 1.35); margin: calc(var(--d, 9px) * -.7) 0 0 calc(var(--d, 9px) / -2); pointer-events: none; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 62%, #fff 0 14%, rgba(190, 222, 248, .9) 30%, rgba(120, 176, 226, .9) 100%); box-shadow: inset 0 0 0 1.4px rgba(76, 128, 186, .8); animation: wDrip var(--t, .7s) cubic-bezier(.4, 0, .9, .6) both; } @keyframes wDrip { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { transform: translate(var(--dx, 0px), var(--dy, 30px)) scale(.7); opacity: 0; } } #world[data-light="night"] .wDrip { filter: brightness(.72) saturate(.8); } /* 기분이 낮으면 숨이 느림(1.0 숨느리게와 같은 뜻) */ #pet.slowBreath.breathing .breath, #pet.slowBreath.breathing .headBob { animation-duration: 4.8s; } /* 종이 반짝이 — 둘레 바깥으로 튀고 사라짐 */ .wSpark { position: absolute; z-index: 9; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 L14.6 9.4 L22.5 12 L14.6 14.6 L12 22.5 L9.4 14.6 L1.5 12 L9.4 9.4 Z' fill='%23fff0c0' stroke='%23c58b3e' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: wSpark .72s cubic-bezier(.2, .7, .3, 1) both; } .wSpark.wBig { width: 28px; height: 28px; margin: -14px 0 0 -14px; } @keyframes wSpark { 0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 0; } 25% { opacity: 1; transform: translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) scale(1.1) rotate(30deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5) rotate(80deg); } } #pet .breath { transform-origin: 50% 97%; } #pet .pHead, #pet .headAct, #pet .headBob { position: absolute; inset: 0; transform-origin: var(--neck, 50% 63%); } /* 머리 사본 아래 가장자리는 흐리게 — 몸통에 남긴 턱 아래 그림과 겹쳐 이음매가 안 보임(값은 JS 가 종류마다 넣음) */ #pet .headImg { -webkit-mask-image: linear-gradient(to bottom, #000 var(--chinA, 54%), transparent var(--chinB, 64%)); mask-image: linear-gradient(to bottom, #000 var(--chinA, 54%), transparent var(--chinB, 64%)); } #pet .pHead { transition: transform .55s cubic-bezier(.45, 0, .3, 1); } /* 가만히: 머리는 몸통 숨보다 한 박자 늦게 아주 조금 끄덕 */ #pet.breathing .headBob { animation: headBob 3.8s ease-in-out .4s infinite; } @keyframes headBob { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5%) rotate(.9deg); } } #pet.breathing .breath { animation: breath 3.8s ease-in-out infinite; } #pet.bigBreath .breathAct { animation: bigBreath .55s ease-in-out 1; } @keyframes breath { 0%, 100% { transform: none; } 22% { transform: scale(1.008, .99); } 60% { transform: scale(.985, 1.05); } } @keyframes bigBreath { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.982, 1.04); } } #pet .pTilt { transform-origin: 50% 97%; transition: transform .45s cubic-bezier(.45, 0, .3, 1); } #pet.lookUp .pTilt { transform: rotate(-4deg) translateY(-1.5%); } #pet.lookUp .pHead { transform: rotate(-4deg); transition-duration: .4s; } #pet.lookBowl .pTilt { transform: rotate(-7deg) translateX(-3.5%); } #pet.bowlRight.lookBowl .pTilt { transform: rotate(7deg) translateX(3.5%); } /* 그릇·사료 쪽으로 고개도 돌림 — 몸 5도만으로는 「밥이다!」가 안 읽혔음(18차) */ #pet.lookBowl .pHead { transform: rotate(-8deg) translateY(1.4%); transition-duration: .3s; } #pet.bowlRight.lookBowl .pHead { transform: rotate(8deg) translateY(1.4%); } /* 가만히 있을 때도 살아 있게 — 가끔 고개 갸웃 */ #pet.cockL .pHead { transform: rotate(-8.5deg); } #pet.cockR .pHead { transform: rotate(8.5deg); } #pet.cockL .pTilt { transform: rotate(-2.4deg); transition: transform .55s cubic-bezier(.45, 0, .3, 1); } #pet.cockR .pTilt { transform: rotate(2.4deg); transition: transform .55s cubic-bezier(.45, 0, .3, 1); } #pet.lookL .pTilt { transform: rotate(-1.8deg); transition: transform .28s ease-in-out; } #pet.lookR .pTilt { transform: rotate(1.8deg); transition: transform .28s ease-in-out; } #pet.lookL .pHead { transform: rotate(-5deg) translateX(-.8%); transition-duration: .45s; } #pet.lookR .pHead { transform: rotate(5deg) translateX(.8%); transition-duration: .45s; } /* 짖기: 0.1초 움츠림 → 0.15초 머리를 들며 늘임 → 0.2초 제자리. 귀는 한 박자 늦게 */ #pet.bark .headAct { animation: barkHead .46s ease-in-out; } @keyframes barkHead { 0% { transform: none; } 22% { transform: scale(1.03, .955); } 50% { transform: rotate(-3deg) scale(.99, 1.04); } 78% { transform: rotate(.6deg) scale(1, 1.005); } 100% { transform: none; } } #pet.bark .breathAct { animation: barkBody .46s ease-out; } @keyframes barkBody { 0% { transform: none; } 22% { transform: scale(1.03, .955); } 50% { transform: scale(.99, 1.03); } 100% { transform: none; } } #pet.bark .earL { animation: twitchL .3s ease-in-out .09s; } #pet.bark .earR { animation: twitchR .3s ease-in-out .09s; } #pet.pHop .squash { animation: petHop .62s cubic-bezier(.3, 1.3, .5, 1); } @keyframes petHop { 0% { transform: scale(1.05, .93); } 35% { transform: translateY(-9%) scale(.97, 1.05); } 70% { transform: translateY(0) scale(1.04, .96); } 100% { transform: none; } } #pet.pHop .shadow { animation: hopShade .62s ease-in-out; } @keyframes hopShade { 35% { transform: scale(.78); opacity: .6; } } /* 먹기 — 몸을 그릇 쪽으로 낮추고 고개 끄덕임으로 씹기 */ #pet { --dir: -1; } #pet.bowlRight { --dir: 1; } #pet { transition: transform .42s cubic-bezier(.45, 0, .3, 1); } #pet.toBowl { transform: translateX(var(--toBowl, 0px)); } #pet.leanFood .pTilt { transform: translate(calc(var(--dir) * 2.5%), 4.5%) rotate(calc(var(--dir) * 9deg)) scale(1.01, .94); } #pet.leanFood .pHead { transform: translate(calc(var(--dir) * 3.5%), 6.5%) rotate(calc(var(--dir) * 12deg)); } #pet[data-kind="cat"].leanFood .pHead { transform: translate(calc(var(--dir) * 3%), 5.5%) rotate(calc(var(--dir) * 11deg)); } #pet.nod .headAct { animation: nodHead .4s ease-in-out 4; } @keyframes nodHead { 0%, 100% { transform: none; } 50% { transform: translate(calc(var(--dir) * 1.5%), 6%) rotate(calc(var(--dir) * 3deg)) scale(1, .95); } } #pet .squash { transform-origin: 50% 97%; } #pet.squish .squash { animation: squish .32s cubic-bezier(.3, 1.8, .5, 1); } @keyframes squish { 0% { transform: none; } 30% { transform: scale(1.05, .94); } 100% { transform: none; } } /* 귀·꼬리 — 오린 부품을 경첩 둘레로 */ #pet .earL, #pet .earR { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); } #pet.breathing .earL { animation: earSwayL 3.8s ease-in-out .6s infinite; } #pet.breathing .earR { animation: earSwayR 3.8s ease-in-out .6s infinite; } /* 귀는 늘어진 아랫부분만, 뿌리 쪽 자른 가로선을 축으로 흔들림(skewX) — 돌리면 곧게 잘린 선·금이 드러났음(11차) */ @keyframes earSwayL { 0%, 100% { transform: none; } 50% { transform: skewX(9deg); } } @keyframes earSwayR { 0%, 100% { transform: none; } 50% { transform: skewX(-9deg); } } #pet.happy .headAct { animation: nuzzle .7s ease-in-out infinite; } @keyframes nuzzle { 0%, 100% { transform: rotate(-2.2deg) translateY(-.4%); } 50% { transform: rotate(2.2deg) translateY(-.8%); } } #pet.relax .earL { animation: none; transform: skewX(3deg) scaleY(1.03); } #pet.relax .earR { animation: none; transform: skewX(-3deg) scaleY(1.03); } #pet .earL.twitch { animation: twitchL .38s ease-in-out; } #pet .earR.twitch { animation: twitchR .38s ease-in-out; } #pet.shake .earL { animation: twitchL .2s ease-in-out 3; } #pet.shake .earR { animation: twitchR .2s ease-in-out 3; } @keyframes twitchL { 0%, 100% { transform: none; } 35% { transform: skewX(6deg) scaleY(.93); } 65% { transform: skewX(1deg); } } @keyframes twitchR { 0%, 100% { transform: none; } 35% { transform: skewX(-6deg) scaleY(.93); } 65% { transform: skewX(-1deg); } } #pet.alive .tail { animation: wag 2.4s ease-in-out infinite; } #pet.bark .tail { animation: wagFast .2s ease-in-out 3 !important; } /* 가만있는 틈의 몸짓(2~3초마다 하나) — 꼬리 한바탕 · 무게 옮기기 · 킁킁 · 두리번 */ #pet.wagBurst .tail { animation: wagFast .2s ease-in-out 4 !important; } #pet.shiftL .pTilt { transform: rotate(-4deg) translateX(-1.8%); transition: transform .5s cubic-bezier(.45, 0, .3, 1); } #pet.shiftR .pTilt { transform: rotate(4deg) translateX(1.8%); transition: transform .5s cubic-bezier(.45, 0, .3, 1); } #pet.sniff .headAct { animation: sniff .62s ease-in-out; } @keyframes sniff { 0%, 100% { transform: none; } 22% { transform: translateY(3.2%) rotate(-2.5deg); } 44% { transform: translateY(.8%); } 66% { transform: translateY(3.4%) rotate(2.5deg); } } #pet.happy .tail, #pet.leanFood .tail { animation: wagFast .26s ease-in-out infinite; } @keyframes wag { 0%, 30%, 100% { transform: none; } 40% { transform: skewY(-26deg); } 50% { transform: skewY(9deg) scaleX(.96); } 60% { transform: skewY(-24deg); } 70% { transform: skewY(8deg) scaleX(.97); } 82% { transform: skewY(-6deg); } } @keyframes wagFast { 0%, 100% { transform: skewY(-19deg); } 50% { transform: skewY(7deg) scaleX(.96); } } /* 고양이 꼬리 — 밑동 가로선(y=472)을 축으로 좌우 살랑, 끝 조각은 관절(y=400)에서 한 박자 늦게 더 휨(S자 채찍, 17차) */ #pet .tailTip { transform-origin: 0 0; } #pet[data-kind="cat"].alive .tail { animation: catSwish 3.6s ease-in-out infinite; } #pet[data-kind="cat"].alive .tailTip { animation: catSwishT 3.6s ease-in-out infinite; } #pet[data-kind="cat"].bark .tail { animation: catFlick .5s ease-in-out 1 !important; } #pet[data-kind="cat"].bark .tailTip { animation: catFlickT .5s ease-in-out 1 !important; } #pet[data-kind="cat"].wagBurst .tail { animation: catFlick .55s ease-in-out 2 !important; } #pet[data-kind="cat"].wagBurst .tailTip { animation: catFlickT .55s ease-in-out 2 !important; } #pet[data-kind="cat"].happy .tail, #pet[data-kind="cat"].leanFood .tail { animation: catSwish 1.6s ease-in-out infinite; } #pet[data-kind="cat"].happy .tailTip, #pet[data-kind="cat"].leanFood .tailTip { animation: catSwishT 1.6s ease-in-out infinite; } @keyframes catSwish { 0%, 100% { transform: skewX(0deg); } 12% { transform: skewX(-1.95deg); } 30% { transform: skewX(-5.2deg); } 42% { transform: skewX(-1.95deg); } 62% { transform: skewX(3.9deg); } 74% { transform: skewX(0.65deg); } 82% { transform: skewX(-1.3deg); } 92% { transform: skewX(-0.65deg); } } @keyframes catSwishT { 0%, 100% { transform: translateY(73.75%) skewX(0deg) translateY(-11.25%) skewX(0deg) translateY(-62.5%); } 12% { transform: translateY(73.75%) skewX(-1.95deg) translateY(-11.25%) skewX(4.15deg) translateY(-62.5%); } 30% { transform: translateY(73.75%) skewX(-5.2deg) translateY(-11.25%) skewX(-0.2deg) translateY(-62.5%); } 42% { transform: translateY(73.75%) skewX(-1.95deg) translateY(-11.25%) skewX(-12.75deg) translateY(-62.5%); } 62% { transform: translateY(73.75%) skewX(3.9deg) translateY(-11.25%) skewX(-0.5deg) translateY(-62.5%); } 74% { transform: translateY(73.75%) skewX(0.65deg) translateY(-11.25%) skewX(9.45deg) translateY(-62.5%); } 82% { transform: translateY(73.75%) skewX(-1.3deg) translateY(-11.25%) skewX(3.2deg) translateY(-62.5%); } 92% { transform: translateY(73.75%) skewX(-0.65deg) translateY(-11.25%) skewX(-4.25deg) translateY(-62.5%); } } @keyframes catFlick { 0%, 100% { transform: skewX(0deg); } 20% { transform: skewX(-4.55deg); } 35% { transform: skewX(-7.8deg); } 55% { transform: skewX(-1.95deg); } 70% { transform: skewX(2.6deg); } 85% { transform: skewX(1.3deg); } } @keyframes catFlickT { 0%, 100% { transform: translateY(73.75%) skewX(0deg) translateY(-11.25%) skewX(0deg) translateY(-62.5%); } 20% { transform: translateY(73.75%) skewX(-4.55deg) translateY(-11.25%) skewX(6.65deg) translateY(-62.5%); } 35% { transform: translateY(73.75%) skewX(-7.8deg) translateY(-11.25%) skewX(-1.6deg) translateY(-62.5%); } 55% { transform: translateY(73.75%) skewX(-1.95deg) translateY(-11.25%) skewX(-15.35deg) translateY(-62.5%); } 70% { transform: translateY(73.75%) skewX(2.6deg) translateY(-11.25%) skewX(-1.2deg) translateY(-62.5%); } 85% { transform: translateY(73.75%) skewX(1.3deg) translateY(-11.25%) skewX(7.2deg) translateY(-62.5%); } } /* 고양이 귀털기 — 한쪽 귀만 파르르 뒤로(17차) */ #pet[data-kind="cat"].earFlick .earL { animation: none !important; } #pet[data-kind="cat"].earFlick .earR { animation: catEarFlick .24s ease-in-out 2 !important; } @keyframes catEarFlick { 0%, 100% { transform: none; } 35% { transform: skewX(-15deg) scaleY(.82); } 70% { transform: skewX(-3deg) scaleY(1.02); } } /* 얼굴 (코드) — 위치는 JS 가 그림 칸 % 로 넣음 */ #pet .face { position: absolute; inset: 0; pointer-events: none; } #pet .face > * { position: absolute; transform: translate(-50%, -50%); } #pet .eye svg { width: 100%; height: 100%; overflow: visible; filter: blur(.3px); } #pet .eye .ball { fill: #2c1609; transform-box: fill-box; transform-origin: 50% 82%; } #pet .eye .glint { fill: #fff; transform-box: fill-box; transform-origin: center; } #pet .eye .look { transition: transform .16s ease-out; } /* 선 굵기는 눈 칸(100) 기준 — 폰에서 3.4 는 0.5px 라 회색으로 보였음 */ #pet .eye .shutLine, #pet .eye .happyLine { fill: none; stroke: var(--wInk); stroke-width: 11; stroke-linecap: round; opacity: 0; } #pet .eye.half .ball { transform: scaleY(.46); } #pet .eye.half .glint { opacity: 0; } #pet .eye.shut .ball, #pet .eye.shut .glint { opacity: 0; } #pet .eye.shut .shutLine { opacity: 1; } #pet .eye.happy .ball, #pet .eye.happy .glint { opacity: 0; } #pet .eye.happy .happyLine { opacity: 1; } #pet .mouthOpen { opacity: 0; transform-origin: 50% 20%; } #pet .mouthOpen svg { width: 100%; height: 100%; overflow: visible; } #pet .mouthOpen .mFur { fill: var(--mfur, rgb(243, 228, 197)); filter: blur(1.2px); } #pet .mouthOpen .mIn { fill: #5a2412; stroke: var(--wInk); stroke-width: 3; stroke-linejoin: round; } #pet .mouthOpen .mTongue { fill: #f08a7e; } #pet.chew .mouthOpen { opacity: 1; transform: translate(-50%, -50%) scaleY(.75); } #pet.bark .mouthOpen { animation: barkMouth .46s linear; } @keyframes barkMouth { 0%, 24% { opacity: 0; } 30% { opacity: 1; transform: translate(-50%, -50%) scale(2.5, 3); } 72% { opacity: 1; transform: translate(-50%, -50%) scale(2.25, 2.7); } 80%, 100% { opacity: 0; } } /* 의성어 스티커 — 아이폰 무음 스위치를 켜도 읽히게 */ #world .ono { position: absolute; z-index: 12; font-weight: 700; font-size: 30px; line-height: 1; color: var(--wInk); pointer-events: none; white-space: nowrap; text-shadow: 3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff, 0 6px 0 rgba(68, 31, 14, .16); animation: onoPop .95s cubic-bezier(.2, 1.6, .4, 1) forwards; } #world .ono.small { font-size: 20px; } #world .ono.wBig { font-size: 37px; } #world .ono.slowOno { animation-duration: 1.9s; opacity: .85; } @keyframes onoPop { 0% { transform: translate(-50%, -50%) scale(.2) rotate(var(--r, -6deg)); opacity: 0; } 22% { transform: translate(-50%, -50%) scale(1.15) rotate(var(--r, -6deg)); opacity: 1; } 80% { transform: translate(-50%, -64%) scale(1) rotate(var(--r, -6deg)); opacity: 1; } 100% { transform: translate(-50%, -72%) scale(.4) rotate(var(--r, -6deg)); opacity: 0; } } #world[data-light="night"] .ono { filter: brightness(.82) saturate(.85); } /* 하트·숫자 */ .wHeart { position: absolute; width: 28px; height: 26px; margin: -13px 0 0 -14px; pointer-events: none; z-index: 10; animation: heartUp 1s cubic-bezier(.2, .7, .4, 1) forwards; } .wHeart svg { width: 100%; height: 100%; overflow: visible; } .wHeart path { fill: #f08a7e; stroke: var(--wInk); stroke-width: 2.4; stroke-linejoin: round; } @keyframes heartUp { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.15); opacity: 1; } 100% { transform: translate(var(--hx, 0), -70px) scale(.9); opacity: 0; } } /* PC·태블릿 가로: 세로 방 그림을 화면 높이에 맞추고 양옆은 종이(world.js 가 아래 단추 띠에 맞춰 조금 키움) */ @media (min-aspect-ratio: 3/4) { #room { --rw: calc(100vh * 768 / 1376); box-shadow: 0 0 0 3px var(--wInk), 0 20px 50px rgba(68, 31, 14, .25); overflow: hidden; } @supports (height: 100svh) { #room { --rw: calc(100svh * 768 / 1376); } } } @media (prefers-reduced-motion: reduce) { .prop.wPop { animation: none; } #pet.breathing .breath, #world .motes i { animation: none; } } /* ====================================================================== * 첫 만남(ui/book.js — 2026-10-23 6단계). proto2/style.css 그대로, 이름만 바꿈(머리말 참고) * ====================================================================== */ /* 연필 밑그림·가구 사본은 첫 만남에서만, 표지가 뜬 다음(wLoad)부터 받음 — 첫 화면 무게에 안 들어가고 옛 손님은 아예 안 받음 */ .layer.sketch { background-image: none; } #world.needSketch .layer.sketch { background-image: url("art/house_sketch.webp?v=1"); } .prop { background-image: none; } #world.wBook .prop { background-image: url("art/house_day.webp?v=1"); } #world.wBook:not(.wLoad) .layer, #world.wBook:not(.wLoad) .prop { background-image: none !important; } /* 색 방 그림(낮·저녁·밤)과 가구 사본은 스티커판 그림 두 장이 온 뒤(book.js 가 wColor) — 한꺼번에 청해서 느린 망에서 판이 빈 칸이었음(느린폰 2) */ #world.wBook:not(.wColor) .layer:not(.sketch), #world.wBook:not(.wColor) .prop { background-image: none !important; } /* 창에서 번지는 색 — 가장자리가 부드러운 원형 가면(world.js 칠하기가 진짜 시계로 한 칸씩 그림) */ .layer.color { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* 표지 밑에서 방 빛을 한 번 미리 그려 둠(0.2초, 거의 투명) — 밤에 빛이 켜지는 순간 처음 그리느라 0.05초 멈췄음(22판) */ #room.prewarmLit .winGlow, #room.prewarmLit .shaft, #room.prewarmLit .beam, #room.prewarmLit .light, #room.prewarmLit .sky { opacity: .01 !important; transition: none !important; } /* 첫 만남이 끝나 집 화면 자리로 옮겨 앉을 때 — 방·펫이 부드럽게(한 번에 툭 옮기면 「다른 화면」으로 보임) */ #world.wSettle #room { transition: left .6s cubic-bezier(.45, 0, .3, 1), top .6s cubic-bezier(.45, 0, .3, 1), width .6s cubic-bezier(.45, 0, .3, 1); } #world.wSettle #pet { transition: transform .42s cubic-bezier(.45, 0, .3, 1), left .6s cubic-bezier(.45, 0, .3, 1), bottom .6s cubic-bezier(.45, 0, .3, 1), width .6s cubic-bezier(.45, 0, .3, 1), translate .6s cubic-bezier(.45, 0, .3, 1); } /* 끝 쪽지가 졸고 있는 펫 머리를 덮으면 그만큼만 아래로(ui/book.js 쪽지비키기 — 펫 1.3배 뒤 375×667 큰 글씨). translate 속성이라 transform 과 안 섞임 */ /* .35초 — 이름 ✓ 뒤 펫이 엎드림 → 앉음으로 일어날 때 다시 비키는 동안 쪽지가 머리를 덮는 틈을 짧게(10/26, 예전 .5초) */ #pet.noteDodge { translate: 0 var(--dodge, 0px); transition: translate .35s cubic-bezier(.45, 0, .3, 1); } /* ---------- 펫 — 붙이러 가는 길·착·칼선 ---------- */ #pet.wTop { z-index: 9; } /* 붙는 동안은 스티커판보다 위(판 뒤에 깔려 몸이 잘려 보였음) */ #pet.prewarm { opacity: .01; pointer-events: none; } #pet.snapping .shadow, #pet.flying .shadow { opacity: .55; transform: scale(.82); transition: transform .3s, opacity .2s; } #pet.grounded .shadow, #pet.flat .shadow { opacity: 1; } #pet.land .shadow { animation: shadowLand .42s cubic-bezier(.3, 1.6, .5, 1); } @keyframes shadowLand { 0% { transform: scale(1.26, 1.1); } 50% { transform: scale(.95, 1); } 100% { transform: none; } } #pet .front, #pet .backside { backface-visibility: hidden; -webkit-backface-visibility: hidden; } #pet .backside { position: absolute; inset: 0; transform: rotateY(180deg); } /* 뒷면 = 스티커 모양 흰 종이(칼선이 그려진 스티커 그림의 실루엣) */ #pet .backside img { width: 100%; height: 100%; filter: brightness(0) invert(1) drop-shadow(0 3px 2px rgba(68, 31, 14, .25)); } #pet .outlined, #pet .ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* 집 화면(첫 만남 밖)에서는 스티커·칼선·뒷면을 아예 안 그림 */ #world:not(.wBook) #pet .outlined, #world:not(.wBook) #pet .ring, #world:not(.wBook) #pet .backside { display: none; } /* 칼선은 그 자리에서 사라짐 — 바꿔 끼우는 그 프레임부터 보여야 함(안 그러면 한 프레임 테두리 없는 강아지가 끼었음) */ #pet .ring { opacity: 0; transform-origin: 50% 56%; filter: drop-shadow(0 3px 2px rgba(68, 31, 14, .22)); } #pet.flying .ring, #pet.snapping .ring, #pet.flat .ring { opacity: .01; } #pet.peel .ring { opacity: 1; } /* 깨어나는 몸짓(고양이) — 눌렸다 펴짐 */ #pet.awake .tiltAct { animation: awake .5s ease-in-out; } @keyframes awake { 0% { transform: none; } 32% { transform: scale(.985, 1.03) translateY(-.6%); } 66% { transform: scale(1.008, .994); } 100% { transform: none; } } #pet.firstWag .tail { animation: wagFast .22s ease-in-out 3; } #pet[data-kind="cat"].firstWag .tail { animation: catFlick .55s ease-in-out 1; } #pet[data-kind="cat"].firstWag .tailTip { animation: catFlickT .55s ease-in-out 1; } /* 착 — 17차: 1.12×0.85 는 얼굴까지 가로로 늘어 「그림 비율이 바뀐 것」으로 보였음 */ #pet.land .squash { animation: petLand .5s ease-out; } @keyframes petLand { 0% { transform: none; } 16% { transform: scale(1.06, .915); } 40% { transform: scale(.975, 1.035) translateY(-1.6%); } 62% { transform: scale(1.012, .99); } 82%, 100% { transform: none; } } #pet.land .earL { animation: landEarL .5s ease-out .04s; } #pet.land .earR { animation: landEarR .5s ease-out .04s; } @keyframes landEarL { 0%, 100% { transform: none; } 25% { transform: skewX(3deg) scaleY(1.07); } 60% { transform: skewX(1deg) scaleY(.97); } } @keyframes landEarR { 0%, 100% { transform: none; } 25% { transform: skewX(-3deg) scaleY(1.07); } 60% { transform: skewX(-1deg) scaleY(.97); } } /* 톡: 반 바퀴 돌며 날아감(뒷면은 흰 종이) / 끌어다 놓음: 바로 착 */ #pet.flying .flight { animation: petFly .7s cubic-bezier(.3, 0, .5, 1) both; } #pet.flying .flipper { animation: flutter .7s ease-in-out both; } @keyframes flutter { 0% { transform: none; } 22% { transform: rotate(-9deg) scaleX(.9); } 48% { transform: rotate(7deg); } 74% { transform: rotate(-4deg) scaleX(.95); } 100% { transform: none; } } #pet.snapping .flight { animation: snap var(--snapT, 160ms) cubic-bezier(.55, .085, .68, .53) both; } #pet.snapping .shadow { animation: shadowNear var(--snapT, 160ms) ease-in both; } @keyframes shadowNear { 0% { opacity: .3; transform: scale(1.22); } 100% { opacity: 1; transform: none; } } @keyframes petFly { 0% { transform: translate(var(--fx), var(--fy)) scale(var(--fs, .5)); } 45% { transform: translate(calc(var(--fx) * .45), calc(var(--fy) * .45 - 34%)) scale(.92); } 100% { transform: translate(0, 0) scale(1); } } @keyframes snap { 0% { transform: translate(var(--fx), var(--fy)) scale(var(--fs, .5)) rotate(var(--fr, 0deg)); } 100% { transform: translate(0, 0) scale(1) rotate(0); } } /* 배불러 졸 때(끝 쪽지) — 숨이 길고 깊음 */ #pet.dozy.breathing .breath { animation-duration: 5s; } /* 칼선 둘레에서 바깥으로 튀는 반짝이 — 「칼선이 풀려 살아났다」 */ .wSpark.wBurst { animation: sparkBurst .62s cubic-bezier(.2, .7, .3, 1) both; filter: drop-shadow(0 0 3px rgba(255, 232, 170, .85)); } @keyframes sparkBurst { 0% { opacity: 1; transform: translate(0, 0) scale(.8) rotate(0); } 30% { opacity: 1; transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) scale(1.08) rotate(35deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4) rotate(80deg); } } /* 의성어가 들린 스티커를 피해 사라짐 */ #world .ono.bye { animation: onoBye .1s ease-out forwards !important; } @keyframes onoBye { to { opacity: 0; transform: translate(-50%, -70%) scale(.8) rotate(var(--r, -6deg)); } } /* 「배 +30」 — 그릇 위로 떠올랐다 사라짐 */ .wFloat { position: absolute; z-index: 11; font-weight: 700; font-size: 20px; color: var(--ui); background: #fff8ea; border: 2.5px solid var(--wInk); border-radius: 999px; padding: 2px 12px; pointer-events: none; animation: floatUp 1.4s cubic-bezier(.2, .7, .4, 1) forwards; white-space: nowrap; } @keyframes floatUp { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.08); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -46px) scale(1); opacity: 0; } } #glyphWarm { position: fixed; left: -9999px; top: 0; opacity: .01; pointer-events: none; } /* ---------- 그릇 부르기(꼬르륵 뒤) ---------- */ #bowl.call { animation: bowlCall 1s ease-in-out 2; } @keyframes bowlCall { 0%, 100% { transform: none; filter: none; } 50% { transform: translateY(-6%) scale(1.06); filter: drop-shadow(0 0 6px #ffe9a8); } } /* ---------- 사료 봉지 ---------- */ #bag { position: absolute; top: 40%; left: 10px; width: 104px; padding: 0; margin: 0; border: 0; background: none; touch-action: none; transform-origin: 50% 30%; cursor: grab; z-index: 6; -webkit-appearance: none; appearance: none; } #bag:focus-visible { outline: 3px solid #e8913a; outline-offset: 4px; border-radius: 14px; } #bag.travel { transition: left .38s cubic-bezier(.45, 0, .3, 1), top .38s cubic-bezier(.45, 0, .3, 1), transform .45s cubic-bezier(.3, 1.3, .5, 1) !important; } #bag svg { display: block; width: 100%; overflow: visible; filter: url(#paperProp) drop-shadow(0 6px 4px rgba(68, 31, 14, .2)); } #world:not([data-light="day"]) #bag svg { filter: url(#paperProp) url(#petLight) drop-shadow(0 6px 4px rgba(68, 31, 14, .2)); } /* 그릇이 펫 왼쪽일 때 — 봉지를 거울로 뒤집어 입이 오른쪽(글자는 안 뒤집히게 글자만 다시 뒤집음) */ #bag.flip svg { transform: scaleX(-1); } #bag.flip .bagText { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; } #bag .bagBody { fill: #efc27e; stroke: #6a3a20; stroke-width: 3.6; stroke-linejoin: round; } #bag .bagTop { fill: #e2a75e; stroke: #6a3a20; stroke-width: 3.6; stroke-linejoin: round; } #bag .bagFold { fill: none; stroke: #fff2d6; stroke-width: 4; stroke-linecap: round; opacity: .55; } #bag .bagLabel { fill: #fff8ea; stroke: #6a3a20; stroke-width: 2.6; } #bag .bagBone, #bag .bagFish { fill: #f6efe2; stroke: var(--wInk); stroke-width: 2.6; stroke-linejoin: round; } #bag .bagFish { display: none; } #bag.cat .bagFish { display: inline; } #bag.cat .bagBone { display: none; } #bag .bagText { font: 700 22px "DC Gureum Sans", sans-serif; fill: var(--wInk); } #bag .bagKib { fill: #a0632f; stroke: var(--wInk); stroke-width: 1.6; } #bag.in { animation: bagIn .6s cubic-bezier(.3, 1.5, .5, 1) both; } @keyframes bagIn { from { transform: translateY(-160%) rotate(-12deg); } to { transform: none; } } #bag.wiggle { animation: bagWiggle 1.2s ease-in-out infinite; } @keyframes bagWiggle { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-10deg) translateY(3px); } 90% { transform: rotate(-4deg); } } #bag.flip.wiggle { animation-name: bagWiggleR; } @keyframes bagWiggleR { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(10deg) translateY(3px); } 90% { transform: rotate(4deg); } } #bag.bagOut { transition: transform .45s ease-in, opacity .4s; transform: translateY(-170%) rotate(10deg) !important; opacity: 0; } #bag.open .bagTop { fill: #d99b52; } /* ---------- 쓰다듬기 안내 — 머리 위를 손가락이 쓸고 지나감 ---------- */ #petHint { position: absolute; z-index: 7; width: 30%; height: 9%; transform: translate(-50%, -50%); pointer-events: none; animation: hintIn .2s cubic-bezier(.3, 1.4, .5, 1) both; } #petHint .hand { position: absolute; left: 66%; top: -40%; width: 30%; aspect-ratio: 44 / 50; transform-origin: 30% 90%; animation: stroke 1s ease-in-out infinite; } #petHint .hand svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgba(68, 31, 14, .28)); } #petHint .hand path { fill: #fffaf0; stroke: var(--wInk); stroke-width: 3.2; stroke-linejoin: round; } #petHint .label { position: absolute; left: 50%; bottom: 140%; transform: translateX(-50%); white-space: nowrap; font-weight: 700; font-size: 19px; color: var(--wInk); background: #f6d488; border: 2.5px solid var(--wInk); border-radius: 999px; padding: 3px 12px; box-shadow: 0 3px 0 rgba(68, 31, 14, .2); } #petHint.hOut { animation: hintOut .25s both; } @keyframes hintOut { to { opacity: 0; } } @keyframes hintIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes stroke { 0%, 100% { transform: translate(0, 0) rotate(-10deg); } 50% { transform: translate(38%, 9%) rotate(16deg); } } /* ---------- 스티커판 ---------- */ #stickers { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(94vw, 420px); transform: translateX(-50%); z-index: 8; } #stickers.in { animation: sheetIn .6s cubic-bezier(.3, 1.25, .5, 1) both; } @keyframes sheetIn { from { transform: translate(-50%, 115%) rotate(4deg); } to { transform: translateX(-50%) rotate(-1.2deg); } } #stickers.in, #stickers.stay { transform: translateX(-50%) rotate(-1.2deg); } #stickers.stay { transition: transform .3s cubic-bezier(.3, 0, .3, 1); } #stickers.stLow { transition: transform .35s cubic-bezier(.3, 0, .3, 1); transform: translate(-50%, 66%) rotate(.5deg); } #stickers.stOut { transition: transform .16s cubic-bezier(.5, 0, .9, .5); transform: translate(-50%, 135%) rotate(2deg); } #stickers.prewarm { opacity: .01; pointer-events: none; } #stickers .sheetPaper { background: #fffaf0 var(--noise, none); border: 3px solid var(--wInk); border-radius: 18px; padding: 10px 14px 10px; box-shadow: 0 8px 0 -3px #e3cfae, 0 14px 24px rgba(68, 31, 14, .25); position: relative; } #stickers .sheetPaper::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(68, 31, 14, .25); border-radius: 13px; pointer-events: none; } #stickers.grabbing .sheetTitle { opacity: 0; transition: opacity .15s; } /* 들린 스티커가 제목을 덮었음 */ #stickers .sheetTitle { margin: 2px 0 9px; text-align: center; font-weight: 700; font-size: 19px; color: var(--wInk); } #stickers .sheetHint { margin: 6px 0 0; text-align: center; font-size: 18px; font-weight: 700; color: var(--wInk); } #stickers .slots { display: flex; justify-content: space-around; gap: 6px; } #stickers .slot { position: relative; width: 44%; aspect-ratio: 1 / 1.08; display: flex; flex-direction: column; align-items: center; } /* 떼어 낸 자리 — 스티커 모양 그대로의 매끈한 뒷종이 */ #stickers .ghost { position: absolute; top: 0; left: 6%; width: 88%; aspect-ratio: 1; filter: drop-shadow(0 0 1px rgba(68, 31, 14, .35)); } #stickers .ghost i { position: absolute; inset: 0; background: #f1e6d1; -webkit-mask: var(--m, none) center / 100% 100% no-repeat; mask: var(--m, none) center / 100% 100% no-repeat; } #stickers .sticker { position: relative; width: 88%; aspect-ratio: 1; padding: 0; border: 0; background: none; touch-action: none; cursor: grab; transform-origin: 50% 90%; will-change: transform; border-radius: 20px; } #stickers .sticker:focus-visible { outline: 3px solid #e8913a; outline-offset: 2px; } #stickers .sticker img { width: 100%; height: 100%; filter: url(#petInk) drop-shadow(0 3px 2px rgba(68, 31, 14, .28)); } #stickers .sticker img:not([src]) { visibility: hidden; } /* 들린 귀퉁이 — 떼어 보고 싶게 */ #stickers .corner { position: absolute; right: 8%; top: 3%; width: 20%; aspect-ratio: 1; border-radius: 0 0 0 35%; background: linear-gradient(225deg, rgba(255, 255, 255, 0) 49%, #fffdf7 50%, #e8dfcd 80%); filter: drop-shadow(-2px 3px 2px rgba(68, 31, 14, .28)); transform-origin: 100% 0; animation: cornerLift 1.6s ease-in-out infinite; } @keyframes cornerLift { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-6deg) scale(1.12); } } #stickers .sticker.wobble { animation: stickWobble .7s ease-in-out; } @keyframes stickWobble { 0%, 100% { transform: none; } 25% { transform: rotate(-5deg) translateY(-4%); } 55% { transform: rotate(4deg) translateY(-2%); } 80% { transform: rotate(-1.5deg); } } #stickers .sticker.gone { visibility: hidden; } /* 큰 글씨에서 두 줄이 되면 「강아지 / 코코」로(이름 가운데 「코/코」에서 안 끊김 — 화면글 6) */ #stickers .stTag { position: relative; margin-top: auto; font-weight: 700; font-size: 17.5px; line-height: 1.25; color: var(--wInk); background: #f6d488; border: 2px solid var(--wInk); border-radius: 8px; padding: 1px 10px; transform: rotate(-2deg); word-break: keep-all; text-align: center; } /* 이름 글자색 — #b5552d 는 노란 바탕에서 3.4:1 이라 낮았음 → #7a2e12 약 6.6:1, 밤 빛(밝기 .74)에서도 약 4.9:1 (화면글 9) */ #stickers .stTag b { color: #7a2e12; } /* 손가락에 붙은 스티커 — 방 위로 올라갈수록 방에서의 크기로 커짐 */ #grab { position: fixed; z-index: 15; pointer-events: none; transition: transform .04s linear; } #grab img { width: 100%; height: 100%; filter: url(#petInk) drop-shadow(0 14px 10px rgba(68, 31, 14, .32)); } /* ---------- 밥 독(아래 단추 하나) ---------- */ #dock { position: absolute; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); display: flex; justify-content: center; z-index: 7; pointer-events: none; } #dock > * { pointer-events: auto; } #dock.in { animation: dockIn .5s cubic-bezier(.3, 1.5, .5, 1) both; } @keyframes dockIn { from { transform: translateY(140%); } to { transform: none; } } #dock .dockBtn { position: relative; width: 78px; height: 78px; border-radius: 50%; border: 3px solid var(--wInk); background: #fffaf0; box-shadow: 0 5px 0 rgba(68, 31, 14, .25); display: grid; place-items: center; padding: 6px 0 4px; cursor: pointer; transition: transform .12s; color: var(--wInk); } #dock .dockBtn:active { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 rgba(68, 31, 14, .25); } #dock .dockBtn:focus-visible { outline: 3px solid #e8913a; outline-offset: 3px; } /* 밥은 한 번뿐 — 다 먹은 뒤 끝 쪽지가 뜨기 전까지 흐리게(흐름 3) */ #dock .dockBtn:disabled { opacity: .5; cursor: default; box-shadow: 0 2px 0 rgba(68, 31, 14, .2); } #dock .dockBtn svg { width: 40px; height: 40px; } #dock .dockBtn svg ellipse { fill: #a0632f; stroke: var(--wInk); stroke-width: 3; } #dock .dockBtn svg path { fill: #f3bdb4; stroke: var(--wInk); stroke-width: 3; stroke-linejoin: round; } #dock .dockBtn svg circle { fill: #c88a4e; stroke: var(--wInk); stroke-width: 2; } #dock .dockBtn span { font-weight: 700; font-size: 15px; margin-top: -4px; } #dock .dockBtn.nudge { animation: nudge 1.2s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* 밥 단추에 찍히는 작은 발자국 — 글 대신 */ #dock .dockBtn.nudge::after { content: ""; position: absolute; right: -8px; top: -6px; width: 20px; height: 20px; background: radial-gradient(circle at 50% 70%, var(--wInk) 34%, transparent 36%), radial-gradient(circle at 22% 30%, var(--wInk) 14%, transparent 16%), radial-gradient(circle at 50% 18%, var(--wInk) 14%, transparent 16%), radial-gradient(circle at 78% 30%, var(--wInk) 14%, transparent 16%); opacity: .85; animation: pawIn 1.2s ease-in-out infinite; } @keyframes pawIn { 0%, 30% { transform: scale(0); } 45% { transform: scale(1.2); } 60%, 100% { transform: scale(1); } } /* 처음 한 번 — 「눌러서 밥 주기」 / 「봉지를 아래로 끌어 주세요」 */ #world .say { position: absolute; z-index: 8; white-space: nowrap; font-weight: 700; font-size: 16px; color: var(--wInk); background: #f6d488; border: 2.5px solid var(--wInk); border-radius: 999px; padding: 3px 12px; box-shadow: 0 3px 0 rgba(68, 31, 14, .2); pointer-events: none; animation: sayBob 1.2s ease-in-out infinite; } #world .say .sayHand { display: inline-block; width: 18px; height: 22px; vertical-align: -5px; margin-right: 6px; animation: sayDown 1s ease-in-out infinite; } #world .say .sayHand svg { width: 100%; height: 100%; overflow: visible; transform: rotate(180deg); } #world .say .sayHand path { fill: #fff8ea; stroke: var(--wInk); stroke-width: 3; stroke-linejoin: round; } @keyframes sayDown { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } } @keyframes sayBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* 글 폭만큼(큰 글씨에서 「주기」가 노란 알약 밖으로 나갔음 — 화면글 5). 절대 위치 + 좌우 0 + 자동 여백 = 가운데(transform 을 안 써 sayBob 과 안 부딪힘) */ #dockSay { bottom: calc(100% + 10px); left: 0; right: 0; width: max-content; margin: 0 auto; text-align: center; } /* ---------- 끝 쪽지 — 이름표 · 다음 밥시간 · 내일 약속 ---------- */ #endNote { position: absolute; left: 50%; top: max(62px, calc(env(safe-area-inset-top) + 56px)); width: min(94vw, 420px); transform: translateX(-50%) rotate(-.6deg); z-index: 25; background: #fffaf0 var(--noise, none); border: 3px solid var(--wInk); border-radius: 18px; padding: 12px 14px 12px; box-shadow: 0 10px 0 -4px #e3cfae, 0 18px 40px rgba(68, 31, 14, .35); animation: noteIn .5s cubic-bezier(.3, 1.5, .5, 1) both; color: var(--wInk); } @keyframes noteIn { from { transform: translate(-50%, -30%) rotate(2deg); opacity: 0; } to { transform: translateX(-50%) rotate(-.6deg); opacity: 1; } } /* 끝 쪽지는 위쪽 빈 벽에 — 이름표가 들어가 시험판보다 커서 아래에 두면 졸고 있는 펫 얼굴을 가렸고, 폰 자판도 아래를 덮음(소리 단추 아래부터) */ #endNote h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; word-break: keep-all; } #endNote p { margin: 4px 0; font-size: 15.5px; font-weight: 400; line-height: 1.5; word-break: keep-all; } /* 이름표 줄 — 칸이 모자랄 때만 「이 이름으로」가 다음 줄로(좁은 폰·확대·큰 글씨에서 적는 이름이 다 안 보였음 — 화면글 2). em 이라 확대·글씨 키우기를 따라감 */ #endNote .endName { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 2px; } #endNote .endName label { font-weight: 700; font-size: 15px; padding: 2px 8px; background: #f6d488; border: 2px solid var(--wInk); border-radius: 8px; transform: rotate(-2deg); white-space: nowrap; } #endName { flex: 1 1 7.5em; min-width: 7.5em; width: auto; font: inherit; font-weight: 700; font-size: 19px; color: var(--wInk); padding: 7px 10px; border: 2.5px solid var(--wInk); border-radius: 12px; background: #fff; text-align: center; } #endNote .endBtn { margin-left: auto; } #endName:focus { outline: 3px solid #e8913a; outline-offset: 1px; } #endNote .endBtn { min-height: 44px; padding: 6px 10px; border: 2.5px solid var(--wInk); border-radius: 12px; background: #fff; font-weight: 700; font-size: 14.5px; color: var(--wInk); white-space: nowrap; box-shadow: 0 3px 0 rgba(68, 31, 14, .2); } #endNote .endOk { min-height: 1.4em; margin: 2px 0 0; font-size: 14px; font-weight: 700; color: #b5552d; } #endNote .endOk:empty { min-height: 0; margin: 0; } #endNote .endLink { min-height: 40px; padding: 2px 4px; border: 0; background: none; font-weight: 700; font-size: 15.5px; color: #b5552d; text-decoration: underline; text-underline-offset: 3px; } /* 「좋아요」 바탕 — #e8913a 는 흰 글씨와 2.5:1 이라 낮았음 → #c96f1f 약 3.6:1(19px 굵게 = 큰 글씨 3:1 이상, 밤 빛에서도 — 화면글 9) */ #endNote .endGo { display: block; width: 100%; min-height: 50px; margin-top: 8px; border: 3px solid var(--wInk); border-radius: 999px; background: #c96f1f; color: #fff; font-weight: 700; font-size: 19px; box-shadow: 0 4px 0 rgba(68, 31, 14, .35); } #endNote .endGo:active, #endNote .endBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(68, 31, 14, .3); } #endNote .endBtn .goIc { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } /* 좁은 폰(폭 399 이하 — 320·360·375(아이폰 SE·미니)·384·확대한 아이폰) — 「이름표」 딱지를 칸 위 왼쪽에 얹고 「이 이름으로」는 ✓ 단추로. 접히는 줄로 바꾼 뒤 320 폭에서는 단추가 늘 다음 줄로 내려가 쪽지가 62px 길어져 졸고 있는 펫 정수리를 가렸고(글씨 130%), 360 폭 + 글씨 150% 에서는 8글자 끝이 9px 잘렸음(6단계 손질 재검증 화면글 2·nice). 딱지를 줄 밖으로 빼면 칸이 줄의 거의 다를 써서 8글자가 들어가고 한 줄로 끝남. 굵기·글씨 키우기를 따라가게 em ★ 399 까지 — 370 이었을 때 375 폭은 옛 배치라 보통 글씨로도 8글자 끝이 7px 잘렸고, 글씨 150% 면 「이 이름으로」가 다음 줄로 내려가 쪽지가 펫 귀·정수리를 덮었음 (6단계 2차 손질 재검증 nice). 390 폭부터는 옛 배치로도 8글자가 들어감 */ @media (max-width: 399px) { #endNote .endName { position: relative; font-size: 13px; padding-top: calc(1.3em + 2px); } #endNote .endName label { position: absolute; left: 10px; top: 0; z-index: 1; font-size: 1em; line-height: 1.3; padding: 0 7px; } #endNote .endBtn#endNameGo { min-width: 44px; padding: 0 10px; display: grid; place-items: center; } #endNote .endBtn .goTx { display: none; } #endNote .endBtn .goIc { display: block; } } #endNote button:focus-visible { outline: 3px solid #e8913a; outline-offset: 2px; } /* 낮은 폰(320×568 등) — 쪽지를 줄여 졸고 있는 펫 머리를 덜 가림 */ @media (max-height: 640px) { #endNote { top: max(58px, calc(env(safe-area-inset-top) + 52px)); padding: 9px 12px 10px; } #endNote h2 { font-size: 17.5px; margin-bottom: 5px; } #endNote p { font-size: 14.5px; margin: 2px 0; line-height: 1.4; } #endName { font-size: 17px; padding: 5px 8px; } #endNote .endBtn { min-height: 40px; } #endNote .endLink { min-height: 32px; font-size: 14.5px; } #endNote .endGo { min-height: 44px; font-size: 17px; margin-top: 6px; } } /* 좁고 조금 낮은 폰(아이폰 SE 375×667 등 — 폭 399·높이 700 이하) — 글씨는 그대로, 쪽지 안 여백만 위 낮은 폰 만큼 줄임. 글씨 150% 에서 쪽지 아래가 졸고 있는 펫 정수리에 닿았음(6단계 2차 손질 재검증 nice) */ @media (max-width: 399px) and (max-height: 700px) { #endNote { padding: 9px 12px 10px; } #endNote h2 { margin-bottom: 5px; } #endNote p { margin: 2px 0; } #endNote .endGo { margin-top: 6px; } } /* ---------- 그림책 표지 ---------- */ #cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; z-index: 20; perspective: 1600px; transition: opacity .2s .5s; } #cover .coverPaper { position: absolute; inset: 0; background: var(--paper) var(--noise, none); transition: opacity .25s ease-out; } #cover.opened .coverPaper { opacity: 0; } /* 바탕 종이는 바로 빠지고(안개처럼 뿌옇지 않게) 넘어가는 책만 남음 */ #cover.opened { opacity: 0; pointer-events: none; } #cover.opened .book { opacity: 0; transition: transform .8s cubic-bezier(.3, .05, .3, 1), opacity .14s .5s; transform: rotateY(-168deg) !important; } #cover.opened .inapp { opacity: 0; } #cover .book.bookPress { transform: scale(.97); transition: transform .06s ease-out; } #cover .book { position: relative; width: min(88vw, 410px); aspect-ratio: 3 / 4.15; border-radius: 8px 18px 18px 8px; background: #f6d488 var(--noise, none); border: 3px solid var(--wInk); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 9px #f6d488, inset 0 0 0 11.5px rgba(68, 31, 14, .55), 5px 4px 0 -1px #fbf1dc, 5px 4px 0 1px rgba(68, 31, 14, .42), 9px 8px 0 -1px #f1e2c2, 9px 8px 0 1px rgba(68, 31, 14, .34), 0 18px 0 -6px #d8b27a, 0 20px 30px rgba(68, 31, 14, .28); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.6, .04, .3, 1); cursor: pointer; touch-action: none; display: flex; flex-direction: column; align-items: center; padding: 7% 6% 5%; outline: none; color: var(--wInk); } /* 키보드 초점은 보이게(손가락 손님에게는 안 보임) */ #cover .book:focus-visible { box-shadow: 0 0 0 4px #e8913a, inset 0 0 0 9px #f6d488, inset 0 0 0 11.5px rgba(68, 31, 14, .55), 0 20px 30px rgba(68, 31, 14, .28); } #cover .book.enter { animation: bookIn .7s cubic-bezier(.3, 1.4, .5, 1) both; } @keyframes bookIn { from { transform: translateY(24px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } #cover .book.dragging { transition: none; } /* 안에서 앞발이 표지를 밀어 살짝 들림 — 틈으로 방 불빛이 샘 */ #cover .book.nudge { animation: coverNudge 1s cubic-bezier(.3, 1.4, .5, 1); } @keyframes coverNudge { 0%, 100% { transform: rotateY(0); } 30% { transform: rotateY(-9deg); } 55% { transform: rotateY(-2deg); } 70% { transform: rotateY(-5deg); } } #cover .leak { position: absolute; right: -14px; top: 6%; bottom: 6%; width: 22px; border-radius: 50%; background: radial-gradient(ellipse at 0% 50%, rgba(255, 213, 138, .95), rgba(255, 200, 110, 0) 70%); opacity: 0; filter: blur(2px); transform: translateZ(-2px); pointer-events: none; } #cover .book.nudge .leak { animation: leak 1s ease-out; } @keyframes leak { 0%, 100% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: .5; } } #cover .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 7%; border-right: 2.5px solid rgba(68, 31, 14, .5); background: linear-gradient(90deg, rgba(68, 31, 14, .16), rgba(68, 31, 14, 0)); border-radius: 6px 0 0 6px; } #cover .coverArt { width: 96%; overflow: visible; } #cover .skyRect { fill: url(#cvSky); } #cover .frame { fill: none; stroke: var(--wInk); stroke-width: 3.4; } #cover .sun { fill: #ffe3a3; opacity: .9; filter: drop-shadow(0 0 10px #ffd27a); } #cover .farClouds path { fill: #fff; opacity: .7; animation: drift 12s ease-in-out infinite alternate; } #cover .sparkles path { fill: #fff8de; stroke: #e7b65f; stroke-width: 1.2; animation: twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } #cover .sparkles path:nth-child(2) { animation-delay: .9s; } #cover .sparkles path:nth-child(3) { animation-delay: 1.7s; } #cover .cloudsFront path { fill: #fff; stroke: var(--wInk); stroke-width: 3.4; stroke-linejoin: round; animation: drift 7s ease-in-out infinite alternate-reverse; } @keyframes drift { from { transform: translateX(-6px); } to { transform: translateX(6px); } } #cover .facade { animation: bob 4.2s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } #cover .wallV { fill: #fbeedd; stroke: var(--wInk); stroke-width: 3.4; } #cover .tiles { fill: none; stroke: rgba(68, 31, 14, .25); stroke-width: 2; } #cover .plate { fill: #fff8ea; stroke: var(--wInk); stroke-width: 2.2; } #cover .plateTx { font: 700 11px "DC Gureum Sans", sans-serif; fill: var(--wInk); } #cover .inLamp { fill: #fff3cf; stroke: rgba(68, 31, 14, .45); stroke-width: 2; } #cover .inShelf { fill: rgba(176, 108, 62, .35); stroke: rgba(68, 31, 14, .45); stroke-width: 2; } #cover .winPet { animation: winPet 5s cubic-bezier(.3, 1.4, .5, 1) .6s infinite; } @keyframes winPet { 0%, 100% { transform: translateY(0); } 12% { transform: translateY(-9px); } 22% { transform: translateY(-6px); } 40% { transform: translateY(-7px) rotate(-3deg); } 60% { transform: translateY(0); } } #cover .curtainL, #cover .curtainR { fill: #f3a49a; stroke: var(--wInk); stroke-width: 2.4; stroke-linejoin: round; } #cover .winFrame { fill: none; stroke: var(--wInk); stroke-width: 4; } #cover .sill { fill: #e9cfae; stroke: var(--wInk); stroke-width: 3; } #cover .flowerBox { fill: #c98a5a; stroke: var(--wInk); stroke-width: 3; } #cover .flowers circle { fill: #f08a7e; stroke: var(--wInk); stroke-width: 2; } #cover .flowers circle:nth-child(2n) { fill: #ffd27a; } #cover .magpie { transform-box: fill-box; transform-origin: 50% 100%; animation: magpieHop 5.5s ease-in-out 2s infinite; } @keyframes magpieHop { 0%, 80%, 100% { transform: translateY(0); } 84% { transform: translateY(-6px) rotate(-6deg); } 88% { transform: translateY(0); } 92% { transform: translateY(-3px); } } #cover .mBody { fill: #2f2a33; stroke: var(--wInk); stroke-width: 1.6; stroke-linejoin: round; } #cover .mWing { fill: #f7f2ea; stroke: var(--wInk); stroke-width: 1.4; } #cover .mTail { fill: #3d4a70; stroke: var(--wInk); stroke-width: 1.4; stroke-linejoin: round; } #cover .mEye { fill: #fff; } #cover .title { margin: auto 0 0; font-size: clamp(42px, 13vw, 58px); line-height: 1; color: var(--wInk); letter-spacing: .02em; text-shadow: 0 3px 0 rgba(255, 250, 236, .8); } #cover .genre { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--ui); background: rgba(255, 250, 236, .7); border-radius: 999px; padding: 2px 12px; } #cover .hint { margin: 12px 0 0; font-size: 17px; font-weight: 700; color: var(--wInk); display: flex; align-items: center; gap: 8px; } #cover .tap { width: 22px; height: 26px; display: inline-block; animation: tapHand 1.1s ease-in-out infinite; transform-origin: 40% 90%; } #cover .tap svg { width: 100%; height: 100%; overflow: visible; } #cover .tap path { fill: #fff8ea; stroke: var(--wInk); stroke-width: 2.6; stroke-linejoin: round; } @keyframes tapHand { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(3px) scale(.9); } } #cover .mute { margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--wInk); opacity: .9; text-align: center; word-break: keep-all; } /* 큰 글씨에서 두 줄이 되면 가운데로(왼쪽에 붙어 책 등 쪽으로 쏠렸음) */ /* 앱 안 브라우저 안내 — 표지 아래 한 줄과 단추(그림 0장). ★ 굵기는 #world 의 700 을 그대로 — 400 으로 두면 카톡·인스타 손님(가장 많이 들어오는 길)만 표지 순간 보통 굵기 글꼴(72KB)을 받아 첫 화면이 약 340KB 였음 (6단계 손질 재검증 정책 1). 첫 줄(「카카오톡 안에서 열렸어요.」)은 굵기 대신 색으로 가름(#b5552d — 바탕 #fffaf0 과 약 4.7:1) */ #cover .inapp { position: relative; width: min(88vw, 410px); margin: 0; padding: 10px 12px; border: 2.5px solid var(--wInk); border-radius: 14px; background: #fffaf0; font-size: 15px; line-height: 1.5; word-break: keep-all; color: var(--wInk); text-align: center; transition: opacity .2s; } #cover .inapp b { color: #b5552d; } /* 앱 안 안내가 있을 때 — 위아래로 쌓고 넘치면 밀어 볼 수 있게(가운데 맞춤은 자동 여백이라 넘치면 위가 안 잘림). 작은 폰 카톡에서 「브라우저로 열기」가 화면 아래로, 책 위쪽이 화면 위로 잘렸음(화면글 1). 책은 touch-action:none 이라 안내 칸이나 빈 곳을 밀면 됨 */ #cover.withInapp { display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain; } #cover.withInapp > .book { flex: none; margin-top: auto; } #cover.withInapp > .inapp { flex: none; margin-bottom: auto; z-index: 1; } /* 앞으로 올려도(order) 바탕 종이(.coverPaper) 위에 그려지게 */ /* 낮은 화면(카톡 위아래 띠가 있는 작은 폰) — 안내를 책 위로 올려 단추가 늘 먼저 보이게, 소리 단추 밑에서 시작. ★ 720 까지 — 높이 621~700(카톡 360×640·414×630·390×650, 밴드·스레드·라인 390×700)에서는 책이 위에 붙어(16~45px) 오른쪽 위 소리 단추(10~54px)가 책 귀퉁이를 덮었음(6단계 손질 재검증 화면글 1) */ @media (max-height: 720px) { #cover.withInapp { padding-top: max(62px, calc(env(safe-area-inset-top) + 56px)); } #cover.withInapp > .inapp { order: -1; margin: auto 0 0; } #cover.withInapp > .book { margin: 0 0 auto; } /* 책은 남은 높이에 맞춤 — 안내를 책 위로 올리니 414×630·390×650·360×680(글씨 130%)에서 책 아래 「눌러서 책을 펴 보세요」·무음 안내가 화면 밖이었음(6단계 2차 손질 재검증 nice — 앱 안에서는 9초 저절로 넘김이 꺼져 누르라는 안내가 더 중요). 안내 칸도 조금 줄임. 남은 높이 = 화면 − (위 여백 62 · 틈 14 · 아래 여백 16 · 책 그림자 12 = 104px) − 안내 칸(약 9em — 글씨를 키우면 같이 커짐), 책 폭 = 남은 높이 × 3/4.15. 260px 밑으로는 안 줄임(그보다 낮은 폰은 전처럼 밀어서 봄). 100svh 를 모르는 옛 웹뷰는 100vh */ #cover.withInapp > .inapp { padding: 8px 10px; font-size: 14px; line-height: 1.4; } #cover.withInapp .inapp button { min-height: 40px; margin-top: 6px; font-size: 15px; } #cover.withInapp > .book { width: max(min(88vw, 260px), min(88vw, 410px, (100vh - 104px - 9em) * .723)); } @supports (height: 100svh) { #cover.withInapp > .book { width: max(min(88vw, 260px), min(88vw, 410px, (100svh - 104px - 9em) * .723)); } } } #cover .inapp button { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 2.5px solid var(--wInk); border-radius: 999px; background: #f6d488; font-weight: 700; font-size: 16px; color: var(--wInk); } /* ---------- 첫 만남 동안의 소리 끄기(작은 단추) ---------- */ #bookSound { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); z-index: 22; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 2px solid var(--wInk); border-radius: 50%; background: rgba(255, 250, 240, .9); box-shadow: 0 3px 0 rgba(68, 31, 14, .25); } #bookSound svg { width: 24px; height: 24px; display: block; } #bookSound .bsOff { display: none; } #bookSound.bsMuted .bsOn { display: none; } #bookSound.bsMuted .bsOff { display: block; } /* 밤·저녁 — 종이·단추도 방 빛에 맞춰 조금 어둡게(혼자 밝으면 오려 붙인 듯 보였음 — 17차) */ #world[data-light="night"] .sheetPaper { filter: brightness(.74) saturate(.78); } #world[data-light="night"] #endNote { filter: brightness(.86) saturate(.85); } #world[data-light="night"] #dock, #world[data-light="night"] #petHint .label, #world[data-light="night"] #bagSay { filter: brightness(.74) saturate(.8); } #world[data-light="night"] #petHint .hand { filter: brightness(.72) saturate(.8); } #world[data-light="night"] #stickers .sticker img { filter: url(#petInk) brightness(.84) saturate(.8) drop-shadow(0 3px 2px rgba(68, 31, 14, .28)); } #world[data-light="sunset"] .sheetPaper, #world[data-light="sunset"] #endNote { filter: sepia(.12) brightness(.97); } /* ---------- 폰을 눕혔을 때 — 2.0 첫 만남(표지 ~ 끝 쪽지) 위에만(app.js 가 wOn 을 붙임 · 집 화면은 1.0 처럼 그대로) ---------- */ #rotate { position: fixed; inset: 0; z-index: 8; display: none; place-items: center; padding: 16px; background: #f3e7d3; text-align: center; font-weight: 700; font-size: 20px; color: #441f0e; } #rotate i { display: block; width: 46px; height: 76px; margin: 0 auto 14px; border: 4px solid #441f0e; border-radius: 10px; animation: rot 1.8s ease-in-out infinite; } @keyframes rot { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } } @media (orientation: landscape) and (max-height: 500px) { #rotate.wOn { display: grid; } } /* ---------- 옛 손님 「새 단장」 카드(1.0 아래 창 모양 그대로, 안의 그림판만) ---------- */ #renew .renewCard h2 { margin: 2px 0 10px; font-size: 20px; } #renew .renewFrame { position: relative; width: min(100%, 360px, max(150px, calc((100vh - 250px) * 4 / 3))); aspect-ratio: 4 / 3; margin: 0 auto; border: 3px solid #441f0e; border-radius: 18px; overflow: hidden; background: #f3e7d3; } #renew .renewOld, #renew .renewNew { position: absolute; inset: 0; background-repeat: no-repeat; } #renew .renewOld { background-size: cover; background-position: 38% 100%; } #renew .renewNew { background-size: 100% auto; background-position: 50% 74%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } #renew .renewOld i, #renew .renewNew i { position: absolute; left: 50%; bottom: 4%; width: 52%; aspect-ratio: 1; transform: translateX(-50%); background: center / contain no-repeat; } #renew .renewOld i { filter: drop-shadow(0 6px 8px rgba(90, 62, 43, .18)); } #renew .renewBrush { position: absolute; top: 18%; left: -6%; width: 15%; aspect-ratio: 2 / 3; transform: translateX(-50%) rotate(18deg); pointer-events: none; filter: drop-shadow(0 4px 3px rgba(68, 31, 14, .3)); } #renew .renewBrush svg { width: 100%; height: 100%; display: block; } #renew #renewText { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; word-break: keep-all; } #renew .renewHint { margin: 4px 0 0; font-size: 13.5px; opacity: .75; } /* ---------- 이름표 카드 — 끝 쪽지를 닫기 전에 나간 손님에게 한 번(1.0 아래 창 모양 그대로, 6단계 검토 저장안전 S2) ---------- */ #nameCard h2 { margin: 2px 0 6px; font-size: 20px; } #nameCardIn { width: 100%; font: inherit; font-size: 20px; font-weight: 700; text-align: center; padding: 12px; border-radius: 16px; border: 2px solid #e6d3bd; background: #fff; color: #5a3e2b; } #nameCardIn:focus { outline: 3px solid #e8913a; outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { #cover .farClouds path, #cover .cloudsFront path, #cover .facade, #cover .winPet, #cover .magpie, #stickers .corner, #world .say { animation: none; } } /* ====================================================================== * 목욕·빗질 손짓(ui/care.js — 2026-10-25 2.0 첫 판 10단계) * 욕실 그림 한 장(bath_room)을 두 겹으로: 뒤 겹(#bath, 펫 뒤 z 2)과 앞 겹(#bathFront, 펫 앞 z 4 — 욕조 앞턱~나무 앞판만 오려 머리·귀만 보임). * 그림 자리(폭·위·왼쪽)는 care.js 가 펫 턱에 욕조 앞턱이 오게 잽니다. 그림 위로 남는 칸은 타일 벽 색. * 책장 넘김 0.4초(pageIn·pageOut) — 왼쪽 가장자리를 축으로. 펫은 넘기는 동안 숨었다(wAway) 욕실·방에 「뿅」. * ====================================================================== */ #bath, #bathFront { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform-origin: 0 50%; } #bath { z-index: 2; background: #f1dca2; } #bathFront { z-index: 4; } #bath .bImg, #bathFront .bImg { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; display: block; } #bathFront .bImg { -webkit-clip-path: polygon(0 49.7%, 100% 49.7%, 100% 72.6%, 0 72.6%); clip-path: polygon(0 49.7%, 100% 49.7%, 100% 72.6%, 0 72.6%); } #world:not([data-light="day"]) #bath, #world:not([data-light="day"]) #bathFront .bImg { filter: url(#petLight); } #bath.pageIn, #bathFront.pageIn { animation: pageIn .4s cubic-bezier(.25, .7, .35, 1) both; } #bath.pageOut, #bathFront.pageOut { animation: pageOut .4s cubic-bezier(.6, 0, .75, .3) both; } /* 넘김에 filter 를 쓰지 않음 — 밤 빛(url(#petLight))을 0.4초 동안 덮어 밤에 욕실이 번쩍 밝았음(0.3초 판) */ @keyframes pageIn { 0% { transform: perspective(1400px) rotateY(-86deg); opacity: .7; } 100% { transform: none; opacity: 1; } } @keyframes pageOut { 0% { transform: none; } 100% { transform: perspective(1400px) rotateY(-86deg); opacity: .6; } } /* 욕실이 방을 덮는 동안 방 빛 겹(창 빛·빛줄기·별·달빛·먼지)은 끔(world.js 욕실) */ #room.wBath .light, #room.wBath .shaft, #room.wBath .beam, #room.wBath .motes, #room.wBath .winGlow, #room.wBath .sky, #room.wBath .lamp, #room.wBath .layer { visibility: hidden; } /* 책장 되넘김(욕실 → 방, world.js 욕실(true, 나감)) — 방 그림 겹은 먼저 켜 넘어가는 욕실 뒤에 방이 비치게(넘김 뒤에 켜서 0.4초 빈 종이였음 — 10단계 검토 F1). * 욕실(z 2)보다 위에 그려지는 밤하늘·등불(.sky·.lamp z 6)만 넘김이 끝날 때까지 숨김 */ #room.wBath.wOut .light, #room.wBath.wOut .shaft, #room.wBath.wOut .beam, #room.wBath.wOut .motes, #room.wBath.wOut .winGlow, #room.wBath.wOut .layer { visibility: visible; } /* 밤 욕실 — 밤 욕실 그림이 생기기 전까지(크레딧 0 길, 10단계 검토 N10): 욕실을 조금 더 어둡게, 창유리 다각형만 밤하늘(달빛 한 점). * .bSky 자리·크기는 care.js 욕실자리가 그림과 같게 잼. 다각형 = bath_room.webp 창유리(x 594~768 · y 51~303 px / 768×1358) */ #bath .bSky { position: absolute; left: 0; top: 0; display: none; pointer-events: none; -webkit-clip-path: polygon(77.3% 3.75%, 100% 3.75%, 100% 22.3%, 77.3% 22.3%); clip-path: polygon(77.3% 3.75%, 100% 3.75%, 100% 22.3%, 77.3% 22.3%); background: radial-gradient(ellipse 5% 2.6% at 90% 9.5%, rgba(255, 246, 214, .95), rgba(255, 246, 214, .35) 55%, rgba(255, 246, 214, 0)), linear-gradient(#22305a, #3a4a7c 22%, #3a4a7c); } #world[data-light="night"] #bath .bSky { display: block; } #world[data-light="night"] #bath, #world[data-light="night"] #bathFront .bImg { filter: url(#petLight) brightness(.74) saturate(.85); } #pet.wAway { opacity: 0 !important; transition: opacity .12s ease, transform .42s cubic-bezier(.45, 0, .3, 1); } /* 털 털기 0.8초 — 머리 → 몸 → 꼬리 차례로(물방울은 care.js 가 그 차례에 맞춰 뿌림) */ #pet.wShake .headAct { animation: shakeHead .36s ease-in-out; } #pet.wShake .tiltAct { animation: shakeOff .44s ease-in-out .2s; transform-origin: 50% 70%; } #pet.wShake .tail { animation: wagFast .1s ease-in-out .5s 3 !important; } #pet[data-kind="cat"].wShake .tail { animation: catFlick .3s ease-in-out .5s 1 !important; } #pet[data-kind="cat"].wShake .tailTip { animation: catFlickT .3s ease-in-out .5s 1 !important; } /* 고양이 — 젖으면 가로 0.9 로 홀쭉, 털고 나면 1.1 로 부풀었다 제자리 */ #pet .flight { transition: transform .5s cubic-bezier(.45, 0, .3, 1); transform-origin: 50% 97%; } #pet.wThin .flight { transform: scaleX(.9); transition: transform .35s ease; } #pet.wFluff .flight { transform: scale(1.1, 1.05); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1); } /* 거품 — 문지른 자리에만(최대 40, 펫 상자 % 자리라 펫과 같이 움직임) · 엉킨 곳 셋 */ #petCare { position: absolute; inset: 0; pointer-events: none; z-index: 2; } #petCare .wSud { position: absolute; width: var(--z, 22px); height: var(--z, 22px); margin: calc(var(--z, 22px) / -2) 0 0 calc(var(--z, 22px) / -2); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 13%, rgba(255, 255, 255, .8) 24%, rgba(240, 247, 253, .6) 58%, rgba(206, 226, 242, .82) 100%); box-shadow: inset 0 0 0 1.4px rgba(120, 160, 198, .5), 0 1px 0 rgba(68, 31, 14, .1); animation: sudIn .26s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes sudIn { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } #petCare .wSud.cWash { animation: sudWash .4s ease-in forwards; } @keyframes sudWash { 0% { transform: scale(1); opacity: 1; } 100% { transform: translateY(70%) scale(.5); opacity: 0; } } #world[data-light="night"] #petCare .wSud { filter: brightness(.8) saturate(.85); } #petCare .wKnot { position: absolute; width: var(--z, 34px); height: var(--z, 34px); margin: calc(var(--z, 34px) / -2) 0 0 calc(var(--z, 34px) / -2); animation: knotIn .3s cubic-bezier(.3, 1.6, .5, 1) both; } #petCare .wKnot svg { width: 100%; height: 100%; overflow: visible; } #petCare .wKnot path { fill: none; stroke: rgba(122, 78, 44, .78); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } #pet[data-kind="cat"] #petCare .wKnot path { stroke: rgba(92, 88, 86, .8); } #petCare .wKnot::after { content: ""; position: absolute; right: -18%; top: -22%; width: 46%; height: 46%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 L14.6 9.4 L22.5 12 L14.6 14.6 L12 22.5 L9.4 14.6 L1.5 12 L9.4 9.4 Z' fill='%23fff0c0' stroke='%23c58b3e' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: knotTwinkle 1.1s ease-in-out infinite; } @keyframes knotIn { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes knotTwinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .55; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } } #petCare .wKnot.cUntie { animation: knotUntie .36s ease-out forwards; } /* 엉킴이 풀린 반짝(care.js 반짝점) — 미스트 병이 뜨기 전에 걷는 것을 보송 반짝이와 가르는 이름(10단계 검토 감마Q F1) */ #world .wSpark.wKs { z-index: 9; } @keyframes knotUntie { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.25) rotate(18deg); opacity: .9; } 100% { transform: scale(.2) rotate(60deg); opacity: 0; } } /* 손짓 소품 — 선반의 병·샤워기·빗·수건(방 그림 칸 px 자리, care.js 가 놓음). 방 빛에 같이 물듦 */ #room .careProp { position: absolute; z-index: 7; pointer-events: none; max-width: none; filter: drop-shadow(0 4px 3px rgba(68, 31, 14, .22)); } #world:not([data-light="day"]) #room .careProp { filter: url(#petLight) drop-shadow(0 4px 3px rgba(68, 31, 14, .22)); } #room .careProp.cIn { animation: propIn .3s cubic-bezier(.3, 1.5, .5, 1) both; } @keyframes propIn { 0% { opacity: 0; translate: 0 -14px; } 100% { opacity: 1; translate: 0 0; } } /* 키도 같이 옮겨 감 — 선반 병(칸 키)과 붓는 병(펫 상자 ÷ 3)의 키가 다른 화면이 있음(10/26, care.js 선반놓기·붓는자리) */ #room .careProp.cTravel { transition: left .32s cubic-bezier(.45, 0, .3, 1), top .32s cubic-bezier(.45, 0, .3, 1), width .32s cubic-bezier(.45, 0, .3, 1), height .32s cubic-bezier(.45, 0, .3, 1), transform .3s cubic-bezier(.3, 1.3, .5, 1); } #room .careProp.cWiggle { animation: propWiggle 1.3s ease-in-out infinite; } @keyframes propWiggle { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -7deg; } 86% { rotate: 6deg; } 93% { rotate: -3deg; } } #room .careProp.cGo { transition: opacity .25s ease, translate .25s ease; opacity: 0; translate: 20px -10px; } /* 샴푸 한 방울 · 샤워 물줄기 · 미스트(빛줄기 다각형으로 오린 겹 안에서만) */ #world .wDrop { position: absolute; z-index: 8; width: 12px; height: 15px; margin: -7px 0 0 -6px; pointer-events: none; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 36% 60%, #fff 0 16%, #dfeaf7 40%, #b7cbe6 100%); box-shadow: inset 0 0 0 1.5px rgba(80, 110, 160, .7); } #world .wJet { position: absolute; z-index: 8; width: 5px; height: 12px; margin: -6px 0 0 -2.5px; pointer-events: none; border-radius: 50%; background: linear-gradient(rgba(214, 236, 252, .2), rgba(150, 196, 236, .95)); animation: jet var(--t, .3s) linear forwards; } @keyframes jet { 0% { transform: translate(0, 0); opacity: .9; } 100% { transform: translate(var(--dx, 0px), var(--dy, 40px)); opacity: .2; } } #careMist { position: absolute; inset: 0; z-index: 5; pointer-events: none; } #careMist .wMist { position: absolute; width: var(--z, 60px); height: var(--z, 60px); margin: calc(var(--z, 60px) / -2) 0 0 calc(var(--z, 60px) / -2); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(240, 250, 255, .55) 45%, rgba(240, 250, 255, 0)); mix-blend-mode: screen; animation: mistPuff 1s ease-out forwards; } #careMist .wMist.wGlint { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fffbe8; box-shadow: 0 0 6px #fff3c4; animation: mistGlint .9s ease-out forwards; } @keyframes mistPuff { 0% { transform: translate(0, 0) scale(.25); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx, -18px), var(--dy, 10px)) scale(1.35); opacity: 0; } } @keyframes mistGlint { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(var(--dx, -10px), var(--dy, 18px)) scale(1); opacity: 0; } } /* 손가락을 받는 칸(아래 단추·윗 카드는 #world 밖이라 그대로 눌림) · 안내 알약 · 병 쪽지 */ #careTouch { position: absolute; inset: 0; z-index: 9; touch-action: none; cursor: grab; } #careSay { z-index: 10; } #careNote { position: absolute; z-index: 13; margin: 0; max-width: min(78vw, 260px); padding: 8px 12px; font-size: 14px; line-height: 1.45; color: var(--wInk); background: #fffaf0 var(--noise, none); border: 2.5px solid var(--wInk); border-radius: 12px; box-shadow: 0 6px 0 -2px #e3cfae, 0 10px 22px rgba(68, 31, 14, .25); word-break: keep-all; pointer-events: auto; animation: careNoteIn .3s cubic-bezier(.3, 1.5, .5, 1) both; } @keyframes careNoteIn { 0% { transform: translateY(8px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } } #world[data-light="night"] #careSay, #world[data-light="night"] #careNote { filter: brightness(.8) saturate(.85); } @media (prefers-reduced-motion: reduce) { #bath.pageIn, #bathFront.pageIn, #bath.pageOut, #bathFront.pageOut, #room .careProp.cWiggle, #petCare .wKnot::after { animation: none; } }