/* ==========================================================================
   노을상사 기업소개 — main.css
   스마일게이트 스타일: 풀스크린 섹션 + 스크롤 리빌 + 미니멀 타이포
   ========================================================================== */

:root {
  --red: #FF0019;
  --red-dark: #cc0014;
  --black: #111111;
  --gray: #888888;
  --gray-light: #f4f6f9;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* 첫 번째 → 두 번째 섹션 스냅은 CSS scroll-snap이 아니라 JS로 그 구간에서만
   동작하게 처리한다 (main.js 참고) — 그 아래(세 번째 섹션~푸터)는 완전히
   자연스러운 스크롤로 두기 위함. */

html {
  /* body의 overflow-x:hidden만으로는 일부 모바일 브라우저(특히
     iOS Safari)의 러버밴드 오버스크롤 등에서 화면 밖으로 삐져나간
     장식용 이미지 때문에 가로로 살짝 튕기는 경우가 있었다(실제 겪음
     — MISSION 섹션 이미지가 화면 밖으로 나가게 했더니 가로 스크롤이
     생김). html에도 이중으로 막아둔다. */
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, sans-serif;
  color: var(--black);
  background: #fff;
  overflow-x: hidden;
  width: 100%;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ── HEADER (투명, 히어로 위에 고정) ── */
.na-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
  transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}
.na-header.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
}
.na-header.nav-hot {
  background: rgba(255,255,255,1);
  backdrop-filter: blur(8px);
}
/* 드롭다운이 열렸을 때 그 아래 페이지 콘텐츠를 어둡게 눌러줘서
   드롭다운에 시선이 집중되게 하는 오버레이 (헤더보다 한 단계 아래) */
.na-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.na-page-overlay.is-active {
  opacity: 1;
  transition-delay: 0.4s; /* 드롭다운이 실제로 나타나는 시점과 맞춤 */
}

/* ── 쇼핑몰 바로가기: 오른쪽에서 슬라이드되는 사이드바 ── */
.na-cta-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.na-cta-sidebar-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.na-cta-sidebar {
  --na-cta-sidebar-pad: clamp(1.5rem, 4vw, 2.25rem);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 160;
  width: min(22rem, 85vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 1.75rem var(--na-cta-sidebar-pad);
  box-shadow: -12px 0 32px rgba(0,0,0,.14);
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
.na-cta-sidebar.is-active {
  transform: translateX(0);
}
.na-cta-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.na-cta-sidebar-close {
  display: flex;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
}
.na-cta-sidebar-close:hover { color: var(--red); }
.na-cta-sidebar-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #999;
}
.na-cta-sidebar-links {
  display: flex;
  flex-direction: column;
  /* 사이드바 좌우 패딩을 뚫고 나가서 선이 끊김 없이 가장자리까지 이어지게 함 */
  margin-inline: calc(-1 * var(--na-cta-sidebar-pad));
}
.na-cta-sidebar-links a {
  display: block;
  padding-block: 2rem;
  padding-inline: var(--na-cta-sidebar-pad);
  border-bottom: 1px solid #e0e0e0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--black);
  transition: color 0.15s ease;
}
.na-cta-sidebar-links a:first-child {
  border-top: 1px solid #e0e0e0;
}
.na-cta-sidebar-links a:hover { color: var(--red); }

/* ── 모바일 햄버거 버튼 (데스크톱에서는 nav가 대신 보이므로 숨김) ── */
.na-mobile-menu-btn {
  display: none;
  padding: 0.5rem;
  margin: -0.5rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.na-header.scrolled .na-mobile-menu-btn,
.na-header.nav-hot .na-mobile-menu-btn {
  color: var(--black);
}

/* ── 모바일 메뉴 (왼쪽에서 슬라이드, 사이드바와 같은 톤) ── */
.na-mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.na-mobile-menu-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.na-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 160;
  width: min(20rem, 82vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 1.75rem 1.5rem;
  box-shadow: 12px 0 32px rgba(0,0,0,.14);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}
.na-mobile-menu.is-active {
  transform: translateX(0);
}
.na-mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2rem;
}
.na-mobile-menu-close {
  display: flex;
  padding: 0.5rem;
  margin: -0.5rem 0 -0.5rem -0.5rem;
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
}
.na-mobile-menu-close:hover { color: var(--red); }
.na-mobile-menu-links {
  display: flex;
  flex-direction: column;
  margin-inline: -1.5rem;
  overflow-y: auto;
}
/* 요청에 따라 항목 사이 회색 경계선은 두지 않는다 (다른 메뉴는 그대로) */
.na-mobile-acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.375rem;
  padding-inline: 1.5rem;
  background: none;
  border: none;
  font: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--black);
  cursor: pointer;
  transition: color 0.15s ease;
}
.na-mobile-acc-q:hover { color: var(--red); }
.na-mobile-acc-arrow { flex-shrink: 0; width: 14px; height: 14px; transition: transform 0.3s ease; }
.na-mobile-acc-item.is-open .na-mobile-acc-arrow { transform: rotate(180deg); }
.na-mobile-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.na-mobile-acc-item.is-open .na-mobile-acc-panel {
  grid-template-rows: 1fr;
}
.na-mobile-acc-panel-inner {
  overflow: hidden;
}
.na-mobile-acc-panel-inner a {
  display: block;
  padding-block: 0.875rem;
  padding-inline: 2.25rem 1.5rem;
  font-size: 1.0625rem;
  color: #666;
  transition: color 0.15s ease;
}
.na-mobile-acc-panel-inner a:hover { color: var(--red); }

/* ── 레이어 팝업 (개인정보처리방침 / 이용약관 / 오시는 길) ── */
.na-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.na-modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
.na-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 210;
  width: min(34rem, calc(100vw - 2.5rem));
  max-height: min(38rem, calc(100vh - 4rem));
  overflow-y: auto;
  background: #fff;
  border-radius: 1rem;
  padding: clamp(2rem, 5vw, 3rem);
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -48%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.na-modal.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.na-modal-close {
  position: sticky;
  top: 0;
  float: right;
  display: flex;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem 0 0;
  background: none;
  border: none;
  color: var(--black);
  cursor: pointer;
}
.na-modal-close:hover { color: var(--red); }
.na-modal-body { clear: both; }
.na-modal-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--red);
  font-weight: 700;
}
.na-modal-body h2 {
  margin: 0.75rem 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 800;
}
.na-modal-body h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}
.na-modal-body p {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
}
.na-modal-map-link {
  display: inline-flex;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--black);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.na-modal-map-link:hover { background: var(--red); }

