/* SNAP HUB — Studio Register. Single source of truth for desktop and responsive page styles. */

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

/* SNAP HUB — studio register / Figma fidelity */
.page-studio-register {
	background: #fff;
	color: var(--ink);
}
.page-studio-register .skip-link {
	top: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-150%);
	transition: none;
}
.page-studio-register .skip-link:focus-visible {
	top: 12px;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
.fig-register {
	padding-top: 80px;
	background: #fff;
}
.fig-register-form {
	font-family: var(--font-body);
}
.register-tabs {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	height: 63px;
	border-bottom: 1px solid #ffd6d6;
}
.register-tabs a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #222;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}
.register-tabs a:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--primary);
	opacity: 0;
}
.register-tabs a.is-active {
	color: var(--primary);
}
.register-tabs a.is-active:after {
	opacity: 1;
}
#register-basic {
	border-radius: 15px;
}
.register-tabs+.register-block {
	margin-top: 31px;
}
.register-block>header {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
}
.register-section-icon {
	flex: 0 0 22px;
}
.register-block>header h2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}
.register-block>header em {
	margin-left: 4px;
	color: var(--primary);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px;
}
.register-block__content {
	display: grid;
	gap: 20px;
	margin-top: 24px;
	min-width: 0;
}
.field-group {
	min-width: 0;
	border: 0;
	padding: 0;
	margin: 0;
}
.field-group>legend,.form-field>span {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .14px;
}
.field-group em,.form-field em {
	color: var(--primary);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 14px;
}
.upload-delete {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--primary);
}
.form-field {
	position: relative;
	display: block;
	min-width: 0;
}
.form-field input,
.form-field select,
.form-field textarea,
.field-group select,
.tag-field>input,
.input-suffix {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	border: 1px solid #c5c6ca;
	border-radius: 10px;
	background: #fff;
	outline: 0;
	color: #222;
	font: 400 16px/24px var(--font-body);
}
.form-field input,
.form-field select,
.form-field textarea,
.field-group select,
.tag-field>input {
	padding: 0 16px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
	color: #b4b4b4;
}
.form-field textarea {
	height: 150px;
	padding-block: 13px;
	resize: none;
}
.form-field>small {
	position: absolute;
	right: 16px;
	bottom: 16px;
	color: var(--text-tertiary);
	font-size: 12px;
}
.form-field input:focus,
.form-field textarea:focus,
.field-group select:focus,
.tag-field>input:focus {
	border-color: var(--primary);
}
.field-button {
	display: grid;
	grid-template-columns: 1fr 150px;
	gap: 10px;
}
.field-button button {
	border-radius: 10px;
	background: var(--primary);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}
/* Reusable checkbox / radio choice components.
 * Type, surface, and state are independent:
 * - type: checkbox / radio
 * - surface: pink / white
 * - state: native input checked / unchecked
 */
.choice-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.register-choice-option {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	min-height: 44px;
	align-items: center;
	padding: 10px 18px 10px 46px;
	border: 1px solid transparent;
	border-radius: 10px;
	color: #191c1d;
	font-size: 16px;
	line-height: 22px;
	cursor: pointer;
}

.register-choice-option > span {
	min-width: 0;
	word-break: keep-all;
}

.register-choice-option > input {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 50%;
	left: 14px;
	width: 20px;
	height: 20px;
	margin: 0;
	transform: translateY(-50%);
	background: #fff;
	cursor: pointer;
}

.register-choice-option--checkbox > input[type="checkbox"] {
	width: 18px;
	height: 18px;
	border: 1px solid var(--primary-border);
	border-radius: 4px;
}

.register-choice-option--radio > input[type="radio"] {
	border: 1px solid var(--primary-border);
	border-radius: 50%;
}

.register-choice-option > input:focus-visible {
	outline: 2px solid rgba(255, 85, 85, .35);
	outline-offset: 2px;
}

/* Checkbox: square outline when inactive, coral square + white check when active. */
.register-choice-option--checkbox > input[type="checkbox"]:checked {
	border-color: var(--primary);
	background: var(--primary) url("../svg/register/checkbox-square-checked.svg") center / 18px 18px no-repeat;
}

/* Radio: outlined circle when inactive, coral circle + white center when active. */
.register-choice-option--radio > input[type="radio"]:checked {
	border-color: var(--primary);
	background: radial-gradient(circle, #fff 0 4px, var(--primary) 4px 10px);
}

/* Checked wording is coral for both control types. */
.register-choice-option > input:checked ~ span {
	color: var(--primary);
}

/* Pink surface: no outline while inactive, coral outline while active. */
.register-choice-option--surface-pink {
	background: var(--primary-surface);
}

.register-choice-option--surface-pink:has(> input:checked) {
	border-color: var(--primary);
}

/* White surface: coral outline in both states. */
.register-choice-option--surface-white {
	border-color: var(--primary-border);
	background: #fff;
}

.register-choice-option--surface-white:has(> input:checked) {
	border-color: var(--primary);
}

.register-choice-option:has(> input:disabled) {
	opacity: .45;
	cursor: not-allowed;
}

.register-choice-option > input:disabled {
	cursor: not-allowed;
}
.tag-field {
	display: grid;
	grid-template-columns: 246px 1fr;
	align-items: end;
	gap: 10px;
}
.tag-field>legend {
	grid-column: 1/-1;
}
.tag-field>div {
	display: flex;
	gap: 10px;
	min-width: 0;
	flex-wrap: wrap;
}
.tag-field>div>span {
	display: inline-flex;
	box-sizing: border-box;
	width: fit-content;
	min-width: 0;
	max-width: 100%;
	min-height: 48px;
	height: auto;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 0 14px;
	border: 1px solid var(--primary-border);
	border-radius: 10px;
	background: var(--primary-surface);
	color: var(--primary);
	font-size: 14px;
	white-space: normal;
}
.feature-tag__label {
	display: block;
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 20px;
}
.tag-field>div button {
	flex: 0 0 auto;
	margin-left: 0;
	color: var(--primary);
}
.sns-field {
	display: grid;
	gap: 10px;
}
#register-basic .register-block__content {
	grid-template-columns: repeat(2,1fr);
	gap: 22px 24px;
}
#register-basic .register-block__content>* {
	grid-column: 1/-1;
}
#register-product .register-block__content {
	gap: 24px;
}

