/* ==========================================================================
 * 공통 모달 — 상자는 한 겹 (Figma 22 · 모달 겹침 / 20 · 모달 통일 규격)
 *
 *   머리 60(제목 + ×) · 본문 흰색 하나 · 발 72 아래 고정 · 칸·버튼 40.
 *   모달 안에서는 구역을 카드로 감싸지 않는다 — 소제목 + 구분선.
 *   상자는 「고르는 대상」(안내물 · 과정 카드)에만.
 *
 * frontend.css(공용)와 문진 화면의 인라인 <style> 보다 뒤에서 덮는다.
 * 문진 모달은 인라인 규칙이 본문에 있어 id 로 특이성을 올렸다.
 * ========================================================================== */

/* ---- 모달 껍데기 ------------------------------------------------------- */
.dp-modal__header {
	min-height: 60px;
	padding: var(--dp-space-2) var(--dp-space-4) var(--dp-space-2) var(--dp-space-6);
	box-sizing: border-box;
}
.dp-modal__header strong { font-size: var(--dp-text-xl); }
.dp-modal--narrow { width: min(640px, 92vw); }  /* M */
.dp-modal--sm     { width: min(480px, 92vw); }  /* S — 고르기 창 */

/* 본문 바탕은 흰색 하나. 회색은 지면을 보여 주는 전체화면 모달(.dp-modal--fullscreen)만. */
.dp-modal__body { background: var(--dp-surface-base); }
.dp-modal__body--scroll { padding: var(--dp-space-5) var(--dp-space-6); }
.dp-modal__hint {
	margin: 0 0 var(--dp-space-4);
	font-size: var(--dp-text-sm);
	line-height: var(--dp-leading-snug);
	color: var(--dp-text-muted);
}

/* 발 — 오른쪽 끝에 [취소][주 버튼], 위험·보조 동작은 왼쪽. 본문이 길어도 늘 보인다. */
.dp-modal__foot {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	flex: 0 0 auto;
	min-height: 72px;
	padding: var(--dp-space-3) var(--dp-space-6);
	border-top: 1px solid var(--dp-border-subtle);
	background: var(--dp-surface-base);
	border-bottom-left-radius: var(--dp-radius-2xl);
	border-bottom-right-radius: var(--dp-radius-2xl);
	box-sizing: border-box;
}
.dp-modal__foot[hidden] { display: none; }
.dp-modal__foot-left { display: flex; align-items: center; gap: var(--dp-space-2); margin-right: auto; }
.dp-modal__foot-msg { margin-right: auto; font-size: var(--dp-text-sm); color: var(--dp-text-muted); }
.dp-modal__foot .dp-btn { height: 40px; padding: 0 var(--dp-space-4); }
/* 발의 보조 버튼([취소] · [닫기] · 「더 보기」)은 테두리 버튼 — 글자만 있는 건 위험 동작(삭제 · 의뢰 취소) 뿐. */
.dp-modal__foot > .dp-btn--ghost:not(.dp-btn--danger):not(.dp-req-danger),
.dp-imodal__foot > .dp-btn--ghost,
.dp-pe .dp-form__footer > .dp-btn--ghost,
.dp-pe .dp-more__btn {
	border-color: var(--dp-border-default);
	background: var(--dp-surface-base);
}
.dp-modal__foot .dp-btn--danger,
.dp-modal__foot .dp-req-danger,
.dp-pe .dp-form__footer .dp-btn--danger { color: var(--dp-text-danger); }

/* 일반 · 특집 탭 — 머리 밑에 붙은 탭 대신 본문 위의 분할 버튼(카테고리 선택 · 순서 공용) */
.dp-cat-tabs {
	margin: var(--dp-space-5) var(--dp-space-6) 0;
	padding: 3px;
	gap: 2px;
	border: 0;
	border-radius: var(--dp-radius-lg);
	background: var(--dp-neutral-100);
}
.dp-cat-tab {
	flex: 1;
	justify-content: center;
	height: 34px;
	padding: 0 var(--dp-space-3);
	margin: 0;
	border: 0;
	border-radius: var(--dp-radius-md);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}
