/* === Modern Card Selection System (Context7 Latest Trends) === */

/* CSS Variables for Consistent Theming */
:root {
    --selection-primary: #3B82F6;
    --selection-primary-light: #60A5FA;
    --selection-secondary: #8B5CF6;
    --selection-secondary-light: #A78BFA;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.4);
    --animation-speed: 0.3s;
    --stagger-delay: 0.1s;
}

/* === Template Dropdown Styles === */
#quote-template-dropdown-menu {
    background: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    z-index: 9999 !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    position: absolute !important;
    width: 450px !important;
    margin-top: 4px !important;
}

#quote-template-dropdown-menu .template-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#quote-template-dropdown-menu .template-item:hover {
    background-color: #f9fafb !important;
}

#quote-template-dropdown-menu .template-item:last-child {
    border-bottom: none !important;
}

#quote-template-dropdown-menu .template-title {
    font-weight: 500 !important;
    color: #111827 !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

#quote-template-dropdown-menu .template-preview {
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#quote-template-dropdown-btn {
    background: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-width: 120px !important;
}

#quote-template-dropdown-btn:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
}

#quote-template-dropdown-btn:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* === Quote Reply Content Textarea === */
#quote-reply-content {
    min-height: 12rem !important;
    line-height: 1.6 !important;
}

/* === Modern Step Card System === */
.step-card {
    position: relative;
    cursor: pointer;
    transition: all var(--animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    
    /* Glass Morphism Base */
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    
    /* Modern Shadow System */
    box-shadow: 
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    scroll-margin: 0 !important;
    scroll-snap-margin: 0 !important;
}

/* Hide inputs completely but keep accessible */
.step-card input[type="checkbox"],
.step-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Hover States === */
.step-card:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 
        var(--shadow-md),
        0 0 0 1px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* === Focus States (Keyboard Navigation) === */
.step-card:focus-within {
    outline: 2px solid var(--selection-primary);
    outline-offset: 2px;
}

/* === Active/Pressed States === */
.step-card:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* === Selected States (has[:checked] Magic) === */
.step-card:has(input:checked) {
    border-color: var(--selection-primary);
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1) 0%, 
        rgba(29, 78, 216, 0.05) 100%);
    transform: translateY(-4px) scale(1.03);
    
    /* Advanced Shadow System */
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.2),
        var(--shadow-glow),
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Icon container enhancement for selected state */
.step-card:has(input:checked) .icon-container {
    background: rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Text enhancement for selected state */
.step-card:has(input:checked) h4,
.step-card:has(input:checked) p {
    color: #1e40af;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* === Clean Selection System (No Icons) === */
/* Selection is indicated purely through glow effects and background changes */

/* === Game Card Variations === */
.game-card {
    position: relative;
    cursor: pointer;
    transition: all var(--animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    
    /* Glass Morphism */
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

.game-card input[type="checkbox"],
.game-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.game-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 
        var(--shadow-md),
        0 0 0 1px rgba(139, 92, 246, 0.2);
}

.game-card:focus-within {
    outline: 2px solid var(--selection-secondary);
    outline-offset: 2px;
}

.game-card:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.1s;
}

/* Game card selected state */
.game-card:has(input:checked) {
    border-color: var(--selection-secondary);
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.1) 0%, 
        rgba(124, 58, 237, 0.05) 100%);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.2),
        0 0 20px rgba(139, 92, 246, 0.4),
        var(--shadow-lg);
}

