/* =============================================================
   모바일 우선. 결재자 연령대를 고려해 글자와 터치 영역을 크게 잡는다.
   화면설계서 §6: 입력 필드 48px 이상, 버튼 터치 영역 44×44px 이상.
   ============================================================= */

/*
 * 색과 글꼴은 조합 홈페이지(kupst.org)에서 가져왔다.
 *   본문 #222222 · 주색 #3074f0 · 보조 #309ff0 · 짙은 남색 #2a4886
 *   경계선 #d4d4d6 · 바탕 #f8f8f8
 * 글꼴도 홈페이지와 같은 Pretendard → Noto Sans KR 순으로 잡되,
 * **웹폰트를 불러오지 않는다** — CSP 가 외부 출처를 막고 있고, 결재 문자 한 통을
 * 열자고 폰트 수백 KB 를 받게 할 이유가 없다. 설치돼 있으면 쓰고 없으면 시스템 글꼴로 떨어진다.
 */
:root {
  --bg: #f8f8f8;
  --card: #ffffff;
  --line: #d4d4d6;
  --text: #222222;
  --muted: #666666;
  --accent: #3074f0;
  --accent-deep: #2a4886;
  --accent-weak: #eef4ff;
  --danger: #dc2626;
  --warn: #d97706;
  --ok: #059669;
  --radius: 10px;

  /* 결재 단계별 색상 (화면설계서 S-03) */
  --role-applicant: #6b7280;
  --role-branch: #f59e0b;
  --role-director: #10b981;
  --role-sg: #3b82f6;
  --role-chair: #8b5cf6;
}

* { box-sizing: border-box; }

/*
 * ⚠ `hidden` 속성은 어떤 display 지정보다 우선한다.
 *
 * 브라우저 기본 스타일의 `[hidden] { display: none }` 은 **작성자 스타일에 무조건 진다.**
 * 그래서 `.modal { display: grid }` 같은 규칙 하나가 `hidden` 을 통째로 무력화한다.
 * 2026-07-31 에 실제로 그렇게 되어, 결재 화면을 열자마자 반려·보완 요청 모달이
 * 항상 떠 있었다. curl 검증은 HTML 에 `hidden` 이 있으니 통과했다.
 *
 * 앞으로 같은 실수를 원천 차단한다.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, -apple-system,
               "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* iOS 노치 */
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── 헤더 · 푸터 ───────────────────────────────────────── */
.site-head {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

/* 조합 로고 — kupst.org 머리글과 같은 가로형이다. 로고에 조합 이름이 들어 있다. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
  /* 이미지가 아직 안 왔을 때 줄이 튀지 않도록 자리를 잡아 둔다 (682:120). */
  aspect-ratio: 682 / 120;
}
.brand-service {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  padding-left: 10px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
@media (max-width: 380px) {
  .brand-logo { height: 24px; }
  .brand-service { display: none; }
}

/* ── 하단 광고판 (2026-08-03) ──────────────────────────── */
.adboard {
  margin: 40px auto 0;
  /* 상자는 320×240 이 기준이고, 화면이 좁으면 폭에 맞춰 줄어든다. */
  width: min(320px, 100%);
}
.adboard-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 320 / 240;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.adboard-track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .adboard-track { transition: none; }
}
.adboard-item {
  flex: 0 0 100%;
  height: 100%;
}
.adboard-item a,
.adboard-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.adboard-item img {
  /* 권장 크기(320×240)와 다른 그림이 올라와도 상자를 채운다. */
  object-fit: cover;
}
.adboard-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 결재자 연령대를 고려한 터치 영역 (화면설계서 §6) */
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, .86);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.adboard-arrow.prev { left: 8px; }
.adboard-arrow.next { right: 8px; }
.adboard-arrow:hover { background: #fff; }

.adboard-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.adboard-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.adboard-dot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 99px;
  background: var(--line);
}
.adboard-dot.on::after { background: var(--accent); }

.site-foot {
  margin-top: 40px;
  padding: 20px 0 32px;
  color: var(--muted);
  font-size: 13px;
}
.site-foot p { margin: 0; }

main { padding-top: 20px; }

