/* ═══════════════════════════════════════════════════════════════════════════
   개편 메인 기준 공용 헤더 · 푸터
   ───────────────────────────────────────────────────────────────────────────
   무엇:  public/index.html(개편 메인)의 헤더·푸터를 사이트 전체가 같이 쓰기 위한 CSS.
          node 페이지와 레거시 PHP 페이지가 이 파일 하나를 공유한다.

   왜 php 웹루트(css/)에 두는가:
          화이트리스트는 'node 가 받아야 하는 경로'에만 필요하다. 그 밖의 경로는 Apache 가
          웹루트에서 바로 내려준다. 이 파일을 여기 두면 PHP 페이지는 물론 node 페이지도
          /css/redesign-edtech-hub.css 로 읽을 수 있고, 서버 설정 변경이 필요 없다.
          ⚠️ 대신 Apache 가 서빙하므로 배포는 php 를 먼저 올려야 한다.
             node 만 먼저 올리면 node 페이지가 스타일 없는 헤더로 노출된다.

   왜 eh- 접두사인가:
          레거시 PHP 의 /common/css/style.css(91KB)가 .wrap(372건) · .ft(46건) · .logo(12건)
          같은 흔한 이름을 이미 쓰고 있다. 그중 .ft 는 중첩 선택자가 많아 명시도가 높아서
          로드 순서를 뒤로 미뤄도 이길 수 없다. 그래서 충돌 가능성이 없는 이름으로 새로 간다.
          (레포 전체에 eh- 로 시작하는 클래스가 하나도 없음을 확인했다)

   왜 변수를 여기서 다시 정의하는가:
          PHP 페이지는 /tokens.css 를 읽지 않는다. 이 파일만 연결하면 어디서든 똑같이
          보이도록 필요한 값을 자체적으로 들고 있는다. 값은 개편 메인의 :root 와 같다.

   레거시 전역 스타일로부터 자신을 지키는 장치:
          style.css 의 * { line-height:1; font-weight:400; margin:0; padding:0; border:0 }
          가 전역으로 걸려 있다. 클래스 규칙이 명시도에서 이기므로, 눈에 띄는 속성은
          (특히 line-height) 이 파일에서 명시적으로 지정한다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --eh-surface:    #FFFFFF;   /* 헤더·드롭다운 배경 */
  --eh-border:     #E4E1D6;
  --eh-navy:       #16243A;   /* 푸터 배경, 로고·버튼 글자 */
  --eh-ink:        #16202B;   /* 메뉴 글자 */
  --eh-ink-2:      #55636F;   /* 드롭다운 설명 글자 */
  --eh-cream:      #F1F0E7;   /* 메뉴 hover 배경 */
  --eh-on-navy-2:  #A9B8C2;   /* 네이비 푸터 위 본문 글자 */
  --eh-max:        1200px;    /* 헤더·푸터 안쪽 최대 폭 */
  --eh-h:          68px;      /* 헤더 높이 (본문 오프셋 계산에 쓰인다) */
}

/* ── 공통 ────────────────────────────────────────────────────────────────── */
/* 헤더·푸터 안쪽 컨테이너. 레거시 .wrap 과 겹치지 않도록 이름을 따로 둔다. */
.eh-in{max-width:var(--eh-max);margin:0 auto;padding-inline:24px}

/* 스크린리더 전용 텍스트(LinkedIn 버튼의 '새 탭에서 열림' 안내 등) */
.eh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 상세 페이지가 아직 없는 자리표시자 링크 — 커서로 구분하고, JS 가 클릭을 막는다 */
a[data-nolink]{cursor:default}

/* ── 헤더 ────────────────────────────────────────────────────────────────── */
/* z-index 100: 본문에 sticky 바를 둔 페이지가 있다(about 의 점프바가 90).
   레거시 PHP 헤더(.header)도 100 이었으므로 같은 층을 쓴다.
   건너뛰기 링크·모달(1000)보다는 아래여야 한다. */
.eh-hd{position:sticky;top:0;z-index:100;background:var(--eh-surface);border-bottom:1px solid var(--eh-border);line-height:1.55;color:var(--eh-ink)}
.eh-hd .eh-in{display:flex;align-items:center;gap:28px;height:var(--eh-h)}
/* 밑줄만 없앤다. color:inherit 는 쓰지 않는다 — 명시도(0,1,1)가 .eh-li 같은 단일
   클래스 규칙(0,1,0)을 이겨서, 레거시 * 규칙의 검정을 물려받아 버린다(푸터와 같은 원인).
   헤더 안 글자색은 각 컴포넌트에서 값으로 지정한다. */
.eh-hd a{text-decoration:none}

