/* =====================================================================
   MPK — 공유 디자인 시스템 (oc-theme.css)
   기존 어드민/회원포털 index.css 토큰 이식:
   Pretendard · 화이트/블랙/그레이 미니멀 · 글래스+뉴모피즘 · 라디얼 배경
   ===================================================================== */

:root {
  /* MPK 브랜드 팔레트 — 골드(primary) · 민트(success) · 딥네이비(panel) */
  --brand-gold: 42 88% 52%;
  --brand-mint: 160 64% 42%;
  --brand-navy: 222 47% 11%;

  --background: 0 0% 100%;
  --foreground: 222 30% 12%;
  --card: 0 0% 100%;
  --muted: 220 16% 96%;
  --muted-foreground: 220 10% 40%;
  --accent: 220 16% 94%;
  --border: 220 16% 90%;
  --input: 220 16% 90%;
  --ring: 42 88% 50%;
  --primary: 42 88% 52%;            /* 골드 */
  --primary-foreground: 222 47% 12%;/* 골드 위 네이비 텍스트 */
  --surface: 220 20% 98%;
  --success: 160 64% 38%;           /* 민트 */
  --warning: 38 92% 48%;
  --destructive: 0 72% 48%;
  --radius: 0.75rem;

  /* 사이드바/패널 (딥네이비) */
  --panel: 222 47% 11%;
  --panel-foreground: 210 22% 88%;
  --panel-muted: 215 16% 62%;
  --panel-accent: 222 38% 18%;
  --panel-border: 222 28% 22%;

  --shell-max: 1280px;
}

* { box-sizing: border-box; }
*::selection { background: hsl(var(--foreground)); color: hsl(var(--background)); }
html, body { margin: 0; height: 100%; }

body {
  color: hsl(var(--foreground));
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1200px 600px at -10% -20%, hsl(42 80% 92% / 0.9), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, hsl(160 60% 93% / 0.7), transparent 60%),
    radial-gradient(1000px 700px at 50% 120%, hsl(222 50% 94% / 0.8), transparent 60%),
    linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(220 30% 96%) 100%);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* ───── 글래스 / 뉴모피즘 코어 ───── */
.glass-emboss {
  background: linear-gradient(145deg, hsl(0 0% 100% / 0.85), hsl(0 0% 100% / 0.55));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid hsl(0 0% 100% / 0.7); border-radius: 1rem;
  box-shadow: 10px 12px 28px hsl(220 25% 55% / 0.18), -8px -10px 22px hsl(0 0% 100% / 0.85),
    inset 0 1px 0 0 hsl(0 0% 100% / 0.9), inset 0 -1px 0 0 hsl(220 20% 80% / 0.25);
}
.glass-deboss {
  background: linear-gradient(160deg, hsl(220 25% 96% / 0.7), hsl(0 0% 100% / 0.55));
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid hsl(0 0% 100% / 0.55); border-radius: 1rem;
  box-shadow: inset 6px 6px 14px hsl(220 25% 55% / 0.14), inset -5px -5px 12px hsl(0 0% 100% / 0.9), 0 1px 0 0 hsl(0 0% 100% / 0.6);
}
.glass-pane {
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.6), hsl(220 30% 97% / 0.4));
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid hsl(0 0% 100% / 0.5); border-radius: 1rem;
  box-shadow: 0 8px 32px hsl(220 25% 40% / 0.10);
}
.neu-press { transition: box-shadow .24s ease, transform .24s ease, background .24s ease; }
.neu-press:hover { transform: translateY(-2px); }

/* ───── App shell (사이드바 + 본문) ───── */
.app { min-height: 100dvh; display: flex; }

