/* plots factory
   ------------------------------------------------------------------
   方針: **サイトは静かな額縁。色はアプリのアイコンに持たせる。**
   4つのアイコンは彩度が高く互いに無関係な色（緑＋橙／黄＋テラコッタ／青＋虹）なので、
   サイト側が色を主張すると必ずどれかとぶつかる。だから地は無彩色に近く保ち、
   アクセントは線と文字の強弱だけで作る。**ブランドカラーを足さないこと。**

   識別は「plots（図面）」から。ヒーローに罫の薄いグリッドを敷き、
   要素は 8px の格子に乗せる。装飾ではなく、置き方の規律として使う。
   ------------------------------------------------------------------ */

:root {
  --bg:        #fbfbfa;
  --panel:     #ffffff;
  --ink:       #16161a;
  --ink-2:     #55555e;
  --ink-3:     #8b8b95;
  --rule:      #e6e6e2;
  --rule-soft: #f0f0ec;
  --link:      #1a5f4a;

  --step-0: 0.9375rem;   /* 15px 本文 */
  --step-1: 1.0625rem;   /* 17px リード */
  --step-2: 1.375rem;    /* 22px 小見出し */
  --step-3: 2.25rem;     /* 36px 見出し */
  --step-4: clamp(2.5rem, 6vw, 3.75rem);  /* ヒーロー */

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          "Hiragino Sans", "Noto Sans JP", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #101012;
    --panel:     #17171a;
    --ink:       #f4f4f2;
    --ink-2:     #a8a8b2;
    --ink-3:     #74747e;
    --rule:      #26262b;
    --rule-soft: #1d1d21;
    --link:      #57c9a2;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 24px; }
.prose { max-width: 40rem; }

/* ── ヘッダ ───────────────────────────────── */
.site-header { border-bottom: 1px solid var(--rule); background: var(--bg); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 64px; flex-wrap: wrap;
}
.site-title {
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.site-title span { color: var(--ink-3); font-weight: 400; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.8125rem; letter-spacing: 0.02em; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding-block: 4px; }
.site-nav a:hover { color: var(--ink); }

/* ── ヒーロー ─────────────────────────────── */
/* plots＝図面。薄い格子を敷いて、名前と画面の規律を一致させる。
   目立たせない（線は rule-soft のみ）。柄として読ませたら失敗 */
.hero {
  border-bottom: 1px solid var(--rule);
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}
/* **ここを大きくしないこと**（2026-09-15 ユーザー指摘）。
   「一番目立っているけど、あんまり目立ってても意味がないメッセージ」。
   このサイトの訪問者の大半は App Store のリンクからポリシーや規約を
   探しに来た人で、標語を読みに来ていない。主役はアプリの一覧のほう。 */
.hero .wrap { padding-block: clamp(40px, 6vw, 64px); }
.hero h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink-2);
  max-width: 42ch;
}
.hero p {
  margin: 24px 0 0;
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 34rem;
}

/* ── アプリ一覧 ───────────────────────────── */
/* カードの格子ではなく行。1本ずつ読ませたいので、罫で区切って縦に積む */
main { padding-block: 72px 96px; }

.section-label {
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: var(--ink-3); margin: 0 0 28px;
}

/* **枠で囲まないこと。** 枠＋アイコン＋効能コピーが揃うと App Store の棚になり、
   「広告みたいに見える」（2026-09-15 ユーザー指摘）。日本の個人開発者のサイト
   （kyome.io ほか）を調べたところ、枠は使わずアイコン・名前・説明を素で並べていた。
   企業サイト（フェンリル等）はカードを使うが、中身はアイコンではなくスクリーンショット。
   **スクショが用意できるまでは、枠を足さないこと。** */
.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}

.app {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.app:hover .app-name { color: var(--link); }

.app-icon { position: relative; display: block; margin-bottom: 14px; }
.app img {
  width: 64px; height: 64px; display: block;
  border-radius: 22.5%;                 /* iOSのアイコンに合わせる */
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.app-name { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; }
/* 未公開のしるし。**アイコンの上にかぶせる**——名前の下に置くと、その分だけ
   説明文が下がって同じ行の頭がそろわなくなる。かぶせれば高さが変わらない。
   **ブランドカラーを足さない**方針なので無彩色。アイコン側も淡くしてある。
   幅は「Coming soon」がアイコン（64px）より広いので左右にはみ出すが、
   貼り札として意図的。地は --bg で塗りつぶし、下のアイコンを透かさない */
.app-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.6;
}

.app-desc {
  font-size: 0.8125rem; color: var(--ink-2); margin-top: 6px; line-height: 1.85;
  max-width: 18em;
}

@media (max-width: 760px) {
  .apps { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
}
@media (max-width: 400px) {
  .apps { gap: 32px 20px; }
  .app img { width: 56px; height: 56px; margin-bottom: 12px; }
  .app-name { font-size: 0.9375rem; }
}

/* ── 読み物（ポリシー・規約） ───────────────── */
.prose h1 { font-size: var(--step-3); line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 8px; }
.prose .updated { font-size: 0.8125rem; color: var(--ink-3); margin: 0 0 48px; }
.prose h2 {
  font-size: var(--step-2); font-weight: 600; letter-spacing: 0.01em;
  margin: 56px 0 16px; padding-top: 24px; border-top: 1px solid var(--rule);
}
.prose h3 { font-size: 1rem; margin: 32px 0 8px; }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 1.3em; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--ink-3); }

/* ── アプリの紹介ページ ──────────────────── */

/* **アイコン・App Storeバッジ・スクリーンショットを落とさないこと。**
   移行のとき wp-json からテキストだけを控えたせいで、一度すべて消してしまった
   （2026-09-15）。ページの中身はこの3つで、文章はその補足でしかない。 */
.app-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.app-head img {
  width: 88px; height: 88px; flex: none;
  border-radius: 22.5%;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.app-head h1 { margin: 0 0 6px; }
.app-head .updated { margin: 0; }

.store-badge { display: inline-block; margin: 0 0 8px; }
.store-badge img { width: 152px; height: auto; display: block; }

/* **枚数がページごとに違う**（paymemo は3枚、他は2枚）。grid-auto-flow: column なら
   何枚でも1行に等分で収まるので、枚数ごとに列数を書き分けなくてよい */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  margin: 48px 0 0; padding-top: 40px; border-top: 1px solid var(--rule);
}
.shots img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  border: 1px solid var(--rule);
}
@media (max-width: 560px) {
  .app-head { gap: 16px; }
  .app-head img { width: 68px; height: 68px; }
  /* 狭い画面で3等分すると1枚100px程度になって何も見えない。2列に折る */
  .shots { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 紹介ページのステータス。おたよりばこ＝Coming soon、カッテク＝ページ準備中、
   Pics Memory＝配信終了。**現役でないものを現役の顔で置かない**ための表示。
   一覧（.app-badge）と同じ見た目にして、同じ意味だと分かるようにしてある */
.page-status { margin: 0 0 12px; }
.page-status span {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.6;
}

/* 言語切替。旧サイトは本文の中に「日本語　｜　English」と手書きされていて、
   しかもリンク先が実在しないURLを指しているものがあった。テンプレート側に出して、
   移植時に正しいURLへ張り直してある（src/.htaccess も参照） */
.lang-switch { margin: -4px 0 40px; font-size: 0.875rem; }

.doc-links { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.doc-links a { margin-right: 20px; }

/* ── フッタ ──────────────────────────────── */
.site-footer { border-top: 1px solid var(--rule); padding-block: 32px 56px; font-size: 0.8125rem; color: var(--ink-3); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-3); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }