/* 見出し＋説明。見出しの右に i の印（同じ行）・右端に操作（ボタンなど）を置ける。説明は見出しのすぐ下に1〜2文。
   説明の文字は補足の色（白との比 8.5）。見出しの大きさは data-size="lg"（画面の題）・無し（区画）・"sm"（小さな区画）。 */
.hk-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hk-sp-2) var(--hk-sp-6); margin: 0 0 var(--hk-sp-6); font-family: var(--hk-font); }
.hk-head-main { flex: 1 1 280px; min-width: 0; word-break: auto-phrase; }
.hk-head-title { margin: 0; font-size: var(--hk-fs-h2); font-weight: var(--hk-fw-bold); line-height: var(--hk-lh-tight); color: var(--hk-text); }
.hk-head-desc { margin: var(--hk-sp-2) 0 0; font-size: var(--hk-fs-md); line-height: var(--hk-lh); color: var(--hk-muted); }
.hk-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hk-sp-3); }
.hk-head[data-size="lg"] .hk-head-title { font-size: var(--hk-fs-h1); }
.hk-head[data-size="sm"] .hk-head-title { font-size: var(--hk-fs-h3); }
.hk-head[data-size="sm"] .hk-head-desc { font-size: var(--hk-fs-sm); }