/* ============================================================
   GNB — 전 페이지 공통 상단 메뉴
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:3 (1920 아트보드)

   좌표로 놓지 않는다. flex 3분할(로고 / 대메뉴 / 언어)에 시안 실측값을
   토큰으로 넣으면 시안 배치가 그대로 나온다.
     로고 220 + 언어 101 + 대메뉴 1255 = 1576
     안쪽 폭 1920 - 40*2 = 1840  →  남는 264 를 양쪽 132 로 나눠 가지므로
     대메뉴가 392~1647 에 놓인다. 시안은 391~1646 이다.

   모든 치수는 calc(N * var(--u)). N 은 시안 원값 그대로다.
   ============================================================ */

:root {
  /* 1920 기준으로 화면 폭에 비례해 줄어드는 단위. 1920 이상에서는 1px 로 멈춘다 */
  --u: min(calc(100vw / 1920), 1px);

  /* --- 헤더 바 --- */
  /* 시안값은 145 인데 본문 위에 얹히다 보니 섹션 글자와 너무 가까웠다.
     헤더 덩어리(높이·로고·글자)를 한 단으로 줄였다. 시안 대비 의도적 축소다 */
  --gnb-h: 110;            /* 시안 145 */
  --gnb-pad-x: 40;         /* 로고 x=40, 언어 오른끝 1881 */
  --gnb-logo-w: 176;       /* 시안 220 */
  --gnb-logo-h: 48;        /* 시안 60 */
  --gnb-font: 20;          /* 시안 25 (Noto Sans Bold) */
  --gnb-gap: 153;          /* 대메뉴 사이 — 시안에서 6개 모두 정확히 153 */

  --gnb-lang-font: 14;     /* 시안 15 (Noto Sans SemiBold) */
  --gnb-lang-gap: 9;       /* KR 끝 1800 → 구분선 1809 → EN 시작 1820 */
  --gnb-lang-sep-h: 15;

  /* --- 포인터(육각형) --- */
  --gnb-pointer-w: 30;     /* 시안에서 90° 돌아가 있어 가로 30 × 세로 26 이다 */
  --gnb-pointer-h: 26;
  --gnb-pointer-bottom: -11;  /* 헤더 아래 선에 걸치게. 높이를 줄여도 따라온다 */

  /* --- 내려오는 패널 --- */
  --gnb-panel-h: 270;      /* 시안 383 (패널 528 - 헤더 145). 오른쪽 사진(300)을 빼고 글만 남아 2026-09-16 에 줄였다 */
  --gnb-panel-pad-t: 57;   /* 헤더 아래끝 145 → 첫 글줄 202 */
  --gnb-title-w: 274;      /* 대메뉴 이름 칸: x 40 → 세로선 314 */
  --gnb-cols-pad-l: 90;    /* 세로선 314 → 세부메뉴 첫 열 404 */
  --gnb-rule-top: 27;      /* 헤더 아래끝 → 세로선 시작(172) */
  --gnb-rule-h: 210;       /* 시안 320. 패널 높이에 맞춰 줄임 */
  --gnb-sub-font: 25;
  --gnb-sub-row-gap: 27;   /* 인사말 → 오시는 길 */
  --gnb-col-pitch: 246;    /* 열 시작점 간격. 시안 첫 열(404) → 둘째 열(650). 가장 긴 항목 '분석, 시험장비'(약 170) 가 들어간다 */
  --gnb-fig-w: 526;        /* 우측 이미지 526 × 300, 헤더 아래 40 */
  --gnb-fig-h: 300;
  --gnb-fig-top: 40;

  /* --- 색 (시안 값) --- */
  --gnb-point: #135a9c;    /* 활성 표시 · 언어 KR */
  --gnb-ink: #222;         /* 대메뉴 */
  --gnb-sub-ink: #919191;  /* 세부메뉴 */
  --gnb-lang-idle: #bebebe;
  --gnb-bg: #fff;
  --gnb-line: #e5e5e5;

  --gnb-family: "Noto Sans KR", "Noto Sans", system-ui, -apple-system,
                "Malgun Gothic", sans-serif;
}

