/* 원고 협업실: 본문 한 단(문서처럼). 목차·댓글·할 일·검토는 오른쪽 서랍. 상단 얇은 줄 하나 */
:root{
  --paper:#fbfcfb; --sheet:#ffffff; --ink:#17231f; --muted:#5b6a64; --line:#d7e0dc;
  --accent:#1f5d4c; --soft:#eef4f1; --todo-bg:#fdf0cf; --todo-ink:#7a4b00; --bad:#b42318; --bad-bg:#fde8e6;
  --early:#2f6fb0; --leap:#2f8a5b; --common:#b5c1bc; --pend:#c77d00;
  --display:"Noto Serif KR","Batang",serif; --body:"IBM Plex Sans KR","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#111816; --sheet:#151e1b; --ink:#e3ebe7; --muted:#9aaba4; --line:#2c3a35;
  --accent:#7cc8b0; --soft:#18241f; --todo-bg:#3a2d10; --todo-ink:#f2c86b; --bad:#ff8a7a; --bad-bg:#3a1a16;
  --early:#7fb2e6; --leap:#79c99c; --common:#3a4a44; --pend:#f2b14b; color-scheme:dark;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15.5px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:160px}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
button:focus-visible,[contenteditable]:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:13px}
.btn{border:1px solid var(--accent);border-radius:6px;padding:5px 12px;font-size:13.5px;cursor:pointer;background:var(--sheet);color:var(--accent);font-weight:600}
.btn.pri{background:var(--accent);color:var(--paper)}
.btn.sm{padding:2px 9px;font-size:12.5px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.login{min-height:100vh;display:grid;place-items:center}
.login-card{width:min(360px,100%);display:flex;flex-direction:column;gap:6px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:24px}
.login-card h1{font-family:var(--display);font-size:22px;margin:0}
.login-card input{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--paper)}
.err{color:var(--bad);min-height:1.2em;margin:4px 0;font-size:13.5px}

.top{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line);
  max-width:780px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px}
.brand{font-family:var(--display);font-size:18px;font-weight:700}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--sheet);padding:5px 12px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--paper)}
.save{font-size:12.5px;color:var(--muted)} .save.on{color:var(--accent)} .save.bad{color:var(--bad)}
.sp{flex:1}
.ico{border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:4px 10px;font-size:13.5px;cursor:pointer}
.ico b{color:var(--todo-ink);background:var(--todo-bg);border-radius:10px;padding:0 6px;margin-left:3px;font-weight:600;font-size:12px}
.ico.rev b{color:var(--paper);background:var(--pend)}

.doc{max-width:780px;margin:0 auto;padding-top:18px}
.doc h1{font-family:var(--display);font-size:23px;line-height:1.4;margin:40px 0 6px;padding-top:12px;border-top:2px solid var(--ink);text-wrap:balance}
.doc h2{font-size:18px;color:var(--accent);margin:30px 0 4px;text-wrap:balance}
.doc h3{font-size:16px;margin:20px 0 4px}
.doc h1,.doc h2,.doc h3{scroll-margin-top:calc(70px + env(safe-area-inset-top,0px))}
.cbadge{font-size:12px;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:0 7px;margin-left:8px;cursor:pointer;background:var(--sheet);vertical-align:middle}

.howto{margin:2px 0 6px;font-size:14px}
.howto>summary{list-style:none;cursor:pointer;display:inline-flex;gap:6px;align-items:baseline;padding:2px 8px 2px 4px;border-radius:5px;color:var(--muted);font-weight:600;font-size:13px}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary::before{content:"▸";display:inline-block;width:1em;transition:transform .15s}
.howto[open]>summary::before{transform:rotate(90deg)}
.howto>summary:hover{background:var(--soft)}
.howto-body{margin:2px 0 8px 1.2em;padding:4px 0 4px 12px;border-left:2px solid var(--line);color:var(--muted)}
.howto-body .ln{margin:1px 0}

