/*
 * 클리닉 셸 (v0.35) — 왼쪽 공간 · 위 보기 · 오른쪽 기능. Figma 17 「공간 · 보기 · 기능」.
 *
 *   왼쪽  .dp-nav    누르면 화면이 바뀌는 메뉴. 데스크톱은 늘 보이고 ‹ 로 64px 접힌다.
 *   위    .dp-topbar 지금 위치(제목 · 하위) + 보기 전환·옵션.
 *   오른쪽 .dp-rail   모든 화면의 도구. 버튼 56×56 정사각, 맨 아래 AI · 사용법.
 * 720px 이하: 메뉴는 ☰ 서랍, 레일은 화면 아래 막대(버튼 52×52).
 *
 * frontend.css 다음에 싣는다(옛 드로어·2안 레일 규칙을 덮는다). 색·z 는 토큰만.
 */

:root { --dp-shell-nav: var(--dp-nav-w); }
html.dp-nav-collapsed { --dp-shell-nav: var(--dp-nav-w-min); }

/* ── 스크롤바 ───────────────────────────────────────────────
 * 브라우저 기본(회색 굵은 막대 + 흰 홈)이 미리보기 옆에서 따로 놀았다 → 홈은 투명,
 * 가는 둥근 손잡이만. 미리보기 iframe 도 이 파일을 싣는다(랜딩은 셸 CSS 를 빼서 그대로).
 * Chrome 은 scrollbar-color 를 주면 ::-webkit-scrollbar 를 무시하므로 표준 속성은 그 외 브라우저에만. */
@supports not selector(::-webkit-scrollbar) {
	* { scrollbar-width: thin; scrollbar-color: var(--dp-scrollbar-thumb) transparent; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
	min-height: 40px;
	border: 3px solid transparent;
	border-radius: var(--dp-radius-full);
	background: var(--dp-scrollbar-thumb) padding-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--dp-scrollbar-thumb-hover); }
/* 창 전체 스크롤바는 흰 레일·상단바 바로 오른쪽에 붙는다 — 바탕도 같은 흰색으로(미리보기 iframe 은 투명 그대로).
   Chrome 은 창 스크롤바 모양을 html 이 아니라 body 의 ::-webkit-scrollbar 에서 가져간다(html 쪽 규칙은 안 먹음). */
body.dp-appshell::-webkit-scrollbar { background: var(--dp-surface-base); }

/* ── 왼쪽 = 공간 ─────────────────────────────────────────── */
.dp-nav__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: var(--dp-space-3) var(--dp-space-2-5) var(--dp-space-2-5);
}
.dp-nav__head {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	padding: 2px var(--dp-space-1) var(--dp-space-3);
	margin-bottom: var(--dp-space-1-5);
	border-bottom: 1px solid var(--dp-border-subtle);
}
.dp-nav__brand {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2-5);
	min-width: 0;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}
.dp-nav__logo {
	width: 30px;
	height: 30px;
	border-radius: var(--dp-radius-md);
	overflow: hidden;
	flex: none;
	display: inline-flex;
}
.dp-nav__logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dp-nav__clinic {
	min-width: 0;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-nav__collapse,
.dp-nav__logout {
	width: 28px;
	height: 28px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--dp-radius-md);
	background: transparent;
	color: var(--dp-text-disabled);
	cursor: pointer;
	text-decoration: none;
}
.dp-nav__collapse:hover,
.dp-nav__logout:hover { background: var(--dp-surface-hover); color: var(--dp-text-primary); }
html.dp-nav-collapsed .dp-nav__collapse .dp-ic { transform: rotate(180deg); }