/* ── 진행률 ───────────────────────────────────────────── */
.steps { margin-bottom: 20px; }
.steps-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.steps-title { font-size: 20px; font-weight: 700; margin: 0; }
.steps-count { color: var(--muted); font-size: 14px; }
.steps-bar {
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.steps-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width .25s ease;
}

/* ── 카드 ────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.card > h2 {
  font-size: 16px;
  margin: 0 0 14px;
}

/* ── 폼 ──────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.req { color: var(--danger); margin-left: 2px; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  /* 화면설계서 §6: 48px 이상 */
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #d4d4d6;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  /* 16px 미만이면 iOS 가 확대한다 */
  font-size: 16px;
  font-family: inherit;
}
.field textarea { min-height: 96px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field .hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.field .err {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--danger);
  font-weight: 600;
}
.field.has-error input,
.field.has-error select { border-color: var(--danger); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ── 동의 + 서명 ──────────────────────────────────────── */
.agree {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
  background: #fff;
}
.agree-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* 터치 영역 확보 */
  min-height: 44px;
  cursor: pointer;
}
.agree-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.agree-check span { font-size: 14.5px; }

.sign-box { margin-top: 12px; }
.sign-canvas-wrap {
  position: relative;
  border: 2px dashed #9a9aa0;
  border-radius: 8px;
  background: #fff;
  /* 서명하기 편한 높이 */
  aspect-ratio: 5 / 2;
  overflow: hidden;
  touch-action: none;
}
.sign-canvas-wrap.filled { border-style: solid; border-color: var(--ok); }
.sign-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.sign-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9a9aa0;
  font-size: 15px;
  pointer-events: none;
}
.sign-canvas-wrap.filled .sign-placeholder { display: none; }

