/* index: style layer 4. Cascade order is intentional. */

/* ══════════════════════════════════════════════════════════════════════
   UX STUDIO Insight Journal Vol.2 — 스타일시트

   구성
     1. 폰트와 색·치수 토큰
     2. 타이포 라이브러리   ─ 프롤로그와 세 덱이 같은 값을 공유한다
     3. 표지
     4. 프롤로그 스크롤리텔링 ─ 캔버스 · 패널 · 도트 · 다음 장 표지
     5. 본문 공통          ─ 이미지 묶음 · 세대별 인사이트 덱
     6. 1. 위임의 조건 본문  ─ .theme1 안으로 가둔 별도 문서 스타일

   폰트는 assets/fonts/, 이미지는 assets/img/ 를 상대경로로 가리킨다.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════ 1. 폰트 ══════ */
@font-face {
  font-family: "Hyundai Sans Head Pro";
  src: url("../../assets/fonts/HyundaiSansHead-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hyundai Sans Head Pro";
  src: url("../../assets/fonts/HyundaiSansHeadPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Pretendard;
  src: url("../../assets/fonts/font-74ad042adbcd.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: Pretendard;
  src: url("../../assets/fonts/font-bccd761b2bad.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: Pretendard;
  src: url("../../assets/fonts/font-33c20b669c6f.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: Pretendard;
  src: url("../../assets/fonts/font-c62c778551f8.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
/* ── 줄바꿈 ─────────────────────────────────────────────────────────
   한국어는 어절(띄어쓰기 단위)을 지켜 넘긴다 — 낱말이 줄 끝에서 잘리지 않는다.
   한 낱말이 줄보다 길 때만 어쩔 수 없이 끊는다. */
html,
body,
p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
figcaption,
blockquote,
td,
th,
button,
label,
span,
div {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 교수 인터뷰 인용에 쓰는 명조 — Noto Serif KR (SIL OFL, assets/fonts/noto-serif-kr-OFL.txt).
   인용문에 나오는 글자만 남겨 추린 파일이라, 인용 문구를 고치면 다시 추려 넣어야 한다. */
@font-face {
  font-family: "Noto Serif KR";
  src: url("../../assets/fonts/font-640ad5447439.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif KR";
  src: url("../../assets/fonts/font-dfd45afd906a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2018-201D, U+2026;
}
@font-face {
  font-family: "Noto Serif KR";
  src: url("../../assets/fonts/font-2d9e1488e3a6.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif KR";
  src: url("../../assets/fonts/font-8c06aac25050.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2018-201D, U+2026;
}

/* ══════ 2. 색·치수 토큰과 바탕 ══════ */

/* 1920×1080을 기준 자로 삼는다 — 화면 해상도가 달라져도 이 비율이 유지된다.
1920×1080에서 --u = 10.8px 이므로, 20px = 1.8519u · 30px = 2.7778u 처럼 환산한다. */
:root {
  /* ── 글자 크기 한 번에 — 이 한 값이 저널 전체의 자다 ──────────────
     '전체적으로 너무 크다'(0918)는 말에 붙인 손잡이다. 모든 --*-size 가
     이 값을 곱한다. 0.88 = 한 급 작게. 더 줄이려면 이 숫자만 낮춘다.
     ⚠ 본문 style.css 와 덱 셋이 저마다 :root 를 가진다 — **네 곳 모두** 같은 값. */
  --type-scale: 0.88;
  --ink: #0d253d;
  --muted: #6e7f92;
  --hl: #ffe39e;
  --navy: #253c72;
  --u: min(1vh, 0.5625vw);
}
* {
  box-sizing: border-box;
}
html {
  background: #f7f7f3;
  overflow-x: hidden; /* 1-2·2-2·3-2의 100vw 배경(스카이라인 등)이
                                       스크롤바 폭만큼 삐져나와 오른쪽에 다른 색 여백이
                                       보이던 문제를 막는다 */
}
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(
    180deg,
    #fcefe6 0%,
    #fbf1e9 12%,
    #faf3ec 22%,
    #f8f5f0 32%,
    #f7f7f3 45%,
    #f7f7f3 60%,
    #f5f5f2 72%,
    #f1f1f2 82%,
    #edeef1 92%,
    #e9eaf0 100%
  );
  background-attachment: fixed;
  font-family:
    "Pretendard",
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Malgun Gothic",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── 히어로(표지) ── */
.hero {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: block;
  position: relative;
}

/* 1920×1080을 기준 자로 삼는다 — 화면이 어떤 비율이어도 표지의 비례가 유지된다 */
.cover {
  font-family:
    "Hyundai Sans Head Pro",
    "Pretendard",
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(6.5 * var(--u)) 6.25vw calc(6 * var(--u)) 6.4vw;
}
.cover-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
/* Cover emphasis uses a fine outline; the brand and Journal override it below. */
.cover h1,
.cover .vol,
.cover .pill,
.cover .lang,
.cover .lang button {
  font-synthesis: none;
  -webkit-font-synthesis: none;
  font-weight: 400;
  -webkit-text-stroke: 0.018em currentColor;
}

.cover h1 {
  margin: 0;
  /* 로고 크기의 기준(em) — 0929 에 1.25배(11.2u → 14u, 한계 28~132px → 35~165px) */
  font-size: clamp(35px, calc(14 * var(--u)), 165px);
}
/* 타이틀 로고 이미지(0922) — 크기·자리는 예전 글자 타이틀 그대로.
   h1 글자 크기(em)를 그대로 받아 화면 폭에 맞춰 함께 줄고 늘어난다.
   폭은 로고의 'UX INSIGHT'가 예전 글자 폭과 같아지는 값이다. */
.cover h1 .cover-logo {
  display: block;
  width: 5.52em;
  height: auto;
}
.cover-nav {
  display: flex;
  align-items: center;
  gap: calc(1.4 * var(--u));
  margin-top: calc(1.6 * var(--u));
  flex: 0 0 auto;

  /* 버튼 묶음만 80% 로 — 오른쪽 위에 붙은 채로 줄어든다 */
  transform: scale(0.8);
  transform-origin: 100% 0;
}
.pill,
.lang {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 14px rgba(37, 60, 114, 0.07);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  height: clamp(34px, calc(5.6 * var(--u)), 66px);
  padding: 0 clamp(14px, calc(2.3 * var(--u)), 28px);
  font-size: clamp(12px, calc(1.9 * var(--u)), 22px);
  transition: background 0.2s ease;
}
.pill:hover {
  background: #fbfaf8;
}
.pill .arr {
  font-size: 0.9em;
  transform: translateY(-0.05em);
}
button.pill {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ── 호(號) 고르기 드롭다운 ── */
.vol-pick {
  position: relative;
}
.vol-pick .pill {
  font-weight: 400;
}
/* 꺾쇠는 글자가 아니라 도형으로 그린다. ▾(U+25BE)는 Pretendard 에 없어서
   시스템 글꼴로 떨어지고, 그 한 글자만 굵기와 모양이 달라 보였다.
   ⚠ 꺾쇠는 글줄에서 빼내 오른쪽 여백에 띄운다. 글줄에 두면 그 폭과 사이 틈만큼
     'Vol.2'가 알약 한가운데에서 왼쪽으로 밀린다(0923 지적). */
.vol-pick .pill {
  position: relative;
  justify-content: center;
  /* 꺾쇠가 앉을 자리만큼 좌우로 똑같이 넓힌다 — 한쪽만 넓히면 글자가 또 밀린다 */
  padding-inline: calc(clamp(14px, calc(2.3 * var(--u)), 28px) + 0.95em);
}
/* 글줄 상자의 가운데와 글자 잉크의 가운데는 다르다 — 글꼴의 위아래 여백이
   같지 않아 'Vol.2'가 알약 한가운데보다 한 픽셀 위에 앉았다. 그만큼 내린다.
   KOR·ENG 도 같은 글꼴·같은 크기라 같은 만큼 떠 있었다(0923). 같은 값으로 내린다. */
.pill-label {
  display: inline-block;
  transform: translateY(0.065em);
}
.vol-pick .caret {
  position: absolute;
  top: 50%;
  /* 둥근 끝이 시작되는 자리(알약 높이의 절반)를 꺾쇠의 중심으로 삼는다 —
     오른쪽 여백이 자연스럽게 남고 글자와도 떨어진다. */
  right: calc(clamp(34px, calc(5.6 * var(--u)), 66px) / 2 - 0.3em);
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.32em solid currentColor;
  opacity: 0.5;
  transform: translateY(-50%);
  transition: transform 0.22s ease;
}
.vol-pick.open .caret {
  transform: translateY(-50%) rotate(180deg);
}
/* 닫힌 알약의 'Vol.2' — 꺾쇠는 절대 배치라 글줄 밖에 떠 있고 좌우 여백이 똑같으니, 글자의
   기준은 알약의 정확한 한가운데다(0929). 거기서 0.3em 만 왼쪽으로 민다 — 완전한 가운데는
   오른쪽 꺾쇠와 겹쳐 읽혀 덜 예뻤다. 0928 의 '꺾쇠 몫 절반'(1920 에서 약 14px)보다 훨씬 작다.
   em 이라 알약 크기를 따라간다. 세로 0.065em 은 .pill-label 공통값 그대로. */
.vol-pick .pill .pill-label {
  transform: translate(-0.3em, 0.065em);
}
.vol-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 100%;
  --pad: clamp(4px, calc(0.5 * var(--u)), 6px);
  --rad: clamp(10px, calc(1.5 * var(--u)), 18px);
  background: #fff;
  border-radius: var(--rad);
  padding: var(--pad);
  box-shadow: 0 10px 34px rgba(37, 60, 114, 0.16);
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--u));
  opacity: 0;
  transform: translate(-50%, -6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.16, 0.86, 0.3, 1);
  z-index: 7;
}
.vol-pick.open .vol-menu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.vol-menu button,
.vol-menu a {
  border: 0;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42em;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;

  /* 바깥 상자와 같은 중심을 갖는 모서리 — 안쪽 r = 바깥 r − 여백 */
  border-radius: calc(var(--rad) - var(--pad));
  height: clamp(28px, calc(4.76 * var(--u)), 56px);
  padding: 0 clamp(12px, calc(2.1 * var(--u)), 26px);
  font-size: clamp(12px, calc(1.9 * var(--u)), 22px);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.vol-menu button:hover,
.vol-menu a:hover {
  background: #f4f3ef;
}

/* 지금 보고 있는 호는 글자로 알리지 않고 채워서 알린다 — 언어 고르기와 같은 손짓 */
.vol-menu button.on,
.vol-menu button.on:hover,
.vol-menu a.on,
.vol-menu a.on:hover {
  background: var(--ink);
  color: #fff;
}
/* 바깥으로 나가는 표(↗)도 글줄에서 빼낸다 — 글줄에 두면 그만큼 'Vol.1' 이
   칸 한가운데에서 왼쪽으로 밀려 위의 'Vol.2' 와 줄이 어긋난다. */
.vol-menu [data-href] {
  position: relative;
}
.vol-menu .arr {
  position: absolute;
  top: 50%;
  right: 0.62em;
  font-size: 0.86em;
  opacity: 0.55;
  transform: translateY(-55%);
}
.lang {
  display: inline-flex;
  align-items: center;
  padding: clamp(3px, calc(0.42 * var(--u)), 5px);
}
.lang button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  height: clamp(28px, calc(4.76 * var(--u)), 56px);
  padding: 0 clamp(12px, calc(2.1 * var(--u)), 26px);
  font-size: clamp(12px, calc(1.9 * var(--u)), 22px);
  transition:
    background 0.22s ease,
    color 0.22s ease;
}
.lang button:hover {
  color: #000;
}
.lang button.on {
  background: var(--ink);
  color: #fff;
}
.lang button.on:hover {
  color: #fff;
}
.cover-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: var(--ink);
}
.cover .copy {
  font-size: clamp(11px, calc(1.62 * var(--u)), 19px);
  font-weight: 400;
  opacity: 0.4;
  letter-spacing: -0.005em;
}

/* 질문은 타이틀(T_Cover_00) 바로 밑에 선다(0928) — 왼쪽 선은 타이틀과
   같은 표지 여백(6.4vw)이다. 카피라이트는 우측 하단 로고 밑으로 옮겼다(0929, .cover-sign) */
.cover-edition {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  /* 글자 끝 → 질문 틈. 새 타이틀 SVG(0929)는 글자 밑 여백이 없어 여백만으로 틈을 만든다 —
     예전 SVG(밑 여백 포함) + 1.4u 와 같은 보이는 틈(1512 에서 약 30px) */
  margin-top: calc(3 * var(--u));
}

/* 표지 우측 하단 — 로고(T_Cover_11)를 위에, 카피라이트를 그 밑에 두고 오른쪽 끝을 맞춘다(0929).
   카피라이트 밑선이 표지 하단 줄이고, 로고는 그만큼 위로 올라선다 */
.cover-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(2 * var(--u));
}
.cover-sign .copy {
  text-align: right;
}
/* 표지 우측 하단 로고 — Vol.1 표지와 같은 크기로 (한 숫자만 고치면 된다) */
.cover-foot .brand {
  height: clamp(10px, calc(1.65 * var(--u)), 19px);
  width: auto;
  display: block;
}

/* Opening question shares the footer flow with the copyright. */
.cover-ask {
  pointer-events: none;
}
.cover-ask p {
  margin: 0;
  max-width: 24em;
  text-align: left;
  color: var(--navy);
  font-weight: 400;
  -webkit-text-stroke: 0;
  letter-spacing: 0;
  line-height: 1.45;
  word-break: keep-all;
  /* 표지 자(--u)를 따른다 — 1920×1080 에서 28px, 화면이 작아지면 타이틀과 같은 비율로 준다(0929).
     예전에는 28px 고정이라 맥북에서 타이틀만 작아지고 질문은 그대로였다 */
  font-size: clamp(16px, calc(2.5926 * var(--u)), 34px);
}

/* 표지에서 한 걸음 걸어 들어간 자리 — 표지 글자가 걷히고 이 글이 들어온다 */
.cover-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  will-change: opacity;
}
.cover-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.cover-layer.on {
  opacity: 1;
}
.cover-layer.on a,
.cover-layer.on button {
  pointer-events: auto;
}
.intro {
  padding: calc(9.4 * var(--u)) 6.3vw;
}
.intro h2 {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(21px, calc(3.2 * var(--u)), 38px);
  line-height: 1.35;
}
.intro p {
  margin: calc(1.5 * var(--u)) 0 0;
  color: var(--ink);
  font-weight: 500;
  width: calc(62 * var(--u));
  font-size: calc(1.8519 * var(--u));

  /* 본문은 어디서나 같은 크기 */
  line-height: calc(2.7778 * var(--u));
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.intro mark {
  background: var(--hl);
  color: var(--ink);
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 900px) {
  .intro {
    padding: 26px 5.4vw;
  }
  .intro h2 {
    font-size: clamp(19px, 4.6vw, 26px);
  }
  .intro p {
    font-size: clamp(13.5px, 3.3vw, 16px);
    line-height: 1.5;
    width: auto;
    max-width: 88vw;
  }
  .cover {
    padding: 26px 5.4vw 24px;
  }
  .cover h1 {
    font-size: clamp(28px, 8.8vw, 62px);
    line-height: 1;
  }
  .cover-nav {
    gap: 8px;
    margin-top: 4px;
  }
  .pill,
  .lang button {
    height: 32px;
    font-size: 12px;
    padding: 0 12px;
  }
  .lang {
    padding: 3px;
  }
  .cover-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ── 스크롤리텔링 ── */
.scrolly {
  position: relative;
}
.graphic {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}
#stage {
  width: 100%;
  height: 100%;
  display: block;
}
.steps {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.page {
  height: 100vh;
  height: 100dvh;
}

/* ── 오른쪽에 고정된 텍스트 패널 ── */
#panel {
  position: fixed;
  right: calc(7.2222 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(59.2593 * var(--u));
  z-index: 5;

  /* 1920 기준 640px */
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
#panel.on {
  opacity: 1;
}

/* 지금 보이는 글이 상자의 높이를 만든다 — 나머지는 흐름에서 빠져 겹쳐 놓인다 */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: calc(2.2222 * var(--u));

  /* 1920 기준 24px */
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 4px 8px 30px rgba(116, 104, 104, 0.1);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.3s ease,
    transform 0.44s cubic-bezier(0.16, 0.86, 0.3, 1);
  pointer-events: none;
}
.slide.on {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.slide.prev {
  opacity: 0;
  transform: translateY(-22px);
}

/* 글이 없는 자리는 상자도 함께 걷힌다 — 빈 상자만 남아 있지 않게 */
.slide:empty {
  display: none;
}
.slide h3 {
  margin: 0 0 calc(0.5556 * var(--u));
  color: var(--navy);
  font-weight: 700;
  font-size: calc(2.5926 * var(--u));

  /* 1920 기준 28px */
  line-height: calc(3.3333 * var(--u));

  /* 1920 기준 36px */
  letter-spacing: -0.023em;
  word-break: keep-all;
}
.slide p {
  margin: 0;
  opacity: 0.92;
  color: var(--ink);
  font-weight: 500;
  font-size: calc(1.8519 * var(--u));

  /* 1920 기준 20px */
  line-height: calc(2.7778 * var(--u));

  /* 1920 기준 30px */
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.slide mark {
  background: var(--hl);
  color: var(--ink);
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.dots {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 표지에서도 보인다 — 표지와 도입 글도 도트로 오갈 수 있는 자리다.
     프롤로그를 벗어나면 .hide 가 걷어 간다(js/03-crowd.js). */
  opacity: 1;
  transition: opacity 0.4s ease;
}
.dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(13, 37, 61, 0.18);
  transition:
    background 0.25s,
    transform 0.25s;
}
.dots button:hover {
  background: rgba(13, 37, 61, 0.38);
}
.dots button.on {
  background: #0d253d;
  transform: scale(1.25);
}
.dots.hide {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── 다음 장(챕터) 표지 — 버블이 뭉친 자리에서 원으로 열린다.
   클래스가 아니라 아이디로 좁힌다 — 사이드 내비의 .chapter(장 제목)와
   이름이 겹쳐 내비 항목이 통째로 화면 고정·투명 처리되고 있었다. */
#chapter {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  --r: 0px;
  --cx: 50%;
  --cy: 50%;
  --bl: 22px;
  --sc: 1.06;
  --fade: 1;
  -webkit-mask-image: radial-gradient(
    circle at var(--cx) var(--cy),
    #000 calc(var(--r) * 0.88),
    rgba(0, 0, 0, 0) var(--r)
  );
  mask-image: radial-gradient(
    circle at var(--cx) var(--cy),
    #000 calc(var(--r) * 0.88),
    rgba(0, 0, 0, 0) var(--r)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* (예전에는 표지가 사진 한 장이었다 — 지금은 .cover-art 레이어들이 대신한다) */

/* ── 본문(꼬리) 구간 ── */
#tail {
  position: relative;
  z-index: 8;
  background: #f7f7f3;
}
.shotset {
  position: relative;
  z-index: 2; /* 다음 섹션의 배경 워시가 표지 위로 올라오지 않게 */
  width: 100%;
  background: #fff;
  font-size: 0;
}
.shotset img {
  display: block;
  width: 100%;
  height: auto;
}
.deck {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}
.deck iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── 푸터 ── */
.foot {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  padding: 0 7vw;
  max-width: 1180px;
  margin: 0 auto;
}
.foot p {
  font-size: 13.5px;
  line-height: 2;
  color: var(--muted);
  margin: 0;
  max-width: 760px;
  font-weight: 500;
}
.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #5fc9a6, #9b83d6, #f09378);
  width: 0;
  z-index: 20;
  transition: width 0.18s ease-out;
}

/* 1920 기준 스펙이 --u 로 그대로 따라간다 — 좁은 화면만 따로 손본다 */
@media (max-width: 900px) {
  #panel {
    right: auto;
    left: 5vw;
    width: 90vw;
    top: auto;
    bottom: 9vh;
    transform: none;
  }
  .slide {
    padding: 18px;
  }
  .slide h3 {
    font-size: clamp(17px, 4.4vw, 22px);
    line-height: 1.29;
    margin-bottom: 5px;
  }
  .slide p {
    font-size: clamp(13.5px, 3.3vw, 16px);
    line-height: 1.5;
  }
  #panel.on {
    transform: none;
  }
  .slide {
    transform: translateY(18px);
  }
  .slide.prev {
    transform: translateY(-18px);
  }
  .dots {
    left: 10px;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }
}

/* ── 타이포 라이브러리 ─────────────────────────────────
피그마 값 (1920 프레임 기준 px → vw). 프롤로그와 세 덱이 같은 값을 쓴다.
카드 안 타이틀  Pretendard Bold 28 / 30 / -2.3%
카드 안 본문    Pretendard      20 / 30 / -2.3%          */
:root {
  /* ── 유동 타이포 — 창이 좁아지는 내내 글도 같이 줄어든다 ──────────
     1920 에서 시안 값, 760(그림판으로 갈리는 자리)에서 읽기 바닥값.
     그 사이를 곧게 잇는다: clamp(바닥, calc(a + b·vw), 뚜껑).
     ⚠ 예전에는 `clamp(14px, 1.0417vw, 22px)` 처럼 순수 vw 였는데, 바닥에
       1344px 에서 벌써 닿아 그 아래로는 **한 픽셀도 줄지 않았다** — 노트북
       폭에서 창을 줄여도 글자가 그대로라 '반응형이 아니다'로 읽혔다.
     ⚠ 세 덱(decks/theme*-generations.html)도 같은 값을 따로 들고 있다.
       한쪽만 고치면 본문과 덱의 글자가 갈라진다. */
  --t-h2-size: clamp(
    calc(20px * var(--type-scale)),
    calc((14.76px + 0.6897vw) * var(--type-scale)),
    calc(34px * var(--type-scale))
  );
  --t-h2-weight: 700;
  --t-h2-ls: -0.023em;
  --t-h2-lh: 1.333;
  --t-body-size: clamp(
    calc(14px * var(--type-scale)),
    calc((10.07px + 0.5172vw) * var(--type-scale)),
    calc(24px * var(--type-scale))
  );
  --t-body-weight: 400;
  --t-body-ls: -0.023em;
  --t-body-lh: 1.5;
  /* 1920 에서 640, 1100 에서 440 — 그 사이를 곧게 잇는다.
     해상도가 줄면 카드도 같이 줄어야 한다(회의 피드백 0918). 고정 640 이면
     1100 폭에서 화면의 58%, 900 에서 71% 를 차지해 그림이 가려졌다. */
  --card-width: clamp(440px, calc(171.7px + 24.39vw), 640px);

  /* 기사 본문의 자 — 1920 프레임의 px 을 vw 로 옮기고 바닥을 깐다.
     .theme1 안이든(1~3장 본문) 밖이든(에필로그) 같은 값으로 읽힌다. */
  --a-title-size: clamp(
    calc(28px * var(--type-scale)),
    calc((20.14px + 1.0345vw) * var(--type-scale)),
    calc(48px * var(--type-scale))
  );
  --a-h2-size: clamp(
    calc(20px * var(--type-scale)),
    calc((14.76px + 0.6897vw) * var(--type-scale)),
    calc(34px * var(--type-scale))
  );
  --a-body-size: clamp(
    calc(14px * var(--type-scale)),
    calc((10.07px + 0.5172vw) * var(--type-scale)),
    calc(24px * var(--type-scale))
  );
  --a-small-size: clamp(
    calc(10px * var(--type-scale)),
    calc((8.69px + 0.1724vw) * var(--type-scale)),
    calc(14px * var(--type-scale))
  );

  /* 인용 말풍선 — 덱과 같은 값 */
  --t-quote-size: clamp(
    calc(11px * var(--type-scale)),
    calc((9.03px + 0.2586vw) * var(--type-scale)),
    calc(16px * var(--type-scale))
  );
  --t-quote-lh: 1.45;
  --t-who-size: clamp(
    calc(10px * var(--type-scale)),
    calc((8.69px + 0.1724vw) * var(--type-scale)),
    calc(14px * var(--type-scale))
  );
}
#panel {
  width: var(--card-width);
  max-width: 92vw;
}
.slide h2,
.slide h3 {
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-ls);
  line-height: var(--t-h2-lh);
  margin: 0 0 0.34em;
}
.slide p {
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  letter-spacing: var(--t-body-ls);
  line-height: var(--t-body-lh);
}

/* ── 표지 하단 안내 — 카피라이트·로고와 같은 줄, 같은 밑선 ── */
.keyhint {
  display: flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  margin: 0;
  pointer-events: none;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: clamp(11px, calc(1.62 * var(--u)), 19px);
  opacity: 0;
  animation: keyhintIn 0.9s ease 1.4s forwards;
}
@keyframes keyhintIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 0.5;
    transform: none;
  }
}
.keyhint .keys {
  display: flex;
  gap: calc(0.45 * var(--u));
}
.keyhint .keys span {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 0.42em;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 6px rgba(37, 60, 114, 0.1);
  font-size: 0.82em;
  line-height: 1;
}
.keyhint .down {
  animation: keyhintNudge 1.9s ease-in-out infinite;
}
@keyframes keyhintNudge {
  0%,
  72%,
  100% {
    transform: translateY(0);
  }
  84% {
    transform: translateY(3px);
  }
}

/* ══════════ 1. 위임의 조건 — 본문 (1-1 · 1-2) ══════════
원래 따로 있던 문서를 그대로 옮겨 오되, 모든 셀렉터를 .theme1 안에 가둬
프롤로그·표지의 같은 이름 클래스(.pill, .copy 등)와 부딪히지 않게 했다. */
.theme1 {
  /* 본문 자신의 자는 :root 에 있다(에필로그가 .theme1 바깥이라 거기서도
     같은 값을 써야 한다). 얼굴·굵기·자간·행간 비율은 프롤로그의 --t-* 를 따른다 */

  --navy: #0d253d;
  --ink: #1a2638;
  --slate: #28415a;
  --muted: rgba(13, 37, 61, 0.7);
  --orange: #ff8700;
  --highlight: #ffe39e;
  --divider: #d4dde7;
  --nav-grey: #909090;
  --nav-black: #101010;
  --nav-line: #e0e0e0;
  --card-line: #e7ebf1;
  color-scheme: light;
}
.theme1 * {
  box-sizing: border-box;
}
.theme1 {
  margin: 0;
  padding: 0;
}
.theme1 {
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Malgun Gothic",
    "Apple SD Gothic Neo",
    sans-serif;
  background: #ffffff;
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.theme1 a {
  color: inherit;
  text-decoration: none;
}
.theme1 img {
  max-width: 100%;
  display: block;
}
.theme1 /* ---------- layout shell ---------- */ .shell {
  display: flex;
  align-items: flex-start;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px 72px;
}
.theme1 .sidenav {
  position: sticky;
  top: clamp(32px, 8vh, 96px);
  margin-left: calc(11.1111 * var(--u)); /* 1920 기준 120px */

  /* 왼쪽 도트 내비게이션과 겹치지 않게.
     폭 207px — 글자 14px 에서 3-3 '혼자의 회복과 함께의 여유'가 한 줄에 들어가는
     폭이다(0928, 200px 이면 세 줄로 흘렀다). 본문과 여유가 없는 1099px 이하는 아래에서 200px */
  flex: 0 0 207px;
  width: 207px;
  /* 내비는 화면에 고정돼 있다(#sidenav*) — 본문 제목 줄에 맞춰 앉힌다 */
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  /* 목차 간격은 14px 하나(0928) — 큰 항목끼리, 장 제목과 세부 목록, 세부 목록과
     다음 큰 항목 사이 모두. 세부 항목끼리는 붙는다 */
  gap: 14px;
}
.theme1 .sidenav .tag {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--nav-grey);
  text-transform: uppercase;
  font-weight: 400;
}
.theme1 .sidenav .chapter {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--nav-black);
  text-transform: uppercase;
  font-weight: 500;
}
.theme1 .sidenav .sub-list {
  display: flex;
  flex-direction: column;
}
/* 세부 항목은 32px, 두 줄짜리 '세대별 인사이트'(1-3 · 2-3 · 3-3)는 53px(0928) */
.theme1 .sidenav .sub-item {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.theme1 .sidenav .sub-item:has(.txt br) {
  height: 53px;
}
.theme1 .sidenav .sub-item:focus-visible {
  outline: 2px solid rgba(37, 60, 114, 0.45);
  outline-offset: 4px;
}
.theme1 .sidenav .sub-item .bar {
  flex: 0 0 2px;
  width: 2px;
  height: 100%;
  background: var(--nav-line);
  transition: background 0.25s ease;
}
/* 대제목도 누를 수 있다 — 그 장 표지로 데려간다 */
.theme1 .sidenav [data-jump] {
  cursor: pointer;
  transition: color 0.25s ease;
}
.theme1 .sidenav [data-jump].is-hover {
  color: var(--nav-black);
}
.theme1 .sidenav [data-jump]:focus-visible {
  outline: 2px solid rgba(37, 60, 114, 0.4);
  outline-offset: 3px;
}
.theme1 .sidenav .sub-item .lbl {
  /* ⚠ **왼쪽 맞춤을 못 박아 둔다.** 두 줄짜리 항목(1-3·2-3·3-3)에서 둘째 줄이
     가운데로 밀려 보인다는 지적이 있었다(0918) — 물려받은 text-align 이
     가운데였다. 물려받지 않도록 여기서 정한다. */
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: rgba(16, 16, 16, 0.4);
  white-space: nowrap;
  transition:
    color 0.25s ease,
    font-weight 0.25s ease;
}
/* ⚠ **번호는 줄맞춤에 끼지 않는다.**(0918) 두 줄짜리 항목에서 둘째 줄이
   번호 밑까지 들어와 글자 머리가 어긋나 보였다. 번호를 따로 떼어 왼쪽에
   걸고, 글자 덩어리만 한 기둥에 세운다 — 이른바 내어쓰기(hanging indent).
   em 으로 어림잡지 않고 실제 번호 폭만큼 밀리도록 flex 로 짠다. */
.theme1 .sidenav .sub-item .lbl {
  display: flex;
  align-items: baseline;
  gap: 0.34em;
}
/* 숫자 칸은 늘 같은 폭이어야 한다 — 글꼴 숫자 폭이 제각각이고(1 과 2 가 다르다)
   고른 항목은 굵어지기까지 해서, 그대로 두면 항목마다 글자 기둥이 흔들린다. */
.theme1 .sidenav .sub-item .lbl .num {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 2.25em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.theme1 .sidenav .sub-item .lbl .txt {
  flex: 0 1 auto;
  min-width: 0;
}
/* 지금 읽는 절(.active, 스크롤스파이)과 가리키는 절(.is-hover, navHover)은 같은 모습이다 */
.theme1 .sidenav .sub-item:is(.active, .is-hover) .bar {
  background: #101010;
}
.theme1 .sidenav .sub-item:is(.active, .is-hover) .lbl {
  color: #101010;
  font-weight: 600;
}
.theme1 main {
  flex: 1 1 auto;
  min-width: 0;
}
/* ── 사이드 내비 — 화면에 고정, 장 본문을 읽는 동안에만 보인다 ──
   보일지 말지는 js(05-deck-here.js 의 syncSidenav → fadeNav)가 .on 으로 정하고,
   여기서는 나타나고 사라지는 페이드만 맡는다. 사라질 때 visibility 를
   opacity 가 다 빠진 뒤에 거둬야 페이드아웃이 끝까지 보인다. */
#sidenav,
#sidenav2,
#sidenav3 {
  position: fixed;
  left: calc(11.1111 * var(--u)); /* 1920 기준 120px */
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
  z-index: 7;
}
#sidenav.on,
#sidenav2.on,
#sidenav3.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0s;
}
/* 내비가 flex 자리에서 빠져나온 만큼 본문이 너무 왼쪽에 붙지 않게 여백을 둔다 */
#theme1 main,
#theme2 main,
#theme3 main {
  margin-left: 48px;
}
/* ── 좁은 화면의 내비 ────────────────────────────────────────────────
   예전에는 1080px 아래에서 통째로 감췄다. 목차가 사라져 지금 어디쯤인지
   알 수 없었다. 이제는 폭에 따라 모양만 바꿔 늘 남는다.
   1080~861px : 세로 목차를 좁혀서 그대로
   860px 이하 : 화면 아래에 붙는 납작한 가로 막대 */
@media (max-width: 1099px) {
  .theme1 .sidenav {
    flex: 0 0 200px;
    width: 200px;
  }
}
@media (max-width: 1080px) {
  .theme1 .sidenav {
    flex: 0 0 148px;
    width: 148px;
    gap: 14px;
  }
  #sidenav,
  #sidenav2,
  #sidenav3 {
    left: 16px;
  }
  .theme1 .sidenav .tag {
    font-size: 12px;
  }
  .theme1 .sidenav .chapter {
    font-size: 15px;
  }
  .theme1 .sidenav .sub-item .lbl {
    font-size: 12px;
  }
  .theme1 .shell {
    padding: 0 20px 0 180px;
  }
  #theme1 main,
  #theme2 main,
  #theme3 main {
    margin-left: 0;
  }
}
@media (max-width: 860px) {
  #sidenav,
  #sidenav2,
  #sidenav3 {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
  }
  .theme1 .sidenav {
    position: static;
    flex: none;
    width: auto;
    /* 위쪽을 넉넉히 — 8px 이었을 때 칸이 바 천장에 바짝 붙어 답답했다
       (태블릿 폭에서 목차가 화면 아래 가로 막대로 바뀐다) */
    padding: 16px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid rgba(13, 37, 61, 0.08);
    box-shadow: 0 -4px 20px rgba(13, 37, 61, 0.06);
  }
  .theme1 .sidenav::-webkit-scrollbar {
    display: none;
  }
  .theme1 .sidenav .tag {
    display: none;
  } /* 다른 장으로 뛰는 칸은 접는다 */
  .theme1 .sidenav .chapter {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    padding-right: 10px;
    border-right: 1px solid rgba(13, 37, 61, 0.1);
    font-size: 13px;
    white-space: nowrap;
  }
  .theme1 .sidenav .sub-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0;
  }
  .theme1 .sidenav .sub-item,
  .theme1 .sidenav .sub-item:has(.txt br) {
    height: auto;
  }
  .theme1 .sidenav .sub-item {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(13, 37, 61, 0.05);
  }
  .theme1 .sidenav .sub-item .bar {
    display: none;
  }
  .theme1 .sidenav .sub-item .lbl {
    font-size: 12px;
    white-space: nowrap;
  }
  .theme1 .sidenav .sub-item.active {
    background: rgba(13, 37, 61, 0.9);
  }
  .theme1 .sidenav .sub-item.active .lbl {
    color: #fff;
  }
  .theme1 .shell {
    padding: 0 20px 76px;
  } /* 아래 막대만큼 자리를 비운다 */
  #theme1 main,
  #theme2 main,
  #theme3 main {
    margin-left: 0;
  }
}
/* 2-2 는 게이지로 끝난다 — 그림이 상자 끝까지 차 있어서 아래 여백이 두 배로
   보였다. 이 절만 아래 여백을 절반으로 줄인다. */
