@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --site-padding: 30px;
  --logo-height: 10px;
  --logo-gap-closed: 0px;
  --logo-gap-open: 70px;
  --landing-anim-duration: 1.1s;
  --font-size-desktop: 14px;
  --font-size-body-mobile: 13px;
  --font-size-mobile: 17px;
  --font-size: var(--font-size-desktop);
  --line-height-desktop: 1.3;
  --line-height-ko-desktop: 1.6;
  --line-height-body-mobile: 1.3;
  --line-height-ko-mobile: 1.5;
  --line-height: var(--line-height-desktop);
  --line-height-ko: var(--line-height-ko-desktop);
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-menu-hover: #e3e3e3;
  --color-modal: #e3e3e3;
  --grid-cols: 12;
  --grid-gap: 16px;
  --page-title-top: 90px;
  /* Content width at which all 12 columns are equal; below this, side space shrinks first */
  --grid-design-width: 1400px;
  --grid-col-max: calc((var(--grid-design-width) - (11 * var(--grid-gap))) / 12);
  /* Centered content bands (no zero-width tracks → no leftover gaps) */
  --band-max-6: calc(6 * var(--grid-col-max) + 5 * var(--grid-gap));
  --band-max-8: calc(8 * var(--grid-col-max) + 7 * var(--grid-gap));
  --band-max-10: calc(10 * var(--grid-col-max) + 9 * var(--grid-gap));
  /* .site-footer: 10px × line-height × 3 lines */
  --site-footer-height: calc(10px * var(--line-height) * 3);
  /* Clearance above fixed credits */
  --page-bottom-pad: 60px;
  --detail-lightbox-edge: 15px;
  --detail-lightbox-image-pad: 24px;
  --detail-lightbox-nav-size: 10px;
  --detail-lightbox-nav-gap: 24px;
  --detail-lightbox-pad-right: calc(
    var(--site-padding) + var(--detail-lightbox-nav-size) + var(--detail-lightbox-nav-gap) -
      var(--detail-lightbox-edge)
  );
}

/* Mobile: 6 columns, 15px gap, 15px padding */
@media (max-width: 767px) {
  :root {
    --site-padding: 15px;
    --grid-cols: 6;
    --grid-gap: 15px;
    --logo-gap-open: 16px;
    --font-size: var(--font-size-body-mobile);
    --line-height: var(--line-height-body-mobile);
    --line-height-ko: var(--line-height-ko-mobile);
  }
}

body {
  padding: var(--site-padding);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size);
  font-weight: 500;
  /* English / default; Korean: --line-height-ko via :lang(ko) */
  line-height: var(--line-height);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Undo UA heading sizes so they inherit --font-size from body */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
}

/* Keep scrollbar gutter reserved so hover-expanded page height
   doesn't toggle the scrollbar and shift the layout (hover jitter). */
html {
  scrollbar-gutter: stable;
}

:lang(ko) {
  line-height: var(--line-height-ko);
}

.site {
  min-height: calc(100vh - (var(--site-padding) * 2));
}

.site__main {
  position: relative;
  z-index: 1;
}

.site__main:not(.project) {
  padding-bottom: var(--page-bottom-pad);
}

