:root {
  color-scheme: only light;
  --color-dark: #3e6b87; /* Sea blue — 면 */
  --color-paper: #f6f5ef; /* Page cream */
  --color-light: var(--color-paper); /* Cream 역할 — 현 배경 유지 */
  --color-ink: #2e2b26; /* Ink */
  --color-dusty: #6c869c; /* Dusty blue — 보조 */
  --color-muted-dark: rgba(255, 255, 255, 0.7);
  --color-faint-dark: rgba(255, 255, 255, 0.4);
  --color-line-dark: rgba(255, 255, 255, 0.1);
  --color-line-light: rgba(36, 36, 39, 0.18);
  --color-rule: rgba(108, 134, 156, 0.28);
  --color-cream: #f7f5f0;
  --color-accent: #efba33; /* Marigold — 액센트 */
  --font-serif: "Instrument Serif", "Noto Serif KR", Georgia, serif;
  --font-condensed: "Instrument Serif", "Noto Serif KR", Georgia, serif;
  --font-mono: "Pretendard", Arial, sans-serif;
  --font-pretendard: "Pretendard", Arial, sans-serif;
  --page-gutter: clamp(1rem, 2.8vw, 3rem);
  --section-space: clamp(6rem, 12vw, 12rem);
  --section-title-size: clamp(3.4rem, 6vw, 6.5rem);
  --section-title-badge-size: clamp(1.133rem, 2vw, 2.167rem);
  --header-height: 4.5rem;
  --utility-bar-height: 48px;
  --card-shadow-safe-space: 3.5rem;
  --ease-premium: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 삼성 인터넷의 '웹사이트 어둡게'가 라이트 팔레트를 강제 반전하지 않도록 자체 대응을 명시한다. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
    --color-dark: #3e6b87;
    --color-paper: #f6f5ef;
    --color-light: var(--color-paper);
    --color-ink: #2e2b26;
    --color-dusty: #6c869c;
    --color-muted-dark: rgba(255, 255, 255, 0.7);
    --color-faint-dark: rgba(255, 255, 255, 0.4);
    --color-line-dark: rgba(255, 255, 255, 0.1);
    --color-line-light: rgba(36, 36, 39, 0.18);
    --color-rule: rgba(108, 134, 156, 0.28);
    --color-cream: #f7f5f0;
    --color-accent: #efba33; /* Marigold — 액센트 */
  }

  html,
  body,
  .theme-light {
    background-color: var(--color-light);
    background-image: linear-gradient(var(--color-light), var(--color-light));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* 모바일·데스크톱 바탕색 통일 (overscroll 영역 포함) */
  background-color: var(--color-light);
  background-image: linear-gradient(var(--color-light), var(--color-light));
}

body {
  margin: 0;
  background-color: var(--color-light);
  background-image: linear-gradient(var(--color-light), var(--color-light));
  color: var(--color-ink);
  font-family: var(--font-mono);
  overflow-x: clip;
}

.initial-loader {
  isolation: isolate;
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: transform, opacity;
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.initial-loader.is-complete {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%) translateZ(0);
}

/* 워드마크+진행바를 한 칼럼으로 묶어 바 폭 = 워드마크 폭 */
.initial-loader__stack {
  display: inline-grid;
  justify-items: stretch;
  row-gap: clamp(0.9rem, 2vh, 1.6rem);
}

.initial-loader__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(3.6rem, 10vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.85;
  /* 웹폰트(Instrument Serif) 로드 전 대체 세리프로 그려졌다 좁아지는 FOUT 점프 방지:
     폰트 준비 후 페이드인 */
  opacity: 0;
}

.initial-loader.is-font-ready .initial-loader__wordmark {
  animation: initial-loader-pulse 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.initial-loader__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}

.initial-loader__track {
  display: block;
  height: 1px;
  overflow: hidden;
  background: rgba(46, 43, 38, 0.2);
}

.initial-loader__progress {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 120ms ease-out;
  will-change: transform;
}

.initial-loader__percent {
  min-width: 3.4ch;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: right;
}

@keyframes initial-loader-pulse {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

.page-home main {
  background-color: var(--color-light);
  background-image: linear-gradient(var(--color-light), var(--color-light));
}

.page-home {
  --section-title-size: clamp(3.75rem, 6.5vw, 7.25rem);
}

body.menu-open {
  overflow: hidden;
}

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

html.lenis.lenis-stopped {
  overflow: clip;
}

html.view-all-open,
html.view-all-open body,
html.project-modal-open,
html.project-modal-open body,
html.overview-confirm-open,
html.overview-confirm-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

html.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@keyframes page-fade-out {
  to { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
}

::view-transition-old(root) {
  animation: page-fade-out 340ms ease both;
}

::view-transition-new(root) {
  animation: page-fade-in 380ms ease both;
}

html[data-astro-transition-fallback="old"] body {
  animation: page-fade-out 340ms ease both;
}

html[data-astro-transition-fallback="new"] body {
  animation: page-fade-in 380ms ease both;
}

/* v5.85 프로젝트 상세 이전/다음 카드 전환(content.js가 <html data-pager="prev|next">를 붙인다).
   다음: 현재 페이지가 왼쪽으로 살짝 밀리며 사라지고 새 페이지가 오른쪽에서 들어온다. 이전: 반대.
   헤더·유틸리티 바는 제자리에 두고, 다른 링크의 기존 페이드 전환은 그대로 둔다. */
@keyframes pager-out-left {
  to { opacity: 0; transform: translate3d(-5vw, 0, 0); }
}

@keyframes pager-out-right {
  to { opacity: 0; transform: translate3d(5vw, 0, 0); }
}

@keyframes pager-in-from-right {
  from { opacity: 0; transform: translate3d(5vw, 0, 0); }
}

@keyframes pager-in-from-left {
  from { opacity: 0; transform: translate3d(-5vw, 0, 0); }
}

html[data-pager="next"]::view-transition-old(root) {
  animation: pager-out-left 700ms var(--ease-premium) both;
}

html[data-pager="next"]::view-transition-new(root) {
  animation: pager-in-from-right 700ms var(--ease-premium) both;
}

html[data-pager="prev"]::view-transition-old(root) {
  animation: pager-out-right 700ms var(--ease-premium) both;
}

html[data-pager="prev"]::view-transition-new(root) {
  animation: pager-in-from-left 700ms var(--ease-premium) both;
}

html[data-pager] .site-header {
  view-transition-name: pager-header;
}

html[data-pager] .utility-bar {
  view-transition-name: pager-utility;
}

html[data-pager]::view-transition-group(pager-header),
html[data-pager]::view-transition-group(pager-utility),
html[data-pager]::view-transition-new(pager-header),
html[data-pager]::view-transition-new(pager-utility) {
  animation: none;
}

html[data-pager]::view-transition-old(pager-header),
html[data-pager]::view-transition-old(pager-utility) {
  display: none;
}

/* view-transition을 지원하지 않는 브라우저(fallback="animate")도 같은 방향으로 */
html[data-pager="next"][data-astro-transition-fallback="old"] body {
  animation: pager-out-left 700ms var(--ease-premium) both;
}

html[data-pager="next"][data-astro-transition-fallback="new"] body {
  animation: pager-in-from-right 700ms var(--ease-premium) both;
}

html[data-pager="prev"][data-astro-transition-fallback="old"] body {
  animation: pager-out-right 700ms var(--ease-premium) both;
}

html[data-pager="prev"][data-astro-transition-fallback="new"] body {
  animation: pager-in-from-left 700ms var(--ease-premium) both;
}

/* 동작 줄이기: 이전/다음 이동은 전환 없이 바로 바뀐다. */
@media (prefers-reduced-motion: reduce) {
  html[data-pager]::view-transition-old(root),
  html[data-pager]::view-transition-new(root),
  html[data-pager][data-astro-transition-fallback] body {
    animation: none;
  }
}

section,
footer {
  scroll-margin-top: var(--header-height);
}

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

button {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-light);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-light);
  color: var(--color-ink);
  font-size: 0.75rem;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.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;
}

.theme-dark {
  background: var(--color-dark);
  color: var(--color-light);
}

.theme-light {
  background-color: var(--color-light);
  background-image: linear-gradient(var(--color-light), var(--color-light));
  color: var(--color-ink);
}

/* v5.22: project media-grid text cells share the visual-media span system. */
.project-media__item.project-media__item--text {
  display: flex;
  align-items: center;
  padding: clamp(1rem, 3.5vw, 4.5rem);
  background: transparent;
}

.project-media__item.project-media__item--placeholder {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.project-media__item--align-left {
  justify-content: flex-start;
}

.project-media__item--align-center {
  justify-content: center;
}

.project-media__item--align-right {
  justify-content: flex-end;
}

.project-media__text {
  width: min(100%, 60ch);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
}

.project-media__text--s {
  font-size: 0.95rem;
  line-height: 1.6;
}

.project-media__text--m {
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.45;
}

.project-media__text--l {
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.project-media__text--align-left {
  text-align: left;
}

.project-media__text--align-center {
  text-align: center;
}

.project-media__text--align-right {
  text-align: right;
}

.project-media__text p {
  margin: 0;
}

.project-media__text p + p {
  margin-top: 0.7em;
}

.font-serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

.font-condensed {
  font-family: var(--font-condensed);
  font-weight: 600;
}

.img-bw {
  filter: grayscale(1);
}

.sq-bullet {
  display: block;
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--color-accent);
}

.section-label {
  display: block;
  margin-bottom: 1.5rem;
  font-size: 0.69rem;
  letter-spacing: 0.14em;
}

[data-parallax] {
  will-change: translate;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--page-gutter);
  color: var(--color-light);
  transition: color 0.2s ease;
}

.utility-bar {
  --utility-progress: 0;
  --utility-blur: 0px;
  --utility-saturation: 1;
  --utility-text-color: rgb(246 245 239);
  --utility-knob-color: rgb(46 43 38);
  position: fixed;
  inset: auto 0 0;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1rem;
  height: auto;
  min-height: 0;
  padding: 10px max(20px, var(--page-gutter)) 10px calc(max(20px, var(--page-gutter)) / 2);
  border-top: 1px solid rgb(255 255 255 / calc(0.4 * var(--utility-progress)));
  border-radius: 10px 10px 0 0;
  background: rgb(255 255 255 / calc(0.85 * var(--utility-progress)));
  color: var(--utility-text-color);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .utility-bar {
    background: rgb(255 255 255 / calc(0.55 * var(--utility-progress)));
    -webkit-backdrop-filter: blur(var(--utility-blur)) saturate(var(--utility-saturation));
    backdrop-filter: blur(var(--utility-blur)) saturate(var(--utility-saturation));
  }
}

.lang-switch {
  position: static;
  z-index: 47;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
}

.lang-switch__pill {
  position: relative;
  width: 28px;
  height: 16px;
  flex: none;
  background: currentColor;
  border-radius: 13.5px;
}

.lang-switch__pill::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--utility-knob-color);
  border-radius: 50%;
  content: "";
  transform: translateX(12px);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

html[lang="ko"] .lang-switch__pill::after {
  transform: translateX(0);
}

.lang-switch__labels {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: inherit;
  transition: color 200ms ease;
}

.lang-switch__option {
  font-weight: 400;
  opacity: 0.5;
  transition: color 200ms ease;
}

.lang-switch__option.is-active {
  color: inherit;
  font-weight: 700;
  opacity: 1;
}

.lang-switch__sep {
  opacity: 0.5;
}

.locale-widget {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-family: var(--font-serif);
  line-height: 1.2;
  pointer-events: none;
  transition: color 200ms ease;
}

.locale-widget.is-on-light {
  color: inherit;
}

.locale-widget__city {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
}

.locale-widget__time,
.locale-widget__temp {
  font-size: 15px;
}

.locale-widget__time + .locale-widget__temp {
  /* 시간-온도 간격: 기존 5px의 2배 */
  margin-left: 0;
}

.locale-widget__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.locale-widget__icon svg {
  width: 100%;
  height: 100%;
}

/* 언어 전환 시 부드러운 페이드 */
body {
  transition: opacity 240ms ease;
}

html.lang-fade body {
  opacity: 0;
}

