/* ══ 화면 표준 패턴 — 인사서류(CERTIFICATES) 화면에서 뽑아낸 한 벌 ══════════════════
 *
 * 대표 2026-09-09: 「모든 관리 화면은 인사서류 페이지의 레이아웃 패턴을 유일한 표준으로 삼는다」.
 *
 * 여기 있는 것이 전부다. 새 색 · 새 그림자 · 새 둥근 모서리를 더하지 않는다 —
 * 값은 전부 Admin.html 안에서 쓰던 것을 그대로 옮겨 온 것이다.
 *
 * 쓰는 법(Admin.html 의 도우미가 이 글자들을 찍는다)
 *   renderSection({label, ko, helper, body})   섹션 껍데기
 *   renderTabs(tabs, cur, attr)                탭
 *   renderCards(items)                          A. 카드행 — 한 줄에 넷
 *   renderRows(items)                           B. 리스트행 — 오른쪽 끝 단추 하나
 *   renderEmpty(text)                           빈 상태 — 가운데 회색 한 문장
 *
 * 규칙
 *   · 한 섹션 안에는 카드행 · 리스트행 · 빈 상태 **하나만** 넣는다. 섞지 않는다.
 *   · 헬퍼 글은 한 줄 한 문장. 길어지면 헬퍼가 아니라 항목이다 — 리스트행으로 쪼갠다.
 *   · 붉은색은 섹션 라벨과 주 단추에만. 그 밖의 강조는 굵기로 한다.
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── 섹션 껍데기 ────────────────────────────────────────────────────────────── */
.fp-sec{background:#fff;border:1px solid var(--fp-ink);}
.fp-sec-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--fp-ink);}
.fp-sec-t{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--fp-red);}
.fp-sec-x{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--fp-mute);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

/* ── 탭 ────────────────────────────────────────────────────────────────────── */
.fp-tabs{display:flex;gap:0;border-bottom:1px solid var(--fp-line);
  background:
    linear-gradient(to right, var(--fp-paper), var(--fp-paper)) left center / 14px 100% no-repeat local,
    linear-gradient(to right, var(--fp-paper), var(--fp-paper)) right center / 14px 100% no-repeat local,
    linear-gradient(to right, rgba(14,14,14,0.13), rgba(14,14,14,0)) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(14,14,14,0.13), rgba(14,14,14,0)) right center / 14px 100% no-repeat scroll;
  overflow-x:auto;}
