/* 포트폴리오 사이트(index·archive) 전용. 작품 페이지에는 쓰지 않는다.
   레퍼런스: brandawards.co.kr/forbes — 순검정 + 골드 + 콘덴스드 대문자 + 실선 표 */

body.site {
  --bg:        #000000;
  --bg-2:      #0C0C0C;
  --bg-3:      #171717;
  --gold:      #DCAE75;
  --gold-hi:   #E2B378;
  --gold-deep: #C69330;
  --fg:        #FFFFFF;
  --fg-2:      rgba(255, 255, 255, .62);
  --fg-3:      rgba(255, 255, 255, .34);
  --hair:      rgba(255, 255, 255, .18);
  --hair-2:    rgba(255, 255, 255, .42);
  --font-cond: Oswald, "Pretendard Variable", sans-serif;

  --head-h: 84px;

  background: var(--bg);
  color: var(--fg);
  padding-top: var(--head-h);
  overflow-x: clip;   /* 히어로 영상이 100vw로 풀블리드라 세로 스크롤바 폭만큼 넘친다 */
}

.site ::selection { background: var(--gold); color: #000; }

/* 콘덴스드 대문자 — 코드·숫자·라벨 전부 이걸로 */
.cond {
  font-family: var(--font-cond);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-feature-settings: "tnum";
}

/* ---------- 헤더 ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) clamp(20px, 4vw, 48px);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--hair);
}
.site-logo { font-family: var(--font-cond); line-height: 1.02; text-transform: uppercase; }
.site-logo b { display: block; font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em; color: var(--gold); }
.site-logo span { display: block; font-weight: 500; font-size: .875rem; letter-spacing: .12em; color: var(--fg); }
.site-nav { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.site-nav a {
  font-family: var(--font-cond); font-weight: 500; font-size: .875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2);
  transition: color .18s;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--gold); }

/* ---------- 레이아웃 ---------- */
.site .shell { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.site .band { padding-block: clamp(56px, 8vw, 104px); }
.site .band + .band { border-top: 1px solid var(--hair); }

/* 좌 제목 / 우 설명 2단 — 레퍼런스의 기본 조판 */
.split { display: grid; gap: var(--sp-6); }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--sp-8); } }

.site h2.title { font-size: clamp(1.5rem, 3.4vw, 2.125rem); font-weight: 700; line-height: 1.24; letter-spacing: -.02em; }
.site h2.title em { font-style: normal; color: var(--gold); }
.site .desc { color: var(--fg-2); font-size: var(--fs-md); line-height: 1.75; }

/* 자간 벌린 라벨 — 레퍼런스의 "시 상 명" 표기 */
.spaced { letter-spacing: .42em; font-size: var(--fs-sm); color: var(--fg-3); font-weight: var(--fw-medium); }

/* ---------- 히어로 — 풀스크린 · 중앙 정렬 · 선언문 ---------- */
.hero-site {
  position: relative;
  min-height: calc(100svh - 84px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: clamp(72px, 12vh, 140px) clamp(88px, 14vh, 150px);
}
.hero-site .kicker,
.hero-site h1 { position: relative; z-index: 1; }
.hero-site .kicker { margin-bottom: clamp(28px, 5vh, 52px); font-size: .8125rem; color: var(--gold-deep); }

/* 배경 영상 — 4클립 순환 크로스페이드. 화면 밖으로 풀블리드 */
.hero-bg {
  position: absolute; z-index: 0;
  top: calc(-1 * var(--head-h)); left: 50%; translate: -50% 0;
  width: calc(100vw - var(--sbw, 0px)); height: calc(100% + var(--head-h));
  overflow: hidden; background: #000;
}
.hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease;
  /* 스톡 영상 티를 지우는 처리 — 채도를 죽이고 크게 눌러 질감으로만 쓴다 */
  filter: grayscale(.58) contrast(1.14) brightness(.34);
  will-change: opacity, transform;
}
.hero-bg video.on { opacity: 1; animation: hero-kb 10s linear both; }
@keyframes hero-kb { from { scale: 1.02; } to { scale: 1.10; } }

/* 골드 광량 + 위아래 암전 — 글자 가독성은 여기서 확보한다 */
.hero-bg__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 82% at 50% 42%, rgba(220, 174, 117, .15), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,.50) 66%, #000 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-bg video.on { animation: none; } }