.product-editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	border: 1px solid #c5c6ca;
	border-radius: 10px;
	background: var(--primary-surface);
}
.input-suffix {
	display: flex;
	overflow: hidden;
}
.input-suffix input {
	height: 46px;
	border: 0;
	border-radius: 0;
}
.input-suffix b {
	display: flex;
	min-width: 62px;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 600;
}
.add-outline {
	position: relative;
	height: 58px;
	border: 0;
	border-radius: 10px;
	background-color: #fff;
	color: var(--primary);
	font-size: 16px;
	background-image: linear-gradient(90deg,var(--primary) 55%,transparent 55%),linear-gradient(90deg,var(--primary) 55%,transparent 55%),linear-gradient(0deg,var(--primary) 55%,transparent 55%),linear-gradient(0deg,var(--primary) 55%,transparent 55%);
	background-size: 8px 1px,8px 1px,1px 8px,1px 8px;
	background-position: 0 0,0 100%,0 0,100% 0;
	background-repeat: repeat-x,repeat-x,repeat-y,repeat-y;
}
.outline-plus {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: -5px;
	color: var(--primary);
}
#register-portfolio .register-block__content {
	gap: 24px;
}
.register-actions {
	display: grid;
	grid-template-columns: 114px 436px;
	gap: 10px;
	width: 560px;
	height: 54px;
	margin: 39px auto 0;
}
.register-actions a,.register-actions button {
	display: flex;
	height: 54px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--primary);
	border-radius: 10px;
	color: var(--ink);
	font-size: 20px;
	line-height: 24px;
	letter-spacing: .1171875px;
	text-decoration: none;
}
.register-actions a {
	background: #fff;
	color: var(--primary);
	font-weight: 500;
}
.register-actions button {
	background: var(--primary);
	color: #fff;
	font-weight: 700;
}
.register-mobile-actions {
	display: none;
}
@media (min-width: 1025px)  {
	#register-basic .register-block__content>.contact-field {
		grid-column: 1/2;
	}
	#register-basic .register-block__content>.sns-field {
		grid-column: 1/-1;
		width: 665px;
	}
}
.studio-name-field input {
	border-color: var(--primary-border);
}
#register-product .tag-field > div > span {
	background: #fff;
}
#register-product .tag-field > input {
	width: 246px;
}
#register-product .tag-field > div {
	gap: 10px;
}
#register-product .tag-field > div > span {
	width: fit-content;
	min-width: 0;
	max-width: 100%;
}

/* Register icon system — external SVG assets, CSS driven */
.icon-svg {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.register-section-icon {
	width: 22px;
	height: 22px;
	color: var(--primary);
}
.icon-section-product {
	-webkit-mask-image: url("../svg/register/section-product.svg");
	mask-image: url("../svg/register/section-product.svg");
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
}
.icon-section-portfolio {
	-webkit-mask-image: url("../svg/register/section-portfolio.svg");
	mask-image: url("../svg/register/section-portfolio.svg");
}
.upload-plus-icon {
	width: 14px;
	height: 14px;
	color: var(--primary);
	-webkit-mask-image: url("../svg/mypage/icon-profile-photo.svg");
	mask-image: url("../svg/mypage/icon-profile-photo.svg");
}
.upload-delete-icon {
	display: block;
	width: 11px;
	height: 11px;
	background: transparent url("../svg/register/close-red.svg") center/11px 11px no-repeat;
	-webkit-mask-image: none;
	mask-image: none;
}
.icon-close-small {
	-webkit-mask-image: url("../svg/register/close-small.svg");
	mask-image: url("../svg/register/close-small.svg");
}
.icon-x-svg {
	width: 12px;
	height: 12px;
	color: currentColor;
}
.feature-icon {
	display: block;
	color: var(--primary);
}
.feature-icon--studio {
	width: 20px;
	height: 20px;
	background: transparent url("../svg/register/feature-studio.svg") center/20px 20px no-repeat;
	-webkit-mask-image: none;
	mask-image: none;
}
.feature-icon--product {
	width: 15px;
	height: 14px;
	color: var(--primary);
	-webkit-mask-image: url("../svg/register/feature-product.svg");
	mask-image: url("../svg/register/feature-product.svg");
}
.outline-plus {
	-webkit-mask-image: url("../svg/register/add-circle.svg");
	mask-image: url("../svg/register/add-circle.svg");
}
/* Tinted editor panels keep all data-entry surfaces white. */
.product-editor :is(input,select,textarea),
.product-editor .input-suffix {
	background-color: #fff;
}

/* Choice component variants shown independently from the shooting selection limit. */

#register-portfolio .add-outline {
	border: 1px solid var(--primary);
	background-color: #fff;
	background-image: none;
}

