/* ============================================================
   p4c.css — 철학적 탐구공동체 (lessonType: "p4c")
   콘셉트: "원고지 × 질문의 사다리"
   — 따뜻한 백지에 원고지 격자, 심청록 먹, 질문은 세리프 인용으로 크게.
   크롬북(가로+키보드) 우선, 폰 반응형. 교사 프로젝션은 큰 글씨.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root {
  --qcInk: #1d2b28;          /* 심청록 먹 */
  --qcInk2: #5a6b66;
  --qcPaper: #fbf9f4;        /* 백지 */
  --qcGrid: #e7e2d5;         /* 원고지 격자 */
  --qcTeal: #14655a;         /* 청록 */
  --qcTealSoft: #dcefe9;
  --qcCoral: #d2603f;        /* 투표·강조 */
  --qcGold: #b8912b;
  --qcSerif: "Gowun Batang", "Nanum Myeongjo", serif;
}

/* ================= 공통 무대 ================= */
.qc-paper {
  min-height: 100vh; min-height: 100dvh;
  background:
    linear-gradient(#00000003 1px, transparent 1px),
    linear-gradient(90deg, #00000003 1px, transparent 1px),
    var(--qcPaper);
  background-size: 28px 28px, 28px 28px, auto;
  color: var(--qcInk);
  display: flex; flex-direction: column;
}
.qc-stage { max-width: 760px; width: 100%; margin: 0 auto; padding: 0 18px 48px; flex: 1; display: flex; flex-direction: column; }
.qc-scroll { flex: 1; padding-top: 8px; }
.qc-center-col { text-align: center; padding-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qc-h2 { font-family: var(--qcSerif); font-size: 21px; font-weight: 700; margin: 6px 0; }
.qc-muted { font-size: 14px; color: var(--qcInk2); line-height: 1.7; margin: 2px 0; }
.qc-kicker { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--qcTeal); }
.qc-err { font-size: 13px; color: var(--qcCoral); font-weight: 700; margin: 8px 0; }
.qc-ok-note { font-size: 13px; color: var(--qcTeal); font-weight: 700; margin: 10px 0 0; }

/* 상단 바 */
.qc-top { display: flex; align-items: center; gap: 10px; padding: 14px 2px 10px;
  border-bottom: 2px solid var(--qcInk); margin-bottom: 14px; }
.qc-top-title { font-family: var(--qcSerif); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 7px; }
.qc-top-g { font-size: 11px; font-weight: 800; color: #fff; background: var(--qcTeal); border-radius: 3px; padding: 3px 8px; }
.qc-top-phase { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--qcInk2); }
.qc-top-leave { background: none; border: none; font-size: 13px; color: var(--qcInk2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }

/* CTA */
.qc-cta { width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15.5px; font-weight: 800;
  font-family: var(--qcSerif); cursor: pointer; transition: all .15s;
  background: var(--qcTeal); color: #fff; box-shadow: 0 4px 0 #0d4a42; }
.qc-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #0d4a42; }
.qc-cta.off { background: #cfd6cf; color: #8b968f; cursor: default; box-shadow: none; }

/* ---------- 입장 ---------- */
.qc-enter-stage { justify-content: center; align-items: center; padding: 26px 16px; }
.qc-enter-card { width: 100%; max-width: 440px; text-align: center; }
.qc-enter-emoji { font-size: 46px; }
.qc-enter-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: 4px; color: var(--qcTeal); margin: 6px 0 2px; }
.qc-enter-title { font-family: var(--qcSerif); font-size: 31px; font-weight: 700; margin: 0 0 8px; }
.qc-enter-sub { font-size: 14px; color: var(--qcInk2); margin: 0 0 16px; }
.qc-namegrid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 16px; max-height: 220px; overflow-y: auto; }
.qc-name { border: 1.5px solid var(--qcGrid); border-radius: 999px; padding: 8px 16px; font-size: 13.5px;
  font-weight: 700; color: var(--qcInk2); background: #fff; cursor: pointer; transition: all .13s; }
.qc-name:hover { border-color: var(--qcTeal); color: var(--qcTeal); }
.qc-name.on { background: var(--qcTeal); border-color: var(--qcTeal); color: #fff; }
.qc-pw-input { width: 100%; box-sizing: border-box; text-align: center; font-size: 20px; font-weight: 800;
  letter-spacing: 6px; padding: 12px; margin-bottom: 14px; color: var(--qcInk);
  background: #fff; border: 2px solid var(--qcInk); border-radius: 12px; outline: none; }
.qc-pw-input:focus { border-color: var(--qcTeal); box-shadow: 0 0 0 3px #14655a26; }

/* ---------- 자극 자료 ---------- */
.qc-stimulus { border-left: 4px solid var(--qcTeal); background: #fff; border-radius: 0 14px 14px 0;
  padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 0 #0000000a; }
.qc-stimulus-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--qcTeal); }
.qc-stimulus-title { font-family: var(--qcSerif); font-size: 22px; font-weight: 700; margin: 6px 0 4px; line-height: 1.45; }
.qc-stimulus-body { font-size: 14px; color: var(--qcInk2); line-height: 1.75; margin: 6px 0 0; white-space: pre-wrap; }

/* ---------- 봉인 작성 ---------- */
.qc-sealbox, .qc-pickbox { border: 1.5px solid var(--qcGrid); border-radius: 16px; background: #fff;
  padding: 16px; margin-top: 14px; }
.qc-seal-head { font-family: var(--qcSerif); font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.qc-seal-head span { display: block; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--qcInk2); margin-top: 2px; }
.qc-ta { width: 100%; box-sizing: border-box; border: 1.5px solid var(--qcGrid); border-radius: 12px;
  background: var(--qcPaper); padding: 12px 14px; font-size: 15px; line-height: 1.8; font-family: var(--qcSerif);
  color: var(--qcInk); outline: none; resize: vertical; }
.qc-ta:focus { border-color: var(--qcTeal); box-shadow: 0 0 0 3px #14655a1c; background: #fff; }
.qc-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--qcGrid); border-radius: 10px;
  background: var(--qcPaper); padding: 10px 13px; font-size: 14px; margin-top: 8px; margin-bottom: 10px;
  color: var(--qcInk); outline: none; font-family: inherit; }
.qc-input:focus { border-color: var(--qcTeal); background: #fff; }
.qc-progress-note { text-align: center; font-size: 12.5px; color: var(--qcInk2); margin-top: 14px; }

/* ---------- 질문 카드(모둠·벽·결선) ---------- */
.qc-qcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.qc-qcards.final { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.qc-qcard { position: relative; text-align: left; border: 1.5px solid var(--qcGrid); border-radius: 16px;
  background: #fff; padding: 16px 16px 12px; cursor: pointer; transition: all .15s; display: flex;
  flex-direction: column; gap: 6px; }
.qc-qcard:hover:not(:disabled) { border-color: var(--qcTeal); transform: translateY(-2px); box-shadow: 0 6px 14px #14655a14; }
.qc-qcard.on { border-color: var(--qcCoral); background: #fdf3ee; box-shadow: 0 0 0 3px #d2603f22; }
.qc-qcard.on::after { content: "✓ 내 표"; position: absolute; top: 10px; right: 12px; font-size: 11px;
  font-weight: 900; color: #fff; background: var(--qcCoral); border-radius: 999px; padding: 3px 9px; }
.qc-qcard.mine { opacity: .55; cursor: not-allowed; background: var(--qcPaper); }
.qc-qcard.big .qc-qcard-q { font-size: 18px; }
.qc-qcard-q { font-family: var(--qcSerif); font-size: 15.5px; font-weight: 700; line-height: 1.6; margin: 0; color: var(--qcInk); }
.qc-qcard-why { font-size: 12.5px; color: var(--qcInk2); margin: 0; line-height: 1.55; }
.qc-qcard-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto;
  font-size: 12px; color: var(--qcInk2); }
.qc-qcard-foot b { color: var(--qcCoral); }
.qc-tied { margin-top: 14px; text-align: center; font-size: 14px; color: var(--qcGold); background: #faf4e2;
  border: 1.5px dashed var(--qcGold); border-radius: 12px; padding: 12px; }

/* ---------- 토론 ---------- */
.qc-dialogue-q { font-family: var(--qcSerif); font-weight: 700; line-height: 1.5; color: var(--qcInk); }
.qc-dialogue-q.student { font-size: 26px; margin: 10px 0; }
.qc-reason { font-size: 13.5px; color: var(--qcInk2); margin: 4px 0; line-height: 1.6; }
.qc-reason span { font-size: 12px; color: #9aa8a2; }

/* ---------- 에세이 ---------- */
.qc-essay-wrap { max-width: 720px; margin: 0 auto; width: 100%; padding-bottom: 84px; }   /* FAB(우하단 메뉴)와 겹침 방지 */
.qc-context { position: sticky; top: 0; z-index: 5; background: var(--qcPaper); border: 1.5px solid var(--qcGrid);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; box-shadow: 0 4px 12px #0000000d; }
.qc-context-q { font-family: var(--qcSerif); font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--qcTeal); }
.qc-context-fold { margin-top: 6px; font-size: 12.5px; color: var(--qcInk2); }
.qc-context-fold summary { cursor: pointer; font-weight: 700; }
.qc-context-fold p { margin: 4px 0 0 12px; line-height: 1.55; }
.qc-essay-field { margin-bottom: 12px; }
.qc-essay-label { display: block; font-family: var(--qcSerif); font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.qc-essay-meter { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }   /* 모바일: 자동저장 표시가 줄바꿈되도록 */
.qc-essay-meterbar { flex: 1; height: 6px; border-radius: 3px; background: var(--qcGrid); overflow: hidden; }
.qc-essay-meterbar div { height: 100%; border-radius: 3px; background: var(--qcTeal); transition: width .3s; }
.qc-essay-count { font-size: 12.5px; font-weight: 800; color: var(--qcInk2); }
.qc-essay-count.ok { color: var(--qcTeal); }
.qc-essay-saved { font-size: 11.5px; color: #9aa8a2; flex-basis: 100%; text-align: left; }   /* 항상 둘째 줄 — FAB와 경합 방지 */
.qc-done-essay { text-align: left; border: 1.5px solid var(--qcGrid); border-radius: 14px; background: #fff;
  padding: 14px 16px; max-width: 560px; }
.qc-done-essay p { font-size: 13.5px; line-height: 1.7; margin: 6px 0; }
.qc-done-essay b { color: var(--qcTeal); margin-right: 6px; }

/* ================= 교사 대시보드 + 프로젝션 ================= */
.qc-host { display: flex; flex-direction: column; min-height: 100vh; background: var(--qcPaper); color: var(--qcInk); }
.qc-host-head { padding: 14px 18px 10px; border-bottom: 2px solid var(--qcInk); background: #fff; }
.qc-host-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-host-id { display: flex; align-items: baseline; gap: 10px; }
.qc-roomcode { font-family: var(--qcSerif); font-size: 27px; font-weight: 700; letter-spacing: 5px; }
.qc-count { font-size: 13px; color: var(--qcInk2); font-weight: 700; }
.qc-chip { border: 1.5px solid var(--qcGrid); border-radius: 999px; padding: 7px 14px; font-size: 13px;
  font-weight: 700; background: #fff; color: var(--qcInk2); cursor: pointer; transition: all .12s; }
.qc-chip:hover { border-color: var(--qcTeal); color: var(--qcTeal); }
.qc-steps { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.qc-step { border: 1.5px solid var(--qcGrid); border-radius: 999px; padding: 7px 13px; font-size: 12.5px;
  font-weight: 700; background: #fff; color: var(--qcInk2); cursor: pointer; transition: all .12s; }
.qc-step.on { background: var(--qcTeal); border-color: var(--qcTeal); color: #fff; }
.qc-step.done { border-color: var(--qcTeal); color: var(--qcTeal); }

.qc-host-body { display: flex; flex: 1; min-height: 0; }
.qc-side { width: 330px; flex-shrink: 0; border-right: 1.5px solid var(--qcGrid); padding: 14px;
  overflow-y: auto; background: #f4f1e8; display: flex; flex-direction: column; gap: 12px; }
.qc-main { flex: 1; padding: 22px; overflow-y: auto; }
@media (max-width: 900px) { .qc-host-body { flex-direction: column; } .qc-side { width: auto; border-right: 0; border-bottom: 1.5px solid var(--qcGrid); } }

.qc-panel { border: 1.5px solid var(--qcGrid); border-radius: 14px; background: #fff; padding: 14px; }
.qc-panel-title { font-family: var(--qcSerif); font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.qc-panel-sub { font-size: 10.5px; font-weight: 600; color: var(--qcInk2); }
.qc-join { display: flex; gap: 12px; align-items: center; }
.qc-join-code { font-family: var(--qcSerif); font-size: 30px; font-weight: 700; letter-spacing: 5px; }
.qc-join-url { font-size: 12px; color: var(--qcInk2); }
.qc-meter-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--qcInk2); }
.qc-meter-row b { color: var(--qcInk); }
.qc-warn { font-size: 12.5px; color: var(--qcCoral); margin: 4px 0; line-height: 1.5; }
.qc-ok { font-size: 12.5px; color: var(--qcTeal); margin: 0; }
.qc-chosen-mini { font-size: 12.5px; color: var(--qcTeal); font-weight: 700; line-height: 1.5; }
.qc-choose-btn { display: block; width: 100%; text-align: left; border: 1.5px solid var(--qcGrid);
  border-radius: 10px; background: var(--qcPaper); padding: 9px 11px; font-size: 12.5px; margin-top: 6px;
  cursor: pointer; line-height: 1.5; }
.qc-choose-btn:hover { border-color: var(--qcTeal); }
.qc-choose-btn b { margin-right: 6px; }
.qc-choose-btn span { float: right; color: var(--qcCoral); font-weight: 800; }

/* 프로젝션(메인) — 전자칠판 큰 글씨 */
.qc-proj-center { text-align: center; padding-top: 34px; max-width: 900px; margin: 0 auto; }
.qc-proj-emoji { font-size: 52px; }
.qc-proj-title { font-family: var(--qcSerif); font-size: clamp(22px, 3.2vw, 34px); font-weight: 700; margin: 12px 0; line-height: 1.5; }
.qc-proj-sub { font-size: 16px; color: var(--qcInk2); }
.qc-proj-note { font-size: 14px; color: var(--qcInk2); margin-top: 16px; }
.qc-bigcount { font-family: var(--qcSerif); font-size: 64px; font-weight: 700; color: var(--qcTeal); margin-top: 8px; }
.qc-bigcount span { font-size: 20px; color: var(--qcInk2); margin-left: 6px; }
.qc-bigbar { height: 10px; border-radius: 5px; background: var(--qcGrid); overflow: hidden; max-width: 520px; margin: 12px auto; }
.qc-bigbar div { height: 100%; background: var(--qcTeal); border-radius: 5px; transition: width .5s; }

.qc-gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; text-align: left; }
.qc-gp-card { border: 1.5px solid var(--qcGrid); border-radius: 14px; background: #fff; padding: 13px 15px; font-size: 13px; color: var(--qcInk2); }
.qc-gp-card.done { border-color: var(--qcTeal); animation: qcPop .4s cubic-bezier(.2, 1.4, .4, 1); }
.qc-gp-card b { display: block; font-size: 12px; margin-bottom: 4px; }
.qc-gp-card p { font-family: var(--qcSerif); font-size: 14.5px; font-weight: 700; color: var(--qcInk); margin: 0; line-height: 1.55; }
@keyframes qcPop { 0% { transform: scale(.92); } 100% { transform: scale(1); } }

.qc-wallwrap { max-width: 1080px; margin: 0 auto; }
.qc-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.qc-wall.dim { opacity: .5; margin-top: 22px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.qc-wall-card { border: 1.5px solid var(--qcGrid); border-radius: 16px; background: #fff; padding: 15px 16px; }
.qc-wall-card.small { font-size: 12.5px; color: var(--qcInk2); line-height: 1.5; }
.qc-wall-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--qcInk2); font-weight: 800; }
.qc-wall-head span { color: var(--qcCoral); }
.qc-wall-q { font-family: var(--qcSerif); font-size: 16.5px; font-weight: 700; line-height: 1.55; margin: 8px 0 10px; }
.qc-wall-bar { height: 7px; border-radius: 4px; background: var(--qcGrid); overflow: hidden; }
.qc-wall-bar div { height: 100%; background: var(--qcCoral); border-radius: 4px; transition: width .4s; }

.qc-final-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.qc-final-card { border: 2px solid var(--qcInk); border-radius: 18px; background: #fff; padding: 18px; }
.qc-final-card.chosen { border-color: var(--qcGold); box-shadow: 0 0 0 4px #b8912b26; }
.qc-final-q { font-family: var(--qcSerif); font-size: 20px; font-weight: 700; line-height: 1.5; margin: 8px 0 10px; }
.qc-final-reasons { border-top: 1px dashed var(--qcGrid); padding-top: 8px; }
.qc-reason-more { font-size: 12px; color: #9aa8a2; margin: 4px 0 0; }
.qc-dialogue-reasons { max-width: 720px; margin: 14px auto 0; text-align: left; }
.qc-host .qc-dialogue-q { font-size: clamp(26px, 4vw, 44px); margin: 14px 0; }

.qc-essay-list { max-width: 860px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 8px; }
.qc-essay-item { border: 1.5px solid var(--qcGrid); border-radius: 12px; background: #fff; padding: 10px 14px; }
.qc-essay-item summary { cursor: pointer; font-size: 13.5px; }
.qc-essay-body { padding: 8px 4px 2px; }
.qc-essay-body p { font-size: 13px; line-height: 1.7; margin: 6px 0; }
.qc-essay-body b { color: var(--qcTeal); margin-right: 6px; }

.qc-overlay { position: fixed; inset: 0; background: #1d2b28cc; display: grid; place-items: center; z-index: 90; }
.qc-sheet { background: #fff; border: 2px solid var(--qcInk); border-radius: 18px; padding: 26px; max-width: 92vw; }

/* ================= 주제 세트(자극 자료+채점기준) 라이브러리 ================= */
/* 생성 폼(교사 라이트 테마) — 저장된 세트 목록·저장 바 */
.qc-topic-lib { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.qc-topic-item { display: flex; align-items: stretch; gap: 6px; }
.qc-topic-load {
  flex: 1; text-align: left; cursor: pointer; padding: 10px 14px;
  border: 1.5px solid var(--qcGrid); border-radius: 12px; background: #fff;
  display: flex; flex-direction: column; gap: 3px; font: inherit; color: inherit;
}
.qc-topic-load:hover { border-color: var(--qcTeal); }
.qc-topic-item.on .qc-topic-load { border-color: var(--qcTeal); background: var(--qcTealSoft); }
.qc-topic-load b { font-size: 14px; }
.qc-topic-load span { font-size: 12px; color: var(--qcInk2); }
.qc-topic-del {
  cursor: pointer; border: 1.5px solid var(--qcGrid); border-radius: 12px; background: #fff;
  color: var(--qcInk2); padding: 0 12px; font-size: 13px;
}
.qc-topic-del:hover { color: var(--qcCoral); border-color: var(--qcCoral); }
.qc-topic-savebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qc-topic-msg { font-size: 12.5px; color: var(--qcInk2); }

/* 채점기준 — 학생 서논술 접힘 + 교사 프로젝션·마감 열람 */
.qc-rubric-fold summary { color: var(--qcGold); }
.qc-rubric-proj {
  max-width: 640px; margin: 18px auto 0; text-align: left;
  border: 1.5px solid var(--qcGrid); border-radius: 14px; background: #fff; padding: 14px 18px;
}
.qc-rubric-proj b { display: block; font-size: 13px; color: var(--qcGold); margin-bottom: 6px; }
.qc-rubric-proj p { margin: 4px 0; font-size: 14px; line-height: 1.6; }
.qc-rubric-proj.close { margin: 14px auto 0; max-width: 860px; }

/* ================= 교사 서논술 피드백 — 기준 체크 + 한 줄 코멘트 ================= */
.qc-fb { border-top: 1px dashed var(--qcGrid); margin-top: 10px; padding-top: 10px; }
.qc-fb-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.qc-fb-chip {
  cursor: pointer; font: inherit; font-size: 12px; padding: 5px 10px;
  border: 1.5px solid var(--qcGrid); border-radius: 999px; background: #fff; color: var(--qcInk2);
}
.qc-fb-chip.on { border-color: var(--qcGold); background: #b8912b14; color: var(--qcInk); font-weight: 700; }
.qc-fb-row { display: flex; gap: 8px; }
.qc-fb-row .qc-input { flex: 1; margin: 0; }
.qc-fb-save {
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 0 14px; border: 1.5px solid var(--qcTeal); border-radius: 10px; background: var(--qcTeal); color: #fff;
}
.qc-fb-save:disabled { opacity: .6; }

/* 학생 완료 화면 — 선생님의 피드백 */
.qc-done-fb {
  max-width: 560px; width: 100%; margin-top: 14px; text-align: left;
  border: 1.5px solid var(--qcGold); border-radius: 14px; background: #b8912b0d; padding: 14px 16px;
}
.qc-done-fb-head { font-size: 13px; font-weight: 800; color: var(--qcGold); margin-bottom: 8px; }
.qc-done-fb-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qc-done-fb-badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--qcGold); background: #fff; color: var(--qcInk);
}
.qc-done-fb-count { font-size: 12px; font-weight: 700; color: var(--qcGold); }
.qc-done-fb-comment { font-family: var(--qcSerif); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }

/* ================= 결선 확정 축하(학생) — 시각 연출만(폰 소음 방지) ================= */
.qc-celebrate {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: #1d2b28d9; animation: qcCelebFade .35s ease;
  cursor: pointer; padding: 20px;
}
.qc-celebrate-card {
  background: var(--qcPaper); border: 2px solid var(--qcGold); border-radius: 22px;
  padding: 30px 26px; max-width: 560px; width: 100%; text-align: center;
  animation: qcCelebPop .5s cubic-bezier(.2, 1.6, .4, 1);
  box-shadow: 0 0 0 6px #b8912b22, 0 18px 50px #0006;
}
.qc-celebrate-emoji { font-size: 44px; animation: qcCelebBounce 1s ease infinite alternate; }
.qc-celebrate-q { font-family: var(--qcSerif); font-size: clamp(19px, 4.5vw, 26px); font-weight: 700; line-height: 1.5; margin: 12px 0 8px; }
.qc-celebrate-sub { font-size: 13px; color: var(--qcInk2); margin: 0; }
@keyframes qcCelebFade { from { opacity: 0; } }
@keyframes qcCelebPop { from { transform: scale(.7); opacity: 0; } }
@keyframes qcCelebBounce { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* ================= 서논술 익명 갤러리 ================= */
/* 교사 열람 — 선정 토글 */
.qc-gal-toggle {
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700;
  margin-top: 10px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--qcGrid); background: #fff; color: var(--qcInk2);
}
.qc-gal-toggle.on { border-color: var(--qcGold); background: #b8912b14; color: var(--qcInk); }
.qc-gal-toggle:disabled { opacity: .6; }

/* 학생 마감 — 갤러리 카드 */
.qc-done-gallery { max-width: 560px; width: 100%; margin-top: 14px; text-align: left; }
.qc-done-gallery-head { font-size: 13.5px; font-weight: 800; margin-bottom: 8px; }
.qc-done-gallery-head span { font-weight: 600; font-size: 12px; color: var(--qcInk2); margin-left: 6px; }
.qc-gal-card {
  border: 1.5px solid var(--qcGrid); border-radius: 12px; background: #fff;
  padding: 10px 14px; margin-bottom: 8px;
}
.qc-gal-card summary { cursor: pointer; font-family: var(--qcSerif); font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.qc-gal-body { padding: 8px 2px 2px; }
.qc-gal-body p { font-size: 13px; line-height: 1.7; margin: 6px 0; }
.qc-gal-body b { color: var(--qcTeal); margin-right: 6px; }