/* 페이지 전용 컨테이너 스타일 (ID 변경) */
#promo-page {
    background-color: #ffffff; /* 이미지의 어두운 남색 배경 */
    color: #fff;
}
#promo-wrapper {
    max-width: 980px; /* 모바일 최대 너비 */
    margin: 0 auto;
    box-sizing: border-box;
 
}
.inner{
    position:relative;
    height:auto;
}

/* LT-top - 상단 영역 */
.LT-top{
    position:relative;
    width:100%;
    height:240px;
    background-color: #4353ff;
    background-image: url("../images/top_bg.png");
    
}
.LT-top .tit{
    width:100%;
    position:absolute;top:60px;left:50%;
    transform: translateX(-50%);
    display: block;
    text-align: center;
    font-size:36px;
    color:#fff;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.3;
}
.LT-top .subtit{
    position:absolute;top:50px;left: 50%;
    transform: translateX(-50%);
    display: block;
    font-size:18px;
    color:#eeff7b;
    font-weight: 600;
    letter-spacing: -0.5px;
     
}
/* 상태박스 */
.status-box {
  position: absolute; left: 50%; top: 170px;  
  transform: translateX(-50%);
  width: 360px;
  background-color: #fff;
  border-radius: 24px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
 
}

.status-item {
  text-align: center;
  flex: 1;
}

.status-item .label {
  font-size: 16px;
  color: #777;
  margin-bottom: 4px;
}

.status-item .value {
  font-size: 18px;
  color: #111;
  font-weight: 500;
}

.status-item .value strong {
  font-size: 28px;
  font-weight: 700;
  color: #000;
}
.divider {
  width: 1px;
  height: 40px;
  background-color: #eee;
}

/*  LT-conwrap = LT-qna + LT-bottom 
    LT-top 빼고 padding 주기 위함   */

.LT-conwrap{
    box-sizing: border-box;
    position:relative;
    width:100%;
    height:auto;
}
.pado{
  padding:0 16px;
}
.padx{
  padding: 0 0;
}
/* ★LT-qna - 문항 영역 */
.LT-qna{
    position:relative;
    width:100%;
    height:auto;
    margin-top:60px;
    margin-bottom:80px;
}
.LT-qna .part{ /* 언어능력 */
    width:80px;
    text-align: center;
    padding: 6px;             
    border-radius:  0px;          
    background-color: #111;      
    font-size: 18px;             
    color: #fff;    
    font-weight: 600;
}
.LT-qna .que{ /* Q.문제 */
    margin :12px 0 20px 0;
    font-size: 22px;             
    color: #111;  
    font-weight: 600;  
    letter-spacing: -0.5px;
    line-height: normal;    
}
.LT-qna .quebox{
    width:100%;
    height:auto;
    background-color: #f2f4f9;
    padding-top: 32px;
    padding-bottom:32px;
    border-radius: 0px;
}
.LT-qna .quebox .qtxt{
    margin :0 30px;    
    color:#111;
    font-size:18px;
    letter-spacing: -0.6px;
    line-height: 1.6;
}

.LT-qna .quebox img{
    max-width: 100%;
}

/*  A.답변 - 사지선다 */
.LT-qna .ansbox{
    width:100%;
}
.LT-qna .ansbox .anslist{
    display:286lex;
    justify-content: left;
    flex-wrap: wrap;
    margin-top:10px;
}
.LT-qna .ansbox .anslist .ans{
    width:100%;
    height:auto;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 0px;
    border: 1px solid #eef0f4;;     
}
.LT-qna .ansbox .anslist .ans:hover{
 
    border: 1px solid #4353ff;    
}
.LT-qna .ansbox .anslist .ans a{
    display: block;
    padding: 18px 28px;  
    color:#111;
    font-size:18px;
    letter-spacing: -0.6px;
}
 

/* 하단버튼 박스 - 이전문제, 다음문제 */
/* .btnbox {
  display: flex;
  justify-content: center; 
  gap: 16px;                 
  margin-top: 40px;
  padding: 0 16px; 
  box-sizing: border-box;
}
.btnbox .btn {
  min-width: 160px;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 0px;
  cursor: pointer;
  letter-spacing: -0.5px;
}
.btnbox .btn.prev {
  background-color: #fff; 
  padding-left: 8px;  
  color: #000;
  border: 1px solid #555;
}
.btnbox .btn.next {
  background-color: #4353ff;
  color: #fff;
  padding-right: 8px;  
}
.btnbox .btn.join {
  background-color: #4353ff;
  color: #fff; 
  padding-left:24px;
}
.btnbox .btn.login {
  background-color: #111111;
  color: #fff;
  padding-left:24px;
}

.btnbox svg {
  vertical-align: middle;
}
.btn.prev svg {
  margin-right:  4px;
  margin-bottom:2px;
}
.btn.next svg {
  margin-left: 4px;
  margin-bottom:2px;
} */
/* 기본 (PC용) */
.btnbox {
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 16px;                 
  margin-top: 40px;
  padding: 0 16px;
  box-sizing: border-box;
}

