:root{--mango:#ffb52e;--orange:#ff7a2f;--cream:#fff8e9;--ink:#493322;--soft:#ffe7b8;--white:#fff}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 10%,#fff4cf,transparent 35%),linear-gradient(145deg,#fffaf0,#ffe6bb);display:grid;place-items:center}.shell{width:min(760px,100%);padding:24px}.screen{display:none}.screen.active{display:block}#start{text-align:center;background:#fffaf2;border:2px solid #ffd37d;border-radius:32px;padding:64px 24px;box-shadow:0 18px 60px #c57d2926}.mascot{font-size:72px}.eyebrow{font-weight:900;letter-spacing:.12em;color:var(--orange);font-size:13px}h1{font-size:clamp(36px,8vw,58px);margin:10px 0}.lead{font-size:19px;line-height:1.7;color:#745b48}button{border:0;border-radius:18px;background:linear-gradient(135deg,var(--mango),var(--orange));color:white;font-weight:900;font-size:17px;padding:17px 26px;cursor:pointer;box-shadow:0 8px 20px #ff8a3240}#start button{margin:22px 0 34px;min-width:230px}small{display:block;color:#a78669}.progress-head{display:flex;justify-content:space-between;font-weight:800;font-size:14px}.bar{height:12px;background:#fff0d3;border-radius:999px;overflow:hidden;margin:10px 0 28px}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mango),var(--orange));transition:.3s}.qcard,.result-card{background:#fffaf2;border:2px solid #ffd37d;border-radius:28px;padding:clamp(24px,6vw,48px);box-shadow:0 18px 60px #c57d2926}.badge{display:inline-block;background:var(--soft);color:#a85d16;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900}.qcard h2{font-size:clamp(24px,5vw,34px);line-height:1.45;margin:24px 0 30px}#choices{display:grid;gap:14px}.choice{background:white;color:var(--ink);border:2px solid #f1d9b2;box-shadow:none;text-align:left;line-height:1.5}.choice:hover{border-color:var(--orange);transform:translateY(-2px)}.result-card{text-align:center}.result-image{width:220px;height:220px;margin:15px auto;border-radius:50%;background:#fff0cc;display:grid;place-items:center;overflow:hidden}.result-image img{width:100%;height:100%;object-fit:cover}.result-image span{font-size:90px}.quote{font-weight:900;font-size:20px;color:var(--orange)}.desc{line-height:1.75;color:#654e3d}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.match-grid div{background:#fff0d3;padding:18px;border-radius:18px}.match-grid b,.match-grid span{display:block}.match-grid span{font-size:20px;font-weight:900;margin-top:7px}.credit{font-size:12px;color:#a78669;margin-top:30px}.actions{display:flex;gap:12px;justify-content:center;margin-top:18px}.secondary{background:#fff;color:var(--orange);border:2px solid #ffc368;box-shadow:none}@media(max-width:560px){.shell{padding:14px}.qcard,.result-card{border-radius:22px}.match-grid{grid-template-columns:1fr}.actions{flex-direction:column}.choice{font-size:15px}}

.intro-question{font-size:clamp(21px,4.5vw,28px);font-weight:700;margin:0 0 22px}.result-heading{font-size:clamp(22px,5vw,28px);font-weight:800;color:var(--orange);margin:0 0 20px}.traits{font-size:15px;font-weight:700;color:#9a663e}.qcard h2,.choice{white-space:pre-line}.desc{font-size:17px;line-height:1.9;word-break:keep-all}.match-grid{text-align:left}.match-grid .match-reason{font-size:15px;font-weight:400;line-height:1.8;margin:12px 0 0;word-break:keep-all}.match-grid span{font-size:23px}.result-card{overflow-wrap:anywhere}

.intro-question{color:#bb8057}#start h1{color:#f08028;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 3px 0 #fff,0 6px 12px rgba(151,83,27,.3);font-weight:900}

#start h1{font-family:"Arial Black","Noto Sans KR",system-ui,sans-serif;font-weight:1000;letter-spacing:-.035em;-webkit-text-stroke:5px #fff;text-shadow:none}#start h1::selection{background:#ffe7b8}

#start h1{-webkit-text-stroke:0;text-shadow:none}

#resultName{font-size:clamp(28px,6vw,40px);margin:12px 0}.result-image{width:min(340px,100%);height:auto;aspect-ratio:1;margin:20px auto}.result-image img{object-fit:contain}

.result-image{position:relative;isolation:isolate;overflow:visible;border-radius:0;background:transparent;height:380px;aspect-ratio:auto;width:min(360px,100%)}.result-image::before{content:"";position:absolute;width:85%;aspect-ratio:1;border-radius:50%;background:#fff0cc;bottom:0;left:7.5%;z-index:-1}.result-image img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.result-image span{z-index:1}#saveStatus,#localImageHelp{font-size:14px;line-height:1.6;text-align:center;color:#875d3f}#localImageHelp input{display:block;max-width:100%;margin:10px auto}button:disabled{opacity:.65;cursor:wait}@media(max-width:560px){.result-image{height:320px}}