/* モジナリアのサイト共通の土台。**紹介ページも、規約の類も、ここに乗る。**
   色・形・字は `app/css/app.css` の :root から来ている（デザインシステムの写し）。
   **ここで新しい色や角丸を作らない**——増やすと、アプリと並べたときに家が違って見える。

   角丸は4px基本。例外は二つだけ（主ボタン＝999px、バッジ＝3px）。
   枠は1.5px、区切りは1px。影は主ボタンと浮くものだけ。

   **朝の色だけで作る**（えびの判断・2026-08-08）。道具（アプリ）は夜も使うので朝夜を持つが、
   **サイトは昼のほうが見やすくて、かわいい**。端末が夜でも、ここは昼のまま。 */

/* ── 色 ───────────────────────────────────────────── */
:root {
  color-scheme: light;   /* 端末が夜でも、器のほうを勝手に沈ませない */
  --bg: #f7faf9;  --card: #ffffff;  --ink: #1d1d1b;
  --sub: #54615c;  --line: #d3ddd9;  --line-strong: #2a2a27;
  --accent: #14958f;  --accent-deep: #0d6b66;  --accent-bg: #eaf6f4;
  --danger: #c0392b;
  /* 種別パレット（名前は `app/js/model.js` の `PRESET_KINDS` が正）。
     ブロックの色は作品の顔なので、使うぶんだけ抜き書きせず一式のまま持つ */
  --k-desc: #2f7d68;  --k-desc-bg: #e4f2ee;
  --k-info: #3f6d9e;  --k-info-bg: #e8f0f8;
  --k-doc:  #8a6a2f;  --k-doc-bg:  #f5efe0;
  --k-proc: #63558c;  --k-proc-bg: #eeebf5;
  --k-expl: #4a6f7a;  --k-expl-bg: #e6f0f2;
  --k-narr: #7a7268;  --k-narr-bg: #f0eeea;
  --k-meta: #9aa0a8;  --k-meta-bg: #f2f4f6;
  --k-memo: #b9ad8a;  --k-memo-bg: #faf6ea;
  --k-un:   #a04a4a;  --k-un-bg:   #f7eaea;
}

/* ── 字と形 ───────────────────────────────────────── */
:root {
  --font-brand: "Kiwi Maru", "Hiragino Sans", sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-body: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  --radius: 4px;
  --radius-badge: 3px;
  --radius-pill: 999px;
  --shadow-fab: 0 4px 12px rgba(20, 149, 143, .3);
  --pad-screen: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
  /* **記号を絵文字に化けさせない。** ↩ は iOS が絵で描いてしまう
     （えびの指摘：ここで絵文字でるの凄い好きじゃない）。
     綴りの側でも異体字（U+FE0E）を添えてあるが、効く端末ではこちらでも押さえる */
  font-variant-emoji: text;
}
a { color: var(--accent-deep); }
a:hover { color: var(--accent); }
svg { vertical-align: middle; }
h1, h2, h3 { font-family: var(--font-brand); font-weight: 500; }
/* 数字・日時・バッジはDM Mono。桁区切りは書くほうで入れる */
.num { font-family: var(--font-mono); }
/* **折れる場所を、端末に決めさせない。** 短い文句は意味の切れ目で折れてほしい——
   `inline-block` の塊にしておけば、広い画面では一行、狭ければ読点で折れる */
.nb { display: inline-block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad-screen); }
.narrow { max-width: 760px; }

/* 見えないが読み上げには届く。飛ばす道の入口に使う */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--card); border: 1.5px solid var(--accent);
  border-radius: var(--radius); padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ── 帯 ───────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: space-between;
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-ja { font: 500 17px var(--font-brand); }
/* **英字の名は、綴りではなく CSS から出す**（2026-08-16・Google の OAuth ブランド検証）。
   `<span class="brand-en num">` は**空で置き**、字はここの `content` が描く。
   狙いは一つ——**HTML の字面には「モジナリア」しか居ない状態にしつつ、見た目は変えない**。
   名乗りのとなりに二語目が綴りで居ると、判定機が名乗りを二語くっつけた一語として拾い、
   同意画面の「モジナリア」と一致しない（四度落ちた項目①）。ロゴの英字は**飾り**なので、
   綴りから消えても意味は減らない（読み上げも `aria-hidden` で名前を二度言わせない）。
   足の `MOJINARIA · ` も同じ理由で `.u.wm` へ移した。
   **戻すとき（審査が通ったら）も、ここを消すのではなく綴りへ書き戻すか、このままでよい**
   ——このままでも見た目は元と同じ。名乗りの正は決め事→運用の決め事の「名乗り」 */
.brand-en { font-size: 10px; letter-spacing: .16em; color: var(--sub); }
.brand-en::before { content: "MOJINARIA"; }
.site-nav { display: flex; gap: 18px; align-items: center; font-size: 13px; }
.site-nav a { color: var(--sub); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
/* 狭い画面では目次を伏せる。押す場所が四つ並ぶより、使ってみるが一つ立っているほうがいい */
@media (max-width: 680px) { .site-nav { display: none; } }

/* ── ボタン ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--accent);
  font: 500 15px var(--font-brand); text-decoration: none;
  cursor: pointer; background: transparent; color: var(--accent-deep);
}
.btn-primary {
  background: var(--accent); border-color: var(--accent-deep); color: #fff;
  box-shadow: var(--shadow-fab);
}
.btn:active { background: var(--line); }
.btn-primary:active { background: var(--accent-deep); }
/* 小さいほうも**丈は44pxのまま**。デザイン原本は40pxで置いていたが、
   DSの「タップ目標44px以上」を下回るので、細くするのは幅と字だけにした */
.btn-sm { padding: 0 16px; font-size: 14px; }

/* ── 足 ───────────────────────────────────────────── */
/* **潔く二行、真ん中に**（えびの指摘：スマホだと微妙な2段組に見える）。
   広い画面でも同じ形にする——並びが幅で裏返ると、どちらかが必ず不格好になる */
.site-foot {
  padding-top: 28px; padding-bottom: 32px;
  text-align: center; color: var(--sub);
  border-top: 1px solid var(--line);
}
.foot-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.foot-brand .n { font: 500 13px var(--font-brand); color: var(--ink); }
.foot-brand .u { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
/* 足の英字も綴りから出さない（上の `.brand-en` と同じ理由）。**`.wm` を付けた足だけ**が
   前置きを持つ——`/about/`（同意画面のホームページ欄）はもともと英字を持たないので付けない */
.foot-brand .u.wm::before { content: "MOJINARIA · "; }
.foot-sub {
  margin-top: 10px; display: flex; align-items: center; justify-content: center;
  gap: 8px 18px; flex-wrap: wrap; font-size: 11.5px;
}
.foot-sub a { color: var(--sub); }
.foot-sub a:hover { color: var(--accent); }
.foot-sub .r { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}