/* スズメンゴ webfonts — 丸ゴシック（rounded gothic）
   ブランド指定どおり M PLUS Rounded 1c（本文・数字）と Zen Maru Gothic（見出し）。
   どちらも Google Fonts 提供。@import で配信ファイル（woff2）を読み込む。 */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

/* スズメンゴ カラーシステム
   明るいライト基調（白〜クリーム）＋ポップなブランドカラー。
   Duolingo系の「やさしい先生」: 正解=みどり / 誤答=コーラル / 強調=黄・水色。
   ニュートラルはすべて“あたたかい”寄り（スズメ＝茶系の世界観）。 */

:root {
  /* ---------- Base palette ---------- */

  /* Cream / paper surfaces（背景はクリーム、カードは純白寄り） */
  --cream-50:  #fffdf7;
  --cream-100: #fff8ea;
  --cream-200: #fdf1da;
  --cream-300: #f6e7c8;
  --paper:     #ffffff;

  /* Warm neutral ink & lines（あたたかいグレー） */
  --ink-900: #3a352c; /* 主要テキスト */
  --ink-700: #5c5446; /* 副テキスト */
  --ink-500: #8a8170; /* 補助・キャプション */
  --ink-300: #b8af9c; /* プレースホルダ */
  --line-200: #ece4d4; /* 区切り線・薄ボーダー */
  --line-300: #ddd2bd; /* 通常ボーダー */

  /* Sparrow brand（スズメ＝茶＋頬の朱）— ロゴ/マスコット用 */
  --sparrow-700: #6b4a2b;
  --sparrow-500: #9a6b3f;
  --sparrow-300: #c79a6a;
  --sparrow-cheek: #f08a6a;

  /* ---------- Pop accents（主役の彩色） ---------- */

  /* みどり = 正解・主CTA・「進む」 */
  --green-500: #58cc02;
  --green-600: #4ba802; /* ledge（押し込み段差の下面） */
  --green-100: #e8f9d4;
  --green-700: #3f8f00; /* 濃いテキスト */

  /* コーラル = 誤答・危険 */
  --coral-500: #ff4d4d;
  --coral-600: #e23b3b; /* ledge */
  --coral-100: #ffe3e1;
  --coral-700: #c22a2a;

  /* 黄（マリーゴールド）= 強調・ドラ・本場・タイマー中盤・コイン */
  --gold-500: #ffc400;
  --gold-600: #e8a900; /* ledge */
  --gold-100: #fff2c9;
  --gold-700: #a87400;

  /* 水色 = 情報・チュートリアル・リンク */
  --sky-500: #1cb0f6;
  --sky-600: #1494d8; /* ledge */
  --sky-100: #d9f1fe;
  --sky-700: #0a72a8;

  /* 紫（むらさき）= デイリー・特別枠 */
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed; /* ledge */
  --violet-100: #efeafe;
  --violet-700: #6d28d9;

  /* ---------- Semantic aliases ---------- */

  --bg-app:        var(--cream-100);
  --surface-card:  var(--paper);
  --surface-sunken: var(--cream-200); /* 牌置き場・内訳パネルなど一段沈んだ面 */
  --surface-tile:  #fffefb;           /* 麻雀牌の面 */

  /* 牌のスート色（伝統色：萬=赤 / 筒=青 / 索=緑 / 字=黒） */
  --tile-man:   var(--coral-700);
  --tile-pin:   var(--sky-700);
  --tile-sou:   var(--green-700);
  --tile-honor: var(--ink-900);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-on-fill:  #ffffff;           /* 色面に乗る文字 */

  --border-soft:   var(--line-200);
  --border-card:   var(--line-300);

  --brand:         var(--green-500);
  --brand-ledge:   var(--green-600);

  --correct:       var(--green-500);
  --correct-ledge: var(--green-600);
  --wrong:         var(--coral-500);
  --wrong-ledge:   var(--coral-600);
  --accent-warm:   var(--gold-500);
  --accent-cool:   var(--sky-500);

  /* 残り時間バーの段階色（安心→注意→危険） */
  --timer-safe:   var(--green-500);
  --timer-warn:   var(--gold-500);
  --timer-danger: var(--coral-500);
}

/* スズメンゴ タイポグラフィ
   丸ゴシック基調。本文 = M PLUS Rounded 1c、見出し = Zen Maru Gothic。
   点数（数字）は大きく・太く・等幅（tabular-nums）で主役にする。 */

