/* 브레인체크 전용 — 소개(index) · 측정(test) · 결과(result) 세 화면이 공유한다.
   패널·태그·주의박스는 shared/css/panel.css, 카드·타이머는 shared/css/game-shell.css 공용. */

/* ── 소개 화면 ── */
.bc-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bc-area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px 24px; display: flex; flex-direction: column; }
.bc-area__ic { width: 40px; height: 40px; color: var(--primary); margin-bottom: 16px; }
.bc-area__ic svg { width: 100%; height: 100%; }
.bc-area h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.bc-area p { font-size: 13.5px; color: var(--text-mute); line-height: 1.7; flex: 1; }
.bc-area__meta { display: inline-flex; align-self: flex-start; margin-top: 16px; font-size: 11px; font-weight: 700; color: var(--text-mute); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
/* 2차 이후 확장 영역 — 지금 할 수 없는 것이므로 나머지와 확실히 구분한다 */
.bc-area--soon { background: var(--bg); border-style: dashed; }
.bc-area--soon .bc-area__ic { color: var(--text-mute); opacity: .5; }
.bc-area--soon h3 { color: var(--text-mute); }
@media (max-width: 900px) { .bc-areas { grid-template-columns: 1fr; } }

.bc-start { text-align: center; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.bc-start__meta { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }
.bc-start__meta b { color: var(--primary-dark); font-weight: 800; font-variant-numeric: tabular-nums; }
.bc-start .btn { min-width: 220px; }
.bc-start__sub { font-size: 12.5px; color: var(--text-mute); margin-top: 16px; }

.bc-guide { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bc-guide .ct-class__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bc-guide .ct-class__head h4 { margin-bottom: 0; }
.bc-notice { margin-top: 28px; }

/* ── 측정 화면 ── */
.bc-test-shell { padding: 48px 0 80px; display: flex; flex-direction: column; align-items: center; }

/* 진행 표시 — 측정 중 가장 궁금한 정보가 "지금 몇 번째 영역의 몇 번째 문항인가"라 상단 고정 */
.bc-progress { width: 100%; max-width: 460px; margin-bottom: 20px; }
.bc-progress__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.bc-progress__area { font-size: 13px; font-weight: 800; color: var(--primary-dark); }
.bc-progress__area .step-of { color: var(--text-mute); font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }
.bc-progress__count { font-size: 12.5px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.bc-progress__bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.bc-progress__bar span { display: block; height: 0; width: 0; height: 100%; border-radius: 999px; background: var(--primary); transition: width .35s cubic-bezier(.22,1,.36,1); }

.bc-timer-wrap { width: 140px; margin: 0 auto 20px; }

.bc-card { max-width: 460px; }
/* 기억력 화면 전용 — 문제출제(카드 한 줄)와 답안입력(슬롯+보기+안내+버튼)은 콘텐츠 양이 달라
   자연히 높이가 다르다. min-height를 답안입력 기준으로 고정하고 세로 중앙정렬해서, 문제출제
   단계에서 카드 아래에 어색한 빈 칸이 생기는 대신 위아래로 여백이 고르게 분배되게 한다.
   (memo-answer는 항상 4장 고정 구성이라 값이 변하지 않음 — JS 계산 대신 실측값 고정.) */
#screen-memo .bc-card { display: flex; flex-direction: column; justify-content: center; min-height: 500px; }
.bc-question { font-size: 40px; font-weight: 800; color: var(--primary-dark); letter-spacing: -.02em; margin: 8px 0 24px; font-variant-numeric: tabular-nums; }

/* 직접 입력 — 브레인체크를 미니훈련과 가르는 핵심이라 입력창을 화면에서 가장 큰 요소로 둔다 */
.bc-answer { display: flex; flex-direction: column; gap: 12px; }
.bc-answer__input {
  width: 100%; font-size: 30px; font-weight: 800; text-align: center; letter-spacing: .02em;
  padding: 16px 14px; border: 2px solid var(--line); border-radius: var(--radius-md);
  color: var(--primary-dark); background: var(--surface); font-variant-numeric: tabular-nums;
  transition: border-color .15s ease;
}
.bc-answer__input:focus { outline: none; border-color: var(--primary); }
.bc-answer__input::placeholder { color: var(--line); font-weight: 600; }

/* 기억력 영역 — 본 순서대로 다시 눌러 배열하는 입력. 슬롯·보기 카드 모두 아래 .bc-mem-row/
   .bc-mem-card(트럼프카드 디자인)를 그대로 재사용해 암기 단계와 입력 단계의 카드 모양을 통일한다. */
/* margin-top — 위 슬롯 줄(memo-stage)과 아래 보기 카드 사이 여백. .bc-seq 자체의 gap:16px는
   보기·안내문구·버튼 등 이 요소의 "자기 자식들" 사이에만 적용돼 슬롯 줄과의 간격은 별도로 필요했다. */
.bc-seq { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.bc-seq__hint { font-size: 12.5px; color: var(--text-mute); }
/* 박스 기본크기는 위 #screen-memo .bc-card의 min-height + justify-content:center로 맞춘다
   (문제출제 단계엔 이 영역이 아예 없어도 되므로 display:none으로 간단히 처리). */
.bc-seq.is-pending { display: none; }

/* 암기 노출 단계 — modules/memory-cards/css/memory-cards.css의 .mem-row/.mem-card와
   동일한 디자인(정식 트럼프카드 레이아웃 + 빨강/검정 구분)을 이 페이지에 맞춰 그대로 옮겨왔다.
   빈 슬롯을 먼저 최종 개수만큼 그려 그리드 크기를 확정한 뒤 내용만 채우므로, 카드가 한 장씩
   공개돼도 박스 크기가 커졌다 작아졌다 하지 않는다(미니훈련과 동일 원칙). */
/* width를 max-width만이 아니라 고정값으로도 줌 — 이 화면(.bc-test-shell)은
   flex-direction:column; align-items:center로 자식을 내용 크기에 맞춰 감싸는데, 카드 내부
   요소가 전부 position:absolute라 실제 흐름 콘텐츠가 없어 기준 삼을 너비가 없었다. width를
   명시해야 grid가 스스로 크기를 갖고, 그 크기가 위 조상들까지 정상적으로 전달된다. */
.bc-mem-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 260px; max-width: 100%; margin: 0 auto; }
.bc-mem-card {
  position: relative;
  width: 100%; aspect-ratio: 72 / 100; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 3px 8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
}
/* 카드 뒷면 — modules/memory-cards와 동일하게 멘사 심볼을 옅은 워터마크로 깐다 */
.bc-mem-card--empty { border-style: dashed; background: var(--bg); box-shadow: none; overflow: hidden; }
.bc-mem-card--empty::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../../../shared/images/mensa-mark.png");
  background-repeat: no-repeat; background-position: center; background-size: 46% auto;
  opacity: .18;
}
.bc-mem-card--pop { animation: bcCardReveal .3s cubic-bezier(.22,1,.36,1); }
.bc-mem-card__index { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.bc-mem-card__index--tl { top: 5px; left: 5px; }
.bc-mem-card__index--br { bottom: 5px; right: 5px; transform: rotate(180deg); }
.bc-mem-card__pip { font-size: 26px; line-height: 1; }
.bc-mem-card--red { color: var(--wrong); }
.bc-mem-card--black { color: var(--text); }
@keyframes bcCardReveal {
  from { transform: rotateY(90deg) scale(.9); opacity: 0; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bc-mem-card--pop { animation: none; } }

/* 정답 재구성 단계의 슬롯·보기 카드 — 위 .bc-mem-card를 그대로 쓰되 보기 카드만 버튼이라
   클릭 가능한 상태(hover·비활성)를 추가한다. */
.bc-mem-card--chip { cursor: pointer; font: inherit; padding: 0; transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease; }
.bc-mem-card--chip:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,.18), inset 0 0 0 1px rgba(255,255,255,.6); }
.bc-mem-card--chip:disabled { opacity: .3; cursor: default; transform: none; }

.bc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.bc-skip { border: none; background: transparent; color: var(--text-mute); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px; }
.bc-skip:hover { color: var(--primary); }

/* ── 결과 화면 ── */
.bc-score-head { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.bc-score { background: var(--surface); padding: 26px 24px; }
.bc-score__k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 14px; }
.bc-score__v { font-size: 34px; font-weight: 800; color: var(--primary-dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bc-score__v .unit { font-size: 15px; font-weight: 600; color: var(--text-mute); margin-left: 4px; }
.bc-score__sub { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; font-variant-numeric: tabular-nums; }
.bc-score__bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 16px; }
.bc-score__bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.bc-score--weak .bc-score__bar span { background: var(--game); }
.bc-score--weak .bc-score__v { color: var(--game-dark); }
@media (max-width: 700px) { .bc-score-head { grid-template-columns: 1fr; } }

.bc-result-note { margin-top: 24px; }
.bc-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.bc-recommend { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bc-paid-terms { margin-top: 24px; }
/* 추천은 2개만 노출하므로 4열 기본 그리드를 2열로 좁힌다 */
.games-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .games-grid--2 { grid-template-columns: 1fr; } }

/* 유료 구간 — 잠금 오버레이 자체는 shared/css/tokens.css(.is-locked / .locked-overlay) 공용 */
.bc-locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .bc-locked-grid { grid-template-columns: 1fr; } }
.bc-locked-panel { position: relative; min-height: 300px; }
.bc-locked-panel .locked-overlay .btn { min-width: 180px; }

/* 잠금 미리보기 안의 표 — 무엇이 잠겨 있는지 형태로만 보여준다(내용은 흐려짐) */
.bc-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--text-mute); }
.bc-preview-row:last-child { border-bottom: 0; }
.bc-preview-row b { color: var(--text); font-variant-numeric: tabular-nums; }