/* ==========================================================================
   사진포폴 — 공통 스타일 (개발 1: 포폴포폴 개발 7 의 왼쪽 레일 · 오른쪽 창을 그대로 이식)
   구조: 화면 왼쪽에 고정 레일(이름 · 메뉴 · Works 안에서만 뜨는 시리즈 목록 · 저작권), 오른쪽에 내용 창.
   레일은 모든 페이지에서 같은 자리에 같은 모습으로 있고 오른쪽 창만 바뀐다 —
   페이지를 옮겨도 «창이 갈리는» 느낌이 나게 하는 것이 이 레이아웃의 전부다.
   바탕은 아주 옅은 회색 한 겹(레퍼런스 rinkokawauchi.com 과 같은 계열), 장식은 없다.
   위계는 크기·회색 단계·여백으로만 만든다. 사진이 주인공이다 — 글자는 사진보다 작고 흐리다.
   서체는 Pretendard 하나(세리프는 포폴포폴 개발 5에서 한글·라틴 글리프가 따로 놀아 철회했다).
   팔레트를 바꾸면 공유 카드(og-card.html)·favicon.svg 도 같이 고치고 og.png 를 재캡처할 것.
   ========================================================================== */

:root {
  color-scheme: light;

  /* 순백(#fff)이 아니라 아주 옅은 회색이다 — 순백은 글자 대비가 너무 세서 눈이 아프고,
     사진을 올렸을 때 흰 여백이 사진 흰자위와 붙어 테두리가 사라진다. 사진 사이트에선 이게 결정적이다.
     대비 수치는 포폴포폴 개발 7 에서 실측한 값(PROJECT.md) — 회색을 더 흐리게 내리지 말 것. */
  --bg: #eaeeee;
  --surface: #e2e6e6;
  --text: #161616;      /* 15.5:1 */
  --text-2: #4a4a4a;    /* 7.6:1 — 본문 */
  --text-3: #666666;    /* 4.9:1 (바탕) / 4.6:1 (표면 #e2e6e6 위) — 연도·캡션·비활성 목록 */
  --line: rgba(0, 0, 0, 0.13);
  --line-2: rgba(0, 0, 0, 0.32);

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 레일 폭과 여백 — 이 셋만 고치면 판면 전체가 따라 움직인다 */
  --rail: 460px;
  --gutter: 48px;
  --nav-col: 116px;   /* 레일 안 첫 칸(메뉴) 폭. 둘째 칸(시리즈 목록)이 그 오른쪽에 붙는다 */

  /* 사진 한 장이 차지할 수 있는 최대 높이 — 세로 사진이 화면을 넘어가지 않게 묶는다 */
  --photo-vh: 84vh;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 한글은 어절 단위로만 끊고, 한 줄에 못 담는 긴 낱말(URL 등)만 흘린다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

:focus-visible {
  outline: 1.5px solid var(--text);
  outline-offset: 4px;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 500; color: var(--text); }

/* 눈에는 안 보이고 스크린리더에만 읽히는 글자(외부 링크의 "새 창" 안내) */
.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;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  z-index: 100;
}
.skip:focus { left: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); }

/* ── 뼈대 ─────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
}

/* ── 왼쪽 레일 ────────────────────────────────────────────────────────── */

/* 화면에 붙어 있고 안쪽만 스크롤한다. 저작권은 아래쪽 끝에 눌러 앉는다 */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: max(var(--gutter), calc(env(safe-area-inset-top) + 16px));
  padding-right: 24px;
  padding-bottom: max(var(--gutter), calc(env(safe-area-inset-bottom) + 24px));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
}

/* 이름 하나뿐이다 — 부제·갈래는 두지 않는다(이 사이트가 본체다) */
.rail-name {
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--text);
}

.rail-nav {
  margin-top: 40px;
  display: grid;
  grid-template-columns: var(--nav-col) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.nav-list { font-size: 14px; line-height: 1.62; }
.nav-list a { color: var(--text-2); }
.nav-list a:hover { color: var(--text); }

/* 지금 보고 있는 곳 — 왼쪽에 점 하나. 글자를 굵히지 않는다(줄이 흔들린다) */
.nav-list .is-current > a,
.nav-list .is-current > span { color: var(--text); }
.nav-list .is-current { position: relative; }
.nav-list .is-current::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0.72em;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text);
}

