/* =====================================================================
   자체평가 통합시스템 v14 — 스타일
   기준: 흰 바탕 · 곤색(navy) 계열 도형 · 맑은 고딕
   ===================================================================== */

:root{
  --navy:#1f4e78; --navy2:#163a5a; --navy3:#2d6396;
  --bg:#f4f6f9; --line:#dfe4ea; --card:#ffffff;
  --self:#1f4e78; --self-bg:#e8f0fa; --blind:#8a93a0; --blind-bg:#f1f3f6;
  --ok:#1e7d4f; --warn:#b54708; --danger:#b42318;
  --text:#1d2433; --muted:#5a6373;
}
*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Malgun Gothic','맑은 고딕',-apple-system,system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.55;
}

/* ── 헤더 ─────────────────────────────────────────────────────── */
#app-header{
  background:var(--navy); color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px;
}
#app-header h1{font-size:17px; margin:0; font-weight:700; display:flex; align-items:center; gap:8px}
#app-header .sub{font-size:12px; opacity:.85}
.phasechip{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 9px;
  border-radius:11px; background:rgba(255,255,255,.22); letter-spacing:.3px;
}
.header-actions{display:flex; gap:8px; align-items:center}
.btn-ghost-inv{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);
  border-radius:6px; padding:5px 11px; font-size:12px; cursor:pointer;
  font-family:inherit;
}
.btn-ghost-inv:hover{background:rgba(255,255,255,.14)}

.wrap{max-width:1240px; margin:0 auto; padding:20px 16px 60px}