/* Studio register editor and sortable controls. */
/* SnapHub studio register editor and operational controls.
 * Base registration visual language comes from studio-register.css.
 * This layer only defines the operational information model introduced in current.
 */
.required-mark {
	color: var(--primary);
	font-style: normal;
}

.page-studio-register .intro-field .textarea-counter-wrap {
	position: relative;
	display: block;
}

.page-studio-register .intro-field .textarea-counter-wrap textarea {
	display: block;
	height: 180px;
	padding-bottom: 34px;
	border-radius: 10px;
}

.page-studio-register .intro-field .textarea-counter-wrap > small {
	position: absolute;
	right: 14px;
	bottom: 12px;
	padding-left: 8px;
	background: #fff;
	color: var(--primary);
	font-size: 12px;
	line-height: 16px;
}

/* Studio name + visibility: reuse the Figma input/toggle components without a parallel control system. */
.studio-name-visibility-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 16px;
	align-items: end;
	min-width: 0;
}

.studio-name-visibility-layout .studio-name-field input {
	border-color: #c5c6ca;
}

.studio-name-visibility-layout .studio-name-field input:focus {
	border-color: var(--primary);
}

.studio-visibility-field {
	box-sizing: border-box;
	display: flex;
	height: 48px;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 14px;
	border: 1px solid var(--primary);
	border-radius: 10px;
	background: #fff;
	transition: border-color .16s ease;
}

.studio-visibility-field.is-private {
	border-color: #c5c6ca;
}

.studio-visibility-field__label {
	font: 600 14px/20px var(--font-body);
	white-space: nowrap;
}

.studio-visibility-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	cursor: pointer;
}

.photo-policy-note,
.optional-section-note {
	padding: 18px 20px;
	border: 1px solid #ffd8da;
	border-radius: 12px;
	background: var(--primary-surface);
}

.photo-policy-note strong,
.optional-section-note strong {
	display: block;
	font-size: 15px;
	line-height: 22px;
}

.photo-policy-note p,
.optional-section-note p {
	margin-top: 5px;
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 20px;
}

.studio-photo-grid {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 12px;
}

.studio-photo-card {
	position: relative;
	min-width: 0;
	aspect-ratio: 4 / 3;
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	background: #f7f7f8;
	overflow: hidden;
}

.studio-photo-card > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.studio-photo-card--upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px dashed var(--primary-border);
	background: #fff;
	cursor: pointer;
	text-align: center;
}

.studio-photo-card--upload input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}

.studio-photo-card--upload .upload-plus-icon {
	width: 28px;
	height: 28px;
}

.studio-photo-card--upload strong {
	font-size: 14px;
}

.studio-photo-card--upload small {
	color: var(--text-tertiary);
	font-size: 11px;
}

.studio-photo-card.is-representative {
	border-color: var(--primary);
	box-shadow: inset 0 0 0 1px var(--primary);
}

.studio-photo-card__tools {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.representative-radio {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 1px 5px rgba(0,0,0,.08);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.representative-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.studio-photo-card.is-representative .representative-radio {
	background: var(--primary);
	color: #fff;
}

.studio-photo-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(17,17,17,.72);
}

.studio-photo-delete .icon-svg {
	width: 12px;
	height: 12px;
	filter: brightness(0) invert(1);
}

.studio-photo-order {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 42px;
	height: 26px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: rgba(17,17,17,.72);
	color: #fff;
	font: 700 11px/1 var(--font-inter);
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.studio-photo-order:active {
	cursor: grabbing;
}

.icon-drag-grip {
	width: 12px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("../svg/register/drag-grip.svg") center / contain no-repeat;
	mask: url("../svg/register/drag-grip.svg") center / contain no-repeat;
}

.studio-photo-card.is-sorting {
	z-index: 1000;
	margin: 0;
	opacity: .92;
	box-shadow: 0 12px 28px rgba(17,17,17,.18);
	pointer-events: none;
}

/* current operational fields.
 * Keep the existing studio-register form components as the visual source of truth.
 * New rules here are limited to layout/composition that does not exist in the Figma original.
 */
.shooting-main-grid {
	gap: 10px;
}

/* 선택 체크박스와 노출 우선순서 편집은 별도 섹션으로 분리합니다.
 * chip은 좌→우 순서가 실제 SORT_ORDER가 되며 handle에서만 drag를 시작합니다. */
.shooting-order-section {
	display: grid;
	gap: 12px;
	width: 100%;
	padding: 16px;
	border: 1px solid #eadde3;
	border-radius: 12px;
	background: #fff8fb;
}

.shooting-order-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

.shooting-order-section__head strong {
	color: #2a2a2a;
	font: 600 15px/22px var(--font-body);
}

.shooting-order-section__head small,
.shooting-order-empty {
	margin: 0;
	color: #7a7477;
	font: 400 12px/18px var(--font-body);
}

.shooting-order-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 38px;
}

.shooting-order-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 7px 8px 7px 13px;
	border: 1px solid #f0c8d7;
	border-radius: 999px;
	background: #fff;
	color: #353033;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
	transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.shooting-order-chip.is-dragging {
	z-index: 3;
	opacity: .82;
	border-color: var(--primary);
	box-shadow: 0 7px 18px rgba(221, 56, 117, .16);
}

/* 드래그 중 실제 삽입 위치를 점선 슬롯으로 표시합니다.
 * jQuery UI sortable의 placeholder class만 시각화하며 정렬 로직에는 관여하지 않습니다. */
.shooting-order-chip--placeholder {
	border: 2px dotted rgba(255, 63, 125, .65);
	background: rgba(255, 63, 125, .04);
	box-shadow: none;
}

.shooting-order-list.is-dragging {
	user-select: none;
}

.shooting-order-chip__primary {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	white-space: nowrap;
	font: 700 11px/18px var(--font-body);
}

.shooting-order-chip__primary[hidden] {
	display: none;
}

.shooting-order-chip__label {
	white-space: nowrap;
	font: 600 13px/20px var(--font-body);
}

.shooting-order-chip__handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #fff0f5;
	color: #cf3f73;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.shooting-order-chip__handle:active {
	cursor: grabbing;
}

