/*
 * Frontend dashboard / forms / lists.
 * Built entirely on the tokens in design-tokens.css. No literals.
 */

body {
	background: var(--dp-bg-page-solid);
	background-image: var(--dp-bg-page);
	color: var(--dp-text-primary);
	font-family: var(--dp-font-sans);
	font-size: var(--dp-text-base);
	line-height: var(--dp-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: var(--dp-tracking-tight);
}

/* ------------------------------------------------------------
 * Shell with sidebar
 * ------------------------------------------------------------ */
.dp-shell-with-sidebar {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--dp-space-6);
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--dp-space-6);
	min-height: calc(100vh - 60px);
}
.dp-main {
	min-width: 0;
}
.dp-main__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-4);
	padding: var(--dp-space-4) var(--dp-space-5);
	margin-bottom: var(--dp-space-6);
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
}
.dp-main__header h1 {
	margin: 0;
	font-size: var(--dp-text-2xl);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: var(--dp-tracking-tight);
}
.dp-main__nav {
	display: flex;
	gap: var(--dp-space-2);
	align-items: center;
	flex-wrap: wrap;
}

/* Sidebar */
.dp-sidebar {
	position: sticky;
	top: var(--dp-space-6);
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-4);
	padding: var(--dp-space-5);
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	max-height: calc(100vh - var(--dp-space-8));
}
.dp-sidebar__brand {
	display: flex;
	gap: var(--dp-space-3);
	align-items: center;
	padding-bottom: var(--dp-space-4);
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-sidebar__logo {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: var(--dp-radius-lg);
	background: var(--dp-color-primary);
	color: var(--dp-text-on-primary);
	font-weight: var(--dp-weight-bold);
	font-size: var(--dp-text-base);
	letter-spacing: 0.02em;
}
.dp-sidebar__clinic { display: flex; flex-direction: column; min-width: 0; }
.dp-sidebar__clinic-label {
	font-size: var(--dp-text-2xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--dp-tracking-wide);
}
.dp-sidebar__clinic-name {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-1);
	flex: 1;
}
.dp-sidebar__item {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3);
	padding: var(--dp-space-2) var(--dp-space-3);
	border-radius: var(--dp-radius-md);
	color: var(--dp-text-secondary);
	text-decoration: none;
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-medium);
	transition: background var(--dp-duration-fast) var(--dp-ease-out),
		color var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-sidebar__item:hover {
	background: var(--dp-color-primary-tint);
	color: var(--dp-color-primary);
}
.dp-sidebar__item.is-active {
	background: var(--dp-color-primary);
	color: var(--dp-text-on-primary);
	box-shadow: var(--dp-shadow-sm);
}
.dp-sidebar__icon {
	width: 18px; height: 18px;
	display: inline-flex;
	align-items: center; justify-content: center;
	flex-shrink: 0;
}
.dp-sidebar__icon svg {
	width: 100%; height: 100%;
}
/* ============================================================
 * Sidebar groups: clinic-scoped items, version dropdown, version-scoped items.
 * The version dropdown visually owns the three items below it (pricelist /
 * events / archive), making the version → contents relationship obvious.
 * ============================================================ */
.dp-sidebar__nav--top { margin-bottom: var(--dp-space-2); }
.dp-sidebar__nav--version {
	padding-left: var(--dp-space-3);
	margin-left: var(--dp-space-1);
	border-left: 2px solid var(--dp-border-subtle);
	margin-top: var(--dp-space-2);
}
.dp-sidebar__nav--bottom {
	margin-top: var(--dp-space-3);
	padding-top: var(--dp-space-3);
	border-top: 1px solid var(--dp-border-subtle);
}

/* Version dropdown */
.dp-sidebar__versions {
	margin: var(--dp-space-3) 0 0;
	padding-top: var(--dp-space-3);
	border-top: 1px solid var(--dp-border-subtle);
}
.dp-version-dropdown { position: relative; }
.dp-version-current {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: var(--dp-space-2) var(--dp-space-3);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	background: var(--dp-neutral-0);
	color: var(--dp-text-primary);
	font: inherit;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--dp-duration-fast) var(--dp-ease-out),
		background var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-version-current:hover { border-color: var(--dp-color-primary); }
.dp-version-current[aria-expanded="true"] {
	border-color: var(--dp-color-primary);
	background: var(--dp-color-primary-tint);
}
.dp-version-current__label {
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dp-text-muted);
	flex-shrink: 0;
}
.dp-version-current__name {
	flex: 1;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.dp-version-current__caret {
	color: var(--dp-text-muted);
	font-size: 12px;
	transition: transform var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-version-current[aria-expanded="true"] .dp-version-current__caret {
	transform: rotate(180deg);
}

.dp-version-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0; right: 0;
	background: var(--dp-neutral-0);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	box-shadow: var(--dp-shadow-lg);
	z-index: 50;
	padding: var(--dp-space-2);
	max-height: 380px;
	display: flex;
	flex-direction: column;
}
.dp-version-menu[hidden] { display: none; }
.dp-version-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.dp-versions__empty {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
	padding: var(--dp-space-2);
}
.dp-version-row {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 6px 8px;
	border-radius: var(--dp-radius-md);
	cursor: pointer;
	transition: background var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-version-row:hover { background: var(--dp-color-primary-tint); }
.dp-version-row.is-active {
	background: var(--dp-color-primary);
	color: var(--dp-text-on-primary);
}
.dp-version-row.is-active .dp-version-row__date,
.dp-version-row.is-active .dp-version-row__action {
	color: var(--dp-text-on-primary);
	opacity: 0.85;
}
.dp-version-row__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.dp-version-row__name {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-version-row__name-input {
	width: 100%;
	font-size: var(--dp-text-sm);
	padding: 2px 4px;
	border: 1px solid var(--dp-border-focus);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-neutral-0);
	color: var(--dp-text-primary);
}
.dp-version-row__date {
	font-size: 10px;
	color: var(--dp-text-muted);
	letter-spacing: 0.04em;
}
.dp-version-row__actions {
	display: none;
	gap: 2px;
	flex-shrink: 0;
}
.dp-version-row:hover .dp-version-row__actions,
.dp-version-row.is-active .dp-version-row__actions { display: inline-flex; }
.dp-version-row__action {
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border: 0; background: transparent;
	color: var(--dp-text-muted);
	cursor: pointer;
	border-radius: var(--dp-radius-sm);
	padding: 0;
	font-size: 12px;
}
.dp-version-row__action:hover { background: rgba(0, 0, 0, 0.08); color: var(--dp-text-primary); }
.dp-version-row.is-active .dp-version-row__action:hover { background: rgba(255, 255, 255, 0.18); }

.dp-version-menu__actions {
	margin-top: var(--dp-space-2);
	padding-top: var(--dp-space-2);
	border-top: 1px solid var(--dp-border-subtle);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dp-version-menu__action {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	border-radius: var(--dp-radius-sm);
	color: var(--dp-text-primary);
	font: inherit;
	font-size: var(--dp-text-sm);
	cursor: pointer;
	text-align: left;
}
.dp-version-menu__action:hover { background: var(--dp-color-primary-tint); }
.dp-version-menu__action:disabled { opacity: 0.5; cursor: wait; }

/* ============================================================
 * Event toggle button in the program table.
 * Acts like a switch; clicking opens the dp-event-select modal.
 * ============================================================ */
.dp-event-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 4px 6px;
	cursor: pointer;
	border-radius: var(--dp-radius-sm);
}
.dp-event-toggle-btn:hover { background: var(--dp-color-primary-tint); }
.dp-event-toggle-btn__track {
	display: inline-block;
	width: 34px; height: 18px;
	background: var(--dp-border-default);
	border-radius: 999px;
	position: relative;
	transition: background var(--dp-duration-fast) var(--dp-ease-out);
	flex-shrink: 0;
}
.dp-event-toggle-btn__thumb {
	position: absolute;
	top: 2px; left: 2px;
	width: 14px; height: 14px;
	background: white;
	border-radius: 50%;
	transition: transform var(--dp-duration-fast) var(--dp-ease-out);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.dp-event-toggle-btn.is-on .dp-event-toggle-btn__track { background: var(--dp-color-primary); }
.dp-event-toggle-btn.is-on .dp-event-toggle-btn__thumb { transform: translateX(16px); }
.dp-event-toggle-btn__count {
	min-width: 16px;
	text-align: center;
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
	font-weight: var(--dp-weight-medium);
}
.dp-event-toggle-btn.is-on .dp-event-toggle-btn__count { color: var(--dp-color-primary); }

/* ============================================================
 * Event selection modal (multi-select).
 * ============================================================ */
.dp-event-select-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 300px;
	overflow-y: auto;
}
.dp-event-select-row {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 8px 10px;
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-md);
	cursor: pointer;
	transition: background var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-event-select-row:hover { background: var(--dp-color-primary-tint); }
.dp-event-select-row input[type="checkbox"] { margin: 0; }
.dp-event-select-row__name { flex: 1; font-size: var(--dp-text-sm); }
.dp-event-select-add {
	display: flex;
	gap: 6px;
	margin-top: var(--dp-space-2);
	padding-top: var(--dp-space-2);
	border-top: 1px solid var(--dp-border-subtle);
}
.dp-event-select-add input {
	flex: 1;
	padding: 6px 10px;
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-sm);
	font-size: var(--dp-text-sm);
}

/* Event edit modal form */
.dp-event-edit-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: var(--dp-space-3);
}
.dp-event-edit-label {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-primary);
}
.dp-event-edit-label small {
	font-weight: var(--dp-weight-regular);
	color: var(--dp-text-muted);
	margin-left: 4px;
}
.dp-event-edit-hint {
	color: var(--dp-text-muted);
	font-size: var(--dp-text-xs);
}

