/* stagePAN 룰렛 전용 스타일 — common.css 토큰(var(--kt-…))만 쓴다 */

/* ---- 배치: PC(960px 이상) 2열, 그 아래 1열 ---- */
.rl-layout {
  width: 100%;
  display: grid;
  gap: var(--kt-space-5);
  align-items: start;
}
@media (min-width: 960px) {
  .rl-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
}
.rl-play {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-4);
}

/* ---- 원판 ---- */
.rl-wheel-wrap {
  position: relative;
  width: min(90vw, 480px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: var(--kt-space-3);       /* 바늘 자리 */
}
/* 돌아가는 사각형의 모서리가 가로 스크롤을 만들지 않도록 둥글게 잘라 둔다 */
.rl-wheel-clip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.rl-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.rl-wheel-wrap.is-running .rl-wheel { cursor: progress; }
.rl-wheel-wrap.is-disabled .rl-wheel { cursor: not-allowed; }
.rl-wheel__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rl-slice { stroke: none; }
.rl-empty { fill: var(--kt-muted-bg); }
.rl-lines line { stroke: var(--kt-ui-line); stroke-width: 2; }
.rl-rim { fill: none; stroke: var(--kt-ui-line); stroke-width: 6; }
.rl-labels text {
  font-family: var(--kt-font-body);
  font-weight: 700;
  pointer-events: none;
}
/* 결과: 당첨 칸만 밝게, 나머지 칸은 검정 40% 덮개(글자 아래에 깔려 어두운 칸 글자도 5:1 이상) */
.rl-shade {
  fill: var(--kt-ink);
  fill-opacity: 0;
  pointer-events: none;
  transition: fill-opacity 0.3s;
}
.rl-shade.is-on { fill-opacity: 0.4; }
/* 당첨 칸 테두리: 검정 굵은 선 위에 흰 가는 선. 분홍·하늘·크림·흰·검정 어느 칸에서도 보인다 */
.rl-ring { display: none; pointer-events: none; }
.rl-ring.is-on {
  display: inline;
  animation: rl-win 0.3s ease-in-out 4 alternate;   /* 초당 2번 이하로 반짝 */
}
.rl-ring path { fill: none; stroke-linejoin: round; }
.rl-ring__outer { stroke: var(--kt-ink); stroke-width: 10; }
.rl-ring__inner { stroke: var(--kt-surface); stroke-width: 3; }
@keyframes rl-win {
  to { opacity: 0.15; }
}

/* 바늘(12시, 먹남색 삼각)과 가운데 축 */
.rl-pointer {
  position: absolute;
  top: calc(-1 * var(--kt-space-3));
  left: 50%;
  z-index: 2;
  width: clamp(32px, 9%, 44px);
  transform: translateX(-50%);
  fill: var(--kt-ink);
  stroke: var(--kt-surface);
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}
.rl-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rl-hub__outer { fill: var(--kt-ink); stroke: var(--kt-surface); stroke-width: 2; }
.rl-hub__dot { fill: var(--kt-accent); }

/* ---- 돌리기·결과 띠 ---- */
.rl-main-row { width: 100%; }
.rl-spin { min-width: min(280px, 100%); }
.rl-spin-hint { margin: calc(-1 * var(--kt-space-3)) 0 0; }
.rl-spin-hint:empty { display: none; }

.rl-strip .kt-board__result { font-size: clamp(32px, 8vw, 72px); }
.rl-strip .kt-board__result.is-long { font-size: clamp(26px, 6vw, 52px); }
.rl-strip .kt-board__result[hidden] + .kt-board__sub { margin-top: 0; }

.rl-actions[hidden],
.rl-history[hidden] { display: none; }

/* ---- 최근 결과 ---- */
.rl-history {
  width: 100%;
  max-width: 480px;
  text-align: left;
}
.rl-history__title {
  margin: 0 0 var(--kt-space-2);
  font-size: var(--kt-fs-m);
  font-weight: 700;
  color: var(--kt-ink-soft);
}
.rl-history__num {
  flex: 0 0 3em;
  font-size: var(--kt-fs-s);
  color: var(--kt-ink-soft);
  font-variant-numeric: tabular-nums;
}
.rl-history__name {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---- 항목 편집 면 ---- */
.rl-editor {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.rl-editor.is-locked { opacity: 0.5; }
.rl-editor__title {
  float: left;                         /* fieldset 테두리 위가 아니라 안쪽 첫 줄에 */
  width: 100%;
  padding: 0;
  margin: 0 0 var(--kt-space-2);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-l);
}
.rl-items {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rl-item {
  display: flex;
  align-items: center;
  gap: var(--kt-space-2);
  padding: var(--kt-space-1) 0;
}
.rl-item__swatch {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--kt-line-strong);
  background: var(--sw, transparent);
}
.rl-item__input { flex: 1 1 auto; min-width: 0; }
.rl-item.is-out .rl-item__input {
  text-decoration: line-through;
  color: var(--kt-ink-soft);
}
.rl-item__del { flex: 0 0 auto; }

.rl-add {
  display: flex;
  align-items: center;
  gap: var(--kt-space-2);
  margin-top: var(--kt-space-3);
}
.rl-add__input { flex: 1 1 auto; min-width: 0; }
.rl-add .kt-btn,
.rl-item__del { flex: 0 0 auto; white-space: nowrap; }
#rl-hint { margin: var(--kt-space-2) 0 0; }
.rl-editor__foot { margin-top: var(--kt-space-3); }

/* ---- 전체화면: 원판·돌리기·결과 띠만 ---- */
.kt-is-fullscreen .rl-layout { grid-template-columns: minmax(0, 1fr); }
.kt-is-fullscreen .rl-wheel-wrap { width: min(50vh, 90vw); }
/* 가로로 넓은 화면: 원판은 왼쪽에 크게, 버튼·결과 띠는 오른쪽에 */
@media (min-aspect-ratio: 5/4) {
  .kt-is-fullscreen .rl-play {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--kt-space-5);
    row-gap: var(--kt-space-4);
    align-items: center;
    align-content: center;
  }
  .kt-is-fullscreen .rl-wheel-wrap {
    grid-column: 1;
    grid-row: 1 / span 6;
    width: min(74vh, 55vw);
  }
  .kt-is-fullscreen .rl-play > :not(.rl-wheel-wrap) { grid-column: 2; }
}
.kt-is-fullscreen .rl-strip .kt-board__result { font-size: min(8vw, 11vh); }
.kt-is-fullscreen .rl-strip .kt-board__result.is-long { font-size: min(6vw, 8vh); }