@charset "UTF-8";

/****
    app.min.css에서 추가할 것들..
****/

/* loader 깜박임 완화: fade-out 전환 */
.app-loader {
    /* background-color: rgba(var(--bs-app-theme-rgb), 0.10); */
    background-color: rgba(0, 0, 0, 0.1);
    transition: opacity 0.18s ease;
}
.app-loader.loaded {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local("Pretendard Variable"), url("/font/PretendardVariable.woff2") format("woff2-variations");
}

@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-Thin.woff") format("woff");
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-SemiBold.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: Pretendard;
    src: url("/font/Pretendard-Black.woff") format("woff");
    font-weight: 900;
    font-display: swap;
}

/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: Pretendard, "Open Sans", sans-serif;
}

/* checkbox, radiobox 마우스커서 조정 */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"],
.form-check-input ~ .form-check-label {
    cursor: pointer;
}

.page-header {
    margin: 1px;
}

/******************************************************************************************************************/
/* extra_invoice.html 템플릿에서 invoce → mypage, company → title 변경하여 조정, mypage-content는 추가 */
.mypage {
    background: var(--bs-component-bg);
    /*padding: 0px;*/
}
.mypage > div:not(.mypage-footer) {
    margin-bottom: 15px;
}
.mypage .mypage-title {
    font-size: 20px;
    font-weight: 600;
}

/* 폰트 이미지 클릭 방해 금지 */
.mypage i {
    pointer-events: none;
} 

.mypage .mypage-header {
    /*margin: 0 -20px;*/
    background: var(--bs-light);
    display: flex;
}
@media (max-width: 767.98px) {
    .mypage .mypage-header {
        display: block;
    }
    .mypage .mypage-header > div + div {
        border-top: 1px solid #e6e7e8;
    }
}
.mypage .mypage-from {
    padding: 15px;
    flex: 1;
}
.mypage .mypage-from strong {
    font-size: 16px;
    font-weight: 600;
}
.mypage .mypage-to {
    padding: 15px;
    flex: 1;
}
.mypage .mypage-to strong {
    font-size: 16px;
    font-weight: 600;
}

.mypage-content {
    display: flex;
    flex-direction: column;
}
.mypage-content .grid-btn-group {
    margin-bottom: 10px;
    text-align: right;
}

.mypage-content .grid-btn-group .btn-group:not(:last-child) {
    margin-right: 5px;
}

