/* PlayGrown 케이스 스터디 전용 규칙.
 *
 * **왜 styles.css에 안 섞는가.** 이 문서는 절마다 형식이 달라서(메모지 · 포지셔닝
 * 보드 · 브랜드 보드 · 조감도) 규칙이 꽤 늘어난다. 마을 한 채를 위한 규칙을
 * 마을 전체 파일에 섞어 두면 이후 마을을 손볼 때마다 이것까지 같이 읽어야 한다.
 * 이 파일은 `/case/playgrown.html`에서만 불린다.
 *
 * **바탕은 하나, 물건만 바뀐다.** 배경색 · 여백 리듬 · 본문 폭 · 글자 크기는 절마다
 * 안 바꾼다. 바뀌는 것은 그 위에 놓인 물건뿐이다 — 같은 책상에 메모지, 보드,
 * 조감도를 차례로 올리는 셈이다. 형식을 절마다 바꾸는 것의 대가가 산만함이라,
 * 묶는 장치를 여기 먼저 적어 둔다.
 */

/* 색은 브랜드 보드에 적혀 있던 네 개를 그대로 쓴다. 눈대중으로 고른 색이 아니라
   이 브랜드가 정해 둔 값이라 여기서 새로 정할 것이 없다. */
.case-page {
  --pg-red: #E63B2E;
  --pg-black: #111111;
  --pg-paper: #F6F3ED;
  --pg-stone: #D9D6D0;
  /* 종이 위에 놓이는 것들의 공통 그림자. 물건이 책상에 놓인 것처럼 보이게 하는
     유일한 장치라 절마다 다르게 주지 않는다 */
  --pg-lift: 0 10px 30px rgba(17, 17, 17, .10);
  --pg-line: #E2DED4;
  background: var(--pg-paper);

  /* **방마다 바탕을 갈아 끼우려면 절이 화면 폭을 꽉 채워야 한다.** 그런데 본문은
     가운데 1000px 안에 있어야 한다. 격자 한 벌을 여기 적어 두고 `.case`와 `.room`이
     같이 쓰면, 절은 `full`에 놓여 끝에서 끝까지 가고 그 안의 것들은 `content`에
     머문다. `100vw`로 늘리는 방법도 있지만 그건 스크롤바 폭만큼 넘쳐서
     가로 스크롤바가 생긴다 — 격자는 그 문제가 아예 없다. */
  --cols:
    [full-start] minmax(20px, 1fr)
    [content-start] minmax(0, 1000px) [content-end]
    minmax(20px, 1fr) [full-end];
}

.case {
  display: grid; grid-template-columns: var(--cols);
  padding: 0 0 72px;
}
.case > * { grid-column: content; }

/* ── 표지 ──────────────────────────────────────────────────────
   **표제 하나로 서는 화면이다.** 사실 표와 설명 두 줄을 걷고 나니 남은 것이
   적어져서, 왼쪽에 붙여 두면 화면 위쪽만 쓰고 아래가 텅 빈다. 가운데로 모으고
   이름을 크게 세운다 — 브랜드 보드의 짜임(이름 → 빨간 선 → 문단)을 그대로 따른다 */

.case-head { max-width: 720px; margin: 0 auto; text-align: center; }

.case-kicker {
  margin: 0 0 14px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--pg-red);
}
.case-title {
  margin: 0; font-size: clamp(46px, 9vw, 92px); font-weight: 800;
  line-height: 1.02; letter-spacing: -.035em; color: var(--pg-black);
}
/* 보드에도 이름 밑에 이 선이 있다. 같은 자리에 같은 것을 둔다 */
.case-rule {
  display: block; width: 46px; height: 2px; margin: 26px auto 0;
  background: var(--pg-red);
}
.case-sub {
  max-width: 500px; margin: 24px auto 0;
  font-size: 15.5px; color: var(--sub); line-height: 1.8;
}

/* ── 절 ── */

/* 화면 하나는 끝에서 끝까지 가는 띠다. 안의 것들은 가운데 칸에 머문다.
   **표지도 절과 같은 띠다** — 넘기는 화면에서는 표지가 첫 장이 된다 */
.vw-track { grid-column: full; display: grid; grid-template-columns: var(--cols); }
.vw-panel {
  grid-column: full;
  display: grid; grid-template-columns: var(--cols);
  margin: 0; padding: 74px 0;
  background: var(--ground, transparent);
}
.vw-panel > * { grid-column: content; }
.vw-cover { --ground: var(--pg-paper); }
.room { margin: 0; }

