@charset "utf-8";

/* ============================================================
   모바일 반응형 스타일 (디자이너 mquery.css 포팅)
   - 기존 layout.css / scoped 스타일은 수정하지 않고 이 파일에만 추가
   - index.html 에서 반드시 layout.css '이후'에 로드할 것
   ============================================================ */


/* ------------------------------------------------------------
   모바일 전용 요소 베이스 스타일 (미디어쿼리 밖)
   라이브 layout.css 엔 없으므로 여기서 기본값 정의:
   데스크톱에선 display:none 으로 숨고, ≤991px 에서 노출됨.
   (샘플 sample_html_mobile/css/layout.css:972-984 에서 가져옴, 브랜드 요소 없음)
   ------------------------------------------------------------ */

/* margin-left:-20px 는 ChatInterface.svelte scoped `.header_inner{padding:...20px !important}`(특이성 0,2,0,
   mquery 로 못 이김)의 좌측 20px 여백을 상쇄해 햄버거를 화면 좌측 끝에 붙이기 위함. */
/* padding-top 2px: 랜딩 헤더 햄버거를 채팅 뷰(더 위에 붙은, 사용자 선호)와 같은 높이로 맞춤.
   채팅은 `.sub_contents_area .mobile_nav_box`(더 구체적)를 쓰므로 이 값에 영향 안 받음. */