.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  width: 256px; height: 100dvh; flex: none;
  background: hsl(var(--panel)); color: hsl(var(--panel-foreground));
  display: flex; flex-direction: column; padding: 14px 0; gap: 2px;
  border-right: 1px solid hsl(var(--panel-border));
  overflow-y: auto; overscroll-behavior: contain;   /* 탭이 많은 어드민에서 하단 탭까지 스크롤로 도달 */
}
.sidebar .brand { display: flex; align-items: center; gap: 11px; padding: 4px 18px 16px; margin-bottom: 6px; border-bottom: 1px solid hsl(var(--panel-border)); }
.sidebar .brand .emblem { width: 38px; height: 38px; border-radius: 11px; background: hsl(0 0% 100% / 0.08); display: grid; place-items: center; flex: none; }
.sidebar .brand .name { font-weight: 800; font-size: 15px; color: #fff; line-height: 1.1; }
.sidebar .brand .kicker { font-size: 9.5px; letter-spacing: .16em; color: hsl(var(--panel-muted)); font-weight: 600; }
.nav-group-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--panel-muted)); padding: 16px 18px 6px; font-weight: 700; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  color: hsl(var(--panel-foreground) / 0.8); text-decoration: none; font-size: 13.5px; font-weight: 500;
  cursor: pointer; background: transparent; width: 100%; text-align: left;
  border: 0; border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-item:hover { background: hsl(var(--panel-accent) / 0.6); color: #fff; }
.nav-item.active { background: hsl(var(--panel-accent)); color: #fff; border-left-color: #fff; }
.nav-item .ico { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .ico svg { display: block; }
.nav-item .badge { margin-left: auto; font-size: 11px; font-weight: 800; background: hsl(var(--warning) / .9); color: #1a1200; border-radius: 999px; padding: 1px 7px; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 3vw, 28px);
  background: hsl(0 0% 100% / 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid hsl(var(--border));
}
.topbar .page-title { font-weight: 800; font-size: clamp(17px, 2.4vw, 21px); letter-spacing: -0.01em; }
.topbar .spacer { flex: 1 1 auto; }
.content { padding: clamp(16px, 3vw, 28px); max-width: var(--shell-max); width: 100%; margin: 0 auto; }

.hamburger { display: none; appearance: none; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 10px; width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; }

/* ───── 데모 회원 전환 스위처 ───── */
.demo-switch { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px dashed hsl(var(--border)); border-radius: 9px; background: hsl(var(--card)); white-space: nowrap; }
.demo-switch .ds-ico { display: inline-flex; color: hsl(var(--muted-foreground)); }
.demo-switch select { appearance: none; border: 0; background: transparent; color: hsl(var(--foreground)); font-family: inherit; font-size: 12px; font-weight: 600; outline: none; cursor: pointer; max-width: 130px; }
.demo-switch:focus-within { border-color: hsl(var(--ring)); }

/* ───── 언어 스위처 ───── */
.langs { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: hsl(var(--muted)); }
.lang-btn { appearance: none; border: 0; cursor: pointer; background: transparent; font-family: inherit; font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); padding: 6px 10px; border-radius: 999px; line-height: 1; transition: all .15s ease; }
.lang-btn:hover { color: hsl(var(--foreground)); }
.lang-btn[aria-pressed="true"] { color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); }
.lang-btn:focus-visible, .nav-item:focus-visible, .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* ───── 카드 / 그리드 ───── */
.card { background: hsl(var(--card) / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid hsl(0 0% 100% / 0.6); border-radius: var(--radius); box-shadow: 16px 19px 42px hsl(220 28% 46% / 0.26), -14px -14px 32px hsl(0 0% 100% / 0.95), inset 0 1px 0 0 hsl(0 0% 100% / 0.8); transition: box-shadow .26s ease, transform .26s ease, border-color .26s ease; }
.card.neu-press:hover, .card.clickable:hover { transform: translateY(-4px); box-shadow: 22px 26px 54px hsl(220 28% 46% / 0.32), -16px -16px 38px hsl(0 0% 100% / 0.98), inset 0 1px 0 0 hsl(0 0% 100% / 0.85); }
.card-pad { padding: clamp(16px, 2.2vw, 22px); }
.card-title { font-size: 13px; color: hsl(var(--muted-foreground)); font-weight: 600; margin: 0 0 12px; }
.section-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }

.grid { display: grid; gap: clamp(12px, 1.8vw, 18px); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* 통계(스탯) 카드 */
.stat { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.stat .label { font-size: 12.5px; color: hsl(var(--muted-foreground)); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat .value { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .delta { font-size: 12px; font-weight: 700; }
.stat .delta.up { color: hsl(var(--success)); }
.stat .delta.down { color: hsl(var(--destructive)); }
.stat .ico-wrap { width: 34px; height: 34px; border-radius: 10px; background: hsl(var(--muted)); display: grid; place-items: center; color: hsl(var(--foreground)); }

/* 행(라벨/값) */
.row { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed hsl(var(--border)); }
.row:last-child { border-bottom: 0; }
.row .k { font-size: 13.5px; color: hsl(var(--foreground) / .8); }
.row .v { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.row .v .sub { display: block; font-size: 11.5px; font-weight: 500; color: hsl(var(--muted-foreground)); }

/* 진행바 */
.progress { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.progress .head { display: flex; justify-content: space-between; font-size: 12.5px; }
.progress .head .pk { color: hsl(var(--muted-foreground)); font-weight: 600; }
.progress .head .pv { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: 9px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, hsl(0 0% 20%), hsl(0 0% 4%)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar.success > span { background: linear-gradient(90deg, hsl(142 60% 45%), hsl(142 71% 32%)); }

/* 버튼 */
.btn { appearance: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13.5px; border-radius: 10px; padding: 10px 16px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 7px; transition: all .16s ease; text-decoration: none; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { opacity: .9; }
.btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--muted)); }
.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-success { background: hsl(var(--success)); color: #fff; }

/* 배지 / 칩 */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.badge-gray { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-dark { background: hsl(var(--panel)); color: #fff; }
.badge-success { background: hsl(var(--success) / .14); color: hsl(142 71% 28%); border-color: hsl(var(--success) / .3); }
.badge-warning { background: hsl(var(--warning) / .16); color: hsl(32 90% 32%); border-color: hsl(var(--warning) / .35); }
/* 직급별 색상 (LV1→LV9, 등급 상승) — 차가운색→따뜻한색→로열. LV9 골드빛 보라 그라데이션 */
.rank-1 { background: hsl(220 14% 92%); color: hsl(220 12% 38%); border-color: hsl(220 13% 80%); }
.rank-2 { background: hsl(214 95% 94%); color: hsl(216 76% 44%); border-color: hsl(214 90% 84%); }
.rank-3 { background: hsl(192 90% 92%); color: hsl(194 80% 32%); border-color: hsl(192 82% 78%); }
.rank-4 { background: hsl(168 68% 90%); color: hsl(170 78% 26%); border-color: hsl(168 55% 76%); }
.rank-5 { background: hsl(142 62% 90%); color: hsl(143 68% 28%); border-color: hsl(142 50% 74%); }
.rank-6 { background: hsl(43 96% 89%); color: hsl(35 92% 36%); border-color: hsl(43 92% 76%); }
.rank-7 { background: hsl(24 96% 91%); color: hsl(20 88% 44%); border-color: hsl(24 92% 80%); }
.rank-8 { background: hsl(344 92% 95%); color: hsl(344 76% 50%); border-color: hsl(344 86% 87%); }
.rank-9 { background: linear-gradient(135deg, hsl(262 88% 95%), hsl(40 95% 90%)); color: hsl(264 70% 50%); border-color: hsl(266 80% 84%); }
/* 조직도 그래프 노드 LV 칩 (SVG fill, 채도색 + 흰 텍스트 — 라이트/다크 공통) */
.grb-1 { fill: hsl(220 10% 52%); } .grb-2 { fill: hsl(216 80% 56%); } .grb-3 { fill: hsl(193 78% 42%); }
.grb-4 { fill: hsl(170 70% 36%); } .grb-5 { fill: hsl(143 60% 40%); } .grb-6 { fill: hsl(38 88% 48%); }
.grb-7 { fill: hsl(22 85% 52%); } .grb-8 { fill: hsl(344 75% 56%); } .grb-9 { fill: hsl(264 62% 56%); }
.badge-danger { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .3); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 인라인 아이콘(텍스트 정렬용) + 원형 번호 배지 */
.ix { display: inline-flex; align-items: center; line-height: 0; vertical-align: -2px; }
.ix svg { display: block; }
.num-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 12px; font-weight: 800; flex: none; }
/* 스탯 아이콘 래퍼 */
.stat-ico { width: 36px; height: 36px; border-radius: 10px; background: hsl(var(--muted)); display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--foreground)); }
/* 카드 제목 옆 아이콘 */
.section-title .ti { width: 18px; height: 18px; display: inline-flex; align-items: center; color: hsl(var(--muted-foreground)); }
.section-title .ti svg { display: block; }

/* 테이블 */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid hsl(var(--border)); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; background: hsl(var(--card) / .6); }
table.tbl th { text-align: left; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; background: hsl(var(--surface)); }
table.tbl td { padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: hsl(var(--muted) / .5); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-strong { font-weight: 700; }
.muted { color: hsl(var(--muted-foreground)); }
.mono { font-variant-numeric: tabular-nums; }

/* 탭 */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: hsl(var(--muted)); border-radius: 12px; flex-wrap: wrap; }
.tab { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: hsl(var(--muted-foreground)); padding: 8px 14px; border-radius: 9px; transition: all .15s ease; }
.tab:hover { color: hsl(var(--foreground)); }
.tab.active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 4px hsl(220 20% 15% / .1); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade-in .25s ease; }

/* 입력 */
.input { width: 100%; font-family: inherit; font-size: 14px; padding: 9px 12px; border-radius: 9px; border: 1px solid hsl(var(--input)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.input:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; border-color: transparent; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 700; color: hsl(var(--foreground) / .85); }

/* 툴팁(간단) */
.tip { position: relative; cursor: help; border-bottom: 1px dotted hsl(var(--muted-foreground)); }
.tip > .tip-body { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px; background: hsl(var(--panel)); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.5; padding: 9px 11px; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 30; box-shadow: 0 10px 26px hsl(220 25% 20% / .35); text-align: left; }
.tip:hover > .tip-body, .tip:focus-visible > .tip-body { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: hsl(var(--panel)); color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 18px; border-radius: 12px; max-width: 88vw; box-shadow: 0 12px 30px hsl(220 25% 20% / .35); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 모바일 오버레이/하단탭 */
.scrim { display: none; position: fixed; inset: 0; background: hsl(0 0% 0% / .4); z-index: 40; }
.scrim.show { display: block; }

/* 모바일 하단 탭바 (원본 회원포털식) */
.bottom-nav { display: none; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; text-decoration: none; color: hsl(var(--muted-foreground)); font-size: 10px; font-weight: 700; line-height: 1; }
.bottom-nav a.active { color: hsl(var(--foreground)); }
.bottom-nav a svg { display: block; }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .26s ease; }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: inline-flex; }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: hsl(0 0% 100% / 0.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid hsl(var(--border)); padding-bottom: env(safe-area-inset-bottom);
  }
  .content { padding-bottom: 86px; }
}

/* 진입 애니메이션 */
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
.anim { opacity: 0; animation: slide-up .5s ease-out forwards; }
.anim.d1 { animation-delay: .04s } .anim.d2 { animation-delay: .1s } .anim.d3 { animation-delay: .16s }
.anim.d4 { animation-delay: .22s } .anim.d5 { animation-delay: .28s } .anim.d6 { animation-delay: .34s }
@media (prefers-reduced-motion: reduce) { .anim { animation: none; opacity: 1 } .neu-press:hover { transform: none } .bar > span { transition: none } }

/* ───── 조직도 트리 ───── */
.tree { font-size: 13.5px; }
.trow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; }
.trow:hover { background: hsl(var(--muted) / 0.6); }
.ttoggle { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); transition: transform .18s ease; }
.ttoggle.leaf { opacity: 0; }
.ttoggle svg { display: block; }
.tnode:not(.collapsed) > .trow .ttoggle { transform: rotate(90deg); }
.tlv { font-size: 10.5px; flex: none; }
.tname { font-weight: 700; white-space: nowrap; }
.tcode { font-size: 11.5px; white-space: nowrap; }
.tdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tdot.on { background: hsl(var(--success)); }
.tdot.off { background: hsl(var(--muted-foreground) / 0.4); }
.tspacer { flex: 1 1 auto; min-width: 8px; }
.tsales { font-weight: 600; white-space: nowrap; }
.tcount { font-size: 10.5px; display: inline-flex; align-items: center; gap: 4px; }
.tcount svg { display: block; }
.tchildren { margin-left: 17px; padding-left: 14px; border-left: 1px solid hsl(var(--border)); }
.tnode.collapsed > .tchildren { display: none; }
.trow.thit { background: hsl(var(--warning) / 0.18); box-shadow: inset 0 0 0 1px hsl(var(--warning) / 0.4); }
.tnode.is-you > .trow { background: hsl(var(--success) / 0.1); box-shadow: inset 0 0 0 1px hsl(var(--success) / 0.25); }
.tyou { font-size: 10px; }
.tree-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tree-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.tree-search .si { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); display: inline-flex; }
.tree-search .si svg { display: block; }
.tree-search input { padding-left: 34px; }

/* ───── 슬라이드 드로어(회원 상세) ───── */
.drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: hsl(0 0% 0% / 0.4); opacity: 0; transition: opacity .25s ease; }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(440px, 92vw);
  overflow-y: auto; transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(180deg, hsl(0 0% 100%), hsl(220 30% 98%));
  border-left: 1px solid hsl(var(--border)); box-shadow: -22px 0 56px hsl(220 25% 30% / 0.22);
}
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; background: hsl(0 0% 100% / 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; }
.drawer-close { margin-left: auto; appearance: none; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--muted-foreground)); flex: none; }
.drawer-close:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.drawer-body { padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 16px; }
tr.clickable { cursor: pointer; }

