/*
  피플인사이트 — Base & Components
  .claude/디자인규칙.md 기반.
  - 클래스 접두어: pi-
  - 그림자 없음 (모달·드롭다운 제외)
  - 스크롤은 .pi-main 내부에서만
*/

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-frame);    /* 프레임 회색 — 사이드바·헤더와 동일 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;               /* 페이지 자체 스크롤 차단 */
}

a { color: var(--text-primary); text-decoration: none; }
a:hover { text-decoration: none; }

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}

/* =========================================================
   Scrollbar — 공통 베이스
   - 얇은 thumb, 투명 track, idle 옅음 / hover 짙음
   - Firefox 와 WebKit 양쪽 대응
   ========================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;          /* track 와의 시각적 여백 */
  background-clip: padding-box;
  transition: background var(--dur-fast) var(--ease);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--text-secondary);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* =========================================================
   App Shell — 헤더(전체 폭) + 사이드바 + 메인. 스크롤은 메인에서만.
   ========================================================= */
.pi-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main";
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.pi-header  { grid-area: header; }
.pi-sidebar { grid-area: sidebar; }
.pi-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);     /* 16px 24px */
  background: var(--bg-surface);              /* 흰색 카드 */
  border: 1px solid var(--border-subtle);     /* 테두리 */
  border-radius: var(--radius-lg);            /* 12px — 별도 영역처럼 */
  margin-right: var(--space-2);               /* 우측 회색 프레임 노출 */
  margin-bottom: var(--space-2);              /* 하단 회색 프레임 노출 */
}

@media (max-width: 900px) {
  .pi-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  .pi-sidebar { display: none; }
  .pi-main {
    padding: var(--space-5);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
}

/* =========================================================
   Header — 사이드바와 동일 회색, 보더 없이 연결됨
   ========================================================= */
.pi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6) 0 var(--space-5);
  background: var(--bg-frame);
}
.pi-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-width: 0;
}
.pi-header__logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.pi-header__brand {
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--fs-base);
}
.pi-header__left .sep {
  color: var(--text-muted);
}
.pi-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pi-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-header__action:hover {
  background: var(--frame-hover);
  color: var(--text-primary);
}
.pi-header__icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-header__icon-btn:hover {
  background: var(--frame-hover);
  color: var(--text-primary);
}
.pi-header__avatar {
  width: 28px;
  height: 28px;
  margin-left: var(--space-2);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: none;
  font-family: inherit;
  padding: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.pi-header__avatar:hover { opacity: .85; }

/* =========================================================
   Sidebar — 헤더와 동일 회색, 보더 없이 연결됨
   ========================================================= */
.pi-sidebar {
  background: var(--bg-frame);
  padding: var(--space-3);
  overflow-y: auto;
}

.pi-sidebar__group { margin-top: var(--space-5); }
.pi-sidebar__group:first-child { margin-top: 0; }
.pi-sidebar__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.pi-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-sidebar__link + .pi-sidebar__link { margin-top: 2px; }
.pi-sidebar__link:hover {
  background: var(--frame-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.pi-sidebar__link--active {
  background: var(--frame-active);
  color: var(--text-primary);
  font-weight: 600;
}
.pi-sidebar__link i {
  width: 16px;
  font-size: 16px;
  text-align: center;
}
.pi-sidebar__step {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
  min-width: 14px;
}
.pi-sidebar__link--active .pi-sidebar__step { color: var(--text-secondary); }

/* =========================================================
   Page Header — 좌측 타이틀 그룹 + 우측 액션 그룹
   사용 패턴:
     <div class="pi-page-header">
       <div class="pi-page-header__title">
         <h1>제목</h1>
         <p>서브 설명 (선택)</p>
       </div>
       <div class="pi-page-header__actions">...</div>   (선택)
     </div>
   ========================================================= */
.pi-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.pi-page-header__title {
  flex: 1;
  min-width: 0;
}
.pi-page-header__title h1,
.pi-page-header > h1 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.01em;
  line-height: var(--lh-snug);
}
.pi-page-header__title p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.pi-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* =========================================================
   Section — 본문 안의 큰 단락
   ========================================================= */
.pi-section { margin-bottom: var(--space-10); }
.pi-section__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* =========================================================
   Grid Utilities
   ========================================================= */
.pi-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.pi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 1100px) {
  .pi-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pi-grid-2,
  .pi-grid-3,
  .pi-grid-4 { grid-template-columns: 1fr; }
}

.pi-layout-with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
}
@media (max-width: 1100px) {
  .pi-layout-with-rail { grid-template-columns: 1fr; }
}

