/* 헤더·서브 화면 공통 레이아웃 (2026-11-01, 똑똑하지-Claude, 결정 71)
   1. PC(1280px 이상): 메가 GNB — 대메뉴에 마우스를 올리면 모든 대메뉴의 하위 메뉴(2depth)가 한 판에 펼쳐짐
   2. 서브 화면(body.sg-sub): 상단 비주얼 삭제, 헤더는 흰 바탕으로 고정
   3. 로케이션(#sub_nav): PC에서는 숨김(메가 GNB가 대신함), GNB가 사라지는 1279px 이하에서만 표시 */

:root{--sg-blue:#0d6ab5;--sg-line:#e5e8ec;--sg-hd:90px}

/* ── 1. 메가 GNB (PC) ─────────────────────────────────────────── */
@media screen and (min-width:1280px){
  #header{height:auto;min-height:var(--sg-hd)}
  #header #gnb > li{flex:0 0 180px;display:flex;flex-direction:column}
  #header #gnb > li > .depth{flex:1}  /* 열 높이를 가장 긴 열에 맞춤 → 세로선이 끝까지 */
  #header #gnb > li span a{padding:0 10px}
  #header #gnb > li > .depth,
  #header.typeHover #gnb > li > .depth{position:static;display:none;width:auto;margin:0;padding:22px 8px 30px;background:none}
  #header #gnb > li:hover .depth:after{display:none}
  #header.typeHover #gnb > li:hover > .depth{background:none}  /* 예전 드롭다운의 파란 배경 끄기 */
  #header #gnb:hover > li > .depth,
  #header #gnb:focus-within > li > .depth{display:block}
  /* 대메뉴 줄 아래 구분선 + 옅은 그림자 */
  #header #gnb:hover::before,
  #header #gnb:focus-within::before{content:"";position:absolute;left:50%;top:var(--sg-hd);width:100vw;transform:translateX(-50%);border-top:1px solid var(--sg-line)}
  #header.typeHover{box-shadow:0 10px 24px rgba(15,35,60,.08)}
  /* 열(column) 사이 세로선 */
  #header #gnb:hover > li + li > .depth,
  #header #gnb:focus-within > li + li > .depth{border-left:1px solid #f0f2f5}
  #header #gnb .depth > ul li{padding:6px 0;line-height:1.4}
  #header #gnb .depth > ul li a,
  #header.typeHover #gnb > li:hover .depth > ul li a{color:#555;font-size:15px;line-height:1.4;word-break:keep-all}
  #header #gnb .depth > ul li a:hover,
  #header #gnb .depth > ul li a:focus-visible,
  #header.typeHover #gnb > li:hover .depth > ul li a:hover{color:var(--sg-blue)}
  /* 지금 보고 있는 메뉴 표시 (로케이션을 숨기는 대신) */
  #header #gnb > li.depth01Active > span a{color:var(--sg-blue)}
  #header #gnb .depth > ul li.depth02Active > a,
  #header.typeHover #gnb > li:hover .depth > ul li.depth02Active > a{color:var(--sg-blue);font-weight:600}
}

/* ── 헤더 통합검색 버튼 (결정 76) — 전체메뉴(☰) 왼쪽, 파란 상자 안 ─────────── */
#header .btnList .sg-hd-search a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:#fff;border-radius:50%}
#header .btnList .sg-hd-search a:hover,#header .btnList .sg-hd-search a:focus-visible{background:rgba(255,255,255,.18)}
#header .btnList .sg-hd-search svg{width:22px;height:22px}
#header .btnList .sg-hd-search + .btnAllNav{margin-left:22px}
@media screen and (max-width:767px){
  #header .btnList .sg-hd-search + .btnAllNav{margin-left:14px}
}

/* ── 2. 서브 화면: 비주얼 없이 흰 헤더 고정 ─────────────────────── */
body.sg-sub{padding-top:var(--sg-hd)}
html:has(body.sg-sub){scroll-padding-top:var(--sg-hd)}  /* '본문 바로가기' 등 이동 시 고정 헤더에 가리지 않게 */
body.sg-sub #header{position:fixed;background:#fff;border-bottom:1px solid var(--sg-line)}
body.sg-sub #header #gnb > li > span a{color:#222}
body.sg-sub #header #gnb > li:hover > span a,
body.sg-sub #header #gnb > li.depth01Active > span a{color:var(--sg-blue)}
body.sg-sub #header .btnList:after{display:block}
body.sg-sub .subTop{display:none}
/* PC: 위치 안내는 메가 GNB의 파란 글씨로 (화면 제목 위 대메뉴 이름은 두지 않음 — 결정 72) */
@media screen and (min-width:1280px){
  body.sg-sub #sub_nav{display:none}
}
@media screen and (max-width:767px){
  :root{--sg-hd:70px}
  /* 휴대폰: 안내 화면 표(안전관리 위탁·온라인 교육)가 화면보다 넓어 페이지 전체가 옆으로 밀림 → 글자·여백 줄이고 줄바꿈 허용,
     그래도 넘치면 표 안에서만 옆으로 밀기 (결정 74) */
  body.sg-sub .sg-wrap{overflow-x:auto}
  /* 안전보건공단 기술지원 3개 화면 탭: 고정 폭(180px×3)이라 휴대폰 양옆이 잘림 → 화면 폭을 3등분 (결정 77) */
  body.sg-sub .tabDesign{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body.sg-sub .tabDesign li{width:auto;margin:0}
  body.sg-sub .tabDesign li a{padding:10px 6px;font-size:1.45rem;line-height:1.35;word-break:keep-all}
}
@media screen and (max-width:480px){
  /* 아주 좁은 휴대폰: 탭을 한 줄에 하나씩 */
  body.sg-sub .tabDesign{grid-template-columns:1fr;gap:6px}
  body.sg-sub .tabDesign li a{padding:11px 12px;font-size:1.5rem}
  body.sg-sub .sg-wrap table.sg-table,
  body.sg-sub .sg-wrap table.sg-sizetable{font-size:13.5px}
  body.sg-sub .sg-wrap table.sg-table :is(th,td),
  body.sg-sub .sg-wrap table.sg-sizetable :is(th,td){padding:10px 7px; word-break:keep-all; overflow-wrap:anywhere}
}