.shooting-order-chip__handle:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.shooting-order-chip__grip {
	display: block;
	font: 700 14px/1 var(--font-inter);
	transform: translateY(-1px);
}

/* Related operational data reuses the product-editor card language.
 * Controls continue to use the existing studio-register form components. */

.location-mode-toggle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #f7f7f8;
}

.location-mode-toggle label {
	position: relative;
	cursor: pointer;
}

.location-mode-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.location-mode-toggle span {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 10px;
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 600;
}

.location-mode-toggle input:checked + span {
	background: #fff;
	color: var(--primary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.location-mode-toggle input:focus-visible + span {
	outline: 1px solid var(--primary-border);
	outline-offset: -1px;
}

.location-panel--address {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.location-panel[hidden],
.activity-region-field[hidden] {
	display: none;
}

.activity-region-field {
	padding: 0;
	border: 0;
	background: transparent;
}

.region-check-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Region/weekday selections reuse the existing register-choice-option component. */
.region-check-grid .register-choice-option,
.weekday-check-grid .register-choice-option {
	width: 100%;
	min-width: 0;
}

.region-check-grid .register-choice-option {
	justify-content: flex-start;
}

.activity-region-status {
	margin: 8px 0 0;
	color: var(--text-tertiary);
	font-size: 12px;
	line-height: 18px;
}

.activity-region-status.is-error {
	color: var(--primary);
}

.operating-hours-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 18px minmax(0, 1fr) 14px minmax(0, 1fr);
	grid-template-rows: auto 48px;
	align-items: center;
	column-gap: 6px;
	row-gap: 7px;
	width: 100%;
	min-width: 0;
}

.operating-hours-title,
.operating-hours-label {
	grid-row: 1;
	font-weight: 600;
}

.operating-hours-title {
	grid-column: 1;
	color: #191c1d;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: .14px;
	text-align: left;
}

.operating-hours-label {
	color: var(--text-tertiary);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: .12px;
	justify-self: end;
	text-align: right;
}

.operating-hours-label--weekday { grid-column: 3; }
.operating-hours-label--weekend { grid-column: 7; }

.operating-hours-select,
.operating-hours-separator {
	grid-row: 2;
	min-width: 0;
}

.operating-hours-select--weekday-open { grid-column: 1; }
.operating-hours-separator--weekday { grid-column: 2; }
.operating-hours-select--weekday-close { grid-column: 3; }
.operating-hours-select--weekend-open { grid-column: 5; }
.operating-hours-separator--weekend { grid-column: 6; }
.operating-hours-select--weekend-close { grid-column: 7; }

.operating-hours-separator {
	text-align: center;
	color: var(--text-tertiary);
}

/* Figma select component: 48px / #C5C6CA / 10px radius / coral chevron.
 * .field-group select in the base stylesheet has higher specificity, so this
 * selector intentionally owns the current select background including its icon. */
.field-group .register-select {
	width: 100%;
	height: 48px;
	min-width: 0;
	padding: 0 40px 0 16px;
	border: 1px solid #c5c6ca;
	border-radius: 10px;
	background-color: #fff;
	background-image: url("../svg/register/select-chevron.svg");
	background-position: calc(100% - 16px) center;
	background-size: 12px 8px;
	background-repeat: no-repeat;
	outline: 0;
	color: #222;
	font: 400 16px/24px var(--font-body);
	appearance: none;
	-webkit-appearance: none;
}

.field-group .register-select:focus {
	border-color: var(--primary);
}

.holiday-mode-list,
.parking-mode-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.weekday-check-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.weekday-check-grid .register-choice-option {
	justify-content: flex-start;
	padding-right: 10px;
}

.holiday-irregular-panel,
.parking-detail-panel,
.pet-detail-panel {
	width: 100%;
	margin-top: 12px;
}

.holiday-note-input,
.parking-detail-panel > input,
.pet-detail-panel > input,
.sns-fixed-row > input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #c5c6ca;
	border-radius: 10px;
	background: #fff;
	outline: 0;
	color: #222;
	font: 400 16px/24px var(--font-body);
}

.holiday-note-input::placeholder,
.parking-detail-panel > input::placeholder,
.pet-detail-panel > input::placeholder,
.sns-fixed-row > input::placeholder {
	color: #b4b4b4;
}

.holiday-note-input:focus,
.parking-detail-panel > input:focus,
.pet-detail-panel > input:focus,
.sns-fixed-row > input:focus {
	border-color: var(--primary);
}

.sns-fixed-list {
	display: grid;
	gap: 10px;
	width: 100%;
}

.sns-fixed-row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.sns-fixed-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}