.mobile_nav_box { display: none; float: left; padding: 2px 0 0 0; margin-left: -8px; }
.sub_contents_area .mobile_nav_box { padding-top: 10px; }
.mobile_nav_bt { background: url(../img/l_n_nav_i.png) 50% 50% no-repeat; display: block; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; text-indent: -9999px; border: 0; outline: none; }
.mobile_nav_bt:hover { background-color: #ebebeb; }

.m_side_toggle_bt { display: none; float: right; height: 36px; width: 36px; border: 0; background: #f9f9f9; padding: 0; margin: 0 7px 0 0; line-height: 0; border-radius: 8px; }
.m_side_toggle_bt em { background: url(../img/close_bt_i.png) no-repeat 50% 50%; display: block; width: 36px; height: 36px; }
.m_side_toggle_bt:hover { background: #ebebeb; }

/* 사이드바 드로어 배경 오버레이 (Svelte 상태로 .show 토글 — 샘플 jQuery fadeIn 대체)
   z-index 1000: 채팅 헤더(sticky z-index:9)가 DOM상 사이드바 뒤라 같은 z-index면 위로 그려짐 →
   오버레이/드로어를 헤더보다 높여 헤더 버튼(햄버거·마인드맵·다운로드)이 드로어 열릴 때 뒤로 가려지게 */
.m_overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
.m_overlay.show { display: block; }

/* 모바일에서만 살아나는 강제 줄바꿈(웰컴 부제 등 문구의 끊김 지점 고정용).
   데스크톱/태블릿에선 숨겨 기존 한 줄 렌더 그대로 유지 */
.m_only_br { display: none; }


/* XL ================================================================*/

@media all and (max-width: 1399px) {

    /* .gpt_s_m_wrap / .m_sub_t / .sub_con_inner / .s_gpt_a_box / .gpt_question_row p 는
       라이브 layout.css 의 @media(max-width:1400px) 블록이 이미 올바르게 처리함(중복 제거).
       특히 .gpt_s_m_wrap 의 margin-left:-50% 는 라이브의 transform:translateX(-50%) 중앙정렬과
       겹쳐 이중 좌측이동(좌측 잘림)을 유발하므로 제거. 아래 두 규칙만 mquery 고유. */
    .bottom_search .gpt_search_box { width: 600px; }
    .m_new_c_wrap { margin-left: 0; margin-right: 0; }

}


/* md ================================================================*/

@media only screen and (max-width: 991px) {

    header { padding-bottom: 10px; }
    .left_sidebar { left: -298px; z-index: 1001; }   /* 드로어를 오버레이(1000)·헤더(9) 위로 → 열리면 헤더 버튼 가림 */
    .mobile_nav_box { display: block; }
    /* 채팅 뷰 헤더는 .sub_contents_area{padding:8px} 안(단, 상단 패딩은 scoped `.sub_contents_area{padding-top:0 !important}`로 0).
       margin-left:-16px = 좌측 8px 패딩 상쇄해 랜딩과 좌측 정렬. margin-top:-8px = 상단을 랜딩과 같은 높이로(net pad-top 2px). */
    .sub_contents_area .mobile_nav_box { margin-left: -16px; margin-top: -8px; }
    .header_inner { padding: 0; }

    .sub_contents_layout { width: 100%; margin: 0; }

    /* 웰컴 화면: '일반 흐름 풀폭'으로 전환.
       라이브 layout.css 는 .gpt_s_m_wrap 을 position:absolute + transform:translateX(-50%) + left:calc(50%+80px) +
       @media(max-width:1400px) width:600px 로 중앙정렬한다. 여기에 width/left 만 덮으면 계산이 꼬이거나
       .l_nav_active .gpt_s_m_wrap(특이성 0,2,0)·width:600px 에 밀려 폭이 좁아진다(사용자 리포트).
       그래서 아예 position:static 으로 되돌려 자연 흐름 풀폭 + 부모 스크롤(뉴스까지 도달)로 만든다.
       !important 는 위 규칙들을 확실히 무력화하기 위함. */
    /* ⚠️ 컨테이너 자체가 뷰포트보다 좁게 렌더되는 문제(우측 빈 띠) 방어:
       원인이 소스에 안 보여서, width:100vw 로 뷰포트 폭을 강제(부모 제약 우회). body overflow-x:hidden 이라 넘침 없음. */
    #app, main { width: 100% !important; max-width: 100% !important; }
    .main_contents_wrap { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; height: 100dvh; overflow-x: hidden; overflow-y: auto; }

    /* iOS Safari 하단 툴바가 100vh(= large viewport, 툴바 없는 높이) 영역을 덮어
       .bottom_search(layout.css:541, absolute bottom:0)가 잘리던 문제(173704).
       dvh 는 툴바 노출 상태를 반영하는 동적 뷰포트 높이(iOS 16.4+).
       미지원 브라우저는 이 선언을 무시 → layout.css 의 100vh 가 그대로 폴백. */
    .sub_contents_layout, .l_c_f_wrap { height: 100dvh; }
    .gpt_s_m_wrap {
        position: static !important; transform: none !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        width: 100% !important; max-width: none !important; margin: 0 !important;
        padding: 14vh 20px 40px !important;   /* 14vh 상단 여백(디자이너 세로 위치 재현) + 좌우 20px(edge-to-edge) */
    }

    .side_toggle_bt em { background: url(../img/close_bt_i.png) no-repeat 50% 50%; }
    .m_l_s_active { left: 0; }
    .m_side_toggle_bt { display: block; }
    .side_toggle_bt { display: none; }

    /* 예시 질문 드롭다운: 모바일에선 각 질문 1줄로 말줄임(…). 질문이 길어 드롭다운이 위로 넘쳐
       헤더 가리던 문제(160041) 방지. 2줄 클램프는 3번째 줄 잔상(161247)이라 1줄로 확정. */
    .sample_q_d_i ul li a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

}


/*sm  ================================================================*/

@media only screen and (max-width: 767px) {

    .sub_con_inner { width: 100%; }

    /* 웰컴 부제(.m_sub_t)를 "…지원하여 / 연구 활동을 돕는 AI 서비스입니다."로 끊기게
       (자연 줄바꿈은 "…지원하여 연구 / 활동을 돕는…"이라 어색). 마크업은 ChatInterface.svelte:4174 */
    .m_only_br { display: inline; }

    /* 좌우 8px: 아바타(.sub_contents_area padding:8px) 좌우 라인과 정렬.
       상하(base 20px/15px) 축소 + safe-area: 하단 안내문구가 iOS 툴바/홈인디케이터에 안 물리게 세로 공간 확보 */
    .bottom_search { padding-left: 8px; padding-right: 8px; padding-top: 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    /* 안내문구("연구자 및 연구성과 관련 질문을…"): 13px 이면 폰 폭에서 2줄 → 채팅 뷰에선 둘째 줄이
       iOS 툴바 구간에 잘리고(173704), 웰컴 화면에선 "…기반으로 답 / 변해드립니다."로 어색하게 끊김.
       두 화면(.bottom_search / .m_gpt_search_wrap) 공용으로 축소해 한 줄 수용.
       문구 실측 폭 ≈ 34.6 × font-size, 웰컴 가용폭 = 뷰포트 − 40px(.gpt_s_m_wrap padding 0 20px)이라
       상한이 약 2.6vw → 여유 두고 2.5vw (393pt→9.8px, 375pt(SE)→9.4px). 큰 화면은 13px 로 clamp.
       nowrap 은 넣지 않음 — 예외 상황에서 가로로 잘리느니 2줄 허용(위 dvh 보정이 받쳐줌) */
    .gpt_s_i_t { margin-top: 4px; }
    .gpt_s_i_t span { font-size: clamp(8px, 2.5vw, 13px); line-height: 1.4; }
    /* transform:none 로 layout.css 의 translateX(-7px)(데스크톱 800px 중앙보정) 제거 → 풀폭에서 좌측 붙음/비대칭 해소 */
    .bottom_search .gpt_search_box { padding: 12px 60px 0 44px; height: 52px; width: 100%; transform: none; background: #fff url(../img/search_int_bg02.png) no-repeat 11px 50%; background-size: 22px auto; }
    .bottom_search .gpt_search_box input { font-size: 16px; }
    .bottom_search .gpt_search_box .m_search_bt { width: 44px; height: 44px; line-height: 46px; font-size: 20px; top: 2px; right: 3px; }

    .right_side_box { position: fixed; right: 0; top: 0; bottom: 0; z-index: 9; }
    .active_source_t .right_side_box { opacity: 1; visibility: visible; width: 90%; min-width: 280px; }
    .sub_contents_area .mobile_nav_box { padding-left: 0px; }
    .header_right_box { margin-right: 0; }
    .list_head_box { flex-direction: column; gap: 10px; align-items: flex-start; }
    /* flex:none 로 base 의 flex:0 0 420px 제거(column 에선 420px 높이가 됨→검색아이콘이 아래로 뜸).
       max-width:none 로 55% 폭 제한 해제 → 검색창 우측 끝까지. */
    .l_h_search { width: 100%; max-width: none; flex: none; }

    /* 국가R&D공고·특허 리스트 컨테이너: 좌우 32px 패딩이 폰에서 여백 과다(171013) → 16px 로 축소 */
    .ntis-main-container, .patent-main-container { padding-left: 16px; padding-right: 16px; }
    /* 리스트 하단 "더 보기" 버튼이 sticky 헤더에 밀려 잘리는 하단 구간에 들어가 안 보이던 문제(191109):
       스크롤 리스트 하단에 여백 추가로 버튼이 화면 안으로 올라오게 */
    .ntis-main-container .rd_list_wrap, .patent-main-container .rd_list_wrap { padding-bottom: 70px; }

    /* 논문/특허/연구자 상세 모달: 우측상단 절대배치 버튼(.md_r_link)이 좁은 폭에서 제목(.md_r_i_t) 가림(193924)
       → static 흐름배치(제목 위로)로 겹침 해소 + text-align:right 로 버튼은 우측에 유지 */
    .md_r_link { position: static; margin-bottom: 12px; text-align: right; }

    /* 지식 보완성 분석(HeatmapChart) 매트릭스: 연구자 열이 고정 64px 라 5명이면 폭 넘쳐 잘림(195910).
       열을 유연폭(flex)으로 나눠 5명도 한 화면에 표시. scoped 컴포넌트라 !important. */
    .matrix-cell-heat { flex: 1 1 0 !important; width: auto !important; min-width: 20px !important; }
    .matrix-cell-keyword { flex: 2 1 0 !important; }
    .col-name { max-width: 100% !important; }

    /* 뉴스: 모바일은 별도 .m_news_stack(현재 페이지 3개 세로 스택) 렌더(ChatInterface.svelte newsIsMobile 분기).
       화살표(.d_r_news_arr)는 헤더 우측상단에 유지 → newsCarouselPrev/Next 로 다음/이전 3개 페이징. */
    .m_new_c_wrap { padding-top: 30px; }
    .m_news_stack { display: flex; flex-direction: column; gap: 12px; }

    /* 답변 하단 버튼행: "출처 보기" 텍스트 2줄 깨짐(164912) + 다운로드 아이콘 줄바꿈(165852) 방지.
       한 줄 유지(scoped 기본 nowrap) + 출처보기 min-width:120px(line_bt)→auto 로 줄여 6개 한 줄에 수용. */
    .s_gpt_bt_box .s_source_bt { flex-shrink: 0; white-space: nowrap; min-width: auto; }

}