/* ── compat.php 전용 CSS ── */
#compatBody { font-family:'Inter',sans-serif; }

/* 타입 버튼 (핑크 테마) */
.type-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:64px; border-radius:12px; border:2px solid #e5e7eb;
    background:#fff; cursor:pointer; font-size:12px; font-weight:700;
    color:#374151; transition:all .18s; user-select:none; gap:3px;
}
.type-btn:hover  { border-color:#f9a8d4; color:#db2777; background:#fdf2f8; transform:translateY(-2px); box-shadow:0 4px 12px rgba(219,39,119,.15); }
.type-btn.active { border-color:#db2777; background:#db2777; color:#fff; box-shadow:0 2px 8px rgba(219,39,119,.3); }
.type-btn .t-emoji { font-size:22px; line-height:1; }

/* 타입 정보 패널 */
.type-info-panel {
    background:#fff; border-radius:16px; border:1.5px solid #fce7f3;
    padding:18px 20px; margin-top:12px; display:none;
    box-shadow:0 4px 16px rgba(219,39,119,.1);
    animation: fadeInfoIn .2s ease;
}

/* 공통 카드 박스 */
.card-box {
    background:#fff; border-radius:16px; border:1px solid #e5e7eb;
    padding:20px; margin-bottom:16px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

/* 단계 레이블 */
.step-label {
    display:flex; align-items:center; gap:8px;
    font-size:12px; font-weight:700; color:#9ca3af;
    text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px;
}
.step-num {
    width:22px; height:22px; border-radius:50%;
    background:#db2777; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; flex-shrink:0;
}

/* 나의 유형 배너 */
.my-type-banner {
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg,#db2777,#9333ea);
    border-radius:14px; padding:16px 20px; margin-bottom:16px;
}
.my-type-avatar {
    width:52px; height:52px; border-radius:50%;
    background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.35);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:900; color:#fff; flex-shrink:0;
}
.my-type-label { font-size:11px; font-weight:600; color:rgba(255,255,255,.65); margin-bottom:2px; }
.my-type-value { font-size:20px; font-weight:900; color:#fff; }

/* 뒤로가기 */
.back-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; border-radius:10px;
    background:#fff; border:1.5px solid #e5e7eb;
    font-size:13px; font-weight:600; color:#6b7280;
    cursor:pointer; transition:.15s; margin-bottom:16px;
}
.back-btn:hover { background:#fdf2f8; border-color:#f9a8d4; color:#db2777; }

/* 결과 레벨 배지 */
.level-badge  { display:inline-block; padding:4px 14px; border-radius:99px; font-size:13px; font-weight:700; }
.level-best   { background:#fef9c3; color:#854d0e; }
.level-good   { background:#dcfce7; color:#166534; }
.level-normal { background:#f3f4f6; color:#374151; }
.level-hard   { background:#fff7ed; color:#9a3412; }
.level-worst  { background:#fee2e2; color:#991b1b; }