.game-card:has(input:checked) .game-icon {
    background: rgba(139, 92, 246, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.game-card:has(input:checked) h4,
.game-card:has(input:checked) h5,
.game-card:has(input:checked) p {
    color: #7c3aed;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Clean game card selection - no checkmark icons needed */

/* === Stagger Animation for Card Containers === */
.cards-container {
    animation: fadeInUp 0.8s ease-out;
}

.cards-container > * {
    animation: fadeInStagger 0.6s ease-out both;
}

.cards-container > *:nth-child(1) { animation-delay: 0.1s; }
.cards-container > *:nth-child(2) { animation-delay: 0.2s; }
.cards-container > *:nth-child(3) { animation-delay: 0.3s; }
.cards-container > *:nth-child(4) { animation-delay: 0.4s; }
.cards-container > *:nth-child(5) { animation-delay: 0.5s; }
.cards-container > *:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInStagger {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === Motion Safe Preferences === */
@media (prefers-reduced-motion: reduce) {
    .step-card,
    .game-card {
        transition: none;
        animation: none;
    }
    
    .cards-container,
    .cards-container > * {
        animation: none;
    }
}

/* === Enhanced Glass Morphism for Icon Containers === */
.icon-container,
.game-icon {
    transition: all var(--animation-speed) ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* === Improved Typography Contrast === */
.step-card h4,
.game-card h4 {
    font-weight: 600;
    letter-spacing: -0.025em;
}

.step-card p,
.game-card p {
    opacity: 0.8;
    font-weight: 500;
}

/* === Dark Mode Support - Disabled === */
@media (prefers-color-scheme: never) {
    :root {
        --glass-bg: rgba(15, 23, 42, 0.8);
        --glass-border: rgba(255, 255, 255, 0.1);
        --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
        --text-primary-dark: #f1f5f9;
        --text-secondary-dark: #cbd5e1;
        --bg-primary-dark: #0f172a;
        --bg-secondary-dark: #1e293b;
        --border-dark: #334155;
    }
    
    /* Body 다크 모드 */
    body {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: var(--text-primary-dark);
    }
    
    /* Step 및 Game 카드 */
    .step-card,
    .game-card {
        background: var(--glass-bg);
        border-color: var(--glass-border);
        color: var(--text-primary-dark);
    }
    
    .step-card:hover,
    .game-card:hover {
        background: rgba(30, 41, 59, 0.9);
        border-color: rgba(59, 130, 246, 0.4);
    }
    
    .step-card h4,
    .step-card p,
    .game-card h4,
    .game-card h5,
    .game-card p {
        color: var(--text-primary-dark);
    }
    
    /* 견적 디테일 섹션 */
    .quote-detail-section {
        background: var(--bg-secondary-dark);
        border-color: var(--border-dark);
        color: var(--text-primary-dark);
    }
    
    .quote-detail-section:hover {
        background: rgba(30, 41, 59, 0.9);
    }
    
    /* 견적 정보 라벨과 값 */
    .quote-info-label {
        color: var(--text-secondary-dark);
    }
    
    .quote-info-value {
        color: var(--text-primary-dark);
    }
    
    /* 견적 스펙 아이템 */
    .quote-spec-item {
        background: rgba(15, 23, 42, 0.6);
        border-color: var(--border-dark);
        color: var(--text-primary-dark);
    }
    
    .quote-spec-item:hover {
        background: rgba(15, 23, 42, 0.8);
    }
    
    /* 태그 다크 모드 */
    .quote-tag {
        background: var(--bg-secondary-dark);
        color: var(--text-primary-dark);
        border-color: var(--border-dark);
    }
    
    .quote-tag-blue {
        background: rgba(59, 130, 246, 0.2);
        color: #93c5fd;
        border-color: rgba(59, 130, 246, 0.3);
    }
    
    .quote-tag-green {
        background: rgba(34, 197, 94, 0.2);
        color: #86efac;
        border-color: rgba(34, 197, 94, 0.3);
    }
    
    .quote-tag-purple {
        background: rgba(139, 92, 246, 0.2);
        color: #c4b5fd;
        border-color: rgba(139, 92, 246, 0.3);
    }
    
    /* 모달 스크롤바 다크 모드 */
    .modal-scroll::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.3);
    }
    
    .modal-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.5);
    }
    
    .modal-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.7);
    }
}

/* === Quote List Specific Styles === */
.quote-table {
    width: 100%;
    border-collapse: collapse;
}

.quote-table th,
.quote-table td {
    text-align: left;
    vertical-align: middle;
}

.quote-table .col-id {
    width: 80px;
}

.quote-table .col-title {
    width: auto;
    min-width: 300px;
}

.quote-table .col-author {
    width: 120px;
}

.quote-table .col-date {
    width: 120px;
}

.quote-table .col-reply {
    width: 120px;
}

.truncate-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Modal Styles === */
.modal-scroll {
    overflow-y: auto;
}

.modal-scroll::-webkit-scrollbar {
    width: 8px;
}

.modal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* === Quote Detail Modal Enhancements === */

