/* Keepy 共通スタイル — 全ページの単一ソース
 *
 * 2026-08-05 分離（ヘッダー・フッター・基本色）。
 * 2026-08-12 トップページの全面刷新（C案）に合わせて刷新。
 *   ・旧「上に貼り付くヘッダー」を廃止し、全ページを浮遊ピル型ナビに統一
 *   ・配色をクリーム基調（#FBF7EF）へ。UI のアクセントはインディゴ1色
 *     （テラコッタはアプリアイコンの中にだけ現れるブランド資産）
 *   ・旧変数名（--bg / --text / --border 等）は各ページが使っているので
 *     名前は残したまま値だけ新しい色に向けている＝ページ側の修正が要らない
 *
 * ここを1回直せば全ページに効く。ページ固有の差分は各ページの <style> に残す。
 * ナビの開閉スクリプトは keepy.js（全ページで読み込む）。
 */

:root {
  /* ---- 新しい呼び名（トップページ＝C案 と同じ） ---- */
  --cream: #FBF7EF;
  --cream-deep: #F2EDE3;
  --ink: #26241F;
  --ink-soft: #57534B;
  --muted: #8C8880;
  --indigo: #3B5FCC;
  --indigo-deep: #24408F;
  --indigo-tint: #EEF3FF;
  --indigo-tint-line: #D3DEF7;
  --hairline: rgba(44, 42, 38, 0.08);
  --hairline-strong: rgba(44, 42, 38, 0.13);
  --shell: rgba(44, 42, 38, 0.045);
  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);
  /* 本文書体＝BIZ UDPGothic（モリサワのUD書体・SIL OFL 1.1）。
   * 実体は fonts/bizudpgothic.css で自前ホスティング（外部CDNを踏まない）。
   * 各ページの <head> で fonts/bizudpgothic.css を keepy.css より先に読む。
   * ⚠ このフォントは 400 と 700 の2ウェイトしか無い。各ページに残っている
   *   500 は 400 に、600/800 は 700 にブラウザが丸めて描画する。
   *   2026-08-14: 丸められた見た目を承認済みのため、CSS の 500/600/800 の
   *   記述はあえて元のまま残している（別書体に戻したとき階調を復元できるように）。
   *   新しく書くときは 400／700 のどちらかで考えること。 */
  --font-sans: "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;

  /* ---- 旧来の呼び名（既存ページが参照している。値だけ新配色に） ---- */
  --bg: #FBF7EF;
  --bg2: #F2EDE3;
  --indigo-lt: #EEF3FF;
  --terra: #D9623A;
  --terra-lt: #FDF0EB;
  --green: #7A9E4E;
  --green-lt: #EAF3DE;
  --amber: #C0885A;
  --red: #B8453A;
  --text: #26241F;
  --text2: #57534B;
  --border: #E8E4DC;
  --white: #FFFFFF;
}

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 金額・件数の桁を揃える */
  font-variant-numeric: tabular-nums;
}

html { scroll-behavior: smooth; }
/* 浮いているナビの下に見出しが潜らないように */
section[id], h2[id], h3[id] { scroll-margin-top: 104px; }

h1, h2, h3 { text-wrap: balance; }

/* キーボード操作の可視化（アクセシビリティ要件） */
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* App Store バッジは href="#" の間だけ無効。
   リリース時にバッジの href を実 URL へ差し替えると自動で解除される。 */
a[data-appstore][href="#"] { opacity: 0.55; cursor: default; pointer-events: none; }

/* 画像は常に縦横比を保つ（2026-08-05 追加）。
 * width/height 属性（レイアウトのガタつき防止用）を付けた画像に対し、ページ側の CSS が
 * width: 100% だけ指定して height を放置すると、高さが属性値の px に固定されたまま
 * 幅だけ縮む＝縦伸びする（実際に index/features の15枚が 2倍の縦伸びで公開された）。
 * author CSS は presentational hint（属性）より必ず優先されるため、この1行で全ページ防げる。 */
img { height: auto; }

/* ================================================================
   浮遊ピル型ナビ（全ページ共通・2026-08-12）
   トップも下位ページも同じ5項目。ページごとに中身を変えない。
   ================================================================ */
.nav-island {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  /* 2026-08-12：ヘッダーの「App Store 準備中」を外し、空いた分を詰めずに
     余白と文字サイズへ回した（案2）。ダウンロード導線はフッターにある。 */
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(251, 247, 239, 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(44, 42, 38, 0.07),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 12px 40px -12px rgba(44, 42, 38, 0.18);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  margin-right: 10px;
}
.nav-brand svg { border-radius: 7px; display: block; }
.nav-brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  white-space: nowrap;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  transition: color 0.5s var(--ease-lux), background-color 0.5s var(--ease-lux);
}
.nav-links a:hover { color: var(--ink); background: rgba(44, 42, 38, 0.05); }

.nav-links a.page { color: var(--ink); font-weight: 500; }

/* いま開いているページ。
   ⚠️ この2行は .page より後ろに置くこと。強さが同じなので、
      前に置くと .page の色に負けて「現在地が分からない」状態に戻る
      （2026-08-12 に実際そうなっていた）。 */
.nav-links a.current,
.nav-links a.page.current {
  color: var(--indigo);
  font-weight: 600;
  background: var(--indigo-tint);
}
.nav-links a.current:hover { color: var(--indigo-deep); background: var(--indigo-tint); }

