/* 인사(hr) 화면 — 토큰·카드·헤더는 ../style.css 를 그대로 쓰고 여기엔 이 화면 것만 둔다 */

.hr-shell { max-width: none; padding: 28px 32px 64px; }

.hr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hr-top .userbar { margin: 0; }
.hr-back {
  color: var(--text-sub);
  font-weight: 600;
  text-decoration: none;
}
.hr-back:hover { color: var(--accent); }

.hr-head h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hr-sub { margin: 8px 0 0; color: var(--text-sub); font-size: 14px; }

.hr-gate-link { text-align: center; text-decoration: none; }

.hr-panel { display: flex; flex-direction: column; }
.hr-panel .group-head { flex-wrap: wrap; }
.hr-hint, .hr-note { margin: -4px 0 14px; color: var(--text-dim); font-size: 12px; }
.hr-note { margin: 14px 0 0; }

.hr-btn {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.hr-btn:hover { border-color: var(--accent); }

.hr-save { font-size: 12px; color: var(--text-dim); }
.hr-save.error { color: #e03131; }
.hr-count { font-size: 12px; color: var(--text-dim); }

/* ── 구성원 알약(조직도 안) ── */
.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px rgba(31, 35, 41, 0.04);
  transition: border-color .12s, box-shadow .12s, opacity .12s;
}
.chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.chip.dragging { opacity: .4; }
.chip-name { font-weight: 600; }
.chip-rank { font-size: 11px; color: var(--text-dim); }

.ava {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--surface-2);
}
.ava img { width: 100%; height: 100%; object-fit: cover; }
.chip .ava { width: 24px; height: 24px; font-size: 11px; }

/* 놓을 수 있는 자리 — 끌고 있을 때만 테두리가 살아난다 */
[data-unit] { transition: background .12s, border-color .12s; }
.drop-over { background: var(--accent-soft) !important; border-color: var(--accent) !important; }

/* ── 조직도 ── */
.org { display: flex; flex-direction: column; gap: 26px; }
.org-company { display: flex; flex-direction: column; gap: 14px; }
.org-company-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.org-company-head .tool { margin-left: auto; }
.unit-code {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.parts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.part {
  padding: 8px;
  background: var(--surface-2);
  border-radius: 8px;
}
.part-head .unit-name { font-size: 12px; }
.part .unit-tools { background: linear-gradient(90deg, rgba(244, 245, 248, 0), var(--surface-2) 12px); }
/* 대표이사·경영진 — 맨 위 한 줄 */
.org-top { display: flex; justify-content: center; }
.org-top .unit { width: min(520px, 100%); }
.org-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}

