/* =====================================================================
   오류 찾기 화면 · 정답표 화면 — 왼쪽 계기판(시간·남은 오류·사건 현장) + 오른쪽 문서
   좌표 기준 1920×1080 (기획안 p13 문제 화면 구성을 따른다)
   ===================================================================== */

/* ── 왼쪽 계기판 ── */
.side { position: absolute; left: 36px; top: 128px; width: 312px; height: 924px; display: flex; flex-direction: column; gap: 20px; }
/* 9/29 리디자인: 글래스 카드 — 반투명 + 블러 + 흰 테두리 */
.side-card {
  position: relative; box-sizing: border-box; padding: 18px 20px;
  background: rgba(255, 255, 255, .55); border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 14px 34px rgba(27, 36, 64, .10);
}
.side-card__label { display: block; text-align: center; font-size: 24px; font-weight: 800; color: #7C8694; letter-spacing: .14em; }

/* 남은 시간 링 */
.timer { flex: none; }
.timer__ring { position: relative; width: 238px; height: 238px; margin: 6px auto 0; }
.timer__track { fill: none; stroke: #E6E9ED; stroke-width: 20; }
.timer__arc {
  fill: none; stroke: var(--c-blue); stroke-width: 20; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 130px 130px; transition: stroke .3s var(--ease-soft);
}
.timer__sec {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 96px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.timer.is-low .timer__arc { stroke: var(--c-red); }
.timer.is-low .timer__sec { color: var(--c-red); animation: lowBeat 1s var(--ease-inout) infinite; }
@keyframes lowBeat { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.timer.is-hit { animation: shakeX .45s var(--ease-inout); }
@keyframes shakeX { 0%, 100% { translate: 0; } 20% { translate: -10px; } 45% { translate: 8px; } 70% { translate: -5px; } }
.timer__penalty { position: absolute; right: 22px; top: 96px; font-size: 46px; font-weight: 900; color: var(--c-red); opacity: 0; }
.timer__penalty.is-hit { animation: penaltyUp 1.2s var(--ease-expo); }
@keyframes penaltyUp {
  0%   { opacity: 0; translate: 0 24px; scale: .8; }
  16%  { opacity: 1; translate: 0 0;    scale: 1.12; }
  70%  { opacity: 1; }
  100% { opacity: 0; translate: 0 -46px; }
}

/* 남은 오류 */
.remain { flex: none; }
.remain__num { display: block; text-align: center; font-size: 96px; font-weight: 900; line-height: 1.05; color: var(--c-red); }
.remain__num.is-beat { animation: beat .55s var(--ease-back); }
@keyframes beat { 0% { scale: 1.35; } 100% { scale: 1; } }
.remain__slots { list-style: none; padding: 0; margin: 6px 0 0 !important; display: flex; justify-content: center; gap: 8px; }
.remain__slots li {
  width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 50%;
  background: #E6E9ED; color: #B4BAC3; transition: background var(--dur-fast), color var(--dur-fast);
}
.remain__slots li.is-on { background: var(--c-blue); color: #fff; }

/* 사건 현장 (기획안 p13 [문제 상황] 자리) — 아래에 돋보기 세종 (9/29) */
.situation {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 12px; padding-top: 24px; padding-bottom: 0; text-align: center; overflow: hidden;
}
.situation__label { font-size: 24px; font-weight: 800; color: #7C8694; letter-spacing: .14em; }
.situation__name { font-family: var(--font-display); font-size: 42px; font-weight: 900; line-height: 1.25; }
.situation__sejong {
  margin-top: auto; align-self: flex-start; margin-left: -21px; /* 카드 왼쪽 모서리에서 빼꼼 */
  width: 72%; max-height: 200px; object-fit: contain; object-position: left bottom;
}

/* 정답표 화면의 점수 카드 */
.score { flex: none; text-align: center; }
.score__num { display: block; font-size: 64px; font-weight: 900; color: var(--c-ink-2); line-height: 1.2; }
.score__num b { font-size: 86px; color: var(--c-blue); }
.score__sub { display: block; font-size: 28px; font-weight: 700; color: var(--c-dim); }

/* ── 문서 자리 ── */
.stage-doc { position: absolute; left: 372px; top: 128px; width: 1512px; height: 924px; }

/* ── 준비 카운트 (문서 위) ── */
.ready {
  position: absolute; left: 372px; top: 128px; width: 1512px; height: 924px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-soft);
}
.ready.is-on { opacity: 1; }
.ready__title { font-size: 34px; font-weight: 800; color: var(--c-dim); letter-spacing: .1em; }
.ready__place { font-family: var(--font-display); font-size: 92px; font-weight: 900; color: var(--c-ink); }
.ready__count { margin-top: 10px; font-family: var(--font-display); font-size: 190px; font-weight: 900; line-height: 1; color: var(--c-blue); font-variant-numeric: tabular-nums; }
.ready__count.is-beat { animation: countPop .9s var(--ease-expo); }
@keyframes countPop { 0% { opacity: .2; scale: 1.7; } 40% { opacity: 1; scale: 1; } 100% { opacity: 1; scale: 1; } }
.ready__count.is-go { font-size: 132px; color: var(--c-red); }

/* ── 터치 피드백 말풍선 (누른 자리 · 2인 각자) ── */
.fx-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.fb {
  position: absolute; box-sizing: border-box; min-width: 360px; max-width: 540px; padding: 18px 28px 16px;
  border-radius: 28px; background: var(--c-card); box-shadow: var(--shadow-pop); text-align: center;
  transform: translate(-50%, calc(-100% - 34px)); transform-origin: bottom center;
  animation: fbIn .42s var(--ease-back) both;
}
.fb--below { transform: translate(-50%, 34px); transform-origin: top center; }
@keyframes fbIn { from { opacity: 0; scale: .72; } to { opacity: 1; scale: 1; } }
.fb.is-out { opacity: 0; translate: 0 -18px; transition: opacity var(--dur-med) var(--ease-soft), translate var(--dur-med) var(--ease-soft); }
.fb::after {
  content: ""; position: absolute; left: 50%; margin-left: -16px; border: 16px solid transparent;
  bottom: -30px; border-top-color: var(--c-card);
}
.fb--below::after { bottom: auto; top: -30px; border-top-color: transparent; border-bottom-color: var(--c-card); }
.fb__title { display: block; font-size: 37px; font-weight: 900; line-height: 1.2; }
.fb__pair { display: block; margin-top: 5px; font-size: 32px; font-weight: 800; }
.fb__pair s { color: var(--c-red); text-decoration-thickness: 3px; }
.fb__pair strong { color: var(--c-blue); }
.fb__line { display: block; margin-top: 7px; font-size: 25px; font-weight: 600; line-height: 1.45; color: var(--c-ink-2); }
.fb__remain { display: block; margin-top: 8px; font-size: 28px; font-weight: 800; font-style: normal; color: var(--c-blue); }
.fb--found { border: 5px solid var(--c-blue); }
.fb--found .fb__title { color: var(--c-blue); }
.fb--wrong { border: 5px solid var(--c-red); }
.fb--wrong .fb__title { color: var(--c-red); font-size: 44px; }

/* ── 시간 종료 안내 ── */
.timeup {
  position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 24, 34, .48); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-soft);
}
.timeup.is-on { opacity: 1; pointer-events: auto; }
.timeup__card {
  width: 1180px; box-sizing: border-box; padding: 56px 72px 48px; text-align: center;
  background: var(--c-card); border-radius: 44px; box-shadow: var(--shadow-pop);
  animation: fbIn .5s var(--ease-back) both;
}
.timeup__icon { display: block; width: 110px; height: 110px; margin: 0 auto 22px; color: var(--c-red); }
.timeup__msg { font-size: 50px; font-weight: 800; line-height: 1.45; }
.timeup .btn { margin-top: 38px; }

/* 성공 순간 문서 강조 */
.page--play.is-solved .doc { box-shadow: 0 0 0 10px var(--c-yellow), var(--shadow-pop); }

/* ── 정답표 화면 ── */
.answers {
  position: absolute; left: 372px; top: 128px; width: 1512px; height: 924px; box-sizing: border-box; padding: 32px 44px 28px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-card); border-radius: 32px; box-shadow: var(--shadow-card);
  --ans-font: 32px;
}
.answers__title { font-size: 44px; font-weight: 900; margin-bottom: 14px !important; }
.ans-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-size: var(--ans-font); table-layout: auto; }
.ans-table th { font-size: 24px; font-weight: 800; color: var(--c-dim); text-align: left; padding: 0 16px 4px; }
.ans-table td { background: #F3F5F8; padding: 12px 16px; vertical-align: middle; }
.ans-table td:first-child { border-radius: 16px 0 0 16px; }
.ans-table td:last-child { border-radius: 0 16px 16px 0; }
.ans-row--missed td { background: #FCECEA; }
.ans-no { width: 88px; }
.ans-no b {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-blue); color: #fff; font-size: 28px; font-weight: 900;
}
.ans-row--missed .ans-no b { background: var(--c-red); }
.ans-wrong { white-space: nowrap; }
.ans-wrong s { color: var(--c-red); font-weight: 800; text-decoration-thickness: 3px; }
.ans-arrow { width: 44px; color: var(--c-dim); text-align: center; }
.ans-right { white-space: nowrap; color: var(--c-blue); font-weight: 900; }
.ans-explain { font-size: calc(var(--ans-font) * .82); font-weight: 600; line-height: 1.4; color: var(--c-ink-2); }
.ans-state { width: 120px; text-align: right; }
.answers__foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 30px; }