/* ───── 조직 그래프 (팬/줌) ───── */
.graph-stage { position: relative; height: 62vh; min-height: 380px; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 14px; background: linear-gradient(180deg, hsl(var(--surface)), hsl(var(--card))); touch-action: none; }
.graph-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.gnode { cursor: pointer; }
.graph-ctl { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.graph-ctl button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); border-radius: 9px; cursor: pointer; box-shadow: 0 2px 8px hsl(220 20% 15% / 0.08); }
.graph-ctl button:hover { background: hsl(var(--muted)); }
.graph-ctl button svg { display: block; }

.hidden { display: none !important; }

/* ───── 테마 토글 버튼 ───── */
.theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); border-radius: 999px; cursor: pointer; flex: none; transition: background .15s ease; }
.theme-toggle:hover { background: hsl(var(--muted)); }
.theme-toggle svg { display: block; }

/* ───── 다크 모드 ───── */
html.dark {
  --background: 222 44% 8%;
  --foreground: 210 24% 94%;
  --card: 222 38% 12%;
  --muted: 222 28% 17%;
  --muted-foreground: 215 16% 64%;
  --accent: 222 28% 20%;
  --border: 222 24% 22%;
  --input: 222 24% 24%;
  --ring: 42 90% 56%;
  --primary: 42 90% 56%;            /* 골드 */
  --primary-foreground: 222 47% 10%;
  --surface: 222 40% 10%;
  --success: 160 60% 46%;           /* 민트 */
  --warning: 38 92% 56%;
  --destructive: 0 72% 62%;
  --panel: 222 50% 7%;
  --panel-foreground: 210 22% 84%;
  --panel-muted: 215 16% 56%;
  --panel-accent: 222 38% 16%;
  --panel-border: 222 30% 18%;
}
html.dark body {
  background:
    radial-gradient(1200px 600px at -10% -20%, hsl(42 60% 16% / 0.55), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, hsl(160 50% 13% / 0.5), transparent 60%),
    radial-gradient(1000px 700px at 50% 120%, hsl(222 60% 14% / 0.7), transparent 60%),
    linear-gradient(180deg, hsl(222 46% 9%) 0%, hsl(222 50% 6%) 100%);
}
html.dark .glass-emboss {
  background: linear-gradient(145deg, hsl(0 0% 18% / 0.85), hsl(0 0% 13% / 0.6));
  border-color: hsl(0 0% 100% / 0.06);
  box-shadow: 10px 12px 28px hsl(0 0% 0% / 0.4), -8px -10px 22px hsl(0 0% 100% / 0.03), inset 0 1px 0 0 hsl(0 0% 100% / 0.05);
}
html.dark .glass-deboss {
  background: linear-gradient(160deg, hsl(0 0% 14% / 0.8), hsl(0 0% 11% / 0.6));
  border-color: hsl(0 0% 100% / 0.05);
  box-shadow: inset 4px 4px 12px hsl(0 0% 0% / 0.35), inset -3px -3px 10px hsl(0 0% 100% / 0.03);
}
html.dark .glass-pane { background: linear-gradient(135deg, hsl(0 0% 15% / 0.6), hsl(0 0% 11% / 0.4)); border-color: hsl(0 0% 100% / 0.06); }
html.dark .topbar { background: hsl(0 0% 9% / 0.7); }
html.dark .bottom-nav { background: hsl(0 0% 9% / 0.94); }
html.dark .drawer-panel { background: linear-gradient(180deg, hsl(0 0% 12%), hsl(0 0% 9%)); }
html.dark .drawer-head { background: hsl(0 0% 11% / 0.92); }
html.dark .card { border-color: hsl(0 0% 100% / 0.08); box-shadow: 17px 20px 42px hsl(0 0% 0% / 0.64), -11px -12px 28px hsl(0 0% 100% / 0.045), inset 0 1px 0 0 hsl(0 0% 100% / 0.07); }
html.dark .card.neu-press:hover, html.dark .card.clickable:hover { box-shadow: 24px 28px 54px hsl(0 0% 0% / 0.72), -13px -14px 32px hsl(0 0% 100% / 0.055), inset 0 1px 0 0 hsl(0 0% 100% / 0.09); }
html.dark .badge-dark { background: hsl(0 0% 92%); color: hsl(0 0% 8%); }
html.dark .rank-1 { background: hsl(220 12% 24%); color: hsl(220 14% 78%); border-color: hsl(220 10% 34%); }
html.dark .rank-2 { background: hsl(216 58% 22%); color: hsl(214 90% 78%); border-color: hsl(216 48% 34%); }
html.dark .rank-3 { background: hsl(193 68% 18%); color: hsl(192 85% 72%); border-color: hsl(193 52% 30%); }
html.dark .rank-4 { background: hsl(170 58% 15%); color: hsl(168 70% 64%); border-color: hsl(170 42% 27%); }
html.dark .rank-5 { background: hsl(143 52% 15%); color: hsl(142 60% 62%); border-color: hsl(143 40% 27%); }
html.dark .rank-6 { background: hsl(38 68% 19%); color: hsl(43 92% 64%); border-color: hsl(38 52% 31%); }
html.dark .rank-7 { background: hsl(22 72% 21%); color: hsl(24 90% 66%); border-color: hsl(22 58% 33%); }
html.dark .rank-8 { background: hsl(344 56% 23%); color: hsl(344 88% 78%); border-color: hsl(344 48% 35%); }
html.dark .rank-9 { background: linear-gradient(135deg, hsl(264 52% 26%), hsl(40 55% 24%)); color: hsl(45 92% 72%); border-color: hsl(266 48% 40%); }

