.labeling-container {
    --header-h: 64px;
    --gap: 5px;
    --comment-w: 320px;
    width: 100%;
    max-width: none;
    height: 90dvh;
    overflow: hidden;
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
}

    /* 상단바 */
    .labeling-container .topbar {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        align-items: center;
    }
        .labeling-container .topbar .topbar__title {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    /* 본문 3열 그리드 */
    .labeling-container .layout-grid {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 2fr 1.5fr 1.5fr; /* ← 60% / 20% / 20% */
        gap: var(--gap);
        padding: var(--gap);
        min-height: 0;
    }

        /* ✅ 그리드 직계 자식은 반드시 shrink 허용 */
        .labeling-container .layout-grid > * {
            min-width: 0;
            min-height: 0; /* ← 이게 없으면 스크롤이 안 생김 */
        }

    /* 좌측 이미지 패널 */
    .labeling-container .image-stage {
        position: relative; /* ↓ 자식(.bounding-box)의 기준 */
        margin-top: 30px;
        display: inline-block; /* 이미지 실제 크기에 딱 맞게 */
        max-width: 100%;
        overflow: visible; /* 박스가 이미지 밖으로 안 보이게(선택) */
    }

        .labeling-container .image-stage img {
            display: block;
            width: 100%; /* 패널 너비에 맞춰 축소/확대 */
            height: auto; /* 비율 유지, 상단 고정 */
            object-fit: contain; /* 필요 시 cover 로 변경 가능 */
        }

        /* 빨간 박스 */
        .labeling-container .image-stage .bounding-box {
            position: absolute; /* .image-stage 기준 */
            padding-top: 30px;
            border: 2px solid red;
            background-color: transparent;
            box-sizing: border-box;
            pointer-events: none;
            z-index: 2;
        }

        .labeling-container .image-stage .bbox-label {
            position: absolute;
            left: 0;
            top: 0px; /* 박스 기준: x 동일, y +10px */
            transform: translateY(calc(-1 * var(--label-offset, 30px)));
            background: rgba(255,0,0,.9);
            color: #fff;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            z-index: 2;
            pointer-events: none;
            white-space: nowrap;
        }

    .labeling-container .attr-panel,
    .labeling-container .comment-panel {
        overflow-wrap: anywhere; /* 또는 word-break:break-word; */
    }

    /* ✅ 가운데만 스크롤 */
    .labeling-container .attr-panel {
         background: #ffd800;
        /* border-radius: 12px; */
        max-height: 100%; /* 부모 높이 안에서 동작 */
        overflow-y: auto; /* 스크롤 생성 */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* 우측 코멘트 */
    .labeling-container .comment-panel {
        max-height: 100%; /* 부모 높이 안에서 동작 */
        overflow-y: auto; /* 스크롤 생성 */
        /* background: #0a2472; */
        /* color: #fff; */
        /* border-radius: 12px; */
    }

    .labeling-container .pad {
        padding: 16px
    }