/* demo-frame.css ― aiojt 共通DEMOフレーム（topbar / footbar）
   全DEMOモジュール（EC/不動産/飲食/建築/会計）＋本体/demo で共有する
   「aiojtプラットフォームへの帰属・帰り道」を統一。各ブランドの世界観
   （ヘッダー/ナビ/配色）には干渉せず、最上部の細いバーと最下部の一行のみを担う。
   配色は既存4モジュールの topbar（黒地・小さめ文字）を踏襲。
   トークン参照可（tokens.css の --font-mono 等）。ホストCSS非依存で自己完結。 */

/* ── 上部フレーム（帰属＋戻る） ── */
.ajt-topbar{
  background:#14110e;
  color:#c9c2b6;
  border-bottom:1px solid rgba(255,255,255,.06);
  -webkit-font-smoothing:antialiased;
  position:relative;
  z-index:70;
}
.ajt-topbar__in{
  max-width:1200px;
  margin:0 auto;
  padding:.42rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  font-size:.78rem;
  line-height:1.3;
}
.ajt-topbar__ctx{
  font-family:"DM Mono","SFMono-Regular","Consolas",ui-monospace,monospace;
  letter-spacing:.04em;
  color:#8f887c;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ajt-topbar__ctx b{ color:#cfc7ba; font-weight:600; }
.ajt-topbar__back{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  color:#eee7db;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
}
.ajt-topbar__back:hover{ color:#fff; }
@media (max-width:560px){
  .ajt-topbar__ctx{ font-size:.72rem; }
  .ajt-topbar__back{ font-size:.74rem; }
}

/* ── 下部フレーム（帰属の一行＋戻る） ── */
.ajt-footbar{
  background:#14110e;
  color:#9d968a;
  border-top:1px solid rgba(255,255,255,.06);
  -webkit-font-smoothing:antialiased;
}
.ajt-footbar__in{
  max-width:1200px;
  margin:0 auto;
  padding:.7rem 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem 1rem;
  flex-wrap:wrap;
  font-size:.76rem;
  text-align:center;
  line-height:1.5;
}
.ajt-footbar__txt{ color:#8f887c; }
.ajt-footbar__back{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  color:#e4ddd0;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.ajt-footbar__back:hover{ color:#fff; }
.ajt-footbar__sep{ color:#4f4a41; }

@media print{
  .ajt-topbar,.ajt-footbar{ display:none !important; }
}