/* ------------------------------------------------------------------
   ヨンダラ 解説書（/apps/yondara/guide/）

   サイト共通の style.css の上に載せる。Webページと PDF を
   **同じHTMLから**作るので、印刷用の指定もここにまとめる。
   PDF は Chrome の「PDFに保存」で書き出す（Tools/yondara-guide-pdf.sh）。
   ------------------------------------------------------------------ */

/* ---- 本文の幅。図と並べる節は広く、読むだけの節は狭く ---- */

.g-body { max-width: 40rem; }
.g-body > h3 { font-family: var(--serif); font-size: 1.12rem; margin: 2.4rem 0 .6rem; }
.g-body > p { margin: 0 0 1.1rem; }
.g-body > p:last-child { margin-bottom: 0; }

/* ---- 画面写真 ---- */

.g-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.g-split + .g-split { margin-top: 3.5rem; }
.g-split.is-flip { grid-template-columns: 15.5rem minmax(0, 1fr); }
.g-split.is-flip > figure { order: -1; }

.g-phone { margin: 0; }
.g-phone img {
  width: 100%;
  border-radius: 30px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -38px rgba(29, 92, 77, .45);
  background: var(--card);
}
.g-phone figcaption,
.g-wide figcaption {
  margin-top: .8rem;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink-faint);
  text-align: center;
}

.g-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15.5rem));
  gap: clamp(1.25rem, 4vw, 2.5rem);
  justify-content: center;
  margin: 2.5rem 0 0;
}

.g-wide { margin: 2.75rem 0 0; }
.g-wide img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(29, 92, 77, .45);
}

@media (max-width: 760px) {
  .g-split, .g-split.is-flip { grid-template-columns: 1fr; }
  .g-split.is-flip > figure { order: 0; }
  .g-split > figure { max-width: 16rem; margin-inline: auto; }
  .g-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 補足の囲み ---- */

.g-note {
  margin: 1.6rem 0;
  padding: 1.15rem 1.35rem;
  border-radius: 18px;
  background: var(--green-soft);
  font-size: .92rem;
  line-height: 1.85;
}
.g-note p { margin: 0 0 .6rem; }
.g-note p:last-child { margin-bottom: 0; }
.g-note .g-note-title { font-weight: 600; color: var(--green); margin-bottom: .35rem; }
.g-note.is-amber { background: rgba(201, 146, 74, .12); }
.g-note.is-amber .g-note-title { color: var(--amber); }

/* ---- 表 ----
   サイト共通の .option-table は、2列目を薄い色・折り返しなしにしている（短い値のため）。
   解説書の表は2列目も本文なので、読める色で折り返す。印刷では薄い色がほぼ消える */

main .option-table td:nth-child(2) { white-space: normal; color: var(--ink-soft); }
main .option-table td:first-child { color: var(--ink); }
main .g-versions td:nth-child(n+2) { white-space: nowrap; }

/* ---- よくある質問（解説書では畳まない。印刷で答えが消えないように） ---- */

.g-qa { display: grid; gap: 1rem; }
.g-qa > div {
  background: var(--card);
  border-radius: 20px;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
}
.g-qa h3 {
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0 0 .5rem;
  padding-left: 1.6rem;
  position: relative;
}
.g-qa h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  color: var(--amber);
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 700;
}
.g-qa p { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .93rem; }
.g-qa p:last-child { margin-bottom: 0; }
.g-qa strong { color: var(--ink); }

/* ---- 見出しの前の小さな説明 ---- */

.g-kicker { font-size: .8rem; letter-spacing: .12em; color: var(--ink-faint); margin: 0 0 .5rem; }

/* ---- PDF のリンク ---- */

.g-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; align-items: center; }
.g-pdf {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}
.g-pdf:hover { background: #164a3e; }
.g-pdf small { font-weight: 400; opacity: .75; font-size: .78rem; }
.g-meta { font-size: .82rem; color: var(--ink-faint); }

/* 印刷したときだけ出すもの（表紙の日付など） */
.g-print-only { display: none; }

/* ------------------------------------------------------------------ 印刷（PDF） */

@page {
  size: A4;
  margin: 17mm 16mm 18mm;
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-family: "Hiragino Sans", sans-serif;
    font-size: 8pt;
    color: #a39b8b;
  }
  @top-right {
    content: "ヨンダラ 解説書";
    font-family: "Hiragino Sans", sans-serif;
    font-size: 7.5pt;
    color: #a39b8b;
  }
}
@page :first {
  @bottom-center { content: none; }
  @top-right { content: none; }
}

