/* ============================================================
   responsive-reset.css
   WEADD(2026년 8월): 신규 페이지 공통 반응형 기초 리셋 - 공용 파일로 분리

   왜 필요한가:
   외부 css/layout.css 에 #wrap/#container/#header 가 전부 min-width:1100~1400px로
   고정돼 있어서(구버전 PC 전용 레이아웃 잔재), 반응형으로 새로 만드는 페이지마다
   똑같이 가로 넘침이 재발함. index.php(메인페이지)에서 실제 브라우저 렌더링
   테스트로 검증한 리셋 규칙을 procedure.php에도 그대로 복사해 썼었는데,
   페이지가 늘어날수록 중복이 커져서 이 파일 하나로 분리함.

   사용법: 새 페이지의 <head>에 아래 한 줄만 추가
     <link rel="stylesheet" href="css/responsive-reset.css" />
   (css/layout.css 보다 뒤에 두는 걸 권장 - 이 파일 규칙들이 !important로
   layout.css의 고정폭을 덮어써야 하는 구조라서, 순서 자체는 !important 때문에
   크게 상관없지만 가독성을 위해 뒤에 둠)
   ============================================================ */

/* ============================================================
   WEADD(2026년 8월): 사이트 공통 반응형 기초 리셋
   index.php(메인페이지) 작업 때 실제 렌더링 테스트로 검증된 규칙을 그대로 이식.
   이유: 외부 css/layout.css 에 #wrap/#container/#header 전부 min-width:1100~1400px가
   박혀있어서, 이 리셋 없이는 새로 만드는 페이지마다 똑같이 가로 넘침이 재발함.
   앞으로 페이지를 새로 만들 때마다 이 블록을 그대로 복사해서 쓰면 됨 -
   (더 늘어나면 공통 CSS 파일 하나로 분리하는 걸 권장) */
@media (max-width: 1399px) {
    html, body { overflow-x: hidden; }
    body, #wrap, div#wrap, #container, div#container { min-width: 0 !important; }
    #header.header { min-width: 0 !important; }
    div#header, div#gnb { min-width: 0 !important; }
    html, body { height: auto !important; min-height: 100%; }
}
@media (min-width: 1200px) and (max-width: 1664px) {
    #header.header { padding: 0 24px; }
    #header.header .h1_logo img { width: clamp(150px, 13vw, 200px) !important; }
    #header.header .gnb li > a { font-size: 15px; }
    #header.header .gnb li:nth-child(n+2) { margin-left: 12px; }
    #header.header .snb li > a { font-size: 13px; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
    #header.header .h1_logo img { width: 150px !important; }
    #header.header .gnb li > a { font-size: 13px; }
    #header.header .gnb li:nth-child(n+2) { margin-left: 8px; }
}
@media (max-width: 1199px) {
    #header.header { height: 80px; padding: 0 24px; background: #fff; }
    #header.header .gnb, #header.header .snb { display: none; }
    #header.header .gnbToggleBtn { display: flex; }
    #header.header.menu-open .gnb {
        display: block; position: fixed; top: 80px; left: 0; right: 0; bottom: 0;
        background: #fff; overflow-y: auto; padding: 10px 24px; z-index: 9998;
    }
    #header.header.menu-open .gnb ul { display: block; }
    #header.header.menu-open .gnb li { float: none; margin-left: 0; border-bottom: 1px solid #eee; }
    #header.header.menu-open .gnb li > a { display: block; padding: 14px 4px; font-size: 16px; }

    /* WEADD(2026년 8월): 햄버거 메뉴 열림 상태 버그 3건 수정
       ① 헤더 배경이 비쳐 뒤 사진이 보이던 문제
          - index.php 인라인 스타일의 div#header{background:none} 과 충돌 소지가 있어
            메뉴가 열렸을 때는 확실히 흰 배경이 되도록 !important 로 고정
       ② 퀵메뉴(카톡/블로그/인스타 아이콘, z-index:9999)가 메뉴 목록 위로 겹쳐 보이던 문제
          - 메뉴 패널을 그보다 위(10001)로 올림
       ③ "유튜브 / 인스타"의 구분선 '/' 이 줄바꿈되어 혼자 한 줄을 차지하던 문제
          - 해당 항목만 가로 배치로 되돌림 */
    /* 헤더 자체가 z-index:9999 로 독립 레이어를 만들기 때문에, 그 안쪽 .gnb 의 z-index를
       아무리 올려도 바깥의 퀵메뉴(9999)를 넘지 못함. 헤더 레이어 자체를 올려야 함 */
    #header.header.menu-open { background: #fff !important; z-index: 10001 !important; }
    #header.header.menu-open .gnb { z-index: 1 !important; }
    #header.header.menu-open .gnb li.sns_menu {
        display: flex; align-items: center; gap: 4px;
    }
    #header.header.menu-open .gnb li.sns_menu > a {
        display: inline-block; padding: 14px 4px;
    }
    #header.header.menu-open .gnb li.sns_menu > span { color: #ccc; }
}
@media (max-width: 1024px) {
    #header.header { height: 64px; padding: 0 20px; }
    #header.header.menu-open .gnb { top: 64px; padding: 10px 20px; }
}
@media (max-width: 1520px) {
    #header.header { min-width: 0 !important; box-sizing: border-box; }
}