.dp-sidebar__footer {
	padding-top: var(--dp-space-3);
	border-top: 1px solid var(--dp-border-subtle);
}
.dp-sidebar__logout {
	color: var(--dp-text-muted);
	text-decoration: none;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
}
.dp-sidebar__logout:hover { color: var(--dp-text-danger); }

/* Narrow viewport — stack sidebar above main */
@media (max-width: 880px) {
	.dp-shell-with-sidebar {
		grid-template-columns: 1fr;
		gap: var(--dp-space-4);
	}
	.dp-sidebar {
		position: static;
		max-height: none;
	}
	.dp-sidebar__nav {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Legacy single-shell layout (no sidebar) — kept for any remaining users */
.dp-shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--dp-space-8) var(--dp-space-6);
}
.dp-shell__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-4);
	padding: var(--dp-space-4) var(--dp-space-5);
	margin-bottom: var(--dp-space-6);
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
}
.dp-shell__header h1 {
	margin: 0;
	font-size: var(--dp-text-2xl);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: var(--dp-tracking-tight);
}
.dp-shell__subtitle {
	margin: var(--dp-space-1) 0 0;
	font-size: var(--dp-text-sm);
	color: var(--dp-text-secondary);
}
.dp-shell__subtitle a { color: var(--dp-text-link); text-decoration: none; }
.dp-shell__subtitle a:hover { text-decoration: underline; }
.dp-shell__nav {
	display: flex;
	gap: var(--dp-space-2);
	align-items: center;
}

/* ------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------ */
.dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dp-space-2);
	height: var(--dp-control-h-md);
	padding: 0 var(--dp-control-px-md);
	border-radius: var(--dp-radius-md);
	font-family: inherit;
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-medium);
	line-height: 1;
	letter-spacing: var(--dp-tracking-tight);
	border: 1px solid var(--dp-border-default);
	background: var(--dp-surface-raised);
	color: var(--dp-text-primary);
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--dp-shadow-xs);
	transition: background var(--dp-duration-fast) var(--dp-ease-out),
		border-color var(--dp-duration-fast) var(--dp-ease-out),
		box-shadow var(--dp-duration-fast) var(--dp-ease-out),
		transform var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-btn:hover {
	background: var(--dp-surface-hover);
	border-color: var(--dp-border-strong);
	box-shadow: var(--dp-shadow-sm);
}
.dp-btn:active { transform: translateY(1px); }
.dp-btn:focus-visible {
	outline: none;
	box-shadow: var(--dp-ring-focus);
	border-color: var(--dp-border-focus);
}
.dp-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.dp-btn--primary {
	background: var(--dp-color-primary);
	border-color: var(--dp-color-primary);
	color: var(--dp-text-on-primary);
}
.dp-btn--primary:hover {
	background: var(--dp-color-primary-hover);
	border-color: var(--dp-color-primary-hover);
	color: var(--dp-text-on-primary);
}

.dp-btn--ghost {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.dp-btn--ghost:hover {
	background: var(--dp-color-primary-tint);
	color: var(--dp-color-primary);
	border-color: transparent;
}
.dp-btn--ghost.is-active {
	background: var(--dp-color-primary);
	color: var(--dp-text-on-primary);
}

/* ------------------------------------------------------------
 * Toolbar + List
 * ------------------------------------------------------------ */
.dp-toolbar {
	display: flex;
	gap: var(--dp-space-3);
	padding: var(--dp-space-2);
	margin-bottom: var(--dp-space-4);
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
}
.dp-input {
	flex: 1;
	min-width: 0;
	height: var(--dp-control-h-md);
	padding: 0 var(--dp-control-px-md);
	border-radius: var(--dp-radius-lg);
	border: 1px solid transparent;
	background: transparent;
	font-family: inherit;
	font-size: var(--dp-text-md);
	color: var(--dp-text-primary);
}
.dp-input:focus {
	outline: none;
	background: var(--dp-neutral-0);
	border-color: var(--dp-border-focus);
	box-shadow: var(--dp-ring-focus);
}

/* Bulk action bar — appears between toolbar and table */
.dp-bulk-bar {
	display: flex;
	gap: var(--dp-space-3);
	align-items: center;
	padding: var(--dp-space-2) var(--dp-space-3);
	margin-bottom: var(--dp-space-3);
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	flex-wrap: wrap;
	/* 카테고리 picker 패널이 아래쪽 테이블 위로 올라오도록 stacking context를 끌어올림.
	   backdrop-filter 가 이미 stacking context 를 생성하므로, 같은 형제(.dp-list,
	   역시 stacking context)보다 위에 그려지도록 z-index 를 명시한다. */
	position: relative;
	z-index: 20;
}
.dp-bulk-bar__select {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	font-size: var(--dp-text-sm);
	color: var(--dp-text-secondary);
	cursor: pointer;
}
.dp-bulk-bar__select input[type="checkbox"] {
	width: 18px; height: 18px;
}
.dp-selection-count {
	font-weight: var(--dp-weight-medium);
	min-width: 6em;
}
.dp-bulk-bar__action {
	flex: 0 0 auto;
	min-width: 180px;
	width: auto;
}
/* Category picker (replaces the legacy free-text input for 카테고리 일괄변경) */
.dp-bulk-bar__cat-picker {
	position: relative;
	flex: 1 1 280px;
	min-width: 240px;
}
.dp-bulk-cat-toggle {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-2);
	text-align: left;
	cursor: pointer;
	background: var(--dp-surface-card, var(--dp-surface-raised));
}
.dp-bulk-cat-toggle__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dp-bulk-cat-toggle__caret {
	flex: 0 0 auto;
	opacity: 0.6;
}
.dp-bulk-cat-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-lg, 10px);
	box-shadow: var(--dp-shadow-glass);
	z-index: 50;
}
.dp-bulk-cat-list {
	list-style: none;
	margin: 0;
	padding: var(--dp-space-2);
	overflow-y: auto;
	flex: 1 1 auto;
}
.dp-bulk-cat-list li {
	padding: 4px 6px;
	border-radius: 6px;
}
.dp-bulk-cat-list li:hover {
	background: var(--dp-surface-card, rgba(0,0,0,0.03));
}
.dp-bulk-cat-list label {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	cursor: pointer;
	font-size: var(--dp-text-sm);
}
.dp-bulk-cat-list input[type="checkbox"] {
	width: 16px; height: 16px;
	flex: 0 0 auto;
}
.dp-bulk-cat-list__empty {
	padding: var(--dp-space-3);
	color: var(--dp-text-secondary);
	font-size: var(--dp-text-sm);
}
.dp-bulk-cat-list__new-flag {
	margin-left: 4px;
	font-size: 11px;
	color: var(--dp-text-secondary);
}
.dp-bulk-cat-new {
	display: flex;
	gap: var(--dp-space-2);
	padding: var(--dp-space-2);
	border-top: 1px solid var(--dp-border-subtle);
	background: var(--dp-surface-raised);
}
.dp-bulk-cat-new input {
	flex: 1 1 auto;
	min-width: 0;
}

/* Screen-reader-only label */
.dp-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.dp-list {
	width: 100%;
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.dp-list thead th {
	background: transparent;
	color: var(--dp-text-secondary);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--dp-tracking-wide);
	padding: var(--dp-space-3) var(--dp-space-4);
	text-align: left;
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-list tbody td {
	padding: var(--dp-space-4);
	font-size: var(--dp-text-base);
	border-bottom: 1px solid var(--dp-border-subtle);
	vertical-align: top;
}
.dp-list tbody tr:last-child td { border-bottom: 0; }
.dp-list tbody tr:hover { background: var(--dp-color-primary-tint); }
.dp-list tbody tr.is-archived { opacity: 0.55; font-style: italic; }
.dp-list tbody tr.is-archived:hover { opacity: 0.8; }

.dp-list .dp-col-drag {
	width: 28px;
	text-align: center;
	vertical-align: middle !important;
	padding-left: var(--dp-space-1);
	padding-right: 0;
}
.dp-row-drag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dp-text-muted);
	cursor: grab;
	font-size: var(--dp-text-sm);
	line-height: 1;
	user-select: none;
	border-radius: var(--dp-radius-sm);
}
.dp-row-drag:hover { color: var(--dp-text-primary); background: var(--dp-color-primary-tint); }
.dp-list tbody tr.is-dragging { opacity: 0.45; }
.dp-list tbody tr.is-dragging .dp-row-drag { cursor: grabbing; }
.dp-list tbody tr.is-drop-before > td { box-shadow: 0  2px 0 0 var(--dp-color-primary) inset; }
.dp-list tbody tr.is-drop-after  > td { box-shadow: 0 -2px 0 0 var(--dp-color-primary) inset; }

