/* =============================================================================
 * ALTA CLEAN Back Office — 공통 스타일
 *
 * ★ 정본은 WebCenPos `/admin/css/admin.css` + `workbench.css` + `page-admin-user.css` 다
 *   (사용자 판정 2026-08-09: "WebCenPos 와 완전히 똑같이").
 *   토큰 이름·값, 클래스 어휘(`alta-*`), 치수·색을 **그대로** 옮긴다.
 *
 * ⚠ 옮기지 않은 것 — 옮길 수 없어서가 아니라 **여기 없어서**다:
 *   · Font Awesome 아이콘 — CDN 로드이고 `href` 문법이 `/assets/` 하위로 닫혀 있다.
 *     아이콘 자리는 **비워 뒀다**(문구는 그대로 보인다). 자산을 들여올지는 별도 판정.
 *   · 미이전 화면(dashboard·master·marketing …)의 page-* 스타일.
 *
 * ⚠ 이 파일은 `AdminStylesheetClosureTest` 가 **전량** 읽는다 — 속성은 허용 문법 안이어야
 *   하고, 숨길 수 있는 속성을 쓰면 그 selector 를 **선언**해야 한다 (사용자 판정 U12).
 * =========================================================================== */

:root {
  /* spacing tokens — 4의 배수로 통일 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* layout sizes */
  --header-h: 48px;
  --sidebar-w: 204px;

  /* color palette */
  --brand: #2e86d8;
  --brand-dark: #1f6dba;
  --brand-soft: #eaf2fb;
  --accent: #a2c74b;
  --text: #1f2937;
  --text-muted: #6b7280;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #eef0f3;
  --border-strong: #d8dde4;
  --danger: #e35d5d;
  --radius: 8px;

  /* typography */
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 14px;
  --font-lg: 16px;

  /* sidebar (어두운 면) */
  --nav-bg: #101827;
  --nav-line: #1d2a3b;
  --nav-sub: #0d1421;
  --nav-text: #cbd5e1;
  --nav-head: #f1f5f9;
  --nav-title: #7f8ea3;
  --nav-hover: #1b2940;

  /* WebCenPos workbench 가 참조하는 토큰 — 저쪽 admin.css 정의값 그대로 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sidebar-w-collapsed: 72px;
}


/* ══════════════════════════════════════════════════════════════
   ★★★ WebCenPos `admin/css/workbench.css` — **그대로** 이식 (2026-08-24)
   정본은 저쪽 파일이다. 우리가 «처럼» 다시 그리면 근사값이 되고, 회차마다
   다른 자리가 어긋난다 — 4회차가 그것을 증명했다.
   ⚠ 우리 기존 규칙은 **이 아래**에 있어 override 로 이긴다(①의 «화면 불변»).
     화면을 저쪽 마크업으로 옮길 때(②) 그 override 를 지운다.
   ══════════════════════════════════════════════════════════════ */
/* =============================================================================
 * Alta Workbench
 * Compact master-data layout shared by /admin pages.
 * =========================================================================== */
.alta-workbench-body {
	overflow: hidden;
	height: 100vh;
}
/* html 자체도 스크롤되지 않도록 강제. body 클래스 기반 :has() (Chrome 105+, Safari 15.4+, Firefox 121+).
   주: admin.css의 `html, body { height: 100% }`만으로는 html의 overflow:visible 기본값이 남아 자식 초과 시 외부 스크롤 발생. */
html:has(body.alta-workbench-body) {
	height: 100vh;
	overflow: hidden;
}
.alta-workbench-body .alta-shell {
	height: 100vh;
	min-height: 0;
	max-height: 100vh;
	overflow: hidden;
	/* grid default 1fr이 minmax(auto, 1fr) → 자식 컨텐츠로 자라남.
	   minmax(0, 1fr)로 강제해 grid 행이 viewport에 fix되도록. */
	grid-template-rows: var(--header-h) minmax(0, 1fr);
}
/* admin.css의 `.alta-main { overflow: auto }` (specificity 0,0,1,0)을 강하게 override.
   workbench-body 컨텍스트에서는 main이 외부 스크롤 가지면 안 됨 (tab-panel만 단일 스크롤). */
.alta-workbench-body .alta-shell .alta-main {
	height: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
}
.alta-workbench-page {
	background: #f4f6f8;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}
.alta-workbench-page.alta-main {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
}
.alta-workbench-page .alta-footer {
	flex: 0 0 auto;
	margin-top: 6px;
	padding: 4px 0 0;
	line-height: 18px;
}
.alta-workbench-title {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	flex: 0 0 auto;
	margin-bottom: var(--space-sm);
	padding: 0 0 var(--space-xs);
	border-bottom: 1px solid var(--border);
}
.alta-workbench-title h1 {
	margin: 0;
	font-size: var(--font-lg);
	line-height: 1.15;
	font-weight: 720;
	color: var(--text);
}
.alta-workbench-title-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-wrap: wrap;
}
.alta-workbench-title-actions .alta-workbench-btn {
	height: 28px;
	padding: 0 10px;
	font-size: 11.5px;
	font-weight: 600;
}
.alta-workbench-title-actions .alta-workbench-btn .fa {
	margin-right: 4px;
}
.alta-workbench-title-actions .alta-workbench-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.alta-workbench {
	display: grid;
	grid-template-columns: minmax(190px, 0.62fr) minmax(300px, 1fr) minmax(320px, 0.95fr);
	grid-template-rows: minmax(0, 1fr);
	width: 100%;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid #dfe5ec;
	border-radius: 8px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
/* 2-pane variant — list + inspector (no middle column).
   1024px 이하/모바일에서는 .alta-workbench의 공통 미디어쿼리가 inspector를
   fixed slide-over로 전환하므로 별도 처리 불필요. */
.alta-workbench--2col {
	grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1fr);
}

/* 2-pane slide-over variant — 1 개 list pane + Inspector 가 우측에서 슬라이드 overlay.
   주의: 기존 `--2col` 은 list+inspector 가 grid 안에 공존하는 정적 레이아웃. `--two` 는
   inspector 가 fixed overlay 라 1fr 트랙이 비어 있고 (또는 list 가 grow), inspector 가
   그 위에 떠 있음. */
.alta-workbench--two {
	grid-template-columns: max-content minmax(0, 1fr);
	overflow-x: auto;
}
.alta-workbench--two > .alta-workbench-inspector {
	position: fixed;
	top: var(--header-h);
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: calc(100vw - var(--sidebar-w-collapsed));
	border-left: 1px solid var(--border);
	box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
	background: var(--surface);
	z-index: 80;
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(.2,.7,.3,1);
	overflow: hidden;
}
.alta-workbench--two > .alta-workbench-inspector.is-open {
	transform: translateX(0);
}
@media (max-width: 1280px) {
	.alta-workbench--two > .alta-workbench-inspector { width: 380px; }
}

/* 3-pane slide-over variant — 두 개의 list pane + Inspector 가 우측에서 슬라이드 overlay.
   설계 원칙 (사용자 피드백): Inspector 가 열려도 list 폭은 절대 줄지 않는다.
   - Inspector 는 position:fixed 로 우측 위에 떠 있음 (main grid 와 별도 레이어).
   - main grid 는 padding-right 을 주지 않아 list 컬럼이 그대로 유지.
   - Inspector 가 lists 의 우측 일부를 가릴 수 있으나, 빈 1fr 트랙(닫힘 상태에서 보이던 영역)
     을 흡수하므로 실제 list 데이터는 거의 가리지 않음.
   - 1280px 이하에서는 Inspector 폭만 380 으로 축소.
   각 페이지는 page-*.css 에서 Inspector typography (#xxxInspector) 와 list-scope 만 추가. */
.alta-workbench--three {
	grid-template-columns: max-content max-content minmax(0, 1fr);
	overflow-x: auto;
}
.alta-workbench--three > .alta-workbench-inspector {
	position: fixed;
	top: var(--header-h);
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: calc(100vw - var(--sidebar-w-collapsed));
	border-left: 1px solid var(--border);
	box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
	background: var(--surface);
	z-index: 80;
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(.2,.7,.3,1);
	/* overflow 는 hidden — 내부 .alta-workbench-form 의 overflow-y:auto 가 form 만 스크롤,
	   footer 는 flex:0 0 auto 로 바닥 고정. 외부에 overflow-y:auto 를 주면 이중 스크롤 + footer 밀림. */
	overflow: hidden;
}
.alta-workbench--three > .alta-workbench-inspector.is-open {
	transform: translateX(0);
}
@media (max-width: 1280px) {
	.alta-workbench--three > .alta-workbench-inspector { width: 380px; }
}

/* Basic Data 그룹 (Discount/UpCharge/Tender/Tax/Memo) — 첫 list 컬럼 약 110% 확장.
   사용자 피드백: 이 그룹은 row text 가 길어 기본 폭으로는 ellipsis 발생. */
.basic-data-page .alta-workbench {
	grid-template-columns: minmax(209px, 0.682fr) minmax(300px, 1fr) minmax(320px, 0.95fr);
}
.basic-data-page .alta-workbench.alta-workbench--2col {
	grid-template-columns: minmax(286px, 0.77fr) minmax(360px, 1fr);
}
.alta-workbench-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	max-height: 100%;
	max-width: 100%;
	min-height: 0;
	overflow: hidden;
	border-right: 1px solid var(--border);
	background: var(--surface);
}
.alta-workbench-pane > .alta-workbench-pane-head,
.alta-workbench-pane > .alta-workbench-create-row {
	flex: 0 0 auto;
}
.alta-workbench-pane > .alta-workbench-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.alta-workbench-pane--muted {
	background: #fbfcfd;
}
.alta-workbench-pane--plain {
	background: #fff;
}
.alta-workbench-pane-head,
.alta-workbench-inspector-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: 56px;
	padding: var(--space-md);
	border-bottom: 1px solid var(--border);
	background: #fbfcfd;
}
.alta-workbench-inspector-head {
	min-height: 46px;
	padding: 8px 10px;
}
.alta-workbench-pane-head span,
.alta-workbench-inspector-head span {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #16735f;
}
.alta-workbench-inspector-head span {
	font-size: 9px;
	letter-spacing: 0.6px;
}
.alta-workbench-pane-head h2,
.alta-workbench-inspector-head h2 {
	margin: 0;
	font-size: var(--font-md);
	font-weight: 720;
	color: var(--text);
}
.alta-workbench-inspector-head h2 {
	font-size: 13px;
}
.alta-workbench-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 22px;
	padding: 0 var(--space-xs);
	border-radius: 999px;
	background: #edf6f3;
	color: #16735f;
	font-size: 11px;
	font-weight: 750;
}
.alta-workbench-create-row {
	display: grid;
	grid-template-columns: 1fr 30px;
	gap: var(--space-sm);
	padding: var(--space-sm);
	border-bottom: 1px solid var(--border);
	background: #f8fafc;
}
.alta-workbench-create-row input,
.alta-workbench-form input,
.alta-workbench-form select,
.alta-workbench-inline-create input,
.alta-workbench-inline-create select,
.alta-workbench-detail-row input,
.alta-workbench-action-row input,
.alta-workbench-action-row select {
	width: 100%;
	min-width: 0;
	height: 26px;
	padding: 0 7px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	box-shadow: none;
}
.alta-workbench-create-row input:focus,
.alta-workbench-form input:focus,
.alta-workbench-form select:focus,
.alta-workbench-inline-create input:focus,
.alta-workbench-inline-create select:focus,
.alta-workbench-detail-row input:focus,
.alta-workbench-action-row input:focus,
.alta-workbench-action-row select:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}
.alta-workbench-form input:disabled {
	background: #f3f6f9;
	color: var(--text-muted);
}
.alta-workbench-list {
	padding: var(--space-sm);
}
.alta-workbench-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 18px;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	min-height: 34px;
	margin: 0 0 2px;
	padding: 0 var(--space-sm);
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--text);
	text-align: left;
	cursor: pointer;
	font: inherit;
}
.alta-workbench-item--wide {
	grid-template-columns: 74px minmax(0, 1fr) 62px 18px;
}
.alta-workbench-item:hover {
	background: #f1f5f9;
}
.alta-workbench-item.is-selected {
	border-color: #b9e4d9;
	background: #eaf7f4;
	box-shadow: inset 3px 0 0 #1a8a72;
}
.alta-workbench-item-code {
	font-size: 11px;
	font-weight: 720;
	color: #64748b;
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.alta-workbench-item.is-selected .alta-workbench-item-code {
	color: #116b59;
}
.alta-workbench-item-main {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--font-sm);
	font-weight: 650;
}
.alta-workbench-item-sub {
	justify-self: end;
	min-width: 0;
	padding: 2px 6px;
	border-radius: 999px;
	background: #eef2f6;
	color: #64748b;
	font-size: 10px;
	font-weight: 700;
}
.alta-workbench-empty-list {
	padding: var(--space-lg) var(--space-md);
	color: var(--text-muted);
	font-size: var(--font-sm);
	text-align: center;
}
.alta-workbench-inspector {
	display: flex;
	min-width: 0;
	max-width: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	background: #fff;
	font-size: 12px;
}
.alta-workbench-inspector-empty,
.alta-workbench-inspector-content {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.alta-workbench-inspector-content {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.alta-workbench-inspector-content > .alta-workbench-form {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 8px;
	align-content: start;
	grid-auto-rows: min-content;
}
.alta-workbench-inspector-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-xl);
	color: var(--text-muted);
	text-align: center;
}
.alta-workbench-inspector-empty .fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #eef8f5;
	color: #16735f;
	font-size: 18px;
}
.alta-workbench-inspector-empty h2 {
	margin: 0;
	font-size: var(--font-lg);
	color: var(--text);
}
.alta-workbench-inspector-empty p {
	max-width: 260px;
	margin: 0;
	font-size: var(--font-sm);
	line-height: 1.45;
}
.alta-workbench-section {
	padding: 8px;
}
.alta-workbench-tab-panel {
	display: none;
}
.alta-workbench-tab-panel.is-active {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.alta-workbench-tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	margin: 6px 8px 0;
	padding: 3px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: #f6f8fa;
	min-width: 0;
}
/* 탭 갯수에 맞춰 column 분할 — 2/3/4/5 modifier */
.alta-workbench-tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alta-workbench-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alta-workbench-tabs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alta-workbench-tabs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 6 탭은 inspector 폭(420)에 1fr 분할하면 "Special Date" 같은 긴 라벨이 ellipsis 됨.
   자연 폭(max-content) 유지 + 폭 부족 시 가로 스크롤 + button ellipsis 무효. */
