/* ==========================================================================
   박지선 개인 웹사이트 — 공통 스타일
   흰 바탕 · 모든 글자는 같은 파랑 #1668E0. 색으로는 구분하지 않습니다.

   구분 규칙 (색 대신 이것만 씁니다)
     · 위계   → 글자 크기와 굵기 (본문 400 / 제목·강조 500)
     · 링크   → 밑줄
     · 현재 위치 → 굵게 + 밑줄
     · 선택됨 · 펼쳐짐 → 파란 배경 채움 + 흰 글자 (반전)
     · 구획   → 옅은 파란 헤어라인

   1) 토큰  2) 기본  3) 헤더  4) 인덱스(공용)  5) 필터  6) 펼침 상세
   7) 홈  8) 페이지 머리  9) 푸터  10) 반응형
   ========================================================================== */

/* 1) 토큰 ---------------------------------------------------------------- */

:root {
  --blue:  #1668E0;              /* 모든 글자 · 채움 · 선 */
  --paper: #F3F3F1;              /* 종이 바탕, 그리고 반전됐을 때의 글자 */

  /* 아주 옅은 그레인 — 이미지 파일 없이 SVG 노이즈로 만듭니다 */
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22p%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22220%22%20height%3D%22220%22%20filter%3D%22url%28%23p%29%22%20opacity%3D%220.045%22%2F%3E%3C%2Fsvg%3E");

  --rule:        rgba(22, 104, 224, 0.22);   /* 얇은 구분선 */
  --rule-strong: rgba(22, 104, 224, 0.55);   /* 굵은 구획선 */
  --wash:        rgba(22, 104, 224, 0.06);   /* 이미지 자리 등 아주 옅은 면 */
  --blue-pale:   #EAF1FC;                    /* 태그 알약 바탕 */
  --blue-pale-2: #DCE7FA;                    /* 태그에 손을 올렸을 때 */

  /* 서체 세 층 — 제목 / 본문 / 메타(숫자·코드·태그) */
  --font-title: "Wanted Sans Variable", "Wanted Sans",
                "Pretendard Variable", Pretendard,
                -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-body:  "Pretendard Variable", Pretendard,
                -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-meta:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --w-title: 600;
  --w-body:  300;
  --w-meta:  400;

  /* 왼쪽 여백 열 — 연도·번호·분류가 여기 놓이고 본문은 그 오른쪽에 정렬됩니다 */
  --gutter: 108px;
  --col-gap: 28px;

  --pad: 40px;                   /* 화면 좌우 여백 (전폭 레이아웃) */

  /* 하위 페이지 상단 — 제목은 본문 크기, 헤더와의 간격은 모든 페이지 동일 */
  --page-top:      40px;   /* 헤더와 제목 사이 */
  --page-bottom:   28px;   /* 제목 묶음과 본문 사이 */
  --page-title-gap: 2px;   /* 제목과 한 줄 설명 사이 (한 덩어리로 읽히게) */

  /* 포토북(모바일 페이지 넘김) 여백 — 실기기에서 보고 이 값만 고치면 됩니다 */
  --pb-gap:   16px;    /* 한 페이지 안 두 사진 사이 */
  --pb-pad-y: 16px;    /* 페이지 위아래 여백 */
  --pb-pad-x: 8px;     /* 페이지 좌우 여백 */

  /* 기록 표의 열 — 헤더와 데이터 행이 이 값 하나를 함께 씁니다.
     데스크톱: 색인코드 · 제목 · 연도 (모바일에서는 아래 미디어쿼리에서 바꿈) */
  --cat-cols: 136px minmax(0, 1fr) 78px;
}

/* 1-1) 서체 층 ----------------------------------------------------------
   제목 층 = 메뉴 · 이름 · 페이지 제목 · 카드 제목 · 크레딧의 사람 이름
   메타 층 = 연도 · 색인 코드 · 태그 · 크레딧 역할명 · 캡션 · 사진 출처 ·
             하단 항목 수 · 섹션 번호 · KO/EN
   나머지는 모두 본문 층(기본값)                                          */

.nav a, .brand a,
h1, h2, h3,
.home-name, .index-title, .cat-title, .wr-title,
.doc-title, .ph-title, .now-title, .qb-title, .qtext,
.pj-edition-title, .links-label, .cat-group-title, .home-sec-head h2,
.pj-credit-name {
  font-family: var(--font-title);
  font-weight: var(--w-title);
}

.meta, .tnum,
.index-lead, .cat-code, .cat-year, .wr-date, .wr-kind,
.now-year, .now-tag, .qb-tag, .keys,
.doc-year, .ph-meta, .ph-badge, .ph-count,
.pj-eyebrow, .pj-run-date, .pj-run-time, .pj-credit-role,
.pj-media-cap, .pj-poster-cap, .pj-photo-credit, .pj-role-label,
.hero-photo figcaption, .detail-media figcaption,
.page-count, .section-num, .lang, .lang button,
.lb-count, .pj-slide-count, .qb-tag-n, .now-credit {
  font-family: var(--font-meta);
  font-weight: var(--w-meta);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

/* 2) 기본 ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  background-repeat: repeat;
  background-attachment: fixed;   /* 스크롤해도 질감이 따라 흐르지 않게 */
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--w-body);
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

::selection { background: var(--blue); color: var(--paper); }

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.25; letter-spacing: -0.022em; }
p { margin: 0; }
nav ul, ul, ol { margin: 0; padding: 0; list-style: none; }

/* 색이 하나뿐이므로 링크는 밑줄로 알립니다 */
a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* 이미지가 종이 바탕에 묻지 않도록 아주 옅은 테두리 */
img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid rgba(22, 104, 224, 0.08);
}
/* 로고와 '이미 테두리가 있는 상자 안의 사진'은 제외 */
.brand-logo img, .home-logo img,
.doc-cover img, .ph-cover img, .now-cover img,
.pj-video-link img { border: 0; }

:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }

.wrap { width: 100%; padding: 0 var(--pad); }

