@charset "utf-8";

/* ========= gy18 페이지 전환 페이드 ========= */
/* body를 기본 opacity:0 으로 시작 → JS가 준비되면 1로 올림 */
/* JS 실패 시 3초 후 자동 노출 (안전장치) */
body { opacity: 0; transition: opacity 0.25s ease; }

/* ========= 폰트 ========= */
@font-face { font-family: 'dohyeon'; src: url(/font/BMDOHYEON.eot); src: url(/font/BMDOHYEON.eot?#iefix) format('embedded-opentype'),
 url(/font/BMDOHYEON.woff) format('woff'),
 url(/font/BMDOHYEON.ttf) format('truetype'); } 

@font-face { font-family: 'Digital'; src: url(/font/DJBGetDigital.eot); src: local(※), url(/font/DJBGetDigital.eot?#iefix) format('embedded-opentype'),
 url(/font/DJBGetDigital.woff) format('woff'),
 url(/font/DJBGetDigital.ttf) format('truetype'); } 

@font-face { font-family: 'NanumMyeongjo'; font-style: normal; font-weight: 400; src: url(/font/NanumMyeongjo-Regular.eot); src: url(/font/NanumMyeongjo-Regular.eot?#iefix) format('embedded-opentype'),
 url(/font/NanumMyeongjo-Regular.woff2) format('woff2'),
 url(/font/NanumMyeongjo-Regular.woff) format('woff'),
 url(/font/NanumMyeongjo-Regular.ttf) format('truetype'); } 

@font-face { font-family: 'NanumMyeongjo'; font-style: normal; font-weight: 700; src: url(/font/NanumMyeongjo-Bold.eot); src: url(/font/NanumMyeongjo-Bold.eot?#iefix) format('embedded-opentype'),
 url(/font/NanumMyeongjo-Bold.woff2) format('woff2'),
 url(/font/NanumMyeongjo-Bold.woff) format('woff'),
 url(/font/NanumMyeongjo-Bold.ttf) format('truetype'); } 

@font-face { font-family: 'NanumMyeongjo'; font-style: normal; font-weight: 800; src: url(/font/NanumMyeongjo-ExtraBold.eot); src: url(/font/NanumMyeongjo-ExtraBold.eot?#iefix) format('embedded-opentype'),
 url(/font/NanumMyeongjo-ExtraBold.woff2) format('woff2'),
 url(/font/NanumMyeongjo-ExtraBold.woff) format('woff'),
 url(/font/NanumMyeongjo-ExtraBold.ttf) format('truetype'); } 

@font-face { font-family: 'JUA'; font-weight: 400; src: url(/font/BMJUA.eot); src: url(/font/BMJUA.eot?#iefix) format('embedded-opentype'),
 url(/font/BMJUA.woff) format('woff'),
 url(/font/BMJUA.ttf) format('truetype'); } 

@font-face { font-family: 'din-bol'; src: url('/font/din-bol.woff') format('woff'),
 url('/font/din-bol.eot'),
 url('/font/din-bol.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; } 

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('/font/Roboto-Bold.woff2') format('woff2'),
 url('/font/Roboto-Bold.woff') format('woff'),
 url('/font/Roboto-Bold.otf') format('opentype'); } 

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/font/Roboto-Regular.woff2') format('woff2'),
 url('/font/Roboto-Regular.woff') format('woff'),
 url('/font/Roboto-Regular.otf') format('opentype'); } 

@font-face { font-family: 'TmonMonsori'; font-weight: 400; src: local(TmonMonsori); src: url(/font/TmonMonsori.eot?#iefix) format('embedded-opentype'),
 url(/font/TmonMonsori.woff) format('woff'),
 url(/font/TmonMonsori.ttf.ttf) format('truetype'); } 

@font-face {
  font-family: 'GmarketSans';
  font-style: normal;
  font-weight: 300;
  src: url('/img/fonts/GmarketSansTTFLight.woff2') format('woff2'),
       url('/img/fonts/GmarketSansTTFLight.woff') format('woff'),
       url('/img/fonts/GmarketSansTTFLight.ttf') format('truetype'),
       url('/img/fonts/GmarketSansTTFLight.eot');
}

@font-face {
  font-family: 'GmarketSans';
  font-style: normal;
  font-weight: 500;
  src: url('/img/fonts/GmarketSansTTFMedium.woff2') format('woff2'),
       url('/img/fonts/GmarketSansTTFMedium.woff') format('woff'),
       url('/img/fonts/GmarketSansTTFMedium.ttf') format('truetype');
}

@font-face {
  font-family: 'GmarketSans';
  font-style: normal;
  font-weight: 700;
  src: url('/img/fonts/GmarketSansTTFBold.woff2') format('woff2'),
       url('/img/fonts/GmarketSansTTFBold.woff') format('woff'),
       url('/img/fonts/GmarketSansTTFBold.ttf') format('truetype'),
       url('/img/fonts/GmarketSansTTFBold.eot');
}

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");

:root {

  /* ==============================
     Base Layout Width
     ============================== */
  --base-width: 700;

  /* ==============================
     Fluid Size Scale (1~50)
     min(px, vw 기반 자동계산)
     ============================== */

  --size-1:  min(1px,  calc(100vw * (1  / var(--base-width))));
  --size-2:  min(2px,  calc(100vw * (2  / var(--base-width))));
  --size-3:  min(3px,  calc(100vw * (3  / var(--base-width))));
  --size-4:  min(4px,  calc(100vw * (4  / var(--base-width))));
  --size-5:  min(5px,  calc(100vw * (5  / var(--base-width))));
  --size-6:  min(6px,  calc(100vw * (6  / var(--base-width))));
  --size-7:  min(7px,  calc(100vw * (7  / var(--base-width))));
  --size-8:  min(8px,  calc(100vw * (8  / var(--base-width))));
  --size-9:  min(9px,  calc(100vw * (9  / var(--base-width))));
  --size-10: min(10px, calc(100vw * (10 / var(--base-width))));

  --size-11: min(11px, calc(100vw * (11 / var(--base-width))));
  --size-12: min(12px, calc(100vw * (12 / var(--base-width))));
  --size-13: min(13px, calc(100vw * (13 / var(--base-width))));
  --size-14: min(14px, calc(100vw * (14 / var(--base-width))));
  --size-15: min(15px, calc(100vw * (15 / var(--base-width))));
  --size-16: min(16px, calc(100vw * (16 / var(--base-width))));
  --size-17: min(17px, calc(100vw * (17 / var(--base-width))));
  --size-18: min(18px, calc(100vw * (18 / var(--base-width))));
  --size-19: min(19px, calc(100vw * (19 / var(--base-width))));
  --size-20: min(20px, calc(100vw * (20 / var(--base-width))));

  --size-21: min(21px, calc(100vw * (21 / var(--base-width))));
  --size-22: min(22px, calc(100vw * (22 / var(--base-width))));
  --size-23: min(23px, calc(100vw * (23 / var(--base-width))));
  --size-24: min(24px, calc(100vw * (24 / var(--base-width))));
  --size-25: min(25px, calc(100vw * (25 / var(--base-width))));
  --size-26: min(26px, calc(100vw * (26 / var(--base-width))));
  --size-27: min(27px, calc(100vw * (27 / var(--base-width))));
  --size-28: min(28px, calc(100vw * (28 / var(--base-width))));
  --size-29: min(29px, calc(100vw * (29 / var(--base-width))));
  --size-30: min(30px, calc(100vw * (30 / var(--base-width))));

  --size-31: min(31px, calc(100vw * (31 / var(--base-width))));
  --size-32: min(32px, calc(100vw * (32 / var(--base-width))));
  --size-33: min(33px, calc(100vw * (33 / var(--base-width))));
  --size-34: min(34px, calc(100vw * (34 / var(--base-width))));
  --size-35: min(35px, calc(100vw * (35 / var(--base-width))));
  --size-36: min(36px, calc(100vw * (36 / var(--base-width))));
  --size-37: min(37px, calc(100vw * (37 / var(--base-width))));
  --size-38: min(38px, calc(100vw * (38 / var(--base-width))));
  --size-39: min(39px, calc(100vw * (39 / var(--base-width))));
  --size-40: min(40px, calc(100vw * (40 / var(--base-width))));

  --size-41: min(41px, calc(100vw * (41 / var(--base-width))));
  --size-42: min(42px, calc(100vw * (42 / var(--base-width))));
  --size-43: min(43px, calc(100vw * (43 / var(--base-width))));
  --size-44: min(44px, calc(100vw * (44 / var(--base-width))));
  --size-45: min(45px, calc(100vw * (45 / var(--base-width))));
  --size-46: min(46px, calc(100vw * (46 / var(--base-width))));
  --size-47: min(47px, calc(100vw * (47 / var(--base-width))));
  --size-48: min(48px, calc(100vw * (48 / var(--base-width))));
  --size-49: min(49px, calc(100vw * (49 / var(--base-width))));
  --size-50: min(50px, calc(100vw * (50 / var(--base-width))));

  /* ==============================
     Extended Sizes
     ============================== */

  --size-60: min(60px, calc(100vw * (60 / var(--base-width))));
  --size-65: min(65px, calc(100vw * (65 / var(--base-width))));
  --size-80: min(80px, calc(100vw * (80 / var(--base-width))));
  --size-95: min(95px, calc(100vw * (95 / var(--base-width))));
  --size-100: min(100px, calc(100vw * (100 / var(--base-width))));
  --size-115: min(115px, calc(100vw * (115 / var(--base-width))));
  --size-120: min(120px, calc(100vw * (120 / var(--base-width))));
  --size-200: min(200px, calc(100vw * (200 / var(--base-width))));
  --size-220: min(220px, calc(100vw * (220 / var(--base-width))));
  --size-260: min(260px, calc(100vw * (260 / var(--base-width))));

  /* ==============================
     Button / UI Variables
     ============================== */

  --btn-lg-radius: var(--size-24);

  --btn-content-bg: hsl(0 100% 100% / 15%);
  --bg-overlay: hsl(0 0% 0% / 25%);

  /* Liquid Glass Effect */
  --liquid-glass-button: blur(0.5rem) brightness(100%);
}

/* ========= 기본 리셋 ========= */
select { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; } 
body.rest #container { padding: 0; } 
#container { background: #f1f1f1; } 
#question_t { position: relative; background: none; } 
#container.pink { background: #ffe8ee; } 
#container.green { background: #effae1; } 
#container.yellow { background: #fff8db; } 
#container.blue { background: #dfe7f8; } 

/* ========= 퀴즈 공통 구조 ========= */
.wd_score .love_test { padding-bottom: 0; } 
.wd_score .q_box { height: var(--size-50); margin: 0 auto; text-align: center; } 
.wd_score h3 { color: #000; font-size: var(--size-65); letter-spacing: -1px; font-weight: bold; padding: 0 var(--size-40); box-sizing: border-box; line-height: normal;} 
.wd_score .score_ban img { display: block; width: 100%; } 
.wd_score .q_list { position: relative; } 
.wd_score .q_list:after { display: block; clear: both; content: ''; } 
.wd_score .q_list a { display: block; background: url(/landing/img/bg_score_wp.png) no-repeat; background-size: 100%; } 
.wd_score .q_list .answer_txt { display: block; padding-top: var(--size-24); letter-spacing: -1px; text-align: center; font-size: 1.07em; } 
.wd_score .q_list .answer_txt.v1 { padding-top: var(--size-18); line-height: 1.2em; font-size: 1.07em; } 

/* ========= 퀴즈 그리드 레이아웃 ========= */
.wd_score .q_list.r6 a { width: var(--size-50); height: var(--size-50); } 
.wd_score .q_list.r6 .answer_txt { padding-top: var(--size-15); } 
.wd_score .q_list.r6 .answer_txt.v1 { padding-top: var(--size-7); } 
.wd_score .q_list.r6 li { float: left; width: var(--size-50); margin: var(--size-10) 0 0 var(--size-6); } 
.wd_score .q_list.v2 { width: var(--size-50); height: var(--size-50); margin-top: var(--size-20); } 
.wd_score .q_list.v2 li { position: absolute; top: 0; left: 0; margin: 0; } 
.wd_score .q_list.v2 li:last-child { left: var(--size-50); } 
.wd_score .q_list.v2 a { display: block; width: var(--size-50); height: var(--size-50); margin: 0; background-size: 100%; text-indent: 0; } 
.wd_score .q_list.v2 img { width: 100%; } 
.wd_score .q_list.v2 p { position: static; height: auto; margin-top: var(--size-10); color: #fff; line-height: 1em; font-size: 1em; font-weight: normal; } 

/* ========= 입력폼 ========= */
.wd_score .q_form { position: relative; height: var(--size-50); padding-top: var(--size-50); background: #f6f8fc; } 
.wd_score .q_form table { width: 100%; } 
.wd_score .q_form th { padding: var(--size-10) 0 var(--size-5) 0; color: #000; vertical-align: top; } 
.wd_score .q_form td { padding: var(--size-5) 0; text-align: left; font-weight: bold; } 
.wd_score .q_form input { width: 100%; height: var(--size-18); border: 0; } 
.wd_score .q_form .inp_name { width: var(--size-50); padding: var(--size-7) 0 var(--size-7) var(--size-8); background: #fff; border: 1px solid #cfd4de; } 
.wd_score .q_form select { width: 100%; height: var(--size-37); padding-left: var(--size-8); border: 0; background: #fff url('/img/sub/ico_select_arr.png') no-repeat 95% 50%; background-size: var(--size-10); font-size: var(--size-14); border: 1px solid #cfd4de; } 
.wd_score .q_form .phone:after { display: block; clear: both; content: ''; } 
.wd_score .q_form .phone li { float: left; position: relative; width: 30%; } 
.wd_score .q_form .phone li:first-child { width: 26.3%; } 
.wd_score .q_form .phone span { position: absolute; top: var(--size-10); left: 0; padding: 0 var(--size-3); color: #fff; } 
.wd_score .q_form .inp_ph { margin-left: var(--size-12); padding: var(--size-7) 0 var(--size-7) var(--size-8); background: #fff; border: 1px solid #cfd4de; } 
.wd_score .q_form .btn_conf { display: block; width: var(--size-50); height: var(--size-50); margin: var(--size-20) auto var(--size-25); background: url('/landing/img/bt_confirm2.png') no-repeat; background-size: contain; } 
.wd_score .q_form .btn_conf.radius { border-radius: var(--size-30); background: #e42ea7 url('/landing/img/bt_conf_arrow.png') no-repeat 90% 50%; background-size: var(--size-10) var(--size-16); } 
.wd_score .q_form .btn_conf span { display: block; padding-top: var(--size-14); color: #fff; letter-spacing: -1px; text-align: center; font-size: 1.285em; } 
.wd_score .q_form .inp_brth { width: 16%; padding: var(--size-9) 0 var(--size-8) var(--size-8); background: #fff; border: 1px solid #cfd4de; } 
.wd_score .btn_conf { display: block; width: var(--size-50); height: var(--size-50); margin: var(--size-20) auto var(--size-25); background: url('/landing/img/bt_confirm2.png') no-repeat; background-size: contain; } 
.wd_score .btn_conf.radius { border-radius: var(--size-30); background: url('/landing/img/bt_conf_arrow.png') no-repeat 90% 50%; background-color: #e42ea7; background-size: var(--size-10) var(--size-16); } 
.wd_score .btn_conf span { display: block; padding-top: var(--size-14); color: #fff; letter-spacing: -1px; text-align: center; font-size: 1.285em; } 

/* ========= Concept3 스타일 ========= */
.wd_score .concept3 { background: url("/landing/img/bg_gy18_1.jpg") no-repeat center / cover; max-width: 700px; width: 100%; aspect-ratio: 700 / 1170; margin: 0 auto; text-align: center; font-family: "Noto Sans KR", '나눔고딕', 'NanumGothic', '돋움', 'Dotum', 'Apple SD Gothic Neo', sans-serif; } 
@media (min-width: 700px) {
  .wd_score .concept3 {
    background-size: 700px auto;
  }
}
.wd_score .concept3 .topBox {display: flex; flex-direction: column; align-items: center; padding: var(--size-50) 0 var(--size-60); gap: var(--size-20);}
.wd_score .concept3 .topBox img {width: 33.142%;}
.wd_score .concept3 .topBox em {font-size: var(--size-20);}
.wd_score .concept3 h3 { padding: 0 0 var(--size-50); font-family: 'GmarketSans', sans-serif; font-weight: 500; line-height: 1.2;} 
/* .wd_score .concept3 h3.v2 {  }  */
.wd_score .concept3 .q_list.flexcenter { display: flex; justify-content: center; padding-right: var(--size-5); box-sizing: border-box; } 
.wd_score .concept3 .q_list.r2 li { width: 24%;} 
.wd_score .concept3 .q_list.r3 li { width: 32.44%;} 
.wd_score .concept3 .q_list.r4 li { width: 24%;} 

.wd_score .concept3 .q_list {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 var(--size-40); box-sizing: border-box; gap: var(--size-8) 1.333%;}
.wd_score .concept3 .q_list.r3{padding: 0 var(--size-115);}
.wd_score .concept3 .q_list li { line-height: var(--size-50); font-size: var(--size-17); } 
.wd_score .concept3 .q_list a { background: none; color: #fff; aspect-ratio: 1 / 1; transition: transform 0.25s ease;   border-radius: var(--size-24);  overflow: hidden;} 
.wd_score .concept3 .q_list.flexLine a { display: flex; align-items: center; justify-content: center; } 
.wd_score .concept3 .q_list.r5 a { width: var(--size-50); height: var(--size-50); background: none; color: #fff; } 
.wd_score .concept3 .q_list.r3 li.line { margin-left: 0; } 
.wd_score .concept3 .q_list.v2 { margin-top: 0; width: var(--size-50); } 
.wd_score .concept3 .q_list.r5 li { width: var(--size-50); height: var(--size-50); line-height: var(--size-50); margin: var(--size-5) 0 0 var(--size-5); font-size: var(--size-14); background-size: var(--size-50); } 
.wd_score .concept3 .q_list.r5 li:nth-child(5n-4) { margin-left: 0; } 
/* distortion-layer: Liquid Glass 효과 (feTurbulence 왜곡 + frosted blur) */
/* backdrop-filter url(#lg-displacement) → 뒤 배경을 noise 기반으로 굴절 */
.wd_score .concept3 .q_list a .distortion-layer {
  backdrop-filter: url(#lg-displacement) blur(3px) saturate(2);
  -webkit-backdrop-filter: url(#lg-displacement) blur(3px) saturate(2);
  filter: url(#liquid-glass-button) saturate(120%) brightness(1.15);
  border-radius: var(--size-24);
  background: rgba(255, 255, 255, 0.06);
  scale: 1.5;
  translate: -20% 0;
}
/* answer_txt: 테두리·그림자·텍스트 + rim/fresnel 레이어 */
.wd_score .concept3 .q_list .answer_txt { padding-top: 0; display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--size-33); color: #000;
  box-sizing: border-box; overflow: hidden; position: relative;
  background: transparent;
  /* 경계선: WebGPU rim lighting 상단 강조 */
  border: 1.5px solid rgba(255,255,255,0.9);
  border-bottom-color: rgba(255,255,255,0.35);
  /* 외부 그림자 + 내부 상단 하이라이트 (rimIntensity) */
  box-shadow:
    0 8px 28px rgba(0,0,0,0.28),
    0 2px  8px rgba(0,0,0,0.15),
    inset 0  1px  2px rgba(255,255,255,0.70),
    inset 0 -1px  2px rgba(0,0,0,0.12);
  border-radius: var(--size-24);
  font-weight: 600;
  transition: all 0.2s ease; }
  
.wd_score .concept3 .q_list.flexLine .answer_txt { line-height: 1.1; } 
.wd_score .concept3 .q_list.r5 .answer_txt { padding-top: 0; font-size: var(--size-14); width: var(--size-50); height: var(--size-50); display: flex; align-items: center; justify-content: center; } 
/* .wd_score .concept3 .q_list .answer_txt.v1 {  }  */
.wd_score .concept3 .q_list.r2 .answer_txt.v1 { padding-top: 0; } 
.wd_score .concept3 .q_list.r5 .answer_txt.v1 { padding-top: var(--size-9); } 
/* 2열 이후 answer_txt::after 그라데이션 */
.wd_score .concept3 .q_list.r4 li .answer_txt,
.wd_score .concept3 .q_list.r3 li .answer_txt { isolation: isolate; }
.wd_score .concept3 .q_list.r4 li .answer_txt::after,
.wd_score .concept3 .q_list.r3 li .answer_txt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.7) 0%,
    rgba(255,255,255,0.3) 40%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
} 
.wd_score .concept3 .q_form .inp_ph { font-size: var(--size-17); padding: var(--size-11) 0; } 
.wd_score .concept3 .q_form .inp_ph input { text-align: center; } 
.wd_score .concept3 .q_form select { font-size: var(--size-17); height: var(--size-50); padding: var(--size-11) 0 var(--size-11) var(--size-15); } 
.wd_score .concept3 .btn_conf { width: var(--size-50); height: var(--size-50); } 
.wd_score .concept3 .btn_conf.radius { background: url('/landing/img/ld_c3_submit_btn.png') no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .btn_conf span { padding-top: var(--size-16); font-weight: 500; } 

/* ===== 다음/결과보기 버튼 (step 17~19) – Liquid Glass (= answer_txt + distortion-layer 동일 구조) ===== */
.btn_step_action,
.btn_step_submit {
  display: block; width: var(--size-220); margin: var(--size-35) auto 0; padding: var(--size-10) 0;
  text-align: center; font-size: var(--size-28); font-weight: 700;
  border-radius: 30px; letter-spacing: -0.3px;
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent;
  /* answer_txt 와 완전 동일한 테두리·그림자 */
  border: 1.5px solid rgba(255,255,255,0.9);
  border-bottom-color: rgba(255,255,255,0.35);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.28),
    0 2px  8px rgba(0,0,0,0.15),
    inset 0  1px  2px rgba(255,255,255,0.70),
    inset 0 -1px  2px rgba(0,0,0,0.12);
  cursor: pointer; text-decoration: none;
}
/* ::before – distortion-layer 와 완전 동일 (scale:1.5, translate:-20% 0) */
.btn_step_action::before,
.btn_step_submit::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: url(#lg-displacement) blur(3px) saturate(2);
  -webkit-backdrop-filter: url(#lg-displacement) blur(3px) saturate(2);
  filter: url(#liquid-glass-button) saturate(120%) brightness(1.15);
  scale: 1.5;
  translate: -20% 0;
  border-radius: inherit;
}
.btn_step_action span,
.btn_step_submit span { font-size: inherit; font-weight: inherit; position: relative; z-index: 2; }

/* ===== 휴대폰 입력 (step 19) ===== */
.wd_score .concept3 article[data-step="19"] { text-align: center; }
.wd_score .concept3 article[data-step="19"] table { margin: 20px auto 8px; }
.wd_score .concept3 article[data-step="19"] .phone { display: flex; align-items: center; justify-content: center; list-style: none; padding: 0; margin: 0; flex-wrap: nowrap; }
.wd_score .concept3 article[data-step="19"] .phone li { display: flex; align-items: center; }
.wd_score .concept3 article[data-step="19"] .phone span { color: #666; font-size: var(--size-28); margin: 0 var(--size-5); }

.wd_score .concept3 article[data-step="19"] .phone select { font-size: var(--size-28);  padding: var(--size-18) var(--size-30); border: 1px solid #c5c5c5; border-radius: 6px; background: #fff; font-weight: 500;}
.wd_score .concept3 article[data-step="19"] .phone .inp_ph input { width: var(--size-200);  text-align: center; border: 1px solid #c5c5c5; border-radius: 6px; -webkit-appearance: none; appearance: none; font-size: var(--size-28); padding: var(--size-18) 0; font-weight: 500;}

/* ========= Concept3 색상 테마 ========= */
/* red 
.wd_score .concept3 .q_list.red li { background: #ff8989 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.red li:nth-child(2n) { background: #ff6e6e url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.red li.g1 { background: #ff8989 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.red li.g2 { background: #ff6e6e url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.red li { background: #ff8989 url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.red li:nth-child(2n) { background: #ff6e6e url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); } */

/* org
.wd_score .concept3 .q_list.org li { background: #ffa478 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.org li:nth-child(2n) { background: #ff864c url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.org li.g1 { background: #ffa478 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.org li.g2 { background: #ff864c url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.r2 li.g1 { background: #b09bff url("/landing/img/c3_btn_5.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.r2 li.g2 { background: #a079f8 url("/landing/img/c3_btn_5.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.org li { background: #ffa478 url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.org li:nth-child(2n) { background: #ff864c url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); }  */

/* grn
.wd_score .concept3 .q_list.grn li.g1 { background: #89b185 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.grn li.g2 { background: #659560 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.grn li { background: #89b185 url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.grn li:nth-child(2n) { background: #659560 url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); }  */

/* blu
.wd_score .concept3 .q_list.blu li { background: #8eb4e7 url("/landing/img/c3_btn_1.png") no-repeat center / contain; } 
.wd_score .concept3 .q_list.blu li:nth-child(2n) { background: #5997ea url("/landing/img/c3_btn_1.png") no-repeat center / contain; } 
.wd_score .concept3 .q_list.blu li.g1 { background: #8eb4e7 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.blu li.g2 { background: #5997ea url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); }  */

/* ppl
.wd_score .concept3 .q_list.ppl li { background: #b09bff url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.ppl li:nth-child(2n) { background: #a079f8 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.ppl li.g1 { background: #b09bff url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .q_list.ppl li.g2 { background: #a079f8 url("/landing/img/c3_btn_1.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.ppl li { background: #b09bff url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); } 
.wd_score .concept3 .adr .q_list.ppl li:nth-child(2n) { background: #a079f8 url("/landing/img/c3_btn_2.png") no-repeat; background-size: var(--size-50); }  */

/* ========= 하단 배너 ========= */
.bottom_banner { width: 100%; min-height: var(--size-50); position: fixed; bottom: 0; background-color: #f654a9; } 
.lanking_ft_banner { font-family: "NotoSansKR", "Malgun Gothic", "맑은 고딕", "Helvetica", -apple-system, "Apple SD Gothic Neo", Arial, sans-serif !important; } 
.lanking_ft_banner .bottom_banner { height: auto; } 
.lanking_ft_banner .bottom_banner section { position: sticky; bottom: 0; left: 0; width: 100%; padding: var(--size-15) var(--size-10) var(--size-10); box-sizing: border-box; background-color: #f654a9; text-align: center; } 
.lanking_ft_banner .bottom_banner h3 { font-size: var(--size-23); color: #fff; font-weight: 400; } 
.lanking_ft_banner .bottom_banner h3 > strong { font-size: var(--size-32); font-weight: 700; color: #f7e448; } 
.lanking_ft_banner .bottom_banner p { font-size: var(--size-14); color: #fff; font-weight: 300; } 
.lanking_ft_banner .bottom_banner .small-txt { display: block; margin-top: var(--size-10); font-size: var(--size-8); color: #fff; font-weight: 300; } 

/* 서비스 만족도 설문조사 */
.lanking_ft_banner.survey .bottom_banner { background-color: #FDD20E; } 
.lanking_ft_banner.survey .bottom_banner section { background-color: #FDD20E; } 
.lanking_ft_banner.survey .bottom_banner h3 { font-size: var(--size-14); color: #673939; line-height: 1.4; } 
.lanking_ft_banner.survey .bottom_banner .point { color: #D80032; font-size: var(--size-22); } 
.lanking_ft_banner.survey .bottom_banner .txt > strong { font-weight: 700; } 
.lanking_ft_banner.survey .bottom_banner .txt { font-size: var(--size-22); color: #673939; font-weight: 400; } 
.lanking_ft_banner.survey .bottom_banner .small-txt { color: #673939; } 

/* ========= 페이지별 컴포넌트 ========= */

/* 색상 선택 (test01) */
.color_select { text-align: center; margin: 0; } 
.color_list { overflow: hidden; width: var(--size-50); margin: 0 auto; } 
.color_list li { float: left; width: var(--size-50); height: var(--size-50); margin-left: var(--size-10); } 
.color_list li a { display: block; width: var(--size-50); height: var(--size-50); } 

.wd_score .concept3 .q_list li.color1 .answer_txt { box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.5); background-color: rgba(196, 0, 0, 0.6);;} 
.wd_score .concept3 .q_list li.color2 .answer_txt { box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.5); background-color: rgba(5, 167, 20, 0.6);;} 
.wd_score .concept3 .q_list li.color3 .answer_txt { box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.5); background-color: rgba(255, 144, 0, 0.6);;} 
.wd_score .concept3 .q_list li.color4 .answer_txt { box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.5); background-color: rgba(0, 96, 255, 0.6);;} 
.wd_score .concept3 .q_list li.color5 .answer_txt { box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.5); background-color: rgba(255, 35, 164, 0.6);;} 

/* 성별 선택 이미지형 (test02) */
.imgld .qst_title { text-align: center; padding-top: var(--size-30); font-size: 2em; font-weight: bold; } 
.imgld ul li a { display: block; } 
.qst_imgO ul { overflow: hidden; width: var(--size-50); margin: var(--size-10) auto; } 
.qst_imgO ul li { float: left; text-align: center; width: var(--size-50); margin-left: var(--size-48); font-size: var(--size-14); font-weight: 500; } 
.qst_imgO ul li:first-child { margin-left: 0; } 
.qst_imgO ul img { display: block; padding-bottom: var(--size-10); } 
.score_ban { display: block; position: absolute; left: 0; bottom: 0; width: 100%; } 

/* 랜덤 배너 (test01) */
.randon_banner .foot_banner { padding: var(--size-20) 0; box-sizing: border-box; background-color: #ff5858; text-align: center; font-family: '나눔고딕'; line-height: 1.2; } 
.randon_banner .foot_banner p { margin: 0 auto; padding: 0; border: none; color: #ffd35c; font-size: var(--size-18); font-weight: 400; } 
.randon_banner .foot_banner h3 { margin: 0 auto; padding: 0; border: none; color: #fff; font-size: var(--size-24); font-weight: 500; } 
.randon_banner .foot_banner small { color: #fff; font-size: var(--size-12); } 

/* 로고 텍스트 정렬 */
.logo.text-start { text-align: left; padding-left: var(--size-15); } 

/* 하단 프로모션 텍스트 */
.bottom_banner .promo-txt { margin-top: var(--size-36); font-family: 'Noto Sans KR'; font-size: var(--size-14); color: #fff; line-height: 1.5; font-weight: 400; text-align: center; } 

/* ========= 스와이프 방향 표시 ========= */
.swipe-indicator {
  position: absolute;
  top: 13.5%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.swipe-indicator.visible { opacity: 1; }
.swipe-indicator.left { left: var(--size-50); flex-direction: row-reverse; }
.swipe-indicator.right { right: var(--size-50); }
.swipe-indicator span {
  display: block;
  color: rgba(255,255,255,1);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.swipe-indicator span:nth-child(1) { font-size: var(--size-35); padding-top: min(9.4px, calc(100vw * (9.4 / var(--base-width))));}
.swipe-indicator span:nth-child(2) { font-size: var(--size-50); padding-top: min(7.5px, calc(100vw * (7.5 / var(--base-width))));}
.swipe-indicator span:nth-child(3) { font-size: var(--size-65); }
.swipe-indicator.visible span:nth-child(1) { animation: swipePulse 1.5s ease-in-out infinite 0s; }
.swipe-indicator.visible span:nth-child(2) { animation: swipePulse 1.5s ease-in-out infinite 0.18s; }
.swipe-indicator.visible span:nth-child(3) { animation: swipePulse 1.5s ease-in-out infinite 0.36s; }
@keyframes swipePulse {
  0%, 100% { opacity: 1; }
  40%, 60% { opacity: 0.3; }
}

/* ========= 폼 페이지 오버라이드 ========= */
.wd_score.kakao .q_form { background: none; height: auto; padding-top: 0; } 
.wd_score .q_form input[type="tel"] { text-align: center; height: auto; } 

/* 출생년도 입력 (test17) */
.birth-year-section { text-align: center; font-size: var(--size-28); } 
.birth-year-section .year-label { font-weight: normal; } 
.birth-year-section .year-label.before { margin-right: var(--size-5); font-size: var(--size-28); font-weight: 500; } 
.birth-year-section .year-label.after { margin-left: var(--size-5); font-size: var(--size-28); font-weight: 500; } 
.birth-year-section .inp_brth input { width: var(--size-80); padding: var(--size-18) 0; margin-top: 0; height: auto; border: 1px solid #c5c5c5; border-radius: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: var(--size-28); font-weight: 500; text-align: center; box-sizing: border-box;} 

/* 이름 입력 (test18) */
.wd_score .concept3 .inp_name input { width: var(--size-260); padding: var(--size-18) 0; text-align: center; border: 1px solid #c5c5c5; border-radius: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: var(--size-28); font-weight: 500;} 

/* 메시지 가이드 */
.msg_guide_group { margin-top: var(--size-20); display: none; } 
.msg_guide_group .txt { text-align: center; font-size: var(--size-14); color: #333; line-height: 1.4; } 
.msg_guide_group .txt > strong { font-weight: 700; } 

/* ========= 동의 팝업 (test19) ========= */
.agr_pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; max-height: 85vh; overflow-y: auto; z-index: 101; display: none; background: #fff; padding: 18px 16px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); box-sizing: border-box; } 
.agr_pop .layerconfirm { display: block; background: #ffdb35; text-align: center; color: #472827; font-weight: 600; font-size: var(--size-16); line-height: var(--size-16); padding: var(--size-15) 0; } 
.agr_pop .btn_close { position: absolute; right: 16px; top: 16px; cursor: pointer; z-index: 1; } 
.agr_pop .per_info { margin: 0; padding: 0 0 var(--size-20) 0; } 
.agr_pop .per_info, .agr_pop .chk_colt { border: none; } 
.agr_pop .chk_colt { margin-top: 0; } 
.agr_pop .chk_offer { margin-top: 10px; line-height: 100%; position: relative; } 
.agr_pop .per_check.chk_all { margin-top: 0; padding: var(--size-5) 0 var(--size-15) 0; border-bottom: 1px dashed #ff8989; } 
.agr_pop .per_check.chk_all label { line-height: 1.5em; } 
.agr_pop .per_check { padding: 0; } 
.agr_pop .per_check input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; } 
.agr_pop .per_check label { display: inline-block; padding: 0 0 0 22px; height: 15px; background: url('/img/common/chk_bg_peach.png') no-repeat 0 0; background-size: 15px; letter-spacing: -1px; font-size: 13px; line-height: 17px; cursor: pointer; } 
.agr_pop .per_check label.actOn { background-position: 0 -15px; } 
.agr_pop .more_box { position: absolute; right: 0; top: 0; color: #ff8989; border-bottom: 1px solid #ff8989; cursor: pointer; } 
.agr_pop .per_more .open, .agr_pop .on .per_more .close { color: #ff8989; } 
.agr_pop .more_box .per_more { font-size: 0.95em; padding-bottom: var(--size-2); } 
.agr_pop .per_info .cont_box_wrap { display: none; overflow: hidden; margin-top: 8px; } 
.agr_pop .per_check.chk_offer.on .cont_box_wrap { display: block; } 
.agr_pop .per_info .cont_box { padding: 8px; max-height: 120px; overflow-y: auto; font-size: 11px; line-height: 1.5; color: #666; word-break: break-all; border: 1px solid #eee; background: #fafafa; box-sizing: border-box; } 
.agr_pop .per_info .cont_box pre {  white-space: pre-wrap; word-break: break-word;}
.agr_pop .per_info_hd { display: block; margin-bottom: var(--size-15); padding-top: var(--size-20); } 
.agr_pop .per_info .per_info_hd .txt { padding-top: var(--size-25); background: url("/img/common/icon_heart_yellow.png") no-repeat top center; background-size: var(--size-20) var(--size-20); text-align: center; font-size: var(--size-14); color: #333; line-height: 1.4; } 
.agr_pop .per_info .per_info_hd .txt > strong { font-weight: 700; } 
.btn_conf.circle { display: block; width: 100%; margin: 12px auto 0; padding: 12px 0; background: linear-gradient(135deg, #e42ea7 0%, #c51f91 100%); border-radius: 24px; text-align: center; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-decoration: none; box-shadow: 0 3px 12px rgba(228,46,167,0.3); } 
.dimmed2 { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 100; } 

/* ========= 렌즈 왜곡 효과 ========= */
.wd_score .q_list li { position: relative; } 
.wd_score .q_list a { position: relative; overflow: hidden; } 
.distortion-layer {  position: absolute;  inset: 0;  z-index: 0;  pointer-events: none; background-repeat: no-repeat;  background-size: cover; backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  filter: url(#liquid-glass-button) saturate(120%) brightness(1.15);}
.content-layer { position: relative; z-index: 1; height: 100%; border-radius: var(--btn-lg-radius); overflow: hidden; width: 100%;} 
.wd_score .q_list a .answer_txt { position: relative; z-index: 2; } 

.wd_score .concept3 .q_list .answer_txt{
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}

.wd_score .concept3 .q_list .answer_txt::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(
    to bottom,
    rgba(222,204,180,0.35) 0%,
    rgba(222,204,180,0.20) 40%,
    rgba(222,204,180,0.10) 70%,
    rgba(222,204,180,0.00) 100%
  );
  z-index: -1;
  pointer-events:none;
}

.wd_score .concept3 .q_list.noneColor .answer_txt::before{
  content: none;
}

.wd_score .concept3 .q_list .answer_txt::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index: -1;
  pointer-events:none;
}

body .bottom_pop{
  position: static;
  transform: none;
}