/* 퀴즈 대결 — 앱 전용 스타일 (색은 공용 테마 변수) */

.topbar h1{color:var(--ink)}
.eyebrow{color:var(--primary)}
.hidden{display:none !important}
.chip{background:var(--sage-soft); color:var(--ink); border-color:transparent}
.hint-bar{
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; font-size:13px; color:var(--ink); margin-bottom:16px; line-height:1.7;
}
.help{font-size:12px; color:var(--ink-soft); margin-top:8px; line-height:1.6}
.hint{font-size:12px; color:var(--ink-soft); margin-top:10px}
.actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.row-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0}
.row-inline input[type=text], .row-inline input[type=password]{flex:1; min-width:180px}
.mini{
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-soft);
  border-radius:9px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer;
  transition:.14s; text-decoration:none; display:inline-block;
}
.mini:hover{border-color:var(--primary); color:var(--ink)}
.setup-sub{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft)}
.setup-sub h3{font-size:14px; margin-bottom:6px; color:var(--ink)}
.reg-box{margin:10px 0}
.reg-box summary{font-size:12.5px; color:var(--ink-soft); cursor:pointer}
.meet-nav{display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap}
select{
  background:var(--paper-2); border:1px solid var(--line); border-radius:9px;
  padding:8px 11px; font:inherit; font-size:13px; color:var(--ink);
}