.cookie-card {
  /* v5.80: omaivillas.com 쿠키 바 — 화면 아래 전체 폭 단색 띠, 가운데 700px 안에 문장(왼쪽)·버튼 두 개(오른쪽).
     버튼 비율은 참고(48px 버튼/68px 바)를 우리 하단 바 높이(48px)에 맞춰 줄였다. 표시 중에는 유틸리티 바가 이 높이만큼 위로 밀린다. */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  min-height: var(--utility-bar-height);
  padding: 6px var(--page-gutter);
  /* v5.86: 위 날씨·언어 바(스크롤 후 상태)와 같은 유리 효과 */
  border-top: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.85);
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 쿠키 바 표시 중 유틸리티 바를 쿠키 바 실제 높이만큼 위로(높이는 main.js가 --cookie-bar-height로 넣는다) */
.utility-bar {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.has-cookie-bar .utility-bar {
  transform: translateY(calc(-1 * var(--cookie-bar-height, var(--utility-bar-height))));
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .cookie-card {
    background: rgb(255 255 255 / 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.cookie-card[hidden] {
  display: none;
}

.cookie-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-card__inner {
  display: flex;
  align-items: center;
  /* v5.82: 문구와 버튼을 붙여 가운데로(이전: 양 끝 정렬) */
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 700px;
  min-height: calc(var(--utility-bar-height) - 12px);
  margin: 0 auto;
}

.cookie-card__copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375;
}

.cookie-card__copy a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.cookie-card__copy a:hover,
.cookie-card__copy a:focus-visible {
  color: var(--color-accent);
}

.cookie-card__actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* 참고 버튼 모양(모서리 없음, 채움·옅은 바탕). v5.82: 글자는 쿠키 문구와 같은 세리프·보통 굵기, 크기는 더 작게 */
.cookie-card__choice {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: rgba(46, 43, 38, 0.08);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease;
}

.cookie-card__choice--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.cookie-card__choice:hover,
.cookie-card__choice:focus-visible {
  background: rgba(46, 43, 38, 0.16);
}

.cookie-card__choice--primary:hover,
.cookie-card__choice--primary:focus-visible {
  background: rgba(46, 43, 38, 0.82);
}

.site-header.site-header--on-light {
  color: var(--color-ink);
}

.site-header.is-menu-open {
  z-index: 55;
  color: var(--color-light);
}

/* 판이 올라가는 동안에도 헤더를 판 위에 두고, 판의 아래 가장자리가 헤더를 지날 즈음 원래 글자색으로 돌린다. */
.site-header.is-menu-closing {
  z-index: 55;
  transition: color 0.25s ease 0.6s;
}

.site-header__control {
  width: max-content;
  padding: 0.6rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* v5.75 메뉴 버튼: 알약 안에서 MENU와 CLOSE 라벨이 위아래로 교체된다. */
.site-header__control.site-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: max-content;
  min-width: 90px;
  height: 37px;
  padding: 0 18px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-family: var(--font-pretendard);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

/* 두 라벨을 같은 칸에 겹쳐 두어 트랙 폭이 더 긴 CLOSE에 맞춰진다. */
.site-header__menu-track {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.site-header__menu-label {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: transform 0.9s var(--ease-premium), opacity 0.9s var(--ease-premium);
}

.site-header__menu-label--menu {
  opacity: 1;
  transform: none;
}

.site-header__menu-label--close {
  opacity: 0;
  transform: translateY(100%);
}

.site-header.is-menu-open .site-header__menu-label--menu {
  opacity: 0;
  transform: translateY(-100%);
}

.site-header.is-menu-open .site-header__menu-label--close {
  opacity: 1;
  transform: none;
}

/* 글자 굴림: 글자마다 같은 글자 두 벌(top/bottom)을 마스크 안에 두고 호버 때 위로 굴린다.
   마스크는 위·아래 패딩을 포함해 자르므로 숨김 거리를 120%로 둔다. */
.roll-char {
  display: inline-flex;
  margin: -0.14em 0 -0.1em;
  padding: 0.14em 0 0.1em;
  overflow: hidden;
  line-height: 1;
  vertical-align: top;
}

.roll-char__in {
  position: relative;
  display: block;
}

.roll-char__top,
.roll-char__bottom {
  display: block;
  /* 호버 굴림은 참고값(.35s·18ms)의 절반 속도 */
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--c) * 36ms);
}

.roll-char__bottom {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(120%);
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-header__menu:hover .roll-char__top,
  .menu-overlay a:hover .roll-char__top,
  .menu-overlay button:hover .roll-char__top,
  a.roll-link:hover .roll-char__top,
  button.roll-link:hover .roll-char__top {
    transform: translateY(-120%);
  }

  .site-header__menu:hover .roll-char__bottom,
  .menu-overlay a:hover .roll-char__bottom,
  .menu-overlay button:hover .roll-char__bottom,
  a.roll-link:hover .roll-char__bottom,
  button.roll-link:hover .roll-char__bottom {
    transform: none;
  }
}

.site-header__logo {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.3vw, 2.2rem);
  line-height: 1;
}

.link-underline {
  position: relative;
}

.link-underline::after {
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* v5.75 메뉴 화면: 위에서 내려오는 판 + 계단식 큰 메뉴 + 하단 작은 링크 줄.
   --d는 항목별 진입 지연이고, 닫힐 때는 열림 클래스가 빠져 지연 없이 되돌아간다. */
.menu-overlay {
  --menu-pad-top: clamp(96px, 12vh, 160px);
  --menu-pad-bottom: 40px;
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  max-width: 100vw;
  min-height: 100svh;
  overflow-x: clip;
  overflow-y: auto;
  background: var(--color-dark);
  color: var(--color-light);
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  transition: transform 0.9s var(--ease-premium), visibility 0s linear 0.9s;
}

.menu-overlay.is-open {
  pointer-events: auto;
  transform: none;
  visibility: visible;
  transition: transform 0.9s var(--ease-premium), visibility 0s linear 0s;
}

/* JS가 닫을 때 975ms 동안 붙였다 뗀다 — 판이 다 올라간 뒤에 숨긴다. */
.menu-overlay.is-closing {
  visibility: visible;
  transition: transform 0.975s var(--ease-premium), visibility 0s linear 0.975s;
}

.menu-overlay__inner {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: var(--menu-pad-top) var(--page-gutter) var(--menu-pad-bottom);
}

.menu-overlay__nav {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
}

.menu-overlay__list {
  --last: 4;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-overlay__item {
  --d: calc(0.45s + var(--i) * 0.08s);
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.menu-overlay__item:last-child {
  padding-bottom: 0;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
}

.menu-overlay__item + .menu-overlay__item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--color-cream) 35%, transparent);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-premium);
}

.menu-overlay.is-open .menu-overlay__item + .menu-overlay__item::before {
  transform: scaleX(1);
  transition-delay: var(--d);
}

/* 항목마다 --i/--last 비율만큼 오른쪽으로 밀어 첫 줄은 왼쪽 끝, 마지막 줄은 오른쪽 끝에 놓는다. */
.menu-overlay__link {
  --f: calc(var(--i) / var(--last));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  margin-left: calc(var(--f) * 100%);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-serif);
  /* 5줄과 가로선이 화면 높이 안에 들어오도록 줄 수 기준 상한을 둔다. */
  font-size: max(2.25rem, min(clamp(3.69rem, 2.385rem + 5.355vw, 9rem), calc((100svh - var(--menu-pad-top) - var(--menu-pad-bottom)) / 5 - 40px)));
  font-weight: 400;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(calc(var(--f) * -100%));
}

.menu-overlay__item:last-child .menu-overlay__link {
  margin-left: 0;
  transform: none;
}

html[lang="ko"] .menu-overlay__link {
  text-transform: none;
}

.roll-chars {
  display: block;
  white-space: nowrap;
}

/* 글자 진입: 닫힘 상태에서는 마스크 아래로 내려가 있다가 열리면 항목 지연 + 글자 순번×25ms 뒤 올라온다. */
.menu-overlay .roll-char__in {
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.84, 0);
}

.menu-overlay.is-open .roll-char__in {
  transform: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d) + var(--c) * 25ms);
}

/* 현재 페이지 항목(aria-current="page")만 액센트 글자와 마름모를 쓴다. */
.menu-overlay__link[aria-current="page"] {
  color: var(--color-accent);
}

.menu-overlay__diamond {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 0.24em;
  height: 0.24em;
  overflow: hidden;
}

.menu-overlay__diamond span {
  display: block;
  width: 0.16em;
  height: 0.16em;
  border-radius: 1px;
  background: var(--color-accent);
  transform: translateY(165%) rotate(45deg);
  transition: transform 0.6s var(--ease-premium);
}

.menu-overlay.is-open .menu-overlay__link[aria-current="page"] .menu-overlay__diamond span {
  transform: rotate(45deg);
  transition-delay: var(--d);
}

/* 작은 링크 줄: 마지막 줄 왼쪽에 놓인다. 세로 가운데 정렬이라 tagline 옆에 이메일·인스타그램이 가운데 놓인다. */
.menu-overlay__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-overlay__small {
  --d: calc(0.7s + var(--i) * 0.06s);
}

/* v5.77 작은 링크(이메일 복사·인스타그램)는 메뉴와 푸터가 함께 쓴다.
   글자·아이콘·화살표가 올라오는 진입은 메뉴가 열릴 때(.menu-overlay.is-open), 푸터가 보일 때(.site-foot.is-visible) 시작하고 --d가 시작 지연이다. */
.roll-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-family: var(--font-pretendard);
  font-size: clamp(1.125rem, calc(1.085rem + 0.165vw), 1.25rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.menu-overlay__secondary .roll-char__in {
  transform: translateY(140%);
}

/* 문의 창 제목("Shall we work together?")과 같은 서체. 링크가 아니라 호버·클릭 없음. */
.menu-overlay__tagline {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, calc(1.8rem + 0.9vw), 2.85rem);
  font-style: italic;
  font-weight: 200;
  letter-spacing: -0.035em;
}

/* 이탤릭 기울기(끝의 물음표 등)가 글자 마스크(overflow hidden)에 잘리지 않게 마스크 오른쪽에만 여유를 둔다. */
.menu-overlay__tagline .roll-char {
  margin-right: -0.12em;
  padding-right: 0.12em;
}

/* 이메일: 클릭하면 복사, 바로 위 가운데 작은 문구가 click to copy → copied 로 굴러 바뀐다. */
.roll-link--copy {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.roll-link__copy-state {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  display: grid;
  justify-items: center;
  height: 1.2em;
  overflow: hidden;
  /* 이메일 글자의 3/4. 모바일에서 너무 작아지지 않게 하한 13.5px (p·y 꼬리가 잘리지 않게 높이에 여유) */
  font-size: max(0.75em, 13.5px);
  font-weight: 300;
  text-align: center;
  line-height: 1;
  text-transform: lowercase;
  transform: translateX(-50%);
}

.roll-link__copy-label {
  grid-area: 1 / 1;
  transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium);
}

.roll-link__copy-label:last-child {
  opacity: 0;
  transform: translateY(100%);
}

.roll-link__copy-state[data-roll-copy-state="copied"] .roll-link__copy-label:first-child {
  opacity: 0;
  transform: translateY(-100%);
}

.roll-link__copy-state[data-roll-copy-state="copied"] .roll-link__copy-label:last-child {
  opacity: 1;
  transform: none;
}

.roll-link__ig {
  display: inline-flex;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
}

.roll-link__ig svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transform: translateY(140%);
  transition: transform 0.6s var(--ease-premium);
}

.menu-overlay.is-open .roll-link__ig svg,
.site-foot.is-visible .roll-link__ig svg {
  transform: none;
  transition-delay: var(--d);
}

.roll-link__arrow {
  display: inline-flex;
  flex: none;
  width: 11px;
  height: 11px;
  overflow: hidden;
}

.roll-link__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transform: translateY(165%);
  transition: transform 0.6s var(--ease-premium);
}

.menu-overlay.is-open .roll-link__arrow svg,
.site-foot.is-visible .roll-link__arrow svg {
  transform: none;
  transition-delay: var(--d);
}

