/* ===================================================================== */
/* 🎨 MlangPrintAuto 공통 스타일 시트 */
/* Wall Street 프로페셔널 디자인 - 정숙한 사무실 분위기 */
/* Phase 1 Quick Win: 디자인 토큰 변수 적용 */
/* Phase 2: !important 제거 - 명시도 계층화 */
/* ===================================================================== */

/* 디자인 토큰 임포트 */
@import url('design-tokens.css');

/* =================================================================== */
/* CSS 명시도 우선순위 설계 */
/* =================================================================== */
/*
  레벨 1: 디자인 토큰 (변수 정의)
  레벨 2: 리셋/기본 스타일
  레벨 3: 공통 컴포넌트 (.page-title, .inline-form-row 등)
  레벨 4: 제품별 스타일 (namecard-compact.css 등)
  레벨 5: 상태별 스타일 (:hover, :focus 등)

  원칙: !important 대신 명시도(specificity)로 우선순위 제어
*/

/* =================================================================== */
/* 0. 공통 유틸리티 클래스 */
/* =================================================================== */
.hidden {
    display: none;
}

.gallery-placeholder {
    padding: var(--spacing-5);
    text-align: center;
    color: var(--color-gray-600);
}

/* =================================================================== */
/* 0.5. 상단 헤더 스타일 (header-ui.php) */
/* =================================================================== */
.top-header {
    background: #1E4E79; /* 브랜드 네이비 - 단색 배경 */
    color: white;
    padding: 15px 0;
    box-shadow: none; /* Excel 스타일 - 그림자 제거 */
    margin-bottom: 0px;
    border-bottom: 1px solid #153A5A;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo-section {
    flex: 1;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
}

.logo-icon {
    width: 50px;
    height: 50px;
    object-fit: cover;  /* 원형에 맞게 채우기 */
    border-radius: 50%;  /* 원형 */
}

.company-info h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.company-info p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.contact-info {
    display: flex;
    gap: 15px;
    align-items: center;
}

.contact-card {
    display: inline-block;
    text-align: center;
    padding: 0;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
}

.contact-text,
.contact-card button {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.contact-text:hover,
.contact-card button:hover {
    opacity: 0.8;
    background: transparent;
    border: none;
}

.user-info-header {
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: white;
}

/* SP: !important 제거 - 명시도로 해결 */
.top-header .user-info-header .value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #00D4FF;
}

/* =================================================================== */
/* 1. 페이지 타이틀 공통 스타일 (명시도: 10) */
/* =================================================================== */
.page-title {
    margin: 0 10px var(--page-title-margin-bottom);
    padding: var(--spacing-2) 0;
    border-radius: 0;
    background: rgba(30, 78, 121, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-title h1 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    margin: 0;
    color: #1E4E79;
    text-shadow: none;
}

.page-title p {
    margin: var(--spacing-1) 0 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    color: #1E4E79;
    opacity: 0.8;
}

/* =================================================================== */
/* 2. 인라인 폼 레이아웃 시스템 (스티커 스타일) */
/* =================================================================== */

/* 인라인 폼 행 레이아웃 (명시도: 10) */
.inline-form-row {
    display: flex;
    align-items: center;
    margin: var(--spacing-1) 0;
    gap: var(--spacing-2);
    min-height: 36px;
}

/* 인라인 라벨 스타일 (명시도: 10) */
.inline-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    min-width: 40px;
    text-align: right;
    margin: 0;
    font-family: var(--font-family-primary);
}

/* 인라인 셀렉트 박스 스타일 (명시도: 10) */
.inline-select {
    flex: 0 0 140px;
    height: var(--form-input-height);
    padding: 0 var(--spacing-2);
    border: var(--border-width-thin) solid var(--color-gray-300);
    border-radius: var(--form-input-radius);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background: var(--color-white);
    font-family: var(--font-family-primary);
}

/* 인라인 인풋 박스 스타일 (명시도: 10) */
.inline-input {
    flex: 0 0 100px;
    height: var(--form-input-height);
    padding: 0 var(--spacing-2);
    border: var(--border-width-thin) solid var(--color-gray-300);
    border-radius: var(--form-input-radius);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background: var(--color-white);
    font-family: var(--font-family-primary);
}

/* number/text input 폰트 크기 강제 (브라우저 기본 16px override) */
input[type="number"].inline-input,
input[type="text"].inline-input {
    font-size: var(--font-size-sm);
}

/* placeholder 스타일 - 라벨과 동일한 크기 */
.inline-input::placeholder {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

/* 인라인 노트 (설명글) 스타일 (명시도: 10) */
.inline-note {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    margin: 0;
    flex: 1;
    font-family: var(--font-family-primary);
}

/* 포커스 상태 (명시도: 20 - 상태 선택자) */
.inline-select:focus,
.inline-input:focus {
    outline: none;
    border-color: var(--form-input-focus-border);
    box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.1);
}

