/* ============================================================
   base.css — 모든 스킨이 공유하는 골격 (스킨 무관)
   여기엔 '구조'만 둔다. 색·폰트·질감 같은 '외형'은 전부 CSS 변수로
   빼서 스킨 파일(skin-*.css)이 값을 채우고 필요한 효과를 덧붙인다.

   ── 스킨이 정의해야 하는 변수 계약 ──────────────────────────────
   색:  --paper(배경) --paper-2 --card(카드) --ink(글자) --ink-soft(보조글자)
        --line(구분선) --stamp(강조/경고) --ochre --blue --green(의미색)
   폰트: --font-display(제목) --font-num(숫자) --font-type(라벨/타자기) --font-body(본문)
   그 외 스킨 전용 변수는 각 스킨 파일 안에서 자유롭게 추가.
   ============================================================ */

/* 스킨이 값을 안 주더라도 깨지지 않도록 하는 중립 기본값 */
:root {
  --paper:   #f4f4f2;
  --paper-2: #e9e9e6;
  --card:    #ffffff;
  --ink:     #1c1c1c;
  --ink-soft:#6b6b6b;
  --line:    #d4d4d0;
  --stamp:   #b5322a;
  --ochre:   #a9791d;
  --blue:    #33506e;
  --green:   #4f6b34;
  --font-display: system-ui, sans-serif;
  --font-num:     system-ui, sans-serif;
  --font-type:    ui-monospace, monospace;
  --font-body:    system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 폰트 역할 클래스 — 실제 글꼴은 스킨이 결정 */
.font-display { font-family: var(--font-display); }
.font-num     { font-family: var(--font-num); }
.font-type    { font-family: var(--font-type); }

/* 헤딩·이름은 항상 테마 잉크색 */
h1, h2, h3, .font-display { color: var(--ink); }

/* 링크는 글자색을 물려받는다 — 브라우저 기본 파랑/방문 보라가 테마를 뚫고 나오는 것 방지.
   색을 줘야 하는 링크는 .nav-link, .stamp-blue 등 클래스나 인라인 style로 따로 지정. */
a { color: inherit; }

/* 시맨틱 컴포넌트 — 골격만. 외형(그림자/기울기/테이프 등)은 스킨이 덧붙임 */
.scrap {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
}
.stamp {
  display: inline-block;
  font-family: var(--font-type);
  font-weight: 700;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 4px;
  padding: 2px 10px;
  letter-spacing: 1px;
}
.stamp-blue  { color: var(--blue);  border-color: var(--blue); }
.stamp-green { color: var(--green); border-color: var(--green); }

/* ── 배지 ─────────────────────────────────────────────────────────────
   형태가 곧 역할이다. 형태를 보면 무엇을 뜻하는 표시인지 먼저 읽힌다.
     틴트(.badge-green 등)   상태      — 인사상태(재직·입사예정·퇴사예정·퇴사)
     채움(.badge-fill-* )    분류·서열 — SW기술자 등급, KOSA 태그
     채움(.badge-count)      수량      — 하위메뉴의 처리할 건수
     비움(.badge-hold)       판정 못함 — 등급 보류
   목록을 훑을 때 갈려야 하는 값(등급·태그)은 채움, 한 사람 옆에 붙는 값(인사상태)은
   틴트를 쓴다. 색은 스킨 토큰에서만 뽑으므로 스킨을 새로 만들어도 따라온다. */
.badge {
  display: inline-block;
  font-family: var(--font-type);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.75;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  white-space: nowrap;
  color: var(--ink-soft);
  background: none;
}
.badge-green { color: var(--green); border-color: var(--green);
               background: color-mix(in srgb, var(--green) 15%, transparent); }
.badge-blue  { color: var(--blue);  border-color: var(--blue);
               background: color-mix(in srgb, var(--blue) 14%, transparent); }
.badge-ochre { color: var(--ochre); border-color: var(--ochre);
               background: color-mix(in srgb, var(--ochre) 16%, transparent); }
.badge-stamp { color: var(--stamp); border-color: var(--stamp);
               background: color-mix(in srgb, var(--stamp) 14%, transparent); }

/* 채움형 — 목록에서 한눈에 갈려야 하는 값(등급·태그·건수)이 쓴다.
   글자색 --paper 는 밝은 테마에선 밝게, 어두운 테마에선 어둡게 뒤집혀 채운 색 위에서 읽힌다.
   등급과 태그가 같은 색을 나눠 쓴다(초급·상주처=초록 / 중급·본사=파랑 / 특급·미사용=빨강).
   서로 다른 열에 나오므로 헷갈리지 않고, 오히려 화면 전체의 색 수가 줄어 정돈돼 보인다. */
.badge-fill-green, .badge-fill-blue, .badge-fill-ochre, .badge-fill-stamp, .badge-count {
  border-color: transparent;
  color: var(--paper);
}
.badge-fill-green { background: var(--green); }
.badge-fill-blue  { background: var(--blue); }
.badge-fill-ochre { background: var(--ochre); }
.badge-fill-stamp { background: var(--stamp); }
.badge-count { background: var(--stamp); padding: 0 7px; }
/* 보류 = 등급이 아니라 '판정을 못 했다'. 나머지가 다 색을 채우고 있으므로
   혼자 바탕색으로 비워 두어 '아직 값이 없다'가 형태로 읽히게 한다.
   (밝은 테마에선 흰 배지, 어두운 테마에선 카드색 배지가 된다) */
.badge-hold { background: var(--card); color: var(--ink-soft); border-color: var(--line); }
.marker { color: var(--ink); padding: 0 2px; }

.divide-torn { border-bottom: 1px solid var(--line); }
.num-big { line-height: 0.85; }
/* 한글 이름이 글자 단위로 쪼개지지 않게 (홍길\n동 방지) */
.nowrap-name { white-space: nowrap; word-break: keep-all; }

/* 호버 툴팁 (data-tip 속성 → 말풍선) */
.tip { position: relative; }
.tip:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px);
  white-space: pre; z-index: 50;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-type); font-size: .72rem; line-height: 1.5;
  padding: 6px 9px; border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.25);
  pointer-events: none;
}
.tip:hover::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink); z-index: 50; pointer-events: none;
}

