/* ============================================================
   BlockHashtag（ハッシュタグ / タグクラウド）公開側スタイル
   常時読み込み。自己完結（テーマ側CSSに依存しない）。
   タグごとの文字サイズ・文字色・背景色は block.ctp がインラインCSS変数
   （--bkht-fs / --bkht-fw / --bkht-text / --bkht-bg）で渡す。
   ============================================================ */
.bkht-root{max-width:100%;box-sizing:border-box;}

.bkht-list{display:flex;flex-wrap:wrap;align-items:baseline;list-style:none;margin:0;padding:0;gap:.55em .6em;}
.bkht-align-left .bkht-list{justify-content:flex-start;}
.bkht-align-center .bkht-list{justify-content:center;text-align:center;}

.bkht-tag{display:inline-flex;}
.bkht-tag-inner{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-size:var(--bkht-fs,1rem);
  font-weight:var(--bkht-fw,600);
  line-height:1.4;
  color:var(--bkht-text,#333);
  cursor:default;
  white-space:nowrap;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
a.bkht-tag-inner{cursor:pointer;}
.bkht-tag-inner:focus-visible{outline:2px solid var(--bkht-text,#333);outline-offset:3px;border-radius:4px;}

/* --- cloud: 背景なし・重みに応じたフォントサイズ差＋微小回転で自然な散らばり感 --- */
.bkht-style-cloud .bkht-tag-inner{padding:.15em .1em;}
.bkht-style-cloud .bkht-tag:nth-child(3n){transform:rotate(-2deg);}
.bkht-style-cloud .bkht-tag:nth-child(3n+1){transform:rotate(1.4deg);}
.bkht-style-cloud .bkht-tag:nth-child(5n){transform:rotate(0deg);}
a.bkht-style-cloud .bkht-tag-inner:hover,
.bkht-style-cloud a.bkht-tag-inner:hover,
.bkht-style-cloud a.bkht-tag-inner:focus-visible{filter:saturate(1.6) brightness(.9);transform:scale(1.09);}

/* --- pills: 淡色背景の丸ピル。サイズ差は控えめで整然と並ぶ --- */
.bkht-style-pills .bkht-tag-inner{
  background:var(--bkht-bg,#eee);
  padding:.44em 1.05em;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.bkht-style-pills a.bkht-tag-inner:hover,
.bkht-style-pills a.bkht-tag-inner:focus-visible{
  filter:saturate(1.35) brightness(.97);
  transform:translateY(-2px) scale(1.04);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 6px 14px rgba(0,0,0,.10);
}

/* --- underline: 下線のみのミニマル表示 --- */
.bkht-style-underline .bkht-tag-inner{padding:.08em .05em .16em;border-bottom:2px solid var(--bkht-text,#333);}
.bkht-style-underline a.bkht-tag-inner:hover,
.bkht-style-underline a.bkht-tag-inner:focus-visible{filter:saturate(1.5) brightness(.88);transform:translateY(-1px) scale(1.05);}

.bkht-hint{border:2px dashed #c7ced4;border-radius:12px;background:#f7f8fa;padding:18px 16px;text-align:center;color:#5f6b76;font-size:13px;font-weight:700;line-height:1.8;}

@media(max-width:480px){
  .bkht-list{gap:.4em .5em;}
  .bkht-tag-inner{font-size:calc(var(--bkht-fs,1rem) * .88);}
  .bkht-style-pills .bkht-tag-inner{padding:.4em .9em;}
}

@media (prefers-reduced-motion: reduce){
  .bkht-tag-inner{transition:none;}
  .bkht-tag{transform:none!important;}
}