@layer reset, tokens, typography, layout, fluid, components, motion, dlock;
:root {
  --c-ink: #222;
  --c-ink-2: #444;
  --c-ink-3: #666;
  --c-muted: #acacac;
  --c-line: #eee;
  --c-navy: #0a2960;
  --c-blue: #00399d;
  --c-blue-2: #0249c7;
  --c-tag-bg: #ebf2ff;
  --c-tag-line: #d8e2f5;
  --c-footer: #111;
  --c-footer-ink: #f5f5f2;
  --c-footer-sub: #8f8f8f;
  --container: 1600px;
  --gutter: clamp(20px, 5.2083vw, 160px);
  --header-h: clamp(72px, 6.7708vw, 130px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --fs-hero: clamp(34px, 3.6458vw, 70px);
  --fs-h2: clamp(30px, 3.125vw, 60px);
  --fs-eyebrow: clamp(15px, 1.0417vw, 20px);
  --fs-body: clamp(15px, .9375vw, 18px);
  /* z-index 층 — 헤더·전체 메뉴는 레이어/모달 팝업을 뺀 모든 요소 위(정책 A26). 콘텐츠는 100 미만만 쓴다 */
  --z-content-max: 99;
  --z-header: 1000;
  --z-gnb: 1000;
  --z-skip: 1100;
  --z-layer: 2000;
  --z-modal: 3000;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--c-ink);
  background: #fff;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--c-blue-2); outline-offset: 3px; }
/* 고정 헤더 밑으로 초점·스크롤 대상이 숨지 않게(WCAG 2.4.11) */
:where(a, button, [tabindex]) { scroll-margin-block: calc(var(--header-h) + 12px) 12px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: var(--z-skip);
  padding: 10px 16px; background: #000; color: #fff; border-radius: 6px;
  transition: top .2s;
}
.skip:focus { top: 16px; }
.skip:hover { text-decoration: underline; text-underline-offset: 4px; }

.eyebrow {
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  line-height: 1;
}

/* header */
.header {
  position: fixed; left: 0; top: 0; z-index: var(--z-header); width: 100%;
  color: #fff;
}
/* ★ 전체 메뉴(.gnb · position:fixed)의 조상에는 transform·filter·backdrop-filter 를 걸지 않는다 — 걸리는 순간 fixed 의
   기준이 뷰포트가 아니라 그 조상 상자가 되어 메뉴가 헤더 높이만큼만 그려진다(실측 2026-09-28 · 모바일 About 구간).
   그래서 배경·블러는 메뉴의 **형제**인 .header__bar 가 맡고, .gnb 는 헤더 직계다. */
.header__bar {
  position: relative; z-index: 1;
  transition: background-color .35s, backdrop-filter .35s;
}

.header__inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(24px, 2.6042vw, 50px) 0;
  transition: padding .35s;
}
.header__logo { display: block; width: clamp(150px, 12.6042vw, 242px); padding: 6px 0; margin: -6px 0; transition: opacity .3s; }
.header__logo:hover, .header__logo:focus-visible { opacity: .8; }
.header__logo img { width: 100%; height: auto; }
/* PC — 메뉴는 헤더 안 오른쪽(시안 x=781~1600) · 바와 같은 위 여백 */
@media (min-width: 1025px) {
  .gnb { position: absolute; top: clamp(24px, 2.6042vw, 50px); right: max(var(--gutter), (100% - var(--container)) / 2); z-index: 2; transition: top .35s; }
  .header.is-scrolled .gnb { top: clamp(18px, 1.3vw, 26px); }
}
.gnb__list { display: flex; gap: clamp(28px, 3.6458vw, 70px); }
.gnb__link {
  position: relative; display: block;
  font-weight: 600; font-size: clamp(16px, 1.1458vw, 22px); line-height: 1; white-space: nowrap;
  padding-bottom: 8px;
  transition: color .3s;
}
.gnb__link:hover, .gnb__link:focus-visible { color: #c9d9f7; }
.gnb__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .4s var(--ease-out);
}
/* 밑줄은 시안이 그린 **호버 상태**다(발주처 확인 2026-09-29) — 현재 구역 표시(aria-current)에 재사용하지 않는다(A27) */
.gnb__link:hover::after, .gnb__link:focus-visible::after {
  transform: scaleX(1); transform-origin: left center;
}
.header__menu { display: none; }
.header.is-scrolled .header__bar {
  background: rgba(10, 41, 96, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header.is-scrolled .header__inner { padding: clamp(18px, 1.3vw, 26px) 0; }

/* footer */
.footer {
  position: relative;
  background: var(--c-footer);
  color: var(--c-footer-ink);
  padding: clamp(60px, 5.2083vw, 100px) 0 clamp(32px, 2.2917vw, 44px);
}
.footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: 0 auto;
  padding-bottom: 50px;
}
.footer__statement { font-weight: 700; font-size: clamp(26px, 2.6042vw, 50px); line-height: 1.4; }
.footer__meta { display: flex; flex-direction: column; gap: 70px; align-items: flex-end; text-align: right; }
.footer__info { display: flex; flex-direction: column; gap: 16px; font-weight: 500; font-size: 15px; line-height: 1; color: var(--c-footer-sub); }
.footer__copy { font-family: "Inter", "Pretendard", sans-serif; font-weight: 500; font-size: 14px; line-height: 1; color: #808080; }
.footer__top {
  display: block; width: max-content; margin: clamp(16px, 1.4063vw, 27px) auto 0;
  font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--c-footer-ink);
  padding: 6px 4px;
  transition: color .3s;
}
.footer__top:hover, .footer__top:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 1024px) {
  .gnb {
    /* 헤더(z: var(--z-header)) 문맥 안 — 바(z 2)가 메뉴(z 1) 위. 문서 전체에 대한 층은 헤더가 정한다 */
    position: fixed; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-navy);
    visibility: hidden; opacity: 0;
    transition: opacity .35s, visibility 0s .35s;
  }
  .gnb__list { flex-direction: column; align-items: center; gap: 36px; }
  .gnb__link { font-size: 24px; }
  .header.is-open .gnb { visibility: visible; opacity: 1; transition: opacity .35s; }
  /* 열린 메뉴 위에 바(로고·닫기 버튼)가 온다 — 바는 메뉴의 형제라 z 로 정한다 */
  .header.is-open .header__bar { z-index: 2; background: var(--c-navy); backdrop-filter: none; }
  .header__menu {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 40px; height: 40px; margin: -6px -6px 0 0; padding: 8px;
  }
  .header__menu span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s; }
  .header__menu:hover span:nth-child(2) { transform: scaleX(.6); }
  .header.is-open .header__menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header.is-open .header__menu span:nth-child(2) { opacity: 0; }
  .header.is-open .header__menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__meta { align-items: flex-start; text-align: left; gap: 32px; }
}
@media (max-width: 600px) {
  .footer__info { font-size: 13px; line-height: 1.5; gap: 6px; }
  .footer__info span { white-space: normal; }
}