.theme1 #sec-22 {
  padding-bottom: 45px;
}
.theme1 /* ---------- generic section chrome ---------- */ .story-section {
  position: relative;
  padding: 150px 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  isolation: isolate;
}
.theme1 .story-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90px;
  bottom: auto; /* 아래로 끝없이 끌지 않는다 — 아래는 흰색 */
  height: 56%;
  left: 50%;
  /* 화면 끝에서 끝까지 — 예전에는 1500px 타원이라 양옆에 흰 여백과
     둥근 경계가 드러났다. 이제 가로로 화면을 넘겨 채우고, 아래쪽만
     마스크로 부드럽게 풀어 준다. */
  transform: translateX(-50%) rotate(-1.2deg);
  width: 132vw;
  max-width: none;
  background: linear-gradient(190deg, #f3e7ff 44%, #c7d6ff 88%);
  opacity: 0.32;
  filter: blur(70px);
  border-radius: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    #000 16%,
    #000 52%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    #000 16%,
    #000 52%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}
/* 배경 그라디언트가 덮는 높이 — 그 아래는 흰 바탕 */
/* 1-1 은 씬 아랫변(그림이 끝나는 자리)까지 색을 데리고 내려간 뒤,
   그 아래로 넉넉히 퍼지며 풀린다. 마스크의 '진한 구간'을 씬 밑까지 늘렸다. */
.theme1 #sec-11::before {
  height: 81.32%; /* 끝나는 자리를 10px 위로 */
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    #000 10%,
    #000 75%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    #000 10%,
    #000 75%,
    rgba(0, 0, 0, 0) 100%
  );
}
.theme1 #sec-12::before {
  height: 40%;
}

