/* ============================================
   Design Tokens
   ============================================ */
:root {
  /* ---- Color ---- */
  --color-primary: #FF4744;
  --color-primary-hover: #E73533;
  --color-white: #FFFFFF;
  --color-black: #0C0C0C;
  --color-divider: rgba(255, 255, 255, 0.5);
  --color-divider-soft: rgba(255, 255, 255, 0.2);

  /* 배경: 다크 레드 (시안 기반 추정 — 실제 컬러 토큰 받으면 교체) */
  --color-bg: #2D0808;

  /* ---- Font Family ---- */
  --font-display: 'Cabinet Grotesk', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --font-body: 'Raleway', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;

  /* ---- Font Weight ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: 80px;
  --header-height: 88px;
  --section-gap: 200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

/* ============================================
   Slider Track 정렬 (명시적 media query 기반, !important 로 강제)
   - ≤768  : 16px (모바일 컨테이너 padding)
   - 769~1440 : 80px (데스크톱 컨테이너 padding)
   - ≥1441 : (viewport-1440)/2 + 80 (컨테이너 가장자리 정렬)
   ============================================ */
.focus__track,
.team__track,
.reviews__track {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

@media (max-width: 768px) {
  .focus__track,
  .team__track,
  .reviews__track {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }
}

@media (min-width: 1441px) {
  .focus__track,
  .team__track,
  .reviews__track {
    /* parent width 기준이라 스크롤바 영향 없음. body 의 50% - 720(=1440/2) + 80 = 50% - 640 */
    padding-left: calc(50% - 640px) !important;
    padding-right: calc(50% - 640px) !important;
  }
}

/* ============================================
   Base
   ============================================ */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  background-color: var(--color-bg);
  /* 배경 패턴 이미지는 사용자 제공 예정 (대각선 그라데이션 패턴) */
  /* background-image: url('../img/bg-pattern.png'); */
  background-repeat: repeat;
  line-height: 1.5;
  min-height: 100vh;
}

a:hover { opacity: 0.8; }

/* ============================================
   Typography
   ============================================ */
.text-h1 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 96px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 72px;
  line-height: 1.2;
  letter-spacing: 0;
}

.text-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 64px;
  line-height: 1.2;
  letter-spacing: 0;
}

.text-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
}

.text-h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.text-h5-light {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0;
}

.text-tagline {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.text-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: 0;
}

.text-body-16 {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: 0;
}

.text-body-18-bold {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.text-body-18-m {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.text-body-18-r {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ============================================
   Container
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

.site-header__logo-img {
  display: block;
  height: 32px;
  width: auto;
}

.site-nav__list {
  display: flex;
  gap: 48px;
}

.site-nav__link {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-transform: uppercase; /* 데스크톱: PORTFOLIO 대문자, 모바일 드로워에선 해제 */
}

.site-nav__link--active {
  color: var(--color-primary);
}

.site-header__toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.site-header__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform 0.25s, opacity 0.25s;
}

/* 모바일 드로워 닫기 버튼 */
.site-nav__close {
  position: fixed;
  top: 16px;
  right: var(--container-pad);
  width: 44px;
  height: 44px;
  display: none;
  cursor: pointer;
  z-index: 60;
  background: transparent;
}

.site-nav__close::before,
.site-nav__close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 2px;
  background-color: var(--color-white);
  transform-origin: center;
}

.site-nav__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.site-nav__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: none;
  outline: none;
  border-radius: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn:hover { opacity: 1; }

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover { background-color: var(--color-primary-hover); }

.btn__arrow {
  display: inline-block;
  font-weight: var(--fw-bold);
  transform: translateY(-1px);
}

/* ============================================
   Hero
   ============================================ */
.hero {
  padding-top: calc(var(--header-height) + 80px);
  padding-bottom: 80px;
}

.hero__title {
  color: var(--color-primary);
  margin: 0;
}

.hero__divider {
  margin: 32px 0;
  border: none;
  border-top: 1px solid var(--color-divider);
}

.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
}

.hero__badges {
  display: flex;
  gap: 60px;
  align-items: center;
}

.hero__badge {
  position: relative;
  text-align: center;
  padding: 0 32px;
  color: var(--color-white);
}

/* 좌우 월계관 — wing_left.png / wing_right.png */
.hero__badge::before,
.hero__badge::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 48px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}
.hero__badge::before {
  left: 0;
  background-image: url('../img/wing_left.png');
}
.hero__badge::after {
  right: 0;
  background-image: url('../img/wing_right.png');
}

.hero__badge-num {
  display: block;
  margin-bottom: 4px;
}

.hero__badge-label {
  display: block;
}

.hero__intro {
  flex: 1 1 auto;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  text-align: left;
}

.hero__desc {
  color: var(--color-white);
  line-height: 1.5;
}

/* ============================================
   Hero Gallery
   ============================================ */
.hero-gallery {
  padding-bottom: 160px;
}

.hero-gallery__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hero-gallery__item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

/* ============================================
   Capabilities — Pinned scroll, 3 slides crossfade
   ============================================ */