.sns-fixed-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background-position: center;
	background-repeat: no-repeat;
}

.sns-fixed-icon--home { background-image: url("../svg/detail/icon-detail-sns-home.svg"); background-size: 16px 16px; }
.sns-fixed-icon--instagram { background-image: url("../svg/detail/icon-detail-sns-instagram.svg"); background-size: 16px 16px; }
.sns-fixed-icon--naver { background-image: url("../svg/detail/icon-detail-sns-naver.svg"); background-size: 16px 16px; }
.sns-fixed-icon--kakao { background-image: url("../svg/detail/icon-detail-sns-kakao.svg"); background-size: 18px 16px; }
.sns-fixed-icon--youtube { background-image: url("../svg/detail/icon-detail-sns-youtube.svg"); background-size: 18px 14px; }

/* Operational UX refinement: keep the original Figma components, reduce density only. */
.page-studio-register #register-basic .field-group em,
.page-studio-register #register-basic .form-field em {
	color: var(--text-tertiary);
	font-weight: 400;
}

.page-studio-register .photo-policy-note,
.page-studio-register .optional-section-note {
	border-color: #ffe0e1;
	background: #fff8f8;
}

.page-studio-register .product-editor {
	border-color: #ffd8da;
	background: #fff;
}

/* Match the original studio-register.html Figma delete control instead of the dark circular current button. */
.studio-photo-card .studio-photo-delete {
	position: absolute;
	top: 11px;
	right: 14px;
	left: auto;
	z-index: 4;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.studio-photo-card .studio-photo-delete .upload-delete-icon {
	display: block;
	width: 11px;
	height: 11px;
	filter: none;
}

/* Product editor: keep product status visible in the card header without mixing it into the input flow. */
.page-studio-register #register-product .product-editor {
	position: relative;
	transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.page-studio-register #register-product .product-editor.is-private {
	border-color: #d9dade;
	background: #fbfbfc;
}

.page-studio-register #register-product .product-editor__card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.page-studio-register #register-product .product-editor__sequence {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: var(--primary-surface);
	color: var(--primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.page-studio-register #register-product .product-editor__head-settings {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	margin-left: auto;
}

.page-studio-register #register-product .product-editor__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
	margin-left: 4px;
}

.page-studio-register #register-product .product-editor__primary-fields {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(150px, .8fr) minmax(150px, .8fr);
	gap: 16px;
	min-width: 0;
}

.page-studio-register #register-product .product-editor__primary-fields > * {
	min-width: 0;
}

.page-studio-register #register-product .product-editor__popular-control {
	flex: 0 0 auto;
}

.page-studio-register #register-product .product-editor__visibility-setting {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.page-studio-register #register-product .product-editor__visibility-status {
	color: var(--text-secondary);
	font: 600 14px/20px var(--font-body);
	white-space: nowrap;
}

.page-studio-register #register-product .product-editor:not(.is-private) .product-editor__visibility-status {
	color: var(--primary);
}

.page-studio-register #register-product .product-editor__visibility-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* Product money/time inputs: store raw integer values, present units as UI affixes. */
.page-studio-register #register-product .input-suffix input {
	min-width: 0;
	padding-right: 3px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.page-studio-register #register-product .input-suffix--price > b {
	min-width: 0;
	padding: 0 10px 0 2px;
	justify-content: flex-start;
}

.page-studio-register #register-product .input-suffix--duration .input-prefix {
	min-width: 44px;
	border-right: 1px solid #ececef;
	background: #f7f7f8;
	color: var(--text-tertiary);
	font-weight: 500;
}

.page-studio-register #register-product .input-suffix--duration > b:last-child {
	min-width: 0;
	padding: 0 10px 0 2px;
	justify-content: flex-start;
}

.page-studio-register #register-product :is(.product-editor__delete, .product-drag-handle) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text-tertiary);
}

.page-studio-register #register-product :is(.product-editor__delete, .product-drag-handle):focus-visible {
	outline: 2px solid rgba(255, 79, 92, .28);
	outline-offset: 1px;
}

.page-studio-register #register-product .product-editor__delete .icon-x-svg {
	width: 11px;
	height: 11px;
	background-color: var(--text-tertiary);
}

.page-studio-register #register-product .product-drag-handle {
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.page-studio-register #register-product .product-drag-handle .icon-drag-grip {
	width: 14px;
	height: 18px;
}

.page-studio-register #register-product .product-drag-handle:active {
	cursor: grabbing;
}

.page-studio-register #register-product .product-editor.is-sorting {
	z-index: 1000;
	margin: 0;
	opacity: .96;
	box-shadow: 0 12px 28px rgba(17,17,17,.16);
	pointer-events: none;
}

.register-sort-placeholder {
	box-sizing: border-box;
	min-width: 0;
	border: 1px dashed var(--primary);
	border-radius: 10px;
	background: var(--primary-surface);
}

.studio-photo-grid > .register-sort-placeholder {
	aspect-ratio: 4 / 3;
}

#register-product .register-sort-placeholder {
	width: 100%;
}

