/* =====================================================
 * proskin.gg — common-layout.css
 *
 * 모든 공개 페이지의 공용 레이아웃 토큰.
 * 한 곳만 고치면 전 페이지에 즉시 반영되도록
 * CSS 커스텀 프로퍼티로 폭/그리드/간격을 표준화한다.
 *
 * 페이지에서는:
 *   <link rel="stylesheet" href="common-layout.css" />
 * 를 헤드에 추가하기만 하면 main 폭/그리드가 강제 통일된다.
 *
 * 카드 그리드를 통일 적용하려면 그리드 컨테이너에
 * class="card-grid"를 붙인다.
 * ===================================================== */
:root {
  /* 페이지 컨테이너 */
  --layout-max-width: 1600px;

  /* 2:3 카드 그리드 (챔피언 / 스킨 / 챔피언별 스킨 리스트 통일) */
  --card-cols: 5;
  --card-gap-x: 28px;
  --card-gap-y: 32px;

  /* 팀 카드 그리드 */
  --team-cols: 5;
  --team-col-gap: 16px;
  --team-row-gap: 50px;
}

/* ===== 모든 메인 영역에 동일 폭 강제 =====
 * 페이지별 main { ... } 규칙보다 우선하도록 !important.
 * 단, 패딩 등 페이지별 디테일은 자체 유지. */
body > main {
  max-width: var(--layout-max-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center;
}

/* 2:3 카드 그리드 — 챔피언/스킨/챔피언상세 페이지 공통 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--card-cols), 1fr);
  column-gap: var(--card-gap-x);
  row-gap: var(--card-gap-y);
}

/* 팀 카드 그리드 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(var(--team-cols), 1fr);
  column-gap: var(--team-col-gap);
  row-gap: var(--team-row-gap);
}

/* =====================================================
 * 모바일 / 태블릿 반응형
 * 페이지 그리드 컬럼 수를 viewport 폭에 따라 줄임.
 * 각 페이지는 자체 CSS에서 repeat(N, 1fr) !important로
 * 컬럼을 강제했지만, 여기서 더 좁은 미디어쿼리로 한 번 더
 * !important 덮어쓰면 그 컬럼이 적용됨 (CSS specificity 동일,
 * 나중에 선언된 게 이김 — common-layout 로드 후 페이지 스타일이
 * 와도 페이지 스타일엔 미디어쿼리 없으니 우리가 이김).
 * ===================================================== */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
  :root {
    --layout-max-width: 100%;
    --card-cols: 4;
    --card-gap-x: 18px;
    --card-gap-y: 22px;
    --team-cols: 3;
    --team-col-gap: 14px;
    --team-row-gap: 36px;
  }
  body > main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 페이지 그리드 컬럼 강제 — 페이지별 !important 룰 덮어쓰기 */
  .pp-player-list { grid-template-columns: repeat(3, 1fr) !important; }
  .cp-group-body  { grid-template-columns: repeat(4, 1fr) !important; }
  .sk-group-body  { grid-template-columns: repeat(4, 1fr) !important; }
  .tp-team-list   { grid-template-columns: repeat(3, 1fr) !important; }
  /* search.html 모드별 */
  body.mode-player .skin-grid,
  body.mode-champion .skin-grid,
  body.mode-team .skin-grid { grid-template-columns: repeat(4, 1fr) !important; }
  body.mode-date .skin-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .search-player-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
  .search-team-grid   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
  :root {
    --card-cols: 3;
    --card-gap-x: 12px;
    --card-gap-y: 16px;
    --team-cols: 2;
    --team-col-gap: 12px;
    --team-row-gap: 24px;
  }
  body > main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .pp-player-list {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 200px !important;     /* 카드 높이도 viewport에 비례 축소 */
  }
  .cp-group-body  { grid-template-columns: repeat(3, 1fr) !important; }
  .sk-group-body  { grid-template-columns: repeat(3, 1fr) !important; }
  .tp-team-list   { grid-template-columns: repeat(2, 1fr) !important; }
  body.mode-player .skin-grid,
  body.mode-champion .skin-grid,
  body.mode-team .skin-grid { grid-template-columns: repeat(3, 1fr) !important; }
  body.mode-date .skin-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .search-player-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
  .search-team-grid   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
}

/* =====================================================
 * 데스크탑에서 모바일 미리보기 (?view=mobile 또는 /m URL)
 * common-header.js에서 html.force-mobile-preview 클래스 부착.
 * 실제 모바일 미디어쿼리는 viewport 너비 기준이라 desktop에선 발동 안 되므로
 * 여기서 모바일 룰들을 일괄 강제 적용. 완벽하진 않지만 빠른 시각 점검용.
 * ===================================================== */
html.force-mobile-preview {
  /* viewport를 줄이는 효과를 흉내 — 콘텐츠를 414px 너비 박스로 wrap */
  background:
    repeating-linear-gradient(45deg, #0a0a0f 0 12px, #11111c 12px 24px);
}
html.force-mobile-preview body {
  max-width: 414px !important;
  margin: 0 auto !important;
  border-left: 1px dashed rgba(168,85,247,0.3);
  border-right: 1px dashed rgba(168,85,247,0.3);
  min-height: 100vh;
}
/* 모바일 그리드 룰을 클래스 기반으로 한 번 더 — viewport와 무관 */
html.force-mobile-preview :root,
html.force-mobile-preview {
  --layout-max-width: 100%;
  --card-cols: 2;
  --card-gap-x: 8px;
  --card-gap-y: 12px;
  --team-cols: 1;
}
html.force-mobile-preview .pp-player-list {
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: 170px !important;
}
html.force-mobile-preview .cp-group-body,
html.force-mobile-preview .sk-group-body,
html.force-mobile-preview body.mode-player .skin-grid,
html.force-mobile-preview body.mode-champion .skin-grid,
html.force-mobile-preview body.mode-team .skin-grid,
html.force-mobile-preview body.mode-date .skin-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
html.force-mobile-preview .tp-team-list { grid-template-columns: 1fr !important; }
html.force-mobile-preview .search-player-grid,
html.force-mobile-preview .search-team-grid { grid-template-columns: 1fr !important; }

/* 소형 모바일 (480px 이하 — 일반적인 iPhone SE / Galaxy Z Flip 등) */
@media (max-width: 480px) {
  :root {
    --card-cols: 2;
    --card-gap-x: 8px;
    --card-gap-y: 12px;
    --team-cols: 1;
  }
  body > main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .pp-player-list {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 170px !important;
  }
  .cp-group-body  { grid-template-columns: repeat(2, 1fr) !important; }
  .sk-group-body  { grid-template-columns: repeat(2, 1fr) !important; }
  .tp-team-list   { grid-template-columns: repeat(1, 1fr) !important; }
  body.mode-player .skin-grid,
  body.mode-champion .skin-grid,
  body.mode-team .skin-grid,
  body.mode-date .skin-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .search-player-grid { grid-template-columns: 1fr !important; }
  .search-team-grid   { grid-template-columns: 1fr !important; }
}