/* 줄: 왼쪽 가는 띠로 공통/초기/도약 구분 */
.ln{display:flex;gap:6px;position:relative;padding:1px 6px 1px 12px;margin-left:-15px;border-left:3px solid transparent;border-radius:2px}
.ln.sc-c{border-left-color:var(--common)} .ln.sc-e{border-left-color:var(--early)} .ln.sc-l{border-left-color:var(--leap)}
.ln.pend{background:color-mix(in srgb,var(--pend) 10%,transparent)}
.ln.pend::after{content:"검토 대기";position:absolute;right:4px;top:2px;font-size:10.5px;color:var(--pend);font-weight:600}
.ln .mk{flex:none;min-width:1em}
.ln .tx{flex:1;min-width:0}
.k-lv0{font-weight:600;font-size:16.5px;margin-top:18px}
.k-lv1{margin-top:8px} .k-lv1 .mk{color:var(--accent)}
.k-lv2,.k-num{padding-left:calc(1.4em + 12px);font-size:15px}
.k-src{padding-left:calc(1.4em + 12px);font-size:13px;color:var(--muted)}
.k-p{margin-top:4px}
[contenteditable="true"]{border-radius:3px;cursor:text;outline:none}
[contenteditable="true"]:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
[contenteditable="true"]:focus{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.num{font-variant-numeric:tabular-nums;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-weight:600;cursor:help;white-space:nowrap}
.todo{background:var(--todo-bg);color:var(--todo-ink);padding:1px 6px;border-radius:4px;font-size:13px;white-space:normal}
.todo .xx{border:0;background:none;color:var(--todo-ink);cursor:pointer;padding:0 0 0 4px;font-size:12px}
.alt{text-decoration:underline dotted color-mix(in srgb,var(--accent) 50%,transparent);text-underline-offset:3px}

.tw{overflow-x:auto;margin:8px 0 2px -15px;padding-left:12px;border-left:3px solid transparent}
.tw.sc-c{border-left-color:var(--common)} .tw.sc-e{border-left-color:var(--early)} .tw.sc-l{border-left-color:var(--leap)}
table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;min-width:480px;font-size:14px}
th,td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
thead th{background:var(--soft);font-weight:600}
tr.pend td{background:color-mix(in srgb,var(--pend) 10%,transparent)}
td[contenteditable="true"]:focus{box-shadow:inset 0 0 0 2px var(--accent);background:var(--sheet)}
.addrow{border:1px dashed var(--line);background:none;border-radius:6px;font-size:12.5px;padding:1px 10px;cursor:pointer;color:var(--muted);margin:2px 0 6px}

.fig{margin:10px 0;padding:10px;border:1px dashed var(--line);border-radius:8px;text-align:center;color:var(--muted);font-size:13.5px}
.fig img{max-width:100%;height:auto;display:block;margin:0 auto 6px;border-radius:4px}
.fig.slot{background:var(--soft)}

/* 예산 */
.bt td input{width:100%;border:0;background:none;padding:2px 0;font:inherit}
.bt td input:focus{outline:2px solid var(--accent);background:var(--sheet)}
.bt td.r,.bt th.r{text-align:right} .bt td.r input{text-align:right}
.bt tr.sum td{font-weight:600;background:var(--soft)}
.bt td.bad{color:var(--bad);background:var(--bad-bg)}
.checks{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-size:14px}
.chkr{display:flex;gap:8px} .chkr .s{font-weight:600;min-width:2.6em}
.chkr.ok .s{color:var(--accent)} .chkr.ng .s{color:var(--bad)}
.del{border:0;background:none;color:var(--muted);cursor:pointer}

/* 떠 있는 목차 */
.fnav{position:fixed;z-index:20;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:8px}
.fnav-now,.fnav-btns{background:color-mix(in srgb,var(--paper) 74%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 2px 12px rgba(0,0,0,.12);border-radius:10px}
.fnav-now{text-align:left;cursor:pointer;padding:7px 12px;max-width:min(360px,calc(100vw - 100px));display:flex;flex-direction:column}
.fnav-now #fPath{font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnav-now #fNext{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnav-btns{display:flex;flex-direction:column;overflow:hidden}
.fnav-btns button{border:0;background:none;padding:8px 0;width:42px;cursor:pointer;font-weight:600}
.fnav-btns button+button{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}

/* 서랍 */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:var(--sheet);border-left:1px solid var(--line);z-index:30;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) 16px;overflow-y:auto;box-shadow:-6px 0 20px rgba(0,0,0,.08)}
.drawer.wide{width:min(560px,100vw)}
.drawer h2{font-size:16px;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.drawer h3{font-size:12.5px;color:var(--muted);margin:16px 0 6px;letter-spacing:.04em}
.x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:13px}
.dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;font-size:14px}
.dl button,.dl a{width:100%;text-align:left;border:0;background:none;padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;color:var(--ink);text-decoration:none}
.dl button:hover,.dl a:hover{background:var(--soft)}
.dl .sec{padding-left:22px;color:var(--muted)}
.dl [aria-current]{color:var(--accent);background:var(--soft)}
.dl .n{font-size:11.5px;color:var(--todo-ink)}
.cmt-form textarea{width:100%;min-height:72px;border:1px solid var(--line);border-radius:6px;padding:8px;background:var(--paper);font-size:14px}
.cmt-form input[type=password]{width:100%;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--paper);margin-bottom:6px}
.cmt-form input[type=file]{flex:1;min-width:0;font-size:12.5px}
.chk{display:flex;gap:6px;align-items:center;font-size:13px;margin:10px 0}
.cm{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:14px;margin:0 0 8px;white-space:pre-wrap}
.cm .h{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);white-space:normal}
.cm .on{font-size:12px;color:var(--accent);white-space:normal}
.cm.done{opacity:.55}
.cm .a{display:flex;gap:10px;margin-top:4px;white-space:normal}
.cm .a button,.cm .a a{border:0;background:none;color:var(--accent);font-size:12.5px;cursor:pointer;padding:0}
.rv{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px;font-size:14px}
.rv .h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:12px;color:var(--muted)}
.rv .where{font-size:12.5px;color:var(--accent);margin:2px 0 4px}
.rv .diff{background:var(--paper);border-radius:6px;padding:6px 8px;font-size:13.5px;white-space:pre-wrap}
.rv del{color:var(--bad);background:var(--bad-bg);text-decoration:line-through}
.rv ins{color:var(--accent);background:var(--soft);text-decoration:none;font-weight:600}
.rv .a{display:flex;gap:8px;margin-top:8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;font-size:13.5px;max-width:min(520px,calc(100vw - 32px))}

