/* card-dispenser — 회전판에 옆으로 꽂힌 카드. 색은 전부 --cd-* 변수로 받는다.
 * 기본값은 K-Heritage 재료(한지·기와·황토·연지)이고, 쓰는 쪽이 자기 토큰으로 덮는다.
 *
 * 3D 시점: .cd-world 의 rotateX 는 **음수**여야 +Z(정면)가 화면 아래·가까운 쪽으로 온다.
 * 양수면 아래에서 올려다본 그림이 된다. 뽑힌 카드는 rotateX(+tilt) 로 되돌려 정면을 본다.
 *
 * 성능: 카드 한 장이 3D 요소 다섯 개(앞·뒤·옆면 셋)라 판 하나가 수백 레이어다. 화면 밖 판은
 * content-visibility 로 아예 그리지 않고, will-change 는 움직이는 동안(.is-live)에만 건다. */

.cd {
  --cd-face-bg: var(--kh-hanji, #f9f8f2);
  --cd-face-fg: var(--kh-giwa, #1d1d1f);
  --cd-back-bg: var(--kh-giwa, #1d1d1f);
  --cd-line: var(--kh-ocher, #b38b6d);
  --cd-edge: #6f5236;
  --cd-mark: var(--kh-yeonji, #a2231d);
  --cd-disc: #141414;
  --cd-hub: #232326;
  --cd-photo-empty: var(--ko-surface-3, #e3e3dd);
  --cd-meta: var(--kh-ocher-text, #8a6346);
  --cd-mono: var(--kh-font-mono, ui-monospace, monospace);
  /* 빛은 오른쪽 위에서 온다 — 옆면 명암과 앞면 광택이 같은 방향을 본다 */
  --cd-light: rgb(255 255 255 / .14);
  --cd-shade: rgb(0 0 0 / .16);
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}

.cd:active { cursor: grabbing; }
.cd:focus-visible { outline: 2px solid var(--ko-accent-primary, #1a472a); outline-offset: -4px; }

/* 화면 밖 판은 그리지 않는다 — 크기는 부모(absolute inset)가 정하므로 자리는 그대로다 */
.cd-scene { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 40%; content-visibility: auto; }
.cd-world {
  position: absolute; left: 50%; top: 66%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: scale(var(--cd-s, 1)) rotateX(calc(var(--cd-tilt, 26deg) * -1));
}
.cd-drum { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.cd.is-live .cd-drum, .cd.is-live .cd-card { will-change: transform; }

.cd-disc {
  position: absolute;
  left: calc(var(--cd-r) * -1 - 38px); top: calc(var(--cd-r) * -1 - 38px);
  width: calc(var(--cd-r) * 2 + 76px); height: calc(var(--cd-r) * 2 + 76px);
  border-radius: 50%;
  /* 가운데가 살짝 밝고 테두리로 갈수록 가라앉는다 — 판이 평면이 아니라 접시로 읽힌다 */
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cd-disc) 78%, var(--cd-hub)) 0%, var(--cd-disc) 58%, color-mix(in srgb, var(--cd-disc) 72%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--cd-line) 55%, transparent);
  transform: rotateX(90deg);
}
.cd-disc::after { content: ""; position: absolute; inset: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cd-line) 22%, transparent); }
.cd-hub {
  position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--cd-hub) 80%, #fff) 0%, var(--cd-hub) 55%, color-mix(in srgb, var(--cd-hub) 75%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--cd-line) 50%, transparent);
  transform: translateY(-5px) rotateX(90deg);
}
.cd-hub::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cd-line) 22%, transparent); }
.cd-count {
  position: absolute; left: -44px; top: -14px; width: 88px; text-align: center;
  font-family: var(--cd-mono); font-size: .625rem; letter-spacing: .08em; color: var(--cd-line);
  font-variant-numeric: tabular-nums; pointer-events: none;
  transform: translateY(-9px) rotateX(var(--cd-tilt, 26deg));
}
/* 정면 슬롯 표시 — 붉은 것은 이 삼각 하나뿐이다 */
.cd-slot {
  position: absolute; left: -5px; top: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--cd-mark);
  transform: translateZ(calc(var(--cd-r) + 66px)) rotateX(90deg);
}
.cd-tick {
  position: absolute; left: -12px; top: -6px; width: 24px; line-height: 12px; text-align: center;
  font-family: var(--cd-mono); font-size: .5625rem; color: color-mix(in srgb, var(--cd-line) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ─── 카드 — 두께 3px 의 얇은 판. 입체감은 두께가 아니라 옆면 명암·앞면 광택·뒷면 무늬가 낸다 ─── */
.cd-card {
  --e: var(--cd-edge);
  position: absolute; left: calc(var(--cd-w) / -2); top: calc(var(--cd-h) / -2);
  width: var(--cd-w); height: var(--cd-h);
  transform-style: preserve-3d;
}
.cd-card.is-out, .cd-card.is-peek { --e: var(--cd-line); }
.cd-card.is-out { cursor: pointer; }
.cd-face { position: absolute; inset: 0; border-radius: 0 6px 0 6px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cd-front { transform: translateZ(1.5px); background: var(--cd-face-bg); color: var(--cd-face-fg); display: flex; flex-direction: column; }
.cd-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, var(--cd-light), transparent 42%, var(--cd-shade));
}
.cd-card.is-out:hover .cd-front::after { background: linear-gradient(160deg, rgb(255 255 255 / .24), transparent 42%, rgb(0 0 0 / .10)); }
.cd-back {
  transform: rotateY(180deg) translateZ(1.5px);
  background: var(--cd-back-bg);
  /* 카드 뒷면 무늬 — 사선 결 + 안쪽 테두리 한 줄. 한 장 한 장이 물건으로 읽힌다 */
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .045) 0 2px, transparent 2px 9px);
  color: var(--cd-line);
  border: 1px solid color-mix(in srgb, var(--cd-line) 30%, transparent);
  outline: 1px solid color-mix(in srgb, var(--cd-line) 28%, transparent); outline-offset: -7px;
  display: flex; align-items: flex-end; padding: 10px;
  font-family: var(--cd-mono); font-size: .625rem; letter-spacing: .06em;
}
/* 옆면 — 두께 3px. 왼쪽은 그늘, 오른쪽은 빛, 위는 그 사이 */
.cd-edge { position: absolute; }
.cd-edge-l { left: 0; top: 0; width: 3px; height: 100%; transform: translateX(-1.5px) rotateY(90deg); background: color-mix(in srgb, var(--e) 70%, #000); }
.cd-edge-r { right: 0; top: 0; width: 3px; height: 100%; transform: translateX(1.5px) rotateY(90deg); background: color-mix(in srgb, var(--e) 82%, #fff); }
.cd-edge-t { left: 0; top: 0; width: 100%; height: 3px; transform: translateY(-1.5px) rotateX(90deg); background: linear-gradient(to right, color-mix(in srgb, var(--e) 70%, #000), color-mix(in srgb, var(--e) 82%, #fff)); }

/* 라이트 모드(lite) — 정면에서 먼 카드는 보이는 면 하나와 바깥 옆면 하나만 남긴다(왼쪽 호는 앞면, 오른쪽 호는 뒷면).
 * 둥근 모서리·overflow·광택·뒷면 무늬도 뗀다. 먼 카드는 작고 옆으로 보여서 차이가 안 보이고, 레이어는 6 → 2 가 된다 */
.cd-card.is-far .cd-edge-r, .cd-card.is-far .cd-edge-t, .cd-card.is-far .cd-front::after { display: none; }
.cd-card.is-far-front .cd-back, .cd-card.is-far-back .cd-front { display: none; }
.cd-card.is-far .cd-face { border-radius: 0; overflow: visible; }
.cd-card.is-far .cd-back { background-image: none; outline: none; }

/* 앞면 구성 — 쓰는 쪽의 render() 가 이 클래스들로 조립한다 */
.cd-photo { height: 52%; background-size: cover; background-position: center; background-color: var(--cd-photo-empty); flex-shrink: 0; }
.cd-body { padding: 7px 8px 5px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.cd-body--text { height: 100%; justify-content: flex-start; gap: 6px; padding-top: 12px; }
.cd-seal { align-self: flex-start; font-size: .5625rem; font-weight: 700; line-height: 1; color: var(--cd-seal-fg, var(--cd-face-bg)); background: var(--cd-seal-bg, var(--cd-back-bg)); padding: 3px 5px; border-radius: 2px; }
.cd-title {
  font-size: .75rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all;
}
.cd-title--wrap { -webkit-line-clamp: 3; line-height: 1.3; }
.cd-meta { font-family: var(--cd-mono); font-size: .5625rem; letter-spacing: .04em; color: var(--cd-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-num { margin-top: auto; font-family: var(--cd-mono); font-size: .5625rem; letter-spacing: .06em; color: var(--cd-meta); }

@media (prefers-reduced-motion: reduce) {
  .cd.is-live .cd-drum, .cd.is-live .cd-card { will-change: auto; }
}