@charset "utf-8";
/***** GRID *****/
.grid {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.app {
	flex-grow: 1;
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	padding: 70px 0 120px 0;
}

header {
	height: 30px;
	margin-bottom: 48px;
}

header h1 img {
	height: 48px;
	margin-bottom: 8px;
}

header.login {
	display: flex;
	justify-content: center;
	height: 32px;
	margin-bottom: 50px;
}

.app-heading {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

.app-heading h2 {
	color: var(--navy);
	font-size: 24px;
	font-weight: 700;
}

.sub-head {
	font-weight: 300;
}

/***** Field *****/
h2.field-name {
	color: var(--navy);
	font-size: 24px;
	font-weight: 700;
}

.field-crm {
	color: var(--navy);
	font-size: 15px;
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--stroke);
	border-radius: 5px;
}

.field-crm:disabled {
	color: #a9afb9;
	background-color: var(--back);
	border-color: var(--back);
}

.field-crm:focus,
.field-cost .field-crm:focus {
	border-color: var(--primary);
	box-shadow: 0 1px 6px color-mix(in srgb, var(--primary), transparent 75%), 0 1px 6px color-mix(in srgb, var(--primary), transparent 75%), #fff 0 0 0 1000px inset;
}

.field-cost .field-crm,
.field-cost .field-cost:disabled {
	color: var(--navy);
	font-size: 18px;
	font-weight: 600;
	text-align: right;
	padding: 12px;
	padding-right: 30px;
	border-color: var(--navy);
	background-color: #fff;
}

.field-cost::after {
	display: block;
	position: absolute;
	right: 12px;
	top: 15px;
	color: var(--navy);
	font-size: 16px;
	content: "원";
}

textarea.field-area {
	color: var(--navy);
	font-size: 15px;
	width: 100%;
	min-height: 68px;
	padding: 10px 12px;
	border: 1px solid var(--stroke);
	border-radius: 5px;
	resize: none;
}

textarea.field-area:focus {
	border-color: var(--primary);
	box-shadow: 0 1px 6px color-mix(in srgb, var(--primary), transparent 75%), 0 1px 6px color-mix(in srgb, var(--primary), transparent 75%), #fff 0 0 0 1000px inset;
}

p.caption {
	position: absolute;
}

.cmmt {
	width: 100%;
	color: var(--primary);
	font-size: 14px;
}

.cmmt::before {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--primary);
	content: "";
	vertical-align: middle;
	margin: -2px 6px 0 6px;
}

select.crm-select {
	appearance: none;
	font-size: 15px;
	background: #fff url(/signup/images/ico-select-arrow.svg) calc(100% - 8px) 50%;
	border-radius: 4px;
	border: 1px solid var(--stroke);
	padding: 10px 12px;
	padding-right: 34px;
	min-height: 48px;
	width: 100%;
	cursor: pointer;
}

select.crm-select:focus {
	border: var(--primary) 1px solid;
	outline: none;
}

select.crm-select.email {
	width: 35%;
	flex-shrink: 0;
}

.copy-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 12px;
	color: #555;
}

