:root{--gap:0px;--ticker-h:10%;}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; color: #fff; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; }

.app { position: relative; width: 100%; height: 100%; background: #000; }

/* 背景動画（両面に跨って表示）。重要情報はオーバーレイで。 */
#signageVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* 2面レイアウトの枠（前面オーバーレイ） */
.dualscreen-overlay { position:absolute; inset:0; display:flex; flex-direction:row; pointer-events:none; column-gap: 0; }

/* 左右の表示領域。等幅。 */
.pane { position: relative; flex: 1 1 0; border: none; }

/* 中央のサッシ（黒帯）。JSから px 指定で幅を変更可能。 */
.gutter { width: var(--gap); background: transparent; flex: 0 0 auto; }

/* 右側：L字の縦棒として扱う情報パネル（右pane内の右上固定） */
.info-panel {
  position: absolute;
  top: 0; right: 0;
  width: 38%;
  height: 62%;
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.68), rgba(0,0,0,0.28));
  border-left: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(2px);
}

/* ブランド表示 */
.brand-block {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  display: inline-block;
}

/* 時計ブロック：縦レイアウト */
.clock-block {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.06);
}
.clock-digital { display: flex; flex-direction: column; align-items: center; }
.clock-time { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.clock-date { margin-top: 4px; font-size: 1.1rem; opacity: 0.9; }

/* 天気：少し大きめ */
.weather-block {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.weather-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.weather-location { font-size: 1.1rem; font-weight: 700; }
.weather-updated { font-size: 0.9rem; opacity: 0.85; }

.weather-current { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.weather-icon { font-size: 2.2rem; line-height: 1; }
.weather-main-wrap { display: flex; flex-direction: column; gap: 3px; }
.weather-main { font-size: 1.1rem; opacity: 0.95; }
.weather-temp { font-size: 1.8rem; font-weight: 800; }
.weather-pop  { font-size: 0.95rem; opacity: 0.9; }

.weather-forecast { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.weather-day { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 8px; }
.wf-label { font-size: 0.95rem; opacity: 0.95; font-weight: 600; }
.wf-values { font-size: 1.05rem; font-weight: 700; }

/* 下部テロップ（横棒） */
.ticker-block {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--ticker-h); padding: 8px 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.45));
  overflow: hidden;
}
.ticker-inner {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  will-change: transform;
  display: inline-flex;
  gap: 0px; /* シームレス間隔 */
  animation: marquee 40s linear infinite; /* 速度：ゆっくりに */
  padding-left: 100%;
}
.ticker-seq { font-size: 1.35rem; line-height: 1.2; }
@keyframes marquee {
  0%   { transform: translate(0, -50%); }
  100% { transform: translate(-100%, -50%); }
}

/* ガイド（必要に応じてONにする） */
.pane.debug::after {
  content: "SAFE ZONE";
  position: absolute; inset: 6%;
  border: 1px dashed rgba(255,255,255,0.3);
  pointer-events: none;
}


/* Left pane content fits top-left and leaves space for bottom ticker */
.left-content{ position:absolute; inset:0 0 var(--ticker-h) 0; }
#signageVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; pointer-events:none; }
/* page background stays black but the "gap" has no colored gutter anymore */
html, body { background:#000; }



/* L-shape video frame: fills top-left rect exactly (right & bottom set by JS) */
#video-frame{
  position:absolute;
  top:0; left:0; right:0; bottom:0; /* JS will set right/bottom to panel/ticker sizes */
  z-index: 0; /* behind overlays */
  overflow:hidden;
}
#video-frame > video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; background:#000;
  pointer-events:none;
}
/* Overlays stay above */
.dualscreen-overlay{ position:absolute; inset:0; z-index: 1; }