/* 플랜 추천 "하루 체험 무대" — fitrus-plan-stage.js 와 함께 쓴다. 무대 밖 페이지 스타일은 fitrus-plan-finder.css 에 둔다. */
.ps-stage{position:relative;height:min(760px,calc(100dvh - 40px));min-height:600px;border-radius:36px;overflow:hidden;isolation:isolate;color:#101727;background:#eaf0f3;text-align:left;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
.ps-stage button{font:inherit;cursor:pointer}

/* 배경: 테마 색 + 실사 사진(테마 막을 덮음) */
.ps-bg{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;z-index:-2;background-size:cover;background-position:center}
.ps-bg.is-on{opacity:1}
.ps-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;z-index:-1;transition:background 1s,opacity .6s;animation:ps-drift 14s ease-in-out infinite alternate}
.ps-blob-1{width:46%;aspect-ratio:1;left:-8%;top:-10%;background:var(--blob1,#d9efe8)}
.ps-blob-2{width:40%;aspect-ratio:1;right:-6%;bottom:6%;background:var(--blob2,#e8e3ff);animation-delay:-6s}
.has-photo .ps-blob{opacity:.1}
.ps-theme-neutral{background-image:radial-gradient(120% 90% at 30% 20%,#ffffff,#eef3f6 55%,#e4ebef)}
.ps-theme-night{background-image:radial-gradient(110% 90% at 70% 10%,#4b4cb0,#232a5c 45%,#141a3a);--tint:linear-gradient(180deg,rgba(18,22,52,.62) 0%,rgba(24,28,66,.28) 30%,rgba(24,28,66,.16) 62%,rgba(14,18,44,.58) 100%)}
.ps-theme-mint{background-image:radial-gradient(110% 90% at 30% 15%,#ffffff,#dcf4ec 50%,#bfe9dc);--tint:linear-gradient(180deg,rgba(240,252,247,.72) 0%,rgba(225,246,238,.28) 30%,rgba(225,246,238,.12) 62%,rgba(236,250,245,.66) 100%)}
.ps-theme-sunset{background-image:radial-gradient(110% 90% at 75% 10%,#ffd9a8,#ff9e6b 45%,#e3664f);--tint:linear-gradient(180deg,rgba(70,28,12,.5) 0%,rgba(90,40,18,.18) 30%,rgba(90,40,18,.08) 62%,rgba(60,24,10,.5) 100%)}
.ps-theme-forest{background-image:radial-gradient(110% 90% at 25% 15%,#f4fbef,#cfe9c7 50%,#8fc39a);--tint:linear-gradient(180deg,rgba(244,251,240,.74) 0%,rgba(230,244,224,.26) 30%,rgba(230,244,224,.1) 62%,rgba(240,249,236,.64) 100%)}
.ps-theme-sky{background-image:radial-gradient(110% 90% at 70% 15%,#ffffff,#d7e9ff 50%,#9fc5f2);--tint:linear-gradient(180deg,rgba(244,249,255,.66) 0%,rgba(228,240,255,.2) 30%,rgba(228,240,255,.08) 62%,rgba(240,246,255,.66) 100%)}
.ps-theme-paper{background-image:radial-gradient(110% 90% at 30% 15%,#fffdf8,#f3eee2 55%,#e4dccb);--tint:linear-gradient(180deg,rgba(255,252,245,.74) 0%,rgba(248,242,230,.26) 30%,rgba(248,242,230,.1) 62%,rgba(252,248,240,.66) 100%)}
.ps-theme-blossom{background-image:radial-gradient(110% 90% at 70% 15%,#fff6f8,#ffd9e2 50%,#f3a9bd);--tint:linear-gradient(180deg,rgba(255,246,248,.72) 0%,rgba(255,232,238,.26) 30%,rgba(255,232,238,.1) 62%,rgba(255,244,247,.64) 100%)}
.ps-stage[data-theme=night]{--blob1:#6b5bd6;--blob2:#f5c26b;color:#fff}
.ps-stage[data-theme=sunset]{--blob1:#ffd36e;--blob2:#ff7a59;color:#fff}
.ps-stage[data-theme=mint]{--blob1:#9be3cf;--blob2:#ffffff}
.ps-stage[data-theme=forest]{--blob1:#b8e0a6;--blob2:#f2f7d8}
.ps-stage[data-theme=sky]{--blob1:#bcd9ff;--blob2:#ffffff}
.ps-stage[data-theme=paper]{--blob1:#fff1c9;--blob2:#e7ddff}
.ps-stage[data-theme=blossom]{--blob1:#ffc0d1;--blob2:#fff0c9}

/* 장면 라벨 · 기기 배지 */
.ps-scene{position:absolute;left:28px;top:26px;opacity:0;transform:translateY(-6px);text-shadow:0 1px 12px rgba(0,0,0,.08)}
.ps-scene b{display:block;font-size:30px;letter-spacing:-.04em;font-weight:800}
.ps-scene span{font-size:14px;font-weight:600;opacity:.8}
.ps-scene.is-in{animation:ps-rise .6s cubic-bezier(.2,.8,.2,1) forwards}
.ps-device-badge{position:absolute;right:26px;top:30px;max-width:44%;padding:8px 14px;border-radius:99px;background:#ffffffe6;color:#0b6f5f;font-size:12px;font-weight:700;box-shadow:0 6px 18px #0b2a2420;opacity:0;transform:translateY(-6px);transition:.4s}
.ps-device-badge.is-on{opacity:1;transform:none}

/* 폰: 평면 PNG 프레임(화면 투명) 뒤에 실제 앱 화면, CSS 3D로 기울임 */
.ps-phone-wrap{position:absolute;left:50%;top:50%;height:74%;aspect-ratio:533/1100;transform:translate(-50%,-52%);perspective:1600px;transition:left .6s cubic-bezier(.2,.8,.2,1)}
.has-more .ps-phone-wrap{left:40%}
.ps-phone{position:relative;width:100%;height:100%;transform:rotateY(-12deg) rotateX(5deg) rotateZ(1deg);transform-style:preserve-3d;animation:ps-float 6s ease-in-out infinite;filter:drop-shadow(0 40px 40px #0b1d2a40)}
.ps-phone.is-swing{animation:ps-swing .9s cubic-bezier(.2,.8,.2,1),ps-float 6s ease-in-out .9s infinite}
.ps-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ps-screen{position:absolute;left:4.015%;top:1.527%;width:91.73%;height:96.85%;border-radius:13.1%/6%;overflow:hidden;background:#f4f6fa;z-index:1}
.ps-shot{position:absolute;inset:0;background:#f3f4f8;overflow:hidden}
.ps-shot img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.ps-shot.no-status img{top:5.8%}
.ps-status{position:absolute;left:0;right:0;top:0;height:5.8%;display:flex;align-items:center;justify-content:space-between;padding:0 11% 0 12%;font-size:11px;color:#101727}
.ps-status b{font-weight:700}.ps-status span{font-size:8px;letter-spacing:1px}
.ps-shot.is-next{transform:translateX(calc(var(--dir,1) * 100%))}
.ps-shot.is-current{transform:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ps-shot.is-leaving{transform:translateX(calc(var(--dir,1) * -30%)) scale(.94);opacity:.4;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.ps-finger{position:absolute;z-index:4;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#ffffffaa;border:2px solid #0fa58c;opacity:0;pointer-events:none}
.ps-finger.is-tap{animation:ps-tap .55s ease-out}

/* AI 코칭 말풍선 (비용 답에 따라 켜짐 · 잠김) */
.ps-ai{position:absolute;z-index:3;left:-18%;bottom:22%;width:76%;padding:12px 14px;border-radius:18px 18px 18px 6px;background:#fff;color:#101727;box-shadow:0 18px 36px -14px #0b2a2455;opacity:0;transform:translateY(14px) scale(.92);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.3);pointer-events:none}
.ps-ai.is-on,.ps-ai.is-free{opacity:1;transform:none}
.ps-ai small{display:block;font-size:11px;font-weight:700;color:#079579}
.ps-ai p{margin:5px 0 0;font-size:12px;line-height:1.55;color:#33433e}
.ps-ai.is-free{background:#f2f4f6}.ps-ai.is-free small{color:#6b7782}

/* 이것도 있어요 */
.ps-more{position:absolute;right:22px;top:50%;width:min(240px,34%);padding:16px;border-radius:20px;background:#ffffffee;color:#101727;box-shadow:0 18px 40px -16px #0b2a2455;transform:translateY(-10%)}
.ps-more.is-in{animation:ps-pop .55s cubic-bezier(.2,.9,.3,1.3)}
.ps-more small{display:block;font-size:11px;font-weight:700;color:#0b8f7a;margin-bottom:6px}
.ps-more b{display:block;font-size:15px;line-height:1.4;letter-spacing:-.02em}
.ps-more p{font-size:12px;line-height:1.6;color:#4f5d68;margin:6px 0 0}
.ps-more button{margin-top:12px;min-height:38px;padding:0 14px;border:0;border-radius:99px;background:#0fa58c;color:#fff;font-size:13px;font-weight:700}
.ps-more::before{content:'';position:absolute;left:-28px;top:34px;width:28px;border-top:2px dashed #0fa58c88}

.ps-intro{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);text-align:center;padding:12px 20px;border-radius:18px;background:#ffffffd9;transition:opacity .4s;white-space:nowrap}
.ps-intro b{display:block;font-size:14px}
.ps-intro span{font-size:12px;color:#637084}
.is-started .ps-intro{opacity:0;pointer-events:none}

/* 나의 하루 */
.ps-timeline{position:absolute;left:18px;right:18px;bottom:18px;margin:0;padding:0;list-style:none;display:flex;gap:6px}
.ps-slot{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px;border:1px solid #ffffff80;border-radius:16px;background:#ffffff70;color:#101727;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s}
.ps-slot.is-filled{background:#ffffffe8;box-shadow:0 8px 20px -12px #0b2a2455}
.ps-slot[data-slot=any]{flex:0 0 auto}
.ps-slot small{font-size:11px;font-weight:700;color:#5f6d7a;white-space:nowrap}
.ps-slot:not(.is-filled) small{opacity:.75}
/* 한 칸에 여러 개면 줄바꿈 대신 살짝 겹쳐 한 줄로 — 칸 높이가 늘지 않게 */
.ps-slot div{display:flex;min-height:32px;min-width:0;overflow:hidden;margin:-3px;padding:3px} /* 칸보다 넓으면 칸 안에서 잘린다 (padding은 선택 테두리 여유) */
.ps-slot button+button{margin-left:-6px}
.ps-slot button{position:relative;flex:none;width:32px;height:32px;padding:0;display:grid;place-items:center;border:1.5px solid #e3e9ee;border-radius:10px;background:#fff;font-size:17px;line-height:1;transition:border-color .2s}
.ps-slot button:hover{border-color:#0fa58c88}
.ps-slot button:hover,.ps-slot button[aria-pressed=true]{z-index:1}
.ps-slot button[aria-pressed=true]{border-color:#0fa58c;box-shadow:0 0 0 2px #0fa58c33}
.ps-slot.is-new{animation:ps-slot-flash .9s ease-out}
.ps-slot button.is-new{animation:ps-pop .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ps-slot-flash{0%{box-shadow:0 0 0 0 #0fa58c99}100%{box-shadow:0 0 0 12px #0fa58c00}}
.ps-timeline{transition:opacity .4s,visibility .4s}
.hide-day .ps-timeline{opacity:0;visibility:hidden;pointer-events:none}
.ps-stage button:focus-visible{outline:3px solid #24c7a2;outline-offset:3px}

/* 질문 ③ 기기 목업: 폰·장면을 숨기고 Watch·PRO 3D를 나란히. 선택지에 올리면 해당 기기만 켜진다. */
.ps-phone-wrap,.ps-scene,.ps-device-badge,.ps-more,.ps-intro{transition:opacity .4s,visibility .4s,left .6s cubic-bezier(.2,.8,.2,1)}
.is-plain .ps-scene,.is-plain .ps-device-badge,.is-plain .ps-more,.is-devices .ps-phone-wrap,.is-devices .ps-scene,.is-devices .ps-device-badge,.is-devices .ps-more,.is-devices .ps-intro{opacity:0!important;visibility:hidden;pointer-events:none}
.ps-devices{position:absolute;inset:100px 24px 92px;display:grid;grid-template-rows:1fr 1fr;gap:10px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.is-devices .ps-devices{opacity:1;visibility:visible}
.ps-dev-title{position:absolute;left:4px;right:4px;top:-52px;margin:0}
.ps-dev-title span{display:inline-block;font-size:13px;font-weight:600;color:#5f6d7a;transition:opacity .4s}
.ps-devices.is-touched .ps-dev-title span{opacity:0}
.ps-dev{position:relative;margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s,filter .4s}
.is-devices .ps-dev{animation:ps-dev-float 6s ease-in-out infinite}
.ps-dev[data-dev=pro]{animation-delay:-3s!important}
.ps-dev-visual{position:relative;flex:1;width:100%;min-height:0;cursor:grab;touch-action:none}
.ps-dev-visual:active{cursor:grabbing}
.ps-dev-visual iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s;touch-action:none}
.ps-dev-visual.is-live iframe{opacity:1}
.ps-dev-visual>img{position:absolute;inset:0;margin:auto;max-width:75%;max-height:70%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 18px 18px #0e2a2230);transition:opacity .5s}
.ps-dev-visual.is-live>img{opacity:0;visibility:hidden}
.ps-dev figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 16px;border:2px solid transparent;border-radius:16px;background:#ffffffe6;box-shadow:0 8px 20px -12px #0b2a2455;text-align:center;transition:border-color .3s,background .3s}
.ps-dev figcaption b{font-size:14px;letter-spacing:-.02em}
.ps-dev figcaption span{font-size:12px;font-weight:600;color:#5f6d7a}
/* 켜짐 · 꺼짐 */
.ps-devices[data-pick=watch] [data-dev=watch],.ps-devices[data-pick=pro] [data-dev=pro],.ps-devices[data-pick=both] .ps-dev,.ps-devices[data-hover=watch] [data-dev=watch],.ps-devices[data-hover=pro] [data-dev=pro]{transform:scale(1.06)}
.ps-devices[data-pick=watch] [data-dev=watch] figcaption,.ps-devices[data-pick=pro] [data-dev=pro] figcaption,.ps-devices[data-pick=both] figcaption{border-color:#0fa58c;background:#fff}
.ps-devices[data-pick=watch] [data-dev=pro],.ps-devices[data-pick=pro] [data-dev=watch],.ps-devices[data-pick=none] .ps-dev{opacity:.3;filter:grayscale(1);transform:scale(.9)}
.ps-dev-none{position:absolute;left:50%;top:44%;margin:0;padding:12px 18px;border-radius:16px;background:#fffdf8;border:2px solid #0fa58c;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 18px 36px -14px #0b2a2455;opacity:0;transform:translate(-50%,8px) scale(.94);transition:opacity .35s,transform .4s cubic-bezier(.2,.9,.3,1.3);pointer-events:none}
.ps-devices[data-pick=none] .ps-dev-none{opacity:1;transform:translate(-50%,0)}
@keyframes ps-dev-float{50%{translate:0 -8px}}

@keyframes ps-float{50%{transform:rotateY(-8deg) rotateX(3deg) rotateZ(0deg) translateY(-10px)}}
@keyframes ps-swing{0%{transform:rotateY(-12deg) rotateX(5deg)}35%{transform:rotateY(10deg) rotateX(2deg) scale(.97)}100%{transform:rotateY(-12deg) rotateX(5deg) rotateZ(1deg)}}
@keyframes ps-tap{0%{opacity:0;transform:scale(1.6)}35%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.9)}}
@keyframes ps-pop{0%{opacity:0;transform:translateY(12px) scale(.9)}100%{opacity:1}}
@keyframes ps-rise{to{opacity:1;transform:none}}
@keyframes ps-drift{100%{transform:translate(8%,10%) scale(1.1)}}

@media(max-width:959px){
 .ps-stage{height:min(50dvh,440px);min-height:360px;border-radius:28px}
 .ps-scene{left:18px;top:16px}.ps-scene b{font-size:20px}.ps-scene span{font-size:12px}
 .ps-device-badge{right:14px;top:18px;font-size:11px;padding:6px 11px}
 .ps-phone-wrap{height:66%}
 .has-more .ps-phone-wrap{left:30%}
 .ps-more{right:12px;width:46%;padding:12px;top:46%}
 .ps-more b{font-size:13px}.ps-more p{display:none}.ps-more::before{display:none}
 .ps-ai{left:-30%;width:90%;padding:9px 11px}.ps-ai p{font-size:11px}
 .ps-timeline{left:12px;right:12px;bottom:12px;gap:4px}
 .ps-slot{padding:6px 7px 7px;border-radius:12px;gap:4px}.ps-slot small{font-size:10px}
 .ps-slot div{min-height:26px}.ps-slot button+button{margin-left:-10px}.ps-slot button{width:26px;height:26px;border-radius:8px;font-size:14px}
 .ps-devices{inset:64px 10px 64px;gap:4px;grid-template-rows:none;grid-template-columns:1fr 1fr}
 .ps-dev-title{top:-40px}.ps-dev-title span{font-size:11px}
 .ps-dev figcaption{padding:6px 10px;border-radius:12px}.ps-dev figcaption b{font-size:12px}.ps-dev figcaption span{font-size:10.5px}
 .ps-dev-none{font-size:12px;padding:9px 12px;white-space:normal;width:78%;text-align:center}
}
@media(max-width:400px){
 .ps-slot button+button{margin-left:-14px}
}
@media(prefers-reduced-motion:reduce){
 .ps-stage *,.ps-stage{animation:none!important;transition:none!important}
 .ps-scene{opacity:1;transform:none}
}