html.loading
,html.loading a
,html.loading button { cursor:wait !important; }



body { font-family:'NanumSquare' !important; }
hr { margin: 0.5rem 0 !important; }
form { padding:0; margin:0; }

input
,textarea { font-family:'D2Coding' !important; }

a:link { color:unset; text-decoration: auto; }
a:hover { font-weight: bolder; }




.brand-link img {
	filter: drop-shadow(1px 0 1px white)
	drop-shadow(-1px 0 1px white)
}


nav .nav.nav-treeview hr { margin: 0 0 0 10px !important; padding: 0; color: white; }
nav .nav.nav-treeview .nav-item { margin: 0 0 0 10px !important; background-color: rgba(255, 255, 255, 0.1); }


nav.navbar .container-fluid { padding: 0; }


.btn-sort { border:0; background-color: transparent; }

.btn-xsm {
	padding: 0.1rem !important;
	font-size: 0.8rem !important;
}

table.table .format_won { text-align: right; position:relative; }
table.table .format_won::before {
	content: "₩"; /* ① 유니코드 */
	position: absolute;
	left: 0;
	color:silver;
  }

table.table.table-sm thead tr th
,table.table.table-sm thead tr td { font-size: 0.9rem !important; }
table.table.table-sm tbody tr th
,table.table.table-sm tbody tr td { font-size: 0.8rem !important; }


table.table thead tr th
,table.table thead tr td { text-align:center; white-space: nowrap; }
table.table tbody tr th
,table.table tbody tr td { text-align:center; font-family:'D2Coding' !important; white-space: nowrap; }

.row .form-control {
	min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: var(--bs-border-radius-sm);
}