/***** File Upload *****/
input[type="file"].upload-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.upload-label {
	display: block;
	color: var(--navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2em;
	text-align: center;
	padding: 14px 24px;
	border-radius: 5px;
	border: 1px solid var(--navy);
	background-color: #fff;
	cursor: pointer;
}

/***** Button *****/
.btn {
	display: block;
	color: var(--navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2em;
	text-align: center;
	padding: 14px 24px;
	border-radius: 5px;
	border: 1px solid var(--navy);
	background-color: #fff;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn:hover {
	background-color: var(--back);
}

.btn:disabled {
	color: #a5adb7;
	background-color: #d0d6dd;
	cursor: auto;
}

.btn.primary {
	color: #fff;
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn.primary:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
}

.btn.middle {
	font-size: 16px;
	padding: 18px 12px;
}

.btn.max {
	font-size: 18px;
	font-weight: 600;
	padding: 19px 12px;
}

.btn.small {
	padding: 10px 20px;
}

.btn.small-gray {
	font-size: 12px;
	background-color: var(--back);
	border-width: 0;
}

.btn.dark {
	color: #fff;
	background-color: var(--navy);
}

.btn.dark:hover {
	background-color: var(--navy-hover);
}

.btn.red {
	color: #fff;
	background-color: var(--red);
	border-color: var(--red);
}
.btn.red:disabled {
	color: #c6a1a1;
	background-color: #e3c8c8;
	border-color: #e3c8c8;
}

.btn.stroke {
	border-color: var(--stroke);
}

.btn.stroke:hover {
	background-color: var(--stroke);
}

/***** Group *****/
.login-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.login-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.user-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.field-group-inline {
	display: flex;
	gap: 16px;
}

.field-group-inline > div {
	flex-grow: 1;
}

.field-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field-group label {
	font-size: 14px;
}

.field-group label em {
	color: var(--red);
}

.field-inline {
	display: flex;
	gap: 8px;
	align-items: center;
}

.field-inline button,
.field-inline label {
	flex-shrink: 0;
	width: 110px;
	padding: 14px;
}

.field-divide {
	width: 100%;
	height: 1px;
	background-color: var(--navy);
}

.btn-group {
	display: flex;
	gap: 16px;
	margin-top: 60px;
}

.btn-group button {
	flex-grow: 1;
}

.btn-group.narrow {
	gap: 12px;
	margin-top: 0;
}

.btn-group-between {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.btn-group-payment {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.btn-group-payment button {
	width: calc((100% / 3) - (((3 - 1) / 3) * 12px));
}

.btn-group-payment button:nth-child(1),
.btn-group-payment button:nth-child(2) {
	width: calc((100% / 2) - (((2 - 1) / 2) * 12px));
}

.btn-group-payment button.active {
	color: #fff;
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn-group-won {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.btn-group-won button {
	width: calc((100% / 4) - (((4 - 1) / 4) * 8px));
}

.btn-group-won button:active {
	color: #fff;
	background-color: var(--navy);
	border-color: var(--navy);
}

/***** Info User *****/
.user-card {
	padding: 24px 16px;
	border-radius: 12px;
	background-color: var(--silver);
}

.user-inline {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.user-profile {
	display: flex;
	align-items: center;
	gap: 16px;
}

.user-thumb {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
}

.user-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center; /* 가운데 정렬 */
}

.user-name {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

.user-name__full {
	color: var(--navy);
	font-size: 22px;
	font-weight: 600;
}

/***** Info Card *****/
.info-card {
	padding: 24px 16px;
	border-radius: 12px;
	border: 1px solid var(--navy);
}

.info-card.gray {
	background-color: var(--back);
	border-width: 0;
}

ul.info-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--navy);
	font-weight: 600;
}

ul.info-list li img {
	width: 32px;
	height: 32px;
	margin-right: 8px;
	object-fit: contain; /* 정사각형 안에 비율 유지 */
	display: block; /* 인라인 기본 속성 제거 → 공간 낭비 방지 */
}

ul.info-list li em {
	font-weight: 400;
}

ul.info-list li .account {
	flex: 1; /* 남은 공간을 전부 차지 */
	font-size: larger;
	text-align: center; /* (선택) 가운데 정렬 */
}

ul.info-list li strong {
	color: var(--red);
	font-weight: 600;
}

ul.info-list li:not(:last-child) {
	margin-bottom: 16px;
}

ul.info-list li.btn-plan {
	display: flex;
	gap: 12px;
}

ul.info-list li.btn-plan .btn {
	flex-grow: 1;
}

a.user-link {
	color: var(--navy);
	border-radius: 12px;
	padding: 16px;
	border: 1px solid var(--stroke);
	background: url("/signup/images/ico-skip.svg") calc(100% - 12px) 50%;
}

a.user-link::before {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("/signup/images/ico-store.png") 0 / 20px;
	margin-right: 10px;
	content: "";
	vertical-align: middle;
}

a.user-link.corp::before {
	background-image: url("/signup/images/ico-corp.png");
}

a.user-link.kakao::before {
	background-image: url("/signup/images/ico-kakao.png");
}

/***** Payment Message *****/
.payment-card {
	display: flex;
	flex-direction: column;
	padding: 24px 16px;
	border-radius: 12px;
	background-color: var(--back);
	align-items: center;
	gap: 12px;
}

.payment-card i {
	width: 100px;
}

.payment-card p {
	text-align: center;
}

.payment-card p.strong {
	color: var(--navy);
	font-weight: 700;
	font-size: 24px;
}

.payment-card.faield {
	background-color: #fff8f8;
}

.payment-card.faield p.strong {
	color: var(--red);
}

/******* Mobile *******/
@media (max-width: 480px) {
	/*** GRID ***/
	.app {
		padding: 24px 16px 68px 16px;
	}

	header {
		margin-bottom: 18px;
	}

	header.login {
		margin: 30px 0;
	}

	header h1 img {
		height: 32px;
	}

	header.login h1 img {
		height: 32px;
	}

	.sub-head {
		font-size: 13px;
	}

	/*** Form & Field ***/
	.form-group {
		gap: 16px;
	}

	.field-inline button,
	.field-inline label {
		width: 100px;
	}

	/*** Button ***/
	.btn-group {
		margin-top: 48px;
	}

	.btn {
		font-size: 13px;
		padding: 12px 12px;
	}

	.btn.max {
		font-size: 16px;
	}

	.btn.middle {
		font-size: 14px;
		padding: 16px 12px;
	}

	.btn.small {
		font-size: 12px;
		padding: 10px 16px;
	}

	select.crm-select.email {
		width: 38%;
	}

	/*** User Profile ***/
	.user-profile {
		gap: 12px;
	}

	.user-thumb {
		width: 38px;
		height: 38px;
	}

	.user-name {
		font-size: 12px;
	}

	.user-name__full {
		font-size: 16px;
	}

	ul.info-list li {
		font-size: 14px;
	}

	a.user-link {
		font-size: 14px;
	}

	/*** Payment ***/
	.payment-card p.strong {
		font-size: 20px;
	}

	.payment-card p {
		font-size: 14px;
	}

	.payment-card p br {
		display: none;
	}
}