/* 화면 확대/축소 방지 (touch-action) */
    .dental-teeth-section,
    .dental-teeth-section * {
        touch-action: pan-x pan-y;
    }

    /* 아임웹 기존 스타일과 충돌 방지를 위한 dental- 접두사 */

    /* 추가 항목 섹션 스타일 */
    /* 브랜드 관리 섹션 접기/펼치기 스타일 */


    .dental-brand-management-section {
        border-radius: 8px;
        margin-bottom: 30px;
        border: 1px solid;
        overflow: hidden;
    }

    /* 안내 문구 */
    .dental-brand-section-guide {
        margin: 0;
        font-size: 12px;
        font-weight: 400;
        color: #888;
        line-height: 1.6;
        word-break: keep-all;
    }
    .dental-brand-section-guide strong {
        color: #34abeb;
        font-weight: 600;
    }

    .dental-brand-section-header {
        padding: 15px 20px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: all 0.3s;
    }



    /*  기존 브랜드 섹션 스타일과 분리 */
    .dental-brand-section-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .dental-brand-toggle-icon {
        font-size: 20px;
        transition: transform 0.3s;
    }

    .dental-brand-toggle-icon.open {
        transform: rotate(180deg);
    }

    .dental-brand-section-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease-out;
    }

    /* 브랜드가 많을 때 2000px 제한에 걸려 잘리고 dentalRenderBrandList 가 다시 호출될 때마다
       애니메이션이 끊기는 문제 해결 — 충분히 큰 값 + 짧은 transition 으로 자연스럽게 표시 */
    .dental-brand-section-body.open {
        max-height: 9999px;
        transition: max-height 0.35s ease-in;
    }

    .dental-brand-section-content {
        padding: 20px;
    }

    /*  설정 섹션 공통 스타일 */
    .dental-settings-section {
        margin-bottom: 30px;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid;
    }

    .dental-settings-section-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .dental-settings-section-title {
        margin-right: auto;
        text-align: left;
    }

    .dental-section-save-btn {
        padding: 8px 20px;
        background: #34abeb;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }


    .dental-section-save-btn:hover {
        background: #2c8fc7;
        box-shadow: 0 2px 8px rgba(52, 171, 235, 0.3);
    }

    .dental-section-save-btn.saved {
        background: #b0b0b0 !important;
        color: #fff !important;
        cursor: not-allowed !important;
        opacity: 0.7;
        pointer-events: none;
    }

    .dental-section-save-btn:not(.saved) {
        background: #34abeb;
    }

    /* ─────────── 치료계획 탭 바 (Step 1) ─────────── */
    .dental-plan-tab-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        min-height: 28px;
    }
    .dental-plan-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 600;
        color: #555;
        background: #fff;
        border: 1px solid #c8c8c8;
        border-radius: 14px;
        cursor: pointer;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.15s;
    }
    .dental-plan-tab:hover {
        border-color: #2d8cf0;
        color: #2d8cf0;
    }
    .dental-plan-tab.active {
        background: #2d8cf0;
        border-color: #2d8cf0;
        color: #fff;
    }
    .dental-plan-tab .dental-plan-tab-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        font-size: 11px;
        opacity: 0.6;
    }
    .dental-plan-tab .dental-plan-tab-menu:hover {
        opacity: 1;
        background: rgba(0,0,0,0.1);
    }
    .dental-plan-tab.active .dental-plan-tab-menu:hover {
        background: rgba(255,255,255,0.25);
    }
    .dental-plan-add-btn {
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        color: #2d8cf0;
        background: #fff;
        border: 1px dashed #2d8cf0;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .dental-plan-add-btn:hover {
        background: #2d8cf0;
        color: #fff;
    }
    .dental-plan-compare-btn {
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        background: #6c5ce7;
        border: none;
        border-radius: 14px;
        cursor: pointer;
        transition: all 0.15s;
    }
    .dental-plan-compare-btn:hover {
        background: #5a4fcf;
    }
    .dental-plan-compare-btn[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    @media print {
        /* 브라우저 기본 헤더/푸터(제목·날짜·URL·페이지번호) 영역 제거 */
        @page {
            size: A4 portrait;
            margin: 0;
        }
        @page :first { margin: 0; }
        @page :left  { margin: 0; }
        @page :right { margin: 0; }

        /* 모든 것 숨기기 */
        body>* {
            display: none !important;
            visibility: hidden !important;
        }

        /* 인쇄 전용 div만 표시 */
        #dentalPrintArea {
            display: block !important;
            visibility: visible !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 8mm 10mm !important;
            z-index: 99999 !important;
        }

        #dentalPrintArea * {
            visibility: visible !important;
        }

        /*  그리기 도구 숨기기 */
        #drawing-master-button-v21,
        #drawing-toolbar-v21,
        #drawing-canvas-v21 {
            display: none !important;
            visibility: hidden !important;
        }

        .dental-estimate-delete-btn {
            display: none !important;
        }

        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
    }




    /* 프린트 버튼 스타일 */
    .dental-print-btn {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, #bdc4c9 0%, #b6bbc3 100%);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 20px;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .dental-print-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(107, 124, 147, 0.4);
    }

    .dental-print-btn:active {
        transform: translateY(0);
    }



    /*  데이터 변경 시에만 사용할 애니메이션 */
    @keyframes dentalDataFadeIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* 치아 오버레이 애니메이션 (데이터 로딩 시에만) */
    .dental-overlay-image.visible.animated {
        animation: dentalDataFadeIn 0.4s ease-out;
    }

    /* 상태 리스트 아이템 애니메이션 */
    .dental-tooth-status-item.animated {
        animation: dentalDataFadeIn 0.5s ease-out;
    }

    .dental-additional-options {
        margin-top: 0px;
        border-radius: 8px;
        overflow: hidden;
        background: white;
        display: flex;
        /*  추가 */
        flex-direction: column;
        /*  추가 */
        align-items: flex-end;
        /*  오른쪽 정렬 */
    }

    .dental-additional-options-header {
        padding: 10px 20px;
        /*  인쇄 버튼과 동일한 패딩 */
        background: white;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        transition: all 0.2s;
        /*  인쇄 버튼과 동일한 트랜지션 */
        border-radius: 6px;
        /*  인쇄 버튼과 동일한 둥근 모서리 */
        width: auto;
        min-width: 150px;
        /*  최소 너비 조정 */
        gap: 8px;
        /*  텍스트와 아이콘 간격 */
    }

    .dental-additional-options-header:hover {
        background: #f8f9fa;
        /*  살짝 회색 */
        border-color: #34abeb;
    }

    /*  추가항목 선택 헤더 전용 스타일 */
    .dental-additional-options-header h4 {
        margin: 0 !important;
        font-size: 11px !important;
        /* 원하는 크기로 조정 */
        font-weight: 500 !important;
        color: #666 !important;
        /*  파란색 → 회색으로 변경 */
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .dental-toggle-icon {
        font-size: 10px;
        /*  크기 더 줄임 */
        color: #666;
        transition: transform 0.3s;
    }

    .dental-toggle-icon.open {
        transform: rotate(180deg);
    }

    .dental-additional-options-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
        width: 100%;
        /*  추가: 펼쳤을 때는 전체 너비 */
    }

    .dental-additional-options-body.open {
        max-height: 2000px;
        transition: max-height 0.8s ease-in;
    }



    .dental-additional-options-content {
        padding: 5px 20px;
    }

    .dental-additional-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        margin-bottom: 15px;
    }

    .dental-additional-table th,
    .dental-additional-table td {
        border: 1px solid #e0e0e0;
        padding: 12px;
        text-align: center;
        vertical-align: middle;
    }

    .dental-additional-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
    }

    .dental-additional-table tbody tr:hover {
        background: #f8f9fa;
    }

    .dental-checkbox-cell {
        width: 60px;
    }

    .dental-checkbox-cell input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .dental-item-disabled {
        opacity: 0.4;
        pointer-events: none;
    }

    .dental-additional-summary {
        padding: 15px;
        background: #e3f2fd;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dental-additional-summary-label {
        font-size: 14px;
        font-weight: 600;
        color: #1976d2;
    }

    .dental-additional-summary-amount {
        font-size: 18px;
        font-weight: 700;
        color: #1976d2;
    }

    /* 기존 견적 총액 스타일 수정 */
    .dental-estimate-total {
        margin-top: 20px;
        padding: 20px;
        background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
        border-radius: 12px;
        border: 1px solid #ff9800;
    }

    .dental-estimate-total-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .dental-estimate-total-row:last-child {
        margin-bottom: 0;
        padding-top: 15px;
        border-top: 2px solid #ff9800;
    }

    .dental-estimate-total-label {
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .dental-estimate-total-label.final {
        font-size: 18px;
        color: #e65100;
    }

    .dental-estimate-total-amount {
        font-size: 20px;
        font-weight: 700;
        color: #e74c3c;
    }

    .dental-estimate-total-amount.final {
        font-size: 28px;
        color: #e65100;
    }

    .dental-mobile-app {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        background: white;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
        margin-bottom: 32px;
    }
    /* 임플란트 위젯과 하단 갤러리 위젯 사이 여백 */
    .dg3-gallery {
        margin-top: 32px;
    }




    /* ========================================
      사용자 정보 표시
     ======================================== */
    .dental-user-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 0;
    }

    .dental-user-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .dental-user-name {
        font-size: 16px;
        font-weight: 600;
    }

    .dental-user-email {
        font-size: 12px;
        opacity: 0.9;
    }

    .dental-logout-btn {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s;
    }

    .dental-logout-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .dental-teeth-image-container {
        max-width: 100%;
    }

    .dental-header {
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
    }

    .dental-header h1 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    .dental-settings-icon {
        width: 24px;
        height: 24px;
        cursor: pointer;
        color: #666;
    }

    .dental-teeth-section {
        padding: 30px 20px;
        background: white;
    }
    .dental-teeth-main {
        width: 100%;
    }

    .dental-teeth-image-container {
        position: relative;
        width: 100%;
        margin: 0 auto;
        aspect-ratio: 1920 / 890;
    }

    /* === AI 상담 사이드 패널 === */
    /* === AI 사이드 패널 삭제됨 - 플로팅 카드로 통합 === */

    /* === 플로팅 글래스 팝업 (fixed, 바탕 독립) === */
    .dental-float-card {
        position: fixed;
        z-index: 9999;
        width: 195px;
        background: rgba(250,250,252,0.96);
        /* backdrop-filter 제거 (GPU 부하) — 반투명 배경 불투명도를 올려 대체 */
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        overflow: hidden;
        opacity: 0;
        transform: translateX(-8px) scale(0.97);
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
        left: 12px;
        top: 80px;
    }
    .dental-float-card.show {
        opacity: 1;
        transform: translateX(0) scale(1);
        pointer-events: auto;
    }
    .dental-float-card.fc-dragging {
        transition: none;
        box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .dental-float-card-header {
        padding: 6px 10px;
        background: rgba(30,30,40,0.92);
        /* backdrop-filter 제거 */
        color: white;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: grab;
        user-select: none;
        gap: 4px;
    }
    .dental-float-card-header:active { cursor: grabbing; }
    .dental-float-card-header .fc-title-text {
        flex: 1; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dental-float-card-header .fc-close {
        background: rgba(255,255,255,0.15); border: none; color: white;
        font-size: 13px; cursor: pointer; opacity: 0.8; padding: 1px 5px;
        border-radius: 4px; line-height: 1;
        transition: background 0.15s;
    }
    .dental-float-card-header .fc-close:hover { opacity: 1; background: rgba(255,255,255,0.3); }
    .dental-float-card-body {
        padding: 4px;
        /* 가능한 길게 — 스크롤 없이 모두 표시 (뷰포트 한도 내에서) */
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    .dental-float-card-body::-webkit-scrollbar { width: 3px; }
    .dental-float-card-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
    .dental-float-card-item {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 5px 7px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.12s;
        font-size: 11px;
    }
    .dental-float-card-item:hover { background: rgba(52,171,235,0.1); }
    .dental-float-card-item .fc-icon {
        width: 24px; height: 24px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 12px;
    }
    .dental-float-card-item .fc-icon.video { background: rgba(231,76,60,0.12); color: #e74c3c; }
    .dental-float-card-item .fc-icon.image { background: rgba(52,171,235,0.12); color: #34abeb; }
    .dental-float-card-item .fc-text {
        flex: 1; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-weight: 600; color: #222;
    }
    .dental-float-card-item .fc-count {
        font-size: 9px; color: #888; flex-shrink: 0;
        background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 8px;
    }
    /* 섹션 구분선 */
    .dental-fc-divider {
        height: 1px;
        background: rgba(0,0,0,0.06);
        margin: 3px 8px;
    }
    /* 섹션 라벨 */
    .dental-fc-section-label {
        font-size: 9px;
        font-weight: 700;
        color: rgba(0,0,0,0.35);
        text-transform: uppercase;
        padding: 4px 8px 1px;
        letter-spacing: 0.3px;
    }

    /* ── 치아 적용 시 헤더 '탭'만 표시 → 마우스오버하면 펼쳐짐 (여러 치아 겹침 방지) ── */
    .dental-float-card.fc-collapsed .dental-float-card-body { display: none; }
    .dental-float-card.fc-collapsed .fc-title-text::after {
        content: ' \25BE';   /* ▾ : 마우스오버하면 펼쳐짐 표시 */
        opacity: 0.6;
        font-weight: 400;
    }

    /* ── 우클릭 교체 브랜드 전용 미니 카드 ── */
    .dental-brand-mini-card {
        position: fixed;
        z-index: 10002;
        background: #fff;
        /* backdrop-filter 제거 — 불필요(배경 이미 거의 불투명) */
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        min-width: 180px;
        max-width: 240px;
        overflow: hidden;
        display: none;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    .dental-brand-mini-card.show { display: block; }
    .dental-brand-mini-card-header {
        background: linear-gradient(135deg, #2d8cf0 0%, #2475cc 100%);
        color: white;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
    }
    .dental-brand-mini-card-body { padding: 4px 0; }
    .dental-brand-mini-card-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        cursor: pointer;
        transition: background 0.15s;
        font-size: 12px;
        color: #333;
    }
    .dental-brand-mini-card-item:hover { background: rgba(45,140,240,0.08); }
    .dental-brand-mini-card-item .bmc-icon {
        width: 22px; height: 22px; border-radius: 5px;
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; flex-shrink: 0;
    }
    .dental-brand-mini-card-item .bmc-icon.video { background: rgba(231,76,60,0.12); color: #e74c3c; }
    .dental-brand-mini-card-item .bmc-icon.image { background: rgba(39,174,96,0.12); color: #27ae60; }
    .dental-brand-mini-card-item .bmc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* ── 임플란트 호버 시 헤더 '탭'만 표시 → 마우스오버하면 펼쳐짐 ── */
    .dental-brand-mini-card.bmc-collapsed .dental-brand-mini-card-body { display: none; }
    .dental-brand-mini-card.bmc-collapsed .dental-brand-mini-card-header::after {
        content: ' \25BE';   /* ▾ : 마우스오버하면 펼쳐짐 표시 */
        opacity: 0.75;
        font-weight: 400;
    }

    /* ── 시술 모달 (치료 옵션 메뉴) — 삭제(결손) 치아 호버 시, 클릭=적용 ── */
    .dental-tx-menu {
        position: fixed;
        z-index: 10002;
        /* 더 투명 + 프로스티드 글래스 (따뜻한 치아 배경이 비쳐 들어옴) */
        background: rgba(0,0,0,0.48);
        -webkit-backdrop-filter: blur(13px);
        backdrop-filter: blur(13px);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.28);
        border: 1px solid rgba(255,255,255,0.16);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        padding: 3px;
        min-width: 112px;
        display: none;
        /* 앱 루트(maim.css:518)와 동일한 폰트 스택으로 통일 */
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
    }
    .dental-tx-menu.show { display: block; }
    .dental-tx-menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 700;
        color: rgba(255,255,255,0.95);
        cursor: pointer;
        border-radius: 8px;
        transition: background 0.12s;
        white-space: nowrap;
    }
    .dental-tx-menu-item:hover { background: rgba(255,255,255,0.12); }
    .dental-tx-menu-item + .dental-tx-menu-item { border-top: 1px solid rgba(255,255,255,0.1); }
    /* 삭제 치아 = 임플란트 예정 → 현재 치료로 강조 */
    .dental-tx-menu-item.active { background: rgba(45,140,240,0.9); color: #fff; }
    .dental-tx-menu-item.active:hover { background: rgba(45,140,240,1); }
    .dental-tx-menu-item .tx-check { font-size: 14px; font-weight: 800; flex: none; }

    /* ── 미디어 글래스 팝업 ── */
    .dental-action-log {
        position: fixed;
        top: 12px;
        right: 20px;
        z-index: 10003;
        width: 230px;
        max-height: 450px;
        background: rgba(0,0,0,0.75);
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
        overflow: hidden;
        contain: layout style paint;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        display: none;
        cursor: default;
        user-select: none;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .dental-action-log.show { display: flex; flex-direction: column; }
    .dental-action-log.collapsed .dental-action-log-body-wrap { display: none; }
    /* 갤러리 모달 열림 OR DG3 갤러리가 뷰포트 안에 있을 때 우측 카드 숨김 (GPU 부담 제거) */
    body.dental-gallery-open .dental-action-log,
    body.dental-gallery-visible .dental-action-log { display: none !important; }
    .dental-action-log-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 12px;
        cursor: grab;
        background: rgba(255,255,255,0.04);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .dental-action-log-header:active { cursor: grabbing; }
    .dental-action-log-title {
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,0.95);
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .dental-action-log-title .al-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: #60a5fa;
        /* 무한 펄스 애니메이션 제거 → GPU 레이어 영구 유지 비용 제거 */
    }
    .dental-action-log-toggle {
        background: none; border: none; color: rgba(255,255,255,0.4);
        font-size: 14px; cursor: pointer; padding: 2px 4px; line-height: 1;
    }
    .dental-action-log-toggle:hover { color: rgba(255,255,255,0.8); }
    .dental-action-log-body-wrap {
        position: relative;
        flex: 1;
        min-height: 0;
    }
    .dental-action-log-body {
        max-height: 390px;
        overflow-y: auto;
        padding: 6px 8px 24px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .dental-action-log-body::-webkit-scrollbar { width: 5px; }
    .dental-action-log-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 5px; }
    .dental-action-log-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.45); border-radius: 5px; min-height: 30px; }
    .dental-action-log-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6); }
    .dental-al-fade-bottom {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 36px;
        background: linear-gradient(transparent, rgba(10,10,20,0.85));
        pointer-events: none;
        display: none;
        z-index: 1;
        transition: opacity 0.25s;
    }
    .dental-al-fade-bottom.visible { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }
    .dental-al-fade-arrow {
        color: rgba(255,255,255,0.7);
        font-size: 11px;
        letter-spacing: 2px;
        /* 무한 bounce 애니메이션 제거 → GPU 레이어 영구 유지 비용 제거 */
    }
    .dental-al-section { margin-bottom: 2px; }
    .dental-al-section-label {
        font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.8);
        text-transform: uppercase; letter-spacing: 0.3px;
        padding: 3px 4px 2px; margin-bottom: 2px;
    }
    .dental-al-thumb {
        display: flex; align-items: center; gap: 8px;
        padding: 5px 6px; border-radius: 8px; cursor: pointer;
        transition: background 0.15s;
    }
    .dental-al-thumb:hover { background: rgba(255,255,255,0.08); }
    .dental-al-thumb.al-new {
        animation: alNewGlow 1.2s ease-out;
    }
    @keyframes alNewGlow {
        0% { background: rgba(74,222,128,0.25); box-shadow: 0 0 8px rgba(74,222,128,0.3); }
        100% { background: transparent; box-shadow: none; }
    }
    .dental-al-thumb-img {
        width: 48px; height: 36px; border-radius: 5px;
        object-fit: cover; background: rgba(255,255,255,0.05);
        flex-shrink: 0;
    }
    .dental-al-thumb-placeholder {
        width: 48px; height: 36px; border-radius: 5px;
        background: rgba(255,255,255,0.06);
        display: flex; align-items: center; justify-content: center;
        color: rgba(255,255,255,0.3); font-size: 14px; flex-shrink: 0;
    }
    .dental-al-thumb-info { flex: 1; min-width: 0; }
    .dental-al-thumb-title {
        font-size: 10px; color: rgba(255,255,255,0.95); font-weight: 500;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dental-al-thumb-type {
        font-size: 9px; color: rgba(255,255,255,0.65); margin-top: 1px;
    }
    .dental-al-empty {
        padding: 16px 8px; text-align: center;
        font-size: 10px; color: rgba(255,255,255,0.25);
    }

    /* ── 풀아치 고정 핀 카드 (항상 최상단) ── */
    .dental-fullarch-pin-card {
        position: fixed;
        z-index: 10001;
        width: 195px;
        background: rgba(250,250,252,0.96);
        /* backdrop-filter 제거 */
        border-radius: 14px;
        border: 1px solid rgba(52,120,230,0.18);
        box-shadow: 0 6px 22px rgba(0,0,0,0.14);
        overflow: hidden;
        opacity: 0;
        transform: translateX(-8px) scale(0.97);
        transition: opacity 0.22s ease, transform 0.22s ease;
        pointer-events: none;
        left: 12px;
        top: 80px;
    }
    .dental-fullarch-pin-card.show {
        opacity: 1;
        transform: translateX(0) scale(1);
        pointer-events: auto;
    }
    .dental-fullarch-pin-card.fc-dragging {
        transition: none;
        box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(52,120,230,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .dental-fullarch-pin-card .dental-float-card-header {
        background: linear-gradient(135deg, rgba(30,70,150,0.65), rgba(40,50,120,0.55));
    }
    .dental-fullarch-pin-card .dental-float-card-body {
        padding: 4px;
        max-height: 200px;
        overflow-y: auto;
    }
    .dental-fullarch-pin-card .dental-float-card-body::-webkit-scrollbar { width: 3px; }
    .dental-fullarch-pin-card .dental-float-card-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
    .dental-fullarch-pin-card .dental-float-card-item {
        display: flex; align-items: center; gap: 7px;
        padding: 5px 7px; border-radius: 8px; cursor: pointer;
        transition: background 0.12s; font-size: 11px;
    }
    .dental-fullarch-pin-card .dental-float-card-item:hover { background: rgba(52,120,235,0.12); }
    .dental-fullarch-pin-card .fc-pin-badge {
        font-size: 8px; color: rgba(52,120,230,0.8); margin-left: auto;
        background: rgba(52,120,230,0.08); padding: 1px 5px; border-radius: 6px;
    }

    @media (max-width: 768px) {
        .dental-teeth-section { display: block; }
    }

    /* === 갤러리 모달 — backdrop-filter + 무거운 그림자 제거 (GPU 부하 → 영상 끊김 원인) === */
    .dental-gallery-modal {
        background: #1a1d28 !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: 18px !important;
    }
    .dental-gallery-modal-body {
        background: transparent !important;
    }
    .dental-gallery-modal-header {
        background: rgba(0,0,0,0.35) !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;
        padding: 12px 16px !important;
    }
    .dental-gallery-modal-overlay {
        background: rgba(0,0,0,0.66) !important;
    }
    /* 갤러리 내부 타이틀/라벨 밝게 */
    .dental-gallery-modal .dental-gallery-item-title {
        color: #e8ecf2 !important;
        background: transparent !important;
        border-bottom: none !important;
    }
    /* 영상/이미지 아이템 흰 테두리 제거 */
    .dental-gallery-modal .dental-gallery-item {
        border: none !important;
        background: transparent !important;
    }
    /* 이전/다음 버튼 (legacy — 현재는 사용 안 함, backdrop-filter 제거) */
    .dental-gallery-modal button[data-gallery-prev],
    .dental-gallery-modal button[data-gallery-next] {
        background: rgba(255,255,255,0.18) !important;
        border: 1px solid rgba(255,255,255,0.22) !important;
        color: #fff !important;
        transition: background .15s ease, border-color .15s ease !important;
    }
    .dental-gallery-modal button[data-gallery-prev]:hover:not([disabled]),
    .dental-gallery-modal button[data-gallery-next]:hover:not([disabled]) {
        background: rgba(255,255,255,0.22) !important;
        border-color: rgba(255,255,255,0.35) !important;
    }
    .dental-gallery-modal button[data-gallery-prev][disabled],
    .dental-gallery-modal button[data-gallery-next][disabled] {
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: rgba(255,255,255,0.35) !important;
        cursor: default !important;
    }

    .dental-base-image {
        width: 100%;
        display: block;
    }

    .dental-overlay-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .dental-overlay-image {
        position: absolute;
        opacity: 0;
        transition: opacity 0.15s;
        object-fit: fill;
        /* will-change 제거 — 168개 컴포지터 레이어 생성으로 GPU/메모리 부담 + 스크롤 잭 유발 */
        /* 빈 img 요소가 브라우저 기본 테두리/아이콘을 그리지 않도록 */
        border: 0;
        outline: 0;
        background: transparent;
    }
/* src 가 없거나 빈 img 는 아예 그리지 않음 (테두리/박스 노출 방지) */
    img.dental-overlay-image:not([src]),
    img.dental-overlay-image[src=""] {
        display: none !important;
    }
    /* visible 클래스가 없는 동안에도 시각적 흔적이 남지 않도록 강제로 투명 */
    img.dental-overlay-image:not(.visible) {
        opacity: 0 !important;
    }
    .no-transition .dental-overlay-image,
    .no-transition .dental-box-overlay {
        transition: none !important;
    }

    .dental-overlay-image.visible {
        opacity: 1;
    }

    .dental-box-overlay {
        position: absolute;
        display: none;
        /* 골이식/상악동 박스 — 임플란트(z-index:3) 뒤로 (투명 PNG 기준)
           틴트가 임플란트 주변 빈 공간을 채우고 임플란트 본체는 깨끗하게 위에 표시됨 */
        z-index: 2;
        pointer-events: none;
    }
    .dental-box-overlay.visible {
        display: block;
    }

    /* ★2026-07-29: 클릭 레이어(#dentalClickableAreas, z:10 전체 덮개)를 투과로 — 클릭 div 바깥의 클릭이
       아래 임플란트 이미지(screw 등)로 전달되게. div 만 클릭을 받는다. CSS 로 확실히 박아 인라인 JS 누락 방지. */
    #dentalClickableAreas { pointer-events: none !important; }
    #dentalClickableAreas .dental-tooth-clickable-area { pointer-events: auto !important; }
    .dental-tooth-clickable-area {
        position: absolute;
        cursor: pointer;
        z-index: 10;
        border-radius: 4px;
    }

    .dental-tooth-hover-highlight {
        position: absolute;
        background-color: rgba(52, 171, 235, 0.12);
        border-radius: 8px;
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;
        z-index: 7;
        /* will-change 제거 — 28개 추가 컴포지터 레이어 GPU 부담 */
    }

    .dental-tooth-number-label {
        position: absolute;
        color: white;
        background-color: rgba(52, 171, 235, 0.95);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        pointer-events: none;
        z-index: 21;
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
        transition: opacity 0.12s ease;
        will-change: opacity;
        white-space: nowrap;
    }
    .dental-tooth-number-label.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .dental-tooth-number-label.has-brand.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        background-color: rgba(52, 171, 235, 0.95);
        font-size: 13px;
        padding: 4px 8px;
    }
    .dental-tooth-number-label .brand-suffix {
        font-weight: 700;
        font-size: 12px;
        margin-left: 3px;
    }
    .dental-tooth-number-label.show .brand-suffix {
        font-size: 13px;
    }

    /* 임플란트 치아 호버 드롭다운 탭 */
    .dental-tooth-hover-dropdown {
        position: absolute;
        z-index: 30;
        /* ★ 2026-07-29(2차): 검정 글래스(고급 다크) — backdrop-filter 는 성능상 금지라 쓰지 않고,
           어두운 반투명 그라데이션 + 깊은 그림자 + 은은한 상단 하이라이트로 표현. 글자는 밝게. */
        background: linear-gradient(180deg, rgba(28,28,34,0.90) 0%, rgba(16,16,20,0.88) 100%);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        box-shadow: 0 16px 42px rgba(0,0,0,0.50), 0 3px 12px rgba(0,0,0,0.32),
                    inset 0 1px 0 rgba(255,255,255,0.08);
        min-width: 180px;
        max-width: 240px;
        display: none;
        overflow: hidden;
        animation: dentalDropFadeIn 0.15s ease;
        pointer-events: auto;
    }
    .dental-tooth-hover-dropdown.show {
        display: block;
    }
    @keyframes dentalDropFadeIn {
        from { opacity: 0; transform: translateY(2px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .dental-tooth-hover-dropdown .drop-item {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px;
        cursor: pointer;
        transition: background 0.1s;
        font-size: 12px;
        color: #333;
        border-bottom: 1px solid #f2f2f2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dental-tooth-hover-dropdown .drop-item:last-child {
        border-bottom: none;
    }
    .dental-tooth-hover-dropdown .drop-item:hover {
        background: #f0f8ff;
    }
    .dental-tooth-hover-dropdown .drop-item .drop-icon {
        flex-shrink: 0;
        font-size: 11px;
        color: #34abeb;
    }
    .dental-tooth-hover-dropdown .drop-item .drop-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    .dental-tooth-hover-dropdown .drop-item .drop-badge {
        flex-shrink: 0;
        font-size: 9px;
        padding: 1px 5px;
        border-radius: 3px;
        font-weight: 600;
        background: #fef3e0;
        color: #e67e22;
    }
    .dental-tooth-hover-dropdown .drop-item .drop-badge.img {
        background: #e8f5e9;
        color: #43a047;
    }

    .dental-action-buttons {
        padding: 0;
        background: white;
    }

    .dental-top-buttons-section {
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .dental-top-buttons-left {
        flex: 1;
    }

    .dental-top-buttons-right {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
    }

    .dental-top-buttons-row {
        display: flex;
        gap: 8px;
    }

    .dental-bottom-buttons-section {
        /* ★좌우 여백도 vw 였다 → 뷰포트가 15px 변하면 시작점이 0.19px 움직인다.
           눈에 안 보이는 양이지만 '절대 안 움직임'을 목표로 했으므로 고정한다. */
        padding: 15px 16px;
        border-bottom: 1px solid #e0e0e0;
        /* ★ 2026-07-28 → 07-29 재정정: 3열 그리드(1fr auto 1fr)로 정확히 가운데를 맞췄더니,
           **양쪽 1fr 이 같은 폭을 예약**하느라 버튼 자리가 줄어 뒤쪽 버튼(즐겨찾기·그리기)이
           밀려나고 오른쪽 브랜드 배지가 앞 버튼 위로 겹쳤다.
           가운데 0px 을 얻는 대신 버튼이 사라지면 손해다 → flex 로 되돌리고,
           버튼 칸 안에서만 가운데 정렬한다(아래 safe center). 완전한 중앙은 아니지만
           모든 버튼이 보이고 겹치지 않는다. */
        display: flex;
        justify-content: space-between;
        /* ★ 2026-07-29: 버튼이 2줄로 늘면 오른쪽 브랜드 버튼(임플란트 선택)이 세로 가운데에
           어중간하게 떠 보였다(center) → flex-start 로 상단 줄에 맞춘다. 1줄일 땐 차이 없음. */
        align-items: flex-start;
        gap: 14px;   /* ★좌·우 그룹 사이 간격도 고정 */
        flex-wrap: nowrap;
    }

    .dental-bottom-buttons-left {
        display: flex;
        gap: 3px;   /* ★2026-07-29 vw 제거 — 뷰포트가 바뀌어도 간격이 흔들리지 않게 */
        /* ★★ 2026-07-29: nowrap + overflow:hidden 이라 자리가 모자라면 마지막 버튼이
           **반쯤 잘린 흰 박스**로 남아 옆 버튼을 가린 것처럼 보였다.
           (버튼 글자를 눌러 줄이던 것을 막은 뒤로는 넘침이 잘림으로 드러났다.)
           → 자르지 말고 줄을 바꾼다. 버튼이 온전히 다 보이는 쪽이 낫다. */
        flex-wrap: wrap;
        row-gap: 6px;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        overflow: visible;
        /* ★ 2026-07-28: 이 칸은 flex:1 로 남는 폭을 다 차지하는데 버튼은 왼쪽에 몰려 있어,
           모식도 기준으로 **한참 왼쪽으로 치우쳐** 보였다(실측: 1512px 화면에서 중심이 324px 왼쪽).
           ★safe center — 버튼이 칸보다 넓어지면 가운데 정렬은 **양끝을 잘라내** 앞쪽 버튼
           (치아 삭제·임플란트)까지 사라진다. safe 를 붙이면 넘칠 때만 왼쪽부터 보여 준다.
           미지원 브라우저는 이 줄이 무시돼 기존(왼쪽 정렬) 동작으로 남는다 — 안전한 실패. */
        /* ★★ 2026-07-29 최종: 가운데 정렬을 버리고 **왼쪽 고정**으로 간다(사용자 선택).
           가운데는 '칸 기준' 위치라 칸 폭이 1px만 변해도 절반만큼 따라 움직인다.
           모달을 열고 닫을 때 스크롤바가 생겼다 사라지면(15px) 버튼이 7px씩 밀렸다.
           왼쪽 고정은 칸 폭과 무관하게 시작점이 같아 **절대 움직이지 않는다**.
           치우쳐 보이는 것보다 안 움직이는 쪽이 낫다는 판단. */
        justify-content: flex-start;
    }
    /* ★★ 2026-07-29: 버튼이 flex 항목이라 기본 flex-shrink:1 로 **자기 글자보다 좁게 눌렸다**
       (실측: '프리미엄 임플란트' 가 94px 필요한데 92px 만 받아 글자가 잘림 → 제목이
       버튼 안에서 가운데를 벗어난 것처럼 보였다). 특히 PREMIUM 배지가 나타나 오른쪽 칸이
       넓어지는 순간 왼쪽 칸이 좁아지면서 이 현상이 생겼다.
       → 버튼은 줄이지 않는다. 자리가 모자라면 칸의 overflow:hidden 이 **버튼 단위로** 자른다
       (글자가 반쯤 잘린 버튼보다 낫다). */
    .dental-bottom-buttons-left > *,
    .dental-bottom-buttons-right > * {
        flex: 0 0 auto;
    }
    .dental-bottom-buttons-right {
        display: flex;
        gap: clamp(2px, 0.3vw, 6px);
        flex-wrap: nowrap;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
    }
    .dental-btn-separator {
        width: 1px;
        height: 28px;
        background: #d0d0d0;
        margin: 0 4px;
        flex-shrink: 0;
    }
    /* 치료 버튼 위 호버 드롭다운 - 기존 치아 드롭다운과 동일 스타일 */
    .dental-treatment-hover-dropdown {
        /* fixed + body 직속 portal 로 stacking context 완전 회피 — 환자 바(2001) 위에 확실히 표시 */
        position: fixed !important;
        z-index: 99999 !important;
        /* ★ 2026-07-29(2차): 검정 글래스(고급 다크) — backdrop-filter 는 성능상 금지라 쓰지 않고,
           어두운 반투명 그라데이션 + 깊은 그림자 + 은은한 상단 하이라이트로 표현. 글자는 밝게. */
        background: linear-gradient(180deg, rgba(28,28,34,0.90) 0%, rgba(16,16,20,0.88) 100%);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        box-shadow: 0 16px 42px rgba(0,0,0,0.50), 0 3px 12px rgba(0,0,0,0.32),
                    inset 0 1px 0 rgba(255,255,255,0.08);
        min-width: 180px;
        max-width: 240px;
        display: none;
        overflow: hidden;
        animation: dentalDropFadeIn 0.15s ease;
        pointer-events: auto;
    }
    .dental-treatment-hover-dropdown.show {
        display: block;
    }
    .dental-treatment-hover-dropdown .drop-item {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 12px;
        cursor: pointer;
        transition: background 0.1s;
        font-size: 12px;
        color: #e5e7eb; /* ★ 다크 글래스: 밝은 글자 */
        border-bottom: 1px solid rgba(255,255,255,0.07);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dental-treatment-hover-dropdown .drop-item:last-child {
        border-bottom: none;
    }
    .dental-treatment-hover-dropdown .drop-item:hover {
        background: rgba(255,255,255,0.13); /* ★ 마우스오버 표시가 다크 배경에서 보이게 */
    }
    .dental-treatment-hover-dropdown .drop-item .drop-icon {
        flex-shrink: 0;
        font-size: 11px;
        color: #34abeb;
    }
    .dental-treatment-hover-dropdown .drop-item .drop-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    /* ★ 2026-07-29(3차): 색 배지가 너무 눈에 띈다는 피드백 → 무채색 회색톤.
       구분은 미세한 밝기 차이만(영상=살짝 밝음, 이미지=살짝 어두움). 잘 안 보여도 됨. */
    .dental-treatment-hover-dropdown .drop-item .drop-badge {
        flex-shrink: 0;
        font-size: 9px;
        padding: 1px 6px;
        border-radius: 999px;
        font-weight: 600;
        background: rgba(255,255,255,0.08);
        color: #9ca3af;
        border: 1px solid rgba(255,255,255,0.10);
    }
    .dental-treatment-hover-dropdown .drop-item .drop-badge.img {
        background: rgba(255,255,255,0.05);
        color: #6b7280;
        border: 1px solid rgba(255,255,255,0.08);
    }
    .dental-treatment-hover-dropdown .drop-item .drop-count {
        color: #999;
        font-size: 10px;
        font-weight: 400;
    }
    /* ★ 2026-07-29: 호버 드롭다운 썸네일 — 시술 후 치료 드롭다운과 같은 콤팩트 크기(33x25) */
    .dental-treatment-hover-dropdown .drop-item .media-thumb {
        width: 33px;
        height: 25px;
        border-radius: 4px;
    }
    /* ★ 2026-07-29: 검정 글래스에 맞춰 — 밝은 회색 헤더 바 제거, 투명 배경 + 은은한 회색 글자 */
    .dental-treatment-hover-dropdown .drop-section-header {
        padding: 5px 12px 3px;
        font-size: 10px;
        font-weight: 700;
        color: rgba(255,255,255,0.45);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: transparent;
    }
    .dental-treatment-hover-dropdown .drop-section-header:not(:first-child) {
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .dental-bottom-buttons-right {
        display: flex;
        gap: clamp(4px, 0.6vw, 8px);
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .dental-active-tool {
        font-size: 14px;
        font-weight: 500;
        color: #666;
    }

    .dental-active-tool-label {
        font-size: 11px;
        color: #999;
        margin-right: 5px;
    }

    .dental-active-tool-name {
        font-weight: 600;
        color: #333;
    }

    .dental-action-btn {
        /* ★★ 2026-07-29: 크기가 vw(창 기준)인데 버튼이 놓일 자리는 **컨테이너 기준**이다.
           창은 넓고 위젯 컨테이너는 좁은 환경(아임웹 임베드)에서 버튼만 커져 자리를 넘겼다.
           실측: 창 2016px·컨테이너 1200px 에서 버튼 합계 1090px vs 자리 1031px → 59px 초과로 줄바꿈.
           → 상한을 낮춰 넓은 창에서 과하게 커지지 않게 한다(하한은 그대로 — 좁은 화면 영향 없음). */
        /* ★★ 2026-07-29: 크기를 vw(뷰포트)로 두면 **스크롤바가 생기고 사라질 때마다**
           버튼이 미세하게 커졌다 작아진다(실측: 뷰포트 15px 차이에 버튼합 890→884px).
           모달을 여는 순간 그 일이 나서 "버튼이 밀린다"로 보였다.
           줄바꿈을 허용한 뒤로는 좁을 때 줄여야 할 이유도 없다 → 고정 px. */
        /* ★ 2026-07-29: 8px 는 2줄로 넘쳐 6px 로 되돌림(1줄 우선). 버튼 16개라 여유가 빠듯하다. */
        padding: 5px 6px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size: 11px;
        font-weight: 500;
        color: #333;
        transition: all 0.2s;
        white-space: nowrap;
        /* ★★ 2026-07-29: `flex: 0 1 auto; min-width: 0` 이라 버튼이 **자기 글자보다 좁게 눌렸다**.
           white-space:nowrap 이라 줄바꿈도 못 해 글자가 잘리고, 그래서 제목이 버튼 안에서
           가운데를 벗어난 것처럼 보였다(실측: '프리미엄 임플란트' 94px 필요 / 92px 배정).
           PREMIUM 배지가 나타나 오른쪽 칸이 넓어지는 순간 특히 심해졌다.
           → 글자 폭 아래로는 줄이지 않는다. 자리가 모자라면 칸의 overflow 가 **버튼 단위로**
           자른다 — 글자가 반쯤 잘린 버튼보다 온전한 버튼 몇 개가 낫다. */
        flex: 0 0 auto;
        min-width: auto;
    }

    .dental-action-btn:hover {
        background: #f8f8f8;
        border-color: #34abeb;
        box-shadow: 0 0 0 1px rgba(52, 171, 235, 0.2);
    }

    .dental-action-btn.active {
        background: #34abeb;
        color: white !important;
        border-color: #34abeb;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.3);
    }
    /* active 시 자식의 색상 강제 — 높은 specificity 로 imweb override 방지 */
    body .dental-action-btn.active,
    body .dental-action-btn.active *,
    html body .dental-action-btn.active,
    html body .dental-action-btn.active * {
        color: white !important;
        -webkit-text-fill-color: white !important;
        text-indent: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .dental-fullarch-implant-btn {
        padding: clamp(3px, 0.55vw, 8px) clamp(4px, 0.7vw, 10px) !important;
        font-size: clamp(8px, 0.7vw, 11px) !important;
        background: #f0f7ff !important;
        color: #2980b9 !important;
        border-color: #b3d9f7 !important;
    }
    .dental-fullarch-implant-btn:hover {
        background: #d6ecff !important;
        border-color: #34abeb !important;
    }

    .dental-top-btn {
        padding: 6px 12px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        color: #666;
        transition: all 0.2s;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .dental-top-btn svg {
        flex-shrink: 0;
    }

    .dental-top-btn:hover {
        background: #f8f8f8;
        border-color: #34abeb;
        box-shadow: 0 0 0 1px rgba(52, 171, 235, 0.2);
    }

    .dental-top-btn:active {
        background: #e8e8e8;
        border-color: #34abeb;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.3);
    }

    .dental-top-btn.active {
        border-color: #34abeb;
        color: white;
        font-weight: 600;
        background: #34abeb;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.3);
    }

    .dental-top-btn[aria-label="설정"] {
        border: none;
        background: transparent;
        padding: 4px;
    }

    .dental-top-btn[aria-label="설정"]:hover {
        background: rgba(52, 171, 235, 0.1);
        border: none;
        box-shadow: none;
    }

    .dental-top-btn[aria-label="설정"]:active {
        background: rgba(52, 171, 235, 0.2);
        border: none;
        box-shadow: none;
    }

    .dental-secondary-btn {
        padding: clamp(3px, 0.55vw, 8px) clamp(5px, 0.85vw, 16px);
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: white;
        cursor: pointer;
        font-size: clamp(9px, 0.8vw, 13px);
        font-weight: 500;
        color: #666;
        transition: all 0.2s;
        white-space: nowrap;
        flex: 0 0 auto;
        min-width: auto;
    }

    .dental-secondary-btn:hover {
        background: #f8f8f8;
        border-color: #34abeb;
        box-shadow: 0 0 0 1px rgba(52, 171, 235, 0.2);
    }

    /* ★2026-09-19 원장 "마우스오버하면 라인이 생기는데 버튼 박스에 파랑색이 들어오게. 그줄 전체 버튼에 적용"
       종전 hover 는 거의 흰 배경(#f8f8f8)에 얇은 선뿐이라 '선만 생긴다' 로 보였다.
       이 줄(비용안내·치료비 견적·MY임플란트·X-ray·초기화·설정)은 상자 자체에 파란색이 들어온다.
       색은 이 콘솔의 파랑(#34abeb) 계열 한 벌로 맞춘다. 규칙은 이 한 곳뿐이다. */
    /* ★2026-09-19(2차) 원장이 보여 준 화면에서 색을 직접 뽑았다 — 채움 #3363e4, 둘레 연한 테 #d5dff8.
       마우스를 올리면 그 버튼이 '선택된 것처럼' 파랗게 채워지고 글자·아이콘은 흰색이 된다. */
    .dental-top-buttons-row .dental-secondary-btn:hover,
    .dental-top-buttons-row .dental-top-btn:hover {
        background: #3363e4;
        border-color: #3363e4;
        color: #ffffff;
        box-shadow: 0 0 0 4px #d5dff8;
    }

    /* 설정(톱니) 버튼은 글자가 아니라 그림이다 — 파란 바탕에서 보이도록 흰색으로 바꾼다 */
    .dental-top-buttons-row .dental-top-btn:hover img {
        filter: brightness(0) invert(1);
    }

    /* ★2026-09-19 원장 "병원설정은 마우스오버해도 반응이 없어, 동일하게" —
       위 환자 바(#dentalPatientBar)의 단추들은 태그에 스타일이 직접 박혀 있어 보통 규칙으로는 못 덮는다.
       그 줄도 아래 줄과 같은 파란 상자로 맞춘다(그림·아이콘은 흰색으로).
       maim-widget.html 은 손으로 붙여 넣는 파일이라 고칠 수 없다 — 그래서 여기(배포되는 CSS)에서 덮는다. */
    #dentalPatientBar button:hover:not(:disabled) {
        background: #3363e4 !important;
        border-color: #3363e4 !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 4px #d5dff8 !important;
    }

    #dentalPatientBar button:hover svg { stroke: #ffffff !important; }
    #dentalPatientBar button:hover img { filter: brightness(0) invert(1) !important; }

    /* ★2026-09-19 원장 "병원설정 풍선말 배경도 동일하게 파랑색으로" —
       그 풍선말은 태그의 title 이 띄우던 것이라 색을 바꿀 수 없었다(브라우저·테마가 그린다).
       maim.js 가 title 을 data-tip 으로 옮겨 그것을 끄고, 여기서 같은 파랑으로 그린다.
       이미 제 풍선말이 있는 단추(화면 맞추기)는 아래에서 색만 맞춘다 — 두 개가 뜨지 않게. */
    #dentalPatientBar button[data-tip] { position: relative; }

    #dentalPatientBar button[data-tip]:hover::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: #3363e4;
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
        z-index: 2147483000;
        pointer-events: none;
    }

    #dentalPatientBar button[data-tip]:hover::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 4px);
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        background: #3363e4;
        z-index: 2147483000;
        pointer-events: none;
    }

    /* ★2026-09-19 원장 "병원설정은 마우스오버해도 반응이 없어, 동일하게" —
       그 단추는 환자 줄(#dentalPatientBar)이 아니라 위쪽 도구줄에 있어서 위 규칙이 닿지 않았다.
       게다가 흰 배경이 태그 안에 직접 적혀 있어(style="background:#fff") 보통 규칙으로는 못 이긴다 — !important 가 필요하다.
       같은 줄의 세 단추(상담내역·전송내역·병원설정)에 같은 반응을 준다. */
    #dentalConsultBoardBtn:hover,
    #dentalShareBoardBtn:hover,
    #dentalClinicSettingsBtn:hover {
        background: #3363e4 !important;
        border-color: #3363e4 !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 4px #d5dff8 !important;
    }
    #dentalClinicSettingsBtn:hover svg { stroke: #ffffff !important; }

    /* 이미 붙어 있는 풍선말(화면 맞추기·갤러리 화면 맞추기)도 같은 파랑으로 */
    #dentalPatientBar [role="tooltip"] { background: #3363e4 !important; color: #ffffff !important; }
    #dentalPatientBar [role="tooltip"] > span { background: #3363e4 !important; }

    .dental-secondary-btn:active {
        background: #e8e8e8;
        border-color: #34abeb;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.3);
    }

    .dental-context-menu {
        position: fixed;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 10000;
        min-width: 220px;
        max-width: 300px;
        max-height: 70vh;
        overflow-y: auto;
        display: none;
    }

    .dental-context-menu.show {
        display: block;
    }

    .dental-context-menu-header {
        padding: 10px 16px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 13px;
        font-weight: 600;
        color: #34abeb;
    }

    .dental-context-menu-item {
        padding: 10px 16px;
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .dental-context-menu-item:hover {
        background: #f5f5f5;
    }

    .dental-context-menu-item.selected {
        background: #e8f5fd;
        color: #34abeb;
        font-weight: 600;
    }

    .dental-context-menu-separator {
        height: 1px;
        background: #e0e0e0;
        margin: 4px 0;
    }

    .dental-brand-badge {
        display: inline-block;
        padding: 2px 8px;
        background: #34abeb;
        color: white;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        margin-left: 4px;
    }

    .dental-selected-info {
        padding: 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
        display: none;
    }

    .dental-selected-info.show {
        display: block;
    }

    .dental-selected-info h3 {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 0 0 12px 0;
    }

    .dental-teeth-status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }

    .dental-tooth-status-item {
        padding: 10px;
        background-color: white;
        border-radius: 6px;
        border-left: 3px solid #ddd;
        font-size: 13px;
    }

    .dental-tooth-status-item.missing {
        border-left-color: #e74c3c;
    }

    .dental-tooth-status-item.implant {
        border-left-color: #34abeb;
    }

    .dental-tooth-status-item.pontic {
        border-left-color: #9b59b6;
    }

    .dental-bottom-tabs {
        display: flex;
        justify-content: space-around;
        padding: 12px 0;
        background: white;
        border-top: 1px solid #e0e0e0;
        position: sticky;
        bottom: 0;
    }

    .dental-tab-item {
        flex: 1;
        text-align: center;
        padding: 8px;
        color: #999;
        font-size: 12px;
        cursor: pointer;
        border: none;
        background: none;
        transition: color 0.2s;
    }

    .dental-tab-item.active {
        color: #34abeb;
        font-weight: 600;
    }

    .dental-tab-item:hover {
        color: #666;
    }

    /* ===== 모달 오버레이 ===== */
    .dental-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);
        /* backdrop-filter 제거 — 실시간 블러는 GPU 부하가 커서 모달 오픈 버벅임의 주원인.
           배경을 약간 더 어둡게 처리하여 시각적 구분은 유지. */
        z-index: 1000;

        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
        will-change: opacity;
    }

    .dental-modal-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* ===== 모달 본체 (고급 스타일 + 드래그 지원) ===== */
    .dental-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.97);

        background: #fff;
        width: 95%;
        max-width: 1200px;
        max-height: 95vh;
        overflow-y: auto;

        /* 3겹 쉐도우 → 단일 쉐도우로 단순화 (리페인트 비용 대폭 감소) */
        box-shadow: 0 12px 40px rgba(0,0,0,0.22);
        border-radius: 16px;
        transition: transform 0.18s cubic-bezier(.4,0,.2,1);
        z-index: 1001;
        will-change: transform;
        contain: layout style;
    }

    .dental-modal-overlay.show .dental-modal {
        transform: translate(-50%, -50%) scale(1);
    }

    /* 오픈 완료 후 will-change 해제 (Chrome이 레이어 유지 비용을 계속 지불하지 않도록) */
    .dental-modal-overlay:not(.show) {
        will-change: auto;
    }

    /* ===== 견적서 모달 전용: 환자 바(sticky) 밑으로 위치 ===== */
    /* 닫을 때 페이드 없이 즉시 사라지도록 — 오버레이 opacity transition 도 제거 */
    #dentalEstimateModal { transition: none !important; }
    #dentalEstimateModal .dental-modal {
        /* 환자 바(약 56px) 아래 */
        top: 72px;
        max-height: calc(100vh - 92px);
        transform: translate(-50%, 0);
        transition: none;
    }
    #dentalEstimateModal.show .dental-modal {
        transform: translate(-50%, 0);
    }
    /* 견적서 모달이 열릴 때 환자 바를 완전히 숨긴다
       (환자 이름은 견적서 상단 박스 안에 직접 표시되므로 바깥의 sticky 바는 불필요)
       :has() 미지원 브라우저를 위해 body.dental-estimate-open 클래스도 함께 사용 */
    body:has(#dentalEstimateModal.show) #dentalPatientBar,
    body.dental-estimate-open #dentalPatientBar { display: none !important; }

    /* ===== 치료계획 설정(브랜드) 모달 — 환자 바를 숨기면 레이아웃이 튀므로
       숨기지 않고, 모달 오버레이/본체 z-index 를 환자 바(fixed: 99999) 보다 위로 올려
       그대로 덮는 방식으로 처리한다. */
    #dentalBrandModal { z-index: 100000 !important; transition: none !important; }
    #dentalBrandModal .dental-modal { z-index: 100001 !important; transition: none !important; }
    /* 상담내역/전송내역/링크설정/병원설정 모달 — 인라인 z-index 가 환자 바(fixed:99999) 보다 낮아 가려지므로
       CSS 로 강제로 끌어올림 (maim-widget.html 은 imweb 호스팅이라 인라인 수정이 배포 안 됨) */
    #dentalShareBoardModal,
    #dentalConsultBoardModal,
    #dentalShareConfigModal,
    #dentalClinicSettingsModal { z-index: 100000 !important; }
    /* 견적서 모달은 환자 바가 없으니 상단 여백 축소 */
    body:has(#dentalEstimateModal.show) #dentalEstimateModal .dental-modal,
    body.dental-estimate-open #dentalEstimateModal .dental-modal {
        top: 16px !important;
        max-height: calc(100vh - 32px) !important;
    }

    /* 드래그 중일 때 transform 제거 */
    .dental-modal.dragging {
        transition: none;
    }

    /* ===== 모달 헤더 (드래그 핸들 걸 수 있음) ===== */
    .dental-modal-header {
        padding: 18px 20px;
        border-bottom: 1px solid #e8ecf1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: grab;
        user-select: none;

        position: sticky;
        top: 0;
        background: linear-gradient(135deg, #fafbfd 0%, #f0f2f6 100%);
        z-index: 10;
        border-radius: 16px 16px 0 0;
    }
    .dental-modal-header:active {
        cursor: grabbing;
    }

    .dental-modal-header h2 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    /* ===== 닫기 버튼 ===== */
    .dental-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #999;
        cursor: pointer;

        width: 32px;
        height: 32px;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .dental-modal-close:hover {
        background: #f0f0f0;
        color: #333;
    }

    /* ===== 모달 바디 ===== */
    .dental-modal-body {
        padding: 20px;
        /* 내부 레이아웃을 격리 → 바깥 문서 리플로우 유발 방지 */
        contain: layout style;
    }


    .dental-brand-add-section {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        border: 1px solid #34abeb;
    }

    .dental-brand-add-section h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 15px 0;
        color: #333;
        text-align: center;
    }

    .dental-brand-add-form {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .dental-brand-add-form input {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        width: 250px;
        min-width: 200px;
    }

    .dental-brand-add-form input:focus {
        outline: none;
        border-color: #34abeb;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.1);
    }

    .dental-brand-add-btn {
        padding: 10px 30px;
        background: #34abeb;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        transition: all 0.2s;
    }

    .dental-brand-add-btn:hover {
        background: #2c8fc7;
        box-shadow: 0 2px 8px rgba(52, 171, 235, 0.3);
    }

    .dental-settings-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .dental-settings-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .dental-brand-inline {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dental-brand-inline input {
        height: 34px;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 13px;
        width: 180px;
    }

    .dental-brand-inline input:focus {
        outline: none;
        border-color: #34abeb;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.15);
    }

    .dental-brand-inline button {
        height: 34px;
        padding: 0 14px;
        background: #34abeb;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

    .dental-brand-inline button:hover {
        background: #2c8fc7;
    }

    /* 브랜드 관리 섹션 */
    .dental-brand-management-section {
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 30px;
        border: 1px solid;
    }

    /* 브랜드 리스트 아이템 */
    .dental-brand-list-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        background: white;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        margin-bottom: 6px;
        gap: 8px;
        transition: all 0.2s;
    }
    .dental-brand-list-item:hover {
        box-shadow: 0 2px 8px rgba(52, 171, 235, 0.15);
    }
    .dental-brand-list-item .dental-brand-name {
        flex: 1 1 0;
        font-size: 14px;
        font-weight: 500;
        color: #333 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 80px;
    }

    /* .dental-brand-list-item.editing {
       border: 1px solid #ddd;
  } */

    .dental-brand-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        flex: 1;
    }

    .dental-brand-name-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ffffff;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        margin-right: 10px;
    }

    .dental-brand-name-input:focus {
        outline: none;
    }

    .dental-brand-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    /* 브랜드 활성화 토글 스위치 — imweb 의 form 리셋이 덮어쓰지 못하게 specificity + !important 강제 */
    body .dental-brand-list-item label.dental-brand-toggle,
    body label.dental-brand-toggle {
        position: relative !important;
        display: inline-block !important;
        flex: none !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 22px !important;
        cursor: pointer !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    /* 네이티브 체크박스 완전 제거 — imweb 가 어떤 강제 스타일을 줘도 무력화 */
    body .dental-brand-toggle input,
    body .dental-brand-toggle input[type="checkbox"],
    body label.dental-brand-toggle input[type="checkbox"] {
        opacity: 0 !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        visibility: visible !important;
        display: block !important;
    }
    body .dental-brand-toggle .dental-brand-toggle-slider,
    body label.dental-brand-toggle span.dental-brand-toggle-slider {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: #cbd5e1 !important;
        border: 0 !important;
        border-radius: 22px !important;
        transition: background 0.2s !important;
        display: block !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    body .dental-brand-toggle .dental-brand-toggle-slider:before,
    body label.dental-brand-toggle span.dental-brand-toggle-slider:before {
        content: '' !important;
        position: absolute !important;
        width: 16px !important;
        height: 16px !important;
        left: 3px !important;
        top: 3px !important;
        background: #fff !important;
        border-radius: 50% !important;
        transition: transform 0.2s !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
        display: block !important;
    }
    body .dental-brand-toggle input:checked ~ .dental-brand-toggle-slider,
    body .dental-brand-toggle input[type="checkbox"]:checked + span.dental-brand-toggle-slider,
    body label.dental-brand-toggle input:checked + span.dental-brand-toggle-slider {
        background: #34abeb !important;
    }
    body .dental-brand-toggle input:checked ~ .dental-brand-toggle-slider:before,
    body .dental-brand-toggle input[type="checkbox"]:checked + span.dental-brand-toggle-slider:before,
    body label.dental-brand-toggle input:checked + span.dental-brand-toggle-slider:before {
        transform: translateX(16px) !important;
    }


    .dental-brand-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .dental-brand-btn-edit {
        background: #34abeb;
        color: white;
    }

    .dental-brand-btn-edit:hover {
        background: #2c8fc7;
    }

    .dental-brand-btn-delete {
        background: #e74c3c;
        color: white;
    }

    .dental-brand-btn-delete:hover {
        background: #c0392b;
    }

    .dental-brand-btn-save {
        background: #2D8FC7;
        color: white;
    }

    .dental-brand-btn-save:hover {
        background: #2D8FC7;
    }

    .dental-brand-btn-cancel {
        background: #95a5a6;
        color: white;
    }

    .dental-brand-btn-cancel:hover {
        background: #7f8c8d;
    }

    .dental-brand-empty {
        text-align: center;
        padding: 30px;
        color: #999;
        font-size: 14px;
    }

    .dental-settings-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        font-size: 13px;
        background: white;
    }

    .dental-settings-table th,
    .dental-settings-table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
    }

    .dental-settings-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
    }

    .dental-settings-table input[type="text"],
    .dental-settings-table input[type="number"],
    .dental-settings-table select {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 13px;
        box-sizing: border-box;
    }

    .dental-settings-table input[type="text"]:focus,
    .dental-settings-table input[type="number"]:focus,
    .dental-settings-table select:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.1);
    }

    .dental-settings-table input[type="number"]::-webkit-inner-spin-button,
    .dental-settings-table input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .dental-settings-table input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .dental-toggle-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dental-toggle-switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }

    .dental-toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .dental-toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.3s;
        border-radius: 30px;
    }

    .dental-toggle-slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    .dental-toggle-switch input:checked+.dental-toggle-slider {
        background-color: #34abeb;
    }

    .dental-toggle-switch input:checked+.dental-toggle-slider:before {
        transform: translateX(112px);
        /* 26px로 계산: 60px(전체 너비) - 22px(원 크기) - 8px(좌우 패딩) = 30px */
    }

    .dental-toggle-label {
        font-size: 11px;
        color: #666;
        margin-top: 4px;
        font-weight: 500;
    }

    .dental-save-settings-btn {
        width: 100%;
        padding: 14px;
        background: #34abeb;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 20px;
        transition: all 0.2s;
    }

    .dental-save-settings-btn:hover {
        background: #2c8fc7;
        box-shadow: 0 2px 8px rgba(52, 171, 235, 0.3);
    }

    .dental-estimate-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .dental-estimate-table th,
    .dental-estimate-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: center;
    }

    /* ★2026-09-14 원장 "금액이 낮을때도 세로 정렬, 원에 맞춰".
       가운데 정렬이라 자릿수가 다르면 '원' 이 제각각이었다(50,000원 / 1,200,000원).
       돈 칸(단가·금액)은 오른쪽으로 맞추고 숫자 폭을 고정한다 — '원' 이 한 줄로 선다.
       견적서(인쇄본)의 .print-table 과 같은 규칙이다. */
    .dental-estimate-table th:nth-child(5), .dental-estimate-table td:nth-child(5),
    .dental-estimate-table th:nth-child(6), .dental-estimate-table td:nth-child(6) {
        text-align: right;
        font-variant-numeric: tabular-nums;
        padding-right: 14px;
    }

    .dental-estimate-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
    }

    .dental-estimate-table tbody tr:hover {
        background: #f8f9fa;
    }

    .dental-estimate-delete-btn {
        background: none;
        border: 1px solid #e0e0e0;
        color: #999;
        cursor: pointer;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        transition: all 0.15s;
    }
    .dental-estimate-delete-btn:hover {
        background: #fee;
        border-color: #e74c3c;
        color: #e74c3c;
    }

    .dental-estimate-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .dental-estimate-header h2 {
        font-size: 20px;
        font-weight: 700;
        color: #e74c3c;
        margin: 0 0 10px 0;
    }

    .dental-estimate-subtitle {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 10px 0;
    }

    .dental-estimate-total {
        margin-top: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        text-align: right;
    }

    .dental-estimate-total-label {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .dental-estimate-total-amount {
        font-size: 24px;
        font-weight: 700;
        color: #e74c3c;
    }

    .dental-estimate-info {
        margin-top: 15px;
        padding: 10px;
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        border-radius: 4px;
        font-size: 12px;
        color: #856404;
    }

    .dental-additional-options {
        margin-top: 30px;
        border-radius: 8px;
        /*  둥근 모서리만 유지 */
        overflow: hidden;
        background: white;
    }

    .dental-additional-options h4 {
        font-size: 14px;
        font-weight: 600;
        color: #1976d2;
        margin: 0 0 10px 0;
    }

    .dental-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dental-checkbox-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dental-checkbox-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .dental-checkbox-item label {
        font-size: 13px;
        color: #333;
        cursor: pointer;
    }

    .dental-quantity-selector {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .dental-quantity-btn {
        width: 24px;
        height: 24px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .dental-quantity-btn:hover {
        background: #f0f0f0;
        border-color: #34abeb;
    }

    .dental-quantity-value {
        min-width: 30px;
        text-align: center;
        font-weight: 600;
    }

    .dental-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .dental-loading-spinner {
        background: white;
        padding: 30px;
        border-radius: 12px;
        text-align: center;
    }

    .dental-loading-spinner::after {
        content: "";
        display: block;
        width: 40px;
        height: 40px;
        margin: 20px auto 0;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #34abeb;
        border-radius: 50%;
        animation: dental-spin 1s linear infinite;
    }

    @keyframes dental-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 768px) {
        .dental-top-buttons-section {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
        }

        .dental-top-buttons-right {
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .dental-bottom-buttons-section {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
        }

        .dental-bottom-buttons-left,
        .dental-bottom-buttons-right {
            width: 100%;
            flex-wrap: wrap;
        }

        .dental-modal {
            width: 95%;
            max-height: 90vh;
        }

        .dental-settings-table {
            font-size: 11px;
        }

        .dental-settings-table th,
        .dental-settings-table td {
            padding: 6px;
        }

        .dental-brand-add-form {
            flex-direction: column;
        }

        .dental-brand-add-form input {
            width: 100%;
        }

        .dental-estimate-table {
            font-size: 11px;
        }

        .dental-estimate-table th,
        .dental-estimate-table td {
            padding: 8px 4px;
        }
    }

    .dental-global-discount-toggle {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 8px 14px 8px 16px;
        background: white;
        border-radius: 6px;
        border: 1px solid white;
        margin-bottom: 15px;
        margin-right: 58px;
        float: right;
        clear: both;
    }


    .dental-global-discount-toggle label:first-child {
        white-space: nowrap;
    }





    .dental-global-discount-toggle label {
        font-size: 13px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }

    .dental-global-toggle-switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 18px;
        flex-shrink: 0;
    }

    .dental-global-toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .dental-global-toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.3s;
        border-radius: 20px;
    }

    .dental-global-toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.3s;
        border-radius: 18px;
    }

    .dental-global-toggle-slider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
    }

    .dental-global-toggle-switch input:checked+.dental-global-toggle-slider {
        background-color: #34abeb;
    }

    .dental-global-toggle-switch input:checked+.dental-global-toggle-slider:before {
        transform: translateX(12px);
    }

    /* 드래그앤드롭 브랜드 관리 */
