/* JISP 출제실
   시험지를 닮은 차분한 화면: 흰 종이, 먹색 글자, 가는 괘선.
   강조는 두 가지만 쓴다 — 형광펜(지금 할 일)과 빨간 펜(막힌 곳·오류). */
:root {
  --paper: #fafaf7; --sheet: #fff; --ink: #1b2130; --ink-2: #3b4254; --pencil: #6b7385;
  --rule: #e6e4dc; --rule-2: #d3d0c5; --wash: #f4f3ee;
  --marker: #ffe45e; --marker-2: #fff6c2; --red: #c23a2c; --red-2: #fbecea; --green: #2d7a57; --green-2: #e7f3ec;
  --r: 6px; --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Pretendard", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14.5px/1.6 var(--sans); font-feature-settings: "tnum"; }
a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.marker { background: linear-gradient(transparent 40%, var(--marker) 40%, var(--marker) 90%, transparent 90%); padding: 0 .12em; }

/* 상단 */
.top { position: sticky; top: 0; z-index: 10; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.top-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 32px; height: 54px; padding: 0 24px; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; }
.brand small { font-family: var(--sans); font-weight: 400; color: var(--pencil); font-size: 12px; margin-left: 6px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { text-decoration: none; color: var(--pencil); padding: 6px 12px; border-radius: 5px; }
.nav a:hover { background: var(--wash); color: var(--ink); }
.nav a.on { color: var(--ink); background: var(--wash); font-weight: 600; }
.me { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: var(--pencil); white-space: nowrap; }
.bell { position: relative; text-decoration: none; color: var(--ink-2); }
.bell b { position: absolute; top: -8px; right: -12px; background: var(--red); color: #fff; font-size: 11px; line-height: 17px; min-width: 17px; text-align: center; border-radius: 9px; padding: 0 4px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--pencil); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule-2); }

main { max-width: 1240px; margin: 0 auto; padding: 26px 24px 90px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
h1 { font-family: var(--serif); font-size: 26px; line-height: 1.3; margin: 0; letter-spacing: -.015em; }
h2 { font-size: 16px; margin: 30px 0 10px; }
h3 { font-size: 14.5px; margin: 0 0 8px; }
.sub { color: var(--pencil); margin: 4px 0 0; }
.muted { color: var(--pencil); } .small { font-size: 12.5px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--pencil); text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.back:hover { color: var(--ink); }

/* 알림 메시지 */
.msgs { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.msgs li { padding: 9px 13px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--sheet); }
.msgs .error { border-color: #e2b3ad; background: var(--red-2); }
.msgs .warning { border-color: #e8d27a; background: var(--marker-2); }
.msgs .success { border-color: #b9dbc8; background: var(--green-2); }

/* 표 */
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); }
.card.pad { padding: 18px 20px; }
.tablewrap { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { font-size: 12.5px; font-weight: 600; color: var(--pencil); background: #fcfcfa; white-space: nowrap; }
td.num, th.num { text-align: right; } td.c, th.c { text-align: center; }
tr.mine td { background: #fffdf2; }
tr.off td { color: var(--pencil); }

.tag { display: inline-block; font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 4px; background: var(--wash); color: var(--ink-2); white-space: nowrap; }
.tag.todo { background: var(--marker); color: var(--ink); }
.tag.done { background: var(--green-2); color: var(--green); }
.tag.bad { background: var(--red); color: #fff; }
.tag.line { background: none; border: 1px solid var(--rule-2); }
.tag.empty { background: none; color: var(--rule-2); }

/* 단계 */
.steps { display: flex; margin: 0 0 16px; padding: 0; list-style: none; overflow-x: auto; }
.steps li { flex: 1 0 auto; position: relative; padding: 10px 14px 12px 0; font-size: 13px; color: var(--pencil); white-space: nowrap; }
.steps li::before { content: ""; display: block; height: 3px; background: var(--rule); margin-bottom: 9px; border-radius: 2px; }
.steps li.done { color: var(--ink-2); } .steps li.done::before { background: var(--ink); }
.steps li.now { color: var(--ink); font-weight: 600; } .steps li.now::before { background: var(--marker); height: 5px; margin-bottom: 7px; }
.steps li span { margin-right: 4px; color: var(--rule-2); font-weight: 400; }

.gate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 16px 20px; margin-bottom: 22px; }
.gate h3 { font-size: 15px; margin: 0 0 4px; }
.gate ul { margin: 6px 0 0; padding-left: 18px; color: var(--red); }
.gate .ok { color: var(--green); margin: 4px 0 0; }
.gate-actions { display: grid; gap: 8px; justify-items: end; align-content: start; min-width: 240px; }
details.force summary { cursor: pointer; color: var(--pencil); font-size: 12.5px; }
details.force textarea { width: 300px; margin-top: 6px; }

/* 폼 */
label.f { display: block; font-size: 12.5px; color: var(--pencil); margin: 0 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], input[type=file], select, textarea {
  font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--rule-2); border-radius: 5px; padding: 6px 9px; max-width: 100%; }
input[type=file] { padding: 5px; }
textarea { width: 100%; min-height: 60px; resize: vertical; }
select[multiple] { min-height: 140px; width: 100%; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 13.5px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 5px; padding: 6px 14px; cursor: pointer; text-decoration: none; line-height: 1.45; white-space: nowrap; }
.btn:hover { opacity: .88; }
.btn.ghost { background: var(--sheet); color: var(--ink); border-color: var(--rule-2); } .btn.ghost:hover { border-color: var(--ink); }
.btn.hl { background: var(--marker); color: var(--ink); border-color: #e3c83d; } .btn.hl:hover { background: #ffdd33; }
.btn.warn { background: var(--red); border-color: var(--red); }
.btn.sm { padding: 3px 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 16px; }
.stack > * + * { margin-top: 14px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin: 0 0 16px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--pencil); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

/* 홈 */
.home { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.tasks li:last-child { border-bottom: 0; }
.tasks .role { grid-row: span 2; font-size: 12px; color: var(--pencil); padding-top: 2px; }
.tasks .what { text-decoration: none; }
.tasks .meta { font-size: 12.5px; color: var(--pencil); }
.empty { padding: 26px; text-align: center; color: var(--pencil); }
#cal { padding: 14px 16px; }
.fc { font-size: 13px; }
.fc .fc-toolbar-title { font-family: var(--serif); font-size: 18px; }
.fc .fc-button { background: #fff; color: var(--ink); border: 1px solid var(--rule-2); box-shadow: none; font-weight: 500; padding: 3px 10px; }
.fc .fc-button:hover, .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--wash); color: var(--ink); border-color: var(--rule-2); }
.fc .fc-day-today { background: #fffbe5 !important; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--rule); }
.fc .fc-daygrid-event { background: var(--ink); border: 0; border-radius: 3px; padding: 1px 4px; color: var(--paper); white-space: normal; }
.fc .fc-daygrid-event .fc-event-title { font-weight: 500; }
.fc .fc-daygrid-event.ev-overdue { background: var(--red); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--pencil); text-decoration: none; }

/* 배분표 */
.handle { cursor: grab; color: var(--rule-2); user-select: none; width: 22px; font-size: 16px; }
.handle:active { cursor: grabbing; }
.sortable-ghost td { background: var(--marker-2) !important; }
.thumb { width: 64px; display: block; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
.save-hint { font-size: 12.5px; color: var(--green); }

/* 문항 화면 */
.revs { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 12px; }
.rev { flex: 0 0 290px; }
.rev header { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.rev header b { font-size: 14px; }
.rev img { display: block; width: 100%; }
.rev .meta { padding: 8px 12px; font-size: 12.5px; color: var(--pencil); }
.rev .resaves { padding: 0 12px 10px; font-size: 12px; color: var(--pencil); }
.chip { display: inline-block; font-size: 11.5px; padding: 0 7px; line-height: 19px; border-radius: 10px; background: var(--wash); color: var(--ink-2); margin: 2px 2px 0 0; }
.diff { margin: 0 0 16px; }
.diff .row2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.diff .row2:last-child { border-bottom: 0; }
.diff .row2 > div { padding: 6px 10px; white-space: pre-wrap; word-break: break-word; }
.diff .row2 > div + div { border-left: 1px solid var(--rule); }
.diff .same { color: var(--pencil); }
.diff .head { background: #fcfcfa; font-size: 12.5px; color: var(--pencil); }
.diff del { background: #f7d9d4; text-decoration: line-through; text-decoration-color: var(--red); }
.diff ins { background: #d6eee1; text-decoration: none; }
.cmt { border-left: 3px solid var(--rule-2); padding: 8px 12px; margin: 0 0 10px; background: var(--sheet); border-radius: 0 var(--r) var(--r) 0; }
.cmt.pending { border-left-color: var(--marker); }
.cmt.accepted { border-left-color: var(--green); }
.cmt.rejected { border-left-color: var(--pencil); }
.cmt .by { font-size: 12.5px; color: var(--pencil); margin-bottom: 3px; }
.cmt form { margin-top: 8px; }
.solution p { margin: 0 0 6px; }
.math .katex { font-size: 1.02em; }
.warnbox { border-color: #e2b3ad; background: var(--red-2); }
.warnbox ul { margin: 4px 0 0; padding-left: 18px; }

/* 검토 화면 */
.rv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 16px; margin-bottom: 14px; scroll-margin-top: 70px; }
.rv img { width: 100%; border: 1px solid var(--rule); }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.kinds label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; border: 1px solid var(--rule-2); border-radius: 14px; padding: 2px 10px; cursor: pointer; background: #fff; }
.kinds input { margin: 0; }
.kinds label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 마이페이지·관리 */
.side { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }
.sidenav { position: sticky; top: 78px; display: grid; gap: 2px; }
.sidenav a { padding: 7px 12px; border-radius: 5px; text-decoration: none; color: var(--pencil); }
.sidenav a.on { background: var(--wash); color: var(--ink); font-weight: 600; }
.sidenav .sep { height: 1px; background: var(--rule); margin: 8px 0; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--pencil); } .kv dd { margin: 0; }
.money { font-variant-numeric: tabular-nums; }
.big { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.est { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-end; }
.est span { display: block; font-size: 12.5px; color: var(--pencil); }
.rates input { width: 92px; text-align: right; }

/* 로그인 */

.login h1 { font-size: 28px; }
.login form { display: grid; gap: 12px; margin-top: 22px; }
.login input { width: 100%; }

@media (max-width: 980px) {
  .home, .grid-2, .side, .rv { grid-template-columns: 1fr; }
  .top-in { gap: 14px; padding: 0 14px; overflow-x: auto; }
  main { padding: 18px 14px 60px; }
  .gate { grid-template-columns: 1fr; } .gate-actions { justify-items: start; }
  .sidenav { position: static; display: flex; flex-wrap: wrap; }
}

/* 참여자 표 */
.mm-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.mm-find { width: 200px; }
.mm-table td, .mm-table th { padding: 6px 12px; }
.mm-table tr.mm-on td { background: #fffdf2; }
.mm-cell { display: flex; justify-content: center; align-items: center; min-height: 28px; cursor: pointer; }
.mm-cell input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--ink); }
.mm-lock { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--wash) 6px 12px); }
.mm-lock .mm-cell { cursor: not-allowed; }
.upl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.upl label.btn { cursor: pointer; }
span.f { display: block; font-size: 12.5px; color: var(--pencil); margin-bottom: 4px; }
.mm-warn { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%;
  background: var(--marker); color: var(--ink); font-size: 11.5px; font-weight: 700; cursor: help; }
.mm-warn[hidden] { display: none; }

/* V1.3: 아이콘·DB·수정 이력·확인 대기·AI */
.ic { vertical-align: -3px; stroke-width: 1.75; }
.dbwrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.facets { position: sticky; top: 76px; display: grid; gap: 12px; font-size: 13.5px; }
.facets label.f { margin-bottom: 3px; }
.facets select, .facets input:not([type=checkbox]) { width: 100%; }
.facets label:has(input[type=checkbox]) { display: flex; gap: 6px; align-items: center; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .grow { flex: 1; min-width: 220px; position: relative; }
.toolbar .grow input { width: 100%; padding-left: 30px; }
.toolbar .grow .ic { position: absolute; left: 9px; top: 9px; color: var(--pencil); }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 5px; overflow: hidden; }
.seg a { padding: 5px 9px; text-decoration: none; color: var(--pencil); background: #fff; }
.seg a.on { background: var(--wash); color: var(--ink); }
.code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; letter-spacing: .01em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.icard { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.icard:hover { border-color: var(--ink-2); }
.icard img { width: 100%; height: 190px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--rule); background: #fff; }
.icard .b { padding: 9px 11px; font-size: 13px; display: grid; gap: 3px; }
.pager { display: flex; gap: 4px; justify-content: center; margin: 16px 0 0; flex-wrap: wrap; }
.pager a, .pager span { min-width: 32px; text-align: center; padding: 4px 9px; border: 1px solid var(--rule-2); border-radius: 5px; text-decoration: none; background: #fff; }
.pager .on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pickbar { background: var(--marker-2); border: 1px solid #e8d27a; border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.tl > li { position: relative; padding: 0 0 18px 34px; }
.tl .dot { position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--rule-2); }
.tl li.latest .dot { background: var(--ink); border-color: var(--ink); }
.tl .vh { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tl .vh b { font-size: 14.5px; }
.tl .vb { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.tl .vb img { width: 96px; border: 1px solid var(--rule); border-radius: 3px; }
.tl .auto { font-size: 12.5px; color: var(--ink-2); }
.tl .auto li { margin: 0; }
.resave { font-size: 12px; color: var(--pencil); margin-top: 4px; }
.cmpbar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.diff.unified .row2 { grid-template-columns: 1fr; }
.diff.unified .row2 > div + div { border-left: 0; border-top: 1px dashed var(--rule); }
.diff.unified .row2.same > div + div { display: none; }
.finding { border: 1px solid var(--rule); border-left: 4px solid var(--red); border-radius: 0 var(--r) var(--r) 0; padding: 9px 12px; margin: 0 0 8px; background: #fff; }
.finding.typo { border-left-color: #e3c83d; }
.finding .ft { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.finding label { font-size: 12.5px; color: var(--pencil); display: inline-flex; gap: 5px; align-items: center; cursor: pointer; white-space: nowrap; }
.ai-ok { border: 1px solid #b9dbc8; background: var(--green-2); border-radius: var(--r); padding: 10px 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; }
.kpi span { display: block; font-size: 12.5px; color: var(--pencil); }
.kpi b { font-size: 22px; font-family: var(--serif); }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 90px; padding: 8px 0 0; }
.bars div { flex: 1; background: var(--ink-2); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; }
.bars div:hover { background: var(--ink); }
.hbar { height: 8px; background: var(--wash); border-radius: 4px; overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--ink-2); }
@media (max-width: 980px) { .dbwrap { grid-template-columns: 1fr; } .facets { position: static; } }

/* V1.4 */
.login-wrap { min-height: calc(100vh - 116px); display: grid; place-items: center; }
.login { width: 100%; max-width: 340px; margin: 0 auto; text-align: center; }
.login-logo { display: block; margin: 0 auto 14px; }
.login form { text-align: left; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.noticebar { padding: 8px 16px; margin-bottom: 16px; display: grid; gap: 4px; border-color: #e8d27a; background: #fffdf0; }
.noticebar a { text-decoration: none; }
.people-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.people-pick label { display: flex; gap: 6px; align-items: center; border: 1px solid var(--rule); border-radius: 5px; padding: 5px 8px; background: #fff; cursor: pointer; }
.people-pick label:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.rvhead { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px;
  position: sticky; top: 62px; z-index: 5; }
.rvprog { font-size: 14px; color: var(--pencil); }
.rvprog b { color: var(--ink); font-size: 16px; }
.qlook-btn { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; width: 100%; }
.qlook-btn img { width: 100%; border: 1px solid var(--rule); border-radius: 4px; }
.qlook-btn:hover img { border-color: var(--ink-2); }
.composer { border: 1px solid var(--rule); border-radius: var(--r); padding: 12px; background: #fcfcfa; }
.composer .seg { margin-bottom: 6px; }
.composer .seg label { padding: 4px 12px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.composer .seg label:has(input:checked) { background: var(--ink); color: var(--paper); }
.composer .seg input { display: none; }
.cmt.ok { border-left-color: var(--green); }
.ql { position: fixed; inset: 0; background: rgba(20, 24, 34, .55); z-index: 50; display: grid; place-items: center; padding: 3vh 3vw; }
.ql[hidden] { display: none; }
.ql-box { background: var(--sheet); border-radius: 10px; width: min(1180px, 100%); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ql-bar { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.ql-bar b { flex: 1; }
.ql-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; overflow: auto; }
.ql-body img { width: 100%; background: #fff; padding: 14px; }
.ql-body #ql-text { padding: 16px 20px; border-left: 1px solid var(--rule); font-size: 14.5px; overflow: auto; }
@media (max-width: 860px) { .ql-body { grid-template-columns: 1fr; } .ql-body #ql-text { border-left: 0; border-top: 1px solid var(--rule); } }
.bulkbar { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.kinds[hidden] { display: none; }

/* V1.5: 문제·해설 두 단, 해설 구조 재현 */
.qs { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0; }
.qs-q { padding: 14px 16px; border-right: 1px solid var(--rule); }
.qs-q img { width: 100%; max-width: 400px; }
.qs-s { padding: 14px 18px; min-width: 0; overflow-x: auto; }
.qs h3 { margin: 0 0 8px; }
.hw { font-size: 14px; line-height: 1.8; }
.hw-p { margin: 0 0 3px; }
.hw-p.al-center { text-align: center; } .hw-p.al-right { text-align: right; }
.hw-tbl { border-collapse: collapse; margin: 6px auto; width: auto; }
.hw-tbl td { padding: 1px 8px; text-align: center; vertical-align: middle; }
.hw-tbl td .hw-p { margin: 0; }
.hw-tbl.inline { display: inline-table; vertical-align: middle; margin: 0 2px; font-size: .95em; }
.hw-box { border: 1px solid var(--ink); padding: 6px 10px; margin: 6px 0; }
.hw mark { background: var(--marker); }
.hw .tab { display: inline-block; width: 2em; }
.hw-pic { max-width: 100%; display: block; margin: 6px auto; }
.hw-ph { color: var(--pencil); font-size: 12.5px; border: 1px dashed var(--rule-2); padding: 2px 8px; }
.ql-body { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.ql-body img { max-width: 520px; }
@media (max-width: 860px) { .qs { grid-template-columns: 1fr; } .qs-q { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* V1.6: 문제 본문 재현·실제 크기 */
.hw-q { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule-2); font-size: 13.5px; }
.hw-box { box-sizing: border-box; max-width: 100%; }
.hw-tbl td { box-sizing: border-box; }
.ql-left { padding: 14px; border-right: 1px solid var(--rule); overflow: auto; }
.ql-left img { width: 100%; padding: 0; background: #fff; }
.ql-body > .ql-left img { padding: 0; }
.ql-body #ql-text { border-left: 0; }
.hw-p.al-justify, .hw-p.al-left, .hw-p.al-distribute { text-align: left; }
.hw-p.al-justify { text-align: justify; }
.hw-box .hw-p.al-justify { text-align: left; }

/* ===== V1.7 UI 규칙 ===== */
:root { --hw-font: "Noto Serif KR", "Nanum Myeongjo", serif; --modal-bg: rgba(20, 24, 34, .45); }
/* 다크 모드: 시스템 설정을 따르거나(기본) 직접 고름. 문항(종이)은 다크에서도 흰 바탕 유지 */
:root[data-theme="dark"] {
  --paper: #15171c; --sheet: #1d2027; --ink: #e8e9ee; --ink-2: #c7cad4; --pencil: #99a0ae;
  --rule: #2b2f39; --rule-2: #3a3f4c; --wash: #252933; --marker-2: #3b3417; --red-2: #3a1f1d; --green-2: #16301f; --green: #5bc28c; --red: #f07a6c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15171c; --sheet: #1d2027; --ink: #e8e9ee; --ink-2: #c7cad4; --pencil: #99a0ae;
    --rule: #2b2f39; --rule-2: #3a3f4c; --wash: #252933; --marker-2: #3b3417; --red-2: #3a1f1d; --green-2: #16301f; --green: #5bc28c; --red: #f07a6c;
  }
}
th { background: var(--wash); }
.tag.todo, mark { color: #1b2130; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { background: var(--sheet); color: var(--ink); }
.hw, .qs-q .qlook-btn img, .thumb, .icard img, .rev img, .tl .vb img, .ql-left, #ql-text { background: #fff; color: #111; }
.hw { padding: 2px 4px; border-radius: 4px; }

/* 토글 (iOS식): <input type="checkbox" class="switch"> */
input.switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--rule-2);
  position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; vertical-align: middle; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
input.switch:checked { background: #34c759; } input.switch:checked::after { left: 20px; }
input.switch.danger:checked { background: var(--red); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.setrow:last-child { border-bottom: 0; }
.setrow .k { font-weight: 500; } .setrow .d { font-size: 12.5px; color: var(--pencil); }

/* 세그먼트 (하나 고르기) */
.segctl { display: inline-flex; background: var(--wash); border-radius: 8px; padding: 2px; gap: 2px; }
.segctl label { padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--pencil); }
.segctl input { display: none; }
.segctl label:has(input:checked) { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2); }

/* 확인 창 */
.modal { position: fixed; inset: 0; background: var(--modal-bg); display: grid; place-items: center; z-index: 60; padding: 20px; }
.modal[hidden] { display: none; }
.modal-box { background: var(--sheet); color: var(--ink); border-radius: 14px; width: min(420px, 100%); padding: 20px 20px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal-box h3 { font-size: 17px; margin: 0 0 6px; } .modal-box p { margin: 0 0 14px; color: var(--ink-2); white-space: pre-line; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* 알림 (잠깐 떴다 사라짐) */
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 70; max-width: min(420px, calc(100vw - 36px)); list-style: none; margin: 0; padding: 0; }
.toasts li { background: var(--ink); color: var(--paper); border-radius: 10px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  display: flex; gap: 10px; align-items: flex-start; transition: opacity .3s, transform .3s; }
.toasts li.error { background: var(--red); color: #fff; } .toasts li.warning { background: #b7791f; color: #fff; }
.toasts li.out { opacity: 0; transform: translateY(6px); }
.toasts button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; opacity: .8; margin-left: auto; }

/* 프로젝트 화면 */
.duebar { display: flex; align-items: center; gap: 14px; background: var(--marker-2); border: 1px solid #e8d27a; border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; }
.duebar .when { font-size: 17px; font-weight: 700; } .duebar .sub2 { font-size: 13px; color: var(--ink-2); }
.duebar.late { background: var(--red-2); border-color: #e2b3ad; }
.duebar .grow { flex: 1; }
.src { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--wash); color: var(--ink-2); white-space: nowrap; }
.src.db { background: #e6f1fb; color: #0c447c; }
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 6px; color: var(--pencil); font-size: 18px; line-height: 1; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary, .menu > summary:hover { background: var(--wash); color: var(--ink); }
.menu .pop { position: absolute; right: 0; top: 28px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; z-index: 20; }
.menu .pop a, .menu .pop button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; background: none; border: 0;
  font: inherit; font-size: 13.5px; color: var(--ink); text-decoration: none; cursor: pointer; }
.menu .pop a:hover, .menu .pop button:hover { background: var(--wash); }
.menu .pop .danger { color: var(--red); }
.dzone { border: 1px solid #e2b3ad; border-radius: 12px; padding: 14px 16px; }

/* 저장 전 확인: 문제 | 해설 | AI·저장 */
body.wide main { max-width: 1440px; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.cgrid .side-sticky { position: sticky; top: 72px; display: grid; gap: 12px; }
@media (max-width: 1100px) { .cgrid { grid-template-columns: 1fr; } .cgrid .side-sticky { position: static; } }

/* 원본 줄바꿈: 한 줄이 넘치면 그 문단만 글자를 살짝 줄인다 */
.hw-p.lines { white-space: nowrap; }
.hw-p.lines .hw-tbl td, .hw-p.lines .hw-box { white-space: normal; }
.ul-obj { display: inline-block; border-bottom: 1px solid currentColor; padding-bottom: 1px; vertical-align: middle; }
.theme-btn { background: none; border: 1px solid var(--rule-2); border-radius: 6px; padding: 2px 8px; color: var(--pencil); cursor: pointer; font: inherit; font-size: 12.5px; }
:root[data-theme="dark"] .brand img { filter: invert(1) brightness(1.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { filter: invert(1) brightness(1.6); } }
.btn.hl, .btn.hl:disabled { color: #1b2130; }

/* V1.8: 줄마다 양쪽 정렬, 탭 너비, 분수 표 간격 */
.hw-p.split .ln { display: block; }
.hw-p.split.al-justify .ln { text-align: justify; text-align-last: justify; }
.hw-p.split.al-justify .ln:last-child { text-align-last: auto; }
.hw .tab { display: inline-block; width: 2em; }
.hw .tab[style] { min-width: 0; }
.hw-tbl.inline { line-height: 1.25; font-size: .92em; margin: 0 3px; border-collapse: collapse; }
.hw-tbl.inline td { padding: 0 3px !important; }
.hw-tbl.inline td .hw-p { margin: 0; line-height: 1.25; }
.theme-tg { display: inline-flex; align-items: center; gap: 6px; color: var(--pencil); cursor: pointer; }
.theme-tg input.switch { width: 38px; height: 22px; } .theme-tg input.switch::after { width: 18px; height: 18px; }
.theme-tg input.switch:checked { background: #5856d6; } .theme-tg input.switch:checked::after { left: 18px; }
.menu .pop button.btn { display: inline-flex; width: auto; background: var(--ink); color: var(--paper); padding: 5px 14px; border-radius: 6px; font-weight: 600; justify-content: center; }
.menu .pop button.btn:hover { background: var(--ink); opacity: .88; }
.hw-p.lines.fitted { white-space: normal; }
.hw-p.lines.fitted .ln { white-space: nowrap; }
.hw-p.split.fitted.al-justify .ln { white-space: normal; }
.hw-doc { line-height: 1.6; }
.hw-box { min-width: fit-content; }
.hw-box .hw-p:not(.lines) { white-space: normal; }
.hw-pic { height: auto; }
.hw-tbl, .hw-tbl * { text-align-last: auto; }

/* V1.9 */
.hw-pic.hw-float { display: block; margin-top: 2px; margin-bottom: 4px; }
.hw-pic.hw-float[style*="float:right"] { margin-left: 8px; }
.hw-pic.hw-float[style*="float:left"] { margin-right: 8px; }
.hw-doc::after, .hw-box::after { content: ""; display: block; clear: both; }
/* 다크 모드 공지 띠 */
:root[data-theme="dark"] .noticebar { background: #2b2614; border-color: #6b5a1d; }
:root[data-theme="dark"] .noticebar a, :root[data-theme="dark"] .noticebar b { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .noticebar { background: #2b2614; border-color: #6b5a1d; }
  :root:not([data-theme="light"]) .noticebar a, :root:not([data-theme="light"]) .noticebar b { color: var(--ink); } }
.noticebar a { color: var(--ink); } .noticebar b { color: var(--ink); }
/* 끌어서 정렬 피드백 */
.drag-ghost { opacity: .35; background: var(--wash) !important; }
.drag-chosen { box-shadow: 0 0 0 2px var(--ink-2) inset; }
.drag-moving { opacity: .9; }
#slots.sorting { outline: 2px dashed var(--rule-2); outline-offset: -2px; }
/* 달력 상태 색 */
.fc .ev-ok { background: #e6f1fb; border-color: #85b7eb; } .fc .ev-ok .fc-event-title { color: #0c447c; }
.fc .ev-soon { background: #faeeda; border-color: #ef9f27; } .fc .ev-soon .fc-event-title { color: #633806; }
.fc .ev-overdue { background: #fcebeb; border-color: #e24b4a; } .fc .ev-overdue .fc-event-title { color: #791f1f; }
/* 좁은 화면: 배분표 가로 스크롤 */
@media (max-width: 900px) { #assign .tablewrap { overflow-x: auto !important; } }

/* ===== 다크 모드 점검 (V1.10) ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="dark"] th, :root[data-theme="dark"] .diff .head, :root[data-theme="dark"] .composer { background: var(--wash); }
:root[data-theme="dark"] tr.mine td, :root[data-theme="dark"] .mm-table tr.mm-on td { background: #2a2717; }
:root[data-theme="dark"] .mm-table tr.mm-on td, :root[data-theme="dark"] .mm-table tr.mm-on td b { color: var(--ink); }
:root[data-theme="dark"] .fc .fc-day-today { background: #2b2614 !important; }
:root[data-theme="dark"] .fc .fc-button { background: var(--sheet); color: var(--ink); border-color: var(--rule-2); }
:root[data-theme="dark"] .fc .fc-button .fc-icon { color: var(--ink); }
:root[data-theme="dark"] .kinds label, :root[data-theme="dark"] .seg a, :root[data-theme="dark"] .pager a, :root[data-theme="dark"] .pager span, :root[data-theme="dark"] .people-pick label, :root[data-theme="dark"] .finding, :root[data-theme="dark"] .tl .dot { background: var(--sheet); color: var(--ink); }
:root[data-theme="dark"] .pager .on { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .src.db { background: #12324f; color: #b5d4f4; }
:root[data-theme="dark"] .diff del { background: #5a2420; color: #ffd9d4; } :root[data-theme="dark"] .diff ins { background: #183c27; color: #cdeedc; }
:root[data-theme="dark"] .tag.todo { background: #4a3f10; color: #ffe9a3; }
:root[data-theme="dark"] .tag.done { background: #16301f; color: #9ad9b3; }
:root[data-theme="dark"] .tag { background: var(--wash); color: var(--ink-2); }
:root[data-theme="dark"] .warnbox { background: #2b2614; border-color: #6b5a1d; color: var(--ink); }
:root[data-theme="dark"] .duebar { background: #2b2614; border-color: #6b5a1d; }
:root[data-theme="dark"] .duebar.late { background: #3a1f1d; border-color: #7a3a33; }
:root[data-theme="dark"] .pickbar { background: #2b2614; border-color: #6b5a1d; }
:root[data-theme="dark"] .rvhead { background: var(--sheet); }
:root[data-theme="dark"] a:not(.btn) { color: inherit; }
:root[data-theme="dark"] .chip { background: var(--wash); color: var(--ink-2); border-color: var(--rule-2); }

@media (prefers-color-scheme: dark) {


:root:not([data-theme="light"]) {
  color-scheme: dark;
}
:root:not([data-theme="light"]) th, :root:not([data-theme="light"]) .diff .head, :root:not([data-theme="light"]) .composer { background: var(--wash); }
:root:not([data-theme="light"]) tr.mine td, :root:not([data-theme="light"]) .mm-table tr.mm-on td { background: #2a2717; }
:root:not([data-theme="light"]) .mm-table tr.mm-on td, :root:not([data-theme="light"]) .mm-table tr.mm-on td b { color: var(--ink); }
:root:not([data-theme="light"]) .fc .fc-day-today { background: #2b2614 !important; }
:root:not([data-theme="light"]) .fc .fc-button { background: var(--sheet); color: var(--ink); border-color: var(--rule-2); }
:root:not([data-theme="light"]) .fc .fc-button .fc-icon { color: var(--ink); }
:root:not([data-theme="light"]) .kinds label, :root:not([data-theme="light"]) .seg a, :root:not([data-theme="light"]) .pager a, :root:not([data-theme="light"]) .pager span, :root:not([data-theme="light"]) .people-pick label, :root:not([data-theme="light"]) .finding, :root:not([data-theme="light"]) .tl .dot { background: var(--sheet); color: var(--ink); }
:root:not([data-theme="light"]) .pager .on { background: var(--ink); color: var(--paper); }
:root:not([data-theme="light"]) .src.db { background: #12324f; color: #b5d4f4; }
:root:not([data-theme="light"]) .diff del { background: #5a2420; color: #ffd9d4; } :root:not([data-theme="light"]) .diff ins { background: #183c27; color: #cdeedc; }
:root:not([data-theme="light"]) .tag.todo { background: #4a3f10; color: #ffe9a3; }
:root:not([data-theme="light"]) .tag.done { background: #16301f; color: #9ad9b3; }
:root:not([data-theme="light"]) .tag { background: var(--wash); color: var(--ink-2); }
:root:not([data-theme="light"]) .warnbox { background: #2b2614; border-color: #6b5a1d; color: var(--ink); }
:root:not([data-theme="light"]) .duebar { background: #2b2614; border-color: #6b5a1d; }
:root:not([data-theme="light"]) .duebar.late { background: #3a1f1d; border-color: #7a3a33; }
:root:not([data-theme="light"]) .pickbar { background: #2b2614; border-color: #6b5a1d; }
:root:not([data-theme="light"]) .rvhead { background: var(--sheet); }
:root:not([data-theme="light"]) a:not(.btn) { color: inherit; }
:root:not([data-theme="light"]) .chip { background: var(--wash); color: var(--ink-2); border-color: var(--rule-2); }

}

/* V1.10: 해설 박스·빈 줄·밑줄 묶음, 미리보기 접기 */
.hw-box { padding: 1px 8px; margin: 3px 0; }
.hw-box .hw-p { margin: 0; }
.hw-empty { line-height: 1; height: .9em; }
.ul-group { display: inline-block; border-bottom: 1px solid currentColor; padding: 0 2px 1px; line-height: 1.25; }
.ul-group .hw-tbl.inline { vertical-align: middle; }
.pvbox[hidden] { display: none; }
.pv-toggle { margin: 0 0 8px; }
.mnav .grp { font-size: 11.5px; color: var(--pencil); margin: 12px 10px 2px; letter-spacing: .02em; }
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-content: start; }
.mcard { display: grid; gap: 4px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.mcard:hover { border-color: var(--ink-2); }
.mcard .mc-grp { font-size: 11.5px; color: var(--pencil); }
.mcard b { font-size: 15.5px; }
.mcard .mc-d { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.mcard.danger { border-style: dashed; }
.mcard .tag { justify-self: start; margin-top: 4px; }
.notice-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); margin-bottom: 10px; }
.notice-row:hover { border-color: var(--ink-2); }
.notice-body { line-height: 1.75; margin: 0 0 12px; }
.notice-img { max-width: 100%; border-radius: 10px; border: 1px solid var(--rule); margin: 4px 0 12px; display: block; }
.poll { border: 1px solid var(--rule); border-radius: 12px; padding: 14px; margin-top: 8px; background: var(--wash); }
.poll-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; }
.poll-opt.mine { border-color: var(--ink-2); }
.poll-opt .po-bar { grid-column: 1 / -1; height: 6px; background: var(--wash); border-radius: 3px; overflow: hidden; }
.poll-opt .po-bar i { display: block; height: 100%; background: #5856d6; }
.poll-opt .po-names { grid-column: 1 / -1; }
.poll-opt .po-n { font-size: 12.5px; color: var(--pencil); }
.cmt-row { border-bottom: 1px solid var(--rule); padding: 8px 0; display: grid; gap: 2px; }

/* 링크로 된 버튼은 어떤 모드에서도 버튼 색 그대로 */
a.btn { color: var(--paper); } a.btn.ghost { color: var(--ink); }

/* 두 버전 비교: 본문 재현 4칸 */
.cmp4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin-bottom: 18px; }
.cmp-h { font-weight: 700; font-size: 14px; }
.cmp-c { padding: 12px 14px; min-width: 0; overflow-x: auto; }
.cmp-c .hw-q { margin-top: 0; padding-top: 0; border-top: 0; }
.cmp-l { font-size: 12px; color: var(--pencil); margin-bottom: 6px; }
@media (max-width: 860px) { .cmp4 { grid-template-columns: 1fr; } }
.fold { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.fold:hover { background: var(--wash); } .fold.on { background: var(--wash); font-weight: 700; }
.period { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.period .quick a { color: var(--ink-2); }

/* 홈 달력: 일정마다 색 점 */
.mcal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mcal-head b { font-size: 18px; }
.mcal-legend { display: flex; gap: 12px; color: var(--pencil); margin: 0 0 8px; }
.mcal-legend span { display: inline-flex; gap: 5px; align-items: center; }
.mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mcal-w { text-align: center; font-size: 12px; color: var(--pencil); padding: 4px 0; }
.mcal-d { background: none; border: 1px solid transparent; border-radius: 10px; min-height: 52px; padding: 5px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); font: inherit; }
.mcal-d:hover { background: var(--wash); }
.mcal-d.out { color: var(--pencil); opacity: .55; }
.mcal-d.today .n { background: var(--ink); color: var(--paper); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.mcal-d.sel { border-color: var(--ink-2); background: var(--wash); }
.mcal-d .n { font-size: 13.5px; line-height: 24px; }
.mcal-d .dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 44px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot.late { box-shadow: 0 0 0 2px var(--red-2); }
.k-write { background: #1d9e75; } .k-review { background: #378add; } .k-edit { background: #d85a30; } .k-work { background: #7f77dd; }
.mcal-list { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 10px; }
.mcal-lh { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.mcal-it { display: flex; gap: 8px; align-items: center; padding: 7px 4px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.mcal-it:hover { background: var(--wash); }
.mcal-it .kd { font-size: 12px; color: var(--pencil); min-width: 28px; }
/* 날짜 선택기: 앱 색에 맞춤 + 다크 모드 */
.flatpickr-calendar { font-family: inherit; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.flatpickr-day.today { border-color: #e8c33a; }
input.flatpickr-input + input, input.flatpickr-input[readonly] { background: var(--sheet); color: var(--ink); min-width: 170px; }
:root[data-theme="dark"] .flatpickr-calendar, :root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, :root[data-theme="dark"] span.flatpickr-weekday,
:root[data-theme="dark"] .flatpickr-time input, :root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm { background: var(--sheet); color: var(--ink); fill: var(--ink); }
:root[data-theme="dark"] .flatpickr-day { color: var(--ink); } :root[data-theme="dark"] .flatpickr-day:hover { background: var(--wash); }
:root[data-theme="dark"] .flatpickr-day.prevMonthDay, :root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--pencil); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, :root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--ink); }
/* 자료실 (드라이브) */
.drive-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.newmenu > summary.btn { list-style: none; } .newmenu > summary::-webkit-details-marker { display: none; }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 15px; flex: 1; min-width: 200px; }
.crumbs a { text-decoration: none; color: var(--ink); padding: 3px 6px; border-radius: 6px; } .crumbs a:hover, .crumbs a.dropping { background: var(--wash); }
.crumbs span { color: var(--pencil); }
.drive-search { position: relative; } .drive-search .ic { position: absolute; left: 9px; top: 9px; color: var(--pencil); }
.drive-search input { padding-left: 30px; width: 260px; }
.drive-hint { margin: 6px 0 10px; }
.drive-sec { font-size: 13px; color: var(--pencil); margin: 14px 0 6px; }
.drive-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dfold { display: flex; gap: 10px; align-items: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px;
  text-decoration: none; color: var(--ink); }
.dfold:hover { border-color: var(--ink-2); } .dfold.dropping { border-color: #378add; background: #e6f1fb; }
.dfold .nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-files .acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.drive-files .acts .btn { height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; }
.drive-files tr.dfile { cursor: default; }
.ext { display: inline-block; min-width: 34px; text-align: center; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 4px; background: var(--wash); color: var(--ink-2); }
.dropzone { position: fixed; inset: 0; background: rgba(55, 138, 221, .12); border: 3px dashed #378add; z-index: 80; display: grid; place-items: center; pointer-events: none; }
.dropzone[hidden] { display: none; }
.dropzone div { background: var(--sheet); padding: 18px 26px; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.ctx { position: fixed; z-index: 90; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 4px; min-width: 170px; }
.ctx[hidden] { display: none; }
.ctx button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.ctx button:hover { background: var(--wash); } .ctx .danger { color: var(--red); }
.newmenu > summary.btn { color: var(--paper); font-size: 13.5px; padding: 7px 14px; line-height: 1.4; }
.newmenu > summary.btn:hover { background: var(--ink); opacity: .88; }
.drive { min-height: 60vh; }

/* ⓘ 설명 아이콘 */
.info { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.3px solid var(--pencil); color: var(--pencil);
  font: italic 700 10px/1 Georgia, serif; cursor: help; position: relative; vertical-align: 1px; margin-left: 4px; user-select: none; }
.info:hover, .info:focus { border-color: var(--ink); color: var(--ink); outline: none; }
.info::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px;
  background: var(--ink); color: var(--paper); font: 400 12.5px/1.5 inherit; font-style: normal; padding: 7px 10px; border-radius: 8px; white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30; text-align: left; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.info:hover::after, .info:focus::after { opacity: 1; }
.uprow { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.att-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.att-when { font-size: 20px; font-weight: 700; margin: 2px 0; }
.att-step { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--marker-2); border: 1px solid #e8d27a; }
:root[data-theme="dark"] .att-step { background: #2b2614; border-color: #6b5a1d; }
.att-edit { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
.att-edit > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }

/* ===== V1.14: 프로필·접속 중·메시지 ===== */
.av { --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--wash); color: var(--pencil); display: inline-flex;
  align-items: center; justify-content: center; position: relative; flex: none; overflow: visible; border: 1px solid var(--rule); box-sizing: border-box; }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av svg { width: 62%; height: 62%; margin-top: 12%; }
.av .av-on { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%; background: #1d9e75; border: 2px solid var(--sheet); }
.av.more { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.av.grp svg { width: 55%; height: 55%; margin: 0; }
.stack-av { display: inline-flex; } .stack-av .av + .av { margin-left: -9px; } .stack-av .av { border: 2px solid var(--sheet); }
.me { display: flex; align-items: center; gap: 14px; }
.me .menu > summary { display: flex; align-items: center; gap: 7px; padding: 3px 6px; font-size: 14px; color: var(--ink); }
.me .bell { position: relative; color: var(--ink-2); display: inline-flex; padding: 4px; border-radius: 8px; }
.me .bell:hover { background: var(--wash); }
.me .bell b { position: absolute; top: -3px; right: -5px; background: var(--red); color: #fff; font-size: 10.5px; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.me .pop { right: 0; top: 40px; }
.pop-h { font-size: 12px; color: var(--pencil); padding: 4px 10px 6px; }
.pop-person { display: flex !important; gap: 10px; align-items: center; }
.pop-me { display: flex; gap: 10px; align-items: center; padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.pop-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.nav a .nb, .nb { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; padding: 0 5px; margin-left: 4px; font-weight: 700; }
.nb[hidden] { display: none; }
@media (max-width: 760px) { .me-name { display: none; } }

.prof { max-width: 820px; }
.prof-top { display: flex; gap: 20px; align-items: flex-start; }
.prof-photo { position: relative; cursor: pointer; }
.prof-cam { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--rule-2);
  display: grid; place-items: center; color: var(--ink); }
.prof-main { flex: 1; min-width: 0; }
.prof-name { font-size: 22px; font-weight: 700; }
.prof-bio { font-size: 15px; }
.prof-edit { margin-top: 14px; }
.prof-edit #profedit:not([hidden]) { border-top: 1px solid var(--rule); padding-top: 14px; }
.prof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.prof-stats div { background: var(--wash); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.prof-stats span { font-size: 12.5px; color: var(--pencil); } .prof-stats b { font-size: 20px; }
.people-list { display: grid; gap: 8px; }
.person { display: flex; gap: 10px; align-items: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; }
.person.off { opacity: .6; }

.dm { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100vh - 120px); min-height: 480px; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.dm-list { border-right: 1px solid var(--rule); overflow-y: auto; padding: 10px; }
.dm-lh { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-size: 17px; }
.dm-row { display: flex; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.dm-row:hover { background: var(--wash); } .dm-row.on { background: var(--wash); }
.dm-meta { flex: 1; min-width: 0; display: grid; } .dm-name { font-weight: 600; font-size: 14px; }
.dm-last { font-size: 12.5px; color: var(--pencil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-side { display: grid; justify-items: end; gap: 3px; }
.dm-chat { display: flex; flex-direction: column; min-width: 0; }
.dm-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.dm-head .ok { color: #1d9e75; }
.dm-body { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.dm-date { align-self: center; font-size: 12px; color: var(--pencil); background: var(--wash); border-radius: 999px; padding: 2px 10px; margin: 8px 0; }
.dm-sys { align-self: center; font-size: 12px; color: var(--pencil); }
.dm-msg { display: grid; justify-items: start; max-width: 72%; }
.dm-msg.mine { align-self: flex-end; justify-items: end; }
.dm-who { font-size: 12px; color: var(--pencil); margin: 0 0 2px 4px; }
.dm-bub { background: var(--sheet); border: 1px solid var(--rule); border-radius: 16px 16px 16px 4px; padding: 8px 12px; line-height: 1.55; word-break: break-word; }
.dm-msg.mine .dm-bub { background: var(--ink); color: var(--paper); border-color: var(--ink); border-radius: 16px 16px 4px 16px; }
.dm-msg.mine .dm-bub a { color: inherit; }
.dm-time { font-size: 11px; color: var(--pencil); margin: 2px 4px 0; }
.dm-img { max-width: 260px; max-height: 260px; border-radius: 12px; border: 1px solid var(--rule); display: block; }
.dm-file { display: inline-flex; gap: 8px; align-items: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 12px; text-decoration: none; color: var(--ink); }
.dm-file span { font-size: 12px; color: var(--pencil); }
.dm-seen { align-self: flex-end; font-size: 11px; color: var(--pencil); margin-top: -2px; }
.dm-input { display: flex; gap: 10px; align-items: flex-end; padding: 10px 14px; border-top: 1px solid var(--rule); }
.dm-attach { cursor: pointer; color: var(--pencil); padding: 8px 2px; } .dm-attach:hover { color: var(--ink); }
.dm-txt { flex: 1; display: grid; gap: 4px; }
.dm-txt textarea { resize: none; width: 100%; min-height: 40px; border-radius: 12px; line-height: 1.5; padding: 9px 12px; box-sizing: border-box; }
.dm-fname { font-size: 12px; color: var(--ink-2); cursor: pointer; }
.pick-people { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.pp { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; } .pp:hover { background: var(--wash); }
.pp[hidden] { display: none; }
@media (max-width: 760px) { .dm { grid-template-columns: 1fr; } .dm-list { display: none; } }

/* 빈 화면 안내 */
.empty-state { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 20px; color: var(--ink-2); }
.empty-state b { font-size: 16px; color: var(--ink); } .empty-state span { font-size: 13.5px; }
.empty-state .btn { margin-top: 6px; }
.empty-state .es-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--wash); display: grid; place-items: center; color: var(--pencil); margin-bottom: 4px; }

/* 설명 아이콘 (DB에만): 동그라미 안 물음표 */
.info { width: 16px; height: 16px; border: 0; background: var(--wash); color: var(--ink-2); font: 700 10.5px/1 inherit; font-style: normal; }
.info:hover, .info:focus { background: var(--ink); color: var(--paper); }

.toasts li form { margin: 0; } .toasts .undo { color: #85b7eb; font-weight: 700; opacity: 1; margin-left: 6px; }

/* ===== V1.14: 글자 크기·간격 한 규칙 (8) ===== */
:root { --fs-title: 26px; --fs-h2: 18px; --fs-h3: 15.5px; --fs-body: 14.5px; --fs-small: 12.5px; --h-btn: 36px; --h-btn-sm: 30px; }
body { font-size: var(--fs-body); }
.pagehead { margin: 4px 0 18px; align-items: center; }
.pagehead h1 { font-size: var(--fs-title); line-height: 1.25; margin: 0; letter-spacing: -.01em; }
.pagehead .sub { margin: 4px 0 0; font-size: 13.5px; }
h2 { font-size: var(--fs-h2); margin: 22px 0 10px; letter-spacing: -.005em; }
h3 { font-size: var(--fs-h3); margin: 0 0 8px; }
.small { font-size: var(--fs-small); }
.btn { min-height: var(--h-btn); padding: 0 16px; border-radius: 10px; justify-content: center; }
.btn.sm { min-height: var(--h-btn-sm); padding: 0 12px; border-radius: 8px; font-size: 13px; }
input[type=text], input[type=password], input[type=number], input[type=search], select, input.flatpickr-input + input { min-height: var(--h-btn); border-radius: 10px; }
.card { border-radius: 14px; }
.card.pad { padding: 18px 20px; }
table td, table th { padding-top: 10px; padding-bottom: 10px; }
th { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.tag { border-radius: 6px; font-size: 12px; padding: 2px 8px; }
.stack { gap: 14px; }
.sidenav a { border-radius: 10px; padding: 8px 12px; }
.tabs a { padding: 10px 14px; }

/* V-beta1 */
.dm-chat { min-height: 0; overflow: hidden; } .dm-body { min-height: 0; } .dm-list { min-height: 0; }
.dm { height: calc(100vh - 110px); }
/* 이름 옆 태그·배지 높이 맞춤 */
.tag { display: inline-flex; align-items: center; height: 22px; line-height: 1; vertical-align: middle; box-sizing: border-box; }
.prof-main .row { align-items: center; }
.prof-name { line-height: 1.2; }
.nav a { display: inline-flex; align-items: center; }
.nav a .nb, .nb { line-height: 1; vertical-align: middle; }
.nav a .nb[hidden], .nb[hidden] { display: none !important; }
/* 자료실: Windows 탐색기처럼 */
.xp { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.xp-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.xp-up.off { opacity: .35; pointer-events: none; }
.xp-addr { flex: 1; display: flex; gap: 4px; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); overflow-x: auto; white-space: nowrap; }
.xp-addr a { text-decoration: none; color: var(--ink); padding: 2px 6px; border-radius: 6px; } .xp-addr a:hover, .xp-addr a.dropping { background: var(--wash); }
.xp-addr span { color: var(--pencil); }
.xp-search { position: relative; } .xp-search .ic { position: absolute; left: 9px; top: 9px; color: var(--pencil); } .xp-search input { padding-left: 30px; width: 230px; }
.xp-tools { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.xp-main { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 420px; }
.xp-tree { border-right: 1px solid var(--rule); padding: 8px 6px; overflow-y: auto; max-height: 62vh; }
.xp-node { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-node:hover, .xp-node.dropping { background: var(--wash); } .xp-node.on { background: var(--wash); font-weight: 700; }
.xp-node .car { width: 10px; color: var(--pencil); font-size: 11px; flex: none; }
.fi { width: 18px; height: 14px; flex: none; border-radius: 2px 3px 3px 3px; background: #f2c94c; position: relative; display: inline-block; }
.fi::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #e0b43a; }
.fi.root { background: #85b7eb; } .fi.root::before { background: #6aa3dc; }
.xp-list { overflow-y: auto; max-height: 62vh; }
.xp-row { display: grid; grid-template-columns: minmax(0, 2.6fr) 150px 90px 90px 110px; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--rule);
  font-size: 13.5px; cursor: default; user-select: none; outline: none; }
.xp-row:hover { background: var(--wash); } .xp-row.sel { background: #e6f1fb; } .xp-row.dropping { background: #e6f1fb; box-shadow: inset 0 0 0 2px #378add; }
:root[data-theme="dark"] .xp-row.sel, :root[data-theme="dark"] .xp-row.dropping { background: #12324f; }
.xp-row .nm { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; } .xp-row .nm .ext { flex: none; }
.xp-head { font-size: 12px; color: var(--pencil); font-weight: 600; background: var(--wash); position: sticky; top: 0; z-index: 1; }
.xp-head:hover { background: var(--wash); }
.xp-empty { display: grid; justify-items: center; gap: 6px; padding: 60px 20px; color: var(--ink-2); } .xp-empty b { color: var(--ink); font-size: 15px; }
.xp-status { padding: 7px 14px; border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .xp-main { grid-template-columns: 1fr; } .xp-tree { display: none; } .xp-row { grid-template-columns: minmax(0, 1fr) 90px; } .xp-row > span:nth-child(n+3) { display: none; } }

:root[data-theme="dark"] mark { background: rgba(232, 195, 58, .28); color: var(--ink); }
:root[data-theme="dark"] .hw mark { background: #ffe45e; color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark { background: rgba(232, 195, 58, .28); color: var(--ink); }
  :root:not([data-theme="light"]) .hw mark { background: #ffe45e; color: #111; } }
.ptable-name { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.ptable-name:hover b { text-decoration: underline; }
.meter { height: 10px; background: var(--wash); border-radius: 6px; overflow: hidden; } .meter i { display: block; height: 100%; background: #378add; }