/* labs.css — NEXA LABS 디자인 시스템 코어 (docs/04 단일 원본 구현).
   :root 토큰(네이비 램프 + 검정 글자 램프 — pages/news/careers.css가 var()로 참조) +
   리셋·베이스 타이포·컨테이너·GNB·드롭다운·햄버거·푸터·버튼 위계·스킵 링크·토스트·맨 위로·
   유틸리티(.reveal)·에러 페이지(er-)·홈(hm-)·prefers-reduced-motion·반응형 375/768/1024/1440.
   그라데이션 금지 — 네이비 면 + 검정 글자 2계열만(docs/04 §1·§2). 수정 시 참조 ?v= +1 필수. */

/* ══ 1. 폰트 — Pretendard Variable 셀프호스팅 (docs/04 §3-1) ══ */
@font-face {
    font-family: 'Pretendard';
    src: url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

/* ══ 2. :root 토큰 (docs/04 §2-1·§3-2·§4) ══ */
:root {
    /* 네이비 램프 — 면·선·버튼·아이콘 전용 */
    --primary-950: #04082e;
    --primary-900: #050b40;
    --primary: #070f54;
    --primary-700: #101a6e;
    --primary-600: #1c2a8a;
    --primary-300: #9aa1d0;
    --primary-100: #dfe2f2;
    --primary-50: #f2f3fa;

    /* 검정 램프 — 글자·숫자 전용 (확정값) */
    --ink-900: #000000;
    --ink-700: #3a3a3a;
    --ink-500: #6b7280;

    /* 배경·보더·상태 */
    --bg: #ffffff;
    --bg-soft: var(--primary-50);
    --border: #e3e6f0;
    --on-primary: #ffffff;
    --focus-ring: var(--primary-600);
    --danger: #c62828;
    --success: #1a7f37;
    --warning: #b45309;

    /* 히어로 다크 스테이지 (홈 전용 — docs/04 §2-4) */
    --stage-bg: #04082e;
    --stage-particle-core: #ffffff;
    --stage-particle-mid: #c6cdf0;
    --stage-particle-far: #8f99dd;
    --stage-text: #ffffff;
    --stage-text-sub: #c6cdf0;

    /* 타이포 스케일 — 데스크톱 (docs/04 §3-2, 모바일은 §12 미디어쿼리) */
    --fs-display: 56px;
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-caption: 14px;
    --fs-label: 13px;

    /* 스페이싱 4px 배수 (docs/04 §4-1) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-24: 96px;
    --sp-32: 128px;

    /* 라운드 (docs/04 §4-2) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;

    /* 레이아웃 */
    --container-max: 1200px;
    --gnb-h: 72px;
}

/* ══ 3. 리셋 ══ */
*, *::before, *::after { box-sizing: border-box; }
/* hidden 속성이 항상 이긴다(2026-08-10 사고) — display를 지정한 클래스(.pg-map-pending 등)는
   브라우저 기본 [hidden]{display:none} 보다 우선순위가 높아, JS가 숨겨 둔 폴백 패널이
   그대로 보였다(오시는 길: 지도가 떴는데 '지도를 불러오지 못했습니다'가 함께 노출). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: Pretendard, -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ink-700);
    background: var(--bg);
    word-break: keep-all;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
input, select, textarea { font: inherit; }

/* 포커스 링 — 전 인터랙티브 요소, 제거 금지 (docs/04 §7) */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
/* 네이비 면(푸터·다크 스테이지) 위는 흰색 링 */
.site-footer :focus-visible,
.hm-hero :focus-visible {
    outline-color: #ffffff;
}

/* ══ 4. 베이스 타이포 (docs/04 §3-2) ══ */
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink-900); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-900); }