.mypage .mypage-date {
    text-align: right;
    padding: 15px;
    flex: 1;
}
@media (max-width: 767.98px) {
    .mypage .mypage-date {
        text-align: left;
    }
}
.mypage .mypage-date .date {
    font-size: 16px;
    font-weight: 600;
}
.mypage .mypage-price {
    background: var(--bs-light);
    width: 100%;
    display: flex;
}
@media (max-width: 575.98px) {
    .mypage .mypage-price {
        display: block;
    }
}
.mypage .mypage-price .small,
.mypage .mypage-price small {
    font-size: 12px;
    font-weight: 400;
    display: block;
}
.mypage .mypage-price .mypage-price-right {
    margin-left: auto;
    padding: 15px;
    font-size: 28px;
    font-weight: 300;
    position: relative;
    vertical-align: bottom;
    text-align: right;
    color: var(--bs-light);
    background: var(--bs-dark);
    min-width: 25%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.mypage .mypage-price .mypage-price-right .small,
.mypage .mypage-price .mypage-price-right small {
    display: block;
    opacity: 0.6;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
}
.mypage .mypage-price .mypage-price-left {
    padding: 15px;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    vertical-align: middle;
    flex: 1;
}
.mypage .mypage-price .mypage-price-left .mypage-price-row {
    display: flex;
    align-items: center;
}
@media (max-width: 575.98px) {
    .mypage .mypage-price .mypage-price-left .mypage-price-row {
        display: block;
        text-align: center;
    }
}
.mypage .mypage-price .mypage-price-left .mypage-price-row .sub-price {
    padding: 0 15px;
}
@media (max-width: 767.98px) {
    .mypage .mypage-price .mypage-price-left .mypage-price-row .sub-price {
        padding: 0;
    }
    .mypage .mypage-price .mypage-price-left .mypage-price-row .sub-price + .sub-price {
        padding-left: 15px;
    }
}
@media (max-width: 575.98px) {
    .mypage .mypage-price .mypage-price-left .mypage-price-row .sub-price + .sub-price {
        padding-left: 0;
    }
}
.mypage .mypage-footer {
    border-top: 1px solid var(--bs-component-border-color);
    padding-top: 15px;
    font-size: 11px;
    color: rgba(var(--bs-component-color-rgb), 0.5);
}
.mypage .mypage-note {
    color: rgba(var(--bs-component-color-rgb), 0.5);
    margin-top: 80px;
    font-size: 11px;
    line-height: 1.75;
}
.mypage .table-mypage {
    font-size: 13px;
}
@media (max-width: 767.98px) {
    .mypage .table-mypage {
        white-space: nowrap;
    }
}
/*END mypage-content*/


/* 탭메뉴의 닫기 버튼을 위해서 */
.app-menu-tab {
    background-color: var(--bs-component-bg);
    border-bottom: 1px solid var(--bs-app-theme);
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    z-index: 0;
}
/* 탭 본문은 탭 줄과 같은 면 색이다. 라이트는 흰색, 다크는 컴포넌트 면 색을 따른다. 명세 외 판단(2026-11-10 사용자 승인). 근거: Color Admin 6.0 업그레이드 작업명세 v1.1 > 3. 수정 허용 파일 */
.app-menu-tab-content {
	background-color: var(--bs-component-bg);
	color: var(--bs-component-color);
}

.app-menu-tab .nav-link {
	display: flex;
    color: var(--bs-component-color);
}

.app-menu-tab .nav-link.active,
.app-menu-tab .show>.nav-link {
    background-color: var(--bs-app-theme);
    color: var(--bs-app-theme-color);
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}

/******************************************************************************************************************/
/* toastUI grid 글꼴 조정 */
.tui-grid-container {
	font-size: 12px;
	font-weight: 500;
	font-family: Pretendard;
}

.tui-grid-container p,
.tui-grid-container input,
.tui-grid-container textarea {
	font-size: 12px;
	font-weight: 500;
	font-family: Pretendard;
}
/* toastUI grid 체크박스 세로 가운데에 맞추기.. */
.tui-grid-cell-header input[type="checkbox"] {
    margin-top: 4px;
}
.tui-grid-row-header-checkbox {
	font-size: 13px;
}

/* toastUI grid - 다크모드에서도 라이트모드 색상 유지 */
/* (셀/헤더 배경·글자색은 tui-grid.css 기본값을 그대로 사용) */

/* 헤더 글자색은 다크모드에서만 밝게 유지 */
[data-bs-theme="dark"] .tui-grid-cell-header {
    background-color: var(--bs-light) !important;
    color: var(--bs-component-color) !important;
}

/* 그리드 영역(wrapper) 배경만 투명 처리 */
[data-bs-theme="dark"] .tui-grid-header-area,
[data-bs-theme="dark"] .tui-grid-body-area,
[data-bs-theme="dark"] .tui-grid-content-area,
[data-bs-theme="dark"] .tui-grid-summary-area,
[data-bs-theme="dark"] .tui-grid-lside-area,
[data-bs-theme="dark"] .tui-grid-rside-area {
    background-color: transparent !important;
}

/* toastUI grid 스크롤바 다크모드 톤 조정 */
[data-bs-theme="light"] .tui-grid-container,
.tui-grid-container {
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
    scrollbar-width: thin;
}
[data-bs-theme="light"] .tui-grid-container ::-webkit-scrollbar,
.tui-grid-container ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-bs-theme="light"] .tui-grid-container ::-webkit-scrollbar-track,
.tui-grid-container ::-webkit-scrollbar-track {
    background: transparent;
}
[data-bs-theme="light"] .tui-grid-container ::-webkit-scrollbar-thumb,
.tui-grid-container ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-bs-theme="light"] .tui-grid-container ::-webkit-scrollbar-thumb:hover,
.tui-grid-container ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.32);
}

