/*
Theme Name: eggmoneynat theme
Theme URI: https://eggmoneynat.beamers.work/
Author: eggmoneynat
Description: Studio theme. Managed by the Docker image; edit in this studio repo.
Version: 5.0.0
Requires at least: 6.0
Requires PHP: 8.3
Text Domain: theme
*/

/* 2026-07-09 v5 Dense Minimal Portfolio
   - Pretendard 단일 웹폰트.
   - 밝은 웜 화이트 배경, 얇은 구조선, 낮은 radius, 그림자 없음.
   - 로고 레드는 액센트로만 사용하고 작품 썸네일/메타가 먼저 읽히는 촘촘한 그리드.
   - 플레이풀 오브젝트, 다크 히어로, 세리프 실험 제거. */

:root {
  --egg-surface: #fff;
  --egg-surface-soft: var(--bsp-paper-2, #f3f2ee);
  --egg-accent-soft: var(--wp--custom--bsp--accent-soft, rgba(233, 79, 61, .08));
  --egg-field-red: var(--wp--custom--bsp--accent-field, #f7e7e4);
  --egg-yolk: var(--wp--custom--bsp--yolk, #f5ecd5);
  --egg-mint: var(--wp--custom--bsp--mint, #e8eee7);
  --egg-sky: var(--wp--custom--bsp--sky, #eaf1f4);
  --egg-r: var(--bsp-radius, 6px);
  --egg-r-sm: 4px;
  --egg-line: var(--bsp-rule, rgba(31, 33, 31, .10));
  --egg-line-strong: var(--bsp-rule-strong, rgba(31, 33, 31, .22));
  --egg-page-top: clamp(2.5rem, 5vw, 4.75rem);
  --egg-sticky-head: 2.33rem;
}

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

body {
  margin: 0;
  background: #fff;
  color: var(--bsp-ink);
  font-family: var(--bsp-font-body);
  font-size: var(--bsp-body-size, 1rem);
  line-height: var(--bsp-lh-body, 1.65);
  word-break: keep-all;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--bsp-font-display);
  font-weight: 760;
  line-height: var(--bsp-lh-heading, 1.12);
  text-wrap: balance;
}

p { margin: 0; }
em { font-style: normal; color: var(--bsp-accent); }
strong, b { font-weight: 700; }
img, video { max-width: 100%; height: auto; display: block; }
img { font-size: 0; color: transparent; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }

p a,
dd a,
.site-foot a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--bsp-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--egg-field-red);
  color: var(--bsp-ink);
}

.bsp-wrap,
.egg-wrap {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
  padding-inline: var(--bsp-pad-page);
}

.site-main {
  min-height: 60vh;
}

.t-display {
  font-size: clamp(3rem, 9vw, 7.75rem);
  line-height: 1;
}
.t-statement {
  font-size: clamp(1.75rem, 4vw, 3.75rem);
  line-height: 1.18;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2.25rem);
  color: var(--bsp-accent);
  font-size: .875rem;
  font-weight: 700;
}
.section-label::before {
  content: "";
  width: .8rem;
  height: 1px;
  background: currentColor;
}

.section-more {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  font-size: .9375rem;
  font-weight: 650;
}
.section-more a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  padding-bottom: .12rem;
}
.section-more a::after {
  content: "↗";
  font-size: .8em;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: .62rem var(--bsp-pad-page);
  background: var(--bsp-accent);
  border-bottom: 0;
  backdrop-filter: blur(14px);
}
.site-head__logo {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--bsp-on-accent);
}
.site-head__logo img {
  width: clamp(132px, 12vw, 176px);
  height: auto;
  filter: brightness(0) invert(1);
}
.site-nav {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem clamp(1rem, 2.5vw, 2.25rem);
}
.site-nav__group { display: contents; }
.site-nav a,
.site-nav__group a {
  color: color-mix(in srgb, var(--bsp-on-accent) 78%, transparent);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .045em;
  transition: color .18s ease;
}
.site-nav a:hover,
.site-nav__group a:hover,
.site-nav a[aria-current="page"],
.site-nav__group a[aria-current="page"] {
  color: var(--bsp-on-accent);
}

