/* 예시 문서 (25_예시.js) — 「이렇게 쓰면 됩니다」.

   **문서 자체는 실물과 똑같이 그린다.** 그래야 예시가 예시 노릇을 한다.
   그래서 안내는 전부 문서 **위**의 카드에만 두고, A4 서식 안은 손대지 않는다
   (결재 문서에 안내 문단을 두지 않는다는 규칙과 같은 자리에서 나온 것이다).

   이 카드는 `no-print` 다 — 인쇄하면 예시 문서만 종이에 나온다. */

.ex-head { border-left: 4px solid #8a6100; }
.ex-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ex-h h2 { font-size: 18px; }

/* 「예시」 딱지 — 이 문서가 기록이 아니라는 것을 글자를 읽기 전에 알려야 한다 */
.ex-badge {
  flex: none; padding: 2px 9px; border-radius: 999px;
  background: #fdf5e3; color: #8a6100; border: 1px solid #e3cf9e;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.ex-sum { margin-top: 6px; color: var(--gray); font-size: 13.5px; }

.ex-warn {
  margin-top: 11px; padding: 9px 12px; border-radius: 6px;
  background: #fdf5e3; color: #6b5320; font-size: 13px; line-height: 1.65;
}

/* 짚을 것 — 사용법의 「메뉴별」과 같은 번호 목록 모양이다(같은 성격의 글이라 같이 읽힌다) */
.ex-notes { margin: 12px 0 0; padding-left: 21px; }
.ex-notes li { margin-bottom: 7px; line-height: 1.75; font-size: 14px; }
.ex-notes li:last-child { margin-bottom: 0; }

/* 사용법 화면의 「예시 문서 보기」 단추 */
.help-ex { margin-top: 10px; }

/* 양식 선택 팝업 — 양식 하나에 「고르기」와 「예시」 둘.
   예시를 양식 카드 안에 넣으면 카드를 누른 것인지 예시를 누른 것인지 헷갈린다. */
.fp-wrap { display: flex; align-items: stretch; gap: 6px; }
.fp-wrap .fp { flex: 1 1 auto; min-width: 0; }
.fp-ex {
  flex: none; width: 52px; cursor: pointer; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px; background: #fafbfa; color: var(--gray);
  transition: border-color .12s, background .12s, color .12s;
}
.fp-ex:hover { border-color: var(--green); background: var(--green-l); color: var(--green); }
.fp-ex:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media screen and (max-width: 560px) {
  .ex-h h2 { font-size: 16px; }
  .ex-notes { padding-left: 19px; }
  .ex-notes li { font-size: 13.5px; }
}

/* 화면 예시(수주 현황) — 목록과 「한 건을 열면」 사이를 잇는 줄.
   두 카드를 그냥 이어 붙이면 무엇이 무엇의 다음인지 안 보인다. */
.ex-then {
  margin: -4px 0 14px; text-align: center;
  font-size: 13px; color: #8a6100; font-weight: 600;
}
/* 예시로 그린 표는 눌리지 않는다 — 손가락 모양을 주면 눌러 보게 된다 */
.dl-static tbody tr { cursor: default; }
.dl-static tbody tr:hover td { background: transparent; }