.j3m-bar{
  --j3m-h-active: var(--j3m-h);
  --j3m-fs-active: var(--j3m-fs);
  --j3m-weight-active: var(--j3m-weight, 400);
  --j3m-style-active: var(--j3m-style, normal);

  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 50000;

  width: 100%;
  height: var(--j3m-h-active);
  line-height: var(--j3m-h-active);

  background: var(--j3m-bg);
  color: var(--j3m-color);

  font-size: var(--j3m-fs-active);
  font-weight: var(--j3m-weight-active, 400);
  font-style: var(--j3m-style-active, normal);

  overflow: hidden;
  user-select: none;

  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: visible;
  -webkit-backface-visibility: visible;

  display: flex;
  opacity: 1;}


.j3m-inner{height:100%; overflow:hidden; width:100%; display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-width:0;}

.j3m-link{display:block; height:100%; width:100%; flex:1 1 auto; min-width:0; color:inherit; text-decoration:none;}
.j3m-link.is-disabled{pointer-events:none; cursor:default;}

.j3m-track{position:relative; height:100%; width:100%; overflow:hidden; display:block;}

.j3m-text{display:inline-block; padding:0 24px; white-space:nowrap; font-weight:var(--j3m-weight-active); font-style:var(--j3m-style-active); line-height:var(--j3m-h-active); font-size:var(--j3m-fs-active); will-change:transform; animation:none;}

.j3m-text.is-fading{opacity:0;}

.j3m-bar[data-pause="1"]:hover .j3m-text{
  animation-play-state: paused;
}

.j3m-close{
  position:absolute;
  right:8px;
  top:50%;
  transform: translateY(-50%);
  height: calc(var(--j3m-h-active) - 10px);
  width: calc(var(--j3m-h-active) - 10px);
  line-height: calc(var(--j3m-h-active) - 10px);
  border:0;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: inherit;
  cursor: pointer;
}
.j3m-close:hover{background: rgba(255,255,255,.25);}


/* 垂直（上下） */
.j3m-bar[data-axis="vertical"] .j3m-text{
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  padding: 0 16px;
}
/* 停留模式：使用 transition 控制進出場 */
.j3m-bar[data-mode="dwell"] .j3m-text{
  animation: none !important;
}

/* Anti-flicker: GPU transform + font smoothing (Chrome/Safari 常見文字微閃) */
.j3m-text{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.j3m-bar[data-mode="dwell"] .j3m-text{opacity:0;}

@media (max-width: 767px){
  .j3m-bar{
    --j3m-h-active: var(--j3m-h-m);
    --j3m-fs-active: var(--j3m-fs-m);
    --j3m-weight-active: var(--j3m-weight-m);
    --j3m-style-active: var(--j3m-style-m);
  }
}


/* 手機版：開啟左側/抽屜選單時，避免跑馬燈遮擋選單頂部 */


/* 讓手機抽屜/彈出層永遠蓋過跑馬燈（不用偵測也不會遮到選單） */
/* v1.3.3：手機抽屜/彈出層永遠蓋過跑馬燈（不用偵測、不隱藏） */
/* v1.3.4: when bar is relocated into header */
.j3m-bar.j3m-in-header{
  margin: 0 !important;
}


/* v1.3.5: shift sticky/fixed headers down by marquee height (no body push) */
:root{ --j3m-top-offset: 0px; }

.journal-header-sticky,
.journal-header--sticky,
.journal-header.fixed,
.header.fixed,
#header.fixed,
#header.header-fixed,
.header-fixed,
.mobile-header.fixed,
#mobile-header.fixed{
  top: var(--j3m-top-offset) !important;
}


