/* =============================================================================
 * 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, 56px);
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: calc(100vw - var(--sidebar-w-collapsed, 60px));
	border-left: 1px solid var(--border, #dfe5ec);
	box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
	background: var(--surface, #fff);
	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, 56px);
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: calc(100vw - var(--sidebar-w-collapsed, 60px));
	border-left: 1px solid var(--border, #dfe5ec);
	box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
	background: var(--surface, #fff);
	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;
}
.alta-workbench-subsection[hidden],
[hidden] {
	display: none !important;
}
.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;
	grid-template-columns: minmax(0, 1fr) 46px 46px 46px 26px;
	gap: 4px;
	align-items: center;
	min-width: 0;
}
.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;
}
.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);
}