/* =========================================================
   Buttons — 변수 기반 variant 시스템.
   모든 variant 는 --_bg / --_fg / --_bd 와 hover 짝(--_*-h)을 정의.
   :hover 룰은 단 하나, 변수만 갱신해서 background 직접 지정 충돌 방지.
   ========================================================= */
.pi-btn {
  /* Default variant 값 */
  --_bg: transparent;
  --_fg: var(--text-primary);
  --_bd: var(--border-default);
  --_bg-h: var(--bg-subtle);
  --_fg-h: var(--text-primary);
  --_bd-h: var(--border-default);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font: inherit;
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1.2;
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  user-select: none;
}
.pi-btn:hover {
  background: var(--_bg-h);
  border-color: var(--_bd-h);
  color: var(--_fg-h);
}
.pi-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pi-btn--primary {
  --_bg: var(--accent);
  --_fg: var(--accent-text);
  --_bd: var(--accent);
  --_bg-h: var(--accent-hover);
  --_fg-h: var(--accent-text);
  --_bd-h: var(--accent-hover);
}

.pi-btn--ghost {
  --_bg: transparent;
  --_fg: var(--text-secondary);
  --_bd: transparent;
  --_bg-h: var(--bg-hover);
  --_fg-h: var(--text-primary);
  --_bd-h: transparent;
}

.pi-btn--danger {
  --_bg: var(--danger);
  --_fg: #ffffff;
  --_bd: var(--danger);
  --_bg-h: #b91c1c;       /* danger 보다 살짝 짙은 빨강 */
  --_fg-h: #ffffff;
  --_bd-h: #b91c1c;
}

/* 비활성 — hover 변화 차단 */
.pi-btn[disabled],
.pi-btn--disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.pi-btn--sm { padding: 6px 12px; font-size: var(--fs-sm); }
.pi-btn--lg { padding: 10px 20px; font-size: var(--fs-md); }
.pi-btn--block { display: flex; width: 100%; }

/* =========================================================
   Forms
   ========================================================= */
.pi-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.pi-label {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.pi-label .req { color: var(--danger); margin-left: 2px; }

.pi-input,
.pi-select,
.pi-textarea {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease);
}
.pi-input::placeholder,
.pi-textarea::placeholder { color: var(--text-muted); }
.pi-input:hover,
.pi-select:hover,
.pi-textarea:hover { border-color: var(--text-secondary); }
.pi-input:focus,
.pi-select:focus,
.pi-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.pi-input--error { border-color: var(--danger) !important; }
.pi-input[readonly],
.pi-textarea[readonly] {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: default;
}
.pi-input[readonly]:hover,
.pi-textarea[readonly]:hover { border-color: var(--border-default); }
.pi-help { font-size: var(--fs-xs); color: var(--text-muted); }
.pi-help--error { color: var(--danger); }

/* 상태 플래시 — 페이지 상단 한 줄 메시지 */
.pi-flash {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--success);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.pi-flash--error {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}

.pi-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.pi-textarea { min-height: 96px; resize: vertical; }

.pi-check, .pi-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--text-primary);
  user-select: none;
  font-size: var(--fs-base);
}
.pi-check input, .pi-radio input {
  appearance: none;
  width: 16px; height: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  display: grid; place-content: center;
  cursor: pointer;
}
.pi-radio input { border-radius: 50%; }
.pi-check input:checked,
.pi-radio input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.pi-check input:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.pi-radio input:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* =========================================================
   Cards
   ========================================================= */
.pi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.pi-card__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}
.pi-card__desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* =========================================================
   KPI / Metric Card
   - 단독 사용: <div class="pi-metric">...
   - 그룹 사용: <div class="pi-metric-group"> 안에 .pi-metric 여러 개.
     그룹은 보더 1개로 묶이고 내부 셀 사이에만 구분선이 표시됨.
   ========================================================= */
.pi-metric {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 140px;
}
.pi-metric__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-primary);     /* #0a0a0a — 검정에 가깝게 */
}
.pi-metric__label .arrow {
  color: var(--text-muted);
  font-size: 10px;
  margin-left: 2px;
}
.pi-metric__value {
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -.01em;
  line-height: var(--lh-tight);
}
.pi-metric__chart {
  margin-top: auto;
  height: 48px;
  color: var(--chart-1);
}