.dp-list .dp-col-check {
	width: 36px;
	text-align: center;
	vertical-align: middle !important;
}
.dp-list .dp-col-check input[type="checkbox"] {
	width: 18px; height: 18px;
	cursor: pointer;
	accent-color: var(--dp-color-primary);
}
.dp-list .dp-col-event {
	width: 70px;
	text-align: center;
	vertical-align: middle !important;
}
.dp-list .dp-col-event input[type="checkbox"] {
	width: 18px; height: 18px;
	accent-color: var(--dp-color-primary);
	cursor: pointer;
}
.dp-list .dp-col-event input[type="checkbox"]:disabled {
	cursor: wait;
	opacity: 0.5;
}

/* `.dp-chip` 기본 규칙이 이 파일의 뒤쪽에 정의되어 있어 같은 specificity 의 modifier
   가 덮여 효력이 없었음. modifier 의 specificity 를 한 단계 올려 기본 색을 이김. */
.dp-chip.dp-chip--archived {
	background: var(--dp-neutral-200);
	color: var(--dp-text-secondary);
}

/* 특집 카테고리 — 붉은 계열로 일반 카테고리와 시각적 구분 */
.dp-chip.dp-chip--event {
	background: #fde8ec;
	color: #b02a37;
	border: 1px solid #f5b5be;
}
.dp-cat-chip--event {
	background: #fde8ec;
	color: #b02a37;
}

/* 카테고리 모달 내부 탭 (선택 모달 + 순서 모달 공용) */
.dp-cat-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 16px 0;
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-cat-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-top-left-radius: var(--dp-radius-md);
	border-top-right-radius: var(--dp-radius-md);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-secondary);
	cursor: pointer;
	margin-bottom: -1px;
}
.dp-cat-tab:hover { color: var(--dp-text-primary); }
.dp-cat-tab.is-active {
	background: var(--dp-surface-raised);
	border-color: var(--dp-border-subtle);
	color: var(--dp-text-primary);
}
.dp-cat-tab--event.is-active { color: #b02a37; }
.dp-cat-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	background: var(--dp-neutral-200);
	color: var(--dp-text-secondary);
	border-radius: 999px;
	font-size: 11px;
	font-weight: var(--dp-weight-semibold);
}
.dp-cat-tab--event .dp-cat-tab__count {
	background: #fde8ec;
	color: #b02a37;
}

/* 순서 모달의 특집 행 — 좌측 빨간 사이드 바로 한눈에 구분 */
.dp-cat-row.is-event {
	box-shadow: inset 3px 0 0 #b02a37;
}

/* 선택 모달 행도 동일한 시각 단서 */
.dp-event-select-row.is-event .dp-event-select-row__name {
	color: #b02a37;
	font-weight: var(--dp-weight-semibold);
}

/* 선택 모달 행에 붙는 액션 버튼 (✎ 이름변경 / 🗑 삭제) — 평소엔 흐리게,
   행 hover 또는 버튼 자체 hover 시 또렷하게. */
.dp-event-select-row {
	position: relative;
}
.dp-event-select-row__actions {
	display: inline-flex;
	gap: 4px;
	margin-left: auto;
	padding-left: 8px;
	opacity: 0;
	transition: opacity 120ms ease;
}
.dp-event-select-row:hover .dp-event-select-row__actions,
.dp-event-select-row:focus-within .dp-event-select-row__actions {
	opacity: 1;
}
.dp-cat-row-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--dp-radius-md);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	color: var(--dp-text-secondary);
}
.dp-cat-row-btn:hover {
	background: var(--dp-neutral-100);
	border-color: var(--dp-border-subtle);
	color: var(--dp-text-primary);
}
.dp-cat-row-btn--delete:hover {
	background: #fde8ec;
	border-color: #f5b5be;
	color: #b02a37;
}

/* 인라인 이름 변경 폼 — ✎ 클릭 시 row 안에 펼쳐지는 입력 + 저장/취소 */
.dp-cat-row-rename-form {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	margin-left: 4px;
}
.dp-cat-row-rename-input {
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	font-size: var(--dp-text-sm);
}
.dp-cat-row-rename-form .dp-btn {
	padding: 4px 10px;
	font-size: var(--dp-text-xs);
}

.dp-list a {
	color: var(--dp-text-link);
	text-decoration: none;
	font-weight: var(--dp-weight-medium);
}
.dp-list a:hover { text-decoration: underline; }
.dp-list__actions { white-space: nowrap; }
.dp-list__actions a, .dp-list__actions button { margin-right: var(--dp-space-2); }

.dp-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	color: var(--dp-text-link);
	text-decoration: none;
}
.dp-link:hover { text-decoration: underline; }
.dp-link--danger { color: var(--dp-text-danger); }
.dp-inline-form { display: inline; }

.dp-chip {
	display: inline-flex;
	padding: var(--dp-space-1) var(--dp-space-2);
	margin: 0 var(--dp-space-1) var(--dp-space-1) 0;
	background: var(--dp-color-primary-soft);
	color: var(--dp-color-primary-active);
	border-radius: var(--dp-radius-full);
	font-size: var(--dp-text-2xs);
	font-weight: var(--dp-weight-medium);
}
.dp-opt-line {
	font-size: var(--dp-text-sm);
	color: var(--dp-text-secondary);
}
.dp-opt-line s { color: var(--dp-text-muted); margin-right: var(--dp-space-1); }
.dp-opt-line strong { color: var(--dp-text-primary); font-weight: var(--dp-weight-semibold); }
.dp-opt-line--discount-only strong { color: var(--dp-text-danger); }

.dp-empty {
	padding: var(--dp-space-12) var(--dp-space-6);
	text-align: center;
	background: var(--dp-surface-raised);
	border: 1px dashed var(--dp-border-default);
	border-radius: var(--dp-radius-xl);
}
.dp-empty p { color: var(--dp-text-secondary); margin-bottom: var(--dp-space-4); }
.dp-empty .dp-btn { margin: 0 var(--dp-space-2); }

/* ------------------------------------------------------------
 * Form
 * ------------------------------------------------------------ */
.dp-form {
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	padding: var(--dp-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-5);
}
.dp-form fieldset {
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-4) var(--dp-space-5) var(--dp-space-5);
	background: rgba(255, 255, 255, 0.42);
	margin: 0;
}
.dp-form legend {
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--dp-tracking-wide);
	color: var(--dp-text-secondary);
	padding: 0 var(--dp-space-2);
}
.dp-form label {
	display: block;
	margin-bottom: var(--dp-space-3);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-secondary);
}
.dp-form input[type="text"],
.dp-form input[type="url"],
.dp-form input[type="password"],
.dp-form input[type="email"],
.dp-form input[type="number"],
.dp-form select,
.dp-form textarea {
	display: block;
	width: 100%;
	margin-top: var(--dp-space-1);
	padding: 0 var(--dp-control-px-md);
	height: var(--dp-control-h-md);
	font-family: inherit;
	font-size: var(--dp-text-md);
	color: var(--dp-text-primary);
	background: var(--dp-neutral-0);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	box-sizing: border-box;
}
/* Multi-line selects (e.g. event multi-select) get a tall scrollable box. */
.dp-form select[multiple] {
	height: auto;
	min-height: calc(var(--dp-control-h-md) * 2.5);
	padding: var(--dp-space-2) var(--dp-space-2);
	line-height: var(--dp-leading-snug);
}
.dp-form select[multiple] option {
	padding: 4px 8px;
}
/* `small` hint under a field shouldn't sit flush against the next field. */
.dp-form label small {
	display: block;
	margin-top: var(--dp-space-1);
	font-size: var(--dp-text-xs);
	line-height: var(--dp-leading-snug);
}
.dp-form textarea {
	height: auto;
	padding: var(--dp-space-2) var(--dp-control-px-md);
	min-height: calc(var(--dp-control-h-md) * 1.5);
	line-height: var(--dp-leading-snug);
	resize: vertical;
}
.dp-form input[type="text"]:focus,
.dp-form textarea:focus {
	outline: none;
	border-color: var(--dp-border-focus);
	box-shadow: var(--dp-ring-focus);
}
.dp-form input[type="file"] {
	font-family: inherit;
	font-size: var(--dp-text-sm);
	padding: var(--dp-space-2);
	background: var(--dp-neutral-0);
	border: 1px dashed var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	width: 100%;
}
.dp-form .dp-checkbox {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	margin-top: var(--dp-space-2);
}
.dp-form .dp-checkbox input { width: auto; height: auto; }
.dp-form .dp-opt-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--dp-space-2);
	margin-bottom: var(--dp-space-2);
}
.dp-form .dp-req { color: var(--dp-text-danger); margin-left: var(--dp-space-1); }

/* ============================================================
 * Equipment page — category-grouped checkbox grid.
 * ============================================================ */