/* Footer */
.site-foot {
  margin-top: var(--bsp-gap-section);
  padding: clamp(2.25rem, 5vw, 4rem) var(--bsp-pad-page) 2rem;
  border-top: 1px solid var(--egg-line);
  background: var(--bsp-paper);
}
.site-foot__cols,
.site-foot__mark,
.site-foot__legal {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
}
.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.site-foot__col p,
.site-foot__social a,
.site-foot__col a {
  font-size: .875rem;
}
.site-foot__social {
  display: flex;
  flex-direction: column;
  gap: .12rem;
}
.site-foot__mute,
.site-foot__legal small {
  color: var(--bsp-ink-mute);
}
.site-foot__mute { max-width: 28ch; }
.site-foot__mark {
  margin-top: clamp(2.75rem, 6vw, 5rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(1.5rem, 4vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
}
.site-foot__mark span:last-child {
  color: var(--bsp-accent);
}
.site-foot__legal {
  margin-top: 1.5rem;
}

/* Home */
.home-hero--logo {
  min-height: min(52dvh, 34rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(.75rem, 2vw, 1.5rem) 0;
  background: var(--bsp-accent);
  border-bottom: 0;
}
.loghero {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  display: block;
}
.loghero__brand {
  width: 100%;
}
.loghero__brand img {
  width: 100%;
  max-width: none;
  filter: brightness(0) invert(1);
  transform: translateY(8px);
}
.loghero__brand span {
  display: block;
  color: var(--bsp-on-accent);
  font-size: clamp(3rem, 14vw, 13rem);
  font-weight: 850;
  line-height: .92;
}

.color-block {
  background: #fff;
}
.color-block--cream {
  background: #fff;
}
.color-block--yolk {
  background: var(--egg-yolk);
  border-block: 1px solid var(--egg-line);
}
.color-block--mint {
  background: var(--egg-mint);
}
.color-block--coral {
  background: var(--egg-field-red);
  border-block: 1px solid color-mix(in srgb, var(--bsp-accent) 18%, transparent);
}

.home-work,
.home-os,
.statement,
.home-cta {
  padding: var(--bsp-gap-section) var(--bsp-pad-page);
}
.home-work > *,
.home-os > *,
.statement > *,
.home-cta > * {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
}
.statement__lede,
.home-cta__lede {
  max-width: 26em;
  font-size: clamp(1.65rem, 4vw, 3.8rem);
  font-weight: 780;
  line-height: 1.18;
}
.statement__sub {
  max-width: 36rem;
  margin-top: 1.25rem;
  color: var(--bsp-ink-soft);
  font-size: 1rem;
  font-weight: 550;
}
.home-os__lede {
  max-width: 50rem;
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  line-height: 1.55;
  font-weight: 620;
}

/* Work grid */
.work-archive,
.story-archive {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: var(--egg-page-top) var(--bsp-pad-page) var(--bsp-gap-section);
}
.page-title {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  color: var(--bsp-ink);
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 820;
  line-height: .95;
}
.work-archive .page-title,
.story-archive .page-title,
.contact-page .page-title {
  color: #eeeeeb;
  text-align: left;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-indent: -.045em;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.75rem, 1.25vw, 1.1rem);
  align-items: start;
}
.work-card {
  grid-column: span 3;
  display: grid;
  grid-template-rows: auto auto auto auto;
  min-width: 0;
  color: var(--bsp-ink);
}
.work-card[hidden] {
  display: none;
}
.work-grid--related .work-card {
  grid-column: span 3;
}
.work-card figure {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--egg-r);
  border: 1px solid var(--egg-line);
  background: var(--egg-surface-soft);
}
.work-card figure:has(.work-card__placeholder-logo),
.work-card figure:empty {
  background: #e7e1dc;
}
.work-card__placeholder-logo,
.work-card figure:empty::after {
  position: absolute;
  inset: 0;
  width: min(70%, 18rem) !important;
  height: auto !important;
  max-width: 70%;
  margin: auto;
  object-fit: contain !important;
  opacity: .28;
  filter: brightness(0) invert(1);
  transform: none !important;
}
.work-card figure:empty::after {
  content: "eggmoneynat!";
  display: grid;
  place-items: center;
  color: var(--bsp-accent);
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 850;
  line-height: 1;
}
.work-card figure img,
.work-card figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .24s ease;
}
.work-card:hover figure img,
.work-card:hover figure video {
  transform: scale(1.015);
}
.work-card > p:first-of-type {
  order: 1;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .7rem;
  color: var(--bsp-ink-mute);
  font-size: .8125rem;
  line-height: 1.45;
}
.work-card > p:first-of-type strong {
  min-width: 0;
  color: var(--bsp-ink-soft);
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-card > p:first-of-type time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.work-card h3 {
  order: 2;
  margin-top: .2rem;
  font-size: clamp(.95rem, 1vw, 1.0625rem);
  font-weight: 720;
  line-height: 1.35;
}
.work-card > p:nth-of-type(2),
.work-card__meta {
  order: 3;
  margin-top: .25rem;
  color: var(--bsp-ink-mute);
  font-size: .8125rem;
  line-height: 1.45;
}
.work-card__meta:empty {
  display: none;
}
.work-grid--index .work-card:nth-child(7n + 1) {
  grid-column: span 3;
}
.work-grid--index .work-card:nth-child(7n + 1) figure img,
.work-grid--index .work-card:nth-child(7n + 1) figure video {
  aspect-ratio: auto;
}

.project-filter {
  position: sticky;
  top: var(--egg-sticky-head);
  z-index: 12;
  display: block;
  isolation: isolate;
  margin: calc(clamp(2rem, 4vw, 3.25rem) * -1) 0 clamp(1.25rem, 2.5vw, 2rem);
  padding: .5rem 0;
  background: transparent;
  border-block: 0;
}
.project-filter::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(var(--bsp-pad-page) * -1);
  background: rgba(255, 255, 255, .88);
  border-block: 1px solid var(--egg-line);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.project-filter__menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .3rem .38rem;
  min-width: 0;
}
.project-filter button {
  appearance: none;
  border: 1px solid var(--egg-line);
  border-radius: 999px;
  background: #fff;
  color: var(--bsp-ink-mute);
  padding: .34rem .72rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 720;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.project-filter button:hover {
  border-color: color-mix(in srgb, var(--bsp-accent) 45%, var(--egg-line));
  background: var(--egg-accent-soft);
  color: var(--bsp-accent);
}
.project-filter button.is-active {
  border-color: var(--bsp-accent);
  background: var(--bsp-accent);
  color: var(--bsp-on-accent);
}
.project-filter__group {
  display: contents;
}
.project-filter__group span {
  color: var(--bsp-ink);
  font-size: .75rem;
  font-weight: 820;
  line-height: 1.2;
  padding: .38rem .25rem 0 .55rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.project-filter__values {
  display: contents;
}
@supports not (display: contents) {
  .project-filter__group,
  .project-filter__values {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .38rem;
  }
}
.project-filter__group,
.project-filter__values {
  min-width: 0;
}

/* Portfolio blocks */
.bsp-section {
  padding-block: clamp(2rem, 4vw, 3.75rem);
}
.bsp-hero {
  padding: var(--egg-page-top) 0 clamp(2rem, 4vw, 3rem);
}
.bsp-hero__bg { display: none; }
.bsp-hero__inner {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
  padding-inline: var(--bsp-pad-page);
}
.bsp-hero__eyebrow,
.bsp-section-title__eyebrow {
  margin: 0 0 .75rem;
  color: var(--bsp-accent);
  font-size: .875rem;
  font-weight: 700;
}
.bsp-section-title__eyebrow {
  display: none;
}
.bsp-hero__heading,
.bsp-section-title__heading {
  max-width: 13em;
  font-size: clamp(2rem, 5.6vw, 5rem);
  line-height: 1.04;
}
.bsp-section-title__heading {
  color: rgba(31, 33, 31, .16);
}
.bsp-hero__sub {
  max-width: 48rem;
  margin-top: 1.1rem;
  color: var(--bsp-ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.bsp-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--egg-line);
}
.bsp-hero__link {
  color: var(--bsp-ink-soft);
  font-size: .875rem;
  font-weight: 650;
}
.bsp-video {
  padding-top: 0;
}
.bsp-video .bsp-wrap {
  max-width: min(100%, 74rem);
}
.bsp-video__player {
  overflow: hidden;
  border-radius: var(--egg-r);
  border: 0;
  background: var(--egg-surface-soft);
}
.bsp-video .plyr {
  --plyr-color-main: var(--bsp-accent);
  --plyr-control-radius: 3px;
  --plyr-video-controls-background: transparent;
  --plyr-video-control-color: var(--bsp-ink);
  --plyr-video-control-color-hover: var(--bsp-accent);
  --plyr-video-control-background-hover: transparent;
  --plyr-range-track-height: 7px;
  --plyr-range-thumb-background: var(--bsp-accent);
  --plyr-range-thumb-height: 14px;
  --plyr-range-thumb-shadow: none;
  --plyr-menu-shadow: none;
  --plyr-tooltip-shadow: none;
  border: 0;
  box-shadow: none;
}
.bsp-video .plyr--video .plyr__controls {
  position: absolute;
  overflow: visible;
  background: transparent;
  border-top: 0;
  box-shadow: none;
  color: var(--bsp-ink);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bsp-video .plyr--video .plyr__controls::before {
  content: none;
}
.bsp-video .plyr--video .plyr__controls > * {
  position: relative;
  z-index: 1;
}
.bsp-video .plyr__control {
  box-shadow: none;
}
.bsp-video .plyr__control:hover {
  background: transparent;
  color: var(--bsp-accent);
}
.bsp-video .plyr__progress::before {
  content: "";
  position: absolute;
  left: calc(var(--plyr-range-thumb-height, 13px) * -.5);
  right: calc(var(--plyr-range-thumb-height, 13px) * -.5);
  top: 50%;
  z-index: 0;
  height: var(--plyr-range-track-height, 5px);
  border-radius: 999px;
  background: rgba(31, 33, 31, .24);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .72),
    inset 0 0 0 1px rgba(31, 33, 31, .08);
  transform: translateY(-50%);
  pointer-events: none;
}
.bsp-video .plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background-color: rgba(31, 33, 31, .24);
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(255, 255, 255, .36) var(--value, 0));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72);
}
.bsp-video .plyr--full-ui input[type=range]::-moz-range-track {
  background-color: rgba(31, 33, 31, .24);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .72);
}
.bsp-video .plyr--full-ui input[type=range]::-ms-track {
  background-color: rgba(31, 33, 31, .24);
}
.bsp-video__caption,
.bsp-imagegrid__caption,
.bsp-metro__caption {
  margin-top: .65rem;
  color: var(--bsp-ink-mute);
  font-size: .8125rem;
}
.bsp-project-info.bsp-wrap {
  max-width: var(--bsp-maxw);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--egg-line);
}
.bsp-project-info__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.bsp-project-info__label {
  margin-bottom: .3rem;
  color: var(--bsp-ink-mute);
  font-size: .8125rem;
  font-weight: 650;
}
.bsp-project-info__value {
  margin: 0;
  color: var(--bsp-ink);
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  font-weight: 740;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.bsp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 0;
}
.bsp-tag {
  padding: .22rem .55rem;
  border: 1px solid var(--egg-line-strong);
  border-radius: 999px;
  font-size: .75rem;
}
.bsp-text-media__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.bsp-text-media__grid:has(.bsp-text-media__media) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
.bsp-text-media--media-left .bsp-text-media__grid:has(.bsp-text-media__media) .bsp-text-media__media {
  order: -1;
}
.bsp-text-media__body {
  max-width: 46rem;
  color: var(--bsp-ink-soft);
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-weight: 650;
  line-height: 1.5;
}
.bsp-text-media__grid:has(.bsp-text-media__media) .bsp-text-media__body {
  font-size: 1rem;
  font-weight: 450;
  line-height: var(--bsp-lh-body);
}
.bsp-text-media__body p + p {
  margin-top: 1em;
}
.bsp-text-media__media img,
.bsp-text-media__media video,
.bsp-gallery__grid img {
  border-radius: var(--egg-r);
  border: 1px solid var(--egg-line);
}
.bsp-section-title {
  padding-block: clamp(2.75rem, 6vw, 5rem) 0;
}
.bsp-section-title__band {
  padding: 0 0 .75rem;
  border-bottom: 0;
}
.bsp-credits {
  padding-block: clamp(2rem, 5vw, 4rem);
}
.bsp-credits .bsp-wrap {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
}
.bsp-credits .bsp-wrap::before {
  content: "Credits";
  color: var(--bsp-accent);
  font-size: .875rem;
  font-weight: 700;
}
.bsp-credits__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1.25rem 1.75rem;
}
.bsp-credits__role {
  display: block;
  margin-bottom: .2rem;
  color: var(--bsp-ink-mute);
  font-size: .8125rem;
}
.bsp-credits__name {
  display: block;
  font-size: .9375rem;
  font-weight: 650;
}
.bsp-imagegrid {
  padding-block: 0;
}
.bsp-imagegrid + .bsp-imagegrid {
  margin-top: clamp(.75rem, 1.2vw, 1rem);
}
.bsp-imagegrid__grid {
  display: grid;
  gap: clamp(.75rem, 1.2vw, 1rem);
}
.bsp-imagegrid--two .bsp-imagegrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsp-imagegrid--three .bsp-imagegrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bsp-imagegrid--four .bsp-imagegrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsp-imagegrid--featured .bsp-imagegrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bsp-imagegrid--featured .bsp-imagegrid__item:first-child { grid-column: 1 / -1; }
.bsp-imagegrid--bleed > .bsp-wrap {
  max-width: none;
  padding-inline: var(--bsp-pad-page);
}
.bsp-imagegrid__item {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--egg-r);
  background: var(--egg-surface-soft);
}
.bsp-imagegrid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bsp-metro__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 15vw, 210px), 1fr));
  grid-auto-rows: clamp(130px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: clamp(.5rem, 1vw, .75rem);
}
.bsp-metro__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--egg-r);
  background: var(--egg-surface-soft);
}
.bsp-metro__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bsp-metro__item--b { grid-column: span 2; grid-row: span 2; }
.bsp-metro__item--w { grid-column: span 2; grid-row: span 1; }
.bsp-metro__item--t { grid-column: span 1; grid-row: span 2; }
.bsp-metro__item--s { grid-column: span 1; grid-row: span 1; }
.bsp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.2vw, 1rem);
}
.bsp-quote {
  margin: 0;
}
.bsp-quote__text {
  max-width: 44rem;
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 760;
  line-height: 1.28;
}
.bsp-quote__cite {
  display: block;
  margin-top: 1rem;
  color: var(--bsp-ink-mute);
  font-size: .875rem;
}

