/*
 * 셸 시트 (ShowSheetAsync → fluent-dialog.tc-dialog.tc-dialog--{size}, references v5-overlays-services.md §15.4).
 * 폭은 클래스로만 정한다 — DialogOptions.Width는 ID 특이도의 <style>을 만들어 하단 시트 규칙을 이기므로 쓰지 않는다.
 * Fluent 번들(fluent-dialog[fuib]::part(dialog){width:600px})이 이 파일보다 뒤에 로드되므로 [fuib]를 붙여 특이도로 이긴다.
 * ≤600px 하단 시트 전환은 Shell CSS에서 480·768·1024 밖의 유일한 브레이크포인트다 (spec §4 다이얼로그 규칙).
 */

/* 폭: Small 400 / Medium 520 / Large 640 / XLarge 800 — 호스트 요소의 사용자 정의 속성이 shadow part로 상속된다. */
fluent-dialog[fuib].tc-dialog {
	--tc-dialog-w: 520px;
}

fluent-dialog[fuib].tc-dialog--small {
	--tc-dialog-w: 400px;
}

fluent-dialog[fuib].tc-dialog--medium {
	--tc-dialog-w: 520px;
}

fluent-dialog[fuib].tc-dialog--large {
	--tc-dialog-w: 640px;
}

fluent-dialog[fuib].tc-dialog--xlarge {
	--tc-dialog-w: 800px;
}

fluent-dialog[fuib].tc-dialog::part(dialog) {
	width: var(--tc-dialog-w);
	max-width: calc(100vw - var(--tc-space-7));
	border-radius: var(--tc-radius-xl);
}

/* 본문 패딩 20px (호스트 요소에 준 바깥 규칙이 웹 컴포넌트의 :host 패딩을 이긴다). 아래쪽은 ≤600px에서 홈 인디케이터 여백을 더한다. */
fluent-dialog[fuib].tc-dialog fluent-dialog-body[fuib] {
	--tc-dialog-pad: var(--tc-space-5);
	--tc-dialog-pad-end: var(--tc-dialog-pad);
	padding: var(--tc-dialog-pad) var(--tc-dialog-pad) var(--tc-dialog-pad-end);
}

/* 제목·푸터 part는 shadow 안에서 :host 패딩(--spacingVerticalXXL 24px)만큼 음수 여백을 주고 같은 양의 패딩으로 채워, 스크롤할 때
   sticky 배경이 본문 패딩까지 덮는다. 본문 패딩과 같은 값으로 맞춘다 — 24px 그대로면 푸터가 본문 아래로 4px 넘쳐 shadow <dialog>
   (overflow: auto)가 모든 시트에 세로 스크롤바를 그린다(그 스크롤바가 520px 시트의 본문 폭을 Fluent 푸터 컨테이너 질의 480px 아래로
   좁혀 푸터 위 여백도 16px 늘렸다). part 안 내용의 자리는 그대로이고, 긴 시트는 여전히 <dialog>가 스크롤한다. */
fluent-dialog[fuib].tc-dialog fluent-dialog-body[fuib]::part(title) {
	margin-block-start: calc(var(--tc-dialog-pad) * -1);
	padding-block-start: var(--tc-dialog-pad);
}

fluent-dialog[fuib].tc-dialog fluent-dialog-body[fuib]::part(actions) {
	margin-block-end: calc(var(--tc-dialog-pad-end) * -1);
	padding-block-end: var(--tc-dialog-pad-end);
}

/* 제목: title3 17/22 600 */
fluent-dialog[fuib].tc-dialog fluent-dialog-body > div[slot="title"] {
	font-size: var(--tc-fs-title3);
	line-height: var(--tc-lh-title3);
	font-weight: var(--tc-fw-semibold);
	letter-spacing: var(--tc-tracking-tight);
}

/* 푸터 (DialogFrame): [FooterStart …… ] [Cancel] [Primary] 오른쪽 정렬. */
fluent-dialog[fuib].tc-dialog fluent-dialog-body > div[slot="action"] {
	width: 100%;
}

.tc-dialog-actions {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--tc-space-2);
	width: 100%;
}

.tc-dialog-actions__start {
	display: flex;
	align-items: center;
	gap: var(--tc-space-2);
	margin-inline-end: auto;
}

/* 확인창 메시지: Razor 텍스트의 \n을 줄바꿈으로 살린다. */
.tc-confirm-message {
	margin: 0;
	white-space: pre-line;
}

/* ≤600px: 전체 폭 하단 시트 (위쪽 반경 16px, 아래 정렬, 홈 인디케이터 여백). */
@media (max-width: 600px) {
	fluent-dialog[fuib].tc-dialog::part(dialog) {
		width: 100%;
		max-width: 100%;
		max-height: calc(100dvh - var(--tc-space-6));
		margin: auto 0 0;
		border-radius: var(--tc-radius-xl) var(--tc-radius-xl) 0 0;
	}

	fluent-dialog[fuib].tc-dialog fluent-dialog-body[fuib] {
		--tc-dialog-pad-end: calc(var(--tc-dialog-pad) + env(safe-area-inset-bottom));
	}
}