/* ── 방마다 다른 바탕 ───────────────────────────────────────────
   **이것이 「챕터가 넘어간다」를 만드는 장치다.** 스크롤을 뺏지 않고(§5가 금지했다)
   대신 굴릴 때마다 바닥이 실제로 바뀐다. JS도 필요 없고, 읽는 순서도 안 흔들리고,
   안내서(/game/)의 카드 넘기기와도 겹치지 않는다.

   어두운 방은 색을 하나하나 뒤집지 않는다 — 이 페이지의 물건들이 전부
   `--ink`·`--sub`·`--faint`·`--pg-black`만 보고 그려지므로, **그 넷을 방에서
   다시 정의하면 안에 있는 것이 통째로 따라온다.** 토큰을 쓴 값이 여기서 돌아온다. */

.room--desk  { --ground: #EAE0CB; }   /* 크래프트 책상 — 메모지가 놓인 자리 */
.room--board { --ground: #F3F4F5; }   /* 흰 보드 벽. 순백으로 하면 원의 옅은 색이 안 보인다 */
.room--paper { --ground: var(--pg-paper); }
.room--plan  {                        /* 도면 — 옅은 모눈 */
  --ground: #E7ECEF;
  background-image:
    repeating-linear-gradient(to right, rgba(56, 92, 112, .075) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, rgba(56, 92, 112, .075) 0 1px, transparent 1px 26px);
}
.room--sheet { --ground: #FFFFFF; }

.room--wall  { --ground: #26221D; }   /* 짙은 벽 — 일력이 걸린 자리 */
.room--dim   { --ground: #131110; }   /* 암전. 영상 둘은 불 꺼진 방이다 */
.room--dim2  { --ground: #1A100E; }

.room--wall, .room--dim, .room--dim2 {
  --ink: #F6F3ED;
  --sub: rgba(246, 243, 237, .74);
  --faint: rgba(246, 243, 237, .52);
  --pg-black: #FBF9F4;
  --pg-line: rgba(255, 255, 255, .17);
  /* 빨강은 어두운 바탕에서 한 톤 올린다. #E63B2E는 검정 위에서 탁해진다 */
  --pg-red: #FF5B4B;
}
/* 검은 카드가 검은 방에 놓이면 경계가 사라진다. 실 하나만 두른다 */
.room--dim .film-card, .room--dim2 .film-card { outline: 1px solid rgba(255, 255, 255, .14); }

/* **밝은 물건은 어두운 방에서도 밝은 물건이다.** 방에서 뒤집은 색을 그대로 물려받으면
   흰 종이 위에 흰 글자가 앉는다 — 짙은 벽에 일력을 걸었더니 낱장이 통째로 백지로
   나와서 알았다. 종이 위에 놓이는 것들은 여기서 색을 도로 세운다. */
.day-sheet, .plan-frame {
  --ink: #1F241C;
  --sub: #656B60;
  --faint: #9AA093;
  --pg-black: #111111;
  --pg-line: #E2DED4;
  --pg-red: #E63B2E;
}
/* 집게는 쇠붙이다. 검은 벽에서는 검은 집게가 안 보이므로 한 톤 올린다 */
.room--wall { --pg-clip: #4A4239; }

/* **표제는 형식이 달라도 같은 자리에 있어야 한다.** 아래에 놓이는 물건은 절마다
   메모지였다 보드였다 조감도였다 하는데, 길잡이까지 자리를 옮기면 읽는 사람이
   매 절 처음부터 눈으로 훑게 된다 */
.room-head { max-width: 680px; margin: 0 auto 30px; }
.room-no {
  display: inline-block; margin: 0 0 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--pg-red);
}
.room-title { margin: 0; font-size: clamp(20px, 2.6vw, 25px); font-weight: 800; color: var(--pg-black); }
.room-lead { margin: 9px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--sub); }
.room-note { max-width: 680px; margin: 22px auto 0; font-size: 13.5px; line-height: 1.75; color: var(--sub); }
.room-note strong { color: var(--ink); }

/* 물건이 화면에 들어올 때만 아주 짧게. 미지원 브라우저에서는 통째로 무시되고
   본문은 그대로 보인다 — 그래서 이 연출에 아무것도 걸지 않는다.

   **투명도는 쓰지 않는다.** §6(game/guide.css)에서 이미 한 판단이고, 여기서는
   이유가 하나 더 있다 — 스크롤로 굴러가는 애니메이션이라 「아직 안 굴러간 상태」가
   기본값이 되는데, 그 기본값이 opacity:0이면 스크롤을 못 하는 상황(전체 페이지
   스크린샷 · 인쇄 · 화면을 안 굴리고 읽는 도구)에서 문서가 통째로 빈 종이가 된다.
   실제로 처음 찍어 보고 절 넷이 백지로 나와서 알았다. 자리만 움직인다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .room > .stage {
      animation: pg-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 42%;
    }
  }
}
@keyframes pg-rise { from { transform: translateY(14px); } to { transform: none; } }

/* ── 절 바로가기 ────────────────────────────────────────────────
   여덟 방이 되니 「지금 몇 번째 방인지」가 필요해졌다. 스크롤 납치는 안 한다 —
   읽는 순서를 흔들면 인과로 이어진 글이 끊긴다(§5). 조용한 점 여덟 개만 둔다.
   좁은 화면에는 아예 안 나온다: 본문 옆에 놓을 자리가 없다 */
.case-dots { display: none; }

@media (min-width: 1180px) {
  .case-dots {
    display: block; position: fixed; z-index: 20;
    right: 22px; top: 50%; transform: translateY(-50%);
  }
  .case-dots ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
  .case-dots a {
    display: flex; align-items: center; justify-content: flex-end; gap: 9px;
    padding: 5px 2px; text-decoration: none; color: var(--faint);
    font-size: 11.5px; font-weight: 700;
  }
  /* 점은 ::after로 만든다. 글자(span)는 평소엔 숨어 있다가 가리키거나
     현재 절일 때만 나온다 — 여덟 개가 늘 떠 있으면 본문 옆이 시끄럽다 */
  .case-dots a::after {
    content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(17, 17, 17, .18); transition: background .18s, transform .18s;
  }
  .case-dots span { opacity: 0; transition: opacity .18s; }
  .case-dots a:hover span, .case-dots a:focus-visible span,
  .case-dots [aria-current="true"] span { opacity: 1; }
  .case-dots [aria-current="true"] { color: var(--pg-red); }
  .case-dots [aria-current="true"]::after { background: var(--pg-red); transform: scale(1.3); }
}

/* ── 3 · 일력 ───────────────────────────────────────────────────
   일력은 한 장씩 뜯는 물건이라 열여덟 장을 한눈에 늘어놓는다.

   **여섯 칸 세 줄로 못 박는다** (2026-08-22). 원래는 폭에 따라 칸 수가 알아서
   늘고 줄었는데, 폰에서 두 칸이 되니 열여덟 장이 아홉 줄로 늘어져 **한 화면에
   안 들어왔다** — 넘기는 화면에서 그 절만 굴려야 했다. 6×3은 어느 폭에서나
   3주 남짓한 기간의 「모양」이 그대로 유지된다는 뜻이기도 하다.

   **글자 크기는 칸을 따라간다.** 여섯 칸을 못 박으면 폰에서 칸이 60px까지
   작아지는데, 글자를 고정으로 두면 칸 밖으로 삐져나온다. `cqw`는 칸 폭의 1%라
   칸이 줄면 글자도 같이 준다 — 작아서 안 읽히는 것은 두 손가락으로 벌려 본다.
   그림은 한 장도 안 쓴다 — 집게도 톱니도 전부 규칙이다 */

.days {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 2.4vw, 26px) clamp(4px, 1.2vw, 14px);
}

.day {
  position: relative;
  /* 아래 cqw가 이 칸의 폭을 기준으로 잡힌다. **다만 이 상자 자신은 그 단위를
     못 쓴다** — 컨테이너는 자기 자신에게 질문하지 않아서, 여기 `padding-top: 7cqw`를
     주면 바깥(뷰포트)을 기준으로 잡혀 데스크톱에서 집게와 낱장 사이가 100px씩
     벌어졌다. 집게 자리는 자식인 .day-sheet의 margin으로 낸다 */
  container-type: inline-size;
  filter: drop-shadow(0 5px 12px rgba(17, 17, 17, .12));
}
/* 검은 집게와 리벳 둘. 낱장 위에 얹혀야 하므로 잘리는 .day-sheet 바깥에 둔다 */
.day-clip {
  position: absolute; z-index: 2; left: 16%; right: 16%; top: 0; height: 9.5cqw;
  border-radius: 2px; background: var(--pg-clip, #111111);
  background-image:
    radial-gradient(circle 1.7cqw at 28% 50%, #8C8C8C 98%, #0000 100%),
    radial-gradient(circle 1.7cqw at 72% 50%, #8C8C8C 98%, #0000 100%);
}

.day-sheet {
  /* 뜯긴 윗변. 칸 폭을 따라가야 칸이 작아져도 톱니가 그대로 톱니로 읽힌다 */
  clip-path: polygon(
    0 4cqw, 8% 0.6cqw, 16% 3.2cqw, 24% 0, 32% 2.6cqw, 40% 1.3cqw, 48% 3.8cqw, 56% 0.6cqw,
    64% 3.2cqw, 72% 1.3cqw, 80% 3.8cqw, 88% 0, 96% 2.6cqw, 100% 1.3cqw, 100% 100%, 0 100%
  );
  background: #FBF9F4;
  margin-top: 7cqw;                 /* 집게가 걸릴 자리 (위 설명) */
  padding: 10cqw 6cqw 8cqw;
}

.day-head {
  display: flex; align-items: baseline; justify-content: center; gap: 4cqw;
  margin: 0 0 2cqw; color: var(--pg-black);
}
.day-mon, .day-dow {
  flex: none; font-weight: 700; line-height: 1.1;
  font-size: clamp(6px, 7.7cqw, 12px);
  display: grid; justify-items: center;
}
.day-mon i, .day-dow i {
  font-style: normal; font-weight: 800; letter-spacing: .06em; color: var(--faint);
  font-size: clamp(4.5px, 4.8cqw, 7.5px);
}
.day-num {
  font-size: clamp(15px, 27cqw, 42px); font-weight: 800; line-height: .95;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.day-do {
  margin: 0; padding-top: 5cqw; border-top: 1px solid var(--pg-line);
  font-size: clamp(5.5px, 7.4cqw, 11.5px); line-height: 1.5;
  color: var(--sub); text-align: center; word-break: keep-all;
}

/* 열여덟째 날만 다르다. 앞의 열일곱 장이 준비고 이 한 장이 그날이다 */
.day--pilot .day-sheet { background: var(--pg-red); }
.day--pilot .day-head, .day--pilot .day-do { color: #fff; }
.day--pilot .day-mon i, .day--pilot .day-dow i { color: rgba(255, 255, 255, .72); }
.day--pilot .day-do { border-top-color: rgba(255, 255, 255, .34); font-weight: 700; }

/* ── 5 · 7 · 영상 ───────────────────────────────────────────────
   **누르기 전에는 남의 서버에 아무것도 요청하지 않는다.** 유튜브 썸네일을 깔면
   페이지를 열기만 해도 그쪽에 요청이 나가므로, 재생 카드를 브랜드 색으로 직접 그렸다.
   누르면 그때 youtube-nocookie로 바꿔 끼운다 (playgrown.js).
   JS가 없으면 이 카드는 그냥 유튜브로 가는 링크다 */

.film {
  margin: 0; display: grid; justify-items: center; gap: 12px;
  /* **높이부터 정하고 폭을 거기서 뽑는다.** 폭을 먼저 정하면 9:16이라 높이가
     그 1.8배가 되는데, 폰에서는 그것만으로 화면을 넘겨서 절 안을 굴려야 했다.
     화면 높이의 절반 남짓으로 못 박으면 표제·설명과 함께 한 화면에 들어온다 */
  --film-h: min(46dvh, 460px);
}
.film-card {
  position: relative; display: grid; align-content: end; gap: 10px;
  height: var(--film-h); width: calc(var(--film-h) * 9 / 16); max-width: 76vw;
  padding: 20px; border-radius: 16px;
  /* **여기는 토큰을 쓰지 않는다.** 이 카드는 「검은 물건」이라 방이 어두워졌다고
     같이 밝아지면 안 된다 — 암전한 방에서 카드가 크림색으로 뒤집혀 흰 글자가
     안 보였다. 브랜드 색 CROW BLACK을 그대로 박는다 */
  background: #111111; color: #fff; text-decoration: none;
  box-shadow: var(--pg-lift); overflow: hidden;
}
.film-card--pilot { background: #E63B2E; }
/* 가운데 재생 삼각형. 테두리 트릭으로 만든다 — 아이콘 파일을 하나 더 받지 않으려고 */
.film-play {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  transition: transform .18s, background .18s;
}
.film-play::after {
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border: 13px solid transparent; border-left: 20px solid #fff; border-right: 0;
}
.film-card:hover .film-play, .film-card:focus-visible .film-play {
  transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, .26);
}
/* 검은 카드가 너무 비어 보여서 하나 얹었다. 유튜브 썸네일을 못 쓰기로 한 이상
   이 카드가 브랜드의 것으로 읽혀야 앞뒤 절과 따로 놀지 않는다 */
.film-brand {
  position: absolute; left: 20px; top: 18px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  color: var(--pg-red);
}
.film-card--pilot .film-brand { color: rgba(255, 255, 255, .85); }
.film-label { font-size: 15px; font-weight: 800; display: grid; gap: 3px; }
.film-label i {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
/* 바꿔 끼운 유튜브 틀. 카드와 같은 자리·같은 크기라 눌러도 화면이 안 튄다 */
.film-frame {
  height: var(--film-h); width: calc(var(--film-h) * 9 / 16); max-width: 76vw;
  border: 0; border-radius: 16px; box-shadow: var(--pg-lift);
}
.film figcaption { font-size: 12.5px; color: var(--faint); }

/* ── 8 · 노트 ───────────────────────────────────────────────────
   **여기만은 무조건 정적이다.** 앞의 일곱 절이 잔뜩 차려진 뒤 마지막에 꾸밈이
   전부 사라지는 대비 자체가 「접었다」의 정서다. 연출로 만들 것을 구조로 만든다.
   그래서 이 절에는 .stage가 없다 — 등장 연출이 아예 안 걸린다 */

.note {
  max-width: 620px; margin: 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, "Noto Sans Mono", monospace;
  font-size: 13.5px; line-height: 1.95; color: var(--ink);
}
.note-list { margin: 0; padding-left: 22px; }
.note-list li { margin: 0 0 10px; }

/* 영화 끝나고 불 켜지기 전에 한 줄 더 나오는 그것. **멀찍이 떨어뜨리는 것이
   전부다** — 붙여 두면 넷째 교훈으로 읽힌다. 여기가 문서의 마지막 글자이고,
   한 번 더 넘기면 마을로 나간다 */
.sting {
  margin: clamp(48px, 9vh, 96px) 0 0; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--pg-red);
}


/* ── 1 · 2 · 4 · 받은 그대로 한 장 ──────────────────────────────────
   칼럼 · 포지셔닝 보드 · 브랜드 보드는 오리지 않고 통째로 건다.
   **처음에는 셋 다 다시 지었다** — 종이를 CSS로 그리고 원을 %로 앉히고 보드를
   조각조각 오려 타일로 깔았다. 쓰는 사람이 「편집 없이 그대로」를 골라서(2026-08-21)
   그 규칙을 통째로 걷었다. 지운 것은 git 이력에 있다.

   남은 규칙은 **한 화면에 담기게 하는 것**이 전부다. 넘기는 화면이라 그림이 화면보다
   크면 절마다 굴려야 해서 넘기는 맛이 사라진다. 「눌러서 크게」는 안 만든다 —
   폰에서는 두 손가락으로 벌리면 그만이고, 단추를 하나 더 두는 것은 그 위에 얹는 짐이다. */

.board { margin: 0; display: grid; gap: 10px; justify-items: center; }
.board img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 64dvh; width: auto; height: auto;
  border-radius: 8px; box-shadow: var(--pg-lift);
}
/* 출처. **작고 연하게** — 있어야 하지만 읽는 것을 방해하면 안 된다 */
.board-src { font-size: 11.5px; color: var(--faint); letter-spacing: .01em; }

/* ── 6 · 공간 ───────────────────────────────────────────────────────
   조감도 위 % 좌표. 마을 지도와 정확히 같은 기법이다 — 고정 종횡비 상자에
   그림을 깔고 그 위에 %로 앉힌다. 좌표는 눈대중이 아니라 원본에서 재서 적었다 */

.plan { margin: 0 auto; max-width: 980px; }
.plan-frame {
  position: relative; aspect-ratio: 1498 / 864;
  /* 조감도는 투명 대신 **흰 바탕**을 깔고 JPEG로 뽑았다(cut_case.mjs).
     그러니 놓이는 자리도 흰 카드여야 자국이 안 보인다. 브랜드 타일과 같은
     카드라 이 문서 안에서 따로 놀지도 않는다 */
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: var(--pg-lift);
}
.plan-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 지도 위 핀은 **아래 목록을 눈으로 보여주는 것뿐**이다. 크롤러와 스크린리더는
   이 핀을 못 읽으므로 진짜 내용은 <ol>에 있고 여기는 aria-hidden이다 */
.plan-pin {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--pg-black);
  white-space: nowrap;
}
.plan-pin i {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pg-red); color: #fff;
  font-size: 12px; font-style: normal; font-weight: 800;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .3);
}
.plan-pin span {
  background: rgba(251, 249, 244, .92); border-radius: 999px;
  padding: 3px 9px; box-shadow: 0 1px 5px rgba(17, 17, 17, .13);
}
/* 오른쪽에 앉은 핀은 이름표를 왼쪽에 단다. 안 그러면 이름표가 조감도 밖으로
   비어져 나가 잘린다 — 원본에서도 오른쪽 두 존은 말풍선이 왼쪽을 향해 있다 */
.plan-pin--l { flex-direction: row-reverse; }

.plan figcaption { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); text-align: center; }

.zones {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 30px 0 0; padding: 0; list-style: none;
  counter-reset: zone;
}
.zones li {
  margin: 0; padding: 16px 18px;
  background: #fff; border-radius: 12px; box-shadow: var(--pg-lift);
}
.zones h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--pg-black); }
.zones h3::before {
  counter-increment: zone; content: counter(zone);
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 8px; border-radius: 50%;
  background: var(--pg-red); color: #fff; font-size: 11px; vertical-align: 1px;
}
.zones p { margin: 9px 0 0; font-size: 13px; line-height: 1.7; color: var(--sub); }

/* ── 좁은 화면 ──────────────────────────────────────────────────────
   §6이 겪은 문제를 여기서도 겪는다 — 390px에서는 조감도 라벨이 안 읽히고
   포지셔닝 원이 서로 겹친다. 그래서 좁아지면 **자리로 그리던 것을 목록으로 되돌린다** */

@media (max-width: 760px) {
  .case-page { --cols: [full-start] 16px [content-start] minmax(0, 1fr) [content-end] 16px [full-end]; }
  .case { padding: 0 0 56px; }
  .room { padding: 52px 0; }
  /* 조감도 — 라벨을 떼고 번호만 남긴다. 이름은 바로 아래 목록에 그대로 있다 */
  .plan-pin span { display: none; }
  .plan-pin i { width: 20px; height: 20px; font-size: 11px; }
}

@media (max-width: 420px) {
  .sting { font-size: 12px; letter-spacing: .1em; }
}


/* ── 넘기는 화면 ────────────────────────────────────────────────
   **JS가 켜져 있을 때만 켜진다.** `.viewer`를 붙이는 것은 playgrown.js이고,
   JS가 없으면 아래 규칙이 하나도 안 걸려 **그냥 굴리는 문서로 남는다** —
   화면 아홉이 위에서 아래로 이어진 한 장이 된다. 넘기는 쪽을 고르면서도
   못 넘기는 상황에서 문서가 통째로 안 읽히는 일은 없어야 한다.

   물건과 방 바탕은 위에서 정한 것을 그대로 쓴다. 여기서 바꾸는 것은
   **화면을 어떻게 넘기느냐**뿐이다. */

/* **넘기는 동안 문서 자체는 한 뼘도 안 굴러야 한다.** 처음에 마을 머리띠를
   그냥 둔 채로 두었더니 그 높이(118px)만큼 페이지가 밀려 화면이 어긋났다 —
   굴릴 수 있는 곳이 둘(문서와 화면)이 되면 반드시 어긋난다. 문서는 못 굴리게
   못 박고, 굴리는 것은 화면 안에서만 한다. */
.viewer { height: 100dvh; overflow: hidden; }
.viewer .topbar { display: none; }   /* 마을로 가는 길은 왼쪽 위 고리로 남는다 */
.viewer .case { height: 100dvh; padding: 0; }
/* 굴려서 읽을 때의 목차다. 넘길 때는 아래 페이저가 그 일을 한다 */
.viewer .case-dots { display: none; }
/* 등장 연출은 굴릴 때의 것이다. 넘기는 화면에서는 넘어가는 것 자체가 연출이라
   둘이 겹치면 화면마다 물건이 한 번 더 들썩인다 */
.viewer .room > .stage { animation: none; }

.viewer .vw-track {
  display: flex; height: 100dvh;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .viewer .vw-track { transition: none; } }

/* **한 화면이 넘칠 때는 그 화면 안에서 굴린다.** 일력 열여덟 장은 폰에서 절대
   한 화면에 안 들어간다 — 억지로 줄이면 글자가 안 읽히고 잘라내면 내용이 준다.
   그래서 이 문서는 「절 사이는 넘기고 절 안은 굴린다」다 */
.viewer .vw-panel {
  flex: 0 0 100%; height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  /* **넘치는 화면은 가운데 두면 안 된다.** 짧은 절은 가운데 놓는 것이 보기 좋은데,
     브랜드 보드처럼 화면보다 긴 절을 가운데 두면 **위쪽이 굴려도 안 닿는 데로
     밀려난다** — 표제가 통째로 사라져서 알았다. `safe`는 넘칠 때만 위로 붙인다.
     두 줄인 이유는 `safe`를 모르는 브라우저에서 앞줄이 남게 하려는 것이다 */
  align-content: start;
  align-content: safe center;
  padding: 92px 0 104px;   /* 위는 돌아가기, 아래는 화살표·점이 앉는 자리 */
}
.viewer .vw-panel:focus { outline: none; }   /* 넘길 때마다 초점을 여기로 옮긴다 */

/* ── 넘기는 것들 ── */

.vw-arrow {
  position: fixed; z-index: 30; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(17, 17, 17, .5); color: #fff;
  font-size: 18px; line-height: 1;
  transition: background .16s, opacity .16s;
}
.vw-arrow:hover { background: rgba(17, 17, 17, .8); }
.vw-arrow--prev { left: 16px; }
.vw-arrow--next { right: 16px; }
/* 끝에서는 흐려질 뿐 사라지지 않는다 — 단추가 사라지면 화면이 덜컥 움직인다 */
.vw-arrow[disabled] { opacity: .2; cursor: default; }
/* 마지막 화면의 오른쪽은 「다음」이 아니라 「나가기」다. 같은 모양으로 두면
   또 한 장이 있는 줄 알고 누른다 */
.vw-arrow--out { background: var(--pg-red); }
.vw-arrow--out:hover { background: #C8301F; }

.vw-pager {
  position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(17, 17, 17, .5);
  max-width: calc(100vw - 120px);
}
.vw-pager button {
  flex: none; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .4); cursor: pointer;
  transition: background .16s, transform .16s;
}
.vw-pager button[aria-current="true"] { background: #FF5B4B; transform: scale(1.35); }
.vw-count {
  margin-left: 4px; font-size: 11.5px; font-weight: 700;
  color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 마을로 돌아가는 길은 넘기는 동안에도 늘 보여야 한다 */
.viewer .doc-back {
  position: fixed; z-index: 30; left: 16px; top: 16px; margin: 0;
  padding: 6px 12px; border-radius: 999px; background: rgba(17, 17, 17, .5);
}
.viewer .doc-back a { color: rgba(255, 255, 255, .88); }
.viewer .doc-back a:hover { color: #fff; }

/* 스크린리더에만 읽히는 알림. 넘어간 것은 화면이 바뀌는 일이라
   눈으로 안 보는 사람에게는 아무 일도 안 일어난 것과 같다 */
.vw-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 760px) {
  .vw-arrow { top: auto; bottom: 18px; transform: none; width: 40px; height: 40px; }
  .vw-arrow--prev { left: 12px; }
  .vw-arrow--next { right: 12px; }
  .viewer .vw-panel { padding: 78px 0 86px; }
  /* 폰은 세로가 짧다. 영상을 데스크톱과 같은 비율로 두면 표제와 설명까지 합쳐
     화면을 넘겨서, 그 절만 굴려야 한다 */
  .film { --film-h: min(36dvh, 460px); }
  .vw-pager { max-width: calc(100vw - 116px); }
}