/* Persistent site logo — top center on every page */
.site-logo {
  position: fixed;
  top: var(--site-padding);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: var(--logo-gap-closed);
  color: var(--color-fg);
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  transition: gap var(--landing-anim-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

/* Open except during the home landing overlay (closed only while .landing is active) */
.site-logo.is-split,
html.landing-seen .site-logo,
body:not(:has(.landing)) .site-logo {
  gap: var(--logo-gap-open);
}

.site-logo__piece {
  display: block;
  flex-shrink: 0;
  transition: transform var(--landing-anim-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.site-logo__piece svg {
  display: block;
  height: var(--logo-height);
  width: auto;
  fill: currentColor;
  color: inherit;
}

.site-logo__piece svg text {
  fill: currentColor;
}

/* Persistent site footer — bottom left on every page */
.site-footer {
  position: fixed;
  bottom: var(--site-padding);
  left: var(--site-padding);
  z-index: 1100;
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--color-fg);
  pointer-events: none;
}

/* Mobile: copyright sits at the end of page scroll (not viewport-fixed) */
@media (max-width: 767px) {
  .site {
    display: flex;
    flex-direction: column;
  }

  .site__main {
    flex: 1 0 auto;
  }

  .site-footer {
    position: static;
    z-index: auto;
    margin-top: 15px;
  }
}

/* Top nav — left Practices, right hover menu */
.site-nav {
  position: fixed;
  top: var(--site-padding);
  left: var(--site-padding);
  right: var(--site-padding);
  z-index: 1100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  color: var(--color-fg);
}

html:not(.landing-seen) body:has(.landing) .site-nav {
  visibility: hidden;
}

.site-nav__practices,
.site-nav__menu {
  pointer-events: auto;
}

.site-nav__icon {
  display: block;
  width: 10px;
  height: 10px;
  color: inherit;
  line-height: 0;
}

.site-nav__icon svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.site-nav__practices {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Desktop: clip symbol 11×11 — grow from bottom-left (+1px right, +1px up) */
@media (min-width: 768px) {
  .site-nav__practices .site-nav__icon {
    width: 11px;
    height: 11px;
    margin-top: -1px;
  }

  .site-nav__practices .site-nav__icon svg {
    width: 11px;
    height: 11px;
  }
}

.site-nav__menu {
  position: relative;
  margin-left: auto;
}

.site-nav__menu-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding: 16px;
  margin: -16px;
  background: transparent;
}

.site-nav__trigger {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}

.site-nav__list {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  text-align: right;
}

.site-nav__list a {
  color: inherit;
  text-decoration: none;
}

.site-nav__menu.is-open .site-nav__menu-hit {
  background: var(--color-menu-hover);
}

.site-nav__menu.is-open .site-nav__list {
  display: flex;
}

body:has(.site__main.practices) .site-nav__menu.is-open .site-nav__menu-hit,
body:has(.site__main.practice) .site-nav__menu.is-open .site-nav__menu-hit {
  background: var(--practices-menu-bg, #ffffff);
}

/* Mobile: logo piece nudge (open only), larger nav icons, inset menu panel */
@media (max-width: 767px) {
  .site-logo.is-split .site-logo__piece--by,
  html.landing-seen .site-logo .site-logo__piece--by,
  body:not(:has(.landing)) .site-logo .site-logo__piece--by {
    transform: translateX(-5px);
  }

  .site-logo.is-split .site-logo__piece--archi,
  html.landing-seen .site-logo .site-logo__piece--archi,
  body:not(:has(.landing)) .site-logo .site-logo__piece--archi {
    transform: translateX(5px);
  }

  .site-nav__icon {
    width: 12px;
    height: 12px;
  }

  .site-nav__icon svg {
    width: 12px;
    height: 12px;
  }

  /* Inset menu panel so ~2px white shows at top/right (15px padding − 13px) */
  .site-nav__menu-hit {
    padding-top: 13px;
    padding-right: 13px;
    margin-top: -13px;
    margin-right: -13px;
  }

  .site-nav__list,
  .site-nav__list a {
    font-size: var(--font-size-mobile);
  }
}

/* Landing overlay (logo lives outside) */
.landing {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: var(--site-padding);
  background: var(--color-bg);
  color: var(--color-fg);
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  transition: opacity calc(var(--landing-anim-duration) * 0.7) ease;
}

.landing.is-exiting {
  opacity: 0;
  pointer-events: none;
}

.landing[hidden],
html.landing-seen .landing {
  display: none;
}

/* Shared 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
  width: 100%;
}

/*
 * Works / about / team / exhibition / media / project band grid:
 * Below design width: centered content band; side free space shrinks first (no phantom gaps).
 * At/above design width: full-width 12 equal columns.
 */
.works .grid,
.practices .grid,
.about .grid,
.team .grid,
.exhibition .grid,
.media .grid,
.writing .grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: min(100%, var(--band-max-8));
  margin-inline: auto;
}

.project .grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(100%, var(--band-max-10));
  margin-inline: auto;
}

/* Works list — band coords (former 12-col 3–10 → 1–8) */
.works__title {
  grid-column: 1 / span 2;
  margin: 0;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
  font-weight: 500;
  line-height: 1;
}

.works__body {
  margin-top: 50px;
  align-items: start;
}

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

.works__list--left {
  grid-column: 1 / span 2;
}

.works__list--right {
  grid-column: 5 / span 2;
}

.works__preview {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.works__preview--left {
  grid-column: 3 / span 2;
}

.works__preview--right {
  grid-column: 7 / span 2;
}

.works__preview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}

.works__preview-image {
  display: block;
  width: 100%;
  height: auto;
}

.works__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

.works__name,
.works__name-en,
.works__category,
.works__year {
  display: block;
  line-height: var(--line-height);
}

/* Works — mobile: two title lists side by side; first tap overlays adjacent list */
@media (max-width: 767px) {
  .works .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
    margin-inline: 0;
  }

  .works__list--left {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  .works__list--right {
    grid-column: 4 / span 3;
    grid-row: 1;
  }

  .works__list--left,
  .works__list--right {
    position: relative;
    z-index: 0;
  }

  /* Left-item preview covers the right title list */
  .works__preview--left {
    position: relative;
    grid-column: 4 / span 3;
    grid-row: 1;
    z-index: 5;
    align-self: start;
  }

  /* Right-item preview covers the left title list */
  .works__preview--right {
    position: relative;
    grid-column: 1 / span 3;
    grid-row: 1;
    z-index: 5;
    align-self: start;
  }

  .works__preview.is-visible {
    background: var(--color-bg);
  }
}

/* Practices list — band coords (former 12-col 3–10 → 1–8) */
.practices__intro-grid {
  align-items: start;
}

.practices__panel {
  position: relative;
  grid-column: 1 / span 8;
}

.practices__panel.is-open {
  /* Expand 15px outside so title text stays put (padding cancelled by margin) */
  box-sizing: border-box;
  margin-top: calc(var(--page-title-top) - var(--site-padding) - 15px);
  margin-right: -15px;
  margin-left: -15px;
  padding: 15px;
  background: var(--practices-modal-bg, #ffffff);
}

.practices__title {
  margin: 0;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
  font-weight: 500;
  line-height: 1;
}

.practices__panel.is-open .practices__title {
  padding-top: 0;
}

.practices__toggle {
  display: block;
  margin-top: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.practices__panel.is-open .practices__toggle {
  display: none;
}

.practices__toggle:disabled {
  cursor: default;
  opacity: 1;
}

.practices__icon {
  display: block;
  width: 21px;
  height: 21px;
}

.practices__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.practices__close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.practices__close[hidden] {
  display: none;
}

.practices__content {
  margin-top: 30px;
}

.practices__content[hidden] {
  display: none;
}

.practices__content-body {
  line-height: var(--line-height);
}

.practices__content-body:lang(ko),
.practices__content-body :lang(ko) {
  line-height: var(--line-height-ko);
}

.practices__content-body > :first-child {
  margin-top: 0;
}

.practices__content-body > :last-child {
  margin-bottom: 0;
}

.practices__content-body p {
  margin: 0;
  text-indent: 20px;
}

.practices__content-body p + p {
  margin-top: 1em;
}

.practices__content-body .block-image {
  margin: 0;
}

.practices__content-body .block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.practices__content-body .block-image--width-1-2 {
  width: 50%;
}

.practices__content-body .block-image--width-1-3 {
  width: 33.333%;
}

.practices__content-body .block-image--align-center {
  margin-left: auto;
  margin-right: auto;
}

.practices__content-body .block-image--align-right {
  margin-left: auto;
  margin-right: 0;
}

.practices__content-body figcaption {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
}

.practices__content-body figcaption:lang(ko) {
  line-height: var(--line-height-ko);
}

.practices__content-body .bilingual-blocks__texts + .bilingual-blocks__media,
.practices__content-body .bilingual-blocks__media + .bilingual-blocks__texts {
  margin-top: 1em;
}

.practices__content-body .bilingual-blocks__section + .bilingual-blocks__section {
  margin-top: 1em;
}

.practices__content-body .bilingual-blocks__media .block-image + .block-image {
  margin-top: 1em;
}

.practices__body {
  margin-top: 30px;
  align-items: start;
}

.practices.is-open .practices__body {
  margin-top: 50px;
}

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

.practices__list--left {
  grid-column: 1 / span 2;
}

.practices__list--right {
  grid-column: 5 / span 2;
}

.practices__preview {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.practices__preview--left {
  grid-column: 3 / span 2;
}

.practices__preview--right {
  grid-column: 7 / span 2;
}

.practices__preview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}

.practices__preview-image {
  display: block;
  width: 100%;
  height: auto;
}

.practices__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

.practices__name,
.practices__name-en,
.practices__category,
.practices__year {
  display: block;
  line-height: var(--line-height);
}

/* Practices — mobile: two title lists side by side; first tap overlays adjacent list */
@media (max-width: 767px) {
  .practices .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
    margin-inline: 0;
  }

  .practices__panel {
    grid-column: 1 / -1;
  }

  .practices__list--left {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  .practices__list--right {
    grid-column: 4 / span 3;
    grid-row: 1;
  }

  .practices__list--left,
  .practices__list--right {
    position: relative;
    z-index: 0;
  }

  /* Left-item preview covers the right title list */
  .practices__preview--left {
    position: relative;
    grid-column: 4 / span 3;
    grid-row: 1;
    z-index: 5;
    align-self: start;
  }

  /* Right-item preview covers the left title list */
  .practices__preview--right {
    position: relative;
    grid-column: 1 / span 3;
    grid-row: 1;
    z-index: 5;
    align-self: start;
  }

  .practices__preview.is-visible {
    background: var(--color-bg);
  }

  /* Break out to 3px viewport inset; horizontal pad cancels so title stays put */
  .practices__panel.is-open {
    width: auto;
    max-width: none;
    margin-right: calc(-1 * (var(--site-padding) - 3px));
    margin-left: calc(-1 * (var(--site-padding) - 3px));
    padding-right: calc(var(--site-padding) - 3px);
    padding-left: calc(var(--site-padding) - 3px);
  }
}

/* Exhibition archive — band coords (former 12-col 3–10 → 1–8) */
.exhibition__title {
  grid-column: 1 / span 2;
  margin: 0;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
  font-weight: 500;
  line-height: 1;
}

.exhibition__body {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 50px;
}

.exhibition__row {
  align-items: end;
}

.exhibition__item {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: var(--line-height);
}

.exhibition__item:hover,
.exhibition__item:focus-visible,
.exhibition__item.is-preview-active {
  z-index: 2;
}

.exhibition__item--0 {
  grid-column: 1 / span 2;
}

.exhibition__item--1 {
  grid-column: 3 / span 2;
}

.exhibition__item--2 {
  grid-column: 5 / span 2;
}

.exhibition__item--3 {
  grid-column: 7 / span 2;
}

.exhibition__cover {
  display: block;
  width: 100%;
  height: auto;
}

.exhibition__meta {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  line-height: var(--line-height);
}

.exhibition__meta-line {
  display: block;
  background: var(--color-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: var(--line-height);
}

.exhibition__meta:lang(ko),
.exhibition__meta :lang(ko),
.exhibition__meta-line:lang(ko) {
  line-height: var(--line-height);
}

.exhibition__item:hover .exhibition__meta,
.exhibition__item:focus-visible .exhibition__meta {
  opacity: 1;
  visibility: visible;
}

/* Exhibition + Media Print — mobile: 6-col, 3+3 (2 images per row); first tap shows meta, second tap navigates */
@media (max-width: 767px) {
  .exhibition .grid,
  .media__print .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
    margin-inline: 0;
  }

  .exhibition__body,
  .media__print-body {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 100px;
    align-items: end;
  }

  .exhibition__row {
    display: contents;
  }

  .exhibition .exhibition__item--0,
  .exhibition .exhibition__item--2,
  .media__print .exhibition__item--0,
  .media__print .exhibition__item--2 {
    grid-column: 1 / span 3;
  }

  .exhibition .exhibition__item--1,
  .exhibition .exhibition__item--3,
  .media__print .exhibition__item--1,
  .media__print .exhibition__item--3 {
    grid-column: 4 / span 3;
  }

  .exhibition .exhibition__item:hover .exhibition__meta,
  .exhibition .exhibition__item:focus-visible .exhibition__meta,
  .media__print .exhibition__item:hover .exhibition__meta,
  .media__print .exhibition__item:focus-visible .exhibition__meta {
    opacity: 0;
    visibility: hidden;
  }

  /* Long meta overlays the next row (white bg) — never pushes layout */
  .exhibition .exhibition__item.is-preview-active .exhibition__meta,
  .media__print .exhibition__item.is-preview-active .exhibition__meta {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Media — Print archive + Broadcast text grid */
.media__title,
.media__broadcast-title {
  grid-column: 1 / span 2;
  margin: 0;
  font-weight: 500;
  line-height: 1;
}

.media__title {
  padding-top: calc(var(--page-title-top) - var(--site-padding));
}

.media__print-body {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 50px;
}

@media (max-width: 767px) {
  .media__print-body {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 100px;
    align-items: end;
  }
}

.media__broadcast {
  margin-top: 150px;
}

.media__broadcast-body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 50px;
}

.media__broadcast-row {
  align-items: start;
}

.media__broadcast-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  line-height: var(--line-height);
}

.media__broadcast-item--0 {
  grid-column: 1 / span 2;
}

.media__broadcast-item--1 {
  grid-column: 3 / span 2;
}

.media__broadcast-item--2 {
  grid-column: 5 / span 2;
}

.media__broadcast-item--3 {
  grid-column: 7 / span 2;
}

.media__broadcast-name,
.media__broadcast-date {
  display: block;
}

/* Broadcast — mobile: 6-col, 3+3 (2 items per row), 50px row gap; single tap follows link */
@media (max-width: 767px) {
  .media__broadcast .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
    margin-inline: 0;
  }

  .media__broadcast-body {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 50px;
    align-items: start;
  }

  .media__broadcast-row {
    display: contents;
  }

  .media__broadcast-item--0,
  .media__broadcast-item--2 {
    grid-column: 1 / span 3;
  }

  .media__broadcast-item--1,
  .media__broadcast-item--3 {
    grid-column: 4 / span 3;
  }
}

/* Writing — 4-col accordion list */
.writing__title {
  grid-column: 1 / span 2;
  margin: 0;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
  font-weight: 500;
  line-height: 1;
}

.writing__body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 50px;
}

.writing__row {
  align-items: start;
  row-gap: 0;
  column-gap: var(--grid-gap);
}

.writing__item {
  position: relative;
  line-height: var(--line-height);
}

.writing__item--0 {
  grid-column: 1 / span 2;
}

.writing__item--1 {
  grid-column: 3 / span 2;
}

.writing__item--2 {
  grid-column: 5 / span 2;
}

.writing__item--3 {
  grid-column: 7 / span 2;
}

.writing__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.writing__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.writing__item.is-open .writing__meta {
  position: relative;
  min-height: calc(106px - 16px);
  padding-top: 0;
  padding-right: 47px;
}

.writing__item.is-open .writing__meta::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: 0;
  bottom: 0;
  background: var(--color-modal);
  z-index: -1;
}

/* Rightmost open: extend grey stub into side margin to match panel */
.writing__item--3.is-open .writing__meta::before {
  right: -16px;
}

.writing__item--3.is-open .writing__close {
  right: -3px;
}

.writing__name,
.writing__name-en,
.writing__category,
.writing__year {
  display: block;
  line-height: var(--line-height);
}

/* Writing meta — ko/en both 1.2 (override global :lang(ko) 1.5); panel body stays as-is */
.writing__meta:lang(ko),
.writing__meta :lang(ko),
.writing__name:lang(ko),
.writing__name-en:lang(ko) {
  line-height: var(--line-height);
}

.writing__name {
  font-weight: 500;
}

.writing__category,
.writing__year {
  display: none;
}

.writing__item.is-open .writing__category,
.writing__item.is-open .writing__year {
  display: block;
}

.writing__close {
  position: absolute;
  top: -3px;
  right: 13px;
  z-index: 1;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.writing__close[hidden] {
  display: none;
}

.writing__icon {
  display: block;
  width: 21px;
  height: 21px;
}

.writing__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.writing__panel {
  grid-column: 1 / -1;
  margin-left: -16px;
  margin-right: -16px;
  padding: 16px;
  background: var(--color-modal);
  line-height: var(--line-height);
  box-sizing: border-box;
}

.writing__panel:lang(ko),
.writing__panel :lang(ko) {
  line-height: var(--line-height-ko);
}

.writing__panel[hidden] {
  display: none;
}

.writing__panel-body > :first-child {
  margin-top: 0;
}

.writing__panel-body > :last-child {
  margin-bottom: 0;
}

.writing__panel-body p {
  margin: 0;
  text-indent: 20px;
}

.writing__panel-body p + p {
  margin-top: 1em;
}

.writing__panel-body p.is-block-title {
  text-indent: 0;
}

.writing__panel-body p.is-paragraph-gap {
  margin: 0;
  text-indent: 0;
}

.writing__panel-body .block-image {
  margin-top: 0;
}

.writing__panel-body .block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.writing__panel-body .block-image--width-1-2 {
  width: 50%;
}

.writing__panel-body .block-image--width-1-3 {
  width: 33.333%;
}

.writing__panel-body .block-image--align-center {
  margin-left: auto;
  margin-right: auto;
}

.writing__panel-body .block-image--align-right {
  margin-left: auto;
}

.writing__panel-body figcaption {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
}

.writing__panel-body figcaption:lang(ko) {
  line-height: var(--line-height-ko);
}

/* Bilingual blocks — KO | EN row, images below taller column */
.bilingual-blocks__section + .bilingual-blocks__section {
  margin-top: 50px;
}

.bilingual-blocks__texts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.bilingual-blocks__col > :first-child {
  margin-top: 0;
}

.bilingual-blocks__col > :last-child {
  margin-bottom: 0;
}

.bilingual-blocks__col:lang(ko),
.bilingual-blocks__col:lang(ko) p,
.bilingual-blocks__col:lang(ko) figcaption {
  line-height: var(--line-height-ko);
}

.bilingual-blocks__col:lang(en),
.bilingual-blocks__col:lang(en) p,
.bilingual-blocks__col:lang(en) figcaption {
  line-height: var(--line-height);
}

.bilingual-blocks__texts + .bilingual-blocks__media,
.bilingual-blocks__media + .bilingual-blocks__texts {
  margin-top: 50px;
}

.bilingual-blocks__media > :first-child {
  margin-top: 0;
}

.bilingual-blocks__media > :last-child {
  margin-bottom: 0;
}

.bilingual-blocks__media .block-image + .block-image {
  margin-top: 50px;
}

@media (max-width: 767px) {
  .bilingual-blocks__texts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 25px;
  }
}

/* Writing — mobile: 6-col, 3+3 pairs; panel under open pair; 3px side inset */
@media (max-width: 767px) {
  .writing .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
    margin-inline: 0;
  }

  .writing__item--0,
  .writing__item--2 {
    grid-column: 1 / span 3;
  }

  .writing__item--1,
  .writing__item--3 {
    grid-column: 4 / span 3;
  }

  .writing__item--0,
  .writing__item--1 {
    grid-row: 1;
  }

  .writing__item--2,
  .writing__item--3 {
    grid-row: 2;
    margin-top: 50px;
  }

  /* Open item in first pair: push second pair below the panel */
  .writing__row:has(.writing__item--0.is-open) .writing__item--2,
  .writing__row:has(.writing__item--0.is-open) .writing__item--3,
  .writing__row:has(.writing__item--1.is-open) .writing__item--2,
  .writing__row:has(.writing__item--1.is-open) .writing__item--3 {
    grid-row: 3;
  }

  .writing__row:has(.writing__item--0.is-open) .writing__panel--0:not([hidden]),
  .writing__row:has(.writing__item--1.is-open) .writing__panel--1:not([hidden]) {
    grid-row: 2;
  }

  /* Area above modal: 12px above text + text + 12px below */
  .writing__item.is-open .writing__meta {
    min-height: 0;
    padding-bottom: 12px;
    padding-right: 36px;
  }

  /* Grey stub: 12px above text, connects to full-width panel below */
  .writing__item.is-open .writing__meta::before {
    top: -12px;
    bottom: 0;
    background: var(--color-modal);
  }

  /* Left col open: stub aligns to modal’s 3px left inset, stops at col 3 edge */
  .writing__item--0.is-open .writing__meta::before,
  .writing__item--2.is-open .writing__meta::before {
    left: calc(-1 * (var(--site-padding) - 3px));
    right: 0;
  }

  /* Right col open: 12px left of text; right edge to modal’s 3px inset */
  .writing__item--1.is-open .writing__meta::before,
  .writing__item--3.is-open .writing__meta::before {
    left: -12px;
    right: calc(-1 * (var(--site-padding) - 3px));
  }

  /* 12px below top of grey stub; 12px from grey stub’s right edge */
  .writing__item--0.is-open .writing__close,
  .writing__item--2.is-open .writing__close {
    top: 0;
    right: 12px;
  }

  .writing__item--1.is-open .writing__close,
  .writing__item--3.is-open .writing__close {
    top: 0;
    right: calc(12px - (var(--site-padding) - 3px));
  }

  .writing__panel {
    margin-left: calc(-1 * (var(--site-padding) - 3px));
    margin-right: calc(-1 * (var(--site-padding) - 3px));
    padding: 12px;
  }
}

