/* ============================================================
   scale.css — 생명의 저울 (보드·저울·핀 시트·스트림·프로젝션)
   ============================================================ */

/* ===================== 학생 보드 (Task 6) =====================
   warm paper 배경(stage-student) 위에 얹는다 — 다크 아님.
   375px 모바일 기준. 기존 토큰(--ink/--slate/--line/--surface 등) 재사용. */
.sc-board-stage { position: relative; }

/* 진행 게이지 — 4곳 중 n곳 */
.sc-gauge { padding: 12px 20px 4px; }
.sc-gauge-label { font-size: 13px; font-weight: 700; color: var(--slate); margin-bottom: 6px; }
.sc-gauge-label b { color: var(--ink); font-size: 15px; }
.sc-gauge-track { height: 10px; border-radius: 99px; background: var(--paper-2, #ece7df); overflow: hidden; }
.sc-gauge-track i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #3f6fa8, #6a9bd1); transition: width .4s var(--ease); }

/* 보드 스크롤 영역 */
.sc-board { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 96px; }

/* 핀 카드 2×2 그리드 */
.sc-pin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-pin-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 14px 44px; border-radius: var(--r-lg, 16px); text-align: left;
  background: var(--surface); border: 2px solid var(--line);
  transition: border-color .12s, transform .1s, box-shadow .12s; min-height: 120px;
}
.sc-pin-card:active { transform: scale(.98); }
.sc-pin-card .sc-pin-emoji { font-size: 26px; }
.sc-pin-title { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.sc-pin-sub { font-size: 11px; color: var(--slate); line-height: 1.3; }
/* 상태별 테두리 — 미완료/투표만/완료 */
.sc-pin-todo { border-color: var(--line); }
.sc-pin-arg { border-color: #e8a13c; box-shadow: 0 0 0 1px #e8a13c33; }
.sc-pin-done { border-color: #4a9d6a; background: #f4faf6; }
/* 상태 배지 — 카드 하단 좌측 */
.sc-pin-badge { position: absolute; left: 14px; bottom: 12px;
  font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.sc-badge-todo { background: var(--t2-soft, #e6eef7); color: #3f6fa8; }
.sc-badge-arg { background: #fbe6cf; color: #a5691a; }
.sc-badge-done { background: #dcefe3; color: #2f7a4f; }

/* 5번 잠금 카드 */
.sc-unlock-card { margin-top: 12px; border-radius: var(--r-lg, 16px); border: 2px dashed var(--line); }
.sc-unlock-card.open { border-style: solid; border-color: #7a5cc4; }
.sc-unlock-locked, .sc-unlock-btn {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 14px; text-align: center; background: transparent; border-radius: var(--r-lg, 16px);
}
.sc-unlock-locked { color: var(--slate); }
.sc-unlock-locked .sc-pin-emoji, .sc-unlock-btn .sc-pin-emoji { font-size: 28px; }
.sc-unlock-btn { color: var(--ink); }
.sc-unlock-btn:active { background: #f3eefc; }

/* 해제 시 추가 활동 카드 */
.sc-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sc-extra-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px;
  border-radius: var(--r-lg, 16px); background: var(--surface); border: 2px solid var(--line);
  color: var(--ink); text-align: center;
}
.sc-extra-card:active { transform: scale(.98); }
.sc-extra-card .sc-pin-emoji { font-size: 26px; }

/* 나침반 FAB — 우하단 고정 */
.sc-compass-fab {
  position: fixed; right: 18px; bottom: 20px; z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; font-size: 26px;
  background: #2f3a4a; color: #fff; box-shadow: var(--sh-3, 0 8px 24px rgba(0,0,0,.28));
  display: flex; align-items: center; justify-content: center;
}
.sc-compass-fab:active { transform: scale(.94); }
.sc-fab-badge { position: absolute; top: -2px; right: -2px; font-size: 18px; }

/* 시트 공통(나침반·핀 자리표시) — .sheet 전역 재사용 */
.sc-sheet-body { padding: 22px 20px 28px; overflow-y: auto; }
/* 핀 배경 이미지 히어로 — 시트 상단 풀블리드(본문 패딩 상쇄) + 하단 그라디언트로 제목과 연결 */
.sc-pin-hero {
  height: 150px; margin: -22px -20px 14px;
  background-size: cover; background-position: center; position: relative;
}
.sc-pin-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 45%, var(--surface) 100%);
}
.sc-sheet-title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 6px; padding-right: 44px; }
.sc-sheet-lead { font-size: 13px; color: var(--slate); line-height: 1.5; margin: 0 0 16px; }

/* 나침반 시트 — 6인 카드 */
.sc-compass-list { display: flex; flex-direction: column; gap: 10px; }
.sc-compass-card { display: flex; gap: 13px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md, 12px);
  background: var(--paper, #faf7f2); border: 1px solid var(--line); }
/* 사상가 흑백 스케치 초상 — 둥근 사각 프레임. 흰 배경 스케치라 종이 톤과 자연스럽게 이어짐 */
.sc-compass-portrait {
  width: 58px; height: 58px; flex: none; object-fit: cover; object-position: top center;
  border-radius: 10px; background: #fff; border: 1px solid var(--line);
}
.sc-compass-body { flex: 1; min-width: 0; }
.sc-compass-name { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.sc-compass-oneliner { font-size: 13px; color: var(--ink); line-height: 1.45; }
/* 사상가 원전 인용 — 왼쪽 색막대 + 이탤릭으로 '실제 말'임을 구분 */
.sc-compass-quote { font-size: 12.5px; color: var(--ink); line-height: 1.55; font-style: italic;
  margin-top: 8px; padding: 6px 0 6px 10px; border-left: 3px solid #b9c4d6; }
.sc-compass-quote-src { font-style: normal; font-weight: 700; color: var(--slate); }
.sc-compass-hint { font-size: 12px; color: var(--slate); margin-top: 6px; }

/* ============================================================
   🔎 더 알아보기 — 핀별 교과서 자료(타임라인·유형·비교·특성)
   ============================================================ */
.sc-learn { margin: 6px 0 4px; }
.sc-learn-toggle { display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--brand, #b06a3b); background: none; border: none; padding: 4px 0; cursor: pointer; }
.sc-learn-body { margin-top: 6px; padding: 12px 14px; border-radius: 12px;
  background: var(--paper, #faf7f2); border: 1px solid var(--line); }
.sc-learn-intro { font-size: 12.5px; color: var(--ink); line-height: 1.6; margin: 0 0 10px; }
.sc-learn-note { font-size: 12px; color: var(--slate); line-height: 1.55; margin: 10px 0 0; }

/* 타임라인(인간 지위 인정 시점) — 세로 스텝, 좌측 점·연결선 */
.sc-learn-timeline { list-style: none; margin: 0; padding: 0; }
.sc-learn-step { position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 0 0 12px 16px; }
.sc-learn-step::before { content: ""; position: absolute; left: 3px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: #3f6fa8; }
.sc-learn-step:not(:last-child)::after { content: ""; position: absolute; left: 6.5px; top: 12px;
  bottom: 0; width: 2px; background: #cdd8e6; }
.sc-learn-when { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #3f6fa8; min-width: 46px; }
.sc-learn-steplabel { font-size: 13px; color: var(--ink); line-height: 1.4; }

/* 유형(안락사 구분) — 축별 그룹 */
.sc-learn-axes { display: flex; flex-direction: column; gap: 12px; }
.sc-learn-axis-by { font-size: 12px; font-weight: 800; color: var(--slate); margin-bottom: 6px; }
.sc-learn-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; margin-bottom: 6px;
  border-radius: 9px; background: #fff; border: 1px solid var(--line); }
.sc-learn-item:last-child { margin-bottom: 0; }
.sc-learn-item b { font-size: 13px; font-weight: 800; color: var(--ink); }
.sc-learn-item span { font-size: 12px; color: var(--slate); line-height: 1.45; }

/* 비교(뇌사 vs 식물인간) — tone별 좌측 색 */
.sc-learn-compare { display: flex; flex-direction: column; gap: 8px; }
.sc-learn-crow { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
  border-radius: 10px; background: #fff; border: 1px solid var(--line); border-left-width: 4px; }
.sc-learn-crow b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.sc-learn-crow span { font-size: 12px; color: var(--slate); line-height: 1.5; }
.sc-learn-hard { border-left-color: #b0451a; }
.sc-learn-soft { border-left-color: #2f7a4f; }

/* 특성(죽음의 네 가지 특성) — 2열 카드 */
.sc-learn-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-learn-trait { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.sc-learn-trait b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sc-learn-trait span { font-size: 11.5px; color: var(--slate); line-height: 1.4; }

/* ============================================================
   핀 시트 본문 (T7) — 배경·이론 태그·Q1/Q2·저울·근거 스트림·성찰
   ============================================================ */
/* 배경·출처·도입 클립 */
.sc-pin-bg { font-size: 13px; color: var(--ink); line-height: 1.6; margin: 4px 0 12px; }
.sc-pin-clip { font-size: 12px; color: var(--slate); line-height: 1.55;
  background: var(--paper, #faf7f2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin: 0 0 12px; }
.sc-pin-source { font-size: 11px; color: var(--slate); margin: 10px 0 4px; }

/* 📚 이론 태그 접힘 토글 */
.sc-theory-toggle { display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--brand, #b06a3b); background: none; border: none; padding: 4px 0; cursor: pointer; }
.sc-theory-list { margin: 4px 0 4px; padding-left: 18px; }
.sc-theory-list li { font-size: 12.5px; color: var(--ink); line-height: 1.6; }

/* Q 블록 공통 */
.sc-q-block { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sc-q-label { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.sc-hint-mini { font-size: 11.5px; color: var(--slate); margin: 8px 0 0; }

/* Q1 좌/우 버튼 — --q1c로 진영색 주입 */
.sc-q1-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-q1-btn { display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.sc-q1-btn.sel { border-color: var(--q1c); background: color-mix(in srgb, var(--q1c) 8%, #fff); }
/* 라벨 텍스트는 --ink(대비 확보 — WCAG AA). 진영색은 좌측 색막대(::before)로만 노출해
   #e8633c(우측)가 흰 배경에서 3:1 미달하는 대비 문제를 피한다. */
.sc-q1-label { position: relative; padding-left: 12px; font-size: 14px; font-weight: 800; color: var(--ink); }
.sc-q1-label::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 5px; border-radius: 3px; background: var(--q1c); }
.sc-q1-sub { font-size: 11.5px; color: var(--slate); line-height: 1.4; }
.sc-sealed-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 12px 14px;
  border-radius: 12px; border: 2px solid var(--line); background: var(--paper, #faf7f2); color: var(--ink); }
.sc-sealed-badge b { color: var(--ink); }
.sc-sealed-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }

/* 개봉 대기 / 저울 */
.sc-reveal-block { margin-top: 16px; }
.sc-reveal-wait { font-size: 13px; color: var(--slate); text-align: center;
  padding: 20px 14px; border-radius: 12px; border: 1px dashed var(--line);
  background: var(--paper, #faf7f2); }
.sc-scale-svg { padding: 4px 0; }
.sc-scale-svg svg { width: 100%; height: auto; display: block; }
/* 빔 회전 transition — 다수 쪽으로 부드럽게 기울기 */
.sc-beam { transition: transform .6s cubic-bezier(.34, 1.2, .64, 1); }
.sc-ratio-bar { display: flex; height: 22px; border-radius: 11px; overflow: hidden;
  margin-top: 8px; border: 1px solid var(--line); }
.sc-ratio-bar span { display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; transition: width .6s ease; }

/* Q2 이론 칩·입력 */
.sc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc-chip { font-size: 11.5px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.sc-chip.sel { border-color: var(--brand, #b06a3b); background: color-mix(in srgb, var(--brand, #b06a3b) 10%, #fff);
  color: var(--brand, #b06a3b); font-weight: 700; }
.sc-input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.sc-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; resize: vertical; font-family: inherit; }
.sc-my-arg { margin-top: 14px; font-size: 13px; color: var(--ink); line-height: 1.5;
  background: var(--paper, #faf7f2); border-radius: 10px; padding: 12px 14px; }

/* 익명 근거 스트림 */
.sc-arg-stream { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sc-arg-row { display: flex; align-items: center; gap: 8px; padding: 10px 0;
  border-bottom: 1px solid var(--line); }
.sc-arg-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.sc-arg-text { flex: 1 1 auto; font-size: 13px; color: var(--ink); line-height: 1.45; }
.sc-arg-text b { color: var(--ink); }
.sc-like-btn { flex: 0 0 auto; min-width: 42px; min-height: 42px; padding: 0 10px;
  font-size: 13px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--slate); cursor: pointer; }
.sc-like-btn.liked { border-color: var(--brand, #b06a3b); background: color-mix(in srgb, var(--brand, #b06a3b) 12%, #fff);
  color: var(--brand, #b06a3b); font-weight: 700; }
.sc-like-btn.own, .sc-like-btn:disabled { opacity: .55; cursor: default; }

/* 성찰 핀 — 나침반 라디오·안내 박스(경쟁색 배제, 파스텔) */
.sc-compass-radio { display: flex; flex-direction: column; gap: 8px; }
.sc-radio-card { display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; }
.sc-radio-card.sel { border-color: #7a8fb0; background: #eef2f8; }
.sc-radio-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.sc-radio-line { font-size: 12px; color: var(--slate); line-height: 1.4; }
.sc-my-reflect { margin-top: 8px; }
.sc-reflect-answer { font-size: 13.5px; color: var(--ink); line-height: 1.6; margin-bottom: 6px; }
.sc-reflect-note { margin-top: 18px; font-size: 12.5px; color: #4a5a3a; line-height: 1.65;
  background: #f0f4ea; border: 1px solid #d8e2ca; border-radius: 12px; padding: 14px 16px; }

/* ============================================================
   해제 후 활동 시트 (T8) — 입장 바꾸기·자작 딜레마·서술형
   ============================================================ */
/* 입장 바꾸기 — 반대편 논거 도착/대기 */
.sc-swap-done { margin-top: 8px; }
.sc-swap-received { margin-top: 12px; border-radius: 12px; padding: 14px 16px;
  background: #f3eefc; border: 1px solid #d9c9f2; }
.sc-swap-recv-title { font-size: 13px; font-weight: 800; color: #6a4bb0; margin-bottom: 6px; }
.sc-swap-recv-body { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.sc-swap-recv-body b { color: var(--ink); }
.sc-swap-wait { margin-top: 12px; font-size: 13px; color: var(--slate); text-align: center;
  padding: 16px 14px; border-radius: 12px; border: 1px dashed var(--line); background: var(--paper, #faf7f2); }

/* 자작 딜레마 — 경고 배너·금칙어 안내·제출본 카드 */
.sc-dilemma-warn { font-size: 12.5px; color: #8a5a1a; line-height: 1.5;
  background: #fbf1e3; border: 1px solid #ecd6b6; border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
.sc-banned-box { margin-top: 12px; font-size: 12.5px; color: #4a5a3a; line-height: 1.65;
  background: #f0f4ea; border: 1px solid #d8e2ca; border-radius: 12px; padding: 14px 16px; }
.sc-dilemma-done { margin-top: 8px; }
.sc-dilemma-card { border-radius: 12px; padding: 14px 16px; background: var(--paper, #faf7f2); border: 1px solid var(--line); }
.sc-dilemma-line { font-size: 13px; color: var(--ink); line-height: 1.55; margin-bottom: 6px; }
.sc-dilemma-line:last-child { margin-bottom: 0; }
.sc-dilemma-line b { display: inline-block; min-width: 62px; color: var(--slate); font-weight: 700; }

/* 서술형 — 제출본 카드 */
.sc-essay-done { margin-top: 8px; }
.sc-essay-card { border-radius: 12px; padding: 14px 16px; background: var(--paper, #faf7f2); border: 1px solid var(--line); }
.sc-essay-row { font-size: 13px; color: var(--ink); line-height: 1.55; margin-bottom: 8px; }
.sc-essay-row:last-child { margin-bottom: 0; }
.sc-essay-row b { display: block; color: var(--slate); font-weight: 700; font-size: 12px; margin-bottom: 2px; }

/* ============================================================
   마감 화면 (T8) — 성향 프로필 카드·기록 요약
   ============================================================ */
.sc-profile-card { margin: 4px 0 16px; border-radius: var(--r-lg, 16px); padding: 22px 20px; text-align: center;
  background: linear-gradient(160deg, #eef3fb, #f6f0fa); border: 1px solid #dfe2f0; }
.sc-profile-partial { background: var(--paper, #faf7f2); border: 1px solid var(--line); }
.sc-profile-kicker { font-size: 12px; font-weight: 700; color: var(--slate); letter-spacing: .02em; }
.sc-profile-lean { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.4; margin: 8px 0; }
.sc-profile-pattern { display: inline-block; font-size: 22px; font-weight: 800; letter-spacing: .28em;
  color: #4a5a7a; padding: 4px 4px 4px 12px; }
.sc-profile-match { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.sc-profile-match b { color: #4a5a7a; font-size: 16px; }
.sc-profile-note { font-size: 12px; color: var(--slate); line-height: 1.6; margin: 10px 0 0; }

/* 기록 요약 */
.sc-summary { display: flex; flex-direction: column; gap: 10px; }
.sc-summary-item { border-radius: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
.sc-summary-head { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.sc-summary-body { font-size: 12.5px; color: var(--ink); line-height: 1.55; }
.sc-summary-body b { color: var(--ink); }
.sc-summary-dim { color: var(--slate); }

/* ============================================================
   교사 대시보드 (T9) — 핀 카드(미니 저울·온도계·개봉 토글)·딜레마 스트림·서술형 목록
   ============================================================ */
.sc-block-banner { margin: 0 0 18px; font-size: 13.5px; font-weight: 700; color: #8a4a1a;
  background: #fbf1e3; border: 1px solid #ecd6b6; border-radius: 12px; padding: 12px 16px; }

.sc-t-pin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.sc-t-pin-card { background: var(--surface); border-radius: var(--r-lg, 16px); border: 1px solid var(--line);
  padding: 16px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 8px; }
.sc-t-pin-head { display: flex; align-items: flex-start; gap: 8px; }
.sc-t-pin-head .sc-pin-emoji { font-size: 22px; }
.sc-t-pin-title { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.sc-t-pin-sub { font-size: 11px; color: var(--slate); margin-top: 2px; }
.sc-t-mini-scale { max-width: 190px; margin: 2px auto; }
.sc-t-pin-count { font-size: 12px; color: var(--slate); text-align: center; }
.sc-t-temp { font-size: 12px; font-weight: 700; text-align: center; padding: 5px 8px; border-radius: 8px;
  background: var(--paper, #faf7f2); color: var(--ink); }
.sc-t-temp-none { color: var(--slate); font-weight: 600; }
.sc-t-temp.hot { background: #fbe3d8; color: #b0451a; }
.sc-t-temp.calm { background: #dcefe3; color: #2f7a4f; }
.sc-t-reveal-btn { width: 100%; justify-content: center; }
.sc-t-reveal-btn.on { background: var(--t2-soft); color: var(--t2-ink); border-color: var(--t2); }
.sc-t-reflect-card { align-items: center; justify-content: center; text-align: center; }
.sc-t-reflect-count { font-size: 15px; color: var(--ink); margin-top: 6px; }
.sc-t-reflect-count b { font-size: 26px; display: block; }

.sc-t-section { margin: 26px 0; }
.sc-t-section-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }

.sc-t-dilemma-list { display: flex; flex-direction: column; gap: 10px; }
.sc-t-dilemma-row { background: var(--surface); border-radius: 12px; border: 1px solid var(--line); padding: 12px 16px; }
.sc-t-dilemma-name { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.sc-t-dilemma-body div { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-bottom: 2px; }
.sc-t-dilemma-body b { display: inline-block; min-width: 62px; color: var(--slate); font-weight: 700; }

.sc-t-essay-list { display: flex; flex-direction: column; gap: 6px; }
.sc-t-essay-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border-radius: 10px; border: 1px solid var(--line); padding: 10px 16px; cursor: pointer; }
.sc-t-essay-row:hover { border-color: var(--t2); }
.sc-t-essay-name { font-size: 13px; font-weight: 800; color: var(--ink); flex: 0 0 auto; min-width: 64px; }
.sc-t-essay-pin { font-size: 11.5px; color: var(--slate); flex: 0 0 auto; background: var(--paper, #faf7f2);
  border-radius: 999px; padding: 2px 10px; }
.sc-t-essay-preview { font-size: 12.5px; color: var(--ink); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-essay-sheet .sc-essay-card { border-radius: 12px; padding: 14px 16px; background: var(--paper, #faf7f2); border: 1px solid var(--line); }

.sc-t-footer { display: flex; justify-content: flex-end; gap: 12px; margin: 30px 0 10px; }

@media (max-width: 900px) {
  .sc-t-pin-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sc-t-pin-grid { grid-template-columns: 1fr; }
  .sc-t-essay-row { flex-wrap: wrap; }
  .sc-t-footer { flex-direction: column-reverse; }
}

/* ============================================================
   프로젝션 — L3Present (T9, 전자칠판·실명 비노출)
   ============================================================ */
.sc-present { min-height: 100vh; background: linear-gradient(160deg, #1b2432, #232d3d); color: #f2f0ea;
  display: flex; flex-direction: column; }
.sc-present-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sc-present-title { font-size: 20px; font-weight: 800; }
.sc-present-tabs { display: flex; gap: 8px; }
.sc-present-tab { font-size: 15px; font-weight: 700; padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #f2f0ea; cursor: pointer; }
.sc-present-tab.on { background: #f2f0ea; color: #1b2432; border-color: #f2f0ea; }
.sc-present-body { flex: 1; padding: 32px; max-width: 900px; margin: 0 auto; width: 100%; overflow-y: auto; }
.sc-present-pin-title { font-size: 34px; font-weight: 800; margin: 0 0 4px; text-align: center; }
.sc-present-pin-sub { font-size: 16px; color: rgba(242,240,234,.7); text-align: center; margin: 0 0 24px; }
.sc-present-scale { max-width: 420px; margin: 0 auto; }
.sc-present-scale .sc-beam line, .sc-present-scale .sc-beam path { filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.sc-present-counts { display: flex; justify-content: center; gap: 32px; font-size: 18px; font-weight: 800; margin: 14px 0; }
.sc-present-temp { text-align: center; font-size: 15px; font-weight: 700; margin: 0 0 26px;
  display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,.1);
  margin-left: auto; margin-right: auto; }
.sc-present-temp.hot { background: #6a2c14; color: #ffb088; }
.sc-present-temp.calm { background: #1f4a33; color: #9ee8bb; }
.sc-present-args-title { font-size: 15px; font-weight: 800; color: rgba(242,240,234,.85); margin: 24px 0 12px; text-align: center; }
.sc-present-arg-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px;
  background: rgba(255,255,255,.08); margin-bottom: 12px; }
.sc-present-arg-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.sc-present-arg-body { flex: 1 1 auto; }
.sc-present-arg-theory { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.sc-present-arg-text { font-size: 17px; line-height: 1.5; }
.sc-present-arg-likes { flex: 0 0 auto; font-size: 16px; font-weight: 800; color: #ffd36e; }
.sc-present-reflect-flow { display: flex; flex-direction: column; gap: 14px; }
.sc-present-reflect-card { font-size: 18px; line-height: 1.6; padding: 20px 24px; border-radius: 16px;
  background: rgba(255,255,255,.07); text-align: center; }
.sc-present .empty-note { text-align: center; color: rgba(242,240,234,.6); }
@media (max-width: 720px) {
  .sc-present-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .sc-present-body { padding: 20px; }
  .sc-present-pin-title { font-size: 26px; }
}

/* ── 개봉 연출·리마인더 (검토보고서 P1) ── */
.sc-reveal-in { animation: sc-reveal-drop .9s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes sc-reveal-drop {
  from { opacity: 0; transform: translateY(-26px) scale(.9); }
  55%  { opacity: 1; transform: translateY(4px) scale(1.02); }
  to   { opacity: 1; transform: none; }
}
.sc-open-banner { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; font-size: 14px;
  background: #fdf1e2; color: #8a4a1a; border: 1.5px solid #ecc9a3; animation: sc-banner-in .3s ease both; }
@keyframes sc-banner-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sc-t-reveal-btn.ready { animation: sc-pulse 1.2s ease-in-out infinite; border-color: #e07b1f !important; color: #97501a; }
@keyframes sc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 123, 31, .45); } 50% { box-shadow: 0 0 0 7px rgba(224, 123, 31, 0); } }
/* 프로젝션 봉인 중 무대 */
.sc-present-sealed { text-align: center; padding: 40px 20px; }
.sc-present-sealed-lock { font-size: 64px; margin-bottom: 12px; }
.sc-present-sealed-count { font-size: 22px; font-weight: 800; }
.sc-present-sealed-count b { font-size: 40px; }
.sc-present-sealed-hint { margin-top: 8px; font-size: 15px; opacity: .75; }
/* 도입 표지·정리(관통 비교) 무대 */
.sc-present-cover { text-align: center; padding: 48px 20px; }
.sc-present-cover-emoji { font-size: 72px; margin-bottom: 14px; }
.sc-present-cover-title { font-size: 44px; font-weight: 900; margin-bottom: 18px; }
.sc-present-cover-q { font-size: 24px; line-height: 1.6; margin-bottom: 14px; }
.sc-present-cover-hint { font-size: 16px; line-height: 1.8; opacity: .8; }
.sc-present-cover-join { margin-top: 30px; font-size: 20px; }
.sc-present-cover-join b { font-size: 30px; letter-spacing: 3px; }
.sc-present-wrap { padding: 10px 0 30px; }
.sc-present-sac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.sc-present-sac-col { border: 1.5px solid rgba(242, 240, 234, .2); border-radius: 16px; padding: 16px; }
.sc-present-sac-head { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.sc-present-sac-chip { font-size: 14.5px; line-height: 1.5; padding: 8px 12px; margin-bottom: 7px;
  background: rgba(255, 255, 255, .06); border-radius: 10px; }
/* 서술형 한 줄 코멘트 */
.sc-essay-comment { margin-top: 16px; }
.sc-comment-row { display: flex; gap: 8px; margin-top: 6px; }
.sc-comment-row .t-input { flex: 1; }
.sc-teacher-comment .sc-summary-body { font-weight: 700; }
/* 모둠 공동 답안 배너 */
.sc-group-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: #eef1f7; color: #33608f; border: 1.5px solid #c3ccdd; }