html.is-register-sorting,
html.is-register-sorting body {
	overscroll-behavior: contain;
	user-select: none;
}

.page-studio-register #register-product .add-outline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--primary);
	background-color: #fff;
	background-image: none;
}

.page-studio-register #register-product .add-outline .outline-plus {
	margin: 0;
	vertical-align: 0;
}
/* Studio introduction textarea: reduce only the inter-field space below the textarea.
 * Keep .tag-field internal legend/input spacing untouched. */
.page-studio-register #register-basic .intro-field {
	margin-bottom: -6px;
}



/* [REGISTER-SECTION-REORGANIZATION] */
/* Basic, introduction, operation and channel are top-level panels.
 * Internal register-info-group card surfaces are intentionally not used here. */

#register-introduction .register-block__content,
#register-operation .register-block__content,
#register-channel .register-block__content {
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

#register-operation .optional-section-note,
#register-operation .location-mode-field,
#register-operation .location-panel,
#register-operation .activity-region-field,
#register-operation .contact-field,
#register-operation .operating-hours-field,
#register-operation .holiday-field,
#register-operation .parking-field,
#register-operation .pet-companion-field,
#register-channel .sns-fixed-field {
	width: 100%;
	min-width: 0;
}

#register-channel .sns-fixed-field > legend {
	margin-bottom: 12px;
}

/* [REGISTER-SECTION-HEADER-INTEGRITY]
 * Figma source: icon frame 24x24, title 20/28 SemiBold, icon-title gap 8px.
 * Alignment uses normal flex flow only. */
.page-studio-register .register-block > header {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
}

.page-studio-register .register-block > header .register-section-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.page-studio-register .register-block > header .register-section-icon--original {
	display: block;
	object-fit: contain;
}

.page-studio-register .register-block > header .register-section-icon--fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: var(--primary);
}

.page-studio-register .register-block > header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.page-studio-register .register-block > header em {
	align-self: center;
}

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

/* SNAP HUB — studio register responsive
 * Breakpoint contract:
 * - Desktop: 1025px+
 * - Approved mobile interaction model: 1024px and below
 * - 431~1024px keeps the same mobile form inside the approved centered mobile canvas
 * - Narrow phone: 360px and below, content-safety only
 */

@media (min-width: 1025px) and (max-width: 1440px) {

	/* Compact desktop: keep both time selects inside their grid column instead
	 * of retaining the 232px desktop tracks that overflow at the 1025px edge. */

}

@media (max-width: 1024px) {
	.page-studio-register {
		overflow-x: hidden;
		overflow-x: clip;
	}

	/* The fixed mobile CTA owns the bottom action area in this tier; the footer is
	 * hidden by the canonical mobile-flow rule below. */

	.fig-register {
		min-height: 0;
		padding: 0 0 calc(86px + env(safe-area-inset-bottom));
	}


	.register-tabs {
		height: 57px;
		background: var(--primary-surface);
	}

	.register-tabs a {
		min-width: 0;
		font-size: 14px;
	}

	.register-tabs a::after {
		height: 2px;
	}


	.register-tabs + .register-block {
		margin-top: 0;
	}


	.register-block > header {
		min-height: 28px;
	}

	.register-section-icon {
		width: 20px;
		height: 20px;
		flex-basis: 20px;
	}

	.register-block > header h2 {
		flex: 0 0 auto;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		white-space: nowrap;
	}

	.register-block > header em {
		min-width: 0;
		font-size: 12px;
		line-height: 18px;
	}

	.register-block__content {
		gap: 18px;
		margin-top: 12px;
	}

	.field-group > legend,
	.form-field > span {
		margin-bottom: 8px;
		font-size: 14px;
		line-height: 16px;
	}

	.field-group em,
	.form-field em {
		font-size: 12px;
	}

	/*
	 * Mobile representative-photo cards use one responsive card rule.
	 * Keep the desktop 4:3 geometry, allow two columns on phones, and cap at the
	 * original 240x180 size as the viewport grows. This removes the previous
	 * 160/138px mixed widths without changing DOM order or upload behavior.
	 */

	/* Generic file cards remain fluid only where no section-specific size exists. */

	.form-field input,
.form-field select,
.form-field textarea,
.field-group select,
.tag-field > input,
.input-suffix {
		height: 48px;
	}

	.form-field textarea {
		height: 150px;
	}

	.choice-list {
		gap: 8px;
	}

	.register-choice-option {
		min-height: 44px;
		padding: 8px 12px 8px 38px;
		font-size: 13px;
		line-height: 18px;
	}

	.register-choice-option > input {
		left: 10px;
	}

	.register-choice-option--checkbox > input[type="checkbox"] {
		width: 18px;
		height: 18px;
	}

	.register-choice-option--radio > input[type="radio"] {
		width: 20px;
		height: 20px;
	}

	.field-button {
		grid-template-columns: minmax(0, 1fr) 80px;
	}

	.field-button button {
		font-size: 14px;
	}

	.tag-field {
		grid-template-columns: minmax(0, 1fr);
	}

	.tag-field > legend {
		grid-column: auto;
	}

	.tag-field > div {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.tag-field > div > span {
		width: fit-content;
		min-width: 0;
		max-width: 100%;
		min-height: 48px;
		height: auto;
		padding-block: 10px;
		justify-self: start;
		justify-content: flex-start;
		white-space: normal;
	}

	.feature-tag__label {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
		line-height: 20px;
	}

	.sns-field {
		gap: 8px;
	}

	/* Use a flexible registered-SNS row throughout the <=1024px mobile-flow tier. */

	#register-basic .register-block__content {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	#register-basic .register-block__content > * {
		grid-column: auto;
	}

	.product-editor {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 16px 12px;
	}

	.product-editor > .tag-field {
		grid-column: auto;
	}

	.product-editor .tag-field {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Neutralize desktop ID-level fixed widths inside the product editor. */
	#register-product .tag-field > input {
		width: 100%;
	}

	#register-product .tag-field > div > span {
		width: fit-content;
		min-width: 0;
		max-width: 100%;
		justify-self: start;
		justify-content: flex-start;
	}

	.page-studio-register #register-product .product-editor__primary-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.page-studio-register #register-product .product-editor__name-field {
		grid-column: 1 / -1;
	}

	.page-studio-register #register-product .product-editor__card-head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 12px;
		row-gap: 10px;
	}

	.page-studio-register #register-product .product-editor__actions {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: end;
		margin-left: 0;
	}

	.page-studio-register #register-product .product-editor__sequence {
		grid-column: 1;
		grid-row: 2;
	}

	.page-studio-register #register-product .product-editor__head-settings {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		gap: 14px;
		margin-left: 0;
	}

	.input-suffix b {
		display: none;
	}

	.add-outline {
		height: 52px;
		font-size: 13px;
	}


	/*
	 * Figma portfolio card baseline is 180x140.
	 * Keep the original size whenever space allows; only fluid-shrink on narrow phones
	 * so the page never creates horizontal overflow.
	 */

	/* Mobile form controls must never force horizontal scrolling. */
	.fig-register-form :is(input, select, textarea, button),
