/* 인연궁합 점수 컴포넌트 */

.sjc-container {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
}

.sjc-container > .sjc-card {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

/* 흰색 카드 wrap */
.sjc-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 20px;
    margin-bottom: 12px;
    text-align: center;
}

/* 메인 카드 (헤더 + 점수 + 그래프 + 등급 + 코멘트) */
.sjc-card-main {
    padding: 32px 20px 36px;
}

/* 헤더 (이름 + 타이틀) - 메인 카드 안 */
.sjc-header {
    margin-bottom: 32px;
}

.sjc-names {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 6px 0;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.sjc-title {
    font-size: 24px;
    font-weight: 800;
    color: #111827;
    margin: 0;
    letter-spacing: -0.6px;
    line-height: 1.3;
}

/* 점수 (위) */
.sjc-score-num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 18px;
}

.sjc-score-value {
    font-size: 60px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -1.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sjc-score-unit {
    font-size: 22px;
    font-weight: 700;
    color: #6b7280;
    margin-left: 4px;
}

/* 그래프 (아래) */
.sjc-bar-wrap {
    margin-bottom: 28px;
}

.sjc-bar-track {
    position: relative;
    width: 100%;
    height: 12px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: visible;
}

.sjc-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: #191f28;
    width: 0%;
}

/* 하트 포인터 (그래프 끝 따라 이동) */
.sjc-bar-pointer {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    transition: left 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

.sjc-bar-heart {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    animation: sjc-heart-pulse 1s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(190, 24, 93, 0.3));
}

@keyframes sjc-heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

.sjc-bar-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* 등급 라벨 */
.sjc-tier {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 12px;
}

.sjc-tier-high .sjc-tier {
    background: #fce7f3;
    color: #be185d;
}

.sjc-tier-mid .sjc-tier {
    background: #fef3c7;
    color: #b45309;
}

.sjc-tier-low .sjc-tier {
    background: #f3f4f6;
    color: #4b5563;
}

.sjc-comment {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.5;
    margin: 0;
    letter-spacing: -0.3px;
    font-weight: 500;
}

/* 점수 평가 기준 */
.sjc-card-criteria {
    padding: 20px 20px;
}

.sjc-criteria-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px 0;
    text-align: center;
    letter-spacing: -0.3px;
}

.sjc-criteria-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sjc-criteria-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.sjc-criteria-active {
    background: #fef3c7;
    border-color: #fcd34d;
}

.sjc-tier-high .sjc-criteria-active {
    background: #fce7f3;
    border-color: #f9a8d4;
}

.sjc-tier-low .sjc-criteria-active {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.sjc-criteria-range {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: -0.2px;
}

.sjc-criteria-active .sjc-criteria-range {
    color: #111827;
}

.sjc-criteria-label {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
    letter-spacing: -0.2px;
}

.sjc-criteria-active .sjc-criteria-label {
    color: #111827;
    font-weight: 700;
}

/* 항목별 상세 점수 (도넛 그리드) */
.sjc-card-details {
    padding: 24px 20px 28px;
}

.sjc-details-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 18px 0;
    text-align: center;
    letter-spacing: -0.3px;
}

.sjc-donut-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 14px;
}

.sjc-donut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sjc-donut-name {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
}

.sjc-donut {
    position: relative !important;
    width: 110px !important;
    height: 110px !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.sjc-donut-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.sjc-donut-fill {
    transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sjc-donut-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

.sjc-donut-num {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.5px !important;
}

.sjc-donut-unit {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    margin-left: 2px !important;
    line-height: 1 !important;
}

/* 등급 라벨 (배경 캡슐) */
.sjc-donut-tier {
    display: inline-block !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
}

/* 등급별 색상: 도넛 fill 과 라벨 동일 매칭 */
.sjc-tier-bad .sjc-donut-fill { stroke: #9ca3af !important; }
.sjc-tier-bad .sjc-donut-tier {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

.sjc-tier-ok .sjc-donut-fill { stroke: #f59e0b !important; }
.sjc-tier-ok .sjc-donut-tier {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.sjc-tier-good .sjc-donut-fill { stroke: #3b82f6 !important; }
.sjc-tier-good .sjc-donut-tier {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.sjc-tier-best .sjc-donut-fill { stroke: #ec4899 !important; }
.sjc-tier-best .sjc-donut-tier {
    background: #fce7f3 !important;
    color: #be185d !important;
}

/* 하단 이미지 (좌우/상하 마진 없이 풀 너비) */
.sjc-bottom-image {
    width: 100%;
    line-height: 0;
    margin: 0 !important;
}

.sjc-bottom-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 480px) {
    .sjc-card { padding: 24px 16px; }
    .sjc-card-main { padding: 28px 16px 32px; }
    .sjc-card-criteria { padding: 18px 14px; }
    .sjc-card-details { padding: 22px 14px 24px; }
    .sjc-title { font-size: 21px; }
    .sjc-score-value { font-size: 52px; }
    .sjc-score-unit { font-size: 20px; }
    .sjc-donut { width: 96px; height: 96px; }
    .sjc-donut-num { font-size: 22px; }
    .sjc-donut-name { font-size: 15px; }
    .sjc-donut-grid { gap: 28px 10px; }
}