@charset "UTF-8";

:root { --userbox-width: 640px; }


/* ------ location bar ------ */

#contentContainer:has(.userLoaction-wrap) { margin-top: 0; }
.userLoaction-wrap { border-top: 1px solid rgb(var(--basic-color-60)); border-bottom: 1px solid rgb(var(--basic-color-60)); padding-left: 2rem; padding-right: 2rem; background-color: rgb(var(--basic-color-50)); }
.userLoaction-wrap .pageLocation-wrap { margin-top: 0; padding-top: clamp(0.5rem, 1vw, 1rem); padding-bottom: clamp(0.5rem, 1vw, 1rem); }
.userLoaction-wrap .pageLocation { margin-top: 0; }
.userLoaction-wrap .pageLocation ul { justify-content: flex-start }
.userLoaction-wrap .pageLocation ul li a { color: rgb(var(--basic-color-10)); }
.userLoaction-wrap .pageLocation ul li i:before { color: rgb(var(--basic-color-10)); }
.userLoaction-wrap .pageLocation ul li:last-child a { color: rgb(var(--basic-color-5)); }


/* ------ user-wrap / userBox (공통 레이아웃) ------ */

.user-wrap { padding: clamp(2rem, 5vw, 5rem) 0 clamp(2.5rem, 6vw, 6rem); }
.user-wrap > * { max-width: var(--userbox-width); margin-left: auto; margin-right: auto; }
.user-wrap.login-wrap { padding: clamp(2rem, 5vw, 5rem) 0 clamp(2.5rem, 6vw, 6rem); }
.user-wrap.login-wrap > * { max-width: 480px; }