@media (max-width: 1024px) {
  .menu-overlay {
    --menu-pad-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  /* 참고 사이트처럼 1024px 이하에서는 목록을 세로 가운데에 둔다. */
  .menu-overlay__list {
    justify-content: center;
  }

  .menu-overlay__item,
  .menu-overlay__item:last-child {
    flex-direction: row;
    justify-content: center;
  }

  .menu-overlay__link {
    margin-left: 0;
    transform: none;
  }

  /* 작은 링크 줄은 하단 가운데에 고정한다. 글자·간격은 폭에 맞춰 줄여 한 줄에 들어오게 한다. */
  .menu-overlay__secondary {
    position: fixed;
    bottom: calc(92px + env(safe-area-inset-bottom));
    left: 50%;
    flex-wrap: nowrap;
    gap: clamp(10px, 3vw, 80px);
    transform: translateX(-50%);
  }

  /* tagline은 링크 글자의 1.5배. 768px에서도 한 줄에 들어오도록 링크 글자는 3.5vw→3vw로 줄였다. */
  .menu-overlay .roll-link {
    font-size: clamp(0.75rem, 3vw, 2rem);
  }

  .menu-overlay .menu-overlay__tagline {
    font-size: clamp(1.125rem, 4.5vw, 3rem);
  }
}

@media (max-width: 480px) {
  .menu-overlay {
    --menu-pad-top: calc(132px + env(safe-area-inset-top));
  }

  .menu-overlay__item {
    padding: 12px 0;
  }

  .menu-overlay__link {
    font-size: clamp(2.2rem, 10.5vw, 3.5rem);
  }

  .menu-overlay__secondary {
    gap: clamp(10px, 2.6vw, 18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-overlay *,
  .menu-overlay *::before,
  .site-foot,
  .site-foot *,
  .site-header__menu-label,
  .roll-char__top,
  .roll-char__bottom {
    transition: none !important;
  }
}

.menu-overlay__note {
  max-width: 38rem;
  margin: 0;
  color: var(--color-faint-dark);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  line-height: 1.6;
}

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: calc(var(--header-height) + 1rem) 0 1rem;
}

.page-home main > .hero ~ section,
.page-home main > .hero ~ div:not(.view-all-modal),
.page-home .pl-footer {
  position: relative;
  z-index: 1;
}

/* Keep every post-hero section as an opaque surface above the sticky hero video.
   v5.80: 단 인트로(.intro)는 투명 — 문단이 고정된 영상 위로 지나간다. */
.page-home main > .hero ~ section:not(.intro) {
  isolation: isolate;
  background-color: var(--color-light);
  background-image: linear-gradient(var(--color-light), var(--color-light));
}

/* Paint-time guard: section surfaces never participate in opacity reveals. */
.page-home main > .hero ~ section.reveal {
  opacity: 1;
  transform: none;
}

.page-home main > .hero ~ .live-floating {
  z-index: 4;
}

/* v5.84: 슬라이더 가운데 카드의 튀어나온 부분이 다음 '첫 인상을 넘어' 사진 위에 겹치도록 섹션 쌓임 순서를 한 단계 위로 */
.page-home main > .hero ~ section.selected-work {
  z-index: 2;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: url("../assets/hero_poster.jpg") center / cover no-repeat;
}

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

.hero[data-hero-playlist-active] .hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}

.hero[data-hero-playlist-active] .hero__video.is-active {
  opacity: 1;
}

.hero__video--blur {
  filter: blur(5px) brightness(0.6);
  /* v5.80: main.js가 스크롤에 맞춰 --hero-zoom(1 → 1.15)을 갱신 */
  transform: scale(calc(1.05 * var(--hero-zoom, 1)));
}

.hero__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(75vw, calc(78svh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: url("../assets/hero_poster.jpg") center / cover no-repeat;
  transform: translate(-50%, -50%) scale(var(--hero-zoom, 1));
  will-change: transform;
}

/* v5.80 — 인트로 문단 가독성: 잉크색 반투명 면 + 아래→위 그래디언트. 첫 화면은 그대로 두고 스크롤하면 짙어진다(--hero-tint 0→1). */
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* v5.82: 인트로 스크롤 구간 영상을 더 어둡게(면 .36→.62, 아래 그래디언트 .55→.75) */
  background:
    linear-gradient(to top, rgba(46, 43, 38, 0.75) 0%, rgba(46, 43, 38, 0) 85%),
    rgba(46, 43, 38, 0.62);
  opacity: var(--hero-tint, 0);
  pointer-events: none;
}

/* 어둡게(스크림) — 타이포 가독성 확보 */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(29, 33, 32, 0.35);
}

/* 필름 그레인 — SVG 노이즈 타일, 살짝 깜빡이는 스텝 애니메이션 */
.hero__media::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14;
  mix-blend-mode: overlay;
  animation: hero-grain 0.9s steps(4) infinite;
}

@keyframes hero-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.5%); }
  50% { transform: translate(1.5%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 2%); }
}

.hero__caption {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: min(75vw, calc(78svh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
  color: var(--color-light);
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-align: right;
  text-transform: uppercase;
  transform: translate(-50%, -50%) scale(var(--hero-zoom, 1));
  transition: opacity 400ms ease;
}

/* --hero-fade: 스크롤하면 캡션·SCROLL 큐가 사라진다(문단과 겹치지 않게) */
.hero__caption.is-visible {
  opacity: var(--hero-fade, 1);
}

.hero__caption[hidden] {
  display: none;
}

.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transition: background-color 220ms ease, color 220ms ease, transform 160ms ease;
}

.outline-button:hover,
.outline-button:focus-visible {
  background: var(--color-light);
  color: var(--color-dark);
}

.outline-button:active,
.text-link:active {
  transform: translateY(1px);
}

.text-link {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.69rem;
  letter-spacing: 0.13em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Precision home rebuild */
/* v5.80 — 영상 위로 스크롤되는 인트로(참고: lxlcreative.co.uk 캠페인 문단).
   .hero(sticky)는 그대로 고정, 이 섹션은 투명·크림 글자. 위 여백 = 문단이 올라오기 전 영상만 보이는 구간, 아래 여백 = 문단이 지나간 뒤 PROJECTS가 올라오기까지의 여유. */
.intro {
  position: relative;
  display: block;
  padding: 18svh var(--page-gutter) 45svh;
  background: transparent;
  color: var(--color-light);
}

.intro__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* 참고 수치(1440 기준): 폭 ≈ 52vw(746px), 글자 ≈ 3.8vw(55px), 행간 0.9, 가운데 정렬.
   v5.81: 문구가 2문단·4문장(약 2.5배)으로 길어져 폭 60vw·글자 3.1vw로 줄였다(1440 EN 16줄 → 약 11줄). */
.intro .intro__statement {
  width: min(100%, 60vw);
  margin: 0 0 clamp(2rem, 3.6vw, 3.25rem);
  color: var(--color-light);
  font-family: var(--font-serif);
  font-size: 3.1vw;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-wrap: balance;
}

.intro__statement > span {
  display: block;
}

/* v5.81: 인트로 = 문단1(첫 줄) + 문단2(이후 줄, 문장마다 한 줄). 첫 줄 뒤에만 문단 간격.
   어드민 Intro Copy도 첫 줄=문단1, 다음 줄들=문단2 문장으로 넣으면 같은 모양이 된다. */
.intro__statement > span:first-child:not(:only-child) {
  margin-bottom: 0.75em;
}

/* v5.86: 문단1(첫 줄)도 줄간격 2배(EN .9→1.8, KR 1.3→2.6) */
.intro__statement > span:first-child {
  line-height: 1.8;
}

html[lang="ko"] .intro .intro__statement > span:first-child {
  line-height: 2.6;
}

/* v5.82: 문단2(둘째 줄부터)는 문단1의 2/3 크기. v5.83: 줄간격(line-height)은 기본의 2배(EN .9→1.8, KR 1.3→2.6) */
.intro__statement > span:not(:first-child) {
  font-size: calc(2em / 3);
  line-height: 1.8;
}

html[lang="ko"] .intro .intro__statement > span:not(:first-child) {
  line-height: 2.6;
}

.intro__button[hidden] {
  display: none;
}

/* 단어 드러남: 영상 위이므로 드러나기 전 글자도 크림 계열(40%)로 두고 단어마다 100%까지 채운다 */
.js .intro [data-word-reveal] {
  color: rgba(246, 245, 239, 0.4);
}

.intro [data-word-reveal] .word-reveal__word {
  color: rgba(246, 245, 239, calc(0.4 + (0.6 * var(--word-progress))));
}

.intro__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 1rem 1.8rem;
  background: var(--color-dark);
  color: var(--color-light);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1;
  transition: background-color 220ms ease, color 220ms ease, transform 160ms ease;
}

.intro__button:hover,
.intro__button:focus-visible {
  background: var(--color-accent);
}

.intro__button:active {
  transform: translateY(1px);
}

.selected-work {
  /* v5.82: 머리말이 없어져 위 여백 없이 영상 섹션 바로 다음에 슬라이더가 붙는다.
     v5.84: 아래 여백도 없애 '첫 인상을 넘어'가 바로 이어지고, 가운데 작은 카드의 튀어나온 부분이 다음 섹션 사진 위에 겹친다(z-index). */
  position: relative;
  padding: 0 0 0 var(--page-gutter);
  overflow: visible;
}

.selected-work__lead {
  max-width: 66rem;
  margin: 2rem var(--page-gutter) 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-wrap: pretty;
}

[data-content-visited-section][hidden],
[data-content-live-section][hidden] {
  display: none;
}

/* v5.78 — 홈 PROJECTS Layered Image Slider. 참고: Osmo "Layered Image Slider"(무료 리소스)의 구조·수치를 순수 JS(layered-slider.js)로 구현.
   슬라이더 안 크기는 모두 em이고 루트 16px에 고정한다. 색·서체만 사이트 토큰.
   이전 가로 카드 목록은 design-archive/projects-rail-2026-10/에 보관. */
.selected-work__slider {
  margin: 0 0 0 calc(var(--page-gutter) * -1);
}

.layered-slider {
  --mask-w: 20em;
  position: relative;
  /* v5.84: 카드가 아래로 튀어나올 공간(15em)을 없애고 세로로는 잘라내지 않는다(가로만 잘라 제목이 화면 밖으로 넘치지 않게). */
  padding-bottom: 0;
  overflow-x: clip;
  overflow-y: visible;
  color: var(--color-light);
  font-family: var(--font-pretendard);
  font-size: 16px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.layered-slider__container {
  position: relative;
  width: 100%;
}

.layered-slider__bg-collection {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}

.layered-slider__bg-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layered-slider__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
}

/* v5.79: 큰 사진 아래에서 위로 옅어지는 잉크색 반투명 그래디언트(사용자 요청)를 평면 15% 위에 더한다. */
.layered-slider__bg-dark {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(46, 43, 38, 0.15);
  background-image: linear-gradient(to top, rgba(46, 43, 38, 0.6), rgba(46, 43, 38, 0) 80%);
}

/* 가운데 프로젝트에 상세 링크가 있으면 사진(배경·작은 카드) 어디를 눌러도 상세로 간다. */
.layered-slider[data-layered-slider-link] .layered-slider__container {
  cursor: pointer;
}

.layered-slider__text-collection {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 28em 0;
}

.layered-slider__text-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.layered-slider__text-item {
  position: absolute;
  max-width: 80%;
  text-align: center;
  cursor: pointer;
}

/* v5.79: 제목 서체는 이전 카드 목록의 브랜드명(.work-card__brand)과 같은 세리프. */
.layered-slider__text-title {
  color: inherit;
  font-family: var(--font-serif);
  font-size: 4em;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.8;
  text-decoration: none;
}

/* v5.82: 제목 아래 메타(태그 줄 → 진행 기간 → COMING SOON). 제목 위치는 그대로 두고 아이템과 함께 움직인다.
   항목이 없으면 메타 블록 자체를 만들지 않아 빈 공간이 생기지 않는다. */
.layered-slider__text-meta {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.6em;
  width: max-content;
  max-width: min(90vw, 40em);
  margin-top: 1.25em;
  transform: translateX(-50%);
}

.layered-slider__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
}