/* 둘째 칸 — 시리즈 목록. Works 안에서만 뜬다. 비활성은 흐리게, 지금 페이지만 밝게 */
.nav-sub { font-size: 14px; line-height: 1.62; color: var(--text-3); }
.nav-sub a { color: var(--text-3); }
.nav-sub a:hover { color: var(--text); }
.nav-sub .is-current > a,
.nav-sub .is-current > span { color: var(--text); }

.rail-foot {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
}

/* 문서 끝 저작권은 좁은 화면에서만 산다(아래 모바일 규칙). 기본을 none 으로 두고 한 쿼리 안에서만 켠다 —
   max-width: 860px 와 min-width: 861px 로 갈라 두면 860.5px 같은 소수점 폭에서 둘 다 보인다(코덱스 P3) */
.page-foot { display: none; }

/* ── 오른쪽 창 ────────────────────────────────────────────────────────── */

.pane {
  padding: var(--gutter) max(var(--gutter), env(safe-area-inset-right)) 128px 0;
  max-width: 900px;
  outline: none;
}

/* 페이지를 옮기면 창만 조용히 갈린다 */
@media (prefers-reduced-motion: no-preference) {
  .pane { animation: pane-in 0.55s var(--ease) both; }
}
@keyframes pane-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 한 덩어리. 라벨이 위, 내용이 아래로 흐른다(2단 판면은 레일이 대신한다) */
.section { padding: 0 0 76px; }
.pane > .section:last-child { padding-bottom: 0; }

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}

.note {
  font-size: 13.5px;
  color: var(--text-3);
}

/* ── Biography ────────────────────────────────────────────────────────── */

/* 초상 자리 — 사진이 오면 프레임 안에 img 를 넣고 has-photo 를 붙인다.
   빈 프레임은 칠하지 않고 괘선만, 안에 글자를 넣지 않는다 */
.portrait {
  width: min(100%, 300px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  margin-bottom: 34px;
}
.portrait.has-photo { aspect-ratio: auto; border: 0; }
.portrait img { width: 100%; height: auto; }

.bio-text {
  max-width: 560px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--text-2);
}
.bio-text + .bio-text { margin-top: 1.4em; }

/* ── CV ───────────────────────────────────────────────────────────────── */

/* 갈래(학력·개인전·단체전·수상)마다 작은 제목 하나와 연도 목록 하나.
   레퍼런스는 Biography 안에 이걸 다 넣지만 여기선 페이지를 따로 뗐다(태운 주문) */
.cv-section { padding: 0 0 56px; }
.cv-section:last-child { padding-bottom: 0; }

.cv-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

/* 연도가 왼쪽 칸, 내용이 오른쪽. 표가 아니라 약력 줄로 읽히게 폭을 묶는다.
   괘선은 항목 «사이»에만 — 첫 줄 위의 선은 제목에 밑줄을 그은 것처럼 읽힌다 */
.cv-list { max-width: 620px; }
.cv-list > li + li { border-top: 1px solid var(--line); }

.cv-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 10px 0;
}

.cv-year {
  font-size: 13px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cv-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-2);
}
.cv-text b { font-weight: 400; color: var(--text); }

/* ── Works — 시리즈 목록 ──────────────────────────────────────────────── */

/* 레퍼런스처럼 표지 사진 격자. 표지는 그 시리즈의 첫 장이고, 자르지 않는다 —
   비율이 달라 아랫단이 들쭉날쭉해도 그대로 둔다(위로 맞춘다) */
.series-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 32px;
  align-items: start;
}

.series { display: block; }

/* 표지 — 사진이 없는 칸은 is-empty 로 비율만 잡아 자리를 지킨다. 빈 프레임 안에 글자를 넣지 않는다 */
.cover {
  display: block;
  overflow: hidden;
}
.cover.is-empty {
  aspect-ratio: var(--ar-w, 3) / var(--ar-h, 2);
  border: 1px solid var(--line);
}
.cover img { width: 100%; height: auto; }