/* ══ 5. 컨테이너 (docs/04 §4-2) ══ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}

/* ══ 6. 스킵 링크 (docs/04 §7) ══ */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    z-index: 200;
    padding: var(--sp-3) var(--sp-4);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top 150ms ease;
}
.skip-link:focus-visible { top: 0; outline-color: #ffffff; outline-offset: -4px; }

/* ══ 7. 버튼 위계 (docs/04 §5-3) — lg 52 / md 44 / sm 36 ══ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-6);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn-lg { min-height: 52px; padding: 0 var(--sp-8); }
.btn-sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-caption); }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-700); }
.btn-primary:active { background: var(--primary-900); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--primary-300); color: #ffffff; cursor: default; }

.btn-secondary {
    background: var(--bg);
    border: 1.5px solid var(--primary);
    color: var(--ink-900);
}
.btn-secondary:hover { background: var(--primary-50); }
.btn-secondary:active { background: var(--primary-100); }
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"] { border-color: var(--primary-300); color: var(--ink-500); cursor: default; }

.btn-text { color: var(--ink-700); text-decoration: none; background: none; }
.btn-text:hover { text-decoration: underline; text-decoration-color: var(--primary-600); }
.btn-text:active { color: var(--ink-900); }

/* 히어로 전용 Stage CTA (docs/04 §5-3) — 흰 면·글래스 알약, 그라데이션 없음 */
.btn-stage-solid {
    background: #ffffff;
    color: var(--primary);
    border-radius: var(--radius-pill);
}
.btn-stage-solid:hover { background: var(--primary-100); }
.btn-stage-glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: var(--radius-pill);
}
.btn-stage-glass:hover { background: rgba(255, 255, 255, 0.14); }
.btn-stage-glass:active { background: rgba(255, 255, 255, 0.18); }

/* ══ 8. GNB (docs/04 §5-1·§5-2, docs/03 §2) ══ */
.gnb {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
/* 3열 그리드 — 로고 좌 / 카테고리 중앙(2026-08-04 사용자 지시) / 유틸 우 */
.gnb-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
    height: var(--gnb-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-8);
}
.gnb-logo { justify-self: start; }
.gnb-util { justify-self: end; }

/* 로고 — 웹 헤더 락업(정사각 심벌+NEXA LABS, 아웃라인 SVG 인라인, fragments/logo).
   에셋 설계 치수 40px 기준 — currentColor로 색을 물려준다 */
.gnb-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: var(--ink-900, #000000);
}
.gnb-logo svg { display: block; height: 40px; width: auto; }

.gnb-list {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.gnb-item { position: relative; }

/* 대분류 — 링크가 아닌 버튼(하위만 이동, docs/03 §2-2) */
.gnb-top {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink-900);
    position: relative;
}
/* 현재 대분류 인디케이터 — 글자색 변경 금지, 2px 바로만 (docs/04 §5-1) */
.gnb-item.is-active .gnb-top::after {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 4px;
    height: 2px;
    background: var(--primary);
}
.gnb-top .gnb-chevron { transition: transform 200ms ease; }
.gnb-item.is-open .gnb-top .gnb-chevron { transform: rotate(180deg); }

/* 드롭다운 패널 (docs/04 §5-2) — hover·focus-within·JS(.is-open) 3경로 */
.gnb-dd {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    padding: var(--sp-2) 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(7, 15, 84, 0.08);
    display: none;
}
.gnb-item:hover .gnb-dd,
.gnb-item:focus-within .gnb-dd,
.gnb-item.is-open .gnb-dd { display: block; }
.gnb-dd a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-body);
    color: var(--ink-700);
    text-decoration: none;
    border-left: 2px solid transparent;
}
.gnb-dd a:hover, .gnb-dd a:focus-visible { background: var(--primary-50); color: var(--ink-900); }
.gnb-dd a.is-current { border-left-color: var(--primary); color: var(--ink-900); font-weight: 600; }

/* 유틸리티 — 언어 토글 (docs/06 §7): 44px 타깃 */
.gnb-util { display: flex; align-items: center; gap: var(--sp-2); }
.gnb-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.gnb-lang:hover { background: var(--primary-50); color: var(--ink-900); }

/* 햄버거 — 모바일 전용 노출 (≤768px, §12) */
.gnb-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ink-900);
    border-radius: var(--radius-sm);
}
.gnb-burger .ic-close { display: none; }
.gnb-burger[aria-expanded="true"] .ic-menu { display: none; }
.gnb-burger[aria-expanded="true"] .ic-close { display: block; }

