/* =================================================================
   탐구방 — study.css 위에 덮어쓴다. 작업 화면은 창 높이에 꽉 차게.
   ================================================================= */
.dim { color: var(--ink-3); font-size: 15px; }
.pad { padding: 14px; }
.err { color: var(--err); }
.inp { flex: 1; min-width: 0; font-size: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.row { display: flex; gap: 8px; margin-top: 12px; }
.spacer { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 16px; max-width: calc(100vw - 32px); }
.toast.err { background: var(--err); }

/* ---------- 처음 화면 ---------- */
.hd { padding-top: 40px; padding-bottom: 12px; }
.hd h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; margin: 0; }
.hd p { margin: 8px 0 14px; font-size: 19px; color: var(--ink-2); }
.hd-art { display: flex; align-items: center; gap: 20px; }
.hd-art img { width: clamp(84px, 11vw, 120px); height: auto; flex: none; }
.hd-art p:last-child { margin-bottom: 0; }
.empty { display: grid; justify-items: center; gap: 6px; max-width: 420px; margin: 28px auto; padding: 22px; text-align: center; }
.empty img { width: 130px; height: auto; }
.empty b { font-size: 19px; }
.empty p { margin: 0; font-size: 16px; color: var(--ink-2); }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
main h2 { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.pjs { display: grid; gap: 8px; }
.pj { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 13px 15px; border-radius: 14px; background: var(--sky); color: var(--sky-ink); text-decoration: none; }
.pj b { color: var(--ink); font-size: 17px; }
.pj span { font-size: 15px; white-space: nowrap; }
details { margin-top: 14px; font-size: 16px; }
summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.people { margin-top: 8px; }
.person { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.new-class { max-width: 420px; margin-top: 22px; }

/* ---------- 작업 화면 ---------- */
body.work { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.work main { flex: 1; min-height: 0; }
body.work .top .wrap { max-width: none; height: 54px; }
.ws { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
.ws.has-rail { grid-template-columns: 250px minmax(0, 1fr); }
.rail { border-right: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.rail-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px 12px 10px; }
.rail-h b { font-size: 17px; }
.rail-list { overflow-y: auto; padding: 0 8px 12px; display: grid; gap: 4px; align-content: start; }
.rm { display: grid; gap: 2px; width: 100%; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.rm:hover { background: var(--bg); }
.rm.on { background: var(--sky); border-color: transparent; }
.rm.on b { color: var(--sky-ink); }
.rm b { font-size: 16px; }
.rm .who-on { font-size: 14px; font-weight: 700; color: var(--mint-ink); }
.rm .dim { font-size: 13px; }
.rm .dot { display: inline-block; width: 7px; height: 7px; margin-left: 3px; vertical-align: 2px; border-radius: 50%; background: var(--sky-ink); }

.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; }
.bar h1 { font-size: 18px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.bar .cls { flex: none; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.back { text-decoration: none; font-size: 19px; padding: 0 5px; color: var(--ink-2); }
.bar .tone-sky { background: var(--sky); color: var(--sky-ink); border-color: transparent; }
.bar .tone-mint[aria-pressed="true"] { background: var(--mint); color: var(--mint-ink); border-color: transparent; }
.bar .tone-yellow[aria-pressed="true"] { background: var(--yellow); color: var(--yellow-ink); border-color: transparent; }
.bar .pill { flex: none; }
.bar .pill:disabled { opacity: .45; cursor: default; }
.tabs-r { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.tab { display: flex; align-items: center; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.tab.on { background: var(--sky); border-color: transparent; }
.tab button { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 5px 4px 5px 11px; font-weight: 700; }
.tab .x { padding: 5px 9px 5px 4px; color: var(--ink-3); font-weight: 400; }
.mob { display: none; }

.panes { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pane.mat { background: #FFFBEC; border-color: #F2E3B0; }
.pane.mat header { background: var(--yellow); border-bottom-color: #F2E3B0; color: var(--yellow-ink); }
.pane.mat .tb { border-bottom-color: #F2E3B0; }
.pane.room { border-color: #CFC9DD; }
.pick { display: grid; place-items: center; padding: 20px; border: 1px dashed #CFC9DD; border-radius: 14px; font-size: 16px; color: var(--ink-3); text-align: center; }
.pick[hidden] { display: none; }
.pane header { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; padding: 8px 13px; border-bottom: 1px solid var(--line); min-height: 44px; }
.pane header b { font-size: 16px; }
.pane header .note { font-size: 14px; }
.ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-on] { display: flex; gap: 3px; flex-wrap: wrap; }
.av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; }
.av.off { background: #ECEAF2; color: var(--ink-3); }
.st { margin-left: auto; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.st.ok { color: var(--mint-ink); }
.st.bad { padding: 2px 9px; border-radius: 8px; background: #FDE7E7; color: var(--err); font-weight: 700; }
.pane .pill-sm { text-decoration: none; }
.pane .body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane .body > .dim { padding: 14px; }

.tb { display: flex; flex-wrap: wrap; gap: 2px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.tb button { border: 0; background: none; border-radius: 7px; padding: 4px 8px; font-size: 14px; cursor: pointer; color: var(--ink-2); }
.tb button:hover { background: var(--bg); }
.tb button.on { background: var(--sky); color: var(--sky-ink); font-weight: 700; }
.tb .it { font-style: italic; }
.ed { flex: 1; min-height: 0; overflow-y: auto; }
.ed .tiptap { min-height: 100%; padding: 16px 20px 40px; outline: none; font-size: 17px; line-height: 1.7; }
.ed .tiptap > :first-child { margin-top: 0; }
.ed .tiptap h2 { font-size: 24px; font-weight: 800; margin: 20px 0 8px; }
.ed .tiptap h3 { font-size: 20px; font-weight: 800; margin: 16px 0 6px; }
.ed .tiptap p { margin: 0 0 8px; }
.ed .tiptap a { color: var(--sky-ink); }
.ed .tiptap blockquote { margin: 8px 0; padding-left: 12px; border-left: 4px solid var(--line); color: var(--ink-2); }
.ed .tiptap table { border-collapse: collapse; width: 100%; margin: 10px 0; table-layout: fixed; }
.ed .tiptap th, .ed .tiptap td { border: 1px solid #CFC9DD; padding: 6px 9px; vertical-align: top; }
.ed .tiptap th { background: var(--bg); font-weight: 700; }
.ed .tiptap .selectedCell { background: var(--sky); }
.ed .tiptap p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--ink-3); pointer-events: none; }
.collaboration-carets__caret { position: relative; margin: 0 -1px; border-left: 2px solid; border-right: 0; word-break: normal; pointer-events: none; }
.collaboration-carets__label { position: absolute; top: -1.45em; left: -2px; padding: 1px 6px; border-radius: 6px 6px 6px 0; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; user-select: none; }

dialog.mg { width: min(520px, calc(100vw - 32px)); max-height: 80vh; border: 0; border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
dialog.mg::backdrop { background: rgba(43, 39, 48, .4); }
.seats { display: grid; gap: 7px; margin-top: 14px; }
.seat { display: grid; grid-template-columns: 1fr 170px; gap: 8px; align-items: center; font-size: 16px; }
.end { display: flex; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 820px) {
  .ws.has-rail { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-list { display: flex; overflow-x: auto; padding-bottom: 8px; }
  .rm { flex: none; width: 170px; }
  .bar h1 { max-width: 45%; }
  .bar .cls, .bar [data-split], .bar [data-mat], .pane.room .pill-sm { display: none; }
  .mob { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 0; }
  .mob button { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 7px; font-size: 16px; font-weight: 700; cursor: pointer; }
  .mob button[aria-selected="true"] { background: var(--sky); color: var(--sky-ink); border-color: transparent; }
  .mob [data-m="mat"][aria-selected="true"] { background: var(--yellow); color: var(--yellow-ink); }
  .panes { display: flex; flex-direction: column; }
  .pane { flex: 1; }
  body[data-mob="write"] .pane.mat, body[data-mob="mat"] .pane.room, .pane.second { display: none; }
  body[data-mob="mat"] .pane.mat { display: flex !important; }
  .classes { grid-template-columns: 1fr; }
}