@import"https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Noto+Sans+KR:wght@600;700;800;900&display=swap";:root{font-family:Noto Sans KR,sans-serif;color:#211f3b;background:#efecf8;--v:#7568d8;--c:#ff956f}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{min-width:320px;overscroll-behavior-y:none}button{font:inherit;color:inherit}.shell{max-width:520px;min-height:100svh;margin:auto;padding-bottom:calc(28px + env(safe-area-inset-bottom));overflow:hidden;background:#f8f6ff;position:relative}.brand{height:72px;padding:22px;display:flex;align-items:center;gap:9px}.brand>span{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:var(--c);color:#fff;font-size:10px}.brand b{font-size:20px}.brand small{margin-left:auto;padding:4px 8px;border:1px solid #c4bee6;border-radius:99px;color:#756da0;font-size:9px}.hero-art{height:40svh;min-height:290px;max-height:390px;display:grid;place-items:center;position:relative}.bolty{width:min(76vw,350px);position:relative;z-index:2;filter:drop-shadow(0 13px 15px #5c52862b)}.hero-art>i{position:absolute;width:310px;height:310px;border:1px dashed #bbb3e4;border-radius:50%;animation:spin 25s linear infinite}.hero-art strong{position:absolute;z-index:3;right:24px;bottom:17px;padding:7px 12px;border-radius:99px;background:#25223f;color:#fff;font-size:10px;box-shadow:0 5px #ffbd7d}.hero-copy{padding:0 24px}.hero-copy>p{margin:0 0 7px;color:var(--v);font-size:10px;font-weight:900;letter-spacing:1.4px}.hero-copy h1{margin:0;font-size:clamp(31px,8.5vw,44px);line-height:1.22;letter-spacing:-2px}.hero-copy h1 em{font-style:normal;color:var(--c)}.hero-copy h1 i{font-style:normal;color:var(--v)}.hero-copy>div{margin:13px 0 21px;font-family:Gowun Dodum;color:#69647d;font-size:14px}.primary{width:calc(100% - 48px);min-height:62px;margin:0 24px;padding:12px 19px;border:0;border-radius:19px;background:var(--v);color:#fff;display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:16px;box-shadow:0 9px 22px #7568d83d}.primary:active{transform:translateY(2px)}.primary b{font-size:23px}.home footer{text-align:center;margin:17px 20px;color:#9892aa;font-size:9px}.quiz{padding:19px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.quiz>header{display:grid;grid-template-columns:35px 1fr 54px;align-items:center;gap:12px}.quiz>header button{border:0;background:none;padding:0;text-align:left;font-size:23px}.quiz>header div{height:7px;border-radius:99px;background:#e3dff2;overflow:hidden}.quiz>header div i{display:block;height:100%;background:linear-gradient(90deg,var(--c),#ffd170)}.quiz>header>b{text-align:right;color:var(--v)}.quiz>header small{font-size:9px;color:#a19bb5}.q-art{height:min(36svh,325px);min-height:230px;display:grid;place-items:center;position:relative}.q-art .bolty{width:min(56vw,265px)}.q-art>span{position:absolute;z-index:3;top:25px;padding:6px 11px;border-radius:99px;background:#fff;color:#675fa2;box-shadow:0 5px 16px #5f529219;font-size:10px;font-weight:900}.q-art>strong{position:absolute;z-index:3;right:22px;bottom:30px;width:43px;height:43px;display:grid;place-items:center;border:4px solid #fff;border-radius:50%;background:var(--c);color:#fff;font-size:10px}.quiz h2{min-height:66px;margin:0 auto 20px;text-align:center;font-size:clamp(23px,6.5vw,30px);line-height:1.35;letter-spacing:-1.4px;word-break:keep-all}.answers{display:grid;gap:10px;margin-top:auto}.answers button{min-height:68px;padding:11px 13px;border:1px solid #ded8ef;border-radius:17px;background:#fff;display:grid;grid-template-columns:35px 1fr 20px;align-items:center;gap:7px;text-align:left;box-shadow:0 4px 11px #554b7a0c}.answers button:active{border-color:var(--v);background:#f0edff}.answers small{width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:#eeeafd;color:var(--v);font-weight:900}.answers span{font-size:14px;font-weight:700;line-height:1.35;word-break:keep-all}.answers b{color:#aaa2c2;font-size:20px}.quiz>p{text-align:center;margin:13px 0 0;color:#a39db5;font-size:9px}.beat,.loading{padding:35px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#2a2749;color:#fff}.beat .bolty,.loading .bolty{width:min(62vw,290px);filter:drop-shadow(0 14px 18px #0f0d1b55)}.beat>p{margin:15px 0 9px;color:#ffbd7d;font-size:10px;font-weight:900;letter-spacing:1px}.beat h2{margin:0 0 13px;font-size:clamp(27px,7vw,38px);line-height:1.35}.beat h2 em{font-style:normal;color:#c3baff}.beat>span,.loading>p{color:#aaa5c1;font-size:11px}.beat .primary{margin-top:31px;background:var(--c)}.loading h2{font-size:34px;line-height:1.25;margin:18px 0 23px}.loading>div{width:72%;height:8px;border-radius:99px;background:#4b466a;overflow:hidden}.loading>div i{display:block;height:100%;background:linear-gradient(90deg,var(--c),#ffd36a);animation:load 1.25s ease-out forwards}.result{padding:20px 18px calc(34px + env(safe-area-inset-bottom));background:#282541;color:#fff}.result>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.result>header b{font-size:18px}.result>header span{color:#aaa5c2;font-size:8px;letter-spacing:1.4px}.card{padding:18px 15px 25px;border-radius:28px;background:var(--result);color:#25223f;text-align:center;position:relative;overflow:hidden}.card:before{content:"";position:absolute;width:270px;height:270px;left:50%;top:45px;transform:translate(-50%);border:1px dashed #ffffff99;border-radius:50%}.card>small{position:relative;z-index:3;padding:5px 9px;border:1px solid #29264455;border-radius:99px;font-size:9px;font-weight:900}.result-art{height:270px;display:grid;place-items:center;position:relative}.result-art .bolty{width:min(62vw,280px)}.result-art>strong{position:absolute;z-index:4;right:8px;bottom:23px;width:72px;height:72px;padding-top:16px;border-radius:50%;background:#fff;font-size:30px;box-shadow:0 6px #27244122}.result-art>strong i{font-style:normal;font-size:10px}.card>p{display:inline-block;margin:0;padding:4px 9px;border-radius:99px;background:#282541;color:#fff;font-size:9px;font-weight:900}.card h1{margin:8px 0 7px;font-size:clamp(32px,9vw,45px);line-height:1.05;letter-spacing:-2px}.card blockquote{margin:0;font-family:Gowun Dodum;font-size:13px;font-weight:700}.detail,.two section,.axis{margin-top:13px;padding:18px;border:1px solid #4d4968;border-radius:18px;background:#302d4e}.detail>b,.two b{display:inline-block;margin-bottom:8px;color:#ffbd7d;font-size:10px}.detail p,.two p{margin:0;color:#e0ddee;font-size:13px;line-height:1.65;word-break:keep-all}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two section{margin-top:0;padding:16px}.two p{font-size:12px;line-height:1.55}.axis>div{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:10px;margin:10px 0}.axis span{font-size:10px;font-weight:800;color:#cbc7db}.axis i{height:7px;border-radius:99px;background:#4b4767;overflow:hidden}.axis i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--result),#fff0b0)}.share{width:100%;margin:15px 0 0;background:var(--c)}.again{width:100%;padding:17px;border:0;background:none;color:#aaa5c1;text-decoration:underline;font-size:12px}.result>footer{text-align:center;color:#716d89;font-size:8px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes load{0%{width:3%}to{width:100%}}@media(min-width:600px){body{background:#1d1b30}.shell{box-shadow:0 0 60px #11102b99}}@media(max-height:700px){.hero-art{min-height:230px;height:34svh}.hero-art .bolty{width:min(65vw,300px)}.q-art{min-height:185px;height:28svh}.q-art .bolty{width:min(45vw,215px)}.quiz h2{font-size:22px;min-height:51px;margin-bottom:13px}.answers button{min-height:59px}.result-art{height:225px}.result-art .bolty{width:min(51vw,235px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important}}