/* Quote detail section consistent styling */
.quote-detail-section {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.quote-detail-section:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Section headers with icons */
.quote-detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.quote-detail-header svg {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Basic info grid layout */
.quote-basic-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.quote-info-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quote-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.quote-info-item:last-child {
    border-bottom: none;
}

.quote-info-label {
    font-weight: 500;
    color: #6B7280;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.quote-info-value {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
    text-align: right;
    margin-left: 1rem;
}

/* Specification cards */
.quote-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.quote-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(249, 250, 251, 0.8);
    border-radius: 0.5rem;
    border: 1px solid rgba(229, 231, 235, 0.5);
    transition: all 0.2s ease;
}

.quote-spec-item:hover {
    background: rgba(243, 244, 246, 0.9);
    transform: translateY(-1px);
}

/* Tag styling for usage, games, and options */
.quote-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.quote-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tag color variants */
.quote-tag-blue {
    background-color: rgba(239, 246, 255, 0.8);
    color: #1E40AF;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.quote-tag-green {
    background-color: rgba(236, 253, 245, 0.8);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.quote-tag-purple {
    background-color: rgba(245, 243, 255, 0.8);
    color: #7C2D12;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Details text area */
.quote-details-content {
    background: rgba(249, 250, 251, 0.8);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(229, 231, 235, 0.5);
    line-height: 1.6;
    font-size: 0.875rem;
    color: #374151;
}

/* Image grid enhancements */
.quote-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

.quote-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(229, 231, 235, 0.5);
    background: rgba(249, 250, 251, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.quote-image-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.quote-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.quote-image-item:hover img {
    transform: scale(1.05);
}

.quote-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
}

.quote-image-item:hover .quote-image-overlay {
    background: rgba(0, 0, 0, 0.3);
}

.quote-image-overlay svg {
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
}

.quote-image-item:hover .quote-image-overlay svg {
    opacity: 1;
}

.quote-image-filename {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6B7280;
    padding: 0 0.25rem;
}

.quote-image-filename div {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quote-basic-info {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .quote-spec-grid {
        grid-template-columns: 1fr;
    }
    
    .quote-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .quote-info-value {
        margin-left: 0;
        text-align: left;
    }
    
    .quote-spec-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        text-align: left;
    }
}

/* Status badge styling */
.quote-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Animation for sections */
.quote-detail-section {
    animation: fadeInSection 0.6s ease-out both;
}

.quote-detail-section:nth-child(1) { animation-delay: 0.1s; }
.quote-detail-section:nth-child(2) { animation-delay: 0.2s; }
.quote-detail-section:nth-child(3) { animation-delay: 0.3s; }
.quote-detail-section:nth-child(4) { animation-delay: 0.4s; }
.quote-detail-section:nth-child(5) { animation-delay: 0.5s; }
.quote-detail-section:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInSection {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Quote Detail Modal Header Buttons === */

/* 삭제 버튼 스타일링 */
#delete-quote-btn {
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

#delete-quote-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

#delete-quote-btn:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

#delete-quote-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#delete-quote-btn:disabled:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: none;
}

/* 삭제 버튼 툴팁 효과 */
#delete-quote-btn::before {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

#delete-quote-btn:hover::before {
    opacity: 1;
}

/* 모달 헤더 버튼 공통 스타일 */
.quote-detail-modal .modal-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.quote-detail-modal .modal-header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quote-detail-modal .modal-header-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 닫기 버튼 스타일링 */
.quote-detail-modal .close-btn:hover {
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.2);
}

/* === Quote Detail Modal Size Adjustments === */

/* 모달 크기 반응형 조정 */
#quote-detail-modal .bg-white {
    width: 95%;
    max-width: none;
}

/* 화면 크기별 모달 최대 너비 설정 */
@media (min-width: 640px) {
    #quote-detail-modal .bg-white {
        width: 90%;
        max-width: 600px;
    }
}

@media (min-width: 768px) {
    #quote-detail-modal .bg-white {
        width: 88%;
        max-width: 800px;
    }
}

@media (min-width: 1024px) {
    #quote-detail-modal .bg-white {
        width: 85%;
        max-width: 1000px;
    }
}

@media (min-width: 1280px) {
    #quote-detail-modal .bg-white {
        width: 80%;
        max-width: 1200px;
    }
}