/* 이전 카드 목록의 태그(.work-card__badge)와 같은 테두리 라벨, 사진 위라 크림색 */
.layered-slider__tag {
  padding: 0.4em 0.6em;
  border: 1px solid rgba(246, 245, 239, 0.6);
  font-size: 0.75em;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.layered-slider__text-caption {
  font-size: 0.875em;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

.layered-slider__mask-collection {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: var(--mask-w);
  aspect-ratio: 4 / 5;
  border-radius: 0.75em;
  overflow: hidden;
  transform: translate(-50%, 30%);
}

.layered-slider__mask-list {
  position: absolute;
  inset: 0;
}

.layered-slider__mask-item {
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layered-slider__mask-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* COMING SOON 이미지는 기존 .work-card--coming-soon과 같은 흐림. 번진 가장자리는 컨테이너 overflow가 자른다. */
.layered-slider__bg-item--coming-soon .layered-slider__bg-img,
.layered-slider__mask-item--coming-soon .layered-slider__mask-img {
  filter: blur(12px);
  transform: scale(1.06);
}

.layered-slider__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 120em;
  margin-right: auto;
  margin-left: auto;
  padding: 2em;
  pointer-events: none;
}

.layered-slider__overlay-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  pointer-events: auto;
}

.layered-slider__progress {
  width: 6em;
  height: 2px;
  border-radius: 10em;
  background-color: rgba(246, 245, 239, 0.25);
  overflow: hidden;
}

.layered-slider__progress-inner {
  width: 100%;
  height: 100%;
  background-color: var(--color-light);
  transform: scaleX(0);
  transform-origin: 0%;
}

.layered-slider__overlay-btm {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5em;
  width: 100%;
}

/* v5.82: 섹션 이름(이전 PROJECTS 머리말 대신) — 슬라이더 왼쪽 아래, 이전/다음 버튼과 같은 아래 줄 */
.layered-slider__label {
  min-width: 0;
}

.layered-slider__label-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.layered-slider__label-lead {
  margin: 0.5em 0 0;
  color: rgba(246, 245, 239, 0.8);
  font-size: 0.875em;
  line-height: 1.4;
}

/* v5.83: 전체 보기 — 설명 아래 알약 버튼. 이전/다음 버튼과 같은 테두리·바탕 */
.layered-slider__view-all {
  display: inline-flex;
  align-items: center;
  margin-top: 1em;
  padding: 0.9em 1.4em;
  border: 1px solid rgba(246, 245, 239, 0.6);
  border-radius: 100em;
  background-color: rgba(46, 43, 38, 0.25);
  color: var(--color-light);
  cursor: pointer;
  font-family: var(--font-pretendard);
  font-size: 0.75em;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .layered-slider__view-all:hover {
    border-color: var(--color-light);
    background-color: rgba(46, 43, 38, 0.45);
  }
}

.layered-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  pointer-events: auto;
}

.layered-slider__nav-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  padding: 0.75em;
  border: 1px solid rgba(246, 245, 239, 0.6);
  border-radius: 100em;
  background-color: rgba(46, 43, 38, 0.25);
  color: var(--color-light);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* v5.79: 이전/다음 버튼을 조금 더 잘 보이게(테두리 30%→60%, 잉크 25% 바탕, 호버 시 진하게). */
@media (hover: hover) {
  .layered-slider__nav-button:hover {
    border-color: var(--color-light);
    background-color: rgba(46, 43, 38, 0.45);
  }
}

.layered-slider__nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .layered-slider__text-title {
    font-size: 2.5em;
  }

  .layered-slider__overlay {
    padding: 1em;
  }

  /* 모바일: 섹션 이름을 이전/다음 버튼 줄 위에 둔다 */
  .layered-slider__overlay-btm {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1em;
  }

  .layered-slider__label-title {
    font-size: 1.75em;
  }

  .layered-slider__label-lead {
    font-size: 0.8125em;
  }

  .layered-slider__nav {
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 479px) {
  .layered-slider {
    --mask-w: 14em;
  }
}

/* v5.86 모바일: 가운데 카드는 이전의 2/3 크기로 제목 아래 날짜(메타) 바로 밑에 둔다(--mask-top은 layered-slider.js가 가장 긴 메타 아래 끝 + 간격으로 잰다).
   섹션 이름(주요 프로젝트·설명·전체 보기)은 01—05 카운터 아래 가운데. */
@media (max-width: 767px) {
  .layered-slider {
    --mask-w: calc(20em * 2 / 3);
  }

  .layered-slider__mask-collection {
    top: var(--mask-top, 62%);
    bottom: auto;
    transform: translateX(-50%);
  }

  .layered-slider__label {
    position: absolute;
    top: 3.25em;
    left: 50%;
    width: calc(100% - 2em);
    margin-bottom: 0;
    text-align: center;
    transform: translateX(-50%);
  }
}

@media (max-width: 479px) {
  .layered-slider {
    --mask-w: calc(14em * 2 / 3);
  }
}

/* v5.82: 1023px 이하에서는 가운데 작은 카드(높이 1.25×폭, 사진 아래로 30% 걸침 → 사진 안쪽 0.875×폭)가
   왼쪽 아래 라벨과 겹치므로, 라벨을 카드 위 끝보다 0.75em 위로 올린다. */
@media (min-width: 768px) and (max-width: 1023px) {
  .layered-slider__label {
    margin-bottom: calc(var(--mask-w) * 0.875 - 1.25em);
  }
}



.work-card {
  position: relative;
  z-index: 0;
  flex: 0 0 370px;
  scroll-snap-align: start;
}

.work-card:hover,
.work-card:focus-visible,
.work-card:focus-within {
  z-index: 2;
}

.work-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-cream);
  transition: box-shadow 550ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card__video,
.work-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
}

.work-card--coming-soon {
  margin: 0;
}

.work-card--coming-soon .work-card__video,
.work-card--coming-soon .work-card__image,
.experience-slide--in-progress .experience-slide__media {
  filter: blur(12px);
  transform: scale(1.06);
}

.work-card__coming-soon {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  background: rgba(29, 33, 32, 0.14);
  color: var(--color-light);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 1px 12px rgba(29, 33, 32, 0.45);
}

.work-card__coming-soon strong {
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  font-weight: 500;
}

.work-card__coming-soon time {
  font-size: 0.64rem;
}

.work-card__badge,
.journal-category {
  display: inline-flex;
  align-items: center;
  width: max-content;
  justify-self: start;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.work-card__badge {
  margin-top: 0.2rem;
}

.work-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.work-card__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: 1rem 0 0.25rem;
}

.work-card__brand {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.work-card__project {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.work-card:focus-visible {
  outline-offset: -3px;
}

.manifesto {
  position: relative;
  min-height: 140svh;
  padding: 0;
  overflow: clip;
  isolation: isolate;
}

.manifesto__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* v5.84: 스크롤하며 흑백 → 컬러(main.js가 섹션 위치로 --manifesto-gray를 1→0으로 낮춘다) */
.manifesto__image.img-bw {
  filter: grayscale(var(--manifesto-gray, 1));
}

.manifesto::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(29, 33, 32, 0.08);
  content: "";
}

.manifesto__words {
  position: absolute;
  inset: 0;
  color: var(--color-accent);
  font-family: var(--font-condensed);
  font-size: clamp(5rem, 11vw, 11rem);
  letter-spacing: -0.055em;
  line-height: 0.82;
  text-transform: uppercase;
}

.manifesto__words span {
  position: absolute;
  display: block;
}

/* v5.84: 글자 시작을 아래로(위쪽은 슬라이더 카드가 겹친다). 첫 줄 8%→16%, 나머지도 함께 내림 */
.manifesto__words span:nth-child(1) {
  top: 16%;
  left: 4vw;
}

.manifesto__words span:nth-child(2) {
  top: 44%;
  right: 3vw;
  max-width: 8ch;
  text-align: right;
}

.manifesto__words span:nth-child(3) {
  bottom: 8%;
  left: 4vw;
  max-width: 7ch;
}

.manifesto__copy {
  position: absolute;
  inset: 0;
}

.manifesto__copy p {
  position: absolute;
  width: min(27rem, 35vw);
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.75;
  opacity: 1;
  text-transform: uppercase;
}

.manifesto__copy p:first-child {
  top: 38%;
  left: 8vw;
}

.manifesto__copy p:last-child {
  right: 7vw;
  top: 66%;
}

/* Experience keeps the full-width rail while LIVE floats at its upper boundary. */
.experience-section {
  min-width: 0;
  overflow: visible;
  overscroll-behavior-x: none;
  background-color: var(--color-light);
  background-image: linear-gradient(var(--color-light), var(--color-light));
}

.showcase-heading {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}

.showcase-heading h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--section-title-size);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-transform: uppercase;
  text-wrap: balance;
}

.showcase-heading p {
  max-width: 58ch;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-wrap: pretty;
}

.live-carousel__slide:focus-visible {
  outline: 2px solid var(--color-light);
  outline-offset: -5px;
}

.live-carousel__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 7rem);
  font-style: italic;
  letter-spacing: -0.055em;
  line-height: 0.8;
  text-transform: lowercase;
}

/* v5.20 — a single LIVE card floats across the manifesto/Experience boundary. */
.live-floating {
  position: relative;
  z-index: 4;
  height: clamp(20rem, 26vw, 28rem);
  overflow: visible;
  background: var(--color-light);
}

.live-floating__card {
  position: absolute;
  top: 0;
  left: 80%;
  width: min(20rem, 24vw);
  padding: 1rem;
  border-radius: 20px;
  background: var(--color-light);
  box-shadow: 0 32px 64px rgba(46, 43, 38, 0.18);
  transform: translate(-50%, -50%) rotate(7deg);
}

.live-floating__header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: clamp(0.7rem, 1.1vw, 1.2rem);
  padding: 1rem 0.25rem;
}

.live-floating__header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 4.4vw, 4.75rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.82;
}

.live-floating__stage {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.live-floating__stage.is-dragging {
  cursor: grabbing;
}

.live-floating .live-carousel__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-user-drag: none;
  user-select: none;
  visibility: hidden;
  will-change: opacity;
}

.live-floating .live-carousel__slide::after {
  content: none;
}

.live-floating .live-carousel__slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.live-floating .live-carousel__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-cream);
}

.live-floating .live-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
  transform: none;
  transition: none;
  user-select: none;
}

.live-floating .live-carousel__fallback {
  font-size: clamp(2.75rem, 6vw, 5rem);
}

.live-carousel__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  margin-top: 1rem;
}

.live-carousel__detail {
  display: grid;
  gap: 0.4rem;
  min-height: 5.2rem;
  padding: 0.25rem;
  background: var(--color-light);
}

.live-floating .live-carousel__title {
  overflow: hidden;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.733rem, 1.067vw, 1rem);
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 1rem;
  margin-top: 0.75rem;
}

.live-carousel__page {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-ink) 28%, transparent);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.live-carousel__page:hover,
.live-carousel__page:focus-visible,
.live-carousel__page.is-active {
  background: var(--color-ink);
  transform: scale(1.2);
}

.live-carousel__page:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.live-carousel__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 1rem;
}

.live-carousel__label,
.live-carousel__status,
.live-floating .live-carousel__platform {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.live-carousel__label {
  font-weight: 600;
}

.live-carousel__status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--color-dusty);
  white-space: nowrap;
}

.live-carousel__status strong {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.live-carousel__status time {
  color: inherit;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.live-carousel__status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #8a8b87;
}

.live-carousel__status--live {
  color: #c63131;
}

.live-carousel__status--live .live-carousel__status-dot {
  background: #c63131;
  animation: live-status-ripple 1.8s ease-out infinite;
}

.carousel-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  margin: 0;
  padding: 0.25rem;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.carousel-counter__current {
  font-size: 1.75rem;
}

.carousel-counter__total,
.carousel-counter__slash {
  font-size: 1.2rem;
}

.experience-section,
.pl-overview {
  --experience-card-width: min(360px, 84vw);
  --experience-card-height: min(460px, 107.333vw);
}

.experience-section {
  padding: clamp(4rem, 8vw, 8rem) 0 clamp(8.75rem, 13.75vw, 13.75rem);
}

.experience-section__heading {
  width: calc(100% - (2 * var(--page-gutter)));
  max-width: 94rem;
  justify-items: center;
  margin: clamp(3rem, 5vw, 5rem) auto clamp(3rem, 5vw, 5rem);
  padding: 0;
  text-align: center;
}

.experience-section__view-all {
  margin-top: 1.25rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.view-all-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  background: rgba(246, 245, 239, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .view-all-modal {
    -webkit-backdrop-filter: blur(8px) saturate(1.08);
    backdrop-filter: blur(8px) saturate(1.08);
  }
}

.view-all-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 350ms ease-out, visibility 0s linear 0s;
}

.view-all-modal__surface {
  width: 100%;
  height: 100%;
  padding: clamp(1rem, 2.8vw, 3rem) max(var(--page-gutter), var(--card-shadow-safe-space)) clamp(5rem, 9vw, 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  transform: translateY(16px);
  transition: transform 250ms ease;
}

.view-all-modal.is-open .view-all-modal__surface {
  transform: translateY(0);
  transition: transform 350ms ease-out;
}

.view-all-modal__header {
  --view-all-modal-title-size: clamp(3.2rem, 7vw, 7.5rem);
  --view-all-modal-title-height: clamp(2.72rem, 5.95vw, 6.375rem);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--view-all-modal-title-height);
  max-width: 108rem;
  margin: 0 auto clamp(2.5rem, 5vw, 5rem);
}

.view-all-modal__header h2 {
  height: var(--view-all-modal-title-height);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--view-all-modal-title-size);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.85;
  white-space: nowrap;
}