.unit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.unit-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.unit-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: text;
}
.unit-count { flex: none; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
/* 편집 버튼은 마우스를 올렸을 때만 이름 위에 겹쳐 뜬다(자리를 차지하면 좁은 칸에서 이름이 줄바꿈된다) */
.unit-tools {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.unit-head:hover .unit-tools, .team-head:hover .unit-tools, .unit-tools:focus-within { opacity: 1; pointer-events: auto; }
.team-head { position: relative; }
.tool {
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 6px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.tool:hover { color: var(--accent); background: var(--accent-soft); }
.tool.del:hover { color: #e03131; background: #fff0f0; }

.name-input {
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 그룹 자체에 놓인 사람(그룹장 등) */
.unit > .hr-chips {
  padding: 8px;
  border: 1px dashed transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.unit > .hr-chips:empty::before,
.team .hr-chips:empty::before,
.part .hr-chips:empty::before {
  content: "여기에 놓기";
  color: var(--text-dim);
  font-size: 11px;
  align-self: center;
  padding-left: 4px;
}

/* 그룹 안 팀은 가로로 나란히(그룹 상자의 --n = 팀 수) */
.teams { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; margin-top: 10px; align-items: start; }
.team {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.team-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.team-head .unit-name { font-size: 13px; color: var(--text-sub); }
.team .hr-chips { padding: 2px; border-radius: 8px; }

.add-team {
  margin-top: 8px;
  width: 100%;
  font: inherit;
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.add-team:hover { color: var(--accent); border-color: var(--accent); }

/* ── 구성원 카드 ── */
.hr-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hr-search {
  flex: 1 1 260px;
  font: inherit;
  color: var(--text);
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.hr-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hr-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.hr-seg button {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  padding: 6px 11px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.hr-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.mcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: grab;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mcard:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.mcard.dragging { opacity: .5; }
.mcard-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mcard .ava { width: 52px; height: 52px; font-size: 19px; }
.mcard-who { min-width: 0; }
.mcard-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcard-id { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 8px;
  border-radius: 999px;
}
.mcard-unit { font-size: 12px; color: var(--text-sub); }
.mcard-unit.none { color: var(--text-dim); }
.mcard-rows { display: grid; gap: 5px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.mrow { display: flex; gap: 8px; min-width: 0; }
.mrow dt { flex: none; width: 76px; color: var(--text-dim); white-space: nowrap; }
.mrow dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sub); }
.mrow a { color: var(--text-sub); text-decoration: none; }
.mrow a:hover { color: var(--accent); }
.mrow .recent { color: var(--positive); font-weight: 600; }

.hr-empty { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--text-dim); }

@media (max-width: 640px) {
  .hr-shell { padding: 24px 16px 40px; }
  .hr-head h1 { font-size: 24px; }
  .unit-tools { opacity: 1; pointer-events: auto; }
}

/* ── 계층 선 ──
   경영진 → 그룹: 경영진 박스 아래에서 내려온 선이 가로로 갈라져 각 그룹 위로 떨어진다.
   그룹 안(팀·파트)은 상자가 이미 겹쳐 있어 선을 그리지 않는다. */
.org { --line: #c9ced8; }
.org-company { gap: 0; }
.org-company-head { margin-bottom: 14px; }
.org-top { position: relative; }
.org-top::after {               /* 경영진 박스 아래 세로선 */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  height: 16px;
  border-left: 2px solid var(--line);
}
.org-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.org-groups > .unit { position: relative; flex: var(--n, 1) 1 calc(var(--n, 1) * 200px); max-width: none; min-width: 0; }
.org-groups > .unit::before {  /* 각 그룹 위로 떨어지는 선 */
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  height: 16px;
  border-left: 2px solid var(--line);
}
.org-groups > .unit::after {   /* 그룹들을 잇는 가로선 — 이웃과 틈(14px)의 절반씩 이어 붙인다 */
  content: "";
  position: absolute;
  top: -17px;
  left: -8px;
  right: -8px;
  border-top: 2px solid var(--line);
}
.org-groups > .unit:first-child::after { left: 50%; }
.org-groups > .unit:last-child::after { right: 50%; }
.org-groups > .unit:only-child::after { display: none; }
/* 경영진 칸이 없는 회사는 위 선을 그리지 않는다 */
.org-company:not(:has(.org-top)) .org-groups { margin-top: 0; }
.org-company:not(:has(.org-top)) .org-groups > .unit::before,
.org-company:not(:has(.org-top)) .org-groups > .unit::after { display: none; }

@media (max-width: 640px) {
  /* 좁은 화면에서는 그룹이 세로로 쌓이므로 가로 가지선은 뺀다 */
  .org-groups > .unit::after { display: none; }
}

.hr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* 새로고침 버튼 — 다른 대시보드와 같은 모양 */
.refresh-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: #4263eb; color: #fff;
  border: 0; border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
}
.refresh-btn:hover { background: #3651c8; transform: translateY(-1px); }
.refresh-btn:active { transform: translateY(0); }
.refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.refresh-btn .refresh-icon { width: 14px; height: 14px; transition: transform 0.6s; }
.refresh-btn.spinning .refresh-icon { transform: rotate(360deg); }

/* ── 팀·파트 끌어 옮기기 ── */
[data-drag-unit] { cursor: grab; }
[data-drag-unit]:active { cursor: grabbing; }
.box-dragging { opacity: .4; }
.team, .part { position: relative; }
.drop-before::before, .drop-after::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 2;
}
.drop-before::before { top: -6px; }
.drop-after::after { bottom: -6px; }
.drop-into { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* 화면이 좁으면 그룹 안 팀을 다시 세로로 */
@media (max-width: 900px) {
  .teams { grid-template-columns: 1fr; }
  .org-groups > .unit { flex-basis: 260px; }
}
.members.drop-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* ── 인원 한눈에 ── */
.hr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat span { font-size: 12px; font-weight: 600; color: var(--text-sub); }
.stat b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat b small { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
.stat.total { background: var(--accent); border-color: var(--accent); }
.stat.total span, .stat.total b, .stat.total b small { color: #fff; }
.stat.total b small { opacity: .75; }
.stat.dim b { color: var(--text-dim); }

/* ── 한눈에 — 좌우 여백 줄이기(뒤에 둬서 위 값을 덮는다) ──
   팀 하나를 136px 로 잡아 1600px 화면에서 엑스와이지 그룹(팀 11개)이 한 줄에 들어가게 한다 */
.hr-shell { padding-left: 20px; padding-right: 20px; }
.org-groups { gap: 10px; }
.org-groups > .unit { padding: 10px 8px; flex-basis: calc(var(--n, 1) * 136px); }
.org-groups > .unit::after { left: -6px; right: -6px; }
.teams { gap: 5px; margin-top: 8px; }
.team { padding: 7px 6px; }
.team-head { margin-bottom: 4px; }
.parts { gap: 4px; margin-top: 4px; }
.part { padding: 6px 5px; }
.team .hr-chips, .part .hr-chips { gap: 4px; }
.team .chip, .part .chip { padding: 2px 8px 2px 2px; gap: 4px; }
@media (max-width: 900px) {
  .org-groups > .unit { flex-basis: 260px; }
}
/* 좁은 칸에서도 이름이 두 줄로 꺾이지 않게 — 넘치면 직책 글자가 먼저 줄어든다 */
.chip { max-width: 100%; white-space: nowrap; overflow: hidden; }
.chip-name { flex: none; }
.chip-rank { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── 미배치(있을 때만) ── */
.hr-tray {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
}
.hr-tray[hidden] { display: none; }
.hr-tray-head { margin-bottom: 8px; color: var(--text-sub); font-weight: 600; }
.hr-tray-head b { color: var(--accent); }
.hr-tray-hint { font-weight: 400; font-size: 12px; color: var(--text-dim); }