/* =================================================================== */
/* 3. 플렉스 레이아웃 - 편집디자인 수평 정렬 */
/* =================================================================== */

/* 편집디자인 플렉스 레이아웃 - 모든 품목 공통 (명시도: 10) */
.design-flex-layout {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
}

.design-flex-layout .option-label {
    flex-shrink: 0;
    min-width: 80px;
    margin-right: var(--spacing-3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.design-flex-layout .design-options-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.design-flex-layout .option-select {
    flex: 1;
    min-width: 150px;
}

/* 모든 옵션 그룹의 수평 정렬 개선 (명시도: 20 - 복합 클래스) */
.option-group.form-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.option-group.form-field .option-label {
    flex-shrink: 0;
    min-width: 80px;
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.option-group.form-field .option-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    background-color: var(--color-white);
    transition: border-color var(--transition-fast);
}

.option-group.form-field .option-select:focus {
    outline: none;
    border-color: var(--color-namecard);
    box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.1);
}

/* 갤러리 스타일 - 하단 통합 섹션 참조 */

/* =================================================================== */
/* 3. 계산기 섹션 - 하단 통합 섹션 참조 */
/* =================================================================== */

.calculator-header {
    background: linear-gradient(135deg, var(--dsp-accent) 0%, var(--dsp-accent-dark) 100%);
    color: white;
    padding: 15px 20px;
    margin: -25px -25px 20px -25px;
    border-radius: 15px 15px 0 0;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 10px rgba(255, 213, 0, 0.3);
}

.calculator-header h3 {
    font-size: 1.2rem;
    line-height: 1.2;
    margin: 0;
    color: white;
    font-weight: 600;
}

/* =================================================================== */
/* 4. 가격 표시 - 하단 통합 섹션 참조 */
/* =================================================================== */

/* 완전 수평 가격 정렬 시스템 - 깔끔한 텍스트만 */
.price-breakdown {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0; /* 패딩 제거 */
    background: none; /* 배경 제거 */
    border: none; /* 테두리 제거 */
    margin: 8px 0;
    font-size: 0.85rem;
    gap: 8px; /* 항목 간 간격 - 옵션 추가시 폭 확장 방지 */
    flex-wrap: nowrap; /* 한 줄 유지 */
    white-space: nowrap;
}

/* 개별 가격 항목 - 컴팩트 스타일 */
.price-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.price-item-label {
    color: #495057;
    font-weight: 500;
    font-size: 0.85rem;
}

.price-item-value {
    color: var(--dsp-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

/* 구분선 */
.price-divider {
    width: 1px;
    height: 18px;
    background: #dee2e6;
    flex-shrink: 0;
}

/* 최종 금액 강조 (텍스트만) */
.price-item.final {
    background: none; /* 배경 제거 */
    padding: 0; /* 패딩 제거 */
    border: none; /* 테두리 제거 */
}

.price-item.final .price-item-label {
    color: #495057; /* 다른 라벨과 동일한 색상 */
    font-weight: 500; /* 다른 라벨과 동일한 굵기 */
    font-size: 0.85rem; /* 다른 라벨과 동일한 크기 */
}

.price-item.final .price-item-value {
    color: #dc3545; /* 적색 - 금액만 강조 */
    font-weight: 700;
    font-size: 1.05rem; /* 2pt 크게 */
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .price-breakdown {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    
    .price-item {
        justify-content: space-between;
        padding: 4px 0;
    }
    
    .price-divider {
        display: none; /* 모바일에서 구분선 숨김 */
    }
}

/* 기존 price-vat, price-note 제거됨 - price-breakdown 시스템 사용 */

/* =================================================================== */
/* 5. CTA 버튼 공통 스타일 */
/* =================================================================== */
/* 공통 업로드 버튼 - SSOT (Single Source of Truth) */
.btn-upload-order {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    padding: 15px 30px;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-upload-order:hover {
    background: linear-gradient(135deg, #43A047, #5CB85C);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.btn-upload-order:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* =================================================================== */
/* 6. 폼 요소 - 하단 통합 섹션 참조 */
/* =================================================================== */

/* 라벨 스타일 - 하단 통합 섹션 참조 */

/* =================================================================== */
/* 6-2. 수평 폼 레이아웃 시스템 (라벨-셀렉트 한 줄 배치) */
/* =================================================================== */

/* 수평 폼 그룹 - 하단 통합 섹션 참조 */

/* 2열 수평 레이아웃 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 12px;
}

/* 3열 수평 레이아웃 */
.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 12px;
}

/* design-inline 클래스 제거됨 - form-group-horizontal 사용 */

/* 컴팩트 폼 (초소형) */
.form-compact .form-group-horizontal,
.form-compact .option-group-horizontal {
    gap: 8px;
    margin-bottom: 6px;
}

.form-compact .option-label {
    min-width: 60px;
    font-size: 0.8rem;
}

.form-compact .option-select,
.form-compact select {
    padding: 4px 10px;
    font-size: 0.85rem;
}

/* =================================================================== */
/* 7. 반응형 디자인 */
/* =================================================================== */

/* === 제품 네비게이션 스타일 === */
/* 네비게이션 래퍼 */
.cart-nav-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 레벨 1: 기본 데스크톱 스타일 */
.product-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0.5rem;
    justify-content: center;
    padding: 1rem 0;
    background: transparent;
}

/* 네비게이션 버튼 기본 스타일 */
.product-nav .nav-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.product-nav .nav-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.product-nav .nav-btn.active {
    background: #5a6268;
}

/* 레벨 2: 모바일 3x3 그리드 */
@media (max-width: 768px) {
    /* 장바구니 컨테이너 모바일 최적화 */
    .cart-container,
    .cart-nav-wrapper {
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    .product-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 4px 0;
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    .product-nav .nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 4px;
        font-size: 11px;
        text-align: center;
        white-space: nowrap;
        line-height: 1.2;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        min-height: 40px;
        width: 100%;
        box-sizing: border-box;
        background: #6c757d;
        color: white;
        text-decoration: none;
    }

    .product-nav .nav-btn:hover,
    .product-nav .nav-btn.active {
        background: #5a6268;
    }
}

@media (max-width: 768px) {
    /* === 모바일 헤더 최적화 === */
    .top-header {
        padding: 10px 0;
    }

    .header-content {
        flex-direction: row; /* 가로 배치 유지 */
        gap: 8px;
        padding: 0 10px;
        align-items: center;
        justify-content: space-between;
    }

    .logo-section {
        flex: 0 0 auto;
        min-width: 0;
    }

    .logo-link {
        gap: 8px;
    }

    .logo-icon {
        width: 35px;
        height: 35px;
        flex-shrink: 0;
    }

    .company-info h1 {
        font-size: 1rem;
        white-space: nowrap;
    }

    .company-info p {
        display: none; /* 서브텍스트 숨김 */
    }

    .contact-info {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
    }

    .contact-card {
        flex: 0 0 auto;
    }

    .contact-text,
    .contact-card button {
        padding: 6px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .user-info-header {
        padding: 6px 10px;
    }

    /* SP: !important 제거 - 명시도로 해결 */
    .top-header .user-info-header .value {
        font-size: 0.85rem;
        color: #00D4FF;
    }

    /* === 나머지 모바일 스타일 === */

    .page-title {
        padding: 15px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-title h1 {
        font-size: 1.4rem;
        text-align: center;
    }

    /* 모바일에서 재질보기 버튼 숨김 - 제목 중앙 정렬 위해 */
    .page-title h1 .btn-texture-view {
        display: none;
    }

    .calculator-header {
        padding: 15px 20px;
    }

    .price-display .price-amount {
        font-size: 1.5rem;
    }

    /* 모바일 셀렉트/인풋 스타일 - 얇은 가로 막대 형태 유지 */
    .option-select, select, input[type="text"], input[type="email"], textarea {
        padding: 8px 15px;
        height: 44px; /* 모바일 터치 최적화 높이 */
        width: 100%; /* 전체 너비 */
        box-sizing: border-box;
        font-size: 16px; /* iOS 확대 방지 */
        -webkit-appearance: none; /* iOS 기본 스타일 제거 */
        appearance: none;
        border-radius: 8px;
    }

    /* select 드롭다운 화살표 추가 */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 35px;
    }

    .gallery-section,
    .calculator-section {
        padding: 20px;
        margin: 0 auto; /* 센터 정렬 */
        max-width: 100%; /* 화면 너비 제한 */
        border-radius: 10px;
        height: auto; /* 자동 높이 */
        box-sizing: border-box;
    }

    /* === 모바일 인라인 레이아웃 조정 === */

    /* 모바일에서 인라인 폼 조정 */
    .form-group-horizontal {
        flex-direction: column; /* 세로 배치 */
        align-items: stretch;
        gap: 4px;
        padding: 12px 0;
    }

    /* 모바일 라벨 */
    .form-group-horizontal .option-label {
        min-width: auto;
        text-align: right; /* 통일 시스템 - 우측 정렬 */
        font-size: 14px;
        margin-bottom: 4px;
    }

    /* 모바일 드롭다운 */
    .form-group-horizontal .option-select {
        max-width: none;
        width: 100%;
    }

    .gallery-title {
        margin: -20px -20px 15px -20px;
        padding: 12px 15px;
        font-size: 1rem;
    }
}

/* =================================================================== */
/* 8. 색상 변수 정의 (브랜드 디자인 시스템) */
/* =================================================================== */
:root {
    /* 브랜드 메인 컬러 - Deep Navy */
    --primary-blue: #1E4E79;
    --primary-blue-light: #2D6FA8;
    --primary-blue-dark: #153A5A;

    /* 브랜드 포인트 컬러 - Bright Yellow */
    --brand-yellow: #FFD500;
    --brand-yellow-dark: #E6C000;

    /* 레거시 호환 */
    --background-light: #f7fafc;
    --background-gray: #edf2f7;
    --text-dark: #2d3748;
    --border-light: #e9ecef;
    --success-green: var(--dsp-primary);
    --white: #ffffff;

    /* === 초컴팩트 레이아웃 전용 변수 (사용자 요청 최종 확정값) === */
    --form-row-margin: 2px 0; /* 행간격 최소화 */
    --form-row-padding: 3px 0; /* 패딩 최소화 */
    --form-row-gap: 8px; /* 라벨-드롭다운 간격 */
    --label-min-width: 80px; /* 라벨 고정 폭 */
}

/* =================================================================== */
/* 9. 유틸리티 클래스 */
/* =================================================================== */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.rounded { border-radius: 0.25rem; }
.shadow { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,0.175); }

/* =================================================================== */
/* 10. 전단지 정보 섹션 공통 스타일 */
/* =================================================================== */
.flyer-info-section {
    margin-top: 5px;
    margin-bottom: 0.2rem;
}

.flyer-info-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.flyer-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.hapan-title, .합판전단지-title, .flyer-title-hapan {
    background: #e0e0e0;
    color: #333333;
    padding: 20px;
    text-align: center;
    border-radius: 0;
    margin: 0;
}

.dokpan-title, .독판전단지-title, .flyer-title-dokpan {
    background: #e0e0e0;
    color: #333333;
    padding: 20px;
    text-align: center;
    border-radius: 0;
    margin: 0;
}

.hapan-title h3, .dokpan-title h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.flyer-hairline {
    height: 2px;
    background: linear-gradient(90deg, transparent, #ccc, transparent);
}

.flyer-content {
    padding: 25px;
    line-height: 1.6;
}

.flyer-content p {
    margin-bottom: 1.5rem;
    color: #495057;
    font-weight: 500;
}

.flyer-specs {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.flyer-specs h4 {
    color: #666;
    margin-bottom: 10px;
    font-size: 1rem;
}

.flyer-specs ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #555;
    font-size: 0.9rem;
}

.flyer-specs p {
    margin-top: 10px;
    color: #666;
    font-size: 0.85rem;
}

.flyer-tip {
    background: var(--dsp-primary-lighter);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid var(--dsp-primary);
}

.flyer-tip p {
    margin: 0;
    color: var(--dsp-primary-dark);
    font-size: 0.9rem;
    font-weight: 500;
}

/* =================================================================== */
/* 11. 갤러리 모달 공통 스타일 */
/* =================================================================== */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.gallery-modal-content {
    position: relative;
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 1000px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s ease-out;
}

.gallery-modal-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gallery-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.gallery-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.gallery-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.gallery-grid img:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #1e3c72;
}

/* =================================================================== */
/* 12. 갤러리 공통 스타일 */
/* =================================================================== */
.gallery-section {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.lightbox-viewer {
    width: 100%;
    height: 240px;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    cursor: zoom-in;
    transition: border-color 0.3s ease;
    border: 2px solid #e9ecef;
    position: relative;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.lightbox-viewer:hover {
    border-color: #1e3c72;
}

.thumbnail-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.thumbnail-strip img {
    width: 100%;
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    opacity: 0.7;
}

.thumbnail-strip img:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-color: #1e3c72;
}

.thumbnail-strip img.active {
    opacity: 1;
    border-color: #1e3c72;
    box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}

.proof-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.proof-large {
    width: 100%;
    height: 240px;
}

.proof-large .viewport {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f9f9f9;
    position: relative;
}

.proof-large img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 220ms ease;
    transform-origin: center center;
}

.proof-large .viewport.zoom-active img {
    transform: scale(1.35);
}

.proof-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}

.proof-thumbs .thumb {
    width: 100%;
    height: 65px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #ddd;
    cursor: pointer;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.proof-thumbs .thumb:hover {
    border-color: #1e3c72;
    transform: translateY(-2px);
}

.proof-thumbs .thumb.active {
    border-color: #1e3c72;
    box-shadow: 0 4px 8px rgba(30, 60, 114, 0.2);
}

.proof-thumbs .thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.leafletGallery .loading {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    font-size: 1.1rem;
    background: white;
    border-radius: 12px;
    animation: pulse 2s infinite;
}

.leafletGallery .error {
    text-align: center;
    padding: 40px 20px;
    color: #dc3545;
    background: #fff5f5;
    border: 1px solid #ffdddd;
    border-radius: 12px;
    font-size: 0.95rem;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 갤러리 페이지네이션 공통 스타일 */
.leafletGallery .gallery-pagination,
.gallery-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #e9ecef;
    background: #fafafa;
    border-radius: 0 0 15px 15px;
}

.leafletGallery .pagination-info,
.pagination-info {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

.leafletGallery .pagination-controls,
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.leafletGallery .pagination-btn,
.pagination-btn {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 70px;
    box-shadow: 0 2px 6px rgba(30, 60, 114, 0.2);
}

.leafletGallery .pagination-btn:hover:not(:disabled),
.pagination-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
}

.leafletGallery .pagination-btn:disabled,
.pagination-btn:disabled {
    background: #ddd;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.leafletGallery .pagination-numbers,
.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 10px;
}

.leafletGallery .pagination-number,
.pagination-number {
    background: white;
    color: #1e3c72;
    border: 1px solid #1e3c72;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 32px;
    text-align: center;
}

.leafletGallery .pagination-number:hover,
.pagination-number:hover {
    background: #1e3c72;
    color: white;
    transform: scale(1.05);
}

.leafletGallery .pagination-number.active,
.pagination-number.active {
    background: #1e3c72;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(30, 60, 114, 0.3);
}

/* =================================================================== */
/* 13. 애니메이션 */
/* =================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* 반짝임 효과 제거됨 - 정숙한 사무실 분위기 유지 */

/* =================================================================== */
/* 11. 통합 계산기 & 가격 시스템 (전체 공통) */
/* =================================================================== */

/* === 계산기 컨테이너 === */

/* 계산기 섹션 - 자연스러운 높이 조정 */
.calculator-section,
.calculator-section.leaflet-style,
.leaflet-calculator,
aside.calculator-section,
aside.calculator-section.leaflet-style {
    display: flex;
    flex-direction: column;
    height: auto; /* 자동 높이 */
    min-height: fit-content; /* 내용에 맞춤 */
    background: #f8f9fa;
    border-radius: 15px;
    padding: 5px;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* 계산기 섹션 내부 모든 요소들 타이트하게 */
.calculator-section * {
    margin: 2px 0;
    padding: 2px;
}

/* === 입력 폼 요소들 === */

/* 옵션 그리드 - 타이트한 간격 */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 5px 0;
    padding: 0;
}

.form-grid-compact {
    margin: 3px 0;
    padding: 0;
}

/* ========================================================================== */
/* === 초컴팩트 인라인 레이아웃 디자인 시스템 === */
/* ⚠️ 중요: 아래 값들은 사용자 요청에 따른 최종 확정값입니다 */
/* 🚫 변경 금지: margin, padding, gap 값은 수정하지 마세요 */
/* ========================================================================== */

/* 
디자인 원칙 (Design Principles):
- 행간격 최소화: margin: 2px 0
- 패딩 최소화: padding: 3px 0  
- 한 줄 표현: 라벨과 드롭다운 수평 배치
- 초컴팩트: 모든 여백을 최소한으로 유지
*/

/* 수평 폼 그룹 - 초컴팩트 인라인 레이아웃 (CSS 변수 기반) */
.form-group-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--form-row-gap); /* CSS 변수 사용 */
    margin: var(--form-row-margin); /* CSS 변수 사용 */
    padding: var(--form-row-padding); /* CSS 변수 사용 */
    border-bottom: 1px solid rgba(233, 236, 239, 0.2); /* 연한 구분선 */
    transition: all 0.2s ease;
}

/* 마지막 요소는 구분선 제거 */
.form-group-horizontal:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.option-group {
    margin: 0;
    padding: 0;
}

.option-group.full-width {
    grid-column: 1 / -1;
    margin: 0;
}

/* === 인라인 레이블 디자인 === */

/* 라벨 - 인라인 레이아웃 최적화 (CSS 변수 기반) */
.form-group-horizontal .option-label {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-weight: 500; /* 스티커 페이지와 동일 */
    font-size: 14px; /* 스티커 페이지와 동일 */
    text-align: right; /* 통일 시스템 - 우측 정렬 */
    line-height: 1.1; /* 줄높이 축소 */
    min-width: var(--label-min-width); /* CSS 변수 사용 */
    flex-shrink: 0; /* 라벨 축소 방지 */
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 라벨 호버 효과 */
.form-group-horizontal .option-label:hover {
    color: #1a202c;
}

/* === 인라인 드롭다운 디자인 === */

/* 셀렉트 박스 - 인라인 레이아웃 최적화 */
.form-group-horizontal .option-select {
    flex: 1; /* 남은 공간 모두 사용 */
    max-width: 200px; /* 최대 폭 제한 */
    padding: 6px 15px; /* 포스터 페이지와 동일 */
    height: auto; /* 자동 높이 */
    margin: 0;
    border: 1px solid #dee2e6; /* 스티커 페이지와 동일 */
    border-radius: 4px; /* 스티커 페이지와 동일 */
    font-size: 14px; /* 스티커 페이지와 동일 */
    background: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 35px; /* 화살표 공간 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    appearance: none; /* 기본 화살표 제거 */
    cursor: pointer;
    height: auto;
    min-height: 36px; /* 클릭 영역 확보 */
}

/* === 인라인 드롭다운 상태 효과 === */

/* 포커스 상태 - 브랜드 컬러 */
.form-group-horizontal .option-select:focus {
    outline: none;
    border-color: #3b82f6; /* 블루 포커스 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #f8fafc; /* 연한 배경 */
}

/* 호버 상태 */
.form-group-horizontal .option-select:hover {
    border-color: #9ca3af;
    background-color: #f9fafb;
}

/* 액티브 상태 - 클릭 시 움직임 없음 */
.form-group-horizontal .option-select:active {
    transform: none;
}

/* 전체 행 호버 효과 - 부드러운 배경 강조 */
.form-group-horizontal:hover {
    background-color: rgba(248, 250, 252, 0.5);
    border-radius: 6px;
}

/* === 가격 표시 시스템 === */

/* 가격 표시 영역 - 타이트하게 */
/* ============================================================================ */
/* 가격 표시 시스템 (전체 제품 통합) */
/* ============================================================================ */

.price-display {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 8px;
    margin: 5px 0;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: background, border-color, transform;
}

.price-display.calculated {
    border: 1px solid #e0e0e0;
    background: white;
    transform: scale(1);
    box-shadow: none;
    padding: 8px;
    margin: 5px 0;
    min-height: 60px;
}

.price-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0 0 1px 0;
    padding: 0;
    font-weight: 500;
    line-height: 1.1;
}

.price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dsp-primary);
    margin: 0 0 1px 0;
    padding: 0;
    text-shadow: none;
    line-height: 1.2;
}

.price-details {
    font-size: 0.7rem;
    color: #6c757d;
    line-height: 1.1;
    margin: 0;
    padding: 4px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    overflow: visible;
}

.price-details .vat-amount,
.price-details span:last-child,
.price-display .price-details .vat-amount,
.price-display .price-details span:last-child {
    text-shadow: none;
}

/* === 계산 액션 버튼들 === */

/* 액션 버튼들 - 타이트하게 */
.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding: 0;
}

