/* reset */

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {height: 100%; font-family: "Pretendard", -apple-system, sans-serif;  font-size:10px; background: #ffffff;}

html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;line-height:1;}
*,*:after,*:before{box-sizing:border-box;}
article,aside,audio,blockquote,body,canvas,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,input,legend,li,mark,nav,ol,p,pre,section,td,textarea,th,time,ul,video{margin:0;padding:0}
body{color:#777;letter-spacing:-0.5px; font-weight: 400;overflow-x:hidden;}
[lang="ko"]{word-break:keep-all}
body{overflow-wrap:break-word}
img{vertical-align:top;border:0;border-style:none}
button{border:0;background:none;cursor: pointer;}
button,input,optgroup,select,textarea{padding:0;margin:0;font-size:100%;font-family:inherit;outline:0 none}
table{border-collapse:collapse;border-spacing:0}
fieldset{border:0}
legend{color:#000}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul,li {list-style:none;}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;line-height:1}
caption,hr,legend{width:0;height:0;font-size:1px;text-indent:-9999em;line-height:0}
a,a:active,a:focus,a:hover,a:link,a:visited{text-decoration:none;font-family:inherit; cursor: pointer;}
label{cursor:pointer}
i, pre {font-family: inherit; font-style: normal;}


a,button,input,select,h1,h2,h3,h4,h5,* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    background: none;
   
    -webkit-font-smoothing: antialiased;
}
   
menu, ol, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------- */
/*------------------- 01 Á¶»ç - 03 ¼³¹®ÀÎÆ®·Î -------------------*/
/* ---------------------------------------------------------- */

/* 1. ±âº» ·¹À̾ƿô (PC) */
.surveyp_surveyintro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    min-height: 100vh;
    padding: 4vh 2rem 6rem;
    background: #f5f5f5; 
    font-family: "Pretendard", sans-serif;
}

.survey_card {
    background: #ffffff;
    border-radius: 2.4rem;
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.05); 
    padding: 6rem 10rem; 
    width: 100%;
    max-width: 84rem; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* »ó´Ü ÅÂ±× ¹× ŸÀÌƲ */
.tag_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4rem;
    width: 100%;
    max-width: 60rem; 
}

.tag_title .tag_nbox { margin-bottom: 0.8rem; }

.tag_nbox {
    background: #ddeefe;
    border-radius: 10rem;
    padding: 0.4rem 2rem;
}

.tag_num {
    color: #0071e9;
    font-size: 1.8rem;
    font-weight: 500;
}

.tag_name {
    color: #353535;
    font-size: 2.4rem;
    font-weight: 700;
}

/* ¸ÞÀÎ ÄÁÅÙÃ÷ ÇÁ·¹ÀÓ */
.spsi_frame {
    display: block; 
    width: 100%;
    max-width: 60rem; 
    margin: 0 auto;
}

.spsi_frame_box01 { margin-bottom: 2rem; }

/* Á¤º¸ ¹Ú½º °øÅë ½ºÅ¸ÀÏ */
.spsi_frame_box01, 
.spsi_frame_box02 {
    background: #f4f7fa;
    border-radius: 1.6rem;
    padding: 4rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
}

.spsi_frame_box01 > div,
.spsi_frame_box02 > div { margin-bottom: 2.4rem; }
.spsi_frame_box01 > div:last-child,
.spsi_frame_box02 > div:last-child { margin-bottom: 0; }

/* ³»ºÎ ÇÑ ÁÙ ·¹À̾ƿô */
.spsi_fbb1_01, .spsi_fbb1_02, .spsi_fbb1_03, 
.spsi_fbb2_01, .spsi_fbb2_02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spsi_fb_stit {
    display: flex;
    align-items: center;
}

.spsi_fb_stit .icon { margin-right: 0.8rem; }