/* ══ 9. 푸터 (docs/04 §5-7, docs/03 §5) ══ */
/* 본문 하단 여백은 각 페이지 컨테이너(padding-bottom)가 담당 — 푸터 자체 여백 없음
   (홈 CTA 밴드(네이비)와 푸터가 이어지는 구성 대응) */
.site-footer {
    background: var(--primary);
    color: var(--on-primary);
}
.site-footer a { color: var(--on-primary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-16) var(--sp-6) var(--sp-8);
}
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-12);
    align-items: flex-start;
}
.footer-corp { flex: 1 1 380px; }
.footer-group { flex: 0 1 auto; min-width: 140px; }
.footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--sp-4);
    color: var(--on-primary, #ffffff); /* 네이비 면 위 흰 워드마크 */
}
.footer-logo svg { display: block; height: 36px; width: auto; }
.footer-corp-list { margin: 0; }
.footer-corp-list div { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.footer-corp-list dt {
    flex: 0 0 auto;
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.72);
}
.footer-corp-list dd {
    margin: 0;
    font-size: var(--fs-caption);
    color: rgba(255, 255, 255, 0.72);
}
.footer-corp-list dd a { color: rgba(255, 255, 255, 0.92); }
.footer-group-title {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}
.footer-links li { margin-bottom: var(--sp-2); }
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: var(--fs-caption);
}
.footer-top-wrap { margin-left: auto; }
.footer-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    color: var(--on-primary);
    transition: background-color 200ms ease;
}
.footer-top:hover { background: rgba(255, 255, 255, 0.12); }

.footer-bottom {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-copyright { font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.72); }

/* ══ 10. 토스트 (site.js — 복사 완료 등) ══ */
.labs-toast {
    position: fixed;
    left: 50%;
    bottom: var(--sp-8);
    transform: translateX(-50%);
    z-index: 300;
    max-width: calc(100vw - 32px);
    padding: var(--sp-3) var(--sp-6);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--fs-caption);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(7, 15, 84, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.labs-toast.is-visible { opacity: 1; }

/* ══ 11. 유틸리티 ══ */
/* .reveal — 초기 상태를 CSS로 숨기지 않는다(JS 실패 시 본문 영구 비표시 방지 — docs/04 §6-2 주의).
   gsap 있으면 site.js가 gsap.from()으로 등장 처리, 없으면 그대로 가시 상태 유지. */
.reveal { will-change: opacity, transform; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ══ 12. 에러 페이지 (er- / docs/03 §4-12 — 가볍게) ══ */
.er-main { background: var(--bg); }
.er-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-24) var(--sp-6);
    text-align: center;
}
.er-code {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--primary);
}
.er-title { margin-top: var(--sp-4); }
.er-body {
    margin: var(--sp-4) auto 0;
    max-width: 480px;
    color: var(--ink-700);
}
.er-actions {
    margin-top: var(--sp-8);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* ══ 13. 홈 (hm- / docs/03 §4-1) ══ */
/* (a) 히어로 — 풀블리드 다크 네이비 스테이지 단색(그라데이션 금지). WF2 3D가 마커 안을 교체 */
.hm-hero {
    background: var(--stage-bg);
    color: var(--stage-text);
}
.hm-hero-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-32) var(--sp-6);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
/* 배지는 2026-08-04 지시로 제거 — 타이틀이 첫 요소 */
.hm-hero-title {
    max-width: 720px;
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--stage-text);
}
.hm-hero-sub {
    margin-top: var(--sp-6);
    max-width: 620px;
    font-size: var(--fs-body-lg);
    line-height: 1.7;
    color: var(--stage-text-sub);
}
.hm-hero-actions {
    margin-top: var(--sp-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* (b) 회사 하이라이트 3카드 */
.hm-section { padding: var(--sp-24) 0; }
.hm-section-title { margin-bottom: var(--sp-8); }
.hm-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
.hm-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.hm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(7, 15, 84, 0.10);
}
.hm-card-icon { color: var(--primary); margin-bottom: var(--sp-4); }
.hm-card-title { color: var(--ink-900); }
.hm-card-desc {
    margin-top: var(--sp-3);
    font-size: var(--fs-body);
    color: var(--ink-700);
    flex: 1 1 auto;
}
.hm-card-more {
    margin-top: var(--sp-4);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--ink-900);
}
.hm-card:hover .hm-card-more { text-decoration: underline; text-decoration-color: var(--primary-600); }

