@charset "utf-8";

/* ═══════════════════════════════════════════════════════════
   부재의 증명 : 결코 스러지지 않는
   Proof of Absence : That Which Never Fades

   이 파일은 skin.html 의 body 끝에서 불린다.
   티스토리가 head 에 심는 CSS 12개보다 뒤에 오게 하여
   무엇이 심어지든 이 파일이 이기도록 한 것이다.
   덧붙여 모든 값에 !important 를 박아 두 겹으로 막는다.

   V1_100 개편: 판형(wide/pad/phone) 3벌 SVG 를 버리고 반응형 HTML+CSS 로
   전환. 텍스트 10화면(작품목록 포함) 전부 웹폰트(윤디자인)로 그리고,
   세로일 때는 90도 강제회전으로 가로 시청을 유도한다.

   V1_200 수정: 실사용 4기종(32" 4K 모니터·2560x1600 노트북·아이패드
   에어5·아이폰16 프로맥스) 실측 결과 발견된 문제 수정 —
   ① 세로 강제회전 시 정중앙 배치가 깨지는 specificity 버그
   ② 글자 크기를 vmin 단독으로 무제한 키운 탓에 초대형 모니터(4K)에서
      뒤표지·서문 글자가 상자 밖으로 넘쳐 잘리거나 줄바꿈되던 문제
      → 전부 clamp(최소px, 선호vmin, 최대px) 로 상하한을 못박음
   ③ 텍스트 화면 상자 폭이 사진처럼 세로 기준으로 묶이지 않아 핸드폰
      가로(극단적으로 넓고 낮은 화면)에서 사진보다 훨씬 넓어 보이던 문제
      → 사진의 16:9 캡과 같은 원리로 텍스트 상자도 세로 기준 폭 상한을 둠
   ④ 핸드폰 작품목록·목차의 안전장치 스크롤이 손가락 스와이프(페이지
      넘김) 제스처와 충돌할 수 있는 부분을 touch-action 과 JS 가드로 보강
   ⑤ 핸드폰 본문 글자 하한을 올려 가독성 개선(서문·작품목록 등)
   ═══════════════════════════════════════════════════════════ */

html, body {
  width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important;
  background:#0b0b0d !important;
  overflow:hidden !important;
  -webkit-tap-highlight-color:transparent;
}

/* ── 티스토리가 심는 것 전부 제거 ── */
#tt-body-index > *, #tt-body-page > *, #tt-body-category > *,
#tt-body-post > *, #tt-body-tag > *, #tt-body-guestbook > *,
#tt-body-notice > *, #tt-body-protected > *, #tt-body-search > *,
body > div:not(#cat), body > iframe, body > aside, body > header, body > footer,
.menu_toolbar, .layer_tooltip, #editEntry, .container_postbtn,
#daumSearchBox, .another_category, .revenue_unit_wrap, .google-auto-placed,
[data-tistory-react-app], .tt_adfit_zone, #adfit_wrapper {
  display:none !important;
  visibility:hidden !important;
}

/* ── 뷰어 ── */
body > #cat, #cat {
  display:flex !important;
  visibility:visible !important;
  position:fixed !important;
  left:0 !important; top:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important;
  margin:0 !important; padding:0 !important;
  background:#0b0b0d !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  z-index:2147483000 !important;
  user-select:none; -webkit-user-select:none;
}
#cat > * { display:block !important; visibility:visible !important; }

/* ── 세로 화면 : 90도 강제회전 ──
   사용자가 폰·패드를 세로로 쥐고 있으면 화면 자체를 90도 돌려 보여준다.
   가로 방향으로 몸을 돌리라는 뜻이며, 실제로 기기를 돌리면 orientation
   이 landscape 로 바뀌어 이 규칙이 풀리고 정상 가로 화면이 뜬다.
   pointer:coarse 로 터치기기에만 걸어, 데스크톱 창을 세로로 좁혀도
   (마우스 환경) 억지로 돌아가지 않게 막는다.
   ⚠ 셀렉터를 위 "뷰어" 규칙과 똑같이 `body > #cat, #cat` 로 맞춰야 한다.
   `#cat` 단독 셀렉터는 detail(명시도)이 `body > #cat` 보다 낮아서, 두 규칙이
   전부 !important 라도 이 규칙이 나중에 나와도 밀린다 — 실기기(아이패드·
   아이폰) 세로 로딩 시 회전은 걸리는데 좌우상하 중앙정렬이 깨지던 버그의
   원인이 바로 이것이었다(transform 은 아래쪽에만 있던 속성이라 정상 적용,
   width/height/left/top/right/bottom 은 위 규칙에 밀려 무시됨). */
