/* =========================
   WCWC (Worldcup) - Clean CSS
   ========================= */

/* --- List (worldcups page) --- */
.wcwc-list {
  display: grid;
  gap: 12px;
}

.wcwc-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}

.wcwc-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.wcwc-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.wcwc-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

/* --- Play wrapper --- */
.wcwc-play {
  max-width: 720px;
  margin: 0 auto;
}

.wcwc-header {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  font-weight: 700;
}

.wcwc-setup {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  flex-wrap: wrap;
}

/* --- Match layout (2 cards, no gap) --- */
.wcwc-match .wcwc-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

/* --- Pick card (button) --- */
.wcwc-pick {
  position: relative;            /* label overlay + flash */
  width: 100%;
  padding: 0;
  border: 1px solid #eee;
  background: #111;              /* 로딩 중 흰/파란 비침 방지 */
  overflow: hidden;              /* 라운드 처리 */
  cursor: pointer;

  /* 모바일 탭 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.wcwc-pick:focus {
  outline: none;
}

/* Round corners only outer edges (A left / B right) */
#wcwcPickA { border-radius: 14px 0 0 14px; }
#wcwcPickB { border-radius: 0 14px 14px 0; }

/* Image */
.wcwc-pick img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  background: #111; /* 이미지 로딩 전 배경 */
}

/* --- Label overlay (inside image bottom) --- */
.wcwc-match .wcwc-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 12px 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-align: center;
  color: #fff;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.15),
    rgba(0,0,0,0)
  );

  pointer-events: none; /* 클릭 방해 X */
}

/* --- VS badge (center overlay) --- */
.wcwc-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;

  width: 64px;
  height: 64px;
  border-radius: 50%;

  background: linear-gradient(135deg, #ff9a00, #ff3d00);
  color: #fff;

  font-size: 26px;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  /* PC에선 살리고, 모바일에서 줄임(아래 media) */
  box-shadow:
    0 0 0 4px #fff,
    0 6px 18px rgba(0,0,0,.45);

  pointer-events: none; /* 클릭 방해 X */
}

/* --- Selection flash (only when clicked) --- */
.wcwc-pick.is-selected {
  transform: scale(1.03);
  transition: transform 0.25s ease-out;
  z-index: 5;
}

.wcwc-pick.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.45);
  animation: wcwcFlash 0.25s ease-out;
  pointer-events: none;
}

@keyframes wcwcFlash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- Result --- */
.wcwc-result {
  text-align: center;
}

.wcwc-result img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #eee;
}

.wcwc-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* =========================
   Mobile optimizations
   ========================= */
@media (max-width: 768px) {
  /* 모바일에서 세로 길어 보이는 문제 방지 */
  .wcwc-pick img {
    height: 240px; /* 220~280 사이 취향 */
  }

  /* VS 크기/그림자 가볍게 (iOS 합성 비용↓) */
  .wcwc-vs {
    width: 44px;
    height: 44px;
    font-size: 18px;
    box-shadow: 0 0 0 3px #fff;
  }

  /* 라벨 크기 살짝 줄이기 */
  .wcwc-match .wcwc-label {
    font-size: 15px;
    padding: 10px 6px;
  }

  /* 선택 확대 효과 약화(모바일 합성 비용↓) */
  .wcwc-pick.is-selected {
    transform: scale(1.01);
  }
}