.sign-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ── 버튼 ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  min-width: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #2a4886; }
.btn-ghost { background: #fff; color: var(--text); border-color: #d4d4d6; }
.btn-ghost:hover { background: #f0f1f3; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.actions .grow { flex: 1; }

/* 임시저장 — 눈에 보이는 버튼으로 둔다 (2026-07-30 확정) */
.save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--accent-weak);
  border: 1px solid #b9d2fb;
  border-radius: var(--radius);
}
.save-bar .save-msg {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.save-bar .save-msg strong { color: var(--ok); }

/* ── 알림 상자 ────────────────────────────────────────── */
.note {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid;
}
.note-info  { background: var(--accent-weak); border-color: #b9d2fb; }
.note-warn  { background: #fffbeb; border-color: #fde68a; }
.note-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.note p:first-child { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }

/* ── 결재선 미리보기 ──────────────────────────────────── */
.line-list { list-style: none; margin: 0; padding: 0; }
.line-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.line-list li:last-child { border-bottom: 0; }
.line-no {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--role-applicant);
}
.line-no.r-BRANCH_HEAD  { background: var(--role-branch); }
.line-no.r-ORG_DIRECTOR { background: var(--role-director); }
.line-no.r-SEC_GENERAL  { background: var(--role-sg); }
.line-no.r-CHAIR        { background: var(--role-chair); }
.line-role { font-size: 13px; color: var(--muted); }
.line-name { font-weight: 600; }
.line-merged { font-size: 12px; color: var(--muted); }

/* 신청자 화면은 역할만 보여 준다 (실명 비공개). 이때 역할이 그 줄의 본문이다. */
.line-list.roles-only .line-role { font-size: 15px; font-weight: 600; color: var(--text); }

/* 옮겨 적기 정정 — 결재 화면에서 접었다 편다 */
.correct-box > summary {
  cursor: pointer;
  font-size: 15px;
  list-style: none;
}
.correct-box > summary::-webkit-details-marker { display: none; }
.correct-box > summary::before { content: "▸ "; color: var(--muted); }
.correct-box[open] > summary::before { content: "▾ "; }
.correct-form .field { margin-bottom: 12px; }

/* ── 배정 정정 (관리자) ─────────────────────────────────
   인라인 이벤트 핸들러를 못 쓰므로(CSP) 펼침은 <details> 로 한다. */
.asg-edit > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  margin-top: 6px;
}
.asg-edit > summary::-webkit-details-marker { display: none; }
.asg-edit[open] > summary { margin-bottom: 10px; }
/* 표 안에서 열리므로 폭을 잡아 준다. 안 그러면 칸 너비만큼 눌린다. */
.asg-edit > form {
  min-width: 260px;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.asg-edit .field { margin-bottom: 10px; }
.asg-edit .hint { margin: 0 0 12px; }

/* ── 오프라인 접수 검수 (관리자) ───────────────────────── */
.intake {
  display: grid;
  gap: 16px;
  /* 넓은 화면에서는 스캔본과 입력을 나란히 둔다 — 보면서 옮겨 적는 화면이다. */
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .intake { grid-template-columns: 1fr 1fr; align-items: start; }
  /* 입력하는 동안 스캔본이 따라온다. */
  .intake-scan { position: sticky; top: 12px; }
}
.intake-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f3f4f6;
  overflow: auto;
  max-height: 62vh;
  cursor: zoom-in;
}
.intake-frame.zoomed { cursor: zoom-out; max-height: none; }
.intake-img { display: block; width: 100%; height: auto; }
.intake-frame.zoomed .intake-img { width: auto; max-width: none; }
.intake-pager { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* 자동 판독 — 스캔본 아래에 붙는다. 읽은 값이 어디서 왔는지 알 수 있어야 한다. */
.intake-read {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.intake-read-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
/*
 * 자동으로 채운 칸. 값이 들어 있으면 사람이 대조를 건너뛰기 쉬워서
 * "이건 기계가 읽은 값" 이라고 표시해 둔다.
 */
.field.is-auto > label::after {
  content: "자동 판독";
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--accent-weak);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.field.is-auto input, .field.is-auto select { border-color: #b9d2fb; }

/* ── 광고판 관리 (관리자) ─────────────────────────────── */
.banner-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.banner-row:last-of-type { border-bottom: 0; }
.banner-thumb {
  flex: 0 0 160px;
  width: 160px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.banner-fields { flex: 1 1 auto; min-width: 0; }
.banner-fields .field { margin-bottom: 10px; }
@media (max-width: 520px) {
  .banner-row { flex-direction: column; }
  .banner-thumb { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 320 / 240; }
}

/* 생략된 지부장 단계 — 번호를 받지 못한 줄이라 눈에 덜 띄게 둔다. */
.line-list .line-skip .line-no { background: var(--muted); }
.line-list.roles-only .line-skip .line-role { font-weight: 400; color: var(--muted); }

/* ── 확인 요약 ────────────────────────────────────────── */
.summary { list-style: none; margin: 0; padding: 0; }
.summary li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.summary li:last-child { border-bottom: 0; }
.summary dt, .summary .k {
  flex: 0 0 92px;
  color: var(--muted);
  font-size: 14px;
}
.summary .v { flex: 1; font-weight: 500; word-break: break-all; }

/* ── 배지 ────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 99px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── 결재 화면 (S-03) ─────────────────────────────────── */
.approve-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.approve-receipt { margin: 0; font-size: 13px; color: var(--muted); }
.approve-title { margin: 2px 0 0; font-size: 20px; }
.approve-dday { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.approve-dday.over { color: var(--danger); }

.line-list li.line-current { background: var(--accent-weak); border-radius: 8px; padding-left: 8px; }
.line-comment { font-size: 13px; color: var(--muted); }
.line-when { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* 문서 미리보기 — 기본은 축소, [전체보기]에서 원래 폭 */
.doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.doc-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
  /* 세로로 다 펼치면 결재 버튼이 한참 아래로 밀린다 */
  max-height: 60vh;
  -webkit-overflow-scrolling: touch;
}
.doc-frame.zoomed { max-height: none; }
.doc-frame .form-page { width: 100%; }
.doc-frame.zoomed .form-page { width: 900px; max-width: none; }

/* ── 서명 선택 ────────────────────────────────────────── */
.sign-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 420px) {
  .sign-choice { grid-template-columns: 1fr; }
}
.sign-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 화면설계서 §6: 결재자 연령대를 고려한 큰 터치 영역 */
  min-height: 88px;
  padding: 12px;
  border: 2px solid #d4d4d6;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sign-option.selected { border-color: var(--accent); background: var(--accent-weak); }
.sign-option-title { font-weight: 700; }
.sign-option-preview { max-height: 54px; object-fit: contain; align-self: flex-start; }
.sign-option .hint { margin: 0; }
.sign-option-empty { border-style: dashed; }

/* ── 하단 액션 바 ─────────────────────────────────────── */
.action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 0;
  margin-top: 18px;
  background: linear-gradient(to bottom, rgba(248,250,252,0), var(--bg) 30%);
}
.action-bar .grow { flex: 1; }
.btn-danger-text { color: var(--danger); }

/* ── 모달 ────────────────────────────────────────────── */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
  background: rgba(15, 23, 42, .45);
  padding: 0;
}
@media (min-width: 560px) {
  .modal { place-items: center; padding: 20px; }
}
.modal-box {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow: auto;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}
@media (min-width: 560px) {
  .modal-box { border-radius: var(--radius); }
}
.modal-box h2 { margin: 0 0 12px; font-size: 18px; }

.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.radio-row input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* ── 결재함 (S-04) ────────────────────────────────────── */
.inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.inbox-actions { display: flex; gap: 8px; }

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { border-bottom: 1px solid var(--line); }
.doc-list li:last-child { border-bottom: 0; }
.doc-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 터치 영역 */
  min-height: 60px;
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
}
.doc-list li.is-late { background: #fffbeb; }
.doc-main { display: flex; flex-direction: column; }
.doc-name { font-weight: 700; }
.doc-sub { font-size: 13px; color: var(--muted); }
.doc-meta { display: flex; align-items: center; gap: 8px; }
.doc-days { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ── 상단 메뉴 ────────────────────────────────────────── */
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-user { font-size: 13px; color: var(--muted); }

.site-nav {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.site-nav .wrap {
  display: flex;
  gap: 4px;
  padding-top: 4px;
}
.site-nav a {
  /* 결재자 연령대를 고려한 터치 영역 */
  padding: 12px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.site-nav a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 카운터 (S-01) ────────────────────────────────────── */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 520px) {
  .counters { grid-template-columns: repeat(2, 1fr); }
}
.counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.counter:hover { border-color: var(--accent); }
.counter-dot { width: 9px; height: 9px; border-radius: 99px; }
.counter-label { font-size: 13px; color: var(--muted); }
.counter-value { font-size: 24px; font-weight: 800; line-height: 1.1; }

/* ── 탭 · 필터 (S-04) ─────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.tabs a {
  padding: 10px 14px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.tabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.filter-bar input[type="search"] {
  flex: 1 1 180px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d4d4d6;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
}
.filter-bar select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d4d4d6;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
}
.mini-select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d4d4d6;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

/* ── 표 ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mini-table th, .mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.mini-table th {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.mini-table .hint { margin: 0; font-size: 12px; }
.row-off { opacity: .5; }
.row-warn { background: #fffbeb; }

/* ── 타임라인 (S-05) ──────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.timeline li:last-child { border-bottom: 0; }
.timeline-when { flex: 0 0 84px; color: var(--muted); font-size: 13px; }
.timeline-what { flex: 1; }
.timeline-what .hint { display: inline; margin-left: 6px; font-size: 12px; }
.timeline-ip { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ── 관리자 ──────────────────────────────────────────── */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.admin-nav a {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.admin-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* 막대 그래프 — 사용자 이익대표자 추이 */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 18px;
}
.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  position: relative;
}
.bar-fill {
  width: 100%;
  min-height: 2px;
  background: var(--danger);
  border-radius: 3px 3px 0 0;
}
.bar-n { position: absolute; top: -16px; font-size: 11px; color: var(--muted); }
.bar-label { margin-top: 4px; font-size: 11px; color: var(--muted); }

/* ── 저장 서명 미리보기 ───────────────────────────────── */
.stored-sign {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  text-align: center;
}
.stored-sign img { max-width: 100%; max-height: 120px; object-fit: contain; }

/* ── 접수 완료 ────────────────────────────────────────── */
.receipt {
  text-align: center;
  padding: 24px 16px;
}
.receipt-no {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 12px 0;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════
   공문 — 기안 화면
   ═══════════════════════════════════════════════════════════ */

/* 전결권자별 묶음. **사다리가 눈에 보여야 한다** —
   사람이 결재선을 짜는 게 아니라 종류가 정한다는 것이 화면에서 드러나야 한다. */
.kind-group { margin: 0 0 22px; }

.kind-group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 0 8px; margin: 0 0 10px;
  border-bottom: 2px solid var(--line);
}
.kind-group-step {
  font-weight: 700; font-size: 15px; color: var(--text);
}
.kind-group-meta { font-size: 13px; color: var(--muted); }

/* 단계 수를 색으로도 구분한다. 화면설계서가 정한 역할 색을 그대로 쓴다. */
.kind-group[data-authority="DIRECTOR"]    .kind-group-head { border-bottom-color: var(--role-director); }
.kind-group[data-authority="SEC_GENERAL"] .kind-group-head { border-bottom-color: var(--role-sg); }
.kind-group[data-authority="CHAIR"]       .kind-group-head { border-bottom-color: var(--role-chair); }

.kind-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.kind {
  display: block; position: relative;
  padding: 14px 14px 14px 40px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.kind:hover { border-color: var(--accent); }

.kind input { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); margin: 0; }
.kind input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kind-name { display: block; font-weight: 600; font-size: 15px; }
.kind-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.kind:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }

/* 결재선을 못 채우는 종류. **고르는 자리에서 막는다** —
   본문을 다 쓴 뒤 상신에서 막히면 처음부터 다시다. */
.kind.is-blocked { opacity: .55; cursor: not-allowed; background: #fafafa; }
.kind.is-blocked:hover { border-color: var(--line); }
.kind-warn { display: block; margin-top: 6px; font-size: 12px; color: var(--danger); }

/* 분류 — 문서번호에 들어간다 */
.cat-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin-bottom: 6px;
}
.cat {
  display: block; position: relative;
  padding: 12px 12px 12px 38px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.cat:hover { border-color: var(--accent); }
.cat input { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); margin: 0; }
.cat:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.cat-name { display: block; font-weight: 600; font-size: 14px; }
.cat-no   { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--muted); font-weight: 400; }
.cat-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* 폼 */
.form-step { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.form-step-sub { font-weight: 400; font-size: 13px; color: var(--muted); }

.title-input {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.title-input:focus { outline: none; border-color: var(--accent); }

/* 홈 카운터 */
.counter-grid {
  display: grid; gap: 10px; margin: 0 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.counter {
  display: block; padding: 16px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.counter:hover { border-color: var(--accent); }
.counter.is-active { border-color: var(--accent); }
.counter-n { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; }
.counter.is-active .counter-n { color: var(--accent); }
.counter-label { display: block; font-weight: 600; margin-top: 2px; }
.counter-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }


.alert-info {
  background: var(--accent-weak); color: var(--accent-deep);
  border: 1px solid #cfe0ff; padding: 10px 14px; border-radius: 8px; font-size: 13px;
}


/* ── 기안 ② — 종이 위에서 바로 쓴다 (2026-08-08) ──────────────────────────
 *
 * ⚠ `.doc-canvas` 안에 있는 것은 미리보기가 아니라 **문서 그 자체**다.
 *   생김새는 `LetterRenderer::css()` 가 그리고, 여기는 그 종이를 놓을 자리와
 *   도구 막대만 맡는다. 문서 생김새를 여기서 고치지 말 것 — PDF 와 갈라진다.
 */

/* 도구 막대 — 스크롤해도 따라온다. 문서가 길어지면 위로 올라가 버린다. */
.doc-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.doc-bar-group { display: flex; gap: 2px; align-items: center; }
.doc-bar-group + .doc-bar-group {
  margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--line);
}
.doc-bar-grow { flex: 1; }

.tb {
  min-width: 32px; height: 30px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: inherit; font-size: 14px; line-height: 1; color: var(--text); cursor: pointer;
}
.tb:hover { background: #eef1f6; border-color: #dfe3ea; }
.tb:active { background: #e2e7ef; }
.tb:disabled { opacity: .35; cursor: not-allowed; }
.tb-b { font-weight: 800; }
.tb-i { font-style: italic; }
.tb-u { text-decoration: underline; }
.tb.is-on { background: var(--accent-weak); border-color: #b9d2fb; color: var(--accent-deep); }

.tb-select {
  height: 30px; max-width: 190px; padding: 0 6px;
  border: 1px solid #dfe3ea; border-radius: 6px; background: #fff;
  font: inherit; font-size: 13px; color: var(--muted);
}

.doc-zoom { white-space: nowrap; }
.doc-zoom-pct {
  display: inline-block; min-width: 42px; text-align: center;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}

.doc-state { font-size: 13px; color: var(--muted); margin-right: 8px; }
.doc-state.is-warn { color: #b45309; font-weight: 600; }
.kbd { font-size: 11px; opacity: .7; margin-left: 2px; }

/*
 * 종이를 놓는 자리.
 *
 * ⚠ **가로로 끌게 하지 않는다.** A4 를 원래 크기로 두면 좁은 화면에서 드래그해야
 *   하는데, 그런 화면은 쓸 수가 없다 (2026-08-08 사용자 지적).
 *
 * ⚠ 대신 **`transform: scale()` 로 줄인다.** 문서는 언제나 210mm 로 짜이고 보이는
 *   크기만 바뀐다 — 폭이나 글자 크기를 줄이면 화면에서는 그럴듯해도 **PDF 에서
 *   줄이 다른 데서 넘어간다.**
 */
.doc-canvas {
  overflow-x: hidden;
  padding: 16px; 
  background: #e9eaee; border: 1px solid var(--line); border-radius: var(--radius);
}
.doc-viewport { margin: 0 auto; }        /* 줄어든 만큼의 자리를 대신 차지한다 */
.doc-stage { transform-origin: top left; }
.doc-canvas .lt-sheet { box-shadow: 0 1px 6px rgba(0,0,0,.18); }

/* 쓸 수 있는 자리는 눌러 보기 전에 알아야 한다. */
.doc-canvas .lt-in:hover,
.doc-canvas .lt-body:hover { background: #fbfcfe; }

/*
 * ⚠ 기안 ② 에서는 아래 단추 막대가 **떠 있으면 안 된다.**
 *   `.action-bar` 는 원래 `sticky; bottom: 0` 인데(가입신청에서 온 규칙), A4 가 길어서
 *   그대로 두면 단추가 문서의 표제부와 꼬리 위에 겹쳐 앉는다 — 화면 사진으로 잡았다.
 */
.action-bar-flow {
  position: static;
  background: none;
  padding-top: 14px;
}

/* 도구 막대가 노트북 폭(1280)에서 세 줄로 접히던 것을 두 줄로 줄인다. */
.doc-bar { gap: 3px; padding: 7px 8px; }
.doc-bar-group + .doc-bar-group { margin-left: 3px; padding-left: 5px; }
.tb { min-width: 30px; padding: 0 6px; }
.tb-select { max-width: 150px; font-size: 12.5px; }

/*
 * ⚠ **문서를 쓰는 화면은 폭이 다르다.**
 *   `.wrap` 은 680px 인데(가입신청 폼 기준) A4 는 794px 다. 그대로 두면 문서가
 *   77% 로 줄어 보이고, 글자가 작아지면 그것만으로 쓸 수가 없다.
 *   `DraftController::editData()` 가 `bodyClass` 로 이 클래스를 붙인다.
 */
body.doc-wide main.wrap { max-width: 900px; }

/* ── 기안 ③ 결재선 — 실국장 고르기 ────────────────────────────────────── */

.pick-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.pick:hover { border-color: var(--accent); background: var(--accent-weak); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.pick input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.pick-main { display: flex; align-items: baseline; gap: 8px; }
.pick-name { font-weight: 700; font-size: 16px; }
.pick-title { color: var(--muted); font-size: 14px; }

/*
 * ⚠ 임기가 끝나가는 사람을 **목록에서 숨기지 않는다** — 숨기면 급할 때 못 고른다.
 *   대신 눈에 띄게 붙여 모르고 고르는 일을 막는다.
 */
.pick-tag {
  margin-left: auto;
  padding: 3px 9px; border-radius: 999px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pick-warn { flex-basis: 100%; color: var(--danger); font-size: 13px; }
.pick.is-blocked { opacity: .6; cursor: not-allowed; }
.pick.is-blocked:hover { border-color: var(--line); background: #fff; }

.line-head { margin-top: 22px; }