@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#322a42;background:#faf9fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;word-break:keep-all}button,input{font:inherit}button,a{cursor:pointer}button{transition:background .2s,transform .2s}button:hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #af94ea;outline-offset:4px}[hidden]{display:none!important}header{height:64px;background:#6547bd;color:#fff;display:flex;align-items:center;gap:24px;padding:0 40px}header a{color:inherit;text-decoration:none}header>a:first-child{font-size:24px;letter-spacing:-1px}header strong{margin-left:8px}.breadcrumb{font-size:13px;color:#e0d4f6}.back{font-size:13px;margin-left:auto}main{max-width:1440px;margin:0 auto;padding:38px 42px 22px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:29px}.heading small{font-size:10px;letter-spacing:2px;color:#9b87b9;font-weight:600}h1{font-size:28px;letter-spacing:-1px;margin:10px 0}h1>span{color:#916bde}.heading p{font-size:14px;color:#93869f;margin:9px 0}.prototype{font-size:10px;letter-spacing:.8px;background:#f0e9f9;color:#9277b0;padding:9px 12px;border-radius:6px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px}.room{background:radial-gradient(ellipse at 50% 50%,#fff 5%,#f3edf9 65%,#eae0f7 100%);border:1px solid #e6dcf1;border-radius:22px;min-height:725px;position:relative;overflow:hidden;display:flex;flex-direction:column}.room-top{display:flex;justify-content:space-between;align-items:center;padding:24px 26px;position:relative;z-index:2}.live{font-size:12px;color:#8a729e;display:flex;align-items:center;gap:7px}.live i{height:6px;width:6px;background:#b098d7;border-radius:50%}.subtle{background:#fff9;border:1px solid #e5daee;border-radius:7px;padding:7px 10px;color:#9a87ad;font-size:11px}#stage{height:490px;position:relative;touch-action:none;cursor:grab;margin-top:-7px}#stage:active{cursor:grabbing}#stage canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;color:#89759f;text-align:center;padding:40px;line-height:1.8}.speech{position:relative;align-self:center;max-width:85%;text-align:center;background:#fffdfd;box-shadow:0 4px 20px #6c4e8610;border:1px solid #eee6f4;border-radius:16px;padding:16px 24px;color:#705b87;font-size:15px;line-height:1.7;margin-top:-12px;min-height:58px}.speech:before{content:'';position:absolute;top:-7px;left:50%;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-top:1px solid #eee6f4;border-left:1px solid #eee6f4}.stage-hint{text-align:center;font-size:11px;color:#a797b7;margin:18px 0}.actions{display:flex;gap:10px;justify-content:center;padding:0 22px;margin:0 auto 28px;width:100%;max-width:560px}.actions button{flex:1;background:#ffffffc9;border:1px solid #e5dbf0;border-radius:12px;padding:13px 6px;color:#9a7bc0;font-size:20px}.actions button span{display:block;font-size:12px;color:#897597;margin-top:6px}.actions button:hover,.actions button.active{background:#ebe0fc;border-color:#b699e0}.room-foot{display:flex;justify-content:space-between;padding:16px 24px;border-top:1px solid #e6dbee70;margin-top:auto;font-size:9px;letter-spacing:1px;color:#b09bbe}.room-foot span:last-child{letter-spacing:0}aside{display:flex;flex-direction:column;gap:20px}aside>section{background:#fff;border:1px solid #ede7f2;border-radius:17px;padding:21px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.section-head h2{font-size:15px;margin:0;font-weight:600}.section-head>span{font-size:10px;color:#ac9ab7;background:#f5f1f8;border-radius:5px;padding:5px 7px}.camera-preview{height:157px;margin:19px 0 16px;background:#f8f6fb;border:1px dashed #e5ddee;border-radius:12px;position:relative;overflow:hidden}#cameraEmpty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#a795bc}#cameraEmpty>span{font-size:28px;margin-bottom:8px}#cameraEmpty strong{font-size:12px;font-weight:500}#cameraEmpty p{font-size:10px;color:#b0a1bf;margin:7px 0}video{width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}#faceBox{position:absolute;border:2px solid #c6b0f0;border-radius:13px;box-shadow:0 0 0 1000px #21132f18;pointer-events:none}.primary{background:#7d5cce;border:0;color:#fff;border-radius:9px;width:100%;padding:12px;font-size:13px}.camera-info{font-size:11px;color:#a393af;line-height:1.8;margin:12px 0 0}.chat-card{display:flex;flex-direction:column;flex:1}.section-head button{font-size:10px;color:#a18ab5;background:none;border:1px solid #eee6f5;padding:6px 8px;border-radius:6px}.chat-caption{font-size:10px;color:#b0a2bb;margin:9px 0 0}#messages{height:214px;overflow-y:auto;margin:17px 0;scrollbar-width:thin;scrollbar-color:#e0d4ed transparent;padding-right:4px}.message{max-width:95%;font-size:13px;margin-bottom:14px}.message>span{font-size:10px;color:#ac99ba;margin-left:4px}.message p{padding:12px 14px;background:#f6f1fc;color:#8b719f;border-radius:0 13px 13px 13px;line-height:1.7;margin:6px 0}.user-message{margin-left:auto}.user-message>span{display:block;text-align:right}.user-message p{background:#8260cc;color:white;border-radius:13px 0 13px 13px}.suggestions{display:flex;gap:6px;margin:0 0 13px;flex-wrap:wrap}.suggestions button{font-size:10px;border:1px solid #e9e0f3;color:#a28ab4;border-radius:20px;background:#fff;padding:7px 9px}form{display:flex;align-items:center;border:1px solid #e7ddf0;border-radius:11px;padding:7px;background:#fcfaff;margin-top:auto}input{font-size:12px;min-width:0;flex:1;border:0;background:none;color:#705484;padding:6px;outline-offset:0}input::placeholder{color:#b8a9c4}form button{background:#8461cf;color:white;width:32px;height:32px;flex-shrink:0;border:0;border-radius:8px;font-size:21px}footer{display:flex;justify-content:space-between;margin-top:23px;font-size:10px;color:#ad9dbb;gap:12px}footer span{color:#bfb2c9}@media(max-width:1000px){main{padding:30px 24px}.layout{grid-template-columns:minmax(0,1fr) 310px;gap:17px}.room-top{padding:20px 18px}.live{font-size:10px}.prototype{display:none}.speech{font-size:13px;padding:15px}.room-foot{font-size:8px;gap:10px}.actions{gap:7px;padding:0 16px}.actions button span{font-size:11px}.room{min-height:720px}}@media(max-width:760px){header{padding:0 20px;height:56px}header>a:first-child{font-size:21px}.breadcrumb{display:none}.back{font-size:11px}main{padding:28px 16px}.heading h1{font-size:23px}.heading p{font-size:12px;line-height:1.8}.heading small{font-size:9px}.layout{grid-template-columns:1fr}.room{min-height:0}.room-top{padding:20px}#stage{height:355px}.speech{font-size:13px;margin-top:0}.room-foot{padding:15px 18px}.actions{margin-bottom:22px}.camera-preview{height:185px}.camera-card{padding:23px}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.section-head{flex-wrap:wrap}.chat-card{padding:20px}#messages{height:200px}.camera-info{font-size:11px}footer{flex-direction:column;line-height:1.6}}@media(max-width:540px){aside{display:flex}.camera-preview{height:175px}.chat-card{min-height:385px}#messages{height:235px}.heading h1{font-size:22px}.room-top .live{font-size:11px}.room-foot{font-size:8px}.heading p{max-width:310px}.speech{max-width:90%}.stage-hint{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Image-based companion: original generated character poses, no 3D runtime. */
#stage{height:440px;display:grid;place-items:center;touch-action:pan-y;cursor:default;isolation:isolate;overflow:hidden;background:#fff;border-radius:50%;width:min(440px,94%);margin:0 auto 16px;box-shadow:0 18px 65px #aa8acf16}
.character-follow{width:100%;height:100%;display:grid;place-items:center}
#character{--follow-x:0px;--follow-y:0px;--tilt:0deg;width:92%;aspect-ratio:1;border:0;padding:0;background:transparent;position:relative;transform:translate(var(--follow-x),var(--follow-y)) rotate(var(--tilt));transition:transform .25s ease;cursor:pointer;border-radius:45%}
.character-art{display:block;width:100%;height:100%;background-image:url('../cats-multishot.png');background-repeat:no-repeat;background-size:300% 100%;background-position:0% 50%;animation:breathe 4s ease-in-out infinite;transform-origin:50% 85%}
#character[data-pose="study"] .character-art{background-position:50% 50%}#character[data-pose="trophy"] .character-art{background-position:100% 50%}
#character[data-action="wave"] .character-art{animation:greet .8s ease-in-out infinite}#character[data-action="pet"] .character-art{animation:cuddle 1.2s ease-in-out infinite}#character[data-action="cheer"] .character-art{animation:celebrate .9s ease-in-out infinite}#character[data-action="rest"] .character-art{animation:breathe 5s ease-in-out infinite}#character[data-action="talk"] .character-art{animation:breathe 2s ease-in-out infinite}
#reaction{position:absolute;top:38px;right:30px;max-width:150px;color:#9a6bcf;background:#f7f0fd;border-radius:18px;padding:8px 13px;font-size:14px;pointer-events:none}#reaction:empty{display:none}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.012)}}@keyframes greet{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes cuddle{0%,100%{transform:rotate(0) scale(1.02)}50%{transform:rotate(-4deg) scale(1.04)}}@keyframes celebrate{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:760px){#stage{height:auto;aspect-ratio:1;width:min(350px,90%)}#reaction{top:22px;right:15px;font-size:12px}.room-top{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.character-art{animation:none!important}#character{transition:none!important}}
/* Shared workspace navigation around the companion page. */
.lnb{position:fixed;inset:0 auto 0 0;width:246px;background:#fff;border-right:1px solid #efedf3;padding:38px 23px 0;z-index:5;display:flex;flex-direction:column;gap:0}.lnb a{text-decoration:none}.lnb .brand{display:flex;align-items:center;color:#282734;font-size:25px;font-weight:800;letter-spacing:-1.1px;white-space:nowrap}.lnb .brand>span:not(.brand-icon){color:#7c5ce5}.brand-icon{display:grid;place-items:center;background:#7c5ce5;color:#fff;width:35px;height:36px;border-radius:13px;font-size:26px;margin-right:8px}.workspace-label{font-size:10px;letter-spacing:1.7px;color:#aaa6b5;margin:49px 15px 18px}.lnb nav a{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:10px;font-size:14px;font-weight:500;color:#85818f;margin-bottom:7px}.lnb nav a>span{font-size:18px;width:18px;text-align:center}.lnb nav a:hover{background:#f7f4fe}.lnb nav a.active{background:#f0ebfc;color:#7956db;font-weight:700}.lnb-bottom{margin-top:auto;padding:28px 12px;color:#8f859e;font-size:12px}.lnb-bottom strong{color:#756583}.lnb-bottom p{font-size:11px}.lnb-profile{border-top:1px solid #efedf3;margin-top:26px;padding-top:23px;display:flex;align-items:center;gap:12px;color:#50465d}.lnb-profile>span{background:#f0eafb;padding:12px;border-radius:50%;color:#7b59bd}.lnb-profile small{display:block;font-size:10px;color:#aaa1b3;margin-top:5px}.interaction-shell{margin-left:246px}.interaction-shell header{height:56px;background:#513795;padding:0 32px}.interaction-shell main{padding:30px 28px}.layout{grid-template-columns:minmax(0,1fr) 310px;gap:20px}.interaction-shell header .breadcrumb{display:block}.interaction-shell header .back{font-size:12px}.heading h1{font-size:25px}#stage{height:auto;aspect-ratio:1;width:min(400px,94%)}@media(max-width:1150px){.layout{grid-template-columns:1fr}.layout>aside{display:grid;grid-template-columns:1fr 1fr}.room{min-height:0}.prototype{display:none}}@media(max-width:760px){.lnb{position:static;width:100%;padding:20px 18px 0;display:flex;border-right:0;border-bottom:1px solid #efedf3}.workspace-label,.lnb-bottom{display:none}.lnb nav{display:flex;overflow-x:auto;margin-top:18px;gap:3px}.lnb nav a{font-size:11px;padding:11px 8px;white-space:nowrap;gap:5px;flex:1;justify-content:center}.lnb nav a>span{display:none}.interaction-shell{margin-left:0}.interaction-shell main{padding:26px 16px}.interaction-shell header{padding:0 18px}.interaction-shell header .breadcrumb{font-size:11px}.interaction-shell header .back{font-size:10px}.heading h1{font-size:23px}}@media(max-width:540px){.layout>aside{display:flex}}