.na-header-inner {
  max-width: 100rem;
  margin: 0 auto;
  padding: clamp(0.875rem, 1.8vw, 1.125rem) clamp(0.75rem, 2.2vw, 1.125rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.na-header-logo {
  justify-self: start;
}
.na-header-logo img {
  height: clamp(2rem, 3.5vw, 2.75rem);
  width: auto;
  display: block;
}
.na-header-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(2.75rem, 4.8vw, 4.75rem);
  padding: 1.5rem 2rem;
  margin: -1.5rem -2rem;
  transition: gap 0.4s ease 0.45s;
}
.na-header-nav.is-open {
  gap: clamp(3.5rem, 6.5vw, 6rem);
  transition-delay: 0s;
}
.na-nav-item {
  padding: 1.5rem 1.25rem;
  margin: -1.5rem -1.25rem;
}
.na-nav-item > a {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.88;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.25s ease, font-size 0.4s ease 0.45s;
}
.na-header-nav.is-open .na-nav-item > a {
  font-size: 1.125rem;
  transition: opacity 0.15s ease, color 0.25s ease, font-size 0.4s ease;
}
.na-nav-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.na-nav-item:hover > a {
  opacity: 1;
}
.na-nav-item:hover > a::after {
  transform: scaleX(1);
}
.na-header.scrolled .na-nav-item > a,
.na-header.nav-hot .na-nav-item > a {
  color: var(--black);
}
.na-mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 14rem;
  padding: 2rem clamp(1.25rem, 6vw, 3rem) 3.5rem;
  background: #fff;
  /* 헤더의 border-bottom은 이 패널의 불투명한 흰 배경에 그대로 가려져
     안 보였다(실제 겪음) — 대신 패널 자신의 윗변에 선을 둬서 확실히 보이게 */
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
  opacity: 0;
  pointer-events: none;
  transform-origin: top;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.3s ease, clip-path 0.45s ease;
}
.na-header-nav.is-open .na-mega-dropdown {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0 0 0% 0);
  transition-delay: 0.4s;
}
.na-mega-col {
  position: absolute;
  top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 8rem;
}
.na-mega-col a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--black);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.na-mega-col a:hover {
  opacity: 1;
  color: var(--red);
}
.na-cta-item {
  position: relative;
  justify-self: end;
  padding: 1rem;
  margin: -1rem;
}
.na-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.625rem 1.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: none;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.na-header-cta .na-cta-arrow {
  flex: none;
}
.na-header-cta:hover {
  background: #fff;
  color: var(--red);
  border-color: #fff;
}
.na-header.scrolled .na-header-cta,
.na-header.nav-hot .na-header-cta {
  color: var(--black);
  border-color: rgba(0,0,0,.25);
}
.na-header.scrolled .na-header-cta:hover,
.na-header.nav-hot .na-header-cta:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.na-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 4rem);
  overflow: hidden;
}

.na-section-inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}

.na-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red);
  margin: 0 0 1rem;
  text-transform: uppercase;
}

/* 모바일에서만 줄바꿈을 넣고 싶을 때 쓰는 유틸리티(데스크톱에서는 숨김) */
.na-br-mobile { display: none; }
@media (max-width: 640px) {
  .na-br-mobile { display: inline; }
}