h1.userTitle-wrap { display: block; text-align: center; padding-bottom: 0; font-size: clamp(3rem, 3.4vw, 3.5rem); }
.userTitle-wrap { font-family: var(--special-font); }
.userTitle-wrap strong { font-weight: 700; color: rgb(var(--basic-color-50)); display: block; }
.userTitle-wrap span { display: block; font-size: 0.5em; color: #888; margin-top: 1rem;  }

.userBox-wrap { padding: 2.2rem; background-color: #fff; }
.userBox-wrap .customCheckbox label span { font-size: 1.5rem; }
.userBox-warning { margin-bottom: 1.5rem; background-color: rgba(var(--yellow-color-10),1); }
.userBox-warning p { font-size: clamp(1.4rem, 1.5vw, 1.5rem); color: rgba(var(--yellow-color-80),1) }

.userType-radio-wrap { width: var(--userbox-width); max-width: calc(100% - 4.4rem); padding: clamp(1.3rem, 1.8vw, 1.5rem) 0; border-radius: 1rem; border: 1px solid #ededed; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); background-color: #fff;}
.userType-radio-wrap .customRadio { display: flex; gap: 0;  }
.userType-radio-wrap .customRadio > li { flex: 1; min-width: 1px;  }
.userType-radio-wrap .customRadio > li + li { border-left: 1px solid rgb(var(--gray-color-20)); }
.userType-radio-wrap .customRadio label { flex-direction: column; color: rgb(var(--gray-color-60)); }
.userType-radio-wrap .customRadio label span { font-size: clamp(1.4rem, 1.6vw, 1.5rem); margin-top: 1rem; font-family: var(--special-font); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.1rem; }
.userType-radio-wrap .customRadio label span small { font-size: 0.8em; opacity: 0.8; }
.userType-radio-wrap .customRadio input[type="radio"]:checked + label { color: rgb(var(--gray-color-90)); }

@media (min-width: 500px ){
	body:has(#content.login-wrap)  { background-color: rgb(var(--gray-color-10)); }
	.login-wrap h1.userTitle-wrap { padding-bottom: 2rem; }
	.login-wrap .userBox-wrap  { border-radius: 1rem; border: 1px solid #ededed; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); }
}

@media (min-width: 660px ){
	body:has(#content.user-wrap)  { background-color: rgb(var(--gray-color-10)); }
	.user-wrap h1.userTitle-wrap { padding-bottom: 2rem; }
	.user-wrap .userBox-wrap  { border-radius: 1rem; border: 1px solid #ededed; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); }
}



/* ------ userInsert (공통 입력폼) ------ */

.userInsert-title { position: relative; font-size: clamp(1.6rem, 2vw, 1.7rem);  font-family: var(--special-font); margin-top: 0.4rem; margin-bottom: 0.8rem; }
* + .userInsert-title { margin-top: 2.5rem; }
.userInsert-title strong { font-weight: 700; display: block; width: max-content; background-color: #fff; position: relative; z-index: 1; padding-right: 0.5rem; }
.userInsert-title:after { content: ''; display: block; width: 100%; height: 1px; background-color: rgb(var(--gray-color-20)); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.userInsert { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.userInsert > li { width: 100%; }
.userInsert > li > .inner:focus-within { border-color: rgb(var(--basic-color-50)); transition: all 0.2s ease; z-index: 10; }
.userInsert > li > .inner * { line-height: 2rem; }
.userInsert > li > .inner { border: 1px solid #dadada; position: relative; padding: 0.8rem 1.2rem; }
.userInsert > li > .inner ~ .inner { margin-top: 0.5rem; }
.userInsert > li > .inner input { border: 0; width: 100%; }
.userInsert > li .userInsert-btn { display: flex; gap:0.5rem }
.userInsert > li .userInsert-btn > input { flex: 1; min-width: 1px; }
.userInsert > li .userInsert-btn .initialBtn { border-radius: var(--radius-m); padding: 0 1.5rem; }
.userInsert > li .userInsert-btn .initialBtn * { font-size: 1.4rem; }

.userInsert > li.userInsert-lineBtn { padding-top: 1.1rem; }
.userInsert > li.userInsert-lineBtn > .inner { display: block; position: relative; padding: 1.2rem 0.9rem; }
.userInsert > li.userInsert-lineBtn > .inner i { color: rgb(var(--basic-color-50)) !important; }
.userInsert > li.userInsert-lineBtn > .inner span { color: #333; font-size: 1.5rem; margin-left: 0.5rem; }
.userInsert > li.userInsert-lineBtn > .inner:after {
	content: attr(data-text);  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
	background-color: rgba(65,120,200,0.3); color: rgb(var(--basic-color-70));; font-size: 0.8em; padding: 0.5rem 1rem; border-radius: 2rem;
}
.userInsert > li.userInsert-lineBtn > .inner:hover::after { color: #fff; background-color: rgba(65,120,200,1); }
.userInsert > li.userInsert-lineBtn .warningText { margin-top: 0.7rem; font-size: 0.9em; }

.userInsert.userInsert-icon > li > .inner { padding-left: 40px; }
.userInsert.userInsert-icon > li > .inner i { color: #aeaeae; line-height: 1; position: absolute; left: 1.8rem; top: 50%; transform: translateY(-50%); }
.userInsert.userInsert-icon > li > .inner:focus-within i { color: #333; }
.userInsert.userInsert-icon > li > .inner input,
.userInsert.userInsert-icon > li > .inner.customSelect { font-size: 1.5rem; }
.userInsert.userInsert-icon > li > .inner.customSelect { padding: 1.6rem 3rem 1.6rem 40px; width: 100%; }
.userInsert.userInsert-icon > li > .inner.customSelect label { padding: 0; }

.userInsert dl dt { display: block; margin-bottom: 0.5rem; font-weight: 500; font-family: var(--special-font); font-size: 1.3rem; padding-left: 0.2rem; }

.userInsert-group > .inner { position: relative; }
.userInsert-group > * + .inner { margin-top: 0.5rem;}
.userInsert-group > .inner i { position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); color: #888; }
.userInsert-group > .inner input { width: 100%; padding: 1.2rem; border-radius: var(--radius-s); font-size: 1.5rem; }
.userInsert-group > .inner:has(i) input { padding: 1.2rem 1.2rem 1.2rem 4rem; }
.userInsert-group:has(.customRadio), .userInsert-group:has(.customCheckbox) { padding-top: 0.5rem;}

@media (min-width: 640px ){
	.userInsert-half { width: calc(50% - 1rem) !important; }
}

/* ------ userButton / message (버튼·안내문구) ------ */

.userButton-wrap { margin-top: 2.5rem; }
.userButton-wrap .initialBtn { border-radius: 0.5rem; padding: 1.5rem 0; font-size: 1.6rem; font-weight: 500; color: #888; width: 100%; }
.userButton-wrap .basicBtn { color: #fff; }

.insertInfo { display: block; font-size: 1.4rem; color: #1247b3; margin-top: 0.5rem; }
.insertInfo li { padding-top: 0.5rem; }
.insertWarning, .userInsert p.error, .userBox-wrap label.error { font-size: 1.4rem; display: block; padding: 1.2rem 0 0; color: #eb6100; margin: 0; }
.asterics { color: red; font-size: 2rem; }


/* ------ orLine ------ */

.orLine { position: relative; margin: 1.5rem 0 1.5rem; text-align: center; }
.orLine span { display: inline-block; color: #aaa; text-align: center; background-color: #fff; font-size: 1.2rem; position: relative; z-index: 1; padding: 0 10px; }
.orLine:before { content: ''; position: absolute; left: 0; top: calc(50% + 0.5px); height: 1px; width: 100%; border-top: 1px dashed #ccc; z-index: 0; }


/* ------ login ------ */

.userLogin-wrap .userInsert { gap: 0; }
.userLogin-wrap .userInsert { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); border-radius: 0.5rem; }
.userLogin-wrap .userInsert > li + li { margin-top: -1px; }
.userLogin-wrap .userInsert > li:first-child > .inner { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.userLogin-wrap .userInsert > li:last-child > .inner { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.userLogin-wrap .userLogin-btn .flex-wrap .initialBtn { font-size: 1.5rem; padding: 1.4rem 0.8rem; color: #777; }


/* ------ userSelect ------ */

.userSelect-wrap { text-align: center; background-color: #f7f9fa; border-color: #e7ecef; }
.userSelect-icon { position: relative; display: inline-block; position: relative; }
.userSelect-icon .xi-user-o { font-size: 8rem; color: #555; }
.userSelect-icon .xi-plus-min {
	position: absolute; right: 0; bottom: 0; background-color: rgb(var(--basic-color-50)); color: #fff;
	width: 3rem; height: 3rem; line-height: 3rem; border-radius: 3rem; font-size: 2.5rem;
}

.userSelect-wrap dl { margin: 1.5rem 0 2rem; }
.userSelect-wrap dl dt { font-size: 3rem; }
.userSelect-wrap dl dd { margin-top: 0.5rem; }
.userSelect-wrap dl dd * { display: block; }
.userSelect-wrap dl dd span { font-size: 1.4rem; color: #888; margin-top: 0.5rem; }

.userSelect-wrap ul li + li { margin-top: 1rem; }


/* ------ agree (약관동의) ------ */

.userAgree > li:first-child { padding-bottom: 2rem; border-bottom: 1px dashed #ccc; }
.userAgree > li + li { padding-top: 2.5rem; }
.userAgree .switchCheckbox label span font { font-size: 0.8em; }
.userAgree-content { border-radius: 0.5rem; border: 1px solid #cecece; overflow: hidden; margin-top: 0.5rem; }
.userAgree-content > .inner { height: clamp(10rem, 20vw, 20rem); padding: 1rem 1.5rem; overflow-y: scroll; font-size: clamp(1.3rem, 1.5vw, 1.5rem); color: #777; }


/* ------ singup (회원가입 폼) ------ */

.userSingup-wrap { padding: 2rem 2.5rem 2.5rem; }
.userSingup-wrap .userInsert > li > .inner { border-radius: 0.5rem; }


/* ------ userCompletion (가입완료) ------ */

.userCompletion-wrap { padding-bottom: 4rem;  text-align: center; }
.userCompletion-wrap .user-icon .xi-check-circle { font-size: 7.5rem; color: rgb(var(--special-color-50)); margin: 1rem; }

.userCompletion-wrap dl { margin: 1.5rem 0 2rem; }
.userCompletion-wrap dl dt { font-size: 3rem; font-family: var(--special-font); }
.userCompletion-wrap dl dd { margin-top: 0.5rem; }
.userCompletion-wrap dl dd * { display: block; }
.userCompletion-wrap dl dd span { font-size: 1.4rem; color: #888; margin-top: 0.5rem; }
.userCompletion-wrap .userButton-wrap { max-width: 40rem; margin-left: auto; margin-right: auto; }
.userCompletion-wrap .userButton-wrap .initialBtn { padding: 1.3rem 2rem; width: auto; }


/* ------ userJoin-step (가입 진행 단계 표시) ------ */

.userJoin-step { width: var(--userbox-width); max-width: calc(100% - 4.4rem); margin-bottom: clamp(1rem, 1.8vw, 2.5rem); text-align: center; font-family: var(--special-font);  }
.userJoin-step ul { display: flex; }
.userJoin-step ul li { background-color: #fff; flex: 1; min-width: 1px; border: 1px solid #ccc; font-size: clamp(1.3rem, 1.6vw, 1.5rem); padding: clamp(1.2rem, 1.5vw, 1.5rem) 0.5rem; }
.userJoin-step ul li > * { display: block; line-height: 1; }
.userJoin-step ul li i { font-size: 0.8em; font-family: var(--special-font); }
.userJoin-step ul li span { font-weight: 500; margin-top: 0.8rem; }
.userJoin-step ul li.active { border-color: rgb(var(--basic-color-50));  }
.userJoin-step ul li:first-child { border-radius: var(--radius-m) 0 0 var(--radius-m); }
.userJoin-step ul li:last-child { border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.userJoin-step ul li:not(.active):nth-child(1) { border-right: 0; }
.userJoin-step ul li:not(.active):nth-child(2) { border-left: 0; }
.userJoin-step ul li:not(.active):nth-child(3) { border-left: 0; }
.userJoin-step ul li.active > * { color: rgb(var(--basic-color-50)); }