@charset "utf-8";

/* Shared mobile overrides. Keep desktop and printed reports on their original styles. */
@media screen and (max-width: 1024px) {
  .test_icon {
    width: 78px;
  }
  .tabMenu2 > .inside {
    display: flex; flex-flow: row nowrap; justify-content: flex-start;
    width: 100%; max-width: 100%; min-width: 0; overflow-x: auto;
    gap: 8px; overscroll-behavior-x: contain;
  }
  .tabMenu2 > .inside > .tab2 {
    flex: 0 0 auto; width: auto !important; max-width: none; margin: 0 !important;
    white-space: nowrap; padding: 10px 16px;
  }
  .mypage .tabMenu2 > .inside { align-items: center; scrollbar-width: none; -ms-overflow-style: none; }
  .mypage .tabMenu2 > .inside::-webkit-scrollbar { display: none; }
  .mypage .tabMenu2 > .inside > .tab2 {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; height: 36px; padding: 0 16px; line-height: 1.2;
  }
  .mypage .tabMenu2 > .inside > .tab2 > span { display: block; line-height: inherit; }
  .next_level>div {
    min-width: 300px;
    height: 200px;
}
  .ico_level_check {
    margin: 20px auto 0;
}

  .next_level>div label {
    height: 180px;
    padding-top: 20px;
  }
  .btn_row_time button.btn_re_listen{margin-bottom:10px}
  .sol_body .direc_area .direc_box:has(> .direc_desc.on) {
    display: flex; flex-direction: column; min-height: 100%;
  }
  .sol_body .direc_area .direc_box > .direc_desc.on {
    flex-shrink: 0; min-height: 0; margin-top: auto; margin-bottom: auto;
  }
  .sol_body .direc_desc.on .speaker_icon { margin-top: 0; margin-bottom: 0; }
  .sol_body .direc_area .wave_circle_box { display: none !important; }

  .survey_box .radio_label {  
    margin: 10px 10px;
    padding-left: 28px;
    text-align: left;            line-height: 135%;
}

.survey_check_row.left.v3 {
    margin-left: 25px
}

 .survey_box .radio_row{
    margin-top: 20px;justify-content: start;
}
.survey_num {
    font-size: 2rem;
}
.survey_ques {
    margin-top: 20px;
    font-size: 1.6rem;line-height: 135%;
}
  
  .fnt_large {
    font-size: 1.6rem;
}
  .page_desc02 {
        font-size: 1.6rem;
    line-height: 130%;
}
  .caution_pst>div {
    width: 100%;
    align-items: center;
    justify-content: center;
}
 .btn_row_time button.mr10 {
    margin-right: 0px;
}

.btn_row_double.mt60 {
    margin-top: 30px;
}

 .btn_row_time button.btn_restart{margin-bottom:10px}

  .stt_area {
    min-height: 10px;
  }
  .modal_inner {
    padding: 0 10px;
}
  .sol_body .test_caution { padding: 12px; text-align: left; }
  .sol_body .test_caution:before {
    position: static; display: inline-block; width: 20px; height: 20px;
    margin-right: 6px; vertical-align: -4px; background-color: transparent;
  }
  .sol_body .speaker_icon { display: block; margin-left: auto; margin-right: auto; }
  .ques_tit {
    margin-top: -10px;
}
  .ques_num {
  font-size: 1.2rem;
    margin-right: 10px;
    padding: 6px 10px;
}
  .sol_body .conts_triple:has(.direc_area) { flex-direction: column; align-items: stretch; gap: 12px; }
  .sol_body .conts_triple:has(.direc_area) > div { min-width: 0; }
  .sol_body .conts_triple:has(.direc_area) > .check_right { width: 100%; height: auto; padding: 0; margin: 0; }
  .sol_body .conts_triple .direc_area {
    box-sizing: border-box; width: 100%; min-height: 0;
    height: var(--mobile-direc-height, 30dvh); overflow-y: auto;
    overscroll-behavior-y: contain; overflow-anchor: none;
  }
  .desc_box_white.desc_box_info {
    margin-top: 20px;
}
  .wait_txt01 {
    font-size: 2.8rem;
  }
  .finish_desc {
    margin-top: 20px;
    font-size: 1.5rem;
}
  .btn_row_time {
    position: relative; 

}
.check_right{height: initial}
  .sol_body .lottie_circle_intro, .sol_body .lottie_wave_intro { display: none !important; }
  .sol_body .ani_fadeinup:has(.timer) { animation: none; transform: none; opacity: 1; }
  .sol_body .timer {
    position: fixed; top: 74px;
    right: 4px; bottom: auto; left: auto;
    width: 85px; height: 50px; margin: 0;
    transform: none; z-index: 100; border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  }
  .sol_body .timer .wrap_timer {
    box-sizing: border-box; width: 100%; height: 100%; border-radius: 0px;
    border: 1px solid #AEA7F3; box-shadow: none; overflow: hidden;
  }
  .sol_body .wave_area:has(> .timer) { width: 100%; height: 50px; align-items: center; }
  .sol_body .conts_triple > div:has(> .wave_area.full) { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
  .sol_body .wave_area.full {
    box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center;
    width: 100%; max-width: 100%; min-width: 0; min-height: 150px; margin: 0;
  }
  .sol_body .conts_triple > div:has(> .wave_area) { display: flex; flex-direction: column; gap: 0; }
  .sol_body .conts_triple > div > .direc_area:has(+ .wave_area) { margin-bottom: 0; }
  .sol_body .conts_triple > div > .wave_area { width: 100%; margin: 0; flex-shrink: 0; }
  .sol_body .wave_area > .timer { position: relative; top: auto; right: auto; bottom: auto; left: auto; flex: 0 0 85px; margin: 0 0 0 auto; z-index: auto; }
  .sol_body .wave_area.full .wave_box,
  .sol_body .wave_area:has(> .timer) .wave_box { flex: 1 1 0; min-width: 0; width: auto; height: 50px; margin: 0; overflow: hidden; }
  .sol_body .wave_area.full .ico_mic,
  .sol_body .wave_area:has(> .timer) .ico_mic {
    position: static; top: auto; right: auto; bottom: auto; left: auto;
    box-sizing: border-box; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 5px;
  }
  .sol_body .wave_area.full #waveform,
  .sol_body .wave_area.full #waveform > wave,
  .sol_body .wave_area:has(> .timer) #waveform,
  .sol_body .wave_area:has(> .timer) #waveform > wave {
    box-sizing: border-box; width: 100% !important; max-width: 100%; overflow: hidden !important;
  }
  .sol_body .wave_area.full #waveform canvas,
  .sol_body .wave_area:has(> .timer) #waveform canvas { width: 100% !important; max-width: 100%; }
  .sol_body .wave_area #waveform,
  .sol_body .wave_area #waveform wave,
  .sol_body .wave_area #waveform canvas { height: 50px !important; }
  .sol_body .timer .wrap_timer.ing { border-color: #ffb100; box-shadow: none; }
  .sol_body .timer .timer-pos { top: 0; left: 0; width: 100%; text-align: center; }
  .sol_body .timer .txt_timer, .sol_body .timer .txt_timer2 {
    display: block; padding: 2px; border-radius: 0; font-size: 11px; line-height: 16px;
  }
  .sol_body .timer .time_circles > canvas { visibility: hidden; }
  .sol_body .timer .time_circles > .textDiv_Seconds {
    top: 20px !important; left: 0 !important; width: 100% !important; padding: 0;
  }
  .sol_body .timer .time_circles > div > h4 { display: none; }
  .sol_body .timer .time_circles > div > span { font-size: 24px !important; line-height: 28px !important; }
  .sol_body .timer .inface_timer_ready, .sol_body .timer .inface_timer_ready.Directions,
  .sol_body .timer .inface_timer_save {
    top: 20px; left: 0; width: 100%; margin: 0; font-size: 14px; line-height: 28px; text-align: center;
  }
  .sol_body .timer .inface_timer_loading .d-body.abs {
    top: 22px; left: 50%; margin: 0; transform: translateX(-50%) scale(0.5); transform-origin: top center;
  }
  .btn_row_single {
      margin-top: 30px;
  }
  .male_box label:after {
    background-size: 140px;
  }
  .female_box label:after {
      background-size:140px;
  }
  .interviewer>div label {
    height: 120px;
  }
  .interviewer>div {
    position: relative;
    width: 100%;
    height: 120px;
    padding: 40px 0 0 40px;
    text-align: left;
}
  .interviewer {
      width: 100%;
      margin: 20px auto 0;
      flex-direction: column;
      gap:15px
  }
  .interviewer>div label {
      padding: 20px 0 0 20px;
  }
  h2.page_tit_gradient.kr {
    font-size: 2.5rem;
}
  .mt100 {
    margin-top: 40px;
}
  .sol_body div:has(> span[id^="test_q_answer"]) { display: none !important; }
  .test_info li {
    flex-direction: column;gap:10px
}
.test_info_desc {
    width: 100%;
    line-height: 1.6;
}
  .btn_row_double.mt100 {
    margin-top: 40px;
}
  .wave_inner img {
    top: 30%;
    left: 0px;
}
  .btn_scan_box {
      bottom: -5px;background-color:initial  
  }
  .after_scan {
    left:initial;
    top:initial
  }
  .before_scan {
     left:initial;
     top:initial
  }
  .btn_row_face button:nth-of-type(1) {
      margin-right: 0px;
  }
  .conts_box {
    margin-top: 30px;
    padding: 20px;
}
  .search_row {
    gap: 10px;
}
  .desc_caution {
    
    margin-top: 40px;
    padding: 12px 20px 12px 46px;
   
    font-size: 1.25rem;
}
  .caution_pst {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 2rem;
}
  .caution_tit {
    margin-top: 20px;
    font-size: 1.8rem;
    font-weight: 600;
}
  .caution_box {
  
    margin: 30px auto 0;
    padding: 20px;
}
  .btn_black{width:initial;padding:0 15px}
  .btn_prev, .btn_next {
    padding: 0 15px;
}
    .btn_row_triple .btn_prev {
    margin-right: 0px;
}
  .btn_row_triple .btn_next {
    margin-left: 0px;
}
  .chk_desc {
    margin-top: 30px;
    font-size: 1.6rem;
}
  .page_desc {
    margin-top: 20px;            font-size: 1.5rem;
}
  .btn_set_fixed{display:none}
  .wrapper {
    padding-top:70px;
}
 .network_info .ico_arrow{padding:0 10px}
  .tethering {
   margin-right: 0; 
}
.ethernet {
    margin-left:0
}
  .btn_row_double button {
    margin: 0;
}
  .btn_cs {
    height: 23px;
      padding: 0 12px;
      font-size: 1rem;
  }
    .main {
      margin-top: 0px;
      padding-bottom: 60px;
  }

  .desc_box_white {
        margin: 30px auto 0;padding: 30px 20px;
}
  html, body { min-width: 0 !important; width: 100%; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
  body { overflow-wrap: anywhere; }
  #wrapper, #wrap, #container, #contents, #content, #wrapIntro, #wrapInterview,
  .head_inner, .header_box, .gnb_box, .visual_inner, .conts_wrap, .sub_conts,
  .sub_contents, .h2_wrap, .footer_inner, .footer_wrap, .cont_wrap, .contents,
  .sol_body .inner, .report_body .inner, .cm_info_wrap {
    box-sizing: border-box; width: 100% !important; min-width: 0 !important;
    max-width: 100%; margin-left: auto !important; margin-right: auto !important;
  }
  /* JS only marks overflowing ordinary layout blocks; never drawing surfaces. */
  .inear-mobile-fit {
    box-sizing: border-box !important; width: 100% !important;
    min-width: 0 !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  img, video { max-width: 100%; }
  img { object-fit: contain; }
  video { height: auto; }
  .sol_body .webcam_box { height: auto; overflow: hidden; }
  .sol_body #webcamArea { display: block; width: 100%; height: auto; object-fit: contain; }
  .sol_body .mic_box, .sol_body .webcam_box { position: relative; }
  .sol_body .inface_timer_loading.device { position: absolute; inset: 0; }
  .sol_body .inface_timer_loading.device .d-body.abs {
    top: 50%; left: 50%; right: auto; bottom: auto;
    margin: 0; transform: translate(-50%, -50%);
  }
  iframe { max-width: 100%; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    box-sizing: border-box; max-width: 100%; font-size: 16px;
  }
  textarea { resize: vertical; }
  button, input[type=button], input[type=submit] { max-width: 100%; white-space: normal; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #7050f8; outline-offset: 3px; }
  /* Keep the focus ring inside full-width rounded fields on narrow screens. */
  .inputNormal:focus, .inputNormal:focus-visible {
    outline: none; outline-offset: 0;
    box-shadow: inset 0 0 0 2px #7050f8;
  }

  /* Public header: account actions move into the mobile drawer. */
  /* Sticky keeps the header's natural height in the document, avoiding overlap. */
  #header:has(.head_inner) {
    position: sticky !important; top: 0 !important; padding-bottom: 0;
    z-index: 10; background: #fff;
  }
  .head_inner { padding: 20px 16px 12px !important; height: auto !important; }
  .head_inner .logo { height: auto; min-height: 32px; }
  .head_inner .univ_logo, .head_inner .univ_logo.mobile {
    position: static; display: block; height: auto; margin-bottom: 12px; text-align: center;
  }
  .head_inner .univ_logo .univ_logo_a { display: inline-block; }
  .head_inner .univ_logo img { max-height: 36px; max-width: 180px; }
  .head_inner .menu_top {
    position: static !important; display: flex !important; flex-wrap: wrap;
    justify-content: center; gap: 8px 16px; margin: 16px 0 0; height: auto;
  }
  .head_inner .menu_top li { float: none; margin: 0 !important; }
  .head_inner .menu_top a { display: inline-flex; align-items: center; min-height: 36px; }
  .head_inner #gnb { min-width: 0; width: 100%; height: auto; padding: 8px 0; }
  .head_inner #gnb ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  .head_inner #gnb li { float: none; width: auto !important; margin: 0 !important; }
  .head_inner #gnb a { display: block; padding: 8px 0; line-height: 1.5; }
  .head_inner .buttonMenu {
    display: block; position: absolute; top: 10px; right: 12px; width: 44px; height: 44px;
    min-width: 44px; min-height: 44px; border: 0;
    background: linear-gradient(#222, #222) center 14px / 22px 2px no-repeat,
      linear-gradient(#222, #222) center 21px / 22px 2px no-repeat,
      linear-gradient(#222, #222) center 28px / 22px 2px no-repeat;
  }
  body:has(.mobileNav) .head_inner #gnb { display: none; }
  .mobileNav {
    display: block; position: fixed; top: 0; right: -100%; z-index: 10000; background: #fff;
    width: min(360px, 90vw) !important; max-width: 90vw; height: 100dvh !important;
    overflow-y: auto; transition: right .2s;
  }
  .mobileNav:not(.active) { visibility: hidden; }
  .mobileNav.active { visibility: visible; right: 0; }
  .mobileNav .moMenuTop { box-sizing: border-box; padding: 13px 20px; min-height: 60px; }
  .mobileNav .moMenuTop img { max-width: 120px; }
  .mobileNav .closeMoMenu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; }
  .mobileNav .closeMoMenu:before, .mobileNav .closeMoMenu:after {
    content: ''; position: absolute; top: 21px; left: 10px; width: 24px; height: 2px; background: #222;
    transform: rotate(45deg);
  }
  .mobileNav .closeMoMenu:after { transform: rotate(-45deg); }
  .mobileNav .moMenus a, .mobileNav .moMenus2 a { display: block; padding: 12px 20px; min-height: 44px; box-sizing: border-box; }
  .inear-mobile-menu-ready #mGnb, .inear-mobile-menu-ready .mob_menu,
  .mobileNav .inear-mobile-menu-duplicate { display: none !important; }
  /* The legacy login block floats at full width. Contain it so it cannot cover
     or push the relocated account links outside their section on phones. */
  .mobileNav .moMenus2 { display: flow-root; }
  .mobileNav .forConnection { float: none; box-sizing: border-box; }
  .mobileNav .inear-mobile-account {
    display: flow-root; clear: both; box-sizing: border-box; width: 100%;
    padding: 16px 20px; border-top: 1px solid #e5e5e5;
  }
  .mobileNav .menu_top { position: static !important; display: flex !important; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
  .mobileNav .menu_top li { float: none; width: 100%; margin: 0 !important; list-style: none; }
  .mobileNav .menu_top a, .inear-mobile-navigation a {
    display: flex; align-items: center; box-sizing: border-box; min-height: 22px;
    width: 100%; height: auto; padding: 1px 12px; margin: 0;
    font-size: 16px; line-height: 1.5; color: #333; white-space: normal;
  }
  .inear-mobile-navigation { padding: 16px 20px; }
  .inear-mobile-navigation #gnb { display: block !important; width: 100%; height: auto; min-width: 0; margin: 0; padding: 0; }
  .inear-mobile-navigation #gnb ul { display: block; width: 100%; padding: 0; }
  .inear-mobile-navigation #gnb li { float: none; width: 100% !important; margin: 0; }
  .dimmMoMenu:not(.active) { display: none; }
  .dimmMoMenu.active {
    display: block; position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh;
    z-index: 9999; border: 0; background: rgba(0, 0, 0, .45);
  }

  /* Landing, membership and introductory pages. */
  .main, .mypage { padding-top: 0 !important; }
  .visual_main, .visual_sub { height: auto !important; min-height: 0; padding: 0px 16px 60px 16px !important; }
  .visual_inner, .h2_wrap { padding: 24px 0 !important; }
  .conts_wrap, .sub_conts, .sub_contents { padding-left: 16px !important; padding-right: 16px !important; }
  .txt_visual { font-size: clamp(28px, 5vw, 48px) !important; line-height: 1.3 !important; }
  .txt_desc, .txt_desc_sub, .txt_side { line-height: 1.65 !important; }
  .box_info, .main3TabArea .mBox2, .main3TabArea .mContents { width: 100% !important; max-width: 100%; }
  .main3Tabs { display: flex; overflow-x: auto; justify-content: center; gap: 8px;width: 100%; max-width: 100%; }
  .main3Tabs > button {  width: 100%; padding: 12px; height: auto; }
  .cm_info_wrap, .agreeBox { box-sizing: border-box; max-width: 100%; }
  .box_cyan.join { display: flex; flex-wrap: wrap; gap: 8px; }
  .box_cyan.join input { flex: 1 1 180px; margin: 0; }
  .pagination ul, .paging { flex-wrap: wrap; max-width: 100%; }
  .mypage .pagination { width: 100%; box-sizing: border-box; }
  .mypage .pagination ul {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 2px; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box;
  }
  .mypage .pagination ul li { float: none; flex: 0 0 28px; margin: 0; padding: 0; }
  .mypage .pagination ul li a {
    display: block; box-sizing: border-box; width: 28px; height: 28px;
    margin: 0; padding: 0; line-height: 28px; font-size: 12px;
  }
  .mypage .pagination ul li a.pagination-arow img { width: 28px; height: 28px; margin: 0; box-sizing: border-box; }
  #footer, .footer { min-width: 0 !important; }
  .footer_inner, .footer_wrap { padding: 24px 16px !important; height: auto; }

  /* Popups retain their existing open/close logic and display state. */
  #boxes .window, .wrap_popup .popup, .layerPopupPanel, .ui-dialog,
  .inear-mobile-dialog {
    box-sizing: border-box; min-width: 0 !important; max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px); overflow: auto;
  }
  #boxes .window, .ui-dialog, .inear-mobile-dialog {
    position: fixed !important; left: 12px !important; right: 12px !important;
    top: 12px !important; margin: 0 auto !important; transform: none !important;
  }
  .layerPopupPanel, .layerPopupContent { width: 100% !important; }
  .popupVideo video, .popupVideo iframe { width: 100%; }
  .modal_wrap { box-sizing: border-box; padding: 12px !important; }
  .modal_cont, .modal_cont_s, .modal_cont_t, .cont_modal {
    box-sizing: border-box; width: 100% !important; min-width: 0 !important;
    max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto;
  }
  .modal_cont_s, .modal_cont_t { position: relative; top: auto; left: auto; transform: none; }
  .modal_cont_r { padding: 40px 16px 24px; }
  #inquiryPop.wrap_popup {
    box-sizing: border-box; height: 100vh; height: 100dvh; padding: 0;
  }
  #inquiryPop #wrapPopConts.modalNormal.modalInquiry {
    position: absolute !important; top: 50% !important; left: 50% !important; right: auto;
    transform: translate(-50%, -50%); margin: 0 !important;
    box-sizing: border-box; width: calc(100% - 24px) !important; min-width: 0;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; overscroll-behavior: contain;
  }

  /* Tables keep native row/column semantics and scroll without widening the page. */
  .inear-mobile-table {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .inear-mobile-table > table { margin-left: 0 !important; margin-right: 0 !important; }
  .inear-mobile-table.is-overflowing { box-shadow: inset -3px 0 0 #7050f8; }

  /* Stack each in-progress assessment as one centered group on mobile. */
  #ing_list table, #ing_list tbody {
    display: block; box-sizing: border-box; width: 100%; min-width: 0;
  }
  #ing_list colgroup { display: none; }
  #ing_list tr {
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 12px; border-bottom: 1px solid #e4e6e8;
  }
  #ing_list table td {
    display: block; box-sizing: border-box; width: 100%;
    padding: 5px 0; border: 0; text-align: center;
  }
  #ing_list td > span, #ing_list td > a { margin-left: auto; margin-right: auto; }
  #ing_list .test_date, #ing_list .test_nm, #ing_list .test_step {
    padding-left: 0; padding-right: 0; text-align: center;
  }
  #ing_list .test_step:before { display: none; }

  /* Assessment selection, device check, practice and live question layouts. */
  .sol_body .header { position: fixed; height: auto; padding: 12px 12px 10px 12px; display: flex; flex-wrap: wrap; gap: 12px;            z-index: 199;height: 70px;}
  .sol_body .header .logo { position: relative; top: auto; left: auto; width: 79px; height: 15px; margin: 0; }
  .sol_body .hd_inner { position: static; width: auto; height: auto; margin: 0; }
  .sol_body .hd_inner { flex: 1 1 100%; min-width: 0; }
  /* Match the inface mobile interview job picker. */
  .sol_body #jopList .job_list {
    display: grid; grid-template-columns: minmax(0, 1fr);
    width: 100%; margin: 10px auto 0;
  }
  .sol_body #jopList .job_list_tit, .sol_body #jopList .job_list_area { display: contents; }
  .sol_body #jopList .job_list_tit > li:nth-child(1) { grid-row: 1; }
  .sol_body #jopList .job_list_area > div:nth-child(1) { grid-row: 2; }
  .sol_body #jopList .job_list_tit > li:nth-child(2) { grid-row: 3; }
  .sol_body #jopList .job_list_area > div:nth-child(2) { grid-row: 4; }
  .sol_body #jopList .job_list_tit > li:nth-child(3) { grid-row: 5; }
  .sol_body #jopList .job_list_area > div:nth-child(3) { grid-row: 6; }
  .sol_body #jopList .job_result_wrap { grid-row: 7; height: auto; padding: 12px; }
  .sol_body #jopList .job_list_tit > li, .sol_body #jopList .job_list_area > div {
    box-sizing: border-box; width: 100%; min-width: 0;
  }
  .sol_body #jopList .job_list_area > div {
    height: auto; min-height: 0; max-height: 180px; overflow-y: auto;
    border-left: 1px solid #DDD; border-bottom: 1px solid #DDD; background-color: #fff;
  }
  .sol_body #jopList .job_list_tit > li {
    display: flex; align-items: center; height: auto; min-height: 44px;
    padding: 8px 6px 8px 26px; font-size: 13px; line-height: 1.4;
    white-space: normal; overflow-wrap: anywhere; border-left: 1px solid #DDD; background-color: #fff;
  }
  .sol_body #jopList .job_list_tit > li:before {
    top: 50%; left: 6px; width: 16px; height: 16px; transform: translateY(-50%);
  }
  .sol_body #jopList .job_select_result {
    flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-width: 0;
  }
  .sol_body #jopList .job_select_result > p {
    width: 100%; min-width: 0; margin: 0; padding: 0; line-height: 1.4;
    white-space: normal; overflow-wrap: anywhere;
  }
  .sol_body #jopList .job_select_result > p:after { display: none; }
  .sol_body .header { box-sizing: border-box; left: 0; right: 0; }
  .sol_body .hd_inner nav { width: 100%; overflow-x: auto; max-width: 100%; }
  .sol_body .hd_inner nav, .gnb.inear-mobile-fit { scrollbar-width: none; -ms-overflow-style: none; }
  .sol_body .hd_inner nav::-webkit-scrollbar, .gnb.inear-mobile-fit::-webkit-scrollbar { display: none; }
  .sol_body .hd_inner nav ul { display: flex; width: max-content; min-width: 100%; max-width: none; }
  .sol_body .hd_inner .gnb > li { white-space: nowrap; }
  .sol_body .gnb { gap: 32px; height: auto; padding: 0; }
  .sol_body .gnb li { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }
  .sol_body .gnb li:after { right: -24px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); }
  .sol_body .cs { margin-left: auto;top: 8px; right: 10px; }
  .sol_body .inner { padding:20px 10px; }
  .sol_body .page_tit { font-size: 2rem; line-height: 1.4;}
  .test_li, .chk_list, .caution_li, .check_device_list { display: flex; flex-wrap: wrap; gap: 20px; width: 100%;margin-top: 30px;}
  .test_li > li, .chk_list > li, .caution_li > li, .check_device_list > li {
    box-sizing: border-box; float: none; flex: 1 1 280px; width: auto; min-width: 0; margin: 0;
  }
  .test_li li a { padding-left: 20px; padding-right: 20px; }
  .btn_row_double, .btn_row_triple, .btn_row_face, .btn_row_single { flex-wrap: wrap; gap: 12px; }
  .sol_body .conts_triple { flex-wrap: wrap; gap: 24px; }
  .sol_body .conts_triple > .check_right { margin-right: 0; }
  .sol_body .screen_area:has(#faceCamArea) { height: auto; aspect-ratio: auto; }
  .sol_body #faceCamArea { display: block; width: 100%; height: auto; margin-left: 0; }
  /* Resize the overlay visually without changing face-api's bitmap coordinates. */
  .sol_body .screen_area > #myCanvas { width: 100%; height: 100%; }
  .survey_check_row { flex-wrap: wrap; gap: 12px;justify-content: center; }
  .survey_check_row .label_check02 { box-sizing: border-box; max-width: 100%; }
  .levels, .next_level { display: flex; flex-wrap: wrap; gap: 16px; }
  .levels > li, .next_level > div { flex: 1 1 220px; margin: 0; max-width: 100%; }
  #wrapHd, #wrapHd .header, #wrapInterview .header { min-width: 0 !important; width: 100%; height: auto; }
  #wrapHd { overflow-x: auto; padding: 16px 0; }
  #wrapHd .header ul { display: flex; width: max-content; padding-bottom: 28px; }
  #wrapHd .header ul li { float: none; flex: 0 0 160px; }
  #wrapHd .header ul li p { width: 160px; }
  #wrapInterview .contents { padding: 32px 16px; }
  #wrapIntro { height: auto; min-height: 100dvh; padding: 80px 16px; }

  /* Reports (all language variants). */
  .report_body .inner { padding-left: 16px; padding-right: 16px; }
  .report_body .gnb_row { flex-wrap: wrap; gap: 12px; }
  .report_body .gnb { max-width: 100%; overflow-x: auto; }
  .report_body .gnb ul { width: max-content; min-width: 100%; }
  .report_body .mem_info_box, .report_body .gradient_box, .report_body .ques_wave { flex-wrap: wrap; gap: 20px; }
  .report_body .gradient_box > div, .report_body .white_box, .report_body .wave_box { box-sizing: border-box; min-width: 0; }
  .report_body canvas { max-width: 100%; }

  /* Survey and administration. */
  .survey .items_left, .survey .items_right { float: none; width: 100%; }
  body.inear-mobile-admin > .h-screen { height: auto; min-height: 100dvh; overflow: visible; flex-direction: column; }
  .inear-mobile-admin aside.wid190 { width: 100%; max-height: 42dvh; flex-shrink: 0; }
  .inear-mobile-admin aside .pt65 { padding-top: 16px; padding-bottom: 16px; }
  .inear-mobile-admin aside .h65px { position: relative; }
  .inear-mobile-admin .flex-1 { min-width: 0; }
  .inear-mobile-admin main { width: 100%; min-width: 0; padding: 16px !important; overflow: visible; }
  .inear-mobile-admin #container { padding-left: 16px; padding-right: 16px; min-height: 0; }
  .inear-mobile-admin #navi { position: relative; width: 100%; }
  .inear-mobile-admin #navi_pos { width: 100%; }
  .inear-mobile-admin #navi_pos .navi_wrap { min-height: 0; max-height: 40dvh; overflow-y: auto; }
  .inear-mobile-admin .subcontainer { padding-top: 20px; }
  .inear-mobile-admin .adm_contents { margin-left: 0; margin-right: 0; }
  .inear-mobile-admin #logoArea { position: relative; min-width: 0; height: auto; min-height: 65px; }
  .inear-mobile-admin #gnb, .inear-mobile-admin #gnb_sub { min-width: 0; overflow-x: auto; padding-left: 0; }
  .inear-mobile-admin #gnb > ul, .inear-mobile-admin #gnb_sub > ul { width: max-content; }
}

