/* 모바일 미디어 쿼리 모달 - 재거정(2025-09-08) */
/* 실제 모바일 페이지 지원 작업 */

/* 모바일 전용 스타일 - 데스크톱에서는 건드리지 않음 */
@media screen and (max-width: 768px) {
    /* 헤더 전체 구조 */
    .header {
        padding: 15px !important;
        height: auto !important;
    }
    
    /* 헤더 타이틀 중앙 정렬 및 크기 조정 */
    .header h1 {
        font-size: 20px !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 600 !important;
    }
    
    /* 채널 버전 텍스트는 조금 작게 */
    .header h1 .channel-version {
        font-size: 16px !important;
        font-weight: normal !important;
        color: #666 !important;
    }
    
    /* 헤더 컨텐츠 플렉스 */
    .header-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        gap: 0 !important;
    }
    
    /* user-info-container 위치 변경 아래로 이동 */
    #user-info-container {
        position: static !important;
        top: auto !important;
        right: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 8px !important;
        margin-bottom: 5px !important;
        gap: 8px !important;
        z-index: auto !important;
        width: 100% !important;
    }
    
    /* 모바일 버튼들의 동일한 기본 스타일 설정 */
    body #user-info-container .back-to-main {
        font-size: 12px !important;
        padding: 6px 10px !important;
        height: 32px !important;
        border: 1px solid #ddd !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        width: calc(35% - 4px) !important; /* 채널선택은 35% */
        justify-content: center !important;
        background: white !important;
        border-radius: 6px !important;
        color: #666 !important;
        font-weight: normal !important;
        text-decoration: none !important;
        transition: all 0.2s !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        white-space: nowrap !important;
    }
    
    /* 재고/계산 버튼들 - 채널 선택 버튼과 완전 동일한 스타일 */
    body #user-info-container button.mobile-inventory-btn,
    body #user-info-container button.mobile-branch-inventory-btn,
    body #user-info-container button.mobile-employee-calc-btn {
        /* 채널 선택 버튼과 100% 동일한 스타일 복사 */
        font-size: 12px !important;
        padding: 6px 10px !important;
        height: 32px !important;
        border: 1px solid #ddd !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 6px !important;
        color: #666 !important;
        font-weight: normal !important;
        text-decoration: none !important;
        transition: all 0.2s !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        white-space: nowrap !important;
        /* 유일한 차이점: 너비만 33.33% */
        width: calc(33.33% - 5.33px) !important;
        gap: 3px !important;
        cursor: pointer !important;
        outline: none !important;
    }
    
    /* 아이콘 크기는 채널 선택 버튼과 동일하게 조정 */
    body #user-info-container button.mobile-inventory-btn span:first-child,
    body #user-info-container button.mobile-branch-inventory-btn span:first-child,
    body #user-info-container button.mobile-employee-calc-btn span:first-child {
        font-size: 12px !important;
    }
    
    /* 텍스트 부분도 동일하게 */
    body #user-info-container button.mobile-inventory-btn span:last-child,
    body #user-info-container button.mobile-branch-inventory-btn span:last-child,
    body #user-info-container button.mobile-employee-calc-btn span:last-child {
        font-size: 12px !important;
        font-weight: normal !important;
    }
    
    /* user-info 박스 모바일 최적화 */
    #user-info {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        height: 32px !important;
        width: calc(65% - 4px) !important; /* user-info??65% */
        justify-content: center !important;
        order: 2 !important; /* 채널선택 다음에 위치 */
    }
    
    /* 사용자명 텍스트 오버플로우 처리 */
    #user-info span {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 60px) !important; /* 로그아웃 버튼 공간 확보 */
        text-align: center !important;
    }
    
    /* 버튼 순서 지정 */
    #user-info-container .back-to-main {
        order: 1 !important; /* 채널선택 첫번째 */
    }
    
    #user-info-container .mobile-inventory-btn {
        order: 3 !important; /* 재고조회 세번째 (둘째 줄 첫번째) */
    }
    
    #user-info-container .mobile-branch-inventory-btn {
        order: 4 !important; /* 권역/지점재고 네번째 (둘째 줄 두번째) */
    }
    
    #user-info-container .mobile-employee-calc-btn {
        order: 5 !important; /* 직원 계산기 다섯번째 (둘째 줄 세번째) */
    }
    
    /* 로그아웃 버튼 크기 조정 */
    #user-info button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        margin-left: 8px !important;
        flex-shrink: 0 !important; /* 버튼 크기 고정 */
        height: 32px !important;
        box-sizing: border-box !important;
    }
    
    /* 메인 콘텐츠 영역을 모바일 친화적으로 변경 */
    .main-content {
        display: block !important;
        padding: 15px !important;
        gap: 0 !important;
        margin-top: 0px !important;
    }
    
    /* 기존 데스크톱 사이드바 숨기기 */
    .calculator-sidebar {
        display: none !important;
    }
    
    .products-main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* 기존 products-header 버튼 숨기기(업데이트 날짜만 표시) */
    .products-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }
    
    .products-header button,
    .products-header .header-buttons-wrapper {
        display: none !important;
    }
    
    .products-header .update-date {
        display: inline-block !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
        margin: 0 !important;
    }
    
    /* 플립보드 컨테이너 가운데 정렬 */
    .flip-board-container {
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* 제품 그리드 모바일 최적화 */
    .products-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 80px !important; /* 하단 패널 공간 */
    }
    
    /* 제품 추가 카드 디자인 개선 */
    .add-product-card {
        width: 100% !important;
        padding: 20px !important;
        border: 2px dashed #007bff !important;
        border-radius: 10px !important;
        background: white !important;
        margin: 0 !important;
        min-height: auto !important;
    }
    
    .add-product-card .add-icon {
        font-size: 28px !important;
        color: #007bff !important;
    }
    
    .add-product-card .add-text {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #007bff !important;
        margin-top: 5px !important;
    }
    
    /* 하단 고정 선택 패널을 새로운 요소로 교체 */
    .mobile-benefit-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #ddd !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        font-family: 'Pretendard', sans-serif !important;
        transition: height 0.3s ease !important;
    }
    
    .mobile-benefit-panel.collapsed {
        height: 60px !important;
    }
    
    .mobile-benefit-panel.expanded {
        height: 300px !important;
    }
    
    .mobile-benefit-header {
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: #2c2c2c !important;
        color: white !important;
        cursor: pointer !important;
        border: none !important;
    }
    
    .mobile-benefit-content {
        padding: 20px !important;
        overflow-y: visible !important;
        height: auto !important;
        display: none !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    .mobile-benefit-panel.expanded {
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    .mobile-benefit-panel.expanded .mobile-benefit-content {
        display: block !important;
    }
    
    /* 워터마크 모바일 표시 - 9dok_3 스타일 적용 */
    .watermark-signature {
        position: fixed !important;
        bottom: 70px;  /* JavaScript로 동적 변경 가능하도록 !important 제거 */
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-family: 'Dalmoori', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 16px !important;  /* 12px → 16px로 증가 */
        font-weight: 400 !important;  /* 굵기 증가 */
        color: rgba(0, 0, 0, 0.25) !important;  /* 더 진하게 표시 */
        letter-spacing: 1px !important;
        font-style: italic !important;
        z-index: 1001 !important;  /* z-index 증가 */
        text-align: center !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        user-select: none !important;
    }
    
    .watermark-container {
        /* 모바일에서도 표시하되 적당히 보이게 */
        opacity: 0.8 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 999 !important;
        overflow: hidden !important;
    }
    
    .watermark {
        font-size: 16px !important;  /* 14px → 16px로 증가 */
        color: rgba(128, 128, 128, 0.12) !important; /* 더 진하게 */
        font-weight: 600 !important;  /* 굵기 증가 */
    }
    
    .watermark .user-info {
        font-size: 20px !important;  /* 18px → 20px로 증가 */
        font-weight: 700 !important;
    }
    
    .watermark .ip-info {
        font-size: 16px !important;  /* 14px → 16px로 증가 */
        font-weight: 500 !important;
    }
    
    /* 웰컴 메시지 숨김 */
    .welcome-message {
        display: none !important;
    }
    
    /* 모바일에서 터치 반응 개선 */
    .add-product-card:active {
        transform: scale(0.98);
        background: #f0f8ff !important;
    }
    
    .subscription-benefits-btn:active {
        transform: scale(0.96);
        background: #f5f5f5 !important;
    }
    
    /* 모바일 총혜택보기 토글 */
    .mobile-total-toggle {
        position: fixed !important;
        bottom: 70px !important;
        right: 15px !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 25px !important;
        padding: 8px 15px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
        z-index: 999 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        color: #333 !important;
    }
    
    .mobile-total-toggle input[type="checkbox"] {
        margin: 0 !important;
    }
    
    .mobile-total-toggle label {
        margin: 0 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    /* 🎨 모바일 모달 컨테이너 표준 스타일 */
    .modal-content {
        width: 100vw !important;
        height: 100dvh !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .modal {
        overscroll-behavior: contain !important;
        overflow: hidden !important;
    }
    
    /* 구독혜택 모달 특별 처리 */
    .benefits-modal-content {
        width: 90vw !important;
        max-height: 85vh !important;
        margin: 7.5vh auto !important;
        border: none !important;
        overflow: hidden !important;
    }
    
    /* 구독혜택 그리드 모바일 최적화 */
    .benefits-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px 10px 10px !important;
        max-height: calc(85vh - 60px) !important;
        overflow-y: auto !important;
        justify-items: center !important;
        align-items: center !important;
    }
    
    /* 구독혜택 아이템 모바일 디자인 */
    .benefit-item {
        padding: 0 !important;
        width: 100% !important;
        max-width: 160px !important;
        min-height: 140px !important;
        height: 140px !important;
        font-size: 13px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 12px !important;
        background: white !important;
        border: 1px solid #ddd !important;
        cursor: pointer !important;
        transition: all 0.3s !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .benefit-item:active {
        transform: scale(0.92) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    }
    
    .benefit-item img {
        width: 100% !important;
        height: 100% !important;
        max-width: 110px !important;
        max-height: 110px !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .benefit-name {
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        word-break: keep-all !important;
        color: #333 !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        position: absolute !important;
        bottom: 5px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        z-index: 1 !important;
    }
    
    /* 모달 헤더 기본 설정 */
    .modal-header:not(#disclaimerModal .modal-header) {
        padding: 10px !important;
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 10 !important;
        border-bottom: 1px solid #eee !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .modal-header:not(#disclaimerModal .modal-header) h2 {
        font-size: 16px !important;
        margin: 0 !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    /* 제품 선택 모달 헤더 표시 및 스타일링 */
    .product-selection-modal .modal-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 48px !important;
        padding: 0 90px !important;
        background: white !important;
        border-bottom: 1px solid #e0e0e0 !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10001 !important;
    }
    
    /* 기본 h2 ?�기�?stepTitle ?�시 */
    .product-selection-modal .modal-header h2 {
        display: none !important;
    }
    
    
    /* ?�품 ?�택 모달 ?�기 버튼??바디 ?�으�??�동 */
    .product-selection-modal .modal-body {
        position: relative !important;
        padding-top: 35px !important;
    }
    
    
    /* 구독혜택 모달 특별 처리 - 둥근 모서리만 추가 */
    .benefits-modal-content .modal-header {
        border-radius: 10px 10px 0 0 !important;
    }
    
    
    /* 🎨 모바일 모달 바디 표준 스타일 */
    .modal-body {
        padding: 12px 16px calc(env(safe-area-inset-bottom, 0) + 12px) 16px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 특별한 경우만 예외 처리 */
    .benefits-modal-content .modal-body {
        padding: 0 !important;
    }
    
    .product-selection-modal .modal-body {
        padding-top: 130px !important;
    }
    
    /* 검?�창 ?�역 - ?�든 ?�든 ?�정???�이 ?��? */
    #searchSection, .search-section {
        min-height: 45px !important;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
        padding: 0 10px !important;
        display: block !important;
        position: relative !important;
    }
    
    /* 검?�창???�겨�?경우?�도 공간 ?��? */
    #searchSection[style*="display: none"], 
    .search-section[style*="display: none"] {
        display: block !important;
        visibility: hidden !important;
        height: 45px !important;
        margin-bottom: 10px !important;
    }
    
    /* 검???�력�??��???*/
    #optionSearch {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
    }
    
    /* ?�션 그리???�단 ?�백 ?�정?�게 ?��? */
    #optionsGrid {
        margin-top: 0 !important;
        padding: 0 10px !important;
    }
    
    .benefits-modal-content .modal-body > p {
        font-size: 13px !important;
        margin: 15px 15px 10px 15px !important;
        color: #666 !important;
    }
    
    /* ?�반 모달 바디???�백 ?��? */
    .modal-body {
        padding: 20px !important;
        overflow-y: auto !important;
    }
    
    /* ?�품�??�택 모달 - ?�더 ?�기�??�체?�면 */
    .benefit-detail-content .modal-header {
        display: none !important;
    }
    
    .benefit-detail-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    .benefit-detail-content iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
    
    /* 카드?�택 모바???�용 ?��???- 90% x 90% 모달 */
    .card-benefit-mobile {
        width: 90vw !important;
        height: 90vh !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        margin: 5vh 5vw !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        border: none !important;
        border-radius: 12px !important;
        background: white !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        overflow: hidden !important;
    }
    
    .card-benefit-mobile .modal-header {
        display: none !important;
    }
    
    .card-benefit-mobile .modal-body {
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    
    /* card-action-buttons 버튼 ?�기 축소 */
    .partner-card-info .card-action-buttons {
        gap: 6px !important;
    }
    
    .partner-card-info .care-service-btn,
    .partner-card-info .partner-card-btn.small {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    .step-indicator {
        display: none !important;
    }
    
    .modal-scroll-content {
        padding: 10px !important;
        height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
    }
    
    /* ?�품 ?�택 모달 step-content 마진 줄이�?*/
    .step-content {
        padding: 10px !important;
        margin: 0 !important;
    }
    
    /* ?�촉 ?�보 ?�이�?모바???��???*/
    .promotion-table-container {
        margin-top: 10px;
    }
    
    .promotion-table {
        border-radius: 5px;
    }
    
    .promotion-table td {
        padding: 7px 8px;
    }
    
    .promotion-label {
        width: 60px;
        font-size: 10px;
        font-weight: 600;
    }
    
    .promotion-value {
        font-size: 10px;
    }
    
    .promotion-etc {
        font-size: 10px;
        padding: 8px;
    }
    
    /* step-header???�명?�게 만들???��? ?�소???��? */
    .step-header {
        position: absolute !important;
        background: transparent !important;
        border: none !important;
        pointer-events: none !important;
    }
    
    /* step-header ?��???버튼�??�?��??� ?�시 */
    .step-header #prevBtnTop,
    .step-header .step-title {
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* step-title???�더 중앙???�시 */
    .step-title {
        display: block !important;
        position: fixed !important;
        top: 14px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        z-index: 10003 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }
    
    /* 모달 ?�더??step title ?�시 */
    .product-selection-modal .modal-header h2 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 45px !important;
        text-align: center !important;
    }
    
    /* step-header ?�의 ?�로가�?버튼?� ?�시 */
    .step-header #prevBtnTop {
        pointer-events: auto !important;
    }
    
    /* 모달 ?�단 버튼 컨테?�너 - ?�도???��???*/
    .modal-top-buttons {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 10006 !important;
        display: flex !important;
        gap: 5px !important;
        align-items: center !important;
    }
    
    /* ?�전 버튼 - ?�기 버튼 ?�쪽??배치 (?�도???��??? */
    #prevBtnTop {
        position: fixed !important;
        right: 47px !important;
        top: 8px !important;
        padding: 0 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        background: white !important;
        border: 1px solid #007bff !important;
        border-radius: 50% !important;
        color: #007bff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
        z-index: 10002 !important;
        flex-shrink: 0 !important;
    }
    
    /* display: block?�로 ?�정??경우??flex�??�버?�이??*/
    #prevBtnTop[style*="display: block"] {
        display: flex !important;
    }
    
    /* �?번째 ?�계?�서???�로가�?버튼 ?�기�??��? */
    #prevBtnTop[style*="display: none"] {
        display: none !important;
    }
    
    /* 이전가기 아이콘 */
    .prev-btn::after,
    #prevBtnTop::after {
        content: "←" !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        color: #007bff !important;
    }
    
    /* 텍스트 숨기기 */
    .prev-btn,
    #prevBtnTop {
        font-size: 0 !important;
    }
    
    .prev-btn:active,
    #prevBtnTop:active {
        transform: scale(0.9) !important;
        background: #e6f2ff !important;
    }
    
    /* ?�션 그리??- 2?�로 변경하??공간 ?�율???�용 */
    .options-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    
    /* ?�션 카드 - ?�기 최적??*/
    .option-card {
        padding: 12px 8px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
        min-height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-weight: 500 !important;
        border: 1.5px solid #ddd !important;
        background: white !important;
        transition: all 0.2s !important;
        word-break: keep-all !important;
        line-height: 1.4 !important;
    }
    
    /* ?�반 ?�션 카드???�?��? (?�성??금액???�는 경우) */
    .option-card .option-title {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    
    .option-card:active {
        transform: scale(0.97) !important;
        background: #f0f8ff !important;
        border-color: #007bff !important;
    }
    
    .option-card.selected {
        background: #007bff !important;
        color: white !important;
        border-color: #007bff !important;
        font-weight: 600 !important;
    }
    
    /* ?�품 ?�더 - ?��?지 좌측, ?�펙 ?�측 ?�이?�웃 */
    .product-header-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
    }
    
    /* ?�품 ?��?지 좌측 배치 */
    .product-image {
        width: 120px !important;
        height: 120px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #f8f8f8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* ?�품 ?�스??컨테?�너 ?�측 배치 */
    .product-text-container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    
    /* ?�품 ?�?��? */
    .product-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }
    
    /* ?�품 ?�펙 */
    .product-specs {
        font-size: 11px !important;
        color: #666 !important;
        line-height: 1.4 !important;
    }
    
    /* 케?�서비스 버튼 */
    .care-service-section {
        margin-top: 5px !important;
    }
    
    .care-service-section .care-service-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
    }
    
    /* ?�???�택 버튼?�도 2?�로 ?�시 (?�?�이 ?�러개인 경우) */
    .type-options-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    
    /* 카테고리 ?�름 ?�시 ?�역 최적??*/
    .product-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }
    
    .product-category {
        font-size: 11px !important;
        color: #666 !important;
        margin-bottom: 5px !important;
    }
    
    /* ?�품 카드 ?�이?�웃 ?�정 */
    .product-card {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    
    /* ?�품 비교 버튼 모바?�에???��? */
    .product-compare-btn {
        display: none !important;
    }
    
    /* ?�블릿에???�쇄 관??버튼??�?모달 ?��? */
    .print-quote-btn,
    .subscription-guide-btn,
    #printButton,
    #subscriptionGuideBtn,
    button[onclick*="printQuotation"],
    button[onclick*="showSubscriptionGuideModal"],
    #quotationModal,
    #subscriptionGuideModal {
        display: none !important;
    }
    
    /* ?�품 ?�션 버튼 ?�역 마진 ?�거 */
    .product-actions {
        margin-top: 0 !important;
    }
    
    /* ?�품 ??�� 버튼 ?�기 축소 �?모바?�에????�� ?�시 */
    .product-remove-top {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 16px !important;
        line-height: 1 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0.8 !important;  /* 모바?�에????�� 보이?�록 ?�정 */
        pointer-events: auto !important;  /* 모바?�에????�� ?�릭 가??*/
    }
    
    /* 금주 ?�성??모델 카테고리 버튼 - 강제 ?�버?�이??*/
    .option-card[data-value="금주 ?�성??모델"],
    .option-card[style*="ff6b6b"],
    .option-card[style*="rgb(255, 107, 107)"] {
        background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%) !important;
        color: white !important;
        font-weight: bold !important;
        border: 2px solid #ff6b6b !important;
    }
    
    .option-card[data-value="금주 ?�성??모델"] .option-title,
    .option-card[style*="ff6b6b"] .option-title,
    .option-card[style*="rgb(255, 107, 107)"] .option-title {
        color: white !important;
        font-size: 12px !important;
        font-weight: bold !important;
    }
    
    /* 모델�??�션?�서 ?�성??금액 ?�시 - 모델명과 같�? 줄에 배치 */
    .option-card div[style*="position: absolute"][style*="top: 5px"],
    .option-card div[style*="position: absolute"][style*="right: 5px"],
    .option-card div[style*="background: rgb(165, 0, 52)"] {
        position: static !important;
        display: inline-block !important;
        font-size: 10px !important;
        padding: 2px 5px !important;
        margin-left: 5px !important;
        background: #ff6b6b !important;
        color: white !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    
    /* ?�성??금액???�는 ?�션 카드 ?�이?�웃 */
    .option-card:has(div[style*="position: absolute"]) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .option-card:has(div[style*="position: absolute"]) .option-title {
        display: inline-block !important;
        font-size: 13px !important;
        padding-right: 0 !important;
        max-width: 65% !important;
        word-break: break-word !important;
        font-weight: 500 !important;
    }
    
    /* ?�품 카드?�서 ?�성??배�? */
    .product-header-content .promotion-badge,
    .product-header-content .activation-badge,
    .product-card .promotion-badge,
    .product-card .activation-badge {
        font-size: 9px !important;
        padding: 1px 3px !important;
        margin-left: 3px !important;
        background: #ff6b6b !important;
        color: white !important;
        border-radius: 4px !important;
        font-weight: normal !important;
        display: inline-block !important;
        line-height: 1.2 !important;
    }
    
    /* ?�품 ?�?��? ?�역 최적??*/
    .product-title-row {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 5px !important;
    }
    
    .product-title {
        flex: 1 !important;
        overflow: visible !important;
        word-break: keep-all !important;
    }
    
    /* ?�품 ?�더 콘텐�??�렬 */
    .product-header-content .product-image {
        margin-right: 0 !important;
    }
    
    /* 모바?�에??final-total ?�체 ?�기�?(모바???�용 ?�널 ?�용) */
    .final-total {
        display: none !important;
    }
    
    /* 모바?�에??final-total ?��???totalCostSummary???�기�?*/
    .final-total #totalCostSummary {
        display: none !important;
    }
    
    /* ===== mobile-override.css 통합 시작 ===== */
    
    /* 라벨 헤더 스타일 */
    .labels-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }
    .labels-header > span {
        display: block !important;
        align-self: flex-end !important;
    }
    
    /* 🎨 모바일 모달 헤더 표준 스타일 (제품 추가 모달 기반) */
    .modal-header:not(#disclaimerModal .modal-header) {
        background: #333 !important;
        color: #fff !important;
        border-bottom: 1px solid #222 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
        padding: calc(env(safe-area-inset-top, 0) + 12px) 16px 12px 16px !important;
        box-sizing: border-box !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }
    
    .modal-header:not(#disclaimerModal .modal-header) h2 {
        color: #fff !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .modal-header:not(#disclaimerModal .modal-header) .close-btn {
        color: #fff !important;
        background: transparent !important;
        border: none !important;
        position: static !important;
        margin: 0 !important;
        transform: translateY(0) !important;
        font-size: 28px !important;
        padding: 8px 12px !important;
        border-radius: 9999px !important;
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }
    
    .modal-header:not(#disclaimerModal .modal-header) .close-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 모바일 기능 버튼 스타일 */
    .mobile-feature-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        border: 2px solid #e9ecef !important;
        border-radius: 12px !important;
        color: #495057 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        min-height: 48px !important;
        cursor: pointer !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-feature-btn:hover,
    .mobile-feature-btn:focus {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        border-color: #C9302C !important;
        color: #C9302C !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(201, 48, 44, 0.15) !important;
    }
    
    .mobile-feature-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }
    
    .mobile-btn-icon {
        font-size: 20px !important;
        line-height: 1 !important;
    }
    
    .mobile-btn-text {
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    
    /* 특정 버튼별 색상 */
    .mobile-inventory-btn:hover,
    .mobile-inventory-btn:focus {
        border-color: #007bff !important;
        color: #007bff !important;
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15) !important;
    }
    
    .mobile-branch-inventory-btn:hover,
    .mobile-branch-inventory-btn:focus {
        border-color: #28a745 !important;
        color: #28a745 !important;
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.15) !important;
    }
    
    .mobile-employee-calc-btn:hover,
    .mobile-employee-calc-btn:focus {
        border-color: #6f42c1 !important;
        color: #6f42c1 !important;
        box-shadow: 0 6px 20px rgba(111, 66, 193, 0.15) !important;
    }
    
    /* user-info-container 모바일 스타일 개선 */
    @media (max-width: 768px) {
        #user-info-container {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
            padding: 10px !important;
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            border-radius: 0 0 12px 12px !important;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
        }
        
        #user-info {
            font-size: 12px !important;
            padding: 8px 12px !important;
            background: #f8f9fa !important;
            border-radius: 8px !important;
            border: 1px solid #dee2e6 !important;
        }
    }
    
    .modal-header:not(#disclaimerModal .modal-header) .close-btn:active {
        transform: scale(0.95) !important;
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* 우측 선택된 제품 섹션 숨김 */
    #selectedProductInfo {
        display: none !important;
    }
    
    /* ProductSelectionModal 스타일 */
    .product-selection-modal .search-results {
        flex: 1 1 auto !important;
        min-height: 200px !important;
    }
    
    /* 메인 영역 전체 너비 사용 */
    .product-modal-main {
        display: flex !important;
        flex-direction: column !important;
    }
    .product-modal-main .search-results {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    /* ===== mobile-override.css 통합 끝 ===== */
}

