/* 베이비리듬 안내 페이지 공통 스타일.
   앱과 같은 규율: SF 계열 · 넉넉한 여백 · 무채색. 장식 없음. */
/* 색은 "고른 무채색"이다. 순백·순검정을 피하고 아주 옅은 온기를 남긴다 —
   종이에 가까운 바탕이 이 앱이 하는 일(새벽에 손으로 적던 기록표)과 맞다.
   ⚠️ 크림색(#F4F1EA)까지 가지 않는다. 그건 미니멀이 아니라 미니멀의 유행이다. */
:root {
  --ink: #1a1a18;
  --ink-2: #7a7a74;
  --line: #e7e7e1;
  --bg: #fbfbf9;
  --accent: #0a84ff;   /* 앱과 같은 파랑. 링크에만 쓴다. */
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #edede8; --ink-2: #93938c; --line: #2a2a27; --bg: #131311; }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 48px 24px 96px; max-width: 44rem;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
        "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
header { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 32px; }
h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -0.02em; }
h2 { font-size: 20px; margin: 40px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p, li { color: var(--ink); }
ul { padding-left: 1.2em; }
li { margin: 6px 0; }
.meta, footer { color: var(--ink-2); font-size: 14px; }
footer { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.lang { font-size: 14px; }
.lead { color: var(--ink-2); }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }

/* ── 랜딩(index.html) 전용 ──────────────────────────────────────────────
   유료 앱이라 **써보기 전에 결제**한다 — 앱 안에서 못 하는 증명을 이 페이지가 대신한다.

   규율은 무인양품의 그것을 따른다: **"이것으로 충분하다".**
   - 강조를 쌓지 않는다. 큰 글씨·색·대문자 라벨·카드 테두리를 전부 뺀다.
     남은 위계는 **크기 두 단계와 여백**뿐이다. 비어 있는 자리가 곧 여백이 아니라 설계다.
   - 파는 말을 쓰지 않는다. 사양을 적고 물러선다 — 판단은 읽는 사람이 한다.
   - **넣지 않은 것을 함께 적는다.** 무지가 소재와 공정을 적듯, 여기서는 없는 기능을 적는다.
     이 앱에서 그건 결점이 아니라 사양이다(PERSONA.md 부정 퍼소나).
   ⚠️ 세리프·크림색·따뜻한 갈색으로 가지 않는다. 그건 미니멀이 아니라 미니멀의 유행이고,
      무지 자신도 산세리프에 종이색 바탕을 쓴다. */
body.landing { max-width: 46rem; padding: 88px 24px 120px; }

.hero { border-bottom: none; padding: 0; margin-bottom: 88px; }
.wordmark {
  margin: 0 0 40px; font-size: 13px; font-weight: 400;
  letter-spacing: 0.22em; color: var(--ink-2);
}
.hero h1 {
  font-size: clamp(23px, 3.4vw, 30px); line-height: 1.55; letter-spacing: -0.01em;
  font-weight: 400; margin: 0 0 20px; text-wrap: balance;
}
.tagline {
  font-size: 15px; line-height: 1.75; color: var(--ink-2);
  max-width: 30rem; margin: 0;
}

/* ── 장(章). 기능 하나 = 제목 + 두세 문단 + 화면 한 장. ────────────────────
   ⚠️ 앞선 판(`e15acc1`)은 각 항목이 **두 줄**이었다. 무지 톤을 적용하면서 장식만이 아니라
   **정보까지** 덜어낸 것이 문제였다 — 무지도 상품 페이지에는 소재·치수·용법을 상세히 적는다.
   절제는 **장식의 절제**이지 정보의 절제가 아니다.

   유료 앱이라 **써보기 전에 산다.** 앱 안에서 못 하는 증명을 이 페이지가 대신해야 하므로,
   기능마다 무엇을 어떻게 하는지 구체적으로 쓴다(iA Writer 가 기능별 독립 섹션 + 화면 +
   2~4문단으로 파는 방식). Things 처럼 수상·리뷰로 미는 길은 우리에게 없다 — 신규라
   내세울 신뢰 장치가 하나도 없고, 그래서 **설명이 유일한 근거**다. */
.chapter { padding: 56px 0; border-top: 1px solid var(--line); }
.chapter.narrow { max-width: 34rem; }
.chapter h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 16px; text-wrap: balance;
}
.chapter p { margin: 0 0 14px; max-width: 34rem; line-height: 1.85; }
.chapter p:last-of-type { margin-bottom: 0; }
.chapter em { font-style: normal; color: var(--ink); font-weight: 500; }

.chapter figure { margin: 32px 0 0; }
/* 실제 파일은 640px 폭 — 레티나에서 또렷하게 두 배로 담고 표시만 줄인다. */
.chapter figure img {
  width: 100%; max-width: 300px; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 14px;
}

.omitted .list { color: var(--ink-2); line-height: 1.9; }

/* 사양표. 상품 태그처럼 읽히도록 값만 적고 형용사를 쓰지 않는다. */
.spec { margin-bottom: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.spec dl { margin: 0; display: grid; gap: 0; }
.spec dl > div {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.spec dt { font-size: 14px; color: var(--ink-2); }
.spec dd { margin: 0; font-size: 15px; }
.spec .family {
  margin: 20px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink-2);
}
.spec em { font-style: normal; color: var(--ink); }

.en { margin-bottom: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.en h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.en p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 32rem; }

.links { list-style: none; padding: 0; margin: 14px 0 0; font-size: 15px; }
.links li { margin: 3px 0; }

body.landing footer { border-top: 1px solid var(--line); margin-top: 0; padding-top: 28px; }

@media (max-width: 640px) {
  body.landing { padding-top: 56px; }
  .hero { margin-bottom: 56px; }
  .plate { gap: 24px; margin-bottom: 64px; }
  .plate figure { flex: 0 1 46%; }
  .notes { grid-template-columns: 1fr; gap: 40px; margin-bottom: 64px; }
  .omitted, .spec { margin-bottom: 64px; }
}

/* ── 도메인 루트(samchon.app/) — 앱 목록 ─────────────────────────────────
   앱별 경로 구조를 쓴다: 루트가 목록, `/babyrhythm/` 이 앱 하나
   (Things = culturedcode.com/things · iA Writer = ia.net/writer 와 같은 방식).
   앱이 늘어도 도메인을 더 사지 않는다.
   ⚠️ **없는 것을 적지 않는다** — 아직 스토어에 없는 앱은 "준비 중"으로도 올리지 않는다.
      목록이 비어 보이는 것보다 없는 약속이 적힌 쪽이 나쁘다. */
.apps { margin-bottom: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.app {
  display: block; color: inherit; text-decoration: none;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.app:hover { text-decoration: none; }
.app:hover h2 { color: var(--accent); }
.app h2 { font-size: 19px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.app p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.app .platform { margin-top: 6px; font-size: 13px; }