.alta-workbench-tabs--6 {
	grid-template-columns: repeat(6, max-content);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.alta-workbench-tabs--6::-webkit-scrollbar { display: none; }
.alta-workbench-tabs--6 button {
	padding: 0 8px;
	text-overflow: clip;
}

/* master_pos 전용 — 3-column 생성 row (Code / Name / + button) */
.alta-workbench-create-row--triple {
	grid-template-columns: 1fr 1fr auto;
}

/* master_pos 전용 — Inspector head 우측 action 그룹 (MenuMap / Upload DB / Close) */
.alta-workbench-inspector-head-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* =============================================================================
 * Image editor — store-logo-editor 패턴의 공통화. 96×96 preview + 우측 actions.
 * Delete는 preview 우측 상단 X 버튼(absolute overlay)으로도 트리거 가능.
 * 사용처: master_pos Logo/Idle/Front (향후 master_shop도 점진 통합 가능).
 * ========================================================================== */
.alta-workbench-image-editor {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	min-width: 0;
	margin-bottom: 8px;
}
.alta-workbench-image-editor__preview {
	position: relative;
	width: 96px;
	height: 96px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: #f6f8fa;
	overflow: hidden;
}
.alta-workbench-image-editor__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* 우측 상단 X 버튼 — preview hover 또는 항상 표시 */
.alta-workbench-image-editor__del {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	font-size: 11px;
	line-height: 1;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
}
.alta-workbench-image-editor__preview.has-image .alta-workbench-image-editor__del {
	display: inline-flex;
}
.alta-workbench-image-editor__del:hover { background: rgba(220, 53, 69, 0.9); }
.alta-workbench-image-editor__actions {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
}

/* image-editor 여러 개를 가로로 wrap 배치 (POS Basic 탭: Logo / Idle / Front).
   image-row 안에서는 image-editor를 column layout(preview 위 + Upload 아래)으로 override + preview 144×144 확대. */
.alta-workbench-image-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 8px;
}
.alta-workbench-image-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.alta-workbench-image-cell__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #16735f;
}
.alta-workbench-image-row .alta-workbench-image-editor {
	grid-template-columns: 144px; /* preview only column — actions가 아래에 stack */
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 0;
}
.alta-workbench-image-row .alta-workbench-image-editor__preview {
	width: 144px;
	height: 144px;
}
.alta-workbench-image-row .alta-workbench-image-editor__actions {
	width: 144px;
	justify-content: center;
}

/* =============================================================================
 * Banner thumbnail grid — Banner Image multi-upload, 가로 wrap.
 * 각 tile은 80×80 썸네일 + 우측 상단 X 삭제.
 * ========================================================================== */
.alta-workbench-banner-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
	min-height: 24px;
}
.alta-workbench-banner-tile {
	position: relative;
	width: 80px;
	height: 80px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #f6f8fa;
	overflow: hidden;
	cursor: pointer;
}
.alta-workbench-banner-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.alta-workbench-banner-tile__del {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	font-size: 10px;
	line-height: 1;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.alta-workbench-banner-tile__del:hover { background: rgba(220, 53, 69, 0.9); }
.alta-workbench-banner-tile__name {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* master_pos 전용 — Logo/Idle/Front/Layout iframe 컨테이너 */
.alta-workbench-iframe-block {
	width: 100%;
	height: 120px;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
}
.alta-workbench-iframe-block iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.alta-workbench-iframe-block--tall { height: 360px; }

/* master_pos 전용 — Inspector form 2-column 변형.
   100+ 필드가 한 탭 안에 쌓이면 세로 길이가 폭증해 페이지 본문이 viewport를 초과(외부 스크롤 + tab-panel 스크롤 = 이중 스크롤).
   2-col grid로 압축 + textarea/image/iframe/banner-list 등 wide 컴포넌트는 grid-column: 1 / -1로 full-width.
   인스펙터 폭이 좁아지면(반응형) 1-col으로 자동 fallback. */
.alta-workbench-form--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
}
.alta-workbench-form--cols-2 > .alta-workbench-textarea-row,
.alta-workbench-form--cols-2 > .alta-workbench-image-block,
.alta-workbench-form--cols-2 > .alta-workbench-iframe-block,
.alta-workbench-form--cols-2 > .alta-workbench-banner-grid,
.alta-workbench-form--cols-2 > .alta-workbench-image-editor,
.alta-workbench-form--cols-2 > .alta-workbench-form-fullwidth,
.alta-workbench-form--cols-2 > .alta-workbench-form-divider {
	grid-column: 1 / -1;
}

/* form 안에서 섹션을 시각적으로 분리하는 spacer (입력 필드 그룹 ↔ 토글 그룹 사이 등) */
.alta-workbench-form-divider {
	height: 0;
	margin: 4px 0 2px;
	border-top: 1px solid var(--border);
}
@media (max-width: 1280px) {
	/* 인스펙터가 좁아지면 자연스럽게 1-col로 — sub-tab nav가 가려지는 viewport에서 form이 너무 빽빽해지지 않게 */
	.alta-workbench-form--cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* master_pos Print 탭의 Order Copy section — printer 8개 + receipt 1개를 한 줄(또는 두 줄) compact 그리드로 */
.alta-workbench-form--copies {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 8px;
}
.alta-workbench-form--copies > label {
	grid-template-columns: 44px minmax(0, 1fr);
}
@media (max-width: 1280px) {
	.alta-workbench-form--copies {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* master_pos Common 탭 — 왼쪽 라벨 + 오른쪽 인라인 컨트롤 그룹.
   Basic 탭의 toggle-row 패턴(14x14 #1a8a72) / form input(26px #cfd8e3 6px-radius) 스타일과 통일.
   인스펙터가 좁아져도 항상 side-by-side 유지 (체크박스가 자연스럽게 wrap). */
.alta-workbench-inline-group {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	align-items: center;
	gap: 6px 12px;
	padding: 3px 0;
}
.alta-workbench-inline-group__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
}
.alta-workbench-inline-group__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}
.alta-workbench-inline-group__items label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: normal;
	color: var(--text);
	white-space: nowrap;
}
/* withinput variant — Table Timer / Use tip amount: 체크박스 + 인라인 텍스트 입력 */
.alta-workbench-inline-group__items--withinput input[type="text"] {
	height: 26px;
	width: 56px;
	padding: 0 7px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	box-shadow: none;
}
.alta-workbench-inline-group__items--withinput input[type="text"]:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}
.alta-workbench-inline-group__items--withinput input[type="text"].is-wider {
	width: 110px;
}

/* 라벨 없는 평면 row — Force Drawer In / Skip payment finish alert 등.
   기본 2-col grid, 한 항목만 있으면 자동 full-width. */
.alta-workbench-inline-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 16px;
	padding: 3px 0;
}
.alta-workbench-inline-row > label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: normal;
	color: var(--text);
	white-space: nowrap;
}
.alta-workbench-inline-row > label:only-child {
	grid-column: 1 / -1;
}

/* Basic 탭 toggle-row(.alta-workbench-toggle-row em) 와 시각 통일.
   inline-group/inline-row 안의 native checkbox/radio를 14x14 #1a8a72 디자인으로 통일. */
.alta-workbench-inline-group__items input[type="checkbox"],
.alta-workbench-inline-group__items input[type="radio"],
.alta-workbench-inline-row input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	width: 14px;
	height: 14px;
	border: 1px solid #b8c5d4;
	background: #fff;
	flex: 0 0 auto;
	cursor: pointer;
	position: relative;
}
.alta-workbench-inline-group__items input[type="checkbox"],
.alta-workbench-inline-row input[type="checkbox"] {
	border-radius: 3px;
}
.alta-workbench-inline-group__items input[type="radio"] {
	border-radius: 50%;
}
.alta-workbench-inline-group__items input[type="checkbox"]:checked,
.alta-workbench-inline-row input[type="checkbox"]:checked {
	background: #1a8a72;
	border-color: #1a8a72;
}
.alta-workbench-inline-group__items input[type="checkbox"]:checked::after,
.alta-workbench-inline-row input[type="checkbox"]:checked::after {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 9px;
	line-height: 1;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.alta-workbench-inline-group__items input[type="radio"]:checked {
	border-color: #1a8a72;
}
.alta-workbench-inline-group__items input[type="radio"]:checked::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #1a8a72;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.alta-workbench-tabs button {
	height: 24px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: #64748b;
	font: inherit;
	font-size: 10.5px;
	font-weight: 650;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.alta-workbench-tabs button:hover {
	color: #16735f;
}
.alta-workbench-tabs button.is-active {
	background: #fff;
	color: #0e5f4e;
	box-shadow: var(--shadow-sm);
}
.alta-workbench-section-title,
.alta-workbench-subsection-title {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #16735f;
}
.alta-workbench-section-title {
	margin-bottom: 6px;
}
.alta-workbench-subsection-title {
	font-size: 9.5px;
}
.alta-workbench-form {
	display: grid;
	gap: 6px;
}
.alta-workbench-form label {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 6px;
	align-items: center;
	margin: 0;
	min-width: 0;
}
.alta-workbench-form label > span,
.alta-workbench-combo-row > span,
.alta-workbench-readonly-row span,
.alta-workbench-action-row > span {
	font-size: 11.5px;
	font-weight: 600;
	color: #5f6c7b;
}
.alta-workbench-inline-create,
.alta-workbench-detail-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 30px;
	gap: 6px;
	align-items: center;
	min-width: 0;
}
.alta-workbench-inline-create--wide,
.alta-workbench-detail-row--wide {
	grid-template-columns: 132px minmax(0, 1fr) 30px;
}
.alta-workbench-detail-row {
	grid-template-columns: 120px minmax(0, 1fr) 30px 30px;
	margin-bottom: var(--space-xs);
}
.alta-workbench-detail-row--compact {
	grid-template-columns: minmax(0, 1fr) 30px 30px;
}
.alta-workbench-detail-list {
	margin-top: var(--space-sm);
}
.alta-workbench-combo-row {
	display: grid;
	grid-template-columns: 92px minmax(68px, auto) minmax(0, 1fr);
	gap: 6px;
	align-items: center;
	min-width: 0;
}
.alta-workbench-combo-row--full {
	grid-template-columns: 92px minmax(0, 1fr);
}
.alta-workbench-combo-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	min-width: 0;
}
.alta-workbench-check {
	display: inline-flex !important;
	grid-template-columns: none !important;
	align-items: center !important;
	gap: 4px !important;
	min-width: 0;
	font-size: 11px;
	font-weight: 650;
	color: #5f6c7b;
	white-space: nowrap;
}
.alta-workbench-check input {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin: 0;
	border: 1px solid #b8c5d4;
	border-radius: 3px;
	background: #fff;
}
.alta-workbench-check input:checked {
	border-color: #1a8a72;
	background: #1a8a72;
}
.alta-workbench-check input:checked::after {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 9px;
	line-height: 1;
	color: #fff;
}
.alta-workbench-readonly-row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 6px;
	align-items: center;
	min-width: 0;
}
.alta-workbench-readonly-row a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #1f6dba;
	font-size: 11.5px;
}
.alta-workbench-action-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
	min-width: 0;
}
.alta-workbench-subsection {
	display: grid;
	gap: 6px;
	min-width: 0;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: #fbfcfd;
}
/* ★ 2026-08-24 — 저쪽의 `[hidden]` 전역 규칙을 **들이지 않는다**.
   우리 템플릿 속성 우주(`AdminTemplateCopyTest` NON_DISPLAY_ATTRS)에 `hidden` 이 없어
   **표적이 0** 이고, 남기면 그 속성이 열리는 날 조용한 은닉 통로가 된다. */
