/* 지역사회보장계획 작성지원 플랫폼 — 화면 서식
   외부 글꼴·CDN을 쓰지 않는다(내부망 대응). 시스템 한글 글꼴만 쓴다. */

:root{
  --ink:#16202B; --ink-2:#41505F; --ink-3:#6B7B8C; --ink-4:#95A3B1;
  --paper:#FFFFFF; --sheet:#F4F6F9; --sheet-2:#E9EEF3;
  --navy:#00457C; --navy-2:#1A5E96; --navy-soft:#E8F0F7;
  --red:#C8102E; --red-soft:#FBECEE;
  --green:#16694A; --green-soft:#E7F2EC;
  --amber:#8A5A00; --amber-soft:#FAF0DC;
  --rule:#C7D0D9; --rule-2:#DFE5EB;
  --sans:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --mono:"D2Coding","Consolas","SFMono-Regular",ui-monospace,monospace;
  --shadow:0 1px 2px rgba(22,32,43,.06),0 4px 14px rgba(22,32,43,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--sheet); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ── 상단 ── */
.top{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.top-in{max-width:1440px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;height:54px}
.brand{display:flex;align-items:baseline;gap:9px;flex:none}
.brand b{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.tabs{display:flex;gap:2px;margin-left:6px}
.tab{background:none;border:none;padding:8px 15px;cursor:pointer;font-size:13.5px;font-weight:500;
  color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:3px 3px 0 0}
.tab:hover{color:var(--ink);background:var(--sheet)}
.tab.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.top-r{margin-left:auto;display:flex;align-items:center;gap:9px}

/* ── API 키 설정 띠 ── */
/* 상태에 따라 세 덩어리 중 하나만 보인다. need·busy·fail은 입력 양식, ok는 한 줄 요약, off는 안내 줄 */
.setup{background:var(--navy-soft);border-bottom:1px solid var(--rule)}
.setup-in{max-width:1440px;margin:0 auto;padding:12px 20px}
.setup .s-form,.setup .s-ok,.setup .s-off{display:none}
.setup[data-state="need"] .s-form,
.setup[data-state="busy"] .s-form,
.setup[data-state="fail"] .s-form{display:block}
.setup[data-state="ok"] .s-ok{display:flex}
.setup[data-state="off"] .s-off{display:flex}
.setup[data-state="ok"],.setup[data-state="off"]{background:var(--paper)}
.setup[data-state="fail"]{background:var(--red-soft)}

.s-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.s-hd b{font-size:14px}
.s-hd span{font-size:12.2px;color:var(--ink-2)}
.s-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.s-row #k-in{flex:1 1 340px;max-width:520px;font-family:var(--mono);font-size:12.5px}
.s-sub{margin-top:8px;font-size:12px;color:var(--ink-3)}
.s-sub .radio{margin-top:0}
.s-link{margin-left:auto;color:var(--navy);font-size:12px}
.setup .status{margin-top:8px}
.setup .tip{max-width:1000px}
/* 실패했을 때만 내미는 단추들 */
.setup:not([data-state="fail"]) #k-force,
.setup:not([data-state="fail"]) #k-auto{display:none}

/* 실패 사유별 조치 안내 — 어디를 손봐야 하는지 한 줄 */
.s-fix{margin:6px 0 0;font-size:12.3px;line-height:1.6;color:var(--ink-2)}
.s-fix a{color:var(--navy);font-weight:600}

.s-ok,.s-off{align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.s-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.s-off .s-dot{background:var(--ink-4)}
.s-why{color:var(--ink-3);font-size:12px}
.s-ml{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-2)}
.s-ok #k-model{width:auto;min-width:200px;font-size:12.3px;padding:4px 8px}

/* ── 판 ── */
.page{max-width:1440px;margin:0 auto;padding:18px 20px 60px}
.panel{display:none}
.panel.on{display:block}
.grid2{display:grid;grid-template-columns:322px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1080px){.grid2{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--rule-2);border-radius:4px;box-shadow:var(--shadow)}
.card > h2{margin:0;padding:12px 16px;font-size:13px;font-weight:600;letter-spacing:.01em;
  border-bottom:1px solid var(--rule-2);color:var(--ink-2);background:var(--sheet);
  border-radius:4px 4px 0 0;display:flex;align-items:center;gap:8px}
.card > h2 .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:400}
.card .bd{padding:15px 16px}
.card .bd.tight{padding:0}
.card + .card{margin-top:14px}

/* ── 절 트리 ── */
.tree{max-height:calc(100vh - 190px);overflow:auto}
.tnode{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:6px 14px 6px 0;border-bottom:1px solid var(--rule-2);font-size:13px;line-height:1.5}
.tnode:hover{background:var(--sheet)}
.tnode.on{background:var(--navy-soft);color:var(--navy);font-weight:600}
.tnode .no{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-right:6px}
.tnode.on .no{color:var(--navy-2)}
.tnode[data-d="0"]{font-weight:700;font-size:13.5px;background:var(--sheet-2);padding-left:14px}
.tnode[data-d="1"]{padding-left:24px;font-weight:600}
.tnode[data-d="2"]{padding-left:40px}
.tnode[data-d="3"]{padding-left:56px;color:var(--ink-2);font-size:12.5px}
.tnode .badge{float:right;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
  border:1px solid var(--rule);padding:0 4px;border-radius:2px;margin-left:5px;line-height:1.6}
.tnode.on .badge{border-color:var(--navy-2);color:var(--navy-2)}

/* ── 입력 ── */
label.fl{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 5px;letter-spacing:.01em}
.fl .hint{font-weight:400;color:var(--ink-3);margin-left:6px}
input[type=text],input[type=password],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);
  outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
textarea{resize:vertical;line-height:1.65}
textarea.code{font-family:var(--mono);font-size:12.5px;line-height:1.7}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row > *{flex:1 1 150px;min-width:0}
.row > .fx{flex:none}
.fld{margin-bottom:13px}

button.btn{border:1px solid var(--navy);background:var(--navy);color:#fff;padding:8px 16px;
  border-radius:3px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap}
button.btn:hover{background:var(--navy-2)}
button.btn:disabled{background:var(--ink-4);border-color:var(--ink-4);cursor:not-allowed}
button.btn.ghost{background:var(--paper);color:var(--navy)}
button.btn.ghost:hover{background:var(--navy-soft)}
button.btn.ghost:disabled{color:var(--ink-4);border-color:var(--rule);background:var(--paper)}
button.btn.sm{padding:5px 11px;font-size:12px;font-weight:500}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btnrow .sp{margin-left:auto}

/* ── 지시문·양식 미리보기 ── */
.howto{background:var(--sheet);border:1px solid var(--rule-2);border-left:3px solid var(--navy);
  padding:12px 14px;font-size:12.8px;line-height:1.7;max-height:230px;overflow:auto;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word}
.howto h4{margin:0 0 4px;font-size:12px;color:var(--navy);font-weight:700}
.howto h4:not(:first-child){margin-top:10px}
.formprev{overflow-x:auto;margin-top:10px}
.formprev table{border-collapse:collapse;font-size:11.5px;min-width:100%}
.formprev th,.formprev td{border:1px solid var(--rule);padding:4px 7px;text-align:left;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.formprev th{background:var(--sheet-2);font-weight:600;color:var(--ink-2)}
.formcap{font-family:var(--mono);font-size:11px;color:var(--navy);margin:12px 0 3px;font-weight:500}

/* ── 첨부 ── */
.drop{border:1.5px dashed var(--rule);border-radius:4px;padding:16px;text-align:center;
  color:var(--ink-3);font-size:12.5px;cursor:pointer;background:var(--sheet)}
.drop:hover,.drop.over{border-color:var(--navy);color:var(--navy);background:var(--navy-soft)}
.files{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.files li{display:flex;align-items:center;gap:9px;font-size:12.3px;padding:6px 9px;
  background:var(--sheet);border:1px solid var(--rule-2);border-radius:3px}
.files .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .md{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:2px;flex:none}
.files .md.text{background:var(--green-soft);color:var(--green)}
.files .md.inline{background:var(--amber-soft);color:var(--amber)}
.files .sz{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);flex:none}
.files .rm{border:none;background:none;color:var(--ink-3);cursor:pointer;padding:0 3px;flex:none}
.files .rm:hover{color:var(--red)}

/* ── 작업 폴더 ── */
.ck{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;margin:10px 0 0;cursor:pointer;line-height:1.5}
/* ── 판 번호와 옛 판 경고 ── */
.build{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-left:8px;letter-spacing:.02em}
.stalebar{background:#8c2f22;color:#fff}
.stale-in{max-width:1400px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;font-size:12.5px;line-height:1.5}
.stale-in b{font-weight:700}
.stale-in .sp{margin-left:auto}
.stale-in .vv{font-family:var(--mono);font-size:11px;opacity:.85}
.stale-in .btn{background:#fff;border-color:#fff;color:#8c2f22;flex:none}
.stale-in .btn:hover{background:#ffe9e5;border-color:#ffe9e5}

.ck input{margin-top:3px;flex:none}
/* 글은 한 덩이로 묶어 둔다. 맨 글자와 <span class=hint>가 따로 칸을 차지하면
   좁은 칸에서 두 줄이 나란히 갈라져 읽을 수 없게 된다 */
.ck > span{flex:1 1 auto;min-width:0}
.ck .hint{color:var(--ink-3);margin-left:6px}
/* 기간처럼 칸 둘을 한 줄에 두는 자리. select 는 width:100% 라 그냥 두면 줄이 넘어간다 */
.span2{display:flex;gap:8px;align-items:center}
.span2 select{flex:1 1 0;min-width:0}
.span2 .tilde{flex:none;color:var(--ink-3);font-size:12.5px}
#ws-files{max-height:210px;overflow:auto}
#ws-files li{gap:7px}
#ws-files .btn{margin-left:auto;flex:none}

/* ── 검사 결과 ── */
.issues{list-style:none;margin:0;padding:0;font-size:12.5px}
.issues li{padding:7px 12px;border-bottom:1px solid var(--rule-2);display:flex;gap:9px;
  align-items:flex-start;line-height:1.55}
.issues li:last-child{border-bottom:none}
.issues .lv{font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:2px;flex:none;
  margin-top:2px;font-weight:500}
.lv.err{background:var(--red-soft);color:var(--red)}
.lv.warn{background:var(--amber-soft);color:var(--amber)}
.lv.ok{background:var(--green-soft);color:var(--green)}
.lv.info{background:var(--sheet-2);color:var(--ink-3)}
.empty{padding:22px 16px;text-align:center;color:var(--ink-3);font-size:12.5px}

/* ── 상태줄 ── */
.status{font-size:12.3px;color:var(--ink-3);min-height:19px;margin-top:9px;display:flex;
  align-items:center;gap:7px}
.status.err{color:var(--red)}
.status.ok{color:var(--green)}
.spin{width:11px;height:11px;border:2px solid var(--rule);border-top-color:var(--navy);
  border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ── 표 ── */
.tw{overflow-x:auto}
table.dt{border-collapse:collapse;width:100%;font-size:12.3px}
table.dt th,table.dt td{padding:6px 10px;border-bottom:1px solid var(--rule-2);text-align:left;
  vertical-align:top}
table.dt thead th{background:var(--sheet);font-weight:600;font-size:11.5px;color:var(--ink-2);
  border-bottom:1px solid var(--rule);white-space:nowrap;position:sticky;top:0}
table.dt td.n,table.dt th.n{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.dt tbody tr:hover{background:var(--sheet)}
.mine{color:var(--red);font-weight:600}

/* ── 차트 ── */
.chartbox{border:1px solid var(--rule-2);background:var(--paper);padding:10px;overflow:auto;
  max-height:640px}
.chartbox img,.chartbox canvas{max-width:100%;height:auto;display:block}

/* ── 모달 ── */
.modal{position:fixed;inset:0;background:rgba(22,32,43,.44);display:none;align-items:center;
  justify-content:center;z-index:80;padding:20px}
.modal.on{display:flex}
.modal .box{background:var(--paper);border-radius:5px;max-width:520px;width:100%;
  box-shadow:0 18px 48px rgba(22,32,43,.24);max-height:88vh;overflow:auto}
.modal h3{margin:0;padding:14px 18px;border-bottom:1px solid var(--rule-2);font-size:14.5px}
.modal .mb{padding:16px 18px}
.modal .mf{padding:12px 18px;border-top:1px solid var(--rule-2);display:flex;gap:8px;
  justify-content:flex-end;background:var(--sheet)}
.radio{display:flex;gap:16px;font-size:12.5px;margin-top:7px}
.radio label{display:flex;align-items:center;gap:5px;cursor:pointer;font-weight:400}
.tip{font-size:12px;color:var(--ink-3);line-height:1.65;margin:9px 0 0}
.tip code{font-family:var(--mono);font-size:11px;background:var(--sheet-2);padding:1px 4px;border-radius:2px}

.note{font-size:11.8px;color:var(--ink-3);line-height:1.6;margin:9px 0 0;padding-left:14px;position:relative}
.note::before{content:"※";position:absolute;left:0;top:0;font-size:10px}
.sep{height:1px;background:var(--rule-2);margin:14px 0}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── 안내서 작성례 ── */
.exbox{margin:8px 0 4px;border:1px solid var(--rule-2);border-radius:3px;background:var(--sheet)}
.exbox > summary{cursor:pointer;padding:7px 11px;font-size:12.3px;color:var(--navy);
  font-weight:600;list-style:none;user-select:none}
.exbox > summary::-webkit-details-marker{display:none}
.exbox > summary::before{content:"▸ ";color:var(--ink-3)}
.exbox[open] > summary::before{content:"▾ "}
.exbox > summary:hover{background:var(--navy-soft)}
.exbox .cd{font-weight:400;color:var(--ink-3)}
.exbox .formprev{padding:0 11px 10px}
.exbox .note{padding:0 11px 9px;margin:0}