:root {
  /* Families */
  --font-body: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Hiragino Maru Gothic ProN',
    'Noto Sans JP', sans-serif;
  --font-display: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
  /* 数字（点数・タイマー）。本文と同じ丸ゴだが tabular-nums で桁を揃える */
  --font-number: 'M PLUS Rounded 1c', system-ui, sans-serif;
  /* 麻雀牌 Unicode を確実に表示するためのフォールバック（OS同梱） */
  --font-mahjong: 'Segoe UI Symbol', 'Segoe UI Emoji', sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extra: 800; /* @kind other */
  --fw-black: 900; /* @kind other */

  /* Type scale（モバイル最優先・px） */
  --text-score: 56px;   /* 点数の主役表示 */
  --text-display: 32px;  /* 画面タイトル・結果見出し */
  --text-h1: 28px;
  --text-h2: 22px;
  --text-title: 18px;    /* カード見出し・モード名 */
  --text-body-lg: 17px;
  --text-base: 16px;     /* 本文標準 */
  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 11px;      /* 符の注記など最小 */

  /* Line heights */
  --lh-tight: 1.12;   /* @kind other */ /* 大きな数字・見出し */
  --lh-snug: 1.32;    /* @kind other */
  --lh-normal: 1.6;   /* @kind other */ /* 解説など読みもの */

  /* Letter spacing（丸ゴは詰めすぎない） */
  --ls-tight: -0.01em; /* @kind other */
  --ls-normal: 0;      /* @kind other */
  --ls-wide: 0.04em;   /* @kind other */
}

/* スズメンゴ 角丸・影・段差（3D押し込みボタン）・モーション
   形のキーワード: 大きめ角丸 / ふっくら / 押し込める段差 / やわらかい影。 */

:root {
  /* ---------- Radius（大きめ角丸） ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;   /* 標準のボタン・チップ */
  --radius-xl: 20px;   /* カード */
  --radius-2xl: 28px;  /* 大きなパネル・モーダル */
  --radius-pill: 999px;
  --radius-tile: 10px; /* 麻雀牌 */

  /* ---------- Soft shadows（やわらかい影・あたたかい色） ---------- */
  --shadow-sm: 0 1px 2px rgba(120, 95, 50, 0.10);
  --shadow-card: 0 2px 0 rgba(120, 95, 50, 0.06), 0 6px 18px rgba(120, 95, 50, 0.10);
  --shadow-pop: 0 8px 28px rgba(120, 95, 50, 0.16);
  --shadow-float: 0 14px 40px rgba(120, 95, 50, 0.20);

  /* ---------- 3D push button（押し込める段差） ----------
     ボタン下面に同系の濃い色をベタで敷き、押すと translateY で段差が縮む。
     使い方: ledge の高さ = --press-depth。各色の *-ledge トークンを下面に使う。 */
  --press-depth: 4px;        /* 通常時の段差 @kind spacing */
  --press-depth-lg: 6px;     /* 大きなCTA @kind spacing */

  /* ---------- Focus ring（キーボード操作） ---------- */
  --ring: 0 0 0 4px rgba(28, 176, 246, 0.35);

  /* ---------- Motion（弾む・ふわっと） ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* 跳ねる */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* @kind other */ /* ふわっと */
  --dur-fast: 0.14s;  /* @kind other */
  --dur-base: 0.28s;  /* @kind other */
  --dur-slow: 0.34s;  /* @kind other */
}

/* スズメンゴ スペーシング & レイアウト
   4px グリッド。モバイル最優先（375px〜）。 */

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 画面の左右余白とコンテンツ最大幅（スマホ縦長を基準に） */
  --gutter: 16px;
  --content-max: 480px;

  /* 主要なタップ領域の最小高（44px 以上を厳守） */
  --hit-min: 48px;
}