/* About — band coords (former 12-col 3–10 → 1–8) */
.about__title {
  grid-column: 1 / span 2;
  margin: 0;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
  font-weight: 500;
  line-height: 1;
}

.about__body {
  margin-top: 50px;
  align-items: start;
}

.about__text--ko {
  grid-column: 1 / span 4;
}

.about__text--en {
  grid-column: 5 / span 4;
}

.about__text > :first-child {
  margin-top: 0;
}

.about__text > :last-child {
  margin-bottom: 0;
}

.about__text p {
  margin: 0;
  text-indent: 20px;
}

.about__text p + p {
  margin-top: 1em;
}

/* About — mobile: single column, ko above en, 50px between */
@media (max-width: 767px) {
  .about .grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-inline: 0;
  }

  .about__title,
  .about__text--ko,
  .about__text--en {
    grid-column: 1;
  }

  .about__body {
    row-gap: 50px;
  }
}

/* Team — band coords (former 12-col 3–10 → 1–8) */
.team__title {
  margin: 0;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
  font-weight: 500;
  line-height: 1;
}

.team__title--team {
  grid-column: 1 / span 2;
}

.team__title--contact {
  grid-column: 5 / span 2;
}

.team__title--office {
  grid-column: 7 / span 2;
}

/* Page titles — mobile */
@media (max-width: 767px) {
  .works__title,
  .practices__title,
  .exhibition__title,
  .media__title,
  .media__broadcast-title,
  .writing__title,
  .about__title,
  .team__title {
    font-size: var(--font-size-mobile);
  }
}

