/* ========================================
   各ページ（トップ以外）の共通の骨組み — パステル版
   - .page-hero: ページの見出し（台紙の上に貼る名札の見立て）
   - .paper.page-paper: 本文を載せる虹色のふちの台紙（見た目は css/cards.css の .paper）
   - .page-grid: 台紙の中にカード（css/cards.css の .bcard）を並べる枠
   - .prose: 規約・ガイド・お知らせなど、長い文章を読むための組み方
   - .field / .input: フォーム
   - .steps / .step: 番号付きの手順
   配色トークンと共通部品（ヘッダー・ボタン・フッター）は css/site.css
   ======================================== */

.page {
  padding: 104px 12px 0;
}

/* ── 見出し ── */
.page-hero {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 8px 40px;
  text-align: center;
}

.page-hero > * + * {
  margin-top: 16px;
}

.page-title {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(2.125rem, 8vw, 3.5rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}

.page-title .marker {
  --marker: var(--c-pink-tint);
}

.page-lead {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--c-ink-soft);
}

/* 見出しのまわりの落書き（飾り） */
.page-doodle {
  position: absolute;
  width: 40px;
  height: 40px;
  color: var(--doodle, var(--c-pink-tint));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.page-doodle--a { --doodle: var(--c-pink-tint);     left: 4%;  top: 18%; transform: rotate(-12deg); }
.page-doodle--b { --doodle: var(--c-lemon-tint);    right: 6%; top: 8%;  transform: rotate(10deg); width: 48px; height: 48px; }
.page-doodle--c { --doodle: var(--c-mint-tint);     right: 12%; bottom: 10%; transform: rotate(-6deg); width: 32px; height: 32px; }

/* ── 台紙 ── */
.page-paper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 16px 48px;
}

.page-paper--narrow {
  max-width: 880px;
}

/* 台紙の中のカードは枠いっぱいに広げ、交互に少し傾けて「貼った」感じを出す */
.page-paper .bcard {
  max-width: none;
}

.tilt-alt > .bcard:nth-child(odd) { --r: -1deg; }
.tilt-alt > .bcard:nth-child(even) { --r: 1deg; }

.page-grid {
  display: grid;
  gap: 32px;
}

.page-section + .page-section {
  margin-top: 56px;
}

.page-section-title {
  margin-bottom: 24px;
  text-align: center;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.6vw, 2.25rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.page-section-lead {
  margin: -8px auto 24px;
  max-width: 40rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--c-ink-soft);
}

/* 台紙の下に置く、次の行動への案内（虹色のカード） */
.page-cta {
  max-width: 760px;
  margin: 56px auto 0;
}

.page-cta .bcard {
  max-width: none;
}

.page-cta .bcard--rainbow h2 {
  font-size: clamp(1.5rem, 6vw, 2.25rem);
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.store-badges--large img {
  height: 48px;
  width: auto;
}

/* Google Play のバッジは画像の上下に余白を含むので、そのぶん大きくして App Store とそろえる */
.store-badges--large .store-badge-play {
  height: 70px;
}

@media (min-width: 640px) {
  .cta-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .page {
    padding: 112px 24px 0;
  }

  .page-paper {
    padding: 56px 48px 64px;
  }

  .page-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 番号付きの手順（付箋と画面写真を交互に並べる） ── */
.steps {
  display: grid;
  gap: 48px;
}

.step {
  display: grid;
  gap: 24px;
  align-items: center;
}

/* 手順のイラストは白いフチの写真のように貼る */
.step-shot {
  justify-self: center;
  width: min(100%, 420px);
  padding: 12px 12px 28px;
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: 0 16px 36px rgba(58, 46, 63, 0.14);
  transform: rotate(var(--shot-r, -3deg));
}

.step-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.step:nth-child(even) .step-shot {
  --shot-r: 3deg;
}

.step-num {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--c-white);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--note-deep, var(--c-berry-deep));
}

@media (min-width: 768px) {
  .step {
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
  }

  /* 偶数番目は画面写真を右に置く */
  .step:nth-child(even) .step-shot {
    order: 2;
  }
}

/* ── 長い文章（規約・ガイド・お知らせの本文） ── */
.prose {
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--c-ink);
  /* URL やメールアドレスなど切れ目の無い長い文字列で、スマホの画面からはみ出さないようにする */
  overflow-wrap: anywhere;
}

.prose > * + * {
  margin-top: 16px;
}

.prose h2 {
  margin-top: 48px;
  padding: 6px 0 6px 16px;
  border-left: 6px solid var(--prose-accent, var(--c-pink-tint));
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.45;
}

.prose h3 {
  margin-top: 32px;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.5;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose ol {
  list-style: decimal;
  padding-left: 1.5em;
}

.prose ul {
  list-style: disc;
  padding-left: 1.5em;
}

.prose li + li {
  margin-top: 6px;
}

.prose a {
  color: var(--c-berry-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose strong {
  font-weight: 700;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.prose th,
.prose td {
  padding: 12px 14px;
  border-bottom: 2px dashed var(--c-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  width: 32%;
  font-weight: 700;
  background: var(--c-cream-deep);
}

/* 長い文章を載せる紙。罫線の紙を薄く敷く */
.prose-sheet {
  position: relative;
  padding: 32px 22px;
  border-radius: 24px;
  background:
    repeating-linear-gradient(transparent 0 31px, rgba(140, 200, 242, 0.22) 31px 32px),
    var(--c-white);
  box-shadow: 0 10px 28px rgba(58, 46, 63, 0.08);
}

@media (min-width: 768px) {
  .prose-sheet {
    padding: 48px 56px;
  }
}

/* 目次（ページ内リンク） */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--toc-bg, var(--c-pink));
  /* 同じ色の面（ステッカーなど）に置いても形が見えるよう、白いふちと薄い影を付ける */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 0 var(--c-line);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-ink);
  transition: transform 0.2s ease;
}

.toc a:hover,
.toc a:focus-visible {
  transform: translateY(-2px);
}

.toc a:nth-child(6n + 2) { --toc-bg: var(--c-mint); }
.toc a:nth-child(6n + 3) { --toc-bg: var(--c-lemon); }
.toc a:nth-child(6n + 4) { --toc-bg: var(--c-lavender); }
.toc a:nth-child(6n + 5) { --toc-bg: var(--c-sky); }
.toc a:nth-child(6n + 6) { --toc-bg: var(--c-peach); }

/* ── フォーム ── */
.field {
  display: grid;
  gap: 8px;
}

.field + .field {
  margin-top: 20px;
}

.field-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-ink);
}

.field-hint {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-white);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--c-berry);
  box-shadow: 0 0 0 4px rgba(194, 69, 122, 0.16);
}

textarea.input {
  min-height: 160px;
  resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .toc a,
  .input {
    transition: none;
  }
}