/* ✅ embed(iframe) 모드에서는 페이지 공통 컨테이너 여백 제거 */
.page-container {
    padding: 5px !important; /* 기존 유지 */
}

.embed-zero-pad .page-container {
    padding: 0 !important; /* embed일 때만 제거 */
}

.boot-wait {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 500 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color: #333;
}

/* 선택: 로딩 스피너 */
.boot-wait::before {
    content: "";
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,.1);
    border-top-color: #2d71c4;
    animation: sp 0.8s linear infinite;
}


/* 헤더 전체 높이를 절반 수준으로 */
.sb-prog-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 38px; /* 기존 대비 축소 */
    padding: 0 10px;
    background: #2d71c4; /* 청색 */
    color: #fff;
}

/* 제목: 데스크톱은 약간 크게, 모바일은 조금 작게 */
.sb-prog-title {
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 기본값(모바일 기준) */
    font-size: 15px;
}

/* 데스크톱에서만 좀 더 키움 */
@media (min-width: 821px) {
    .sb-prog-title {
        font-size: 17px;
    }
    /* “조금 크게” */
}

/* MENU 버튼은 모바일에서 숨김 */
.desktop-only {
    display: none;
}

@media (min-width: 821px) {
    .desktop-only {
        display: inline-flex;
    }
}

.sb-prog-menu-btn {
    border: 0;
    border-radius: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.sb-prog-menu-btn:hover {
    background: rgba(255,255,255,.25);
}

@keyframes sp {
    to {
        transform: rotate(360deg);
    }
}

/* 기본 화면(화면용)에서는 그대로 */
#printArea {
    /* 평소 스타일 */
}

/* 공통 인쇄 스타일 (iOS + 데스크탑용, Android 새창에도 재사용 가능) */
@media print {

    #printArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        /* 필요시 여백/배경 지정 */
        /* padding: 10mm; */
        /* background: #fff; */
    }
}


/* 🔹 FindParts 페이지 번호 버튼 전용 */
.parts-pager-button {
    min-width: 22px; /* 기본 36px → 확 줄이기 */
    padding: 0 2px; /* 좌우 여백 최소화 */
    font-size: 0.70rem; /* 글자 크기 축소 */
    line-height: 1.2; /* 너무 높지 않게 */
}

/* 🔹 좌우 화살표 아이콘 버튼 전용 */
.parts-pager-icon {
    width: 22px;
    height: 22px;
    padding: 0; /* 아이콘 주변 여백 제거 */
    font-size: 1rem; /* 아이콘 크기도 약간 축소 */
}

/* 🔹 모바일에서는 더 작게 (선택사항) */
@media (max-width: 768px) {
    .parts-pager-button {
        min-width: 20px;
        font-size: 0.65rem;
    }

    .parts-pager-icon {
        width: 20px;
        height: 20px;
        font-size: 0.9rem;
    }
}

/* 화면에서는 그대로 */
.no-print {
    /* 필요하면 기존대로 사용 */
}

@media print {

    .print-area {
        position: absolute;
        inset: 0;
        margin: 0;
        /* 필요시 여백/폭 지정 가능
        max-width: 210mm;
        */
    }

    /* 화면용 요소는 인쇄에서 제거 */
    .no-print {
        display: none !important;
    }

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    /* 리포트 페이지들이 여러 장일 경우 */
    .report-page {
        page-break-after: always;
    }
}


body {
    font-family: "맑은 고딕", Arial, sans-serif;
}

.title {
    text-align: center;
    font-size: 28px;
    margin: 20px 0;
    font-weight: bold;
}

.prod-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .prod-table th,
    .prod-table td {
        border: 1px solid #999;
        padding: 4px 6px;
        font-size: 13px;
        height: 32px;
    }

.header-row th {
    background-color: #f4f2d9 !important; /* 연한 노란색 헤더 */
    font-weight: bold;
    text-align: center;

    /* 🔽 인쇄 시에도 배경색을 유지하도록 요청 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.center {
    text-align: center;
}

.empty {
    background-color: #ffffff;
    height: 40px;
}

.large-area {
    height: 140px; /* 제조방법, 특이사항 등 큰 영역 */
}

.large-area-small {
    height: 80px;
}

.report-header {
    background-color: #f4f2d9 !important; /* 연한 노란색 헤더 */
    font-weight: bold;
    text-align: center !important;
    /* 🔽 인쇄 시에도 배경색을 유지하도록 요청 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media print {
    .cell-border {
        border: 1px solid #000 !important;
        outline: 1px solid #000 !important; /* 인쇄에서 border 누락될 때 보강 */
        outline-offset: -1px !important;
    }
}

.dialog-drag-handle {
    cursor: move;
    user-select: none;
    padding: 8px 12px;
    margin: -12px -12px 8px -12px; /* DialogContent 기본 padding 위로 확장(선택) */
    border-bottom: 1px solid #ddd;
}

.dialog-drag-handle .hint {
    opacity: .7;
    font-size: 12px;
    margin-left: 8px;
}

