@charset "UTF-8";
/* ==========================================================================
   공통 헤더(#header) 모바일 GNB — 공통 스타일시트 (전 페이지 공용, 2026-09)

   배경
   - 이 전까지는 페이지(JSP)마다 <style> 안에 똑같은 모바일 GNB 보정 CSS를
     복붙해서 썼음. 그러다 보니 한쪽만 고치고 다른 쪽은 빠뜨리는 일이
     반복됐음(예: presentation.jsp만 옛날 flex-wrap 방식/옛날 CSS 버전에
     머물러 있던 것, supportcriteriayear.jsp에만 밑줄 위치를 강제로 다시
     계산하는 JS가 남아있던 것 등).
   - 그래서 이 로직 전체를 이 파일 하나로 통합함. 앞으로 모바일 GNB를
     고칠 일이 있으면 이 파일 하나만 고치면 전 페이지에 반영됨.

   각 JSP에서 쓰는 법
   - <head>에서 style.css, partnership-guide.css 를 로드한 "다음"에
     이 파일을 링크해서, 소스 순서상 가장 마지막에 오도록 함:
       <link rel="stylesheet" href="/resources/partner/css/style.css?ver=...">
       <link rel="stylesheet" href="/resources/partner/css/partnership-guide.css?ver=...">
       <link rel="stylesheet" href="/resources/partner/css/header-gnb-mobile.css?ver=2">
   - 각 JSP 안에 있던 "공통 헤더(#header) 모바일 GNB 보정" <style> 블록은
     전부 삭제하고 이 파일로 대체함(중복 제거).

   2026-09 2차 변경: 3+2 두 줄 그리드 → 한 줄(단일 행)로 변경
   - 요청: 모바일에서도 5개 메뉴를 줄바꿈 없이 "한 줄"로 보여주되, 원래
     전체 텍스트 대신 짧은 텍스트로 줄여서 표시
     (제휴안내→안내, 제휴혜택→제휴혜택, 설명회→설명회,
      파트너기관신청→기관신청, 프로그램공급→프로그램).
   - 이를 위해 각 메뉴 <a> 안에 전체 텍스트용 span(class="full")과
     축약 텍스트용 span(class="short") 두 개를 넣어두고, 860px 이하에서는
     .full을 숨기고 .short만 보여주는 방식을 씀. 화면 폭에 따라 줄바꿈
     지점이 달라지는 문제 없이(3열 그리드 때와 같은 이유) 항상 한 줄로
     고정됨 — 애초에 텍스트 자체가 짧아서 굳이 줄바꿈할 필요가 없어짐.
   - 안전장치: 아직 .short 마크업이 없는 페이지(현재 application.jsp는
     공용 include(header_dongsim_lab_partner.jsp)를 쓰는데, 그 파일
     내용은 아직 이 축약 텍스트로 안 고쳐짐)에서는 :has(.short) 조건이
     안 걸려서 원래 전체 텍스트가 그대로 보임 — 텍스트가 통째로
     사라지는 사고 없이 하위호환됨. .short 마크업을 넣기 전까지는 해당
     페이지만 계속 기존 방식(전체 텍스트, 필요시 줄바꿈)으로 보임.

   레이아웃 로직 (공통)
   - header.css: PC에서는 .header-gnb 를 position:absolute + left:50% +
     translateX(-50%) 로 header-main 위에 겹쳐서 중앙 정렬함.
     860px 이하에서는 position:inherit 로 되돌려 header-main .container
     안에서 일반 흐름으로 배치되도록 설계되어 있음.
   - 그런데 실제로는 이 되돌림이 제대로 걸리지 않아, 모바일에서 nav(ul)가
     로고 옆에 좁게 끼어 들어가며 좌측으로 붙어 보이는 현상이 있었음.
     position:inherit 대신 static을 명시하고 !important 로 우선순위를
     확실히 확보해, 모바일 GNB가 로고/우측 버튼 아래로 온전히 줄바꿈되도록
     보정함.
   - selected 메뉴 밑줄(파란 라인)은 안 그림: partnership-guide.css가
       #header .header-gnb ul li.selected a {
         border-bottom: none !important;
         color: #0B57D0;
       }
     로 이미 처리하고 있음(밑줄 없이 파란 글자로만 선택 상태 표시).
     이 파일에서는 이 처리를 건드리지 않음.

   (공용 header.css, partnership-guide.css 자체는 다른 페이지에도 쓰이므로
    건드리지 않고, 이 파일에서 더 높은 우선순위로 덮어씀)
   ========================================================================== */

/* 기본값(PC 포함 전체 폭): .short는 항상 숨기고 .full만 보여줌.
   이 규칙이 없으면 미디어쿼리 밖(PC 포함)에서 .short가 브라우저 기본
   display(span=inline)로 그냥 같이 노출돼버림 — 860px 이하일 때만
   아래에서 뒤집어서 .full을 숨기고 .short를 보여줌 */
html body #header .header-gnb ul li a .short,
html body #header .header-gnb.active-mode ul li a .short {
    display: none !important;
}
html body #header .header-gnb ul li a .full,
html body #header .header-gnb.active-mode ul li a .full {
    display: inline !important;
}

@media screen and (max-width: 1080px) {
    html body #header .header-gnb ul,
    html body #header .header-gnb.active-mode ul {
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 860px) {
    #header .header-main .container { flex-wrap: wrap !important; }

    html body #header .header-gnb,
    html body #header .header-gnb.active-mode {
        position: static !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        order: 3;
        width: 100% !important;
    }

    /* 한 줄(단일 행) 배치: 5개 메뉴를 줄바꿈 없이 균등 간격으로 나란히 */
    html body #header .header-gnb ul,
    html body #header .header-gnb.active-mode ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    html body #header .header-gnb ul li,
    html body #header .header-gnb.active-mode ul li {
        width: auto;
        flex: 0 1 auto;
        min-width: 0; /* flex 아이템이 콘텐츠 폭 때문에 줄어들지 못하는 것 방지 */
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    html body #header .header-gnb ul li a,
    html body #header .header-gnb.active-mode ul li a {
        display: inline-block !important;
        white-space: nowrap;
        line-height: 1 !important;
        font-size: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 축약 텍스트(.short)가 있는 메뉴만 전체 텍스트(.full)를 숨김.
       .short가 없는 페이지는 :has(.short)가 안 걸려서 전체 텍스트가
       그대로 보임(하위호환 안전장치). */
    html body #header .header-gnb ul li a:has(.short) .full,
    html body #header .header-gnb.active-mode ul li a:has(.short) .full {
        display: none !important;
    }
    html body #header .header-gnb ul li a .short,
    html body #header .header-gnb.active-mode ul li a .short {
        display: inline !important;
    }
}

@media screen and (max-width: 375px) {
    html body #header .header-gnb ul li a { font-size: 12px !important; }
}
