/* 보고서·문서 관리 — 다크 테마 (프로토타입 스타일) · 반응형 */
:root{
  --bg:#0f1115; --panel:#181b22; --panel2:#1f232c; --line:#2a2f3a;
  --txt:#e7ebf0; --muted:#9aa4b2; --accent:#4f8cff; --accent2:#6ee7b7;
  --red:#ff6b6b; --shadow:0 6px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
html,body{overflow-x:hidden;max-width:100%}   /* 가로 스크롤 방지 */
img{max-width:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.5;font-size:14px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}

/* ── 상단바 (sticky) ── */
.topbar{position:sticky;top:0;z-index:30;background:rgba(15,17,21,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;max-width:1200px;margin:0 auto;padding:12px 18px}
.brand{color:var(--txt);font-weight:700;font-size:17px}
.topnav{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.topnav a{color:var(--muted);font-size:13.5px;padding:6px 10px;border-radius:9px}
.topnav a:hover{color:#fff;background:var(--panel2);text-decoration:none}
.topuser{display:flex;align-items:center;gap:10px}
.uname{font-size:13px;color:var(--muted)}
.urole{font-style:normal;font-size:11px;background:var(--accent);color:#fff;padding:1px 8px;border-radius:999px;margin-left:4px}
.btn-out{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:6px 12px;border-radius:9px;font-size:12.5px}
.btn-out:hover{border-color:var(--accent);text-decoration:none}

.wrap{max-width:1200px;margin:18px auto;padding:0 16px 60px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:24px}

/* ── 버튼 ── */
.btn,button.btn{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:10px;
  padding:8px 13px;font-size:13px;transition:.15s;display:inline-flex;align-items:center;gap:6px;line-height:1.2;text-decoration:none}
.btn:hover{border-color:var(--accent);background:#222838;text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-primary:hover{filter:brightness(1.1);background:var(--accent)}
.btn-danger{color:var(--red);border-color:#5a2b2b}.btn-danger:hover{background:#2a1c1f}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn-ghost{background:transparent}

/* ── 플래시(=toast 느낌) ── */
.flash{border-radius:10px;padding:11px 16px;margin-bottom:14px;font-size:13.5px;border:1px solid}
.flash-ok{background:#10261c;border-color:#1f3a2e;color:var(--accent2)}
.flash-err{background:#2a1416;border-color:#5a2b2b;color:#ffb4b4}
.flash-info{background:#13233f;border-color:#244a86;color:#bcd3ff}

/* ── 패널/카드 컨테이너 ── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.panel-hd h2{font-size:17px;margin:0;color:var(--txt)}
.muted{color:var(--muted);font-size:12px}

/* ── 통계 요약 ── */
.stats,.summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{flex:1;min-width:120px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat .num,.stat .n{font-size:22px;font-weight:700;color:var(--txt)}
.stat .lbl,.stat .l{font-size:12px;color:var(--muted);margin-top:2px}

/* ── 필터 바 ── */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filters select,.filters input[type=search],.filters input[type=text]{
  background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 12px;font-size:14px}
.filters input[type=search]{flex:1;min-width:160px}
.chip{font-size:12px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;user-select:none;text-decoration:none}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── 표(목록 대체용으로 남겨둠) ── */
table.grid{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel)}
table.grid th{background:var(--panel2);color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px}
table.grid th,table.grid td{white-space:nowrap}     /* 표 글씨 한 줄 유지(2줄 방지) */
table.grid td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:hover td{background:#20242e}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
/* 드래그 정렬 핸들 — 또렷하게(칩 형태, 항상 보임) */
.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;
  cursor:grab;color:var(--txt);background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  font-size:17px;line-height:1;touch-action:none;user-select:none}
.drag-handle:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.drag-handle:active{cursor:grabbing}
.table-wrap table.grid{border:none}
/* 긴 본문성 텍스트만 줄바꿈 허용 */
.ctitle h3,.task .txt,.comment,.md-body{overflow-wrap:anywhere}

/* ── 카테고리 카드형 트리 ── */
.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:background .1s,box-shadow .1s}
.cat-card.dragging{opacity:.94;box-shadow:var(--shadow);border-color:var(--accent)}
.cat-card.is-off{opacity:.6}
.cat-row{display:flex;align-items:center;gap:10px;padding:11px 13px}
.cat-row .order-num{min-width:22px;text-align:center;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.cat-name{flex:1 1 200px;min-width:140px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-left:calc(var(--depth,0) * 20px)}
.cat-name .tree-branch{color:var(--muted)}
.cat-name strong{font-size:14.5px}
.cat-card.is-off .cat-name strong{color:var(--muted)}
.cat-docs{color:var(--muted);font-size:12.5px;white-space:nowrap;flex:0 0 auto}
.cat-desc{font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;flex:0 0 auto}
.cat-actions .lockmsg{font-size:11px;white-space:nowrap}
.cat-edit{display:none;border-top:1px dashed var(--line);padding:12px 13px;background:var(--panel2)}
.cat-edit.open{display:block}
.cat-edit .ef{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.cat-edit label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.cat-edit input,.cat-edit select{padding:8px 11px;border-radius:8px}
/* 입력(추가) 폼 — 박스+라벨로 유려하게 */
.cat-add{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.cat-add > div{display:flex;flex-direction:column;gap:5px}
.cat-add .f-grow{flex:1 1 200px;min-width:160px}
.cat-add .f-lab{font-size:11px;color:var(--muted)}
.cat-add input,.cat-add select{padding:9px 12px;border-radius:9px;width:100%}
.cat-add .f-add{padding:10px 18px;align-self:stretch;white-space:nowrap}
.cat-hint{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px;color:var(--muted);font-size:12.5px}
.cat-hint strong{color:var(--txt)}
/* 문서 등록 — 계단식(1차/2차/3차) 카테고리 셀렉트 */
.cat-cascade{display:flex;flex-wrap:wrap;gap:10px}
.cat-cascade .cat-step{display:flex;flex-direction:column;gap:4px}
.cat-cascade .cat-step label{font-size:11px;color:var(--muted)}
.cat-cascade .cat-step select{min-width:140px}
/* 문서 본문(위지윅 렌더) */
.doc-body{margin-top:12px;border-top:1px solid var(--line);padding-top:14px;line-height:1.7;overflow-wrap:anywhere}
.doc-body img{max-width:100%;height:auto;border-radius:6px}
.doc-body table{border-collapse:collapse;margin:8px 0}
.doc-body td,.doc-body th{border:1px solid var(--line);padding:6px 10px}
.doc-body ul,.doc-body ol{padding-left:22px;margin:8px 0}
.doc-body blockquote{border-left:3px solid var(--line);margin:8px 0;padding:4px 12px;color:var(--muted)}
.doc-body a{color:var(--accent)}
.doc-body h1,.doc-body h2,.doc-body h3,.doc-body h4{margin:14px 0 6px}
.doc-body pre{background:var(--panel2);padding:10px;border-radius:8px;overflow:auto}
/* 위지윅(Jodit) 다크 보정 — 에디터 본문 글씨/배경을 페이지 테마에 맞춤(색 지정 글자는 그대로 유지) */
.jodit-wysiwyg{color:#e7ebf0;background:#171a21}
.jodit-wysiwyg a{color:#7aa7ff}
.jodit-placeholder{color:#7b8494}
.drag-handle.sm{width:22px;height:22px;font-size:13px}
@media (max-width:640px){
  .cat-row{flex-wrap:wrap}
  .cat-actions{margin-left:0;width:100%;justify-content:flex-start;padding-top:4px;border-top:1px dashed var(--line)}
  .cat-add{flex-direction:column;align-items:stretch}
  .cat-add > div,.cat-add .f-grow{flex:0 0 auto;width:100%}   /* .f-grow(이름·설명)도 명시적으로 눌러 세로 늘어남 방지 */
  .cat-add .f-add{width:100%}
  .cat-edit .ef{flex-direction:column;align-items:stretch}
  .cat-edit .ef > label,.cat-edit .ef > button{width:100%}
  .cat-cascade{flex-direction:column}
  .cat-cascade .cat-step select{min-width:0;width:100%}
}

/* ── 배지/칩 ── */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.clip{font-size:11px;color:var(--muted);padding:2px 8px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}

/* ── 보고서 카드 (목록) ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden}
.card.unread{border-left:4px solid var(--accent)}
.card.read{opacity:.94}
.chead{display:flex;gap:10px;align-items:flex-start;padding:14px 16px}
.dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none}
.dot.unread{background:var(--accent);box-shadow:0 0 0 4px rgba(79,140,255,.18)}
.dot.read{background:#3a414e}
.ctitle{flex:1;min-width:0}
.ctitle h3{margin:0;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctitle h3 a{color:var(--txt)}
.ctitle .meta{font-size:12px;color:var(--muted);margin-top:3px}
.progress-rail{display:flex;gap:4px;margin-top:10px;flex-wrap:wrap}
.step{font-size:10px;padding:3px 8px;border-radius:6px;background:#232834;color:var(--muted);border:1px solid transparent}
.step.done{background:#1f3a2e;color:var(--accent2)}
.step.current{background:var(--accent);color:#fff;font-weight:600}
.pill-progress{height:5px;background:#232834;border-radius:4px;overflow:hidden;margin-top:8px}
.pill-progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* ── 상세: 상태행 ── */
.statusrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.statusrow label{font-size:12px;color:var(--muted)}
select,input[type=text],input[type=password],input[type=search],textarea{
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit}
textarea{resize:vertical}

/* ── 할 일 레인 (내 할일 / AI 할일) ── */
.tasks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.tasklane{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.tasklane h4{margin:0 0 8px;font-size:13px;display:flex;align-items:center;gap:6px}
.task{display:flex;gap:8px;align-items:flex-start;padding:6px 4px;border-radius:7px}
.task:hover{background:#262b36}
.task input[type=checkbox]{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--accent)}
.task .txt{flex:1;font-size:13px;word-break:break-word}
.task.done .txt{text-decoration:line-through;color:var(--muted)}
.task .del{border:none;background:none;color:var(--red);padding:0 4px;font-size:15px;cursor:pointer;opacity:.55}
.task .del:hover{opacity:1}
.addtask{display:flex;gap:6px;margin-top:8px}
.addtask input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:6px 9px;font-size:12px}

/* ── 첨부 그리드 ── */
.attsec{margin-top:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.attsec h4{margin:0 0 8px;font-size:13px}
.attgrid{display:flex;flex-wrap:wrap;gap:8px}
.att{position:relative;width:100px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel);font-size:11px}
.att img{width:100px;height:66px;object-fit:cover;display:block}
.att .fileicon{width:100px;height:66px;display:flex;align-items:center;justify-content:center;font-size:26px}
.att .name{padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.att .acts{display:flex;border-top:1px solid var(--line)}
.att .acts a,.att .acts button{flex:1;border:none;background:var(--panel2);color:var(--muted);font-size:11px;padding:5px 0;text-align:center;cursor:pointer}
.att .acts a:hover,.att .acts button:hover{color:#fff;background:#2a3340;text-decoration:none}
.att .acts .del{color:var(--red)}

/* ── 댓글 ── */
.comment{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--panel2)}
.comment .meta{font-size:11.5px;color:var(--muted);margin-bottom:5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.comment .cdel{margin-left:auto;color:var(--red);border:none;background:none;cursor:pointer;font-size:12px}

/* ── 이력 타임라인 ── */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:8px 0 8px 16px;border-left:2px solid var(--line);position:relative;font-size:13px}
.timeline li::before{content:'';position:absolute;left:-5px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ── 폼 ── */
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.form-row input[type=text],.form-row input[type=password],.form-row input[type=search],
.form-row select,.form-row textarea{width:100%;border-radius:9px;padding:10px 12px;font-size:14px}
.form-row textarea{min-height:140px}
.form-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.files{display:flex;flex-wrap:wrap;gap:8px}
.file-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;background:var(--panel2)}

/* ── 로그인 ── */
.login-wrap{max-width:380px;margin:9vh auto;padding:0 18px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.login-card h1{font-size:19px;color:var(--txt);margin-bottom:18px;text-align:center}

/* ── MD 미리보기 ── */
.md-body{font-size:14px;line-height:1.8}
.md-body .md-h{margin:16px 0 8px;color:#fff}
.md-body p{margin:8px 0}
.md-list{margin:8px 0 8px 22px}
.md-task{list-style:none;margin-left:-18px}
.md-table{border-collapse:collapse;margin:12px 0;width:100%}
.md-table th,.md-table td{border:1px solid var(--line);padding:7px 10px;font-size:13px}
.md-table th{background:var(--panel2)}
.md-code{background:#0b0d11;color:#c9d6e5;padding:14px;border-radius:10px;overflow-x:auto;font-size:12.5px;margin:12px 0}
.md-ic{background:#0b0d11;color:var(--accent2);padding:1px 6px;border-radius:4px;font-size:12.5px}
.md-quote{border-left:4px solid var(--accent);background:var(--panel2);padding:8px 14px;margin:12px 0;color:var(--muted)}

.empty{text-align:center;color:var(--muted);padding:50px 16px}

/* ── 반응형 ── */
@media(max-width:760px){
  .stats,.summary{gap:8px}
  .stat{min-width:calc(50% - 6px)}
  .tasks{grid-template-columns:1fr}
  .topnav{order:3;flex-basis:100%}
  .panel{padding:16px}
  .panel-hd{gap:8px}
  .panel-hd h2{font-size:16px}
}
@media(max-width:600px){
  .topbar-in{gap:8px 10px;padding:10px 14px}
  .brand{font-size:15px}
  .uname{display:none}                 /* 이름 숨겨 상단바 넘침 방지(로그아웃 버튼은 유지) */
  /* 필터 컨트롤은 한 줄에 꽉 차게 */
  .filters select,.filters input[type=search]{flex:1 1 100%;min-width:0}
  .filters .btn{flex:1 1 100%;justify-content:center}
  .statusrow .filters input[type=text]{flex:1 1 100%;min-width:0}
}
@media(max-width:480px){
  .wrap{padding:0 12px 50px}
  .panel{padding:13px;border-radius:12px}
  .stat{min-width:100%}                 /* 통계 1열 */
  .att,.att img,.att .fileicon{width:84px}
  .att img,.att .fileicon{height:58px}
  .ctitle h3{font-size:14px}
}

/* ── 달력(월간) ── */
.cal{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-head{background:var(--panel2);border-bottom:1px solid var(--line)}
.cal-dow{padding:8px 6px;text-align:center;font-size:12px;color:var(--muted);font-weight:600}
.cal-dow.sun{color:#ff8b8b}.cal-dow.sat{color:#8bb5ff}
.cal-cell{min-height:104px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px 5px 7px;
  display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.empty{background:#13161c}
.cal-cell.today{background:#142033;box-shadow:inset 0 0 0 1px var(--accent)}
.cal-date{font-size:12.5px;color:var(--txt);font-weight:600}
.cal-date.sun{color:#ff8b8b}.cal-date.sat{color:#8bb5ff}
.cal-evt{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt);background:var(--panel2);
  border-radius:6px;padding:3px 6px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-evt:hover{background:#222838;text-decoration:none}
.cal-evt .dotc{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
@media (max-width:760px){
  .cal-cell{min-height:74px;padding:4px 3px}
  .cal-evt{font-size:10px;padding:2px 4px}
  .cal-evt .dotc{display:none}
}

/* ── 알림 종(상단바) ── */
.notibell{position:relative;display:inline-flex;align-items:center;font-size:16px;line-height:1;padding:4px 6px;border-radius:8px;text-decoration:none}
.notibell:hover{background:var(--panel2);text-decoration:none}
.notidot{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);
  color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;font-style:normal}

/* ── 알림함 목록 ── */
.notilist{display:flex;flex-direction:column;gap:8px}
.noti{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.noti.unread{border-color:#244a86;background:#13233f}
.noti .nic{font-size:18px;line-height:1.2;flex:0 0 auto}
.noti .nbody{flex:1;min-width:0}
.noti .nmsg{font-size:13.5px;color:var(--txt)}
.noti .nmsg a{color:var(--txt)}
.noti .nmsg a:hover{color:var(--accent)}