.panel-back {
  position: absolute; inset: 0;
  background: rgba(42,35,32,.20);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  --panel-scale: 1;
}
/* 위쪽에 다른 창이 있을 때 그 아래로 붙인다. */
.panel-back--reserve { align-items: flex-start; }
/* 아래쪽에 다른 창이 있을 때(튜토리얼 연습의 NPC 대사창) 그 위로 붙인다. */
.panel-back--reserve-bottom { align-items: flex-end; }
/* 줄어들 때(--panel-scale) 붙여 놓은 쪽 모서리를 기준으로 줄어야 한다.
   가운데 기준으로 줄이면 자리는 그대로인 채 크기만 작아져 위가 잘리고
   대사창과 사이가 벌어진다. */
.panel-back--reserve .panel { transform-origin: center top; }
.panel-back--reserve-bottom .panel { transform-origin: center bottom; }
/*
 * 미션 팝업 (발주처 요청 2026-09-08 슬라이드 22~32).
 *  1120x880 고정. 1920x1080 에서 좌우 400 · 상하 100 이 남는다.
 *  화면이 그보다 작으면(1366x768 노트북 등) 팝업 전체를 같은 비율로 줄인다.
 *  줄이는 쪽을 택한 이유: 안쪽 카드 크기가 전부 px 로 정해져 있어, 팝업만 줄이면
 *  내용이 잘리고 카드 규격도 어긋나기 때문이다. 비율은 missionPanel.js 가 잰다.
 */
