/* ============================================================
   물 정렬 퍼즐 전용 스타일
   - 색 구분이 핵심이라 바탕은 중립 톤(공통 종이색)을 그대로 두고,
     병 안 색 블록만 또렷하게 보이도록 한다.
   - 색은 색각 이상 사용자도 구분되게 서로 충분히 다른 색조로 골랐고,
     "색 번호 보기"를 켜면 블록마다 번호가 함께 표시된다.
   - 병은 시험관 느낌: 위는 트인 유리, 아래는 둥근 바닥.
   ============================================================ */

:root {
  /* 8색 팔레트: 서로 충분히 다른 색조(색각 이상 배려) */
  --ws-c0: #e34a33; /* 1 주홍 */
  --ws-c1: #3573d6; /* 2 파랑 */
  --ws-c2: #3aa856; /* 3 초록 */
  --ws-c3: #f2a93b; /* 4 노랑 */
  --ws-c4: #8a5cf0; /* 5 보라 */
  --ws-c5: #16b1c4; /* 6 청록 */
  --ws-c6: #e05fb0; /* 7 분홍 */
  --ws-c7: #9c6b3f; /* 8 갈색 */

  --ws-glass: rgba(255, 255, 255, .5);
  --ws-glass-edge: rgba(38, 34, 28, .22);
  --ws-glass-in: rgba(38, 34, 28, .05);
}
:root[data-theme="dark"], html[data-theme="dark"] {
  --ws-glass: rgba(255, 255, 255, .07);
  --ws-glass-edge: rgba(255, 255, 255, .18);
  --ws-glass-in: rgba(255, 255, 255, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ws-glass: rgba(255, 255, 255, .07);
    --ws-glass-edge: rgba(255, 255, 255, .18);
    --ws-glass-in: rgba(255, 255, 255, .04);
  }
}

/* ---- 도입부 ---- */
.tool-intro { padding: clamp(30px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.tool-intro h1 { margin: 0 0 var(--space-4); }
.tool-intro .lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 56ch;
  margin: 0;
}
.tool-intro .lead strong { color: var(--color-text); }
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- 설정 ---- */
.ws-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.ws-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ws-lab { font-size: .95rem; font-weight: 700; color: var(--color-text-sub); min-width: 60px; }
.ws-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ws-chip {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.ws-chip:hover:not(:disabled) { border-color: var(--color-primary); }
.ws-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.ws-actions { margin-left: auto; }
.ws-btn {
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.ws-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.ws-btn:active:not(:disabled) { transform: scale(.97); }
.ws-btn:disabled { opacity: .45; cursor: default; }

/* ---- 상태 줄 ---- */
.ws-stage { max-width: 640px; margin: 0 auto; }
.ws-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.ws-stat { font-size: .95rem; color: var(--color-text-sub); font-variant-numeric: tabular-nums; }
.ws-stat b { font-size: 1.3rem; color: var(--color-text); margin-left: 4px; }

/* ---- 게임판 ---- */
.ws-board-wrap { position: relative; display: grid; }
.ws-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 3vw, 22px) clamp(12px, 3.4vw, 26px);
  padding: clamp(14px, 3vw, 26px) clamp(8px, 2vw, 18px);
  min-height: 220px;
}

/* 병 = 시험관 */
.ws-tube {
  --cap: 4;
  --bw: clamp(42px, 11vw, 56px);
  --bh: clamp(38px, 9.6vw, 50px);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  padding: 5px 5px 0;
  width: calc(var(--bw) + 10px);
  border: 2px solid var(--ws-glass-edge);
  border-top: none;
  border-radius: 6px 6px 22px 22px / 6px 6px 30px 30px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 40%, transparent 62%, rgba(38,34,28,.06)),
    var(--ws-glass-in);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ws-tube:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ws-fill {
  display: flex;
  flex-direction: column-reverse;   /* 배열 index0 = 바닥 */
  justify-content: flex-start;
  gap: 0;
  width: var(--bw);
  height: calc(var(--bh) * var(--cap));
  border-radius: 3px 3px 20px 20px / 3px 3px 26px 26px;
  overflow: hidden;
}
.ws-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--bh);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.14);
}
/* 위층과 아래층 경계를 아주 옅게 */
.ws-block + .ws-block { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.14), 0 -1px 0 rgba(0,0,0,.06); }

.ws-c0 { background: var(--ws-c0); }
.ws-c1 { background: var(--ws-c1); }
.ws-c2 { background: var(--ws-c2); }
.ws-c3 { background: var(--ws-c3); }
.ws-c4 { background: var(--ws-c4); }
.ws-c5 { background: var(--ws-c5); }
.ws-c6 { background: var(--ws-c6); }
.ws-c7 { background: var(--ws-c7); }

/* 색 번호 라벨(색맹 배려 모드에서만 표시) */
.ws-num {
  font-size: .82rem;
  font-weight: 800;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  opacity: 0;
  font-variant-numeric: tabular-nums;
}
.ws-board[data-cb="1"] .ws-num { opacity: 1; }

/* 선택된 출발 병: 살짝 들어올림 */
.ws-tube.is-selected {
  transform: translateY(-14px);
  border-color: var(--color-primary);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.12);
}
.ws-tube.is-done { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--ws-glass-edge)); }
.ws-tube.is-done .ws-fill { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent) inset; }
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ws-tube.is-done { border-color: var(--color-primary); }
}

/* 새로 부어진 블록 떨어지는 느낌 */
@keyframes ws-drop { from { transform: translateY(-160%); } to { transform: translateY(0); } }
.ws-block.ws-drop { animation: ws-drop .18s ease-out; }

/* 잘못된 붓기 흔들림 */
@keyframes ws-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.ws-tube.is-bad { animation: ws-shake .3s ease; border-color: var(--color-primary); }

/* ---- 오버레이(완주) ---- */
.ws-board-wrap > .ws-overlay,
.ws-board-wrap > .ws-board { grid-area: 1 / 1; }
.ws-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ws-overlay { background: var(--color-bg); }
}
.ws-overlay-panel { text-align: center; padding: var(--space-5); max-width: 100%; }
.ws-ov-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-text);
}
.ws-ov-moves { margin: 0 0 var(--space-1); font-size: 1.02rem; color: var(--color-text-sub); }
.ws-ov-moves b { font-size: 2.4rem; color: var(--color-primary); font-family: var(--font-serif); }
.ws-ov-time { margin: 0 0 var(--space-2); font-size: .95rem; color: var(--color-text-sub); }
.ws-ov-line { margin: 0 0 var(--space-4); font-size: .95rem; color: var(--color-text-sub); min-height: 1.2em; }
.ws-ov-line b { color: var(--color-text); }
.ws-new { color: var(--color-primary); font-weight: 700; }
.ws-btn-big {
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 14px 38px;
  border-radius: 999px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.ws-btn-big:hover { filter: brightness(1.06); }
.ws-btn-big:active { transform: scale(.97); }

/* ---- 안내 문구 ---- */
.ws-msg {
  min-height: 1.7em;
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ---- 본문 ---- */
.prose { max-width: 720px; margin: clamp(40px, 6vw, 64px) auto 0; }
.prose h2 { margin: 0 0 var(--space-3); }
.prose p { margin: 0 0 var(--space-3); color: var(--color-text); }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose li strong { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  .ws-tube { transition: none; }
  .ws-block.ws-drop { animation: none; }
  .ws-tube.is-bad { animation: none; }
}

@media (max-width: 440px) {
  .ws-lab { min-width: 100%; }
  .ws-actions { margin-left: 0; }
  .ws-status { gap: var(--space-4); }
}