/* =============================================================================
   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) 밖의 골격 목록(.fk-page, 표제부 없는 순수 목록)에서도
   fs-grid 실선이 그려지게 골격 페이지에도 둔다(kolas-forms-c2-equipment Check G2). */
.form-sheet,
.fk-page {
  --fs-line: #334155;         /* 격자 실선 */
  --fs-line-soft: #cbd5e1;    /* 보조 실선 */
  --fs-head-bg: #1e293b;      /* 서식 제목/헤더 음영 */
  --fs-head-fg: #ffffff;
  --fs-cell-head: #f1f5f9;    /* 표 헤더 셀 음영 */
  --fs-ink: #0f172a;
}

.form-sheet {
  /* 서식 본문은 KOMERI 명조, 미탑재 환경은 시스템 명조/바탕 폴백 */
  font-family: 'KOMERI Myeongjo', 'Nanum Myeongjo', 'UnBatang', Batang, 'Noto Serif CJK KR', serif;
  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;
}

/* ── 결재란·제목 겹침 방지 (화면 전용 — 인쇄 배치는 원 양식 그대로) ──────────
   결재란은 우측 상단 절대배치라 제목이 길면 위에 겹쳤다(1440px 에서도 — 리스크분석보고서(인원용)).
   양쪽에 결재란 폭(62px × 3)만큼 여백을 두면 제목은 가운데를 지키며 줄바꿈된다.
   좁은 화면에서는 결재란을 제목 위로 내린다. Design Ref: kolas-forms-c2-equipment §4.3 */
@media screen {
  .form-sheet-head.has-stamp {
    padding-left: calc(186px + 1.1rem);
    padding-right: calc(186px + 1.1rem);
  }
  .form-sheet-head .fs-title { overflow-wrap: anywhere; word-break: keep-all; }
}
@media screen and (max-width: 575.98px) {
  .form-sheet-head.has-stamp { padding-left: .8rem; padding-right: .8rem; }
  .form-sheet-head.has-stamp .fs-approval {
    position: static;
    align-self: flex-end;
    margin: -.8rem -.8rem .55rem 0;
  }
  .form-sheet-head .fs-title { letter-spacing: .06em; font-size: 1.2rem; }
}

/* ── 바닥글: 좌측 문서번호(개정) · 우측 적용일자 ──────────────────── */
.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; }
}