/* アプリのページ（Clock Gallery・Sky Gallery …）の一番上に置く、かわうそファクトリーの共通ヘッダー（黒地版）
   その下に各アプリのサブヘッダーを、この高さ（--kf-bar）ぶん下げて重ねる */
:root { --kf-bar: 46px; }
.kf-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--kf-bar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gut, 24px);
  background: #04060b; border-bottom: 1px solid rgba(242, 204, 142, .12);
  font-family: "Jost", "Futura", "Avenir Next", system-ui, sans-serif; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
}
.kf-bar a { color: rgba(236, 232, 224, .72); text-decoration: none; transition: color .3s; }
.kf-bar a:hover { color: #fff; }
.kf-bar .l { justify-self: start; display: flex; gap: clamp(14px, 2.4vw, 32px); }
.kf-bar .r { justify-self: end; display: flex; gap: clamp(14px, 2.4vw, 32px); }
.kf-bar .kf-brand { display: flex; align-items: center; gap: 10px; color: rgba(236, 232, 224, .9); letter-spacing: .34em; white-space: nowrap; }
.kf-bar .kf-brand img { height: 22px; width: auto; }
@media (max-width: 640px) { .kf-bar .kf-brand span, .kf-bar .opt { display: none; } }