/* ?니메이??*/
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* === Quote detail modal - disable hover scale animations === */
#quote-detail-modal .image-item:hover,
#quote-detail-modal .quote-image-clickable:hover,
#quote-detail-modal .quote-image-item:hover img,
#quote-detail-modal .image-hover-effect:hover,
#quote-detail-modal .image-hover-effect:hover img,
#quote-detail-modal .reply-card-modern .flex.items-center.space-x-2 button:hover,
#quote-detail-modal .interactive:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Generic kill-switch for hover/active transforms inside detail modal */
#quote-detail-modal *:hover,
#quote-detail-modal *:active {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* When parent uses hover to scale children (e.g., group-hover patterns) */
#quote-detail-modal .group:hover *,
#quote-detail-modal [class*="group"]:hover * {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* === Spec grid: remove width-changing animations (global and modal) === */
/* Disable transforms and transitions for spec cards */
#quote-detail-modal .spec-grid .spec-item,
#quote-detail-modal .spec-grid .spec-item:hover,
#quote-detail-modal .spec-grid .spec-item *:hover,
.spec-grid .spec-item,
.spec-grid .spec-item:hover,
.spec-grid .spec-item *:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
}

/* Prevent any animation on inner texts affecting layout */
#quote-detail-modal .spec-grid .spec-item *,
.spec-grid .spec-item * {
    transition: none !important;
}

/* === Quote detail content (expanded view) - disable hover animations === */
#quote-detail-content *:hover,
#quote-detail-content *:active {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

#quote-detail-content .main-post-card,
#quote-detail-content .content-section,
#quote-detail-content .content-tag,
#quote-detail-content .spec-grid .spec-item,
#quote-detail-content .reply-card-modern,
#quote-detail-content .quote-detail-section {
    transition: none !important;
}

#quote-detail-content .main-post-card:hover,
#quote-detail-content .content-tag:hover,
#quote-detail-content .spec-grid .spec-item:hover,
#quote-detail-content .reply-card-modern:hover,
#quote-detail-content .quote-detail-section:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Disable any transitions/animations inside the detail content globally */
#quote-detail-content,
#quote-detail-content * {
    transition: none !important;
    animation: none !important;
}
/* === ?태 변??롭?운 ???=== */
.status-select {
    /* 기본 ???*/
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-right: 30px !important;
    text-align: center;
    min-width: 100px;
    
    /* ?롭?운 ?살???기?*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Glass morphism ?과 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.status-select:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.status-select:focus {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.1),
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    outline: none;
}

.status-select:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* ?롭?운 ?션 ???*/
.status-select option {
    background-color: white;
    color: #374151;
    padding: 8px 12px;
    font-weight: 500;
}

.status-select option:hover {
    background-color: #f3f4f6;
}

.status-select option:checked {
    background-color: #dbeafe;
    color: #1d4ed8;
}

/* ?태??상 커스?마?징 */
.status-select[value="pending"] {
    background: linear-gradient(135deg, rgba(254, 240, 138, 0.9), rgba(252, 211, 77, 0.9));
    color: #92400e;
}

.status-select[value="in_progress"] {
    background: linear-gradient(135deg, rgba(255, 237, 213, 0.9), rgba(253, 186, 116, 0.9));
    color: #c2410c;
}

.status-select[value="on_hold"] {
    background: linear-gradient(135deg, rgba(254, 215, 170, 0.9), rgba(251, 146, 60, 0.9));
    color: #c2410c;
}

.status-select[value="completed"] {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.9), rgba(167, 243, 208, 0.9));
    color: #065f46;
}

/* 반응??조정 */
@media (max-width: 768px) {
    .status-select {
        font-size: 12px;
        padding: 4px 24px 4px 8px !important;
        min-width: 90px;
    }
}

/* ?크모드 지??- Disabled */
@media (prefers-color-scheme: never) {
    .status-select {
        background-color: rgba(31, 41, 55, 0.8);
        color: #f9fafb;
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .status-select option {
        background-color: #374151;
        color: #f9fafb;
    }
    
    .status-select option:hover {
        background-color: #4b5563;
    }
    
    .status-select option:checked {
        background-color: #1e40af;
        color: #dbeafe;
    }
}

/* === 견적문의 진행?황 ?시?=== */
.quote-progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem 0;
    position: relative;
}

.quote-progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(59, 130, 246, 0.2);
    z-index: 1;
    transform: translateY(-50%);
    border-radius: 2px;
}

.quote-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: rgb(249 250 251);
    padding: 0 1rem;
}

