/* =============================================================
   finish.css — 공문 화면의 마감층 (2026-08-26)

   업무 포털(app.kupst.org)을 다시 그린 뒤 「나머지 화면도 맞춰 달라」는 요청으로
   만들었다. 포털의 `public/portal-ui.css` 와 **같은 규칙**이다 — 두 시스템을
   나란히 놓았을 때 같은 얼굴이어야 한다.

   ## ⚠ `app.css` 를 고치지 않았다

   그 파일은 1,700줄이고 결재·서명·PDF 화면의 자리를 전부 잡고 있다. 보기를
   고치려고 거기 들어가면 **결재 화면이 깨질 위험**을 지불하게 된다. 그래서
   `app.css` **뒤에** 얇게 덮는다 — 이 파일만 빼면 그대로 돌아온다.

   ## ⚠ 어두운 벌을 만들지 않는다

   `layout.php` 가 `color-scheme: light` 로 못박아 두었다. 결재 화면은 종이에
   가까운 흰 바탕을 전제로 잡혀 있다 — 여기서 어둡게 뒤집으면 서명·도장 자리가
   먼저 깨진다. 포털은 어두운 벌이 있지만 **이 앱은 일부러 밝은 쪽만** 둔다.

   색은 조합 홈페이지 값 그대로다 — 주색 #3074f0 · 보조 #309ff0 · 짙은 남색 #2a4886.
   ============================================================= */

:root {
  --f-line-soft: #eef2f9;
  --f-accent-2: #309ff0;
  --f-shadow: 0 1px 2px rgba(23,48,105,.06), 0 1px 3px rgba(23,48,105,.05);
  --f-shadow-md: 0 2px 4px rgba(23,48,105,.05), 0 8px 20px -10px rgba(23,48,105,.20);
  --f-ring: 0 0 0 3px rgba(48,116,240,.26);
  --f-dim: #5c6a84;
}

/* ── 바탕 ────────────────────────────────────────────────────── */
body {
  background-color: #f1f4fa;
  background-image:
    radial-gradient(1100px 340px at 50% -170px, rgba(48,116,240,.10), transparent 70%);
  background-repeat: no-repeat;
  letter-spacing: -.011em;
}

/* 결재 금액·건수처럼 줄줄이 서는 숫자는 자리폭을 고정한다 */
.doc-amount, .counter, .line-no, table { font-variant-numeric: tabular-nums; }

/* ── 머리띠 ───────────────────────────────────────────────────
   ⚠ 어둡게 칠하지 않는다 — 로고 그림 안에 조합 이름이 들어 있어 남색 바탕에서
     글자가 사라질 수 있다. 대신 위에 가는 조합색 선을 얹는다. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  padding: 0;
  border-bottom: 1px solid var(--f-line-soft);
  background: var(--card);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  box-shadow: 0 1px 0 rgba(23,48,105,.04), 0 6px 20px -18px rgba(23,48,105,.5);
}
.site-head::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 45%, var(--f-accent-2));
}
.site-head > .wrap { padding-top: 12px; padding-bottom: 12px; }
.brand-service {
  padding: 3px 9px; border-left: 0; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent-deep);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
}

/* ── 카드 ─────────────────────────────────────────────────────
   1px 테두리만으로는 납작하다. 두 겹 그림자로 살짝 띄운다. */
.card {
  border-color: var(--f-line-soft);
  border-radius: 16px;
  box-shadow: var(--f-shadow);
}
.card > h2 { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }

/* 구역 제목 — 포털과 같이 왼쪽에 색 막대를 세운다 */
.card > h2::before {
  content: ''; display: inline-block; vertical-align: -1px;
  width: 3px; height: 13px; border-radius: 2px; margin-right: 8px;
  background: linear-gradient(180deg, var(--accent), var(--f-accent-2));
}

/* ── 알림 띠 ──────────────────────────────────────────────────
   ⚠ 색만으로 말하지 않는다 — 왼쪽 굵은 선이 종류를 한 번 더 말한다. */
.note { border-radius: 12px; border-left-width: 4px; box-shadow: var(--f-shadow); }
.note-info  { border-left-color: var(--accent); }
.note-warn  { border-left-color: #d97706; }
.note-error { border-left-color: #dc2626; }

/* ── 단추 ─────────────────────────────────────────────────────
   ⚠ 터치 크기(min-height 50px)는 건드리지 않는다 — 결재자 연령대를 고려한
     값이다(화면설계서 §6). 여기서는 **색과 그림자만** 다듬는다. */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #000));
  box-shadow: 0 1px 2px rgba(23,48,105,.2), 0 8px 18px -10px var(--accent);
  transition: filter .14s ease, box-shadow .14s ease, transform .14s ease;
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 2px 4px rgba(23,48,105,.22), 0 12px 24px -12px var(--accent);
}
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  box-shadow: var(--f-shadow);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--f-shadow-md);
}

/* ── 표 ───────────────────────────────────────────────────────── */
.tbl th, .mini-table th, .send-table th {
  font-size: 12px; font-weight: 800; color: var(--f-dim); letter-spacing: .03em;
}
.tbl td, .mini-table td, .send-table td { border-bottom-color: var(--f-line-soft); }
.tbl tbody tr:hover td, .doc-list li:hover {
  background: color-mix(in srgb, var(--accent-weak) 45%, transparent);
}

/* ── 표시(뱃지) ────────────────────────────────────────────────── */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: -.01em; }

/* ── 입력 ─────────────────────────────────────────────────────
   ⚠ 높이(48px)는 그대로 둔다. 모서리와 초점 표시만 맞춘다. */
input[type=text], input[type=search], input[type=email], input[type=tel],
input[type=number], input[type=date], select, textarea {
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--f-ring);
}

/* 손이 닿는 자리는 눈에도 보이게 */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--f-ring); border-radius: 10px;
}

/*
 * ⚠ 움직임을 싫다고 한 사람에게는 움직이지 않는다. 접근성 설정이다.
 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/*
 * 손입력 수신처 표시 (2026-08-27 사용자 요청).
 *
 * 🚨 「분명히 수동으로 지부장에게 발송했는데 지금 문서를 보면 사측 메일이 버젓이
 *    들어가 있어. 나중에 이렇게 되면 분란의 소지가 돼」
 *
 * ⚠ **경고색(빨강)을 쓰지 않는다.** 손입력은 예외가 아니라 일상이다 — 연구회·
 *   공제회처럼 주소록에 없는 곳이 절반이다(§발송). 빨갛게 칠하면 절반이 늘 빨갛고,
 *   늘 빨간 자리는 아무도 안 본다. **사실을 적는 것이지 틀렸다고 말하는 것이 아니다.**
 */
.tag-manual {
  display: inline-block; padding: 1px 7px; margin-left: 4px;
  border-radius: 4px; background: #fff7e6; color: #92600e;
  border: 1px solid #f2d9a8; font-size: 12px; font-weight: 700;
  vertical-align: 1px;
}

/*
 * 전체 문서함 아래의 분류 (2026-08-27). 갈래 탭보다 한 겹 안쪽이라 작고 조용하게 —
 * 같은 무게로 그리면 탭이 두 줄로 보여 어느 쪽이 상위인지 알 수 없다.
 */
.tabs-cat { margin-top: -2px; font-size: 13px; }
.tabs-cat .tab { padding: 5px 10px; }
.tabs-cat .tab .muted { margin-left: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }