/* 밝고 차분하게 — 강한 색은 쓰지 않고 핵심(공부 시작·오늘 순공)만 초록으로 강조 */
:root{
  --bg:#eef1f3; --card:#ffffff; --tx:#22302a; --tx2:#5d6d66; --line:#dde4e0;
  --accent:#2f9e78; --accent-d:#26805f; --accent-l:#e4f4ed; --warn:#c2564b;
  --r:14px; --sh:0 8px 24px -10px rgba(30,50,40,.28);
  font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--tx);touch-action:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}
[hidden]{display:none!important}
.muted{color:var(--tx2)} .small{font-size:12.5px;line-height:1.55}

#top{position:fixed;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none;z-index:5}
#top .right{display:flex;gap:8px}
.pill{pointer-events:auto;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:7px 14px;box-shadow:var(--sh);display:flex;align-items:center;gap:8px;font-size:14px}
.pill select{border:0;background:transparent;font:inherit;font-weight:700;color:var(--tx);outline:none;max-width:42vw}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pill.today{flex-direction:column;gap:0;border-radius:14px;padding:5px 14px;align-items:flex-end}
.pill.today small{font-size:11px;color:var(--tx2)}
.pill.today b{font-size:17px;color:var(--accent-d);font-variant-numeric:tabular-nums}
.pill.icon{cursor:pointer;font-size:18px;padding:8px 12px}

.panel{position:fixed;top:70px;right:12px;width:min(300px,calc(100vw - 24px));max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:12px 14px;z-index:6}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.x{border:0;background:none;font-size:22px;color:var(--tx2);cursor:pointer}
#rankList{margin:0;padding-left:22px}
#rankList li{padding:5px 0;border-bottom:1px solid #f0f3f1;font-size:14px;display:flex;justify-content:space-between;gap:8px}
#rankList li.me{color:var(--accent-d);font-weight:700}
#rankList .ai{font-size:10.5px;font-weight:700;color:#2f7a5f;background:var(--accent-l);border-radius:6px;padding:1px 5px;margin-left:4px}
#rankList .t{font-variant-numeric:tabular-nums;color:var(--tx2)}