.dp-nav__menu { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dp-nav__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dp-nav__gh {
	margin: var(--dp-space-2-5) var(--dp-space-2-5) var(--dp-space-1);
	font-size: var(--dp-text-2xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-disabled);
	letter-spacing: .02em;
}
.dp-nav__item {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2-5);
	height: 36px;
	padding: 0 var(--dp-space-2-5);
	border-radius: var(--dp-radius-md);
	color: var(--dp-text-secondary);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	text-decoration: none;
}
.dp-nav__item:hover { background: var(--dp-surface-hover); color: var(--dp-text-primary); }
.dp-nav__item.is-active { background: var(--dp-color-primary-soft); color: var(--dp-color-primary-ink); }
/* 하위 공간이 펼쳐진 항목은 글자색만 — 채움은 지금 하위 항목이 받는다. */
.dp-nav__item.is-active:has(+ .dp-nav__sub) { background: transparent; }
.dp-nav__item.is-active:has(+ .dp-nav__sub):hover { background: var(--dp-surface-hover); }
.dp-nav__ic { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.dp-nav__ic .dp-ic { width: 18px; height: 18px; }
.dp-nav__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-nav__chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 7px;
	border-radius: var(--dp-radius-full);
	background: var(--dp-neutral-100);
	color: var(--dp-text-secondary);
	font-size: var(--dp-text-2xs);
	font-weight: var(--dp-weight-bold);
	white-space: nowrap;
}
.dp-nav__chip.is-pro     { background: var(--dp-success-soft); color: var(--dp-success-700); }
.dp-nav__chip.is-trial   { background: var(--dp-color-primary-soft); color: var(--dp-color-primary-ink); }
.dp-nav__chip.is-expired { background: var(--dp-danger-soft); color: var(--dp-danger-700); }
.dp-nav__chip.is-in-use  { background: var(--dp-surface-base); color: var(--dp-color-primary-ink); }

.dp-nav__sub {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 2px 0 var(--dp-space-1-5) 19px;
	padding-left: var(--dp-space-2-5);
	border-left: 2px solid var(--dp-color-primary-soft);
}
.dp-nav__subitem {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2);
	width: 100%;
	height: 32px;
	padding: 0 var(--dp-space-2-5);
	border: 0;
	border-radius: var(--dp-radius-md);
	background: transparent;
	color: var(--dp-text-secondary);
	font: inherit;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}
.dp-nav__subitem:hover { background: var(--dp-surface-hover); color: var(--dp-text-primary); }
.dp-nav__subitem.is-current { background: var(--dp-color-primary-soft); color: var(--dp-color-primary-ink); cursor: default; }
.dp-nav__subitem.is-done:not(.is-current),
.dp-nav__subitem.is-muted { color: var(--dp-text-muted); }
.dp-nav__sublabel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-nav__subic { display: inline-flex; color: var(--dp-text-disabled); }
.dp-nav__count { font-style: normal; font-size: var(--dp-text-2xs); font-weight: var(--dp-weight-bold); color: var(--dp-text-muted); }
.dp-nav__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dp-neutral-300); }
.dp-nav__dot--ongoing   { background: var(--dp-success-500); }
.dp-nav__dot--preparing { background: var(--dp-warning-500); }

.dp-nav__group--bottom { padding-top: var(--dp-space-1-5); }

.dp-nav__account {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2-5);
	padding: var(--dp-space-2-5) var(--dp-space-1-5) 2px;
	margin-top: var(--dp-space-1-5);
	border-top: 1px solid var(--dp-border-subtle);
}
.dp-nav__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dp-color-secondary-soft);
	color: var(--dp-color-secondary);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-bold);
}
.dp-nav__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dp-nav__who strong {
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-nav__plan {
	font-size: var(--dp-text-2xs);
	color: var(--dp-text-muted);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dp-nav__plan:hover { color: var(--dp-text-primary); text-decoration: underline; }
.dp-nav__plan.is-expired { color: var(--dp-text-danger); }

/* 병원 설정 — 같은 자리가 구역 목록으로 바뀐다(「‹ 메뉴로」 를 누르면 앱 메뉴). */
.dp-nav__menu--settings { display: none; }
.dp-nav__inner.is-settings .dp-nav__menu--app { display: none; }
.dp-nav__inner.is-settings .dp-nav__menu--settings { display: flex; }
.dp-nav__back {
	display: flex;
	align-items: center;
	gap: var(--dp-space-1-5);
	height: 30px;
	padding: 0 var(--dp-space-1-5);
	border: 0;
	border-radius: var(--dp-radius-md);
	background: transparent;
	color: var(--dp-text-muted);
	font: inherit;
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-bold);
	cursor: pointer;
	align-self: flex-start;
}
.dp-nav__back:hover { background: var(--dp-surface-hover); color: var(--dp-text-primary); }
.dp-nav__title {
	display: flex;
	align-items: center;
	gap: var(--dp-space-2-5);
	height: 32px;
	margin: var(--dp-space-1) 0 0;
	padding: 0 var(--dp-space-2-5);
	color: var(--dp-text-primary);
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-bold);
}
.dp-nav__title .dp-ic { color: var(--dp-color-primary); }

