/* 허브 공통 화면: 글꼴·색 토큰, 위쪽 줄, 분류 줄, 크게 보기, 아래 줄. 메뉴별 화면(design.css, photo.css)은 이 파일 다음에 읽는다.
   전시장: 아주 옅은 벽에 작품만 걸어 둔 느낌. 글자는 조용하게.
   벽 색(--wall)은 큰 메뉴마다 다르며 site-menu.js의 tone 값을 applyTone()이 넣는다. 아래 값은 Design 기본. */
:root {
  --wall: #f3f1ec;
  --ink: #23221f;
  --muted: #7d7b75;
  --faint: #a9a7a0;
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --gap: 40px;
  --side: clamp(14px, 4vw, 64px);
  /* 글꼴 두 가지만: 상단·메뉴·분류 등 길잡이는 고딕, 작품 제목·설명 등 콘텐츠는 명조 */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --serif: 'Nanum Myeongjo', 'AppleMyungjo', 'Noto Serif KR', serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 위쪽 줄(siteinspire식): 왼쪽 로고 · 바로 옆 큰 메뉴 · 오른쪽 끝 작은 링크(About, Contact). 아래 가는 선 하나. */
.site-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(28px, 4vw, 64px);
  max-width: 1760px; margin: 0 auto; padding: 22px var(--side);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: .22em; /* 이름이라 큰 메뉴(500)보다 굵게 */ text-decoration: none;
  color: var(--ink); white-space: nowrap;
}
.brand-mark { display: block; height: 24px; width: auto; flex: none; } /* 심볼: 눈은 빨강, 얼굴은 글자색(밝은 바탕에서 흰 얼굴이 사라지지 않게) */
.site-nav, .site-util {
  display: flex; gap: clamp(18px, 2.4vw, 34px); flex-wrap: nowrap; white-space: nowrap;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
}
.site-nav { font-weight: 600; gap: clamp(12px, 1.4vw, 20px); align-items: baseline; }
/* 큰 메뉴 사이 글자 구분자 |: 메뉴 글자보다 흐리고 가늘게, 양옆 여백은 위 gap(2026-10-07 사용자 요청) */
.site-nav .sep { color: var(--faint); font-weight: 300; letter-spacing: 0; user-select: none; } /* 큰 메뉴는 아래 분류 줄보다 한 단계 위로 보이게 조금 더 굵게(2026-10-07) */
.site-util { font-size: 12px; gap: 22px; }
.head-right { display: flex; align-items: center; gap: 22px; }
/* 돋보기 = 사이트 전체 검색(누르면 검색 화면이 열림, site-search.js) */
.search-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); transition: color .2s; }
.search-btn:hover { color: var(--ink); }
.search-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.site-nav a, .site-util a { text-decoration: none; color: var(--muted); transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current], .site-util a:hover { color: var(--ink); }
.site-nav .soon, .site-util .soon { color: var(--faint); cursor: default; }
.site-nav .soon small, .site-util .soon small { display: none; } /* '준비 중'은 흐린 글자로만 알리고 마우스를 올리면 title로 보임 */

main { max-width: 1760px; margin: 0 auto; padding: 0 var(--side); }

/* 분류·연도: 단추 대신 가운데 정렬 글자 링크 */
.filters {
  position: sticky; top: 0; z-index: 5;
  margin: 0 calc(var(--side) * -1); padding: 18px var(--side) 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px 40px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--wall) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.filters.stuck { border-bottom-color: var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.chip {
  border: 0; background: none; padding: 4px 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); transition: color .15s;
}
.chip small { display: inline-block; margin-left: 5px; font-size: 11px; letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.years .chip { font-size: 12.5px; }
.years .chip small { display: none; }

.status { color: var(--muted); font-size: 14px; padding: 80px 0; text-align: center; }
.status:empty { display: none; }


.site-foot {
  max-width: 1760px; margin: 0 auto; padding: 32px var(--side) 44px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); border-top: 1px solid var(--line);
}
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--muted); }

/* 크게 보기 */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--wall) 97%, transparent); color: var(--ink);
}
.viewer[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; }
.viewer::backdrop { background: color-mix(in srgb, var(--wall) 97%, transparent); }
.viewer-figure { margin: 0; height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 32px 0 0; }
.viewer-stage { min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; touch-action: pan-y pinch-zoom; }
.viewer-caption { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 18px 0 26px; min-height: 88px; }
.viewer-caption { font-family: var(--serif); }
.viewer-caption h2 { margin: 0; font-size: 18px; font-weight: 700; }
.viewer-caption p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 72ch; white-space: pre-line; }
.viewer-caption p:empty { display: none; }
#viewer-count { font-family: var(--sans); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-nav, .viewer-close { border: 0; background: none; color: var(--ink); cursor: pointer; opacity: .5; transition: opacity .15s; }
.viewer-nav:hover, .viewer-close:hover { opacity: 1; }
.viewer-stage img { box-shadow: 0 24px 60px -30px rgba(40, 36, 28, .45); }
.viewer-nav { height: 100%; font-size: 44px; font-weight: 200; }
.viewer-nav:disabled { opacity: .12; cursor: default; }
.viewer-close { position: absolute; top: 14px; right: 18px; z-index: 2; font-size: 20px; padding: 8px 10px; }

@media (max-width: 999px) {
  :root { --gap: 22px; }
}
/* 휴대폰: 3열 유지, 칸이 좁으니 제목은 숨기고(크게 보기에서 보임) 메뉴·분류는 옆으로 밀어 보기 */
@media (max-width: 760px) {
  /* 휴대폰: 1줄 = 로고 + 오른쪽 작은 링크, 2줄 = 큰 메뉴(옆으로 밀어 보기) */
  .site-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 14px; padding-top: 18px; padding-bottom: 14px; }
  .head-right { grid-column: 2; grid-row: 1; gap: 12px; }
  .site-util { gap: 16px; font-size: 11.5px; }
  .site-nav {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side) 2px;
    overflow-x: auto; scrollbar-width: none; gap: 12px; font-size: 12.5px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .filters { display: block; }
  .chips + .chips { margin-top: 8px; }
}
@media (max-width: 640px) {
  :root { --gap: 8px; }
  .chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 20px;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { font-size: 12px; }
  .viewer[open] { grid-template-columns: minmax(0, 1fr); }
  .viewer-nav { display: none; }
  .viewer-figure { padding: 56px 12px 0; }
  .viewer-caption { padding: 14px 4px 22px; }
}

/* 분류 줄: 큰 메뉴(고딕·대문자·굵게)와 단계가 구분되도록 명조, 'Poster'처럼 첫 글자만 대문자(2026-10-07 사용자 의견) */
.chip { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: .02em; font-size: 14px; }
.chip small { font-family: var(--sans); }
@media (max-width: 640px) { .chip { font-size: 13px; } }