.btn-info { color: #FFF !important; }
.btn-warning { color: #FFF !important; }
.btn-success { color: #FFF !important; }

.tox-tinymce-aux { z-index:6000 !important; }


/* .scoreboard { border-collapse: separate; border-spacing: 1px; }
.scoreboard a { text-decoration: auto; } */

.scoreboard { display: flex; flex-wrap: wrap; gap:5px; }

.scoreboard dl { margin:0; padding:0; display: flex; flex-wrap: wrap; border-radius: 5px; }

.scoreboard dt
,.scoreboard dd { padding:4px; }



.scoreboard dt
,.scoreboard dd {
	/*height:100%;*/ min-width:30px; margin:0;
	/* display:inline-block; */
	/* border-style: solid; border-width: 1px; border-color:rgba(0,0,0,0.2); */
}

.scoreboard dt
,.scoreboard dt a
,.scoreboard dd
,.scoreboard dd a { font-size:14px; font-family:'D2Coding'; font-weight:normal; }

.scoreboard span { border-radius:5px; padding:0 5px; }
.scoreboard button { padding:0; margin:0; border:0; background-color:transparent; color: inherit; }

@keyframes blink-effect {
  0% {
	background-color:red;
	color:white;
  }
  50% {
	background-color:transparent;
	color:black;
  }
  100% {
	background-color:red;
	color:white;
  }
}

.scoreboard .active { animation: blink-effect 1s linear infinite; }


.scoreboard .depo dt { background-color:blue; color:white !important; }
.scoreboard .depo a { color:black; }
.scoreboard .depo { border-style: solid; border-width: 1px; border-color:blue; }

.scoreboard dl.depo:hover { background-color:rgba(0,0,255,0.2); }
.scoreboard .depo dd:hover { background-color:blue; color:white !important; }
.scoreboard .depo dd:hover a { color:white !important; }

.scoreboard .with dt { background-color:red; color:white !important; }
.scoreboard .with a { color:black; }
.scoreboard .with { border-style: solid; border-width: 1px; border-color:red; }

.scoreboard dl.with:hover { background-color:rgba(255,0,0,0.2); }
.scoreboard .with dd:hover { background-color:red; color:white !important; }
.scoreboard .with dd:hover a { color:white !important; }

.scoreboard .acct dt { background-color:green; color:white !important; }
.scoreboard .acct a { color:black; }
.scoreboard .acct { border-style: solid; border-width: 1px; border-color:green; }
.scoreboard dl.acct:hover { background-color:rgba(0,255,0,0.2); }
.scoreboard .acct dd:hover { background-color:green; color:white !important; }
.scoreboard .acct dd:hover a { color:white !important; }

.scoreboard .consult dt { background-color:#ffc107; color:white !important; }
.scoreboard .consult a { color:black; }
.scoreboard .consult { border-style: solid; border-width: 1px; border-color:#ffc107; }
.scoreboard dl.consult:hover { background-color:rgba(255,193,7,0.2); }
.scoreboard .consult dd:hover { background-color:#ffc107; color:white !important; }
.scoreboard .consult dd:hover a { color:white !important; }



/*=============================================================================+
| colors
------------------------------------------------------------------------------*/
.data-date-today
,.data-date-today a { font-weight:bold; }

.code-res-ok
,.code-res-success { color:green !important; }

.code-res-fail
,.code-res-error { color:red !important; }

.code-stat-standby
,.code-stat-standby td { color:orange !important; }

.code-mode-test td { color:gray !important; }

.code-stat-remove
,.code-stat-remove td { color:red !important; text-decoration: line-through; }

.code-stat-fail
,.code-stat-fail td { color:red !important; }
,.code-stat-cancel
,.code-stat-cancel td { color:red !important; }

td.code-mode-test { color:orange !important; }
td.code-mode-live { color:blue !important; }

/*=============================================================================+
| popup
------------------------------------------------------------------------------*/

.popWrap {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(2px);
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	overflow: scroll;
}

/* 팝업 레벨 z-index
     _popup 5000 (.popWrap)  <  _auth 5500 (.popAuthWrap)  <  _term 6000 (.popTermWrap)
     로그인·회원가입은 일반 팝업 위에, 약관 더보기는 그 위에 올린다 */
.popWrap.popAuthWrap { z-index: 5500; }
.popWrap.popTermWrap { z-index: 6000; }

/*
popContWrap 은 세로 3단이다 : popHead(콘텐츠 높이) / popBody(남는 높이) / popFoot(콘텐츠 높이)
  body 가 남는 높이를 갖게 해야 그 안에서 스크롤이 된다
  ⚠️ display:flex 로 바꾸면 블록 레벨이 되어 폭이 꽉 차버린다 → 폭 미지정 팝업(어드민)이 깨진다.
     shrink-to-fit 을 유지하려면 inline-flex 여야 한다
  ⚠️ popBody 에 min-height:0 이 없으면 flex 아이템이 콘텐츠보다 작아지지 않아
     내부 요소의 overflow:auto / max-height:100% 가 전혀 동작하지 않는다
*/
.popWrap .popContWrap {
	background-color: white;
	border-radius: 10px;
	display: inline-flex;
	flex-direction: column;
	position: relative;
	margin: 20px;
	box-shadow: 0 0 10px 2px black;
}

.popWrap .popContWrap .popHead
,.popWrap .popContWrap .popFoot { flex: 0 0 auto; }

.popWrap .popContWrap .popBody { flex: 1 1 auto; min-height: 0; }

.popWrap .popContWrap .popBody {
	/* min-width: 100px;
	min-height: 40px;
	max-height: calc(100vh - 50px);
	overflow: auto; */
}

.popWrap .popContWrap .popBody .card-body { font-family:'D2Coding' !important; }

.popWrap .popContWrap .popTool { font-size: 35px;
	position: absolute;
	z-index: 1;
	right: -20px;
	top: -20px; }

.popWrap .popContWrap .popBody { padding-left:0; padding-right:0; }

.popWrap .popContWrap .popBody .card .card-body {
	min-width: 100px;
	max-width: 1100px;
	min-height: 40px;
	max-height: calc(100vh - 200px);
	overflow: auto;
}

/* .popWrap .popContWrap .popBody .container .row .card .card-body { max-height: calc(100vh - 200px); overflow-x: auto; } */





/*=============================================================================+
| notice
------------------------------------------------------------------------------*/

.noticeWrap {
	position: fixed; z-index: 6000;
	right: 0; bottom: 0;
	overflow: scroll;
}


.noticeWrap .noticeContWrap {
	background-color: white;
	border-radius: 5px;
	/* display: inline-block; */
	position: relative;
	margin: 20px;
	box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.noticeWrap .noticeContWrap .noticeHead { text-align:center; }
.noticeWrap .noticeContWrap .noticeHead { background-color:rgba(0,0,0,0.1); }

.noticeWrap .noticeContWrap .noticeBody {
	/* min-width: 100px;
	min-height: 40px;
	max-height: calc(100vh - 50px);
	overflow: auto; */
}

.noticeWrap .noticeContWrap .noticeFoot { text-align: right; }

.noticeWrap .noticeContWrap .noticeTool { font-size: 20px;
	position: absolute; z-index: 1;
	left: -10px; top: -10px; }

.noticeWrap .noticeContWrap .noticeBody { padding-left:0; padding-right:0; }

.noticeWrap .noticeContWrap .noticeBody  {
	min-width: 200px;
	min-height: 40px;
	max-height: calc(100vh - 200px);
	overflow: auto; }


/* 유형별 색 : 클래스(notice_warning) 대신 data 속성으로 — 다른 이름 규칙과 섞이지 않게 */
.noticeWrap .noticeContWrap[data-notice-type="warning"] { background-color:#ffc107; color:white; }
.noticeWrap .noticeContWrap[data-notice-type="danger"] { background-color:#dc3545; color:white; }
.noticeWrap .noticeContWrap[data-notice-type="primary"] { background-color:#0d6efd; color:white; }



.noticeWrap .noticeContWrap .noticeTool { color:black; }



/*=============================================================================+
| ul li tab menu
+-----------------------------------------------------------------------------*/

ul.tabMenu { padding:4px; margin:0 0 10px 0; list-style:none; display:flex; gap:3px; background-color:rgba(0,0,0,0.06); border-radius:8px; width:fit-content; }
ul.tabMenu li {  }
ul.tabMenu li span { padding:5px 16px; border-radius:6px; cursor:pointer; font-size:0.875rem; font-weight:500; display:block; transition:background-color 0.15s; }
ul.tabMenu li input { display:none; }
ul.tabMenu li input[type="radio"]:checked + span { background-color:#0d6efd; color:white; box-shadow:0 1px 3px rgba(13,110,253,0.4); }
ul.tabMenu li label:hover span { background-color:rgba(0,0,0,0.08); }
ul.tabMenu li input[type="radio"]:checked + span:hover { background-color:#0b5ed7; }

/*=============================================================================+
| pagination
+-----------------------------------------------------------------------------*/

.pagination { gap: 3px; flex-wrap: wrap; justify-content: center; }
.pagination .page-item { list-style: none; }
.pagination .page-item button {
	display: block;
	padding: 0.3rem 0.3rem;
	font-size: 0.85rem;
	background: transparent;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	color: #0d6efd;
	cursor: pointer;
	min-width: 25px;
	text-align: center;
	line-height: 1.4;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	font-family: 'D2Coding' !important;
}
.pagination .page-item button:hover {
	background-color: #e9ecef;
	border-color: #adb5bd;
	color: #0a58ca;
}
.pagination .page-item button.active {
	background-color: #0d6efd;
	border-color: #0d6efd;
	color: white !important;
	font-weight: bold;
}
.pagination .page-item[data-page-btn="first"] button,
.pagination .page-item[data-page-btn="last"] button {
	color: #6c757d;
	font-weight: bold;
	letter-spacing: -1px;
}
.pagination .page-item[data-page-btn="first"] button:hover,
.pagination .page-item[data-page-btn="last"] button:hover {
	color: #0d6efd;
	background-color: #e9ecef;
}

body.theme-dark .pagination .page-item button { border-color:#444; color:#79adf5; background-color:transparent; }
body.theme-dark .pagination .page-item button:hover { background-color:#444; color:#79adf5; border-color:#555; }
body.theme-dark .pagination .page-item button.active { background-color:#0d6efd; border-color:#0d6efd; color:white !important; }
body.theme-dark .pagination .page-item[data-page-btn="first"] button,
body.theme-dark .pagination .page-item[data-page-btn="last"] button { color:#999; }

/*=============================================================================+
| thFiles
+-----------------------------------------------------------------------------*/

.thFilesViewWrap
,.thFilesViewWrap ul { padding:0; display:flex; flex-wrap: wrap; }
.thFilesViewWrap li { list-style: none;
	flex-grow: 1;
	flex-basis: 100%;

	display: flex;

}
.thFilesViewWrap li .ico { width: 40px;
	height: 40px;
	background-position: center;
	background-size: cover;
	border: 1px solid silver;
	border-radius: 5px;
	display: inline-block; }

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


.thFilesWrap { display: flex; flex-wrap: wrap; position:relative; }
.thFilesWrap .thFilesMenu { width:100%; position:relative; }
.thFilesWrap .thFilesMenu input[type="file"] { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; }
.thFilesWrap .thFilesMenu label { width:100%; height:100%; margin:0; padding:0; text-align:center; display:flex; gap:5px; justify-content: center; align-items: center; border:2px dotted rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1); border-radius:5px;}

.thFilesWrap .thFilesMenu label .icon { font-size:20px; }
.thFilesWrap .thFilesMenu label .info { font-size:10px; }

.thFilesWrap .thFilesMenu .bi-cloud-plus-fill { display:none; }

.thFilesWrap .thFilesMenu:hover .bi-cloud-plus { display:none; }
.thFilesWrap .thFilesMenu:hover .bi-cloud-plus-fill { display:unset; }
.thFilesWrap .thFilesMenu:hover label { border:2px dotted rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2); }


.thFilesWrap .thFilesMenu .thFilesProgress {
	width: 100%; height: 100%;
	position: absolute; z-index: 1;
	text-align: center;
	background-color: white;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 10px;
	text-shadow: 1px 1px 0px white;

	display:none;
}



.thFilesWrap .thFilesItemBox { width:100%; border:2px dotted transparent; border-radius:5px; }
.thFilesWrap .thFilesItemBox:hover { background-color: rgba(0,0,0,0.1); border:2px dotted rgba(0,0,0,0.1); }
.thFilesWrap .thFilesItemBox:hover .thFilesBtn { opacity:1; }

.thFilesWrap .thFilesItemBox { min-width:10%; max-width:100px; }


/* .thFilesWrap .thFilesItemBox { display:grid; grid-template-columns: 60px auto 20px; }
.thFilesWrap .thFilesItemBox .thFilesThumb { grid-column: 1 / 2; grid-row: 1 / span 3; }
.thFilesWrap .thFilesItemBox .thFilesItem { grid-column: 2 / 3; }
.thFilesWrap .thFilesItemBox .thFilesBtn { grid-column: 3 / 4; }
.thFilesWrap .thFilesItemBox .thFilesOpt { grid-column: 2 / 4; grid-row: 2 / 3; } */

.thFilesWrap .thFilesItemBox .thFilesThumb {
	width:100%; height:75px;
	border:1px solid silver; border-radius:5px;
	background-size: contain; background-position: center; background-repeat: no-repeat;
	position: relative;
}


.thFilesWrap .thFilesItemBox .thFilesLabel { width:100%; text-align: center; position:absolute; bottom:0; padding:2px 0; font-size:12px; text-shadow: 1px 1px white; }


.thFilesWrap .thFilesItemBox .thFilesBtn { text-align: center; opacity:0.2; }
.thFilesWrap .thFilesItemBox .thFilesBtn i { cursor:pointer; }

/* 카드 순서 변경 : 드래그앤드롭 */
.thFilesWrap .thFilesItemBox .thFilesThumb { cursor:grab; }
.thFilesWrap .thFilesItemBox.thFilesDragging { opacity:0.35; }
.thFilesWrap .thFilesItemBox.thFilesDragging .thFilesThumb { cursor:grabbing; }
.thFilesWrap .thFilesItemBox.thFilesDragOver { border:2px dashed #0d6efd; background-color: rgba(13,110,253,0.08); }

.thFilesWrap .thFilesItemBox .thFilesOpt { font-size:12px; display:flex; }
.thFilesWrap .thFilesItemBox .thFilesOpt * { width:100%; }

/*=============================================================================+
| calendar
+-----------------------------------------------------------------------------*/
.calendarWrap {
	border: 1px solid rgba(0,0,0,0.15);
	display: grid; grid-template-columns: repeat(7, 1fr);
	border-radius: 8px; overflow: hidden;
}
.calendarWrap .head {
	border: 1px solid rgba(0,0,0,0.1);
	margin-left: -1px; margin-top: -1px;
	box-sizing: border-box; text-align: center;
	font-weight: bold; padding: 7px 4px;
	background-color: #f0f2f5; font-size: 0.85rem; color: #444;
}
.calendarWrap .head:nth-child(1) { color: #dc3545 !important; background-color: #fff5f5; }
.calendarWrap .head:nth-child(7) { color: #0d6efd !important; background-color: #f0f4ff; }

.calendarWrap .day {
	border: 1px solid rgba(0,0,0,0.08);
	margin-left: -1px; margin-top: -1px;
	box-sizing: border-box; padding: 5px; font-size: 12px;
	transition: background-color 0.1s;
	min-height: 90px;
}
.calendarWrap .day:hover { background-color: rgba(13,110,253,0.04); }
.calendarWrap .day.today { background-color: #fffbf0; }

.calendarWrap .w_0 > label { color: #dc3545 !important; font-weight: 600; }
.calendarWrap .w_6 > label { color: #0d6efd !important; font-weight: 600; }

.calendarWrap .day > label {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	margin: 0 auto 3px; font-weight: 500; font-size: 0.85rem;
}
.calendarWrap .day.today > label { background-color: #ffc107; color: #000 !important; font-weight: bold; }

.calendarWrap .day table { width:100%; }
.calendarWrap .day table tr td:nth-child(3) { text-align: right; font-family: 'D2Coding'; }
.calendarWrap .day table tr td:nth-child(2) { color: #999; font-size: 0.7rem; }
.calendarWrap .day table tr th { color: #888; font-size: 0.7rem; font-weight: normal; text-align: left; padding: 1px 2px; white-space: nowrap; }
.calendarWrap .day table tr:nth-child(1) th { color: #198754; font-weight: 600; }
.calendarWrap .day table tr:nth-child(1) td:nth-child(3) { color: #198754; font-weight: bold; }
.calendarWrap .day table tr:nth-child(2) th,
.calendarWrap .day table tr:nth-child(3) th { color: #0d6efd; }
.calendarWrap .day table tr:nth-child(4) th,
.calendarWrap .day table tr:nth-child(5) th { color: #dc3545; }

.calendarWrap .d_01.w_0 { grid-column-start: 1; }
.calendarWrap .d_01.w_1 { grid-column-start: 2; }
.calendarWrap .d_01.w_2 { grid-column-start: 3; }
.calendarWrap .d_01.w_3 { grid-column-start: 4; }
.calendarWrap .d_01.w_4 { grid-column-start: 5; }
.calendarWrap .d_01.w_5 { grid-column-start: 6; }
.calendarWrap .d_01.w_6 { grid-column-start: 7; }

/*=============================================================================+
| statistics / tran
+-----------------------------------------------------------------------------*/

/* 년월 네비게이션 */
.tran-nav-year { font-size: 1.3rem; font-weight: bold; font-family: 'D2Coding' !important; }
.tran-nav-month { font-size: 1.3rem; font-weight: bold; font-family: 'D2Coding' !important; }
.tran-nav-sep { font-size: 1.1rem; color: #aaa; margin: 0 4px; }
.tran-nav-btn { font-size: 1.3rem !important; color: #888 !important; padding: 0.1rem 0.5rem !important; transition: color 0.15s; }
.tran-nav-btn:hover { color: #0d6efd !important; }

/* 요약 카드 */
.tran-summary { display:flex; gap:10px; padding:8px 0 12px; flex-wrap:wrap; }
.tran-summary-item { background-color:#f8f9fa; border-radius:8px; padding:8px 14px; border-left:4px solid #dee2e6; font-size:0.8rem; min-width:140px; }
.tran-summary-item.total { border-left-color:#198754; }
.tran-summary-item.depo { border-left-color:#0d6efd; }
.tran-summary-item.with { border-left-color:#dc3545; }
.tran-summary-item .sum-label { color:#6c757d; font-size:0.75rem; margin-bottom:2px; }
.tran-summary-item .sum-cnt { font-size:0.75rem; color:#888; }
.tran-summary-item .sum-amt { font-weight:bold; font-family:'D2Coding'; font-size:0.9rem; color:#222; }

/* 일일통계 테이블 컬럼 그룹 색상 */
table.tran-daily-table thead tr th:nth-child(2)
,table.tran-daily-table thead tr th:nth-child(3)
,table.tran-daily-table thead tr th:nth-child(4)
,table.tran-daily-table thead tr th:nth-child(5) { background-color:rgba(25,135,84,0.12); color:#198754; }

table.tran-daily-table thead tr th:nth-child(n+6):nth-child(-n+7) { background-color:rgba(13,110,253,0.1); color:#0d6efd; }
table.tran-daily-table thead tr th:nth-child(n+8):nth-child(-n+8) { background-color:rgba(220,53,69,0.1); color:#dc3545; }

table.tran-daily-table tbody tr td:nth-child(n+4):nth-child(-n+9) { background-color:rgba(13,110,253,0.02); }
table.tran-daily-table tbody tr td:nth-child(n+10):nth-child(-n+15) { background-color:rgba(220,53,69,0.02); }

/* table.tran-daily-table tfoot tr td { font-weight:bold; background-color:rgba(0,0,0,0.05); }
table.tran-daily-table tfoot tr td:nth-child(2),
table.tran-daily-table tfoot tr td:nth-child(3) { color:#198754; }
table.tran-daily-table tfoot tr td:nth-child(n+4):nth-child(-n+9) { color:#0d6efd; }
table.tran-daily-table tfoot tr td:nth-child(n+10):nth-child(-n+15) { color:#dc3545; } */

/* dark mode */
body.theme-dark .tran-summary-item { background-color:#2a2a2a; }
body.theme-dark .tran-summary-item .sum-label { color:#999; }
body.theme-dark .tran-summary-item .sum-amt { color:#c2c7d0; }
body.theme-dark .calendarWrap .head { background-color:#2a2a2a; color:#c2c7d0; }
body.theme-dark .calendarWrap .head:nth-child(1) { background-color:#2d1a1a; }
body.theme-dark .calendarWrap .head:nth-child(7) { background-color:#1a1d2d; }
body.theme-dark .calendarWrap .day { border-color:rgba(255,255,255,0.08); }
body.theme-dark .calendarWrap .day:hover { background-color:rgba(255,255,255,0.04); }
body.theme-dark .calendarWrap .day.today { background-color:#2d2a1a; }

/*=============================================================================+
| theme
+-----------------------------------------------------------------------------*/
body.theme-light .light_hide { display: none; }
body.theme-dark .dark_hide { display: none; }

body.theme-dark { color:#c2c7d0 !important; background-color:#111 !important; }
body.theme-dark .app-header { border:1px solid black; }
body.theme-dark .app-header i { color:#c2c7d0; }
body.theme-dark .bg-body { color:#000 !important; background-color:#111 !important; }

body.theme-dark .scoreboard * { color:#c2c7d0; }

body.theme-dark .card { color:#c2c7d0; background-color:#333; }

body.theme-dark .table > :not(caption) > * > * { color:#c2c7d0; background-color:unset; }
body.theme-dark .table { border-color:gray; }

body.theme-dark .form-control
,body.theme-dark .form-select { color:#c2c7d0; background-color:#666; border: 1px solid #444; }

body.theme-dark .app-footer { color:#c2c7d0; background-color:#333; border-top: 1px solid black; }

body.theme-dark .page-link { color:#c2c7d0; background-color:#666; border: 1px solid #444; }

/*=============================================================================+
| userNotice — 종모양 알림함 (마크업 admin/layout/default.php, 동작 triHub.js)
|   이름 규칙 : userNotice + 역할. 토스트 알림(notice*) 과 섞이지 않게 접두사를 붙인다
+-----------------------------------------------------------------------------*/
/* 종 아이콘을 감싸는 li — 배지를 절대배치하려면 기준이 필요하다 */
.userNoticeWrap{ position:relative; }

.userNoticeBellIcon{ font-size:1.05rem; }

#userNoticeBadge{
	position:absolute; top:1px; right:-2px;
	font-size:9px; padding:2px 5px; line-height:1;
}

/* 패널 머리 (최근 알림 / 24시간·최근 20건) */
.userNoticeHead{
	padding:10px 14px; font-weight:700;
	border-bottom:1px solid rgba(128,128,128,.25);
	display:flex; justify-content:space-between; align-items:center;
}
.userNoticeHead small{ color:#888; font-weight:400; }

#userNoticePanel{
	display:none; position:absolute; right:0; top:100%;
	width:344px; max-width:calc(100vw - 16px); max-height:460px; overflow-y:auto;
	background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529);
	border:1px solid rgba(0,0,0,.15); border-radius:8px;
	box-shadow:0 8px 26px rgba(0,0,0,.28); z-index:1050;
}
@media (max-width:576px){
	#userNoticePanel{ position:fixed; top:56px; left:8px; right:8px; width:auto; max-width:none; max-height:76vh; }
}

/* 안내문 (불러오는 중·실패·없음) — 색은 상태별로 다르므로 클래스를 나눈다 */
.userNoticeMsg{ padding:22px 14px; text-align:center; font-size:13px; color:#999; }
.userNoticeMsg.userNoticeMsgFail{ color:#c00; }

/* 알림 1건 */
.userNoticeItem{
	display:block; padding:9px 14px;
	border-bottom:1px solid rgba(128,128,128,.18);
	text-decoration:none; color:inherit;
}
#userNoticePanel .userNoticeItem:last-child{ border-bottom:0 !important; }

/* 읽음·취소 처리분은 흐리게 */
.userNoticeItem.userNoticeItemDim{ opacity:.6; }

.userNoticeItemHead{ display:flex; justify-content:space-between; gap:8px; }
.userNoticeItemHead strong{ font-size:13px; }
.userNoticeItemTime{ color:#999; white-space:nowrap; }
.userNoticeItemBody{ font-size:12px; color:#888; margin-top:2px; word-break:break-all; }
.userNoticeItemStat{ font-size:11px; margin-top:3px; font-weight:600; color:#888; }

/* 상태별 색 — JS 가 색을 문자열로 들고 있지 않게 여기서 정한다 */
.userNoticeItemStat[data-stat="standby"]{ color:#f59e0b; }
.userNoticeItemStat[data-stat="read"]{ color:#16a34a; }
.userNoticeItemStat[data-stat="cancel"]{ color:#dc2626; }
.userNoticeItemStat[data-stat="reserve"]{ color:#2563eb; }


/*=============================================================================+
| prodCar — 차량관리 카테고리 트리 / 목록
|   이름 규칙 : prodCar + 역할
+-----------------------------------------------------------------------------*/
.prodCarTreeBox ul { padding:0; margin:0; overflow:auto; height:200px; }

.prodCarTreeItem {
	list-style:none; font-family:'D2Coding'; font-size:12px;
	display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.prodCarTreeItem:hover { font-weight:bold; text-shadow: 1px 1px 0 silver; }

/* 라벨이 남는 폭을 다 먹어야 삭제 버튼이 우측에 붙는다 */
.prodCarTreeLabel { flex:1; min-width:0; }

.prodCarInfoBox ul { padding:0; margin:0; }
.prodCarInfoBox ul li { list-style:none; font-family:'D2Coding'; font-size:12px; }

/* 삭제 버튼 : 항목(트리)·행(목록)에 마우스를 올렸을 때만 보인다
     visibility 로 숨긴다 — display:none 이면 숨을 때 줄 높이가 흔들린다 */
.prodCarRemoveBtn { visibility:hidden; flex-shrink:0; }
.prodCarTreeItem:hover .prodCarRemoveBtn
,tr:hover .prodCarRemoveBtn { visibility:visible; }


/*=============================================================================+
| contlimit — 목록 셀 폭 제한
+-----------------------------------------------------------------------------*/
/* 셀마다 inline style 로 넣던 폭 제한을 클래스로 뺀다.
     .contlimit80 ~ .contlimit200 (10 단위)
   ⚠️ width 가 아니라 max-width 다. td/th 는 auto table-layout 에서 width 를
      '최소 희망값' 으로만 쓰므로, 내용이 길면 셀이 그냥 늘어난다(실측 200px 지정이 2134px).
   ⚠️ … 은 한 줄로 흐를 때만 붙는다(nowrap 을 안 걸어 여러 줄이면 잘리기만 한다).
      기존 consult/index.php 의 max-width+ellipsis 관행과 같게 맞췄다. */
.contlimit80 { max-width:80px; text-overflow:ellipsis; overflow:hidden; }
.contlimit90 { max-width:90px; text-overflow:ellipsis; overflow:hidden; }
.contlimit100 { max-width:100px; text-overflow:ellipsis; overflow:hidden; }
.contlimit110 { max-width:110px; text-overflow:ellipsis; overflow:hidden; }
.contlimit120 { max-width:120px; text-overflow:ellipsis; overflow:hidden; }
.contlimit130 { max-width:130px; text-overflow:ellipsis; overflow:hidden; }
.contlimit140 { max-width:140px; text-overflow:ellipsis; overflow:hidden; }
.contlimit150 { max-width:150px; text-overflow:ellipsis; overflow:hidden; }
.contlimit160 { max-width:160px; text-overflow:ellipsis; overflow:hidden; }
.contlimit170 { max-width:170px; text-overflow:ellipsis; overflow:hidden; }
.contlimit180 { max-width:180px; text-overflow:ellipsis; overflow:hidden; }
.contlimit190 { max-width:190px; text-overflow:ellipsis; overflow:hidden; }
.contlimit200 { max-width:200px; text-overflow:ellipsis; overflow:hidden; }


/*=============================================================================+
| consultMemo — 메모내역 본문
+-----------------------------------------------------------------------------*/
/* 37 에서 온 본문 img 의 65% 가 style 없이 원본 크기라 셀을 넘긴다.
     폭 제한(.contlimit{px}) 과는 관심사가 달라 따로 둔다. */
.consultMemoBody img { max-width:120px; max-height:80px; height:auto; }

/*=============================================================================+
| 폴링 표시 — .app-header 하단 보더 좌우 왕복 스윕
|   polling.run() 이 돌 때마다 pollSweepR / pollSweepL 을 번갈아 붙인다.
|   헤더에 이미 border-bottom 1px 이 있어 그 위에 겹쳐 그린다(레이아웃 밀림 없음).
+=============================================================================*/
.app-header::after
{
	content:'';
	position:absolute;
	bottom:-1px;
	left:-32%;
	width:32%;
	height:2px;
	background:linear-gradient(90deg, rgba(13,110,253,0) 0%, #0d6efd 50%, rgba(13,110,253,0) 100%);
	opacity:0;
	pointer-events:none;
}

.app-header.pollSweepR::after
{
	animation:pollSweepR 1.1s ease-in-out;
}

.app-header.pollSweepL::after
{
	animation:pollSweepL 1.1s ease-in-out;
}

@keyframes pollSweepR
{
	0%   { left:-32%;  opacity:0; }
	12%  { opacity:1; }
	88%  { opacity:1; }
	100% { left:100%;  opacity:0; }
}

@keyframes pollSweepL
{
	0%   { left:100%;  opacity:0; }
	12%  { opacity:1; }
	88%  { opacity:1; }
	100% { left:-32%;  opacity:0; }
}

@media (prefers-reduced-motion: reduce)
{
	.app-header.pollSweepR::after,
	.app-header.pollSweepL::after
	{
		animation:none;
	}
}