/* =========================================================================
 * app.css  —  T-CMS 2.0 리디자인 스타일 (레이아웃 셸 + 대시보드 컴포넌트)
 * 색상은 variables.css 의 토큰(var(--...)) 만 사용합니다.
 * 이 파일과 variables.css 는 common_css.jsp 에서 가장 마지막에 로드되어
 * 기존 AdminLTE/공통 스타일 위에 셸 레이아웃을 덮어씁니다.
 * ========================================================================= */

/* ===== 0. 베이스 ========================================================= */
body.app-shell {
	margin: 0;
	background: var(--c-app-bg);
	color: var(--c-text);
	font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
	-webkit-font-smoothing: antialiased;
}
.app-shell * { box-sizing: border-box; }
.app-shell a { text-decoration: none; }

/* ===== 0-1. SVG 아이콘 (외부 파일 + CSS mask) ============================
 * 인라인 SVG 대신 /static/images/icons/*.svg 를 mask 로 사용.
 * background-color: currentColor 라서 글자색(활성/비활성)을 그대로 상속함.
 * 사용: <i class="svg-ico ico-dashboard"></i>  (크기는 width/height 로 조절)
 * ======================================================================== */
.svg-ico {
	display: inline-block; width: 20px; height: 20px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
	vertical-align: middle; flex: 0 0 auto;
}
.ico-dashboard    { -webkit-mask-image:url(/static/images/icons/icon-dashboard.svg);    mask-image:url(/static/images/icons/icon-dashboard.svg); }
.ico-group        { -webkit-mask-image:url(/static/images/icons/icon-group.svg);        mask-image:url(/static/images/icons/icon-group.svg); }
.ico-content      { -webkit-mask-image:url(/static/images/icons/icon-content.svg);      mask-image:url(/static/images/icons/icon-content.svg); }
.ico-schedule     { -webkit-mask-image:url(/static/images/icons/icon-schedule.svg);     mask-image:url(/static/images/icons/icon-schedule.svg); }
.ico-report       { -webkit-mask-image:url(/static/images/icons/icon-report.svg);       mask-image:url(/static/images/icons/icon-report.svg); }
.ico-settings     { -webkit-mask-image:url(/static/images/icons/icon-settings.svg);     mask-image:url(/static/images/icons/icon-settings.svg); }
.ico-default      { -webkit-mask-image:url(/static/images/icons/icon-default.svg);      mask-image:url(/static/images/icons/icon-default.svg); }
.ico-menu         { -webkit-mask-image:url(/static/images/icons/icon-menu.svg);         mask-image:url(/static/images/icons/icon-menu.svg); }
.ico-bell         { -webkit-mask-image:url(/static/images/icons/icon-bell.svg);         mask-image:url(/static/images/icons/icon-bell.svg); }
.ico-user         { -webkit-mask-image:url(/static/images/icons/icon-user.svg);         mask-image:url(/static/images/icons/icon-user.svg); }
.ico-chevron-right{ -webkit-mask-image:url(/static/images/icons/icon-chevron-right.svg);mask-image:url(/static/images/icons/icon-chevron-right.svg); }
.ico-chevron-left { -webkit-mask-image:url(/static/images/icons/icon-chevron-left.svg); mask-image:url(/static/images/icons/icon-chevron-left.svg); }
.ico-refresh      { -webkit-mask-image:url(/static/images/icons/icon-refresh.svg);      mask-image:url(/static/images/icons/icon-refresh.svg); }
.ico-monitor      { -webkit-mask-image:url(/static/images/icons/icon-monitor.svg);      mask-image:url(/static/images/icons/icon-monitor.svg); }
.ico-check        { -webkit-mask-image:url(/static/images/icons/icon-check-circle.svg); mask-image:url(/static/images/icons/icon-check-circle.svg); }
.ico-power        { -webkit-mask-image:url(/static/images/icons/icon-power.svg);        mask-image:url(/static/images/icons/icon-power.svg); }
.ico-cpu          { -webkit-mask-image:url(/static/images/icons/icon-cpu.svg);          mask-image:url(/static/images/icons/icon-cpu.svg); }
.ico-memory       { -webkit-mask-image:url(/static/images/icons/icon-memory.svg);       mask-image:url(/static/images/icons/icon-memory.svg); }
.ico-hdd          { -webkit-mask-image:url(/static/images/icons/icon-hdd.svg);          mask-image:url(/static/images/icons/icon-hdd.svg); }
.ico-calendar     { -webkit-mask-image:url(/static/images/icons/icon-calendar.svg);     mask-image:url(/static/images/icons/icon-calendar.svg); }
/* Figma T-CMS 2.0 아이콘 세트 (Icon Components 20종, /static/images/tcms2/icons/) */
.ico-save         { -webkit-mask-image:url(/static/images/tcms2/icons/save.svg);        mask-image:url(/static/images/tcms2/icons/save.svg); }
.ico-check-plain  { -webkit-mask-image:url(/static/images/tcms2/icons/check.svg);       mask-image:url(/static/images/tcms2/icons/check.svg); }
.ico-arrow-up     { -webkit-mask-image:url(/static/images/tcms2/icons/arrow-up.svg);    mask-image:url(/static/images/tcms2/icons/arrow-up.svg); }
.ico-arrow-down   { -webkit-mask-image:url(/static/images/tcms2/icons/arrow-down.svg);  mask-image:url(/static/images/tcms2/icons/arrow-down.svg); }
.ico-edit         { -webkit-mask-image:url(/static/images/tcms2/icons/edit-3.svg);      mask-image:url(/static/images/tcms2/icons/edit-3.svg); }
.ico-eye          { -webkit-mask-image:url(/static/images/tcms2/icons/eye.svg);         mask-image:url(/static/images/tcms2/icons/eye.svg); }
.ico-eye-off      { -webkit-mask-image:url(/static/images/tcms2/icons/eye-off.svg);     mask-image:url(/static/images/tcms2/icons/eye-off.svg); }
.ico-folder       { -webkit-mask-image:url(/static/images/tcms2/icons/folder.svg);      mask-image:url(/static/images/tcms2/icons/folder.svg); }
.ico-minus        { -webkit-mask-image:url(/static/images/tcms2/icons/minus.svg);       mask-image:url(/static/images/tcms2/icons/minus.svg); }
.ico-move         { -webkit-mask-image:url(/static/images/tcms2/icons/move.svg);        mask-image:url(/static/images/tcms2/icons/move.svg); }
.ico-download     { -webkit-mask-image:url(/static/images/tcms2/icons/download.svg);    mask-image:url(/static/images/tcms2/icons/download.svg); }
.ico-layout       { -webkit-mask-image:url(/static/images/tcms2/icons/layout.svg);      mask-image:url(/static/images/tcms2/icons/layout.svg); }
.ico-lock         { -webkit-mask-image:url(/static/images/tcms2/icons/lock.svg);        mask-image:url(/static/images/tcms2/icons/lock.svg); }
.ico-plus         { -webkit-mask-image:url(/static/images/tcms2/icons/plus.svg);        mask-image:url(/static/images/tcms2/icons/plus.svg); }
.ico-rotate-ccw   { -webkit-mask-image:url(/static/images/tcms2/icons/rotate-ccw.svg);  mask-image:url(/static/images/tcms2/icons/rotate-ccw.svg); }
.ico-rotate-cw    { -webkit-mask-image:url(/static/images/tcms2/icons/rotate-cw.svg);   mask-image:url(/static/images/tcms2/icons/rotate-cw.svg); }
.ico-search       { -webkit-mask-image:url(/static/images/tcms2/icons/search.svg);      mask-image:url(/static/images/tcms2/icons/search.svg); }
.ico-upload       { -webkit-mask-image:url(/static/images/tcms2/icons/upload.svg);      mask-image:url(/static/images/tcms2/icons/upload.svg); }
.ico-x            { -webkit-mask-image:url(/static/images/tcms2/icons/x.svg);           mask-image:url(/static/images/tcms2/icons/x.svg); }
/* 아이콘 크기 */
.svg-ico.sz-14 { width:14px; height:14px; }
.svg-ico.sz-16 { width:16px; height:16px; }
.svg-ico.sz-18 { width:18px; height:18px; }
.svg-ico.sz-20 { width:20px; height:20px; }
.svg-ico.sz-22 { width:22px; height:22px; }

/* ===== 1. 사이드바 ======================================================= */
.app-sidebar {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: var(--sidebar-w);
	background: var(--c-sidebar-bg);
	border-right: 1px solid var(--c-sidebar-border);
	display: flex;
	flex-direction: column;
	z-index: 1040;
	transition: width .22s ease;
}
.app-sidebar__brand {
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	background: var(--c-sidebar-bg-2);
	border-bottom: 1px solid var(--c-sidebar-border);
	cursor: pointer;
	overflow: hidden;
}
.app-sidebar__brand img { height: 24px; width: auto; display: block; }
.app-sidebar__brand .brand-fallback {
	font-weight: 800; font-size: 20px; letter-spacing: -.5px;
	white-space: nowrap;
}
.app-sidebar__brand .brand-fallback .b-red { color: var(--c-brand-red); }
.app-sidebar__brand .brand-fallback .b-green { color: var(--c-brand-green); }
.app-sidebar__brand .brand-fallback .b-orange { color: var(--c-brand-orange); }