/* Project detail */
.proj-hero {
  position: relative;
  background: var(--bsp-paper);
  border-bottom: 0;
  padding-block: var(--egg-page-top) clamp(2.5rem, 5vw, 4.5rem);
}
.proj-hero__wrap {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
  padding-inline: var(--bsp-pad-page);
}
.proj-hero__eyebrow {
  display: inline-flex;
  margin: 0 0 .9rem;
  color: var(--bsp-accent);
  font-size: .875rem;
  font-weight: 740;
}
.proj-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
  gap: clamp(1.5rem, 3.5vw, 4rem);
  align-items: start;
  margin-top: clamp(1.8rem, 4vw, 3.4rem);
}
.proj-hero__headline {
  min-width: 0;
}
.proj-hero__thumb {
  width: min(50vw, 100%);
  margin: 0 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--egg-r);
  background: var(--egg-surface-soft);
}
.proj-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.proj-hero__title {
  max-width: 12em;
  margin-top: clamp(.35rem, 1.1vw, .8rem);
  font-size: clamp(2.35rem, 4.8vw, 4.85rem);
  font-weight: 820;
  line-height: 1.16;
}
.proj-hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.proj-hero__desc {
  grid-column: 1 / span 7;
  max-width: 46rem;
  color: var(--bsp-ink-soft);
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  font-weight: 530;
  line-height: 1.75;
}
.proj-hero__desc p + p {
  margin-top: 1em;
}
.proj-meta {
  align-self: start;
  width: 100%;
  justify-self: stretch;
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r);
  background: var(--egg-surface);
}
.proj-meta__row {
  display: grid;
  gap: .25rem;
}
.proj-meta__label {
  margin: 0;
  color: var(--bsp-ink-mute);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.proj-meta__value {
  margin: 0;
  color: var(--bsp-ink);
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.45;
}
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: 0;
  margin: .1rem 0 0;
  list-style: none;
}
.proj-tag {
  padding: .2rem .55rem;
  border: 1px solid var(--egg-line-strong);
  border-radius: 999px;
  color: var(--bsp-ink-soft);
  font-size: .75rem;
  line-height: 1.3;
}
.proj-credits {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: 0;
  border-top: 1px solid var(--egg-line);
}
.proj-credits__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.proj-credits__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding-left: 0;
  border-left: 0;
}
.proj-credits__row {
  display: grid;
  grid-template-columns: minmax(8rem, .24fr) minmax(0, 1fr);
  align-content: start;
  gap: clamp(1rem, 2.4vw, 2rem);
  padding: .9rem 0 .85rem;
  border-bottom: 1px solid var(--egg-line);
}
.proj-credits__role {
  color: var(--bsp-ink-mute);
  font-size: .75rem;
  font-weight: 760;
  line-height: 1.35;
  text-transform: uppercase;
}
.proj-credits__name {
  min-width: 0;
  margin: 0;
  color: var(--bsp-ink);
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.proj-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: 1rem;
  border-top: 1px solid var(--egg-line);
}
.proj-hero__jump a {
  color: var(--bsp-ink-soft);
  font-size: .875rem;
  font-weight: 650;
}
.related {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
  padding: var(--bsp-gap-section) var(--bsp-pad-page) 0;
}
.related + .related {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* Documents */
.doc {
  max-width: var(--bsp-maxw);
  margin-inline: auto;
  padding: 0 var(--bsp-pad-page) var(--bsp-gap-section);
}
.doc-hero {
  padding: var(--egg-page-top) 0 clamp(2.5rem, 5vw, 4rem);
}
.doc-hero .page-title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: #eeeeeb;
  text-align: left;
  text-indent: -.045em;
  text-transform: uppercase;
}
.doc-hero__lede,
.doc-lede {
  max-width: 50rem;
  color: var(--bsp-ink-soft);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 620;
  line-height: 1.55;
}
.doc-lede--small {
  max-width: 56rem;
  margin-top: 1rem;
  font-size: clamp(.98rem, 1.25vw, 1.125rem);
  font-weight: 560;
  line-height: 1.65;
}
.fact-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r);
  background: var(--egg-surface);
}
.fact-band__item {
  padding: clamp(1rem, 2vw, 1.45rem);
  border-right: 1px solid var(--egg-line);
}
.fact-band__item:last-child {
  border-right: 0;
}
.fact-band dt {
  margin-bottom: .35rem;
  color: var(--bsp-ink-mute);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.fact-band dd {
  margin: 0;
  color: var(--bsp-ink);
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 760;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.doc-section {
  padding-block: clamp(3rem, 6vw, 5.5rem) 0;
}
.doc-prose {
  max-width: 48rem;
}
.doc-prose p {
  color: var(--bsp-ink-soft);
}
.doc-prose p + p {
  margin-top: 1.05em;
}
.doc-quote {
  margin: 0 0 1.75rem;
}
.doc-quote p {
  max-width: 48rem;
  color: var(--bsp-ink);
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 760;
  line-height: 1.28;
}
.doc-split-visual {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(20rem, 1.04fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.doc-visual {
  margin: clamp(1.6rem, 4vw, 3rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r);
  background:
    linear-gradient(90deg, rgba(31, 33, 31, .025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(31, 33, 31, .025) 1px, transparent 1px),
    #fbfaf8;
  background-size: 42px 42px;
}
.doc-split-visual .doc-visual {
  margin: 0;
}
.doc-visual figcaption {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--egg-line);
  color: var(--bsp-ink-mute);
  font-size: .72rem;
  font-weight: 780;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.doc-visual svg {
  display: block;
  width: 100%;
  height: auto;
}
.doc-visual line,
.doc-visual path,
.doc-visual rect,
.doc-visual circle {
  vector-effect: non-scaling-stroke;
}
.doc-visual text {
  fill: var(--bsp-ink);
  font-family: var(--bsp-font-body);
  font-size: 15px;
  font-weight: 760;
  text-anchor: middle;
  letter-spacing: 0;
}
.doc-visual pattern line {
  stroke: rgba(233, 79, 61, .34);
  stroke-width: 1;
}
.diagram-field {
  opacity: 1;
}
.diagram-orbit {
  fill: none;
  stroke: rgba(31, 33, 31, .09);
  stroke-width: 1;
}
.diagram-square {
  fill: rgba(255,255,255,.72);
  stroke: rgba(31, 33, 31, .12);
  stroke-width: 1;
}
.diagram-hatch {
  stroke: color-mix(in srgb, var(--bsp-accent) 42%, var(--egg-line));
  stroke-width: 1;
  opacity: .7;
}
.diagram-fill {
  fill: var(--egg-accent-soft);
  stroke: color-mix(in srgb, var(--bsp-accent) 42%, var(--egg-line));
}
.diagram-dot {
  fill: var(--egg-surface);
  stroke: var(--egg-line-strong);
  stroke-width: 1.2;
}
.diagram-dot--accent {
  fill: var(--bsp-accent);
  stroke: var(--bsp-accent);
}
.flow-grid line,
.layer-rail line,
.translation-lines path,
.capability-node line {
  stroke: rgba(31, 33, 31, .14);
  stroke-width: 1;
  fill: none;
}
.flow-line path,
.step-path path {
  stroke: var(--bsp-accent);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}
.flow-node circle,
.flow-node rect,
.step-dot circle,
.step-dot rect,
.layer-node circle,
.layer-node rect {
  fill: var(--egg-surface);
  stroke: var(--egg-line-strong);
  stroke-width: 1.4;
}
.flow-node--accent circle,
.flow-node--accent rect,
.layer-node--accent circle,
.layer-node--accent rect,
.step-dot:first-of-type circle,
.step-dot:first-of-type rect,
.step-dot:last-of-type circle,
.step-dot:last-of-type rect {
  fill: var(--bsp-accent);
  stroke: var(--bsp-accent);
}
.layer-node--accent .layer-no,
.step-dot:first-of-type text,
.step-dot:last-of-type text {
  fill: #fff;
}
.flow-node text {
  fill: var(--bsp-ink-mute);
  font-size: 14px;
  font-weight: 740;
}
.flow-note,
.step-label {
  fill: var(--bsp-ink-mute);
  font-size: 13px;
  font-weight: 720;
  text-anchor: start;
}
.layer-title {
  fill: var(--bsp-ink);
  font-size: 14px;
  font-weight: 820;
}
.layer-question {
  fill: var(--bsp-ink-mute);
  font-size: 12px;
  font-weight: 650;
}
.layer-hatch-bg {
  opacity: .42;
}
.layer-square-bg {
  opacity: .72;
}
.layer-node--accent .layer-title,
.layer-node--accent .layer-question {
  fill: var(--bsp-ink);
}
.step-band rect,
.translation-inputs rect,
.translation-output rect {
  fill: rgba(255,255,255,.76);
  stroke: var(--egg-line);
  stroke-width: 1;
  rx: 6;
}
.step-band rect {
  opacity: .82;
}
.step-hatch {
  fill: url(#processStepHatch);
  opacity: .42;
}
.step-fill {
  fill: var(--egg-accent-soft);
}
.step-dot circle {
  fill: #fff;
  stroke: var(--bsp-accent);
}
.step-dot rect {
  fill: #fff;
  stroke: var(--bsp-accent);
}
.step-dot text {
  fill: var(--bsp-accent);
  font-size: 11px;
  font-weight: 850;
}
.translation-inputs text {
  text-anchor: start;
  fill: var(--bsp-ink-soft);
  font-size: 15px;
}
.translation-lines path {
  stroke: rgba(233, 79, 61, .42);
}
.translation-field .diagram-hatch {
  fill: url(#aboutTranslationHatch);
  opacity: .22;
}
.translation-inputs .translation-card--filled,
.translation-output .translation-output-card--filled {
  fill: var(--egg-accent-soft);
  stroke: color-mix(in srgb, var(--bsp-accent) 45%, var(--egg-line));
}
.translation-inputs .translation-card--hatch,
.translation-output .translation-output-card--hatch {
  fill: url(#aboutTranslationHatch);
  opacity: .72;
}
.translation-port {
  fill: var(--egg-surface);
  stroke: var(--bsp-accent);
  stroke-width: 1.2;
}
.translation-core circle {
  fill: var(--bsp-accent);
  stroke: var(--bsp-accent);
}
.translation-core text {
  fill: #fff;
  font-size: 18px;
  font-weight: 820;
}
.translation-output text {
  fill: var(--bsp-ink);
  font-size: 15px;
}
.capability-core {
  fill: var(--bsp-accent);
  stroke: var(--bsp-accent);
  stroke-width: 1;
}
.capability-core-text {
  fill: #fff !important;
  font-size: 19px !important;
  font-weight: 850 !important;
}
.capability-node line {
  stroke: rgba(233, 79, 61, .38);
}
.capability-field .diagram-hatch {
  fill: url(#aboutCapabilityHatch);
  opacity: .34;
}
.capability-node circle {
  fill: #fff;
  stroke: var(--egg-line-strong);
  stroke-width: 1.2;
}
.capability-node rect {
  fill: #fff;
  stroke: var(--egg-line-strong);
  stroke-width: 1.2;
}
.capability-node--filled circle,
.capability-node--filled rect {
  fill: var(--egg-accent-soft);
  stroke: color-mix(in srgb, var(--bsp-accent) 52%, var(--egg-line));
}
.capability-node text {
  fill: var(--bsp-ink-soft);
  font-size: 13px;
}
/* (제거됨) .doc-visual:hover 다이어그램 애니메이션 — CLAUDE 전역 :hover 시각효과 금지 위반 */

/* ── 문서형 페이지 — 우측 스크롤스파이 사이드바 + 본문 ─────────────────── */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(8rem, 12vw, 11rem);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.doc-main { min-width: 0; }
.doc-side { position: sticky; top: 5.5rem; align-self: start; }
.doc-spy { display: flex; flex-direction: column; gap: .05rem; }
.doc-spy__link {
  padding: .4rem 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--bsp-ink-mute);
  transition: color .2s ease;
}
.doc-spy__link.is-active { color: var(--bsp-accent); font-weight: 700; }
.doc-spy__link:focus-visible { outline: 2px solid var(--bsp-accent); outline-offset: 3px; border-radius: 3px; }

/* 본문 — 섹션마다 특징적 배경 패널 + 세로 리듬 일관화(.doc--spy) */
.doc--spy .doc-main { display: flex; flex-direction: column; gap: clamp(.9rem, 1.8vw, 1.4rem); }
.doc--spy .doc-section {
  padding: clamp(1.9rem, 3.8vw, 3.25rem) clamp(1.4rem, 3vw, 2.75rem);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--sec-bg, var(--egg-surface));
  scroll-margin-top: 5rem;
}
.doc--spy .doc-section > * { margin-top: 0; }
.doc--spy .doc-section > * + * { margin-top: clamp(1.2rem, 2.4vw, 1.85rem); }
.doc--spy .doc-section > .section-label + * { margin-top: clamp(1.35rem, 2.8vw, 2.1rem); }
.doc--spy .doc-section > :is(.card-grid, .service-list, .stance, .way-list, .about-operating, .doc-figure, .client-flow, .section-more) {
  margin-top: clamp(1.9rem, 3.6vw, 2.75rem);
}
.doc--spy .doc-lede, .doc--spy .doc-quote { margin: 0; }
.doc--spy .doc-section > .doc-lede--small { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.doc--spy .fact-band { margin-top: 0; margin-bottom: clamp(.9rem, 1.8vw, 1.4rem); }

/* 섹션 배경 틴트 — 뮤트 파스텔, 인접 섹션이 서로 다르게(id 매핑) */
#about-intro      { --sec-bg: #f5f4f0; }
#about-attitude   { --sec-bg: #f9f3df; }
#about-philosophy { --sec-bg: #edf3ec; }
#about-cases      { --sec-bg: #e7f1f8; }
#about-services   { --sec-bg: #fbeceb; }
#about-ai         { --sec-bg: #f1edf6; }
#about-assets     { --sec-bg: #f5f4f0; }
#about-clients    { --sec-bg: #f9f3df; }
#about-team       { --sec-bg: #edf3ec; }
#about-name       { --sec-bg: #e7f1f8; }
#about-way        { --sec-bg: #fbeceb; }
#process-principle    { --sec-bg: #f5f4f0; }
#process-cos          { --sec-bg: #f9f3df; }
#process-layers       { --sec-bg: #edf3ec; }
#process-bridge       { --sec-bg: #e7f1f8; }
#process-steps        { --sec-bg: #fbeceb; }
#process-questions    { --sec-bg: #f1edf6; }
#process-pipeline     { --sec-bg: #f5f4f0; }
#process-qc           { --sec-bg: #f9f3df; }
#process-deliverables { --sec-bg: #edf3ec; }
.doc--spy .doc-cta { --sec-bg: #f1edf6; }

/* ── 정제된 flat 다이어그램(.doc-figure) — 저품질 SVG 대체 ───────────────── */
.doc-figure {
  overflow: hidden;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r);
  background: var(--egg-surface);
}
.doc-figure figcaption {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--egg-line);
  color: var(--bsp-ink-mute);
  font-size: .875rem;
  font-weight: 600;
}
/* flowmap: Input → Core Metaphor → Output */
.flowmap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.flowmap__tag {
  display: block;
  margin-bottom: .85rem;
  font-family: var(--bsp-font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bsp-ink-mute);
}
.flowmap__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.flowmap__list li { font-size: clamp(.9rem, 1.1vw, 1.0625rem); font-weight: 600; color: var(--bsp-ink); line-height: 1.35; }
.flowmap__side--out { text-align: right; }
.flowmap__pivot {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 12vw, 8.75rem);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1.5px solid var(--bsp-accent);
  color: var(--bsp-accent);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  font-size: clamp(.85rem, 1.2vw, 1.0625rem);
}
.flowmap__pivot::before, .flowmap__pivot::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(.75rem, 2.6vw, 2.25rem);
  height: 1px;
  background: var(--egg-line-strong);
}
.flowmap__pivot::before { right: 100%; margin-right: .35rem; }
.flowmap__pivot::after { left: 100%; margin-left: .35rem; }
/* hubmap: Motion Logic → applications */
.hubmap {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  flex-wrap: wrap;
}
.hubmap__core {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(6rem, 10vw, 8rem);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1.5px solid var(--bsp-accent);
  color: var(--bsp-accent);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  font-size: clamp(.85rem, 1.1vw, 1rem);
}
.hubmap__nodes {
  flex: 1 1 16rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .5rem;
}
.hubmap__nodes li {
  padding: .55rem .9rem;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r-sm);
  font-size: .875rem;
  font-weight: 600;
  color: var(--bsp-ink-soft);
}
/* steprail — 정제 flat 스텝 시퀀스(Process 흐름·5계층·8단계) */
.doc-figure--rail .steprail {
  list-style: none;
  margin: 0;
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(.5rem, 1.5vw, 1.25rem);
}
.steprail__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding-top: 1.4rem;
  min-width: 0;
}
.steprail__item::before {
  content: "";
  position: absolute;
  top: .2rem;
  left: 0;
  width: .62rem;
  height: .62rem;
  border-radius: 999px;
  border: 1.5px solid var(--bsp-accent);
  background: var(--egg-surface);
}
.steprail__item::after {
  content: "";
  position: absolute;
  top: .51rem;
  left: .62rem;
  right: calc(-1 * clamp(.5rem, 1.5vw, 1.25rem));
  height: 1.5px;
  background: var(--egg-line-strong);
}
.steprail__item:last-child::after { display: none; }
.steprail__no {
  font-family: var(--bsp-font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--bsp-ink-mute);
  font-variant-numeric: tabular-nums;
}
.steprail__label {
  font-size: clamp(.85rem, 1vw, 1rem);
  font-weight: 600;
  color: var(--bsp-ink);
  line-height: 1.32;
}
@media (max-width: 720px) {
  .doc-figure--rail .steprail { grid-auto-flow: row; grid-auto-columns: auto; gap: 1rem; }
  .steprail__item { padding-top: 0; padding-left: 1.4rem; }
  .steprail__item::after { top: .82rem; left: .31rem; right: auto; width: 1.5px; height: calc(100% + .2rem); }
}
/* 산출물 2열 리스트 */
.doc-list--cols { columns: 2; column-gap: 2.5rem; }
@media (max-width: 560px) { .doc-list--cols { columns: 1; } }

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; }
  .doc-side { display: none; }
}
@media (max-width: 620px) {
  .flowmap { grid-template-columns: 1fr; gap: 1.4rem; }
  .flowmap__side--out { text-align: left; }
  .flowmap__pivot { justify-self: start; }
  .flowmap__pivot::before, .flowmap__pivot::after { display: none; }
}
.tenets,
.card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(.75rem, 1.2vw, 1rem);
}
.tenets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: egg-tenet;
}
.tenets li {
  counter-increment: egg-tenet;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r);
  background: var(--egg-surface);
  font-weight: 690;
}
.tenets li::before {
  content: counter(egg-tenet, decimal-leading-zero);
  display: block;
  margin-bottom: .8rem;
  color: var(--bsp-accent);
  font-family: var(--bsp-font-mono);
  font-size: .8125rem;
}
.principle-strip {
  list-style: none;
  padding: 0;
  margin: clamp(1.4rem, 3vw, 2.25rem) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--egg-line);
  border-bottom: 1px solid var(--egg-line);
}
.principle-strip li {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-right: 1px solid var(--egg-line);
}
.principle-strip li:last-child {
  border-right: 0;
}
.principle-strip span {
  display: block;
  margin-bottom: .65rem;
  color: var(--bsp-accent);
  font-family: var(--bsp-font-mono);
  font-size: .75rem;
  font-weight: 760;
}
.principle-strip strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--bsp-ink);
  font-size: .95rem;
  font-weight: 780;
  line-height: 1.22;
}
.principle-strip p {
  color: var(--bsp-ink-soft);
  font-size: .875rem;
  line-height: 1.55;
}
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.doc-card {
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r);
  background: var(--egg-surface);
}
.numbered .doc-card {
  counter-increment: egg-card;
}
.numbered .doc-card::before {
  content: counter(egg-card, decimal-leading-zero);
  display: block;
  margin-bottom: .8rem;
  color: var(--bsp-accent);
  font-family: var(--bsp-font-mono);
  font-size: .8125rem;
}
.doc-card__no {
  margin-bottom: .75rem;
  color: var(--bsp-accent);
  font-family: var(--bsp-font-mono);
  font-size: .8125rem;
}
.doc-card__title {
  margin-bottom: .55rem;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 760;
}
.doc-card__q,
.doc-card__meta {
  color: var(--bsp-ink-mute);
  font-size: .875rem;
  font-weight: 600;
}
.doc-card p:not([class]) {
  color: var(--bsp-ink-soft);
  font-size: .9375rem;
}
.doc-card p + p {
  margin-top: .75rem;
}
.stance {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--egg-line);
}
.stance li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--egg-line);
}
.stance del {
  color: var(--bsp-ink-mute);
  text-decoration-color: color-mix(in srgb, var(--bsp-ink-mute) 40%, transparent);
}
.stance span {
  font-weight: 700;
}
.about-operating {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--egg-line);
  border-bottom: 1px solid var(--egg-line);
}
.about-operating section {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-right: 1px solid var(--egg-line);
}
.about-operating section:last-child {
  border-right: 0;
}
.about-operating h3 {
  margin-bottom: .45rem;
  color: var(--bsp-accent);
  font-size: .92rem;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.about-operating p {
  color: var(--bsp-ink-soft);
  font-size: .875rem;
  line-height: 1.58;
}
.service-list {
  margin: 0;
  border-top: 1px solid var(--egg-line);
}
.service-list__row {
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(0, 1.6fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--egg-line);
}
.service-list dt {
  font-weight: 740;
}
.service-list dd {
  margin: 0;
  color: var(--bsp-ink-soft);
}
.service-list--compact .service-list__row {
  grid-template-columns: minmax(13rem, .68fr) minmax(0, 1.7fr);
}
.service-list--compact dt span {
  display: block;
  margin-top: .32rem;
  color: var(--bsp-ink-mute);
  font-size: .76rem;
  font-weight: 680;
  line-height: 1.35;
}
.client-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.client-flow li {
  padding: .35rem .6rem;
  border: 1px solid var(--egg-line);
  border-radius: var(--egg-r-sm);
  background: var(--egg-surface);
  color: var(--bsp-ink-soft);
  font-size: .875rem;
  font-weight: 600;
}
.doc-cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.doc-list {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--bsp-ink-soft);
}
.doc-list li + li {
  margin-top: .65rem;
}
.question-list {
  list-style: none;
  padding: 0;
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  counter-reset: egg-question;
  border-top: 1px solid var(--egg-line);
}
.question-list li {
  counter-increment: egg-question;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--egg-line);
  color: var(--bsp-ink);
  font-weight: 650;
  line-height: 1.45;
}
.question-list li::before {
  content: counter(egg-question, decimal-leading-zero);
  color: var(--bsp-accent);
  font-family: var(--bsp-font-mono);
  font-size: .8125rem;
  font-weight: 760;
}
.way-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  counter-reset: egg-way;
  border-top: 1px solid var(--egg-line);
}
.way-list li {
  counter-increment: egg-way;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--egg-line);
}
.way-list li::before {
  content: counter(egg-way, decimal-leading-zero);
  color: var(--bsp-accent);
  font-family: var(--bsp-font-mono);
  font-size: .8125rem;
  padding-top: .18rem;
}
.way-list h3 {
  grid-column: 2;
  margin-bottom: .3rem;
  font-size: 1rem;
}
.way-list p {
  grid-column: 2;
  color: var(--bsp-ink-soft);
  font-size: .9375rem;
}
.doc-cta__lede {
  max-width: 24em;
  color: var(--bsp-ink);
  font-size: clamp(1.4rem, 2.8vw, 2.5rem);
  font-weight: 780;
  line-height: 1.25;
}