.dp-equipment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--dp-space-4);
}
.dp-equipment-group {
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-4) var(--dp-space-4) var(--dp-space-2);
}
.dp-equipment-group__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 var(--dp-space-2);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-secondary);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.dp-equipment-group__count {
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted);
	text-transform: none;
	letter-spacing: 0;
}
.dp-equipment-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dp-equipment-row {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-space-2);
	padding: 8px 10px;
	border-radius: var(--dp-radius-md);
	background: var(--dp-color-primary-tint);
	position: relative;
}
.dp-equipment-row__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.dp-equipment-row__name {
	font-size: var(--dp-text-sm);
	color: var(--dp-text-primary);
}
.dp-equipment-row__meta {
	font-size: 11px;
	color: var(--dp-text-muted);
	letter-spacing: 0.02em;
}
.dp-equipment-row__desc {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-snug);
}
.dp-equipment-row__remove {
	position: absolute;
	top: 4px; right: 4px;
	width: 22px; height: 22px;
	border: 0;
	background: transparent;
	color: var(--dp-text-muted);
	border-radius: 50%;
	cursor: pointer;
	font-size: var(--dp-text-lg);
	line-height: 1;
	opacity: 0;
	transition: opacity var(--dp-duration-fast) var(--dp-ease-out),
		background var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-equipment-row:hover .dp-equipment-row__remove { opacity: 1; }
.dp-equipment-row__remove:hover {
	background: var(--dp-text-danger, #d22);
	color: #fff;
}
.dp-equipment-empty {
	margin-top: var(--dp-space-4);
	text-align: center;
}

/* ============================================================
 * Equipment picker modal — search + category chips + thumbnail grid.
 * ============================================================ */
.dp-eq-pick-counter {
	font-size: var(--dp-text-sm);
	color: var(--dp-text-muted);
	margin-left: var(--dp-space-3);
}
.dp-eq-pick-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-2);
	padding: var(--dp-space-3) var(--dp-space-4);
	border-bottom: 1px solid var(--dp-border-subtle);
	background: var(--dp-surface-elevated);
}
.dp-eq-pick-search {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	font-size: var(--dp-text-sm);
	background: var(--dp-neutral-0);
}
.dp-eq-pick-search:focus {
	outline: 2px solid var(--dp-color-primary);
	outline-offset: -1px;
	border-color: var(--dp-color-primary);
}
.dp-eq-pick-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dp-eq-pick-cat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border: 1px solid var(--dp-border-default);
	background: var(--dp-neutral-0);
	border-radius: 999px;
	font-size: var(--dp-text-xs);
	color: var(--dp-text-secondary);
	cursor: pointer;
	transition: background var(--dp-duration-fast) var(--dp-ease-out),
		color var(--dp-duration-fast) var(--dp-ease-out),
		border-color var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-eq-pick-cat span {
	font-size: 10px;
	color: var(--dp-text-muted);
}
.dp-eq-pick-cat:hover { background: var(--dp-color-primary-tint); }
.dp-eq-pick-cat.is-on {
	background: var(--dp-color-primary);
	border-color: var(--dp-color-primary);
	color: #fff;
}
.dp-eq-pick-cat.is-on span { color: rgba(255,255,255,.85); }
.dp-eq-pick-body { padding: var(--dp-space-3) var(--dp-space-4); }
.dp-eq-pick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--dp-space-2);
}
.dp-eq-pick-card {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-space-2);
	padding: 10px;
	background: var(--dp-neutral-0);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-md);
	cursor: pointer;
	transition: background var(--dp-duration-fast) var(--dp-ease-out),
		border-color var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-eq-pick-card:hover {
	background: var(--dp-color-primary-tint);
	border-color: var(--dp-color-primary);
}
.dp-eq-pick-card.is-on {
	background: var(--dp-color-primary-tint);
	border-color: var(--dp-color-primary);
}
.dp-eq-pick-card input[type="checkbox"] {
	margin: 4px 0 0;
	flex-shrink: 0;
}
.dp-eq-pick-card__thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--dp-radius-sm);
	background: var(--dp-neutral-100);
	border: 1px solid var(--dp-border-subtle);
	flex-shrink: 0;
}
.dp-eq-pick-card__thumb--empty,
.dp-equipment-row__thumb--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dp-text-muted);
	font-size: var(--dp-text-sm);
}
.dp-eq-pick-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.dp-eq-pick-card__name {
	font-size: var(--dp-text-sm);
	color: var(--dp-text-primary);
}
.dp-eq-pick-card__name small {
	font-weight: var(--dp-weight-regular);
	color: var(--dp-text-muted);
	margin-left: 4px;
}
.dp-eq-pick-card__meta {
	font-size: 11px;
	color: var(--dp-text-muted);
}
.dp-eq-pick-card__desc {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-secondary);
	line-height: var(--dp-leading-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
 * Console (/console/*) — SaaS admin layout. Standalone from the
 * clinic dashboard sidebar; uses its own dark sidebar.
 * ============================================================ */
body.dp-page-console { background: var(--dp-neutral-100); }
.dp-console-shell {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--dp-space-5);
	min-height: 100vh;
	padding: var(--dp-space-5);
	box-sizing: border-box;
}
.dp-console-sidebar {
	background: #1f2330;
	color: #e8eaf2;
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-3);
	position: sticky;
	top: var(--dp-space-5);
	height: fit-content;
}
.dp-console-sidebar__brand { padding-bottom: var(--dp-space-3); border-bottom: 1px solid rgba(255,255,255,.1); }
.dp-console-sidebar__logo {
	color: #fff; text-decoration: none;
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-bold);
	letter-spacing: 2px;
}
.dp-console-sidebar__subtitle {
	display: block; margin-top: 2px;
	font-size: var(--dp-text-xs);
	color: rgba(255,255,255,.55);
	letter-spacing: 1px;
}
.dp-console-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.dp-console-sidebar__item {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 10px;
	border-radius: var(--dp-radius-md);
	color: rgba(255,255,255,.82);
	text-decoration: none;
	font-size: var(--dp-text-sm);
}
.dp-console-sidebar__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.dp-console-sidebar__item.is-active { background: var(--dp-color-primary); color: #fff; }
.dp-console-sidebar__item.is-disabled { opacity: .45; cursor: not-allowed; }
.dp-console-sidebar__note {
	font-size: 10px;
	background: rgba(255,255,255,.12);
	padding: 1px 6px;
	border-radius: 999px;
	letter-spacing: 0.04em;
}
.dp-console-sidebar__footer { padding-top: var(--dp-space-3); border-top: 1px solid rgba(255,255,255,.1); }
.dp-console-sidebar__back { color: rgba(255,255,255,.6); text-decoration: none; font-size: var(--dp-text-xs); }
.dp-console-sidebar__back:hover { color: #fff; }

.dp-console-main {
	background: var(--dp-neutral-0);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-5) var(--dp-space-6);
	box-shadow: var(--dp-shadow-sm);
	min-width: 0;
}
.dp-console-main__header {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--dp-space-3);
	margin-bottom: var(--dp-space-5);
	padding-bottom: var(--dp-space-3);
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-console-main__header h1 { margin: 0 0 4px; font-size: var(--dp-text-xl); }
.dp-console-main__header p { margin: 0; color: var(--dp-text-muted); font-size: var(--dp-text-sm); }

/* Console landing — feature cards */
.dp-console-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--dp-space-4);
}
.dp-console-card {
	display: block;
	padding: var(--dp-space-4);
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-lg);
	color: var(--dp-text-primary);
	text-decoration: none;
	transition: border-color var(--dp-duration-fast) var(--dp-ease-out), transform var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-console-card:hover { border-color: var(--dp-color-primary); transform: translateY(-1px); }
.dp-console-card.is-disabled { opacity: .55; cursor: default; }
.dp-console-card.is-disabled:hover { transform: none; border-color: var(--dp-border-subtle); }
.dp-console-card h2 { margin: 0 0 6px; font-size: var(--dp-text-base); }
.dp-console-card p { margin: 0; font-size: var(--dp-text-xs); color: var(--dp-text-muted); }
.dp-console-card__tag {
	display: inline-block;
	margin-left: 6px;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--dp-color-primary-tint);
	color: var(--dp-color-primary);
	vertical-align: middle;
}

/* Console table — inline-edit equipment catalog */
.dp-console-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--dp-text-sm);
}
.dp-console-table thead th {
	text-align: left;
	padding: 8px 6px;
	border-bottom: 2px solid var(--dp-border-default);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-secondary);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.dp-console-table tbody td {
	padding: 6px;
	border-bottom: 1px solid var(--dp-border-subtle);
	vertical-align: top;
}
.dp-console-table input[type="text"],
.dp-console-table input[type="number"],
.dp-console-table select {
	width: 100%;
	padding: 4px 8px;
	height: 32px;
	font-size: var(--dp-text-sm);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-neutral-0);
	box-sizing: border-box;
}
.dp-console-table__sort { max-width: 70px; }
.dp-console-table__actions { white-space: nowrap; }
.dp-console-table__actions .dp-btn { padding: 4px 10px; font-size: var(--dp-text-xs); }
.dp-console-table__thumb {
	width: 60px;
	max-width: 60px;
	text-align: center;
}
.dp-console-table__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--dp-radius-sm);
	background: var(--dp-neutral-100);
	border: 1px solid var(--dp-border-subtle);
}
.dp-console-table__noimg {
	display: inline-block;
	width: 56px; height: 56px; line-height: 56px;
	color: var(--dp-text-muted);
	background: var(--dp-neutral-100);
	border-radius: var(--dp-radius-sm);
	border: 1px dashed var(--dp-border-default);
}