.app-sidebar__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px 0;          /* 좌우 여백 제거 → 메뉴 항목 전체폭 */
	list-style: none;
	margin: 0;
}
.app-sidebar__nav::-webkit-scrollbar { width: 6px; }
.app-sidebar__nav::-webkit-scrollbar-thumb { background: #2d3959; border-radius: 6px; }

.app-nav-item { margin-bottom: 2px; }
.app-nav-item > a.app-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 44px;            /* Figma Nav 항목 높이 */
	padding: 0 20px;
	border-radius: 0;        /* 라운드 제거 → 전체폭 바 */
	color: var(--c-sidebar-text);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.app-nav-item > a.app-nav-link:hover {
	background: var(--c-sidebar-hover-bg);
	color: var(--c-text-invert);
}
.app-nav-item.active > a.app-nav-link {
	background: var(--c-sidebar-active-bg);
	color: var(--c-sidebar-active);
	font-weight: 700;        /* Figma: 활성 메뉴 Bold */
	border-radius: 0;        /* active 라운드 제거 */
	box-shadow: none;        /* active 그림자 제거 */
}
.app-nav-link .app-nav-ico {
	flex: 0 0 18px;
	width: 18px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
}
.app-nav-link .app-nav-ico svg { width: 18px; height: 18px; display: block; }
.app-nav-link .app-nav-ico.svg-ico, .app-nav-link .svg-ico { width: 18px; height: 18px; }
.app-nav-link .app-nav-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.app-nav-link .app-nav-caret {
	flex: 0 0 auto; opacity: .55; transition: transform .2s;
}
.app-nav-item.open > a.app-nav-link .app-nav-caret { transform: rotate(90deg); }

/* 서브메뉴 (Figma: h34, 들여쓰기 48px, 도트 5px 상시 표시) */
.app-subnav {
	list-style: none;
	margin: 1px 0 4px;
	padding: 0;
	display: none;
}
.app-nav-item.open .app-subnav { display: block; }
.app-subnav li a {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 9px 0 27px;  /* 대메뉴 아이콘 중앙 라인(~29px)에 텍스트 시작점 맞춤 */
	font-size: 13px;
	color: var(--c-sidebar-sub-text);
	border-radius: 0;
	white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}
.app-subnav li a::before {
	content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%;
	background: var(--c-sidebar-sub-text);
}
.app-subnav li a:hover { color: var(--c-text-invert); background: var(--c-sidebar-hover-bg); }
.app-subnav li.active a {
	color: var(--c-text-invert);
	font-weight: 700;
	background: var(--c-sidebar-subactive-bg);
}
.app-subnav li.active a::before { background: var(--c-sidebar-active-bg); }

.app-sidebar__foot {
	border-top: 1px solid var(--c-sidebar-border);
	padding: 0;
}
.app-sidebar__collapse-btn {
	display: flex; align-items: center; gap: 8px;
	width: 100%;
	height: 48px;            /* Figma Collapse 높이 */
	background: transparent; border: 0;
	color: var(--c-sidebar-text-dim);
	font-size: 13px; cursor: pointer;
	padding: 0 20px; border-radius: 0;
	white-space: nowrap;
}
.app-sidebar__collapse-btn:hover { background: var(--c-sidebar-hover-bg); color: var(--c-text-invert); }
.app-sidebar__collapse-btn svg { width: 18px; height: 18px; transition: transform .2s; }

/* ── 접힘(collapsed) 상태 ── */
.app-shell.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
.app-shell.sidebar-collapsed .app-sidebar__brand { padding: 0; justify-content: center; }
.app-shell.sidebar-collapsed .app-sidebar__brand img,
.app-shell.sidebar-collapsed .app-nav-link .app-nav-text,
.app-shell.sidebar-collapsed .app-nav-link .app-nav-caret,
.app-shell.sidebar-collapsed .app-subnav,
.app-shell.sidebar-collapsed .app-sidebar__collapse-btn span { display: none; }
/* 접힘 상태 전용 미니 로고 : 평소엔 숨김, 접혔을 때만 표시 */
.app-sidebar__brand .brand-mini { display: none; }
.app-shell.sidebar-collapsed .app-sidebar__brand img.brand-mini { display: block; height: 34px; }
.app-shell.sidebar-collapsed .app-nav-item > a.app-nav-link { justify-content: center; padding: 0; }
.app-shell.sidebar-collapsed .app-sidebar__collapse-btn { justify-content: center; }
.app-shell.sidebar-collapsed .app-sidebar__collapse-btn .svg-ico { transform: rotate(180deg); }

/* ===== 2. 상단바 ======================================================== */
.app-topbar {
	position: fixed;
	top: 0; right: 0;
	left: var(--sidebar-w);
	height: var(--topbar-h);
	background: var(--c-topbar-bg);
	border-bottom: 1px solid var(--c-topbar-border);
	display: flex;
	align-items: center;
	padding: 0 24px;
	z-index: 1030;
	transition: left .22s ease;
}
.app-shell.sidebar-collapsed .app-topbar { left: var(--sidebar-w-collapsed); }

.app-topbar__toggle {
	background: transparent; border: 0; cursor: pointer;
	width: 40px; height: 40px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-text-sub);
}
.app-topbar__toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
.app-topbar__toggle svg { width: 22px; height: 22px; }

.app-topbar__title {
	font-size: 19px; font-weight: 700; color: var(--c-text-strong);
	margin-left: 6px; letter-spacing: -.3px;
}
.app-topbar__spacer { flex: 1 1 auto; }

.app-topbar__actions { display: flex; align-items: center; gap: 18px; }
.app-topbar__bell {
	position: relative; color: var(--c-text-sub); cursor: pointer;
	width: 40px; height: 40px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
}
.app-topbar__bell:hover { background: var(--c-surface-2); }
.app-topbar__bell svg { width: 22px; height: 22px; }
.app-topbar__bell .badge-dot {
	position: absolute; top: 8px; right: 9px;
	width: 9px; height: 9px; padding: 0;
	background: var(--c-red); color: transparent;
	font-size: 0; line-height: 0;
	border-radius: 50%;
	border: 2px solid var(--c-topbar-bg);
}
.app-topbar__greeting { font-size: 14px; color: var(--c-text-sub); white-space: nowrap; }
.app-topbar__greeting b { color: var(--c-text-strong); font-weight: 700; }
.app-topbar__avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--c-surface-2); border: 1px solid var(--c-border);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-text-muted);
}
.app-topbar__avatar svg { width: 20px; height: 20px; }
.app-btn-logout {
	height: 36px; padding: 0 16px;
	border: 1px solid #e2e5e8;
	background: #ffffff; color: var(--c-red);
	border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
	transition: all .15s;
}
.app-btn-logout:hover { background: var(--c-red-soft); border-color: var(--c-red); }

/* ===== 3. 메인 컨텐츠 래퍼 ============================================== */
.app-main {
	margin-left: var(--sidebar-w);
	padding-top: var(--topbar-h);
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: margin-left .22s ease;
}
.app-shell.sidebar-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }
/* 본문 : 좌우 일정 여백 + 남는 공간을 채워 푸터를 하단으로 밀어냄 */
.app-main > .content { padding: 16px 0px !important; flex: 1 0 auto; width: 100%; }

/* ── 콘텐츠 행 : flex 기반 페이지 레이아웃 ──────────────────────────
 *   • 단일 컬럼 페이지        → 본문이 전체 폭
 *   • 서비스목록(트리) 페이지 → .svc-layout__aside(2) : .svc-layout__body(8)
 *   기존 부트스트랩 col-* 클래스는 트리 페이지에서 의미있는 클래스로 대체됨 */
.app-main .content > .row {
	display: flex; flex-wrap: nowrap; align-items: flex-start;
	gap: 18px; margin: 0; width: 100%;
}
.app-main .content > .row > * { flex: 1 1 0; min-width: 0; }   /* 기본: 본문이 남는 폭 차지 */
.app-main .content > .row > [class^="col-"],
.app-main .content > .row > [class*=" col-"] { padding-left: 0; padding-right: 0; float: none; }

.app-main > .main-footer { 
	flex-shrink: 0;
    margin-top: auto;
    padding: 0px;
    height: 48px; }

/* ── 서비스목록(트리) + 본문 2:8 레이아웃 ── */
.svc-layout__aside {                          /* 좌 : 서비스 목록(트리) — 20% */
	min-width: 0;
}
.app-main .content > .row > .svc-layout__aside { flex: 0 0 280px; max-width: 280px; }   /* Figma: 트리 고정 280px */
.app-main .content > .row > .svc-layout__body  { flex: 1 1 0; min-width: 0; }  /* 우 : 본문 — 80% */
@media (max-width: 992px) {
	.app-main .content > .row { flex-wrap: wrap; }
	.app-main .content > .row > .svc-layout__aside,
	.app-main .content > .row > .svc-layout__body { flex: 1 1 100%; max-width: 100%; }
}

/* ── 단일 컬럼(전체폭) 본문 — 의미 클래스 (신규 페이지 권장) ──
 *   레거시 col-md-12 도 위 .row>* flex 규칙으로 동일하게 전체폭이 됨 */
.app-main .content > .row > .page-full { flex: 1 1 100%; max-width: 100%; }

/* =========================================================================
 * [본문 레이아웃 체계 요약]
 *   .app-shell → .app-sidebar + .app-topbar + .app-main
 *   .app-main > .content > .row (flex 컨테이너)
 *     · 단일 컬럼 페이지 : .app-page / .page-full / (레거시 col-md-12) → 전체폭
 *     · 트리+본문 페이지 : .svc-layout__aside(2) + .svc-layout__body(8)
 *   페이지 래퍼 : .app-page (+ .app-page__head/__title/__desc/__updated)
 * ========================================================================= */

/* 레거시 AdminLTE 박스 : 회색 위에 떠 보이지 않게 통일된 카드로 정규화 */
.app-main .box, .app-main .box-widget {
	background: var(--c-surface); border: 1px solid var(--c-border);
	border-radius: var(--radius); box-shadow: 0 1px 3px var(--c-shadow);
	margin-bottom: 18px;
}
.app-main .box-body { 
}

/* 페이지 래퍼 (좌우 여백은 .content 가 제공하므로 자체 패딩 없음) */
.app-page {
	padding: 0;
}
.app-page__head {
	display: flex; align-items: baseline; gap: 12px;
	margin-bottom: 18px;
}
.app-page__title { font-size: 22px; font-weight: 700; color: var(--c-text-strong); margin: 0; }
.app-page__desc { font-size: 13px; color: var(--c-text-sub); }
.app-page__updated { margin-left: auto; font-size: 12px; color: var(--c-text-muted); align-self: center; }
.app-page__updated .ico-refresh { cursor: pointer; margin-left: 6px; vertical-align: middle; }

