/* 공통 레이아웃 정의 : LNB 265px 고정 / Header 74px 고정 */
:root {
    --bs-app-sidebar-width: 265px;
    --bs-app-header-height: 74px;
    --bs-app-header-height-actual: 74px;
}

/* 사이드 바 */
.app-sidebar {
    background-color: #fff;
    border-right: 1px solid var(--bs-gray-200);
}
.app-sidebar-logo {
    height: var(--bs-app-header-height);
    border-bottom: 1px solid var(--bs-gray-200);
}
.sidebar-logo {
    font-family: 'Times New Roman', serif;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: #111;
}
.sidebar-logo:hover {
    color: #111;
}
.app-sidebar .menu-link.active {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-900);
    font-weight: 600;
}

/* 상단 바 */
.app-header {
    background-color: #fff;
    border-bottom: 1px solid var(--bs-gray-200);
}
.app-header .breadcrumb-item::after {
    content: none;
}

/* 콘텐츠는 헤더/LNB를 제외한 영역을 채운다. KT 컨테이너와 카드의 중복 여백을 제거한다. */
#kt_app_content {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
}
#kt_app_content > .app-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    /* KT .app-container 및 pt-6 유틸리티가 !important를 사용한다. */
    padding: 0 !important;
}
#kt_app_content > .app-container > .card {
    flex: 1 0 auto;
}
#kt_app_content > .app-container > .card,
#kt_app_content > .app-container > div > .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* 목록의 검색 영역(px-6)과 표의 좌우 시작점을 맞춘다. 폼/모달의 여백은 각 화면에서 유지한다. */
#kt_app_content > .app-container > .card > .card-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* 목록 (DataTables) */
/* KT btn-active-light-success/danger와 같은 색상 토큰. btn-light의 회색 hover보다 우선한다. */
.table-btns .btn-publish {
    --board-action-color: var(--bs-success);
    --board-action-bg: var(--bs-success-light);
}
.table-btns .btn-delete {
    --board-action-color: var(--bs-danger);
    --board-action-bg: var(--bs-danger-light);
}
.table-btns .btn.btn-light:is(.btn-publish, .btn-delete):not(.disabled):not(:disabled):is(:hover, :focus, :active) {
    color: var(--board-action-color);
    border-color: var(--board-action-bg);
    background-color: var(--board-action-bg) !important;
}
.table-btns .btn.btn-light:is(.btn-publish, .btn-delete):not(.disabled):not(:disabled):is(:hover, :focus, :active) i {
    color: var(--board-action-color);
}
.board-grid {
    border: 0.5px solid var(--bs-gray-200);
}
.board-grid .table-board {
    /* DataTables의 상하 margin으로 외곽선 안에 빈 틈이 생기지 않게 한다. */
    margin: 0 !important;
}
.board-pagination {
    margin-top: 0.5rem;
    border-top: 1px solid var(--bs-gray-300);
}
/* 제목/제품명 등 화면별 text-start 컬럼은 유지하고 나머지 헤더와 값을 가운데 정렬한다. */
.table-board > thead > tr > th,
.table-board > tbody > tr > td {
    text-align: center;
    vertical-align: middle;
}
.table-board > thead > tr > th {
    height: 44px;
    background-color: var(--bs-gray-100);
    white-space: nowrap;
}
.table-board > tbody > tr > td {
    height: 64px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* KT의 첫/마지막 셀 padding: 0을 보정해 체크박스와 관리 버튼을 외곽선에서 띄운다. */
.table-board.table > :is(thead, tbody) > tr > :first-child {
    padding-left: 0.75rem;
}
.table-board.table > :is(thead, tbody) > tr > :last-child {
    padding-right: 0.75rem;
}
.table-board .form-check {
    justify-content: center;
}
/* 테두리형 체크박스. 체크 표시는 KT 기본 이미지를 사용한다. */
.table-board .form-check .form-check-input[type=checkbox] {
    width: 16px;
    height: 16px;
    border: 1px solid var(--bs-gray-500);
    border-radius: 3px;
}
.table-board .form-check .form-check-input[type=checkbox]:not(:checked):not(:indeterminate) {
    background-color: var(--bs-body-bg);
}
.table-board .form-check .form-check-input[type=checkbox]:checked,
.table-board .form-check .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--bs-gray-600);
    border-color: var(--bs-gray-600);
}
.table-board .form-check .form-check-input:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.dataTables_length select {
    min-width: 125px;
}
.thumb {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--bs-gray-100);
}
.thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Times New Roman', serif;
    font-size: 9px;
    color: var(--bs-gray-500);
}

/* 등록/수정 폼 */
.row-field {
    padding: 0.75rem 0;
    align-items: flex-start;
}
.row-field {
    display: flex;
}
.row-field + .row-field {
    border-top: 1px dashed var(--bs-gray-200);
}
.field-body {
    flex-grow: 1;
}
.field-label {
    flex: 0 0 180px;
    padding-top: 0.45rem;
    font-size: 0.925rem;
}
.img-preview {
    width: 130px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-gray-100);
    border-radius: 6px;
    overflow: hidden;
}
.img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dropzone-box {
    position: relative;
    border: 1px dashed var(--bs-gray-300);
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
    background-color: var(--bs-gray-100);
}
.ipt-file-abs {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.file-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: 6px;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}
.file-list li span {
    flex: 1;
}
.btn-file-del,
.btn-tag-del {
    cursor: pointer;
}

/* 얼럿/컨펌 */
.swal2-popup .swal2-title {
    font-size: 1.15rem;
}
.swal2-popup .swal2-html-container {
    font-size: 0.9rem;
    color: var(--bs-gray-600);
}
.swal2-container {
    z-index: 100000;
}

/* 로그인 */
.login-card {
    width: 100%;
    max-width: 560px;
    border: 1px solid var(--bs-gray-200);
}
.login-logo {
    font-family: 'Times New Roman', serif;
    font-size: 2.75rem;
    letter-spacing: 0.08em;
    color: #111;
}
.form-control.is-invalid {
    border-color: var(--bs-danger);
}