/* 表示の切り替え（カード・表など、同じ中身の見せ方を替える）。切り替え（.hk-seg）に、よくあるサイトと同じグリッド・リストのアイコンを添える。
   文字だけだと何の切り替えか分かりにくい（依頼の元：dogabunseki「右にあるカードと表もこれだけでは？」）。
   アイコンの横に短い文字を置き、狭い幅（480px 以下）では文字を見えなくする（読み上げの名前としては残る）。
   今の表示は切り替えと同じく aria-pressed="true"（ボタン）か aria-current（表示ごとに URL が変わるリンク）で示す。
   アイコンは CSS だけで描く（文字の色に従う。書体に左右されない）。 */
.hk-view-switch > .hk-seg-b { gap: var(--hk-sp-2); padding: 0 var(--hk-sp-4); text-decoration: none; }
.hk-view-i { flex: none; display: inline-block; width: var(--hk-icon-size); height: var(--hk-icon-size); background: currentColor;
  -webkit-mask: var(--hk-view-icon) center / contain no-repeat; mask: var(--hk-view-icon) center / contain no-repeat; }
.hk-view-i[data-icon="grid"] { --hk-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='1.5' width='5.5' height='5.5' rx='1.2'/%3E%3Crect x='1.5' y='9' width='5.5' height='5.5' rx='1.2'/%3E%3Crect x='9' y='1.5' width='5.5' height='5.5' rx='1.2'/%3E%3Crect x='9' y='9' width='5.5' height='5.5' rx='1.2'/%3E%3C/svg%3E"); }
.hk-view-i[data-icon="list"] { --hk-view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2' width='3' height='3' rx='.8'/%3E%3Crect x='6' y='2.5' width='8.5' height='2' rx='1'/%3E%3Crect x='1.5' y='6.5' width='3' height='3' rx='.8'/%3E%3Crect x='6' y='7.0' width='8.5' height='2' rx='1'/%3E%3Crect x='1.5' y='11' width='3' height='3' rx='.8'/%3E%3Crect x='6' y='11.5' width='8.5' height='2' rx='1'/%3E%3C/svg%3E"); }
@media (max-width: 480px) {
  .hk-view-switch > .hk-seg-b { padding: 0 var(--hk-sp-3); }
  .hk-view-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}