/* 178 도우미 창(모든 탭 오른쪽) · 권한 바뀜 배너 · 권한 체크 표 */
.with-helper { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:0 .5rem; align-items:start; }
.helper { position:sticky; top:.5rem; margin:1rem 1rem 1rem 0; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem; font-size:.9rem; }
.helper textarea { font-size:.9rem; }
.helper-answer { margin-top:.6rem; border-top:1px solid var(--line); padding-top:.4rem; }
.usage { width:100%; height:8px; }
.flash.warn { background:#fdf1e4; border:1px solid #f0c899; }
.grid-tbl td, .grid-tbl th { text-align:center; } .grid-tbl td:first-child, .grid-tbl th:first-child { text-align:left; }
.on-cell { color:var(--ok); font-weight:700; } .tag-proposed { background:#fff3c4; color:#6b5200; }
@media (max-width: 900px) { .with-helper { display:block; } .helper { position:static; margin:1rem; } }
/* 화면 글꼴 = KoPub World 돋움 Pro(한국출판인회의 · 무료 · 웹 서버 탑재 허용 · 파일 수정 · 변형 금지 = 원본 그대로 자체 제공) */
@font-face { font-family:"KoPubWorld Dotum"; src:url("/static/fonts/KoPubWorldDotumPro-Medium.otf") format("opentype"); font-weight:400 500; font-display:swap; }
@font-face { font-family:"KoPubWorld Dotum"; src:url("/static/fonts/KoPubWorldDotumPro-Bold.otf") format("opentype"); font-weight:600 800; font-display:swap; }
:root { --fg:#1d2329; --muted:#6b7480; --line:#dfe3e8; --bg:#f6f7f9; --card:#fff; --accent:#22577a; --warn:#b5651d; --ok:#2b7a3d; --late:#b3261e; }
* { box-sizing: border-box; }
button { font-family:inherit; }
body { margin:0; font-family: "KoPubWorld Dotum", "Malgun Gothic", sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; }
a { color:var(--accent); }
code { font-size:.9em; background:#eef1f4; padding:0 .25em; border-radius:3px; }
.top { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; padding:.6rem 1rem; background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:700; text-decoration:none; color:var(--fg); }
.nav { display:flex; flex-wrap:wrap; gap:.25rem; flex:1; }
.nav a { padding:.25rem .55rem; border-radius:6px; text-decoration:none; color:var(--fg); font-size:.95rem; }
.nav a.on, .nav a:hover { background:#e7eef4; }
.who { display:flex; gap:.5rem; align-items:center; font-size:.9rem; color:var(--muted); }
.page { max-width:960px; margin:1rem auto; padding:0 1rem; }
.page.wide { max-width:1280px; }
.page.full { max-width:none; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1rem; }
.card.narrow { max-width:520px; margin:2rem auto; }
h1 { font-size:1.4rem; margin:.2rem 0 .6rem; } h2 { font-size:1.15rem; margin:.4rem 0 .5rem; } h3 { font-size:1rem; margin:.8rem 0 .3rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.flash { padding:.6rem .9rem; border-radius:8px; margin-bottom:.8rem; background:#e8f3ea; }
.flash.err { background:#fbeaea; }
.notice { padding:.6rem .9rem; border-radius:8px; background:#eef3f8; }
.notice.warn { background:#fdf1e4; border:1px solid #f0c899; }
.btn { display:inline-block; padding:.5rem 1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; font-size:1rem; cursor:pointer; text-decoration:none; text-align:center; }
.btn.ghost { background:#e7eef4; color:var(--accent); }
.btn.ok { background:var(--ok); }
.btn.small { padding:.2rem .6rem; font-size:.85rem; }
.btn.wide { display:block; width:100%; }
button.link { background:none; border:0; color:var(--accent); cursor:pointer; padding:0; font-size:inherit; text-decoration:underline; }
form.inline { display:inline; }
.stack { display:flex; flex-direction:column; gap:.6rem; }
.row { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:flex-end; }
fieldset { border:1px solid var(--line); border-radius:8px; padding:.5rem .8rem; }
fieldset label { display:block; }
fieldset.row label { display:inline-block; }
label { display:flex; flex-direction:column; gap:.2rem; }
fieldset label, label.chip { flex-direction:row; align-items:center; gap:.35rem; }
label.chip { display:inline-flex; margin-right:.8rem; }
label.disabled { color:var(--muted); }
input, select, textarea { font:inherit; padding:.4rem .5rem; border:1px solid var(--line); border-radius:6px; background:#fff; width:100%; }
input[type=radio], input[type=checkbox] { width:auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.6rem 1rem; }
.tbl { width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th, .tbl td { border-bottom:1px solid var(--line); padding:.35rem .4rem; text-align:left; vertical-align:top; }
.tbl tr.off td { color:var(--muted); }
.badge { display:inline-block; padding:0 .45rem; border-radius:10px; background:#e7eef4; font-size:.8rem; font-style:normal; }
.badge.warn { background:#fde3c7; color:#7a3e00; } .badge.dup { background:#e9e1f7; color:#4b2a86; } .badge.ok { background:#dcefdf; color:#1e5a2b; }
.list { padding-left:1.1rem; margin:.2rem 0; } .list li.late { color:var(--late); }
.problems { color:var(--late); }
.split { display:grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap:1rem; }
.metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
.metric { background:#f1f5f8; border-radius:8px; padding:.5rem; text-align:center; }
.metric b { display:block; font-size:1.6rem; } .metric span { font-size:.85rem; color:var(--muted); }
.cards4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; margin-bottom:.8rem; }
.gen { display:block; border:2px solid var(--line); border-radius:10px; padding:.8rem; cursor:pointer; min-height:120px; }
.gen input { margin-bottom:.3rem; }
.gen:has(input:checked) { border-color:var(--accent); background:#f0f6fa; }
.gen-body { display:flex; flex-direction:column; gap:.2rem; } .gen-body b { font-size:1.1rem; }
.steps { display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; padding:0; margin:.4rem 0 1rem; }
.steps li { padding:.2rem .6rem; border-radius:12px; background:#eceff2; font-size:.9rem; }
.steps li.done { background:#dcefdf; } .steps li.on { background:var(--accent); color:#fff; } .steps li.on a { color:#fff; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:.2rem .8rem; margin:0; } .kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-all; }
.recog { display:flex; flex-direction:column; gap:.3rem; }
.tasks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.task a { display:flex; flex-direction:column; padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--fg); background:#fff; }
.task.recheck a { border-color:#f0a35e; background:#fff7ef; } .task.done a { opacity:.6; } .task.late a { border-left:4px solid var(--late); }
.review-head { padding:0 .5rem; } .review-head small { color:var(--muted); font-weight:normal; font-size:.9rem; }
.review3 { display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(280px, 3fr); gap:.8rem; padding:0 .5rem; }
.pane { background:#fff; border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; max-height:calc(100vh - 160px); overflow:auto; }
.passage p, .commentary p { margin:.3rem 0; }
.pick { cursor:pointer; border-radius:4px; } .pick:hover { background:#fff6d6; }
.ln { display:inline-block; min-width:1.6rem; color:var(--muted); font-size:.8rem; }
.box { border:1px solid #9aa5b1; border-radius:4px; padding:.2rem .5rem; margin:.4rem 0; position:relative; }
.box-label { position:absolute; right:-.2rem; top:-.7rem; background:#fff; font-size:.8rem; padding:0 .2rem; }
.bogi { border:1px solid var(--line); border-radius:6px; padding:.5rem .7rem; margin:.5rem 0; white-space:pre-line; }
.choices { list-style:none; padding:0; } .choices li { margin:.35rem 0; padding:.2rem .3rem; }
.choices li.answer { background:#eef7ef; }
.cn { font-weight:700; }
.expl { margin:.3rem 0 .6rem 1.4rem; font-size:.92rem; color:#333; } .expl p { margin:.2rem 0; white-space:pre-line; } .rate { font-size:.8rem; color:var(--muted); }
.answer-line { font-weight:700; }
.peer { border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; margin-bottom:.4rem; }
.mine { border-bottom:1px dashed var(--line); margin-bottom:.6rem; }
.result { border-top:1px solid var(--line); padding-top:.4rem; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.6rem 1rem; }
.grid4 select[multiple] { min-height:5.5rem; }
legend { color:var(--muted); font-size:.9rem; }
.settext { white-space:pre-wrap; font-size:.95rem; border-left:3px solid var(--line); padding-left:.7rem; }
.setform { margin:.4rem 0 .6rem .7rem; }
.setform.quoted { border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem; }
.settable { width:auto; min-width:40%; }
.settable th, .settable td { border:1px solid #9aa5b1; }
.setbox { border:1px solid #9aa5b1; border-radius:4px; padding:.2rem .5rem; margin:.4rem 0; }
.setfig { max-width:100%; height:auto; vertical-align:middle; border:1px solid var(--line); background:#fff; }
.setfig-miss { display:inline-block; border:1px dashed #b54708; color:#b54708; border-radius:4px; padding:0 .3rem; }
.tagrow { border-top:1px solid var(--line); padding-top:.3rem; }
.simrow { border-top:1px solid var(--line); padding:.4rem 0; }
.axes { margin-left:.5rem; } .ax { display:inline-block; font-size:.78rem; background:#f1f5f8; border-radius:4px; padding:0 .35rem; margin-right:.2rem; }
details summary { cursor:pointer; }
.nw { white-space:nowrap; } .nw .muted { white-space:normal; min-width:10rem; }
@media (max-width: 900px) {
  .split, .review3 { grid-template-columns: 1fr; }
  .pane { max-height:none; }
  .cards4, .metrics { grid-template-columns: repeat(2, 1fr); }
  .tbl { display:block; overflow-x:auto; white-space:nowrap; }
}
/* 219 형식 의견 핀 — 쪽 그림 위 점 · 상자 */
.pagebox { margin: .6rem 0; }
.pagewrap { position: relative; display: inline-block; max-width: 100%; border: 1px solid #ccd; }
.pageimg { display: block; max-width: 100%; cursor: crosshair; }
.pin { position: absolute; transform: translate(-50%, -50%); background: #c0392b; color: #fff; font-size: .7rem;
       padding: 0 .25rem; border-radius: .6rem; pointer-events: none; }
.pin.box { transform: none; background: rgba(192, 57, 43, .15); color: #c0392b; border: 2px solid #c0392b; border-radius: 0; }
img.crop { max-width: 160px; max-height: 90px; border: 1px solid #ccd; }
/* 235 받은 파일함 — 폰 화면 맞춤(한 줄에 한 단계 · 큰 누름 자리) */
.inbox-form { display: grid; gap: .8rem; }
.inbox-step { display: grid; gap: .35rem; border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .7rem; margin: 0;
              min-width: 0; }
.inbox-step input[type=file], .inbox-step input:not([type=radio]) { width: 100%; font-size: 1rem; padding: .45rem; }
.inbox-kind { display: block; padding: .45rem .2rem; font-size: 1rem; }
.inbox-kind input { transform: scale(1.3); margin-right: .45rem; }
.inbox-go { width: 100%; font-size: 1.05rem; padding: .7rem; }
.inbox-last { padding-left: 1.1rem; }
.inbox-row { border-top: 1px solid var(--line); padding: .5rem 0; }
@media (max-width: 600px) { .inbox-tbl th:nth-child(3), .inbox-tbl td:nth-child(3) { display: none; }
  .top .nav, .top .who { flex-basis: 100%; min-width: 0; } .page { padding: 0 .5rem; } }