/* ===== 4. 카드 ========================================================= */
.dash-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: 0 1px 3px var(--c-shadow);
}
.dash-card__head {
	display: flex; align-items: center; gap: 8px;
	padding: 16px 18px;   /* 하단 보더 제거 (대시보드 전용 클래스라 타 페이지 영향 없음) */
}
.dash-card__head .bar { width: 4px; height: 16px; background: var(--c-primary); border-radius: 3px; }
.dash-card__title { font-size: 15px; font-weight: 700; color: var(--c-text-strong); }
.dash-card__head .spacer { flex: 1 1 auto; }
.dash-card__select {
	height: 30px; border: 1px solid var(--c-border-strong); border-radius: 6px;
	background: var(--c-surface); color: var(--c-text-sub); font-size: 12px; padding: 0 10px;
}
.dash-card__body { padding: 18px; }

/* 상단 3-그리드 : 좌→우 1 : 1.2 : 1.4 비율 (디자인 스펙) */
.dash-grid-3 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr);
	gap: 18px;
	margin-bottom: 18px;
}
@media (max-width: 1200px) { .dash-grid-3 { grid-template-columns: 1fr; } }

/* ===== 4-1. 가동 현황 (진행바) ========================================= */
.op-rate__headline { margin-bottom: 18px; }
.op-rate__headline .lbl { font-size: 13px; color: var(--c-text-sub); }
.op-rate__headline .val { font-size: 32px; font-weight: 700; color: var(--c-green); line-height: 1.15; }
.op-rate__headline .val small { font-size: 17px; font-weight: 700; margin-left: 2px; }

.op-bar { margin-bottom: 16px; }
.op-bar:last-child { margin-bottom: 0; }
.op-bar__top { display: flex; justify-content: space-between; margin-bottom: 7px; }
.op-bar__name { font-size: 13px; color: var(--c-text); }
.op-bar__pct { font-size: 13px; font-weight: 700; }
.op-bar__track { height: 6px; background: var(--c-track); border-radius: 6px; overflow: hidden; }
.op-bar__fill { height: 100%; border-radius: 6px; width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.op-bar__fill.is-green  { background: var(--c-series-total); }
.op-bar__fill.is-orange { background: var(--c-series-menu); }
.op-bar__fill.is-blue   { background: var(--c-series-media); }
.op-bar__pct.is-green  { color: var(--c-series-total); }
.op-bar__pct.is-orange { color: var(--c-series-menu); }
.op-bar__pct.is-blue   { color: var(--c-series-media); }

/* ===== 4-2. 지역별 매체맵 ============================================== */
.region-map { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 524 / 631; }
.region-map__img { width: 100%; height: 100%; display: block; transform: translateX(20px); }   /* 지도 벡터 우측 20px 이동 */
/* 콜아웃 ↔ 권역 연결선 오버레이 */
.region-map .region-links {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	z-index: 1;
}
.region-map .region-callout { z-index: 2; }
.region-map svg { width: 100%; height: 100%; display: block; }
.region-map .region-shape { stroke: var(--c-map-stroke); stroke-width: 2; transition: filter .15s; cursor: pointer; }
.region-map .region-shape:hover { filter: brightness(.94); }
.region-callout {
	position: absolute;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: 6px;
	box-shadow: 0 4px 12px var(--c-shadow-strong);
	padding: 0;
	overflow: hidden;
	text-align: center;
	min-width: 78px;
}
/* 권역명 : 카드 상단 네이비 헤더 스트립 (Figma) */
.region-callout .r-name {
	display: block; margin: 0;
	font-size: 11px; font-weight: 700; color: #fff;
	background: var(--c-table-head-bg);
	border: none; border-radius: 0;
	padding: 3px 10px; line-height: 1.6; white-space: nowrap;
}
/* 대수 / 퍼센트 : 두 줄 스택 (Figma) */
.region-callout .r-cnt  { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; padding: 6px 10px 0; }
.region-callout .r-pct  { display: block; font-size: 11px; color: var(--c-text); line-height: 1.3; padding: 0 10px 7px; }
/* 총 운영 대수 : 보더 카드 (디자인 스펙) */
.region-total {
	position: absolute; right: 14px; bottom: 12px;   /* 카드 우측 하단 고정 (Figma) */
	background: var(--c-surface); border: 1px solid var(--c-border);
	border-radius: 8px; padding: 10px 18px; text-align: center;
	box-shadow: 0 1px 3px var(--c-shadow);
	z-index: 1;
}
.region-total .t-lbl { font-size: 11px; color: var(--c-text-sub); }
.region-total .t-val { font-size: 22px; font-weight: 800; color: var(--c-text-strong); }
.region-total .t-val small { font-size: 13px; font-weight: 600; margin-left: 2px; }

/* ===== 4-3. 장비 관리 및 요약 통계 (표) ================================ */
.dash-subtitle { font-size: 13px; font-weight: 700; color: var(--c-text-strong); margin: 4px 0 10px; }
.dash-subtitle:not(:first-child) { margin-top: 22px; }
#dashEquip { overflow-x: auto; }
.summary-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.summary-table th, .summary-table td { padding: 9px 8px; text-align: right; white-space: nowrap; }
.summary-table thead th {
	background: var(--c-surface-2); color: var(--c-text-sub); font-weight: 600;
	border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
	text-align: right;
}
.summary-table thead th:first-child, .summary-table td:first-child { text-align: left; }
.summary-table tbody tr { border-bottom: 1px solid var(--c-border); }
.summary-table tbody tr:last-child { border-bottom: 0; }
.summary-table .cell-total { font-weight: 700; color: var(--c-text-strong); }
.summary-table .status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }   /* 사각 도트 (디자인 스펙) */
.summary-table .status-dot.is-on  { background: var(--c-green); }
.summary-table .status-dot.is-off { background: var(--c-red); }
.summary-table .link-val { color: var(--c-metric-link); font-weight: 700; }
/* 헤더 없는 미니 테이블 (통계보고서 주요 지표 — 디자인 스펙) : 첫 행 상단 경계선만 표시 */
.summary-table.no-head tbody tr:first-child { border-top: 1px solid var(--c-border); }
.summary-table tfoot td, .summary-table tr.row-total td {
	border-top: 1px solid var(--c-border-strong); font-weight: 700; color: var(--c-text-strong);
}

/* ===== 5. 실시간 운영 로그 (하단) ====================================== */
.log-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 1px 3px var(--c-shadow); }
.log-panel__head { display: flex; align-items: center; padding: 16px 18px 4px; }
.log-panel__head .bar { width: 4px; height: 16px; background: var(--c-primary); border-radius: 3px; margin-right: 8px; }
.log-panel__head .title { font-size: 15px; font-weight: 700; color: var(--c-text-strong); }
.log-panel__head .spacer { flex: 1 1 auto; }
.log-panel__body { padding: 12px 18px 18px; }

/* 상태 스탯 타일 */
.stat-tiles { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1400px){ .stat-tiles{ grid-template-columns: repeat(4,1fr);} }
@media (max-width: 900px){ .stat-tiles{ grid-template-columns: repeat(2,1fr);} }
/* 타일 : 아이콘 좌측 + (라벨/숫자) 우측 스택, 그룹 중앙 정렬 (Figma) */
.stat-tile {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	border: 1px solid var(--c-border); border-radius: var(--radius);   /* radius 8 (디자인 스펙) */
	background: var(--c-surface); padding: 16px 12px; cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.stat-tile:hover { border-color: var(--c-border-strong); }
.stat-tile.selected { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; }
.stat-tile__ico { flex: 0 0 auto; display: inline-flex; color: var(--c-text-sub); }
.stat-tile__ico .svg-ico { width: 30px; height: 30px; }
/* 타일별 아이콘 색 (Figma : 전체·서비스기간=네이비, 정상=그린, 단절=레드) */
#ALL .stat-tile__ico, #SERVICEDATE .stat-tile__ico { color: var(--c-table-head-bg); }
#NETWORKON .stat-tile__ico { color: var(--c-green); }
#NETWORKOFF .stat-tile__ico { color: var(--c-red); }
.stat-tile__txt { min-width: 0; }
.stat-tile__label { font-size: 13px; color: var(--c-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile__value { font-size: 20px; font-weight: 700; color: var(--c-text-strong); line-height: 1.3; }
.stat-tile__value .unit { font-size: 12px; font-weight: 600; color: var(--c-text-muted); margin-left: 4px; }
.stat-tile__value.is-bad  { color: var(--c-metric-bad); }
.stat-tile__value.is-bad .unit { color: var(--c-metric-bad); }   /* Figma: 단절/서비스기간은 %도 레드 */
.stat-tile__value.is-good { color: var(--c-metric-good); }

/* 로그 툴바 (검색/선택/버튼) */
.log-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.log-toolbar .spacer { flex: 1 1 auto; }
.log-toolbar select, .log-toolbar input[type=text] {
	height: 34px; border: 1px solid var(--c-border-strong); border-radius: 8px;
	background: var(--c-surface); color: var(--c-text); font-size: 13px; padding: 0 12px;
}
.app-btn-primary {
	height: 34px; padding: 0 16px; border: 0; border-radius: 8px;
	background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.app-btn-primary:hover { background: var(--c-primary-dark); }
.log-panel__icon-btn { width: 34px; height: 34px; border: 1px solid var(--c-border-strong); border-radius: 8px; background: var(--c-surface); color: var(--c-text-sub); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.log-panel__icon-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }

/* ===== 6. 데이터테이블 리스킨 ========================================== */
/* scrollX/Y 모드에서는 헤더가 id 없는 클론 테이블(.dataTables_scrollHead)로 분리되므로,
 * th/td 폭이 어긋나지 않게 wrapper 스코프로 패딩·정렬·box-sizing 을 동일하게 맞춘다 */
/* width 에 !important 를 주면 DataTables 가 스크롤 모드에서 열 동기화를 위해 써넣는
 * 인라인 px 폭이 무력화되어 th/td 열이 어긋난다 — !important 금지 */
#dashboardTable_wrapper table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
#dashboardTable_wrapper table.table thead th {
	background: var(--c-table-head-bg) !important;
	color: var(--c-table-head-text) !important;
	font-weight: 600; border: 0 !important;
	padding: 11px 8px !important; vertical-align: middle;
	text-align: center;
}
#dashboardTable_wrapper table.table tbody td {
	border: 0 !important; border-bottom: 1px solid var(--c-border) !important;
	padding: 11px 8px !important; color: var(--c-text); vertical-align: middle;
	text-align: center;   /* th(중앙정렬)와 통일 */
}
#dashboardTable_wrapper table.dataTable th,
#dashboardTable_wrapper table.dataTable td { box-sizing: border-box; }
/* 스트라이프 + 행 hover 그린 틴트 (디자인 스펙) */
#dashboardTable.table.table-striped > tbody > tr:nth-of-type(odd)  { background: var(--c-table-row) !important; }
#dashboardTable.table.table-striped > tbody > tr:nth-of-type(even) { background: var(--c-table-row-alt) !important; }
#dashboardTable.table.table-striped > tbody > tr:hover { background: var(--c-table-row-hover) !important; }
.dash-badge-off { color: var(--c-red); font-weight: 700; }
.dash-badge-on  { color: var(--c-green); font-weight: 700; }
.dash-term { color: var(--c-red); font-weight: 600; }

/* DataTables wrapper 정렬(기존 컨트롤을 툴바 느낌으로) */
#dashboardTable_wrapper .dataTables_filter,
#dashboardTable_wrapper .dataTables_length { margin-bottom: 10px; }
#dashboardTable_wrapper .dataTables_filter input,
#dashboardTable_wrapper .dataTables_length select {
	height: 34px; border: 1px solid var(--c-border-strong); border-radius: 8px; padding: 0 10px;
}
#dashboardTable_wrapper .dataTables_paginate {
	float: none !important;
	width: 100%;
	text-align: center !important;
	margin-top: 8px;
}
#dashboardTable_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--c-primary) !important; border-color: var(--c-primary) !important;
	color: #fff !important; border-radius: 6px;
}
#dashboardTable_wrapper .dataTables_paginate .paginate_button {
	border-radius: 6px;
}