/* 조사는 흰색 400, 키워드만 골드 700 — 레퍼런스의 핵심 장치 */
.hero-site h1 {
  font-weight: 400;
  font-size: clamp(1.75rem, 5.4vw, 4.5rem);
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero-site h1 em { font-style: normal; font-weight: 700; color: var(--gold); }

/* 발행 표기 — 공식 문서의 판권란 */
.imprint {
  position: absolute; z-index: 1; left: 0; bottom: clamp(28px, 5vh, 48px);
  text-align: left; font-family: var(--font-cond);
  font-size: .6875rem; letter-spacing: .16em; line-height: 1.9;
  color: var(--fg-3); text-transform: uppercase;
}
.imprint b { display: block; color: var(--fg-2); font-weight: 500; }

/* 스크롤 표시 */
.scroll-cue {
  position: absolute; z-index: 1; left: 50%; translate: -50% 0; bottom: clamp(28px, 5vh, 48px);
  display: grid; justify-items: center; gap: 10px;
  font-family: var(--font-cond); font-size: .625rem; letter-spacing: .3em; color: var(--fg-3);
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--hair-2), transparent); }

/* 원형 배지 — 인장 */
.seal {
  position: absolute; z-index: 1; right: 0; bottom: clamp(20px, 5vh, 44px);
  width: clamp(104px, 12vw, 148px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%; background: #fff; color: #000;
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-spin 22s linear infinite; }
.seal svg text { font-family: var(--font-cond); font-size: 13px; font-weight: 500; letter-spacing: .1em; fill: #000; }
.seal span {
  position: relative; display: grid; gap: 2px; justify-items: center;
  font-family: var(--font-cond); font-weight: 700; font-size: .8125rem; letter-spacing: .08em;
}
.seal span i { font-style: normal; font-size: 1rem; line-height: 1; }
.seal:hover { background: var(--gold); }
@keyframes seal-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .seal svg { animation: none; } }

@media (max-width: 760px) {
  .hero-site { min-height: auto; padding-block: clamp(48px, 9vh, 88px) 0; }
  .imprint, .scroll-cue { position: static; translate: none; text-align: center; justify-items: center; margin-top: var(--sp-7); }
  .seal { position: static; margin: clamp(36px, 7vh, 56px) auto 0; }
}

/* 숫자 패널 — 사선 + × 점 패턴 */
.panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--hair);
  background:
    linear-gradient(118deg, #1A1A1A 0%, #0A0A0A 38%, #141414 62%, #050505 100%);
  padding: clamp(56px, 6vw, 72px) clamp(24px, 4vw, 56px) clamp(48px, 6vw, 72px);
}
.panel__marks {
  position: absolute; font-family: var(--font-cond); font-size: 13px;
  color: var(--gold-deep); opacity: .55; letter-spacing: .55em; line-height: 1.5;
  pointer-events: none; user-select: none;
}
.panel__marks--tl { top: 18px; left: 20px; }
.panel__marks--br { right: 12px; bottom: 18px; text-align: right; }

.figures { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); position: relative; }
.figures dt { font-size: var(--fs-xs); letter-spacing: .18em; color: var(--fg-3); text-transform: uppercase; }
.figures dd {
  margin: 6px 0 0; font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; color: var(--fg);
  font-feature-settings: "tnum";
}
.figures dd small { font-size: .34em; font-weight: 500; color: var(--fg-3); margin-left: 6px; letter-spacing: .08em; }
.figures dd.is-gold { color: var(--gold); }

/* ---------- 개요 표 (격식) ---------- */
.spec { width: 100%; border-collapse: collapse; border: 1px solid var(--hair-2); }
.spec th, .spec td { border: 1px solid var(--hair); padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; }
.spec th { width: 34%; font-weight: var(--fw-medium); color: var(--fg-3); font-size: var(--fs-sm); letter-spacing: .24em; white-space: nowrap; }
.spec td { color: var(--fg); font-size: var(--fs-base); }
.spec td b { color: var(--gold); font-weight: var(--fw-semibold); }
@media (max-width: 560px) {
  .spec th { width: 38%; letter-spacing: .12em; padding-inline: var(--sp-3); }
  .spec td { padding-inline: var(--sp-3); }
}