.dp-cat-tab.is-active {
	background: var(--dp-surface-base);
	box-shadow: var(--dp-shadow-xs);
}

/* 고르기 목록 — 한 줄 48 */
.dp-event-select-list { gap: var(--dp-space-2); max-height: 360px; }
.dp-event-select-row {
	min-height: 48px;
	padding: 0 var(--dp-space-3) 0 var(--dp-space-4);
	border-radius: var(--dp-radius-lg);
	box-sizing: border-box;
}
.dp-event-select-row__name { font-size: var(--dp-text-md); }
.dp-event-select-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--dp-color-primary); flex: none; }
.dp-event-select-add { gap: var(--dp-space-2); margin-top: var(--dp-space-4); padding-top: 0; border-top: 0; }
.dp-event-select-add input {
	height: 40px;
	padding: 0 var(--dp-space-3);
	font-size: var(--dp-text-md);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	box-sizing: border-box;
}
.dp-event-select-add .dp-btn { height: 40px; }

/* 카테고리 순서 — 행마다 상자 대신 구분선 */
.dp-cat-list { gap: 0; }
.dp-cat-row {
	min-height: 56px;
	padding: 0 var(--dp-space-2);
	border: 0;
	border-top: 1px solid var(--dp-border-subtle);
	border-radius: 0;
	background: transparent;
}
.dp-cat-row:first-child { border-top: 0; }
.dp-cat-row:hover { border-color: var(--dp-border-subtle); }
.dp-cat-name { font-size: var(--dp-text-md); font-weight: var(--dp-weight-bold); }
.dp-cat-page-input { height: 40px; box-sizing: border-box; }

/* ==========================================================================
 * 프로그램 편집 — 바깥 화면에는 투명한 iframe 하나만 깔고(.dp-pe-host),
 * 모달 상자는 iframe 안 페이지가 한 겹으로 그린다(.dp-pe). 그래서 그 안의
 * 고르기 창(카테고리 · 특집 · 장비 · 버전 복사)도 화면 전체 기준으로 뜬다.
 * ========================================================================== */
.dp-pe-host {
	position: fixed;
	inset: 0;
	z-index: var(--dp-z-modal);
	background: var(--dp-surface-overlay);
}
.dp-pe-host[hidden] { display: none; }
.dp-pe-host > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
}
.dp-pe-host.is-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--dp-neutral-0) 35%, transparent);
	border-top-color: var(--dp-neutral-0);
	animation: dp-pe-spin 0.8s linear infinite;
}
@keyframes dp-pe-spin { to { transform: rotate(360deg); } }

