/* ============================================================
   학생 화면 — 스마트폰 세로. 손가락으로 누르기 쉽게.
   진행자 화면과 같은 언어: 흰 지면 + 커다란 색 블록 + 알약 버튼.
   ============================================================ */

.student {
  --scale: 0.82;
  min-height: 100dvh;
  background: var(--canvas);
  padding: max(var(--s-md), env(safe-area-inset-top)) var(--s-md)
           max(var(--s-lg), env(safe-area-inset-bottom));
}
@media (min-width: 480px) { .student { --scale: 0.9; } }

.phone {
  width: min(520px, 100%);
  margin: 0 auto;
  display: grid;
  gap: var(--s-md);
  align-content: start;
  min-height: calc(100dvh - 48px);
}

/* ============================================================
   입장
   ============================================================ */

.join-hero { padding: var(--s-lg) 0 var(--s-xs); display: grid; gap: var(--s-xs); }
.join-hero h1 { font-size: calc(56px * var(--scale)); font-weight: 340; letter-spacing: -0.035em; line-height: 1; }

.join-panel {
  background: var(--block-lime);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-md);
}

.code-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: calc(40px * var(--scale));
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-align: center;
  padding: calc(16px * var(--scale)) calc(8px * var(--scale));
  border: none;
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--ink);
  outline: none;
  text-transform: uppercase;
  min-height: 64px;
}
.code-input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.code-input::placeholder { color: var(--ink); opacity: 0.22; }

.block-full { width: 100%; }
.join-help { text-align: center; opacity: 0.7; }
.join-help.error { opacity: 1; font-weight: 480; }

/* ============================================================
   대기
   ============================================================ */

.me-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-xs);
  text-align: center;
}
.me-nick { font-size: calc(38px * var(--scale)); font-weight: 340; letter-spacing: -0.025em; line-height: 1.15; }

.village-panel {
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-sm);
  text-align: center;
}
.village-name { font-size: calc(34px * var(--scale)); font-weight: 540; letter-spacing: -0.02em; }
.village-meta { display: flex; gap: var(--s-xs); justify-content: center; flex-wrap: wrap; }

.waiting { text-align: center; padding: var(--s-xl) var(--s-sm); display: grid; gap: var(--s-xs); }
.dots { display: flex; gap: 7px; justify-content: center; margin-bottom: var(--s-xs); }
.dots span { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--ink); animation: bob 1.1s infinite var(--ease); }
.dots span:nth-child(2) { animation-delay: 0.16s; }
.dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  40% { transform: translateY(-8px); opacity: 1; }
}

/* ============================================================
   진행 중 상단 바
   ============================================================ */

.mini-bar {
  display: grid;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: calc(10px * var(--scale)) var(--s-md);
  position: sticky;
  top: 2px;
  z-index: 20;
  background: var(--canvas);
}
.mini-row { display: flex; align-items: center; gap: var(--s-xs); }
.mini-stage { opacity: 0.4; }
.mini-nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 480; }
.mini-village { display: flex; align-items: center; gap: 0.35em; opacity: 0.6; white-space: nowrap; }
.mini-coin { margin-left: auto; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }

.stage-main { display: grid; gap: var(--s-md); align-content: start; }

/* ============================================================
   라운드
   ============================================================ */

.r-wrap { display: grid; gap: var(--s-md); }
.r-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-md);
}

.r-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-xs); }
.r-timer {
  font-family: var(--font-mono);
  font-size: calc(28px * var(--scale));
  font-variant-numeric: tabular-nums;
}
.r-timer.hurry { color: var(--accent-magenta); }
.r-timer.waiting, .r-timer.done { font-size: calc(14px * var(--scale)); opacity: 0.5; }

.r-title { font-size: calc(32px * var(--scale)); font-weight: 540; letter-spacing: -0.025em; line-height: 1.2; }

/* ---- 선택 버튼 */

.r-choices { display: grid; gap: var(--s-sm); }
.r-choice {
  appearance: none;
  cursor: pointer;
  text-align: left;
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-md);
  display: grid;
  gap: calc(4px * var(--scale));
  min-height: 88px;
  font-family: inherit;
  transition: transform 0.12s var(--ease), opacity 0.15s;
}
.r-choice:active:not(:disabled) { transform: scale(0.985); }
.r-choice:disabled { opacity: 0.35; }
.r-choice.picked { opacity: 1; box-shadow: 0 0 0 3px var(--ink); }
.r-choice.is-a { background: var(--choice-a); color: var(--choice-a-ink); }
.r-choice.is-b { background: var(--choice-b); color: var(--choice-b-ink); }
.r-choice.is-c { background: var(--choice-c); color: var(--choice-c-ink); }

