/* ============================================================================
   orgchart.css — 조직도 전용. includes/officers_view.php 가 내는 마크업만 다룬다.

   공개(about.php: layout_head css 옵션)와 관리자(admin/index.php: ../assets/css/orgchart.css)가
   같은 파일을 싣는다. 관리자는 styles.css 를 안 싣으므로 **모든 변수에 hex 폴백**을 둔다.

   모양 셋(officers_chart_layout 이 정한다)
     .orgchart--list   가형 — 회장 가로 카드 + 2열 카드. 선 없음. 얼굴 있음
     .orgchart--dept   나형 — 회장 → 부회장 줄 → 가로선 → 기둥(분과 상자 + 구성원). 얼굴 없음
     .orgchart--about  나형 변형 — 회장 → 부회장 → 손자 가로 일렬(≥960px)
   좁은 화면(나형 ≤640 · about ≤959)에서는 기둥이 세로 목록으로 접히고, 분과 머리는 왼쪽 3px 바,
   구성원은 얼굴 달린 가로 카드가 된다(시안 375px 그림).

   선 = 빈 span 에 배경색. 세로 .oc-v(22/26/16/18px) · 가로 .oc-h(1px). 회장 테두리만 2px 주황.
   그림자 0.

   2026-09-15 4차 "당근형": 3차 종이 톤(라운드 0 · 명조 · #B5400A)을 걷어내고 새 토큰으로 갈아끼웠다.
   노드 카드 라운드 14 · 테두리 #F0EEEB · 연결선 #DCD9D4 · 글꼴 Pretendard 한 종.
   ⚠️ 관리자(admin/index.php?p=officers)는 styles.css 를 안 싣는 경우가 있어 **모든 변수에 hex 폴백**을 둔다.
   ========================================================================== */

