/* SNAP HUB — My Page shared screens. Single source of truth for desktop and responsive page styles. */

/* ==========================================================================
   Base
   ========================================================================== */

/* SNAP HUB — My Page
 * Layout contract: main > .fig-sub-container > .fig-form-shell > .fig-form-panel.
 * The shell/panel geometry is shared with Studio Register through studio-pages.css.
 * Page-specific rules below only describe My Page business components.
 */
.page-mypage {
	background: #fff;
}

.mypage-main {
	min-height: 680px;
	padding-top: 80px;
	background: #fff;
}


.mypage-form-shell {
	font-family: var(--font-body);
}

.mypage-tabs + .mypage-section,
.mypage-tabs + .profile-form > .mypage-section:first-child {
	margin-top: 31px;
}

.mypage-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
}

.mypage-section-head h2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.mypage-section-head p {
	margin-top: 5px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 21px;
}

.studio-manage-list,
.management-request-list {
	display: grid;
	width: 100%;
	gap: 14px;
}

/* Accounts are planned to manage only a small bounded number of studios.
 * Keep the collection in the normal document flow instead of introducing a
 * nested scroll area. */
.studio-manage-list {
	box-sizing: border-box;
}

.studio-manage-card,
.management-request-card,
.manage-action-list,
.studio-summary-list {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
}

.studio-manage-card {
	display: grid;
	grid-template-columns: 220px minmax(0,1fr);
	height: 168px;
	align-items: stretch;
	overflow: hidden;
}

.studio-manage-card__image,
.favorite-studio-card__image {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: #f5f5f5;
}

.studio-manage-card__image img,
.favorite-studio-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.studio-manage-card__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	padding: 15px 24px;
}

.studio-manage-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.studio-manage-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.studio-manage-card__interest {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--primary);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

.studio-manage-card__interest::before {
	content: "\f004";
	color: var(--primary);
	font: var(--fa-font-solid);
	font-size: 14px;
	line-height: 1;
}

