@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css");:root{--bg:#fbf3e8;--paper:rgba(255,252,246,.86);--paper-solid:#fffcf6;--ink:#262338;--muted:#766f76;--line:rgba(54,48,70,.1);--coral:#d96f63;--cyan:#2f8f9b;--lime:#d7c66a;--pink:#d88aa4;--navy:#30334f;--shadow:0 18px 42px rgba(69,76,120,.1);--soft-shadow:0 12px 30px rgba(69,76,120,.08);--font-ui:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;--font-display:"Jua","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html{background:var(--bg)}body{min-height:100vh;color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}a,button{font:inherit}.app{width:min(100%,520px);min-height:100vh;margin:0 auto;padding:20px 18px 28px;flex-direction:column}.app,.shell{display:flex}.shell{flex:1 1;flex-direction:column;justify-content:center}.foot{color:var(--muted);font-size:11px;line-height:1.5;margin-top:22px;text-align:center}.brand-row{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-size:13px;font-weight:900;text-transform:uppercase}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#e5d68d;color:var(--ink);font-size:12px;box-shadow:0 10px 22px rgba(69,76,120,.1)}.cover,.quiz,.result{animation:rise .32s ease}.hero,.persona,.pick,.result-hero{position:relative;overflow:hidden}.hero:after,.persona:after,.pick:after,.result-hero:after{content:"";position:absolute;top:10px;left:14px;right:14px;height:1px;border-radius:inherit;background:hsla(0,0%,100%,.72);pointer-events:none}.hero>*,.persona>*,.pick>*,.result-hero>*{position:relative;z-index:1}.hero{margin-top:22px;padding:26px 22px 18px;border:1px solid var(--line);border-radius:30px;background:var(--paper-solid);box-shadow:var(--shadow)}.hero-copy{position:relative;z-index:1}.eyebrow{display:inline-flex;color:var(--coral);font-size:12px;font-weight:900;line-height:1.4}.cover h1{margin-top:10px;color:var(--navy);font-family:var(--font-display);font-size:40px;font-weight:400;line-height:1.12}.cover p{max-width:340px;margin-top:14px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.72}.mascot-stage{position:relative;display:grid;place-items:center;min-height:210px;margin-top:8px}.mascot-stage img{width:min(76%,260px);height:auto;filter:drop-shadow(0 18px 24px rgba(69,76,120,.13))}.spark{display:none}.cta{width:100%;min-height:58px;margin-top:16px;border:0;border-radius:999px;background:var(--coral);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.24),0 14px 28px hsla(6,61%,62%,.22);color:#fff;cursor:pointer;font-size:16px;font-weight:900;transition:transform .12s ease,box-shadow .12s ease}.cta:hover{transform:translateY(-1px);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.24),0 16px 30px hsla(6,61%,62%,.26)}.cta:active{transform:translateY(1px);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.18),0 9px 20px hsla(6,61%,62%,.18)}.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px;margin-top:22px}.quick-stats div{min-height:74px;padding:12px 8px;border:1px solid var(--line);border-radius:20px;background:rgba(255,252,246,.72);box-shadow:0 10px 24px rgba(69,76,120,.06);text-align:center}.quick-stats span,.quick-stats strong{display:block}.quick-stats strong{color:var(--navy);font-size:21px;font-weight:900}.quick-stats span{margin-top:4px;color:var(--muted);font-size:12px;font-weight:700}.cover-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}.cover-tags span{border:1px solid var(--line);border-radius:999px;background:rgba(255,252,246,.7);color:var(--navy);font-size:12px;font-weight:800;padding:7px 11px}.quiz-top{display:grid;grid-template-columns:1fr 70px;align-items:center;grid-gap:14px;gap:14px;margin-bottom:22px}.quiz-mascot{width:70px;height:70px;object-fit:contain;border:1px solid var(--line);border-radius:50%;background:var(--paper-solid);box-shadow:var(--soft-shadow)}.progress{height:10px;margin-top:10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,252,246,.76);overflow:hidden}.progress-bar{height:100%;border-radius:999px;background:var(--cyan);transition:width .26s ease}.q-count{color:var(--coral);font-size:15px;font-weight:900}.q-count span{color:var(--muted);font-weight:700}.q-title{color:var(--navy);font-family:var(--font-display);font-size:27px;font-weight:400;line-height:1.28;margin-bottom:22px}.options{display:flex;flex-direction:column;gap:11px}.option{display:grid;grid-template-columns:44px 1fr;align-items:center;grid-gap:12px;gap:12px;min-height:76px;border:1px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.82),0 10px 24px rgba(69,76,120,.07);color:var(--ink);cursor:pointer;padding:14px;text-align:left;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}.option:hover{background:#fffaf3;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.9),var(--soft-shadow);transform:translateY(-2px)}.option:active{box-shadow:0 6px 18px rgba(69,76,120,.06);transform:translateY(1px)}.option-index{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e5d68d;color:var(--ink);font-size:12px;font-weight:900}.option-copy{display:flex;min-width:0;flex-direction:column;gap:4px}.option-label{font-size:16px;font-weight:900;line-height:1.35}.option-sub{color:var(--muted);font-size:12px;font-weight:650;line-height:1.4}.result-hero{display:grid;grid-template-columns:96px 1fr;align-items:center;grid-gap:16px;gap:16px;margin-bottom:16px;padding:18px;border:1px solid var(--line);border-radius:30px;background:var(--paper-solid);box-shadow:var(--shadow)}.result-hero img{width:96px;height:96px;object-fit:contain}.result-hero h1{margin-top:6px;color:var(--navy);font-family:var(--font-display);font-size:30px;font-weight:400;line-height:1.15}.result-hero p{margin-top:6px;color:var(--muted);font-size:14px;font-weight:800}.mascot-note{display:inline-flex;flex-direction:column;gap:2px;margin-top:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,252,246,.72);color:var(--muted);font-size:12px;font-weight:650;line-height:1.35;padding:8px 10px}.mascot-note span{color:var(--navy);font-weight:900}.persona{margin-bottom:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,252,246,.84);box-shadow:0 12px 30px rgba(69,76,120,.08);padding:18px}.persona-tag{color:var(--coral);font-size:12px;font-weight:900}.persona-desc{margin-top:8px;color:var(--muted);font-size:14px;font-weight:650;line-height:1.72}.match-head{margin:0 0 10px 2px;color:var(--navy);font-size:13px;font-weight:900}.match-head.sub{margin-top:22px}.pick{border:1px solid var(--line);border-radius:30px;background:var(--paper-solid);padding:18px;box-shadow:var(--shadow)}.pick-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pick-top h2{color:var(--navy);font-family:var(--font-display);font-size:24px;font-weight:400;line-height:1.16}.pick-meta{margin-top:6px;color:var(--muted);font-size:13px;font-weight:650;line-height:1.45}.pick-score{min-width:70px;text-align:center}.pick-score strong{display:block;font-size:28px;font-weight:900;line-height:1}.pick-score span{color:var(--muted);font-size:11px;font-weight:800}.pick-badge{display:inline-block;margin:14px 0 4px;border-radius:999px;font-size:12px;font-weight:900;padding:6px 12px}.pick-row{margin-top:10px;border-top:1px dashed hsla(285,5%,46%,.18);padding-top:10px;color:var(--ink);font-size:13px;font-weight:650;line-height:1.65}.pick-row b{margin-right:5px;color:var(--navy);font-weight:900}.pick-row.muted{border:none;color:var(--muted);padding-top:2px}.reasons{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}.reasons-label{color:var(--muted)}.reason-chip,.reasons-label{font-size:12px;font-weight:800}.reason-chip{border:1px solid var(--line);border-radius:999px;background:hsla(0,0%,100%,.72);color:var(--navy);padding:5px 10px}.pick-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:16px;border:0;border-radius:999px;background:var(--cyan);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.24),0 10px 22px rgba(47,143,155,.18);color:#fff;font-size:13px;font-weight:900;padding:9px 14px;text-decoration:none}.alts{display:flex;flex-direction:column;gap:10px}.alt{border:1px solid var(--line);border-radius:20px;background:rgba(255,252,246,.72);box-shadow:0 9px 24px rgba(69,76,120,.06);padding:14px 15px}.alt-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.alt-name{color:var(--navy);line-height:1.35}.alt-name,.alt-pct{font-size:15px;font-weight:900}.alt-meta{margin-top:5px;color:var(--muted);font-size:12px;font-weight:650;line-height:1.45}.alt-bar{height:7px;margin-top:10px;border-radius:999px;background:hsla(285,5%,46%,.14);overflow:hidden}.alt-bar-fill{height:100%;border-radius:999px}.result-actions{display:flex;gap:10px;margin-top:22px}.ghost{flex:1 1;min-height:48px;border:1px solid var(--line);border-radius:999px;background:rgba(255,252,246,.78);color:var(--navy);cursor:pointer;font-size:14px;font-weight:900}.ghost.strong{border-color:hsla(51,58%,63%,.44);background:var(--lime)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:380px){.app{padding-inline:14px}.cover h1{font-size:35px}.hero{padding-inline:18px}.option{grid-template-columns:38px 1fr;padding:12px}.result-hero{grid-template-columns:78px 1fr}.result-hero img{width:78px;height:78px}}