/* ⚠ 세로→강제회전 도중 폭이 넓어지거나 사진 크기가 달라져 보이는 문제 —
   모바일 브라우저는 세로/가로 상태에 따라 주소창 등 브라우저 UI 높이가
   달라 100vh 값 자체가 방향마다 다르게 계산될 수 있다. 회전 상자의 폭을
   100vh 로 구하다 보니, 실제 가로로 쥐었을 때와 세로에서 회전시켰을 때
   같은 화면인데도 서로 다른 폭이 나오는 것이 원인이다. 아래에 100dvh/
   100dvw(동적 뷰포트 단위, 브라우저 UI 변화를 실시간 반영)를 뒤이어
   한 번 더 선언해 지원 브라우저에서는 그 값으로 덮어써 방향에 관계없이
   항상 같은 크기가 나오게 한다(미지원 브라우저는 위 vh/vw 값이 그대로
   유지되어 안전하다). */
@media (orientation:portrait) and (pointer:coarse) {
  body > #cat, #cat {
    width:100vh !important; height:100vw !important;
    width:100dvh !important; height:100dvw !important;
    left:50% !important; top:50% !important;
    right:auto !important; bottom:auto !important;
    transform:translate(-50%, -50%) rotate(90deg) !important;
  }
}

/* ── 사진 · 텍스트 · 작품목록 화면 공통(위치·페이드) ──
   화면 정중앙. img(사진)뿐 아니라 텍스트 패널(div.txtpanel)도 같이
   적용받도록 태그를 가리지 않는 .pg 로 공통 규칙을 둔다. */
#cat .pg {
  display:block !important;
  visibility:visible !important;
  position:absolute !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  opacity:0; transition:opacity .28s ease;
  pointer-events:none;
  z-index:1 !important;
}
#cat .pg.on { opacity:1; }
/* 화면 전환 시 움직임에 민감한 사용자를 위한 배려. 운영체제에서
   '동작 줄이기'를 켠 경우, 사진이 서서히 겹쳐지는 효과 없이 즉시
   바뀌도록 한다. */
@media (prefers-reduced-motion: reduce) {
  #cat .pg { transition:none !important; }
}

/* 사진(img) 전용 치수 — 원본보다 크게 늘리지 않는다. 사진 화면에는
   스크롤이 개입할 여지 자체가 없다(스크롤 속성을 아예 두지 않음). */
#cat img.pg {
  max-width:100% !important; max-height:100% !important;
  width:auto !important; height:auto !important;
  min-width:0 !important; min-height:0 !important;
  object-fit:contain !important;
  overflow:visible !important;
}

/* ── 프롤로그 · 에필로그 : 가로 화면에서만 화면을 관통 ──
   화면 전체를 채우되(가로 화면 꽉 채움 허용), 극단적으로 가로로 긴
   기기(강제회전한 폰 등)에서 위아래가 과도하게 잘리지 않도록 상자의
   가로세로비를 16:9 로 캡을 씌운다. 화면비가 16:9 이하(태블릿·모니터
   대부분)면 원래대로 화면을 꽉 채우고, 16:9 를 넘어서는 초광각 화면에서만
   좌우에 여백(필러박스)이 생기며 사진 크롭은 16:9 선에서 멈춘다. */
@media (min-aspect-ratio: 1/1) {
  #cat img.pg.bleed {
    left:50% !important; top:50% !important;
    transform:translate(-50%, -50%) !important;
    height:100vh !important;
    width:min(100vw, 100vh * 16 / 9) !important;
    /* 위 rotate 상자와 같은 이유(모바일 브라우저 UI 높이 차이로 vh 값이
       방향마다 달라지는 문제)로, 세로에서 회전시켰을 때와 실제 가로일 때
       사진 크기가 달라 보일 수 있다. dvh/dvw 로 한 번 더 덮어써 방지한다. */
    height:100dvh !important;
    width:min(100dvw, 100dvh * 16 / 9) !important;
    max-width:none !important; max-height:none !important;
    object-fit:cover !important;
  }
}

