@charset "utf-8";

/* ============================================================
   K-POP VOTE 페이지
   - 사이트 룩앤필: Pretendard(본문) / .neue(영문 제목) / #111 텍스트
   - 포인트 컬러: #01FF9A (차트 강조색과 통일)
   - 흰 배경 위 텍스트는 가독성 위해 진한 그린 보조 사용
   ============================================================ */

.vote-page {
  --vote-accent:#01FF9A;        /* 면 채움(배지/배너/버튼) — 차트와 동일 */
  --vote-accent-ink:#06c47d;    /* 흰 배경 위 텍스트 — 선명한 에메랄드 그린(가독성) */
}

.vote-inner { max-width: 900px; margin: 0 auto; padding: 40px 20px 100px; }

/* ===== 히어로: 타이틀 + 카운트다운 (검정 베이스 + 형광 그린 액센트) ===== */
.vote-hero { position:relative; margin:0 0 30px; border-radius:18px; overflow:hidden; background:#0b0b0c; min-height:260px; display:flex; align-items:center; justify-content:flex-start; text-align:left; }
.vote-hero-bg { position:absolute; inset:0; z-index:0;
  background-image:url('../images/vote/hero-bg.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.vote-hero-inner { position:relative; z-index:1; padding:48px 44px; width:100%; }

/* 1줄: 파트너 로고 스트립 + 가운데 빌보드 KR 로고 오버레이 (좌측 정렬) */
.vote-hero-logos { position:relative; width:100%; margin:0 0 130px; }
.vote-hero-logos .strip { display:block; width:100%; height:auto; }
.vote-hero-logos .center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; width:auto; }

/* 2줄: 캠페인 타이틀 이미지 (billboard TOP K-ARTISTS) — 레퍼런스 대비 약 70% 축소 */
.vote-hero-title-img { display:block; width:80%; max-width:580px; height:auto; margin:0; }
.vote-hero-count { display:inline-flex; align-items:center; gap:12px; margin-top:40px; padding:10px 18px; border:1px solid rgba(255,255,255,.5); border-radius:40px; background:rgba(255,255,255,.12); }
.vote-hero-count .label { font-size:11px; letter-spacing:.14em; color:#fff; }
.vote-hero-count .count { font-size:24px; font-weight:700; letter-spacing:0; color:#fff; }

/* 기간 상태별 */
.vote-page[data-period="before"] .vote-hero-count { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); }
.vote-page[data-period="before"] .vote-hero-count .label { color:#fff; }
.vote-page[data-period="before"] .vote-hero-count .count { color:#fff; }
/* 종료: 카운트다운 숫자 영역 미사용 (라벨 VOTING CLOSED 만) */
.vote-page[data-period="after"] .vote-hero-count .count { display:none; }
.vote-page[data-period="after"] .vote-hero-count { gap:0; }

/* 캠페인 설명: 카운트다운 아래 흰 카드(그라데이션 폰트) */
.vote-hero-notice { margin-top:40px; background:#fff; padding:4px 4px; }

/* ===== 안내 영역: 남은 투표 박스 =====
   캠페인 설명은 히어로 내부로 이동했고, 여기는 '남은 투표' 행만 남는다.
   탭 위(= 안내 영역 ↔ 투표 영역) 여백을 크게 벌려 두 그룹을 분리한다. */
.vote-intro { background:#f5f7fa; border-radius:14px; padding:6px 20px; margin:0 0 44px; }

/* 캠페인 설명: 흰 배경 위 파랑→보라→핑크 폰트 그라데이션 (히어로 내부 흰 카드)
   레퍼런스 대비: 좌측 일부만 파랑/보라, 우측 60%+는 차분한 핑크로 유지.
   샘플 색상 — 좌:#3857af, 보라:#4a47af, 핑크:#ba6c8f */
.vote-notice-txt {
  margin:0; padding:18px 20px;
  font-size:13px; line-height:1.7; font-weight:600; word-break:keep-all;
  background:linear-gradient(90deg, #3857af 0%, #4a47af 16%, #8a5a9e 30%, #ba6c8f 42%, #ba6c8f 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* 남은 표 행 (박스 첫 행) */
.vote-remain { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; font-size:14px; }
.vote-remain .num { font-weight:700; font-size:18px; color:var(--vote-accent-ink); }
.vote-remain .reset { color:#888; }
.vote-remain .hint { color:#888; font-size:12px; }
.vote-remain .used-msg { display:none; color:#c0392b; font-size:12px; }
.vote-remain .before-txt,
.vote-remain .after-txt { display:none; }
/* 오픈 예고 문구는 '매일 자정 초기화'(.reset)와 동일한 회색/기본 스타일 */
.vote-remain .before-txt { color:#888; font-weight:400; }

/* ===== 기간 상태별 안내 문구 분기 ===== */
/* 시작 전: 오픈 예고만 노출 (남은표 카운터/소진 안내는 숨김) */
.vote-page[data-period="before"] .vote-remain .txt,
.vote-page[data-period="before"] .vote-remain .used-msg,
.vote-page[data-period="before"] .vote-remain .after-txt { display:none; }
.vote-page[data-period="before"] .vote-remain .before-txt { display:inline; }
/* 종료: 종료 안내만 노출 */
.vote-page[data-period="after"] .vote-remain .txt,
.vote-page[data-period="after"] .vote-remain .hint,
.vote-page[data-period="after"] .vote-remain .used-msg,
.vote-page[data-period="after"] .vote-remain .before-txt { display:none; }
.vote-page[data-period="after"] .vote-remain .after-txt { display:inline; }

/* 표 소진(진행 중): hint→used-msg 교체, 숫자 강조 (배경은 박스 통일로 미변경) */
.vote-page.no-votes .vote-remain .num { color:#c0392b; }
.vote-page.no-votes .vote-remain .hint { display:none; }
.vote-page.no-votes .vote-remain .used-msg { display:inline; }
/* 비로그인: 개인화된 '남은표' 행은 숨김(투표 클릭 시 로그인 팝업으로 유도).
   캠페인 설명은 히어로로 이동했으므로, 남은표 행만 있는 안내 박스는 통째로 숨긴다. */
.vote-page[data-auth="guest"] .vote-intro { display:none; }

/* ===== 카테고리 탭 (밑줄 스타일, 4탭 균등 분배 — 모든 폭에서 스크롤 없음) ===== */
.vote-tabs { display:flex; border-bottom:2px solid #eee; margin-bottom:26px; }
.vote-tabs button { flex:1 1 0; min-width:0; background:none; border:none; padding:12px 6px; font-size:15px; font-weight:600; color:#999; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; text-align:center; }
.vote-tabs button.active { color:#111; border-bottom-color:var(--vote-accent-ink); }

/* ===== 탭 패널 ===== */
.vote-panel { display:none; }
.vote-panel.active { display:block; }

/* ===== 1위 배너 ===== */
.vote-top { position:relative; border-radius:16px; overflow:hidden; margin-bottom:22px; background:#111; min-height:200px; display:flex; align-items:stretch; }
.vote-top .bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.32; }
/* 배경 가독성 확보: 좌측 더 진하게 + 전체 어두운 베일 */
.vote-top .bg-grad { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.9) 35%,rgba(0,0,0,.45)); }
/* 1위 순위 숫자: 프로필 왼쪽 큰 흰색 숫자 (리스트 rank와 동일 위치, 크게) */
.vote-top .rank-num { flex:0 0 auto; font-size:72px; font-weight:800; line-height:1; color:#fff; width:64px; text-align:center; align-self:center; }
.vote-top .inner { position:relative; z-index:2; display:flex; align-items:center; gap:22px; padding:26px; width:100%; }
.vote-top .ph-wrap { position:relative; flex:0 0 auto; }
.vote-top .ph { width:130px; height:130px; border-radius:14px; object-fit:cover; background:#333; display:block; }
/* meta가 배너 가로 공간을 채워 바 기준 너비를 이름 길이와 무관하게 일정 유지 */
.vote-top .meta { flex:1 1 auto; min-width:0; }
.vote-top .meta * { color:#fff; }
.vote-top .meta .nm { font-size:28px; font-weight:700; margin:0 0 4px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* 1위 프로그레스바(100%): 반투명 흰 트랙 + 그린 채움 */
.vote-top .meta .bar { height:6px; border-radius:4px; background:rgba(255,255,255,.18); margin:12px 0; overflow:hidden; }
.vote-top .meta .bar i { display:block; height:100%; border-radius:4px; background:var(--vote-accent); }
/* 1위 득표수: 흰색 */
.vote-top .meta .votes { font-size:13px; color:#cfcfcf; font-weight:500; }
.vote-top .meta .votes b { color:#fff; font-size:18px; font-weight:700; }
/* 투표 버튼 우측 정렬 (다른 순위와 동일 위계) */
.vote-top .vote-btn-wrap { flex:0 0 auto; margin-left:auto; align-self:center; }

/* ===== 공통 투표 버튼 (그린 면 + 짙은 글씨) ===== */
/* min-width 고정 → 상태 변화 시 폭 흔들림(프로그레스바 출렁임) 방지 */
.vbtn { background:var(--vote-accent); color:#063d2a; border:none; border-radius:24px; padding:11px 22px; min-width:72px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; transition:background .2s; white-space:nowrap; }
.vbtn:hover { background:#00e389; }
.vbtn.small { padding:9px 18px; min-width:66px; font-size:13px; }
.vote-top .vbtn { padding:12px 26px; min-width:88px; font-size:15px; }
.vote-top .vbtn:hover { background:#00e389; }
/* 로딩 중: 텍스트 유지(레이아웃 고정), 살짝 흐리게 */
.vbtn.is-loading { opacity:.6; cursor:progress; }
/* 비활성(0표 소진 등) — 1위 배너 포함 모든 버튼에 우선 적용 */
.vbtn:disabled,
.vote-top .vbtn:disabled { background:#d4d4d4; color:#888; cursor:not-allowed; }
/* 기간 외(시작 전/종료)엔 투표 버튼 숨김 */
.vote-page[data-period="before"] .vbtn,
.vote-page[data-period="after"] .vbtn { display:none; }

/* ===== 순위 리스트: 순위 / 프로필 / (후보명·소개·프로그레스·득표수) / 투표 버튼 ===== */
.vote-rank-list li { display:flex; align-items:center; gap:18px; padding:18px 6px; border-bottom:1px solid #eee; }
.vote-rank-list .rank { font-size:22px; font-weight:700; width:34px; text-align:center; flex:0 0 auto; }
/* 프로그레스 추가된 만큼 이미지도 키워 비율 맞춤 */
.vote-rank-list .ph { width:112px; height:112px; border-radius:14px; object-fit:cover; flex:0 0 auto; background:#eee; }
.vote-rank-list .info { flex:1 1 auto; min-width:0; padding-right:8px; }
/* 후보명: 최대 2줄 + 말줄임 */
.vote-rank-list .info .nm { font-size:19px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* 프로그레스바: 1위 대비 비율. 흰 배경에선 형광이 부담 → 진한→밝은 그린 그라데이션으로 톤다운 */
.vote-rank-list .info .bar { height:6px; border-radius:4px; background:#ececec; margin:9px 0; overflow:hidden; }
.vote-rank-list .info .bar i { display:block; height:100%; min-width:6px; border-radius:4px; background:linear-gradient(90deg,#06c47d,#2ee89f); }
/* 득표수: 흰 배경 가독성 위해 검정 또렷하게 (그린은 바로 충분히 살아있음) */
.vote-rank-list .info .votes { font-size:12px; color:#999; font-weight:500; }
.vote-rank-list .info .votes .vc { color:#111; font-size:17px; font-weight:700; }
.vote-rank-list .vbtn { flex:0 0 auto; }

/* 비로그인도 득표수/순위 모두 노출 (투표만 로그인 필요) */

/* ===== 빈 카테고리 ===== */
.vote-empty { text-align:center; padding:70px 0; color:#aaa; font-size:14px; }

/* ============================================================
   투표 완료 토스트 (상단 중앙)
   - 득표율 표기로 "반영됐나?"가 안 보이는 문제 보완용 즉각 피드백
   - 검정 베이스 + 그린 체크. 2.5초 자동 소멸(JS), 연타 시 하나만 갱신
   ============================================================ */
.vote-toast {
  position:fixed; top:24px; left:50%; z-index:1200;
  display:inline-flex; align-items:center; gap:9px;
  max-width:calc(100% - 32px); padding:12px 20px;
  background:#0b0b0c; color:#fff; border-radius:40px;
  font-size:14px; font-weight:600; line-height:1.3;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  /* 기본: 숨김(위로 살짝 + 투명). .show 시 슬라이드 다운 */
  transform:translate(-50%,-16px); opacity:0; pointer-events:none;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s ease;
}
.vote-toast.show { transform:translate(-50%,0); opacity:1; }
/* 체크: VOTE 버튼/배경과 동일한 형광 그린(#01FF9A). 배경 없이 마크 자체를 강조 */
.vote-toast .vote-toast-ic {
  flex:0 0 auto;
  color:var(--vote-accent);
  font-size:16px; font-weight:800; line-height:1; text-align:center;
}
/* 메시지: '투표가 완료되었어요' 고정 텍스트 (한 줄).
   전역 span/텍스트 색이 덮어쓰지 않도록 흰색을 명시 */
.vote-toast .vote-toast-msg { color:#fff; white-space:nowrap; }
@media (max-width:600px){
  .vote-toast { top:16px; font-size:13px; padding:11px 16px; }
}

/* ============================================================
   투표 팝업 보정 (공통 .acc-pop 위에 얹는 vote 전용 정렬)
   - 공통 팝업 버튼이 height:60px로 과대 → 적정 크기, 설명-버튼 간격 확보
   ============================================================ */
#vote_login_popup.acc-pop,
#vote_verify_popup.acc-pop,
#vote_notice_popup.acc-pop { width:380px; border-radius:14px; overflow:hidden; }
#vote_login_popup .acc-pop-inner,
#vote_verify_popup .acc-pop-inner,
#vote_notice_popup .acc-pop-inner { padding:24px 24px 20px; }
#vote_login_popup .acc-pop-title,
#vote_verify_popup .acc-pop-title,
#vote_notice_popup .acc-pop-title { display:flex; justify-content:space-between; align-items:flex-start; }
#vote_login_popup .acc-pop-title h3,
#vote_verify_popup .acc-pop-title h3,
#vote_notice_popup .acc-pop-title h3 { font-size:18px; font-weight:700; }
/* close 텍스트 링크 → X 형태 정돈 */
#vote_login_popup .acc-pop-title a,
#vote_verify_popup .acc-pop-title a,
#vote_notice_popup .acc-pop-title a { font-size:0; width:22px; height:22px; position:relative; flex:0 0 auto; }
#vote_login_popup .acc-pop-title a::before,
#vote_verify_popup .acc-pop-title a::before,
#vote_notice_popup .acc-pop-title a::before { content:"\00d7"; font-size:22px; line-height:22px; color:#888; }
/* 설명과 버튼 사이 간격 */
#vote_login_popup .acc-pop-txt,
#vote_verify_popup .acc-pop-txt,
#vote_notice_popup .acc-pop-txt { margin:14px 0 22px; }
#vote_login_popup .acc-pop-txt p,
#vote_verify_popup .acc-pop-txt p,
#vote_notice_popup .acc-pop-txt p { font-size:14px; color:#555; line-height:1.5; }
/* 버튼 영역: 적정 높이, gap */
#vote_login_popup .acc-pop-btn,
#vote_verify_popup .acc-pop-btn,
#vote_notice_popup .acc-pop-btn { display:flex; gap:10px; }
#vote_login_popup .acc-pop-btn a,
#vote_verify_popup .acc-pop-btn a,
#vote_notice_popup .acc-pop-btn a { height:46px; border-radius:8px; font-size:14px; font-weight:600; }
/* '닫기'(취소) — 보더 / '로그인하기/확인'(confirm) — 검정 (공통 팝업과 동일) */
#vote_login_popup .acc-pop-btn a:first-of-type,
#vote_verify_popup .acc-pop-btn a:first-of-type,
#vote_notice_popup .acc-pop-btn a:first-of-type { color:#777; border:1px solid #ddd; background:#fff; }
#vote_login_popup .acc-pop-btn a:last-of-type,
#vote_verify_popup .acc-pop-btn a:last-of-type,
#vote_notice_popup .acc-pop-btn a:last-of-type { color:#fff; border:1px solid #000; background:#000; }
/* 단일 버튼(notice)일 때 전체폭 */
#vote_notice_popup .acc-pop-btn.single a { width:100%; }

@media (max-width:600px){
  #vote_login_popup.acc-pop,
  #vote_verify_popup.acc-pop,
  #vote_notice_popup.acc-pop { width:calc(100% - 40px); }
}

/* ============================================================
   반응형
   ============================================================ */

/* 태블릿 (601 ~ 900) */
@media (max-width:900px){
  .vote-hero-inner { padding:40px 32px; }
  .vote-top .ph { width:130px; height:130px; }
  .vote-top .meta .nm { font-size:26px; }
  .vote-rank-list .ph { width:96px; height:96px; }
}

/* 모바일 (~600) */
@media (max-width:600px){
  .vote-inner { padding:24px 16px 80px; }
  .vote-hero { min-height:160px; }
  .vote-hero-inner { padding:28px 20px; }
  .vote-hero-logos { max-width:100%; margin-bottom:90px; }
  .vote-hero-title-img { max-width:80%; }
  .vote-hero-count { gap:8px; padding:8px 14px; margin-top:30px; }
  .vote-hero-count .count { font-size:17px; }
  .vote-hero-notice { max-width:100%; margin-top:30px; }

  .vote-intro { padding:4px 16px; margin-bottom:32px; }
  .vote-notice-txt { font-size:12px; line-height:1.55; }

  .vote-remain { flex-direction:column; align-items:flex-start; gap:6px; }

  /* 탭: 균등 분배 유지(스크롤 없음). 라벨 짧으므로 폰트만 축소 */
  .vote-tabs button { font-size:12px; padding:11px 2px; }

  /* 1위 배너: [순위숫자][이미지][정보] 한 줄, 버튼은 아래 전체폭 */
  .vote-top { min-height:0; }
  .vote-top .rank-num { font-size:40px; width:30px; align-self:center; }
  .vote-top .inner { flex-wrap:wrap; gap:12px; padding:18px; }
  .vote-top .ph { width:88px; height:88px; }
  .vote-top .meta { flex:1 1 120px; }
  .vote-top .meta .nm { font-size:21px; margin:0 0 3px; }
  .vote-top .vote-btn-wrap { width:100%; margin-left:0; }
  .vote-top .vbtn { width:100%; }

  /* 리스트: 이미지 적당히, 버튼과 텍스트 사이 간격 확보해 ... 늦게 잘림 */
  .vote-rank-list li { gap:12px; padding:14px 2px; }
  .vote-rank-list .rank { width:22px; font-size:18px; }
  .vote-rank-list .ph { width:78px; height:78px; border-radius:12px; }
  .vote-rank-list .info .nm { font-size:16px; }
  .vote-rank-list .info .bar { margin:7px 0; height:5px; }
  .vote-rank-list .info .votes { font-size:11px; }
  .vote-rank-list .info .votes .vc { font-size:13px; }
  .vote-rank-list .vbtn.small { padding:8px 14px; font-size:12px; }
}