:root{
  --bg:#0d0f13; --panel:#14171d; --panel-2:#1b1f27; --border:#2a2f3a;
  --text:#e6e8ec; --muted:#8b909c; --accent:#3d7dff; --accent-hover:#2f6ae0;
  --red:#ff4655; --orange:#ff7a1a; --green:#4ade80;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Pretendard","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
.wrap{display:flex;flex-direction:column;min-height:100vh;}

/* ===== 상단바 ===== */
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--border);background:var(--panel);}
.logo{font-size:22px;font-weight:800;letter-spacing:.5px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:9px;}
.logo-img{width:30px;height:30px;object-fit:contain;flex-shrink:0;}
.logo span{color:var(--accent);}
.nav{display:flex;align-items:center;}
.nav a{margin-left:22px;font-size:14px;color:var(--muted);text-decoration:none;transition:color .15s;}
.nav a:hover{color:var(--text);}
.nav-user{margin-left:22px;font-size:13px;color:var(--muted);}

/* 헤더 검색 */
.header-search{display:flex;align-items:center;margin-left:22px;border:1px solid var(--border);background:var(--panel-2);transition:border-color .15s;}
.header-search:focus-within{border-color:var(--accent);}
.header-search-input{width:150px;padding:8px 10px;font-size:13px;border:none;background:transparent;color:var(--text);outline:none;}
.header-search-input::placeholder{color:#5c616d;}
.header-search-btn{padding:8px 12px;font-size:13px;background:transparent;border:none;color:var(--muted);cursor:pointer;transition:color .15s;}
.header-search-btn:hover{color:var(--text);}

/* 햄버거 버튼 (데스크탑에서는 숨김) */
.menu-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:flex-end;
  gap:5px;width:30px;height:30px;background:transparent;border:none;cursor:pointer;padding:0;
}
.menu-toggle span{display:block;width:100%;height:2px;background:var(--text);transition:transform .2s ease,opacity .2s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== 히어로/검색 ===== */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;}

/* 로고 */
.hero-logo-wrap{margin-bottom:22px;}
.hero-logo{
  width:140px;height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
}