@media (min-width: 1536px) {
    #quote-detail-modal .bg-white {
        width: 75%;
        max-width: 1400px;
    }
}

@media (min-width: 1920px) {
    #quote-detail-modal .bg-white {
        width: 70%;
        max-width: 1600px;
    }
}

/* 모달 내부 콘텐츠 최적화 */
#quote-detail-modal .quote-basic-info {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

#quote-detail-modal .quote-spec-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#quote-detail-modal .quote-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

@media (min-width: 1024px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (min-width: 1280px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* === 답변(댓글) 카드 스타일 개선 === */
.quote-reply-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding: 1.5rem;
}

.quote-reply-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
}

.quote-reply-header {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.quote-reply-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quote-admin-badge {
    padding: 0.25rem 0.5rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.quote-reply-date {
    font-size: 0.875rem;
    color: #6b7280;
}

.quote-reply-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quote-reply-images {
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* === 상세보기 내용 섹션 스타일 개선 === */
.quote-details-content {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.quote-details-content p {
    color: #374151;
    line-height: 1.7;
    white-space: pre-wrap;
    margin: 0;
}

/* === 넓은 모달에서 그리드 최적화 === */
@media (min-width: 1024px) {
    .quote-detail-section .grid {
        gap: 1.5rem;
    }
    
    .quote-reply-images .grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .quote-reply-images .grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .quote-reply-images .grid {
        grid-template-columns: repeat(14, minmax(0, 1fr));
    }
}

/* 모달 크기 및 반응형 */
@media (min-width: 640px) {
    #quote-detail-modal .max-w-7xl {
        max-width: 95vw;
    }
}

@media (min-width: 768px) {
    #quote-detail-modal .max-w-7xl {
        max-width: 800px;
    }
}

@media (min-width: 1024px) {
    #quote-detail-modal .max-w-7xl {
        max-width: 1000px;
    }
}

@media (min-width: 1280px) {
    #quote-detail-modal .max-w-7xl {
        max-width: 1200px;
    }
}

@media (min-width: 1536px) {
    #quote-detail-modal .max-w-7xl {
        max-width: 1400px;
    }
}

@media (min-width: 1920px) {
    #quote-detail-modal .max-w-7xl {
        max-width: 1600px;
    }
}

/* 댓글 섹션 전체 폭 활용 */
#replies-container {
    width: 100%;
    max-width: none;
}

#reply-form {
    width: 100%;
    max-width: none;
}

/* 댓글 카드 스타일 개선 */
.reply-card-modern {
    width: 100%;
    max-width: none;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}

/* 일반 사용자 댓글 카드 */
.reply-card-modern:not([data-admin="true"]) {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

/* 관리자 댓글 카드 */
.reply-card-modern[data-admin="true"] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-left: 4px solid #3b82f6 !important;
    border-top: 1px solid #93c5fd !important;
    border-right: 1px solid #93c5fd !important;
    border-bottom: 1px solid #93c5fd !important;
}

.reply-card-modern:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* 상세 요청사항 폭 개선 */
.quote-details-content {
    width: 100%;
    max-width: none;
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #3b82f6;
}

.quote-details-content p {
    line-height: 1.7;
    color: #374151;
    margin: 0;
}

/* 댓글 이미지 그리드 개선 */
.reply-image-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

