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

:root {
  color-scheme: light;

  /* 순백(#fff)이 아니라 아주 옅은 회색이다 — 순백은 글자 대비가 너무 세서 눈이 아프고,
     사진을 올렸을 때 흰 여백이 사진 흰자위와 붙어 버린다. 레퍼런스도 같은 계열.
     대비 수치는 아래 :root 주석과 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 위) — 캡션·비활성 목록 */
  --text-4: #7f8585;    /* 3.2:1 — 큰 글자(24px 이상) 전용. 두 줄 제목의 둘째 줄. 본문에 쓰지 말 것 */
  --stage: #dfe4e4;     /* 무대 — 바탕보다 한 단계 낮은 면. 폰 화면(#f6f6f6 안팎)이 그 위에서 떠오른다 */
  --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;   /* 레일 안 첫 칸(메뉴) 폭. 둘째 칸(작업 목록)이 그 오른쪽에 붙는다 */
}

*,
*::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-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.rail-role {
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

.rail-name {
  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);
}

/* 둘째 칸 — 작업(앱) 목록. 비활성은 흐리게, 지금 페이지만 밝게 */
.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 같은 소수점 폭(확대·축소)에서 둘 다 거짓이라
   저작권이 둘 다 보인다(사진포폴 개발 1 코덱스 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; }
}

/* 창 안에서는 .wrap 이 아무 일도 하지 않는다 — 판면은 .pane 이 이미 잡았다 */
.pane .wrap { width: 100%; max-width: none; margin: 0; padding: 0; }

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

.ed-grid { display: block; }

.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);
}

/* ── 작업 목록 (홈) ───────────────────────────────────────────────────── */

/* 왼쪽 칸에 연월과 상태가 포개지고, 오른쪽에 이름과 종류. 표가 아니라 약력 줄로 읽히게
   폭을 묶는다 — 창 전체로 늘어나면 오른쪽 끝의 글자가 왼쪽과 따로 논다 */
.works { max-width: 620px; }
/* 첫 줄 위와 마지막 줄 아래에는 괘선을 두지 않는다 — 제목 바로 밑의 선은 제목에
   밑줄을 그은 것처럼 읽힌다. 괘선은 항목 «사이»에만 있다 */
.works > li + li { border-top: 1px solid var(--line); }

.work {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
}

.work-when { display: block; }

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

.work-status {
  display: block;
  font-size: 12.5px;
  color: var(--text-2);
}
.work-status.is-soon { color: var(--text-3); }

.work-main { display: block; min-width: 0; }

.work-title {
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  transition: color 0.2s var(--ease);
}

.work-kind {
  display: block;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-3);
}

a.work:hover .work-title { color: #000000; }
a.work:hover .work-kind { color: var(--text-2); }

/* ── 소개 · 연락 ──────────────────────────────────────────────────────── */

/* 사진 자리 — 태운이 실물을 주면 프레임 안에 img 를 넣고 is-empty 를 뗀다 */
.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; }

/* 연락처 — 아이콘 셋만 나란히. 글자를 함께 두면 다시 목록처럼 무거워진다 */
.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); }

/* ══════════════════════════════════════════════════════════════════════
   앱 상세 페이지
   ══════════════════════════════════════════════════════════════════════ */

.app-head { padding: 0 0 68px; }

.app-kind {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-3);
}

/* 받는 곳 — 사이트에서 유일하게 버튼을 쓰는 자리다(다른 곳은 전부 글자·괘선).
   옅은 회색 채움 + 진한 테두리 조합은 OS 대화상자처럼 보인다(태운 지적) — 채움이든 테두리든
   «하나만» 쓴다. 먹색으로 꽉 채우고 테두리는 없앴다.
   **버튼은 페이지당 하나뿐이다.** 저장소 링크 같은 곁가지는 버튼으로 만들지 않고
   본문(Features) 안에 글자(.ilink)로 둔다 — 상자가 둘이면 눈이 갈 곳이 흐려진다. */