/* 보기 4색 (카훗식 도형·색) */
.pk.p0{--pc:#D9534F} .pk.p1{--pc:#4A6CC4} .pk.p2{--pc:#D9A441} .pk.p3{--pc:#4E9A6B}

/* 문제 만들기 탭 */
.mk-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.mk-tabs button{
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:7px 15px; font:inherit; font-size:13px; color:var(--ink-soft); cursor:pointer; transition:.14s;
}
.mk-tabs button:hover{border-color:var(--primary)}
.mk-tabs button.on{background:var(--primary); border-color:transparent; color:#fff; font-weight:700}
.mk-body textarea{
  width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font:inherit; font-size:13.5px; color:var(--ink); resize:vertical; line-height:1.6;
}
.mk-body textarea:focus{outline:none; border-color:var(--primary)}

.unit-pick{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.uc{
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  padding:6px 12px; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; transition:.13s;
}
.uc:hover{border-color:var(--primary)}
.uc.on{background:var(--primary-soft); border-color:var(--primary); font-weight:700}
.uc span{margin-left:6px; font-size:10.5px; color:var(--ink-soft)}
.uc.on span{color:var(--primary)}

.hd-opts{display:grid; gap:6px; margin:10px 0}
.hd-row{display:flex; gap:8px; align-items:center}
.hd-a{
  width:32px; height:32px; flex:none; border-radius:50%; border:1.5px solid var(--line);
  background:var(--paper-2); color:var(--ink-soft); font-size:13px; cursor:pointer;
}
.hd-a.on{background:var(--sage); border-color:transparent; color:#fff}
.hd-o{
  flex:1; background:var(--paper-2); border:1px solid var(--line); border-radius:9px;
  padding:8px 11px; font:inherit; font-size:13.5px; color:var(--ink);
}
.hd-o:focus{outline:none; border-color:var(--primary)}

/* 문항 목록 */
.q-list{display:grid; gap:7px; margin-top:16px}
.qi{
  display:flex; align-items:flex-start; gap:10px; background:var(--paper-2);
  border:1px solid var(--line-soft); border-radius:12px; padding:10px 13px;
}
.qi-n{
  flex:none; width:24px; height:24px; border-radius:50%; background:var(--primary-soft);
  color:var(--primary); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.qi-b{flex:1; min-width:0}
.qi-q{font-size:14px; color:var(--ink); line-height:1.5}
.qi-o{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.qi-o span{
  font-size:11.5px; color:var(--ink-soft); background:var(--paper);
  border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px;
}
.qi-o span.ok{background:var(--sage-soft); border-color:transparent; color:var(--ink); font-weight:700}
.qi-t{flex:none; font-size:10.5px; color:var(--ink-soft)}
.qi-x{flex:none; background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:12px}
.qi-x:hover{color:#A0453B}

/* 참가자 모집 */
.lobby{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.lb-qr{text-align:center}
.qr-box{
  background:#fff; border-radius:14px; padding:12px; width:200px; height:200px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(80,55,25,.14);
}
.qr-box svg{width:100%; height:100%; display:block; shape-rendering:crispEdges}
.lb-cap{margin-top:8px; font-size:12.5px; font-weight:700; color:var(--ink-soft)}
.lb-link{font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--ink); word-break:break-all; margin-bottom:12px}
.lb-names{display:flex; flex-wrap:wrap; gap:6px; min-height:60px}
.lb-names span{
  background:var(--sage-soft); border-radius:999px; padding:5px 14px;
  font-size:14px; color:var(--ink); animation:pop .3s ease;
}
.lb-names i{font-size:12.5px; color:var(--ink-soft); font-style:normal}
@keyframes pop{0%{transform:scale(.7); opacity:0}100%{transform:none; opacity:1}}

/* 진행 중 문제 (교실 화면) */
.rq-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.rq-n{font-size:13px; font-weight:700; color:var(--ink-soft); flex:none}
.rq-bar{flex:1; height:12px; background:var(--paper-2); border-radius:99px; overflow:hidden}
.rq-bar i{display:block; height:100%; background:var(--primary); border-radius:99px; transition:width .2s linear}
.rq-t{flex:none; font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--primary); min-width:52px; text-align:right}
.rq-q{
  font-family:'Gowun Dodum',sans-serif; font-size:clamp(22px,3.6vw,42px);
  line-height:1.35; color:var(--ink); margin:18px 0 22px; text-align:center;
}
.rq-picks{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.rq-picks .pk{
  background:var(--pc); color:#fff; border-radius:14px; padding:18px 20px;
  font-size:clamp(15px,1.8vw,22px); font-weight:700; display:flex; align-items:center; gap:12px;
}
.rq-picks .pk span{font-size:1.2em}
.rq-foot{display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-size:13px; color:var(--ink-soft)}

/* 라운드 결과 */
.rr-q{font-family:'Gowun Dodum',sans-serif; font-size:clamp(18px,2.4vw,28px); color:var(--ink); margin-bottom:16px; text-align:center}
.rr-bars{display:grid; gap:8px; margin-bottom:18px}
.rb{display:grid; grid-template-columns:1fr 2fr 42px; gap:10px; align-items:center; opacity:.55}
.rb.win{opacity:1}
.rb-t{font-size:14px; color:var(--ink)}
.rb.win .rb-t{font-weight:700}
.rb-track{height:26px; background:var(--paper-2); border-radius:8px; overflow:hidden}
.rb-track i{display:block; height:100%; background:var(--pc); border-radius:8px; transition:width .5s ease}
.rb-n{font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--ink-soft); text-align:right}
.rr-rank{display:grid; gap:5px}
.rk{
  display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center;
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:10px;
  padding:8px 13px; font-size:14px; color:var(--ink);
}
.rk.top{background:var(--butter); border-color:transparent; font-weight:700}
.rk-n{font-family:'Space Grotesk',sans-serif; color:var(--ink-soft); text-align:center}
.rk-p{font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--primary)}

/* 시상대 */
.podium{display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:10px 0 22px}
.pd{background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px 18px; text-align:center; min-width:110px}
.pd0{background:var(--butter); border-color:transparent; padding-bottom:34px}
.pd1{padding-bottom:22px}
.pd-m{font-size:30px}
.pd-n{font-family:'Gowun Dodum',sans-serif; font-size:1.2rem; color:var(--ink); margin-top:4px}
.pd-p{font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--primary)}

/* 지난 결과 */
.past-list{display:grid; gap:8px}
.pt-row{background:var(--paper-2); border:1px solid var(--line-soft); border-radius:12px; padding:11px 14px}
.pt-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--ink)}
.pt-h span{font-size:12px; color:var(--ink-soft)}
.pt-top{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:12.5px; color:var(--ink-soft)}

/* 저장된 퀴즈 */
.sheet{
  position:fixed; inset:0; z-index:90; overflow:auto; padding:24px 16px;
  background:rgba(40,30,20,.35); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
}
.sheet-card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:22px 24px; width:100%; max-width:560px; margin-top:8vh;
}
.lib-list{display:grid; gap:7px}
.lb-row{display:flex; align-items:center; gap:10px; background:var(--paper-2);
  border:1px solid var(--line-soft); border-radius:11px; padding:9px 13px}
.lb-t{flex:1; min-width:0}
.lb-t b{display:block; font-size:14px; color:var(--ink)}
.lb-t span{font-size:11.5px; color:var(--ink-soft)}

/* ══ 학생 화면 ═══════════════════════════════════ */
.stu{max-width:560px}
.wait-box{text-align:center; padding:36px 24px}
.wait-dot{
  width:16px; height:16px; border-radius:50%; background:var(--primary);
  margin:0 auto 14px; animation:blink 1.1s infinite;
}
@keyframes blink{50%{opacity:.25; transform:scale(.8)}}
.wait-t{font-family:'Gowun Dodum',sans-serif; font-size:1.3rem; color:var(--ink)}
.wait-me{margin-top:8px; font-size:13px; color:var(--ink-soft)}

.count{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:var(--bg-1);
}
.count b{font-family:'Space Grotesk',sans-serif; font-size:26vw; color:var(--primary); animation:cnt .9s ease}
@keyframes cnt{0%{transform:scale(1.5); opacity:0}100%{transform:none; opacity:1}}

.s-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.s-round{font-size:12.5px; font-weight:700; color:var(--ink-soft)}
.s-timer{font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; color:var(--primary)}
.s-q{font-family:'Gowun Dodum',sans-serif; font-size:1.25rem; line-height:1.45; color:var(--ink); margin-bottom:16px}
.s-picks{display:grid; gap:9px}
.s-picks .pk{
  background:var(--pc); border:none; border-radius:14px; color:#fff; cursor:pointer;
  padding:18px 18px; font:inherit; font-size:17px; font-weight:700;
  display:flex; align-items:center; gap:12px; text-align:left; transition:.12s;
}
.s-picks .pk:active{transform:scale(.97)}
.s-picks .pk:disabled{opacity:.42; cursor:default}
.s-picks .pk.chosen{opacity:1; box-shadow:0 0 0 4px var(--ink) inset}
.s-picks .pk.right{opacity:1; box-shadow:0 0 0 4px #fff inset}
.s-picks .pk.wrong{opacity:.55}

.res-big{font-family:'Gowun Dodum',sans-serif; font-size:2.2rem; text-align:center; margin-bottom:6px}
.res-big.good{color:var(--sage)}
.res-big.bad{color:var(--rose)}
.res-sub{text-align:center; font-size:13.5px; color:var(--ink-soft)}
.res-score{text-align:center; margin-top:18px}
.res-score b{font-family:'Space Grotesk',sans-serif; font-size:3rem; color:var(--primary)}
.res-score span{font-size:14px; color:var(--ink-soft); margin-left:6px}
.res-rank{text-align:center; margin-top:12px; font-size:13px; color:var(--ink-soft)}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120;
  background:var(--ink); color:var(--paper); border:1px solid var(--line);
  padding:11px 20px; border-radius:12px; font-size:14px; max-width:88vw; text-align:center;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.show{opacity:1}

@media (max-width:760px){
  .lobby{grid-template-columns:1fr}
  .qr-box{width:170px; height:170px; margin:0 auto}
  .rq-picks{grid-template-columns:1fr}
  .rb{grid-template-columns:1fr; gap:4px}
  .rb-track{height:18px}
  .rb-n{text-align:left}
}