/* ===== Study Partner ブランド適用層（中文練習所）=====
   token 出處：study-partner/site/_redesign-draft/index.html の :root と redesign.css
   （--navy #0B1E8A / --accent-blue #3B82F6 / Noto Sans JP / line-height 1.8 / 16px 字級地板）

   方針：**加算のみ**。既存の CSS 変数を上書きして全体を再スキンし、
   課文・音声・練習ロジックには一切触れない。
   中国語本文のフォント（--zh）は機能要件なので据え置き——
   ブランドは UI の色と欧文・和文書体で表現する。 */

:root{
  /* ---- Study Partner ブランド色 ---- */
  --sp-navy:#0B1E8A;
  --sp-navy-dark:#081763;   /* legacy navy 廃止。ブランド navy #0B1E8A の暗色派生 */
  --sp-navy-mid:#1a3a9e;
  --sp-accent:#3B82F6;
  --sp-accent-soft:#EAF4FA;
  --sp-warn:#F59E0B;
  --sp-warn-bg:#FFF7ED;

  /* ---- 既存トークンをブランド側に差し替え ---- */
  --green:#0B1E8A;          /* 主色：深緑 → ネイビー */
  --green-d:#081763;        /* 同上。影・濃色アクセント用の派生色。ブランド主色ではない */
  --gold:#EAF4FA;           /* ハイライト：黄土 → アクセント淡青 */
  --gold-d:#3B82F6;
  --terra:#1a3a9e;
  --stone:#F5F5F9;
  --paper:#FFFFFF;
  --ink:#262626;
  --sub:#6B7280;            /* 旧値は白地 3.04:1 で AA 未達。この値は 4.83:1 */
  --line:#E2E8F0;
  --grid:#D8E0FF;
  --red:#C5283D;            /* エラー色は据え置き（ブランドに赤の定義がないため） */
  --red-soft:#F7E3E0;

  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

/* ---- 背景：手すき紙のドット柄 → Study Partner の淡いグレー ---- */
body{
  background:var(--stone) !important;
  line-height:1.8;
  font-size:16px;
}

/* ---- ヘッダー：ロゴ＋ワードマーク ---- */
header{
  background:linear-gradient(135deg,#0B1E8A 0%,#1a3a9e 60%,#2d4cc8 100%) !important;
  border-bottom:none !important;
}
.sp-hd{
  max-width:960px;margin:0 auto;padding:14px 18px;
  display:flex;align-items:center;gap:12px;
}
.sp-hd__logo{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:#fff;object-fit:contain;padding:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.sp-hd__brand{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sp-hd__brand strong{
  font-family:var(--sans);font-size:.95rem;font-weight:800;color:#fff;letter-spacing:.02em;
}
.sp-hd__brand small{font-family:var(--sans);font-size:.75rem;color:#C7D4FF}
.sp-hd__prod{
  margin:0 0 0 auto;padding:0;text-align:right;min-width:0;
  font:inherit;letter-spacing:normal;text-shadow:none;
}
.sp-hd__prod .t{
  font-family:var(--zh);font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:.1em;
  display:block;white-space:nowrap;
}
.sp-hd__prod .s{font-family:var(--sans);font-size:.7rem;color:#C7D4FF;display:block}
@media(max-width:560px){
  .sp-hd{padding:11px 14px;gap:10px}
  .sp-hd__logo{width:38px;height:38px}
  .sp-hd__brand small{display:none}
  .sp-hd__prod .t{font-size:1rem;letter-spacing:.06em}
}

/* ---- ボタン：ブランドのグラデーション ---- */
.btn.play,.pbtn.main,.ccc-shadow-nav .next,.sp-gate button{
  background:linear-gradient(135deg,#0B1E8A,#3B82F6) !important;
  border-color:transparent !important;color:#fff !important;
}
.lchip.on,.ccc-section-tab.on,.wcell.now{
  background:var(--sp-navy) !important;border-color:var(--sp-navy) !important;color:#fff !important;
}

/* ---- 下部ナビ ---- */
nav.tabbar,.tabbar{background:var(--sp-navy) !important}

/* ---- カード：白地＋淡いボーダー（Study Partner の面の作り方）---- */
.card,.gnotes,.stats .stat{
  background:#fff !important;border:1px solid var(--line) !important;
  box-shadow:0 1px 3px rgba(11,30,138,.06) !important;
}
/* 課程カードは元々「濃色地＋白文字」。地だけ白くすると白文字が消えるので、
   ブランドのグラデーション地のまま残す（見出しとしての階層も保てる）。 */
.lesson-card{
  background:linear-gradient(135deg,#0B1E8A 0%,#1a3a9e 100%) !important;
  border:none !important;color:#fff !important;
  box-shadow:0 2px 10px rgba(11,30,138,.18) !important;
}
.lesson-card h3,.lesson-card .lk,.lesson-card .ja,.lesson-card .meta{color:#fff !important}
.lesson-card .lk{color:#C7D4FF !important}
.lesson-card .ja,.lesson-card .meta{color:#DCE5FF !important}

/* ---- 注音は本文色を維持（ブランド色にすると読みにくい）---- */
.zc .bpmf{color:#0F172A !important}

/* ---- アクセシビリティ：フォーカス可視化とタップ領域 ---- */
:focus-visible{outline:3px solid var(--sp-accent);outline-offset:2px}
button,.btn,.lchip,.wcell,.ccc-section-tab{min-height:44px}


/* ===== 粉色の地を外す =====
   --red-soft(#F7E3E0) は「誤り」の地色として 2 箇所で使われている。
   地を消しても「朱＝間違い」の語彙は保つため、朱文字＋朱下線に置き換える。 */
.dch.sub{background:transparent !important;box-shadow:inset 0 -2px 0 var(--red) !important}
.choices button.choice-wrong{
  background:#fff !important;border-color:var(--red) !important;color:var(--red) !important;
  box-shadow:inset 0 0 0 1px var(--red) !important;
}

/* ===== 台湾華語Study Partner カバー ===== */
.sp-cover{background:#fff;border-bottom:1px solid var(--line);margin-bottom:16px}
.sp-cover__in{max-width:960px;margin:0 auto;padding:22px 18px 20px;font-family:var(--sans)}
.sp-cover__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sp-cover__logo{width:64px;height:64px;border-radius:12px;object-fit:contain;flex:none;
  border:1px solid var(--line);background:#fff;padding:3px}
.sp-cover__ja{font-family:var(--zh);font-size:1.4rem;font-weight:800;color:var(--sp-navy);letter-spacing:.06em;line-height:1.25}
.sp-cover__en{font-size:.78rem;color:var(--sub);margin-top:3px}
.sp-cover__lead{font-size:1rem;line-height:1.9;color:var(--ink);margin:0 0 12px}
.sp-cover__lead b{color:var(--sp-navy)}
.sp-cover__note{background:var(--sp-accent-soft);border-left:4px solid var(--sp-accent);
  padding:11px 14px;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.8;color:#334155;margin-bottom:16px}
.sp-cover__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sp-cover__box{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:#fff}
.sp-cover__box h3{font-size:.84rem;color:var(--sp-navy);margin:0 0 7px;letter-spacing:.04em}
.sp-cover__box ul{margin:0;padding-left:1.1em}
.sp-cover__box li{font-size:.86rem;line-height:1.75;color:#334155;margin-bottom:3px}
.sp-cover__box b{color:var(--sp-navy);font-size:.95rem}
.sp-cover__fine{font-size:.76rem;color:var(--sub);line-height:1.65;margin:8px 0 0}
.sp-cover__cta{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.sp-cover__btn{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:50px;
  background:linear-gradient(135deg,#0B1E8A,#3B82F6);color:#fff;text-decoration:none;font-weight:800;font-size:.92rem}
.sp-cover__mail{font-size:.8rem;color:var(--sub)}
@media(max-width:720px){
  .sp-cover__grid{grid-template-columns:1fr}
  .sp-cover__logo{width:52px;height:52px}
  .sp-cover__ja{font-size:1.2rem}
  .sp-cover__in{padding:18px 14px 16px}
}

/* ---- 体験版の最初の一言（cover を後ろへ動かした分の入口）---- */
.sp-intro{max-width:560px;margin:14px auto 6px;padding:0 16px;}
.sp-intro__t{margin:0 0 4px;font-size:1.02rem;font-weight:800;color:var(--sp-navy);line-height:1.6;}
.sp-intro__t b{color:var(--sp-accent);}
.sp-intro__s{margin:0;font-size:.84rem;color:var(--ink);line-height:1.8;}

/* ---- 完整版：教室情報は畳んでおく（受講生には第一折で要らない）---- */
.sp-cover-fold{max-width:960px;margin:18px auto;padding:0 16px;}
.sp-cover-fold>summary{cursor:pointer;list-style:none;padding:12px 16px;border:1px solid var(--line);
  border-radius:10px;background:var(--paper);font-weight:800;color:var(--sp-navy);font-size:.92rem;
  min-height:44px;display:flex;align-items:center;}
.sp-cover-fold>summary::-webkit-details-marker{display:none}
.sp-cover-fold>summary::after{content:"be";margin-left:auto;color:var(--sp-accent);}
.sp-cover-fold[open]>summary::after{content:"b4";}
.sp-cover-fold>summary:focus-visible{outline:3px solid var(--sp-accent);outline-offset:2px;}
@media (max-width:420px){ .sp-cover-fold,.sp-intro{padding:0 12px;} }

/* ---- 法務フッターの触れる要素も 44px 確保（実測 23px / 19px だった）---- */
footer.ccc-legal summary{min-height:44px;display:flex;align-items:center;cursor:pointer;}
footer.ccc-legal a{display:inline-block;min-height:44px;line-height:44px;}
footer.ccc-legal summary:focus-visible,footer.ccc-legal a:focus-visible{
  outline:3px solid var(--sp-accent);outline-offset:2px;}