/* 하단 시트, 미션 카드, 끝 화면. 색 토큰은 world.css 에 있다. */
/* ---- 하단 시트 ---- */
.kmw-sheet {
  position: fixed;
  z-index: 11;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  max-height: 45vh;
  max-height: 45dvh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-radius: 16px 16px 0 0;
  background: var(--kmw-panel);
  border: 1px solid var(--kmw-line);
  border-bottom: 0;
}
.kmw-legend {
  flex: none;
  font-size: 11px;
  color: var(--kmw-muted);
  line-height: 1.3;
}
.kmw-lines {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kmw-sheet-mission .kmw-lines,
.kmw-sheet-mission .kmw-legend { display: none; }
.kmw-region-tag {
  align-self: center;
  font-size: 11px;
  color: var(--kmw-muted);
  padding: 1px 8px;
  border-radius: 8px;
  border: 1px solid var(--kmw-line);
}
.kmw-line {
  position: relative;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  background: var(--kmw-orig-bg);
  color: var(--kmw-orig-text);
}
.kmw-line-add {
  background: var(--kmw-add-bg);
  color: var(--kmw-add-text);
  border-left: 5px solid var(--kmw-add-accent);
}
.kmw-line-ref { display: block; margin-top: 2px; font-size: 11px; opacity: 0.75; }
.kmw-line-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--kmw-panel-solid);
  color: var(--kmw-muted);
}
.kmw-demo .kmw-line { font-size: 16px; }
.kmw-demo .kmw-line-badge { font-size: 14px; padding: 1px 9px; }
.kmw-demo .kmw-line-ref { font-size: 14px; font-weight: 700; opacity: 1; }
.kmw-result-chip {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  background: var(--kmw-chip-bg);
  color: var(--kmw-chip-text);
}
.kmw-result-chip-skipped { background: var(--kmw-orig-bg); color: var(--kmw-muted); }
.kmw-next {
  flex: none;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--kmw-primary);
  color: var(--kmw-primary-text);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.kmw-next:disabled {
  background: var(--kmw-disabled-bg);
  color: var(--kmw-disabled-text);
  cursor: default;
}
.kmw-sheet-mission .kmw-next { display: none; }

/* ---- 미션 카드 (mission-host.js 가 만든다) ---- */
.kmw-mission-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kmw-mission-area:empty { display: none; }
.kmw-mission-card {
  border: 2px solid var(--kmw-mission-border);
  border-radius: 12px;
  background: var(--kmw-mission-bg);
  overflow: hidden;
}
.kmw-mission-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px;
}
.kmw-mission-chip {
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--kmw-chip-bg);
  color: var(--kmw-chip-text);
}
.kmw-mission-title { flex: 1 1 auto; font-size: 14px; font-weight: 700; min-width: 0; }
.kmw-mission-skip {
  min-height: 44px;
  min-width: 72px;
  padding: 0 12px;
  border: 1px solid var(--kmw-line);
  border-radius: 10px;
  background: var(--kmw-panel-solid);
  color: var(--kmw-muted);
  font-size: 13px;
  cursor: pointer;
}
.kmw-mission-tabs { display: flex; gap: 6px; padding: 0 10px 6px; }
.kmw-mission-tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--kmw-line);
  border-radius: 10px;
  background: var(--kmw-panel-solid);
  color: var(--kmw-text);
  font-size: 13px;
  cursor: pointer;
}
.kmw-mission-tab[aria-selected="true"] {
  border-color: var(--kmw-mission-border);
  background: var(--kmw-chip-bg);
  color: var(--kmw-chip-text);
  font-weight: 700;
}
.kmw-mission-intro {
  margin: 0 10px 8px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  background: var(--kmw-add-bg);
  color: var(--kmw-add-text);
  border-left: 5px solid var(--kmw-add-accent);
}
/* 미션 모듈은 밝은 바탕을 가정하고 만들어졌으므로 본문은 테마와 무관하게 밝게 고정한다. */
.kmw-mission-body {
  --kmp-bg: #f5f5f7;
  --kmp-card: #ffffff;
  --kmp-ink: #1d1d1f;
  --kmp-line: #c9c9ce;
  --kmp-green: #2e8b57;
  --kmp-green-soft: #e3f4ea;
  --kmp-ok: #1f7a3a;
  --kmp-panel: #e4e4ea;
  background: #ffffff;
  color: #1d1d1f;
  padding: 8px;
  max-width: 100%;
  overflow-x: hidden;
}
.kmw-mission-pending { padding: 14px 8px; font-size: 14px; color: #5b6673; }

/* ---- 끝 화면 ---- */
.kmw-end {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 24, 0.82);
}
.kmw-end[hidden] { display: none; }
.kmw-end-card {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--kmw-panel-solid);
  color: var(--kmw-text);
  border: 1px solid var(--kmw-line);
}
.kmw-end-title { margin: 0 0 4px; font-size: 22px; }
.kmw-end-sub { margin: 0 0 12px; font-size: 13px; color: var(--kmw-muted); }
.kmw-end-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kmw-end-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid var(--kmw-mission-border);
  background: var(--kmw-mission-bg);
  font-size: 14px;
  line-height: 1.4;
}
.kmw-end-item-skipped { border-color: var(--kmw-line); background: var(--kmw-orig-bg); }
.kmw-end-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--kmw-chip-bg);
  color: var(--kmw-chip-text);
}
.kmw-end-empty { font-size: 14px; color: var(--kmw-muted); margin: 0 0 14px; }
.kmw-end-restart {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--kmw-primary);
  color: var(--kmw-primary-text);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- 자유 시점: 시트 접기 (free-controls.js 가 버튼과 .kmw-sheet-folded 를 관리) ---- */