/* iframe 안 — 바탕은 투명(어두운 막은 바깥 화면이 깐다) */
html:has(.dp-pe),
html:has(.dp-pe) body { background: transparent !important; }
.dp-pe {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dp-space-5);
	box-sizing: border-box;
}
/* 상자 하나. transform·filter 를 주면 안의 고르기 창(position:fixed)이 이 상자에 갇힌다. */
.dp-pe .dp-main.dp-main--modal {
	position: relative;
	width: min(960px, 100%);
	max-width: none;
	max-height: min(92vh, 100%);
	min-height: 0;
	flex: 0 1 auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: var(--dp-surface-base);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-2xl);
	box-shadow: var(--dp-shadow-2xl);
	overflow: hidden;
}
.dp-pe__head {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3);
	flex: 0 0 auto;
	height: 60px;
	padding: 0 var(--dp-space-3) 0 var(--dp-space-6);
	border-bottom: 1px solid var(--dp-border-subtle);
	box-sizing: border-box;
}
.dp-pe__head strong {
	font-size: var(--dp-text-xl);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-primary);
	white-space: nowrap;
}
.dp-pe__sub {
	min-width: 0;
	font-size: var(--dp-text-sm);
	color: var(--dp-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-pe__head .dp-modal__close { margin-left: auto; width: 36px; height: 36px; }

/* 폼 — 흰 카드(⑤)를 걷고, 본문만 스크롤, 발은 상자 바닥에 붙는다 */
.dp-pe .dp-form {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	overflow: hidden;
}
.dp-pe .dp-form__main {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--dp-space-6);
	gap: var(--dp-space-5);
}
/* 구역 카드(⑥) → 소제목 + 구분선 */
.dp-pe .dp-form fieldset {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.dp-pe .dp-form__main > fieldset + fieldset,
.dp-pe .dp-form__main > .dp-detail {
	padding-top: var(--dp-space-5);
	border-top: 1px solid var(--dp-border-subtle);
	border-radius: 0;
}
.dp-pe .dp-form__footer {
	flex: 0 0 auto;
	align-items: center;
	min-height: 72px;
	margin: 0;
	padding: var(--dp-space-3) var(--dp-space-6);
	border-top: 1px solid var(--dp-border-subtle);
	background: var(--dp-surface-base);
	box-sizing: border-box;
}
@media (max-width: 720px) {
	.dp-pe { padding: 0; align-items: flex-end; }
	.dp-pe .dp-main.dp-main--modal {
		width: 100%;
		max-height: 94vh;
		border-radius: var(--dp-radius-2xl) var(--dp-radius-2xl) 0 0;
	}
	.dp-pe .dp-form__main { padding: var(--dp-space-5); }
	.dp-pe .dp-form__footer { padding: var(--dp-space-3) var(--dp-space-5) var(--dp-space-5); }
}

/* 단독 페이지(/edit · /new)도 바깥 흰 카드는 걷는다 — 구역을 .dp-form__main 이 한 겹
   감싸서 「구역 있는 폼은 상자를 걷는다」(:has(> fieldset))가 못 잡던 것. */
.dp-form:has(> .dp-form__main > fieldset) {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ---- 프로그램 편집 폼 본문 (모달 · 단독 페이지 공용) ---------------------- */
#dp-program-form label,
#dp-program-form .dp-form-field .dp-form-label {
	margin: 0;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	letter-spacing: normal;
	border-radius: 0;
	color: var(--dp-text-secondary);
}
#dp-program-form input[type="text"],
#dp-program-form select,
#dp-program-form textarea {
	margin-top: var(--dp-space-2);
	font-size: var(--dp-text-md);
	font-weight: var(--dp-weight-regular, 400);
	border-radius: var(--dp-radius-md);
}
#dp-program-form input[type="text"],
#dp-program-form select { height: 40px; }
#dp-program-form .dp-form__footer .dp-btn { height: 40px; padding: 0 var(--dp-space-4); }
#dp-program-form .dp-label-sub {
	margin-left: var(--dp-space-1);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted);
}
.dp-form-help {
	display: block;
	margin-top: var(--dp-space-2);
	font-size: var(--dp-text-xs);
	line-height: var(--dp-leading-snug);
	color: var(--dp-text-muted);
}

/* 구역 제목 */
#dp-program-form legend { margin-bottom: var(--dp-space-4); }
#dp-program-form legend small {
	margin-left: var(--dp-space-2);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted);
}

/* AI 빈 칸 채우기 */
#dp-program-form .dp-aifill { gap: var(--dp-space-3); }
#dp-program-form .dp-aifill .dp-btn {
	height: 40px;
	background: var(--dp-secondary-50);
	border-color: var(--dp-secondary-200);
	color: var(--dp-secondary-700);
}
#dp-program-form .dp-aifill .dp-btn:hover { background: var(--dp-secondary-100); }
#dp-program-form .dp-aifill__hint { font-size: var(--dp-text-sm); }

/* 기본 — 2열(왼쪽 이름·소개·시술 / 오른쪽 카테고리·특집·장비) */
.dp-pf-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--dp-space-5) var(--dp-space-6);
	align-items: start;
}
.dp-pf-col { display: flex; flex-direction: column; gap: var(--dp-space-5); min-width: 0; }
#dp-program-form .dp-pf-col > label,
#dp-program-form .dp-pf-col > .dp-form-field { margin: 0; }
#dp-program-form .dp-pf-col > .dp-form-field { gap: 0; }
#dp-program-form .dp-pf-col > .dp-group-hint { margin: calc(var(--dp-space-3) * -1) 0 0; }
@media (max-width: 720px) {
	.dp-pf-cols { grid-template-columns: minmax(0, 1fr); }
}

