/* 봄 여름 가을 서울 — squ-are.com(reference/ref-03) 을 옮긴 사이트. 메뉴를 누르면 그 섹션만 보인다(페이지처럼).
   흰 바탕·검정 글자. 선·그림자·배경색·아이콘·가로 내비 바 없음.
   선 예외 두 가지: 머리 표 위아래 1px 검정(표로 읽히게), 사진 박스의 1px 회색 테두리([확인 필요]와 같은 색 —
   아직 받지 않은 사진 자리. 사진이 오면 없어진다). 검정 선은 머리 표에만.
   [사이드(메뉴) 단 | 한국어 단 | 영어 단]. 모든 값은 아래 변수로만 조립한다. */
:root {
  --ink: #000;
  --paper: #fff;
  --tbd: #767676;                          /* [확인 필요] — 흰 바탕 대비 4.54:1 */

  /* 크기는 본문 / 작은 글씨 두 단계. 영어는 한국어보다 반 단계 크게 —
     명함(한글 7.5pt : 영문 8pt)과 같은 16/15. 어느 크기를 쓸지는 lang 이 정한다. */
  --ko: 15px;
  --en: calc(var(--ko) * 16 / 15);         /* 16px */
  --ko-s: 13px;
  --en-s: calc(var(--ko-s) * 16 / 15);     /* 13.87px */

  /* 행간. 레퍼런스(보통 굵기 그로테스크)는 1.2 안팎.
     영어 1.3 — Lexend Deca 700 은 x-height 가 높고 획이 두꺼워 1.2 면 줄이 무겁게 붙는다.
     한글 1.5 — 굵은(700) Gothic A1 은 네모꼴이 글자 칸을 꽉 채워, 라틴과 같은 행간이면
     윗줄 받침과 아랫줄 초성이 맞닿아 보인다. 반 줄쯤 더 연다. */
  --lh-ko: 1.75;                           /* 대표 요청(2026-09-29)으로 1.5 → 1.75 */
  --lh-en: 1.3;
  --line: calc(var(--ko) * 1.5);           /* 빈 줄 하나(22.5px) — 한글 행간을 넓혀도 묶음 사이 간격은 그대로 */

  /* 레퍼런스 실측(563px 폭): 왼쪽 여백 22 = 3.9%, 본문 단 시작 155 = 27.5%.
     여백 3.9 + 사이드 20.6 + 간격 3 = 27.5vw (사이드는 여백 뺀 폭의 약 22%). */
  --margin: max(20px, 3.9vw);
  --side: 20.6vw;
  --gap: 3vw;
  --top: var(--line);                      /* 레퍼런스처럼 제목이 화면 위에 가깝게 */
  --indent: 2em;
  --item: .3em;                            /* 작은 글씨 항목 사이(레퍼런스 전시 목록) */
  --mark: 96px;                            /* 사이드 맨 위 정사각형 로고(국문 4행) 높이 — 사이트의 유일한 로고 */

  /* 자간: 굵은 Gothic A1 은 글자 사이가 떠 보여 조금 좁히고, 영어는 그보다 덜 좁힌다. */
  --ls-ko: -.03em;
  --ls-en: -.015em;
  --label: calc(var(--ko-s) * 10);         /* 표의 라벨 열 130px — 국·영, 머리 표·본문 표 모두 같은 폭.
                                              한 줄 영어 라벨 가운데 가장 긴 "Chairs & plinths"(약 112px) 뒤에도 빈칸이 남게 */
}

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "lexend-deca", "gothic-a1", sans-serif;
  font-weight: 700;
}

/* 글자 크기·행간은 lang 으로. 줄 속에 섞인 다른 말(span)은 제 크기를 쓰되 행간은 둘레 줄을 따른다
   — 영어 문단 속 [확인 필요] 때문에 그 줄만 벌어지지 않게. */
html, [lang="ko"] { --f: var(--ko); --fs: var(--ko-s); }
[lang="en"] { --f: var(--en); --fs: var(--en-s); }
[lang] { font-size: var(--f); line-height: var(--lh-ko); }
[lang="en"] { line-height: var(--lh-en); }
html, [lang="ko"] { letter-spacing: var(--ls-ko); }
[lang="en"] { letter-spacing: var(--ls-en); }
span[lang] { line-height: 1; }
.s, .s [lang] { font-size: var(--fs); }