.icon { width: 2.4rem; height: 2.4rem; }
.stit { font-size: 2rem; font-weight: 600; color: #000000; }
.spsi_fb_con { font-size: 2rem; font-weight: 500; color: #666666; }

/* ÇÏ´Ü ¾È³» ¹®±¸ ¹Ú½º */
.spsi_frame_infobox {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.spsi_frame_infobox .info_icon { margin-right: 0.4rem; }

.info_icon { width: 2rem; height: 2rem; }
.info_con { font-size: 1.6rem; color: #666666; }

/* 2. ¹öÆ° ±âº» ½ºÅ¸ÀÏ */
.spsi_foot_button {
    margin-top: 4rem;
    width: 100%;
    max-width: 60rem; 
}

.button_primary_blue {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #008fff;
    border-radius: 10rem;
    padding: 2.4rem;
    text-decoration: none;
    transition: background 0.2s;
}

.btn_txt { color: #ffffff; font-size: 2.4rem; font-weight: 600; }



/* --------------------------------------------------- */
/* 3. ¸ð¹ÙÀÏ ¹ÝÀÀÇü (760px ÀÌÇÏ) */
/* --------------------------------------------------- */

@media (max-width: 760px) {
    html { font-size: 9px; }
    
    .surveyp_surveyintro { 
        padding: 6rem 1.6rem 12rem; 
        min-height: auto; 
        justify-content: flex-start;
        background: #ffffff;
    }
    
    .survey_card {
        padding: 0;
        background: transparent;
        box-shadow: none;
        max-width: 100%;
    }
    
    .tag_title { max-width: 100%; margin-bottom: 3rem; }
    .spsi_frame { max-width: 100%; }
    
    .spsi_frame_box01, .spsi_frame_box02 { padding: 2.4rem; }
    
    /* ÇÏ´Ü °íÁ¤ ¸ð¹ÙÀÏ ¹öÆ° À¯Áö */
    .spsi_foot_button {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        max-width: none;
        padding: 1.6rem 2rem;
        background: #ffffff;
        background: rgba(255, 255, 255, 0.95);
        z-index: 1000;
        padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
        margin-top: 0;
    }
    
    .button_primary_blue { padding: 1.8rem; width: 100%; }
    .btn_txt { font-size: 2rem; }
}

/* 4. ÃÖ¼Ò ´ëÀÀ (360px) */
@media (max-width: 360px) {
    html { font-size: 8px; }
}

/* --------------------------------------------------------- */
/* 01 Á¶»ç 04-01 ÀçÂü¿© ¾È³» ÆäÀÌÁö */
/* --------------------------------------------------------- */

.surveyp_rejoin {
  background: #f5f5f5; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  position: relative;
  font-family: "Pretendard", sans-serif;
  padding: 4vh 2rem 6rem; 
}

/* 2. ŸÀÌƲ ¿µ¿ª */
.sp_rejoin_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  width: 100%;
}
.sp_rejoin_title .icon { margin-bottom: 16px; width: 48px; height: 48px; object-fit: contain; }
.sp_rejoin_title .tit { color: #353535; text-align: center; font-size: 24px; font-weight: 700; line-height: 1.4; word-break: keep-all; }

/* 3. °¡ÀÌµå ¸®½ºÆ® */

.sp_rejoin_guide {
  display: block;
  width: fit-content;
  margin: 0 auto 40px;
}

.sp_rejoin_guide > div { margin-bottom: 20px; }
.sp_rejoin_guide > div:last-child { margin-bottom: 0; }
.spr_guide01, .spr_guide02, .spr_guide03, .spr_guide04 { display: flex; align-items: center; white-space: nowrap; }
.spr_guide01 .icon, .spr_guide02 .icon, .spr_guide03 .icon, .spr_guide04 .icon { margin-right: 12px; }
.sp_rejoin_guide .icon { width: 24px; height: 24px; flex-shrink: 0; }
.sp_rejoin_guide .tit { font-size: 20px; font-weight: 500; color: #2b2b2b; }

/* 4. Á¤º¸ ¹Ú½º (ȸ»ö ¹è°æ) */

.sp_rejoin_infobox {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 600px;
}
.spr_info01 { margin-bottom: 32px; }
.spr_info03 { margin-top: 32px; }
.spr_info01, .spr_info02 .spr_info03 { display: flex; flex-direction: column; }
.spr_info01 .tit, .spr_info02 .tit, .spr_info03 .tit{ margin-bottom: 8px; }
.sp_rejoin_infobox .tit { color: #000000; font-size: 20px; font-weight: 600; }
.sp_rejoin_infobox .con { color: #666666; font-size: 18px; line-height: 1.6; word-break: keep-all; }

/* 5. ¹öÆ°  */
.spr_foot_button { margin-top: 4rem; width: 100%; max-width: 60rem; }


/* 6. ¸ð¹ÙÀÏ ¹ÝÀÀÇü (760px ÀÌÇÏ) */

@media (max-width: 760px) {
  .surveyp_rejoin { 
    padding: 6rem 1.6rem 12rem; 
    justify-content: flex-start;
    background: #ffffff; 
  }
  
  .surveyp_rejoin .survey_card {
    padding: 0;
    background: transparent;
    box-shadow: none;
    max-width: 100%;
  }

  .sp_rejoin_title .tit { font-size: 2.2rem; }
  .sp_rejoin_guide .tit, .sp_rejoin_infobox .tit { font-size: 1.8rem; }
  .sp_rejoin_infobox .con { font-size: 1.6rem; }

  .spr_foot_button {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1000;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 1.6rem 2rem;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));  /* ±âº» ¿©¹é(1.6rem)¿¡ ÃֽŠ½º¸¶Æ®Æù ÇÏ´Ü È¨¹Ù ¿µ¿ª¸¸Å­ ¾ÈÀü ¿©¹é(Safe Area) ÀÚµ¿ Ãß°¡ */
  }
}