.panel {
  width: 1120px; height: 880px; max-height: none;
  transform: scale(var(--panel-scale));
  transform-origin: center center;
  overflow: hidden;
  /* 제목 · 상황 · 질문 · 본문 · 하단 버튼줄. 본문만 남는 높이를 갖는다. */
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: linear-gradient(145deg, #ffffffd9, #ffffffe8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--gs-line);
  border-radius: 16px;
  color: var(--gs-text);
  box-shadow:
    0 28px 70px #2a232040;
  padding: 28px 36px 26px;
}
.panel__head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6ded9;
}
.panel__title { font-size: 26px; font-weight: 900; flex: 1; }
/* 제목 앞 "유형 난이도" 표기(발주처 요청 1). 난이도는 색과 글자를 함께 쓴다. */
.panel__type {
  display: inline-block; margin-right: 8px; font-size: 17px; font-weight: 800;
  color: var(--type-color); vertical-align: 3px;
}
.panel__diff {
  display: inline-block; margin-right: 10px; padding: 2px 9px;
  border-radius: 8px; font-size: 15px; font-weight: 900; vertical-align: 3px;
  border: 1px solid currentColor;
}
.panel__diff--hard { color: #e9002d; background: rgba(233, 0, 45, .10); }
.panel__diff--mid  { color: #d97706; background: rgba(217, 119, 6, .12); }
.panel__diff--easy { color: #15a34a; background: rgba(21, 163, 74, .12); }
.panel__close {
  border: 1px solid #d3c8c1; border-radius: 9px;
  background: #f0ebe7; color: #1f2429; cursor: pointer; width: 42px; height: 42px; font-size: 20px; font-weight: 900;
  box-shadow: none; transition: .15s;
}
.panel__close:hover { background: #f0ebe7; }
.panel__situation {
  color: var(--gs-muted);
  margin: 14px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--gs-line);
  border-radius: 8px;
  background: #faf7f5cc;
  font-size: 18px; line-height: 1.5;
}
.panel__prompt { margin: 10px 0 16px; font-weight: 900; font-size: 22px; line-height: 1.4; }
/*
 * 본문.
 *  항목 폭은 규격대로 1048px 다(팝업 1120 - 좌우 여백 36 x 2).
 *  그런데 본문 폭도 딱 1048 이라, 상황 설명이 길어 세로 스크롤이 생기면
 *  스크롤바가 폭을 먹어 가로 스크롤까지 따라 생겼다.
 *  본문만 좌우로 10px 씩 넓혀(음수 마진) 스크롤바가 들어갈 자리를 만들고,
 *  항목은 1048 로 고정해 가운데 둔다. 규격은 그대로면서 가로로 밀리지 않는다.
 */
.panel__body {
  position: relative; min-height: 0;
  margin: 0 -10px; padding: 0 10px;
  overflow-y: auto; overflow-x: hidden;
}
/* 규격 폭(1048)을 쓰는 것들. 본문이 넓어져도 항목 크기는 그대로다. */
.choices, .tray, .zones, .list, .slots, .tabs, .tray__head, .zones__arrow {
  width: 1048px; margin-left: auto; margin-right: auto;
}
/* 하단 줄(슬라이드 26): 높이 48px 고정. 왼쪽 배치 수 / 오른쪽 초기화·제출 */
.panel__foot { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 14px; }
/* 하단 왼쪽: 선택·배치 수(굵게) + 회색 보조 안내(발주처 0908 시안) */
.panel__count { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.panel__count-num { font-weight: 900; font-size: 18px; color: var(--gs-cyan-soft); }
.panel__count-hint { font-size: 15px; color: var(--gs-muted); font-weight: 600; }
.panel__foot-right { display: flex; align-items: center; gap: 10px; }
.panel__submit {
  border: 0; border-radius: 10px;
  background: linear-gradient(135deg,#e9002d,#ff7a01); color: #ffffff; font-weight: 800; font-size: 19px;
  height: 48px; padding: 0 32px; cursor: pointer; box-shadow: 0 10px 25px #c000263d; transition: .15s;
}
.panel__submit:hover { filter: brightness(1.08); }
/* 비활성 상태는 회색을 유지한다(발주처 지시). 다만 글자색은 .panel__submit 의 흰색을
   물려받아 회색 바탕에 흰 글자가 되므로 여기서 함께 정한다. opacity 로 한 번 더
   흐리게 하면 글자가 아예 안 읽혀 빼고, 색 자체를 흐린 값으로 둔다. */
.panel__submit:disabled { background: #e4e7ea; color: #8a8f96; cursor: not-allowed; box-shadow: none; }

/* ── 탐색형 (발주처 요청 2026-09-08 슬라이드 22) ─────────────
   선택지 336x220 을 3열 2행으로. 가로 간격 20 · 세로 간격 16.
   본문 폭 1048 = 336*3 + 20*2 로 팝업 안에 정확히 들어간다. */
.choices {
  display: grid; grid-template-columns: repeat(3, 336px);
  gap: 16px 20px; justify-content: center;
}
.choice {
  position: relative;
  width: 336px; height: 220px;
  color: #1f2429;
  border: 1px solid #e6ded9; border-radius: 9px;
  background: #faf7f5cc; padding: 38px 14px 14px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  /* 텍스트형: 문장을 카드 중앙에 두고 왼쪽 정렬. 20px 글자 · 28px 줄간격. */
  font-size: 20px; line-height: 28px; font-weight: 700; text-align: center;
  box-shadow: 0 28px 70px #2a23203a;
}
.choice--on {
  border-color: var(--type-color);
  color: #1f2429;
  background: color-mix(in srgb, var(--type-color), transparent 88%);
  box-shadow: inset 0 0 0 1px var(--type-color), 0 0 17px color-mix(in srgb, var(--type-color), transparent 82%);
}
/* 번호는 카드 왼쪽 위 모서리에 작게(발주처 0908 시안). 내용과 겹치지 않게 띄워 둔다. */
.choice__no {
  position: absolute; left: 10px; top: 8px;
  color: var(--gs-muted);
  width: 24px; height: 22px;
  border-radius: 6px; background: #1f242908;
  font-size: 14px; font-weight: 800; line-height: 22px; text-align: center;
}
/* 오른쪽 위 선택 표시. 탐색형은 여러 개를 고르므로 네모다. */
.choice__mark {
  position: absolute; right: 10px; top: 8px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid #d3c8c1; background: #ffffff;
}
.choice--on .choice__mark {
  border-color: var(--type-color); background: var(--type-color);
  box-shadow: inset 0 0 0 3px #ffffff;
}
/* 최대 5줄(슬라이드 22).
   줄 수를 CSS 로 잘라내지 않는다. 발주처 요청 2026-09-08 슬라이드 33 이
   "핵심 정보를 말줄임표로 생략하거나 글자를 개별 축소하지 않는다" 고 정했다.
   넘치는 문구는 문구 자체를 다듬어야 하고, 그 대상은 tools/check-linebreaks.py 가 찾는다.
   여기서는 낱말 중간에서 끊기지 않게만 한다. */
.choice__label { word-break: keep-all; }
/* 낱말형 선택지(사용자 지시 2026-09-09). 문장형은 왼쪽 정렬 그대로다.
   어느 것이 낱말인지는 js/ui/typeA.js 의 isWordLike 가 고른다. */
.choice--word { text-align: center; }
/* 그림 선택지(발주처 요청 17 / 0908 슬라이드 22): 위 60% 그림, 아래 1~2줄 설명. */
.choice--img { padding: 34px 12px 12px; align-items: center; }
.choice__img {
  display: block; height: 60%; width: auto; max-width: 100%; object-fit: contain;
  margin: 0 auto 6px; pointer-events: none;
}
.choice--img .choice__label { font-size: 16px; line-height: 22px; text-align: center; }
/* 확대 보기 버튼과 큰 그림(슬라이드 22) */
/* 선택 표시가 오른쪽 위를 쓰므로 확대 버튼은 오른쪽 아래에 둔다. */
.choice__zoom {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #d3c8c1; background: #ffffffd9; color: #1f2429;
  font-family: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.choice__zoom:hover { background: #f0ebe7; border-color: var(--type-color); }
.zoom-back {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(42,35,32,.55); cursor: zoom-out;
}
.zoom-back img {
  max-width: 80%; max-height: 90%; object-fit: contain;
  border-radius: 12px; background: #ffffff; padding: 12px;
}

/* ── 판단형 (발주처 요청 2026-09-08 슬라이드 30) ─────────────
   가로로 긴 선택지 1048x112 를 세로로 나열. 간격 16.
   왼쪽 번호 · 가운데 문장(왼쪽 정렬·세로 중앙) · 오른쪽 단일 선택 표시.
   한 줄이든 두 줄이든 높이가 같다. */
.list { display: flex; flex-direction: column; gap: 16px; }
.list__item {
  height: 112px; padding: 0 20px 0 16px;
  display: flex; align-items: center; gap: 16px;
  color: #1f2429;
  border: 1px solid #e6ded9; border-radius: 9px;
  background: #faf7f5cc; cursor: pointer; box-shadow: 0 28px 70px #2a23203a; overflow: hidden;
  font-size: 20px; line-height: 28px; font-weight: 700;
}
.list__text { flex: 1; word-break: keep-all; }
/* 판단형 선택지 번호·내용 1.5배(발주처 0910 S6). 신고·보고형(.list--report)은 제외. */
.list:not(.list--report) .list__item { font-size: 24px; line-height: 34px; }
.list:not(.list--report) .list__no { font-size: 18px; width: 30px; }
.list__mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #d3c8c1; background: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
/* 고르면 색이 차고 체크가 들어간다(0908 시안) */
.list__item--on .list__mark { border-color: var(--type-color); background: var(--type-color); }
.list__item--on .list__mark::after {
  content: '\2713'; color: #ffffff; font-size: 15px; font-weight: 900; line-height: 1;
}
/* 탐색형 선택 표시(네모)도 같은 방식으로 체크를 넣는다 */
.choice__mark { display: flex; align-items: center; justify-content: center; }
.choice--on .choice__mark { box-shadow: none; }
.choice--on .choice__mark::after {
  content: '\2713'; color: #ffffff; font-size: 15px; font-weight: 900; line-height: 1;
}
/* 신고·보고형은 선택지 높이가 96(슬라이드 32) · 간격 12 */
.list--report { gap: 12px; }
.list--report .list__item { height: 96px; }
.list__item--on {
  background: #fff1f3;
  border-color: var(--gs-cyan);
  color: #1f2429;
  box-shadow: inset 0 0 0 1px var(--gs-cyan), 0 0 16px #e9002d33;
}
/* 번호는 시안대로 테두리 없는 회색 두 자리다(01~04). 문장이 주인공이라 눈에 덜 띈다. */
.list__no {
  color: var(--gs-muted);
  flex: none; display: inline-block; width: 26px; margin: 0;
  font-size: 15px; font-weight: 800; text-align: center;
}

/* ── 순서형 슬롯 (발주처 요청 2026-09-08 슬라이드 31) ─────────
   1048x64, 세로 간격 12. 왼쪽에 1~4 번호를 고정한다. */
.slots { display: flex; flex-direction: column; gap: 12px; }
.slot {
  display: flex; align-items: center; gap: 12px;
  border: 1px dashed #e6ded9; border-radius: 9px;
  height: 64px; min-height: 0; padding: 0 12px; background: #faf7f5cc;
}
.slot__no {
  width: 32px; height: 32px; flex: 0 0 32px;
  border: 1px solid #e6ded9; border-radius: 50%;
  text-align: center; line-height: 28px; font-weight: bold; background: #faf7f5cc;
}
.slot__hint { color: #6f757c; font-size: 16px; }
/* 슬롯에 놓인 카드(사용자 지적 2026-09-09: 드래그해 넣으면 이상해짐).
   규격을 안 주면 조치형 카드 크기(200x160)로 나와 슬롯(51.2) 밖으로 삐져나가
   아래 슬롯들을 덮었다. 보기 카드(.tray--order .card)와 같은 모양으로 한 줄을 채운다. */
.slot .card {
  flex: 1 1 auto; width: auto; height: 48px; min-width: 0;
  padding: 0 14px 0 38px;
  justify-content: center; font-size: 18px; line-height: 24px;
  box-shadow: none;
}
.slot .card__grip { left: 14px; top: 50%; margin-top: -7px; right: auto; }
/* ── 조치형 카드 (슬라이드 26) : 250x200 고정, 4열 간격 16 ──── */
.card {
  position: relative;
  width: 250px; height: 200px; padding: 30px 14px 14px;
  display: flex; flex-direction: column; justify-content: center;
  color: #1f2429;
  border: 1px solid #e6ded9; border-radius: 9px;
  background: #faf7f5cc; cursor: pointer; box-shadow: 0 28px 70px #2a23203a; overflow: hidden;
  /* 텍스트형: 세로 중앙·왼쪽 정렬, 20px 글자 · 28px 줄간격, 최대 5줄 */
  font-size: 20px; line-height: 28px; font-weight: 700; text-align: center;
}
.card--on { background: #f0ebe7; border-color: var(--gs-cyan-soft); }
/* 낱말형 카드(사용자 지시 2026-09-09). 문장형은 왼쪽 정렬 그대로다. */
.card--word { text-align: center; }
/* 카드 번호(01~04)와 드래그 손잡이. 카드 위 모서리를 쓴다(0908 시안). */
.card__no {
  position: absolute; left: 12px; top: 10px;
  color: var(--gs-muted); font-size: 13px; font-weight: 800;
}
.card__grip {
  position: absolute; right: 12px; top: 12px;
  width: 12px; height: 14px; pointer-events: none;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.2px);
  background-size: 5px 5px; color: #c9c2bc;
}
/* 그림 카드(발주처 요청 17 / 0908 슬라이드 26): 위 그림, 아래 2줄 이내 설명 */
.card--img {
  /* 이미지 삽입 조치 카드: 이미지·텍스트 1.5배(발주처 0910 S6). 카드 높이를 키워 담는다. */
  height: auto; min-height: 300px;
  padding: 28px 10px 10px; text-align: center;
  align-items: center; gap: 8px;
}
.card__img { height: 165px; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; }
.card--img .card__label { font-size: 24px; line-height: 33px; word-break: keep-all; }
.card__label { font-size: 16px; line-height: 22px; word-break: keep-all; }
/* 놓은 카드의 원래 자리(슬라이드 26·31): 다른 카드가 밀리지 않게 자리를 남긴다 */
/* 놓은 카드의 원래 자리. 눌러서 되돌릴 수 있다(0908 시안 '배치됨 · 되돌리기'). */
.card--placed {
  padding: 14px; font-family: inherit;
  border-style: dashed; background: #f4f1ee; color: #8a8f96;
  align-items: center; justify-content: center; cursor: pointer;
  font-size: 16px; box-shadow: none;
}
.card--placed:hover { transform: none; border-color: #d3c8c1; color: #1f2429; }
/* 영역 안에 놓인 카드의 요약 형태(슬라이드 26) */
.card--mini {
  width: 100%; height: auto; padding: 6px 26px 6px 10px;
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 15px; line-height: 20px; box-shadow: none;
}
/* 되돌리기 X. 카드명을 가리지 않게 오른쪽 위 모서리에 작게 둔다. */
.card__remove {
  position: absolute; right: 4px; top: 2px;
  width: 20px; height: 20px; padding: 0;
  border: 0; background: transparent; color: var(--gs-muted);
  font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.card__remove:hover { color: var(--gs-red); }
.card--mini .card__label { font-size: 15px; line-height: 20px; }
.card__thumb { width: 28px; height: 28px; flex: none; object-fit: contain; pointer-events: none; }
/* 조치 카드 4열 */
.tray { display: grid; grid-template-columns: repeat(4, 250px); gap: 16px; justify-content: center; }
/* 순서형 보기 2x2 (슬라이드 31): 516x88, 간격 16 */
.tray--order { grid-template-columns: repeat(2, 516px); }
.tray--order .card {
  position: relative;
  width: 516px; height: 88px; padding: 14px 14px 14px 38px;
  justify-content: center; font-size: 18px; line-height: 24px;
}
/* 손잡이는 왼쪽에 둔다(0908 시안). 조치형은 카드가 커서 오른쪽 위에 있다. */
.tray--order .card__grip { left: 14px; top: 50%; margin-top: -7px; right: auto; }
/* 영역 제목. 순서형은 [보기], 조치형은 '조치 카드' / '배치할 위치'.
   오른쪽 회색 글씨는 그 영역에서 무엇을 하는지 알리는 보조 안내다(0908 시안). */
.tray__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 16px; font-weight: 800; color: var(--gs-muted); margin-bottom: 8px;
}
.tray__head b { color: var(--gs-text); font-size: 17px; }
.tray__head span { font-size: 14px; font-weight: 600; }
/* 조치 카드 → 배치할 위치 사이의 안내 화살표 */
.zones__arrow {
  /* 좌우 마진은 위의 규격 폭 규칙(auto)이 잡는다. 여기서 shorthand 를 쓰면 덮인다. */
  margin-top: 10px; margin-bottom: 6px; text-align: center;
  font-size: 20px; line-height: 1; color: var(--gs-muted);
}
/* 보기와 순서 영역 사이 36 (슬라이드 31) */
.tray + .slots { margin-top: 36px; }
/* 하단 버튼줄에 들어간다(슬라이드 26). 제출 버튼과 같은 높이로 맞춘다. */
.reset-btn {
  height: 48px; padding: 0 20px;
  border: 1px solid #d3c8c1; border-radius: 10px;
  background: #f0ebe7; color: var(--gs-text); font-weight: 700; font-size: 16px;
  cursor: pointer; box-shadow: none;
}
.reset-btn:hover { background: #faf7f5; color: #1f2429; }

/* 드롭 영역 250x232, 4열 간격 16. 위 88 에 목적지 이름(슬라이드 26). */
.zones { display: grid; grid-template-columns: repeat(4, 250px); gap: 16px; justify-content: center; margin-top: 16px; }
.zone {
  width: 250px; height: 232px; min-height: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px dashed #e6ded9; border-radius: 9px;
  background: #faf7f5cc;
}
.zone--over { background: #e8f7ee; border-color: var(--c-ok); border-style: solid; }
.slot--over { background: #e8f7ee; border-color: var(--c-ok); border-style: solid; }
/* 영역 이름이 길 수 있다(C-03 은 법률 이름이 그대로 들어간다).
   슬라이드 26: 긴 법률명도 영역 높이를 늘리지 않고 88px 안에서 여러 줄로 표시한다. */
.zone__title {
  height: 88px; flex: none; margin: 0; padding: 8px 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 32px; line-height: 40px; text-align: center;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 아주 긴 영역 이름(C-03 법률명 등)은 2배가 넘쳐 한 단계 낮춘다(발주처 0910). */
.zone__title--long { font-size: 22px; line-height: 28px; }
.zone__items {
  flex: 1; min-height: 0; padding: 8px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
  overflow: auto;
}
/* 빈 영역의 놓을 자리 안내(0908 시안) */
.zone__drop {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #d9d2cc; border-radius: 8px;
  color: #a9a29c; font-size: 15px; font-weight: 700;
}
.card--dragging { opacity: .45; }

/* 신고·보고형 단계 표시(발주처 요청 2026-09-08 슬라이드 32): 높이 48px 고정.
   앞으로 가는 길은 하단 버튼뿐이고, 지나온 단계로 되돌아갈 때만 탭을 누른다. */
.tabs { display: flex; gap: 8px; height: 48px; margin-bottom: 16px; }
.tab {
  flex: 1; padding: 0; font-size: 17px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e6ded9; border-radius: 9px;
  background: #faf7f5; color: #6f757c; cursor: default;
}
/* 되돌아갈 수 있는 단계만 누를 수 있는 것처럼 보인다 */
.tab--go { cursor: pointer; }
.tab--go:hover { border-color: var(--type-color); color: #1f2429; }
/* 선택된 단계는 미션 유형 색으로 물들인다.
   border-color 가 두 번 선언되어 뒤의 시안이 유형 색을 덮고 있었다. */
.tab--on {
  background: color-mix(in srgb, var(--type-color), #ffffff 86%);
  border-color: var(--type-color);
  color: #1f2429;
  box-shadow: none;
}
.tab--locked { opacity: .45; }

/* 선택지/카드 hover: 유형별 색 강조(game-site) */
.choice:hover, .list__item:hover, .card:hover { border-color: var(--type-color); transform: translateY(-1px); }
/* 탭 hover 강조는 뺐다. 누를 수 없는 것을 누를 수 있는 것처럼 보이게 하기 때문이다. */

/* gs-primary-hover: 시안 주버튼 공통 hover */

/* ── 연습 모드(튜토리얼) 오답 표시 ───────────────────────────
   시나리오 10-1 잘못 선택한 항목 붉게 / 18-1 오배치 영역 붉게·정답 영역 초록 /
   24-1 잘못 배치된 슬롯 강조. 본 게임은 재도전이 없어 이 표시가 뜨지 않는다. */
.choice--wrong {
  border-color: var(--gs-red);
  background: color-mix(in srgb, var(--gs-red), transparent 84%);
  box-shadow: inset 0 0 0 1px var(--gs-red);
  animation: mis-shake .3s ease;
}
.choice--wrong .choice__no { color: var(--gs-red); border-color: var(--gs-red); }

.zone--wrong {
  border-color: var(--gs-red); border-style: solid;
  background: color-mix(in srgb, var(--gs-red), transparent 88%);
  animation: mis-shake .3s ease;
}
.zone--right {
  border-color: var(--c-ok); border-style: solid;
  background: color-mix(in srgb, var(--c-ok), transparent 88%);
}
.slot--wrong {
  border-color: var(--gs-red); border-style: solid;
  background: color-mix(in srgb, var(--gs-red), transparent 88%);
  animation: mis-shake .3s ease;
}
@keyframes mis-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── 키보드 조작 포커스 표시 ─────────────────────────────────
   :focus-visible 이라 키보드로 Tab 이동했을 때만 나온다.
   마우스로 클릭했을 때는 표시되지 않아 기존 화면 모습이 그대로 유지된다. */
.choice:focus-visible,
.list__item:focus-visible,
.card:focus-visible,
.zone:focus-visible,
.slot:focus-visible {
  outline: 3px solid var(--gs-cyan, #ff7a01);
  outline-offset: 2px;
  border-radius: 9px;
}

/* ── 미션 포기 확인 팝업 (미션 창 X 버튼) ──────────────────
   dialog.js 의 confirmAbandonMission 이 띄운다. dialog.css 의 공통 팝업 틀을 쓰되,
   미션 창에서만 쓰는 팝업이라 상자 배치는 미션 스타일과 함께 여기 둔다.
   .dlg > * 가 absolute 라, notice 팝업처럼 static 으로 되돌려 세로로 쌓는다. */
.dlg--abandon {
  width: 420px; padding: 30px 28px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
}
.dlg--abandon > * { position: static; }
.dlg--abandon .dlg__title { font-size: 21px; font-weight: 900; line-height: 1.4; }
.dlg__abandon-actions { display: flex; gap: 12px; }
.dlg__abandon-actions .dlg__btn { min-width: 120px; padding: 11px 0; }