/* ── 좌우 버튼 ──
   아이패드처럼 사진 비율(3:2)과 화면 비율이 비슷해 여백이 거의 없는
   기기에서는 버튼이 사진 위에 그대로 얹힌다. 그 상태에서 사진의 밝은
   영역과 흰색 반투명 버튼이 겹치면 버튼이 안 보이는 문제가 있었다.
   원 배경(칩)을 새로 그려 넣는 대신 — 사진을 가리지 않고 심플함을
   지키기 위해 — 아이콘 자체에 항상 일정한 어두운 그림자(halo)를 둘러
   어떤 밝기의 사진 위에서도 흰 선이 도드라져 보이게 한다. 버튼 몸체의
   투명도(opacity)와 별개로 그림자는 항상 같은 세기를 유지해야 하므로,
   기존처럼 버튼 전체에 opacity 를 걸지 않고 아이콘 색(stroke) 자체를
   반투명하게 만들어 '은은하지만 항상 뚜렷이 보이는' 균형을 맞췄다. */
#cat .nav {
  display:flex !important;
  visibility:visible !important;
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:80px !important; height:80px !important;
  align-items:center !important; justify-content:center !important;
  cursor:pointer;
  z-index:10 !important;
  opacity:1 !important; transition:opacity .2s;
  background:none !important; border:0 !important; padding:0 !important;
  margin:0 !important;
}
#cat .nav:hover { opacity:1 !important; }
#cat .nav.off { display:none !important; }
/* 키보드로 tab 이동 시 지금 어느 버튼에 초점이 있는지 검은 배경 위에서도
   또렷이 보이게 하는 표시. 마우스 클릭 때는 나타나지 않고(그때는 이미
   눈으로 보고 누르므로 불필요), 키보드로 이동했을 때만 나타난다. */
#cat .nav:focus-visible {
  outline:2px solid rgba(255,255,255,.85) !important;
  outline-offset:3px !important;
  border-radius:50% !important;
}
#cat .nav svg {
  width:32px !important; height:32px !important;
  filter:
    drop-shadow(0 0 1.5px rgba(0,0,0,.9))
    drop-shadow(0 0 4px rgba(0,0,0,.65))
    drop-shadow(0 0 8px rgba(0,0,0,.4));
}
#cat .nav path {
  fill:none !important; stroke:rgba(255,255,255,.55) !important; stroke-width:1.7 !important;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .2s;
}
#cat .nav:hover path { stroke:rgba(255,255,255,.95) !important; }
#cat #prev { left:2.2% !important; right:auto !important; }
#cat #next { right:2.2% !important; left:auto !important; }

/* ── 프롤로그 · 에필로그 라벨 (웹폰트 텍스트) ──
   버튼·페이지번호와 똑같은 이유로 사진 위에 바로 얹힌다. 같은 방식(글자색
   반투명 + 항상 일정한 어두운 그림자)으로 어떤 사진 위에서도 보이게 한다. */
#cat .lbl-text {
  display:block !important;
  position:absolute !important;
  left:50% !important; right:auto !important;
  bottom:6% !important; top:auto !important;
  transform:translateX(-50%) !important;
  font-family:'YoonGothic310', 'FadesList340', Georgia, serif !important;
  font-weight:normal !important;
  font-size:clamp(11px, 1.8vmin, 20px) !important;
  letter-spacing:.34em !important; text-indent:.34em !important;
  color:rgba(255,255,255,.8) !important;
  opacity:1 !important;
  text-shadow:
    0 0 2px rgba(0,0,0,.9),
    0 0 5px rgba(0,0,0,.65),
    0 0 9px rgba(0,0,0,.4) !important;
  z-index:9 !important;
  white-space:nowrap;
  pointer-events:none;
}