.wcwc-ranking { max-width: 860px; margin: 0 auto; padding: 10px; }
.wcwc-ranking-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin: 8px 0 12px; align-items:flex-end; }
.wcwc-ranking-title h2 { margin:0; font-size:22px; }
.wcwc-ranking-subtitle { color:#666; font-size:13px; margin-top:4px; }
.wcwc-ranking-meta { color:#222; }
.wcwc-ranking-note { color:#777; font-size:12px; margin-top:4px; }

.wcwc-ranking-table { width:100%; border-collapse: collapse; background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; }
.wcwc-ranking-table th, .wcwc-ranking-table td { padding:10px; border-bottom:1px solid #eee; text-align:left; vertical-align: middle; }
.wcwc-ranking-table thead th { background:#fafafa; font-weight:800; font-size:13px; }

.wcwc-ranking-img img { width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid #eee; display:block; }
.wcwc-ranking-name { font-weight:800; }
.wcwc-ranking-sub { color:#777; font-size:12px; }

.wcwc-ranking-error { padding:14px; background:#fff4f4; border:1px solid #ffd1d1; border-radius:12px; color:#b00020; }

@media (max-width: 768px){

  .wcwc-ranking-table th, .wcwc-ranking-table td { padding:8px; }
}

/* =========================
   WCWC Ranking - Mobile FIX
   ========================= */
@media (max-width: 768px){

  .wcwc-ranking-table{
    table-layout: fixed;
    width: 100%;
  }

  .wcwc-ranking-table th,
  .wcwc-ranking-table td{
    padding: 8px 6px;
    font-size: 13px;
    vertical-align: middle;
    word-break: keep-all;   /* 한글 세로 쪼개짐 방지 */
    white-space: nowrap;
  }

  .wcwc-ranking-table thead th{
    font-size: 12px;
  }

  /* 썸네일: 모바일에서 확실히 크게 */
  .wcwc-ranking-img img{
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
  }

  /* 이름만 줄바꿈 허용 */
  .wcwc-ranking-name{
    white-space: normal;
    font-weight: 800;
    line-height: 1.2;
  }

  /* 컬럼 폭 직접 제어 */
  .wcwc-ranking-table th:nth-child(1),
  .wcwc-ranking-table td:nth-child(1){ width: 40px; }   /* 순위 */

  .wcwc-ranking-table th:nth-child(2),
  .wcwc-ranking-table td:nth-child(2){ width: 56px; }   /* 이미지 */

  .wcwc-ranking-table th:nth-child(4),
  .wcwc-ranking-table td:nth-child(4){ width: 90px; }   /* 우승비율 */

  .wcwc-ranking-table th:nth-child(5),
  .wcwc-ranking-table td:nth-child(5){ width: 90px; }   /* 승률 */
}

@media (max-width: 768px){
  .wcwc-ranking-table{
    table-layout: fixed !important;
    width: 100% !important;
  }

  .wcwc-ranking-table th,
  .wcwc-ranking-table td{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    padding: 8px 6px !important;
  }

  .wcwc-ranking-table thead th{
    font-size: 12px !important;
  }

  /* 이름만 줄바꿈 허용 */
  .wcwc-ranking-name{
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* 썸네일 확실히 */
  .wcwc-ranking-img img{
    width: 44px !important;
    height: 44px !important;
  }

  /* 컬럼 폭 강제 */
  .wcwc-ranking-table th:nth-child(1),
  .wcwc-ranking-table td:nth-child(1){ width: 42px !important; }

  .wcwc-ranking-table th:nth-child(2),
  .wcwc-ranking-table td:nth-child(2){ width: 60px !important; }

  .wcwc-ranking-table th:nth-child(4),
  .wcwc-ranking-table td:nth-child(4){ width: 92px !important; }

  .wcwc-ranking-table th:nth-child(5),
  .wcwc-ranking-table td:nth-child(5){ width: 92px !important; }
}

/* 결과 버튼 영역 */
.wcwc-result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

/* 다시하기 = 메인 */
.wcwc-act-primary {
  width: 220px;
  padding: 14px 0;
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  font-size: 16px;
}

/* 링크 그룹 */
.wcwc-act-link {
  background: none;
  border: none;
  color: #0d6efd;
  font-size: 14px;
  padding: 0 6px;
  text-decoration: underline;
}

/* 링크 둘을 한 줄처럼 보이게 */
.wcwc-result-actions a {
  display: inline-block;
}

/* 결과 버튼: 3개 동일 디자인 통일 */
.wcwc-result-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:24px;
}

/* a, button 모두 같은 버튼처럼 */
.wcwc-result-actions .wcwc-act{
  width: 240px;
  padding: 14px 0;
  border-radius: 14px;
  text-align:center;
  font-size:16px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  border: 1px solid #e7e7e7;
  background:#fff;
  color:#111;
  -webkit-tap-highlight-color: transparent;
}

/* 터치 피드백 */
.wcwc-result-actions .wcwc-act:active{
  transform: scale(0.98);
}

/* 메인(다시하기)만 살짝 강조하고 싶으면 */
.wcwc-result-actions .wcwc-act-primary{
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
}

/* 나머지(보조)도 버튼이지만, 살짝 톤다운 */
.wcwc-result-actions .wcwc-act-ghost{
  background:#fff;
  color:#111;
}

/* 링크(a)에 기본 파란색/밑줄 먹는 거 방지 */
.wcwc-result-actions a.wcwc-act{
  color: inherit;
}

/* 공유 */
.wcwc-share{
  margin:16px auto 0;
  max-width:520px;
  padding:14px;
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
}
.wcwc-share-title{ font-weight:900; margin-bottom:10px; }
.wcwc-share-row{ display:flex; gap:10px; }
.wcwc-share-input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e6e6e6;
  background:#fafafa;
  font-size:13px;
}
.wcwc-share-btn{
  padding:10px 12px;
  border-radius:12px;
  border:0;
  background:#111;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.wcwc-share-hint{
  margin-top:8px;
  font-size:13px;
  color:#0d6efd;
  font-weight:900;
  text-align:center;
}

/* 댓글 */
.wcwc-comments{
  margin:16px auto 0;
  max-width:520px;
  padding:14px;
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
}
.wcwc-comments-title{ font-weight:900; margin-bottom:10px; }
.wcwc-comments-form{ display:flex; flex-direction:column; gap:10px; }
.wcwc-comments-nick{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e6e6e6;
  background:#fff;
  font-size:14px;
}
.wcwc-comments-msg{
  min-height: 90px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e6e6e6;
  background:#fff;
  font-size:14px;
  resize: vertical;
}
.wcwc-comments-btn{
  padding:12px 12px;
  border-radius:12px;
  border:0;
  background:#0d6efd;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.wcwc-comments-hint{
  font-size:13px;
  color:#0d6efd;
  font-weight:900;
  text-align:center;
}
.wcwc-comments-empty{
  color:#777;
  font-size:13px;
  padding: 8px 0;
}
.wcwc-comments-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wcwc-comment{
  border-top:1px solid #eee;
  padding-top:10px;
}
.wcwc-comment-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#777;
}
.wcwc-comment-nick{ font-weight:900; color:#111; }
.wcwc-comment-msg{
  margin-top:6px;
  font-size:14px;
  line-height:1.35;
  color:#222;
  white-space:pre-wrap;
}

/* 모바일 */
@media (max-width:768px){
  .wcwc-share, .wcwc-comments{ margin-left:12px; margin-right:12px; }
  .wcwc-share-row{ flex-direction:column; }
  .wcwc-share-btn{ width:100%; }
}

.wcwc-comments-hint {
  margin-top: 10px;
  font-size: 14px;
  color: #1d5cff;
  font-weight: 600;
}

/* 더 보기 row: 테이블 마지막 줄처럼 */
#wcwcLoadMoreRow td {
  padding: 0;           /* ✅ 높이 줄이는 핵심 */
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* 더 보기 버튼: td 전체를 꽉 채우기 */
#wcwcLoadMore {
  width: 100%;
  display: block;
  padding: 10px 12px;   /* ✅ 세로길이 줄임 (원하면 8px도 가능) */
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* hover 느낌 (선택) */
#wcwcLoadMore:hover {
  filter: brightness(0.97);
}

/* 월드컵 카드: 좌 텍스트 / 우 이미지 */
.wcwc-card--with-cover {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 왼쪽 정보 */
.wcwc-card-left {
  flex: 1;
  min-width: 0;
}

/* 오른쪽 썸네일 영역 */
.wcwc-card-right {
  width: 110px;          /* 모바일 기준 */
  flex: 0 0 110px;
}

/* 이미지가 아래로 길게 안 떨어지게 */
.wcwc-card-cover {
  width: 100%;
  height: 80px;          /* ✅ 여기서 “하단 크게 보임” 문제 해결 */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

@media (min-width: 768px) {
  .wcwc-card-right {
    width: 170px;
    flex: 0 0 170px;
  }
  .wcwc-card-cover {
    height: 110px;
  }
}

.wcwc-ranking-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}
.wcwc-rbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.14);
}
.wcwc-rbtn-ghost{ background:#fff; color:#111; }
.wcwc-rbtn-primary{ background:#111; color:#fff; border-color:#111; }

@media (max-width:520px){
  .wcwc-ranking-actions{ gap:8px; }
  .wcwc-rbtn{ flex:1 1 0; min-width:0; }
}

@media (max-width: 768px) {
  .wcwc-ranking-name {
    display: table-cell !important;
    width: auto !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}

.wcwc-play-head{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin: 10px 0 14px;
}
.wcwc-play-head-left{ flex:1; min-width:0; }
.wcwc-play-title{ font-size:28px; font-weight:800; margin-bottom:6px; }
.wcwc-play-desc{ font-size:14px; color:#666; }
.wcwc-play-head-right{ width:140px; flex:0 0 140px; }
.wcwc-play-cover{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
@media (max-width:520px){
  .wcwc-play-head{ flex-direction:column; align-items:flex-start; }
  .wcwc-play-head-right{ width:100%; flex:0 0 auto; }
  .wcwc-play-cover{ height:120px; }
}