@charset "utf-8";

:root{
   /* var color : fluenC */
   --brand-color-1:var(--vivid-pink); --brand-color-2:var(--dark-lavender); --brand-color-3:var(--lavender-normal); --brand-color-4:var(--lavender-light); --brand-color-5:var(--lavender-soft);
}

/*######################
Style Reset
########################*/
select,
input{font-size:15px;}
/* basic-alink */
a:link{color:#555;text-decoration:none;}
a:visited{color:#555;text-decoration:none;}
a:active{color:#555;text-decoration:none; background:none; outline:none;}
a:hover{color:#555;text-decoration:none;}


/*####################
Layout
######################*/
body{display:flex; justify-content:center;}
#wrap{display:flex; flex-direction:column; gap:32px; padding:0 16px; width:480px;}
#header{display:flex; flex-direction:column; align-items:center; gap:24px; margin-top:32px;}
#header h1{display:flex; align-items:center; gap:8px; margin:0 16px;}
#header h1 img{height:80px;}
#header h2{display:flex; align-items:center; gap:8px; margin:0 16px; font-family:var(--font-nanumsquare); font-size:24px; font-weight:400; letter-spacing:-1px;}
#container{display:flex; flex-direction:column; gap:32px;}


/*####################
Header
######################*/
body.for-jls #header{margin:48px 0 8px 0;}
body.for-jls #header h1 img.fluenc{height:56px;}
body.for-jls #header h1 img.jls{height:40px;}
#header h1 i.material-symbols-rounded{width:32px; height:32px; color:#999; font-size:32px;}
#header .invitation-info{display:flex; justify-content:center; align-items:center; gap:8px; position:relative; padding:8px 16px; width:100%;}
#header .invitation-info::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:8px; background-color:var(--brand-color-4); opacity:0.2;}
#header .invitation-info>span{display:flex; justify-content:center; align-items:center; position:relative; aspect-ratio:1 /1; width:24px;}
#header .invitation-info>span>img{width:100%;}
#header .invitation-info>p{position:relative; font-size:15px;}
#header .invitation-info>p>b{color:var(--brand-color-2);}


/*####################
Container
######################*/
/* registration input */
.registration-form{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.form-group{display:flex; flex-direction:column; gap:8px;}
.form-group~.form-group{padding-top:8px; border-top:1px solid #eee;}
.form-group label.check>span{margin:8px 0; font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.form-group.selected label.check{pointer-events:none;}
.form-group.selected{padding-bottom:16px;}
.form-item-title{display:flex; gap:8px; margin:0 0 8px 4px;}
.form-item-title~.form-item-title{margin-top:24px;}
.form-item-title>h3{font-family:var(--font-nanumsquare); font-size:16.5px; font-weight:500;}
.form-item{display:flex; flex-direction:column; gap:8px;}
.form-input-row{display:flex; align-items:center; padding:0 10px; min-height:50px; border-radius:8px; border:1px solid #ccc; background-color:#fff;}
.form-input-row.focus{padding:0 9px; border:2px solid var(--brand-color-2);}
.form-input-row i.material-symbols-rounded{flex-shrink:0; margin-left:4px; color:#777;}
.form-input-row :is(input, select){padding:8px; border:0; background-color:transparent !important;}
.form-input-row select.dim{color:#aaa;}
.form-input-row.focus select.dim{color:initial;}
.form-input-row button.material-symbols-rounded{padding:4px; color:#777;}
.form-input-row :is(input, .iti){flex-grow:1;}
.form-input-row button{flex-shrink:0;}
.guide-text{display:none; margin-bottom:8px; padding:0 5px; color:var(--grapefruit-light); font-size:13px; white-space:pre;}
.form-item.error .form-input-row{padding:0 9px; border:2px solid var(--grapefruit-light);}
.form-item:is(.error, .success) .guide-text{display:block;}
.form-item.success .guide-text{color:var(--grass-normal);}
.form-item~button{margin-top:20px;}
.form-item em.status{flex-shrink:0; display:none; position:relative; padding:4px 6px 3px 6px; font-size:11px; font-weight:600; font-style:normal;}
.form-item em.status::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:10px; opacity:0.25;}
.form-item.error em.status{display:block; color:var(--grapefruit-light);}
.form-item.error em.status::before{background-color:var(--grapefruit-light);}
.form-item em.status.ok{display:block; color:var(--grass-normal);}
.form-item em.status.ok::before{background-color:var(--grass-normal);}
.form-item em.status:empty{display:none;}
/* find link */
.find-link{display:flex; justify-content:center; align-items:center; gap:16px;}
.btn-submit+.find-link{margin-top:24px;}
.find-link>li{position:relative; line-height:1;}
.find-link>li~li{padding-left:16px; border-left:1px solid rgb(0 0 0 / 10%);}
.find-link a{font-size:15px;}
/* submit button */
.btn-submit{display:flex; gap:16px; margin-top:8px;}
.btn-submit.column{flex-direction:column;}
.btn-submit.sns{flex-direction:column; align-items:center; position:relative; margin-top:32px;}
.btn-submit.sns::before{content:'또는'; display:flex; justify-content:center; align-items:center; position:relative; z-index:2; margin-bottom:16px; padding:0 8px; height:16px; background-color:#fff; color:#999;}
.btn-submit.sns::after{content:''; position:absolute; z-index:1; inset:8px 0 auto 0; border-top:1px solid #eee;}
.btn-submit button{flex-grow:1; width:100%; border-radius:8px;}
.btn-submit.sns button>span{gap:8px; font-size:18px;}
.btn-submit.sns button>span::before{display:flex; align-items:center; background-size:contain; background-repeat:no-repeat;}
.btn-submit button.kakao-login{border:0; background-color:#fee500;}
.btn-submit button.kakao-login>span::before{content:''; width:24px; height:24px; background-image:url(../img/partners/social/icon-social-kakao.png);}
.btn-submit button.jls-login>span::before{content:''; width:38px; height:18px; background-image:url(../../../assets/img/logo-jls-legacy-small.png);}
.btn-submit button em>img{width:100%;}

/* info */
.info{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px;}
.info p{color:#333; font-size:15px; font-weight:300;}
.info p>a{color:var(--brand-color-1); font-size:15px; font-weight:600;}


/*####################
Footer
######################*/
#footer{display:flex; flex-direction:column; margin-top:32px; padding:24px 0; border-top:1px solid #eee;}
#footer .find-link a{font-size:12px;}
#footer .copyright{padding:8px 0; color:#999; font-family:tahoma; font-size:12px; text-align:center;}


/*####################
AD Content
######################*/
#ad-content{display:flex; flex-direction:column; gap:16px;}
#ad-content .ad-image>a{display:flex;}
#ad-content .ad-image img{max-width:480px; width:100%;}


/*####################
Screen size
######################*/
/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w Less than 500px */
@media (max-width: 500px) {

  


}