.alta-workbench-nested-options {
	display: grid;
	gap: 6px;
	min-width: 0;
	margin-left: 14px;
	padding-left: 8px;
	border-left: 2px solid #e4edf4;
}
/* Slim toggle switch — input + em(track) + thumb(::after). 모든 admin 페이지 공통.
   라벨 컬럼은 콘텐츠 길이로 grow (min 92px 으로 짧은 라벨은 form 와 시각 정렬).
   토글 자체는 28px 만 차지하므로 라벨 컬럼이 form 라벨보다 넓어져도 무방. */
.alta-workbench-toggle-row {
	grid-template-columns: minmax(92px, max-content) 28px !important;
	justify-content: start;
	align-items: center;
	gap: var(--space-sm);
}
.alta-workbench-toggle-row input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.alta-workbench-toggle-row span {
	order: 1;
	min-width: 0;
	white-space: normal;
	line-height: 1.3;
}
.alta-workbench-toggle-row em {
	order: 2;
	display: inline-block;
	position: relative;
	width: 28px;
	height: 14px;
	border-radius: 999px;
	background: #cfd8e3;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
	transition: background 0.18s ease;
	cursor: pointer;
	flex: 0 0 28px;
}
.alta-workbench-toggle-row em::after {
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
	transition: transform 0.18s ease;
}
.alta-workbench-toggle-row input:checked + em {
	background: #1a8a72;
}
.alta-workbench-toggle-row input:checked + em::after {
	transform: translateX(14px);
}
.alta-workbench-toggle-row input:focus-visible + em {
	box-shadow: 0 0 0 2px rgba(26, 138, 114, 0.25);
}
.alta-workbench-toggle-row input:disabled + em {
	opacity: 0.45;
	cursor: not-allowed;
}
.alta-workbench-toggle-row input:disabled + em + span,
.alta-workbench-toggle-row input:disabled ~ span {
	opacity: 0.55;
}
.alta-workbench-inspector-footer {
	position: static;
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding: 8px;
	border-top: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	min-width: 0;
}
.alta-workbench-btn,
.alta-workbench-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	height: 26px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.alta-workbench-btn {
	padding: 0 10px;
	font-weight: 650;
	white-space: nowrap;
}
.alta-workbench-icon-btn {
	width: 26px;
	padding: 0;
}
.alta-workbench-btn:hover,
.alta-workbench-icon-btn:hover {
	border-color: #2d8fd7;
	color: #1f6dba;
}
.alta-workbench-btn--primary,
.alta-workbench-icon-btn--primary {
	border-color: #16735f;
	background: #16735f;
	color: #fff;
}
.alta-workbench-btn--primary:hover,
.alta-workbench-icon-btn--primary:hover {
	border-color: #0e5f4e;
	background: #0e5f4e;
	color: #fff;
}
.alta-workbench-btn--danger {
	border-color: #f0b8b8;
	color: #c94d4d;
}
.alta-workbench-icon-btn--danger {
	border-color: transparent;
	background: #fff5f5;
	color: #c94d4d;
}
.alta-workbench-btn--danger:hover {
	border-color: #c94d4d;
	background: #fff5f5;
	color: #a93d3d;
}
.alta-workbench-icon-btn--danger:hover {
	border-color: #c94d4d;
	color: #a93d3d;
}
.alta-workbench-btn--ghost {
	background: #fff;
}
.alta-workbench-toast {
	position: fixed;
	top: calc(var(--header-h) + var(--space-md));
	right: var(--space-md);
	z-index: 1100;
	min-width: 180px;
	max-width: 320px;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid #0b4a3c;
	border-radius: 7px;
	background: #0e5f4e;
	color: #eafaf4;
	font-size: var(--font-sm);
	font-weight: 650;
	box-shadow: var(--shadow-md);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.alta-workbench-toast.is-active {
	opacity: 1;
	transform: translateY(0);
}
.alta-workbench-toast.is-error {
	border-color: #7d2727;
	background: #9e3535;
	color: #fdecec;
}
@media (max-width: 1180px) {
	.alta-workbench {
		grid-template-columns: minmax(172px, 0.56fr) minmax(240px, 1fr) minmax(280px, 0.9fr);
	}
}
@media (max-width: 1024px) {
	.alta-workbench {
		grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1fr);
	}
	.alta-workbench-inspector {
		position: fixed;
		top: var(--header-h);
		right: 0;
		bottom: 0;
		width: 420px;
		max-width: calc(100vw - var(--sidebar-w-collapsed));
		border-left: 1px solid var(--border);
		box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
		z-index: 80;
		transform: translateX(100%);
		transition: transform 0.2s ease;
	}
	.alta-workbench-inspector.is-open {
		transform: translateX(0);
	}
}
@media (max-width: 768px) {
	.alta-workbench {
		grid-template-columns: 1fr;
	}
	.alta-workbench-pane {
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
	.alta-workbench-form label,
	.alta-workbench-action-row,
	.alta-workbench-combo-row,
	.alta-workbench-combo-row--full {
		grid-template-columns: 1fr;
	}
	.alta-workbench-toggle-row {
		grid-template-columns: 16px minmax(0, 1fr) !important;
	}
	.alta-workbench-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.alta-workbench-inline-create,
	.alta-workbench-inline-create--wide,
	.alta-workbench-detail-row,
	.alta-workbench-detail-row--wide,
	.alta-workbench-detail-row--compact {
		grid-template-columns: 1fr;
	}
	.alta-workbench-inspector {
		left: 0;
		width: 100vw;
		max-width: 100vw;
	}
}

/* =============================================================================
 * Sortable drag handle + drag visual feedback (SortableJS state classes)
 * =========================================================================== */
.alta-workbench-item-handle {
	justify-self: center;
	color: #94a3b8;
	font-size: 11px;
	cursor: grab;
	transition: color 0.15s;
}
.alta-workbench-item-handle:hover { color: #16735f; }
.alta-workbench-item.sortable-chosen .alta-workbench-item-handle { cursor: grabbing; }
.alta-workbench-item.sortable-ghost { opacity: 0.4; }
.alta-workbench-item.sortable-drag { box-shadow: var(--shadow-md); background: #fff; }

/* Inspector hint text — 후속 마이그레이션 단계 안내 등에 사용 */
.alta-workbench-hint {
	margin: 8px 0 0;
	padding: 8px 10px;
	font-size: 11px;
	color: #5f6c7b;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	line-height: 1.5;
}

/* Textarea form row — alta-workbench-form label에 .alta-workbench-textarea-row 부착 */
.alta-workbench-form label.alta-workbench-textarea-row {
	align-items: start;
}
.alta-workbench-form label.alta-workbench-textarea-row > span { padding-top: 6px; }
.alta-workbench-form textarea {
	width: 100%;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	resize: vertical;
	min-height: 60px;
}
.alta-workbench-form textarea:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}

/* =============================================================================
 * Modal (admin) — bootbox 대체. iframe modal 등 재사용 가능한 base 컴포넌트.
 * .alta-modal[hidden]은 표시되지 않고, .is-open이 붙으면 flex로 중앙 배치.
 * =========================================================================== */
.alta-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
}
.alta-modal.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}
.alta-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
}
.alta-modal-dialog {
	position: relative;
	z-index: 1;
	width: 1000px;
	max-width: calc(100vw - 40px);
	height: 700px;
	max-height: calc(100vh - 40px);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.alta-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
	background: #fbfcfd;
	flex: 0 0 auto;
}
.alta-modal-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}
.alta-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #64748b;
	font-size: 13px;
	cursor: pointer;
	border-radius: 4px;
}
.alta-modal-close:hover {
	color: #b04545;
	background: #f1f5f9;
}
.alta-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: #fff;
}
.alta-modal-body iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.alta-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	background: #fbfcfd;
	flex: 0 0 auto;
}

/* =============================================================================
 * Image upload block — Group / Menu 이미지 (preview + upload/delete)
 * 매장 로고(.store-logo-editor)와 동일 비주얼 패턴 — 96×96 preview + 가로 actions.
 * =========================================================================== */
.alta-workbench-image-block {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	min-width: 0;
}
.alta-workbench-image-preview {
	width: 96px;
	height: 96px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: #fff;
	overflow: hidden;
}
.alta-workbench-image-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.alta-workbench-image-actions {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
}

/* =============================================================================
 * Modifier linking — option group + min/max/free_qty 매핑 UI
 * =========================================================================== */
.alta-workbench-modifier-add,
.alta-workbench-modifier-head,
.alta-workbench-modifier-row {
	display: grid;
	gap: 4px;
	align-items: center;
	min-width: 0;
	/* 맨 앞 18px = drag handle 컬럼. add-row 는 handle 없이 빈 placeholder span 으로 컬럼 정렬 유지 */
	/* 컬럼: handle / option group / min / max / free / LB(line break) / PB(page break) / del */
	grid-template-columns: 18px minmax(0, 1fr) 46px 46px 46px 28px 28px 26px;
}
.alta-workbench-modifier-add {
	padding: 6px;
	background: #f8fafc;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	margin-bottom: 6px;
}
.alta-workbench-modifier-head {
	padding: 4px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #5f6c7b;
}
.alta-workbench-modifier-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.alta-workbench-modifier-row {
	padding: 3px 6px;
	border: 1px solid transparent;
	border-radius: 6px;
}
.alta-workbench-modifier-row:hover {
	border-color: #e2e8f0;
	background: #fafbfc;
}
/* modifier reorder drag handle (group/item 리스트와 동일 톤) */
.alta-workbench-modifier-handle {
	justify-self: center;
	color: #94a3b8;
	font-size: 11px;
	cursor: grab;
	transition: color 0.15s;
}
.alta-workbench-modifier-handle:hover { color: #16735f; }
.alta-workbench-modifier-row.sortable-chosen .alta-workbench-modifier-handle { cursor: grabbing; }
.alta-workbench-modifier-row.sortable-ghost { opacity: 0.4; }
.alta-workbench-modifier-row.sortable-drag { box-shadow: var(--shadow-md); background: #fff; }
/* LB / PB (line break / page break) 체크박스 셀 가운데 정렬 */
.alta-workbench-modifier-row input[type="checkbox"] { justify-self: center; margin: 0; }
.alta-workbench-modifier-add select,
.alta-workbench-modifier-add input,
.alta-workbench-modifier-row select,
.alta-workbench-modifier-row input[type="number"] {
	width: 100%;
	min-width: 0;
	height: 26px;
	padding: 0 6px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
}
.alta-workbench-modifier-add select:focus,
.alta-workbench-modifier-add input:focus,
.alta-workbench-modifier-row select:focus,
.alta-workbench-modifier-row input:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}
.alta-workbench-modifier-del,
.alta-workbench-modifier-row .modifier-del {
	color: #b04545;
}
.alta-workbench-modifier-row .modifier-del:hover {
	color: #fff;
	background: #b04545;
}

/* Tab panel 내부 액션 버튼 행 — Save Language 등 탭별 별도 저장 버튼 정렬 */
.alta-workbench-panel-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 8px;
	padding-right: var(--space-md);
}

/* =============================================================================
 * Chip toggle row — printer routing, KDS exclude 등 다중 선택 UI
 * =========================================================================== */
.alta-workbench-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 0;
}
.alta-workbench-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 26px;
	padding: 0 10px;
	border: 1px solid #cfd8e3;
	border-radius: 999px;
	background: #fff;
	color: #5f6c7b;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.alta-workbench-chip input[type="checkbox"] {
	display: none;
}
.alta-workbench-chip > span {
	pointer-events: none;
}
.alta-workbench-chip:hover {
	border-color: #2d8fd7;
	color: #2d8fd7;
}
.alta-workbench-chip:has(input:checked) {
	border-color: #1a8a72;
	background: #eaf7f4;
	color: #0e5f4e;
}

/* Section title with inline toggle (e.g. "Operating hours [Enable]") */
.alta-workbench-section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: 4px;
}
.alta-workbench-section-title-row .alta-workbench-section-title {
	margin: 0;
}
.alta-workbench-inline-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: #5f6c7b;
	cursor: pointer;
}
.alta-workbench-inline-toggle input[type="checkbox"] {
	margin: 0;
}