/* 칩 칸 — 고른 것 + 오른쪽 끝 「＋ 추가」를 높이 40 칸 하나에 */
.dp-chipfield {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 40px;
	margin-top: var(--dp-space-2);
	padding: 5px 6px;
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	background: var(--dp-surface-base);
	box-sizing: border-box;
}
.dp-chipfield .dp-cat-chips { display: contents; }
.dp-chipfield .dp-cat-chips__empty { padding-left: 6px; font-size: var(--dp-text-md); color: var(--dp-text-disabled); }
.dp-chipfield .dp-cat-chip {
	height: 28px;
	padding: 0 10px;
	border-radius: var(--dp-radius-sm, 6px);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	letter-spacing: normal;
	box-sizing: border-box;
}
.dp-chipfield__add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	margin-left: auto;
	padding: 0 8px;
	border: 0;
	border-radius: var(--dp-radius-sm, 6px);
	background: none;
	font: inherit;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-color-primary);
	white-space: nowrap;
	cursor: pointer;
}
.dp-chipfield__add:hover { background: var(--dp-color-primary-tint); }

/* 가격표에 노출 — 스위치 */
#dp-program-form .dp-switch {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3);
	margin: 0;
	font-size: var(--dp-text-md);
	color: var(--dp-text-primary);
	cursor: pointer;
}
#dp-program-form .dp-switch input {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	margin: 0;
	border-radius: 10px;
	background: var(--dp-neutral-300);
	cursor: pointer;
	transition: background var(--dp-duration-fast) var(--dp-ease-out);
}
#dp-program-form .dp-switch input::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--dp-neutral-0);
	box-shadow: var(--dp-shadow-xs);
	transition: transform var(--dp-duration-fast) var(--dp-ease-out);
}
#dp-program-form .dp-switch input:checked { background: var(--dp-color-primary); }
#dp-program-form .dp-switch input:checked::after { transform: translateX(16px); }
#dp-program-form .dp-switch input:focus-visible { outline: none; box-shadow: var(--dp-ring-focus); }
#dp-program-form .dp-switch small { font-size: var(--dp-text-xs); color: var(--dp-text-muted); }

/* 옵션 — 머리글 한 줄 + 번호 붙은 3줄 */
#dp-program-form .dp-opt-head,
#dp-program-form .dp-opt-row {
	display: grid;
	grid-template-columns: 24px repeat(3, minmax(0, 1fr));
	gap: var(--dp-space-3);
	align-items: center;
	margin: 0 0 var(--dp-space-2);
}
#dp-program-form .dp-opt-head { margin-bottom: var(--dp-space-2); }
#dp-program-form .dp-opt-head span {
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-secondary);
	white-space: nowrap;
}
#dp-program-form .dp-opt-head small { font-weight: var(--dp-weight-medium); color: var(--dp-text-muted); }
#dp-program-form .dp-opt-row input { margin-top: 0; }
.dp-opt-row__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--dp-neutral-100);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

/* 상세 정보 — 접는 줄 */
.dp-pe #dp-program-form .dp-detail { padding: var(--dp-space-5) 0 0; border: 0; border-top: 1px solid var(--dp-border-subtle); background: none; }
#dp-program-form .dp-detail > summary {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 0;
	list-style: none;
	font-size: var(--dp-text-md);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-primary);
}
#dp-program-form .dp-detail > summary::-webkit-details-marker { display: none; }
#dp-program-form .dp-detail > summary::before {
	content: "";
	width: 7px;
	height: 7px;
	margin: 0 4px 0 2px;
	border-right: 2px solid var(--dp-text-muted);
	border-bottom: 2px solid var(--dp-text-muted);
	transform: rotate(-45deg);
	transition: transform var(--dp-duration-fast) var(--dp-ease-out);
}
#dp-program-form .dp-detail[open] > summary::before { transform: rotate(45deg); }
#dp-program-form .dp-detail > summary small { font-size: var(--dp-text-xs); font-weight: var(--dp-weight-medium); color: var(--dp-text-muted); }
#dp-program-form .dp-detail[open] > summary { margin-bottom: var(--dp-space-4); }
#dp-program-form .dp-detail > label { margin-bottom: var(--dp-space-4); }