/* 액션 버튼 내 업로드 버튼 크기 통일 */
.action-buttons .btn-upload-order {
    flex: 1;
    padding: 15px 20px;
    font-size: 16px;
}

.btn-action {
    padding: 8px 12px;
    margin: 0;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* 계산 버튼 */
.btn-calculate {
    background: linear-gradient(135deg, var(--dsp-accent) 0%, var(--dsp-accent-dark) 100%);
    color: white;
    border: none;
    padding: 8px 15px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(255, 213, 0, 0.3);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* === 레이아웃 컨테이너 === */

/*
 * 📋 통합 계산기 시스템 CSS 가이드
 * ================================
 * 
 * 이 섹션은 MlangPrintAuto의 모든 제품 계산기에서 공통으로 사용되는
 * 타이트한 레이아웃 시스템입니다.
 * 
 * 🎯 주요 특징:
 * - 5px 패딩으로 극도로 컴팩트한 레이아웃
 * - 모든 내부 요소 margin/padding 최소화 (2px)
 * - 수평 폼 그룹 지원 (.form-group-horizontal)
 * - 인라인 가격 표시 시스템 (.price-breakdown)
 * - 타이트한 버튼 스타일링
 * 
 * 🔧 사용법:
 * - .calculator-section 클래스를 계산기 컨테이너에 적용
 * - .price-display.calculated 로 가격 표시 활성화
 * - .btn-calculate 로 계산 버튼 스타일링
 * 
 * 📝 적용 제품: 전단지, 명함, 스티커, 봉투, 포스터, 상품권, NCR양식 등 전체
 */

/* 메인 카드 컨테이너 */
.leaflet-card {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 15px 30px 15px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* 그리드 레이아웃 (50:50 분할) - 갤러리 높이에 맞춤 */
.leaflet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    min-height: auto; /* 자동 높이로 변경 */
    max-width: 1160px;
    margin: 20px auto 0 auto;
    align-items: start; /* 상단 정렬로 갤러리와 계산기 독립적 크기 */
}

/* 전단지 반응형: 모바일에서 세로 배치 */
@media screen and (max-width: 1024px) {
    .leaflet-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .leaflet-grid {
        gap: 20px;
        margin: 15px auto 0 auto;
    }
}

/* 갤러리 섹션 */
.leaflet-gallery {
    background: white;
    border-radius: 0;
    padding: 0px;
    border: none;
    height: fit-content;
    box-shadow: none;
    overflow: hidden;
}

.leaflet-gallery .gallery-container {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    box-sizing: border-box;
    background: white;
    border-radius: 15px;
    padding: 10px;
    box-shadow: none;
    border: 1px solid #e9ecef;
    height: auto; /* 자동 높이 */
    min-height: fit-content; /* 내용에 맞춤 */
    overflow: visible;
    padding-top: 0px;
    padding-bottom: 0px;
}

.gallery-title {
    display: none;
}

.lightbox-viewer {
    display: none;
}

.thumbnail-strip, .thumbnail {
    display: none;
}

.gallery-loading, .gallery-error {
    display: none;
}

/* 🎨 제품 페이지에서는 갤러리 표시 (더 구체적인 선택자로 override) */
body.sticker-page .lightbox-viewer,
body.namecard-page .lightbox-viewer,
body.envelope-page .lightbox-viewer,
body.inserted-page .lightbox-viewer,
body.cadarok-page .lightbox-viewer,
body.littleprint-page .lightbox-viewer,
body.merchandisebond-page .lightbox-viewer,
body.msticker-page .lightbox-viewer,
body.ncrflambeau-page .lightbox-viewer,
body.leaflet-page .lightbox-viewer {
    display: block;
}

body.sticker-page .thumbnail-strip,
body.namecard-page .thumbnail-strip,
body.envelope-page .thumbnail-strip,
body.inserted-page .thumbnail-strip,
body.cadarok-page .thumbnail-strip,
body.littleprint-page .thumbnail-strip,
body.merchandisebond-page .thumbnail-strip,
body.msticker-page .thumbnail-strip,
body.ncrflambeau-page .thumbnail-strip,
body.leaflet-page .thumbnail-strip {
    display: grid;
}

/* === 중복 섹션 제거됨 - 위쪽 통합 계산기 섹션 사용 === */

/* 파일 업로드 및 주문 버튼 - 타이트하게 */
.upload-order-button {
    margin: 5px 0;
    padding: 0;
    text-align: center;
    display: block; /* 기본적으로 표시 */
}

.upload-order-button.hidden {
    display: none; /* hidden 클래스로 숨김 제어 */
}

/* .btn-upload-order 중복 제거 - 상단 섹션 5에서 통합 관리 (SSOT) */

/* 파일 업로드 모달 */
.upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.upload-modal[style*="display: none"] {
    display: none;
}

.upload-modal:not([style*="display: none"]) {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    min-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dsp-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #f8f9fa;
    color: #dc3545;
}

.modal-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

.upload-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.upload-left, .upload-right {
    display: flex;
    flex-direction: column;
}

.upload-label {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
}

.upload-area {
    margin-bottom: 20px;
}

.upload-dropzone {
    border: 2px dashed var(--dsp-primary);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--dsp-gray-50);
}

.upload-dropzone:hover {
    border-color: var(--dsp-primary-light);
    background: var(--dsp-primary-lighter);
}

.upload-dropzone.dragover {
    border-color: var(--dsp-primary-light);
    background: var(--dsp-primary-lighter);
    transform: scale(1.02);
}

.upload-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.upload-dropzone p {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dsp-primary);
    margin: 0 0 8px 0;
}