[data-bs-theme="dark"] .tui-grid-container {
    scrollbar-color: rgba(var(--bs-white-rgb), 0.28) transparent;
    scrollbar-width: thin;
}
[data-bs-theme="dark"] .tui-grid-container ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-bs-theme="dark"] .tui-grid-container ::-webkit-scrollbar-track {
    background: transparent;
}
[data-bs-theme="dark"] .tui-grid-container ::-webkit-scrollbar-thumb {
    background-color: rgba(var(--bs-white-rgb), 0.22);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
[data-bs-theme="dark"] .tui-grid-container ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--bs-white-rgb), 0.32);
}

/* color-scheme:dark 시 체크박스가 검은 네모로 보이는 현상 방지 */
[data-bs-theme="dark"] .tui-grid-container input[type="checkbox"] {
    color-scheme: light;
    accent-color: var(--bs-primary);
}

/* toastUI grid 셀 편집 input - 다크모드 가독성 */
/* [data-bs-theme="dark"] .tui-grid-layer-editing input.tui-grid-content-text,
[data-bs-theme="dark"] .tui-grid-layer-editing textarea,
[data-bs-theme="dark"] .tui-grid-layer-editing select {
    background-color: var(--bs-component-bg);
    color: var(--bs-component-color);
    border-color: var(--bs-border-color);
} */

/* 그리드 툴바 - 데이터 개수 badge (bg-default는 다크모드 미대응) */
[data-bs-theme="dark"] .mypage-content .grid-btn-group span.badge[data-id="count"] {
    background-color: var(--bs-component-secondary-bg) !important;
    color: var(--bs-component-color) !important;
}

/******************************************************************************************************************/
/* sweetalert 본문텍스트 조정 */
.swal-overlay .swal-modal .swal-text {
    font-size: 1.0rem;
    padding: .9375rem 0;
    /*max-height: 30rem;*/
    /*overflow: auto;*/
}

/******************************************************************************************************************/
/* 상단 1레벨 업무 메뉴 active. 근거: Color Admin 6.0 업그레이드 작업명세 v1.0 > W6 */
#top-navbar > .top-menu-item.active > .menu-link,
#top-navbar > .top-menu-item > .menu-link.active {
    background: rgba(var(--bs-app-theme-rgb), 0.12);
    color: var(--bs-app-theme);
    font-weight: 600;
    border-radius: 4px;
    opacity: 1;
}
#top-navbar > .top-menu-item.active > .menu-link .fa,
#top-navbar > .top-menu-item > .menu-link.active .fa {
    color: var(--bs-app-theme);
}
/* 상단 1레벨 메뉴명은 리사이즈해도 두 줄로 깨지지 않게 한다. */
#top-navbar > .top-menu-item {
	flex-shrink: 0;
}
#top-navbar > .top-menu-item > .menu-link {
	white-space: nowrap;
}

/******************************************************************************************************************/
/* 상단 업무명(1레벨) - 제거됨 */

/* 목적: 필수 입력 라벨 뒤에 * 를 붙이고, 업무 화면의 읽기 전용 칸을 회색으로 보인다.
   이유: 필수 표시를 JSP 글자로 쓰지 않고 class="form-label req"로만 표시한다. 화면마다 두던 읽기 전용 회색 규칙을 한곳에 모은다.
   사용처: 업무 화면 입력폼·조회조건 라벨, 업무 화면(.mypage) 안 readonly 입력칸·disabled select·그리드 cell-readonly 칸
   근거: UI 입력폼 배치·필수 표시 작업명세 v1.1 > 5.2 필수 표시, 5.6 readonly / disabled */
