/* =========================================================
 * シミュレーター外枠（操作卓）
 * ========================================================= */
:root {
  --bg: #111417;
  --bg2: #171B1F;
  --rule: #2B3137;
  --rule2: #3A424A;
  --text: #E3E6E8;
  --muted: #88929B;
  --accent: #1392CB;      /* 素材のヘッダー下線の青 */
  --accent-deep: #0B4F73;
  --ui: 'BIZ UDPGothic', 'BIZ UDPゴシック', sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 14px; line-height: 1.5; min-height: 100vh; }
button, select, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }

/* ---------- 上部 ---------- */
.top {
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
  padding: 18px 28px 14px; border-bottom: 1px solid var(--rule);
}
.top h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.top h1 span { font-weight: 400; color: var(--muted); margin-left: .4em; font-size: 15px; letter-spacing: .1em; }
.sect { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.sect b { color: var(--text); font-weight: 700; }
.sect i { display: inline-block; width: 46px; height: 3px; background: var(--accent); }
.sect-k { font-size: 12px; letter-spacing: .08em; }

/* ---------- 全体配置 ---------- */
.wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: calc(100vh - 62px); }
.stage { padding: 26px 32px 28px 28px; min-width: 0; }
.panel { border-left: 1px solid var(--rule); padding: 8px 24px 28px; background: var(--bg2); }