/* ── 페이지 번호 ── */
/* 윤명조350 에서 숫자 0-9 만 뽑아낸 서브셋. 1.3KB. */
@font-face {
  font-family:'FadesNum';
  src:url(./images/fadesnum.woff2) format('woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}
/* 버튼과 같은 이유(아이패드 등에서 사진 위에 그대로 얹힘) 로, opacity 로
   전체를 흐리게 하는 대신 글자색 자체를 반투명하게 하고 항상 일정한
   세기의 어두운 그림자(text-shadow)를 둘러 어떤 밝기의 사진 위에서도
   또렷이 보이게 한다. */
#cat #pno {
  display:block !important;
  visibility:visible !important;
  position:absolute !important;
  left:0 !important; right:0 !important;
  bottom:4.6% !important; top:auto !important;
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  text-align:center !important;
  font-family:'FadesNum', Georgia, 'Times New Roman', serif !important;
  font-size:13px !important;
  font-weight:normal !important;
  letter-spacing:.42em !important;
  /* text-indent:.42em 이 있었으나, 실측(글자가 실제로 그려지는 자리의
     좌우 경계를 코드로 재는 방식) 결과 이 값 때문에 숫자가 화면 정중앙
     에서 오른쪽으로 약 2.7px(27인치 기준) 밀려나 있었다. text-indent를
     완전히 지우자 모든 화면 크기에서 오차가 0에 가깝게(0.01px 이내)
     맞아떨어져 이 값을 지웠다. */
  line-height:1.2 !important;
  color:rgba(255,255,255,.6) !important;
  opacity:1 !important;
  text-shadow:
    0 0 2px rgba(0,0,0,.9),
    0 0 5px rgba(0,0,0,.65),
    0 0 9px rgba(0,0,0,.4) !important;
  z-index:10 !important;
  pointer-events:none;
}

/* ── 페이지번호 : 핸드폰에서는 생략 ──
   폭(width) 만으로 기준을 잡으면 큰 폰이 가로로 누웠을 때(예: 아이폰 16
   Pro Max 가로 956px)는 폭이 커서 오히려 보여 버리는 오류가 난다.
   기기의 '짧은 변'(min(width,height) — 세로일 때나 가로일 때나 그 기기
   고유의 작은 변)이 500px 미만이면 핸드폰으로 보고 생략한다. 아이패드
   (짧은 변 820) 이상은 태블릿·노트북·데스크톱으로 보고 그대로 보여준다.
   min(w,h)<500  ⟺  width<500 이거나 height<500 (둘 중 하나만 참이면 됨)
   이므로 아래 두 미디어쿼리를 OR(콤마)로 묶어 표현한다. */
@media (max-width: 499px), (max-height: 499px) {
  #cat #pno { display:none !important; }
}

/* ── 이전 · 다음 버튼 : 모든 기기에서 노출 ──
   수록 사진이 전부 3:2 비율인데, 3:2 화면비를 가진 핸드폰은 없다. 사진을
   자르지 않고 보여주면(원칙 확정 사항) 핸드폰 강제가로 화면(예: 아이폰
   가로 956x440, 화면비 2.17:1)에서는 사진 좌우로 반드시 검은 여백이
   생긴다(956폭 화면에 3:2 사진을 높이 기준으로 채우면 사진 폭은 약
   660px뿐이라 좌우로 약 148px씩 남는다). 버튼은 그 여백 안(가장자리에서
   2.2%)에 놓이므로 사진을 가리지 않는다. 태블릿·모니터처럼 화면비가
   3:2 에 가까운 기기에서는 원래 설계대로(반투명·고정 위치) 사진 위에
   살짝 겹쳐 보이는데, 이는 처음부터 확정된 원칙이다. 짧은 변이 500px
   미만인 핸드폰에서는 버튼 크기만 조금 줄여 화면에 비해 과하지 않게
   한다(위치·투명도는 동일). */
@media (max-width: 499px), (max-height: 499px) {
  #cat .nav { width:50px !important; height:50px !important; }
  #cat .nav svg { width:20px !important; height:20px !important; }
}

/* ── 서문 : 핸드폰에서만 정중앙 배치 ──
   핸드폰 강제가로 화면(짧은 변 500px 미만)은 가로로 길고 세로로 짧아,
   한 줄짜리 서문 문구를 상단(flex-start)에 두면 아래로 검은 여백이
   과하게 남는다. 핸드폰에서만 표지·챕터구분·뒤표지와 같은 정중앙
   배치로 바꾸고, 그 외 기기(4K 모니터·노트북·iPad 등)는 위 기본 규칙
   그대로 상단 정렬을 유지한다. */
@media (max-width: 499px), (max-height: 499px) {
  /* 아래 목차·서문 공통 상단 여백 규칙(#cat .scr-foreword)과 우선순위가
     같은 값(!important)이라 파일 안 등장 순서에 따라 뒤엎일 수 있다.
     클래스를 하나 더 겹쳐(.pg.scr-foreword) 우선순위를 확실히 더 높여
     순서와 상관없이 핸드폰 예외가 항상 이기도록 한다. */
  #cat .pg.scr-foreword {
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    padding-top:0 !important;
  }
}

