/* 上の帯：画面の上に置く、説明（i の印）・補足・出典を並べた1つの帯。
   - 帯は1つの箱。背景は帯だけが持ち、i の印・出典など中の物は別の箱にしない（途切れて別の絵に見えない）。
   - 上下の余白は帯が持つ（1行でも2行でも3行でも同じ）。中の行の高さを余白の代わりにしない。
   - 項目の区切りは細い縦線で、各項目の左に付ける。行の先頭に来た項目の線は帯の外へ出て隠れるので、行末や行頭に「・」や線が残らない。
   - 開閉の印は .hk-chev（細い山形。閉じている時は下向き〈押すと下に開く〉・開いている時は上向き〈押すと上に閉じる〉）。 */
.hk-band { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--hk-sp-3); min-width: 0; padding: var(--hk-sp-4) var(--hk-sp-5);
  background: var(--hk-surface-2); border: var(--hk-bw) solid var(--hk-line); border-radius: var(--hk-radius-md);
  font-family: var(--hk-font); font-size: var(--hk-fs-sm); line-height: var(--hk-lh-snug); color: var(--hk-text-2); }
.hk-band > .hk-info { margin: 0; }
/* i の印（--hk-info-size）の真ん中に1行目の文の真ん中を合わせる。足した分は下の負の余白で戻し、最後の行の下の空きも同じにする */
.hk-band-clip { flex: 1 1 auto; min-width: 0; overflow: hidden; padding-block: calc((var(--hk-info-size) - 1lh) / 2); }
.hk-band-items { display: flex; flex-wrap: wrap; row-gap: var(--hk-sp-1); margin: 0 0 0 calc(-2 * var(--hk-sp-5) - 1px); padding: 0; list-style: none; }
.hk-band-item { box-sizing: border-box; min-width: 0; margin-left: var(--hk-sp-5); padding-left: var(--hk-sp-5); border-left: 1px solid var(--hk-line-strong); background: none; overflow-wrap: anywhere; }
.hk-band-item a { color: var(--hk-accent-strong); }
.hk-band-toggle { box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hk-text-2); cursor: pointer; }
.hk-band-toggle:hover { background: var(--hk-surface-3); color: var(--hk-text); }
.hk-band-toggle:focus-visible { outline: var(--hk-focus); outline-offset: 0; }

/* 細い山形（開閉の印）。aria-expanded の値で向きが変わる */
.hk-chev { display: block; flex: none; width: 8px; height: 8px; box-sizing: border-box; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
[aria-expanded="true"] > .hk-chev { transform: translateY(2px) rotate(-135deg); }
/* 下から出る枠（ボトムシート）の向き：押すと動く方向。小さい段（閉じている）＝上へ広がる︿、広げた段（開いている）＝下へたたむ﹀（上の帯とは逆） */
.hk-chev[data-hk-chev="sheet"] { transform: translateY(2px) rotate(-135deg); }
[aria-expanded="true"] > .hk-chev[data-hk-chev="sheet"] { transform: translateY(-2px) rotate(45deg); }