.btnbox .btn {
  min-width: 160px;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: -0.5px;
  box-sizing: border-box;
}

/* 색상 스타일 */
.btnbox .btn.prev {
  background-color: #fff; 
  padding-left: 8px;  
  color: #000;
  border: 1px solid #555;
}
.btnbox .btn.next {
  background-color: #4353ff;
  color: #fff;
  padding-right: 8px;  
}
.btnbox .btn.join {
  background-color: #4353ff;
  color: #fff; 
  padding-left: 24px;
}
.btnbox .btn.login {
  background-color: #111;
  color: #fff;
  padding-left: 24px;
}

/* 아이콘 정렬 */
.btnbox svg {
  vertical-align: middle;
  margin-left: 6px;
  margin-bottom: 2px;
}

/* 📱 모바일 대응 */
@media screen and (max-width: 768px) {
  .btnbox {
    flex-direction: column; /* 세로 정렬 */
    gap: 12px;              /* 버튼 간 여백 줄이기 */
    align-items: stretch;   /* 버튼을 가로로 꽉 채움 */
  }

  .btnbox .btn {
    width: 100%;            /* 버튼을 전체 너비로 */
    max-width: 360px;       /* 너무 넓어지지 않게 제한 */
    margin: 0 auto;         /* 가운데 정렬 */
    text-align: center;
  }
}

/* ! 응시페이지 하단버튼 박스 - 이전문제, 다음문제 가로배치 */
.btnbox-row {
  display: flex;
  justify-content: center; 
  gap: 16px;                 
  margin-top: 40px;
  padding: 0 16px; 
  box-sizing: border-box;
}
.btnbox-row .btn {
  min-width: 160px;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 0px;
  cursor: pointer;
  letter-spacing: -0.5px;
}
.btnbox-row .btn.prev {
  background-color: #fff; 
  padding-left: 8px;  
  color: #000;
  border: 1px solid #555;
}
.btnbox-row .btn.next {
  background-color: #4353ff;
  color: #fff;
  padding-right: 8px;  
}

.btnbox-row svg {
  vertical-align: middle;
}
.btn.prev svg {
  margin-right:  4px;
  margin-bottom:2px;
}
.btn.next svg {
  margin-left: 4px;
  margin-bottom:2px;
}

/* ★LT-bottom - 배너 고정 노출 영역 */
.LT-bottom{
    width:100%;
}
.LT-bottom .banbox{
    text-align: center;
}
.LT-bottom .banlist .ban a img {
  width: 100%;          /* 반응형 축소 */
  height: auto;
  max-width: 690px;     /* PC 기준 최대 크기 제한 (원본 너비에 맞게 조정) */
  display: block;
  margin: 0 auto;       /* 중앙 정렬 */
  border-radius: 10px;   
  margin-bottom:10px;
}
.LT-bottom .ending{
    font-size:24px;
    color:#111;
    font-weight: 600;
    letter-spacing: -0.7px;
    padding:48px 0;
    line-height: normal    
}



/* ------------------------------------------------------------ */
/* 2. 응시완료 페이지 시작 */
.LT-con{
    position:relative;
    width:100%;
    height:auto;
    margin-top:20px;
    margin-bottom:70px;
}
.LT-con .conbox{
  box-sizing: border-box;
    width:100%;
    height:auto;
    background-color: #f2f4f9;
    padding: 60px 16px 80px 16px;
    border-radius: 0px;
}
.tit1{
    text-align: center;
    margin :0 24px;    
    color:#111;
    font-size:26px;
    letter-spacing: -0.7px;
    line-height: 1.5;
    font-weight: 600;
    padding-bottom:130px; /* 하단 버튼 위치 조절*/
}
/* 상태박스(버전2) 응시완료 화면에서 쓰임. */
/* .status-box2 {
  position: absolute; left: 50%; top: 170px;  
  transform: translateX(-50%);
  width: 500px;
  background-color: #fff;
  border-radius: 250px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 32px 10px;
}
.status-item2 {
  text-align: center;
  flex: 1;
  display: flex;
  justify-content: center;
}
.status-item2 .label {
  margin-right:10px;
  font-size: 18px;
  color: #111;
  font-weight:400;
  margin-bottom: 4px;
  letter-spacing: -0.5;
}
.status-item2 .value {
  font-size: 18px;
  color: #111;
  font-weight: 500;
}
.status-item2 .value strong {
  font-size: 30px;
  font-weight: 700;
  color: #4353ff;
}
.status-item2 .value span {
  color: #999;       
  font-size: 18px;
  font-weight: 400;
  margin-left: 2px;
}
.divider {
  width: 1px;
  height: 40px;
  background-color: #eee;
} */
/* 상태박스(버전2) */
.status-box2 {
  position: absolute;
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
  width: 500px;
  max-width: calc(100% - 32px); /* ← 모바일 좌우 16px 여백 확보 */
  background-color: #fff;
  border-radius: 250px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 32px 10px;
  box-sizing: border-box; /* ← padding 포함한 정확한 폭 계산 */
  overflow: hidden; /* ← 혹시라도 내부 내용 튀어나오는 것 방지 */
}

