/* 현재 미션 패널 (좌측 상단, HUD 아래). 맵 이미지 안에 얹힌다.
   화면에 있던 MAP-UI-01 코드 표기는 발주처 요청 2026-09-08 로 뺐다. */
/* 맵 무대가 아니라 화면(.stage-wrap) 기준으로 놓인다.
   무대는 화면보다 크게 잡혀 잘리므로 그 안에 두면 화면 밖으로 나간다. */
/* 좌측 패널 줄. 미션 가이드와 조작법을 위아래로 이어 붙인다.
   화면 높이의 % 로 각각 놓으면 창이 낮을 때 아래 패널이 위 패널과 겹친다. */
.mission-guide-col {
  /* HUD(top 1.6% + 높이 121) 바로 아래 16px. 화면 % 로 잡으면 창이 낮을 때
     HUD 밑으로 파고들어 제목이 가려졌다(2026-09-09 UI 1.5배 확대 후 재발). */
  position: absolute; top: calc(1.6% + 137px);
  left: 1.6%;                     /* HUD 왼쪽 끝과 같게 */
  width: 26%; min-width: 360px; max-width: 450px; z-index: 9;
  display: flex; flex-direction: column; gap: 15px;
  pointer-events: none;
}

/* 크기 확대(발주처 요청 2026-09-08 슬라이드 13, 2026-09-09 사용자 지시로 1.5배) */
.mission-guide {
  position: static; width: 100%;
  padding: 21px 22px 22px;
  border: 1px solid var(--gs-line); border-radius: 22px;
  background: linear-gradient(150deg, #ffffffe6, #fffffff2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px #2a23202d;
  color: var(--gs-text); pointer-events: none;
}
.mg__title { font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.mg__sub { margin-top: 6px; color: var(--gs-muted); font-size: 20px; line-height: 1.35; }
.mg__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 21px 0 24px; }
.mg__tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px 9px 10px; border: 1px solid; border-radius: 999px;
  background: #f4f1ee99; font-size: 22px; font-weight: 800; white-space: nowrap;
}
.mg__tag b { color: #1f2429; font-weight: 800; }
.mg__timer-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mg__timer-row span { color: var(--gs-muted); font-size: 18px; }
.mg__time { font-size: 22px; font-weight: 800; color: var(--gs-cyan-soft); font-variant-numeric: tabular-nums; }
.mg__bar { height: 13px; border-radius: 99px; overflow: hidden; background: #1f24290c; }
.mg__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e9002d, #ff7a01); transition: width .2s linear; }

/* 미션 유형 아이콘도 함께 키운다(발주처 요청 0908 슬라이드 13) */
.mg__tag-icon { width: 42px; height: 42px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 4px #2a232026); }

.mg__note { margin-top: 9px; color: var(--gs-muted); font-size: 17px; line-height: 1.35; }

/* 조작법 패널(발주처 요청 2026-09-08 슬라이드 13·14). 가이드 바로 아래에 이어진다. */
.mg-ctrl__row {
  margin-top: 15px; font-size: 21px; color: var(--gs-text); font-weight: 600;
}