/* ===== 7. 공통 테이블 (다크 헤더 + 스트라이프 + 상태색) ================= */
.app-main table.table { border-collapse: collapse; width: 100%; }
.app-main table.table > thead > tr > th,
.app-main table.table thead th {
	background: var(--c-table-head-bg) !important;
	color: var(--c-table-head-text) !important;
	font-weight: 600; font-size: 13px;
	border: 0 !important;
	padding: 12px 10px !important;
	vertical-align: middle; text-align: center; white-space: nowrap;
}
/* 테이블 헤더 라운드 제거 (각지게) */
.app-main table.table > thead > tr > th:first-child,
.app-main table.table > thead > tr > th:last-child { border-radius: 0; }
.app-main table.table > tbody > tr > td,
.app-main table.table tbody td {
	border: 0 !important;
	border-bottom: 1px solid var(--c-table-border) !important;
	padding: 3px 10px !important;
	height: 42px;
	box-sizing: border-box;
	line-height: 18px;
	color: var(--c-text); vertical-align: middle;
}
#imageVideoDiv table.table > tbody > tr > td,
#imageVideoDiv table.table tbody td {
	padding: 5px 10px !important;
	line-height: normal;
	height: auto;
}
.app-main table.table.table-striped > tbody > tr:nth-of-type(odd)  { background: var(--c-table-row) !important; }
.app-main table.table.table-striped > tbody > tr:nth-of-type(even) { background: var(--c-table-row-alt) !important; }
.app-main table.table > tbody > tr:hover { background: var(--c-table-row-hover) !important; }
/* DataTables 정렬 화살표 */
.app-main table.table thead th.sorting,
.app-main table.table thead th.sorting_asc,
.app-main table.table thead th.sorting_desc { color: var(--c-table-head-text) !important; }
.app-main table.table thead th.sorting:after,
.app-main table.table thead th.sorting_asc:after,
.app-main table.table thead th.sorting_desc:after { color: var(--c-table-head-sort) !important; opacity: 1; }