.studio-manage-card__interest em {
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

.studio-manage-card h3 {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.studio-manage-card__description {
	margin-top: 6px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.studio-manage-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}

.studio-manage-card__actions {
	display: flex;
	gap: 10px;
}

.studio-manage-card__updated {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

.management-request-card {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	align-items: center;
	gap: 28px;
	padding: 16px 20px;
}

.management-request-card__main {
	min-width: 0;
}

.management-request-card__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.management-request-card h3 {
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.management-request-card__location {
	margin-top: 4px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.management-request-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 22px;
	margin-top: 8px;
}

.management-request-card__meta > div {
	display: flex;
	gap: 7px;
	min-width: 0;
}

.management-request-card__meta dt {
	color: var(--text-tertiary);
	font-size: 12px;
	line-height: 19px;
}

.management-request-card__meta dd {
	color: var(--text-secondary);
	font-size: 12px;
	line-height: 19px;
}

.management-request-card__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: max-content;
}


.studio-status-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.studio-status-panel__copy {
	display: grid;
	gap: 5px;
}

.studio-status-panel__label {
	color: var(--text-tertiary);
	font-size: 12px;
	line-height: 18px;
}

.studio-status-panel strong {
	font-size: 20px;
	line-height: 28px;
}

.studio-status-panel small {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

/* Studio visibility: one page-level state controls both status indicators. */
.page-mypage--studio.studio-visibility--public .studio-visibility-text {
	color: var(--primary);
}

.page-mypage--studio.studio-visibility--private .studio-visibility-text {
	color: var(--text-secondary);
}

.page-mypage--studio.studio-visibility--private .studio-visibility-label {
	background: #f0f1f3;
	color: var(--text-secondary);
}

.manage-action-list,
.studio-summary-list {
	overflow: hidden;
}

.manage-action-row {
	display: grid;
	grid-template-columns: 54px minmax(0,1fr) auto;
	align-items: center;
	gap: 20px;
	min-height: 108px;
	padding: 18px 24px;
}

.manage-action-row + .manage-action-row {
	border-top: 1px solid var(--line);
}

.manage-action-row__number {
	color: var(--primary);
	font: 700 14px/20px var(--font-inter);
}

.manage-action-row strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.manage-action-row p {
	margin-top: 5px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

/* Reusable My Page `more` interaction. Geometry follows the approved Figma component used by studio management links. */
.fig-ui-more-link--mypage-motion {
	--mypage-more-width: 137px;
	--mypage-more-line-width: 124px;
	--mypage-more-shift: 13px;
	--mypage-more-arrow-width: 14px;
	--mypage-more-arrow-height: 13px;
	position: relative;
	display: block;
	width: var(--mypage-more-width);
	min-width: var(--mypage-more-width);
	height: 26px;
	padding: 0 0 6px;
	border-bottom: 0;
}

.fig-ui-more-link--mypage-motion::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--mypage-more-line-width);
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transition: width .48s var(--ease-more);
}

.fig-ui-more-link--mypage-motion::after {
	content: "";
	position: absolute;
	left: calc(var(--mypage-more-line-width) - var(--mypage-more-arrow-width));
	top: 2px;
	width: var(--mypage-more-arrow-width);
	height: var(--mypage-more-arrow-height);
	background: url("../svg/common/icon-section-more-arrow-figma.svg") center / contain no-repeat;
	transition: transform .48s var(--ease-more);
}

.fig-ui-more-link--mypage-motion:focus-visible::before {
	width: var(--mypage-more-width);
}

.fig-ui-more-link--mypage-motion:focus-visible::after {
	transform: translateX(var(--mypage-more-shift));
}

@media (hover: hover) and (pointer: fine) {
	.fig-ui-more-link--mypage-motion:hover::before {
		width: var(--mypage-more-width);
	}

	.fig-ui-more-link--mypage-motion:hover::after {
		transform: translateX(var(--mypage-more-shift));
	}
}

.studio-summary-list > div {
	display: grid;
	grid-template-columns: 180px minmax(0,1fr);
	gap: 24px;
	padding: 17px 22px;
}

.studio-summary-list > div + div {
	border-top: 1px solid var(--line);
}

.studio-summary-list dt {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.studio-summary-list dd {
	font-size: 14px;
	line-height: 20px;
}

.mypage-page-actions {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.mypage-page-actions .fig-ui-button {
	min-width: 160px;
}

.mypage-page-actions--studio-manage {
	gap: 12px;
}

.mypage-page-actions--studio-manage form {
	margin: 0;
}

.profile-form {
	max-width: 100%;
}

.profile-field-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 22px 24px;
}

.profile-settings {
	width: 100%;
	border-top: 1px solid var(--line);
}

.profile-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	width: min(560px,100%);
	margin: 39px auto 0;
}

.profile-actions .fig-ui-button {
	flex: 1 1 0;
}


/* Operational states / favorites / account verification. */
.mypage-empty-state {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 34px 24px;
	border: 1px dashed #dcdcdc;
	border-radius: 14px;
	background: #fafafa;
	text-align: center;
}

.mypage-empty-state--compact {
	padding-block: 28px;
}

.mypage-empty-state__icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 50%;
	background: var(--primary-surface);
	color: var(--primary);
	font-size: 16px;
}

.mypage-empty-state h3 {
	margin-top: 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.mypage-empty-state p {
	max-width: 480px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.mypage-empty-state .fig-ui-button {
	margin-top: 7px;
}


.mypage-empty-state__icon::before {
	display: block;
	font: var(--fa-font-regular);
	font-size: 17px;
	line-height: 1;
}

.mypage-empty-state__icon--favorite::before {
	content: "\f004";
}

.mypage-empty-state__icon--studio::before {
	content: "\f1ad";
}

.mypage-empty-state__icon--request::before {
	content: "\f15c";
}

.favorite-studio-list {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 14px;
}

.favorite-studio-card {
	display: grid;
	grid-template-columns: 178px minmax(0,1fr);
	width: 100%;
	height: 178px;
	min-width: 0;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
}

.favorite-studio-card__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	padding: 18px 20px;
}

.favorite-studio-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.favorite-studio-card__identity {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 10px;
}

.favorite-studio-card__avatar {
	display: grid;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	place-items: center;
	overflow: hidden;
	border-radius: 50%;
}

.favorite-studio-card__identity-copy {
	min-width: 0;
}

.favorite-studio-card__identity-copy h3 {
	margin-top: 0;
}

.favorite-studio-card__identity-copy .fig-ui-label {
	margin-top: 4px;
}

.favorite-studio-card__remove {
	display: grid;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--primary);
	cursor: pointer;
}

.favorite-studio-card__remove::before {
	content: "\f004";
	font: var(--fa-font-solid);
	font-size: 18px;
	line-height: 1;
	transition: transform .16s var(--ease-out), opacity .16s var(--ease-out);
}

.favorite-studio-card__remove:focus-visible {
	outline: 2px solid rgba(255,85,85,.32);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.favorite-studio-card__remove:hover::before {
		transform: scale(1.08);
	}
}

.favorite-studio-card h3 {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.favorite-studio-card h3 a {
	color: inherit;
	text-decoration: none;
}

.favorite-studio-card p {
	margin-top: 5px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.favorite-studio-card__actions {
	margin-top: 14px;
}

.profile-verification-panel {
	margin-top: 22px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fafafa;
}

.profile-verification-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 17px;
}

.profile-verification-panel__head strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.profile-verification-panel__head p,
.profile-withdraw-row p {
	margin-top: 4px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 22px;
}

.profile-verification-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 18px;
}

.profile-verification-code {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	gap: 8px;
}

.profile-verification-code__input {
	position: relative;
	min-width: 0;
}

.profile-verification-code__input .fig-ui-input {
	padding-right: 64px;
}

.profile-verification-code__timer {
	position: absolute;
	top: 50%;
	right: 16px;
	color: var(--primary);
	font: 600 12px/18px var(--font-inter);
	transform: translateY(-50%);
}

.profile-verification-panel__helper {
	margin-top: 10px;
	color: var(--primary);
	font-size: 12px;
	line-height: 18px;
}

.profile-withdraw-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
}


.profile-withdraw-button {
	flex: 0 0 auto;
	padding: 6px 2px;
	border: 0;
	background: transparent;
	color: #555;
	font: 500 14px/20px var(--font-inter);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}

.profile-withdraw-button:hover,
.profile-withdraw-button:focus-visible {
	color: var(--primary);
}

.profile-withdraw-button:focus-visible {
	outline: 2px solid rgba(255, 72, 72, .22);
	outline-offset: 3px;
}

.profile-form + .profile-account-section {
	margin-top: 20px;
}

/* Member profile image is account-level data and is managed only in My Info. */
.member-profile-photo-field {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}

.member-profile-photo-field__preview {
	position: relative;
	width: 88px;
	height: 88px;
	flex: 0 0 88px;
}

.member-profile-photo-field__preview img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.member-profile-photo-field__delete {
	position: absolute;
	top: 2px;
	right: 0;
	display: grid;
	width: 20px;
	height: 20px;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent url("../svg/register/profile-delete.svg") center/20px 20px no-repeat;
	cursor: pointer;
}

.member-profile-photo-field__delete span {
	display: none;
}

.member-profile-photo-field__empty {
	position: absolute;
	inset: 0;
	display: none;
	grid-template-rows: auto auto;
	place-content: center;
	justify-items: center;
	gap: 6px;
	border: 1px dashed var(--primary-border);
	border-radius: 50%;
	background: #fff;
	color: var(--primary);
	cursor: pointer;
}

.member-profile-photo-field__empty-visual {
	position: relative;
	display: block;
	width: 28px;
	height: 26px;
	transform: translateY(-1px);
}

.member-profile-photo-field__empty-icon {
	display: block;
	width: 26px;
	height: 26px;
	background: currentColor;
	-webkit-mask: url("../svg/mypage/icon-profile-photo.svg") center/contain no-repeat;
	mask: url("../svg/mypage/icon-profile-photo.svg") center/contain no-repeat;
}

.member-profile-photo-field__empty small {
	color: var(--primary);
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	text-align: center;
	white-space: nowrap;
}

.member-profile-photo-field__shutter {
	position: absolute;
	top: 1px;
	right: -1px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255,85,85,.55);
	opacity: 0;
	pointer-events: none;
}