@media (max-width:600px){
  body{font-size:15px}.brand{font-size:16px}.save{order:9;flex-basis:100%}
  .top{gap:6px}.ico{padding:4px 8px}
  .k-lv2,.k-num,.k-src{padding-left:calc(1em + 12px)}
  .doc h1{font-size:20px}.doc h2{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.flash{background:var(--todo-bg)!important;transition:background .3s}
/* 양식 표: 제목 행 가운데, 항목 칸 음영 */
thead th{text-align:center}
td.lbl{background:var(--soft);font-weight:600;color:var(--ink);white-space:normal;min-width:6.5em}
table.kv td.lbl{width:9.5em}
/* 그림: 글 몇 줄 뒤 한 장. 설명은 아래에서 바로 고침 */
figure.fig{margin:12px 0 6px;padding:0;border:0;text-align:center}
figure.fig img{max-width:100%;height:auto;display:block;margin:0 auto;border:1px solid var(--line);border-radius:4px}
figure.fig .cap{display:inline-block;margin-top:4px;font-size:13.5px;color:var(--muted);min-width:8em}
figure.fig .fig-act{display:inline-flex;flex-wrap:wrap;justify-content:center;margin:6px auto 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--sheet)}
figure.fig .tool{border:0;background:none;padding:4px 11px;font-size:12.5px;cursor:pointer;color:var(--ink)}
figure.fig .tool+.tool{border-left:1px solid var(--line)}
figure.fig .tool:hover,figure.fig .tool:focus-visible{background:var(--soft);color:var(--accent)}
figure.fig .tool.danger{color:var(--bad)}
figure.fig .cap{display:block;margin:6px auto 0}
figure.fig.slot{padding:14px;border:1px dashed var(--line);border-radius:8px;background:var(--soft)}
figure.fig.slot .slot-t{font-size:13.5px;color:var(--muted);margin-bottom:6px}
figure.fig.pend img{outline:2px solid var(--pend);outline-offset:2px}
.addfig{display:block;margin:2px 0 4px auto;border:1px dashed var(--line);background:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:2px 10px;border-radius:6px;opacity:.7}
.addfig:hover,.addfig:focus-visible{opacity:1;background:var(--soft);color:var(--accent)}
@media (hover:none){.addfig{opacity:.8}}

.save-btn{border-color:var(--accent);color:var(--accent);font-weight:600}
.me-name{font-size:14px;margin:0 0 6px}

/* 적용 범위 버튼: 넓은 화면은 왼쪽 여백, 좁은 화면은 줄 끝 */
.tw{position:relative}
.scope-chip{position:absolute;right:calc(100% + 10px);top:2px;white-space:nowrap;border:1px solid var(--line);background:var(--sheet);border-radius:10px;padding:0 7px;font-size:11px;line-height:18px;cursor:pointer;color:var(--muted);opacity:.75}
.scope-chip.sc-e{color:var(--early);border-color:color-mix(in srgb,var(--early) 40%,var(--line))}
.scope-chip.sc-l{color:var(--leap);border-color:color-mix(in srgb,var(--leap) 40%,var(--line))}
.scope-chip:hover,.scope-chip:focus-visible{opacity:1}
.scope-menu{position:absolute;z-index:50;background:var(--sheet);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;min-width:190px}
.scope-menu .small{padding:2px 8px 4px}
.scope-menu button{border:0;background:none;text-align:left;padding:6px 8px;border-radius:5px;cursor:pointer;font-size:14px}
.scope-menu button:hover,.scope-menu button:focus-visible{background:var(--soft)}
@media (max-width:900px){
  .scope-chip{position:static;align-self:flex-start;margin-left:4px;flex:none}
  .tw>.scope-chip{display:inline-block;margin:0 0 4px}
}

.fig-meta{display:flex;gap:12px;justify-content:center;margin-top:4px}
.linkbtn{border:0;background:none;color:var(--accent);font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.fv{border:1px solid var(--line);border-radius:8px;padding:8px;margin:10px 0}
.fv.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fv img{max-width:100%;display:block;border-radius:4px;margin-bottom:4px}

.fig-open{display:block;margin:0 auto;padding:0;border:0;background:none;cursor:zoom-in;max-width:100%}
.lb{position:fixed;inset:0;z-index:60;background:rgba(10,14,12,.92);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.lb-bar{display:flex;gap:10px;align-items:center;color:#e3ebe7;padding:10px 16px;font-size:13.5px}
.lb-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-btn{border:1px solid rgba(255,255,255,.35);background:none;color:#fff;border-radius:6px;padding:4px 12px;font-size:13px;cursor:pointer;text-decoration:none}
.lb-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:8px 16px 16px}
.lb-body img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;background:#fff;border-radius:4px}
.lb.zoom .lb-body{align-items:flex-start;justify-content:flex-start}
.lb.zoom .lb-body img{max-width:none;max-height:none;cursor:zoom-out}
.save-btn.has{background:var(--accent);color:var(--paper)}
td.num-c{text-align:center;font-variant-numeric:tabular-nums} td.num-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rowtools{display:flex;gap:6px;margin:2px 0 6px}.rowtools .addrow{margin:0}.addrow:disabled{opacity:.4;cursor:default}
/* 절·□ 묶음 구분: 절은 흰 판, □는 옅은 초록 판 */
:root{--sec-bg:#ffffff;--blk-bg:#f3f7f5;--blk-line:#dfe8e4}
@media (prefers-color-scheme: dark){:root{--sec-bg:#151e1b;--blk-bg:#1b2622;--blk-line:#2c3a35}}
body{background:#eef2f0}
@media (prefers-color-scheme: dark){body{background:#0d1311}}
.sec-box{background:var(--sec-bg);border:1px solid var(--line);border-radius:10px;padding:4px 18px 12px 22px;margin:14px 0 18px}
.sec-box>h2{margin-top:14px}
.blk-box{background:var(--blk-bg);border:1px solid var(--blk-line);border-radius:8px;padding:2px 12px 8px 18px;margin:10px 0}
.blk-box>.k-lv0:first-child{margin-top:8px}
.blk-box .tw table{background:var(--sec-bg)}
.top{background:#eef2f0}
@media (prefers-color-scheme: dark){.top{background:#0d1311}}
@media (max-width:600px){
  .sec-box{padding:2px 10px 10px 14px;margin:10px -6px 14px;border-radius:8px}
  .blk-box{padding:2px 8px 6px 12px;margin:8px -4px}
}
/* 휴대폰 상단: 1줄 = 사업 선택 + 저장 상태, 2줄 = 도구 버튼(모두 보이게) */
.top .sm{display:none}
@media (max-width:600px){
  .top{flex-wrap:wrap;overflow:visible;gap:5px;padding-bottom:6px;row-gap:6px}
  .top>*{flex:none}
  .top .brand{display:none}
  .top .sp{display:block;flex:0 0 100%;height:0}
  .top .save{order:0;flex:1 1 0;min-width:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .seg button{padding:5px 9px;font-size:12.5px}
  .top .ico{padding:4px 7px;font-size:12.5px}
  .top .ico b{padding:0 4px;font-size:11px;margin-left:2px}
  .top .lg{display:none}.top .sm{display:inline}
}
/* 휴대폰 표: 항목|내용 표는 위아래로 쌓고, 넓은 표는 옆으로 밀기 + 그림자 + 크게 보기 */
.tw{background:linear-gradient(to right,var(--sec-bg) 30%,transparent),linear-gradient(to left,var(--sec-bg) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.18),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.18),transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.tw-zoom{display:none;border:1px solid var(--line);background:var(--sec-bg);border-radius:6px;font-size:12px;padding:2px 9px;margin:0 0 4px;cursor:pointer;color:var(--accent)}
.lb-table{background:var(--sec-bg);align-items:flex-start;justify-content:flex-start}
.lb-table table{min-width:640px;font-size:14px}
@media (max-width:700px){
  .tw-zoom{display:inline-block}
  table{min-width:0}
  table:not(.kv){min-width:520px}
  table.kv,table.kv tbody,table.kv tr,table.kv td{display:block;width:100%!important}
  table.kv{border:1px solid var(--line);border-radius:6px;overflow:hidden}
  table.kv tr{border-bottom:1px solid var(--line)}
  table.kv td{border:0;padding:4px 10px}
  table.kv td.lbl{background:var(--soft);font-size:12.5px;padding:3px 10px;width:100%!important}
  table.kv thead{display:none}
  table.kv thead + tbody tr:first-child{border-top:0}
}