body {
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: var(--body-font);
	font-size: var(--type-ramp-base-font-size);
	line-height: var(--type-ramp-base-line-height);
	font-weight: var(--font-weight);
	color: var(--neutral-foreground-rest);
	background: var(--neutral-fill-layer-rest);
}

:root {
	scrollbar-color: var(--neutral-stroke-rest) var(--neutral-layer-1);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

::-webkit-scrollbar-track {
	background: var(--neutral-layer-1);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--neutral-stroke-rest);
	border-radius: 10px;
	border: 3px solid var(--neutral-layer-1);
}

	::-webkit-scrollbar-thumb:hover {
		background-color: var(--neutral-stroke-hover);
	}

/* ============================================================
   Shared Dialog Pattern
   ============================================================ */

/* FluentDialogHeader renders a FluentTooltip as a sibling of the dismiss button
   to provide a hover label for the close icon. This tooltip element occupies a
   flex slot in the header's FluentStack and leaves an empty gap next to the
   close button. The real rendered element is <div class="fluent-dialog-header">
   (NOT <fluent-dialog-header>), so the selector must target the class. */
.fluent-dialog-header fluent-tooltip {
	display: none !important;
}

/* Defensive fallback for any tooltip inside the dialog surface. */
fluent-dialog fluent-tooltip {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
	pointer-events: none;
}

/* ============================================================
   FluentPersona 이미지 비율 보존
   ------------------------------------------------------------
   FluentUI 기본 CSS 는 .fluent-persona .initials img 에 aspect-ratio: 1/1 을
   강제하고 img 는 기본 object-fit: fill 이라 비정사각 이미지가 찌그러진다.
   원본 비율을 유지하면서 정사각형 프레임 안쪽을 채우도록 object-fit: cover
   로 덮어쓴다. 인라인 style(max-width/max-height) 때문에 !important 필요.
   프로젝트 전역 persona 이미지(profile/space picture 등)에 적용된다.
   ============================================================ */
.fluent-persona .initials img {
	object-fit: cover !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
}

/* Strip default FluentInputFile drop zone chrome (dashed border, bg, padding,
   grid-gap). The default markup centers .inputfile-content within its grid cell,
   which leaves the user's ChildContent visually smaller than the outer container.
   We force the content + label to stretch to fill the cell so the drop zone
   matches the container's full size. */
.fluent-inputfile-container.upload-input {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	grid-gap: 0 !important;
	width: 100%;
}

.fluent-inputfile-container.upload-input .inputfile-content {
	align-self: stretch !important;
	justify-self: stretch !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	text-align: initial !important;
}

.fluent-inputfile-container.upload-input .upload-drop-zone {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.fluent-inputfile-container.upload-input label,
.fluent-inputfile-container.upload-input a {
	color: inherit !important;
	text-decoration: none !important;
}

.fluent-inputfile-container.upload-input .inputfile-progress {
	display: none !important;
}

.tc-dialog-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.tc-dialog-body .tc-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tc-dialog-body .tc-section-title {
	font-size: var(--type-ramp-minus-1-font-size);
	font-weight: 600;
	line-height: var(--type-ramp-plus-1-line-height);
	color: var(--neutral-foreground-hint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--neutral-stroke-divider);
	margin: 0;
}

.tc-dialog-body .tc-section-desc {
	font-size: var(--type-ramp-minus-1-font-size);
	color: var(--neutral-foreground-hint);
	margin: -6px 0 0 0;
}

.tc-dialog-body .tc-error {
	color: var(--error);
	font-size: var(--type-ramp-minus-1-font-size);
	font-weight: 500;
}

.tc-dialog-body .tc-info {
	color: var(--success);
	font-size: var(--type-ramp-minus-1-font-size);
	font-weight: 500;
}

/* Field wrapper that keeps label glued to its input (neutralizes parent gap) */
.tc-dialog-body .tc-field {
	display: flex;
	flex-direction: column;
}

/* Form-like layout with picture at top centered */
.tc-dialog-body .tc-form-with-picture {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
}

.tc-dialog-body .tc-form-picture-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.tc-dialog-body .tc-form-fields-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Editable picture with hover camera overlay */
.tc-dialog-body .tc-picture-editable {
	position: relative;
	cursor: pointer;
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
	transition: opacity 0.15s ease;
}

.tc-dialog-body .tc-picture-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.15s ease;
	color: white;
}

.tc-dialog-body .tc-picture-editable:hover .tc-picture-overlay {
	opacity: 1;
}