.app-get {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.get-main {
  padding: 11px 20px;
  border-radius: 7px;
  background: var(--text);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.get-main:hover { background: #000000; }

/* 아직 안 나온 앱 — 같은 자리, 같은 치수, 죽인 색. 링크가 아니므로 손가락 커서도 뜨지 않는다 */
.get-soon {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* 본문 안에 섞이는 링크 — 밑줄 한 줄로만 표시한다 */
.ilink {
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
}
.ilink:hover { border-bottom-color: var(--text); }


/* 스크린샷 — 사진이 없는 칸은 .is-empty 로 비율만 잡아 자리를 지킨다.
   빈 프레임 안에 글자를 넣지 않는다. '준비 중'은 갤러리 위 .note 한 줄이 말한다. */
.shots {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}
.shots.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 넉 장 넘는 갤러리는 한 줄로 눕혀 가로로 넘긴다. 첫 세 장은 격자 때와 같은 크기이고
   넷째 장이 오른쪽에 살짝 걸려 «더 있다»를 말한다 — 화살표·점 표시는 두지 않는다.
   키보드로도 넘길 수 있게 마크업에서 tabindex="0" 과 aria-label 을 준다 */
.shots.is-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.shots.is-scroll .shot {
  flex: 0 0 calc((100% - 40px) / 3.25);
  scroll-snap-align: start;
}
.shots.is-scroll:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }

.shot { margin: 0; }

.shot-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.shot-frame.is-empty { aspect-ratio: var(--shot-ar, 9 / 19.5); }
.shot-frame img { display: block; width: 100%; height: auto; }

.shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-3);
}
.shot figcaption b { color: var(--text-2); font-weight: 500; }

.shots + .note { margin-top: 28px; }

/* 특징 — 불릿 대신 괘선 한 줄 */
.features { display: block; }
.feature {
  padding: 18px 0 20px;
  max-width: 720px;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature dt {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.feature dd {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
}

/* 다음 앱 */
/* 괘선 없이 여백만으로 떨어뜨린다 — 줄 두 개는 이 한 줄을 표처럼 보이게 했다 */
.next {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.next .k {
  flex: none;
  width: 88px;
  font-size: 13px;
  color: var(--text-3);
}
.next .v { font-size: 17px; color: var(--text); transition: color 0.2s var(--ease); }
.next .v .kind { color: var(--text-3); font-size: 14px; }
.next:hover .v { color: #000000; }

/* ── 장(章) — 앱 상세의 새 문법 (개발 10, 레퍼런스 buena.com) ─────────────
   두 줄 제목(첫 줄 명사 하나 · 둘째 줄 옅게, 사실 하나) → 무대. 문단은 없다. 마침표 없이. 장식은 여전히 없다:
   무대는 괘선도 그림자도 없는 면 한 장, 폰은 그 바닥에서 올라와 아래가 잘린다.
   움직임도 없다(스크롤 등장은 개발 7 에서 폐기) — 크기와 여백만으로 리듬을 만든다. */
.chapter { padding: 0 0 120px; }

.statement {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--text);
}
/* 둘째 줄은 새 줄에서 옅게. 스크린리더는 두 줄을 이어 읽는다(마침표가 없어 한 호흡으로 읽힌다) */
.statement span { display: block; color: var(--text-4); }


.stage {
  margin-top: 40px;
  padding: 64px 40px 0;
  background: var(--stage);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
  overflow: hidden;
}

/* 폰 한 대. 화면 윗부분만 보이고 무대 바닥에서 잘린다 — 모서리는 위쪽만 둥글다.
   곡률은 아이폰 화면 모서리(폭의 약 13.5%)에 맞췄다. 화면 바탕이 무대보다 밝아 윤곽은
   머리카락 한 줄이면 충분하다(그림자 없음) */
.phone {
  width: 280px;
  aspect-ratio: 780 / 1360;
  overflow: hidden;
  border-radius: 38px 38px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  background: #f6f6f6;
}
.phone img { width: 100%; height: auto; }

/* 두 대는 높이를 어긋나게 — 둘째가 한 뼘 낮게 올라온다 */
.stage.is-pair .phone { width: 248px; }
.stage.is-pair .phone + .phone { aspect-ratio: 780 / 1200; }
.stage.is-pair .phone { border-radius: 34px 34px 0 0; }

/* 맥 창(Kura) — 폰과 달리 자르지 않는다. 창 통째로 무대 가운데 뜬다.
   모서리·윤곽은 캡처(PNG, 모서리 투명)에 들어 있어 CSS 는 크기만 정한다 */
.stage.is-float { align-items: flex-start; padding: 56px 40px; }
.window { flex: none; width: 360px; }
.window img { width: 100%; height: auto; }
/* 두 장은 폰 쌍처럼 어긋나게 — 둘째가 한 뼘 낮게 */
.stage.is-float.is-pair .window { width: 300px; }
.stage.is-float.is-pair .window + .window { margin-top: 64px; }

/* 결제 흐름도 (Kura) — 스크린샷으로 대신할 수 없는 구조 설명 */
.flow { display: grid; gap: 0; width: min(100%, 360px); }
.flow-node {
  border: 1px solid var(--line);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
}
.flow-node small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-3);
}
.flow-node.is-key { border-color: var(--line-2); }

/* 마디를 잇는 세로선. 선을 가운데가 아니라 왼쪽 등뼈처럼 두어야 그 옆에 낱말을 붙일 수 있다 */
.flow-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding-left: 24px;
}
.flow-line { width: 1px; height: 100%; background: var(--line-2); }
.flow-tech {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

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

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

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

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

  .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; }

  /* 눕힌 레일에서는 Works 줄과 앱 목록이 붙어 한 덩어리로 읽힌다 — 사이를 벌리고,
     좁아서 줄이 넘칠 때 두 줄이 겹쳐 보이지 않도록 행 간격도 함께 준다 */
  .nav-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 20px;
    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;
  }

  .work { grid-template-columns: 78px minmax(0, 1fr); gap: 16px; }
  .work-title { font-size: 17px; }

  .app-name { font-size: 26px; }

  /* 좁은 화면에선 한 장씩 세로로. 세로 사진은 폭을 묶는다 */
  .shots,
  .shots.is-wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .shots:not(.is-wide) .shot { max-width: 260px; }
  .shots.is-scroll { gap: 16px; }
  .shots.is-scroll .shot { flex: 0 0 min(220px, 68vw); max-width: none; }

  .next { flex-direction: column; gap: 4px; }
  .next .k { width: auto; }

  .chapter { padding-bottom: 80px; }
  .statement { font-size: 24px; }
  /* 무대는 좁은 화면에서 좌우 끝까지 — 여백 안에 가두면 폰이 우표만 해진다 */
  .stage {
    margin-top: 32px;
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
    margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
    padding: 44px 20px 0;
    gap: 14px;
  }
  .phone { width: min(236px, 62vw); border-radius: 30px 30px 0 0; }
  .stage.is-pair .phone { width: min(170px, 42vw); border-radius: 22px 22px 0 0; }
  .stage.is-float { padding: 36px 20px; }
  .window { width: min(260px, 70vw); }
  .stage.is-float.is-pair .window { width: min(170px, 42vw); }
  .stage.is-float.is-pair .window + .window { margin-top: 32px; }
}

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

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