.eh-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;height:auto}
.eh-logo-img{display:block;height:30px;width:auto;flex:none}
.eh-logo-name{font-weight:900;font-size:18px;letter-spacing:-.01em;color:var(--eh-navy);line-height:1.2}

.eh-nav{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex:1}
.eh-nav > li{position:relative}
.eh-nav > li > button{background:none;border:0;padding:10px 12px;border-radius:8px;font:inherit;font-weight:500;line-height:1.55;color:var(--eh-ink);display:flex;gap:6px;align-items:center;cursor:pointer}
.eh-nav > li > button:hover{background:var(--eh-cream)}

.eh-dd{position:absolute;top:100%;left:0;min-width:250px;background:var(--eh-surface);border:1px solid var(--eh-border);border-radius:10px;box-shadow:0 12px 30px rgba(22,36,58,.12);padding:6px;display:none}
.eh-nav > li:hover .eh-dd, .eh-nav > li:focus-within .eh-dd{display:block}
.eh-dd a{display:block;padding:8px 10px;border-radius:7px;line-height:1.45}
.eh-dd a:hover{background:var(--eh-cream)}
.eh-dd a b{display:block;font-weight:500;color:var(--eh-ink)}
.eh-dd a span{display:block;font-size:12.5px;color:var(--eh-ink-2)}

/* LinkedIn 버튼 — 개편 메인에서 실제로 쓰이는 버튼이다(레거시 .hd-join 은 마크업이 없다) */
.eh-li{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:10px 16px;border:1px solid var(--eh-navy);border-radius:10px;font-weight:700;font-size:14.5px;line-height:1.2;color:var(--eh-navy);transition:background .2s,color .2s}
.eh-li:hover{background:var(--eh-navy);color:#fff}

.eh-burger{display:none;background:none;border:1px solid var(--eh-border);border-radius:8px;width:40px;height:40px;color:inherit;cursor:pointer}

/* ── 푸터 ────────────────────────────────────────────────────────────────── */
.eh-ft{background:var(--eh-navy);padding-block:48px 36px;font-size:14px;line-height:1.55}
/* 글자색을 자식마다 명시한다 — 상속에 맡기면 안 된다.
   레거시 PHP 의 style.css 에 * { … color: … } 가 있어서 모든 요소가 전역 규칙으로
   이미 자기 색(검정)을 갖는다. 그러면 .eh-ft 에 준 색이 자식으로 내려가지 않고,
   a{color:inherit} 는 부모 li 의 검정을 물려받아 네이비 배경 위에서 글자가 보이지 않는다.
   (node 페이지에는 그런 전역 규칙이 없어 증상이 없었다 — 그래서 PHP 에서 처음 드러났다) */
.eh-ft, .eh-ft div, .eh-ft p, .eh-ft span, .eh-ft ul, .eh-ft li, .eh-ft a{color:var(--eh-on-navy-2)}
.eh-ft a{text-decoration:none}
.eh-ft a:hover{color:#fff}
.eh-ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px}
.eh-ft ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* 흰 글자는 위의 일괄 지정보다 뒤에 와야 이긴다(명시도가 같다) */
.eh-ft h5{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;line-height:1.3}
.eh-ft .eh-logo-name{color:#fff}
.eh-ft-bottom{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px}

/* ── 모바일 ──────────────────────────────────────────────────────────────── */
/* 개편 메인은 .site 컨테이너 기준(@container site 860px)으로 전환하지만, 다른 페이지에는
   그 래퍼가 없고 PHP 23개에 넣는 건 레이아웃 충돌 위험이 크다. 헤더·푸터는 화면 전체 폭을
   쓰므로 뷰포트 기준(@media)과 결과가 같다. */
@media (max-width:860px){
  .eh-hd .eh-in, .eh-ft .eh-in{padding-inline:16px}
  .eh-nav{display:none}
  .eh-burger{display:grid;place-items:center}
  /* LinkedIn 버튼과 햄버거가 각각 margin-left:auto 를 가지면 남는 공간을 나눠 가져 서로
     멀어진다. 여백은 LinkedIn 버튼에만 주고 햄버거는 그 옆에 일정 간격으로 붙인다. */
  .eh-li{margin-left:auto;padding:8px 12px;font-size:13.5px}
  .eh-li + .eh-burger{margin-left:12px}
  /* 햄버거로 펼친 상태 — 토글 JS 가 .eh-hd 에 eh-open 을 붙인다 */
  .eh-hd.eh-open .eh-nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:var(--eh-h);background:var(--eh-surface);border-bottom:1px solid var(--eh-border);padding:8px 16px 16px}
  .eh-hd.eh-open .eh-dd{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 8px}
  .eh-ft-grid{grid-template-columns:1fr 1fr}
}