/* ---------- 매트릭스 (이 페이지의 주인공) ---------- */
.matrix-scroll { overflow-x: auto; margin-top: clamp(28px, 4vw, 44px); }
.matrix { border-collapse: collapse; width: 100%; min-width: 860px; border: 1px solid var(--hair-2); }
.matrix th, .matrix td { border: 1px solid var(--hair); }
.matrix thead th {
  padding: var(--sp-3) 4px; font-family: var(--font-cond); font-weight: 500;
  font-size: .6875rem; letter-spacing: .08em; color: var(--fg-3); text-transform: uppercase;
}
.matrix tbody th {
  padding: var(--sp-3) var(--sp-4); text-align: left; white-space: nowrap; width: 1%;
}
.matrix tbody th b { display: block; font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--fg-2); }
.matrix tbody th em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: .625rem; color: var(--fg-3); letter-spacing: .01em;
}
.matrix tbody th i { font-style: normal; color: var(--fg-3); font-family: var(--font-cond); margin-right: 8px; font-size: .75rem; }
/* 교역 방향 */
.dir { display: inline-block; margin-left: 8px; text-decoration: none; font-size: .8125rem; line-height: 1; }
.dir--out   { color: var(--gold); }
.dir--in    { color: #7FA6C9; }
.dir--both  { color: var(--fg); }
.dir--local { color: var(--fg-3); }
.matrix td { height: 42px; padding: 0; text-align: center; }
.matrix td span {
  display: block; width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-cond); font-size: .625rem; letter-spacing: .06em; color: var(--fg-3);
}
.matrix td.filled { background: var(--gold); }
.matrix td.filled a { display: grid; place-items: center; width: 100%; height: 100%; color: #000; font-family: var(--font-cond); font-weight: 700; font-size: .6875rem; letter-spacing: .06em; }
.matrix td.filled:hover { background: var(--gold-hi); }
.matrix tbody tr.is-lead th { color: var(--gold); }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--fg-3); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border: 1px solid var(--hair-2); }
.legend i.on { background: var(--gold); border-color: var(--gold); }

/* ---------- 작품 목록 ---------- */
.works { border-top: 1px solid var(--hair-2); margin-top: clamp(28px, 4vw, 44px); }
.work-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding-block: var(--sp-5); border-bottom: 1px solid var(--hair);
  transition: background .18s, padding-inline .18s;
}
.work-row:hover { background: var(--bg-3); padding-inline: var(--sp-4); }
.work-row__code { font-family: var(--font-cond); font-size: .75rem; letter-spacing: .1em; color: var(--gold-deep); }
.work-row__name { margin-top: 4px; font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.work-row__meta { margin-top: 6px; font-size: var(--fs-sm); color: var(--fg-3); }
.work-row__go { font-family: var(--font-cond); font-size: .75rem; letter-spacing: .12em; color: var(--fg-2); white-space: nowrap; }
.work-row:hover .work-row__go { color: var(--gold); }
.work-row__swatch { display: flex; gap: 3px; margin-top: 10px; }
.work-row__swatch i { width: 26px; height: 6px; }

/* 실제 운영중 / 샘플 구분 */
.badge {
  display: inline-block; margin-left: 10px; padding: 3px 9px; vertical-align: 3px;
  font-family: var(--font-cond); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.badge--live { background: var(--gold); color: #000; }
.badge--sample { border: 1px solid var(--hair-2); color: var(--fg-3); }

/* ---------- 푸터 ---------- */
.site-foot { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--hair-2); }
.cta-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5);
}
.site-foot .cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  background: var(--gold); color: #000;
  font-family: var(--font-cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s;
}
.site-foot .cta svg { width: 19px; height: 19px; }
.site-foot .cta:hover { background: var(--gold-hi); }
.cta-alt {
  font-size: var(--fs-sm); color: var(--fg-3);
  border-bottom: 1px solid var(--hair); padding-bottom: 2px;
  transition: color .18s, border-color .18s;
}
.cta-alt:hover { color: var(--gold); border-color: var(--gold); }
.site-foot .fine { margin-top: var(--sp-7); font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.9; }