@media print {
  /* 종이에는 이동 장치가 없다. 레일에서 이름과 저작권만 남긴다 */
  .rail-nav, .skip, .next-section { 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);
  }

  /* min-height: 100vh 는 종이에선 «한 장을 다 차지한다»가 돼 저작권(.page-foot)이 늘 둘째 장 첫 줄로 밀렸다
     (실측 top = 1123px = A4 한 장, 개발 9 코덱스 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; }
  /* 저작권은 .rail-foot(넓은 화면)과 .page-foot(좁은 화면) 둘에 있고 화면 폭이 어느 쪽을 보일지 고른다.
     A4·레터 세로는 폭이 860px 아래라 좁은 화면 규칙에 걸린다 — 여기서 .page-foot 까지 숨기면
     종이에 저작권이 한 줄도 안 남는다. 그래서 인쇄에서는 아무것도 숨기지 않는다(둘 중 하나는 늘 보인다). */

  .section, .section-sm { padding-bottom: 32px; }
  .app-head { padding-bottom: 28px; }

  /* 이름과 설명, 그림과 캡션이 다른 장으로 갈리지 않게 */
  .feature, .shot, .work, .flow, figure, .stage { break-inside: avoid; }

  /* 무대는 잉크를 먹는 면이다 — 종이에선 면을 걷고 폰 윤곽만 남긴다 */
  .chapter { padding-bottom: 36px; }
  .stage { background: none; padding: 16px 0 0; margin-top: 20px; }
  /* 화면에선 무대 바닥에서 잘리지만 종이엔 바닥이 없다 — 화면 전체를 찍는다(개발 10 코덱스 P2) */
  .phone,
  .stage.is-pair .phone + .phone { aspect-ratio: auto; border-radius: 0; box-shadow: 0 0 0 1px var(--line); }
  .stage { align-items: flex-start; }

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

  /* 잉크를 칠하지 않는다 — 버튼은 종이에서 테두리만 남는다 */
  .get-main, .get-soon { background: none; color: #000000; padding: 0; }

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

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

  /* 종이는 가로로 넘길 수 없다 — 눕힌 갤러리를 줄바꿈해서 전부 찍는다 */
  .shots.is-scroll { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .shots.is-scroll .shot { flex: 0 0 calc((100% - 40px) / 3); }
}