/* ===========================
   Search Modal Card UI
   =========================== */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted:#64748b;
  --line:#e6eaf2;

  --ok:#16a34a;     /* 종료 */
  --live:#2563eb;   /* 진행중 */
  --wait:#f59e0b;   /* 미진행/대기 */

  --shadow: 0 10px 28px rgba(2,6,23,.10);
  --r: 16px;
}

.srchModal{ color:var(--text); }
.srchTop{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 12px;
}

.srchBar{
  display:flex;
  gap:10px;
  align-items:center;
  background:#f3f5fb;
  border: 1px solid #e8ecf6;
  border-radius: 999px;
  padding: 8px 10px;
}

.srchInput{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-size: 15px;
  padding: 6px 6px;
}

.srchBtn{
  border:0;
  outline:0;
  cursor:pointer;
  background:#111827;
  color:#fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1;
}
.srchBtn:active{ transform: translateY(1px); }

.srchBody{
  padding: 12px;
  background: transparent;
}

.srchMeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  margin: 8px 2px 10px;
}

.srchList{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Card */
.matchCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow:hidden;
}

.matchCardHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding: 12px 12px 10px;
}

.matchTitle{
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 14px;
  margin:0;
}
/* court/time 칩 묶음 */
.matchSub{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

/* 칩 자체가 줄 전체를 먹지 않게 */
.matchSub .pill{
  display: inline-flex;
  width: auto;
  max-width: 100%;
  gap:6px;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color:#0f172a;
}

.pillDot{
  width:8px;height:8px;border-radius:99px;background:#94a3b8;
}
.pill.live{ border-color: rgba(37,99,235,.18); background: rgba(37,99,235,.08); color:#1d4ed8; }
.pill.live .pillDot{ background: var(--live); }
.pill.done{ border-color: rgba(22,163,74,.18); background: rgba(22,163,74,.08); color:#15803d; }
.pill.done .pillDot{ background: var(--ok); }
.pill.wait{ border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.10); color:#92400e; }
.pill.wait .pillDot{ background: var(--wait); }

.matchBody{
  padding: 10px 12px 12px;
  border-top: 1px dashed var(--line);
}

.teams{
  display:grid;
  grid-template-columns: 1fr 74px 1fr;
  gap: 10px;
  align-items:center;
}

.teamBox{
  min-width:0;
}
.teamName{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
  word-break: keep-all;
}
.teamSubName{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

/* score */
.scoreBox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.score{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: -.2px;
  font-size: 22px;
}
.score .sA{ color: var(--text); }
.score .sB{ color: var(--text); }
.score .colon{ color:#94a3b8; font-weight:700; }
.scoreHint{
  font-size: 11px;
  color: var(--muted);
}

/* actions */
.matchActions{
  display:flex;
  gap: 8px;
  margin-top: 10px;
}
.btn{
  flex:1;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size: 13px;
  font-weight: 800;
}
.btnPrimary{
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.10);
  color:#1d4ed8;
}
.btnGhost{
  background:#f8fafc;
}
.btn:active{ transform: translateY(1px); }

/* Empty state */
.emptyCard{
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: 18px 14px;
  text-align:center;
}
.emptyTitle{
  font-weight: 1000;
  letter-spacing:-.2px;
}
.emptyDesc{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}


/* 모바일에서 칩 크기 살짝 줄여서 한 줄에 더 잘 들어가게 */
@media (max-width: 520px){
  .matchSub .pill{
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ===== 공통: 상태 컬러 변수 ===== */
:root{
  --done: #16a34a;
  --live: #2563eb;
  --wait: #f59e0b;

  --doneBg: rgba(22,163,74,.06);
  --liveBg: rgba(37,99,235,.06);
  --waitBg: rgba(245,158,11,.08);
}

/* ===== 공통: 카드 왼쪽 컬러 바 ===== */
.matchCard{
  position: relative;
  overflow: hidden;
}

.matchCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:#e5e7eb; /* 기본 */
  display:none !important;
}

/* ===== DONE(종료) ===== */
.matchCard.status-done{
  background: linear-gradient(180deg, #fff, var(--doneBg));
  border-color: rgba(22,163,74,.25);
}
.matchCard.status-done::before{ background: var(--done); }

/* ===== LIVE(진행중) ===== */
.matchCard.status-live{
  background: linear-gradient(180deg, #fff, var(--liveBg));
  border-color: rgba(37,99,235,.25);
}
.matchCard.status-live::before{ background: var(--live); }

/* ===== WAIT(미진행) ===== */
.matchCard.status-wait{
  background: linear-gradient(180deg, #fff, var(--waitBg));
  border-color: rgba(245,158,11,.28);
}
.matchCard.status-wait::before{ background: var(--wait); }

/* ===== 상태 pill도 색 확실히 ===== */
.pill.done{
  border-color: rgba(22,163,74,.25);
  background: rgba(22,163,74,.10);
  color: #166534;
}
.pill.live{
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
}
.pill.wait{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.12);
  color: #92400e;
}

/* LIVE는 눈에 띄게 "점멸 점" */
.pill.live .pillDot{
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(37,99,235,.35);
  animation: pulseDot 1.2s infinite;
}

@keyframes pulseDot{
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}


/* 종료: primary 버튼 살짝 그린 톤 */
.status-done .btnPrimary{
  border-color: rgba(22,163,74,.30);
  background: rgba(22,163,74,.10);
  color: #166534;
}

/* 진행중: 버튼 없애기로 했으니 생략 가능 */

/* 미진행: 알림받기 버튼을 주황 느낌 */
.status-wait .btnPrimary{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.12);
  color: #92400e;
}


/* 버튼 모양만 잡고, X는 기존 것을 사용 */
#btn_close, .close, .modalClose{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 20;

  /* ✅ 원래 텍스트(X) 보이게 */
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  color: #0f172a;
}

/* ✅ 이전에 넣었던 X 생성 제거(핵심) */
#btn_close::before,
.close::before,
.modalClose::before{
  content: none !important;
}


/* 모달 기본 */
.modal_pop{ position: fixed; inset: 0; z-index: 9999; display:none; }
.black_bg{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.modal_cont{
  position: relative;
  width: min(920px, 94vw);
  height: min(86vh, 760px);
  margin: 6vh auto 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(2,6,23,.25);
}

/* ✅ 스크롤은 여기서만 발생 */
.modal_cont .scroll{
  position: relative;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ✅ 헤더 sticky */
.srchHeader{
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #e6eaf2;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

/* 리스트 영역 */
.srchBody{
  padding: 12px 14px 16px;
}

/* 닫기 버튼: 항상 보이게 */
.modalClose{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 40;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  color: #0f172a;
}

/* 혹시 ::before로 X 추가했던 흔적 있으면 제거 */
.modalClose::before{ content: none !important; }

/* 검색바 */
.srchBar{
  display: flex;
  align-items: center;
  gap: 10px;
}
.srchInput{
  flex: 1;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #e6eaf2;
  background: #f6f8fd;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
}
.srchBtn{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #e6eaf2;
  background: #0f172a;
  color: #fff;
  cursor: pointer;
}

/* 메타 */
.srchMeta{
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
}