*{box-sizing:border-box}
body{margin:0;background:var(--bg-app);color:var(--text-body);font-family:var(--font-body);line-height:var(--lh-normal);-webkit-text-size-adjust:100%}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--gutter) 64px}
a{color:var(--sky-700)}
header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-900);font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--text-title)}
.brand img{width:32px;height:32px}
.cta{display:inline-block;background:var(--green-500);color:#fff;font-family:var(--font-display);font-weight:var(--fw-black);text-decoration:none;padding:10px 16px;border-radius:var(--radius-lg);box-shadow:0 var(--press-depth) 0 var(--green-600)}
.cta:active{transform:translateY(var(--press-depth));box-shadow:0 0 0 var(--green-600)}
.hero{display:flex;align-items:center;gap:14px;margin:6px 0 2px}
.hero img{width:84px;height:100px;flex:0 0 auto}
h1{font-family:var(--font-display);font-weight:var(--fw-black);color:var(--ink-900);font-size:var(--text-h1);margin:6px 0;line-height:var(--lh-snug)}
.lead{color:var(--text-muted);margin:2px 0 8px}
h2{font-family:var(--font-display);font-weight:var(--fw-black);color:var(--ink-900);font-size:var(--text-h2);margin:30px 0 10px}
h3{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--ink-900);font-size:var(--text-title);margin:18px 0 6px}
p{margin:10px 0}
.card{background:var(--surface-card);border:2px solid var(--border-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:12px 14px;margin:12px 0}
.course{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px;padding:0;list-style:none;font-size:var(--text-xs)}
.course a,.course span{display:inline-block;padding:6px 10px;border-radius:var(--radius-pill);text-decoration:none;border:1px solid var(--line-300);color:var(--ink-700);background:var(--surface-card)}
.course .cur{background:var(--sky-500);color:#fff;border-color:var(--sky-500);font-weight:var(--fw-bold)}
.tiles{display:inline-flex;gap:3px;flex-wrap:wrap;vertical-align:middle;margin:2px 0}
.tilegroups{display:inline-flex;gap:10px;flex-wrap:wrap;align-items:center;margin:2px 0}
.tilegroups>.tiles{background:var(--surface-sunken);border:1px solid var(--line-200);border-radius:var(--radius-md);padding:5px 6px;margin:0}
.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:30px;height:42px;background:var(--surface-tile);border-radius:var(--radius-tile);border:1px solid var(--line-200);border-bottom:4px solid var(--line-300);box-shadow:var(--shadow-sm);font-family:var(--font-number);line-height:1;user-select:none}
.tile .n{font-size:19px;font-weight:var(--fw-black)}
.tile .s{font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);margin-top:1px}
.tile .h{font-family:var(--font-display);font-size:23px;font-weight:var(--fw-black)}
.tile.red{background:var(--coral-100)}
.tilegroup{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0}
.tilegroup>div>span.label{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:2px}
.ycard{background:var(--surface-card);border:2px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:11px 14px;margin:10px 0}
.ycard .yhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ycard .yname{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--text-title);color:var(--ink-900)}
.ycard .yname small{font-weight:400;font-size:var(--text-xs);color:var(--text-muted);margin-left:6px}
.ycard .yhan{display:inline-flex;gap:6px;flex-wrap:wrap}
.ycard .yhan .b{font-size:var(--text-2xs);font-weight:var(--fw-bold);background:var(--cream-200);color:var(--ink-700);border-radius:var(--radius-pill);padding:3px 9px;white-space:nowrap}
.ycard .yhan .b.ym{background:var(--gold-100);color:var(--gold-700)}
.ycard .yhan .b.muted2{background:transparent;color:var(--text-muted);font-weight:400}
.ycard .ydesc{margin:7px 0 0;font-size:var(--text-sm)}
.ycard .yex{margin-top:8px}
figure.illust{margin:14px 0;text-align:center}
figure.illust img{max-width:100%;height:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-card);background:var(--surface-card)}
figure.illust figcaption{font-size:var(--text-xs);color:var(--text-muted);margin-top:6px}
.point{background:var(--cream-200);border-left:5px solid var(--green-500);border-radius:var(--radius-md);padding:10px 14px;margin:12px 0}
.point b{color:var(--ink-900)}
.steps{counter-reset:step;list-style:none;padding-left:0}
.steps li{position:relative;padding:6px 0 6px 38px;margin:0}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:6px;width:26px;height:26px;border-radius:var(--radius-pill);background:var(--green-500);color:#fff;font-family:var(--font-display);font-weight:var(--fw-black);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm)}
.tablewrap{overflow-x:auto;margin:10px 0}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:left;font-weight:var(--fw-bold);margin-bottom:6px;color:var(--ink-900)}
th,td{border:1px solid var(--line-200);padding:6px 8px;text-align:center;font-size:var(--text-sm);white-space:nowrap}
th{background:var(--cream-200);color:var(--ink-700)}
td.l,th.l{text-align:left;white-space:normal}
.ron{font-weight:var(--fw-extra);display:block;color:var(--ink-900)}
.tsumo{color:var(--sky-700);font-size:var(--text-xs);display:block}
td.mangan{background:var(--gold-100)}
.manganchip{background:var(--gold-100);padding:0 5px;border-radius:4px}
.muted{color:var(--text-muted)}
.tag{display:inline-block;font-size:var(--text-2xs);font-weight:var(--fw-bold);color:var(--sky-700);background:var(--sky-100);border-radius:var(--radius-pill);padding:2px 8px}
.note{font-size:var(--text-xs);color:var(--text-muted);margin:6px 0}
.ctabox{margin:24px 0;padding:18px;background:var(--cream-200);border:2px solid var(--line-300);border-radius:var(--radius-xl);text-align:center}
.ctabox p{margin:0 0 10px;font-weight:var(--fw-bold);color:var(--ink-900)}
.prevnext{display:flex;justify-content:space-between;gap:10px;margin:28px 0 0}
.prevnext a{flex:1;text-align:center;padding:12px;border-radius:var(--radius-lg);text-decoration:none;font-weight:var(--fw-bold);background:var(--surface-card);border:2px solid var(--line-300);color:var(--ink-900)}
.prevnext a.next{background:var(--green-500);color:#fff;border-color:var(--green-500)}
.faq dt{font-weight:var(--fw-bold);color:var(--ink-900);margin-top:14px}.faq dd{margin:4px 0 0}
ul{margin:10px 0;padding-left:1.2em}li{margin:5px 0}
footer.site{margin-top:44px;padding-top:16px;border-top:1px solid var(--line-200);font-size:var(--text-xs);color:var(--text-muted)}
footer.site a{color:var(--text-muted)}
footer.site nav{margin-bottom:6px}