/* DataTables scroll body sizing header: keep column widths, remove visible height. */
.dataTables_scroll table.dataTable.table {
	border-collapse: separate !important;
	border-spacing: 0;
}
.dataTables_scrollBody table.dataTable.table > thead > tr,
.dataTables_scrollBody table.dataTable.table > thead > tr > th,
.dataTables_scrollBody table.dataTable.table > thead > tr > td,
.dataTables_scrollBody #dashboardTable.table > thead > tr,
.dataTables_scrollBody #dashboardTable.table > thead > tr > th,
.dataTables_scrollBody #dashboardTable.table > thead > tr > td {
	height: 0 !important;
	max-height: 0 !important;
	line-height: 0 !important;
}
.dataTables_scrollBody table.dataTable.table > thead > tr > th,
.dataTables_scrollBody table.dataTable.table > thead > tr > td,
.dataTables_scrollBody #dashboardTable.table > thead > tr > th,
.dataTables_scrollBody #dashboardTable.table > thead > tr > td {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
	background: transparent !important;
}
.dataTables_scrollBody table.dataTable.table > thead .dataTables_sizing {
	height: 0 !important;
	max-height: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* 상태/권역 텍스트 유틸 (JS 렌더에서 사용) */
.tbl-on  { color: var(--c-status-on);  font-weight: 700; }
.tbl-off { color: var(--c-status-off); font-weight: 700; }
.rg-seoul       { color: var(--c-region-seoul);       font-weight: 600; }
.rg-gyeonggi    { color: var(--c-region-gyeonggi);    font-weight: 600; }
.rg-chungcheong { color: var(--c-region-chungcheong); font-weight: 600; }
.rg-yeongnam    { color: var(--c-region-yeongnam);    font-weight: 600; }
.rg-honam       { color: var(--c-region-honam);       font-weight: 600; }
.rg-gangwon     { color: var(--c-region-gangwon);     font-weight: 600; }

/* 상태 배지(pill) : 원격/상태 등 컬럼용 — 예) 정상 가동 / 정비필요 */
.status-badge {
	display: inline-block; padding: 4px 12px; border-radius: 6px;
	font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.status-badge--ok   { color: var(--c-status-on);  background: var(--c-status-on-bg); }
.status-badge--err  { color: var(--c-status-off); background: var(--c-status-off-bg); }
.status-badge--warn { color: var(--c-orange);     background: var(--c-orange-soft); }
.status-badge--muted{ color: var(--c-text-sub);   background: var(--c-surface-2); }

/* ===== 8. 공통 검색조건 패널 ========================================== */
.search-panel {
	display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: 0 1px 3px var(--c-shadow);
	padding: 16px 18px;
	margin-bottom: 20px;
}
.search-panel .sp-field { display: flex; align-items: center; gap: 10px; }
.search-panel .sp-label { font-size: 13px; font-weight: 600; color: var(--c-text-strong); white-space: nowrap; }
.search-panel .sp-req { color: var(--c-red); font-size: 12px; font-weight: 700; margin-left: 2px; }
.search-panel input[type=text],
.search-panel select {
	height: 36px; min-width: 220px;
	border: 1px solid var(--c-border-strong); border-radius: 8px;
	background: var(--c-surface); color: var(--c-text); font-size: 13px; padding: 0 12px;
}
.search-panel input[type=text]:focus,
.search-panel select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.search-panel .sp-actions { margin-left: auto; display: flex; gap: 10px; }
.app-btn-ghost {
	height: 36px; padding: 0 16px; border: 1px solid var(--c-border-strong);
	background: var(--c-surface); color: var(--c-text-sub);
	border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.app-btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ===== 9. 리포트 (광고리포트 등) ====================================== */
.report-wrap { display: flex; flex-direction: column; gap: 22px; }
.report-block {
	background: var(--c-surface); border: 1px solid var(--c-border);
	border-radius: var(--radius); box-shadow: 0 1px 3px var(--c-shadow);
	padding: 20px 22px;
}
.report-block__title { font-size: 15px; font-weight: 700; color: var(--c-text-strong); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.report-block__title::before { content: ""; width: 4px; height: 15px; background: var(--c-primary); border-radius: 3px; }
.report-block__sub { font-size: 13px; font-weight: 600; color: var(--c-text-sub); margin: 16px 0 8px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table caption { text-align: left; font-size: 13px; font-weight: 600; color: var(--c-text-sub); padding: 0 0 8px; }
.report-table th {
	background: var(--c-table-head-bg); color: var(--c-table-head-text);
	font-weight: 600; padding: 11px 14px; text-align: center; white-space: nowrap;
}
.report-table.report-kv th { text-align: left; width: 200px; }
.report-table td {
	padding: 11px 14px; text-align: center; color: var(--c-text);
	border-bottom: 1px solid var(--c-table-border); background: var(--c-surface);
}
.report-table.report-kv td { text-align: left; }
.report-table.report-kv tbody tr:first-child td { border-top: 1px solid var(--c-table-border); }
.report-table tbody tr:nth-of-type(even) td { background: var(--c-table-row-alt); }
.report-empty { padding: 40px; text-align: center; color: var(--c-text-muted); font-size: 14px; }

/* =========================================================================
 * 10. 시맨틱 버튼 시스템
 *   사용법 : 기본 클래스 .app-btn + 의미 클래스 조합
 *   예)  <button class="app-btn btn-save">저장</button>
 *
 *   [주요/오렌지] btn-save(저장) btn-search(조회) btn-register(등록)
 *                 btn-add(추가) btn-confirm(확인) btn-apply(적용) btn-submit(전송)
 *   [위험/빨강]   btn-delete(삭제) btn-remove(제거)
 *   [보조/외곽선] btn-cancel(취소) btn-close(닫기) btn-reset(초기화) btn-list(목록)
 *   [중립/다크]   btn-edit(수정)
 *   [다운로드/초록] btn-excel(엑셀) btn-download(다운로드)
 *   크기 : .btn-sm / .btn-lg,  비활성 : :disabled / .is-disabled
 * ========================================================================= */
.app-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 40px; padding: 0 18px; border-radius: var(--radius-sm);
	font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
	border: 1px solid transparent; transition: all .15s; white-space: nowrap;
	text-decoration: none;
}
.app-btn:disabled, .app-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.app-btn.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--radius-sm); }
.app-btn.btn-lg { height: 42px; padding: 0 24px; font-size: 14px; }
.app-btn.btn-block { width: 100%; }

/* 주요 액션 (오렌지 채움) : 저장/조회/등록/추가/확인/적용/전송 */
.app-btn.btn-save, .app-btn.btn-search, .app-btn.btn-register, .app-btn.btn-add,
.app-btn.btn-confirm, .app-btn.btn-apply, .app-btn.btn-submit {
	background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.app-btn.btn-save:hover, .app-btn.btn-search:hover, .app-btn.btn-register:hover,
.app-btn.btn-add:hover, .app-btn.btn-confirm:hover, .app-btn.btn-apply:hover,
.app-btn.btn-submit:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

/* 위험 (빨강 아웃라인, Figma 기준) : 삭제/제거 */
.app-btn.btn-delete, .app-btn.btn-remove {
	background: #fff; color: var(--c-red); border-color: var(--c-red);
}
.app-btn.btn-delete:hover, .app-btn.btn-remove:hover { background: var(--c-red-soft); }

/* 보조 (외곽선 회색) : 취소/닫기/초기화/목록 */
.app-btn.btn-cancel, .app-btn.btn-close, .app-btn.btn-reset, .app-btn.btn-list {
	background: #fff; color: var(--c-text-sub); border-color: var(--c-border-strong);
}
.app-btn.btn-cancel:hover, .app-btn.btn-close:hover, .app-btn.btn-reset:hover,
.app-btn.btn-list:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* 중립 (다크) : 수정 */
.app-btn.btn-edit { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.app-btn.btn-edit:hover { background: var(--c-text-strong); border-color: var(--c-text-strong); }

/* 다운로드 (초록) : 엑셀/다운로드 */
.app-btn.btn-excel, .app-btn.btn-download {
	background: var(--c-green); color: #fff; border-color: var(--c-green);
}
.app-btn.btn-excel:hover, .app-btn.btn-download:hover { background: #128a3f; border-color: #128a3f; }
/* 기존 .app-btn-primary(조회) / .app-btn-ghost(초기화) / .app-btn-logout 은 §5,§8 정의 유지(하위호환) */

/* ── 레거시 버튼 클래스 일괄 의미화 (앱 전역 통일) ───────────────────────
 * 기존 JSP 가 이미 의미 클래스를 사용(btn-save/btn-cancel/btn-delete/btn-primary2 ...)
 * 하므로, 해당 클래스에 새 디자인을 입혀 전체 버튼을 한 번에 통일한다.
 * 색/테두리/모서리만 통일하고 크기·위치는 기존값을 존중한다. */
.app-main .btn-save, .app-main .btn-primary2, .app-main .btn-search,
.app-main .btn-add, .app-main .btn-command, .app-main .btn-action, .app-main .btn-primary {
	background-color: var(--c-primary) !important; color: #fff !important;
	border: 1px solid var(--c-primary) !important; border-radius: var(--radius-sm) !important;
	font-weight: 600; box-shadow: none !important;
}
.app-main .btn-save:hover, .app-main .btn-primary2:hover, .app-main .btn-search:hover,
.app-main .btn-add:hover, .app-main .btn-command:hover, .app-main .btn-action:hover,
.app-main .btn-primary:hover { background-color: var(--c-primary-dark) !important; border-color: var(--c-primary-dark) !important; }

.app-main .btn-cancel, .app-main .btn-reset, .app-main .btn-basic-info, .app-main .btn-list {
	background-color: #fff !important; color: var(--c-text-sub) !important;
	border: 1px solid var(--c-border-strong) !important; border-radius: var(--radius-sm) !important;
	font-weight: 600; box-shadow: none !important;
}
.app-main .btn-cancel:hover, .app-main .btn-reset:hover, .app-main .btn-basic-info:hover,
.app-main .btn-list:hover { border-color: var(--c-primary) !important; color: var(--c-primary) !important; }

.app-main .btn-delete, .app-main .btn-danger, .app-main .btn-warning, .app-main .btn-remove {
	background-color: #fff !important; color: var(--c-red) !important;
	border: 1px solid var(--c-red) !important; border-radius: var(--radius-sm) !important;
	font-weight: 600; box-shadow: none !important;
}
.app-main .btn-delete:hover, .app-main .btn-danger:hover, .app-main .btn-warning:hover,
.app-main .btn-remove:hover { background-color: var(--c-red-soft) !important; border-color: var(--c-red) !important; }

/* ========================================================================
 * 팝업(BootstrapDialog) 공통 크롬 — T-CMS 2.0
 * 모달 radius/그림자 + 헤더 그린 바 타이틀 + X 닫기 (전 팝업 공통)
 * ======================================================================== */
.modal .modal-content {
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(11, 34, 57, .18);
}
.modal .modal-header {
	margin: 0 !important;
	padding: 15px 15px !important;
	border-bottom: 1px solid var(--c-border) !important;
}
.modal .bootstrap-dialog-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--c-text-strong) !important;
	position: relative;
	padding-left: 12px;
	line-height: 20px;
	display: inline-block;
}
.modal .bootstrap-dialog-title:before {
	content: '';
	position: absolute;
	left: 0; top: 2px;
	width: 4px; height: 16px;
	border-radius: 2px;
	background: var(--c-primary);
}
.modal .bootstrap-dialog-close-button { opacity: 1 !important; margin-top: 0 !important; }
.modal .bootstrap-dialog-close-button .close {
	display: inline-block;      /* 레거시 .close{display:none} 복원 */
	font-size: 24px;
	font-weight: 400;
	color: var(--c-text-sub);
	opacity: 1;
	text-shadow: none;
}
.modal .bootstrap-dialog-close-button .close:hover { color: var(--c-text); }
.modal-body {
	padding: 0px;
	padding-top: 15px !important;
}

/* 멀티 스케줄 팝업 헤더 여백 */
.modal.ms-modal .modal-header {
	padding: 15px !important;
	margin: 0 !important;
}

/* 소형 확인/알림 팝업(size-small → modal-sm) : 타이틀이 비어 있는 헤더 바 제거
 * 예외가 필요하면 다이얼로그에 cssClass 'keep-header' 를 지정 */
.modal:not(.keep-header) .modal-dialog.modal-sm .modal-header {
	display: none !important;
}
/* 소형 팝업 여백 정리 : 레거시(default.css) .modal-footer 좌우 margin 15px 제거 + body 패딩 15px 고정 */
.modal .modal-dialog.modal-sm .modal-footer {
	margin: 0 !important;
}
.modal .modal-dialog.modal-sm .modal-body {
	padding: 15px !important;
}

/* 팝업(모달) 내 레거시 btn-primary — 그린 통일 (fileupload.js 등 공용 JS 생성 버튼) */
.modal .btn-primary {
	background-color: var(--c-primary) !important; color: #fff !important;
	border: 1px solid var(--c-primary) !important; border-radius: var(--radius-sm) !important;
	box-shadow: none !important;
}
.modal .btn-primary:hover { background-color: var(--c-primary-dark) !important; border-color: var(--c-primary-dark) !important; }

/* 팝업(BootstrapDialog) 버튼 — body 직속이라 전역 지정 */
.btn-popup-confirm {
	background-color: var(--c-primary) !important; color: #fff !important;
	border: 1px solid var(--c-primary) !important; border-radius: var(--radius-sm) !important; font-weight: 600;
}
.btn-popup-confirm:hover { background-color: var(--c-primary-dark) !important; }
.btn-popup-cancel {
	background-color: #fff !important; color: var(--c-text-sub) !important;
	border: 1px solid var(--c-border-strong) !important; border-radius: 8px !important; font-weight: 600;
}
.btn-popup-cancel:hover { border-color: var(--c-primary) !important; color: var(--c-primary) !important; }

/* =========================================================================
 * 페이지별 스타일 (page-specific)  —  JSP 인라인 스타일을 이곳으로 이관.
 * 디렉토리(요청 경로) 기준으로 구분합니다.
 * ========================================================================= */

/* ----------------------------------------------------------------------- *
 * /dashboard  (대시보드 : dashboard/list.jsp)
 *   - DataTable 필터에 붙는 bootstrap-select 커스터마이즈
 *   - 상세 로그 테이블 컬럼 폭
 * ----------------------------------------------------------------------- */
/* 페이지 타이틀 : 좌측 그린 바 (디자인 스펙 — 대시보드 한정) */
.dashboard-page .app-page__title { display: inline-flex; align-items: center; gap: 10px; }
.dashboard-page .app-page__title::before {
	/* content: "";  */
	/* width: 4px;  */
	height: 18px;
	/* background: var(--c-primary);  */
	/* border-radius: 3px; */
}
/* 헤더 우측 새로고침 아이콘 */
.dashboard-page .dash-head-refresh {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-left: 6px; vertical-align: middle;
	border-radius: 4px; color: var(--c-text-sub); cursor: pointer;
}
.dashboard-page .dash-head-refresh:hover { color: var(--c-primary); background: var(--c-surface-2); }
.dashboard-page .dropdown-menu.inner > li { width: 100%; }
.dashboard-page .btn.dropdown-toggle.btn-default {
	width: 100% !important; height: 34px !important;
	background-color: #fff !important; color: var(--c-text) !important;
	line-height: 22px !important; padding-left: 12px !important;
	border: 1px solid var(--c-border-strong) !important; border-radius: 8px !important;
}
.dashboard-page .dropdown.bootstrap-select.bs3 { text-align: right; width: 160px !important; margin-bottom: 5px; margin-left: 10px; }
.dashboard-page .dropdown.bootstrap-select.bs3:hover { background-color: #fff !important; }
.dashboard-page .ui-tooltip { display: none !important; }
.dashboard-page .inner.open { max-height: 650px !important; }
.dashboard-page .dropdown-menu.open { max-height: 700px !important; }
.dashboard-page .dataTables_scrollBody { overflow: hidden !important; }
/* 상세 로그 테이블 컬럼 폭 강제 고정 :
 * 스크롤 모드에서 헤더(클론)와 본문이 별도 테이블로 분리되므로,
 * wrapper 스코프(양쪽 테이블 모두 매칭) + table-layout:fixed + !important 로
 * DataTables 가 써넣는 인라인 폭까지 무시하고 th/td 열 폭을 완전히 일치시킨다 */
#dashboardTable_wrapper table.table { table-layout: fixed !important; }
#dashboardTable_wrapper table.table thead th:nth-child(1),
#dashboardTable_wrapper table.table tbody td:nth-child(1)  { width: 36px  !important; }  /* No */
#dashboardTable_wrapper table.table thead th:nth-child(2),
#dashboardTable_wrapper table.table tbody td:nth-child(2)  { width: 130px !important; }  /* 서비스 명 */
#dashboardTable_wrapper table.table thead th:nth-child(3),
#dashboardTable_wrapper table.table tbody td:nth-child(3)  { width: 120px !important; }  /* 그룹 명 */
#dashboardTable_wrapper table.table thead th:nth-child(4),
#dashboardTable_wrapper table.table tbody td:nth-child(4)  { width: 130px !important; }  /* 디스플레이명 */
#dashboardTable_wrapper table.table thead th:nth-child(5),
#dashboardTable_wrapper table.table tbody td:nth-child(5)  { width: 120px !important; }  /* 셋톱박스 O/S */
#dashboardTable_wrapper table.table thead th:nth-child(6),
#dashboardTable_wrapper table.table tbody td:nth-child(6)  { width: 70px  !important; }  /* 버전 */
#dashboardTable_wrapper table.table thead th:nth-child(7),
#dashboardTable_wrapper table.table tbody td:nth-child(7)  { width: 140px !important; }  /* 접속유지시간 */
#dashboardTable_wrapper table.table thead th:nth-child(8),
#dashboardTable_wrapper table.table tbody td:nth-child(8)  { width: 150px !important; }  /* 최종접속시간 */
#dashboardTable_wrapper table.table thead th:nth-child(9),
#dashboardTable_wrapper table.table tbody td:nth-child(9),
#dashboardTable_wrapper table.table thead th:nth-child(10),
#dashboardTable_wrapper table.table tbody td:nth-child(10),
#dashboardTable_wrapper table.table thead th:nth-child(11),
#dashboardTable_wrapper table.table tbody td:nth-child(11) { width: 60px  !important; }  /* CPU / RAM / HDD */
#dashboardTable_wrapper table.table thead th:nth-child(12),
#dashboardTable_wrapper table.table tbody td:nth-child(12),
#dashboardTable_wrapper table.table thead th:nth-child(13),
#dashboardTable_wrapper table.table tbody td:nth-child(13) { width: 90px  !important; }  /* Network / 기간 */
/* fixed 레이아웃에서 내용이 길어도 열 폭이 흔들리지 않게 말줄임 처리 */
#dashboardTable_wrapper table.table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------------------- *
 * [공통] 모든 DataTables 목록 테이블 : th/td 열 폭 일치 + 행 높이 42px
 *   스크롤 모드에서 헤더가 id 없는 클론 테이블로 분리되어 열이 어긋나므로,
 *   wrapper 하위 양쪽 테이블에 table-layout:fixed 를 강제해
 *   DataTables 가 헤더/본문에 동일하게 써넣는 인라인 폭 기준으로 정렬시킨다.
 *   (개별 테이블의 nth-child 폭 지정은 이 규칙 위에 얹는 세부 튜닝)
 * ----------------------------------------------------------------------- */
.app-main .dataTables_wrapper table.table { table-layout: fixed !important; }
.app-main .dataTables_wrapper table.table thead th,
.app-main .dataTables_wrapper table.table tbody td {
	height: 42px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}
/* .app-main .dataTables_wrapper table.table tbody td {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
} */
/* 스크롤 모드 정렬 보정 : DataTables 가 세로 스크롤바 폭만큼 헤더 컨테이너에
 * padding-right 를 넣어 헤더 테이블이 본문보다 좁아지고, 그 차이가 열마다
 * 비례 배분되며 td 가 우측으로 조금씩 밀리는 드리프트가 생긴다.
 * 목록은 페이징이라 세로 스크롤이 필요 없으므로 보정 패딩과 스크롤바를 제거해
 * 헤더/본문 테이블 폭을 완전히 동일하게 만든다. */
.app-main .dataTables_scrollHeadInner { padding-right: 0 !important; width: 100% !important; box-sizing: border-box; }
.app-main .dataTables_scrollHeadInner > table { width: 100% !important; }
.app-main .dataTables_scrollBody { overflow-y: hidden !important; }
.app-main .dataTables_scrollBody > table { width: 100% !important; }

/* ----------------------------------------------------------------------- *
 * /customergroup 그룹 목록 : th/td 열 폭 강제 일치
 *   (대시보드 로그 테이블과 동일 — 스크롤 모드에서 헤더가 클론 테이블로
 *    분리되므로 wrapper 스코프 + table-layout:fixed 로 양쪽을 맞춘다)
 * ----------------------------------------------------------------------- */
#customerGroupTable_wrapper table.table { table-layout: fixed !important; }
#customerGroupTable_wrapper table.table thead th:nth-child(1),
#customerGroupTable_wrapper table.table tbody td:nth-child(1) { width: 36px !important; }  /* No */
#customerGroupTable_wrapper table.table thead th:nth-child(2),
#customerGroupTable_wrapper table.table tbody td:nth-child(2) { width: 28% !important; }  /* 그룹 명 */
#customerGroupTable_wrapper table.table thead th:nth-child(3),
#customerGroupTable_wrapper table.table tbody td:nth-child(3) { width: 13% !important; }  /* 하위 그룹 수 */
#customerGroupTable_wrapper table.table thead th:nth-child(4),
#customerGroupTable_wrapper table.table tbody td:nth-child(4) { width: 13% !important; }  /* 디스플레이 수 */
#customerGroupTable_wrapper table.table thead th:nth-child(5),
#customerGroupTable_wrapper table.table tbody td:nth-child(5) { width: 14% !important; }  /* 운영 시작 시간 */
#customerGroupTable_wrapper table.table thead th:nth-child(6),
#customerGroupTable_wrapper table.table tbody td:nth-child(6) { width: 14% !important; }  /* 운영 종료 시간 */
#customerGroupTable_wrapper table.table thead th:nth-child(7),
#customerGroupTable_wrapper table.table tbody td:nth-child(7) { width: 12% !important; }  /* 활성화 */
#customerGroupTable_wrapper table.table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 행 높이 : padding 포함 42px 고정 (상하 padding 0 + height 42, 내용은 vertical-align 으로 중앙) */
#customerGroupTable_wrapper table.table tbody td {
	height: 42px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}
#customerGroupTable_wrapper table.table thead th{	
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}

/* ----------------------------------------------------------------------- *
 * /customergroup 매장 목록 (tab/store.jsp #storeListTable) :
 *   th/td 열 폭 강제 일치 + 행 높이 42px (그룹 목록과 동일 패턴)
 * ----------------------------------------------------------------------- */
#storeListTable_wrapper table.table { table-layout: fixed !important; }
#storeListTable_wrapper table.table thead th:nth-child(1),
#storeListTable_wrapper table.table tbody td:nth-child(1) { width: 36px !important; }  /* No */
#storeListTable_wrapper table.table thead th:nth-child(2),
#storeListTable_wrapper table.table tbody td:nth-child(2) { width: 10% !important; }  /* 시/도 */
#storeListTable_wrapper table.table thead th:nth-child(3),
#storeListTable_wrapper table.table tbody td:nth-child(3) { width: 10% !important; }  /* 구/군 */
#storeListTable_wrapper table.table thead th:nth-child(4),
#storeListTable_wrapper table.table tbody td:nth-child(4) { width: 20% !important; }  /* 매장명 */
#storeListTable_wrapper table.table thead th:nth-child(5),
#storeListTable_wrapper table.table tbody td:nth-child(5) { width: 12% !important; }  /* 상권 */
#storeListTable_wrapper table.table thead th:nth-child(6),
#storeListTable_wrapper table.table tbody td:nth-child(6) { width: 12% !important; }  /* 디스플레이 갯수 */
#storeListTable_wrapper table.table thead th:nth-child(7),
#storeListTable_wrapper table.table tbody td:nth-child(7) { width: 18% !important; }  /* 디스플레이 타입 */
#storeListTable_wrapper table.table thead th:nth-child(8),
#storeListTable_wrapper table.table tbody td:nth-child(8) { width: 13% !important; }  /* 등록일 */
#storeListTable_wrapper table.table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#storeListTable_wrapper table.table tbody td {
	height: 42px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}
#storeListTable_wrapper table.table thead th{	
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}


