/* ── 사이트 휠 — 네 사이트 공통 (shared/wheel.js) ───────────────
   사이트마다 색 변수가 달라서 휠은 자기 색을 따로 갖는다.
   밝게/어둡게만 각 사이트의 data-theme 을 따른다.              */
.wh-root {
  --wh-ink: #23211d; --wh-paper: #faf8f4; --wh-accent: #8a5a2b; --wh-muted: #8b8477; --wh-line: #d8d1c4;
  --wh-seg: rgba(28, 26, 23, .84); --wh-seg-here: rgba(28, 26, 23, .5); --wh-hub: rgba(250, 248, 244, .97);
}
[data-theme="dark"] .wh-root {
  --wh-ink: #e6e9ef; --wh-paper: #0f1116; --wh-accent: #6d9cff; --wh-muted: #8b93a3; --wh-line: #2c3444;
  --wh-seg: rgba(10, 12, 16, .88); --wh-seg-here: rgba(10, 12, 16, .55); --wh-hub: rgba(19, 22, 29, .97);
}

/* 떠 있는 버튼 — 나침반. 열리면 바늘이 반 바퀴 돈다 */
.wh-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 9990; width: 48px; height: 48px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--wh-ink); color: var(--wh-paper);
  /* 옅은 테두리 — 포트폴리오처럼 어두운 배경에서도 버튼이 묻히지 않게 */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), background .2s;
}
.wh-fab:hover { transform: scale(1.08); }
/* 끌어서 옮기기 — 폰에서 끄는 동안 화면이 스크롤되지 않게 */
.wh-fab { touch-action: none; user-select: none; -webkit-user-select: none; }
.wh-fab.dragging { cursor: grabbing; transform: scale(1.12); box-shadow: 0 12px 28px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .16); }
.wh-fab svg { width: 24px; height: 24px; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.wh-open .wh-fab { background: var(--wh-accent); color: #fff; }
.wh-open .wh-fab svg { transform: rotate(180deg); }

/* 어둡게 + 휠 */
.wh-dim {
  position: fixed; inset: 0; z-index: 9980; background: rgba(15, 14, 12, .45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.wh-open .wh-dim { opacity: 1; pointer-events: auto; }
.wh-wheel {
  position: fixed; z-index: 9985; left: 50%; top: 50%; width: min(420px, 92vw); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.6) rotate(-25deg); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .35s cubic-bezier(.3, 1.3, .5, 1);
}
.wh-open .wh-wheel { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.wh-wheel svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wh-seg path { fill: var(--wh-seg); stroke: rgba(255, 255, 255, .08); stroke-width: 2; cursor: pointer; transition: fill .15s; }
.wh-seg.hot path { fill: var(--wh-accent); }
.wh-seg.here path { fill: var(--wh-seg-here); cursor: default; }
.wh-seg text { pointer-events: none; }
.wh-seg .ic { font-size: 30px; text-anchor: middle; dominant-baseline: central; }
.wh-seg .nm { font: 700 12.5px Pretendard, 'Noto Sans KR', sans-serif; fill: #efe9df; text-anchor: middle; }
.wh-seg .no { font: 600 10px 'IBM Plex Mono', monospace; fill: rgba(239, 233, 223, .45); text-anchor: middle; }
.wh-seg.here .nm { fill: #9a927f; }
.wh-hub circle { fill: var(--wh-hub); stroke: var(--wh-line); stroke-width: 1.5; }
.wh-hub .t { font: 700 19px 'Noto Serif KR', serif; fill: var(--wh-ink); text-anchor: middle; }
.wh-hub .d { font: 500 11.5px Pretendard, sans-serif; fill: var(--wh-muted); text-anchor: middle; }
.wh-hub .u { font: 500 10.5px 'IBM Plex Mono', monospace; fill: var(--wh-accent); text-anchor: middle; }
.wh-hint {
  position: fixed; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 9986; color: #efe9df;
  font: 500 12px Pretendard, sans-serif; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap;
}
.wh-open .wh-hint { opacity: .8; }
@media (max-width: 600px) { .wh-hint { display: none; } }