/* Checklist Global Sync UI */

.sync-container {
    position: relative; 
    /* 자식 absolute 포지셔닝 기준역할. 보통 wiki-item-image 또는 detail-image-area 에 적용 */
}

/* 좌측/우측 상단 체크 버튼 */
.sync-check-btn {
    position: absolute;
    top: 8px;
    right: 8px; /* 우측 상단 */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ccc;  /* 아웃라인만 회색 */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: transparent; /* 평소엔 안보임 */
    transition: all 0.2s ease;
    z-index: 10;
}

.sync-check-btn i {
    font-size: 1rem !important;
    opacity: 1 !important;
}

.sync-check-btn:hover {
    border-color: #ffca28;
    background: rgba(255, 202, 40, 0.1);
}

.sync-item.checked .sync-check-btn {
    border-color: #ffb300;
    background: #ffb300;
    color: #fff;
    box-shadow: 0 0 10px rgba(255,179,0,0.4);
}

.sync-mastery-btn {
    position: absolute;
    top: 44px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #9fb0c8;
    background: transparent;
    color: #9fb0c8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.sync-mastery-btn i {
    font-size: 0.95rem !important;
    opacity: 1 !important;
}

.sync-mastery-btn:hover {
    border-color: #9c4dff;
    color: #9c4dff;
    background: transparent;
}

.sync-item.mastered .sync-mastery-btn {
    border-color: #9c4dff;
    background: transparent;
    color: #9c4dff;
    box-shadow: 0 0 10px rgba(156, 77, 255, 0.34);
}

.sync-mastery-btn.disabled,
.sync-mastery-btn[aria-disabled="true"] {
    border-color: #d5dbe5;
    background: transparent;
    color: #c2cad7;
    cursor: not-allowed;
    box-shadow: none;
}

.sync-mastery-btn.disabled::after,
.sync-mastery-btn[aria-disabled="true"]::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #c2cad7;
    transform: rotate(-42deg);
    opacity: 0.9;
}

/* 별점 컨테이너 */
.sync-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 10;
    padding: 2px 8px;
    border-radius: 12px;
    flex-wrap: nowrap;
}

/* 이미지 박스 내부(절대 위치)로 쓰일 때 (detail 등) */
.sync-container > .sync-stars {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.6);
}

/* 카드 정보 영역(이름 위)로 쓰일 때 */
.wiki-item-info .sync-stars {
    position: static;
    transform: none;
    background: transparent;
    margin-top: 4px;
    margin-bottom: 10px;
}

/* 개별 별 */
.sync-star-icon {
    font-size: 1.0rem !important;
    opacity: 1 !important;
    color: transparent;
    -webkit-text-stroke: 1px #ccc; /* 얇고 섬세한 테두리 */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sync-star-icon:hover {
    transform: scale(1.2);
}

/* 아이템이 checked 거나 별이 선택됐을 때 반짝이게! (filled 상태) */
.sync-star-icon.filled {
    color: #ffca28; /* 노란색/금색 채우기 */
    -webkit-text-stroke: 0;
    text-shadow: 0 0 6px rgba(255, 202, 40, 0.6);
}