.table th,
.table td {
    text-align: center;
    vertical-align: middle;
}
.table thead th {
    background-color: #f4f6fc !important;
}

/* 팝업(popup-layout) 공통 배경 — 흰 카드와 대비되도록 페이지 기본 배경색 적용 */
.layer_wrap .modal-content,
.layer_wrap .modal-content .modal-header,
.layer_wrap .modal-content .modal-body,
.layer_wrap .modal-content .modal-footer {
    background-color: var(--bs-body-bg);
}

/* 그리드 카드(.card-datatable) 내부 그리드 공통 여백 */
.card-datatable-grid {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* form-row 자체의 .row 음수 마진 중립화 — col 래퍼로 쓰일 때 인접 컬럼과의 겹침 방지 */
.form-row {
    margin-left: 0;
    margin-right: 0;
}

/* form-row 내부 라벨/입력영역의 .row gutter 제거 — 입력창 우측 잉여 공백 방지 */
.form-row > .col-form-label,
.form-row > .col-form-input {
    padding-left: 0;
    padding-right: 0;
}

/* AG Grid 헤더 셀 기본 중앙 정렬 — headerClass: 'ag-header-cell-center' 지정 시 텍스트 중앙 정렬 */
.ag-header-cell-center .ag-header-cell-label {
    justify-content: center;
}

/* 에디터(Summernote)로 저장된 HTML 을 상세 화면에 단순 렌더링할 때
   table 에 border-style/border-width 가 누락되어 선이 보이지 않는 문제 보완.
   에디터 출력 컨테이너에 .editor-content 클래스를 부여하면 내부 table 이 정상 표기됨. */
.editor-content table {
    border-collapse: collapse;
    max-width: 100%;
}
.editor-content table,
.editor-content table th,
.editor-content table td {
    border: 1px solid #ddd;
}
.editor-content table th,
.editor-content table td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

/* readonly 입력 필드 배경색 */
.form-control[readonly] {
    background-color: #f5f5f5;
}

/* 1열 단독 입력 필드 너비 제한 */
.form-row .col-form-input.col-form-input-70 {
    flex: 0 0 calc(70% - 9rem);
    max-width: calc(70% - 9rem);
}

/* Dropzone 썸네일 레이아웃 */
.dropzone-thumb { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.dropzone-thumb .dz-message { margin-block: 4.5rem 1.5rem; }
.dropzone-thumb .dz-message::before { inset-block-start: 1.5rem; }
.dropzone-thumb .dz-preview { inline-size: 7.875rem; margin-inline: 0; }
.dropzone-thumb .dz-thumbnail { block-size: 5.25rem; inline-size: 7rem; }
.dropzone-thumb .dz-details { display: flex; flex-direction: column; align-items: center; }
.dropzone-thumb .dz-filename { position: static; inline-size: 100%; background: transparent; padding-block: 0.375rem 0; padding-inline: 0; font-size: 0.75rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-thumb .dz-size { padding-block: 0.125rem 0.625rem; padding-inline: 0; text-align: center; }

/* 상단 네비바(프로필 영역)를 하단 컨텐츠 카드 섹션과 좌우로 정렬
   vendor .navbar-detached 가 좌우에 1.625rem(또는 모바일 1rem) 인셋을 추가로 부여하고
   PC 넓은 화면에서는 max-inline-size 를 컨텐츠 영역(.container-xxl, 1440px)보다 좁은
   calc(1440px - 1.625rem*2) 로 별도로 잡아, 어느 화면 폭에서도 컨텐츠 카드보다
   안쪽으로 치우쳐 보이던 문제 보정.
   추가로 PC(>=1200px)에서는 vendor 가 사이드 메뉴 존재를 가정하고
   .layout-navbar 에 inset-inline-start: var(--bs-menu-width)(16.25rem) 를 부여해
   네비바만 오른쪽으로 밀려 보이는 문제가 있었음 — 이 앱은 사이드 메뉴가 없으므로
   컨텐츠 영역과 동일하게 0 으로 되돌림.
   #layout-navbar(ID) 로 vendor core.css 의 !important/미디어쿼리 규칙보다 우선하도록 함.
   margin-inline 은 0 이 아닌 auto 여야 max-inline-size 로 잡히는 PC 화면에서도
   컨텐츠 영역과 동일하게 중앙 정렬된다. */
#layout-navbar.navbar-detached {
    inset-inline-start: 0 !important;
}

/* .container-xxl 좌우 여백(패딩) — vendor 기본값은 모바일(<992px)에서 0.8125rem(13px)로 너무 좁아
   카드 섹션이 화면 가장자리에 거의 붙어 보임. 네비바(#layout-navbar)와 컨텐츠 카드 영역이
   동일하게 .container-xxl 를 쓰고 있으므로, 이 값만 키우면 프로필 영역과 카드 섹션의
   좌우 여백이 항상 같은 값으로 자동 정렬된다. */
.container-xxl {
    padding-inline: 1rem;
}
@media (min-width: 992px) {
    .container-xxl {
        padding-inline: 1.625rem;
    }
}

/* AJAX 로딩 오버레이 */
#weframeLoading .layer_bg {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] #weframeLoading .layer_bg {
    background: rgba(0, 0, 0, 0.15);
}

#weframeLoading #customLoading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* 브랜드 컬러: 초록색 계열로 변경 (기준색: 무료로 시작하기 CTA 버튼 #21A366, public-cta-bar.html 참고)
   vendor core.css 의 --bs-primary 계열 커스텀 프로퍼티를 재정의.
   버튼(.btn-primary/.btn-outline-primary), 뱃지(.bg-label-primary), 링크, 폼 체크 등
   --bs-primary 를 참조하는 요소 전반에 일괄 반영된다.
   상단바(#layout-navbar) 배경은 흰색(--bs-paper-bg) 그대로 유지 — 별도 오버라이드 없음. */
:root,
[data-bs-theme="light"] {
    --bs-primary: #21A366;
    --bs-primary-rgb: 33, 163, 102;
    --bs-primary-text-emphasis: #0d4129;
    --bs-primary-bg-subtle: #dbf0e7;
    --bs-primary-border-subtle: #bce3d1;
    --bs-link-color: #21A366;
    --bs-link-color-rgb: 33, 163, 102;
    --bs-link-hover-color: #1c8a56;
    --bs-link-hover-color-rgb: 28, 138, 86;
}

[data-bs-theme="dark"] {
    --bs-primary: #21A366;
    --bs-primary-rgb: 33, 163, 102;
    --bs-primary-text-emphasis: #7ee2b8;
    --bs-primary-bg-subtle: #1c3a2c;
    --bs-primary-border-subtle: #2d5940;
    --bs-link-color: #7ee2b8;
    --bs-link-color-rgb: 126, 226, 184;
    --bs-link-hover-color: #97e8c6;
    --bs-link-hover-color-rgb: 151, 232, 198;
}

/* 위 --bs-primary 를 참조하지 않고 값이 고정되어 있는 잔여 항목 보정 */
.progress,
.progress-stacked {
    --bs-progress-bar-bg: #21A366;
}
.apexcharts-theme-dark {
    --bs-primary: #21A366;
}