/* ── 장마다 테마 컬러가 다르다 ──────────────────────────────
   1장 핑크 → 보라 → 파랑   (위 기본값)
   2장 연두 → 하늘          (#F2FCF1 → #E8EDFC)
   3장 하늘 → 주황          (#F4FAFD → #FEF5EC)
   흐릿하게 깔리는 배경이라 채도를 조금 올려 잡아야 시안만큼 보인다 */
#theme2 .story-section::before {
  background: linear-gradient(100deg, #c7d6ec 0%, #d3e6e3 100%);
}
#theme3 .story-section::before {
  background: linear-gradient(100deg, #f9e3c7 0%, #e0eff9 100%);
}

.theme1 .fade-floor {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 420px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 62%);
  pointer-events: none;
}
.theme1 .intro-block {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme1 .intro-block h1 {
  margin: 0;
  font-weight: 800;
  font-size: var(--a-title-size);
  line-height: var(--t-title-lh);
  letter-spacing: var(--t-title-ls);
  color: var(--t-title-color);
  color: var(--ink);
  opacity: 0.92;
}
.theme1 .intro-block p {
  margin: 0;
  font-weight: var(--t-body-weight);
  font-size: var(--a-body-size);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  color: var(--slate);
  opacity: 0.92;
}
.theme1 mark.hl {
  background: var(--highlight);
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 700;
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.theme1 strong {
  font-weight: 700;
}
.theme1 .body-copy {
  width: 100%;
  max-width: 580px;
  font-size: var(--a-body-size);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  color: var(--slate);
  opacity: 0.92;
  margin: 0;
}
.theme1 .section-title {
  font-weight: var(--t-h2-weight);
  font-size: var(--a-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
  color: var(--navy);
  opacity: 0.9;
  text-align: center;
  margin: 0 0 4px;
}
.theme1 /* ---------- quote bubble ---------- */ .quote-bubble {
  position: relative;
  max-width: 400px; /* 덱 말풍선과 같은 최대 폭 */
  /* 몸통과 꼬리를 '한 덩어리'로 묶는다 — 표지의 .cv-bubble 과 같은 방식.
     둘을 각각 반투명하게 칠하면 겹친 자리가 두 겹이 되어 어두운 띠가 생기고,
     겹치지 않게 딱 붙이면 반올림 탓에 1~2px 밝은 틈이 보인다.
     그래서 칠은 불투명하게 하고, 투명도는 마지막에 한 번만 준다. */
  background: #2f2a3a;
  opacity: 0.8;
  color: #fff;
  padding: 15px 19px;
  border-radius: 12px 12px 12px 0;
  font-size: var(--t-quote-size);
  font-weight: 500;
  line-height: var(--t-quote-lh);
  letter-spacing: -0.01em;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* 말한 사람 — 덱과 같이 한 단계 작고 절반만 드러난다 */
.theme1 .quote-bubble .qwho {
  display: block;
  margin-top: 0.72em;
  font-size: var(--a-small-size);
  font-weight: 400;
  letter-spacing: -0.005em;
  opacity: 0.5;
}
/* 꼬리 — 붙는 변만 1px 안으로 들여 겹치고, 뾰족한 끝은 제자리에 둔다.
   몸통이 불투명해졌으므로 겹쳐도 한 겹으로 보이고 틈도 생기지 않는다. */
.theme1 .quote-bubble::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  width: 16px;
  height: 15px;
  background: #2f2a3a; /* 그 모서리에서 잰 몸통 색 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.theme1 /* ================= SCENE 1 : ellipse gathering ================= */ .scene-wrap {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.theme1 .scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1200/620;
  margin-top: 12px;

  /* 씬 안의 칩·카드 치수는 화면이 아니라 '씬 너비'를 자로 삼는다.
     1200px 짜리 씬을 기준으로 그렸으므로 12px = 1cqw 로 환산한다. */
  container-type: inline-size;
}
/* ── 1-1 씬 (시안 1-1_1.svg · 1200×625) ───────────────────────────
   흰 바탕 위에 차 한 대와 사람들만 놓인다. 예전의 타원 글로우는 걷어냈다.
   위로 갈수록 옅어지는 시안의 세로 마스크는 .scene-cast 에 그대로 건다. */
#scene1 {
  --person-hover-scale: 1.16;
  aspect-ratio: 1200/625;
}
/* 바닥에 깔리는 타원 — 가운데는 비고 테두리로 갈수록 하얘진다 */
#scene1 .ellipse-glow {
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  height: 65%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.16) 74%,
    rgba(255, 255, 255, 0) 92%
  );
  border-radius: 50%;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}