/* List row pattern */
.tc-dialog-body .tc-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: 320px;
	overflow-y: auto;
}

.tc-dialog-body .tc-list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: var(--control-corner-radius);
	transition: background-color 0.1s ease;
}

.tc-dialog-body .tc-list-row:hover {
	background-color: var(--neutral-fill-secondary-hover);
}

.tc-dialog-body .tc-list-row + .tc-list-row {
	border-top: 1px solid var(--neutral-stroke-divider);
}

.tc-dialog-body .tc-list-row-clickable {
	cursor: pointer;
}

.tc-dialog-body .tc-list-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tc-dialog-body .tc-list-primary {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-weight: 600;
	font-size: var(--type-ramp-base-font-size);
	color: var(--neutral-foreground-rest);
}

.tc-dialog-body .tc-list-secondary {
	font-size: var(--type-ramp-minus-1-font-size);
	color: var(--neutral-foreground-hint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tc-dialog-body .tc-list-badge {
	font-size: var(--type-ramp-minus-2-font-size);
}

/* Card-style list row (bordered) */
.tc-dialog-body .tc-card-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--neutral-stroke-divider);
	border-radius: var(--control-corner-radius);
	cursor: pointer;
	transition: background-color 0.1s ease, border-color 0.1s ease;
	margin-bottom: 6px;
}

.tc-dialog-body .tc-card-row:hover {
	background-color: var(--neutral-fill-secondary-hover);
	border-color: var(--neutral-stroke-rest);
}

/* Empty state */
.tc-dialog-body .tc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 16px;
	color: var(--neutral-foreground-hint);
	text-align: center;
}

/* Search + count row */
.tc-dialog-body .tc-search-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tc-dialog-body .tc-search-row .tc-search-count {
	font-size: var(--type-ramp-minus-1-font-size);
	color: var(--neutral-foreground-hint);
	white-space: nowrap;
}

/* Footer actions */
.tc-dialog-body .tc-footer-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--neutral-stroke-divider);
}

.tc-dialog-body .tc-footer-spacer {
	flex: 1;
}

/* Toggleable permission/setting row (compact, clickable) */
.tc-dialog-body .tc-toggle-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 4px;
	border-radius: var(--control-corner-radius);
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.tc-dialog-body .tc-toggle-row:hover {
	background-color: var(--neutral-fill-secondary-hover);
}

.tc-dialog-body .tc-toggle-content {
	flex: 1;
	min-width: 0;
}

.tc-dialog-body .tc-toggle-name {
	font-weight: 500;
	font-size: var(--type-ramp-base-font-size);
	color: var(--neutral-foreground-rest);
	line-height: 1.2;
}

.tc-dialog-body .tc-toggle-desc {
	font-size: var(--type-ramp-minus-1-font-size);
	color: var(--neutral-foreground-hint);
	line-height: 1.2;
	margin-top: 1px;
}

.tc-dialog-body .tc-section .tc-toggle-row + .tc-toggle-row {
	margin-top: -4px;
}

/* Space item card (Your Spaces dialog) */
.tc-dialog-body .space-item-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 400px;
	overflow-y: auto;
}

.tc-dialog-body .space-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--neutral-stroke-divider);
	border-radius: var(--control-corner-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.1s ease, background-color 0.1s ease;
}

.tc-dialog-body .space-item:hover {
	background-color: var(--neutral-fill-secondary-hover);
	border-color: var(--neutral-stroke-rest);
}

.tc-dialog-body .space-item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tc-dialog-body .space-item-name {
	font-size: var(--type-ramp-plus-1-font-size);
	font-weight: 600;
	color: var(--neutral-foreground-rest);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tc-dialog-body .space-item-domain {
	font-size: var(--type-ramp-minus-1-font-size);
	color: var(--accent-foreground-rest);
	font-family: var(--monospace-font, ui-monospace, SFMono-Regular, Menlo, monospace);
	line-height: 1.25;
}

.tc-dialog-body .space-item-desc {
	font-size: var(--type-ramp-minus-1-font-size);
	color: var(--neutral-foreground-hint);
	line-height: 1.35;
	margin-top: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.tc-dialog-body .space-item-chevron {
	flex-shrink: 0;
}

.tc-dialog-body .space-item.skeleton-item {
	pointer-events: none;
	cursor: default;
}

.tc-dialog-body .space-item.skeleton-item:hover {
	background-color: transparent;
	border-color: var(--neutral-stroke-divider);
}