/*
 * SNAP HUB Studio Detail gallery
 * Scope: representative visual, portfolio viewer and PC lightbox motion.
 * gallery only adds the verified visual + summary-layout differences.
 * Responsive contract: PC >= 1025px / Mobile <= 1024px.
 */

/* ==========================================================================
   gallery Visual — PC adaptive 3-cut editorial gallery / Mobile representative image only
   ========================================================================== */
[data-detail-layout="gallery"] .detail-visual {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 58%);
	gap: 8px;
	width: 100%;
	height: 414px;
	margin-top: 30px;
	overflow: hidden;
	border-radius: 20px;
	background: #f7f7f8;
}

[data-detail-layout="gallery"] .detail-visual button {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	border: 0;
	background: #f7f7f8;
	cursor: pointer;
}

[data-detail-layout="gallery"] .detail-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

[data-detail-layout="gallery"] .detail-visual__main img {
	object-position: center 46%;
}

[data-detail-layout="gallery"] .detail-visual__side {
	display: grid;
	grid-template-rows: minmax(0, 58fr) minmax(0, 42fr);
	gap: 8px;
	min-width: 0;
	min-height: 0;
}

[data-detail-layout="gallery"] .detail-visual__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	min-width: 0;
	min-height: 0;
}

/* Sparse portfolio states: reuse the existing visual slots without duplicating images.
   Four or more images keep the original 4-cut layout unchanged. */