/* 글줄이 길어지지 않게 — 문단이 들어가는 요소에만 폭을 겁니다 */
.pj-body, .pj-support, .read-body, .detail-body,
.home-intro, .page-sub, .section-note, .index-sub,
.qb-question h2, .hero-lead, .hero-note { max-width: 60ch; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* 작은 라벨 — 연도, 분류, 섹션 번호 */
.meta {
  font-size: 12px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0.09em; text-transform: uppercase;
}

/* 반전(채움) — 선택되거나 펼쳐진 상태 */
.is-filled { background: var(--blue); color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3) 헤더 ---------------------------------------------------------------- */

/* 페이지를 덮는 면들은 본문과 같은 종이 질감을 씁니다
   (배경이 고정돼 있어 스크롤해도 무늬가 어긋나지 않습니다) */
.site-header, .nav, .lb {
  background-color: var(--paper);
  background-image: var(--grain);
  background-attachment: fixed;
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  /* 구분선 없음 — 배경(종이색+그레인)이 불투명해 스크롤해도 본문이 비치지 않습니다 */
  padding-bottom: 6px;
}

.header-inner {
  display: flex; align-items: center; gap: 36px;
  /* 좌우 여백은 .wrap 의 --pad 를 그대로 씁니다.
     padding 축약형을 쓰면 그 값을 덮어써 로고가 화면 끝에 붙습니다. */
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand { display: flex; align-items: center; }
.brand-logo {
  display: block; line-height: 0;
  border: 0; outline: 0; background: none; padding: 0;   /* 네모 테두리 없이 점만 */
}

/* 메뉴 오버레이 안의 반전 로고 — 평소에는 없는 셈 (모바일에서 열렸을 때만 보임).
   이 기본값이 없으면 데스크톱 헤더에 로고가 하나 더 나옵니다. */
.nav-logo { display: none; }
.nav-logo img { border: 0; }
.brand-logo img {
  height: 20px; width: auto;
  border: 0 !important; background: none;
  transition: opacity .15s;
}
.brand-logo:hover img { opacity: 0.65; }

/* 로고 — 형광 연두 점 하나. 모든 페이지에서 같은 한 벌입니다.
   지름 16px · 채움 #CCFF00 · 테두리 1px #1668E0.
   파란 바탕에서는 테두리가 배경색과 같아 보이지 않으므로,
   배경에 따라 규칙을 나누지 않습니다. */
.logo-dot {
  display: block;
  box-sizing: border-box;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #CCFF00;
  border: 1px solid var(--blue);
  transition: opacity .15s;
}
.brand-logo:hover .logo-dot,
.nav-logo:hover .logo-dot { opacity: 0.65; }


.nav { display: flex; align-items: baseline; gap: 24px; margin-right: auto; }
.nav a {
  font-size: 14px; white-space: nowrap;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { font-weight: 500; text-decoration: underline; }

.lang { display: flex; align-items: baseline; gap: 6px; font-size: 12px; letter-spacing: 0.06em; }
.lang button { padding: 1px 5px; }
.lang button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 고른 언어는 진하게, 나머지는 같은 색을 흐리게 — 연두는 쓰지 않습니다 */
.lang button { color: var(--blue); opacity: 0.45; }
.lang button[aria-pressed="true"] {
  background: none; color: var(--blue); opacity: 1;
  font-weight: 500; text-decoration: none;
}
.lang .lang-sep { opacity: 0.45; }

/* 3줄 아이콘 · 닫기(×) — 인라인 SVG, 색은 글자색을 따릅니다 */
.nav-toggle, .nav-close {
  display: none;
  width: 44px; height: 44px;              /* 손가락으로 누를 수 있는 최소 크기 */
  align-items: center; justify-content: center;
}
.nav-toggle { margin-left: 4px; margin-right: -10px; }
.nav-toggle svg, .nav-close svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linecap: round;
}
/* 닫기(X) — 햄버거 버튼이 있던 자리 그대로.
   헤더의 .header-inner 가 padding-top:16px 이고 .nav-toggle 이 margin-right:-10px 이라
   같은 값을 쓰면 메뉴를 여닫아도 아이콘이 제자리에 머무릅니다. */
.nav-close { position: absolute; top: 16px; right: calc(var(--pad) - 10px); }

/* 4) 인덱스 — 기록 · 지금 · 목록 전반이 함께 쓰는 뼈대 ------------------- */

.index { border-top: 1px solid var(--rule-strong); }

.index-item { border-bottom: 1px solid var(--rule); }

.index-row {
  display: grid;
  grid-template-columns: var(--gutter) 1fr auto;
  gap: var(--col-gap);
  align-items: baseline;
  width: 100%;
  padding: 20px 12px 20px 0;
  text-align: left;
}

.index-lead { padding-top: 4px; }                     /* 왼쪽 열(연도·번호·코드) */

.index-title {
  display: block;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 500; letter-spacing: -0.024em; line-height: 1.3;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.index-row:hover .index-title { text-decoration: underline; }

.index-sub {
  display: block; margin-top: 7px;
  font-size: 15px; line-height: 1.6; max-width: 60ch;
}

.index-tail { text-align: right; white-space: nowrap; padding-top: 6px; }

/* 키워드 — 그냥 작은 글자, 가운뎃점으로 구분 */
.keys { display: block; margin-top: 10px; font-size: 12.5px; }
.keys span:not(:last-child)::after { content: " · "; }

/* 펼쳐진 항목 = 배경 채움 + 흰 글자 */
.index-item[data-open="true"] > .index-row { background: var(--blue); color: var(--paper); padding-left: 12px; }
.index-item[data-open="true"] > .index-row .index-title { text-decoration: none; }

/* 4-1) 카탈로그 인덱스 표 — 기록(Archive) ------------------------------- */

.archive-section { padding-bottom: clamp(72px, 10vw, 128px); }
.archive-count { margin-top: 20px; }

/* 열 폭은 데이터 행이 직접 갖습니다 (열 제목 줄에 묶어 두지 않습니다) */
.cat-row {
  display: grid;
  grid-template-columns: var(--cat-cols);
  gap: 22px;
  align-items: baseline;
}

/* 모바일 전용 셀은 데스크톱에서 감춥니다 (반대는 미디어쿼리에서) */
.is-mobile, .cat-code-m { display: none; }

/* 카테고리 묶음 — 첫 묶음은 열 제목 줄이 없어진 만큼 위로 당깁니다 */
.cat-group { padding-top: clamp(56px, 7vw, 88px); }
.cat-group:first-child { padding-top: 0; }
/* 카테고리 소제목 — 선 없이 여백만으로 묶음을 나눕니다.
   위(이전 묶음과의 사이)는 넓게, 아래(첫 항목과의 사이)는 좁게. */
.cat-group-title {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 0;
  margin-bottom: 6px;
  font-size: clamp(16px, 1.9vw, 19px); font-weight: 500;
}

.cat { border-top: 0; }
.cat-item { border-bottom: 1px solid var(--rule); scroll-margin-top: 90px; }
.cat-item.is-target { background: var(--wash); box-shadow: inset 2px 0 0 var(--blue); }

.cat-row { width: 100%; text-align: left; padding: 13px 10px 13px 0; }

/* 자료가 있는 행만 링크처럼 반응합니다 */
a.cat-row:hover { background: var(--wash); }
a.cat-row:hover .cat-title { text-decoration: underline; }

.cat-code { font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; }

.cat-title-cell { min-width: 0; }   /* 1fr 트랙이 줄지 않도록 */
.cat-title {
  font-size: clamp(15px, 1.7vw, 17px); line-height: 1.45; letter-spacing: -0.018em;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* 자료가 있는 항목 표시 */
.cat-link { display: inline-block; margin-left: 6px; font-size: 12px; vertical-align: 1px; }

/* 링크가 여러 개인 항목 — 제목 아래 라벨로 */
.cat-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.cat-links a {
  font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px;
}
.cat-links a:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

.cat-year { font-size: 13px; text-align: right; white-space: nowrap; }

/* 4-2) 자료집(Documents) — 표지 격자 ------------------------------------ */

.documents-section { padding-bottom: clamp(72px, 10vw, 128px); }

/* 자료집 — 계열 라벨·구분선 없이 하나의 균일한 그리드 */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 22px;
  padding-top: clamp(24px, 3vw, 32px);
}
.doc-item { scroll-margin-top: 90px; }   /* 계열 첫 자료집이 앵커 */

.doc-item a { display: block; }

/* 표지 — 모두 같은 크기 (A4 비율) */
.doc-cover {
  position: relative; display: block;
  aspect-ratio: 1 / 1.414;
  background: var(--wash);
  border: 1px solid rgba(22, 104, 224, 0.16);
  overflow: hidden;
}
.doc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 표지 파일이 아직 없을 때 뒤에 보이는 자리 */
.doc-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 14px; font-size: 12.5px; line-height: 1.5;
}

.doc-item a:hover .doc-cover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.doc-item a:hover .doc-title { text-decoration: underline; text-underline-offset: 3px; }

.doc-title {
  display: block; margin-top: 9px;
  font-size: 12px; line-height: 1.5; letter-spacing: -0.012em;
}
.doc-year { display: block; margin-top: 2px; font-size: 10.5px; opacity: 0.55; }

/* 4-3) 글(Writing) — 인덱스와 읽기 페이지 -------------------------------- */

.writing-section { padding-bottom: clamp(72px, 10vw, 128px); }

.wr-head, .wr-row {
  display: grid;
  grid-template-columns: 92px 200px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
}
.wr-head { padding: 0 10px 10px 0; border-bottom: 1px solid var(--rule-strong); }

.wr-item { border-bottom: 1px solid var(--rule); }
.wr-row { width: 100%; text-align: left; padding: 13px 10px 13px 0; }

a.wr-row:hover { background: var(--wash); }
a.wr-row:hover .wr-title { text-decoration: underline; text-underline-offset: 3px; }

.wr-date { font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; }
.wr-media { font-size: 13px; line-height: 1.5; }
.wr-title-cell { min-width: 0; }
.wr-title { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.45; letter-spacing: -0.018em; }
.wr-arrow { font-size: 12px; margin-left: 5px; vertical-align: 1px; }

/* 영문 모드에서 원문이 한국어임을 알리는 표시 */
.wr-orig {
  font-family: var(--font-meta);
  font-size: 11px; opacity: 0.6;
  margin-left: 6px; white-space: nowrap;
}
.wr-orig:empty { margin-left: 0; }
.wr-kind {
  margin-left: 8px; font-size: 11px; letter-spacing: 0.06em;
  padding: 1px 6px; box-shadow: inset 0 0 0 1px var(--rule-strong);
  white-space: nowrap; vertical-align: 2px;
}

/* 읽기 페이지 — 한 컬럼, 넉넉하게 */
.read { padding-bottom: clamp(72px, 10vw, 128px); }

.read-head { padding: var(--page-top) 0 var(--page-bottom); }
.read-back { text-decoration: underline; text-underline-offset: 3px; }
.read-head h1 {
  margin-top: 22px;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.35;
}
.read-meta { margin-top: 12px; font-size: 13.5px; }

.read-body {
  padding-top: clamp(24px, 3.5vw, 36px);
  border-top: 1px solid var(--rule);
}
.read-body p { font-size: clamp(15.5px, 1.8vw, 17px); line-height: 1.9; }
.read-body p + p { margin-top: 1.4em; }
.read-h3 {
  margin: 2.4em 0 0.9em;
  font-size: clamp(16px, 1.9vw, 18px); font-weight: 500; line-height: 1.4;
}
.read-h3:first-child { margin-top: 0; }

.read-foot { margin-top: clamp(48px, 7vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule); }
.read-missing { padding: clamp(48px, 7vw, 88px) 0 24px; font-size: 16px; }

/* 4-4) 사진(Photographs) — 그리드와 갤러리 ------------------------------ */

.photos-section { padding-bottom: clamp(72px, 10vw, 128px); }

.ph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(28px, 3.5vw, 40px);
}

.ph-item { scroll-margin-top: 90px; }
.ph-card { display: block; width: 100%; text-align: left; }

.ph-cover {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: var(--wash);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.ph-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 표지 위 배지 */
.ph-badge {
  position: absolute; left: 10px; bottom: 10px;
  background: var(--paper); color: var(--blue);
  font-size: 11.5px; letter-spacing: 0.02em;
  padding: 3px 8px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.ph-count {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--paper); color: var(--blue);
  font-size: 11.5px; padding: 3px 8px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.ph-card:hover .ph-cover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ph-card:hover .ph-title { text-decoration: underline; text-underline-offset: 3px; }

.ph-title {
  display: block; margin-top: 11px;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.015em;
}
.ph-meta { display: block; margin-top: 3px; font-size: 12px; }

/* 라이트박스 — 흰 바탕에 파란 글씨 그대로 */
.lb {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
}
.lb[hidden] { display: none; }

.lb-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule);
}
.lb-title { font-size: 14px; margin-right: auto; }
.lb-close {
  font-size: 13px; padding: 3px 10px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.lb-close:hover { background: var(--blue); color: var(--paper); }

.lb-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 16px 28px;
}
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; }

