/* hora-[Object]-[Type] */
/* MainLayout top-row 높이 */
.hora-top-row-height {
    height: 50px;
    position: relative;
    z-index: 1100;
}

/* MainLayout 본문 shell(main 직계 article.content)만 — 내부 위젯용 article(첨부 카드 등) 제외 */
main > article.content {
    height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

/* ========================================
   탭 바 스타일 (BIO 스타일 적용)
   ======================================== */

.tab-bar-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 0; /* main flex 레이아웃에서 높이 유지 */
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    overflow: hidden;
}

.tab-scroll-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 44px;
    background-color: #e5e7eb;
    border: none;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    flex: 0 0 28px;
}

.tab-scroll-btn:hover {
    background-color: #d1d5db;
    color: #374151;
}

.tab-scroll-btn:active {
    background-color: #9ca3af;
}

.tab-scroll-left {
    border-right: 1px solid #d1d5db;
}

.tab-scroll-right {
    border-left: 1px solid #d1d5db;
}

.tab-close-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 8px;
    margin-right: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 0 0 auto;
}

.tab-close-all-btn .bi {
    font-size: 16px;
    opacity: 0.85;
}

.tab-close-all-btn:hover {
    background-color: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.tab-close-all-btn:hover .bi {
    opacity: 1;
}

.tab-close-all-btn:active {
    background-color: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}

.tab-close-all-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.tab-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 2px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 스크롤바 숨기기 (화살표로 탐색) */
.tab-bar::-webkit-scrollbar {
    height: 0;
    display: none;
}

.tab-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 12px;
    background-color: #e5e7eb;
    border: 1px solid #d1d5db;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.85rem;
    color: #6b7280;
    transition: all 0.15s ease;
    white-space: nowrap;
    max-width: 180px;
    min-width: 100px;
}

.tab-item:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.tab-item.active {
    background-color: #ffffff;
    color: #1e3a5f;
    border-color: #e5e7eb;
    position: relative;
    font-weight: 500;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ffffff;
}

.tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tab-close:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.tab-close:hover {
    background-color: #ef4444;
    color: #ffffff;
}

.tab-item.active .tab-close {
    color: #6b7280;
}

.tab-item.active .tab-close:hover {
    background-color: #ef4444;
    color: #ffffff;
}

/* ========================================
   탭 컨텐츠 영역
   ======================================== */

.tab-content {
    display: none !important;
}

.tab-content.tab-active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0; /* 남은 공간을 채우고, 최소 높이 0으로 스크롤 가능하게 */
    overflow-y: auto; /* 홈 등 콘텐츠가 넘칠 때 세로 스크롤 */
    overflow-x: hidden;
    min-height: 0; /* flex 자식이 줄어들 수 있도록 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 탭 + 내부 IgbGrid 목록: article 고정 높이 대신 flex로 남은 영역 채움 */