[data-detail-layout="gallery"] .detail-visual [data-role="detail-visual-item"][hidden] {
	display: none;
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] {
	display: block;
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main {
	display: block;
	width: 100%;
	height: 100%;
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__side {
	display: none;
}

/* A single portrait representative keeps the full original visible. */
[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-portrait-media {
	position: relative;
	isolation: isolate;
	background: #f7f7f8;
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-portrait-media .studio-portrait-blur {
	display: block;
	z-index: 0;
	inset: -28px;
	filter: blur(24px) saturate(.86) brightness(.97);
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-portrait-media > img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: none;
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="2"] > .detail-visual__side {
	grid-template-rows: minmax(0, 1fr);
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="2"] .detail-visual__pair {
	display: none;
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="3"] > .detail-visual__side {
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="3"] .detail-visual__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Zero-image state only. Keep the category fallback at its original aspect ratio:
   the sharp source fills 100% of the visual height in the center, while the
   remaining left/right space is filled by a blurred copy of the same artwork. */
[data-detail-layout="gallery"] .detail-visual__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: none;
	overflow: hidden;
	background-color: #f7f3ef;
	background-image: none;
	pointer-events: none;
}

[data-detail-layout="gallery"] .detail-visual__fallback::before,
[data-detail-layout="gallery"] .detail-visual__fallback::after {
	position: absolute;
	content: "";
	background-image: var(--studio-fallback-image);
	background-position: center;
	background-repeat: no-repeat;
}

[data-detail-layout="gallery"] .detail-visual__fallback::before {
	inset: -32px;
	background-size: cover;
	filter: blur(24px);
	transform: scale(1.08);
}

[data-detail-layout="gallery"] .detail-visual__fallback::after {
	inset: 0;
	background-size: auto 100%;
}

[data-detail-layout="gallery"] .detail-visual.is-empty-portfolio > .detail-visual__fallback {
	display: block;
}

[data-detail-layout="gallery"] .detail-visual.is-empty-portfolio > .detail-visual__main,
[data-detail-layout="gallery"] .detail-visual.is-empty-portfolio > .detail-visual__side,
[data-detail-layout="gallery"] .detail-visual.is-empty-portfolio > .detail-visual__all {
	display: none;
}

/* Icon-only portfolio affordance: content remains accessible via aria-label. */
[data-detail-layout="gallery"] .detail-visual .detail-visual__all {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	display: inline-grid;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	place-items: center;
	padding: 0;
	border: 1px solid var(--primary-border);
	border-radius: 10px;
	background: #fff;
	color: var(--primary);
	font-size: 17px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(17, 17, 17, .08);
}

@media (hover: hover) and (pointer: fine) {
	[data-detail-layout="gallery"] .detail-visual button:not(.detail-visual__all):not(.is-pc-contain-media):hover > img {
		transform: scale(1.02);
	}
}

/* ==========================================================================
   gallery Summary — dense profile + primary meta / flat operation list
   ========================================================================== */

[data-detail-layout="gallery"] .detail-summary-card {
	min-height: 0;
	padding: 20px 28px 18px;
	background: #fff;
	border-color: var(--line-strong);
}

/* Category is a soft identity signal, not a plain text label. */
[data-detail-layout="gallery"] .detail-summary-card .studio-summary-card__tags {
	gap: 8px;
}


[data-detail-layout="gallery"] .detail-summary-main {
	min-width: 0;
}

/* current semantics stay intact, but the identity is arranged like the profile. */
[data-detail-layout="gallery"] .detail-summary-main .studio-identity {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	column-gap: 14px;
	row-gap: 0;
	width: 100%;
	height: auto;
	min-height: 0;
	margin-top: 0;
	padding: 10px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

[data-detail-layout="gallery"] .detail-summary-main .studio-identity__avatar {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	margin: 0;
}

[data-detail-layout="gallery"] .detail-summary-name-row {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	min-height: 28px;
}

[data-detail-layout="gallery"] .detail-summary-name-row > h1 {
	grid-column: auto;
	grid-row: auto;
	align-self: auto;
	width: auto;
	min-width: 0;
	margin: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
}

/* Location + phone move to the main identity column to fill useful space. */
[data-detail-layout="gallery"] .detail-summary-primary-meta {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-top: 6px;
	color: var(--text-secondary);
}

[data-detail-layout="gallery"] .detail-summary-primary-meta__item {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 6px;
	color: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
}

[data-detail-layout="gallery"] .detail-summary-primary-meta__icon {
	width: 13px;
	flex: 0 0 13px;
	color: var(--primary);
	font-size: 13px;
	line-height: 1;
	text-align: center;
}

[data-detail-layout="gallery"] .detail-operator-note {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

[data-detail-layout="gallery"] .detail-operator-note__button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	min-height: 22px;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-tertiary);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	cursor: help;
	white-space: nowrap;
}

[data-detail-layout="gallery"] .detail-operator-note__button > .fa-circle-check {
	color: var(--primary);
	font-size: 13px;
}

[data-detail-layout="gallery"] .detail-operator-note__info {
	display: inline-flex;
	align-items: center;
	color: var(--text-tertiary);
	font-size: 11px;
	line-height: 1;
}

[data-detail-layout="gallery"] .detail-operator-note__button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .studio-summary-card__intro {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-top: 16px;
	padding: 14px 30px 0 0;
	border-top: 1px solid var(--line);
}

/* Only the introduction text collapses; studio feature chips always remain visible. */
[data-detail-layout="gallery"] .studio-summary-card__intro-content > p {
	margin: 0;
}

[data-detail-layout="gallery"] .studio-summary-card__intro-features,
[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-features {
	display: flex;
	margin-top: 10px;
}

/* Operating information is a separate current-toned card. The 2x2 facts and SNS
   markup remain unchanged; only the container is separated from the profile. */
[data-detail-layout="gallery"] .detail-summary-meta {
	position: sticky;
	top: 20px;
	z-index: 8;
	display: flex;
	width: 100%;
	min-width: 0;
	flex-direction: column;
	align-self: start;
	padding: 18px 20px 16px;
	border: 1px solid var(--line-strong);
	border-radius: 20px;
	background: #fff;
}

[data-detail-layout="gallery"] .detail-summary-meta__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-bottom: 1px solid var(--line);
}

[data-detail-layout="gallery"] .detail-summary-meta--no-social .detail-summary-meta__grid {
	border-bottom: 0;
}

[data-detail-layout="gallery"] .detail-summary-meta__item {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 76px;
	flex-direction: column;
	justify-content: flex-start;
	gap: 5px;
	padding: 10px 14px 10px 0;
	background: transparent;
}

[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(odd) {
	border-right: 1px solid var(--line);
}

[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(even) {
	padding-left: 16px;
}

[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(-n+2) {
	border-bottom: 1px solid var(--line);
}

[data-detail-layout="gallery"] .detail-summary-meta__symbol {
	display: block;
	width: 16px;
	height: 16px;
	margin-top: 0;
	color: var(--primary);
	font-size: 15px;
	line-height: 16px;
	text-align: center;
}

[data-detail-layout="gallery"] .detail-summary-meta__item > p {
	min-width: 0;
	margin: 0;
}


[data-detail-layout="gallery"] .detail-summary-meta__item strong {
	display: block;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	word-break: keep-all;
}

[data-detail-layout="gallery"] .detail-summary-meta__item small {
	display: block;
	margin-top: 2px;
	color: var(--text-tertiary);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.3;
	word-break: keep-all;
}

[data-detail-layout="gallery"] .detail-summary-meta .studio-summary-card__social {
	display: flex;
	width: 100%;
	min-width: 0;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
	overflow: visible;
}

[data-detail-layout="gallery"] .detail-summary-meta .studio-summary-card__social-link {
	flex: 0 0 auto;
	height: 30px;
	padding-inline: 9px;
	font-size: 12px;
}

/* ==========================================================================
   gallery PC summary split — same 884 / 494 proportion as the current body layout
   ========================================================================== */
@media (min-width: 1025px) {
	/*
	 * PC gallery contract:
	 * - 1 photo: full-width representative
	 * - 2 photos: 60 / 40
	 * - 3+ photos: 40 / 30 / 30 (first three only in the hero)
	 *
	 * The fourth legacy slot remains in the DOM for backward compatibility but is
	 * intentionally not rendered in the PC hero. The full portfolio is still
	 * reachable from the gallery button/lightbox, so no photo data is discarded.
	 * Mobile rules below remain unchanged and continue to show one representative.
	 */
	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) {
		display: grid;
		grid-template-columns: minmax(0, 40fr) minmax(0, 30fr) minmax(0, 30fr);
		grid-template-rows: minmax(0, 1fr);
	}

	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) > .detail-visual__main {
		grid-column: 1;
		grid-row: 1;
	}

	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) > .detail-visual__side,
	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) .detail-visual__pair {
		display: contents;
	}

	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) .detail-visual__wide {
		grid-column: 2;
		grid-row: 1;
	}

	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) .detail-visual__pair > button:first-child {
		grid-column: 3;
		grid-row: 1;
	}

	[data-detail-layout="gallery"] .detail-visual:not([data-portfolio-count="1"]) .detail-visual__pair > button:nth-child(2) {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="2"] {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	}

	[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="2"] .detail-visual__pair {
		display: none;
	}

	/*
	 * Fixed-height media integrity (PC only).
	 * JS compares the source aspect ratio with the rendered slot ratio. When
	 * cover would hide more than 28% of the original frame, only that slot gets
	 * is-pc-contain-media. The 414px hero height and 40/30/30 geometry stay fixed.
	 * No stretching is used. When contain is required, the same source is rendered as a
	 * soft edge-extension backdrop. Portrait contain media receives a bounded 12% foreground scale
	 * (about 6% crop at the top/bottom) to improve thumbnail readability while the full original
	 * remains available through the existing gallery viewer. Non-portrait contain media stays conservative.
	 */
	[data-detail-layout="gallery"] .detail-visual [data-role="detail-visual-item"].is-pc-contain-media {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		background: #f4f4f5;
	}

	/*
	 * Natural letterbox fill: this is a real decorative layer, not a pseudo-element.
	 * The same source is enlarged behind the foreground so colors from the source edges
	 * diffuse into the unused slot area. A generous overscan prevents a hard blur boundary.
	 */
	[data-detail-layout="gallery"] .detail-visual [data-role="detail-visual-item"].is-pc-contain-media .studio-portrait-blur {
		position: absolute;
		inset: -48px;
		z-index: 0;
		display: block;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		filter: blur(34px) saturate(.88) brightness(.96);
		transform: scale(1.18);
		opacity: .96;
		pointer-events: none;
	}

	[data-detail-layout="gallery"] .detail-visual [data-role="detail-visual-item"].is-pc-contain-media > img {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		transform: scale(1.055);
		transform-origin: center center;
		transition: none;
	}

	/* Portrait work benefits from slightly stronger thumbnail fill.
	 * Keep aspect ratio intact; only a small, symmetric edge crop is accepted on PC. */
	[data-detail-layout="gallery"] .detail-visual [data-role="detail-visual-item"].is-pc-contain-media.is-portrait-media > img {
		transform: scale(1.12);
	}

	/* If cover still preserves enough of the frame, retain the existing clean crop. */
	[data-detail-layout="gallery"] .detail-visual__side [data-role="detail-visual-item"].is-portrait-media:not(.is-pc-contain-media) {
		position: relative;
		isolation: isolate;
		background: #f4f4f5;
	}

	[data-detail-layout="gallery"] .detail-visual__side [data-role="detail-visual-item"].is-portrait-media:not(.is-pc-contain-media) .studio-portrait-blur {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-visual__side [data-role="detail-visual-item"].is-portrait-media:not(.is-pc-contain-media) > img {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		transform: none;
		transition: transform .35s ease;
	}

	/* Single-photo PC view follows the same contain + soft-backdrop decision. */
	[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-pc-contain-media .studio-portrait-blur {
		display: block;
	}

	[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-pc-contain-media > img {
		object-fit: contain;
		object-position: center;
	}

	[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-portrait-media:not(.is-pc-contain-media) .studio-portrait-blur {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-visual[data-portfolio-count="1"] > .detail-visual__main.is-portrait-media:not(.is-pc-contain-media) > img {
		object-fit: cover;
		object-position: center;
		transition: transform .35s ease;
	}

	[data-detail-layout="gallery"] .detail-operator-note {
		position: relative;
		right: auto;
		top: auto;
		width: auto;
		margin: 0;
	}

	[data-detail-layout="gallery"] .detail-summary-card {
		width: 100%;
	}

	[data-detail-layout="gallery"] .detail-desktop-grid {
		margin-top: 20px;
	}
}

/* ==========================================================================
   Mobile — one representative visual + compact one-column studio information
   ========================================================================== */
@media (max-width: 1024px) {
	[data-detail-layout="gallery"] .detail-visual {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 354 / 244;
		margin: 0;
		overflow: hidden;
		border-radius: 0;
	}

	[data-detail-layout="gallery"] .detail-visual__main {
		position: relative;
		isolation: isolate;
		display: block;
		width: 100%;
		max-width: 100%;
		height: 100%;
		background: #f4f4f5;
	}

	[data-detail-layout="gallery"] .detail-visual__main.is-portrait-media .studio-portrait-blur {
		display: block;
		z-index: 0;
		inset: -24px;
		filter: blur(22px) saturate(.86) brightness(.97);
	}

	[data-detail-layout="gallery"] .detail-visual__main > img {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		transform: none;
		transition: none;
	}

	[data-detail-layout="gallery"] .detail-visual__side {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-visual .detail-visual__all {
		right: 6px;
		bottom: 30px;
		z-index: 4;
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		font-size: 17px;
	}

	[data-detail-layout="gallery"] .detail-summary-card {
		width: 100%;
		padding: 16px;
		background: #fff;
	}

	[data-detail-layout="gallery"] .detail-summary-card .studio-summary-card__tags {
		margin-left: 0;
	}


	[data-detail-layout="gallery"] .detail-summary-main .studio-identity {
		grid-template-columns: 42px minmax(0, 1fr);
		height: auto;
		min-height: 0;
		margin-top: 0;
		padding: 0;
		column-gap: 12px;
	}

	[data-detail-layout="gallery"] .detail-summary-main .studio-identity__avatar {
		width: 42px;
		height: 42px;
	}

	[data-detail-layout="gallery"] .detail-summary-name-row {
		gap: 7px;
	}

	[data-detail-layout="gallery"] .detail-summary-name-row > h1 {
		padding: 0;
		font-size: 20px;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta {
		grid-column: 1 / -1;
		grid-row: 2;
		display: flex;
		min-width: 0;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 6px 16px;
		margin-top: 8px;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta__item {
		flex: 0 1 auto;
		min-width: 0;
		font-size: 13px;
		line-height: 18px;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta__item:first-child {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta > a.detail-summary-primary-meta__item {
		justify-content: flex-start;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta__icon {
		width: 12px;
		flex-basis: 12px;
		font-size: 12px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__button {
		min-height: 20px;
		font-size: 11px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__button > .fa-circle-check {
		font-size: 12px;
	}

	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .studio-summary-card__intro {
		grid-row: 3;
		margin-top: 12px;
		padding: 12px 28px 0 0;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-features {
		margin-top: 9px;
	}

	[data-detail-layout="gallery"] .detail-summary-meta {
		position: static;
		z-index: auto;
		width: 100%;
		padding: 0 16px;
		border: 0;
		border-radius: 0;
		background: #fff;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__grid {
		gap: 0 16px;
		margin-top: 12px;
		padding-top: 10px;
		border-top: 1px solid var(--line);
		border-bottom: 0;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__item,
	[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(odd),
	[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(even),
	[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(-n+2) {
		min-height: 68px;
		padding: 8px 0;
		border: 0;
	}

	[data-detail-layout="gallery"] .detail-summary-meta .studio-summary-card__social {
		flex-wrap: nowrap;
		gap: 5px;
		margin: 8px 0 0;
		padding-bottom: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	[data-detail-layout="gallery"] .detail-summary-meta .studio-summary-card__social::-webkit-scrollbar {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-summary-meta .studio-summary-card__social-link {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   gallery Summary refinement — 3-line intro / compact meta icons / operator alignment
   ========================================================================== */
[data-detail-layout="gallery"] .detail-summary-primary-meta {
	width: 100%;
}

[data-detail-layout="gallery"] .detail-summary-primary-meta__icon {
	width: 11px;
	height: 13px;
	flex: 0 0 11px;
	font-size: 11px;
	line-height: 13px;
}

[data-detail-layout="gallery"] .detail-operator-note {
	margin-left: auto;
}

[data-detail-layout="gallery"] .detail-operator-note__button {
	gap: 0;
}

[data-detail-layout="gallery"] .detail-operator-note__group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

[data-detail-layout="gallery"] .detail-operator-note__group > .fa-circle-check {
	color: var(--primary);
	font-size: 12px;
	line-height: 1;
}

[data-detail-layout="gallery"] .detail-operator-note__info {
	display: inline-block;
	margin-left: 1px;
	color: var(--text-tertiary);
	font-size: 11px;
	line-height: 1;
}

/* The introduction uses its natural height up to three lines. The disclosure
   is enabled only when the rendered text actually exceeds that limit. */
[data-detail-layout="gallery"] .studio-summary-card__intro-content {
	min-height: 0;
}

[data-detail-layout="gallery"] .studio-summary-card__intro-head {
	display: none;
}

[data-detail-layout="gallery"] .studio-summary-card__intro.has-intro-overflow .studio-summary-card__intro-head {
	display: block;
}

[data-detail-layout="gallery"] .studio-summary-card__intro-content > p {
	display: -webkit-box;
	min-height: 0;
	max-height: 72px;
	overflow: hidden;
	color: #333;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.01em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-content {
	min-height: 0;
}

[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-content > p,
[data-detail-layout="gallery"] .studio-summary-card__intro.is-measuring-intro .studio-summary-card__intro-content > p {
	display: block;
	min-height: 0;
	max-height: none;
	overflow: visible;
	-webkit-line-clamp: unset;
}

[data-detail-layout="gallery"] .studio-summary-card__intro-features,
[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-features {
	display: flex;
	margin-top: 10px;
}

@media (max-width: 1024px) {
	[data-detail-layout="gallery"] .detail-summary-primary-meta {
		align-items: center;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta__icon {
		width: 13px;
		height: 13px;
		flex-basis: 13px;
		font-size: 13px;
		line-height: 13px;
	}

	[data-detail-layout="gallery"] .detail-operator-note {
		width: 100%;
		flex: 0 0 100%;
		flex-basis: 100%;
		justify-content: center;
		margin: 2px 0 0;
		margin-left: 0;
		text-align: center;
	}

	[data-detail-layout="gallery"] .detail-operator-note__group {
		gap: 3px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__group > .fa-circle-check {
		font-size: 11px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__info {
		font-size: 10px;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-content,
	[data-detail-layout="gallery"] .studio-summary-card__intro-content > p {
		min-height: 0;
		max-height: 63px;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-content > p {
		font-size: 14px;
		line-height: 21px;
		letter-spacing: 0;
		-webkit-line-clamp: 3;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-content,
	[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-content > p {
		min-height: 0;
		max-height: none;
	}
}

/* ==========================================================================
   gallery Summary typography fidelity — restore Figma/current readable hierarchy
   ========================================================================== */
/* Operating facts: keep the compact 2x2 layout, but restore the readable
   Pretendard hierarchy used by the original detail UI instead of micro-copy. */
[data-detail-layout="gallery"] .detail-summary-meta__item {
	gap: 5px;
	min-height: 84px;
	padding-top: 11px;
	padding-bottom: 11px;
}

[data-detail-layout="gallery"] .detail-summary-meta__symbol {
	width: 16px;
	height: 18px;
	margin-top: 0;
	font-size: 15px;
	line-height: 18px;
}

[data-detail-layout="gallery"] .detail-summary-meta__head {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 7px;
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

[data-detail-layout="gallery"] .detail-summary-meta__item strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

[data-detail-layout="gallery"] .detail-summary-meta__item small {
	margin-top: 1px;
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}

/* Studio features: restore the original detail-page list treatment.
   No pill/background/border — icon + text only, with the original typography. */
[data-detail-layout="gallery"] .studio-summary-card__intro-features,
[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-features {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 12px 44px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

[data-detail-layout="gallery"] .studio-summary-card__intro-features li {
	position: relative;
	display: block;
	min-height: 20px;
	padding: 0 0 0 28px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0;
	white-space: normal;
}

[data-detail-layout="gallery"] .studio-summary-card__intro-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url("../svg/detail/icon-detail-intro-check.svg") center / 20px 20px no-repeat;
}

/* Operator verification: Font Awesome 7 `fa-circle-info` is the correct icon.
   Match the left-side meta typography and vertically center the whole group. */
[data-detail-layout="gallery"] .detail-operator-note {
	align-self: center;
}

[data-detail-layout="gallery"] .detail-operator-note__button {
	min-height: 18px;
	align-items: center;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}

[data-detail-layout="gallery"] .detail-operator-note__group {
	display: inline-flex;
	min-height: 18px;
	align-items: center;
	gap: 5px;
	line-height: 18px;
}

[data-detail-layout="gallery"] .detail-operator-note__group > .fa-circle-check {
	display: inline-flex;
	width: 13px;
	height: 18px;
	align-items: center;
	justify-content: center;
	flex: 0 0 13px;
	color: var(--primary);
	font-size: 12px;
	line-height: 18px;
}

[data-detail-layout="gallery"] .detail-operator-note__info {
	display: inline-flex;
	width: 14px;
	height: 18px;
	margin-left: 1px;
	align-items: center;
	justify-content: center;
	flex: 0 0 14px;
	color: #666;
	font-size: 13px;
	line-height: 18px;
}

@media (max-width: 1024px) {
	/* Mobile operation facts: each fact reads as one vertical information block.
	   Keep the existing 2x2 grid, but align label/value/supporting copy to one start line. */
	[data-detail-layout="gallery"] .detail-summary-meta__item {
		min-height: 78px;
		justify-content: flex-start;
		gap: 4px;
		padding: 9px 0 8px;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__item:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}

	[data-detail-layout="gallery"] .detail-summary-meta__head {
		gap: 6px;
		font-size: 12px;
		font-weight: 500;
		line-height: 15px;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__symbol {
		width: 15px;
		height: 15px;
		flex: 0 0 15px;
		font-size: 14px;
		line-height: 15px;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__item > p {
		display: flex;
		min-width: 0;
		flex-direction: column;
		align-items: flex-start;
		margin: 0;
		padding-left: 21px;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__item strong {
		display: block;
		width: 100%;
		color: var(--ink);
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		text-align: left;
		word-break: keep-all;
	}

	[data-detail-layout="gallery"] .detail-summary-meta__item small {
		display: block;
		width: 100%;
		margin-top: 2px;
		color: var(--text-secondary);
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		text-align: left;
		word-break: keep-all;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-features,
	[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 8px;
		margin-top: 16px;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-features li {
		min-height: 18px;
		padding-left: 21px;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-features li::before {
		width: 16px;
		height: 16px;
		background-size: 16px 16px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__button {
		font-size: 12px;
		line-height: 17px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__group {
		min-height: 17px;
		gap: 4px;
		line-height: 17px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__group > .fa-circle-check {
		height: 17px;
		font-size: 11px;
		line-height: 17px;
	}

	[data-detail-layout="gallery"] .detail-operator-note__info {
		width: 13px;
		height: 17px;
		flex-basis: 13px;
		font-size: 12px;
		line-height: 17px;
	}
}

/* ==========================================================================
   gallery unified desktop sidebar — operation info starts the sticky rail
   ========================================================================== */
@media (min-width: 1025px) {
	[data-detail-layout="gallery"] .detail-page-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(390px, 35.3%, 494px);
		gap: 22px;
		align-items: start;
		width: 100%;
		margin-top: 16px;
	}

	[data-detail-layout="gallery"] .detail-page-main {
		min-width: 0;
	}

	[data-detail-layout="gallery"] .detail-page-main > .detail-summary-card {
		width: 100%;
	}

	[data-detail-layout="gallery"] .detail-content-grid {
		display: block;
		width: 100%;
		margin-top: 20px;
	}

	[data-detail-layout="gallery"] .detail-content-grid > .detail-content-column {
		width: 100%;
		min-width: 0;
	}

	[data-detail-layout="gallery"] .detail-sidebar {
		position: sticky;
		top: 20px;
		z-index: 10;
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 22px;
		align-self: start;
	}

	[data-detail-layout="gallery"] .detail-sidebar > .detail-summary-meta {
		position: static;
		top: auto;
		z-index: auto;
	}

	/* Features are descriptive metadata, not equal-width columns. */
	[data-detail-layout="gallery"] .studio-summary-card__intro-features,
	[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded .studio-summary-card__intro-features {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 10px 28px;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro-features li {
		flex: 0 1 auto;
		width: auto;
		min-width: 176px;
	}
}

/* Mobile keeps the current content sequence: profile -> operation info -> content.
   Product/public/action rail elements keep their existing mobile visibility rules. */
@media (max-width: 1024px) {
	[data-detail-layout="gallery"] .detail-page-layout {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 0;
		margin-top: 0;
	}

	[data-detail-layout="gallery"] .detail-page-main {
		display: contents;
	}

	[data-detail-layout="gallery"] .detail-page-main > .detail-summary-card {
		order: 1;
	}

	[data-detail-layout="gallery"] .detail-sidebar {
		position: static;
		z-index: auto;
		order: 2;
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		margin: 16px 0 20px;
		border: 0;
		border-radius: 0;
	}

	[data-detail-layout="gallery"] .detail-content-grid {
		order: 3;
		width: 100%;
		margin-top: 0;
	}
}

/* Mobile integrity: gallery visual/profile/sidebar must never create page-level horizontal overflow. */
@media (max-width: 1024px) {
	[data-detail-layout="gallery"] .detail-visual,
	[data-detail-layout="gallery"] .detail-visual__main,
	[data-detail-layout="gallery"] .detail-page-layout,
	[data-detail-layout="gallery"] .detail-page-main,
	[data-detail-layout="gallery"] .detail-sidebar {
		min-width: 0;
		max-width: 100%;
	}

	[data-detail-layout="gallery"] .detail-sidebar > .detail-summary-meta {
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}


/* ==========================================================================
   gallery mobile summary disclosure — introduction/features only
   ========================================================================== */
@media (max-width: 1024px) {
	/* Introduction, public-data and operator notices share one disclosure control. */
	[data-detail-layout="gallery"] .studio-summary-card__intro-head {
		width: 28px;
		height: 28px;
	}

	[data-detail-layout="gallery"] button.detail-disclosure-toggle {
		appearance: none;
		-webkit-appearance: none;
		display: block;
		width: 28px;
		height: 28px;
		min-width: 28px;
		min-height: 28px;
		padding: 0;
		overflow: hidden;
		border: 0;
		border-radius: 50%;
		background: transparent url("../svg/common/icon-chevron-down-small.svg") center / 14px 14px no-repeat;
		color: transparent;
		font-size: 0;
		line-height: 0;
		cursor: pointer;
		transition: background-color .16s ease, transform .16s ease;
	}

	[data-detail-layout="gallery"] .studio-summary-card__intro.is-expanded button.detail-disclosure-toggle {
		transform: rotate(180deg);
	}

	[data-detail-layout="gallery"] button.detail-disclosure-toggle:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 1px;
	}

	/* Studio features are independent metadata. Introduction disclosure must not
	   hide them when the introduction itself fits within three lines. */
	[data-detail-layout="gallery"] .studio-summary-card__intro-features {
		display: grid;
	}
}

/* ==========================================================================
   gallery mobile refinement — in-card categories / visual icon / verified notice
   ========================================================================== */
[data-detail-layout="gallery"] .detail-operator-section {
	display: none;
}

@media (max-width: 1024px) {
	/* Category chips stay inside the summary card and align to the identity
	   text column directly below location/contact. */
	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .studio-summary-card__tags {
		grid-column: 2 / -1;
		grid-row: 3;
		display: flex;
		width: 100%;
		min-width: 0;
		flex-wrap: wrap;
		gap: 5px;
		margin: 9px 0 0;
		padding: 0;
	}

	/* Favorite/share use the fixed mobile action bar; no empty action row is
	   reserved inside the compact summary card. */
	[data-detail-layout="gallery"] .detail-summary-card > .studio-summary-card__actions {
		display: none;
		height: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	/* Meta aligns with the studio-name text column and never enters the avatar
	   column. The desktop operator note is replaced by the mobile notice below. */
	[data-detail-layout="gallery"] .detail-summary-primary-meta {
		grid-column: 2 / -1;
		width: 100%;
		margin-top: 7px;
		gap: 6px 14px;
	}

	[data-detail-layout="gallery"] .detail-summary-primary-meta .detail-operator-note {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .studio-summary-card__intro {
		grid-row: 4;
	}

	/* Gallery stays a full 44px touch target while only the white icon is
	   visible, anchored safely inside the image's bottom-right corner. */
	[data-detail-layout="gallery"] .detail-visual .detail-visual__all {
		top: auto;
		right: 6px;
		bottom: 30px;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #fff;
		font-size: 21px;
		line-height: 1;
		filter: drop-shadow(0 1px 3px rgba(17,17,17,.55));
	}

	[data-detail-layout="gallery"] .detail-visual .detail-visual__all:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -6px;
	}

	/* Operator verification follows the same compact accordion language as the
	   public-data notice and lives immediately below it on mobile. */
	[data-detail-layout="gallery"] .detail-operator-section {
		display: block;
	}

	[data-detail-layout="gallery"] .detail-operator-section .detail-public-section__icon {
		color: var(--primary);
	}
}

/* Operator verification tooltip: current opens on the whole slot hover. gallery narrows
   that hit-area to the explicit info button while preserving click/focus. */
body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-note {
	gap: 3px;
}

body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-note__group {
	display: inline-flex;
	min-height: 18px;
	align-items: center;
	gap: 5px;
	line-height: 18px;
}

body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-note__button {
	display: inline-grid;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	place-items: center;
	flex: 0 0 18px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text-tertiary);
	cursor: help;
}

body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-note__info {
	width: auto;
	height: auto;
	margin: 0;
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1;
}

/* Neutralize current's broad parent-hover trigger. */
body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-slot:hover .detail-operator-tooltip {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-3px);
}

body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-slot.is-open .detail-operator-tooltip,
body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-slot:focus-within .detail-operator-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (min-width: 1025px) {
	body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-note__group {
		font-size: 12px;
		font-weight: 500;
		line-height: 18px;
		letter-spacing: -.2px;
	}
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	body[data-page-variant="studio-detail"][data-detail-layout="gallery"] .detail-operator-note__button:hover + .detail-operator-tooltip {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* Desktop portfolio viewer: the full-screen black presentation, scoped to gallery.
   Mobile/tablet continue to use the existing vertical portfolio dialog. */
@media (min-width: 1025px) {
	body.is-detail-pc-lightbox-open {
		overflow: hidden;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox {
		inset: 0;
		width: 100vw;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox::backdrop {
		background: rgba(0, 0, 0, .72);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__panel {
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-rows: 64px minmax(0, 1fr);
		background: #111;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__studio {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 12px;
		font-family: var(--font-body);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__avatar {
		display: grid;
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		place-items: center;
		border-radius: 50%;
		background: var(--primary);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__avatar[data-studio-avatar] {
		background: var(--primary);
		color: #fff;
		box-shadow: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__avatar[data-studio-avatar] [data-studio-avatar-fallback] {
		font-size: 12px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__avatar img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		object-fit: cover;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__identity {
		display: flex;
		min-width: 0;
		align-items: baseline;
		gap: 8px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__title {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		color: #fff;
		font-family: var(--font-body);
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		letter-spacing: 0;
		font-synthesis: none;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__count {
		flex: 0 0 auto;
		color: #aaa;
		font-size: 12px;
		font-weight: 500;
		line-height: 18px;
		letter-spacing: 0;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__header > button {
		display: inline-grid;
		place-items: center;
		border: 0;
		border-radius: 10px;
		color: #fff;
		cursor: pointer;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__header > button {
		width: 44px;
		height: 44px;
		background: #282828;
		font-size: 17px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage {
		--detail-edge-width: 180px;
		--detail-edge-hover-width: 270px;
		--detail-edge-prev-motion-width: var(--detail-edge-width);
		--detail-edge-next-motion-width: var(--detail-edge-width);
		--detail-edge-arrow-width: 54px;
		--detail-edge-arrow-hover-width: 88px;
		--detail-edge-prev-arrow-motion-width: var(--detail-edge-arrow-width);
		--detail-edge-next-arrow-motion-width: var(--detail-edge-arrow-width);
		position: relative;
		display: grid;
		min-height: 0;
		place-items: center;
		overflow: hidden;
		padding: 24px var(--detail-edge-width) 46px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__canvas {
		position: relative;
		display: grid;
		width: 100%;
		height: 100%;
		min-height: 0;
		place-items: center;
		cursor: grab;
		perspective: 1600px;
		perspective-origin: center center;
		touch-action: none;
		user-select: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__canvas:active {
		cursor: grabbing;
	}

	/* The center and the two waiting previews are independent surfaces.
	   Waiting previews never participate in tube animation, so they cannot
	   disappear while the center is rotating. */
	[data-detail-layout="gallery"] .detail-pc-lightbox__tube {
		position: relative;
		width: min(1140px, 100%);
		height: 100%;
		overflow: visible;
		margin: 0 auto;
		background: #111;
		isolation: isolate;
		transform-style: preserve-3d;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__frame,
	[data-detail-layout="gallery"] .detail-pc-lightbox__motion {
		position: absolute;
		inset: 0;
		margin: 0;
		background: #111;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__frame {
		z-index: 1;
		display: grid;
		place-items: center;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__image {
		display: block;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		margin: auto;
		object-fit: contain;
		object-position: center;
		backface-visibility: hidden;
		pointer-events: none;
		user-select: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__motion {
		z-index: 3;
		overflow: visible;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: scale(var(--detail-tube-forward-scale, 1));
		transform-origin: center center;
		transform-style: preserve-3d;
		will-change: opacity, transform;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__motion.is-active {
		visibility: visible;
		opacity: 1;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__tube-canvas {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge {
		position: absolute;
		z-index: 6;
		top: 24px;
		bottom: 46px;
		width: var(--detail-edge-width);
		overflow: hidden;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, .12);
		background: #111;
		color: #fff;
		opacity: .9;
		cursor: pointer;
		transition: width 240ms var(--ease-out), opacity 180ms ease, border-color 180ms ease;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--prev {
		left: 0;
		border-left: 0;
		border-radius: 0 18px 18px 0;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--next {
		right: 0;
		border-right: 0;
		border-radius: 18px 0 0 18px;
	}


	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-preview {
		position: absolute;
		z-index: 0;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
	}

	/* Each waiting area owns two full-size surfaces. During a move the current
	   surface exits while the prepared surface enters from the opposite side.
	   Their rectangles meet exactly at one edge, so the bordered waiting area
	   is continuously covered without opacity/visibility gaps. */
	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-preview-layer {
		position: absolute;
		inset: 0;
		overflow: visible;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		will-change: transform;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-preview-layer--buffer {
		visibility: hidden;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge-preview-layer--primary {
		transform: translate3d(var(--detail-edge-primary-shift, 0%), 0, 0);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge-preview-layer--buffer {
		visibility: visible;
		transform: translate3d(var(--detail-edge-buffer-shift, 100%), 0, 0);
	}

	/* The texture itself is always 270px wide. The 180px resting panel clips
	   this same surface; hover simply reveals another 90px without rescaling. */
	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-preview-layer > img {
		position: absolute;
		top: 0;
		bottom: 0;
		display: block;
		width: var(--detail-edge-hover-width);
		height: 100%;
		max-width: none;
		max-height: none;
		object-fit: cover;
		pointer-events: none;
		user-select: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--prev .detail-pc-lightbox__edge-preview-layer > img {
		right: 0;
		object-position: right center;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--next .detail-pc-lightbox__edge-preview-layer > img {
		left: 0;
		object-position: left center;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge::after {
		position: absolute;
		z-index: 1;
		inset: 0;
		content: "";
		background: linear-gradient(180deg, rgba(17, 17, 17, .08), rgba(17, 17, 17, .5));
		pointer-events: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge:hover {
		width: var(--detail-edge-hover-width);
		opacity: 1;
	}

	/* Arrow-key navigation is a separate input mode. If the mouse happens to
	   remain parked over the opposite waiting image, suppress that stale hover
	   until the pointer moves again; the active side is still driven by the
	   tube progress selectors below. */
	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-keyboard-nav:not(.is-tube-moving) .detail-pc-lightbox__edge:hover {
		width: var(--detail-edge-width);
		opacity: .9;
	}

	/* Navigation motion uses the exact same JS progress as the tube. The
	   active waiting area stays physically anchored to left:0/right:0 and its
	   width expands toward the real hover width, then contracts with the tube.
	   This preserves continuous edge coverage: no translateX means the outer
	   viewport edge can never expose a black gap while the panel moves. */
	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge {
		opacity: 1;
		/* Keep pointer hit-testing alive while the tube moves. A pointer click
		   that started from :hover must remain hovered through the final frame;
		   pcPortfolioAnimating already blocks duplicate navigation requests. */
		transition: opacity 180ms ease, border-color 180ms ease;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--prev,
	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--prev:hover {
		width: var(--detail-edge-prev-motion-width);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--next,
	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--next:hover {
		width: var(--detail-edge-next-motion-width);
	}

	/* gallery gallery navigation reuses the index "전체보기" arrow language.
	   The arrow sits at the lower inner edge of each waiting preview so the
	   photography remains unobstructed. Its line grows toward the navigation
	   destination: NEXT -> right, PREV -> left. During tube motion its width is
	   driven by the same JS reveal progress as the active waiting panel. */
	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-arrow {
		position: absolute;
		z-index: 2;
		bottom: 28px;
		display: block;
		width: var(--detail-edge-arrow-width);
		height: 16px;
		color: #ff4848;
		pointer-events: none;
		filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .34));
		transition: width 240ms var(--ease-out);
		will-change: width;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--prev .detail-pc-lightbox__edge-arrow {
		right: 24px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--next .detail-pc-lightbox__edge-arrow {
		left: 24px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-arrow::before {
		position: absolute;
		top: 7px;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
		content: "";
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--next .detail-pc-lightbox__edge-arrow::before {
		left: 0;
		right: 9px;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--prev .detail-pc-lightbox__edge-arrow::before {
		left: 9px;
		right: 0;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-arrow::after {
		position: absolute;
		top: 0;
		width: 17px;
		height: 16px;
		background: url("../svg/common/icon-section-more-arrow-figma.svg") center / contain no-repeat;
		content: "";
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--next .detail-pc-lightbox__edge-arrow::after {
		right: 0;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge--prev .detail-pc-lightbox__edge-arrow::after {
		left: 0;
		transform: scaleX(-1);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge:hover .detail-pc-lightbox__edge-arrow {
		width: var(--detail-edge-arrow-hover-width);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-keyboard-nav:not(.is-tube-moving) .detail-pc-lightbox__edge:hover .detail-pc-lightbox__edge-arrow {
		width: var(--detail-edge-arrow-width);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--prev .detail-pc-lightbox__edge-arrow,
	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--prev:hover .detail-pc-lightbox__edge-arrow {
		width: var(--detail-edge-prev-arrow-motion-width);
		transition: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--next .detail-pc-lightbox__edge-arrow,
	[data-detail-layout="gallery"] .detail-pc-lightbox__stage.is-tube-moving .detail-pc-lightbox__edge--next:hover .detail-pc-lightbox__edge-arrow {
		width: var(--detail-edge-next-arrow-motion-width);
		transition: none;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__progress {
		position: absolute;
		z-index: 7;
		left: 50%;
		bottom: 22px;
		width: min(320px, 28vw);
		height: 2px;
		overflow: hidden;
		border-radius: 999px;
		background: rgba(255, 255, 255, .18);
		transform: translateX(-50%);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__progress > span {
		display: block;
		width: var(--detail-progress, 0%);
		height: 100%;
		border-radius: inherit;
		background: var(--primary);
		transition: width 220ms var(--ease-out);
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox__edge:disabled {
		visibility: hidden;
	}

	[data-detail-layout="gallery"] .detail-pc-lightbox button:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 3px;
	}

	/* Edge navigation is intentionally image-led. Keyboard ArrowLeft/ArrowRight
	   controls navigation globally, so a focused edge must not leave a red
	   activation frame behind after pointer or keyboard navigation. */
	[data-detail-layout="gallery"] .detail-pc-lightbox button.detail-pc-lightbox__edge:focus-visible {
		outline: none;
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	[data-detail-layout="gallery"] .detail-pc-lightbox__edge,
	[data-detail-layout="gallery"] .detail-pc-lightbox__edge-arrow,
	[data-detail-layout="gallery"] .detail-pc-lightbox__progress > span {
		transition: none;
	}
}

@media (max-width: 1024px) {
	[data-detail-layout="gallery"] #portfolio .detail-slider-pagination-rail--portfolio {
		height: auto;
		min-height: 38px;
		padding-block: 16px;
	}
}

/* ==========================================================================
   gallery mobile decision-first summary — operation facts stay visible
   ========================================================================== */
@media (max-width: 1024px) {
	/* The operation/SNS block is moved into the identity grid before the long
	   introduction. It is always visible; only descriptive features follow the
	   introduction disclosure state. */
	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .detail-summary-meta {
		grid-column: 1 / -1;
		grid-row: 4;
		display: flex;
		width: 100%;
		min-width: 0;
		margin: 16px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #fff;
		box-shadow: none;
	}

	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .detail-summary-meta .detail-summary-meta__grid {
		margin-top: 0;
		padding-top: 0;
		border-top: 1px solid var(--line);
	}

	/* Each row owns the same inset from its divider. Previously the first row
	   also inherited grid padding, which made the parking/pet row look tighter. */
	[data-detail-layout="gallery"] .detail-summary-main .detail-summary-meta__item {
		min-height: 78px;
		padding-top: 12px;
		padding-bottom: 10px;
	}

	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .detail-summary-meta .studio-summary-card__social {
		margin-top: 8px;
		padding-bottom: 0;
	}

	[data-detail-layout="gallery"] .detail-summary-main .studio-identity > .studio-summary-card__intro {
		grid-row: 5;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--line);
	}

	/* Once the operation node has moved into the summary, the desktop sidebar
	   has no mobile-visible content. Prevent an empty sidebar from adding space. */
	[data-detail-layout="gallery"] .detail-sidebar {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* ==========================================================================
   gallery related studios — compact action based on the approved My Page more link
   ========================================================================== */
[data-detail-layout="gallery"] #related > .detail-related-head {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

[data-detail-layout="gallery"] .detail-related-head .detail-section-title {
	min-width: 0;
}

[data-detail-layout="gallery"] #related > .detail-related-head .detail-section-title > h2 {
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
}

[data-detail-layout="gallery"] .detail-related-more {
	--detail-related-more-width: 88px;
	--detail-related-more-line-width: 74px;
	--detail-related-more-arrow-left: calc(var(--detail-related-more-line-width) - 12px);
	--detail-related-more-shift: calc(var(--detail-related-more-width) - var(--detail-related-more-line-width));
	position: relative;
	display: block;
	width: var(--detail-related-more-width);
	min-width: var(--detail-related-more-width);
	height: 26px;
	padding: 0 0 6px;
	border: 0;
	color: var(--primary);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}

[data-detail-layout="gallery"] .detail-related-pagination {
	display: none;
}

[data-detail-layout="gallery"] .detail-related-more::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--detail-related-more-line-width);
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transition: width .48s var(--ease-more);
}

[data-detail-layout="gallery"] .detail-related-more::after {
	content: "";
	position: absolute;
	left: var(--detail-related-more-arrow-left);
	top: 2px;
	width: 12px;
	height: 11px;
	background: url("../svg/common/icon-section-more-arrow-figma.svg") center / contain no-repeat;
	transition: transform .48s var(--ease-more);
}

[data-detail-layout="gallery"] .detail-related-more:focus-visible::before {
	width: var(--detail-related-more-width);
}

[data-detail-layout="gallery"] .detail-related-more:focus-visible::after {
	transform: translateX(var(--detail-related-more-shift));
}

@media (hover: hover) and (pointer: fine) {
	[data-detail-layout="gallery"] .detail-related-more:hover::before {
		width: var(--detail-related-more-width);
	}

	[data-detail-layout="gallery"] .detail-related-more:hover::after {
		transform: translateX(var(--detail-related-more-shift));
	}
}

@media (max-width: 1024px) {
	body[data-page-variant="studio-detail"][data-detail-layout="gallery"].page-studio-detail .fig-detail-section#related {
		padding-bottom: 10px;
	}

	[data-detail-layout="gallery"] #related > .detail-related-head {
		gap: 8px;
	}

	[data-detail-layout="gallery"] #related > .detail-related-head .detail-section-title > h2 {
		font-size: 16px;
		line-height: 19px;
		font-weight: 700;
		letter-spacing: 0;
		word-break: keep-all;
	}

	[data-detail-layout="gallery"] .detail-related-more {
		--detail-related-more-width: 66px;
		--detail-related-more-line-width: 66px;
		flex: 0 0 66px;
	}

	/* Compact derivative of index's popular studio card. One full card and
	   half of the following card communicate horizontal movement while the
	   detail data, favorite control and click routing remain unchanged. */
	[data-detail-layout="gallery"] .detail-related-swiper {
		width: 100%;
		max-width: none;
		overflow: hidden;
		padding: 0;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-list__track {
		display: flex;
		width: 100%;
		max-width: none;
		gap: 0;
		align-items: stretch;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card {
		box-sizing: border-box;
		display: block;
		width: auto;
		max-width: none;
		height: auto;
		min-width: 0;
		align-self: stretch;
		cursor: pointer;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__media {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1.42 / 1;
		overflow: hidden;
		border-radius: 10px;
		background-color: #f7f3ef;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__media::after {
		content: "";
		position: absolute;
		z-index: 2;
		inset: auto 0 0;
		height: 42%;
		background: linear-gradient(transparent, rgba(0, 0, 0, .38));
		pointer-events: none;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__media.is-fallback::after {
		opacity: 0;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__picture {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__badge {
		display: inline-flex;
		left: 10px;
		top: 10px;
		width: auto;
		min-width: 38px;
		height: 21px;
		padding: 0 8px;
		border-radius: 999px;
		font-size: 11px;
		line-height: 21px;
		letter-spacing: -.02em;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__media.is-fallback .related-card__badge {
		left: auto;
		right: 10px;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__content {
		width: 100%;
		height: auto;
		padding: 0;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__tags {
		display: flex;
		width: 100%;
		height: 21px;
		gap: 4px;
		margin-top: 10px;
		overflow: hidden;
		flex-wrap: nowrap;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__tags .studio-tag {
		flex: 0 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__tags .studio-tag:nth-child(n + 3) {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__identity {
		display: grid;
		width: 100%;
		min-height: 28px;
		height: auto;
		grid-template-columns: 28px minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 6px;
		margin: 8px 0 0;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__avatar[data-studio-avatar] {
		display: grid;
		width: 28px;
		height: 28px;
		padding: 0;
		overflow: hidden;
		border-radius: 50%;
		clip-path: circle(50% at 50% 50%);
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__avatar > img {
		width: 28px;
		height: 28px;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__avatar [data-studio-avatar-fallback] {
		font-size: 11px;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card h3 {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		font-size: 14px;
		line-height: 18px;
		font-weight: 700;
		letter-spacing: -.02em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__rating {
		display: inline-flex;
		min-width: 18px;
		justify-content: flex-end;
		color: var(--primary);
		font-size: 13px;
		line-height: 18px;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__interest-button {
		min-width: 0;
		min-height: 28px;
		gap: 3px;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__interest-button em:not([hidden]) {
		display: inline;
		max-width: 42px;
		overflow: hidden;
		font-size: 12px;
		line-height: 18px;
		font-weight: 600;
		text-overflow: ellipsis;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__location {
		display: flex;
		width: 100%;
		height: 17px;
		margin-top: 7px;
		overflow: hidden;
		color: var(--ink);
		font-size: 12px;
		line-height: 17px;
		font-weight: 400;
		letter-spacing: -.02em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__location-icon {
		width: 14px;
		height: 14px;
		flex: 0 0 14px;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__description,
	[data-detail-layout="gallery"] .detail-related-swiper .related-card__managed {
		display: none;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__price {
		display: flex;
		width: 100%;
		height: 22px;
		margin-top: 7px;
		align-items: flex-end;
		gap: 3px;
		overflow: hidden;
		color: var(--primary);
		white-space: nowrap;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__price strong {
		overflow: hidden;
		color: var(--primary);
		font-size: 17px;
		line-height: 22px;
		font-weight: 700;
		text-overflow: ellipsis;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__price small {
		padding-bottom: 1px;
		color: var(--text-disabled);
		font-size: 11px;
		line-height: 16px;
		font-weight: 500;
	}

	[data-detail-layout="gallery"] .detail-related-swiper .related-card__price--empty strong {
		color: var(--text-secondary);
		font-size: 12px;
		line-height: 18px;
		font-weight: 500;
	}

	[data-detail-layout="gallery"] .detail-related-pagination {
		box-sizing: border-box;
		position: static;
		display: flex;
		width: 100%;
		min-height: 18px;
		margin-top: 10px;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 6px;
		transform: none;
	}

	[data-detail-layout="gallery"] .detail-related-pagination .swiper-pagination-bullet {
		appearance: none;
		-webkit-appearance: none;
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		opacity: 1;
		cursor: pointer;
		transition: width .24s ease, flex-basis .24s ease, background-color .24s ease;
	}

	[data-detail-layout="gallery"] .detail-related-pagination .swiper-pagination-bullet-active {
		width: 24px;
		flex-basis: 24px;
		background: var(--primary);
	}

	[data-detail-layout="gallery"] .detail-related-pagination .swiper-pagination-bullet:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-detail-layout="gallery"] button.detail-disclosure-toggle,
	[data-detail-layout="gallery"] .detail-related-more::before,
	[data-detail-layout="gallery"] .detail-related-more::after,
	[data-detail-layout="gallery"] .detail-related-pagination .swiper-pagination-bullet {
		transition: none;
	}
}