/* Operating hours 7-day grid */
.alta-workbench-week-grid {
	display: grid;
	gap: 4px;
}
.alta-workbench-week-row {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr) 12px minmax(0, 1fr);
	align-items: center;
	gap: 6px;
}
.alta-workbench-week-day {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: #5f6c7b;
	cursor: pointer;
}
.alta-workbench-week-day input[type="checkbox"] { margin: 0; }
.alta-workbench-week-row input[type="time"] {
	width: 100%;
	min-width: 0;
	height: 26px;
	padding: 0 6px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
}
.alta-workbench-week-row input[type="time"]:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}
.alta-workbench-week-sep {
	text-align: center;
	color: #94a3b8;
	font-size: 11px;
}

/* ============================================================
   master_pos Print 탭 — 원본 layout 매칭용 컴포넌트 묶음
   ============================================================ */

/* 일부 섹션(Print Tip / Receipt Font / Kitchen Font)에 옅은 배경. 원본의 회색 구분과 유사 */
.alta-workbench-section--shaded {
	background: #f3f6f9;
	border-radius: 6px;
	padding: 8px 10px;
}

/* inline-row 내부에서 "라벨 + 입력" pair (Print signline … limit amount($) [_____]) */
.alta-workbench-inline-labelinput {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.alta-workbench-inline-labelinput > span {
	font-size: 12px;
	color: var(--text);
}
.alta-workbench-inline-labelinput > input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 26px;
	padding: 0 7px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 12px;
}
.alta-workbench-inline-labelinput > input[type="text"]:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}

/* Print Tip Amount: 라벨 + 3 input(가로) + 3 체크박스(세로) */
.alta-workbench-tip-grid {
	display: grid;
	grid-template-columns: 90px minmax(0, auto) minmax(0, 1fr);
	align-items: start;
	gap: 6px 14px;
}
.alta-workbench-tip-grid__label {
	font-size: 12px;
	font-weight: 600;
	padding-top: 5px;
}
.alta-workbench-tip-grid__inputs {
	display: flex;
	gap: 6px;
}
.alta-workbench-tip-grid__inputs input {
	width: 72px;
	height: 26px;
	padding: 0 7px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	text-align: center;
}
.alta-workbench-tip-grid__inputs input:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}
.alta-workbench-tip-grid__checks {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.alta-workbench-tip-grid__checks label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	cursor: pointer;
}

/* Print label for receipt / kitchen: 3-col x 2-row 체크박스 grid (라벨 영역 들여쓰기) */
.alta-workbench-langlabel-grid {
	display: grid;
	grid-template-columns: 92px repeat(3, minmax(0, 1fr));
	gap: 6px 16px;
	padding: 3px 0;
}
.alta-workbench-langlabel-grid > label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
}
/* 두 행 모두 라벨 영역(1번 컬럼)을 비움: Name/Lang3을 강제로 2번 컬럼에 배치 */
.alta-workbench-langlabel-grid > label:nth-child(1),
.alta-workbench-langlabel-grid > label:nth-child(4) {
	grid-column: 2 / 3;
}

/* Print Receipt Font: 2-col 라벨+select */
.alta-workbench-font-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;
}
.alta-workbench-font-grid__cell {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text);
}
.alta-workbench-font-grid__cell select {
	width: 68px;
	height: 26px;
	padding: 0 7px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 12px;
}

/* Print kitchen Font: 2x2 cell, 각 셀 = 라벨 + select + Bold 체크박스 */
.alta-workbench-kfont-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;
}
.alta-workbench-kfont-cell {
	display: grid;
	grid-template-columns: 70px minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text);
}
.alta-workbench-kfont-cell__label {
	font-size: 12px;
}
.alta-workbench-kfont-cell select {
	width: 68px;
	height: 26px;
	padding: 0 7px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 12px;
}
.alta-workbench-kfont-cell__bold {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	cursor: pointer;
}

/* # of copies: 5-col grid (rowlabel + Table/TakeOut/Delivery/Quick) */
.alta-workbench-copies-grid {
	display: grid;
	grid-template-columns: 80px repeat(4, minmax(0, 1fr));
	gap: 4px 6px;
	align-items: center;
}
.alta-workbench-copies-grid__cell--head {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
	padding: 2px 0;
}
.alta-workbench-copies-grid__rowlabel {
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
}
/* Order Sheet 각 column: 8개 input을 4x2 mini-grid 로 압축 */
.alta-workbench-copies-grid__order8 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
}
.alta-workbench-copies-grid__order8 input,
.alta-workbench-copies-grid__receipt input {
	width: 100%;
	min-width: 0;
	height: 22px;
	padding: 0 2px;
	border: 1px solid #cfd8e3;
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 11px;
	text-align: center;
}
.alta-workbench-copies-grid__order8 input:focus,
.alta-workbench-copies-grid__receipt input:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 2px rgba(45, 143, 215, 0.12);
}

/* Layout 탭 iframe 슬라이더 값 표시 (LAYOUT ( left : top : 100-top )) */
.alta-workbench-layout-label {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: 0.4px;
}

/* Security 탭 Authentication — Order(main) + 6 sub(들여쓰기 + →) + 단독 항목 단일 컬럼 리스트 */
.alta-workbench-auth-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 3px 0;
}
.alta-workbench-auth-list > label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text);
	cursor: pointer;
	white-space: nowrap;
}
.alta-workbench-auth-list > label.is-sub {
	padding-left: 18px;
}
.alta-workbench-auth-arrow {
	color: #94a3b8;
	font-size: 11px;
	margin-right: 0;
}

/* Receipt Footer textarea — inline-group label 옆 full-width */
.alta-workbench-footer-textarea {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	font: inherit;
	font-size: 12px;
	resize: vertical;
	min-height: 60px;
}
.alta-workbench-footer-textarea:focus {
	outline: none;
	border-color: #2d8fd7;
	box-shadow: 0 0 0 3px rgba(45, 143, 215, 0.12);
}


/* ══════════════════════════════════════════════════════════════
   ★★★ WebCenPos `admin/css/page-admin-user.css` — **그대로** 이식 (2026-08-24)
   저쪽 admin_user 화면(우리 `/admin/members` 의 짝)의 고유 배치다.
   `--four`(4-pane 그리드)와 `au-*` 부품이 여기 있다.
   ══════════════════════════════════════════════════════════════ */
/* /admin Admin User — 4-pane (User | Branch | Store | Inspector) workbench
 * docs/CONTEXT.md 의 alta 스타일 정합.
 */

/* Admin User 페이지 — 4-pane (User|Branch|Store|Inspector). Inspector 는 fixed overlay.
 * 설계 원칙: Inspector 가 열려도 list 컬럼 폭은 그대로 유지. Inspector 는 우측 위에 떠 있음. */
.alta-workbench--four {
	grid-template-columns: max-content max-content max-content minmax(0, 1fr);
	overflow-x: auto;
}

.alta-workbench--four > .alta-workbench-inspector {
	position: fixed;
	top: var(--header-h);
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: calc(100vw - var(--sidebar-w-collapsed));
	border-left: 1px solid var(--border);
	box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
	background: var(--surface);
	z-index: 80;
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(.2,.7,.3,1);
	/* overflow 는 hidden — 내부 form 만 스크롤, footer 는 flex 로 바닥 고정. */
	overflow: hidden;
}
.alta-workbench--four > .alta-workbench-inspector.is-open {
	transform: translateX(0);
}

/* User 리스트 row: 4-col grid (code | main | sub | login). 한 줄 유지. */
.au-user-row {
	grid-template-columns: 40px max-content auto 56px;
	cursor: pointer;
}

/* List 안의 텍스트 ellipsis 차단 — column 자체가 max-content 로 grow 하기 때문에
 * row 안에서 잘리지 않고 풀 텍스트 표시. 가로 스크롤은 main grid 한 곳에서만 발생.
 *
 * - .alta-workbench-item 의 grid track 의 1fr 셀이 content 보다 좁게 압축될 수 있어
 *   min-width: max-content 로 강제. row 의 max-content = sum(cells).
 * - 그래도 부모 .alta-workbench-pane > .alta-workbench-list 가 overflow-y:auto 라
 *   CSS spec 상 overflow-x:visible 이 auto 로 강제 변환되어 scroll bar 가 가끔 보임.
 *   .au-list 에 overflow-x:hidden 명시로 차단 (column 이 이미 grow 하므로 잘림 없음).
 * - row 우측에 8px buffer 여백 — 가장 긴 이름이 끝선에 닿지 않게.
 */
.au-list {
	overflow-x: hidden;
}

/* ★★ C-3-admin-stores — 매장 행의 드래그 손잡이 겸 정렬 버튼 자리.
 * `draggable` 의 element 우주가 `div` 하나라 링크를 한 겹 감쌌고, 그 겹이
 * 행을 세로로 쌓지 않게 가로로 편다. 정렬 form 은 anchor 의 **sibling** 이다. */
.au-sort-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}
.au-sort-row .alta-workbench-item {
	flex: 1;
}
/* row 의 padding-right 으로 buffer 를 주면 background 영역과 별개라 텍스트가
 * 선택 박스 밖으로 삐져나온다. 대신 main 셀 자체에 padding-right 추가 →
 * column max-content = content + padding 으로 계산되어 row 안에 정확히 포함. */
.au-list .alta-workbench-item-main {
	padding-right: 16px;
}
.au-list .alta-workbench-item-main,
.au-list .alta-workbench-item-code {
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
	min-width: -webkit-max-content;
	min-width: -moz-max-content;
	min-width: max-content;
}
.au-row-action {
	background: transparent;
	border: 1px solid #D5D1DE;
	color: #5B5878;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
	justify-self: end;
	white-space: nowrap;
}
.au-row-action:hover {
	color: #fff;
	background: #6E7BFF;
	border-color: #6E7BFF;
}
.au-row-action-spacer { display: block; min-width: 56px; }

/* ===== Inspector 텍스트/경계 강화 — gray 톤 톤다운으로 집중도 ↑ ===== */
#adminInspector {
	color: #1F1A33;
}
#adminInspector .alta-workbench-inspector-head {
	border-bottom: 1px solid #d5d9e0;
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
#adminInspector .alta-workbench-inspector-head span {
	color: #5b6477;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
#adminInspector .alta-workbench-inspector-head h2 {
	color: #1F1A33;
	font-weight: 700;
}
#adminInspector .alta-workbench-form > label > span {
	color: #475569;
	font-weight: 600;
}
#adminInspector input[type="text"],
#adminInspector input[type="tel"],
#adminInspector input[type="password"],
#adminInspector input[type="number"],
#adminInspector select {
	color: #1F1A33;
}
#adminInspector input[disabled] {
	color: #475569;
	background: #f4f6fa;
}
#adminInspector .alta-workbench-check {
	color: #1F1A33;
	font-weight: 600;
}
#adminInspector .alta-workbench-subsection {
	border: 1px solid #ced4da;
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 6px;
	background: #fafbfc;
}
#adminInspector .alta-workbench-subsection-title {
	color: #2A2540;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
#adminInspector .alta-workbench-inspector-footer {
	border-top: 1px solid #d5d9e0;
	background: #fafbfc;
}

/* "(you)" 셀프 태그 */
.au-self-tag {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #6E7BFF;
	background: #EEF0FF;
	border-radius: 999px;
}

/* 리스트 빈 상태 */
.au-list-empty {
	padding: 28px 16px;
	text-align: center;
	font-size: 12.5px;
	color: #8B859A;
	font-style: italic;
}

/* Confirm modal */

/* Inspector 안에서 password row + import row 같은 작은 액션 행 보조 스타일은
   기본 .alta-workbench-action-row 가 처리. 별도 스타일 불필요. */

/* 1280px 이하 — Inspector 폭만 380 으로 축소. */
@media (max-width: 1280px) {
	.alta-workbench--four > .alta-workbench-inspector { width: 380px; }
}


/* ══════════════════════════════════════════════════════════════
   ★★★ pane 폭 리사이징 — **공통 모듈** (2026-08-24)
   WebCenPos 에 없는 기능이다. 목업(mockup/menu-data)에서 만들어 실측으로
   다듬은 뒤 옮겼다. 워크벤치를 쓰는 화면이면 어디든 붙는다:
     1) 워크벤치에 alta-workbench--resizable + data-resize-scope
     2) 각 pane 안쪽 끝에 div.alta-workbench-pane-resizer
   ══════════════════════════════════════════════════════════════ */
/*
 * ★★★ 워크벤치 pane 폭 리사이징 — **공통 부품** (2026-08-24)
 *
 * ⚠ WebCenPos 원본에는 **없는 기능**이다. 그래서 저쪽 `workbench.css` 를 고치지 않고
 *   이 파일로 분리한다 — 원본 복사본을 손대면 «저쪽이 실제로 어떤가» 의 기준이 흐려진다.
 *
 * 제품(`server/.../assets/admin.css`)에 그대로 옮길 수 있는 형태로 쓴다:
 *   · 폭은 **CSS 변수**로 — 인라인 style 을 쓰지 않는다
 *   · 핸들은 pane **안쪽** 끝에 둔다(`right: 0`) — 음수 오프셋을 쓰지 않는다
 *   · 색·크기는 기존 토큰(`--brand`·`--border`)을 쓴다
 */