.na-fade {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.na-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.na-fade.d1 { transition-delay: 0.12s; }
.na-fade.d2 { transition-delay: 0.24s; }
.na-fade.d3 { transition-delay: 0.36s; }
.na-fade.d4 { transition-delay: 0.48s; }

/* ── HERO ── */
.na-hero {
  /* 예전엔 100dvh가 모바일 스크롤 스냅과 꼬여서 100vh로 되돌렸었는데,
     이제 모바일에서는 스냅 기능 자체를 아예 뺐기 때문에(더 이상 충돌할
     대상이 없음) 다시 100dvh를 적용해도 안전하다. 모바일 주소창이
     접히거나 나타날 때 실제 화면 크기에 맞춰 계속 다시 계산되는
     동적 뷰포트 단위라, 영상 섹션 높이가 부족해 보이던 문제를 해결한다. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #000;
  color: #fff;
  justify-content: flex-end;
  align-items: flex-start;
}
.na-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.na-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
  z-index: 1;
}
/* ── 히어로 영상 위에 몇 초 뒤 흰 배경이 덮이며 텍스트가 등장하는 연출 ── */
.na-hero-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  text-align: center;
  background: #fff;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 1s ease;
  pointer-events: none;
}
.na-hero-reveal.is-active {
  transform: translateY(0);
  pointer-events: auto;
}
.na-hero-reveal-kicker,
.na-hero-reveal h1 {
  margin: 0;
  transform: translateY(2.5rem);
  transition: transform 0.8s ease;
}
.na-hero-reveal-kicker {
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 800;
  color: var(--black, #000);
}
.na-hero-reveal h1 {
  margin-top: 0.75rem;
  margin-inline: auto;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.28;
  max-width: 50rem;
  color: var(--black, #000);
}
.na-hero-reveal.is-active .na-hero-reveal-kicker { transition-delay: 0.3s; transform: translateY(0); }
.na-hero-reveal.is-active h1 { transition-delay: 0.5s; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .na-hero-reveal, .na-hero-reveal-kicker, .na-hero-reveal h1 { transition: none !important; }
}

.na-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
  animation: na-bounce 2s ease-in-out infinite;
}
.na-scroll-cue .line { width: 1px; height: 2rem; background: rgba(255,255,255,0.6); }
.na-scroll-cue-dark { color: var(--black, #000); }
.na-scroll-cue-dark .line { background: rgba(0,0,0,0.4); }
@keyframes na-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ── STATEMENT (블랙) ── */
.na-statement {
  background: #0c0c0c;
  color: #fff;
  text-align: center;
}
.na-statement p {
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}
.na-statement .sub {
  margin-top: 1.5rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 400;
  color: #999;
  line-height: 1.8;
}

/* ── 본문 안 인라인 텍스트 링크 (~ 자세히 보기 →) ── */
.na-inline-link {
  display: inline-block;
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--red);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease;
}
.na-inline-link:hover { border-color: var(--red); }
.na-statement .na-inline-link { color: #fff; }
.na-statement .na-inline-link:hover { border-color: #fff; }

/* ── NUMBERS ── */
.na-numbers { background: #fff; }
.na-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  margin-top: 3rem;
  text-align: center;
}
.na-stat-num {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--black);
  line-height: 1;
}
.na-stat-num .unit { font-size: 0.5em; font-weight: 700; color: var(--red); margin-left: 0.15em; }
.na-stat-label {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--gray);
  font-weight: 500;
}

/* ── AWARDS (블랙 타임라인) ── */
.na-awards {
  background: #0c0c0c;
  color: #fff;
}
.na-awards-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  margin: 0 0 3.5rem;
}
.na-award-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.na-award-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  opacity: 0;
  transform: translateX(-1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.na-award-row.is-visible { opacity: 1; transform: translateX(0); }
.na-award-year {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  color: var(--red);
  width: 5.5rem;
  flex-shrink: 0;
}
.na-award-badge {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 0.4rem;
}
.na-award-text { flex: 1; min-width: 0; }
.na-award-name { font-size: 1rem; font-weight: 700; }
.na-award-press { font-size: 0.8125rem; color: #999; margin-top: 0.2rem; }

/* ── TRUST / 공공조달 ── */
.na-trust { background: #fff; text-align: center; }
.na-trust p.desc {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  color: var(--gray);
  margin: 0 auto 3rem;
  max-width: 42rem;
  line-height: 1.8;
}
.na-trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.na-trust-logos img { height: 2.5rem; object-fit: contain; opacity: 0.75; }

/* ── CATEGORIES ── */
.na-categories { background: var(--gray-light); }
.na-why { background: #fff; }
.na-process { background: var(--gray-light); }
.na-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 3rem;
}
.na-cat-item {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--black);
}

/* ── BRANDS marquee ── */
.na-brands { background: #fff; text-align: center; }
.na-brand-marquee {
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.na-brand-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: na-marquee 28s linear infinite;
}
.na-brand-track img { height: 2.75rem; object-fit: contain; flex-shrink: 0; }
@keyframes na-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── 거래 분야 존 (텍스트 배지 마퀴) ── */
.na-industries { background: var(--gray-light); text-align: center; }
.na-industry-marquee {
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.na-industry-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: na-marquee 22s linear infinite;
}
.na-industry-badge {
  flex-shrink: 0;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--black);
}

/* ── 연혁 하이라이트 (메인 티저) ── */
.na-history-teaser { background: #fff; text-align: center; }
.na-history-teaser-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
  margin-bottom: 1rem;
}
.na-history-teaser-item .year {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--red);
}
.na-history-teaser-item .text {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  color: var(--gray);
  font-weight: 500;
}

/* ── CLOSING CTA ── */
.na-cta {
  background: var(--red);
  color: #fff;
  text-align: center;
}
.na-cta-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  margin: 0 0 2.5rem;
  line-height: 1.4;
}
.na-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #fff;
  color: var(--red);
  font-size: 1.0625rem;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: transform 0.2s ease;
}
.na-cta-btn:hover { transform: translateY(-2px); }

/* ── FOOTER ── */
.na-footer {
  background: #ececec;
  color: #767676;
  min-height: 0;
  padding: 3rem 1.25rem;
  text-align: left;
}
.na-footer-inner { max-width: 90rem; margin: 0 auto; }
.na-footer img { height: 3.5rem; display: block; position: relative; top: -0.9rem; }
.na-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1rem;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.na-footer-social { display: flex; gap: 1rem; }
.na-footer-social a {
  display: flex;
  color: #999;
  transition: color 0.2s ease;
}
.na-footer-social a:hover { color: var(--n2-signal, #FF0019); }
.na-footer-social svg { width: 1.875rem; height: 1.875rem; }
.na-footer .info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 2;
}
.na-footer .info span:not(.na-footer-copyright) + span:not(.na-footer-copyright)::before { content: "·"; margin: 0 0.5em; color: #bbb; }
.na-footer-copyright { margin-left: auto; white-space: nowrap; }
.na-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #d8d8d8;
  font-size: 1.0625rem;
  font-weight: 600;
}
.na-footer-links a { color: #555; transition: color 0.2s ease; }
.na-footer-links a:hover { color: var(--n2-signal, #FF0019); }
/* 모바일에서는 푸터의 아이콘·링크·안내문구를 한 단계 더 작게 표시한다 */
@media (max-width: 640px) {
  .na-footer { padding: 2.25rem 1.25rem; }
  .na-footer img { height: 2.5rem; }
  .na-footer-social svg { width: 1.5rem; height: 1.5rem; }
  .na-footer-links { gap: 1rem 1.25rem; padding-bottom: 2rem; font-size: 0.8125rem; }
  .na-footer .info { font-size: 0.75rem; line-height: 1.8; }
  /* 세로로 쌓아봤는데, 다시 최대한 한 줄에 가로로 이어지게(공간이
     모자라면 자연스럽게만 줄바꿈) 되돌린다. 가운뎃점 대신 약간의
     여백만으로 항목을 구분한다. 저작권 표시도 오른쪽 정렬 없이 그냥
     같은 줄 흐름을 따라간다 */
  .na-footer .info { flex-direction: row; flex-wrap: wrap; align-items: baseline; row-gap: 0.25rem; column-gap: 0.6em; }
  .na-footer .info span:not(.na-footer-copyright) + span:not(.na-footer-copyright)::before { content: none; margin: 0; }
  .na-footer-copyright { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — 레드(#FF0019)·블랙 두 컬러만을 아이덴티티로 삼는
   산업/도면(blueprint) 컨셉의 새 디자인 시스템. 접두어 n2- 로 기존
   헤더/푸터(na-*)와 분리해 관리한다.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --n2-ink: #000000;
  --n2-paper: #ffffff;
  --n2-signal: #ff0019;
  --n2-mist: #f4f4f4;
  --n2-line: #e2e2e2;
  --n2-graphite: #767676;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.n2-mono { font-family: ui-monospace, "SF Mono", "Roboto Mono", monospace; }
.n2-tnum { font-variant-numeric: tabular-nums; }

/* ── 도면 격자 배경 / 모서리 마크 (장식이 아니라 밀도를 채우는 구조 요소) ── */
.n2-grid-bg {
  background-image:
    linear-gradient(to right, var(--n2-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--n2-line) 1px, transparent 1px);
  background-size: 56px 56px;
}
.n2-grid-bg-dark {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
}
.n2-corners { position: relative; }
.n2-corner { position: absolute; width: 16px; height: 16px; }
.n2-corner.tl { top: 20px; left: 20px; border-top: 1px solid rgb(255 255 255 / 0.35); border-left: 1px solid rgb(255 255 255 / 0.35); }
.n2-corner.tr { top: 20px; right: 20px; border-top: 1px solid rgb(255 255 255 / 0.35); border-right: 1px solid rgb(255 255 255 / 0.35); }
.n2-corner.bl { bottom: 20px; left: 20px; border-bottom: 1px solid rgb(255 255 255 / 0.35); border-left: 1px solid rgb(255 255 255 / 0.35); }
.n2-corner.br { bottom: 20px; right: 20px; border-bottom: 1px solid rgb(255 255 255 / 0.35); border-right: 1px solid rgb(255 255 255 / 0.35); }
.n2-corner.dark { border-color: rgb(0 0 0 / 0.18) !important; }

/* ── HERO ── */
.n2-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--n2-ink);
  color: #fff;
  overflow: hidden;
  padding-top: 4.5rem;
}
.n2-hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 90rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 6vw, 3rem);
}
.n2-hero-tag { font-size: 0.75rem; letter-spacing: 0.25em; color: rgb(255 255 255 / 0.5); }
.n2-hero h1 {
  margin: 1.5rem 0 0;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 54rem;
}
.n2-hero .n2-hero-sub {
  margin-top: 2rem;
  max-width: 34rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.85;
  color: rgb(255 255 255 / 0.6);
}
.n2-hero-trust { position: relative; border-top: 1px solid rgb(255 255 255 / 0.15); }
.n2-hero-trust-row {
  max-width: 90rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
.n2-hero-trust-row > div {
  padding: 1rem clamp(1.25rem, 6vw, 3rem);
  border-bottom: 1px solid rgb(255 255 255 / 0.15);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}
.n2-hero-trust-row > div:last-child { border-bottom: none; }
.n2-hero-trust-k { font-size: 0.7rem; color: rgb(255 255 255 / 0.4); letter-spacing: 0.05em; white-space: nowrap; }
.n2-hero-trust-v { font-size: 0.875rem; font-weight: 500; color: rgb(255 255 255 / 0.85); }
@media (min-width: 640px) {
  .n2-hero-trust-row { grid-template-columns: repeat(3, 1fr); }
  .n2-hero-trust-row > div { border-bottom: none; border-right: 1px solid rgb(255 255 255 / 0.15); }
  .n2-hero-trust-row > div:last-child { border-right: none; }
}

/* ── 섹션 공용 ── */
.n2-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 6vw, 3rem);
  border-bottom: 1px solid var(--n2-line);
  background: var(--n2-paper);
  color: var(--n2-ink);
}
.n2-alt { background: var(--n2-mist); }
.n2-dark { background: var(--n2-ink); color: #fff; }
.n2-signal { background: var(--n2-signal); color: #fff; }
.n2-section.n2-dark, .n2-section.n2-signal { border-color: transparent; }
.n2-section-inner { width: 100%; max-width: 90rem; margin: 0 auto; }
.n2-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--n2-graphite); }
.n2-dark .n2-eyebrow, .n2-signal .n2-eyebrow { color: rgb(255 255 255 / 0.55); }
.n2-h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }

/* ── 인라인 텍스트 링크 ── */
.n2-link { display: inline-flex; align-items: center; margin-top: 1.75rem; border-bottom: 1px solid var(--n2-ink); padding-bottom: 0.25rem; font-size: 0.9375rem; font-weight: 700; }
.n2-link .bar { margin-left: 0.6rem; width: 1.25rem; height: 1px; background: var(--n2-ink); transition: width 0.3s ease, background 0.3s ease; }
.n2-link:hover .bar { width: 2rem; background: var(--n2-signal); }
.n2-dark .n2-link, .n2-signal .n2-link { border-color: #fff; color: #fff; }
.n2-dark .n2-link .bar, .n2-signal .n2-link .bar { background: #fff; }

/* ── 비대칭 스플릿 (about teaser 등) ── */
.n2-split { display: grid; gap: 2.5rem; }
.n2-split .n2-h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.n2-split-body { max-width: 28rem; }
.n2-split-body p { font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.9; color: var(--n2-graphite); }
@media (min-width: 768px) {
  .n2-split { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
  .n2-split-body { align-self: end; }
}

/* ── 이미지↔설명 교차 배치 로우 (좌우가 번갈아 바뀌는 피처 섹션) ── */
.n2-feature-row {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.n2-feature-row + .n2-feature-row {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.n2-feature-media {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: var(--n2-mist, #f4f4f4);
}
.n2-feature-body {
  /* 글자 정렬(왼쪽)은 그대로 두고, 텍스트 블록 자체의 위치만 컬럼 안에서
     가운데로 오도록 한다 */
  max-width: 28rem;
  margin-inline: auto;
}
.n2-feature-body h3 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.3;
}
.n2-feature-body p:not(.n2-eyebrow) {
  margin: 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.9;
  color: var(--n2-graphite);
}
@media (min-width: 768px) {
  .n2-feature-row { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .n2-feature-row.is-reverse .n2-feature-media { order: 2; }
  .n2-feature-row.is-reverse .n2-feature-body { order: 1; }
}

/* ── 주요 메뉴 바로가기 그리드 (6개, 3x2, 섹션 폭 꽉 채움) ── */
.n2-quicklink-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  /* 별도 margin-top을 두지 않는다 — "노을단체복" 피처 로우와 똑같이,
     섹션 기본 padding-top만으로 위쪽 여백이 정해지게 한다 */
}
.n2-quicklink {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  min-height: 8.5rem;
  padding: 1.5rem;
  background: var(--n2-mist);
  color: var(--n2-ink);
  transition: background 0.2s ease;
}
.n2-quicklink:hover { background: #ebebeb; }
.n2-quicklink-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  max-width: 8.5rem;
}
.n2-quicklink-arrow {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  transition: transform 0.2s ease, color 0.2s ease;
}
.n2-quicklink:hover .n2-quicklink-arrow {
  transform: translateX(0.2rem);
  color: var(--n2-signal);
}
.n2-quicklink-icon {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--n2-graphite);
}
@media (min-width: 640px) {
  .n2-quicklink-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .n2-quicklink-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 목록형 로우 (순서 없는 콘텐츠: 사업영역/채용분야 등) ── */
.n2-rows { border-top: 1px solid var(--n2-line); }
.n2-row { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem 0; border-bottom: 1px solid var(--n2-line); }
.n2-row-title { font-size: 1.25rem; font-weight: 700; }
.n2-row-desc { font-size: 0.875rem; color: var(--n2-graphite); line-height: 1.7; max-width: 30rem; }
a.n2-row { transition: color 0.2s ease; }
a.n2-row:hover { color: var(--n2-signal); }
@media (min-width: 640px) {
  .n2-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 2rem; }
  .n2-row-desc { text-align: right; }
}

/* ── 스탯 월 (순서 없는 카드형 콘텐츠: 핵심가치/왜 노을상사인가 등, 번호 없음) ── */
.n2-wall { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--n2-line); }
.n2-wall-cell { border-bottom: 1px solid var(--n2-line); padding: 2rem clamp(1.25rem, 3vw, 2.5rem); }
.n2-wall-cell .tag { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--n2-graphite); }
.n2-wall-cell h3 { margin: 0.75rem 0 0; font-size: 1.375rem; font-weight: 800; }
.n2-wall-cell p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--n2-graphite); line-height: 1.7; max-width: 16rem; }
.n2-dark .n2-wall, .n2-dark .n2-wall-cell { border-color: rgb(255 255 255 / 0.15); }
.n2-dark .n2-wall-cell p { color: rgb(255 255 255 / 0.55); }
@media (min-width: 640px) {
  .n2-wall { border-left: 1px solid var(--n2-line); }
  .n2-dark .n2-wall { border-color: rgb(255 255 255 / 0.15); }
  .n2-wall-cell { border-right: 1px solid var(--n2-line); }
  .n2-dark .n2-wall-cell { border-color: rgb(255 255 255 / 0.15); }
  .n2-wall.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .n2-wall.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .n2-wall.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── MISSION: 텍스트를 가운데 두고 이미지 3장을 좌상단/우측/좌하단에 배치 ── */
/* PC와 동일한 좌상단/우측/좌하단 배치를 화면 크기와 무관하게 항상 쓴다
   (모바일에서도 세로로 쌓지 않고 PC와 같은 구도를 유지해달라는 요청). */
.n2-mission-layout {
  display: grid;
  /* 가운데 열을 auto로 두면, 문단 텍스트의 max-content 크기 욕심 때문에
     좁은 화면에서 양옆 이미지 열이 0폭으로 눌려버렸다(실제 겪음 — 375px
     에서 이미지가 완전히 사라짐). 가운데 열 자체에 상한을 둬서 항상
     양옆에 이미지가 들어갈 자리가 남게 한다. */
  grid-template-columns: minmax(3rem, 1fr) minmax(0, min(46rem, 60vw)) minmax(3rem, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: stretch;
  column-gap: clamp(0.5rem, 5vw, 4.5rem);
}
.n2-mission-head {
  grid-column: 2;
  grid-row: 1 / span 3;
  text-align: center;
}
.n2-mission-eyebrow {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.2em;
  color: var(--n2-graphite, #767676);
}
.n2-mission-statement {
  margin: 1.5rem auto 0;
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.4;
  max-width: 46rem;
}
.n2-mission-substatement {
  margin: 1rem auto 0;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--n2-graphite, #767676);
}
.n2-mission-gallery-item {
  /* 좁은 화면에서도 clamp 최소값 때문에 트랙보다 넓어지지 않도록
     최소값을 충분히 낮췄다(기존엔 11rem이라 375px 화면에서 넘쳤음 —
     실제 겪음). */
  width: clamp(4rem, 22vw, 16.5rem);
  max-width: 100%;
  /* 그리드 트랙이 좁아질 때 이미지가 트랙보다 넓어져 화면 밖으로
     삐져나가는 걸 막는다(그리드 아이템의 기본 최소 크기가 콘텐츠
     크기로 고정되는 문제 — 실제 겪음) */
  min-width: 0;
  aspect-ratio: 3 / 4;
  background: var(--n2-mist, #f4f4f4);
}
/* 좌상단(1행1열) / 우측(1~3행 3열, 세로 가운데) / 좌하단(3행1열) */
.n2-mission-gallery-item-1 {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}
.n2-mission-gallery-item-2 {
  grid-column: 3;
  grid-row: 1 / span 3;
  justify-self: start;
  align-self: center;
  width: clamp(5rem, 27vw, 20rem);
  max-width: 100%;
}
.n2-mission-gallery-item-3 {
  grid-column: 1;
  grid-row: 3;
  justify-self: end;
  align-self: end;
}
/* 모바일에서는 이미지를 훨씬 크게 — 섹션 폭을 넘어가도 상관없다고
   확인받았다. min-width:0으로 트랙 붕괴는 막아뒀으니, max-width만
   풀어주면 이미지가 옆 텍스트/여백을 침범하며 커진다(의도된 동작). */
@media (max-width: 640px) {
  .n2-mission-gallery-item {
    /* 가운데로 당기면서(justify-self:center) 이 폭 그대로였더니 텍스트를
       가려버렸다(실제 겪음). 텍스트와 안 겹치도록 한 번 더 줄인다. */
    width: clamp(4.5rem, 21vw, 9rem);
    max-width: none;
  }
  .n2-mission-gallery-item-2 {
    /* 왼쪽 두 이미지는 justify-self:center로 당겨서 밖으로 15px 정도만
       삐져나가는데, 오른쪽 이 이미지는 justify-self:start인 채로 폭만
       커서 90px 넘게 훨씬 더 바깥으로 튀어나가 있었다(실제 겪음 —
       좌우가 비대칭으로 보였음). justify-self:center는 그대로 두고
       (중심 위치 유지) 폭만 다시 키운다 — 중앙정렬이라 커져도 중심은
       그대로고 양옆으로만 고르게 커진다. */
    width: clamp(6rem, 30vw, 12rem);
    max-width: none;
    justify-self: center;
    transform: translateX(1rem) !important;
  }
  /* 화면 밖으로 너무 멀리 빠지지 않도록 왼쪽 끝(justify-self:end) 대신
     칸 가운데 쪽으로 당겨서 좀 더 중앙에 모이게 한다. 좌상단은 위로,
     좌하단은 아래로만 어긋나게 하고 좌우 밀림은 뺐다.
     .na-fade.is-visible이 transform:translateY(0)을 강제로 덮어써서
     (클래스 2개짜리라 명시도가 더 높음) 이 오프셋이 아예 안 먹히던
     문제가 있었다(실제 겪음 — 스크롤로 다 나타난 뒤에는 간격이 0으로
     붙어버림). !important로 확실히 이긴다. */
  .n2-mission-gallery-item-1 {
    justify-self: center;
    transform: translate(0, -2rem) !important;
  }
  .n2-mission-gallery-item-3 {
    justify-self: center;
    transform: translate(0, 1rem) !important;
  }
}
@media (min-width: 1000px) {
  /* 1000px 이상은 원래 PC용으로 잘 맞춰져 있던 값 그대로 되돌린다.
     가운데 열 상한(60vw)은 좁은 화면의 0폭 붕괴를 막으려고 추가한
     것인데, 데스크톱에서는 이게 오히려 트랙 폭 배분을 어긋나게 해서
     이미지 위치/크기가 이상해지는 문제가 있었다(실제 겪음). */
  .n2-mission-layout {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(1rem, 5vw, 4.5rem);
  }
  .n2-mission-gallery-item {
    width: clamp(11rem, 22vw, 16.5rem);
  }
  .n2-mission-gallery-item-2 {
    width: clamp(14rem, 27vw, 20rem);
  }
  /* 좌상단/좌하단 이미지가 딱 붙어서(간격 0) 경계가 안 보였다(실제
     겪음 — PC에서 간격 추가 요청). 위/아래로 살짝 어긋나게 해서 사이를
     벌린다. */
  .n2-mission-gallery-item-1 {
    position: relative;
    top: -1.5rem;
  }
  .n2-mission-gallery-item-3 {
    position: relative;
    top: 1.5rem;
  }
}
/* 화면이 넉넉할 때만 텍스트 쪽/바깥쪽으로 살짝 어긋나게 당긴다.
   좁은 화면(1000~1199px)에서는 이 여유가 없어 겹치거나 넘칠 수 있어 뺐다. */
@media (min-width: 1200px) {
  .n2-mission-gallery-item-1 {
    position: relative;
    right: -3.5rem;
  }
  .n2-mission-gallery-item-3 {
    position: relative;
    right: 2rem;
  }
}

/* ── 프로세스 스텝퍼 (순서 있는 콘텐츠 — 번호 + 스크롤 라인 채움) ── */
.n2-stepper { position: relative; padding-left: 2.75rem; max-width: 36rem; }
.n2-stepper-line { position: absolute; left: 0.75rem; top: 0.25rem; bottom: 0.25rem; width: 1px; background: var(--n2-line); overflow: hidden; }
.n2-stepper-line-fill { position: absolute; inset: 0; width: 100%; background: var(--n2-signal); transform-origin: top; transform: scaleY(0); }
.n2-step { position: relative; padding-bottom: 2.5rem; }
.n2-step:last-child { padding-bottom: 0; }
.n2-step-num {
  position: absolute; left: -2.75rem; top: 0;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--n2-line); background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--n2-graphite);
}
.n2-dark .n2-step-num { background: var(--n2-ink); border-color: rgb(255 255 255 / 0.25); color: rgb(255 255 255 / 0.6); }
.n2-dark .n2-stepper-line { background: rgb(255 255 255 / 0.2); }
.n2-step h3 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.n2-step p { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--n2-graphite); }
.n2-dark .n2-step p { color: rgb(255 255 255 / 0.55); }

/* ── 타임라인 (연혁 — 순서 있는 콘텐츠, 스크롤 라인 채움) ── */
.n2-timeline { position: relative; padding-left: 2rem; }
.n2-timeline-line { position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--n2-line); overflow: hidden; }
.n2-timeline-line-fill { position: absolute; inset: 0; width: 100%; background: var(--n2-signal); transform-origin: top; transform: scaleY(0); }
.n2-timeline-item { position: relative; display: grid; grid-template-columns: 5rem 1fr; gap: 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--n2-line); }
.n2-timeline-item:last-child { border-bottom: none; }
.n2-timeline-item::before {
  content: ""; position: absolute; left: -2.35rem; top: 2rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--n2-signal);
}
.n2-timeline-year { font-size: 1.5rem; font-weight: 800; }
.n2-timeline-text { font-size: 0.9375rem; line-height: 1.8; max-width: 36rem; color: var(--n2-ink); opacity: 0.85; }
@media (min-width: 640px) {
  .n2-timeline-item { grid-template-columns: 8rem 1fr; gap: 2rem; }
  .n2-timeline-year { font-size: 2rem; }
}