/* 장비 레퍼런스 — 치료명 그룹이 colgroup 고정폭의 단일 표를 공유해 열 너비가 균일하다. */
.dp-intel-table { table-layout: fixed; }
.dp-intel-table col.dp-intel-col-proc      { width: 27%; }
.dp-intel-table col.dp-intel-col-norm      { width: 19%; }
.dp-intel-table col.dp-intel-col-region    { width: 10%; }
.dp-intel-table col.dp-intel-col-price     { width: 24%; }
.dp-intel-table col.dp-intel-col-pricenorm { width: 20%; }
.dp-intel-table tbody td {
	word-break: break-word;
	overflow-wrap: anywhere;
}
/* 치료명 그룹 헤더 행 — 표 안에 끼워 넣은 구분선. */
.dp-intel-table tr.dp-intel-group th {
	text-align: left;
	padding: 12px 8px 7px;
	border-bottom: 1px solid var(--dp-border-default);
	background: var(--dp-color-primary-tint);
	color: var(--dp-color-primary);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	text-transform: none;
	letter-spacing: 0;
}
.dp-intel-table tr.dp-intel-group th span {
	font-weight: 400;
	color: var(--dp-text-secondary);
}
/* 시술이 비어 치료명으로 대체된 칸 + "치료명" 배지. */
.dp-intel-proc--fallback { color: var(--dp-text-secondary); }
.dp-intel-fallback {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 9px;
	background: var(--dp-neutral-100);
	color: var(--dp-text-secondary);
	font-size: var(--dp-text-xs);
	white-space: nowrap;
	vertical-align: middle;
}
/* 레퍼런스 툴바(검색·정렬) — .dp-form 바깥이라 글로벌 폼 컨트롤 스타일이 닿지
 * 않는다. flex 레이아웃을 깨지 않도록 width/display 없이 토큰만 동일하게 맞춘다. */
#dp-intel-toolbar input[type="search"],
#dp-intel-toolbar select {
	height: var(--dp-control-h-md);
	padding: 0 var(--dp-control-px-md);
	font-family: inherit;
	font-size: var(--dp-text-md);
	color: var(--dp-text-primary);
	background: var(--dp-neutral-0);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	box-sizing: border-box;
}
#dp-intel-toolbar input[type="search"]:focus,
#dp-intel-toolbar select:focus {
	outline: none;
	border-color: var(--dp-border-focus);
	box-shadow: var(--dp-ring-focus);
}

/* Equipment row thumbnail on the clinic /equipment page */
.dp-equipment-row__thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--dp-radius-sm);
	background: var(--dp-neutral-100);
	border: 1px solid var(--dp-border-subtle);
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.dp-console-shell { grid-template-columns: 1fr; }
	.dp-console-sidebar { position: static; }
}

/* ============================================================
 * Subscription / plan badges + sidebar plan block.
 * ============================================================ */
.dp-plan-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-medium);
	letter-spacing: 0.04em;
}
.dp-plan-badge.is-pro     { background: #e6f3ec; color: #1f7a45; }
.dp-plan-badge.is-trial   { background: #fff4d6; color: #8a5b00; }
.dp-plan-badge.is-expired { background: #fde2e2; color: #9c2222; }

.dp-sidebar__plan {
	margin: var(--dp-space-3) 0 var(--dp-space-2);
	padding: 8px 10px;
	text-align: center;
	font-size: var(--dp-text-xs);
}
.dp-sidebar__plan a { color: inherit; text-decoration: underline; }

/* ============================================================
 * Marquee banner — top thin ticker
 * ============================================================ */
.dp-marquee {
	overflow: hidden;
	background: var(--dp-color-primary);
	color: #fff;
	font-size: var(--dp-text-sm);
}
.dp-marquee__track {
	display: inline-block;
	white-space: nowrap;
	padding: 8px 0;
	animation: dp-marquee-scroll 30s linear infinite;
}
.dp-marquee a { color: #fff; text-decoration: underline; margin: 0 8px; }
.dp-marquee span { margin: 0 8px; }
@keyframes dp-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.dp-marquee__item { display: inline-block; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.3); }
.dp-marquee__item:last-child { border-right: 0; }

/* Main banner — under the marquee, full-width strip. */
.dp-main-banner {
	background: var(--dp-color-primary-tint);
	color: var(--dp-color-primary);
	padding: 14px 24px;
	text-align: center;
	font-weight: var(--dp-weight-medium);
	font-size: var(--dp-text-sm);
}
.dp-main-banner a { color: inherit; text-decoration: underline; }

/* Subscription notice (expired / trial-warning). */
.dp-sub-notice {
	padding: 12px 24px;
	font-size: var(--dp-text-sm);
	text-align: center;
}
.dp-sub-notice--warning { background: #fff4d6; color: #8a5b00; }
.dp-sub-notice--expired { background: #fde2e2; color: #9c2222; }
.dp-sub-notice a { color: inherit; }

/* ============================================================
 * Marketing pages (subscribe / checkout / blog)
 * ============================================================ */
.dp-marketing {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--dp-space-7) var(--dp-space-5);
}
.dp-marketing__hero h1 { font-size: var(--dp-text-2xl); margin: 0 0 8px; }
.dp-marketing__sub { color: var(--dp-text-muted); margin: 0 0 var(--dp-space-5); }

.dp-pricing-card {
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	padding: var(--dp-space-6);
	box-shadow: var(--dp-shadow-md);
}
.dp-pricing-card__name { margin: 0 0 8px; font-size: var(--dp-text-base); color: var(--dp-text-muted); text-transform: uppercase; letter-spacing: 2px; }
.dp-pricing-card__price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; }
.dp-pricing-card__price strong { font-size: 2.2rem; }
.dp-pricing-card__price span { color: var(--dp-text-muted); }
.dp-pricing-card__trial { color: var(--dp-color-primary); margin: 0 0 var(--dp-space-3); font-size: var(--dp-text-sm); }
.dp-pricing-card__features { list-style: '✓  '; padding-left: 20px; margin: 0 0 var(--dp-space-4); font-size: var(--dp-text-sm); }
.dp-pricing-card__features li { margin-bottom: 4px; color: var(--dp-text-secondary); }
.dp-pricing-card__cta { width: 100%; text-align: center; margin-top: 8px; }
.dp-pricing-card__status { padding: 12px; background: var(--dp-color-primary-tint); color: var(--dp-color-primary); border-radius: var(--dp-radius-md); text-align: center; font-size: var(--dp-text-sm); }

/* Blog list */
.dp-blog-list { max-width: 920px; margin: 0 auto; padding: var(--dp-space-7) var(--dp-space-5); }
.dp-blog-list__header { margin-bottom: var(--dp-space-5); }
.dp-blog-list__header h1 { margin: 0 0 4px; }
.dp-blog-list__header p { color: var(--dp-text-muted); margin: 0; }
.dp-blog-list__items {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--dp-space-4);
}
.dp-blog-card { background: var(--dp-surface-raised); border: 1px solid var(--dp-border-subtle); border-radius: var(--dp-radius-lg); overflow: hidden; }
.dp-blog-card__thumb img { width: 100%; height: 160px; object-fit: cover; display: block; }
.dp-blog-card__body { padding: var(--dp-space-3) var(--dp-space-4) var(--dp-space-4); }
.dp-blog-card__title { margin: 0 0 6px; font-size: var(--dp-text-base); }
.dp-blog-card__title a { color: var(--dp-text-primary); text-decoration: none; }
.dp-blog-card__title a:hover { color: var(--dp-color-primary); }
.dp-blog-card__excerpt { margin: 0 0 8px; font-size: var(--dp-text-sm); color: var(--dp-text-secondary); line-height: var(--dp-leading-snug); }
.dp-blog-card__date { margin: 0; font-size: var(--dp-text-xs); color: var(--dp-text-muted); }
.dp-pagination { margin-top: var(--dp-space-5); text-align: center; }
.dp-pagination .page-numbers { display: inline-block; padding: 4px 10px; margin: 0 2px; border: 1px solid var(--dp-border-subtle); border-radius: var(--dp-radius-sm); color: var(--dp-text-primary); text-decoration: none; }
.dp-pagination .page-numbers.current { background: var(--dp-color-primary); color: #fff; border-color: var(--dp-color-primary); }

/* Program-table "시술" cell — multi-line text in a compact width. */
.dp-list .dp-col-procedure {
	max-width: 280px;
	font-size: var(--dp-text-xs);
	line-height: var(--dp-leading-snug);
	color: var(--dp-text-secondary);
	white-space: normal;
	word-break: keep-all;
}

/* Mixed-control "field" (chips + button) inside the program edit form. */
.dp-form .dp-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-2);
	margin-bottom: var(--dp-space-3);
}
.dp-form .dp-form-field .dp-form-label {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-secondary);
}
.dp-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: var(--dp-control-h-md);
	align-items: center;
	padding: 4px 8px;
	border: 1px dashed var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	background: rgba(255, 255, 255, 0.6);
}
.dp-cat-chips__empty {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
}
.dp-cat-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--dp-color-primary-tint);
	color: var(--dp-color-primary);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-medium);
	border-radius: 999px;
	letter-spacing: 0.02em;
}
.dp-form .dp-detail {
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-3) var(--dp-space-5);
	background: rgba(255, 255, 255, 0.42);
}
.dp-form .dp-detail > summary {
	cursor: pointer;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-secondary);
	padding: var(--dp-space-2) 0;
}
.dp-form .dp-detail[open] > summary { margin-bottom: var(--dp-space-3); }
/* Scrollable body of the edit form — keeps the fieldset spacing the .dp-form
 * flex gap used to give them now that they sit inside this wrapper. */
.dp-form__main {
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-5);
}
.dp-form__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--dp-space-2);
}

/* ------------------------------------------------------------
 * Notice + Toast
 * ------------------------------------------------------------ */
