:root{
  --bg:#000;
  --fg:#fff;
  --muted:#8f8f96;
  --dim:#4a4a50;
}
*{box-sizing:border-box;margin:0;padding:0}
/* the UA's [hidden] rule loses to any author `display`, so a flex row stays a
   flex row when it is hidden — every toggle in this stylesheet would need to
   know that, or this one does */
[hidden]{display:none !important}
html{height:100%}
body{
  /* 좁은 화면에서 마지막 줄에 한두 글자만 남는 것을 브라우저가 피하게 한다 —
     줄 수는 그대로이고 어디서 끊을지만 고른다. 못 알아듣는 브라우저는 지금처럼
     끊으므로 잃는 것이 없다. */
  text-wrap:pretty;
  /* 한글은 기본값(word-break:normal)에서 아무 글자 사이에서나 끊긴다 — 「극적인」이
     「극적 / 인」으로, 「스토리텔링」이 「스토 / 리텔링」으로 갈렸다(390px 실측).
     keep-all 은 띄어쓰기에서만 끊으므로 낱말이 살고, 띄어쓰기가 없는 긴 덩어리
     (URL·주소)는 overflow-wrap 이 받아 넘치지 않게 한다. */
  word-break:keep-all;
  overflow-wrap:break-word;
  min-height:100%;
  display:flex;flex-direction:column;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#c{
  /* Figma places the field in a 1011x1072 box at x=502 of the 1440 frame — it
     overruns the hero on the right, which is why the band under the symbol
     stops short of the left edge there. Kept as fractions so it holds at other
     widths.

     Vertically it is not the hero's box but the hero plus the footer: the whole
     page has to fit one screen, and taking the height out of the hero alone
     would shrink the field by the footer's 292px. Instead the field keeps that
     height and the footer sits over its lower end, where the band is already
     fading in from transparent. */
  position:absolute;
  left:34.861%;top:0;
  width:70.208%;height:calc(100% + var(--footer-h));
  display:block;
  image-rendering:pixelated;   /* keep the dither crisp on retina */
}

/* ============================================================
   Site shell — 04 — Web / Desktop
   Figma: nav 88px on a 1px #29292b rule, 80px gutter, footer 292px
   with the grain band starting 146px above it.
   ============================================================ */

:root{
  /* 1440 프레임의 값을 상한으로 두고 화면 폭에 비례해 줄인다. 계단으로 떨어
     뜨리면 그 사이 구간(861~1440)이 통째로 데스크톱 크기로 남아 줄이 접히므로,
     끊는 대신 이어서 줄인다. vw 계수는 1440 에서 상한과 만나도록 잡았다. */
  --gutter:clamp(24px, 5.55vw, 80px);
  /* 나비게이션 메뉴 칸의 폭 — footer 의 Contact 가 같은 세로선에 서려고 같이 쓴다 */
  --menu-w:clamp(240px, 30.35vw, 437px);
  --nav-h:88px;
  --footer-h:292px;
  --band-over:146px;   /* how far the grain band reaches above the footer */
  --rule:#29292b;
}

.nav{
  position:relative;z-index:3;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--bg);
}
.nav-brand{font-size:clamp(12px, 0.97vw, 14px);font-weight:700;color:var(--fg);text-decoration:none;white-space:nowrap}
/* 브랜드는 워드마크 그림이다. 크기는 그 자리의 font-size 를 따라간다 — 세 자리
   (nav 14 · footer 14 · about 48/28)가 각자 값을 갖고 있고, 그것을 이미 쓰는
   것이 이 계수다. 0.97em 은 글자로 짜였을 때의 폭과 같아지는 높이다: 워드마크의
   가로세로가 8.633 이고 이 서체의 "aplan-company®" 는 font-size 의 8.36 배로
   짜이므로 8.36 / 8.633 = 0.968 이다. 그래서 자리를 다시 재지 않아도 된다. */
.brand-logo{display:block;height:0.97em;width:auto}
.nav-menu{display:flex;gap:40px;align-items:center;width:var(--menu-w);justify-content:flex-start}
.nav-menu a{font-size:clamp(11px, 0.9vw, 13px);font-weight:700;color:var(--fg);text-decoration:none;white-space:nowrap}
.nav-menu a:first-child{width:clamp(160px, 21.4vw, 308px)}
.nav-menu a:hover{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}

.hero{
  position:relative;
  flex:1 1 auto;
  min-height:240px;
  /* clip the field's horizontal overrun but let it through downward — `clip`
     rather than `hidden` so the other axis stays visible instead of scrolling */
  overflow-x:clip;overflow-y:visible;
  background:var(--bg);
}
.hero-label{
  /* 락업의 높이가 칸의 폭을 정한다(폭 = 높이 x 1990/584). 68 로 고정해 두면
     좁은 화면에서 칸의 왼쪽 절반이 화면 밖으로 나간다 — 이 칸은 18.6% 지점에
     가운데를 맞추므로, 폭이 안 줄면 622px 아래에서 반드시 넘친다. 폭에 비례해
     줄이면 칸도 같은 비로 줄어 그 일이 안 생긴다. */
  --hero-logo-h:clamp(38px, 4.72vw, 68px);
  position:absolute;left:18.6%;top:50%;
  /* centred on the hero's own box, not the field's — the field runs on down
     behind the footer, so measuring the label against it would push it low */
  transform:translate(-50%,-50%);
  /* 두 장을 같은 칸에 포개 둔다 — 겹쳐야 서로를 지우지 않고 넘어간다.

     칸의 폭은 가장 넓은 락업(a-perform 1990/584)에 맞춰 고정하고 그 안에서
     오른쪽으로 붙인다 — 레이블마다 락업 폭이 달라서(988~1990) 폭을 내용에
     맡기면 넘어갈 때마다 오른쪽 끝이 움직인다. 오른쪽을 축으로 세우면 설명줄
     (락업 안에서 오른쪽 정렬이다)이 제자리에 서고 워드마크만 왼쪽으로 자란다. */
  display:grid;justify-items:end;
  width:calc(var(--hero-logo-h) * 1990 / 584);
  margin:0;line-height:0;pointer-events:none;
}
.hero-logo{
  grid-area:1/1;
  /* 68px 은 락업 안의 워드마크가 예전 48px 글자와 같은 크기가 되는 값이다 —
     국·영문 여섯 장이 같은 그리드(어센더 32 · 베이스라인 336 · 캔버스 584)에
     그려져 있어 한 값으로 열두 장이 다 맞는다. 캔버스는 공통 584 로 맞춰 두
     었다(tools 가 아니라 public/img/labels 에 그 판본이 산다). 이 값을 바꾸면
     위의 칸 폭도 같은 식으로 따라간다. */
  height:var(--hero-logo-h);width:auto;
  opacity:0;transition:opacity 1.6s ease;
}
.hero-logo.is-on{opacity:1}

/* 화면에서는 로고가 이름을 말하지만 읽어 주는 쪽에는 글자가 필요하다 */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