/* === Metric Group — 4셀 가로 + 옵션 풀폭 row === */
.pi-metric-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pi-metric-group .pi-metric {
  background: transparent;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border-subtle);
  min-height: 150px;
}
.pi-metric-group .pi-metric:nth-child(4n) { border-right: none; }
.pi-metric-group .pi-metric--full {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-subtle);
  border-right: none;
  min-height: 110px;
}
@media (max-width: 1100px) {
  .pi-metric-group { grid-template-columns: repeat(2, 1fr); }
  .pi-metric-group .pi-metric { border-right: 1px solid var(--border-subtle); }
  .pi-metric-group .pi-metric:nth-child(2n) { border-right: none; }
  .pi-metric-group .pi-metric:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}

/* =========================================================
   Pill Selector — 기간/세그먼트 선택 (24h · 7d · 30d ...)
   ========================================================= */
.pi-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-active);
  border-radius: var(--radius-pill);
}
.pi-pill {
  padding: 5px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-pill:hover { color: var(--text-primary); }
.pi-pill--active {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* =========================================================
   Feature Card — 모델/툴/메뉴 그리드 카드
   <div class="pi-feature">
     <div class="pi-feature__icon"><i class="fa-..."></i></div>
     <div class="pi-feature__title">제목</div>
     <div class="pi-feature__desc">한 줄 설명</div>
   </div>
   ========================================================= */
.pi-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
  text-decoration: none;
  color: inherit;
}
.pi-feature:hover {
  border-color: var(--border-default);
  text-decoration: none;
}
.pi-feature__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 15px;
}
.pi-feature__title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.pi-feature__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* =========================================================
   Badges
   ========================================================= */
