:root { --head:#eef2f7; --navy:#1b2a41; --sat:#2f6fd0; --sun:#c0392b; --weekend:#fafbfd; --eval:#fff6dd; --eval-line:#d39e00; --ref:#a86b16; --bg:#f5f6f8; --panel:#fff; --line:#dde1e6; --text:#1f2933; --muted:#6b7280; --accent:#1f5fbf; --ok:#2e8b57; --warn:#c98a00; --bad:#c0392b; --gray:#8a94a0; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font:14px/1.45 -apple-system,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif; color:var(--text); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
#app { display:flex; flex-direction:column; min-height:100vh; }
#topbar { height:48px; background:#1b2a41; color:#fff; display:flex; align-items:center; gap:16px; padding:0 16px; position:sticky; top:0; z-index:20; }
#topbar .brand { font-weight:700; letter-spacing:.02em; }
#topbar select { background:#2b3d57; color:#fff; border:1px solid #3d5273; border-radius:4px; padding:4px 8px; font-size:13px; }
#topbar .spacer { flex:1; }
#topbar button { background:transparent; color:#cfd8e3; border:1px solid #3d5273; }
#menubar { position:sticky; top:48px; z-index:19; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:stretch; padding:0 12px; overflow-x:auto; white-space:nowrap; }
#menubar .grp { display:flex; align-items:stretch; }
#menubar .grp + .grp { border-left:1px solid var(--line); margin-left:6px; padding-left:6px; }
#menubar .grp.end { margin-left:auto; }
#menubar a { display:flex; align-items:center; padding:11px 12px; color:var(--text); border-bottom:3px solid transparent; }
#menubar a:hover { text-decoration:none; background:#f5f8fd; }
#menubar a.active { color:var(--accent); font-weight:600; border-bottom-color:var(--accent); }
#menubar a.m-완료 { color:var(--muted); }
#menubar a.m-완료.active { color:var(--accent); }
#menubar a .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:6px; }
#menubar a .chk { color:var(--ok); font-size:11px; margin-left:5px; }
#menubar a.mine { margin:7px 4px; padding:0 14px; border:1.5px solid var(--accent); border-radius:16px; color:var(--accent); font-weight:700; background:#eef4fd; }
#menubar a.mine:hover { background:#e0ebfb; }
#menubar a.mine.active { background:var(--accent); color:#fff; border-color:var(--accent); }
#main { flex:1; padding:20px 24px 80px; min-width:0; }
h1 { font-size:20px; margin:0 0 12px; white-space:nowrap; } h2 { font-size:16px; margin:20px 0 8px; } h3 { font-size:14px; margin:14px 0 6px; }
.sub { color:var(--muted); font-size:13px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row.top { align-items:flex-start; }
.grid { display:grid; gap:12px; } .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.card h3 { margin:0 0 8px; font-size:13px; color:var(--muted); }
.big { font-size:22px; font-weight:700; }
table { border-collapse:collapse; width:100%; background:#fff; font-size:13px; }
th,td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { background:#f0f2f5; font-weight:600; white-space:nowrap; }
tr.clickable { cursor:pointer; } tr.clickable:hover td { background:#f7faff; }
tr.selected td { background:#e8f0fc; }
.lvl1 td:first-child { padding-left:8px; font-weight:700; } .lvl2 td:first-child { padding-left:20px; font-weight:600; } .lvl3 td:first-child { padding-left:34px; } .lvl4 td:first-child { padding-left:50px; }
button, .btn { font:inherit; font-size:13px; padding:6px 12px; border-radius:4px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--text); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { background:var(--bad); color:#fff; border-color:var(--bad); }
button.small { padding:2px 8px; font-size:12px; }
button:disabled { opacity:.5; cursor:default; }
input, select, textarea { font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:4px; background:#fff; }
textarea { width:100%; min-height:80px; }
label.f { display:block; margin:8px 0; } label.f span { display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:10px 0; }
.tabs button { border:none; border-bottom:2px solid transparent; border-radius:0; background:transparent; padding:8px 12px; }
.tabs button.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:600; }
.badge { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; background:#eef0f3; color:#374151; white-space:nowrap; }
.badge.ok { background:#dff3e6; color:var(--ok); } .badge.warn { background:#fff3d6; color:#8a5b00; } .badge.bad { background:#fde2df; color:var(--bad); } .badge.info { background:#e3edfb; color:var(--accent); } .badge.gray { background:#eceff2; color:var(--gray); }
.stages { display:flex; gap:6px; overflow:auto; }
.stage { flex:1; min-width:110px; border:1px solid var(--line); border-radius:6px; padding:8px; background:#fff; cursor:pointer; }
.stage.진행 { border-color:var(--accent); background:#f3f7fe; } .stage.완료 { border-color:var(--ok); background:#f1faf4; }
.stage .n { font-size:12px; color:var(--muted); } .stage .t { font-weight:600; }
pre { background:#f8f9fb; border:1px solid var(--line); border-radius:4px; padding:10px; overflow:auto; font-size:12px; white-space:pre-wrap; word-break:break-all; max-height:70vh; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.split-wide { display:grid; grid-template-columns:3fr 2fr; gap:16px; }
.md { white-space:pre-wrap; font-size:13px; }
.bar { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; } .bar > i { display:block; height:100%; background:var(--accent); }
.note { background:#fff9e6; border:1px solid #f1dc9c; border-radius:4px; padding:8px 10px; font-size:13px; }
.err { background:#fde2df; border:1px solid #f5b5ae; border-radius:4px; padding:8px 10px; font-size:13px; }
.hidden { display:none !important; }
.login-box { max-width:360px; margin:80px auto; }
#toasts { position:fixed; top:104px; right:16px; z-index:50; display:flex; flex-direction:column; gap:6px; }
.toast { background:#1f2933; color:#fff; padding:8px 12px; border-radius:4px; font-size:13px; max-width:420px; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.toast.bad { background:var(--bad); } .toast.ok { background:var(--ok); }
#modal-root .backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40; display:flex; align-items:center; justify-content:center; }
#modal-root .modal { background:#fff; border-radius:8px; padding:18px 20px; min-width:420px; max-width:900px; max-height:85vh; overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.kv { display:grid; grid-template-columns:160px 1fr; gap:4px 10px; font-size:13px; } .kv b { color:var(--muted); font-weight:500; }
.tree ul { list-style:none; margin:0; padding-left:16px; } .tree li { margin:2px 0; }
.imgs img { max-width:100%; border:1px solid var(--line); margin-bottom:8px; }
.diag { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .diag .d { border:1px solid var(--line); border-radius:4px; padding:6px; font-size:12px; } .diag img { width:100%; }
.copy { font-family:ui-monospace,Menlo,monospace; font-size:12px; background:#f8f9fb; border:1px solid var(--line); padding:4px 8px; border-radius:4px; word-break:break-all; }
.chk-group { margin:14px 0 4px; font-weight:600; }

#menubar #jobs-ind { margin-left:8px; color:var(--accent); font-weight:600; font-size:13px; }
#menubar #jobs-ind:not(.hidden) { animation:jobpulse 1.6s ease-in-out infinite; }
@keyframes jobpulse { 50% { opacity:.55; } }
.toast a { color:#fff; text-decoration:underline; margin-left:4px; }
.card.result h3 { font-size:14px; color:var(--text); margin:16px 0 6px; } .card.result > div > h3:first-child, .card.result > div > div:first-child > h3 { margin-top:0; }
h2[id] { scroll-margin-top:110px; }
.card.rival { border-color:#f1c4bd; background:#fffafa; } .card.rival h3 { color:var(--bad); }
.sched { display:flex; gap:10px; margin:6px 0 14px; flex-wrap:wrap; }
.sched .ev { flex:1; min-width:150px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
.sched .ev .nm { font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:8px; align-items:center; }
.sched .ev .dt { font-size:20px; font-weight:700; margin-top:4px; white-space:nowrap; } .sched .ev .dt .tm { font-size:15px; font-weight:600; color:var(--muted); }
.sched .ev .dt.rel { font-size:14px; font-weight:600; color:var(--muted); white-space:normal; }
.sched .ev .dd { white-space:nowrap; flex-shrink:0; font-size:12px; font-weight:700; padding:1px 8px; border-radius:10px; background:#eef0f3; color:#374151; }
.sched .ev.next { box-shadow:inset 4px 0 0 var(--accent); } .sched .ev.next .dd { background:#e3edfb; color:var(--accent); }
.sched .ev.key { border-color:#f1c4bd; background:#fff; box-shadow:inset 4px 0 0 var(--bad); } .sched .ev.key .nm { color:var(--bad); font-weight:700; } .sched .ev.key .dt { color:var(--bad); } .sched .ev.key .dd { background:var(--bad); color:#fff; }
.sched .ev.past { opacity:.5; }
table.writing { max-width:820px; font-size:14px; }
table.writing th { background:var(--head); color:var(--navy); text-align:center; } table.writing td { vertical-align:middle; }
table.writing .num { text-align:right; width:80px; font-variant-numeric:tabular-nums; } table.writing th.num { text-align:center; }
table.writing td.on { color:var(--accent); font-weight:700; }
table.writing .prog { width:220px; }
table.writing tfoot td { background:#f3f5f8; font-weight:700; } table.writing tfoot td.total { color:var(--accent); font-size:15px; }
.wbar { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; } .wbar > i { display:block; height:100%; background:var(--accent); }

/* 일정표 */
.nt-row { display:flex; gap:8px; flex-wrap:wrap; }
.nt-c { background:#fff; border:1px solid var(--line); border-radius:6px; padding:6px 12px; min-width:130px; } .nt-c.key { box-shadow:inset 3px 0 0 var(--bad); } .nt-c.key b { color:var(--bad); }
.sched-wrap { display:grid; grid-template-columns:300px 1fr; gap:14px; align-items:start; }
@media (max-width:1100px) { .sched-wrap { grid-template-columns:1fr; } }
.wbs { background:#fff; border:1px solid var(--line); border-radius:6px; font-size:12.5px; max-height:calc(100vh - 160px); overflow:auto; position:sticky; top:104px; }
.wbs-r { display:flex; gap:6px; padding:4px 10px; border-bottom:1px solid #f0f2f5; }
.wbs-r.editable { cursor:pointer; } .wbs-r.editable:hover { background:#f5f8fd; }
.wbs-r.grp { background:var(--head); color:var(--navy); font-weight:700; } .wbs-r.l2 .t { padding-left:8px; } .wbs-r.l3 .t { padding-left:16px; }
.wbs-r .t { flex:1; } .wbs-r .w { color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.wbs-r .t.imp { color:var(--bad); font-weight:600; } .wbs-r .t.ref { color:var(--ref); } .wbs-r.done .t { text-decoration:line-through; color:var(--gray); }
.cal { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-left:1px solid var(--line); border-top:1px solid var(--line); background:#fff; font-size:12px; }
.cal-h { background:var(--head); color:var(--navy); text-align:center; font-weight:600; padding:5px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-h.sat { color:var(--sat); } .cal-h.sun { color:var(--sun); }
.cal-d { min-height:92px; padding:4px 6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; } .cal-d.sat, .cal-d.sun { background:var(--weekend); }
.cal-d.editable { cursor:copy; } .cal-d .dn { text-align:right; font-weight:600; color:#374151; margin-bottom:2px; }
.cal-d.sat .dn { color:var(--sat); } .cal-d.sun .dn { color:var(--sun); }
.cal-d.today { background:#eef5ff; box-shadow:inset 0 0 0 2px var(--accent); }
.cal-d.present { background:var(--eval); box-shadow:inset 0 3px 0 var(--eval-line); } .cal-d.past { background:#fafafa; } .cal-d.past > :not(.dn) { opacity:.55; }
.cal-d .it, .cal-d .nt { text-align:right; line-height:1.35; margin:2px 0; word-break:keep-all; }
.cal-d .it.imp { color:var(--bad); font-weight:700; } .cal-d .it.ref { color:var(--ref); } .cal-d .it.done { text-decoration:line-through; color:var(--gray); }
.cal-d .nt { color:var(--navy); font-weight:700; } .cal-d .nt.key { color:var(--sun); }
.cal-d .it[title]:hover { background:#f0f4fa; cursor:pointer; }
.sched-form label.f { margin:4px 0; }
.cal.dnd .drag { cursor:grab; border-radius:3px; } .cal.dnd .drag:hover { background:#e8f0fc; outline:1px dashed var(--accent); }
.drag.dragging { opacity:.35; } .wbs-r.drag { cursor:grab; }
.cal-d.drop { background:#dbe9ff !important; box-shadow:inset 0 0 0 2px var(--accent); }
.cal-d.kick { box-shadow:inset 0 0 0 2px var(--ok); } .cal-d .kick-l { color:var(--ok); font-weight:700; float:left; }
tr.inactive td { color:var(--gray); }
/* 대시보드: 제안서 작성 현황 | 제안팀 */
.dash-pair { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:20px; margin-top:20px; align-items:start; }
@media (max-width:1150px) { .dash-pair { grid-template-columns:1fr; } }
.dash-pair .sec-h { margin-bottom:8px; min-height:30px; }
.dash-pair table.writing { max-width:none; }
table.team { font-size:13px; } table.team td { vertical-align:middle; }
table.team .num { text-align:right; width:56px; } table.team th { background:var(--head); color:var(--navy); }
table.team tfoot td { background:#f3f5f8; font-weight:600; color:var(--muted); }
table.team tr.unassigned td { background:#fafbfc; }
.ppl { display:flex; flex-wrap:wrap; gap:4px 6px; }
.pp { display:inline-flex; align-items:center; gap:4px; padding:1px 7px 1px 8px; border-radius:10px; background:#eef0f3; font-size:12.5px; }
.pp i { font-style:normal; font-size:10.5px; font-weight:700; color:var(--muted); }
.pp.r0 { background:#e3edfb; } .pp.r0 i { color:var(--accent); }
.pp.r1 { background:#e2f4f1; } .pp.r1 i { color:#16796f; }
/* 제안서 작성 · 목차 */
table.toc tr.ch-row td { background:var(--head); color:var(--navy); cursor:pointer; padding:8px; }
table.toc tr.ch-row:hover td { background:#e3e9f1; }
table.toc tr.clickable:hover td, table.toc tr.selected td { background:#eaf1fb; }   /* 고른 행 = 마우스 올린 행 색 */
table.toc .tw { display:inline-block; width:16px; color:var(--muted); }
table.toc tr.lvl2 td:first-child { padding-left:24px; font-weight:600; } table.toc tr.lvl3 td:first-child { padding-left:40px; } table.toc tr.lvl4 td:first-child { padding-left:56px; } table.toc tr.lvl5 td:first-child { padding-left:72px; }
table.toc button.add { padding:0 7px; line-height:18px; font-weight:700; color:var(--accent); }
details summary { cursor:pointer; }
table.toc td.acts { white-space:nowrap; } table.toc td.acts button { margin-left:2px; padding:0 6px; line-height:18px; }
table.toc button.mv { color:var(--navy); } table.toc button.del { color:var(--bad); }
select.st-sel { font-size:12px; padding:1px 4px; border-radius:10px; border-color:var(--line); background:#eef0f3; }
select.st-sel.st1 { background:#e3edfb; } select.st-sel.st2 { background:#dff3e6; } select.st-sel.st3, select.st-sel.st4 { background:#fff3d6; } select.st-sel.st5 { background:#d4efdd; font-weight:600; }
table.toc .no { display:inline-block; margin-right:10px; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
table.toc tr.lvl2 .no { color:var(--navy); }
input.cell-in { font-size:12.5px; padding:2px 6px; border:1px solid transparent; background:transparent; border-radius:4px; }
input.cell-in:hover { border-color:var(--line); background:#fff; } input.cell-in:focus { border-color:var(--accent); background:#fff; outline:none; }
input.cell-in.author { width:96px; } input.cell-in.count { width:52px; text-align:right; }
table.toc .tcell { display:flex; align-items:center; gap:14px; } table.toc .tcell .tt { flex:1; }
table.toc .grip { margin-left:auto; padding:0 4px; color:#b0b7c3; cursor:grab; user-select:none; font-size:15px; line-height:1; border-radius:3px; } table.toc .grip:hover { background:var(--head); color:var(--accent); }
table.toc tr:hover .grip { color:var(--muted); }
table.toc tr.dragging td { opacity:.4; }
table.toc tr.drop-top td { box-shadow:inset 0 3px 0 var(--accent); }
table.toc tr.drop-bot td { box-shadow:inset 0 -3px 0 var(--accent); }
table.toc tr.drop-mid td { background:#e3edfb !important; }
/* 마크다운 뷰어 */
.mdv { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 24px; line-height:1.65; max-width:1100px; font-size:14px; }
.mdv h2 { font-size:19px; margin:4px 0 12px; color:var(--navy); } .mdv h3 { font-size:16px; margin:22px 0 8px; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:4px; } .mdv h4 { font-size:14.5px; margin:16px 0 6px; }
.mdv p { margin:6px 0; } .mdv ul, .mdv ol { margin:6px 0 6px 2px; padding-left:22px; } .mdv li { margin:2px 0; }
.mdv table { width:auto; min-width:60%; margin:8px 0 12px; } .mdv th { background:var(--head); color:var(--navy); }
.mdv table.mdkv { width:100%; margin:0 0 12px; table-layout:fixed; } .mdv table.mdkv th { width:220px; text-align:left; white-space:nowrap; vertical-align:top; }
.mdv blockquote { margin:8px 0; padding:6px 12px; background:#f7f9fc; border-left:3px solid #c9d3e0; color:#4b5563; } .mdv blockquote p { margin:2px 0; }
.mdv code { background:#f1f3f6; padding:0 4px; border-radius:3px; font-size:12.5px; } .mdv pre { white-space:pre-wrap; } .mdv hr { border:none; border-top:1px solid var(--line); margin:14px 0; }
/* 목차 표: 목차 칸은 제목 길이 + 30px, 머리글·나머지 칸 가운데 정렬 */
table.toc th { text-align:center; }
table.toc td:not(:first-child) { text-align:center; }
table.toc th:first-child, table.toc td:first-child { width:1%; white-space:nowrap; padding-right:30px; }
table.toc tr.ch-row td:first-child { width:auto; }
table.toc td.reqs { white-space:normal; max-width:160px; } table.toc a.req { white-space:nowrap; }
.reqlist { margin-top:14px; } .reqlist details { border:1px solid var(--line); border-radius:6px; margin:6px 0; background:#fff; }
.reqlist summary { padding:6px 10px; } .reqlist details[open] summary { border-bottom:1px solid var(--line); background:var(--head); }
.reqlist details > div { padding:8px 10px; } .reqlist .mdv { border:none; padding:4px 2px; font-size:13px; }
/* 목차 머리글 총계 · 되돌리기/다시 수행 */
table.toc { background:transparent; } :where(table.toc) td { background:#fff; }   /* 선택·호버 행 색이 이긴다 */
table.toc tr.tot-row th { background:transparent; border:none; padding:0 4px 4px; }
table.toc th .tot { font-size:15px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; }
table.toc th .tot-pages { color:#c0392b; } table.toc th .tot-prog { color:var(--accent); }
button.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; padding:0; color:var(--navy); }
button.icon-btn:hover:not(:disabled) { color:var(--accent); background:#eef5ff; border-color:var(--accent); }
button.icon-btn:disabled { color:#b0b7c3; }
/* 제안 목록: 카드·목록 바꾸기 */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.seg button { border:none; border-radius:0; background:#fff; padding:5px 12px; color:var(--muted); } .seg button + button { border-left:1px solid var(--line); }
.seg button.on { background:var(--navy); color:#fff; }
.pcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; }
.pcard { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px 12px; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:box-shadow .15s, border-color .15s; }
.pcard:hover { border-color:#b9c6d8; box-shadow:0 4px 14px rgba(27,42,65,.08); }
.pcard.over { opacity:.7; }
.pc-top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .pc-client { color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-name { font-size:16px; font-weight:700; color:var(--navy); text-decoration:none; line-height:1.35; } .pc-name:hover { color:var(--accent); }
.pc-slug { color:var(--gray); font-size:12px; margin-top:-4px; }
.pcard dl { display:grid; grid-template-columns:72px 1fr; gap:3px 8px; margin:4px 0 2px; font-size:13px; } .pcard dt { color:var(--muted); } .pcard dd { margin:0; }
.pc-prog { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); } .pc-prog .bar { flex:1; }
.pc-foot { display:flex; justify-content:flex-end; border-top:1px solid var(--line); padding-top:8px; margin-top:2px; }