.dental-brand-drag-handle {
    display: flex;
    align-items: center;
    padding: 0 8px 0 4px;
    cursor: grab;
    color: #bbb;
    font-size: 18px;
    user-select: none;
    flex-shrink: 0;
    transition: color 0.2s;
    letter-spacing: -2px;
}
.dental-brand-drag-handle:hover { color: #34abeb; }
.dental-brand-drag-handle:active { cursor: grabbing; }

/*  그룹 래퍼: 드래그 단위 */
.dental-brand-group-wrapper {
    margin-bottom: 4px;
}
.dental-brand-group-wrapper.sortable-ghost {
    opacity: 0.4;
    background: #e8f5fd;
    border: 2px dashed #34abeb;
    border-radius: 8px;
}
.dental-brand-group-wrapper.sortable-chosen {
    background: #f8fdff;
    border-radius: 8px;
}
.dental-brand-group-wrapper.sortable-drag {
    opacity: 0.95;
    box-shadow: 0 8px 24px rgba(52,171,235,0.30);
    border-radius: 8px;
}
/*  그룹 헤더 (라벨 + 그룹 드래그 핸들) */
.dental-brand-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 3px;
    background: #fffbf0;
    border-left: 3px solid #f5a623;
    border-radius: 6px 6px 0 0;
    margin-bottom: 2px;
    cursor: grab;
}
.dental-brand-group-header:active { cursor: grabbing; }
.dental-group-drag-handle {
    color: #f5a623;
    cursor: grab;
}
.dental-group-drag-handle:active { cursor: grabbing; }