.rc-key { font-family: var(--font-mono); font-size: calc(13px * var(--scale)); opacity: 0.6; }
.rc-label { font-weight: 540; font-size: calc(20px * var(--scale)); line-height: 1.3; }
.rc-sub { font-size: calc(15px * var(--scale)); opacity: 0.72; }
.rc-eff {
  display: flex;
  gap: var(--s-md);
  font-family: var(--font-mono);
  font-size: calc(14px * var(--scale));
  margin-top: calc(4px * var(--scale));
  opacity: 0.85;
}
.rc-trust.unknown { letter-spacing: 0.14em; }

/* ---- 제출 완료 잠금 화면 — 이 수업에서 가장 중요한 약속을 크게 */

.r-lock {
  display: grid;
  justify-items: center;
  gap: var(--s-md);
  padding: calc(40px * var(--scale)) var(--s-md) calc(32px * var(--scale));
  text-align: center;
  animation: cut-in 0.32s var(--ease) both;
}
.lock-mark {
  width: calc(96px * var(--scale));
  height: calc(120px * var(--scale));
  color: var(--ink);
  animation: lock-drop 0.45s var(--ease) both;
}
.lock-mark svg { display: block; }
@keyframes lock-drop {
  0% { opacity: 0; transform: translateY(-14px) scale(0.9); }
  60% { transform: translateY(3px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
.lock-title {
  font-size: calc(30px * var(--scale));
  font-weight: 340;
  letter-spacing: -0.02em;
  opacity: 0.5;
}
.lock-line {
  font-size: calc(34px * var(--scale));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  max-width: 12ch;
}
.lock-choice {
  margin-top: var(--s-xs);
  border-radius: var(--r-pill);
  padding: calc(11px * var(--scale)) var(--s-lg);
  font-weight: 540;
  font-size: calc(18px * var(--scale));
}
.lock-choice.is-a { background: var(--choice-a); color: var(--choice-a-ink); }
.lock-choice.is-b { background: var(--choice-b); }
.lock-choice.is-c { background: var(--choice-c); }
.lock-sub { opacity: 0.5; }
.lock-count { opacity: 0.4; }


/* ---- 내 결과 */

.res-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-md);
}
.res-choice { border-radius: var(--r-md); padding: var(--s-md); font-weight: 540; font-size: calc(20px * var(--scale)); }
.res-choice.is-a { background: var(--choice-a); color: var(--choice-a-ink); }
.res-choice.is-b { background: var(--choice-b); }
.res-choice.is-c { background: var(--choice-c); }

.res-coin { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); }
.res-coin b { font-size: calc(46px * var(--scale)); font-weight: 340; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

.res-caught { background: var(--ink); color: var(--inverse-ink); border-radius: var(--r-md); padding: var(--s-md); }
.res-caught .block-line { display: block; opacity: 0.6; margin-top: var(--s-xxs); }
.res-bonus { background: var(--block-lime); border-radius: var(--r-md); padding: var(--s-md); font-weight: 480; }

.res-village { border-radius: var(--r-md); padding: var(--s-md); display: grid; gap: var(--s-sm); }
.res-trust { display: flex; align-items: baseline; gap: var(--s-xs); flex-wrap: wrap; }
.trust-before { font-size: calc(24px * var(--scale)); font-weight: 340; opacity: 0.45; font-variant-numeric: tabular-nums; }
.trust-arrow { opacity: 0.35; }
.trust-after { font-size: calc(52px * var(--scale)); font-weight: 340; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.trust-delta { margin-left: auto; font-family: var(--font-mono); font-size: calc(16px * var(--scale)); }
.trust-delta.flat { opacity: 0.4; }

.res-mix { display: flex; height: calc(24px * var(--scale)); border-radius: var(--r-sm); overflow: hidden; background: rgba(255,255,255,0.6); }
.mix-seg {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--scale));
  transition: width 0.6s var(--ease);
  min-width: 0;
  overflow: hidden;
}
.mix-a { background: var(--choice-a); color: var(--choice-a-ink); }
.mix-b { background: var(--choice-b); color: var(--choice-b-ink); }
.mix-c { background: var(--choice-c); color: var(--choice-c-ink); }
.res-note { opacity: 0.6; }

