:root{--bg:#f7f8fa;--panel:#fff;--panel2:#f1f4f9;--line:#e2e6ed;--text:#202634;--muted:#647084;--cyan:#315ce8;--gold:#315ce8;--purple:#315ce8;--shadow:none;color-scheme:light}
html,body{background:#f7f8fa;color:var(--text)}body{font-family:"Noto Sans KR",sans-serif;letter-spacing:-.025em}.ambient{display:none}.topbar{height:80px;max-width:1160px;border-bottom:1px solid var(--line);padding:0 12px}.brand{gap:10px;font-size:.96rem;color:#242d40}.brand-mark{width:32px;height:32px;background:#315ce8;color:white;border:0;border-radius:10px;font-size:1rem}.unofficial{font-size:.8125rem;color:#68748a}.shell{width:min(1060px,calc(100% - 48px))}.view{padding:48px 0 64px}.view.active{animation:rise .3s ease}.view#startView.active{display:flex;flex-direction:column;gap:36px;min-height:0;padding-top:56px}.hero-card{text-align:center;width:100%;padding:0;background:none;border:0;box-shadow:none}.eyebrow{display:inline-block;letter-spacing:0;font-weight:600;color:#315ce8;background:#eaf0ff;border-radius:99px;padding:7px 15px;font-size:.875rem}.hero-card h1{font-size:clamp(2.2rem,4.6vw,3.9rem);letter-spacing:-.065em;font-weight:800;line-height:1.27;margin:20px 0 18px;color:#202634}.hero-card h1 span{display:inline;background:none;color:#315ce8}.hero-copy{max-width:none;font-size:1rem;line-height:1.85;color:#667084;margin:0 auto}.feature-row{justify-content:center;gap:0;margin:24px auto;width:fit-content}.feature-row div{padding:0 26px;border:0;border-right:1px solid #dce1ea;border-radius:0;background:transparent;flex:initial}.feature-row div:last-child{border:0}.feature-row strong{color:#252e40;font-size:1.13rem;font-weight:700}.feature-row span{font-size:.8125rem;color:#677286}.primary-btn{background:#315ce8;color:white;box-shadow:0 5px 12px #315ce817;min-height:56px;border-radius:12px;font-size:1rem;font-weight:700}.primary-btn:hover{background:#244bd0;transform:translateY(-1px)}.hero-card>.primary-btn{min-width:300px;width:auto}.secondary-btn{color:#343e52;background:#fff;border:1px solid #d9dfe8;font-weight:600;box-shadow:none;border-radius:12px}.secondary-btn:hover{background:#f0f3f9}.micro{text-align:center;color:#758094;font-size:.8125rem;margin-top:12px}.champion-showcase{width:100%;max-width:760px;height:250px;gap:16px;padding:0 0 30px;align-items:stretch}.showcase-card,.showcase-card:nth-child(2),.showcase-card:nth-child(3){height:220px;transform:none;border:0;border-radius:18px;box-shadow:none;background:#e3e8f0}.showcase-card img{object-position:50% 25%;transition:transform .5s}.showcase-card:hover img{transform:scale(1.04)}.showcase-card:after{inset:55% 0 0;background:linear-gradient(transparent,#111827c9)}.showcase-card figcaption{bottom:16px;left:20px;color:white;font-size:1rem;line-height:1.5}.showcase-card figcaption span{font-size:.625rem;color:#e5eaf5;letter-spacing:.16em}.showcase-caption{bottom:-10px;font-size:.8125rem;color:#778297}.panel,.question-card{background:#fff;border:1px solid #e7eaf0;box-shadow:0 6px 25px #25365504;border-radius:20px}.setup-panel{max-width:780px;padding:36px 40px}.back-link{color:#697387;font-size:.875rem}.step-label{font-size:.8125rem;letter-spacing:0;color:#315ce8;margin-top:26px}.setup-panel h2{font-size:1.8rem;letter-spacing:-.045em;color:#202634}.setup-panel>p{line-height:1.85;font-size:.94rem;color:#687487;margin-top:12px}.choice{background:#f8f9fc;color:#485367;border:1px solid #e2e6ee;font-size:.94rem;min-height:56px}.choice:hover{border-color:#a4b7f6;background:#f1f5ff}.choice.selected{color:#274fcd;background:#eef3ff;border-color:#5376e9;box-shadow:inset 0 0 0 1px #5376e9}.choice.selected:after{color:#315ce8}.choice-grid{gap:10px}legend{color:#303a4c;font-weight:600}.test-head{max-width:740px;background:var(--bg);padding:12px 0;margin-bottom:12px}.icon-btn{background:white;border-color:#e1e5ed;color:#49546a}.progress-meta{font-size:.8125rem;color:#69758a}.progress-track{background:#e4e9f2;height:6px}.progress-track div{background:#315ce8}.question-card{max-width:740px;padding:36px 40px}.question-tag{color:#315ce8;font-size:.875rem;letter-spacing:0;border:0;padding:0}.question-card>.muted{font-size:.875rem;color:#748095;line-height:1.8}.question-card h2{color:#202634;font-size:1.65rem;line-height:1.6;margin:22px 0 28px;letter-spacing:-.04em}.options{gap:10px}.option{color:#394459;background:#fff;border:1px solid #e2e7ef;min-height:72px;padding:16px 18px;font-size:1rem;border-radius:12px;line-height:1.65}.option-key{color:#7a879d;background:#f0f3f8;border:0;border-radius:9px;font-size:.8125rem;flex-basis:32px;height:32px}.option:hover,.option.selected{color:#224ac9;background:#f0f4ff;border-color:#6786eb;transform:none}.option.selected .option-key{background:#315ce8;color:white}.result-top{display:flex;background:#edf2ff;border:0;padding:40px;border-radius:24px;gap:24px;margin-bottom:24px}.result-top .eyebrow{background:none;padding:0;font-size:.75rem;letter-spacing:.12em}.result-top p{color:#63718c}.result-top h1{color:#264ed1;font-size:clamp(2rem,4.5vw,3.3rem);letter-spacing:-.06em;line-height:1.3}.result-tagline{color:#4a5c80!important;font-size:1rem!important}.type-emblem{border:0;background:#fff9;color:#315ce8;box-shadow:none;width:106px;height:106px;flex-basis:106px;border-radius:24px;font-size:2.8rem}.result-grid{grid-template-columns:.9fr 1.1fr;gap:20px}.result-grid .panel{padding:28px}.panel h3{color:#2a3447;font-size:1.15rem}.panel-title{gap:10px}#similarity{background:#eef3ff;color:#315ce8;font-size:.8125rem}.score-meta{color:#59667b;font-size:.875rem}.score-meta span:last-child{color:#344c8b}.score-track{background:#edf0f6;height:6px}.score-fill{background:#6b89ed}.secondary{border-color:#e8ecf3;color:#68788f;font-size:.875rem}.description{color:#566379;font-size:1rem;line-height:1.9}.two-col{gap:20px}.two-col h4{color:#3b4e77;font-size:.94rem}.two-col ul{color:#657188;font-size:.875rem;padding-left:18px}.champion-panel{background:transparent;padding:28px 0 0;border:0;box-shadow:none;margin-top:0}.small-label{color:#7d8ba3;letter-spacing:.12em;font-size:.6875rem}.champion-panel h3{margin-top:5px;font-size:1.35rem}.champion-panel>.panel-title{margin-bottom:20px}.champion-grid{gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))}.champion-card{border:1px solid #e4e8ef;border-radius:16px;background:white;box-shadow:none}.champion-card:hover{border-color:#9eb1ec;transform:translateY(-3px)}.champion-card:first-child{border-color:#92a9ef;box-shadow:0 0 0 1px #92a9ef}.champion-portrait{background:#e8edf6}.champion-rank{background:#fffffff0;color:#35446b;font-size:.75rem;font-weight:700;border-radius:8px;padding:4px 9px;top:10px;left:10px}.champion-card:first-child .champion-rank{background:#315ce8;color:white}.champion-detail{padding:15px}.champion-card h4{color:#273247;font-size:1.06rem}.champion-card p{color:#778196;font-size:.8125rem;line-height:1.7}.match-score{color:#63708b;border-color:#edf0f5;font-size:.8125rem}.match-score strong{color:#315ce8}.result-actions{padding-top:26px;border-top:1px solid #e2e7ef;margin-top:28px;gap:10px}.result-actions .primary-btn{background:#27334b;box-shadow:none}.result-actions .primary-btn:hover{background:#172238}.disclaimer,footer{color:#7a8597;font-size:.8125rem;line-height:1.85}footer{border-top:1px solid #e3e7ee;max-width:1060px;margin:0 auto;padding:24px 20px 32px}.muted{color:#718096}button:focus-visible,a:focus-visible{outline:3px solid #7e9bfa;outline-offset:4px}
@media(hover:none){.option:hover:not(.selected){background:#fff;border-color:#e2e7ef;color:#394459}.champion-card:hover{transform:none}.primary-btn:hover{transform:none}}
@media(max-width:900px){.champion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.result-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr 1fr}}
@media(max-width:800px){body{background:#f7f8fa}.topbar{height:64px;padding:0 20px}.shell{width:calc(100% - 32px);max-width:640px}.view{padding:24px 0 40px}.view#startView.active{padding-top:32px;gap:24px}.hero-card h1{font-size:clamp(2rem,6.6vw,3rem);margin:18px 0 14px}.hero-copy{font-size:.94rem}.hero-card>.primary-btn{width:100%;min-width:0;max-width:360px}.eyebrow{font-size:.8125rem}.feature-row{margin:22px auto;justify-content:center}.feature-row div{padding:0 22px}.champion-showcase{max-width:520px;height:208px;gap:10px;padding:0 0 28px}.showcase-card,.showcase-card:nth-child(2),.showcase-card:nth-child(3){height:180px;border-radius:13px}.showcase-card figcaption{left:12px;bottom:12px;font-size:.94rem}.showcase-caption{bottom:-8px}.setup-panel,.question-card{padding:26px 22px}.setup-panel h2{font-size:1.65rem}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-grid.compact{grid-template-columns:1fr 1fr}.question-card h2{font-size:1.35rem;line-height:1.6}.option{padding:15px;min-height:72px;font-size:.96rem}.result-top{padding:26px 22px;gap:12px}.result-top h1{font-size:2.15rem}.type-emblem{width:72px;height:72px;flex-basis:72px;border-radius:18px;font-size:2rem}.result-grid .panel{padding:24px}.champion-panel{padding:28px 0 0}.champion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.champion-card:first-child{grid-column:1/-1;grid-template-columns:128px 1fr}.champion-card:first-child .champion-portrait{min-height:150px}.champion-card:first-child .champion-detail{padding:18px 22px}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions .primary-btn{grid-column:1/-1;order:0}.result-actions .secondary-btn{font-size:.875rem}.micro{font-size:.8125rem}.two-col{gap:16px}}
@media(max-width:400px){.shell{width:calc(100% - 24px)}.topbar{padding:0 14px}.brand{font-size:.875rem}.hero-card h1{font-size:1.95rem}.hero-copy{font-size:.875rem}.feature-row div{padding:0 18px}.feature-row span{font-size:.75rem}.champion-showcase{gap:8px;height:188px}.showcase-card,.showcase-card:nth-child(2),.showcase-card:nth-child(3){height:160px}.showcase-card figcaption span{display:none}.result-top{padding:24px 18px}.result-top h1{font-size:1.85rem}.type-emblem{width:50px;height:50px;flex-basis:50px;font-size:1.5rem;border-radius:14px}.choice-grid.compact{grid-template-columns:1fr}.question-card,.setup-panel{padding:24px 16px}.result-grid .panel{padding:22px 18px}.two-col{grid-template-columns:1fr;gap:4px}.champion-card:first-child{grid-template-columns:110px 1fr}.champion-card:first-child .champion-detail{padding:15px}.champion-detail{padding:12px}.result-actions{grid-template-columns:1fr}}
/* Separate non-scoring answers from playstyle choices. */
 #shareImageDialog{width:min(440px,calc(100% - 32px));max-height:90dvh;overflow:auto;border:1px solid #e2e7ef;border-radius:20px;padding:20px;background:#fff;color:#27334b;margin:auto;box-sizing:border-box}#shareImageDialog::backdrop{background:#17223899}.share-image-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.share-image-head h2{font-size:1.15rem;margin:0}#shareImagePreview{width:100%;height:auto;display:block;border-radius:8px}#shareImageDialog p{font-size:.875rem;line-height:1.7;color:#526078}#downloadImageBtn{display:flex;justify-content:center;text-decoration:none;font-size:1rem}.result-actions button:disabled{opacity:.6;cursor:wait}#feedbackBtn{grid-column:1/-1}
.skip-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}.skip-option{font-size:.875rem;min-height:50px;background:#f8f9fc;color:#647084;text-align:center;justify-content:center;padding:12px}.skip-option.selected{background:#eef3ff;color:#315ce8}@media(max-width:480px){.skip-options{grid-template-columns:1fr}}
.recommendation-reason{border-top:1px solid #e2e7ef;margin-top:12px;padding-top:12px;font-size:.875rem;line-height:1.75;color:#526078}.recommendation-reason summary{cursor:pointer;color:#315ce8;font-weight:600;padding:5px 0}.champion-card .recommendation-reason p{font-size:.875rem;color:#526078;margin:12px 0}.recommendation-reason ul{padding-left:18px;margin:8px 0}.recommendation-reason li+li{margin-top:8px}.champion-card{align-self:start}.recommendation-reason summary:focus-visible{outline:2px solid #315ce8;outline-offset:3px}