/* 올라 소개 사이트 — 한 벌짜리 스타일 (2026-08-31).
 *
 * **색은 `docs/16-brand-tokens.md` 에서 온다. 새 색을 안 만든다.**
 * `/admin` 이 같은 문장을 적어 두었다 — *"앱과 대시보드가 갈리면 같은
 * 제품으로 안 읽힌다."*
 *
 * ## 「파랑 면은 화면당 하나」를 웹에서 어떻게 지키나 (2026-08-31 사용자)
 *
 * 사용자가 *"너무 단조로워 … 더 다채롭고 깔끔"* 하기를 원했고, 레퍼런스로
 * 든 트레일러닝 대회 페이지는 **면을 통째로 칠해 절을 나눈다.**
 *
 * 앱의 규칙은 **`#1B5CFF` 면 = 지금 누를 버튼**이다. 그 규칙이 지키는 것은
 * *"어느 것을 눌러야 하는지 헷갈리지 않는다"* 이지 *"파랑을 적게 쓴다"* 가
 * 아니다. 그래서 이렇게 갈랐다.
 *
 *   - **`--accent` (#1B5CFF)** — **누를 것에만.** 페이지당 하나
 *   - **`--deep` (#14307A)** · **`--mist` (#DCE5FF)** — **면을 나누는 데.**
 *     둘 다 이미 브랜드 토큰이다(도장 글자·연한 파랑 면). 새 색이 아니다
 *
 * 검사가 `.cta` 가 페이지마다 한 번만 나오는지, 그리고 모든 hex 가
 * `docs/16` 의 집합 안인지 문다.
 */

:root {
  --ink: #17181A;         /* 본문 — 흰 바탕 대비 17.8 */
  --muted: #5C5A55;       /* 보조 — 6.9. **중간 회색은 이 하나뿐이다** */
  --faint: #8A857B;
  --bg: #F8F8F6;
  --surface: #FFFFFF;
  --surface-2: #F4F4F2;
  --line: #D6D3CC;

  --accent: #1B5CFF;      /* **누를 것 전용** — 흰 글자 대비 5.2 */
  --accent-hover: #1543C7;
  --deep: #14307A;        /* 면을 나누는 짙은 벌 */
  --mist: #DCE5FF;        /* 면을 나누는 옅은 벌 */
  --on-deep: #E3EAFF;     /* 짙은 면 위 보조 글자 */
  --deep-line: #1543C7;

  --radius: 18px;
  --radius-lg: 24px;
  --tap: 56px;            /* 최소 터치 — 장갑 낀 손 */
  color-scheme: light dark;
}

/* **야간 하산용 벌.** 다크에서는 파랑을 면이 아니라 선과 글자로 쓴다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #D2D1CD;
    --muted: #8A857B;
    --faint: #6E6A62;
    --bg: #121417;
    --surface: #25262A;
    --surface-2: #25262A;
    --line: #3A3B40;
    --accent: #74A0FF;
    --accent-hover: #8FB4FF;
    --deep: #14307A;
    --mist: #25262A;
    --on-deep: #C9D8FF;
    --deep-line: #1543C7;
  }
}

/* **이 사이트가 쓰는 글자만 남긴 벌이다** (`web/tool/build_fonts.py`).
 * 통짜 한글은 한 벌에 2.4MB 인데 여기서는 22KB 다.
 *
 * **`Olla Mono` 에는 한글이 없다** — 앱 쪽 파이프라인이 Mono 를 라틴만
 * 남기기 때문이다. 그러니 **한글을 고정폭으로 쓰지 마라.** 쓰면 그 글자만
 * 시스템 글꼴로 튄다(실제로 「집에서」·「모임」에서 그럴 뻔했다). */