@media (min-width: 640px) {
    .reply-image-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 768px) {
    .reply-image-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 1024px) {
    .reply-image-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

@media (min-width: 1280px) {
    .reply-image-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

@media (min-width: 1536px) {
    .reply-image-grid {
        grid-template-columns: repeat(14, 1fr);
    }
}

/* 이미지 호버 효과 개선 */
.image-hover-effect {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.image-hover-effect:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.image-hover-effect img {
    transition: transform 0.2s ease-in-out;
}

.image-hover-effect:hover img {
    transform: scale(1.05);
}

/* 답변 작성 폼 스타일 개선 */
.reply-form-container {
    width: 100%;
    max-width: none;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 업로드 영역 스타일 개선 */
.upload-zone {
    transition: all 0.2s ease-in-out;
    border: 2px dashed #cbd5e1;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.upload-zone:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    transform: translateY(-1px);
}

.paste-zone {
    transition: all 0.2s ease-in-out;
    border: 2px dashed #cbd5e1;
    background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%);
}

.paste-zone:hover {
    border-color: #22c55e;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    transform: translateY(-1px);
}

.paste-zone:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* 이미지 미리보기 그리드 스타일 */
.image-preview-grid {
    display: grid;
    gap: 12px;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

@media (min-width: 768px) {
    .image-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (min-width: 1024px) {
    .image-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
}

/* 추가 반응형 폭 유틸리티 */
.w-full-important {
    width: 100% !important;
    max-width: none !important;
}

.max-w-none-important {
    max-width: none !important;
}

/* 스크롤바 스타일 개선 */
#quote-detail-modal .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

#quote-detail-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

#quote-detail-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#quote-detail-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 텍스트 가독성 개선 */
.prose-enhanced {
    line-height: 1.8;
    color: #374151;
}

.prose-enhanced p {
    margin-bottom: 1rem;
}

.prose-enhanced p:last-child {
    margin-bottom: 0;
}

/* === 모달 전체 폭 활용을 위한 오버라이드 === */
#quote-detail-modal .quote-detail-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#quote-detail-modal .quote-basic-info {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

#quote-detail-modal .quote-spec-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

#quote-detail-modal .quote-info-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

#quote-detail-modal .quote-info-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin-bottom: 0.25rem !important;
}

#quote-detail-modal .quote-info-value {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

#quote-detail-modal .quote-spec-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

#quote-detail-modal .quote-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    margin: 0.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease-in-out !important;
}

#quote-detail-modal .quote-details-content {
    width: 100% !important;
    max-width: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
}

/* 이미지 그리드 전체 폭 활용 */
#quote-detail-modal .quote-image-grid {
    display: grid !important;
    width: 100% !important;
    gap: 1rem !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
}

@media (min-width: 640px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    }
    
    #quote-detail-modal .quote-basic-info {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    #quote-detail-modal .quote-spec-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1280px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
    }
}

@media (min-width: 1536px) {
    #quote-detail-modal .quote-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
    }
}

/* 댓글 섹션 전체 폭 활용 강화 */
#replies-container {
    width: 100% !important;
    max-width: none !important;
}

#replies-container > * {
    width: 100% !important;
    max-width: none !important;
}

#reply-form {
    width: 100% !important;
    max-width: none !important;
}

#reply-form > * {
    width: 100% !important;
    max-width: none !important;
}

/* 댓글 카드 스타일 개선 - 중복 제거, 위쪽 정의 사용 */
.reply-card-modern {
    width: 100% !important;
    max-width: none !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease-in-out !important;
}

.reply-card-modern:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

/* 전역 강제 폭 적용 */
.w-full-force {
    width: 100% !important;
    max-width: none !important;
}

.max-w-none-force {
    max-width: none !important;
}

/* 이미지 클릭 이벤트 개선 */
.quote-image-clickable {
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.quote-image-clickable:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* 상세 요청사항 폭 개선 */
.quote-details-content {
    width: 100% !important;
    max-width: none !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border-left: 4px solid #3b82f6 !important;
}

.quote-details-content p {
    line-height: 1.7 !important;
    color: #374151 !important;
    margin: 0 !important;
}

/* 모달 내부 컨테이너 폭 강제 적용 */
#quote-detail-content {
    width: 100% !important;
    max-width: none !important;
}

#quote-detail-content > * {
    width: 100% !important;
    max-width: none !important;
}

#quote-detail-content .space-y-6 > * {
    width: 100% !important;
    max-width: none !important;
}

/* 플렉스 박스 래핑 개선 */
.flex-wrap-improved {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: flex-start !important;
}

/* 그리드 시스템 개선 */
.grid-responsive-full {
    display: grid !important;
    width: 100% !important;
    gap: 1rem !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

@media (min-width: 1024px) {
    .grid-responsive-full {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 텍스트 가독성 개선 */
.prose-enhanced {
    line-height: 1.8 !important;
    color: #374151 !important;
}

.prose-enhanced p {
    margin-bottom: 1rem !important;
}

.prose-enhanced p:last-child {
    margin-bottom: 0 !important;
}

/* === 견적 상세보기 모달 스타일 전면 개선 === */

/* 모달 전체 배경 및 구조 */
#quote-detail-modal {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#quote-detail-modal .bg-white {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 모달 헤더 스타일 강화 */
#quote-detail-modal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
}

#quote-detail-modal .modal-header h3 {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#quote-detail-modal .modal-header button {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease;
}

#quote-detail-modal .modal-header button:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* === 견적 본문 영역 스타일 === */
#quote-detail-content {
    background: #fafbfc !important;
    border-bottom: 3px solid #e5e7eb !important;
    position: relative;
}

