/* 공부방 (study.js) — 앞머리 st- */
.st-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.st-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.st-main{min-width:0;display:flex;flex-direction:column;gap:12px}
.st-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,16px);padding:14px}
.st-card h4{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--ink-3);margin:0 0 10px}
.st-cnt{font-size:11.5px;font-weight:700;color:var(--ink-3);background:var(--surface-2);border-radius:999px;padding:1px 7px}
.st-dim{color:var(--ink-3);font-size:13.5px;margin:0}

/* 내 출석 카드 */
.st-me-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.st-me-h .av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.st-me-h b{display:block;font-size:15px}
.st-me-h small{display:block;color:var(--ink-3);font-size:12.5px}
.st-streak{display:flex;align-items:baseline;gap:6px;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2)}
.st-streak.on{background:linear-gradient(135deg,rgba(255,138,0,.16),rgba(255,61,110,.16));color:var(--ink)}
.st-streak b{font-size:26px;font-weight:900;line-height:1}
.st-streak span{font-size:13px}
.st-fire{font-size:20px;align-self:center;filter:grayscale(1);opacity:.5}
.st-streak.on .st-fire{filter:none;opacity:1}
.st-week{display:flex;gap:4px;margin:10px 0 8px}
.st-week i{flex:1;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3);background:var(--surface-2)}
.st-week i.on{background:linear-gradient(135deg,#FF8A00,#FF3D6E);color:#fff}
.st-week i.today{outline:2px solid var(--accent);outline-offset:1px}
.st-stats{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--ink-3)}
.st-stats b{color:var(--ink)}
.st-card .btn.full{width:100%;justify-content:center;margin-top:10px}

/* 지금 공부 중 */
.st-here{display:flex;flex-wrap:wrap;gap:8px}
.st-av{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:56px;background:none;border:0;padding:0;color:var(--ink-2);font-size:11px}
.st-av img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface),0 0 0 4px #22C55E}
.st-av i,.st-avw i{position:absolute;width:11px;height:11px;border-radius:50%;background:#22C55E;border:2px solid var(--surface);animation:stPulse 1.6s infinite}
.st-av i{top:28px;right:8px}
.st-av span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes stPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}60%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* 멤버들의 방 */
.st-rooms{display:flex;flex-direction:column;gap:2px}
.st-room{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:10px;background:none;text-align:left;color:var(--ink)}
.st-room:hover,.st-room.cur{background:var(--surface-2)}
.st-avw{position:relative;flex:none}
.st-avw img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.st-avw i{right:-2px;bottom:-1px}
.st-rt{flex:1;min-width:0}
.st-rt b{display:flex;align-items:center;gap:6px;font-size:14px;overflow:hidden;white-space:nowrap}
.st-rt b em,.st-live{font-style:normal;font-size:10.5px;font-weight:800;color:#15803D;background:rgba(34,197,94,.15);border-radius:999px;padding:1px 7px}
.st-rt small{display:block;color:var(--ink-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-rs{flex:none;font-size:12px;font-weight:800;color:#EA580C}

/* 날짜 목록 */
.st-month h5{font-size:12px;color:var(--ink-3);margin:8px 0 4px}
.st-day{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;text-align:left;color:var(--ink)}
.st-day:hover,.st-day.cur{background:var(--surface-2)}
.st-day.cur{font-weight:800}
.st-day span{flex:none;width:34px;font-size:12.5px;color:var(--ink-3)}
.st-day b{flex:1;min-width:0;font-weight:inherit;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-day svg.i.sm{width:13px;height:13px;flex:none;color:var(--ink-3)}
.st-days{max-height:420px;overflow-y:auto}

/* 가운데: 방 주인·날짜·기록 */
.st-head{display:flex;flex-direction:column;gap:10px}
.st-owner{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,16px);padding:12px 14px}
.st-owner-b{background:none;border:0;padding:0;flex:none}
.st-owner-b .av{width:44px;height:44px;border-radius:50%;object-fit:cover}
.st-owner-t{flex:1;min-width:0}
.st-owner-t b{display:flex;align-items:center;gap:8px;font-size:17px;flex-wrap:wrap}
.st-owner-t small{display:block;color:var(--ink-3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#st-topic{width:100%;border:0;border-bottom:1px dashed var(--line);background:none;padding:3px 0;font-size:13px;color:var(--ink-2);outline:none}
#st-topic:focus{border-bottom-color:var(--accent)}
.st-switch{display:flex;align-items:center;gap:6px;flex:none;cursor:pointer;font-size:12.5px}
.st-switch input{position:absolute;opacity:0;width:0;height:0}
.st-switch span{width:38px;height:22px;border-radius:999px;background:var(--ink-3);position:relative;transition:.2s}
.st-switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.st-switch input:checked + span{background:#22C55E}
.st-switch input:checked + span::after{left:19px}
.st-switch b{font-weight:700;color:var(--ink-2)}
.st-datebar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.st-date{position:relative;display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.st-date b{font-size:15px}
.st-date input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.st-next svg{transform:rotate(180deg)}
.st-status{font-size:12px;color:var(--ink-3);min-width:40px}
.st-ai-tg{margin-left:auto;display:none}
.st-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.st-chips::-webkit-scrollbar{display:none}
.st-chip{flex:none;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.st-chip.has{border-color:#FF8A00;color:var(--ink)}
.st-chip.cur{background:var(--accent);border-color:var(--accent);color:#fff}

.st-editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,16px);padding:14px;display:flex;flex-direction:column;gap:12px}
.st-title{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:6px 0 8px;font-size:19px;font-weight:800;color:var(--ink);outline:none}
.st-title:focus{border-bottom-color:var(--accent)}
.st-title-ro{font-size:19px;font-weight:800;margin:0;padding:6px 0 8px;border-bottom:1px solid var(--line)}
.st-body{width:100%;min-height:220px;border:0;background:none;resize:vertical;font:inherit;font-size:15px;line-height:1.7;color:var(--ink);outline:none}
.st-body-ro{font-size:15px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;min-height:80px}
.st-opts{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--ink-3);font-size:12.5px}
.st-check{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink-2);font-size:13px}
.st-photos{display:flex;flex-wrap:wrap;gap:8px}
.st-photos:empty{display:none}
.st-ph{position:relative;width:96px;height:96px}
.st-ph > button:first-child{width:100%;height:100%;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.st-ph img{width:100%;height:100%;object-fit:cover;display:block}
.st-ph-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;padding:0}
.st-ph-add{width:96px;height:96px;border-radius:12px;border:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--ink-3);cursor:pointer}
.st-ph-add input{display:none}
.st-ph-add.busy{opacity:.6}
.st-notes h4{display:flex;align-items:center;gap:6px;font-size:14px;margin:4px 0 8px;color:var(--ink-2)}
.st-note{border:1px solid var(--line);border-left:3px solid #8B5CF6;border-radius:12px;padding:10px 12px;margin-bottom:8px;background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.st-note-q{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.st-note-q::before{content:"Q. "}
.st-note-a,.st-ai-list .bt{font-size:14.5px;line-height:1.65}
.st-note-a p,.st-ai-list .bt p{margin:0 0 6px}
.st-note-a ul,.st-note-a ol,.st-ai-list .bt ul,.st-ai-list .bt ol{margin:0 0 6px;padding-left:20px}
.st-note-a code,.st-ai-list .bt code{font-size:13px;background:var(--surface-2);border-radius:5px;padding:1px 5px}
.st-note footer{display:flex;align-items:center;justify-content:space-between;color:var(--ink-3);font-size:12px;margin-top:4px}

/* 오른쪽 도우미 — 휴대폰에서는 떠 있는 창 (ai-panel과 같은 모양), PC에서는 접었다 펴는 세로 칸 */
.st-ai{position:fixed;left:0;right:0;bottom:0;z-index:60;height:min(80vh,660px);display:none;flex-direction:column;
  background:var(--bg);border-radius:20px 20px 0 0;border:1px solid var(--line);box-shadow:0 -14px 40px -12px rgba(0,0,0,.35);padding-bottom:env(safe-area-inset-bottom,0px)}
body.st-ai-mobile .st-ai{display:flex}
body.st-ai-mobile .st-fab{display:none}
.st-ai-h{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.st-pin{margin-top:4px}
.st-pin button,.st-pin span{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#6D28D9;background:none;border:1px solid color-mix(in srgb,#8B5CF6 40%,transparent);border-radius:999px;padding:3px 10px}
.st-pin span{color:var(--ink-3);border-color:var(--line)}
.st-pin{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.st-by{font-size:11px;font-weight:700;color:var(--ink-3)}
/* 답하는 AI 고르기 (Gemini 기본 · Claude) */
.st-eng{display:flex;align-items:center;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.st-eng small{font-size:12px;color:var(--ink-3);margin-right:2px}
.st-eng button{font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.st-eng button[aria-pressed="true"]{background:#6D28D9;border-color:#6D28D9;color:#fff}
/* 공부방 허용(운영자가 준 회원만)이 아니면 메뉴·'공부방 보기' 버튼을 숨김 — 진짜 막는 건 DB 정책 */
body:not(.st-ok) .nav[data-go="study"],body:not(.st-ok) [data-act="st-open-room"]{display:none!important}
.st-fab{display:grid}
body:not(:has(#v-study:not([hidden]))) .st-fab{display:none}
body:has(#v-study:not([hidden])) #ai-fab{display:none}   /* 공부방에서는 작당 도우미 대신 공부 도우미 동그라미 */

@media (min-width:1000px){
  body:has(#v-study:not([hidden])) .rail{display:none}
  body:has(#v-study:not([hidden])) .shell{grid-template-columns:220px minmax(0,1fr);max-width:1500px}
  .st-wrap{grid-template-columns:240px minmax(0,1fr) 0;gap:16px}
  .st-wrap.st-ai-on{grid-template-columns:240px minmax(0,1fr) 380px}
  .st-side{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin}
  .st-chips{display:none}
  .st-ai-tg{display:inline-flex}
  .st-ai{position:sticky;top:12px;display:none;height:calc(100vh - 40px);border-radius:18px;box-shadow:none;padding-bottom:0}
  .st-wrap.st-ai-on .st-ai{display:flex}
  .st-ai-h [data-act="st-ai-close"]{display:none}
  .st-fab{display:none!important}
}
@media (max-width:999px){
  .st-days{max-height:260px}
  .st-side{order:2}
  .st-main{order:1}
}
@media (max-width:400px){
  .st-ph,.st-ph-add{width:84px;height:84px}
  .st-owner-t b{font-size:15.5px}
}
/* 공부 통화 (통화방 기능 그대로, 모양만) */
.st-call{margin-top:10px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.st-call-go{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;color:var(--ink)}
button.st-call-go:hover{background:var(--surface-2)}
.st-call-go > span:not(.st-call-who):not(.st-call-dot){flex:1;min-width:0}
.st-call-go b{display:block;font-size:13.5px}
.st-call-go small{display:block;font-size:12px;color:var(--ink-3)}
.st-call.on{border-color:#22C55E;background:rgba(34,197,94,.07)}
.st-call-dot{width:10px;height:10px;border-radius:50%;background:#22C55E;flex:none;animation:stPulse 1.6s infinite}
.st-call-who{display:flex;flex:none}
.st-call-who img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);margin-left:-7px}
.st-call-who em{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:4px;align-self:center}
.st-call-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 10px 10px}
.st-call-btns .btn{justify-content:center;gap:4px;padding-inline:4px;min-width:0;font-size:12.5px;white-space:nowrap}
.st-call-end{color:var(--rose)}