@font-face { font-family:"Olla Sans"; src:url("fonts/olla-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Olla Sans"; src:url("fonts/olla-sans-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Olla Mono"; src:url("fonts/olla-mono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Olla Sans","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size: 17px; line-height: 1.65; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;

  /* **한글을 글자 단위로 끊지 않는다** (2026-08-31 사용자가 짚었다).
   *
   * 브라우저는 한글을 CJK 로 보아 **아무 글자에서나** 줄을 바꾼다. 그래서
   * 「산에서 꺼내 / 서, 몇 초 안에」·「전부 앱에서 / 유지 됩니다」·
   * 「사용자 실제 정보 / 를 바탕으로」처럼 **낱말 한가운데가 갈렸다.**
   *
   * `keep-all` 은 **띄어쓰기에서만** 끊는다 — 한국어를 읽는 방식 그대로다.
   * 곁들여 `overflow-wrap: break-word` 를 두는 이유는, 띄어쓰기가 하나도
   * 없는 긴 것(주소 같은 것)이 오면 `keep-all` 만으로는 **상자를 뚫고
   * 나가기** 때문이다. 그때만 글자에서 끊는다. */
  word-break: keep-all;
  overflow-wrap: break-word;

  /* **줄 끝에 한 낱말만 남는 것을 브라우저가 피하게 한다.**
   * `keep-all` 이 「낱말 가운데」를 막고, 이것이 「어느 띄어쓰기에서 접을지」를
   * 낫게 고른다. 지원 안 하는 브라우저는 그냥 무시한다 — 잃는 것이 없다. */
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
a { color: inherit; }

/* ── 떠 있는 알약 내비 ───────────────────────────────────────── */
.top {
  position: sticky; top: 14px; z-index: 20;
  padding: 0 24px; margin-bottom: -84px;
}
.bar {
  width: min(1120px, 100%); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  /* **어두운 히어로 위에 앉으므로 알약도 어둡다.** 흰 알약을 얹으면
   * 첫 화면에서 그것만 보인다 — 먼저 보여야 하는 것은 지도와 문구다. */
  background: #25262A; color: #FFFFFF;
  border: 1px solid #3A3B40; border-radius: 999px;
  padding: 10px 12px 10px 22px;
  box-shadow: 0 8px 26px rgba(23,24,26,.10);
}
/* **`<img>` 로 넣은 SVG 는 `currentColor` 를 못 받는다.**
 * 그림이 자기 문서로 그려져서 문서 색을 상속하지 않는다 — 밝은 벌에서는
 * 검정이 우연히 맞았지만 어두운 벌에서 **거의 안 보였다**(눈으로 보고 알았다).
 *
 * 그래서 **마스크로 찍는다.** 색은 `background` 가 내고 모양만 SVG 가 준다.
 * 파일은 하나로 두고(앱 좌표와 대조하는 검사가 그 파일을 본다) 색만 자리마다
 * 달라진다 — 흰 알약 위에서는 잉크, 어두운 알약 위에서는 흰색. */
.mark {
  display: block;
  -webkit-mask: url("img/wordmark.svg") no-repeat center / contain;
  mask: url("img/wordmark.svg") no-repeat center / contain;
}
.bar .mark { width: 92px; height: 30px; background: #FFFFFF; }
.bar nav { margin-left: auto; display: flex; gap: 22px; }
.bar nav a { color: #8A857B; text-decoration: none; font-size: 15px; }
.bar nav a:hover { color: #FFFFFF; }
.bar .cta { margin: 0; min-height: 44px; padding: 0 22px; font-size: 15px; }
@media (max-width: 900px) { .bar nav { display: none; } }

/* ── 히어로 — **지도가 배경이다** ─────────────────────────────
 * MapLibre 를 실행하지 않는다. 첫 화면의 지도는 **질감**이지 도구가 아니라,
 * 라이브러리 784KB 와 타일 수십 장을 받을 이유가 없다.
 * `web/tool/bake_hero.py` 가 우리 타일로 한 장 구워 둔다. */
.hero {
  position: relative; overflow: hidden;
  min-height: min(820px, 96vh);
  display: flex; align-items: center;
  padding: 130px 0 90px;
  /* **어두운 벌이다** (2026-08-31 사용자가 A/B 를 보고 골랐다).
   * 앱이 야간 하산에 쓰는 지도 스타일 그대로라 새로 만든 것이 아니고,
   * 어둠 위에 등산로가 **빛나는 선**으로 떠서 밝은 벌보다 시인성이 훨씬
   * 높다(흰 글자 대비 14 이상). 구운 파일도 가볍다(352KB ↔ 584KB). */
  background: #101114; color: #FFFFFF;
}
.hero-map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.1);
}
/* 지도와 글자 사이에 **아주 옅은 흰 안개**를 깐다 — 카드 밖의 부제까지
 * 읽히게 하려면 배경을 한 겹 눌러야 한다. 지도는 여전히 보인다. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg,
    rgba(16,17,20,.94) 0%, rgba(16,17,20,.78) 34%,
    rgba(16,17,20,.28) 62%, rgba(16,17,20,0) 100%);
}
.hero .eyebrow { color: #8FB4FF; }
.hero .lede { color: #C9D8FF; }
.hero .lede strong { color: #FFFFFF; }
.hero .ghost { color: #FFFFFF; border-color: #3A3B40; }
.hero .ghost:hover { border-color: #FFFFFF; }
.hero .note { color: #6E6A62; }
.hero .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block; margin: 0 0 18px;
  font-family: "Olla Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .12em;
  color: var(--accent); text-transform: uppercase;
}
h1 {
  /* **폭을 안 조인다** (2026-08-31 사용자). `15ch` 로 묶어 두었더니
   * 「산에서 꺼내서, 몇 초 안에.」가 16자라 **넓은 화면에서도 두 줄**이
   * 됐다. 좁은 화면에서는 `.wrap` 이 알아서 접는다 — 거기서는 두 줄이
   * 맞다. `word-break: keep-all` 덕에 접히는 자리는 띄어쓰기다. */
  margin: 0 0 20px;
  font-size: clamp(38px, 6.4vw, 76px); line-height: 1.08;
  font-weight: 600; letter-spacing: -1.5px; text-wrap: balance;
}
/* **문장 하나가 한 줄에 들어가게 잡았다.**
 *
 * 34ch → 36ch → **44ch** 로 두 번 넓혔다. 36ch 로도 「…전부 앱에서 /
 * 유지 됩니다」가 접혔는데, 그 문장이 **정확히 36자**인 데다 굵은 글자가
 * 섞여 더 넓기 때문이었다. `ch` 는 숫자 `0` 의 폭이라 한글에는 넉넉히
 * 잡아야 한다 — **세어서 맞추지 말고 눈으로 보고 넓혀라.** */
.lede { margin: 0; max-width: 44ch; color: var(--muted); font-size: clamp(17px,1.5vw,20px); }
.lede strong { color: var(--ink); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 34px; }
/* **파랑 면은 이 하나뿐이다.** */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 32px;
  background: var(--accent); color: #FFFFFF;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 17px;
}
.cta:hover { background: var(--accent-hover); }
.ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 28px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 17px;
}
.ghost:hover { border-color: var(--ink); }
.note { margin: 14px 0 0; color: var(--faint); font-size: 14px; }

/* ── 절 ───────────────────────────────────────────────────────── */
section { padding: 96px 0; }
.band-deep { background: var(--deep); color: #FFFFFF; }
.band-deep .eyebrow { color: var(--mist); }
.band-deep .sub { color: var(--on-deep); }
.band-mist { background: var(--mist); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-mist { background: var(--surface-2); }
}
.band-white { background: var(--surface); }
/* **흰 절이 둘 이어지면 한 절로 읽힌다.** 아주 옅게 눌러 경계를 만든다. */
.band-soft { background: var(--bg); }

/* **화면 그림이 앉는 자리.**
 *
 * 처음에는 연한 파랑(`--mist`) 띠에 얹었는데 **겉돌았다** (2026-08-31 사용자).
 * 앱 화면의 배경이 `#F8F8F6` 인 **따뜻한 흰색**이라, 찬 파랑 위에 놓으면
 * 두 색의 온도가 달라 그림이 종이처럼 붕 뜬다. 반 톤 어두운 **같은 계열**
 * (`--surface-2` #F4F4F2)에 놓으면 화면 안쪽과 이어지면서 둥근 모서리만
 * 또렷해진다. */
.band-screens { background: var(--surface-2); }

h2 {
  margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600; line-height: 1.25; letter-spacing: -.6px; text-wrap: balance;
}
.sub { margin: 0 0 44px; max-width: 56ch; color: var(--muted); font-size: 17px; }

/* ── 숫자 띠 ─────────────────────────────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fig { padding: 26px 22px; border-left: 1px solid var(--deep-line); }
.fig:first-child { border-left: 0; padding-left: 0; }
.fig b {
  display: block;
  font-family: "Olla Mono", ui-monospace, monospace;
  font-weight: 500; font-size: clamp(30px, 3.6vw, 46px);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1.1;
}
.fig span { display: block; margin-top: 8px; font-size: 15px; color: var(--on-deep); }
@media (max-width: 860px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .fig { border-left: 0; padding-left: 0; }
}

/* ── 카드 ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px 32px;
}
.tile .num {
  /* 숫자(`01`)일 때도 있고 한글(「서포터」)일 때도 있어 **본문 글꼴로 둔다.**
   * 고정폭으로 두면 한글이 든 자리만 글꼴이 튄다. */
  font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .06em;
}
.tile h3 { margin: 12px 0 10px; font-size: 20px; font-weight: 600; }
.tile p { margin: 0; color: var(--muted); font-size: 16px; }

/* ── 흐름(타임라인) ──────────────────────────────────────────── */
.flow { display: grid; grid-template-columns: 150px 1fr; gap: 0 26px; }
@media (max-width: 720px) { .flow { grid-template-columns: 84px 1fr; gap: 0 16px; } }
.flow .when {
  /* **고정폭을 안 쓴다** — 여기 들어가는 것이 「집에서」·「들머리」 같은
   * 한글이고, `Olla Mono` 에는 한글이 없다. */
  font-size: 14px; font-weight: 600; color: var(--muted);
  padding: 22px 0; text-align: right;
}
.flow .step {
  position: relative; padding: 22px 0 22px 30px;
  border-left: 2px solid var(--line);
}
.flow .step::before {
  content: ""; position: absolute; left: -7px; top: 30px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
}
.flow .step h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.flow .step p { margin: 0; color: var(--muted); font-size: 16px; }

/* ── 띠 표 (안전) ────────────────────────────────────────────── */
/* **왼쪽 칸 너비를 고정하지 않는다 — 표마다 제 이름 길이에 맞춘다.**
 *
 * 처음엔 `.row` 하나하나가 격자였고 왼쪽 칸이 `240px` 고정이었다. 그런데
 * 행사 페이지의 「무이동 감지 → 자동 경보」에 알약이 **둘**(「무료」·「준비 중」)
 * 붙어 아래로 밀려서 `380~420px` 로 넓혔다 (2026-08-31 사용자). 그 값이
 * 소개 페이지에도 그대로 걸려 이번엔 반대가 됐다 —
 *
 * > "왼쪽 메뉴의 너비가 너무 커" (2026-08-31 사용자)
 *
 * 「국가지점번호 + 무료」에 420px 은 두 배쯤 넘친다. **한 숫자로 두 표를
 * 맞출 수 없다.** 그래서 격자를 `.row` 에서 `.rows` 로 올리고 `.row` 를
 * `display: contents` 로 비운다 — 칸 나눔이 **표 하나 전체에 걸리므로**
 * 줄마다 경계선이 어긋나지 않으면서, 너비는 그 표에서 가장 긴 이름이 정한다.
 *
 * `.row` 의 테두리 색을 그대로 살려야 한다(행사 페이지 파랑 띠가 인라인으로
 * 준다). `display: contents` 는 상자만 지우고 **상속은 남기므로**, 기본값을
 * 여기서 주고 아래 경계선이 `inherit` 로 받아 간다. */
.rows {
  display: grid; grid-template-columns: auto 1fr;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.row { display: contents; border-color: var(--line); }
.row > dt, .row > dd { border: 0 solid; border-color: inherit; }

/* **가운데 구분선.** 밝은 표는 왼쪽 칸이 `--surface-2` 라 색만으로 갈렸지만,
 * 행사 페이지의 파랑 띠는 **양쪽 바탕이 같아** 이름과 설명이 한 덩어리로
 * 읽혔다 (2026-08-31 사용자). 선은 표 테두리와 같은 색을 상속받는다. */
.row > dt { border-right-width: 1px; }

.row + .row > dt { border-top-width: 1px; }
/* 한 칸으로 접히면 이름 위에만 줄을 긋는다 — 설명에도 그으면 **같은 줄의
 * 이름과 설명 사이**가 갈라져 두 줄로 보인다. */
@media (min-width: 901px) { .row + .row > dd { border-top-width: 1px; } }
@media (max-width: 900px) {
  .rows { grid-template-columns: 1fr; }
  .row > dt { border-right-width: 0; }
}
/* 네 칸 격자(규모·대시보드)는 좁아지면 둘씩 접는다. */
.grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.four { grid-template-columns: 1fr; } }
.row dt {
  background: var(--surface-2); padding: 20px 24px;
  font-weight: 600; font-size: 16px;
}
.row dd { margin: 0; padding: 20px 24px; background: var(--surface); color: var(--muted); font-size: 16px; }
.free {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-size: 13px; font-weight: 600; vertical-align: 2px;
}

.asof { margin-top: 28px; color: var(--faint); font-size: 14px; }
.band-deep .asof { color: var(--on-deep); opacity: .75; }

/* ── 인라인을 대신하는 것들 ──────────────────────────────────────
 *
 * **`style="…"` 속성은 운영에서 하나도 안 듣는다.** nginx 가 보내는
 * `Content-Security-Policy` 에 `style-src 'self'` 만 있고 `'unsafe-inline'`
 * 이 없어서다 — 2026-08-31에 올린 뒤 밖에서 찍어 보고서야 알았다.
 * **로컬 미리보기 서버는 그 헤더를 안 보내므로 멀쩡히 보인다.**
 *
 * 파랑 띠의 「20명까지는 / 20명 이상이라면」 표가 **흰 글씨에 흰 바탕**이
 * 되어 안 읽혔다. 헤더를 푸는 것이 아니라 인라인을 여기로 걷어 온다 —
 * 헤더는 남의 스크립트가 이 페이지에 색을 칠하는 것을 막는 자물쇠다.
 *
 * `test_public_site.py:test_인라인_스타일이_없다` 가 다시 새는 것을 막는다. */

/* 어두운 띠 위에서 한 낱말만 희게 띄운다. */
.band-deep .hi { color: #FFFFFF; }
.band-deep .ghost { color: #FFFFFF; border-color: #1543C7; }

/* 가운데로 모으는 마무리 띠(받기·문의). 제목 너비는 **두 쪽 다 22ch** 로
 * 맞췄다 — 소개 쪽이 20ch 였는데 제목이 열 글자라 걸리지 않는다. */
.wrap.center { text-align: center; }
.wrap.center h2 { max-width: 22ch; margin-inline: auto; }
.wrap.center .sub { margin-inline: auto; }
.wrap.center .actions { justify-content: center; }

.split.pushed { margin-top: 56px; }
.say h3 { margin: 0 0 10px; font-size: 22px; }
.say p { margin: 0; color: var(--muted); }

.bar > a { text-decoration: none; }
.nowrap { white-space: nowrap; }

/* 아직 못 만든 것을 적는 칸 — 테두리를 점선으로 해 「준비 중」 알약과 같은 말을 한다. */
.tile.pending { margin-top: 28px; border-style: dashed; }

/* 어두운 벌의 띠 표(행사 페이지 「누가 무엇을 보나」). */
.rows.deep, .rows.deep .row { border-color: #1543C7; }
.rows.deep dt { background: #14307A; color: #FFFFFF; }
.rows.deep dd { background: #14307A; color: #E3EAFF; }

/* ── 꼬리 ─────────────────────────────────────────────────────── */
footer { padding: 56px 0 72px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; }
footer .mark { width: 84px; height: 27px; background: var(--muted); }
footer a { color: var(--muted); }
.credit { flex-basis: 100%; color: var(--faint); font-size: 13px; line-height: 1.7; }


/* ── 앱 화면 ───────────────────────────────────────────────────
 *
 * **테두리를 그린 「기기 틀」을 안 만든다.** 시안이 이미 둥근 모서리와 그림자를
 * 갖고 있고, 거기에 검은 베젤을 두르면 **그림 안에 그림이 하나 더** 생긴다.
 * 그림자만 얹어 종이 위에 놓인 것처럼 둔다.
 */
/* **넉 장을 나란히 놓는다.** 넘기게 두었더니 어색했다 (2026-08-31 사용자) —
 * 잘린 그림이 「덜 만든 화면」으로 읽히고, 넘겨야 나머지가 보인다는 것 자체가
 * 소개 페이지에서는 부담이다. 좁아지면 둘씩, 더 좁아지면 하나씩 접는다. */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .shots { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 520px) { .shots { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

.shot img {
  display: block; width: 100%; height: auto;
  /* **여기서 둥글리지 않는다.** 구운 그림이 이미 **시안이 쓰는 그 반지름**
   * 으로 모서리가 투명하다(`bake_screens.py` 가 DOM 에서 재서 깎는다).
   * CSS 로 또 둥글리면 두 반지름이 어긋나 **모서리에 얇은 어깨**가 남는다
   * — 2026-08-31에 사용자가 그것을 짚었다. */
  /* **`box-shadow` 를 쓰면 안 된다.** 그것은 요소의 **네모난 상자**에
   * 그려지는데 이 그림은 모서리가 투명하다 — 둥근 모서리 **바깥에 그림자가
   * 네모로 삐져나와** 경계가 어색해진다(2026-08-31 사용자가 짚었다).
   * `drop-shadow` 는 **알파를 따라간다.** */
  filter: drop-shadow(0 18px 34px rgba(23,24,26,.22));
}
.shot figcaption { margin: 18px 2px 0; color: var(--muted); font-size: 15px; }
.shot b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.shot { margin: 0; }

/* 글과 화면을 나란히 두는 자리(안전·함께 걷기). */
.split { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } .split img { max-width: 340px; } }
.split img {
  display: block; width: 100%; height: auto;
  /* 위와 같은 까닭 — 알파를 따라가는 그림자를 쓴다. */
  filter: drop-shadow(0 18px 34px rgba(23,24,26,.22));
}

/* 완주 카드는 세로가 아니라 **네모에 가까운 한 장**이라 따로 둔다. */
.card-share { max-width: 420px; }
.card-share img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(23,24,26,.24));
}

/* ── 페이지로 가는 단추 ────────────────────────────────────────
 *
 * **화면 안에서 뛰는 것과 페이지를 떠나는 것을 가른다** (2026-08-31 사용자).
 * 왼쪽 `nav` 는 이 페이지 안의 자리로 뛰고, 이 단추는 **다른 페이지**다.
 * 한 줄에 같은 꼴로 섞여 있으면 어느 것이 이 페이지를 떠나는지 알 수 없다.
 *
 * **파랑으로 채운다** (2026-08-31 사용자).
 *
 * 처음에는 테두리로만 두었다 — 앱 규칙이 *"파랑 면은 화면당 하나 = 지금
 * 누를 버튼"* 이라서다. 그런데 사용자가 **맨 위 줄의 CTA 를 빼라**고 했다:
 *
 * > "출시 알림받기와 문의하기는 바로 아래 본문 히어로에 나오니 맨 위
 * >  메뉴의 버튼은 없어도 될 거 같고"
 *
 * 맞는 말이다 — 같은 단추가 한 화면에 두 번 있었다. 그것을 빼고 나니
 * **이 줄에서 누를 것은 이 단추 하나**가 되어, 파랑이 규칙을 어기지 않는다.
 * (히어로의 `.cta` 와 함께 화면에 파랑이 둘 보이기는 한다. 다만 하나는
 * **떠 있는 줄**, 하나는 **본문**이라 같은 층이 아니다.)
 */
.bar .pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  background: var(--accent); border-radius: 999px;
  color: #FFFFFF; text-decoration: none; font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.bar .pill:hover { background: var(--accent-hover); }

/* **아직 안 만든 것.** 있는 척하지 않는다 — 「무료」 알약 옆에 그 사실을
 * 나란히 둔다. 채우지 않고 테두리로만 말해 「무료」와 안 헷갈리게 한다. */
.soon {
  display: inline-block; margin-left: 6px; padding: 2px 10px;
  border: 1px dashed var(--faint); border-radius: 999px;
  color: var(--faint); font-size: 13px; font-weight: 600; vertical-align: 2px;
}

/* ── 의미 단위로 줄을 끊는다 ───────────────────────────────────
 *
 * > "아직도 어색한 개행이 남아 있어 … 앱소개 페이지 뿐 아니라 대회 운영
 * >  페이지도 동일해" (2026-08-31 사용자)
 *
 * `word-break: keep-all` 이 **낱말 가운데**를 막아 주었지만, 그것만으로는
 * 부족했다. 남은 것은 **띄어쓰기에서 끊기는데 뜻이 갈리는** 자리다:
 *
 *     누르는 / 것은        ← 관형어와 의존명사
 *     사용자 실제 / 정보를  ← 꾸미는 말과 꾸밈 받는 말
 *     앱에서 / 유지 됩니다  ← 부사구와 서술어
 *
 * **CSS 는 한국어의 구조를 모른다.** 폭을 아무리 조절해도 화면 크기가
 * 바뀌면 끊기는 자리가 따라 움직인다. 그래서 **뜻이 갈리면 안 되는 자리를
 * 사람이 정해 준다.**
 *
 * `<br class="mu">` 는 **넓은 화면에서만** 산다. 좁은 화면에서는 사라지고
 * `keep-all` 이 띄어쓰기에서 알아서 접는다 — 거기서는 어차피 여러 줄이라
 * 사람이 정한 자리가 오히려 어색해진다.
 */
br.mu { display: none; }
@media (min-width: 900px) { br.mu { display: inline; } }