/* ============================================================
   랜덤 숫자 생성기 전용 스타일
   - 이 도구의 디자인 컨셉: "번호 추첨 전광판"
     짙은 남색 판 위에 크림색 숫자 타일이 딱 떨어지게 놓인다.
     주사위(초록 펠트)·로또(복권 용지)와 같은 계열이되 색으로 구분된다.
   - 색상·간격 등 공통 토큰은 common.css 재사용
   ============================================================ */

/* ---- 이 도구만의 색 (전광판) ---- */
:root {
  --rd-board: #223049;         /* 전광판 바탕: 짙은 남색 */
  --rd-board-deep: #1a2539;
  --rd-board-line: rgba(255, 255, 255, .1);
  --rd-tile: #f7f1e1;          /* 숫자 타일: 상아색 */
  --rd-tile-shade: #e2d8c1;
  --rd-tile-ink: #22283a;
  --rd-glow: #f0c96b;          /* 표시등 노란빛 */
}
:root[data-theme="dark"] {
  --rd-board: #1a2438;
  --rd-board-deep: #131b2b;
  --rd-tile: #ede5d0;
  --rd-tile-shade: #d3c9ae;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rd-board: #1a2438;
    --rd-board-deep: #131b2b;
    --rd-tile: #ede5d0;
    --rd-tile-shade: #d3c9ae;
  }
}

/* ---- 도입부 (다른 도구와 같은 골격) ---- */
.tool-intro {
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-4);
}
.tool-intro h1 {
  margin: 0 0 var(--space-3);
  max-width: 20ch;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.tool-intro .lead { max-width: 54ch; }
.lead {
  color: var(--color-text-sub);
  margin: var(--space-2) 0 var(--space-2);
  max-width: 60ch;
  font-size: 1.02rem;
}
.lead-note {
  color: var(--color-text-sub);
  font-size: .85rem;
  opacity: .85;
  margin: 0 0 var(--space-5);
}

/* ---- 설정 카드 ---- */
.rd-setup {
  display: grid;
  gap: var(--space-4);
}
.rd-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.rd-label {
  flex: 0 0 auto;
  width: 96px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text-sub);
}
.rd-preset-row { align-items: flex-start; }
.rd-preset-row .rd-label { padding-top: 7px; }

/* 범위 입력 */
.rd-range {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}
.rd-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rd-field-cap {
  font-size: .74rem;
  color: var(--color-text-sub);
  letter-spacing: .02em;
}
.rd-field input {
  font: inherit;
  font-variant-numeric: tabular-nums;
  width: 8.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
}
.rd-field input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.rd-tilde {
  padding-bottom: 8px;
  color: var(--color-text-sub);
}

/* 자주 쓰는 범위 칩 */
.rd-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rd-chip {
  font: inherit;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 5px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
}
.rd-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* 개수 스테퍼 */
.rd-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.rd-step {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.rd-step:hover { border-color: var(--color-primary); }
.rd-count input {
  font: inherit;
  font-variant-numeric: tabular-nums;
  width: 5rem;
  text-align: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.rd-switches {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.rd-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .92rem;
  cursor: pointer;
}
.rd-check input { accent-color: var(--color-primary); }

/* ---- 프리셋 ---- */
.rd-preset-box {
  flex: 1 1 320px;
  display: grid;
  gap: var(--space-3);
}
.rd-preset-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  min-height: 32px;
}
.rd-preset-empty {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-sub);
}
.rd-preset {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-bg);
}
.rd-preset-apply {
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--color-text);
  padding: 5px var(--space-3);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-preset-apply:hover { color: var(--color-primary); }
.rd-preset-del {
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-sub);
  padding: 0 9px;
}
.rd-preset-del:hover { color: var(--color-primary); background: var(--color-primary-weak); }

.rd-preset-save {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.rd-preset-save input {
  font: inherit;
  font-size: .92rem;
  flex: 0 1 15rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

/* ============================================================
   전광판
   ============================================================ */
.rd-board {
  margin: var(--space-5) 0 var(--space-4);
}
.rd-screen {
  position: relative;
  background:
    linear-gradient(180deg, var(--rd-board) 0%, var(--rd-board-deep) 100%);
  border: 1px solid var(--rd-board-deep);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow);
  padding: clamp(24px, 5vw, 44px) var(--space-5);
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 판 위에 옅은 세로 줄: 전광판 느낌만 주고 숫자를 방해하지 않게 */
.rd-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg, transparent 0 13px, var(--rd-board-line) 13px 14px);
  opacity: .5;
  pointer-events: none;
}
.rd-screen > * { position: relative; }

.rd-idle {
  margin: 0;
  color: rgba(255,255,255,.55);
  font-size: .95rem;
  text-align: center;
}

.rd-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  width: 100%;
}
.rd-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--rd-tile-ink);
  background: linear-gradient(180deg, var(--rd-tile) 0%, var(--rd-tile-shade) 100%);
  border-radius: 8px;
  padding: .28em .34em;
  min-width: 1.6em;
  text-align: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  animation: rd-pop .26s ease-out both;
  animation-delay: calc(var(--i) * 40ms);
}
/* 개수가 많으면 타일을 줄여 한 화면에 담는다 */
.rd-numbers.is-many .rd-num {
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  padding: .3em .45em;
  border-radius: 6px;
  animation-delay: calc(var(--i) * 16ms);
}
.rd-numbers.is-rolling .rd-num {
  animation: none;
  color: var(--rd-tile-ink);
  opacity: .8;
}

@keyframes rd-pop {
  from { transform: translateY(-8px) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-num { animation: none; }
}

/* ---- 결과 아래 정보줄 ---- */
.rd-meta {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
  text-align: center;
}
.rd-redraw {
  margin: var(--space-2) 0 0;
  font-size: .85rem;
  color: var(--color-primary);
  text-align: center;
}
.rd-notice {
  margin: var(--space-3) auto 0;
  max-width: 46rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-weak);
  color: var(--color-text);
  font-size: .9rem;
  text-align: center;
}

/* ---- 버튼 줄 ---- */
.rd-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.rd-draw-btn {
  font: inherit;
  font-size: 1.06rem;
  font-weight: 700;
  cursor: pointer;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.rd-draw-btn:hover { filter: brightness(1.06); }
.rd-draw-btn:active { transform: translateY(1px); }
.rd-ghost { border-radius: 999px; }

/* ---- 좁은 화면 ---- */
@media (max-width: 640px) {
  .rd-label { width: 100%; }
  .rd-range { width: 100%; }
  .rd-field { flex: 1 1 0; }
  .rd-field input { width: 100%; }
  .rd-preset-row .rd-label { padding-top: 0; }
}