/* 羽田空港 出発案内サイネージ — 1920x1080 固定ステージを画面に合わせて縮尺 */

:root {
  --bg: #05080f;            /* 画面全体 */
  --row-a: #0a1120;         /* 行の縞 (濃) */
  --row-b: #101a2e;         /* 行の縞 (淡) */
  --fg: #eef3fb;            /* 白文字 */
  --fg-dim: #cdd8ea;        /* 第二言語 */
  --caption: #aebfdd;       /* 列見出し */
  --green: #35c948;         /* 出発ヘッダ */
  --yellow: #ffd028;        /* 備考・変更時刻 */
  --chip-bg: #f4f6f8;       /* チェックインカウンターの箱 */
  --chip-fg: #10151d;
  --line-h: 56px;           /* 1 行の高さ (JS が上書き) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP",
               "Noto Sans KR", Meiryo, "Malgun Gothic", sans-serif;
}

#stage {
  position: absolute;
  width: 1920px; height: 1080px;
  left: 50%; top: 50%;
  transform-origin: center center;
  background: var(--bg);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  padding: 18px 26px 0;
}

/* ---------------- ヘッダ ---------------- */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 86px;
  padding: 0 6px;
}

#title { display: flex; align-items: center; gap: 22px; }

#plane-badge { width: 64px; height: 64px; }
.badge-frame { fill: #06240f; stroke: var(--green); stroke-width: 4; }
.badge-plane { fill: var(--green); }

#title-ja {
  font-size: 54px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 10px;
}
#title-l2 {
  font-size: 44px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 4px;
}

#clock {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: 4px;
}
#clock.stale { color: #d8b23c; }
#clock .colon-off { visibility: hidden; }

/* ---------------- 列見出し ---------------- */

#captions {
  display: grid;
  grid-template-columns: var(--grid-cols);
  align-items: center;
  height: 62px;
  border-top: 2px solid #223050;
  border-bottom: 2px solid #223050;
  background: #0c1322;
}

.caption { padding: 0 8px; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.caption .cj { font-size: 23px; color: var(--caption); font-weight: 600; }
.caption .cl2 { font-size: 19px; color: #8d9fc2; font-weight: 500; }
.caption.center { text-align: center; }
.caption.small .cj { font-size: 15px; }   /* 「チェックイン・搭乗口」など長い見出し用 */
.caption.small .cl2 { font-size: 13px; }

/* ---------------- 本体 ---------------- */

#body { flex: 1 1 auto; overflow: hidden; }

.row {
  display: grid;
  grid-template-columns: var(--grid-cols);
  align-items: center;
}
.row:nth-child(even) { background: var(--row-a); }
.row:nth-child(odd)  { background: var(--row-b); }

.c { padding: 0 8px; white-space: nowrap; overflow: hidden; }
.squeeze { display: inline-flex; align-items: center; transform-origin: left center; }

.c.sched { font-size: 34px; font-weight: 600; }
.c.change { font-size: 34px; font-weight: 600; color: var(--yellow); }

.c.dest { font-size: 30px; font-weight: 600; }
.c.dest .l2 { font-size: 26px; color: var(--fg-dim); margin-left: 16px; font-weight: 500; }
.c.dest .via { font-size: 22px; color: var(--fg-dim); margin-left: 10px; }

.c.flights { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.fl-line { display: flex; align-items: center; height: var(--line-h); }
.fl {
  display: flex; align-items: center;
  width: 50%;
  gap: 12px;
}
.fl .logo {
  width: 74px; height: 36px;
  background: #fff;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
}
.fl .logo img { max-width: 68px; max-height: 32px; object-fit: contain; }
.fl .num { font-size: 31px; font-weight: 600; }

.c.checkin { text-align: center; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 6px;
  margin: 0 3px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: 4px;
  font-size: 28px;
  font-weight: 700;
}
.chip.more { background: transparent; color: var(--fg-dim); font-size: 24px; min-width: 0; }
.chip.gate {
  background: transparent;
  color: var(--fg);
  border: 2px solid #5b6f96;
  font-weight: 600;
}

.c.remark {
  color: var(--yellow);
  font-size: 27px;
  font-weight: 600;
  display: flex; align-items: center;
}
.c.remark .bar {
  flex: none;
  width: 8px; height: 34px;
  background: var(--yellow);
  margin-right: 14px;
}
.c.remark .l2 { font-size: 24px; margin-left: 14px; opacity: .92; font-weight: 500; }

/* ---------------- テロップ ---------------- */

#ticker {
  height: 62px;
  margin: 6px -26px 0;
  padding: 0 26px;
  background: #01040a;
  border-top: 2px solid #1a2438;
  display: flex;
  align-items: center;
  color: var(--yellow);
  font-size: 30px;
  font-weight: 600;
}
.ticker-arrow { flex: none; margin-right: 18px; font-size: 24px; }
.ticker-clip { flex: 1 1 auto; overflow: hidden; position: relative; height: 100%; }
#ticker-text {
  position: absolute;
  white-space: nowrap;
  line-height: 62px;
  will-change: transform;
}