.lb-nav {
  flex: none; width: 44px; height: 44px;
  font-size: 17px; line-height: 1;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.lb-nav:hover { background: var(--blue); color: var(--paper); }

/* 4-5) 질문으로 보기 — 태그 구름과 결과 ---------------------------------- */

.qb-cloud-wrap { padding-top: clamp(24px, 3vw, 34px); }

.qb-cloud {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 14px;
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

/* 태그 — 개수와 상관없이 모두 같은 크기의 알약 */
.qb-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  font-size: 15px; line-height: 1;
  background: var(--blue-pale); color: var(--blue);
  border: 0; border-radius: 2px;
  transition: background .15s, color .15s;
}
.qb-tag-n { font-size: 11px; opacity: 0.6; }

.qb-tag:hover { background: var(--blue-pale-2); }

.qb-tag[aria-pressed="true"] { background: var(--blue); color: var(--paper); }
.qb-tag[aria-pressed="true"] .qb-tag-n { opacity: 0.75; }

/* 고른 질문 */
.qb-result { padding-bottom: clamp(72px, 10vw, 128px); }
.qb-hint { padding: clamp(40px, 6vw, 72px) 0; font-size: 15px; }

.qb-question { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); }
.qb-question h2 {
  margin-top: 12px; max-width: 26ch;
  font-size: clamp(22px, 3.4vw, 34px); line-height: 1.35; letter-spacing: -0.026em;
}

.qb-group + .qb-group { margin-top: clamp(36px, 5vw, 52px); }
.qb-group-title {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 15px; font-weight: 500;
}

.qb-item { border-bottom: 1px solid var(--rule); }
.qb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px 16px; align-items: baseline;
  padding: 12px 10px 12px 0;
}
a.qb-row:hover { background: var(--wash); }
a.qb-row:hover .qb-title { text-decoration: underline; text-underline-offset: 3px; }

.qb-title { font-size: 15px; line-height: 1.5; letter-spacing: -0.015em; }
.qb-kind {
  font-size: 11px; padding: 2px 7px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px currentColor; opacity: 0.75;
}
.qb-arrow { font-size: 12px; }
.qb-meta { font-size: 12.5px; text-align: right; white-space: nowrap; }

/* 4-5-1) 지금(Now) — 프로젝트 카드 ---------------------------------------- */

.now-section { padding-bottom: clamp(72px, 10vw, 128px); }

/* 공연 / 프로젝트 — 선 없이 소제목과 여백으로만 나눕니다 (홈 궤적의 선은 그대로) */
.now-group + .now-group { margin-top: clamp(64px, 8vw, 96px); }

.now-group .home-sec-head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 4px;
}
/* 페이지 제목(h1)보다 약하고, 항목 제목과도 구별되는 라벨 */
.now-group .home-sec-head h2 {
  font-size: 12px;
  font-weight: var(--w-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.7;
}
.now-group .home-sec-head .section-num { opacity: 0.7; }

.now-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 28px);
  padding-top: clamp(24px, 3vw, 34px);
  align-items: start;
}

.now-card { display: block; }

.now-cover {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: var(--wash);
  border: 1px solid var(--rule);
  overflow: hidden;
  margin-bottom: 14px;
}
.now-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 사진 없는 카드는 위에 가는 선만 두고 담백하게 */
.now-item { scroll-margin-top: 80px; }
.now-item.no-cover .now-card {
  border-top: 1px solid var(--rule-strong);
  padding-top: 14px;
}

.now-year { display: block; font-size: 12px; letter-spacing: 0.04em; }
.now-title {
  display: inline; margin-top: 5px;
  font-size: clamp(16px, 1.9vw, 18px); line-height: 1.4; letter-spacing: -0.022em;
}
.now-year + .now-title { display: inline-block; margin-top: 5px; }
.now-arrow { font-size: 12px; margin-left: 5px; vertical-align: 2px; }
/* 작가·안무가 / 역할 — 공연은 두 줄, 프로젝트는 역할 한 줄 */
.now-credit { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; }
.now-credit + .now-credit { margin-top: 2px; }

