/* きょうのかんじ — しょうかいページ（算数「きょうのけいさん」の同ファイルを複製）
 *
 * 画面のハードコピーは docs/intro/{ja,en}/ に置いてある（tools では作らない。撮り直しは手作業）。
 * 色は本体（drill/static/drill/css/style.css）から写している。ここは本体の CSS を読まない
 * ——本体の CSS は body 全体のレイアウトを持っていて、紹介ページの組みとぶつかるため。
 *
 * 書体は @font-face を宣言しない。本体の woff2 は「アプリが使う字」だけに切り詰めてある
 * （tools/subset_font.py）ので、紹介文の字は入っていない。docs/design-a.html と同じ
 * フォントスタックにして、入っている環境でだけ Zen Maru Gothic を使う。
 */
:root {
  --board: #0e3a31;
  --board-ink: #f2f7f4;
  --board-dim: #9fc7b8;
  --board-msg: #e8b95c;

  --accent: #e0972f;      /* 山吹。面に使う */
  --accent-edge: #b6771f; /* 縁と、大きな文字 */
  --accent-text: #8a5a12; /* 小さい文字。山吹のままだと白地で 2.4:1 */
  --accent-soft: #fbf0dd;
  --accent-hover: #e9a63f; /* マウスを乗せたとき */

  --paper: #f2f5f3;
  --grid: #e6ece8;
  --card: #fff;
  --line: #dfe6e1;
  --edge: #c6d2cb;
  --ink: #16231d;
  --ink-2: #4d5f56;
  --ink-3: #6f8177;

  --sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.85;
  background-color: var(--paper);
  /* 方眼紙。本体と同じ質感 */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 出し分けは読み手（こども / おうちの方）だけ。html の data-who を切り換える。
   言語は URL で分けてある（intro.html / intro-en.html）——検索エンジンは1ページを
   1言語として読むので、隠して切り換えると英語版が拾われない。 */
[data-who="kids"] #page-parents,
[data-who="kids"] [data-for="parents"] { display: none; }
[data-who="parents"] #page-kids,
[data-who="parents"] [data-for="kids"] { display: none; }

/* ---- 読み手の切り換え（ページの先頭） ---- */
.who {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 1.2rem;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 999px;
}
.who button {
  flex: 1;
  max-width: 15rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.who button.on {
  background: var(--accent);
  color: #221501;
  box-shadow: 0 2px 0 var(--accent-edge);
}
@media (hover: hover) {
  .who button:not(.on):hover { background: var(--accent-soft); color: var(--accent-text); }
}

/* ---- ヘッダ ---- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.top .brand { display: flex; align-items: center; gap: 0.6rem; }
.top .brand img { width: 34px; height: 34px; display: block; }
.top .brand b { font-size: 1.05rem; }

.lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 999px;
}
/* ボタンではなくリンク（別 URL へ行く）。見た目は本体のヘッダに合わせてある */
.lang a {
  min-width: 44px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: var(--ink-3);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
}
.lang a.on { background: var(--accent); color: #221501; }
@media (hover: hover) {
  .lang a:not(.on):hover { background: var(--accent-soft); color: var(--accent-text); }
}

/* ---- 全体の幅 ---- */
.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 3rem;
}

/* ---- ヒーロー（黒板） ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem;
  border-radius: 22px;
  background: var(--board);
  color: var(--board-ink);
  box-shadow: 0 10px 30px rgb(14 58 49 / 0.22);
}
.hero h1 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  letter-spacing: 0.02em;
}
.hero .sub { margin: 0 0 1.1rem; color: var(--board-msg); font-weight: 700; }
.hero .lead { margin: 0; color: var(--board-ink); }
.hero .lead + .lead { margin-top: 0.6rem; color: var(--board-dim); }
/* せまい画面では、2枚ぶんの幅が入りきらない。img を縮ませて収める
   （min-width を 0 にしないと flex アイテムは元の幅より縮まない） */
.hero-shots { display: flex; gap: 1rem; min-width: 0; }
.hero-shots .frame { min-width: 0; flex: 0 1 auto; }

/* ---- 画面のハードコピー ---- */
.frame {
  display: block;
  width: 210px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--edge);
  background: var(--card);
  box-shadow: 0 6px 18px rgb(22 35 29 / 0.18);
}
.hero .frame { border-color: rgb(255 255 255 / 0.25); }

.crop {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgb(22 35 29 / 0.14);
}
.crop--paper { border: 1px solid var(--line); }

figcaption {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-3);
  text-align: center;
}

