/* =============================================================================
   form-sheet.css — 공통 "서식 프레임" 스타일 (excel-form-ui-parity)
   Design Ref: §3 공통 서식 프레임 — 화면을 공식 KOMERI xlsx 서식에 근접
   목표: 픽셀 완전일치가 아닌 구조·격자·헤더 근접. 상태색은 기존 배지에 위임.
============================================================================= */

/* KOMERI 명조 — 공식 서식 지정 글꼴 (reports/latex_assets 원본과 동일 ttf) */
@font-face {
  font-family: 'KOMERI Myeongjo';
  src: url("fonts/KOMERI_myeongjo.e63ee8b194ce.ttf") format('truetype');
  font-weight: normal;
  font-display: swap;
}

.form-sheet {
  /* 서식 본문은 KOMERI 명조, 미탑재 환경은 시스템 명조/바탕 폴백 */
  font-family: 'KOMERI Myeongjo', 'Nanum Myeongjo', 'UnBatang', Batang, 'Noto Serif CJK KR', serif;
  --fs-line: #334155;         /* 격자 실선 */
  --fs-line-soft: #cbd5e1;    /* 보조 실선 */
  --fs-head-bg: #1e293b;      /* 서식 제목/헤더 음영 */
  --fs-head-fg: #ffffff;
  --fs-cell-head: #f1f5f9;    /* 표 헤더 셀 음영 */
  --fs-ink: #0f172a;
  position: relative;         /* 바닥글(문서번호) 절대배치 기준 */
  background: #fff;
  color: var(--fs-ink);
  border: 1.5px solid var(--fs-line);
  max-width: 1040px;
  margin: 0 auto 1.5rem;
  padding-bottom: 2rem;       /* 좌측 하단 문서번호 바닥글 공간 확보 */
  font-variant-numeric: tabular-nums;
}

/* ── 서식 표제부 (기관 · 서식명, 가운데) ───────────────────────────── */
.form-sheet-head {
  position: relative;         /* 결재란(우측 상단) 절대배치 기준 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 74px;           /* 결재란 높이 확보 */
  padding: .8rem 1.1rem .7rem;
  border-bottom: 1.5px solid var(--fs-line);
}

/* ── 결재란 (원 양식의 문서번호 자리 = 상단 우측, 작성/검토/승인) ───── */
.fs-approval {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  border-left: 1px solid var(--fs-line);
  border-bottom: 1px solid var(--fs-line);
}
.fs-appr-cell {
  width: 62px;
  border-right: 1px solid var(--fs-line-soft);
  text-align: center;
}
.fs-appr-cell:last-child { border-right: none; }
.fs-appr-role {
  font-size: .6rem;
  font-weight: 700;
  color: #64748b;
  padding: .1rem .1rem;
  background: var(--fs-cell-head);
  border-bottom: 1px solid var(--fs-line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-appr-sig {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  overflow: hidden;
}
/* 서명 이미지는 셀 안에 반드시 수용 (셀 폭 62px) — 넘침 방지 */
.fs-appr-sig img { max-height: 30px; max-width: 100%; object-fit: contain; }
/* 서명 이미지 미등록자: "직책 이름" 텍스트 도장 대체 */
.fs-appr-sig-text {
  font-size: .5rem;
  line-height: 1.05;
  font-weight: 600;
  color: var(--fs-ink);
  word-break: keep-all;
  text-align: center;
}
/* 서명 아래 줄: 결재 일시 */
.fs-appr-date {
  font-size: .56rem;
  font-weight: 600;
  color: var(--fs-ink);
  padding: .05rem .1rem .1rem;
  border-top: 1px solid var(--fs-line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-org {
  font-size: .75rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: .02em;
}
.fs-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--fs-ink);
  margin-top: .05rem;
}
.fs-title-en {
  font-size: .8rem;
  font-weight: 500;
  color: #64748b;
  margin-top: .1rem;
  letter-spacing: .01em;
}

/* ── 바닥글: 좌측 문서번호(개정) · 우측 적용일자 ──────────────────── */
.form-sheet-foot {
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .45rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .72rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: .01em;
}
.fs-foot-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fs-foot-date { font-variant-numeric: tabular-nums; }

/* ── 서식 본문 영역 ─────────────────────────────────────────────── */
.form-sheet-body { padding: 1rem 1.1rem 1.2rem; }

.form-sheet-section { margin-bottom: 1.1rem; }
.form-sheet-section:last-child { margin-bottom: 0; }
.fs-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--fs-head-bg);
  color: var(--fs-head-fg);
  font-size: .8125rem;
  font-weight: 700;
  padding: .4rem .75rem;
  letter-spacing: .02em;
}
.fs-section-title .fs-hint { font-weight: 400; opacity: .78; font-size: .72rem; }

/* ── 격자 표 (조회/편집 공용) ───────────────────────────────────── */
table.fs-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
table.fs-grid th,
table.fs-grid td {
  border: 1px solid var(--fs-line);
  padding: .35rem .5rem;
  text-align: center;
  vertical-align: middle;
}
table.fs-grid thead th,
table.fs-grid .fs-th {
  background: var(--fs-cell-head);
  font-weight: 700;
  color: #334155;
}
table.fs-grid tfoot td { background: var(--fs-cell-head); font-weight: 700; }
table.fs-grid .fs-rowhead { background: var(--fs-cell-head); font-weight: 600; }
table.fs-grid td.fs-left { text-align: left; }
table.fs-grid .fs-muted { color: #64748b; }

/* 편집: 셀 안 인라인 입력 — 셀 테두리가 곧 입력칸 (엑셀 느낌) */
table.fs-grid input:not([type="radio"]):not([type="checkbox"]),
table.fs-grid select {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  padding: .15rem .2rem;
  font: inherit;
  color: inherit;
  min-width: 56px;
}
table.fs-grid textarea {
  width: 100%;
  border: 0;
  background: transparent;
  padding: .3rem .35rem;
  font: inherit;
  color: inherit;
  resize: vertical;
}
table.fs-grid input:focus,
table.fs-grid select:focus,
table.fs-grid textarea:focus {
  outline: 0;
  background: #fef9c3;              /* 포커스 셀 하이라이트 (NFR-3) */
  box-shadow: inset 0 0 0 2px #eab308;
}

/* 반응형: 좁은 화면 가로 스크롤 (NFR-2) */
.fs-scroll { overflow-x: auto; }

/* ── 인쇄: 프레임 그대로, 화면 크롬은 base.html @media print 가 처리 ── */
@media print {
  .form-sheet {
    max-width: none;
    border-color: #000;
    box-shadow: none;
  }
  .fs-section-title { background: #1e293b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.fs-grid th, table.fs-grid td { border-color: #000; }
  .fs-no-print { display: none !important; }
}