/* Contact */
.contact-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: var(--egg-page-top) var(--bsp-pad-page) var(--bsp-gap-section);
}
.contact-head {
  margin: 0;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.65fr);
  gap: clamp(2rem, 5vw, 5.25rem);
  align-items: start;
  border-top: 1px solid var(--egg-line);
}
.contact-sidebar,
.contact-main {
  min-width: 0;
  padding-top: clamp(1rem, 2.5vw, 1.5rem);
}
.contact-sidebar {
  position: sticky;
  top: calc(var(--egg-sticky-head) + 1rem);
}
.contact-sidebar__eyebrow {
  margin-bottom: 1rem;
  color: var(--bsp-accent);
  font-size: .75rem;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.contact-sidebar h2 {
  max-width: 20rem;
  color: var(--bsp-ink);
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  font-weight: 760;
  line-height: 1.25;
}
.contact-sidebar p:not([class]) {
  max-width: 24rem;
  margin-top: 1rem;
  color: var(--bsp-ink-soft);
  font-size: .9375rem;
  line-height: 1.6;
}
.contact-info {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  border-top: 1px solid var(--egg-line);
}
.contact-info div {
  display: grid;
  grid-template-columns: minmax(5.25rem, .5fr) minmax(0, 1fr);
  gap: 1rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--egg-line);
}
.contact-info dt {
  color: var(--bsp-ink-mute);
  font-size: .72rem;
  font-weight: 760;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.contact-info dd {
  min-width: 0;
  margin: 0;
  color: var(--bsp-ink);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.contact-info a {
  color: var(--bsp-accent);
  text-decoration: none;
}
.contact-social {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: .28rem .62rem;
  border: 1px solid var(--egg-line);
  border-radius: 999px;
  color: var(--bsp-ink-mute);
  font-size: .75rem;
  font-weight: 740;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.contact-social a:hover {
  border-color: color-mix(in srgb, var(--bsp-accent) 45%, var(--egg-line));
  background: var(--egg-accent-soft);
  color: var(--bsp-accent);
}
.contact-main__head {
  max-width: 42rem;
}
.contact-main__head .section-label {
  margin-bottom: .9rem;
}
.contact-main__head h2 {
  color: var(--bsp-ink);
  font-size: clamp(1.45rem, 2.35vw, 2.45rem);
  font-weight: 800;
  line-height: 1.08;
}
.contact-main__head p:not(.section-label) {
  margin-top: .85rem;
  color: var(--bsp-ink-soft);
  font-size: clamp(.98rem, 1.3vw, 1.125rem);
  font-weight: 560;
  line-height: 1.6;
}
.contact-form {
  max-width: none;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.contact-form .bsp-form {
  --input-height: 2.95rem;
}
.contact-form .bsp-form form {
  margin: 0;
}
.contact-form .bsp-form .acf-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1rem;
  min-width: 0;
}
.contact-form .bsp-form .acf-fields > .acf-field {
  min-width: 0;
}
.contact-form .bsp-form .acf-fields > .acf-field[data-width="50"] {
  width: calc(50% - .5rem) !important;
}
.contact-form .bsp-form .acf-label {
  margin: 0 0 .46rem;
}
.contact-form .bsp-form .acf-label > label {
  color: var(--bsp-ink);
  font-size: .8125rem;
  font-weight: 760;
  line-height: 1.35;
}
.contact-form .bsp-form .acf-field .description {
  margin-top: .42rem;
  color: var(--bsp-ink-mute);
  font-size: .8125rem;
}
.contact-form .bsp-form .bsp-field--chips .acf-checkbox-list,
.contact-form .bsp-form .bsp-field--chips .acf-radio-list {
  gap: .4rem .42rem;
}
.contact-form .bsp-form .bsp-field--chips .acf-checkbox-list label,
.contact-form .bsp-form .bsp-field--chips .acf-radio-list label {
  min-height: 2.45rem;
  padding: .56rem 1rem;
  border-color: var(--egg-line);
  color: var(--bsp-ink-mute);
  font-size: .9rem;
  font-weight: 720;
  line-height: 1.2;
}
.contact-form .bsp-form .bsp-field--chips .acf-checkbox-list li:has(input:checked) > label,
.contact-form .bsp-form .bsp-field--chips .acf-checkbox-list label.selected,
.contact-form .bsp-form .bsp-field--chips .acf-radio-list li:has(input:checked) > label,
.contact-form .bsp-form .bsp-field--chips .acf-radio-list label.selected {
  background: var(--bsp-accent);
  border-color: var(--bsp-accent);
  color: var(--bsp-on-accent);
}
.contact-form .bsp-form .bsp-field--section {
  margin-top: .35rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid var(--egg-line);
}
.contact-form .bsp-form .bsp-field--section .acf-label {
  margin: 0 0 .18rem;
}
.contact-form .bsp-form .bsp-field--section .acf-label > label {
  font-size: 1rem;
  font-weight: 800;
}
.contact-form .bsp-form .bsp-field--section .acf-input {
  color: var(--bsp-ink-mute);
  font-size: .875rem;
  line-height: 1.55;
}
.contact-form .bsp-form .acf-form-submit {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--egg-line);
}
.contact-form .bsp-form .acf-form-submit input[type="submit"],
.contact-form .bsp-form input[type="submit"].acf-button {
  appearance: none;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 1.05rem;
  border: 1px solid var(--bsp-accent);
  border-radius: 999px;
  background: var(--bsp-accent);
  color: var(--bsp-on-accent);
  font: inherit;
  font-size: .8125rem;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.contact-form .bsp-form .acf-form-submit input[type="submit"]:hover,
.contact-form .bsp-form input[type="submit"].acf-button:hover {
  border-color: color-mix(in srgb, var(--bsp-accent) 88%, #1f211f);
  background: color-mix(in srgb, var(--bsp-accent) 88%, #1f211f);
}
.contact-form .bsp-form .acf-form-submit input[type="submit"]:active,
.contact-form .bsp-form input[type="submit"].acf-button:active {
  transform: translateY(1px);
}
.contact-form .bsp-form-success {
  border-radius: var(--egg-r);
}

/* Responsive */
@media (max-width: 1180px) {
  .work-card,
  .work-grid--related .work-card,
  .work-grid--index .work-card:nth-child(7n + 1) {
    grid-column: span 4;
  }
  .card-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .proj-hero__head {
    grid-template-columns: 1fr;
  }
  .proj-hero__thumb,
  .proj-meta {
    width: 100%;
    justify-self: stretch;
  }
  .proj-hero__desc,
  .proj-meta {
    grid-column: 1 / -1;
  }
  .proj-meta {
    max-width: none;
  }
  .proj-credits {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .proj-credits__list {
    grid-template-columns: 1fr;
    padding-left: 0;
    border-left: 0;
  }
  .proj-credits__row {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
  .bsp-project-info__list,
  .card-grid--3,
  .card-grid--5,
  .tenets,
  .doc-cols2,
  .doc-split-visual,
  .principle-strip,
  .about-operating,
  .site-foot__cols,
  .contact-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bsp-text-media__grid:has(.bsp-text-media__media) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --egg-sticky-head: 3.77rem;
  }
  .site-head {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .site-head__logo,
  .site-nav {
    grid-column: 1;
  }
  .site-nav {
    justify-self: start;
    justify-content: flex-start;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 3rem);
  }
  .contact-sidebar {
    position: static;
  }
  .home-hero--logo {
    min-height: auto;
  }
  .work-card,
  .work-grid--related .work-card,
  .work-grid--index .work-card:nth-child(7n + 1) {
    grid-column: span 6;
  }
  .bsp-project-info__list,
  .bsp-imagegrid--three .bsp-imagegrid__grid,
  .bsp-imagegrid--featured .bsp-imagegrid__grid,
  .bsp-gallery__grid,
  .card-grid--2,
  .card-grid--3,
  .card-grid--5,
  .tenets,
  .doc-cols2,
  .doc-split-visual,
  .principle-strip,
  .about-operating,
  .site-foot__cols {
    grid-template-columns: 1fr;
  }
  .doc-visual figcaption {
    padding: .7rem .8rem;
    font-size: .68rem;
  }
  .contact-form .bsp-form .acf-fields > .acf-field[data-width="50"] {
    width: 100% !important;
  }
  .bsp-credits .bsp-wrap {
    grid-template-columns: 1fr;
  }
  .stance li,
  .service-list__row {
    grid-template-columns: 1fr;
  }
  .question-list li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
  .principle-strip li,
  .about-operating section {
    border-right: 0;
    border-bottom: 1px solid var(--egg-line);
  }
  .principle-strip li:last-child,
  .about-operating section:last-child {
    border-bottom: 0;
  }
  .fact-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fact-band__item:nth-child(2n) {
    border-right: 0;
  }
  .site-foot__mark {
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .work-card,
  .work-grid--related .work-card,
  .work-grid--index .work-card:nth-child(7n + 1) {
    grid-column: 1 / -1;
  }
  .bsp-imagegrid--two .bsp-imagegrid__grid,
  .bsp-imagegrid--three .bsp-imagegrid__grid,
  .bsp-imagegrid--four .bsp-imagegrid__grid,
  .bsp-imagegrid--featured .bsp-imagegrid__grid {
    grid-template-columns: 1fr;
  }
  .fact-band {
    grid-template-columns: 1fr;
  }
  .fact-band__item,
  .fact-band__item:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--egg-line);
  }
  .fact-band__item:last-child {
    border-bottom: 0;
  }
  .doc-visual {
    margin-top: 1.25rem;
    border-radius: var(--egg-r-sm);
  }
  .doc-visual svg {
    min-width: 38rem;
  }
  .doc-visual {
    overflow-x: auto;
  }
}