/* 노블레스봄 휴대폰·세로 태블릿 화면 (폭 991px 이하).
 * PC 화면은 건드리지 않는다: 맨 위 '모바일 전용 버튼 숨김' 한 줄 말고는 전부 @media 안에 있다.
 * 동작(☰ 메뉴, 빠른 상담신청 접기)은 assets/js/custom.js.
 * 순서: 1 바탕 · 2 머리말/메뉴 · 3 공통 조각 · 4 메인 · 5 상담/신청 양식 · 6 하위 페이지 · 7 꼬리말 · 8 글 보기 창 · 9 빠른 상담신청 띠 */

.m_menu_btn, .m_call_btn, .m_quick_toggle { display: none; }
.noble_main_img.m_main { display: none; }   /* 휴대폰 전용 메인 배너 (index.html) */

@media (max-width: 991px) {

    /* ---------- 1. 바탕: 1200px 고정 풀기 ---------- */
    body, .wrapper { min-width: 0; }
    body { overflow-x: hidden; }
    .wrapper { padding-top: 60px; }   /* 고정된 머리말(60px) 아래에서 시작 */
    .container { width: auto; max-width: 100%; padding-left: 18px; padding-right: 18px; }
    .row { margin-left: 0; margin-right: 0; }
    img, video, iframe { max-width: 100%; }
    iframe.note-video-clip { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }

    /* ---------- 2. 머리말 · 메뉴 ---------- */
    .header-v6 { top: 0; background-color: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
    .header-v6 .navbar { min-height: 60px; }
    .header-v6 .navbar > .container { padding: 0; }
    .header-v6 .navbar > .container > .menu-container { display: flex; align-items: center; height: 60px; padding: 0 6px 0 16px; }
    .header-v6 .navbar-brand { float: none; height: auto; max-height: none; padding: 0; line-height: 1; margin-right: auto; }
    .header-v6 .navbar-brand img { height: 34px; width: auto; }
    .m_call_btn, .m_menu_btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; background: none; color: #fff; }
    .m_call_btn { font-size: 22px; }
    .m_call_btn:hover, .m_call_btn:focus { color: #c1af90; text-decoration: none; }
    .m_menu_btn { flex-direction: column; }
    .m_menu_btn span { display: block; width: 24px; height: 2px; margin: 3px 0; background: #fff; transition: transform .25s, opacity .25s; }
    #header.nav-open .m_menu_btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #header.nav-open .m_menu_btn span:nth-child(2) { opacity: 0; }
    #header.nav-open .m_menu_btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* 메뉴 판: ☰ 를 누르면 머리말 아래로 펼쳐짐 */
    .header-v6 .navbar-collapse { display: none !important; position: static; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; border: 0; box-shadow: none; background: #111; }
    #header.nav-open .navbar-collapse { display: block !important; height: auto !important; }
    body.m-nav-open { overflow: hidden; }
    .navbar-nav { height: auto; float: none; display: block; margin: 0; }
    .header-v6 .navbar-nav > li { float: none; border-top: 1px solid #262626; }
    .header-v6 .navbar-nav > li > a.menu_box_a { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 16px; cursor: pointer; }
    .menu_box_a::after { content: "\f107"; font-family: FontAwesome; font-size: 18px; font-weight: normal; color: #888; transition: transform .25s; }
    .menu_box.m_open .menu_box_a::after { transform: rotate(180deg); }
    .submenu_box { position: static; width: auto; top: auto; left: auto; background-color: #1b1b1b; }
    .menu_box:hover .submenu_box { max-height: 0; }   /* 손가락으로는 hover 가 눌린 채 남으므로 누른 것(.m_open)만 펼침. 부트스트랩의 .open 과 겹치지 않게 m_ 를 붙임 */
    .menu_box.m_open .submenu_box, .menu_box.m_open:hover .submenu_box { max-height: 600px; }
    .submenu_box_in { padding: 6px 0 10px; }
    .submenu_box a { padding: 11px 34px; font-size: 15px; }
    .head_consult_box { float: none; height: auto; padding: 16px 20px 20px; align-items: center; }

    /* ---------- 3. 공통 조각 ---------- */
    .noble_box { padding: 48px 0; }
    .noble_main_img { height: 210px; }
    .noble_main_img.main { height: auto; }
    .noble_main_img.pc_main { display: none; }   /* 메인 배너: 휴대폰은 세로형 5장(m_main), PC 는 가로형 8장(pc_main) */
    .noble_main_img.m_main { display: flex; }
    .noble_main_img.m_main img { display: block; height: auto; }
    .main_back_title { font-size: 34px; text-align: center; padding: 0 16px; }
    .main_back_title.ko { font-size: 30px; }
    .main_back_text { margin-top: 6px; padding: 0 16px; text-align: center; }
    .sub_title_box { padding: 0 18px 30px; }
    .sub_title { font-size: 23px; word-break: keep-all; }
    .sub_sub_title { font-size: 14.5px; word-break: keep-all; }
    .sub_box { padding-top: 48px; }
    .sub_box_text { font-size: 15.5px; }
    .noble_kr_title { font-size: 23px; padding: 0 18px; word-break: keep-all; }
    .noble_kr_text { font-size: 15px; padding: 0 18px; word-break: keep-all; }
    .noble_kr_text.margin-bottom-50 { margin-bottom: 28px; }
    .en_title { font-size: 17px; line-height: 1.5; padding: 0 18px; word-break: keep-all; }
    .en_title + .noble_btn_box { margin-top: 16px; }
    body .noble_btn_box .noble_btn { height: auto; font-size: 16px !important; padding: 14px 34px !important; }
    .paging { font-size: 16px; }
    .paging span, .paging a { display: inline-block; padding: 6px 9px; }

    /* 3칸 카드 목록 → 세로 1칸 (메인·뉴스·언론·결혼 후기) */
    .division_3 { width: 100%; float: none; padding-left: 0; padding-right: 0; margin-bottom: 14px; }
    .division_3.main { padding-bottom: 0; }
    .story_box { height: auto; padding: 22px; }
    .story_box.info { padding: 0; }
    .story_box.media, .story_box.wedding { margin-bottom: 0; }
    .info_text_box { padding: 20px; }
    .info_title { font-size: 19px; }
    .news_box { height: auto; padding: 22px; margin-bottom: 0; }
    .news_box::after { content: ""; display: table; clear: both; }
    .noble_link_btn { height: 36px; font-size: 13px; }

    /* ---------- 4. 메인 ---------- */
    h1[data-seo-h1] { line-height: 1.5 !important; word-break: keep-all; }
    .count_area { padding: 28px 0 0; }
    .count_box { padding: 0 4px; }
    .count_box .counters { font-size: 12px; word-break: keep-all; }
    .count_box .counter { font-size: 30px; }
    .counter_text { font-size: 12px; padding-top: 6px; }

    .bg_black { min-height: 0; }
    .bg_black > .container { padding: 0; }
    .noble_move_area { display: block !important; opacity: 1 !important; height: auto; }   /* PC 는 스크롤 위치로 나타났다 사라짐 → 휴대폰은 항상 보임 */
    .noble_move_box { width: 100%; height: auto; float: none; position: static; }
    .move_box { position: static; transform: none; width: auto; height: auto; padding: 14px; }
    .move_box_in { padding: 38px 18px; }
    .move_box_title { font-size: 34px; }
    .move_box_text { font-size: 17px; }
    .noble_move_box img { display: block; max-height: 300px; object-fit: cover; }

    .knowhow_icon_area { display: flex; flex-wrap: wrap; margin: 0 -6px; }
    .know_icon_box { width: 33.33%; float: none; padding: 0 6px 22px; }
    .know_icon { width: 84px; height: 84px; margin: 0 auto 8px; }
    .know_icon img { max-width: 46px; max-height: 46px; }
    .know_icon_box .move_box_desc { font-size: 12.5px; word-break: keep-all; }

    .noble_trial_back { height: auto; padding: 56px 0; }
    .noble_main_title { font-size: 25px; padding: 0 18px; word-break: keep-all; }
    .noble_main_title.margin-top-100 { margin-top: 0; }
    .noble_trial_back .noble_kr_text { margin-top: 12px; line-height: 1.6; }
    .trial_start_btn_box { padding: 28px 0; }
    .trial_tag_box { width: auto; padding: 8px 0; }
    .trial_tag { height: 34px; padding: 0 14px; margin: 4px 2px; font-size: 13px; }

    .noble_link_back { height: auto; padding: 46px 0; }
    .noble_link_box { padding: 0 22px; }
    .noble_link_text { font-size: 21px; word-break: keep-all; }
    body .noble_link_back .noble_link_btn { font-size: 16px !important; padding: 13px 30px !important; }

    .geo_section { padding: 52px 0 48px; }
    .geo_title { font-size: 21px; margin-bottom: 22px; padding: 0; }
    .geo_lead { font-size: 15px; line-height: 1.75; text-align: left; }
    .geo_card_area { gap: 10px; margin: 28px auto 40px; }
    .geo_card { width: calc(50% - 5px); min-width: 0; padding: 18px 12px; }
    .geo_card_title { font-size: 15.5px; }
    .geo_card_text { font-size: 13px; }
    .geo_faq_heading { font-size: 19px; word-break: keep-all; }
    .geo_q { font-size: 16px; }

    /* ---------- 5. 상담·제휴·채용 신청 양식 ---------- */
    .consulting_form { margin-left: 0; margin-right: 0; }
    .input_line { margin-bottom: 0; overflow: visible; }
    .input_box { width: 100%; float: none; padding: 0; margin-bottom: 12px; }
    .input_box:has(.three_input) { display: flex; align-items: center; }
    .three_input { width: 27%; flex: 1 1 0; min-width: 0; text-indent: 0; text-align: center; }
    .input_division { width: 18px; flex: none; }
    .consulting_input, .input_select, .consulting_textarea { font-size: 16px; }   /* 16px 미만이면 아이폰이 입력할 때 화면을 확대함 */
    .textarea_box { height: 150px; padding: 0; margin-bottom: 12px; }
    .agree_box { padding: 18px 0 28px; }
    .terms_box { height: 150px; padding: 16px; font-size: 13px; }
    .terms_box table { width: 100% !important; }
    .agree_chk_box { justify-content: flex-start; }
    .agree_btn { height: 54px; font-size: 17px; }

    /* ---------- 6. 하위 페이지 ---------- */
    /* 인사말 */
    .ceo_intro_box { height: auto; }
    .ceo_intro_half { width: 100%; float: none; }
    .ceo_intro_half img { width: 100%; }
    .ceo_intro_half.text { height: auto; padding: 36px 0; }
    .sub_title.ceo { margin-bottom: 26px; }
    .ceo_intro_text { font-size: 15.5px; padding: 0 22px 14px; }

    /* 회사소개 */
    .company_intro_area { overflow: hidden; }
    .company_intro_box { width: 100%; max-width: 280px; height: 280px; float: none; margin: 0 auto 16px; border-width: 16px; font-size: 19px; }
    .noble_box.bg_intro { height: auto; }
    .intro_back_area { margin-left: 0; margin-right: 0; }
    .intro_back_box { width: 100%; float: none; height: auto; padding: 0 0 14px; }
    .intro_back_box_in { padding: 30px 26px; }
    .intro_back_title { font-size: 20px; padding-bottom: 18px; }
    .map_box { height: 220px; overflow: hidden; }
    .map_box img { width: 100%; height: 100%; object-fit: cover; }   /* 가로로 긴 약도: 줄이지 않고 가운데를 보여 줌 */
    .addr_line { height: auto; font-size: 15px; overflow: hidden; }
    .addr_title { width: 86px; height: auto; min-height: 46px; }
    .addr_text { width: calc(100% - 86px); height: auto; min-height: 46px; text-indent: 0; padding-left: 12px; word-break: keep-all; }

    /* 가입안내 */
    .join_info_box { height: auto; margin-bottom: 18px; padding: 8px; overflow: hidden; }
    .join_info_box_left { width: 100%; float: none; height: auto; padding: 16px 12px; }
    .join_info_title { font-size: 16.5px; padding: 0 14px; }
    .join_info_box_right { width: 100%; float: none; height: auto; padding: 16px 12px 16px 14px; }

    /* 등급·회원료 안내 */
    .sub_box_pay { height: auto; font-size: 24px; justify-content: center; padding: 10px 0; }
    .class_guide_box { height: auto; overflow: hidden; }
    .class_guide_img_box { width: 100%; height: 130px; float: none; }
    .class_guide_text_box { width: 100%; float: none; height: auto; padding: 22px 20px; }
    .class_guide_title { font-size: 25px; }
    .class_guide_img_box img { max-width: 78%; max-height: 88%; }
    /* 클래스 가입비 표: 칸이 많아 좁히면 글자가 세로로 쌓임 → 표 크기를 지키고 좌우로 밀어서 보기 */
    .class_guide_tab_box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .class_guide_tab_box::before { content: "← 표를 좌우로 밀어서 보세요 →"; display: block; padding: 0 0 10px; font-size: 13px; color: #888; text-align: center; }
    .class_guide_tab { min-width: 860px; font-size: 13px; }

    /* 맞춤 컨설팅 (con_*) */
    .prestigious_main_box { height: auto; margin-bottom: 32px; }
    .prestigious_box { width: 100%; float: none; height: auto; }
    .prestigious_box img { display: block; height: 230px; object-fit: cover; }
    .prestigious_right_box { position: static; transform: none; width: auto; height: auto; padding: 26px 20px; }
    .prestigious_right_box_text { font-size: 15.5px; padding-bottom: 14px; }
    .prestigious_sub_box_area { margin-left: 0; margin-right: 0; }
    .prestigious_sub_box { width: 100%; float: none; padding: 0 0 22px; }
    .prestigious_three_text_box { height: auto; }
    .prestigious_three_text { width: auto; min-height: 96px; margin: 0 22px; padding: 16px 20px; }
    .prestigious_tab_box { overflow-x: auto; }
    .prestigious_tab_box table tr th { font-size: 15px; }
    .prestigious_tab_box table tr td { font-size: 14px; }
    .prestigious_tab_box table tr th:first-child, .prestigious_tab_box table tr td:first-child { text-indent: 10px; }
    .major_desc_box { height: auto; padding: 16px 18px; font-size: 14.5px; }
    .univ_img { width: 50%; }

    /* 테스트 (결혼 심리테스트 · 결혼적령기 테스트) */
    .grade_box { width: 100%; float: none; height: auto; }
    .grade_box.text { padding: 44px 22px; }
    .grade_box.img { height: 240px; overflow: hidden; }
    .grade_box img { object-fit: cover; }
    .grade_title { font-size: 26px; word-break: keep-all; }
    .grade_text { font-size: 15.5px; word-break: keep-all; }
    /* 테스트 질문 창: 페이지 안 <style> 에 768px 규칙이 있어 body 를 붙여 이쪽이 우선하게 함 */
    body .test_pop_mask { padding: 0 12px; }
    body .test_pop { min-height: 430px; padding: 28px 18px 58px; }   /* 아래 58px: 바닥에 붙는 '이전 · 다음' 자리 */
    body .test_pop_text { font-size: 20px; word-break: keep-all; }
    body .test_pop_sm_text { font-size: 14.5px; word-break: keep-all; }
    body .test_pop_btn_box { padding: 22px 0; }
    body .test_pop_btn { height: 46px; padding-top: 12px; font-size: 15.5px; margin-bottom: 8px; }
    body .test_pop_next_prev { padding-top: 14px; }
    body .test_pop_prev, body .test_pop_next { display: inline-block; padding: 8px 12px; cursor: pointer; }
    body .test_pop_close_btn { top: 4px; right: 6px; padding: 4px 10px; }
    .test_pop_input_box .input_select { font-size: 16px; }

    /* ---------- 7. 꼬리말 ---------- */
    .last_box { padding-bottom: 150px; margin-bottom: -95px; }
    .footer_box { width: auto; }
    .footer_logo_box { width: 190px; height: 190px; }
    .footer_logo_box:before { right: -80px; border-width: 40px; }
    .footer_logo_box img { width: 112px; }
    .footer_menu_box { text-align: center; line-height: 2.1; }
    .footer_menu { white-space: nowrap; }
    .footer_menu a { display: inline-block; padding: 5px 0; }
    .footer_division { padding: 0 7px; }
    .footer_info_box { padding: 26px 0; font-size: 13px; }
    .footer_info_half { width: 100%; float: none; }
    .footer_info { padding: 2px 0; word-break: keep-all; }
    .footer-v6 .copyright { font-size: 10.5px; text-align: center; }
    .footer-v6 .copyright .container { padding-right: 56px; }   /* 오른쪽 아래 '맨 위로' 버튼 자리 */

    /* ---------- 8. 글 보기 창 (뉴스·언론·후기 '자세히 보기') ---------- */
    .view_popup_box { width: auto; min-height: 0; max-height: none; margin: 64px 12px 0; padding: 22px 18px 6px; }
    .popup_close_btn_box { width: 48px; height: 48px; top: -48px; }
    .popup_close_btn { width: 30px; height: 30px; font-size: 17px; line-height: 30px; }
    .info_title.view { font-size: 18px; line-height: 1.35; min-height: 0; max-height: none; -webkit-line-clamp: 3; }
    .view_popup_date { font-size: 14px; }
    .view_popup_content { font-size: 15.5px; line-height: 1.7; max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); padding-bottom: 16px; }
    .view_popup_content img { height: auto !important; }
    .view_popup_content iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
    .view_popup_foot { height: 46px; bottom: -46px; font-size: 16px; }

    /* ---------- 9. 메인 '빠른 상담신청' 띠 ---------- */
    .quick_area { height: auto; padding: 8px 44px 8px 12px; }
    .quick_area > .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; }
    .quick_box, .quick_box.first { width: 100%; float: none; height: auto; padding: 0; }
    .quick_text { flex: none; font-size: 14px; }
    .quick_input { height: 40px; font-size: 16px; }
    .quick_name { flex: 1 1 0; width: auto; min-width: 0; margin: 0 0 0 10px; }
    .quick_phone { flex: 1 1 0; width: auto; min-width: 0; padding: 0; text-align: center; }
    .quick_box .input_division { width: 14px; height: 40px; }
    .quick_box .agree_chk_box { flex: 1 1 0; min-width: 0; }
    .quick_box .agree_chk_box label { font-size: 12.5px; }
    .quick_btn { flex: none; width: auto; height: 40px; margin-left: 10px; padding: 0 18px; }
    /* 접었다 펴기 (custom.js 가 버튼과 m_has_toggle·m_collapsed 를 붙임. 스크립트가 없으면 펼친 채로 보임) */
    .m_quick_toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; padding: 0; border: 0; background: none; color: #fff; font-size: 16px; font-weight: 600; }
    .m_quick_toggle i { font-size: 20px; transition: transform .25s; }
    .quick_area.m_collapsed .m_quick_toggle i { transform: rotate(0deg); }
    .quick_area:not(.m_collapsed) .m_quick_toggle i { transform: rotate(180deg); }
    .quick_area.m_collapsed .quick_box { display: none; }
    .quick_area.m_has_toggle .quick_box.first .quick_text { display: none; }
    .quick_area.m_has_toggle .quick_name { margin-left: 0; }
    #quick_area ~ #footer-v6 .copyright { padding-bottom: 76px; }   /* 고정 띠가 꼬리말 끝을 가리지 않게 */
}