/* ===== Admin Layout ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fafafa; color: #333; font-size: 14px; }
a { text-decoration: none; color: inherit; }

:root { --ad-border: #a8aeb7; }  /* §2.3 컨트롤 단일 보더 토큰(짙은 회색) — 인풋/콤보/버튼/페이저 통일 */
:root { --ad-accent: #1a1a2e; }  /* §2.5/§2.6 테마 액센트색(정렬·툴팁) — photo 어드민 다크네이비 */
#admin-wrap { display: flex; min-height: 100vh; }

/* ===== Sidebar ===== */
#admin-sidebar { width: 240px; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); color: #fff; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; box-shadow: 2px 0 12px rgba(0,0,0,.15); transition: transform .25s ease; }
/* 브랜드 = {프로젝트} ADMIN 텍스트 로고 (진담헤어 치수 공통) */
.sidebar-brand { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand a { display: inline-flex; align-items: center; gap: 8px; }
.sidebar-brand .brand-logo-img { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.sidebar-brand .brand-name { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.sidebar-brand .brand-admin { font-size: 14px; font-weight: 600; letter-spacing: 1.5px; color: rgba(255,255,255,.5); }
/* 메뉴 = 소제목(섹션) + 항목, 아이콘 없음 (진담헤어 치수) */
.sidebar-nav { flex: 1; padding: 12px 0 48px; overflow-y: auto; }
.nav-section-title { padding: 14px 24px 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.sidebar-nav a.nav-link { display: block; padding: 10px 24px; color: rgba(255,255,255,.6); font-size: 14px; font-weight: 500; border-left: 3px solid transparent; transition: all .2s ease; }
.sidebar-nav a.nav-link:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.92); }
.sidebar-nav a.nav-link.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: #fff; font-weight: 600; }
/* §2.9 얇은 커스텀 스크롤바 — 사이드바(다크)=반투명 흰 thumb */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
/* 본문(라이트)=옅은 회색 thumb */
body { scrollbar-width: thin; scrollbar-color: #c2c7cf transparent; }
body::-webkit-scrollbar { width: 10px; height: 10px; }
body::-webkit-scrollbar-thumb { background: #c2c7cf; border-radius: 5px; }
body::-webkit-scrollbar-thumb:hover { background: var(--ad-border); }
body::-webkit-scrollbar-track { background: transparent; }
/* 데스크탑 접기(collapse) — 기본 펼침, 헤더 햄버거로 토글 */
body.admin-sidebar-collapsed #admin-sidebar { transform: translateX(-100%); }
body.admin-sidebar-collapsed #admin-main { margin-left: 0; }
.sidebar-bottom { padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-bottom .btn-view-site {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: #333333;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
	transition: background .2s, transform .2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0,.25);
}
.sidebar-bottom .btn-view-site:hover { background: #666666; transform: translateY(-1px); }

/* ===== Main ===== */
#admin-main { flex: 1; margin-left: 240px; display: flex; flex-direction: column; transition: margin-left .25s ease; }
#admin-header { background: #fff; padding: 14px 28px; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: flex-start; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
/* §제목 — 페이지 제목을 상단 헤더 좌측에 (작대기 액센트) */
.admin-page-heading { margin: 0; margin-right: auto; font-size: 19px; font-weight: 800; color: #1a1a2e; position: relative; padding-left: 14px; }
.admin-page-heading::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 18px; width: 4px; background: #333333; border-radius: 2px; }
.header-right { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.header-right .user-name { font-weight: 600; color: #333; }
.header-right a { color: #999; transition: color .2s; }
.header-right a:hover { color: #1a1a2e; }
#admin-content { flex: 1; padding: 28px; }

/* ===== Page ===== */
.admin-page { width: 100%; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-title { font-size: 24px; font-weight: 800; color: #1a1a2e; position: relative; padding-left: 14px; }
.page-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: #333333; border-radius: 2px; }

/* ===== Tabs ===== */
.admin-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #e5e5e5; }
.admin-tabs .tab-item { padding: 12px 24px; font-size: 14px; font-weight: 500; color: #888; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.admin-tabs .tab-item:hover { color: #555; }
.admin-tabs .tab-item.active { color: #1a1a2e; font-weight: 700; border-bottom-color: #333333; }

/* ===== Buttons ===== */
/* §2.3 일반 버튼 = 흰 배경 + 짙은 글씨 + 토큰 보더, 호버 색상반전 */
.btn-primary { background: #fff; color: #333; border: 1px solid var(--ad-border); padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; transition: all .15s ease; }
.btn-primary:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: #fff; color: #555; border: 1px solid var(--ad-border); padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all .2s; }
.btn-secondary:hover { background: #fafafa; border-color: #bbb; }
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; transition: all .2s; }
.btn-edit { background: #f0f0f0; color: #444; }
.btn-edit:hover { background: #e5e5e5; color: #222; }
.btn-del { background: #fff0f0; color: #e74c3c; }
.btn-del:hover { background: #ffe0e0; color: #c0392b; }
.btn-close {
	background: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 50%;
	width: 44px; height: 44px; font-size: 26px; line-height: 1; cursor: pointer; color: #666;
	display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
	font-weight: 400;
}
.btn-close:hover { background: #e74c3c; color: #fff; border-color: #e74c3c; transform: rotate(90deg); }

/* ===== Filter / Search ===== */
.admin-filter { position: relative; display: flex; gap: 12px; margin-bottom: 20px; align-items: stretch; background: #fff; padding: 14px 18px; border-radius: 10px; border: 1px solid #e5e5e5; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
/* §2.2 — 필터(좌) / 초기화·조회(우 세로배치: 초기화 고정 위 · 조회 flex 아래) */
.search-filters { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding-right: 108px; }
/* §2.2 검색 항목명(라벨) + 컨트롤 그룹 — 포스트링식 */
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group--keyword { flex: 0 0 auto; }
.filter-label { font-size: 14px; font-weight: 700; color: #1a1a2e; padding-left: 2px; }
.filter-row { display: flex; align-items: center; gap: 8px; }
.filter-group--keyword .filter-row { width: 100%; }
.filter-group--keyword .search-box { flex: 0 0 280px; min-width: 0; }
/* §2.2 초기화 위 / 조회 아래 — absolute 로 흐름에서 제외(검색영역 높이는 필터만 결정). 둘 다 flex:1 */
.search-actions { position: absolute; top: 14px; right: 18px; bottom: 14px; width: 92px; display: flex; flex-direction: column; gap: 8px; }
.search-actions .btn-reset { flex: 1; min-height: 0; }
.search-actions .btn-search { flex: 1; min-height: 0; }
.admin-filter select { padding: 9px 36px 9px 14px; border: 1px solid var(--ad-border); border-radius: 8px; font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #333; transition: border-color .2s; cursor: pointer; }
.admin-filter select:hover { border-color: #aaa; }
.admin-filter select:focus { border-color: #333333; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0,.12); }
.search-box { display: flex; gap: 0; flex: 1 1 220px; min-width: 200px; }
.search-box input { padding: 9px 14px; border: 1px solid var(--ad-border); border-radius: 8px; font-size: 14px; width: 100%; transition: border-color .2s; background: #fff; color: #333; }
.search-box input::placeholder { color: #bbb; }
.search-box input:focus { border-color: #333333; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0,.12); }
/* 검색 버튼 — search-box 와 분리, admin-filter 우측 정렬 */
/* 초기화 = outline (§2.3), 조회 옆에 우측 묶음 */
.admin-filter .btn-reset {
	width: 100%; padding: 9px 18px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: #333; border: 1px solid var(--ad-border); border-radius: 8px;
	font-size: 14px; cursor: pointer; font-weight: 600; transition: all .15s;
}
.admin-filter .btn-reset:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.admin-filter .btn-reset:active { transform: translateY(1px); }
.admin-filter .btn-search {
	width: 100%; padding: 9px 18px;
	display: flex; align-items: center; justify-content: center; gap: 5px;
	background: #fff; color: #333; border: 1px solid var(--ad-border); border-radius: 8px;
	font-size: 14px; cursor: pointer; font-weight: 600; transition: all .15s;
}
.admin-filter .btn-search:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.admin-filter .btn-search .ico-search { flex-shrink: 0; }
.admin-filter .btn-search:active { transform: translateY(1px); }

/* ===== Table ===== */
.admin-table-wrap { background: #fff; border-radius: 10px; border: 1px solid #e5e5e5; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
/* §2.5 내용 사이징(auto) + 짧은 컬럼은 max-width 캡 — fixed+width 가 텍스트 컬럼을 뭉개던 문제 방지 */
.admin-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.admin-table thead { background: #fafafa; }
.admin-table th { padding: 13px 16px; text-align: center; font-size: 12px; color: #777; font-weight: 700; white-space: nowrap; border-bottom: 2px solid #e5e5e5; text-transform: uppercase; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; }
/* §2.6 정렬 가능 헤더 */
.admin-table th[data-sort] { cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.admin-table th[data-sort]:hover { color: #333; background: #f0f1f3; }
.admin-table th.sorted { color: #1a1a2e; }
/* §2.6 정렬 표시 — 라벨 옆 인라인(라벨→우선순위 원형배지→화살표). 활성=테마 액센트, 미정렬=흐린 중립 ↕ */
.admin-table th .sort-ind { margin-left: 5px; display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.admin-table th .sort-ind.sort-neutral { color: #b3b8c0; font-size: 11px; font-weight: 400; }
.admin-table th .sort-arrow { color: var(--ad-accent); font-size: 10px; font-weight: 700; }
.admin-table th .sort-prio { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--ad-accent); color: #fff; font-size: 9px; font-weight: 700; line-height: 1; }
.admin-table td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid #f0f1f3; vertical-align: middle; transition: background .15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
/* §2.3 로우 호버 — 색상 반전(흰 → 다크+흰글자). 빈행/스켈레톤 제외, 배지는 자체색 유지 */
.admin-table tbody tr:not(.skeleton-row):not(:has(td.no-data)):hover > td { background: #1a1a2e; color: #fff; border-bottom-color: #1a1a2e; }
.admin-table tbody tr:not(.skeleton-row):not(:has(td.no-data)):hover > td.cardtitle { color: #fff; }
/* §2.5 컬럼 리사이즈 핸들 + 구분선 + 드래그 상태 */
.admin-table thead th { position: relative; }
/* §2.5 셀 세로 구분선 — 헤더·바디 셀 모두(마지막 열 제외) */
.admin-table thead th:not(:last-child),
.admin-table tbody td:not(:last-child) { border-right: 1px solid #eceef1; }
.col-resize-handle { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; }
.col-resize-handle:hover { background: rgba(52,152,219,.3); }
.admin-table thead th.col-dragging { opacity: .45; }
.admin-table thead th.col-drop-target { box-shadow: inset 2px 0 0 #3498db; background: #eef2f8; }
.admin-table td.badge-cell { overflow: visible; text-overflow: clip; white-space: normal; }
/* 뱃지 세로 배열 (뱃지 / 사용·노출 컬럼) */
.badge-stack { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
/* 셀 자체는 줄바꿈 허용(키 컬럼 'A 외 2' 등) 하되, 안의 뱃지 span 은 한 줄 유지 */
.admin-table td.badge-cell .auto-badge-pill,
.admin-table td.badge-cell .badge-use-y, .admin-table td.badge-cell .badge-use-n,
.admin-table td.badge-cell .badge-display-y, .admin-table td.badge-cell .badge-display-n,
.admin-table td.badge-cell .badge-best,
.admin-table td.badge-cell .badge-y, .admin-table td.badge-cell .badge-n {
	white-space: nowrap; display: inline-block;
}
.admin-table tbody tr { transition: all .15s ease; cursor: default; }
.admin-table tbody tr:hover { background: #fafafa; }
.admin-table tbody tr:hover td { color: #222; }
.admin-table .thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: #f0f0f0; border: 1px solid #eee; }
.admin-table .file-name, .form-body .file-name { font-size: 11px; color: #888; margin-top: 4px; word-break: break-all; max-width: 120px; }
.admin-table td.no-data { height: 200px; text-align: center; padding: 20px; color: #bbb; font-size: 14px; white-space: normal; }
.admin-table .col-sort { width: 70px; text-align: center; }
/* 제목 컬럼(악보명 등) — PC 그리드/모바일 카드 공통 볼드. 카드 전용 크기/색/정렬은 @media 블록 참조 */
.admin-table td.cardtitle { font-weight: 700; color: #1a1a2e; }
.admin-table tbody tr { cursor: pointer; }
.price-original { text-decoration: line-through; color: #aaa; font-size: 12px; }

/* Badges - 사용/노출 분리 */
.badge-y { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #e8f8ef; color: #27ae60; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-n { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #f5f5f5; color: #bbb; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-use-y { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #f0f0f0; color: #444444; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-use-n { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #f5f5f5; color: #bbb; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-display-y { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #e8f5e9; color: #2e7d32; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-display-n { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #f5f5f5; color: #bbb; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-best { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; background: #fff3e0; color: #e65100; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* ===== Form Overlay ===== */
.admin-form-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }

/* 모달 전체 한 영역 스크롤 — header/actions 는 sticky */
.admin-form-wrap {
	background: #fff; border-radius: 14px;
	width: min(1280px, 94vw);
	max-width: 94vw; max-height: 92vh;
	box-shadow: 0 20px 60px rgba(0,0,0,.2);
	display: flex; flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
}
.admin-form-wrap.wide { width: min(1480px, 96vw); }

.admin-form-wrap > .form-header {
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	z-index: 5;
}

.admin-form-wrap > form,
.admin-form-wrap > .form-body,
.admin-form-wrap > *:not(.form-header):not(.form-footer):not(.form-actions) {
	flex: 0 0 auto;
	padding: 20px 28px;
	box-sizing: border-box;
}

/* form-actions — form 안/밖 모두 sticky bottom */
.admin-form-wrap .form-actions {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: #fff;
	border-top: 1px solid #f0f0f0;
	padding: 16px 28px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
/* form 안에 있을 때 form 의 padding 상쇄 (전체 너비) */
.admin-form-wrap > form > .form-actions {
	margin: 20px -28px -20px;
}
.form-header {
	flex: 0 0 auto;
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px 28px; border-bottom: 1px solid #f0f0f0; background: #fff;
}
.form-header h3 { font-size: 20px; font-weight: 800; color: #1a1a2e; margin: 0; }

/* Form Inputs */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; color: #666; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.form-group label .req { color: #e74c3c; font-weight: 800; margin-left: 4px; }
.form-input.invalid, .form-group.invalid .form-input, .form-group.invalid > div[id$="TypeCode"], .form-group.invalid .check-group { border-color: #e74c3c !important; box-shadow: 0 0 0 3px rgba(231,76,60,.12) !important; border-radius: 8px; }
.form-group .form-input,
.form-group .form-textarea {
	width: 100%; padding: 10px 14px; border: 1px solid var(--ad-border); border-radius: 8px; font-size: 14px;
	transition: all .2s ease; background: #fff; color: #333;
}
.form-group .form-input:hover, .form-group .form-textarea:hover { border-color: #aaa; }
.form-group .form-input:focus, .form-group .form-textarea:focus { border-color: #333333; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0,.12); }
.form-group .form-textarea { resize: vertical; font-family: inherit; min-height: 80px; }
.form-group select.form-input { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px; cursor: pointer; }
.form-group select[multiple] { height: 110px; background-image: none; }

/* File Input */
.form-group input[type="file"] { width: 100%; padding: 8px 12px; border: 1px dashed var(--ad-border); border-radius: 8px; font-size: 14px; background: #fafafa; cursor: pointer; transition: all .2s; }
.form-group input[type="file"]:hover { border-color: #333333; background: #fafafa; }
.form-group input[type="file"]::file-selector-button { background: #333333; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 10px; }

.form-row { display: flex; gap: 16px; }
.form-group.half { flex: 1; }
.form-group.third { flex: 1; }
.form-group.quarter { flex: 1; }

/* 자동 산정 배지 (BEST/HOT) — 폼/리스트 양쪽에서 사용 */
.auto-badge { display: inline-flex; align-items: center; height: 38px; }
.auto-badge-pill {
	display: inline-flex; align-items: center; justify-content: center;
	height: 26px; padding: 0 12px; border-radius: 999px;
	font-size: 11px; font-weight: 800; letter-spacing: .5px;
	color: #fff; line-height: 1;
}
.auto-badge-pill.best { background: #666666; color: #fff; }
.auto-badge-pill.hot { background: #e74c3c; color: #fff; }

/* HOT/BEST 산정 버튼 — 노랑 + 흰 글씨 */
.btn-calc-badge {
	background: #f1c40f; color: #fff; border: none;
	padding: 9px 18px; border-radius: 8px;
	font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
	transition: all .15s; box-shadow: 0 2px 6px rgba(241,196,15,.3);
}
.btn-calc-badge:hover { background: #d4ac0d; box-shadow: 0 3px 10px rgba(241,196,15,.45); }
.btn-calc-badge:active { transform: translateY(1px); }
/* 공통 추가버튼 — 앞에 + 아이콘 (모든 '추가' 버튼은 btn-add 클래스) */
.btn-add::before { content: '+'; margin-right: 5px; font-weight: 700; font-size: 15px; line-height: 0; }
.auto-badge-pill.off { background: #e5e7eb; color: #888; font-weight: 600; }
.form-hint { font-weight: 400; color: #888; font-size: 11px; text-transform: none; letter-spacing: 0; margin-left: 6px; }

/* ===== Toggle (관리자 영역 체크박스 일괄 토글화 — JS wrap 후 .vs-toggle-track 으로 표시) ===== */
.check-group input[type="checkbox"][data-vs-toggle],
.toggle-switch input[type="checkbox"][data-vs-toggle] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
}
.vs-toggle-track {
	display: inline-block;
	width: 48px;
	height: 26px;
	background: #d0d5dd;
	border-radius: 13px;
	position: relative;
	cursor: pointer;
	transition: background .2s;
	vertical-align: middle;
	flex: 0 0 48px;
	margin: 0 6px 0 0;
}
.vs-toggle-track .vs-toggle-thumb {
	display: block;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	transition: left .2s;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* ON 상태는 input 의 :checked 를 형제 선택자로 직접 반영 —
   JS 로 .checked 를 프로그램적으로 바꿔도(change 미발생) pill 이 자동 동기화된다.
   (구 .on 클래스 방식은 폼 오픈 시 .checked=false 가 change 를 안 띄워 pill 이 stale 됐음) */
input[type="checkbox"][data-vs-toggle]:checked + .vs-toggle-track { background: #333333; }
input[type="checkbox"][data-vs-toggle]:checked + .vs-toggle-track .vs-toggle-thumb { left: 25px; }
.check-group label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px; color: #333; }
.toggle-switch { display: inline-flex; align-items: center; cursor: pointer; }

/* Admin Loading Overlay */
#admin-loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
/* 커스텀 툴팁 (말줄임 전체텍스트 + 이미지) — native title 보다 크고 인지 잘 됨 */
/* §2.5 커스텀 툴팁 = 흰 배경 + 테마색(액센트) 글자·1px 보더 */
#admin-tip { position: fixed; z-index: 99999; display: none; background: #fff; color: var(--ad-accent); padding: 9px 13px; border-radius: 8px; border: 1px solid var(--ad-accent); font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: 0 8px 28px rgba(0,0,0,.18); max-width: 360px; pointer-events: none; }
#admin-tip img { display: block; max-width: 200px; max-height: 270px; border-radius: 4px; background: #fff; border: 1px solid #eee; }
#admin-tip img + .admin-tip-text { margin-top: 7px; }
#admin-loading-overlay .admin-loading-box { background: #fff; border-radius: 14px; padding: 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); min-width: 280px; }
#admin-loading-overlay .admin-loading-spinner { width: 42px; height: 42px; border: 4px solid #e5e7eb; border-top-color: #333333; border-radius: 50%; animation: admin-spin 0.8s linear infinite; }
#admin-loading-overlay .admin-loading-message { font-size: 14px; color: #333; font-weight: 500; text-align: center; line-height: 1.5; }
@keyframes admin-spin { to { transform: rotate(360deg); } }

/* Custom Checkbox & Radio */
.check-group { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 8px 0; }
.check-group label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #444; margin-bottom: 0; cursor: pointer; padding: 4px 0; transition: color .2s; white-space: nowrap; flex-shrink: 0; }
.check-group label:hover { color: #1a1a2e; }
.check-group input[type="checkbox"],
.check-group input[type="radio"] {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	width: 20px; height: 20px; border: 2px solid var(--ad-border); border-radius: 4px;
	position: relative; cursor: pointer; transition: all .2s; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.check-group input[type="radio"] { border-radius: 50%; }
.check-group input[type="checkbox"]:hover,
.check-group input[type="radio"]:hover { border-color: #333333; }
.check-group input[type="checkbox"]:checked,
.check-group input[type="radio"]:checked { background: #333333; border-color: #333333; }
.check-group input[type="checkbox"]:checked::after {
	content: ''; position: absolute; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0;
	top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg);
}
.check-group input[type="radio"]:checked::after {
	content: ''; position: absolute; width: 8px; height: 8px;
	border-radius: 50%; background: #fff;
	top: 50%; left: 50%; margin-top: -4px; margin-left: -4px;
}

.form-actions {
	display: flex; justify-content: flex-end; align-items: center; gap: 10px;
	padding: 16px 28px; border-top: 1px solid #f0f0f0; background: #fff;
	flex: 0 0 auto;
	border-radius: 0 0 14px 14px;
}

/* 폼 내부 스크롤바 커스터마이징 — 슬림한 회색 */
.admin-form-wrap > form,
.admin-form-wrap > .form-body { scrollbar-width: thin; scrollbar-color: #cbd2da #fafafa; }
.admin-form-wrap > form::-webkit-scrollbar,
.admin-form-wrap > .form-body::-webkit-scrollbar { width: 8px; }
.admin-form-wrap > form::-webkit-scrollbar-track,
.admin-form-wrap > .form-body::-webkit-scrollbar-track { background: #fafafa; border-radius: 4px; }
.admin-form-wrap > form::-webkit-scrollbar-thumb,
.admin-form-wrap > .form-body::-webkit-scrollbar-thumb { background: #cbd2da; border-radius: 4px; border: 2px solid #fafafa; }
.admin-form-wrap > form::-webkit-scrollbar-thumb:hover,
.admin-form-wrap > .form-body::-webkit-scrollbar-thumb:hover { background: #9aa4b1; }

/* 모달 열림 동안 바디 스크롤 잠금 */
body.modal-open { overflow: hidden; }
.img-preview { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.img-preview img { max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0,0,0,.08); object-fit: cover; transition: transform .2s; }
.img-preview img:hover { transform: scale(1.05); }
.img-preview .file-name { font-size: 11px; color: #888; margin-top: 4px; text-align: center; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Blur Options ===== */
.blur-option-group { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; padding: 10px 14px; background: #fafafa; border-radius: 8px; border: 1px solid #e5e5e5; }
.blur-option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: #444; margin-bottom: 0 !important; }
.blur-option input[type="radio"] { accent-color: #333333; width: 16px; height: 16px; cursor: pointer; }
.blur-option span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.blur-hint { font-size: 11px; color: #999; margin-left: 2px; }
.blur-processing { color: #999; font-size: 14px; padding: 8px 0; }
.img-preview-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.detail-preview-item { position: relative; display: inline-block; }
.detail-preview-item img { width: 100px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.blur-type-badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; z-index: 1; }
.detail-preview-item .file-size { display: block; text-align: center; font-size: 10px; color: #999; margin-top: 2px; }
.blur-per-file-btns { display: flex; gap: 2px; margin-top: 4px; justify-content: center; }
.blur-btn { font-size: 10px; padding: 2px 6px; border: 1px solid #d0d5dd; border-radius: 4px; background: #fff; color: #666; cursor: pointer; white-space: nowrap; transition: all .15s; }
.blur-btn:hover { border-color: #333333; color: #333333; }
.blur-btn.active { background: #333333; color: #fff; border-color: #333333; }
.blur-reprocessing { opacity: .5; pointer-events: none; }

/* 콤보박스 키보드 hover 강조 */
.combo-item.hover, .combo-item:hover { background: #fafafa; color: #333333; }
.combo-item.selected { font-weight: 700; }

/* 테이블 컬럼 폭 — 가독성 */
/* 순번(첫 열) 다음 데이터열 기준 — 순번 추가로 nth-child 보정 */
#customerTable th:nth-child(2), #customerTable td:nth-child(2) { min-width: 260px; width: 260px; white-space: nowrap; }
#sheetTable th:nth-child(2), #sheetTable td:nth-child(2) { word-break: keep-all; }

/* ===== Pagination ===== */
.pagination-meta-wrap { margin-bottom: 10px; }
.pagination-meta-wrap .page-meta { display: flex; align-items: center; gap: 16px; font-size: 12px; color: #666; justify-content: space-between; padding: 0 4px; }
.pagination-meta-wrap .page-meta .page-total { font-weight: 700; font-size: 14px; color: #333; display: inline-flex; align-items: center; }
/* 전체건수 앞 액센트 바 (§2.1, 진담헤어식 굵은 막대) */
.pagination-meta-wrap .page-meta .page-total::before { content: ""; display: inline-block; width: 4px; height: 15px; margin-right: 8px; border-radius: 2px; background: #333333; }
/* 그리드 헤더 우측 = 액션버튼 + 페이지크기 (§2.1) */
.pagination-meta-wrap .page-meta .page-meta-right { display: flex; align-items: center; gap: 12px; }
.pagination-meta-wrap .page-meta .page-meta-actions { display: flex; gap: 12px; }
.pagination-meta-wrap .page-meta .page-meta-actions:empty { display: none; }
.page-actions { display: flex; gap: 8px; }
/* §2.1 엑셀 다운로드 버튼 (그리드 헤더, 페이지크기 셀렉트 왼쪽) */
.btn-excel { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; background: #fff; color: #333; border: 1px solid var(--ad-border); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; }
.btn-excel:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.btn-excel .ico-excel { flex-shrink: 0; }
/* §2.11 컬럼 토글 버튼 + 팝오버 */
.btn-coltoggle { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; background: #fff; color: #333; border: 1px solid var(--ad-border); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; }
.btn-coltoggle:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
#admin-colpop { position: fixed; z-index: 99999; background: #fff; border: 1px solid var(--ad-border); border-radius: 10px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: flex; flex-wrap: wrap; gap: 7px; max-width: 340px; }
.colpop-badge { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ad-border); background: #f1f1f3; color: #999; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s; }
.colpop-badge.on { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
/* §2.10 순번 컬럼 — 좁고 가운데, 첫 열 고정 */
.admin-table th.col-seq, .admin-table td.col-seq { max-width: 64px; text-align: center; white-space: nowrap; }
/* §2.10 순번 = 보조 정보(작은 폰트 11px + 흐린 회색 #64748B) — 본문 데이터와 구분 */
.admin-table td.col-seq { font-size: 11px; color: #64748B; font-weight: 600; }
/* §2.5 일시(날짜시간) 컬럼 너비 캡 — YYYY-MM-DD HH:mm:ss 한 줄 기준 */
.admin-table th.col-datetime, .admin-table td.col-datetime { max-width: 172px; }
.admin-table tbody tr:hover > td.col-seq { color: #fff; }
/* §3.3 페이저 말줄임(…) — 버튼 아님 */
.pagination-wrap .page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; color: #aaa; }
.pagination-meta-wrap .page-meta .page-size-label { display: inline-flex; align-items: center; gap: 6px; color: #666; }
/* §2.4 — 페이지당 개수도 인풋+드롭다운 콤보 (native select 금지) */
.pagination-meta-wrap .page-meta .page-size-combo { width: 92px; min-width: 92px; }
/* §2.1 그리드 헤더 툴바 — 추가/엑셀/페이지당 버튼·셀렉트 높이 통일(36px) */
.pagination-meta-wrap .page-meta-actions .btn-primary,
.pagination-meta-wrap .page-meta-actions .btn-calc-badge {
	height: 36px; padding: 0 14px; display: inline-flex; align-items: center; gap: 5px;
}
.pagination-meta-wrap .page-meta .page-size-combo .combo-input { height: 36px; padding: 0 24px 0 12px; }
.pagination-meta-wrap .page-meta .page-size-combo .combo-input { padding: 5px 22px 5px 10px; font-size: 12px; }
.pagination-meta-wrap .page-meta .page-size-combo .combo-dropdown { min-width: 66px; }

.pagination-wrap { display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 12px; }
.pagination-wrap .page-buttons { display: flex; align-items: center; gap: 4px; }
.pagination-wrap button {
	min-width: 36px; height: 36px; border: 1px solid #e5e5e5; border-radius: 8px;
	background: #f4f4f4; color: #555; font-size: 14px; font-weight: 500; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.pagination-wrap button:hover:not(:disabled):not(.active) { background: #ececec; border-color: #333333; color: #333333; }
.pagination-wrap button.active { background: #333333; border-color: #333333; color: #fff; font-weight: 700; }
.pagination-wrap button:disabled { opacity: .4; cursor: not-allowed; }
.pagination-wrap .page-info { font-size: 12px; color: #999; margin: 0 10px; }

/* ===== 그리드 로딩 스켈레톤 (§1.2) ===== */
.skeleton-row td { padding: 14px 12px; }
.skeleton-cell {
	display: block; height: 14px; border-radius: 4px;
	background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%);
	background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ===== Order Detail ===== */
.order-detail-content { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.detail-section { margin-bottom: 24px; }
.detail-section h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #333333; color: #1a1a2e; }
.detail-table { width: 100%; }
.detail-table td { padding: 8px 12px; font-size: 14px; border-bottom: 1px solid #f5f5f5; }
.detail-table td:first-child { color: #888; font-weight: 600; width: 130px; background: #fafafa; }

/* ===== Check List (체크박스 선택 리스트) ===== */
.check-list-wrap { max-height: 180px; overflow-y: auto; border: 1px solid var(--ad-border); border-radius: 8px; padding: 8px 12px; background: #fafafa; }
.check-list-wrap .check-list-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; color: #444; cursor: pointer; border-radius: 4px; transition: background .15s; }
.check-list-wrap .check-list-item:hover { background: #fafafa; }
.check-list-wrap .check-list-item input[type="checkbox"] { flex-shrink: 0; }
.check-list-wrap .check-list-empty { color: #bbb; font-size: 14px; padding: 12px 4px; text-align: center; }
.check-list-search { width: 100%; padding: 7px 10px; border: none; border-bottom: 1px solid #eee; font-size: 12px; background: #fff; outline: none; position: sticky; top: 0; }
.check-list-search::placeholder { color: #ccc; }

/* ===== Combo Box (검색 셀렉트) ===== */
.combo-box { position: relative; display: inline-block; }
.combo-input { width: 100%; padding: 9px 14px; border: 1px solid var(--ad-border); border-radius: 8px; font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center; color: #333; transition: border-color .2s; cursor: text; }
.combo-input:focus { border-color: #333333; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0,.12); }
.combo-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--ad-border); border-radius: 8px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 300; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.combo-dropdown.show { display: block; }
.combo-item { padding: 9px 14px; font-size: 14px; cursor: pointer; transition: background .15s; }
.combo-item:hover { background: #fafafa; }
.combo-item.selected { background: #f0f0f0; color: #444444; font-weight: 600; }
.combo-empty { color: #bbb; cursor: default; }
.combo-empty:hover { background: transparent; }
/* 필터 영역 콤보 */
/* §2.2 — 검색유형/필터 콤보는 좁게 고정, 검색값 인풋이 남는 폭 흡수 */
.admin-filter .combo-box { width: 150px; min-width: 150px; flex: 0 0 auto; }

/* 뱃지 필터 칩 — NEW/HOT/BEST 토글 */
.badge-filter { display: flex; gap: 6px; align-items: center; }
.badge-chip { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.badge-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.badge-chip span {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 6px 14px; border-radius: 999px;
	font-size: 12px; font-weight: 800; letter-spacing: .5px;
	border: 1.5px solid transparent;
	transition: all .15s;
}
.badge-chip.new span { background: #fff; color: #b7950b; border-color: #f1c40f; }
.badge-chip.new input:checked + span { background: #f1c40f; color: #fff; box-shadow: 0 2px 6px rgba(241,196,15,.35); }
.badge-chip.hot span { background: #fff; color: #c0392b; border-color: #e74c3c; }
.badge-chip.hot input:checked + span { background: #e74c3c; color: #fff; box-shadow: 0 2px 6px rgba(231,76,60,.35); }
.badge-chip.best span { background: #fff; color: #555555; border-color: #666666; }
.badge-chip.best input:checked + span { background: #666666; color: #fff; box-shadow: 0 2px 6px rgba(52,152,219,.35); }
.badge-chip:hover span { transform: translateY(-1px); }
/* 폼 내 콤보 */
.form-group .combo-box { width: 100%; }
.form-group .combo-input { width: 100%; }

/* ===== Toast ===== */
#toast-area {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%, -100%);
	min-width: 280px;
	max-width: 600px;
	padding: 14px 24px;
	background: rgba(34, 34, 34, .92);
	color: #fff;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 99999;
	transition: opacity .3s, visibility .3s, transform .3s;
}
#toast-area.reveal {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 20px);
	pointer-events: auto;
}

/* ===== Confirm ===== */
/* Key Upload Grid — 3열, 카드 크기 확대 + 콘텐츠 잘 보이게 */
.key-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* 다중 업로드 카드 — 3칸 차지, 드래그 영역 + 큐 상태 */
.key-multi-upload {
	grid-column: 1 / -1;
	border: 2px dashed #cccccc; border-radius: 12px; padding: 18px 20px;
	background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
	transition: all .15s;
}
.key-multi-upload.drag-over { background: #f0f0f0; border-color: #333333; box-shadow: 0 0 0 3px rgba(0, 0, 0,.18) inset; }
.multi-upload-head { display: flex; align-items: center; gap: 16px; }
.multi-upload-info { flex: 1; min-width: 0; }
.multi-title { font-size: 15px; font-weight: 800; color: #222222; margin-bottom: 4px; }
.multi-desc { font-size: 12px; color: #555; line-height: 1.55; }
.multi-desc code { background: #fff; padding: 1px 7px; border-radius: 4px; border: 1px solid #d0d5dd; font-family: 'SF Mono', Menlo, Consolas, monospace; color: #444444; font-size: 11px; }

.multi-upload-queue {
	list-style: none; margin: 14px 0 8px; padding: 10px 12px;
	background: #fff; border-radius: 8px; border: 1px solid #e5e5e5;
	max-height: 260px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 5px;
}
.multi-queue-item {
	display: flex; align-items: center; gap: 10px;
	font-size: 12px; padding: 7px 10px; border-radius: 6px;
	background: #fafafa; border: 1px solid transparent; transition: all .15s;
}
.multi-queue-item.done { background: #f3fbf6; border-color: #c8e6c9; }
.multi-queue-item.failed, .multi-queue-item.invalid { background: #fff5f5; border-color: #ffcdd2; }
.multi-queue-item.uploading { background: #fafafa; border-color: #dddddd; }
.multi-queue-icon { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.multi-queue-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; font-weight: 600; }
.multi-queue-key { flex: 0 0 auto; color: #555; font-size: 11px; }
.multi-queue-key strong { color: #444444; font-size: 14px; font-weight: 800; }
.multi-queue-progress { flex: 0 0 120px; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.multi-queue-bar { display: block; height: 100%; background: linear-gradient(90deg, #333333, #444444); transition: width .2s; }
.multi-queue-pct { flex: 0 0 38px; text-align: right; color: #444444; font-size: 11px; font-weight: 700; }
.multi-queue-msg { flex: 0 0 auto; color: #c62828; font-size: 11px; font-weight: 600; }
.multi-clear {
	margin-top: 8px; padding: 6px 14px; background: #fff;
	border: 1px solid var(--ad-border); border-radius: 6px;
	font-size: 12px; cursor: pointer; color: #666; transition: all .15s;
}
.multi-clear:hover { background: #fafafa; color: #333; border-color: #bbb; }
.key-upload-item {
	border: 1px solid #e5e5e5; border-radius: 10px; padding: 22px 20px; background: #fafafa;
	display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: all .15s; min-height: 100px;
}
.key-upload-item:hover { border-color: #333333; }
.key-upload-item.has-file { background: #f3fbf6; border-color: #27ae60; }
.key-upload-item.is-rep { box-shadow: 0 0 0 2px #f39c12 inset; }
.key-upload-item.is-selected { box-shadow: 0 0 0 2px #333333 inset; }
.key-upload-item.is-rep.is-selected { box-shadow: 0 0 0 2px #f39c12 inset, 0 0 0 4px #333333 inset; }
.key-upload-item.drag-over { background: #f0f0f0; border-color: #333333; box-shadow: 0 0 0 2px #333333 inset; }

.key-upload-item .key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.key-upload-item .key-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; }
.key-upload-item .key-row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 30px; }
.key-upload-item .key-name { font-size: 20px; font-weight: 800; color: #333; line-height: 30px; height: 30px; display: inline-flex; align-items: center; }
.key-upload-item .key-pages {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; color: #2e7d32; font-weight: 700;
	background: #e8f5e9; border: 1px solid #c8e6c9; padding: 0; border-radius: 999px;
	width: 60px; height: 30px; box-sizing: border-box; line-height: 28px;
}
.key-upload-item .key-rep-radio {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 5px; cursor: pointer; font-size: 12px; color: #f39c12; font-weight: 700;
	height: 30px; line-height: 30px; margin: 0; padding: 0;
}
.key-upload-item .key-rep-radio input[type="radio"] {
	margin: 0; padding: 0; cursor: pointer; accent-color: #f39c12;
	width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0;
	align-self: center;
}
.key-upload-item .rep-badge { font-weight: 700; line-height: 30px; display: inline-flex; align-items: center; height: 30px; }
.key-upload-item .key-filename { font-size: 15.6px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

.key-upload-item .key-progress { position: relative; height: 18px; background: #e5e7eb; border-radius: 9px; overflow: hidden; }
.key-upload-item .key-progress-bar { height: 100%; background: #333333; transition: width .2s; }
.key-upload-item .key-progress-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,.3); }

/* 삭제/교체/파일 버튼 — 파스텔 알약, 사이즈 완전 동일, 색상만 다름 */
.btn-key {
	padding: 0; margin: 0;
	width: 60px; height: 30px; box-sizing: border-box;
	font-size: 12px; font-weight: 700; border-radius: 999px;
	border: 1px solid; cursor: pointer; transition: all .15s; line-height: 28px;
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	font-family: inherit; vertical-align: middle;
}
.btn-key > input[type="file"] { display: none; }
.btn-key-file { color: #444444; border-color: #dddddd; background: #f0f0f0; }
.btn-key-file:hover { background: #dddddd; }
.btn-key-del { color: #c62828; border-color: #ffcdd2; background: #ffebee; }
.btn-key-del:hover { background: #ffcdd2; }

/* 대표 이미지 캐로셀 — 영역 더 크게 + 메타는 좌상단 오버레이 */
.sheet-rep-thumb { min-height: 520px; height: 70vh; max-height: 800px; position: relative; padding: 20px; box-sizing: border-box; }
.sheet-rep-thumb .rep-thumb-overlay {
	position: absolute; top: 14px; left: 14px; z-index: 20;
	display: flex; gap: 6px; flex-wrap: wrap;
}
.sheet-rep-thumb .rep-thumb-overlay .ovl-tag {
	padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
	background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.sheet-rep-thumb .rep-thumb-overlay .ovl-rep { background: #f39c12; color: #fff; border-color: #f39c12; }
.sheet-rep-thumb .rep-thumb-overlay .ovl-key { color: #333; font-size: 14px; }
.sheet-rep-thumb .rep-thumb-overlay .ovl-pages { color: #333333; }
.sheet-rep-thumb .rep-thumb-overlay .ovl-idx { color: #888; font-weight: 500; }

.sheet-rep-thumb .rep-thumb-carousel { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sheet-rep-thumb .rep-thumb-carousel img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sheet-rep-thumb .rep-thumb-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9); border: 1px solid #d0d5dd;
	color: #333; font-size: 26px; font-weight: 700; cursor: pointer; line-height: 1;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.15);
	transition: all .15s;
}
.sheet-rep-thumb .rep-thumb-nav:hover:not(:disabled) { background: #333333; color: #fff; border-color: #333333; }
.sheet-rep-thumb .rep-thumb-nav:disabled { opacity: .25; cursor: not-allowed; }
.sheet-rep-thumb .rep-thumb-nav.prev { left: 10px; }
.sheet-rep-thumb .rep-thumb-nav.next { right: 10px; }

/* 대표 이미지 미리보기 박스 — 위 416 라인 정의와 합쳐서 사용 */
.sheet-rep-thumb { width: 100%; background: #fafafa; border: 1px dashed #d0d5dd; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; }
.sheet-rep-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sheet-rep-thumb .rep-thumb-meta { font-size: 14px; color: #555; }
.sheet-rep-thumb .rep-thumb-meta .rep-pages { color: #333333; font-weight: 700; }
.sheet-rep-thumb .rep-thumb-empty { font-size: 14px; color: #aaa; }
.key-upload-item input[type="file"] { display: none; }

#confirm-wrap { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; }
#confirm-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 14px; padding: 28px; min-width: 320px; z-index: 2; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
#confirm-area.reveal { display: block; }
#confirm-area p { margin-bottom: 24px; font-size: 15px; font-weight: 500; color: #333; line-height: 1.5; }
#confirm-area .button-container { display: flex; gap: 10px; justify-content: center; }
#confirm-area .button-container button { padding: 10px 28px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; transition: all .2s; }
#confirm-cancel { background: #f0f0f0; color: #555; }
#confirm-cancel:hover { background: #e5e5e5; }
#confirm-ok { background: #333333; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0,.25); }
#confirm-ok:hover { background: #666666; }
#confirm-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }

/* ===== 햄버거 버튼 (모바일 전용 — 데스크탑은 가장자리 핸들로 대체) ===== */
#admin-hamburger { display: none; width: 40px; height: 40px; background: none; border: 0; padding: 8px; cursor: pointer; margin-right: 4px; flex-direction: column; justify-content: space-between; }
#admin-hamburger span { display: block; width: 100%; height: 2px; background: #333; border-radius: 1px; transition: transform .2s, opacity .2s; }
#admin-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; backdrop-filter: blur(2px); }

/* ===== 사이드바 접기 핸들 (§2.8⑤ — 가장자리 세로 탭, 데스크탑 전용) ===== */
#admin-sidebar-handle {
	position: fixed; top: 50%; transform: translateY(-50%); left: 222px; /* 펼침: 오른쪽 끝(240px)=사이드바 경계 */
	z-index: 1100; width: 18px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; color: #555; cursor: pointer; font-size: 14px; line-height: 1;
	border: 1px solid #e5e5e5; border-right: none; border-radius: 8px 0 0 8px; /* 왼쪽만 둥글게 */
	box-shadow: 2px 0 6px rgba(0,0,0,.06); transition: left .25s ease;
}
#admin-sidebar-handle:hover { background: #f4f4f4; color: #333; }
#admin-sidebar-handle .handle-arrow::before { content: '‹'; }
body.admin-sidebar-collapsed #admin-sidebar-handle {
	left: 0; border: 1px solid #e5e5e5; border-left: none; border-radius: 0 8px 8px 0; /* 오른쪽만 둥글게 */
	box-shadow: -2px 0 6px rgba(0,0,0,.06);
}
body.admin-sidebar-collapsed #admin-sidebar-handle .handle-arrow::before { content: '›'; }
/* 모달(오버레이) 열리면 사이드바 접기 핸들 숨김 — 모달 위로 뜨는 것 방지 */
body.modal-open #admin-sidebar-handle { display: none; }

/* ===== 모바일 반응형 (≤768px) ===== */
@media (max-width: 768px) {
	#admin-sidebar { transform: translateX(-100%); transition: transform .25s ease; width: 78vw; max-width: 320px; }
	body.admin-sidebar-open #admin-sidebar { transform: translateX(0); }
	body.admin-sidebar-open #admin-sidebar-backdrop { display: block; }
	#admin-main { margin-left: 0; }
	#admin-header { padding: 10px 16px; }
	#admin-hamburger { display: flex; }
	#admin-sidebar-handle { display: none; }
	#admin-content { padding: 16px; }

	/* 검색/필터: 세로 정렬 */
	.admin-filter { padding: 12px; gap: 10px; flex-direction: column; align-items: stretch; }
	.admin-filter .combo-box { min-width: 100%; }
	.search-filters { width: 100%; padding-right: 0; gap: 12px; }
	.search-filters .filter-group { width: 100%; }
	.search-filters .combo-box { min-width: 100%; }
	.admin-filter .search-box { display: flex; gap: 8px; flex: 1; }
	.admin-filter .search-box input { flex: 1; min-width: 0; width: auto; }
	/* 검색어 그룹: 검색유형 콤보 + 인풋 한 줄 (콤보 좁게 고정, 인풋이 남은 폭 차지) */
	.filter-group--keyword .filter-row { flex-direction: row; align-items: stretch; gap: 8px; flex-wrap: nowrap; }
	.filter-group--keyword .filter-row .combo-box { min-width: 0; flex: 0 0 38%; }
	.filter-group--keyword .search-box { width: auto; flex: 1 1 auto; min-width: 0; }
	/* 모바일: 초기화/조회 가로 풀폭 (둘 다 균등) */
	.search-actions { position: static; flex-direction: row; width: 100%; gap: 8px; }
	.search-actions button { flex: 1; height: auto; min-height: 40px; }

	/* 페이지 헤더 */
	.page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
	.page-header .btn-primary { width: 100%; }
	/* 페이지 상단 액션버튼 (산정/추가) — 내용 폭 기준 비례 분배(글자 안 잘림) + 넘치면 줄바꿈 */
	.page-actions { width: 100%; flex-wrap: wrap; }
	.page-actions > button { flex: 1 1 auto; }

	/* 테이블: 가로 스크롤 */
	.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.admin-table { min-width: 640px; }
	.admin-table th, .admin-table td { padding: 10px 8px; font-size: 12px; }
	.admin-table .thumb { width: 40px; height: 40px; }

	/* 폼 모달 */
	.admin-form-wrap, .admin-form-wrap.wide { width: 94vw; max-width: 94vw; padding: 18px; max-height: 92vh; }
	.form-row { flex-direction: column; gap: 8px; }
	.form-group.half, .form-group.third, .form-group.quarter { flex: 1 1 100%; width: 100%; }

	/* 키별 PDF 그리드: 4열 → 2열 */
	.key-upload-grid { grid-template-columns: repeat(2, 1fr); }

	/* 그리드 헤더 툴바 (총건수 + 엑셀/페이지당/컬럼) — 줄바꿈 허용해 가로 넘침 방지 */
	.pagination-meta-wrap .page-meta { flex-wrap: wrap; gap: 8px 10px; }
	.pagination-meta-wrap .page-meta .page-meta-right { flex-wrap: wrap; gap: 8px; }

	/* 페이지네이션 */
	.pagination-wrap .page-meta { flex-direction: column; align-items: stretch; gap: 6px; }
	.pagination-wrap .page-meta .page-total { text-align: left; }
	.pagination-wrap .page-meta .page-size-label { justify-content: flex-end; }
	.pagination-wrap button { min-width: 32px; height: 32px; font-size: 12px; }

	/* 사이트 보기 버튼 — 사이드바 안에 들어가는 것이므로 그대로 */
	.sidebar-bottom { padding: 16px; }
}

@media (max-width: 480px) {
	.page-title { font-size: 18px; }
	.form-header h3 { font-size: 17px; }
	.admin-form-wrap { padding: 14px; }
	.admin-table th, .admin-table td { padding: 8px 6px; font-size: 11px; }
	.admin-table .thumb { width: 32px; height: 32px; }
	/* 키별 PDF 그리드: 작은 폰은 1열 (2열은 카드 내용[키명+삭제+교체]이 컬럼폭 초과해 모달 밖으로 넘침) */
	.key-upload-grid { grid-template-columns: 1fr; }
}

/* ===== 모바일 카드형 테이블 (opt-in: 테이블에 .admin-table--card, 래퍼에 .admin-table-wrap--card) =====
   가로 스크롤 대신 각 행을 카드로. thead 숨기고 td 는 data-label 을 ::before 라벨로 표시. */
@media (max-width: 768px) {
	/* 래퍼: 카드가 페이지 배경 위에 놓이도록 박스 해제 */
	.admin-table-wrap--card { background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
	/* 테이블 → 세로 블록 (min-width:640px 해제) */
	.admin-table.admin-table--card { min-width: 0; }
	.admin-table--card thead { display: none; }
	.admin-table--card, .admin-table--card tbody, .admin-table--card tr, .admin-table--card td { display: block; width: auto; }
	/* 데스크탑 컬럼 고정폭(#xxxTable td:nth-child(n) {width}) 해제 — 카드는 전체폭. ID 규칙(높은 특이성) 무력화 위해 !important */
	.admin-table--card th, .admin-table--card td { width: auto !important; min-width: 0 !important; max-width: none !important; }
	/* 행 = 카드 */
	.admin-table--card tbody tr { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
	.admin-table--card tbody tr:hover { background: #fff; }
	/* 셀 = 라벨(왼쪽 absolute 고정) : 값(전부 우측 정렬). 값의 내부 마크업(strong/br/span)
	   과 무관하게 우측 정렬되도록 flex 대신 block + text-align:right 사용. */
	.admin-table--card td { display: block; position: relative; min-height: 30px; padding: 6px 0 6px 76px; border: none; border-bottom: 1px solid #f4f4f5; font-size: 14px; line-height: 1.5; white-space: normal !important; overflow: visible; text-overflow: clip; text-align: right !important; }
	.admin-table--card td:last-child { border-bottom: none; }
	.admin-table--card td::before { content: attr(data-label); position: absolute; left: 0; top: 6px; text-align: left; white-space: nowrap; color: #888; font-weight: 600; font-size: 12px; line-height: 1.5; }
	/* 썸네일: 라벨 없이 상단 큰 이미지 (중앙) */
	.admin-table--card td.col-thumb { text-align: center !important; padding: 4px 0 10px; }
	.admin-table--card td.col-thumb::before { display: none; }
	.admin-table--card td.col-thumb .thumb { width: 64px; height: 64px; }
	/* 순서 셀은 카드에서도 우측 정렬 (기존 .col-sort center 규칙 무력화) */
	.admin-table--card td.col-sort { text-align: right; }
	/* 제목(악보명) 강조 */
	.admin-table--card td.cardtitle { font-weight: 700; font-size: 15px; color: #1a1a2e; text-align: right; }
	/* 빈 목록 */
	.admin-table--card td.no-data { text-align: center !important; padding: 16px 0; border: none; }
	.admin-table--card td.no-data::before { display: none; }
	/* sortable 카드: 드래그 핸들 숨기고 ↑↓ 버튼으로 정렬 */
	.admin-table--card td.col-drag { text-align: right; }
	.admin-table--card td.col-drag .grip-9 { display: none; }
	.admin-table--card td.col-drag .row-move { display: inline-flex; gap: 6px; }
	.admin-table--card td.col-drag .row-move button { width: 36px; height: 30px; border: 1px solid #ddd; background: #fff; border-radius: 6px; font-size: 12px; line-height: 1; color: #555; cursor: pointer; }
	.admin-table--card td.col-drag .row-move button:active { background: #eee; }
}

/* ↑↓ 정렬 버튼은 기본 숨김 (모바일 카드에서만 표시) */
.row-move { display: none; }

/* ===== 드래그 정렬 (sortable-table) ===== */
.sortable-table tr[draggable] { cursor: move; transition: background 0.1s; }
.sortable-table tr.row-dragging { opacity: 0.45; background: #fafafa !important; }
.sortable-table .col-drag {
	width: 36px;
	padding-left: 6px !important;
	padding-right: 6px !important;
	text-align: center;
	cursor: grab;
	user-select: none;
	overflow: visible !important;
	text-overflow: clip !important;
}
.sortable-table .col-drag:active { cursor: grabbing; }
/* 썸네일/짧은 컬럼은 ellipsis 잘림 방지 — opt-in */
.admin-table td.col-thumb { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }

/* 2x2 dot grip — 행/manual 공통 정렬 핸들 (4 dots 고정) */
.grip-9 {
	display: inline-block;
	width: 10px;
	height: 14px;
	vertical-align: middle;
	background:
		radial-gradient(circle, #9aa 1.3px, transparent 1.5px) 1px 2px / 5px 5px no-repeat,
		radial-gradient(circle, #9aa 1.3px, transparent 1.5px) 6px 2px / 5px 5px no-repeat,
		radial-gradient(circle, #9aa 1.3px, transparent 1.5px) 1px 8px / 5px 5px no-repeat,
		radial-gradient(circle, #9aa 1.3px, transparent 1.5px) 6px 8px / 5px 5px no-repeat;
}

/* ===== Manual UI — 선택 / 후보 영역 ===== */
.manual-selected-list, .manual-candidate-list {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fafafa;
	max-height: 220px;
	overflow-y: auto;
	margin-top: 6px;
}
.manual-empty {
	color: #888;
	font-size: 12px;
	padding: 16px;
	text-align: center;
}
.manual-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	background: #fff;
}
.manual-item:last-child { border-bottom: none; }
.manual-item--selected { cursor: move; }
.manual-item--selected.row-dragging { opacity: 0.45; background: #fafafa; }
.manual-item--candidate { cursor: pointer; }
.manual-item--candidate:hover { background: #fafafa; }
.manual-drag {
	cursor: grab;
	user-select: none;
	display: inline-flex;
	align-items: center;
}
.manual-drag:active { cursor: grabbing; }
.manual-order {
	display: inline-block;
	min-width: 22px;
	color: #444444;
	font-weight: 600;
	text-align: right;
}
.manual-add {
	display: inline-block;
	width: 22px;
	text-align: center;
	color: #444444;
	font-weight: 600;
}
.manual-item-title { flex: 1; }
.manual-item-artist { color: #888; font-size: 12px; }
.manual-remove {
	border: none;
	background: transparent;
	color: #aaa;
	font-size: 16px;
	cursor: pointer;
	padding: 0 6px;
}
.manual-remove:hover { color: #d33; }
/* ========================================================================
   워크스페이스 탭 셸 (ADMIN_PAGE_RULE §2.13) + 임베드 모드 + 버전(§2.14)
   ======================================================================== */

/* --- 임베드 모드: iframe 안(html.embed) = 크롬 숨기고 컨텐츠만 --- */
html.embed #admin-sidebar,
html.embed #admin-sidebar-handle,
html.embed #admin-sidebar-backdrop,
html.embed #admin-header { display: none !important; }
html.embed #admin-main { margin-left: 0 !important; }
html.embed #admin-wrap { min-height: 0; }

/* --- 셸 레이아웃: 뷰포트 고정, 패널만 스크롤(iframe 내부) --- */
body.ws-shell #admin-wrap { height: 100vh; overflow: hidden; }
body.ws-shell #admin-main { height: 100vh; min-height: 0; }

/* --- 탭 바 = 사이드바 연장(다크 톤), 활성 탭 = 본문과 동일 밝은 배경 (§2.13 탭 바 외관) --- */
body.ws-shell #admin-header.ws-header {
	background: #16213e;            /* 사이드바 하단색과 연속된 다크 톤 */
	border-bottom: 0; box-shadow: none;
	padding: 0 14px 0 0;           /* 좌측 패딩 0 = 첫 탭이 컨텐츠 좌측 기준선에서 시작 */
	gap: 8px; align-items: stretch; min-height: 46px;
}
body.ws-shell .ws-header > #admin-hamburger,
body.ws-shell .ws-header > .ws-controls,
body.ws-shell .ws-header > .header-right { align-self: center; }
body.ws-shell .ws-header > #admin-hamburger { margin-left: 8px; }
body.ws-shell .ws-header > .ws-tabbar { align-self: stretch; }
body.ws-shell #admin-hamburger span { background: #fff; }
.ws-tabbar { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.ws-tabbar::-webkit-scrollbar { height: 0; width: 0; display: none; }
.ws-tabbar.dragging { cursor: grabbing; }
.ws-tabs { display: inline-flex; align-items: flex-end; gap: 2px; user-select: none; white-space: nowrap; height: 100%; padding-top: 8px; }
.ws-tab { display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; padding: 8px 8px 9px 14px; border: 0; background: transparent; color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600; border-radius: 8px 8px 0 0; cursor: pointer; max-width: 200px; transition: background .15s, color .15s; }
.ws-tab.no-close { padding-right: 14px; }   /* §2.13 ✕ 없는 탭(마지막 1탭)은 좌우 패딩 대칭 — 제목 쏠림 방지 */
.ws-tab .ws-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tab:hover:not(.active) { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.ws-tab.active { background: #fafafa; color: #1a1a2e; }   /* 본문(.ws-panes #fafafa)과 동일 → 폴더탭처럼 본문에 이어짐 */
.ws-tab .ws-home-ico { flex: 0 0 auto; opacity: .7; }
.ws-tab-close { flex: 0 0 auto; border: 0; background: none; color: rgba(255,255,255,.5); font-size: 16px; line-height: 1; width: 18px; height: 18px; border-radius: 4px; cursor: pointer; padding: 0; }
.ws-tab-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.ws-tab.active .ws-tab-close { color: #999; }
.ws-tab.active .ws-tab-close:hover { background: rgba(0,0,0,.1); color: #333; }

/* --- 컨트롤 클러스터 (다크 헤더 위) --- */
.ws-controls { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.ws-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: none; color: rgba(255,255,255,.6); border-radius: 6px; cursor: pointer; }
.ws-ctrl:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #fff; }
.ws-ctrl.active { background: #fafafa; color: #16213e; }
.ws-ctrl:disabled { opacity: .3; cursor: default; }
/* 프로필/로그아웃 (다크 헤더 위) */
body.ws-shell .header-right { color: rgba(255,255,255,.75); }
body.ws-shell .header-right .user-name { color: #fff; }
body.ws-shell .header-right a { color: rgba(255,255,255,.6); }
body.ws-shell .header-right a:hover { color: #fff; }

/* --- 패널(iframe 컨테이너) --- */
.ws-panes { position: relative; flex: 1 1 auto; min-height: 0; background: #fafafa; }
.ws-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; background: #fafafa; display: none; }
.ws-pane-title { display: none; position: absolute; height: 34px; box-sizing: border-box; align-items: center; gap: 6px; padding: 0 12px; background: #eef0f2; border-bottom: 1px solid var(--ad-border); border-right: 1px solid var(--ad-border); font-size: 12px; font-weight: 700; color: #555; cursor: pointer; z-index: 2; }
.ws-pane-title.focus { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.ws-pane-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 열린 탭 목록 / 패널 교체 드롭다운 --- */
.ws-pop { position: fixed; background: #21232b; color: #ddd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.3); padding: 6px; min-width: 200px; max-width: 280px; z-index: 2000; }
.ws-pop-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ws-pop-item:hover { background: rgba(255,255,255,.1); }
.ws-pop-item.active { background: rgba(255,255,255,.18); color: #fff; }
.ws-pop-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pop-close { flex: 0 0 auto; border: 0; background: none; color: #999; cursor: pointer; font-size: 15px; line-height: 1; }
.ws-pop-close:hover { color: #fff; }

/* --- §2.14 버전 라벨 (사이드바 하단) --- */
.sidebar-version { margin-top: 10px; text-align: center; font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .04em; }

/* --- §2.8⑦ 메뉴 컨트롤 바 = 활성으로 스크롤 | 전체펼치기/접기 (우측 정렬, nav 스크롤 밖·로고 아래 고정) --- */
.nav-controls { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-controls .nav-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: none; color: rgba(255,255,255,.42); border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.nav-controls .nav-ctrl:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.nav-controls .nav-ctrl-sep { flex: 0 0 auto; width: 1px; height: 16px; background: rgba(255,255,255,.18); margin: 0 5px; }
html.embed .nav-controls { display: none; }

/* --- §2.8⑦ 메뉴 계층 = 접이식 0뎁스 그룹 (글씨=1뎁스, 꺽쇠, 뎁스 들여쓰기, 말줄임) --- */
.nav-group-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 24px; background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.5); font-size: 14px; font-weight: 700; text-align: left; }
.nav-group-head:hover { color: rgba(255,255,255,.82); }
.nav-group-head .nav-caret { flex: 0 0 auto; transition: transform .2s ease; }
.nav-group.collapsed .nav-caret { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-body { display: none; }
.sidebar-nav a.nav-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 1뎁스 들여쓰기 — 그룹 라벨(헤더 padding 24 + 꺽쇠11 + gap6 ≈ 41px)보다 확실히 깊게 */
.nav-group-body a.nav-link { padding-left: 52px; }
/* 메뉴 말줄임 커스텀 툴팁 (네이티브 title 미사용·지연 0) — 잘린 메뉴만 */
.ws-menu-tip { position: fixed; background: #fff; color: var(--ad-accent); border: 1px solid var(--ad-accent); padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; z-index: 3000; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); display: none; }

/* --- 모바일: 분할 숨김(§2.13), 탭 폭 축소 --- */
@media (max-width: 768px) {
	.ws-ctrl-split { display: none; }
	.ws-tab { max-width: 140px; }
}

/* 전체 재클러스터링 진행 팝업 — 셸 우하단 고정(업로드 팝업 류 백그라운드 UX) */
.recluster-pop { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 280px; max-width: calc(100vw - 36px); background: #fff; border: 1px solid var(--ad-border); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.18); padding: 14px 16px; font-size: 13px; }
.recluster-pop .rp-title { font-weight: 700; color: var(--ad-accent); margin-bottom: 9px; }
.recluster-pop .rp-track { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.recluster-pop .rp-bar { height: 100%; width: 0; background: var(--ad-accent); border-radius: 999px; transition: width .3s ease; }
.recluster-pop .rp-text { color: #64748b; margin-top: 9px; line-height: 1.4; }
.recluster-pop .rp-close { margin-top: 10px; font-size: 12px; color: var(--ad-accent); border: 1px solid var(--ad-border); border-radius: 8px; padding: 4px 12px; background: #fff; cursor: pointer; }

/* 관리자 전체화면 라이트박스 — 인물별 상세 사진 클릭(사용자 화면류 모달) */
.adm-lb { position: fixed; inset: 0; z-index: 10000; background: #000; }
.adm-lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.adm-lb-stage img, .adm-lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-lb-close { position: absolute; top: 16px; right: 16px; z-index: 20; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.adm-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1; border: 0; cursor: pointer; align-items: center; justify-content: center; }
.adm-lb-prev { left: 12px; } .adm-lb-next { right: 12px; }
.adm-lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.82); font-size: 13px; font-variant-numeric: tabular-nums; }
.adm-lb-info { position: absolute; bottom: 16px; right: 16px; z-index: 20; max-width: 80%; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); border-radius: 12px; padding: 10px 12px; color: #fff; font-size: 11px; line-height: 1.65; text-align: right; }

/* 관리자 상세 팝업(큰 모달 iframe) — 인물별/등록자별 상세 */
.adm-detail-pop { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.adm-detail-card { position: relative; width: 92vw; height: 92vh; max-width: 1400px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.adm-detail-close { position: absolute; top: 10px; right: 12px; z-index: 5; width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--ad-accent); border: 0; font-size: 18px; cursor: pointer; }
.adm-detail-frame { width: 100%; height: 100%; border: 0; display: block; }

/* 사진 그리드 공통 — 스켈레톤(진입 즉시, CSS 기준) + 더보기(lazyGrid) */
.adm-hidden { display: none !important; }
[data-lazy-grid] [data-lb] { position: relative; overflow: hidden; background: #e9edf2; }
[data-lazy-grid] [data-lb]:not(.adm-loaded) { min-height: 72px; }   /* 마소너리 등 로드 전 높이 0 방지 */
[data-lazy-grid] [data-lb]::after { content: ''; position: absolute; inset: 0; z-index: 0; transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: admSkel 1.2s infinite; }
[data-lazy-grid] [data-lb].adm-loaded { background: transparent; }
[data-lazy-grid] [data-lb].adm-loaded::after { display: none; }
[data-lazy-grid] [data-lb] img, [data-lazy-grid] [data-lb] video { position: relative; z-index: 1; opacity: 0; transition: opacity .3s; }
[data-lazy-grid] [data-lb].adm-loaded img, [data-lazy-grid] [data-lb].adm-loaded video { opacity: 1; }
@keyframes admSkel { 100% { transform: translateX(100%); } }

/* ── [dbmeta] 공통 모달 폼 컴포넌트(modalForm fragment + adminForm.js) ──────── */
.dm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2000;}
.dm-card{background:#fff;border-radius:14px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.3);}
.dm-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ad-border,#eee);font-weight:800;font-size:16px;color:#1a1a2e;}
.dm-head .dm-close{background:none;border:0;font-size:20px;cursor:pointer;color:#999;line-height:1;}
.dm-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
.dm-body{flex:1 1 auto;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:13px;}
.dm-body label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#374151;}
/* 입력 atom — 검색영역(.search-box input)·콤보(.combo-input)와 동일 토큰(§2.3 패딩·보더·포커스링 통일).
   콤보 input(.combo-input)은 자체 규칙(화살표 배경 포함)을 쓰므로 제외. */
.dm-body input:not(.combo-input),.dm-body textarea{width:100%;padding:9px 14px;border:1px solid var(--ad-border);border-radius:8px;font-size:14px;color:#333;background:#fff;box-sizing:border-box;font-family:inherit;transition:border-color .2s;}
.dm-body input:not(.combo-input)::placeholder,.dm-body textarea::placeholder{color:#bbb;}
.dm-body input:not(.combo-input):focus,.dm-body textarea:focus{border-color:#333;outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.12);}
.dm-body .combo-box{width:100%;display:block;}
.dm-hint{font-size:11px;color:#94a3b8;font-weight:500;}
.dm-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid var(--ad-border,#eee);}
.dm-foot button{padding:9px 18px;border-radius:8px;border:1px solid var(--ad-border);background:#fff;cursor:pointer;font-size:14px;font-weight:600;}
.dm-foot .dm-delete{border-color:#fca5a5;color:#dc2626;}

/* 확인 팝업 atom — native confirm() 대체(같은 .dm-overlay/.dm-card 재사용, 디자인 일관) */
.dm-confirm-body{padding:22px 22px 4px;font-size:14px;color:#333;line-height:1.55;white-space:pre-line;}

/* 인라인 편집 테이블(마스터-디테일 모달: 코드값 등) */
.codes-editor{border:1px solid var(--ad-border);border-radius:8px;overflow:hidden;}
.codes-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#f8f9fb;font-size:12px;font-weight:700;color:#374151;}
.codes-add{padding:4px 10px;border:1px solid var(--ad-border);border-radius:6px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;}
.codes-add:hover{background:#1a1a2e;color:#fff;border-color:#1a1a2e;}
.codes-table{width:100%;border-collapse:collapse;}
.codes-table td{padding:4px 6px;border-top:1px solid #eee;}
.codes-table input{width:100%;padding:6px 8px;border:1px solid var(--ad-border);border-radius:6px;font-size:13px;box-sizing:border-box;}
.codes-table .cc-val{width:96px;}
.codes-table .cc-sort{width:60px;}
.codes-table .c-del{border:0;background:none;color:#dc2626;font-size:18px;cursor:pointer;line-height:1;padding:0 4px;}
.codes-empty{padding:12px;text-align:center;color:#9ca3af;font-size:12px;}