#scene1 .ellipse-white {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 88.33%;
  height: 79.03%;
  background: radial-gradient(
    ellipse closest-side,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
#scene1 .scene-cast {
  position: absolute;
  inset: 0;
}
/* 위로 갈수록 옅어지게 하려고 씬 상자를 흰 그라디언트로 덮던 막(.cast-fade)은
   걷어냈다. 바탕이 흰색일 때는 보이지 않았지만, 뒤에 보라 그라디언트가 깔리자
   씬 상자 크기 그대로의 '흰 네모'가 드러났다(양옆에 세로 경계선까지).
   결은 사람 실루엣 자체의 농도로 충분하다. */
#scene1 .car-figure {
  position: absolute;
  left: 37.75%;
  top: 32.48%; /* 시안보다 20px 위로 */
  width: 25.33%;
  height: 32%;
  transform: none;
  z-index: 1;
  opacity: 1;
}
#scene1 .car-shadow {
  position: absolute;
  left: 37%;
  top: 53.8%; /* 차와 함께 20px 위로 */
  width: 26.1%;
  height: 3.4%;
  z-index: 0;
  background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 100%);
  filter: blur(3px);
  pointer-events: none;
}
#scene1 .figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* 시안이 그림을 상자에 맞춰 늘려 쓴다 */
  pointer-events: auto;
  cursor: pointer;
}
#scene1 .car-figure {
  object-fit: fill;
}
.theme1 .quote-bubble.scene-quote {
  position: absolute;
  right: 2%;
  top: 4%;
  /* 씬 안의 다른 층들보다 위에 있어야 한다 —
     아래에 두면 흰 막이 55%로 덮여 말풍선 색이 바래 보였다 */
  z-index: 9;
  max-width: 340px;
  /* 말풍선이 사람 위에 겹치면 그 사람에 손을 올릴 수 없다 — 입력은 흘려보낸다 */
  pointer-events: none;
}
/* ── 사람 고르기 ────────────────────────────────────────
   처음에는 한 사람만 또렷하고 나머지는 30%. 다른 사람 위에 손을 올리면
   그 사람이 또렷해지고 나머지가 물러난다. 실루엣 모양 그대로 반응하도록
   상자는 입력을 받지 않고 그림만 받게 해 둔다. */
