/* ==========================================================================
   random-picker — 이 도구 전용 스타일

   🔴 원판 색은 UI 토큰(--color-*)에서 빌려 오지 않습니다(STYLE.md).
      접근성 때문에 UI 토큰을 바꿀 때 원판 색이 같이 흔들리면 안 되기 때문에
      여기에 전용 팔레트 --wheel-* 를 따로 둡니다.
   ========================================================================== */

:root {
  /* 조각 6색 — 전부 밝은 색조라 --wheel-ink 와 12:1 이상입니다. */
  --wheel-0: #FBE0E6;
  --wheel-1: #DCEAFE;
  --wheel-2: #D8F0E4;
  --wheel-3: #FCEFD2;
  --wheel-4: #E6E2FA;
  --wheel-5: #D6F0F3;
  /* 조각 경계선 — 가장 밝은 조각과 3.70, 가장 어두운 조각과 3.46 (SC 1.4.11 통과) */
  --wheel-line: #6E7C95;
  --wheel-ink: #1A2334;      /* 조각 위 이름. 가장 어두운 조각과도 13:1 */
  --wheel-mark: #172033;     /* 당첨 조각 테두리 */
  --wheel-hub: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wheel-0: #4B2731;
    --wheel-1: #1F3253;
    --wheel-2: #163C2D;
    --wheel-3: #43310F;
    --wheel-4: #2E2A52;
    --wheel-5: #133A40;
    --wheel-line: #93A3C2;   /* 조각과 최소 4.84 */
    --wheel-ink: #F1F5FA;    /* 조각과 최소 11.7 */
    --wheel-mark: #F4F7FB;
    --wheel-hub: #172131;
  }
}

/* --- 명단 입력 접이식 ------------------------------------------------------ */
.roster {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.roster__summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--weight-bold);
  list-style: none;
}

.roster__summary::-webkit-details-marker {
  display: none;
}

.roster__summary-text::before {
  display: inline-block;
  width: 1.1em;
  color: var(--color-primary);
  content: "▸";
}

.roster[open] .roster__summary-text::before {
  content: "▾";
}

.roster__summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.roster__body {
  padding: 0 var(--space-4) var(--space-4);
}

.roster__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.roster__actions .button {
  flex: 1 1 160px;
}

/* --- 체크박스 --------------------------------------------------------------
   공통으로 올릴 만한 패턴입니다(notes 참고). 지금은 이 도구에만 있습니다.
   -------------------------------------------------------------------------- */
.switches {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.check {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check__box {
  position: relative;
  top: 2px;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 2px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
}

.check input:checked + .check__box {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.check input:checked + .check__box::after {
  position: absolute;
  top: -3px;
  left: 3px;
  color: var(--color-on-primary);
  content: "✓";
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.check:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.check:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}

.check__text {
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.check__sub {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}

/* --- 원판 ------------------------------------------------------------------ */
.wheel-area {
  margin-top: var(--space-5);
}

.wheel-frame {
  max-width: 420px;
  margin: 0 auto var(--space-4);
}

.wheel {
  display: block;
  width: 100%;
  height: auto;
}

.wheel__slice {
  stroke: var(--wheel-line);
  stroke-width: 1.2;
}

.wheel__slice[data-color="0"] { fill: var(--wheel-0); }
.wheel__slice[data-color="1"] { fill: var(--wheel-1); }
.wheel__slice[data-color="2"] { fill: var(--wheel-2); }
.wheel__slice[data-color="3"] { fill: var(--wheel-3); }
.wheel__slice[data-color="4"] { fill: var(--wheel-4); }
.wheel__slice[data-color="5"] { fill: var(--wheel-5); }

/* 당첨 조각은 색이 아니라 **굵은 테두리**로 표시합니다(색만으로 구분 금지). */
.wheel__sector[data-winner="1"] .wheel__slice {
  stroke: var(--wheel-mark);
  stroke-width: 4;
}

.wheel__label {
  fill: var(--wheel-ink);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

.wheel__blank {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-dasharray: 6 6;
  stroke-width: 1.5;
}

.wheel__blank-label {
  fill: var(--color-text-muted);
  font-family: var(--font-sans);
}

.wheel__hub {
  fill: var(--wheel-hub);
  stroke: var(--wheel-line);
  stroke-width: 1.5;
}

.wheel__pointer {
  fill: var(--color-accent);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.spin-button {
  font-size: var(--text-md);
  min-height: 60px;
}

.wheel-status {
  min-height: 28px;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* --- 결과 ------------------------------------------------------------------ */
.winner {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  text-align: center;
}

.winner__name {
  margin: 0;
  overflow-wrap: anywhere;
}

/* 결과가 나타날 때만 아주 짧게 밝아집니다. 회전을 끈 분들께도 이 페이드는 남깁니다.
   app.js 가 뽑을 때마다 .is-new 를 떼었다 붙여 다시 재생시킵니다. */
.winner__name.is-new {
  animation: winner-fade 220ms ease-out;
}

@keyframes winner-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lists {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.list-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.list-card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
}

.list-card__count {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}

.picked-list,
.left-list {
  margin: 0;
  padding: 0 0 0 var(--space-5);
  max-height: 320px;
  overflow-y: auto;
}

.left-list {
  list-style: disc;
}

.picked-list li,
.left-list li {
  margin-bottom: var(--space-1);
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.list-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  list-style: none;
  margin-left: calc(-1 * var(--space-5));
}

.result-actions {
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.result-actions .button {
  flex: 1 1 150px;
}

/* --- 인쇄물 ----------------------------------------------------------------
   🔴 화면 토큰(--color-*)을 쓰지 않습니다. print-sheet.css 의 먹 6단계만 씁니다.
   -------------------------------------------------------------------------- */
.picked-print__title {
  margin: 0 0 3mm;
  padding-bottom: 2mm;
  border-bottom: 1.2pt solid var(--ink-900);
  color: var(--ink-900);
  font-size: 16pt;
}

.picked-print__meta {
  margin: 0 0 6mm;
  color: var(--ink-500);
  font-size: 10pt;
}

.picked-print__list {
  margin: 0;
  padding-left: 8mm;
  color: var(--ink-900);
  font-size: 12pt;
  line-height: 1.9;
}

.picked-print__list li {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* --- 모바일 ----------------------------------------------------------------- */
@media (max-width: 760px) {
  .lists {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster__actions .button,
  .result-actions .button {
    flex: 1 1 100%;
  }
}

/* --- 동작 줄이기 ------------------------------------------------------------
   회전은 app.js 가 아예 건너뜁니다. 여기서는 남은 전환 효과를 없앱니다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .winner__name.is-new {
    animation-duration: 1ms;
  }

  .button {
    transition: none;
  }
}