main > article.content.tab-content.tab-active {
    height: auto;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.tab-content.tab-active:has(> .mm-page),
.tab-content.tab-active:has(> .rm-list-page),
.tab-content.tab-active:has(> .asreq-list-page),
.tab-content.tab-active:has(> .rf-register-wrap),
.tab-content.tab-active:has(> .rf-page),
.tab-content.tab-active:has(> .rmd-page),
.tab-content.tab-active:has(> .rm-write-page) {
    overflow: hidden;
}

/* 상세/등록 — 탭 밖 @Body 라우팅 */
main > article.content:has(> .rmd-page),
main > article.content:has(> .rm-write-page) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 탭 안 Blazor 페이지(공지 등)가 가로·세로 영역을 채우도록 */
.tab-content.tab-active > .nm-page,
.tab-content.tab-active > .rmd-page,
.tab-content.tab-active > .rir-page,
.tab-content.tab-active > .mm-page,
.tab-content.tab-active > .rm-list-page,
.tab-content.tab-active > .rm-write-page,
.tab-content.tab-active > div:first-child {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* 매뉴얼: 긴 문서 — 탭 영역 세로 스크롤 허용 */
main > article.content.tab-content.tab-active:has(> .manual-page) {
    overflow-y: auto;
    overflow-x: hidden;
}

.tab-content.tab-active > .manual-page {
    flex: none;
    min-height: auto;
    height: auto;
}

.tab-content.tab-hidden {
    display: none !important;
}

.min-h-0 {
    min-height: 0;
}

/* OverlaySpinner 화면 중앙에서 패이드 효과 */
.hora-overlay-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(200, 200, 200, 0); /* 시작은 투명 */    
    z-index: 10000;
    animation: fadeInBackground 0.6s ease-out forwards
}

@keyframes fadeInBackground {
    from {
        background-color: rgba(200, 200, 200, 0); /* 완전 투명 */
    }

    to {
        background-color: rgba(200, 200, 200, 0.5); /* 연한 회색 불투명 */
    }
}

/* Spinner 크기 및 색상 조정 */
.hora-sky-spinner {
    width: 60px;
    height: 60px;
    border-width: 6px;
    color: #1e90ff; /* LightSkyBlue */
    border-color: #1e90ff; /* 기본 회전 테두리 색 */
    border-right-color: transparent !important; /* 회전 효과를 위해 한쪽은 투명 */    
}

/* =================================================================== */
/* === Igb 크기 클래스 별 정의된 사이즈 값을 size 변수 값에 입력  === */
/* =================================================================== */
/* 전체 크기 적용 */
.hora-size-small {
    --ig-size: var(--ig-size-small); /* 가장 작은 크기로 설정 */
}

/* 그리드 헤더 행(라벨 행): 배경색 없음 */
igc-grid {
    --header-background: transparent;
}

.hora-size-medium {
    --ig-size: var(--ig-size-medium); /* 중간 크기로 설정 */
}

.hora-size-large {
    --ig-size: var(--ig-size-large); /* 큰 크기로 설정 (기본값일 수 있음) */
}

/* =================================================================== */
/* === IgbButton 테마 최종 솔루션 (Variant 호환) === */
/* =================================================================== */

/* 1. 각 테마별로 사용할 색상 변수를 먼저 정의합니다. */
igc-button.hora-btn-primary {
    --btn-bg: #0d6efd;
    --btn-hover: #0b5ed7;
    --btn-active: #0a58ca;
    --btn-text: white;
}

igc-button.hora-btn-secondary {
    --btn-bg: #6c757d;
    --btn-hover: #5c636a;
    --btn-active: #565e64;
    --btn-text: white;
}

igc-button.hora-btn-success {
    --btn-bg: #198754;
    --btn-hover: #157347;
    --btn-active: #146c43;
    --btn-text: white;
}

igc-button.hora-btn-info {
    --btn-bg: #0dcaf0; /* 기본 배경색 (Bootstrap info) */
    --btn-hover: #31d2f2; /* hover 시 더 밝게 */
    --btn-active: #0ba5c0; /* active 시 약간 어둡게 */
    --btn-text: black; /* 텍스트는 가독성을 위해 검정 */
}

igc-button.hora-btn-warning {
    --btn-bg: #ffc107;
    --btn-hover: #e0a800;
    --btn-active: #d39e00;
    --btn-text: black; 
}

igc-button.hora-btn-danger {
    --btn-bg: #dc3545;
    --btn-hover: #bb2d3b;
    --btn-active: #b02a37;
    --btn-text: white;
}

/* 2. ::part(base)를 사용하여 위에서 정의한 변수로 스타일을 직접, 강제로 적용합니다. */
/* 기본 상태 */
igc-button[class*="hora-btn-"]::part(base) {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: none !important; /* 기본 테두리 제거 */
    transition: background-color 0.2s ease-in-out; /* 부드러운 색상 전환 효과 */
}

/* 마우스를 올렸을 때 (hover) */
igc-button[class*="hora-btn-"]:hover::part(base) {
    background-color: var(--btn-hover) !important;
}

/* 클릭했을 때 (active) */
igc-button[class*="hora-btn-"]:active::part(base) {
    background-color: var(--btn-active) !important;
}

/* .hora-btn-compact 클래스가 적용된 버튼의 내부(base)를 직접 제어합니다. */
igc-button.hora-btn-compact::part(base) {
    /* [핵심] 1. 버튼의 기본 최소 너비 제한을 해제합니다. */
    min-width: unset;
    /* [핵심] 2. 좌우 내부 여백(padding)을 줄여 너비를 조절합니다. */
    padding-left: 10px;
    padding-right: 10px;
    /* (선택) 아이콘만 있는 정사각형 버튼을 원할 경우 아래 주석을 해제하세요. */
    /*
    width: 36px;
    height: 36px;
    padding: 0;
    */
}

.hora-branch-with-auto > [name="hora-control"] {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 100%;
}

/* 'PopupBtn' 클래스를 가진 igx-grid-header-group의 
		직속 자식인 제목(div)과 드롭 인디케이터(span)를 숨깁니다. */
igx-grid-header-group.PopupBtnGrp > .igx-grid-thead__title,
igx-grid-header-group.PopupBtnGrp > .igx-grid-th__drop-indicator-left {
    display: none !important;
}

igc-button.hora-btn-grid::part(base) {
    /* [핵심] 1. 버튼의 기본 최소 너비 제한을 해제합니다. */
    min-width: unset;
    /* [핵심] 2. 좌우 내부 여백(padding)을 줄여 너비를 조절합니다. */
    padding-left: 8px;
    padding-right: 8px;
    /* (선택) 아이콘만 있는 정사각형 버튼을 원할 경우 아래 주석을 해제하세요. */
    /*
    width: 36px;
    height: 36px;
    padding: 0;
    */
}


/* 타이틀 바 스타일 (높이 35px) */
igc-dialog.hora-dailog::part(title) {
    background-color: #0078D7; /* 기본 Primary 색상 (파란색) */
    color: white;
    font-size: 14px;
    height: 35px; /* 높이 설정 */
    display: flex;
    align-items: center;
    padding: 0 10px;
}

igc-dialog.hora-dialog-primary::part(title) {
    background-color: #0d6efd; /* Primary 색상 (파란색) */
    color: white;
}

igc-dialog.hora-dialog-secondary::part(title),
igc-dialog.hora-dialog-confirm::part(title) {
    background-color: #6c757d; /* secondary 색상 (회색) */
    color: white;
}

igc-dialog.hora-dialog-success::part(title) {
    background-color: #198754; /* Success 색상 (초록색) */
    color: white;
}

igc-dialog.hora-dialog-warning::part(title) {
    background-color: #ffc107; /* Warning 색상 (노란색) */
    color: #000; /* 어두운 글자색 */
}

igc-dialog.hora-dialog-info::part(title) {
    background-color: #0dcaf0; /* info 색상 (밝은 파란색) */
    color: white;
}

igc-dialog.hora-dialog-danger::part(title) {
    background-color: #dc3545; /* Danger 색상 (빨간색) */
    color: white;
}

/* footer 스타일 (높이 35px) */
igc-dialog.hora-dailog::part(footer) {
    font-size: 14px;
    height: 40px; /* 높이 설정 */
    padding: 0 10px;
}

igc-button.hora-dailog::part(base) {
    font-size: 14px;
    padding: 4px 12px;
    height: 35px;
    min-width: unset; /* 기본 넓이 제한 해제 */
}

/* IgbDialog hora-dialog-secondary 공통 팝업: 일반/모달 화면 동일 크기 (높이 600px) */
.hora-popup-content {
    width: 600px !important;
    height: 600px !important;
    min-height: 600px;
    max-height: 600px;
}
.hora-popup-content-wide {
    width: 800px !important;
    height: 600px !important;
    min-height: 600px;
    max-height: 600px;
}

/* 우측 리스트박스 패널 자리 (접수구분/접수상세 등 선택 패널 표시) */
.hora-right-panel-placeholder {
    background: var(--ig-gray-50, #f9fafb);
    border-left: 1px solid var(--ig-gray-300, #d1d5db);
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

/* 우측 패널용 ERP Minor 선택 (접수구분 등 - 모달 대신 인라인 표시) */
.hora-erp-minor-panel {
    min-width: 320px;
    max-width: 380px;
    background: var(--ig-gray-50, #f9fafb);
    border-left: 1px solid var(--ig-gray-300, #d1d5db);
    padding: 12px;
}
.hora-erp-minor-panel-content {
    height: 100%;
    min-height: 200px;
}

/* 라벨 영역 스타일링 (IgbInput의 prefix와 동일하게 - 배경과 왼쪽 둥근 테두리) */
.label-prefix {
    background-color: var(--ig-input-prefix-background, #dde0e4); /* 회색 배경 */
    font-size: 14px;
    color: var(--ig-input-prefix-text-color, #333); /* 글자색 */
    padding: var(--ig-input-prefix-padding, 0.25rem 0.5rem);
    white-space: nowrap; /* 라벨이 줄바꿈 되지 않도록 */
    display: flex;
    align-items: center; /* 텍스트 수직 중앙 정렬 */
    height: 100%; /* 부모 wrapper 높이에 맞추기 */
    /* **여기에 왼쪽 모서리만 둥글게 적용** */
    border-top-left-radius: var(--ig-input-border-radius, 4px);
    border-bottom-left-radius: var(--ig-input-border-radius, 4px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    /* border도 label-prefix에만 적용 */
    border: var(--ig-input-border-width, 1px) solid var(--ig-input-border-color, #ccc); /* 오른쪽 테두리만 */
    border-color: var(--ig-gray-400);
}

    .label-prefix[disabled] {
        /* 일반 레이블과 동일하게 표시 */
        pointer-events: none;
    }

/* Disabled 입력 필드도 일반 텍스트처럼 보이게 */
igc-input[disabled]::part(input) {
    color: var(--ig-gray-800);
    -webkit-text-fill-color: var(--ig-gray-800);
    opacity: 1;
}

igc-input[disabled]::part(container) {
    background: var(--ig-gray-100);
}

/* Disabled Textarea도 다른 입력 필드와 동일한 색상 */
igc-textarea[disabled]::part(input) {
    color: var(--ig-gray-800);
    -webkit-text-fill-color: var(--ig-gray-800);
    opacity: 1;
}

igc-textarea[disabled]::part(container) {
    background: var(--ig-gray-100);
}

/* Disabled 날짜 필드도 일반 텍스트처럼 보이게 */
igc-date-picker[disabled]::part(input) {
    color: var(--ig-gray-800);
    -webkit-text-fill-color: var(--ig-gray-800);
    opacity: 1;
}

igc-date-picker[disabled] input {
    color: var(--ig-gray-800) !important;
    -webkit-text-fill-color: var(--ig-gray-800) !important;
    opacity: 1 !important;
}

/* Disabled Select 필드도 일반 텍스트처럼 보이게 */
igc-select[disabled]::part(input) {
    color: var(--ig-gray-800);
    -webkit-text-fill-color: var(--ig-gray-800);
    opacity: 1;
}

/* Disabled Radio 버튼도 일반 텍스트처럼 보이게 */
igc-radio[disabled]::part(label) {
    color: var(--ig-gray-800);
    opacity: 1;
}

i.bi[disabled] {
    background: var(--ig-gray-200);
}

/* 개별 라디오 버튼의 레이블과 원 사이 간격 */
igc-radio {
    --ig-radio-label-spacing: 4px;
}

/* 좁은 컬럼에서 라벨이 글자 단위로 세로 쌓이지 않도록 (한 줄, 버튼 우측) */
igc-radio::part(label) {
    white-space: nowrap;
}

/* HoraRadio 행에서 그룹이 찌그러지며 라벨이 세로로 깨지는 것 방지 */
[name="hora-control"] .d-flex.align-items-center.gap-2 igc-radio-group {
    flex-shrink: 0;
}

.scrollable-dropdown::part(list) {
    max-height: 300px; /* 드롭다운 메뉴의 최대 높이를 200px로 제한 */
    overflow-y: auto; /* 내용이 최대 높이를 넘어서면 세로 스크롤바를 자동으로 생성 */
}

/* 리스트박스 드롭다운이 아래로 펼쳐지도록 */
.dropdown-below::part(list) {
    top: 100%;
    bottom: auto;
}

/* 디버깅용 색상 (개발 중 임시) */
.bg-debug-page {
    background-color: blue; /* 파랑 */
}

.bg-debug-main {
    background-color: orange; /* 오렌지 */
}

.bg-debug-article {
    background-color: purple; /* 보라 */    
}

.bg-debug-outer {
    background-color: green; /* 초록 */
}

.bg-debug-grid {
    background-color: red; /* 빨강 */
}


igc-button.margin:not(:first-of-type) {
    margin-left: 5px;
    
}
igc-button[disabled]::part(base) {
    background:#afafaf !important;
    color:#e0e0e0 !important;
}
 
.hora-label {
    width: 112px;
    height: 31px;
}

.hora-lr-none::part(input) {
    border-start-start-radius: 0px;
    border-end-start-radius: 0px;
    border-left: none;
}

/* 특이사항/메모 등 읽기전용 표시: 콘텐츠 높이만큼만 표시 (빈 공간 없음), 라벨도 데이터 높이에 맞춤 */
.hora-memo-display-row .label-prefix {
    min-height: 1.5em;
    height: auto;
    align-self: stretch;
}
.hora-memo-display-row .hora-content-fit {
    height: fit-content;
    min-height: 1.5em;
    align-self: flex-start;
}

/* 특이사항 등 textarea: 라벨과 동일 높이, 입력 필드와 연결 */
.hora-textarea-row .label-prefix {
    min-height: 600px;
    height: 600px;
}
.hora-textarea-row igc-textarea,
.hora-textarea-field {
    display: block !important;
    height: 600px !important;
    min-height: 600px !important;
}
.hora-textarea-row igc-textarea::part(container),
.hora-textarea-field::part(container) {
    height: 600px !important;
    min-height: 600px !important;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-left: none;
}
.hora-textarea-row igc-textarea::part(input),
.hora-textarea-field::part(input) {
    height: 100% !important;
    min-height: 568px !important;
}
.hora-textarea-row igc-textarea textarea,
.hora-textarea-row igc-textarea .ig-input-group,
.hora-textarea-row igc-textarea .ig-input-group__bundle {
    height: 100% !important;
    min-height: 568px !important;
}
/* horaDateTime, horaDateTerm 관련 css */
div[name="hora-control"]>div>div:first-of-type igc-date-picker::part(prefix) {
    border-left: none;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.hora-lp {
    padding-left: 3px;
}

.scrollable-dropdown-300::part(list) {
    max-height: 300px; /* 드롭다운 메뉴의 최대 높이를 300px로 제한 */
    overflow-y: auto; /* 내용이 최대 높이를 넘어서면 세로 스크롤바를 자동으로 생성 */
}

.scrollable-dropdown-150::part(list) {
    max-height: 150px; /* 드롭다운 메뉴의 최대 높이를 150px로 제한 */
    overflow-y: auto; /* 내용이 최대 높이를 넘어서면 세로 스크롤바를 자동으로 생성 */
}

/* ========================================
   웹 컴포넌트 FOUC(깜빡임) 방지
   컴포넌트가 정의되기 전에 숨김 처리
   ======================================== */
igc-button:not(:defined),
igc-input:not(:defined),
igc-select:not(:defined),
igc-date-picker:not(:defined),
igc-radio:not(:defined),
igc-radio-group:not(:defined) {
    visibility: hidden;
}

/* ===== 상태 배지 공통 스타일 (라운드 버튼 형태) ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* ===== WorkStatus별 개별 스타일 ===== */

/* C - 예약완료 (파란색) */
.status-C {
    background-color: #368AFF;
    color: #FFFFFF;
}

/* D - 작업완료 (녹색) */
.status-D {
    background-color: #59DA50;
    color: #006100;
}

/* H - 설치완료 (녹색) */
.status-H {
    background-color: #59DA50;
    color: #006100;
}

/* F - 작업취소 (빨간색) */
.status-F {
    background-color: #FF7171;
    color: #FFFFFF;
}

/* G - 설치불가 (빨간색) */
.status-G {
    background-color: #FF7171;
    color: #FFFFFF;
}

/* 기타 - 기본 스타일 (회색) */
.status-default {
    background-color: #E0E0E0;
    color: #333333;
}

/* ========================================
   AS 이전데이터참조 모달 (ASReqInfo Detail 등에서 사용)
   ======================================== */
.asreq-add-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    justify-content: center;
    align-items: center;
}
.asreq-add-modal-overlay.show {
    display: flex;
    opacity: 1;
}
.asreq-add-modal-panel {
    width: 90%;
    max-width: 1400px;
    height: 90%;
    max-height: 900px;
    background-color: white;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 10000;
}
.asreq-add-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.asreq-add-modal-iframe {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: 0 0 12px 12px;
}

/* ========================================
   AS 접수등록 상세 - 한 화면 컴팩트 레이아웃
   ======================================== */
.asreq-compact-card {
    padding: 0.5rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.asreq-compact-form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px 6px;
    font-size: 0.75rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}
.asreq-cf {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.asreq-cf label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asreq-cf label .req {
    color: #dc2626;
    margin-right: 1px;
}
.asreq-cf input,
.asreq-cf select,
.asreq-cf textarea {
    height: 24px;
    padding: 0 4px;
    font-size: 0.85rem;
    color: #212529;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}
.asreq-cf input:disabled,
.asreq-cf select:disabled,
.asreq-cf textarea:disabled {
    background: #f3f4f6;
    color: #6b7280;
}
.asreq-cf textarea {
    height: 48px;
    resize: vertical;
    min-height: 36px;
}
.asreq-cf-amount input {
    text-align: right;
}
/* 특이사항 조회 시: 데이터 길이만큼 높이 자동 조절 (휴렉고객이력정보조회 상세와 동일) */
.asreq-memo-content-fit {
    height: fit-content;
    min-height: 1.5em;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 4px 8px;
    font-size: 0.85rem;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}
.asreq-cf-popup {
    cursor: pointer;
    position: relative;
}
.asreq-cf-popup:not(.disabled):hover {
    background: #f9fafb;
}
.asreq-cf-popup .asreq-cf-input-wrap {
    display: flex;
    align-items: stretch;
}
.asreq-cf-popup .asreq-cf-input-wrap input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.asreq-cf-popup .asreq-cf-btn {
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 4px 4px 0;
    font-size: 0.7rem;
}
.asreq-cf-popup.disabled {
    cursor: default;
}
.asreq-cf-radio {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.asreq-cf-radio label {
    margin-bottom: 0;
}
.asreq-cf-radio .radio-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.asreq-cf-span-2 { grid-column: span 2; }
.asreq-cf-span-3 { grid-column: span 3; }
.asreq-cf-span-4 { grid-column: span 4; }
.asreq-cf-span-5 { grid-column: span 5; }
.asreq-cf-span-6 { grid-column: span 6; }
.asreq-cf-newrow { grid-column: 1; }
.asreq-compact-section {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e5e7eb;
}
.asreq-compact-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.asreq-compact-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.asreq-compact-btns button {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    cursor: pointer;
}
.asreq-compact-btns .btn-primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.asreq-compact-btns .btn-success { background: #22c55e; color: #fff; border-color: #22c55e; }
.asreq-compact-btns .btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.asreq-compact-btns .btn-secondary { background: #f3f4f6; color: #374151; }

/* HTML 테이블 컬럼 리사이즈 (공통) */
table.sor-table--resizable.sor-table--layout-fixed {
    table-layout: fixed;
}

table.sor-table--resizable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8fafc;
}

table.sor-table--resizable thead th.sor-th-filter-open {
    z-index: 50;
}

.sor-col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 4;
    touch-action: none;
}

.sor-col-resize-handle:hover,
.sor-col-resize-handle.sor-col-resize-handle--active {
    background: rgba(99, 102, 241, 0.35);
}

body.sor-col-resizing,
body.sor-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}