.dp-notice {
	margin-bottom: var(--dp-space-4);
	padding: var(--dp-space-3) var(--dp-space-5);
	border-radius: var(--dp-radius-lg);
	background: var(--dp-surface-raised);
	border-left: 4px solid var(--dp-color-primary);
	font-size: var(--dp-text-sm);
}
.dp-notice--success { border-left-color: var(--dp-success-500); }
.dp-notice--warning { border-left-color: var(--dp-warning-500); }
.dp-notice--error   { border-left-color: var(--dp-danger-500); }

.dp-toast {
	position: fixed;
	right: var(--dp-space-5);
	bottom: var(--dp-space-5);
	max-width: 360px;
	padding: var(--dp-space-3) var(--dp-space-4);
	background: var(--dp-surface-elevated);
	border: 1px solid var(--dp-border-subtle);
	border-left: 4px solid var(--dp-color-primary);
	border-radius: var(--dp-radius-lg);
	box-shadow: var(--dp-shadow-lg);
	font-size: var(--dp-text-sm);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dp-duration-base) var(--dp-ease-out),
		transform var(--dp-duration-base) var(--dp-ease-out);
	z-index: var(--dp-z-toast);
}
.dp-toast.is-visible { opacity: 1; transform: translateY(0); }
.dp-toast--success { border-left-color: var(--dp-success-500); }
.dp-toast--warning { border-left-color: var(--dp-warning-500); }
.dp-toast--error   { border-left-color: var(--dp-danger-500); }

/* ------------------------------------------------------------
 * Import page
 * ------------------------------------------------------------ */
.dp-import-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--dp-space-5);
	margin-bottom: var(--dp-space-4);
}
.dp-card {
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	padding: var(--dp-space-6);
	display: flex; flex-direction: column;
	gap: var(--dp-space-3);
}
.dp-card__step {
	font-size: var(--dp-text-2xs);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: var(--dp-tracking-wide);
	color: var(--dp-color-primary);
	text-transform: uppercase;
}
.dp-card h2 {
	margin: 0;
	font-size: var(--dp-text-xl);
	font-weight: var(--dp-weight-semibold);
}
.dp-card p {
	margin: 0;
	font-size: var(--dp-text-sm);
	line-height: var(--dp-leading-relaxed);
	color: var(--dp-text-secondary);
}
.dp-card input[type="file"] {
	margin-bottom: var(--dp-space-3);
}
.dp-help {
	background: var(--dp-color-primary-tint);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	padding: var(--dp-space-5);
}
.dp-help h3 {
	margin: 0 0 var(--dp-space-3);
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-semibold);
}
.dp-help ul {
	margin: 0;
	padding-left: var(--dp-space-5);
	font-size: var(--dp-text-sm);
	line-height: var(--dp-leading-relaxed);
	color: var(--dp-text-secondary);
}
.dp-help code {
	font-family: var(--dp-font-mono);
	background: var(--dp-neutral-0);
	padding: 1px 6px;
	border-radius: var(--dp-radius-sm);
	font-size: var(--dp-text-xs);
}
.dp-error-list {
	max-height: 240px;
	overflow-y: auto;
	font-size: var(--dp-text-xs);
}

/* ------------------------------------------------------------
 * Preview / print modal (dashboard)
 * ------------------------------------------------------------ */
body.dp-modal-open { overflow: hidden; }

.dp-modal-overlay {
	position: fixed; inset: 0;
	z-index: var(--dp-z-modal-backdrop);
	background: var(--dp-surface-overlay);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dp-space-5);
}
.dp-modal-overlay[hidden] { display: none; }

.dp-modal {
	background: var(--dp-surface-elevated);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-xl), var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-lg));
	-webkit-backdrop-filter: blur(var(--dp-blur-lg));
	width: min(1280px, 96vw);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	z-index: var(--dp-z-modal);
}
.dp-modal__header {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: var(--dp-space-3) var(--dp-space-4);
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-modal__header strong {
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-semibold);
	margin-right: var(--dp-space-3);
}
.dp-modal__variants {
	display: inline-flex;
	gap: var(--dp-space-1);
}
.dp-modal__close {
	background: none;
	border: 0;
	font-size: var(--dp-text-2xl);
	cursor: pointer;
	color: var(--dp-text-muted);
	line-height: 1;
	padding: 0 var(--dp-space-2);
	border-radius: var(--dp-radius-md);
	transition: background var(--dp-duration-fast) var(--dp-ease-out),
		color var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-modal__close:hover {
	background: var(--dp-color-primary-tint);
	color: var(--dp-text-primary);
}
.dp-modal__body {
	flex: 1;
	min-height: 0;
	padding: var(--dp-space-3);
	background: var(--dp-neutral-100);
	border-bottom-left-radius: var(--dp-radius-2xl);
	border-bottom-right-radius: var(--dp-radius-2xl);
}
.dp-modal__body iframe {
	width: 100%;
	height: 100%;
	min-height: 60vh;
	border: 0;
	background: var(--dp-neutral-0);
	border-radius: var(--dp-radius-md);
	box-shadow: var(--dp-shadow-md);
}

/* Narrower modal for the category list */
.dp-modal--narrow {
	width: min(720px, 92vw);
}

/* Fullscreen modal — used by the pricelist preview/print iframe so it
 * fills the viewport like a dedicated page, matching the event preview. */
.dp-modal-overlay--fullscreen {
	padding: 0;
}
.dp-modal--fullscreen {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
	border: 0;
	box-shadow: none;
}
.dp-modal--fullscreen .dp-modal__body {
	padding: 0;
	border-radius: 0;
	background: var(--dp-neutral-100);
}
.dp-modal--fullscreen .dp-modal__body iframe {
	min-height: 0;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
}

/* 미리보기 모달 — 좌측 스타일 패널 + 우측 iframe split 레이아웃. */
.dp-modal__body--split {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 0;
}
.dp-modal__body--split iframe {
	flex: 1 1 auto;
	min-width: 0;
}
.dp-style-panel {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 16px;
	background: var(--dp-surface-raised);
	border-right: 1px solid var(--dp-border-subtle);
	overflow-y: auto;
	font-size: var(--dp-text-sm);
}
.dp-style-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 4px;
}
.dp-style-panel__head strong {
	font-size: var(--dp-text-md);
	font-weight: var(--dp-weight-semibold);
}
.dp-style-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 4px 8px;
	align-items: center;
}
.dp-style-row__label {
	grid-column: 1 / 2;
	color: var(--dp-text-secondary);
}
.dp-style-row__val {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	font-variant-numeric: tabular-nums;
	color: var(--dp-text-primary);
	font-weight: var(--dp-weight-medium);
	text-align: right;
	min-width: 50px;
}
.dp-style-row input[type="range"] {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	width: 100%;
	accent-color: var(--dp-color-primary);
}
/* 글꼴·글자크기 섹션 소제목 */
.dp-style-subhead {
	margin: 6px 0 -4px;
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-muted);
}
/* 글꼴 선택 <select> — .dp-style-row 그리드의 2행 전체 폭. */
.dp-style-row__select {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	width: 100%;
	font: inherit;
	padding: 5px 6px;
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-md);
	background: var(--dp-surface-raised);
	color: var(--dp-text-primary);
}
.dp-style-panel__hint {
	margin-top: auto;
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
	line-height: 1.4;
}

/* 속지 배경 업로드 영역 — 스타일 패널 하단. */
.dp-style-bg {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
	margin-top: 6px;
	border-top: 1px dashed var(--dp-border-subtle);
}
.dp-style-bg__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.dp-style-bg__preview {
	width: 100%;
	aspect-ratio: 210 / 297;
	background: #fff;
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.dp-style-bg__preview[data-empty]::before {
	content: attr(data-empty);
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
}
.dp-style-bg__preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.dp-style-bg__pick {
	text-align: center;
	cursor: pointer;
}
.dp-style-bg__hint {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
}

/* Edit form, when rendered inside the modal iframe (?modal=1):
 * the page has no sidebar, so .dp-main--modal gets full width and
 * comfortable padding to avoid the form sticking to the iframe edge.
 *
 * Layout is a fixed-height flex column: header (top) + scrollable body
 * (.dp-form__main) + pinned footer (.dp-form__footer). The 저장/취소 buttons
 * stay anchored to the modal bottom no matter how far the form scrolls. */
.dp-edit-modal-shell {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--dp-neutral-100);
}
.dp-main.dp-main--modal {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: var(--dp-space-5) var(--dp-space-5) 0;
}
.dp-edit-modal-shell .dp-form {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.dp-edit-modal-shell .dp-form__main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
.dp-edit-modal-shell .dp-form__footer {
	flex: 0 0 auto;
	margin: 0 calc(-1 * var(--dp-space-6)) calc(-1 * var(--dp-space-6));
	padding: var(--dp-space-4) var(--dp-space-6);
	background: var(--dp-surface-raised);
	border-top: 1px solid var(--dp-border-subtle);
}
.dp-modal__body--scroll {
	overflow-y: auto;
	max-height: calc(92vh - 80px);
	padding: var(--dp-space-4) var(--dp-space-5);
}

.dp-cat-hint {
	margin: 0 0 var(--dp-space-3);
	font-size: var(--dp-text-sm);
	color: var(--dp-text-muted);
}
.dp-cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-1);
}
.dp-cat-row {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3);
	padding: var(--dp-space-3) var(--dp-space-3);
	background: var(--dp-neutral-0);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-lg);
	cursor: grab;
	transition: background var(--dp-duration-fast) var(--dp-ease-out),
		border-color var(--dp-duration-fast) var(--dp-ease-out),
		transform var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-cat-row:hover {
	background: var(--dp-color-primary-tint);
	border-color: var(--dp-border-default);
}
.dp-cat-row.is-dragging {
	opacity: 0.4;
	cursor: grabbing;
}
.dp-cat-row.is-drop-before {
	border-top-color: var(--dp-color-primary);
	box-shadow: 0 -2px 0 var(--dp-color-primary);
}
.dp-cat-row.is-drop-after {
	border-bottom-color: var(--dp-color-primary);
	box-shadow: 0 2px 0 var(--dp-color-primary);
}
.dp-cat-handle {
	display: inline-flex;
	width: 24px;
	font-size: var(--dp-text-lg);
	color: var(--dp-text-muted);
	user-select: none;
	cursor: grab;
	font-weight: 700;
}
.dp-cat-name {
	flex: 1;
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-primary);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dp-cat-pages {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	flex-shrink: 0;
}
.dp-cat-pages__label {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
}
.dp-cat-page-input {
	width: 60px;
	height: var(--dp-control-h-sm);
	padding: 0 var(--dp-space-2);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-neutral-0);
	font-size: var(--dp-text-sm);
	font-family: inherit;
	text-align: center;
}
.dp-cat-page-input:focus {
	outline: none;
	border-color: var(--dp-border-focus);
	box-shadow: var(--dp-ring-focus);
}
.dp-cat-pages__range {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
	min-width: 64px;
	text-align: right;
}