.quote-progress-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(203, 213, 225, 0.8);
    border: 2px solid rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.quote-progress-step.active .quote-progress-step-circle {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-color: #3b82f6;
    color: white;
    transform: scale(1.1);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.4),
        0 0 0 3px rgba(59, 130, 246, 0.2);
}

.quote-progress-step.completed .quote-progress-step-circle {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
    box-shadow: 
        0 4px 12px rgba(16, 185, 129, 0.4),
        0 0 0 3px rgba(16, 185, 129, 0.2);
}

.quote-progress-step-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

.quote-progress-step.active .quote-progress-step-label {
    color: #3b82f6;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.quote-progress-step.completed .quote-progress-step-label {
    color: #10b981;
    font-weight: 600;
}

/* 모바??반응???자??*/
@media (max-width: 768px) {
    .quote-progress-bar {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0;
        margin-bottom: 1rem;
    }
    
    .quote-progress-bar::before {
        display: none;
    }
    
    .quote-progress-step {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(59, 130, 246, 0.2);
        backdrop-filter: blur(8px);
    }
    
    .quote-progress-step-circle {
        margin-bottom: 0;
        margin-right: 0.5rem;
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    
    .quote-progress-step-label {
        font-size: 0.8rem;
        margin: 0;
        align-self: center;
        line-height: 1.2;
    }
    
    .quote-progress-step.active {
        background: linear-gradient(135deg, 
            rgba(59, 130, 246, 0.1), 
            rgba(139, 92, 246, 0.05));
        border-color: #3b82f6;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    }
}

/* === 견적 ?공 모달 ???=== */
#quote-success-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

#quote-success-modal .bg-white {
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

#quote-success-modal:not(.hidden) .bg-white {
    transform: scale(1);
    opacity: 1;
}

/* ?공 ?이???니메이??*/
#quote-success-modal .w-20.h-20 {
    animation: successBounce 0.6s ease-out 0.2s both;
}

@keyframes successBounce {
    0% {
        transform: scale(0.3) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 체크마크 ?니메이??*/
#quote-success-modal .w-20.h-20 svg {
    animation: checkDraw 0.8s ease-out 0.5s both;
}

@keyframes checkDraw {
    0% {
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
        opacity: 0;
    }
    100% {
        stroke-dasharray: 20;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* 모달 ?용 ?니메이??*/
#quote-success-modal .bg-gray-50,
#quote-success-modal .bg-blue-50,
#quote-success-modal .text-center.text-sm.text-gray-600,
#quote-success-modal .flex.space-x-3 {
    animation: slideUpFade 0.5s ease-out both;
}

#quote-success-modal .bg-gray-50 {
    animation-delay: 0.3s;
}

#quote-success-modal .bg-blue-50 {
    animation-delay: 0.4s;
}

#quote-success-modal .text-center.text-sm.text-gray-600 {
    animation-delay: 0.5s;
}

#quote-success-modal .flex.space-x-3 {
    animation-delay: 0.6s;
}

@keyframes slideUpFade {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 버튼 ?버 ?과 개선 */
#quote-success-modal button {
    transition: all 0.3s ease;
}

#quote-success-modal button:hover {
    transform: translateY(-1px);
}

#quote-success-modal .bg-gradient-to-r:hover {
    box-shadow: 
        0 10px 20px rgba(59, 130, 246, 0.3),
        0 6px 6px rgba(59, 130, 246, 0.2);
}

/* 그라?이???니메이??*/
#quote-success-modal .bg-gradient-to-r.from-green-400 {
    animation: gradientSlide 0.8s ease-out;
    background-size: 200% 100%;
}

@keyframes gradientSlide {
    0% {
        background-position: 100% 0;
        opacity: 0;
    }
    100% {
        background-position: 0% 0;
        opacity: 1;
    }
}

/* 모바??반응??*/
@media (max-width: 640px) {
    #quote-success-modal .bg-white {
        margin: 1rem;
        padding: 1.5rem;
        border-radius: 1.5rem;
    }
    
    #quote-success-modal .w-20.h-20 {
        width: 4rem;
        height: 4rem;
    }
    
    #quote-success-modal .w-20.h-20 svg {
        width: 2rem;
        height: 2rem;
    }
    
    #quote-success-modal h3 {
        font-size: 1.25rem;
    }
    
    #quote-success-modal .flex.space-x-3 {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    #quote-success-modal .flex.space-x-3 > * {
        margin: 0;
    }
}

