.bmarket-view-container, .bmarket-wrapper, .bmarket-image-zone, .bmarket-thumb-container, .bmarket-info-zone, .bmarket-control-panel, .bmarket-spec-table { box-sizing: border-box !important; }
.bmarket-view-container { width: 100% !important; }
.bmarket-main-frame { position: relative !important; border-radius: 12px !important; background-color: #f4f4f5 !important; overflow: hidden !important; border: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; }
.bmarket-main-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.bmarket-state-soldout { opacity: 0.8 !important; }
.bmarket-state-soldout .bmarket-main-photo { filter: blur(6px) grayscale(100%) !important; opacity: 0.6 !important; }
.bmarket-state-soldout::after { content: '판매완료' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background-color: #18181b !important; color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; padding: 10px 20px !important; border-radius: 30px !important; letter-spacing: -0.3px !important; z-index: 10 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; }
.bmarket-thumb-container { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overflow-y: hidden !important; padding-bottom: 6px !important; }
.bmarket-thumb-container:has(.bmarket-thumb-hidden[style*="inline-flex"]), .bmarket-thumb-container:has(.bmarket-thumb-hidden[style*="block"]) { overflow-x: auto !important; }
.bmarket-thumb-container::-webkit-scrollbar { height: 8px !important; display: block !important; } .bmarket-thumb-container::-webkit-scrollbar-track { background: #f4f4f5 !important; border-radius: 10px !important; } .bmarket-thumb-container::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 10px !important; border: 2px solid #f4f4f5 !important; } .bmarket-thumb-container::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
.bmarket-thumb-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 6px 0 !important; margin: 0 !important; list-style: none !important; width: max-content !important; }
.bmarket-thumb-item { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #f4f4f5 !important; border-radius: 8px !important; background-color: #ffffff !important; overflow: hidden !important; cursor: pointer !important; flex-shrink: 0 !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important; }
.bmarket-thumb-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.bmarket-thumb-item:hover { border-color: #d4d4d8 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; }
.bmarket-thumb-item.bmarket-btn-action { font-family: 'Outfit', "Noto Sans KR", sans-serif !important; font-size: 10px !important; font-weight: 600 !important; color: #71717a !important; background-color: #f4f4f5 !important; text-align: center !important; user-select: none !important; border: none !important; flex-direction: column !important; line-height: 1.3 !important; padding: 2px !important; gap: 1px !important; }
.bmarket-thumb-item.bmarket-btn-action:hover { background-color: #e4e4e7 !important; color: #18181b !important; }
.bmarket-thumb-list .bmarket-thumb-hidden, .bmarket-thumb-list #market_close_btn { display: none !important; }
.bmarket-spec-table { border-collapse: collapse !important; border-spacing: 0 !important; width: 100% !important; background-color: #ffffff !important; border: none !important; }
.bmarket-spec-table tr { border-bottom: 1px solid #f4f4f5 !important; } .bmarket-spec-table tr:last-child { border-bottom: none !important; }
.bmarket-spec-table th { width: 70px !important; padding: 10px 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #a1a1aa !important; text-align: left !important; background: none !important; border: none !important; }
.bmarket-spec-table td { padding: 10px 12px !important; font-size: 13.5px !important; color: #18181b !important; vertical-align: middle; font-weight: 500 !important; border: none !important; }
.bmarket-price-text { font-size: 18px !important; font-weight: 700 !important; color: #f43f5e !important; letter-spacing: -0.3px !important; }
.bmarket-author-box { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 600 !important; color: #09090b !important; }
.bmarket-btn-msg { display: inline-flex !important; align-items: center !important; font-size: 11px !important; font-weight: 600 !important; color: #2563eb !important; background-color: #eff6ff !important; border: none !important; padding: 3px 8px !important; border-radius: 4px !important; text-decoration: none !important; transition: all 0.15s !important; } .bmarket-btn-msg:hover { background-color: #dbeafe !important; }
.bmarket-link-toggle { font-size: 12px !important; color: #2563eb !important; text-decoration: none !important; font-weight: 600; background-color: #f0f4ff !important; padding: 4px 8px !important; border-radius: 4px !important; transition: all 0.15s !important; display: inline-block !important; } .bmarket-link-toggle:hover { background-color: #dbeafe !important; }
.bmarket-empty-text, .bmarket-guest-text { font-size: 12px !important; color: #a1a1aa !important; font-style: normal !important; display: inline-block !important; }
.bmarket-category-text { font-weight: 600 !important; color: #09090b !important; }
.bmarket-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 10px !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } .bmarket-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
.bmarket-btn-status { color: #ffffff !important; }
.bmarket-status-complete { background-color: #18181b !important; } .bmarket-status-complete:hover { background-color: #27272a !important; }
.bmarket-status-resell { background-color: #f59e0b !important; } .bmarket-status-resell:hover { background-color: #d97706 !important; }
.bmarket-btn-scrap { display: inline-flex !important; font-size: 12px !important; font-weight: 500 !important; color: #4b5563 !important; background-color: #f3f4f6 !important; border: 1px solid #e5e7eb !important; padding: 8px 12px !important; border-radius: 6px !important; text-decoration: none !important; } .bmarket-btn-scrap:hover { background-color: #e5e7eb !important; }
.bmarket-btn-raise { background-color: #0ea5e9 !important; color: #ffffff !important; } .bmarket-btn-raise:hover { background-color: #0284c7 !important; }
.bmarket-control-panel .bmarket-btn { width: 100% !important; display: inline-flex !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; }
.bmarket-spec-table .bmarket-sns-cell { padding: 8px 0 12px 0 !important; }


.bmarket-status-complete { background-color: #e11d48 !important; }
.bmarket-status-complete:hover { background-color: #c50c35 !important; }
.bmarket-status-resell { background-color: #f59e0b !important; }
.bmarket-status-resell:hover { background-color: #d97706 !important; }
/*안전거래*/
.bmarket-warning-box { width: 100% !important; border: 1px solid #e4e4e7 !important; border-radius: 8px !important; background-color: #fafafa !important; padding: 16px !important; margin-bottom: 16px !important; box-sizing: border-box !important; }
.bmarket-warning-text { font-size: 13px !important; color: #3f3f46 !important; line-height: 1.6 !important; font-family: sans-serif !important; }
.bmarket-warning-video { margin-top: 10px !important; }
.bmarket-warning-video a { font-size: 13px !important; color: #003ff9 !important; font-weight: 500 !important; text-decoration: none !important; }
.bmarket-scam-panel { display: block !important; clear: both !important; text-align: center !important; margin: 16px auto !important; width: 100% !important; max-width: 480px !important; box-sizing: border-box !important; padding: 0 10px !important; }
.bmarket-scam-row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; width: 100% !important; }
.bmarket-scam-btn { flex: 1 !important; min-width: 140px !important; display: inline-block !important; color: #ffffff !important; font-size: 12.5px !important; font-weight: bold !important; padding: 12px 10px !important; border-radius: 8px !important; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0,0,0,0.06) !important; font-family: sans-serif !important; white-space: nowrap !important; box-sizing: border-box !important; text-align: center !important; }
.bmarket-scam-btn.bmarket-btn-police { background-color: #555 !important; }
.bmarket-scam-btn.bmarket-btn-thecheat { background-color: #555 !important; }
.bmarket-scam-footer { margin: 8px 0 0 0 !important; font-size: 11px !important; color: #94a3b8 !important; text-align: center !important; font-family: sans-serif !important; }
/*안전거래*/
/* ==========================================================================
   [모바일 반응형 레이아웃 차별화 분기점] - 원본 HTML 수정 없이 강제 제어
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. 모바일에서는 좌우 정렬을 깨고 상하(세로) 배치로 강제 변경 */
    .bmarket-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* 2. 이미지 영역 가로폭을 모바일 화면에 맞춰 100%로 확장 */
    .bmarket-image-zone {
        width: 100% !important;
    }
    
    /* 3. 메인 큰 이미지 프레임 가로폭 확장 및 세로 비율 자동화 */
    .bmarket-main-frame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important; /* 모바일 화면에 적합한 메인 이미지 비율 */
    }
    
    /* 4. 하단 개별 썸네일들의 크기를 모바일에 맞게 강제 고정 (예: 가로세로 48px) */
    .bmarket-thumb-item {
        width: 48px !important;
        height: 48px !important;
    }
}
/* ==========================================================================
   [우측 상세 정보 및 컨트롤 패널 모바일 반응형] - 원본 HTML 수정 없이 강제 제어
   ========================================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. 정보 구역을 모바일 폭 100%로 채우고, 요소 간 간격을 12px로 좁힘 */
    .bmarket-info-zone {
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }
    
    /* 2. 스펙 테이블 내부 셀(th, td) 여백 및 글자 크기를 모바일에 맞게 조절 */
    .bmarket-spec-table th {
        width: 65px !important; /* 항목 명 가로폭 약간 축소 */
        padding: 10px 0 !important; /* 상하 여백 축소 */
        font-size: 12px !important;
    }
    
    .bmarket-spec-table td {
        padding: 10px 8px !important; /* 상하좌우 여백 축소 */
        font-size: 12.5px !important;
    }
    
    /* 3. 가격 텍스트 크기를 모바일 화면 크기에 적당하게 최적화 */
    .bmarket-price-text {
        font-size: 16px !important;
    }
    
    /* 4. 하단 버튼 영역(컨트롤 패널) 여백 조절 */
    .bmarket-control-panel {
        margin-top: 8px !important;
        width: 100% !important;
    }
}
