/* =====================================================================
   まなびのもり ─ 共通スタイル（デザインの土台）
   全アプリ＆ハブで読み込む。個別アプリの中身CSSとは別レイヤー。
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

:root{
  --paper:#FFF9F0;        /* 背景：あたたかい紙色 */
  --paper-2:#FFF2DF;
  --ink:#3A3357;          /* 文字：深い藍紫（黒より親しみ） */
  --ink-soft:#6E678C;
  --line:#EADFce;
  --green:#3FB984;
  --coral:#FF7755;
  --sun:#FFCB47;
  --shadow:0 6px 0 rgba(58,51,87,.10), 0 14px 30px rgba(58,51,87,.10);
  --radius:20px;
  --font-pop:'Mochiy Pop One', 'Zen Maru Gothic', sans-serif;
  --font-body:'Zen Maru Gothic', system-ui, sans-serif;
}

/* スクロールでヘッダー分ずれないように（アンカー対策） */
html{ scroll-padding-top:64px; }

/* ── 共通ヘッダー（全ページ上部・固定） ───────────────────────── */
.mh-header{
  position:sticky; top:0; z-index:9999;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 16px;
  background:rgba(255,249,240,.92);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--line);
  font-family:var(--font-body);
}
.mh-logo{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-pop); font-size:18px; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.mh-logo .mh-mark{
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; font-size:17px;
  background:var(--green); box-shadow:0 3px 0 rgba(58,51,87,.18);
}
.mh-back{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; text-decoration:none;
  color:var(--ink); background:var(--paper-2);
  border:2px solid var(--line); border-radius:999px;
  padding:7px 14px; transition:transform .12s;
}
.mh-back:hover{ transform:translateY(-1px); }
.mh-apptitle{ font-weight:700; color:var(--ink-soft); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 各アプリページ：本体がヘッダーに隠れないよう最小マージン保険 */
body[data-app] #root{ display:block; }

/* ── 共通フッター ──────────────────────────────────────────── */
.mh-footer{
  font-family:var(--font-body); color:var(--ink-soft);
  background:var(--paper-2); border-top:3px solid var(--line);
  margin-top:40px; padding:24px 16px 32px; text-align:center;
}
.mh-foot-promo{ max-width:760px; margin:0 auto 16px; }
.mh-foot-promo:empty{ display:none; }
.mh-foot-links{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  font-size:13px; margin-bottom:10px; }
.mh-foot-links a{ color:var(--ink); text-decoration:none; font-weight:700; }
.mh-foot-links a:hover{ text-decoration:underline; }
.mh-foot-copy{ font-size:12px; color:var(--ink-soft); }

/* =====================================================================
   ハブ（トップページ）専用
   ===================================================================== */
body.mh-hub{
  margin:0; background:var(--paper);
  background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  color:var(--ink); font-family:var(--font-body);
}
.mh-hero{
  max-width:960px; margin:0 auto; padding:48px 20px 28px; text-align:center;
}
.mh-hero h1{
  font-family:var(--font-pop); font-size:clamp(30px,6vw,52px);
  margin:0 0 10px; color:var(--ink); line-height:1.25;
  text-shadow:0 3px 0 var(--sun);
}
.mh-hero p{ font-size:clamp(15px,2.4vw,19px); color:var(--ink-soft); margin:0; }
.mh-hero .mh-sun{ display:inline-block; animation:mh-bob 2.4s ease-in-out infinite; }
@keyframes mh-bob{ 50%{ transform:translateY(-7px) rotate(8deg);} }

.mh-grid{
  max-width:960px; margin:8px auto 0; padding:0 20px 40px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px;
}
.mh-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:3px solid var(--line); border-radius:var(--radius);
  padding:20px 18px 18px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); transition:transform .14s ease, box-shadow .14s ease;
  overflow:hidden; opacity:0; animation:mh-rise .5s ease forwards;
}
.mh-grid .mh-card:nth-child(1){animation-delay:.04s}
.mh-grid .mh-card:nth-child(2){animation-delay:.08s}
.mh-grid .mh-card:nth-child(3){animation-delay:.12s}
.mh-grid .mh-card:nth-child(4){animation-delay:.16s}
.mh-grid .mh-card:nth-child(5){animation-delay:.20s}
.mh-grid .mh-card:nth-child(6){animation-delay:.24s}
.mh-grid .mh-card:nth-child(7){animation-delay:.28s}
.mh-grid .mh-card:nth-child(8){animation-delay:.32s}
@keyframes mh-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

.mh-card::before{ /* 上ふちの教科カラー */
  content:""; position:absolute; left:0; top:0; right:0; height:7px; background:var(--c); }
.mh-card.live:hover{ transform:translateY(-5px); box-shadow:0 12px 0 rgba(58,51,87,.10),0 22px 40px rgba(58,51,87,.14); }
.mh-card-emoji{
  width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  font-size:32px; margin-bottom:12px;
  background:color-mix(in srgb, var(--c) 18%, #fff); border:2px solid color-mix(in srgb,var(--c) 35%,#fff); }
.mh-card-meta{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.mh-tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-soft); }
.mh-tag.subject{ background:color-mix(in srgb,var(--c) 16%,#fff); color:color-mix(in srgb,var(--c) 70%,var(--ink)); }
.mh-card h2{ font-family:var(--font-pop); font-size:18px; margin:0 0 6px; line-height:1.35; }
.mh-card p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.55; flex:1; }
.mh-card-go{ margin-top:14px; align-self:flex-start; font-weight:700; font-size:14px;
  color:#fff; background:var(--c); padding:8px 16px; border-radius:999px;
  box-shadow:0 3px 0 rgba(58,51,87,.18); }

.mh-card.soon{ opacity:1; }
.mh-card.soon .mh-card-emoji,.mh-card.soon h2,.mh-card.soon p{ filter:grayscale(.5); opacity:.7; }
.mh-card.soon .mh-soon-badge{
  position:absolute; top:12px; right:-30px; transform:rotate(38deg);
  background:var(--ink-soft); color:#fff; font-size:11px; font-weight:700;
  padding:4px 36px; }
.mh-card.soon .mh-card-go{ display:none; }

@media (max-width:560px){
  .mh-grid{ grid-template-columns:1fr; }
  .mh-hero{ padding:32px 16px 18px; }
}