.kmw-free-fold {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--kmw-line);
  border-radius: 12px 12px 0 0;
  background: var(--kmw-panel);
  color: var(--kmw-text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.kmw-sheet-folded .kmw-legend,
.kmw-sheet-folded .kmw-mission-area { display: none; }
.kmw-sheet-folded .kmw-lines { flex: none; overflow: hidden; }
.kmw-sheet-folded .kmw-lines > :not(:last-child) { display: none; }
.kmw-sheet-folded .kmw-lines > :last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: stretch;
}
.kmw-sheet-folded .kmw-line-ref { display: none; }

/* ---- 시트 높이 고정 ----
   예전에는 대사 줄이 쌓일 때마다 시트가 커져서(최대 45%) 3D 화면 보정(camera.setViewOffset)이 매번 달라졌고,
   "다음" 을 누를 때마다 화면이 아래로 내려가는 것처럼 보였다. 대사 모드는 높이를 고정하고 내용은 안에서 스크롤한다. */
.kmw-sheet { height: min(300px, 36vh); height: min(300px, 36dvh); }
.kmw-sheet.kmw-sheet-mission { height: min(420px, 45vh); height: min(420px, 45dvh); }
.kmw-sheet.kmw-sheet-folded { height: auto; }

/* ---- 끝 화면 꾸밈 (포스터 색 #3a5ea7 · 크림 #f0e4d6) ---- */
.kmw-end { background: rgba(10, 20, 48, 0.86); }
.kmw-end-card { padding: 0 0 16px; overflow-x: hidden; text-align: center; }
.kmw-end-banner {
  height: 132px;
  background: #3a5ea7 url("../assets/splash-poster.jpg") no-repeat center 36%;
  background-size: 120% auto;
}
.kmw-end-kicker { margin: 14px 16px 2px; font-size: 12px; font-weight: 700; color: #3a5ea7; letter-spacing: 0.02em; }
.kmw-end-title { margin: 0 16px 4px; font-size: 28px; letter-spacing: -0.02em; }
.kmw-end-sub { margin: 0 20px 12px; font-size: 14px; line-height: 1.5; word-break: keep-all; }
.kmw-end-code { display: flex; justify-content: center; gap: 8px; margin: 0 16px 16px; }
.kmw-end-code[hidden] { display: none; }
.kmw-end-digit {
  width: 52px; padding: 6px 0 5px; border-radius: 12px;
  background: #3a5ea7; color: #f0e4d6;
  display: flex; flex-direction: column; align-items: center;
}
.kmw-end-digit b { font-size: 26px; line-height: 1.1; }
.kmw-end-digit span { font-size: 11px; opacity: 0.85; }
.kmw-end-listtitle { margin: 0 16px 6px; font-size: 13px; font-weight: 700; text-align: left; color: var(--kmw-muted); }
.kmw-end-list { margin: 0 16px 14px; text-align: left; }
.kmw-end-restart { width: calc(100% - 32px); margin: 0 16px; background: #3a5ea7; color: #fff; }
.kmw-end-foot { margin: 10px 16px 0; font-size: 11px; color: var(--kmw-muted); }
@media (prefers-color-scheme: dark) {
  .kmw-end-kicker { color: #9fb8f0; }
}

/* 넓은 화면(PC·태블릿 가로)에서는 미션 시트를 조금 더 키워 자물쇠·카드가 잘리지 않게 한다. */
@media (min-width: 900px) and (min-height: 600px) {
  .kmw-sheet.kmw-sheet-mission { height: min(470px, 58vh); height: min(470px, 58dvh); }
}
/* 폰에서 미션 목록이 길어도 "처음부터" 버튼은 항상 보이게(카드 안 스크롤 바닥에 붙임). */
.kmw-end-restart { position: sticky; bottom: 12px; box-shadow: 0 0 0 12px var(--kmw-panel-solid), 0 -14px 14px 4px var(--kmw-panel-solid); }
.kmw-end-card { padding-bottom: 0; }
.kmw-end-foot { padding: 14px 0 16px; margin-top: 0; }

/* ---- 보기 버튼(대본 창 접기/펴기, 카메라 고정/연출) : 좌측 상단 ---- */
.kmw-viewbar {
  position: fixed; z-index: 12;
  right: 8px; top: calc(env(safe-area-inset-top, 0px) + 58px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.kmw-viewbtn {
  min-height: 34px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.16); background: rgba(255, 255, 255, 0.92); color: #1f2933;
  font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.kmw-viewbtn[aria-pressed="true"] { background: #3a5ea7; color: #fff; border-color: #3a5ea7; }
@media (prefers-color-scheme: dark) {
  .kmw-viewbtn { background: rgba(33, 33, 35, 0.92); color: #f0efea; border-color: rgba(255, 255, 255, 0.2); }
  .kmw-viewbtn[aria-pressed="true"] { background: #5b8cff; color: #0b1020; }
}
/* 끝 화면이 떠 있으면 숨긴다 */
.kmw-end:not([hidden]) ~ .kmw-viewbar { display: none; }
/* 접힌 대본 창: 마지막 대사 한 줄 + 다음 버튼만. 미션 중에 접으면 안내 한 줄만 남긴다. */
.kmw-sheet.kmw-sheet-folded .kmw-lines > :last-child { flex: none; }
.kmw-sheet.kmw-sheet-folded.kmw-sheet-mission::before {
  content: "미션 진행 중 · 오른쪽 위 [대본 창 펴기]를 눌러 답을 골라 주세요";
  display: block; padding: 10px 4px; font-size: 13px; font-weight: 700; color: var(--kmw-muted); text-align: center;
}