#quote-detail-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    border-radius: 0 0 12px 12px;
}

/* 견적 정보 섹션 개선 */
.quote-detail-section {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.quote-detail-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}

.quote-detail-section:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* 섹션 헤더 개선 */
.quote-detail-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    margin: -24px -24px 20px -24px !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.quote-detail-header svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* === 댓글 영역 스타일 === */
#quote-detail-modal .border-t.border-gray-200.bg-gray-50 {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-top: 4px solid #cbd5e1 !important;
    margin-top: 20px !important;
    position: relative;
}

/* 댓글 카드를 더 작고 간단하게 */
.reply-card-modern {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 16px !important;
    transition: all 0.2s ease !important;
}

.reply-card-modern:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* 댓글 내부 간격 조정 */
.reply-card-modern .w-10.h-10 {
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.reply-card-modern .prose-enhanced {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    font-size: 0.9rem !important;
}

/* 댓글 작성 폼도 더 간단하게 */
#reply-form {
    background: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    margin-top: 20px !important;
}

/* === 모달 내부 전체 폭 활용 강제 === */
#quote-detail-modal .modal-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#quote-detail-modal .modal-content > div {
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
}

/* 메인 게시글 카드 전체 폭 강제 */
#quote-detail-modal .main-post-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 32px auto !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #e5e7eb !important;
    animation: fadeInScale 0.6s ease-out;
}

#quote-detail-modal .main-post-card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* 게시글 헤더 전체 폭 */
#quote-detail-modal .post-header {
    width: 100% !important;
    position: relative;
    overflow: hidden;
}

#quote-detail-modal .post-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="90" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

#quote-detail-modal .post-header h1 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 게시글 본문 전체 폭 */
#quote-detail-modal .post-content {
    width: 100% !important;
    background: #fefefe;
    position: relative;
}

/* 모든 내부 컨테이너 전체 폭 강제 */
#quote-detail-modal .content-section,
#quote-detail-modal .tag-container,
#quote-detail-modal .spec-grid,
#quote-detail-modal .detail-content,
#quote-detail-modal .image-gallery {
    width: 100% !important;
    max-width: none !important;
}

/* 게시글 푸터 전체 폭 */
#quote-detail-modal .post-footer {
    width: 100% !important;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-top: 1px solid #e5e7eb;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .post-header {
        padding: 20px;
    }
    
    .post-content {
        padding: 20px;
    }
    
    .spec-grid {
        grid-template-columns: 1fr;
    }
    
    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
        padding: 12px;
    }
    
    .tag-container {
        gap: 6px;
    }
    
    .content-tag {
        padding: 4px 12px;
        font-size: 0.8rem;
    }
}

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

/* === 기존 게시글 스타일 디자인 (모달 내부용) === */

/* 콘텐츠 섹션 */
#quote-detail-modal .content-section {
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

#quote-detail-modal .content-section:last-child {
    border-bottom: none;
}

#quote-detail-modal .content-section:hover {
    background: rgba(59, 130, 246, 0.02);
    border-radius: 12px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
}

/* 섹션 제목 */
#quote-detail-modal .section-title {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    gap: 8px;
}

#quote-detail-modal .section-title svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 태그 컨테이너 */
#quote-detail-modal .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#quote-detail-modal .content-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: default;
}

#quote-detail-modal .content-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#quote-detail-modal .tag-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
}

#quote-detail-modal .tag-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-color: #86efac;
}

#quote-detail-modal .tag-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c2d12;
    border-color: #c4b5fd;
}

#quote-detail-modal .tag-orange {
    background: linear-gradient(135deg, #fed7aa 0%, #fdd8b5 100%);
    color: #c2410c;
    border-color: #fb923c;
}

#quote-detail-modal .payment-delivery-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