/* === ?력 ?드 ?정 ??성??=== */
/* 견적 ???력 ?드 강제 ?성??*/
#step-4 input[type="text"],
#step-4 input[type="password"],
#step-4 textarea,
#step-5 input[type="text"],
#step-5 input[type="password"],
#step-5 textarea {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(203, 213, 225, 0.5) !important;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* 입력 필드 기본 그림자 약화 (glass 컴포넌트 override) */
#step-4 input[type="text"].glass,
#step-4 input[type="password"].glass,
#step-4 textarea.glass,
#step-5 input[type="text"].glass,
#step-5 input[type="password"].glass,
#step-5 textarea.glass {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

#step-4 input[type="text"].glass:hover,
#step-4 input[type="password"].glass:hover,
#step-4 textarea.glass:hover,
#step-5 input[type="text"].glass:hover,
#step-5 input[type="password"].glass:hover,
#step-5 textarea.glass:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
}

#step-4 input[type="text"]:focus,
#step-4 input[type="password"]:focus,
#step-4 textarea:focus,
#step-5 input[type="text"]:focus,
#step-5 input[type="password"]:focus,
#step-5 textarea:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-1px);
}

#step-4 input[type="text"]:hover,
#step-4 input[type="password"]:hover,
#step-4 textarea:hover,
#step-5 input[type="text"]:hover,
#step-5 input[type="password"]:hover,
#step-5 textarea:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

/* ?디??버튼?체크박스 ?성??*/
#step-4 input[type="radio"],
#step-4 input[type="checkbox"],
#step-5 input[type="checkbox"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 10;
}

/* ?벨 ?릭 가???정 */
#step-4 label,
#step-5 label {
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none;
}

/* Glass ?과 override */
.step-content .glass {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* ?레?스??????*/
#step-4 input::placeholder,
#step-4 textarea::placeholder,
#step-5 input::placeholder,
#step-5 textarea::placeholder {
    color: rgba(107, 114, 128, 0.7) !important;
    opacity: 1 !important;
}

/* 모바??최적??*/
@media (max-width: 768px) {
    /* ?력 ?드 ?트 ?기 최적??*/
    #step-4 input[type="text"],
    #step-4 input[type="password"],
    #step-4 textarea,
    #step-5 input[type="text"],
    #step-5 input[type="password"],
    #step-5 textarea {
        font-size: 14px !important; /* 모바?에 ?합???기 */
        padding: 10px 14px !important;
    }
    
    /* placeholder ?스???기 최적??*/
    #step-4 input::placeholder,
    #step-4 textarea::placeholder,
    #step-5 input::placeholder,
    #step-5 textarea::placeholder {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    /* ?텝 ?목??명 ?스??최적??*/
    .step-content h3 {
        font-size: 1.3rem !important;
    }
    
    .step-content .text-lg {
        font-size: 0.95rem !important;
    }
    
    .step-content .text-base {
        font-size: 0.9rem !important;
    }
    
    .step-content .text-sm {
        font-size: 0.8rem !important;
    }
    
    /* ?벨 ?스??최적??*/
    .step-content label {
        font-size: 0.9rem !important;
    }
    
    /* 버튼 ?스??최적??*/
    .step-content button {
        font-size: 0.9rem !important;
    }
    
    /* ?텝 카드 ?? ?스??최적??*/
    .step-card h4 {
        font-size: 0.9rem !important;
    }
    
    .step-card p {
        font-size: 0.8rem !important;
    }
    
    /* 게임 카드 ?스??최적??*/
    .game-card h4 {
        font-size: 0.9rem !important;
    }
    
    .game-card p {
        font-size: 0.8rem !important;
    }
    
    /* ?택???? ?시 ?스??최적??*/
    .selected-items-display {
        font-size: 0.8rem !important;
    }
    
    /* ?내 메시지 ?스??최적??*/
    .text-gray-600,
    .text-gray-500 {
        font-size: 0.8rem !important;
    }
}

/* ?버깅용 - 개발 ???거 가??*/
.step-content {
    position: relative;
    z-index: 1;
}

.step-content input,
.step-content textarea {
    -webkit-user-modify: read-write !important;
    -webkit-user-select: text !important;
    -webkit-touch-callout: default !important;
} 

/* === 추?: textarea ?용 강화 ???=== */
textarea[name="details"] {
    pointer-events: auto !important;
    user-select: text !important;
    cursor: text !important;
    position: relative !important;
    z-index: 100 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(203, 213, 225, 0.8) !important;
    outline: none !important;
    resize: vertical !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-height: 200px !important;
    overflow-y: auto !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    /* 추? ?실???벤???성??*/
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    -webkit-touch-callout: default !important;
    -webkit-user-modify: read-write !important;
}

textarea[name="details"]:focus {
    border-color: rgb(59, 130, 246) !important;
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    z-index: 101 !important;
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px) !important;
}

