/* ============================================================
   Category KPI Widget (중앙 허브 원형 KPI)
   - 이미지/SVG 파일 없이 CSS 중심 구현 (중앙 아이콘만 inline SVG)
   - conic-gradient: 4분면 틴트 + 외곽 악센트 아크(그린/골드)
   - backdrop-filter: 유리(글래스) 질감
   - ::before: 외곽 아크 링 / ::after: 십자 구분선 + 카디널 도트
   - 사용 예시:
     <div class="category-kpi-widget" role="group" aria-label="업무 유형별 건수">
       <div class="kpi-segment segment-lab">
         <span class="segment-label">실험업</span>
         <span class="segment-count">5<em class="segment-unit">건</em></span>
       </div>
       <div class="kpi-segment segment-video"> ... 영상 ... </div>
       <div class="kpi-segment segment-ux"> ... UX ... </div>
       <div class="kpi-segment segment-edit"> ... 편집 ... </div>
       <div class="kpi-center">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
              aria-hidden="true">
           <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z"/>
           <path d="M14 2v5h5"/>
           <line x1="9" y1="12" x2="15" y2="12"/>
           <line x1="9" y1="16" x2="15" y2="16"/>
         </svg>
         <span class="kpi-center-label">업무 유형</span>
       </div>
     </div>
   ============================================================ */

.category-kpi-widget {
  --kpi-size: 340px;
  --kpi-green: #168044;
  --kpi-dot: #c3a878; /* 카디널 도트 — 구분선 라인(#D2C098)과 같은 베이지 톤, 식별용으로 약간 진하게 */
  --kpi-gold: #85672c;
  --kpi-ink: #1e1b18;
  --kpi-ink-soft: #4a453f;
  --kpi-muted: #8e8780;

  position: absolute; /* 기존 화면 위 오버레이 — top/left는 배치 지점에서 지정 */
  width: var(--kpi-size);
  height: var(--kpi-size);
  border-radius: 50%;
  /* 내부 타이포는 em — --kpi-size에 비례해 자동 스케일 (340px 기준 17px) */
  font-size: calc(var(--kpi-size) * 0.05);
  /* 4분면 공통 반투명 유리 틴트 — 유리 효과는 뒤 콘텐츠 대비에 따라 보임
     (어두운 썸네일 위에서만 두드러짐). 활성 사분면만 .is-active로 골드 틴트가 얹힘 */
  background: rgba(244, 241, 233, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  /* 외곽 밴드도 사분면과 같은 반투명 유리 — backdrop-filter가 보더 영역까지 덮음 */
  border: 10px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 18px 44px rgba(62, 51, 44, 0.22),
    0 4px 12px rgba(62, 51, 44, 0.12),
    inset 0 0 0 3px rgba(255, 255, 255, 0.65); /* 밴드-원판 사이 밝은 그루브 링 */
}

/* 외곽 아크 링: 기본은 중성 링만.
   갈색 아크는 활성 사분면의 림 위치를 따라다니며(--kpi-arc-from)
   양 끝으로 갈수록 연해지는 페이드 처리 */
.category-kpi-widget::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background:
    conic-gradient(
      from var(--kpi-arc-from, 0deg),
      transparent 4deg,
      var(--kpi-arc-color, transparent) 30deg 60deg,
      transparent 86deg 360deg
    ),
    linear-gradient(rgba(229, 226, 219, 0.6), rgba(229, 226, 219, 0.6));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

/* 활성/호버 사분면 위치로 골드 아크 회전 (12시 기준 시계방향 90도씩) */
.category-kpi-widget:has(.segment-video.is-active),
.category-kpi-widget:has(.segment-video:hover) {
  --kpi-arc-from: 0deg;
  --kpi-arc-color: var(--kpi-gold);
}
.category-kpi-widget:has(.segment-edit.is-active),
.category-kpi-widget:has(.segment-edit:hover) {
  --kpi-arc-from: 90deg;
  --kpi-arc-color: var(--kpi-gold);
}
.category-kpi-widget:has(.segment-ux.is-active),
.category-kpi-widget:has(.segment-ux:hover) {
  --kpi-arc-from: 180deg;
  --kpi-arc-color: var(--kpi-gold);
}
.category-kpi-widget:has(.segment-lab.is-active),
.category-kpi-widget:has(.segment-lab:hover) {
  --kpi-arc-from: 270deg;
  --kpi-arc-color: var(--kpi-gold);
}

/* 십자 구분선 + 12시/3시/6시/9시 카디널 도트 */
.category-kpi-widget::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 2;
  background:
    radial-gradient(circle 3.5px at 50% 3px, var(--kpi-dot) 97%, transparent),
    radial-gradient(circle 3.5px at 3px 50%, var(--kpi-dot) 97%, transparent),
    radial-gradient(circle 3.5px at calc(100% - 3px) 50%, var(--kpi-dot) 97%, transparent),
    radial-gradient(circle 3.5px at 50% calc(100% - 3px), var(--kpi-dot) 97%, transparent),
    linear-gradient(
      to right,
      transparent calc(50% - 1px),
      rgba(210, 192, 152, 0.8) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 1px),
      rgba(210, 192, 152, 0.8) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      to right,
      transparent calc(50% - 3px),
      rgba(255, 255, 255, 0.85) calc(50% - 3px) calc(50% + 3px),
      transparent calc(50% + 3px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 3px),
      rgba(255, 255, 255, 0.85) calc(50% - 3px) calc(50% + 3px),
      transparent calc(50% + 3px)
    );
}

