/* í—¤ë" ìŠ¤íƒ€ì¼ */
#krds-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-in {
    width: 100%;
}

.header-container {
    background: #fff;
}

.header-container .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-branding {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 20px;
}

.hamburger-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger-menu-btn span {
    width: 100%;
    height: 2px;
    background: #374151;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.hamburger-menu-btn:hover span {
    background: #007bff;
}

.left h2 {
    margin: 0;
    font-size: 18px;
}

.krds-breadcrumb-wrap {
    margin-left: auto;
}

.breadcrumb {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin: 0 8px;
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #0056b3;
}

.hamburger-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 999;
}

.hamburger-menu-dropdown.show {
    display: block;
}

/* ===== AG Grid 공통 기본값 =====
   기본 높이는 600px (header 32 + row 28 × 20 = 592, 20행 기준).
   페이지에서 다른 크기가 필요하면 아래 수정자 클래스를 붙인다.
   dual-grid 안에 있을 때는 하단의 .dual-grid-container 규칙이 우선해서
   master 쪽 그리드가 컨테이너를 채우도록 한다. */
.ag-theme-alpine {
    --ag-header-height: 32px;
    --ag-row-height: 28px;
    --ag-font-size: var(--font-size-base);
    --ag-font-family: var(--font-family-base);
    --ag-borders: 1px;
    width: 100%;
    height: 600px;
}

.ag-theme-alpine.grid-h-sm { height: 400px; }
.ag-theme-alpine.grid-h-md { height: 500px; }
.ag-theme-alpine.grid-h-lg { height: 600px; }
.ag-theme-alpine.grid-h-xl { height: 700px; }

.conts-area {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
}

.heading-large {
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.page-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    background: #f8f9fa;
}