textarea[name="details"]:hover {
    border-color: rgba(99, 102, 241, 0.6) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* textarea 부??소 ???강화 */
#step-4 > div > div:has(textarea[name="details"]) {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate !important;
}

/* glass ?과 무효??for textarea */
textarea[name="details"].glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 모바???용 textarea 최적??*/
@media (max-width: 768px) {
    textarea[name="details"] {
        font-size: 16px !important; /* iOS ?? 방? */
        padding: 16px !important;
        border-radius: 12px !important;
        -webkit-user-select: text !important;
        -webkit-touch-callout: default !important;
    }
}

/* ?실???릭 ?역 보장 */
textarea[name="details"]::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    pointer-events: auto;
}

/* 개인?보 처리방침 모달 기본 ???*/
#privacy-policy-modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#privacy-policy-modal .bg-white {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* === ?디?버???릭 ???크?방? - 강화 버전 === */

/* ?체 ?이지???크??작 ?전 차단 */
html {
    scroll-behavior: auto !important;
}

body {
    scroll-behavior: auto !important;
}

/* 모든 ?소???크??작 차단 */
* {
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
    scroll-snap-margin: 0 !important;
    scroll-snap-align: none !important;
}

/* ?디?버?과 체크박스 ?전 고정 */
input[type="radio"],
input[type="checkbox"] {
    scroll-margin: 0 !important;
    scroll-snap-margin: 0 !important;
    scroll-behavior: auto !important;
    -webkit-scroll-behavior: auto !important;
}

/* ?벨?카드 ?크?차단 */
label,
.step-card,
.game-card {
    scroll-margin: 0 !important;
    scroll-snap-margin: 0 !important;
    scroll-behavior: auto !important;
    -webkit-scroll-behavior: auto !important;
}

/* ?커?????크??전 차단 */
input[type="radio"]:focus,
input[type="checkbox"]:focus,
.step-card:focus,
.game-card:focus {
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
    scroll-snap-margin: 0 !important;
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* 모든 focusable ?소???크?차단 */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus,
[tabindex]:focus {
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
    scroll-snap-margin: 0 !important;
}

/* 모바?에???치 ???크??전 차단 */
@media (max-width: 768px) {
    html, body {
        -webkit-scroll-behavior: auto !important;
        scroll-behavior: auto !important;
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;
    }
    
    input[type="radio"],
    input[type="checkbox"],
    .step-card,
    .game-card {
        -webkit-scroll-behavior: auto !important;
        scroll-behavior: auto !important;
        scroll-margin: 0 !important;
        scroll-snap-margin: 0 !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* iOS Safari ?용 ?크?차단 */
    input[type="radio"]:focus,
    input[type="checkbox"]:focus {
        -webkit-scroll-behavior: auto !important;
        scroll-behavior: auto !important;
        transform: translateZ(0) !important; /* 강제 GPU 가??*/
    }
}

/* === 카드 ???변?????이?웃 변?방? === */

/* 카드 기본 ???- ?기 변?방?? 위한 미리 ?보 */
.step-card,
.game-card {
    /* 기본?으?ring?같? 공간???보?서 ?기 변??도?*/
    box-sizing: border-box !important;
    /* ?명???두리로 공간 미리 ?보 (ring-2? ?일???기) */
    border: 2px solid transparent !important;
    /* 배경??변경으???한 리플로우 방? */
    will-change: background-color, border-color !important;
    /* GPU 가?으??이?웃 변?최소??*/
    transform: translateZ(0) !important;
    /* ?기 변?방?? 위한 백업 */
    contain: layout style !important;
}

/* ?택??카드 ???- ?기 변??이 ?상?변?*/
.step-card.selected,
.game-card.selected,
.step-card:has(input:checked),
.game-card:has(input:checked) {
    /* 기존 ?명 ?두리? ???으?변?(?기 변??음) */
    border-color: rgb(59 130 246) !important;
    /* 배경?만 변?(?이?웃 ?향 ?음) */
    background-color: rgb(239 246 255) !important;
}

/* ring ?래???버?이??- ?이?웃 변?방? */
.step-card.ring-2,
.game-card.ring-2 {
    /* ring ???기존 border ?용 (?기 변??음) */
    border-color: rgb(59 130 246) !important;
    /* ring??box-shadow ?거?여 ?이?웃 ?향 차단 */
    box-shadow: none !important;
}

/* 배경???래???버?이??*/
.step-card.bg-blue-50,
.game-card.bg-blue-50 {
    background-color: rgb(239 246 255) !important;
}

/* ring-blue-500 ?래???버?이??*/
.step-card.ring-blue-500,
.game-card.ring-blue-500 {
    border-color: rgb(59 130 246) !important;
}

/* 추? ?전?치: 모든 CSS 변?????이?웃 고정 */
.step-card *,
.game-card * {
    /* ?? ?소?도 ?이?웃 변?방? */
    contain: layout !important;
}

/* === 4?계 ?용 부?러??보호 === */

/* 4?계 카드 부?러???크?보호 */
#step-4:not(.hidden) .step-card {
    /* 부?러???크?방? */
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-margin: 0 !important;
    scroll-padding: 0 !important;
    /* ?이?웃 최적??*/
    contain: layout style !important;
}

/* 4?계 ?디?버??부?러??보호 */
#step-4:not(.hidden) input[type="radio"],
#step-4:not(.hidden) input[type="checkbox"] {
    /* 부?러???크?방? */
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-margin: 0 !important;
    scroll-padding: 0 !important;
}

