/**
 * 유니트 섹션 추가 개선사항
 * Tailwind CSS 스타일 전문가 관점의 최적화
 */

/* GPU 가속 활성화 */
.unit-bg-image,
.unit-card-ultra,
.card-thumbnail,
.spec-icon-ultra,
.info-panel-left {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 부드러운 스크롤 */
.slider-track {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 선택 방지 (텍스트 드래그 방지) */
.unit-type-display,
.label-type,
.value-number {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    .unit-card-ultra:hover::after {
        opacity: 0;
    }
    
    .unit-card-ultra:active {
        transform: scale(0.98);
    }
    
    .spec-item-ultra:hover {
        transform: none;
    }
}

/* 접근성: 고대비 모드 */
@media (prefers-contrast: high) {
    .unit-type-display {
        text-shadow: 
            0 2px 4px rgba(0, 0, 0, 1),
            0 0 20px rgba(255, 255, 255, 1);
    }
    
    .spec-icon-ultra {
        border: 2px solid #000;
    }
    
    .card-thumbnail {
        border: 3px solid #000;
    }
}

/* 다크모드 선호 사용자 대응 */
@media (prefers-color-scheme: dark) {
    .unit-bg-image {
        filter: brightness(0.95) contrast(1.05);
    }
}

/* 애니메이션 줄이기 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
    .unit-card-ultra,
    .card-thumbnail,
    .unit-bg-image,
    .spec-icon-ultra {
        transition: none;
        animation: none;
    }
    
    .badge-pulse,
    .loading-spinner {
        animation: none;
    }
}

/* 성능 최적화: 컴포지팅 레이어 분리 */
.unit-viewer-bg {
    contain: layout style paint;
}

.unit-selector-bar {
    contain: layout style;
}

/* 포커스 트랩 방지 (접근성) */
.unit-card-ultra[tabindex="0"]:focus {
    z-index: 100;
}

/* 마이크로 인터랙션: 클릭 리플 효과 */
.unit-card-ultra::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 165, 91, 0.4), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}

.unit-card-ultra:active::before {
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
}

/* 스무스 컬러 전환 */
.value-number,
.value-text,
.label-type {
    transition: 
        color 0.4s ease,
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease;
}

/* 이미지 페이드 최적화 */
.unit-main-image-modern,
.unit-bg-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 반응형 타이포그래피 */
@media (min-width: 2000px) {
    .unit-type-display {
        font-size: 4rem;
    }
    
    .value-number {
        font-size: 2.2rem;
    }
    
    .unit-title-ultra .title-main {
        font-size: 4rem;
    }
}

/* 울트라와이드 디스플레이 */
@media (min-width: 2560px) {
    .unit-section-ultra {
        max-width: 2400px;
        margin: 0 auto;
    }
}

/* 세로 화면 최적화 */
@media (max-height: 700px) and (orientation: landscape) {
    .unit-info-panel {
        top: 60px;
    }
    
    .unit-type-display {
        font-size: 2.2rem;
    }
    
    .unit-selector-bar {
        padding: 20px 60px 15px;
    }
    
    .specs-display {
        padding: 15px 25px;
    }
}