.fp-tabs button{flex:none;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-0.02em;color:var(--fp-mute);padding:12px 20px 11px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:color .15s;}
.fp-tabs button:hover{color:var(--fp-body);}
.fp-tabs button[data-on="1"]{color:var(--fp-ink);font-weight:700;border-bottom-color:var(--fp-red);}
.fp-tabs button i{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;color:#fff;background:var(--fp-red);padding:2px 6px;line-height:1.4;}

/* ── A. 카드행 — 여러 종류 가운데 하나를 골라 새로 시작하는 자리 ───────────────
   인사서류 「증명서 발급」 과 같은 셈이다 — 섹션 안쪽 여백 없이 가장자리에 붙이고,
   칸 너비는 212px 부터 늘어난다(auto-fit). 그래서 넷이면 넷, 일곱이면 4+3, 둘이면 둘이 한 줄을 채운다.
   여백을 주거나 칸 수를 넷으로 못 박으면 마지막 줄에 빈 자리가 남는다. */
.fp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;}
.fp-card{border:1px solid var(--fp-line);background:#fff;padding:17px 18px;text-align:left;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:7px;min-width:0;transition:all .15s ease;}
.fp-card:hover{border-color:var(--fp-ink);box-shadow:0 3px 12px rgba(0,0,0,.06);}
.fp-card-t{font-size:15px;font-weight:800;letter-spacing:-0.025em;color:var(--fp-ink);}
.fp-card-d{font-size:12.5px;color:var(--fp-body-2);line-height:1.65;flex:1;}
.fp-card-go{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:600;color:var(--fp-mute);letter-spacing:0.03em;}
.fp-card:hover .fp-card-go{color:var(--fp-red);}

/* ── B. 리스트행 — 항목마다 액션이 하나인 자리. 오른쪽 끝에 아웃라인 단추 하나 ── */
.fp-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--fp-wash-2);}
.fp-row:last-child{border-bottom:none;}
.fp-row-m{flex:1;min-width:0;}
.fp-row-t{display:block;font-size:13.5px;font-weight:700;letter-spacing:-0.02em;color:var(--fp-ink);}
.fp-row-d{display:block;font-size:12px;color:var(--fp-mute-2);margin-top:4px;line-height:1.6;}
.fp-row-a{flex:none;display:flex;align-items:center;gap:6px;}
.fp-btn{border:1px solid var(--fp-line);background:#fff;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--fp-body);padding:7px 12px;white-space:nowrap;cursor:pointer;text-decoration:none;transition:all .15s;}
.fp-btn:hover{border-color:var(--fp-ink);color:var(--fp-ink);}
.fp-btn-red{border-color:var(--fp-red);background:var(--fp-red);color:#fff;}
.fp-btn-red:hover{border-color:var(--fp-red);color:#fff;}

/* ── 빈 상태 — 박스 안 가운데, 회색 한 문장 ────────────────────────────────── */
.fp-empty{padding:30px 20px;text-align:center;font-size:13px;color:var(--fp-mute);line-height:1.7;}

/* ── 상태 토글(선택 / 전체) — 섹션 머리 오른쪽 ────────────────────────────── */
.fp-seg{display:flex;gap:6px;flex-wrap:wrap;}   /* 칩이 많으면(계약 분류 여섯) 폰에서 다음 줄로 — 한 줄 고정이면 화면을 넘는다(2026-10-08) */
.fp-seg button{border:1px solid var(--fp-line);background:#fff;font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 12px;cursor:pointer;color:var(--fp-body-2);white-space:nowrap;}
.fp-seg button[data-on="1"]{background:var(--fp-ink);border-color:var(--fp-ink);color:#fff;}

/* ── 폼 — 2열 그리드, 라벨 옆에 작은 회색 힌트, 아래 풀폭 레드 단추 하나 ───── */
.fp-form{padding:22px 20px;display:flex;flex-direction:column;gap:16px;max-width:620px;}
.fp-form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fp-form-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}   /* 위치 · 평수 · 연도 처럼 짧은 칸 셋 */
/* 620px 로 묶으면 뭉개지는 폼 — 세금계산서처럼 한 줄에 칸이 셋씩 서는 자리.
   좁은 칸을 늘리려고 쓰는 것이 아니다. 글 칸 하나짜리 폼에는 쓰지 않는다. */
.fp-form-w{max-width:none;}
.fp-hint{color:var(--fp-mute);font-weight:400;}
.fp-help{font-size:11.5px;color:var(--fp-mute);line-height:1.7;margin:6px 0 0;}

/* ── 불러오는 중 · 못 불러옴 — 화면 하나를 통째로 채우는 한 마디 ─────────────
   예전에는 화면마다 제 .card 를 그렸다. 여백이 30 · 34 · 40 으로 제각각이었고,
   글자 크기도 화면마다 달랐다. 실패 줄은 「왜」를 한 줄 더 놓을 자리를 둔다 —
   그 한 줄이 없으면 사람이 할 수 있는 일이 새로고침밖에 없다. */
.fp-state{padding:40px 20px;text-align:center;font-size:13px;color:var(--fp-mute);
  display:flex;flex-direction:column;align-items:center;gap:7px;}
.fp-state b{font-weight:600;color:var(--fp-body);}
.fp-state i{font-style:normal;font-size:12px;color:var(--fp-mute);}
.fp-state-x b{color:var(--fp-warn);}

/* 좁아지는 것은 auto-fit 이 알아서 한다 — 칸 수를 따로 적지 않는다 */
@media(max-width:640px){
  .fp-tabs button{padding:11px 13px;font-size:14px;}
  .fp-row{flex-wrap:wrap;}
  .fp-row-a{width:100%;}
  .fp-row-a .fp-btn{flex:1;text-align:center;}
  .fp-form{padding:18px 16px;}
  .fp-form-2,.fp-form-3{grid-template-columns:1fr;}
}