/* ── MBTI 공통 CSS ── */

/* 공유 버튼 */
.share-btn {
    display:inline-flex; flex-direction:column; align-items:center; gap:5px;
    padding:12px 18px; border-radius:14px; border:1.5px solid #e5e7eb;
    background:#fff; cursor:pointer; font-size:11px; font-weight:700;
    color:#374151; transition:all .15s; min-width:72px; user-select:none; text-decoration:none;
}
.share-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.share-btn.kakao { background:#FEE500; border-color:#FEE500; color:#191600; }
.share-btn.kakao:hover { background:#fada00; }
.share-btn.twitter { background:#000; border-color:#000; color:#fff; }
.share-btn.twitter:hover { background:#1a1a1a; }

/* 복사 토스트 */
#copyToast {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(10px);
    background:#1e293b; color:#fff; font-size:13px; font-weight:600;
    padding:10px 22px; border-radius:99px; pointer-events:none;
    opacity:0; transition:all .25s; z-index:9999; white-space:nowrap;
}
#copyToast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* 섹션 카드 */
.section-card {
    background:#fff; border:1px solid #e2e8f0; border-radius:16px;
    margin-bottom:16px; overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* 빵부스러기 */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:#94a3b8; margin-bottom:20px; flex-wrap:wrap; }
.breadcrumb a { color:#94a3b8; text-decoration:none; }

/* 점수 바 (type_page / compat_page 공용) */
.score-row   { display:flex; align-items:center; gap:10px; padding:8px 20px; }
.score-label { font-size:12px; font-weight:700; color:#64748b; width:32px; flex-shrink:0; }
.score-track { flex:1; height:8px; background:#f1f5f9; border-radius:99px; overflow:hidden; }
.score-fill  { height:8px; border-radius:99px; }
.score-val   { font-size:12px; font-weight:800; width:22px; text-align:right; }

/* 애니메이션 */
.fade-in { animation:fadeIn .3s ease; }
@keyframes fadeIn    { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInfoIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }