/* 「조직 설정」(org-chart-pane.mjs) — 사람 카드를 끌어다 붙이는 조직도.
   ★색을 새로 정하지 않는다 — 전부 셸의 토큰(--paper/--ink/--line/--muted/--accent/--green)을 쓴다.
     그 토큰들은 `index.html` 의 `prefers-color-scheme:dark` 에서 다시 정의되므로 **어두운 화면이 저절로 따라온다.**
   ★390px 에서도 써야 한다 — 가로로 넘치는 것은 캔버스 «안»에서만 흐르고 본문은 가로로 흐르지 않는다. */

.oc-host{display:block}
.oc{display:flex;flex-direction:column;gap:12px}

/* ── 부서 설정 — 두 칸 ─────────────────────────────────────────────────────── */
/* ★★**셋이 다르게 보인다**(사장님 2026-09-22 「부서 설정을 먼저」·「부서가 없다는 것도 설정할 수 있게」).
     ①아직 안 정함: 두 칸 다 비어 있고 아래 판·대기 줄·저장이 흐리게 **기다린다** — 낱말 없이 묻는 자리다.
     ②부서 없음: 「부서 없음」이 채워지고 판은 종전과 **글자 하나 다르지 않다** — 부서 흔적 0.
     ③부서 있음: 「부서 있음」이 채워지고 대기 줄에 부서를 낳는 빈 칸이 선다.
   ★채워진 칸의 모양은 셸의 고른 선택지(`.choice input:checked+span`)와 같다 — 새 모양을 만들지 않는다. */
.oc-mode{display:inline-flex;align-self:center;gap:3px;padding:3px;border:1px solid var(--line,#ddd4ca);border-radius:999px;background:var(--paper,#fffdf9)}
.oc-mode-btn{
  min-height:34px;padding:0 16px;border:0;border-radius:999px;background:transparent;
  color:var(--muted,#746d6c);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.oc-mode-btn[aria-checked="true"]{background:var(--ink,#252122);color:var(--paper,#fffdf9)}
.oc-mode-btn:disabled{cursor:default}
.oc-mode-btn:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
/* ── 「부서 있음 → 없음」 한 번 묻기 — 조직도에 선 부서가 있을 때만 선다. 일어날 일 한 줄과 단추 둘 ──
   ★되돌리기 어려운 쪽(「부서 없음」)이 붉다 — 못 놓는 자리·끊긴 조직도와 같은 색의 말이다 */
.oc-ask{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;align-self:center;
  max-width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--accent,#db2535);border-radius:14px;
  background:color-mix(in srgb,var(--accent,#db2535) 6%,transparent);
}
.oc-ask[hidden]{display:none}
.oc-ask-say{margin:0 4px 0 0;font-size:13px;color:var(--ink,#252122)}
.oc-ask-btn{
  min-height:34px;padding:0 14px;border:1px solid var(--line,#ddd4ca);border-radius:999px;
  background:var(--paper,#fffdf9);color:var(--ink,#252122);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
.oc-ask-btn--go{border-color:var(--ink,#252122);background:var(--ink,#252122);color:var(--paper,#fffdf9)}
.oc-ask-btn:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
/* 아직 안 정함 — 판은 서 있되 손이 닿지 않는다. 진짜 문은 조각의 `mode === null` 검사다 */
.oc[data-mode="ask"] .oc-canvas,.oc[data-mode="ask"] .oc-tray,.oc[data-mode="ask"] .oc-bar{opacity:.35;pointer-events:none}

/* ── 조직도 판 ───────────────────────────────────────────────────────────── */
/* ★★**틀은 하나뿐이다**(2026-09-22 · 사장님 「사람의 입장에서 ux를 설계해」).
     조직도는 **테두리가 있는 판**이고, 아직 오르지 않은 사람은 **판 없이 그냥 놓인 카드**다.
     같은 점선 상자가 둘이면 처음 보는 사람은 「빈 상자 두 개」로 읽고 어느 쪽에 놓을지 모른다.
   ★★**판은 내용만큼만 크다** — 가로로 화면을 다 쓰고 나무만 가운데 작게 있으면 대부분이 죽은 공간이다.
     한 사람이면 한 사람 크기, 셋이면 셋 크기다. 화면보다 넓어지면 판 «안»에서만 가로로 흐른다. */
.oc-canvas{
  position:relative;align-self:center;width:max-content;max-width:100%;box-sizing:border-box;
  padding:18px 24px;border:1px solid var(--line,#ddd4ca);border-radius:16px;
  background:var(--paper-soft,#faf6f1);overflow-x:auto;-webkit-overflow-scrolling:touch;
}
/* ★★**빈 조직도는 «빈 카드 한 칸»이다**(2026-09-22 · 「최대한 텍스트가 아니고 직관적으로」).
     ·아래에 놓인 사람 카드와 **같은 모양·같은 크기**다 — 「저기 있는 것 하나를 여기에」가
      낱말 없이 읽힌다. 놓으면 그 칸이 그대로 그 사람의 카드가 된다.
     ·놓으면 위에 아무도 없는 사람이 된다. 첫 사람이 그렇게 서고, 그 뒤로는 사람 카드 위에만 놓는다.
     ·불러오는 동안(`data-empty` 가 아직 없다)에도 같은 칸이 서 있어 화면이 튀지 않는다. */
.oc-canvas:not([data-empty="no"])::after{
  content:"";display:block;box-sizing:border-box;width:104px;height:52px;
  border:2px dashed var(--line,#ddd4ca);border-radius:12px;
}
/* 끌고 온 카드가 판 위에 있다 — 놓으면 위에 아무도 없다 */
.oc-canvas[data-over="yes"]{border-color:var(--green,#14785e);background:color-mix(in srgb,var(--green,#14785e) 7%,transparent)}
.oc-canvas[data-over="yes"]:not([data-empty="no"])::after{
  border-color:var(--green,#14785e);background:color-mix(in srgb,var(--green,#14785e) 14%,transparent);
}
/* ★★**놓을 수 없는 자리는 놓기 전에 붉게 닫힌다** — 부서를 빈 자리(위에 아무도 없는 자리)에 대면 이 모양이다.
     종단·DB 의 「꼭대기는 사람」(`TOP_NOT_PERSON`)을 사람이 저장 실패로 겪기 전에 손끝에서 본다. */
.oc-canvas[data-over="no"]{border-color:var(--accent,#db2535);background:color-mix(in srgb,var(--accent,#db2535) 6%,transparent);cursor:not-allowed}
.oc-canvas[data-over="no"]:not([data-empty="no"])::after{
  border-color:var(--accent,#db2535);background:color-mix(in srgb,var(--accent,#db2535) 12%,transparent);
}

/* ★★**위에 아무도 없는 사람이 둘 이상 — 조직도가 끊겨 있다.** 문장이 아니라 «모양»으로 보인다:
     떨어져 나온 덩어리의 머리 카드마다 끊긴 붉은 테두리가 선다. 저장은 그대로 잠긴다. */
.oc-canvas[data-roots="many"]>.oc-tree{gap:28px}
.oc-canvas[data-roots="many"]>.oc-tree>.oc-node>.oc-card,
.oc-canvas[data-roots="many"]>.oc-tree>.oc-node>.oc-unit{
  border:2px dashed var(--accent,#db2535);
}
/* ★위에 사람이 없는 **부서**도 같은 붉은 끊긴 테두리다 — 꼭대기가 부서인 조직도는 저장되지 않는다(부서는 상자라 상자에 선다) */
.oc-canvas[data-top="unit"]>.oc-tree>.oc-node>.oc-unit{border:2px dashed var(--accent,#db2535)}

/* 나무 — 가운데 정렬된 세로 트리. 연결선은 가상 요소로 긋는다(이미지·라이브러리 없음)
   ★★**선은 「거느린다」에만 긋는다** — 사람 → 사람, 사람 → 부서. 부서 → (사람·부서)는 선이 아니라 담김이다(아래 `.oc-unit`).
   ★★**T 자다**(사장님 2026-09-23 「대표 이사 밑에 부서로 연결되는 선이 너무 어색해」). 종전에는 가로선이 윗카드의 바닥에
     붙어 있고 형제 사이 틈(`gap`)마다 끊겨 있어 옷걸이처럼 보였다. 이제 윗카드에서 **반**(13px) 내려와 가로선이 서고,
     가로선은 틈을 건너 **한 줄**로 이어지며, 거기서 다시 반 내려와 각 아랫카드에 닿는다. */
.oc-tree,.oc-kids{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:12px}
.oc-tree{flex-wrap:nowrap}
.oc-kids{padding-top:26px;position:relative}
.oc-node{position:relative;display:flex;flex-direction:column;align-items:center}
/* 윗카드 바닥에서 가로선까지 — 반 */
.oc-node>.oc-kids::before{content:"";position:absolute;top:0;left:calc(50% - 1px);width:2px;height:13px;background:var(--line,#ddd4ca)}
/* 가로선에서 각 아랫카드까지 — 나머지 반 */
.oc-kids>.oc-node::before{content:"";position:absolute;top:-13px;left:calc(50% - 1px);width:2px;height:13px;background:var(--line,#ddd4ca)}
/* 형제들을 잇는 가로선 — 틈(`gap` 12px)의 절반씩을 양쪽으로 더 그어 한 줄이 된다. 양 끝은 반만 긋는다 */
.oc-kids>.oc-node::after{content:"";position:absolute;top:-14px;height:2px;background:var(--line,#ddd4ca);left:-6px;right:-6px}
.oc-kids>.oc-node:first-child::after{left:50%}
.oc-kids>.oc-node:last-child::after{right:50%}
.oc-kids>.oc-node:only-child::after{display:none}

/* ── 부서 상자 — **「속한다」는 선이 아니라 담김이다** ─────────────────────────────
   부서 카드가 상자의 머리이고, 그 부서에 속한 사람·부서는 상자 «안»에 선 없이 선다.
   ★비어 있는 부서는 머리 카드 하나가 곧 상자다 — 대기 줄의 부서 카드와 같은 각진 모양이라 같은 것으로 읽힌다.
   ★놓기 표시(초록·붉음)는 카드가 아니라 **상자 전체**에 선다 — 「이 안에 들어간다」가 모양으로 보인다. */
.oc-unit{
  display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;min-width:104px;
  border:1px solid var(--line,#ddd4ca);border-radius:5px;background:var(--paper-soft,#faf6f1);
  box-shadow:0 1px 2px rgba(0,0,0,.05);transition:border-color .12s,box-shadow .12s;
}
/* 머리 카드 — 상자의 테두리를 빌려 쓰고 자기 테두리는 두지 않는다(겹치면 두 줄이 된다) */
.oc-unit>.oc-card{max-width:none;border-color:transparent;border-radius:4px;box-shadow:none;background:transparent}
.oc-unit>.oc-members{position:relative;list-style:none;margin:0;padding:10px;display:flex;justify-content:center;align-items:flex-start;gap:12px}
/* 담긴 것과 머리 사이의 얇은 선 — 「이 밑은 이 부서 안」 */
.oc-unit>.oc-members::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:var(--line,#ddd4ca)}
/* 상자 안의 부서(부서 안 부서)는 바탕을 한 단 더 눌러 안팎이 갈린다 */
.oc-members .oc-unit{background:color-mix(in srgb,var(--ink,#252122) 4%,var(--paper-soft,#faf6f1))}
/* 끌고 있는 동안 상자 전체가 놓을 자리다 — 사람 카드와 같은 손 모양 */
.oc[data-dragging="yes"] .oc-unit{cursor:copy}
/* 들고 있는 부서는 상자째 흐려진다 — 머리 카드만 흐리면 안의 사람들이 남아 있는 것처럼 보인다 */
.oc-unit:has(>.oc-card[data-dragging="yes"]){opacity:.35}
.oc-unit>.oc-card[data-dragging="yes"]{opacity:1}
/* 놓기 표시 — 사람 카드의 초록·붉음과 같은 색·같은 두께 */
.oc-unit[data-over="yes"]{border-color:var(--green,#14785e);box-shadow:0 0 0 3px color-mix(in srgb,var(--green,#14785e) 22%,transparent)}
.oc-unit[data-over="no"]{border-color:var(--accent,#db2535);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#db2535) 22%,transparent);cursor:not-allowed}

/* ── 사람 카드 ───────────────────────────────────────────────────────────── */
.oc-card{
  display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  min-width:104px;max-width:150px;min-height:52px;padding:8px 12px;
  border:1px solid var(--line,#ddd4ca);border-radius:12px;background:var(--paper,#fffdf9);color:var(--ink,#252122);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05);transition:border-color .12s,transform .12s,box-shadow .12s;
}
.oc-card:focus-visible{outline:2px solid var(--ink,#252122);outline-offset:2px}
.oc-card-name{font-size:14px;font-weight:700;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.oc-card-pos{font-size:11px;color:var(--muted,#746d6c);line-height:1.2}
.oc-card[data-dragging="yes"]{opacity:.35}
.oc-card[data-over="yes"]{border-color:var(--green,#14785e);box-shadow:0 0 0 3px color-mix(in srgb,var(--green,#14785e) 22%,transparent)}
/* 끌고 있는 동안 사람 카드는 전부 **놓을 수 있는 자리**다 — 아래 사람 밑으로 가면 그가 내 자리로 올라온다 */
.oc[data-dragging="yes"] .oc-card:not([data-dragging="yes"]){cursor:copy}
/* 놓으면 꼭대기가 부서가 되는 자리 — 손을 놓기 전에 붉다 */
.oc-card[data-over="no"]{border-color:var(--accent,#db2535);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#db2535) 22%,transparent);cursor:not-allowed}

/* ── 부서 카드 — **모양이 다르다.** 각진 모서리·짙은 바탕·직위 줄 없음. 낱말 없이 사람과 갈린다 ── */
.oc-card[data-node="unit"]{position:relative;border-radius:5px;background:var(--paper-soft,#faf6f1)}
/* 대기 줄의 부서에만 지우는 × 가 붙는다 — 조직도에 올라가 있으면 먼저 내려야 지울 수 있다 */
.oc-x{
  position:absolute;top:-8px;right:-8px;width:20px;height:20px;padding:0;display:grid;place-items:center;
  border:1px solid var(--line,#ddd4ca);border-radius:50%;background:var(--paper,#fffdf9);color:var(--muted,#746d6c);
  font-size:14px;line-height:1;cursor:pointer;
}
.oc-x:hover{border-color:var(--ink,#252122);color:var(--ink,#252122)}
.oc-x:focus-visible{border-color:var(--ink,#252122);color:var(--ink,#252122);outline:2px solid var(--ink,#252122);outline-offset:2px}
.oc-ghost .oc-x{display:none}
/* ★★**부서를 낳는 빈 칸** — 조직도의 빈 칸과 같은 점선·같은 크기다. 「여기에 하나 들어간다」가 같은 말로 읽힌다 */
.oc-add{
  flex-direction:row;gap:5px;border:2px dashed var(--line,#ddd4ca);background:transparent;color:var(--muted,#746d6c);
  box-shadow:none;cursor:pointer;font:inherit;text-decoration:none;
}
/* ★★**사람을 낳는 칸** — 명부에 아무도 없을 때 대기 줄에 서는 `+ 구성원`. `+ 부서` 와 같은 점선·같은 크기·같은 회색이고
     누르면 「구성원과 인사」로 간다(링크). 붉음 0·문장 0 — 사람이 없는 것은 잘못이 아니라 아직 안 온 것이다 */
.oc-add--people{text-decoration:none}
.oc-add .oc-card-name{font-weight:700;color:inherit}
.oc-add-plus{font-size:18px;line-height:1}
.oc-add:hover,.oc-add:focus-visible{border-color:var(--ink,#252122);color:var(--ink,#252122);outline:none}
/* 누르면 그 칸이 이름 칸이 된다 — 칸의 크기는 그대로다 */
.oc-card--new{padding:6px 8px;border-style:solid;border-color:var(--ink,#252122);cursor:text}
.oc-card--new input{
  width:100%;min-width:0;padding:0;border:0;background:transparent;color:var(--ink,#252122);
  font:inherit;font-size:14px;font-weight:700;text-align:center;outline:none;
}
.oc-card--new input::placeholder{color:var(--muted,#746d6c);font-weight:400}

/* 손에 붙어 다니는 그림자 카드 — body 에 붙으므로 조상 overflow 에 잘리지 않는다.
   ★선택자가 둘인 이유: 부서 카드(`.oc-card[data-node="unit"]`)가 × 를 앉히려고 `position:relative` 를 갖는데,
     그 특이도(0,2,0)가 `.oc-ghost`(0,1,0)를 이겨 **부서를 들면 그림자가 화면 밖으로 떨어졌다**(2026-09-22 실측).
   ★★**답은 그림자가 말한다.** 그림자가 대상을 덮으므로 대상의 표시는 숨는다 — 초록·붉음은 여기서 켜진다.
     ·`data-can="none"`: 아무 데도 아니다 — 초록도 붉음도 없다(놓으면 아무 일도 없다)
     ·`data-can="yes"` : 여기 들어간다 — 초록
     ·`data-can="no"`  : 못 들어간다 — 붉은 끊긴 테두리(끊긴 조직도와 같은 말)
   ★초록은 「된다」에만 쓴다 — 못 놓는 자리와 아무 자리도 아닌 곳에는 초록이 없다(2026-09-22 실측 뒤 고침). */
.oc-card.oc-ghost{
  position:fixed;z-index:9999;pointer-events:none;margin:0;
  transform:rotate(-2deg) scale(1.04);opacity:.95;box-shadow:0 12px 28px rgba(0,0,0,.22);
  border-color:var(--ink,#252122);
}
.oc-card.oc-ghost[data-can="yes"]{border-color:var(--green,#14785e);box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--green,#14785e) 28%,transparent)}
.oc-card.oc-ghost[data-can="no"]{
  border:2px dashed var(--accent,#db2535);opacity:.8;
  box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--accent,#db2535) 28%,transparent);
}
/* ★밖이다 — 놓으면 없어진다(부서). Dock 에서 아이콘을 끌어냈을 때처럼 카드가 흐려지고 작아지며 «사라지는 중»이다. 낱말 0.
   다시 안으로 들어오면 원래 그림자로 돌아온다 */
.oc-card.oc-ghost[data-can="gone"]{
  opacity:.35;border:2px dashed var(--muted,#746d6c);box-shadow:none;filter:grayscale(1);
  transform:rotate(-2deg) scale(.88);transition:opacity .12s,transform .12s;
}

/* ── 아직 오르지 않은 사람들 — **상자가 아니다.** 카드가 판 아래에 그냥 놓여 있다 ──── */
.oc-tray{
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;justify-content:center;padding:8px;
  border:1px dashed transparent;border-radius:14px;background:transparent;
  transition:border-color .12s,background .12s;
}
/* ★아무도 기다리지 않으면 **자리째 사라진다** — 빈 점선 띠를 조직도 밑에 남기지 않는다 */
.oc-tray:not([data-empty="no"]){display:none}
/* ★카드를 손에 들고 있는 동안에만 «다시 내려놓는 자리»로 모습을 드러낸다 — 평소엔 테두리가 없다.
   ★평소에도 같은 두께의 투명 테두리를 두르므로 **드러날 때 화면이 밀리지 않는다.** */
.oc[data-dragging="yes"] .oc-tray{display:flex;min-height:52px;border-color:var(--line,#ddd4ca)}
/* ★대기 줄도 «들어갈 수 있는 자리»라 초록이다 — 붉음은 「못 놓는다」 하나에만 쓴다(2026-09-22 색의 말을 하나로) */
.oc[data-dragging="yes"] .oc-tray[data-over="yes"]{border-color:var(--green,#14785e);background:color-mix(in srgb,var(--green,#14785e) 7%,transparent)}

/* ── 아래 줄 — 고른 사람의 기본 결재선과 저장 ────────────────────────────── */
.oc-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.oc-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:32px;flex:1 1 220px}
.oc-line[data-shown="no"]{visibility:hidden}
.oc-chip{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line,#ddd4ca);background:var(--paper,#fffdf9);font-size:13px;font-weight:700;
}
.oc-chip--from{border-color:var(--ink,#252122)}
.oc-arrow{color:var(--muted,#746d6c);font-size:13px}

.oc-save{
  flex:0 0 auto;min-height:44px;padding:0 22px;border:0;border-radius:12px;
  background:var(--ink,#252122);color:var(--paper,#fffdf9);font-size:15px;font-weight:700;cursor:pointer;
}
.oc-save:disabled{opacity:.38;cursor:default}
/* 저장이 됐다 — 문장 대신 단추가 잠깐 초록으로 눌렸다 돌아온다(사장님 2026-09-23 「저장했습니다 ← 삭제」) */
.oc-save{transition:background .35s}
.oc-save[data-done="yes"]{background:var(--green,#14785e);transition:background .1s}

.oc-say{margin:0;font-size:13px;min-height:18px}
.oc-say[data-tone="say"]{color:var(--accent,#db2535)}
.oc-say[data-tone="hint"]{color:var(--muted,#746d6c)}

/* 불러오는 중에는 빈 칸이 흐리게 서 있다 — 자리가 그대로라 화면이 튀지 않는다 */
.oc[data-phase="loading"] .oc-canvas,.oc[data-phase="idle"] .oc-canvas,
.oc[data-phase="loading"] .oc-mode,.oc[data-phase="idle"] .oc-mode{opacity:.4}

@media(max-width:600px){
  .oc-canvas{padding:14px 16px}
  /* ★빈 칸도 좁은 화면의 카드와 **같은 크기**로 줄인다 — 모양이 짝을 잃으면 뜻이 사라진다 */
  .oc-canvas:not([data-empty="no"])::after{width:92px;height:48px}
  .oc-card{min-width:92px;max-width:128px;min-height:48px;padding:7px 10px}
  .oc-card-name{font-size:13px}
  .oc-tree,.oc-kids,.oc-unit>.oc-members{gap:8px}
  .oc-kids>.oc-node::after{left:-4px;right:-4px}
  .oc-unit{min-width:92px}
  .oc-unit>.oc-members{padding:8px}
  .oc-unit>.oc-members::before{left:8px;right:8px}
  .oc-mode-btn{min-height:32px;padding:0 13px}
  .oc-bar{flex-direction:column;align-items:stretch}
  .oc-save{width:100%}
}

.oc-unplaced{display:flex;flex-wrap:wrap;gap:6px 15px;align-items:baseline;font-size:13px;color:var(--muted,#77706c);margin:16px 0}
.oc-unplaced-count{font-size:14px;color:var(--ink,#252122)}
.oc-pending{font-size:12px}.oc-pending[hidden]{display:none}

/* 0303 — 인사담당(사람 배치만): 부서 설정은 서지 않고, 무엇을 할 수 있는지 한 줄이 선다 */
.oc-mode[hidden],.oc-place-note[hidden]{display:none}
.oc-place-note{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--muted,#77706c)}
/* 결재라인 이름표 — 칸 이름표와 같은 크기(13px · 흐린 글자) · 390 에서도 줄바꿈해 읽힌다 */
.oc-line-label{flex:0 0 auto;margin-right:4px;font-size:13px;font-weight:500;color:var(--muted,#77706c);white-space:nowrap}
/* 잠긴 「저장」 — 흐림 대신 읽히는 잠김 색 · 칸 테두리는 인사 화면 토큰(두 테마 모두 AA) */
.oc-save:disabled{opacity:1;background:var(--paper-soft,#faf6f1);color:var(--muted,#77706c);border:1px solid var(--hr-field-line,#8c827b)}
.oc-save[data-done="yes"]{color:#fff}