/* ═════════ 접근성: 본문 바로가기 ═════════ */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; box-shadow: 0 8px 20px hsl(220 25% 20% / 0.3);
  transform: translateY(-160%); transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* ═════════ 조직 그래프 — 검색 포커스/키보드 ═════════ */
@keyframes ghalo { 0%, 100% { stroke-opacity: .85; stroke-width: 2.5; } 50% { stroke-opacity: .2; stroke-width: 4.2; } }
.gnode .ghalo { animation: ghalo 1.3s ease-in-out infinite; }
.graph-svg .gnode { outline: none; }
.graph-svg .gnode:focus-visible, .graph-svg .gtoggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 14px; }
.search-count { font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); align-self: center; white-space: nowrap; }

/* ═════════ 미니차트 (oc-chart.js) ═════════ */
.chart-box { width: 100%; height: 100%; min-height: 150px; }
.chart-box svg { display: block; overflow: visible; }
.chart-tip {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 8px));
  background: hsl(var(--panel)); color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .14s ease; z-index: 5; box-shadow: 0 8px 22px hsl(220 25% 20% / 0.32);
}
.chart-tip.show { opacity: 1; }
.chart-tip b { font-weight: 800; }
.chart-donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.chart-legend { display: flex; flex-direction: column; gap: 9px; }
.cleg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: hsl(var(--foreground) / 0.82); }
.cleg b { font-weight: 800; margin-left: 2px; font-variant-numeric: tabular-nums; }
.cdot { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ═════════ 공지 팝업 모달 (oc-notices.js) ═════════ */
.notice-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; pointer-events: none; }
.notice-modal .nm-scrim { position: absolute; inset: 0; background: hsl(0 0% 0% / 0.45); opacity: 0; transition: opacity .22s ease; }
.notice-modal .nm-card {
  position: relative; width: min(440px, 100%); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, hsl(0 0% 100%), hsl(220 30% 98%));
  border: 1px solid hsl(var(--border)); border-radius: 18px;
  box-shadow: 0 30px 70px hsl(220 25% 20% / 0.35);
  transform: translateY(14px) scale(.98); opacity: 0;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s ease;
}
.notice-modal.open { pointer-events: auto; }
.notice-modal.open .nm-scrim { opacity: 1; }
.notice-modal.open .nm-card { transform: none; opacity: 1; }
.nm-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 0; }
.nm-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; background: hsl(var(--panel)); padding: 5px 11px; border-radius: 999px; }
.nm-badge svg { display: block; }
.nm-close { margin-left: auto; appearance: none; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--muted-foreground)); flex: none; }
.nm-close:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.nm-close svg { display: block; }
.nm-body { padding: 12px 20px 4px; }
.nm-date { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.nm-title { margin: 6px 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.nm-text { margin: 0; font-size: 14px; line-height: 1.65; color: hsl(var(--foreground) / 0.85); white-space: pre-wrap; }
.nm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 20px; flex-wrap: wrap; }
.nm-dont { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: hsl(var(--muted-foreground)); cursor: pointer; }
.nm-ok { min-width: 96px; justify-content: center; }

/* ═════════ 처리 이력 타임라인 ═════════ */
.tl { display: flex; flex-direction: column; }
.tl-step { position: relative; display: flex; gap: 12px; padding: 0 0 16px 18px; border-left: 2px solid hsl(var(--border)); }
.tl-step:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl-dot { position: absolute; left: -7px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--muted)); border: 2px solid hsl(var(--card)); box-shadow: 0 0 0 1px hsl(var(--border)); }
.tl-step.done .tl-dot { background: hsl(var(--success)); box-shadow: 0 0 0 1px hsl(var(--success) / 0.5); }
.tl-step.bad .tl-dot { background: hsl(var(--destructive)); box-shadow: 0 0 0 1px hsl(var(--destructive) / 0.5); }
.tl-step.hold .tl-dot { background: hsl(var(--warning)); box-shadow: 0 0 0 1px hsl(var(--warning) / 0.5); }
.tl-k { font-size: 13px; font-weight: 700; }
.tl-t { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin-top: 1px; }
.tl-step.pending .tl-k { color: hsl(var(--muted-foreground)); }