:root {
	/* 기본 폭 — `max-content`(내용에 맞춤)로 시작하고, 사용자가 끌면 JS 가 px 로 바꾼다 */
	/* Groups — 내용에 맞춘 폭에서 시작한다 */
	--pane-1-w: max-content;
	/*
	 * ★ Items 는 **남은 공간**에서 시작한다(`max-content` 가 아니다).
	 * ⚠ 둘 다 `max-content` 면 초기 합이 사용 가능 폭을 넘어(401+569+420 > 1372)
	 *   트랙이 비례 축소되고, 그러면 **끈 만큼 따라오지 않는다**(실측: 120px 끌어 74px).
	 *   한쪽이 양보하는 쪽이면 끈 값이 그대로 반영된다.
	 */
	--pane-2-w: max-content;
	--pane-3-w: max-content;
	/* Inspector 가 열렸을 때 예약하는 트랙 폭 — `workbench.css` 의 패널 폭과 같다 */
	--pane-inspector-w: 420px;
}

/*
 * ★★★ Inspector 가 열리면 **그 폭을 트랙으로 예약**한다.
 *
 * ⚠ 저쪽 원본은 Inspector 를 `fixed` 오버레이로 두고 pane 위를 **덮는다**. 리사이징이
 *   없을 때는 문제가 없지만, 덮이는 순간 Items pane 의 오른쪽 경계가 Inspector 아래로
 *   들어가 **핸들을 잡을 수 없다** — 눈으로는 멀쩡하고 `elementFromPoint` 만 그것을 안다
 *   (실측 2026-08-24: 핸들 x=1183, Inspector x=1180 → 그 점의 최상위가 탭 패널이었다).
 *
 * ⇒ 자리를 비워 두면 «덮임» 자체가 사라진다. 닫히면 트랙도 사라져 저쪽과 같아진다.
 */
/* ★ pane 수는 variant 가 정한다 — 리사이즈는 그 트랙을 **변수로** 바꿀 뿐이다 */
.alta-workbench--resizable.alta-workbench--three {
	grid-template-columns: var(--pane-1-w) var(--pane-2-w) minmax(0, 1fr);
}

.alta-workbench--resizable.alta-workbench--four {
	grid-template-columns: var(--pane-1-w) var(--pane-2-w) var(--pane-3-w) minmax(0, 1fr);
}

/* ★★★ Inspector 가 열리면 **그 폭을 트랙으로 예약**한다.
   ⚠ 저쪽은 `fixed` 오버레이로 pane 위를 덮는다. 덮이는 순간 그 아래 버튼이
   **눌리지 않는다** — 눈으로는 멀쩡하고 `AdminBrowserIT` 의 `V5`(그 점의
   elementFromPoint 가 자신)만 그것을 안다. 실측 2026-08-24: Store pane 의 «Add» 가
   `v5=false` 로 잡혔다(목업에서 이미 같은 형태를 겪었다).
   ⚠ `minmax(160px, …)` 이 **핵심**이다 — 상한만 주면 `max-content` 트랙이 줄지 않아
   예약한 420px 를 받지 못한다(목업 실측: 계산은 420 인데 pane 끝이 7px 넘었다). */
.alta-workbench--resizable.alta-workbench--three:has(> .alta-workbench-inspector.is-open) {
	grid-template-columns: minmax(160px, var(--pane-1-w)) minmax(160px, var(--pane-2-w)) var(--pane-inspector-w);
}

.alta-workbench--resizable.alta-workbench--four:has(> .alta-workbench-inspector.is-open) {
	grid-template-columns: minmax(160px, var(--pane-1-w)) minmax(160px, var(--pane-2-w)) minmax(160px, var(--pane-3-w)) var(--pane-inspector-w);
}

/* ★★ 3-pane(Menu Data)의 기본 폭은 **기준선 그대로 `max-content`** 다
   (ALTA-CENTRAL-ADMIN-GRID-RESIZE-01). 목업은 여기서 `1fr`(마지막 pane 양보)을 켰는데,
   그러면 리사이즈 class 를 붙이는 순간 **아무도 끌지 않았는데** Items pane 이 남은 폭을
   채운다(실측 1440: 228px → 530px) — WebCenPos 기본 배치가 바뀐다.
   ⚠ 목업이 1fr 을 둔 이유(«전부 max-content 면 Inspector 가 열릴 때 비례 축소돼 끈 만큼
     따라오지 않는다»)는 JS 상한이 대신 막는다 — 상한이 다른 pane 의 지금 폭과 Inspector 예약을
     남기므로 트랙 합이 워크벤치를 넘지 않고, 그래서 축소가 일어나지 않는다 */
.alta-workbench--resizable.alta-workbench--three { --pane-2-w: max-content; }

/* ★★★ 4-pane(members)의 **기본 폭은 고정값**이다 — `max-content` 가 아니다.
   ⚠ 실측 2026-08-24: `max-content` 로 두자 create-row 의 입력 필드가 pane 을 밀어
   User pane 이 **워크벤치 전체 폭(1369px)** 을 차지했고, 라벨이 Inspector 밑으로
   들어가 «누를 수 없는» 상태가 됐다(`V5` 가 잡았다). 저쪽은 create-row 가 «입력 하나」라
   그 일이 없다 — 우리는 계정 생성에 **필드가 둘**이다.
   ⇒ 기본값을 고정하고, 폭 조절은 **사용자가 끌어서** 한다(그것이 이 모듈의 목적이다). */
.alta-workbench--resizable.alta-workbench--four {
  --pane-1-w: max-content;
  --pane-2-w: max-content;
  --pane-3-w: 1fr;
}

/* ★ members 의 생성 줄은 **세로로 쌓는다** — 필드가 둘이라 저쪽 «한 줄» 이 안 맞는다.
   좁은 pane 에서 `1fr 1fr` 로 나누면 라벨과 입력이 함께 찌그러진다. */
[data-t="members-page"] .alta-workbench-create-row--triple {
  grid-template-columns: minmax(0, 1fr);
}

/* 핸들의 기준 상자 */
.alta-workbench--resizable > .alta-workbench-pane {
	position: relative;
}

/*
 * ★ 핸들 — pane 경계에 놓인 얇은 세로 띠.
 * ⚠ 보이지 않게 두지 않는다. 평상시에도 **경계선이 진해져** 끌 수 있는 자리임을 알린다.
 */
.alta-workbench-pane-resizer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 7px;
	cursor: col-resize;
	background: transparent;
	z-index: 5;
}

.alta-workbench-pane-resizer::after {
	content: "";
	position: absolute;
	top: 0;
	right: 3px;
	bottom: 0;
	width: 1px;
	background: var(--border);
}

.alta-workbench-pane-resizer:hover::after,
.alta-workbench-pane-resizer.is-dragging::after {
	right: 2px;
	width: 3px;
	background: var(--brand);
	border-radius: 2px;
}

/* 끄는 동안 텍스트가 선택되면 드래그가 끊긴다 */
.alta-workbench--resizable.is-resizing,
.alta-workbench--resizable.is-resizing * {
	cursor: col-resize;
	user-select: none;
}

/* ★★ 키보드 포커스 — 핸들은 `tabindex=0` 이고 방향키로 폭을 바꾼다
   (ALTA-CENTRAL-ADMIN-GRID-RESIZE-01). 포커스가 **보여야** 그 자리를 안다.
   ⚠ pane 은 `overflow:hidden` 이라 링의 오른쪽 2px 는 잘린다 — 경계선이 함께
   굵어지므로(아래 `::after`) 위치는 그대로 읽힌다 */
.alta-workbench-pane-resizer:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 0;
}

.alta-workbench-pane-resizer:focus-visible::after {
	right: 2px;
	width: 3px;
	background: var(--brand);
	border-radius: 2px;
}


/* ══════════════════════════════════════════════════════════════
   ★★★ 표 열 폭 리사이징 — **공통 부품** (ALTA-CENTRAL-ADMIN-GRID-RESIZE-01)
   WebCenPos 에 없는 기능이다. pane 리사이징과 **같은 모양**의 핸들을 쓴다:
     1) 표를 div.alta-table-scroll 로 감싼다 — 넓어진 표는 **이 안에서** 가로로 스크롤한다
        (셸이 `overflow-x:hidden` 이라 감싸지 않으면 오른쪽 열에 **도달할 수 없다**)
     2) 표에 alta-table--resizable + data-col-scope, 머리칸마다 data-col
     3) 머리칸 안쪽 끝에 span.alta-col-resizer
   폭을 정하기 전에는 지금 표와 **똑같다**(자동 배치). 한 번 끌면 모든 열의 현재 폭을
   px 로 고정하고 `table-layout: fixed` 로 바꾼다 — 그래야 끈 열만 움직인다.
   ══════════════════════════════════════════════════════════════ */
.alta-table-scroll {
	overflow-x: auto;
	max-width: 100%;
}

/* 핸들의 기준 상자 */
.alta-table--resizable th {
	position: relative;
}

/* ★ 좁힌 열에서 긴 값이 **옆 칸으로 넘치지 않고 줄을 바꾼다** — 잘라 내지 않는다(데이터 손실 0).
   ⚠ `anywhere` 가 아니라 `break-word` 다: `anywhere` 는 **최소 내용 폭**까지 줄여 아무도 끌지 않은
     표의 자동 배치를 바꾼다(좁은 화면에서 «Own/er» 처럼 보통 낱말이 쪼개졌다 — 실측).
     `break-word` 는 **넘칠 때만** 쪼갠다 — 고정 배치로 좁힌 열에서만 일한다 */
.alta-table--resizable th,
.alta-table--resizable td {
	overflow-wrap: break-word;
}

.alta-table--resizable.is-col-sized {
	table-layout: fixed;
}

.alta-col-resizer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 7px;
	cursor: col-resize;
	background: transparent;
	z-index: 1;
}

.alta-col-resizer::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 3px;
	bottom: 6px;
	width: 1px;
	background: var(--border);
}

.alta-col-resizer:hover::after,
.alta-col-resizer.is-dragging::after,
.alta-col-resizer:focus-visible::after {
	right: 2px;
	width: 3px;
	background: var(--brand);
	border-radius: 2px;
}

.alta-col-resizer:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 0;
}

.alta-table--resizable.is-resizing,
.alta-table--resizable.is-resizing * {
	cursor: col-resize;
	user-select: none;
}


/* ══════════════════════════════════════════════════════════════
   ★★ create-row — 저쪽 부품 위의 **우리 구조 차이 두 가지** (2026-08-24)
   ══════════════════════════════════════════════════════════════ */

/* ⚠ ① 저쪽 버튼은 **30px 아이콘**(`fa fa-plus`)이라 트랙이 `30px` 고정이다.
   우리 버튼은 **문구**이므로(아이콘 자산 미반입) 그 폭에서 잘린다 ⇒ 내용만큼 준다. */
.alta-workbench-create-row {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.alta-workbench-create-row--triple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
}

/* ⚠ ② 저쪽은 `placeholder` 만 써서 **input 이 곧 grid 아이템**이다. 우리는 표시 문구가
   catalog 를 지나야 하므로 `<label>` 이 그 자리를 차지한다 ⇒ 라벨과 입력을 세로로 쌓는다.
   (placeholder 는 «보이는 문구» 라 catalog 밖에 둘 수 없다) */
.alta-workbench-create-row label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* ⚠★★ 입력 폭에 **상한**을 준다. pane 트랙이 `max-content` 라 상한이 없으면
   **이 입력이 pane 폭을 정한다** — 실측 2026-08-24: User pane 이 1370px 가 되어
   라벨이 Inspector 밑으로 들어갔다(`V5` 가 잡았다). pane 폭은 **목록 행**이 정해야
   «이름이 잘리지 않는다»(`V7` · 사용자 판정 2026-08-14)가 성립한다. */
.alta-workbench-create-row .alta-input {
  width: 100%;
  min-width: 0;
  max-width: 220px;
}

/* reset & base */
* { box-sizing: border-box; }

html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--font-base);
  color: var(--text);
  background: var(--bg);
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand); }

/* =============================================================================
 * Layout shell — header 가 위, sidebar 가 왼쪽, main 이 나머지
 * =========================================================================== */
.alta-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  grid-template-areas: "header header" "sidebar main";
  min-height: 100vh;
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}

.alta-shell--bare {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl);
}

.alta-header { grid-area: header; }
.alta-sidebar { grid-area: sidebar; }
.alta-main { grid-area: main; overflow-y: auto; min-width: 0; }

/* =============================================================================
 * Header
 * =========================================================================== */
.alta-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--header-h);
  padding: 0 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(16, 24, 39, 0.07);
}