.product-editor,
.input-suffix {
		min-width: 0;
		max-width: 100%;
	}

	.register-actions {
		display: none;
	}

	.register-mobile-actions {
		position: fixed;
		z-index: 850;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 8px;
		width: 100%;
		min-height: 75px;
		padding: 17px 19px calc(10px + env(safe-area-inset-bottom));
		transform: none;
		border-radius: 22px 22px 0 0;
		background: rgba(255, 255, 255, .98);
		box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
	}

	/*
	 * Register page TOP:
	 * align to the upper-right edge of the fixed mobile action bar.
	 * Keep the same geometry even when the shared TopButton JS adds .is-docked.
	 */
	.page-studio-register .top-button,
	.page-studio-register .top-button.is-docked {
		position: fixed;
		z-index: 860;
		top: auto;
		right: 19px;
		bottom: calc(87px + env(safe-area-inset-bottom));
	}


	/* Preserve the mobile action composition and safe-area padding across the fluid mobile tier. */
	@supports (padding: max(0px)) {
		.register-mobile-actions {
			padding-left: max(19px, env(safe-area-inset-left));
			padding-right: max(19px, env(safe-area-inset-right));
		}
	}

	.register-mobile-actions a,
	.register-mobile-actions button {
		display: flex;
		height: 48px;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--primary);
		border-radius: 12px;
		font-size: 16px;
		line-height: 24px;
		font-weight: 800;
		letter-spacing: .09375px;
		text-decoration: none;
	}

	.register-mobile-actions a {
		background: #fff;
		color: var(--primary);
		font-weight: 600;
	}

	.register-mobile-actions button {
		background: var(--primary);
		color: #fff;
	}
}


/* Mobile fidelity/safety: keep the same DOM flow and stack only controls that become cramped. */
@media (max-width: 1024px) {
	/* Registration is an action-focused mobile flow; the fixed CTA replaces footer navigation here. */
	.page-studio-register .site-footer {
		display: none;
	}


	.field-button {
		grid-template-columns: minmax(0, 1fr) 92px;
	}
}

/* Content-safety guard only; not a separate design tier. */
@media (max-width: 360px) {
	.register-block {
		padding-left: 10px;
		padding-right: 10px;
	}

}

/* Studio register editor responsive rules. */
/* SNAP HUB — operational register current responsive.
 * Tablet has no independent artwork. <=1024px follows the approved mobile form.
 * 431~1024px keeps the approved 430px mobile canvas centered with neutral gray gutters.
 */
@media (max-width: 1024px) {
	.photo-policy-note,
	.optional-section-note {
		padding: 14px;
		border-radius: 10px;
	}

	.studio-photo-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 10px;
	}

	.studio-photo-card__tools {
		left: 6px;
		right: 6px;
		bottom: 6px;
	}

	.representative-radio {
		min-height: 28px;
		padding-inline: 8px;
		font-size: 10px;
	}

	.studio-photo-delete {
		width: 28px;
		height: 28px;
	}

	.page-studio-register #register-product .input-suffix b {
		display: flex;
		min-width: 44px;
		padding-inline: 8px;
		flex: 0 0 auto;
		font-size: 11px;
	}

	.page-studio-register #register-product .input-suffix input {
		min-width: 0;
		padding-inline: 10px 3px;
	}

	.page-studio-register #register-product .input-suffix--price > b,
	.page-studio-register #register-product .input-suffix--duration > b:last-child {
		min-width: 0;
		padding: 0 8px 0 2px;
		justify-content: flex-start;
	}

	.page-studio-register #register-product .input-suffix--duration .input-prefix {
		min-width: 40px;
		padding-inline: 8px;
		justify-content: center;
	}
}

