/* Suisse Intl — 사용자 보유 웹 라이선스. ved.kr에서 같은 세 컷을 가져왔다.
   원본 패키지(otf/ttf)는 이 레포에 들어오지 않는다. */
@font-face {
  font-family: "Suisse Intl";
  src: url("/font/SuisseIntl-Ultralight-WebS.woff") format("woff");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("/font/SuisseIntl-Light-WebS.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("/font/SuisseIntl-Regular-WebS.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("/font/SuisseIntl-SemiBold-WebS.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* strange-interface.ved.kr — 모든 수치는 --base(본문)와 뷰포트 비율 둘에서만 나온다. */

:root {
  /* 텍스트 — rem이라 사용자 확대를 존중한다 */
  --base: 17px;
  --rhythm: 1.5rem;
  --gap-1: var(--rhythm);
  --gap-2: calc(var(--rhythm) * 3);
  --half: calc(var(--rhythm) / 2);
  --measure: 34em;
  --num: calc(var(--rhythm) * 2);   /* 작품 번호 칸 — 인덱스와 표시 줄이 같은 값 */
  --key: calc(var(--rhythm) * 6);   /* 정의 목록의 항목 칸 */
  /* 캡션 층 — 그림에 딸린 글. 임의 소수가 아니라 5:6 */
  --caption: calc(1rem * 5 / 6);

  /* 지면 — 뷰포트 비율이라 창이 변해도 구도가 유지된다 */
  --edge: 5vw;
  --display: min(13vw, 9svh);

  /* 색 — 바탕 하나, 잉크 하나, 포인트 0개.
     ★ 두 번째 바탕(--paper)은 장식이 아니다. 도면·회로도·코일 아트워크는
     실제로 흰 종이에 찍힌 문서다. 뒤집어서 어두운 판에 올리면 선 굵기가
     광학적으로 무거워지고 인쇄물과 다른 물건이 된다. 그래서 문서는 문서인 채로
     지면 위에 놓는다. 이 한 가지 이유 말고 --paper를 다른 데 쓰지 않는다. */
  --fg: #e8e9ea;
  --bg: #0e1012;
  --paper: #e9eced;
  --paper-ink: #20242a;
  --line: var(--fg);          /* 위계에 회색을 쓰지 않는다 — 괘선도 잉크색 */

  --sel-bg: var(--fg);
  --sel-fg: var(--bg);

  --sans: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

@media (min-width: 900px) {
  :root { --edge: 3vw; --display: min(7vw, 11svh); }
}

* { box-sizing: border-box; margin: 0; }

/* 캔버스 = 문서 바깥. 아래로 튕길 때 드러나는 면이라 지면색으로 칠한다. */
html { font-size: var(--base); background: var(--bg); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  padding-inline: var(--edge);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

h1, h2, h3 { font-size: 1rem; font-weight: inherit; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .55; }               /* hover는 속삭임 */
a.u { text-decoration: underline; text-underline-offset: .22em; }

/* 키보드 초점 — 어두운 지면에서 브라우저 기본 링은 잘 안 보인다. 잉크색으로 직접 그린다. */
:focus-visible { outline: 1px solid var(--fg); outline-offset: calc(var(--half) / 3); }

/* object도 포함해야 한다 — 빠뜨리면 SVG의 width 속성이 min-content가 되어
   그 열이 1fr 몫을 넘겨 옆 열을 찌그러뜨린다(실측: 좌열 700 → 300px). */
img, svg, video, object { display: block; max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.cap { font-size: var(--caption); }

/* ── 머리 ───────────────────────────────────────────────────────────── */

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-1);
  padding-block: var(--gap-1) var(--half);
  flex-wrap: wrap;
}
.top nav { display: flex; gap: var(--gap-1); }

/* ── 중앙축 머리 ────────────────────────────────────────────────────── */

/* 인쇄 엽서의 조판을 그대로 옮긴 것이다. 작은 워드마크가 중앙, 작품 제목
   '낯선 접점'이 지면 양끝에 세로로, 큰 표식(홈=서명, 작업=번호)이 축 위에.
   한 지면에 큰 것은 하나뿐이고 그 하나만 축을 쓴다 — 아래 인덱스·본문은
   전부 비대칭 그리드로 내려온다. 축에서 그리드로 넘어가는 그 전환이 위계다. */
.axis {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gap-1);
  padding-block: var(--gap-2);
  text-align: center;
}
.axis .flank {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: var(--caption);
  line-height: 1.15;
}
.axis .flank-l { left: 0; }
.axis .flank-r { right: 0; }
/* 좁은 화면에서는 양끝 글자가 축 위 표식과 겹친다 — 그때는 뺀다. */
@media (max-width: 699px) { .axis .flank { display: none; } }

/* ── 홈 ─────────────────────────────────────────────────────────────── */

/* 서명 락업 — 원본 SVG를 마스크로 쓴다. img로 넣으면 잉크색을 못 따라오고,
   인라인하면 마크업이 14KB 불어난다. 마스크면 둘 다 피한다. */
.lockup {
  /* 폭을 --measure로 묶는다. 서명과 아래 본문이 같은 값에서 나와야 두 왼끝이
     화면 폭과 무관하게 맞는다 — 눈으로 맞춘 값이면 창을 줄일 때 어긋난다. */
  width: min(72vw, var(--measure));
  aspect-ratio: 447.4 / 150.21;
  background: currentColor;
  -webkit-mask: url("/assets/dwg/signature.svg") center / contain no-repeat;
          mask: url("/assets/dwg/signature.svg") center / contain no-repeat;
}
.lockup span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* 본문은 축 위에 놓이되 글줄은 왼쪽에서 시작한다 — 가운데 정렬한 본문은 안 읽힌다. */
.intro {
  width: min(72vw, var(--measure));
  margin-inline: auto;
  text-align: left;
  padding-bottom: var(--gap-2);
}
.intro p + p { margin-top: var(--gap-1); }

/* 양끝 글자가 빠지는 폭에서는 축을 좁힐 이유도 없다. 서명과 본문 모두 열을 꽉 쓴다 —
   좁은 화면에서 72vw로 묶으면 본문이 읽을 폭의 20%를 버린다(375에서 270/337).
   ★ 이 블록은 .lockup·.intro 정의보다 뒤에 있어야 한다. 위에 두면 뒤의 무조건 규칙이 덮는다. */
@media (max-width: 699px) {
  .lockup, .intro { width: 100%; }
}

.index {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-2) var(--gap-1);
  padding-block: var(--gap-2);
}
@media (min-width: 640px)  { .index { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .index { grid-template-columns: repeat(3, 1fr); } }

.card { display: block; }
.card img { width: 100%; }
.card .meta {
  display: grid;
  grid-template-columns: var(--num) 1fr;
  column-gap: var(--half);
  padding-top: var(--half);
  border-top: 1px solid var(--line);
  margin-top: var(--half);
}
.card .meta dt { grid-column: 1; }
.card .meta dd { grid-column: 2; margin: 0; }
.card .meta .sub { font-size: var(--caption); }

/* ── 작업 페이지: 좌 글 / 우 미디어 ─────────────────────────────────── */

/* 작업 표시 줄 — 엽서 뒷면의 그 한 줄이다: 번호 · 제목 · 사양(오른끝). */
.workline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--half);
  padding-block: var(--half);
  /* 괘선은 아래 하나뿐이다. 위에도 그으면 축 위의 번호가 상자에 갇히고,
     인쇄물은 애초에 이 줄에 선을 안 긋는다. */
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .workline { grid-template-columns: var(--num) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-1); align-items: baseline; }
  .workline .wl-spec { text-align: right; }
}