/* ── 서문 : 아이패드 등 태블릿 세로(강제회전)에서 상단 여백 확대 ──
   완전 중앙정렬까지는 필요 없지만(핸드폰과 달리), 기존 padding-top:1vmin
   으로는 문구가 화면 맨 위쪽에 붙어 눈에 잘 들어오지 않고 그 아래로는
   텅 빈 느낌이 컸다. 짧은 변이 500px 이상(핸드폰이 아닌 아이패드 등
   태블릿)이면서 세로를 강제회전한 상태에서만 위쪽 여백을 늘려 문구를
   화면 위쪽 1/3 지점 정도로 내려준다. */
@media (orientation:portrait) and (pointer:coarse) and (min-width:500px) and (min-height:500px) {
  /* 같은 이유로(.pg.scr-foreword) 우선순위를 명확히 높여 순서에
     안전하게 만든다. */
  #cat .pg.scr-foreword {
    padding-top:16% !important;
  }
}

/* ── 윤디자인 웹폰트 (loca 손상 복구 + 서브셋) ──
   310=라이트(캡션·영문 트래킹) / 330=미디엄(본문) / 350=볼드(제목).
   제목에는 원래 360(엑스트라볼드)을 썼으나, 가장 가는 서체(310)와 대비만
   주면 충분한데 엑스트라볼드는 과하게 두꺼워 보인다는 판단으로 한 단계
   낮은 350(볼드)로 교체했다 — 글자수(113자) 동일한 서브셋. */
@font-face {
  font-family:'YoonGothic310';
  src:url(./images/YoonGothic310.woff2) format('woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'YoonGothic330';
  src:url(./images/YoonGothic330.woff2) format('woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'YoonGothic350';
  src:url(./images/YoonGothic350.woff2) format('woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ── 텍스트 화면 공통 틀(.txtpanel) ──
   표지·목차·서문·챕터구분·뒤표지 5종이 공유하는 바깥 상자.
   화면의 88% 안에 놓아 사방 여백을 남기고(사진 화면과 구분되는 '한 장'
   느낌), 내용이 넘치는 예외적 경우에 대비해 세로 스크롤을 안전장치로
   달아 둔다(평소엔 다 들어가 스크롤바가 보이지 않는다).
   폭은 88vw 를 기본으로 하되, 88vh*2 를 넘지 않도록 캡을 씌운다 — 사진의
   16:9 캡과 같은 목적으로, 핸드폰 강제가로처럼 세로가 극단적으로 짧은
   화면에서 텍스트 상자가 사진보다 부자연스럽게 넓어 보이지 않게 한다.
   (각 화면별 max-width 는 아래 개별 규칙에서 추가로 더 좁게 묶는다)
   box-sizing:border-box 로 지정 — 그렇지 않으면(기본값 content-box) 개별
   화면 규칙에서 padding 을 주었을 때(예: 서문 상단 여백) 그 padding 이
   height:88% 에 더해져 상자가 화면 밖으로 넘치는 문제가 생긴다. */
#cat .txtpanel {
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
  width:min(88%, 88vh * 2) !important; height:88% !important;
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#333 transparent;
}
#cat .txtpanel::-webkit-scrollbar { width:4px; }
#cat .txtpanel::-webkit-scrollbar-thumb { background:#333; }
/* 화면 전환을 부드럽게 하려고 바로 다음·이전 화면을 미리 화면 밖(투명)에
   만들어 둔다(show() 의 make(i±1)). 그런데 .txtpanel 은 넘치는 내용을
   스크롤하도록 손가락·마우스 입력을 항상 받게 되어 있어서(pointer-events),
   미리 만들어진 '보이지 않는' 옆 화면이 지금 실제로 보이는 화면 위에
   그대로 겹쳐 있으면 그 안 보이는 화면이 스크롤·터치를 가로채 가는 문제가
   있었다(작품목록 화면 다음에 뒤표지가 미리 만들어지며 겹쳐, 작품목록을
   스크롤하려 해도 반응하지 않던 원인). 지금 실제로 화면에 켜져 있는
   화면(.on)에만 입력을 받도록 범위를 좁혀 고쳤다. */
#cat .pg.on.txtpanel { pointer-events:auto; }

/* 공통 부품 : 캡션(kicker) · 구분선 · 영문 · 메타 캡션
   전부 clamp(최소px, 선호vmin, 최대px) 로 상하한을 둔다 — 핸드폰처럼
   작은 화면에서 너무 작아지지 않게, 32" 4K 모니터처럼 큰 화면에서
   상자 밖으로 넘치지 않게 양쪽을 다 막는다. */
#cat .kicker {
  font-family:'YoonGothic310', sans-serif;
  font-weight:normal;
  font-size:clamp(11px, 2vmin, 20px);
  letter-spacing:.32em; text-indent:.32em;
  color:#a3a3a3;
  white-space:nowrap;
}
#cat .divider {
  display:block;
  width:clamp(26px, 4.6vmin, 80px); height:1px; min-height:1px;
  background:#4a4a4a;
  border:0;
}
#cat .en {
  font-family:'YoonGothic310', sans-serif;
  font-weight:normal;
  font-size:clamp(12px, 2.1vmin, 22px);
  letter-spacing:.14em; text-indent:.14em;
  color:#c9c9c9;
}
#cat .meta {
  margin:0;
  font-family:'YoonGothic310', sans-serif;
  font-weight:normal;
  font-size:clamp(10px, 1.85vmin, 15px);
  letter-spacing:.28em; text-indent:.28em;
  color:#8f8f8f;
  white-space:nowrap;
}