.title{font-size:40px;font-weight:800;letter-spacing:-.5px;}
.subtitle{margin-top:12px;color:var(--muted);font-size:15px;}
.search-box{display:flex;width:100%;max-width:560px;margin-top:36px;border:1px solid var(--border);background:var(--panel-2);transition:border-color .15s;}
.search-box:focus-within{border-color:var(--accent);}
.search-input{flex:1;padding:16px 18px;font-size:15px;border:none;background:transparent;color:var(--text);outline:none;}
.search-input::placeholder{color:#5c616d;}
.search-btn{padding:0 28px;font-size:15px;font-weight:700;color:#fff;background:var(--accent);border:none;cursor:pointer;transition:background .15s;}
.search-btn:hover{background:var(--accent-hover);}

/* 필터 */
.filter-box{width:100%;max-width:560px;margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.filter-group{display:flex;align-items:center;gap:8px;}
.filter-label{font-size:13px;color:var(--muted);}
.filter-box select{padding:9px 10px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-size:13px;cursor:pointer;transition:border-color .15s;}
.filter-box select:hover,.filter-box select:focus{border-color:var(--accent);outline:none;}

/* ===== 검색 결과 ===== */
.results{width:100%;max-width:560px;margin-top:24px;display:flex;flex-direction:column;gap:10px;}
.result-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:var(--panel);
  border:1px solid var(--border);border-left:3px solid transparent;
  text-align:left;text-decoration:none;
  transition:border-color .15s,background .15s,transform .1s;
}
.result-card:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--panel-2);transform:translateX(2px);}
.result-info{display:flex;flex-direction:column;gap:4px;}
.result-name{font-size:16px;font-weight:700;color:var(--text);}
.result-soop{font-size:12px;color:#6ba0ff;}
.result-sub{font-size:13px;color:var(--muted);}
.result-go{font-size:22px;color:var(--muted);transition:color .15s,transform .15s;}
.result-card:hover .result-go{color:var(--accent);transform:translateX(2px);}
.tier{color:var(--accent);font-weight:700;}

.empty{padding:24px;color:var(--muted);font-size:14px;border:1px dashed var(--border);}
.empty.small{padding:16px;font-size:13px;text-align:center;}

/* ===== 뱃지 ===== */
.badge{font-size:11px;font-weight:800;padding:2px 7px;margin-left:6px;vertical-align:middle;border-radius:2px;}
.badge.bj{background:#7c3aed;color:#fff;}
.badge.live{background:var(--red);color:#fff;}
.badge.mini{font-size:9px;padding:1px 5px;margin-left:0;}

/* ===== 프로필 페이지 ===== */
.profile-page{flex:1;max-width:480px;margin:0 auto;padding:40px 20px;width:100%;}
.profile-page.wide{max-width:960px;}
.back-link{display:inline-block;margin-bottom:20px;font-size:14px;color:var(--muted);text-decoration:none;}
.back-link:hover{color:var(--text);}

/* ===== 가로형 프로필 카드 ===== */
.pcard{
  display:flex;align-items:stretch;gap:20px;
  background:linear-gradient(160deg,#161a22,#10131a);
  border:1px solid var(--border);padding:22px;
}
/* 좌: 프로필 */
.pcard-left{display:flex;align-items:center;gap:18px;flex:1;min-width:260px;}
.pcard-avatar-wrap{position:relative;flex-shrink:0;}
.pcard-avatar{width:88px;height:88px;object-fit:cover;border:1px solid var(--border);border-radius:50%;}
.avatar-live{position:absolute;bottom:4px;right:4px;width:16px;height:16px;background:var(--red);border:2px solid #10131a;border-radius:50%;}
.pcard-id{display:flex;flex-direction:column;gap:5px;}
.pcard-clan{font-size:12px;color:var(--muted);}
.pcard-name{font-size:26px;font-weight:800;line-height:1.1;}
.pcard-sub{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;}
.pcard-sub span{color:#6ba0ff;}
.pcard-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.pc-link{padding:8px 14px;font-size:13px;font-weight:700;text-decoration:none;color:var(--red);border:1px solid var(--border);transition:background .15s;}
.pc-link:hover{background:var(--panel-2);}
.edit-open-btn{padding:8px 14px;font-size:13px;font-weight:700;color:var(--text);background:var(--panel-2);border:1px solid var(--accent);cursor:pointer;}
.edit-open-btn:hover{background:var(--accent);color:#fff;}

/* 중: 티어 */
.pcard-tiers{display:flex;gap:12px;align-items:center;}
.tbox{width:110px;padding:16px 10px;background:var(--panel-2);border:1px solid var(--border);display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;}
.tbox-label{font-size:12px;color:var(--muted);}
.tbox-val{font-size:17px;font-weight:800;color:var(--orange);}

/* 우: 썸네일 */
.pcard-thumb{width:300px;flex-shrink:0;align-self:flex-start;}
.thumb-live{display:block;position:relative;border:1px solid var(--border);height:100%;min-height:120px;}
.thumb-live img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;}
.thumb-title{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:12px;background:linear-gradient(transparent,rgba(0,0,0,.85));}
.thumb-title b{color:var(--orange);}
.thumb-off{display:flex;align-items:center;justify-content:center;height:100%;min-height:120px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);font-size:13px;}

.pcard-reg{margin-top:10px;font-size:11px;color:#5c616d;text-align:right;}
.pcard-extra{margin-top:20px;}

/* ===== 모달 ===== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100;}
.modal.open{display:flex;}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.7);}
.modal-panel{position:relative;width:92%;max-width:460px;max-height:85vh;overflow-y:auto;background:linear-gradient(160deg,#161a22,#10131a);border:1px solid var(--border);padding:26px;z-index:1;}
.modal-panel h3{font-size:18px;font-weight:800;margin-bottom:18px;}
.modal-panel h4{font-size:14px;color:var(--muted);}
.close-btn{position:absolute;top:14px;right:14px;background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;}
.close-btn:hover{color:var(--text);}
.edit-group{margin-bottom:16px;}
.edit-label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;}
.edit-row{display:flex;gap:10px;}
.edit-row select{flex:1;padding:12px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);}

/* ===== 로그 ===== */
.log-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.log-row{display:flex;gap:12px;font-size:12px;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);flex-wrap:wrap;}
.log-when{color:var(--muted);}
.log-who{color:#6ba0ff;font-weight:700;}
.log-target{color:#ffab6b;font-weight:700;}
.log-what{color:var(--text);}
.log-tag{font-size:10px;font-weight:800;padding:1px 6px;margin-right:4px;}
.log-tag.create{background:#166534;color:#fff;}
.log-tag.update{background:#1e40af;color:#fff;}

/* ===== 관리자/폼 ===== */
.admin{flex:1;max-width:520px;margin:0 auto;padding:50px 20px;width:100%;}
.admin-title{font-size:26px;font-weight:800;margin-bottom:28px;}
.admin-form{display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field span{font-size:13px;color:var(--muted);}
.field input,.field select{padding:13px 14px;font-size:15px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);outline:none;}
.field input:focus,.field select:focus{border-color:var(--accent);}
.field-row{display:flex;gap:14px;}
.field-row .field{flex:1;}
.grade-field{max-width:120px;}
.search-btn.full{width:100%;padding:15px;margin-top:6px;}
.admin-msg{margin-top:14px;font-size:14px;}
.hint{font-size:11px;color:#5c616d;}
.hint b{color:var(--accent);}
.input-with-btn{display:flex;gap:8px;}
.input-with-btn input{flex:1;padding:13px 14px;font-size:15px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);outline:none;}
.input-with-btn input:focus{border-color:var(--accent);}
.check-btn{padding:0 20px;font-size:14px;font-weight:700;color:#fff;background:var(--accent);border:none;cursor:pointer;white-space:nowrap;}
.check-btn:hover{background:var(--accent-hover);}
.check-btn:disabled{opacity:.6;cursor:default;}
.check-result{font-size:12px;}
.checkbox-field{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);}
.checkbox-field input{width:16px;height:16px;}
.signup-done{padding:24px;border:1px solid var(--border);background:var(--panel);text-align:center;}

/* 관리자 관리 목록 */
.section-title{font-size:16px;font-weight:800;margin:20px 0 12px;}
.manage-list{display:flex;flex-direction:column;gap:8px;}
.manage-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--border);flex-wrap:wrap;}
.mr-info b{font-size:15px;}
.mr-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.mr-actions{display:flex;gap:8px;align-items:center;}
.mr-actions select{padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);}
.btn-approve{padding:8px 16px;font-size:13px;font-weight:700;color:#fff;background:var(--accent);border:none;cursor:pointer;}
.btn-approve:hover{background:var(--accent-hover);}
.btn-reject{padding:8px 16px;font-size:13px;font-weight:700;color:#f87171;background:transparent;border:1px solid var(--border);cursor:pointer;}
.btn-reject:hover{background:#2a1414;}

/* ===== 하단 ===== */
.footer{padding:28px 20px;text-align:center;border-top:1px solid var(--border);background:var(--panel);}
.footer-links a{margin:0 10px;font-size:13px;color:var(--muted);text-decoration:none;}
.footer-links a:hover{color:var(--text);}
.copyright{margin-top:12px;font-size:12px;color:#565b66;}

/* ===== 반응형 ===== */
@media (max-width:900px){
  .pcard{flex-direction:column;}
  .pcard-thumb{width:100%;}
  .pcard-tiers{justify-content:flex-start;}
}
@media (max-width:600px){
  .hero-logo{width:100px;}
  .title{font-size:30px;}
  .topbar{padding:14px 18px;}

  .menu-toggle{display:flex;}

  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--panel);border-bottom:1px solid var(--border);
    z-index:50;
  }
  .nav.open{display:flex;}
  .nav a{margin-left:0;padding:14px 18px;border-top:1px solid var(--border);}
  .nav-user{margin-left:0;padding:14px 18px;border-top:1px solid var(--border);}
  .header-search{margin-left:0;margin:14px 18px;border-top:1px solid var(--border);}
  .header-search-input{width:auto;flex:1;}
  .result-card{flex-direction:column;align-items:flex-start;gap:12px;}
  .field-row{flex-direction:column;}
  .pcard-left{flex-direction:column;text-align:center;align-items:center;}
  .pcard-sub,.pcard-actions{justify-content:center;}
  .tbox{width:calc(50% - 6px);}
}

/* ============================================
   1) 티어 하이라이트 (각지고 심플하게, 글로우 없이)
   1티어 빨강 / 2티어 주황 / 3티어 노랑 / 4티어 파랑 / 5티어 초록
   ============================================ */
.tier-box {
  position: relative;
  border: 1px solid var(--border);
  border-left: 3px solid var(--tier-color, var(--accent));
  background: var(--panel-2);
  transition: border-color .15s ease, background .15s ease;
}

.tier-box .tier-label { color: var(--muted); font-size: 12px; }
.tier-box .tier-value {
  font-weight: 800;
  color: var(--tier-color, #fff);
}

.tier-box:hover {
  border-color: var(--tier-color, var(--accent));
  background: var(--panel);
}

.tier-1 { --tier-color:#ff4d4d; }  /* 1티어 - 빨강 */
.tier-2 { --tier-color:#ff9f43; }  /* 2티어 - 주황 */
.tier-3 { --tier-color:#feca57; }  /* 3티어 - 노랑 */
.tier-4 { --tier-color:#4a9eff; }  /* 4티어 - 파랑 */
.tier-5 { --tier-color:#4ade80; }  /* 5티어 - 초록 */

/* ============================================
   2) 라이브 썸네일 제목 영역 (군더더기 없이)
   ============================================ */
.live-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  overflow: hidden;
}
.live-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하단 그라데이션 + 제목 */
.live-thumb .thumb-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thumb-off { aspect-ratio: 16 / 9; }

/* LIVE 뱃지 + 시청자수 */
.live-thumb .live-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 7px;
}
.live-thumb .viewer-count {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  padding: 3px 7px;
}
.live-card{ background-color: var(--panel-2, #1a1e27); } /* 힌트 배경용 */

.live-hint{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  background:var(--panel);
  transition:opacity .2s ease;
}
.live-hint-icon{ font-size:22px; opacity:.8; }
.live-hint-text{
  font-size:11px; font-weight:600; color:var(--muted);
}
.live-card:hover .live-hint{ opacity:0; pointer-events:none; }
/* ============================================
   3) 최근 동향 섹션 (플랫하게)
   ============================================ */
.recent-box {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.recent-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.recent-title { font-size: 14px; font-weight: 800; color: var(--text); }
.recent-sub   { font-size: 11px; color: var(--muted); }

.recent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.recent-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 6px;
  background: var(--panel-2);
  border: 1px solid transparent;
  text-align: center;
}
.ri-label { font-size: 11px; color: var(--muted); }
.ri-value { font-size: 16px; font-weight: 800; color: var(--text); }

/* 승률/킬뎃은 강조 */
.recent-item.highlight {
  background: #1a1f2e;
  border: 1px solid rgba(61,125,255,.35);
}
.recent-item.highlight .ri-value {
  color: #7c9dff;
}

@media (max-width: 640px) {
  .recent-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   4) 매치 기록
   ============================================ */
.match-box {
  margin-top: 16px;
}
.match-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.match-title { font-size: 14px; font-weight: 800; color: var(--text); }
.match-sub   { font-size: 11px; color: var(--muted); }

.match-list { display: flex; flex-direction: column; gap: 8px; }
.match-item { display: flex; flex-direction: column; }

.match-row {
  display: grid;
  grid-template-columns: 1.4fr 56px 48px 48px 60px 76px 72px 20px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.match-row:hover { background: var(--panel-2); border-color: var(--accent); }

.match-map-col { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.match-map { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-type { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.match-result { font-weight: 800; font-size: 14px; text-align: center; color: var(--muted); }
.match-result.win  { color: var(--red); }
.match-result.lose { color: #5c616d; }

.match-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.match-stat b { font-size: 14px; font-weight: 800; color: var(--text); }
.match-stat span { font-size: 10px; color: var(--muted); }

.match-toggle-btn { color: var(--muted); font-size: 13px; text-align: right; }

.match-detail-panel {
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-top: none;
}
.match-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.match-team { display: flex; flex-direction: column; gap: 4px; }
.match-player {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.match-player.me { border-color: var(--accent); color: var(--text); }
.mp-name-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.mp-name  { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.mp-name-link { cursor: pointer; }
.mp-name-link:hover { color: var(--accent); text-decoration: underline; }
.mp-badges { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mp-tier { font-size: 9px; font-weight: 800; padding: 1px 5px; border: 1px solid var(--tier-color, var(--border)); color: var(--tier-color, var(--muted)); white-space: nowrap; }
.mp-kda   { color: #6ba0ff; white-space: nowrap; }
.mp-dmg   { color: var(--orange); text-align: right; white-space: nowrap; }

@media (max-width: 640px) {
  .match-row {
    grid-template-columns: 1fr 44px 40px 40px 64px 18px;
  }
  .match-stat.hide-mobile { display: none; }
  .match-teams { grid-template-columns: 1fr; }
}
/* 콘텐츠가 짧아도 푸터가 항상 맨 아래에 붙도록 */
.wrap > main{ flex:1 0 auto; }
.wrap > .footer{ flex-shrink:0; }

/* ===== 로딩 오버레이 (반투명 + 모달) ===== */
#loading-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
#loading-overlay.show{ display:flex; }

.loading-box{
  background: linear-gradient(160deg,#161a22,#10131a);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.loading-spinner{
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--accent, #ff8a00);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.loading-box p{
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.home-live{ width:100%;max-width:900px;margin:0 auto 48px;padding:0 20px; }
.live-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.live-card{
  position:relative;
  aspect-ratio:16/9;
  background:var(--panel);
  border:1px solid var(--border);
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:inherit;
}
.live-card .live-thumb{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity .2s ease;
}
.live-card:hover .live-thumb{ opacity:1; }
.live-card .live-viewer{
  position:absolute; top:8px; left:8px; z-index:2;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:10px; padding:2px 6px; border-radius:3px;
}
.live-card .live-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:8px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
}
.live-card .live-title{
  display:block;
  font-size:12px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.live-card .live-name{
  font-size:11px; color:#ddd;
}
@media (max-width:700px){
  .live-grid{ grid-template-columns:repeat(2,1fr); }
}
/* 프로필 페이지 방송 썸네일 - hover로 보이기 */
.pcard-thumb .live-thumb{ position:relative; overflow:hidden; display:block; }

.pcard-thumb .live-thumb img{
  opacity:0;
  transition:opacity .2s ease;
}
.pcard-thumb .live-thumb:hover img{ opacity:1; }

.pcard-thumb .live-hint{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  background:var(--panel);
  transition:opacity .2s ease;
}
.pcard-thumb .live-hint-icon{ font-size:24px; opacity:.8; }
.pcard-thumb .live-hint-text{ font-size:12px; font-weight:600; color:var(--muted); }
.pcard-thumb .live-thumb:hover .live-hint{ opacity:0; pointer-events:none; }

/* 힌트 위로 뱃지들이 항상 보이게 */
.pcard-thumb .live-badge,
.pcard-thumb .viewer-count,
.pcard-thumb .thumb-title{ z-index:2; }
.page-title{ font-size:22px; font-weight:800; margin-bottom:24px; }
.live-section{ margin-bottom:36px; }
.live-section-title{ font-size:15px; font-weight:700; color:var(--muted); margin-bottom:14px; }

.offline-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.offline-card{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 16px;
  background:var(--panel);
  border:1px solid var(--border);
  text-decoration:none; color:inherit;
  transition:border-color .15s, background .15s;
}
.offline-card:hover{ border-color:var(--accent); background:var(--panel-2); }
.offline-name{ font-size:14px; font-weight:700; color:var(--text); }
.offline-id{ font-size:11px; color:var(--muted); }

@media (max-width:700px){
  .offline-grid{ grid-template-columns:repeat(2,1fr); }
}