.upload-formats {
    font-size: 0.9rem;
    color: #6c757d;
}

.memo-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
}

.memo-textarea:focus {
    outline: none;
    border-color: var(--dsp-primary);
    box-shadow: 0 0 0 3px rgba(30, 78, 121, 0.1);
}

.uploaded-files {
    margin-top: 16px;
}

.file-list {
    margin-top: 16px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
}

.file-name {
    font-weight: 500;
    color: #495057;
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cart {
    background: var(--dsp-primary);
    color: white;
}

.btn-cart:hover {
    background: var(--dsp-primary-light);
    transform: translateY(-2px);
}

/* GPU 가속 및 성능 최적화 */
.lightbox-viewer,
.thumbnail,
.btn-action,
.btn-calculate,
.option-select,
.price-display {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 애니메이션 접근성 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

/* =================================================================== */
/* 12. 인쇄 스타일 */
/* =================================================================== */
@media print {
    .no-print { display: none; }
    .page-title { background: white; color: black; }
    .btn-upload-order { display: none; }
}

/* =================================================================== */
/* 13. 자연스러운 레이아웃 (내용에 맞는 크기) */
/* =================================================================== */

/* 갤러리와 계산기가 내용에 따라 자연스럽게 크기 조정 */
.leaflet-gallery,
.calculator-section {
    height: auto;
    min-height: fit-content;
}

/* =================================================================== */
/* 14. 파일 업로드 모달 스타일 */
/* =================================================================== */

/* 모달 오버레이 */
.upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 모달 오버레이 배경 */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
}

/* 모달 컨텐츠 */
.modal-content {
    position: relative;
    background: white;
    border-radius: 15px;
    min-width: 1000px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
}

/* 모달 헤더 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    border-radius: 15px 15px 0 0;
}

.modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 모달 바디 */
.modal-body {
    padding: 25px;
}

/* 업로드 컨테이너 */
.upload-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 25px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .upload-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* 업로드 라벨 */
.upload-label {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
    font-size: 1rem;
}

/* 업로드 방법 선택 버튼 */
.upload-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.btn-upload-method {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-upload-method:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.btn-upload-method.active {
    border-color: #3b82f6;
    background: #3b82f6;
    color: white;
}

.btn-upload-method:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 업로드 영역 */
.upload-area {
    margin-bottom: 15px;
}

/* 드롭존 */
.upload-dropzone {
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-dropzone:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.upload-dropzone.dragover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: scale(1.02);
}

.upload-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #6b7280;
}

.upload-text {
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
}

/* 업로드 정보 */
.upload-info {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 12px;
    line-height: 1.5;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 6px;
}

/* 작업 메모 텍스트에리어 */
.memo-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #374151;
    background: white;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.memo-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 업로드 주의사항 */
.upload-notice {
    margin-top: 15px;
    padding: 12px;
    background: #fef3cd;
    border: 1px solid #f6e05e;
    border-radius: 6px;
}

.notice-item {
    font-size: 0.85rem;
    color: #92400e;
    margin-bottom: 6px;
    line-height: 1.4;
}

.notice-item:last-child {
    margin-bottom: 0;
}

/* 업로드된 파일 목록 */
.uploaded-files {
    margin-top: 20px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.uploaded-files h5 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
}

/* 파일 아이템 */
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 8px;
}