.theme1 .figure {
  position: absolute;
  z-index: 2;
  opacity: 0.3;
  transition: opacity 0.42s ease;
  pointer-events: none;
}
.theme1 .figure.lead {
  opacity: 1;
}
.theme1 .figure svg {
  pointer-events: visiblePainted;
  cursor: pointer;
}
/* 1-1 원형 씬 — 호버된 사람은 30% 더 크게. 서 있는 자리(바닥)를 기준으로
   커지도록 아래 가운데를 기준점으로 둔다 */
#scene1 .figure {
  transition:
    opacity 0.42s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
  transform-origin: 50% 100%;
}
#scene1 .figure.lead {
  transform: scale(var(--person-hover-scale));
  z-index: 6;
}

/* 말풍선은 고른 사람 옆으로 옮겨 간다 */
.theme1 .quote-bubble.scene-quote {
  transition:
    opacity 0.3s ease,
    left 0.42s cubic-bezier(0.16, 0.86, 0.3, 1),
    top 0.42s cubic-bezier(0.16, 0.86, 0.3, 1);
}
/* ── 씬 말풍선의 꼬리 — **왼쪽 위** (0918, 시안 bubble_lt2.svg) ──────
   시안의 꼬리는 상자 **왼쪽 변 바깥**의 맨 위에 붙어 왼쪽을 가리킨다
   (401×76 상자에 20×20 삼각형: M20 20 V0 H0 Z). 그래서 말풍선은 머리의
   **오른쪽 아래**에 서고, 꼬리 끝이 머리를 향한다 — 예전에는 머리 위에 서서
   꼬리가 왼쪽 아래를 가리켰다.
   .flip(자리가 없어 머리 왼쪽에 설 때)은 오른쪽 변 바깥에 같은 모양으로 붙는다.
   ⚠ 꼬리 자리를 바꾸면 js/07-theme1-article.js 의 `top` 셈도 같이 바꿔야 한다
     — 그 둘이 어긋나면 꼬리가 아무도 안 가리킨다. */
.theme1 .quote-bubble.scene-quote {
  border-radius: 0 12px 12px 12px;
}
.theme1 .quote-bubble.scene-quote::after {
  left: auto;
  right: calc(100% - 1px);
  top: 0;
  bottom: auto;
  width: 20px;
  height: 20px;
  background: #2f2a3a; /* 그 모서리에서 잰 몸통 색 */
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.theme1 .quote-bubble.scene-quote.flip {
  border-radius: 12px 0 12px 12px;
}
.theme1 .quote-bubble.scene-quote.flip::after {
  right: auto;
  left: calc(100% - 1px);
  background: #2f2a3a;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.theme1 .figure svg {
  width: 100%;
  height: 100%;
  display: block;
}
.theme1 /* ================= PERSON ROW (section 2) ================= */ .person-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 36px 0 0;
  max-width: 1050px;
}
.theme1 .person-row {
  /* 예전에는 흐름도(flow-diagram.webp) 아래 알약과 겹치도록 -44px 로 끌어올렸다.
     그 그림을 걷어 냈으므로 끌어올릴 것도 없다 — 대신 머리 위에 말풍선이 설
     자리를 비워 둔다. 이 자리가 없으면 말풍선이 위로 밀려 올라가 바로 위의
     소제목을 덮는다(말풍선 top 은 상자 안에서 1% 아래로는 못 내려간다). */
  margin-top: 0;
  padding: 80px 0 0;
  align-items: flex-end;
  position: relative;
  z-index: 0;
  pointer-events: none;
}
/* Personalisation light: preserve the supplied SVG ratio, with its oval at foot level. */
.theme1 .row-lamp {
  position: absolute;
  top: 28px;
  height: calc((100% - 28px) * 354 / 332.5);
  aspect-ratio: 162 / 354;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  transition: left 0.52s cubic-bezier(0.16, 0.86, 0.3, 1);
}
.theme1 .row-lamp .lamp-cone {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.34s ease;
}
.theme1 .row-lamp.lit .lamp-cone {
  opacity: 1;
}