#quote-detail-modal .payment-delivery-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

#quote-detail-modal .payment-delivery-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    min-width: 80px;
}

/* 사양 그리드 */
#quote-detail-modal .spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

#quote-detail-modal .spec-item {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

#quote-detail-modal .spec-item:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

#quote-detail-modal .spec-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

#quote-detail-modal .spec-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

/* 상세 내용 */
#quote-detail-modal .detail-content {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 0 12px 12px 0;
    padding: 20px;
    margin-top: 8px;
}

#quote-detail-modal .detail-content p {
    color: #374151;
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

/* 이미지 갤러리 */
#quote-detail-modal .image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

#quote-detail-modal .image-item {
    aspect-ratio: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#quote-detail-modal .image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#quote-detail-modal .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

#quote-detail-modal .image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

#quote-detail-modal .image-item:hover .image-overlay {
    opacity: 1;
}

#quote-detail-modal .image-filename {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 8px;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(100%);
}

#quote-detail-modal .image-item:hover .image-filename {
    opacity: 1;
    transform: translateY(0);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    #quote-detail-modal .post-header {
        padding: 20px;
    }
    
    #quote-detail-modal .post-content {
        padding: 20px;
    }
    
    #quote-detail-modal .spec-grid {
        grid-template-columns: 1fr;
    }
    
    #quote-detail-modal .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
        padding: 12px;
    }
    
    #quote-detail-modal .tag-container {
        gap: 6px;
    }
    
    #quote-detail-modal .content-tag {
        padding: 4px 12px;
        font-size: 0.8rem;
    }
}

/* === 스크롤바 개선 === */
#quote-detail-modal .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

#quote-detail-modal .overflow-y-auto::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 4px;
}

#quote-detail-modal .overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6 0%, #3b82f6 100%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#quote-detail-modal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed 0%, #2563eb 100%);
}

/* === 애니메이션 개선 === */
.quote-detail-section {
    animation: slideInUp 0.4s ease-out;
}

.reply-card-modern {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === 상태별 색상 개선 === */
.quote-status-badge {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 태그 스타일 개선 */
.quote-tag {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.quote-tag:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* === 게시글 스타일 디자인 === */

/* 메인 게시글 카드 */
.main-post-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid #e5e7eb !important;
    animation: fadeInScale 0.6s ease-out;
}

.main-post-card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* 게시글 헤더 */
.post-header {
    position: relative;
    overflow: hidden;
}

.post-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="90" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

.post-header h1 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 게시글 본문 */
.post-content {
    background: #fefefe;
    position: relative;
}

/* 콘텐츠 섹션 */
.content-section {
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.content-section:last-child {
    border-bottom: none;
}

.content-section:hover {
    background: rgba(59, 130, 246, 0.02);
    border-radius: 12px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
}

/* 섹션 제목 */
.section-title {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    gap: 8px;
}

.section-title svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 태그 컨테이너 */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.content-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: default;
}

.content-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tag-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
}

.tag-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-color: #86efac;
}

.tag-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c2d12;
    border-color: #c4b5fd;
}

.tag-orange {
    background: linear-gradient(135deg, #fed7aa 0%, #fdd8b5 100%);
    color: #c2410c;
    border-color: #fb923c;
}

/* 결제방법과 배송방법 컨테이너 */
.payment-delivery-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.payment-delivery-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-delivery-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    min-width: 80px;
}

/* 사양 그리드 */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.spec-item {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.spec-item:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.spec-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.spec-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

/* 상세 내용 */
.detail-content {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 0 12px 12px 0;
    padding: 20px;
    margin-top: 8px;
}

.detail-content p {
    color: #374151;
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

/* 이미지 갤러리 */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.image-item {
    aspect-ratio: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.image-item:hover .image-overlay {
    opacity: 1;
}

.image-filename {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 8px;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(100%);
}

.image-item:hover .image-filename {
    opacity: 1;
    transform: translateY(0);
}

/* 게시글 푸터 */
.post-footer {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-top: 1px solid #e5e7eb;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .post-header {
        padding: 20px;
    }
    
    .post-content {
        padding: 20px;
    }
    
    .spec-grid {
        grid-template-columns: 1fr;
    }
    
    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
        padding: 12px;
    }
    
    .tag-container {
        gap: 6px;
    }
    
    .content-tag {
        padding: 4px 12px;
        font-size: 0.8rem;
    }
}

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

/* === 기존 게시글 스타일 디자인 (모달 내부용) === */

/* 콘텐츠 섹션 */
#quote-detail-modal .content-section {
    padding: 20px 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

#quote-detail-modal .content-section:last-child {
    border-bottom: none;
}