.file-item:last-child {
    margin-bottom: 0;
}

.file-info {
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: #2d3748;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.file-size {
    font-size: 0.8rem;
    color: #6b7280;
}

/* 파일 삭제 버튼 */
.btn-remove-file {
    padding: 6px 12px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-remove-file:hover {
    background: #dc2626;
}

/* 모달 푸터 */
.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 15px 15px;
    text-align: center;
}

/* 모달 버튼 */
.modal-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 5px;
}

.btn-cart {
    background: linear-gradient(135deg, var(--dsp-primary) 0%, var(--dsp-primary-light) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(30, 78, 121, 0.3);
}

.btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 78, 121, 0.4);
}

/* 모달 장바구니 버튼 크기 */
.modal-btn.btn-cart {
    width: auto;
    min-width: 180px;
    padding: 12px 24px;
    font-size: 14px;
    background: var(--dsp-primary);
    color: white;
    margin: 0 auto;
    display: block;
    white-space: nowrap;
}
/* ===================================================================
   갤러리 배경 및 그림자 제거 (최종 우선순위)
   product-layout.css 보다 늦게 로드되므로 여기서 최종 적용
   =================================================================== */
.product-content .product-gallery,
.product-content .product-gallery .gallery-container {
    background: transparent;
    box-shadow: none;
}

.product-content .product-gallery .lightbox-viewer,
.product-content .product-gallery .gallery-main {
    background: rgba(30, 78, 121, 0.4);
    box-shadow: none;
}

/* ===================================================================
   하단 상세 설명 섹션 스타일
   =================================================================== */
.inserted-detail-combined {
    width: 1200px;
    max-width: 100%;
    margin: 7.5px auto;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* ===================================================================
   가격 텍스트 그림자 제거 - 최종 우선순위 (공통)
   모든 제품 페이지에 적용
   =================================================================== */
.price-amount,
.price-display .price-amount,
.calculator-section .price-amount,
.price-breakdown .price-item-value {
    text-shadow: none;
}

.price-details .vat-amount,
.price-details span,
.price-display .price-details .vat-amount,
.price-display .price-details span,
.price-breakdown .price-item.final .price-item-value {
    text-shadow: none;
}