/* ✅ WinForm 스타일 타이틀바 (회색 버전) */
.dialog-titlebar {
    margin: -16px -16px 10px -16px; /* MudDialog 기본 padding이 16px일 때 */
    padding: 10px 12px;
    background: #e5e7eb; /* ✅ 연회색 (Tailwind gray-200 느낌) */
    color: #111827; /* ✅ 진한 글자색 */
    border-bottom: 1px solid #d1d5db; /* ✅ 경계선(gray-300) */

    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
    user-select: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* 타이틀바 안에서 제목을 가운데 정렬 */
.dialog-titlebar-left {
    flex: 1 1 auto; /* 남는 공간을 다 먹게 */
    text-align: center; /* 텍스트 가운데 */
    font-weight: 800;
}

/* 만약 부모가 flex가 아니라면(안전망) */
#find-drag-handle,
.dialog-titlebar {
    display: flex;
    align-items: center;
}

/* 타이틀바 아이콘도 글자색 따라가게 */
.dialog-titlebar .mud-icon-button {
    color: #111827 !important;
}

/* ✅ FindParts에서만 MudBlazor 기본 제목바 숨김 */
.find-dialog .mud-dialog-title,
.find-dialog .mud-dialog-titlebar,
.find-dialog .mud-dialog-title-container {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* ✅ FindDialog: 전체를 세로 flex로 */
.find-dialog .find-dialog-shell {
    display: flex;
    flex-direction: column;
    /*height: 75vh;*/ /* 필요시 조절: 60~85vh */
    max-height: 75vh;
}

/* ✅ 타이틀바는 항상 위에 고정(스크롤과 분리) */
.find-dialog .dialog-titlebar {
    flex: 0 0 auto;
    position: sticky; /* body 스크롤에 대해 상단 고정 */
    top: 0;
    z-index: 5;
}

/* ✅ 스크롤은 여기에서만 발생 */
.find-dialog .find-dialog-body {
    flex: 1 1 auto;
    overflow: auto; /* 수직/수평 스크롤 모두 여기서 처리 */
    padding: 8px 16px 12px 16px;
}

/* Dialog 전체를 세로 레이아웃으로 만들고, body만 스크롤 */
.find-dialog .mud-dialog-content {
    /* MudDialogContent 기본 padding은 유지해도 되고, 필요하면 0으로 */
    padding: 0 !important; /* 타이틀바/바디에서 padding을 직접 관리 */
}

/* ✅ 전체 shell: 높이를 제한해야 body에 스크롤이 생김 */
.find-dialog .find-parts-dialog-shell {
    display: flex;
    flex-direction: column;
    /* 중요: dialog 내부에서 스크롤 분리가 되려면 높이 제한이 필요 */
    max-height: 80vh; /* PC 기본 */
    height: 80vh;
}

/* ✅ 타이틀바: 스크롤과 무관하게 상단 고정 (sticky) */
.find-dialog .dialog-titlebar {
    position: sticky;
    top: 0;
    z-index: 10;
    /* 회색 타이틀바 */
    background: #e5e5e5;
    color: #111;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: move;
    /* 아래 경계선 */
    border-bottom: 1px solid #cfcfcf;
}

/* ✅ body만 스크롤 */
.find-dialog .find-dialog-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px; /* 본문 여백 */
    /* iOS 스크롤 안정화 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* 바운스가 overlay까지 전달되는 것 완화 */
}

/* 모바일에서는 높이를 더 크게(거의 전체) */
@media (max-width: 600px) {
    .find-dialog .find-parts-dialog-shell {
        height: 92vh;
        max-height: 92vh;
    }
}

/* 모바일에서는 드래그 느낌 제거 */
@media (max-width: 600px) {
    .dialog-titlebar {
        cursor: default !important;
        touch-action: auto !important;
    }

        .dialog-titlebar .hint {
            display: none;
        }
    /* '(드래그로 이동)' 같은 힌트 숨김 */
}

/* ✅ 모달(다이얼로그) 뜰 때, 배경 페이지 스크롤/터치 이동 차단 */
.mud-overlay-scroll-lock,
.mud-dialog-container {
    overscroll-behavior: none; /* 스크롤 체인 끊기 */
}

/* ✅ find-dialog: 전체 다이얼로그 껍데기 고정 + 내부만 스크롤 */
.find-dialog .mud-dialog-content {
    /* DialogContent 기본이 스크롤을 가져가면 흔들림 유발 -> 스크롤 금지 */
    overflow: hidden !important;
}

/* ✅ 내부 스크롤은 이 영역만 */
.find-dialog .find-parts-dialog-shell {
    display: flex;
    flex-direction: column; /* 세로 배치 */
    height: 100%;
    min-height: 0; /* flex 스크롤 필수 */
}

.find-dialog .dialog-titlebar {
    flex: 0 0 auto; /* 고정 영역 */
}

.find-dialog .find-dialog-body {
    flex: 1 1 auto;
    min-height: 0; /* flex 스크롤 필수 */
    overflow: auto; /* ✅ 여기만 스크롤 */
    -webkit-overflow-scrolling: touch; /* iOS 스크롤 */
    overscroll-behavior: contain; /* 바운스/체인 방지 */
}

/* ✅ 모바일에서 특히 흔들림(바운스) 줄이기 */
@media (max-width: 600px) {
    .find-dialog .mud-dialog {
        touch-action: pan-y; /* 수평 드래그/끌림 줄이고 세로 스크롤만 */
    }
}