:root {
	--req-color: var(--bs-danger);
}
.form-label.req::after {
	content: " *";
	color: var(--req-color);
}
.mypage .form-control[readonly],
.mypage .form-select:disabled {
	background-color: var(--bs-component-disabled-bg);
}
.mypage .tui-grid-cell.cell-readonly {
	background-color: var(--bs-component-disabled-bg);
}
/****/

/* 목적: 업무화면 본문 영역(좌우 열, 그리드·폼 덩어리)의 제목 모양을 하나로 맞춘다.
   이유: 템플릿 .page-header(24px)는 페이지 제목용이라 영역 제목으로는 크고, 화면마다 크기가 달라지지 않게 공통 클래스로 둔다.
   사용처: 업무 화면 div.mypage-content 첫 자식 h2.mypage-subtitle, 보조 설명은 안쪽 small
   근거: UI 입력폼 배치·필수 표시 작업명세 v1.4 > 5.11 영역 제목 */
.mypage .mypage-subtitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 5px;
}
.mypage .mypage-subtitle small {
	font-size: 12px;
	font-weight: 400;
	margin-left: 5px;
}

/* 목적: 조회조건의 라벨과 입력칸이 한 묶음으로 함께 줄바꿈되게 한다.
   이유: 라벨과 입력칸이 따로 col-auto이면 폭이 모자랄 때 라벨만 윗줄에 남는다. 오류 글은 묶음 안 입력칸 아래에 둔다.
   사용처: 업무 화면 조회조건 줄(mypage-from 안 row)과 TMMA0012 우측 세부 검색줄의 div.cm-srch-item, div.cm-srch-ctl
   근거: UI 입력폼 배치·필수 표시 작업명세 v1.4 > 5.12 조회조건 묶음 줄바꿈 */
.mypage .cm-srch-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.mypage .cm-srch-item > .col-form-label {
	flex: 0 0 auto;
	white-space: nowrap;
}
.mypage .cm-srch-ctl {
	flex: 0 0 auto;
}

/* 목적: 업무화면이 1024px보다 좁아지지 않게 하고, 좁은 창에서는 탭 본문 안에서만 가로로 스크롤한다.
   이유: AS-IS 화면 폭(약 1030px)보다 좁으면 좌우 분할·조회조건이 깨진다. 사이드바·탭 머리는 그대로 두려고 스크롤을 탭 본문에 둔다. row g-3 음수 여백이 넘치지 않게 좌우 .5rem을 스크롤 상자 안에 둔다.
   사용처: 레이아웃 SYSA0030 탭 본문(.app-menu-tab-content > .tab-pane) 안의 업무 화면 div.mypage
   근거: UI 입력폼 배치·필수 표시 작업명세 v1.4 > 5.13 업무화면 최소 폭, UI 입력폼 배치·필수 표시 작업명세 v1.5 > 5.15 탭 본문 가로 넘침, v1.6 > 5.13 업무화면 최소 폭(탭 안 calc) */
.app-menu-tab-content > .tab-pane {
	overflow-x: auto;
	padding-inline: .5rem;
	margin-inline: -.5rem;
}
.app-menu-tab-content .mypage {
	min-width: 1024px;
}
/* 탭 본문 바로 안 업무화면은 탭 본문 좌우 padding(.5rem×2)만큼 최소 폭을 뺀다. 탭 본문 clientWidth 1024에서 가로로 넘치지 않게 한다.
   D37 padding-inline .5rem과 짝이므로 함께 바꿀 것.
   근거: UI 입력폼 배치·필수 표시 작업명세 v1.6 > 5.13 업무화면 최소 폭 */