/* ── 카드 ─────────────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 22px; margin-bottom:14px;
}
.card h2{
  margin:0 0 12px; font-size:15px; color:var(--navy);
  border-bottom:2px solid var(--navy); padding-bottom:7px;
}
.card h3{margin:16px 0 6px; font-size:13.5px; color:var(--navy2)}
.section-title{margin-top:24px !important; border-top:1px solid var(--line); padding-top:16px}

.hint{font-size:12.5px; color:var(--muted); margin:6px 0}
.mini{font-size:11.5px}
.warn-text{color:var(--warn)}
.danger-text{color:var(--danger)}
.float-r{float:right}
.flex-none{flex:none}
.flex-2{flex:2}
.mt-8{margin-top:8px}
.w-tiny{width:56px; margin-left:4px}

/* ── 입력 ─────────────────────────────────────────────────────── */
label{display:block; font-size:12px; font-weight:600; color:var(--navy2); margin-bottom:4px}
input,select,textarea{
  width:100%; padding:7px 10px; border:1px solid #c8d0da; border-radius:6px;
  font-family:inherit; font-size:13.5px; background:#fff; color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--navy3); box-shadow:0 0 0 2px rgba(45,99,150,.15)}
textarea{min-height:62px; resize:vertical}
input[type=file]{padding:6px; background:#fbfcfd}
input:disabled,select:disabled{background:#f2f4f7; color:#8a93a0}

.row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.row>div{flex:1; min-width:150px}
.align-end{display:flex; align-items:flex-end; gap:8px}
.actions{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ── 버튼 ─────────────────────────────────────────────────────── */
.btn{
  background:var(--navy); color:#fff; border:1px solid var(--navy);
  border-radius:6px; padding:8px 16px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.btn:hover{background:var(--navy2)}
.btn:disabled{background:#9aa5b1; border-color:#9aa5b1; cursor:not-allowed}
.btn.ghost{background:#fff; color:var(--navy); border-color:#b9c6d6}
.btn.ghost:hover{background:var(--self-bg)}
.btn.sm{padding:5px 11px; font-size:12.5px}
.btn.danger{background:var(--danger); border-color:var(--danger)}
.btn.danger:hover{background:#8f1c14}

/* ── 메시지 ───────────────────────────────────────────────────── */
.msg{font-size:12.5px; margin:8px 0; white-space:pre-line; line-height:1.6}
.msg:empty{margin:0}
.msg.ok{color:var(--ok); background:#eaf6ef; border:1px solid #b8e0c8; border-radius:6px; padding:9px 12px}
.msg.err{color:var(--danger); background:#fdecea; border:1px solid #f3c0bb; border-radius:6px; padding:9px 12px}
.msg.info{color:var(--navy); background:var(--self-bg); border:1px solid #bcd4ec; border-radius:6px; padding:9px 12px}
.msg.warn{color:var(--warn); background:#fdf3e7; border:1px solid #f0d0a8; border-radius:6px; padding:9px 12px}

/* ── 단계 진행바 ──────────────────────────────────────────────── */
.steps{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px}
.step{
  flex:1; min-width:88px; text-align:center; font-size:11.5px; font-weight:600;
  padding:7px 4px; border-radius:6px; background:#fff; border:1px solid var(--line); color:#8a93a0;
}
.step.done{background:var(--self-bg); border-color:#bcd4ec; color:var(--navy)}
.step.on{background:var(--navy); border-color:var(--navy); color:#fff}

/* ── 탭 ───────────────────────────────────────────────────────── */
.tabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px}
.tabs button{
  background:#fff; border:1px solid var(--line); border-bottom:2px solid transparent;
  border-radius:7px 7px 0 0; padding:8px 15px; font-size:13px; font-weight:600;
  color:var(--muted); cursor:pointer; font-family:inherit;
}
.tabs button:hover{background:var(--self-bg); color:var(--navy)}
.tabs button.on{background:var(--navy); border-color:var(--navy); color:#fff}

/* ── 상태바 ───────────────────────────────────────────────────── */
.statbar{
  display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; color:var(--muted);
  padding:13px 18px !important; margin-bottom:12px;
}
.statbar b{color:var(--navy); font-size:14.5px; margin-left:3px}
.navrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:11px 18px !important}
.navrow select{max-width:420px; flex:1; min-width:180px}
.save-state{margin-left:auto; color:var(--ok); font-weight:600}
.legend{margin:-4px 0 8px 4px}

/* ── 표 ───────────────────────────────────────────────────────── */
.table-scroll{overflow:auto; margin-top:10px}
.table-scroll.tall{max-height:640px}
table{width:100%; border-collapse:collapse; font-size:12.5px}
th{
  background:var(--navy); color:#fff; border:1px solid var(--navy2);
  padding:7px 9px; text-align:center; font-weight:600; white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
td{border:1px solid #d6dce4; padding:6px 9px; background:#fff; vertical-align:middle}
tbody tr:nth-child(even) td{background:#fafbfd}
tbody tr:hover td{background:var(--self-bg)}
.num{text-align:right; font-variant-numeric:tabular-nums}
.ctr{text-align:center}
.nowrap{white-space:nowrap}

/* ── 평가표 ───────────────────────────────────────────────────── */
.task-card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:18px 22px; margin-bottom:14px;
}
.task-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:2px solid var(--navy); padding-bottom:9px; margin-bottom:14px;
}
.task-no{
  background:var(--navy); color:#fff; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:5px;
}
.task-name{font-size:15.5px; font-weight:700; color:var(--navy)}
.task-meta{font-size:12px; color:var(--muted)}
.core-badge{
  background:#fdf3e7; color:var(--warn); border:1px solid #f0d0a8;
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px;
}

/* ── 1차 동적 폼 — 원본 v13 index.html 과 동일 구조 ───────────────
 *  항목명은 위(label), 입력칸은 아래(fld), 평가기준은 그 아래(descbox).
 *  좌우 2열 그리드로 좁히면 평가기준 문장이 잘려 판단 근거를 못 읽으므로,
 *  원본과 같은 세로 적층 구조를 유지한다. */
.fg{padding:14px; border-bottom:1px solid #eef1f5}
.fg:last-child{border-bottom:none}
.fg>label{
  display:block; font-size:13.5px; color:#1d2433; font-weight:600; margin:0 0 7px;
}
.fg.core{background:#fffaf2}
.fg .fld{width:100%; font-size:13.5px}
.fg textarea.fld{min-height:88px; resize:vertical}
.req{color:var(--danger); margin-right:3px; font-weight:700}
.opt{font-size:11px; color:var(--muted); font-weight:400; margin-left:5px}

/* 섹션 제목 — 관리과제는 남색, 성과목표는 녹색 계열 */
.sectitle{
  background:#eef2f8; color:var(--navy); font-weight:700; font-size:13px;
  padding:9px 14px; border-bottom:1px solid var(--line);
}
.sectitle.goal{background:#eaf5ee; color:var(--ok)}

/* 평가기준 안내 상자 — 줄바꿈을 그대로 살린다(pre-line) */
.descbox{
  margin-top:6px; font-size:12px; color:#5a6373; background:#f7f9fc;
  border-left:3px solid var(--line); padding:7px 10px;
  border-radius:0 6px 6px 0; white-space:pre-line;
}
.descbox.navy{border-left-color:var(--navy); background:#eef2f8}
.descbox.warn{border-left-color:var(--warn)}
.descbox b{color:var(--navy)}

/* 숫자 입력 + 단위 '점' 을 한 줄에 */
.inline{display:flex; gap:8px; align-items:center}
.inline .fld{flex:1}
.inline span{color:#5a6373; font-size:13px; white-space:nowrap}

/* 과제 카드 내부 이동 버튼 줄 */
.fgnav{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; padding:12px 14px; border-top:1px solid var(--line);
}

/* 진행 현황 요약 줄 */
.statbar{
  display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:#5a6373;
}
.statbar b{color:var(--navy)}
.navrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.navrow select{flex:1; min-width:240px}

.quant-box{
  background:var(--self-bg); border:1px solid #bcd4ec; border-radius:7px;
  padding:10px 14px; margin-bottom:12px; font-size:12.5px; color:var(--navy2);
}
.quant-box b{color:var(--navy)}

.submit-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:2px solid var(--line);
}
.chk-inline{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--navy)}
.chk-inline input{width:auto}

/* ── 2·3차 조정표 ─────────────────────────────────────────────── */
.adj-table th{font-size:11.5px}
.self-cell{background:var(--self-bg) !important; color:var(--self); font-weight:700}
.blind-cell{background:var(--blind-bg); color:var(--blind)}
.devbadge{
  display:inline-block; font-size:10.5px; font-weight:700; padding:1px 7px;
  border-radius:9px; margin-left:4px;
}
.devbadge.warn{background:#fdf3e7; color:var(--warn); border:1px solid #f0d0a8}
.devbadge.alert{background:#fdecea; color:var(--danger); border:1px solid #f3c0bb}
tr.flag-warn td{background:#fffbf4}
tr.flag-alert td{background:#fef6f5}
.adj-input{width:92px; text-align:right}
.locked-row td{background:#f7f8fa; color:#98a0ab}
.appeal-box{
  background:#fdf3e7; border:1px solid #f0d0a8; border-radius:7px;
  padding:10px 14px; margin-bottom:12px; font-size:12.5px;
}
.appeal-box b{color:var(--warn)}

/* ── 구획·경고 영역 ───────────────────────────────────────────── */
.section-div{margin-top:14px; border-top:1px solid var(--line); padding-top:14px}
.sub-box{
  background:#f8fafc; border:1px solid #d8dee6; border-radius:8px;
  padding:11px 15px; margin-bottom:10px;
}
.danger-zone{margin-top:18px; border-top:2px solid #e3b7b0; padding-top:14px}
.danger-zone h3{color:#8a3b2e; margin-top:0}
.alert-box{
  margin-top:12px; background:#fdeeec; border:1px solid #e3b7b0;
  border-radius:8px; padding:11px 15px;
}

/* ── 통보서 ───────────────────────────────────────────────────── */
.notice-doc{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:26px 30px; margin-bottom:16px;
}
.notice-doc h3{
  text-align:center; font-size:17px; color:var(--navy); margin:0 0 18px;
  padding-bottom:10px; border-bottom:2.5px solid var(--navy);
}
.notice-meta{display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; margin-bottom:14px}
.notice-grade{
  display:inline-block; background:var(--navy); color:#fff; font-size:15px; font-weight:700;
  padding:5px 18px; border-radius:6px;
}
.notice-prov{color:var(--warn); font-weight:700; font-size:12px; margin-left:8px}
.notice-foot{font-size:11.5px; color:var(--muted); margin-top:14px; line-height:1.7}

.app-footer{
  text-align:center; font-size:11.5px; color:#98a0ab;
  padding:16px; border-top:1px solid var(--line); background:#fff;
}

/* ── 인쇄 (가로 A4) ───────────────────────────────────────────── */
@media print{
  @page{size:A4 landscape; margin:12mm}
  body{background:#fff; font-size:11pt}
  #app-header,.tabs,.steps,.actions,.row,.app-footer,.hint,#ntMsg{display:none !important}
  .card{border:none; padding:0; margin:0}
  .card h2{display:none}
  .notice-doc{page-break-after:always; border:1px solid #999; margin:0 0 8mm}
  .notice-doc:last-child{page-break-after:auto}
  th{background:var(--navy) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:720px){
  .item-row{grid-template-columns:1fr; gap:7px}
  .statbar{gap:14px}
  .row>div{min-width:100%}
}