/* ── 오른쪽 = 기능 ───────────────────────────────────────── */
.dp-rail {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--dp-space-2-5) 0;
	background: var(--dp-surface-base);
	border-left: 1px solid var(--dp-border-subtle);
}
.dp-rail__btn {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	width: var(--dp-rail-btn);
	height: var(--dp-rail-btn);
	padding: 0 2px;
	border: 0;
	border-radius: var(--dp-radius-lg);
	background: transparent;
	color: var(--dp-text-secondary);
	font: inherit;
	font-size: 10px;
	font-weight: var(--dp-weight-semibold);
	line-height: 1;
	letter-spacing: -.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dp-duration-fast) var(--dp-ease-out), color var(--dp-duration-fast) var(--dp-ease-out);
}
.dp-rail__btn .dp-ic { width: 20px; height: 20px; flex: none; }
.dp-rail__label { max-width: 100%; white-space: nowrap; overflow: hidden; }
.dp-rail__btn:hover { background: var(--dp-surface-hover); color: var(--dp-text-primary); }
.dp-rail__btn[aria-pressed="true"],
.dp-rail__btn[aria-expanded="true"],
.dp-rail__btn.is-active { background: var(--dp-color-primary-soft); color: var(--dp-color-primary-ink); }
.dp-rail__btn--primary,
.dp-rail__btn--primary:hover { background: var(--dp-color-primary); color: var(--dp-text-on-primary); }
.dp-rail__btn--primary:hover { background: var(--dp-color-primary-hover); }
.dp-rail__btn--ai,
.dp-rail__btn--ai:hover { background: var(--dp-gradient-secondary); color: var(--dp-text-on-primary); }
.dp-rail__btn--ai[aria-pressed="true"] { background: var(--dp-gradient-secondary); color: var(--dp-text-on-primary); box-shadow: 0 0 0 3px var(--dp-color-secondary-soft); }
.dp-rail__btn:disabled { opacity: .38; cursor: default; filter: saturate(.6); }
.dp-rail__btn:disabled:hover { background: transparent; color: var(--dp-text-secondary); }
.dp-rail__btn--ai:disabled,
.dp-rail__btn--ai:disabled:hover { background: var(--dp-gradient-secondary); color: var(--dp-text-on-primary); }
.dp-rail__btn:focus-visible { outline: none; box-shadow: var(--dp-ring-focus); }
.dp-rail__btn .dp-ev-cmt-count { position: absolute; top: 4px; right: 6px; margin: 0; }
.dp-rail__sep { flex: none; width: 36px; height: 1px; margin: var(--dp-space-1) 0; background: var(--dp-border-subtle); }
.dp-rail__spacer { flex: 1 1 auto; }
.dp-rail-off { display: none !important; }

/* 팝오버를 품은 버튼(버전 관리 · 내보내기) — 메뉴는 레일 왼쪽으로 뜬다. */
.dp-rail .dp-menu-wrap--rail,
.dp-rail .dp-version-dropdown--rail { position: relative; display: block; width: var(--dp-rail-btn); flex: none; }
.dp-rail .dp-menu-wrap--rail .dp-menu,
.dp-rail .dp-version-dropdown--rail .dp-version-menu {
	position: absolute;
	top: 0;
	right: calc(100% + 10px);
	left: auto;
	min-width: 240px;
	z-index: var(--dp-z-dropdown);
}
.dp-rail .dp-version-dropdown--rail .dp-version-menu { width: 300px; }
.dp-version-menu__head {
	margin: 0;
	padding: var(--dp-space-2) var(--dp-space-3) var(--dp-space-1);
	font-size: var(--dp-text-xs);
	font-weight: var(--dp-weight-bold);
	color: var(--dp-text-muted);
}