.footer{
  position:relative;
  height:var(--footer-h);
  flex:0 0 auto;
  background:transparent;
}
.footer .band{
  position:absolute;left:0;right:0;
  top:calc(-1 * var(--band-over));bottom:0;
  width:100%;height:calc(var(--footer-h) + var(--band-over));
  display:block;pointer-events:none;
}
.footer-inner{
  position:absolute;left:var(--gutter);right:98px;top:80px;height:200px;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.footer-brand{font-size:clamp(12px, 0.97vw, 14px);font-weight:700}
/* 채널과 관계 사이트가 차례로 선다. footer-inner 가 200px 높이를 이미 잡아
   두었으므로 이 기둥은 그 안에서 위에서부터 쌓인다. */
.footer-id{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
/* 글자 줄과 로고 줄이 섞이므로 baseline 이 아니라 가운데로 맞춘다 */
.footer-sns{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.footer-sns a{
  font-size:clamp(11px, 0.9vw, 13px);font-weight:700;color:var(--fg);
  text-decoration:none;white-space:nowrap;
}
.footer-sns a:hover{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}
/* a-lab 로고. 그 사이트가 쓰는 NeurimboGothic 을 로고 다섯 글자만 남기고 잘라
   1.2KB 로 실었다(원본 OTF 273KB). 글자별 변형은 shell.js 가 인라인으로 넣고,
   여기서는 되돌아가는 속도와 색만 정한다 — a-lab 의 값 그대로다. */
@font-face{
  font-family:"NeurimboGothic";
  src:url("/fonts/neurimbo-alab.woff2") format("woff2");
  font-weight:normal;font-style:normal;font-display:swap;
}
.footer-sns a.is-glitch{
  font-family:"NeurimboGothic","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;letter-spacing:.01em;
  font-size:clamp(14px, 1.15vw, 17px);
  /* 글자가 최대 1.15 배까지 늘어나므로 변에 닿지 않게 숨 쉴 자리를 준다 */
  padding-inline:2px;
  /* 상자 중심을 맞춰도 획은 안 맞는다 — 이 서체는 글리프가 em 상자 위쪽에 앉아
     있어서 a:museum 보다 1.62px 아래로 보였다(1440 실측, 글리치 끈 상태).
     px 로 박으면 폰트 크기가 clamp 로 변할 때 다시 어긋나므로 em 으로 올린다.
     자리는 그대로 두고 보이는 위치만 옮기는 것이라 relative 다.

     값은 후보 다섯을 1440·390 두 폭에서 나란히 놓고 골랐다 — 잉크 좌표 계산은
     측정 방법마다 갈렸고(요소 스크린샷과 행 스캔이 1440 에서 1.44 대 0.62px),
     맞춰야 하는 것이 상자가 아니라 두 덩어리의 시각 중심이라 눈이 판정했다. */
  position:relative;top:-0.18em;
}
.footer-sns a.is-glitch span{
  display:inline-block;
  transition:transform .12s ease-out;
  /* 밑동을 축으로 돌면 작은 글자가 줄에서 튀어 보인다 — 가운데를 축으로 */
  transform-origin:center center;
}
/* 로고에서 색이 도는 한 글자. a-lab 은 15초에 걸쳐 다섯 색을 지난다. */
.footer-sns a.is-glitch span.is-accent{
  animation:alabAccent 15s ease-in-out infinite;
}
@keyframes alabAccent{
  0%,100%{color:#c8ff57}
  20%    {color:#e8486a}
  40%    {color:#7a7aff}
  60%    {color:#2ab4e8}
  80%    {color:#9b3dcc}
}
@media (prefers-reduced-motion: reduce){
  .footer-sns a.is-glitch span{transition:none}
  .footer-sns a.is-glitch span.is-accent{animation:none;color:#c8ff57}
}
/* 로고로 선 링크. 글자와 같은 줄에 앉으므로 높이를 그 줄에 맞추고, 밑줄은
   그림에 걸 것이 아니라 밝기로 답한다. */
.footer-sns a.is-logo{display:inline-flex;align-items:center;line-height:0}
.footer-sns a.is-logo:hover{text-decoration:none}
.footer-sns a.is-logo img{
  /* 회사 워드마크와 눈으로 비슷한 크기가 되게 맞춘 값이다 — 이 락업은 심볼과
     두 줄 활자가 든 덩어리라 같은 상자 높이에서 더 커 보인다. 실측 기준은
     .footer-brand 의 워드마크 높이(1440 에서 13.5px, 390 에서 11.6px)였고,
     그 워드마크는 그 뒤 푸터에서 빠졌다 — 값은 맞춰 둔 그대로 둔다. */
  display:block;width:auto;height:clamp(12.5px, 1.02vw, 14.5px);
}
/* 밴드의 밑동이 가장 밝은 자리라 검은 글씨가 거기서 읽힌다 */
.footer-copy{
  position:absolute;left:0;right:0;bottom:18px;
  text-align:center;font-size:12px;font-weight:700;line-height:1.4;color:#000;
}
/* Contact 는 나비게이션의 Project Archive 와 같은 세로선에 선다.

   그 자리를 폭으로 계산하지 않는다 — 좁은 화면의 nav-menu 는 내용 폭이고 그
   값은 글자가 무슨 폰트로 그려지느냐에 달렸다. 재서 상수로 박으면 잰 기계에서만
   맞는다. 그래서 같은 칸에 nav 의 두 항목을 글자 그대로 숨겨 세우고(.footer-ghost)
   Contact 를 첫 항목 위에 겹친다. 폰트가 무엇이든 두 칸의 내용이 같으므로 폭도
   같고, 첫 항목의 왼쪽 = Project Archive 의 왼쪽이다.

   footer-inner 는 오른쪽이 98px 이라 그 안에 두면 18px 이 어긋나므로 footer 의
   자식으로 따로 세웠다. */
.footer-menu{
  position:absolute;right:var(--gutter);top:80px;
  width:var(--menu-w);display:flex;gap:40px;align-items:center;justify-content:flex-start;
  /* 칸이 Contact 보다 훨씬 넓어서 그 빈 자리가 오른쪽 끝의 언어 토글을 덮는다 —
     칸은 좌표만 잡고 누르는 것은 링크가 받는다 */
  pointer-events:none;
}
/* nav-menu 의 항목과 같은 글자·같은 서체·같은 폭 규칙. 글자는 안 보이고 자리만
   잡는다 — 그 자리에 얹힌 자식(Contact·언어 토글)만 보이고 눌린다. */
.footer-ghost{
  position:relative;
  font-size:clamp(11px, 0.9vw, 13px);font-weight:700;white-space:nowrap;visibility:hidden;
}
.footer-ghost:first-child{width:clamp(160px, 21.4vw, 308px)}
/* 안쪽 겹 — 상자가 아니라 글자가 차지하는 폭이다. 얹히는 것의 기준이 되므로
   position 을 갖고, 오른쪽 변을 맞춘다: 푸터의 말과 nav 의 말은 글자가 달라
   폭이 다르니 어느 변을 붙일지 정해야 하고, 붙는 변은 오른쪽이다. */
.footer-ghost-t{position:relative;display:inline-block}
.footer-ghost-t > *{position:absolute;right:0;top:0;visibility:visible;pointer-events:auto}
.footer-lang{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:clamp(11px, 0.9vw, 13px);font-weight:700;color:var(--fg);white-space:nowrap;
}
.footer-lang:hover{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}
/* 각자 자기 항목 위에 겹쳐 선다 — 위 .footer-ghost > * 가 자리를 준다 */
.footer-contact{font-size:clamp(11px, 0.9vw, 13px);font-weight:700;color:var(--fg);text-decoration:none}
.footer-contact:hover{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}

/* ============================================================
   Pages other than the home page

   The home page is one screen deep and the field fills it. These scroll, so
   main takes what the nav and footer leave and grows past it when the content
   does — the footer stays under the content rather than pinned to the glass.
   ============================================================ */

.page-main{
  flex:1 1 auto;
  background:var(--bg);
  position:relative;z-index:1;    /* above the footer band's reach */
}

/* ---- Head — the frame's 420, with 100 above the title and 30 under it ---- */

.page-head{
  min-height:420px;box-sizing:border-box;
  padding:100px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:30px;
}
/* 제목과 공유 아이콘은 한 줄이다. page-head 는 세로 flex 라 이 줄이 그 한 칸을
   차지하고, 제목의 세로 리듬(gap 30)은 그대로다. baseline 이 아니라 가운데로
   맞춘다 — 아이콘에는 글자의 밑선이 없다. */
.page-title-row{display:flex;align-items:center;gap:clamp(12px, 1.4vw, 20px);flex-wrap:wrap}
.page-title{font-size:clamp(34px, 5.55vw, 80px);font-weight:700;letter-spacing:-.02em;line-height:1.21;margin:0}
.page-share{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(24px, 2.2vw, 32px);height:clamp(24px, 2.2vw, 32px);
  background:none;border:1px solid #3a3a3d;border-radius:50%;
  color:var(--fg);cursor:pointer;padding:0;
  transition:border-color .2s, background-color .2s;
}
.page-share svg{width:50%;height:50%;display:block}
.page-share:hover,
.page-share:focus-visible{border-color:var(--fg);background:rgba(255,255,255,.08)}
/* 눌린 뒤에만 나타나는 짧은 알림. 자리를 늘 차지하면 제목 옆이 비어 보이므로
   글자가 있을 때만 보인다. */
.page-share-note{
  font-size:clamp(11px, 0.9vw, 13px);font-weight:700;color:var(--muted);
  opacity:0;transition:opacity .2s;white-space:nowrap;
}
.page-share-note.is-on{opacity:1}
/* Year 뷰 — 태그 목록이 없으니 그 자리를 비워둘 이유도 없다 */
.page-head--flat{min-height:0}
.page-lede{font-size:14px;line-height:1.8;color:var(--muted);max-width:52ch;margin:0}

/* ---- Filter bar ----

   The frame drew two rows of five inside 124. The bar carries every tag the
   archive uses instead, so the count is the data's and the rows break where the
   words run out of width — 15 above and below, the frame's 47 per line. The
   toggle takes the end of the last line. */

/* align-content 를 묶어 두는 것은 줄 간격을 한 값으로 고정하기 위해서다 —
   기본값(stretch)은 남는 높이를 줄 사이에 나눠 넣으므로 줄 수에 따라 간격이
   갈렸다. 세로 gap 이 4 인 것은 줄 간격을 45px 로 맞춘 값이다 (줄바꿈용
   .wk-break 가 높이 0 인 줄로 한 칸 서므로 줄 간격은 칩 높이 + gap 두 번이다).
   0 까지 좁혀 봤다가 되돌린 값이니 다시 좁히지 말 것.

   --bar-fit 은 칩들이 써도 되는 높이다. 바 자체의 높이는 고정하지 않고 (줄이
   늘면 자란다) 이 값 안에 들어가면서 폭을 가장 잘 채우는 글자 크기를 work.js 의
   fitBar 가 골라 --cat-fs 에 얹는다. 0 이면 맞추지 않는다.

   아래 — 마지막 줄과 그리드 사이는 56px 이다. 칩 줄의 line-box 가 40px 을 이미
   깔고 있어서 padding 은 16 이다 — 간격을 바꿀 때 그 40 을 뺀 나머지를 넣는다. */
.wk-bar{
  --bar-fit:128px;
  box-sizing:border-box;padding:15px 0 16px;
  display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:4px 28px;
}
/* Every tag stands in its own colour — dimming the unselected ones cost more
   legibility than it bought. What is selected is said with a rule under it. */
.wk-cat{
  display:flex;gap:6px;align-items:flex-start;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
}
.wk-cat-word{
  font-size:var(--cat-fs,31px);font-weight:700;line-height:1.208;color:var(--c);white-space:nowrap;
  text-decoration-thickness:2px;text-underline-offset:6px;
}
.wk-cat:hover .wk-cat-word{text-decoration:underline dotted}
.wk-cat.is-on .wk-cat-word{text-decoration:underline solid}
.wk-cat-n{font-style:normal;font-size:11px;line-height:1.18;color:#949499}
.wk-break{flex-basis:100%;height:0;margin:0}

.wk-toggle{
  align-self:flex-end;
  display:flex;gap:8px;align-items:baseline;font-size:14px;line-height:1.21;
}
.wk-sort{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:14px;line-height:1.21;font-weight:400;color:var(--fg);
}
.wk-sort:hover{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}
.wk-sort.is-on{font-weight:700;color:var(--fg);
  text-decoration:underline solid;text-decoration-thickness:1px;text-underline-offset:4px}
.wk-slash{color:var(--fg)}

/* ---- Year 뷰 — 네 칼럼의 표 ----

   태그 뷰가 그림으로 훑는 것을 이쪽은 목록으로 훑는다. 행이 좌우 거터를
   패딩으로 들고 있어서 hover 의 위아래 선이 화면 끝까지 나간다 — 칸 안에
   가둔 자국은 표가 아니라 버튼처럼 보인다. */

.wk-list{padding:0 0 140px}
.wk-row{
  display:grid;grid-template-columns:100px 16% minmax(0,1fr) 40%;
  align-items:baseline;gap:0 24px;
  padding:11px var(--gutter);
  text-decoration:none;color:var(--fg);
  border-top:1px solid transparent;border-bottom:1px solid transparent;
}
.wk-row:not(.wk-row--head):hover{
  border-top-color:#fff;border-bottom-color:#fff;
}
.wk-c{font-size:20px;font-weight:700;line-height:1.2;min-width:0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-c-yr{white-space:nowrap}
/* 넘치는 칸은 … 로 끊고, hover 하는 동안 그 만큼 왼쪽으로 흐른다. 안쪽 span
   이 움직이고 칸은 제자리이므로 표의 칼럼선은 그대로 있는다. 흐르는 동안엔
   … 를 끄지 않으면 지나가는 글자 위에 점 세 개가 겹친다. */
.wk-c-in{display:inline-block;white-space:inherit;transition:transform 0s linear}
.wk-c-proj,.wk-c-kind{position:relative}
.wk-c.is-cut::after{
  content:"…";position:absolute;right:0;top:0;padding-left:7px;
  background:var(--bg);color:var(--fg);pointer-events:none;
}
/* 흐르는 동안엔 지나가는 글자 위에 점 세 개가 얹힌다 */
.wk-row:hover .wk-c.is-cut::after{content:none}
.wk-row--head{cursor:default}
/* 펼칠 페이지가 없는 줄 — 눌리지 않으니 눌릴 것처럼 보이지도 않게 */
.wk-row--flat{cursor:default}
.wk-row--flat:hover{border-top-color:transparent;border-bottom-color:transparent}
.wk-row--head .wk-c{font-size:14px;font-weight:700}
.wk-row--head .wk-c-yr{position:relative;overflow:visible}
.wk-arrow{position:absolute;right:100%;margin-right:20px;font-style:normal}
.wk-kind-sep{margin-right:5px}

/* ---- Grid — 64 between rows, 140 before the footer ----

   기본은 한 줄에 셋이고, 좁아지면 3 → 2 → 1 로 내린다. 캡션이 제목과 태그를
   한 줄에 놓으므로 카드가 좁아지면 제목이 먼저 눌리는데 — 태그가 줄바꿈을
   안 하니 남는 폭이 전부 제목 몫이다 — 세 개를 넘기면 그 눌림이 시작된다.
   그래서 auto-fill 이 아니라 3 을 상한으로 박는다: 넓은 화면에서 넷이 되면
   카드가 다시 좁아져 제목이 접힌다. 아래로 내리는 자리는 미디어 쿼리다. */

.page-body{padding:0 var(--gutter) 140px}

.wk-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:64px 24px;padding:0 var(--gutter) 140px;
}
.wk-card{min-width:0;display:flex;flex-direction:column;gap:18px;
         text-decoration:none;color:inherit;container-type:inline-size}
.wk-thumb{
  position:relative;
  aspect-ratio:628/314;border-radius:4px;background:#101012;
  background-size:cover;background-position:center;
}
/* 호버 표시는 제목의 밑줄이다 — 그림 쪽에 아무것도 얹지 않는다. */
.wk-card:hover .wk-title{text-decoration:underline solid;text-decoration-thickness:1px;text-underline-offset:4px}
/* the frame puts the tags on the title's line, right-aligned */
.wk-cap{display:flex;gap:16px;align-items:baseline;min-height:24px}
.wk-title{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em;
          margin:0;flex:1 1 auto;min-width:0}
.wk-title-client,.wk-title-year{font-weight:400}
.wk-tags{display:flex;gap:14px;flex:0 0 auto}
.wk-tag{font-size:var(--tag-fs,14px);line-height:1.2;font-weight:700;white-space:nowrap}
.wk-tag-more{color:var(--fg)}
/* 그리드가 1단으로 서는 폭에서는 카드가 넓어 태그가 상대적으로 작아 보인다 —
   그 구간에서만 기본 크기를 한 단계 올린다. 3단(≥1408) 은 14, 좁은 화면(≤860)
   은 아래 미디어쿼리의 13 이 그대로다. 줄이는 것은 fitTags 가 이 값에서부터
   내려간다. */
@media (min-width:861px) and (max-width:1407px){
  .wk-tag{font-size:var(--tag-fs,16px)}
}
/* 접을지 말지는 폭이 아니라 결과가 정한다 — 태그가 아랫줄로 넘어가거나 제목이
   태그에 밀려 두 줄이 될 때만 뒤에서부터 접고 … 를 세운다. 폭으로는 그 둘 중
   어느 것도 잴 수 없으므로 (같은 폭에서도 제목 길이와 태그 개수가 갈린다)
   판정은 work.js 의 fitTags 에 있고, 여기서는 전부 그려 둔다. */
/* 그보다 더 좁아지면 한 줄을 나눠 쓰는 것 자체를 그만둔다 — 제목이 먼저 한 줄을
   통째로 갖고 태그는 아랫줄로 내려간다. 좁은 카드에서 태그와 폭을 다투면 제목에
   남는 것이 한 글자 폭이고, 그러면 제목이 세로로 접힌다. 화면 폭이 아니라 카드
   폭이 정하는 것은 같은 1480px 에서도 칼럼 수에 따라 카드가 갈리기 때문이다. */
@container (max-width:560px){
  .wk-cap{flex-direction:column;gap:6px;align-items:flex-start}
  .wk-tags{flex:0 1 auto;flex-wrap:wrap;gap:4px 12px;min-width:0}
}

/* ---- one project — the Work Detail frame ---- */

.wk-detail{--c:#8f8f96}
.wk-dhead{
  min-height:420px;box-sizing:border-box;
  padding:100px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:30px;
}
/* 프로젝트 제목과 공유 버튼이 한 줄. page-title-row 와 같은 규칙이다 —
   긴 제목이 줄바꿈되면 버튼은 마지막 줄 옆에 남는다. */
.wk-dtitle-row{display:flex;align-items:center;gap:clamp(12px, 1.4vw, 20px);flex-wrap:wrap}
.wk-dtitle{font-size:80px;font-weight:700;line-height:1.21;letter-spacing:-.02em;margin:0}
.wk-ddesc{font-size:24px;font-weight:400;line-height:40px;color:var(--fg);margin:0}
.wk-dtags{display:flex;gap:18px;flex-wrap:wrap}
.wk-dtags .wk-tag{font-size:16px}

.wk-stills{
  display:flex;flex-direction:column;gap:24px;
  padding:0 var(--gutter);
}
.wk-pair{display:flex;gap:24px}
.wk-still{
  flex:1 1 0;min-width:0;border-radius:4px;background:#101012;
  background-size:cover;background-position:center;
  aspect-ratio:628/400;
}
.wk-still--wide{aspect-ratio:1280/720}
/* 프리렌더된 프로젝트 페이지는 배경이 아니라 <img> 로 사진을 건다 — 크롤러가
   읽을 수 있어야 해서다. 앱이 뜨면 이 마크업은 사라진다. */
.wk-still>img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}

.wk-meta{
  margin:40px var(--gutter) 0;
  display:flex;align-items:flex-start;gap:24px;
}
.wk-mcell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.wk-mterm{font-size:12px;font-weight:700;color:#949499;margin:0}
.wk-mval{font-size:18px;font-weight:400;color:var(--fg);margin:0}

/* 크레딧 — 역할 하나가 한 줄, 좁아지면 한 단으로 */
/* 역할과 이름을 한 줄에 붙여 쓰면 메타 한 칸 폭에 그대로 들어간다 */
.wk-credit{flex:3 1 0}
.wk-credit-list{columns:2;column-gap:28px}
.wk-credit-line{margin:0 0 3px;font-size:14px;font-weight:400;line-height:1.5;color:var(--fg);break-inside:avoid}
.wk-credit-line b{font-weight:700}
.wk-credit-head{margin:0 0 8px;font-size:18px;font-weight:700;column-span:all}
.wk-credit-head:first-child{margin-top:0}
/* 공연 이력 — 크레딧과 같은 모양의 목록이라 .wk-credit-list 를 그대로 쓴다 */
.wk-venues{flex:3 1 0}
.wk-venue-at{color:#949499}
.wk-empty{color:#4a4a50}

/* ---- Information — the About frame ---- */

.page-intro{font-size:clamp(16px, 1.67vw, 24px);font-weight:400;line-height:1.67;color:var(--fg);max-width:1169px;margin:0}

.ab-body{display:flex;flex-direction:column;align-items:center}
.ab-ring{width:860px;max-width:100%;height:auto;display:block}
.ab-brand{font-size:clamp(24px, 3.33vw, 48px);font-weight:700;line-height:1.2;margin:0}
/* 이 판본은 워드마크 위에 한 줄(예술종합기획사 / Artainment Group)이 얹혀
   있고 레이블 띠는 없다. 워드마크가 전체 높이의 0.609 를 차지하므로(실측)
   옛 로고와 같은 크기로 보이려면 0.97em / 0.609 = 1.593em 이다.
   영문판은 패키지에 레이블 없는 파일이 없어 레이블판에서 띠를 잘라 만들었고,
   두 벌은 워드마크가 캔버스 안 같은 자리·같은 크기로 앉게 맞춰 두었다. */
.ab-brand-logo{display:block;height:1.593em;width:auto}
/* a 1920x1080 plate shown as a 1432 x --sh band, lifted 403 — both as fractions
   of the width, which is what a negative top margin resolves against */
/* 띠의 세로 길이. 1920x1080 원판에서 폭 1432 기준 몇 픽셀만큼 잘라 보일지의
   값이고, 둘이 이 하나에서 나온다 — 띠의 비율과 영상이 걸치는 깊이. 따로
   적으면 하나를 고칠 때 나머지가 어긋난다.
   ⚠ 원판을 끌어올리는 양은 여기서 나오면 안 된다. 빛 끈이 모이는 점이 바로
   위 로고에서 시작한 것처럼 보이게 맞춰 둔 자리라, 고정되는 것은 창의 중심이
   아니라 윗변(폭의 403/1432 지점)이다. 중심을 고정하면 늘린 만큼의 절반이
   위에 붙어 로고와 빛 사이가 벌어진다 — 늘어나는 것은 아래쪽뿐이어야 한다. */
.ab-streaks{
  --sh:400;
  width:100%;aspect-ratio:1432 / var(--sh);
  overflow:hidden;position:relative;z-index:1;
  /* 아래 끝은 잘린 자리가 아니라 바탕으로 풀린다 — 원판을 잘라 쓰는 창이라
     끝에 직선 경계가 남는다. 마지막 26% 를 투명으로 보내 그 선을 없앤다. */
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 74%, transparent 100%);
}
.ab-streaks img{
  display:block;width:100%;height:auto;
  margin-top:calc(-403 / 1432 * 100%);
}

.ab-services{
  position:relative;width:100%;box-sizing:border-box;
  padding:73px var(--gutter) 70px;
}

.ab-inner{display:flex;max-width:1280px;margin:0 auto}
.ab-svc-title{
  flex:0 0 clamp(120px, 23vw, 332px);min-width:0;
  font-size:clamp(24px, 3vw, 44px);font-weight:700;line-height:1;margin:0;
}
.ab-svc{flex:1 1 auto;min-width:0;list-style:none;margin:0;padding:0}
/* The frame's rows are 64 apart with 40 of type in them. Holding the 64 as a
   height is what broke: a kicker that wraps at a narrower window runs straight
   into the row below. The 24 of air becomes padding instead, so the rhythm is
   the frame's while every line fits and a wrapped row just grows. */
.ab-svc li{
  display:grid;grid-template-columns:clamp(90px, 15vw, 209px) minmax(0,1fr);
  align-items:start;min-height:40px;padding-bottom:24px;
  /* 이름을 오른쪽 변에 맞추면서 두 열 사이의 골이 필요해졌다 — 왼쪽 정렬일
     때는 칸이 이름보다 넓어 그 남는 폭이 골 노릇을 했다. 값은 이 블록이 이미
     쓰는 air 다(행 사이 24). */
  column-gap:24px;
}
.ab-svc-id{font-size:24px;font-weight:700;line-height:1.208;color:var(--c)}
/* 이름 자리에 서는 것은 글자가 아니라 히어로가 쓰는 그 로고 락업이다. 높이만
   준다 — 여섯 장의 캔버스가 584 로 같고 폭은 제각각이라, 폭을 주면 장마다
   다른 값을 박게 된다. 34px 은 락업 안의 워드마크가 이 자리의 24px 글자와
   같은 크기가 되는 값이다(히어로의 68 : 48 과 같은 비). 이 높이에서 가장 넓은
   a-perform 이 116px 이고 첫 열은 그보다 넓다 — 861px 화면에서도 15vw 가
   129px 이라 clamp 의 110 하한에는 닿지 않는다.

   그림이 이미 레이블 색으로 칠해져 있어 --c 를 다시 입히지 않는다.

   여섯 장의 폭이 57 에서 116 까지 벌어져 있어 어느 변을 맞출지 정해야 한다.
   오른쪽이다 — 옆 열의 설명이 왼쪽 정렬이라 그쪽으로 붙는 변이 두 열 사이의
   골을 일정하게 만든다. margin-left:auto 가 남는 자리를 왼쪽으로 몰아준다. */
.ab-svc-logo{display:block;height:clamp(26px, 2.36vw, 34px);width:auto;margin-left:auto}
.ab-svc-kicker{font-size:clamp(11px, 0.9vw, 13px);line-height:1.35;color:#949499;margin:0}
.ab-svc-line{font-size:clamp(15px, 1.39vw, 20px);line-height:1.35;color:var(--fg);margin:0}

/* 브랜드 필름. 16:9 를 비율로 잡아 두면 포스터가 오기 전에도 자리가 안 흔들린다. */
.ab-film{
  position:relative;width:100%;box-sizing:border-box;
  /* 본문 기둥(1280)보다 넓게 간다 — 바로 위 띠가 화면 폭을 다 쓰므로 영상이
     그 안쪽으로 너무 물러나면 두 덩어리가 따로 논다. 여백은 본문 gutter 가
     아니라 그보다 좁은 값이다. */
  padding:0 clamp(8px, 0.6vw, 12px) 70px;
  /* 띠의 절반 높이만큼 끌어올려 그 위에 걸친다 — 띠가 뒤로 물러나 배경이 되고
     영상이 앞에 선다. 값은 .ab-streaks 의 --sh 하나에서 같이 나온다. */
  --sh:400;
  margin-top:calc(-100vw * var(--sh) / 2864);
  z-index:2;
}
/* 한 줄에 둘. 좁아지면 하나씩 내려간다 — 16:9 를 반으로 쪼개면 모바일에서
   포스터가 우표만 해진다. */
.ab-film-row{
  list-style:none;margin:0 auto;padding:0;max-width:1760px;
  display:grid;grid-template-columns:repeat(2, 1fr);gap:clamp(18px, 1.95vw, 30px);
}
/* 포스터가 곧 버튼이다 — 누르면 열린다는 것을 커서가 말하고, 올리면 영상이 돈다 */
.ab-film-open{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  color:var(--fg);text-align:left;font:inherit;
}
/* 포스터와 미리보기가 같은 칸을 쓴다 */
.ab-film-thumb{display:block;position:relative;width:100%}
.ab-film-open img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:#0b0b0c;
}
/* 미리보기는 포스터를 덮는다. 첫 프레임이 실제로 그려진 뒤에 켜므로 검은 칸이
   스치지 않고, 페이드 없이 그대로 바뀐다. */
.ab-film-prev{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;pointer-events:none;
}
.ab-film-prev.is-on{opacity:1}
.ab-film-cap{
  display:block;margin-top:18px;text-align:center;
  font-size:clamp(11px, 0.9vw, 13px);font-weight:700;color:#949499;
}

/* 영화관. dialog 가 배경 어둡게·Esc·포커스 차단을 맡고, 여기서는 그 배경을
   충분히 어둡게 하고 무대를 가운데에 크게 놓는 일만 한다. */
.ab-lightbox{
  border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100vw;height:100dvh;
  display:flex;align-items:center;justify-content:center;
}
/* 바탕도 같이 어두워진다 — 한 번에 검어지면 영상만 튀어나온 것처럼 보인다 */
.ab-lightbox::backdrop{background:rgba(0,0,0,.92)}
.ab-lightbox[open]::backdrop{animation:abBackdrop .42s ease both}
@keyframes abBackdrop{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.92)}}
.ab-lightbox-x{opacity:0;animation:abFadeIn .3s .22s ease forwards}
@keyframes abFadeIn{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .ab-lightbox[open]::backdrop{animation:none}
  .ab-lightbox-x{opacity:1;animation:none}
}
.ab-lightbox-stage{width:min(92vw, calc((100dvh - 96px) * 16 / 9));}
.ab-lightbox-v{display:block;width:100%;aspect-ratio:16/9;background:#000}
.ab-lightbox-x{
  position:fixed;top:18px;right:18px;
  width:40px;height:40px;line-height:1;
  background:none;border:1px solid rgba(255,255,255,.35);border-radius:50%;
  color:#fff;font-size:22px;cursor:pointer;
}
.ab-lightbox-x:hover{border-color:#fff;background:rgba(255,255,255,.1)}
@media (max-width:640px){
  .ab-film-row{grid-template-columns:1fr}
}


/* ---- Contact — the 문의 frame ---- */

/* 머리의 골격은 세 페이지가 같다 — 제목의 줄높이도, 아래 여백도. 여기에만
   있던 두 예외(min-height 를 풀고 제목의 줄높이를 1.65 로 벌리는 것)를 뺐다:
   「문의」가 두 글자라 짧아 보이는 것은 제목의 문제이지 골격의 문제가 아니고,
   그 자리만 리듬이 달라지면 페이지를 옮겨 다닐 때 머리가 흔들린다. */
.page-head--contact{padding-bottom:40px}
/* 머리와 폼 사이의 선. 피그마의 Body 가 위 변에 갖고 있는 것이다. */
.page--contact .page-body{border-top:1px solid var(--fg);padding-top:10px}
.ct-lead{font-size:clamp(16px, 1.67vw, 24px);font-weight:400;line-height:1.7;max-width:1280px}
.ct-lead p{margin:0}
.ct-lead a{color:var(--fg);text-decoration:underline;text-underline-position:from-font}

.ct-intro{display:grid;grid-template-columns:100px 16% minmax(0,1fr) 40%;gap:0 24px;align-items:baseline}
.ct-intro-term{grid-column:1 / 3}
.ct-intro-copy{grid-column:3 / -1}
.ct-intro-term{font-size:clamp(12px, 0.97vw, 14px);font-weight:700;line-height:1.45;margin:0}
.ct-intro-copy{max-width:none}
.ct-intro-copy p{margin:0;font-size:clamp(13px, 1.04vw, 15px);font-weight:300;line-height:1.5}
/* 소개서 줄은 누르는 것이라 밑줄을 둔다 — 주소와 같은 등급이되 그 안에서
   한 번 더 갈린다 */
.ct-brochure a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.ct-news{display:flex;gap:24px;margin-bottom:64px}
.ct-card{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
}
.ct-thumb{
  aspect-ratio:300/160;border-radius:4px;background:#101012;
  background-size:cover;background-position:center;
  outline:1px solid transparent;transition:outline-color .18s;
}
.ct-card:hover .ct-thumb{outline-color:var(--c)}
.ct-card-title{font-size:15px;font-weight:700;line-height:1.4;margin:0}
.ct-card-desc{
  font-size:12px;line-height:1.65;color:var(--muted);margin:0;flex:1 1 auto;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.ct-card-cta{
  font-size:12px;font-weight:700;text-align:center;
  padding:10px 0;border:1px solid var(--rule);border-radius:2px;
}
.ct-card:hover .ct-card-cta{border-color:var(--c);color:var(--c)}

/* ---- 문의 폼 — Year 뷰와 같은 표 ----

   /work?sort=year 이 아카이브를 훑는 언어를 여기서도 쓴다. 그쪽 주석이 적어둔
   것이 여기에도 그대로 걸린다 — 칸 안에 가둔 자국은 표가 아니라 버튼처럼
   보인다. 그래서 상자를 두르지 않고, 한 항목이 한 줄로 서고, 줄은 거터를
   패딩으로 들어 선이 화면 끝까지 나간다. 항목 이름은 표의 머리글(14/700),
   값은 표의 칸(20/700)이다. 글자는 전부 흰색이고, 고른 것을 알리는 일은 색이
   아니라 밑줄이 맡는다 — 지나가면 점선, 고른 것은 실선. 필터 바(.wk-cat)가
   켜지고 꺼지는 방식 그대로다.

   입력 칸에만 아래 선을 하나 둔다. 표의 행은 눌리는 것이라 hover 로 자기를
   알리면 되지만 빈 입력 칸은 손이 닿기 전에 거기 있다고 먼저 말해야 한다 —
   그 선이 없으면 빈 줄과 구별되지 않는다.

   값 칸의 등급은 둘뿐이다: 사람이 적어 넣는 것과 고르는 것이 20/700 이고,
   그것을 둘러싼 안내(약관·동의문·파일·보내기 주석·오류)가 15/400 이다. 세
   번째 등급을 만들지 마라 — 15 와 16 이 섞여 있던 것이 이 표를 흐트러뜨렸다.
   부차라고 해서 색을 죽이지도 않는다: 글자는 전부 흰색이라는 위 문장이 그대로
   걸린다.

   항목 이름은 왼쪽 변에 선다. 오른쪽으로 붙여 값과의 골을 일정하게 만들어 본
   적이 있는데, 그러면 왼쪽 353px 이 통째로 비어 이 표가 베낀 Year 뷰와 다른
   그림이 된다 — 거기서는 Year·Client·Project·Scope 의 머리글이 전부 자기 열의
   왼쪽에 서고 네 열이 다 찬다. 골이 행마다 다른 것은 이 표의 성질이다. */

.ct-form,.ct-done{max-width:none;margin-inline:0}

.ct-field{
  display:grid;grid-template-columns:100px 16% minmax(0,1fr) 40%;
  align-items:baseline;gap:14px 24px;
  margin:0 calc(-1 * var(--gutter)) 8px;padding:26px var(--gutter);
}
/* 값은 셋째 칸에 선다 — Year 뷰에서 Project 가 서는 그 칸이고 폭도 같다(391).
   전에는 넷째 칸까지 먹어 927 이었는데, 그러면 적어 넣는 글자는 왼쪽에 몰리고
   밑줄만 화면을 가로질러 표가 아니라 빈 줄로 읽힌다.

   넷째 칸까지 펴는 것은 폭이 그 자체로 내용인 둘뿐이다: 여러 줄을 받는 상세
   내용과, 낱말이 늘어서는 고르기 칸. */
.ct-field > *{grid-column:3 / 4}
.ct-field > .ct-textarea,
.ct-field > .ct-chips,
.ct-field > .ct-policy{grid-column:3 / -1}
.ct-field > .ct-label{grid-column:1 / 3;grid-row:1}
/* 한 줄에 둘씩 세우던 묶음 — 표에서는 각자 한 줄이다 */
.ct-row{display:contents}
.ct-label{display:block;font-size:clamp(12px, 0.97vw, 14px);font-weight:700;line-height:1.45;margin:0}
.ct-req{font-style:normal;color:var(--fg);margin-left:5px}

.ct-policy{padding:0;margin:0;border:0;font-size:clamp(13px, 1.04vw, 15px);line-height:1.75}
.ct-policy dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px;margin:0}
.ct-policy dt{font-weight:700;white-space:nowrap}
.ct-policy dd{margin:0}
.ct-policy p{margin:14px 0 0}

.ct-input{
  width:100%;box-sizing:border-box;padding:0 0 10px;
  background:transparent;color:var(--fg);
  border:0;border-bottom:1px dashed var(--fg);border-radius:0;
  font:inherit;font-size:clamp(16px, 1.39vw, 20px);font-weight:700;line-height:1.3;
}
.ct-input::placeholder{color:var(--fg);font-weight:400}
.ct-input:focus{outline:none;border-bottom-style:solid}
.ct-input.is-bad{border-bottom-color:#FF0579}
/* 여러 줄을 받는 자리라 아래 선 하나로는 크기를 못 말한다 — 점선을 둘러서
   어디까지 쓸 수 있는지 칸으로 보인다 */
.ct-textarea{
  resize:vertical;min-height:134px;line-height:1.6;
  max-width:822px;padding:11px 12px;
  border:1px dashed var(--fg);
}
.ct-textarea:focus{border-style:solid}

/* 알게 된 경로 — 늘어놓기에는 항목이 길어서 고르는 칸으로 받는다 */
.ct-select{
  appearance:none;-webkit-appearance:none;
  /* 칸을 다 채우지 않는다 — 고르는 것은 값이 아니라 하나의 단추다 */
  justify-self:start;width:164px;padding:9px 34px 9px 12px;
  background:transparent;color:var(--fg);
  border:1px solid var(--fg);border-radius:0;
  font:inherit;font-size:clamp(13px, 1.04vw, 15px);font-weight:400;line-height:1.3;cursor:pointer;
  /* 화살표는 배경 그림으로 — 기본 화살표를 끄면 자리가 비므로 직접 그린다 */
  background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.ct-select:focus{outline:none}
.ct-select option{background:#000;color:var(--fg)}

.ct-phone{display:flex;align-items:baseline;gap:12px}
.ct-phone .ct-input{flex:0 1 9ch;min-width:0}
/* 번호 사이의 자국은 부차 정보가 아니라 값의 일부다 — 양옆 입력칸과 같은
   등급으로 서야 한 줄로 읽힌다 */
.ct-dash{color:var(--fg);font-size:20px;font-weight:700}

.ct-file{font-size:clamp(13px, 1.04vw, 15px);color:var(--fg)}
.ct-file::file-selector-button{
  margin-right:14px;padding:10px 20px;cursor:pointer;
  background:transparent;color:var(--fg);
  border:1px solid #fff;border-radius:0;font:inherit;font-size:15px;font-weight:700;
}
.ct-file::file-selector-button:hover{background:#fff;color:#000}

.ct-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:clamp(13px, 1.04vw, 15px);line-height:1.75}
.ct-check input{flex:0 0 auto;width:17px;height:17px;margin:3px 0 0;accent-color:#fff}

/* 고르는 것은 Scope 칼럼의 태그처럼 늘어선 낱말이다 — 색은 쓰지 않는다 */
.ct-chips{display:flex;flex-wrap:wrap;gap:10px 26px}
.ct-chip{
  position:relative;cursor:pointer;
  font-size:clamp(16px, 1.39vw, 20px);font-weight:400;line-height:1.35;
  /* 선은 늘 그어져 있다 — 고를 수 있는 자리라는 표시이고, 고른 것만 실선이
     된다. 입력 칸의 점선과 같은 말이다. */
  text-decoration:underline dashed;text-underline-offset:8px;
}
.ct-chip input{position:absolute;opacity:0;pointer-events:none}
/* 손이 닿거나 키보드가 와 있거나 고른 것 — 셋 다 실선이다. 점선은 아직
   아무 일도 일어나지 않은 자리라는 뜻이라, 셋 중 하나라도 걸리면 선이 찬다. */
.ct-chip:hover,
.ct-chip:has(:focus-visible),
.ct-chip:has(:checked){text-decoration:underline solid}
.ct-etc{margin-top:4px}
.ct-etc:disabled{opacity:.5}

.ct-error{margin:0;font-size:15px;line-height:1.75;color:#FF0579}

.ct-send{
  display:flex;justify-content:center;
  margin:0 calc(-1 * var(--gutter));padding:34px var(--gutter) 0;
}
.ct-submit{
  min-width:129px;padding:11px 32px;cursor:pointer;
  background:transparent;color:var(--fg);border:1px solid var(--fg);border-radius:0;
  font:inherit;font-size:clamp(16px, 1.39vw, 20px);font-weight:700;
}
.ct-submit:hover{background:#fff;color:#000}
.ct-send-note{margin:0;flex:1 1 240px;font-size:15px;line-height:1.75;color:var(--fg)}
.ct-send-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ct-send-note a:hover{text-decoration:underline dotted;text-decoration-thickness:1px}

.ct-done p{margin:0 0 16px;font-size:20px;font-weight:700;line-height:1.6}
.ct-done-sub{font-size:15px;font-weight:400;line-height:1.75}
.ct-done-sub a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ct-done-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.ct-submit--ghost{background:#fff;color:#000}
.ct-submit--ghost:hover{background:transparent;color:var(--fg)}

/* ============================================================
   Narrow

   The nav's widths are Figma's spacing for the 1440 frame — 437px of menu
   with 308px of it under the first link — and held to the letter they push
   the bar past a phone's width. Here they become what they are, spacing,
   and the gutter comes in with them.
   ============================================================ */

/* 셋째 칸은 화면이 좁아지면 저 혼자 급히 준다 — 넷째가 40% 를 고정으로 물고
   있어서 1fr 이 남는 것을 받기 때문이다(1440 에서 391, 900 에서 154). 20px 글자
   일곱 자가 안 들어가는 칸은 표로도 입력칸으로도 못 쓰므로, 그 아래로는 넷째
   칸까지 편다. 300px 아래로 내려가는 지점이 1240 이다. */
@media (max-width:1240px){
  .ct-field > *{grid-column:3 / -1}
}

@media (max-width:860px){
  :root{--gutter:24px}
  /* 데스크톱의 오른쪽 치우친 구도는 1440 프레임의 것이다. 여기서는 필드가
     화면 한가운데에서 상자 변으로 끊기므로 폭을 다 쓴다 */
  #c{left:0;width:100%}
  /* 좁은 화면의 메뉴는 내용 폭이다. footer 의 Contact 는 폭을 베끼는 것이
     아니라 같은 글자를 숨겨 세워서 따라간다(아래 .footer-menu 주석).

     Contact 는 브랜드와 같은 줄에 그대로 있는다 — 메뉴가 좁아져도 그 자리는
     화면 가운데쯤이라 왼쪽의 브랜드와 닿지 않는다. 닿는 것은 아래 한 칸뿐이다. */
  .nav-menu{width:auto;gap:22px}
  .nav-menu a:first-child{width:auto}
  .footer-menu{width:auto;gap:22px}
  .footer-menu .footer-ghost:first-child{width:auto}
}
/* 여기서부터는 메뉴 왼쪽이 브랜드 오른쪽까지 내려온다 — Contact 가 브랜드 위에
   포개지므로 그 폭에서만 한 줄 아래로 내린다. nav 는 브랜드와 메뉴가 flex 로
   서로를 밀어내 스스로 피하지만 footer 의 칸은 절대 위치라 안 피한다. */
@media (max-width:400px){
  .footer-menu{top:112px}
  /* Contact 줄이 112 에 절대 위치로 서므로 왼쪽 기둥의 둘째 줄부터는 그 아래로
     내린다 — 안 내리면 채널과 Contact 가 한 줄처럼 붙어 읽힌다 */
  .footer-sns:first-of-type{margin-top:26px}
  .nav-menu a:first-child{width:auto}
  /* the label is centred on 18.6% of the width, which at this size puts its
     left half off the screen; anchor its edge to the gutter instead. Not on the
     gutter itself — sitting exactly under the nav's mark and over the footer's
     reads as the same column three times. One indent off it, an em of the
     label's own type, so it reads as set in rather than stacked. */
  .hero-label{left:calc(var(--gutter) * 3);transform:translate(0,-50%)}
  .footer-inner{right:var(--gutter)}
  .page-head{min-height:0;padding:56px var(--gutter) 28px;gap:22px}
  .page-title{font-size:34px;line-height:1.15}
  .wk-bar{--bar-fit:0;padding:26px 0 0;gap:6px 18px}
  .wk-cat-word{font-size:16px}
  .page-body{padding-bottom:72px}
  .wk-grid{gap:40px 20px;padding-bottom:72px}
  .wk-list{padding-bottom:72px}
  .wk-row{grid-template-columns:52px minmax(0,1fr);
          grid-template-areas:"yr proj" ". for" ". kind";gap:2px 12px;padding:10px var(--gutter)}
  .wk-c-yr{grid-area:yr}
  .wk-c-proj{grid-area:proj}
  .wk-c-for{grid-area:for}
  .wk-c-kind{grid-area:kind}
  .wk-c{font-size:16px;white-space:normal}
  .wk-c-for,.wk-c-kind{font-size:13px}
  .wk-c-yr{font-size:16px}
  .wk-row--head{display:none}
  /* 캡션이 세로로 접히면 태그가 제목 아래 한 줄을 통째로 쓰는데, 그 줄은
     카드보다 길어질 수 있다 — 안 접어 두면 옆 카드 위로 넘어가 글씨가
     겹친다. 이 폭에서만 접는다(넓은 화면의 오른쪽 정렬 한 줄은 그대로). */
  .wk-cap{flex-direction:column;gap:6px;align-items:flex-start}
  .wk-tags{flex:0 1 auto;flex-wrap:wrap;gap:4px 12px;min-width:0}
  .wk-title{font-size:16px}
  .wk-tag{font-size:var(--tag-fs,13px)}
  .wk-dhead{height:auto;padding:56px var(--gutter) 28px;gap:18px}
  .wk-dtitle{font-size:34px;line-height:1.15}
  .ct-form,.ct-done{max-width:none}
  .ct-field{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px var(--gutter)}
  /* 한 열이면 넷째 칸이 없다. 위에서 셋째~넷째로 편 셋도 여기 같이 적어야
     한다 — 클래스가 붙은 쪽이 명시도가 높아 `> *` 만으로는 안 덮인다. */
  .ct-field > *,.ct-field > .ct-label,
  .ct-field > .ct-textarea,.ct-field > .ct-chips,.ct-field > .ct-policy{grid-column:1 / -1}
  .ct-intro{grid-template-columns:minmax(0,1fr)}
  .ct-intro-term,.ct-intro-copy{grid-column:1 / -1}
  .ct-lead{line-height:1.75}
  .ct-done{max-width:none}
  .ct-chips{gap:8px 20px}
  .ct-submit{width:100%}
  .wk-ddesc{font-size:16px;line-height:1.75}
  .wk-pair{flex-direction:column}
  .wk-meta{margin:32px var(--gutter) 0;padding:0;flex-wrap:wrap;gap:28px}
  .wk-credit-line{font-size:14px}
  .wk-mcell{flex:1 1 40%}
  /* 공연 이력은 한 줄이 「일자 · 공연 · 장소」 셋이라 40% 폭의 2단에서는
     날짜까지 쪼개진다(「2025-/10-09」). 좁아지면 칸을 통째로 쓰고 단은 하나로. */
  .wk-venues{flex:1 1 100%}
  .wk-venues .wk-credit-list{columns:1}
  .wk-dl,.info-grid{grid-template-columns:1fr;gap:0}
  .wk-dl dt,.info-grid dt{border-bottom:0;padding-bottom:0}
  .wk-dtitle{font-size:24px}
  .page-intro{line-height:1.75}
  .ab-services{padding:44px var(--gutter) 44px}
  .ab-inner{flex-direction:column;gap:24px}
  .ab-svc-title{flex:0 0 auto}
  .ab-svc li{grid-template-columns:1fr;gap:4px;padding:0 0 22px}
  /* 한 열로 접히면 이름 위에 설명이 아니라 아래에 온다 — 맞출 옆 열이 없으니
     오른쪽으로 밀 이유도 없다 */
  .ab-svc-logo{margin-left:0}
  .ab-svc-line{line-height:1.5}
  .ct-lead{line-height:1.75}
  .ct-intro{grid-template-columns:minmax(0,1fr);gap:10px}
  .ct-intro-copy p{line-height:1.6}
  .ct-news{flex-wrap:wrap;gap:20px}
  .ct-card{flex:1 1 45%}
}
/* 한 줄에 셋 아니면 하나다. 셋을 세우려면 카드가 400px 은 돼야 하고
   (3×400 + 간격 48 + 거터 160) 그 아래로는 바로 하나로 내려간다 — 둘은
   두지 않는다. 카드가 좁아진 만큼 제목이 접히는데, 둘로 버티는 구간은 그
   접힘을 늘리기만 하고 한 줄에 두 개라는 값을 따로 주지 않는다. */
@media (max-width:1407px){
  .wk-grid{grid-template-columns:minmax(0,1fr)}
}