/* ---------- 서브페이지 본문 축소 (2026-09 결정) ----------
   FHD 모니터에서 시안(1920) 원치수가 크게 느껴져 본문을 0.9 배로 그린다.
   기준 폭을 2133 (= 1920 / 0.9) 으로 두면 1920 화면에서 --u 가 0.9px 이 된다.
   (0.8 = 크롬 80% 배율도 시험했는데, 헤더는 원치수로 남으니 본문이 그보다 작게 느껴져 0.9 로 올렸다)
     · 서브페이지 <main> 에만 건다 — 헤더(GNB)와 푸터는 메인↔서브를 오갈 때 같은 크기여야 한다.
     · 메인페이지(index.html)는 body 에 .page 가 없고 --u 도 쓰지 않아 원래 영향이 없다.
     · 모바일(768 이하)은 375 기준이 따로 있으므로 데스크톱에서만 적용한다.
     · 라이트박스는 body 바로 아래에 붙어 main 밖이다. 확대 보기 화면이라 원치수로 둔다.
   시안 원치수로 되돌리려면 이 블록만 지우면 된다 */
@media (min-width: 769px) {
  body.page main { --u: min(calc(100vw / 2133), 1px); }
}

/* ---------- 껍데기 ----------
   fixed 인 이유: 흐름 안에 두면 헤더가 145 를 차지해 히어로가 그만큼 밀리고,
   배경이 없을 때 그 자리가 빈 띠로 남는다. 콘텐츠 위에 얹는다.

   글자 색은 배경에 따라 뒤집는다.
     기본(어두운 히어로 위)  흰 글자, 배경 없음
     밝은 섹션 위            진한 글자 — js/section-flow.js 가 .is-on-light 를 붙인다
     메뉴를 열었을 때        흰 배경 + 진한 글자
*/
.gnb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  font-family: var(--gnb-family);

  --fg: var(--color-white, #fff);
  --fg-dim: rgba(255, 255, 255, .55);
  --fg-point: var(--color-white, #fff);
}
.gnb.is-on-light,
.gnb.is-open,
.gnb.is-stuck {
  --fg: var(--gnb-ink);
  --fg-dim: var(--gnb-lang-idle);
  --fg-point: var(--gnb-point);
}

/* 아래로 내려갈 때는 비켜 준다 (js/gnb.js).
   올리거나, 화면 맨 위로 마우스를 가져가거나, Tab 으로 들어오면 다시 나온다.
   패널은 .gnb 안에 있으므로 함께 올라간다 — 숨길 때 어차피 닫는다 */
.gnb {
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.gnb.is-hidden { transform: translateY(-100%); }

/* ---------- 헤더 바 ---------- */
/* 배경과 아래 선은 메뉴를 열었을 때만 나타난다 (시안 Line 11) */
.gnb__bar {
  position: relative;
  height: calc(var(--gnb-h) * var(--u));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
/*
  배경이 깔리는 경우는 둘뿐이다.
    · 메뉴를 열었을 때
    · 첫 화면을 벗어난 뒤 헤더를 다시 불러냈을 때 (.is-stuck)

  두 번째가 필요한 이유: 불러낸 헤더는 본문 글자 위에 겹쳐 놓인다.
  배경이 없으면 메뉴 글자와 본문 글자가 뒤엉켜 둘 다 안 읽힌다.
  첫 화면(히어로)에서는 .is-stuck 이 붙지 않으므로 배경 없이 그대로다.
  이 동작이 필요 없으면 아래 .is-stuck 줄만 지우면 된다.
*/
.gnb.is-open .gnb__bar,
.gnb.is-stuck:not(.is-hidden) .gnb__bar {
  background: var(--gnb-bg);
  border-bottom-color: var(--gnb-line);
}
.gnb__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 calc(var(--gnb-pad-x) * var(--u));
}

/* 로고 — 두 장을 겹쳐 두고 배경에 따라 하나만 보인다.
     logo-on-dark.png   어두운 배경용. 원본은 검은 바탕이 박힌 PNG 라
                        검정을 알파로 바꿔 투명 배경으로 만들어 두었다.
     logo.png           흰 배경용 (시안 원본, 흰 바탕이 박혀 있다)

   mix-blend-mode 로 바탕을 지우는 방법은 쓸 수 없다.
   헤더가 position: fixed + z-index 라 별도 합성 맥락이 되어
   뒤에 있는 페이지와 섞이지 않는다. 그래서 에셋 쪽에서 해결했다.
   투명 배경 로고(SVG 면 더 좋다)를 받으면 이 블록은 한 줄로 줄어든다 */
.gnb__logo {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--gnb-logo-w) * var(--u));
  height: calc(var(--gnb-logo-h) * var(--u));
}
.gnb__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
}
.gnb__logo-on-light { opacity: 0; }

/* 어느 쪽을 쓸지는 '섹션 색'이 아니라 '바 배경'을 따라간다.
   섹션 색으로 고르면, 어두운 섹션(02·04) 위에서 바는 흰색인데
   흰 로고가 올라가 흔적만 남는다.
   흰 바(메뉴 열림·첫 화면 벗어남)이거나 밝은 섹션이면 컬러 로고를 쓴다. */
.gnb.is-on-light .gnb__logo-on-dark,
.gnb.is-open .gnb__logo-on-dark,
.gnb.is-stuck .gnb__logo-on-dark { opacity: 0; }
.gnb.is-on-light .gnb__logo-on-light,
.gnb.is-open .gnb__logo-on-light,
.gnb.is-stuck .gnb__logo-on-light { opacity: 1; }

/* 로고와 언어 사이 남는 폭을 모두 차지하고 그 안에서 가운데 정렬한다.
   시안의 대메뉴 시작 x(391)는 이 계산에서 저절로 나온다 */
.gnb__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  height: 100%;
}
.gnb__menu {
  display: flex;
  align-items: stretch;
  gap: calc(var(--gnb-gap) * var(--u));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnb__item {
  position: relative;
  display: flex;
  align-items: center;
}
.gnb__link {
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 700;
  font-size: calc(var(--gnb-font) * var(--u));
  line-height: 1.36;
  color: var(--fg);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}
.gnb__link:hover,
.gnb__item.is-open > .gnb__link,
.gnb__link.is-active { color: var(--fg-point); }

/* 열린 대메뉴 아래의 육각형. 시안 Polygon 1 을 그대로 쓴다 */
.gnb__pointer {
  position: absolute;
  left: 50%;
  bottom: calc(var(--gnb-pointer-bottom) * var(--u));
  width: calc(var(--gnb-pointer-w) * var(--u));
  height: calc(var(--gnb-pointer-h) * var(--u));
  background: url("assets/pointer.svg") center / contain no-repeat;
  /* 시안에서 90° 돌아가 있다 */
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.gnb__item.is-open > .gnb__pointer { opacity: 1; }

/* ---------- 언어 ---------- */
.gnb__lang {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--gnb-lang-gap) * var(--u));
}
.gnb__lang-item {
  font-weight: 600;
  font-size: calc(var(--gnb-lang-font) * var(--u));
  line-height: 1.36;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color .2s ease;
}
.gnb__lang-item:hover,
.gnb__lang-item.is-active { color: var(--fg-point); }
/* 영문·중문 준비 중 토스트 (gnb.js 가 만든다, 2026-10-08) — 화면 아래 가운데, 2.6초 뒤 사라진다 */
.gnb__toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  max-width: calc(100vw - 40px);
  padding: 22px 36px;
  border: 2px solid #2E5AD6;
  border-radius: 16px;
  background: #fff;
  color: #111418;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 0 0 6px rgba(46, 90, 214, .18), 0 16px 40px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.gnb__toast strong { font-weight: 800; color: #2E5AD6; }
.gnb__toast span { font-size: 14px; color: #555; }
.gnb__toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* 뒤 화면을 살짝 어둡게 — 밝은 페이지에서도 눈에 들어오게 */
.gnb__toast-dim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.gnb__toast-dim.is-on { opacity: 1; }

.gnb__lang-sep {
  width: 1px;
  height: calc(var(--gnb-lang-sep-h) * var(--u));
  background: currentColor;
  color: var(--fg-dim);
  opacity: .6;
}

/* ---------- 내려오는 패널 ---------- */
/*
  화면 전체 폭이다. 열려 있을 때만 높이를 갖는다.
  높이를 0 → 실제값으로 바꾸므로 헤더와 패널 사이에 틈이 생기지 않는다.
  덕분에 마우스가 대메뉴에서 패널로 내려갈 때 hover 가 끊기지 않는다.
*/
/* position: absolute 인 이유 —
   흐름 안에 두면 패널이 열릴 때 헤더가 그만큼 높아져 본문 전체가 아래로 밀린다.
   메뉴에 마우스를 올릴 때마다 페이지가 덜컥 내려가게 된다.
   시안에서도 패널은 히어로 위에 얹혀 있다. (기준은 sticky 인 .gnb) */
.gnb__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  overflow: hidden;
  height: 0;
  background: var(--gnb-bg);
  transition: height .3s ease;
}
.gnb.is-open .gnb__panel {
  height: calc(var(--gnb-panel-h) * var(--u));
  border-bottom: 1px solid var(--gnb-line);
}