html.dark .notice-modal .nm-card { background: linear-gradient(180deg, hsl(0 0% 13%), hsl(0 0% 10%)); }

@media (prefers-reduced-motion: reduce) {
  .gnode .ghalo { animation: none; stroke-opacity: .7; }
  .notice-modal .nm-card, .notice-modal .nm-scrim, .chart-tip, .skip-link { transition: none; }
  .notice-modal .nm-card { transform: none; }
}

/* ═════════ 럭키드로우 룰렛 ═════════ */
.ld-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.ld-scrim { position: absolute; inset: 0; background: hsl(0 0% 0% / 0.62); opacity: 0; transition: opacity .22s ease; }
.ld-card { position: relative; width: min(440px, 96vw); max-height: 94vh; overflow: auto; border-radius: 22px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 24px 70px hsl(0 0% 0% / 0.4); transform: translateY(14px) scale(.97); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.3,1.1), opacity .2s ease; }
.ld-modal.open { pointer-events: auto; }
.ld-modal.open .ld-scrim { opacity: 1; }
.ld-modal.open .ld-card { transform: none; opacity: 1; }
.ld-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; }
.ld-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; background: hsl(var(--panel)); padding: 5px 11px; border-radius: 999px; max-width: 78%; }
.ld-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-close { margin-left: auto; appearance: none; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--muted-foreground)); flex: none; }
.ld-close:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.ld-body { padding: 8px 20px 20px; text-align: center; }
.ld-title { margin: 6px 0 2px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.ld-sub { margin: 0 0 12px; font-size: 13px; }
.ld-note { margin: 12px 0 0; font-size: 11px; line-height: 1.5; }
.ld-stage { position: relative; width: min(330px, 80vw); aspect-ratio: 1; margin: 4px auto 16px; display: grid; place-items: center; }
.ld-wheel-svg { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #1e2536, #0b0f1a 78%); padding: 9px; box-shadow: 0 0 0 6px #0b0f1a, 0 0 0 8px rgba(255,255,255,.12), 0 16px 40px hsl(0 0% 0% / 0.45); }
#ld-rotor { transition: transform 4.6s cubic-bezier(.16,.84,.3,1); }
.ld-seg-num { fill: #fff; font-size: 19px; font-weight: 800; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.ld-seg-unit { fill: rgba(255,255,255,.82); font-size: 8.5px; font-weight: 700; letter-spacing: .02em; }
.ld-hub { fill: #fff; stroke: #e2c044; stroke-width: 3; }
.ld-hub-ico { color: #b8860b; }
.ld-hub-ico svg { transform: translate(-13px,-13px); }
.ld-pointer { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 22px solid #eab308; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.ld-pointer::after { content: ""; position: absolute; top: -27px; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: #eab308; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ld-spin { width: 100%; justify-content: center; font-size: 16px; font-weight: 800; padding: 13px; border-radius: 13px; }
.ld-spin:disabled { opacity: .6; }
.ld-confetti { position: absolute; inset: -8px -40px; pointer-events: none; overflow: hidden; z-index: 4; }
.ld-confetti span { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; opacity: .95; animation: ld-fall linear forwards; }
@keyframes ld-fall { to { transform: translateY(360px) rotate(540deg); opacity: 0; } }
.ld-result { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; z-index: 6; }
.ld-result.show { display: flex; }
.ld-result::before { content: ""; position: absolute; inset: 0; background: hsl(var(--card) / 0.9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 22px; }
.ld-rcard { position: relative; text-align: center; animation: slide-up .35s ease both; }
.ld-ricon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; }
.ld-result.win .ld-ricon { background: hsl(45 92% 52% / 0.18); color: #d99e00; }
.ld-result.miss .ld-ricon { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.ld-rtitle { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ld-result.win .ld-rtitle { color: #c98a00; }
.ld-ramt { font-size: 17px; font-weight: 700; margin: 6px 0 18px; }
.ld-ok { min-width: 140px; justify-content: center; }
html.dark .ld-wheel-svg { box-shadow: 0 0 0 6px #060810, 0 0 0 8px rgba(255,255,255,.1), 0 16px 40px hsl(0 0% 0% / 0.6); }

/* 럭키드로우 진입 배너(대시보드/이벤트) */
.ld-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(110deg, hsl(45 90% 51% / .16), hsl(280 70% 56% / .14)); border: 1px solid hsl(45 80% 50% / .35); }
.ld-banner .lb-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: hsl(45 92% 52% / .9); color: #5b4500; box-shadow: 0 4px 14px hsl(45 80% 45% / .4); }
.ld-banner .lb-tx { flex: 1; min-width: 0; }
.ld-banner .lb-t { font-weight: 800; font-size: 15px; }
.ld-banner .lb-s { font-size: 12.5px; color: hsl(var(--foreground) / .72); margin-top: 2px; }
.ld-banner .btn { flex: none; }
html.dark .ld-banner { background: linear-gradient(110deg, hsl(45 80% 45% / .2), hsl(280 60% 50% / .18)); }

@media (prefers-reduced-motion: reduce) {
  .ld-card, .ld-scrim { transition: none; }
  .ld-card { transform: none; }
  #ld-rotor { transition: none; }
  .ld-confetti span { animation: none; display: none; }
  .ld-rcard { animation: none; }
}

/* ═════════ 인쇄(참가자 명단 등) ═════════ */
.print-area { position: absolute; left: -10000px; top: 0; width: 100%; }
@media print {
  body * { visibility: hidden !important; }
  .print-area, .print-area * { visibility: visible !important; }
  .print-area { left: 0; top: 0; padding: 0; color: #000; }
  .print-area table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .print-area th, .print-area td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
  .print-area h2 { font-size: 16px; margin: 0 0 4px; }
  .print-area .pa-meta { font-size: 12px; margin: 0 0 12px; color: #333; }
  @page { margin: 14mm; }
}