/* 마우스를 올리면 그 시리즈의 둘째 장이 표지 자리에 겹쳐 뜬다(태운, 개발 2).
   표지 상자 크기는 첫 장이 정하고, 둘째 장은 그 상자를 채우도록 가운데를 자른다 —
   «자르지 않는다» 의 유일한 예외다(잠깐 보이는 미리보기라서). 손가락엔 hover 가 없으니 hover 기기에서만,
   키보드 포커스에도 같이 띄운다. 동작 줄이기는 아래 전역 규칙이 전환을 끈다 */
.cover { position: relative; }
.cover .cover-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
@media (hover: hover) {
  a.series:hover .cover-alt { opacity: 1; }
}
a.series:focus-visible .cover-alt { opacity: 1; }

.series-title {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.series-year {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

a.series:hover .series-title { color: #000000; }

/* ── 시리즈 페이지 ────────────────────────────────────────────────────── */

/* 머리는 제목과 연도뿐. 설명문은 있으면 한 단락(.series-note), 없으면 없다 */
.series-head { padding: 0 0 44px; }

.series-name {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--text);
}
.series-head .series-year { margin-top: 4px; }

.series-note {
  max-width: 560px;
  margin-top: 22px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--text-2);
}

/* 사진은 한 장씩 세로로 — 라이트박스·슬라이더 없음. 순서가 곧 편집이다 */
.photos {
  display: grid;
  gap: 56px;
}

.photo { margin: 0; }

/* 사진 한 장. 원본 비율 그대로(자르지 않는다). 창 폭과 --photo-vh 중 먼저 닿는 쪽에서 멈춘다 —
   가로 사진은 창 폭(852px = 900 − 여백)이, 세로 사진은 높이가 먼저 닿는다.
   상자는 늘 창 폭이고(width: 100%) 높이는 width/height 속성의 비율에서 나온다 — 그래야 이미지가 오기 «전»에도
   같은 높이를 잡아 화면이 튀지 않는다. width: auto 로 두면 로딩 전 0×0 이 된다(개발 1 실측, 코덱스 P1).
   세로 사진은 높이가 --photo-vh 에 걸리며 상자가 사진보다 넓어지는데, 그 남는 자리는 contain 이 투명하게 비운다.
   그래서 이 img 에 테두리·배경을 주면 사진이 아니라 상자에 그려진다 — 주지 말 것. */
.photo img {
  width: 100%;
  height: auto;
  max-height: var(--photo-vh);
  object-fit: contain;
  object-position: left top;
}

/* 사진이 아직 없는 칸 — 실물이 앉을 크기를 같은 규칙으로 흉내 낸다.
   비율은 --ar-w / --ar-h 로 칸마다 바꾼다(가로 3:2 기본, 세로면 style="--ar-w:2;--ar-h:3") */
.photo-frame.is-empty {
  aspect-ratio: var(--ar-w, 3) / var(--ar-h, 2);
  width: min(100%, calc(var(--photo-vh) * var(--ar-w, 3) / var(--ar-h, 2)));
  border: 1px solid var(--line);
}

/* 「사진 준비 중.」 한 줄과 첫 칸 사이 — 글자가 프레임에 붙으면 캡션처럼 읽힌다 */
.note + .photos { margin-top: 20px; }

/* ── Contact ──────────────────────────────────────────────────────────── */

/* 연락처 — 아이콘만 나란히. 글자를 함께 두면 다시 목록처럼 무거워진다 */
.social {
  display: flex;
  align-items: center;
  gap: 30px;
}
.social a {
  display: block;
  color: var(--text-3);
  /* 아이콘만 있는 링크는 짚을 자리가 좁다 — 눈에 안 보이는 여백을 둘러 45×45 로 키운다.
     음수 여백이 그만큼을 되돌려서 아이콘은 제목과 같은 선에 그대로 앉는다 */
  padding: 12px;
  margin: -12px;
}
.social a:hover { color: var(--text); }

/* ── 좁은 데스크톱 ────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  :root { --rail: 330px; --gutter: 36px; --nav-col: 108px; }
}

/* ── 모바일 ───────────────────────────────────────────────────────────── */

/* 레일이 화면 폭을 다 먹으므로 위쪽 머리글로 눕는다. 저작권은 문서 맨 끝으로 */
@media (max-width: 860px) {
  :root { --gutter: 24px; --photo-vh: 78vh; }

  .shell { display: block; }

  .rail {
    position: static;
    height: auto;
    display: block;
    padding: max(28px, calc(env(safe-area-inset-top) + 12px))
             max(var(--gutter), env(safe-area-inset-right))
             0
             max(var(--gutter), env(safe-area-inset-left));
  }

  .rail-nav {
    margin-top: 22px;
    display: block;
  }
  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
  }
  .nav-list .is-current::before { left: -10px; top: 0.75em; }

  .nav-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin-top: 10px;
    font-size: 13.5px;
  }

  /* 문서 끝의 저작권은 레일 안이 아니라 창 밑에 있다 */
  .rail-foot { display: none; }
  .page-foot {
    display: block;
    padding: 40px max(var(--gutter), env(safe-area-inset-right))
             max(40px, calc(env(safe-area-inset-bottom) + 24px))
             max(var(--gutter), env(safe-area-inset-left));
    font-size: 13px;
    color: var(--text-3);
    border-top: 1px solid var(--line);
  }

  .pane {
    padding: 34px max(var(--gutter), env(safe-area-inset-right)) 64px
             max(var(--gutter), env(safe-area-inset-left));
    max-width: none;
  }

  .cv-item { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }

  /* 좁은 화면에선 표지도 한 줄에 하나 */
  .series-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  .series-name { font-size: 22px; }
  .photos { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 인쇄 ─────────────────────────────────────────────────────────────── */

@media print {
  /* 종이에는 이동 장치가 없다. 레일에서 이름과 저작권만 남긴다.
     저작권은 .rail-foot(넓은 화면)과 .page-foot(좁은 화면) 둘에 있고 화면 폭이 어느 쪽을 보일지 고른다.
     A4·레터 세로는 폭이 794px 라 좁은 화면 규칙에 걸린다 — 여기서 .page-foot 까지 숨기면
     종이에 저작권이 한 줄도 안 남는다. 그래서 인쇄에서는 아무것도 더 숨기지 않는다(둘 중 하나는 늘 보인다). */
  .rail-nav, .skip { display: none; }

  /* 화면이 이미 밝은 바탕이라 종이에서 뒤집을 것이 없다. 잉크를 아끼게 바탕만 순백으로,
     글자는 한 단계씩 진하게 */
  :root {
    --bg: #ffffff; --surface: #f2f2f2;
    --text: #000000; --text-2: #333333; --text-3: #555555;
    --line: rgba(0, 0, 0, 0.24); --line-2: rgba(0, 0, 0, 0.4);
    --photo-vh: 70vh;
  }

  /* min-height: 100vh 는 종이에선 «한 장을 다 차지한다»가 돼 짧은 페이지의 저작권을 다음 장으로 민다(코덱스 P2) */
  .shell { display: block; min-height: 0; }
  .rail {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding: 0 0 24px;
  }
  .pane { padding: 0; max-width: none; animation: none; }

  /* 종이에선 1열이라 표지가 폭을 다 먹는다 — 세로 표지(2:3)는 A4 한 장보다 길어진다. 사진과 같은 높이 상한을 준다.
     여기선 이미 로딩이 끝난 뒤라 width: auto 가 문제 되지 않는다 */
  .cover img { width: auto; max-width: 100%; height: auto; max-height: var(--photo-vh); }

  .section { padding-bottom: 32px; }
  .cv-section { padding-bottom: 24px; }
  .series-head { padding-bottom: 24px; }
  .photos { gap: 28px; }

  /* 사진 한 장, 약력 한 줄, 표지 한 칸이 다른 장으로 갈리지 않게 */
  figure, .photo, .cv-item, .series { break-inside: avoid; }

  /* 링크 글자만 남으면 종이에선 갈 곳이 없다. 주소를 뒤에 인쇄한다 */
  .social a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .social a[href^="mailto:"]::after { content: " (jeufilm2470@gmail.com)"; font-size: 0.85em; }

  /* 종이에선 아이콘 옆에 주소가 붙으므로 한 줄에 하나씩 세운다 */
  .social { flex-direction: column; align-items: flex-start; gap: 10px; }
  .social a { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; }

  /* 빈 사진 자리는 종이에선 회색 덩어리일 뿐이다 */
  .photo-frame.is-empty, .cover.is-empty, .portrait:not(.has-photo) { display: none; }
  .cover-alt { display: none; }
}