.capabilities {
  position: relative;
  /* 1920x1080 까지는 100vh, 그 이상에선 1080px 로 캡 (1080p 경험 보존) */
  height: min(100vh, 1080px);
  min-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.capabilities__top {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 80px;
}

.capabilities__label {
  color: var(--color-white);
  text-transform: uppercase;
}

.capabilities__nav {
  display: flex;
  gap: 16px;
}

.capabilities__nav-item {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.4s ease;
}

.capabilities__nav-item.is-active {
  color: var(--color-white);
}

/* 슬라이드 스택 영역 */
.capabilities__stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
}

.capabilities__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 0 32px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.capabilities__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* 중앙 이미지 — 시안 850px, 가운데 배치 (legacy 단일 이미지용 — 유지) */
.capabilities__bg {
  position: relative;
  z-index: 1;
  width: 850px;
  max-width: calc(100% - 2 * var(--container-pad));
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.capabilities__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================
   Capabilities — 3장 콜라주 (왼쪽 / 가운데 / 오른쪽)
   - 시안 비율: 좌·우 432×272, 가운데 448×440 (스테이지 1100×440)
   - z-index: 왼쪽(1) < 가운데(2) < 오른쪽(3) — 오른쪽이 가장 위
   - 각 이미지는 .js-zoom 으로 클릭 시 확대 모달
   ============================================ */
.capabilities__photos {
  position: relative;
  z-index: 1;
  width: 1100px;
  max-width: calc(100% - 2 * var(--container-pad));
  aspect-ratio: 1100 / 440;
}

.capabilities__photo {
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a1a1a;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.45s ease;
  will-change: transform;
}

.capabilities__photo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.capabilities__photo.is-empty {
  background-color: rgba(255, 255, 255, 0.04);
  cursor: default;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* 왼쪽 사진 432×272 — 위/아래 중앙(top=84/440=19.09%), 가장 뒤 */
.capabilities__photo--is-left {
  left: 0;
  top: 19.09%;
  width: 39.27%;   /* 432/1100 */
  height: 61.82%;  /* 272/440 */
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

/* 가운데 사진 448×440 — 풀높이, 수평 중앙, 중간 레이어 */
.capabilities__photo--is-center {
  left: 50%;
  top: 0;
  width: 40.73%;   /* 448/1100 */
  height: 100%;
  z-index: 2;
  transform: translate3d(-50%, 0, 0);
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* 오른쪽 사진 432×272 — 가장 앞 */
.capabilities__photo--is-right {
  right: 0;
  top: 19.09%;
  width: 39.27%;
  height: 61.82%;
  z-index: 3;
  transform: translate3d(0, 0, 0);
}

/* hover 시 약간 떠오르며 강조 */
.capabilities__photo:not(.is-empty):hover {
  filter: brightness(1.05);
  box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.capabilities__photo--is-left:not(.is-empty):hover {
  transform: translate3d(-6px, -8px, 0) scale(1.03);
}
.capabilities__photo--is-center:not(.is-empty):hover {
  transform: translate3d(-50%, -8px, 0) scale(1.03);
}
.capabilities__photo--is-right:not(.is-empty):hover {
  transform: translate3d(6px, -8px, 0) scale(1.03);
}

/* 슬라이드 전환 직후 콜라주 등장 — 살짝 떨어지듯 정착 */
.capabilities__slide.is-active .capabilities__photo {
  animation: capPhotoSettle 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.capabilities__slide.is-active .capabilities__photo--is-left  { animation-delay: 0.05s; }
.capabilities__slide.is-active .capabilities__photo--is-center { animation-delay: 0.15s; }
.capabilities__slide.is-active .capabilities__photo--is-right { animation-delay: 0.10s; }

@keyframes capPhotoSettle {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* 헤딩 — 이미지 아래 배치 */
.capabilities__heading {
  position: static;
  transform: none;
  z-index: 2;
  display: block;
  text-align: left;
  color: var(--color-primary);
  pointer-events: auto;
  margin-top: 24px;
  width: 100%;
}

.capabilities__heading-part {
  display: block;
}

.capabilities__heading-part.is-left  { padding: 0; text-align: left; }
.capabilities__heading-part.is-right { padding: 0; text-align: left; }

/* 컨트롤 (모바일 전용) */
.capabilities__controls {
  display: none;
  justify-content: center;
  gap: 32px;
  padding-bottom: 48px;
}

.capabilities__arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 20px;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}

.capabilities__arrow:hover { opacity: 0.7; }

/* 옛 ScrollReveal word 스팬 (현재 미사용, 추후 다른 헤딩에 적용 가능) */
.js-scroll-reveal .word {
  display: inline-block;
}

/* ============================================
   Featured Works
   ============================================ */
.works {
  padding: 100px 0;
}

.works__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}

.works__title {
  color: var(--color-primary);
  margin: 0;
}

.works__see-all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  text-transform: uppercase;
}

.works__row {
  display: grid;
  gap: 16px;
}

.works__row + .works__row { margin-top: 16px; }

.works__row--lg { grid-template-columns: 1fr 1fr; }
.works__row--sm { grid-template-columns: repeat(3, 1fr); }

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.work-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter, transform;
}

/* 카드 비율은 work-card 가 직접 결정 (image 가 absolute 이므로) */
.work-card {
  aspect-ratio: 16 / 10;
}
.works__row--sm .work-card {
  aspect-ratio: 4 / 3;
}

/* 막 효과 제거 — 이미지 자체의 blur 만으로 처리 */
.work-card__overlay {
  display: none;
}

/* 가운데 들어오는 서브이미지 슬라이더 — 부모의 정확히 1/2 크기 */
.work-card__slider {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition: opacity 0.35s ease 0s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0s;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  background: #111;
  z-index: 2;
}

.work-card__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.work-card__slide.is-active { opacity: 1; }

/* 캡션 — 상단:타이틀, 하단:연도/위치 (모두 중앙정렬) */
.work-card__caption {
  position: absolute;
  top: 18px;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  z-index: 3;
  pointer-events: none;
}

.work-card__title {
  color: var(--color-white);
  display: block;
  text-align: center;
  width: 100%;
  word-break: keep-all;
}

.work-card__loc {
  color: var(--color-white);
  display: block;
  text-align: center;
  flex-shrink: 0;
}

/* hover 반응 — 짧고 빠르게 요동치며 blur 처리 */
.work-card:hover .work-card__image,
.work-card:focus-within .work-card__image {
  animation: workCardWobble 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes workCardWobble {
  0%   { filter: blur(0px);  transform: translate(0, 0)      scale(1); }
  20%  { filter: blur(5px);  transform: translate(-4px, 3px) scale(1.015); }
  40%  { filter: blur(10px); transform: translate(4px, -3px) scale(1.025); }
  60%  { filter: blur(14px); transform: translate(-3px, 2px) scale(1.035); }
  80%  { filter: blur(17px); transform: translate(2px, -1px) scale(1.04); }
  100% { filter: blur(18px); transform: translate(0, 0)      scale(1.04); }
}

.work-card:hover .work-card__slider,
.work-card:focus-within .work-card__slider {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.3s ease 0.32s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.32s;
}

/* a 태그가 카드 전체를 덮어 click 영역 확보 + 절대 위치 자식들의 containing block 역할 */
.work-card > a,
.work-card > a:hover {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 1;
}

/* ============================================
   Areas of Focus
   ============================================ */
.focus {
  padding: 100px 0;
  overflow: hidden;
  /* 1920x1080 까지는 100vh, 그 이상에선 1080px 로 캡 (1080p 경험 보존) */
  min-height: min(100vh, 1080px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.focus__head {
  margin-bottom: 48px;
}

.focus__title {
  color: var(--color-primary);
  margin: 0;
}


.focus__track {
  display: flex;
  gap: 24px;
  list-style: none;
  /* padding 은 위 미디어쿼리 블록에서 처리 */
}

.focus__card {
  flex: 0 0 auto;
  width: 533px;
  display: flex;
  flex-direction: column;
}

.focus__image {
  width: 100%;
  aspect-ratio: 533 / 300;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}

.focus__card-title {
  color: var(--color-white);
  margin: 0 0 12px;
}

.focus__card-desc {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   Marquee
   ============================================ */
.marquee {
  padding: 80px 0;
  overflow: hidden;
}

.marquee__viewport {
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  will-change: transform;
}

.marquee__text {
  flex: 0 0 auto;
  color: var(--color-white);
  white-space: nowrap;
  padding-right: 0;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background-color: var(--color-black);
  padding: 80px 0 32px;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  gap: 48px;
}

.site-footer__logo-img {
  display: block;
  height: auto;
  width: auto;
}

.site-footer__nav-wrap {
  display: flex;
  align-items: center;
  gap: 64px;
}

.site-footer__nav-list {
  display: flex;
  gap: 48px;
}

.site-footer__nav-list a,
.site-footer__sns-link {
  color: var(--color-white);
  text-transform: uppercase;
}

.site-footer__sns {
  display: flex;
  gap: 16px;
}

.site-footer__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.site-footer__sns-link:hover { opacity: 1; }

.site-footer__sns-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer__divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0 0 24px;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.site-footer__copyright {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: 32px;
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   Mobile Menu (drawer) — 모바일 토글 활성 시
   ============================================ */
body.is-menu-open {
  overflow: hidden;
}

/* ===============================================================
   COMPANY STORY 페이지 전용 섹션
   =============================================================== */

/* ============================================
   Story Hero Image (히어로 아래 풀 폭 이미지)
   ============================================ */
.story-hero-image {
  padding-bottom: 120px;
}

.story-hero-image__media {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-sm);
  background-image: url('../img/story-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   What matters to us
   ============================================ */
.matters {
  padding: 100px 0;
}

.matters__title {
  color: var(--color-primary);
  margin: 0 0 48px;
}

.matters__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.matters__card {
  display: flex;
  flex-direction: column;
}

.matters__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* matters 카드 — 1번째: mission, 2번째: vision */
.matters__card:nth-child(1) .matters__image {
  background-image: url('../img/story-matters-mission.png');
}
.matters__card:nth-child(2) .matters__image {
  background-image: url('../img/story-matters-vision.png');
}

.matters__card-title {
  color: var(--color-white);
  margin: 0 0 12px;
}

.matters__card-desc {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   Why choose us?
   ============================================ */
.choose {
  padding: 100px 0;
}

.choose__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: 48px;
}

.choose__title {
  color: var(--color-primary);
  margin: 0;
  flex: 0 0 auto;
}

.choose__intro {
  max-width: 360px;
  color: var(--color-white);
  line-height: 1.5;
  margin: 0;
  align-self: flex-start;
  text-align: right;
}

.choose__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 56px;
}

.choose__card {
  height: 340px;
  background-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.choose__icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.choose__card-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* choose 카드 4개 — 카드 순서대로 아이콘 매핑 */
.choose__card:nth-child(1) .choose__icon { background-image: url('../img/story-choose-icon-01.png'); }
.choose__card:nth-child(2) .choose__icon { background-image: url('../img/story-choose-icon-02.png'); }
.choose__card:nth-child(3) .choose__icon { background-image: url('../img/story-choose-icon-03.png'); }
.choose__card:nth-child(4) .choose__icon { background-image: url('../img/story-choose-icon-04.png'); }

.choose__card-title {
  color: var(--color-white);
  margin: 0;
  line-height: 1.2;
}

.choose__card-desc {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

.choose__cta {
  display: flex;
  justify-content: center;
}

/* ============================================
   Slider — 공통 (Team / Reviews)
   ============================================ */
.js-slider-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 스냅 기준점을 트랙 padding 과 동일하게 박아야 첫 카드가 컨테이너 좌측에 정렬됨
     (없으면 브라우저가 자동으로 첫 카드를 viewport 좌측 끝에 스냅해서 padding 무시됨) */
  scroll-padding-left: 80px;
  scroll-padding-right: 80px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.js-slider-viewport::-webkit-scrollbar { display: none; }
.js-slider-viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

@media (max-width: 768px) {
  .js-slider-viewport {
    scroll-padding-left: var(--container-pad);
    scroll-padding-right: var(--container-pad);
  }
}

@media (min-width: 1441px) {
  .js-slider-viewport {
    scroll-padding-left: calc(50% - 640px);
    scroll-padding-right: calc(50% - 640px);
  }
}

.slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
}

.slider-arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-white);
  font-size: 24px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.slider-arrow:hover { opacity: 0.7; }

/* ============================================
   Our team
   ============================================ */
.team {
  padding: 100px 0;
}

.team__title {
  color: var(--color-primary);
  margin: 0 0 48px;
}

.team__track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  /* padding 은 위 미디어쿼리 블록에서 처리 */
}

.team-card {
  position: relative;
  flex: 0 0 auto;
  width: 421px;
  height: 490px;
  scroll-snap-align: start;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}

/* 카드 전체에 깔리는 배경 이미지 */
.team-card__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.team-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 기본 캡션: 배경 이미지 위에 이름/역할 노출 (그라데이션 없음, 텍스트 검정) */
.team-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px;
  transition: opacity 0.3s ease;
}

.team-card__caption .team-card__name {
  color: var(--color-black);
  margin: 0 0 4px;
}

.team-card__caption .team-card__role {
  color: var(--color-black);
  margin: 0;
}

/* hover 시 #710916 90% 막이 아래에서 위로 슬라이드 → 카드 전체 커버 */
.team-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 16px;
  background: rgba(113, 9, 22, 0.9);
  color: var(--color-white);
  transform: translateY(100%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}

/* 오버레이 상단 그룹 (이름 + 역할) */
.team-card__overlay-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-card:hover .team-card__caption,
.team-card:focus-within .team-card__caption {
  opacity: 0;
}

.team-card:hover .team-card__overlay,
.team-card:focus-within .team-card__overlay {
  transform: translateY(0);
}

.team-card__overlay .team-card__name {
  color: var(--color-white);
  margin: 0;
}

.team-card__overlay .team-card__role {
  color: var(--color-white);
  opacity: 0.9;
  margin: 0;
}

.team-card__bio {
  color: var(--color-white);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* ============================================
   Customer reviews
   ============================================ */
.reviews {
  padding: 100px 0;
}

.reviews__title {
  color: var(--color-primary);
  margin: 0 0 48px;
}

.reviews__track {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  /* padding 은 위 미디어쿼리 블록에서 처리 */
}

.review-card {
  position: relative;
  flex: 0 0 auto;
  width: 533px;
  height: 275px;
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-snap-align: start;
}

.review-card__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 48px;
  line-height: 0.7;
  color: var(--color-white);
}

.review-card__quote {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  overflow: hidden;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.review-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.review-card__author-info { line-height: 1.3; }

.review-card__name {
  color: var(--color-white);
  margin: 0 0 2px;
}

.review-card__role {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ===============================================================
   CONTACT 페이지
   =============================================================== */

/* ============================================
   Contact Hero
   ============================================ */
.contact-hero {
  padding-top: calc(var(--header-height) + 80px);
  padding-bottom: 80px;
}

.contact-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
}

.contact-hero__title {
  flex: 1 1 auto;
  color: var(--color-primary);
  margin: 0;
}

.contact-hero__desc {
  flex: 0 0 320px;
  margin: 0;
  margin-top: 24px;
  color: var(--color-white);
  line-height: 1.5;
}

/* ============================================
   Contact Info
   ============================================ */
.contact-info {
  padding-bottom: 32px;
}

.contact-info__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.contact-info__label {
  color: var(--color-white);
  margin: 0 0 12px;
}

.contact-info__value {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}

.contact-info__divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 0;
}

/* ============================================
   Contact Main (Form + Map)
   ============================================ */
.contact-main {
  padding: 64px 0 100px;
}

.contact-main__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* ============================================
   Contact Form
   ============================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;            /* 그리드 셀 높이(=맵 높이) 만큼 채움 */
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-form__field {
  display: flex;
  align-items: stretch;
  background-color: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
}

.contact-form__icon {
  flex: 0 0 auto;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 16px 20px 16px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-black);
  background: transparent;
  border: none;
  outline: none;
}

.contact-form__field--noicon input,
.contact-form__field--noicon textarea {
  padding-left: 20px;
}

.contact-form__field--textarea {
  align-items: stretch;
  flex: 1 1 auto;          /* 빈 세로 공간을 흡수 → submit 이 자연스럽게 바닥으로 */
  min-height: 140px;
}

.contact-form__field--textarea textarea {
  height: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  resize: none;
  font-family: var(--font-body);
  line-height: 1.5;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Privacy Checkbox */
.contact-form__check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
  align-self: flex-start;
}

.contact-form__check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-form__check-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contact-form__check input:checked ~ .contact-form__check-mark {
  background-color: transparent;
  border-color: var(--color-white);
}

.contact-form__check input:checked ~ .contact-form__check-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.contact-form__check-text {
  color: var(--color-white);
}

/* Submit */
.contact-form__submit {
  align-self: stretch;
  justify-content: center;
  margin-top: 12px;
}

/* ============================================
   Contact Map
   ============================================ */
.contact-map {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.04);
}

.contact-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
}

/* ===============================================================
   PRIVACY POLICY 페이지
   =============================================================== */

/* ============================================
   Policy Hero
   ============================================ */
.policy-hero {
  padding-top: calc(var(--header-height) + 80px);
  padding-bottom: 0;
  text-align: center;
}

.policy-hero__title {
  color: var(--color-primary);
  margin: 0 0 16px;
}

.policy-hero__date {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.policy-hero__divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 32px 0 0;
}

/* ============================================
   Policy Layout
   ============================================ */
.policy {
  padding: 64px 0 100px;
}

.policy__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 80px;
}

/* ----- Content (왼쪽) ----- */
.policy__content { min-width: 0; }

.policy__intro {
  color: var(--color-white);
  line-height: 1.6;
  margin: 0 0 64px;
}

.policy__section {
  margin-bottom: 56px;
  scroll-margin-top: 32px; /* anchor 점프 시 상단 여유 */
}

.policy__section:last-child { margin-bottom: 0; }

.policy__heading {
  color: var(--color-white);
  margin: 0 0 24px;
}

.policy__subheading {
  color: var(--color-white);
  margin: 28px 0 12px;
}

.policy__section p {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 16px;
}

.policy__section p:last-child { margin-bottom: 0; }

/* Contact 정보 (5번 섹션 하단) */
.policy__contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.policy__contact-label {
  color: var(--color-white);
  margin: 0 0 8px;
}

.policy__contact-value {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.5;
}

/* ----- Table of contents (오른쪽 sticky) ----- */
.policy__toc {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  align-self: start;
  min-width: 0;
}

.policy__toc-title {
  color: var(--color-white);
  margin: 0 0 20px;
}

.policy__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policy__toc-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.25s ease;
}

.policy__toc-link:hover { color: rgba(255, 255, 255, 0.7); }

.policy__toc-link.is-active {
  color: var(--color-white);
  font-weight: var(--fw-medium);
}

/* ===============================================================
   404 Page
   =============================================================== */
.not-found {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--header-height) + 40px) 0 80px;
}