.code {
  font-weight: 200;
  font-size: var(--display);
  line-height: .92;
  letter-spacing: -.015em;
}

.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-2);
  padding-block: var(--gap-2);
  align-items: start;
}
@media (min-width: 900px) {
  /* minmax(0,1fr)이라야 열이 내용보다 작아질 수 있다. 그냥 1fr은 min-content가
     바닥이라 큰 미디어가 있는 열이 몫을 넘긴다. */
  .work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-1); }
  /* 글은 붙어 있고 미디어가 흐른다.
     ★ 여기 붙는 건 진술뿐이다. 사양·전시·크레딧까지 넣었더니 열이 화면보다 길어져
     안쪽 스크롤이 생겼고, 포인터를 그 열에 올리지 않은 사람은 그 내용을 영영 못 봤다.
     고정 패널은 화면보다 짧을 때만 성립한다 — 나머지는 미디어 뒤 콜로폰으로 내렸다. */
  .text-col {
    position: sticky;
    top: var(--gap-1);
    align-self: start;
    padding-right: var(--gap-1);
  }
}

.text-col p + p { margin-top: var(--gap-1); }
.text-col { max-width: var(--measure); }

/* 표 아닌 표 — 항목/값 두 열. 세로 괘선 없이 가로선으로만 나눈다.
   ★ column-gap을 주면 안 된다. 두 칸이 각자 border-top을 그리는데 사이에 틈이 생기면
   한 줄이어야 할 괘선이 두 토막으로 끊겨 보인다. 간격은 dt의 padding-right로 만든다. */
.spec { display: grid; grid-template-columns: var(--key) 1fr; column-gap: 0; }
.spec > dt { grid-column: 1; padding-block: var(--half); padding-right: var(--half); border-top: 1px solid var(--line); }
.spec > dd { grid-column: 2; margin: 0; padding-block: var(--half); border-top: 1px solid var(--line); }
.spec > dt:first-of-type, .spec > dd:nth-of-type(1) { border-top: 0; padding-top: 0; }

.label { padding-bottom: var(--half); border-bottom: 1px solid var(--line); }



/* 콜로폰 — 사양·전시·크레딧. 미디어를 다 보고 난 자리가 기술 기록의 자리다. */
.colophon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-2) var(--gap-1);
  padding-block: var(--gap-2);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .colophon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 미디어 스택 — 원본 비율 그대로 세로로 쌓는다 */
.media > figure + figure { margin-top: var(--gap-2); }
.media figcaption {
  font-size: var(--caption);
  padding-top: var(--half);
  margin-top: var(--half);
  border-top: 1px solid var(--line);
}
.media video { width: 100%; background: #000; }

/* 문서 판 — 인쇄된 도면을 종이인 채로 올린다 */
.plate {
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--gap-1);
}
.plate svg { width: 100%; height: auto; }

/* ── 발 ─────────────────────────────────────────────────────────────── */

.foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--half);
  padding-block: var(--gap-1) var(--gap-2);
  border-top: 1px solid var(--line);
  font-size: var(--caption);
}
@media (min-width: 640px) {
  .foot { grid-template-columns: repeat(3, 1fr); }
}

/* 좁은 화면에서는 항목/값을 두 열로 두면 값이 184px 리본이 된다(실측).
   가로선은 항목 위에만 남기고 값은 그 아래로 내린다 — 한 항목이 한 덩어리가 된다. */
@media (max-width: 599px) {
  .spec, .colophon .spec { grid-template-columns: minmax(0, 1fr); }
  .spec > dt { grid-column: 1; padding-block: var(--half) 0; padding-right: 0; }
  .spec > dd { grid-column: 1; border-top: 0; padding-block: 0 var(--half); }
  .spec > dt:first-of-type { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}