:root{
  --bg:#0b0f17;
  --card:#121a27;
  --muted:#9aa7bd;
  --text:#e7eefc;
  --line:#223049;
  --primary:#4c7dff;
  --danger:#ff4c6a;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
}


.brand{ font-weight:800; letter-spacing:.3px; }
.right{ display:flex; gap:6px; align-items:center; }



.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

h2,h3{ margin: 8px 0 10px; }
.muted{ color: var(--muted); font-size: 14px; }
.hidden{ display:none !important; }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width: 760px){
  .grid2{ grid-template-columns: 1fr; }
}

.box{
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 12px;
}

.flex1{ flex:1; min-width: 260px; }

.input{
  width: 100%;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f1624;
  color: var(--text);
  outline: none;
}
.input.small{ width: 110px; }

.btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f1624;
  color: var(--text);
  cursor: pointer;
}
.btn:hover{ border-color:#3a4e75; }
.btn.primary{
  background: var(--primary);
  border-color: rgba(255,255,255,.1);
  color: white;
  font-weight: 700;
}
.btn.ghost{
  background: transparent;
}
.btn.danger{
  color: var(--danger);
  border-color: var(--danger);
}
.btn.ghost.danger{
  background: transparent;
  color: var(--danger);
  border-color: transparent;
}
.btn.ghost.danger:hover{
  border-color: var(--danger);
  background: rgba(255,76,106,.08);
}
.divider{
  height:1px;
  background: var(--line);
  margin: 10px 0;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.list{
  margin: 0;
  padding-left: 18px;
}
.log{
  margin:0;
  padding:10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f1624;
  min-height: 120px;
  max-height: 220px;
  overflow:auto;
}

.check{ display:flex; gap:8px; align-items:center; }

.match{
  display:grid;
  grid-template-columns: 1fr 90px 1fr;
  gap: 12px;
  align-items: stretch;
}
@media(max-width: 760px){
  .match{ grid-template-columns: 1fr; }
  .vs{ display:none; }
}
.choice{
  border: 1px solid var(--line);
  background: #0f1624;
  border-radius: 16px;
  padding: 16px;
  cursor:pointer;
  min-height: 120px;
}
.choice:hover{ border-color:#3a4e75; }
.choiceTitle{
  font-weight: 900;
  font-size: 18px;
  opacity:.8;
}
.choiceText{
  margin-top: 6px;
  font-size: 16px;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.vs{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 22px;
  opacity:.8;
}
.notice{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  margin-top: 10px;
}

.footer{
  padding: 18px;
  border-top:1px solid var(--line);
  text-align:center;
}

/* 월드컵 플레이어 상태 배지 */
.wc-player-status{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:10px;
}
.wc-badge{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-size:13px;
  white-space:nowrap;
}
.wc-badge.me{
  border-color:var(--primary);
  font-weight:700;
  color:var(--primary);
}
.wc-badge .host-tag{
  font-size:11px;
  background:var(--primary);
  color:#fff;
  padding:1px 5px;
  border-radius:6px;
  margin-left:4px;
}

/* 결과 프로그레스바 */
.reveal-bar-wrap{
  display:flex; align-items:center; gap:8px;
  margin:6px 0;
}
.reveal-bar{
  flex:1; height:22px;
  background:rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.reveal-bar-fill{
  height:100%;
  border-radius:8px;
  transition: width .4s ease;
}
.reveal-bar-fill.a{ background:var(--primary); }
.reveal-bar-fill.b{ background:var(--danger); }
.reveal-bar-label{
  font-size:13px; min-width:40px; text-align:center;
}
.reveal-winner{
  font-size:15px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(76,125,255,.15);
  border:1px solid var(--primary);
  display:inline-block;
  margin:6px 0;
}
.reveal-tie{
  color:#ffc107;
  font-weight:700;
}

/* 재투표 배너 */
.revote-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  background:linear-gradient(135deg,rgba(255,193,7,.2),rgba(255,152,0,.2));
  border:1px solid #ffc107;
  border-radius:8px;
  margin-bottom:12px;
}
.revote-icon{
  font-size:20px;
  animation:revoteSpin 1s ease-in-out;
}
@keyframes revoteSpin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
.revote-text{
  font-weight:600;
  color:#ffc107;
}

/* 재투표 옵션 그룹 */
.wc-revote-option{
  margin-top:8px;
}

.champion{
  font-size:22px;
  padding:16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(76,125,255,.18),rgba(255,215,0,.12));
  border:1px solid rgba(255,215,0,.4);
  text-align:center;
  margin:10px 0;
}

/* 점수 테이블 */
.scoreTable{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:14px;
}
.scoreTable th{
  text-align:left;
  padding:4px 8px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-weight:600;
}
.scoreTable td{
  padding:4px 8px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* 비활성 버튼 스타일 */
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* 제작 화면 */
.candidate-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
@media(max-width:760px){
  .candidate-grid{ grid-template-columns:1fr; }
}
.cand-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.cand-row .num{
  min-width:24px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  text-align:right;
}
.cand-row input{
  flex:1;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0f1624;
  color:var(--text);
  outline:none;
  font-size:13px;
}
.cand-row input.url{
  max-width:180px;
  font-size:12px;
}
.created-id{
  padding:8px 14px;
  border-radius:10px;
  background:#0f1624;
  border:1px solid var(--line);
  font-size:15px;
  letter-spacing:.5px;
  user-select:all;
}
@keyframes glow{
  0%{ box-shadow:0 0 0 0 rgba(76,125,255,.6); }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.glow{
  animation: glow .8s ease;
  box-shadow:0 0 12px 4px rgba(76,125,255,.5);
}

/* ===== UGC v2: 태그 칩 ===== */
.tag-container{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0f1624;
  min-height:40px;
  align-items:center;
}
.tag-input{
  border:none;
  background:transparent;
  color:var(--text);
  outline:none;
  font-size:13px;
  flex:1;
  min-width:80px;
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(76,125,255,.18);
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.tag-x{
  cursor:pointer;
  font-size:14px;
  opacity:.7;
}
.tag-x:hover{ opacity:1; }

/* ===== UGC v2: 썸네일 미리보기 ===== */
.thumb-preview{
  width:120px;
  height:80px;
  border-radius:10px;
  border:1px solid var(--line);
  overflow:hidden;
  flex-shrink:0;
}
.thumb-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===== UGC v2: 후보 v2 레이아웃 ===== */
.candidate-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cand-row-v2{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.cand-row-v2 .num{
  min-width:24px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  text-align:right;
}
.cand-row-v2 input,
.cand-row-v2 select{
  padding:7px 9px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0f1624;
  color:var(--text);
  outline:none;
  font-size:13px;
}
.cand-name{ flex:1; min-width:100px; }
.cand-select{ width:90px; }
.cand-url{ flex:2; min-width:120px; font-size:12px; }
.cand-sec-wrap{
  display:flex;
  gap:4px;
}
.cand-sec{
  width:72px;
  font-size:12px;
}
@media(max-width:760px){
  .cand-row-v2{ flex-direction:column; align-items:stretch; }
  .cand-row-v2 .num{ text-align:left; }
  .cand-select{ width:100%; }
  .cand-url{ max-width:none; }
}

/* ===== 홈 피드 ===== */
.hero{
  text-align:center;
  padding:28px 14px;
}
.hero h1{
  font-size:26px;
  margin-bottom:6px;
}
.hero-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}
.btn.big{
  padding:12px 22px;
  font-size:15px;
}

/* ===== 로비 컨테이너 (index.html) ===== */
.lobby-container{
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 28px 40px;
}
@media(max-width: 1200px){
  .lobby-container{ padding: 20px 20px 36px; }
}
@media(max-width: 760px){
  .lobby-container{ padding: 16px 14px 32px; }
}

/* ===== 히어로 배너 (room.html 등에서 사용) ===== */
.hero-banner{
  text-align: center;
  padding: 36px 20px 28px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(76,125,255,.12) 0%, rgba(76,125,255,.04) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.hero-copy{
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 6px;
  color: var(--text);
}
.hero-sub{
  font-size: 14px;
  margin: 0 0 20px;
}
.hero-cta-row{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-cta{
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  cursor: pointer;
}
.hero-cta-secondary{
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text);
}
.hero-cta-secondary:hover{
  border-color: var(--primary);
  color: var(--primary);
}
@media(max-width: 760px){
  .hero-banner{ padding: 24px 14px 20px; }
  .hero-copy{ font-size: 19px; }
  .hero-cta{ font-size: 14px; padding: 10px 18px; }
}

/* ===== SEO 서비스 소개 섹션 ===== */
/* ── sr-only (시각 숨김, 크롤러/스크린리더 접근 가능) ── */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* ── 홈 미니멀 CTA 스트립 ── */
.home-cta{
  text-align:center;
  padding:18px 16px 14px;
}
.home-cta-btns{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.home-cta-main{
  font-size:15px;
  font-weight:700;
  padding:12px 28px;
  border-radius:12px;
}
.home-cta-sub{
  font-size:14px;
  font-weight:600;
  padding:11px 22px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.home-cta-sub:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.home-about-link{
  display:inline-block;
  margin-top:10px;
  font-size:12.5px;
  text-decoration:none;
  transition:color .15s;
}
.home-about-link:hover{
  color:var(--primary);
}
/* ── 홈 하단 SEO 텍스트 (접힘) ── */
.seo-bottom{
  max-width:800px;
  margin:32px auto 0;
  padding:0 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.seo-bottom-block{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.seo-bottom-block summary{
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  list-style:none;
  background:var(--card);
  transition:color .15s;
}
.seo-bottom-block summary:hover{ color:var(--text); }
.seo-bottom-block summary::-webkit-details-marker{ display:none; }
.seo-bottom-block summary::after{
  content:'▸';
  float:right;
  transition:transform .2s;
}
.seo-bottom-block[open] summary::after{
  transform:rotate(90deg);
}
.seo-bottom-body{
  padding:10px 16px 14px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}
.seo-bottom-body p{ margin:0 0 10px; }
.seo-bottom-body ol{
  margin:0;
  padding:0 0 0 20px;
}
.seo-bottom-body ol li{ margin-bottom:4px; }
.seo-bottom-body dl{ margin:0; }
.seo-bottom-body dt{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  margin-top:12px;
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
}
.seo-bottom-body dt:first-child{ margin-top:0; }
.seo-bottom-body dd{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.7;
}
.seo-bottom-body dd a{ color:var(--primary); }
.seo-bottom-cards{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.seo-bottom-card{
  padding:8px 12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:13px;
}
.seo-bottom-card strong{ color:var(--text); }
/* ── noscript 대체 텍스트 (JS 실패 시 SEO 안전망) ── */
.seo-noscript{
  max-width:700px;
  margin:24px auto;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  background:rgba(255,255,255,.02);
}
.seo-noscript h2{ font-size:18px; color:var(--text); margin:0 0 12px; }
.seo-noscript ul{ margin:8px 0 8px 20px; padding:0; }
.seo-noscript li{ margin-bottom:4px; }
/* ── about.html용 (seo-steps/faq는 about 전용) ── */
.seo-steps{
  margin:0 0 8px 20px;
  padding:0;
  line-height:1.8;
  font-size:14px;
  color:var(--muted);
}
.seo-steps li{ margin-bottom:6px; }
.seo-steps strong{ color:var(--text); }
/* ── about-faq ── */
.about-faq{ margin:8px 0 0; }
.about-faq dt{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin-top:18px;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
}
.about-faq dt:first-child{ margin-top:0; }
.about-faq dd{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
/* ── 반응형 ── */
@media(max-width:760px){
  .home-cta{ padding:14px 12px 10px; }
  .home-cta-main{ font-size:14px; padding:11px 22px; }
  .home-cta-sub{ font-size:13px; padding:10px 18px; }
  .home-cta-btns{ flex-direction:column; align-items:center; gap:8px; }
  .home-about-link{ font-size:12px; }
  .seo-bottom{ margin-top:24px; padding:0 4px; }
  .seo-bottom-block summary{ font-size:13px; padding:10px 14px; }
  .seo-bottom-body{ font-size:12.5px; padding:8px 14px 12px; }
  .seo-bottom-body dt{ font-size:12.5px; }
  .seo-bottom-body dd{ font-size:12px; }
  .seo-bottom-card{ font-size:12px; }
}

/* ===== 검색/필터 툴바 ===== */
.feed-toolbar{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.feed-toolbar #searchInput{
  flex: 1;
  min-width: 200px;
  height: 46px;
  padding: 0 18px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.feed-toolbar #searchInput::placeholder{
  color: var(--muted);
  opacity: .8;
}
.feed-toolbar #searchInput:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76,125,255,.15);
}

.sort-btns{
  display: flex;
  gap: 6px;
}
.sort-btn{
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.sort-btn:hover{
  color: var(--text);
  border-color: var(--muted);
}
.sort-btn.active{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 700;
}
.sort-btn:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(76,125,255,.3);
}

.feed-status{
  text-align: center;
  padding: 32px 0;
  font-size: 15px;
}

/* ===== 피드 그리드 ===== */
.feed-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
@media(min-width: 1400px){
  .feed-grid{
    grid-template-columns: repeat(5, 1fr);
  }
}
@media(max-width: 640px){
  .feed-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
/* 모바일 2열 유지 (520px 이하에서도) — 320px 미만만 1열 폴백 */
@media(max-width: 520px){
  .feed-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* 카드 내부 min-width:0으로 텍스트 오버플로우 방지 */
  .feed-card{
    min-width: 0;
  }
  .feed-card-body{
    min-width: 0;
    padding: 10px 12px 12px;
  }
  /* 뱃지 축소 */
  .feed-type-badge{
    padding: 4px 8px;
    font-size: 10px;
    top: 8px;
    left: 8px;
  }
  /* 제목 축소 */
  .feed-card-title{
    font-size: 13px;
    min-height: 2.4em;
    -webkit-line-clamp: 2;
  }
  /* 메타 정보 축소 */
  .feed-card-meta{
    font-size: 11px;
    gap: 8px;
  }
  /* 태그 축소 */
  .feed-tag{
    padding: 3px 8px;
    font-size: 10px;
  }
}
/* 아주 작은 화면(320px 미만)만 1열 폴백 */
@media(max-width: 319px){
  .feed-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* 피드 툴바 모바일 */
@media(max-width: 900px){
  .feed-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .feed-toolbar #searchInput{
    width: 100%;
  }
  .type-filter-tabs{
    justify-content: center;
  }
  .sort-btns{
    justify-content: center;
  }
}
@media(max-width: 500px){
  .feed-toolbar{
    padding: 12px 14px;
  }
  .type-filter-btn{
    padding: 8px 12px;
    font-size: 13px;
  }
  .sort-btn{
    padding: 8px 14px;
    font-size: 13px;
  }
  .feed-card-body{
    padding: 12px 14px 14px;
  }
  .feed-card-title{
    font-size: 14px;
    min-height: 2.6em;
  }
}

/* ===== 피드 카드 ===== */
.feed-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.feed-card:hover{
  border-color: var(--primary);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 4px 12px rgba(76,125,255,.15);
}
.feed-card:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76,125,255,.25);
}
.feed-card:active{
  transform: translateY(-2px);
}

/* 썸네일 영역 */
.feed-thumb-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #0a0e16 0%, #131b2a 100%);
  overflow: hidden;
}
.feed-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s ease;
}
.feed-card:hover .feed-thumb{
  transform: scale(1.05);
}

/* 타입 뱃지 (월드컵/퀴즈) */
.feed-type-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.feed-type-badge.worldcup{
  background: rgba(76,125,255,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
}
.feed-type-badge.quiz{
  background: rgba(255,76,106,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
}
.feed-type-badge.tier{
  background: rgba(76,187,124,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
}

/* 카드 바디 */
.feed-card-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.feed-card-title{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.feed-card-meta{
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  opacity: .85;
}
.feed-tags{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.feed-tag{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(76,125,255,.1);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(76,125,255,.15);
}
.feed-start-btn{
  margin-top: auto;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* ===== 카드 미리보기 오버레이 (UX-B) ===== */
.feed-card{position:relative}
.feed-card-overlay{
  position:absolute;inset:0;z-index:5;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
  border-radius:18px;padding:16px;
}
.feed-card-overlay.show{opacity:1;pointer-events:auto}
.feed-card-overlay-line{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.92);
  letter-spacing:.2px;text-align:center;line-height:1.5;
}
.feed-card-overlay-line .ov-icon{margin-right:4px}
/* PC: hover로 표시 */
@media(hover:hover){
  .feed-card:hover .feed-card-overlay{opacity:1;pointer-events:auto}
}

/* ===== 결과 CTA 3버튼 공통 (UX-A/C) ===== */
.result-cta-row{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:18px 0 8px;margin-top:12px;
}
.result-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 22px;border-radius:12px;font-size:14px;font-weight:700;
  cursor:pointer;border:none;transition:all .2s;color:#fff;
  min-height:44px;min-width:110px;text-decoration:none;
  outline:none;
}
.result-cta-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(76,125,255,.45);
}
.result-cta-btn--primary{
  background:linear-gradient(135deg,var(--primary,#4c7dff),#2563eb);
}
.result-cta-btn--primary:hover{box-shadow:0 4px 16px rgba(76,125,255,.35)}
.result-cta-btn--secondary{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);
}
.result-cta-btn--secondary:hover{background:rgba(255,255,255,.16)}
.result-cta-btn--ghost{
  background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);
}
.result-cta-btn--ghost:hover{background:rgba(255,255,255,.06);color:#fff}
.result-cta-btn:disabled{opacity:.45;pointer-events:none}
.result-cta-btn .cta-icon{font-size:16px}

/* 2차 액션 (작은 텍스트 링크) */
.result-secondary-actions{
  display:flex;gap:16px;justify-content:center;padding:6px 0 4px;
}
.result-secondary-link{
  font-size:12px;color:rgba(255,255,255,.5);cursor:pointer;
  background:none;border:none;text-decoration:underline;
  text-underline-offset:2px;transition:color .15s;
}
.result-secondary-link:hover{color:rgba(255,255,255,.8)}

@media(max-width:520px){
  .result-cta-row{gap:8px;padding:14px 8px 6px}
  .result-cta-btn{flex:1 1 calc(50% - 8px);min-width:0;padding:13px 10px;font-size:13px}
  .result-cta-btn--ghost{flex:1 1 100%}
}

/* ===== 모달 ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  z-index:1000;
  padding:20px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal-box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 24px;
  max-width:420px;
  width:100%;
  position:relative;
  margin:auto 0;
  flex-shrink:0;
}
.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  background:none;
  border:none;
  color:var(--muted);
  font-size:24px;
  cursor:pointer;
  line-height:1;
}
.modal-close:hover{ color:var(--text); }
.modal-title{
  text-align:center;
  font-size:18px;
  margin:0 0 4px;
}
.modal-choices{
  display:flex;
  gap:12px;
}
@media(max-width:500px){
  .modal-choices{ flex-direction:column; }
}
.modal-choice-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:20px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#0f1624;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.modal-choice-btn:hover{
  border-color:var(--primary);
  background:rgba(76,125,255,.08);
}
.modal-choice-btn.solo:hover{
  border-color:#22c55e;
  background:rgba(34,197,94,.08);
}
.modal-choice-icon{
  font-size:28px;
}
.modal-choice-label{
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.modal-choice-desc{
  font-size:11px;
  text-align:center;
}

/* ===== 월드컵 시작 옵션 모달 ===== */
.wc-options-modal-box{
  max-width: 480px;
}
.wc-option-group{
  margin-bottom: 20px;
}
.wc-option-label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
/* 강수 선택 버튼들 */
.wc-round-options{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wc-round-btn{
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0f1624;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.wc-round-btn:hover{
  border-color: var(--primary);
  background: rgba(76,125,255,.1);
}
.wc-round-btn.active{
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
/* 선발방식 선택 */
.wc-pick-options{
  display: flex;
  gap: 10px;
}
.wc-pick-btn{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #0f1624;
  cursor: pointer;
  transition: all .15s;
}
.wc-pick-btn:hover{
  border-color: var(--primary);
}
.wc-pick-btn.active{
  border-color: var(--primary);
  background: rgba(76,125,255,.12);
}
.wc-pick-icon{
  font-size: 24px;
}
.wc-pick-text{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.wc-pick-desc{
  font-size: 11px;
  color: var(--muted);
}
/* 타이머 토글 (솔로 전용) */
/* Solo timer row (settings modal) */
.solo-timer-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.solo-timer-sec-input{
  width:64px !important;
  min-width:0 !important;
  padding:6px 8px !important;
  text-align:center;
  font-size:14px;
}
.solo-timer-sec-input:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.solo-timer-presets{
  display:flex;
  gap:4px;
}
.solo-preset-btn{
  padding:6px 12px;
  border:1px solid var(--line);
  background:#0f1624;
  color:var(--text);
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  min-height:32px;
  transition:border-color .2s, background .2s;
}
.solo-preset-btn:hover:not(:disabled){
  border-color:#3a4e75;
}
.solo-preset-btn.active{
  border-color:var(--primary);
  background:rgba(76,125,255,.15);
  color:var(--primary);
}
.solo-preset-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.wc-options-actions{
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.wc-options-actions .btn.big{
  min-width: 200px;
  padding: 14px 32px;
  font-size: 16px;
}

/* 로비 월드컵 설정 표시 */
.wc-settings-info{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(76,125,255,.1);
  border: 1px solid rgba(76,125,255,.2);
  font-size: 14px;
}
.wc-settings-label{
  color: var(--muted);
}
.wc-settings-value{
  font-weight: 600;
  color: var(--primary);
}
.wc-settings-sep{
  color: var(--muted);
  opacity: .5;
}

@media(max-width: 500px){
  .wc-pick-options{
    flex-direction: column;
  }
  .wc-round-btn{
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ===== 내 콘텐츠 리스트 ===== */
.my-content-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:10px 0;
}
.my-content-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0f1624;
  cursor:pointer;
  transition:border-color .2s;
}
.my-content-item:hover{
  border-color:var(--primary);
}
.my-content-item .mc-title{
  flex:1;
  font-weight:600;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.my-content-item .mc-meta{
  display:flex;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  flex-shrink:0;
}
.my-content-item .mc-type{
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
}
.mc-type.worldcup{ background:rgba(76,125,255,.2); color:var(--primary); }
.mc-type.quiz{ background:rgba(255,76,106,.2); color:var(--danger); }
.mc-type.tier{ background:rgba(76,187,124,.2); color:#4cbb7c; }
.my-content-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
}
/* 📊 통계 버튼 (카드 내) */
.btn-content-stats{
  background:none;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:8px;
  padding:4px 8px;
  font-size:13px;
  cursor:pointer;
  transition:all .2s;
  line-height:1;
  flex-shrink:0;
}
.btn-content-stats:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(76,125,255,.08);
}

/* 제작 페이지 관리 안내 배너 */
.create-manage-banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:rgba(76,125,255,.06);
  border:1px solid rgba(76,125,255,.18);
  border-radius:12px;
  margin-bottom:16px;
}
.create-manage-banner-icon{
  font-size:18px;
  flex-shrink:0;
  line-height:1;
}
.create-manage-banner-text{
  flex:1;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}
.create-manage-banner-link{
  flex-shrink:0;
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  text-decoration:none;
  white-space:nowrap;
  padding:6px 14px;
  border:1px solid var(--primary);
  border-radius:8px;
  transition:background .15s, color .15s;
}
.create-manage-banner-link:hover{
  background:var(--primary);
  color:#fff;
}
@media(max-width:600px){
  .create-manage-banner{
    flex-wrap:wrap;
    gap:8px;
    padding:12px 14px;
  }
  .create-manage-banner-link{
    width:100%;
    text-align:center;
    padding:8px 0;
  }
}

/* ===== 드래그&드롭 업로드 영역 ===== */
.dropzone{
  border:2px dashed var(--line);
  border-radius:12px;
  padding:16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  color:var(--muted);
  font-size:13px;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-direction:column;
}
.dropzone:hover,
.dropzone.dragover{
  border-color:var(--primary);
  background:rgba(76,125,255,.06);
}
.dropzone.uploading{
  border-color:#ffc107;
  background:rgba(255,193,7,.06);
}
.dropzone-preview{
  max-width:80px;
  max-height:60px;
  border-radius:8px;
  object-fit:cover;
}
.dropzone-msg{
  font-size:12px;
}

/* ===== 퀴즈 플레이: 넓은 레이아웃 ===== */
.quiz-wide-question{
  font-size:20px;
  font-weight:800;
  line-height:1.4;
  margin-bottom:16px;
  text-align:center;
  padding:12px 8px;
}
@media(max-width:760px){
  .quiz-wide-question{
    font-size:18px;
    padding:8px 4px;
  }
}

/* 퀴즈 보기 버튼 개선 (모바일 터치 44px+) */
.quiz-choice-wide{
  padding:16px;
  border:1px solid var(--line);
  background:#0f1624;
  border-radius:14px;
  cursor:pointer;
  text-align:center;
  font-size:16px;
  color:var(--text);
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, background .2s;
}
.quiz-choice-wide:hover{ border-color:#3a4e75; }
.quiz-choice-wide.selected{ border-color:var(--primary); background:rgba(76,125,255,.15); font-weight:700; }
.quiz-choice-wide.correct{ border-color:#4caf50; background:rgba(76,175,80,.15); }
.quiz-choice-wide.wrong{ border-color:var(--danger); background:rgba(255,76,106,.15); }
.quiz-choice-wide[disabled]{ cursor:not-allowed; opacity:.7; }

@media(max-width:760px){
  .quiz-choice-wide{
    min-height:52px;
    font-size:15px;
    padding:14px 12px;
  }
}

/* 퀴즈 주관식 입력 개선 */
.quiz-short-input{
  padding:14px 16px;
  font-size:16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0f1624;
  color:var(--text);
  outline:none;
  width:100%;
}
.quiz-short-input:focus{
  border-color:var(--primary);
}

/* 다시 듣기 버튼 */
.btn-replay{
  padding:10px 18px;
  border-radius:12px;
  border:1px solid var(--primary);
  background:rgba(76,125,255,.12);
  color:var(--primary);
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  transition:background .2s;
}
.btn-replay:hover{
  background:rgba(76,125,255,.25);
}
.btn-replay:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* 퀴즈 제작: 타이머 옵션 */
.timer-option{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
}
.timer-option label{
  font-size:14px;
  cursor:pointer;
}

/* 확인 모달 */
.confirm-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1001;
  padding:20px;
}
.confirm-box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  max-width:360px;
  width:100%;
  text-align:center;
}
.confirm-box p{
  margin:0 0 16px;
  font-size:15px;
}
.confirm-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}

/* 퀴즈 제작 문제 행 */
.quiz-q-row{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-bottom:8px;
  background:rgba(255,255,255,.02);
}
.quiz-q-header{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.q-num{
  font-weight:700;
  font-size:14px;
  color:var(--muted);
  min-width:24px;
}

/* ===== 초대코드 표시 ===== */
.invite-code{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:3px 12px;
  border-radius:999px;
  background:rgba(76,125,255,.15);
  border:1px solid rgba(76,125,255,.3);
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  vertical-align:middle;
  white-space:nowrap;
  opacity:.9;
}
.invite-code b{
  font-weight:800;
  letter-spacing:.5px;
}

/* ===== 카드 버튼 반반 (월드컵) ===== */
.feed-btn-row{
  display:flex;
  gap:6px;
  margin-top:auto;
}
.feed-btn-row .btn{
  flex:1;
  padding:10px 4px;
  font-size:13px;
  text-align:center;
  white-space:nowrap;
}

/* ===== 랭킹 모달 ===== */
.ranking-modal-box{
  max-width:900px;
  width:92vw;
  max-height:78vh;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
}

/* Sticky header area */
.ranking-sticky-header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--card);
  padding:20px 24px 12px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.ranking-sticky-header .modal-close{
  top:16px;
  right:20px;
}
.ranking-sticky-header .modal-title{
  margin:0 0 12px;
  padding-right:32px;
}

/* Toolbar: search + sort row */
.ranking-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Search wrap */
.ranking-search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  flex:1;
  min-width:140px;
}
.ranking-search-icon{
  position:absolute;
  left:12px;
  font-size:14px;
  pointer-events:none;
  opacity:.5;
}
.ranking-search{
  margin:0;
  padding-left:36px;
  padding-right:36px;
  flex-shrink:0;
  width:100%;
}
.ranking-search-clear{
  position:absolute;
  right:8px;
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  padding:4px 8px;
  line-height:1;
}
.ranking-search-clear:hover{
  color:var(--text);
}

/* Sort dropdown */
.ranking-sort-wrap{
  flex-shrink:0;
}
.ranking-sort-select{
  margin:0;
  padding:8px 28px 8px 10px;
  font-size:13px;
  min-width:100px;
  cursor:pointer;
  appearance:auto;
}

/* Scrollable body */
.ranking-body{
  flex:1;
  overflow-y:auto;
  min-height:120px;
  padding:0 24px;
}

/* Table */
.ranking-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.ranking-table thead{
  position:sticky;
  top:0;
  z-index:5;
}
.ranking-table th{
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  background:var(--card);
  white-space:nowrap;
}

/* Row card style */
.ranking-table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.ranking-table tbody tr{
  transition:background .18s, transform .18s;
  border-radius:8px;
}
.ranking-table tbody tr:hover{
  background:rgba(76,125,255,.07);
}

/* Rank column */
.ranking-table .rank-cell{
  font-weight:700;
  font-size:15px;
  width:44px;
  text-align:center;
}

/* Medal badges */
.rank-medal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:18px;
  font-weight:700;
  line-height:1;
}
.rank-medal.gold{
  background:linear-gradient(135deg,#ffd700 0%,#ffb300 100%);
  box-shadow:0 0 12px rgba(255,215,0,.45);
  color:#5c3d00;
}
.rank-medal.silver{
  background:linear-gradient(135deg,#e0e0e0 0%,#b0b0b0 100%);
  box-shadow:0 0 10px rgba(192,192,192,.4);
  color:#3a3a3a;
}
.rank-medal.bronze{
  background:linear-gradient(135deg,#e8a060 0%,#cd7f32 100%);
  box-shadow:0 0 10px rgba(205,127,50,.4);
  color:#4a2800;
}

/* Thumbnail */
.ranking-thumb{
  width:80px;
  height:80px;
  border-radius:12px;
  object-fit:cover;
  background:#0f1624;
  display:block;
  flex-shrink:0;
}

/* Name with line-clamp */
.ranking-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.35;
  max-width:180px;
  word-break:break-word;
  font-weight:500;
  cursor:default;
}

/* Win rate progress bar */
.ranking-winrate-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:100px;
}
.ranking-winrate-bar{
  width:100%;
  height:14px;
  background:rgba(255,255,255,.10);
  border-radius:7px;
  overflow:hidden;
}
.ranking-winrate-fill{
  height:100%;
  border-radius:7px;
  background:linear-gradient(90deg,var(--primary),#7ea8ff);
  transition:width .4s ease;
  min-width:2px;
}
.ranking-winrate-text{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}

/* Record & champion */
.ranking-record{
  white-space:nowrap;
  font-size:12px;
  color:var(--muted);
}
.ranking-champion{
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
}
.ranking-champion-count{
  color:#ffd700;
}

/* Pager */
.ranking-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 24px;
  flex-shrink:0;
  border-top:1px solid var(--line);
}
.ranking-page-btn{
  padding:6px 14px;
  font-size:12px;
}
.ranking-page-info{
  font-size:12px;
}

/* Empty state */
.ranking-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}
.ranking-empty-icon{
  font-size:36px;
  margin-bottom:8px;
  opacity:.5;
}

/* Skeleton loading */
@keyframes ranking-skeleton-pulse{
  0%,100%{opacity:.15}
  50%{opacity:.3}
}
.ranking-skeleton-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.ranking-skeleton-row .skel{
  background:var(--line);
  border-radius:6px;
  animation:ranking-skeleton-pulse 1.2s ease-in-out infinite;
}
.ranking-skeleton-row .skel-rank{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
}
.ranking-skeleton-row .skel-thumb{
  width:80px;height:80px;border-radius:12px;flex-shrink:0;
}
.ranking-skeleton-row .skel-name{
  width:120px;height:14px;
}
.ranking-skeleton-row .skel-bar{
  flex:1;height:14px;max-width:140px;border-radius:7px;
}
.ranking-skeleton-row .skel-text{
  width:60px;height:12px;
}

/* ===== 랭킹 썸네일 클릭 ===== */
.ranking-thumb-img{
  cursor:pointer;
  transition:opacity .2s, transform .2s;
}
.ranking-thumb-img:hover{
  opacity:.85;
  transform:scale(1.08);
}
.ranking-thumb-clickable{
  cursor:pointer;
}

/* ===== 랭킹 모달 모바일 ===== */
@media(max-width:640px){
  .ranking-modal-box{
    width:96vw;
    max-height:85vh;
  }
  .ranking-sticky-header{
    padding:16px 16px 10px;
  }
  .ranking-body{
    padding:0 12px;
  }
  .ranking-pager{
    padding:10px 12px;
  }
  .ranking-table{
    font-size:12px;
  }
  .ranking-table th,
  .ranking-table td{
    padding:8px 6px;
  }
  .ranking-thumb{
    width:56px;
    height:56px;
    border-radius:10px;
  }
  .ranking-name{
    max-width:100px;
    font-size:12px;
  }
  .ranking-winrate-wrap{
    min-width:70px;
  }
  .ranking-winrate-bar{
    min-width:40px;
    height:10px;
    border-radius:5px;
  }
  .ranking-winrate-fill{
    border-radius:5px;
  }
  .ranking-winrate-text{
    font-size:11px;
  }
  .rank-medal{
    width:26px;
    height:26px;
    font-size:14px;
  }
  /* Sort dropdown mobile */
  .ranking-sort-select{
    font-size:12px;
    padding:6px 24px 6px 8px;
    min-width:88px;
  }
  /* Hide record/champion columns on mobile */
  .ranking-table .hide-mobile{
    display:none;
  }
}

/* ===== 미디어 상세 모달 ===== */
.media-detail-modal-box{
  max-width:640px;
  display:flex;
  flex-direction:column;
}
.media-detail-content{
  min-height:200px;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-detail-img{
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
  display:block;
}
.media-detail-iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
}
.media-detail-video{
  width:100%;
  max-height:60vh;
}

/* ===== 로비(room) UI 스타일 ===== */

.lobby-tabs{
  display:flex;
  background:rgba(255,255,255,.06);
  border-radius:12px;
  padding:3px;
  gap:3px;
  margin-bottom:14px;
}
.lobby-tab{
  flex:1;
  padding:10px 0;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s, color .2s;
  min-height:44px;
}
.lobby-tab.active{
  background:var(--primary);
  color:#fff;
}
.lobby-tab:hover:not(.active){
  background:rgba(255,255,255,.08);
}

.lobby-panel{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.lobby-input-group{
  display:flex;
  gap:6px;
  align-items:center;
}
.lobby-input-group .input{
  flex:1;
}

.lobby-paste-btn,
.lobby-clear-btn{
  min-width:44px;
  min-height:44px;
  padding:0;
  border:1px solid var(--line);
  background:#0f1624;
  color:var(--text);
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color .2s;
}
.lobby-paste-btn:hover,
.lobby-clear-btn:hover{
  border-color:var(--primary);
}

.lobby-uuid-warn{
  color:var(--danger);
  font-size:12px;
  margin:2px 0 0;
}
.room-guide-text{
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
  line-height:1.5;
}
.room-browse-link{
  display:inline-block;
  font-size:13px;
  color:var(--primary);
  margin-top:6px;
  text-decoration:none;
}
.room-browse-link:hover{
  text-decoration:underline;
}

.lobby-mode-cards{
  display:flex;
  gap:8px;
}
.lobby-mode-card{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:14px 10px;
  border:1px solid var(--line);
  background:#0f1624;
  border-radius:14px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  min-height:44px;
}
.lobby-mode-card:hover{
  border-color:#3a4e75;
}
.lobby-mode-card.selected{
  border-color:var(--primary);
  background:rgba(76,125,255,.1);
}
.lobby-mode-icon{
  font-size:22px;
}
.lobby-mode-label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

.lobby-timer-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.lobby-preset-btns{
  display:flex;
  gap:4px;
}
.lobby-preset-btn{
  padding:6px 12px;
  border:1px solid var(--line);
  background:#0f1624;
  color:var(--text);
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  min-height:32px;
  transition:border-color .2s, background .2s;
}
.lobby-preset-btn:hover{
  border-color:#3a4e75;
}
.lobby-preset-btn.active{
  border-color:var(--primary);
  background:rgba(76,125,255,.15);
  color:var(--primary);
}
.lobby-preset-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* Toggle switch */
.lobby-toggle{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex-shrink:0;
}
.lobby-toggle input{
  opacity:0;
  width:0;
  height:0;
}
.lobby-toggle-slider{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s;
}
.lobby-toggle-slider::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s;
}
.lobby-toggle input:checked + .lobby-toggle-slider{
  background:var(--primary);
}
.lobby-toggle input:checked + .lobby-toggle-slider::before{
  transform:translateX(20px);
}

/* Recent chips */
.lobby-recent{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:4px 0;
}
.lobby-chip{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:12px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  white-space:nowrap;
  min-height:30px;
  display:inline-flex;
  align-items:center;
}
.lobby-chip:hover{
  border-color:var(--primary);
  background:rgba(76,125,255,.1);
}

/* Status panel */
.lobby-status{
  margin-top:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}

/* Toast container */
.lobby-toast-container{
  position:fixed;
  top:60px;
  right:16px;
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  max-width:360px;
}
.lobby-toast{
  padding:12px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  pointer-events:auto;
  animation:lobby-toast-in .3s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.lobby-toast-success{
  background:rgba(34,197,94,.9);
}
.lobby-toast-error{
  background:rgba(255,76,106,.9);
}
.lobby-toast-info{
  background:rgba(76,125,255,.9);
}
.lobby-toast-out{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .3s, transform .3s;
}
@keyframes lobby-toast-in{
  from{ opacity:0; transform:translateX(40px); }
  to{ opacity:1; transform:translateX(0); }
}

/* Button spinner */
.lobby-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:lobby-spin .6s linear infinite;
  vertical-align:middle;
  margin-right:4px;
}
@keyframes lobby-spin{
  to{ transform:rotate(360deg); }
}

/* Mobile: single column, 44px touch targets */
@media(max-width:760px){
  .lobby-mode-cards{
    flex-direction:column;
  }
  .lobby-timer-row{
    flex-direction:column;
    align-items:stretch;
  }
  .lobby-preset-btns{
    justify-content:stretch;
  }
  .lobby-preset-btn{
    flex:1;
    min-height:44px;
  }
  .lobby-toast-container{
    right:8px;
    left:8px;
    max-width:none;
  }
}

/* ==========================================================
   CREATE PAGE — UI/UX 대개편
   ========================================================== */

/* 페이지 헤더 */
.create-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px;
}
.create-title{
  font-size:24px;
  margin:0;
  font-weight:800;
  letter-spacing:-.3px;
}
.create-sub{
  margin:4px 0 0;
  font-size:14px;
}
.create-head-actions{
  display:flex;
  gap:8px;
}

/* 2컬럼 그리드 */
.create-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:16px;
  align-items:start;
}
.create-left{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.create-right{
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media(min-width:961px){
  .create-right{
    position:sticky;
    top:70px;
  }
}
@media(max-width:960px){
  .create-grid{
    grid-template-columns:1fr;
  }
  .create-right{
    order:-1;
  }
}

/* 카드 헤더 */
.card-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.card-hd h2{
  margin:0;
  font-size:16px;
  font-weight:700;
}

/* 필드 */
.field{
  margin-bottom:16px;
}
.field:last-child{
  margin-bottom:0;
}
.field > label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  color:var(--text);
}
.field-help{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.field-error{
  font-size:12px;
  color:var(--danger);
  margin-top:4px;
  min-height:0;
}
/* MP4 5MB 초과 경고 라벨 */
.mp4-error-label{
  display:inline-block;
  background:rgba(255,76,106,.12);
  color:var(--danger);
  font-size:13px;
  font-weight:600;
  padding:6px 12px;
  border-radius:8px;
  margin-top:8px;
  line-height:1.4;
}
.btn.mp4-blocked{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* ===== 퀴즈 제작: 미디어 업로드 프리뷰 ===== */
.quiz-media-wrap{
  margin-top:8px;
}
.quiz-media-preview{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.quiz-media-preview .dropzone-preview{
  max-width:200px;
  max-height:150px;
  border-radius:8px;
  object-fit:contain;
}
.quiz-media-preview video.dropzone-preview{
  max-width:280px;
  max-height:180px;
}
.quiz-media-preview-info{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  justify-content:space-between;
}
.quiz-media-delete{
  font-size:12px;
  padding:4px 10px;
}
.dropzone-disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* ===== 퀴즈 플레이: 문제 미디어 표시 ===== */
.quiz-media-display{
  text-align:center;
  margin-bottom:12px;
}
.quiz-question-media{
  max-width:100%;
  max-height:360px;
  border-radius:12px;
  object-fit:contain;
}
video.quiz-question-media{
  max-height:300px;
  background:#000;
}
@media(max-width:760px){
  .quiz-question-media{
    max-height:240px;
  }
  video.quiz-question-media{
    max-height:200px;
  }
}
.req{
  color:var(--danger);
}
.create-textarea{
  resize:vertical;
  min-height:70px;
  font-family:inherit;
}
textarea.input{
  padding:10px 11px;
}

/* 배지 */
.c-badge{
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}
.c-badge-ok{
  border-color:#22c55e;
  color:#22c55e;
  background:rgba(34,197,94,.1);
}
.c-badge-warn{
  border-color:#f59e0b;
  color:#f59e0b;
  background:rgba(245,158,11,.1);
}
.c-badge-count{
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(76,125,255,.1);
}

/* 제작 탭 바 (기본 정보 / 후보 관리) */
.create-tabs{
  display:flex;
  background:rgba(255,255,255,.06);
  border-radius:12px;
  padding:3px;
  gap:3px;
  margin-bottom:4px;
}
.create-tab{
  flex:1;
  padding:10px 0;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border-radius:10px;
  transition:background .15s, color .15s;
  text-align:center;
  min-height:44px;
}
.create-tab.active{
  background:var(--primary);
  color:#fff;
}
.create-tab:hover:not(.active){
  background:rgba(255,255,255,.08);
}
.create-tab-panel.hidden{
  display:none;
}

/* 후보 검색 */
.cand-search-wrap{
  margin-bottom:12px;
}
.cand-search-wrap .input{
  width:100%;
}

/* 세그먼트 탭 */
.create-segmented{
  display:flex;
  background:rgba(255,255,255,.06);
  border-radius:12px;
  padding:3px;
  gap:3px;
}
.seg{
  flex:1;
  padding:10px 0;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s, color .2s;
  text-align:center;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}
.seg.active{
  background:var(--primary);
  color:#fff;
}
.seg:hover:not(.active){
  background:rgba(255,255,255,.08);
}

/* 썸네일 드래그&드롭 영역 */
.create-thumb-zone{
  border:2px dashed var(--line);
  border-radius:14px;
  padding:24px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.create-thumb-zone:hover,
.create-thumb-zone.dragover{
  border-color:var(--primary);
  background:rgba(76,125,255,.04);
}
.create-thumb-inner{
  color:var(--muted);
  font-size:14px;
}
.create-thumb-icon{
  font-size:32px;
  margin-bottom:6px;
}
.create-thumb-preview{
  position:relative;
  margin-top:12px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  max-width:300px;
}
.create-thumb-preview img{
  width:100%;
  display:block;
}
.create-thumb-remove{
  position:absolute;
  top:6px;
  right:6px;
  background:rgba(0,0,0,.65) !important;
  color:#fff !important;
  padding:4px 10px !important;
  font-size:12px !important;
  border:none !important;
  border-radius:8px;
  backdrop-filter:blur(4px);
}
.create-thumb-remove:hover{
  background:rgba(255,76,106,.8) !important;
}

/* ===== 후보 카드 ===== */
.candidate-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cand-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.02);
  transition:border-color .2s, box-shadow .2s;
}
.cand-card:hover{
  border-color:rgba(76,125,255,.3);
  box-shadow:0 2px 12px rgba(76,125,255,.06);
}
.cand-card-head{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.cand-num{
  min-width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(76,125,255,.15);
  color:var(--primary);
  font-weight:800;
  font-size:13px;
  flex-shrink:0;
}
.cand-card-head .cand-name{
  flex:1;
}
.cand-move{
  display:flex;
  gap:2px;
  flex-shrink:0;
}
.cand-move-up,
.cand-move-down{
  width:28px;
  height:28px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  border-radius:6px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.cand-move-up:hover,
.cand-move-down:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.cand-card-config{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:8px;
}
.cand-card-config .cand-select{
  width:100px;
}
.cand-card-config .cand-url{
  flex:1;
  min-width:140px;
  font-size:12px;
}
.cand-card-media{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.cand-dropzone{
  flex:1;
  min-height:60px;
}
.cand-media-preview{
  flex:1;
  min-height:60px;
  max-width:200px;
}
.cand-media-preview:empty{
  display:none;
}

/* YouTube 미리보기 */
.cand-yt-preview{
  position:relative;
  cursor:pointer;
  border-radius:10px;
  overflow:hidden;
}
.cand-yt-thumb{
  width:100%;
  display:block;
  border-radius:10px;
}
.cand-yt-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  font-size:32px;
  color:#fff;
  transition:background .2s;
}
.cand-yt-play:hover{
  background:rgba(0,0,0,.5);
}
.cand-yt-iframe{
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  border:none;
}

/* 이미지/동영상 미리보기 */
.cand-img-preview{
  width:100%;
  max-height:120px;
  object-fit:contain;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.cand-video-preview{
  width:100%;
  max-height:120px;
  border-radius:8px;
}

/* ── URL 자동감지 안내 가이드 ── */
.cand-url-guide{
  width:100%;
  padding:8px 10px;
  margin-top:4px;
  border-radius:8px;
  background:rgba(76,125,255,.08);
  border:1px solid rgba(76,125,255,.15);
}
.cand-url-guide-text{
  font-size:12px;
  color:rgba(255,255,255,.65);
  line-height:1.4;
}
.cand-url-guide-examples{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.cand-url-example-btn{
  padding:3px 8px;
  font-size:11px;
  font-weight:500;
  color:var(--primary);
  background:rgba(76,125,255,.12);
  border:1px solid rgba(76,125,255,.25);
  border-radius:6px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
  font-family:inherit;
}
.cand-url-example-btn:hover{
  background:rgba(76,125,255,.22);
  border-color:rgba(76,125,255,.4);
}

/* ── URL 자동감지 상태 표시 ── */
.cand-url-detect-status{
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:500;
  margin-bottom:6px;
}
.cand-url-detect-ok{
  color:rgba(255,255,255,.75);
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.2);
}
.cand-url-detect-error{
  color:rgba(255,120,120,.85);
  background:rgba(255,80,80,.08);
  border:1px solid rgba(255,80,80,.15);
}
.cand-url-detect-badge{
  display:inline-block;
  padding:1px 6px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:var(--primary);
  margin-right:4px;
  vertical-align:middle;
}
.cand-url-detect-embed-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:60px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
}

/* ===== 체크리스트 ===== */
.create-checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.create-checklist li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:500;
  background:rgba(255,255,255,.02);
  transition:background .2s;
}
.check-ok{
  background:rgba(34,197,94,.06) !important;
}
.check-fail{
  background:rgba(255,76,106,.04) !important;
}
.check-icon{
  font-size:14px;
  flex-shrink:0;
}

/* ===== 미리보기 요약 ===== */
.create-preview-summary{
  display:flex;
  flex-direction:column;
  gap:0;
}
.pv-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.pv-row:last-child{
  border-bottom:none;
}
.pv-val{
  font-weight:600;
  text-align:right;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===== Toast ===== */
.toast-container{
  position:fixed;
  top:60px;
  right:16px;
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  max-width:360px;
}
.toast{
  padding:12px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  pointer-events:auto;
  animation:toast-in .3s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.toast-success{
  background:rgba(34,197,94,.92);
}
.toast-error{
  background:rgba(255,76,106,.92);
}
.toast-warn{
  background:rgba(245,158,11,.92);
}
.toast-info{
  background:rgba(76,125,255,.92);
}
.toast-out{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .3s, transform .3s;
}
@keyframes toast-in{
  from{ opacity:0; transform:translateX(40px); }
  to{ opacity:1; transform:translateX(0); }
}

/* ===== 저장 버튼 ===== */
.create-save-btn{
  width:100%;
  padding:14px;
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.create-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:create-spin .6s linear infinite;
}
@keyframes create-spin{
  to{ transform:rotate(360deg); }
}

/* ===== 저장 결과 ===== */
.create-result{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,.3);
  background:rgba(34,197,94,.06);
}
.create-result-header{
  font-size:16px;
  font-weight:700;
  color:#22c55e;
  margin-bottom:12px;
}
.create-result-id-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== 모바일 대응 ===== */
@media(max-width:960px){
  .cand-card-media{
    flex-direction:column;
  }
  .cand-media-preview{
    max-width:none;
  }
  .toast-container{
    right:8px;
    left:8px;
    max-width:none;
  }
}
@media(max-width:600px){
  .create-head{
    flex-direction:column;
  }
  .cand-card-config{
    flex-direction:column;
    align-items:stretch;
  }
  .cand-card-config .cand-select{
    width:100%;
  }
  .cand-card-config .cand-url{
    max-width:none;
  }
  .create-result-id-row{
    flex-direction:column;
    align-items:stretch;
  }
  .create-save-btn{
    min-height:52px;
    font-size:17px;
  }
  .cand-card{
    padding:12px;
  }
}
/* =====================================================
   [PLAY] play.html 전용 스타일 — body[data-page="play"]
   다른 페이지에 영향 없도록 스코핑
   ===================================================== */

/* 풀 하이트 레이아웃: 하단 빈 공간 최소화 */


/* ✅ PLAY 상단 상태바: 모바일에서 세로 정렬 + 버튼 44px */
body[data-page="play"] .play-statusbar{
  gap: 8px;
}

@media(max-width:760px){
  body[data-page="play"] .play-statusbar{
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="play"] .play-statusbar .pill,
  body[data-page="play"] .play-statusbar .btn{
    width: 100%;
    justify-content: space-between;
  }

  body[data-page="play"] .play-statusbar .btn{
    min-height: 44px;
    }
  }




body[data-page="play"]{
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* ✅ 모바일 주소창 변화에 안정 */
}

body[data-page="play"] main.container{
  flex: 1 0 auto;
  max-width: none;                /* ✅ 폭 제한 해제 — 화면 거의 전체 사용 */
  margin: 8px auto;
  padding: 0 12px;
}

body[data-page="play"] .footer{
  flex-shrink: 0;
  margin-top: 8px;
  padding: 8px 0;
}

/* (V2 월드컵 카드 규칙 — V4 FINAL에서 대체됨, 전부 삭제) */

body[data-page="play"] #quizSection.card{
  width: min(92vw, 1300px);
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 40px;
}

body[data-page="play"] #quizTitle{
  font-size: 24px;
}

body[data-page="play"] #quizPrompt,
body[data-page="play"] .quiz-wide-question{
  font-size: 20px;
  line-height: 1.45;
}

body[data-page="play"] #quizQuestionPanel.notice{
  min-height: 380px;
  padding: 18px !important;
  width: 100%;
  box-sizing: border-box;
}

body[data-page="play"] .quiz-choice,
body[data-page="play"] .quiz-choice-wide{
  min-height: 64px;
  font-size: 17px;
}

/* ===========================
   [QUIZ] 객관식 선택지 UI 정리
   =========================== */

/* 선택지 패널: 중앙 정렬 래퍼 */
body[data-page="play"] #quizChoicesPanel{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 14px;
}

/* 선택지 그리드 컨테이너 */
body[data-page="play"] .quiz-choices{
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* 선택지 버튼 */
body[data-page="play"] .quiz-choice{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 14px;
  padding: 14px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  text-align: center;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page="play"] .quiz-choice:hover:not([disabled]){
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

body[data-page="play"] .quiz-choice:active:not([disabled]){
  transform: translateY(0) scale(.99);
}

body[data-page="play"] .quiz-choice.selected{
  border-color: rgba(76,125,255,.9);
  background: rgba(76,125,255,.18);
}

body[data-page="play"] .quiz-choice.correct{
  border-color: rgba(46,213,115,.9);
  background: rgba(46,213,115,.15);
}

body[data-page="play"] .quiz-choice.wrong{
  border-color: rgba(255,76,106,.9);
  background: rgba(255,76,106,.14);
}

body[data-page="play"] .quiz-choice[disabled]{
  cursor: not-allowed;
  opacity: .7;
}

/* 퀴즈 정답/오답 즉시 피드백 */
body[data-page="play"] .quiz-choice.qz-fb-correct{
  border-color:rgba(46,213,115,.9);
  background:rgba(46,213,115,.18);
  box-shadow:0 0 14px rgba(46,213,115,.25);
  opacity:1;
  animation:qzPulseCorrect .45s ease;
}
body[data-page="play"] .quiz-choice.qz-fb-wrong,
body[data-page="play"] .quiz-choice.qz-fb-wrong-perm{
  border-color:rgba(255,76,106,.85);
  background:rgba(255,76,106,.14);
  opacity:1;
  animation:qzShakeWrong .4s ease;
}
body[data-page="play"] .quiz-choice.qz-fb-wrong-perm{
  opacity:.45;
  pointer-events:none;
  animation:none;
}
body[data-page="play"] .quiz-choice.qz-fb-reveal{
  border-color:rgba(46,213,115,.7);
  background:rgba(46,213,115,.10);
  opacity:1;
}
body[data-page="play"] .quiz-choice.qz-fb-dim{
  opacity:.4;
}
@keyframes qzPulseCorrect{
  0%{transform:scale(1)}
  30%{transform:scale(1.04)}
  60%{transform:scale(.98)}
  100%{transform:scale(1)}
}
@keyframes qzShakeWrong{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(5px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
}

/* 문제 전환 페이드 */
body[data-page="play"] #quizQuestionPanel{
  transition:opacity .18s ease,transform .18s ease;
}
body[data-page="play"] #quizQuestionPanel.qz-exit{
  opacity:0;transform:translateY(-8px);
}
body[data-page="play"] #quizQuestionPanel.qz-enter{
  opacity:0;transform:translateY(12px);
}

/* 결과 진입 애니메이션 */
.end-badge.end-anim-pop{
  animation:endBadgePop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.end-quiz-big.end-anim-count{
  animation:endFadeUp .4s ease .15s both;
}
.end-quiz-sub.end-anim-fade{
  animation:endFadeUp .35s ease .3s both;
}
.end-summary.end-anim-stagger .end-stat{
  opacity:0;animation:endStatIn .35s ease both;
}
.end-summary.end-anim-stagger .end-stat:nth-child(1){animation-delay:.25s}
.end-summary.end-anim-stagger .end-stat:nth-child(2){animation-delay:.35s}
.end-summary.end-anim-stagger .end-stat:nth-child(3){animation-delay:.45s}
.end-winner-name.end-anim-pop{
  animation:endFadeUp .45s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.end-winner-media.end-anim-fade{
  animation:endFadeUp .4s ease .2s both;
}
@keyframes endBadgePop{
  0%{opacity:0;transform:scale(.3) rotate(-20deg)}
  60%{opacity:1;transform:scale(1.1) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes endFadeUp{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes endStatIn{
  0%{opacity:0;transform:translateY(10px) scale(.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* 멀티 승자 강조 강화 */
.end-player-item.champ-first{
  border-color:rgba(255,215,0,.5);
  background:linear-gradient(135deg,rgba(255,215,0,.10),rgba(255,160,0,.06));
  transform:scale(1.03);
  box-shadow:0 0 16px rgba(255,215,0,.15);
}
.end-player-item.champ-first .end-player-name::before{
  content:"👑 ";
}

/* prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  .qz-fb-correct,.qz-fb-wrong{animation:none!important}
  #quizQuestionPanel{transition:none!important}
  .end-badge.end-anim-pop,.end-quiz-big.end-anim-count,
  .end-quiz-sub.end-anim-fade,.end-summary.end-anim-stagger .end-stat,
  .end-winner-name.end-anim-pop,.end-winner-media.end-anim-fade{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .end-player-item.champ-stagger{animation:none!important;opacity:1!important}
}

/* ── [PLAY][QUIZ] 퀴즈 미디어 고정 박스 ── */
body[data-page="play"] #quizQuestionPanel{
  overflow: hidden;
}

/* 래퍼: 단순 마진만 담당 */
body[data-page="play"] #quizQuestionPanel #quizMediaWrap{
  width: 100%;
  margin: 12px 0 14px;
}

/* 고정 높이 내부 박스 — PC: 55vh (420~560px), 모바일은 @media에서 오버라이드 */
body[data-page="play"] #quizQuestionPanel #quizMediaWrap .quiz-media-box{
  width: 100%;
  height: 55vh;
  min-height: 420px;
  max-height: 560px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* img / video: contain으로 원본 전체 표시 */
body[data-page="play"] #quizQuestionPanel #quizMediaWrap .quiz-media-box > img,
body[data-page="play"] #quizQuestionPanel #quizMediaWrap .quiz-media-box > video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

/* iframe (유튜브 등) */
body[data-page="play"] #quizQuestionPanel #quizMediaWrap .quiz-media-box > iframe{
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}


/* ── [PLAY][QUIZ] PC 주관식 입력 row 넓게 ── */
body[data-page="play"] #quizSection #quizShortPanel{
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page="play"] #quizSection #quizShortPanel .quiz-short-input{
  flex: 1;
  min-width: 0;
  font-size: 17px;
  padding: 15px 18px;
}
body[data-page="play"] #quizSection #quizShortPanel .btn{
  flex-shrink: 0;
  min-width: 100px;
  padding: 15px 24px;
  font-size: 17px;
}

/* 모바일 세로 */
@media(max-width: 760px){
  body[data-page="play"] main.container{
    max-width: 100%;
    padding: 0 10px;
  }
  /* ✅ 월드컵 모바일 미디어 래퍼는 아래 @media 블록에서 통합 관리 */
  /* 모바일에서 퀴즈 카드 폭 원복 */
  body[data-page="play"] #quizSection.card{
    width: 100%;
    max-width: 100%;
    padding: 14px;
  }
  body[data-page="play"] #quizQuestionPanel.notice{
    min-height: 320px;
  }
  body[data-page="play"] #quizQuestionPanel #quizMediaWrap .quiz-media-box{
    height: 260px;
    min-height: 0;
    max-height: 260px;
  }
  body[data-page="play"] #quizSection #quizShortPanel .quiz-short-input{
    font-size: 16px;
    padding: 14px 16px;
  }
  body[data-page="play"] #quizSection #quizShortPanel .btn{
    min-width: auto;
    padding: 14px 18px;
    font-size: 16px;
  }
  /* 모바일: 선택지 1열 */
  body[data-page="play"] .quiz-choices{
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  body[data-page="play"] .quiz-choice{
    font-size: 15px;
    padding: 14px 12px;
  }
}
/* ===== Topbar (v2 — 2026-03-09 redesign) ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 clamp(16px, 3vw, 32px);
  height:60px;
  border-bottom:1px solid rgba(34,48,73,.6);
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(11,15,23,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.brand.logo{
  display:flex;
  align-items:center;
  height:60px;
  overflow:hidden;
  text-decoration:none;
  flex-shrink:0;
}
.brand.logo img{
  height:clamp(36px, 3.8vw, 48px);
  width:auto;
  max-width:160px;
  display:block;
  object-fit:contain;
}

/* ── Nav links (text style, not buttons) ── */
.nav-link{
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding:6px 12px;
  border-radius:8px;
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.nav-link:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.nav-link.active{
  color:var(--text);
}
/* ── Login button in nav ── */
.nav-login{
  background:rgba(76,125,255,.12);
  color:var(--primary);
  border:1px solid rgba(76,125,255,.25);
  padding:6px 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.nav-login:hover{
  background:rgba(76,125,255,.2);
  border-color:rgba(76,125,255,.4);
}
/* ── Nav separator dot ── */
.nav-sep{
  width:3px; height:3px;
  border-radius:50%;
  background:rgba(154,167,189,.35);
  flex-shrink:0;
}
@media(max-width:600px){
  .topbar{ padding:0 12px; height:52px; }
  .brand.logo{ height:52px; }
  .brand.logo img{ height:30px; }
  .nav-link{ font-size:13px; padding:5px 8px; }
  .nav-login{ padding:5px 12px; font-size:12px; }
}


/* ===== User Menu Dropdown ===== */
.user-menu-wrap{
  position:relative;
  display:inline-flex;
}
.user-menu-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.user-menu-trigger.active{
  color:var(--primary);
}
.user-menu-icon{
  flex-shrink:0;
}
.user-menu-caret{
  flex-shrink:0;
  transition:transform .2s;
}
.user-menu-trigger[aria-expanded="true"] .user-menu-caret{
  transform:rotate(180deg);
}
.user-menu-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:180px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:6px 0;
  z-index:200;
  animation:umFadeIn .15s ease;
}
@keyframes umFadeIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.user-menu-nick{
  padding:10px 16px 8px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.user-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 16px;
  font-size:14px;
  color:var(--text);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s;
}
.user-menu-item:hover,
.user-menu-item:focus-visible{
  background:rgba(255,255,255,.07);
}
.user-menu-item svg{
  flex-shrink:0;
  opacity:.7;
}
.user-menu-divider{
  height:1px;
  background:var(--line);
  margin:4px 0;
}
.user-menu-logout{
  color:var(--danger, #f55);
}
.user-menu-logout svg{
  stroke:var(--danger, #f55);
}
@media(max-width:600px){
  .user-menu-label{ display:none; }
  .user-menu-caret{ display:none; }
  .user-menu-panel{
    right:-8px;
    min-width:160px;
  }
}

/* ===== Footer Links ===== */
.footer-links{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.footer-links a{
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
}
.footer-links a:hover{
  color:var(--text);
  text-decoration:underline;
}

/* ===== Document Pages ===== */
.doc-container{
  max-width:720px;
  margin:0 auto;
  padding:24px 16px 40px;
}
.doc-card{
  padding:28px 24px;
  line-height:1.7;
}
.doc-card h1{
  font-size:28px;
  margin-bottom:4px;
}
.doc-card h2{
  font-size:18px;
  margin-top:28px;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
}
.doc-list{
  margin:8px 0 12px 20px;
  padding:0;
  line-height:1.8;
}
.doc-list li{
  margin-bottom:4px;
}

/* About — 핵심 포인트 그리드 */
.about-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  list-style:none;
  margin:14px 0 20px;
  padding:0;
}
.about-point{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
}
.about-point strong{
  font-size:15px;
}
.about-point .muted{
  font-size:13px;
}
.about-cta-row{
  display:flex;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
@media(max-width:520px){
  .about-points{ grid-template-columns:1fr; }
}

.contact-box{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  margin:10px 0 16px;
}

/* ===== Guidelines Section ===== */
.guidelines-section{
  margin-top: 40px;
  padding: 24px;
  background: rgba(255,255,255,.02);
}
.guidelines-section h2{
  margin-bottom: 8px;
  font-size: 18px;
}
.guidelines-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.guideline-item{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .2s;
}
.guideline-item:hover{
  border-color: rgba(76,125,255,.3);
}
.guideline-item strong{
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--text);
}
.guideline-item p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.guideline-item a{
  color: var(--primary);
  text-decoration: underline;
}
.feed-guidelines-link{
  text-align: center;
  margin: 32px 0 8px;
  font-size: 13px;
}
.feed-guidelines-link a{
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.feed-guidelines-link a:hover{
  color: var(--primary);
}

/* ===== Confirm Modal ===== */
.confirm-modal-overlay{ z-index:2600; }
.confirm-modal-box{ max-width:360px; text-align:center; padding:28px 24px 20px; }
.confirm-modal-title{ margin:0 0 8px; font-size:17px; }
.confirm-modal-msg{ margin:0 0 20px; font-size:13px; line-height:1.5; }
.confirm-modal-actions{ display:flex; gap:10px; justify-content:center; }
.confirm-modal-actions .btn{ min-width:80px; }
.btn.danger{ background:var(--error,#e74c3c); color:#fff; border:none; }
.btn.danger:hover{ opacity:.85; }

/* ===== Char Counter ===== */
.char-counter{ font-size:11px; color:var(--muted); text-align:right; margin-top:2px; }
.char-counter.near-limit{ color:var(--warn,#f0ad4e); }
.char-counter.at-limit{ color:var(--error,#e74c3c); }

/* ===== Question Reorder ===== */
.q-reorder{ margin-left:auto; display:flex; gap:2px; }
.q-move-btn{ padding:2px 6px; font-size:10px; line-height:1; min-width:0; }

/* ===== Create Page - New Button ===== */
.btn-new-create{ font-size:12px; padding:4px 10px; }

/* ===== Draft Autosave ===== */
.draft-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; margin-bottom:16px;
  background:rgba(76,125,255,.08); border:1px solid rgba(76,125,255,.22);
  border-radius:10px; font-size:13px; color:var(--text);
}
.draft-banner-msg{ flex:1; }
.draft-banner .btn{ padding:4px 12px; font-size:12px; }
.draft-autosave-status{
  font-size:11px; color:var(--muted); text-align:right;
  min-height:16px; margin-top:4px;
}

/* ===== Type Filter Tabs ===== */
.type-filter-tabs{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.type-filter-btn{
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.type-filter-btn:hover{
  color: var(--text);
  border-color: var(--muted);
  background: rgba(255,255,255,.03);
}
.type-filter-btn:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(76,125,255,.3);
}
.type-filter-btn.active{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 700;
}
/* 월드컵 필터 active 시 파란색 유지 */
#filterWorldcup.active{
  background: #4c7dff;
}
/* 퀴즈 필터 active 시 핑크색 */
#filterQuiz.active{
  background: #ff4c6a;
  border-color: #ff4c6a;
}
/* 티어 필터 active 시 초록색 */
#filterTier.active{
  background: #4cbb7c;
  border-color: #4cbb7c;
}

/* ===== Content Detail Modal ===== */
.detail-modal-box{
  max-width:560px;
  width:100%;
}
.detail-hero{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  margin-bottom:14px;
  max-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-report-icon{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  cursor:pointer;
  z-index:2;
  transition:all .18s ease;
  padding:0;
  line-height:1;
}
.detail-report-icon:hover{
  background:rgba(255,76,106,.25);
  border-color:rgba(255,76,106,.5);
  transform:scale(1.1);
}
.detail-hero img{
  width:100%;
  max-height:300px;
  object-fit:contain;
}
.detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.detail-meta-item{
  font-size:13px;
  color:var(--muted);
}
.detail-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  margin:10px 0;
  word-break:keep-all;
}
.detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 16px;
}
.detail-tag{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px 8px;
  font-size:12px;
  color:var(--muted);
}
.detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.detail-actions .btn{
  flex:1;
  text-align:center;
}
.detail-multi-desc{
  width:100%;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:-4px 0 0;
  line-height:1.4;
  order:10;
}
/* 티어 멀티 버튼 */
.detail-tier-multi{
  background:transparent;
  border:1.5px solid var(--accent, #7c5cfc);
  color:var(--accent, #7c5cfc);
  order:2;
}
.detail-tier-multi:hover{
  background:var(--accent, #7c5cfc);
  color:#fff;
}
#detailTierMultiDesc{
  order:11;
}
/* 싸움터: 전체 폭 + 1행 단독 */
#detailArena{
  flex:1 1 100%;
  order:1;
}
/* 티어 멀티: 2행 좌측 */
#detailTierMulti{
  order:2;
}
/* 시작하기: 티어에서는 2행 우측 (티어 멀티 보일 때만 order 적용) */
#detailTierMulti:not(.hidden) ~ #detailSolo{
  order:3;
}

/* ===== Detail Modal — 관련 하이라이트 ===== */
.detail-highlights{
  margin-top:18px;
  border-top:1px solid var(--border);
  padding-top:14px;
}
.detail-hl-title{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  margin:0 0 10px;
}
.detail-hl-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.detail-hl-card{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px;
  border-radius:8px;
  background:var(--card-bg);
  text-decoration:none;
  color:var(--text);
  transition:background .15s;
}
.detail-hl-card:hover{
  background:var(--hover);
}
.detail-hl-thumb{
  flex-shrink:0;
  width:72px;
  height:48px;
  border-radius:6px;
  overflow:hidden;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-hl-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.detail-hl-no-thumb{
  font-size:20px;
  color:var(--muted);
}
.detail-hl-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.detail-hl-platform{
  font-size:11px;
  color:var(--accent);
  font-weight:600;
}
.detail-hl-name{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-hl-channel{
  font-size:11px;
  color:var(--muted);
}
.detail-hl-more{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  color:var(--accent);
  text-decoration:none;
}
.detail-hl-more:hover{
  text-decoration:underline;
}

/* ===== Feed Card creator_name ===== */
.feed-card-creator{
  font-size: 12px;
  color: var(--muted);
  opacity: .8;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.feed-card-creator::before{
  content: "by";
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .7;
  flex-shrink:0;
}
.feed-card-creator-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===== Skeleton Loading ===== */
.skeleton-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.skeleton-thumb{
  width:100%;aspect-ratio:16/10;
  background:linear-gradient(135deg,#0a0e16 0%,#131b2a 100%);
}
.skeleton-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.skeleton-line{
  height:14px;border-radius:6px;
  background:rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.skeleton-line--title{width:75%;height:16px}
.skeleton-line--title2{width:50%;height:16px}
.skeleton-line--meta{width:60%;height:12px}
.skeleton-line--creator{width:40%;height:12px;margin-top:-4px}

/* shimmer animation */
.skeleton-line::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);
  animation:skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@media(prefers-reduced-motion:reduce){
  .skeleton-line::after{animation:none}
}

/* feed progress bar */
.feed-progress{
  text-align:center;padding:12px 0;font-size:13px;
  color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px;
}
.feed-progress-dots::after{
  content:"";display:inline-block;
  animation:feed-dots 1.4s steps(4,end) infinite;
}
@keyframes feed-dots{
  0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}
}
@media(prefers-reduced-motion:reduce){
  .feed-progress-dots::after{content:"…";animation:none}
}

/* feed error */
.feed-error{text-align:center;padding:32px 16px}
.feed-error p{margin:0 0 12px;font-size:14px;color:var(--muted)}

/* ===== End Overlay: more toggle ===== */
.end-more-toggle{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;color:rgba(255,255,255,.5);
  font-size:12px;cursor:pointer;padding:8px 16px;margin:4px auto;
  transition:color .15s;
}
.end-more-toggle:hover{color:rgba(255,255,255,.8)}
.end-more-toggle .end-more-chevron{
  display:inline-block;transition:transform .2s;font-size:10px;
}
.end-more-toggle[aria-expanded="true"] .end-more-chevron{
  transform:rotate(180deg);
}
.end-more-section{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .3s ease,opacity .25s ease;
}
.end-more-section.end-more-open{
  max-height:2000px;opacity:1;
}

/* detail creator icon */
.detail-creator-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:rgba(76,125,255,.2);color:var(--primary);
  font-size:10px;font-weight:700;margin-right:2px;
  flex-shrink:0;vertical-align:middle;overflow:hidden;
}
.detail-creator-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ===== Media Detail Modal (ranking) ===== */
.media-detail-modal-box{
  max-width:640px;
  width:100%;
}
.media-detail-content{
  min-height:200px;
  background:#000;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.media-detail-img{
  max-width:100%;
  max-height:60vh;
  object-fit:contain;
}
.media-detail-iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
}
.media-detail-video{
  width:100%;
  max-height:60vh;
}
.ranking-thumb-clickable{
  cursor:pointer;
}
.ranking-thumb-clickable:hover{
  opacity:.8;
}
.ranking-video-thumb{
  background:linear-gradient(135deg,#1a2233 0%,#2a3a55 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.ranking-video-play{
  font-size:14px;
  color:rgba(255,255,255,.8);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ===== 로그인 모달 ===== */
#loginModal.modal-overlay{
  z-index:2000;
}
#loginModal .modal-box{
  max-width:380px;
}
#loginModal .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
#loginModal .modal-head h3{
  font-size:18px;
  font-weight:700;
  margin:0;
}
#loginModal .icon-btn{
  background:none;
  border:none;
  color:var(--muted);
  font-size:22px;
  cursor:pointer;
  padding:4px 6px;
  line-height:1;
  border-radius:6px;
  transition:background .15s;
}
#loginModal .icon-btn:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
}
#loginModal .modal-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#loginModal .modal-body form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#loginModal .field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
#loginModal .field .label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
#loginModal .field input{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:border-color .2s;
}
#loginModal .field input:focus{
  border-color:var(--primary);
}
.password-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.password-wrap input{
  flex:1;
  padding-right:44px !important;
}
.pw-toggle{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  font-size:20px;
  padding:4px 6px;
  line-height:1;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  transition:background .15s;
}
.pw-toggle:hover{
  background:rgba(255,255,255,.06);
}
.w-full{
  width:100%;
}
.error-text{
  color:var(--danger);
  font-size:13px;
  text-align:center;
  margin:0;
}
.success-text{
  color:#4caf50;
  font-size:13px;
  text-align:center;
  margin:0;
}
/* 로그인/회원가입 탭 */
.auth-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.auth-tab{
  flex:1;
  padding:10px 0;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.auth-tab:hover{
  color:var(--text);
}
.auth-tab.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}
/* ── 카카오 로그인 버튼 ── */
.btn-kakao-login{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:12px 16px;
  background:#FEE500;
  color:#191919;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
.btn-kakao-login:hover{ background:#fdd835; }
.btn-kakao-login:active{ opacity:.85; }
.btn-kakao-login:disabled{ opacity:.5; cursor:not-allowed; }
.btn-kakao-login .kakao-icon{ flex-shrink:0; }

.login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0 4px;
  color:var(--muted);
  font-size:12px;
}
.login-divider::before,.login-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

/* 로그인 필요 안내 카드 (create/create-quiz 인라인) */
.login-prompt-card{
  text-align:center;
  padding:20px;
}
.login-prompt-card .btn{
  margin-top:10px;
}

/* (V2 contain 강제 — V3 FINAL에서 대체됨, 삭제) */

/* =====================================================
   [PLAY] UX/UI 개편 — 2026-02
   ===================================================== */

/* ── 상태바 컴팩트 ── */
body[data-page="play"] .play-statusbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
body[data-page="play"] .play-title-pill{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="play"] .play-statusbar-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
  margin-left:auto;
}

/* ✅ 솔로 모드: 초대 버튼 숨김 후 신고 버튼만 자연스럽게 표시 */
body[data-page="play"] .play-statusbar-actions.solo-mode{
  gap:0;
}
body[data-page="play"] .play-statusbar-actions.solo-mode .btn:not(.hidden){
  margin-left:0;
}

/* ── 연결 상태 뱃지 (멀티 전용) ── */
.conn-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
  flex-shrink:0;
}
.conn-dot--on{  background:#22c55e; box-shadow:0 0 4px rgba(34,197,94,.6); }
.conn-dot--warn{ background:#facc15; box-shadow:0 0 4px rgba(250,204,21,.6); animation:conn-blink 1s ease-in-out infinite; }
.conn-dot--off{  background:#ef4444; box-shadow:0 0 4px rgba(239,68,68,.6); }
@keyframes conn-blink{ 0%,100%{opacity:1} 50%{opacity:.35} }
.conn-countdown{
  font-size:11px;
  color:var(--danger,#ff4c6a);
  margin-left:4px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
#connPill{
  display:flex;
  align-items:center;
  gap:2px;
  font-size:12px;
  padding:4px 10px;
}

/* ── 월드컵 헤더 + 프로그레스 바 ── */
.wc-header, .quiz-header{
  margin-bottom:16px;
}
.wc-title, .quiz-title-text{
  font-size:20px;
  font-weight:800;
  margin:0 0 8px;
  line-height:1.3;
}
.wc-info-row, .quiz-info-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.wc-info-badge{
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.wc-timer-badge{
  border-color:rgba(255,193,7,.4);
  background:rgba(255,193,7,.08);
  color:#ffc107;
}

/* 프로그레스 바 */
.wc-progress-bar{
  width:100%;
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.wc-progress-fill{
  height:100%;
  border-radius:3px;
  background:var(--primary);
  transition:width .3s ease;
}

/* 선택 통계 피드백 pill */
.wc-pair-feedback{
  margin-top:8px;
  padding:6px 14px;
  border-radius:10px;
  background:rgba(76,125,255,.10);
  border:1px solid rgba(76,125,255,.25);
  font-size:13px;
  font-weight:600;
  color:rgba(231,238,252,.88);
  text-align:center;
  line-height:1.4;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.wc-pair-feedback.show{
  opacity:1;
  transform:translateY(0);
}
.wc-pair-feedback .pf-pct{
  color:var(--primary);
  font-weight:700;
}
.wc-pair-feedback .pf-label{
  margin-left:6px;
  font-size:11px;
  opacity:.7;
}

/* (V2.5 BIG CARDS match/choice/choiceText/vs — V4 FINAL에서 대체됨) */

/* ── 액션 버튼 행 ── */
.wc-actions-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:14px;
}
.wc-actions-row .btn.big{
  min-width:200px;
  padding:14px 28px;
  font-size:16px;
}

/* ── 퀴즈 헤더 개선 ── */
body[data-page="play"] .quiz-title-text{
  font-size:22px;
}

/* ── 결과/우승 패널 개선 ── */
body[data-page="play"] #finishedPanel,
body[data-page="play"] #quizFinishedPanel{
  margin-top:16px;
  padding:20px;
  border:1px solid rgba(255,215,0,.3);
  background:rgba(255,215,0,.04);
  border-radius:16px;
}
body[data-page="play"] .champion{
  font-size:24px;
  padding:20px;
  border-radius:16px;
}

/* ── 모바일 대응 ── */
@media(max-width:760px){
  body[data-page="play"] .play-statusbar{
    flex-direction:column;
    align-items:stretch;
  }
  body[data-page="play"] .play-statusbar-actions{
    width:100%;
    margin-left:0;
  }
  body[data-page="play"] .play-statusbar-actions .btn{
    flex:1;
    min-height:44px;
    text-align:center;
  }
  body[data-page="play"] .play-title-pill{
    width:100%;
    text-align:center;
  }
  .wc-title, .quiz-title-text{
    font-size:17px;
    text-align:center;
  }
  .wc-info-row, .quiz-info-row{
    justify-content:center;
  }
  .wc-actions-row .btn.big{
    width:100%;
    min-width:0;
  }
  /* (V2.5 모바일 월드컵 카드 — V4 FINAL에서 대체됨) */
}

/* ==========================================================
   엔딩 오버레이 (End Overlay) — 월드컵/퀴즈 공용
   ========================================================== */
.end-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:flex-start;justify-content:center;
}
.end-overlay.hidden{display:none}
.end-overlay-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.end-overlay-scroll{
  position:relative;z-index:1;
  width:100%;min-height:0;
  max-height:100vh;max-height:100dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:24px 12px calc(env(safe-area-inset-bottom,12px) + 24px);
  display:flex;flex-direction:column;align-items:center;
}
.end-card{
  width:100%;max-width:440px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(30,30,45,.92),rgba(18,18,30,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 40px rgba(110,90,255,.18),0 4px 24px rgba(0,0,0,.4);
  overflow:hidden;
  animation:endCardIn .4s ease-out;
}
@keyframes endCardIn{
  from{opacity:0;transform:translateY(30px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.end-close-btn{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.5);color:#fff;
  font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:2;
}
.end-close-btn:hover{background:rgba(255,255,255,.15)}

/* 캡처 영역 */
.end-capture{
  padding:28px 24px 20px;
  background:linear-gradient(160deg,rgba(40,36,70,.95),rgba(22,20,40,.98));
  position:relative;
}
.end-brand{
  display:flex;align-items:center;gap:8px;
  margin-bottom:18px;flex-wrap:wrap;
}
.end-logo{height:28px;width:auto;border-radius:6px}
.end-brand-text{font-size:20px;font-weight:800;color:#fff;letter-spacing:1px}
.end-hashtags{font-size:12px;color:rgba(255,255,255,.45);margin-left:auto}

/* 월드컵 우승자 카드 */
.end-winner-wrap{text-align:center;margin:8px 0 16px}
.end-winner-label{
  font-size:13px;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:6px;
}
.end-winner-name{
  font-size:26px;font-weight:800;color:#fff;
  text-shadow:0 0 18px rgba(140,120,255,.5);
  margin-bottom:14px;word-break:keep-all;
}
.end-winner-media{
  width:100%;min-height:200px;max-height:280px;
  border-radius:14px;overflow:hidden;
  background:#111;display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  flex:0 0 auto;                  /* ✅ flex 부모 안에서 높이 0 방지 */
}
.end-winner-media img,
.end-winner-media video{
  display:block !important;       /* ✅ hidden 해제 실패 방어 */
  width:100%;max-width:100%;height:auto;max-height:280px;
  object-fit:contain;
}
.end-winner-media .end-yt-thumb{
  display:block !important;
  width:100%;max-width:100%;height:auto;max-height:280px;object-fit:cover;
}
.end-summary{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:6px;
}
.end-stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:8px 14px;text-align:center;
  min-width:70px;
}
.end-stat-value{font-size:18px;font-weight:700;color:#fff}
.end-stat-label{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}

/* 멀티 플레이어 섹션 */
.end-players-section{
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
}
.end-players-label{
  font-size:12px;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:1px;
  margin-bottom:10px;text-align:center;
}
.end-players-list{
  display:flex;flex-direction:column;gap:6px;
}
.end-player-item{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:8px 12px;
}
.end-player-name{
  font-size:14px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:6px;
}
.end-player-host{
  font-size:9px;font-weight:700;
  background:linear-gradient(135deg,#ffd700,#ff8c00);
  color:#1a1a1a;padding:2px 5px;border-radius:4px;
  text-transform:uppercase;
}
.end-player-score{
  font-size:14px;font-weight:700;
  color:rgba(255,255,255,.7);
}

/* 퀴즈 엔딩 */
.end-quiz-score{
  text-align:center;margin:12px 0 10px;
}
.end-quiz-big{
  font-size:52px;font-weight:900;
  background:linear-gradient(135deg,#7c6aff,#ff6ab0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
}
.end-quiz-sub{
  font-size:15px;color:rgba(255,255,255,.55);margin-top:4px;
}
.end-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  font-size:28px;font-weight:900;
  margin:10px auto;
  border:3px solid;
}
.end-badge-s{background:linear-gradient(135deg,#ffd700,#ff8c00);border-color:#ffd700;color:#1a1a1a}
.end-badge-a{background:linear-gradient(135deg,#7c6aff,#a78bfa);border-color:#a78bfa;color:#fff}
.end-badge-b{background:linear-gradient(135deg,#3b82f6,#60a5fa);border-color:#60a5fa;color:#fff}
.end-badge-c{background:linear-gradient(135deg,#6b7280,#9ca3af);border-color:#9ca3af;color:#fff}

/* 하단 브랜드 */
.end-footer-brand{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:16px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.end-footer-url{font-size:13px;color:rgba(255,255,255,.4);font-weight:600}
.end-footer-cta{font-size:12px;color:rgba(255,255,255,.35)}

/* CTA 버튼 영역 */
.end-cta-row{
  display:flex;gap:8px;padding:16px 20px 10px;
}
.end-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 10px;border-radius:12px;
  font-size:14px;font-weight:700;cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  transition:all .2s;color:#fff;
}
.end-btn:disabled{opacity:.5;pointer-events:none}
.end-btn-icon{font-size:16px}
.end-btn-save{background:linear-gradient(135deg,#7c6aff,#5b4dbf)}
.end-btn-save:hover{box-shadow:0 0 16px rgba(124,106,255,.4)}
.end-btn-share{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.end-btn-share:hover{box-shadow:0 0 16px rgba(37,99,235,.4)}
.end-btn-replay{background:rgba(255,255,255,.08)}
.end-btn-replay:hover{background:rgba(255,255,255,.14)}

/* 공유 행 */
.end-share-row{padding:4px 20px 12px}
.end-link-box{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:8px 12px;
}
.end-share-url{
  flex:1;font-size:12px;color:rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.end-copy-btn{
  font-size:12px;padding:4px 10px;white-space:nowrap;
  color:var(--primary,#7c6aff);
}

/* 추가 CTA */
.end-extra-cta{
  padding:0 20px 20px;
  display:flex;flex-direction:column;gap:8px;
}
.end-extra-cta .btn{
  width:100%;text-align:center;
}

/* ── 퀴즈 인라인 통계 (endOverlay 안) ── */
.end-quiz-stats{
  padding:16px 20px 8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.end-quiz-stats.hidden{display:none}
.end-stats-title{
  font-size:13px;font-weight:700;color:rgba(255,255,255,.6);
  margin-bottom:10px;text-align:center;
}
.end-stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.end-stats-card{
  background:rgba(255,255,255,.05);border-radius:10px;
  padding:10px 8px;text-align:center;
}
.end-stats-val{
  font-size:18px;font-weight:800;color:#fff;
}
.end-stats-lbl{
  font-size:10px;color:rgba(255,255,255,.5);margin-top:2px;
}
.end-stats-compare{
  text-align:center;padding:10px 0 4px;
  font-size:13px;color:rgba(255,255,255,.6);
}
.end-stats-empty{
  text-align:center;padding:12px 0;
  color:rgba(255,255,255,.4);font-size:13px;
}
.end-stats-loading{
  text-align:center;padding:16px 0;
  color:rgba(255,255,255,.5);font-size:13px;
}
.end-detail-report-btn{
  display:block;width:auto;margin:8px auto 4px;
  padding:10px 24px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.75);font-size:13px;font-weight:600;
  cursor:pointer;transition:background .2s,color .2s;
}
.end-detail-report-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.end-detail-report-btn.hidden{display:none}

/* ── 추천 콘텐츠 (인페이지 결과 박스 내부, compact 가로 카드바) ── */
.inpage-recommend-bar{
  margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.inpage-recommend-bar.hidden{display:none}
.inpage-recommend-bar:empty{display:none}
.end-rec-label{
  font-size:11px;font-weight:700;color:rgba(255,255,255,.38);
  margin-bottom:6px;padding-left:2px;
  letter-spacing:.2px;
}
.end-rec-list{
  display:flex;gap:8px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.end-rec-list::-webkit-scrollbar{display:none}
.end-rec-card{
  flex:0 0 auto;width:220px;
  scroll-snap-align:start;
  background:rgba(255,255,255,.04);border-radius:10px;
  overflow:hidden;text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.06);
  transition:background .2s,border-color .2s;
  display:flex;flex-direction:row;align-items:stretch;
}
.end-rec-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10)}
.end-rec-card:active{transform:scale(.98)}
.end-rec-thumb-wrap{
  flex:0 0 64px;width:64px;min-height:60px;
  overflow:hidden;background:rgba(255,255,255,.03);
}
.end-rec-thumb{
  width:100%;height:100%;object-fit:cover;display:block;
}
.end-rec-thumb-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:rgba(255,255,255,.10);
  background:linear-gradient(135deg,rgba(108,92,231,.10),rgba(255,107,138,.06));
}
.end-rec-info{
  flex:1;min-width:0;padding:7px 10px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.end-rec-badge{
  display:inline-block;font-size:8px;font-weight:700;
  padding:1px 4px;border-radius:3px;width:fit-content;
}
.end-rec-badge--wc{background:rgba(255,193,7,.15);color:#ffc107}
.end-rec-badge--quiz{background:rgba(108,92,231,.15);color:#9b8ce8}
.end-rec-badge--tier{background:rgba(76,255,126,.15);color:#4cff7e}
.end-rec-title{
  font-size:12px;font-weight:600;color:rgba(255,255,255,.80);
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.end-rec-meta{
  font-size:9px;color:rgba(255,255,255,.30);
}

/* 반응형 */
/* ── PC 결과창: 넓은 가로형 레이아웃 ── */
@media(min-width:521px){
  .end-overlay-scroll{padding:32px 16px env(safe-area-inset-bottom,16px)}
  .end-card{max-width:700px;border-radius:24px}
  .end-capture{padding:32px 32px 24px}
  .end-brand{margin-bottom:20px}
  .end-logo{height:30px}
  .end-brand-text{font-size:22px}

  /* ── 월드컵: 미디어 + 정보 가로 배치 ── */
  .end-winner-wrap{
    margin:10px 0 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:0 24px;
    text-align:left;
  }
  .end-winner-label{
    grid-column:1/-1;text-align:center;
    font-size:13px;margin-bottom:8px;
  }
  .end-winner-media{
    grid-column:1;grid-row:2/4;
    min-height:180px;max-height:260px;border-radius:16px;margin-bottom:0;
    align-self:center;
  }
  .end-winner-media img,
  .end-winner-media video{max-height:260px}
  .end-winner-media .end-yt-thumb{max-height:260px}
  .end-winner-name{
    grid-column:2;grid-row:2;
    font-size:26px;margin-bottom:12px;
    align-self:end;text-align:center;
  }
  .end-winner-wrap > .end-summary{
    grid-column:2;grid-row:3;
    align-self:start;justify-content:center;
    margin-top:0;
  }
  .end-winner-wrap > .end-players-section{
    grid-column:1/-1;
  }

  /* ── 퀴즈: 등급+점수 / 통계 가로 배치 ── */
  #endBody > .end-quiz-score{
    margin:16px 0 14px;
  }
  #endBody > .end-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
    gap:10px;
    margin-top:14px;
  }

  .end-summary{gap:14px}
  .end-stat{padding:10px 16px;min-width:80px;border-radius:12px}
  .end-stat-value{font-size:20px}
  .end-stat-label{font-size:12px}
  .end-badge{width:72px;height:72px;font-size:32px;margin:12px auto}
  .end-quiz-big{font-size:56px}
  .end-quiz-sub{font-size:16px}

  /* 플레이어 목록: 가로 그리드 */
  .end-players-section{margin-top:18px;padding-top:16px}
  .end-players-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:8px;
  }
  .end-player-item{padding:10px 14px}
  .end-footer-brand{margin-top:18px;padding-top:14px}

  /* 퀴즈 통계: 2x2 그리드 */
  .end-quiz-stats{padding:18px 28px 10px}
  .end-stats-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .end-stats-card{padding:14px 12px;border-radius:12px}
  .end-stats-val{font-size:20px}
  .end-stats-lbl{font-size:11px}
  .end-stats-compare{font-size:13px}
  .end-detail-report-btn{padding:12px 28px;margin:10px auto 6px;font-size:14px}

  /* CTA: 가로 한 줄 */
  .result-cta-row{padding:20px 12px 10px;gap:12px;flex-wrap:nowrap}
  .result-cta-btn{padding:14px 24px;font-size:15px;min-height:48px;border-radius:14px;flex:1}
  .result-cta-btn--ghost{flex:1}
  .end-share-row{padding:6px 28px 14px}
  .end-extra-cta{padding:0 28px 24px}
  .end-more-toggle{padding:10px 20px;font-size:13px}
}

/* ── 모바일 결과창: compact 레이아웃 ── */
@media(max-width:520px){
  /* 오버레이: 패딩 최소화 */
  .end-overlay-scroll{padding:4px 3px env(safe-area-inset-bottom,4px)}
  .end-card{max-width:100%;border-radius:14px;box-shadow:0 0 20px rgba(110,90,255,.10),0 2px 10px rgba(0,0,0,.25)}

  /* 캡처: tight */
  .end-capture{padding:12px 10px 8px}

  /* 브랜드: 최소화 */
  .end-brand{margin-bottom:6px;gap:4px}
  .end-logo{height:18px}
  .end-brand-text{font-size:14px}
  .end-hashtags{display:none}

  /* ─ 월드컵: 핵심 결과 우선 ─ */
  .end-winner-wrap{margin:2px 0 4px}
  .end-winner-label{font-size:10px;letter-spacing:1.5px;margin-bottom:2px}
  .end-winner-name{font-size:19px;margin-bottom:6px}
  .end-winner-media{min-height:120px;max-height:180px;border-radius:10px;margin-bottom:6px}
  .end-winner-media img,
  .end-winner-media video{max-height:180px}
  .end-winner-media .end-yt-thumb{max-height:180px}

  /* 통계: 한 줄에 compact */
  .end-summary{gap:4px;margin-top:2px}
  .end-stat{padding:4px 8px;min-width:52px;border-radius:6px}
  .end-stat-value{font-size:13px}
  .end-stat-label{font-size:8px}

  /* ─ 퀴즈: 등급+점수 tight ─ */
  .end-quiz-score{margin:4px 0 4px}
  .end-badge{width:44px;height:44px;font-size:20px;border-width:2px;margin:4px auto}
  .end-quiz-big{font-size:34px}
  .end-quiz-sub{font-size:12px;margin-top:1px}

  /* 퀴즈 통계: tight */
  .end-quiz-stats{padding:6px 8px 3px}
  .end-stats-title{font-size:10px;margin-bottom:4px}
  .end-stats-grid{gap:4px}
  .end-stats-card{padding:4px 3px;border-radius:6px}
  .end-stats-val{font-size:13px}
  .end-stats-lbl{font-size:8px}
  .end-stats-compare{padding:4px 0 1px;font-size:11px}
  .end-detail-report-btn{padding:7px 14px;margin:3px auto 1px;font-size:11px;border-radius:8px}

  /* 플레이어: tight */
  .end-players-section{margin-top:6px;padding-top:6px}
  .end-players-label{font-size:9px;margin-bottom:4px}
  .end-player-item{padding:4px 8px;border-radius:6px}
  .end-player-name{font-size:12px;gap:4px}
  .end-player-score{font-size:12px}

  /* 하단 브랜드: minimal */
  .end-footer-brand{margin-top:6px;padding-top:6px}
  .end-footer-url{font-size:10px}
  .end-footer-cta{font-size:9px}

  /* CTA: tight 2열 */
  .result-cta-row{gap:5px;padding:8px 8px 3px;margin-top:4px}
  .result-cta-btn{flex:1 1 calc(50% - 5px);min-width:0;padding:10px 6px;font-size:12px;border-radius:8px;min-height:40px}
  .result-cta-btn--ghost{flex:1 1 100%}
  .result-cta-btn .cta-icon{font-size:13px}

  /* 더보기/공유: tight */
  .end-more-toggle{padding:4px 10px;font-size:10px}
  .end-share-row{padding:1px 10px 6px}
  .end-link-box{padding:5px 8px;border-radius:6px}
  .end-share-url{font-size:10px}
  .end-extra-cta{padding:0 10px 10px;gap:4px}
  .end-extra-cta .btn{padding:8px;font-size:12px;border-radius:8px}

  /* 기존 CTA row 호환 */
  .end-cta-row{flex-direction:column;padding:6px 10px 4px}
  .end-btn{width:100%;padding:10px 8px}

  /* 추천 */
  .inpage-recommend-bar{margin-top:6px;padding-top:4px}
  .end-rec-card{width:160px}
  .end-rec-thumb-wrap{flex:0 0 44px;width:44px;min-height:40px}
  .end-rec-title{font-size:10px}
  .end-rec-meta{font-size:8px}
}
/* 초소형 (360px 이하) */
@media(max-width:360px){
  .end-capture{padding:8px 6px 6px}
  .end-brand{display:none}
  .end-winner-name{font-size:17px}
  .end-winner-media{min-height:100px;max-height:150px}
  .end-winner-media img,
  .end-winner-media video{max-height:150px}
  .end-quiz-big{font-size:28px}
  .end-badge{width:38px;height:38px;font-size:18px}
  .end-stat{padding:3px 6px;min-width:44px}
  .end-stat-value{font-size:12px}
  .result-cta-btn{padding:8px 4px;font-size:11px;min-height:36px}
  .end-footer-brand{display:none}
}

/* ==========================================================
   댓글/커뮤니티 섹션 (Comments Section)
   ========================================================== */
.comments-section{
  max-width:720px;
  margin:18px auto 0;
  padding:22px 20px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(18,26,39,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.comments-head{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:14px;
}
.comments-title{
  font-size:18px;font-weight:800;color:var(--text);
}
.comments-sub{
  font-size:12px;color:var(--muted);
}

/* 댓글 리스트 */
.comment-list{
  max-height:320px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  padding-right:4px;
  margin-bottom:12px;
}
.comment-list::-webkit-scrollbar{width:5px}
.comment-list::-webkit-scrollbar-track{background:transparent}
.comment-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* 댓글 아이템 */
.comment-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  transition:background .15s;
}
.comment-item:hover{
  background:rgba(255,255,255,.05);
}

/* 아바타 (이니셜 원형) */
.comment-avatar{
  width:34px;height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(76,125,255,.35),rgba(140,120,255,.3));
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;
  flex-shrink:0;
  text-transform:uppercase;
  overflow:hidden;
}
.comment-avatar-img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  border-radius:50%;
}
.comment-body{
  flex:1;min-width:0;
}
.comment-meta{
  display:flex;align-items:center;gap:8px;
  margin-bottom:3px;
}
.comment-author{
  font-size:13px;font-weight:700;color:var(--text);
}
.comment-time{
  font-size:11px;color:var(--muted);
}
.comment-text{
  font-size:14px;line-height:1.5;color:var(--text);
  word-break:break-word;
}
.comment-delete-btn{
  margin-left:auto;flex-shrink:0;
  padding:4px 8px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  transition:all .15s;
  align-self:center;
}
.comment-delete-btn:hover{
  border-color:var(--danger);
  color:var(--danger);
  background:rgba(255,76,106,.08);
}

/* 댓글 신고 버튼 */
.comment-report-btn{
  flex-shrink:0;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  transition:all .15s;
  align-self:center;
  line-height:1.4;
  white-space:nowrap;
}
.comment-report-btn:hover{
  color:var(--danger, #e74c3c);
  border-color:var(--danger, #e74c3c);
  background:rgba(231,76,60,.08);
}

/* 댓글 신고 모달 */
.comment-report-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:3100;padding:20px;
}
.comment-report-overlay.hidden{display:none;}
.comment-report-box{
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;max-width:400px;width:100%;
  overflow:hidden;
}
.comment-report-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.comment-report-header h4{margin:0;font-size:16px;font-weight:700;}
.comment-report-close{
  background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;padding:0;line-height:1;
}
.comment-report-close:hover{color:var(--text);}
.comment-report-body{padding:16px 20px;}
.comment-report-desc{font-size:13px;color:var(--muted);margin:0 0 12px;}
.comment-report-reasons{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.comment-report-reasons label{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--text);cursor:pointer;
  padding:8px 12px;border-radius:8px;border:1px solid var(--line);
  transition:all .15s;
}
.comment-report-reasons label:hover{background:rgba(255,255,255,.04);border-color:var(--primary);}
.comment-report-reasons input[type="radio"]{accent-color:var(--primary);}
.comment-report-detail{
  width:100%;padding:10px 12px;border-radius:8px;
  border:1px solid var(--line);background:#0f1624;color:var(--text);
  font-size:13px;resize:vertical;min-height:40px;
}
.comment-report-detail:focus{outline:none;border-color:var(--primary);}
.comment-report-footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--line);
}

/* 빈 상태 */
.comment-empty{
  text-align:center;
  padding:20px 10px;
  font-size:14px;
  color:var(--muted);
}

/* 입력 폼 */
.comment-form{
  margin-top:4px;
}
.comment-form-inner{
  display:flex;flex-direction:column;gap:8px;
}
.comment-input{
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,22,36,.8);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  resize:vertical;
  min-height:44px;
  max-height:120px;
  outline:none;
  transition:border-color .2s;
}
.comment-input:focus{
  border-color:var(--primary);
}
.comment-input:disabled{
  opacity:.5;cursor:not-allowed;
}
.comment-actions{
  display:flex;align-items:center;justify-content:space-between;
}
.comment-charcount{
  font-size:12px;color:var(--muted);
}
.comment-post-btn{
  padding:8px 20px;
  font-size:14px;
  font-weight:700;
  border-radius:10px;
  min-width:64px;
}
.comment-notice{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(76,125,255,.2);
  background:rgba(76,125,255,.06);
  font-size:13px;color:var(--muted);
  margin-bottom:8px;
}
.comment-login-btn{
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  color:var(--primary);
  border-color:var(--primary);
  margin-left:auto;
  flex-shrink:0;
}

/* 반응형 */
@media(max-width:760px){
  .comments-section{
    margin:12px 4px 0;
    padding:16px 14px 14px;
    border-radius:16px;
  }
  .comment-list{
    max-height:260px;
  }
  .comment-post-btn{
    width:100%;
    padding:12px;
  }
  .comment-actions{
    flex-direction:column;gap:6px;
    align-items:stretch;
  }
  .comment-charcount{
    text-align:right;
  }
}

/* ==========================================================
   닉네임 변경 모달 (Nickname Change Modal)
   ========================================================== */
.nick-change-btn{
  padding:4px 8px;
  font-size:16px;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s;
}
.nick-change-btn:hover{
  background:rgba(255,255,255,.08);
}

.nick-modal-overlay{
  position:fixed;inset:0;z-index:2100;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.nick-modal-overlay.hidden{display:none}

.nick-modal-card{
  width:92vw;max-width:400px;
  background:linear-gradient(145deg,rgba(30,30,45,.95),rgba(18,18,30,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:0 0 32px rgba(76,125,255,.12),0 4px 20px rgba(0,0,0,.4);
  padding:24px 22px 20px;
  animation:nick-card-in .25s ease-out;
}
@keyframes nick-card-in{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.nick-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.nick-modal-title{
  font-size:18px;font-weight:800;color:var(--text);margin:0;
}
.nick-modal-close{
  background:none;border:none;color:var(--muted);
  font-size:24px;cursor:pointer;padding:4px 6px;
  line-height:1;border-radius:8px;
  transition:background .15s, color .15s;
}
.nick-modal-close:hover{
  background:rgba(255,255,255,.08);color:var(--text);
}
.nick-modal-body{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:18px;
}
.nick-modal-label{
  font-size:13px;font-weight:600;color:var(--muted);
}
.nick-modal-input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,22,36,.8);
  color:var(--text);
  font-size:16px;
  outline:none;
  transition:border-color .2s;
}
.nick-modal-input:focus{
  border-color:var(--primary);
}
.nick-modal-hint{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--muted);
}
.nick-modal-rule{
  opacity:.7;
}
.nick-modal-error{
  font-size:13px;color:var(--danger);margin:0;
}
.nick-modal-success{
  font-size:13px;color:#4caf50;margin:0;
}
.nick-modal-actions{
  display:flex;gap:10px;justify-content:flex-end;
}
.nick-modal-actions .btn{
  min-width:72px;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  border-radius:12px;
}

@media(max-width:500px){
  .nick-modal-card{
    padding:20px 16px 16px;
  }
  .nick-modal-actions{
    flex-direction:column;
  }
  .nick-modal-actions .btn{
    width:100%;
    text-align:center;
  }
}

/* ==========================================================
   [PLAY] 대기실(Lobby Room) 고급화 스타일 — 2026-02
   body[data-page="play"] 스코프: 다른 페이지 영향 없음
   ========================================================== */

/* ── 대기실 메인 패널 ── */
body[data-page="play"] .lobby-room-panel{
  max-width:900px;
  margin:0 auto;
  padding:28px 32px 32px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(25,30,45,.95),rgba(15,18,28,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 40px rgba(76,125,255,.08),0 4px 24px rgba(0,0,0,.3);
}

/* ── 대기실 헤더 ── */
body[data-page="play"] .lobby-room-header{
  text-align:center;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body[data-page="play"] .lobby-room-title{
  font-size:26px;
  font-weight:800;
  margin:0 0 8px;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.8) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
body[data-page="play"] .lobby-room-subtitle{
  font-size:14px;
  color:var(--muted);
  margin:0;
  line-height:1.5;
}

/* ── 게임 설정 카드 ── */
body[data-page="play"] .lobby-settings-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px 20px;
  margin-bottom:24px;
}
body[data-page="play"] .lobby-settings-header{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:12px;
}
body[data-page="play"] .lobby-settings-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ── 설정 배지 ── */
body[data-page="play"] .lobby-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(76,125,255,.12);
  border:1px solid rgba(76,125,255,.25);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  transition:all .2s;
}
body[data-page="play"] .lobby-badge-icon{
  font-size:14px;
}
body[data-page="play"] .lobby-badge-round{
  background:rgba(255,193,7,.12);
  border-color:rgba(255,193,7,.3);
}
body[data-page="play"] .lobby-badge-pick{
  background:rgba(156,39,176,.12);
  border-color:rgba(156,39,176,.3);
}
body[data-page="play"] .lobby-badge-timer{
  background:rgba(0,188,212,.12);
  border-color:rgba(0,188,212,.3);
}
body[data-page="play"] .lobby-badge-mode{
  background:rgba(76,175,80,.12);
  border-color:rgba(76,175,80,.3);
}

/* ── 월드컵 설정 (기존 스타일 오버라이드) ── */
body[data-page="play"] .lobby-room-panel .wc-settings-info{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  border:none;
  padding:0;
  margin:0;
  background:none;
}

/* ── 참가자 영역 ── */
body[data-page="play"] .lobby-players-section{
  margin-bottom:28px;
}
body[data-page="play"] .lobby-players-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
body[data-page="play"] .lobby-players-title{
  font-size:16px;
  font-weight:700;
  margin:0;
  color:var(--text);
}
body[data-page="play"] .lobby-players-count{
  font-size:13px;
  color:var(--muted);
  background:rgba(255,255,255,.05);
  padding:6px 12px;
  border-radius:8px;
}
body[data-page="play"] .lobby-players-count b{
  color:var(--primary);
  font-weight:700;
}

/* ── 참가자 카드 그리드 ── */
body[data-page="play"] .lobby-players-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}

/* ── 참가자 카드 ── */
body[data-page="play"] .lobby-player-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:20px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:all .25s ease;
  min-height:130px;
  justify-content:center;
}
body[data-page="play"] .lobby-player-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-2px);
}

/* 내 카드 하이라이트 */
body[data-page="play"] .lobby-player-card.is-me{
  background:linear-gradient(135deg,rgba(76,125,255,.15),rgba(76,125,255,.08));
  border-color:rgba(76,125,255,.35);
  box-shadow:0 0 20px rgba(76,125,255,.15);
}

/* ── 플레이어 아바타 ── */
body[data-page="play"] .lobby-player-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(76,125,255,.4),rgba(140,120,255,.35));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  position:relative;
}
body[data-page="play"] .lobby-player-card.is-me .lobby-player-avatar{
  background:linear-gradient(135deg,#4c7dff,#7b5cff);
  box-shadow:0 4px 16px rgba(76,125,255,.4);
}

/* ── 아바타 이미지 / 이니셜 ── */
body[data-page="play"] .lobby-player-avatar-img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
body[data-page="play"] .lobby-player-avatar-initial{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

/* ── 플레이어 정보 ── */
body[data-page="play"] .lobby-player-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
body[data-page="play"] .lobby-player-name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="play"] .lobby-player-card.is-me .lobby-player-name{
  color:var(--primary);
}

/* ── HOST 배지 ── */
body[data-page="play"] .lobby-host-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 8px;
  border-radius:6px;
  background:linear-gradient(135deg,#ffd700,#ffb300);
  font-size:10px;
  font-weight:800;
  color:#1a1a1a;
  text-transform:uppercase;
  letter-spacing:.3px;
  box-shadow:0 2px 8px rgba(255,193,7,.3);
}

/* ── 빈 슬롯 (초대 대기) ── */
body[data-page="play"] .lobby-player-card.is-empty{
  background:rgba(255,255,255,.02);
  border:2px dashed rgba(255,255,255,.1);
  opacity:.7;
}
body[data-page="play"] .lobby-player-card.is-empty:hover{
  border-color:rgba(76,125,255,.3);
  background:rgba(76,125,255,.05);
  opacity:1;
}
body[data-page="play"] .lobby-empty-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--muted);
}
body[data-page="play"] .lobby-empty-text{
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* ── 게임 시작 영역 ── */
body[data-page="play"] .lobby-start-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding-top:8px;
}

/* ── 게임 시작 버튼 ── */
body[data-page="play"] .lobby-start-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:240px;
  padding:18px 40px;
  font-size:18px;
  font-weight:800;
  border-radius:14px;
  background:linear-gradient(135deg,#4c7dff 0%,#6366f1 100%);
  border:none;
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(76,125,255,.35),0 0 0 0 rgba(76,125,255,.5);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
body[data-page="play"] .lobby-start-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);
  opacity:0;
  transition:opacity .25s;
}
body[data-page="play"] .lobby-start-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(76,125,255,.45),0 0 0 4px rgba(76,125,255,.2);
}
body[data-page="play"] .lobby-start-btn:hover::before{
  opacity:1;
}
body[data-page="play"] .lobby-start-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 12px rgba(76,125,255,.3);
}
body[data-page="play"] .lobby-start-btn-text{
  position:relative;
  z-index:1;
}
body[data-page="play"] .lobby-start-btn-icon{
  position:relative;
  z-index:1;
  font-size:16px;
  transition:transform .2s;
}
body[data-page="play"] .lobby-start-btn:hover .lobby-start-btn-icon{
  transform:translateX(3px);
}

/* ── 시작 힌트 문구 ── */
body[data-page="play"] .lobby-start-hint{
  font-size:13px;
  color:var(--muted);
  margin:0;
  text-align:center;
  padding:8px 16px;
  background:rgba(76,125,255,.08);
  border-radius:8px;
  border:1px solid rgba(76,125,255,.15);
}

/* ── 반응형: 태블릿 ── */
@media(max-width:800px){
  body[data-page="play"] .lobby-room-panel{
    padding:24px 20px 28px;
    margin:0 8px;
    border-radius:16px;
  }
  body[data-page="play"] .lobby-players-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  body[data-page="play"] .lobby-player-card{
    padding:16px 12px;
    min-height:115px;
  }
  body[data-page="play"] .lobby-player-avatar{
    width:46px;
    height:46px;
    font-size:18px;
  }
}

/* ── 반응형: 모바일 ── */
@media(max-width:500px){
  body[data-page="play"] .lobby-room-panel{
    padding:20px 16px 24px;
    margin:0 4px;
    border-radius:14px;
  }
  body[data-page="play"] .lobby-room-title{
    font-size:22px;
  }
  body[data-page="play"] .lobby-room-subtitle{
    font-size:13px;
  }
  body[data-page="play"] .lobby-settings-card{
    padding:14px 16px;
  }
  body[data-page="play"] .lobby-settings-badges{
    gap:8px;
  }
  body[data-page="play"] .lobby-badge{
    padding:6px 10px;
    font-size:12px;
  }
  body[data-page="play"] .lobby-players-header{
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
  }
  body[data-page="play"] .lobby-players-grid{
    grid-template-columns:repeat(2,1fr);
  }
  body[data-page="play"] .lobby-player-card{
    padding:14px 10px;
    min-height:105px;
  }
  body[data-page="play"] .lobby-player-avatar,
  body[data-page="play"] .lobby-empty-avatar{
    width:42px;
    height:42px;
    font-size:16px;
  }
  body[data-page="play"] .lobby-player-name{
    font-size:13px;
  }
  body[data-page="play"] .lobby-start-btn{
    width:100%;
    min-width:auto;
    padding:16px 32px;
    font-size:16px;
  }
  body[data-page="play"] .lobby-start-hint{
    font-size:12px;
    padding:8px 12px;
  }
}

/* ==========================================================
   [PLAY] 토스트 알림 시스템
   ========================================================== */
.play-toast-container{
  position:fixed;
  top:16px;
  right:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.play-toast{
  padding:12px 18px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:rgba(30,30,45,.95);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  transform:translateX(120%);
  opacity:0;
  transition:all .25s ease;
  pointer-events:auto;
  max-width:320px;
}
.play-toast-show{
  transform:translateX(0);
  opacity:1;
}
.play-toast-out{
  transform:translateX(120%);
  opacity:0;
}
.play-toast-success{
  background:linear-gradient(135deg,rgba(34,197,94,.9),rgba(22,163,74,.95));
  border-color:rgba(34,197,94,.4);
}
.play-toast-error{
  background:linear-gradient(135deg,rgba(239,68,68,.9),rgba(220,38,38,.95));
  border-color:rgba(239,68,68,.4);
}
.play-toast-info{
  background:linear-gradient(135deg,rgba(59,130,246,.9),rgba(37,99,235,.95));
  border-color:rgba(59,130,246,.4);
}

@media(max-width:500px){
  .play-toast-container{
    top:auto;
    bottom:80px;
    right:8px;
    left:8px;
  }
  .play-toast{
    max-width:100%;
    transform:translateY(100%);
  }
  .play-toast-show{
    transform:translateY(0);
  }
  .play-toast-out{
    transform:translateY(100%);
  }
}

/* ==========================================================
   [PLAY] 초대 모달
   ========================================================== */
.invite-modal-box{
  max-width:420px;
  width:92vw;
  padding:24px;
}
.invite-section{
  margin-bottom:20px;
}
.invite-label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}
.invite-code-display{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  background:rgba(76,125,255,.08);
  border:2px dashed rgba(76,125,255,.3);
  border-radius:12px;
}
.invite-code-text{
  flex:1;
  font-size:28px;
  font-weight:800;
  font-family:'Courier New',monospace;
  letter-spacing:4px;
  color:var(--primary);
  text-align:center;
}
.invite-link-display{
  display:flex;
  align-items:center;
  gap:8px;
}
.invite-link-input{
  flex:1;
  font-size:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:var(--text);
}
.invite-share-section{
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.invite-share-icon{
  margin-right:6px;
}
.invite-hint{
  margin-top:16px;
  padding:12px 16px;
  background:rgba(255,193,7,.08);
  border:1px solid rgba(255,193,7,.2);
  border-radius:10px;
  text-align:center;
}
.invite-hint p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

/* ==========================================================
   [PLAY] 플레이어 입장 애니메이션
   ========================================================== */
@keyframes playerEnter{
  from{
    opacity:0;
    transform:translateY(-10px) scale(.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
body[data-page="play"] .lobby-player-card.player-enter{
  animation:playerEnter .25s ease-out;
}

/* ==========================================================
   [INDEX] 최근 플레이 섹션 (Recent Plays Section)
   ========================================================== */
.recent-plays-section{
  margin-bottom:24px;
  padding:18px 20px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(30,36,50,.92),rgba(20,24,35,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 16px rgba(0,0,0,.2);
}
.recent-plays-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.recent-plays-header h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
}
.recent-plays-more{
  font-size:13px;
  font-weight:600;
  color:var(--primary,#7c6aff);
  text-decoration:none;
  transition:color .15s;
}
.recent-plays-more:hover{
  color:#a78bfa;
  text-decoration:underline;
}
.recent-plays-list{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.recent-plays-list::-webkit-scrollbar{height:5px}
.recent-plays-list::-webkit-scrollbar-track{background:transparent}
.recent-plays-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* 최근 플레이 카드 */
.recent-play-card{
  flex:0 0 auto;
  width:160px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:all .2s;
  scroll-snap-align:start;
}
.recent-play-card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-2px);
}
.recent-play-thumb{
  width:100%;
  aspect-ratio:16/10;
  border-radius:8px;
  background:#1a1a24;
  overflow:hidden;
  margin-bottom:8px;
}
.recent-play-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.recent-play-title{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.recent-play-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
}
.recent-play-type{
  padding:2px 6px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.recent-play-type.worldcup{
  background:rgba(124,106,255,.2);
  color:#a78bfa;
}
.recent-play-type.quiz{
  background:rgba(255,106,176,.2);
  color:#ff8dc7;
}
.recent-play-type.tier{
  background:rgba(76,187,124,.2);
  color:#4cbb7c;
}
.recent-play-time{
  opacity:.7;
}

/* ==========================================================
   [INDEX] 내 기록 모달 (My Records Modal)
   ========================================================== */
.my-records-modal-box{
  width:94vw;
  max-width:520px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* 탭 */
.my-records-tabs{
  display:flex;
  gap:6px;
  margin-bottom:18px;
  padding:4px;
  background:rgba(255,255,255,.04);
  border-radius:10px;
}
.my-records-tab{
  flex:1;
  padding:10px 14px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
}
.my-records-tab:hover{
  color:var(--text);
  background:rgba(255,255,255,.04);
}
.my-records-tab.active{
  background:rgba(124,106,255,.2);
  color:#a78bfa;
}

/* 최고 기록 카드 영역 */
.my-records-best{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}
.my-records-best-card{
  flex:1;
  padding:16px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(40,36,60,.9),rgba(25,22,40,.95));
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  transition:all .2s;
}
.my-records-best-card:hover{
  border-color:rgba(124,106,255,.3);
  box-shadow:0 0 20px rgba(124,106,255,.1);
}
.best-card-icon{
  font-size:28px;
  margin-bottom:6px;
}
.best-card-title{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}
.best-card-value{
  font-size:28px;
  font-weight:800;
  color:var(--text);
  background:linear-gradient(135deg,#7c6aff,#ff6ab0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
  margin-bottom:4px;
}
.best-card-label{
  font-size:11px;
  color:var(--muted);
}

/* 히스토리 목록 */
.my-records-history{
  flex:1;
  overflow-y:auto;
  max-height:320px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:4px;
}
.my-records-history::-webkit-scrollbar{width:5px}
.my-records-history::-webkit-scrollbar-track{background:transparent}
.my-records-history::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* 히스토리 아이템 */
.history-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:all .15s;
}
.history-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
}
.history-thumb{
  width:48px;
  height:48px;
  border-radius:8px;
  background:#1a1a24;
  overflow:hidden;
  flex-shrink:0;
}
.history-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.history-info{
  flex:1;
  min-width:0;
}
.history-title{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.history-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.history-type{
  padding:2px 6px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.history-type.worldcup{
  background:rgba(124,106,255,.2);
  color:#a78bfa;
}
.history-type.quiz{
  background:rgba(255,106,176,.2);
  color:#ff8dc7;
}
.history-result{
  margin-left:auto;
  flex-shrink:0;
  text-align:right;
}
.history-result-value{
  font-size:16px;
  font-weight:700;
  color:var(--text);
}
.history-result-label{
  font-size:10px;
  color:var(--muted);
}

/* 로그인 유도 */
.my-records-login-prompt{
  text-align:center;
  padding:20px 16px;
  background:rgba(76,125,255,.06);
  border:1px solid rgba(76,125,255,.15);
  border-radius:12px;
  margin-top:16px;
}
.my-records-login-prompt p{
  margin:0 0 12px;
  font-size:14px;
  color:var(--muted);
}

/* 히스토리 빈 상태 */
.history-empty{
  text-align:center;
  padding:32px 16px;
  color:var(--muted);
  font-size:14px;
}
.history-empty-icon{
  font-size:40px;
  margin-bottom:12px;
  opacity:.5;
}

/* 반응형 */
@media(max-width:520px){
  .recent-plays-section{
    margin:0 -8px 20px;
    padding:14px 12px;
    border-radius:0;
  }
  .recent-play-card{
    width:140px;
  }
  .my-records-modal-box{
    max-height:80vh;
  }
  .my-records-best{
    flex-direction:column;
  }
  .my-records-history{
    max-height:260px;
  }
}

/* ==========================================================
   관리자 버튼 스타일 (Admin Button)
   ========================================================== */
.admin-nav-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(255,76,106,.15),rgba(255,76,106,.08));
  border:1px solid rgba(255,76,106,.3);
  color:#ff6b7a;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  transition:all .2s;
}
.admin-nav-btn:hover{
  background:linear-gradient(135deg,rgba(255,76,106,.25),rgba(255,76,106,.15));
  border-color:rgba(255,76,106,.5);
  color:#ff8a95;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,76,106,.15);
}

/* ==========================================================
   티어메이커 (Tier Maker)
   ========================================================== */

/* -- 컨테이너 -- */
.tier-container{
  max-width:960px;
  margin:0 auto;
  padding:16px;
}

/* -- 상단 바 -- */
.tier-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.tier-topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.tier-topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.tier-page-title{
  margin:0;
  font-size:18px;
  font-weight:700;
}
.tier-back-btn{
  font-size:14px;
  padding:6px 10px;
}

/* -- 저장 상태 -- */
.tier-save-status{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
}
.tier-save-unsaved{
  color:#fbbf24;
  background:rgba(251,191,36,.12);
}
.tier-save-saved{
  color:#4ade80;
  background:rgba(74,222,128,.12);
}
.tier-save-guest{
  color:#94a3b8;
  background:rgba(148,163,184,.12);
  font-style:italic;
}
/* -- 저장 상태 내부 요소 -- */
.tier-status-dot{color:#fbbf24;font-size:10px;margin-right:2px;}
.tier-status-local{color:#94a3b8;font-size:11px;}
.tier-status-unsaved{color:#fbbf24;font-size:11px;}
.tier-status-cloud{color:#4ade80;font-size:11px;}
/* -- autosave 복원 배너 -- */
.tier-autosave-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:12px;
  border-radius:12px;
  background:rgba(251,191,36,.1);
  border:1px solid rgba(251,191,36,.3);
}
.tier-autosave-msg{
  flex:1;min-width:180px;
  font-size:13px;color:#fbbf24;
}
.tier-autosave-btn{padding:6px 14px;font-size:12px;}

/* -- 카드 크기 토글 -- */
.tier-size-toggle{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:3px 4px;
}
.tier-size-btn{
  padding:3px 7px;font-size:11px;border:none;border-radius:5px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background .12s, color .12s;
  font-weight:600;line-height:1.3;
  white-space:nowrap;
}
.tier-size-btn:hover{background:rgba(255,255,255,.06);}
.tier-size-btn.active{
  background:var(--primary);color:#fff;
}

/* -- 티어 라벨 2줄 말줄임 보정 -- */
.tier-label[title]{cursor:default;}

/* -- 로딩 -- */
.tier-loading{
  text-align:center;
  padding:60px 20px;
}
.tier-loading-spinner{
  width:40px;
  height:40px;
  border:3px solid var(--line);
  border-top-color:var(--primary);
  border-radius:50%;
  margin:0 auto 16px;
  animation:tier-spin 0.8s linear infinite;
}
@keyframes tier-spin{
  to{ transform:rotate(360deg); }
}

/* -- 에러 -- */
.tier-error{
  text-align:center;
  padding:60px 20px;
}
.tier-error-icon{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(255,76,106,.15);
  color:var(--danger);
  font-size:24px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* -- 티어 보드 -- */
.tier-board{
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

/* -- 티어 행 -- */
.tier-row{
  display:flex;
  min-height:80px;
  background:#0f1624;
}

/* -- 티어 라벨 -- */
.tier-label{
  width:130px;
  min-width:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  color:#111;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
  user-select:none;
  padding:6px 8px;
  text-align:center;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow:hidden;
  line-height:1.25;
}
.tier-label-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:keep-all;
  text-align:center;
}

/* -- 티어 카드 영역 -- */
.tier-cards{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--tier-pool-gap, 5px);
  padding:6px;
  min-height:80px;
  border-left:1px solid var(--line);
  transition:background .15s;
}
.tier-cards-dragover{
  background:rgba(76,125,255,.12) !important;
  outline:2px dashed var(--primary);
  outline-offset:-2px;
}

/* -- 카드 -- */
.tier-card{
  width:var(--tier-card-w, 84px);
  height:auto;
  min-height:var(--tier-card-w, 84px);
  border-radius:6px;
  overflow:hidden;
  cursor:grab;
  position:relative;
  background:#1a2233;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .1s, box-shadow .1s, width .15s;
  user-select:none;
  contain:layout style paint;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tier-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  z-index:2;
}
.tier-card:active{
  cursor:grabbing;
}
.tier-card img{
  width:100%;
  height:auto;
  display:block;
}
.tier-card-label{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:var(--tier-label-pad, 3px 5px);
  font-size:var(--tier-label-fs, 11px);
  font-weight:600;
  color:#fff;
  text-align:center;
  background:linear-gradient(transparent, rgba(0,0,0,.75));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tier-card-label-bottom{
  /* 이미지가 있을 때만 하단 오버레이 */
}
body.dragging{
  -webkit-user-select:none;
  user-select:none;
  cursor:grabbing;
}
.tier-card-dragging{
  opacity:0.4;
  transform:scale(0.95);
}
.tier-card-clone{
  width:var(--tier-card-w, 84px);
  height:auto;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* -- 카드 풀 -- */
.tier-pool-section{
  margin-top:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}
.tier-pool-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.tier-pool-header h3{
  margin:0;
  font-size:15px;
}
.tier-pool{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--tier-pool-gap, 8px);
  min-height:60px;
  padding:10px;
  border-radius:8px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.02);
  transition:background .15s;
}
.tier-pool-dragover{
  background:rgba(76,125,255,.08) !important;
  border-color:var(--primary) !important;
}

/* -- 카드 추가 -- */
.tier-add-section{
  text-align:center;
  margin-top:12px;
}
.tier-add-btn{
  font-size:14px;
  color:var(--muted);
  border:1px dashed var(--line);
  padding:10px 20px;
  border-radius:12px;
}
.tier-add-btn:hover{
  color:var(--text);
  border-color:var(--primary);
}
.tier-add-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* -- create 페이지: 티어메이커 진입 카드 -- */
.tier-create-entry{
  margin-bottom:20px;
}
.tier-create-entry-inner{
  display:flex;
  align-items:center;
  gap:14px;
}
.tier-create-entry-icon{
  font-size:28px;
  flex-shrink:0;
}
.tier-create-entry-body{
  flex:1;
  min-width:0;
}
.tier-create-entry-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
}
.tier-create-entry .btn{
  flex-shrink:0;
  white-space:nowrap;
  text-decoration:none;
  font-size:13px;
}
@media(max-width:600px){
  .tier-create-entry-inner{
    flex-direction:column;
    text-align:center;
    gap:10px;
  }
  .tier-create-entry .btn{
    width:100%;
    text-align:center;
  }
}

/* -- 내기록 티어 항목 -- */
.history-type.tier{
  background:rgba(76,187,124,.2);
  color:#4cbb7c;
}

/* -- 내기록 이어하기 버튼 -- */
.history-continue-btn{
  padding:4px 10px;
  border-radius:6px;
  border:1px solid var(--primary);
  background:rgba(76,125,255,.12);
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  margin-left:8px;
  transition:background .15s;
}
.history-continue-btn:hover{
  background:rgba(76,125,255,.25);
}

/* -- 내기록 결과 보기 버튼 -- */
.history-view-btn{
  padding:4px 10px;
  border-radius:6px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  margin-left:4px;
  transition:background .15s;
}
.history-view-btn:hover{
  background:rgba(255,255,255,.08);
  color:var(--text);
}

/* -- 내기록 액션 그룹 -- */
.history-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  flex-shrink:0;
}

/* -- 토스트 warn 타입 (추가) -- */
.play-toast-warn{
  background:linear-gradient(135deg,rgba(251,191,36,.9),rgba(234,179,8,.95));
  border-color:rgba(251,191,36,.4);
  color:#111;
}

/* -- 반응형 -- */
@media(max-width:600px){
  .tier-label{
    width:72px;
    min-width:72px;
    font-size:14px;
    padding:4px 5px;
  }
  .tier-card{
    width:var(--tier-card-w, 64px);
    height:auto;
  }
  .tier-card-clone{
    width:var(--tier-card-w, 64px);
    height:auto;
  }
  .tier-card-label{
    font-size:9px;
    padding:2px 3px;
  }
  .tier-topbar{
    flex-direction:column;
    align-items:stretch;
  }
  .tier-topbar-left,
  .tier-topbar-right{
    justify-content:space-between;
  }
  .tier-page-title{
    font-size:15px;
  }
  .history-actions{
    flex-direction:column;
    gap:2px;
  }
}

/* ===== 티어메이커 제작 페이지 ===== */
.tier-structure-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.tier-structure-num{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--surface);
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  flex-shrink:0;
}
.tier-structure-row .input{
  flex:1;
}
.tier-card-row{
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.tier-card-row-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.tier-card-num{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--surface);
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  flex-shrink:0;
}
.tier-card-row-media{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-left:38px;
}
.tier-card-dropzone{
  min-width:100px;
  min-height:60px;
  padding:8px;
  flex-shrink:0;
}
.tier-card-dropzone .dropzone-preview{
  max-width:80px;
  max-height:60px;
  border-radius:6px;
  object-fit:cover;
}
@media(max-width:600px){
  .tier-card-row-media{
    flex-direction:column;
    margin-left:0;
  }
  .tier-card-dropzone{
    width:100%;
  }
}

/* -- 내기록 삭제 버튼 -- */
.history-delete-btn{
  padding:4px 10px;
  border-radius:6px;
  border:1px solid rgba(231,76,60,.4);
  background:rgba(231,76,60,.1);
  color:#e74c3c;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  margin-left:4px;
  transition:background .15s;
}
.history-delete-btn:hover{
  background:rgba(231,76,60,.25);
}

/* -- 티어 삭제 확인 오버레이 (z-index 최상위) -- */
.tier-confirm-overlay{
  z-index:1200;
}

/* -- 발행 완료 버튼 상태 -- */
.btn-published{
  background:rgba(76,187,124,.15) !important;
  border-color:#4cbb7c !important;
  color:#4cbb7c !important;
  cursor:default;
}

/* ===== 티어 결과(싸움터) 페이지 ===== */

/* 결과 페이지 헤더 */
.tier-result-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.tier-result-badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(124,106,255,.15);
  color:#a78bfa;
  font-weight:700;
}
.tier-result-meta{
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px;
  display:flex;
  gap:12px;
}

/* 읽기 전용 보드 */
.tier-board-readonly .tier-card{
  cursor:default;
}
.tier-board-readonly .tier-card:hover{
  transform:none;
  box-shadow:none;
}

/* 투표 */
.tier-vote-section{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:20px 0;
}
.tier-vote-btn{
  padding:10px 24px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  background:var(--card);
  border:1px solid var(--line);
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text);
}
.tier-vote-btn:hover{
  border-color:var(--primary);
}
.tier-vote-btn.active-up{
  background:rgba(74,222,128,.15);
  border-color:#4ade80;
  color:#4ade80;
}
.tier-vote-btn.active-down{
  background:rgba(255,76,106,.15);
  border-color:#ff4c6a;
  color:#ff4c6a;
}

/* 공유 */
.tier-share-section{
  margin:12px 0 20px;
}

/* 싸움터 보기 버튼 (발행 모달) */
.publish-result-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:10px 24px;
  border-radius:10px;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:opacity .15s;
}
.publish-result-link:hover{
  opacity:.85;
}

/* ===== 티어 라벨 편집 ===== */

/* 라벨 편집 모드 */
.tier-label-input{
  width:100%;
  border:none;
  background:transparent;
  text-align:center;
  font-size:18px;
  font-weight:900;
  color:#111;
  outline:2px solid var(--primary);
  border-radius:4px;
  padding:2px;
}

/* 티어 삭제 버튼 */
.tier-delete-btn{
  position:absolute;
  top:2px;
  right:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:12px;
  cursor:pointer;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .15s;
  z-index:3;
}
.tier-row:hover .tier-delete-btn{
  opacity:1;
}
.tier-row{
  position:relative;
}

/* 티어 추가 버튼 (보드 아래) */
.tier-add-row-btn{
  width:100%;
  padding:10px;
  text-align:center;
  background:var(--card);
  border:1px dashed var(--line);
  border-radius:0 0 12px 12px;
  cursor:pointer;
  color:var(--muted);
  font-size:14px;
  transition:all .15s;
  margin-top:-1px;
}
.tier-add-row-btn:hover{
  color:var(--text);
  border-color:var(--primary);
}

/* 서브 텍스트 */
.tier-result-subtext{
  font-size:14px;
  color:var(--muted);
  margin:-6px 0 14px;
}

/* Empty 상태 */
.tier-result-empty{
  text-align:center;
  padding:60px 20px;
}
.tier-result-empty-icon{
  font-size:48px;
  margin-bottom:12px;
}
.tier-result-empty p{
  margin:4px 0;
}

/* ===== 더보기 버튼 ===== */
.arena-more-section{
  text-align:center;
  margin:24px 0 8px;
}
.arena-more-btn{
  width:100%;
  max-width:480px;
  padding:14px 20px;
  font-size:15px;
  font-weight:700;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  transition:all .15s;
}
.arena-more-btn:hover{
  border-color:var(--primary);
  background:rgba(76,125,255,.06);
}

/* ===== 싸움터 모달 (슬라이드 업) ===== */
.arena-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:arenaFadeIn .2s;
}
@keyframes arenaFadeIn{from{opacity:0}to{opacity:1}}

.arena-modal-sheet{
  width:100%;
  max-width:640px;
  max-height:85vh;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  display:flex;
  flex-direction:column;
  animation:arenaSlideUp .25s ease-out;
  overflow:hidden;
}
@keyframes arenaSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.arena-modal-head{
  padding:20px 20px 12px;
  position:relative;
}
.arena-modal-title{
  margin:0 0 4px;
  font-size:18px;
  font-weight:800;
}
.arena-modal-desc{
  margin:0;
  font-size:13px;
}
.arena-modal-head .modal-close{
  position:absolute;
  top:16px;
  right:16px;
}

/* 정렬 탭 */
.arena-sort-tabs{
  display:flex;
  gap:6px;
  padding:0 20px 12px;
}
.arena-sort-tab{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
}
.arena-sort-tab:hover{
  border-color:var(--primary);
  color:var(--text);
}
.arena-sort-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* 카드 리스트 */
.arena-list{
  flex:1;
  overflow-y:auto;
  padding:0 20px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.arena-list::-webkit-scrollbar{width:5px}
.arena-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.arena-list-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}

/* 판결 행 래퍼 (PC/모바일 통합) */
.arena-verdict-wrapper{
  display:flex;
  flex-direction:column;
}

/* 판결 행 active 피드백 */
.arena-verdict-row:active{
  transform:scale(0.98);
}

/* 보드보기 토글 버튼 (PC 전용) */
.arena-board-toggle{
  flex:0 0 auto;
  align-self:center;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s;
}
.arena-board-toggle:hover{
  border-color:var(--primary);
  color:var(--text);
}
.arena-board-toggle.active{
  background:rgba(76,125,255,.08);
  border-color:var(--primary);
  color:var(--primary);
}

/* 접이식 미니보드 영역 */
.arena-board-collapse{
  overflow:hidden;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.15);
  border-radius:0 0 14px 14px;
  margin-top:-1px;
}
.arena-board-collapse .arena-mini-board{
  pointer-events:none;
  border:none;
  border-radius:0;
  transform:none;
  width:100%;
  margin-bottom:0;
}
.arena-board-collapse .arena-mini-board .tier-row{
  min-height:52px;
}
.arena-board-collapse .arena-mini-board .tier-label{
  width:48px;
  min-width:48px;
  font-size:12px;
  font-weight:800;
}
.arena-board-collapse .arena-mini-board .tier-cards{
  min-height:52px;
  gap:4px;
  padding:4px 6px;
  align-items:center;
}
.arena-board-collapse .arena-mini-board .tier-card{
  width:48px;
  height:48px;
  border-radius:8px;
  overflow:hidden;
}
.arena-board-collapse .arena-mini-board .tier-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.arena-board-collapse .arena-mini-board .tier-card-label{
  font-size:7px;
  padding:2px 3px;
}

/* 스와이프 힌트 (양 플랫폼) */
.arena-swipe-hint{
  display:block;
  margin:6px 0 0;
  font-size:11px;
}

/* ===== 모바일 판결 행 (미니보드 대체) ===== */
.arena-verdict-row{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  transition:border-color .15s, transform .1s;
}
.arena-verdict-row:hover{
  border-color:var(--primary);
}

.arena-verdict-row-body{
  display:flex;
  gap:10px;
  align-items:stretch;
}

/* 티어 라벨 세로 스택 */
.arena-tier-stack{
  width:36px;
  min-width:36px;
  display:flex;
  flex-direction:column;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
}
.arena-tier-stack-label{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:900;
  color:#111;
  min-height:18px;
  line-height:1;
}

/* 썸네일 가로 스트립 */
.arena-thumb-strip{
  flex:1;
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  align-items:center;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.arena-thumb-strip::-webkit-scrollbar{ display:none; }

.arena-thumb{
  width:46px;
  height:46px;
  border-radius:10px;
  flex:0 0 auto;
  object-fit:cover;
  background:var(--line);
}
.arena-thumb-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  background:rgba(255,255,255,.06);
}

/* 빈 판결 뱃지 */
.arena-empty-badge{
  font-size:12px;
  color:var(--muted);
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}

/* 하단 pills + 자세히 */
.arena-verdict-row-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  gap:8px;
}

.arena-pills{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.arena-pill{
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  white-space:nowrap;
}
.arena-pill-fire{
  background:rgba(255,160,50,.12);
  color:#ffaa44;
}

.arena-verdict-detail{
  font-size:12px;
  font-weight:700;
  color:var(--primary);
  white-space:nowrap;
  flex-shrink:0;
}

/* 반응형 */
@media(max-width:600px){
  .tier-result-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .tier-vote-btn{
    padding:8px 16px;
    font-size:14px;
  }
  .tier-label-input{
    font-size:14px;
  }
  .tier-delete-btn{
    opacity:1;
  }
  .arena-modal-sheet{
    max-height:90vh;
    border-radius:16px 16px 0 0;
  }
  /* 모바일: 보드보기 토글 숨김 */
  .arena-board-toggle{
    display:none;
  }
  .arena-board-collapse{
    display:none;
  }
}

/* ===== 퀴즈 리포트 모달 ===== */
.quiz-report-modal-box{
  max-width:520px;
  width:92vw;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  overflow-y:auto;
  padding:24px 20px 20px;
}
.quiz-report-body{
  margin-top:8px;
}

/* 섹션 */
.qr-section{
  margin-bottom:18px;
}
.qr-section-title{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:10px;
}

/* 내 결과 카드 */
.qr-my-result{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  background:rgba(76,125,255,.08);
  border:1px solid rgba(76,125,255,.2);
  border-radius:14px;
}
.qr-grade{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:900;
  flex-shrink:0;
}
.qr-badge-s{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#1a1200}
.qr-badge-a{background:linear-gradient(135deg,#4cff7e,#00c853);color:#0a2e0a}
.qr-badge-b{background:linear-gradient(135deg,#4c7dff,#2962ff);color:#fff}
.qr-badge-c{background:linear-gradient(135deg,#9e9e9e,#616161);color:#fff}
.qr-my-stats{flex:1;min-width:0}
.qr-my-big{font-size:26px;font-weight:800;line-height:1.2}
.qr-my-slash{font-size:16px;font-weight:400;color:var(--muted)}
.qr-my-pct{font-size:14px;color:var(--muted);margin-top:2px}
.qr-my-time{font-size:13px;color:var(--muted)}

/* 전체 통계 그리드 */
.qr-global-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.qr-global-card{
  padding:12px 10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:center;
}
.qr-global-value{
  font-size:20px;
  font-weight:800;
  color:var(--text);
}
.qr-global-label{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

/* 평균 대비 비교 */
.qr-compare{
  text-align:center;
  font-size:14px;
  color:var(--muted);
  margin:-8px 0 16px;
  padding:8px;
  background:rgba(255,255,255,.03);
  border-radius:8px;
}

/* 빈 상태 */
.qr-empty{
  text-align:center;
  padding:20px;
  color:var(--muted);
  font-size:14px;
}

/* 문제별 난이도 리스트 */
.qr-q-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.qr-q-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
  border-radius:10px;
}
.qr-q-rank{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.qr-q-body{
  flex:1;
  min-width:0;
}
.qr-q-prompt{
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.qr-q-bar-wrap{
  height:4px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
}
.qr-q-bar{
  height:100%;
  border-radius:2px;
  transition:width .4s ease;
}
.qr-q-pct{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  flex-shrink:0;
  width:40px;
  text-align:right;
}

/* 퀴즈 리포트 모바일 */
@media(max-width:640px){
  .quiz-report-modal-box{
    width:96vw;
    max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
    padding:18px 14px 14px;
  }
  .qr-grade{width:48px;height:48px;font-size:24px;border-radius:12px}
  .qr-my-big{font-size:22px}
  .qr-global-grid{gap:6px}
  .qr-global-value{font-size:17px}
}

/* ===== 퀴즈 문제 난이도 뱃지 ===== */
.qz-diff-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  font-size:12px;font-weight:600;margin-bottom:8px;
}
.qz-diff-pct{color:var(--muted);font-size:11px}
.qz-diff-new{color:var(--muted);font-style:italic;font-size:11px}

/* ===================================================
   공유 모달 (share.js)
   =================================================== */
.share-modal-overlay{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .24s ease;
  pointer-events:none;
}
.share-modal-overlay.hidden{display:none}
.share-modal-overlay.share-modal-visible{
  opacity:1;pointer-events:auto;
}
.share-modal-sheet{
  background:var(--bg-card,#1e1e2e);
  border-radius:18px 18px 0 0;
  width:100%;max-width:420px;
  padding:20px 16px 28px;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.share-modal-visible .share-modal-sheet{
  transform:translateY(0);
}
.share-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.share-modal-title{
  font-size:17px;font-weight:700;color:var(--text-primary,#fff);
}
.share-modal-close{
  background:none;border:none;color:var(--text-muted,#888);
  font-size:24px;cursor:pointer;padding:4px 8px;line-height:1;
}
.share-modal-close:hover{color:var(--text-primary,#fff)}
.share-modal-options{
  display:flex;gap:20px;justify-content:center;
}
.share-option-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;padding:8px 12px;
  color:var(--text-primary,#fff);
  transition:transform .15s ease;
}
.share-option-btn:active{transform:scale(.92)}
.share-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.share-icon-kakao{background:#FEE500}
.share-icon-story{background:linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}
.share-icon-phone{background:linear-gradient(135deg,#34c759,#30d158)}
.share-icon-link{background:rgba(var(--primary-rgb,99,102,241),.18);border:1px solid rgba(var(--primary-rgb,99,102,241),.35)}
.share-option-label{
  font-size:12px;color:var(--text-muted,#aaa);white-space:nowrap;
}

/* ── 카카오 버튼 로딩/비활성 상태 ── */
.share-option-btn:disabled{
  cursor:not-allowed;
  opacity:.5;
}
.share-option-btn:disabled:active{
  transform:none;
}
.share-kakao-spinner{
  display:inline-block;
  width:20px;height:20px;
  border:2.5px solid rgba(60,30,30,.25);
  border-top-color:#3C1E1E;
  border-radius:50%;
  animation:share-spin .6s linear infinite;
}
@keyframes share-spin{ to{transform:rotate(360deg)} }

/* PC: 중앙 모달 */
@media(min-width:521px){
  .share-modal-overlay{align-items:center}
  .share-modal-sheet{
    border-radius:18px;
    max-width:360px;
    transform:scale(.9);opacity:0;
    transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .24s ease;
  }
  .share-modal-visible .share-modal-sheet{
    transform:scale(1);opacity:1;
  }
}

/* ===== 📊 콘텐츠 성과 모달 (stats.js) ===== */
.stats-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2500;
  padding:20px;
}
.stats-modal-overlay.hidden{
  display:none;
}
.stats-modal{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  max-width:480px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,.4);
}
.stats-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line);
}
.stats-modal-header h3{
  margin:0;
  font-size:17px;
}
.stats-modal-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:24px;
  cursor:pointer;
  padding:2px 6px;
  line-height:1;
  border-radius:6px;
  transition:color .2s,background .2s;
}
.stats-modal-close:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.stats-modal-body{
  padding:20px;
}
.stats-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 20px 16px;
  border-top:1px solid var(--line);
}

/* 로딩 */
.stats-loading{
  text-align:center;
  padding:32px 0;
}
.stats-loading-spinner{
  width:28px;height:28px;
  border:3px solid var(--line);
  border-top-color:var(--primary);
  border-radius:50%;
  margin:0 auto 10px;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 헤더 정보 */
.stats-info-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.stats-info-title{
  font-weight:600;
  font-size:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}

/* KPI 그리드 */
.stats-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:16px;
}
.stats-kpi-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 12px;
  text-align:center;
}
.stats-kpi-icon{
  font-size:18px;
  margin-bottom:4px;
}
.stats-kpi-value{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}
.stats-kpi-label{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

/* 추가 정보 행 */
.stats-extra-section{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.stats-extra-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  font-size:13px;
}

/* 모바일 */
@media(max-width:640px){
  .stats-modal{
    max-width:96vw;
    border-radius:14px;
  }
  .stats-modal-header{
    padding:14px 16px 10px;
  }
  .stats-modal-body{
    padding:14px 16px;
  }
  .stats-modal-footer{
    padding:10px 16px 14px;
  }
  .stats-kpi-grid{
    gap:8px;
  }
  .stats-kpi-card{
    padding:10px 8px;
  }
  .stats-kpi-value{
    font-size:17px;
  }
}

/* ===== 🚨 신고 모듈 (report.js) ===== */
.report-radio-label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  color:var(--text);
  transition:background .15s;
}
.report-radio-label:hover{
  background:rgba(255,255,255,.04);
}
.report-radio-label input[type="radio"]{
  accent-color:var(--primary);
  width:16px;
  height:16px;
  flex-shrink:0;
}
.report-modal-close{
  position:absolute;
  top:12px;
  right:14px;
  background:none;
  border:none;
  color:var(--muted);
  font-size:22px;
  cursor:pointer;
  line-height:1;
  padding:4px;
}
.report-modal-close:hover{color:var(--text)}

/* 결과 CTA — danger 변형 */
.result-cta-btn--danger{
  color:var(--danger, #ff4c6a) !important;
  border-color:rgba(255,76,106,.3) !important;
}
.result-cta-btn--danger:hover{
  background:rgba(255,76,106,.1) !important;
  border-color:var(--danger, #ff4c6a) !important;
}

/* 판결 카드 내 신고 버튼 */
.arena-report-btn{
  background:none;
  border:none;
  cursor:pointer;
  font-size:14px;
  padding:4px 8px;
  border-radius:6px;
  opacity:.5;
  transition:all .15s;
  flex-shrink:0;
}
.arena-report-btn:hover{
  opacity:1;
  background:rgba(255,76,106,.12);
}


/* ══════════════════════════════════════════════════════════════
   PLAY WORLDCUP — V4 FINAL (단일 소스)
   ──────────────────────────────────────────────────────────────
   이전 V2/V2.5/V3 패치 전부 삭제됨. 이 블록만 유효.
   핵심: Shell 고정 + contain(원본 전체) + 블러 배경 + 카드=버튼
   ══════════════════════════════════════════════════════════════ */

/* ── 0) 기본 (모든 해상도 공통) ── */
body[data-page="play"] main.container{
  flex: 1 0 auto;
  max-width: none;
  margin: 8px auto;
  padding: 0 10px;
}
body[data-page="play"] #worldcupSection.card{
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 8px;
  margin: 0 auto;
  overflow: hidden;
}
body[data-page="play"] .match{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 8px 0;
}
body[data-page="play"] .choice{
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-width: 0;
  min-height: clamp(320px, 55vh, 520px);
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #0c1220;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
body[data-page="play"] button.choice{
  font: inherit;
  color: inherit;
  text-align: left;
}
body[data-page="play"] .choice:hover:not(:disabled){
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(76,125,255,.18);
}
body[data-page="play"] .choice:active:not(:disabled){
  transform: translateY(0);
}
body[data-page="play"] .choice:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
body[data-page="play"] .choice:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
body[data-page="play"] .vs{
  display: none;
}

/* ── 미디어 박스 ── */
body[data-page="play"] .cand-media-wrap{
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  border: none;
  background: #000;
  margin: 0;
}

/* ── 블러 배경 레이어 (contain 공백을 자연스럽게 채움) ── */
body[data-page="play"] .media-blur-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(28px) brightness(0.45);
  transform: scale(1.2);
  pointer-events: none;
}

/* ── 미디어 자식: absolute contain (원본 전체 보기) ── */
body[data-page="play"] .cand-media-wrap > img:not(.hidden):not(.media-blur-bg),
body[data-page="play"] .cand-media-wrap > video:not(.hidden),
body[data-page="play"] .cand-media-wrap > iframe:not(.hidden){
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}
/* ── 유튜브 iframe만 interactive (재생/일시정지/넘기기/전체화면) ── */
body[data-page="play"] .cand-media-wrap > iframe:not(.hidden){
  pointer-events: auto;
  z-index: 2;
}
body[data-page="play"] .cand-media-wrap > img:not(.hidden):not(.media-blur-bg),
body[data-page="play"] .cand-media-wrap > video:not(.hidden){
  object-fit: contain;
  object-position: center;
}

/* ── .hidden 종결자 ── */
body[data-page="play"] .cand-media-wrap > .hidden{
  display: none !important;
}

/* ── 유튜브 재생 오버레이 ── */
body[data-page="play"] .cand-play-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(0,0,0,.18);
  transition: background .15s;
}
body[data-page="play"] .cand-play-overlay:hover{
  background: rgba(0,0,0,.35);
}
body[data-page="play"] .cand-play-btn{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  user-select: none;
  color: #fff;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
body[data-page="play"] .cand-play-overlay:hover .cand-play-btn{
  transform: scale(1.08);
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 0 20px rgba(255,255,255,.12);
}

/* ── 유튜브 활성 시 카드 hover/click 피드백 제거 ── */
body[data-page="play"] .choice.yt-active{
  cursor: default;
}
body[data-page="play"] .choice.yt-active:hover:not(:disabled){
  border-color: var(--line);
  transform: none;
  box-shadow: none;
}

/* ── 유튜브 전용 "선택하기" CTA 버튼 ── */
body[data-page="play"] .wc-pick-cta{
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  padding: 14px 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, var(--primary), #6366f1);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  pointer-events: auto;
}
body[data-page="play"] .wc-pick-cta:hover{
  filter: brightness(1.12);
  transform: translateY(-1px);
}
body[data-page="play"] .wc-pick-cta:active{
  filter: brightness(.95);
  transform: translateY(0);
}

/* ── 외부 iframe PosterPlaceholder (CHZZK/SOOP — 포스터 없을 때) ── */
body[data-page="play"] .cand-iframe-placeholder{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0c1220 0%, #151e33 45%, #0f1728 100%);
  border: none;
  overflow: hidden;
}
/* 미세 노이즈 / 빛 패턴 오버레이 */
body[data-page="play"] .cand-iframe-placeholder::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,255,255,.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(255,255,255,.025) 0%, transparent 60%);
  pointer-events: none;
}
/* 하단 장식선 (브랜드 액센트) */
body[data-page="play"] .cand-iframe-placeholder::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  pointer-events: none;
}
/* Provider 배지 (좌상단 pill) */
body[data-page="play"] .cand-iframe-ph-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  user-select: none;
}
/* Provider 라벨 (중앙, 포스터 위 텍스트) */
body[data-page="play"] .cand-iframe-provider-label{
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: 0.03em;
  user-select: none;
  z-index: 1;
  margin-top: 4px;
}
/* ─── CHZZK 브랜드 (녹색 톤) ─── */
body[data-page="play"] .cand-iframe-placeholder[data-provider="chzzk"]{
  background: linear-gradient(160deg, #001f0a 0%, #003d17 35%, #00250d 100%);
}
body[data-page="play"] .cand-iframe-placeholder[data-provider="chzzk"]::after{
  background: linear-gradient(90deg, transparent, rgba(0,199,60,.4), transparent);
}
body[data-page="play"] .cand-iframe-placeholder[data-provider="chzzk"] .cand-iframe-ph-badge{
  background: rgba(0,199,60,.35);
  color: #fff;
}
body[data-page="play"] .cand-iframe-placeholder[data-provider="chzzk"] .cand-iframe-provider-label{
  color: rgba(0,199,60,.45);
}
/* ─── SOOP 브랜드 (블루 톤) ─── */
body[data-page="play"] .cand-iframe-placeholder[data-provider="soop"]{
  background: linear-gradient(160deg, #060e1a 0%, #122848 35%, #0a1525 100%);
}
body[data-page="play"] .cand-iframe-placeholder[data-provider="soop"]::after{
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.35), transparent);
}
body[data-page="play"] .cand-iframe-placeholder[data-provider="soop"] .cand-iframe-ph-badge{
  background: rgba(59,130,246,.3);
  color: #fff;
}
body[data-page="play"] .cand-iframe-placeholder[data-provider="soop"] .cand-iframe-provider-label{
  color: rgba(59,130,246,.4);
}
/* ─── 오버레이 ▶ 래퍼 + "클릭하여 재생" 라벨 ─── */
body[data-page="play"] .cand-play-btn-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
body[data-page="play"] .cand-play-label{
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  user-select: none;
  letter-spacing: 0.02em;
  transition: color .15s;
}
body[data-page="play"] .cand-play-overlay:hover .cand-play-label{
  color: rgba(255,255,255,.75);
}

/* ── 엔드카드 iframe 미리보기 ── */
.end-iframe-preview{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.end-iframe-preview .cand-iframe-placeholder{
  position: relative;
  width: 100%;
  min-height: 120px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.end-iframe-preview .cand-iframe-ph-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
}

/* ── 티어 카드 provider 라벨 (iframe 포스터 없을 때) ── */
.tier-card-provider{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 60px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  background: linear-gradient(135deg, #1a2540 0%, #0c1220 100%);
  border-radius: 6px;
  text-align: center;
}

/* ── 타이틀 footer (고정 높이) ── */
body[data-page="play"] .choiceText{
  position: relative;
  flex: 0 0 48px;
  height: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  padding: 4px 12px;
  background: rgba(0,0,0,.65);
  color: #fff;
  overflow: hidden;
  pointer-events: none;
  white-space: normal;
  word-break: keep-all;
}

/* ══════════════════════════════════════════════════
   PC 전용 (≥1100px): 초대형 고정 Shell + 블러 배경
   ══════════════════════════════════════════════════ */
@media (min-width: 1100px){
  body[data-page="play"] main.container{
    padding: 0 12px;
  }
  body[data-page="play"] #worldcupSection.card{
    padding: 10px;
  }
  body[data-page="play"] .match{
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
  }
  body[data-page="play"] .choice{
    height: clamp(640px, 82vh, 920px);
    min-height: clamp(640px, 82vh, 920px);
    max-width: none;
    margin: 0;
    contain: layout paint size;
  }
  body[data-page="play"] .vs{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    color: var(--primary);
    opacity: .7;
    flex-shrink: 0;
    padding: 0 6px;
  }
  body[data-page="play"] .choiceText{
    flex: 0 0 56px;
    height: 56px;
    font-size: 17px;
    padding: 4px 16px;
  }
  body[data-page="play"] .cand-play-btn{
    width: 64px;
    height: 64px;
    font-size: 22px;
  }
  body[data-page="play"] .wc-pick-cta{
    padding: 18px 0;
    font-size: 18px;
  }
}

/* ══════════════════════════════════════════════════
   모바일 카드 높이 고정 (<1100px) — 레이아웃 시프트 제거
   ══════════════════════════════════════════════════ */
@media (max-width: 1099px){
  body[data-page="play"]{
    --mCardH: clamp(420px, 68vh, 680px);
    --mFooterH: 48px;
  }

  /* 카드 Shell 고정 */
  body[data-page="play"] .choice{
    height: var(--mCardH) !important;
    min-height: var(--mCardH) !important;
    max-height: var(--mCardH) !important;
    contain: layout paint size;
  }

  /* MediaBox 고정(출렁임 제거 핵심) */
  body[data-page="play"] .cand-media-wrap{
    height: calc(var(--mCardH) - var(--mFooterH)) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  /* 미디어 absolute fill — PC와 동일 패턴이지만 contain 보장 */
  body[data-page="play"] .cand-media-wrap > img:not(.hidden):not(.media-blur-bg),
  body[data-page="play"] .cand-media-wrap > video:not(.hidden),
  body[data-page="play"] .cand-media-wrap > iframe:not(.hidden){
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* gif/이미지: contain으로 레터박스 — 카드 크기 변동 0 */
  body[data-page="play"] .cand-media-wrap > img:not(.hidden):not(.media-blur-bg){
    object-fit: contain !important;
    background: #000;
  }

  /* mp4: contain */
  body[data-page="play"] .cand-media-wrap > video:not(.hidden){
    object-fit: contain !important;
    background: #000;
  }

  /* hidden 우선순위 보장 */
  body[data-page="play"] .cand-media-wrap > .hidden{
    display: none !important;
  }

  /* footer 고정 */
  body[data-page="play"] .choiceText{
    height: var(--mFooterH) !important;
    flex: 0 0 var(--mFooterH) !important;
  }
}

/* ── landscape 모바일 ── */
@media (max-height: 500px) and (orientation: landscape){
  body[data-page="play"] .choice{
    --mCardH: clamp(200px, 70vh, 400px);
    min-height: var(--mCardH) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PLAY WIDTH EXPAND — PC ONLY
   ──────────────────────────────────────────────────────────────
   PLAY_CONTAINER = main.container
   MATCH_ROW      = .match
   양쪽 검은 여백 최소화, 카드/미디어 최대한 크게
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1100px){
  body[data-page="play"]{
    --padX: 14px;
    --maxW: 1800px;
    --gap: 18px;
  }

  /* 중앙 컨테이너 폭 제한 해제 */
  body[data-page="play"] main.container{
    width: min(var(--maxW), calc(100vw - var(--padX) * 2));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padX);
    padding-right: var(--padX);
  }

  /* 섹션 카드도 꽉 차게 */
  body[data-page="play"] #worldcupSection.card{
    width: 100%;
    max-width: none;
    padding: 10px var(--padX);
  }

  /* 카드 그리드 풀 폭 */
  body[data-page="play"] .match{
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--gap);
  }
}

/* ══════════════════════════════════════════════════════════════
   TIER WIDTH EXPAND — PC ONLY
   ──────────────────────────────────────────────────────────────
   TIER_CONTAINER = .tier-container  (tier-play, tier-result의 main)
                  + main.create-page (create-tier의 main)
   BOARD_WRAP     = .tier-board / .create-grid
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1100px){
  :root{
    --tierPadX: 14px;
    --tierMaxW: 1800px;
  }

  /* 중앙 컨테이너 폭 제한 해제 */
  body[data-page="tier-play"] .tier-container,
  body[data-page="tier-result"] .tier-container,
  body[data-page="create-tier"] main.create-page{
    width: min(var(--tierMaxW), calc(100vw - var(--tierPadX) * 2));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tierPadX);
    padding-right: var(--tierPadX);
  }

  /* 보드/그리드 풀 폭 */
  body[data-page="tier-play"] .tier-board,
  body[data-page="tier-play"] .tier-pool-section,
  body[data-page="tier-result"] .tier-board,
  body[data-page="create-tier"] .create-grid{
    width: 100%;
    max-width: none;
  }

  /* 부모 main에 max-width 걸려있으면 같이 풀기 */
  body[data-page="tier-play"] main,
  body[data-page="tier-result"] main,
  body[data-page="create-tier"] main{
    max-width: none;
  }
}

/* ===== 마이페이지 ===== */
.me-container{
  max-width:720px;
  margin:0 auto;
  padding:24px 16px 40px;
}

/* 비로그인 프롬프트 */
.me-login-prompt{
  text-align:center;
  padding:48px 24px;
}
.me-login-prompt h2{
  margin:0 0 8px;
  font-size:20px;
}

/* 프로필 카드 */
.me-profile-card{
  padding:24px;
  margin-bottom:16px;
}
.me-profile-top{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.me-avatar-btn{
  position:relative;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  border-radius:50%;
  flex-shrink:0;
}
.me-avatar{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:800;
  flex-shrink:0;
}
.me-avatar.me-avatar-img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:transparent;
}
.me-avatar-overlay{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.me-avatar-overlay span{
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.me-avatar-btn:hover .me-avatar-overlay,
.me-avatar-btn:focus-visible .me-avatar-overlay{
  opacity:1;
}
.me-nickname{
  font-size:22px;
  margin:0;
  line-height:1.3;
}
.me-email{
  font-size:13px;
  margin:2px 0 0;
}
.me-nick-edit{
  display:flex;
  gap:8px;
  align-items:center;
}
.me-nick-input{
  flex:1;
  height:40px;
  font-size:15px;
}
.me-nick-hint{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-top:4px;
}

/* 탭 */
.me-tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--line);
  margin-bottom:16px;
}
.me-tab{
  flex:1;
  padding:12px 0;
  font-size:15px;
  font-weight:600;
  text-align:center;
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .15s, border-color .15s;
}
.me-tab.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}
.me-tab:hover:not(.active){
  color:var(--text);
}

/* 패널 */
.me-panel{
  min-height:120px;
}

/* 타입 필터 칩 */
.me-type-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.me-filter-chip{
  padding:6px 16px;
  font-size:13px;
  font-weight:600;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
}
.me-filter-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.me-filter-chip:hover:not(.active){
  border-color:var(--primary);
  color:var(--text);
}

/* 로딩 */
.me-loading{
  text-align:center;
  padding:32px 0;
}

/* 빈 상태 */
.me-empty{
  text-align:center;
  padding:32px 16px;
}
.me-empty p{
  margin:0 0 16px;
}

/* 콘텐츠 카드 */
.me-contents-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.me-content-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .15s;
}
.me-content-card:hover{
  border-color:var(--primary);
}
.me-cc-thumb-wrap{
  position:relative;
  width:72px; height:48px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--line);
}
.me-cc-thumb{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.me-cc-type-badge{
  position:absolute;
  top:3px; left:3px;
  font-size:10px;
  font-weight:700;
  padding:1px 5px;
  border-radius:4px;
  color:#fff;
  line-height:1.4;
}
.me-cc-type-badge.worldcup{ background:#e55c5c; }
.me-cc-type-badge.quiz{ background:#4caf50; }
.me-cc-type-badge.tier{ background:#ff9800; }
.me-cc-body{
  flex:1;
  min-width:0;
}
.me-cc-title{
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.me-cc-meta{
  font-size:12px;
  display:flex;
  gap:8px;
  margin-top:2px;
}
/* 액션 버튼 그룹 */
.me-cc-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.me-cc-action-btn{
  width:32px; height:32px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, background .15s;
  padding:0;
  line-height:1;
}
.me-cc-action-btn:hover{
  border-color:var(--primary);
  background:var(--card);
}
.me-cc-action-btn.danger:hover{
  border-color:var(--error, #f44);
  background:rgba(244,67,54,.08);
  color:var(--error, #f44);
}
.me-cc-btn-tier:hover{
  border-color:#ff9800;
  background:rgba(255,152,0,.1);
}
.me-cc-btn-tier:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* 검색 + 정렬 툴바 */
.me-toolbar{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  align-items:center;
}
.me-search-wrap{
  flex:1;
  position:relative;
}
.me-search-input{
  width:100%;
  height:36px;
  font-size:13px;
  padding:0 12px 0 32px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
  box-sizing:border-box;
}
.me-search-wrap::before{
  content:"\1F50D";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  pointer-events:none;
  opacity:.5;
}
.me-sort-select{
  height:36px;
  font-size:13px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  flex-shrink:0;
}

/* 스켈레톤 */
.me-skeleton-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.me-skel-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
}
.me-skel-thumb{
  width:72px; height:48px;
  border-radius:8px;
  background:var(--line);
  animation:me-shimmer 1.2s ease-in-out infinite;
}
.me-skel-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.me-skel-line{
  height:12px;
  border-radius:4px;
  background:var(--line);
  animation:me-shimmer 1.2s ease-in-out infinite;
}
.me-skel-line.w60{ width:60%; }
.me-skel-line.w40{ width:40%; }
.me-skel-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.me-skel-btn{
  width:32px; height:32px;
  border-radius:8px;
  background:var(--line);
  animation:me-shimmer 1.2s ease-in-out infinite;
}
@keyframes me-shimmer{
  0%,100%{ opacity:.4; }
  50%{ opacity:.8; }
}

/* 에러 상태 */
.me-error{
  text-align:center;
  padding:32px 16px;
}
.me-error p{
  margin:0 0 12px;
}

/* ===== 정보 모달 ===== */
.me-info-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:2500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.me-info-modal{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  width:100%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
.me-info-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--line);
}
.me-info-header h3{
  margin:0;
  font-size:16px;
  font-weight:700;
}
.me-info-close{
  background:none;
  border:none;
  font-size:20px;
  color:var(--muted);
  cursor:pointer;
  padding:0 4px;
  line-height:1;
}
.me-info-close:hover{ color:var(--text); }
.me-info-body{
  padding:16px 20px;
}
.me-info-thumb-preview{
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:14px;
  display:block;
  background:var(--line);
}
.me-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.me-info-row:last-child{
  border-bottom:none;
}
.me-info-label{
  color:var(--muted);
  font-weight:500;
  flex-shrink:0;
  margin-right:12px;
}
.me-info-value{
  font-weight:600;
  text-align:right;
  word-break:break-all;
}

/* 공개/비공개 토글 */
.me-vis-toggle{
  position:relative;
  width:44px; height:24px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--line);
  border:none;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s;
  flex-shrink:0;
}
.me-vis-toggle:checked{
  background:var(--primary);
}
.me-vis-toggle::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s;
}
.me-vis-toggle:checked::after{
  transform:translateX(20px);
}
.me-info-footer{
  display:flex;
  gap:8px;
  padding:12px 20px 16px;
  border-top:1px solid var(--line);
}
.me-info-footer .btn{
  flex:1;
  font-size:13px;
}

/* 삭제 확인 모달 */
.me-delete-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:2600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.me-delete-box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  width:100%;
  max-width:360px;
  text-align:center;
}
.me-delete-box h4{
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
}
.me-delete-box p{
  margin:0 0 20px;
  font-size:14px;
  color:var(--muted);
  word-break:break-all;
}
.me-delete-btns{
  display:flex;
  gap:8px;
  justify-content:center;
}
.me-delete-btns .btn{
  min-width:80px;
  font-size:13px;
}
.btn.btn-danger{
  background:var(--error, #f44);
  color:#fff;
  border-color:var(--error, #f44);
}
.btn.btn-danger:hover{
  background:#d32f2f;
  border-color:#d32f2f;
}

/* 통계 그리드 */
.me-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.me-stat-card{
  text-align:center;
  padding:24px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
}
.me-stat-value{
  font-size:28px;
  font-weight:800;
  color:var(--primary);
  line-height:1.2;
}
.me-stat-label{
  font-size:13px;
  margin-top:6px;
}

/* 모바일 */
@media(max-width:600px){
  .me-container{ padding:16px 12px 32px; }
  .me-profile-top{ gap:12px; }
  .me-avatar{ width:44px; height:44px; font-size:18px; }
  .me-avatar-overlay span{ font-size:10px; }
  .me-nickname{ font-size:18px; }
  .me-stats-grid{ grid-template-columns:1fr; gap:8px; }
  .me-stat-card{ padding:16px 12px; }
  .me-stat-value{ font-size:22px; }
  .me-cc-thumb-wrap{ width:56px; height:38px; }
  .me-toolbar{ flex-wrap:wrap; }
  .me-search-wrap{ min-width:100%; }
  .me-sort-select{ width:100%; }
  .me-cc-action-btn{ width:28px; height:28px; font-size:12px; }
  .me-skel-thumb{ width:56px; height:38px; }
  .me-skel-btn{ width:28px; height:28px; }
  .me-info-modal{ max-width:100%; border-radius:12px; }
  .me-info-body{ padding:14px 16px; }
  .me-info-footer{ padding:10px 16px 14px; }
}

/* ===== Create Page A11y ===== */
.dropzone:focus-visible, .create-thumb-zone:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
.btn:focus-visible, .seg:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

/* ===== 시청자 투표 (Audience Voting) ===== */

/* --- 참여 방식 선택 라디오 --- */
.aud-type-selector{
  display:flex;gap:8px;margin-top:8px;
}
.aud-type-option{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:10px 8px;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;transition:border-color .15s,background .15s;
  background:var(--bg);text-align:center;
}
.aud-type-option:hover{
  border-color:var(--primary);background:rgba(124,106,239,.06);
}
.aud-type-option input[type="radio"]{display:none}
.aud-type-option input[type="radio"]:checked ~ .aud-type-label{
  color:var(--primary);
}
.aud-type-option input[type="radio"]:checked ~ .aud-type-desc{
  color:var(--text);
}
.aud-type-option:has(input:checked){
  border-color:var(--primary);background:rgba(124,106,239,.1);
}
.aud-type-label{
  font-size:13px;font-weight:700;color:var(--muted);
  transition:color .15s;
}
.aud-type-desc{
  font-size:11px;color:var(--muted);margin-top:2px;
  transition:color .15s;
}

/* --- 채팅 연동형 패널 --- */
.aud-chat-link-btn{
  width:100%;padding:10px 0 !important;font-size:13px;font-weight:600;
  border:1px dashed var(--primary) !important;color:var(--primary) !important;
  border-radius:8px;transition:background .15s;
}
.aud-chat-link-btn:hover{
  background:rgba(124,106,239,.1) !important;
}
.aud-chat-icon{font-size:15px;margin-right:4px}
.aud-chat-linked-row{
  display:flex;align-items:center;gap:8px;
}
.aud-chat-linked-badge{
  font-size:12px;font-weight:700;color:#00ffa3;
  padding:2px 8px;background:rgba(0,255,163,.1);
  border-radius:6px;white-space:nowrap;
}
.aud-chat-linked-nick{
  font-size:13px;font-weight:600;color:var(--text);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- 채팅 연동 상태 배지 (play.html 오버레이) --- */
.chat-aud-status{
  font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:4px;
  white-space:nowrap;margin-left:6px;
  animation:chatAudFadeIn .3s;
}
@keyframes chatAudFadeIn{from{opacity:0}to{opacity:1}}
.chat-aud-status.s-account{
  color:#8ab4f8;background:rgba(138,180,248,.12);
}
.chat-aud-status.s-connecting{
  color:#f0ad4e;background:rgba(240,173,78,.15);
}
.chat-aud-status.s-connected{
  color:#00ffa3;background:rgba(0,255,163,.12);
}
.chat-aud-status.s-error{
  color:#f44336;background:rgba(244,67,54,.12);
}
.chat-aud-status.s-warning{
  color:#ffb74d;background:rgba(255,183,77,.12);
}

/* --- 로비 패널 --- */
.aud-lobby-panel{
  margin-top:8px;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  display:flex;flex-direction:column;gap:8px;
}
.aud-lobby-link-row{
  display:flex;gap:6px;align-items:center;
}
.aud-lobby-link-row .input{
  flex:1;font-size:12px;padding:6px 8px;
}
.aud-lobby-config-row{
  display:flex;gap:8px;align-items:center;
}
.aud-lobby-config-row .input.small{
  width:80px;
}

/* --- 호스트 오버레이 --- */
.aud-overlay{
  margin:8px 0;
  padding:10px 14px;
  background:rgba(18,26,39,.85);
  border:1px solid var(--line);
  border-radius:12px;
  text-align:center;
}
.aud-overlay-head{
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.aud-overlay-label{
  font-size:12px;color:var(--muted);font-weight:600;
}
/* 참고용 배지 + 툴팁 */
.aud-ref-badge{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;
  color:#ffb74d;
  background:rgba(255,183,77,.12);
  border:1px solid rgba(255,183,77,.30);
  border-radius:6px;
  padding:2px 7px;
  cursor:help;
  position:relative;
  user-select:none;
}
.aud-ref-tip{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:260px;
  padding:10px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  color:var(--fg);font-size:12px;font-weight:400;line-height:1.5;
  text-align:left;white-space:normal;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  z-index:20;
}
.aud-ref-badge:hover .aud-ref-tip,
.aud-ref-badge:focus .aud-ref-tip,
.aud-ref-badge:focus-within .aud-ref-tip{
  display:block;
}
/* 모바일: 탭으로 열리도록 */
@media(hover:none){
  .aud-ref-badge{ -webkit-tap-highlight-color:transparent; }
  .aud-ref-badge:active .aud-ref-tip{ display:block; }
}
.aud-overlay-bar{
  display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--bg);margin:6px 0 4px;
}
.aud-overlay-fill.left{
  background:var(--primary);transition:width .4s ease;
}
.aud-overlay-fill.right{
  background:#f06292;transition:width .4s ease;
}
.aud-overlay-pcts{
  display:flex;justify-content:space-between;font-size:14px;font-weight:700;
}
.aud-overlay-pcts span:first-child{color:var(--primary)}
.aud-overlay-pcts span:last-child{color:#f06292}
.aud-overlay-total{
  font-size:12px;color:var(--muted);font-weight:400;
}
.aud-overlay-timer{
  display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:var(--primary);
}
.aud-overlay-timer.expired{
  color:var(--error, #f44);
}
/* 퀴즈 시청자 집계 (호스트 오버레이 전용) */
.aud-overlay-quiz{margin:6px 0 2px;display:flex;flex-direction:column;gap:5px;text-align:left;}
.aud-overlay-quiz .aud-q-row{display:flex;align-items:center;gap:6px;font-size:12px;}
.aud-overlay-quiz .aud-q-label{min-width:18px;font-weight:700;text-align:center;}
.aud-overlay-quiz .aud-q-bar-bg{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden;}
.aud-overlay-quiz .aud-q-bar{height:100%;border-radius:4px;transition:width .4s ease;}
.aud-overlay-quiz .aud-q-bar.q1{background:var(--primary);}
.aud-overlay-quiz .aud-q-bar.q2{background:#f06292;}
.aud-overlay-quiz .aud-q-bar.q3{background:#ffb74d;}
.aud-overlay-quiz .aud-q-bar.q4{background:#4caf50;}
.aud-overlay-quiz .aud-q-pct{min-width:36px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);}
.aud-overlay-quiz .aud-q-total{text-align:center;font-size:11px;color:var(--muted);margin-top:2px;}

/* ===== 시청자 집계 — 정답 공개 패널용 (호스트 전용) ===== */
.aud-reveal-agg{margin:14px 0 6px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.aud-reveal-agg .aud-ra-head{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--text);}
.aud-reveal-agg .aud-ra-badge{display:inline-block;padding:1px 6px;border-radius:4px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;line-height:1.5;}
.aud-reveal-agg .aud-ra-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:5px;}
.aud-reveal-agg .aud-ra-label{min-width:22px;font-weight:700;text-align:center;}
.aud-reveal-agg .aud-ra-bar-bg{flex:1;height:10px;background:var(--bg);border-radius:5px;overflow:hidden;}
.aud-reveal-agg .aud-ra-bar{height:100%;border-radius:5px;transition:width .5s ease;}
.aud-reveal-agg .aud-ra-bar.c1{background:var(--primary);}
.aud-reveal-agg .aud-ra-bar.c2{background:#f06292;}
.aud-reveal-agg .aud-ra-bar.c3{background:#ffb74d;}
.aud-reveal-agg .aud-ra-bar.c4{background:#4caf50;}
.aud-reveal-agg .aud-ra-bar.correct{box-shadow:0 0 0 2px var(--primary);background:var(--primary);}
.aud-reveal-agg .aud-ra-pct{min-width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;}
.aud-reveal-agg .aud-ra-total{text-align:center;font-size:12px;color:var(--muted);margin-top:4px;}
.aud-reveal-agg .aud-ra-texts{list-style:none;padding:0;margin:4px 0 0;max-height:180px;overflow-y:auto;}
.aud-reveal-agg .aud-ra-texts li{padding:4px 8px;font-size:13px;border-bottom:1px solid var(--border);color:var(--text);}
.aud-reveal-agg .aud-ra-texts li:last-child{border-bottom:none;}
.aud-reveal-agg .aud-ra-ended{text-align:center;font-size:11px;color:var(--muted);margin-top:6px;opacity:.7;}

/* ===== 시청자 응답 카드 피드 (호스트 오버레이) ===== */
.aud-resp-feed{margin:8px 0 4px;max-height:240px;overflow-y:auto;scrollbar-width:thin;}
.aud-resp-head{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:4px;}
.aud-resp-head::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4caf50;animation:aud-resp-pulse 1.5s infinite;}
@keyframes aud-resp-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.aud-resp-cards{display:flex;flex-direction:column;gap:6px;}
.aud-resp-card{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:10px;transition:transform .15s,opacity .3s;}
.aud-resp-card:first-child{animation:aud-resp-slide .3s ease;}
@keyframes aud-resp-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.aud-resp-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;}
.aud-resp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.aud-resp-nick{font-size:12px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aud-resp-answer{font-size:13px;color:var(--text);word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.aud-resp-choice{display:inline-block;padding:2px 10px;border-radius:6px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap;}
.aud-resp-time{font-size:10px;color:var(--muted);white-space:nowrap;flex-shrink:0;}

/* ===== 카드형 응답 공통 (aud-ra-cards) ===== */
.aud-ra-cards{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;max-height:200px;overflow-y:auto;scrollbar-width:thin;}
.aud-ra-card{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:12px;flex-shrink:0;}
.aud-ra-card.correct{border-color:#4caf50;background:rgba(76,175,80,.08);}
.aud-ra-card-nick{font-weight:700;color:var(--fg);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aud-ra-card-answer{color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.aud-ra-card-choice{display:inline-block;padding:1px 8px;border-radius:4px;color:#fff;font-weight:700;font-size:11px;}
.aud-ra-card-choice.c1{background:#4e95ff;}
.aud-ra-card-choice.c2{background:#f06292;}
.aud-ra-card-choice.c3{background:#ffb74d;}
.aud-ra-card-choice.c4{background:#4caf50;}
.aud-ra-card-mark{font-weight:800;color:#4caf50;font-size:13px;}

/* ===== 캡처 모드: html2canvas 비호환 CSS 임시 비활성화 ===== */
body.duo-capture-mode *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  mix-blend-mode:normal !important;
}

/* ===== 제작 UX 개선: 개별 삭제 / 검색 카운트 / 탭 컨트롤 ===== */

/* 개별 삭제 버튼 — 카드 바깥 우상단 (겹침 방지) */
.item-delete-btn{position:absolute;top:-8px;right:-8px;width:34px;height:34px;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  color:var(--muted);cursor:pointer;transition:background .15s,color .15s,transform .15s;
  z-index:30;display:flex;align-items:center;justify-content:center;
  font-size:15px;padding:0;line-height:1;}
.item-delete-btn:hover{background:rgba(231,76,60,.85);color:#fff;border-color:rgba(231,76,60,.6);transform:scale(1.08);}
.item-delete-btn:active{transform:scale(.95);}
.item-delete-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* position:relative + overflow:visible for absolute child */
.cand-card,.quiz-q-row,.tier-card-row{position:relative;overflow:visible;}

/* 첫 행 삭제 버튼이 카드 헤더에 가리지 않도록 여유 확보 + 행 간격 넓히기 */
.candidate-list,.quiz-q-list,#cardList{padding-top:10px;}
.candidate-list{gap:14px;}
.quiz-q-row{margin-bottom:14px;}
#cardList .tier-card-row{padding:14px 0;}

/* 검색 툴바 + 카운트 */
.item-search-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.item-search-toolbar .input{flex:1;}
.item-search-count{font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0;}

/* sticky 컨트롤 영역 (월드컵/퀴즈/티어 탭2 상단 — 3페이지 공통) */
.item-tab-controls{position:sticky;top:0;z-index:10;background:var(--card);
  padding:12px 0 8px;border-bottom:1px solid var(--line);margin-bottom:12px;}
.item-tab-actions{display:flex;gap:8px;align-items:center;margin-bottom:8px;}

/* ─── 제작 페이지 공통 "+ 추가" 버튼 (월드컵/퀴즈/티어 통일) ─── */
.create-add-btn{
  min-height:40px;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
}
.create-add-btn:hover{border-color:#3a4e75;}
.create-add-btn:active{background:rgba(255,255,255,.04);}
.create-add-btn:disabled{opacity:.45;cursor:not-allowed;}

/* ─── 퀴즈 문항 리스트 하단 "문제 추가" 바 ─── */
.items-add-bar{margin-top:16px;}
.items-add-btn{width:100%;min-height:48px;font-size:15px;font-weight:700;}

/* ─── 완주(회원) 툴팁 ─── */
.cmplt-tip{display:inline-flex;align-items:center;gap:2px;position:relative;vertical-align:baseline;}
.cmplt-tip-btn{all:unset;cursor:pointer;font-size:11px;color:var(--muted);line-height:1;vertical-align:middle;padding:0 1px;}
.cmplt-tip-btn:hover,.cmplt-tip-btn:focus-visible{color:var(--primary);}
.cmplt-tip-pop{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--card,#23232b);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--fg);white-space:nowrap;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none;}
.cmplt-tip-pop::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--line);}
@media(hover:hover){.cmplt-tip:hover .cmplt-tip-pop{display:block;}}
.cmplt-tip.active .cmplt-tip-pop{display:block;}

/* ─── 상세 모달: 제목 + 좋아요 행 ─── */
.detail-title-row{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;}
.detail-title-row .modal-title{flex:1;min-width:0;}
.detail-like-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;font-size:14px;color:var(--muted);transition:background .15s,color .15s;flex-shrink:0;margin-top:2px;}
.detail-like-btn:hover{background:rgba(255,255,255,.06);}
.detail-like-btn:active{transform:scale(.93);}
.detail-like-icon{font-size:20px;line-height:1;transition:transform .2s;}
.detail-like-btn.liked .detail-like-icon{color:#ff4d6a;transform:scale(1.15);}
.detail-like-btn.liked{color:#ff4d6a;}
.detail-like-count{font-variant-numeric:tabular-nums;font-size:13px;}
/* 티어는 좋아요 숨김 */
.detail-like-btn.tier-hide{display:none;}
/* 상세 모달 공유 버튼 */
.detail-share-btn{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--muted);transition:background .15s,color .15s;flex-shrink:0;margin-top:2px;}
.detail-share-btn:hover{background:rgba(255,255,255,.08);color:var(--fg);}
.detail-share-btn:active{transform:scale(.9);}

/* ─── 피드 카드: 좋아요 카운트(작은 텍스트) ─── */
.feed-card-like{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:2px;}
.feed-card-like::before{content:'♥';font-size:11px;color:#ff4d6a;opacity:.7;}

/* ─── 더보기 / 무한 스크롤 sentinel ─── */
.load-more-btn{min-width:200px;font-size:15px;font-weight:600;padding:10px 24px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--fg);cursor:pointer;transition:border-color .15s,background .15s;}
.load-more-btn:hover{border-color:var(--primary);background:rgba(255,255,255,.03);}
.load-more-btn:disabled{opacity:.5;cursor:not-allowed;}
.feed-sentinel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:24px 0 40px;}
.feed-sentinel--end{min-height:0;padding:0 0 24px;}
.feed-sentinel--error{padding:20px 0 40px;}
.feed-sentinel-spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:sentinel-spin .7s linear infinite;}
.feed-sentinel-text{font-size:13px;color:var(--muted);}
@keyframes sentinel-spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════
   [QUIZ REVEAL V2] 정답 공개 리뉴얼 — 2026-02-17
   ═══════════════════════════════════════════════════ */

/* --- 정답/오답 배지 (칩) --- */
.qr-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 22px; border-radius:100px;
  font-size:17px; font-weight:800; letter-spacing:.3px;
  animation: qrBadgePop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.qr-badge--correct{
  background:rgba(46,213,115,.16);
  border:1.5px solid rgba(46,213,115,.65);
  color:#2ed573;
}
.qr-badge--wrong{
  background:rgba(255,76,106,.13);
  border:1.5px solid rgba(255,76,106,.65);
  color:#ff4c6a;
}
@keyframes qrBadgePop{
  0%{transform:scale(.6);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* --- 정답 텍스트 (크게) --- */
.qr-answer-main{
  font-size:28px; font-weight:800;
  margin:10px 0 4px; text-align:center;
  line-height:1.3; word-break:keep-all;
  animation: qrSlideUp .4s ease both .1s;
}
.qr-answer-sub{
  font-size:14px; color:var(--muted);
  text-align:center; margin-top:2px;
}
@keyframes qrSlideUp{
  0%{transform:translateY(12px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* --- 멀티 통합: 점수판 내 정답 리빌 카드 --- */
#quizScoreRevealCard{
  margin-bottom:12px; padding:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
/* 멀티 리빌 카드 내부: 애니메이션 비활성화 (display:none 부모에서 생성 시 opacity:0 고착 방지) */
#quizScoreRevealCard .qr-badge,
#quizScoreRevealCard .qr-answer-main,
#quizScoreRevealCard .qr-answer-sub,
#quizScoreRevealCard .qr-stats-compact,
#quizScoreRevealCard .qr-player-answers,
#quizScoreRevealCard .qr-rv-result-icon,
#quizScoreRevealCard .qr-rv-cards{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* --- 리빌 패널 v2 inner --- */
.qr-reveal-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:4px; padding:8px 0;
}

/* --- 점수 칩 --- */
.qr-score-chip{
  font-size:13px; color:var(--muted); margin-top:2px;
}

/* --- 선택지 통계 (간소화) --- */
.qr-stats-compact{
  width:100%; max-width:480px; margin:14px auto 0;
}

/* --- 플레이어 답변 (간소화) --- */
.qr-player-answers{
  font-size:13px; color:var(--muted);
  margin-top:10px; text-align:center;
}

/* --- 유튜브 리빌 플레이어 (크게 표시) --- */
.qr-yt-reveal-wrap{
  width:100%; max-width:640px;
  margin:0 auto 14px; border-radius:14px;
  overflow:hidden; background:#000;
  aspect-ratio:16/9; position:relative;
}
.qr-yt-reveal-wrap iframe,
.qr-yt-reveal-wrap video{
  width:100% !important; height:100% !important;
  border:0; display:block;
  position:absolute; top:0; left:0;
  z-index:1; pointer-events:auto;
  opacity:1 !important; filter:none !important; transform:none !important;
}

/* --- 유튜브 답변 중 시각 영역 (탭 토글) [V2-fix E] --- */
.qr-yt-tap-area{
  position:relative;
  width:100%; max-width:440px; margin:14px auto;
  height:120px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-direction:column;
  cursor:pointer; user-select:none;
  transition:background .15s, border-color .2s;
}
.qr-yt-tap-area:active{ background:rgba(255,255,255,.09); }
.qr-yt-tap-area.is-playing{ border-color:rgba(76,125,255,.35); background:rgba(76,125,255,.06); }
.qr-yt-tap-icon{ font-size:28px; }
.qr-yt-tap-label{ font-size:15px; color:var(--muted); font-weight:600; transition:color .15s; }
.qr-yt-tap-area.is-playing .qr-yt-tap-label{ color:var(--primary); }

/* 이퀄라이저 바 (is-playing 상태) */
.qr-yt-eq{ display:none; align-items:flex-end; gap:3px; height:24px; }
.qr-yt-tap-area.is-playing .qr-yt-eq{ display:flex; }
.qr-yt-tap-area.is-playing .qr-yt-tap-icon{ display:none; }
.qr-yt-eq-bar{
  width:4px; border-radius:2px;
  background:var(--primary);
  animation:qrEqBounce 1s ease-in-out infinite;
}
.qr-yt-eq-bar:nth-child(1){ height:8px;  animation-delay:0s; }
.qr-yt-eq-bar:nth-child(2){ height:16px; animation-delay:.15s; }
.qr-yt-eq-bar:nth-child(3){ height:10px; animation-delay:.3s; }
.qr-yt-eq-bar:nth-child(4){ height:20px; animation-delay:.1s; }
.qr-yt-eq-bar:nth-child(5){ height:6px;  animation-delay:.25s; }
@keyframes qrEqBounce{
  0%,100%{ transform:scaleY(.4); }
  50%{ transform:scaleY(1); }
}

/* --- 재생/일시정지 오버레이 --- */
.qr-yt-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5);
  border-radius:16px;
  pointer-events:none;
  opacity:0; transition:opacity .2s ease;
  z-index:5;
}
.qr-yt-overlay.show{ opacity:1; }
.qr-yt-overlay-text{
  color:#fff; font-size:18px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}

/* --- 통합 하단 버튼 (보라 ▶) --- */
body[data-page="play"] .qr-action-row{
  display:flex; justify-content:center;
  padding:18px 0 8px; gap:10px;
}
body[data-page="play"] .qr-submit-btn{
  min-width:120px; min-height:52px;
  padding:14px 28px;
  background:var(--primary);
  color:#fff; border:none; border-radius:14px;
  font-size:17px; font-weight:800;
  cursor:pointer;
  transition:background .15s, transform .08s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
body[data-page="play"] .qr-submit-btn:hover:not([disabled]){
  background:#5b8aff; transform:translateY(-1px);
}
body[data-page="play"] .qr-submit-btn:active:not([disabled]){
  transform:translateY(0) scale(.98);
}
body[data-page="play"] .qr-submit-btn[disabled]{
  opacity:.5; cursor:not-allowed;
}
body[data-page="play"] .qr-submit-btn .qr-btn-arrow{
  font-size:14px;
}

/* ── 건너뛰기 버튼 (멀티 퀴즈) ── */
.quiz-skip-btn{font-size:13px;padding:6px 16px;border-radius:8px;opacity:.85;}
.quiz-skip-btn:disabled{opacity:.5;cursor:default;}
.quiz-skip-count{display:inline-block;margin-left:8px;font-size:12px;}

/* ★ 재생/다시듣기 버튼 ghost-click 방지 */
#btnQuizPlay,
#btnQuizReplay{
  touch-action: manipulation;       /* 300ms delay 제거 */
  -webkit-tap-highlight-color: transparent;
}

/* --- 리빌 타이틀 숨김 (v2에서는 배지로 대체) --- */
#quizRevealPanel > b#quizRevealTitle{ display:none; }

/* [V2-fix F] 리빌 패널 fade-in + slide-up 애니메이션 */
#quizRevealPanel.qr-reveal-enter{
  animation:qrRevealIn .3s ease both;
}
@keyframes qrRevealIn{
  0%{ opacity:0; transform:translateY(8px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ── 모바일 반응형 ── */
@media(max-width:760px){
  .qr-answer-main{ font-size:22px; }
  .qr-yt-reveal-wrap{ max-width:100%; border-radius:10px; }
  .qr-yt-reveal-wrap iframe{ border-radius:10px; }
  .qr-yt-tap-area{ max-width:100%; height:100px; }
  .qr-badge{ font-size:15px; padding:7px 16px; }
  body[data-page="play"] .qr-submit-btn{
    min-width:100px; min-height:48px;
    padding:13px 22px; font-size:16px;
  }
}

/* ===================================================
   한줄평 미리보기 (Comment Preview — cp-* prefix)
   lobby detail modal → bottom sheet / center modal
   =================================================== */

/* Hero 오버레이 버튼 (썸네일 좌상단) */
.cp-hero-btn{
  position:absolute;
  top:10px;left:10px;
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  z-index:2;
  line-height:1.3;
}
.cp-hero-btn:hover{
  background:rgba(0,0,0,.72);
  border-color:rgba(255,255,255,.3);
}

/* 패널 오버레이 */
.cp-overlay{
  position:fixed;inset:0;z-index:2800;
  background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;
  transition:opacity .24s ease;
  pointer-events:none;
}
.cp-overlay.cp-visible{
  opacity:1;pointer-events:auto;
}

/* 시트 (모바일: bottom-sheet) */
.cp-sheet{
  background:var(--card,#121a27);
  border-radius:18px 18px 0 0;
  width:100%;max-width:480px;
  display:flex;flex-direction:column;
  max-height:80vh;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.cp-visible .cp-sheet{
  transform:translateY(0);
}

/* 헤더 */
.cp-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line,#223049);
  flex-shrink:0;
}
.cp-title{
  font-size:17px;font-weight:700;color:var(--text,#e7eefc);
}
.cp-close{
  background:none;border:none;
  color:var(--muted,#9aa7bd);
  font-size:24px;cursor:pointer;
  padding:4px 8px;line-height:1;
}
.cp-close:hover{color:var(--text,#e7eefc)}

/* 바디 (댓글 리스트) */
.cp-body{
  flex:1;overflow-y:auto;
  padding:12px 16px;
  min-height:120px;
}
.cp-body::-webkit-scrollbar{width:5px}
.cp-body::-webkit-scrollbar-track{background:transparent}
.cp-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* 빈 상태 */
.cp-empty{
  text-align:center;padding:32px 0;
  color:var(--muted,#9aa7bd);font-size:14px;
}

/* skeleton */
.cp-skeleton{
  display:flex;flex-direction:column;gap:12px;
  padding:8px 0;
}
.cp-skel-item{
  display:flex;gap:10px;align-items:flex-start;
}
.cp-skel-avatar{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);
  flex-shrink:0;
  animation:cpPulse 1.2s ease-in-out infinite;
}
.cp-skel-lines{flex:1;display:flex;flex-direction:column;gap:6px}
.cp-skel-line{
  height:12px;border-radius:6px;
  background:rgba(255,255,255,.08);
  animation:cpPulse 1.2s ease-in-out infinite;
}
.cp-skel-line:first-child{width:35%}
.cp-skel-line:nth-child(2){width:80%}
.cp-skel-line:last-child{width:55%}
@keyframes cpPulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* 더보기 */
.cp-load-more{
  padding:8px 16px 4px;
  text-align:center;
  flex-shrink:0;
}
.cp-load-more-btn{
  font-size:13px;
  padding:6px 18px;
}

/* 입력 영역 */
.cp-input-area{
  display:flex;gap:8px;align-items:center;
  padding:10px 16px 14px;
  border-top:1px solid var(--line,#223049);
  flex-shrink:0;
}
.cp-input{
  flex:1;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid var(--line,#223049);
  background:rgba(255,255,255,.05);
  color:var(--text,#e7eefc);
  font-size:14px;
  outline:none;
  transition:border-color .15s;
}
.cp-input:focus{
  border-color:var(--primary,#4c7dff);
}
.cp-input::placeholder{
  color:var(--muted,#9aa7bd);
}
.cp-submit-btn{
  flex-shrink:0;
  padding:9px 16px;
  border-radius:12px;
  border:none;
  background:var(--primary,#4c7dff);
  color:#fff;
  font-size:14px;font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.cp-submit-btn:hover{background:#3a6ae8}
.cp-submit-btn:disabled{opacity:.5;cursor:not-allowed}

/* 비로그인 안내 */
.cp-login-msg{
  text-align:center;
  padding:12px 16px 16px;
  color:var(--muted,#9aa7bd);
  font-size:13px;
  border-top:1px solid var(--line,#223049);
  flex-shrink:0;
}

/* PC: 중앙 모달 */
@media(min-width:521px){
  .cp-overlay{align-items:center}
  .cp-sheet{
    border-radius:18px;
    max-width:440px;
    transform:scale(.9);opacity:0;
    transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .24s ease;
  }
  .cp-visible .cp-sheet{
    transform:scale(1);opacity:1;
  }
}

/* ===================================================
   인라인 초대 링크 바 (play.html 대기실)
   =================================================== */
.lobby-invite-bar{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(76,125,255,.25);
  background:rgba(76,125,255,.06);
}
.lobby-invite-label{
  display:block;
  font-size:12px;font-weight:600;
  color:var(--muted,#9aa7bd);
  margin-bottom:6px;
}
.lobby-invite-row{
  display:flex;gap:8px;
}
.lobby-invite-input{
  flex:1;
  font-size:13px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line,#223049);
  background:rgba(255,255,255,.05);
  color:var(--text,#e7eefc);
  cursor:text;
  user-select:all;
  min-width:0;
}
.lobby-invite-input:focus{
  border-color:var(--primary,#4c7dff);
  outline:none;
}
.lobby-invite-copy{
  flex-shrink:0;
  padding:8px 16px;
  font-size:13px;
  border-radius:10px;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Reveal V2 (멀티 월드컵 reveal / finished 드라마틱 UI)
   prefix: .rv-*
   ═══════════════════════════════════════════════════════════ */

/* ── keyframes ── */
@keyframes rvGlow{
  0%{box-shadow:0 0 12px rgba(255,215,0,.12)}
  100%{box-shadow:0 0 28px rgba(255,215,0,.28)}
}
@keyframes rvSlideUp{
  0%{opacity:0;transform:translateY(20px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ── 진출 항목 카드 ── */
.rv-winner-card{
  border-radius:16px;padding:16px;
  background:linear-gradient(135deg,rgba(76,125,255,.12),rgba(255,215,0,.08));
  border:2px solid rgba(255,215,0,.5);
  box-shadow:0 0 20px rgba(255,215,0,.15);
  text-align:center;margin:0 auto 16px;max-width:320px;
  animation:rvGlow 1.5s ease-in-out infinite alternate;
}
.rv-winner-thumb{
  width:80px;height:80px;border-radius:14px;object-fit:cover;
  margin:0 auto 8px;display:block;
}
.rv-winner-name{font-size:18px;font-weight:700;margin-bottom:6px;color:#fff;}
.rv-winner-tag{
  display:inline-block;padding:3px 12px;border-radius:20px;
  font-size:12px;font-weight:700;
  background:rgba(255,215,0,.25);color:#ffd700;
}

/* ── 투표 막대 ── */
.rv-bar-wrap{
  display:flex;align-items:center;gap:8px;
  margin:8px 0;
}
.rv-bar-name{
  font-size:14px;font-weight:600;color:rgba(255,255,255,.8);
  min-width:0;max-width:40%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex-shrink:0;
}
.rv-bar{
  flex:1;height:28px;border-radius:10px;
  background:rgba(255,255,255,.06);overflow:hidden;position:relative;
}
.rv-bar-fill{
  height:100%;border-radius:10px;
  width:0;transition:width .7s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:8px;min-width:0;
}
.rv-bar-fill.a{background:linear-gradient(90deg,#4c7dff,#6ea8fe)}
.rv-bar-fill.b{background:linear-gradient(90deg,#ef4444,#f87171)}
.rv-bar-pct{
  font-size:15px;font-weight:700;color:#fff;
  white-space:nowrap;
}

/* ── 플레이어 카드 리스트 ── */
.rv-players{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:12px;
}
.rv-player-card{
  min-width:100px;flex:1;max-width:140px;
  padding:10px 8px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  text-align:center;position:relative;
}
.rv-player-card.rank-1{
  border-color:rgba(255,215,0,.6);
  box-shadow:0 0 12px rgba(255,215,0,.15);
}
.rv-player-card.rank-2{border-color:rgba(192,192,192,.5)}
.rv-player-card.rank-3{border-color:rgba(205,127,50,.5)}

/* ── 아바타 ── */
.rv-avatar{
  width:36px;height:36px;border-radius:50%;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);font-size:15px;font-weight:700;
  margin:0 auto 6px;
}
.rv-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.rv-avatar-initial{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:15px;font-weight:700;
}

/* ── 플레이어 카드 텍스트 ── */
.rv-player-name{
  font-size:12px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:rgba(255,255,255,.7);margin-bottom:2px;
}
.rv-player-score{
  font-size:20px;font-weight:800;color:var(--primary,#4c7dff);
}

/* ── 선택 칩 ── */
.rv-pick-chip{
  font-size:10px;padding:2px 6px;border-radius:6px;
  margin-top:4px;display:inline-block;
  max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(76,125,255,.2);color:rgba(255,255,255,.7);
}
.rv-pick-chip.b{background:rgba(239,68,68,.2)}
.rv-pick-chip.pass{background:rgba(255,255,255,.08);color:rgba(255,255,255,.4)}

/* ── 최종 결과 champion 카드 ── */
.rv-champion-card{
  border-radius:16px;padding:24px;
  max-width:360px;margin:0 auto 16px;text-align:center;
  background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(76,125,255,.1));
  border:2px solid rgba(255,215,0,.6);
  box-shadow:0 0 30px rgba(255,215,0,.2);
  animation:rvGlow 1.5s ease-in-out infinite alternate;
}
.rv-champion-crown{font-size:36px;line-height:1;margin-bottom:8px}
.rv-champion-thumb{
  width:100px;height:100px;border-radius:14px;object-fit:cover;
  margin:0 auto 10px;display:block;
}
.rv-champion-name{font-size:22px;font-weight:800;color:#fff}

/* ── 타이 뱃지 ── */
.rv-tie-badge{
  display:inline-block;padding:6px 16px;border-radius:20px;
  font-size:14px;font-weight:600;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
  margin:0 auto 12px;text-align:center;
  width:fit-content;
}

/* ── 애니메이션 클래스 ── */
.rv-animate-in{animation:rvSlideUp .4s ease-out both}

/* ── 반응형 ── */
@media(max-width:480px){
  .rv-player-card{min-width:80px;max-width:110px;padding:8px 6px}
  .rv-avatar{width:30px;height:30px;font-size:13px}
  .rv-player-score{font-size:17px}
  .rv-winner-thumb{width:64px;height:64px}
  .rv-champion-thumb{width:80px;height:80px}
  .rv-champion-card{padding:16px}
  .rv-bar-name{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════
   Quiz Reveal V2 — 비교 카드 레이아웃 (솔로+멀티 공용)
   prefix: .qr-rv-*
   ═══════════════════════════════════════════════════════════ */

/* ── 진행 정보 ── */
.qr-rv-progress{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;width:100%;max-width:480px;
}
.qr-rv-prog-label{
  font-size:13px;font-weight:700;color:rgba(255,255,255,.6);
  white-space:nowrap;flex-shrink:0;
}
.qr-rv-prog-bar{
  flex:1;height:6px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.qr-rv-prog-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#4c7dff,#6ea8fe);
  transition:width .4s ease;
}
.qr-rv-score-tag{
  font-size:12px;font-weight:700;color:var(--primary,#4c7dff);
  white-space:nowrap;flex-shrink:0;
}

/* ── 비교 카드 행 ── */
.qr-rv-cards{
  display:flex;gap:10px;width:100%;max-width:480px;
  animation:qrSlideUp .4s ease both .08s;
}

/* ── 각 카드 ── */
.qr-rv-card{
  flex:1;min-width:0;
  padding:14px 12px;border-radius:14px;
  text-align:center;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.qr-rv-card--correct{
  background:rgba(46,213,115,.08);
  border:1.5px solid rgba(46,213,115,.35);
}
.qr-rv-card--mine-ok{
  background:rgba(46,213,115,.08);
  border:1.5px solid rgba(46,213,115,.35);
}
.qr-rv-card--mine-wrong{
  background:rgba(255,76,106,.06);
  border:1.5px solid rgba(255,76,106,.3);
}
.qr-rv-card--mine-timeout{
  background:rgba(255,255,255,.03);
  border:1.5px solid rgba(255,255,255,.1);
}

/* 카드 라벨 (칩) */
.qr-rv-label{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:3px 10px;border-radius:20px;
  text-transform:uppercase;
}
.qr-rv-label--correct{
  background:rgba(46,213,115,.15);color:#2ed573;
}
.qr-rv-label--wrong{
  background:rgba(255,76,106,.13);color:#ff4c6a;
}
.qr-rv-label--timeout{
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);
}
.qr-rv-label--ok{
  background:rgba(46,213,115,.15);color:#2ed573;
}

/* 카드 답 텍스트 */
.qr-rv-answer{
  font-size:20px;font-weight:800;line-height:1.3;
  word-break:keep-all;overflow-wrap:break-word;
  max-width:100%;
}
.qr-rv-card--correct .qr-rv-answer{color:#fff}
.qr-rv-card--mine-ok .qr-rv-answer{color:#2ed573}
.qr-rv-card--mine-wrong .qr-rv-answer{color:#ff6b81}
.qr-rv-card--mine-timeout .qr-rv-answer{color:rgba(255,255,255,.35)}

/* ── 결과 배지 (큰 아이콘) ── */
.qr-rv-result-icon{
  font-size:40px;line-height:1;
  animation:qrBadgePop .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── 점수 칩 (개선) ── */
.qr-rv-score{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.55);
  margin-top:4px;
}
.qr-rv-score b{color:var(--primary,#4c7dff);font-size:15px}

/* ── CTA 정리 ── */
.qr-rv-cta{
  display:flex;align-items:center;gap:10px;
  margin-top:10px;width:100%;max-width:480px;
  justify-content:center;
}

/* ── 멀티 통계/플레이어 답변 (기존 유지, 간격 조절) ── */
.qr-rv-stats-section{
  width:100%;max-width:480px;margin-top:10px;
}

/* ── 반응형 ── */
@media(max-width:480px){
  .qr-rv-cards{flex-direction:column;gap:8px}
  .qr-rv-answer{font-size:17px}
  .qr-rv-result-icon{font-size:32px}
  .qr-rv-progress{gap:6px}
}

/* ═══════════════════════════════════════════════════════════
   Multi Quiz Reveal V2 — 플레이어 결과 카드 + 미니 스코어보드
   prefix: .qr-mq-*
   ═══════════════════════════════════════════════════════════ */

/* ── 진행 헤더 (라운드 + 상태) ── */
.qr-mq-header{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:540px;margin:0 auto 8px;
}
.qr-mq-round{
  font-size:13px;font-weight:700;color:rgba(255,255,255,.6);
  white-space:nowrap;flex-shrink:0;
}
.qr-mq-prog-bar{
  flex:1;height:5px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.qr-mq-prog-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#4c7dff,#6ea8fe);
  transition:width .4s ease;
}
.qr-mq-status{
  font-size:11px;font-weight:700;letter-spacing:.3px;
  padding:3px 10px;border-radius:20px;
  white-space:nowrap;flex-shrink:0;
  background:rgba(46,213,115,.12);color:#2ed573;
}

/* ── 플레이어 결과 카드 리스트 ── */
.qr-mq-players{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  width:100%;max-width:540px;margin:10px auto 0;
  animation:qrSlideUp .4s ease both .15s;
}
.qr-mq-player{
  min-width:110px;flex:1;max-width:150px;
  padding:10px 8px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.08);
  text-align:center;position:relative;
  transition:border-color .3s,box-shadow .3s;
}
.qr-mq-player.is-correct{
  border-color:rgba(46,213,115,.4);
  box-shadow:0 0 12px rgba(46,213,115,.1);
}
.qr-mq-player.is-wrong{
  border-color:rgba(255,76,106,.25);
}
.qr-mq-player.is-timeout{
  border-color:rgba(255,255,255,.06);
  opacity:.7;
}

/* 아바타 (rv-avatar 재활용) */
.qr-mq-player .rv-avatar{margin:0 auto 5px}

/* 닉네임 */
.qr-mq-pname{
  font-size:12px;font-weight:600;color:rgba(255,255,255,.8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:3px;
}

/* 답변 칩 */
.qr-mq-ans-chip{
  display:inline-block;
  font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:6px;
  max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qr-mq-ans-chip.correct{background:rgba(46,213,115,.18);color:#2ed573}
.qr-mq-ans-chip.wrong{background:rgba(255,76,106,.15);color:#ff6b81}
.qr-mq-ans-chip.timeout{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35)}

/* 점수 변화 */
.qr-mq-delta{
  font-size:13px;font-weight:800;margin-top:3px;
}
.qr-mq-delta.plus{color:#2ed573;animation:qrMqBounce .5s ease both .3s}
.qr-mq-delta.zero{color:rgba(255,255,255,.25)}
@keyframes qrMqBounce{
  0%{transform:scale(1)}
  40%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

/* ── 미니 스코어보드 (접이식) ── */
.qr-mq-scoreboard{
  width:100%;max-width:540px;margin:12px auto 0;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}
.qr-mq-sb-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;cursor:pointer;
  user-select:none;transition:background .15s;
}
.qr-mq-sb-toggle:hover{background:rgba(255,255,255,.03)}
.qr-mq-sb-toggle-label{
  font-size:13px;font-weight:700;color:rgba(255,255,255,.6);
}
.qr-mq-sb-toggle-arrow{
  font-size:12px;color:rgba(255,255,255,.35);
  transition:transform .2s;
}
.qr-mq-scoreboard.open .qr-mq-sb-toggle-arrow{transform:rotate(180deg)}
.qr-mq-sb-list{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;
}
.qr-mq-scoreboard.open .qr-mq-sb-list{max-height:400px}
.qr-mq-sb-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 14px;
  font-size:13px;
  border-top:1px solid rgba(255,255,255,.04);
}
.qr-mq-sb-rank{
  width:22px;text-align:center;font-weight:800;
  color:rgba(255,255,255,.35);flex-shrink:0;
}
.qr-mq-sb-rank.r1{color:#ffd700}
.qr-mq-sb-rank.r2{color:#c0c0c0}
.qr-mq-sb-rank.r3{color:#cd7f32}
.qr-mq-sb-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:rgba(255,255,255,.8);
}
.qr-mq-sb-score{
  font-weight:800;color:var(--primary,#4c7dff);flex-shrink:0;
}
.qr-mq-sb-delta{
  font-size:11px;font-weight:700;flex-shrink:0;min-width:28px;text-align:right;
}
.qr-mq-sb-delta.plus{color:#2ed573}
.qr-mq-sb-delta.zero{color:rgba(255,255,255,.15)}

/* ── 최종 결과: 플레이어 카드 (rv-player 재활용 + 확장) ── */
.qr-mq-final-players{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  width:100%;max-width:540px;margin:12px auto 0;
}
.qr-mq-final-card{
  min-width:110px;flex:1;max-width:150px;
  padding:12px 8px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.08);
  text-align:center;
}
.qr-mq-final-card.rank-1{
  border-color:rgba(255,215,0,.5);
  box-shadow:0 0 14px rgba(255,215,0,.12);
}
.qr-mq-final-card.rank-2{border-color:rgba(192,192,192,.4)}
.qr-mq-final-card.rank-3{border-color:rgba(205,127,50,.4)}
.qr-mq-final-score{
  font-size:22px;font-weight:800;color:var(--primary,#4c7dff);
}
.qr-mq-final-label{
  font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;
}

/* ── 반응형 ── */
@media(max-width:480px){
  .qr-mq-player{min-width:90px;max-width:120px;padding:8px 6px}
  .qr-mq-player .rv-avatar{width:28px;height:28px;font-size:12px}
  .qr-mq-final-card{min-width:90px;max-width:120px}
  .qr-mq-final-score{font-size:18px}
  .qr-mq-header{gap:6px}
}

/* ── 멀티 스코어보드 내 애니메이션 비활성화 ── */
#quizScoreRevealCard .qr-mq-players,
#quizScoreRevealCard .qr-rv-result-icon{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}
/* 기존 "점수판" 텍스트 숨김 (미니 스코어보드가 대체) */
#quizScoreboardPanel > b{ display:none; }

/* ── 멀티 퀴즈: 통합 카드 (정답+내답 한 장) ── */
.qr-rv-unified-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.qr-rv-unified-row:last-child{border-bottom:none}
.qr-rv-unified-label{
  flex:0 0 auto;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.5);white-space:nowrap;
}
.qr-rv-unified-label.ok{color:#22c55e}
.qr-rv-unified-label.wrong{color:#ef4444}
.qr-rv-unified-label.muted{color:rgba(255,255,255,.3)}
.qr-rv-unified-text{
  flex:1;font-size:15px;font-weight:700;
  color:rgba(255,255,255,.9);
  overflow:hidden;text-overflow:ellipsis;
}
.qr-rv-unified-text.ok{color:#22c55e}
.qr-rv-unified-text.wrong{color:#ef4444}
.qr-rv-unified-text.muted{color:rgba(255,255,255,.3);font-weight:400}

/* ── 멀티 퀴즈: "나" 태그 + 본인 카드 강조 ── */
.qr-mq-me-tag{
  display:inline-block;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:4px;margin-left:3px;
  background:rgba(76,125,255,.3);color:#6ea8fe;
  vertical-align:middle;line-height:1.4;
}
.qr-mq-player.is-me{
  border-color:rgba(76,125,255,.45);
  box-shadow:0 0 8px rgba(76,125,255,.15);
}

/* ── 벌크 업로드 모달 (tier-play) ── */
.bulk-upload-modal-box{max-width:520px;}
.bulk-upload-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:16px;
}
.bulk-tab{
  flex:1;padding:10px 0;
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.bulk-tab:hover{color:var(--text);}
.bulk-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.bulk-drop-zone{
  border:2px dashed var(--line);border-radius:12px;
  min-height:140px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-align:center;padding:20px;
  transition:border-color .2s,background .2s;margin-bottom:12px;
}
.bulk-drop-zone:hover,.bulk-drop-zone.dragover{
  border-color:var(--primary);background:rgba(76,125,255,.06);
}
.bulk-drop-msg{color:var(--muted);font-size:14px;line-height:1.6;}
.bulk-file-list{
  max-height:300px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:12px;
}
.bulk-file-item{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.03);
}
.bulk-file-thumb{
  width:60px;height:60px;object-fit:cover;border-radius:6px;flex-shrink:0;
  background:#0f1624;
}
.bulk-file-item .input{flex:1;padding:7px 10px;font-size:13px;}
.bulk-file-remove{
  background:none;border:none;color:var(--danger);font-size:18px;
  cursor:pointer;padding:4px 6px;flex-shrink:0;line-height:1;
}
.bulk-file-remove:hover{opacity:.7;}
.bulk-file-list:empty{display:none;}
/* pool file drop highlight (tier-play) */
.tier-pool.tier-pool-filedrop{
  outline:2px dashed var(--primary);outline-offset:4px;border-radius:8px;
  background:rgba(76,125,255,.06);
}

/* ==========================================================
   게임 체감 UX — Feature 1: Quiz Multi Live Scoreboard
   ========================================================== */
.qs-board{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.qs-row{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s;
  will-change:transform;
}
.qs-row.qs-me{border-color:var(--primary);background:rgba(76,125,255,.10)}
.qs-rank{
  width:22px;text-align:center;font-weight:800;font-size:14px;
  color:rgba(255,255,255,.5);flex-shrink:0;
}
.qs-rank-1{color:#ffd700}
.qs-rank-2{color:#c0c0c0}
.qs-rank-3{color:#cd7f32}
.qs-name{
  width:72px;font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;
}
.qs-bar-wrap{flex:1;height:22px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden;position:relative}
.qs-bar-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--primary),#a78bfa);
  transition:width .6s ease-out;min-width:0;
}
.qs-row.qs-me .qs-bar-fill{background:linear-gradient(90deg,#4c7dff,#60a5fa)}
.qs-score{
  width:36px;text-align:right;font-size:15px;font-weight:800;color:#fff;flex-shrink:0;
}
.qs-delta{
  font-size:11px;font-weight:700;color:#4ade80;
  animation:qsDeltaPop .4s ease-out;
  min-width:24px;text-align:center;flex-shrink:0;
}
.qs-delta-zero{color:rgba(255,255,255,.3)}
@keyframes qsDeltaPop{
  0%{transform:scale(.5) translateY(6px);opacity:0}
  60%{transform:scale(1.2) translateY(-2px);opacity:1}
  100%{transform:scale(1) translateY(0)}
}
.qs-lead-change{
  text-align:center;padding:4px 0;font-size:13px;font-weight:700;
  color:#ffd700;animation:qsLeadPop .5s ease-out;
}
@keyframes qsLeadPop{
  0%{transform:scale(.6);opacity:0}
  50%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}

/* ==========================================================
   게임 체감 UX — Feature 2: Worldcup Multi Profile Card Reveal
   ========================================================== */
.wc-picks-grid{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;justify-content:center;
}
.wc-pick-group{
  flex:1;min-width:120px;max-width:200px;
  border-radius:10px;padding:8px;
  display:flex;flex-direction:column;gap:5px;
}
.wc-pick-group-a{background:rgba(76,125,255,.10);border:1px solid rgba(76,125,255,.20)}
.wc-pick-group-b{background:rgba(255,76,106,.10);border:1px solid rgba(255,76,106,.20)}
.wc-pick-group-pass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.wc-pick-group-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:2px;text-align:center;
}
.wc-pick-group-a .wc-pick-group-label{color:var(--primary)}
.wc-pick-group-b .wc-pick-group-label{color:#ff4c6a}
.wc-pick-group-pass .wc-pick-group-label{color:var(--muted)}
.wc-pick-card{
  display:flex;align-items:center;gap:6px;padding:4px 6px;
  border-radius:6px;background:rgba(255,255,255,.05);
  animation:wcPickSlide .35s ease-out both;
}
.wc-pick-card:nth-child(2){animation-delay:.06s}
.wc-pick-card:nth-child(3){animation-delay:.12s}
.wc-pick-card:nth-child(4){animation-delay:.18s}
.wc-pick-card:nth-child(5){animation-delay:.24s}
@keyframes wcPickSlide{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}
.wc-pick-group-b .wc-pick-card{animation-name:wcPickSlideR}
@keyframes wcPickSlideR{
  from{opacity:0;transform:translateX(10px)}
  to{opacity:1;transform:translateX(0)}
}
.wc-pick-avatar{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.1);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.6);
}
.wc-pick-name{font-size:12px;color:#fff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-pick-badge{
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;
  margin-left:auto;white-space:nowrap;flex-shrink:0;
}
.wc-pick-badge-majority{background:rgba(74,222,128,.15);color:#4ade80}
.wc-pick-badge-minority{background:rgba(250,204,21,.15);color:#facc15}

/* ==========================================================
   게임 체감 UX — Feature 3: Quiz Solo Streak Counter
   ========================================================== */
.streak-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:15px;font-weight:800;color:#ff8c00;
  padding:4px 12px;border-radius:20px;
  background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.25);
  animation:streakPop .4s cubic-bezier(.34,1.56,.64,1);
  margin:6px 0;
}
.streak-badge-big{
  font-size:18px;color:#ff4500;
  background:rgba(255,69,0,.15);border-color:rgba(255,69,0,.3);
  animation:streakPop .4s cubic-bezier(.34,1.56,.64,1),streakGlow 1s ease-in-out infinite alternate;
}
@keyframes streakPop{
  0%{transform:scale(.4);opacity:0}
  70%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
@keyframes streakGlow{
  from{box-shadow:0 0 6px rgba(255,69,0,.3)}
  to{box-shadow:0 0 16px rgba(255,69,0,.5)}
}
.streak-break{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:700;color:var(--danger);
  padding:3px 10px;border-radius:16px;
  background:rgba(255,76,106,.10);
  animation:streakBreak .35s ease-out;
  margin:4px 0;
}
@keyframes streakBreak{
  0%{transform:scale(1.2);opacity:1}
  100%{transform:scale(.9);opacity:.7}
}

/* 정답 pulse background */
.quiz-correct-pulse{
  animation:correctPulse .5s ease-out;
}
@keyframes correctPulse{
  0%{background:rgba(74,222,128,.18)}
  100%{background:transparent}
}

/* PERFECT endcard badge */
.streak-perfect-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:22px;font-weight:900;
  background:linear-gradient(135deg,#ffd700,#ff8c00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin:8px 0 4px;
  animation:perfectBounce .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes perfectBounce{
  0%{transform:scale(0) rotate(-10deg);opacity:0}
  60%{transform:scale(1.2) rotate(3deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* ==========================================================
   게임 체감 UX — Feature 4: Worldcup Champion Sequence
   ========================================================== */
/* Stage 1: 결과 발표 텍스트 */
.champ-announce{
  text-align:center;font-size:18px;font-weight:800;
  color:rgba(255,255,255,.9);letter-spacing:2px;
  text-transform:uppercase;
  animation:champFadeIn .6s ease-out;
}
@keyframes champFadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Stage 2: champion image spring */
.champ-media-enter{animation:champSpring .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes champSpring{
  0%{transform:scale(.5);opacity:0}
  100%{transform:scale(1);opacity:1}
}
/* Crown */
.champ-crown{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:32px;
  animation:crownDrop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
  z-index:2;filter:drop-shadow(0 2px 6px rgba(255,215,0,.5));
}
@keyframes crownDrop{
  0%{transform:translateX(-50%) translateY(-20px) scale(.5);opacity:0}
  100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
}

/* Stage 3: name wipe + glow */
.champ-name-wipe{
  animation:nameWipe .5s ease-out both;
  text-shadow:0 0 20px rgba(255,215,0,.6);
}
@keyframes nameWipe{
  0%{clip-path:inset(0 100% 0 0);opacity:0}
  100%{clip-path:inset(0 0 0 0);opacity:1}
}

/* Player stagger */
.end-player-item.champ-stagger{
  opacity:0;animation:champPlayerIn .35s ease-out both;
}
@keyframes champPlayerIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
/* 1st place gold (enhanced in quiz feedback section) */
.end-player-item.champ-first{
  border-color:rgba(255,215,0,.5);
  background:linear-gradient(135deg,rgba(255,215,0,.10),rgba(255,160,0,.06));
  transform:scale(1.03);
  box-shadow:0 0 16px rgba(255,215,0,.15);
}

/* ==========================================================
   CSS Confetti (공용 — Feature 3 & 4)
   ========================================================== */
.confetti-container{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:10;
}
.confetti-particle{
  position:absolute;top:-10px;
  width:8px;height:8px;border-radius:2px;
  animation:confettiFall var(--cft-dur,2.2s) ease-in forwards;
  animation-delay:var(--cft-delay,0s);
  opacity:.9;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg) scale(1);opacity:.9}
  80%{opacity:.7}
  100%{transform:translateY(var(--cft-dist,400px)) rotate(var(--cft-rot,720deg)) scale(.4);opacity:0}
}

/* ==========================================================
   타이머 긴박감 (Timer Urgency)
   ========================================================== */

/* --- 10초 이하: 주의 --- */
.wc-timer-badge.timer-urgent{
  border-color:rgba(255,152,0,.6);
  background:rgba(255,152,0,.12);
  color:#ffb74d;
  animation:timerPulse 1s ease-in-out infinite;
}
.wc-timer-badge.timer-urgent b{
  color:#ffb74d;
}

/* --- 5초 이하: 위험 --- */
.wc-timer-badge.timer-critical{
  border-color:rgba(255,76,106,.7);
  background:rgba(255,76,106,.14);
  color:#ff6b81;
  animation:timerPulse .5s ease-in-out infinite;
  font-weight:800;
}
.wc-timer-badge.timer-critical b{
  color:#ff6b81;
  font-size:110%;
}

@keyframes timerPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 transparent}
  50%{transform:scale(1.08);box-shadow:0 0 12px rgba(255,76,106,.3)}
}

/* 진행바: 긴박 색상 */
.wc-progress-fill.prog-urgent{
  background:linear-gradient(90deg,#ff9800,#ff5722);
  transition:width .3s ease, background .3s ease;
}
.wc-progress-fill.prog-critical{
  background:linear-gradient(90deg,#ff5252,#d50000);
  transition:width .3s ease, background .3s ease;
  animation:progFlash .6s ease-in-out infinite;
}
@keyframes progFlash{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* 정답 공개 미디어 래퍼 */
.qr-reveal-media-wrap{
  text-align:center;
  margin:8px auto 6px;
  max-width:480px;
}
.qr-reveal-media-wrap img,
.qr-reveal-media-wrap video{
  display:block;
  margin:0 auto;
  border:1px solid rgba(255,255,255,.1);
  background:#0a0a14;
}

/* 엔딩 카드: 최대 스트릭 스탯 */
.end-stat-streak .end-stat-value{
  color:#ffb74d;
}

/* ==========================================================
   prefers-reduced-motion 오버라이드 (전체)
   ========================================================== */
@media(prefers-reduced-motion:reduce){
  .qs-row{transition:none !important}
  .qs-delta,.qs-lead-change{animation:none !important}
  .wc-pick-card{animation:none !important}
  .streak-badge,.streak-badge-big,.streak-break{animation:none !important}
  .streak-perfect-badge{animation:none !important}
  .quiz-correct-pulse{animation:none !important}
  .champ-announce,.champ-media-enter,.champ-crown,.champ-name-wipe{animation:none !important;opacity:1 !important;transform:none !important}
  .champ-crown{transform:translateX(-50%) !important}
  .end-player-item.champ-stagger{animation:none !important;opacity:1 !important}
  .confetti-particle{animation:none !important;display:none !important}
}

/* ==========================================================
   Feature 5: 싸움터 라이브 피드
   ========================================================== */
/* A) 실시간 반응 스트립 */
.arena-live-strip{
  overflow:hidden;height:32px;position:relative;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;margin-bottom:12px;
}
.arena-live-track{
  display:flex;flex-direction:column;
  transition:transform .5s ease-in-out;
}
.arena-live-item{
  height:32px;display:flex;align-items:center;gap:6px;
  padding:0 12px;font-size:12px;color:rgba(255,255,255,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arena-live-dot{
  width:6px;height:6px;border-radius:50%;background:#4ade80;
  flex-shrink:0;animation:arenaDotPulse 1.5s ease-in-out infinite;
}
@keyframes arenaDotPulse{0%,100%{opacity:.5}50%{opacity:1}}
.arena-live-nick{font-weight:700;color:var(--primary)}
.arena-live-time{color:var(--muted);margin-left:auto;flex-shrink:0}

/* B) 최근 1h delta 뱃지 */
.arena-delta-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#ff8c00;
  padding:2px 6px;border-radius:6px;
  background:rgba(255,140,0,.12);
  animation:arenaDeltaPop .3s ease-out;
}
@keyframes arenaDeltaPop{
  0%{transform:scale(.5);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.arena-pill-fire.arena-fire-pulse{
  animation:arenaFirePulse .8s ease-in-out;
}
@keyframes arenaFirePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}

/* C) 주간 TOP 3 */
.arena-top-medal{
  position:absolute;top:6px;left:6px;z-index:2;
  font-size:16px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.arena-verdict-wrapper.arena-top-1{
  border:1.5px solid rgba(255,215,0,.35);border-radius:14px;
  background:rgba(255,215,0,.04);
}
.arena-verdict-wrapper.arena-top-2{
  border:1.5px solid rgba(192,192,192,.25);border-radius:14px;
  background:rgba(192,192,192,.03);
}
.arena-verdict-wrapper.arena-top-3{
  border:1.5px solid rgba(205,127,50,.25);border-radius:14px;
  background:rgba(205,127,50,.03);
}

/* D) MY 뱃지 */
.arena-my-badge{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:800;color:#fff;
  background:var(--primary);padding:2px 6px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.5px;
}

/* ==========================================================
   Feature 6: 티어 플레이 카드 프리뷰 라이트박스
   ========================================================== */
.tier-lightbox{
  position:fixed;z-index:5000;
  width:240px;padding:10px;
  background:rgba(22,20,40,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:tierLbIn .2s ease-out;
  pointer-events:auto;
}
@keyframes tierLbIn{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
.tier-lightbox-img{
  width:220px;height:220px;object-fit:contain;
  border-radius:10px;background:#111;display:block;margin:0 auto;
}
.tier-lightbox-label{
  font-size:14px;font-weight:700;color:#fff;
  text-align:center;margin-top:8px;word-break:keep-all;
}
.tier-lightbox-actions{
  display:flex;gap:6px;margin-top:8px;justify-content:center;
}
.tier-lightbox-btn{
  font-size:11px;padding:5px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  color:var(--text);cursor:pointer;font-weight:600;
  transition:background .15s;
}
.tier-lightbox-btn:hover{background:rgba(255,255,255,.12)}

/* ==========================================================
   Undo / Redo / 전체 초기화 버튼
   ========================================================== */
.tier-undo-group{
  display:flex;gap:4px;align-items:center;
}
.tier-undo-btn{
  font-size:12px!important;
  padding:4px 8px!important;
  min-width:auto!important;
  white-space:nowrap;
  border-radius:6px;
}
.tier-undo-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.tier-reset-btn{
  color:var(--warn, #f59e0b)!important;
}
@media(max-width:600px){
  .tier-undo-group{
    order:10;width:100%;justify-content:center;margin-top:4px;
  }
  .tier-undo-btn{font-size:11px!important;padding:3px 6px!important;}
}

/* ==========================================================
   Feature 7: 멀티 응답 진행 상황
   ========================================================== */
.mp-progress{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  margin-top:8px;
}
.mp-avatars{display:flex;gap:6px;flex-wrap:wrap}
.mp-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.1);
  position:relative;transition:opacity .3s,border-color .3s;
}
.mp-avatar.mp-done{
  opacity:1;border-color:#4ade80;
}
.mp-avatar.mp-waiting{
  opacity:.4;
}
.mp-avatar-check{
  position:absolute;bottom:-2px;right:-2px;
  width:14px;height:14px;border-radius:50%;
  background:#4ade80;color:#000;font-size:9px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  animation:mpCheckPop .3s ease-out;
}
@keyframes mpCheckPop{
  0%{transform:scale(0)}100%{transform:scale(1)}
}
.mp-avatar-dots{
  position:absolute;bottom:-2px;right:-2px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.15);
  font-size:8px;line-height:14px;text-align:center;
  color:rgba(255,255,255,.6);
  animation:mpDotsFlash 1.2s ease-in-out infinite;
}
@keyframes mpDotsFlash{
  0%,100%{opacity:.3}50%{opacity:1}
}
.mp-counter{
  font-size:13px;font-weight:700;color:rgba(255,255,255,.7);
  white-space:nowrap;
}
.mp-counter b{color:#4ade80}
.mp-last-one{
  font-size:12px;font-weight:700;color:#facc15;
  animation:mpLastPulse .8s ease-in-out infinite alternate;
}
@keyframes mpLastPulse{from{opacity:.7}to{opacity:1}}

/* ==========================================================
   Feature 8: 싸움터 알림 뱃지
   ========================================================== */
.nav-noti-dot{
  position:absolute;top:2px;right:2px;
  width:8px;height:8px;border-radius:50%;
  background:#ff4c6a;
  animation:notiDotPulse 2s ease-in-out infinite;
}
@keyframes notiDotPulse{0%,100%{opacity:1}50%{opacity:.5}}
.arena-noti-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#4ade80;
  padding:1px 5px;border-radius:4px;
  background:rgba(74,222,128,.1);
  white-space:nowrap;margin-left:4px;
}

/* 드롭다운 알림 배지 */
.noti-count-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#ff4c6a;
  color:#fff;font-size:11px;font-weight:700;
  margin-left:auto;
}

/* ==========================================================
   알림 페이지
   ========================================================== */
.noti-page{
  max-width:680px;margin:0 auto;
  padding-top:20px;padding-bottom:40px;
}

/* 페이지 헤더 (제목 + 모두읽음) */
.noti-page-header{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-bottom:14px;padding:0 4px;
  flex-wrap:wrap;gap:8px;
}
.noti-page-title{margin:0;font-size:20px;font-weight:800;}
.noti-mark-read-btn{font-size:13px;padding:6px 12px;}

/* 본문 카드 */
.noti-card{
  min-height:320px;
  display:flex;flex-direction:column;
}
.noti-card--empty{
  min-height:360px;
  align-items:center;justify-content:center;
}

/* 빈/로딩/에러 상태 공통 */
.noti-state{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;gap:4px;
  flex:1;padding:48px 16px;
}
.noti-empty-inner{
  display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:4px;
  padding:24px 16px;
}
.noti-empty-icon{font-size:44px;margin-bottom:8px;}
.noti-empty-inner h2,.noti-state p:first-of-type{
  margin:0 0 2px;font-size:16px;
}

/* 알림 리스트 */
.noti-list{
  display:flex;flex-direction:column;gap:1px;
}
.noti-list:empty{display:none;}

.noti-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  text-decoration:none;color:var(--text);
  transition:background .15s;
  border-left:3px solid transparent;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.noti-item:last-child{border-bottom:none;}
.noti-item:hover{background:rgba(255,255,255,.04);}
.noti-item--unread{
  border-left-color:var(--primary);
  background:rgba(99,102,241,.07);
}

.noti-item-avatar{flex-shrink:0;}
.noti-item-body{flex:1;min-width:0;}
.noti-item-msg{font-size:14px;line-height:1.45;}
.noti-item-msg strong{font-weight:700;}
.noti-item-preview{
  font-size:13px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.noti-item-time{font-size:12px;margin-top:4px;}
.noti-item-actions{
  flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;gap:6px;padding-top:2px;
}
.noti-item-type{font-size:18px;}
.noti-item-play-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;
  background:rgba(255,255,255,.06);color:var(--muted);
  font-size:11px;text-decoration:none;
  transition:background .15s, color .15s;
}
.noti-item-play-btn:hover{background:var(--primary);color:#fff;}

@media(max-width:600px){
  .noti-page{padding-top:12px;padding-bottom:24px;}
  .noti-page-header{padding:0 2px;}
  .noti-page-title{font-size:18px;}
  .noti-item{padding:12px 12px;gap:10px;}
}

/* ==========================================================
   Feature 9: 퀴즈 솔로 정답/오답 마이크로 애니메이션
   ========================================================== */
.quiz-correct-banner{
  font-size:18px;font-weight:800;color:#4ade80;
  padding:10px 16px;border-radius:12px;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.25);
  text-align:center;margin:8px 0;
  animation:qzCorrectBounce .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes qzCorrectBounce{
  0%{transform:scale(.8);opacity:0}
  60%{transform:scale(1.05)}
  100%{transform:scale(1);opacity:1}
}
.quiz-wrong-banner{
  font-size:18px;font-weight:800;color:#ff4c6a;
  padding:10px 16px;border-radius:12px;
  background:rgba(255,76,106,.12);border:1px solid rgba(255,76,106,.25);
  text-align:center;margin:8px 0;
  animation:qzWrongShake .3s ease-out;
}
@keyframes qzWrongShake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
  100%{transform:translateX(0)}
}
/* 정답 배경 플래시 */
.qz-flash-correct{animation:qzFlashGreen .25s ease-out}
@keyframes qzFlashGreen{
  0%{background:rgba(74,222,128,.15)}
  100%{background:transparent}
}
/* 오답 배경 플래시 */
.qz-flash-wrong{animation:qzFlashRed .25s ease-out}
@keyframes qzFlashRed{
  0%{background:rgba(255,76,106,.12)}
  100%{background:transparent}
}
/* MCQ 선택 버튼: 정답 glow */
body[data-page="play"] .quiz-choice.qz-choice-correct{
  border-color:rgba(74,222,128,.9) !important;
  background:rgba(74,222,128,.15) !important;
  box-shadow:0 0 12px rgba(74,222,128,.3);
}
/* MCQ 선택 버튼: 오답 */
body[data-page="play"] .quiz-choice.qz-choice-wrong{
  border-color:rgba(255,76,106,.9) !important;
  background:rgba(255,76,106,.12) !important;
  position:relative;
}
body[data-page="play"] .quiz-choice.qz-choice-wrong::after{
  content:"✕";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:18px;font-weight:900;color:#ff4c6a;
}
/* 정답 옵션 pulse (오답 시 정답 강조) */
body[data-page="play"] .quiz-choice.qz-choice-reveal{
  animation:qzRevealPulse .5s ease-out .3s both;
}
@keyframes qzRevealPulse{
  0%{box-shadow:0 0 0 rgba(74,222,128,0)}
  50%{box-shadow:0 0 16px rgba(74,222,128,.4)}
  100%{box-shadow:0 0 6px rgba(74,222,128,.15)}
}

/* Feature 9: reduced-motion */
@media(prefers-reduced-motion:reduce){
  .quiz-correct-banner,.quiz-wrong-banner{animation:none !important}
  .qz-flash-correct,.qz-flash-wrong{animation:none !important}
  .qz-choice-reveal{animation:none !important}
  .arena-live-track{transition:none !important}
  .arena-delta-badge{animation:none !important}
  .arena-fire-pulse{animation:none !important}
  .tier-lightbox{animation:none !important}
  .mp-avatar-check{animation:none !important}
  .mp-last-one{animation:none !important}
  .nav-noti-dot{animation:none !important}
  .wc-timer-badge.timer-urgent,.wc-timer-badge.timer-critical{animation:none !important}
  .wc-progress-fill.prog-critical{animation:none !important}
}

/* ── 멀티 로비 카드 레이아웃 ── */
/* ── Room: 메인 카드 레이아웃 ── */
.room-container{
  max-width:640px;
  margin:0 auto;
  padding:24px 16px 32px;
}
.room-resume-banner{
  text-align:center;
  padding:10px 16px;
  background:rgba(76,125,255,.08);
  border:1px solid rgba(76,125,255,.2);
  border-radius:12px;
  font-size:13px;
  margin-bottom:12px;
}
.room-main-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.room-main-header{
  padding:20px 24px 0;
}
.room-page-header{
  margin-bottom:14px;
}
.room-page-title{
  font-size:22px;
  font-weight:700;
  margin:0;
}
.room-page-sub{
  font-size:13px;
  color:var(--muted);
  margin:4px 0 0;
}
.room-main-body{
  padding:0 24px 24px;
  gap:0;
}
/* 섹션 구분선 + 내부 구조 */
.room-section{
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.room-section:last-of-type{
  border-bottom:none;
}
.room-section-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.room-section-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
}
.room-section-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.room-field-label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:4px;
}
.room-sub-option{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
/* 고급 설정 (접힘) */
.room-advanced{
  border-bottom:none;
  padding:0;
}
.room-advanced-summary{
  cursor:pointer;
  list-style:none;
  padding:14px 0;
  user-select:none;
  margin-bottom:0;
}
.room-advanced-summary::-webkit-details-marker{display:none}
.room-advanced-arrow{
  margin-left:auto;
  font-size:14px;
  color:var(--muted);
  transition:transform .2s;
}
details.room-advanced[open] .room-advanced-arrow{
  transform:rotate(180deg);
}
.room-advanced-body{
  padding:0 0 8px;
}
/* CTA 버튼 */
.room-cta-btn{
  display:block;
  width:100%;
  padding:14px 0;
  border:none;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  margin-top:10px;
  transition:opacity .2s, transform .1s;
}
.room-cta-btn:hover:not(:disabled){
  opacity:.9;
}
.room-cta-btn:active:not(:disabled){
  transform:scale(.98);
}
.room-cta-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
/* ── 콘텐츠 선택 카드 UI ── */
.room-content-empty{
  text-align:center;
  padding:24px 16px;
  border:2px dashed rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.room-content-empty-icon{
  font-size:36px;
  margin-bottom:8px;
}
.room-content-empty-text{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin:0 0 4px;
}
.room-content-empty-sub{
  font-size:12px;
  color:var(--muted);
  margin:0 0 14px;
  line-height:1.4;
}
.room-content-loading{
  text-align:center;
  padding:24px 16px;
  color:var(--muted);
  font-size:13px;
}
.room-content-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.room-content-thumb-wrap{
  flex-shrink:0;
  width:80px;
  height:56px;
  border-radius:10px;
  overflow:hidden;
  background:#1a1a1a;
}
.room-content-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}
.room-content-info{
  flex:1;
  min-width:0;
}
.room-content-type-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  background:#ff6b8a;
  margin-bottom:4px;
}
.room-content-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}
.room-content-desc{
  font-size:12px;
  color:var(--muted);
  margin:2px 0 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-all;
}
.room-content-change-btn{
  flex-shrink:0;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.room-content-change-btn:hover{
  border-color:var(--primary);
  color:var(--primary);
}
/* 직접 ID 입력 (고급) */
.room-manual-id{
  margin-top:10px;
}
.room-manual-id-summary{
  font-size:12px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.room-manual-id-summary::-webkit-details-marker{display:none}
.room-manual-id-summary::before{
  content:"▸ ";
  font-size:10px;
}
.room-manual-id[open] .room-manual-id-summary::before{
  content:"▾ ";
}
.room-manual-id-body{
  margin-top:6px;
}
.room-manual-id-body .lobby-input-group{
  min-width:0;
}
.room-manual-id-body .input{
  min-width:0;
}

/* ── 설정 그리드 (PC: 2컬럼) ── */
.room-settings-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.room-settings-col{
  padding:0;
}
.room-settings-col + .room-settings-col{
  margin-top:14px;
}
/* room-content-section inherits border-bottom from .room-section */
@media(min-width:768px){
  .room-container{
    max-width:680px;
  }
  .room-settings-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:0 28px;
  }
  .room-settings-col{
    min-width:0;
    padding:0;
  }
  .room-settings-col + .room-settings-col{
    margin-top:0;
  }
  .room-settings-col:first-child{
    border-right:1px solid rgba(255,255,255,.06);
    padding-right:28px;
  }
}
@media(max-width:600px){
  .room-container{padding:16px 10px 24px}
  .room-main-header{padding:16px 16px 0}
  .room-main-body{padding:0 16px 16px}
  .room-main-card{border-radius:14px}
  .room-advanced-summary{padding:12px 0}
  .room-advanced-body{padding:0 0 6px}
}

/* ── 스피드 모드 ── */
@keyframes speedShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.speed-shake {
  animation: speedShake .4s ease;
}
#quizSpeedSolvedBanner {
  animation: qrBadgePop .4s ease;
}

/* ═══════════════════════════════════════
   순서 퀴즈 (ordering quiz) — 플레이
   ═══════════════════════════════════════ */
.quiz-ordering-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  user-select: none;
  -webkit-user-select: none;
}
.quiz-ordering-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card, #121a27);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  cursor: grab;
  transition: box-shadow .15s, border-color .15s, opacity .15s, transform .15s;
  touch-action: none;
}
.quiz-ordering-card:active { cursor: grabbing; }
.quiz-ordering-card.qo-dragging {
  opacity: .35;
  border-color: var(--primary, #6366f1);
}
.quiz-ordering-card.qo-ghost {
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  border-color: var(--primary, #6366f1);
  opacity: .92;
  z-index: 9999;
}
.quiz-ordering-card-handle {
  font-size: 16px;
  opacity: .4;
  flex-shrink: 0;
  cursor: grab;
  line-height: 1;
}
.quiz-ordering-card:hover .quiz-ordering-card-handle { opacity: .7; }
.quiz-ordering-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  color: var(--primary, #6366f1);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.quiz-ordering-card-text {
  flex: 1;
  font-size: 15px;
  color: var(--text, #e7eefc);
  line-height: 1.4;
  word-break: break-word;
}
.quiz-ordering-card-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.qo-has-img {
  min-height: 64px;
}

/* 순서 퀴즈 정답 공개 */
.qo-reveal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.qo-reveal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.qo-reveal-item.qo-correct {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
}
.qo-reveal-item.qo-wrong {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
}
.qo-reveal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.qo-correct .qo-reveal-num {
  background: rgba(16,185,129,.2);
  color: #10b981;
}
.qo-wrong .qo-reveal-num {
  background: rgba(239,68,68,.2);
  color: #ef4444;
}
.qo-reveal-text {
  flex: 1;
  line-height: 1.3;
  word-break: break-word;
}
.qo-reveal-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
}
.qo-reveal-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.qo-reveal-score {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  margin: 6px 0;
  color: var(--primary, #6366f1);
}

/* 순서 퀴즈 — 정답 vs 내 답 나란히 비교 보드 */
.qo-rv-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.qo-rv-board {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px;
}
.qo-rv-board-title {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  margin-bottom: 8px;
  padding: 4px 0;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: var(--text, #e7eefc);
}
.qo-rv-board-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.qo-rv-card {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text, #e7eefc);
  background: var(--card, #121a27);
  border: 1.5px solid rgba(255,255,255,.08);
  line-height: 1.3;
}
.qo-rv-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
  color: var(--muted);
}
.qo-rv-card-img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.qo-rv-card-text {
  flex: 1;
  word-break: break-word;
}
.qo-rv-card-ok {
  border-color: var(--green, #22c55e);
  background: rgba(34,197,94,.1);
}
.qo-rv-card-ok .qo-rv-card-num {
  background: rgba(34,197,94,.25);
  color: #22c55e;
}
.qo-rv-card-wrong {
  border-color: var(--red, #ef4444);
  background: rgba(239,68,68,.08);
}
.qo-rv-card-wrong .qo-rv-card-num {
  background: rgba(239,68,68,.2);
  color: #ef4444;
}
.qo-rv-arrow {
  width: 2px;
  height: 10px;
  background: rgba(255,255,255,.12);
  margin: 0 auto;
  position: relative;
}
.qo-rv-arrow::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid rgba(255,255,255,.12);
}
.qo-rv-empty {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 16px 0;
}
@media (max-width: 640px) {
  .qo-rv-boards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ═══════════════════════════════════════
   순서 퀴즈 — 제작기
   ═══════════════════════════════════════ */
.quiz-ordering-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.quiz-ordering-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card, #121a27);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.quiz-ordering-item-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  color: var(--primary, #6366f1);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.quiz-ordering-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.quiz-ordering-item .input {
  flex: 1;
  min-width: 0;
}
.quiz-ordering-img-area {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 2px dashed transparent;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-ordering-img-area.dragover {
  border-color: var(--accent, #6c5ce7);
  background: rgba(108, 92, 231, 0.08);
}
.quiz-ordering-img-preview {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #333);
}
.quiz-ordering-img-btn {
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px !important;
}
.quiz-ordering-img-delete {
  font-size: 11px;
  padding: 2px 6px !important;
}
.quiz-ordering-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.quiz-ordering-item-actions .btn {
  padding: 2px 6px;
  font-size: 12px;
  min-width: auto;
}
.quiz-add-ordering {
  font-size: 13px;
}

/* ═══════════════════════════════════════
   분류퀴즈 — 제작기 (create-quiz)
   ═══════════════════════════════════════ */
.quiz-classify-cat-list,
.quiz-classify-card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.quiz-classify-cat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quiz-classify-card-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.quiz-classify-cat-num,
.quiz-classify-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  color: var(--primary, #6366f1);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 6px;
}
.quiz-classify-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quiz-classify-cat-input {
  flex: 1;
  min-width: 0;
}
.quiz-classify-card-input {
  flex: 1;
  min-width: 0;
}
.quiz-classify-card-cat {
  width: 130px;
  flex-shrink: 0;
}
.quiz-classify-card-img-area {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quiz-classify-card-img-preview {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.quiz-classify-card-img-btn {
  padding: 2px 6px;
  font-size: 14px;
  min-width: auto;
  cursor: pointer;
}
.quiz-classify-card-img-delete {
  padding: 2px 6px;
  font-size: 11px;
  min-width: auto;
}
.quiz-classify-card-img-area.dragover {
  outline: 2px dashed var(--primary, #6366f1);
  border-radius: 6px;
}
.quiz-add-classify-cat,
.quiz-add-classify-card {
  font-size: 13px;
}

/* ═══════════════════════════════════════
   분류퀴즈 — 플레이 (play)
   ═══════════════════════════════════════ */
.quiz-classify-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.quiz-classify-zone {
  flex: 1;
  min-width: 140px;
  background: var(--card, #121a27);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px;
  min-height: 100px;
  transition: border-color .15s;
}
.quiz-classify-zone.qcl-drag-over,
.quiz-classify-zone-cards.qcl-drag-over {
  border-color: var(--primary, #6366f1);
  background: rgba(99,102,241,.06);
}
.quiz-classify-zone-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary, #6366f1);
  margin-bottom: 8px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(99,102,241,.1);
  border-radius: 6px;
}
.quiz-classify-zone-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
  border: 1.5px dashed rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 6px;
  transition: border-color .15s, background .15s;
}
.quiz-classify-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 8px;
  border: 1.5px dashed rgba(255,255,255,.06);
  border-radius: 10px;
  margin-bottom: 8px;
}
.quiz-classify-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--card, #121a27);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 8px;
  cursor: grab;
  font-size: 14px;
  color: var(--text, #e7eefc);
  transition: box-shadow .15s, border-color .15s, opacity .15s;
  touch-action: none;
  user-select: none;
}
.quiz-classify-card-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  pointer-events: none;
}
.quiz-classify-card-text {
  line-height: 1.4;
  word-break: break-word;
}
.qcl-has-img {
  min-height: 52px;
}
.quiz-classify-card:active { cursor: grabbing; }
body.qcl-body-dragging {
  user-select: none;
}
.quiz-classify-card.qcl-dragging {
  opacity: .35;
  border-color: var(--primary, #6366f1);
}
.quiz-classify-card.qcl-touch-clone {
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  border-color: var(--primary, #6366f1);
  opacity: .92;
}
/* 분류퀴즈 리빌용 */
.qcl-reveal-correct { border-color: var(--green, #22c55e) !important; background: rgba(34,197,94,.1); }
.qcl-reveal-wrong { border-color: var(--red, #ef4444) !important; background: rgba(239,68,68,.1); }
/* ── 분류퀴즈 정답 보드 (reveal) ── */
.qcl-rv-score {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary, #6366f1);
  margin: 4px 0 12px;
}
.qcl-rv-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.qcl-rv-board {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px;
}
.qcl-rv-board-title {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  margin-bottom: 8px;
  padding: 4px 0;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: var(--text, #e7eefc);
}
.qcl-rv-zone {
  margin-bottom: 8px;
}
.qcl-rv-zone:last-child { margin-bottom: 0; }
.qcl-rv-zone-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--primary, #6366f1);
  padding: 3px 8px;
  background: rgba(99,102,241,.1);
  border-radius: 5px;
  margin-bottom: 4px;
  text-align: center;
}
.qcl-rv-zone-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  padding: 4px;
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 6px;
}
.qcl-rv-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text, #e7eefc);
  background: var(--card, #121a27);
  border: 1.5px solid rgba(255,255,255,.08);
  line-height: 1.3;
}
.qcl-rv-card-img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.qcl-rv-card-text {
  word-break: break-word;
}
.qcl-rv-card-ok {
  border-color: var(--green, #22c55e);
  background: rgba(34,197,94,.1);
}
.qcl-rv-card-wrong {
  border-color: var(--red, #ef4444);
  background: rgba(239,68,68,.08);
}
.qcl-rv-zone-unplaced .qcl-rv-zone-label {
  background: rgba(239,68,68,.12);
  color: var(--red, #ef4444);
}
@media (max-width: 640px) {
  .qcl-rv-boards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 분류퀴즈 카드 크기 CSS 변수 적용 */
.quiz-classify-card {
  gap: var(--qcl-card-gap, 8px);
  padding: var(--qcl-card-pad, 8px 14px);
  font-size: var(--qcl-card-font, 14px);
}
.quiz-classify-card-img {
  width: var(--qcl-card-img, 40px);
  height: var(--qcl-card-img, 40px);
}
.quiz-classify-cards {
  gap: var(--qcl-card-gap, 8px);
}
.quiz-classify-zone-cards {
  gap: var(--qcl-card-gap, 6px);
}
/* 분류퀴즈 hover preview (PC) */
.qcl-hover-preview {
  position: fixed;
  z-index: 3500;
  pointer-events: none;
  background: var(--card, #121a27);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  max-width: 240px;
  transition: opacity .12s;
}
.qcl-hover-preview.hidden { display: none; }
.qcl-preview-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.qcl-preview-text {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text, #e7eefc);
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
}
/* 분류퀴즈 이미지 확대 힌트 (모바일 only) */
.qcl-img-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.qcl-zoom-hint {
  display: none;
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 10px;
  line-height: 1;
  background: rgba(0,0,0,.6);
  border-radius: 4px;
  padding: 1px 3px;
  pointer-events: none;
}
@media (max-width: 640px) {
  .qcl-zoom-hint { display: block; }
}
/* 분류퀴즈 모바일 원본 크게 보기 (long press) */
.qcl-mobile-preview {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000;
  align-items: center;
  justify-content: center;
}
.qcl-mobile-preview.active { display: flex; }
.qcl-mp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
}
.qcl-mp-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: qcl-mp-in .2s ease-out;
}
@keyframes qcl-mp-in {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.qcl-mp-img {
  max-width: 90vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
.qcl-mp-text {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(255,255,255,.9);
  text-align: center;
  word-break: break-word;
  max-width: 80vw;
}
.qcl-mp-hint {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
@media (max-width: 640px) {
  .quiz-classify-zones { flex-direction: column; }
  .quiz-classify-zone { min-width: auto; }
  .quiz-classify-card-cat { width: 100px; }
  .qcl-hover-preview { display: none !important; }
}

/* ══════════════════════════════════════
   랭킹 티저 (홈 화면)
   ══════════════════════════════════════ */
.rank-teaser{max-width:480px;margin:0 auto 12px;padding:0 16px}
.rank-teaser-inner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .1s}
.rank-teaser-inner:hover{border-color:var(--primary);transform:translateY(-1px)}
.rank-teaser-crown{font-size:22px;flex-shrink:0;line-height:1}
.rank-teaser-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--line)}
.rank-teaser-avatar img{width:100%;height:100%;object-fit:cover}
.rank-teaser-avatar .rt-letter{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--muted);background:rgba(76,125,255,.12)}
.rank-teaser-info{flex:1;min-width:0}
.rank-teaser-label{font-size:11px;color:var(--muted);font-weight:600}
.rank-teaser-nick{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-teaser-pts{font-size:12px;color:var(--primary);font-weight:700}
.rank-teaser-arrow{font-size:16px;color:var(--muted);flex-shrink:0}

/* ══════════════════════════════════════
   공지사항 (notice.html)
   ══════════════════════════════════════ */
.notice-container{max-width:720px;margin:0 auto;padding:24px 16px 60px}
.notice-header{margin-bottom:20px}
.notice-title-heading{font-size:22px;font-weight:800;margin:0 0 4px}

/* 목록 카드 */
.notice-list{display:flex;flex-direction:column;gap:2px}
.notice-card{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .15s}
.notice-card:hover{border-color:var(--primary)}
.notice-card.pinned{border-left:3px solid var(--primary)}
.notice-card-title{font-size:15px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.notice-card-meta{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:12px}
.notice-pin-badge{font-size:12px;flex-shrink:0}
.notice-comment-badge{font-size:12px;color:var(--primary);font-weight:600;background:rgba(76,125,255,.12);padding:2px 7px;border-radius:999px}

/* 빈 상태 */
.notice-empty{text-align:center;padding:48px 16px}

/* 페이지네이션 */
.notice-pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px}

/* 상세 페이지 */
.notice-back-btn{margin-bottom:16px;font-size:14px}
.notice-detail-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.notice-detail-head{margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.notice-detail-head h2{font-size:20px;font-weight:800;margin:6px 0 8px;word-break:keep-all}
.notice-detail-meta{font-size:13px}
.notice-detail-body{font-size:15px;line-height:1.75;word-break:keep-all}
.notice-detail-body a{color:var(--primary);text-decoration:underline}

/* 댓글 섹션 */
.notice-comments-section{margin-top:28px}
.notice-comments-heading{font-size:16px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:6px}

/* 댓글 입력 */
.notice-comment-form{margin-bottom:20px}
.notice-comment-form textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px;resize:vertical;min-height:56px}
.notice-comment-form textarea:focus{outline:none;border-color:var(--primary)}
.notice-comment-form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}

/* 비로그인 안내 */
.notice-login-guide{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;text-align:center}
.notice-login-guide .btn-link{background:none;border:none;color:var(--primary);cursor:pointer;font-size:inherit;text-decoration:underline;padding:0}

/* 댓글 목록 */
.notice-comment-list{display:flex;flex-direction:column;gap:0}
.notice-comment-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.notice-comment-item:last-child{border-bottom:none}
.notice-comment-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--line)}
.notice-comment-avatar img{width:100%;height:100%;object-fit:cover}
.notice-comment-avatar .nc-letter{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--muted);background:rgba(76,125,255,.12)}
.notice-comment-body{flex:1;min-width:0}
.notice-comment-head{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.notice-comment-nick{font-size:13px;font-weight:700}
.notice-comment-date{font-size:11px}
.notice-comment-delete{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 4px;margin-left:auto;opacity:.6;transition:opacity .15s}
.notice-comment-delete:hover{opacity:1;color:var(--danger)}
.notice-comment-text{font-size:14px;line-height:1.5;word-break:keep-all}
.notice-comment-empty{text-align:center;padding:24px 0}

@media(max-width:600px){
  .notice-container{padding:16px 12px 48px}
  .notice-title-heading{font-size:18px}
  .notice-card{padding:12px 14px}
  .notice-card-title{font-size:14px}
  .notice-detail-card{padding:18px 16px}
  .notice-detail-head h2{font-size:17px}
  .notice-detail-body{font-size:14px}
}

/* ── 솔로 월드컵 이어하기 ── */
.wc-save-exit-btn{
  margin-top:8px;font-size:13px;padding:6px 14px;
  border-radius:8px;white-space:nowrap;
}
.wc-session-item{position:relative}
.wc-session-status{
  color:var(--primary);font-weight:600;font-size:12px;
}
.wc-session-item .history-actions{
  display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0;
}

/* ══════════════════════════════════════
   멀티 개선: 강퇴 버튼 / 게스트 배지 / 카운트다운 / Enter 힌트
   ══════════════════════════════════════ */

/* 강퇴 버튼 (호스트만 보이는 ✕) */
.lobby-kick-btn{
  position:absolute;top:4px;right:4px;
  background:none;border:none;color:var(--muted);
  font-size:14px;cursor:pointer;padding:4px 6px;
  border-radius:6px;opacity:0;transition:opacity .2s;
  line-height:1;z-index:1;
}
.lobby-player-card:hover .lobby-kick-btn,
.lobby-player-card:focus-within .lobby-kick-btn{
  opacity:1;
}
.lobby-kick-btn:hover{
  color:var(--red,#ef4444);background:rgba(239,68,68,.12);
}
/* 모바일에서 항상 표시 */
@media(hover:none){
  .lobby-kick-btn{opacity:.7;font-size:16px;padding:6px 8px;}
}

/* 게임 중 강퇴 버튼 (wc-badge 안) */
.ingame-kick-btn{
  background:none;border:none;color:var(--muted);
  font-size:12px;cursor:pointer;padding:1px 4px;
  border-radius:4px;margin-left:4px;line-height:1;
  vertical-align:middle;opacity:.6;transition:opacity .15s,color .15s;
}
.ingame-kick-btn:hover{
  color:var(--red,#ef4444);background:rgba(239,68,68,.12);opacity:1;
}
@media(hover:none){
  .ingame-kick-btn{opacity:.8;font-size:13px;padding:2px 6px;}
}

/* 게스트 배지 */
.lobby-guest-badge{
  display:inline-block;font-size:10px;font-weight:600;
  background:rgba(255,255,255,.08);color:var(--muted);
  padding:1px 6px;border-radius:4px;margin-left:4px;
  vertical-align:middle;
}

/* 3-2-1 카운트다운 오버레이 */
.quiz-auto-countdown{
  position:fixed;inset:0;z-index:2500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
}
.quiz-auto-countdown-num{
  font-size:clamp(64px,20vw,120px);font-weight:800;
  color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.4);
  line-height:1;
}
.quiz-auto-countdown-pop{
  animation:countdownPop .4s ease-out;
}
@keyframes countdownPop{
  0%{transform:scale(1.6);opacity:0}
  50%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* Enter 힌트 (PC 전용) */
.enter-hint{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--muted);opacity:.7;
  margin-left:8px;white-space:nowrap;
}
.enter-hint kbd{
  display:inline-block;font-family:inherit;font-size:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:4px;padding:1px 6px;line-height:1.4;
}
/* 모바일에서 Enter 힌트 숨김 */
@media(hover:none){
  .enter-hint{display:none !important;}
}

/* lobby-player-card에 position:relative 보장 (강퇴 버튼 배치용) */
.lobby-player-card{position:relative;}

/* ★ 솔로 시청자 모드 — 참여 방식 선택 카드 */
.solo-aud-type-option{transition:border-color .15s,background .15s}
.solo-aud-type-option:hover{border-color:#7c6aef !important;background:rgba(124,106,239,.06) !important}
.solo-aud-type-option:has(input:checked){border-color:#7c6aef !important;background:rgba(124,106,239,.1) !important}

/* ============================================================
   MULTI TIER v2 — tier-multi-play.html
   tm-* prefix (전용 네임스페이스)
   ============================================================ */

/* ── 공용 버튼 ── */
.tm-btn{
  display:block;width:100%;padding:12px 0;border:none;border-radius:10px;
  font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;
  text-align:center;margin-top:8px;
}
.tm-btn:active{transform:scale(.97)}
.tm-btn-primary{background:var(--primary);color:#fff}
.tm-btn-primary:hover{opacity:.88}
.tm-btn-accent{background:linear-gradient(135deg,#4c7dff,#7c6aef);color:#fff}
.tm-btn-accent:hover{opacity:.9}
.tm-btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.tm-btn-ghost:hover{background:rgba(255,255,255,.04)}
.tm-btn-icon{
  width:36px;height:36px;border:1px solid var(--line);border-radius:8px;
  background:transparent;color:var(--text);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tm-btn-icon:hover{background:rgba(255,255,255,.06)}
.tm-btn-done{background:#223049 !important;color:var(--muted) !important;cursor:default}

/* ── 로비 ── */
.tm-lobby{
  display:flex;justify-content:center;align-items:flex-start;
  padding:72px 16px 40px;min-height:100vh;
}
.tm-lobby-box{
  width:100%;max-width:440px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:32px 24px;
}
.tm-lobby-icon{font-size:40px;text-align:center;margin-bottom:4px}
.tm-lobby-box h2{font-size:22px;color:var(--text);margin:0 0 4px;text-align:center}
.tm-lobby-sub{color:var(--muted);font-size:13px;text-align:center;margin:0 0 20px}

.tm-label{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 4px}
.tm-input{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:#0d1320;color:var(--text);font-size:14px;outline:none;
}
.tm-input:focus{border-color:var(--primary)}
.tm-select,.tm-select-sm{
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:#0d1320;color:var(--text);font-size:13px;outline:none;
}
.tm-select{width:100%}
.tm-select-sm{width:auto;min-width:80px}

.tm-form-row{display:flex;gap:12px;margin-top:4px}
.tm-form-col{flex:1}
.tm-timer-row{display:flex;align-items:center;gap:8px}
.tm-check{color:var(--text);font-size:13px;display:flex;align-items:center;gap:4px;cursor:pointer}

.tm-divider{
  text-align:center;color:var(--muted);font-size:12px;margin:18px 0;position:relative;
}
.tm-divider span{background:var(--card);padding:0 12px;position:relative;z-index:1}
.tm-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}

/* 대기실 */
.tm-invite-bar{
  display:flex;align-items:center;gap:10px;
  background:#0d1320;padding:12px 14px;border-radius:10px;margin-bottom:14px;
}
.tm-invite-code{flex:1}
.tm-invite-label{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tm-invite-code strong{font-size:20px;color:var(--text);font-family:monospace;letter-spacing:2px}

.tm-player-list{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.tm-player{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:#0d1320;border-radius:8px;font-size:13px;color:var(--text);
}
.tm-player-me{border-left:3px solid var(--primary)}
.tm-player-name{font-weight:600}
.tm-player-status{color:var(--muted);font-size:11px}

/* ══════════════════════════════════════ */
/* 게임 패널                              */
/* ══════════════════════════════════════ */
.tm-game{
  padding:56px 16px 40px;max-width:960px;margin:0 auto;
}

/* 단계 배너 */
.tm-phase-banner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;margin-bottom:12px;
  border:2px solid var(--primary);border-radius:12px;
  background:rgba(76,125,255,.06);
  --phase-color:var(--primary);
}
.tm-phase-icon{font-size:20px}
.tm-phase-text{font-size:15px;font-weight:700;color:var(--text)}
.tm-phase-timer{
  font-size:18px;font-weight:800;color:var(--text);
  min-width:32px;text-align:center;margin-left:auto;
}
.tm-timer-warn{color:var(--danger) !important;animation:tm-pulse .5s infinite alternate}
@keyframes tm-pulse{from{opacity:1}to{opacity:.35}}

/* 상태 바 */
.tm-status-bar{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.tm-progress{flex:1;display:flex;align-items:center;gap:8px}
.tm-progress-label{color:var(--muted);font-size:13px;white-space:nowrap;font-weight:700}
.tm-progress-track{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.tm-progress-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .3s}

/* 플레이어 dots (아바타 기반) */
.tm-player-dots{display:flex;gap:6px;flex-shrink:0;align-items:center}
.tm-dot{
  width:34px;height:34px;border-radius:50%;
  background:#223049;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--muted);
  transition:border-color .2s,background .2s,opacity .2s;
  position:relative;overflow:hidden;
}
.tm-dot-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.tm-dot-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.tm-dot-pending{opacity:.45;filter:grayscale(.6)}
.tm-dot-done{border-color:#4cff8d;background:rgba(76,255,141,.12);color:#4cff8d;opacity:1;filter:none}
.tm-dot-done::after{
  content:"✓";position:absolute;bottom:-2px;right:-2px;
  width:14px;height:14px;border-radius:50%;background:#4cff8d;
  color:#0a0e14;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--card);
}
.tm-dot-me{box-shadow:0 0 0 2px var(--primary)}
.tm-dot-host::before{
  content:"👑";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:10px;line-height:1;
}

/* ── 2단 레이아웃 ── */
.tm-main{
  display:grid;grid-template-columns:420px 1fr;gap:20px;align-items:start;
}
@media(max-width:768px){
  .tm-main{grid-template-columns:1fr;gap:14px}
}

/* 좌: 카드 + 액션 */
.tm-action-col{display:flex;flex-direction:column;gap:14px}

/* 카드 — 대형 투표 카드 (메인 포커스) */
.tm-card-wrap{display:flex;justify-content:center}
.tm-card{
  width:360px;background:var(--card);border:2px solid var(--line);border-radius:18px;
  overflow:hidden;text-align:center;transition:border-color .3s;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.tm-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.tm-card-label{
  padding:12px 14px;font-size:18px;color:var(--text);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.tm-card-enter{animation:tm-card-in .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes tm-card-in{
  from{opacity:0;transform:scale(.8) translateY(24px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* play.html 내장 티어 카드 */
.tm-card-reveal{
  display:flex;flex-direction:column;align-items:center;
  margin:8px auto;max-width:380px;
}
.tm-card-image{
  width:360px;height:360px;object-fit:cover;border-radius:18px;
  border:2px solid var(--line);background:var(--card);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.tm-phase-banner{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:8px 16px;border:2px solid var(--line);border-radius:12px;
  margin-bottom:8px;transition:border-color .3s;
}
.tm-phase-icon{font-size:20px}
.tm-phase-text{font-weight:700;color:var(--text);font-size:15px}
.tm-phase-timer{
  font-size:18px;font-weight:800;color:var(--primary);
  min-width:28px;text-align:center;
}
.tm-timer-warn{color:var(--red,#ef4444);animation:tm-pulse 1s infinite}
@keyframes tm-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.tm-tier-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
.tm-host-decide-title{text-align:center;font-weight:700;margin:8px 0;color:var(--text)}
.tm-review-card{display:flex;align-items:center;gap:10px;justify-content:center;margin:8px 0}

/* ── 투표 UI ── */
.tm-vote{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;text-align:center;
}
.tm-vote-title{color:var(--text);font-size:14px;font-weight:700;margin:0 0 10px}
.tm-tier-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tm-tier-btn{
  padding:10px 20px;border:2px solid var(--line);border-radius:10px;
  background:#0d1320;color:var(--text);font-size:14px;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.tm-tier-btn:hover{border-color:var(--primary);background:rgba(76,125,255,.1)}
.tm-tier-btn-selected{
  border-color:var(--primary) !important;background:rgba(76,125,255,.2) !important;
  box-shadow:0 0 0 3px rgba(76,125,255,.2);
}
.tm-tier-btn-tied{
  border-color:#ffc94c;animation:tm-tie-glow 1.2s infinite alternate;
}
@keyframes tm-tie-glow{
  from{box-shadow:0 0 0 0 rgba(255,201,76,0)}
  to{box-shadow:0 0 0 4px rgba(255,201,76,.25)}
}
.tm-tie-explain{color:#ffc94c;font-size:13px;font-weight:600;margin:0 0 8px;width:100%}

.tm-pos-area{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tm-pos-title{color:var(--muted);font-size:12px;font-weight:600;margin:0 0 8px}
.tm-pos-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tm-pos-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid var(--line);border-radius:10px;
  background:#0d1320;color:var(--text);font-size:12px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.tm-pos-btn:hover{border-color:var(--primary);background:rgba(76,125,255,.08)}
.tm-pos-thumb{
  width:28px;height:28px;border-radius:5px;object-fit:cover;
  border:1px solid rgba(255,255,255,.12);flex-shrink:0;
}
.tm-pos-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:5px;
  background:rgba(76,125,255,.12);color:var(--primary);
  font-size:14px;flex-shrink:0;
}
.tm-pos-label{white-space:nowrap;font-weight:500}
.tm-tier-btn-tied .tm-pos-thumb{width:24px;height:24px;border-radius:4px;vertical-align:middle;margin-right:4px}

/* 투표 완료 */
.tm-voted{
  background:var(--card);border:2px solid #4cff8d;border-radius:14px;
  padding:20px 16px;text-align:center;
}
.tm-voted.hidden{display:none}
.tm-voted-icon{font-size:28px;color:#4cff8d;margin-bottom:4px}
.tm-voted-text{font-size:15px;font-weight:700;color:#4cff8d}
.tm-voted-wait{color:var(--muted);font-size:13px;margin-top:8px}

/* 투표 결과 (인라인) */
.tm-vote-result{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;text-align:center;animation:tm-fade-in .3s;
}
.tm-vote-result.hidden{display:none}
@keyframes tm-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tm-vr-card{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px}
.tm-vr-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tm-vr-row{display:flex;align-items:center;gap:8px}
.tm-vr-label{color:var(--text);font-size:12px;min-width:50px;text-align:left;font-weight:600}
.tm-vr-bar-track{flex:1;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.tm-vr-bar-fill{height:100%;background:var(--primary);border-radius:4px;transition:width .5s}
.tm-vr-count{color:var(--muted);font-size:11px;white-space:nowrap}
.tm-vr-voters{display:flex;gap:2px;margin-left:4px;flex-shrink:0}
.tm-vr-voter{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);
  overflow:hidden;background:#223049;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0;
}
.tm-vr-voter img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.tm-vr-winner{color:#4cff8d;font-size:14px;font-weight:700;margin-top:4px}
.tm-vr-method{font-size:11px;color:var(--muted);font-weight:400}
.tm-vr-tie{color:#ffc94c;font-size:14px;font-weight:700;margin-top:4px}

/* ── 호스트 결정 ── */
.tm-host-decide{
  background:var(--card);border:2px solid #ffc94c;border-radius:14px;
  padding:16px;text-align:center;
}
.tm-host-decide.hidden{display:none}
.tm-host-decide-badge{
  display:inline-block;background:rgba(255,201,76,.15);border:1px solid #ffc94c;
  border-radius:20px;padding:4px 14px;font-size:13px;font-weight:700;color:#ffc94c;
  margin-bottom:8px;
}
.tm-host-decide-desc{color:var(--muted);font-size:12px;margin:0 0 12px}

/* 다음 카드 버튼 */
.tm-btn-next{
  max-width:260px;margin:0 auto;padding:13px 0;border:none;border-radius:10px;
  background:linear-gradient(135deg,#4c7dff,#7c6aef);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;display:block;
  transition:opacity .15s,transform .1s;
}
.tm-btn-next:hover{opacity:.9}
.tm-btn-next:active{transform:scale(.97)}
.tm-btn-next.hidden{display:none}

/* ── 최종 확정 버튼 ── */
.tm-btn-finalize{
  max-width:260px;margin:0 auto;padding:13px 0;border:none;border-radius:10px;
  background:linear-gradient(135deg,#ff8c4c,#ff5e3a);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;display:block;
  transition:opacity .15s,transform .1s;
}
.tm-btn-finalize:hover{opacity:.9}
.tm-btn-finalize:active{transform:scale(.97)}
.tm-btn-finalize.hidden{display:none}

/* ── 최종 검토 배너 ── */
.tm-final-review-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(255,140,76,.15),rgba(255,94,58,.1));
  border:2px solid #ff8c4c;border-radius:12px;
  padding:14px 18px;margin-bottom:12px;
}
.tm-final-review-banner.hidden{display:none}
.tm-final-review-icon{font-size:28px;flex-shrink:0}
.tm-final-review-text strong{color:#ff8c4c;font-size:15px}
.tm-final-review-text p{color:var(--text-muted,#aaa);font-size:13px;margin:4px 0 0}

/* ── 재검토 ── */
.tm-review{
  background:var(--card);border:2px solid #b088f9;border-radius:14px;
  padding:16px;text-align:center;
}
.tm-review.hidden{display:none}
.tm-review-header{
  display:inline-block;background:rgba(176,136,249,.15);border:1px solid #b088f9;
  border-radius:20px;padding:4px 14px;font-size:13px;font-weight:700;color:#b088f9;
  margin-bottom:10px;
}
.tm-review-card-row{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:12px}
.tm-review-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0}
.tm-review-info{text-align:left}
.tm-review-info strong{color:var(--text);font-size:14px}
.tm-review-desc{color:var(--muted);font-size:12px;margin:2px 0 0}
.tm-review-btns{display:flex;gap:10px;justify-content:center}
.tm-btn-approve{background:#4cff8d !important;color:#111 !important;font-size:14px !important}
.tm-btn-reject{background:#ff4c6a !important;color:#fff !important;font-size:14px !important}
.tm-review-hint{font-size:11px;color:#b088f9;font-weight:600}
.tm-review-hint.hidden{display:none}

/* ══════════════════════════════════════ */
/* 우: 공동 보드                          */
/* ══════════════════════════════════════ */
.tm-board-col{position:sticky;top:60px}
.tm-board-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tm-board-header h3{color:var(--text);font-size:14px;font-weight:700;margin:0}

.tm-board{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.tm-board-final{border:2px solid #ffc94c}

.tm-board-row{display:flex;min-height:52px;border-bottom:1px solid var(--line)}
.tm-board-row:last-child{border-bottom:none}

.tm-board-label{
  width:52px;min-width:52px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;color:#111;
  padding:4px;text-align:center;word-break:keep-all;
}
.tm-board-row:nth-child(1) .tm-board-label{background:#ff5e5e}
.tm-board-row:nth-child(2) .tm-board-label{background:#ffab4c}
.tm-board-row:nth-child(3) .tm-board-label{background:#ffd94c}
.tm-board-row:nth-child(4) .tm-board-label{background:#4cff8d}
.tm-board-row:nth-child(5) .tm-board-label{background:#4cc4ff}
.tm-board-row:nth-child(6) .tm-board-label{background:#b088f9}
.tm-board-row:nth-child(n+7) .tm-board-label{background:#888}

.tm-board-cards{
  flex:1;display:flex;flex-wrap:wrap;gap:4px;padding:5px;
  border-left:1px solid var(--line);align-items:center;
}
.tm-board-empty{color:var(--muted);font-size:12px;padding:4px 8px}
.tm-board-card{width:52px;text-align:center;transition:transform .15s}
.tm-board-card-img{width:52px;height:52px;object-fit:cover;border-radius:6px;display:block}
.tm-board-card-name{
  font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;max-width:52px;margin-top:1px;
}

/* 새로 배치된 카드 하이라이트 */
.tm-board-card-new{animation:tm-new-card .8s ease-out}
.tm-board-card-new .tm-board-card-img{box-shadow:0 0 0 3px #4cff8d;border-radius:6px}
@keyframes tm-new-card{
  0%{transform:scale(1.2);opacity:.6}
  100%{transform:scale(1);opacity:1}
}

/* 재검토 가능 클릭 */
.tm-board-card-click{cursor:pointer}
.tm-board-card-click:hover{transform:scale(1.1)}
.tm-board-card-click:hover .tm-board-card-img{box-shadow:0 0 0 2px #b088f9}

/* ══════════════════════════════════════ */
/* 결과 화면                              */
/* ══════════════════════════════════════ */
.tm-result{padding:72px 16px 40px;max-width:780px;margin:0 auto;text-align:center}
.tm-result-header{margin-bottom:20px}
.tm-result-icon{font-size:48px;margin-bottom:4px}
.tm-result h2{color:var(--text);font-size:24px;margin:0 0 4px}
.tm-result-sub{color:var(--muted);font-size:13px;margin:0}

.tm-result-stats{margin:24px auto;max-width:420px;text-align:left}
.tm-result-stats h3{color:var(--text);font-size:14px;font-weight:700;margin:0 0 10px}

.tm-result-players{display:flex;flex-direction:column;gap:10px}
.tm-rp{
  background:#0d1320;border-radius:10px;padding:10px 14px;
}
.tm-rp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:8px}
.tm-rp-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--line)}
.tm-rp-avatar-initial{
  width:28px;height:28px;border-radius:50%;background:#223049;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0;
}
.tm-rp-name{color:var(--text);font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-rp-rate{color:var(--text);font-size:18px;font-weight:800}
.tm-rp-bar-track{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:3px}
.tm-rp-bar-fill{height:100%;border-radius:3px;transition:width .6s}
.tm-rp-detail{color:var(--muted);font-size:11px}

.tm-result-cta{margin-top:24px;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:300px;margin-left:auto;margin-right:auto}
.tm-publish-link{color:var(--primary);font-size:14px;text-decoration:none;font-weight:600}
.tm-publish-link:hover{text-decoration:underline}
.tm-publish-link.hidden{display:none}

/* ── 연결 상태 배너 ── */
.conn-banner{
  position:fixed;top:0;left:0;right:0;z-index:3500;
  background:#d32f2f;color:#fff;text-align:center;
  padding:6px 12px;font-size:13px;font-weight:600;
}
.conn-banner.hidden{display:none}

/* ══════════════════════════════════════ */
/* 모바일 반응형                          */
/* ══════════════════════════════════════ */
@media(max-width:768px){
  .tm-lobby{padding:60px 10px 24px}
  .tm-lobby-box{padding:24px 16px}
  .tm-game{padding:48px 10px 24px}
  .tm-card{width:min(320px,85vw)}
  .tm-card-image{width:min(300px,80vw);height:min(300px,80vw)}
  .tm-card-reveal{max-width:min(320px,85vw)}
  .tm-dot{width:30px;height:30px}
  .tm-board-col{position:static}
  .tm-board-label{width:40px;min-width:40px;font-size:12px}
  .tm-board-card{width:44px}
  .tm-board-card-img{width:44px;height:44px}
  .tm-board-card-name{font-size:8px;max-width:44px}
  .tm-phase-banner{padding:6px 12px;font-size:13px}
  .tm-tier-btn{padding:8px 14px;font-size:13px}
  .tm-form-row{flex-direction:column;gap:4px}
  .tm-result{padding:60px 10px 24px}
  .tm-hover-preview{display:none !important}
}

/* ══════════════════════════════════════ */
/* 멀티 티어: 카드 호버 미리보기 (PC)    */
/* ══════════════════════════════════════ */
.tm-hover-preview{
  position:fixed;z-index:3500;pointer-events:none;
  background:var(--card,#121a27);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;padding:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  max-width:220px;transition:opacity .12s;
}
.tm-hover-preview.hidden{display:none}
.tm-preview-img{
  width:100%;max-height:200px;object-fit:contain;
  border-radius:6px;display:block;
}
.tm-preview-text{
  margin-top:6px;font-size:13px;
  color:var(--text,#e7eefc);text-align:center;
  line-height:1.4;word-break:break-word;
}

/* ══════════════════════════════════════ */
/* 멀티 티어: 강퇴 버튼                   */
/* ══════════════════════════════════════ */
.tm-kick-btn{
  background:none;border:none;color:var(--muted);
  font-size:12px;cursor:pointer;padding:2px 6px;
  border-radius:4px;margin-left:auto;line-height:1;
  opacity:0;transition:opacity .2s,color .15s;flex-shrink:0;
}
.tm-player:hover .tm-kick-btn{opacity:1}
.tm-kick-btn:hover{color:var(--red,#ef4444);background:rgba(239,68,68,.12);opacity:1}
@media(hover:none){.tm-kick-btn{opacity:.7;font-size:14px;padding:4px 8px}}

.tm-dot-kick{
  position:absolute;top:-3px;right:-3px;
  background:var(--red,#ef4444);border:none;color:#fff;
  font-size:9px;width:16px;height:16px;border-radius:50%;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  line-height:1;padding:0;
}
.tm-dot:hover .tm-dot-kick{display:flex}

/* ══════════════════════════════════════ */
/* 멀티 티어: 내 선택 하이라이트          */
/* ══════════════════════════════════════ */
.tm-vr-mine{
  border:1.5px solid #4c7dff;border-radius:8px;
  background:rgba(76,125,255,.08);padding:3px 6px;
}
.tm-vr-mine .tm-vr-bar-fill{
  background:linear-gradient(90deg,#4c7dff,#6ea8fe) !important;
}
.tm-vr-mine .tm-vr-label{color:#6ea8fe;font-weight:700}

/* ══════════════════════════════════════ */
/* 멀티 티어: 방 설정 뱃지               */
/* ══════════════════════════════════════ */
.tm-settings-badges{
  display:flex;gap:6px;justify-content:center;
  padding:4px 0;flex-wrap:wrap;
}
.tm-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:20px;padding:3px 10px;
  font-size:11px;color:var(--muted);font-weight:600;
  white-space:nowrap;
}

/* ══════════════════════════════════════ */
/* 멀티 티어: 키보드 힌트 & 위치 선택    */
/* ══════════════════════════════════════ */
.tm-kb-hint{
  font-size:11px;color:var(--muted);font-weight:400;
  margin-left:6px;
}
@media(hover:none){.tm-kb-hint{display:none}.tm-tier-kbd{display:none}}

.tm-tier-kbd{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:4px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  font-size:10px;font-weight:700;color:var(--muted);
  margin-right:6px;font-family:inherit;line-height:1;
}

.tm-pos-btn-kb{
  outline:2px solid #4c7dff;outline-offset:1px;
  background:rgba(76,125,255,.12) !important;
}

/* ══════════════════════════════════════ */
/* 멀티 티어: 논란 카드                   */
/* ══════════════════════════════════════ */
.tm-controversy{
  margin:20px auto;max-width:420px;text-align:left;
}
.tm-controversy h3{
  color:var(--text);font-size:14px;font-weight:700;margin:0 0 10px;
}
.tm-controversy-list{display:flex;flex-direction:column;gap:8px}
.tm-controversy-item{
  display:flex;align-items:center;gap:10px;
  background:#0d1320;border-radius:10px;padding:10px 14px;
}
.tm-controversy-rank{
  font-size:18px;font-weight:800;color:var(--muted);
  min-width:24px;text-align:center;
}
.tm-controversy-thumb{
  width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;
}
.tm-controversy-info{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.tm-controversy-info strong{
  color:var(--text);font-size:13px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tm-controversy-detail{
  font-size:11px;color:var(--muted);
}

/* ===== 솔로 월드컵: 선택 연출 ===== */
.wc-pick-win{
  animation:wcPickWin .5s cubic-bezier(.34,1.56,.64,1) forwards;
  z-index:2;position:relative;
}
@keyframes wcPickWin{
  0%{transform:scale(1);box-shadow:none}
  40%{transform:scale(1.06);box-shadow:0 0 24px 4px rgba(255,215,0,.45)}
  100%{transform:scale(1.02);box-shadow:0 0 12px 2px rgba(255,215,0,.2)}
}
.wc-pick-lose{
  animation:wcPickLose .45s ease forwards;
}
@keyframes wcPickLose{
  0%{opacity:1;filter:none;transform:scale(1)}
  100%{opacity:.35;filter:grayscale(.8);transform:scale(.96)}
}

/* ===== 솔로 월드컵: 결승전 배너 ===== */
.wc-finals-banner{
  text-align:center;font-size:18px;font-weight:800;
  padding:10px 16px;margin:8px auto 12px;
  background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(255,160,0,.12));
  border:1px solid rgba(255,215,0,.4);border-radius:12px;
  color:#ffd700;letter-spacing:1px;
  animation:wcFinalsPulse 2s ease-in-out infinite;
  max-width:340px;
}
@keyframes wcFinalsPulse{
  0%,100%{box-shadow:0 0 8px rgba(255,215,0,.15)}
  50%{box-shadow:0 0 20px rgba(255,215,0,.3)}
}
.wc-finals-match .choice{
  border-color:rgba(255,215,0,.35) !important;
  box-shadow:0 0 12px rgba(255,215,0,.1);
}
.wc-finals-match .choice:hover{
  border-color:rgba(255,215,0,.6) !important;
}
@media(prefers-reduced-motion:reduce){
  .wc-pick-win,.wc-pick-lose{animation:none !important}
  .wc-finals-banner{animation:none !important}
}

/* ===== 멀티 이모지 리액션 v2 (토글+닉네임) ===== */
.react-wrap{
  position:fixed;bottom:20px;right:20px;z-index:900;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.react-toggle{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(18,26,39,.92);backdrop-filter:blur(8px);
  font-size:22px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.react-toggle:hover{transform:scale(1.1);box-shadow:0 2px 12px rgba(76,125,255,.25)}
.react-toggle:active{transform:scale(.92)}
.react-popover{
  position:absolute;bottom:52px;right:0;
  display:flex;gap:4px;padding:6px 10px;
  background:rgba(18,26,39,.95);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(10px);box-shadow:0 4px 16px rgba(0,0,0,.4);
  animation:reactPopIn .15s ease-out;
}
.react-popover.hidden{display:none}
@keyframes reactPopIn{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.react-btn{
  background:none;border:none;font-size:22px;cursor:pointer;
  padding:4px 6px;border-radius:8px;transition:transform .12s,background .12s;
  line-height:1;
}
.react-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.18)}
.react-btn:active{transform:scale(.88)}

/* ── 닉네임+이모지 알림 피드 ── */
.react-feed{
  position:fixed;bottom:72px;right:20px;z-index:899;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  pointer-events:none;
}
.react-notif{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 8px;border-radius:999px;
  background:rgba(18,26,39,.88);border:1px solid var(--line);
  backdrop-filter:blur(6px);
  animation:reactNotifLife 2s ease-out forwards;
  max-width:180px;overflow:hidden;white-space:nowrap;
}
.react-notif-name{
  font-size:12px;color:var(--muted);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;max-width:90px;
}
.react-notif-emoji{font-size:18px;line-height:1;flex-shrink:0}
@keyframes reactNotifLife{
  0%{opacity:0;transform:translateY(8px) scale(.9)}
  10%{opacity:1;transform:translateY(0) scale(1)}
  75%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-10px)}
}

@media(max-width:600px){
  .react-wrap{bottom:14px;right:12px}
  .react-toggle{width:38px;height:38px;font-size:18px}
  .react-popover{bottom:46px;padding:4px 8px;gap:3px}
  .react-btn{font-size:18px;padding:3px 5px}
  .react-feed{bottom:58px;right:12px}
  .react-notif{padding:3px 8px 3px 6px}
  .react-notif-name{font-size:11px;max-width:60px}
  .react-notif-emoji{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .react-popover{animation:none}
  .react-notif{animation-duration:2s;animation-timing-function:linear}
}

/* ===== 티어 진행률 바 ===== */
.tier-progress-wrap{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;margin-bottom:12px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  position:relative;overflow:hidden;min-height:36px;
}
.tier-progress-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(76,125,255,.15),rgba(76,125,255,.25));
  border-radius:10px;transition:width .3s ease;
}
.tier-progress-text{
  position:relative;font-size:13px;font-weight:600;color:var(--text);z-index:1;
}
.tier-progress-msg{
  position:relative;font-size:12px;color:#4cff7e;font-weight:600;z-index:1;margin-left:auto;
}

/* ===== 티어 풀 검색 ===== */
.tier-pool-search-wrap{margin-bottom:8px}
.tier-pool-search-input{
  width:100%;padding:8px 12px;font-size:13px;
  border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);
}
.tier-pool-search-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(76,125,255,.15)}

/* ===== 티어 카드 배치 애니메이션 ===== */
.tier-card-placed{
  animation:tierCardPlace .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tierCardPlace{
  0%{transform:scale(.85);opacity:.6;box-shadow:none}
  50%{transform:scale(1.08);box-shadow:0 0 12px rgba(76,125,255,.3)}
  100%{transform:scale(1);opacity:1;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .tier-card-placed{animation:none !important}
}

/* ===== Task 5: 멀티 월드컵 그룹 성향 분석 ===== */
.wc-tendency-section{
  margin:18px 0 12px;
  padding:0 2px;
}
.wc-tendency-title{
  font-size:15px;font-weight:700;
  color:var(--text);
  margin-bottom:10px;
  text-align:center;
}
.wc-tendency-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.wc-tendency-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 10px 12px;
  text-align:center;
  transition:transform .15s ease,box-shadow .15s ease;
}
.wc-tendency-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.wc-tendency-icon{
  font-size:24px;
  margin-bottom:4px;
  line-height:1.2;
}
.wc-tendency-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  font-weight:600;
}
.wc-tendency-value{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  word-break:keep-all;
  overflow-wrap:break-word;
}
.wc-tendency-sub{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 모바일: 1열 */
@media(max-width:400px){
  .wc-tendency-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .wc-tendency-card{transition:none !important}
  .wc-tendency-section.rv-animate-in{animation:none !important}
}

/* ===== Task 6: 멀티 퀴즈 미니 랭킹 HUD ===== */
/* ===== 퀴즈 HUD (접기/펼치기) ===== */
.qz-hud{
  position:fixed;top:72px;right:12px;z-index:1200;
  display:flex;flex-direction:column;align-items:flex-end;
}
.qz-hud.hidden{display:none !important}

/* 토글 버튼: 항상 보임 */
.qz-hud-toggle{
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:rgba(20,20,30,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);
  transition:background .15s,box-shadow .15s;
  line-height:1;
}
.qz-hud-toggle:hover{background:rgba(30,30,50,.95);box-shadow:0 2px 14px rgba(0,0,0,.4)}
.qz-hud-toggle:active{transform:scale(.96)}
.qz-hud-toggle-icon{font-size:14px}
.qz-hud-badge{
  font-size:11px;font-weight:700;color:var(--primary);
  min-width:24px;text-align:center;
}

/* 펼침 패널 */
.qz-hud-panel{
  width:180px;margin-top:6px;
  background:rgba(20,20,30,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:10px 12px 8px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:opacity .2s,transform .2s;
  transform-origin:top right;
}
/* 접힌 상태: 패널 숨김 */
.qz-hud--collapsed .qz-hud-panel{
  opacity:0;transform:scale(.92) translateY(-4px);
  pointer-events:none;height:0;overflow:hidden;padding:0;margin:0;border:0;
}
/* 펼친 상태: 패널 표시 */
.qz-hud--expanded .qz-hud-panel{
  opacity:1;transform:scale(1) translateY(0);
  pointer-events:auto;height:auto;overflow:visible;
}

.qz-hud-title{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:6px;text-align:center;
}
.qz-hud-list{display:flex;flex-direction:column;gap:3px}
.qz-hud-row{
  display:flex;align-items:center;gap:5px;
  padding:3px 6px;border-radius:8px;
  font-size:13px;color:var(--text);
  transition:background .3s;
}
.qz-hud-row--me{
  background:rgba(var(--primary-rgb,99,102,241),.18);
  font-weight:700;
}
.qz-hud-rank{
  flex:0 0 22px;text-align:center;
  font-size:12px;font-weight:700;color:var(--muted);
}
.qz-hud-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;
}
.qz-hud-score{
  flex:0 0 auto;font-size:12px;font-weight:700;
  color:var(--primary);
}
.qz-hud-delta{
  flex:0 0 auto;font-size:11px;font-weight:700;
  margin-left:2px;
  animation:qzHudDeltaPop .4s cubic-bezier(.34,1.56,.64,1);
}
.qz-hud-delta--plus{color:#4ade80}
.qz-hud-delta--fade{opacity:0;transition:opacity .6s}
.qz-hud-more{
  text-align:center;font-size:11px;color:var(--muted);
  padding:2px 0;letter-spacing:2px;
}
@keyframes qzHudDeltaPop{
  0%{transform:scale(0) translateY(6px);opacity:0}
  60%{transform:scale(1.3) translateY(-2px);opacity:1}
  100%{transform:scale(1) translateY(0)}
}

/* 스피드 풀이 시간 */
.qz-hud-solve-time{
  display:inline-block;
  background:rgba(var(--primary-rgb,99,102,241),.15);
  color:var(--primary);font-weight:800;
  padding:1px 6px;border-radius:6px;
  font-size:16px;
}

/* 최단 정답 결과 스탯 */
.qz-hud-fastest-stat{
  text-align:center;margin:8px 0 4px;
  padding:8px 12px;
  background:rgba(var(--primary-rgb,99,102,241),.08);
  border:1px solid rgba(var(--primary-rgb,99,102,241),.15);
  border-radius:10px;
  font-size:14px;color:var(--text);
}

/* 모바일 */
@media(max-width:600px){
  .qz-hud{top:52px;right:6px}
  .qz-hud-toggle{padding:4px 8px;gap:3px}
  .qz-hud-toggle-icon{font-size:12px}
  .qz-hud-badge{font-size:10px;min-width:20px}
  .qz-hud-panel{width:140px;padding:6px 8px 5px;border-radius:10px}
  .qz-hud-title{font-size:10px;margin-bottom:4px}
  .qz-hud-row{padding:2px 4px;font-size:11px}
  .qz-hud-name{font-size:11px}
  .qz-hud-score{font-size:11px}
  .qz-hud-rank{flex:0 0 18px;font-size:11px}
  .qz-hud-delta{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .qz-hud-panel{transition:none !important}
  .qz-hud-row{transition:none !important}
  .qz-hud-delta{animation:none !important}
}

/* ===== 멀티 월드컵 reveal 듀얼 카드 ===== */
.rv-duel{
  display:flex;align-items:stretch;gap:10px;justify-content:center;
  margin:0 auto 14px;max-width:440px;
}
.rv-duel-card{
  flex:1;min-width:0;border-radius:14px;padding:12px 10px;text-align:center;
  border:2px solid transparent;position:relative;overflow:hidden;
}
.rv-duel-win{
  background:linear-gradient(135deg,rgba(76,125,255,.12),rgba(255,215,0,.08));
  border-color:rgba(255,215,0,.5);
  box-shadow:0 0 16px rgba(255,215,0,.12);
  animation:rvDuelWin .55s ease-out both;
}
.rv-duel-lose{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);
  animation:rvDuelLose .5s ease-out both;
}
@keyframes rvDuelWin{
  0%{opacity:.4;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes rvDuelLose{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:.45;transform:scale(.94);filter:saturate(.3)}
}
.rv-duel-thumb{
  width:64px;height:64px;border-radius:12px;object-fit:cover;
  margin:0 auto 6px;display:block;
}
.rv-duel-name{
  font-size:14px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;
}
.rv-duel-tag{
  display:inline-block;padding:2px 10px;border-radius:20px;
  font-size:11px;font-weight:700;
}
.rv-duel-tag.win{background:rgba(255,215,0,.22);color:#ffd700}
.rv-duel-tag.lose{background:rgba(255,255,255,.06);color:var(--muted)}
.rv-duel-vs{
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--muted);
  min-width:48px;flex-shrink:0;text-align:center;
  letter-spacing:.5px;
}
@media(max-width:600px){
  .rv-duel{gap:6px;max-width:100%}
  .rv-duel-card{padding:10px 6px}
  .rv-duel-thumb{width:48px;height:48px}
  .rv-duel-name{font-size:12px}
  .rv-duel-vs{min-width:36px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .rv-duel-win,.rv-duel-lose{animation:none !important}
}

/* ===== 멀티 퀴즈 난이도 chip ===== */
.mq-diff-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  font-size:11px;font-weight:600;line-height:1.4;
  vertical-align:middle;margin-left:8px;
}
.mq-diff-pct{color:var(--muted);font-size:10px}
.mq-diff-new{color:var(--muted);font-size:10px;font-style:italic}

/* ── 멀티 퀴즈 reveal 맥락 정보 ── */
.mq-reveal-ctx{
  display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;
  margin-top:8px;padding:6px 10px;
  border-radius:8px;background:rgba(255,255,255,.03);
}
.mq-reveal-ctx-item{
  font-size:12px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
@media(max-width:600px){
  .mq-diff-chip{padding:1px 6px;font-size:10px;margin-left:6px}
  .mq-reveal-ctx{gap:4px 8px;padding:4px 8px}
  .mq-reveal-ctx-item{font-size:11px}
}