@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0c0c0b;
  --ink: #e9e4da;
  --warm: #e9762b;
  --dim: color-mix(in srgb, var(--ink) 45%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --sans: "Pretendard Variable", Pretendard, "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", "Pretendard Variable", ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 3.4vw, 44px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  /* 층: 미리보기 그림 < 인쇄 그레인 */
  --z-peek: 5; --z-grain: 30;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 500 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
/* 인쇄 그레인: halftone.js 가 만든 타일을 화면 전체에 */
body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  background-image: var(--grain, none); mix-blend-mode: overlay; opacity: .09; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { top: 12px; }

/* 작은 글씨: 고정폭, 대문자, 넓은 자간 */
.top, .rule, .head, .filters, .list .y, .list .t, .foot { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.75; }

/* 밑줄이 왼쪽에서 그어지는 링크 */
.top a, .rule a, .up, .foot a {
  opacity: .78; background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: opacity .25s ease, background-size .35s var(--ease); }
.top a:hover, .rule a:hover, .up:hover, .foot a:hover { opacity: 1; background-size: 100% 1px; }

/* 첫 화면 */
.hwf { position: relative; height: 100dvh; min-height: 520px; overflow: hidden; isolation: isolate; touch-action: pan-y; }
.hwf canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: 24px; padding: var(--pad) var(--pad) 0; }
.brand strong { display: block; font-weight: 500; }
.top a { overflow-wrap: anywhere; }
a[href^="mailto"] { text-transform: none; letter-spacing: .06em; }
.brand sup { font-size: .8em; }
.brand span, .col h2 { opacity: .45; }
.col h2 { margin: 0; font: inherit; }
.cats a[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.cats sup, .head sup, .filters sup { font-size: 8px; margin-left: 3px; letter-spacing: .1em; }
.rule { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: clamp(18px, 2.6vw, 30px) var(--pad) 0; padding-top: 12px; border-top: .5px solid var(--line); }
.hwf .rule { justify-content: flex-end; }

/* 목록 */
#work { padding: clamp(80px, 12vw, 160px) var(--pad) clamp(100px, 14vw, 180px); }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px;
  padding-bottom: 14px; border-bottom: .5px solid var(--line); }
.head h2 { margin: 0; font: inherit; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.filters button { background: none; border: 0; padding: 8px 0; color: var(--ink); opacity: .45; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: opacity .25s ease; }
.filters button:hover:not(:disabled), .filters button[aria-pressed="true"] { opacity: 1; }
.filters button:disabled { opacity: .18; cursor: default; }
.list a { display: grid; grid-template-columns: 9ch minmax(0, 1fr) 10ch 2ch; align-items: baseline; gap: 16px;
  padding: clamp(14px, 1.8vw, 22px) 0; border-bottom: .5px solid var(--line); }
.list .n { font: 700 clamp(30px, 5.6vw, 84px)/1 var(--sans); letter-spacing: -.035em; transition: color .3s var(--ease), transform .45s var(--ease); }
.list .y, .list .t { opacity: .45; }
.list .go { font-family: var(--mono); opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .45s var(--ease); justify-self: end; }
.list a:hover .n, .list a:focus-visible .n { color: var(--warm); transform: translateX(10px); }
.list a:hover .go, .list a:focus-visible .go { opacity: 1; transform: none; }
.list li { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.list li.in { opacity: 1; transform: none; }
.peek { position: fixed; z-index: var(--z-peek); left: 0; top: 0; width: clamp(160px, 18vw, 260px); aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  pointer-events: none; opacity: 0; border-radius: 4px; transform: translate(var(--x, 0), var(--y, 0)) scale(.92); transition: opacity .25s ease, scale .4s var(--ease); }
.peek.on { opacity: 1; scale: 1.087; }

/* 바닥 */
.foot { padding: 0 0 var(--pad); }
.foot dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0 var(--pad); }
.foot dt { opacity: .45; }
.foot dd { margin: 0; }
.foot .rule { margin-top: 28px; }

@media (max-width: 720px) {
  .hwf { height: 72svh; }
  .top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 18px; }
  .brand, .top .col:last-child { grid-column: 1 / -1; }
  .list a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .list .y { grid-column: 1; grid-row: 1; }
  .list .t { grid-column: 2; grid-row: 1; justify-self: end; }
  .list .n { grid-column: 1 / -1; }
  .list .go, .peek { display: none; }
  .foot dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .list li { opacity: 1; transform: none; transition: none; }
  .top a, .rule a, .up, .foot a, .list .n, .list .go, .peek { transition: none; }
}

/* 문서 페이지 (칸칸 소개, 개인정보처리방침) */
.doc-page .bar { padding: var(--pad) var(--pad) 0; font: 500 10.5px/1.75 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.doc-page .bar .logo { opacity: .78; }
.doc-page .bar .logo:hover { opacity: 1; }
.doc { max-width: 760px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--pad) 64px; font-weight: 400; line-height: 1.75; }
.doc h1 { font: 700 clamp(28px, 4vw, 44px)/1.15 var(--sans); letter-spacing: -.03em; margin: 0 0 16px; }
.doc h2 { font: 600 17px/1.4 var(--sans); margin: 44px 0 8px; }
.doc ul { list-style: disc; padding-left: 1.2em; }
.doc a { color: var(--warm); }
.doc img.icon { width: 96px; height: 96px; margin-bottom: 20px; border-radius: 22px; }
.doc table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: 14px; }
.doc th, .doc td { border: .5px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc-page .foot { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px var(--pad) var(--pad); border-top: .5px solid var(--line); font: 500 10.5px/1.75 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .78; }