/* =========================================================================
   index.css  --  もくじページの共有スタイル（workshop-kit）

   すべてのワークショップで同じものを使う。教材ごとに変わるのは色だけで、
   それは assets/site-theme.css（build が site.toml から生成）が上書きする。
   このファイルを教材ごとに書きかえないこと。
   ========================================================================= */

:root{
  /* site-theme.css があとから読まれて上書きする。ここの値は保険。 */
  --accent:#00a99d; --accent-dark:#007c74; --accent-bright:#00b5a8;
  --ink:#1f2a2e; --muted:#5b6b70;
  /* 飾りの色。site.toml の [theme] で上書きできる（README「教材ごとに変わるところ」） */
  --bg:#eef8f7;
  --bg-dot-1:rgba(0,169,157,.10); --bg-dot-2:rgba(255,159,120,.10);
  --rainbow:linear-gradient(90deg,#ff9eb1,#ffd98a,#a0e2a0,#9fd8f0,#c9b3e8);
  --qr-frame:#9fd8f0;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  background-color:var(--bg);
  background-image:
    radial-gradient(var(--bg-dot-1) 2px, transparent 2px),
    radial-gradient(var(--bg-dot-2) 2px, transparent 2px);
  background-size:30px 30px, 30px 30px;
  background-position:0 0, 15px 15px;
}

header{
  position:relative;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent-dark));
  color:#fff; padding:46px 20px 42px; text-align:center;
}
header h1{ margin:0 0 10px; font-size:32px; letter-spacing:.02em; }
/* 教材のロゴ画像を見出しの頭に置くとき（site.toml の logo） */
header h1 .logo{ height:1.55em; width:auto; vertical-align:middle;
                 margin:0 .18em .12em 0; }
header p{ margin:0; opacity:.92; font-size:15px; }
header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:var(--rainbow);
}

main{ max-width:940px; margin:0 auto; padding:30px 18px 70px; }

/* セクションの見出し */
.section{ margin-top:14px; }
.section + .section{ margin-top:40px; }
.section-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 4px 18px; }
.section-head .stitle{ font-size:22px; font-weight:800; }
.section-head .ssub{ font-size:13.5px; color:var(--muted); }
/* 線そのものの形。色（グラデーション）は site-theme.css が教材ごとに付ける */
.section-line{ height:4px; border-radius:999px; margin:0 4px 20px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:20px; }

.card{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border-radius:22px; padding:22px 22px 24px;
  box-shadow:0 10px 26px rgba(60,90,90,.14), inset 0 0 0 5px var(--frame,#cfeeeb);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(60,90,90,.20), inset 0 0 0 5px var(--frame,#cfeeeb); }

.face{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.num{
  display:inline-flex; width:42px; height:42px; border-radius:50%;
  background:var(--frame,#cfeeeb); color:#333; font-weight:800; font-size:19px;
  align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.emoji{ font-size:40px; line-height:1; }
.card h2{ font-size:19px; margin:0 0 8px; }
.card p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.6; }

/* 難易度ラベル（frontmatter に level: を書いた章だけ）。
   背景色は site-theme.css の [palette.level] が付ける */
.level{ display:inline-block; font-size:12px; font-weight:800; color:#fff;
        border-radius:999px; padding:3px 12px; margin-bottom:12px; }

/* 工事中ラベル（まだ作りかけの章） */
.wip{ display:inline-block; font-size:12px; font-weight:800; color:#7a4b00;
      background:#ffe9b0; border:1.5px solid #e0a324; border-radius:999px;
      padding:2px 12px 3px; margin-bottom:12px; }
.card.wip-card{ background:#fffdf6; }

/* ライセンス / 使用許諾・参考リンク（同じカードの見た目を使う） */
.license{ margin:44px 4px 0; padding:22px 24px; background:#fff; border-radius:18px;
          box-shadow:0 6px 18px rgba(60,90,90,.10); font-size:13.5px; line-height:1.75; color:#3a4a4e; }
.license h2{ font-size:17px; margin:0 0 12px; }
.license p{ margin:0 0 10px; }
.license .thirdparty{ color:var(--muted); font-size:12.5px; }
.license .copy{ margin:12px 0 0; font-size:12.5px; color:var(--muted); }
.license a{ color:var(--accent-dark); }
.license strong{ color:var(--accent-dark); }

.refs ul{ margin:0; padding-left:1.2em; }
.refs li{ margin:0 0 9px; }
.refs a{ color:var(--accent-dark); font-weight:700; }
.refs .note{ margin:14px 0 0; font-size:12.5px; color:var(--muted); }
.refs code{ background:#f1f7f7; border-radius:6px; padding:2px 6px;
            font-size:12px; word-break:break-all; }

/* もくじの終わりの区切り線。セクションの線と同じ形で、色は虹（ページ全体の区切り） */
.qr-line{ margin:40px 4px 0;
          background:var(--rainbow); }

/* QRコード（このページを端末で開く）
   幅はカードの並び（.grid）とそろえる。パソコンではカード3枚ぶん、
   スマホではカード1枚ぶんになる（どちらも main の横幅いっぱい）。 */
.qr{ display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap;
     background:#fff; border-radius:20px; padding:18px 26px; margin:26px 0 6px;
     box-shadow:0 8px 22px rgba(60,90,90,.12), inset 0 0 0 4px var(--qr-frame); }
.qr img{ width:132px; height:132px; display:block; }
.qr .qr-text{ text-align:left; }
.qr .qr-text .t{ font-weight:800; font-size:16px; margin:0 0 6px; }
.qr .qr-text .d{ font-size:13px; color:var(--muted); margin:0 0 6px; }
.qr .qr-text .u{ font-size:12px; color:var(--muted); word-break:break-all; }

/* ============ スマートフォン向け ============ */
@media (max-width:620px){
  header{ padding:30px 16px 28px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
  header h1{ font-size:23px; line-height:1.4; }
  header p{ font-size:13.5px; }

  main{ padding:22px 14px 56px; }

  .section + .section{ margin-top:30px; }
  .section-head{ margin:0 2px 12px; gap:8px; }
  .section-head .stitle{ font-size:19px; }
  .section-head .ssub{ font-size:12.5px; }
  .section-line{ margin:0 2px 16px; height:3px; }

  .grid{ grid-template-columns:1fr; gap:14px; }
  .card{ padding:16px 18px 18px; border-radius:18px; box-shadow:0 6px 16px rgba(60,90,90,.14), inset 0 0 0 4px var(--frame,#cfeeeb); }
  .face{ margin-bottom:10px; }
  .num{ width:36px; height:36px; font-size:17px; }
  .emoji{ font-size:32px; }
  .card h2{ font-size:17px; }
  .card p{ font-size:13px; }
  .level{ margin-bottom:10px; }
  .wip{ margin-bottom:10px; font-size:11.5px; }

  .qr-line{ margin:28px 2px 0; }
  .qr{ margin:22px 0 4px; padding:16px 18px; gap:14px; }
  .qr img{ width:112px; height:112px; }
  .qr .qr-text{ text-align:center; }

  .license{ margin:32px 2px 0; padding:18px 16px; font-size:13px; }
  .license h2{ font-size:16px; }
}

/* 指で操作する端末では、カードの浮き上がり（hover）を出さない */
@media (hover:none){
  .card:hover{ transform:none;
               box-shadow:0 10px 26px rgba(60,90,90,.14), inset 0 0 0 5px var(--frame,#cfeeeb); }
  .card:active{ transform:scale(.985); }
}