/* 발 왼쪽 — 「더 보기」(연동 · 복제 · 버전 복사 · 보관) + 삭제 */
#dp-program-form .dp-form__footer-danger { align-items: center; flex-wrap: nowrap; }
.dp-more { position: relative; }
.dp-more__btn[aria-expanded="true"] {
	border-color: var(--dp-color-primary);
	box-shadow: var(--dp-ring-focus);
}
.dp-more__btn .dp-ic:last-child { transition: transform var(--dp-duration-fast) var(--dp-ease-out); }
.dp-more__btn[aria-expanded="false"] .dp-ic:last-child { transform: rotate(180deg); }
.dp-more__menu {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: var(--dp-z-popover);
	width: 300px;
	padding: 6px;
	background: var(--dp-surface-base);
	border: 1px solid var(--dp-border-subtle);
	border-radius: var(--dp-radius-lg);
	box-shadow: var(--dp-shadow-xl, var(--dp-shadow-2xl));
	box-sizing: border-box;
}
.dp-more__menu[hidden] { display: none; }
#dp-program-form .dp-more__menu .dp-btn {
	display: flex;
	width: 100%;
	height: 44px;
	justify-content: flex-start;
	gap: var(--dp-space-3);
	padding: 0 var(--dp-space-3);
	border: 0;
	border-radius: var(--dp-radius-md);
	background: none;
	box-shadow: none;
	font-size: var(--dp-text-md);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-primary);
	opacity: 1;
}
#dp-program-form .dp-more__menu .dp-btn:hover { background: var(--dp-neutral-100); }
.dp-more__menu .dp-btn small {
	margin-left: auto;
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-medium);
	color: var(--dp-text-muted);
}

/* 고르기 창 4개(카테고리 · 특집 · 장비 · 버전 복사) — 프로그램 상자 위 한 단 */
.dp-pe .dp-modal-overlay { z-index: var(--dp-z-modal-nested); }

/* ==========================================================================
 * 의뢰 상세 — 구역은 상자 없이 소제목 + 선, 참고 파일은 끌어 놓기 상자, 취소는 발 왼쪽
 * ========================================================================== */
/* 클리닉 쪽만(.dp-req-detail--clinic) — 콘솔 의뢰 상세는 같은 id 를 쓰지만 손대지 않는다. */
.dp-req-detail--clinic { gap: var(--dp-space-5); }
.dp-req-detail--clinic .dp-req-detail__title { font-size: var(--dp-text-xl); }
.dp-req-detail--clinic .dp-req-detail__sec { padding-top: var(--dp-space-5); }
.dp-req-detail--clinic .dp-req-detail__sec h4 { margin-bottom: var(--dp-space-3); font-size: var(--dp-text-md); color: var(--dp-text-primary); }
.dp-req-detail--clinic .dp-req-detail__desc { font-size: var(--dp-text-md); }
.dp-req-detail--clinic .dp-req-file { min-height: 44px; padding: 0 var(--dp-space-3); border: 1px solid var(--dp-border-subtle); border-radius: var(--dp-radius-lg); }
.dp-req-detail--clinic .dp-req-file + .dp-req-file { margin-top: var(--dp-space-2); border-top: 1px solid var(--dp-border-subtle); }
.dp-req-detail--clinic .dp-req-addfile { display: block; margin-top: var(--dp-space-3); }
.dp-req-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dp-space-2);
	position: relative;
	min-height: 64px;
	padding: var(--dp-space-3);
	border: 1.5px dashed var(--dp-border-default);
	border-radius: var(--dp-radius-lg);
	background: var(--dp-surface-sunken);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-secondary);
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
}
.dp-req-drop:hover,
.dp-req-drop.is-over { border-color: var(--dp-color-primary); background: var(--dp-primary-50); color: var(--dp-color-primary); }
.dp-req-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dp-req-drop.is-busy { opacity: 0.6; pointer-events: none; }
.dp-req-drop .dp-ic { flex: none; }
.dp-req-detail--clinic ~ .dp-req-chat,
.dp-req-detail--clinic .dp-req-chat { border-top-width: 1px; }