/* Narrow viewport — stack header items */
@media (max-width: 720px) {
	.dp-modal__header { flex-wrap: wrap; }
	.dp-modal__body iframe { min-height: 70vh; }
}

/* ------------------------------------------------------------
 * Preview chrome (standalone /price-list/preview/ page)
 * ------------------------------------------------------------ */
.dp-preview-body { margin: 0; }
.dp-preview-chrome {
	position: sticky;
	top: 0;
	z-index: var(--dp-z-sticky);
	margin: var(--dp-space-4) var(--dp-space-4) 0;
	padding: var(--dp-space-2) var(--dp-space-3);
	display: flex; gap: var(--dp-space-2); align-items: center;
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-glass);
	backdrop-filter: blur(var(--dp-blur-md));
	-webkit-backdrop-filter: blur(var(--dp-blur-md));
}
/* 모달 iframe(in_modal=1) 안에서는 hidden 속성으로 자체 툴바를 숨긴다 —
   .dp-preview-chrome 의 display:flex 가 UA 의 [hidden] 규칙을 덮어쓰므로
   같은 명시도 이상의 오버라이드를 명시해야 한다. */
.dp-preview-chrome[hidden] { display: none; }
/* 미리보기에서 가격표 안의 프로그램(치료군)은 클릭하면 수정 모달이 열린다.
   body.dp-programs-clickable 는 미리보기 페이지 JS 가 부여 — 인쇄 출력엔 영향 없음. */
body.dp-programs-clickable .dp-treatment-group { cursor: pointer; }
body.dp-programs-clickable .dp-treatment-group:hover {
	outline: 2px solid var(--dp-color-primary);
	outline-offset: -2px;
	border-radius: 4px;
}
/* 카테고리 제목도 클릭하면 이름 수정 모달이 열린다. */
body.dp-programs-clickable .dp-category-title { cursor: pointer; }
body.dp-programs-clickable .dp-category-title:hover {
	outline: 2px solid var(--dp-color-primary);
	outline-offset: 4px;
	border-radius: 4px;
}
/* 프로그램 편집 모달은 미리보기 모달 위에서도 열릴 수 있어 항상 최상단. */
#dp-program-edit-modal.dp-modal-overlay { z-index: 100070; }
.dp-preview-chrome > strong {
	font-size: var(--dp-text-base);
	font-weight: var(--dp-weight-semibold);
	padding: 0 var(--dp-space-2);
}
.dp-preview-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 0 var(--dp-space-2);
	font-size: var(--dp-text-sm);
	color: var(--dp-text-secondary);
	cursor: pointer;
	user-select: none;
}
.dp-preview-toggle input[type="checkbox"] {
	width: 16px; height: 16px;
	cursor: pointer;
}
.dp-preview-stage {
	padding: var(--dp-space-6);
	display: flex;
	justify-content: center;
}
.dp-preview-paper {
	width: 297mm;
	min-height: 210mm;
	background: var(--dp-neutral-0);
	padding: 10mm 12mm;
	border-radius: var(--dp-radius-md);
	box-shadow: var(--dp-shadow-lg);
}

/* ------------------------------------------------------------
 * 우측 페이지 패널 (미리보기 + 카테고리 순서/페이지 편집을 한 화면에)
 * ------------------------------------------------------------ */