/* ハンバーガー（768px以下でのみ出る） */
.nav-burger {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(44, 42, 38, 0.06);
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.55s var(--ease-lux);
}
.nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 3.5px)); }
.nav-burger span:nth-child(2) { transform: translate(-50%, calc(-50% + 3.5px)); }
body.menu-open .nav-burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* フルスクリーンのガラスメニュー（モバイル） */
.menu-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(251, 247, 239, 0.85);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease-lux), visibility 0s 0.7s;
}
body.menu-open .menu-veil {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease-lux);
}
.menu-veil a {
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  transform: translateY(48px);
  opacity: 0;
  transition: transform 0.8s var(--ease-lux), opacity 0.8s var(--ease-lux);
}
body.menu-open .menu-veil a { transform: translateY(0); opacity: 1; }
/* いま開いているページ（デスクトップのナビと同じ扱い） */
.menu-veil a.current { color: var(--indigo); }
.menu-veil a.current::after {
  content: "いま見ているページ";
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 2px;
}
/* ⚠️ 項目を増やしたら、この遅延も同じ数だけ足すこと。
   足りないと、あふれた項目だけ遅延ゼロで先に飛び出す。 */
body.menu-open .menu-veil a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .menu-veil a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .menu-veil a:nth-child(3) { transition-delay: 0.20s; }
body.menu-open .menu-veil a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .menu-veil a:nth-child(5) { transition-delay: 0.32s; }
body.menu-open .menu-veil a:nth-child(6) { transition-delay: 0.38s; }
body.menu-open .menu-veil a:nth-child(7) { transition-delay: 0.44s; }

@media (max-width: 768px) {
  .nav-island { top: 14px; padding: 7px 7px 7px 16px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
}

/* ナビは宙に浮いている（fixed）ので、その分の高さを本文が自分で空ける。
   ⚠️ 旧ヘッダーは sticky ＝場所を取っていたが、いまは取らない。
      この余白を外すと本文がナビの下に潜る。
   下位ページは <body class="has-nav">。トップは hero 側で大きく取るので付けない。 */
body.has-nav { padding-top: 88px; }
@media (max-width: 768px) { body.has-nav { padding-top: 72px; } }

/* ================================================================
   フッター（全ページ共通）
   ================================================================ */
footer {
  border-top: 1px solid var(--hairline);
  padding: 56px 32px 48px;
  text-align: center;
  background: var(--cream-deep);
}
/* ダウンロード導線（2026-08-12 新設）。
   ⚠️ ヘッダーから「App Store 準備中」を外したため、マニュアル・サポート・
      プライバシー・特商法の4ページは、ここが唯一のアプリへの導線になる。
      消すときは代わりの導線を用意すること。
   公開前は上の a[data-appstore][href="#"] のルールで自動的に無効化される。 */
.footer-cta { margin-bottom: 32px; }
.footer-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--indigo);
  padding: 11px 24px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 14px 30px -16px rgba(36, 64, 143, 0.6);
  transition: transform 0.6s var(--ease-lux);
}
.footer-dl:hover { transform: translateY(-2px); }
.footer-dl:active { transform: scale(0.98); }

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-bottom: 28px;
}
footer nav a {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.5s var(--ease-lux);
}
footer nav a:hover, footer nav a.current { color: var(--indigo); }
footer p { font-size: 12px; color: var(--muted); }
footer p.credit { margin-bottom: 8px; }
footer p.credit a { color: var(--muted); text-decoration: none; transition: color 0.5s var(--ease-lux); }
/* ⚠️ Logo.dev 無料プランの帰属表示（商用利用で必須）。
   rel="noreferrer" を付けないこと＝リファラが渡らないと検証に落ちる */
footer p.credit a:hover { color: var(--indigo); text-decoration: underline; }

/* ── スマホ枠の単一ソース（2026-08-05 統一・Kentaro 承認＝デスクトップ225/モバイル200） ──
 * それまで5種類の幅（175/190/210/220/225）と2色のベゼル・4種の角丸/影がページごとに
 * 手作りされていた。225 は「全ページの制約を満たすことが実運用で実証されている最大値」
 * ＝guide が最小容器（760px）でテキスト列と共存できていた実績値。
 * 画像は幅750px（中身211px×3x=633≤750 で Retina 3x 充足）＝この統一で画像は触っていない。 */
.phone {
  flex-shrink: 0;
  width: 225px;
  background: #1A1917;
  border-radius: 32px;
  padding: 7px;
  box-shadow: 0 14px 32px rgba(44, 42, 38, 0.18);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 25px; }
@media (max-width: 620px) {
  .phone { width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── ロゴ取得の但し書き ────────────────────────────────────────────
 * 「記録は外部に送られない」と言い切る文の直後に置く小さな注記。
 * 🔴 なぜ要るか＝ロゴ表示のときだけサービス名を送っており（Logo.dev /
 *    iTunes / favicon）、privacy.html にはそう書いてある。トップや使い方で
 *    「送信は一切ない」とだけ書くと privacy.html と食い違う（2026-08-19 是正）。
 * 主張は弱めない＝守る対象を「あなたが登録した記録」に限ったうえで、
 * 送っているものを具体名で小さく添える。読み飛ばせるが在ることは分かる大きさ。
 * ⚠️ 3ページ（index / features / support）で使う。各ページに複製しない
 *    ＝複製した瞬間、次に文言を直すとき片方だけ古くなる。 */
.note-inline {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.6;
  opacity: 0.72;
}
.note-inline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