/* 레일이 대신 누르는 화면 머리 버튼(shell.js) — 원래 자리에선 숨긴다. */
.dp-moved-to-rail { display: none !important; }
/* 둥근 AI 런처는 레일이 대신한다. */
body.dp-appshell .dp-ai-launcher { display: none !important; }

/* ── 위 = 보기 ───────────────────────────────────────────── */
.dp-topbar__where { display: inline-flex; align-items: baseline; gap: var(--dp-space-2); min-width: 0; flex: 0 1 auto; }
.dp-topbar .dp-topbar__title { font-size: var(--dp-text-md); font-weight: var(--dp-weight-bold); color: var(--dp-text-primary); }
.dp-topbar__sub {
	min-width: 0;
	max-width: 320px;
	font-size: var(--dp-text-sm);
	font-weight: var(--dp-weight-semibold);
	color: var(--dp-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 상단바가 지금 위치를 보여 주므로 화면 머리의 같은 제목은 내린다(설명 한 줄은 남는다). */
body.dp-appshell:has(.dp-topbar__where) .dp-main > .dp-main__header h1,
body.dp-appshell:has(.dp-topbar__where) .dp-page-head__title { display: none; }
body.dp-appshell:has(.dp-topbar__where) .dp-main > .dp-main__header { margin-bottom: var(--dp-space-4); }

/* 설정 구역으로 건너뛸 때 상단바에 가리지 않게 */
body.dp-appshell [id^="dp-sec-"] { scroll-margin-top: calc(var(--dp-topbar-h) + var(--dp-space-4)); }

/* ── 데스크톱: 메뉴 왼쪽 상시 · 레일 오른쪽 상시 ─────────── */
@media (min-width: 721px) {
	body.dp-appshell { padding-left: var(--dp-shell-nav); padding-right: var(--dp-rail-w); }
	body.dp-appshell .dp-drawer.dp-nav {
		box-sizing: border-box; /* 테두리까지 메뉴 폭 안 — 본문 왼쪽 여백과 정확히 맞는다 */
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--dp-shell-nav);
		max-width: none;
		padding: 0;
		transform: none;
		visibility: visible;
		box-shadow: none;
		background: var(--dp-surface-base);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-right: 1px solid var(--dp-border-subtle);
		overflow: hidden;
		z-index: var(--dp-z-header);
		transition: width var(--dp-duration-base, 200ms) var(--dp-ease-out, ease);
	}
	body.dp-appshell .dp-drawer__close,
	body.dp-appshell .dp-drawer-overlay,
	body.dp-appshell .dp-topbar__menu,
	body.dp-appshell .dp-topbar__brand { display: none; }
	body.dp-appshell .dp-rail {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--dp-rail-w);
		z-index: var(--dp-z-header);
	}
	/* 공용 슬라이드 패널(AI · 사용법 등)은 레일 왼쪽, 상단바 아래에서 열린다. */
	body.dp-appshell .dp-side-panel:not(.dp-side-panel--stage) { top: var(--dp-topbar-h); right: var(--dp-rail-w); }
	/* 지면 패널(스타일·메시지)은 스테이지 오른쪽 끝 = 레일 바로 왼쪽. */
	body.dp-appshell .dp-stage--rail .dp-side-panel--stage { right: 0; }
	/* 자료 › 의뢰/라이브러리는 왼쪽 메뉴가 고른다 — 화면 안 탭 줄은 내린다. */
	body.dp-appshell:has([data-dp-nav-pane]) .dp-assets-tabs { display: none; }

	/* 접은 메뉴(64px) — 아이콘만. 그룹은 가는 선으로. */
	html.dp-nav-collapsed .dp-nav__inner { padding: var(--dp-space-3) var(--dp-space-2) var(--dp-space-2-5); }
	html.dp-nav-collapsed .dp-nav__head { flex-direction: column; gap: var(--dp-space-2); padding-left: 0; padding-right: 0; }
	html.dp-nav-collapsed .dp-nav__brand { flex: none; }
	html.dp-nav-collapsed .dp-nav__clinic,
	html.dp-nav-collapsed .dp-nav__label,
	html.dp-nav-collapsed .dp-nav__chip,
	html.dp-nav-collapsed .dp-nav__sub,
	html.dp-nav-collapsed .dp-nav__who { display: none; }
	html.dp-nav-collapsed .dp-nav__gh { height: 1px; margin: var(--dp-space-2) var(--dp-space-1-5); overflow: hidden; font-size: 0; background: var(--dp-border-subtle); }
	html.dp-nav-collapsed .dp-nav__item,
	html.dp-nav-collapsed .dp-nav__title { justify-content: center; padding: 0; }
	html.dp-nav-collapsed .dp-nav__back { align-self: center; }
	html.dp-nav-collapsed .dp-nav__account { flex-direction: column; padding-left: 0; padding-right: 0; }
}