/* 4?계 ?디?버???커????부?러??보호 */
#step-4:not(.hidden) input[type="radio"]:focus,
#step-4:not(.hidden) input[type="checkbox"]:focus {
    /* ?커???에???크?방? */
    scroll-behavior: auto !important;
    scroll-margin: 0 !important;
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* 커스? ?디?버????*/
.radio-custom {
    transition: all 0.2s ease;
    border-width: 2px;
    border-style: solid;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.radio-custom:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.radio-dot {
    transition: opacity 0.2s ease;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3b82f6;
}

/* ?디?버???벨 ?버 ?과 - ?이?웃 변??이 ?상?변?*/
label:has(.radio-custom):hover {
    background-color: rgba(59, 130, 246, 0.05);
    transition: background-color 0.2s ease;
}

/* ?택???디?버????- ?이?웃 변??이 ?상?변?*/
label:has(.radio-custom.border-blue-500) {
    background-color: rgba(59, 130, 246, 0.1);
}

/* 모바???치 최적??*/
@media (max-width: 768px) {
    .radio-custom {
        width: 18px;
        height: 18px;
    }
    
    .radio-dot {
        width: 10px;
        height: 10px;
    }
    
    label:has(.radio-custom) {
        min-height: 48px; /* ?치 친화?인 최소 ?이 */
        align-items: center;
    }
}

/* 커스? 체크박스 ???*/
.checkbox-custom {
    transition: all 0.2s ease;
    border-width: 2px;
    border-style: solid;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border-color: #9ca3af;
    position: relative;
    z-index: 10;
}

.checkbox-custom:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-check {
    transition: opacity 0.2s ease;
    width: 12px;
    height: 12px;
    color: #3b82f6;
    opacity: 0;
}

/* 체크박스 ?벨 ?버 ?과 - ?이?웃 변??이 ?상?변?*/
label:has(.checkbox-custom):hover {
    background-color: rgba(59, 130, 246, 0.05);
    transition: background-color 0.2s ease;
}

/* ?택??체크박스 ???- ?이?웃 변??이 ?상?변?*/
label:has(.checkbox-custom[style*="border-color: rgb(59, 130, 246)"]) {
    background-color: rgba(59, 130, 246, 0.1);
}

/* 체크박스 체크 ?태 */
.checkbox-custom[data-checked="true"] {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
}

.checkbox-custom[data-checked="true"] .checkbox-check {
    opacity: 1 !important;
}

/* ?제 체크박스 ?전???기?*/
input[type="checkbox"].sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    z-index: -1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: none !important;
}

/* 체크박스 ?벨 ??? ?소 ?치 고정 */
label:has(.checkbox-custom) {
    position: relative;
}

label:has(.checkbox-custom) .checkbox-custom {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

/* 체크박스 ?이??치 고정 */
.checkbox-check {
    position: relative;
    z-index: 11;
}

/* 모바???치 최적??*/
@media (max-width: 768px) {
    /* 견적 ?이지 ?단 ?딩 최적??- ?더??가???지 ?도??*/
    main {
        padding-top: 60px !important; /* pt-20 (80px) ??60px */
    }
    
    #hero-section {
        padding-top: 16px !important; /* py-8 (32px) ??16px */
        padding-bottom: 16px !important;
    }
    
    #quote-form {
        padding-top: 16px !important; /* py-16 (64px) ??16px */
        padding-bottom: 16px !important;
    }
    
    .checkbox-custom {
        width: 20px;
        height: 20px;
    }
    
    .checkbox-check {
        width: 16px;
        height: 16px;
    }
    
    label:has(.checkbox-custom) {
        min-height: 48px; /* ?치 친화?인 최소 ?이 */
        align-items: center;
    }
}