.not-found__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.not-found__bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.not-found__inner {
  position: relative;
  z-index: 1;
}

.not-found__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.not-found__title {
  color: var(--color-primary);
  margin: 0;
  max-width: 16ch;
}

.not-found__desc {
  color: var(--color-white);
  margin: 0;
  line-height: 1.6;
}

.not-found__cta {
  align-self: center;
}

/* ===============================================================
   OUR PROJECTS 페이지
   =============================================================== */

/* ============================================
   Hero
   ============================================ */
.projects-hero {
  padding-top: calc(var(--header-height) + 80px);
}
.projects-hero__title {
  color: var(--color-primary);
  margin: 0;
}
.projects-hero__divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 32px 0 0;
}

/* ============================================
   Projects (Tabs + Panels)
   ============================================ */
.projects {
  padding: 48px 0 160px;
}

.projects__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
  margin-bottom: 56px;
}

/* Tabs — our_project 페이지 전용 (예외: border-radius 4px) */
.projects__tabs {
  display: inline-flex;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 4px;
}
.projects__tab {
  padding: 10px 36px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.projects__tab:hover { color: rgba(255, 255, 255, 0.8); }
.projects__tab.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.projects__intro {
  flex: 0 0 auto;
  max-width: 480px;
  color: var(--color-white);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   List Panel
   ============================================ */
.projects__panel--list {
  display: grid;
  /* 우측 프리뷰 533px 기준, 좌측은 남은 공간 차지 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 533px);
  gap: 80px;
  align-items: start;
}

/* 좌측 프로젝트 리스트 — CSS 멀티 컬럼으로 2열 자동 분배 */
.projects__list {
  columns: 2;
  column-gap: 48px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.projects__item {
  break-inside: avoid;
  display: flex;
  gap: 24px;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.25s ease;
}

.projects__year {
  flex: 0 0 56px;
  color: var(--color-white);
  transition: color 0.25s ease;
}

.projects__name {
  flex: 1 1 auto;
  color: var(--color-white);
  line-height: 1.4;
  transition: color 0.25s ease;
}

/* hover / active — 텍스트 빨강으로 */
.projects__item:hover .projects__year,
.projects__item:hover .projects__name,
.projects__item.is-active .projects__year,
.projects__item.is-active .projects__name {
  color: var(--color-primary);
}

/* 우측 프리뷰 — sticky */
.projects__preview {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.projects__preview-image {
  width: 100%;
  max-width: 533px;
  aspect-ratio: 533 / 310;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  transition: background-image 0.3s ease;
}

.projects__preview-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-end;
  color: var(--color-white);
  text-transform: uppercase;
}

/* ============================================
   Gallery Panel — 두 줄 무한 자동 슬라이드
   ============================================ */
.projects__panel--gallery {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.gallery__row {
  width: 100vw;
  margin-left: calc(50% - 50vw); /* 컨테이너 밖으로 풀폭 확장 */
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.gallery__row.is-dragging {
  cursor: grabbing;
}

.gallery__track {
  display: flex;
  gap: 30px;
  will-change: transform;
}

.gallery-card {
  flex: 0 0 auto;
  width: 480px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  display: block;
  text-decoration: none;
  color: inherit;
}
.gallery-card:hover { opacity: 1; }

.gallery-card__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* hover 오버레이 — 솔리드 0.55 막 + 타이틀/CTA/연도 */
.gallery-card__overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery-card:hover .gallery-card__overlay,
.gallery-card:focus-visible .gallery-card__overlay {
  opacity: 1;
}

.gallery-card__title {
  color: var(--color-white);
  text-align: center;
  display: block;
}

.gallery-card__cta {
  color: var(--color-white);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin: auto 0;
}

.gallery-card__year {
  color: var(--color-white);
  text-align: center;
  display: block;
}

/* 드래그 중 — 카드 클릭(링크 이동) 차단 */
.gallery__row.is-dragging .gallery-card { pointer-events: none; }

/* ===============================================================
   PROJECT DETAIL 페이지
   =============================================================== */

/* ============================================
   Detail Top (BACK + chapter indicator)
   ============================================ */
.detail {
  padding-top: calc(var(--header-height) + 24px);
  padding-bottom: 100px;
}

.detail__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.detail__back,
.detail__download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  text-transform: uppercase;
  cursor: pointer;
}

.detail__back-arrow,
.detail__download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   Slider
   ============================================ */
/* 메인 슬라이더 + 우측 미리보기 컬럼 (1089:30:199 ≈ 1fr / 30px / 199px)
   grid-template-areas:
     데스크톱 — slider/previews 한 행 + 그 아래 meta
     모바일    — slider → meta → previews 세로 순서 (시안) */
.detail__slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 199px;
  grid-template-areas:
    "slider previews"
    "meta   previews";
  column-gap: 30px;
  row-gap: 24px;
  align-items: start;          /* 자연 높이 (preview 높이는 JS 가 viewport 와 동기화) */
}

.detail__slider-row > .slider           { grid-area: slider; }
.detail__slider-row > .slider__previews { grid-area: previews; }
.detail__slider-row > .detail__meta     { grid-area: meta; }

.slider {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* 클릭 영역은 viewport 로 한정. slider 자체엔 pointer 안 줌. */
}

.slider__viewport {
  overflow: hidden;
  width: 100%;
  cursor: pointer;             /* viewport 위에서만 클릭 인터랙션 */
}

.slider__track {
  display: flex;
  width: 100%;
  will-change: transform;
}

.slider__slide {
  flex: 0 0 100%;
  position: relative;
}

.slider__slide-image {
  width: 100%;
  aspect-ratio: 1089 / 555;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ============================================
   미리보기 컬럼 (Side Thumbs)
   ============================================ */
.slider__previews {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  scrollbar-width: none;
  /* 메인 슬라이드 높이까지만 표시 → 그 이상은 스크롤 */
}
.slider__previews::-webkit-scrollbar { display: none; }

.slider__preview {
  flex: 0 0 auto;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.25s ease;
}

.slider__preview-image {
  width: 100%;
  aspect-ratio: 199 / 130;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 6px;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

.slider__preview:hover .slider__preview-image {
  opacity: 0.85;
}

.slider__preview.is-active .slider__preview-image {
  border-style: solid;
  border-color: var(--color-primary);
}

/* 보조 화살표 — 모바일 전용 (데스크톱은 커스텀 커서로 충분하므로 숨김) */
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: none;            /* 데스크톱: 숨김 */
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.slider__arrow:hover { background-color: rgba(0, 0, 0, 0.65); }
.slider__arrow--prev { left: 24px; }
.slider__arrow--next { right: 24px; }

/* ============================================
   Custom Cursor (데스크톱 전용)
   - 슬라이더 위에서 마우스를 따라오는 빨간 화살표
   - 좌/우 절반 진입 시 아치 모션 + 회전
   ============================================ */
.slider__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  margin-left: -30px;  /* 마우스 좌표를 중앙으로 */
  margin-top: -30px;
  pointer-events: none;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
}

.slider__cursor-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  /* 외부 div는 마우스 추적, 내부는 아치 모션을 위한 분리 transform */
}

.slider__cursor-inner svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   Detail Meta (title + subtitle 좌 / counter 우)
   - .detail__slider-row 안의 grid item, row-gap 으로 슬라이더와 간격
   ============================================ */
.detail__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.detail__info {
  flex: 1 1 auto;
  min-width: 0;
}

.detail__title {
  color: var(--color-white);
  margin: 0 0 12px;
  font-size: 32px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: 1.3;
}

.detail__subtitle {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.slider__counter {
  flex: 0 0 auto;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   관리자 인라인 +등록 영역 (데스크톱 전용)
   - 각 섹션의 .container 안 첫 자식으로 인라인 배치
   - 빨간 강조 박스 + 라벨 + 버튼 → admin 영역임을 한눈에 인지
   - 모바일에선 노출 안 함
   ============================================ */

/* 각 섹션이 absolute 자식(per-card 수정/삭제) 을 받도록 컨텍스트 유지 */
.hero-gallery,
.capabilities,
.works,
.focus,
.team,
.reviews,
.projects,
.detail,
.ceo-msg,
.org-chart {
  position: relative;
}

/* 관리자 영역 박스 — 각 섹션 콘텐츠 위에 노출 */
.ra-admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin: 32px 0 16px;
  background: rgba(230, 57, 70, 0.08);
  border: 1px dashed rgba(230, 57, 70, 0.55);
  border-radius: 8px;
}

.ra-admin-section-head__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff5965;
  white-space: nowrap;
}

.ra-admin-section-head__label::before {
  content: 'ADMIN ·';
  margin-right: 6px;
  opacity: 0.55;
  font-weight: 600;
}

/* +등록 버튼 — 강한 빨간 강조 + 그림자 */
.ra-admin-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(135deg, #ff5965 0%, #e63946 100%);
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(230, 57, 70, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.ra-admin-add-btn::before {
  content: '+';
  display: inline-block;
  margin-right: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.ra-admin-add-btn:hover {
  transform: translateY(-2px);
  background: #fff;
  color: #e63946 !important;
  border-color: #e63946;
  box-shadow: 0 10px 24px rgba(230, 57, 70, 0.55);
}

/* 모바일에선 관리자 박스 / 버튼 모두 숨김 */
@media (max-width: 768px) {
  .ra-admin-section-head { display: none !important; }
  .ra-admin-add-btn { display: none !important; }
}

/* ============================================
   페이지별 통짜 배경 이미지
   - 각 page-* 클래스에 대응 이미지 배치
   - background-size: 100% auto → 가로 100%, 세로는 비율 유지 (페이지 길이만큼 자연 스크롤)
   - background-color 폴백 → 콘텐츠가 이미지보다 길면 단색으로 이어짐
   - 이미지 파일은 gb/img/ 에 두고 파일명만 맞춰주세요
   ============================================ */

body.page-index,
body.page-our-project,
body.page-project-detail,
body.page-company-story,
body.page-contact,
body.page-people,
body.page-privacy-policy,
body.page-terms-of-use,
body.page-404 {
  background-color: var(--color-bg);
  background-repeat: repeat-y;       /* 페이지가 이미지보다 길면 세로로 반복 */
  background-position: center top;
  background-size: 100% auto;
  background-attachment: scroll;
}

/* 페이지별 이미지 매핑 — 파일 위치: gb/img/{파일명}_bg.webp */
body.page-index            { background-image: url('../img/index_bg.webp'); }
body.page-our-project      { background-image: url('../img/our_project_bg.webp'); }
body.page-project-detail   { background-image: url('../img/project_detail_bg.webp'); }
body.page-company-story    { background-image: url('../img/company_story_bg.webp'); }
body.page-contact          { background-image: url('../img/contact_bg.webp'); }
body.page-people           { background-image: url('../img/company_story_bg.webp'); }
body.page-privacy-policy   { background-image: url('../img/privacy_policy_bg.webp'); }
body.page-terms-of-use     { background-image: url('../img/terms_of_use_bg.webp'); }
body.page-404              { background-image: url('../img/404_bg.webp'); }

/* ============================================
   Zoom Image Modal — 클릭 시 풀스크린 확대
   ============================================ */
.js-zoom { cursor: zoom-in; }

.zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.zoom-modal.is-open { display: flex; }

.zoom-modal__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 이미지 자체 클릭은 닫기 차단, 빈 공간 클릭은 모달이 처리 */
}

.zoom-modal__image {
  /* 뷰포트 안에 항상 들어오되, stage 영역을 강제로 채워 작은 원본도 확대되어 보이도록 */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: auto;
  cursor: default;
}

.zoom-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.zoom-modal__close:hover { background: rgba(255, 255, 255, 0.2); }

.zoom-modal__prev,
.zoom-modal__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}
.zoom-modal__prev:hover,
.zoom-modal__next:hover { background: rgba(255, 255, 255, 0.2); }
.zoom-modal__prev { left: 32px; }
.zoom-modal__next { right: 32px; }

/* 단일 이미지 모드일 때 화살표/카운터 숨김 */
.zoom-modal.is-single .zoom-modal__prev,
.zoom-modal.is-single .zoom-modal__next,
.zoom-modal.is-single .zoom-modal__counter { display: none; }

.zoom-modal__counter {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 2;
}

/* ===============================================================
   PEOPLE 페이지 전용 섹션
   =============================================================== */

/* ============================================
   People Hero
   ============================================ */
.hero--people {
  padding-bottom: 20px;
}

/* ============================================
   CEO Message
   — 좌: RELATIVE & ABSOLUTE 태그라인 + CEO 이미지
   — 우: 소개 문단 + FOUNDER + CEO 정보
   ============================================ */
.ceo-msg {
  padding: 0 0 120px;
}

/* text-h2 클래스와 병행 — 색상·여백만 오버라이드 */
.ceo-msg__label {
  color: var(--color-primary);
  margin: 0 0 48px;
}

/* 2열 그리드: 좌 45% / 우 55% */
.ceo-msg__grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 72px;
  align-items: start;
}

/* 좌열: 태그라인 위 → 이미지 아래 */
.ceo-msg__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ceo-msg__tagline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.ceo-msg__image {
  width: 90%;
  aspect-ratio: 4 / 5;
  /* max-height: 480px; */
  background-color: rgba(255, 255, 255, 0.06);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* 우열: 소개 → 구분 → CEO 프로필 */
.ceo-msg__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.ceo-msg__intro {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  line-height: 1.75;
  margin: 0;
}

.ceo-msg__profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ceo-line {
    width: 80px;
    height: 1px;
    background: #fff;
    margin-bottom: 20px;
}

.ceo-msg__founder-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-primary);
}

.ceo-msg__name {
  color: var(--color-white);
  margin: 0;
  line-height: 1.2;
}

.ceo-msg__role {
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.ceo-msg__divider {
  border: none;
  border-top: 1px solid var(--color-divider-soft);
  margin: 4px 0;
}

.ceo-msg__bio {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
  margin: 0;
}

/* ============================================
   Leadership (Our Team) — 섹션 헤드 + 슬라이더
   ============================================ */
.team--people {
  padding-bottom: 120px;
}

@media (min-width: 769px) {
  .team--people .team-card {
    width: calc((100vw - 208px) / 4);
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 1441px) {
  .team--people .team-card {
    width: 308px;
  }
}

.team-people__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 40px;
}

.team-people__head-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-people__title {
  margin: 0;
}

.team-people__label {
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}

.team-people__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.team-people__eyebrow {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
  max-width: 340px;
  text-align: right;
}

/* ============================================
   Organization Chart
   ============================================ */
.org-chart {
  padding: 100px 0;
}

.org-chart__heading {
  color: var(--color-primary);
  margin: 0 0 56px;
}

/* 부서별 그룹: 부서명 헤딩 위 + 카드 3열 그리드 아래 */
.org-chart__table {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.org-dept__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 10px;
  line-height: 1.4;
}

.org-dept__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.org-member {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(61, 15, 17, 0.5);
  min-height: 76px;
}

.org-member__role {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.4;
}

.org-member__name {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-white);
  margin: 0;
  line-height: 1.3;
}

.org-member--empty {
  justify-content: center;
  align-items: center;
  border-color: rgba(255, 255, 255, 0.08);
}

.org-member__na {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 0.04em;
}