/* 섬 미션 재미 층(2026-10-11): OX 한 문제 · 지혜 카드 · 다음 미션 예고 · 쿠폰 창 '오늘 알게 된 인류의지혜'.
   v4 토큰(먹·흰 종이·빨강 한두 곳). 움직임은 사람이 고른 순간 한 번뿐이고 prefers-reduced-motion에서 끈다. */

/* 미션 카드는 짧게: 담당자 포인트 문단은 OX 한 문제의 답(지혜 카드)이 대신한다 */
.mission-card .mc-point { display: none; }

.mq {
  margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: #fff;
  border: 1.5px solid var(--v4-ink); color: var(--v4-ink); font-family: var(--body);
}
.mq p { margin: 0; }
.mq-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px !important; }
.mq-eyebrow span { font: 800 12px/1 var(--body); letter-spacing: .02em; color: var(--v4-red); }
.mq-eyebrow b { font: 700 11.5px/1 var(--body); color: var(--v4-muted); background: var(--v4-mist); border-radius: 999px; padding: 5px 9px; }
.mq-q { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; word-break: keep-all; }
.mq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mq-choices button {
  min-height: 52px; border-radius: 12px; border: 1.5px solid var(--v4-line); background: var(--v4-mist);
  font: 700 16px/1.3 var(--body); color: var(--v4-ink); cursor: pointer; padding: 8px 10px; word-break: keep-all;
  transition: transform .12s, border-color .12s, background .12s;
}
.mq-choices.is-ox button { font: 800 26px/1 var(--body); }
.mq-choices button:hover { border-color: var(--v4-ink); background: #fff; transform: translateY(-1px); }
.mq-choices button:active { transform: scale(.97); }
.mq-choices button:focus-visible, .mq-more:focus-visible, .mq-result:focus-visible { outline: 3px solid var(--v4-ink); outline-offset: 2px; }

.mq-result { font-size: 15px; margin-bottom: 8px !important; outline: none; }
.mq-result.is-right b { color: var(--v4-red); }
.mq-result.is-wrong b { color: var(--v4-ink); }
.mq-card {
  position: relative; padding: 12px 14px 12px 14px; border-radius: 12px; background: var(--v4-mist);
  border-left: 4px solid var(--v4-red);
}
.mq-card small { display: block; font: 800 11.5px/1.2 var(--body); color: var(--v4-muted); margin-bottom: 3px; }
.mq-card b { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.45; letter-spacing: -.02em; word-break: keep-all; }
.mq-card p { margin-top: 4px !important; font-size: 13.5px; line-height: 1.6; color: var(--v4-ink-2); word-break: keep-all; }
@keyframes mqPop { 0% { transform: scale(.94) rotate(-1.5deg); opacity: 0; } 70% { transform: scale(1.02); opacity: 1; } 100% { transform: none; } }
.mq-card.is-new { animation: mqPop .42s cubic-bezier(.3, 1.4, .5, 1) both; }
.mq-next { margin-top: 10px !important; font-size: 13.5px; line-height: 1.55; color: var(--v4-ink-2); word-break: keep-all; }
.mq-next b { color: var(--v4-ink); }
.mq-next span { display: inline-block; margin-left: 2px; font-weight: 700; color: var(--v4-red); }
.mq-actions { margin-top: 8px !important; }
.mq-more {
  border: 0; background: none; padding: 8px 0; min-height: 40px; cursor: pointer;
  font: 700 13.5px var(--body); color: var(--v4-ink); text-decoration: underline; text-underline-offset: 3px;
}
.mq-more::after { content: " →"; }

/* 쿠폰 창: 오늘 알게 된 인류의지혜 */
.kit.coupon .mq-summary { order: 3; }
.mq-summary { text-align: left; margin: 12px 0 2px; padding: 12px 14px; border-radius: 12px; background: var(--v4-mist); }
.mq-summary h3 { margin: 0 0 6px; font: 800 13.5px var(--body); color: var(--v4-ink); display: flex; justify-content: space-between; gap: 8px; }
.mq-summary h3 small { font-weight: 700; color: var(--v4-muted); }
.mq-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mq-summary li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--v4-ink); word-break: keep-all; }
.mq-summary li span {
  width: 20px; height: 20px; border-radius: 50%; background: var(--v4-red); color: #fff;
  display: grid; place-items: center; font: 700 11px/1 var(--body); margin-top: 1px;
}
.mq-summary li.is-empty { color: var(--v4-muted); }
.mq-summary li.is-empty span { background: #fff; border: 1.5px dashed #B9C3CF; color: var(--v4-muted); }
.mq-summary li.is-field { grid-template-columns: auto 1fr; padding-bottom: 4px; border-bottom: 1px solid var(--v4-line); margin-bottom: 2px; }
.mq-summary li.is-field b { font-size: 12px; font-weight: 800; color: var(--v4-muted); }
.kit.coupon.is-locked .mq-summary { display: none; }

@media (max-width: 760px) {
  .mq { padding: 12px 13px; }
  .mq-q { font-size: 16px; }
  .mq-choices button { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-card.is-new { animation: none; }
  .mq-choices button { transition: none; }
  .mq-choices button:hover { transform: none; }
}

/* 부문 패널 '이런 교육을 해요': 대표 과정 카드(누르면 과정 상세) */
.dv-quick { margin: 14px 0 18px; }
.dv-quick-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.dv-quick-h b { font: 800 14px var(--body); color: var(--v4-ink); }
.dv-quick-h span { font: 700 12px var(--body); color: var(--v4-muted); }
.dv-quick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dv-quick li button {
  width: 100%; height: 100%; min-height: 76px; display: grid; align-content: start; gap: 4px; text-align: left; cursor: pointer;
  border: 1px solid var(--v4-line); border-radius: 12px; background: #fff; padding: 10px 12px; font: inherit; color: var(--v4-ink);
  transition: border-color .12s, transform .12s;
}
.dv-quick li button:hover { border-color: var(--v4-ink); transform: translateY(-1px); }
.dv-quick li button:focus-visible { outline: 3px solid var(--v4-ink); outline-offset: 2px; }
.dv-quick li small { font: 700 11.5px/1.3 var(--body); color: var(--v4-red); }
.dv-quick li b { font-size: 13.5px; line-height: 1.45; font-weight: 700; word-break: keep-all; }
.dv-quick-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; margin: 6px 0 0; }
.dv-site { font: 600 13px var(--body); color: var(--v4-muted); text-underline-offset: 3px; padding: 8px 0; }
.dv-site:hover { color: var(--v4-ink); }
@media (max-width: 420px) { .dv-quick ul { grid-template-columns: 1fr; } .dv-quick li button { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .dv-quick li button { transition: none; } .dv-quick li button:hover { transform: none; } }

/* 2D 지도 핀: 키보드 초점이 또렷하게(카드 테두리를 먹색으로 굵게) */
.map2d .pin:focus-visible rect:first-of-type { stroke: var(--v4-ink); stroke-width: .8; }
.map2d .pin:focus-visible rect:nth-of-type(2) { fill: var(--v4-ink); }

/* 병아리 진화 배지 카드: 모바일에서 장소 패널이 열려 있으면 패널 머리 버튼(자료 서가·교육 메모·닫기)을 가리지 않게 숨긴다(2026-10-11) */
@media (max-width: 760px) { body.panel-open .gfx-badge { display: none !important; } }

/* 텍스트 모드(모바일): 아래 시트용 고정 높이가 남아 본문이 패널 밖으로 넘치고 꼬리말이 본문 위에 겹치던 문제(2026-10-11) */
body.mode-text .panel { height: auto !important; max-height: none !important; }

/* 음성 자막: 모바일에서 장소 패널이 열려 있으면 패널 머리(닫기·자료 서가)를 덮지 않게 화면 아래쪽에 */
@media (max-width: 600px) { body.panel-open .vcap { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 12px); } }