/* ---------- 4분면 세그먼트 ---------- */

.kpi-segment {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 1;
  transition: background 0.18s ease;
}

/* 외곽 모서리에 100% 라운드를 주면 사분원이 되어 호버 배경이 원 밖으로 새지 않음 */
.segment-lab {
  top: 0;
  left: 0;
  border-top-left-radius: 100%;
  padding: 10% 0 0 10%;
}
.segment-video {
  top: 0;
  right: 0;
  border-top-right-radius: 100%;
  padding: 10% 10% 0 0;
}
.segment-ux {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 100%;
  padding: 0 0 10% 10%;
}
.segment-edit {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 100%;
  padding: 0 10% 10% 0;
}

/* 활성 틴트 레이어: 아이보리 베이스 위에서 edit_on.svg의 골드(#E9D8B1)가 되는 오버레이.
   텍스트 위에 얹히지 않도록 세그먼트 자체가 아닌 ::before에 적용 */
.kpi-segment::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(216, 178, 88, 0.38);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.kpi-segment:hover::before,
.kpi-segment.is-active::before {
  opacity: 1;
}

.segment-label {
  font-size: 1em;
  font-weight: 700;
  color: var(--kpi-ink-soft);
  letter-spacing: -0.01em;
}

.segment-count {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 2.5em;
  font-weight: 800;
  line-height: 1.05;
  color: var(--kpi-ink);
  font-variant-numeric: tabular-nums;
}

.segment-unit {
  font-style: normal;
  font-size: 0.32em; /* .segment-count(2.5em) 기준 → 위젯 베이스의 0.8배 */
  font-weight: 600;
  color: var(--kpi-muted);
}

/* ---------- 중앙 허브 ---------- */

.kpi-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 3;
  background: #fdfcf9;
  border-radius: 50%;
  /* 시안의 동심원 링: 안쪽 진한 링 + 바깥 은은한 링 
  box-shadow:
    0 4px 14px rgba(62, 51, 44, 0.16),
    0 0 0 6px rgba(255, 255, 255, 0.65),
    0 0 0 13px rgba(253, 252, 249, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);*/
    box-shadow:
    0 4px 14px rgba(62, 51, 44, 0.16),
    0 0 0 6px rgba(255, 255, 255, 0.65),
    inset 0 0 0 13px rgba(253, 252, 249, 0.32);

  text-indent: -9999px;
  overflow: hidden;

}

.kpi-center svg {
  display: none;
  width: 28%;
  height: auto;
  color: var(--kpi-green);
}

.kpi-center-label {
  display: none;
  font-size: 0.76em;
  font-weight: 700;
  color: var(--kpi-muted);
  letter-spacing: -0.01em;
}

/* ---------- 대시보드 중앙 허브 배치 (.center-hub-overlay 내부) ---------- */

.center-hub-overlay .category-kpi-widget {
  --kpi-size: 280px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 기존 SVG 다이얼과 동일 — 뒤 카드 인터랙션 보호 */
}

@media (max-width: 1280px) {
  .center-hub-overlay .category-kpi-widget {
    --kpi-size: 272px;
  }
}