.main-card {
        width: 90%; min-width: 1000px; max-width: 1600px;
        margin: 5px auto;
        background: white;
        border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        padding: 30px;
    }
    .header {
        border-bottom: 2px solid #eee;
        margin-bottom: 20px; padding-bottom: 10px;
        display: flex; justify-content: space-between; align-items: center;
    }

    .tm-badge {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        background: var(--progress-bg);
        color: #fff;
        vertical-align: middle;
    }

    /* 연결 상태 */
    .status-bar {
        background: #e3f2fd; padding: 10px 20px; margin-bottom: 20px;
        border-radius: 8px; font-size: 0.9em; display: flex; gap: 20px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /*.status-bar-device-block {*/
    /*    min-width: 0;*/
    /*    flex: 1 1 220px;*/
    /*}*/

    .connect-btn.btn-primary {
        background: var(--primary); border-color: var(--primary); color: white;
    }
    .connect-btn.btn-primary:hover {
        filter: brightness(1.10);
    }
    .connect-btn.btn-secondary {
        background: #6c757d; border-color: #6c757d; color: #fff;
    }

    /* 연결 버튼 + 상태 */
    .connection-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
    .connection-row .connect-btn {
        flex-shrink: 0;
    }
    .connection-row .status-bar {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0;
        flex-wrap: nowrap;
        align-items: center;
        gap: 16px;
        padding: 6px 14px;
    }
    .connection-row .status-bar-device-block {
        flex: 0 1 auto;
        white-space: nowrap;
    }
    .connection-row #connection-status {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .dot {
        height: 10px; width: 10px; background-color: #bbb;
        border-radius: 50%; display: inline-block; margin-right: 5px;
    }
    .dot.active { background-color: var(--success); }

    .device-uid { color:var(--accent); }

    /* Device meta info (DEBUG) */
    .device-meta-container {
        display: flex;
        gap: 20px; /* 요소 사이의 간격 */
        width: 100%;
        /*padding: 15px;*/
    }

    .content-box {
        flex: 1; /* 두 div가 동일한 비율(1:1)로 너비를 가짐 */
        /*max-height: 300px;*/
        /*padding: 20px;*/
        /*border-radius: 8px;*/
        /*background-color: #ffffff;*/
        /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    }

    /* 특정 패널의 비율을 조정하고 싶을 때 (예: 2:1) */
    /* .control-panel { flex: 2; } */
    /* .monitor-panel { flex: 1; } */

    .model-meta-panel, .device-meta-panel {
        font-size: 0.88em;
        line-height: 1.4;
        /*margin-top: 8px;*/
        padding: 8px 12px;
        background: var(--bs-gray-100);
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.07);
        max-width: 640px;
    }
    .model-meta-body {
        word-break: break-word;
    }
    .model-meta-body code {
        font-size: 0.9em;
        word-break: break-all;
    }

    /* 버튼 스타일 */
    button {
        padding: 12px 24px;
        border: none; border-radius: 8px;
        cursor: pointer; font-weight: bold; transition: 0.3s;
    }
    button:disabled { background: #ccc; cursor: not-allowed; }

    /* 메인 콘텐츠 영역 — model7: 스트림 UI는 클래스 카드로 이동, 우측은 추론 미리보기만 */
    /*.content-grid {*/
    /*    display: grid;*/
    /*    grid-template-columns: minmax(0, 1fr);*/
    /*    gap: 18px;*/
    /*    width: 100%;*/
    /*}*/

    /* 구간 구분 */
    .section-step-divider {
        display: block;
        width: 3rem;
        height: 2px;
        margin: 1.7rem auto 1.7rem auto;
        border: 0;
        border-radius: 2px;
        /*background-color: #9acbd0; !*#10b981 #34d399 #4db6ac; //var(--success, #4db6ac);*!*!*/
        /*background-color: #9ccc65; */
        /*background-color: #cfd8dc;*/
        /*background-color: #4db6ac;*/
        /*background-color: #bbe0ef;*/
        background-color: #d1ecf1;
        /*background-color: #e0e0e0;*/
        opacity: 0.95;
    }

    .class-container h4, .training-container h4, .preview-container h4, .deploy-container h4 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 12px;
    }

    .class-container .step-hint {
        font-size: 0.82rem;
        color: #6b7280;
        margin: -6px 0 10px 0;
    }

    /* models5: 수집 가이드 패널 */
    .class-container .dataset-guide-card .card-header {
        font-size: 0.95rem;
    }
    .class-container .dataset-guide-card ul li {
        margin-bottom: 0.35rem;
    }

    /* data class list */
    .datasets {
        /*max-height: 410px;    !* 요청하신 최대 높이 *!*/
        /*overflow-y: auto;     !* 세로 스크롤 활성화 *!*/
        overflow-x: hidden;   /* 가로 스크롤 방지 */
        padding-right: 5px;   /* 스크롤바와 카드 사이 간격 */

        /* 스크롤 애니메이션을 부드럽게 */
        scroll-behavior: smooth;
    }

    /* 스크롤바 디자인 */
    .datasets::-webkit-scrollbar {
        width: 6px;
    }
    .datasets::-webkit-scrollbar-thumb {
        background: #ced4da;
        border-radius: 10px;
    }
    .datasets .captured-images::-webkit-scrollbar {
        height: 6px;
    }
    .datasets .captured-images::-webkit-scrollbar-thumb {
        background: #93c5fd;
        border-radius: 999px;
    }
    .datasets .captured-images::-webkit-scrollbar-thumb:hover {
        background: #7dd3fc;
    }
    .datasets .captured-images::-webkit-scrollbar-track {
        background: #eff6ff;
        border-radius: 999px;
    }

    .datasets .card {
        --bs-card-spacer-y: 0.8rem;
        --bs-card-spacer-x: 0.8rem;
        --bs-btn-bg: #e4e4e4;

        margin-bottom: 5px;
        width: 100%; max-width: 100%;
        overflow: hidden;
    }
    .datasets .card.active {
        --bs-border-opacity: 1;
        /*border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;*/
        border-color: var(--primary) !important;
        border-width: 2px;
    }
    .datasets .card hr { margin-top: 5px; margin-bottom: 7px; }
    .datasets .card p { margin-top: 5px; margin-bottom: 7px; }
    .datasets .card-body { min-width: 0; }

    .tm-class-title-row { width: 100%; }
    .tm-class-title-row .tm-class-title-main {
        min-width: 0;
        flex: 0 1 auto;
        cursor: pointer;
    }
    .tm-class-title-row .tm-class-title-main .class-name {
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
    }
    .tm-class-title-row .tm-class-title-actions {
        flex-shrink: 0; margin-left: auto;
    }
    .tm-class-title-main button,
    .tm-class-title-actions button {
        background: var(--bs-gray-200);
        cursor: pointer;
    }
    .tm-class-title-main button:hover,
    .tm-class-title-actions button:hover {
        background: var(--bs-gray-300);
    }
    .tm-class-title-row .class-rename-btn {
        flex-shrink: 0;
        padding: 4px 7px;
        margin-left: 8px;
        line-height: 1;
    }
    .datasets .card.active .class-reset-btn i,
    .datasets .card.active .class-delete-btn i {
        color: var(--bs-danger);
    }

    .datasets .image-count { color: var(--accent); }

    .capture-workspace button {
        font-size: 1.25rem; margin-right: .25rem;
        display: none;
    }
    .start_btn { max-height: 46px; }
    .stop_btn { max-height: 46px; }
    .sample-upload-btn { max-height: 46px; }
    .capture-workspace .sample-upload-btn {
        display: inline-block !important;
    }

    .datasets .card.active .start_btn {
        border-color: var(--primary);
        color: var(--primary);
    }

    .datasets .card.active .start_btn:hover {
        background-color: var(--primary);
        color: #fff;
    }

    .datasets .captured-images {
        display: flex;
        flex-wrap: nowrap; /* 한 줄로 유지, 줄바꿈 안 함  */
        gap: 5px; /* 이미지 카드 사이의 간격 */
        /*justify-content: flex-start; !* 왼쪽부터 정렬 *!*/
        padding: 7px 10px;

        height: 84px;
        overflow-x: auto;  /* 가로 스크롤 활성화 */
        overflow-y: hidden;  /* 세로 스크롤 숨김 */

        box-sizing: border-box; /* 레이아웃 유지 */
        white-space: nowrap;  /* 줄바꿈 되지 않도록 강제 */
        --webkit-overflow-scrolling: touch;  /* 모바일에서 부드러운 스크롤 지원 */
    }

    .captured-images .image-card {
        position: relative; display: inline-block;
        flex: 0 0 80px;
        min-width: 76px; /* 화면이 아주 작아져도 최소 크기 유지 */
        max-width: calc(16.66% - 10px); /* 최대 6개까지만 한 줄에 표시하고 싶을 때 설정 */
        height: 64px;
        border: 1px solid #ddd; border-radius: 8px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }

    .captured-images .image-card:hover {
        transform: translateY(-5px); /* 마우스 올렸을 때 효과 */
    }

    /* 캡처 썸네일 = 스트림과 동일 160×128 종횡비 */
    .captured-images .image-card img {
        width: 100%;
        height: 100%;
        aspect-ratio: 160 / 128;
        object-fit: contain;
        display: block;
        background: #f0f0f0;
    }

    .captured-images .image-card canvas {
        width: 100%;
        height: auto;
        aspect-ratio: 160 / 128;
        object-fit: contain;
        display: block;
        background: #f0f0f0;
    }

    /* 삭제 오버레이 설정: 평소에는 숨김 */
    .image-card .delete-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.3s;
        cursor: pointer; border-top-left-radius: 4px; border-top-right-radius: 4px;
    }

    .image-card .delete-overlay i {
        color: white; font-size: 24px;
    }

    .image-card .delete-overlay:hover i {
        color: #ff4d4d; /* 마우스 오버시 더 붉게 */
        transform: scale(1.2);
    }

    /* 마우스 오버시 오버레이 표시 */
    .image-card:hover .delete-overlay {
        opacity: 1;
    }

    .class-add-msg {
        color: var(--bs-danger);
    }

    /* 2 training area */
    .train-btn {
        /*background: linear-gradient(180deg, #6a1b9a 0%, #4a148c 100%) !important;*/
        /*color: #fff !important;*/
        border: none !important;
        border-radius: 999px !important;
        padding: 10px 28px !important;
        font-weight: 700 !important;
        /*box-shadow: 0 4px 14px rgba(74, 20, 140, 0.35);*/

        box-shadow: var(--train-btn-box-shadow);
        background: var(--train-btn-bg);
        color: var(--train-btn-color);
    }
    .train-btn:hover {
        filter: brightness(1.05);
        /*color: #fff !important;*/
    }
    .train-btn:disabled {
        /*background: var(--train-btn-bg) !important; !* 기존 배경 유지 *!*/
        /* 배경을 연한 회색 또는 반투명으로 처리 */
        background: var(--train-btn-disabled-bg) !important;
        /* 글자색을 명도 대비가 확실한 짙은 회색으로 변경 */
        color: var(--train-btn-disabled-color) !important;
        /* 그림자 제거 (비활성 버튼은 평면적으로 보이는 것이 직관적) */
        box-shadow: none !important;
        /*filter: grayscale(0.3) brightness(0.9); !* 회색조 필터 적용 *!*/
        /*opacity: 0.5; !* 약간 반투명하게 *!*/
        /* 텍스트 가독성을 위한 불투명도 강제 설정 */
        opacity: 1 !important;
        /*cursor: wait; !* 대기 중 커서 *!*/
        /* 클릭 방지 및 커서 모양 변경 */
        cursor: not-allowed !important;
    }

    #collapseExample .card {
        --bs-card-spacer-y: 0.8rem;
        --bs-card-spacer-x: 0.8rem;
    }

    /* 모델 학습 진행, 업로드 진행 */
    .model-train-progress, .model-kmodel-upload-progress {
        max-width: 420px;
    }
    .model-train-progress .progress, .model-kmodel-upload-progress .progress {
        border-radius: 999px;
        overflow: hidden;
        background: var(--progress-track-bg);
    }
    .model-train-progress .progress-bar, .model-kmodel-upload-progress .progress-bar {
        background: var(--progress-bg) !important;
    }

    .k210-train-action-row {
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }
    .k210-train-action-row .train-btn {
        flex-shrink: 0;
    }
    .k210-train-action-row .model-train-progress {
        flex: 1 1 auto;
        min-width: 160px;
        max-width: 420px;
        margin-top: 0;
    }
    .k210-train-action-row .model-train-progress .model-train-progress-label {
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .model-convert-panel {
        margin-top: 14px;
        padding: 14px 16px;
        border-radius: 14px;
        background: var(--model-convert-panel-grad);
        border: 1px solid var(--model-convert-panel-border);
        font-size: 0.88rem;
    }
    .model-convert-panel .model-convert-title {
        font-weight: 700;
        color: var(--deep);
        margin-bottom: 8px;
    }

    /* Camera Streaming and Preview */
    /* 스트림 UI가 클래스 카드로 이동한 동안 풀은 stream.js에서 d-none 처리 */
    #k210-stream-ui-pool.stream-ui-pool--idle-hidden {
        display: none !important;
    }
    .btn-capture {
        background: var(--accent); color: white;
        width: 100%; margin-top: 15px; font-size: 1.1em;
    }
    .btn-capture:hover { background: var(--accent); color: white;  }

    .k210-class-stream-mount .streaming-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 4px;
        max-width: 160px;
        width: 100%;
    }
    .k210-class-stream-mount #streaming_image {
        margin-left: 0;
        margin-right: 0;
        max-width: 160px !important;
        width: 100%;
        height: auto;
        aspect-ratio: 160 / 128;
        object-fit: contain;
    }
    .k210-class-stream-mount .btn-capture {
        margin-top: 6px;
        width: 100%;
        font-size: 0.85rem;
        padding: 0.35rem 0.5rem;
    }

    .datasets .capture-workspace .capture-workspace-toolbar.d-flex {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100%;
        gap: 6px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .capture-workspace-body {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: stretch;
        width: 100%;
        gap: 6px;
        min-height: 0;
    }
    .k210-class-stream-column {
        min-width: 0;
        max-width: 168px;
        width: max-content;
        align-self: start;
        /*border: 1px solid #ccc;*/
        background-color: #e3f2fd;
        padding: 4px;
    }
    .k210-class-stream-mount {
        width: max-content;
        max-width: 160px;
    }
    .capture-workspace-body .captured-images {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 96px;
    }

    .capture-workspace-body .captured-images-anchor {
        min-width: 0;
    }
    .datasets .capture-workspace .capture-workspace-toolbar > .captured-images {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 84px;
        margin-top: 0;
        align-self: center;
    }

    .datasets .capture-workspace .capture-workspace-toolbar > .btn {
        flex-shrink: 0;
    }

    .preview-container {
        display: flex; flex-direction: column;
        align-items: stretch;
        width: 500px;
        max-width: 100%;
    }

    .preview-container .preview-col-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #9ca3af;
        margin-bottom: 6px;
    }

    .preview-box {
        padding: 10px;
        width: 100%;
        height: auto;
        min-height: 100px;
        /*border: 1px dashed #ccc; border-radius: 10px;*/
        /*background: #fafafa;*/
    }

    .streaming-box {
        /*position: -webkit-sticky; !* 사파리 지원 *!*/
        display: none; padding-bottom: 10px;
    }

    /* K210 스트림 JPEG 원본 160×128 */
    #streaming_image {
        width: 100%;
        max-width: 160px;
        height: auto;
        aspect-ratio: 160 / 128;
        object-fit: contain;
        /*border-radius: 12px;*/
        border: none;
        box-shadow: 0 8px 28px rgba(0,0,0,0.12);
        display: none;
        margin-left: auto;
        margin-right: auto;
    }

    .web-inference {
        background: #e3f2fd;
        color: #3730a3;
        font-weight: 700;
        border-radius: 15px;
        padding: 5px 10px 5px 30px;
    }
    .device-inference {
        background: #ddffe2;
        color: #166534;
        font-weight: 700;
        border-radius: 15px;
        padding: 5px 10px 5px 30px;
    }

    /* Preview */
    #preview-gate-placeholder {
        border: 1px solid var(--progress-track-bg) !important;
        background: var(--train-btn-color) !important;
    }

    .preview-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 2px;
        justify-content: center;
        align-items: center;
    }

    .preview-start-btn {
        background: #fff !important;
        color: var(--accent) !important;
        border: 2px solid var(--accent) !important;
        border-radius: 999px !important;
        font-weight: 700 !important;
    }
    .preview-stop-btn {
        background: var(--preview-stop-bg) !important;
        color: var(--preview-stop-color) !important;
        border: none !important;
        border-radius: 999px !important;
    }

    #preview-gate-content {
        --k210-preview-canvas-w: 160px;
        --k210-preview-canvas-h: 128px;
        --k210-preview-panel-w: min(100%, 300px);
    }
    .k210-web-preview-stream-slot {
        margin-top: 12px;
        margin-bottom: 10px;
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .k210-web-preview-stream-slot .streaming-box {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 10px 12px 8px;
        background: #fff;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08);
    }
    .k210-web-preview-stream-slot #streaming_image {
        width: var(--k210-preview-canvas-w) !important;
        max-width: var(--k210-preview-canvas-w) !important;
        height: var(--k210-preview-canvas-h) !important;
        aspect-ratio: 160 / 128;
        object-fit: contain;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
    .k210-web-preview-stream-slot #capture-btn,
    .k210-web-preview-stream-slot .btn-capture {
        display: none !important;
    }
    .k210-web-preview-stream-slot #stream-ready {
        display: none !important;
    }

    #preview-gate-content.k210-web-preview--compact .prediction-panel {
        width: var(--k210-preview-panel-w);
        max-width: var(--k210-preview-panel-w);
        margin-left: auto;
        margin-right: auto;
    }
    #preview-gate-content.k210-web-preview--compact #prediction-results {
        max-width: none;
        width: 100%;
    }
    #preview-gate-content.k210-web-preview--compact #dominant-class {
        font-size: 1.05rem;
    }

    .prediction-panel {
        width: 100%;
        margin-top: 12px;
        border: none;
        border-radius: 16px;
        padding: 14px 14px 12px;
        background: linear-gradient(180deg, #f8f9fb 0%, #fff 48%);
        box-shadow: 0 4px 24px rgba(67, 56, 202, 0.08);
    }

    .prediction-panel .dominant-label {
        text-align: center;
        margin-bottom: 10px;
        min-height: 3.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #dominant-class {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--deep);
        line-height: 1.25;
    }

    #prediction-summary {
        font-size: 0.78rem;
        margin-bottom: 10px;
        color: #6b7280;
        text-align: center;
    }

    .preview-bars {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .predict-row-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 6px;
    }

    .predict-name {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1f2937;
    }

    .predict-muted {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--predict-muted);
        font-variant-numeric: tabular-nums;
    }

    .predict-track {
        height: 22px;
        border-radius: 11px;
        background: #eceff1;
        overflow: hidden;
        position: relative;
    }
    .predict-fill {
        height: 100%;
        width: 0%;
        border-radius: 11px;
        /* 클래스별 막대 색(그라데이션)을 `train.js`가 설정한 CSS 변수로 지정 */
        background: var(--predict-fill-bg, var(--predict-fill-default));
        transition: width 0.12s ease-out;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    }

    /* Download and Deploy */
    .model-download-panel, .model-import-panel {
        max-width: 720px;
        border: 1px solid var(--progress-track-bg) !important;
        background: var(--download-panel-grad) !important;
    }
    .model-download-panel .list-group-item, .model-import-panel .list-group-item {
        border-color: #e8eaf0;
    }

    .model-import-panel .flex-grow-1 div { width: 100px; }
    .tm-kmodel-export-actions { width: 100%; }
    .model-import-panel #kmodel_file { width: 100%; min-width: 0; }

    .export-btn {
        border-radius: 999px !important;
        font-weight: 600 !important;
        border: 2px solid var(--export-border) !important;
        color: var(--export-color) !important;
        background: #fff !important;
        box-shadow: inset var(--train-btn-bg) 0 0 0 1px;
    }
    .export-btn:hover { background: #eef7fd !important; }

    .upload-btn {
        border-radius: 999px !important;
        font-weight: 600 !important;
        /*border: 2px solid var(--export-border) !important;*/
        color: var(--bs-white) !important;
        background: var(--upload-btn-bg) !important;
        min-width: 85px;
        /*box-shadow: inset var(--train-btn-bg) 0 0 0 1px;*/
    }

    .model-download-panel button {
        box-sizing: border-box;
        min-width: 110px;
        width: 110px;
        height: 38px;
        padding: 0 0.75rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: 0.875rem;
        line-height: 1;
    }
    .model-download-panel button i { margin-right: 5px; }
    .model-download-panel .tm-kmodel-export-actions .model-kmodel-upload-progress,
    .model-import-panel #kmodel-upload-progress {
        max-width: 420px; width: 100%;
    }
    @media (min-width: 576px) {
        .tm-kmodel-export-actions { width: 420px; }
    }
    .upload-btn:hover { filter: brightness(1.05); }
    .upload-btn:disabled {
        background: var(--train-btn-disabled-bg) !important;
        color: var(--train-btn-disabled-color) !important;
        /*filter: grayscale(0.3) brightness(0.9); !* 회색조 필터 적용 *!*/
        /*opacity: 0.5; !* 약간 반투명하게 *!*/
        /* 텍스트 가독성을 위한 불투명도 강제 설정 */
        opacity: 1 !important;
        /*cursor: wait; !* 대기 중 커서 *!*/
        /* 클릭 방지 및 커서 모양 변경 */
        cursor: not-allowed !important;
    }

    .model9-kmodel-file { width: 100%; max-width: 280px; }
    .model9-kmodel-file::file-selector-button {
        color: var(--bs-white);
        /*background-color: var(--upload-btn-bg);*/
        background-color: var(--bs-success-border-subtle);
        /*border-color: var(--bs-success-border-subtle);*/
    }

    .model9-kmodel-file:hover::file-selector-button {
        /*background-color: #3f9f96;*/
        background-color: var(--bs-success-border-subtle);
        /*border-color: var(--bs-success-border-subtle);*/
    }

    .model9-import-panel { max-width: 720px; }
    .model9-import-copy { flex: 1 1 auto; max-width: none; min-width: 0; }
    .model9-import-actions { flex: 0 0 auto; width: auto !important; min-width: 0; }
    .model9-import-file-row { width: auto !important; }

    @media (max-width: 575.98px) {
        .model9-import-panel, .model9-import-copy, .model9-import-actions {
            max-width: 100%; flex-basis: auto;
        }

        .model9-import-actions, .model9-import-file-row {
            width: 100% !important;
        }
    }

    #kmodel_download_link { margin-top: 10px; font-weight: 600; }

    #log {
        font-family: monospace; height: 150px; overflow-y: auto;
        margin-top: 20px; padding: 15px;
        background: #222; color: #0f0;
        border-radius: 8px; font-size: 0.85em;
    }

    /*#prediction-source-badge {*/
    /*    display: block;*/
    /*    width: fit-content;*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*    font-size: 0.65rem;*/
    /*    font-weight: 600;*/
    /*    padding: 3px 10px;*/
    /*    border-radius: 999px;*/
    /*    margin-bottom: 8px;*/
    /*    opacity: 0.9;*/
    /*}*/
    /*.source-web {*/
    /*    background: #e0e7ff;*/
    /*    color: #3730a3;*/
    /*}*/
    /*.source-server {*/
    /*    background: #dcfce7;*/
    /*    color: #166534;*/
    /*}*/

    /*.class-btn { margin: 5px; padding: 10px; }*/

    /*.tm-intro {*/
    /*    font-size: 0.9rem;*/
    /*    color: #4b5563;*/
    /*    margin: 0 0 8px 0;*/
    /*    max-width: 720px;*/
    /*}*/

    .tm-predict-row--top .tm-predict-fill {
        background: var(--tm-predict-top-fill);
        box-shadow: 0 0 0 2px rgba(126, 87, 194, 0.35);
    }
    .tm-predict-row--top .tm-predict-name {
        color: var(--deep);
    }
    .tm-predict-row--warn .tm-predict-fill {
        background: var(--tm-predict-warn-fill);
        box-shadow: 0 0 0 2px rgba(255, 143, 0, 0.35);
    }
    .tm-predict-row--warn .tm-predict-muted {
        color: #e65100;
    }

    /* Inference Mode Toggle */
    .inference-mode-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        gap: 10px;
        font-size: 0.85rem;
    }

    .inference-mode-container label {
        margin: 0;
        cursor: pointer;
    }