/* v1.3.6 anti-ghosting / jitter mitigation (mobile GPUs) */
.j3m-track{
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.j3m-text{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  text-rendering: geometricPrecision;
}


/* Keep mobile drawers/menus above marquee (no detection needed) */
.j-mobile-menu, .mobile-menu, #mobile-menu,
.j-drawer, .drawer, .j-offcanvas, .offcanvas, .side-menu, .nav-panel,
.journal-popup, .j-popup, .modal, .dropdown-menu{
  z-index: 1000001 !important;
}
.offcanvas-backdrop.show, .modal-backdrop.show, .drawer-backdrop.show{
  z-index: 1000000 !important;
}

/* v1.3.9 anti-ghosting / jitter mitigation (mobile GPUs) */
.j3m-track{
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.j3m-text{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  text-rendering: geometricPrecision;
}

:root{ --j3m-bar-h: 0px; }

/* v1.4.0: header shifted down to avoid overlap */
.j3m-shifted-header{
  /* top is set inline by JS, keep priority */
}

/* v1.4.1: mobile embed into Journal3 Top Bar (no overlay) */
@media (max-width: 991px){
  .j3m-mobile-topbar .j3m-bar{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
  }
}

/* v1.4.2 center fixes (mobile topbar embed) */
.j3m-bar{
  justify-content: center;
}
.j3m-text{
  width: 100%;
  text-align: center;
}
@media (max-width: 991px){
  .j3m-mobile-topbar .j3m-bar{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ===========================
   v1.6.4.1 FINAL：移除舊版互相衝突的 Header/TopBar 收合邏輯，改用「固定高度佔位 + 僅調整 Sticky Header top」
   目標：
   - 不遮擋 Logo/Top Menu
   - 下滑不產生 layout jump，不震動、不鎖捲動
   =========================== */
:root{ --j3m-offset: 0px; }

/* 跑馬燈固定在頂部（由 JS 設定 --j3m-offset = bar 高度） */
.j3m-bar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  transform: translateZ(0);
  will-change: opacity;
  touch-action: pan-y;
  transition: opacity .18s ease;
}

/* 讓整個頁面內容往下推（避免初始就蓋住 Header） */
body.j3m-active{ padding-top: var(--j3m-offset) !important; }

/* 只在 Header 進入 Sticky/Fixed 狀態時才下推 top；避免一般狀態的 Header 被強制改 top 造成抖動 */
body.j3m-active .journal-header-sticky,
body.j3m-active .journal-header--sticky,
body.j3m-active .journal-header.is-sticky,
body.j3m-active .journal-header.sticky,
body.j3m-active .journal-header-default.journal-header-sticky,
body.j3m-active .journal-header-compact.journal-header-sticky,
body.j3m-active .mobile-header-sticky,
body.j3m-active .journal-mobile-header-sticky,
body.j3m-active .mobile-header.is-sticky,
body.j3m-active .mobile-header.sticky,
body.j3m-active .header-sticky,
body.j3m-active .sticky-header,
body.j3m-active .journal-top-menu-sticky,
body.j3m-active .journal-top-menu.is-sticky,
body.j3m-active .journal-top-menu.sticky,
body.j3m-active .journal-menu-sticky,
body.j3m-active .journal-menu.is-sticky,
body.j3m-active .journal-menu.sticky{
  top: var(--j3m-offset) !important;
  transition: none !important;
}

/* 文字置中保險 */
.j3m-inner, .j3m-link, .j3m-track{ width:100% !important; }
.j3m-track{ display:flex !important; align-items:center !important; justify-content:center !important; }
.j3m-text{ width:100% !important; text-align:center !important; }

/* 下滑隱藏：只改透明度，不改高度/佔位，避免 header/top menu 抖動與捲動鎖死 */
.j3m-bar.j3m-hide-scroll{
  opacity: 0;
  pointer-events: none;
}


/* ===== v1.6.6 hotfix: force true viewport-top positioning across iOS Safari / 일부 PC ===== */
.j3m-bar{
  /* Always pin to the visual viewport top (do NOT use top: env(...) which can push it down on iOS) */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  /* Respect iOS safe-area without moving the bar away from the top */
  padding-top: env(safe-area-inset-top) !important;
  height: calc(var(--j3m-h-active, var(--j3m-h, 32px)) + env(safe-area-inset-top)) !important;
  box-sizing: border-box !important;

  /* Keep above Journal3 headers/overlays */
  z-index: 2147483000 !important;

  /* Reduce sub-pixel flicker while scrolling */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
}