.member-profile-photo-field__shutter.is-active {
	animation: member-profile-shutter-flash .42s ease-out 1;
}

@keyframes member-profile-shutter-flash {
	0% { opacity: 0; transform: scale(.35); box-shadow: 0 0 0 0 rgba(255,85,85,.5); }
	24% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 5px rgba(255,85,85,.24); }
	100% { opacity: 0; transform: scale(1.55); box-shadow: 0 0 0 10px rgba(255,85,85,0); }
}

.member-profile-photo-field__empty 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;
}

.member-profile-photo-field__preview.is-empty img,
.member-profile-photo-field__preview.is-empty .member-profile-photo-field__delete {
	display: none;
}

.member-profile-photo-field__preview.is-empty .member-profile-photo-field__empty {
	display: grid;
}

.member-profile-photo-field__empty:focus-within {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.member-profile-account {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.member-profile-account__member-no {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.member-profile-account__member-no strong {
	min-width: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.member-profile-account__label {
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

.member-profile-account__provider {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.member-profile-account__provider-logo {
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	max-width: none;
	padding: 3px;
	flex: 0 0 20px;
	border-radius: 3px;
	object-fit: contain;
}

.member-profile-account__provider-logo--kakao {
	background-color: #FEE500;
}

.member-profile-account__provider-logo--naver {
	background-color: #03A94D;
}

.member-profile-account__provider-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: currentColor;
}


.member-profile-account__provider-icon--email,
.member-profile-account__provider-icon-- {
	position: relative;
	background: none;
}

.member-profile-account__provider-icon--email::before,
.member-profile-account__provider-icon--::before {
	content: "@";
	display: grid;
	width: 18px;
	height: 18px;
	place-items: center;
	border: 1px solid var(--line-strong, #cfcfcf);
	border-radius: 50%;
	color: var(--text-secondary);
	font: 600 11px/1 var(--font-inter);
}

.member-profile-account__provider strong {
	font-size: 14px;
	line-height: 20px;
}


.profile-settings .fig-ui-toggle-row {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.member-profile-photo-field__shutter.is-active {
		animation: none;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* SNAP HUB — My Page responsive
 * <=1024px follows the approved mobile composition.
 * 431~1024px keeps the same 430px mobile composition centered on the neutral canvas.
 * No tablet-only visual tier is introduced here.
 */
@media (max-width: 1024px) {
	.mypage-page-actions {
		margin: 0;
		padding: 16px 14px 0;
	}

	.mypage-page-actions .fig-ui-button {
		width: 100%;
		min-width: 0;
	}

	.mypage-page-actions--studio-manage {
		flex-direction: column;
		gap: 10px;
	}

	.mypage-page-actions--studio-manage form {
		width: 100%;
	}

	.mypage-main {
		min-height: 0;
		padding: 0 0 40px;
	}

	.mypage-tabs + .mypage-section,
	.mypage-tabs + .profile-form > .mypage-section:first-child {
		margin-top: 0;
	}

	.mypage-section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 14px;
	}

	.mypage-section-head > .fig-ui-button {
		align-self: flex-start;
	}

	.mypage-section-head h2 {
		font-size: 16px;
		line-height: 24px;
	}

	.mypage-section-head p {
		margin-top: 3px;
		font-size: 14px;
		line-height: 21px;
	}

	/* My studio cards: keep one stable thumbnail rhythm on every mobile viewport. */
	.studio-manage-card {
		grid-template-columns: minmax(0,1fr);
		height: auto;
		border-radius: 12px;
	}

	.studio-manage-card__image,
	.favorite-studio-card__image {
		height: auto;
		aspect-ratio: 600 / 411;
		overflow: hidden;
	}

	.studio-manage-card__image img,
	.favorite-studio-card__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.studio-manage-card__body {
		padding: 16px;
	}

	.studio-manage-card__top {
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.studio-manage-card__meta {
		margin-left: auto;
		gap: 10px;
	}

	.studio-manage-card h3 {
		margin-top: 13px;
		font-size: 16px;
		line-height: 24px;
	}

	.studio-manage-card__description {
		display: -webkit-box;
		overflow: hidden;
		font-size: 14px;
		line-height: 21px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.studio-manage-card__footer {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
		margin-top: 16px;
	}

	.studio-manage-card__actions {
		display: grid;
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 8px;
	}

	.studio-manage-card__updated {
		align-self: flex-end;
		margin-left: 0;
	}

	.studio-manage-card__actions .fig-ui-button {
		width: 100%;
		min-width: 0;
	}

	/* Management request cards stay touch-friendly without creating a tablet layout. */
	.management-request-card {
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
		padding: 16px;
		border-radius: 12px;
	}

	.management-request-card__heading {
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
	}

	.management-request-card h3 {
		font-size: 16px;
		line-height: 24px;
	}

	.management-request-card__location {
		font-size: 14px;
		line-height: 21px;
	}

	.management-request-card__meta {
		display: grid;
		gap: 4px;
		margin-top: 7px;
	}

	.management-request-card__meta dt,
	.management-request-card__meta dd {
		font-size: 12px;
		line-height: 18px;
	}

	.management-request-card__actions {
		display: grid;
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 8px;
		min-width: 0;
	}

	.management-request-card__actions .fig-ui-button:only-child {
		grid-column: 1 / -1;
	}

	.management-request-card .fig-ui-button {
		width: 100%;
		min-width: 0;
	}

	/* Studio management detail. */
	.studio-status-panel {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
	}

	.studio-status-panel .fig-ui-button {
		width: 100%;
	}

	.manage-action-list,
	.studio-summary-list {
		border-radius: 12px;
	}

	.manage-action-row {
		grid-template-columns: 34px minmax(0,1fr);
		gap: 10px;
		min-height: 0;
		padding: 15px 14px 16px;
	}

	.manage-action-row .fig-ui-more-link {
		grid-column: 2;
		justify-self: start;
		margin-top: 6px;
	}

	.manage-action-row p {
		font-size: 14px;
		line-height: 21px;
	}

	.studio-summary-list > div {
		grid-template-columns: 88px minmax(0,1fr);
		gap: 12px;
		padding: 14px;
	}

	.studio-summary-list dd {
		overflow-wrap: anywhere;
	}

	/* Favorite cards use the same thumbnail geometry as My Studio. */
	.favorite-studio-list {
		grid-template-columns: minmax(0,1fr);
	}

	.favorite-studio-card {
		grid-template-columns: minmax(0,1fr);
		height: auto;
		border-radius: 12px;
	}

	.favorite-studio-card__body {
		padding: 15px 14px 16px;
	}

	.favorite-studio-card__top {
		align-items: center;
		gap: 10px;
	}

	.favorite-studio-card__identity {
		gap: 9px;
	}

	.favorite-studio-card__avatar {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.favorite-studio-card__actions .fig-ui-button {
		width: 100%;
	}

	/* Empty states keep readable copy and one clear primary action. */
	.mypage-empty-state {
		margin-top: 14px;
		padding: 28px 16px;
		border-radius: 12px;
	}

	.mypage-empty-state .fig-ui-button {
		width: min(100%,220px);
	}

	/* My Info: keep inputs full-width and preserve the existing Figma controls. */
	.profile-field-grid {
		grid-template-columns: minmax(0,1fr);
		gap: 17px;
	}

	.profile-settings {
		max-width: none;
	}

	.profile-verification-panel {
		margin-top: 18px;
		padding: 15px 14px;
		border-radius: 12px;
	}

	.profile-verification-panel__head {
		margin-bottom: 14px;
	}

	.profile-verification-grid {
		grid-template-columns: minmax(0,1fr);
		gap: 14px;
	}

	.profile-verification-code {
		grid-template-columns: minmax(0,1fr) 78px;
		gap: 8px;
	}

	.profile-verification-code > .fig-ui-button {
		width: 100%;
		min-width: 0;
	}

	.profile-actions {
		display: grid;
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 8px;
		width: auto;
		margin: 0;
		padding: 16px 14px;
		border-top: 4px solid var(--primary-surface);
	}

	.profile-actions .fig-ui-button {
		width: 100%;
		min-width: 0;
	}

	.profile-form + .profile-account-section {
		margin-top: 0;
		border-top: 4px solid var(--primary-surface);
	}

	.profile-withdraw-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
		padding: 16px;
		border-radius: 12px;
	}

	.profile-withdraw-button {
		width: auto;
	}

	.member-profile-photo-field {
		align-items: flex-start;
		gap: 14px;
		margin-bottom: 22px;
		padding-bottom: 20px;
	}

	.member-profile-photo-field__preview {
		width: 76px;
		height: 76px;
		flex-basis: 76px;
	}

	.member-profile-account {
		gap: 5px;
		padding-top: 2px;
	}

}

@media (max-width: 360px) {
	.studio-manage-card__top {
		align-items: flex-start;
		flex-direction: column;
		gap: 7px;
	}

	.studio-manage-card__meta {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.profile-verification-panel__head {
		flex-direction: column;
	}

	.profile-verification-code {
		grid-template-columns: minmax(0,1fr);
	}
}