@charset "UTF-8";
/* ============================================================
   tailwind-extend.css
   ------------------------------------------------------------
   assets/css/tailwind.css は生成済みのビルド成果物だが、
   HTML 側で使われているのにビルドに含まれていないユーティリティが
   いくつかある（ビルド環境がリポジトリに無く再生成できないため）。
   ここではその不足分だけを Tailwind v3 と同じ出力で手書きで補う。

   ・読み込み順は tailwind.css の直後（style.css より前）。
   ・将来 Tailwind をビルドし直せるようになったら、このファイルと
     各 HTML の <link> を削除すればよい。

   カラー: kbf-orange #FF6B1A / kbf-amber #FFB800 / kbf-red #E8272B
           kbf-dark #0D0D0D / kbf-deep #1A1A2E / kbf-mid #16213E
   ============================================================ */

/* ─── Sizing / Spacing ─── */
.h-32 { height: 8rem; }
.w-32 { width: 8rem; }
.w-11 { width: 2.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-5 { margin-bottom: 1.25rem; }
.ml-4 { margin-left: 1rem; }

/* ─── Transform (1/3 offsets) ─── */
.-translate-x-1\/3 { --tw-translate-x: -33.333333%; }
.-translate-y-1\/3 { --tw-translate-y: -33.333333%; }
.translate-x-1\/3  { --tw-translate-x: 33.333333%; }
.translate-y-1\/3  { --tw-translate-y: 33.333333%; }
.-translate-x-1\/3,
.-translate-y-1\/3,
.translate-x-1\/3,
.translate-y-1\/3 {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ─── Background color ─── */
.bg-kbf-amber { --tw-bg-opacity: 1; background-color: rgb(255 184 0 / var(--tw-bg-opacity, 1)); }
.bg-kbf-amber\/\[0\.05\]  { background-color: rgba(255, 184, 0, .05); }
.bg-kbf-amber\/\[0\.08\]  { background-color: rgba(255, 184, 0, .08); }
.bg-kbf-orange\/\[0\.05\] { background-color: rgba(255, 107, 26, .05); }
.bg-kbf-orange\/8         { background-color: rgba(255, 107, 26, .08); }
.bg-kbf-red\/8            { background-color: rgba(232, 39, 43, .08); }
.bg-kbf-red\/10           { background-color: rgba(232, 39, 43, .1); }

/* ─── Border color ─── */
.border-kbf-amber\/25 { border-color: rgba(255, 184, 0, .25); }
.hover\:border-white\/25:hover { border-color: hsla(0, 0%, 100%, .25); }

/* ─── Gradient stops ─── */
.from-kbf-mid\/30 {
  --tw-gradient-from: rgba(22, 33, 62, .3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(22, 33, 62, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-kbf-dark {
  --tw-gradient-to: hsla(0, 0%, 5%, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0d0d0d var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* ─── Misc ─── */
.cursor-pointer { cursor: pointer; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── ::after variant（管理画面のトグルスイッチ用） ─── */
.after\:content-\[\'\'\]:after { --tw-content: ''; content: var(--tw-content); }
.after\:absolute:after      { content: var(--tw-content); position: absolute; }
.after\:top-\[2px\]:after   { content: var(--tw-content); top: 2px; }
.after\:left-\[2px\]:after  { content: var(--tw-content); left: 2px; }
.after\:h-5:after           { content: var(--tw-content); height: 1.25rem; }
.after\:w-5:after           { content: var(--tw-content); width: 1.25rem; }
.after\:rounded-full:after  { content: var(--tw-content); border-radius: 9999px; }
.after\:bg-white:after      { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.after\:transition-all:after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}

/* ─── peer-checked variant（同上） ─── */
.peer:checked ~ .peer-checked\:bg-kbf-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 107 26 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:after\:translate-x-full:after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ─── Responsive ─── */
@media (min-width: 640px) {
  .sm\:h-7 { height: 1.75rem; }
  .sm\:w-7 { width: 1.75rem; }
}