/* ── 표지(01_cover) ── */
#cat .scr-cover {
  max-width:680px !important;
  justify-content:space-between;
  align-items:center;
  text-align:center;
  padding:2vmin 0;
}
#cat .cv-kicker {
  font-size:clamp(11px, 2vmin, 19px);
  letter-spacing:.32em; text-indent:.32em; color:#a3a3a3; white-space:nowrap;
}
#cat .cv-main {
  flex:1 1 auto;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  min-height:0;
}
#cat .cv-title {
  margin:0 0 1.8vmin;
  font-family:'YoonGothic350', sans-serif;
  font-weight:normal;
  font-size:clamp(32px, 7vmin, 84px);
  letter-spacing:.08em;
  color:#f5f5f5;
  white-space:nowrap;
}
#cat .cv-sub {
  margin:0 0 3.4vmin;
  font-family:'YoonGothic330', sans-serif;
  font-weight:normal;
  font-size:clamp(16px, 3vmin, 32px);
  letter-spacing:.1em;
  color:#cfcfcf;
  white-space:nowrap;
}
#cat .scr-cover .divider { margin:0 0 3.4vmin; }
#cat .cv-en {
  margin:0 0 1.6vmin;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(12px, 2vmin, 20px);
  letter-spacing:.1em; text-indent:.1em;
  color:#c9c9c9;
  white-space:nowrap;
}
#cat .scr-cover .meta { white-space:nowrap; }
/* 작가명 : 너무 작아 가독성이 떨어진다는 지적으로 살짝 키움
   (clamp 12→14 / 2→2.3vmin / 18→21, 과하지 않게 소폭만 조정).
   폰트는 310(라이트)이 너무 얇아 인상이 약하다는 의견으로 330(미디엄)으로
   한 단계 올림. */
#cat .cv-author {
  font-family:'YoonGothic330', sans-serif;
  font-size:clamp(14px, 2.3vmin, 21px);
  letter-spacing:.3em; text-indent:.3em;
  color:#888;
}

/* ── 목차(02_contents) ──
   상단 여백이 너무 좁아 문구가 화면 맨 위에 붙어 보인다는 지적으로,
   핸드폰·iPad·노트북·모니터 등 모든 기기에서 공통으로 위쪽 여백을
   넉넉하게 늘렸다(1vmin → 8vmin). */
#cat .scr-contents {
  max-width:900px !important;
  justify-content:flex-start;
  padding-top:8vmin !important;
}
#cat .ct-kicker {
  margin-bottom:2vmin;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(12px, 2.2vmin, 22px);
  letter-spacing:.32em; text-indent:.32em;
  color:#a3a3a3;
}
#cat .divider-full { width:100% !important; margin:0 0 0 !important; }
#cat .ct-list { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; touch-action:pan-y; }
#cat .crow {
  display:flex; align-items:center;
  height:clamp(48px, 9.4vmin, 108px);
  border-bottom:1px solid #2a2a2a;
  gap:3vmin;
}
#cat .crow-no {
  flex:0 0 auto; width:3.4em;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(12px, 2vmin, 18px);
  color:#777;
}
#cat .crow-kr {
  flex:1 1 auto;
  font-family:'YoonGothic350', sans-serif;
  font-weight:normal;
  font-size:clamp(17px, 3vmin, 30px);
  color:#f0f0f0;
  white-space:nowrap;
}
#cat .crow-en {
  flex:0 0 auto;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(11px, 2vmin, 19px);
  letter-spacing:.06em;
  color:#aeaeae;
  text-align:right;
  white-space:nowrap;
}

