/* ============================================================
   and&end — styles
   절제된 여백, 세리프 디스플레이 + 클린 산세리프, 느린 페이드 인터랙션.
   팔레트는 따뜻한 어두운 톤(밤의 현장·LED 빛). 사이트 전체가 어둡고,
   가이드(/guide/)만 body[data-theme='light'] 로 밝은 토큰을 되돌린다.
   ============================================================ */

:root {
  color-scheme: dark;
  /* ink = 글자, paper = 바탕, sand = 띠(바탕보다 살짝 밝은 구역) — 이름은 밝은 시절 그대로, 값만 어둡다 */
  --ink: #f3efe8;
  --ink-soft: #bcb4a8;
  --paper: #15130f;
  --line: rgba(243, 239, 232, 0.14);
  --line-strong: rgba(243, 239, 232, 0.42); /* 목록 머리선처럼 또렷해야 하는 선 */
  --sand: #1c1914;
  --deep: #100e0b; /* 바탕보다 더 가라앉는 곳(영상 상자 등) */
  --gold: #a1874e;
  --gold-text: #cfae67; /* 어두운 바탕 위 작은 글자용 금색(대비 8:1). 기본 금색은 4.6:1 로 큰 글자에만 쓴다 */
  --glass: rgba(21, 19, 15, 0.55); /* 스크롤한 뒤 헤더의 유리 배경 */
  /* 섹션 띠는 바탕 위에 "밝기만 더하는 투명한 층"이다. 섹션마다 바탕색을 따로 주면 경계에 색이 어긋나 선이 생긴다. */
  --band: rgba(243, 239, 232, 0.035);
  --glow: rgba(161, 135, 78, 0.13); /* 금색 빛 */

  --serif: 'Cormorant Garamond', 'Nanum Myeongjo', serif;
  --sans:
    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

/* 밝은 페이지(가이드) — 고객사 담당자가 설명서를 읽는 곳이라 흰 종이 그대로 둔다 */
body[data-theme='light'] {
  color-scheme: light;
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --paper: #ffffff;
  --line: #e5e2dd;
  --line-strong: #111111;
  --sand: #f4f1ec;
  --deep: #111111;
  --gold-text: #7f6a3a; /* 흰·모래색 바탕 위 작은 글자용. 기본 금색은 대비 3.4:1 로 기준(4.5:1)에 못 미친다 */
  --glass: rgba(255, 255, 255, 0.2);
  --band: transparent;
  --glow: transparent;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(
    --header-h
  ); /* 앵커(#work 등)로 이동할 때 고정 헤더가 섹션 머리를 가리지 않게 */
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  word-break: keep-all; /* 한글 단어 중간에서 끊지 않는다(한 글자가 다음 줄로 홀로 떨어지는 것 방지) */
  overflow-wrap: anywhere;
}

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

/* 키보드 포커스 표시 — 영상·사진 위(첫 화면·메뉴)에서는 흰색 */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}
.hero :focus-visible,
.footer :focus-visible,
.navmenu :focus-visible,
.statement--sky :focus-visible {
  outline-color: #fff;
}

/* 고운 입자 — 어두운 그러데이션의 띠(계단) 현상을 흩는다. <main> 에 한 장: 바탕 위, 섹션의 투명한 띠·빛 아래, 글자·사진 아래.
   (섹션마다 두면 입자가 없는 섹션과 밝기가 달라 경계에 단차가 생긴다.) isolation 으로 main 안에서만 섞이고(screen), 밝은 페이지에서는 끈다. */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
body[data-theme='light'] .grain::after {
  display: none;
}
/* 뷰포트 스크롤바·오버스크롤 색은 루트의 color-scheme 을 따른다 */
html:has(body[data-theme='light']) {
  color-scheme: light;
}

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

/* 화면에는 보이지 않고 화면낭독기만 읽는 글자 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: #fff;
  /* 흰 글씨(어두운 배경): 검정 헤일로로 테두리 효과 → 어떤 배경에서도 또렷 */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.45),
    0 0 5px rgba(0, 0, 0, 0.3);
  transition:
    color 0.5s var(--ease),
    text-shadow 0.5s var(--ease);
}

/* 글라스 배경 + 세로 페이드 레이어 (콘텐츠 뒤에 깔림).
   - 스크롤 시 opacity 0→1 로 '스르륵' 등장 (배경/블러가 갑자기 켜지지 않게)
   - mask 로 위=불투명(100%) → 아래=투명(0%) 페이드해서 본문과 하드 경계 없이 연결 */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  /* 위 66%까지는 꽉 찬 글라스(글자 뒤 보호) → 그 아래부터 슬슬 투명 → 맨 아래 0 */
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.header--solid::before {
  opacity: 1;
}

/* 글자색은 페이지 팔레트로 결정 — 기본 흰색(어두운 페이지), 밝은 페이지(가이드, body[data-theme=light])에선 어둡게.
   JS 없이도 맞도록 CSS 로 정한다. 밝은 페이지에서도 푸터는 어두우므로 헤더가 푸터 위에 오면 main.js 1 이
   header--over-dark 를 붙여 흰 글자로 돌린다. */
