/*
 * 공통 슬라이드 패널 셸 (.dp-side-panel) — 단일 원본.
 *
 * AI 대화창·메시지·수정요청(가격표/특집)·디자인 패널이 전부 이 셸을 쓴다.
 * 전에는 다섯 곳이 각자 하드코딩해 폭 5가지(440·344·280…)·z 6가지(5~10000)·
 * 팔레트 3벌로 갈라졌고, 수정요청은 두 템플릿에 복붙되어 z-index 만 다른
 * 두 벌이 살았다. 셸(위치·폭·피부·전환)은 여기서만 정한다 — 패널별 파일에는
 * 내용물 스타일만 남긴다.
 *
 * 독립 파일인 이유: 특집 미리보기(iframe)는 frontend.css 를 싣지 않는다.
 * 셸만 담은 이 파일을 frontend 묶음·두 미리보기·에이전트 화면에 각각 싣는다.
 */

.dp-side-panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 344px;
	max-width: 88vw;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: var(--dp-neutral-0);
	border-left: 1px solid var(--dp-border-subtle);
	/* 그림자는 열렸을 때만 — 닫힌 패널은 화면 밖(translateX 100%)에 있어도 그림자가 왼쪽으로 번져
	   미리보기 오른쪽 가장자리에 회색 띠를 깔았다(스크롤바가 그 위에 올라 칙칙해 보였다). */
	--dp-panel-shadow: -8px 0 28px color-mix(in srgb, var(--dp-neutral-900) 14%, transparent);
	box-shadow: none;
	z-index: var(--dp-z-panel, 1200);
	transform: translateX(100%);
	transition: transform var(--dp-duration-base, 200ms) var(--dp-ease-out, ease),
		box-shadow var(--dp-duration-base, 200ms) var(--dp-ease-out, ease);
}
.dp-side-panel.is-open { transform: none; box-shadow: var(--dp-panel-shadow); }
/* AI 도우미만 조금 넓다 — 답변에 가격표(6열)가 실려 온다.
   나머지 6종 패널은 공통 344px 그대로. */
.dp-side-panel.dp-agent-panel { width: 408px; }
/* [hidden] 처리는 base.css 전역 규칙이 담당한다. */

/* 스테이지 안 변형 — 상단바를 덮지 않고 미리보기 영역만 덮는다.
   (메시지·디자인 패널. iframe 안 수정요청과 뜨는 자리를 맞추려는 의도) */
.dp-side-panel--stage {
	position: absolute;
	z-index: 6;
}

/* 표준 헤더 — 제목 + 오른쪽 ✕. 52px 언저리로 통일된다. */
.dp-side-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 16px 14px 18px;
	border-bottom: 1px solid var(--dp-border-subtle);
	flex: 0 0 auto;
}
.dp-side-panel__head strong { font-size: 15px; color: var(--dp-text-primary); }
.dp-side-panel__x {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--dp-text-muted);
	cursor: pointer;
	padding: 0;
}
.dp-side-panel__x:hover { background: var(--dp-neutral-100); }
.dp-side-panel__x:hover { color: var(--dp-text-secondary); }

@media (prefers-reduced-motion: reduce) {
	.dp-side-panel { transition: none; }
}

/* ── 머리 안 공통부 — 제목 타이포·기능버튼 묶음(__tools)·아이콘 버튼 ── */
.dp-side-panel__head strong { font-size: var(--dp-text-md, 15px); font-weight: var(--dp-weight-bold, 700); }
.dp-side-panel__tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
/* __x 기본은 margin-left:auto — tools 가 있으면 auto 가 둘이 되어 사이가 벌어지므로 고정값으로. */
.dp-side-panel__tools ~ .dp-side-panel__x { margin-left: 8px; }
.dp-side-panel__icbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--dp-text-muted); cursor: pointer; }
.dp-side-panel__icbtn:hover { background: var(--dp-neutral-100); color: var(--dp-text-primary); }

/* ── 탭 — 탭 전환이 있는 패널의 둘째 줄(머리 바로 아래) ── */
.dp-side-panel__tabs { display: flex; gap: 4px; padding: 6px 14px 0; border-bottom: 1px solid var(--dp-border-subtle); flex: 0 0 auto; }
.dp-side-panel__tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; padding: 8px 4px 10px; font: inherit; font-size: 13px; color: var(--dp-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.dp-side-panel__tab.is-active { color: var(--dp-text-primary); font-weight: 600; border-bottom-color: var(--dp-color-primary); }
/* 탭이 4개쯤 되면 촘촘하게(메시지 패널). */
.dp-side-panel__tabs--dense { gap: 0; }
.dp-side-panel__tabs--dense .dp-side-panel__tab { font-size: 12px; padding: 8px 2px 10px; }

/* ── 본문 — 유일한 스크롤 영역. 머리/탭/하단바는 고정. ── */
.dp-side-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 18px; }

/* ── 하단바 — 스크롤과 무관하게 항상 보이는 액션 줄(저장·전송 등) ── */
.dp-side-panel__foot { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 14px; background: var(--dp-neutral-0); border-top: 1px solid var(--dp-border-subtle); }
.dp-side-panel__foot--stack { display: block; }

/* ── 하단바 표준 버튼 ── */
.dp-side-panel__btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; padding: 8px 16px; background: var(--dp-color-primary); color: var(--dp-text-on-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dp-side-panel__btn:hover { background: var(--dp-color-primary-hover); }
.dp-side-panel__btn:disabled { opacity: .5; cursor: default; }
.dp-side-panel__btn--ghost { background: none; color: var(--dp-text-muted); padding: 8px 10px; font-weight: 500; }
.dp-side-panel__btn--ghost:hover { background: none; color: var(--dp-text-primary); text-decoration: underline; }
.dp-side-panel__btn--block { width: 100%; }

@media print {
	.dp-side-panel { display: none !important; }
}