@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap");body,html{height:100%}body{display:flex;flex-direction:column;margin:0;padding:0;font-family:Pretendard,sans-serif;background-color:#f9fafb;color:#333}footer,header{background-color:#7e78dd;color:white;padding:15px;text-align:center}main{flex:1 1;padding:20px}button{padding:10px 20px;background-color:#7e78dd;border:none;border-radius:10px;cursor:pointer;font-size:16px;transition:background .3s}a,button{color:white}a{text-decoration:none}a:hover{text-decoration:underline}.start-page{text-align:center}.start-page h3{color:firebrick}.entry-image-style{width:100%;max-width:300px;cursor:pointer;margin:15px 0 10px;border-radius:15px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.2)}.entry-image-style:hover{transform:scale(1.05)}.start-page p{font-size:16px;font-weight:600;color:seagreen}.accordion-container{max-width:550px;border:1px solid #ccc;border-radius:20px;overflow:hidden;margin:25px auto 10px;justify-content:center}.accordion-item{border-bottom:1px solid #eee}.accordion-item:last-child{border-bottom:none}.accordion-title{background-color:#f1f1f1;color:#333;cursor:pointer;padding:15px 20px;width:100%;text-align:left;font-size:18px;transition:background-color .3s ease;display:flex;justify-content:space-between;align-items:center}.accordion-title:hover{background-color:#ddd}.accordion-title.open{background-color:#e9e9e9}.accordion-title span{font-size:20px;margin-right:35px}.accordion-content{background-color:white;overflow:hidden;max-height:0;transition:max-height .3s ease-out}.accordion-inner{padding:5px 20px}.accordion-content.open{max-height:500px;transition:max-height .3s ease-in}.accordion-content p{font-size:16px;text-align:left;line-height:1.5;color:#555}.accordion-content b{font-weight:700;color:#61a0ff}.em-green{font-weight:500;color:#2ea821!important}.accordion-content .em-red{color:#ff4f4f}.main-description-list{list-style:none;text-align:left;line-height:1.3;margin:0;padding:0}.main-description-list li{position:relative;margin-bottom:10px;margin-left:20px}.main-description-list li:before{content:"🔸";position:absolute;left:-25px;top:0;color:#007bff}.terms-section{padding:10px;text-align:left}.terms-section h1{font-size:2em;margin-bottom:35px;color:#333;text-align:center}.terms-section li{margin-bottom:15px;font-size:1.1em;color:#555;line-height:1.5}.terms-section p{margin:30px 0 0 23px;line-height:1.5;font-size:1.05em;font-weight:700}.terms-section a{color:mediumslateblue}.privacy-section{padding:10px;text-align:left}.privacy-section h1{font-size:2em;margin-bottom:40px;color:#333;text-align:center}.privacy-section li{margin-bottom:15px;font-size:1.1em;color:#555;line-height:1.5}.privacy-section p{margin:30px 0 0 23px;line-height:1.5;font-size:1em;font-weight:700;font-style:italic;color:dimgray}.privacy-section a{color:mediumslateblue}.question-card{background:radial-gradient(circle at top left,#e0eaff,#f9f1ff);border-radius:24px;padding:30px 40px;max-width:650px;margin:30px auto;box-shadow:0 10px 25px rgba(0,0,0,.15);border:4px solid #a78bfa;position:relative}@keyframes fireGlow{0%,to{box-shadow:0 0 25px rgba(255,100,0,.6),0 0 50px rgba(255,0,0,.3);border-color:#ff5722}50%{box-shadow:0 0 35px rgba(255,140,0,.8),0 0 60px rgba(255,0,0,.5);border-color:#ff7043}}.question-card.tie-mode{animation:fireGlow 1.5s ease-in-out infinite;background:radial-gradient(circle at top left,#ffe0e0,#fff1f1);border-color:#ff5722}.question-option{display:block;width:100%;margin:15px 0;padding:14px;font-size:17px;font-weight:700;color:white;background:linear-gradient(135deg,#7c3aed,#6366f1);border-radius:16px;border:none;box-shadow:0 6px 15px rgba(99,102,241,.3);transition:all .2s ease-in-out;text-align:center}.question-option:hover{transform:scale(1.03);background:linear-gradient(135deg,#6d28d9,#4f46e5)}.question-card.tie-mode .question-option{background:linear-gradient(135deg,#ef4444,#f97316);box-shadow:0 8px 20px rgba(255,100,0,.4)}.question-card.tie-mode .question-option:hover{background:linear-gradient(135deg,#dc2626,#ea580c)}.progress-wrapper{height:12px;width:100%;background-color:#e0e7ff;border-radius:8px;overflow:hidden;margin-bottom:12px}.progress-bar{height:100%;background:linear-gradient(90deg,#7e78dd,#6366f1);transition:width .3s ease}.question-card.tie-mode .progress-bar{background:linear-gradient(90deg,#f97316,#dc2626)}.question-index{font-size:14px;font-weight:700;margin-bottom:16px;color:#6b7280}.result-section{text-align:center;padding:10px;min-height:405px}.loading-wrapper{margin:20px 0}.rotating-card-container{display:flex;justify-content:center;align-items:center;margin-top:50px;margin-bottom:50px;perspective:1000px}.rotating-card{width:200px;height:300px;transform:rotateY(0deg) rotate(-20deg);animation:spin-card 1.5s linear infinite,sparkle 3s ease-in-out infinite;transform-style:preserve-3d;box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 30px rgba(255,255,255,.2);border-radius:12px}@keyframes spin-card{0%{transform:rotateY(0deg) rotate(-20deg)}to{transform:rotateY(1turn) rotate(-20deg)}}.back-button,.submit-button{padding:12px 24px;border:none;border-radius:30px;font-size:16px;cursor:pointer;transition:background .2s,transform .2s;display:inline-flex;align-items:center;justify-content:center;min-width:150px}.back-button{background-color:#f0f0f0;color:#555;font-weight:700;box-shadow:0 4px 10px rgba(110,72,170,.3);margin-top:10px}.back-button:hover{transform:scale(1.05)}.back-button:disabled{background-color:#e5e7eb;color:#9ca3af;border-color:#d1d5db;cursor:not-allowed;opacity:.6;transform:none}.submit-button{background:linear-gradient(135deg,#9d50bb,#6e48aa);color:white;font-weight:700;box-shadow:0 4px 10px rgba(110,72,170,.3);margin-left:20px}.submit-button:hover{transform:scale(1.05)}.submit-button:disabled{background:#d1d5db;color:#9ca3af;cursor:not-allowed;opacity:.6;transform:none}.character-card-parent{display:flex;justify-content:center}.character-card{padding:10px 30px 20px;border:4px solid ghostwhite;background:radial-gradient(circle,#f9f1ff 0,#e0eaff 100%);border-radius:24px;box-shadow:0 12px 25px rgba(0,0,0,.2);text-align:center;font-family:Karla,sans-serif;position:relative;overflow:hidden;max-width:650px}.character-type{position:absolute;top:15px;left:15px;padding:5px 18px;background:linear-gradient(135deg,#f5c400,#fbe58a,#e6be00);color:#fff;border-radius:20px;font-family:Rubik,sans-serif;font-size:1.4rem;text-align:center;box-shadow:0 0 14px rgba(255,215,0,.45),0 0 28px rgba(255,255,255,.25);background-size:300% 300%;animation:shimmerFlow 2s ease-in-out infinite}@keyframes shimmerFlow{0%{background-position:0 50%;box-shadow:0 0 5px rgba(255,215,0,.4)}50%{background-position:100% 50%;box-shadow:0 0 20px rgba(255,215,0,.7),0 0 40px rgba(255,255,255,.5)}to{background-position:0 50%;box-shadow:0 0 5px rgba(255,215,0,.4)}}.character-card img{width:100%;max-width:350px;height:100%;max-height:500px;border-radius:16px;border:2px solid #dfe6e9;box-shadow:0 5px 10px rgba(0,0,0,.1);margin-bottom:10px}.character-card h2{font-size:26px;word-break:keep-all;white-space:normal}.character-card h3,.stats-section{text-align:left}.stats-section{font-family:Karla,sans-serif;color:#333}.stats-card{background-color:#ffffff;border:2px dashed #d3dae6;padding:5px 12px 12px 17px;border-radius:16px;box-shadow:0 6px 12px rgba(0,0,0,.05);text-align:left}.stats-title{font-size:19px;margin:10px 0;color:#444;display:flex;align-items:center}.stats-card span,.stats-title{font-weight:700}.stats-card p{margin:10px 0 0;line-height:1.3}.bold-name{line-height:1.5}.sub-note{margin-top:15px;color:#6f6f6f;font-size:.95em}.first-color{color:#257ae7}.second-color{color:#f49419}.stats-characteristics{font-size:19px;margin:15px 0 -5px}.character-card ul{background:#ffffff;padding:15px 12px 12px;border-radius:16px;list-style-type:none;border:2px dashed #cfd3d6;max-width:650px;margin-bottom:23px}.character-card li:before{content:"🎈";margin-right:5px}.character-card li{text-align:left;margin-bottom:5px}.match-section{display:flex;justify-content:space-between;gap:25px;margin-bottom:23px}.match-section h4{font-size:20px;margin:5px 0 10px}.match-section>div:first-child h4{color:#5993ff}.match-section>div:last-child h4{color:#ff77a9}.match-card{flex:1 1;min-width:0;box-sizing:border-box;padding:12px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);text-align:center;position:relative;cursor:pointer}@keyframes paw-wobble{0%,to{transform:rotate(0deg)}50%{transform:rotate(22deg)}}.match-type{position:absolute;top:6px;left:5px;padding:5px 10px;border-radius:20px;font-family:Rubik,sans-serif;font-size:.9rem;text-align:center;background-size:300% 300%;animation:shimmerFlow2 2s ease-in-out infinite;transition:all .3s ease-in-out;overflow:hidden;color:#fff}.match-card.good .match-type{background:linear-gradient(135deg,#4a7eff,#7aaaff,#5c8fff);box-shadow:0 0 14px rgba(74,126,255,.7),0 0 28px rgba(74,126,255,.4);animation:shimmerFlowGood 2s ease-in-out infinite}.match-card.bad .match-type{background:linear-gradient(135deg,#ff5c7e,#ff86a0,#ff728f);box-shadow:0 0 14px rgba(255,92,126,.7),0 0 28px rgba(255,92,126,.4);animation:shimmerFlowBad 2s ease-in-out infinite}@keyframes shimmerFlowGood{0%{background-position:0 50%;box-shadow:0 0 5px rgba(74,126,255,.4)}50%{background-position:100% 50%;box-shadow:0 0 20px rgba(74,126,255,.7)}to{background-position:0 50%;box-shadow:0 0 5px rgba(74,126,255,.4)}}@keyframes shimmerFlowBad{0%{background-position:0 50%;box-shadow:0 0 5px rgba(255,92,126,.4)}50%{background-position:100% 50%;box-shadow:0 0 20px rgba(255,92,126,.7)}to{background-position:0 50%;box-shadow:0 0 5px rgba(255,92,126,.4)}}.match-card.good{background:#f0f8ff;border:2px outset #5993ff}.match-card.good:before{content:"❤️️";position:absolute;top:-2px;right:0;font-size:26px;animation:paw-wobble 1s ease-in-out infinite}.match-card.bad{background:#fff5f8;border:2px outset #ff77a9}.match-card.bad:before{content:"‍💔";position:absolute;top:-1px;right:0;font-size:26px;animation:paw-wobble 1s ease-in-out infinite}.match-name{font-size:15px;font-weight:700;display:inline-block;margin-top:5px}.match-card img{width:100%;max-width:270px;height:auto;border-radius:12px;object-fit:cover;margin-top:13px;margin-bottom:0;box-shadow:0 2px 6px rgba(0,0,0,.1)}.match-card .match-text{display:inline-block}.match-card .match-back,.match-card.flipped .match-text{display:none}.match-card.flipped .match-back{display:inline-block}.match-back{width:270px;margin:0 0 -15px}.match-back p{font-size:14px;font-weight:700;margin:6px 0 0}.match-header h4{margin-top:15px;margin-bottom:5px}.characteristics-list{background:#ffffff;padding:12px;border-radius:16px;list-style-type:none;border:2px dashed #cfd3d6;max-width:220px;width:100%;margin:13px auto 0;text-align:left;box-sizing:border-box}.characteristics-list li:before{content:"🎈";margin-right:6px}.characteristics-list li{margin-bottom:5px;font-size:13px}.match-card.flipped img{display:none}.match-card.flipped .match-header{display:block}.match-card.flipped .match-text{display:inline-block}.button-group{display:flex;gap:23px;justify-content:center;align-items:center;flex-wrap:wrap}.share-btn{display:inline-block;cursor:pointer;color:white;border-radius:50%;width:50px}.share-btn:disabled{opacity:.5;cursor:not-allowed}.share-btn svg{margin-top:3px;margin-left:-5px}.share-btn.link-copy{background-color:#3acc6d}.share-btn.link-copy:hover{background-color:#13bf3a}.share-btn.kakao{background-color:#f8cc5f}.share-btn.kakao:hover{background-color:#f8c411}.share-btn.facebook{background-color:#1a7aea}.share-btn.facebook:hover{background-color:#0f6bd6}.share-btn.twitter{background-color:#2b2a2a}.share-btn.twitter:hover{background-color:#1a1a1a}.home-link{display:inline-block;font-size:19px;font-weight:700;background-color:#7e76ff;text-decoration:none;padding:10px 20px;border-radius:30px;transition:all .3s}.home-link:hover{background-color:#665bfb}.trait-bar-container{width:100%;max-width:650px;display:flex;flex-direction:column;place-self:center}.trait-bar-wrapper{width:100%;max-width:650px}.trait-bar-description{display:flex;justify-content:space-between;margin-bottom:6px;font-size:15px;font-weight:600}.trait-bar-description .desc-left,.trait-bar-description .desc-right{font-size:14px;margin-top:8px}.trait-bar-description .desc-element{text-align:center;color:#666;font-size:14px;margin-top:5px}.trait-bar-inner{display:flex;height:28px;border-radius:10px;margin-bottom:8px;position:relative}.trait-bar-left{background:linear-gradient(180deg,#d8ccff,#b8a8f2)}.trait-bar-left,.trait-bar-right{box-shadow:inset 0 2px 4px rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.1);transition:width .6s ease;position:relative;border-radius:12px}.trait-bar-right{background:linear-gradient(180deg,#ffd7c2,#ffb39b)}.bar-text{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;white-space:nowrap;font-size:13px;z-index:1}.bar-text strong{color:#000;margin-right:10px;margin-left:10px}.bar-text span{color:#666}.bar-text-left,.bar-text-right{font-size:12px;color:#666}.bar-text-right{right:1px}div .tooltip{position:relative;cursor:help;display:inline-block}.tooltip-text{visibility:hidden;background-color:#333;padding:4px 8px;border-radius:10px;position:absolute;z-index:10;bottom:180%;font-size:11px;white-space:nowrap;transition:opacity .2s;cursor:help}span .tooltip-text{color:#ffffff}.bar-text-left strong .tooltip-text{left:0;transform:translateX(-5%)}.bar-text-right strong .tooltip-text{right:0;transform:translateX(5%)}.tooltip:hover .tooltip-text{visibility:visible}.loading-container{display:flex;justify-content:center;align-items:center;height:80vh}.spinner{border:4px solid #f3f3f3;border-top-color:#7e78dd;border-radius:50%;width:40px;height:40px;animation:spin-spinner 1s linear infinite}@keyframes spin-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.start-page h1{font-size:20px}.start-page h3{font-size:12px}.start-page p{font-size:13px}p{font-size:12px}header h1{font-size:24px}.entry-image-style{margin:25px 0 10px}.accordion-container{max-width:300px}.accordion-title{font-size:14px}.accordion-content{font-size:13px}.terms-section h1{font-size:20px;margin:10px 0 15px}.terms-section ol{padding:10px}.terms-section li{font-size:13px}.terms-section p{margin:-15px 0 0;font-size:13px}.privacy-section h1{font-size:18px;margin:10px 0 20px}.privacy-section ol{padding:10px}.privacy-section li{margin-bottom:10px;font-size:13px}.privacy-section p{margin:-15px 0 0;font-size:12px}.footer-menu{padding:0;font-size:12px}.question-card{padding:15px}.question-card h2{font-size:14px}.question-option{margin:12px 0;font-size:12px}.back-button,.submit-button{padding:10px;font-size:12px;min-width:100px;margin-top:0}.question-index{font-size:12px}.character-card{padding:10px 20px 20px}.character-type{top:9px;left:10px;font-size:13px;padding:4px 9px}.character-card img{width:100%;height:100%}.character-card h1{font-size:24px}.character-card h2{font-size:20px}.trait-bar-description{font-size:13px}.trait-bar-inner{margin-bottom:5px}.trait-bar-description .desc-element,.trait-bar-description .desc-left,.trait-bar-description .desc-right{font-size:11px}.stats-card{padding:8px 7px 10px 12px}.stats-card p{font-size:11px;margin-top:4px}.sub-note{font-size:10px}.character-card h3{font-size:14px}.character-card ul{padding:10px}.character-card li{font-size:11px}.match-section{gap:15px}.match-section h4{font-size:13px;margin-top:8px;margin-bottom:2px}.match-type{top:5px;left:5px}.match-card.good{border:1px outset #5993ff}.match-card.good:before{font-size:18px;margin-top:1px;right:2px}.match-card.good .match-type{padding:2px 6px;font-size:8px}.match-card.good .match-name{font-size:10px}.match-card img{height:-moz-fit-content;height:fit-content;margin-top:8px}.match-card.bad{border:1px outset #ff77a9}.match-card.bad:before{font-size:18px;margin-top:1px;right:2px}.match-card.bad .match-type{padding:2px 6px;font-size:9px}.match-card.bad .match-name{font-size:10px}.match-back{width:100%;box-sizing:border-box;margin-bottom:-18px}.match-back p{font-size:8px}ul.characteristics-list{border:1px dashed #cfd3d6}.characteristics-list li:before{content:"🎈";margin-right:4px}.characteristics-list li{margin-bottom:5px;font-size:8px}.button-group{gap:15px;flex-wrap:wrap}.share-btn{padding:6px 8px;white-space:pre;width:35px}.share-btn svg{width:14px;height:14px;margin-top:3px;margin-left:0}.home-link{font-size:12px;padding:8px 10px 7px}}