/* about.css — /about（紹介ページ）専用のスタイル
   CSP が style-src 'self' のためインライン <style> は使えない。必ず外部ファイルで持つ。
   legal.css と同じ流儀で、アプリ本体のトークンとは独立させる（テーマ切替には追従しない＝
   既定テーマ inochi の配色で固定する）。ライト/ダークだけ prefers-color-scheme で切り替える。 */

:root {
  --paper: #fdfdfc;
  --surface: #ffffff;
  --tile: #f6f4f0;
  --ink: #4a423a;
  --ink-muted: #6f665c;
  --ink-faint: #8b8279;
  --accent: #bc4c36;          /* 文字に載せられる濃さ（白地に AA） */
  --on-accent: #ffffff;
  --accent-soft: rgba(188, 76, 54, 0.07);
  --accent-line: rgba(188, 76, 54, 0.22);
  --rule: rgba(74, 66, 58, 0.14);
  --card-shadow: 0 1px 2px rgba(74, 66, 58, 0.05), 0 8px 24px rgba(74, 66, 58, 0.06);
  --hero-wash: radial-gradient(120% 80% at 50% 0%, rgba(188, 76, 54, 0.07), rgba(188, 76, 54, 0) 70%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1d1c1b;
    --surface: #262625;
    --tile: #201f1e;
    --ink: #ecebe8;
    --ink-muted: #b6b1a9;
    --ink-faint: #928c84;
    --accent: #f0907a;
    --on-accent: #2a1710;     /* 明るいコーラルの上には濃い文字を載せる */
    --accent-soft: rgba(240, 144, 122, 0.10);
    --accent-line: rgba(240, 144, 122, 0.28);
    --rule: rgba(236, 235, 232, 0.16);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.24);
    --hero-wash: radial-gradient(120% 80% at 50% 0%, rgba(240, 144, 122, 0.10), rgba(240, 144, 122, 0) 70%);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.85;              /* 日本語は行間を広めに */
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;             /* 320px でも横スクロールを出さない */
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 20px 56px;
}

/* ---------------------------------------------------------------- ヒーロー */

.hero {
  background: var(--hero-wash);
  padding: 48px 0 8px;
  text-align: center;
}

/* アプリ名。主役は下の一文なので、小さく・静かに置く */
.hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 18px;
}

/* 主文言。このページでいちばん大きい文字 */
.hero-title {
  font-size: 28px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
}

.hero-title-en {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin: 0 0 26px;
}

.hero-lead {
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  margin: 0 0 2px;
}

.hero-lead-en {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}

/* 日本語の句を束ねる。句の途中ではなく句の切れ目で折り返させる（狭い画面での見苦しい分断を防ぐ） */
.clause { display: inline-block; }

.hero-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 14px 0 0;
}

/* 「ひらく」ボタン。アプリの主ボタンと同じ、角丸の面 + 白文字 */
.open-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 14px 34px;
  border-radius: 999px;
  box-shadow: var(--card-shadow);
}
.open-btn:hover { filter: brightness(1.05); }
.open-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- コンセプト（作者の言葉） */

.concept {
  margin: 40px auto 0;
  max-width: 30rem;
  padding: 24px 20px;
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
  text-align: center;
}

.concept-ja {
  font-size: 16px;
  line-height: 2;
  font-weight: 700;
  margin: 0 0 10px;
}

.concept-en {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-muted);
  margin: 0;
  letter-spacing: 0.01em;
}

.lang-switch {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  margin: 28px 0 0;
}

/* ---------------------------------------------------------------- 見出し・本文 */

h2 {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 48px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

h3 {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 700;
  margin: 0 0 2px;
}

p { margin: 0 0 12px; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.muted { color: var(--ink-muted); }
.small { font-size: 13px; line-height: 1.75; }

/* ---------------------------------------------------------------- なにができるか */

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 16px 18px;
}

.feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- こういう時に */

.cases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cases li {
  padding: 0 0 14px 16px;
  margin-bottom: 14px;
  border-left: 2px solid var(--accent-line);
  border-bottom: 1px solid var(--rule);
}
.cases li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cases h3 {
  margin-bottom: 4px;
}

.cases p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- 作品 */

.artworks {
  list-style: none;
  margin: 20px 0 16px;
  padding: 0;
  display: grid;
  /* 4点なので 2列(2×2) か 4列(1×4) だけを使う。auto-fit に任せると中間幅で
     3+1 の欠けた並びになり、作品の見え方が不揃いになる。 */
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.artwork figure {
  margin: 0;
}

/* 絵は切らずに全体を見せる（額に納めるイメージ）。
   正方形のタイルに contain で置くので、縦長・横長が混ざっても列が揃う。 */
.artwork-frame {
  aspect-ratio: 1 / 1;
  background: var(--tile);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.artwork-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  display: block;
}

.artwork figcaption {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
  margin-top: 8px;
  text-align: center;
}

.artwork-note {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0 0 6px;
}

.more-link {
  font-size: 14px;
  font-weight: 700;
  margin: 14px 0 0;
}

/* ---------------------------------------------------------------- こだわり */

.points {
  margin: 0;
  padding-left: 1.25em;
}
.points li {
  margin-bottom: 10px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.8;
}
.points li strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------- 正直なお願い */

.caveat {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 14px 16px;
  margin: 0 0 12px;
}
.caveat p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- 言語の区切り */

.lang-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 64px 0 0;
}

/* ---------------------------------------------------------------- フッター */

.site-footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}

.footer-nav {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

.footer-credit {
  margin: 0;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- 画面幅 */

@media (min-width: 600px) {
  .page { padding: 0 24px 72px; }
  .hero { padding-top: 64px; }
  .hero-title { font-size: 38px; }
  .hero-title-en { font-size: 17px; }
  .hero-lead { font-size: 16px; }
  .concept-ja { font-size: 17px; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .artworks { grid-template-columns: repeat(4, 1fr); }
}

/* 320px の端末。余白を詰めて、絵は2列のまま保つ */
@media (max-width: 360px) {
  .page { padding: 0 14px 48px; }
  .hero { padding-top: 40px; }
  .hero-title { font-size: 24px; }
  .hero-lead { font-size: 14px; }
  .concept { padding: 20px 4px; }
  .concept-ja { font-size: 15px; }
  .open-btn { padding: 13px 26px; font-size: 15px; }
  .artworks { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}