/* ---- 제도 */

.r-inst {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  background: var(--surface-soft);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
}
.inst-emoji { font-size: calc(28px * var(--scale)); }
.inst-body { display: grid; flex: 1; }
.r-ledger { display: grid; gap: var(--s-xs); }

/* ============================================================
   아직 만들지 않은 단계
   ============================================================ */

.todo-stage {
  display: grid;
  place-items: center;
  gap: var(--s-xs);
  padding: var(--s-section) var(--s-md);
  text-align: center;
}
.todo-stage .eyebrow { opacity: 0.4; }

/* ============================================================
   단계 머리
   ============================================================ */

.stage-intro { display: grid; gap: calc(6px * var(--scale)); padding: var(--s-xs) 0; }
.s-title {
  font-size: calc(34px * var(--scale));
  font-weight: 540;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* 앞을 봐 달라는 안내 */
.lookup {
  display: grid;
  justify-items: center;
  gap: var(--s-xs);
  padding: var(--s-lg) var(--s-md);
  text-align: center;
  opacity: 0.55;
}
.lookup-mark { font-size: calc(30px * var(--scale)); animation: nudge 1.8s infinite var(--ease); }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   워밍업 투표
   ============================================================ */

.q-list { display: grid; gap: var(--s-md); }
.q-card { border-radius: var(--r-lg); padding: var(--s-lg); display: grid; gap: var(--s-md); }
.q-text { font-size: calc(28px * var(--scale)); font-weight: 540; letter-spacing: -0.025em; line-height: 1.25; }
.q-opts { display: grid; gap: var(--s-sm); }

/* 엄지로 누르기 좋게 크게 */
.q-opt {
  appearance: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  padding: 0;
  min-height: 68px;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s var(--ease), box-shadow 0.15s;
}
.q-opt:active { transform: scale(0.985); }
.q-opt.picked { box-shadow: inset 0 0 0 3px var(--ink); }
.q-bar { position: absolute; inset: 0; }
.q-bar-fill {
  height: 100%;
  width: 0;
  background: rgba(0, 0, 0, 0.12);
  transition: width 0.6s var(--ease);
}
.q-opt-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-md);
  min-height: 68px;
}
.q-emoji { font-size: calc(24px * var(--scale)); }
.q-label { flex: 1; font-size: calc(18px * var(--scale)); font-weight: 480; line-height: 1.3; }
.q-pct { font-variant-numeric: tabular-nums; }

/* ============================================================
   스토리 · 제도 카드
   ============================================================ */

.panel { border-radius: var(--r-lg); padding: var(--s-lg); display: grid; gap: var(--s-sm); }
.panel-emoji { font-size: calc(52px * var(--scale)); line-height: 1; }

.inst-card { border-radius: var(--r-lg); padding: var(--s-lg); display: grid; gap: var(--s-xs); }
.inst-big { font-size: calc(40px * var(--scale)); line-height: 1; }

/* ============================================================
   규칙 카드
   ============================================================ */

.rule-card { border-radius: var(--r-md); padding: var(--s-md); display: grid; gap: calc(4px * var(--scale)); }
.rule-card.is-a { background: var(--choice-a); color: var(--choice-a-ink); }
.rule-card.is-b { background: var(--choice-b); }
.rule-card.is-c { background: var(--choice-c); }
.rule-card .rc-key { font-family: var(--font-mono); font-size: calc(13px * var(--scale)); opacity: 0.6; }
.rule-eff {
  display: flex;
  gap: var(--s-md);
  font-family: var(--font-mono);
  font-size: calc(14px * var(--scale));
  opacity: 0.85;
  margin-top: calc(4px * var(--scale));
}

/* ============================================================
   내 숫자 · 마을 순위
   ============================================================ */

.figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.fig {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-md);
  display: grid;
  gap: 2px;
  align-content: start;
}
.fig-num {
  font-size: calc(46px * var(--scale));
  font-weight: 340;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rank-list { display: grid; gap: calc(4px * var(--scale)); }
.rank-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: calc(11px * var(--scale)) var(--s-sm);
  border-radius: var(--r-md);
}
.rank-row.is-mine { background: var(--surface-soft); font-weight: 700; }
.rank-no { font-family: var(--font-mono); font-size: calc(14px * var(--scale)); opacity: 0.45; width: 1.6ch; }
.rank-name { flex: 1; font-size: calc(17px * var(--scale)); }
.rank-val { font-size: calc(22px * var(--scale)); font-variant-numeric: tabular-nums; }

.end-card { border-radius: var(--r-lg); padding: var(--s-lg); display: grid; gap: calc(4px * var(--scale)); }

/* ============================================================
   마을회의 (학생)
   ============================================================ */

.council-now { display: flex; gap: var(--s-xs); flex-wrap: wrap; }
.inst-head { display: flex; align-items: center; justify-content: space-between; }
.vote-count { font-family: var(--font-mono); font-size: calc(16px * var(--scale)); font-weight: 500; }
.vote-bar {
  height: calc(8px * var(--scale));
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  margin: calc(4px * var(--scale)) 0;
}
.vote-bar-fill { height: 100%; width: 0; background: var(--ink); border-radius: var(--r-full); transition: width 0.5s var(--ease); }
.inst-card.is-mine { box-shadow: 0 0 0 3px var(--ink); }
.inst-card .btn { min-height: 52px; }

/* ============================================================
   소감 벽 (학생)
   ============================================================ */

.reflect-composer {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  display: grid;
  gap: var(--s-sm);
}
.reflect-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  padding: var(--s-md);
  font-family: inherit;
  font-size: calc(18px * var(--scale));
  line-height: 1.5;
  color: var(--ink);
  min-height: 96px;
}
.reflect-input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.reflect-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); }
.reflect-counter { font-variant-numeric: tabular-nums; opacity: 0.5; }
.reflect-counter.over { opacity: 1; color: var(--accent-magenta); }
.reflect-foot .btn { min-height: 48px; }
.reflect-note { opacity: 0.55; }
.reflect-note.error { opacity: 1; color: var(--accent-magenta); font-weight: 480; }

.wall { display: grid; gap: var(--s-sm); }
.wall-card {
  border-radius: var(--r-md);
  padding: var(--s-md);
  display: grid;
  gap: var(--s-sm);
  animation: cut-in 0.32s var(--ease) both;
}
.heart-btn {
  justify-self: start;
  appearance: none;
  cursor: pointer;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill);
  padding: calc(8px * var(--scale)) var(--s-md);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: calc(15px * var(--scale));
  color: var(--ink);
  transition: transform 0.12s var(--ease), background 0.15s;
}
.heart-btn:active { transform: scale(0.94); }
.heart-ico { opacity: 0.3; transition: opacity 0.15s, transform 0.2s var(--ease); }
.heart-btn.on { background: var(--ink); color: var(--canvas); }
.heart-btn.on .heart-ico { opacity: 1; transform: scale(1.15); }

/* ============================================================
   서약 (학생)
   ============================================================ */

.pledge-block {
  background: var(--block-lime);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  display: grid;
  gap: var(--s-md);
  text-align: center;
  justify-items: center;
}
.pledge-words {
  font-size: calc(26px * var(--scale));
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: 18ch;
}
.pledge-meter {
  width: 100%;
  height: calc(36px * var(--scale));
  background: rgba(255, 255, 255, 0.66);
  border-radius: var(--r-full);
  overflow: hidden;
}
.pledge-fill { height: 100%; width: 0; background: var(--ink); border-radius: var(--r-full); transition: width 0.7s var(--ease); }
.pledge-n { font-size: calc(40px * var(--scale)); font-weight: 340; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.pledge-done { display: grid; justify-items: center; gap: var(--s-xs); padding: var(--s-md); }
.pledge-check {
  width: calc(56px * var(--scale));
  height: calc(56px * var(--scale));
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--canvas);
  display: grid;
  place-items: center;
  font-size: calc(28px * var(--scale));
  animation: cut-in 0.35s var(--ease) both;
}

/* 시나리오 그림 (학생) */
.r-art { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.r-art.art-fallback { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.r-art.art-fallback .art-emoji { font-size: calc(96px * var(--scale)); }