/* =====================================================
   match-card.css - 매치 카드 / 선수 픽 카드 공용 스타일
   index.html(홈 Recent) + matches.html(브라우징) 공용.
   호스트 페이지의 :root 변수(--blue/--red/--gold/--purple/--border/--bg2/--font)에 의존.
   ===================================================== */

    /* ===== 리그/페이즈 탭 (index 홈 + matches 공용) =====
       index는 <a> 링크 탭(matches로 이동), matches는 <button> 필터 탭. 스타일 공유. */
    .league-tabs-wrap {
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      padding: 0 40px;
      overflow-x: auto;       /* 탭 많아지면 가로 스크롤 */
      scrollbar-width: thin;
    }
    .league-tabs-wrap::-webkit-scrollbar { height: 4px; }
    .league-tabs-wrap::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 2px; }
    .league-tabs { display: flex; min-width: max-content; }
    .tab {
      background: none; border: none;
      border-bottom: 2px solid transparent;
      color: #666; font-family: var(--font);
      font-weight: 700; font-size: calc(0.75rem * 1.4);
      padding: 8px 18px; cursor: pointer;
      letter-spacing: 0.05em;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    a.tab { text-decoration: none; display: inline-flex; align-items: center; }
    .tab:hover { color: #ddd; }
    .tab.active { color: var(--purple); border-bottom-color: var(--purple); }

    /* ===== 2단 탭: 아랫줄 = 선택된 대회의 단계(phase) — 윗줄보다 작고 살짝 들여 1단계 아래로 읽히게 ===== */
    .league-subtabs-wrap {
      background: rgba(168,85,247,0.05);     /* 윗줄과 구분되는 옅은 보라 띠 */
      border-bottom: 1px solid var(--border);
      padding: 0 40px;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    .league-subtabs-wrap[hidden] { display: none; }
    .league-subtabs-wrap::-webkit-scrollbar { height: 4px; }
    .league-subtabs-wrap::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 2px; }
    .league-subtabs { display: flex; min-width: max-content; }
    .subtab {
      background: none; border: none;
      border-bottom: 2px solid transparent;
      color: #777; font-family: var(--font);
      font-weight: 600; font-size: calc(0.72rem * 1.3);
      padding: 6px 15px; cursor: pointer;
      letter-spacing: 0.04em;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    a.subtab { text-decoration: none; display: inline-flex; align-items: center; }
    .subtab:hover { color: #ccc; }
    .subtab.active { color: var(--purple); border-bottom-color: var(--purple); }

    /* ===== 로딩 / 에러 ===== */
    .loading {
      text-align: center;
      padding: 60px 20px;
      color: #444;
      font-size: 0.9rem;
      letter-spacing: 0.1em;
    }

    .empty {
      text-align: center;
      padding: 60px 20px;
      color: #333;
      font-size: 0.85rem;
    }

    /* ===== 매치 카드 ===== */
    .match-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin: 0 auto 14px;  /* 가운데 정렬 + 아래 여백 */
      background: rgba(255,255,255,0.02);
      max-width: 1600px;  /* 카드 최대 너비 캡 */
    }

    .match-header {
      display: flex; align-items: center;
      gap: 10px; padding: 10px 18px;
      border-bottom: 1px solid var(--border);
      font-size: calc(0.7rem * 1.4); flex-wrap: wrap;
      cursor: pointer;                                /* 헤더 클릭 → splash 영역 토글 */
      user-select: none;
      transition: background-color 0.15s;
    }
    .match-header:hover { background: rgba(255,255,255,0.03); }
    /* 접힌 상태 — splash 영역 숨김 + 헤더 하단 보더 제거 */
    .match-card.collapsed .skins-area { display: none; }
    .match-card.collapsed .match-header { border-bottom: none; }
    /* 접기/펴기 chevron — ▼(열림) / ▶(접힘) */
    .match-header .collapse-chev {
      color: #555; font-size: 0.7em; margin-right: 2px;
      transition: color 0.15s;
    }
    .match-header:hover .collapse-chev { color: #aaa; }
    .ml {
      color: var(--blue); font-weight: 700; letter-spacing: 0.08em;
      text-decoration: none;
    }
    .ml:hover { color: #fff; }
    /* 카드 앞 대회 라벨의 단계 칩 — "LCK · R2"의 "· R2" 부분 (LCK 내부 단계 구분용) */
    .ml-phase { color: var(--purple); font-weight: 700; letter-spacing: 0.04em; }
    .ml-phase::before { content: "· "; color: #555; font-weight: 400; }
    .ml:hover .ml-phase { color: #c9a8ff; }
    .mg {
      text-decoration: none;
    }
    .mg:hover { color: var(--blue); }
    /* 팀명 — 데스크탑은 풀네임, 모바일은 short_code (CSS 토글) */
    .team-full { display: inline; }
    .team-short { display: none; }
    /* 날짜 — 텍스트 위에 투명한 date input을 덮어놔서 클릭한 자리에서 picker 팝업 */
    .md {
      color: #555;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px;
      transition: color 0.15s;
      user-select: none;
      position: relative;
    }
    .md:hover { color: var(--blue); }
    .md::before { content: '📅'; font-size: 0.9em; opacity: 0.6; }
    .md:hover::before { opacity: 1; }
    /* 투명 input — 텍스트 영역을 정확히 덮어서 picker가 그 자리에 뜸 */
    .md input[type="date"] {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      opacity: 0;
      cursor: pointer;
      border: 0; padding: 0; margin: 0;
      background: transparent;
      color: transparent;
      font: inherit;
    }
    /* 크롬 기본 달력 아이콘 숨김 (우리 ::before 이모지 사용) */
    .md input[type="date"]::-webkit-calendar-picker-indicator {
      opacity: 0; cursor: pointer; width: 100%; height: 100%;
      position: absolute; inset: 0;
    }
    .mt { color: #fff; font-weight: 700; font-size: calc(0.82rem * 1.4); cursor: pointer; }
    .mt:hover { color: var(--blue); }
    .mg { color: #555; }
    /* 매치 번호 배지 (M12 / PI3 / PO2 / F) — Game N 옆에 작은 보라색 칩 */
    .mn {
      background: rgba(168,85,247,0.12);
      color: #c084fc;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: calc(0.62rem * 1.3);
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-right: 4px;
    }
    .mr { margin-left: auto; background: rgba(74,144,217,0.12); color: var(--blue); padding: 2px 10px; border-radius: 3px; font-size: calc(0.62rem * 1.4); }
    .mr.red-win { background: rgba(217,74,74,0.12); color: var(--red); }
    /* 🔴 LIVE 배지 — 진행 중 라이브 매뉴얼 매치 */
    .mr.live-now {
      background: rgba(217,74,74,0.15);
      color: #ff6b6b;
      font-weight: 800;
      letter-spacing: 0.03em;
      animation: live-pulse 1.6s ease-in-out infinite;
    }
    @keyframes live-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }
    .mgol { color: #444; text-decoration: underline; cursor: pointer; font-size: calc(0.62rem * 1.4); }
    .mgol:hover { color: #888; }
    .sep { color: #2a2a2a; }

    /* ===== 스킨 영역: 16:9 비율 ===== */
    .skins-area {
      width: 100%;
      aspect-ratio: 16 / 9;
      display: flex;
    }

    .team-col { flex: 1; display: flex; flex-direction: column; min-height: 0; }

    .team-label {
      font-size: calc(0.6rem * 1.4);
      font-weight: 700; letter-spacing: 0.1em;
      padding: 5px 14px; flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .team-label.blue { color: var(--blue); background: rgba(74,144,217,0.06); }
    .team-label.red  { color: var(--red);  background: rgba(217,74,74,0.06); }

    /* ===== 위키피디아 방식 인라인 링크 (매치 카드 내) ===== */
    .m-link {
      color: inherit;
      text-decoration: none;
      transition: text-decoration 0.1s, opacity 0.15s;
      position: relative;
      z-index: 3;
      cursor: pointer;
    }
    .m-link:hover {
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 3px;
      opacity: 0.85;
    }
    .pcard .info .m-link { display: inline; }
    .pcard:hover .m-link:hover { opacity: 1; }

    /* 매치 카드 안의 챔피언명 — 흰 글자 + text-stroke 때문에
       기본 흰색 underline이 묻혀 보임. 골드색 두꺼운 underline으로 가시성 확보 */
    .pcard .info .champ .m-link:hover {
      text-decoration-color: var(--gold);
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }
    /* 선수명은 컬러 자체가 진해서 흰색 underline도 잘 보임 */
    .pcard .info .name .m-link:hover {
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }

    .divider-v { width: 1px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

    .player-list { flex: 1; display: flex; flex-direction: column; min-height: 0; }

    /* ===== 선수 카드 ===== */
    .pcard {
      flex: 1; position: relative;
      overflow: hidden; cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .pcard:last-child { border-bottom: none; }

    .pcard img {
      display: block; pointer-events: none;
    }
    .pcard .img-wrap {
      position: absolute; inset: 0;
      transition: transform 0.3s;
    }
    .pcard:hover .img-wrap { transform: scale(1.04); }

    /* ===== Editor's Pick — 금색 Glow + 하단 띠 =====
       .pcard 자체에 box-shadow inset을 걸면 splash 이미지(img-wrap의 img)에
       가려져 보이지 않음. ::before 오버레이로 z-index 3에 띄워서 이미지 위에
       글로우를 그림. 외곽 glow가 아니라서 카드 좌측 가장자리에 붙어도 안 잘림. */
    .pcard.editor-pick-gold { z-index: 5; }
    .pcard.editor-pick-gold::before {
      content: ''; position: absolute; inset: 0;
      pointer-events: none; z-index: 3;
      box-shadow:
        inset 0 0 0 3px #FFD700,
        inset 0 0 60px rgba(255,215,0,0.7),
        inset 0 0 30px rgba(255,215,0,0.55);
    }
    .pcard.editor-pick-gold:hover::before {
      box-shadow:
        inset 0 0 0 3px #FFD700,
        inset 0 0 75px rgba(255,215,0,0.85),
        inset 0 0 38px rgba(255,215,0,0.7);
    }
    /* 카드 하단 띠 — Editor's Pick 문구
       - 색: #fbe974 (흰색 섞인 부드러운 노랑)
       - opacity 0.8 ("흐리게 20%")
       - 높이 0.8x — padding/font/line-height 축소 */
    .pcard .editor-pick-banner {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 4;
      background: #fbe974;
      opacity: 0.8;
      color: #1a1300;
      font-weight: 800;
      font-size: clamp(0.45rem, 0.72vw, 0.72rem);
      letter-spacing: 0.02em;
      padding: 3px 12px;
      line-height: 1.15;
      text-align: center;
      text-shadow: 0 1px 0 rgba(255,255,255,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
      pointer-events: none;
    }
    .pcard .editor-pick-banner::before {
      content: '🏆';
      font-size: 1em;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    }

    /* 기본 그라데이션 (항상 표시 — 텍스트 가독성용) */
    /* 블루 카드: 오른쪽 끝이 어두움 (텍스트가 오른쪽에 있음) */
    /* 레드 카드: 왼쪽 끝이 어두움 (텍스트가 왼쪽에 있음) */
    .pcard.blue::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 55%);
    }
    .pcard.red::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 55%);
    }

    /* 마우스 오버시만 어두워짐 (기존 호버 오버레이는 유지) */
    .pcard .hover-overlay {
      position: absolute; inset: 0;
      opacity: 0; transition: opacity 0.2s; pointer-events: none;
    }
    /* 호버 시: 스킨 정보가 보이는 쪽이 밝은 그레이로 (검정 텍스트 가독성) */
    /* 흰색이 너무 쨍해서 살짝 그레이 톤 */
    .pcard.blue .hover-overlay { background: linear-gradient(to right, rgba(0,0,0,0.92) 40%, rgba(0,0,0,0.15) 100%); }
    .pcard.red  .hover-overlay { background: linear-gradient(to left,  rgba(0,0,0,0.92) 40%, rgba(0,0,0,0.15) 100%); }
    .pcard:hover .hover-overlay { opacity: 1; }
    .pcard.blue:hover { box-shadow: inset 0 0 0 2px rgba(74,144,217,0.5); }
    .pcard.red:hover  { box-shadow: inset 0 0 0 2px rgba(217,74,74,0.5); }

    /* 기본 정보 (선수명 + 챔피언명) */
    .pcard .info {
      position: absolute; top: 50%; transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 3px; z-index: 2;
    }
    /* 블루는 카드 안에서 오른쪽 끝(=화면 중앙쪽), 레드는 왼쪽 끝(=화면 중앙쪽) */
    /* 끝에서 24px 여백 (가독성용) */
    .pcard.blue .info { right: 24px; text-align: right; }
    .pcard.red  .info { left:  24px; text-align: left;  }

    .info .name {
      font-size: clamp(0.77rem, 1.65vw, 1.76rem);  /* +10% 확대 */
      font-weight: 900; line-height: 1;
      text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7);
    }
    .pcard.blue .info .name { color: var(--blue); }
    .pcard.red  .info .name { color: var(--red); }

    .info .champ {
      font-size: clamp(0.55rem, 1.1vw, 1.21rem);
      font-weight: 500;            /* 굵기 통일 — 외곽선/그림자 제거 */
      color: #fff;
      -webkit-text-stroke: 0;
      text-shadow: none;
    }

    /* ===== 포지션 라벨 (아이콘 + 텍스트) ===== */
    .pcard .pos {
      position: absolute; top: 5px;
      font-size: clamp(0.38rem, 0.7vw, 0.75rem);
      font-weight: 700; color: #aaa;
      background: rgba(0,0,0,0.6);
      padding: 2px 6px; border-radius: 3px; z-index: 2;
      display: flex; align-items: center; gap: 3px;
    }
    .pcard.blue .pos { left: 14px; }
    .pcard.red  .pos { right: 14px; }

    /* 크로마 점 — pcard 우측 상단 (red: 좌측 상단, pos와 반대편) */
    .pcard-chroma-dot {
      position: absolute;
      top: 7px;
      width: clamp(10px, 1vw, 14px);
      height: clamp(10px, 1vw, 14px);
      border-radius: 50%;
      border: 2px solid rgba(0,0,0,0.55);
      box-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.15) inset;
      z-index: 3;
      cursor: help;
    }
    .pcard.blue .pcard-chroma-dot { right: 8px; }
    .pcard.red  .pcard-chroma-dot { left: 8px; }
    .pos-icon {
      width: clamp(9px, 0.9vw, 14px);
      height: clamp(9px, 0.9vw, 14px);
      object-fit: contain;
      opacity: 0.85;
      filter: brightness(1.15);
      flex-shrink: 0;
    }

    /* NEW 배지 */
    .new-badge {
      display: inline-block;
      background: #e63946; color: #fff;
      font-size: 0.5rem; font-weight: 800;
      padding: 1px 5px; border-radius: 3px;
      letter-spacing: 0.05em; margin-left: 4px;
      vertical-align: middle;
    }

    /* 마우스 오버 정보 */
    /* 호버 시 스킨 정보 영역: 기본 정보와 반대 방향으로 표시 */
    /* 기본 정보가 블루는 오른쪽/레드는 왼쪽에 있으니, 호버 정보는 반대로 */
    .pcard .hover-info {
      position: absolute; inset: 0;
      display: flex; align-items: center;
      opacity: 0; transition: opacity 0.2s;
      pointer-events: none; z-index: 3;
    }
    .pcard.blue .hover-info { justify-content: flex-start; }
    .pcard.red  .hover-info { justify-content: flex-end; }
    .pcard:hover .hover-info { opacity: 1; }

    .hover-info .hc { padding: 0 28px; display: flex; flex-direction: column; gap: 3px; }
    .pcard.blue .hover-info .hc { text-align: left; }
    .pcard.red  .hover-info .hc { text-align: right; }

    .hc .tier { font-size: clamp(0.42rem, 0.8vw, 0.85rem); font-weight: 700; }

    /* tier 아이콘 + 뱃지 — 호버 정보 영역과 같은 방향 */
    .hc .tier-row {
      display: flex; align-items: center; gap: 5px;
      margin-bottom: 4px;
    }
    .pcard.blue .hc .tier-row { justify-content: flex-start; }
    .pcard.red  .hc .tier-row { justify-content: flex-end; }
    .hc .tier-icon, .hc .badge-icon {
      width: clamp(16px, 1.6vw, 26px);
      height: clamp(16px, 1.6vw, 26px);
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(255,255,255,0.4));
    }

    /* 호버 시 표시되는 스킨명 — 굵게/그림자/이탤릭 제거 */
    .hc .sname    { font-size: clamp(0.6rem, 1.1vw, 1.2rem); color: #fff; font-weight: 500; line-height: 1.2; }
    .hc .sname-en { font-size: clamp(0.52rem, 0.9vw, 0.97rem); color: #aaa; font-weight: 400; }
    .hc .rp       { font-size: clamp(0.4rem, 0.7vw, 0.75rem); color: var(--gold); margin-top: 3px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
    .pcard.blue .hc .rp { justify-content: flex-start; }
    .pcard.red  .hc .rp { justify-content: flex-end; }
    .hc .rp.me    { color: #c084fc; }  /* 신화 정수 - 보라 */
    .hc .rp.as    { color: #fbbf24; }  /* 고대 불꽃 - 황금 */
    .hc .currency-icon {
      width: clamp(11px, 1vw, 17px);
      height: clamp(11px, 1vw, 17px);
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }
    .hc .sline    { font-size: clamp(0.36rem, 0.6vw, 0.65rem); color: #888; }

    /* ===== 더보기 버튼 ===== */
    .load-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }
    .load-more-btn {
      background: rgba(74,144,217,0.08);
      border: 1px solid rgba(74,144,217,0.3);
      color: var(--blue);
      padding: 10px 28px;
      border-radius: 6px;
      font-family: var(--font);
      font-size: calc(0.75rem * 1.4);
      font-weight: 700;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: all 0.15s;
    }
    .load-more-btn:hover {
      background: rgba(74,144,217,0.16);
      border-color: rgba(74,144,217,0.5);
      color: #fff;
    }
    .load-more-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* ===== 플레이스홀더 ===== */
    .placeholder {
      border: 1px dashed rgba(255,255,255,0.04);
      border-radius: 10px; padding: 18px;
      text-align: center; color: #2a2a2a;
      font-size: calc(0.65rem * 1.4); margin-bottom: 14px;
    }

    /* ===== Task 10: 모바일/터치 = 호버 없이 핵심 정보(등급·스킨명·가격) 상시 표시
       마우스 있는 데스크탑은 기존 hover-to-reveal 그대로.
       (hover: none) 미적용 디바이스도 있어 max-width: 768px 폴백 함께 적용. */
    @media (hover: none), (max-width: 768px) {
      .pcard .hover-info,
      .pcard .hover-overlay {
        opacity: 1 !important;
      }
      .pcard .hover-info { transition: none !important; }
    }

    /* ===== 모바일 ===== */
    @media (max-width: 768px) {
      /* 모바일 매치 레이아웃 — BLUE | RED 양옆에 두고 각 팀 5명 세로 스택 */
      .skins-area { aspect-ratio: unset; flex-direction: row !important; align-items: stretch; }
      .divider-v { width: 1px; height: auto; align-self: stretch; }
      .team-col { flex: 1; min-width: 0; }

      .player-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 4px;
      }

      .pcard {
        border-bottom: none !important;
        border-right: none !important;
        /* 5:4 — 19.5:9 비율의 폰 화면에서 한 팀 5명을 한 화면에 다 보이게 하기 위해
           정사각형보다 살짝 납작하게. thumb_url tile은 정사각형이라
           위/아래 ~8% 잘리지만 object-fit:cover로 콘텐츠 손실 거의 없음. */
        aspect-ratio: 5 / 4;
        border-radius: 6px;
        overflow: hidden;
        width: 100%;
      }
      .pcard:last-child { border: none; }

      /* 데스크탑 wide splash 오프셋 계산 무력화 — 모바일은 <picture>가 thumb_url로
         swap하니 단순 cover로 충분. thumb이 없는 스킨도 splash 중앙 정렬으로 fallback */
      .pcard .img-wrap {
        position: absolute !important;
        inset: 0 !important;
      }
      .pcard .img-wrap picture,
      .pcard .img-wrap picture img {
        display: block;
      }
      .pcard .img-wrap img {
        position: absolute !important;
        left: 0 !important; top: 0 !important;
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
      }

      /* 모바일 — 그라데이션 + 검정 오버레이 모두 제거 (원본 이미지 색 그대로) */
      .pcard.blue::after,
      .pcard.red::after { background: none !important; }
      .pcard.blue .hover-overlay,
      .pcard.red  .hover-overlay { background: none !important; }

      /* 팀명 — 풀네임 숨기고 short_code 표시 */
      .team-full { display: none; }
      .team-short { display: inline; }

      /* 매치 헤더 — 모바일에서 LCK | 날짜 | 팀 vs 팀 | Game N | 승리 | gol.gg 가 우겨져 줄바꿈
         크기 줄이고 sep 숨기고 gap 좁게 */
      .match-header {
        padding: 8px 12px;
        gap: 6px;
        font-size: 0.78rem;
      }
      .match-header .sep { display: none; }
      .match-header .mt { font-size: 0.92rem; }
      .match-header .mg { font-size: 0.7rem; }
      .match-header .mr { padding: 1px 6px; font-size: 0.62rem; }
      .match-header .mgol { font-size: 0.62rem; }
      .match-header .mn { padding: 1px 6px; font-size: 0.62rem; }

      /* .info(선수명+챔피언명) 카드 중앙 — 데스크탑 default 그대로 사용.
         블루 카드 = 좌측 정렬, 레드 카드 = 우측 정렬 (시각적 좌우 대칭) */
      .pcard.blue .info {
        left: 4px !important; right: unset !important;
        text-align: left !important;
      }
      .pcard.red .info {
        right: 4px !important; left: unset !important;
        text-align: right !important;
      }
      .info .name { font-size: clamp(0.62rem, 2.6vw, 1rem); }
      .info .champ { font-size: clamp(0.48rem, 1.9vw, 0.75rem); }
      .pcard.blue .pos { top: 3px; left: 4px !important; right: unset !important; font-size: 0.5rem; gap: 2px; padding: 1px 4px; }
      .pcard.red  .pos { top: 3px; right: 4px !important; left: unset !important; font-size: 0.5rem; gap: 2px; padding: 1px 4px; }
      .pos-icon { width: 8px; height: 8px; }

      /* hover-info 상시 표시 — .pos 라벨(상단)과 안 겹치도록 카드 하단으로 정렬.
         블루는 왼쪽에서, 레드는 오른쪽에서 시작 (좌우 대칭) */
      .pcard .hover-info {
        align-items: flex-end !important;
        padding: 0 0 22px 0;
      }
      .pcard.blue .hover-info { justify-content: flex-start !important; }
      .pcard.red  .hover-info { justify-content: flex-end   !important; }
      .pcard.blue .hover-info .hc { padding: 4px 6px; text-align: left  !important; }
      .pcard.red  .hover-info .hc { padding: 4px 6px; text-align: right !important; }
      .pcard.blue .hc .rp { justify-content: flex-start !important; }
      .pcard.red  .hc .rp { justify-content: flex-end   !important; }
      /* tier/badge 아이콘 모바일에서 숨김 — .pos 라벨과 시각적 충돌 방지 */
      .hc .tier-icon,
      .hc .badge-icon { display: none !important; }
      /* tier-row 자체도 굳이 모바일에선 안 보여줘도 됨 (아이콘 없어 빈 줄만 남으므로) */
      .hc .tier-row:empty { display: none; }
      .hc .tier { font-size: 0.5rem; }
      .hc .sname {
        font-size: 0.62rem;
        text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
      }
      .hc .sname-en { display: none; }
      .hc .rp {
        font-size: 0.5rem; margin-top: 1px;
        text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
      }
      .hc .sline { display: none; }

      .match-header { font-size: 0.75rem; gap: 6px; padding: 8px 12px; }
      .mt { font-size: 0.9rem; }
      .team-label { font-size: 0.7rem; padding: 4px 10px; }
      .tab { font-size: 0.8rem; padding: 8px 12px; }

      /* 모바일 썸네일 위치 조절 클래스 */
      .mob-right-70 { object-position: calc(50% - 70px) 20% !important; }
      .mob-right-30 { object-position: calc(50% - 30px) 20% !important; }
      .mob-right-20 { object-position: calc(50% - 20px) 20% !important; }
      .mob-left-10  { object-position: calc(50% + 10px) 20% !important; }
    }