/* 내부 구성 */
.status-item2 {
  text-align: center;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0; /* ← flex overflow 방지 */
}

.status-item2 .label {
  margin-right: 10px;
  font-size: 18px;
  color: #111;
  font-weight: 400;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.status-item2 .value {
  font-size: 18px;
  color: #111;
  font-weight: 500;
}

.status-item2 .value strong {
  font-size: 30px;
  font-weight: 700;
  color: #4353ff;
}

.status-item2 .value span {
  color: #999;
  font-size: 18px;
  font-weight: 400;
  margin-left: 2px;
}

.divider {
  width: 1px;
  height: 40px;
  background-color: #eee;
}

/* 상태박스(버전2) 모바일 대응 */
@media screen and (max-width: 768px) {
  .status-box2 {
    top: 200px;
    width: calc(100% - 32px); /* 화면 전체에서 좌우 16px 제외 */
    border-radius: 100px; /* 좁은 화면에선 살짝 완화 */
  }
  .status-item2 .label,
  .status-item2 .value,
  .status-item2 .value span {
    font-size: 16px;
  }

  .status-item2 .value strong {
    font-size: 24px;
  }

  .divider {
    height: 30px;
  }
}



/* ------------------------------------------------------------ */
/* 3. 결과리포트 페이지 시작 */
.LT-result{
    position:relative;
    width:100%;
    height:auto;
    margin-top:60px;
    margin-bottom:24px;
}

.LT-result .re-tit{ /* 타이틀 */
    margin :24px 0 12px 0 ;
    font-size: 24px;             
    color: #111;  
    font-weight: 600;  
    letter-spacing: -0.5px;
}
.LT-result .rebox{ /* 컨텐츠 회색박스 */
    width:100%;
    height:auto;
    background-color: #f2f4f9;
    padding: 30px 0;
    border-radius: 0px;
}
.LT-result .rebox .re-subtit{ /* 소타이틀  */
    margin :0 0 0 32px;    
    color:#111;
    font-weight:600 ;
    font-size:20px;
    letter-spacing: -0.6px;
}
.LT-result .rebox .conbox{
    margin:12px 16px 36px 16px;
    padding:40px 20px;
    background-color: #fff;
    border-radius: 16px;
    text-align: center;
}
.LT-result .rebox .conbox p{

    font-size: 18px;
    color:#111;
}
.LT-result .rebox .conbox .point{
    color:#4353ff;
    font-weight:600;
}
/*  상 . 중 . 하   */
.ab-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 980px;
  max-width: 90%;
  margin: 0 auto;
}
.ab-item {
  flex: 1 1 150px;
  background-color: #f3f4f7;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.ab-name {
  font-size: 18px;
  color: #111;
  font-weight: 600;
  line-height: 1.4;
}
.ab-name span {
  display: block;
  font-size: 15px;
  color: #666;
  font-weight: 400;
}
.ab-level {
  aspect-ratio: 1 / 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-level.high { background-color: #4353ff; } /* 상 */
.ab-level.mid { background-color: #32c47c; }   /* 중 */
.ab-level.low { background-color: #f6ca00; }   /* 하 */

 /* 성적분포도 이미지 */

 .LT-result .conbox li{
  display:none;
}

.LT-result .conbox img {
  max-width: 100%;   /* 부모 너비를 넘지 않게 */
  height: auto;      /* 가로세로 비율 유지 */
  display: block;    /* 여백 제거 */
  margin: 0 auto;    /* 가운데 정렬 */
}

.LT-result .conbox li.on{
  display:block;
}

.txt3{
  display: inline-block;
  font-size:22px;
  font-weight: 600;
  color:#4353ff;
  text-align: center;
  margin-bottom:16px;
}

/* 테스트해설강의 들어가는 비디오 박스 임시 사이즈 */
.video_test{
  background-color: #111;
  width:610px;
  height:343px;
  margin:24px auto;
}


/* 추천강의에 들어가는 배너들 */
.re-banbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.re-banbox img {
  width: 100%;
  max-width: 980px;
  height: auto;
  border-radius: 12px;
  display: block;
}


/* 탭메뉴 시작 */
.tab {
    width: 100%;
    margin: 0 auto;
}

.tab .tab-items {
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 8px;
}

/* 넓은 화면: 한 줄에 6개 */
@media (min-width: 651px) {
  .tab .tab-items li {
    flex: 1 0 15%; /* 100/6 = 약 16.66% */
    box-sizing: border-box;
    text-align: center;
  }
}

/* 좁은 화면: 한 줄에 3개씩 두 줄 */
@media (max-width: 650px) {
  .tab .tab-items li {
    flex: 1 0 30.33%; /* 100/3 = 약 33.33% */
    box-sizing: border-box;
    text-align: center;
  }
}

/* 탭 버튼 */
.tab .tab-items a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 8px;
    width: 100%;
    box-sizing: border-box;
    background: #e8e8eb;
    font-size: 16px;
    font-weight: 500;
    border-radius: 10px;
}
.tab .tab-items a.on {
    background: #4353ff;
    color: #fff;
    font-weight: 700;
}