.team__body {
  margin-top: 50px;
  align-items: start;
  row-gap: 50px;
}

.team__member {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--line-height);
}

.team__member--left {
  grid-column: 1 / span 2;
}

.team__member--right {
  grid-column: 3 / span 2;
}

.team__name,
.team__name-en,
.team__role {
  display: block;
  line-height: var(--line-height);
}

.team__contact,
.team__office {
  grid-row: 1;
  line-height: var(--line-height);
}

.team__office > :first-child {
  margin-top: 0;
}

.team__office > :last-child {
  margin-bottom: 0;
}

.team__office p {
  margin: 0;
}

.team__office p + p {
  margin-top: 1em;
}

/* Team — ko/en both 1.2 (override global :lang(ko) 1.5) */
.team :lang(ko) {
  line-height: var(--line-height);
}

.team__contact {
  grid-column: 5 / span 2;
}

.team__office {
  grid-column: 7 / span 2;
}

.team__email,
.team__instagram {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Team — mobile: 6-col; Team title, members 3+3, then Contact | Office 3+3 */
@media (max-width: 767px) {
  .team {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 50px;
  }

  .team .grid {
    display: contents;
  }

  .team__title--team {
    order: 0;
  }

  .team__member--left {
    grid-column: 1 / span 3;
    order: 1;
  }

  .team__member--right {
    grid-column: 4 / span 3;
    order: 1;
  }

  .team__title--contact,
  .team__title--office {
    order: 2;
    padding-top: 0;
    margin-top: 50px; 
  }

  .team__title--contact {
    grid-column: 1 / span 3;
  }

  .team__title--office {
    grid-column: 4 / span 3;
  }

  .team__contact,
  .team__office {
    grid-row: auto;
    order: 3;
  }

  .team__contact {
    grid-column: 1 / span 3;
  }

  .team__office {
    grid-column: 4 / span 3;
  }
}

/* Project detail */
/* Project detail — column scrolls use full viewport; page margins stay as frame only */
body:has(.project) {
  overflow: hidden;
}

.project {
  width: calc(100% + (var(--site-padding) * 2));
  height: 100vh;
  margin: calc(var(--site-padding) * -1);
  overflow: hidden;
}

.project__grid {
  box-sizing: border-box;
  height: 100%;
  padding-right: var(--site-padding);
  padding-left: var(--site-padding);
  align-items: stretch;
}

.project__info {
  /* Band coords (former 12-col 2–5 → 1–4 on 10-col band) */
  grid-column: 1 / span 4;
  position: relative;
  height: 100%;
  min-height: 0;
}

.project__info-scroll,
.project__gallery {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.project__info-scroll::-webkit-scrollbar,
.project__gallery::-webkit-scrollbar {
  display: none;
}

.project__info-scroll {
  margin-left: -16px;
  margin-right: -16px;
  padding-top: var(--page-title-top);
  padding-right: 16px;
  padding-bottom: var(--site-padding);
  padding-left: 16px;
}

.project__info-text {
  position: relative;
}

html.is-project-info .project__meta {
  position: relative;
  z-index: 21;
}

html.is-project-info .project__info-open,
html.is-project-info .project__summary {
  display: none;
}

/* Match top clearance (page-title-top 90px − modal top -16px) so the panel can scroll past the modal */
html.is-project-info .project__info-scroll {
  padding-bottom: 74px;
}

.project__meta {
  line-height: var(--line-height);
}

.project__name {
  margin: 0;
  font-weight: 500;
  line-height: var(--line-height);
}

.project__name-ko,
.project__name-en,
.project__category,
.project__year {
  line-height: var(--line-height);
}

.project__info-open {
  display: block;
  margin-top: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.project__info-open:disabled {
  cursor: default;
  opacity: 1;
}

.project__summary {
  margin-top: 30px;
}

.project__summary > :first-child {
  margin-top: 0;
}

.project__summary > :last-child {
  margin-bottom: 0;
}

.project__summary p {
  margin: 0;
}

.project__icon {
  display: block;
  width: 21px;
  height: 21px;
}

.project__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.project__info-modal {
  position: absolute;
  top: -16px;
  right: -16px;
  left: -16px;
  z-index: 20;
  display: block;
  background: var(--color-modal);
  /* Height follows description content; bottom edge = text end + 16px padding */
}

html.is-project-info .project__info-modal-body {
  margin-top: var(--project-info-body-offset, 0px);
}

.project__info-modal[hidden] {
  display: none;
}

.project__info-close {
  position: absolute;
  z-index: 23;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.project__info-close[hidden] {
  display: none;
}

.project__info-modal-body {
  padding: 0 16px 16px 16px;
  line-height: var(--line-height);
}

.project__info-modal-body:lang(ko),
.project__info-modal-body :lang(ko) {
  line-height: var(--line-height-ko);
}

.project__info-modal-body:lang(en),
.project__info-modal-body :lang(en) {
  line-height: var(--line-height);
}

.project__info-modal-body > :first-child {
  margin-top: 0;
}

.project__info-modal-body > :last-child {
  margin-bottom: 0;
}

.project__info-modal-body p {
  margin: 0;
  text-indent: 20px;
}

.project__info-modal-body p + p {
  margin-top: 1em;
}


.project__info-modal-body p.is-paragraph-gap {
  margin: 0;
  text-indent: 0;
}

.project__info-modal-body .block-image {
  margin: 1em 0;
}

.project__info-modal-body .block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.project__info-modal-body .block-image--width-1-2 {
  width: 50%;
}

.project__info-modal-body .block-image--width-1-3 {
  width: 33.333%;
}

.project__info-modal-body .block-image--align-center {
  margin-left: auto;
  margin-right: auto;
}

.project__info-modal-body .block-image--align-right {
  margin-left: auto;
  margin-right: 0;
}

.project__info-modal-body figcaption {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
}

.project__info-modal-body figcaption:lang(ko) {
  line-height: var(--line-height-ko);
}

.project__gallery {
  /* Band coords (former 12-col 7–10 → 6–9 on 10-col band) */
  grid-column: 6 / span 4;
  min-height: 0;
  padding-top: var(--page-title-top);
  padding-bottom: 50px;
}

/* Content >= 1400px (viewport >= 1460px): full 12 equal columns */
@media (min-width: 1460px) {
  .works .grid,
  .practices .grid,
  .project .grid,
  .about .grid,
  .team .grid,
  .exhibition .grid,
  .media .grid,
  .writing .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
    margin-inline: 0;
  }

  .works__title,
  .works__list--left {
    grid-column: 3 / span 2;
  }

  .works__preview--left {
    grid-column: 5 / span 2;
  }

  .works__list--right {
    grid-column: 7 / span 2;
  }

  .works__preview--right {
    grid-column: 9 / span 2;
  }

  .practices__panel {
    grid-column: 3 / span 8;
  }

  .practices__list--left {
    grid-column: 3 / span 2;
  }

  .practices__preview--left {
    grid-column: 5 / span 2;
  }

  .practices__list--right {
    grid-column: 7 / span 2;
  }

  .practices__preview--right {
    grid-column: 9 / span 2;
  }

  .exhibition__item--0 {
    grid-column: 3 / span 2;
  }

  .exhibition__item--1 {
    grid-column: 5 / span 2;
  }

  .exhibition__item--2 {
    grid-column: 7 / span 2;
  }

  .exhibition__item--3 {
    grid-column: 9 / span 2;
  }

  .exhibition__title {
    grid-column: 3 / span 2;
  }

  .media__title,
  .media__broadcast-title {
    grid-column: 3 / span 2;
  }

  .media__broadcast-item--0 {
    grid-column: 3 / span 2;
  }

  .media__broadcast-item--1 {
    grid-column: 5 / span 2;
  }

  .media__broadcast-item--2 {
    grid-column: 7 / span 2;
  }

  .media__broadcast-item--3 {
    grid-column: 9 / span 2;
  }

  .writing__title {
    grid-column: 3 / span 2;
  }

  .writing__item--0 {
    grid-column: 3 / span 2;
  }

  .writing__item--1 {
    grid-column: 5 / span 2;
  }

  .writing__item--2 {
    grid-column: 7 / span 2;
  }

  .writing__item--3 {
    grid-column: 9 / span 2;
  }

  .writing__panel {
    grid-column: 3 / span 8;
  }

  .about__title {
    grid-column: 3 / span 2;
  }

  .about__text--ko {
    grid-column: 3 / span 4;
  }

  .about__text--en {
    grid-column: 7 / span 4;
  }

  .team__title--team,
  .team__member--left {
    grid-column: 3 / span 2;
  }

  .team__member--right {
    grid-column: 5 / span 2;
  }

  .team__title--contact,
  .team__contact {
    grid-column: 7 / span 2;
  }

  .team__title--office,
  .team__office {
    grid-column: 9 / span 2;
  }

  .project__info {
    grid-column: 2 / span 4;
  }

  .project__gallery {
    grid-column: 7 / span 4;
  }
}

.project__slide {
  position: relative;
  margin: 0;
}

.project__slide + .project__slide {
  margin-top: 35px;
}

.project__slide-image {
  display: block;
  width: 100%;
  height: auto;
}

.project__slide-open {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: #000000;
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.project__slide:hover .project__slide-open,
.project__slide:focus-within .project__slide-open {
  opacity: 1;
  pointer-events: auto;
}

.project__slide-open.is-on-dark {
  color: #ffffff;
}

/* Shared detail image lightbox — Works, Exhibition, Media, Practices */
.detail-lightbox__nav,
.project__nav,
.practice__nav {
  position: fixed;
  top: 50%;
  right: var(--site-padding);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
  max-height: calc(100vh - 180px);
  max-height: calc(100dvh - 180px);
  align-content: center;
  transform: translateY(-50%);
}

.practice__nav[hidden] {
  display: none;
}

.detail-lightbox__nav-item,
.project__nav-item,
.practice__nav-item {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  background: #e3e3e3;
  cursor: pointer;
}

.detail-lightbox__nav-item.is-active,
.project__nav-item.is-active,
.practice__nav-item.is-active {
  background: #000000;
}

html.is-detail-lightbox .detail-lightbox__nav-item:not(.is-active),
html.is-detail-lightbox .project__nav-item:not(.is-active) {
  background: #ffffff;
}

html.is-detail-lightbox .practice__nav-item:not(.is-active) {
  background: #e3e3e3;
}

.detail-lightbox,
.project__lightbox,
.practice__lightbox {
  position: fixed;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  z-index: 1200;
  background: var(--color-modal);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  cursor: pointer;
}

.practice__lightbox {
  background: var(--practices-lightbox-bg, #ffffff);
}

/* Shown when opening the image viewer while the page is pinch-zoomed */
.zoom-tip {
  position: fixed;
  left: 50%;
  bottom: calc(var(--site-footer-height) + 28px);
  z-index: 1300;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size);
  line-height: var(--line-height);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.zoom-tip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.detail-lightbox__close,
.project__lightbox-close,
.practice__lightbox-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

/* Escape .site__main stacking so lightbox sits above logo/nav (z-index 1100) */
html.is-detail-lightbox .site__main.project,
html.is-detail-lightbox .site__main.practice {
  z-index: 1200;
}

/* Desktop: keep fixed credits visible in the lightbox margin */
@media (min-width: 768px) {
  html.is-detail-lightbox .site-footer {
    z-index: 1202;
  }
}

/* Mobile: footer is in document flow (flex item) — hide so it can't stack above lightbox */
@media (max-width: 767px) {
  html.is-detail-lightbox .site-footer {
    visibility: hidden;
  }
}

html.is-detail-lightbox .project__info-scroll,
html.is-detail-lightbox .project__gallery {
  overflow: hidden;
  overscroll-behavior: none;
}

.detail-lightbox[hidden],
.project__lightbox[hidden],
.practice__lightbox[hidden] {
  display: none;
}

.detail-lightbox__viewport,
.project__lightbox-viewport,
.practice__lightbox-viewport {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.detail-lightbox__viewport.is-dragging,
.project__lightbox-viewport.is-dragging,
.practice__lightbox-viewport.is-dragging {
  cursor: grabbing;
}

.detail-lightbox__track,
.project__lightbox-track,
.practice__lightbox-track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

.practice__lightbox-track[hidden] {
  display: none;
}

.detail-lightbox__slide,
.project__lightbox-slide,
.practice__lightbox-slide {
  box-sizing: border-box;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px 0 60px;
  pointer-events: none;
}

.detail-lightbox__image,
.project__lightbox-image,
.practice__lightbox-image {
  display: block;
  width: min(100%, var(--band-max-6), calc(100vw - (2 * var(--site-padding))));
  max-height: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Desktop lightbox: top/bottom half zones — up/down arrow cursor, click to step images */
@media (min-width: 768px) {
  html.is-detail-lightbox .detail-lightbox,
  html.is-detail-lightbox .project__lightbox,
  html.is-detail-lightbox .practice__lightbox {
    cursor: default;
  }

  /* X icon (21×21) halved horizontally → ∧ / ∨, 21×10.5, 1px stroke */
  html.is-detail-lightbox .detail-lightbox.is-lightbox-zone-prev,
  html.is-detail-lightbox .project__lightbox.is-lightbox-zone-prev,
  html.is-detail-lightbox .practice__lightbox.is-lightbox-zone-prev {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='11' viewBox='0 10.5 21 10.5' fill='none'%3E%3Cpath d='M2 2l17 17M19 2L2 19' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E")
      10 0,
      n-resize;
  }

  html.is-detail-lightbox .detail-lightbox.is-lightbox-zone-next,
  html.is-detail-lightbox .project__lightbox.is-lightbox-zone-next,
  html.is-detail-lightbox .practice__lightbox.is-lightbox-zone-next {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='11' viewBox='0 0 21 10.5' fill='none'%3E%3Cpath d='M2 2l17 17M19 2L2 19' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E")
      10 11,
      s-resize;
  }

  html.is-detail-lightbox .detail-lightbox__viewport,
  html.is-detail-lightbox .project__lightbox-viewport,
  html.is-detail-lightbox .practice__lightbox-viewport {
    cursor: inherit;
  }

  html.is-detail-lightbox .detail-lightbox__viewport.is-dragging,
  html.is-detail-lightbox .project__lightbox-viewport.is-dragging,
  html.is-detail-lightbox .practice__lightbox-viewport.is-dragging {
    cursor: inherit;
  }
}

@media (max-width: 767px) {
  body:has(.project) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .project {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .project .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    width: 100%;
  }

  .project__grid {
    height: auto;
    row-gap: 0;
  }

  .project__info-scroll {
    padding-bottom: 0;
    padding-top: 77px;
  }

  /* Mobile: less clearance below open text modal (desktop keeps 74px) */
  html.is-project-info .project__info-scroll {
    padding-bottom: 15px;
  }

  .project__gallery {
    padding-top: 0;
    margin-top: 50px;
  }

  .project__info,
  .project__gallery {
    grid-column: 1 / -1;
    height: auto;
    overflow: visible;
  }

  /* Works / Exhibition / Media detail: gallery spans the full 6-col grid */
  .project:not(.project--archive) .project__gallery,
  .project--archive .project__gallery {
    grid-column: 1 / -1;
  }

  .project__info-scroll,
  .project__gallery {
    height: auto;
    overflow: visible;
  }

  /* Project detail (works / exhibition / print): info modal leaves 3px on left/right */
  .project__info-modal {
    left: calc(-1 * (var(--site-padding) - 3px));
    right: calc(-1 * (var(--site-padding) - 3px));
  }

  /* Mobile: image lightbox — 3px inset all sides; cover top bar; show close X */
  .detail-lightbox,
  .project__lightbox,
  .practice__lightbox {
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
  }

  /* Reserve close (top) + pagination (bottom) so tall images never overlap */
  .detail-lightbox__viewport,
  .project__lightbox-viewport,
  .practice__lightbox-viewport,
  .detail-lightbox__track,
  .project__lightbox-track,
  .practice__lightbox-track,
  .detail-lightbox__slide,
  .project__lightbox-slide,
  .practice__lightbox-slide {
    min-height: 0;
  }

  .detail-lightbox__slide,
  .project__lightbox-slide,
  .practice__lightbox-slide {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr) calc(100px - var(--site-footer-height));
    grid-template-columns: minmax(0, 1fr);
    box-sizing: border-box;
    /* Modal is 3px inset; keep image edges on site-padding */
    padding: 0 calc(var(--site-padding) - 3px);
    align-items: unset;
    justify-content: unset;
  }

  .detail-lightbox__image,
  .project__lightbox-image,
  .practice__lightbox-image {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  /* Mobile: no + mark — full-image hit target */
  .project__slide-open {
    inset: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
  }

  .project__slide:hover .project__slide-open,
  .project__slide:focus-within .project__slide-open {
    opacity: 0;
  }

  .project__slide-open .project__icon {
    display: none;
  }

  /* Mobile: indicators only inside open modal; lower by footer height */
  .detail-lightbox__nav,
  .project__nav,
  .practice__nav {
    display: none;
    top: auto;
    right: calc(3px + var(--site-padding));
    left: calc(3px + var(--site-padding));
    bottom: calc(3px + 66px - var(--site-footer-height));
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: calc(2 * 10px + 5px);
    align-content: center;
  }

  html.is-detail-lightbox .detail-lightbox__nav,
  html.is-detail-lightbox .project__nav,
  html.is-detail-lightbox .practice__nav:not([hidden]) {
    display: flex;
  }

  html.is-detail-lightbox .detail-lightbox__nav-item,
  html.is-detail-lightbox .project__nav-item {
    background: #ffffff;
  }

  html.is-detail-lightbox .practice__nav-item {
    background: #e3e3e3;
  }

  html.is-detail-lightbox .detail-lightbox__nav-item.is-active,
  html.is-detail-lightbox .project__nav-item.is-active,
  html.is-detail-lightbox .practice__nav-item.is-active {
    background: #000000;
  }
}

/* Home floors grid */
.home-floors {
  display: flex;
  flex-direction: column;
  gap: 78px;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
}

.home-floors--mobile {
  display: none;
}

.home-floors__floor {
  align-items: start;
}

.home-floors__more {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 80px;
  color: var(--color-fg);
  text-decoration: none;
  line-height: var(--line-height);
}

.home-floors__more-icon {
  display: block;
  width: 21px;
  height: 21px;
}

.home-floors__more-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .home-floors--desktop {
    display: none;
  }

  .home-floors--mobile {
    display: flex;
  }
}

.home-floors__item {
  grid-column: var(--col-start, 1) / span var(--span, 4);
  position: relative;
  display: block;
  color: var(--color-fg);
  text-decoration: none;
}

.home-floors__item:hover,
.home-floors__item:focus-visible {
  z-index: 2;
}

.home-floors__image {
  display: block;
  width: 100%;
  height: auto;
}

.home-floors__meta {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: block;
  width: max-content;
  max-width: 100%;
  background: var(--color-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: var(--line-height);
  color: var(--color-fg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.home-floors__item:hover .home-floors__meta,
.home-floors__item:focus-visible .home-floors__meta {
  opacity: 1;
  visibility: visible;
}

/* Home — mobile: meta hidden; tap navigates directly */
@media (max-width: 767px) {
  .home-floors__item:hover .home-floors__meta,
  .home-floors__item:focus-visible .home-floors__meta {
    opacity: 0;
    visibility: hidden;
  }
}

/* Practice detail */
.practice {
  position: relative;
}

.practice__meta {
  grid-column: 2 / span 2;
  z-index: 2;
  line-height: var(--line-height);
}

.practice__name {
  margin: 0;
  font-weight: 500;
  line-height: var(--line-height);
}

.practice__name-en,
.practice__category,
.practice__year {
  margin: 2px 0 0;
  line-height: var(--line-height);
}

.practice-floors {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: calc(var(--page-title-top) - var(--site-padding));
}

.practice-floors--mobile {
  display: none;
}

.practice__summary-grid {
  margin-top: 80px;
}

.practice__summary {
  grid-column: 2 / -1;
}

.practice__summary > :first-child {
  margin-top: 0;
}

.practice__summary > :last-child {
  margin-bottom: 0;
}

.practice__summary p {
  margin: 0;
}

.practice-floors__floor {
  align-items: start;
}

.practice-floors__item {
  grid-column: var(--col-start, 1) / span var(--span, 4);
  position: relative;
  display: block;
}

.practice-floors__item:hover,
.practice-floors__item:focus-within {
  z-index: 2;
}

.practice-floors__item--text.is-open {
  z-index: 3;
}

.practice-floors__text {
  position: relative;
}

.practice-floors__text-open {
  display: block;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.practice-floors__item--text.is-open .practice-floors__text-open {
  display: none;
}

.practice-floors__text-close {
  position: absolute;
  z-index: 23;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-fg);
  cursor: pointer;
  line-height: 0;
}

.practice-floors__item--text.is-open .practice-floors__text-close {
  top: 16px;
  /* Modal extends right: -16px; keep 16px inset from modal edge → 0 */
  right: 0;
}

.practice-floors__text-close[hidden] {
  display: none;
}

.practice-floors__text-modal {
  position: absolute;
  top: 0;
  right: -16px;
  left: -16px;
  z-index: 20;
  display: block;
  background: var(--practices-text-modal-bg, #ffffff);
}

.practice-floors__text-modal[hidden] {
  display: none;
}

.practice-floors__text-modal-body {
  padding: 15px;
  line-height: var(--line-height);
}

.practice-floors__text-modal-body:lang(ko),
.practice-floors__text-modal-body :lang(ko),
.practice-floors__text-modal-body p:lang(ko),
.practice-floors__text-modal-body figcaption:lang(ko) {
  line-height: var(--line-height-ko);
}

.practice-floors__text-modal-body:lang(en),
.practice-floors__text-modal-body :lang(en),
.practice-floors__text-modal-body p:lang(en),
.practice-floors__text-modal-body figcaption:lang(en) {
  line-height: var(--line-height);
}

.practice-floors__text-modal-body > :first-child {
  margin-top: 0;
}

.practice-floors__text-modal-body > :last-child {
  margin-bottom: 0;
}

.practice-floors__text-modal-meta {
  margin-bottom: 1em;
  line-height: var(--line-height);
}

.practice-floors__text-modal-name {
  margin: 0;
  font-weight: 500;
  line-height: var(--line-height);
  text-indent: 0;
}

.practice-floors__text-modal-name-en,
.practice-floors__text-modal-category,
.practice-floors__text-modal-year {
  margin: 2px 0 0;
  line-height: var(--line-height);
  text-indent: 0;
}

.practice-floors__text-modal-body p {
  margin: 0;
  text-indent: 20px;
}

.practice-floors__text-modal-body p + p {
  margin-top: 1em;
}

.practice-floors__text-modal-body p.is-paragraph-gap {
  margin: 0;
  text-indent: 0;
}

.practice-floors__text-modal-meta p {
  text-indent: 0;
}

.practice-floors__text-modal-meta p + p {
  margin-top: 2px;
}

.practice-floors__text-modal-body .block-image {
  margin: 1em 0;
}

.practice-floors__text-modal-body .block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.practice-floors__text-modal-body .block-image--width-1-2 {
  width: 50%;
}

.practice__lightbox-track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

.practice-floors__text-modal-body .block-image--align-center {
  margin-left: auto;
  margin-right: auto;
}

.practice-floors__text-modal-body .block-image--align-right {
  margin-left: auto;
  margin-right: 0;
}

.practice-floors__text-modal-body figcaption {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.2;
}

.practice-floors__image {
  display: block;
  width: 100%;
  height: auto;
}

.practice-floors__open {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-bg);
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.practice-floors__item:hover .practice-floors__open,
.practice-floors__item:focus-within .practice-floors__open {
  opacity: 1;
  pointer-events: auto;
}

.practice-floors__icon,
.practice__icon {
  display: block;
  width: 21px;
  height: 21px;
}

.practice-floors__icon svg,
.practice__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 767px) {
  .practice-floors {
    padding-top: 62px;
  }

  .practice-floors--desktop {
    display: none;
  }

  .practice-floors--mobile {
    display: flex;
  }

  /* Mobile: title spans full 6-col grid, 40px above first-floor images */
  .practice__meta {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .practice-floors__floor--first {
    row-gap: 40px;
  }

  .practice-floors__floor--first .practice-floors__item {
    grid-row: 2;
  }

  /* Mobile: no + mark — full-image hit target */
  .practice-floors__open {
    inset: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
  }

  .practice-floors__item:hover .practice-floors__open,
  .practice-floors__item:focus-within .practice-floors__open {
    opacity: 0;
  }

  .practice-floors__open .practice-floors__icon {
    display: none;
  }

  /* Mobile: text items always span full 6 columns; open modal has 3px side inset */
  .practice-floors__item--text {
    grid-column: 1 / -1;
  }

  .practice-floors__item--text.is-open .practice-floors__text-modal {
    left: calc(-1 * (var(--site-padding) - 3px));
    right: calc(-1 * (var(--site-padding) - 3px));
  }

  .practice-floors__item--text.is-open .practice-floors__text-close {
    top: 16px;
    right: calc(16px - (var(--site-padding) - 3px));
  }

  /* Summary: 50px below last image; full 6-col width, left-aligned like meta */
  .practice__summary-grid {
    margin-top: 50px;
  }

  .practice__summary {
    grid-column: 1 / -1;
  }
}

/* Desktop lightbox: 24px top/bottom; fill height or width up to 24px inside nav index */
@media (min-width: 768px) {
  .detail-lightbox__viewport,
  .project__lightbox-viewport,
  .practice__lightbox-viewport,
  .detail-lightbox__track,
  .project__lightbox-track,
  .practice__lightbox-track,
  .detail-lightbox__slide,
  .project__lightbox-slide,
  .practice__lightbox-slide {
    min-height: 0;
  }

  .detail-lightbox__slide,
  .project__lightbox-slide,
  .practice__lightbox-slide {
    display: grid;
    grid-template-rows: var(--detail-lightbox-image-pad) minmax(0, 1fr) var(--detail-lightbox-image-pad);
    grid-template-columns: minmax(0, 1fr);
    box-sizing: border-box;
    padding: 0 var(--detail-lightbox-pad-right) 0 var(--detail-lightbox-image-pad);
    align-items: unset;
    justify-content: unset;
  }

  .detail-lightbox__image,
  .project__lightbox-image,
  .practice__lightbox-image {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
}