/* ---- セクション ---- */
.sec {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.2rem;
  padding: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
/* 1つおきに絵を右へ。列の幅も入れ替えないと、絵が広いほう（1fr）に落ちて文が痩せる。
   数えるのは section なので、.hero を1番目として even = 絵が右 */
.sec:nth-of-type(even) { grid-template-columns: 1fr 300px; }
.sec:nth-of-type(even) .figure { order: 2; }
.sec .figure { display: flex; flex-direction: column; align-items: center; margin: 0; }
/* 1つの節に切り抜きを2枚ならべるとき（きろく＝グラフ と にがて） */
.figure--stack { gap: 1.1rem; width: 100%; }
.figure--stack figure { margin: 0; width: 100%; }
.sec h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}
.sec h2 .n {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: #221501;
  font-size: 0.95rem;
}
.sec p { margin: 0.5rem 0 0; }
.sec p.note { color: var(--ink-2); font-size: 0.94rem; }

/* 絵のない節（おうちの方へ。文が主で、2段に割ると窮屈になる） */
.sec--text,
.sec--text:nth-of-type(even) { grid-template-columns: 1fr; }

/* おうちの方へ：読むものなので、字は本文らしく組む */
#page-parents .sec p { line-height: 1.9; }
#page-parents .sec h2 { font-size: 1.2rem; }
.sec ul.plain { margin: 0.6rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.sec ul.plain li { margin: 0.2rem 0; }
/* 見落とすと困ること（記録が消える条件など） */
.warn {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 0.94rem;
}

/* 丸印の一覧など、行で見せるもの */
.marks { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.marks li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
}
.marks li:first-child { border-top: 0; }
.marks b {
  flex: none;
  min-width: 8.5em;
  color: var(--accent-text);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; padding: 0; list-style: none; }
.chips li {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.88rem;
}

/* ---- アプリへの入り口 ---- */
/* 押せる面は山吹ひとつ。沈む縁（box-shadow）が「押せる」の合図なのは本体と同じ */
.cta {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #221501;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--accent-edge);
}
.cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-edge); }
@media (hover: hover) {
  .cta:hover { background: var(--accent-hover); }
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 0;
}
.hero .cta-note { color: var(--board-dim); font-size: 0.88rem; }

.end {
  margin-top: 1.2rem;
  padding: 2rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
}
.end-msg { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700; }
.cta--big { padding: 0.9rem 2.4rem; font-size: 1.15rem; }
.end-note { margin: 1rem 0 0; color: var(--ink-3); font-size: 0.9rem; }

/* ---- 姉妹アプリ「きょうのけいさん」（算数）への案内。大きな CTA の下に静かに置く ---- */
/* 漢字と算数は配色も書体も共通なので、ロゴ（＋−×÷）が「別アプリ」の目印（decisions §5.6/§5.7） */
.sister-promo { margin-top: 1.2rem; }
.sister {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
}
@media (hover: hover) {
  .sister:hover { border-color: var(--edge); background: var(--accent-soft); }
}
.sister-logo { flex: none; width: 52px; height: 52px; }
.sister-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sister-name { font-size: 1.05rem; line-height: 1.4; }
.sister-lead { color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
.sister-go { color: var(--accent-text); font-size: 0.9rem; font-weight: 700; }

.foot {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.88rem;
  text-align: center;
}
.foot a { color: var(--accent-text); }

/* ---- せまい画面 ---- */
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 1.6rem;
    text-align: center;
  }
  .hero-shots { justify-content: center; }
  /* :nth-of-type(even) のほうが詳細度が高い。`.sec` だけで上書きしても勝てず、
     絵の列が 300px のまま残ってはみ出す。同じ詳細度で並べて消す */
  .sec,
  .sec:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  /* 縦積みでは、絵が先で文が後。交互は横並びのときだけの約束 */
  .sec:nth-of-type(even) .figure { order: 0; }
}
@media (max-width: 420px) {
  .frame { width: 170px; }
  .marks b { min-width: 100%; }
  .marks li { flex-direction: column; gap: 0; }
}