/* Both floor shadows stay out of layout and cannot intercept person hover events. */
.theme1 .person-row .person-shadow {
  position: absolute;
  inset: 0;
  transform: matrix(1, 0, -0.4, -0.085, 0, 0);
  transform-origin: center bottom;
  opacity: 0;
  transition: opacity 0.34s ease;
  pointer-events: none;
}
.theme1 .person-row .figure-static .person-shadow svg {
  filter: blur(4px);
  pointer-events: none;
}
.theme1 .person-row .figure-static::after {
  content: "";
  position: absolute;
  left: 7%;
  bottom: -4.94%;
  width: 86%;
  height: 13%;
  background: radial-gradient(ellipse, rgba(58, 63, 82, 0.165), rgba(58, 63, 82, 0.084) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.34s ease;
  pointer-events: none;
  z-index: 0;
}
/* Share the light's on/off state, including its delay while moving between people. */
.theme1 .person-row:has(> .row-lamp.lit) .figure-static.lead .person-shadow {
  opacity: 0.085;
}
.theme1 .person-row:has(> .row-lamp.lit) .figure-static.lead::after {
  opacity: 1;
}
.theme1 .person-row .figure-static > svg {
  position: relative;
  z-index: 1;
}

/* 사람은 빛 위에 선다 */
.theme1 .person-row .figure-static {
  position: relative;
  z-index: 1;
}

.theme1 .person-row .figure-static {
  /* 키는 사람마다 다르다(웅크린 이, 손을 든 이) — 상자를 고정하지 않고
     발끝이 한 줄에 서도록 아래를 맞춘다 */
  height: auto;
  align-self: flex-end;

  /* 1-1 장면과 같은 방식 — 한 사람만 또렷하고 나머지는 30% */
  opacity: 0.3;
  transition: opacity 0.42s ease;
  pointer-events: none;
}
.theme1 .person-row .figure-static.lead {
  opacity: 1;
}
/* 실루엣 색을 더 또렷하게 — 채도 +40%.
   (밝기를 올리면 흰 바탕에서 오히려 흐려져 반대로 간다) */
.theme1 .person-row .figure-static svg,
.theme1 .scene .figure svg {
  filter: saturate(1.4) contrast(1.06);
}
.theme1 .person-row .figure-static svg {
  pointer-events: visiblePainted;
  cursor: pointer;
}

/* 줄 위에 뜨는 말풍선 */
.theme1 .quote-bubble.row-quote {
  position: absolute;
  z-index: 5;
  max-width: min(400px, 36cqw);
  pointer-events: none;
  transition:
    left 0.42s cubic-bezier(0.16, 0.86, 0.3, 1),
    top 0.42s cubic-bezier(0.16, 0.86, 0.3, 1);
}
.theme1 .quote-bubble.row-quote.flip {
  border-radius: 12px 12px 0 12px;
}
.theme1 .quote-bubble.row-quote.flip::after {
  left: auto;
  right: 0;
  background: #2f2a3a;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* Shared head-anchored quotes — 꼬리는 몸통의 **아래 모서리**에만 붙는다 (0922).
   기본은 왼쪽 아래(말풍선이 머리 오른쪽 위에 선다), 자리가 모자라면 .flip 으로
   오른쪽 아래(머리 왼쪽 위에 선다). 꼬리 끝이 곧 머리의 x 이다 — JS 가 그렇게 놓는다. */
.theme1 .quote-bubble:is(.scene-quote, .row-quote) {
  border-radius: 12px 12px 12px 0;
  width: min(400px, 90%);
  max-width: min(400px, 90%);
}
.theme1 .quote-bubble:is(.scene-quote, .row-quote)::after {
  left: 0;
  right: auto;
  top: calc(100% - 1px);
  bottom: auto;
  width: 20px;
  height: 20px;
  transform: none;
  background: #2f2a3a;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.theme1 .quote-bubble:is(.scene-quote, .row-quote).flip {
  border-radius: 12px 12px 0 12px;
}
.theme1 .quote-bubble:is(.scene-quote, .row-quote).flip::after {
  left: auto;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.theme1 .person-row .figure-static.wide {
  flex: 0 0 auto;
}
.theme1 .person-row .figure-static svg {
  /* 키는 사람마다 다르다(--fh, 시안 값). 좁은 화면에서 여섯이 한 줄에 안 들어가면
     JS(fitRow)가 --row-k 를 줄여 줄 전체를 같은 비로 작게 만든다 —
     한 사람만 줄이면 서로의 키 관계가 무너진다. */
  height: calc(var(--fh, 180) * 1px * var(--row-k, 1));
  width: auto;
  display: block;
  margin: 0 auto;
}

/* 시안처럼 두 갈래 사이 오른쪽에 얹는다 (예전에는 흐름도 위에 가운데로 떠 있었다) */
.theme1 .flow-wrap {
  position: relative;
}
.theme1 /* ================= FLOW DIAGRAM ================= */ .flow-wrap {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;

  /* 알약 크기의 기준자 — 창이 아니라 이 상자의 폭을 따른다 */
  container-type: inline-size;
}
/* 알약은 창 폭을 따라 함께 줄어든다. 예전에는 15px 로 못박혀 있어
   1200px 아래에서 오른쪽 끝(Instant Like · Add Playlist)이 잘렸다 */
.theme1 .pill {
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, 0.84cqw, 10px);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 5px clamp(9px, 1.34cqw, 16px) 5px 5px;
  white-space: nowrap;
  font-size: clamp(11px, 1.25cqw, 15px);
  letter-spacing: -0.36px;
  color: #253b50;
}
.theme1 /* ================= CHARTS ================= */ .chart-block {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.theme1 /* ================= INTERVIEW QUOTE CARD ================= */ .pull-quote-card {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.theme1 .pull-quote {
  position: relative;
  text-align: center;
  /* 시안 스펙 — Noto Serif KR Medium 26 / 38 / -2.3%, 580 폭.
     크기는 본문과 같은 자(1920 에서 26px)로 창 폭을 따라간다. */
  font-family: "Noto Serif KR", "Pretendard", serif;
  font-weight: 600; /* 세미볼드 */
  font-size: clamp(18px, calc(12.76px + 0.6897vw), 31px);
  line-height: 1.4615;
  letter-spacing: -0.023em;
  padding: 0;
  max-width: 580px;
  background: linear-gradient(100deg, #dc83c4, #8268cd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.theme1 .avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.theme1 .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(145deg, #eef1ff, #f6e9ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa3c9;
  overflow: hidden;
}
.theme1 .avatar svg {
  width: 52px;
  height: 52px;
}
.theme1 /* 인터뷰 사진 — 원 안에 얼굴이 오도록 잡아 준다 */ /* 원 안에 얼굴이 오도록 잡아 준다 — 원본 628×340 에서 얼굴은 (320, .theme1 150) 즈음 */ .avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 52% 50%;
  transform: scale(1.55) translateY(6px);
}
/* 두 번째·세 번째 인용은 이름표를 가로 한 줄로 (시안) —
   첫 인용만 사진을 크게 세워 두는 원래 형태를 유지한다 */
.theme1 .pull-quote-card.compact .avatar-wrap {
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.theme1 .pull-quote-card.compact .avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
.theme1 .pull-quote-card.compact .avatar-name b,
.theme1 .pull-quote-card.compact .avatar-name span {
  text-align: left;
}
.theme1 .pull-quote-card.compact .avatar-name span {
  font-size: calc(var(--a-body-size) * 1.05);
  margin-top: 1px;
}
.theme1 .avatar-name b {
  display: block;
  text-align: center;
  font-size: var(--a-h2-size);
  font-weight: 400;
  background: none;
  color: #28415a;
}
.theme1 .avatar-name span {
  display: block;
  text-align: center;
  font-size: calc(var(--a-body-size) * 0.9);
  color: #88929c;
  margin-top: 2px;
}
.theme1 main {
  /* 본문 마지막 칸과 세대별 인사이트 덱 사이 — 세 테마가 다 이 값을 쓴다.
     180px 이었는데 본문 칸 제 아래 여백(45px)까지 더해 225px 이 비어,
     덱으로 넘어가기 전에 흰 판만 한참 지나갔다. 72px 로 줄였다(합 117px). */
  padding-bottom: 72px;
}

/* Keep one closing gap between 1-2 and 1-3 instead of three stacked paddings. */
#theme1 #sec-12 {
  padding-bottom: 48px;
}
#theme1 main,
#theme1 > .shell {
  padding-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   테마 2 — 프라이버시 계산법
   1장과 같은 .theme1 껍데기를 그대로 쓰고, 이 장에만 있는 것만 더한다.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- 모션 차트 (별도 문서를 iframe 으로 얹는다) ---------- */
.theme1 .motion-embed {
  width: 100%;
  display: flex;
  justify-content: center;
}
.theme1 .motion-embed iframe {
  width: 100%;
  border: 0;
  display: block;
  background: transparent;
  color-scheme: light;
}
.theme1 .motion-embed.motion-wide {
  max-width: 760px;
}
/* ⚠ 비율을 건드리지 않는다. 문서 안 `#stage` 가 4444/2664 로 제 높이를 잡고
   `body` 는 height:auto 라, 칸을 이보다 낮추면 그림의 아랫단(길 끝과 사람 발)이
   그대로 잘린다. 한 번 760/372 로 줄였다가 되돌렸다. */
.theme1 .motion-embed.motion-wide iframe {
  aspect-ratio: 4444/2664;
}
/* 2-2 홈캠 만족도 — 글 단보다 크게 보여 준다(580 → 754, 1.3배).
   단 가운데 정렬이라 폭만 키우면 좌우로 고르게 넘친다. */
.theme1 .motion-embed.motion-gauge {
  max-width: 580px;
}
.theme1 .motion-embed.motion-gauge iframe {
  flex: 0 0 auto; /* 단에 맞춰 줄어들지 않게 */
  width: 130%; /* 폭만 키우면 좌우로 고르게 넘쳐 가운데를 지킨다 */
  max-width: calc(100vw - 96px);
  /* 이 문서는 폭이 580 을 넘어도 그림이 더 커지지 않는다(원 지름이 고정).
     그래서 비율로 높이를 잡으면 130% 폭만큼 아래가 비어 148px 이 남았다 —
     다음 칸까지 사이가 벙벙해 보이던 까닭이다. 높이를 그림에 맞춰 못 박는다. */
  aspect-ratio: auto;
  height: min(505px, calc((100vw - 96px) * 0.875));
}
.theme1 .motion-embed.motion-bars {
  max-width: 580px;
}
.theme1 .motion-embed.motion-bars iframe {
  aspect-ratio: 580/546;
}
.theme1 .motion-embed.motion-space {
  max-width: 580px;
}
.theme1 .motion-embed.motion-space iframe {
  aspect-ratio: 580/643;
}
.theme1 .motion-embed.motion-ai-pref {
  max-width: 580px;
}
.theme1 .motion-embed.motion-ai-pref iframe {
  aspect-ratio: 580/482.5;
}
.theme1 .motion-embed.motion-video-choice {
  max-width: 580px;
}
.theme1 .motion-embed.motion-video-choice iframe {
  aspect-ratio: 580/520.7;
}
/* 2-1 무엇을 돌려받느냐가 기준이다 — 씬 폭(1200)을 그대로 쓴다 */
/* 2-1 씬은 글 단보다 30% 넓게 편다 — 단은 flex 가운데 정렬이라
   폭만 130%로 주면 좌우로 고르게 넘쳐 가운데를 지킨다. */
.theme1 .motion-embed.motion-biometric {
  max-width: 1200px;
  container-type: inline-size;
}
.theme1 .motion-embed.motion-biometric iframe {
  flex: 0 0 auto; /* 단에 맞춰 줄어들지 않게 */
  width: 130%;
  max-width: calc(100vw - 96px);
}
.theme1 .motion-embed.motion-biometric iframe {
  aspect-ratio: auto;
  height: calc(min(130cqw, 100vw - 96px) * 853 / 2048 + 20px); /* 0922 머리 위 자리 140 → 95 — 제목과 말풍선 사이가 벙벙했다 · 0923 95 → 20, 씬의 --head 와 같은 값이어야 한다 */
} /* 씬 비율 그대로 — 아래 빈 칸이 생기지 않는다 */
/* 3-1 자동차라는 마지막 영역 — 씬 폭(1200)을 그대로 쓴다 */
.theme1 .motion-embed.motion-lastdomain {
  max-width: 1200px;
  container-type: inline-size;
}
.theme1 .motion-embed.motion-lastdomain iframe {
  aspect-ratio: auto;
  height: calc(100cqw * 688 / 1200 + 24px); /* 0922 240 → 24 — 가장 높은 말풍선도 무대 안에 선다(글과 사이가 300px 벌었다) */
}
/* 2-2 홈캠 격자 · 3-2 알림 — 씬 폭(1200)을 그대로 쓴다 */
.theme1 .motion-embed.motion-homecam {
  max-width: 1200px;
  container-type: inline-size;
}
.theme1 .motion-embed.motion-homecam iframe {
  aspect-ratio: auto;
  /* 0922 말풍선 자리를 폭에 맞춰 — 넓을수록 머리가 내려와 덜 필요하다(문서 fitScene 과 같은 셈) */
  height: calc(100cqw * 457 / 1024 + max(24px, 200px - 100cqw * 61 / 1024));
}
.theme1 .motion-embed.motion-transit {
  max-width: 1200px;
}
.theme1 .motion-embed.motion-transit iframe {
  aspect-ratio: 1200/534;
}

/* ---------- 이 장의 인용 색 ---------- */
.theme1 .pull-quote.quote-teal {
  background: linear-gradient(100deg, #4fbfa8, #7fc2e8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- 이 장의 인용 색 ---------- */
.theme1 .pull-quote.quote-amber {
  background: linear-gradient(100deg, #ed9e3d 23%, #fcc22d 87%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 목차 항목이 길면 두 줄로 흐른다 — 본문 쪽으로 넘치지 않게 */
.theme1 .sidenav .sub-item .lbl {
  white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   에필로그 — 시안(Epilogue.svg · 1920×2273)을 그대로 옮긴 한 판.
   좌표·크기는 모두 시안 캔버스 기준 %(가로) · %(세로)이고, 글자 크기는
   cqw(= 캔버스 폭의 1%)로 두어 폭이 줄면 그림과 글자가 같은 비율로 함께
   줄어든다. 1920 폭에서는 시안과 1:1이다.
   가운데 원 군집만 프롤로그가 쓰던 CLUSTER·BUBBLES 를 다시 그린다
   (js/10-epilogue.js).
   ═══════════════════════════════════════════════════════════════════ */
.epilogue {
  background: #fff;
  overflow: hidden;
}
.epilogue .epi-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2273;
  container-type: inline-size;
  font-family:
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    sans-serif;
}
.epilogue .epi-walls {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* 캔버스는 이제 무대 전체를 덮는다 — 원들이 아래쪽 사람에게까지 날아가야 한다.
   군집이 앉는 자리와 크기는 10-epilogue.js 가 예전 상자 그대로 잡는다. */
.epilogue #epiCluster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  pointer-events: none;
}

/* ── 머리말 ── */
.epilogue .epi-head {
  position: absolute;
  left: 34.21%;
  top: 4.44%;
  width: 29.93%;
}
.epilogue .epi-head h1 {
  margin: 0 0 1.15cqw;
  font-size: 2.083cqw; /* 1920 기준 40px */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.023em;
  color: #1a2638;
  opacity: 0.9;
  word-break: keep-all;
  white-space: nowrap;
}
.epilogue .epi-head p {
  margin: 0;
  /* 판(1920×2273) 비율을 지키는 글상자라, 글도 판과 같은 비율로 줄인다.
     1.0417cqw 는 1920 에서 20px — 기사 본문과 같은 자에서 출발해 창이
     좁아지는 만큼 함께 줄어든다. 비율이 늘 같으므로 줄 수가 변하지 않아
     글이 판 밖으로 흘러넘치는 일이 없다(예전에는 20px 로 못박아 두어
     넘쳤고, 1280 아래에만 따로 규칙을 두어 막고 있었다). */
  font-size: 1.0417cqw;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.023em;
  color: #0d253d;
  opacity: 0.9;
  word-break: keep-all;
}

/* ── 말풍선 ── */
.epilogue .epi-quote {
  position: absolute;
  margin: 0;
  padding: 1.04cqw 1.35cqw;
  color: #fff;
  font-size: 0.833cqw; /* 1920 기준 16px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  word-break: keep-all;
  /* 몸통과 꼬리를 한 덩어리로 — 칠은 불투명하게 하고 투명도는 한 번만 준다 */
  background: #2f2a3a;
  opacity: 0.88;
  border-radius: 0.625cqw;
}
.epilogue .epi-quote::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  width: 1.042cqw;
  height: calc(1.042cqw + 1px);
  background: #2f2a3a;
}
/* 말풍선은 사람 머리 '위'에 뜬다. 위(top)가 아니라 아래(bottom)를 못박는다 —
   글이 한 줄 늘어도 상자는 위로만 자라고, 꼬리와 머리 사이 간격은 그대로다.
   시안(1920×2273)에서 왼쪽 머리 꼭대기는 608.5(26.77%), 오른쪽은 604(26.57%).
   그 위로 2.1%(≈48 단위) 띄운다. */
.epilogue .epi-quote-l {
  left: 24.53%;
  bottom: 75.33%; /* 머리(26.77%) 위 2.1% */
  width: 17.92%;
  border-bottom-left-radius: 0;
}
.epilogue .epi-quote-l::after {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.epilogue .epi-quote-r {
  left: 53.65%;
  bottom: 75.53%; /* 머리(26.57%) 위 2.1% */
  width: 21.56%;
  border-bottom-right-radius: 0;
}
.epilogue .epi-quote-r::after {
  right: 0;
  background: #2f2a3a;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ── 사람 ──
   시안 좌표(1920×2273) 그대로 쓰려고 SVG 한 겹으로 얹는다.
   난간 밖으로 새는 부분은 시안의 마스크 폴리곤으로 잘라 내고,
   기둥에 지는 그림자도 시안의 path 를 그대로 쓴다. */
.epilogue .epi-cast {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ── 본문 · 꼬리말 ── */
.epilogue .epi-body {
  position: absolute;
  left: 34.92%;
  /* 시안은 51.3% 였는데, 그 자리면 글이 협곡 바닥과 아래쪽 사람 위를 지나
     읽기가 어려웠다. 말풍선(24.7%)과 충분히 떨어지면서 바닥은 밟지 않는
     중간 띠로 끌어올린다. */
  top: 43.5%;
  width: 30.07%;
  display: flex;
  flex-direction: column;
  gap: 1.56cqw;
}
.epilogue .epi-body p {
  margin: 0;
  font-size: 1.0417cqw; /* 1920 에서 20px — 판과 같은 비율 */
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.023em;
  color: #28415a;
  opacity: 0.9;
  word-break: keep-all;
}
.epilogue mark.hl {
  background: #ffe39e;
  color: inherit;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.epilogue .epi-credit {
  position: absolute;
  left: 0;
  right: 0;
  top: 95.86%;
  margin: 0;
  text-align: center;
  font-size: 0.833cqw;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #353a54;
}
/* ── 창이 좁아질 때 ───────────────────────────────────────────────
   에필로그는 시안(1920×2273) 비율을 지키는 한 판이고, 글상자도 그 판의
   비율(왼쪽 34.92% · 폭 30.07%)로 앉는다. 그런데 글자만 20px 로 못박아
   두었더니, 판이 좁아질수록 글상자는 좁아지는데 글자는 그대로라 줄 수가
   늘고, 결국 글이 판 아래로 흘러넘쳐 카피라이트와 겹쳤다.
   1280 아래부터는 글자도 판과 같은 비율로 줄인다 — 1280 에서 꼭 20px 이라
   경계에서 튀지 않고, 그 아래로는 줄 수가 1280 일 때와 똑같이 유지된다. */
@media (max-width: 1280px) {
  /* 글자는 이제 처음부터 판 비율(1.0417cqw)이라 따로 줄일 것이 없다.
     제목만 조금 크게 잡아 좁은 화면에서 머리글과의 위계를 지킨다. */
  .epilogue .epi-head h1 {
    font-size: 2.5cqw;
  }
}
@media (max-width: 900px) {
  .epilogue .epi-head h1 {
    white-space: normal;
  }
}
/* 좁은 화면 — 판을 세로로 늘려 글이 살 자리를 만든다.
   그림 층(협곡·사람·원 군집)은 preserveAspectRatio="none" 이라 판을 늘리면
   같이 늘어난다. 그래서 늘린 만큼(1.496배) 도로 눌러(scaleY) 위쪽에 붙인다 —
   그림은 시안 그대로, 아래로 생긴 여백은 글이 쓴다.
   판이 길어졌으므로 글과 말풍선의 세로 자리도 같은 비율로 다시 잡는다. */
@media (max-width: 860px) {
  /* 판을 2.29배 길게 늘려 위·아래에 글이 살 자리를 낸다.
     그림 층은 preserveAspectRatio="none" 이라 늘린 만큼 같이 늘어나므로
     그만큼 도로 눌러(scaleY 0.437) 제 모습으로 되돌리고, 머리글 아래
     15% 자리에 앉힌다. 위 15% 는 제목과 머리글, 아래 38% 는 본문 몫이다. */
  .epilogue .epi-canvas {
    aspect-ratio: 1920 / 5200;
  }
  .epilogue .epi-walls,
  .epilogue .epi-cast,
  .epilogue #epiCluster {
    top: 15%;
    transform: scaleY(0.43712); /* 2273 ÷ 5200 */
    transform-origin: 50% 0;
  }
  .epilogue .epi-head {
    top: 1.8%;
    left: 8%;
    width: 84%;
  }
  .epilogue .epi-body {
    top: calc(62% - 40px);
    left: 8%;
    width: 84%;
    gap: 3.4cqw;
  }
  /* 사람 머리(그림 안 608/2273)는 늘어난 판에서 26.7% 자리 — 그 위 0.9% */
  .epilogue .epi-quote-l {
    bottom: 74.2%;
  }
  .epilogue .epi-quote-r {
    bottom: 74.29%;
  }
  .epilogue .epi-quote {
    font-size: clamp(11px, 2.4cqw, 14px);
    border-radius: 6px;
  }
  .epilogue .epi-quote::after {
    width: 10px;
    height: 11px;
  }
}
/* 좁은 데스크톱(641~860) — 판은 넓은데 말풍선만 시안 비율(18·21%)로 좁아
   글이 대여섯 줄로 서서 머리말까지 올라온다. 꼬리는 사람 머리 옆에 그대로
   두고(왼쪽은 왼쪽 끝, 오른쪽은 오른쪽 끝이 꼬리다) 상자만 넓힌다. */
@media (min-width: 641px) and (max-width: 860px) {
  .epilogue .epi-quote-l {
    left: 18%;
    width: 31%;
  }
  .epilogue .epi-quote-r {
    left: 51%;
    width: 31%;
  }
  .epilogue .epi-head p,
  .epilogue .epi-body p {
    font-size: clamp(13px, 3.9cqw, 19px);
    line-height: 1.55;
  }
  .epilogue .epi-head h1 {
    font-size: clamp(18px, 5.6cqw, 28px);
    margin-bottom: 2.6cqw;
  }
  .epilogue .epi-credit {
    top: 97.2%;
    font-size: clamp(10px, 2.1cqw, 13px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   장 표지 — 시안(1920×1080 svg)을 HTML 로 옮긴 것

   그림(배경·사람·소품)만 웹p 한 장으로 굽고, 제목과 부제, 말풍선은
   진짜 글자로 얹는다. 자리·크기는 모두 시안 좌표(1920 기준)를 그대로
   쓰고, 컨테이너 질의 단위(cqw)로 화면 크기에 맞춰 같이 커진다.
   ══════════════════════════════════════════════════════════════════════ */
/* 세 장 표지가 모두 같은 방식이다 (흔한 패럴랙스 사이트의 방식):
     · 표지 한 장 = 화면 높이 한 판 (100svh)
     · 배경(메시 그라디언트)은 화면을 꽉 채우고(cover)
     · 그림과 글이 함께 사는 '시안 판'(16:9)은 화면 안에 온전히 들어온다(contain)
   덕분에 어떤 비율에서도 여백이 생기지 않으면서 그림이 잘려 나가지도 않는다. */
.cover-art {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* 모바일 주소창이 오르내려도 흔들리지 않는다 */
  overflow: hidden;
  color: #fff;
}

/* 1장 표지는 버블 군집에서 원으로 열리는 고정 레이어 안에 들어간다.
   판 골격은 2·3장과 같고, 열리는 효과(확대·흐림)만 여기에 얹는다. */
#chapter .cover-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--sc));
  transform-origin: 50% 50%;
  filter: blur(var(--bl));
}
/* 본문 깊숙이 들어오면 프롤로그 무대와 장 표지는 그리지 않는다.
   자리(레이아웃)는 그대로 두고 칠하기만 멈춘다 — 스크롤 위치가 흔들리지 않는다. */
html.deep .hero {
  visibility: hidden;
}
html.deep #chapter {
  display: none;
}

/* 열리는 동안에만 층으로 올린다 — 늘 올려 두면 화면만 한 텍스처를 계속 물고 있다 */
#chapter.opening .cover-art {
  will-change: filter, transform;
}

/* ══════════════════════════════════════════════════════════════════════
   모바일 타이포 — KRDS(범정부 UI/UX 디자인시스템) 눈금에 맞춘다

   데스크톱은 이 저널이 쓰던 자를 그대로 두고, 폰 폭(≤640px)에서만 갈아 끼운다.
   KRDS 의 모바일 값은 다음과 같다(모두 행간 150%).

     heading  xlarge 28 · large 24 · medium 22 · small 19
     body     large 19 · medium 17 · small 15 · xsmall 13

   이 저널의 자리와 맞춰 놓으면

     기사 제목   40 → 28   (heading-xlarge)
     소제목      28 → 22   (heading-medium)
     본문        20 → 17   (body-medium)
     인용 말풍선 14 → 13   (body-xsmall)

   크기만 줄이지 않고 행간도 KRDS 의 150% 로 함께 넓힌다 — 좁은 화면에서
   글자만 줄이면 줄이 붙어 오히려 읽기 힘들어진다.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --t-h2-size: calc(22px * var(--type-scale)); /* heading-medium */
    --t-h2-lh: 1.5;
    --t-body-size: calc(17px * var(--type-scale)); /* body-medium */
    --t-body-lh: 1.5;
    --t-title-lh: 1.35; /* 데스크톱은 normal 이라 글꼴마다 다르게 잡힌다 */
    --t-quote-size: calc(13px * var(--type-scale)); /* body-xsmall */
    --t-quote-lh: 1.5;
    --t-who-size: calc(12px * var(--type-scale));
  }
  .theme1,
  .theme2,
  .theme3 {
    --a-title-size: calc(28px * var(--type-scale)); /* heading-xlarge */
    --a-h2-size: calc(22px * var(--type-scale)); /* heading-medium */
    --a-body-size: calc(17px * var(--type-scale)); /* body-medium */
    --a-small-size: calc(13px * var(--type-scale)); /* body-xsmall */
  }
  /* 에필로그는 판 비율로 함께 줄어든다(위 max-width:1280 규칙) — 여기서
     다시 px 로 못박으면 글이 판 밖으로 흘러넘친다. 대신 폰에서는 아래
     max-width:860 규칙이 글상자를 넓혀 읽을 만한 크기를 되찾아 준다. */
}

@media (max-width: 640px) {
  .theme1 .quote-bubble.scene-quote {
    max-width: min(300px, 94%);
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.42;
  }
  .theme1 .quote-bubble .qwho {
    margin-top: 0.5em;
    font-size: 10px;
  }
  /* 폰에서는 컨테이너가 좁아 36cqw 가 200px 도 안 된다 — 말풍선이 세로로
     길어져 바로 위 소제목을 덮었다. 폭을 화면 기준으로 다시 잡고,
     그만큼 머리 위 자리도 넉넉히 둔다. */
  .theme1 .quote-bubble.row-quote {
    max-width: min(268px, 74vw);
  }
  .theme1 .person-row {
    padding-top: 80px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   손을 올려야 열리는 곳의 길잡이 (js/12-hover-cue.js · 테마1 시범)
   씬 아래 가운데에 조용히 떠 있다가, 한 번 손을 올리면 사라진다.
   ══════════════════════════════════════════════════════════════════════ */
.theme1 .hover-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 8px);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  /* 화살표의 잉크는 제 상자 왼쪽 끝에서 시작해 오른쪽은 4분의 1쯤 비어 있다.
     그래서 눈에 보이는 간격은 gap 보다 늘 넓다 — 그만큼 좁혀 잡는다. */
  gap: 5px;
  padding: 8px 15px 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 2px 14px rgba(38, 34, 60, 0.12),
    inset 0 0 0 1px rgba(38, 34, 60, 0.07);
  color: #5b5570;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.16, 0.86, 0.3, 1);
}
.theme1 .hover-cue.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 작은 화살표 커서 — 위아래로 한 번씩 톡톡 짚어 준다 */
.theme1 .hover-cue .hc-cursor {
  /* 글자 키(13px)에 견주어 크지 않게 — 안내지 표지가 아니다 */
  width: 10.5px;
  height: 12px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.72;
  clip-path: polygon(0 0, 0 82%, 26% 62%, 44% 100%, 62% 91%, 45% 55%, 76% 52%);
  animation: hcTap 2.4s ease-in-out infinite;
}
@keyframes hcTap {
  0%,
  62%,
  100% {
    transform: translate(0, 0);
  }
  72% {
    transform: translate(1px, 3px);
  }
  82% {
    transform: translate(0, 0);
  }
}

/* 1-1 씬은 아래쪽이 비어 있으니 그 빈자리에 놓는다 */
.theme1 .scene .hover-cue {
  bottom: 4%;
}
/* 1-2 사람 줄 아래에는 자리가 없다 — 줄 밑에 한 뼘을 내어 준다 */
.theme1 .flow-wrap {
  padding-bottom: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .theme1 .hover-cue {
    transition: opacity 0.3s linear;
  }
  .theme1 .hover-cue .hc-cursor {
    animation: none;
  }
}
@media (max-width: 640px) {
  .theme1 .hover-cue {
    font-size: 12px;
    padding: 7px 13px 7px 12px;
    gap: 4px;
  }
  .theme1 .hover-cue .hc-cursor {
    width: 9.5px;
    height: 11px;
  }
}

/* 그라디언트 보관용 svg — 3장 표지와 본문 사이에 놓인 빈 svg 다.
   width=0 height=0 라도 인라인 요소라 줄 상자를 하나 만들고, 그 줄 높이만큼
   #tail 의 회색 바탕이 표지 밑에 가로줄로 드러났다. 블록으로 바꿔 자리에서
   들어낸다. display:none 은 쓰지 않는다 — 숨긴 가지 안의 그라디언트는
   url(#…) 로 불러도 칠해지지 않는다. */
.grad-defs {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── 방향키 안내를 표지 두 장 위에 얹는 층 ──
   표지(제목)와 그 다음 장(도입 글)은 각각 .cover-layer 라 opacity 로 갈아 끼운다.
   안내가 그중 한 장 안에 있으면 장이 바뀌는 순간 같이 사라진다. 그래서 두 장
   바깥에 같은 골격(.cover > .cover-foot)을 한 벌 더 두고 거기에만 안내를 보인다.
   원래 자리(.keyhint-slot)는 줄 간격을 지키느라 남겨 두고 보이지만 않게 한다.
   표지를 떠나면 #coverWrap 이 통째로 걷히므로 안내도 함께 사라진다. */
.cover-hint {
  /* 화면에 붙여 둔다 — 표지가 스크롤을 따라 위로 밀려 올라가도 안내만은
     제자리에 머물다가, 아래(--hint-dy)로 슬며시 내려가며 사라진다.
     안에 두면 안내도 같이 위로 밀려 올라가 버려서 반대로 보였다. */
  position: fixed;
  inset: 0;
  pointer-events: none;
  transform: translateY(var(--hint-dy, 0px));
  will-change: transform;
}
/* 세로는 표지 하단 줄(카피라이트와 같은 밑선)을 그대로 따르고, 가로만 화면 한가운데 */
.cover-hint .cover {
  padding-left: 0;
  padding-right: 0;
}
.cover-hint .cover-foot {
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}
.cover-hint .copy,
.cover-hint .brand {
  display: none;
}
.cover-hint .keyhint {
  margin: 0;
}
/* 2-1 은 본문 글로 끝나서(다른 절은 모션으로 끝난다) 기본 간격이 비어 보인다 —
   이 경계만 모든 폭에서 좁힌다. 다른 절 간격은 그대로 둔다. */
#theme2 #sec-21 { padding-bottom: 36px; }
#theme2 #sec-22 { padding-top: 56px; }
/* 세 번째 장(도입 글)에서는 안내를 걷는다 — 표지·질문 장에서만 남는다 */
.cover-hint {
  transition: opacity 0.42s ease;
}
.cover-hint.gone {
  opacity: 0;
}
.keyhint-slot {
  visibility: hidden;
}

/* ── 1장 본문 첫머리 — 표지 그라디언트를 40px 더 데리고 내려온다 ──
   .theme1 의 흰 바탕이 첫 픽셀부터 꽉 차 있어서, 표지에서 본문으로 넘어가는
   자리에 칼로 자른 듯한 가로선이 남았다. 맨 위 40px 만 투명에서 흰색으로
   건너가게 해 두면 뒤의 표지 색이 그만큼 더 내려왔다가 스르르 풀린다. */
#theme1 {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #ffffff 40px);
}

/* ── 에필로그에서의 사이드 내비 ──
   3장 내비를 그대로 데리고 내려가되, 지금 자리는 EPILOGUE 다.
   3장 표시는 물러앉히고 EPILOGUE 를 검게 세운다. 목차를 지우지 않고
   색만 바꾸므로 내비의 높이와 줄 위치가 흔들리지 않는다. */
.theme1 .sidenav.at-epi .chapter {
  color: var(--nav-grey);
  font-weight: 400;
}
.theme1 .sidenav.at-epi .sub-item .lbl {
  color: rgba(16, 16, 16, 0.28);
  font-weight: 400;
}
.theme1 .sidenav.at-epi .sub-item .bar {
  background: var(--nav-line);
}
.theme1 .sidenav.at-epi [data-jump="epilogue"] {
  color: var(--nav-black);
  font-weight: 500;
}

/* ── 장 표지 — 시안에서 내보낸 한 판 ──────────────────────────────────
   예전에는 세 표지가 저마다 움직였다(나선·구체·횡단보도). 지금은 시안이
   그린 16:9 한 장을 그대로 깐다. 글자는 SVG 안에서 벡터라 어느 해상도에서도
   또렷하고, 그림은 안에 박혀 있어 따로 부르지 않는다. */
/* 표지는 두 겹이다 — 사진 한 장(.cv-pic)과 그 위에 얹는 글씨·말풍선
   덮개(.cv-ink, 투명 SVG). 사진을 SVG 밖으로 뺀 까닭은 화면 폭마다 알맞은
   크기를 내리기 위해서다. 현재는 압축 손실 없는 PNG 원본을 쓴다. 두 겹 다 16:9 라
   object-fit:cover 로 똑같이 잘려 어긋나지 않는다. */
.cv-flat {
  position: relative;
  overflow: hidden;
  background: #eaf2fb;
}
.cv-flat :is(img, svg) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cv-flat .cv-ink {
  /* Inline SVG uses xMidYMid slice to match the photograph's cover crop. */
  position: absolute;
  inset: 0;
}
.cv-flat .cv-ink text {
  /* Formatting whitespace must not shift SVG quote text outside its bubble. */
  white-space: normal;
}

/* 표지 글씨는 윤곽선으로 굳은 그림이라 js/13-lang.js 의 표로는 못 바꾼다.
   그래서 한국어 겹과 영문 겹을 나란히 깔아 두고, 언어 단추가 <html> 에
   붙이는 .lang-en 하나로 어느 쪽을 보일지만 정한다. */
.cv-flat .cv-ink-en {
  opacity: 0;
}
html.lang-en .cv-flat .cv-ink {
  opacity: 0;
}
html.lang-en .cv-flat .cv-ink-en {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   좁은 화면 — 모바일 판 (js/00-mobile.js · tools/mobile_svg.py)

   시안 화면 서른한 장을 세로로 잇는다. 한 장이 SVG 한 개라, 화면 폭에
   맞춰 늘려도 글자가 흐려지지 않는다. 폭은 늘 화면에 꽉, 높이는 비례대로.
   ══════════════════════════════════════════════════════════════════════ */

html.m-img,
html.m-img body {
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 0;
  position: static;
  overscroll-behavior: auto;
  touch-action: auto;
}
/* 알약은 떠 있지 않고 첫 화면 오른쪽 위에 그냥 얹혀 스크롤을 따라 올라간다 */
html.m-img body {
  margin: 0;
  background: #f7f7f3;
  position: relative;
}

/* 누르는 손길에는 움직임을 두지 않는다 — js 의 instantly() 가 한 번만 붙였다 뗀다 */
.no-anim,
.no-anim * {
  transition: none !important;
}