.mobility-lab {
  width: min(1180px, calc(100% - 32px));
  margin: 80px auto;
  padding: clamp(24px, 5vw, 58px);
  overflow: hidden;
  border-radius: 34px;
  color: #f9f4e8;
  background:
    radial-gradient(circle at 88% 12%, rgba(240, 166, 41, 0.35), transparent 18rem),
    linear-gradient(145deg, #0f6a4f, #073c38);
}

.mobility-lab__intro { display: grid; max-width: 820px; gap: 10px; }
.mobility-lab__intro h2 { margin: 0; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 0.94; }
.mobility-lab__intro > p { max-width: 720px; color: rgba(255, 255, 255, 0.74); line-height: 1.65; }
.mobility-lab__status { width: fit-content; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #ffd27a; font-size: 0.72rem; font-weight: 900; }

.mobility-planner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  margin: 32px 0 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: rgba(3, 39, 34, 0.54);
}

.mobility-planner label { position: relative; display: grid; gap: 7px; color: rgba(255, 255, 255, 0.72); font-size: 0.68rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; }
.mobility-planner select,
.mobility-planner input,
.mobility-planner button { min-height: 48px; border: 0; border-radius: 13px; font: inherit; }
.mobility-planner select,
.mobility-planner input { width: 100%; padding: 10px 12px; background: #fffdf5; color: #10271f; }
.mobility-planner label > span { position: absolute; right: 10px; bottom: 15px; color: rgba(16, 39, 31, 0.55); font-size: 0.7rem; }
.mobility-planner button { align-self: end; padding: 10px 18px; background: #f0a629; color: #10271f; font-weight: 950; cursor: pointer; }

.mobility-result { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mobility-result__card { display: grid; min-height: 150px; gap: 7px; align-content: start; padding: 18px; border-radius: 18px; background: #fffdf5; color: #10271f; }
.mobility-result__card span { color: #0f6a4f; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.mobility-result__card strong { font-size: 1.2rem; }
.mobility-result__card small { color: rgba(16, 39, 31, 0.64); line-height: 1.45; }
.mobility-result__warning { grid-column: 1 / -1; margin: 0; padding: 12px; border-radius: 12px; background: #fff0e8; color: #9b2f21; font-weight: 800; }
.mobility-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 28px 0 0; padding: 0; overflow: hidden; border-radius: 18px; list-style: none; background: rgba(255, 255, 255, 0.16); }
.mobility-flow li { display: grid; min-height: 130px; gap: 5px; align-content: start; padding: 15px; background: rgba(3, 39, 34, 0.82); }
.mobility-flow li span { color: #f0a629; font-weight: 950; }
.mobility-flow li small { color: rgba(255, 255, 255, 0.62); line-height: 1.4; }
.mobility-lab__notice { margin: 18px 0 0; color: rgba(255, 255, 255, 0.62); font-size: 0.72rem; }
.mobility-planner :focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }

@media (max-width: 960px) {
  .mobility-planner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobility-planner button { grid-column: 1 / -1; }
  .mobility-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobility-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mobility-lab { width: calc(100% - 20px); margin: 46px auto; padding: 24px 15px; border-radius: 24px; }
  .mobility-planner,
  .mobility-result,
  .mobility-flow { grid-template-columns: 1fr; }
  .mobility-planner button,
  .mobility-result__warning { grid-column: auto; }
  .mobility-flow li { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) { .mobility-lab * { scroll-behavior: auto !important; transition: none !important; } }