.dp-preview-layout {
	display: flex;
	align-items: flex-start;
	gap: 0;
}
.dp-preview-layout > .dp-preview-stage {
	flex: 1 1 auto;
	min-width: 0;        /* flex 자식 overflow 차단 */
}
.dp-pages-panel {
	flex: 0 0 280px;
	width: 280px;
	/* preview-chrome 가 sticky 로 상단을 차지하므로 그 아래에서 sticky 시작. */
	max-height: calc(100vh - 96px);
	position: sticky;
	top: 80px;
	display: flex;
	flex-direction: column;
	margin: var(--dp-space-4) var(--dp-space-4) var(--dp-space-4) 0;
	background: var(--dp-surface-raised);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-xl);
	box-shadow: var(--dp-shadow-glass);
	overflow: hidden;
}
.dp-pages-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--dp-space-3) var(--dp-space-4);
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-pages-panel__total {
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
}
.dp-pages-panel__tabs {
	display: flex;
	gap: 4px;
	padding: 6px 10px 0;
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-pages-panel__tab {
	flex: 1 1 auto;
	padding: 6px 8px;
	border: 0;
	background: transparent;
	color: var(--dp-text-secondary);
	font-size: var(--dp-text-sm);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.dp-pages-panel__tab.is-active { color: var(--dp-text-primary); border-bottom-color: var(--dp-color-primary); }
.dp-pages-panel__tab--event.is-active { color: #b02a37; border-bottom-color: #b02a37; }
.dp-pages-panel__count {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: var(--dp-weight-medium);
	background: var(--dp-neutral-200);
	border-radius: var(--dp-radius-full);
	margin-left: 4px;
}
.dp-pages-panel__tab--event .dp-pages-panel__count { background: #fde8ec; color: #b02a37; }
.dp-pages-panel__hint {
	padding: var(--dp-space-2) var(--dp-space-4);
	margin: 0;
	font-size: var(--dp-text-xs);
	color: var(--dp-text-muted);
}
.dp-pages-panel__list {
	list-style: none;
	margin: 0;
	padding: 0 var(--dp-space-2) var(--dp-space-2);
	overflow-y: auto;
	flex: 1 1 auto;
}
.dp-pages-panel__row {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 6px 8px;
	border-radius: 8px;
	margin-bottom: 2px;
	cursor: grab;
	font-size: var(--dp-text-sm);
}
.dp-pages-panel__row:hover { background: var(--dp-surface-card, rgba(0,0,0,0.03)); }
.dp-pages-panel__row.is-current {
	background: var(--dp-color-primary-soft);
	color: var(--dp-color-primary-active);
}
.dp-pages-panel__row.is-event.is-current {
	background: #fde8ec;
	color: #b02a37;
}
.dp-pages-panel__row.is-dragging { opacity: 0.4; }
.dp-pages-panel__row.is-drop-before { box-shadow: 0  2px 0 0 var(--dp-color-primary) inset; }
.dp-pages-panel__row.is-drop-after  { box-shadow: 0 -2px 0 0 var(--dp-color-primary) inset; }
.dp-pages-panel__handle { color: var(--dp-text-muted); cursor: grab; user-select: none; }
.dp-pages-panel__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-pages-panel__page-input {
	width: 44px;
	padding: 2px 4px;
	font-size: var(--dp-text-xs);
	text-align: center;
	border: 1px solid var(--dp-border-subtle);
	border-radius: 4px;
	background: var(--dp-surface-card, var(--dp-neutral-0));
}
.dp-pages-panel__page-range {
	font-size: 11px;
	color: var(--dp-text-muted);
	min-width: 36px;
	text-align: right;
}
.dp-pages-panel__save {
	margin: 0;
	padding: 6px var(--dp-space-4);
	font-size: 11px;
	color: var(--dp-text-muted);
	border-top: 1px solid var(--dp-border-subtle);
	background: var(--dp-surface-raised);
	min-height: 22px;
}

/* 미리보기 화면이 좁아지면 패널을 숨김 (스크롤 영역 확보) */
@media (max-width: 980px) {
	.dp-pages-panel { display: none; }
}

/* ============================================================
 * 콘솔 — 장비 매칭 관리 (frontend-console-equipment-matching)
 * ============================================================ */
.dp-mr-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.dp-mr-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 8px 14px;
	background: var(--dp-surface-2, #f5f6f8);
	border: 1px solid var(--dp-border, #e0e0e0);
	border-radius: 8px;
	font-size: var(--dp-text-sm, 13px);
	color: var(--dp-text-muted, #666);
}
.dp-mr-stat strong { font-size: 16px; color: var(--dp-text, #1a1a1a); }

.dp-mr-list .dp-mr-proc {
	white-space: pre-wrap;
	max-width: 320px;
	color: var(--dp-text-muted, #666);
	font-size: var(--dp-text-sm, 13px);
}
.dp-mr-actions { white-space: nowrap; }
.dp-mr-action-row { display: flex; gap: 6px; flex-wrap: wrap; }

.dp-btn--sm {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.3;
}

/* 상태 배지 — 내부 코드별 색. 표시 텍스트는 PHP 라벨이 들어온다. */
.dp-mr-badge--no-match           { background: #fff4d6; color: #8a5d00; }
.dp-mr-badge--no-input           { background: #fff4d6; color: #8a5d00; }
.dp-mr-badge--error              { background: #fde2e1; color: #9a2620; }
.dp-mr-badge--no-match-confirmed { background: #e9ecef; color: #555; }

/* 장비 수동 지정 패널 */
.dp-mr-picker-row > td { background: var(--dp-surface-2, #f5f6f8); padding: 14px; }
.dp-mr-picker { max-width: 560px; }
.dp-mr-picker-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.dp-mr-picker-count { font-size: var(--dp-text-sm, 13px); color: var(--dp-text-muted, #666); }
.dp-mr-picker-search { width: 100%; margin-bottom: 8px; }
.dp-mr-picker-list {
	max-height: 240px;
	overflow-y: auto;
	border: 1px solid var(--dp-border, #e0e0e0);
	border-radius: 8px;
	background: #fff;
	padding: 6px;
}
.dp-mr-picker-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--dp-text-sm, 13px);
}
.dp-mr-picker-item:hover { background: var(--dp-surface-2, #f5f6f8); }
.dp-mr-picker-foot { display: flex; gap: 8px; margin-top: 10px; }

/* ============================================================
 * 디자인/속지 의뢰 (Design requests) — 클리닉 + 콘솔 공용
 * ============================================================ */

/* 의뢰 유형 배지 */
.dp-req-type {
	display: inline-block;
	padding: 2px 9px;
	border-radius: var(--dp-radius-full, 999px);
	font-size: var(--dp-text-xs, 12px);
	font-weight: var(--dp-weight-semibold, 600);
	white-space: nowrap;
}
.dp-req-type--design { background: var(--dp-blue-100, #dbeafe); color: var(--dp-blue-700, #1d4ed8); }
.dp-req-type--insert { background: #f3e8ff; color: #7e22ce; }

/* 상태 배지 */
.dp-req-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: var(--dp-radius-full, 999px);
	font-size: var(--dp-text-xs, 12px);
	font-weight: var(--dp-weight-semibold, 600);
	white-space: nowrap;
}
.dp-req-badge--awaiting_payment { background: #fef3c7; color: #b45309; }
.dp-req-badge--submitted        { background: var(--dp-blue-100, #dbeafe); color: var(--dp-blue-700, #1d4ed8); }
.dp-req-badge--in_progress      { background: #e0e7ff; color: #4338ca; }
.dp-req-badge--delivered        { background: #dcfce7; color: #15803d; }
.dp-req-badge--cancelled        { background: var(--dp-neutral-200, #e5e7eb); color: var(--dp-neutral-600, #4b5563); }

/* 클리닉 — 의뢰 카드 목록 */
.dp-req-list {
	list-style: none;
	margin: var(--dp-space-4, 16px) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dp-space-3, 12px);
}
.dp-req-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-space-4, 16px);
	padding: var(--dp-space-4, 16px);
	background: var(--dp-surface-raised, #fff);
	border: 1px solid var(--dp-border-subtle, #e5e7eb);
	border-radius: var(--dp-radius-lg, 12px);
	cursor: pointer;
	transition: border-color var(--dp-duration-fast, .12s), box-shadow var(--dp-duration-fast, .12s);
}
.dp-req-card:hover,
.dp-req-card:focus-visible {
	border-color: var(--dp-color-primary, #2563eb);
	box-shadow: var(--dp-shadow-sm, 0 1px 3px rgba(0,0,0,.1));
	outline: none;
}
.dp-req-card__main {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3, 12px);
	min-width: 0;
}
.dp-req-card__title {
	font-size: var(--dp-text-md, 15px);
	color: var(--dp-text-primary, #111827);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dp-req-card__meta {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3, 12px);
	flex-shrink: 0;
}
.dp-req-card__files,
.dp-req-card__date {
	font-size: var(--dp-text-xs, 12px);
	color: var(--dp-text-muted, #6b7280);
}

/* 콘솔 — 필터 탭 */
.dp-req-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-space-2, 8px);
	margin: var(--dp-space-4, 16px) 0;
}
.dp-req-filter__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--dp-radius-full, 999px);
	border: 1px solid var(--dp-border-subtle, #e5e7eb);
	background: var(--dp-surface-raised, #fff);
	color: var(--dp-text-secondary, #374151);
	font-size: var(--dp-text-sm, 13px);
	text-decoration: none;
}
.dp-req-filter__tab:hover { border-color: var(--dp-color-primary, #2563eb); }
.dp-req-filter__tab.is-active {
	background: var(--dp-color-primary, #2563eb);
	border-color: var(--dp-color-primary, #2563eb);
	color: #fff;
}
.dp-req-filter__n {
	font-size: var(--dp-text-2xs, 11px);
	opacity: .8;
}
.dp-req-table tbody tr { cursor: pointer; }
.dp-req-table__title { font-weight: var(--dp-weight-medium, 500); }

/* 폼 필드 (새 의뢰 / 콘솔 처리) */
.dp-req-form { display: flex; flex-direction: column; gap: var(--dp-space-4, 16px); }
.dp-req-field { display: flex; flex-direction: column; gap: 6px; }
.dp-req-field__label {
	font-size: var(--dp-text-sm, 13px);
	font-weight: var(--dp-weight-semibold, 600);
	color: var(--dp-text-secondary, #374151);
}
.dp-req-field__label small { font-weight: var(--dp-weight-regular, 400); color: var(--dp-text-muted, #6b7280); }
.dp-req-field input[type="text"],
.dp-req-field select,
.dp-req-field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--dp-border-default, #d1d5db);
	border-radius: var(--dp-radius-md, 8px);
	font: inherit;
	box-sizing: border-box;
}
.dp-req-field textarea { resize: vertical; }
.dp-req-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--dp-space-2, 8px);
}

/* 상세 모달 */
.dp-req-detail { display: flex; flex-direction: column; gap: var(--dp-space-4, 16px); }
.dp-req-detail__head { display: flex; align-items: center; gap: var(--dp-space-2, 8px); }
.dp-req-detail__clinic {
	margin-left: auto;
	font-size: var(--dp-text-sm, 13px);
	color: var(--dp-text-muted, #6b7280);
}
.dp-req-detail__title { margin: 0; font-size: var(--dp-text-lg, 17px); }
.dp-req-detail__dates { margin: 0; font-size: var(--dp-text-xs, 12px); color: var(--dp-text-muted, #6b7280); }
.dp-req-detail__sec {
	border-top: 1px solid var(--dp-border-subtle, #e5e7eb);
	padding-top: var(--dp-space-3, 12px);
}
.dp-req-detail__sec h4 {
	margin: 0 0 var(--dp-space-2, 8px);
	font-size: var(--dp-text-sm, 13px);
	color: var(--dp-text-secondary, #374151);
}
.dp-req-count {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	border-radius: var(--dp-radius-full, 999px);
	background: var(--dp-neutral-200, #e5e7eb);
	color: var(--dp-text-secondary, #374151);
	font-size: var(--dp-text-2xs, 11px);
	text-align: center;
}
.dp-req-detail__desc { margin: 0; line-height: var(--dp-leading-relaxed, 1.7); color: var(--dp-text-primary, #111827); }
.dp-req-note {
	margin: 0;
	padding: var(--dp-space-3, 12px);
	background: var(--dp-blue-50, #eff6ff);
	border-radius: var(--dp-radius-md, 8px);
	line-height: var(--dp-leading-relaxed, 1.7);
}
.dp-req-empty-line { margin: 0; font-size: var(--dp-text-sm, 13px); color: var(--dp-text-muted, #6b7280); }
.dp-req-loading { padding: var(--dp-space-6, 24px); text-align: center; color: var(--dp-text-muted, #6b7280); }
.dp-req-detail__actions { display: flex; justify-content: flex-end; gap: var(--dp-space-2, 8px); }

/* 파일 행 */
.dp-req-file {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2, 8px);
	padding: 7px 0;
}
.dp-req-file + .dp-req-file { border-top: 1px solid var(--dp-border-subtle, #f0f1f3); }
.dp-req-file__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--dp-text-sm, 13px);
}
.dp-req-file__size {
	font-size: var(--dp-text-xs, 12px);
	color: var(--dp-text-muted, #6b7280);
	flex-shrink: 0;
}
.dp-req-addfile {
	display: flex;
	gap: var(--dp-space-2, 8px);
	align-items: center;
	margin-top: var(--dp-space-3, 12px);
	flex-wrap: wrap;
}
.dp-req-danger { color: var(--dp-text-danger, #dc2626); }

/* 특집 카드 스타일 패널 — 색상 입력 + 체크박스 행 (.dp-style-row 재사용) */
.dp-style-row input[type="color"] {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	width: 46px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-surface-raised);
	cursor: pointer;
}
.dp-style-row--check {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dp-style-row--check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--dp-color-primary);
	cursor: pointer;
}
.dp-style-row--check .dp-style-row__label { grid-column: auto; }