@media (max-width: 1024px) {

	.region-check-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shooting-main-grid .register-choice-option,
	.region-check-grid .register-choice-option {
		font-size: 14px;
		line-height: 20px;
	}

	.operating-hours-grid {
		grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 14px minmax(0, 1fr) 12px minmax(0, 1fr);
		column-gap: 5px;
		row-gap: 6px;
	}

	.weekday-check-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sns-fixed-row {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 10px;
	}

	.sns-fixed-label {
		justify-content: center;
		gap: 0;
	}

	.sns-fixed-label-text {
		display: none;
	}

	.studio-photo-card .studio-photo-delete {
		top: 9px;
		right: 10px;
		width: 24px;
		height: 24px;
	}

	.studio-photo-order {
		top: 7px;
		left: 7px;
		min-width: 40px;
		height: 25px;
		padding-inline: 7px;
	}
}

@media (max-width: 520px) {
	.studio-name-visibility-layout {
		grid-template-columns: minmax(0, 1fr) 132px;
		gap: 10px;
	}

	.studio-visibility-field {
		padding-inline: 12px;
		gap: 8px;
	}

	.studio-visibility-field__label {
		font-size: 13px;
	}

	.location-mode-toggle span {
		gap: 6px;
		font-size: 13px;
		line-height: 18px;
	}

	.operating-hours-grid {
		grid-template-columns: minmax(0, 1fr) 9px minmax(0, 1fr) 6px minmax(0, 1fr) 9px minmax(0, 1fr);
		column-gap: 3px;
	}

	.operating-hours-label {
		font-size: 12px;
		line-height: 18px;
	}

	.field-group .operating-hours-select {
		padding: 0 24px 0 8px;
		background-position: calc(100% - 8px) center;
		background-size: 10px 7px;
		font-size: 12px;
	}

	.sns-fixed-row {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 10px;
	}


	.sns-fixed-icon {
		width: 20px;
		height: 20px;
		flex-basis: 20px;
	}

	.page-studio-register #register-basic .field-group em,
	.page-studio-register #register-basic .form-field em {
		display: block;
		margin-top: 4px;
		line-height: 18px;
	}

	.page-studio-register .product-editor {
		padding: 14px 12px;
	}
}

/* 431~1024px intentionally inherits current-responsive-canvas.css:
 * approved 430px mobile composition centered on the neutral gray tablet canvas. */

@media (max-width: 360px) {
	.studio-name-visibility-layout {
		grid-template-columns: 1fr;
	}
}


/* [REGISTER-SECTION-HEADER-INTEGRITY: MOBILE] */
@media (max-width: 600px) {
	.page-studio-register .register-block > header {
		gap: 8px;
		min-height: 28px;
	}

	.page-studio-register .register-block > header .register-section-icon {
		flex-basis: 24px;
		width: 24px;
		height: 24px;
	}

	.page-studio-register .register-block > header .register-section-icon--fa {
		font-size: 18px;
	}

	.page-studio-register .register-block > header h2 {
		font-size: 16px;
		font-weight: 600;
		line-height: 28px;
	}
}

/* =========================================================
 * Studio register - Daum Postcode layer wrapper
 * Postcode 내부 UI는 API가 제공하며, 여기서는 외곽 레이어의 배치/반응형만 담당합니다.
 * ========================================================= */
html.is-address-layer-open,
body.is-address-layer-open {
	overflow: hidden;
}

.studio-address-layer {
	position: fixed;
	z-index: 1200;
	inset: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(17, 17, 17, .52);
}

.studio-address-layer[hidden] {
	display: none !important;
}

.studio-address-layer__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: min(520px, 100%);
	height: 620px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 56px rgba(17, 17, 17, .22);
}

.studio-address-layer__head {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 0 16px 0 20px;
	border-bottom: 1px solid #ececec;
	background: #fff;
}

.studio-address-layer__head h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
	color: #111;
}

.studio-address-layer__head button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	color: #333;
	cursor: pointer;
}

.studio-address-layer__postcode {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

/* Review upload UX와 동일하게 실제 업로드 중에만 독립 로딩 카드를 생성합니다. */
.studio-photo-card--loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	border-style: dashed;
	border-color: var(--primary-border);
	background: #fff;
	text-align: center;
}

.studio-photo-card--loading strong {
	font-size: 13px;
	font-weight: 600;
}

.studio-photo-card--loading small {
	max-width: 100%;
	overflow: hidden;
	color: var(--text-tertiary);
	font-size: 11px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.studio-photo-card__loading-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--primary-surface);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: studio-photo-loading-spin .8s linear infinite;
}

@keyframes studio-photo-loading-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.studio-address-layer {
		align-items: center;
		padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
			max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	}

	.studio-address-layer__panel {
		width: 100%;
		height: min(620px, calc(100vh - 24px));
		height: min(620px, calc(100dvh - 24px));
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		border-radius: 14px;
	}

	.studio-address-layer__head {
		min-height: 52px;
		padding-inline: 16px 10px;
	}

	.studio-address-layer__head h2 {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.shooting-order-section {
		padding: 14px;
	}

	.shooting-order-section__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.shooting-order-list {
		gap: 7px;
	}

	.shooting-order-chip {
		min-height: 40px;
	}

	.shooting-order-chip__handle {
		width: 32px;
		height: 30px;
	}
}