/* assets/css/index-zen.css */
html, body { background:#f5efe6; color:#2b2118; }
.card { background:#fffaf3; border:1px solid #e8dfd3; border-radius:16px; box-shadow:var(--shadow,0 2px 12px rgba(58,42,32,.04)); }
.hint { color:#7a6a5a; }
.btn { border:1px solid #e8dfd3; border-radius:12px; padding:10px 14px; background:#fffaf3; }
.btn-prim { background:#3a2a20; color:#fff; border-color:#3a2a20; }
.tabs { border:1px solid #e8dfd3; background:#fffaf3; }
.tab-btn.active { background:#3a2a20; color:#fff; }
.badge { border:1px solid #e8dfd3; border-radius:9999px; padding:2px 8px; font-size:11px; background:#fffaf3; }
.bracket-box { border:1px solid #e8dfd3; background:#fffaf3; }

/* Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple-circle {
  position:absolute; border-radius:9999px; transform:scale(0);
  animation: ripple .4s ease-out forwards; background: rgba(255,255,255,.35);
}
@keyframes ripple { to { transform:scale(3); opacity:0; } }

/* Summary marker 제거 */
details > summary::-webkit-details-marker { display: none; }

/* Skeleton */
.skel { animation: skel 1.2s ease-in-out infinite; background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%); background-size:400% 100%; }
@keyframes skel { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Scrollbar */
.bracket-wrap::-webkit-scrollbar, #accordionGroups::-webkit-scrollbar { height:8px; width:8px; }
.bracket-wrap::-webkit-scrollbar-thumb, #accordionGroups::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:9999px; }

/* Score line: 팀명 − [입력] : [입력] − 팀명 */
.score-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 72px auto 72px auto minmax(0,1fr);
  align-items:center; gap:.5rem;
}
@media (min-width:640px){
  .score-line{ grid-template-columns:minmax(0,1fr) auto 84px auto 84px auto minmax(0,1fr); }
}
.score-input{ text-align:center; font-variant-numeric: tabular-nums; }
.score-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 상태별 톤(간격/색감 미세 조정) */
.state-pending { background: linear-gradient(0deg, #fff, #fff); }
.state-playing { background: linear-gradient(0deg, var(--playing-bg, #eff6ff), #fff); border-color:#dbeafe; }
.state-done    { background: linear-gradient(0deg, var(--done-bg, #f8fafc), #fff); border-color:#e2e8f0; opacity:.96; }


.badge{
  display:inline-block;
  background:#111827;
  color:#fff;
  border-radius:9999px;
  padding:2px 8px;
  font-size:12px;
}
.pill{
  display:inline-block;
  border:1px solid #e7e5e4;
  border-radius:9999px;
  padding:2px 8px;
  font-size:12px;
}
.pill-live{
  background:#fde68a;
  border-color:#fde68a;
}
/* --- 카드 헤더 보강 --- */
.card-head { display:flex; align-items:flex-start; gap:.75rem; }
.card-head__left { min-width:0; flex:1 1 auto; }    /* 왼쪽: 줄임표 허용 */
.card-head__right { flex:0 0 auto; display:flex; align-items:center; gap:.35rem; white-space:nowrap; } /* 오른쪽: 절대 줄바꿈 금지 */
.badge-nowrap { white-space:nowrap; } /* 뱃지 단일 라인 고정 */

/* 아주 작은 화면에서 버튼/텍스트 살짝 축소 */
@media (max-width:420px){
  .card-head__right .btn { padding:6px 10px; font-size:12px; }
  .card-head__right .badge { font-size:11px; }
}

/* XS에서는 멤버 라인은 숨기고(sm부터 보이기) — '…팀원 미등록' 같은 긴 문자열로 인한 깨짐 방지 */
@media (max-width:640px){
  .members-line { display:block; }
}

/* DnD: 그룹 드롭 하이라이트 */
.group-dropzone { transition: box-shadow .15s, background-color .15s; }
.group-dropzone.dnd-hover { 
  box-shadow: inset 0 0 0 2px rgba(180,135,90,.6);
  background-color: rgba(180,135,90,.06);
}
.group-chip[draggable="true"] { cursor: grab; }
.group-chip.dragging { opacity:.6; }