/* ----------------------------------------------------------------------- *
 * /customergroup 사용자 목록 (tab/userlist.jsp #userListTable) :
 *   th/td 열 폭 강제 일치 + 행 높이 42px (그룹/매장 목록과 동일 패턴)
 * ----------------------------------------------------------------------- */
#userListTable_wrapper table.table { table-layout: fixed !important; }
#userListTable_wrapper table.table thead th:nth-child(1),
#userListTable_wrapper table.table tbody td:nth-child(1) { width: 30px !important; }  /* 체크박스 */
#userListTable_wrapper table.table thead th:nth-child(2),
#userListTable_wrapper table.table tbody td:nth-child(2) { width: 36px !important; }  /* No */
#userListTable_wrapper table.table thead th:nth-child(3),
#userListTable_wrapper table.table tbody td:nth-child(3) { width: 14% !important; }  /* 사용자 명 */
#userListTable_wrapper table.table thead th:nth-child(4),
#userListTable_wrapper table.table tbody td:nth-child(4) { width: 13% !important; }  /* 아이디 */
#userListTable_wrapper table.table thead th:nth-child(5),
#userListTable_wrapper table.table tbody td:nth-child(5) { width: 22% !important; }  /* 이메일 */
#userListTable_wrapper table.table thead th:nth-child(6),
#userListTable_wrapper table.table tbody td:nth-child(6) { width: 10% !important; }  /* 권한 */
#userListTable_wrapper table.table thead th:nth-child(7),
#userListTable_wrapper table.table tbody td:nth-child(7) { width: 12% !important; }  /* 생성일 */
#userListTable_wrapper table.table thead th:nth-child(8),
#userListTable_wrapper table.table tbody td:nth-child(8) { width: 10% !important; }  /* 활성화 */
#userListTable_wrapper table.table thead th:nth-child(9),
#userListTable_wrapper table.table tbody td:nth-child(9) { width: 10% !important; }  /* 초기화 */
#userListTable_wrapper table.table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#userListTable_wrapper table.table tbody td {
	height: 42px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}