/* ── 서문(03_foreword) ──
   핸드폰 가독성을 위해 하한을 올리고(clamp 최소값), 32" 4K 모니터에서
   본문 한 줄이 두 줄로 밀리지 않도록 상한과 상자 폭을 함께 늘렸다.
   기본(데스크톱·노트북·iPad 등)은 목차와 같은 상단 정렬을 유지하되,
   목차와 마찬가지로 위쪽 여백을 넉넉하게 늘렸다(1vmin → 8vmin) — 문구가
   화면 맨 위에 붙어 보인다는 지적에 따른 것.
   핸드폰(짧은 변 500px 미만)에서만 정중앙으로 바꾼다 — 가로로 길고
   세로로 짧은 핸드폰 강제가로 화면에서 상단 고정(flex-start)으로 두면
   문구 아래로 검은 여백만 크게 남기 때문. 핸드폰만 예외로 아래
   media 규칙에서 이 padding-top 을 다시 0으로 되돌린다. */
#cat .scr-foreword {
  max-width:960px !important;
  justify-content:flex-start;
  padding-top:8vmin !important;
}
#cat .fw-kicker {
  margin-bottom:1.4vmin;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(12px, 2.2vmin, 22px);
  letter-spacing:.32em; text-indent:.32em;
  color:#a3a3a3;
}
#cat .scr-foreword .divider { margin-bottom:4.4vmin; }
#cat .fw-body {
  margin:0;
  font-family:'YoonGothic330', sans-serif;
  font-weight:normal;
  font-size:clamp(19px, 3.6vmin, 36px);
  line-height:1.6;
  letter-spacing:.02em;
  color:#eee;
  white-space:nowrap;
}

/* ── 챕터 구분(05·06·07·08·09) ── */
#cat .scr-chapter {
  max-width:680px !important;
  justify-content:center;
  align-items:center;
  text-align:center;
}
#cat .ch-kicker {
  margin-bottom:2.6vmin;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(11px, 2vmin, 20px);
  letter-spacing:.32em; text-indent:.32em;
  color:#a3a3a3;
  white-space:nowrap;
}
#cat .ch-title {
  margin:0 0 1.4vmin;
  font-family:'YoonGothic350', sans-serif;
  font-weight:normal;
  font-size:clamp(28px, 6vmin, 68px);
  letter-spacing:.06em;
  color:#f5f5f5;
  white-space:nowrap;
}
#cat .ch-en {
  margin:0 0 3vmin;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(13px, 2.3vmin, 24px);
  letter-spacing:.12em; text-indent:.12em;
  color:#cfcfcf;
  white-space:nowrap;
}
#cat .scr-chapter .divider { margin-bottom:3vmin; }
#cat .scr-chapter .meta { white-space:nowrap; }

/* ── 뒤표지(34_back) ──
   32" 4K 모니터에서 제목 앞뒤 글자가 절반씩 잘리던 문제 — 원인은 글자
   크기가 vmin 만으로 무제한 커진 것. clamp 로 상한을 막아 해결. */
#cat .scr-back {
  max-width:680px !important;
  justify-content:center;
  align-items:center;
  text-align:center;
}
#cat .bk-title {
  margin:0 0 1.8vmin;
  font-family:'YoonGothic350', sans-serif;
  font-weight:normal;
  font-size:clamp(20px, 3.6vmin, 32px);
  letter-spacing:.05em;
  color:#f0f0f0;
  white-space:nowrap;
}
#cat .bk-en {
  margin:0 0 2.6vmin;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(12px, 2vmin, 20px);
  letter-spacing:.1em; text-indent:.1em;
  color:#cfcfcf;
  white-space:nowrap;
}
#cat .scr-back .meta { white-space:nowrap; }