body[data-theme='light'] .header:not(.header--over-dark) {
  color: var(--ink);
  /* 검정 글씨(밝은 배경): 흰 헤일로 테두리 */
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(255, 255, 255, 0.6);
}
/* 햄버거 선(currentColor)·EN 버튼 테두리엔 text-shadow가 안 먹으므로 drop-shadow로 동일 효과 */
.header__menu,
.header__lang {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
  transition: filter 0.5s var(--ease);
}
body[data-theme='light'] .header:not(.header--over-dark) .header__menu,
body[data-theme='light'] .header:not(.header--over-dark) .header__lang {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}
/* 밝은 페이지의 헤더가 어두운 푸터 위에 왔을 때 — 유리와 문의 버튼도 어두운 페이지 값으로 */
body[data-theme='light'] .header--over-dark::before {
  background: rgba(21, 19, 15, 0.55);
}
body[data-theme='light'] .header--over-dark .header__cta {
  background: #f3efe8;
  color: #15130f;
}
.header__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.header__amp {
  color: var(--gold);
  padding: 0 1px;
}

.header__nav {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
}

.header__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}

.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.header__link:hover::after,
.header__link[aria-current='page']::after {
  transform: scaleX(1);
}

.header__menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
}

.header__menu span {
  width: 26px;
  height: 1.5px;
  background: currentColor;
}

/* 모바일: 메뉴바를 약 70% 크기로 축소 (높이·로고·햄버거·EN 버튼) */
@media (max-width: 640px) {
  :root {
    --header-h: 54px;
  }
  .header__logo {
    font-size: 19px;
  }
  .header__menu {
    padding: 14px 10px; /* 터치 영역 44px 안팎 */
    gap: 5px;
    margin-right: -10px;
  }
  .header__menu span {
    width: 20px;
  }
  .header .header__lang {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 11px 12px; /* 높이 32px 이상 */
  }
}

/* ============================================================
   Hero — full-screen media
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 이미지·영상이 없거나 불러오기 전의 바탕 */
  background: var(--paper);
}

@media (max-width: 860px) {
  /* 좁은 화면에서는 LED 벽과 관람객이 남도록 오른쪽을 기준으로 자른다 */
  .hero__video {
    object-position: 72% center;
  }
}

/* 첫 화면 '잇는 선' 캔버스 — 스크림 위, 글자 아래 (main.js 12) */
.hero__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* 홈 첫 화면: 제목이 오른쪽의 밝은 LED 벽에 걸쳐도 읽히도록 왼쪽을 한 번 더 어둡게 */
.hero > .hero__scrim {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.05) 35%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(64px, 10vh, 120px);
}

.hero__eyebrow,
.hero__subtitle {
  /* 휴대폰에서는 밝은 LED 벽 위에 놓이므로 글자 뒤에 옅은 그림자를 깐다 */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  animation: rise 1s var(--ease) 0.2s forwards;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 7.2vw, 106px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 18px 0 20px;
  opacity: 0;
  animation: rise 1.1s var(--ease) 0.35s forwards;
}

.hero__subtitle {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 300;
  max-width: 34ch;
  opacity: 0;
  animation: rise 1.1s var(--ease) 0.5s forwards;
}

.hero__cta {
  display: inline-block;
  margin-top: 36px;
  padding: 16px 40px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
  opacity: 0;
  animation: rise 1.1s var(--ease) 0.65s forwards;
}

.hero__cta:hover {
  background: #f3efe8;
  color: #15130f;
}

.hero__scroll {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(40px, 8vh, 80px);
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: 0.3em;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: currentColor;
  transform-origin: top;
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%,
  100% {
    transform: scaleY(0.3);
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================================
   Statement
   ============================================================ */
.statement {
  padding: clamp(100px, 18vh, 220px) clamp(20px, 5vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.statement__text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3.7vw, 51px);
  line-height: 1.25;
  color: var(--ink);
}

.statement__amp {
  color: var(--gold);
  font-style: italic;
  padding: 0 6px;
}

/* 별이 이어진 밤하늘 배경 — 첫 화면에서 이어지는 어두운 구간 */
.statement--sky {
  position: relative;
  isolation: isolate;
  max-width: none;
  overflow: hidden;
  background: var(--deep);
}
.statement__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 스크롤 시차(main.js 14)로 움직여도 가장자리가 비지 않게 조금 키운다 */
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.16);
}
.statement--sky .statement__text {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  color: #f3efe8;
}

/* ============================================================
   Work stack — 블록 스택
   ============================================================ */
.stack {
  padding: 0 clamp(20px, 5vw, 64px) clamp(80px, 12vh, 160px);
  max-width: 1440px;
  margin: 0 auto;
}

.stack__intro {
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vh, 72px);
  margin-bottom: clamp(48px, 8vh, 96px);
}

.stack__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.stack__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 3.8vw, 54px);
  line-height: 1.02;
  margin: 16px 0 24px;
}

