/* SNAP HUB — Figma Component System primitives
 * Source basis: Component System board in 컴포넌트(2).svg + matching data in 스냅허브(1).fig.
 * Scope: shared reusable UI primitives.
 */

.fig-ui-button {
	display: inline-flex;
	box-sizing: border-box;
	min-width: 112px;
	height: 46px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font: 600 14px/20px var(--font-body);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.fig-ui-button--compact {
	min-width: 0;
	height: 40px;
	padding-inline: 16px;
	font-size: 13px;
}

.fig-ui-button--primary {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

.fig-ui-button--outline-primary {
	border-color: var(--primary);
	color: var(--primary);
}

.fig-ui-button:disabled,
.fig-ui-button[aria-disabled="true"] {
	border-color: #e3e3e3;
	background: #f7f7f7;
	color: #c7c7c7;
	cursor: not-allowed;
}

.fig-ui-button:focus-visible,
.fig-ui-more-link:focus-visible,
.fig-ui-input:focus-visible,
.fig-ui-toggle-input:focus-visible + .fig-ui-toggle {
	outline: 2px solid rgba(255,85,85,.32);
	outline-offset: 2px;
}

/* Touch toggles must not flash a focus halo after activation.
 * This belongs to the shared Figma toggle component, not individual pages. */
@media (hover: none) and (pointer: coarse) {
	.fig-ui-toggle-input:focus + .fig-ui-toggle,
	.fig-ui-toggle-input:focus-visible + .fig-ui-toggle {
		outline: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	/* Figma Component System: DEFAULT -> HOVER/ACTIVE.
	 * Generic hover intentionally excludes the selected/CTA primary variant so
	 * the CTA keeps a red surface with white text instead of inheriting red text. */
	.fig-ui-button:not(.fig-ui-button--primary):not(:disabled):not([aria-disabled="true"]):hover {
		border-color: var(--primary);
		color: var(--primary);
	}

	.fig-ui-button--primary:not(:disabled):not([aria-disabled="true"]):hover {
		border-color: var(--primary);
		background: var(--primary);
		color: #fff;
	}

	.fig-ui-button--outline-primary:not(:disabled):not([aria-disabled="true"]):hover {
		background: var(--primary-surface);
	}
}

.fig-ui-label {
	display: inline-flex;
	min-height: 25px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 999px;
	font: 600 11px/17px var(--font-body);
	white-space: nowrap;
}


.fig-ui-label--status {
	min-height: 18px;
	padding: 0 7px;
	font-size: 10px;
	line-height: 14px;
}

.fig-ui-label--dark {
	background: #111;
	color: #fff;
}

.fig-ui-label--primary {
	background: var(--primary);
	color: #fff;
}

.fig-ui-label--soft {
	background: var(--primary-surface);
	color: var(--primary);
}

.fig-ui-field {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.fig-ui-field__label {
	color: var(--ink);
	font: 600 14px/18px var(--font-body);
	letter-spacing: .01em;
}

.fig-ui-input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #c5c6ca;
	border-radius: 10px;
	background: #fff;
	color: #222;
	font: 400 16px/24px var(--font-body);
	outline: 0;
}

.fig-ui-input::placeholder {
	color: #b4b4b4;
}

.fig-ui-input:focus {
	border-color: var(--primary);
}

.fig-ui-input:disabled,
.fig-ui-input[readonly] {
	border-color: #dedede;
	background: #f5f5f5;
	color: #8a8a8a;
}

.fig-ui-input-action {
	display: grid;
	grid-template-columns: minmax(0,1fr) 112px;
	gap: 10px;
	min-width: 0;
}

.fig-ui-input-action .fig-ui-button {
	width: 100%;
	min-width: 0;
	height: 48px;
	border-radius: 10px;
}

.fig-ui-toggle-row {
	position: relative;
	display: flex;
	min-height: 74px;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}

.fig-ui-toggle-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.fig-ui-toggle-copy strong {
	font: 600 14px/20px var(--font-body);
}

.fig-ui-toggle-copy small {
	color: var(--text-tertiary);
	font: 400 12px/18px var(--font-body);
}

.fig-ui-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.fig-ui-toggle {
	position: relative;
	flex: 0 0 42px;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #d8d8d8;
	transition: background-color .16s ease;
}

.fig-ui-toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
	transition: transform .16s ease;
}

.fig-ui-toggle-input:checked + .fig-ui-toggle {
	background: var(--primary);
}

.fig-ui-toggle-input:checked + .fig-ui-toggle::after {
	transform: translateX(18px);
}

.fig-ui-more-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--primary);
	color: var(--primary);
	font: 500 13px/18px var(--font-body);
	text-decoration: none;
	white-space: nowrap;
}

.fig-ui-more-link::after {
	content: "→";
	font-size: 16px;
	line-height: 1;
}

.fig-ui-meta {
	color: var(--text-tertiary);
	font: 400 12px/18px var(--font-body);
}

@media (max-width: 1024px) {
	.fig-ui-button {
		height: 44px;
		padding-inline: 16px;
		border-radius: 9px;
		font-size: 14px;
	}

	.fig-ui-button--compact {
		height: 38px;
		padding-inline: 13px;
		font-size: 12px;
	}

	.fig-ui-input-action {
		grid-template-columns: minmax(0,1fr) 96px;
	}

	.fig-ui-input-action .fig-ui-button {
		height: 48px;
	}
}

/* Studio category tag — shared across home, list and detail. */
.studio-tag {
	box-sizing: border-box;
	display: inline-flex;
	width: auto;
	min-width: 0;
	height: 28px;
	align-items: center;
	justify-content: center;
	padding: 0 11px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	background: var(--primary-surface);
	color: var(--primary);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
	white-space: nowrap;
}

/* Surface variants for cards that alternate between white and brand-pale backgrounds. */
.studio-tag--surface-pink {
	background: var(--primary-surface);
	border: 1px solid transparent;
}

.studio-tag--surface-white {
	background: #fff;
	border: 1px solid var(--primary);
}

@media (max-width: 1024px) {
	.studio-tag {
		height: 25px;
		padding-inline: 9px;
		font-size: 12px;
	}

	.studio-tag--compact {
		height: 21px;
		padding-inline: 7px;
		font-size: 11px;
		line-height: 21px;
		letter-spacing: -.02em;
	}
}