.pi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.pi-badge--accent  { background: var(--bg-active); color: var(--text-primary); border-color: var(--border-default); }
.pi-badge--solid   { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.pi-badge--success { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.pi-badge--warning { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.pi-badge--danger  { background: color-mix(in srgb, var(--danger) 10%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.pi-badge--info    { background: color-mix(in srgb, var(--info) 10%, transparent);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.pi-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* =========================================================
   Chart Placeholder — 디자인 미리보기용
   ========================================================= */
.pi-chart-placeholder {
  display: grid;
  place-content: center;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* =========================================================
   Button Row — 버튼 모음 출력
   ========================================================= */
.pi-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* =========================================================
   Updates (right rail)
   ========================================================= */
.pi-updates { display: flex; flex-direction: column; gap: var(--space-5); }
.pi-update {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.pi-update__icon {
  width: 28px; height: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid; place-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  flex-shrink: 0;
}
.pi-update__time  { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.pi-update__title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); margin: 0 0 2px; }
.pi-update__desc  { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; line-height: var(--lh-normal); }

/* =========================================================
   Tables — 운영 전반 공통 데이터 테이블

   <div class="pi-table-wrap">
     <div class="pi-table-toolbar">...</div>          (선택)
     <div class="pi-table-scroll">
       <table class="pi-table">
         <thead>
           <tr>
             <th class="pi-table__th--check"><input type="checkbox"></th>
             <th class="pi-table__th--sortable pi-table__th--sorted">정렬 <i></i></th>
             <th>일반</th>
             <th class="pi-table__th--num">숫자</th>
             <th class="pi-table__th--actions"></th>
           </tr>
         </thead>
         <tbody>
           <tr [class="pi-table__row--selected"]>...</tr>
         </tbody>
       </table>
     </div>
     <div class="pi-table-empty">...</div>            (rows 없을 때)
     <div class="pi-table-footer">                    (선택)
       <div class="pi-table-footer__info">총 N건</div>
       <nav class="pi-pagination">...</nav>
     </div>
   </div>
   ========================================================= */

.pi-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* === Toolbar === */
.pi-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.pi-table-toolbar__left,
.pi-table-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}

/* === Scroll === */
.pi-table-scroll { overflow-x: auto; }

/* === Table === */
.pi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

/* 헤더 — 제목성, 본문 크기, sticky */
.pi-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 12px var(--space-4);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* 헤더 변형 — 정렬 가능 */
.pi-table__th--sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast) var(--ease);
}
.pi-table__th--sortable:hover { color: var(--text-primary); }
.pi-table__th--sortable i {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.pi-table__th--sorted { color: var(--text-primary); }
.pi-table__th--sorted i { color: var(--text-primary); }

/* 헤더/바디 셀 변형 */
.pi-table__th--check,
.pi-table__td--check {
  width: 36px;
  padding-left: var(--space-4);
  padding-right: 0;
}
.pi-table__th--num,
.pi-table__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pi-table__th--center,
.pi-table__td--center { text-align: center; }
.pi-table__th--actions,
.pi-table__td--actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* 바디 셀 */
.pi-table tbody td {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.pi-table tbody tr:last-child td { border-bottom: none; }

/* 행 상태 */
.pi-table tbody tr {
  transition: background var(--dur-fast) var(--ease);
}
.pi-table tbody tr:hover { background: var(--bg-hover); }
.pi-table__row--selected { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.pi-table__row--selected:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pi-table__row--muted td { color: var(--text-muted); }

/* 행 액션 — hover 시 표시 */
.pi-table tbody tr .pi-cell-actions { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.pi-table tbody tr:hover .pi-cell-actions,
.pi-table tbody tr:focus-within .pi-cell-actions { opacity: 1; }

/* 호환: 기존 .num 클래스 유지 */
.pi-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* === 밀도 변형 === */
.pi-table--compact thead th { padding: 6px var(--space-3); }
.pi-table--compact tbody td { padding: 8px var(--space-3); }

/* === 줄무늬 === */
.pi-table--striped tbody tr:nth-child(even) td { background: var(--bg-subtle); }
.pi-table--striped tbody tr:nth-child(even):hover td { background: var(--bg-hover); }

/* =========================================================
   Table Cell Helpers
   ========================================================= */

/* 아바타 + 텍스트 */
.pi-cell-avatar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.pi-cell-avatar__img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-active);
  color: var(--text-secondary);
  display: inline-grid;
  place-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  flex-shrink: 0;
}

/* 메인 + 보조 두 줄 */
.pi-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pi-cell-stack__primary {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-cell-stack__secondary {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 행 액션 그룹 */
.pi-cell-actions {
  display: inline-flex;
  gap: 2px;
  justify-content: flex-end;
}
.pi-cell-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-cell-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* =========================================================
   Table Empty State
   ========================================================= */
.pi-table-empty {
  display: grid;
  place-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
  text-align: center;
}
.pi-table-empty i { font-size: 28px; opacity: .5; }
.pi-table-empty p { margin: 0; font-size: var(--fs-sm); }

/* =========================================================
   Table Footer + Pagination
   ========================================================= */
.pi-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.pi-table-footer__info {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.pi-pagination {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pi-pagination__btn {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-pagination__btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.pi-pagination__btn--active {
  background: var(--bg-active);
  color: var(--text-primary);
  font-weight: 600;
}
.pi-pagination__btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.pi-pagination__btn[disabled]:hover {
  background: transparent;
  color: var(--text-secondary);
}
.pi-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 28px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* =========================================================
   Dropdown — 범용 드롭다운 패널

   <div class="pi-dropdown-anchor">
     <button data-dropdown="user-menu" ...>...</button>
     <div class="pi-dropdown" data-dropdown-panel="user-menu">
       <div class="pi-dropdown__header">...</div>
       <div class="pi-dropdown__divider"></div>
       <a class="pi-dropdown__item" href="...">메뉴</a>
     </div>
   </div>
   ========================================================= */

.pi-dropdown-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pi-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.pi-dropdown[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 좌측 정렬 변형 */
.pi-dropdown--left { right: auto; left: 0; }

/* 헤더 (유저 정보 등) */
.pi-dropdown__header {
  padding: var(--space-3) var(--space-3) var(--space-2);
}
.pi-dropdown__user {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.pi-dropdown__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 구분선 */
.pi-dropdown__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) calc(var(--space-2) * -1);
}

/* 섹션 (논리적 그룹) */
.pi-dropdown__section {
  padding: var(--space-2) var(--space-3);
}

/* 메뉴 항목 */
.pi-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-dropdown__item:hover {
  background: var(--bg-hover);
  text-decoration: none;
}
.pi-dropdown__item i { width: 16px; font-size: 14px; color: var(--text-muted); }
.pi-dropdown__item:hover i { color: var(--text-primary); }
.pi-dropdown__item--danger { color: var(--danger); }
.pi-dropdown__item--danger:hover { color: var(--danger); }
.pi-dropdown__item--danger i,
.pi-dropdown__item--danger:hover i { color: var(--danger); }

/* =========================================================
   Icon Toggle Group — 아이콘으로 한 가지 옵션 선택
   (테마 light · dark · system 같은 패턴)
   ========================================================= */
.pi-icon-toggle-group {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-active);
  border-radius: var(--radius-md);
}
.pi-icon-toggle {
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pi-icon-toggle:hover { color: var(--text-primary); }
.pi-icon-toggle--active {
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* =========================================================
   Input — 작은 변형 / 아이콘 prefix
   ========================================================= */
.pi-input--sm,
.pi-select--sm {
  padding: 6px 10px;
  font-size: var(--fs-sm);
}
.pi-input-icon {
  position: relative;
  display: inline-block;
}
.pi-input-icon > i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}
.pi-input-icon > .pi-input { padding-left: 32px; }