/* みんなで音読！ 共通スタイル (index / terms / privacy / withdraw / admin)
   配色・書体・角丸はここの :root だけで管理する */
:root {
  /* 配色 */
  --bg: #FAFAFC;        /* 背景 */
  --card: #FFFFFF;      /* カード */
  --ink: #10142B;       /* 文字 (濃いネイビー) */
  --mut: #6B7088;       /* 補足の文字 */
  --gray: #C9CCD8;      /* 本文の未録音 */
  --line: #E6E8F0;      /* 細い境界線 */
  --track: #ECEEF5;     /* バーの下地 */
  --blue: #2F5BFF;      /* 差し色: 青 (主ボタン・自分の録音・進捗) */
  --coral: #FF4D5A;     /* 差し色: コーラルレッド (マイク・担当箇所・失敗) */
  --yellow: #FFD60A;    /* 差し色: 黄 (オノマトペ・番号) */
  --mint: #19D3A2;      /* 差し色: ミント (成功・同意) */
  /* 書体 (ゴシック体のみ。外部フォントは読み込まない) */
  --font: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  /* 形 */
  --r-s: 16px; --r-m: 22px; --r-l: 28px;
  --shadow: 0 1px 2px rgba(16, 20, 43, .04), 0 8px 24px -12px rgba(16, 20, 43, .12);
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font: 15px/1.7 var(--font); -webkit-tap-highlight-color: transparent }
a { color: var(--blue) }
button { font: inherit; color: inherit; cursor: pointer }
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 10px 18px; font-weight: 800; transition: transform .12s }
.btn:active { transform: scale(.96) }
.btn.pri { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 16px -8px var(--blue) }
.btn:disabled { opacity: .4; cursor: not-allowed }
input, textarea, select { font: inherit; color: var(--ink); padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card) }
input:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px }

/* 規約・プライバシー・取り下げ依頼 (文書ページ) */
.doc { max-width: 720px; margin: 0 auto; padding: 28px 20px 60px }
.doc h1 { font-size: 24px; font-weight: 900; line-height: 1.4; margin: 12px 0 }
.doc h2 { font-size: 17px; font-weight: 900; margin: 32px 0 8px }
.doc .meta { color: var(--mut); font-size: 13px }
.doc .box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 20px }
.doc .note { background: #FFF8D6; border-radius: var(--r-s); padding: 12px 16px; font-size: 14px }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px }
.doc td, .doc th { border-top: 1px solid var(--line); padding: 10px 8px; vertical-align: top; text-align: left }
.doc th { white-space: nowrap; font-weight: 800 }