.gnb__pane {
  display: flex;
  align-items: flex-start;
  height: calc(var(--gnb-panel-h) * var(--u));
  padding: calc(var(--gnb-panel-pad-t) * var(--u)) calc(var(--gnb-pad-x) * var(--u)) 0;
}
.gnb__pane[hidden] { display: none; }

/* 왼쪽 — 열린 대메뉴 이름 */
.gnb__pane-title {
  flex: 0 0 calc(var(--gnb-title-w) * var(--u));
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--gnb-font) * var(--u));
  line-height: 1.36;
  color: var(--gnb-ink);
  white-space: nowrap;
}

/* 가운데 — 세로선 + 세부메뉴.
   가로로 세 개씩 왼쪽에서 오른쪽으로 채우고 넷째부터 다음 줄로 내려간다.
     3개 이하 (사업모델·제품)            → 1줄
     4개 이상 (회사소개 5·장비인프라 6·정보센터 4) → 2줄
   시안(회사소개)은 위→아래 두 개씩 채우는 열 구조였는데, 읽는 순서가 어색해
   가로 구조로 바꿨다 (2026-09 결정). 열 간격 246 은 시안 첫 열(404) → 둘째 열(650) 값이라
   첫 두 열의 자리는 시안과 같다 */
.gnb__sub {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, calc(var(--gnb-col-pitch) * var(--u)));
  row-gap: calc(var(--gnb-sub-row-gap) * var(--u));
  justify-content: start;
  margin: 0;
  padding-left: calc(var(--gnb-cols-pad-l) * var(--u));
  list-style: none;
}
/* 시안 Line 23 — 패널 위에서 27 부터 320 길이 */
.gnb__sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--gnb-rule-top) - var(--gnb-panel-pad-t)) * var(--u));
  width: 1px;
  height: calc(var(--gnb-rule-h) * var(--u));
  background: var(--gnb-line);
}

.gnb__sub-link {
  font-weight: 400;
  font-size: calc(var(--gnb-sub-font) * var(--u));
  line-height: 1.36;
  letter-spacing: -.03em;                     /* 시안 -0.75 / 25 */
  color: var(--gnb-sub-ink);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}
.gnb__sub-link:hover,
.gnb__sub-link.is-active {
  font-weight: 500;
  color: var(--gnb-point);
}

/* 오른쪽 — 메뉴 한 줄 소개 (2026-09-16).
   원래 526 × 300 사진 칸이었다. 메뉴 여섯 중 넷은 맞는 실사가 없어 사진을 걷고
   짧은 소개 문장으로 바꿨다. 폭은 사진 칸(--gnb-fig-w)을 그대로 쓰고,
   첫 세부메뉴 글줄과 같은 높이에서 시작한다. 위에 짧은 포인트 바 하나. */
