/******** player-analysis.css — 선수 분석 카드 그리드 ********/
:root{
    --plyr-bg:#ffffff; --plyr-ink:#222; --plyr-muted:#555; --plyr-soft:#f1f3f5;
    --plyr-border:#e3e3e3; --plyr-shadow:0 4px 10px rgba(0,0,0,.06); --plyr-shadow-hover:0 8px 16px rgba(0,0,0,.12);
    --plyr-accent:#1A1748;
  }
  
  .players-container{max-width:1200px;margin:0 auto;padding:30px 5%;color:var(--plyr-ink);background:var(--plyr-bg)}
  .page-title{font-size:2.2rem;font-weight:800;text-align:center;margin:0 0 6px}
  .page-meta{font-size:1.05rem;color:var(--plyr-muted);text-align:center;margin:0 0 24px}
  
  /* 필터 */
  .filter-container{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:20px}
  .filter-container label{font-weight:700;color:#333}
  #teamFilter{padding:6px 10px;font-size:.95rem;background:var(--plyr-soft);border:1px solid #ccc;border-radius:6px;color:var(--plyr-accent)}
  #teamFilter:focus{outline:3px solid color-mix(in oklab,var(--plyr-accent) 35%,white);outline-offset:2px}
  
  /* 그리드 */
  .players-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  
  /* 카드 */
  .player-card{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    background:#ffffffcc; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    background-color:#fff; border:2px solid var(--plyr-border); border-radius:16px; padding:18px 14px;
    box-shadow:var(--plyr-shadow); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; will-change:transform,box-shadow;
  }
  .player-card:hover{transform:translateY(-6px);box-shadow:var(--plyr-shadow-hover)}
  
  .player-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;margin-bottom:.9rem;border:3px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.08);background:#fafafa}
  .player-name{font-size:1.2rem;font-weight:800;margin:.1rem 0;color:#111}
  .player-number{font-size:.84rem;color:#999;margin-bottom:.4rem}
  .player-position{font-size:.95rem;color:#555}
  .player-note{font-size:.9rem;color:#777;margin:.45rem 0;min-height:34px}
  .player-team .team-logo{width:28px;height:28px;margin:.35rem 0;object-fit:contain}
  
  /* 팀별 hover 포인트 (카드에 팀 슬러그 클래스 추가 필요) */
  .player-card.lg:hover{border-color:#C30452;background:linear-gradient(145deg,#fff,rgba(195,4,82,.06))}
  .player-card.doosan:hover{border-color:#1A1748;background:linear-gradient(145deg,#fff,rgba(26,23,72,.06))}
  .player-card.ssg:hover{border-color:#CE0E2D;background:linear-gradient(145deg,#fff,rgba(206,14,45,.06))}
  .player-card.lotte:hover{border-color:#D00F31;background:linear-gradient(145deg,#fff,rgba(208,15,49,.06))}
  .player-card.samsung:hover{border-color:#074CA1;background:linear-gradient(145deg,#fff,rgba(7,76,161,.06))}
  .player-card.hanwha:hover{border-color:#FC4E00;background:linear-gradient(145deg,#fff,rgba(252,78,0,.06))}
  .player-card.kia:hover{border-color:#EA0029;background:linear-gradient(145deg,#fff,rgba(234,0,41,.06))}
  .player-card.kiwoom:hover{border-color:#570514;background:linear-gradient(145deg,#fff,rgba(87,5,20,.06))}
  .player-card.nc:hover{border-color:#315288;background:linear-gradient(145deg,#fff,rgba(49,82,136,.06))}
  .player-card.kt:hover{border-color:#000;background:linear-gradient(145deg,#fff,rgba(0,0,0,.06))}
  
  /* 인기 점수 */
  .player-popularity{display:inline-block;background:linear-gradient(135deg,#ffe600,#ffc107);color:#333;padding:.35rem .8rem;border-radius:999px;font-size:.8rem;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.08)}
  
  /* 반응형 */
  @media (max-width:1024px){.players-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:768px){.players-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:600px){.players-grid{grid-template-columns:1fr}.player-photo{width:96px;height:96px}.page-title{font-size:2rem}}
  @media (prefers-reduced-motion:reduce){.player-card{transition:none}}
  @media (prefers-color-scheme:dark){
    :root{--plyr-bg:#0f1115;--plyr-ink:#e9e9e9;--plyr-muted:#bdbdbd;--plyr-soft:#1b1f28;--plyr-border:#2a2f3a;--plyr-shadow:none;--plyr-shadow-hover:none}
    .player-card{background:#161a20cc}
    .player-photo{border-color:#0f1115}
    #teamFilter{background:#161a20;border-color:#2a2f3a;color:#e9e9e9}
  }

  /* 1) 그리드: 화면폭에 맞춰 자동 칼럼, 카드 최소폭 보장 */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 220~260px 취향대로 */
    gap: 20px;
  }
  
  /* 2) 카드 비율 고정 + 내부가 늘어나도 찌그러지지 않게 */
  .player-card {
    aspect-ratio: 4 / 5;            /* 📌 카드 가로:세로 비율 고정 */
    overflow: hidden;               /* 넘치는 건 깔끔히 숨김 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;    /* 위에서부터 쌓기 */
  }
  
  /* 3) 이미지 영역: 고정 크기 + 비율 안정화 */
  .player-photo {
    width: 110px;
    height: 110px;                  /* 고정하면 카드 전체 비율만 변하고 이미지 영역은 안정적 */
    aspect-ratio: 1 / 1;            /* 혹시 width/height 빠져도 안전장치 */
    object-fit: cover;
    flex: 0 0 auto;
  }
  
  /* 4) 텍스트 영역: 눌림/늘어남 방지 + 줄수 제한 */
  .player-info {
    width: 100%;
    padding: 0 8px;
    flex: 1 1 auto;                 /* 남는 높이를 이 영역이 먹음 */
    display: flex;
    flex-direction: column;
    justify-content: center;        /* 내용 수직 중앙-ish */
    min-width: 0;                   /* 말줄임 작동 필수 */
  }
  
  .player-name,
  .player-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  
  .player-name { -webkit-line-clamp: 2; }  /* 이름 2줄까지만 */
  .player-note  { -webkit-line-clamp: 2; } /* 노트 2줄까지만 */
  
  /* 5) 팀 로고 줄바꿈/눌림 방지 */
  .player-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .player-team .team-logo { flex: 0 0 28px; }
  
  /* 6) 모바일: 카드 비율을 조금 더 세로로 (가독성↑) */
  @media (max-width: 600px) {
    .players-grid { grid-template-columns: 1fr; }  /* 1열 */
    .player-card  { aspect-ratio: 3 / 4; }
    .player-photo { width: 96px; height: 96px; }
  }
  
  /* 7) 초소형 폰 미세 보정 */
  @media (max-width: 360px) {
    .player-card { padding: 14px 12px; }
  }
  
  /* 8) 다크모드 대비 */
  @media (prefers-color-scheme: dark) {
    .player-name { color: #f1f3f5; }
    .player-note { color: #c9c9c9; }
  }