.dental-brand-list-item.sortable-ghost {
    opacity: 0.4;
    background: #e8f5fd;
    border: 2px dashed #34abeb;
}
.dental-brand-list-item.sortable-drag {
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(52,171,235,0.35);
    border-color: #34abeb;
    background: #f0faff;
    transform: scale(1.02);
}
.dental-brand-list-item.sortable-chosen {
    border-color: #34abeb;
    background: #f8fdff;
}
.dental-brand-group-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px 0;
}
.dental-brand-group-line {
    flex: 1;
    height: 1px;
    background: #e8e8e8;
}
.dental-drag-hint {
    text-align: center;
    font-size: 11px;
    color: #ccc;
    padding: 4px 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ========================================
   브랜드 미디어 갤러리 스타일
   ======================================== */
.dental-gallery-btn {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s;
    white-space: nowrap;
}
.dental-gallery-btn:hover {
    background: #f8f8f8;
    border-color: #34abeb;
    box-shadow: 0 0 0 1px rgba(52, 171, 235, 0.2);
}
.dental-gallery-btn.active {
    border-color: #34abeb;
    color: #34abeb;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(52, 171, 235, 0.3);
}
.dental-secondary-btn.brand-active {
    border-color: #34abeb;
    color: #34abeb;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(52, 171, 235, 0.3);
}
/* 영상 재생 중 버튼 파란 라인 */
.dental-action-btn.video-active {
    border-color: #34abeb;
    color: #34abeb;
    box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.3);
}
.dental-secondary-btn.video-active {
    border-color: #34abeb;
    color: #34abeb;
    box-shadow: 0 0 0 2px rgba(52, 171, 235, 0.3);
}