#bar{position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5;pointer-events:none}
#bar>*{pointer-events:auto}
/* 11/6: 버튼은 맨 아래 한 줄로(좁으면 줄바꿈) — 안내 문구는 그 위 */
#bar .brow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:calc(100vw - 32px);pointer-events:none}
#bar .brow>*{pointer-events:auto}
/* 폰: 왼쪽 아래 조이스틱(22~142px)을 덮지 않게 그만큼 비운다 */
body:has(#joy.on) #bar{padding-left:150px;padding-right:8px}
body:has(#joy.on) #bar .brow{max-width:100%}
#seatBtns{display:flex;gap:8px}
#reacts{display:flex;gap:6px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:999px;padding:5px 8px;box-shadow:var(--sh)}
#reacts button{border:0;background:none;font-size:22px;cursor:pointer;padding:2px 5px;border-radius:10px}
#reacts button:hover{background:var(--accent-l)}
.btn{border:1px solid var(--line);background:#fff;color:var(--tx);font:inherit;font-weight:700;font-size:15px;padding:12px 20px;border-radius:12px;cursor:pointer;box-shadow:var(--sh)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.pause{background:#fff;color:var(--accent-d);border-color:var(--accent)}
.btn.wide{width:100%}
/* 11/6: 버튼 줄(#bar) 맨 위에 둔다 — 휴게실 가기 등 버튼이 늘어도 겹치지 않게 같이 밀려 올라감 */
#bar>.hint{pointer-events:none}
.hint{background:rgba(34,48,42,.78);color:#fff;font-size:13.5px;padding:8px 14px;border-radius:999px;z-index:4;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}

#joy{position:fixed;left:22px;bottom:max(24px,env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid var(--line);z-index:4;display:none}
#joy .knob{position:absolute;left:38px;top:38px;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--sh)}
@media (pointer:coarse){ #joy.on{display:block} }

.modal{position:fixed;inset:0;background:rgba(238,241,243,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px -20px rgba(30,50,40,.35);padding:24px;width:min(380px,100%)}
.card h3{margin:0 0 8px;font-size:18px}
.card label{display:block;font-size:13px;color:var(--tx2);margin-top:12px}
.card input{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;color:var(--tx)}
.card input:focus{outline:2px solid var(--accent-l);border-color:var(--accent)}
.card .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.card a{color:var(--accent-d)}
.brand{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.brand i{font-style:normal;width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.brand span{font-weight:600;color:var(--tx2);font-size:14px}
.err{color:var(--warn);font-size:13px;min-height:18px;margin:10px 0 4px}

#toast{position:fixed;top:76px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:10px 16px;font-size:14px;z-index:30;max-width:90vw}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);z-index:40;color:var(--tx2);font-size:14px}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--accent-l);border-top-color:var(--accent);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* 순공 순위 — 오른쪽에 항상, 반투명 */
#rank{position:fixed;right:12px;top:78px;width:220px;z-index:5;background:rgba(255,255,255,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(221,228,224,.8);border-radius:14px;padding:8px 10px 6px;box-shadow:0 6px 18px -12px rgba(30,50,40,.35)}
#rank .rh{all:unset;cursor:pointer;display:flex;justify-content:space-between;width:100%;font-weight:700;font-size:13px;color:var(--tx);padding:2px 2px 6px}
#rank ol{margin:0;padding-left:20px}
#rank li{padding:3px 0;border:0;font-size:13px;display:flex;justify-content:space-between;gap:6px;color:#2c3a33}
#rank li.me{color:var(--accent-d);font-weight:800}
#rank .t{font-variant-numeric:tabular-nums;color:var(--tx2);font-size:12px;white-space:nowrap}
#rank .rnote{margin:4px 0 0;font-size:10.5px;color:var(--tx2)}
#rank.fold ol,#rank.fold .rnote{display:none}
@media (max-width:640px){ #rank{width:168px;top:118px;right:8px;padding:6px 8px} #rank li{font-size:12px} #rank li:nth-child(n+6){display:none} }
.pill.pts b{color:#c07a2c}
@keyframes pop{0%{transform:translateX(-50%) scale(.6);opacity:0}30%{transform:translateX(-50%) scale(1.08);opacity:1}100%{transform:translateX(-50%) scale(1)}}
#toast.big{font-size:18px;font-weight:800;color:#c07a2c;padding:14px 22px;animation:pop .5s ease-out}

/* 선물 코너 */
button.pill.pts{cursor:pointer;font:inherit;border:1px solid #f1d9b5;background:rgba(255,250,240,.95)}
.shopcard{width:min(460px,100%);max-height:86vh;overflow:auto}
.shopcard .bal{background:#fff7e8;border:1px solid #f3e1c2;border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.shopcard .bal b{font-size:20px;color:#c07a2c}
.gcard{display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:10px}
.gcard .gi{font-size:34px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#f6f8f7;border-radius:12px;flex:none}
.gcard .gb{flex:1;min-width:0}
.gcard b{display:block;font-size:15px}
.gcard small{display:block;color:var(--tx2);font-size:12.5px;margin-top:2px}
.gcard .bar{height:6px;background:#eef1ef;border-radius:99px;margin:8px 0 6px;overflow:hidden}
.gcard .bar i{display:block;height:100%;background:#e8b56b;border-radius:99px}
.gcard .gc{display:flex;justify-content:space-between;align-items:center}
.gcard .cost{font-weight:800;color:#c07a2c}
.btn.small{padding:7px 12px;font-size:13px;box-shadow:none}
.btn:disabled{opacity:.55;cursor:default}
#shopHist{margin-top:14px}
#shopHist .hrow{padding:6px 0;border-bottom:1px solid #f0f3f1;color:var(--tx2)}

/* 줄넘기 */
#ropeHud{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:8;text-align:center;pointer-events:none}
#ropeHud>*{pointer-events:auto}
#ropeCount{font-size:72px;font-weight:900;color:#c0632c;text-shadow:0 3px 0 #fff,0 6px 18px rgba(0,0,0,.18);font-variant-numeric:tabular-nums;line-height:1}
#ropeMsg{margin-top:6px;font-size:15px;font-weight:700;color:#3a4a42;background:rgba(255,255,255,.85);border-radius:999px;padding:6px 14px;display:inline-block}
#ropeHud .rrow{margin-top:10px;display:flex;gap:8px;justify-content:center}
#ropeJumpBtn{display:none;position:fixed;right:18px;bottom:max(90px,calc(env(safe-area-inset-bottom) + 80px));width:96px;height:96px;border-radius:50%;font-size:18px}
@media (pointer:coarse){ #ropeJumpBtn{display:block} }

/* 휴게실 채팅 */
#chat{position:fixed;right:12px;bottom:max(70px,calc(env(safe-area-inset-bottom) + 64px));width:min(320px,calc(100vw - 24px));z-index:6;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:8px 10px}
#chat .chead{font-size:13px;font-weight:700;margin-bottom:4px}
#chat .chead small{font-weight:500;color:var(--tx2);font-size:11px;margin-left:4px}
#chatList{max-height:150px;overflow:auto;font-size:13px;line-height:1.45}
#chatList .cm{padding:2px 0;display:flex;gap:6px;align-items:flex-start}
#chatList .cm b{color:#2f7a5f;white-space:nowrap}
#chatList .cm.me b{color:#c07a2c}
#chatList .cm span{flex:1;word-break:break-all}
#chatList .cm button{all:unset;cursor:pointer;opacity:.35;font-size:11px}
#chatList .cm button:hover{opacity:1}
#chatForm{display:flex;gap:6px;margin-top:6px}
#chatIn{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:14px}
@media (pointer:coarse){ #chat{bottom:max(160px,calc(env(safe-area-inset-bottom) + 150px));width:min(280px,calc(100vw - 24px))} #chatList{max-height:90px} }

/* 캐릭터 고르기 */
#lookGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
#lookGrid button{all:unset;cursor:pointer;border:2px solid var(--line);border-radius:14px;background:#f7f9f8;aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:transform .12s}
#lookGrid button:hover{transform:translateY(-2px);border-color:#b9d8cb}
#lookGrid button.on{border-color:var(--accent);background:var(--accent-l)}
#lookGrid img{width:78%;height:78%;object-fit:contain;image-rendering:auto}
button.pill.icon{font:inherit;font-size:18px}

button.pill.quit{cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:#7a4b3a;border-color:#ecd6cb;background:rgba(255,248,244,.95)}
@media (max-width:640px){ button.pill.quit{font-size:12px;padding:6px 10px} }
#dlgBody{white-space:pre-line}

/* ── 모바일 최적화 (폭 640px 이하) ── */
.pill.mob{display:none}
#sheet{position:fixed;inset:0;z-index:25;background:rgba(30,40,35,.25);display:flex;align-items:flex-end}
#sheet .sheet-in{width:100%;background:#fff;border-radius:20px 20px 0 0;padding:10px 16px max(16px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px -12px rgba(0,0,0,.25)}
.sheet-grip{width:44px;height:5px;border-radius:9px;background:#dfe5e2;margin:2px auto 10px}
.sheet-pts{display:flex;justify-content:space-between;background:#fff7e8;border:1px solid #f3e1c2;border-radius:12px;padding:10px 14px;margin-bottom:8px;font-size:14px}
.sheet-pts b{color:#c07a2c}
.sitem{all:unset;display:block;width:100%;box-sizing:border-box;padding:14px 6px;font-size:16px;font-weight:600;border-bottom:1px solid #f0f3f1;cursor:pointer}
.sitem.quit{color:#a2543c}
.sitem.close{text-align:center;color:var(--tx2);border:0;font-weight:500}
@media (max-width:640px){
  #top{left:8px;right:8px;gap:6px}
  #top .right{gap:6px;align-items:center}
  .pill{padding:6px 10px;font-size:13px}
  .pill.room{max-width:46vw}
  .pill select{max-width:34vw;font-size:13px}
  #count{display:none}
  .pill.today{padding:4px 10px}
  .pill.today small{font-size:10px}
  .pill.today b{font-size:15px}
  #quitBtn,#lookBtn,#shopBtn,#itemBtn,#ansBtn,#repBtn{display:none}
  .pill.mob{display:flex;font-size:18px;padding:6px 12px}
  #rank{top:64px}
  .hint{font-size:12px}
  #bar{gap:8px}
  #reacts button{font-size:20px;padding:2px 4px}
  .btn{padding:10px 16px;font-size:14px}
}

/* 도우미 문의 창 (11/6) */
#askIn{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;resize:vertical;margin-top:8px}
#askIn:focus{outline:2px solid var(--accent-l)}

/* 꾸미기 상점 (11/6) */
#itemTabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
#itemTabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer;color:var(--tx2)}
#itemTabs button.on{background:var(--accent-l);border-color:var(--accent);color:var(--tx);font-weight:700}
.gcard .tag{font-size:11.5px;padding:2px 8px;border-radius:999px;background:#eef6f2;color:#2f7a5f;margin-left:6px;vertical-align:1px}
.gcard .gc .btns{display:flex;gap:6px}
#tryBar{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:9;display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 16px;box-shadow:var(--sh);max-width:calc(100vw - 32px);font-size:14px}
#tryBar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#askHist{margin-top:14px;max-height:40vh;overflow:auto}
#askHist .q{border-top:1px solid #f0f3f1;padding:8px 0}
#askHist .q .a{margin-top:6px;background:#eef6f2;border-radius:10px;padding:8px 10px;white-space:pre-line;color:var(--tx)}
#askHist .q .w{margin-top:4px;color:var(--tx2)}
#ansBtn{position:relative}
.dot2{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:#e5786d}
#askHist .empty{color:var(--tx2);padding:12px 0}
/* 신고 (11/7) */
/* .card input·.card label(로그인 칸용: 폭 100%·패딩·테두리·위 여백)이 라디오에 먹지 않게 신고 창 안에서 되돌린다 (11/7) */
#repDlg .card > b.small{display:block;margin-top:12px;color:var(--tx);font-size:13.5px}
.card .replist{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.card .replist label{display:flex;gap:10px;align-items:center;margin:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font-size:14px;color:var(--tx);background:#fff;line-height:1.3}
.card .replist label:has(input:checked){border-color:var(--accent);background:var(--accent-l)}
.card .replist label span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .replist label small{flex:none;color:var(--tx2);font-size:12px;text-align:right}
.card .replist input{display:inline-block;flex:none;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:50%;accent-color:var(--accent)}
.card .replist .muted{margin:4px 2px}
#repDlg #repText{margin-top:10px}
#repDlg #repNote{margin:8px 2px 0;line-height:1.5}
#repText{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
#personMenu{position:fixed;z-index:15;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:170px;max-width:260px}
#personMenu b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#personMenu .row{display:flex;gap:6px}
#repDlg .repwarn{margin:10px 0 0;padding:9px 11px;border-radius:10px;background:#fbf3e6;border:1px solid #efdcbc;color:#7a5a2e;font-size:12.5px;line-height:1.55}
#repDlg .repwarn b{color:#6b4a1e}

/* 학교 선택 창 (2026-11-09) */
.card.sch{width:min(440px,100%);max-height:92vh;overflow:auto}
.sch-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.sch-sel{display:flex;gap:8px;margin-top:12px}
.sch-sel select,.card.sch select{flex:1;min-width:0;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--tx)}
.card.sch input[type=search],.card.sch input[type=email],.card.sch input[inputmode]{margin-top:10px}
.sch-list{margin-top:10px;max-height:38vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:4px}
.sch-list p{margin:10px}
.sch-item{all:unset;display:block;box-sizing:border-box;width:100%;padding:10px 12px;border-radius:9px;cursor:pointer}
.sch-item:hover{background:#f2f6f4}.sch-item b{display:block;font-size:15px}.sch-item small{color:var(--tx2);font-size:12.5px}
.sch-q{font-weight:700;margin:12px 0 8px}
.sch-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sch-opts .btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sch-mail{display:flex;gap:8px;align-items:flex-end}.sch-mail input{flex:1}.sch-mail .btn{white-space:nowrap;margin-bottom:1px}
.card.sch label.sch-attest{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:var(--tx);font-size:14px;line-height:1.5;cursor:pointer}
.card.sch label.sch-attest input{display:inline-block;width:auto;margin:3px 0 0;flex:none}
.sch-cur{background:#f2f6f4;border-radius:12px;padding:12px 14px;margin:12px 0}.sch-cur b{display:block;font-size:16px}