#userListTable_wrapper table.table thead th{	
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	vertical-align: middle;
}

/* ----------------------------------------------------------------------- *
 * /adreport  (광고리포트 : adreport/adView.jsp)
 * /report    (상품리포트 : report/contentView.jsp)
 *   - 공통 컴포넌트 사용 : .search-panel(§8), .report-*(§9)
 *   - 상품리포트 개요 표용 보조 클래스
 * ----------------------------------------------------------------------- */
.report-table.report-content-summary { table-layout: fixed; }
.report-table.report-content-summary th { width: 150px; }
.report-table.report-content-summary td { text-align: left; }

/* 체크박스/라디오 전역 그린 — 브라우저 기본 파랑 제거 (팝업 포함 전 화면) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-primary); }

/* 유틸 */
.app-hide { display: none !important; }


#imageVideoDiv table.table > tbody > tr > td, #imageVideoDiv table.table tbody td{
	padding: 0px !important;
}

#contentsTable_wrapper .row .col-sm-12{
	
}
#contentsTable_wrapper table.table tbody td{
	padding:0px !important;
}

/* ========================================================================
 * 페이지 타이틀 (naviHeader 공통) — Figma: 좌측 그린 바 + Bold 20, 밑줄 제거
 * ======================================================================== */
.app-main .box-header > .user-block.under-line {
	position: relative;
	padding: 2px 0 2px 12px;
	border-bottom: none !important;
	font-size: 20px;
	font-weight: 700;
	color: var(--c-text-strong);
	line-height: 1.4;
}
.app-main .box-header > .user-block.under-line::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 4px; height: 18px;
	background: var(--c-primary);
	border-radius: 2px;
}
.app-main .box-header > .user-block.under-line .pull-right {
	font-size: 12px !important;
	font-weight: 400;
	color: var(--c-text-muted);
	margin-top: 8px !important;
}
/* 세그먼트 탭 : 레거시 .nav > li 고정폭(150px) 해제 — 탭이 내용 폭만큼만 (Figma) */
.app-main #tabLab .nav > li { width: auto; }

.app-main #tabLab{
	margin: 9px 0 16px 0;
}

/* ========================================================================
 * 공통 테이블 라운드 : 스크롤 헤더 상단 / 바디 하단 5px
 * ======================================================================== */
.app-main .dataTables_scrollHead {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden !important;
}
.app-main .dataTables_scrollBody {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* ========================================================================
 * 공통 "개씩 보기" 셀렉트 (Figma : 보더 박스 36px)
 * ======================================================================== */
.app-main .dataTables_length { margin: 0 0 12px; }
.app-main .dataTables_length label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text);
	margin-bottom: 0;
}
.app-main .dataTables_length select {
	height: 36px !important;
	min-width: 64px;
	border: 1px solid var(--c-border-strong) !important;
	border-radius: var(--radius-sm) !important;
	background-color: #fff;
	color: var(--c-text);
	font-size: 13px;
	padding: 0 8px !important;
	box-shadow: none !important;
	display: inline-block;
	width: auto;
}
.app-main .dataTables_length select:focus { border-color: var(--c-primary) !important; outline: none; }

/* ========================================================================
 * 공통 검색 인풋 / 조회 버튼 : 보더 포함 38px (전역 — 팝업 포함)
 * ======================================================================== */
.dataTables_filter input {
	height: 38px !important;
	box-sizing: border-box !important;
	border: 1px solid var(--c-border-strong) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0 10px !important;
	font-size: 13px;
	vertical-align: middle;
	background: #fff;
}
.dataTables_filter input:focus { border-color: var(--c-primary) !important; outline: none; box-shadow: none !important; }
.btn-filter-search {
	height: 38px !important;
	box-sizing: border-box !important;
	padding: 0 16px !important;
	line-height: 1 !important;
	vertical-align: middle;
}

/* ========================================================================
 * 공통 페이징 (Figma : < [1] 2 3 >  — 박스형 버튼 + 그린 활성)
 * 대시보드(#dashboardTable_paginate)는 자체 스타일이라 제외
 * ======================================================================== */