/* 갤러리 모달 — 환자 바(2001) 보다 확실히 위로 표시되도록 매우 높은 z-index */
.dental-gallery-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 살짝 어두운 배경 */
    background: rgba(0,0,0,0.66);
    z-index: 999999;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .12s ease;
}
.dental-gallery-modal-overlay.show {
    display: block;
    opacity: 1;
}
.dental-gallery-modal {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    /* backdrop-filter + 무거운 그림자 제거 → GPU 부하 감소 → 영상 끊김 방지 */
    background: #1a1d28;
    border-radius: 18px;
    width: 800px;
    min-width: 360px;
    min-height: 360px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,0.35);
    resize: both;
    isolation: isolate; /* 드롭다운/iframe stacking 분리 보장 */
}
/* 로딩 스피너 제거 (dental-gallery-spinner 사용) */
.dental-gallery-modal::after { content: none; display: none; }
.dental-gallery-modal-overlay.show .dental-gallery-modal::after { display: none; }
/* 사용 안 하는 keyframes 제거 — 메모리/파싱 절감 */
.dental-gallery-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #555, #888);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.dental-gallery-modal-header:active {
    cursor: grabbing;
}
.dental-gallery-modal-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: white;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dental-gallery-header-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dental-gallery-brand-menu-btn {
    color: white;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.dental-gallery-brand-menu-btn:hover {
    background: rgba(255,255,255,0.4);
}
.dental-gallery-modal-header .dental-modal-close {
    color: white;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dental-gallery-modal-header .dental-modal-close:hover {
    background: rgba(255,255,255,0.4);
}
/* 드롭다운 메뉴 */
.dental-gallery-brand-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    /* backdrop-filter blur(20px) 제거 → GPU 부하 큼 */
    background: linear-gradient(180deg, rgba(28,32,42,0.97), rgba(20,24,32,0.97));
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100001;
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}
.dental-gallery-brand-dropdown.open {
    display: block;
}
.dental-gallery-brand-dropdown-item {
    padding: 10px 14px;
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.1s;
}
.dental-gallery-brand-dropdown-item:last-child {
    border-bottom: none;
}
.dental-gallery-brand-dropdown-item:hover {
    background: rgba(255,255,255,0.08);
}
.dental-gallery-brand-dropdown-item.active {
    background: rgba(255,255,255,0.12);
    color: #ffd27a;
    font-weight: 700;
}
.dental-gallery-brand-dropdown-item .check {
    color: #ffd27a;
    font-weight: 700;
}
.dental-gallery-modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
}
.dental-gallery-brand-tabs {
    display: none;
}
.dental-gallery-brand-tab {
    padding: 6px 14px;
    border: 2px solid #e8e8e8;
    border-radius: 20px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
}
.dental-gallery-brand-tab.active {
    border-color: #6c5ce7;
    background: #f3f0ff;
    color: #6c5ce7;
    font-weight: 700;
}
.dental-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.dental-gallery-item {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    background: #fafafa;
}
.dental-gallery-item-title {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dental-gallery-item-title .badge-video {
    background: #e74c3c;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.dental-gallery-item-title .badge-image {
    background: #27ae60;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.dental-gallery-item .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}
.dental-gallery-item .video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}
/* 음소거 버튼 제거됨 */
.dental-gallery-item .image-wrapper {
    text-align: center;
    padding: 0;
}
/* 갤러리 좌/우 투명 네비 버튼 — 영상/이미지 영역 호버 시 보임 */
.dental-gallery-item .video-wrapper:hover .dental-gallery-nav-btn,
.dental-gallery-item .image-wrapper:hover .dental-gallery-nav-btn {
    opacity: 1 !important;
}
.dental-gallery-nav-btn:hover {
    background: rgba(0,0,0,0.6) !important;
}
/* 로딩 스피너 — 그라데이션 링 (한쪽 끝이 투명, 반대쪽이 흰색으로 자연스럽게 페이드) */
.dental-gallery-spinner {
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255,255,255,1) 0deg, rgba(255,255,255,0) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, black 62%);
            mask: radial-gradient(circle, transparent 58%, black 62%);
    pointer-events: none;
    animation: dentalGallerySpinAnim .9s linear infinite;
    transition: opacity .2s ease;
}
.dental-gallery-spinner.hidden { opacity: 0; pointer-events: none; }
@keyframes dentalGallerySpinAnim { to { transform: rotate(360deg); } }
/* 프리미엄 모달은 화면이 커서 스피너도 크게 */
.dpg-stage .dental-gallery-spinner {
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    -webkit-mask: radial-gradient(circle, transparent 60%, black 64%);
            mask: radial-gradient(circle, transparent 60%, black 64%);
}
.dental-gallery-item .image-wrapper img {
    width: 100%;
    max-height: none;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.dental-gallery-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 13px;
}