.page-tab {
    padding: 6px 16px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-bottom: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.page-tab.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.page-tab:hover:not(.active) {
    background: #e9ecef;
}

.search-filter-bar {
    background: #f8f9fa;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 엑셀 다운로드처럼 search-filter-bar 끝쪽으로 밀어내는 액션 버튼.
   조회/초기화(.btn-container) 바로 옆에 붙어있어 실수 클릭이 우려되는 경우 사용.
   .btn-container 자체는 자연 위치를 유지(룰), .excel-action 만 우측 끝으로 분리한다. */
.search-filter-bar > .excel-action {
    margin-left: auto;
}

/* .excel-action 자체 색상 — Excel 식별성 위해 초록(office green) 계열로 차별화.
   조회(파랑) / 초기화(회색) 와 시각적으로 구분되어 실수 클릭 줄임. */
.excel-action,
button.excel-action {
    background-color: #1f7a3a;
    border-color: #1f7a3a;
    color: #ffffff;
}

.excel-action:hover,
button.excel-action:hover {
    background-color: #185f2c;
    border-color: #185f2c;
    color: #ffffff;
}

.filter-item label {
    font-size: 12px;
    font-weight: 500;
    min-width: 50px;
}

.krds-form-select.small {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 80px;
}

.krds-form-input.small {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 150px;
    outline: none;
}

.krds-form-input.small:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 검색 필터 바 안의 초기화/조회 버튼 컨테이너
 * margin-left: auto / justify-content: flex-end 금지 — 버튼은 필터 항목 바로 뒤
 * 자연스러운 순서로 배치되어야 한다. (사용자 동선 — 마지막 필드 → 조회 클릭) */
.btn-container {
    display: flex;
    gap: 6px;
}

.krds-btn.small {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #007bff;
    background: #007bff;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.krds-btn.small:hover {
    background: #0056b3;
}

.krds-btn.small:first-child {
    background: #6c757d;
    border-color: #6c757d;
}

.krds-btn.small:first-child:hover {
    background: #545b62;
}

/* Dual Grid Container */
/*.dual-grid-container {*/
/*    display: flex;*/
/*    gap: 15px;*/
/*    height: auto;*/
/*    margin-top: 0;*/
/*}*/

/* dual-grid-container — 고정 높이. 왼쪽(master) 이 기준이고, 오른쪽(detail)
   내용이 넘치면 자체 스크롤. align-items: stretch 로 두 컬럼 높이가 맞춰짐. */
.dual-grid-container {
    display: flex;
    gap: 15px;
    height: 750px;
    align-items: stretch;
    margin-top: 0;
}

/* =========================================================
 * Single Grid 표준 구조 (모든 single-grid 페이지 공통)
 *   <div class="conts-area">
 *     <div class="search-filter-bar">…</div>            ← 옵션, 형제
 *     <div class="head-btn-group">…</div>               ← 옵션, 형제
 *
 *     <div class="single-grid-container">                ← 그리드 박스 wrapper
 *       <div class="single-grid">
 *         <div class="grid-wrapper">
 *           <div class="grid-header-new">…</div>         ← 옵션
 *           <div class="grid-content">
 *             <div id="xxxGrid" class="ag-theme-alpine grid-h-lg"></div>
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *
 *     <div th:replace="fragments/common/pagingBar :: pagingBar(...)"></div>  ← 옵션, 형제
 *   </div>
 *
 * - single-grid-container 는 외곽 sizing 컨테이너 (투명, 룩 없음). dual-grid-container 와 동일 사상.
 * - .single-grid 가 흰 박스 + 라운드 코너 룩 담당. master-grid 룩과 동일.
 * - grid-wrapper / grid-content / grid-header-new 는 dual-grid 와 같은 룰 재사용.
 * - 검색 필터 바 / 액션 버튼 / 페이징은 single-grid-container 의 형제(.conts-area 직속) 로 둔다.
 *   dual-grid 와 동일하게 그리드 컨테이너는 그리드 박스만 감싸는 책임.
 * ========================================================= */

.single-grid-container {
    width: 100%;
    height: auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

/* container 안의 "박스 컨테이너"만 border-radius: 0 — dual-grid-container 와 같은 사상.
   input/select/button/checkbox/radio/모달 등 컨트롤은 영향 없음. */
.single-grid-container,
.single-grid-container .single-grid,
.single-grid-container .grid-wrapper,
.single-grid-container .grid-content,
.single-grid-container .grid-header-new,
.single-grid-container .pagination-bar-container {
    border-radius: 0;
}

/* 그리드 룩 박스 — master-grid 와 동일 룩 (흰 배경, 내부 flex 체인, overflow 통제) */
.single-grid-container > .single-grid {
    flex: 1 1 auto;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 내부 체인 — flex sizing. height: 100% 추가 금지(ResizeObserver 충돌). */
.single-grid-container > .single-grid > .grid-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* grid-content — AG Grid 의 absolute positioning 기준점 (필요시).
   single-grid 의 AG Grid 는 .grid-h-* 로 고정 높이 사용이 기본이라
   absolute fill 은 안 한다 (dual-grid 와 다른 점). */
.single-grid-container > .single-grid > .grid-wrapper > .grid-content {
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0;
    min-height: 0;
}

/* container 의 직속 자식들 사이 간격 — search-filter-bar/head-btn-group 자체
   margin-bottom 을 살리기 위해 gap 사용 안 함. 마지막 자식 margin-bottom 은 제거. */
.single-grid-container > *:last-child {
    margin-bottom: 0;
}

/* ============================================================
   레거시 호환 — .single-grid 없이 .single-grid-container 직속 자식이
   .grid-wrapper 인 경우(과거 일부 페이지). master-grid 룩으로 fallback.
   ============================================================ */
.single-grid-container > .grid-wrapper {
    flex: 1 1 auto;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* =========================================================
 * Dual Grid 표준 구조 (모든 dual-grid 페이지 공통)
 *   <div class="dual-grid-container">
 *     <div class="master-grid-section">     ← 좌(40%) 외곽
 *       <div class="master-grid">…</div>    ← 좌 그리드 박스
 *       [페이지 한정: 페이징/카운트 등 추가 영역]
 *     </div>
 *     <div class="detail-grid-section">     ← 우(나머지) 외곽
 *       <div class="detail-grid">…</div>    ← 우 그리드 박스
 *       [페이지 한정: 페이징/카운트 등 추가 영역]
 *     </div>
 *   </div>
 *
 * - section 이 sizing/spacing 담당, grid 박스는 룩(배경/라디우스/내용 레이아웃)만.
 * - master / detail 의 룩은 동일 (다른 점은 좌/우 너비 비율뿐).
 * - .detail-grid 가 master-grid-section 없이 dual-grid-container 의 직속 자식이어도
 *   호환되게 fallback 룰을 둔다 (레거시 페이지 대응).
 * ========================================================= */

/* dual-grid 컨테이너 안에서 master section 밑에 붙는 footer(페이징/카운트) 의 표준 높이.
   필요하면 페이지에서 .dual-grid-container { --dual-grid-footer-h: NNpx } 로 오버라이드. */
.dual-grid-container {
    --dual-grid-footer-h: 36px;
}

/* dual-grid-container 안의 "박스 컨테이너"만 border-radius: 0 — 라운드 코너로 끝부분이
   잘려 보이는 문제 방지. input/select/button/checkbox/radio/모달 등 컨트롤은 영향 없음.
   이후 필요한 컨테이너만 개별적으로 다시 radius 부여. */
.dual-grid-container,
.dual-grid-container .master-grid-section,
.dual-grid-container .detail-grid-section,
.dual-grid-container .master-grid,
.dual-grid-container .detail-grid,
.dual-grid-container .detail-panel,
.dual-grid-container .detail-panel-header,
.dual-grid-container .detail-panel-body,
.dual-grid-container .detail-panel-footer,
.dual-grid-container .grid-wrapper,
.dual-grid-container .grid-content,
.dual-grid-container .grid-header-new,
.dual-grid-container .pagination-bar-container,
.dual-grid-container .detail-count-info,
.dual-grid-container .three-point-area,
.dual-grid-container .info-box,
.dual-grid-container .info-box-right {
    border-radius: 0;
}

/* 외곽 wrapper — sizing 담당. 두 section 의 레이아웃은 완전히 동일하게 둔다. */
.master-grid-section,
.detail-grid-section {
    display: flex;
    flex-direction: column;
    /*gap: 10px;*/
}

.master-grid-section {
    flex: 0 0 calc(40% - 9px);
    min-width: 300px;
}

.detail-grid-section {
    flex: 1 1 auto;
    min-width: 0;
}

/* detail-grid (실제 AG Grid) 가 단독으로 들어있는 경우만 master-grid 와 동일하게
   footer 공간 placeholder 추가. detail-panel / three-point-area 는 자체 footer 가
   있어서 section 전체를 채우는 게 정답이라 placeholder 없음. */
.detail-grid-section:has(> .detail-grid):not(:has(> *:not(.detail-grid)))::after {
    content: "";
    display: block;
    height: var(--dual-grid-footer-h);
    flex: 0 0 auto;
}

/* detail-grid 옆/밑에 붙는 카운트 정보 — master-grid 의 pagingBar 와 같은 footer 높이로 통일.
   이 덕분에 detail-grid 박스 자체의 높이가 master-grid 와 정확히 일치한다. */
.detail-count-info {
    flex: 0 0 auto;
    height: var(--dual-grid-footer-h);
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: var(--font-size-base);
    color: var(--color-reset);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* 그리드 박스 — 실제 AG Grid 가 들어가는 컨테이너. 룩은 master/detail 동일.
   ⚠ .detail-grid 는 안에 실제 그리드(.ag-theme-alpine)가 있을 때만 사용한다.
      상세 폼/정보 패널은 아래 .detail-panel 사용. */
.master-grid,
.detail-grid {
    flex: 1 1 0;
    background: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 내부 체인 — flex 사이징만 사용 (height: 100% 추가 금지: ResizeObserver 와 충돌해 깜빡임 유발) */
.master-grid .grid-wrapper,
.detail-grid .grid-wrapper {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* grid-content 는 AG Grid 의 absolute positioning 기준점이 된다 (position: relative) */
.master-grid .grid-content,
.detail-grid .grid-content {
    flex: 1 1 0;
    overflow: hidden;
    padding: 0;
    min-height: 0;
    position: relative;
}

/* dual-grid 안의 AG Grid — 부모(grid-content)에 absolute 로 꽂아 정확히 채운다.
   flex height 와 ResizeObserver 가 양방향 의존을 만들지 않도록 분리. */
.dual-grid-container .master-grid .grid-content > .ag-theme-alpine,
.dual-grid-container .detail-grid .grid-content > .ag-theme-alpine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
}

/* =========================================================
 * 상세 패널 (detail-panel) — detail-grid-section 안에 실제 AG Grid 가 아닌
 * 폼/정보 테이블/카드를 둘 때 사용. detail-grid 와 외곽 sizing 은 동일하지만
 * - overflow: auto (폼이 길어져도 패널 안에서 스크롤)
 * - 안쪽 padding 으로 폼 여백 확보
 * - section-header / section-body / section-footer 와 함께 쓸 수 있음
 *
 * HTML 패턴:
 *   <div class="detail-grid-section">
 *     <div class="detail-panel">
 *       <div class="detail-panel-header">제목</div>     ← 옵션
 *       <div class="detail-panel-body">…폼/정보…</div>  ← 본문 (스크롤)
 *       <div class="detail-panel-footer">…버튼…</div>   ← 옵션
 *     </div>
 *   </div>
 *
 *   기존 페이지가 .grid-wrapper / .inputFormContainer 등으로 감싸도 호환되도록
 *   두 패턴 모두 .detail-panel 의 자식이면 동일 동작.
 * ========================================================= */
.detail-panel {
    flex: 1;
    background: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 헤더 — 제목/요약/액션 (sticky) */
.detail-panel-header {
    flex: 0 0 auto;
    margin-bottom: 2px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 2px solid #3b6fc9;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

/* 본문 — 스크롤 가능, 폼/카드 padding.
   외곽 보더는 detail-panel-body 가 담당 (안의 info-table 은 외곽 보더 제거해 두 줄 겹침 방지). */
.detail-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    /*padding: 7px;*/
    min-height: 0;
    /*border: 1px solid var(--color-border);*/
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

/* ============================================================
   detail-panel 표준 자식 컴포넌트 — 모든 페이지가 동일한 패턴 사용
   ------------------------------------------------------------
   <div class="detail-panel-body">
     <div class="detail-panel-toolbar"> 등록바/액션바 (한 줄) </div>
     <div class="detail-panel-empty"> 선택 전 안내 placeholder </div>
     <div class="detail-panel-section">
       <div class="detail-panel-section-title">섹션 제목</div>
       <table class="info-table">…</table>
     </div>
     <div class="detail-panel-section">
       <div class="detail-panel-section-title">또 다른 섹션</div>
       <div class="detail-panel-section-body">…자유 컨텐츠…</div>
     </div>
   </div>
   ============================================================ */

/* 툴바 — 한 줄에 셀렉트/입력/버튼이 inline 으로 배치 (등록바, 검색바 등) */
.detail-panel-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    overflow-x: auto;
    flex-wrap: nowrap;
    min-height: 40px;
    box-sizing: border-box;
}

/* toolbar 안의 컨트롤 — detail-panel input/select { width: 100% } 룰 무력화 */
.detail-panel-toolbar input,
.detail-panel-toolbar select,
.detail-panel-toolbar button,
.detail-panel-toolbar label {
    width: auto;
    flex: 0 0 auto;
}

/* 빈 상태 안내 — 선택 전 placeholder. utility.css 의 .empty-state 와 동일 룩 */
.detail-panel-empty {
    flex: 0 0 auto;
    padding: 32px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    background: var(--color-bg-alt);
    border: 1px dashed var(--color-border-strong);
}

/* 섹션 카드 — 제목 + 본문 묶음. 같은 detail-panel-body 안에 여러 개 stack 가능 */
.detail-panel-section {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg);
    overflow: hidden;
}

/* 같은 detail-panel-body 안의 섹션끼리는 14px 간격 — 마지막 섹션은 0 */
.detail-panel-section + .detail-panel-section {
    margin-top: 14px;
}

/* 헤더 — admin-header(#0E1E3D) 와 같은 네이비 계열이지만 톤 다운한 슬레이트(#3d4a5c).
   같은 패밀리로 일관성을 주되 진하기를 낮춰 눈에 부담 적게.
   글자는 흰색, 좌측 인디케이터는 admin-header 의 액센트 틸(#20c997). */
.detail-panel-section-title {
    padding: 8px 14px;
    background: #3d4a5c;
    border-bottom: 1px solid #4a5a72;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.3;
}

/* 좌측 인디케이터 — admin-header 의 active 액센트(틸 #20c997) */
.detail-panel-section-title > :first-child {
    position: relative;
    padding-left: 12px;
    color: #ffffff;
}

.detail-panel-section-title > :first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: #20c997;
    border-radius: 2px;
}

/* 섹션 본문 — info-table 직접 두면 외곽 보더 제거 처리(아래 룰)됨 */
.detail-panel-section-body {
    padding: 10px 12px;
}

/* 섹션 안의 detail-panel-table — section-title 의 border-bottom 과 섹션 외곽 보더가
   이미 박스 역할을 하므로, 직속 자식 테이블은 자체 외곽 보더를 제거해 보더가 겹치지 않게.
   (이전엔 section-title 의 border-bottom 과 table 의 border-top 이 겹쳐 2px처럼 보였음.) */
.detail-panel-section > .detail-panel-table {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* 마지막 행의 border-bottom 도 섹션 외곽선과 겹치므로 제거 */
.detail-panel-section > .detail-panel-table > tbody > tr:last-child > th,
.detail-panel-section > .detail-panel-table > tbody > tr:last-child > td,
.detail-panel-section > .detail-panel-table > tr:last-child > th,
.detail-panel-section > .detail-panel-table > tr:last-child > td {
    border-bottom: 0;
}

/* section-body 로 한 번 감싼 테이블은 body padding 으로 떨어져 있으므로 자체 보더 유지 */
.detail-panel-section .detail-panel-section-body > .detail-panel-table {
    margin: 0;
}

/* ============================================================
   .detail-panel-table — detail-panel 전용 테이블 클래스
   ------------------------------------------------------------
   기존 .info-table 은 다른 페이지(고객 상세 등) 에서 쓰여서 detail-panel 의
   변경이 사이드 이펙트 → detail-panel 안에서는 이 클래스를 사용한다.
   완전 자기완결적 — 외부 .info-table 룰과 독립.
   ============================================================ */

.detail-panel-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: var(--font-size-base);
    background: var(--color-bg);
    /* colgroup 의 col width 가 적용되도록 fixed.
       colgroup 가 없으면 첫 행의 th width(25%) + td(auto) 로 분배 — 2-col 도 OK. */
    table-layout: fixed;
    border: 1px solid #ddd;
}

.detail-panel-table th,
.detail-panel-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    text-align: left;
    color: var(--color-text);
    line-height: 1.5;
}

.detail-panel-table tr:last-child th,
.detail-panel-table tr:last-child td {
    border-bottom: 0;
}

.detail-panel-table th {
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    width: 25%;
    min-width: 110px;
    border-right: 1px solid var(--color-border);
    white-space: nowrap;
}

/* 4-col(th|td|th|td) 구조 지원 — 중간 td 의 우측 세로 보더.
   2-col(th|td) 는 td 가 :last-child 라 보더 없음(기존 동작 유지). */
.detail-panel-table td:not(:last-child) {
    border-right: 1px solid var(--color-border);
}

/* td 안의 폼 컨트롤 — 한 줄 inline 배치 (detail-panel input/select width:100% 룰 무력화) */
.detail-panel-table td {
    white-space: nowrap;
}

.detail-panel-table td input,
.detail-panel-table td select,
.detail-panel-table td textarea,
.detail-panel-table td button,
.detail-panel-table td label,
.detail-panel-table td .file-picker-btn {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.detail-panel-table td > * + * {
    margin-left: 6px;
}

/* Quill 에디터(.ql-toolbar + .ql-container)는 td 안에서 sibling 으로 들어가지만
 * 컨트롤 간격용 margin-left 가 어울리지 않으므로 제외 */
.detail-panel-table td > .ql-toolbar,
.detail-panel-table td > .ql-container {
    margin-left: 0;
    display: block;
}

.detail-panel-table td input[type="text"],
.detail-panel-table td input[type="email"],
.detail-panel-table td input[type="tel"],
.detail-panel-table td input[type="url"],
.detail-panel-table td input[type="search"],
.detail-panel-table td input[type="password"] {
    width: 220px;
    max-width: 100%;
}

.detail-panel-table td input[type="number"],
.detail-panel-table td input[type="date"],
.detail-panel-table td input[type="time"],
.detail-panel-table td input[type="datetime-local"] {
    width: auto;
    min-width: 130px;
}

.detail-panel-table td select {
    width: auto;
    min-width: 100px;
}

.detail-panel-table td textarea {
    width: 100%;
    display: block;
    white-space: pre-wrap;
}

.detail-panel-table td > input[type="hidden"],
.detail-panel-table td > .error:empty {
    margin-left: 0;
}

/* 명시적 "한 줄 채우기" 가 필요한 경우 .fill 클래스 사용 */
.detail-panel-table td input.fill,
.detail-panel-table td select.fill,
.detail-panel-table td .form-control.fill {
    width: 100%;
    display: block;
    margin-left: 0;
}

/* detail-panel-body / title-table-wrap 직속 자식 (섹션 밖) 의 경우만 외곽 보더 제거.
   detail-panel-section 안의 .detail-panel-table 은 자체 보더를 유지한다. */
.detail-panel-body > .detail-panel-table,
.detail-panel .title-table-wrap > .detail-panel-table {
    border: 0;
}

.detail-panel-body > .detail-panel-table tr:first-child th,
.detail-panel-body > .detail-panel-table tr:first-child td,
.detail-panel .title-table-wrap .detail-panel-table tr:first-child th,
.detail-panel .title-table-wrap .detail-panel-table tr:first-child td {
    border-top: 0;
}

/* 푸터 — 버튼 영역. master-grid-section 의 pagingBar 와 같은 y 위치에 정렬되도록
   높이를 var(--dual-grid-footer-h) 와 일치시키고 margin-top 을 0 으로 강제.
   (master pagingBar 도 margin-top:0 이라 좌·우 양쪽 footer 의 baseline 이 정확히 일치.) */
.detail-panel-footer {
    flex: 0 0 auto;
    height: var(--dual-grid-footer-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 2px;
}

/* ============================================================
   레거시 wrapper → 표준 detail-panel-body 호환 매핑
   ------------------------------------------------------------
   기존 페이지들이 .grid-wrapper / .inputFormContainer / .inputForm-container /
   .title-table-wrap 같은 wrapper 로 감싸져 있을 때, HTML 변경 없이도
   표준 detail-panel-body 와 동일한 룩(보더+패딩+flex column+gap) 으로 보이도록.
   ============================================================ */

/* detail-panel 의 직속 자식이 .grid-wrapper / inputFormContainer / inputForm-container
   인 경우 — detail-panel-body 와 동일 룩 */
.detail-panel > .grid-wrapper,
.detail-panel > .inputFormContainer,
.detail-panel > .inputForm-container {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: none;
}

/* grid-wrapper 안의 또 다른 wrapper (inputFormContainer/inputForm-container/
   title-table-wrap) 들은 자식이 grid-wrapper 의 직속 자식처럼 흐르도록 */
.detail-panel .grid-wrapper > .inputFormContainer,
.detail-panel .grid-wrapper > .inputForm-container,
.detail-panel .grid-wrapper > .title-table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    display: contents;
}

/* ============================================================
   레거시 <section id="...Section"> → 표준 detail-panel-section 룩
   ------------------------------------------------------------
   페이지들이 폼을 section 으로 그룹핑한 패턴(inputFormSection/manageSection/
   logoFileSection/bannerFileSection/infoSection 등) 을 카드로 시각화.
   ============================================================ */

/*.detail-panel section[id$="Section"],*/
/*.detail-panel section[id$="section"] {*/
/*    flex: 0 0 auto;*/
/*    border: 1px solid var(--color-border);*/
/*    background: var(--color-bg);*/
/*    overflow: hidden;*/
/*    margin: 0 0 12px 0;*/
/*}*/

/*.detail-panel section[id$="Section"]:last-child,*/
/*.detail-panel section[id$="section"]:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/* section 안의 info-table 은 외곽 보더 제거 (section 보더가 외곽 담당) */
/*.detail-panel section[id$="Section"] > .detail-panel-table,*/
/*.detail-panel section[id$="Section"] > form > .detail-panel-table,*/
/*.detail-panel section[id$="Section"] > table.detail-panel-table,*/
/*.detail-panel section[id$="Section"] > div > .detail-panel-table,*/
/*.detail-panel section[id$="section"] > .detail-panel-table,*/
/*.detail-panel section[id$="section"] > form > .detail-panel-table,*/
/*.detail-panel section[id$="section"] > table.detail-panel-table {*/
/*    border: 0;*/
/*    margin: 0;*/
/*}*/

/*.detail-panel section[id$="Section"] .detail-panel-table tr:first-child th,*/
/*.detail-panel section[id$="Section"] .detail-panel-table tr:first-child td {*/
/*    border-top: 0;*/
/*}*/
/*.detail-panel section[id$="Section"] .detail-panel-table tr:last-child th,*/
/*.detail-panel section[id$="Section"] .detail-panel-table tr:last-child td {*/
/*    border-bottom: 0;*/
/*}*/

/* title-table-wrap — 섹션 카드처럼 */
.detail-panel .title-table-wrap {
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow: hidden;
    margin: 0 0 12px 0;
}

.detail-panel .title-table-wrap > .detail-panel-table,
.detail-panel .title-table-wrap > table.detail-panel-table {
    border: 0;
    margin: 0;
}

.detail-panel .title-table-wrap .detail-panel-table tr:first-child th,
.detail-panel .title-table-wrap .detail-panel-table tr:first-child td {
    border-top: 0;
}
.detail-panel .title-table-wrap .detail-panel-table tr:last-child th,
.detail-panel .title-table-wrap .detail-panel-table tr:last-child td {
    border-bottom: 0;
}

/* ============================================================
   detail-panel 내부 공통 스타일 — 플랫 디자인
   ------------------------------------------------------------
   페이지마다 wrapper(.inputFormContainer/.inputForm-container/.title-table-wrap/
   .grid-wrapper) 와 폼/테이블 마크업이 들쑥날쑥인 상황을 단일 룩으로 통일.
   detail-panel 자손이면 어떤 wrapper 든 동일한 시각.
   ============================================================ */

/* 페이지별 wrapper 들 — 자체 background/border/shadow 만 제거 (플랫화).
   레이아웃(display/flex/height) 은 건드리지 않아 .detail-panel-cols 같은
   레이아웃 클래스가 정상 동작하도록 한다. */
.detail-panel .inputFormContainer,
.detail-panel .inputForm-container,
.detail-panel .title-table-wrap,
.detail-panel .form-section,
.detail-panel .box-content,
.detail-panel #inputFormSection,
.detail-panel #leftInputFormLayer,
.detail-panel #rightInputFormLayer,
.detail-panel #bannerFileSection,
.detail-panel .info-box-right {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* ============================================================
   detail-panel 안 2 컬럼 레이아웃 — 좌/우로 분할된 폼 영역
   ------------------------------------------------------------
   <section class="detail-panel-cols">
     <div class="detail-panel-col col-left"> …왼쪽 폼/테이블… </div>
     <div class="detail-panel-col col-right"> …오른쪽 영역… </div>
   </section>
   ============================================================ */
.detail-panel-cols {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

.detail-panel-col {
    flex: 1 1 0;
    min-width: 0;
}

/* 좌측 약간 넓게 (60/40 비율) — 폼 필드가 많을 때 */
.detail-panel-col.col-left { flex: 1.4 1 0; }
.detail-panel-col.col-right { flex: 1 1 0; }

/* 좁은 화면에서는 세로로 쌓이도록 */
@media (max-width: 1280px) {
    .detail-panel-cols {
        flex-direction: column;
    }
    .detail-panel-col,
    .detail-panel-col.col-left,
    .detail-panel-col.col-right {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ============================================================
   .detail-panel-section 안의 .detail-panel-cols — 좌(라벨/값 테이블) + 우(stack 등) 균등 2열.
   organizationMappingView, advertisementView 등 표준 패턴.
   align-items: stretch 로 두어 좌측 테이블 높이가 우측 stack(고정 높이) 과 정렬됨.
   ============================================================ */
.detail-panel-section .detail-panel-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}

/* 좌측 라벨/값 테이블도 우측 stack 높이에 맞춰 채움 (테이블이 더 짧을 때 빈 영역으로 stretch). */
.detail-panel-section .detail-panel-cols > .detail-panel-table {
    height: 100%;
}

@media (max-width: 1024px) {
    .detail-panel-section .detail-panel-cols {
        grid-template-columns: 1fr;
    }
}

/* 섹션 — 카드 사이에 일관된 마진만 */
.detail-panel section,
.detail-panel .form-section,
.detail-panel .detail-section {
    margin: 0 0 16px 0;
}
.detail-panel section:last-child,
.detail-panel .form-section:last-child,
.detail-panel .detail-section:last-child {
    margin-bottom: 0;
}

/* ============================================================
   라벨-위 / 컨텐츠-아래 스택 (.detail-panel-stack)
   ------------------------------------------------------------
   .detail-panel-cols 안의 우측 컨텐츠로 자주 쓰는 패턴 — 라벨 헤더 + 큰 텍스트 영역
   <div class="detail-panel-stack">
     <div class="detail-panel-stack-title">요청내용</div>
     <textarea class="detail-panel-stack-text" readonly></textarea>
   </div>
   사용처: organizationMappingView, advertisementView 등 다수 — 글로벌 공용으로 둔다.
   ============================================================ */
/* stack 자체 높이는 var(--detail-panel-stack-h, 240px) 로 고정.
   페이지에서 다른 높이가 필요하면 .detail-panel-stack { --detail-panel-stack-h: 280px } override. */
.detail-panel-stack {
    --detail-panel-stack-h: 240px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    height: var(--detail-panel-stack-h);
}

.detail-panel-stack-title {
    background: var(--color-bg-alt);
    color: var(--color-text-strong);
    font-weight: 600;
    font-size: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}

.detail-panel-stack-text {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: 10px;
    border: 0;
    resize: none;
    background: #ffffff;
    color: var(--color-text);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
}

.detail-panel-stack-text:focus {
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* 섹션 제목 — 좌측 액센트 보더 + 옅은 배경 */
.detail-panel .section-title,
.detail-panel .form-section-title,
.detail-panel .box-header,
.detail-panel .title-table-wrap > .title,
.detail-panel h3,
.detail-panel h4,
.detail-panel h5 {
    margin: 0 0 10px 0;
    padding: 6px 10px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary);
    border-radius: 2px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* form 자체는 투명 컨테이너 */
.detail-panel form,
.detail-panel fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* info-table — key-value 표 (플랫 보더) */
.detail-panel .detail-panel-table,
.detail-panel table.detail-panel-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px 0;
    font-size: var(--font-size-base);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
}
.detail-panel .detail-panel-table:last-child {
    margin-bottom: 0;
}

.detail-panel .detail-panel-table th,
.detail-panel .detail-panel-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    text-align: left;
    color: var(--color-text);
    line-height: 1.5;
}

.detail-panel .detail-panel-table tr:last-child th,
.detail-panel .detail-panel-table tr:last-child td {
    border-bottom: 0;
}

.detail-panel .detail-panel-table th {
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    width: 25%;
    min-width: 110px;
    border-right: 1px solid var(--color-border);
    white-space: nowrap;
}

/* 일반 테이블도 동일 룩 */
.detail-panel table:not(.detail-panel-table):not(.ag-grid):not([class*="ag-"]) {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px 0;
    font-size: var(--font-size-base);
    background: var(--color-bg);
}
.detail-panel table:not(.detail-panel-table):not(.ag-grid):not([class*="ag-"]) th,
.detail-panel table:not(.detail-panel-table):not(.ag-grid):not([class*="ag-"]) td {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    text-align: left;
    color: var(--color-text);
    vertical-align: middle;
}
.detail-panel table:not(.detail-panel-table):not(.ag-grid):not([class*="ag-"]) thead th {
    background: var(--color-bg-alt);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

/* 입력 컨트롤 — 사이즈/보더/포커스 통일.
   기본은 width: 100% (form-group/field-group 에서 라벨 위 + 컨트롤 아래 패턴),
   info-table td 안에서는 한 셀에 여러 컨트롤이 들어가는 경우가 흔하므로
   별도 룰로 inline 처리해서 줄바꿈 방지 (아래 .info-table td 절 참조). */
.detail-panel input[type="text"],
.detail-panel input[type="email"],
.detail-panel input[type="number"],
.detail-panel input[type="tel"],
.detail-panel input[type="date"],
.detail-panel input[type="time"],
.detail-panel input[type="datetime-local"],
.detail-panel input[type="password"],
.detail-panel input[type="url"],
.detail-panel input[type="search"],
.detail-panel select,
.detail-panel textarea {
    /*width: 100%;*/
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ============================================================
   info-table 의 td 안에 들어가는 폼 컨트롤들 — 한 줄에 인라인 배치
   ------------------------------------------------------------
   배너/공고 등에서 "개재요청자(input + 조회 button)", "전시시작일시(date + select)"
   처럼 한 셀에 여러 컨트롤이 함께 들어가는 패턴을 줄바꿈 없이 한 줄로 표시.
   ============================================================ */

/* 셀 자체 — 줄바꿈 방지 + 좌우 패딩 보존 */
.detail-panel .detail-panel-table td {
    white-space: nowrap;
}

/* 셀 안의 모든 폼 컨트롤은 inline-block 으로 (width 100% 강제 해제) */
.detail-panel .detail-panel-table td input,
.detail-panel .detail-panel-table td select,
.detail-panel .detail-panel-table td textarea,
.detail-panel .detail-panel-table td button,
.detail-panel .detail-panel-table td label,
.detail-panel .detail-panel-table td .file-picker-btn {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* 컨트롤 사이 자연스러운 간격 — 6px */
.detail-panel .detail-panel-table td > * + * {
    margin-left: 6px;
}

/* Quill 에디터는 sibling toolbar/container 구조라 컨트롤 간격 룰에서 제외 */
.detail-panel .detail-panel-table td > .ql-toolbar,
.detail-panel .detail-panel-table td > .ql-container {
    margin-left: 0;
    display: block;
}

/* 텍스트류 input 의 기본 너비 — 셀이 너무 좁아 보이지 않도록 */
.detail-panel .detail-panel-table td input[type="text"],
.detail-panel .detail-panel-table td input[type="email"],
.detail-panel .detail-panel-table td input[type="tel"],
.detail-panel .detail-panel-table td input[type="url"],
.detail-panel .detail-panel-table td input[type="search"],
.detail-panel .detail-panel-table td input[type="password"] {
    width: 220px;
    max-width: 100%;
}

/* number/date/time 류는 컨텐츠 기준 너비 */
.detail-panel .detail-panel-table td input[type="number"],
.detail-panel .detail-panel-table td input[type="date"],
.detail-panel .detail-panel-table td input[type="time"],
.detail-panel .detail-panel-table td input[type="datetime-local"] {
    width: auto;
    min-width: 130px;
}

/* select 는 컨텐츠 폭 + 약간 여유 */
.detail-panel .detail-panel-table td select {
    width: auto;
    min-width: 100px;
}

/* textarea 는 한 줄 inline 안 어울리므로 셀 폭 100% 유지 */
.detail-panel .detail-panel-table td textarea {
    width: 100%;
    display: block;
}

/* td 안의 .error / hidden input 은 간격 영향 없도록 */
.detail-panel .detail-panel-table td > input[type="hidden"],
.detail-panel .detail-panel-table td > .error:empty {
    margin-left: 0;
}

/* 명시적 "한 줄 채우기" 가 필요한 경우 .fill 클래스 사용 */
.detail-panel .detail-panel-table td input.fill,
.detail-panel .detail-panel-table td select.fill,
.detail-panel .detail-panel-table td .form-control.fill {
    width: 100%;
    display: block;
    margin-left: 0;
}

.detail-panel textarea {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-family-base);
}

.detail-panel input:focus,
.detail-panel select:focus,
.detail-panel textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

.detail-panel input:disabled,
.detail-panel select:disabled,
.detail-panel textarea:disabled,
.detail-panel input[readonly],
.detail-panel textarea[readonly] {
    background: var(--color-bg-strong);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* 라벨 / 필수 표시 */
.detail-panel label {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.5;
}

.detail-panel .required,
.detail-panel .req,
.detail-panel .star {
    color: var(--color-danger);
    margin-left: 2px;
    font-weight: var(--font-weight-semibold);
}

/* 라벨 위 / 컨트롤 아래 패턴 */
.detail-panel .form-group,
.detail-panel .field-group {
    margin: 0 0 12px 0;
}

.detail-panel .form-group > label,
.detail-panel .field-group > label,
.detail-panel .form-group .label,
.detail-panel .field-group .label {
    display: block;
    margin-bottom: 4px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* 체크박스/라디오 — 인라인 + 적당한 간격 */
.detail-panel .checkbox-group,
.detail-panel .radio-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.detail-panel .checkbox-group label,
.detail-panel .radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* 상세 폼 헤더 (배너 등에서 사용) — 플랫 + 보더 한 줄 */
.detail-panel .detail-form-header {
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
}

.detail-panel .detail-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-strong);
}

.detail-panel .detail-form-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-panel .detail-form-title-main {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
}

.detail-panel .detail-form-title-sub {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

/* 빈 상태 / 안내 문구 */
.detail-panel .empty-state,
.detail-panel .no-data,
.detail-panel .help-text {
    padding: 32px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

/* 마지막 요소의 하단 마진 제거 — detail-panel-body padding 과 이중 여백 방지 */
.detail-panel .detail-panel-body > *:last-child,
.detail-panel > .grid-wrapper > *:last-child,
.detail-panel > .inputFormContainer > *:last-child,
.detail-panel > .inputForm-container > *:last-child {
    margin-bottom: 0;
}

/* 레거시 호환 — section wrapper 없이 master-grid / detail-grid 가
   dual-grid-container 의 직속 자식인 페이지에서도 동일 비율이 되도록 */
.dual-grid-container > .master-grid {
    flex: 0 0 calc(40% - 9px);
    min-width: 300px;
}

.dual-grid-container > .detail-grid {
    flex: 1 1 auto;
    min-width: 0;
}

/* .single-grid 의 룩/내부 flex 체인은 위쪽 "Single Grid 표준 구조" 블록에서 단일 정의.
   여기에는 .single-grid-container 밖에서 stand-alone 으로 사용될 때의 fallback 만 둔다. */
.single-grid {
    width: 100%;
    background: white;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.grid-wrapper {
    display: flex;
    flex-direction: column;
}

/* ============================================================
 * .quick-search-area — 그리드 위에 붙는 "빠른 검색" 섹션 (재사용 가능 컴포넌트)
 * ------------------------------------------------------------
 * 한 줄짜리 라이크 검색바. grid-wrapper 안의 grid-header-new 위에 두는 게 표준이지만
 * 그리드 외 영역(상세 패널 안 등) 에서도 동일 룩으로 재사용 가능.
 *
 *   <div class="quick-search-area">
 *     <span class="search-label">고객명 라이크 검색</span>
 *     <input type="text" class="quick-search-input"
 *            placeholder="고객명을 입력하세요" onkeyup="handleQuickSearch(event)">
 *     [<button class="krds-btn small btn-search">검색</button>]   ← 옵션
 *   </div>
 *
 * 룩: 좌측 brand-blue 액센트 바 + 옅은 grey 그라디언트 배경 + 사방 1px 보더로
 *     "이 영역은 한 단위의 섹션" 임을 시각적으로 분리. font/사이즈는 grid-header-new
 *     와 통일 (높이 36px, 12px font, 같은 좌측 인디케이터 컬러).
 * ============================================================ */
.quick-search-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-height: 36px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 3px solid #3b6fc9;
    box-sizing: border-box;
    font-size: var(--font-size-base);
}

.quick-search-area .search-label {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.quick-search-area .quick-search-input {
    width: 220px;
    height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background-color: #fff;
    font-size: var(--font-size-base);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.quick-search-area .quick-search-input:focus {
    outline: none;
    border-color: #3b6fc9;
    box-shadow: 0 0 0 2px rgba(59, 111, 201, 0.15);
}

/* grid-wrapper 안에서 grid-header-new 와 인접해 있을 때 — 두 줄의 보더가
   겹치지 않도록 quick-search-area 의 아래 보더를 grid-header-new 의 위 보더가
   대체하도록 한다 (시각적으로 두 섹션이 한 단위로 이어진 느낌). */
.grid-wrapper > .quick-search-area + .grid-header-new {
    border-top: 0;
}

/* ===== 그리드 헤더 바 (리스트 상단 통계/제목/버튼 영역) ===== */
.grid-header-new {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    min-height: 40px;
    font-size: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-top: 2px solid #3b6fc9;
    border-bottom: 1px solid #e2e8f0;
}

.grid-header-new .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.grid-header-new .header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* 좌측 세로 바가 붙은 그리드 타이틀 */
.grid-header-new .grid-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-left: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.grid-header-new .grid-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: #3b6fc9;
    border-radius: 2px;
}

/* 통계 묶음 (전체 N건 | 진행중 N건 ...) */
.grid-header-new .stats-container,
.stats-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #475569;
}

.stat-item > span,
.stat-item b {
    color: #2563eb;
    font-weight: 700;
}

.stat-item.sortable {
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.stat-item.sortable:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.stat-item.sortable.is-active {
    background: #2563eb;
    color: #fff;
}

.stat-item.sortable.is-active > span,
.stat-item.sortable.is-active b {
    color: #fff;
}

.stat-separator {
    color: #cbd5e1;
    margin: 0 2px;
    font-weight: 300;
}

/* quick-search-section (인라인 검색 영역) */
.grid-header-new .quick-search-section {
    background: transparent;
    padding: 0;
    border-bottom: none;
    flex: 1;
    overflow: hidden;
}

.grid-header-new .alphabet-filter {
    display: flex;
    gap: 1px;
    font-size: 12px;
    color: #666;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
}

.grid-header-new .alphabet-filter span {
    cursor: pointer;
    padding: 1px 1px;
    border-radius: 2px;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 8px;
    text-align: center;
    line-height: 1;
    font-size: 12px;
}

.grid-header-new .alphabet-filter span:hover {
    background: #007bff;
    color: white;
}

/* 신규등록 등 우측 액션 버튼 */
/* 신규등록 — 다른 의미컬러(조회/저장/수정 등)와 시각적으로 구분되는 violet 톤. */
.new-register-btn {
    background: var(--color-new-register);
    color: #fff;
    border: 1px solid var(--color-new-register);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.new-register-btn:hover {
    background: var(--color-new-register-hover);
    border-color: var(--color-new-register-hover);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

.new-register-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.quick-search-section {
    background: #f8f9fa;
    padding: 6px 12px;
    border-bottom: 1px solid #ddd;
}

.alphabet-filter {
    display: flex;
    gap: 4px;
    font-size: 12px;
    color: #666;
    flex-wrap: wrap;
}

.alphabet-filter span {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.2s;
    font-size: 12px;
}

.alphabet-filter span:hover {
    background: #007bff;
    color: white;
}

.grid-content {
    overflow: hidden;
    padding: 0;
    border-top: 2px solid black;
}


/* detail-grid 내부 AG Grid 높이도 공통 .ag-theme-alpine / .grid-h-* 로 결정 */

/* Single Grid 내부 AG Grid — 공통 .ag-theme-alpine / .grid-h-* 로 결정 */

/* 탭 내부 등 부모 높이 100% 가 필요한 경우 (확장용 유틸) */
.grid-full-height {
    display: flex;
    flex-direction: column;
}

.grid-full-height .grid-wrapper {
    display: flex;
    flex-direction: column;
}

.grid-full-height .grid-content {
    overflow: hidden;
}

/* grid-full-height 내부 AG Grid 높이도 공통 .ag-theme-alpine / .grid-h-* 로 결정 */

.btn {
    padding: 3px 6px;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.btn:hover {
    background: #e9ecef;
}

.btn-primary {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.btn-primary:hover {
    background: #0056b3;
}

.form-select {
    padding: 2px 4px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 10px;
}

.ag-cell-button {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
    padding: 1px 3px;
    font-size: 12px;
    border-radius: 2px;
}

.ag-cell-button:hover {
    color: #0056b3;
    background: #f8f9fa;
}

.status-badge {
    padding: 1px 4px;
    border-radius: 6px;
    font-size: 12px;
}

.status-y {
    background-color: #d4edda;
    color: #155724;
}

.status-n {
    background-color: #f8d7da;
    color: #721c24;
}

.ag-row.new-row {
    background-color: #e8f5e8 !important;
}

.ag-row.new-row:hover {
    background-color: #d4edda !important;
}

.ag-row-selected {
    background-color: #e3f2fd !important;
}

/* master-grid 의 선택된 행 — 상세 패널과 매핑된 현재 행임을 더 명확히 */
.master-grid .ag-row-selected {
    background-color: #d6ebff !important;
    box-shadow: inset 3px 0 0 0 var(--color-primary, #007bff);
}

.master-grid .ag-row-selected .ag-cell {
    color: var(--color-text-strong, #212529);
    font-weight: 500;
}

.ag-cell {
    border-right: 1px solid #e0e0e0;
    padding: 4px;
    font-size: 12px;
    line-height: 24px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.ag-header-cell {
    background-color: #f5f5f5;
    border-right: 1px solid #e0e0e0;
    font-size: 12px;
}

/* 그리드 내부 입력 요소 스타일 */
.form-control-sm {
    padding: 5px 8px;
    font-size: 12px;
    height: 24px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-sm:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

/* 셀렉트 박스 전용 스타일 */
.form-control-sm select,
select.form-control-sm {
    padding: 3px 6px;
    font-size: 12px;
    height: 26px;
    line-height: 20px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    background-color: white;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    vertical-align: middle;
}

.form-control-sm select:focus,
select.form-control-sm:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

.form-control-sm select:hover,
select.form-control-sm:hover {
    border-color: #80bdff;
}

/* AG Grid 셀 내부의 셀렉트 박스 */
.ag-cell select.form-control-sm {
    margin: auto;
    display: block;
}

/* AG Grid 셀 내부의 체크박스
   — KRDS output.css 가 input[type=checkbox] 를 1px 숨김 처리하므로
     .ag-theme-alpine 안에서는 원래 모습으로 복원한다. */
.ag-theme-alpine input[type=checkbox],
.ag-theme-alpine .form-check-input {
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 1px solid #ced4da !important;
    cursor: pointer;
    accent-color: #007bff;
    border-radius: 3px;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

.form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007bff;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

.form-check-input:hover {
    border-color: #80bdff;
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

.form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-success.btn-sm {
    background: #28a745;
    border-color: #28a745;
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    margin-right: 3px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-success.btn-sm:hover {
    background: #218838;
}

.btn-secondary.btn-sm {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-secondary.btn-sm:hover {
    background: #5a6268;
}

.ag-theme-alpine .ag-header-cell-label {
    justify-content: center;
}

.ag-theme-alpine .ag-header-cell-text {
    text-align: center;
    overflow: visible !important;
    white-space: nowrap !important;
}

.ag-theme-alpine .ag-header-cell {
    padding: 1px 2px !important;
    line-height: 28px;
}

/* 기능 버튼 ìŠ¤íƒ€ì¼ */
.btn-edit {
    background: #17a2b8;
    border-color: #17a2b8;
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    margin-right: 3px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-edit:hover {
    background: #138496;
}

.btn-delete {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-delete:hover {
    background: #c82333;
}

/* 그리드 액션 버튼 스타일 */
.grid-action-btn {
    padding: 4px 8px;
    min-width: 40px;
    height: 24px;
    border-radius: 2px;
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    margin: 0 1px;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.grid-action-btn-save {
    background-color: #48c774;
    color: #000000;
    border-color: #48c774;
}

.grid-action-btn-save:hover {
    background-color: #3db362;
    border-color: #3db362;
    transform: translateY(-1px);
}

.grid-action-btn-cancel {
    background-color: #95a5a6;
    color: #000000;
    border-color: #95a5a6;
}

.grid-action-btn-cancel:hover {
    background-color: #7f8c8d;
    border-color: #7f8c8d;
    transform: translateY(-1px);
}

.grid-action-btn-edit {
    background-color: #ffffff;
    color: #000000;
    border-color: #dee2e6;
}

.grid-action-btn-edit:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #000000;
    transform: translateY(-1px);
}

.grid-action-btn-delete {
    background-color: #ffffff;
    color: #000000;
    border-color: #dee2e6;
}

.grid-action-btn-delete:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #000000;
    transform: translateY(-1px);
}

.grid-action-btn:active {
    transform: translateY(0);
    opacity: 0.85;
}

/* 스í¬ë¡¤ë°" ì•ˆì •í™" */
.ag-theme-alpine .ag-body-viewport {
    overflow-y: scroll !important;
    padding-bottom: 20px !important;
}

/* 탭 ê´€ë ¨ ìŠ¤íƒ€ì¼ */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============================================================
 * 첨부파일 공통 컴포넌트 (.attach-zone)
 *  - 자바스크립트 컴포넌트: /js/common/attachZone.js (AttachZone)
 *  - HTML 에 <div class="attach-zone"> 만 두면 자동 init.
 *  - 좌: 드롭존 (클릭/드래그로 파일 추가)
 *  - 우: 첨부 리스트 (신규 pending + 등록된 기존, 각 항목 X 버튼 삭제)
 * ============================================================ */
.attach-zone,
.attach-zone-area {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    padding: 4px 0;
}

/* 드롭존 — 클릭/드래그로 파일 추가 (좌측) */
.attach-zone-dropzone {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 12px;
    border: 1.5px dashed var(--color-border-strong, #cbd5e1);
    border-radius: 8px;
    background: var(--color-bg-soft, #f9fafb);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    margin-bottom: 0;
}
.attach-zone-dropzone:hover,
.attach-zone-dropzone.is-dragover {
    border-color: var(--color-primary, #2563eb);
    background: #eff6ff;
}
.attach-zone-dropzone-icon {
    font-size: 22px;
    color: var(--color-primary, #2563eb);
    line-height: 1;
}
.attach-zone-dropzone-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #1f2937);
}
.attach-zone-dropzone-hint {
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
}
.attach-zone-dropzone input[type="file"] {
    display: none;
}

/* 우측 리스트 영역 */
.attach-zone-list-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.attach-zone-list-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
}
.attach-zone-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}
.attach-zone-list:empty + .attach-zone-empty {
    display: block;
}
.attach-zone-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    font-size: 12px;
}
.attach-zone-list-item.is-pending {
    background: #fffdf5;
    border-color: #fde68a;
}
.attach-zone-list-item .attach-zone-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text, #1f2937);
}
.attach-zone-list-item .attach-zone-file-size {
    color: var(--color-text-muted, #6b7280);
    font-size: 12px;
    flex: 0 0 auto;
}
.attach-zone-list-item .attach-zone-action {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.attach-zone-list-item .attach-zone-action:hover {
    text-decoration: underline;
}
.attach-zone-list-item .attach-zone-remove {
    border: none;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    flex: 0 0 auto;
}
.attach-zone-list-item .attach-zone-remove:hover {
    color: var(--color-danger, #dc3545);
}
.attach-zone-empty {
    display: none;
    font-size: 12px;
    color: var(--color-text-muted, #6b7280);
    padding: 6px 2px;
}

/* ============================================================
 * AttachZone 이 .detail-panel-table td 안에 있을 때
 * detail-panel-table 의 인라인 강제 룰(td label/input → inline-block · width:auto · nowrap)
 * 이 드롭존 레이아웃을 깨뜨리므로, attach-zone 내부에 한해 자체 룩을 복원한다.
 * ============================================================ */
.detail-panel-table td > .attach-zone {
    width: 100%;
    white-space: normal;
    margin-left: 0;
}
.detail-panel-table td .attach-zone-dropzone {
    display: flex;
    flex-direction: column;
    width: auto;
    flex: 1 1 0;
    margin-left: 0;
}
.detail-panel-table td .attach-zone-list-wrap {
    flex: 1 1 0;
    margin-left: 0;
}
.detail-panel-table td .attach-zone-dropzone input[type="file"] {
    display: none;
}
.detail-panel-table td .attach-zone-list-item {
    margin-left: 0;
}
.detail-panel-table td .attach-zone-list-item .attach-zone-remove {
    width: auto;
}