/* (c) 최신 소식 — fragments/news :: homeNews(nw- 스타일은 news.css 소유) */
.hm-news { padding-bottom: var(--sp-24); }

/* (d) 하단 CTA 밴드 — 네이비 단색 면 */
.hm-cta {
    background: var(--primary);
    color: var(--on-primary);
}
.hm-cta-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-16) var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
}
.hm-cta-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--on-primary);
}
.hm-cta-sub { margin-top: var(--sp-2); font-size: var(--fs-body); color: rgba(255, 255, 255, 0.72); }
.hm-cta .btn-stage-solid { flex: 0 0 auto; }

/* ══ 14. 모션 감소 (docs/04 §6-3) ══ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .hm-card:hover { transform: none; }
}

/* ══ 15. 반응형 (docs/04 §8 — 375/768/1024/1440) ══ */
/* 태블릿 이하(≤1023px): 하이라이트 2열 */
@media (max-width: 1023px) {
    .hm-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 모바일(≤768px): 햄버거 패널 + 타이포 모바일값 (docs/04 §3-2) */
@media (max-width: 768px) {
    :root {
        --fs-display: 34px;
        --fs-h1: 28px;
        --fs-h2: 22px;
        --fs-h3: 19px;
        --fs-body-lg: 17px;
        --gnb-h: 56px;
    }
    .container { padding: 0 var(--sp-4); }
    /* 모바일은 중앙 내비가 드로어로 빠지므로 데스크톱의 대칭 1fr(내비 중앙정렬용)이 불필요.
       1fr 트랙이 락업 로고를 111px로 눌러 축소 렌더되던 문제 — auto로 원치수 보장 */
    .gnb-inner { padding: 0 var(--sp-4); gap: var(--sp-3); grid-template-columns: auto 1fr auto; }
    .gnb-burger { display: inline-flex; }
    .gnb-logo svg { height: 32px; } /* 56px 모바일 바 + 375 폭(락업 149px)에 맞춘 축소 */

    /* 햄버거 패널 — 헤더 아래 전체 드로어, 대분류 아코디언 (docs/03 §2-3) */
    .gnb-nav {
        display: none;
        position: fixed;
        top: var(--gnb-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: var(--bg);
        overflow-y: auto;
        padding: var(--sp-4) var(--sp-4) var(--sp-16);
    }
    .gnb.is-open .gnb-nav { display: block; }
    .gnb-list { flex-direction: column; align-items: stretch; gap: 0; }
    .gnb-item { border-bottom: 1px solid var(--border); }
    .gnb-top {
        width: 100%;
        justify-content: space-between;
        min-height: 52px;
        padding: 0 var(--sp-2);
        font-size: var(--fs-body-lg);
    }
    .gnb-item.is-active .gnb-top::after { display: none; }
    .gnb-item.is-active .gnb-top { color: var(--primary); }

    /* 모바일 드롭다운 = 아코디언: hover·focus-within 무시, JS .is-open만 */
    .gnb-dd {
        position: static;
        min-width: 0;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 var(--sp-2);
    }
    .gnb-item:hover .gnb-dd,
    .gnb-item:focus-within .gnb-dd { display: none; }
    .gnb-item.is-open .gnb-dd { display: block; }
    .gnb-dd a { min-height: 44px; padding: 0 var(--sp-4); color: var(--ink-700); }

    body.gnb-locked { overflow: hidden; }

    /* 섹션 패딩 축소 (docs/04 §8) */
    .hm-hero-inner { padding: var(--sp-16) var(--sp-4); min-height: 480px; }
    .hm-section { padding: var(--sp-16) 0; }
    .hm-news { padding-bottom: var(--sp-16); }
    .hm-cards { grid-template-columns: 1fr; }
    .hm-cta-inner { padding: var(--sp-12) var(--sp-4); }
    .footer-inner { padding: var(--sp-12) var(--sp-4) var(--sp-6); }
    .footer-grid { gap: var(--sp-8); }
    .er-wrap { padding: var(--sp-16) var(--sp-4); }
}