/* ==========================================================================
 * 속지로 적용 — 미리보기 옆에 레이어 고르기, 라디오 대신 둘 중 하나 버튼
 * ========================================================================== */
.dp-media-apply__body {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: var(--dp-space-5) var(--dp-space-4);
	align-items: center;
}
.dp-media-apply__body > *:not(.dp-media-apply__preview):not(.dp-media-apply__layerbox) { grid-column: 1 / -1; }
.dp-media-apply__preview { width: 150px; align-self: stretch; aspect-ratio: auto; min-height: 106px; }
.dp-media-apply__layerbox { display: flex; flex-direction: column; gap: var(--dp-space-2); }
.dp-media-apply__label { font-size: var(--dp-text-sm); font-weight: var(--dp-weight-bold); color: var(--dp-text-secondary); }
.dp-media-apply__layers,
.dp-media-apply__tabs {
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--dp-radius-lg);
	background: var(--dp-neutral-100);
}
.dp-media-apply__layer,
.dp-media-apply__tab {
	flex: 1;
	justify-content: center;
	height: 34px;
	padding: 0 var(--dp-space-2);
	border-radius: var(--dp-radius-md);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
	box-sizing: border-box;
}
.dp-media-apply__layer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dp-media-apply__layer:has(input:checked),
.dp-media-apply__tab.is-active { background: var(--dp-surface-base); color: var(--dp-text-primary); box-shadow: var(--dp-shadow-xs); }
.dp-media-apply__layer:has(input:focus-visible) { box-shadow: var(--dp-ring-focus); }
.dp-media-apply__pane { gap: var(--dp-space-2); }
.dp-media-apply__pane select {
	height: 40px;
	padding: 0 var(--dp-space-3);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-md);
	background: var(--dp-surface-base);
	font-size: var(--dp-text-md);
	color: var(--dp-text-primary);
}
.dp-media-apply__hint { margin: 0; font-size: var(--dp-text-xs); }
.dp-media-apply__footer { justify-content: flex-end; }

/* ==========================================================================
 * 문진 — QR 설정 · 문진 과정 (dp-imodal 셸). 인라인 규칙보다 뒤에 오도록 id 로 묶는다.
 * ========================================================================== */
.dp-imodal .dp-imodal__box { width: min(960px, 96vw); }
.dp-imodal .dp-imodal__box--sm { width: min(640px, 96vw); }
.dp-imodal .dp-imodal__head {
	min-height: 60px;
	padding: 0 var(--dp-space-3) 0 var(--dp-space-6);
	box-sizing: border-box;
}
.dp-imodal .dp-imodal__head strong { font-size: var(--dp-text-xl); }
.dp-imodal .dp-imodal__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--dp-radius-md);
}
.dp-imodal .dp-imodal__x:hover { background: var(--dp-color-primary-tint); }
#dp-imodal-qr .dp-imodal__body,
#dp-imodal-items .dp-imodal__body { padding: var(--dp-space-6); }
.dp-imodal__foot {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	flex: 0 0 auto;
	min-height: 72px;
	padding: var(--dp-space-3) var(--dp-space-6);
	border-top: 1px solid var(--dp-border-subtle);
	background: var(--dp-surface-base);
	box-sizing: border-box;
}
.dp-imodal__foot .dp-btn { height: 40px; padding: 0 var(--dp-space-4); }

