/* 読み込み中。灰色にするだけ・文字だけで止めず、回る印と「何をしているか」の文を同じ場所に出す（固まっていないと分かるように）。
   画面全体を待たせる時は data-overlay で全部の層の上、画面の真ん中に出す。
   動きを減らす設定でも、進んでいると分かるよう回る印はゆっくり回し続ける。 */
.hk-loading { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--hk-sp-3); font-family: var(--hk-font); font-size: var(--hk-fs-md); line-height: var(--hk-lh-snug); color: var(--hk-text-2); }
.hk-spin { box-sizing: border-box; flex: none; display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--hk-line); border-top-color: var(--hk-accent); border-radius: 50%;
  vertical-align: middle; animation: hk-spin .8s linear infinite; }
@keyframes hk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hk-spin { animation-duration: 2.4s; } }
.hk-loading-sub { display: block; font-size: var(--hk-fs-sm); color: var(--hk-muted); }
/* 画面全体を待たせる時 */
.hk-loading[data-overlay] { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: center; background: rgba(242, 243, 246, .78); }
.hk-loading[data-overlay] > .hk-loading-box { display: inline-flex; align-items: center; gap: var(--hk-sp-4); max-width: calc(100vw - 32px); padding: var(--hk-sp-6) var(--hk-sp-8);
  background: var(--hk-surface); border: var(--hk-bw) solid var(--hk-line); border-radius: var(--hk-radius-lg); box-shadow: var(--hk-shadow-2); }
/* ボタンの中（押した後の処理中）。印を文字の前に置き、文字を「保存中…」のような処理中の言葉にする */
.hk-btn > .hk-spin { width: 14px; height: 14px; border-width: 2px; }
.hk-btn-primary > .hk-spin { border-color: rgba(255,255,255,.35); border-top-color: var(--hk-on-accent); }
.hk-loading[hidden] { display: none; }