/* Noeta Studio — サポート／プライバシーのページ
   ────────────────────────────────────────────────
   ★ 色・書体・余白の出どころは DESIGN.md（"Quiet White"）。ここに新しい値を作らない。
     土台は style.css（:root の変数・nav・foot をそのまま使う）。このファイルは本文だけを足す。

   ⚠️ この3つを外すと壊れる（style.css と同じ）
    1. border-radius は全要素 0。例外なし
    2. アクセント色を持たない。無彩色だけ（有彩色はロゴマークの中だけ）
    3. letter-spacing のマイナスは【欧文だけの要素】に当てる（.kicker のみ）。
       和文を含む見出し・本文には当てない

   ⚠️ .rv（スクロールで現れる動き）は使わない。
      文書のページは JS が動かなくても最初から読めること。
*/

/* ---- 記事の器 ----------------------------------------------------------- */
.doc{
  max-width:46rem;                 /* 1行の長さ。読むためのページなので幅を絞る */
  margin:0 auto;
  padding-inline:var(--edge);
  padding-block:clamp(4rem,9vw,7rem) clamp(5rem,11vw,9rem);
}

/* アプリ名。欧文だけなのでマイナスの字間を当てる */
.doc .kicker{
  font-family:var(--latin); font-size:0.8125rem; font-weight:500;
  letter-spacing:-0.01em; color:var(--fg-muted);
  line-height:1; margin-bottom:1.25rem;
}
.doc h1{
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:300; line-height:1.3;
  padding-bottom:1.75rem; border-bottom:1px solid var(--fg);
  margin-bottom:2.5rem;
}
.doc .lead{
  /* ⚠️ style.css の .lead（トップの大見出し）と名前が重なるので、必ず .doc を前に付けて上書きする */
  padding:0;
  font-size:1rem; line-height:2; color:var(--fg);
  margin-bottom:1rem;
}
.doc .updated{
  font-family:var(--latin); font-size:0.8125rem; color:var(--fg-faint);
  margin-bottom:1.75rem;
}

/* ---- 節 ----------------------------------------------------------------- */
.doc section{
  margin-top:4rem; padding-top:2.25rem; border-top:1px solid var(--line);
}
.doc h2{
  font-size:1rem; font-weight:500; line-height:1.6;
  margin-bottom:1.25rem;
}
.doc p{ margin-bottom:1rem; }
.doc p:last-child{ margin-bottom:0; }

.doc ul{ list-style:none; }
.doc li{
  position:relative; padding-left:1.25rem; margin-bottom:0.85rem;
}
.doc li::before{
  /* 点ではなく短い罫。丸を置かないのは角丸ゼロの決めごとと同じ理由 */
  content:""; position:absolute; left:0; top:1em;
  width:0.5rem; height:1px; background:var(--fg-faint);
}
.doc li strong{ font-weight:500; }
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.875em; color:var(--fg-muted);
}

/* ---- よくある質問 -------------------------------------------------------- */
.doc .faq dt{
  font-weight:500; margin-top:2rem;
}
.doc .faq dt:first-of-type{ margin-top:0; }
.doc .faq dd{ color:var(--fg-muted); margin-top:0.35rem; }

/* ---- リンク -------------------------------------------------------------- */
.doc .mail{
  font-family:var(--latin); font-size:1rem;
  text-decoration:none; border-bottom:1px solid var(--fg);
  padding-bottom:2px;
}
.doc .mail:hover{ color:var(--fg-muted); border-bottom-color:var(--fg-muted); }

.doc .back{
  display:inline-block; margin-top:4.5rem;
  font-size:0.8125rem; color:var(--fg-muted); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.doc .back:hover{ color:var(--fg); border-bottom-color:var(--fg); }

@media (max-width:900px){
  .doc section{ margin-top:3rem; padding-top:1.75rem; }
}

/* ⚠️ このページのナビはトップより1つ多い（Works / Support|Privacy / Contact）。
   375px で実測したら「Contact」の右端がちょうど画面端に乗り、端の余白が潰れていた。
   ここだけ間隔と文字を詰める（doc.css はこの文書ページでしか読まれないので、トップには影響しない）。 */
@media (max-width:480px){
  .nav-in{ gap:1rem; }
  .nav-links{ gap:1.25rem; }
  .nav-links a{ font-size:0.75rem; }
}