@font-face {
  font-family: "Pretendard";
  src: url("/static/vendor/fonts/pretendard/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/static/vendor/fonts/pretendard/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/static/vendor/fonts/pretendard/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ═══ 디자인 토큰 — C·D·H 공통 표준 (2026-07-25 일원화 · 2단계①) ═══
     ⚠ 세 저장소(qc-program·doc-manager·qc-accreditation)가 이 블록을 동일한
        값으로 갖는다. 별도 repo라 파일 공유가 안 되므로, 값을 바꾸면 세 저장소를
        직접 동기화할 것. 값 변경은 룩에 직결 — 임의 변경 금지. */
  /* Brand & Ink */
  --color-ink: #111111;
  --color-canvas: #ffffff;
  --color-soft-cloud: #f5f5f5;
  --color-hairline: #cacacb;
  --color-hairline-soft: #e5e5e5;
  /* Text */
  --color-charcoal: #39393b;
  --color-mute: #707072;
  --color-stone: #9e9ea0;
  /* Semantic (제한적으로만 사용) */
  --color-sale: #d30005;
  --color-success: #007d48;
  --color-info: #1151ff;
  /* Radius */
  --radius-none: 0px;
  --radius-md: 24px;
  --radius-lg: 30px;
  --radius-full: 9999px;
  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 24px;
  --space-xxl: 30px;
  --space-section: 48px;

  /* ── 기존 변수명 유지(하위 호환) — 나이키 토큰으로 재매핑 ── */
  --primary: var(--color-ink);
  --primary-hover: var(--color-ink);
  --primary-light: var(--color-soft-cloud);
  /* ⚠ 아래 상태 배지 색상(승인/검토중/반려/임시저장)은 문서 결재 상태를 나타내는
     기능적 색상 — 나이키 리디자인 대상에서 제외, hex 값 그대로 유지 */
  --success-bg: #DCFCE7;
  --success-text: #16a34a;
  --warn-bg: #FEF3C7;
  --warn-text: #D97706;
  --danger-bg: #FEE2E2;
  --danger-text: #E24B4A;
  --neutral-bg: #e8e8e5;
  --neutral-text: #6b7280;
  --border: var(--color-hairline);
  --surface: var(--color-soft-cloud);
  --topnav-h: 52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  background: var(--color-soft-cloud);
  color: var(--color-charcoal);
}

/* select/input/textarea/button은 브라우저 기본값으로 body의 font-family/color를
   상속받지 않는 UA스타일시트 특성 때문에, 명시적으로 지정해줘야 폼 요소에도
   Pretendard가 적용된다(그동안 여러 화면의 <select>가 Arial+검정으로 렌더링되던
   원인). */
select, input, textarea, button {
  font-family: inherit;
  color: inherit;
}

/* ── 상단 네비게이션 ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--topnav-h);
  background: var(--color-ink);
  display: flex; align-items: center; gap: 0;
  padding: 0 16px;
  box-shadow: none;
}

.topnav-brand {
  color: #fff; font-size: 15px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  margin-right: 20px; line-height: 1.2;
}
.topnav-brand small { display: block; font-size: 10px; font-weight: 400; color: var(--color-hairline); }

.topnav-menu { display: flex; align-items: center; gap: 2px; flex: 1; }

/* hover 트리거 컨테이너를 네비바 풀하이트로 → 짧아진 pill(8d57fa8) 아래로 생기던
   흰 dead-zone 제거. 패널 top:var(--topnav-h)이 이 컨테이너 top(y=0) 기준이 되어 바
   하단에 정확히 붙고(흰 틈 0), 제목~패널 마우스 경로가 전부 :hover 요소(및 그 자식
   패널) 안에 들어와 hover가 끊기지 않음. pill 시각(짧은 높이·inset)은 안쪽 .topnav-link가
   그대로 유지 — 여기선 hitbox만 확장(align-items:center로 짧은 pill을 세로 중앙정렬). */
.topnav-item { position: relative; height: var(--topnav-h); display: flex; align-items: center; }

.topnav-link {
  /* QCone C 기준: 세로 padding 8px + height/line-height 미지정 → pill이 바(52px)보다
     낮아져(≈32px) .topnav-menu의 align-items:center로 위아래 검정 여백이 생기는 inset 형태.
     이전엔 height/line-height=바높이라 pill이 상·하단에 딱 붙는 full-height였음. 좌우
     padding(14px)·색·폰트·border-radius(var(--radius-lg)=30px, C와 동일)는 그대로 유지. */
  display: block; padding: 8px 14px;
  color: #b3b3b3; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-lg); cursor: pointer;
  transition: background .15s, color .15s;
}
/* font-weight을 active 여부와 무관하게 항상 700으로 고정 — active 시 500→700으로
   굵기가 바뀌면 같은 텍스트라도 렌더링 폭이 늘어나 뒤따르는 메뉴 항목들이
   오른쪽으로 밀리는 버그가 있었다(필터 바 focus 시 border-width 확대로 밀리던
   버그와 동일 패턴). 폭을 항상 동일하게 유지하기 위해 굵기 차이를 없애고
   배경/글자색만으로 active 상태를 구분한다. */
.topnav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.topnav-link.active { background: #fff; color: #1a1a2e; }

/* nav 카운트 배지 — 원래는 작은 정원(원형) 배지였는데, 자릿수 안정화 작업(min-width 도입)
   과정에서 폭만 고정되고 높이는 그대로 남아 타원형 pill처럼 늘어나 있었다. width=height를
   "99+"(코드상 최대 표시값, 3글자) 기준으로 고정해 진짜 원형으로 복구하면서, 자릿수가
   바뀌어도 폭이 흔들리지 않는 요구사항은 그대로 유지(1~2자리 숫자는 같은 원 안에 가운데
   정렬되어 표시됨). */
.nav-count-badge {
  display: inline-block; width: 20px; height: 20px; line-height: 20px;
  box-sizing: border-box; text-align: center; white-space: nowrap;
  background: #f59e0b; color: #fff; border-radius: 50%;
  font-size: 9px; font-weight: 700;
  margin-left: 4px; vertical-align: middle;
}
.nav-count-badge.danger { background: #ef4444; }
.nav-count-badge-sm {
  display: inline-block; width: 18px; height: 18px; line-height: 18px;
  box-sizing: border-box; text-align: center; white-space: nowrap;
  background: #f59e0b; color: #fff; border-radius: 50%;
  font-size: 8px; font-weight: 700;
  margin-left: 4px; vertical-align: middle;
}
.nav-count-badge-sm.danger { background: #ef4444; }

/* 드롭다운 — QCone C 다크 스타일로 통일(아이콘 없이). C 기준값: 패널 배경 #1c1c1c,
   밝은 하이라인 테두리 rgba(255,255,255,.12), 항목 글자 #b3b3b3 / hover 배경
   rgba(255,255,255,.1)+글자 #fff, 패널 padding 6px, 항목 padding 8px 10px + pill 라운드.
   ⚠ D는 결재함의 검정/네이비 테이블 헤더 위에 드롭다운이 겹쳐 열려 다크-위-다크로
   경계가 뭉개지므로 밝은 1px 테두리로 경계를 확보(어두운 그림자는 다크 위에서 거의
   안 보여 경계를 그림자에 의존 불가). 배경 불투명 + z-index 유지로 뒤 테이블을
   덮음(반투명 금지). 열림/위치(hover 트리거·top/left)는 직전 작업 그대로, 색/테두리/
   패딩만 변경. */
.topnav-dropdown { display: none; }
.topnav-item:hover .topnav-dropdown {
  display: block;
  position: absolute; top: var(--topnav-h); left: 0;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-none); box-shadow: none;
  min-width: 160px; z-index: 9999;
  padding: 6px;
}
.topnav-dropdown a {
  display: block; padding: 8px 10px;
  color: #b3b3b3; font-size: 13px; text-decoration: none;
  border-radius: var(--radius-lg); white-space: nowrap;
}
.topnav-dropdown a:hover { background: rgba(255,255,255,.1); color: #fff; }

.topnav-right {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  color: #9e9ea0; font-size: 12px;
}
.topnav-right span { color: #e5e5e5; font-weight: 600; }
.topnav-right a { color: #9e9ea0; text-decoration: none; font-size: 12px; }
.topnav-right a:hover { color: #fff; }

/* ── 본문 ── */
.page-body {
  margin-top: var(--topnav-h);
  padding: 28px 32px;
  min-height: calc(100vh - var(--topnav-h));
}

.page-title {
  font-size: 18px; font-weight: 700; color: var(--color-ink);
  margin-bottom: 20px;
}

/* ── 카드 ── */
.card {
  background: var(--color-canvas); border-radius: var(--radius-none);
  border: 1px solid var(--color-hairline);
  box-shadow: none;
  padding: 20px;
}

.card-title {
  font-size: 13px; font-weight: 700; color: var(--color-charcoal);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--color-hairline-soft);
}

/* ── 대시보드 그리드 ── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-canvas); border-radius: var(--radius-none);
  border: 1px solid var(--color-hairline);
  box-shadow: none;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-card .label { font-size: 12px; color: var(--color-mute); }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--color-ink); }

/* ── 테이블 ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  background: var(--color-ink); color: #fff;
  padding: 8px 12px; text-align: center; font-weight: 600;
}
.data-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--color-hairline-soft);
  text-align: center;
}
.data-table tr:hover td { background: var(--color-soft-cloud); }

/* 지침서 개정관리 — 결재중(내 차례) 행 강조. "지금 처리해야 할 항목"을 찾게 해주는
   실제 기능적 신호라 강조 자체는 유지하되, 색은 무채색으로(승인완료/반려와 대비되는
   원색은 배지에서만 씀). 기본색(soft-cloud)과 hover색(hairline-soft)을 한 단계
   차이나게 둬서, 기본 행 hover(위 규칙, soft-cloud)와 겹쳐 변화가 안 느껴지는 일이
   없도록 구분. */
.data-table tr.gm-my-turn td { background: var(--color-soft-cloud); }
.data-table tr.gm-my-turn:hover td { background: var(--color-hairline-soft); }

/* ── 상태 배지 (기능적 색상 — 문서 결재 상태, hex 값 유지) ── */
.badge {
  display: inline-block; border-radius: 999px; white-space: nowrap;
  padding: 2px 10px; font-size: 12px; font-weight: 600;
}
.badge-draft   { background: var(--neutral-bg); color: var(--neutral-text); }
.badge-review  { background: var(--warn-bg);    color: var(--warn-text); }
.badge-approved{ background: var(--success-bg); color: var(--success-text); }
.badge-rejected{ background: var(--danger-bg);  color: var(--danger-text); }
/* 상태와 무관한 순수 분류 라벨(문서 카테고리 등) — 무채색 pill */
.badge-neutral-pill { background: var(--color-soft-cloud); color: var(--color-ink); }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-lg); border: none;
  font-size: 13px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .1s;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--color-ink); color: #fff; }
.btn-outline {
  background: var(--color-canvas); color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}
.btn-outline:hover { background: var(--color-soft-cloud); }
.btn-danger { background: var(--danger-bg); color: var(--danger-text); border: 1px solid #fca5a5; }
/* 신임인증 문항번호(카테고리) 필터 버튼 — 텍스트 길이(예: "005" vs "A01" vs "전체")에 따라
   .btn의 가변폭 padding이 그대로 적용되면서 타원 크기가 들쭉날쭉해 보이던 문제(2026-07-17).
   버튼 크기 자체를 고정하고 텍스트만 가운데 정렬한다. */
.filter-btn { width: 56px; height: 32px; padding: 0; justify-content: center; flex-shrink: 0; }

/* ── 로그인 페이지 ── */
.login-wrap {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  background: var(--color-soft-cloud);
}
.login-box {
  background: var(--color-canvas); border-radius: var(--radius-none);
  border: 1px solid var(--color-hairline);
  box-shadow: none;
  padding: 36px 32px; width: 100%; max-width: 360px;
}
.login-title {
  text-align: center; font-size: 18px; font-weight: 700;
  color: var(--color-ink); margin-bottom: 4px;
}
.login-sub {
  text-align: center; font-size: 12px; color: var(--color-stone);
  margin-bottom: 24px;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--color-charcoal); margin-bottom: 4px; }
.form-group input {
  width: 100%; padding: 6px 12px; border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md); font-size: 16px; line-height: 1.5; outline: none;
  background: var(--color-soft-cloud);
  transition: border-color .15s;
}
.form-group input:focus { border-color: var(--color-ink); background: var(--color-canvas); }
.login-btn {
  width: 100%; padding: 11px; background: var(--color-ink); color: #fff;
  border: none; border-radius: var(--radius-lg); font-size: 14px; font-weight: 700;
  cursor: pointer; margin-top: 8px; transition: transform .1s;
}
.login-btn:active { transform: scale(0.98); }
.login-error {
  background: var(--danger-bg); color: var(--danger-text);
  border-radius: var(--radius-none); padding: 8px 12px;
  font-size: 13px; margin-bottom: 16px; text-align: center;
}