/* =====================================================================
   factory/web/radio-factory.css — RADIO FACTORY の筐体(factory-ui の上に載せる分)
   出どころ: docs/design/radio-factory.html(Claude Design 案、2026-10-04)の B・C・ページを、そのまま写したもの。
   ・A(factory-ui)は写さない: vendor/factory-ui/ の CSS を先に読む(tokens → fonts → chassis → panel → vfd → controls → dialog → desktop)
   ・B: TAPE FACTORY のカセットベイ(骨組みのまま。RADIO では rf- を重ねて黒いテープにする)
   ・C: RADIO FACTORY の中段(rf- クラス、色は --f-* トークン)
   ・ページ(筐体の外)の地
   外したもの: .sheet / .rf-demo*(案のデモ)、.rf-off(時計の出し入れは desktop.js がする)
   F4-3(操作パネル v2、設計書 v0.22 §5.1): 末尾の「操作パネル v2」の節。照明はアンバーに決まったので緑・白は外し、RADIO LOW(.rf-duck)も外した
   ===================================================================== */

/* ===================== B. TAPE FACTORY のカセットベイ ===================== */
/* TAPE FACTORY 固有のカセットベイ(骨組みの B をそのまま切り出し)。RADIO では rf- クラスを重ねて使う */
/* ===================== B. TAPE FACTORY 固有(参考) ===================== */
  /* ============ cassette bay (compartment w/ smoked glass door) ============ */
  .bay { position: relative; flex: 1; min-height: 290px; border-radius: 3px; padding: 10px 13px 9px;
    display: flex; flex-direction: column; gap: 7px;
    background-image: linear-gradient(180deg, #3a3d42 0%, #262a2e 5%, #1b1e22 55%, #0f1113 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.65); }
  .bayhead { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 3px;
    font-family: 'Share Tech Mono', monospace; font-size: 7.5px; letter-spacing: 0.2em; color: #6f757c; }
  .bayhead .r { display: flex; align-items: center; gap: 12px; }
  .bayhead .ej { color: #8b9198; }
  .bayhr { flex: none; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 10%, rgba(255,255,255,0.09) 90%, transparent);
    box-shadow: 0 1px 0 rgba(0,0,0,0.6); }
  .bayhr.b { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0.7) 90%, transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
  .baymid { flex: 1; min-height: 0; display: flex; align-items: center; gap: 8px; }
  .vents { width: 40px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .vents.l { align-items: flex-start; } .vents.r { align-items: flex-end; }
  .vents i { width: 26px; height: 3px; border-radius: 2px; background: #0c0e10; display: block;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.07); }
  .door { position: relative; flex: 1; height: 168px; align-self: center; border-radius: 10px;
    background: linear-gradient(180deg, #23262a, #121417);
    box-shadow: inset 0 0 0 3px #0b0d0f, 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.05); }
  .glass { position: absolute; inset: 0; border-radius: 7px; overflow: hidden;
    background: radial-gradient(120% 80% at 50% 108%, rgba(255,176,74,0.3), rgba(0,0,0,0) 62%),
                linear-gradient(180deg, #07080a, #101318 48%, #05060a);
    box-shadow: inset 0 3px 14px rgba(0,0,0,0.95); }
  .cass2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 420px; height: 144px; box-sizing: border-box; border-radius: 6px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 20%, rgba(0,0,0,0.18));
    transition: background-color 0.25s, box-shadow 0.25s;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55)); }
  .clabel2 { flex: none; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
    border-radius: 2px; transition: background-color 0.25s, box-shadow 0.25s; }
  .chip2 { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    font-family: 'Share Tech Mono', monospace; font-size: 15px; color: #fff; }
  .chip2ghost { flex: none; width: 26px; }
  .cl2mid { flex: 1; min-width: 0; text-align: center; font-family: 'Share Tech Mono', monospace; }
  .ctitle2 { font-size: 16px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calbum2 { font-size: 10px; letter-spacing: 0.12em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cwin2 { flex: 1; align-self: center; width: 76%; border-radius: 999px;
    display: flex; align-items: center; justify-content: space-around; transition: background-color 0.25s; }
  .creel2 { position: relative; width: 34px; height: 34px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid #e0e4ec; background: repeating-conic-gradient(#fff 0deg 24deg, var(--reelbg, #141824) 24deg 45deg);
    animation: reelspin 2.4s linear infinite; animation-play-state: paused; }
  .creel2::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
  .creel2::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--reelbg, #141824); }
  .bay.rolling .creel2 { animation-play-state: running; }
  .glassfx1 { position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.16), inset 0 -3px 0 rgba(255,255,255,0.06),
                inset 3px 0 0 rgba(255,255,255,0.1), inset -3px 0 0 rgba(255,255,255,0.1),
                inset 0 0 26px rgba(0,0,0,0.8); }
  .glassfx2 { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.08) 24%, rgba(0,0,0,0.12) 72%, rgba(0,0,0,0.55)); }
  .glassfx3 { position: absolute; left: -14%; top: -40%; width: 46%; height: 180%; pointer-events: none;
    transform: rotate(17deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.14) 55%, transparent); }
  .glasslamp { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; pointer-events: none;
    background: linear-gradient(0deg, rgba(255,176,74,0.16), transparent); transition: background 0.4s; }
  .bay.dubbing .glasslamp { background: linear-gradient(0deg, rgba(255,176,74,0.4), transparent); }
  .bayfoot { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 3px;
    font-family: 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: 0.18em; color: #7b8087; }
  .bayfoot .g { display: flex; align-items: center; gap: 10px; }
  .bayfoot .scr { width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #4c5055, #101214 72%); box-shadow: inset 0 0 2px rgba(0,0,0,0.9); }

/* ===================== ページ(筐体の外) ===================== */
html { background-color: #1d150e; }
body { margin: 0; min-height: 100vh; width: max-content; min-width: 100%; box-sizing: border-box; padding: 56px 24px 80px; display: flex; flex-direction: column; align-items: center; gap: 40px;
  font-family: var(--f-font-ui); background-color: #1d150e;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 2px, rgba(255,255,255,0.02) 2px 5px, rgba(0,0,0,0.12) 5px 9px),
    radial-gradient(120% 90% at 50% 0%, rgba(146,94,42,0.35) 0%, rgba(20,13,8,0.9) 70%); }
a { color: #c9a05e; }
a:hover { color: #ffb04a; }

/* ===================== C. RADIO FACTORY の中段 ===================== */
/* =====================================================================
   radio-factory.css — RADIO FACTORY 中段(C)
   factory-ui 1.4.1(A)と TAPE FACTORY のカセットベイ(B)の上に載せる。
   クラスは rf-、色は --f-* トークン。A は上書きしない。
   ===================================================================== */

/* B の .creel2 が参照する回転(TF 本体にあるキーフレーム) */
@keyframes reelspin { to { transform: rotate(360deg); } }

/* ---- ページ(筐体の外) ---- */
.rf-page { display: flex; justify-content: center; padding: var(--f-margin-top) var(--f-margin-x) var(--f-margin-bottom); }

/* ---- 中段 ---- */
.rf-mid { margin: 0 28px; display: flex; flex-direction: column; gap: 14px; }

/* ===================== チューナー部 ===================== */
/* ダイヤル窓の照明: data-lamp で --rf-ink だけ差し替える。他は --rf-ink から導出。amber(RADIO)と off(TAPE。F4-3)だけ */
.rf-tuner {
  --rf-ink: var(--f-amber);
  --rf-ink-dim: color-mix(in srgb, var(--rf-ink) 58%, transparent);
  --rf-ink-glow: color-mix(in srgb, var(--rf-ink) 50%, transparent);
  --rf-lamp-glow: color-mix(in srgb, var(--rf-ink) 30%, transparent);
  --rf-lamp-tint: color-mix(in srgb, var(--rf-ink) 7%, transparent);
  position: relative; border-radius: 3px; padding: 10px 13px 9px; display: flex; flex-direction: column; gap: 7px;
  background-image: var(--f-bay-bg); box-shadow: var(--f-bay-shadow);
}
.rf-tuner[data-lamp="off"] { --rf-ink: #3b3a36; --rf-ink-dim: #2c2b28; --rf-ink-glow: transparent; --rf-lamp-glow: transparent; --rf-lamp-tint: transparent; }
.rf-tuner[data-lamp="off"] .rf-needle, .rf-tuner[data-lamp="off"] .rf-mneedle { opacity: 0.45; box-shadow: none; }

.rf-tmid { flex: none; display: flex; align-items: stretch; gap: 14px; height: 128px; }

/* 信号メーター(アナログ針) */
.rf-meter { flex: none; width: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.rf-mwin { position: relative; width: 168px; height: 92px; border-radius: 5px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 114%, var(--rf-lamp-glow), transparent 64%), linear-gradient(180deg, var(--rf-lamp-tint), var(--rf-lamp-tint)), linear-gradient(180deg, #07080a, #101318 48%, #05060a);
  box-shadow: inset 0 0 0 3px #0b0d0f, inset 0 3px 14px rgba(0,0,0,0.95), 0 1px 0 rgba(255,255,255,0.08); }
.rf-mtick { position: absolute; left: 50%; bottom: -18px; width: 1px; height: 98px; margin-left: -0.5px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--rf-ink-dim) 0 6px, transparent 6px); }
.rf-mtick.big { background: linear-gradient(180deg, var(--rf-ink) 0 10px, transparent 10px); }
.rf-mneedle { position: absolute; left: 50%; bottom: -18px; width: 2px; height: 92px; margin-left: -1px; transform-origin: 50% 100%;
  background: var(--f-red); box-shadow: 0 0 5px var(--f-red-glow); transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
.rf-mlab { position: absolute; left: 11px; bottom: 7px; font-family: var(--f-font-mono); font-size: 7.5px; letter-spacing: 0.2em; color: var(--rf-ink-dim); }
.rf-ledrow { display: flex; align-items: center; gap: 6px; }
.rf-led { width: 7px; height: 7px; border-radius: 50%; background: #2b2e2c; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); }
.rf-led.on { background: var(--f-green); box-shadow: 0 0 7px var(--f-green-glow), inset 0 0 2px rgba(255,255,255,0.8); }

/* ダイヤル窓(FM 76〜95 MHz / SW 6〜25 MHz(F1-2)、0.1 刻み = 3px、2 MHz ごとに数字、局名は 2 段に刷る) */
.rf-dial { flex: 1; min-width: 0; position: relative; border-radius: 6px; background: linear-gradient(180deg, #23262a, #121417);
  box-shadow: inset 0 0 0 3px #0b0d0f, 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.05); }
.rf-glass { position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  background: radial-gradient(110% 80% at 50% 112%, var(--rf-lamp-glow), transparent 62%), linear-gradient(180deg, var(--rf-lamp-tint), var(--rf-lamp-tint)), linear-gradient(180deg, #07080a, #101318 48%, #05060a);
  box-shadow: inset 0 3px 14px rgba(0,0,0,0.95); }
.rf-glassfx { position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.12), inset 0 -3px 0 rgba(255,255,255,0.05), inset 3px 0 0 rgba(255,255,255,0.08), inset -3px 0 0 rgba(255,255,255,0.08), inset 0 0 20px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.04) 26%, rgba(0,0,0,0.06) 74%, rgba(0,0,0,0.45)); }
.rf-scale { position: absolute; left: 50%; top: 0; bottom: 0; width: 570px; margin-left: -285px; }
.rf-ticks { position: absolute; left: 0; bottom: 34px; width: 571px; height: 18px;
  background-image: linear-gradient(90deg, var(--rf-ink-dim) 0 1px, transparent 1px), linear-gradient(90deg, var(--rf-ink) 0 1px, transparent 1px), linear-gradient(90deg, var(--rf-ink) 0 1px, transparent 1px);
  background-size: 3px 6px, 15px 11px, 30px 18px; background-position: 0 100%, 0 100%, 0 100%; background-repeat: repeat-x; }
.rf-num { position: absolute; bottom: 11px; transform: translateX(-50%); font-family: var(--f-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--rf-ink); text-shadow: 0 0 8px var(--rf-ink-glow); }
.rf-stwrap { position: absolute; top: 0; bottom: 0; width: 0; }
.rf-st { position: absolute; top: 15px; left: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: var(--rf-ink); text-shadow: 0 0 8px var(--rf-ink-glow); }
.rf-stwrap.r1 .rf-st { top: 34px; }
.rf-stmark { position: absolute; left: -3px; bottom: 54px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--rf-ink); }
.rf-needle { position: absolute; top: 5px; bottom: 5px; width: 2px; margin-left: -1px; background: var(--f-red); box-shadow: 0 0 6px var(--f-red-glow); transition: left 0.06s linear; }

/* 同調つまみと SEEK */
.rf-kblk { flex: none; width: 200px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.rf-seek { cursor: pointer; border: none; padding: 0; width: 36px; height: 46px; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background-image: var(--f-btn-bg); box-shadow: var(--f-btn-shadow); }
.rf-seek:hover { filter: brightness(1.05); }
.rf-seek:active, .rf-seek.on { box-shadow: inset 0 2px 5px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.6); transform: translateY(2px); }
.rf-seek .g { font-size: 10px; line-height: 1; color: #ece8e0; }
.rf-seek .n { font-size: 7px; font-weight: 600; letter-spacing: 0.08em; color: var(--f-text-mid); }
.rf-kcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rf-tknob { cursor: grab; position: relative; width: 106px; height: 106px; border-radius: 50%; touch-action: none; user-select: none;
  background-image: linear-gradient(180deg, #43464a, #1c1e20);
  box-shadow: 0 4px 9px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 3px rgba(0,0,0,0.3); }
.rf-tknob:active { cursor: grabbing; }
.rf-tknob-rot { position: absolute; inset: 0; border-radius: 50%; background-image: repeating-conic-gradient(from 0deg, rgba(0,0,0,0.35) 0deg 1.5deg, transparent 1.5deg 4deg); }
.rf-tknob-rot i { position: absolute; top: 5px; left: 50%; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 1px; background: #e6e2da; display: block; }
.rf-tknob-cap { position: absolute; inset: 21px; border-radius: 50%; background: linear-gradient(180deg, #3a3d41, #232528); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 5px rgba(0,0,0,0.55); }

/* 合っている局の表示(局名・街・現地時刻)。表示は家族どおりアンバー */
.rf-readout { font-size: 11.5px; letter-spacing: 0.16em; line-height: 14px; min-height: 14px; color: var(--f-amber); text-shadow: 0 0 10px var(--f-amber-glow-txt); white-space: nowrap; }

/* BAND キー(F1-2、設計書 v0.34 §5.3): チューナー部の下の行の右、BAND の刻印 + FM JAPAN / SW WORLD。形は FLIP・EJECT と同じ .rf-baykey(下の節)。
   ランプ(i)は TUNED と同じ緑で、RADIO のとき選んでいるバンドの 1 つだけ灯る(.on)。選んでいないキー(.sel が無い)の文字は少し暗く(#8f8a82 = factory-ui の .obtn.cart span と同じ値)。
   キー 18px で下の行が 4px 高くなる(ベイの FLIP・EJECT と同じ) */
.rf-bandkey i { width: 5px; height: 5px; border-radius: 50%; background: #2f3a34; box-shadow: inset 0 0 2px rgba(0,0,0,0.7); }
.rf-bandkey.on i { background: var(--f-green); box-shadow: 0 0 6px var(--f-green-glow); }
.rf-bandkey b { font-weight: 700; font-size: 8.5px; letter-spacing: 0.12em; }
.rf-bandkey:not(.sel), .rf-bandkey:not(.sel) b { color: #8f8a82; }

/* ===================== デッキ部 ===================== */
.rf-deck { display: flex; align-items: stretch; gap: 14px; }   /* 高さ = 左の列(ベイ 290 + 10 + REC MODE)。右の列は一覧の高さを内容に依らせない(下の .rf-dside .list)ので伸びない(F4-3 E) */
.rf-left { flex: 0 0 500px; display: flex; flex-direction: column; gap: 10px; }
.rf-bay { flex: none; }   /* TF と同じ 290px(B の min-height)に留める */

/* REC MODE の小パネル(ベイと同じ recessed な地) */
.rf-panel { flex: 1; border-radius: 3px; padding: 10px 13px 9px; display: flex; flex-direction: column; gap: 7px;
  background-image: var(--f-bay-bg); box-shadow: var(--f-bay-shadow); }
.rf-panel-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 3px; }
.rf-panel-body .selcol { width: 220px; }
.rf-panel-body .bayfoot { padding: 0; }

/* 黒いカセット(RADIO DECK 01 のテープ) */
.rf-cass { background-color: #121315; }
.rf-clabel { background: linear-gradient(180deg, #2f3135, #202226); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -1px 0 rgba(0,0,0,0.5); }
.rf-chip { background: var(--f-amber-dk); }
.rf-ctitle { color: var(--f-text-hi); }
.rf-calbum { color: var(--f-text-lo); }
.rf-cwin { position: relative; --reelbg: #060708; background: #060708; box-shadow: inset 0 1px 3px rgba(0,0,0,0.9); }
.rf-pack { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #3b2f25 0 40%, #2a211a 70%, #1c1613); box-shadow: 0 0 0 1px rgba(0,0,0,0.6); }
.rf-pack.l { left: 25%; }
.rf-pack.r { left: 75%; }

/* 表示窓の上段: カウンター + REC(文字) + 状態 */
.rf-dside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rf-dside .list { contain: size; }   /* 一覧の高さを行の数に依らせない(内容は大きさに数えない)→ 高さは factory-ui の min-height 200px と flex: 1 で決まり、デッキ部は 402px のまま。行は .lbody の中でスクロール(F4-3 E) */
.rf-vtop { display: flex; align-items: flex-end; gap: 16px; }
.rf-vcell { padding-bottom: 3px; }
.rf-vstat { margin-left: auto; padding-bottom: 3px; }
.segs i.rf-on { background: var(--f-amber-fill); }


/* 録音後は REC MODE を固定(操作すると理由をラインディスプレイに出す) */
.rf-lock { opacity: 0.55; }

/* FLIP: 2 秒でテープを裏返す(半分で面を入れ替える) / EJECT: 抜いて新しいテープを入れる */
@keyframes rf-flip {
  0% { transform: translate(-50%, -50%) perspective(900px) rotateY(0deg); }
  50% { transform: translate(-50%, -50%) perspective(900px) rotateY(90deg) scale(0.96); }
  50.01% { transform: translate(-50%, -50%) perspective(900px) rotateY(-90deg) scale(0.96); }
  100% { transform: translate(-50%, -50%) perspective(900px) rotateY(0deg); }
}
.rf-cass.rf-flip { animation: rf-flip 2s cubic-bezier(0.45, 0, 0.3, 1) both; }
@keyframes rf-eject {
  0% { transform: translate(-50%, -50%); }
  45% { transform: translate(-50%, -210%); }
  55% { transform: translate(-50%, -210%); }
  100% { transform: translate(-50%, -50%); }
}
.rf-cass.rf-eject { animation: rf-eject 1.2s ease-in-out both; }

/* ===================== 操作パネル v2(F4-3、設計書 v0.22 §5.1) ===================== */
/* FUNCTION スイッチ(RADIO / TAPE): 部品は factory-ui の .modeswitch / .modeknob / .modeticks。2 段にするための差だけ(見本の値) */
.rf-sw2 { width: 124px; }
.rf-sw2 .modeknob { width: 50%; }
.rf-sw2 .modeticks { grid-template-columns: 1fr 1fr; }
.rf-sw2 .modehits { grid-template-columns: 1fr 1fr; }   /* 左右を押して切り替える当たり(REC MODE の .modehits と同じ作り) */
.rf-caps2 { display: grid; grid-template-columns: 1fr 1fr; margin-top: 7px; }
.rf-caps2 div { display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: #8b8781; }
.rf-caps2 div.on { color: var(--f-text-hi); }

/* 赤い REC: TAPE のときは暗く(factory-ui の .recbtn:disabled と同じ値。disabled 属性にはしない = 押せば SWITCH TO RADIO が出る) */
.rf-recoff, .rf-recoff:hover { cursor: default; filter: grayscale(0.4) brightness(0.8); }

/* カセットベイの小さなキー(足元の左に ⇄ FLIP → ⏏ EJECT の並び。F4-4 で EJECT を見出しの右から移した。チューナー部の BAND キーも同じ形。F1-2)。#ece8e0 は factory-ui の .tbtn .g と同じ直値 */
.rf-baykey { cursor: pointer; border: none; height: 18px; padding: 0 9px; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-font-mono); font-size: 8px; letter-spacing: 0.16em; color: var(--f-text-mid); background-image: var(--f-btn-bg); box-shadow: var(--f-btn-shadow); }
.rf-baykey b { font-weight: 400; font-size: 10px; color: #ece8e0; }
.rf-baykey:active { box-shadow: inset 0 2px 5px rgba(0,0,0,0.45); transform: translateY(1px); }