body { margin: 0; overflow-wrap: break-word; word-break: keep-all; hyphens: none; }   /* keep-all 은 한글에만 걸린다 */
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; font: inherit; }
h3 { font-size: var(--fs); }             /* 블록 제목은 모두 작은 글씨 라벨 */
ul { list-style: none; }
ol { list-style: decimal inside; }
cite { font-style: normal; }             /* 킷에 이탤릭이 없고 font-synthesis 도 끈다 */
.nw, .toc a { white-space: nowrap; }
.tbd { color: var(--tbd); white-space: nowrap; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 틀: [사이드 | 한국어 | 영어]. 한국어·영어 단은 같은 폭. */
body {
  display: grid;
  grid-template-columns: var(--side) 1fr 1fr;
  column-gap: var(--gap);
  padding: 0 var(--margin);
}

/* 사이드 단 — 레퍼런스의 'Bio' 단. 스크롤해도 붙어 있고, 화면보다 길면 저 혼자 스크롤한다.
   맨 위 로고 → 소개 한 줄·이름 → 메뉴 → 연락처. 묶음 사이는 빈 줄 하나. */
.side {
  position: sticky;
  top: 0;
  align-self: start;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: var(--top) 0;
  display: flex;
  flex-direction: column;
  gap: var(--line);
}
header > * + * { margin-top: var(--line); }
footer { flex: 1; display: flex; flex-direction: column; gap: var(--line); }

main { grid-column: 2 / 4; padding: var(--top) 0 calc(var(--line) * 6); }

/* 본문 두 단 [한국어 | 영어]. 섹션(.row), 머리 표, 사진 짝, 프로그램 항목, 사진 한 장(.span)이 같은 격자를 쓴다. */
.row, .head, .pair, .item, .span { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
main [id] { scroll-margin-top: var(--top); }
main > .row { scroll-margin-top: 100vh; }   /* 메뉴를 누르면 섹션이 아니라 맨 위로 — 머리 표가 가려지지 않게 */

/* 페이지처럼: 한 번에 한 섹션만 보인다. 해시(#policy 등)가 없으면 소개. 뒤로가기로 이전 섹션.
   :has(:target) — 섹션 안 목차(#p-terms 등)를 눌러도 그 섹션이 남는다. */
main > .row:not(:target):not(:has(:target)) { display: none; }
main:not(:has(:target)) > #about { display: grid; }
body:not(:has(main :target)) nav a[href="#about"],
body:has(#about:target) nav a[href="#about"],
body:has(#policy:target, #policy :target) nav a[href="#policy"],
body:has(#programs:target) nav a[href="#programs"],
body:has(#curator:target) nav a[href="#curator"],
body:has(#contact:target) nav a[href="#contact"] { text-decoration: underline; }   /* 지금 보는 메뉴 */

/* 단 안의 블록은 subgrid 행에 얹어 양쪽 같은 블록이 같은 높이에서 시작한다. */
.row > :is(.ko, .en) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 12;         /* ponytail: 단당 블록 최대 12개(협업·대관 10개). 더 늘면 이 숫자를 올린다 */
  align-items: baseline;         /* 행간이 달라도(1.5 / 1.3) 양쪽 첫 줄 기준선을 맞춘다 */
}
.row > :is(.ko, .en) > * + * { margin-top: var(--line); }   /* 제목 아래, 묶음 사이 = 빈 줄 하나 */

/* 머리 표 — 모든 섹션 위. 단마다 [라벨 | 값] 4행, 두 단의 행 높이는 subgrid 로 맞춘다.
   선은 표 위아래만(시안 A). 두 단 사이 간격에서 끊긴다. */
.head { margin: calc(var(--item) * -1) 0 calc(var(--line) * 2); }   /* 위로 조금 — 표 줄의 기준선이 사이드 h1·메뉴 줄과 맞게 */
.head dl {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 4;
  row-gap: var(--item);
  padding-block: var(--item);
  border-block: 1px solid var(--ink);
  align-items: baseline;
}
.head.b dl > div + div { border-top: 1px solid var(--ink); padding-top: var(--item); }   /* 시안 B: 줄마다 선 */
/* 본문 표(.t)도 같은 정렬 — 값이 머리 표와 같은 세로선에서 시작한다. 선은 머리 표에만. */
.head dl > div, .t > div { display: grid; grid-template-columns: var(--label) 1fr; }

/* 사진 자리 — 비율 고정 빈 박스. 사진이 오면 .ph 를 <img> 로 바꾼다(index.html 사진 01 주석).
   사진은 어디서나 한 단 폭 하나. 한 장(.span)이면 사진은 한국어 단, 국·영 캡션은 영어 단 위쪽. */
.ph { aspect-ratio: 3 / 2; box-sizing: border-box; border: 1px solid var(--tbd); color: var(--tbd); padding: var(--item); }
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: var(--item); }
.span > figcaption { margin-top: 0; }
.span, .pair, .item { grid-column: 1 / -1; }            /* 섹션 끝에 두면 두 단 다음 행에 저절로 들어간다 */
.row > .span, .row > .pair, .row > .item { margin-top: var(--line); }
.pair, .item { row-gap: var(--line); align-items: baseline; }
.item > div > * + * { margin-top: var(--item); }
.item .t { margin-left: calc(var(--f) * 2); }          /* 크레딧은 본문 첫 줄 들여쓰기(2em, 본문 글자 기준)와 같은 세로선 */

/* 문단: 사이 간격 없이 첫 줄 들여쓰기. 작은 글씨는 들여쓰지 않는다. */
main p { text-indent: var(--indent); }
main .s p, main p.s { text-indent: 0; }
p + p.s, .s li + li, .t > div + div, .s :is(ol, dl) + p, main h3 + * { margin-top: var(--item); }

/* 모바일: 사이드 단은 맨 위 블록(고정 아님), 그 아래 머리 표(국 → 영, 한 표로), 섹션마다 한국어 → 영어.
   960px 이하 — 그보다 좁으면 3단의 본문 단(801px 에서 263px)에서 라벨 130px 을 빼고 값 칸이 133px 밖에 안 남는다. */
@media (max-width: 960px) {
  body { display: block; }
  .side { position: static; height: auto; overflow: visible; padding-bottom: 0; }
  nav ul { display: flex; flex-wrap: wrap; gap: .6em 1.2em; }   /* 누르는 자리 사이를 넉넉히 */
  nav .s li + li { margin-top: 0; }
  footer.s li + li { margin-top: .5em; }
  main { padding-top: calc(var(--line) * 3); max-width: 42em; }   /* 태블릿 세로(~960px)에서도 한 줄이 너무 길지 않게 */
  main > .row { scroll-margin-top: var(--top); }
  .head, .row > :is(.ko, .en), main > .row:target, main > .row:has(:target), main:not(:has(:target)) > #about { display: block; }
  .head > .en { border-top: 0; }   /* 한국어 표 아랫선이 국·영 사이 선 — 선 두 줄이 겹쳐 보이지 않게 */
  .row > .en { margin-top: calc(var(--line) * 2); }
  .pair, .item, .span { grid-template-columns: 1fr; }
  .span > figcaption { margin-top: var(--item); }
}

/* 사이드 맨 위 로고 — 국문 4행(정사각형에 가까운 199×231). */
h1 .home { display: inline-block; }         /* 로고 = 홈. 해시를 비워 소개로 돌아간다(새로고침·로딩 화면 없이) */
h1 .mark { display: block; height: var(--mark); width: auto; }

/* 로딩 — SSAS 심볼의 획 8개(S 위·아래 곡선 ×3, A 사선·가로획)가 흩어진 자리에서 돌며 모여 왼쪽부터 SSAS 를 조립한다.
   조립이 끝난 뒤 Adobe 글꼴이 준비되면(wf-active/-inactive) 걷히고, 스크립트가 돌지 않아도 2.6초 뒤엔 걷힌다. */
.loader {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: var(--paper);
  animation: loader-out .45s ease 2.6s forwards;
}
:is(.wf-active, .wf-inactive) .loader { animation-delay: 1.35s; }
.loader svg { width: 150px; height: auto; overflow: visible; fill: var(--ink); }
.loader path {
  transform-box: fill-box; transform-origin: center;
  animation: loader-piece .65s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 70ms) both;
}
/* 획 순서는 SVG 파일 순서 — 2번째 S 아래, A 사선, A 가로·세로, 2번째 S 위, 1번째 S 아래, 1번째 S 위, 4번째 S 아래, 4번째 S 위 */
.loader path:nth-of-type(1) { --i: 3; --x: 14px;  --y: 26px;  --r: 120deg; }
.loader path:nth-of-type(2) { --i: 4; --x: -18px; --y: 30px;  --r: -60deg; }
.loader path:nth-of-type(3) { --i: 5; --x: 20px;  --y: -28px; --r: 90deg; }
.loader path:nth-of-type(4) { --i: 2; --x: -10px; --y: -30px; --r: -120deg; }
.loader path:nth-of-type(5) { --i: 1; --x: -26px; --y: 22px;  --r: 150deg; }
.loader path:nth-of-type(6) { --i: 0; --x: -30px; --y: -20px; --r: -150deg; }
.loader path:nth-of-type(7) { --i: 7; --x: 28px;  --y: 24px;  --r: -130deg; }
.loader path:nth-of-type(8) { --i: 6; --x: 26px;  --y: -26px; --r: 140deg; }
@keyframes loader-piece { from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }