/* ── 解説オーバーレイ（既定OFF。ボタンで入るモード） ── */
/* ★余白は既存のリズムに合わせる。新しい値を1つ足すと「余白の種類が5つ」で監査に落ちる */
/* ★解説ボタンは製品の中身ではなく「道具」。黒ベタで左上に置くと画面の一部に見える。
   右へ寄せ、輪郭だけにして、素の画面の見え方を邪魔しない。 */
.note-bar{margin-bottom:22px;display:flex;justify-content:flex-end}
.note-btn{font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.note-btn:hover{border-color:var(--ink);color:var(--ink)}
.note-btn .n{background:var(--soft2);color:var(--ink);padding:1px 7px;font-size:11px;
  font-weight:600}
.note-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 盤面を暗くする。対象だけが浮き上がる */
.note-scrim{position:fixed;inset:0;z-index:40;background:rgba(26,26,24,.72)}
body.note-on .note-focus{position:relative;z-index:60;background:var(--bg);
  box-shadow:0 0 0 2px var(--accent), 0 0 0 7px rgba(152,11,18,.22),
    0 18px 46px rgba(0,0,0,.45)}

/* 吹き出し（画面の下に固定。狭い画面でも位置が破綻しない） */
.note-card{position:fixed;z-index:62;left:50%;transform:translateX(-50%);
  bottom:18px;width:min(420px,calc(100vw - 24px));
  background:var(--ink);border:1px solid var(--accent);color:#f2f0ec;
  padding:16px 18px 14px;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.note-card .chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  letter-spacing:.06em;padding:3px 10px;border:1px solid rgba(242,240,236,.45);
  color:#f2f0ec}
.note-card .chip.jissoku{border-color:var(--accent);background:rgba(152,11,18,.35)}
.note-card h4{font-size:15px;font-weight:700;margin:10px 0 7px;line-height:1.6;color:#fff}
.note-card p{font-size:12.5px;line-height:1.95;color:#d8d5cf}
.note-card p b{color:#fff}
.note-nav{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.note-nav button{font:inherit;font-size:12.5px;cursor:pointer;min-height:48px;
  padding:0 16px;background:rgba(255,255,255,.10);border:1px solid rgba(242,240,236,.35);
  color:#f2f0ec}
.note-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note-nav .count{margin-left:auto;font-size:11.5px;color:#b3afa8}
@media(max-width:520px){
  .note-nav button{flex:1 1 auto}
  .note-nav .count{flex:1 0 100%;margin:6px 0 0;text-align:right}
}
@media(prefers-reduced-motion:reduce){.note-scrim,.note-card{animation:none}}

/* ── ここから KINGDOM様アプリ版の上書き（ニューモーフィズムに合わせる）── */
.note-bar{ margin: 0; padding: 0 var(--gut) 8px; display: flex; justify-content: flex-end;
  background: var(--nm-bg); }
.note-btn{ border: 0; border-radius: var(--r-btn); background: var(--nm-bg);
  box-shadow: var(--nm-up-sm); color: var(--ink-2); padding: 0 15px; min-height: 44px;
  font-size: var(--fs-label); font-weight: 600; }
.note-btn:hover{ color: var(--ink); border: 0; }
.note-btn:active{ box-shadow: var(--nm-in-sm); }
.note-btn .n{ border-radius: var(--r-chip); background: var(--nm-bg);
  box-shadow: var(--nm-in-sm); color: var(--accent-deep); padding: 2px 9px; }
body.note-on .note-focus{ border-radius: var(--r-card); }
.note-card{ border-radius: var(--r-card); }