.gnb__pane-aside {
  flex: 0 0 calc(var(--gnb-fig-w) * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(30 * var(--u));
  /* 아이콘 위끝을 첫 글줄보다 조금 위(사진 칸이 있던 자리 185)에 맞춘다 */
  margin: calc((var(--gnb-fig-top) - var(--gnb-panel-pad-t)) * var(--u)) 0 0 0;
}
/* 육각형(로고 모티프) 테두리 안에 메뉴별 선 아이콘. SVG 는 gnb.js 의 ICONS 가 넣는다 */
.gnb__pane-icon {
  flex: 0 0 calc(124 * var(--u));
  width: calc(124 * var(--u));
  height: calc(124 * var(--u));
  color: var(--gnb-point);
}
.gnb__pane-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gnb__pane-icon .ico-hex { stroke: var(--gnb-line); }
.gnb__pane-icon .ico-hex-fill { fill: #f3f7fb; }
/* 패널이 열릴 때 아이콘 선이 그려지듯 나타난다 */
.gnb__pane-icon .ico-line {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: gnbIcoDraw .9s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}
@keyframes gnbIcoDraw { to { stroke-dashoffset: 0; } }

.gnb__pane-text { flex: 1 1 auto; min-width: 0; padding-top: calc(20 * var(--u)); }
.gnb__pane-en {
  display: block;
  margin-bottom: calc(10 * var(--u));
  font-weight: 700;
  font-size: calc(13 * var(--u));
  letter-spacing: .18em;
  color: var(--gnb-point);
}
.gnb__pane-desc {
  margin: 0;
  font-weight: 400;
  font-size: calc(21 * var(--u));
  line-height: 1.6;
  letter-spacing: -.02em;
  color: #6b6b6b;
  word-break: keep-all;
}

/* ============================================================
   모바일
   시안: 같은 파일 node 2048:4743 (375 아트보드)

   데스크톱과 기준 폭이 다르다. --u 를 375 기준으로 바꾸면
   아래 calc(N * var(--u)) 들이 모두 모바일 실측값으로 동작한다.
   ============================================================ */
.gnb__toggle,
.gnb__lang-mobile,
.gnb__scrim,
.gnb__drawer { display: none; }

@media (max-width: 768px) {
  :root {
    --u: min(calc(100vw / 375), 1px);

    /* --- 상단 바 (시안 375 기준) --- */
    --gnb-h: 104;            /* 로고·언어·햄버거가 모두 y=52 를 중심으로 놓인다 */
    --gnb-pad-x: 16;
    --gnb-logo-w: 89;
    --gnb-logo-h: 24;
    --gnb-pill-w: 60;
    --gnb-pill-h: 30;
    --gnb-pill-font: 12;
    --gnb-burger: 32;

    /* --- 서랍 --- */
    --gnb-drawer-w: 278;
    --gnb-drawer-pad: 24;    /* 구분선 x=121 → 서랍 왼쪽(97)에서 24 */
    --gnb-drawer-logo-w: 75;
    --gnb-drawer-logo-h: 21;
    --gnb-drawer-head-h: 104;
    --gnb-close: 20;
    --gnb-m-font: 20;        /* 대메뉴 Bold 20 */
    --gnb-m-gap: 67;         /* 항목 사이 (348 → 415 → 482 …) */
    --gnb-m-sub-font: 17;    /* 세부메뉴 Medium 17 */
    --gnb-m-sub-gap: 33;     /* 158 → 191 → 224 → 257 */
    --gnb-m-sub-indent: 11;  /* 세부메뉴가 대메뉴보다 안쪽으로 */
  }

  /* 데스크톱 전용 요소는 접는다 */
  .gnb__nav,
  .gnb__lang,
  .gnb__panel { display: none; }

  .gnb__toggle { display: block; }
  .gnb__lang-mobile { display: block; position: relative; margin-left: auto; }

  .gnb__bar-inner { gap: calc(7 * var(--u)); }

  /* --- 언어 알약 --- */
  .gnb__lang-pill {
    align-items: center;
    justify-content: center;
    gap: calc(5 * var(--u));
    flex: 0 0 auto;
    width: calc(var(--gnb-pill-w) * var(--u));
    height: calc(var(--gnb-pill-h) * var(--u));
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    color: var(--fg);
    font-family: inherit;
    font-weight: 600;
    font-size: calc(var(--gnb-pill-font) * var(--u));
    cursor: pointer;
  }
  .gnb__caret {
    width: calc(7 * var(--u));
    height: calc(5 * var(--u));
    background: currentColor;
    -webkit-mask: url("assets/caret.svg") center / contain no-repeat;
    mask: url("assets/caret.svg") center / contain no-repeat;
    transform: rotate(180deg);   /* 시안에서 뒤집혀 아래를 가리킨다 */
    transition: transform .2s ease;
  }
  .gnb__lang-pill[aria-expanded="true"] .gnb__caret { transform: rotate(0deg); }

  /* 펼친 목록 — 시안에는 없다. 알약 모양과 색을 그대로 이어 만든 것이다 */
  .gnb__lang-list {
    position: absolute;
    right: 0;
    top: calc(100% + 6 * var(--u));
    z-index: 3;
    min-width: calc(var(--gnb-pill-w) * var(--u));
    margin: 0;
    padding: calc(4 * var(--u)) 0;
    border-radius: calc(10 * var(--u));
    background: var(--gnb-bg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-4 * var(--u)));
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .gnb__lang-pill[aria-expanded="true"] + .gnb__lang-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .gnb__lang-list a {
    display: block;
    padding: calc(7 * var(--u)) calc(14 * var(--u));
    font-weight: 600;
    font-size: calc(var(--gnb-pill-font) * var(--u));
    line-height: 1.4;
    text-align: center;
    color: var(--gnb-sub-ink);
    text-decoration: none;
  }
  .gnb__lang-list a.is-active { color: var(--gnb-point); }

  /* --- 햄버거 --- */
  .gnb__toggle {
    flex: 0 0 auto;
    width: calc(var(--gnb-burger) * var(--u));
    height: calc(var(--gnb-burger) * var(--u));
    padding: 0;
    border: 0;
    background: var(--fg);
    -webkit-mask: url("assets/menu.svg") center / contain no-repeat;
    mask: url("assets/menu.svg") center / contain no-repeat;
    cursor: pointer;
  }

  /* --- 서랍 --- */
  /* 닫혀 있을 때도 화면을 덮고 있으므로 pointer-events 를 꺼야 한다.
     안 그러면 투명한 덮개가 햄버거 클릭을 가로챈다.
     ([hidden] 은 아래 display 규칙에 밀려 무력화되므로 CSS 로만 제어한다) */
  .gnb__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .gnb.is-drawer-open .gnb__scrim { opacity: 1; pointer-events: auto; }

  .gnb__drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    width: calc(var(--gnb-drawer-w) * var(--u));
    height: 100dvh;
    padding: 0 calc(var(--gnb-drawer-pad) * var(--u));
    background: var(--gnb-bg);
    overflow-y: auto;
    /* 닫혀 있을 때는 오른쪽 밖에 대기한다 */
    transform: translateX(100%);
    /* 닫혀 있는 동안에는 Tab 순서에서도 빠진다 */
    visibility: hidden;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .35s;
  }
  .gnb.is-drawer-open .gnb__drawer {
    transform: none;
    visibility: visible;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }

  .gnb__drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--gnb-drawer-head-h) * var(--u));
  }
  .gnb__drawer-logo {
    display: block;
    width: calc(var(--gnb-drawer-logo-w) * var(--u));
    height: calc(var(--gnb-drawer-logo-h) * var(--u));
  }
  .gnb__drawer-logo img { width: 100%; height: 100%; object-fit: contain; }
  .gnb__drawer-close {
    width: calc(var(--gnb-close) * var(--u));
    height: calc(var(--gnb-close) * var(--u));
    padding: 0;
    border: 0;
    background: var(--gnb-ink);
    -webkit-mask: url("assets/close.svg") center / contain no-repeat;
    mask: url("assets/close.svg") center / contain no-repeat;
    cursor: pointer;
  }

  .gnb__drawer-list { margin: 0; padding: 0; list-style: none; }

  /* 첫 항목 말고는 위에 구분선이 온다 (시안 Line 67, 폭 230 = 서랍 안쪽 폭) */
  .gnb__drawer-item + .gnb__drawer-item { border-top: 1px solid var(--gnb-line); }

  .gnb__drawer-link {
    display: block;
    width: 100%;
    padding: calc(20 * var(--u)) 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-weight: 700;
    font-size: calc(var(--gnb-m-font) * var(--u));
    line-height: 1.35;
    text-align: left;
    color: var(--gnb-ink);
    cursor: pointer;
  }
  .gnb__drawer-item.is-open > .gnb__drawer-link { color: var(--gnb-point); }

  /* 세부메뉴 — 열릴 때만 높이를 갖는다 */
  .gnb__drawer-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }
  .gnb__drawer-item.is-open > .gnb__drawer-sub { grid-template-rows: 1fr; }
  .gnb__drawer-sub > ul {
    display: flex;
    flex-direction: column;
    gap: calc((var(--gnb-m-sub-gap) - var(--gnb-m-sub-font)) * var(--u));
    margin: 0;
    padding: 0 0 0 calc(var(--gnb-m-sub-indent) * var(--u));
    overflow: hidden;
    list-style: none;
  }
  .gnb__drawer-item.is-open > .gnb__drawer-sub > ul { padding-bottom: calc(20 * var(--u)); }
  .gnb__drawer-sub a {
    font-weight: 500;
    font-size: calc(var(--gnb-m-sub-font) * var(--u));
    line-height: 1.35;
    color: var(--gnb-sub-ink);
    text-decoration: none;
  }
  .gnb__drawer-sub a.is-active { color: var(--gnb-point); }

  /* 서랍이 열려 있는 동안에는 헤더를 숨기지 않는다 */
  .gnb.is-drawer-open { transform: none; }
}

/* ---------- 키보드 ---------- */
.gnb__drawer:focus { outline: none; }
:where(.gnb) a:focus-visible,
:where(.gnb) button:focus-visible {
  outline: 2px solid var(--gnb-point);
  outline-offset: 3px;
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gnb,
  .gnb__bar,
  .gnb__logo img,
  .gnb__panel,
  .gnb__pointer,
  .gnb__link,
  .gnb__sub-link,
  .gnb__lang-item { transition: none; }
}