.op-mbti{--mb-ink:#302b42;--mb-purple:#655090;color:var(--mb-ink);scroll-margin-top:90px}.op-mbti *{box-sizing:border-box}.op-mbti [hidden]{display:none!important}.op-mbti-shell{background:#fffdfa;border:1px solid #ddd5e6;border-radius:24px;overflow:hidden;box-shadow:0 6px 24px #4633500a}.op-mbti-summary{display:flex;align-items:center;gap:16px;padding:24px;background:linear-gradient(120deg,#f2ecfa,#fff5eb);cursor:pointer;list-style:none}.op-mbti-summary::-webkit-details-marker{display:none}.op-mbti-summary>span:nth-child(2){flex:1;min-width:0}.op-mbti-summary small{display:block;font-size:12px;color:#776285}.op-mbti-summary strong{display:block;font-family:Cafe24Ssurround,sans-serif;font-size:24px;margin:7px 0;word-break:keep-all;overflow-wrap:anywhere}.op-mbti-summary em{display:block;font-size:13px;font-style:normal;color:#75677b}.op-mbti-summary>i{font-style:normal;font-size:25px;transition:transform .2s}.op-mbti-shell[open] .op-mbti-summary>i{transform:rotate(180deg)}.op-mbti-mark{display:grid;grid-template-columns:repeat(2,26px);gap:3px;flex-shrink:0;transform:rotate(-7deg)}.op-mbti-mark b{display:grid;place-items:center;height:27px;font-size:16px;background:#e3d6f4;color:#695383;border-radius:7px}.op-mbti-mark b:nth-child(2),.op-mbti-mark b:nth-child(3){background:#f6ddd0;color:#91634b}.op-mbti-body{padding:24px}.op-mbti-status,.op-mbti-small{font-size:13px;line-height:1.8;color:#766b7d;word-break:keep-all;overflow-wrap:anywhere}.op-mbti-status:empty{display:none}.op-mbti-list-label{margin:0 0 14px;font-size:14px;font-weight:700}.op-mbti-friends{display:flex;flex-wrap:wrap;gap:8px;max-height:260px;overflow-y:auto;padding:4px;margin-bottom:22px}.op-mbti-friends button{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:48px;max-width:100%;padding:10px 13px;background:#fff;color:var(--mb-ink);border:1px solid #ddd6e6;border-radius:13px;font:inherit;font-size:13px;cursor:pointer;overflow-wrap:anywhere}.op-mbti-friends button[aria-pressed=true]{background:#eee5f8;border-color:#8b74ab;box-shadow:inset 0 0 0 1px #8b74ab}.op-mbti-friends b{color:var(--mb-purple);letter-spacing:.04em}.op-mbti-friends small{background:#fff;padding:2px 5px;border-radius:6px}.op-mbti-card{--mb-accent:#69528d;--mb-tint:#f0e9f8;padding:26px;border:1px solid #e1dce7;border-radius:20px;background:linear-gradient(155deg,var(--mb-tint),#fff 45%)}.op-mbti-green{--mb-accent:#397453;--mb-tint:#e8f3e8}.op-mbti-blue{--mb-accent:#376d8b;--mb-tint:#e7f0f8}.op-mbti-amber{--mb-accent:#8a632c;--mb-tint:#faf0dc}.op-mbti-eyebrow{color:var(--mb-accent);font-size:13px;font-weight:700;overflow-wrap:anywhere}.op-mbti-letters{display:flex;gap:9px;margin:22px 0}.op-mbti-letters span{display:grid;place-items:center;width:clamp(40px,10vw,70px);height:clamp(52px,13vw,86px);color:var(--mb-accent);background:#ffffffc9;border:1px solid #ffffff;box-shadow:0 4px 10px #302b4208;border-radius:12px;font-size:clamp(29px,7vw,48px);font-weight:800}.op-mbti-subtype-badge{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 20px;color:var(--mb-accent)}.op-mbti-subtype-badge b{font-size:21px;letter-spacing:.04em}.op-mbti-subtype-badge span{font-size:12px;padding:5px 9px;border-radius:8px;background:var(--mb-tint);border:1px solid currentColor}.op-mbti-subtype{margin-top:24px}.op-mbti-subtype h4{font-size:16px;margin-bottom:8px}.op-mbti-card h3{font-family:Cafe24Ssurround,sans-serif;font-size:26px;line-height:1.5;margin:0 0 12px;word-break:keep-all;overflow-wrap:anywhere}.op-mbti-card p{font-size:14px;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}.op-mbti-card .op-mbti-notice{font-size:12px;color:#72687c;line-height:1.8;padding:13px 0;border-bottom:1px solid #ded8e5}.op-mbti-card .op-mbti-input-note{font-size:12px;background:#fff7e8;border-radius:10px;padding:12px;color:#775c2e}.op-mbti-moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:22px 0 30px}.op-mbti-moments strong{color:var(--mb-accent);font-size:13px}.op-mbti-moments p{margin:7px 0}.op-mbti-axis-heading h4{font-size:17px;margin-bottom:6px}.op-mbti-axis-heading p{font-size:12px;color:#766b7d}.op-mbti-axes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.op-mbti-axes section{min-width:0;border:1px solid #e7e1eb;background:#ffffffa8;border-radius:14px;padding:16px}.op-mbti-axis-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:space-between}.op-mbti-axis-top strong{font-size:13px}.op-mbti-axis-top>span{font-size:11px;color:var(--mb-accent)}.op-mbti-axis-labels{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;margin:18px 0 12px;line-height:1.7}.op-mbti-axis-labels>span{flex:1}.op-mbti-axis-labels>span:last-child{text-align:right}.op-mbti-axis-labels b{font-size:17px}.op-mbti-axis-bar{position:relative;height:9px;margin:8px 8px 16px;background:linear-gradient(90deg,var(--mb-tint),#e3dbe9);border-radius:20px}.op-mbti-axis-bar:after{content:"";position:absolute;left:50%;top:-3px;width:1px;height:15px;background:#b3a7c0}.op-mbti-axis-bar i{position:absolute;z-index:1;top:-3px;left:var(--position);transform:translate(-50%);width:15px;height:15px;border-radius:50%;border:3px solid #fff;background:var(--mb-accent);box-shadow:0 0 0 1px var(--mb-accent)}.op-mbti-axes p{font-size:12px;color:#6e6379;margin-bottom:0}.op-mbti-alternative{margin:22px 0;background:var(--mb-tint);border-radius:14px;padding:17px}.op-mbti-alternative>span,.op-mbti-alternative small{display:block;font-size:12px;line-height:1.8}.op-mbti-alternative strong{font-size:22px;color:var(--mb-accent);display:block;margin:6px 0}.op-mbti-alternative p{margin:0}.op-mbti-method{border-top:1px solid #e2dce8;margin-top:20px}.op-mbti-method summary{min-height:48px;padding:16px 0;font-size:13px;cursor:pointer}.op-mbti-method p{font-size:12px;color:#6d6477}.op-mbti-method strong{font-size:13px}.op-mbti-weights p{margin:3px 0}.op-mbti-comparison{padding:24px;border:1px solid #e1dce7;border-radius:20px;margin-top:18px;background:#fff}.op-mbti-comparison h3{font-size:19px;line-height:1.6;word-break:keep-all;margin:0 0 18px}.op-mbti-comparison label{font-size:13px;display:block}.op-mbti-comparison select{display:block;margin-top:8px;width:100%;min-width:0;height:48px;padding:10px;border:1px solid #d4c8df;border-radius:10px;background:#fff;color:var(--mb-ink);font:inherit}.op-mbti-versus{display:flex;align-items:center;justify-content:space-between;text-align:center;gap:10px;padding:24px 0}.op-mbti-versus span{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere}.op-mbti-versus b{display:block;font-size:clamp(16px,4.8vw,24px);color:var(--mb-purple);margin-top:8px;white-space:nowrap}.op-mbti-versus i{font-style:normal;color:#9e8eb0}.op-mbti-compare-list{list-style:none;margin:0;padding:0}.op-mbti-compare-list li{border-top:1px solid #eee7f2;padding:14px 0}.op-mbti-compare-list li>div{display:flex;flex-wrap:wrap;gap:7px;justify-content:space-between;font-size:13px}.op-mbti-compare-list small{font-size:11px;color:#786488;padding-left:5px}.op-mbti-compare-list p{font-size:13px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}.op-mbti-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.op-mbti-actions button{flex:1;min-width:180px}.op-mbti .ohaeng-primary{background:var(--mb-purple);color:#fff;border-color:var(--mb-purple)}.op-mbti .ohaeng-secondary{color:var(--mb-purple);border-color:#d4c8df;background:#fff}.op-mbti-join{width:100%;margin-top:14px}.op-mbti button:disabled{opacity:.55}.op-mbti :is(button,summary,select):focus-visible{outline:3px solid #9d75c2;outline-offset:3px}@media(max-width:700px){.op-mbti-summary{padding:20px 16px;gap:12px}.op-mbti-summary strong{font-size:21px}.op-mbti-body{padding:20px 14px}.op-mbti-card,.op-mbti-comparison{padding:20px 16px}.op-mbti-moments,.op-mbti-axes{grid-template-columns:1fr}.op-mbti-card h3{font-size:23px}.op-mbti-summary em{font-size:12px}}@media(prefers-reduced-motion:reduce){.op-mbti-summary>i{transition:none}}