.dataTables_paginate:not(#dashboardTable_paginate) { text-align: center !important; padding-top: 10px; }
/* ── 클래식 마크업 (a.paginate_button / 활성=a.paginate_active — DataTables 1.9식) ── */
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_active,
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button {
	display: inline-block;
	min-width: 28px;
	height: 28px;
	line-height: 26px;
	padding: 0 6px;
	margin: 0 3px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	color: var(--c-text-sub) !important;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: none !important;
	vertical-align: middle;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button:hover {
	border-color: var(--c-primary);
	color: var(--c-primary) !important;
	background: #fff;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.current,
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_active {
	background: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
	color: #fff !important;
	font-weight: 700;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.disabled,
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button_disabled {
	color: var(--c-border-strong) !important;
	background: var(--c-surface-2);
	cursor: default;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.first,
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.last { display: none; }
.dataTables_paginate:not(#dashboardTable_paginate) span.ellipsis {
	display: inline-block;
	padding: 0 6px;
	color: var(--c-text-muted);
	vertical-align: middle;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.previous,
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.next {
	font-size: 0;
	position: relative;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.previous::before,
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.next::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px;
	background-color: currentColor;
	-webkit-mask: url(/static/images/icons/icon-chevron-left.svg) no-repeat center / contain;
	mask: url(/static/images/icons/icon-chevron-left.svg) no-repeat center / contain;
}
.dataTables_paginate:not(#dashboardTable_paginate) a.paginate_button.next::before {
	-webkit-mask-image: url(/static/images/icons/icon-chevron-right.svg);
	mask-image: url(/static/images/icons/icon-chevron-right.svg);
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 4px;
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li { display: block; float: none; }
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li > a {
	display: block;
	float: none;
	min-width: 28px;
	height: 28px;
	line-height: 26px;
	padding: 0 6px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	color: var(--c-text-sub);
	font-size: 13px;
	text-align: center;
	box-shadow: none;
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li > a:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	background: #fff;
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.active > a {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	font-weight: 700;
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.disabled > a {
	color: var(--c-border-strong);
	background: var(--c-surface-2);
}
/* 처음(|<)/마지막(>|) 버튼 숨김 — Figma는 < > 만 */
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.first,
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.last { display: none; }
/* 이전/다음 : 텍스트 → 셰브론 아이콘 */
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.previous > a,
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.next > a {
	font-size: 0;
	position: relative;
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.previous > a::before,
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.next > a::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px;
	background-color: currentColor;
	-webkit-mask: url(/static/images/icons/icon-chevron-left.svg) no-repeat center / contain;
	mask: url(/static/images/icons/icon-chevron-left.svg) no-repeat center / contain;
}
.dataTables_paginate:not(#dashboardTable_paginate) .pagination > li.next > a::before {
	-webkit-mask-image: url(/static/images/icons/icon-chevron-right.svg);
	mask-image: url(/static/images/icons/icon-chevron-right.svg);
}

/* ── 부트스트랩 마크업 (ul.pagination > li.paginate_button) : 직접 셀렉터 ──
 * 대시보드는 1.9식 마크업(ul 없음)이라 이 규칙의 영향을 받지 않음 */
ul.pagination > li.paginate_button > a {
	display: inline-block !important;
	float: none !important;
	min-width: 28px;
	height: 28px;
	line-height: 26px !important;
	padding: 0 6px !important;
	margin: 0 3px !important;
	background: #fff !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--c-text-sub) !important;
	font-size: 13px !important;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
ul.pagination > li.paginate_button > a:hover {
	border-color: var(--c-primary) !important;
	color: var(--c-primary) !important;
	background: #fff !important;
}
ul.pagination > li.paginate_button.active > a,
ul.pagination > li.active > a {
	background: var(--c-primary) !important;
	border-color: var(--c-primary) !important;
	color: #fff !important;
	font-weight: 700;
}
ul.pagination > li.paginate_button.disabled > a {
	color: var(--c-border-strong) !important;
	background: var(--c-surface-2) !important;
	cursor: default;
}
ul.pagination > li.paginate_button.first,
ul.pagination > li.paginate_button.last { display: none !important; }
ul.pagination > li.paginate_button.previous > a,
ul.pagination > li.paginate_button.next > a {
	font-size: 0 !important;
	position: relative;
}
ul.pagination > li.paginate_button.previous > a::before,
ul.pagination > li.paginate_button.next > a::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px;
	background-color: currentColor;
	-webkit-mask: url(/static/images/icons/icon-chevron-left.svg) no-repeat center / contain;
	mask: url(/static/images/icons/icon-chevron-left.svg) no-repeat center / contain;
}
ul.pagination > li.paginate_button.next > a::before {
	-webkit-mask-image: url(/static/images/icons/icon-chevron-right.svg);
	mask-image: url(/static/images/icons/icon-chevron-right.svg);
}
/* 페이징 li 사이 간격/정렬 */
div.dataTables_paginate ul.pagination { display: inline-flex; align-items: center; }
div.dataTables_paginate ul.pagination > li { display: block; float: none; }

/* 페이지 헤더 공통 : 패딩 통일(24px) + 하단 구분선 (Figma)
 * (좌측 트리 헤더는 아래 svc-layout__aside 스킨이 다시 덮음) */
.app-main .box.box-widget > .box-header {
	padding: 10px 0px 14px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 6px;
    margin-left: 15px;
    margin-right: 18px;
}

#tabList{
	display: inline-flex;
    gap: 2px;
    background: #f4f6f8 !important;
    border: 1px solid #f4f6f8 !important;
    border-radius: var(--radius);
    padding: 4px;
}

#tabList > li.nav-item > a.active {
	background-color: #fff !important;
	border: 2px solid var(--c-primary) !important;
	color: var(--c-primary) !important;
	font-weight: 700;
}

/* ========================================================================
 * 좌측 트리 공통 스킨 (Figma T-CMS 2.0) — 모든 메뉴의 .svc-layout__aside +
 * jstree/fancytree 를 네이비+그린 디자인 언어로 통일
 * ======================================================================== */
/* aside 카드 */
.app-main .svc-layout__aside {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: 0 1px 3px var(--c-shadow);
	padding: 14px;
}
/* 트리 검색 인풋 */
.app-main .svc-layout__aside .has-feedback .form-control {
	height: 40px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	box-shadow: none;
	font-size: 13px;
}
.app-main .svc-layout__aside .has-feedback .form-control:focus { border-color: var(--c-primary); }
.app-main .svc-layout__aside .has-feedback .form-control-feedback { height: 40px; line-height: 40px; }
/* 트리 카드 껍데기(box-widget) 이중 테두리 제거 */
.app-main .svc-layout__aside .box.box-widget {
	border: none;
	box-shadow: none;
	background: transparent;
	margin-bottom: 0;
}
/* 트리 헤더 타이틀 (그룹 목록 등) */
.app-main .svc-layout__aside .box-header { border-bottom: none; padding: 12px 2px 4px; }
/* 트리 헤더 여백 (fancyTreeCustom이 부여하는 커스텀 클래스) */
.app-main .svc-layout__aside .box-header.tree-head-bar,
.tree-head-bar {
	line-height: 16px;
	padding: 16px 5px 9px 0px;
	margin-left: 0px;
	margin-right: 0px;
}
/* 트리 헤더 하단 보더 제거 */
.tree-head-noline { border-bottom: none !important; }
.app-main .svc-layout__aside .box-header .user-block {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-text-strong);
}
/* jstree : 계층 점선 제거 + 선택/hover 그린 톤 (레거시 !important 대응) */
.app-main .jstree-default .jstree-node { background-image: none; }
.app-main .jstree-default .jstree-anchor { color: var(--c-text); border-radius: var(--radius-sm); }
.app-main .jstree-default .jstree-hovered {
	background: var(--c-surface-2) !important;
	box-shadow: none !important;
	border: 0;
}
.app-main .jstree-default .jstree-clicked {
	background: var(--c-primary-soft) !important;
	color: var(--c-primary) !important;
	font-weight: 600;
	box-shadow: none !important;
	border: 0;
}
.app-main .jstree-default .jstree-wholerow-hovered { background: var(--c-surface-2) !important; }
.app-main .jstree-default .jstree-wholerow-clicked { background: var(--c-primary-soft) !important; }
/* 트리 목록 박스 : 보더는 목록 영역(#scrollbody)에만 (헤더 제외) */
.app-main .svc-layout__aside .gogoboxTree {
	background: transparent;
	border: none;
	border-radius: 0;
}
.app-main .svc-layout__aside #scrollbody {
	padding: 0px 2px !important;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);   /* 회색 1px */
	border-radius: 3px;
}
/* 노드 폴더 아이콘 (Figma: 앰버 폴더 · 디바이스 노드는 제외) */
.app-main .jstree-default li:not(.display) > a.jstree-anchor::before {
	content: "";
	display: inline-block;
	width: 15px; height: 15px;
	margin: 0 6px 0 2px;
	vertical-align: -2px;
	background-color: #E9A63A;
	-webkit-mask: url(/static/images/tcms2/icons/folder.svg) no-repeat center / contain;
	mask: url(/static/images/tcms2/icons/folder.svg) no-repeat center / contain;
}
/* 펼침/접힘 화살표 : 스프라이트 삼각형 → 가는 셰브론 */
.app-main .jstree-default .jstree-ocl { background-image: none !important; position: relative; }
.app-main .jstree-default .jstree-closed > .jstree-ocl::before,
.app-main .jstree-default .jstree-open > .jstree-ocl::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px;
	background-color: var(--c-text-sub);
	-webkit-mask: url(/static/images/icons/icon-chevron-right.svg) no-repeat center / contain;
	mask: url(/static/images/icons/icon-chevron-right.svg) no-repeat center / contain;
	transition: transform .15s;
}
.app-main .jstree-default .jstree-open > .jstree-ocl::before { transform: rotate(90deg); }
/* 트리 헤더 액션 버튼 (+ / ✎ / × : Figma 아웃라인 스퀘어) — fancytree(.tree-node-actions) */
.app-main .svc-layout__aside .box-header .user-block { overflow: hidden; }
.app-main .svc-layout__aside .user-block .tree-node-actions {
	display: inline-flex !important;
	gap: 6px;
	float: right;
}
/* Figma 제공 완성형 아이콘 (연그린 배경 포함 24px SVG) — 글리프 대신 배경 이미지 사용 */
.app-main .svc-layout__aside .user-block .tree-node-actions i {
	display: inline-block !important;
	width: 24px; height: 24px;
	margin: 0 !important;
	float: none !important;
	top: 0;
	border: none;
	border-radius: 4px;
	font-size: 0;                           /* glyphicon 글자 숨김 */
	background: no-repeat center / 24px 24px;
	cursor: pointer;
}
.app-main .svc-layout__aside .user-block .tree-node-actions i::before { content: "" !important; }
.app-main .svc-layout__aside .user-block .tree-node-actions i.tree-action-add    { background-image: url(/static/images/tcms2/icons/tree-add.svg); }
.app-main .svc-layout__aside .user-block .tree-node-actions i.tree-action-edit   { background-image: url(/static/images/tcms2/icons/tree-edit.svg); }
.app-main .svc-layout__aside .user-block .tree-node-actions i.tree-action-delete { background-image: url(/static/images/tcms2/icons/tree-del.svg); }
.app-main .svc-layout__aside .user-block .tree-node-actions i:hover { filter: brightness(.96); }
/* fancytree 노드 : 행 높이/폰트/펼침아이콘/폴더 (Figma) */
.app-main .svc-layout__aside span.fancytree-node {
	min-height: 30px;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}
.app-main .svc-layout__aside .tree-title,
.app-main .svc-layout__aside span.fancytree-title {
	font-size: 13px;
	color: var(--c-text);
}
/* 검정 삼각형(glyphicon) → 가는 셰브론 (Figma 크기, 수직 중앙 정렬) */
.app-main .svc-layout__aside .tree-node-left { align-items: center; }
.app-main .svc-layout__aside .fancytree-expander.glyphicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	flex: 0 0 18px;
	color: var(--c-text-sub);
	position: relative;
	top: 0;
}
.app-main .svc-layout__aside .fancytree-expander.glyphicon::before {
	content: "" !important;
	position: static;
	width: 14px; height: 14px;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: url(/static/images/icons/icon-chevron-right.svg) no-repeat center / contain;
	mask: url(/static/images/icons/icon-chevron-right.svg) no-repeat center / contain;
	transition: transform .15s;
}
.app-main .svc-layout__aside .fancytree-expander.glyphicon-triangle-bottom::before { transform: rotate(90deg); }
/* 노드 폴더 아이콘 (Figma: 앰버) — 디바이스 타입 아이콘이 붙는 노드는 제외 */
.app-main .svc-layout__aside .tree-node-left .tree-title::before {
	content: "";
	display: inline-block;
	width: 15px; height: 15px;
	margin: 0 6px 0 4px;
	vertical-align: -2px;
	background-color: #E9A63A;
	-webkit-mask: url(/static/images/tcms2/icons/folder.svg) no-repeat center / contain;
	mask: url(/static/images/tcms2/icons/folder.svg) no-repeat center / contain;
}
.app-main .svc-layout__aside .tree-node-left:has(.glyphicon-blackboard) .tree-title::before,
.app-main .svc-layout__aside .tree-node-left:has(.fancytree-custom-icon) .tree-title::before { display: none; }
/* 팝업(모달) 내 트리도 동일 톤 */
.modal .jstree-default .jstree-node { background-image: none; }
.modal .jstree-default .jstree-hovered { background: var(--c-surface-2); box-shadow: none; border: 0; }
.modal .jstree-default .jstree-clicked {
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-weight: 600;
	box-shadow: none;
	border: 0;
}
.modal .fancytree-active > .fancytree-title,
.modal .fancytree-selected > .fancytree-title {
	background: var(--c-primary-soft) !important;
	color: var(--c-primary) !important;
	border-color: var(--c-primary-soft) !important;
	border-radius: var(--radius-sm);
}