/* QR 설정 — QR 구역은 상자 없이, 안내물은 회색 받침 하나만 */
#dp-imodal-qr .dp-intake-qrbox {
	align-items: flex-start;
	gap: var(--dp-space-5);
	margin: 0;
	padding: 0 0 var(--dp-space-5);
	border: 0;
	border-bottom: 1px solid var(--dp-border-subtle);
	border-radius: 0;
	background: none;
}
#dp-imodal-qr .dp-intake-qrbox__qr { padding: 8px; border: 1px solid var(--dp-border-subtle); border-radius: var(--dp-radius-lg); }
#dp-imodal-qr .dp-intake-qrbox__t { margin-bottom: var(--dp-space-2); font-size: var(--dp-text-md); }
#dp-imodal-qr .dp-intake-qrbox__url { font-size: var(--dp-text-sm); max-width: none; }
#dp-imodal-qr .dp-intake-qrbox__btns { margin-top: var(--dp-space-3); }
#dp-imodal-qr .dp-intake-qrbox__btns .dp-btn { height: 40px; padding: 0 var(--dp-space-4); font-size: var(--dp-text-sm); }
#dp-imodal-qr .dp-qrp { margin: var(--dp-space-5) 0 0; }
#dp-imodal-qr .dp-qrp__head { margin-bottom: var(--dp-space-4); }
#dp-imodal-qr .dp-qrp__t { font-size: var(--dp-text-md); font-weight: var(--dp-weight-bold); }
#dp-imodal-qr .dp-qrp__grid { gap: var(--dp-space-5); }
#dp-imodal-qr .dp-qrp__item {
	align-items: stretch;
	gap: var(--dp-space-3);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
/* width:100% + padding 이 content-box 라 받침이 24px 씩 넘쳐 옆 칸에 붙어 보였다(카드 테두리에 가려 있던 것). */
#dp-imodal-qr .dp-qrp__paper { box-sizing: border-box; height: 240px; min-height: 0; border-radius: var(--dp-radius-lg); }
#dp-imodal-qr .dp-qrp__cv { width: auto; max-height: 100%; }
#dp-imodal-qr .dp-intake-qrbox__btns .dp-btn,
#dp-imodal-qr .dp-qrp__dl,
#dp-imodal-qr .dp-qrp__edit {
	border-color: var(--dp-border-default);
	background: var(--dp-surface-base);
}
#dp-imodal-qr .dp-qrp__cap { flex-direction: row; align-items: baseline; gap: var(--dp-space-2); text-align: left; }
#dp-imodal-qr .dp-qrp__name { font-size: var(--dp-text-md); font-weight: var(--dp-weight-bold); }
#dp-imodal-qr .dp-qrp__spec { font-size: var(--dp-text-xs); }
#dp-imodal-qr .dp-qrp__acts { gap: var(--dp-space-2); }
#dp-imodal-qr .dp-qrp__dl,
#dp-imodal-qr .dp-qrp__edit { height: 40px; font-size: var(--dp-text-sm); }
#dp-imodal-qr .dp-qrp__og {
	display: flex;
	align-items: center;
	gap: var(--dp-space-3);
	margin: var(--dp-space-5) 0 0;
	padding: var(--dp-space-3) var(--dp-space-4);
	border-radius: var(--dp-radius-lg);
	background: var(--dp-surface-sunken);
	font-size: var(--dp-text-sm);
	line-height: 1.6;
}
#dp-imodal-qr .dp-qrp__og > span { flex: 1; min-width: 0; }
#dp-imodal-qr .dp-qrp__ogbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	height: 40px;
	margin: 0;
	padding: 0 var(--dp-space-4);
	border: 1px solid var(--dp-border-default);
	border-radius: var(--dp-radius-lg);
	background: var(--dp-surface-base);
	font-size: var(--dp-text-sm);
	color: var(--dp-text-primary);
	text-decoration: none;
}
#dp-imodal-qr .dp-qrp__ogbtn:hover { border-color: var(--dp-color-primary); color: var(--dp-color-primary); }
@media (max-width: 720px) {
	#dp-imodal-qr .dp-qrp__og { flex-direction: column; align-items: stretch; }
}