/* ── 720px 이하: 메뉴는 ☰ 서랍, 레일은 화면 아래 막대 ────── */
@media (max-width: 720px) {
	body.dp-appshell { padding-bottom: 64px; }
	body.dp-appshell .dp-drawer.dp-nav { padding: 0; width: 290px; }
	body.dp-appshell .dp-drawer__close { top: 14px; right: 14px; }
	body.dp-appshell .dp-nav__collapse { display: none; }
	body.dp-appshell .dp-topbar__clinic,
	body.dp-appshell .dp-topbar__sub,
	body.dp-appshell .dp-topbar__sep { display: none; }
	body.dp-appshell .dp-topbar .dp-topbar__title { display: inline; font-size: var(--dp-text-sm); white-space: nowrap; }
	body.dp-appshell .dp-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: auto;
		height: 64px;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 2px;
		padding: 4px var(--dp-space-2);
		border-left: 0;
		border-top: 1px solid var(--dp-border-subtle);
		overflow-x: auto;
		z-index: var(--dp-z-header);
	}
	body.dp-appshell .dp-rail__btn { --dp-rail-btn: 52px; }
	body.dp-appshell .dp-rail .dp-menu-wrap--rail,
	body.dp-appshell .dp-rail .dp-version-dropdown--rail { --dp-rail-btn: 52px; }
	body.dp-appshell .dp-rail__sep { width: 1px; height: 32px; margin: 0 var(--dp-space-1); }
	body.dp-appshell .dp-rail__spacer { flex: 1 0 var(--dp-space-2); }
	/* 레일 메뉴는 막대 위로 화면 폭에 맞춰 뜬다. */
	body.dp-appshell .dp-rail .dp-menu-wrap--rail .dp-menu,
	body.dp-appshell .dp-rail .dp-version-dropdown--rail .dp-version-menu {
		position: fixed;
		top: auto;
		right: var(--dp-space-2);
		left: var(--dp-space-2);
		bottom: 72px;
		width: auto;
		min-width: 0;
	}
	body.dp-appshell .dp-stage { height: calc(100vh - var(--dp-topbar-h) - 64px); }
	body.dp-appshell .dp-stage--rail .dp-stage__body { flex-direction: row; }
	body.dp-appshell .dp-stage--rail .dp-side-panel--stage { right: 0; bottom: 0; }
	body.dp-appshell .dp-side-panel:not(.dp-side-panel--stage) { bottom: 64px; }
}

@media print {
	.dp-nav, .dp-rail { display: none !important; }
	body.dp-appshell { padding: 0 !important; }
}

/* 왼쪽 「지운 특집」 창(v0.35) — 행마다 「되살리기」가 늘 보인다(드롭다운은 마우스를 올려야 보였다). */
#dp-deleted-events .dp-deleted-list { list-style: none; margin: 0 0 var(--dp-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--dp-space-1); }
#dp-deleted-events .dp-version-row { display: flex; align-items: center; gap: var(--dp-space-3); padding: var(--dp-space-2-5) var(--dp-space-3); border: 1px solid var(--dp-border-subtle); border-radius: var(--dp-radius-lg); opacity: 1; cursor: default; }
#dp-deleted-events .dp-version-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#dp-deleted-events .dp-version-row__actions { display: inline-flex; }
@media (max-width: 720px) {
	/* 상단바는 가로로 밀린다 — 지금 위치 글자는 줄이지 않는다(「가격」 처럼 잘리지 않게). */
	body.dp-appshell .dp-topbar__where { flex: none; }
}