@media print {
  html, body { background: #fff; }
  body { font-size: 9.6pt; line-height: 1.75; }

  /* スクロールで出す仕組みは印刷では働かない。最初から全部見せる */
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  .blob, .site-head, .g-actions, .foot-nav, .foot-ext, .breadcrumb, .toc { display: none !important; }
  .g-print-only { display: block; }

  section { padding-block: 0 !important; }
  .feature-section { background: none; }
  .wrap { width: 100%; }

  /* ---- 表紙: 1ページ目だけで収める（はみ出すと白紙のページができる） ---- */
  .page-hero {
    height: 250mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    break-after: page;
    overflow: hidden;
  }
  .page-hero .g-cover-icon { width: 28mm; height: 28mm; border-radius: 6.5mm; margin-bottom: 8mm; }
  .page-hero h1 { font-size: 30pt; margin-bottom: 6mm; }
  .page-hero .lede { font-size: 11pt; max-width: 150mm; }

  /* ---- 目次: 2ページ目に単独で ---- */
  .g-toc-section { break-after: page; }
  .g-toc-section .section-label { font-family: var(--serif); font-size: 16pt; letter-spacing: .08em; color: var(--ink); margin: 0 0 8mm; padding-bottom: 3mm; border-bottom: 1px solid var(--line); }
  .g-toc-print { display: block !important; margin: 0; padding-left: 2.4em; font-size: 11pt; line-height: 2.4; }
  .g-toc-print li::marker { color: var(--amber); }

  /* ---- 章: 改ページして、見出しを大きく ---- */
  .g-chapter { break-before: page; }
  .g-chapter .section-label {
    font-family: var(--serif);
    font-size: 16pt;
    letter-spacing: .08em;
    color: var(--ink);
    margin: 0 0 5mm;
    padding-bottom: 3mm;
    border-bottom: 1px solid var(--line);
  }

  /* ---- 詰める。画面用の余白のままだと、章の最後の数行だけが次のページにこぼれる ---- */
  .g-body > h3, .g-split h3 { font-size: 11.5pt; margin: 5mm 0 1.5mm !important; }
  .g-body > p, .g-body .reveal:not(h3):not(ul):not(ol):not(div) { margin: 0 0 2.2mm; }
  .g-body[style] { margin-top: 5mm !important; }
  /* 短い手順が6つ縦に並ぶと1ページを使い切るので、2段にする */
  .steps { grid-template-columns: 1fr 1fr; column-gap: 8mm; row-gap: 4mm; }
  .step { gap: 4mm; }
  .step h3 { font-size: 10.5pt; margin: 0 0 .5mm; }
  .step p { font-size: 9pt; }
  .list { gap: .6mm; margin: 1.5mm 0 2.5mm; font-size: 9.4pt; line-height: 1.7; }
  .g-split { grid-template-columns: minmax(0, 1fr) 50mm; gap: 8mm; }
  .g-split.is-flip { grid-template-columns: 50mm minmax(0, 1fr); }
  .g-split + .g-split { margin-top: 7mm; }
  .g-split[style] { margin-top: 6mm !important; }
  .g-pair { grid-template-columns: repeat(2, 50mm); gap: 10mm; margin-top: 5mm; }
  .g-wide { margin-top: 5mm; }
  .g-phone img { border-radius: 14px; box-shadow: none; }
  /* Mac の横長の写真は、幅いっぱいだと高さを取りすぎて次のページへこぼれる */
  .g-wide img { box-shadow: none; border-radius: 8px; max-height: 88mm; width: auto; max-width: 100%; margin-inline: auto; }
  .g-phone figcaption, .g-wide figcaption { margin-top: 1.5mm; font-size: 7.5pt; }
  .g-note { margin: 3mm 0; padding: 2.8mm 4mm; border-radius: 8px; font-size: 9pt; }
  .table-wrap { overflow: visible; margin: 1mm 0 4mm; max-width: none !important; }
  .option-table { min-width: 0; font-size: 8.8pt; }
  .option-table th, .option-table td { padding: 1.6mm 2.4mm; }
  .g-qa { gap: 2.5mm; grid-template-columns: 1fr 1fr; align-items: start; }
  .g-qa > div { border-radius: 8px; padding: 3mm 4mm; }
  .g-qa h3 { font-size: 10pt; margin-bottom: 1mm; }
  .g-qa p { font-size: 9pt; }

  h3 { break-after: avoid; }
  figure, .g-note, .option-table tr, .g-qa > div, .step { break-inside: avoid; }

  a { text-decoration: none; color: inherit; }
  .site-foot { padding-top: 8mm; }
}

/* 印刷用の目次は画面では出さない（@media print の中で出す） */
@media screen { .g-toc-print { display: none; } }