/* ============================================================
   주사위 던지기 전용 스타일
   - 이 도구의 디자인 컨셉: "보드게임 테이블"
     짙은 펠트 매트 위에 아이보리 주사위. D6는 진짜 3D 큐브로 구르고,
     다면체(D4~D100)는 도형 실루엣 안에서 숫자가 구른다.
   - 색상·간격 등 공통 토큰은 common.css 재사용
   ============================================================ */

/* ---- 이 도구만의 색 (펠트 매트) ---- */
:root {
  --felt: #2f5d44;            /* 카드 테이블의 초록 펠트 */
  --felt-deep: #244a36;
  --felt-line: rgba(255, 255, 255, .12);
  --die-ivory: #f7f1e1;       /* 주사위 몸통: 상아색 */
  --die-ivory-shade: #e3d9bf;
  --die-ink: #2b2620;         /* 눈금 잉크 */
  --die-red: #c23b30;         /* 1의 눈은 붉게 (한국·일본 주사위 관습) */
}
:root[data-theme="dark"] {
  --felt: #223f30;
  --felt-deep: #1a3125;
  --die-ivory: #efe7d2;
  --die-ivory-shade: #d8cdb0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --felt: #223f30;
    --felt-deep: #1a3125;
    --die-ivory: #efe7d2;
    --die-ivory-shade: #d8cdb0;
  }
}

/* ---- 도입부 (다른 도구와 같은 골격) ---- */
.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);
}

/* ---- 설정 카드 ---- */
.dc-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.dc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dc-label {
  font-weight: 700;
  font-size: .92rem;
  min-width: 84px;
}
.dc-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.dc-type {
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 7px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
}
.dc-type:hover { border-color: var(--color-primary); }
.dc-type.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.dc-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.dc-step {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
}
.dc-step:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dc-step:disabled { opacity: .35; cursor: default; }
.dc-step:disabled:hover { border-color: var(--color-border); color: var(--color-text); }
.dc-count-num {
  font-weight: 700;
  font-size: 1.15rem;
  min-width: 1.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dc-hint { font-size: .85rem; color: var(--color-text-sub); }

/* ---- 펠트 테이블 ---- */
.dc-table {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(var(--felt), var(--felt-deep));
  border: 1px solid var(--felt-deep);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 8px var(--felt-deep), inset 0 0 0 9px var(--felt-line), var(--shadow);
  padding: clamp(28px, 5vw, 48px) var(--space-4) var(--space-5);
  text-align: center;
}
.dc-dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  min-height: 96px;
}

/* ---- D6: 3D 큐브 ---- */
.die3d {
  width: 72px;
  height: 72px;
  perspective: 420px;
}
.die3d .cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.2, .75, .25, 1);
}
.cube-face {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--die-ivory), var(--die-ivory-shade));
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 12px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 12px;
  box-sizing: border-box;
}
.cube-face .pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--die-ink);
  align-self: center;
  justify-self: center;
}
.cube-face[data-face="1"] .pip { background: var(--die-red); width: 17px; height: 17px; }
/* 눈 배치: 3×3 그리드의 칸 번호(1~9)에 점을 놓는다 */
.pip[data-cell="1"] { grid-area: 1 / 1; }
.pip[data-cell="2"] { grid-area: 1 / 2; }
.pip[data-cell="3"] { grid-area: 1 / 3; }
.pip[data-cell="4"] { grid-area: 2 / 1; }
.pip[data-cell="5"] { grid-area: 2 / 2; }
.pip[data-cell="6"] { grid-area: 2 / 3; }
.pip[data-cell="7"] { grid-area: 3 / 1; }
.pip[data-cell="8"] { grid-area: 3 / 2; }
.pip[data-cell="9"] { grid-area: 3 / 3; }

/* ---- 다면체(D4~D100): 도형 실루엣 + 숫자 ---- */
.die-flat {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.die-flat .shape {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--die-ivory), var(--die-ivory-shade));
}
.die-flat .num {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--die-ink);
  font-variant-numeric: tabular-nums;
}
/* 면 수별 실루엣 */
.die-flat[data-sides="4"]  .shape { clip-path: polygon(50% 2%, 98% 96%, 2% 96%); }
.die-flat[data-sides="4"]  .num   { transform: translateY(12px); }
.die-flat[data-sides="8"]  .shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.die-flat[data-sides="10"] .shape { clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.die-flat[data-sides="12"] .shape { clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%); }
.die-flat[data-sides="20"] .shape { clip-path: polygon(50% 0, 99% 26%, 99% 74%, 50% 100%, 1% 74%, 1% 26%); }
.die-flat[data-sides="100"] .shape { border-radius: 50%; }

/* 구르는 동안의 연출 */
@keyframes dc-tumble {
  0%   { transform: rotate(0) translateY(0); }
  25%  { transform: rotate(-14deg) translateY(-14px); }
  50%  { transform: rotate(10deg) translateY(0); }
  75%  { transform: rotate(-6deg) translateY(-6px); }
  100% { transform: rotate(0) translateY(0); }
}
.die-flat.is-rolling { animation: dc-tumble .9s ease-in-out; }
.die-flat.is-rolling .num { opacity: .75; }

/* ---- 결과·버튼 ---- */
.dc-result {
  margin: var(--space-5) auto 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.dc-result .sum { color: #ffd98a; }
.dc-actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dc-roll-btn {
  font: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
  padding: 13px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  transition: transform .15s ease;
}
.dc-roll-btn:hover { transform: translateY(-2px); }
.dc-roll-btn:disabled { opacity: .6; cursor: default; transform: none; }
.dc-copy { background: rgba(255, 255, 255, .92); }

/* ---- 굴린 기록 ---- */
.dc-history-wrap { margin-top: var(--space-4); }
.dc-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dc-history-title { margin: 0; font-size: 1.05rem; }
.dc-history {
  margin: 0;
  padding-left: 1.4em;
  font-variant-numeric: tabular-nums;
}
.dc-history li {
  margin-bottom: var(--space-1);
  color: var(--color-text-sub);
  font-size: .92rem;
}
.dc-history li strong { color: var(--color-text); }

/* ---- 본문/FAQ (다른 도구와 같은 골격) ---- */
.prose { margin-top: var(--space-6); }
.prose h2 { margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.prose p, .prose li { color: var(--color-text); }
.prose em { color: var(--color-primary); font-style: normal; font-weight: 600; }
.prose ol, .prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.prose summary { cursor: pointer; font-weight: 600; }
.prose details[open] summary { margin-bottom: var(--space-2); }
.prose details p { margin: 0; color: var(--color-text-sub); }

@media (prefers-reduced-motion: reduce) {
  .die3d .cube { transition: none; }
  .die-flat.is-rolling { animation: none; }
  .dc-roll-btn { transition: none; }
  .dc-roll-btn:hover { transform: none; }
}