@charset "UTF-8";
/* **************************************** *
 * RESET
 * **************************************** */
/* --- webfont --- */
@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 300;
    src: local('Apple SD Gothic Neo Light'),
    		url('../font/AppleSDGothicNeo-Light.woff2') format("woff2"),
			url('../font/AppleSDGothicNeo-Light.woff') format("woff");
			
}
@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 400;
    src: local('Apple SD Gothic Neo Regular'),
    		url('../font/AppleSDGothicNeo-Regular.woff2') format("woff2"),
			url('../font/AppleSDGothicNeo-Regular.woff') format("woff");
			
}
@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 500;
    src: local('Apple SD Gothic Neo Medium'),
    		url('../font/AppleSDGothicNeo-Medium.woff2') format("woff2"),
			url('../font/AppleSDGothicNeo-Medium.woff') format("woff");
			
}
@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 600;
    src: local('Apple SD Gothic Neo SemiBold'),
    		url('../font/AppleSDGothicNeo-SemiBold.woff2') format("woff2"),
			url('../font/AppleSDGothicNeo-SemiBold.woff') format("woff");
}
* {
	-webkit-text-size-adjust: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,
ol,li,fieldset,th,td,input,textarea,button,select,span,a {
	margin: 0;
	padding: 0;
	font-family: 'Apple SD Gothic Neo', sans-serif;
	letter-spacing: -0.02em;
	color: #222;
	font-weight: 300;
	font-size: 3.8889vw;
	line-height: 1.2;
}

html,body 
{
	min-height: 100vh;
	background-color: #fff
}

#wrap {
	min-height: 100vh;
	/*padding-bottom: env(safe-area-inset-bottom);*/

}

body {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

li {
	list-style: none
}

a {
	text-decoration: none;
}

a[href^="tel"] {
	font-style: normal
}

address,caption,em,var {
	font-style: normal;
	font-weight: normal
}

input,textarea,select {
	letter-spacing: normal;
	outline: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	background: none;
}

input::placeholder {
	color: #aeaeae;
	font-size: 4.2667vw;
}

ol,ul,dl {
	list-style: none
}

fieldset,img {
	border: 0;
	min-width: inherit
}

legend,caption {
	position: relative;
	left: -10000em;
	top: -10000em;
	width: 0;
	height: 0;
	opacity: 0;
}

img {
	border: 0;
	vertical-align: top
}

hr {
	display: none
}

table {
	border-spacing: 0;
	width: 100%;
	border: 0;
	table-layout: fixed
}

br {
	letter-spacing: normal
}

input {
	vertical-align: middle;
	border-radius: 0.0000vw;
	border: none;
	-webkit-border-radius: 0.0000vw;
	-moz-border-radius: 0.0000vw;
	appearance: none;
	-moz-appearance: none;
	/* Firefox */
	-webkit-appearance: none;
	/* Safari and Chrome */
	letter-spacing: -0.20vw;
}

input[type="text"],
input[type="password"],
input[type="number"] {
	-webkit-appearance: none
}

input[type="checkbox"] {
	-webkit-appearance: none;
	-webkit-border-radius: 0
}

input:checked[type="checkbox"] {
	-webkit-appearance: checkbox
}

input[type="radio"] {
	border: none;
	-webkit-appearance: none
}

input:disabled,select:disabled {
	opacity: 1
}

button{background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer} 
button:focus { outline: 0; }

button,input[type="button"],input[type="submit"],input[type="reset"],
input[type="file"] {
	-webkit-appearance: button;
	border-radius: 0
}

textarea,select {
	-webkit-appearance: none
}

::-webkit-scrollbar {
	display: none;
}

/* common attribute */
#wrap {
	width: 100%;
	overflow: hidden;
}

main {
	display: block;
	width: 100%;
	min-height: 100vh;
	background: #fff;
	overflow: hidden;
}

main.join,main.common {
	background: #f5f5f5;
}

main.bgWhite {
	background: #fff;
}

#skipNavi,.hidden {
	position: absolute;
	left: -10000em;
	top: -10000em;
	width: 0;
	height: 0;
	opacity: 0;
}

p.error {
	color: #db0a0a;
	font-size: 3.4667vw;
}

p.correct {
	color: #2962c2;
	font-size: 3.4667vw;
}

.terms-container {
	position: fixed;
	bottom: calc(15.5556vw + env(safe-area-inset-bottom)); /* 버튼 높이보다 조금 위에 */
	width: 100%;
	background: #f9f9f9;
	padding: 16px;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	z-index: 10;
}

.term-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.term-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.term-title {
	font-weight: bold;
	flex: 1;
}

.term-link {
	color: #cccccc;
	text-decoration: underline;
	font-size: 14px;
}

.checkbox-circle {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}

/* 기본 구조 숨기기 */
.checkbox-circle input[type="checkbox"] {
	display: none;
}

/* 커스텀 동그란 체크박스 */
.custom-checkmark {
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 2px solid #aaa;
	border-radius: 50%;
	background-color: white;
	position: relative;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* 체크되었을 때 내부 아이콘 스타일 */
.checkbox-circle input[type="checkbox"]:checked + .custom-checkmark::after {
	content: '✔';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	font-size: 14px;
	color: #007bff;
	transition: transform 0.2s;
}

/* 비체크 상태일 때 아이콘 안보임 */
.checkbox-circle input[type="checkbox"] + .custom-checkmark::after {
	content: '';
	transform: scale(0);
}

.term-services {
	font-size: 14px;
	color: #555;
}

a.blue[data-disabled="true"] {
	background-color: #ccc;
	color: #888;
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

.coupon-terms-container{
	margin: 8.8889vw 0 4.571vw;
}
.coupon-term-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.coupon-term-link {
	color: #cccccc;
	text-decoration: underline;
	font-size: 14px;
}


.coupon-term-header .coupon-term-title {
	margin-bottom: 1.3889vw;
	font-size: 5.0000vw;
	font-weight: 600;
	flex: 1;
}

.term-services ul, .coupon-term-services ul {
	color: #3259D8;
}