.alta-header__logo {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #b9c6d4;
  border-radius: 9px;
  background: #ffffff;
  text-decoration: none;
}

.alta-header__logo img { display: block; height: 30px; width: 30px; }

.alta-header__brand {
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: var(--font-md);
  font-weight: 750;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.alta-header__shop {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #b9c6d4;
  border-radius: 10px;
}

.alta-header__shop-label {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: linear-gradient(135deg, #123a55, #116e63);
  font-size: var(--font-sm);
  font-weight: 750;
  color: #ffffff;
}

.alta-header__shop-value {
  display: flex;
  align-items: center;
  height: 28px;
  min-width: 120px;
  padding: 0 12px;
  border: 1px solid #d2dbe5;
  border-radius: 7px;
  background: #ffffff;
  font-size: var(--font-sm);
  color: var(--text);
}

.alta-header__spacer { flex: 1 1 auto; }

/* ★ 헤더의 «그룹 → 매장» 선택 (2026-08-16) — 매장 표시 옆에 같은 높이로 선다 */
.alta-header__scope {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: var(--space-md);
}

.alta-header__scope-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* ★ 헤더 드롭다운 — 옆의 버튼·입력과 **같은 높이·같은 테두리**여야 한 줄로 읽힌다.
   기본 select 은 높이도 굵기도 달라서 헤더에서 혼자 튄다 (사용자 지적 2026-08-16) */
.alta-header__scope select {
  height: 28px;
  padding: 0 var(--space-sm);
  border: 1px solid #cfe0f4;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: var(--font-sm);
  cursor: pointer;
}

.alta-header__scope select:hover { border-color: var(--brand); }

.alta-header__scope select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

.alta-header__user {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px;
  border: 1px solid #b9c6d4;
  border-radius: 999px;
  background: #ffffff;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.alta-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2e86d8, #189174);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.alta-header__user-meta { display: flex; align-items: center; gap: var(--space-sm); }

.alta-header__user-id {
  display: flex;
  align-items: center;
  height: 26px;
  color: var(--text);
  font-weight: 750;
}

.alta-header__btn {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #cfe0f4;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.alta-header__btn:hover { border-color: var(--brand); color: var(--brand); }

/* =============================================================================
 * Sidebar
 * =========================================================================== */
.alta-sidebar {
  background: var(--nav-bg);
  color: #d9e1ea;
  border-right: 1px solid var(--nav-line);
  overflow-y: auto;
}

.alta-sidebar__title {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--nav-line);
  color: var(--nav-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.alta-nav { list-style: none; padding: 0; margin: 0; }
.alta-nav__group { border-bottom: 1px solid var(--nav-line); }

.alta-nav__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 38px;
  padding: 0 var(--space-md);
  color: var(--nav-head);
  font-size: var(--font-sm);
  font-weight: 650;
  user-select: none;
}

.alta-nav__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alta-nav__items {
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
  background: var(--nav-sub);
}

.alta-nav__item a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-sm) 0 var(--space-lg);
  border-radius: 6px;
  color: var(--nav-text);
  font-size: var(--font-sm);
  text-decoration: none;
}

.alta-nav__item a:hover { background: var(--nav-hover); color: #ffffff; }

/* ★ 화면이 **없는** 메뉴 — 보이되 누를 수 없다(사용자 판정 2026-08-16).
   ⚠ 숨기지 않는다: 숨기면 «저쪽 제품에는 있다» 는 사실이 화면에서 사라진다 */
.alta-nav__item.is-muted span {
  display: block;
  padding: 6px var(--space-md) 6px 28px;
  color: var(--nav-title);
  font-size: var(--font-sm);
}

.alta-nav__item.is-active a {
  background: var(--brand);
  color: #ffffff;
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* =============================================================================
 * Main / page content
 * =========================================================================== */
.alta-main { padding: var(--space-md); }

.alta-page__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.alta-page__title h1 { margin: 0; font-size: var(--font-lg); font-weight: 600; }

.alta-page__title-kicker {
  display: block;
  margin-top: 2px;
  font-size: var(--font-sm);
  color: var(--text-muted);
}

/* card */
.alta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.alta-card__title {
  margin-bottom: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* =============================================================================
 * Table
 * =========================================================================== */
.alta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.alta-table th, .alta-table td {
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.alta-table thead th {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.alta-table tbody tr:hover { background: var(--bg); }
.alta-table tbody tr.is-selected td { background: var(--brand-soft); }
.alta-table--compact th, .alta-table--compact td { padding: 2px var(--space-sm); }
.alta-table .col-actions { width: 56px; text-align: right; white-space: nowrap; }

/* =============================================================================
 * Buttons
 * =========================================================================== */
.alta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 var(--space-md);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--font-sm);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.alta-btn:hover { border-color: var(--brand); color: var(--brand); }

.alta-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

.alta-btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #ffffff;
}

.alta-btn--danger { color: var(--danger); border-color: var(--danger); }
.alta-btn--sm { height: 22px; padding: 0 var(--space-sm); font-size: 11px; }

/* =============================================================================
 * Form controls
 * =========================================================================== */
.alta-input {
  display: block;
  width: 100%;
  height: 28px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--font-sm);
}

.alta-input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

.alta-form-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-sm);
}

.alta-form-row > label { margin: 0; color: var(--text-muted); font-size: var(--font-sm); }

.alta-form-static {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* =============================================================================
 * Entity workbench — 그룹 / 아이템 / 속성 3분할 (admin_user.jsp 의 뼈대)
 * =========================================================================== */
/* ★ 열 폭은 «내용만큼» 이다 — WebCenPos `page-admin-user.css` 와 같다.
 *   Inspector 가 fixed 로 떠 있으므로 열이 밀리지 않는다. 넘치면 이 그리드 한 곳에서만 스크롤한다. */
.alta-workbench {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  min-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow-x: auto;
  /* ★ 2026-08-24 — 저쪽 base 는 `overflow: hidden` **단축**이라 세로까지 자른다.
     우리 워크벤치의 Inspector 는 `fixed` 라 그리드 밖에 그려지므로, 세로 clip 이
     걸리면 그 안의 문구가 **조상에게** 잘린다(`AdminBrowserIT` `V6` 가 잡았다).
     위 `overflow-x` 는 x 만 덮으므로 y 를 **명시적으로 되돌린다**. */
  overflow-y: visible;
}

/* ★★ 품목·가격 워크벤치 — 목록 셋 ＋ Details. 마지막 열에 하한을 줘야 눌리지 않는다 */
/* ★ 좁아진 pane 에서 버튼 문구가 **두 줄로 접히면** 잘린 것으로 보인다(V4 가 잡았다).
   접지 않고, 넘치면 그 pane 이 가로로 스크롤한다 */
.alta-panel__body .alta-btn { white-space: nowrap; }

/* ★★ 생성·재발급 폼의 버튼도 같은 근거다 — 두 낱말짜리 라벨이 22px 상자 안에서 **줄바꿈**되면
 * 텍스트가 상자를 넘어 **잘린다**. `AdminBrowserIT` V4 가 실측으로 잡았다
 * (상자 68x22 · 텍스트 50x26). 상자를 키우는 대신 **내용에 맞춰 늘어나게** 한다. */
.alta-panel__create .alta-btn { white-space: nowrap; }



/* ★ Basic Data 는 pane 이 **하나 ＋ Inspector** 다 — WebCenPos `--two` 자리 (2026-08-17) */
.alta-workbench--basic {
  /* ⚠ 위와 같은 근거 — Inspector 가 덮을 자리를 트랙으로 둔다 */
  grid-template-columns: max-content 420px;
}

/* ★ 매장 워크벤치는 pane 이 **둘 ＋ Inspector** 다 (2026-08-16) */
.alta-workbench--three {
  grid-template-columns: max-content max-content minmax(0, 1fr);
}

/* ══════════════════════════════════════════════════════════════
   ★★★ Menu Data — WebCenPos 부품 위의 **화면별 조정** (2026-08-24)
   저쪽도 화면 고유 배치는 `page-*.css` 가 소유한다(`page-admin-user.css` 의
   `.au-*`). 부품을 고치지 않고 **그 화면에서만** 열 구성을 바꾼다.
   ══════════════════════════════════════════════════════════════ */

/* ★ 저쪽 create-row 는 `1fr 30px` 2열이다 — placeholder 만 쓰고 라벨이 없기 때문.
   우리는 라벨을 함께 그리므로(표시 문구는 catalog 를 지난다) **3열**이 필요하다. */
[data-t="pricing-page"] .alta-workbench-create-row {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
}

/* ★ 저쪽 행의 세 번째 트랙은 18px **드래그 핸들**이다. 우리는 ▲▼ 두 버튼이고
   그 축을 바꾸는 것은 `js-sort` 의 «JS 없이도 같은 명령» 계약을 뒤집는 별도 단위다
   ⇒ 그 자리만 넓힌다. */
[data-t="pricing-page"] .alta-row { grid-template-columns: 64px minmax(0, 1fr) max-content; }

/* ★ 저쪽에 있고 우리에겐 자리가 없는 섹션 — 보이되 흐리다 */
.alta-panel__label.is-muted { color: var(--text-muted); }

.alta-card.is-muted { color: var(--text-muted); }

.alta-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.alta-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: #fbfcfd;
}

.alta-panel__label {
  display: block;
  margin-bottom: 1px;
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.alta-panel__head h2 { margin: 0; font-size: var(--font-md); font-weight: 650; }

.alta-panel__meta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-sm);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 11px;
  white-space: nowrap;
}

.alta-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-sm); }

/* ★ 생성 줄 — WebCenPos `alta-workbench-create-row` 처럼 **한 줄**이다.
 *   ⚠ 그쪽은 입력이 하나(`New user id`)인데 우리는 비밀번호도 받는다 — 원본 서버가
 *     **빈 비밀번호를 그대로 해시**하기 때문에 따라가지 않았다(`WebPageAction#api_user_add`).
 *     그래서 «한 줄» 은 같고 **입력 칸 수만 다르다**. */
.alta-panel__create {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: #fbfcfd;
}

.alta-panel__create .alta-btn { align-self: flex-end; }

/* ★ 한 줄에 들어가려면 입력이 좁아야 한다 — 열 폭이 `max-content` 라 넓히면
 *   3열 합이 뷰포트를 넘고 그때 «Add» 가 셸에서 잘린다(브라우저 `V5`·`V6` 가 잡았다). */
.alta-panel__create label {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

.alta-panel__create .alta-input { width: 116px; }

/* Menu Data 생성 줄은 WebCenPos처럼 입력이 남는 폭을 모두 차지한다. */


/* ★★ 목록 행 — WebCenPos `alta-workbench-item` 과 같은 «한 줄» 이다.
 *   ⚠ **grid 가 아니라 flex** 다: 셀 수가 행마다 다르고(원인 배지는 조건부, 그룹은 자식 수가
 *     더 붙는다) 고정 열 수로는 **넘치는 셀이 다음 줄로 떨어진다**(실측 2026-08-14 — 그룹·매장
 *     행이 두 줄로 깨졌다). flex 는 셀이 몇 개든 한 줄을 유지한다. */
.alta-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  min-height: 30px;
  margin-bottom: 2px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text);
  font-size: var(--font-sm);
  text-decoration: none;
}

