:root{
  --bg:#0b1020; --panel:#151b31; --line:#27304d; --fg:#eef2ff; --dim:#9aa6c8;
  --accent:#6ea8fe; --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --r:14px;
}
*{box-sizing:border-box}
/* HTML 의 hidden 속성은 UA 스타일시트의 display:none 일 뿐이라
   .blank{display:flex} · .row{display:flex} 같은 작성자 규칙에 그냥 진다.
   그래서 hidden 을 켜도 안 사라진다. 전역으로 못박아 둔다.
   (2026-09-04: 화면 끄기가 안 꺼지는 버그의 원인이었다) */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,sans-serif;
  -webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);
  border-radius:10px;padding:.55em .9em}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#08122b;border-color:var(--accent);font-weight:700}
button.danger{border-color:var(--bad);color:var(--bad)}
input,textarea,select{background:#0e1428;border:1px solid var(--line);
  border-radius:10px;padding:.6em .7em;width:100%}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.muted{color:var(--dim)}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.pill{border:1px solid var(--line);border-radius:999px;padding:.15em .7em;font-size:.85rem;color:var(--dim)}
.pill.on{border-color:var(--good);color:var(--good)}
.pill.off{border-color:var(--bad);color:var(--bad)}

/* ---------------- 스크린 (예배당 프로젝터) ---------------- */
.screen{display:flex;flex-direction:column;height:100%;padding:2vh 3vw;gap:2vh}
.screen header{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.joinbox{display:flex;gap:1.5rem;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.4rem}
.joinbox .lead{font-size:clamp(.9rem,1.3vw,1.2rem);color:var(--dim);margin-bottom:.2em}
.code{font-size:clamp(2rem,5vw,4.5rem);font-weight:800;letter-spacing:.12em;line-height:1}
.qr{width:clamp(120px,13vw,220px);height:auto;background:#fff;border-radius:12px;padding:8px}
.qtitle{font-size:clamp(1.6rem,4.2vw,3.6rem);font-weight:800;line-height:1.15;margin:0}
.screen main{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.5vh}
.viz{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.screen footer{display:flex;justify-content:space-between;color:var(--dim);
  font-size:clamp(.85rem,1.4vw,1.15rem)}
.hidden-note{font-size:clamp(1.2rem,3vw,2.4rem);color:var(--dim);text-align:center}

/* 시각화 */
.cloud{display:flex;flex-wrap:wrap;gap:.35em 1em;align-items:center;justify-content:center;
  width:100%;padding:1rem;overflow:auto}
.cloud span{font-weight:800;line-height:1.05}
.bars{width:100%;display:flex;flex-direction:column;gap:1.1vh;padding:0 1rem}
.bar{display:grid;grid-template-columns:minmax(6em,22%) 1fr auto;gap:1rem;align-items:center}
.bar .lab{font-size:clamp(1rem,2vw,1.7rem);font-weight:600;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{background:#0e1428;border-radius:999px;height:clamp(20px,3.4vh,44px);overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--accent),#a78bfa);
  border-radius:999px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.bar .num{font-size:clamp(.95rem,1.8vw,1.5rem);font-weight:700;min-width:3.5em;text-align:right}
.bubbles{display:flex;flex-wrap:wrap;gap:.8rem;align-content:flex-start;
  width:100%;height:100%;overflow:auto;padding:1rem}
.bubble{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:.7em 1em;max-width:min(46ch,100%);font-size:clamp(.95rem,1.7vw,1.5rem);
  line-height:1.4;word-break:break-word}
.ranked{width:100%;display:flex;flex-direction:column;gap:1vh;padding:0 1rem}
.ranked .item{display:grid;grid-template-columns:2.4em 1fr auto;gap:1rem;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.6em 1em;
  font-size:clamp(1rem,2vw,1.6rem)}
.ranked .rk{font-weight:800;color:var(--accent)}
.empty{color:var(--dim);font-size:clamp(1rem,2vw,1.6rem)}

/* ---------------- 콘솔 ---------------- */
.console{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:1rem;
  height:100%;padding:1rem}
@media(max-width:820px){.console{grid-template-columns:1fr;height:auto}}
.console h2{margin:.2rem 0 .6rem;font-size:1rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.08em}
.pagelist{display:flex;flex-direction:column;gap:.4rem;max-height:38vh;overflow:auto}
.pageitem{display:flex;justify-content:space-between;gap:.5rem;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:.5em .7em;cursor:pointer}
.pageitem.cur{border-color:var(--accent);background:#16203c}
.pageitem small{color:var(--dim)}
.modlist{display:flex;flex-direction:column;gap:.4rem;max-height:44vh;overflow:auto}
.moditem{display:flex;justify-content:space-between;gap:.6rem;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:.5em .7em}
.moditem.pending{border-color:var(--warn)}
.moditem .txt{flex:1;word-break:break-word}
.stack{display:flex;flex-direction:column;gap:.6rem}
.kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:.05em .45em;font-family:ui-monospace,Menlo,monospace;font-size:.85em;color:var(--dim)}

/* ---------------- 참여자 (폰) ---------------- */
.go{max-width:34rem;margin:0 auto;padding:1.2rem 1rem 3rem;display:flex;
  flex-direction:column;gap:1rem;min-height:100%}
.go .qtitle{font-size:1.5rem}
.opts{display:flex;flex-direction:column;gap:.6rem}
.opt{display:block;width:100%;text-align:left;padding:1em;font-size:1.05rem;border-radius:12px}
.opt.sel{border-color:var(--accent);background:#16203c}
.slider{width:100%}
.scaleval{font-size:2.6rem;font-weight:800;text-align:center}
.ranklist{display:flex;flex-direction:column;gap:.5rem}
.rankitem{display:flex;gap:.6rem;align-items:center;border:1px solid var(--line);
  border-radius:12px;padding:.7em .8em}
.rankitem .mv{display:flex;flex-direction:column;gap:.15rem}
.rankitem button{padding:.1em .5em;line-height:1.1}
.big{width:100%;padding:1em;font-size:1.1rem}
.note{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;color:var(--dim)}
.ok{color:var(--good)}
.err{color:var(--bad);min-height:1.2em}
.center{display:flex;flex-direction:column;justify-content:center;min-height:70vh;gap:1rem}
.codein{font-size:2rem;text-align:center;letter-spacing:.3em;font-weight:800}

/* 발표 화면에서 바로 지우기 (멘티미터: c 로 마감 후 단어 클릭 / 말풍선 휴지통) */
.cloud span.delword{cursor:pointer;transition:opacity .12s,transform .12s}
.cloud span.delword:hover{opacity:.45;transform:scale(.94);text-decoration:line-through}
.bubble{position:relative}
.bubble .trash{position:absolute;left:.35em;bottom:.25em;padding:.05em .35em;
  font-size:.7em;line-height:1.2;opacity:.35;background:transparent;border-color:transparent}
.bubble:hover .trash{opacity:1;border-color:var(--bad)}
.delmode{outline:2px dashed var(--warn);outline-offset:6px;border-radius:12px}

/* 화면 끄기 — 설교로 돌아갈 때 스크린을 비운다 (멘티미터 Mentimote 의 blank screen) */
.blank{position:fixed;inset:0;background:#000;z-index:99;display:flex;
  align-items:center;justify-content:center}
.blank .hint{color:#1f2937;font-size:clamp(.8rem,1.4vw,1.1rem)}

/* 카운트다운 */
.timer{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.02em}
.timer.screen{font-size:clamp(1.4rem,3.4vw,3rem);color:var(--accent)}
.timer.warn{color:var(--warn)}
.timer.over{color:var(--bad)}
.timer.go{font-size:1.6rem;text-align:center;padding:.3em 0}
.tbar{height:6px;border-radius:999px;background:#0e1428;overflow:hidden;margin-top:.4em}
.tbar > i{display:block;height:100%;background:var(--accent);transition:width 1s linear}
.tbar.warn > i{background:var(--warn)}

/* Q&A */
.bubble.done{opacity:.5;border-color:var(--good)}
.bubble .tag{font-size:.7em;color:var(--good);border:1px solid var(--good);
  border-radius:999px;padding:.05em .5em;margin-right:.3em;white-space:nowrap}
/* 퀴즈 점수판 */
.ranked .item.ok .rk{color:var(--good)}
.ranked .item.no .rk{color:var(--bad)}
/* 누가 이길까 */
.bars.race .track{position:relative;overflow:visible}
.bars.race .horse{position:absolute;top:50%;transform:translateY(-50%);
  font-size:clamp(1rem,2.2vh,1.6rem);transition:left .45s cubic-bezier(.2,.8,.2,1)}
/* 2×2 좌표 · 그림에 찍기 */
.plot{position:relative;width:min(100%,70vh);aspect-ratio:1;margin:0 auto;
  background:#0e1428;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.plot.pins{aspect-ratio:auto;width:100%;height:100%;background:transparent;border:0}
.plotimg{width:100%;height:100%;object-fit:contain;display:block}
.plot .axv{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.plot .axh{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.plot .axlab{position:absolute;color:var(--dim);font-size:clamp(.7rem,1.3vw,1rem)}
.plot .axlab.l{left:.5em;top:50%;transform:translateY(-50%)}
.plot .axlab.r{right:.5em;top:50%;transform:translateY(-50%)}
.plot .axlab.b{bottom:.4em;left:50%;transform:translateX(-50%)}
.plot .axlab.t{top:.4em;left:50%;transform:translateX(-50%)}
.plot .dot{position:absolute;width:.9em;height:.9em;border-radius:50%;
  background:var(--accent);opacity:.75;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(110,168,254,.25)}
/* 간단 양식 */
.tablewrap{width:100%;max-height:100%;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:clamp(.85rem,1.5vw,1.2rem)}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:.5em .7em;text-align:left}
.tbl th{color:var(--dim);position:sticky;top:0;background:var(--panel)}
/* 참여자 위젯 */
.allocrow{display:grid;grid-template-columns:1fr 4.5em;gap:.6rem;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:.6em .8em}
.alloctotal{text-align:center;font-size:1.2rem;font-weight:700;padding:.4em}
.alloctotal.bad{color:var(--bad)}
.alloctotal.ok{color:var(--good)}
.pickbox{position:relative;width:100%;aspect-ratio:1;background:#0e1428;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;touch-action:none}
.pickbox.img{aspect-ratio:auto}
.pickbox .axv{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.pickbox .axh{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.pickbox .axlab{position:absolute;color:var(--dim);font-size:.8rem}
.pickbox .axlab.l{left:.4em;top:50%;transform:translateY(-50%)}
.pickbox .axlab.r{right:.4em;top:50%;transform:translateY(-50%)}
.pickbox .axlab.b{bottom:.3em;left:50%;transform:translateX(-50%)}
.pickbox .axlab.t{top:.3em;left:50%;transform:translateX(-50%)}
.pickbox .dot{position:absolute;width:1.2em;height:1.2em;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%)}
.pickbox img{width:100%;display:block}
.fieldrow{display:flex;flex-direction:column;gap:.25rem}
.fieldrow label{color:var(--dim);font-size:.85rem}