/* 큐록 · features/water/water.css — 물 컵 카운트 + 목표 버튼 스타일.
   index.html 의 ~370 + ~902 region 에서 추출 (2026-05-07). */

/* 12 cup grid */
.water-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
}
.water-cups {
  display: flex;
  gap: 4px;
  flex: 1;
}
.wc {
  flex: 1;
  min-width: 0;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: all .15s;
  touch-action: manipulation;
}
.wc.on {
  background: #0ea5e9;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, .25);
}
.water-val {
  font-family: 'DM Mono', monospace;
  font-size: var(--text-sm);
  color: var(--blue);
  min-width: 28px;
  text-align: right;
}

/* 12 goal selection buttons (0.5L ~ 6.0L) */
.wg-btn {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border2);
  font-size: var(--text-sm);
  cursor: pointer;
  font-weight: 500;
  background: var(--surface3);
  color: var(--text2);
  transition: all .15s;
}
.wg-btn.active {
  background: var(--blue-bg);
  border-color: #38bdf8;
  color: #38bdf8;
}