html[lang="ko"] .view-all-modal__header h2 {
  font-size: clamp(2.45rem, 5.2vw, 5.5rem);
}

.view-all-modal__close {
  display: grid;
  width: 3rem;
  height: 3rem;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  place-items: center;
  transition: transform 200ms ease;
}

.view-all-modal__close:hover,
.view-all-modal__close:focus-visible {
  transform: rotate(8deg);
}

.view-all-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.75rem) clamp(0.75rem, 1.5vw, 1.5rem);
  width: 100%;
  max-width: 108rem;
  margin: 0 auto;
}

.view-all-modal__grid .work-card {
  width: auto;
  min-width: 0;
}

.view-all-modal__grid .work-card__media {
  aspect-ratio: 4 / 5;
}

.experience-carousel {
  --experience-info-space: 8rem;
  --experience-shadow-space: var(--card-shadow-safe-space);
  position: relative;
  overscroll-behavior-x: none;
}

.experience-carousel__viewport {
  height: calc(var(--experience-card-height) + var(--experience-info-space) + var(--experience-shadow-space));
  overflow: hidden;
  overscroll-behavior-x: none;
  cursor: grab;
  outline: none;
  touch-action: pan-y;
  user-select: none;
}

.experience-carousel__viewport.is-dragging,
.experience-carousel__viewport.is-settling {
  cursor: grabbing;
}

.experience-carousel__viewport:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: -2px;
}

.experience-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: max-content;
  min-width: 100%;
  height: 100%;
  padding-inline: 8vw;
  padding-block: var(--experience-shadow-space) 0;
  overscroll-behavior-x: none;
  transform: translate3d(0, 0, 0);
  transition: none;
  will-change: transform;
}

.experience-slide {
  position: relative;
  z-index: 0;
  display: block;
  width: var(--experience-card-width);
  height: var(--experience-card-height);
  flex: 0 0 var(--experience-card-width);
  -webkit-user-drag: none;
  user-select: none;
}

.experience-slide:hover,
.experience-slide:focus-visible,
.experience-slide:focus-within {
  z-index: 2;
}

.experience-slide__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-cream);
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-origin: center;
  transition: box-shadow 550ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-slide__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-slide:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

.experience-slide__info {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0.5rem;
  display: grid;
  gap: 0.3rem;
  width: calc(100% - 1rem);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  text-align: left;
  transition: opacity 500ms ease, filter 500ms ease;
}

.experience-slide.is-active .experience-slide__info {
  opacity: 1;
  filter: blur(0);
}

.experience-slide__info .work-card__brand {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.experience-slide__summary {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.55rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.experience-slide__category {
  max-width: 100%;
}

@keyframes live-status-ripple {
  0% { box-shadow: 0 0 0 0 rgba(198, 49, 49, 0.48); }
  65%, 100% { box-shadow: 0 0 0 7px rgba(198, 49, 49, 0); }
}

.illust-slot {
  position: absolute;
  z-index: 3;
  display: block;
  width: clamp(12rem, 16vw, 20rem);
  pointer-events: none;
}

.illust-slot img {
  display: block;
  width: 100%;
  height: auto;
}

.illust-slot img[hidden] {
  display: none;
}

.services-collab {
  overflow: clip;
  padding: 0 0 clamp(9rem, 12vw, 12rem);
}

.services-collab__panorama {
  position: relative;
  width: 100%;
  height: 60svh;
  overflow: hidden;
  background: var(--color-cream);
}

.services-collab__panorama > :is(img, video) {
  position: absolute;
  top: -4rem;
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% + 8rem);
  object-fit: cover;
  object-position: center 54%;
  will-change: translate;
}

.services-collab__inner {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(4rem, 7vw, 8rem);
  width: min(100%, 94rem);
  margin: 0 auto;
  padding: clamp(8rem, 12vw, 12rem) var(--page-gutter) 0;
}

.services-collab__statement {
  align-self: start;
  max-width: 34rem;
}

.services-collab__statement h2 {
  margin: 0;
  color: #11110f;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: -0.028em;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

.services-collab__statement h2 em {
  font-style: normal;
  font-weight: inherit;
}

.services-collab__statement p {
  max-width: 46ch;
  margin: 2rem 0 0;
  color: var(--color-dusty);
  font-size: 0.8125rem;
  letter-spacing: 0.015em;
  line-height: 1.7;
  text-wrap: pretty;
}

.services-collab__services {
  min-width: 0;
}

.services-collab__services > .section-label {
  display: block;
  margin-bottom: 1.35rem;
  color: var(--color-ink);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: none;
}

.services-collab__list {
  border-top: 1px solid var(--color-rule);
}

.service-offering {
  display: grid;
  grid-template-columns: minmax(11rem, 0.95fr) minmax(14rem, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--color-rule);
  transition: background-color 260ms ease;
}

.service-offering[hidden] {
  display: none;
}

.service-offering h3 {
  margin: 0;
  color: rgba(108, 134, 156, 0.32);
  font-family: var(--font-serif);
  font-size: clamp(3.75rem, 5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-offering__copy {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding-top: 0.55rem;
}

.service-offering__copy em {
  font-family: var(--font-serif);
  font-size: 0.84rem;
  line-height: 1.35;
}

.service-offering__copy > span {
  max-width: 39ch;
  color: var(--color-ink);
  font-size: 0.8125rem;
  letter-spacing: 0.012em;
  line-height: 1.65;
  text-wrap: pretty;
}

.service-offering:focus-visible {
  outline-offset: 6px;
}

@media (hover: hover) {
  .service-offering:hover h3,
  .service-offering:focus-visible h3 {
    color: var(--color-dusty);
    transform: translateX(0.3rem);
  }
}

.js .service-offering.reveal:nth-child(2) {
  transition-delay: 120ms;
}

.js .service-offering.reveal:nth-child(3) {
  transition-delay: 240ms;
}

.client-marquee {
  /* v5.80 — 모든 카드가 같은 폭·높이. 로고는 JS가 가로세로비·잉크 밀도로 크기를 정규화해
     로고 영역(.client-grid__identity) 대비 비율(--client-logo-w/h)로 지정한다. */
  --client-card-w: 11.5rem;
  --client-card-h: 7.25rem;
  --client-logo-box-h: 4rem;
  /* 어두운 칩(logoTheme:light) 안쪽 여백 — JS가 읽어 로고 크기에서 뺀다(px 값 유지). */
  --client-chip-pad-x: 16px;
  --client-chip-pad-y: 10px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 clamp(8.75rem, 11.25vw, 11.25rem);
  overflow: clip;
}

.client-marquee__content {
  display: grid;
  gap: 4px;
  width: 100%;
}

.client-marquee[hidden] {
  display: none;
}

.client-marquee__row {
  width: 100%;
  overflow: hidden;
}

/* 이동은 content.js(rAF)가 transform을 직접 쓴다 — 스크롤 방향·위치에 따라 흐름이 바뀌므로 CSS 애니메이션을 쓰지 않는다. */
.client-marquee__track {
  display: flex;
  width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.client-marquee__sequence {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0 4px 0 0;
  flex: none;
  list-style: none;
}

.client-marquee__card {
  display: grid;
  grid-template-rows: var(--client-logo-box-h) auto;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  /* 카드는 항상 같은 크기 — 로고·이름 길이에 따라 변하지 않는다. */
  width: var(--client-card-w);
  height: var(--client-card-h);
  flex: 0 0 var(--client-card-w);
  padding: 0.9rem 0.6rem;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-cream);
  font-family: var(--font-serif);
}

.client-grid__identity {
  display: grid;
  width: 100%;
  height: var(--client-logo-box-h);
  place-items: center;
}

.client-grid__name {
  /* 한 줄 고정(카드 폭 안) — 넘치는 이름은 말줄임. */
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 로고 없는 항목: 같은 카드·비슷한 시각 무게(로고 평균 높이 약 24~30px). */
.client-grid__mark {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

.client-grid__logo {
  /* 크기는 JS가 계산한 --client-logo-w/h(로고 영역 대비 %). 계산 전에는 숨겨 두어 카드는 그대로 두고 로고만 나타난다. */
  width: var(--client-logo-w, 70%);
  height: var(--client-logo-h, 50%);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.client-grid__logo.is-sized {
  opacity: 1;
}

.client-grid__logo--on-dark {
  padding: var(--client-chip-pad-y) var(--client-chip-pad-x);
  background: var(--color-dark);
  border-radius: 4px;
}

/* 카드 확대 중에는 섹션 자체를 이웃 섹션 위로 올려 카드·그림자가 경계에서 잘리지 않게 한다. */
.pl-overview:has(.pl-overview__post.is-active),
.pl-overview:has(.pl-overview__post:hover),
.pl-overview:has(.pl-overview__post:focus-within) {
  z-index: 30;
}

.pl-overview {
  position: relative;
  z-index: 3;
  padding: calc(10vw + 20px) var(--page-gutter);
  overflow: visible;
  background: var(--color-paper);
  isolation: isolate;
}

.pl-overview__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.pl-overview__lead {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: calc(24px + 2.5vw);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: left;
  text-indent: calc(30px + 10vw);
  text-wrap: pretty;
  white-space: pre-line;
}

.pl-overview__lead > .pl-overview__post {
  margin: 0.12em 0.18em;
  vertical-align: middle;
}

html[lang="ko"] .pl-overview__lead {
  font-family: var(--font-serif);
  font-weight: 200;
  letter-spacing: -0.028em;
}

.pl-overview__post {
  --overview-card-scale: 0.2;
  --overview-shift-x: 0px;
  --overview-shift-y: 0px;
  --overview-expanded-left: calc(50% - (var(--experience-card-width) / 2) + var(--overview-shift-x));
  --overview-expanded-top: calc(50% - (var(--experience-card-height) / 2) + var(--overview-shift-y));
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: calc(var(--experience-card-width) / 5);
  height: calc(var(--experience-card-height) / 5);
  aspect-ratio: 360 / 460;
  flex: 0 0 auto;
  border-radius: 14px;
  outline-offset: 5px;
}

.pl-overview__link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border-radius: inherit;
  outline-offset: 5px;
}

.instagram-card-fan__card--right.instagram-card-fan__card--step-1 {
  --instagram-fan-rest-angle: 1deg;
  --instagram-fan-open-angle: 7deg;
  --instagram-fan-open-x: 4.5rem;
  --instagram-fan-layer: 3;
}

.instagram-card-fan__card--left.instagram-card-fan__card--step-1 {
  --instagram-fan-rest-angle: -1deg;
  --instagram-fan-open-angle: -7deg;
  --instagram-fan-open-x: -4.5rem;
  --instagram-fan-layer: 3;
}

.instagram-card-fan__card--right.instagram-card-fan__card--step-2 {
  --instagram-fan-rest-angle: 2deg;
  --instagram-fan-open-angle: 14deg;
  --instagram-fan-open-x: 8.5rem;
  --instagram-fan-layer: 2;
}

.instagram-card-fan__card--left.instagram-card-fan__card--step-2 {
  --instagram-fan-rest-angle: -2deg;
  --instagram-fan-open-angle: -14deg;
  --instagram-fan-open-x: -8.5rem;
  --instagram-fan-layer: 2;
}

.pl-overview__fan-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--instagram-fan-layer);
  display: block;
  width: var(--experience-card-width);
  height: var(--experience-card-height);
  overflow: hidden;
  border-radius: 70px;
  background: var(--color-cream);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(var(--overview-card-scale) * 0.9)) rotate(var(--instagram-fan-rest-angle));
  transform-origin: center;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.pl-overview__media {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: block;
  width: var(--experience-card-width);
  height: var(--experience-card-height);
  aspect-ratio: 360 / 460;
  overflow: hidden;
  border-radius: 70px;
  background: var(--color-cream);
  transform: translate(-50%, -50%) scale(var(--overview-card-scale));
  transform-origin: center;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 550ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pl-overview__media img,
.pl-overview__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-overview__media video {
  position: relative;
  z-index: 1;
}

.pl-overview__caption {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1.8rem);
  overflow: hidden;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4.4px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-align: right;
  text-indent: 0;
  text-overflow: ellipsis;
  transition: background-color 200ms ease, opacity 180ms ease, transform 160ms ease;
  white-space: nowrap;
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .pl-overview__caption {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.pl-overview__dismiss {
  position: absolute;
  top: calc(var(--overview-expanded-top) + 0.75rem);
  left: calc(var(--overview-expanded-left) + var(--experience-card-width) - 2.75rem);
  z-index: 3;
  display: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: rgba(246, 245, 239, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(46, 43, 38, 0.14);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  line-height: 1;
  text-indent: 0;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (hover: hover) and (pointer: fine) {
  .pl-overview__post:hover,
  .pl-overview__post:focus-within {
    z-index: 40;
  }

  .pl-overview__post:hover .pl-overview__media,
  .pl-overview__post:focus-within .pl-overview__media {
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(46, 43, 38, 0.16);
    transform: translate(calc(-50% + var(--overview-shift-x)), calc(-50% + var(--overview-shift-y))) scale(1);
  }

  .pl-overview__post:hover .pl-overview__fan-card,
  .pl-overview__post:focus-within .pl-overview__fan-card {
    border-radius: 14px;
    transform: translate(
      calc(-50% + var(--overview-shift-x) + var(--instagram-fan-open-x)),
      calc(-50% + var(--overview-shift-y))
    ) scale(0.9) rotate(var(--instagram-fan-open-angle));
  }

  .pl-overview__post:hover .pl-overview__caption,
  .pl-overview__post:focus-within .pl-overview__caption {
    opacity: 1;
  }
}

@media (hover: none) {
  .pl-overview__post.is-active {
    z-index: 40;
  }

  .pl-overview__post.is-active .pl-overview__media {
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(46, 43, 38, 0.16);
    transform: translate(calc(-50% + var(--overview-shift-x)), calc(-50% + var(--overview-shift-y))) scale(1);
  }

  .pl-overview__post.is-active .pl-overview__fan-card {
    border-radius: 14px;
    transform: translate(
      calc(-50% + var(--overview-shift-x) + var(--instagram-fan-open-x)),
      calc(-50% + var(--overview-shift-y))
    ) scale(0.9) rotate(var(--instagram-fan-open-angle));
  }

  .pl-overview__post.is-active .pl-overview__caption {
    opacity: 1;
  }

  .pl-overview__post.is-active .pl-overview__dismiss {
    display: grid;
  }
}

.pl-overview.has-touch-input .pl-overview__post.is-active {
  z-index: 40;
}

.pl-overview.has-touch-input .pl-overview__post.is-active .pl-overview__media {
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(46, 43, 38, 0.16);
  transform: translate(calc(-50% + var(--overview-shift-x)), calc(-50% + var(--overview-shift-y))) scale(1);
}

.pl-overview.has-touch-input .pl-overview__post.is-active .pl-overview__fan-card {
  border-radius: 14px;
  transform: translate(
    calc(-50% + var(--overview-shift-x) + var(--instagram-fan-open-x)),
    calc(-50% + var(--overview-shift-y))
  ) scale(0.9) rotate(var(--instagram-fan-open-angle));
}

.pl-overview.has-touch-input .pl-overview__post.is-active .pl-overview__caption {
  opacity: 1;
}

.pl-overview__dismiss {
  display: none !important;
}

.overview-confirm {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  padding: var(--page-gutter);
  place-items: center;
  background: rgba(24, 23, 21, 0.34);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-backdrop-filter: blur(12px) saturate(0.9);
  backdrop-filter: blur(12px) saturate(0.9);
  transition: opacity 220ms ease, visibility 220ms;
}

.overview-confirm.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.overview-confirm__surface {
  width: min(100%, 30rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 1.25rem;
  background: rgba(246, 245, 239, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 80px rgba(35, 33, 29, 0.22);
  color: var(--color-ink);
  text-align: center;
  transform: translateY(0.75rem) scale(0.98);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.overview-confirm.is-open .overview-confirm__surface {
  transform: translateY(0) scale(1);
}

.overview-confirm__surface h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 7vw, 2.75rem);
  font-weight: 200;
  letter-spacing: -0.028em;
  line-height: 1;
  text-wrap: balance;
}

.overview-confirm__surface p {
  margin: 1rem 0 0;
  color: var(--color-dusty);
  font-size: 0.78rem;
  line-height: 1.6;
}

.overview-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1.75rem;
}

.overview-confirm__actions button {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(36, 36, 39, 0.24);
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 500 0.75rem/1 var(--font-pretendard);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.overview-confirm__actions button:first-child {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

.overview-confirm__actions button:hover,
.overview-confirm__actions button:focus-visible {
  transform: translateY(-1px);
}

.overview-confirm__actions button:active {
  transform: translateY(1px);
}

.work-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.work-row__tags span {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-ink);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.blog {
  padding: clamp(8rem, 14vw, 14rem) var(--page-gutter);
  border-top: 1px solid var(--color-rule);
}

.blog__heading,
.blog-list {
  max-width: 94rem;
  margin-right: auto;
  margin-left: auto;
}

.blog__heading h2 {
  margin: 0 0 clamp(5rem, 9vw, 9rem);
  font-family: var(--font-condensed);
  font-size: var(--section-title-size);
  letter-spacing: -0.06em;
  line-height: 0.84;
  text-transform: uppercase;
}

.blog-list {
  border-top: 1px solid var(--color-rule);
}

.blog-row {
  display: grid;
  grid-template-columns: 11rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  min-height: 8rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-rule);
}

.blog-row time {
  color: var(--color-accent);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
}

.blog-row h3 {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-row .journal-category {
  justify-self: start;
}

.subpage-hero--article .journal-category {
  margin-top: 0.45rem;
}

.instagram-feed[hidden] {
  display: none;
}

.instagram-feed {
  padding: clamp(7.5rem, 12.5vw, 12.5rem) var(--page-gutter);
}

.instagram-feed__inner {
  max-width: 94rem;
  margin: 0 auto;
}

.instagram-feed__header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.instagram-feed__heading-copy {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.instagram-feed__header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--section-title-size);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.82;
  text-transform: uppercase;
}

.instagram-feed__heading-copy p {
  max-width: 58ch;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-wrap: pretty;
}

.instagram-feed__header a {
  padding: 0.4rem 0;
}

.instagram-feed__rail {
  --instagram-shadow-inline: max(0px, calc(var(--card-shadow-safe-space) - var(--page-gutter)));
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 15px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  cursor: grab;
  outline: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
  user-select: none;
  padding: var(--card-shadow-safe-space) var(--instagram-shadow-inline) 3.5rem;
  scroll-padding-inline: var(--instagram-shadow-inline);
}

.instagram-feed__rail::-webkit-scrollbar {
  display: none;
}

.instagram-feed__rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.instagram-feed__rail:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 5px;
}

.instagram-feed__item {
  position: relative;
  z-index: 5;
  display: block;
  scroll-snap-align: start;
}

.instagram-feed__stack {
  position: relative;
  z-index: 0;
  display: block;
  flex: 0 0 370px;
  scroll-snap-align: start;
}

.instagram-feed__stack:hover,
.instagram-feed__stack:focus-within {
  z-index: 2;
}

.instagram-feed__stack > .instagram-feed__item {
  width: 100%;
  flex: none;
  scroll-snap-align: none;
}

.instagram-feed__fan-card {
  position: absolute;
  inset: 0;
  z-index: var(--instagram-fan-layer);
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-cream);
  pointer-events: none;
  transform: scale(0.9) rotate(var(--instagram-fan-rest-angle));
  transform-origin: center;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.instagram-feed__stack:hover .instagram-feed__fan-card,
.instagram-feed__stack:focus-within .instagram-feed__fan-card {
  transform: translate(var(--instagram-fan-open-x), 0) scale(0.9) rotate(var(--instagram-fan-open-angle));
}

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

.instagram-feed__media {
  width: 100%;
}

.instagram-feed__item:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: -3px;
}

.instagram-feed__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}

.instagram-feed__meta {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-align: right;
}

.illust-slot--postcard {
  top: clamp(-4.5rem, -3vw, -2.75rem);
  right: clamp(4rem, 12vw, 13rem);
  width: clamp(12rem, 15vw, 18rem);
  rotate: 5deg;
}

/* era-residence-inspired card response, limited to hover-capable pointers. */
@media (hover: hover) {
  .work-card:hover .work-card__media,
  .work-card:focus-visible .work-card__media,
  .experience-slide:hover .experience-slide__frame,
  .experience-slide:focus-visible .experience-slide__frame {
    box-shadow: 0 24px 48px rgba(46, 43, 38, 0.16);
    translate: 0 -6px;
  }

  .work-card:hover .work-card__video,
  .work-card:focus-visible .work-card__video,
  .work-card:hover .work-card__image,
  .work-card:focus-visible .work-card__image,
  .experience-slide:hover .experience-slide__media,
  .experience-slide:focus-visible .experience-slide__media {
    transform: scale(1.04);
  }

  .work-card--coming-soon:hover .work-card__video,
  .work-card--coming-soon:hover .work-card__image {
    transform: scale(1.1);
  }
}

.home-contact {
  padding: clamp(7rem, 12vw, 12rem) var(--page-gutter) 1.5rem;
}

.home-contact__inner {
  max-width: 94rem;
  margin: 0 auto;
}

.home-contact__intro {
  text-align: center;
}

.home-contact__intro h2 {
  margin: 0;
  font-family: var(--font-condensed);
  font-size: clamp(5rem, 13vw, 13rem);
  letter-spacing: -0.06em;
  line-height: 0.82;
  text-transform: uppercase;
}

.home-contact__intro p {
  margin: 2rem 0 0;
  color: var(--color-muted-dark);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  line-height: 1.6;
}

.home-contact__topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 8rem);
}

.home-contact__topic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.25rem), calc(100% - 1.25rem) 100%, 0 100%);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.75rem);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: background-color 220ms ease, color 220ms ease;
}

