:root{font-family:'Pretendard Variable',Pretendard,sans-serif;color:#312642;background:#17141e;font-synthesis:none}*{box-sizing:border-box}body{margin:0;padding:12px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #523292;outline-offset:5px}.world{min-height:740px;height:calc(100svh - 24px);position:relative;overflow:hidden;isolation:isolate;border-radius:30px;background:#d5c6e7}.scenery{position:absolute;inset:0;z-index:-2;overflow:hidden}.sky{position:absolute;inset:0;background:radial-gradient(ellipse at 47% 8%,#fcf8ff 0,transparent 26%),linear-gradient(145deg,#c5dbef,#bcb7e4 48%,#d8c2d9);transition:background 1s}.wall{position:absolute;top:0;height:88%;transition:transform 1s ease}.left{left:0;width:42%;background:linear-gradient(110deg,#e4d5df,#cbb6ce);clip-path:polygon(0 0,62% 0,100% 100%,0 100%)}.right{right:0;width:42%;background:linear-gradient(110deg,#b4a1c7,#a790b7);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)}.floor{position:absolute;bottom:0;width:100%;height:23%;background:linear-gradient(#c7b4d0,#e2d5e8);clip-path:polygon(0 22%,40% 0,62% 0,100% 22%,100% 100%,0 100%)}.halo{position:absolute;width:540px;height:540px;border-radius:50%;background:#f7f2ff32;filter:blur(35px);left:50%;top:15%;transform:translateX(-50%)}header{position:absolute;left:38px;right:38px;top:30px;display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:5}.brand{font-size:25px;font-weight:850;letter-spacing:-1px}.brand span{display:block;font-size:11px;font-weight:500;letter-spacing:0;margin-top:4px;color:#655670}.header-note{font-size:13px;margin-right:auto;margin-left:45px;color:#5f526d}.outline{border:1px solid #ffffff9c;background:#ffffff24;border-radius:999px;color:#312642;padding:12px 20px;font-size:13px}.outline span{margin-left:15px}.intro{position:absolute;left:6%;top:22%;z-index:1;transition:opacity .35s,transform .6s}.intro p{font-size:14px;color:#695875;margin-bottom:22px}.intro h1{font-size:clamp(36px,4.4vw,64px);line-height:1.18;letter-spacing:-.065em;font-weight:780;margin:0}.intro h1 span{display:block;font-size:.68em;margin-top:12px}.character{position:absolute;width:min(42vw,510px);left:50%;top:17%;transform:translateX(-32%);transition:left .8s,transform .8s,width .8s,top .8s}.character img{display:block;width:100%;height:auto;mix-blend-mode:multiply;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 18px 16px #66598222)}.shadow{position:absolute;width:62%;height:30px;bottom:-8%;left:20%;border-radius:50%;background:#78618d45;filter:blur(15px);animation:shadow 5s ease-in-out infinite}.hello{position:absolute;top:4%;right:-3%;background:#ffffffb8;backdrop-filter:blur(12px);border:1px solid #fff9;border-radius:22px 22px 22px 4px;padding:13px 18px;font-size:13px;box-shadow:0 8px 20px #604a7810;animation:hello 6s ease-in-out infinite}.bottom{position:absolute;bottom:77px;width:min(760px,90%);left:50%;transform:translateX(-50%);z-index:5}.controller{display:grid;grid-template-columns:1.3fr repeat(4,1fr);padding:5px;border-radius:999px;background:#ffffff2b;border:1px solid #fff7;box-shadow:0 12px 30px #4937591a,inset 0 1px 0 #ffffff70;backdrop-filter:blur(20px);min-height:64px;align-items:center}.menu-label{text-align:center;font-size:13px;color:#635270}.controller button{min-height:52px;border:0;border-radius:999px;background:transparent;color:#4d3b60;font-size:15px;transition:background .3s,box-shadow .3s,transform .3s}.controller button[aria-pressed=true]{background:#ffffffb8;box-shadow:0 3px 15px #4c3b5b13;color:#49316a;font-weight:750}.controller button:hover{background:#ffffff70}.caption{text-align:center;margin:20px auto 0;line-height:1.65;min-height:54px}.caption strong{font-size:15px;font-weight:650}.caption p{font-size:13px;margin:3px 0;color:#665573}footer{position:absolute;bottom:23px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#675672}footer button{border:0;background:transparent;color:inherit;font-size:11px;padding:8px}.scene-card{position:absolute;right:7%;top:22%;width:330px;padding:27px;background:#fffc;backdrop-filter:blur(18px);border:1px solid #fff;border-radius:26px;box-shadow:0 18px 50px #4e375d12;animation:arrive .5s both;z-index:3}.scene-card h2{font-size:24px;letter-spacing:-1px;margin:12px 0 18px}.scene-card p{font-size:14px;line-height:1.65;color:#72617d}.eyebrow{font-size:12px;color:#795998}.bubble{padding:13px 15px;background:#eee7f8;border-radius:14px 14px 14px 3px;margin:12px 0;font-size:14px;line-height:1.6;animation:arrive .55s both}.bubble.reply{background:#f6f1ec;margin-left:20px;border-radius:14px 14px 3px 14px;animation-delay:.25s}.scene-card a,.scene-card .next{display:block;margin-top:18px;font-size:13px;font-weight:700;color:#654393}.scene-card .next{border:0;padding:10px 0;background:none}.note{padding:12px 0;border-bottom:1px solid #e9e2ed;font-size:13px;color:#7d6a86}.note b{display:block;color:#372744;margin-top:6px;font-size:15px}.price-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #e8e0ed;font-size:14px}.price-row b{font-size:21px}.scene-card small{display:block;margin-top:14px;color:#786884;font-size:11px;line-height:1.6}.world:not([data-scene=home]) .intro{opacity:0;transform:translateX(-25px);pointer-events:none}.world:not([data-scene=home]) .character{left:35%;transform:translateX(-50%);width:min(37vw,450px);top:19%}.world[data-scene=family] .sky{background:linear-gradient(145deg,#f8e4d9,#d1c9e8,#c5c4ea)}.world[data-scene=call] .left{transform:translateX(-6%)}.world[data-scene=call] .right{transform:translateX(6%)}.world.paused .character *{animation-play-state:paused}dialog{border:1px solid #eee1f7;border-radius:28px;background:#fbf8ff;color:#312642;width:min(520px,90vw);padding:38px}dialog::backdrop{background:#20102a66;backdrop-filter:blur(8px)}dialog h2{font-size:27px}dialog p{line-height:1.7;color:#71617d;font-size:14px}dialog>a{display:block;border-bottom:1px solid #e6ddec;padding:18px 0;font-size:15px}.close{position:absolute;right:14px;top:10px;background:none;border:0;font-size:28px;padding:6px 12px;color:#604c70}.legal{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;margin-top:25px}@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-15px) rotate(1deg)}}@keyframes shadow{50%{transform:scale(.85);opacity:.6}}@keyframes hello{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.character{top:18%;width:550px}.intro{left:10%}}
@media(max-width:800px){body{padding:8px}.world{height:calc(100svh - 16px);min-height:800px;border-radius:24px}header{left:22px;right:22px;top:22px}.brand{font-size:21px}.header-note{display:none}.outline{font-size:11px;padding:11px 14px}.intro{top:16%;left:7%}.intro h1{font-size:38px}.intro p{font-size:12px;margin-bottom:12px}.character{top:34%;left:50%;width:340px;max-width:80%;transform:translateX(-50%)}.hello{font-size:11px;right:0;top:0;padding:10px 12px}.bottom{bottom:70px;width:92%}.controller{grid-template-columns:repeat(4,1fr);border-radius:23px;padding:5px}.menu-label{grid-column:1/-1;font-size:11px;padding:8px}.controller button{font-size:13px;min-height:44px}.caption{margin-top:14px;min-height:65px;padding:0 12px}.caption strong{font-size:13px}.caption p{font-size:11px}.world:not([data-scene=home]) .character{width:190px;max-width:50%;left:28%;top:12%;transform:translateX(-50%)}.world:not([data-scene=home]) .hello{right:-100%;top:25%}.scene-card{top:34%;right:6%;width:88%;padding:20px 24px;max-height:340px;overflow:auto}.scene-card h2{font-size:21px;margin:7px 0 12px}.bubble{font-size:13px;padding:10px 12px;margin:8px 0}.scene-card p{font-size:13px}.scene-card a{margin-top:12px}.price-row{padding:10px 0}.note{padding:9px 0}.scene-card small{margin-top:10px}.scene-card .next{margin-top:8px}footer{left:22px;right:22px;bottom:15px}.wall{height:84%}.left,.right{width:48%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(min-width:801px){.world{min-height:620px}.character{left:50%;transform:translateX(-50%);width:min(39vw,470px);top:17%}.intro{left:5%;top:23%}.intro h1{font-size:clamp(32px,3.5vw,48px)}.intro h1 span{font-size:.7em}}
@media(max-width:800px){.world:not([data-scene=home]) .hello{right:-65%;font-size:10px}}
