:root{--paper: #ffffff;--mist: #faf6f8;--ink: #2b1b2f;--ink-soft: #5a4a5e;--blush: #f7dce5;--rose: #e26d93;--rose-deep: #b8456c;--pink: #ec6a9c;--pink-soft: #ffe3ee;--line: #eadfe4;--serif: "Gowun Batang", "AppleMyungjo", "Nanum Myeongjo", serif;--sans: "Toss Product Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;word-break:keep-all}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--rose);outline-offset:3px}.icon{flex:none}.app{min-height:100vh;max-width:480px;margin:0 auto}.screen{min-height:100vh;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.bottom-cta{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:32px}.primary-button{width:100%;min-height:56px;padding:0 20px;border:0;border-radius:14px;background:var(--pink);color:#fff;font-size:17px;font-weight:700;transition:background .15s,transform .1s}.primary-button:active{background:#d95a8b;transform:scale(.99)}.ai-notice{margin:0;text-align:center;font-size:14px;color:var(--ink-soft)}.text-button{align-self:center;background:none;border:0;padding:10px 4px;font-size:16px;font-weight:600;color:var(--ink)}.outline-button{width:100%;padding:15px;border:1.5px solid var(--pink);color:var(--rose-deep);border-radius:14px;background:var(--paper);font-size:16px;font-weight:700}.icon-button{display:grid;place-items:center;width:40px;height:40px;margin-left:-10px;border:0;border-radius:50%;background:none;color:var(--ink)}.body-text{margin:16px 0 0;font-size:16px;line-height:1.75;color:var(--ink-soft)}.start-body{margin-top:18vh}.start-from{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--rose-deep)}.start-title{margin:0;font-family:var(--serif);font-size:34px;line-height:1.4;font-weight:700;letter-spacing:-.02em}.start-sub{margin:20px 0 0;max-width:300px;font-size:17px;line-height:1.7;color:var(--ink-soft)}.quiz-top{display:flex;justify-content:space-between;align-items:center}.quiz-count{font-family:var(--serif);font-size:20px;font-weight:700}.quiz-total{font-size:16px;color:var(--ink-soft)}.quiz-progress{height:2px;margin-top:12px;background:var(--line)}.quiz-progress span{display:block;height:100%;background:var(--rose);transition:width .3s ease}.quiz-art{display:block;width:240px;height:240px;margin:24px auto 0;object-fit:cover;border-radius:24px;animation:art-in .35s ease}@keyframes art-in{0%{opacity:0}}.quiz-question{margin:12px 0 28px;font-family:var(--serif);font-size:27px;line-height:1.5;font-weight:700;letter-spacing:-.02em}.quiz-options{border-top:1px solid var(--line)}.option{display:block;width:100%;padding:22px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font-size:18px;line-height:1.55;color:var(--ink);transition:background .15s}.option:active,.option.picked{background:var(--pink-soft);color:var(--rose-deep);font-weight:700}.extra-title{margin:20px 0 10px;font-family:var(--serif);font-size:27px;font-weight:700}.extra-sub{margin:0 0 28px;font-size:16px;line-height:1.7;color:var(--ink-soft)}.choice-group{margin-bottom:28px}.choice-label{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:17px;font-weight:700}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:11px 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);font-size:16px;color:var(--ink)}.chip.selected{border-color:var(--pink);background:var(--pink-soft);color:var(--rose-deep);font-weight:700}.picker-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);font-size:17px;font-weight:600}.picker-button.open{border-color:var(--pink)}.picker-button.open .icon{transform:rotate(180deg)}.picker-text.empty{color:var(--ink-soft);font-weight:500}.picker-list{list-style:none;margin:8px 0 0;padding:6px;max-height:320px;overflow-y:auto;border:1.5px solid var(--pink);border-radius:14px}.picker-option{width:100%;padding:13px 12px;border:0;border-radius:10px;background:none;text-align:left;font-family:var(--serif);font-size:17px;color:var(--ink)}.picker-option.selected{background:var(--pink-soft);color:var(--rose-deep);font-weight:700}.result{padding-top:20px}.reveal{perspective:1200px}.reveal-card{position:relative;height:400px;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.2,1)}.reveal-card.opened{transform:rotateY(180deg)}.reveal-face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;backface-visibility:hidden}.reveal-back{display:grid;place-items:center;background:var(--pink-soft);border:1px solid var(--blush)}.reveal-seal{width:64px;height:64px;border-radius:50%;background:var(--pink);box-shadow:inset 0 0 0 6px #d8548a}.reveal-front{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--mist);border:1px solid var(--line)}.reveal-text{padding:32px 28px}.reveal-card.with-art{height:auto;aspect-ratio:1 / 1.62}.reveal-card.with-art .reveal-front{justify-content:flex-start}.reveal-card.with-art .reveal-text{padding:22px 24px 40px}.reveal-scene{position:relative;width:100%;aspect-ratio:1;-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)}.reveal-scene img,.reveal-scene video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.reveal-scene video{opacity:0;transition:opacity .4s ease}.reveal-scene video.playing{opacity:1}.reveal-label{margin:0;font-size:16px;font-weight:600;color:var(--rose-deep)}.reveal-name{margin:10px 0 0;font-family:var(--serif);font-size:40px;line-height:1.3;font-weight:700;letter-spacing:-.03em}.reveal-tagline{margin:18px 0 0;font-family:var(--serif);font-size:18px;line-height:1.75;color:var(--ink-soft)}.reveal-rarity{margin:22px 0 0;font-size:15px;font-weight:700;color:var(--rose-deep)}.ai-badge{position:absolute;right:18px;bottom:16px;font-size:12px;color:var(--ink-soft)}.section{padding:36px 0;border-bottom:1px solid var(--line)}.section-title{margin:0;font-family:var(--serif);font-size:22px;font-weight:700}.pair{margin-top:28px;padding:28px 24px;border:1.5px solid var(--pink);border-radius:20px;background:#fffafc;text-align:center}.pair-names{margin:0;font-family:var(--serif);font-size:19px;line-height:1.6;font-weight:700;display:flex;flex-direction:column}.pair-amp{margin:2px 0;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft)}.pair-title{margin:20px 0 0;font-family:var(--serif);font-size:28px;line-height:1.4;font-weight:700;color:var(--rose-deep);letter-spacing:-.02em}.pair-score{margin:10px 0 0;font-size:15px;color:var(--ink-soft)}.pair-score strong{font-family:var(--serif);font-size:22px;color:var(--ink)}.pair-notes{margin:18px 0 0;text-align:left}.pair-notes>div+div{margin-top:14px}.pair-notes dt{font-size:14px;font-weight:700;color:var(--rose-deep)}.pair-notes dd{margin:4px 0 0;font-size:16px;line-height:1.7}.pair-line{margin:16px 0 0;font-family:var(--serif);font-size:18px;font-weight:700}.pair .body-text{margin-bottom:4px}.pair .outline-button{margin-top:22px}.axis-list{display:flex;flex-direction:column;gap:20px;margin-top:22px}.axis-label{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:17px;font-weight:700}.axis-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--mist);border:1px solid var(--line)}.axis-pole{padding:12px 8px;border-radius:10px;text-align:center;font-size:16px;color:var(--ink-soft)}.axis-pole.on{background:var(--pink);color:#fff;font-weight:700}.situations{margin:20px 0 0}.situations>div+div{margin-top:18px}.situations dt{font-size:15px;font-weight:700;color:var(--rose-deep)}.situations dd{margin:6px 0 0;font-family:var(--serif);font-size:17px;line-height:1.75}.answer-stats{list-style:none;margin:18px 0 0;padding:0}.answer-stats li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}.answer-stats li:last-child{border-bottom:0}.answer-ratio{flex:none;font-family:var(--serif);font-size:18px;font-weight:700}.answer-stats li.rare .answer-ratio{color:var(--rose-deep)}.match-list{margin:18px 0 0;padding:0;list-style:none;counter-reset:rank}.match-list li{counter-increment:rank;display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.match-list li:before{content:counter(rank);font-family:var(--serif);font-size:15px;color:var(--rose-deep)}.match-body{flex:1;display:flex;flex-direction:column;gap:2px}.match-relation{font-size:14px;color:var(--ink-soft)}.match-name{font-family:var(--serif);font-size:19px;font-weight:700}.match-score{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--rose-deep)}.match-score:after{content:"점";margin-left:2px;font-size:14px}.worst{margin:18px 0 0;font-size:16px;line-height:1.7;color:var(--ink-soft)}.worst strong{color:var(--ink)}.group-list{list-style:none;margin:14px 0 0;padding:0}.group-list li{display:flex;justify-content:space-between;padding:10px 0;font-size:16px}.group-list li span:last-child{font-family:var(--serif);font-weight:700}.share-area{display:flex;flex-direction:column;gap:10px;padding:36px 0 12px}@media(prefers-reduced-motion:reduce){.reveal-card,.quiz-progress span{transition:none}}.today{margin-top:28px;padding:20px 22px;border-radius:16px;background:var(--pink-soft)}.today-label{margin:0;font-size:14px;font-weight:700;color:var(--rose-deep)}.today-line{margin:8px 0 0;font-family:var(--serif);font-size:19px;line-height:1.65;font-weight:700}.start-body .today{margin-top:36px}.more-button{margin-top:18px}.sub-header{display:flex;align-items:center;gap:4px}.sub-title{margin:0;font-family:var(--serif);font-size:22px;font-weight:700}.sub-lead{margin:14px 0 8px;font-size:16px;line-height:1.7;color:var(--ink-soft)}.thumb{flex:none;display:block;border-radius:12px;object-fit:cover;background:var(--pink-soft)}.compat-list{list-style:none;margin:8px 0 0;padding:0}.compat-list>li{border-bottom:1px solid var(--line)}.compat-row{width:100%;display:flex;align-items:center;gap:14px;padding:14px 0;border:0;background:none;text-align:left}.compat-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}.compat-name{font-family:var(--serif);font-size:18px;font-weight:700}.compat-relation{font-size:14px;color:var(--ink-soft)}.compat-score{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--rose-deep)}.badge{margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--pink-soft);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--rose-deep);vertical-align:2px}.compat-detail{padding:0 0 18px 70px}.compat-detail .pair-line{margin:0;text-align:left}.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.type-tile{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;text-align:left}.type-tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.type-tile span{font-family:var(--serif);font-size:16px;font-weight:700}.detail-scene{position:relative;margin-top:16px;aspect-ratio:1;border-radius:20px;overflow:hidden}.detail-scene img,.detail-scene video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.detail-tagline{margin:20px 0 0;font-family:var(--serif);font-size:19px;line-height:1.7;font-weight:700}.detail-pair{margin-top:24px;padding:20px 22px;border:1.5px solid var(--pink);border-radius:16px}.detail-pair-label{margin:0;font-size:14px;color:var(--ink-soft)}.detail-pair-name{margin:4px 0 0;font-family:var(--serif);font-size:21px;font-weight:700;color:var(--rose-deep)}.detail-pair .body-text{margin-top:8px}.seg{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border-radius:999px;background:var(--mist);border:1px solid var(--line)}.seg button{padding:8px 18px;border:0;border-radius:999px;background:none;font-size:15px;color:var(--ink-soft)}.seg button.on{background:var(--pink);color:#fff;font-weight:700}.rec-list{list-style:none;margin:14px 0 0;padding:0}.rec-list li{display:flex;flex-direction:column;gap:4px;padding:13px 0;border-bottom:1px solid var(--line)}.rec-list li:last-child{border-bottom:0}.rec-list strong{font-family:var(--serif);font-size:17px}.rec-artist{margin-left:6px;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft)}.rec-list li>span{font-size:15px;line-height:1.6;color:var(--ink-soft)}