/* 상세 카드에서 실제 응답을 기다리는 작은 슬롯만 안정화한다.
 * 댓글·통계·계약처럼 크기를 알 수 없는 섹션에는 빈 공간을 예약하지 않는다. */
#detailModal [data-detail-async-slot="attachments"] #detailAttachments {
    min-block-size: 46px;
}

#detailModal .detail-async-status {
    display: flex;
    align-items: center;
    min-block-size: 46px;
    padding: 10px 12px;
    box-sizing: border-box;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

#detailModal [data-detail-async-slot="attachments"][data-detail-async-state="loading"]
    .detail-async-status::before {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    content: "";
    animation: detail-async-slot-spin 0.8s linear infinite;
}

#detailModal #descriptionSection.private-bid-description-media .body-html figure.inline-media:not(.overlay-player-wrap):not([data-img-shapes]):not([data-vid-shapes]) > img,
#detailModal #descriptionSection.private-bid-description-media .body-html figure.inline-media:not(.overlay-player-wrap):not([data-img-shapes]):not([data-vid-shapes]) > video,
#detailModal .private-bid-dialog-media > img,
#detailModal .private-bid-dialog-media > video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #0f172a;
}

@keyframes detail-async-slot-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #detailModal [data-detail-async-slot="attachments"][data-detail-async-state="loading"]
        .detail-async-status::before {
        animation: none;
    }
}

/* 모바일 상세은 작은 중앙 카드가 아니라 안전영역 안의 전체 작업면을 사용한다.
 * 헤더와 작업 기록 진입은 고정하고 본문 하나만 스크롤 소유자가 된다. */
@media (max-width: 767px) {
    body.unified-page #detailModal.modal {
        align-items: stretch !important;
        padding: 8px !important;
        /* AppDialogViewport가 게시한 실제 가시 높이에서 현재 보이는 광고만
         * 차감한다. 광고가 숨겨지거나 landscape가 되면 예약값은 0으로
         * 돌아가므로 기존 전체 작업면을 그대로 사용한다. */
        height: calc(
            var(--app-dialog-viewport-height, 100dvh)
            - var(--app-bottom-reserved, 0px)
        ) !important;
    }

    body.unified-page #detailModal > .modal-content {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        height: calc(
            var(--app-dialog-viewport-height, 100dvh)
            - var(--app-bottom-reserved, 0px)
            - 16px
        ) !important;
        min-height: calc(
            var(--app-dialog-viewport-height, 100dvh)
            - var(--app-bottom-reserved, 0px)
            - 16px
        ) !important;
        max-height: calc(
            var(--app-dialog-viewport-height, 100dvh)
            - var(--app-bottom-reserved, 0px)
            - 16px
        ) !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    body.unified-page #detailModal > .modal-content > .modal-header,
    body.unified-page #detailModal > .modal-content > .work-log-detail-entry {
        flex: 0 0 auto;
    }

    body.unified-page #detailModal > .modal-content > .modal-body {
        flex: 1 1 auto;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}