.home-contact__topic::after {
  position: absolute;
  right: -0.1rem;
  bottom: 0.55rem;
  width: 1.75rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  content: "";
  transform: rotate(-45deg);
}

.home-contact__topic:hover,
.home-contact__topic:focus-visible {
  background: var(--color-light);
  color: var(--color-ink);
}

.home-contact__topic:hover::after,
.home-contact__topic:focus-visible::after {
  background: var(--color-ink);
}

.home-contact__lower {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(34rem, 1.2fr);
  gap: clamp(4rem, 9vw, 10rem);
  margin-top: clamp(7rem, 12vw, 12rem);
  padding-top: clamp(3rem, 6vw, 6rem);
  border-top: 1px solid var(--color-line-dark);
}

.home-contact__newsletter h3 {
  max-width: 10ch;
  margin: 0 0 3rem;
  font-family: var(--font-condensed);
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.home-contact__newsletter label {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--color-faint-dark);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
}

.home-contact__newsletter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.home-contact__newsletter input,
.home-contact__newsletter button {
  min-height: 3.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  background: transparent;
  color: var(--color-light);
  font-family: var(--font-mono);
}

.home-contact__newsletter input {
  min-width: 0;
  padding: 0 1rem;
  border-right: 0;
  outline: none;
}

.home-contact__newsletter input::placeholder {
  color: var(--color-faint-dark);
}

.home-contact__newsletter input:focus {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.home-contact__newsletter button {
  padding: 0 1.1rem;
  cursor: pointer;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  transition: background-color 220ms ease, color 220ms ease;
}

.home-contact__newsletter button:hover,
.home-contact__newsletter button:focus-visible {
  background: var(--color-light);
  color: var(--color-ink);
}

.home-contact__social {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
}

.home-contact__cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(4rem, 7vw, 7rem);
}

.home-contact__cities address {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-style: normal;
}