/* ── 작품목록(33_works) — SVG 대신 HTML+CSS, 세로 스크롤 ──
   원본 33_works_*.svg 실측값(2400x1600 캔버스) 기준으로 비율을 맞춤:
   제목 x=9%·y=13.8% / 표머리(No.·연도) y=17.4% / 행높이=3.23vmin(=51.65/1600)
   / No.열 시작 9% · 연도열 시작 20% / 선 18개 — 챕터 그룹(1-5·6-8·9-14·15-19·20-22)
   경계 4곳 + 마지막 행 뒤에는 선을 넣지 않는다(원본과 동일 패턴).
   폭은 .txtpanel 과 같은 원리로 88vh 기준 캡을 둔다.
   글꼴은 다른 9개 텍스트 화면과 통일해 윤디자인(YoonGothic)을 쓴다
   — 예전에는 이 화면만 별도 글꼴(FadesList)을 썼으나, 화면 전체의
   글꼴 통일감을 위해 윤디자인으로 교체했다. FadesList340 은 사진
   위 라벨(.lbl-text)의 대체 글꼴로만 남아 있어 그 파일만 유지한다. */
@font-face {
  font-family:'FadesList340';
  src:url(./images/fadeslist340.woff2) format('woff2');
  font-weight:normal; font-style:normal; font-display:swap;
}
#cat .works-panel {
  display:flex !important;
  flex-direction:column !important;
  width:min(88%, 88vh * 2.2) !important; height:88% !important;
  min-height:0;
  max-width:1100px !important;
  /* .txtpanel 과 같은 이유로 예방 차원에서 지정 — padding 이 생겨도
     지정한 height 를 넘어서지 않게 한다. */
  box-sizing:border-box !important;
}
#cat .works-head { flex:0 0 auto; }
#cat .works-title {
  margin:0 0 2.6vmin 9%; padding:0;
  font-family:'YoonGothic350', sans-serif;
  font-weight:normal;
  font-size:clamp(20px, 4.5vmin, 44px); letter-spacing:.10em;
  color:#f2f2f2;
  white-space:nowrap;
}
#cat .works-cols {
  display:grid;
  grid-template-columns:9% 11% 1fr;
  padding-bottom:1.3vmin;
  margin-bottom:.2vmin;
  border-bottom:2px solid #444444;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(11px, 2.3vmin, 22px); letter-spacing:.06em;
  color:#999999;
}
#cat .works-col-no   { grid-column:2; }
#cat .works-col-year { grid-column:3; }
#cat .works-scroll {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto; overflow-x:hidden;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:#333 transparent;
}
/* .txtpanel 과 같은 이유 — 미리 만들어 둔(보이지 않는) 작품목록이 지금
   보이는 화면 위에 겹쳐서 스크롤·터치를 가로채지 않도록, 실제로 화면에
   켜져 있을 때(.on)만 손가락·마우스 입력을 받게 한다. */
#cat .pg.on.works-panel .works-scroll { pointer-events:auto; }
#cat .works-scroll::-webkit-scrollbar { width:4px; }
#cat .works-scroll::-webkit-scrollbar-thumb { background:#333; }
#cat .works-row {
  display:grid;
  grid-template-columns:9% 11% 1fr;
  align-items:center;
  height:clamp(28px, 3.23vmin, 56px);
  border-bottom:1px solid #262626;
  font-family:'YoonGothic310', sans-serif;
  font-size:clamp(11px, 2.3vmin, 24px); letter-spacing:.04em;
}
#cat .works-row-last { border-bottom:none; }
#cat .works-no   { grid-column:2; color:#777777; }
#cat .works-year { grid-column:3; color:#cccccc; }

/* ── 작품목록 : 세로→강제회전 상태에서 중앙정렬 ──
   3번째 그리드 트랙(1fr)에는 글자가 거의 없어(연도 네 자리뿐), 정상
   가로 화면에서는 오른쪽에 남는 여백이 자연스럽지만, 세로를 90도 돌려
   보여주는 상태에서는 로컬 가로축이 회전 후 화면 세로축이 되기 때문에
   그 여백이 화면 위/아래 한쪽으로 크게 몰려 목록 전체가 한쪽에 쏠려
   보이는 문제가 있었다(아이패드 세로 실측에서 발견). 강제회전 상태에서만
   제목·헤더·각 행의 폭을 내용에 맞추고 좌우 중앙정렬해 화면(회전 후
   기준 세로) 중앙에 고르게 오도록 한다. 가로(정상) 화면은 그대로 둔다. */
@media (orientation:portrait) and (pointer:coarse) {
  #cat .works-title {
    width:fit-content !important;
    margin:0 auto 2.6vmin !important;
  }
  #cat .works-cols, #cat .works-row {
    grid-template-columns:auto auto !important;
    column-gap:6vmin !important;
    width:fit-content !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  #cat .works-col-no,  #cat .works-no   { grid-column:1 !important; }
  #cat .works-col-year, #cat .works-year { grid-column:2 !important; }
}