.app-menu-tab-content > .tab-pane > [form-id] > .mypage {
	min-width: calc(1024px - 1rem);
}
/* 메뉴 코드(page-header)와 breadcrumb 은 mypage 밖에 있어 최소 폭이 안 걸렸다.
   화면 묶음 전체에 같은 최소 폭을 주어 코드 줄 오른쪽 끝이 본문과 맞는다.
   1280px 은 템플릿 boxed 레이아웃 값이고, 업무화면 고정 최소 폭은 1024px 이다.
   명세 외 판단(2026-11-10 사용자 승인). 근거: UI 입력폼 배치·필수 표시 작업명세 v1.6 > 5.13 업무화면 최소 폭, Color Admin 6.0 업그레이드 작업명세 v1.1 > 3. 수정 허용 파일 */
.app-menu-tab-content > .tab-pane > [form-id] {
	min-width: calc(1024px - 1rem);
}

/* 목적: 체크박스 하나짜리 칸을 옆 입력칸(form-control-sm) 높이에 맞춰 세로 가운데에 둔다.
   이유: 화면마다 inline style로 높이를 쓰지 않게 한다. 값은 TMMA0011 팝업 수정분(사용자 승인)의 값을 그대로 옮긴다.
   사용처: 업무화면 입력폼의 체크박스 칸(div.d-flex.align-items-center.cm-check-align > div.form-check)
   근거: UI 입력폼 배치·필수 표시 작업명세 v1.5 > 5.5 checkbox / radio */
.mypage .cm-check-align {
	min-height: calc(1.5 * 0.75rem + 0.625rem + 2px);
}

/* 헤더 로고. 템플릿 brand-icon 삼각형은 24px에서 돋보기처럼 보인다.
   둥근 사각형은 테마색을 따르고, e는 흰색으로 둔다. 로그인 화면은 같은 표시를 28px로 키운다.
   파비콘은 문서 밖 그림이라 테마색을 받을 수 없어 esep-favicon.svg를 회색으로 고정한다. 명세 외 판단(2026-11-10 사용자 승인). 근거: Color Admin 6.0 업그레이드 작업명세 v1.1 > 3. 수정 허용 파일 */
.brand-logo .esep-mark {
	width: 24px;
	height: 24px;
	margin-inline-end: .6rem;
	color: var(--bs-app-theme, #00acac);
	display: inline-block;
	vertical-align: -5px;
	flex: 0 0 auto;
}

/* 헤더 검색 돋보기. 템플릿은 form이 position 기준이라 아이콘이 입력칸 왼쪽에 붙는다.
   이 화면은 페이지 전체 form 때문에 검색 form을 쓸 수 없어, div에 같은 기준을 둔다. 명세 외 판단(2026-11-10 사용자 승인). 근거: Color Admin 6.0 업그레이드 작업명세 v1.1 > 3. 수정 허용 파일 */
.app-header .menu-item-form .header-search {
	position: relative;
	max-width: 760px;
	display: block;
	flex: 1;
}

/* 대시보드 카드를 옮길 때 빈 자리. 헤더는 5.5 패널 제목처럼 잡는다. 명세 외 판단(2026-11-10 사용자 승인). 근거: Color Admin 6.0 업그레이드 작업명세 v1.1 > 3. 수정 허용 파일 */
#nav-tab-dashboard .card > .card-header {
	cursor: move;
}
#nav-tab-dashboard .dashboard-sort-placeholder {
	visibility: visible !important;
	background: rgba(var(--bs-app-theme-rgb), 0.08);
	border: 1px dashed var(--bs-app-theme);
	border-radius: 8px;
	margin-bottom: 1rem;
}

/* 사이드바 Perfect Scrollbar 막대를 항상 보이게 한다.
   템플릿은 호버 전 opacity:0 이라, 휠이 없으면 스크롤할 수단이 없다.
   명세 외 판단(2026-11-10 사용자 승인). */
#sidebar .app-sidebar-content.ps--active-y > .ps__rail-y {
	opacity: 0.6;
}
#sidebar .app-sidebar-content.ps--active-y > .ps__rail-y:hover {
	opacity: 0.9;
}