.alta-row:hover { background: #f8fafc; color: var(--text); }

/* ★ 폼 버튼으로 만든 행 — 링크 행과 **같은 모양**이어야 한 목록으로 읽힌다 (2026-08-16) */
.alta-row--button {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.alta-row.is-selected {
  background: #eef8f5;
  border-color: #d7eee7;
  box-shadow: inset 3px 0 0 #14765f;
}

.alta-row__seq {
  flex: 0 0 auto;
  width: 52px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}


/* ★ 정렬 셀은 **행 오른쪽 끝**이다. ⚠ 2026-08-18 — `≡` 를 그라디언트로 그리고 ▲▼ 폼을
 *   숨기려던 시도를 되돌렸다: 그 숨김(`clip`·`position:absolute`)이 CSS 폐쇄가 막는 바로 그
 *   형태이고, 판정 셀을 같은 방법으로 감출 수 있게 된다(사용자 판정 2026-08-18). */

/* ★ `flex: 0 0 auto` — 내용만큼 차지하고 **줄이지 않는다**. 그래서 이름이 잘리지 않는다
 *   (WebCenPos 도 `min-width: max-content` 로 같은 것을 한다). 아래 말줄임 속성은
 *   그래서 발동하지 않지만, 폭이 좁아지는 배포에서 **마지막 방어선**으로 남긴다. */
.alta-row__name {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.alta-row__sub { flex: 0 0 auto; color: var(--text-muted); font-size: 10px; }

/* ★ 상태 점은 **행 오른쪽 끝**이다 — 앞 셀이 몇 개든 남은 공간을 여백이 먹는다 */
.alta-row__dot { margin-left: auto; }

/* ★★ 상태 점 — 행 오른쪽 끝. 녹색 = active · 회색 = inactive (사용자 요구 2026-08-14).
 *   ⚠ 색만으로 상태를 전달한다. 원인(어느 계층이 껐나)은 옆 배지가 **문구로** 남긴다. */
.alta-row__dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #16a34a;
}

.alta-row__dot--off { background: #cbd5e1; }

.alta-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid #d5d1de;
  border-radius: 999px;
  background: var(--surface);
  color: #4f46a5;
  font-size: 10px;
}

/* ★★ 상세(속성) 패널 — **우측에서 밀려 나오는 fixed overlay**.
 *   WebCenPos `page-admin-user.css` 의 Inspector 와 같다: 열려도 목록 열 폭이 그대로다.
 *   ⚠ 열림 상태는 `is-open` 클래스이고 **URL 이 그것을 정한다** — 선택이 있으면 서버가 붙인다. */
.alta-panel--detail {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: 420px;
  z-index: 80;
  border-right: 0;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
  background: #fbfcfd;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.alta-panel--detail.is-open { transform: translateX(0); }

.alta-panel--detail .alta-panel__body { padding: var(--space-md); }

/* Menu Data Property — WebCenPos Inspector의 조밀한 카드형 컨트롤 */
.alta-panel--detail [data-t="pricing-item-form"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding: 16px;
  background: #f8fafc;
}

.alta-panel--detail [data-t="pricing-item-save-form"] {
  display: contents;
}

.alta-panel--detail [data-t="pricing-item-save-form"] .alta-form-row {
  grid-template-columns: 116px minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 10px;
  margin: 0;
}

.alta-panel--detail [data-t="pricing-item-save-form"] .alta-form-row > label {
  color: #526174;
  font-weight: 600;
}

.alta-panel--detail [data-t="pricing-item-save-form"] input[type="text"],
.alta-panel--detail [data-t="pricing-item-save-form"] select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #fff;
  color: #1e293b;
  font: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alta-panel--detail [data-t="pricing-item-save-form"] input[type="text"]:focus,
.alta-panel--detail [data-t="pricing-item-save-form"] select:focus {
  outline: 0;
  border-color: #168772;
  box-shadow: 0 0 0 3px rgba(22, 135, 114, 0.14);
}

.alta-panel--detail [data-t="pricing-item-save-form"] input[type="checkbox"] {
  appearance: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: radial-gradient(circle at 9px 50%, #fff 0 7px, transparent 8px), #cbd5e1;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.alta-panel--detail [data-t="pricing-item-save-form"] input[type="checkbox"]:checked {
  border-color: #168772;
  background: radial-gradient(circle at 26px 50%, #fff 0 7px, transparent 8px), #168772;
}

.alta-panel--detail [data-t="pricing-item-save-form"] > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dbe7e3;
  border-radius: 8px;
  background: #eef8f5;
  color: #38564f;
  font-size: 12px;
}

.alta-panel--detail [data-t="pricing-offer-table"] {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.alta-panel--detail [data-t="pricing-item-save-form"] > .alta-btn {
  grid-column: 1;
  width: 100%;
  min-height: 32px;
  margin: 0;
  border-color: #14765f;
  border-radius: 8px;
  background: linear-gradient(180deg, #1b8b73, #14765f);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(20, 118, 95, 0.22);
}

.alta-panel--detail [data-t="pricing-item-delete-form"] {
  grid-column: 2;
  margin: 0;
}

.alta-panel--detail [data-t="pricing-item-delete-form"] .alta-btn {
  width: 100%;
  min-height: 32px;
  border-color: #fecaca;
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  font-weight: 650;
}

.alta-panel--detail [data-t="pricing-inspector-close"] {
  /* ⚠ 2026-08-18 — **아이콘 전제를 풀었다**. `×` 를 pseudo-element 로 그리고 문구를
     `font-size:0` 으로 지우던 형태는 catalog 를 우회하고 CSS 폐쇄가 막는다(사용자 판정).
     ⇒ 문구가 그대로 보이므로 상자는 **글자에 맞춘다** — 28px 원에 넣으면 잘린다(`V4`). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #526174;
}

/* 카테고리 Property도 Item Property와 같은 컨트롤 언어를 쓴다. */
.alta-panel--detail [data-t="pricing-category-rename-form"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.alta-panel--detail [data-t="pricing-category-rename-form"] label {
  color: #526174;
  font-size: var(--font-sm);
  font-weight: 600;
}

.alta-panel--detail [data-t="pricing-category-rename-form"] input[type="text"] {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1e293b;
  font: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.alta-panel--detail [data-t="pricing-category-rename-form"] input[type="text"]:focus {
  outline: 0;
  border-color: #168772;
  box-shadow: 0 0 0 3px rgba(22, 135, 114, 0.14);
}

.alta-panel--detail [data-t="pricing-category-rename-form"] .alta-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 32px;
  border-color: #14765f;
  border-radius: 8px;
  background: linear-gradient(180deg, #1b8b73, #14765f);
  color: #fff;
  font-weight: 700;
}

.alta-panel--detail [data-t="pricing-category-delete-form"] {
  grid-column: 1 / -1;
}

.alta-panel--detail [data-t="pricing-category-delete-form"] .alta-btn {
  width: 100%;
  min-height: 32px;
  border-color: #fca5a5;
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  font-weight: 700;
}

.alta-detail-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.alta-detail-form + .alta-detail-form {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.alta-detail-form__foot { display: flex; justify-content: flex-end; }
.alta-panel--detail .alta-btn { align-self: flex-start; }

.alta-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* 알림 — 서버가 렌더한 상태 문구. 문서 흐름 안이다 */
.alta-notice {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: var(--space-md);
  padding: 0 var(--space-md);
  border: 1px solid #f3c2be;
  border-radius: var(--radius);
  background: #fdecea;
  color: #b3261e;
  font-size: var(--font-sm);
  font-weight: 600;
}

/* ③ 전환 배너 — 본문 열의 첫 줄. 「지금 남의 자격으로 조작 중」을 모든 화면에서 말한다 */
/* ★ 쓰기 성공 알림 — 전환 배너와 같은 자리·같은 높이, 색만 «성공» 이다 (2026-08-16) */
.alta-saved {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-md);
  border: 1px solid #1e8e3e;
  background: #e8f5e9;
  color: #14612a;
  font-size: var(--font-sm);
  font-weight: 600;
}

.alta-impersonation {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-md);
  border: 1px solid #e0b000;
  background: #fff8e1;
  color: #6b4e00;
  font-size: var(--font-sm);
  font-weight: 600;
}

/* =============================================================================
 * Footer
 * =========================================================================== */
.alta-footer {
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-sm);
  text-align: center;
}

/* =============================================================================
 * Login
 * =========================================================================== */
.alta-login {
  width: 360px;
  max-width: 100%;
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.alta-login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.alta-login__brand img { display: block; height: 40px; width: 40px; }
.alta-login h1 { margin: 0; font-size: var(--font-lg); font-weight: 600; text-align: center; }

.alta-login__sub {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-lg);
  color: var(--text-muted);
  font-size: var(--font-sm);
  text-align: center;
}

.alta-login__field { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--space-sm); }
.alta-login__field span { color: var(--text-muted); font-size: var(--font-sm); font-weight: 650; }
.alta-login__foot { margin-top: var(--space-md); }

/* =============================================================================
 * Responsive — 1180px 이하에서 workbench 를 좁힌다
 * =========================================================================== */
@media (max-width: 1180px) {
  .alta-workbench { grid-template-columns: 220px 180px 180px minmax(280px, 1fr); }
  /* ⚠ pane 수가 화면마다 다르다 — 위 규칙이 뒤에 있어 **전부 4열로 되돌린다**.
     열 수가 다른 워크벤치는 여기서도 자기 열 수를 지켜야 한다 (2026-08-17) */
    .alta-workbench--basic { grid-template-columns: 220px 420px; }
}

/* =============================================================================
 * ★★ 768px 이하 — 생성 줄 · 상세 패널 · 헤더 (ALTA-CENTRAL-R14 UI-390 · 2026-10-27)
 *
 *   ★ 생성 줄(`.alta-panel__create`)을 **세로로 쌓는다** — 한 줄 flex 라 종업원 생성
 *     (라벨 4 · 입력 4 · 버튼)이 863px 로 본문 열을 가로로 밀었다(실측 390: passcode·Save 가 x≈819).
 *     라벨이 입력의 형제라 줄바꿈(wrap)은 짝을 갈라 놓는다 ⇒ 열 방향이다.
 *
 *   ★ 상세 패널 — 위쪽 768 규칙의 Inspector `100vw` 는 명시도가 높은 변형 규칙
 *     (`--two/--three/--four > .alta-workbench-inspector` · 폭 380 · `max-width: 100vw - rail`)에 졌다.
 *     실측 390: `left:0` 만 이겨 **0..318** 에 열리고, 닫히면 `translateX(100%)` 가 318..636 이라
 *     **오른쪽 72px 에 빈 패널이 남아** 목록의 «Add» 를 덮었다. 매장 상세(`.alta-panel--detail`
 *     420px · `right:0`)는 768 규칙이 아예 없어 **왼쪽이 −30px** 로 잘렸다.
 *     ⇒ JS 셸(rail 없음)에서는 둘 다 화면 폭 그대로다. JS 없는 셸은 위
 *       `body:not(.is-shell-ready)` 규칙(명시도가 더 높다)이 rail 만큼 비켜 선다 — 바꾸지 않는다.
 *
 *   ⚠ workbench 의 **가로 스크롤은 바꾸지 않는다** — 위쪽 768 «한 열» 규칙은 뒤의 1180·resizable
 *     규칙에 져서 도달하지 않지만, 그 결과(pane 을 끌어 폭을 바꾸는 4열 + 가로 스크롤)는
 *     grid resize 단위가 375 에서 **계약으로 고정**했다(`AdminResizeBrowserIT` R11). 이 단위가
 *     한 열로 쌓자 R11 이 깨졌다(실측) ⇒ 되돌렸다. 좁은 폭의 상세는 위 전체 폭 패널이 맡는다.
 * =========================================================================== */
@media (max-width: 768px) {
  .alta-panel__create {
    flex-direction: column;
    align-items: stretch;
  }
  .alta-panel__create .alta-input { width: auto; }
  .alta-workbench--two > .alta-workbench-inspector,
  .alta-workbench--three > .alta-workbench-inspector,
  .alta-workbench--four > .alta-workbench-inspector,
  .alta-panel--detail {
    left: 0;
    width: 100vw;
    max-width: 100vw;
  }
  /* ★ 헤더의 «현재 매장» 블록 — 매장 선택 상자가 **같은 값**(선택된 매장)을 보여 줄 때만 접는다.
     아래 768 헤더 규칙이 브랜드·라벨·아이디를 접고도 매장 화면 헤더가 541px 였다(실측 390:
     그룹·매장 선택과 Sign out 이 x=245~529 — 헤더 안 가로 스크롤 뒤에 숨었다). 이 블록이 ~180px 다.
     선택 상자가 없는 화면(super 콘솔 등)에서는 접지 않는다. ⚠ 이름이 길면 그래도 넘칠 수 있고, 그때는
     셸 패리티의 **헤더 안 가로 스크롤**(아래 1180 규칙)이 그대로 받는다 — 선택 폼을 줄여 맞추는 안은
     상자가 사용자 영역 밑으로 겹쳐 버려 되돌렸다(`AdminBrowserIT` G2 실측) */
  .alta-header:has(> .alta-header__scope) .alta-header__shop { display: none; }
  /* ★ 아바타 — **모든 사용자에게 같은 상수 글자**(`SHELL_AVATAR` = «A»)라 정보가 없다. 위 블록을 접고도
     매장 화면·매장 선택 화면 헤더가 25px 넘쳤고(415 · Sign out 이 스크롤 뒤), 그 자리가 이 원 하나(28 ＋ 간격 7)다.
     브랜드 문구를 접는 아래 768 규칙과 같은 근거다 */
  .alta-header__avatar { display: none; }
}

/* =============================================================================
 * ★★ 셸 패리티 — ALTA-CENTRAL-ADMIN-SHELL-PARITY-01 (2026-10-18)
 *   원천: WebCenPos `admin/css/admin.css:258-270`(햄버거) · `:877-1036`(Responsive)
 *         · `workbench.css:5-51`(`alta-workbench-body`).
 *   - 1180px 이하: sidebar rail (72px)
 *   - 768px 이하: sidebar off-canvas + 햄버거 토글 (`admin-shell.js`)
 *
 *   ⚠ 저쪽과 의도적으로 다른 셋:
 *     ① rail 라벨 — 저쪽은 아이콘 + 약어(`data-short` · `content: attr()`)다. 우리는 아이콘
 *        자산(G4)이 없고 `attr()`·`font-size:0` 이 CSS 문법 밖이라 **전체 라벨을 작게 접어** 쓴다
 *        (문구는 catalog 그대로 · 숨기는 문구가 없다).
 *     ② off-canvas 닫힘 — 저쪽은 `translateX(-100%)` 라 **화면 밖 링크가 Tab 으로 잡힌다**.
 *        우리는 닫힘 = `display:none` 이다(키보드 포커스가 보이지 않는 곳으로 가지 않는다).
 *        ★ 그리고 off-canvas 는 **JS 초기화 완료(`body.is-shell-ready`) 아래에만** 있다 — JS 가
 *          없으면 768 이하에서도 72px rail 이 남는다(R1 SHELL-R1-01 · 점진적 향상).
 *     ③ 768px 헤더 — 저쪽처럼 브랜드 문구·매장 라벨·아이디를 접는다. 다만 Sign out 은 아이콘이
 *        없어 **문구를 남기고**, 그래도 넘치면 헤더 안에서 가로 스크롤한다(밖으로 잘리지 않는다).
 * =========================================================================== */
.alta-header__menu-toggle {
  display: none;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 24, 39, 0.08);
}

/* ★ G3 — 워크벤치 화면의 본문 조각이 남은 높이를 채운다.
   저쪽은 워크벤치가 `main` 의 직계 자식이지만 우리는 fragment `div` 한 겹 안에 있다 */
.alta-workbench-page > [data-t="members-page"],
.alta-workbench-page > [data-t="stores-page"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.alta-workbench-page > .alta-impersonation { flex: 0 0 auto; }

/* ★ G3 — 높이를 채우는 화면에서는 워크벤치가 **남은 높이만큼** 줄어든다(저쪽 base 의 `min-height:0`).
   위 `.alta-workbench { min-height: 480px }` 는 **문서 스크롤**을 전제한 값이라, 남으면 짧은
   화면(예: 1366×600)에서 footer 가 워크벤치를 덮고 그 아래가 잘린다(독립 리뷰 M1 · 2026-10-18).
   넘침은 pane 목록·패널 본문의 **안쪽 스크롤**이 소유한다 */
.alta-workbench-page .alta-workbench { min-height: 0; }

@media (max-width: 1180px) {
  .alta-shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  /* ★ 헤더는 넘치면 **자기 안에서** 가로로 스크롤한다 — 셸의 `overflow-x:hidden` 에 잘려
     Sign out 이 닿지 않는 일이 없게(독립 리뷰 M2: G1 이후 769~1030px 태블릿 폭이 실제로 열린다).
     세로는 48px 한 줄이라 자르는 것이 맞다 — 그래야 가로 스크롤바가 생겨도 세로 스크롤바가
     둘째로 겹쳐 생기지 않는다 */
  .alta-header {
    overflow-x: auto;
    overflow-y: hidden;
  }
  /* 저쪽 1180 규칙(`.alta-header__shop select { max-width: 160px }`) — 긴 그룹·매장 이름이
     선택 상자를 viewport 보다 넓게 만들지 않게 한다(820 실측 2026-10-18) */
  .alta-header__scope select { max-width: 160px; }
  .alta-sidebar { overflow-x: hidden; }
  .alta-sidebar__title {
    justify-content: center;
    padding: 0;
    font-size: 9px;
    letter-spacing: 0.5px;
  }
  .alta-nav__group-title {
    justify-content: center;
    min-height: 46px;
    padding: var(--space-xs) 2px;
    text-align: center;
  }
  /* ⚠ 그룹 제목은 9px — 10px 에서 «Management» 가 66px 로 63px 상자를 넘었다
     (`AdminBrowserIT` rail V4 실측 2026-10-18) */
  .alta-nav__text {
    font-size: 9px;
    line-height: 1.15;
    white-space: normal;
  }
  .alta-nav__items { padding: 3px 5px 8px; }
  .alta-nav__item a {
    justify-content: center;
    min-height: 28px;
    padding: 2px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
  }
  .alta-nav__item.is-muted span {
    padding: 4px 2px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* ★★ off-canvas 는 **JS 가 실제로 초기화됐을 때만**이다 (R1 SHELL-R1-01 · 2026-10-18).
     `body.is-shell-ready` 는 `admin-shell.js` 가 listener 를 **다 건 뒤** 붙인다 — script 태그가
     있다는 것만으로는 붙지 않는다. 없으면(JS 꺼짐·초기화 실패) 위 1180 규칙의 **72px rail 이
     그대로** 남아 메뉴 링크가 늘 보이고 눌린다. 닫을 수 없는 배경막·숨은 메뉴가 생기지 않는다 */
  body.is-shell-ready .alta-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "main";
  }
  body.is-shell-ready .alta-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    z-index: 1000;
  }
  body.is-shell-ready.is-sidebar-open .alta-sidebar { display: block; }
  body.is-sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }
  body.is-shell-ready .alta-sidebar__title {
    justify-content: flex-start;
    padding: 0 var(--space-md);
    font-size: 10px;
    letter-spacing: 1px;
  }
  body.is-shell-ready .alta-nav__group-title {
    justify-content: space-between;
    min-height: 38px;
    padding: 0 var(--space-md);
    text-align: left;
  }
  /* ⚠ rail 의 `line-height:1.15` 를 되돌린다 — 남으면 12px 문구가 14px 상자를 넘는다
     (`AdminBrowserIT` off-canvas V4 실측 2026-10-18) */
  body.is-shell-ready .alta-nav__text {
    font-size: var(--font-sm);
    line-height: normal;
    white-space: nowrap;
  }
  body.is-shell-ready .alta-nav__items { padding: 4px 6px 8px; }
  body.is-shell-ready .alta-nav__item a {
    justify-content: flex-start;
    min-height: 32px;
    padding: 0 var(--space-sm) 0 var(--space-lg);
    font-size: var(--font-sm);
    line-height: normal;
    text-align: left;
  }
  body.is-shell-ready .alta-nav__item.is-muted span {
    padding: 6px var(--space-md) 6px 28px;
    font-size: var(--font-sm);
    line-height: normal;
    text-align: left;
  }
  body.is-shell-ready .alta-header__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* ★ JS 가 없으면 rail 이 남으므로, 768 이하의 고정 상세 패널 둘(워크벤치 Inspector 는 100vw ·
     매장 상세는 420px)이 rail 을 덮지 않게 **rail 폭만큼 비켜 선다**(오른쪽 고정은 기존 규칙 그대로).
     JS 가 있으면 rail 이 없다. ⚠ 실측 2026-10-18: 375 의 `/admin/stores` 에서 매장 상세가 rail 을 덮었다 */
  body:not(.is-shell-ready) .alta-workbench-inspector,
  body:not(.is-shell-ready) .alta-panel--detail {
    left: var(--sidebar-w-collapsed);
    width: auto;
  }
  /* ★ 헤더는 **한 줄(48px)** 을 지킨다 — ≤1024 Inspector 가 `top: var(--header-h)` 로 고정돼
     있어서 헤더가 줄바꿈하면 그 아래 줄(매장 선택·Sign out)을 **덮는다**(375 실측 2026-10-18).
     저쪽 768 규칙처럼 라벨·아이디를 접고, 그래도 넘치면 위 1180 규칙대로 헤더 **안에서** 스크롤한다 */
  .alta-header {
    padding: 0 var(--space-sm);
    gap: var(--space-xs);
  }
  .alta-header__brand,
  .alta-header__scope-label,
  .alta-header__user-id { display: none; }
  .alta-header__scope { gap: var(--space-xs); margin-left: 0; }
  .alta-header__scope select { max-width: 112px; }
  .alta-header__shop-value { min-width: 0; white-space: nowrap; }
}


/* ══════════════════════════════════════════════════════════════
   ★★★ 목록 부품 — 검색 · 필터 · 정렬 · 페이지 · 고정 머리칸 (ALTA-CENTRAL-ADMIN-LIST-COMPONENTS-01)
   WebCenPos 목록(`digital_flyer_history.jsp` · `page-flyer-history.css`)과 **같은 구성**이다:
     툴바(`fh-toolbar`)  →  스크롤 상자 안의 표(`fh-table-wrap` · sticky thead)  →  페이지 줄(`fh-pagination`)
   ⚠ 전부 **서버 렌더 + GET 폼**이다 — JS 가 없다. 이 규칙들은 모양만 정한다.
   ⚠ 기존 표 모양을 바꾸지 않는다 — 머리칸 배경은 문서 배경과 같은 `--bg` 이고(고정됐을 때만
     아래 행을 가린다), 정렬 버튼은 머리칸 글자를 **그대로 상속**한다.
   ══════════════════════════════════════════════════════════════ */
.alta-list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
	padding: var(--space-md);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 8px;
	box-shadow: var(--shadow-sm);
}

/* ★ 라벨이 입력을 **감싼다** — `for`/`id` 없이 이름이 붙는다(WebCenPos `<label><span>…</span><input>`) */
.alta-list-toolbar__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 160px;
}

.alta-list-toolbar__field--grow {
	flex: 1 1 auto;
	min-width: 200px;
}

.alta-list-toolbar__field > span {
	color: var(--text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.alta-list-toolbar__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* ★ 머리칸 정렬 버튼 — 버튼 기본 모양을 지우고 **머리칸 글자를 상속**한다.
   ⚠ 브라우저 기본 스타일이 버튼의 `text-transform`·`letter-spacing` 을 되돌리므로
     thead 머리칸(대문자·자간)은 아래에서 **같은 값**을 다시 준다
   ⚠⚠ `inline-flex` 로 두지 않는다 — flex 항목은 **최소 내용 폭 아래로 줄지 않고** `break-word` 는
     그 폭을 바꾸지 않는다. 열을 좁히면 머리칸 글자가 **옆 칸으로 넘쳤다**(GRID-RESIZE `R9` 가 잡았다).
     `inline-block` ＋ `max-width:100%` 는 머리칸 폭 안에서 줄을 바꾼다 — 전과 같다 */
.alta-sort {
	display: inline-block;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.alta-table thead .alta-sort {
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.alta-sort:hover {
	color: var(--brand);
}

.alta-sort:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* ★ 지금 순서의 표시 — `aria-sort` 가 정본이고(서버가 낸다) 화살표는 그것을 **그린다**.
   ⚠ 글리프는 장식이다 — 보조기술은 `aria-sort` 를 읽는다 */
th[aria-sort=ascending] .alta-sort,
th[aria-sort=descending] .alta-sort {
	color: var(--text);
}

th[aria-sort=ascending] .alta-sort::after {
	content: "\25b2";
	margin-left: 4px;
	font-size: 8px;
}

th[aria-sort=descending] .alta-sort::after {
	content: "\25bc";
	margin-left: 4px;
	font-size: 8px;
}

/* ★★ 고정 머리칸 — 스크롤 상자가 **세로로도** 스크롤해야 sticky 가 일한다.
   ⚠ `overflow-x:auto` 인 상자는 세로 스크롤 기준점도 된다 — 높이 상한이 없으면 그 상자는
     세로로 스크롤하지 않으므로 sticky 가 **아무 일도 안 한다**(지금까지의 상태다).
     WebCenPos `.fh-table-wrap { overflow:auto }` + `thead th { position:sticky; top:0 }` 와 같다.
   ⚠ 가로 스크롤(넓힌 표 · GRID-RESIZE R8)은 그대로다 — 같은 상자가 두 축을 다 진다 */
/* ⚠ 상한은 «제목 · 상태 · 잘림 notice · 툴바 · 페이지 줄» 을 뺀 높이다 — 크게 두면 페이지 줄이
     **접힌 아래**로 가서 상자와 문서를 따로 스크롤해야 앞뒤 버튼에 닿는다(시각 리뷰 2026-10-19) */
.alta-table-scroll--list {
	max-height: calc(100vh - 320px);
	overflow-y: auto;
}

/* ⚠ 구분선은 **그림자로** 그린다 — `border-collapse:collapse` 표에서 칸의 테두리는 **표가** 그리므로
     고정된 머리칸을 따라오지 않고 스크롤과 함께 사라진다. 그러면 내려간 행이 선 없이 머리칸에 붙어
     **겹쳐 보인다**(시각 리뷰 2026-10-19). 안쪽 그림자는 칸 자신이 그려 함께 남는다 */
.alta-table-scroll--list .alta-table th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--bg);
	box-shadow: inset 0 -1px 0 var(--border-strong);
}

/* ★ 페이지 줄 — 세 버튼이 **늘 그려지고** 못 가는 쪽은 비활성이다 */
.alta-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--border);
}

.alta-pager .alta-btn:disabled,
.alta-pager .alta-btn:disabled:hover {
	border-color: var(--border-strong);
	background: var(--bg);
	color: var(--text-muted);
	cursor: not-allowed;
}