/* Layout: TLJ の 入り口。タグまると 3つの 大きな カードを ならべる。色と 字は style.css と おなじ */
:root {
  --paper: #EEF4FA;
  --card: #FFFFFF;
  --ink: #1D2846;
  --ink-2: #56627F;
  --line: #D5DFEC;
  --sun: #FFC53D;
  --sun-soft: #FFF4D1;
  --tomato: #EC5B45;
  --leaf: #1F9E74;
  --leaf-soft: #DDF4EA;
  --sky: #2F76CC;
  --sky-soft: #E1EDFB;
  --board: #1A2240;
  --ai: #18213b;
  --washi: #f3f0e7;
  --display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", sans-serif;
  --code: "Source Code Pro", Consolas, Menlo, "MS Gothic", monospace;
  --kanji: "Klee One", "UD デジタル 教科書体 N-R", "YuKyokasho", serif;
  color-scheme: light;
}
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
}
#app {
  max-width: 880px;
  margin: 0 auto;
  padding-block: 40px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero { display: flex; align-items: center; gap: 16px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .04em; }
.hero p { margin: 6px 0 0; font-family: var(--display); font-size: 18px; color: var(--ink-2); }

.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--card); color: inherit; text-decoration: none;
  border: 2px solid var(--line); border-radius: 22px; padding: 18px;
  box-shadow: 0 4px 0 var(--line);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--line); border-color: var(--ink); }
.card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.card:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }

.art { height: 120px; border-radius: 14px; display: grid; place-items: center; }
.txt { display: flex; flex-direction: column; gap: 4px; }
.name { font-family: var(--display); font-weight: 800; font-size: 22px; }
.desc { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

/* プログラミング: コードの 黒板 */
.prog .art { background: var(--board); }
.prog .code { font-family: var(--code); font-weight: 700; font-size: 34px; color: #FF8FA8; }

/* タイピング: キーボードの キー */
.type .art { background: var(--sky-soft); display: flex; justify-content: center; align-items: center; gap: 8px; }
.type .key {
  width: 48px; height: 48px; border-radius: 10px; background: #fff; border: 2px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center;
  font-family: var(--code); font-weight: 700; font-size: 22px;
}
.type .key:nth-child(2) { background: var(--sun); }

/* 漢字図鑑: 夜の 藍と お札 */
.kanji .art { background: var(--ai); }
.kanji .fuda {
  background: var(--washi); color: var(--ink); border-top: 8px solid var(--tomato); border-radius: 4px;
  padding: 6px 12px; font-family: var(--kanji); font-weight: 600; font-size: 52px; line-height: 1.1;
}

@media (max-width: 720px) {
  #app { padding-block: 24px 40px; }
  .menu { grid-template-columns: 1fr; }
  .card { flex-direction: row; align-items: center; }
  .art { width: 104px; height: 88px; flex: none; }
  .prog .code { font-size: 22px; }
  .type .key { width: 26px; height: 26px; font-size: 13px; border-radius: 6px; box-shadow: 0 2px 0 var(--ink); }
  .type .art { gap: 4px; }
  .kanji .fuda { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}