@media screen and (max-width: 767px) {
  .mypage.renewal2 .tbl_mypage td { word-break: keep-all; overflow-wrap: break-word; }
  .mypage.renewal2 .tbl_mypage td.title p {
    display: flex; align-items: flex-start; gap: 8px; white-space: normal;
  }
  .mypage.renewal2 .tbl_mypage td.title .test_icon { flex-shrink: 0; margin-right: 0; }
  .mypage.renewal2 .tbl_mypage td.title strong {
    flex: 1 1 0; min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  }
  .mypage.renewal2 .tbl_mypage td:nth-child(1) { padding-left: 4px; padding-right: 4px; white-space: nowrap; }
  .mypage.renewal2 .tbl_mypage td:nth-child(4) { width: 100% !important; }
  .mypage.renewal2 .tbl_mypage td:nth-child(5) {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    box-sizing: border-box; float: none; clear: both; width: 100% !important; padding: 8px 10px;
  }
  .mypage.renewal2 .tbl_mypage td:nth-child(5) .th_mobile { padding-bottom: 0; white-space: nowrap; }
  .mypage.renewal2 .tbl_mypage td:nth-child(5) .buttonDetail { flex-shrink: 0; }
  .conts_box_single {
    margin: 30px auto 0;
}

  .txt_answ_info {
    margin-top: 10px;
    font-size: 1.3rem;
    height: 30px;
    line-height: 20px;
}
  
  .direc_area{
    height: 280px
  }

  .ques_row {
    margin-top: 20px;
    font-size: 1.5rem;
    line-height: 120%;
}

.ani_fadeinup.mt60{
    margin-top: 20px;}

  .modalInside {
    padding: 15px;
}
  .box_info, .main3TabArea .mBox2, .main3TabArea .mContents, .main3TabArea .stepWrap { display: block !important; height: auto !important; }
  .box_info > *, .box_info .floatRight, .main3TabArea .mBox1, .main3TabArea .mBox2 > *,
  .main3TabArea .stepWrap > * { float: none !important; width: 100% !important; margin-left: 0 !important; max-width: 100%; }
  .box_info { padding: 24px 16px !important; }
  .box_info .floatRight { margin-top: 20px; }
  .main3TabArea .mBox1 { height: auto; padding: 24px 16px !important; }
  .main3TabArea .mBox2 { padding: 24px 16px !important; }
  .main3TabArea .mImg1 { position: static !important; height: auto; }
  .main3TabArea .stepWrap { margin-bottom: 24px; }
  .main3TabArea .txtStep { flex-wrap: wrap; gap: 8px; }
  .main3TabArea .gotoDetail { position: relative !important; inset: auto; display: inline-block; margin-top: 20px; }
  .main-text-new img { position: static !important; display: block; height: auto; margin: 12px auto; }
  .h2_wrap h2, .setup_h2 { font-size: 28px !important; line-height: 1.4; }
  .cm_info_wrap { padding: 20px 12px !important; }
  .cm_info_wrap .table_st1 th, .table_st1_counsel th { width: 85px; }
  .cm_info_wrap td input, .cm_info_wrap td select { margin-top: 4px; margin-bottom: 4px; }
  .sol_body .check_row, .sol_body .conts_box, .sol_body .conts_triple, .sol_body .part3_screen_area,
  .sol_body .part5_question, .sol_body .network_info { flex-direction: column; height: auto; gap: 20px; }
  .sol_body .check_left, .sol_body .check_right, .sol_body .part5_left, .sol_body .part5_right,
  .sol_body .screen_area, .sol_body .txt_wrap, .sol_body .sound_box {
    box-sizing: border-box; float: none; width: 100% !important; margin: 0; max-width: 100%;
  }
  .sol_body .check_right { padding: 20px 0; }
  .sol_body .screen_area { height: auto; aspect-ratio: 4 / 3; }
  .sol_body .direc_area { box-sizing: border-box; width: 100%; max-width: 100%; }
  .sol_body .direc_area .help-ready { position: static; width: auto; }
  .sol_body .btn_row_face { position: static; margin-top: 20px; }
  .sol_body .btn_set_fixed { position: static; margin: 20px auto; }
  .sol_body .basic_box, .sol_body .survey_box, .sol_body .question_box { padding: 24px 16px; }
  .sol_body .basic_box {
  background: #fff; border-radius: 0; box-shadow: none;margin:30px auto 0
  }
  .sol_body .survey_check_row .label_check02 { margin: 0;     max-width: 158px;}

  .sol_body .page_desc_big { font-size: 20px; line-height: 1.5; }
  .sol_body .ques_photo, .sol_body .ques_img { position: static; max-width: 100%; height: auto; }
  .sol_body .ques_photo img, .sol_body .ques_img img { height: auto; }
  .report_body .mem_info_box, .report_body .gradient_box, .report_body .ques_wave { display: block; }
  .report_body .gradient_box > div, .report_body .white_box, .report_body .wave_box { width: 100%; margin-top: 20px; }
  .report_body .myscore_left { border-right: 0; border-bottom: 1px solid #fff; padding-bottom: 24px; }
  .report_body .gradient_box > .myscore_right { padding-left: 0; padding-right: 0; }
  .report_body .page_tit { font-size: 26px; line-height: 1.4; }
  .report_body .gradient_box, .report_body .white_box { padding: 24px 16px; }
  .report_body .ques_wave .wave_box:first-child { margin-top: 0; }
  .rpt_wrap .section .half_section, .rpt_wrap .section .third_section,
  .rpt_wrap .section_wrap.wide .contLeft, .rpt_wrap .section_wrap.wide .contRight,
  .sectionBox .article > .fl, .sectionBox .article > .fr {
    float: none; width: 100% !important; margin: 0; border-right: 0;
  }
  .rpt_wrap .section_wrap { padding: 20px 16px; }
  .rpt_top_info ul { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px; }
  .rpt_top_info ul li { margin: 0; padding-right: 12px; }
  .rpt_wrap dl.unit_exp dd { float: none; width: 100%; box-sizing: border-box; }
  #top_wrap .print_btn { position: relative; top: auto; right: auto; display: block; text-align: center; padding: 12px; }
  #wrapInterview .box_agree > div, #wrapInterview .box_agree2 > div { float: none; width: 100%; }
  .survey #wrapper, #wrapper:has(.survey) { margin-top: 16px; margin-bottom: 32px; border-radius: 0; }
}

/* Report screens: keep headers, result cards and feedback within the viewport. */
@media screen and (max-width: 1024px) {
  .report_body .header { height: auto; }
  .report_body .header > .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
  .report_body .logo { flex: 0 0 90px; }
  .report_body .top_btn { position: static; flex-shrink: 0; }
  .report_body .btn_pdf { height: 28px; padding: 0 17px; font-size: 1rem; }
  .report_body .btn_pdf span { padding-left: 18px; }
  .report_body .btn_pdf span:after { top: 50%; width: 17px; height: 17px; transform: translateY(-50%); }
  .report_body .btn_pdf:after { border-radius: 6px; }
  .report_body .api_re { display: none !important; }
  .report_body .gnb_area { padding-top: 20px; }
  .report_body .gnb { min-width: 0; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
  .report_body .gnb::-webkit-scrollbar { display: none; }
  .report_body .gnb ul { gap: 24px; }
  .report_body .gnb ul li { flex-shrink: 0; margin: 0; white-space: nowrap; }
  .report_body .gnb ul li.on:after { bottom: -4px; }
  .report_body .date { flex-shrink: 0; white-space: nowrap; }
  .report_body .content { padding-top: 24px; padding-bottom: 48px; }
  .report_body .page_tit { overflow-wrap: anywhere; }
  .report_body .mem_info_box { display: block; }
  .report_body .mem_info { min-width: 0; gap: 16px; }
  .report_body .mem_photo { flex: 0 0 96px; width: 96px; height: 96px; margin-right: 0; }
  .report_body .mem_info > div:last-child { min-width: 0; }
  .report_body .test_nm, .report_body .mam_nm { line-height: 1.4; overflow-wrap: anywhere; }
  .report_body .mem_info_li { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; }
  .report_body .mem_info_li li { width: auto; min-width: 0; margin: 0; }
  .report_body .mem_info_li li > p:nth-child(1) { display: block; width: 100%; box-sizing: border-box; padding: 8px; line-height: 1.5; }
  .report_body .mem_info_li li > p:nth-child(2) { width: auto; margin-top: 8px; overflow-wrap: anywhere; }
  .report_body .gradient_box { display: block; }
  .report_body .gradient_box > div { width: 100%; padding: 0; }
  .report_body .gradient_box > .myscore_left { margin-top: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid #fff; }
  .report_body .gradient_box > .myscore_right { margin-top: 24px; padding: 0; }
  .report_body .average_bar, .report_body .average_bar_gray { height: 30px; border-radius: 10px; }
  .report_body .my_total_average, .report_body .my_average_bar {
    height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
  }
  .report_body .my_total_average:before, .report_body .my_average_bar:before {
    top: -5px; right: -8px; width: 16px; height: 40px; border-width: 4px; border-radius: 8px;
  }
  .report_body .tit_my_average { padding-top: 7px; line-height: 16px; }
  .report_body .my_point { top: -36px; }
  .report_body .my_point:after { bottom: -12px; left: 9px; border-left-width: 6px; border-right-width: 6px; border-top-width: 8px; }
  .report_body .white_box_big, .report_body .white_box { min-width: 0; box-sizing: border-box; }
  .report_body .script_box { min-width: 0; }
  .report_body .sound_btn_box { flex-shrink: 0; }
  .report_body .script_desc { flex: 1; width: auto; min-width: 0; overflow-wrap: anywhere; }
  .report_body .info_word_block { display: flex; flex-direction: column; gap: 8px; }
  .report_body .info_word_block > span { display: none; }
  .report_body .info_word_block > p {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; line-height: 1.5;
  }
  .report_body .info_word_block > p > span { margin: 0; }
  .report_body .info_word_block > p > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .report_body .info_word_block .bg_blue_grad, .report_body .info_word_block .bg_blue_purple {
    flex-shrink: 0; min-width: 56px; padding: 4px 10px; border-radius: 6px;
    text-align: center; font-size: 13px; line-height: 20px;
  }
  .report_body .btn_wave_row { display: flex; flex-wrap: wrap; gap: 12px; }
  .report_body .btn_wave_row { justify-content: center; }
  .report_body .btn_wave_row > button { margin: 0; max-width: 100%; height: auto; min-height: 48px; padding: 10px 16px; }
  .report_body .modal_wrap { box-sizing: border-box; padding: 16px; }
  .report_body .modal_cont { max-width: 100%; }
  .report_body .modal_bd { padding: 20px 16px; }
  .report_body .modal_scroll { height: auto; max-height: calc(100dvh - 128px); overflow-wrap: anywhere; }
  .report_body .ai-content { padding: 16px; overflow-wrap: anywhere; }
  .report_body .ai-change { margin-left: 0; }
  .report_body .tab_menu_wrap { overflow-x: auto; scrollbar-width: none; }
  .report_body .tab_menu_wrap::-webkit-scrollbar { display: none; }
  .report_body .tab_menu { gap: 8px; }
  .report_body .tab_menu li { flex: 1 0 auto; margin: 0; }
  .report_body .tab_menu li a { width: auto; min-width: 64px; padding: 0 12px; }
}

@media screen and (max-width: 767px) {
  .report_body .gnb_row { display: block; }
  .report_body .date { margin-top: 16px; line-height: 20px; }
  .report_body .date:before { top: 0; }
  .report_body .mem_info_box { padding: 20px 16px; }
  .report_body .mem_info_li { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report_body .mam_nm { font-size: 24px; }
  .report_body .white_box, .report_body .white_box.left,
  .report_body .white_box_big, .report_body .white_box_big.no,
  .report_body .white_box_big.part-score { width: 100%; padding: 24px 16px; }
  .report_body .script_box { padding: 16px 12px; }
  .report_body .info_word_block { justify-content: flex-start; }
  .report_body .info_word_block > p { margin: 0; }
  .report_body .ques_wave { display: block; }
  .report_body .wave_box { width: 100%; padding: 24px 0; }
  .report_body .tbl_level { table-layout: fixed; }
  .report_body .tbl_level th, .report_body .tbl_level td { padding: 12px 8px; overflow-wrap: anywhere; }
}