/* ── 마퀴 (거래 분야 존 등) ── */
.n2-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.n2-marquee-track { display: flex; width: max-content; gap: 1.5rem; animation: n2-marquee 22s linear infinite; }
@media (prefers-reduced-motion: reduce) { .n2-marquee-track { animation: none; } }
.n2-marquee-item { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 800; color: rgb(0 0 0 / 0.12); display: flex; align-items: center; gap: 1.5rem; white-space: nowrap; }
.n2-marquee-item .slash { color: var(--n2-signal); }
@keyframes n2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 미니 통계 그리드 (연혁 하이라이트 등) ── */
.n2-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; border-top: 1px solid var(--n2-line); padding-top: 2.5rem; margin-top: 2.5rem; }
.n2-mini-grid .year { font-size: 2.25rem; font-weight: 800; }
.n2-mini-grid .label { margin-top: 0.4rem; font-size: 0.875rem; color: var(--n2-graphite); }
@media (min-width: 640px) { .n2-mini-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── 아코디언 (FAQ) ── */
.n2-accordion { border-top: 1px solid var(--n2-line); }
.n2-acc-item { border-bottom: 1px solid var(--n2-line); }
.n2-acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: none; border: none; text-align: left; font: inherit; font-weight: 700; font-size: 0.9375rem;
  padding: 1.5rem 0.125rem; cursor: pointer; color: var(--n2-ink);
}
.n2-acc-icon { position: relative; width: 1.125rem; height: 1.125rem; flex-shrink: 0; transition: transform 0.3s ease; }
.n2-acc-icon::before, .n2-acc-icon::after { content: ""; position: absolute; background: var(--n2-ink); border-radius: 2px; }
.n2-acc-icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.n2-acc-icon::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); transition: opacity 0.2s ease; }
.n2-acc-item.is-open .n2-acc-icon { transform: rotate(45deg); }
.n2-acc-item.is-open .n2-acc-icon::after { opacity: 0; }
.n2-acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.n2-acc-item.is-open .n2-acc-a { grid-template-rows: 1fr; }
.n2-acc-a-inner { overflow: hidden; }
.n2-acc-a p { margin: 0 0.125rem 1.5rem; font-size: 0.875rem; color: var(--n2-graphite); line-height: 1.85; max-width: 38rem; }
.n2-acc-group + .n2-acc-group { margin-top: 3rem; }
.n2-acc-group-title { font-size: 0.9375rem; font-weight: 800; color: var(--n2-signal); margin: 0 0 0.5rem; }