.orgchart {
  --oc-paper:  var(--surface-2, #FCFBFA);
  --oc-card:   var(--card,   #FFFFFF);
  --oc-ink:    var(--ink,    #212124);
  --oc-ink-3:  var(--ink-3,  #6E737C);
  --oc-accent: var(--carrot-ink, #C94400);
  --oc-line:   var(--line,   #DCD9D4);
  --oc-line-2: var(--line-2, #F0EEEB);
  --oc-line-3: var(--line,   #DCD9D4);      /* 연결선 — 4차에서 --line-3 은 아주 연한 색이 됐다 */
  --oc-sand:   var(--tint,   #FFF7F1);
  --oc-sand-ink: var(--ink-2, #4D5159);
  --oc-fill:   var(--fill,   #F5F3F1);
  --oc-sans:   var(--font, 'Pretendard Variable', Pretendard, system-ui, sans-serif);
  --oc-r:      14px;

  display: flex; flex-direction: column; align-items: center;
  padding: 32px;
  background: var(--oc-card);
  border: 1px solid var(--oc-line-2);
  border-radius: var(--oc-r);
  color: var(--oc-ink);
  font-family: var(--oc-sans);
  box-sizing: border-box;
}
.orgchart *, .orgchart *::before, .orgchart *::after { box-sizing: border-box; }

/* ── 선 ─────────────────────────────────────────────────────────────────── */
.orgchart .oc-v { display: block; flex: none; width: 1px; height: 22px; background: var(--oc-line-3); }
.orgchart .oc-v--b { height: 16px; }
.orgchart--about .oc-v--a { height: 26px; }
.orgchart .oc-h { display: block; width: 100%; height: 1px; background: var(--oc-line-3); }

/* ── 상자 공통 ───────────────────────────────────────────────────────────── */
.orgchart .oc-box {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 9px 14px;
  background: var(--oc-paper);
  border: 1px solid var(--oc-line-2);
  border-radius: var(--oc-r);
  color: var(--oc-ink); text-decoration: none;
  min-width: 0;
}
.orgchart .oc-txt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.orgchart .oc-role { font: 500 12px/1 var(--oc-sans); color: var(--oc-ink-3); white-space: nowrap; }
.orgchart .oc-name { font: 700 14px/1.2 var(--oc-sans); color: var(--oc-ink); }
.orgchart .oc-co   { font: 400 13px/1.3 var(--oc-sans); color: var(--oc-ink-3); }
/* 마우스가 있는 기기에서만 — 터치에서는 한 번 누르면 풀리지 않는다 */
@media (hover: hover) {
  .orgchart a.oc-box.is-link:hover .oc-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--oc-line-3); }
}
.orgchart a.oc-box:focus-visible { outline: 2px solid var(--oc-accent); outline-offset: 2px; }

/* 회장 — 유일한 2px 갈색 테두리 */
.orgchart .oc-box--head { border: 2px solid var(--oc-accent); padding: 12px 24px; gap: 4px; }
.orgchart .oc-box--head .oc-role { font-weight: 700; color: var(--oc-accent); }
.orgchart .oc-box--head .oc-name { font-size: 17px; }
.orgchart--about .oc-box--head { padding: 14px 26px; gap: 5px; }
.orgchart--about .oc-box--head .oc-role { font-size: 13px; }
.orgchart--about .oc-box--head .oc-name { font-size: 18px; }

/* 부회장 줄 */
.orgchart .oc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.orgchart .oc-box--leaf { padding: 11px 22px; }
.orgchart .oc-box--leaf .oc-role { font-weight: 600; }
.orgchart .oc-box--leaf .oc-name { font-size: 16px; }
.orgchart--about .oc-box--leaf { padding: 12px 24px; }
.orgchart--about .oc-box--leaf .oc-role { font-weight: 700; font-size: 13px; }
.orgchart--about .oc-box--leaf .oc-name { font-size: 17px; }

/* 기둥 */
.orgchart .oc-cols {
  display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 0 16px;
  width: 100%;
}
.orgchart .oc-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* 가로선 조각 — 첫 기둥은 오른쪽 절반, 마지막은 왼쪽 절반, 하나뿐이면 없음 → ㅠ 모양.
   기둥 사이 gap(16px)만큼은 margin 으로 이어 붙여 선이 끊기지 않게 한다. */
.orgchart .oc-col .oc-h { width: calc(100% + 16px); margin: 0 -8px; }
.orgchart .oc-col:first-child .oc-h { width: calc(50% + 8px); margin: 0 -8px 0 auto; }
.orgchart .oc-col:last-child  .oc-h { width: calc(50% + 8px); margin: 0 auto 0 -8px; }
.orgchart .oc-col:only-child  .oc-h { display: none; }

.orgchart .oc-dept {
  padding: 8px 14px;
  border: 1px solid var(--oc-accent); border-radius: 999px; background: var(--oc-sand);
  font: 700 13px/1 var(--oc-sans); color: var(--oc-accent); white-space: nowrap;
}
.orgchart .oc-members { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.orgchart .oc-box--member { padding: 9px 14px; gap: 3px; }
.orgchart--about .oc-box--member { padding: 11px 16px; gap: 4px; }
.orgchart--about .oc-box--member .oc-role { font-weight: 600; }
.orgchart--about .oc-box--member .oc-name { font-size: 15px; }

/* ── 얼굴 — 원형. 나형·about 의 넓은 화면에서는 안 보인다 ───────────────── */
.orgchart .oc-face {
  position: relative; flex: none; overflow: hidden; isolation: isolate;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--oc-line-2); background: var(--oc-fill);
}
.orgchart .oc-face::before {              /* 사진을 밀어 빈 자리가 생기면 흐린 같은 사진으로 채운다 */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--shot, none) center / cover no-repeat;
  filter: blur(16px) saturate(.8) brightness(1.04); opacity: .9;
  transform: scale(calc(var(--pz, 1) * var(--pb, 1) * 1.35)) translate(calc(var(--px, 0%) / 1.35), calc(var(--py, 0%) / 1.35));
}
.orgchart .oc-face > img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
  /* ⚠️ 관리자 조절기(admin.css .pp-stage > img)와 같은 순서: scale 이 앞 */
  transform: scale(calc(var(--pz, 1) * var(--pb, 1))) translate(var(--px, 0%), var(--py, 0%));   /* --pb: 칸별 기본 배율(pages.css 참고), 원형은 1 */
  transform-origin: center;
}
/* 윗선 기준(data-anchor="top") — pages.css .shot 과 같은 규칙: 사진 통째 높이 요소를 윗선에 붙인다 */
.orgchart .oc-face[data-anchor="top"] > img { inset: auto; top: 0; left: 0; height: auto; min-height: 100%; transform-origin: 50% 0; }
.orgchart .oc-face[data-anchor="top"]::before { background-position: center top; transform-origin: 50% 0; }
.orgchart .oc-face--none {
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 17px/1 var(--oc-sans); color: var(--oc-sand-ink);
}
.orgchart--dept .oc-face, .orgchart--about .oc-face { display: none; }

/* ── 가형: 회장 가로 카드 + 2열 ─────────────────────────────────────────── */
.orgchart--list { padding: 36px 32px; gap: 20px; align-items: stretch; }
.orgchart--list .oc-head { display: flex; }
.orgchart--list .oc-box { flex-direction: row; align-items: center; text-align: left; gap: 12px; width: 100%; }
.orgchart--list .oc-txt { align-items: flex-start; gap: 3px; }
.orgchart--list .oc-box--head { padding: 18px 22px; gap: 16px; }
.orgchart--list .oc-box--head .oc-face { width: 52px; height: 52px; }
.orgchart--list .oc-box--head .oc-face--none { font-size: 20px; }
.orgchart--list .oc-box--head .oc-role { font-size: 13px; }
.orgchart--list .oc-box--head .oc-name { font-size: 19px; }
.orgchart--list .oc-box--head .oc-co { font-size: 13px; }
.orgchart--list .oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.orgchart--list .oc-box--card { padding: 16px 18px; }
.orgchart--list .oc-box--card .oc-role { font-weight: 600; }
.orgchart--list .oc-box--card .oc-name { font-size: 16px; }

/* ── 편집 모드(관리자) ──────────────────────────────────────────────────── */
.orgchart--edit a.oc-box { cursor: pointer; }
/* 마우스가 있는 기기에서만 — 터치에서는 한 번 누르면 풀리지 않는다 */
@media (hover: hover) {
  .orgchart--edit a.oc-box:hover { border-color: var(--oc-accent); background: var(--oc-card); }
}
.orgchart--edit a.oc-box.is-sel { outline: 2px solid var(--oc-accent); outline-offset: 2px; }
.orgchart--edit .is-hidden { opacity: .45; }
.orgchart--edit a.oc-box.is-empty { border-style: dashed; background: transparent; }
.orgchart--edit a.oc-box.is-empty .oc-name { color: var(--oc-ink-3); font-weight: 500; }
.orgchart--edit .oc-fill { font: 600 12px/1 var(--oc-sans); color: var(--oc-accent); margin-top: 2px; }

/* ── 좁은 화면: 기둥이 세로 목록으로 접힌다 (시안 375px) ──────────────────
   나형은 640px, about 형은 손자 6칸이 가로로 안 들어가는 960px 부터. 같은 규칙을 두 번 적는다. */
@media (max-width: 640px) {
  .orgchart--dept { padding: 24px 18px; align-items: stretch; }
  .orgchart--dept .oc-v--a, .orgchart--dept .oc-v--b { height: 18px; align-self: center; }
  .orgchart--dept .oc-face { display: inline-flex; }
  .orgchart--dept .oc-head { display: flex; }
  .orgchart--dept .oc-box--head,
  .orgchart--dept .oc-box--leaf,
  .orgchart--dept .oc-box--member {
    flex-direction: row; align-items: center; text-align: left; gap: 12px; width: 100%;
  }
  .orgchart--dept .oc-box--head .oc-txt,
  .orgchart--dept .oc-box--leaf .oc-txt,
  .orgchart--dept .oc-box--member .oc-txt { align-items: flex-start; gap: 3px; }
  .orgchart--dept .oc-box--head { padding: 14px 18px; }
  .orgchart--dept .oc-box--head .oc-face { width: 44px; height: 44px; }
  .orgchart--dept .oc-box--head .oc-role { font-size: 12px; }
  .orgchart--dept .oc-box--head .oc-name { font-size: 17px; }
  .orgchart--dept .oc-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .orgchart--dept .oc-box--leaf { padding: 13px 18px; }
  .orgchart--dept .oc-box--leaf .oc-face { width: 40px; height: 40px; }
  .orgchart--dept .oc-cols { display: flex; flex-direction: column; gap: 14px; }
  .orgchart--dept .oc-col { align-items: stretch; gap: 8px; }
  .orgchart--dept .oc-col .oc-h, .orgchart--dept .oc-col .oc-v { display: none; }
  .orgchart--dept .oc-dept {
    align-self: flex-start; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--oc-accent);
    border-radius: 0; background: transparent; line-height: 1.2;
  }
  .orgchart--dept .oc-members { align-items: stretch; gap: 8px; }
  .orgchart--dept .oc-box--member { padding: 12px 16px; }
  .orgchart--dept .oc-box--member .oc-face { width: 38px; height: 38px; }
  .orgchart--dept .oc-box--member .oc-face--none { font-size: 15px; }
  .orgchart--dept .oc-box--member .oc-name { font-size: 15px; }
  .orgchart--dept .oc-col--add .oc-box { justify-content: center; }
}
@media (max-width: 959px) {
  .orgchart--about { padding: 24px 18px; align-items: stretch; }
  .orgchart--about .oc-v--a, .orgchart--about .oc-v--b { height: 18px; align-self: center; }
  .orgchart--about .oc-face { display: inline-flex; }
  .orgchart--about .oc-head { display: flex; }
  .orgchart--about .oc-box--head,
  .orgchart--about .oc-box--leaf,
  .orgchart--about .oc-box--member {
    flex-direction: row; align-items: center; text-align: left; gap: 12px; width: 100%;
  }
  .orgchart--about .oc-box--head .oc-txt,
  .orgchart--about .oc-box--leaf .oc-txt,
  .orgchart--about .oc-box--member .oc-txt { align-items: flex-start; gap: 3px; }
  .orgchart--about .oc-box--head { padding: 14px 18px; }
  .orgchart--about .oc-box--head .oc-face { width: 44px; height: 44px; }
  .orgchart--about .oc-box--head .oc-role { font-size: 12px; }
  .orgchart--about .oc-box--head .oc-name { font-size: 17px; }
  .orgchart--about .oc-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .orgchart--about .oc-box--leaf { padding: 13px 18px; }
  .orgchart--about .oc-box--leaf .oc-face { width: 40px; height: 40px; }
  .orgchart--about .oc-box--leaf .oc-role { font-weight: 600; font-size: 12px; }
  .orgchart--about .oc-box--leaf .oc-name { font-size: 16px; }
  .orgchart--about .oc-cols { display: flex; flex-direction: column; gap: 8px; }
  .orgchart--about .oc-col { align-items: stretch; }
  .orgchart--about .oc-col .oc-h, .orgchart--about .oc-col .oc-v { display: none; }
  .orgchart--about .oc-members { align-items: stretch; gap: 8px; }
  .orgchart--about .oc-box--member { padding: 12px 16px; gap: 12px; }
  .orgchart--about .oc-box--member .oc-face { width: 38px; height: 38px; }
  .orgchart--about .oc-box--member .oc-face--none { font-size: 15px; }
  .orgchart--about .oc-box--member .oc-role { font-weight: 500; font-size: 12px; }
  .orgchart--about .oc-box--member .oc-name { font-size: 15px; }
}
@media (max-width: 640px) {
  .orgchart--list { padding: 24px 18px; }
  .orgchart--list .oc-grid { grid-template-columns: 1fr; }
  .orgchart--list .oc-box--head { padding: 14px 18px; gap: 12px; }
  .orgchart--list .oc-box--head .oc-face { width: 44px; height: 44px; }
  .orgchart--list .oc-box--head .oc-name { font-size: 17px; }
}


/* ── 같은 규칙을 @container 로 — 관리자 미리보기처럼 좁은 칸 안에서도 뷰포트가 넓어도 접힌다.
   (컨테이너는 감싸는 요소에 container-type: inline-size 를 준 곳: admin .org-box) ── */
@container (max-width: 640px) {
  .orgchart--dept { padding: 24px 18px; align-items: stretch; }
  .orgchart--dept .oc-v--a, .orgchart--dept .oc-v--b { height: 18px; align-self: center; }
  .orgchart--dept .oc-face { display: inline-flex; }
  .orgchart--dept .oc-head { display: flex; }
  .orgchart--dept .oc-box--head,
  .orgchart--dept .oc-box--leaf,
  .orgchart--dept .oc-box--member {
    flex-direction: row; align-items: center; text-align: left; gap: 12px; width: 100%;
  }
  .orgchart--dept .oc-box--head .oc-txt,
  .orgchart--dept .oc-box--leaf .oc-txt,
  .orgchart--dept .oc-box--member .oc-txt { align-items: flex-start; gap: 3px; }
  .orgchart--dept .oc-box--head { padding: 14px 18px; }
  .orgchart--dept .oc-box--head .oc-face { width: 44px; height: 44px; }
  .orgchart--dept .oc-box--head .oc-role { font-size: 12px; }
  .orgchart--dept .oc-box--head .oc-name { font-size: 17px; }
  .orgchart--dept .oc-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .orgchart--dept .oc-box--leaf { padding: 13px 18px; }
  .orgchart--dept .oc-box--leaf .oc-face { width: 40px; height: 40px; }
  .orgchart--dept .oc-cols { display: flex; flex-direction: column; gap: 14px; }
  .orgchart--dept .oc-col { align-items: stretch; gap: 8px; }
  .orgchart--dept .oc-col .oc-h, .orgchart--dept .oc-col .oc-v { display: none; }
  .orgchart--dept .oc-dept {
    align-self: flex-start; padding: 0 0 0 10px; border: 0; border-left: 3px solid var(--oc-accent);
    border-radius: 0; background: transparent; line-height: 1.2;
  }
  .orgchart--dept .oc-members { align-items: stretch; gap: 8px; }
  .orgchart--dept .oc-box--member { padding: 12px 16px; }
  .orgchart--dept .oc-box--member .oc-face { width: 38px; height: 38px; }
  .orgchart--dept .oc-box--member .oc-face--none { font-size: 15px; }
  .orgchart--dept .oc-box--member .oc-name { font-size: 15px; }
  .orgchart--dept .oc-col--add .oc-box { justify-content: center; }
}
@container (max-width: 959px) {
  .orgchart--about { padding: 24px 18px; align-items: stretch; }
  .orgchart--about .oc-v--a, .orgchart--about .oc-v--b { height: 18px; align-self: center; }
  .orgchart--about .oc-face { display: inline-flex; }
  .orgchart--about .oc-head { display: flex; }
  .orgchart--about .oc-box--head,
  .orgchart--about .oc-box--leaf,
  .orgchart--about .oc-box--member {
    flex-direction: row; align-items: center; text-align: left; gap: 12px; width: 100%;
  }
  .orgchart--about .oc-box--head .oc-txt,
  .orgchart--about .oc-box--leaf .oc-txt,
  .orgchart--about .oc-box--member .oc-txt { align-items: flex-start; gap: 3px; }
  .orgchart--about .oc-box--head { padding: 14px 18px; }
  .orgchart--about .oc-box--head .oc-face { width: 44px; height: 44px; }
  .orgchart--about .oc-box--head .oc-role { font-size: 12px; }
  .orgchart--about .oc-box--head .oc-name { font-size: 17px; }
  .orgchart--about .oc-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .orgchart--about .oc-box--leaf { padding: 13px 18px; }
  .orgchart--about .oc-box--leaf .oc-face { width: 40px; height: 40px; }
  .orgchart--about .oc-box--leaf .oc-role { font-weight: 600; font-size: 12px; }
  .orgchart--about .oc-box--leaf .oc-name { font-size: 16px; }
  .orgchart--about .oc-cols { display: flex; flex-direction: column; gap: 8px; }
  .orgchart--about .oc-col { align-items: stretch; }
  .orgchart--about .oc-col .oc-h, .orgchart--about .oc-col .oc-v { display: none; }
  .orgchart--about .oc-members { align-items: stretch; gap: 8px; }
  .orgchart--about .oc-box--member { padding: 12px 16px; gap: 12px; }
  .orgchart--about .oc-box--member .oc-face { width: 38px; height: 38px; }
  .orgchart--about .oc-box--member .oc-face--none { font-size: 15px; }
  .orgchart--about .oc-box--member .oc-role { font-weight: 500; font-size: 12px; }
  .orgchart--about .oc-box--member .oc-name { font-size: 15px; }
}
@container (max-width: 640px) {
  .orgchart--list { padding: 24px 18px; }
  .orgchart--list .oc-grid { grid-template-columns: 1fr; }
  .orgchart--list .oc-box--head { padding: 14px 18px; gap: 12px; }
  .orgchart--list .oc-box--head .oc-face { width: 44px; height: 44px; }
  .orgchart--list .oc-box--head .oc-name { font-size: 17px; }
}

/* ── 관리자: 열 옮기기 (‹ ›) ───────────────────────────────────────────────
   조직도 미리보기에서만 보인다. 운영진 명단 순서와 **따로** 저장되는 값을 바꾼다.
   공개 화면에는 .orgchart--edit 가 없어서 아예 그려지지 않는다. */
.orgchart .oc-move { display: none; }
.orgchart--edit .oc-move {
  display: flex; gap: 4px; justify-content: center; margin-bottom: 6px;
}
.oc-move__f { margin: 0; }
.oc-move__b {
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-3);
  font: 700 15px / 1 var(--font); cursor: pointer;
}
@media (hover: hover) {
  .oc-move__b:hover { border-color: var(--carrot-ink); color: var(--carrot-ink); }
}
.oc-move__b[disabled] { opacity: .35; cursor: default; }