@charset "utf-8";
/* ================================
  intro.css
  - 온보딩, 로그인, 회원가입
================================ */

.contents {
  padding: 0 var(--sdcm-contents-padding-x);
}
/* onboarding */
#wrap.onboard {
  background: #FFFFFF;
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(237, 247, 248, 1) 100%);
}
#wrap.onboard #container {
  justify-content: flex-end;
  padding-bottom: 5rem;
  text-align: center;
}
#wrap.onboard .logo {
  position: absolute;
  top: 30%;
  left: 50%;
  transform:translateX(-50%);
}
#wrap.onboard p {
  margin-top: var(--sdcm-gap-7);
  font-size: var(--sdcm-mobile-font-size-body-small);
  color: var(--sdcm-color-text-subtle);
}
/* login */
#wrap.login {
  background-color: var(--sdcm--color-surface-secondary-subtler);
  background-image: url(/images/sdcm/m/img-background-login-small.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}
#wrap.login #container {
  justify-content: flex-end;
}
#wrap.login .contents {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 50%;
  padding-bottom: 5rem;
  background: #FFFFFF;
  background: linear-gradient(180deg,rgba(237, 247, 248, 0) 0%, rgba(237, 247, 248, 0.9) 100%);
}
#wrap.login .slogan {
  margin-bottom: var(--sdcm-gap-8);
}
#wrap.login .slogan img {
  width: auto;
}
#wrap.login form {
  display: flex;
  flex-direction: column;
  gap: var(--sdcm-gap-6);
}
#wrap.login form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--sdcm-gap-2);
}
#wrap.login .contents > p {
  margin-top: var(--sdcm-gap-7);
  font-size: var(--sdcm-mobile-font-size-body-small);
  color: var(--sdcm-color-text-subtle);
  text-align: center;
}

/* join */
#wrap.join .container {
	padding-top: 0;
}
#wrap.join .contents {
  position:relative;
  padding-top: 10.8rem;
  background: #EDF7F8;
  background: linear-gradient(180deg,#fffcf8 0%, #ffffff 50%);
}
#wrap.join .contents:before {
  content: '';
  position: absolute;
  top: 3.5rem;
  left: 0;
  width: 100%;
  height: 40px;
  background-image: url(/images/sdcm/logo_primary.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
}

#wrap.join .step-wrap {
	margin-bottom: 1.6rem;
}

#wrap.join .join-panel,
#wrap.join .survey-panel {
	width: 100%;
}

#wrap.join .join-panel {
	display: none;
}
#wrap.join .join-panel.active {
	display: block;
}
#wrap.join:has(#panel_join.active) #btn_prev,
#wrap.join:has(#panel_join.active) #btn_join{
	display: none;
}
#wrap.join:has(#panel_survey.active) #btn_next,
#wrap.join:has(#panel_survey.active) #btn_cancel {
	display: none;
}

#wrap.join .survey-panel .fieldset{
	gap: var(--sdcm-gap-9);
}

#wrap.join .contents p.welcome {
  font-size: var(--sdcm-mobile-font-size-body-large);
  margin-bottom: var(--sdcm-gap-8);
}
#wrap.join p:has(.btn.link){
	margin-top: var(--sdcm-gap-7);
	  font-size: var(--sdcm-mobile-font-size-body-small);
	  color: var(--sdcm-color-text-subtle);
	  text-align:center;
}
#wrap.join .input-group .form-check {
	flex: 0 0 10rem;
}

#wrap.join .comment {
	background-color: #fff;
	border: 1px solid var(--sdcm-color-primary-10);
	margin-bottom: 4rem;
	box-shadow: 0 0 4px var(--sdcm-color-primary-5);
}

#wrap.join .agree-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--sdcm-gap-3);
	width: 100%;
	margin-top: 2rem;
}
#wrap.join .agree-list {
	width: 100%;
	padding: 0 var(--sdcm-padding-3);
}

#modalAgreeMembership .modal-conts,
#modalAgreePrivacy .modal-conts {
	font-size: var(--sdcm-mobile-font-size-body-small);
}

#modal_search_agency .input-group > button{
	min-width: 8rem;
}
.agency-list {
	margin-top: 2rem;
}
.agency-list .list-group {
	gap: 0;
}
.agency-list .list-item {
	height: auto;
	padding: 1rem 0;
}
.agency-list .list-group > .list-item:not(:last-child) {
	border-bottom: 1px solid var(--sdcm-color-border-gray-light)
}
.agency-list .list-item .desc{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.agency-list .list-item .split {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 1.3rem;
}
.agency-list .list-item .split > p {
	color: var(--sdcm-color-text-subtle);
}
.agency-list .list-item .split > * {
	padding: 0 .6rem;
	position: relative
}
.agency-list .list-item .split > *:not(:last-child):after {
	content: '';
	position: absolute;
	top: calc(50% - (.3rem / 2));
	left: calc(100% - (.3rem / 2));
	width: .3rem;
	height: .3rem;
	border-radius: 50%;
	background-color: var(--sdcm-color-gray-20);
}

.agency-list .list-item .split > *:first-child {
	padding-left: 0;
}
.agency-list .list-item .split > *:last-child {
	padding-right: 0;
}

.agency-list .list-item .tit {
	font-size: 1.5rem;
}
.agency-list .list-item > div:not(.desc) {
	flex: 0 0 auto;
}
.agency-list .list-item > div > button {
}


.list-group:has(.no-agency),
.list-group:has(.no-seller) {
	min-height: 20rem;
}

/* 태블릿 이상 → 카드 여백/폰트 키우기 */
@media (min-width: 768px) {
  /* login */
  #wrap.login .slogan {
    margin-bottom: var(--sdcm-gap-10);
  }
  #wrap.login .slogan img {
    width: 50rem;
  }
}

/* 데스크톱 이상 → 카드 레이아웃 변경 */
@media (min-width: 1024px) {
  /* login */
  #wrap.login {
    background-image: url(../../images/img-background-login-medium.png);
    background-position: bottom right;
  }
}