/* ── 버튼 ── */
.n2-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; font-size: 0.9375rem; font-weight: 700; border: 1px solid var(--n2-ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.n2-btn-primary { background: var(--n2-ink); color: #fff; }
.n2-btn-primary:hover { background: var(--n2-signal); border-color: var(--n2-signal); }
.n2-btn-outline { background: transparent; color: var(--n2-ink); }
.n2-btn-outline:hover { color: var(--n2-signal); border-color: var(--n2-signal); }
.n2-dark .n2-btn-outline, .n2-signal .n2-btn-outline { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.n2-dark .n2-btn-primary, .n2-signal .n2-btn-primary { background: #fff; color: var(--n2-ink); }
.n2-dark .n2-btn-primary:hover, .n2-signal .n2-btn-primary:hover { background: var(--n2-signal); color: #fff; }
.n2-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.n2-btn-side-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--n2-graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.n2-btn-side-link:hover { color: var(--n2-signal); }
.n2-dark .n2-btn-side-link, .n2-signal .n2-btn-side-link { color: rgb(255 255 255 / 0.7); }
.n2-dark .n2-btn-side-link:hover, .n2-signal .n2-btn-side-link:hover { color: var(--n2-signal); }
.n2-btn-side-link-arrow {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}
.n2-btn[disabled], a.n2-btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* ── 서브페이지 상단 배너 ── */
.n2-banner { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 8rem clamp(1.25rem, 6vw, 3rem) 3rem; }
.n2-banner h1 { margin: 1.25rem 0 0; font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.28; max-width: 50rem; }
.n2-banner p { margin-top: 1.5rem; max-width: 32rem; font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); line-height: 1.85; color: var(--n2-graphite); }
.n2-banner.n2-dark p, .n2-banner.n2-signal p { color: rgb(255 255 255 / 0.7); }

/* ── 가로형 배너 (화면 폭 꽉 채우는 짧은 스트립, 전체 화면 섹션 아님) ── */
.n2-strip-banner {
  /* 흔히 쓰는 가로형 배너 비율로, 화면 폭에 맞춰 높이도 함께 늘어난다 */
  /* width를 명시하지 않으면 min-height가 aspect-ratio보다 커지는 좁은
     화면에서 브라우저가 거꾸로 높이에 맞춰 폭을 늘려버리는 문제가 있었다
     (실제 겪음 — 모바일에서 배너가 화면보다 넓어져 가로 스크롤 발생). */
  width: 100%;
  aspect-ratio: 4 / 1;
  min-height: 10rem;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 6vw, 3rem);
  display: flex;
  align-items: center;
  /* 어떤 이미지가 와도 흰 텍스트 대비가 유지되도록 어두운 그라디언트를
     이미지 위에 겹친다 */
  background-image: linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)), url("../img/strip-banner-bg.jpg");
  background-size: cover;
  background-position: center;
}
/* 배경 사진 없이, 브랜드 컬러(검정/레드)만으로 채우는 배너용 */
.n2-strip-banner-plain {
  background-image: none;
}
.n2-strip-banner-gray {
  background-color: #ececec;
  color: var(--black, #000);
}
.n2-strip-banner-gray .n2-strip-banner-eyebrow { color: #888; }
.n2-strip-banner-gray .n2-strip-banner-text { color: var(--black, #000); }
.n2-strip-banner-inner {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}
.n2-strip-banner-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #fff;
}
.n2-strip-banner-text {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
  font-weight: 800;
  line-height: 1.45;
}
.n2-strip-banner-cta {
  margin-top: 0.75rem;
}
/* 좁은 화면에서는 4:1 비율 + 최소 높이 고정 때문에 헤드라인과 버튼이
   비좁게 눌려 보였다(실제 겪음). 높이를 내용에 맞춰 자연스럽게 늘어나게
   풀고, 안쪽 여백/글자 크기도 화면에 맞춰 줄인다. */
@media (max-width: 640px) {
  .n2-strip-banner { aspect-ratio: auto; min-height: auto; padding: 2.25rem 1.25rem; }
  .n2-strip-banner-inner { gap: 1.125rem; }
  .n2-strip-banner-text { font-size: 1.0625rem; }
}

/* ── 가로 스크롤 갤러리 (노을단체복 제품 라인업) ── */
.n2-scrollgallery { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
.n2-scrollgallery::-webkit-scrollbar { display: none; }
.n2-scrollcard { flex: 0 0 auto; width: 15.5rem; height: 17rem; border: 1px solid var(--n2-line); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; scroll-snap-align: start; }
.n2-scrollcard .mark { width: 0.5rem; height: 0.5rem; background: var(--n2-signal); }
.n2-scrollcard h3 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.n2-scrollcard p { font-size: 0.875rem; color: var(--n2-graphite); margin-top: 0.5rem; }

/* ── 마크 리스트 (순서 없는 짧은 항목: 추천 대상/복지 등) ── */
.n2-marklist { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 44rem; list-style: none; margin: 0; padding: 0; }
.n2-marklist.cols-2 { }
.n2-marklist li { display: flex; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.7; }
.n2-marklist li::before { content: ""; width: 0.375rem; height: 0.375rem; margin-top: 0.55rem; background: var(--n2-signal); flex-shrink: 0; }
@media (min-width: 640px) { .n2-marklist.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2.5rem; } }

/* ── 클로징 ── */
.n2-closing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5rem clamp(1.25rem, 6vw, 3rem); }
.n2-closing p { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; line-height: 1.35; max-width: 44rem; }
.n2-closing .rule { margin-top: 2.5rem; width: 4rem; height: 1px; background: var(--n2-signal); }

/* ── 리빌 (na-fade 재사용 — 기존 IntersectionObserver 그대로 적용) ── */
@media (prefers-reduced-motion: reduce) {
  .na-fade { transition: none !important; opacity: 1 !important; transform: none !important; }
  .n2-image-item { transition: none !important; transform: none !important; }
  .n2-gallery-title, .n2-gallery-sub, .n2-gallery-head .n2-btn-row { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── 반응형 세부 조정 ── */
@media (max-width: 640px) {
  .n2-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 헤더 반응형 (기존 규칙 복원 — 헤더는 그대로 유지) ── */
.na-header-cta-icon { display: none; }
@media (max-width: 900px) {
  .na-header-nav { display: none; }
  /* 왼쪽: 햄버거, 오른쪽: 쇼핑몰 아이콘 버튼. 로고는 grid 트랙 기준이
     아니라 헤더 전체 폭 기준으로 절대배치해 정중앙에 오게 한다 — 햄버거와
     버튼의 폭이 서로 달라서 가운데 트랙 자체가 전체 중앙이 아니었다
     (실제 겪음: 로고가 살짝 왼쪽으로 치우쳐 보임).
     grid의 auto 열은 안에 음수 마진(히트 영역 확장 트릭)이 있으면 폭이
     0으로 계산돼버리는 문제가 있어서(실제 겪음), 로고를 뺀 나머지
     둘(햄버거/쇼핑몰)은 grid 대신 flex로 양 끝에 배치한다. */
  .na-header-inner { display: flex; align-items: center; justify-content: space-between; position: relative; }
  .na-mobile-menu-btn { display: flex; }
  .na-header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-self: unset;
  }
  /* 헤더 자체와 안의 로고/아이콘 버튼을 비율은 그대로 두고 전반적으로
     더 크게 — 기존 값들이 다소 작다는 피드백이 있었다(실제 겪음). */
  .na-header-inner { padding: 1.125rem 1.125rem; }
  .na-header-logo img { height: 2.75rem; }
  .na-mobile-menu-btn svg { width: 26px; height: 26px; }
  /* 모바일에서는 텍스트 버튼 대신 햄버거와 같은 톤의 아이콘 버튼으로 */
  .na-header-cta-label,
  .na-header-cta .na-cta-arrow { display: none; }
  .na-header-cta-icon { display: block; width: 26px; height: 26px; }
  /* 감싸는 요소(.na-cta-item)의 자체 패딩/마진은 데스크톱용(더 큰 히트
     영역)이라 모바일에서는 없애고, 버튼 자신에게 햄버거와 똑같은
     패딩+음수마진 조합을 걸어서 좌우 여백을 완전히 맞춘다. */
  .na-cta-item { padding: 0; margin: 0; }
  .na-header-cta { padding: 0.5rem; margin: -0.5rem; border-radius: 999px; transform: translate(-5px, 5px); }
}
/* 좁은 모바일 화면에서도 위 900px 구간 크기 비율을 그대로 유지한다
   (기존엔 여기서 한 번 더 줄였는데, 전체적으로 더 키워달라는 요청과
   맞지 않아 축소 폭을 줄였다). */
@media (max-width: 480px) {
  .na-header-inner { padding: 1rem 1rem; gap: 0.75rem; }
  .na-header-logo img { height: 2.5rem; }
  .na-mobile-menu-btn svg { width: 23px; height: 23px; }
  .na-header-cta-icon { width: 23px; height: 23px; }
  /* 쇼핑몰 바로가기 사이드바 안 링크(노을단체복/노을안전)도 모바일에서는 작게 */
  .na-cta-sidebar-links a { padding-block: 1.375rem; font-size: 1.0625rem; }
}

/* ── 이미지 갤러리 위 타이틀 ── */
/* 텍스트는 na-fade의 IntersectionObserver 타이밍이 아니라, JS에서 이미지
   리빌 + 딥(살짝 내려가는) 연출이 다 끝난 시점에 맞춰 is-revealed를 붙여준다
   (main.js의 "홈 이미지 갤러리 시퀀스" 참고). */
.n2-gallery-head {
  text-align: center;
  margin-top: clamp(5rem, 9vw, 7.5rem);
}
.n2-gallery-title,
.n2-gallery-sub,
.n2-gallery-head .n2-btn-row {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.n2-gallery-head.is-revealed .n2-gallery-title {
  opacity: 1;
  transform: translateY(0);
}
.n2-gallery-head.is-revealed .n2-gallery-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.n2-gallery-head.is-revealed .n2-btn-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.n2-gallery-cta-row {
  /* 서브텍스트와의 간격을 더 벌려서 버튼 위치를 아래로 내린다 */
  margin-top: 3rem;
}
.n2-gallery-cta {
  padding: 0.8125rem 2rem;
  /* 버튼에 딱 붙은 테두리가 아니라, 살짝 떨어져서 감싸는 액자형 테두리 */
  border-color: transparent;
  outline: 2px solid var(--n2-ink);
  outline-offset: 3px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, outline-color 0.2s ease;
}
.n2-gallery-cta:hover {
  outline-color: var(--n2-signal);
}
/* 어두운 배경(배너 등) 위에서는 버튼이 흰색으로 반전되므로, 액자 테두리도
   같이 흰색으로 반전한다 */
.n2-dark .n2-gallery-cta, .n2-signal .n2-gallery-cta {
  outline-color: #fff;
}
.n2-dark .n2-gallery-cta:hover, .n2-signal .n2-gallery-cta:hover {
  outline-color: var(--n2-signal);
}
.n2-gallery-title {
  margin: 0;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 900;
  /* font-weight 900이 폰트가 지원하는 가장 굵은 단계라, 획을 살짝 덧그려 더 굵어 보이게 한다 */
  -webkit-text-stroke: 0.6px currentColor;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.n2-gallery-sub {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.8;
  color: var(--n2-ink);
}

/* ── 이미지 갤러리 (3:4 세로 3장, 아래→위 리빌) ── */
/* 좌우로 잘려서 무한 반복되는 트랙(overflow:hidden 창) — main.js가
   .n2-image-grid 내용을 복제해서 정확히 2배로 만들면, 트랙을 -50%~0%로
   움직여도 이음매 없이 계속 이어지는 것처럼 보인다. */
.n2-image-marquee {
  overflow: hidden;
  margin-top: clamp(7.5rem, 14vw, 11.5rem);
  /* 컨테이너(.n2-section-inner) 폭에 맞춰서 자르면 화면 가장자리보다
     안쪽에서 이미지가 잘려서 어중간하게 잘린 것처럼 보였다(실제 겪음).
     화면 전체 폭까지 꽉 채워서(풀블리드) 진짜 화면 끝에서 잘리게 한다. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.n2-image-grid {
  display: flex;
  width: max-content;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  /* 오른쪽으로 흘러가 보이도록 -50%(복제된 뒷부분)에서 0%로 이동 */
  animation: n2-image-marquee-scroll 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .n2-image-grid { animation: none; } }
@keyframes n2-image-marquee-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.n2-image-item {
  /* 이제 grid가 아니라 flex라, 카드는 컨테이너 폭이 아니라 자기 자신의
     크기로 커진다(고정 폭). */
  width: min(24rem, 62vw);
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--n2-mist, #f4f4f4);
  /* na-fade의 opacity 페이드는 쓰지 않고, 위로 슬라이드만 나타나게 한다
     (트리거 방식은 기존 na-fade의 IntersectionObserver를 그대로 재사용). */
  opacity: 1;
  transform: translateY(20rem);
  /* 끝에서 갑자기 뚝 멈추는 느낌(ease-out-expo류)을 피하고, 끝까지
     부드럽게 감속하는 완만한 커브로 바꿨다. */
  transition: transform 1.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.n2-image-item.is-visible {
  transform: translateY(0);
}
/* PC 화면에서는 무한 스크롤 없이, 전처럼 3장이 한 줄에 고정으로 뜨는
   정적인 그리드로 되돌린다(모바일에서만 마퀴 유지). main.js가 항상
   콘텐츠를 6장으로 복제해두므로, 뒤의 복제본 3장은 숨긴다. */
@media (min-width: 901px) {
  .n2-image-marquee {
    overflow: visible;
    width: auto;
    margin-left: 0;
    transform: none;
  }
  .n2-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    animation: none;
  }
  .n2-image-item {
    width: 100%;
    min-width: 0;
  }
  .n2-image-grid .n2-image-item:nth-child(4),
  .n2-image-grid .n2-image-item:nth-child(5),
  .n2-image-grid .n2-image-item:nth-child(6) {
    display: none;
  }
}
/* 세 장이 한꺼번에 뜨지 않도록, 카드마다 시작 시점을 확실히 벌린다
   (공용 na-fade의 d1/d2 지연은 다른 곳에서도 쓰여서 여기서는 건드리지 않고
   이 갤러리 전용으로 순서를 지정한다). */
.n2-image-grid .n2-image-item:nth-child(1),
.n2-image-grid .n2-image-item:nth-child(4) { transition-delay: 0s; }
.n2-image-grid .n2-image-item:nth-child(2),
.n2-image-grid .n2-image-item:nth-child(5) { transition-delay: 0.15s; }
.n2-image-grid .n2-image-item:nth-child(3),
.n2-image-grid .n2-image-item:nth-child(6) { transition-delay: 0.3s; }
/* 세 장이 다 올라온 다음, 딱 멈추지 않고 셋이 동시에 살짝 아래로 비켜서
   그 상태로 자리를 잡는 착지감(랜딩) 연출. JS가 세 장의 상승이 모두 끝나는
   시점에 맞춰 is-dipping을 동시에 붙여준다(개별 delay 없이 셋이 함께 움직이고,
   제자리로 되돌아오지 않고 비킨 위치에 그대로 유지된다).
   페이드(투명도)는 건드리지 않고 위치만 살짝 비킨다. */
.n2-image-item.is-dipping {
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
  transform: translateY(2rem);
}
/* 위 nth-child 규칙(상승 단계용 delay)이 명시도가 더 높아서 그대로 두면
   딥 단계에도 그 지연이 새어 들어와 하나씩 순서대로 내려가 버린다.
   딥은 셋이 동시에 움직여야 하므로 명시도를 맞춰 0으로 다시 덮어쓴다. */
.n2-image-grid .n2-image-item.is-dipping { transition-delay: 0s; }
/* 타이틀/서브텍스트/버튼도 비율은 유지한 채 모바일에서는 다같이 작게 */
@media (max-width: 640px) {
  .n2-gallery-title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .n2-gallery-sub { font-size: clamp(0.875rem, 3.6vw, 1rem); }
  .n2-gallery-cta { padding: 0.625rem 1.5rem; font-size: 0.8125rem; }
}

/* ── 연혁 타임라인 (모바일: 왼쪽에 선+연도, 오른쪽에 이미지+설명) ──
   데스크톱에서는 선을 기준으로 왼쪽에 이미지, 오른쪽에 텍스트를
   position:absolute로 배치하는데, 좁은 화면에서는 그 여백(50vw 기준
   오프셋)이 확보되지 않아 이미지가 화면 밖으로 잘리고 텍스트도
   심하게 좁아지는 문제가 있었다(실제 겪음). 모바일에서는 절대배치 대신
   2열 그리드로 바꿔서, 왼쪽 열에 선을(세로로 길게, 두 행에 걸쳐), 오른쪽
   열 위칸에 이미지, 아래칸에 설명을 배치한다. 연도도 중앙정렬을 풀고
   선과 같은 왼쪽 줄에 맞춘다. */
@media (max-width: 768px) {
  .naH-year {
    /* 부모(.n2-section-inner)가 flex column + align-items:center라
       text-align만으로는 박스 자체가 가운데 있어서 안 먹혔다(실제 겪음).
       박스를 폭 100%로 늘려야 text-align:left가 실제로 왼쪽에 붙는다. */
    align-self: flex-start;
    width: 100%;
    text-align: left;
  }
  .naH-track {
    /* 오른쪽 칸(이미지+텍스트)의 실제 높이가 260px보다 커서, 선이 그
       내용보다 먼저 끝나버리는 문제가 있었다(실제 겪음 — 섹션이 짧아
       보임). 내용 높이(이미지+간격+텍스트)보다 넉넉하게 늘린다. */
    height: 340px !important;
  }
  .naH-row {
    /* 인라인 style="display:flex; align-items:center; justify-content:
       center;"가 데스크톱용으로 걸려있어서, !important 없이는 이 grid
       선언이 전혀 안 먹히고 있었다(실제 겪음 — 그 아래 grid-row 배치가
       전부 무시되고 flex row로 렌더링돼서, 이미지/텍스트 순서와 정렬이
       전부 의도와 다르게 나왔었음). 인라인 스타일을 확실히 이긴다. */
    display: grid !important;
    align-items: start !important;
    justify-content: normal !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    row-gap: 1rem;
    width: 100%;
    /* 바로 다음 연도 라벨과 완전히 붙어있어서(간격 0) 답답해 보였다
       (실제 겪음). 다음 항목 전에 여백을 준다. */
    margin-bottom: 2.5rem;
  }
  .naH-row .naH-track {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .naH-image {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: 16rem;
  }
  .naH-text {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
}