/* 제목 글자별 페이드+블러 디졸브 등장 — main.js 가 런타임에 .ch 로 분할(에디터에선 미적용).
   .ch 스팬이 없으면(에디터·JS미실행) 일반 텍스트로 그대로 노출 */
.stack__heading .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(8px);
  transition:
    opacity 0.7s var(--ease),
    filter 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.stack__heading.is-in .ch {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition-delay: calc(var(--i) * 0.045s);
}
@media (prefers-reduced-motion: reduce) {
  .stack__heading .ch {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

.stack__lead {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* 분야 필터 (main.js 13, 작업 목록 /work/) — JS 가 켜질 때만 보인다. 눌린 버튼은 글자색 바탕에 바탕색 글자 */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 40px);
}
.work-filter[hidden] {
  display: none;
}
.work-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.work-filter__btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.work-filter__btn[aria-pressed='true'] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.work-filter__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.work-filter__count {
  font-size: 11px;
  color: var(--ink-soft);
}
.work-filter__btn[aria-pressed='true'] .work-filter__count {
  color: inherit;
  opacity: 0.7;
}

.stack__list {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 6vh, 80px);
}

.work.is-hidden {
  display: none;
}
.work.is-entering {
  animation: work-enter 0.6s var(--ease) both;
}
@keyframes work-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work.is-entering {
    animation: none;
  }
}

/* 개별 블록 */
.work {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  opacity: 0;
  /* 등장 애니메이션: 아래에서 위로 (거리·속도는 site.json anim 에서 설정) */
  transform: translateY(var(--work-rise, 48px));
  transition:
    opacity var(--work-reveal-ms, 1s) var(--ease),
    transform var(--work-reveal-ms, 1s) var(--ease);
}

.work--reversed {
  grid-template-columns: 0.85fr 1.15fr;
}

.work--reversed .work__media {
  order: 2;
}

.work--visible {
  opacity: 1;
  transform: translateY(0);
}

.work__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sand);
}

.work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--work-zoom-ms, 1.2s) var(--ease);
}

.work:hover .work__media img {
  transform: scale(var(--work-scale, 1.06));
}

.work__index {
  position: absolute;
  top: 20px;
  left: 24px;
  font-family: var(--serif);
  font-size: 20px;
  color: #fff;
  mix-blend-mode: difference;
  letter-spacing: 0.05em;
}

.work__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.work__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.9vw, 38px);
  line-height: 1.1;
  margin: 14px 0 18px;
}
/* 제목이 작업 페이지로 가는 링크(카드의 유일한 키보드 초점) */
.work__title a {
  transition: color 0.3s var(--ease);
}
.work:hover .work__title a,
.work__title a:hover {
  color: var(--gold-text);
}

.work__desc {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  color: var(--ink-soft);
  max-width: 40ch;
}

.work__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.work__more span {
  transition: transform 0.4s var(--ease);
}

.work:hover .work__more span,
.work__more:hover span {
  transform: translateX(6px);
}
/* ============================================================
   Footer
   ============================================================ */
/* 푸터 — 밝은 페이지(가이드)에서도 어둡다. 그래서 토큰 대신 값을 직접 쓴다 */
.footer {
  background: #100e0b;
  color: #f3efe8;
  border-top: 1px solid rgba(243, 239, 232, 0.1);
}

.footer__cta {
  padding: clamp(96px, 16vh, 200px) clamp(20px, 5vw, 64px);
  text-align: center;
  border-bottom: 1px solid rgba(243, 239, 232, 0.12);
}

.footer__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #bcb4a8;
}

.footer__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(29px, 4.8vw, 64px);
  line-height: 1.04;
  margin: 20px 0 40px;
}

.footer__mail {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 38px);
  border-bottom: 1px solid rgba(243, 239, 232, 0.4);
  padding-bottom: 6px;
  transition: border-color 0.4s var(--ease);
}

.footer__mail:hover {
  border-bottom-color: #f3efe8;
}

/* 푸터 문의 버튼 — 메일 주소보다 앞에 두는 주된 행동 */
.footer__action {
  margin-bottom: 28px;
}
.footer__brand-link {
  display: inline-block;
  color: inherit;
}

.footer__meta {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__brand {
  font-family: var(--serif);
  font-size: 24px;
}

.footer__brand span {
  color: var(--gold);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__links a {
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}

.footer__links a:hover {
  opacity: 1;
}

.footer__copy {
  font-size: 12px;
  color: rgba(243, 239, 232, 0.55);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .header__nav {
    display: none;
  }
  .header__menu {
    display: flex;
  }

  .work,
  .work--reversed {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .work--reversed .work__media {
    order: 0;
  }
  .work__media {
    aspect-ratio: 16 / 10;
  }

  .footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__links {
    gap: 12px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  /* 첫 화면 글자는 rise 애니메이션으로만 나타나므로, 애니메이션을 끄면 바로 보이게 한다 */
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__cta {
    opacity: 1;
    transform: none;
  }
  .work {
    opacity: 1;
    transform: none;
  }
}