.home-contact__cities strong {
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.home-contact__cities span {
  color: var(--color-faint-dark);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  line-height: 1.7;
}

.home-contact__legal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  margin-top: clamp(6rem, 11vw, 11rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line-dark);
  color: var(--color-faint-dark);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.home-contact__legal > span:nth-child(2) {
  text-align: center;
}

.home-contact__legal div {
  display: flex;
  gap: 1.25rem;
}

/* v5.37 living.paisana footer reconstruction. */
.pl-footer {
  --pl-radius: 4px;
  position: relative;
  margin-top: -1px;
  overflow: hidden;
  background: var(--color-paper);
  color: var(--color-ink);
}

.pl-footer a:focus-visible,
.pl-footer button:focus-visible,
.project-modal a:focus-visible,
.project-modal button:focus-visible {
  outline-color: var(--color-ink);
}

.pl-footer__talk {
  display: flex;
  align-items: center;
  padding: calc(60px + 5vw) 1.5vw;
  flex-direction: column;
  text-align: center;
}

.pl-footer__claim {
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc(20px + 3vw);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.pl-footer__claim span,
.pl-footer__claim em {
  display: block;
}

.pl-footer__claim em {
  font-style: italic;
  font-weight: 200;
}

html[lang="ko"] .pl-footer__claim {
  font-family: var(--font-serif);
  font-weight: 200;
  letter-spacing: -0.028em;
}

/* v5.77 푸터 본체(참고: agrumeafarm.it 푸터 구조·간격·진입, 색은 사이트 톤): 큰 BLASSONG 워드마크 + 정보 칸 4개 + 하단 줄.
   화면에 들어오면 JS가 .site-foot에 is-visible을 붙이고(.reveal 관찰자 공용), 글자는 줄 마스크에서 올라온다. */
.site-foot {
  --foot-gap: clamp(12px, 1.4vw, 20px);
  display: flex;
  min-height: 100vh;
  /* v5.80: 사진 띠가 푸터 맨 아래로 와서 legal 줄은 더 이상 화면 하단 고정 바에 가리지 않는다. */
  padding: 2rem var(--page-gutter);
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
}

.site-foot__row {
  display: grid;
  gap: 0 var(--foot-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.site-foot__logo {
  margin-bottom: auto;
}

/* 워드마크는 칸 폭(4열~끝)에 꽉 차도록 칸 폭 기준(cqw)으로 키운다. BLASSONG 8자 폭은 글자 크기의 약 3.5배(글자별 span이라 커닝 없음, 자간 -0.03em 포함)라 28.2cqw면 칸의 약 99%. */
.site-foot__mark {
  grid-column: 4 / -1;
  container-type: inline-size;
}

.site-foot__word {
  --rise: 110%;
  display: block;
  font-family: var(--font-serif);
  font-size: 28.2cqw;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.site-foot__grid {
  align-items: stretch;
  margin-top: 12.5rem;
}

.site-foot__cell {
  --d: calc(var(--i, 0) * 70ms);
  display: flex;
  min-width: 0;
  gap: 2.5rem;
  flex-direction: column;
  justify-content: space-between;
}

.site-foot__brand {
  grid-column: 1 / span 3;
  gap: 1rem;
  justify-content: flex-end;
}

.site-foot__nav {
  grid-column: 4 / span 2;
  justify-content: flex-start;
}

.site-foot__social {
  grid-column: 6 / span 3;
}

.site-foot__general {
  grid-column: 9 / span 4;
}

/* 칸(flex column) 안에서 링크·복사 버튼이 칸 폭으로 늘어나지 않게 — click to copy가 이메일 글자 위 가운데에 오도록 */
.site-foot .roll-link {
  align-self: flex-start;
}

.site-foot__links {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 5px;
  flex-direction: column;
  list-style: none;
}

.site-foot__link,
.site-foot__legal a {
  display: block;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-pretendard);
  font-size: 1rem;
  line-height: 1.3;
  text-align: left;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-foot__link:hover,
.site-foot__link:focus-visible,
.site-foot__legal a:hover,
.site-foot__legal a:focus-visible {
  color: var(--color-dusty);
}

.site-foot__label,
.site-foot__copyright {
  margin: 0;
  font-family: var(--font-pretendard);
  font-size: 0.875rem;
}

.site-foot__label {
  color: var(--color-dusty);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.site-foot__copyright {
  line-height: 1.6;
}

/* v5.80: 주소 — 저작권 문구 위, 같은 글자 크기. 어드민에서 넣은 줄바꿈을 그대로 보인다. */
.site-foot__address {
  margin: 0;
  font-family: var(--font-pretendard);
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.6;
  white-space: pre-line;
}

.site-foot__address[hidden] {
  display: none;
}

.site-foot__legal {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
}

.site-foot__legal a {
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-foot__legal .foot-line__in {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 줄 마스크: 글자 줄을 overflow hidden 안에 두고 아래(112%)에서 올린다. 칸 --i × 70ms, 목록 항목 --k × 50ms 지연. */
.foot-line {
  display: block;
  margin-bottom: -0.1em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.foot-line__in {
  display: block;
}

.js .site-foot .foot-line__in {
  transform: translateY(112%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms + var(--k, 0) * 50ms);
}

.js .site-foot.is-visible .foot-line__in {
  transform: none;
}

/* 글자별 진입은 메뉴와 같다: 1s cubic-bezier(.16,1,.3,1), 글자 순번 × 25ms. 이메일·인스타그램은 140%, 워드마크는 110%에서 올라온다. */
.js .site-foot .roll-char__in {
  transform: translateY(var(--rise, 140%));
}

.js .site-foot.is-visible .roll-char__in {
  transform: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + var(--c) * 25ms);
}

/* "click to copy" 작은 문구는 이메일 글자가 올라오기 시작한 뒤 따라 올라온다(translate는 복사 전환의 transform과 따로 움직인다). */
.js .site-foot .roll-link__copy-label {
  translate: 0 120%;
  transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium), translate 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + 0.2s);
}

.js .site-foot.is-visible .roll-link__copy-label {
  translate: none;
}

@media (max-width: 1024px) {
  .site-foot {
    min-height: auto;
  }

  .site-foot__mark {
    grid-column: 1 / 10;
  }

  .site-foot__grid {
    row-gap: 4rem;
  }

  .site-foot__brand {
    grid-column: 1 / span 4;
  }

  .site-foot__nav {
    grid-column: 6 / span 3;
  }

  .site-foot__social {
    grid-column: 9 / span 4;
  }

  .site-foot__general {
    grid-column: 6 / -1;
    grid-row: 2;
  }
}

@media (max-width: 480px) {
  .site-foot {
    padding-top: 3rem;
  }

  .site-foot__mark {
    grid-column: 1 / -1;
  }

  .site-foot__grid {
    margin-top: 4rem;
    row-gap: 3rem;
  }

  .site-foot__nav {
    grid-column: 1 / span 6;
    order: 1;
  }

  .site-foot__social {
    grid-column: 7 / span 6;
    order: 2;
  }

  .site-foot__general {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 3;
  }

  .site-foot__brand {
    grid-column: 1 / -1;
    order: 4;
  }
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  color: var(--color-ink);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.5s;
}

.project-modal::before {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  content: "";
  transform: translate3d(0, calc(-100% - 10px), 0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .project-modal::before {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.project-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.project-modal.is-open::before {
  transform: none;
}

.project-modal__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: calc(50px + 4vw) 30px calc(50px + 6vw);
  transform: translate3d(0, calc(-100% - 10px), 0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.project-modal.is-open .project-modal__content {
  transform: none;
}

.project-modal__conversation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-modal__copy {
  justify-content: center;
}

.project-modal__copy .project-modal__instagram {
  justify-content: center;
}

.project-modal__conversation h2 {
  margin: 0 0 26px;
  padding-right: 0;
  border-right: 0;
  font-family: var(--font-serif);
  font-size: calc(24px + 4vw);
  font-style: italic;
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 0.9;
}

.project-modal__copy {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.15rem 0;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 200;
  opacity: 0;
}

.project-modal__copy .project-modal__instagram {
  flex-basis: 100%;
  margin-top: 0.55rem;
}

/* "클릭해서 복사 | hello@blassong.com" 한 줄 표기, 메일 폰트는 인스타 행과 동일 크기 */
.project-modal__copy [data-copy-feedback] {
  font-size: 0.85em;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(46, 43, 38, 0.2);
  cursor: pointer;
}
.project-modal__copy button[data-copy-email] {
  font-size: 0.85em;
}

.project-modal__copy > [data-copy-feedback] {
  color: rgba(46, 43, 38, 0.5);
}

.project-modal__copy button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.project-modal__instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85em;
  transition: opacity 180ms ease;
}

.project-modal__instagram svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.project-modal__instagram:hover,
.project-modal__instagram:focus-visible {
  opacity: 0.6;
}

.project-modal__close {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* 햄버거 X와 동일한 시각 크기 */
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 200;
  opacity: 0;
}

.project-modal__claim {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  margin: 0;
  color: rgba(46, 43, 38, 0.5);
  font-size: 18px;
  text-align: center;
}

.project-modal__claim a {
  color: var(--color-ink);
}

.project-modal.is-open .project-modal__copy {
  opacity: 1;
  transition: opacity 1.2s ease 0.3s;
}

.project-modal.is-open .project-modal__close {
  opacity: 1;
  transition: opacity 0.9s ease 0.3s;
}

.js .reveal {
  opacity: 0;
  transform: translateY(2.25rem);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js [data-word-reveal] {
  color: rgba(36, 36, 39, 0.22);
}

[data-word-reveal] .word-reveal__word {
  --word-progress: 0;
  color: rgba(36, 36, 39, calc(0.22 + (0.78 * var(--word-progress))));
}

.js [data-character-reveal] {
  color: rgba(78, 78, 76, 0.62);
}

[data-character-reveal] .character-reveal__character {
  --word-progress: 0;
  --word-progress-percent: 0%;
  color: rgba(78, 78, 76, 0.62);
  color: color-mix(
    in srgb,
    rgba(78, 78, 76, 0.62) calc(100% - var(--word-progress-percent)),
    var(--color-accent) var(--word-progress-percent)
  );
}

@media (max-width: 959px) {
  :root {
    --section-space: clamp(5rem, 18vw, 8rem);
    --header-height: 4rem;
  }

  .site-header {
    grid-template-columns: 1fr auto 1fr;
  }

  .site-header__logo {
    font-size: 1.35rem;
  }

  .hero {
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 2rem);
  }

  .intro__statement > span:empty {
    display: none;
  }

  .manifesto__copy p {
    width: min(23rem, 48vw);
  }

  .services-collab__inner {
    grid-template-columns: 1fr;
    gap: clamp(4.5rem, 10vw, 7rem);
  }

  .services-collab__statement {
    max-width: 39rem;
  }

  .blog-row {
    grid-template-columns: 8rem auto minmax(0, 1fr) auto;
  }

  .home-contact__lower {
    grid-template-columns: 1fr;
  }

  .home-contact__newsletter {
    max-width: 36rem;
  }

}

@media (min-width: 1024px) {
  .live-floating {
    height: calc(22.222vw + 11rem);
  }

  .live-floating__card {
    width: min(33.333vw, 420px);
  }
}

@media (max-width: 767px) {
  [data-page-loader] {
    padding: 1.25rem;
  }

  [data-page-loader] [data-loader-footer] {
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
  }

  .page-home {
    --section-title-size: clamp(3.2rem, 15vw, 5rem);
  }

  .experience-section,
  .pl-overview {
    --experience-card-width: min(360px, 78vw);
    --experience-card-height: min(460px, 99.667vw);
  }

  .experience-carousel__track {
    gap: 12px;
  }

  .work-card__badges .work-card__badge {
    font-size: 0.373rem;
  }

  .hero__frame {
    width: 86vw;
  }

  .hero__caption {
    width: 86vw;
  }

  .work-card {
    flex-basis: 300px;
  }

  .selected-work__lead {
    max-width: 30rem;
    text-wrap: balance;
  }

  .live-floating {
    height: auto;
    padding: 0 var(--page-gutter);
  }

  .live-floating__card {
    position: relative;
    top: auto;
    left: auto;
    width: 85%;
    margin: -17% auto 0; /* 회전된 우측 상단 모서리가 위 섹션 경계에 닿도록 */
    transform: rotate(7deg);
  }

  .experience-section {
    padding-top: clamp(5rem, 16vw, 7rem);
  }

  .services-collab {
    padding-bottom: clamp(7.5rem, 24vw, 10rem);
  }

  .services-collab__panorama {
    height: 60svh;
  }

  .services-collab__inner {
    gap: clamp(4rem, 15vw, 6rem);
    padding-top: clamp(6.5rem, 20vw, 9rem);
  }

  .services-collab__statement h2 {
    font-size: 2rem;
  }

  .service-offering {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 2rem 0 2.25rem;
  }

  .service-offering h3 {
    font-size: clamp(3.5rem, 18vw, 4.75rem);
  }

  .service-offering__copy {
    max-width: 30rem;
    padding-top: 0;
  }

  .illust-slot--postcard {
    top: -3.75rem;
    right: 0;
    width: clamp(8rem, 30vw, 11rem);
  }

  .instagram-feed__item:nth-child(n + 6) {
    display: none;
  }

  .instagram-feed__stack {
    flex-basis: 300px;
  }

  .instagram-feed__rail > :nth-child(n + 6) {
    display: none;
  }

  .instagram-card-fan__card--right.instagram-card-fan__card--step-1 {
    --instagram-fan-open-x: 1.5rem;
  }

  .instagram-card-fan__card--left.instagram-card-fan__card--step-1 {
    --instagram-fan-open-x: -1.5rem;
  }

  .instagram-card-fan__card--right.instagram-card-fan__card--step-2 {
    --instagram-fan-open-x: 2.75rem;
  }

  .instagram-card-fan__card--left.instagram-card-fan__card--step-2 {
    --instagram-fan-open-x: -2.75rem;
  }

  .client-marquee {
    --client-card-w: 8.75rem;
    --client-card-h: 6rem;
    --client-logo-box-h: 3.25rem;
    --client-chip-pad-x: 12px;
    --client-chip-pad-y: 8px;
  }

  .client-marquee__card {
    gap: 0.45rem;
    border-radius: 14px;
  }

  .client-grid__name {
    font-size: 0.42rem;
    letter-spacing: 0.08em;
  }

  .client-grid__mark {
    font-size: 1.15rem;
  }
}

/* v5.15 — Korean display headings stay on one line without collapsing line-height. */
html[lang="ko"] .experience-section__heading h2 {
  max-width: none;
  font-size: clamp(2.45rem, 5.2vw, 5.5rem);
  line-height: 0.95;
  white-space: nowrap;
  text-wrap: nowrap;
}

html[lang="ko"] .instagram-feed__header h2 {
  max-width: none;
  font-size: clamp(1.7rem, 4vw, 4.75rem);
  line-height: 0.95;
  white-space: nowrap;
  text-wrap: nowrap;
}

html[lang="ko"] .intro .intro__statement {
  font-size: 2.4vw;
  letter-spacing: -0.03em;
  line-height: 1.3;
  word-break: keep-all;
}

/* 태블릿·모바일: 문단 폭·글자를 키워 영상 위에서 읽히게 */
@media (max-width: 1023px) {
  .intro .intro__statement {
    width: min(100%, 78vw);
    font-size: 4.4vw;
  }

  html[lang="ko"] .intro .intro__statement {
    font-size: 3.6vw;
  }
}

html[lang="ko"] .intro__statement > span::after {
  content: none;
}

html[lang="ko"] .manifesto__words {
  font-size: clamp(5rem, 8vw, 11rem);
  line-height: 1.1;
}

html[lang="ko"] .manifesto__words span {
  max-width: 8ch;
}

@media (max-width: 767px) and (orientation: portrait) {
  .hero__frame {
    width: min(86vw, calc(74svh * 9 / 16));
    max-height: 74svh;
    aspect-ratio: 9 / 16;
  }

  .hero__caption {
    width: min(86vw, calc(74svh * 9 / 16));
    max-height: 74svh;
    aspect-ratio: 9 / 16;
  }
}

@media (max-width: 520px) {
  .site-header__control {
    font-size: 0.61rem;
    letter-spacing: 0.1em;
  }

  .site-header__logo {
    font-size: 1.06rem;
  }

  .intro .intro__statement {
    width: 100%;
    font-size: 6.6vw;
  }

  html[lang="ko"] .intro .intro__statement {
    font-size: 5.4vw;
    line-height: 1.35;
  }

  html[lang="ko"] .intro .intro__statement > span:not(:first-child),
  html[lang="ko"] .intro .intro__statement > span:first-child {
    line-height: 2.7;
  }

  .manifesto {
    min-height: 170svh;
  }

  .manifesto__words {
    font-size: clamp(4.25rem, 22vw, 7rem);
  }

  .manifesto__words span:nth-child(1) {
    top: 13%;
  }

  .manifesto__words span:nth-child(2) {
    top: 42%;
  }

  .manifesto__copy p {
    width: 70vw;
    font-size: 1rem;
  }

  .manifesto__copy p:first-child {
    top: 27%;
    left: var(--page-gutter);
  }

  .manifesto__copy p:last-child {
    right: var(--page-gutter);
    top: 63%;
    bottom: auto;
  }

  .client-marquee__card {
    padding: 0.8rem 0.6rem;
  }

  .blog-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-height: 0;
    padding: 1.75rem 0;
  }

  .blog-row h3 {
    white-space: normal;
  }

  .home-contact__topics,
  .home-contact__cities {
    grid-template-columns: 1fr;
  }

  .home-contact__topic {
    min-height: 8rem;
  }

  .home-contact__social {
    justify-content: flex-start;
  }

  .home-contact__newsletter-row {
    grid-template-columns: 1fr;
  }

  .home-contact__newsletter input {
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    border-bottom: 0;
  }

  .home-contact__legal {
    grid-template-columns: 1fr;
  }

  .home-contact__legal > span:nth-child(2) {
    text-align: left;
  }

  .home-contact__legal div {
    flex-wrap: wrap;
  }

}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero__video {
    display: none;
  }

  .initial-loader,
  .initial-loader__progress {
    transition: none;
  }

  .initial-loader__wordmark {
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  /* 마퀴는 JS도 움직이지 않는다(content.js가 같은 조건을 확인) — 남은 transform도 지운다. */
  .client-marquee__track {
    transform: none !important;
    will-change: auto;
  }

  .client-grid__logo {
    transition: none;
  }

  .js [data-word-reveal] {
    color: var(--color-ink);
  }

  [data-word-reveal] .word-reveal__word {
    --word-progress: 1;
  }

  .js [data-character-reveal],
  [data-character-reveal] .character-reveal__character {
    --word-progress: 1;
    --word-progress-percent: 100%;
    color: var(--color-accent);
  }

  .live-heading__status--live .live-heading__dot {
    animation: none;
  }

  .live-carousel__status--live .live-carousel__status-dot {
    animation: none;
  }
}

/* ---- 스크롤 큐 (auwa.life 실측: SCROLL 12px/자간1.92px + 세로 라인 1×32/40px 숨쉬기) ---- */
.hero__scroll-cue {
  position: absolute;
  bottom: var(--scroll-cue-bottom, 40px);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6f5ef;
  cursor: pointer;
  opacity: var(--hero-fade, 1);
  transform: translateX(-50%);
}

.hero__scroll-cue-text {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.92px;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero__scroll-cue-roll {
  display: block;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__scroll-cue-roll--alt {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

.hero__scroll-cue:hover .hero__scroll-cue-roll,
.hero__scroll-cue:focus-visible .hero__scroll-cue-roll {
  transform: translateY(-100%);
}

.hero__scroll-cue:hover .hero__scroll-cue-roll--alt,
.hero__scroll-cue:focus-visible .hero__scroll-cue-roll--alt {
  transform: translateY(0);
}

.hero__scroll-cue-line {
  display: block;
  width: 1px;
  height: 32px;
  background: rgba(246, 245, 239, 0.7);
  transform-origin: top center;
  animation: scroll-cue-breathe 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@media (min-width: 768px) {
  .hero__scroll-cue-line {
    height: 40px;
  }
}

@keyframes scroll-cue-breathe {
  0%, 100% { opacity: 0.25; transform: scaleY(0.25); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue-line { animation: none; }
}


@media (max-width: 767px) {
  :root {
    --utility-bar-height: 46px;
  }

  .utility-bar {
    justify-content: space-between;
    padding: 10px 14px;
  }

  .pl-overview__lead {
    text-indent: 0;
  }

  .project-modal__conversation {
    align-items: center;
    gap: 2rem;
    flex-direction: column;
    text-align: center;
  }

  .project-modal__conversation h2 {
    margin: 0;
    padding-right: 0;
    border-right: 0;
  }

  .project-modal__copy {
    align-items: center;
  }

  /* 모바일: 참고처럼 문장이 여러 줄로 감기고 버튼은 오른쪽에 그대로 둔다. */
  .cookie-card {
    padding: 8px var(--page-gutter);
  }

  .cookie-card__inner {
    gap: 0.5rem;
  }

  /* v5.86: 모바일 문구는 2/3 크기(.875rem→.583rem)로 한 줄 */
  .cookie-card__copy {
    min-width: 0;
    padding-right: 0;
    overflow: hidden;
    font-size: calc(0.875rem * 2 / 3);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cookie-card__actions {
    gap: 4px;
  }

  /* v5.86: 문구가 한 줄에 들어가도록 버튼을 조금 좁게 */
  .cookie-card__choice {
    height: 28px;
    padding: 0 6px;
    font-size: 0.6875rem;
  }

  /* SEOUL 위젯 모바일 2/3 */
  .locale-widget {
    gap: 7px;
  }

  .locale-widget__city {
    font-size: 13px;
    line-height: 16px;
  }

  .locale-widget__time,
  .locale-widget__temp {
    font-size: 10px;
  }

  .locale-widget__icon {
    width: 13px;
    height: 13px;
  }

  .view-all-modal {
    background: rgba(246, 245, 239, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .view-all-modal__surface {
    padding-inline: 0.75rem;
  }

  .view-all-modal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0.625rem;
  }

  .view-all-modal__grid .work-card__copy {
    padding-inline: 0.1rem;
  }
}

@media (min-width: 1024px) and (min-aspect-ratio: 4 / 3) {
  .view-all-modal__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  }

  .view-all-modal__grid .work-card__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1440px) {
  .view-all-modal__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  }

  .view-all-modal__grid .work-card__media {
    aspect-ratio: 4 / 3;
  }
}


/* LIVE 제목 옆 상태 배지 (제목의 1/3 크기) */
.live-heading {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.live-heading__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-size: clamp(0.933rem, 1.467vw, 1.583rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-dusty);
}

.live-heading__status--live {
  color: #d23b2f;
}

.live-heading__dot {
  width: 0.55em;
  height: 0.55em;
  flex: none;
  background: var(--color-dusty);
  border-radius: 50%;
}

.live-heading__status--live .live-heading__dot {
  background: #d23b2f;
  animation: live-status-ripple 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .live-heading__status--live .live-heading__dot { animation: none; }
}


/* 방송중이 아닌 LIVE 슬라이드: 필름 그레인. 숏클립은 컬러를 유지한다. */
.live-carousel__slide--idle .live-carousel__media {
  position: relative;
}

.live-carousel__slide--idle:not(.live-carousel__slide--clip) .live-carousel__media img,
.live-carousel__slide--idle:not(.live-carousel__slide--clip) .live-carousel__fallback {
  filter: grayscale(1) contrast(0.92) brightness(0.96);
}

.live-carousel__slide--idle .live-carousel__media::after {
  /* leiavallante 방식 그대로: 타일 반복 애니메이션 노이즈 GIF 오버레이 (opacity 0.3) */
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("/assets/noise.gif");
  background-repeat: repeat;
  content: "";
  opacity: 0.3;
  pointer-events: none;
}

/* 드래그 중 캐러셀 전체(정보 텍스트 포함) 선택 방지 */
.live-carousel:has(.is-dragging),
.experience-carousel:has(.is-dragging) {
  -webkit-user-select: none;
  user-select: none;
}

/* v5.28 — sticky 히어로를 지나친 뒤에는 미디어를 숨겨 합성 레이어 이음새(소수점 높이)로 영상이 비치는 것 차단 */
.hero.is-parked {
  visibility: hidden; /* 배경색(sea blue)까지 포함해 전체 숨김 — 합성 이음새로 비치는 것 차단 */
}


/* v5.41 푸터 패럴렉스 이미지(EXPERIENCE 파노라마와 동일 방식). v5.77부터 claim과 푸터 본체 사이의 전폭 띠. */
.pl-footer__panorama {
  position: relative;
  height: 60svh;
  overflow: hidden;
  background: var(--color-cream);
}

.pl-footer__panorama img {
  position: absolute;
  top: -4rem;
  left: 0;
  width: 100%;
  height: calc(100% + 8rem);
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 767px) {
  .pl-footer__panorama {
    height: 45vh;
  }
}


/* overview 카드 버튼(닫기·안내)은 아웃라인/보더 없이 표면만 유지한다. */
.pl-overview__dismiss,
.pl-overview__caption {
  border: 0;
  outline: none;
}
.pl-overview__dismiss:focus-visible,
.pl-overview__caption:focus-visible {
  outline: none;
}


/* 데스크톱(호버 지원)에서는 확대 카드 X 버튼 숨김 — 모바일 탭 확대에서만 표시 */
@media (hover: hover) {
  .pl-overview__dismiss {
    display: none;
  }
}

/* v5.86 모바일: 푸터의 인스타그램·메일 주소를 오른쪽 정렬 */
@media (max-width: 767px) {
  .site-foot__social,
  .site-foot__general {
    align-items: flex-end;
    text-align: right;
  }

  .site-foot__social .roll-link,
  .site-foot__general .roll-link {
    align-self: flex-end;
  }
}