/* 문진 과정 — 과정 카드(고르는 대상)만 상자, 설정 구역은 소제목 + 선, 저장은 발 하나 */
#dp-imodal-items .dp-itabs--sec { display: none; }  /* 「과정」 이름표는 구역 소제목으로 */
#dp-imodal-items .dp-mode-sec { margin: 0 0 var(--dp-space-2); }
#dp-imodal-items .dp-mode-title { display: flex; align-items: baseline; gap: var(--dp-space-2); margin: 0 0 var(--dp-space-1); font-size: var(--dp-text-md); font-weight: var(--dp-weight-bold); }
#dp-imodal-items .dp-mode-title small { font-size: var(--dp-text-xs); font-weight: var(--dp-weight-medium); color: var(--dp-text-muted); }
#dp-imodal-items .dp-mode { gap: var(--dp-space-3); }
#dp-imodal-items .dp-mode__opt { border-width: 1.5px; padding: var(--dp-space-4) var(--dp-space-4) var(--dp-space-3); }
#dp-imodal-items .dp-mode__b { display: flex; align-items: center; gap: var(--dp-space-2); }
#dp-imodal-items .dp-mode__b::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--dp-neutral-300);
	box-sizing: border-box;
}
#dp-imodal-items .dp-mode__opt.is-on .dp-mode__b::before { border: 5px solid var(--dp-color-primary); }
#dp-imodal-items .dp-mode__b b { font-size: var(--dp-text-md); }
#dp-imodal-items .dp-mode__sc { padding-top: var(--dp-space-2); margin-top: var(--dp-space-2); border-top: 1px solid var(--dp-border-subtle); font-size: 11.5px; }
#dp-imodal-items .dp-mode__sc i { font-size: var(--dp-text-xs); }
#dp-imodal-items .dp-mode__play {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 9px;
	border-radius: var(--dp-radius-md);
	color: var(--dp-text-secondary);
}
/* 「체험」 앞 ▶ 글자 대신 눈 아이콘(시나리오를 다시 그려도 그대로 붙게 CSS 로) */
#dp-imodal-items .dp-mode__play::before {
	content: "";
	width: 14px;
	height: 14px;
	margin: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.7%2012S6.2%205.7%2012%205.7%2021.3%2012%2021.3%2012%2017.8%2018.3%2012%2018.3%202.7%2012%202.7%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.7%2012S6.2%205.7%2012%205.7%2021.3%2012%2021.3%2012%2017.8%2018.3%2012%2018.3%202.7%2012%202.7%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
#dp-imodal-items .dp-itabs { margin: var(--dp-space-6) 0 var(--dp-space-5); }
#dp-imodal-items .dp-itabs__t { height: 40px; padding: 0 var(--dp-space-4); font-size: var(--dp-text-md); font-weight: var(--dp-weight-bold); }
#dp-imodal-items .dp-iset__card {
	margin: 0;
	padding: var(--dp-space-5) 0;
	border: 0;
	border-top: 1px solid var(--dp-border-subtle);
	border-radius: 0;
	background: none;
}
#dp-imodal-items .dp-itab > .dp-iset > .dp-iset__card:first-child { padding-top: 0; border-top: 0; }
#dp-imodal-items .dp-iset__t { font-size: var(--dp-text-md); }
#dp-imodal-items .dp-iset__name,
#dp-imodal-items .dp-iset__btn { height: 40px; box-sizing: border-box; }
#dp-imodal-items .dp-iset__name { max-width: none; flex: 1 1 260px; font-size: var(--dp-text-md); }
#dp-imodal-items .dp-iset__sw { width: 32px; height: 32px; }
#dp-imodal-items .dp-lang,
#dp-imodal-items .dp-words { padding-top: var(--dp-space-5); border-top: 1px solid var(--dp-border-subtle); }
/* 구역마다 있던 저장 버튼은 발 「저장」 하나로 — 버튼은 남겨 두고(발이 눌러 준다) 숨긴다. */
#dp-imodal-items .dp-iset__save,
#dp-imodal-items #dp-lang-save,
#dp-imodal-items #dp-sch-save,
#dp-imodal-items #dp-cc-save,
#dp-imodal-items #dp-iv-save,
#dp-imodal-items #dp-med-save,
#dp-imodal-items [data-wsave] { display: none !important; }