#quote-detail-modal .content-section:hover {
    background: rgba(59, 130, 246, 0.02);
    border-radius: 12px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
}

/* 섹션 제목 */
#quote-detail-modal .section-title {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    gap: 8px;
}

#quote-detail-modal .section-title svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 태그 컨테이너 */
#quote-detail-modal .tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#quote-detail-modal .content-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: default;
}

#quote-detail-modal .content-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#quote-detail-modal .tag-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
}

#quote-detail-modal .tag-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-color: #86efac;
}

#quote-detail-modal .tag-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c2d12;
    border-color: #c4b5fd;
}

/* 사양 그리드 */
#quote-detail-modal .spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

#quote-detail-modal .spec-item {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

#quote-detail-modal .spec-item:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

#quote-detail-modal .spec-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

#quote-detail-modal .spec-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

/* 상세 내용 */
#quote-detail-modal .detail-content {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 0 12px 12px 0;
    padding: 20px;
    margin-top: 8px;
}

#quote-detail-modal .detail-content p {
    color: #374151;
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

/* 이미지 갤러리 */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.image-item {
    aspect-ratio: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.image-item:hover .image-overlay {
    opacity: 1;
}

.image-filename {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 8px;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(100%);
}

.image-item:hover .image-filename {
    opacity: 1;
    transform: translateY(0);
}

/* 게시글 푸터 */
.post-footer {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-top: 1px solid #e5e7eb;
}

/* 반응형 디자인 및 모바일 최적화 */
@media (max-width: 768px) {
    .post-header {
        padding: 16px;
    }
    
    .post-content {
        padding: 16px;
    }
    
    .spec-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .spec-item {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    .spec-label {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    
    .spec-value {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
        padding: 12px;
    }
    
    .tag-container {
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .content-tag {
        padding: 4px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .section-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .content-section {
        margin-bottom: 20px;
    }
    
    /* 모바일에서 헤더 텍스트 크기 조정 */
    .post-header h1 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    .post-header h3 {
        font-size: 1.1rem;
    }
    
    .post-header .text-blue-100 {
        font-size: 0.8rem;
    }
    
    /* 결제/배송 정보 모바일 최적화 */
    .payment-delivery-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .payment-delivery-item {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    /* 게시글 푸터 모바일 최적화 */
    .post-footer .flex.items-center.justify-between {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .post-footer .flex.items-center.space-x-4 {
        gap: 16px;
        flex-wrap: wrap;
    }
    
    .post-footer .flex.items-center.space-x-4 span {
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    .post-footer .text-gray-500 {
        font-size: 0.8rem;
        align-self: flex-end;
    }
    
    /* 댓글 카드 수정/삭제 버튼 모바일 최적화 */
    .reply-card-modern .flex.justify-between.items-start {
        gap: 8px;
        align-items: flex-start;
    }
    
    .reply-card-modern .flex.items-center.space-x-2 {
        flex-direction: column;
        gap: 6px;
        align-items: flex-end;
        flex-shrink: 0;
    }
    
    .reply-card-modern .flex.items-center.space-x-2 button {
        padding: 8px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }
    
    .reply-card-modern .flex.items-center.space-x-2 button span {
        display: none;
    }
    
    .reply-card-modern .flex.items-center.space-x-2 button svg {
        width: 16px;
        height: 16px;
        margin: 0;
    }
    
    .reply-card-modern .flex.items-center.space-x-2 button:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

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

/* === 상태 변경 드롭다운 스타일 === */
.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(219, 234, 254, 0.9), rgba(147, 197, 253, 0.9));
    color: #1e40af;
}

.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(239 246 255);
    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;
}

#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.1),
        0 2px 8px rgba(0, 0, 0, 0.1) !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.2),
        0 4px 12px rgba(0, 0, 0, 0.1) !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 2px 8px rgba(0, 0, 0, 0.05) !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;
    }
}