/* 데이터 표 (목록 화면 공용) — 스티키 헤더 + 얼룩무늬 + 세로/가로 스크롤 */
.table-scroll { max-height: 620px; overflow: auto; border: 1px solid var(--line); }
/* 대량 행 필터 성능: 열 너비 고정(재측정 제거) + 숨김이 페이지 전체로 전파 안 되게 격리 */
.table-scroll.contain { contain: layout paint; }
.data-table.grid-fixed { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.data-table { border-collapse: collapse; width: 100%; font-family: var(--font-type); font-size: 0.88rem; }
.data-table th, .data-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap; vertical-align: top;
}
/* 긴 값은 이 열에서만 여러 줄로 감싸 행 높이를 늘림 (가로 폭 절약) */
.data-table th.wrap, .data-table td.wrap { white-space: normal; overflow-wrap: anywhere; }
/* 법인카드 표(sortable): 금액 강조(font-num)로 행이 높아져도 다른 셀이 붕 뜨지 않게 세로 가운데 정렬 */
.data-table.sortable td { vertical-align: middle; }
/* 한 칸이 여러 줄이라 행이 높아지는 표에 붙인다(.vmid) — 나머지 셀이 위로 붙는 것 방지 */
.data-table.vmid td { vertical-align: middle; }
.data-table .w-team { min-width: 68px;  max-width: 108px; }
.data-table .w-proj { min-width: 130px; max-width: 185px; }
.data-table .w-note { min-width: 96px;  max-width: 160px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-2); color: var(--ink-soft); font-weight: 700;
}
.data-table tbody tr:nth-child(even) { background: rgba(128,128,128,0.08); }
.data-table td.soft { color: var(--ink-soft); }

/* 폼 필드 (공용) */
.field {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-type);
  font-size: 0.92rem;
  padding: 8px 10px;
}
.field::placeholder { color: var(--ink-soft); opacity: 0.7; }
.field:focus { outline: none; border-color: var(--stamp); }
/* 네이티브 select 박스·옵션도 테마색으로 (다크에서 흰 배경 방지) */
select.field { background-color: var(--card); color: var(--ink); }
select.field option { background-color: var(--card); color: var(--ink); }

/* 검색 콤보박스 (자동완성) */
.combo { position: relative; }
/* 커스텀 콤보 입력창(input.combo)에 드롭다운임을 알리는 ▼ 표시 (resignee의 .combo 래퍼 div엔 적용 안 됨) */
input.combo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.68rem;
  padding-right: 1.7rem;
}
.combo-list {
  position: absolute; z-index: 1000; left: 0; right: 0; top: 100%;
  max-height: 240px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.combo-list[hidden] { display: none; }
.combo-item {
  padding: 7px 10px; cursor: pointer;
  font-family: var(--font-type); font-size: 0.85rem; color: var(--ink);
}
.combo-item.active, .combo-item:hover { background: var(--paper-2); }
.combo-empty { padding: 7px 10px; font-family: var(--font-type); font-size: 0.8rem; color: var(--ink-soft); }
/* 전역 커스텀 콤보(base.html)의 body-부착 메뉴 — 퇴사자 검색 목록과 동일한 외형 (.combo-item/.combo-empty 규칙 공용) */
.combo-menu {
  max-height: 240px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.combo-sub { color: var(--ink-soft); font-size: 0.78rem; margin-left: 3px; }

/* 네비게이션 (구조는 공용, 색은 변수) */
.nav-link {
  font-family: var(--font-type);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--stamp); }

/* ── 공용 서브탭 (페이지 안 하위 메뉴) ── */
.subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.subtab {
  font-family: var(--font-type);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 16px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  white-space: nowrap;
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── 공용 슬라이드 드로어 (오른쪽 패널) ── */
#drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
#drawer-overlay.show { opacity: 1; visibility: visible; }
#drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(600px, 94vw); background: var(--paper); z-index: 91; box-shadow: -6px 0 24px rgba(0,0,0,.22); transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; }
#drawer.open { transform: translateX(0); }
#drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 2px solid var(--line); flex: 0 0 auto; }
#drawer-body { padding: 18px 20px 40px; overflow-y: auto; flex: 1 1 auto; }
#drawer-close { font-family: var(--font-type); font-size: 1.4rem; line-height: 1; cursor: pointer; background: none; border: none; color: var(--ink); padding: 4px 8px; }
@media (prefers-reduced-motion: reduce) { #drawer, #drawer-overlay { transition: none; } }

/* ── 등급 뱃지 (공용, 아티팩트 05 배지 규격) ──────────────────────────── */
.gb {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-family: var(--font-type);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.gb-특급 { background: var(--stamp); color: var(--paper); }
.gb-고급  { background: var(--ochre); color: var(--paper); }
.gb-중급  { background: var(--blue);  color: var(--paper); }
.gb-초급  { background: var(--green); color: var(--paper); }
.gb-보류  { background: var(--card);  color: var(--ink-soft); border-color: var(--line); }