a.now-card:hover .now-cover { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
a.now-card:hover .now-title { text-decoration: underline; text-underline-offset: 3px; }

.now-summary { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.6; }

.now-links { margin-top: 9px; }
.now-links a {
  font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px;
}
.now-links a:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

.now-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.now-tag {
  font-size: 11.5px; line-height: 1;
  padding: 6px 9px; border-radius: 2px;
  background: var(--blue-pale); color: var(--blue);
}
.now-tag:hover { background: var(--blue); color: var(--paper); }

/* 4-6) 개별 프로젝트 페이지 ---------------------------------------------- */

.project { padding-bottom: clamp(72px, 10vw, 128px); }

.pj-head { padding: var(--page-top) 0 var(--page-bottom); }
.pj-back { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pj-eyebrow {
  margin-top: 26px;
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
}
.pj-head h1 {
  margin-top: 12px;
  font-size: clamp(28px, 5vw, 48px); line-height: 1.15; letter-spacing: -0.03em;
}
.pj-credit { margin-top: 12px; font-size: 14px; }

.pj-hero { margin: 0 0 clamp(28px, 4vw, 44px); }
.pj-hero img { width: 100%; border: 1px solid var(--rule); }
.pj-hero figcaption { margin-top: 8px; font-size: 12.5px; }

.pj-section { margin-top: clamp(40px, 6vw, 64px); }

.pj-label {
  font-size: 12px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase;
  padding-bottom: 8px; margin-bottom: 20px;
  border-bottom: 1px solid var(--rule-strong);
}

.pj-body { max-width: 64ch; font-size: clamp(15.5px, 1.8vw, 16.5px); line-height: 1.9; }
.pj-body p + p { margin-top: 1.2em; }

.pj-work + .pj-work { margin-top: 1.1em; }
.pj-work-title { margin: 0; }
.pj-work-link { margin: 2px 0 0; font-size: 12px; opacity: 0.7; }
.pj-work-link a { text-decoration: underline; text-underline-offset: 3px; }
.pj-work-link a:hover { background: var(--blue); color: var(--paper); text-decoration: none; }
.pj-body .pj-work + p { margin-top: 1.2em; }

/* 연혁 — 연도 · 개최지 */
.pj-timeline { font-size: 15px; }
.pj-timeline li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 3px 20px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.pj-timeline li:first-child { border-top: 1px solid var(--rule); }
.pj-tl-year { font-size: 13px; }
.pj-tl-place { font-size: 14px; }

.pj-parts { font-size: 15px; line-height: 2; }
.pj-aff { font-size: 13px; opacity: 0.6; }

.pj-video { position: relative; padding-top: 56.25%; border: 1px solid var(--rule); }
.pj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 임베드가 막힌 곳(내 컴퓨터에서 파일로 열었을 때)에서 쓰는 썸네일 링크 */
.pj-video-link {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  background: var(--wash);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.pj-video-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--paper); color: var(--blue);
  font-size: 15px; padding: 10px 18px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  white-space: nowrap;
}
.pj-video-link:hover .pj-play { background: var(--blue); color: var(--paper); box-shadow: none; }

.pj-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pj-links a {
  font-size: 15px;
  border-bottom: 1px solid var(--blue); padding-bottom: 2px;
}
.pj-links a::after { content: " ↗"; font-size: 12px; }
.pj-links a:hover { background: var(--blue); color: var(--paper); }

/* 사진 격자 */
.pj-gal {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.pj-gal button { display: block; width: 100%; }
.pj-gal img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--rule);
}
.pj-gal button:hover img { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

/* 역할 한 줄 */
.pj-role { margin-top: 6px; font-size: 14px; }
.pj-role-label {
  font-size: 10.5px; opacity: 0.55; letter-spacing: 0.06em;
  margin-right: 8px; text-transform: uppercase;
}

/* 사진 — 접히는 슬라이드 */
.pj-photos-toggle {
  display: flex; align-items: baseline; gap: 6px;
  width: 100%; padding: 12px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  font-size: 13px; text-align: left;
}
.pj-photos-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.pj-toggle-mark { margin-left: auto; }

.pj-slides-wrap { margin-top: 16px; }
.pj-slides-wrap[hidden] { display: none; }

.pj-slides {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pj-slides::-webkit-scrollbar { display: none; }
.pj-slides > li { flex: 0 0 100%; scroll-snap-align: start; }
.pj-slides button { display: block; width: 100%; }
.pj-slides img {
  width: 100%; max-height: 64vh; object-fit: contain;
  background: var(--wash); border: 1px solid var(--rule);
}

.pj-slide-bar {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px;
}
.pj-slide-nav {
  width: 34px; height: 34px; font-size: 15px; line-height: 1;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.pj-slide-nav:hover { background: var(--blue); color: var(--paper); }
.pj-slide-count { font-size: 12.5px; }

/* 사진 출처 — 사진 영역 맨 아래 */
.pj-photo-credit { margin-top: 14px; font-size: 11px; opacity: 0.55; line-height: 1.5; }

/* 상세 페이지 2단 — 왼쪽 글 40% / 오른쪽 미디어 60% */
.pj-split {
  display: grid; grid-template-columns: 40fr 60fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.pj-col-right { padding-top: clamp(32px, 5vw, 72px); }

/* 미디어 격자 — 4칸, span 만큼 차지 */
.pj-media { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pj-media li { grid-column: span 1; }
.pj-media li[data-span="2"] { grid-column: span 2; }
.pj-media li[data-span="3"] { grid-column: span 3; }
.pj-media li[data-span="4"] { grid-column: span 4; }
.pj-media img { width: 100%; border: 1px solid var(--rule); }
.pj-media-cap { display: block; margin-top: 7px; font-size: 12px; }

.pj-media-video {
  position: relative; display: block;
  aspect-ratio: 16 / 9; background: var(--wash); border: 1px solid var(--rule);
}
.pj-media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pj-media-video.is-link { display: flex; align-items: center; justify-content: center; }

/* 영상 — 누르기 전에는 썸네일과 재생 버튼만 (facade) */
.pj-video-facade {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--rule); background: var(--wash);
}
.pj-video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pj-video-facade .pj-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--paper); color: var(--blue);
  font-size: 15px; line-height: 1; padding: 12px 16px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.pj-video-facade:hover .pj-play { background: var(--blue); color: var(--paper); box-shadow: none; }

/* 포스터 — 여러 장을 나란히 */
.pj-posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pj-posters img { width: 100%; border: 1px solid var(--rule); }
.pj-poster-cap { display: block; margin-top: 7px; font-size: 12px; }

/* 공연 회차 */
.pj-runs { font-size: 15px; }
.pj-runs li {
  display: grid; grid-template-columns: 160px 90px minmax(0, 1fr);
  gap: 4px 20px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.pj-runs li:first-child { border-top: 1px solid var(--rule); }
.pj-run-time { font-size: 14px; }
.pj-run-venue { font-size: 14px; }
.pj-run-note { margin-top: 12px; font-size: 13px; opacity: 0.7; }

/* 접어 두는 글 */
.pj-note summary {
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule-strong);
  cursor: pointer; list-style: none;
}
.pj-note summary::-webkit-details-marker { display: none; }
.pj-note summary::after { content: " +"; }
.pj-note[open] summary::after { content: " −"; }
.pj-note summary:hover { color: var(--blue-strong); }
.pj-note .pj-body { margin-top: 20px; }

/* 크레딧 */
.pj-credits { display: grid; gap: 12px; }
.pj-credit-role {
  display: block; font-size: 10.5px; opacity: 0.55;
  letter-spacing: 0.06em; line-height: 1.4;
}
.pj-credit-name { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; }

.pj-support { font-size: 14px; line-height: 1.7; max-width: 60ch; }

/* 연도별 블록 */
.pj-edition + .pj-edition { margin-top: clamp(40px, 5vw, 64px); }
.pj-edition-title {
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  padding-bottom: 8px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rule-strong);
}
.pj-edition .pj-photos { margin-top: 16px; }

.pj-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-tags .qb-tag:hover { background: var(--blue); color: var(--paper); }

/* 4-7) 색 반전 — <body data-theme="invert"> 인 페이지에만 -----------------
   토큰만 뒤집으면 배경·글자·구분선이 한꺼번에 반전됩니다.
   (지금은 '질문으로 보기' 페이지에서만 씁니다.)                           */

body[data-theme="invert"] {
  --blue:        #FFFFFF;                    /* 모든 글자 */
  --paper:       #1668E0;                    /* 배경 */
  --rule:        rgba(255, 255, 255, 0.22);  /* 행 구분선 */
  --rule-strong: rgba(255, 255, 255, 0.28);  /* 헤더·구획선 */
  --wash:        rgba(255, 255, 255, 0.10);
  --blue-pale:   rgba(255, 255, 255, 0.16);  /* 태그 바탕 */
  --blue-pale-2: rgba(255, 255, 255, 0.28);  /* 태그 hover */
  --accent:      #CCFF00;                    /* 켜진 태그 (형광 연두) */

  min-height: 100vh;
  background-color: #1668E0;
  background-image: none;          /* 이 페이지는 깔끔한 단색 반전 */
  color: #FFFFFF;
}
body[data-theme="invert"] .site-header,
body[data-theme="invert"] .nav { background-image: none; }
body[data-theme="invert"] img { border-color: rgba(255, 255, 255, 0.18); }

/* 태그 — 각진 네모, 켜지면 오렌지 */
body[data-theme="invert"] .qb-tag { border-radius: 0; }
body[data-theme="invert"] .qb-tag[aria-pressed="true"] {
  background: var(--accent); color: #1668E0;
}

/* 링크인 행만 흰 밑줄 (반투명) */
body[data-theme="invert"] a.qb-row .qb-title {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}
body[data-theme="invert"] a.qb-row:hover .qb-title { text-decoration-color: #FFFFFF; }

/* 헤더의 언어 선택 — 흰 덩어리가 생기지 않게 밑줄로 */
/* 파란 배경 — 고른 쪽 흰색, 나머지는 흰색을 흐리게 */
body[data-theme="invert"] .lang button { color: #FFFFFF; opacity: 0.5; }
body[data-theme="invert"] .lang button[aria-pressed="true"] {
  background: transparent; color: #FFFFFF; opacity: 1;
  text-decoration: underline; text-underline-offset: 3px;
}

/* 페이지 맨 아래의 작은 개수 표시 */
.page-count {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: 11px; opacity: 0.55; letter-spacing: 0.02em;
}

/* 기록 — 지금 걸린 시기 필터 */
.cat-filter {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin-top: 20px;
}
.cat-filter[hidden] { display: none; }
.cat-filter-label {
  font-size: 13px; padding: 5px 12px;
  background: var(--blue); color: var(--paper);
}
.cat-filter-clear {
  font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
.cat-filter-clear:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

/* 홈 궤적 — 펼친 설명 아래의 기록 링크 */
.traj-more { grid-column: 2; margin-top: 4px; }
.traj-more a {
  font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
.traj-more a:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

/* 4-8) 가로 스크롤 포토북 ----------------------------------------------
   사진만 왼쪽에서 오른쪽으로. 글자는 맨 끝 돌아가기 링크 하나뿐입니다.   */

body.book { overflow: hidden; }

.photobook {
  display: flex; align-items: center; gap: 60px;
  padding: 0 60px;
  height: calc(100vh - 56px);          /* 상단 메뉴를 뺀 한 화면 */
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.photobook::-webkit-scrollbar { display: none; }

.photobook img {
  flex: 0 0 auto;
  height: 80vh; width: auto; max-width: none;
  border: 1px solid rgba(22, 104, 224, 0.08);
}

/* 페이지 상자 — 데스크톱에서는 없는 셈 치고 사진만 한 줄로 흐릅니다 */
.pb-page { display: contents; }

/* 모바일 진행 표시 (몇 / 98) — 데스크톱에서는 감춤 */
.pb-count { display: none; }

/* 줄의 맨 끝 — 돌아가기 링크 */
.pb-end { flex: 0 0 auto; padding-right: 20px; }
.pb-back { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pb-back:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

/* 진행 막대 — 2px, 숫자 없음 */
.pb-progress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(22, 104, 224, 0.14); z-index: 60;
}
.pb-progress span { display: block; height: 100%; width: 0; background: var(--blue); }

/* 포토북에서는 상단 메뉴를 로고와 KO/EN 만 */
body[data-chrome="min"] .nav,
body[data-chrome="min"] .nav-toggle { display: none; }

@media (max-width: 760px) {
  .photobook { height: calc(100vh - 52px); gap: 40px; padding: 0 40px; }
  .photobook img { height: 70vh; }
}

/* 4-9) 공용 아코디언 — 궤적 · 접기 글 · 크레딧이 함께 씁니다 ----------- */

.acc-head {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  padding-bottom: 8px; margin-bottom: 0;
  border-bottom: 1px solid var(--rule-strong);
}
.acc-head:hover { text-decoration: underline; text-underline-offset: 3px; }
.acc-mark { margin-left: auto; }

.acc-panel { display: none; padding-top: 18px; }
.acc[data-open="true"] > .acc-panel { display: block; }

.pj-label-inline {
  font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
}

/* 5) 필터 ---------------------------------------------------------------- */

.filters {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--rule-strong);
}

.filter-group {
  display: grid; grid-template-columns: var(--gutter) 1fr; gap: var(--col-gap);
  align-items: baseline;
}
.filter-options { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.filter {
  font-size: 14px; padding: 1px 6px;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.filter:hover { text-decoration: underline; }
.filter[aria-pressed="true"] {
  background: var(--blue); color: var(--paper); font-weight: 500; text-decoration: none;
}

.filter-status { font-size: 13px; }

/* 6) 펼침 상세 — 항목을 누르면 이미지 중심으로 열립니다 ------------------ */

.index-detail { display: none; }
.index-item[data-open="true"] .index-detail { display: block; }

.detail-inner {
  display: grid; grid-template-columns: var(--gutter) 1fr;
  gap: 26px var(--col-gap);
  padding: 26px 0 44px;
}
.detail-label { padding-top: 3px; }       /* 왼쪽 열의 작은 라벨 */
.detail-body { max-width: 62ch; font-size: 15.5px; }
.detail-body p + p { margin-top: 1em; }

/* 펼쳤을 때의 질문 목록 */
.qset { display: grid; gap: 11px; max-width: 54ch; }
.qset li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  font-size: clamp(15px, 1.8vw, 17.5px); line-height: 1.5; letter-spacing: -0.02em;
}

.detail-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.detail-links a { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.detail-links a:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

.detail-media { margin-top: 32px; display: grid; gap: 28px; grid-column: 1 / -1; }
.detail-media figure { margin: 0; }
.detail-media figcaption { margin-top: 8px; font-size: 12.5px; }
.detail-media .ratio-16x9 { position: relative; padding-top: 56.25%; background: var(--wash); }
.detail-media .ratio-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 7) 홈 ------------------------------------------------------------------ */

/* 홈 — 한 화면에 들어오는 좌우 2단 -------------------------------------- */

.home-inner {
  padding: 0 var(--pad);
  min-height: calc(100vh - 56px);        /* 상단 메뉴 높이를 뺀 한 화면 */
  display: flex; flex-direction: column; justify-content: center;
}

/* 히어로 — 2열 그리드. 왼쪽 요소 크기가 바뀌어도 정렬이 따라오도록
   여백 값이 아니라 '행'과 '기준선'으로 맞춥니다.
     1행 : 왼쪽 이름 / 오른쪽 비움
     2행 : 왼쪽 '이동하는 사람 …' / 오른쪽 '01 궤적' 블록 */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;          /* 두 열 사이만 좁혀 궤적 열을 왼쪽으로 */
  row-gap: 0;
  align-items: baseline;     /* 같은 행의 첫 글자 기준선을 맞춥니다 */
}
.home-name-cell { grid-column: 1; grid-row: 1; }
.home-left      { grid-column: 1; grid-row: 2; }
.home-right     { grid-column: 2; grid-row: 2; }

/* 홈에서는 상단 메뉴의 작은 로고를 감춥니다 (바로 아래 큰 로고가 있어서) */
/* 로고는 모든 페이지에서 같은 자리·같은 크기로 보입니다 (홈 예외 없음) */

.home-logo img { width: 32px; height: auto; display: block; }

/* 이름 묶음 — .page-head 규칙을 그대로 씁니다 (크기·굵기는 거기서 한 번만 정의).
   홈은 세로 가운데 정렬이라 위 여백만 없앱니다. */
.home-name-cell h1 {
  font-size: 1rem; line-height: 1.65; letter-spacing: -0.011em;
  font-weight: var(--w-title);       /* 다른 페이지 제목과 같은 값 */
}
.home-kicker {
  margin-top: var(--page-title-gap);
  max-width: 60ch;
  font-size: 1rem; line-height: 1.65; font-weight: var(--w-body);
}

.home-intro {
  margin-top: clamp(16px, 2.6vh, 26px);   /* 이름 묶음과 한 칸 */
  font-size: clamp(15px, 2.05vh, 19px); line-height: 1.95; letter-spacing: -0.018em;
}

.home-photo { margin: clamp(16px, 3vh, 36px) 0 0; }
.home-photo img {
  max-height: 46vh; width: auto; max-width: 370px; display: block;
}

/* 오른쪽 — 궤적. '01 궤적'이 왼쪽 '이동하는 사람…' 줄과 같은 라인에 오도록 */
/* 세로 위치는 그리드 행 + 기준선 정렬이 담당합니다 (여백 값 없음) */

.home-sec-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
}
.home-sec-head h2 { font-size: 15px; }
.home-all { margin-left: auto; font-size: 13px; white-space: nowrap; }
.home-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.home-traj { border-top: 0; }

/* 계단형 — 아래로 갈수록 안쪽으로 들여씁니다 */
.home-traj .index-item { width: 74%; }
.home-traj .index-item:nth-child(1) { margin-left: 0; }
.home-traj .index-item:nth-child(2) { margin-left: 8%; }
.home-traj .index-item:nth-child(3) { margin-left: 16%; }
.home-traj .index-item:nth-child(4) { margin-left: 24%; }

/* 연도 위, 제목 아래 2단 쌓기 + 오른쪽 끝에 + */
.home-traj .index-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: clamp(8px, 1.6vh, 15px) 0;
}
.home-traj .index-lead {
  grid-column: 1 / -1; padding-top: 0;
  font-size: 11.5px; opacity: 0.7; letter-spacing: 0.03em;
}
.home-traj .index-title {
  font-size: clamp(17px, 1.5vw, 23px); line-height: 1.3;
}
.home-traj .index-tail { padding-top: 0; align-self: center; }
.home-traj .index-sub, .home-traj .keys { display: none; }   /* 펼치면 질문이 나옵니다 */
.home-traj .detail-inner { padding: 14px 0 22px; gap: 14px var(--col-gap); }
.home-traj .qset li { font-size: clamp(13px, 1.7vh, 15px); }

.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 7vw, 96px); }

/* 비대칭 — 왼쪽 글 / 오른쪽 세로 사진. 사진 열은 사진 폭만큼만 차지합니다. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.hero-text { max-width: 52ch; }

/* 맨 윗줄 — 이름만 굵게 */
.hero-kicker {
  font-size: clamp(13px, 1.4vw, 15px); font-weight: 400;
  line-height: 1.55; letter-spacing: -0.005em;
}
.hero-kicker strong { font-weight: 600; }

.hero-lead {
  margin-top: clamp(22px, 3vw, 32px);
  max-width: 28ch;
  font-size: clamp(20px, 2.5vw, 28px); line-height: 1.4; letter-spacing: -0.026em;
}
.hero-note {
  margin-top: 18px; max-width: 44ch;
  font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.75;
}
.hero-role { margin-top: 22px; font-size: clamp(14px, 1.5vw, 15.5px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; }

/* 사진 — 잘리지 않게 전체가 보이도록 */
.hero-figure { margin: 0; justify-self: end; }
.hero-figure img {
  /* 높이로 크기를 정하고 폭은 비율대로 — 세로 사진이 열을 밀어내지 않게 */
  height: min(78vh, 820px);
  width: auto; max-width: min(100%, 40vw);
  object-fit: contain;
}
.hero-figure figcaption { margin-top: 10px; font-size: 12.5px; letter-spacing: 0.01em; }

/* 텍스트 링크 — 평소엔 밑줄, 손을 올리면 채움 */
.tlink {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 15px; padding: 0 4px; margin: 0 -4px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.tlink:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

.section { padding: 0 0 clamp(56px, 8vw, 104px); }

.section-head {
  display: grid; grid-template-columns: var(--gutter) 1fr; gap: 0 var(--col-gap);
  padding-top: clamp(40px, 6vw, 72px);
  margin-bottom: 28px;
}
.section-num { grid-column: 1; }
.section-head h2 { grid-column: 2; font-size: clamp(17px, 2vw, 20px); }
.section-note { grid-column: 2; margin-top: 10px; max-width: 56ch; font-size: 15px; }

.intro-text {
  display: grid; grid-template-columns: var(--gutter) 1fr; gap: 0 var(--col-gap);
}
.intro-text > * { grid-column: 2; }
.intro-text p { max-width: 58ch; font-size: clamp(16px, 1.9vw, 18px); }
.intro-text .tlink { margin-top: 26px; justify-self: start; }

/* 질문 목록 — 번호 + 질문 전문 */
.qlist { border-top: 1px solid var(--rule-strong); }
.qlist a {
  display: grid; grid-template-columns: var(--gutter) 1fr; gap: var(--col-gap);
  align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
.qlist a:hover .qtext { text-decoration: underline; text-underline-offset: 4px; }
.qtext { font-size: clamp(16px, 1.9vw, 19px); letter-spacing: -0.02em; max-width: 52ch; }

/* 7-1) 소개(About) — 본문과 연결 ---------------------------------------- */

.about-section { padding-bottom: clamp(72px, 10vw, 128px); }

/* 본문 — 여러 단으로 흘려 한 화면에 담습니다 */
.prose {
  column-count: 4;
  column-gap: 48px;
  column-fill: balance;
  font-size: 15px;
  line-height: 1.85;
}
.prose p {
  break-inside: avoid;             /* 문단이 단 사이에서 잘리지 않게 */
  margin: 0 0 1.4em;
  /* 한글은 어절 단위로 끊고, 그래도 안 되는 긴 덩어리만 강제로 끊습니다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 한 화면을 넘으면 js/about.js 가 이 상태로 한 단계 줄입니다 */
.prose.is-tight { font-size: 14px; line-height: 1.75; }

/* 글 속 링크 — 밑줄, 손을 올리면 채움 */
.inline-link {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  padding: 0 2px; margin: 0 -2px;
}
.inline-link:hover { background: var(--blue); color: var(--paper); text-decoration: none; }

/* 연결 — 본문과 넉넉히 떼고, 사이에 얇은 선 하나 */
.links-block {
  margin-top: clamp(64px, 9vw, 104px);
  padding-top: clamp(32px, 4.5vw, 44px);
  border-top: 1px solid var(--rule);
}
.links-head {
  font-size: 12px; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 18px;
}

/* 본문보다 한 단계 작게 */
/* 한 줄에 하나씩 세로로 쌓습니다 (데스크톱·모바일 동일) */
.links-list {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
  font-size: clamp(13.5px, 1.5vw, 14.5px); line-height: 1.7;
}
.links-row { padding: 0; }
.links-dash { padding: 0 2px; }
.link-sep { padding: 0 2px; }

@media (max-width: 1200px) { .prose { column-count: 3; column-gap: 40px; } }
@media (max-width: 900px)  { .prose { column-count: 2; column-gap: 34px; } }
@media (max-width: 760px)  { .prose { column-count: 1; } }

/* 8) 페이지 머리 (하위 페이지 공용) -------------------------------------- */

.page-head { padding: var(--page-top) 0 var(--page-bottom); }

/* 제목 — 본문과 같은 크기·자간·행간, 굵기만 다르게 */
.page-head h1 {
  font-size: 1rem;                 /* body 와 동일 (16px) */
  line-height: 1.65;
  letter-spacing: -0.011em;
  font-weight: var(--w-title);     /* Wanted Sans 600 */
}

/* 한 줄 설명 — 굵기 없이 본문 그대로, 제목과 바짝 붙여 한 덩어리로 */
.page-head .page-sub {
  margin-top: var(--page-title-gap);
  max-width: 52ch;
  font-size: 1rem; line-height: 1.65; font-weight: var(--w-body);
}
.page-head .page-count, .page-head .archive-count { margin-top: 12px; }

.placeholder {
  padding: 40px 0 clamp(72px, 10vw, 128px);
  border-top: 1px solid var(--rule-strong);
  font-size: 15px;
}
.placeholder strong { display: block; font-weight: 500; margin-bottom: 4px; }

/* 9) 푸터 ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule-strong);
  padding: 28px 0 56px;
  font-size: 13px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 10) 반응형 ------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --gutter: 88px; --col-gap: 22px; }
  .nav { gap: 18px; }
  .nav a { font-size: 13.5px; }
}

/* 홈 — 760px 이하에서는 한 단으로: 로고 → 이름 → 소개 → 사진 → 궤적 */
@media (max-width: 760px) {
  :root { --pad: 20px; }

  .home-inner {
    min-height: 0; padding: 36px 0 56px;
    display: block;
  }
  .home-grid { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .home-name-cell, .home-left, .home-right { grid-column: 1; grid-row: auto; }
  .home-name-cell { padding: 0 var(--pad); }

  .home-left, .home-right { padding: 0 var(--pad); }

  .home-photo { margin: 36px 0 40px; }
  .home-photo img { width: 90%; max-width: none; max-height: none; }

  .home-right { padding-top: 0; }
  .home-traj .index-item { width: 100%; margin-left: 0 !important; }
  .home-traj .index-row { padding: 13px 0; }
  .home-traj .index-title { font-size: 17px; }
}

@media (max-width: 760px) {
  .doc-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
}

@media (max-width: 900px) {
  /* 위 → 아래로: 글, 그다음 사진 */
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-figure { justify-self: start; }
  .hero-figure img { height: min(62vh, 560px); max-width: 100%; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  .header-inner { gap: 16px; }

  /* 메뉴 = 전체 화면 오버레이 (HTML 은 하나만 씁니다) */
  /* 항목 목록은 가운데가 아니라 위쪽에서 시작합니다.
     padding-top 이 첫 항목의 시작 높이를 정합니다 (화면 세로의 19%).
     항목 사이 간격(gap)과 글자 크기는 그대로입니다. */
  .nav {
    display: none;
    position: fixed; inset: 0; z-index: 80;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    /* 로고가 목록의 첫 행이므로, 점부터 화면 세로 19% 에서 시작합니다. */
    gap: 0; padding: 19vh var(--pad) 40px;
    overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav-close { display: flex; }

  .nav a {
    font-size: 24px; line-height: 1.2; letter-spacing: -0.02em;
    min-height: 44px; display: flex; align-items: center;
    padding: 6px 0;
  }
  .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

  /* 아래 메뉴는 위 메뉴와 겹치므로 연락처·저작권만 남깁니다 */
  .footer-nav a:not([rel="noopener"]) { display: none; }
}

@media (max-width: 760px) {
  :root { --gutter: 0px; --col-gap: 0px; }


  .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pj-posters { grid-template-columns: 1fr; gap: 20px; }

  /* 상세 페이지 — 한 단으로, 격자는 2칸 */
  .pj-split { grid-template-columns: 1fr; gap: 32px; }
  .pj-col-right { padding-top: 0; }
  .pj-media { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pj-media li[data-span="2"],
  .pj-media li[data-span="3"],
  .pj-media li[data-span="4"] { grid-column: 1 / -1; }
  .pj-runs li { grid-template-columns: 1fr; gap: 2px; }
  .pj-timeline li { grid-template-columns: 1fr; gap: 2px; }
  .pj-credits li { grid-template-columns: 1fr; gap: 1px; }
  .now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 질문으로 보기 — 제목 아래로 정보가 접힘 */
  .qb-cloud { gap: 8px; }
  .qb-tag { height: 36px; padding: 0 14px; font-size: 14px; }
  .qb-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
  .qb-meta { grid-column: 1 / -1; text-align: left; white-space: normal; }

  .lb-bar { padding: 12px 20px; }
  .lb-stage { padding: 12px 10px 20px; gap: 6px; }
  .lb-nav { width: 38px; height: 38px; }

  /* 왼쪽 열이 사라지고 위→아래로 접힙니다 */
  .index-row { grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; }
  .index-lead { grid-column: 1 / -1; padding-top: 0; }
  .index-tail { grid-column: 1 / -1; text-align: left; padding-top: 8px; }
  .index-item[data-open="true"] > .index-row { padding: 18px 12px; }

  .section-head, .intro-text, .filter-group, .detail-inner, .qlist a {
    grid-template-columns: 1fr;
  }
  .section-num { margin-bottom: 8px; }
  .section-head h2, .section-note, .intro-text > *, .qlist a > * { grid-column: 1; }
  /* 카탈로그 표 — 모바일에서는 컬럼 이름 줄을 감춥니다 */
  .cat { border-top: 1px solid var(--rule-strong); }

  /* 글 목록 — 날짜·매체가 위, 제목이 아래 */
  .wr-head { display: none; }
  .wr { border-top: 1px solid var(--rule-strong); }
  .wr-row { grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; padding: 14px 0; }
  .wr-date { grid-column: 1; }
  .wr-media { grid-column: 2; font-size: 12.5px; }
  .wr-title-cell { grid-column: 1 / -1; }

  .filter-group { gap: 6px; }
  .qlist a { gap: 4px; }
  .detail-inner { gap: 8px; padding-bottom: 36px; }
  .detail-label { padding-top: 14px; }
  .qset li { grid-template-columns: 22px 1fr; gap: 8px; }

  .hero-lead { max-width: none; }
}

/* ==========================================================================
   모바일 전용 (760px 이하) — 데스크톱은 건드리지 않습니다
   ========================================================================== */

@media (max-width: 760px) {

  /* 1) 조판 조이기 --------------------------------------------------- */
  body { line-height: 1.6; }
  .prose, .prose p, .pj-body, .read-body, .detail-body,
  .home-intro, .page-sub, .section-note, .index-sub, .qb-question h2 { line-height: 1.6; }

  /* 문단 사이 */
  .prose p, .pj-body p + p, .read-body p + p, .detail-body p + p { margin-top: 1em; }
  .prose p { margin: 0 0 1em; }

  /* 목록 각 행 — 손가락으로 누를 수 있게 넉넉히.
     연결(.links-row)은 제외합니다. 데스크톱과 같은 6px 간격을 써야 해서,
     여기에 두면 모바일에서만 8px 씩 더 벌어집니다. */
  .index-row, .cat-row, .wr-row, .qb-row,
  .pj-timeline li, .pj-runs li, .pj-credits li, .qlist a { padding: 8px 0; }
  .index-item[data-open="true"] > .index-row { padding: 8px 12px; }

  /* 섹션 제목 — 위 28px / 아래 14px */
  .pj-label, .qb-group-title,
  .links-head, .home-sec-head, .pj-edition-title {
    margin-top: 28px; margin-bottom: 14px; padding-bottom: 8px;
  }
  .section-head { padding-top: 28px; margin-bottom: 14px; }
  .cat-group { padding-top: 28px; }
  .qb-group + .qb-group, .pj-section { margin-top: 28px; }
  .now-group + .now-group { margin-top: 48px; }

  /* 2) 궤적 — 펼친 내용: 대표 활동 · 질문이 위, 설명은 아래 ---------- */
  .home-traj .index-detail .is-mobile { display: block; }
  .home-traj .detail-inner {
    display: block;                    /* 라벨과 내용의 왼쪽 시작선을 하나로 */
  }
  .home-traj .detail-label { display: block; padding-top: 0; margin-bottom: 4px; }
  .home-traj .detail-body,
  .home-traj .qset { margin: 0 0 10px; max-width: none; }

  /* 3) 궤적 — 펼친 영역 세로 폭 절반 -------------------------------- */
  .home-traj .detail-inner { padding: 7px 0 11px; }
  .home-traj .qset { gap: 5px; }
  .home-traj .traj-more { margin-top: 2px; }

  /* 4) 지금 — 한 줄에 카드 하나, 태그는 상세 페이지에서만 ----------- */
  .now-grid { grid-template-columns: 1fr; }
  .now-tags { display: none; }

  /* 5) 기록 — 연도 열을 없애고 코드에 연도를 합쳐서 (AF2020) --------
     열 정의는 위의 --cat-cols 변수만 바꿉니다 (헤더·행이 함께 따라옵니다). */
  :root { --cat-cols: auto minmax(0, 1fr); }
  .cat-row { gap: 14px; }

  .cat-code, .cat-year { display: none; }   /* 데스크톱용 셀은 감춤 */
  .cat-code-m { display: inline; }          /* 병합 코드만 표시 */
  .is-mobile { display: block; }            /* 궤적 펼침의 설명 등 */

  /* 6) 포토북 — 한 화면 = 한 페이지, 가로로 넘김 --------------------- */
  body.book { overflow: hidden; }

  .photobook {
    display: flex; align-items: stretch; gap: 0;
    padding: 0;
    height: 100svh; height: 100dvh;     /* 주소창 때문에 vh 는 쓰지 않습니다 */
    scroll-snap-type: x mandatory;
    touch-action: pan-x;                /* 가장자리 스와이프를 이 영역이 받도록 */
    overscroll-behavior-x: contain;
  }

  .pb-page {
    display: grid;
    grid-template-rows: 1fr;              /* 세로 사진 단독 페이지 */
    row-gap: var(--pb-gap);
    flex: 0 0 100%; width: 100%; height: 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    padding: var(--pb-pad-y) var(--pb-pad-x);
  }
  /* 가로 사진 두 장 — 남는 높이를 정확히 반씩 나눠 갖습니다 */
  .pb-page[data-n="2"] { grid-template-rows: 1fr 1fr; }

  .pb-page img {
    width: 100%; height: 100%;
    min-height: 0; min-width: 0;
    object-fit: contain;                  /* 비율이 달라도 잘리지 않습니다 */
    border: 0;
  }

  .pb-end { padding: 0 var(--pad); }
  .pb-progress { display: none; }

  /* 몇 / 98 — 방해되지 않는 작은 파란 글씨 */
  .pb-count {
    display: block; position: fixed; left: 0; right: 0; bottom: 8px;
    text-align: center; font-size: 10.5px; opacity: 0.6; color: var(--blue);
  }
}

/* ==========================================================================
   모바일 전용 추가 (760px 이하)
   ========================================================================== */

@media (max-width: 760px) {

  /* B-1) 기록 — 카테고리는 선 없이 여백만으로 구분 --------------------- */
  .cat { border-top: 0; }
  .cat-group { padding-top: 44px; }        /* 이전 묶음과 넉넉히 */
  .cat-group:first-child { padding-top: 0; }
  .cat-group-title {
    border-top: 0; border-bottom: 0;
    margin-top: 0; padding-top: 0; padding-bottom: 0;
    margin-bottom: 6px;                    /* 첫 항목과는 바짝 */
  }

  /* B-2) 홈 소개 4줄 — 줄 간격을 하나로 ------------------------------- */
  .home-intro { line-height: 1.55; }
  .home-intro p { margin: 0; }
  .home-intro p + p { margin-top: 0; }

  /* B-3) 메뉴 오버레이 — 파란 바탕에 흰 글씨 --------------------------- */
  .nav[data-open="true"] {
    background-color: #1668E0;
    background-image: none;
    color: #FFFFFF;
  }
  .nav[data-open="true"] a { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, 0.28); }
  .nav[data-open="true"] a[aria-current="page"] { color: #CCFF00; }
  .nav[data-open="true"] .nav-close svg { stroke: #FFFFFF; }

  /* 오버레이 안의 로고 — 목록 바로 위에 놓습니다.
     절대배치를 풀어 메뉴 글자와 같은 흐름에 두면, 점의 왼쪽 끝이
     '지금/기록/…' 의 왼쪽 끝과 저절로 같은 선에 놓입니다
     (둘 다 .nav 의 콘텐츠 상자 왼쪽 = var(--pad) 에서 시작). */
  .nav-logo { display: none; }
  .nav[data-open="true"] .nav-logo {
    /* 메뉴 항목과 똑같은 '행' 으로 만듭니다 — 세로 여백(6px)과 행 높이(44px)를
       .nav a 와 같게 두면 점과 '지금' 사이 간격이 항목 사이 간격과 저절로 같아집니다. */
    display: flex; align-items: center;
    padding: 6px 0;
    min-height: 44px;
    line-height: 0;
    /* 점의 가로 '중심' 을 글자 왼쪽 끝에 맞춥니다 (지름 16px 의 절반). */
    margin-left: -8px;
  }

  /* B-4) 메뉴 배경 사진 — 색은 버리고 명암만 남아 파랑에 녹습니다 -------
     사진이 없어도(못 불러와도) 파란 바탕이 그대로라 글자는 늘 읽힙니다.  */
  .nav[data-open="true"] { position: fixed; inset: 0; overflow: hidden; }

  .menu-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    opacity: .5;
    border: 0;
    transition: opacity .5s ease;
  }
  .menu-bg:not([src]) { display: none; }
  .menu-bg[src*="walk-1"] { object-position: center 62%; }
  .menu-bg[src*="walk-2"] { object-position: center 55%; }
  .menu-bg[src*="walk-3"] { object-position: center 50%; }

  /* 글자 자리는 진하게, 인물이 있는 아래쪽은 열어 둡니다 */
  .nav[data-open="true"]::after {
    content: ""; position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(22, 104, 224, .62)   0%,
      rgba(22, 104, 224, .30)  55%,
      rgba(22, 104, 224, 0)   100%);
  }

  /* 글자·로고는 사진과 그러데이션보다 위 */
  .nav[data-open="true"] a,
  .nav[data-open="true"] .nav-logo { position: relative; z-index: 2; }

  /* 닫기(X)는 z-index 만 올립니다.
     여기에 position:relative 를 주면 위쪽의 absolute 를 덮어써서
     흐름 안으로 돌아가 왼쪽 열에 끼어듭니다. */
  .nav[data-open="true"] .nav-close { z-index: 2; }
}

/* 메뉴가 닫혀 있을 때는 사진을 아예 두지 않습니다 */
.nav:not([data-open="true"]) .menu-bg { display: none; }

/* 데스크톱에서는 사진 없이 지금처럼 파란 화면만 */
@media (min-width: 761px) {
  .menu-bg { display: none; }
}

/* ==========================================================================
   홈 — 소개를 합친 화면 (index.html)
   이름 · 한 줄 소개 · 산문 3단 · 연결 · 궤적 4열
   ========================================================================== */

.home { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }

/* 이름 — 본문 크기 볼드 (페이지 제목 규칙과 동일) */
.home-name {
  font-size: 1rem; font-weight: 600; line-height: 1.5;
  letter-spacing: -0.01em; margin: 0;
}
.home-name-en { margin-left: 0.6em; }

/* 이름 아래 한 줄 */
.home-line {
  font-size: 1rem; line-height: 1.6;
  margin: 0.35em 0 3rem;
}

/* 산문 — 3단. 문단이 단 경계에서 잘려도 됩니다. */
.home-prose {
  column-count: 3;
  column-gap: 2.5rem;
}
.home-prose p {
  break-inside: auto;          /* 단 경계에서 잘려도 됨 */
  orphans: 2;
  widows: 2;
  overflow-wrap: anywhere;
}

/* 연결 — 작은 글씨 */
.home-links {
  margin-top: clamp(40px, 6vw, 64px);
  font-size: 13px;
}

/* --- 궤적 — 가로 4열 + 아래 패널 하나 ---------------------------------- */
.traj { margin-top: clamp(56px, 8vw, 96px); }

.traj-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2.5rem;
}

.traj-col {
  display: block; width: 100%;
  text-align: left; background: none; border: 0; padding: 0 0 14px;
  cursor: pointer; color: inherit;
}
.traj-year {
  display: block;
  font-family: var(--font-meta); font-size: 13px;
  margin-bottom: 6px;
}
.traj-title {
  display: block;
  font-family: var(--font-title); font-weight: 600;
  font-size: 30px; line-height: 1.2; letter-spacing: -0.025em;
}
/* 형광펜 블록이 글자 폭만큼만 깔리도록 — 앞의 .traj-year 가 block 이라 줄은 나뉩니다 */
.traj-title { display: inline; }
/* 열린 시기 — 회색 바탕에서는 연두를 글자색으로 쓰지 않습니다(대비 1.2:1).
   글자는 파랑 그대로 두고 뒤에 형광펜처럼 연두 블록을 깝니다.
   글자 높이의 0.6배, 베이스라인 쪽에 붙입니다. */
.traj-col.is-open .traj-title,
.traj-col:hover .traj-title {
  color: var(--blue);
  background-image: linear-gradient(#CCFF00, #CCFF00);
  background-repeat: no-repeat;
  background-size: 100% 0.6em;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;   /* 두 줄로 접혀도 줄마다 칠해집니다 */
}

/* 패널 — 네 열 아래에 하나. 선 없이 바탕색만. */
.traj-panel {
  background: #EDEDEA;
  border: 0;
  margin-top: 4px;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
}
.traj-panel[hidden] { display: none; }

.traj-panel-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2.5rem;
}
.traj-label { display: block; margin-bottom: 8px; }
.traj-body {
  margin: 0; font-size: 14px; line-height: 1.75;
  word-break: keep-all; overflow-wrap: anywhere;
}
.traj-panel .qset { margin: 0; }
.traj-more { margin: 14px 0 0; font-size: 13px; }

/* --- 좁은 화면 — 4열을 1열로, 패널 속도 1단 ---------------------------- */
@media (max-width: 760px) {
  .home-prose { column-count: 1; }
  .home-line { margin-bottom: 2rem; }

  .traj-cols { grid-template-columns: 1fr; gap: 0; }
  .traj-col { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .traj-title { font-size: 24px; }

  .traj-panel-inner { grid-template-columns: 1fr; gap: 24px; }
}