/* ============================================================
   【発音のコツ】列表页样式（v1.2·TASK-DEV-034）
   —— C 案「コマ割り × 吹き出し」：網点地の 1 コマ ＝ 1 テーマ、
      その中に子テーマを「しっぽ付き吹き出し」で並べる。

   ▸ 使用元：common/pronounce.php（web 専用·列表页无 app 形态）
   ▸ 視覚基線：prototype/v1.2/pronounce-list.html + assets/pronounce_list.css
      （原型の `.proto-*` 検証バーだけ落とし、それ以外は原型と同値）
      候補 8 案の比較用原型は prototype/v1.2/pronounce-list-candidates.html に残置
   ▸ 【基礎知識】列表页（黒板 × 付箋 / concept_list.css）とは造型を明確に分けてある

   ── 用户 2026-08-09 の確定事項（原型 3 ラウンドの結論）──
      ① 3 組すべて **赤テーマ**（組ごとの色分けはしない。--cc は変数のまま残す）
      ② 見出しフラッグ＝**赤地・白字・黒縁**
      ③ 丸番号ではなく **音波アイコン（バー型）の SVG**。3 組とも同じバーを使う
      ④ 組と組の上下間隔を広げる（46 → 76px）
      ⑤ フラッグはコマの左上へ食い込ませる（狭い画面向けに二段構え·下記 ⚠️）
      ⑥ コマの上下パディングは等値。**測る基準は吹き出しの本体（角丸矩形）だけ**
         —— しっぽ 13px と硬い投影 3px は「下へはみ出す装飾」として余白に数えない
      ⑦ 吹き出し同士の間隔を広げる（特に左右）
   ============================================================ */

/* ── 共用 ── */
.pl-lead{text-align:center;color:var(--text-soft);font-size:.95rem;margin:0 auto 40px;max-width:640px;}
.pl-wrap{max-width:var(--maxw-narrow);margin:0 auto;}
/* 组间距 76px。フラッグが上に 18px はみ出す分もここで吸収されるので、
   見た目の余白は 76-18=58px 相当（手机は 58-16=42px）。 */
.pl-wrap section{margin-bottom:76px;}
.pl-wrap section:last-child{margin-bottom:0;}


/* ════════════════════════════════════════════════════════════
   コマ（分组）＝ 網点地の 1 コマ ＋ 左上の赤フラッグ見出し
   ════════════════════════════════════════════════════════════ */
/* 上下の余白は「内容とコマ内縁の距離」で揃える（用户 2026-08-09）。
   ★ 測る基準は **吹き出しの本体（角丸の矩形）だけ** —— 下に出るしっぽ（13px）と
     硬い投影（3px）は**余白の計算に入れない**（用户が明示: 一度しっぽ込みで揃えたら下が広すぎた）。
   ⇒ 単純に **padding-bottom = padding-top**（46px／手机 42px）でよい。
     しっぽ 13px + 投影 3px は「その下にはみ出す装飾」として余白の上に乗る形になる。 */
.pc-panel{position:relative;border:var(--bd-strong) solid var(--ink);border-radius:var(--r-md);
  background:var(--paper-note);box-shadow:var(--shadow-lg);padding:46px 22px 46px;
  background-image:radial-gradient(rgba(26,24,32,.10) 1.4px,transparent 1.6px);background-size:9px 9px;}

/* 見出しフラッグ：赤地・白字・黒縁（用户指定）。わずかに傾けて貼り紙感を出す。
   ⚠️ 位置を全幅で -16px にすると狭い画面で画面端に貼り付く：
      コマは `.pl-wrap`（max 880）の中、それが `main`（左右 `--padH:18px`）の中にある
      ⇒ **ビューポートが約 916px（880+36）未満だと `.pl-wrap` が main いっぱいまで広がり、
      はみ出せる余裕が 18px しか無い**（-16px だと残り 2px）。
      そこで **既定は控えめな -8px、940px 以上で -16px** の二段構えにする。
      閾値を 916 ではなく 940 にしたのは、916 ちょうどだと画面端まで 4.5px しか残らず
      「貼り付いて」見えるため（940 なら 14px 残る·無头 Chrome で実測）。 */
.pc-flag{position:absolute;left:-8px;top:-16px;display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;background:var(--cc);color:var(--on-dark);
  border:2.5px solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--shadow);
  transform:rotate(-1.5deg);}
@media(min-width:940px){
  .pc-flag{left:-16px;top:-18px;}
}
/* 音波アイコン（インライン SVG）。fill/stroke=currentColor でフラッグの白を継承する。
   ⚠️ 站内は原則 Bootstrap Icons（bi-*）だが、**音波系の字形は自托管子集（icons.css）に無い**
      ので、ここは SVG が必然（規約違反ではない）。 */
.pc-flag .ico{flex:0 0 auto;display:block;width:22px;height:22px;}
.pc-flag .ico svg{display:block;width:22px;height:22px;}
.pc-flag .nm{font-family:var(--font-ja-display);font-weight:var(--fw-black);font-size:1.08rem;
  line-height:1.2;text-shadow:0 1px 0 rgba(0,0,0,.18);}


/* ════════════════════════════════════════════════════════════
   子主题＝しっぽ付き吹き出し
   ════════════════════════════════════════════════════════════ */
/* 吹き出し同士の間隔（用户 2026-08-09：左右も上下も広げる·特に左右）。
   ⚠️ **row-gap は見た目どおりにならない** —— しっぽが 13px 下へ出るので、
      視覚的な行間 ＝ row-gap - 13px（26px なら実質 13px しかない）。
      40px にして実質 27px を確保する。column-gap は 32px（そのまま見た目に効く）。 */
.pc-bubbles{display:flex;flex-wrap:wrap;gap:40px 32px;justify-content:center;}
.pc-bub{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  max-width:100%;padding:13px 18px;background:var(--surface);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  font-family:var(--font-ja);font-weight:700;font-size:1rem;line-height:1.35;word-break:break-word;
  transition:transform .12s,box-shadow .12s;}
/* 常に a:hover の下線を抑える（色は墨で固定）。
   桌面の本当の hover 時は下の @media 側が後勝ちで色を主色に変える。 */
.pc-bub:hover{text-decoration:none;color:var(--ink);}
/* しっぽ：黒縁の三角を 2 枚重ねて描く（外＝墨・内＝白）。
   ⚠️ ::before / ::after は `*{box-sizing:border-box}` の対象外なので明示する。 */
.pc-bub::before,.pc-bub::after{content:"";position:absolute;bottom:-13px;left:26px;
  width:0;height:0;box-sizing:border-box;border-style:solid;}
.pc-bub::before{border-width:14px 11px 0 0;border-color:var(--ink) transparent transparent transparent;}
.pc-bub::after{bottom:-9px;left:28px;border-width:10px 7px 0 0;
  border-color:var(--surface) transparent transparent transparent;}
.pc-bub:nth-child(3n+1){transform:rotate(-1.1deg);}
.pc-bub:nth-child(3n+2){transform:rotate(.8deg);}
/* 反馈：持ち上げ＋主色。⚠️ color は transition に入れない
   （墨↔赤の中間フレームが暗赤になり、手机 Safari で残像に見える）。
   触屏は :active だけで反応させ、:hover は hover 可能なデバイスに限定する
   （さもないと指で触れた :hover が別の場所を押すまで残る）。 */
.pc-bub:active{transform:rotate(0) translateY(-3px);box-shadow:var(--shadow-lg);color:var(--cc);}
@media(hover:hover) and (pointer:fine){
  .pc-bub:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--shadow-lg);color:var(--cc);}
}


/* ── 手机端 ── */
@media(max-width:560px){
  .pl-lead{margin-bottom:32px;}
  .pl-wrap section{margin-bottom:58px;}
  .pc-panel{padding:42px 14px 42px;}
  /* 位置は既定（-8/-16px）のまま。手机はサイズだけ少し詰める */
  .pc-flag{padding:7px 13px;gap:8px;}
  .pc-flag .nm{font-size:1rem;}
  .pc-flag .ico,.pc-flag .ico svg{width:20px;height:20px;}
  /* 手机：横は 2 列を保ちたいので広げすぎない（14px）。縦は しっぽ 13px を見込んで 34px */
  .pc-bubbles{gap:34px 14px;}
  /* flex-grow は 0（1 個だけ余った吹き出しが行いっぱいに伸びるのを防ぐ）。
     basis は column-gap と対で決まる ⇒ gap を変えたら calc も直す（14 / 2 = 7px） */
  .pc-bub{flex:0 1 calc(50% - 7px);min-width:0;}
}

@media(prefers-reduced-motion:reduce){
  .pc-bub{transition:none;}
}