/* ---------- LCD 枠 ---------- */
.bezel { background: #050607; padding: 14px; border-radius: 4px; border: 1px solid #23282D; max-width: 1180px; }
.screen { position: relative; width: 100%; aspect-ratio: 860 / 484; overflow: hidden; background: #fff; }

/* ---------- 運転操作 ---------- */
.transport { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; max-width: 1180px; }
.tbtns { display: flex; gap: 0; }
.tb {
  height: 44px; min-width: 52px; padding: 0 14px; border: 1px solid var(--rule2); background: #1B2025;
  cursor: pointer; font-size: 13px; letter-spacing: -.12em;
}
.tb + .tb { border-left: none; }
.tb:hover { background: #222930; }
.tb.play { min-width: 72px; font-size: 16px; background: var(--accent); border-color: var(--accent); color: #fff; letter-spacing: 0; }
.tb.play:hover { background: #18A2E0; }
.tb.txt { letter-spacing: .02em; font-size: 13px; color: var(--muted); }
.tb:focus-visible, .seg button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .strip-st:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.status { display: flex; gap: 22px; margin: 0; flex: 1; min-width: 280px; }
.status div { display: flex; flex-direction: column; }
.status .grow { flex: 1; }
.status dt { font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.status dd { margin: 0; font-size: 15px; white-space: nowrap; }

.progress { height: 3px; background: var(--rule); margin-top: 14px; max-width: 1180px; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ---------- ミニ路線図 ---------- */
.strip-wrap { max-width: 1180px; margin-top: 26px; padding: 0 22px; }
.route-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.strip { position: relative; height: 150px; }
.strip.dense { height: 172px; }
.strip.dense .strip-st span { font-size: 11px; letter-spacing: 0; }
.strip.dense .strip-st i { width: 9px; height: 9px; margin-top: 7.5px; }
.strip-line { position: absolute; left: 0; right: 0; top: 14px; height: 4px; background: #31383F; }
.strip-st {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 2px; background: none; border: none; cursor: default; color: var(--muted);
}
.strip-st i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #5D6770; background: var(--bg); margin-top: 6px; }
.strip-st.stop { color: var(--text); }
.strip-st.stop i { border-color: #fff; background: #fff; }
.strip-st span { writing-mode: vertical-rl; font-size: 13px; letter-spacing: .06em; line-height: 1; }
.strip-st.jump { cursor: pointer; }
.strip-st.jump:hover span { color: var(--accent); }
.strip-train {
  position: absolute; top: 4px; width: 0; height: 0; transform: translateX(-50%);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid var(--accent);
  transition: left .2s linear; pointer-events: none;
}
.strip-train.up { border-left: none; border-right: 18px solid var(--accent); }
.endnote { margin: 4px 0 0; color: #E8B04B; font-size: 13px; }

/* ---------- 操作パネル ---------- */
.panel h2 {
  margin: 26px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--muted);
  display: flex; align-items: center; gap: 12px;
}
.panel h2::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 10px; }
.row.top { align-items: start; }
.row.top .lbl { padding-top: 8px; }
.lbl { font-size: 12px; color: var(--muted); }

.seg { display: flex; }
.seg button {
  flex: 1; min-height: 38px; padding: 4px 6px; border: 1px solid var(--rule2); background: transparent;
  cursor: pointer; font-size: 13px; line-height: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.seg button + button { border-left: none; }
.seg button small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.seg button:hover { background: #20262C; }
.seg button[aria-pressed="true"] { background: var(--accent-deep); border-color: var(--accent); color: #fff; }
.seg button[aria-pressed="true"] small { color: #BFE3F5; }
.seg button[aria-pressed="true"] + button { border-left: none; }
.seg.types { display: grid; grid-template-columns: repeat(3, 1fr); }
.seg.types button { flex-direction: row; gap: 4px; padding: 4px 2px; font-size: 12px; white-space: nowrap; letter-spacing: -.02em; border-left: none; border-top: none; }
.seg.types button:nth-child(3n+1) { border-left: 1px solid var(--rule2); }
.seg.types button:nth-child(-n+3) { border-top: 1px solid var(--rule2); }
.seg button:disabled { color: #4A535B; cursor: not-allowed; background: transparent; }
.seg button:disabled .sw { opacity: .3; }
.sw.hollow { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.sw.semi.hollow { color: #2FA03D; }
.sw.exp.hollow { color: #E00000; }
.sw { width: 10px; height: 10px; display: inline-block; }
.sw.local { background: #0039A0; outline: 1px solid #4472C4; }
.sw.semi { background: #20882C; }
.sw.exp { background: #E00000; }
.sw.rapid { background: #FF7A0A; }
.speed { width: 250px; }
.speed button { min-height: 36px; font-family: var(--mono); }

select, input[type="number"], textarea {
  width: 100%; background: #0F1215; border: 1px solid var(--rule2); padding: 8px 10px; border-radius: 0;
}
select { height: 38px; padding: 0 8px; cursor: pointer; }
textarea { resize: vertical; min-height: 64px; font-size: 13px; }
.pair { display: flex; align-items: center; gap: 8px; }
.pair select { width: 84px; }
.pair input { width: 64px; height: 38px; font-family: var(--mono); }
.pair label, .pair span { font-size: 12px; color: var(--muted); white-space: nowrap; }

.note { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); line-height: 1.8; }
kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--rule2); padding: 0 5px; color: var(--text); }

@media (max-width: 1080px) {
  .wrap { grid-template-columns: 1fr; }
  .panel { border-left: none; border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .top { padding: 14px 16px 10px; }
  .stage { padding: 16px; }
  .panel { padding: 4px 16px 24px; }
  .bezel { padding: 6px; }
  .status { flex-wrap: wrap; }
  .strip-wrap { padding: 0 8px; }
  .strip-st span { font-size: 11px; }
}

/* 素材との比較用（?shot）：LCD だけを素材の書き出しと同じ倍率（1pt = 1.333px）で表示 */
body.shot { background: #FFFFB3; }
body.shot .top, body.shot .panel, body.shot .transport, body.shot .progress, body.shot .strip-wrap, body.shot .endnote { display: none; }
body.shot .wrap { display: block; min-height: 0; }
body.shot .stage { padding: 0; }
body.shot { overflow: hidden; }
body.shot .bezel { padding: 0; border: none; border-radius: 0; background: none; width: calc(100vw * 860 / 960); max-width: none; margin: calc(100vw * 20.7 / 960) 0 0 calc(100vw * 50 / 960); }