/* 마스터 관리자 미디어 관리 섹션 */
.dental-media-admin-section {
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #6c5ce7;
    overflow: hidden;
}
.dental-media-admin-header {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.dental-media-admin-header h3 {
    margin: 0;
    color: white;
    font-size: 14px;
    font-weight: 700;
}
.dental-media-admin-header .toggle-icon {
    color: white;
    font-size: 14px;
    transition: transform 0.2s;
}
.dental-media-admin-body {
    display: none;
    padding: 16px;
    background: #fafafe;
}
.dental-media-admin-body.open {
    display: block;
}
.dental-media-brand-select-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.dental-media-brand-select-row select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}
.dental-media-add-form {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
}
.dental-media-add-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.dental-media-add-form input,
.dental-media-add-form select {
    width: 100%;
    padding: 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.dental-media-add-form .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.dental-media-add-form .form-row > div {
    flex: 1;
}
.dental-media-add-btn {
    width: 100%;
    padding: 10px;
    background: #6c5ce7;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.dental-media-add-btn:hover {
    background: #5a4bd1;
}
.dental-media-list {
    margin-top: 10px;
}
.dental-media-folder {
    margin-bottom: 12px;
}
.dental-media-folder-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    cursor: pointer;
    user-select: none;
}
.dental-media-folder-header .folder-icon {
    font-size: 16px;
}
.dental-media-folder-header .folder-name {
    font-size: 13px;
    font-weight: 700;
    color: #555;
}
.dental-media-folder-header .folder-count {
    font-size: 11px;
    color: #999;
    margin-left: auto;
}
.dental-media-folder-body {
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.dental-media-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}
.dental-media-list-item:last-child {
    border-bottom: none;
}
/* 공통 .media-thumb 규칙 — 리스트/그룹 어디에 있든 항상 56x42 썸네일로 고정 */
.media-thumb {
    width: 56px;
    height: 42px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-thumb .thumb-placeholder {
    font-size: 18px;
    color: #bbb;
}
.dental-media-list-item .media-info {
    flex: 1;
    min-width: 0;
}
.dental-media-list-item .media-info .media-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dental-media-list-item .media-info .media-url {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dental-media-list-item .media-type-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    flex-shrink: 0;
}
.dental-media-list-item .media-type-badge.video {
    background: #fde8e8;
    color: #e74c3c;
}
.dental-media-list-item .media-type-badge.image {
    background: #e8fde8;
    color: #27ae60;
}
.dental-media-list-item .media-delete-btn {
    padding: 4px 10px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
}
.dental-media-list-item .media-delete-btn:hover {
    background: #ee5a24;
}
/* 그룹 미디어 아이템 (같은 제목 묶음) */
.dental-media-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}
.dental-media-group-item:last-child {
    border-bottom: none;
}
.dental-media-group-item .group-info {
    flex: 1;
    min-width: 0;
}
.dental-media-group-item .group-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dental-media-group-item .group-count {
    font-size: 11px;
    color: #999;
    margin-left: 4px;
    font-weight: 400;
}
.dental-media-group-item .group-expand-btn {
    padding: 3px 10px;
    background: #f0f8ff;
    color: #34abeb;
    border: 1.5px solid #aed6f1;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 600;
}
.dental-media-group-item .group-expand-btn:hover {
    background: #d6edff;
}
.dental-media-group-expanded {
    background: #fafcff;
    border-left: 3px solid #34abeb;
    margin-left: 12px;
}
/* 드래그 핸들 & 드래그 상태 */
.dental-media-list-item .drag-handle {
    cursor: grab;
    color: #bbb;
    font-size: 16px;
    flex-shrink: 0;
    user-select: none;
    padding: 0 2px;
    line-height: 1;
}
.dental-media-list-item .drag-handle:active { cursor: grabbing; }
.dental-media-list-item.dragging {
    opacity: 0.4;
    background: #e8f4fd;
}
.dental-media-list-item.drag-over {
    border-top: 2px solid #34abeb;
}
.dental-master-badge {
    display: inline-block;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
/* 미디어 관리 탭 */
.dental-media-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid #eee;
}
.dental-media-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.dental-media-tab:hover {
    color: #666;
}
.dental-media-tab.active {
    color: #6c5ce7;
    border-bottom-color: #6c5ce7;
}
/* 갤러리 버튼 공통 (파란색 통일) */
.dental-gallery-action-btn {
    padding: 6px 14px;
    border: 1.5px solid #aed6f1;
    border-radius: 20px;
    background: #f0f8ff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #2980b9;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.dental-gallery-action-btn:hover {
    background: #e1f0fa;
    border-color: #2980b9;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.15);
}
.dental-gallery-action-btn.active {
    background: #2980b9;
    color: white;
    border-color: #2980b9;
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.3);
}
/* 기존 호환 */
.dental-bonegraft-gallery-btn {
    display: none !important;
}
/* 카테고리 배지 */
.media-type-badge.cat-implant {
    background: #e3f2fd;
    color: #1976d2;
}
.media-type-badge.cat-bonegraft {
    background: #fff3e0;
    color: #e65100;
}
.media-type-badge.cat-sinus {
    background: #f3e5f5;
    color: #7b1fa2;
}
.media-type-badge.cat-premium {
    background: linear-gradient(90deg,#ffe29a,#ffb347);
    color: #7a4a00;
    font-weight: 700;
}