/* ?�블�??�용 ?��???(769px ~ 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* ?�더 조정 */
    .header {
        padding: 15px 20px;
    }
    
    /* 메인 컨테?�너 조정 */
    .main-container {
        grid-template-columns: 320px 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    /* 좌측 계산�??�비 조정 */
    .calculator-sidebar {
        width: 320px;
    }
    
    /* ?�품 그리??조정 */
    .products-container {
        padding: 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    /* ?�버�?메뉴???�시 */
    #hamburgerMenu {
        display: inline-block !important;
    }
    
    /* ?�인 ?�서 ?�정 모달 모바??최적??*/
    #discountOrderModal .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
        height: 90vh !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        overflow: hidden !important;
    }
    
    #discountOrderModal .modal-header {
        padding: 15px !important;
        border-bottom: 1px solid #dee2e6;
    }
    
    #discountOrderModal .modal-header h2 {
        font-size: 18px !important;
        margin: 0 !important;
    }
    
    #discountOrderModal .modal-body {
        padding: 15px !important;
        overflow-y: auto !important;
        height: calc(90vh - 120px) !important;
    }
    
    #discountOrderModal .modal-footer {
        padding: 10px 15px !important;
        border-top: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    #discountOrderModal .modal-footer .btn {
        flex: 1;
        min-width: 80px;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    /* ?�인 ??�� ?�래�??�역 최적??*/
    #sortableDiscounts {
        padding: 15px !important;
        min-height: 120px !important;
        gap: 8px !important;
    }
    
    /* ?�인 ??�� 카드 최적??*/
    .discount-item {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-width: 80px !important;
        text-align: center;
    }
    
    /* ?�명 ?�스??최적??*/
    #discountOrderModal .modal-body h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    #discountOrderModal .modal-body .fa-info-circle,
    #discountOrderModal .modal-body .fa-hand-pointer {
        font-size: 12px !important;
    }
    
    #discountOrderModal .modal-body p,
    #discountOrderModal .modal-body div {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* ?�시 ?�역 최적??*/
    #discountOrderExample {
        font-size: 12px !important;
    }
    
    /* ?�치 친화???�래�???�� */
    .discount-item {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: grab !important;
        touch-action: none !important;
    }
    
    .discount-item:active {
        cursor: grabbing !important;
    }
    
    /* 모바???�인 ?�서 버튼 ?��???*/
    .mobile-discount-order-btn {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        border: none !important;
        border-radius: 8px !important;
        background: linear-gradient(135deg, #007bff, #0056b3) !important;
        color: white !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important;
        min-height: 44px !important; /* ?�치 친화???�이 */
    }
    
    .mobile-discount-order-btn:hover {
        background: linear-gradient(135deg, #0056b3, #004085) !important;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
        transform: translateY(-1px) !important;
    }
    
    .mobile-discount-order-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3) !important;
    }

    /* ===== ?�품 추�? 모달 모바??최적??===== */
    /* ��ǰ �߰� ���: ����� Ǯ��ũ�� */
    .modal {
        overscroll-behavior: contain !important;
        overflow: hidden !important;
    }
    #productModal .modal-content {
        width: 100vw !important;
        height: 100dvh !important;
        height: 100vh !important;
        margin: 0 !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    /* ?�품 추�? 모달 ?�더 */
    #productModal .modal-header {
        padding: calc(env(safe-area-inset-top, 0) + 12px) 16px 12px 16px !important;
        border-bottom: 1px solid #eee !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        background: #fff !important;
    }

    #productModal .modal-header h2 {
        font-size: 18px !important;
        margin: 0 !important;
        color: #333 !important;
    }

    /* ?�품 추�? 모달 바디 - ?�딩 줄임 */
    #productModal .modal-body {
        padding: 12px 16px calc(env(safe-area-inset-bottom, 0) + 12px) 16px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 검??컨테?�너 ?�딩 줄임 */
    #productModal .search-container {
        padding: 10px 0 !important;
        flex-shrink: 0 !important;
    }

    /* 검???�력�?모바??최적??*/
    #productSearchInput {
        font-size: 16px !important;  /* iOS �?방�? */
        padding: 12px 15px !important;
        border-radius: 8px !important;
        border: 2px solid #ddd !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #productSearchInput:focus {
        border-color: var(--emart-pink) !important;
        box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1) !important;
        outline: none !important;
    }

    /* 검???�내 ?�스??*/
    #productModal .search-container div:last-child {
        font-size: 12px !important;
        color: #666 !important;
        margin-top: 8px !important;
    }

    /* 메인 컨텐�??�역 - 좌우?�서 ?�하�?변�?*/
    #productModal .product-modal-main {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        overflow: hidden !important;
    }

    /* 검??결과 ?�역 - ?�단????많�? 공간 */
    #productModal .search-results {
        flex: 2 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        background: white !important;
    }

    /* ?�택???�품 ?�역 - ?�단??축소??공간 */
    #productModal #selectedProductInfo {
        flex: 1 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100px !important;
        overflow-y: auto !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        background: #f8f9fa !important;
    }

    /* ?�택???�품 ?�더 */
    #productModal #selectedProductInfo h4 {
        font-size: 14px !important;
        margin: 0 0 10px 0 !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #dee2e6 !important;
        color: #333 !important;
        font-weight: 600 !important;
    }

    /* 모달 ??버튼??모바??최적??*/
    #productModal button {
        padding: 10px 15px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        min-height: 44px !important;  /* ?�치 ?��?최소 ?�이 */
        touch-action: manipulation !important;
    }

    /* ?�품 ?�택 버튼 - search-result-item용 */
    #productModal .search-result-item .select-product-btn {
        background: #A50034 !important;
        color: white !important;
        border: none !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        min-height: auto !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 50px !important;
    }

    /* 일반 select-product-btn (기존) */
    #productModal .select-product-btn:not(.search-result-item .select-product-btn) {
        background: var(--emart-pink) !important;
        color: white !important;
        border: none !important;
        width: 80px !important;
        padding: 8px 12px !important;
        border-radius: 5px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        cursor: pointer !important;
    }

    #productModal .select-product-btn:hover {
        background: #d81b60 !important;
    }

    #productModal .select-product-btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s !important;
    }

    /* ?�품 카드 ???�보 모바??최적??*/
    #productModal .product-item {
        padding: 15px !important;
        margin-bottom: 10px !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        background: white !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #productModal .product-item:last-child {
        margin-bottom: 0 !important;
    }

    #productModal .product-item h4 {
        font-size: 14px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        color: #333 !important;
        font-weight: 600 !important;
    }

    #productModal .product-item p {
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        color: #666 !important;
    }

    /* 가�??�보 강조 */
    #productModal .product-item .price-info {
        font-weight: 600 !important;
        color: var(--emart-pink) !important;
    }

    /* 검??결과 ?�음 메시지 */
    #productModal .search-results > div:first-child {
        padding: 40px 20px !important;
        font-size: 14px !important;
        color: #999 !important;
        text-align: center !important;
    }

    /* ?�택???�품 ?�음 메시지 */
    #productModal #selectedProductDetails > div:first-child {
        padding: 30px 15px !important;
        font-size: 14px !important;
        color: #999 !important;
        text-align: center !important;
    }

    /* 모달 ?�기 버튼 ?�기 조정 */
    #productModal .close-btn {
        font-size: 24px !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 30px !important;
        text-align: center !important;
        cursor: pointer !important;
        border-radius: 50% !important;
        color: #666 !important;
        background: #f5f5f5 !important;
        border: none !important;
    }

    #productModal .close-btn:hover {
        background: #e0e0e0 !important;
        color: #333 !important;
    }

    /* ?�품 추�? ?�료 버튼 (?�다�? */
    #productModal .add-products-btn {
        width: 100% !important;
        padding: 12px !important;
        background: var(--emart-pink) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-top: 10px !important;
        min-height: 48px !important;
        cursor: pointer !important;
    }

    #productModal .add-products-btn:hover {
        background: #d81b60 !important;
    }

    #productModal .add-products-btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s !important;
    }

    /* ?�크롤바 모바??최적??*/
    #productModal .search-results::-webkit-scrollbar,
    #productModal #selectedProductInfo::-webkit-scrollbar {
        width: 4px !important;
    }

    #productModal .search-results::-webkit-scrollbar-thumb,
    #productModal #selectedProductInfo::-webkit-scrollbar-thumb {
        background: var(--emart-pink) !important;
        border-radius: 2px !important;
    }

    #productModal .search-results::-webkit-scrollbar-track,
    #productModal #selectedProductInfo::-webkit-scrollbar-track {
        background: #f5f5f5 !important;
        border-radius: 2px !important;
    }

    /* ?�사 카테고리 버튼??모바??최적??*/
    #productModal .event-category-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    #productModal .event-category-btn {
        padding: 8px 12px !important;
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        color: #666 !important;
        min-height: 36px !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

    #productModal .event-category-btn:hover,
    #productModal .event-category-btn.active {
        background: var(--emart-pink) !important;
        color: white !important;
        border-color: var(--emart-pink) !important;
    }

    /* ?�사 ?�그 모바??최적??*/
    #productModal .event-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-top: 8px !important;
    }

    #productModal .event-tag {
        padding: 2px 6px !important;
        background: #e3f2fd !important;
        color: #1976d2 !important;
        border-radius: 3px !important;
        font-size: 10px !important;
        font-weight: 500 !important;
    }

    #productModal .event-tag.pos-event {
        background: #fff3e0 !important;
        color: #f57c00 !important;
    }

    /* ?�고 ?�보 모바??최적??*/
    #productModal .inventory-info {
        font-size: 11px !important;
        color: #4caf50 !important;
        margin-top: 4px !important;
    }

    /* 🔥 인기 모델 섹션 스타일 개선 */
    #productModal .popular-models-section h5 {
        font-size: 14px !important;
        margin: 0 0 10px 0 !important;
        color: #333 !important;
        font-weight: 600 !important;
    }
    
    /* 인기 모델 option-card 특별 스타일 - 강제 적용 */
    #productModal .popular-models-section .option-card {
        padding: 8px 6px !important;
        min-height: 50px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;  /* 중앙 정렬로 변경 */
        justify-content: center !important;  /* 중앙 정렬로 변경 */
        text-align: center !important;  /* 텍스트 중앙 정렬 */
        line-height: 1.2 !important;
        gap: 2px !important;
    }
    
    /* 🔥 기존 innerHTML 구조도 강제로 세로 배치 - 최고 우선순위 */
    #productModal .popular-models-section .option-card .option-title,
    #productModal .popular-models-section .options-grid .option-card .option-title,
    .popular-models-section .option-card .option-title,
    .option-card .option-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* innerHTML로 만든 div들도 세로 배치 강제 */
    #productModal .popular-models-section .option-card .option-title > div:first-child {
        font-size: clamp(8px, 2.5vw, 12px) !important;
        font-weight: 600 !important;
        color: #333 !important;
        white-space: nowrap !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 2px !important;
    }
    
    #productModal .popular-models-section .option-card .option-title > div:nth-child(2) {
        font-size: 10px !important;
        color: #666 !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 0 !important;
    }
    
    /* 선택된 상태에서 innerHTML 구조 */
    #productModal .popular-models-section .option-card.selected .option-title > div:first-child {
        color: white !important;
    }
    
    #productModal .popular-models-section .option-card.selected .option-title > div:nth-child(2) {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* 모델명 - 자동 크기 조절 (CSS만으로) */
    #productModal .popular-models-section .option-card .model-name {
        font-size: clamp(8px, 2.5vw, 12px) !important;  /* 자동 크기 조절 */
        font-weight: 600 !important;
        color: #333 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        max-width: 100% !important;
    }
    
    /* Container Query를 사용한 더 정교한 조절 (지원 브라우저) */
    @supports (font-size: clamp(1px, 1cqw, 1px)) {
        #productModal .popular-models-section .option-card {
            container-type: inline-size !important;
        }
        
        #productModal .popular-models-section .option-card .model-name {
            font-size: clamp(7px, 8cqw, 12px) !important;
        }
    }
    
    /* 수동 길이별 클래스 (JavaScript 보조) */
    #productModal .popular-models-section .option-card .model-name[data-length="long"] {
        font-size: 10px !important;
    }
    
    #productModal .popular-models-section .option-card .model-name[data-length="very-long"] {
        font-size: 9px !important;
    }
    
    #productModal .popular-models-section .option-card .model-name[data-length="ultra-long"] {
        font-size: 8px !important;
    }
    
    /* 제품군 - 다음 줄에 표시 */
    #productModal .popular-models-section .option-card .product-category {
        font-size: 10px !important;
        color: #666 !important;
        font-weight: 400 !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* 선택된 상태 */
    #productModal .popular-models-section .option-card.selected .model-name {
        color: white !important;
    }
    
    #productModal .popular-models-section .option-card.selected .product-category {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* === 검색 결과 아이템 스타일 (새로 정리) === */
    
    /* 검색 결과 아이템 기본 스타일 */
    #productModal .search-result-item {
        margin-bottom: 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: white !important;
        box-shadow: none !important;
    }
    
    /* 행사 헤더 - 우측 정렬 */
    #productModal .event-header {
        padding: 8px 12px !important;
        border-bottom: 1px solid #dee2e6 !important;
        text-align: right !important;
        background: transparent !important;
    }
    
    /* 제품 정보 메인 컨테이너 */
    #productModal .search-result-item > div:last-child {
        padding: 15px !important;
        background: transparent !important;
    }
    
    /* 제품 정보와 버튼 레이아웃 */
    #productModal .search-result-item > div:last-child > div {
        display: flex !important;
        align-items: flex-start !important;
        gap: 15px !important;
        background: transparent !important;
    }
    
    /* 제품 정보 영역 (좌측) */
    #productModal .search-result-item > div:last-child > div > div:first-child {
        flex: 1 !important;
        background: transparent !important;
    }
    
    /* 🔥 간단하고 강력한 모바일 정렬 규칙 🔥 */
    #productModal .search-result-item * {
        text-align: left !important;
    }
    
    #productModal .search-result-item .select-product-btn {
        text-align: center !important;
    }
    
    /* 선택 버튼 스타일 Override */
    #productModal .search-result-item .select-product-btn {
        background: #A50034 !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        min-height: auto !important;
        width: auto !important;
        cursor: pointer !important;
    }
    
    /* 재고조회 모달 모바일 전체 화면 (2025-09-13 추가) */
    #stockSearchModal .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    /* 재고조회 모달 헤더 */
    #stockSearchModal .modal-header {
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 10 !important;
    }
    
    /* 재고조회 모달 바디 */
    #stockSearchModal .modal-body {
        padding: 15px 20px !important;
        height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
    }
    
    /* 재고조회 모달 닫기 버튼 */
    #stockSearchModal .close-btn {
        font-size: 24px !important;
        padding: 5px !important;
    }

    /* ===== 권역/지점 재고 모달 모바일 최적화 ===== */

    /* 권역/지점 재고 모달 전체화면 */
    #regionStockModal .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* 권역/지점 재고 모달 바디 */
    #regionStockModal .modal-body {
        height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        padding: 15px 20px !important;
    }

    /* 검색 필터 컨테이너를 세로 배치로 변경 - 인라인 스타일 덮어쓰기 */
    #regionStockModal div.search-filter-container[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* 검색 섹션 전체 너비 - 인라인 스타일 덮어쓰기 */
    #regionStockModal div.search-section[style*="width: 300px"] {
        width: 100% !important;
        max-width: none !important;
    }

    /* 검색창 스타일 개선 - 인라인 스타일 덮어쓰기 */
    #regionStockModal input#regionStockSearch[style*="width: 100%"] {
        width: calc(100% - 24px) !important;
        font-size: 16px !important;
        padding: 12px 40px 12px 15px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* 필터 섹션 전체 너비 */
    #regionStockModal div.filter-section[style*="flex: 1"] {
        flex: none !important;
        width: 100% !important;
    }

    /* 필터 버튼 컨테이너 세로 배치로 변경 */
    #regionStockModal .filter-buttons-container[style] {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    /* 카테고리 필터 영역 */
    #regionStockModal #categoryFilters[style] {
        flex: none !important;
        width: 100% !important;
    }

    /* 카테고리 버튼 줄들 */
    #regionStockModal #categoryFilters > div[style] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        margin-bottom: 8px !important;
    }

    /* 카테고리 버튼들 크기 조정 */
    #regionStockModal .category-filter-btn[style] {
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* 전체 버튼 */
    #regionStockModal .category-filter-btn[data-category="all"][style] {
        padding: 10px 20px !important;
        font-size: 16px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 구분선 숨기기 */
    #regionStockModal .filter-buttons-container > div[style*="width: 1px"] {
        display: none !important;
    }

    /* 권역/지점 선택 컨테이너 */
    #regionStockModal #regionSelectContainer,
    #regionStockModal #branchSelectContainer {
        position: relative !important;
        z-index: 99999 !important;
        overflow: visible !important;
        margin-bottom: 15px !important;
    }

    /* 권역/지점 선택 버튼들 */
    #regionStockModal #selectedRegion,
    #regionStockModal #branchSelect {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        background: white !important;
        text-align: left !important;
    }

    /* ===== 이용 약관 모달 모바일 스타일 덮어쓰기 ===== */

    /* 이용 약관 모달 헤더 스타일 복원 - 매우 높은 우선순위 */
    div#disclaimerModal div.modal-header {
        background: linear-gradient(135deg, #aa1239 0%, #8a0e2e 100%) !important;
        color: white !important;
        padding: 25px !important;
        border-bottom: 2px solid #c9302c !important;
        border-radius: 5px 5px 0 0 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        top: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    div#disclaimerModal div.modal-header h2 {
        margin: 0 !important;
        font-size: 20px !important;
        text-align: center !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        color: white !important;
        line-height: 1.2 !important;
    }

    /* 이용 약관 모달 바디 스타일 - 매우 높은 우선순위 */
    div#disclaimerModal div.modal-body {
        padding: 25px !important;
        line-height: 1.8 !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
    }

    /* 이용 약관 모달 푸터 스타일 - 매우 높은 우선순위 */
    div#disclaimerModal div.modal-footer {
        padding: 20px !important;
        padding-bottom: calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
        background: #ecf0f1 !important;
        text-align: center !important;
        border-top: 2px solid #c9302c !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    /* 이용 약관 모달 버튼 스타일 - 매우 높은 우선순위 */
    div#disclaimerModal button.disclaimer-btn {
        font-size: 14px !important;
        padding: 12px 20px !important;
        margin-right: 10px !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
        white-space: nowrap !important;
        border: none !important;
    }

    /* 모바일에서 버튼 크기 조정 - 매우 높은 우선순위 */
    @media (max-width: 480px) {
        div#disclaimerModal button.disclaimer-btn {
            font-size: 13px !important;
            padding: 10px 15px !important;
            margin-right: 8px !important;
        }

        div#disclaimerModal div.modal-header h2 {
            font-size: 18px !important;
        }

        div#disclaimerModal div.modal-body {
            padding: 20px !important;
        }

        /* 권역/지점재고 모달에서 카테고리 필터 텍스트 완전히 숨기기 */
        #regionStockModal .filter-section > div[style*="카테고리 필터"],
        #regionStockModal .filter-section > div[style*="font-size: 12px"][style*="color: #666"],
        #regionStockModal .filter-section > div[style*="text-align: center"] {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        /* 카테고리 필터라는 텍스트가 포함된 모든 div 숨기기 */
        #regionStockModal .filter-section div:first-child {
            display: none !important;
        }

        /* 권역/지점재고 모달 - 재고 현황 아이템 모바일 최적화 (더 구체적인 선택자) */
        #regionStockModal div[style*="background: white"] .stock-item-header[style*="display: flex"] {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 12px !important;
            justify-content: flex-start !important;
        }

        #regionStockModal .stock-item-info {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
        }

        #regionStockModal .stock-item-info strong[style*="font-size: 16px"] {
            display: block !important;
            margin-bottom: 8px !important;
            font-size: 15px !important;
            line-height: 1.4 !important;
        }

        #regionStockModal .stock-item-info span[style*="color: #666"] {
            display: block !important;
            margin-left: 0 !important;
            margin-top: 4px !important;
            margin-bottom: 4px !important;
        }

        #regionStockModal .stock-item-info span[style*="background: #fee2e2"] {
            display: block !important;
            margin-left: 0 !important;
            margin-top: 6px !important;
            width: fit-content !important;
        }

        #regionStockModal .stock-item-stats[style*="display: flex"] {
            width: 100% !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            flex-wrap: wrap !important;
        }

        #regionStockModal .stock-item-stats span {
            font-size: 13px !important;
            padding: 6px 10px !important;
            white-space: nowrap !important;
        }
    }