/* screens/mobile-trade.css — フクロウ証券 縦型トレード（9:16） */
.sp-stage--mobile-trade .sp-stage__canvas {
  background: #06080d;
  color: #e6ecef;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "SF Pro Text", sans-serif;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mt-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mt-phone {
  width: min(100%, calc(100vh * 9 / 16));
  height: min(100%, calc(100vw * 16 / 9));
  max-width: 480px;
  aspect-ratio: 9 / 16;
  background: #0d1218;
  border: 1px solid #1a2028;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}

.mt-topbar {
  padding: 14px 18px 6px;
  display: flex; justify-content: space-between; align-items: center;
  background: #10171f;
  font-size: 11px;
  color: #7b8996;
  border-bottom: 1px solid #1a2028;
}
.mt-topbar__brand { color: #e6ecef; font-weight: 700; letter-spacing: .06em; }
.mt-topbar__account { font-variant-numeric: tabular-nums; }

.mt-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px 14px;
  background: #10171f;
  font-size: 12px;
  color: #56606a;
}
.mt-tabs__it {
  text-align: center;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.mt-tabs__it.is-active { color: #e6ecef; border-bottom-color: #ffc23a; }

.mt-ticker {
  padding: 20px 20px 12px;
  text-align: center;
}
.mt-ticker__row {
  display: flex; justify-content: center; align-items: baseline; gap: 10px;
  color: #7b8996; font-size: 13px;
}
.mt-ticker__name { color: #e6ecef; font-weight: 700; letter-spacing: .04em; font-size: 15px; }
.mt-ticker__code { font-variant-numeric: tabular-nums; }
.mt-ticker__price {
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 700;
  color: #e6ecef;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  transition: color 0.25s;
}
.mt-ticker__price.up   { color: #4ade80; }
.mt-ticker__price.down { color: #ff4d4d; }
.mt-ticker__price.is-flash { animation: mt-flash 0.35s ease-out; }
@keyframes mt-flash { 0%{transform:scale(1.08);} 100%{transform:scale(1);} }

.mt-ticker__amt {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.mt-ticker__amt.up   { color: #4ade80; text-shadow: 0 0 20px rgba(74, 222, 128, .35); }
.mt-ticker__amt.down { color: #ff4d4d; text-shadow: 0 0 20px rgba(255, 77, 77, .4); }
.mt-ticker__pct { font-size: 15px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.mt-ticker__pct.up   { color: #4ade80; }
.mt-ticker__pct.down { color: #ff4d4d; }

.mt-chart {
  padding: 8px 12px 6px;
  min-height: 0;
}
.mt-chart svg { width: 100%; height: 100%; display: block; }

.mt-actions {
  padding: 10px 18px;
  border-top: 1px solid #1a2028;
  font-size: 12px;
}
.mt-actions__row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  color: #a0acb7;
}
.mt-actions__row .num { font-variant-numeric: tabular-nums; color: #e6ecef; }

.mt-nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 10px 0 14px;
  background: #06080d;
  border-top: 1px solid #1a2028;
  color: #56606a;
  font-size: 11px;
  text-align: center;
}
.mt-nav .is-active { color: #ffc23a; }