body {
  font-family: 'Malgun Gothic', '맑은 고딕', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  /* 굵게 설정 */
  -webkit-font-smoothing: antialiased;
  /* 글자를 더 선명하고 매끄럽게 처리 */
  background: var(--bg);
  color: var(--text);
  margin: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #060606;
}

/* 헤더 */
header {
  width: 100%;
  padding: 1px;
  background-color: #030303;
  display: flex;
  justify-content: center;
  border-bottom: none;
}

/* 네비게이션 바 */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #f6f0f0;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.main-nav ul li a:hover {
  background-color: #f7f3f3;
  color: #474343;
}

@media (max-width: 480px) {
  .main-nav {
    padding: 6px 0;
  }

  .main-nav ul {
    display: flex;
    flex-wrap: nowrap;
    /* ✅ 줄바꿈 금지 */
    overflow-x: auto;
    /* ✅ 넘치면 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0 10px;
    /* 좌우 여백 */
  }

  .main-nav ul li {
    flex: 0 0 auto;
    /* ✅ 항목이 줄어들며 찌그러지지 않게 */
  }

  .main-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    /* ✅ 글자 크기 */
    line-height: 1;
    /* ✅ 2줄 방지 */
    padding: 6px 10px;
    /* ✅ 과한 좌우 패딩 줄이기 */
    border-radius: 6px;

    text-decoration: none;
    color: #ebe5e5;
    font-weight: 600;
  }

  .main-nav ul li a:hover {
    background-color: #050505;
    color: #e0d8d8;
  }

  /* (선택) 스크롤바 숨김 */
  .main-nav ul::-webkit-scrollbar {
    display: none;
  }

  .main-nav ul {
    scrollbar-width: none;
  }
}

/* =====================================
   컨트롤바 상단 고정
   ===================================== */
#controlBar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100vw;
  justify-content: center;
  align-items: center;
  padding: 6px 30px;
  background-color: #222;
  color: #fff;
  font-size: 14px;
  border-bottom: 2px solid #555;
  margin: 0;
  /* 위/아래 여백 제거 */
  top: 0px;
box-sizing: border-box;
  z-index: 1000;
    gap: 8px;
  background-color: #291919;
  box-sizing: border-box;
}

#controlBar .control-group.control-group-wide {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}

#controlBar .control-hint {
  font-size: 12px;
  opacity: .9;
  white-space: nowrap;
}

/* 파일 선택: filename 영역 포함 전체 폭 축소 */
#controlBar input[type="file"] {
  width: 170px;
  max-width: 170px;
}

/* 모바일 옵션 팝업 내부: 셀렉터 글자 보이게/폭 확보 */
#mobileControlContent select {
  width: 100%;
  min-width: 0;
}

#mobileControlContent .mobile-setting-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#mobileFormationSelector {
  width: 100%;
}

#leagueSelector {
  min-width: 120px;
  max-width: 130px;
}

#fieldPresetSelect {
  min-width: 100px;
  max-width: 100px;
}

#formationSelector {
  min-width: 90px;
  max-width: 90px;
}

#teamSelector {
  max-width: 110px;
}

#loadFileBtn {
  min-width: 90px;
  max-width: 90px;
}

#controlBar button,
#controlBar select,
#controlBar input {
  padding: 4px 8px;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  font-size: 13px;
}

#controlBar button:hover,
#controlBar select:hover,
#controlBar input:hover {
  background-color: #444;
  cursor: pointer;
}

.popup.hidden {
  display: none;
}

/* h1 */
h1 {
  text-align: center;
  margin: 10px 0;
}

/* 모바일 전용 버튼 */
.mobile-only {
  display: inline-block;
}



/* =====================================
   중앙 경기장 영역
   ===================================== */

/* PC */
.center {
  display: flex;
  gap: 0px;
  justify-content: center;
  flex-direction: row;
  align-items: flex-start;
  /* 🔥 A팀 | B팀 가로 */
  margin: 0;
}

/* =========================
   경기장 래퍼
   ========================= */
.field-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px;
  margin: 0;
  /* 위/아래 여백 제거 */
}

/* 경기장 이름 */
.field-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  /* ✅ 라벨은 최상단 */
}

/* =========================
   경기장(필드) 기본 스타일
   ========================= */
.field {
  position: relative;

  /* 🎯 프리미엄 패널 배경 */
  background:
    /* 은은한 중앙 하이라이트 */
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 35%,
      rgba(0,0,0,0.25) 75%
    ),

    /* 메인 그라데이션 */
    linear-gradient(
      to bottom,
      #102913 0%,
      #256b2c 35%,
      #1d451e 65%,
      #235026 100%
    );

  background-blend-mode: overlay;

  /* 📐 레이아웃 유지 */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px;

  /* 🟢 카드형 프레임 */
  border-radius: 10px;
  border: 1.5px solid rgba(80, 180, 90, 0.25);

  /* 🌫 깊이감 */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.08),
    inset 0 -2px 6px rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.35);

  box-sizing: border-box;
  margin: 0;

  /* 기준/클리핑 */
  overflow: hidden;
}


/* 각 필드별 크기 */
#field-1,
#field-2 {
  width: 490px;
  height: 798px;
  position: relative;
  /* ✅ 좌표 기준 안정 */
}

/* =========================
   레이어 순서(핵심)
   1) (있다면) 잔디/필드이미지: z=1
   2) 라인: z=2
   3) 선수(슬롯/이미지): z=3+
   ========================= */

/* (선택) 잔디/필드 이미지가 있다면 가장 아래 */
.field-image,
.grass-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 경기장 라인: 항상 보이되 선수보다 아래 */
.field-lines {
  position: absolute;
  top: 60px;
  bottom: 216px;
  left: 30px;
  right: 30px;
  z-index: 2;
  /* ✅ 라인은 중간층 */
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px;
}

/* 라인 내부 요소 */
.field-lines * {
  position: absolute;
  box-sizing: border-box;
  border-color: rgba(255, 255, 255, 0.85);
  z-index: 2;

}

.player-slot.field-slot,
.player-slot.sub-slot,
.player-slot.has-player {
  z-index: 3;
}

/* 슬롯 안 이미지/이름도 확실히 위로 */
.player-box,
.player-img,
.player-name {
  position: relative;
  z-index: 4;
}

/* =========================
   라인 디테일
   ========================= */
.outline {
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
}

.center-line {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.center-circle {
  width: 120px;
  height: 120px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.penalty {
  width: 40%;
  height: 18%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.penalty.top {
  top: 0;
  border-top: none;
  /* 위쪽 개방 */
}

.penalty.bottom {
  bottom: 0;
  border-bottom: none;
  /* 아래쪽 개방 */
}

.goal {
  width: 20%;
  height: 6%;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: transparent;
}

.goal.top {
  top: 0;
}

.goal.bottom {
  bottom: 0;
}




/* =====================================
   슬롯 공통 스타일
   ===================================== */


/* 내부 컨테이너를 세로 정렬 */
.player-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 🔥 핵심 */
  align-items: stretch;
  overflow: hidden;
}

/* 이미지 꽉 채우기 */


/* 선수만 하단에 이름배경색 나오기 중요 */
.player-name:empty {
  display: none;
}

.player-name:not(:empty) {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  text-align: center;
  color: #fff;
  background: rgba(37, 36, 36, 0.846);
  pointer-events: none;

}

.player-slot {
  position: absolute;
  width: 64px;
  height: 84px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.092);
  flex-shrink: 0;
  overflow: hidden;
}


.player-slot.selected {
  outline: 2px solid rgba(0, 190, 255, 1);
  outline-offset: 2px;

  box-shadow:
    0 0 10px rgba(0, 190, 255, 0.9),
    0 0 22px rgba(0, 190, 255, 0.7),
    0 0 36px rgba(0, 190, 255, 0.4);

  transform: translateY(-2px);
}





/* 내부 플레이어 이름 박스 */
.player-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
}

/* =====================================
   주전 슬롯
   ===================================== */
.player-slot.field-slot {

  /* 절대 좌표 적용 */
  width: 64px;
  height: 84px;


  cursor: pointer;




  /* ⬅ 은은한 라인 */
}

.player-slot.field-slot .slot-label,
.player-slot.sub-slot .slot-label {
  position: absolute;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: rgba(201, 178, 178, 0.7);
  pointer-events: none;
}




/* =====================================
   서브 슬롯
   ===================================== */
.player-slot.sub {
  position: relative;
  width: 64px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -1px;
  /* ← 왼쪽으로 10px 이동 */
  /* ⬅ 은은한 라인 */
}



/* 서브 슬롯 전체 컨테이너 (PC 기본) */
.sub-slot-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  z-index: 5;

  /* ✅ 핵심: 그리드 폭을 컨텐츠 기준으로 딱 맞춤 */
  display: grid;
  grid-template-columns: repeat(5, 64px);
  grid-auto-rows: 84px;
  /* rows 대신 auto-rows가 더 안전 */
  gap: 10px 22px;

  width: max-content;
  /* ✅ 가운데정렬 계산 안정 */
  justify-content: center;
}



/* =====================================
   후보 슬롯
   ===================================== */
.player-slot.candidate-slot {
  width: 64px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

}

.player-slot.candidate-slot .player-box {
  font-size: 12px;
  color: rgba(110, 96, 96, 0.7);
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  pointer-events: none;
}

/* =====================================
   후보 컬럼
   ===================================== */
.candidate-column {
  width: 360px;
  min-width: 100px;
  height: 740px;
  margin-top: 20px;
  /* 원하는 만큼 조절 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  /* 붙여놓기 */
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  background-color: rgba(54, 51, 51, 0.1);
  border: 2px solid #bf946b;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}


/* =========================
   후보 팀 이름 라벨
   ========================= */
.team-box h3,
.team-name {
  width: 100%;
  /* 항상 가로 전체 */
  height: 30px;
  /* 고정 높이 */
  line-height: 30px;
  /* 세로 중앙 정렬 */
  text-align: center;
  /* 글자 중앙 정렬 */
  background-color: #272626;
  /* 팀명 배경색 */
  color: #9e9696;
  /* 글자색 */
  border-radius: 8px;
  /* 모서리 둥글게 */
  margin: 0 0 5px 0;
  margin-bottom: 2px !important;
  /* 아래 간격 */
  font-weight: bold;
  font-size: 14px;
  /* 필요에 따라 조정 */
  flex-shrink: 0;
  /* flex 영향 안 받도록 */
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 글자가 길면 ... 처리 */
}

/* 팀 이름 */
.team-name {
  width: 100%;
  text-align: center;
  background-color: #272626;
  color: #fff;
  font-weight: bold;
  font-size: 90px;

  padding: 5px 0;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 팀 박스 슬롯 */
.team-box {
  width: 100%;
  height: 400px;
  background-color: #e3e3db;
  border: 2px solid #3c3a3a;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: flex-start;
  align-content: flex-start;
  /* ⭐ 핵심 */

  gap: 5px;
  overflow-y: auto;
}

.team-title {
  width: 100%;
  height: 38px;
  /* ← 원하는 높이 */
  display: flex;
  /* 핵심 */
  align-items: center;
  /* 세로 중앙 */
  justify-content: center;
  /* 가로 중앙 */
  background-color: #291919;
  color: #fff;
  font-weight: bold;
  font-size: clamp(12px, 3vw, 18px);
  /* 높이에 맞게 자동 조절 */

  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 0px;
  /* 위아래 패딩 제거 */
  cursor: pointer;
}

/* =====================================
   main-content (후보 + 경기장)
   ===================================== */
.main-content {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  
  padding-top: 0 !important;
  width: 100%;
  box-sizing: border-box;
  background: #7A4A4A;
  margin: 0 auto;      /* ✅ 항상 중앙 */

}

.player-slot {
  touch-action: manipulation;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}


.candidate-mobile-wrapper {
  left: 0;
  width: 100%;
  height: 140px;

  background: #f5f5f5;
  border-top: 1px solid #ccc;

  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 8px;

  overflow-x: auto;
}


/* =========================
   PC 후보군: 이미지 위 + 이름 아래
   ========================= */

/* player-box가 혹시 flex면 방향을 세로로 고정 */
.candidate-column .player-box,
.team-box .player-box {
  display: flex !important;
  flex-direction: column !important;
  /* ✅ 핵심: 가로(row) → 세로(column) */
  align-items: stretch;
}

/* 이미지가 위에 꽉 차게 */
.candidate-column .player-img,
.team-box .player-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 이름은 아래쪽(하단) */
.candidate-column .player-name,
.team-box .player-name {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



@media (orientation: landscape) and (max-width: 900px) {

  /* ✅ 가로모드: 2구장을 한 화면에 나란히 (스크롤/스냅 해제) */
  .center {
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: center;

    overflow-x: hidden;
    /* 가로 스크롤 제거 */
    scroll-snap-type: none;
    /* 스냅 해제 */
    -webkit-overflow-scrolling: auto;

    padding: 0;
    margin: 0;
  }

  /* ✅ wrapper: 화면 절반씩 */
  #field-wrapper-1,
  #field-wrapper-2 {
    width: 50vw !important;
    min-width: 50vw !important;
    /* 기존 100% → 50% */
    max-width: 50vw !important;

    box-sizing: border-box;
    padding: 0;
    margin: 0 !important;

    scroll-snap-align: none;
    /* 스냅 해제 */
    height: 92vh;
    /* 화면에 맞게 */
  }

  /* ✅ 실제 필드: wrapper 안에서 꽉 차게 */
  #field-1,
  #field-2 {
    width: 48vw !important;
    /* 약간 여유 */
    height: 165vh !important;
    /* 160vh 제거 (너무 큼) */
    margin: 0 auto !important;
    position: relative;
  }

  /* ✅ field 틀: min-width 강제 풀기 */
  .field {
    width: 100% !important;
    min-width: 0 !important;
    position: relative;
  }

  /* ✅ 라인 영역도 가로모드 비율에 맞게 */
  .field-lines {
    top: 40px;
    /* 팀명 아래 공간 */
    bottom: 130px;
    /* 서브슬롯 영역 확보 */
    left: 18px;
    right: 18px;
  }

  /* ✅ 서브슬롯: 하단 여백/중앙 유지 */
  .sub-slot-container {
    bottom: 16px !important;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(50vw - 16px);
  }
}


/* ✅ 모바일: 슬롯 크기(40x56)와 그리드도 같이 맞춘다 */
@media (max-width: 768px) {
  .sub-slot-container {
    bottom: 25px;
    /* 모바일은 여백 좀 줄여 */
    grid-template-columns: repeat(5, 40px);
    grid-auto-rows: 56px;
    gap: 8px 16px;
    /* 모바일 간격 줄이기 */
    width: max-content;
    /* 계속 유지 */
    max-width: calc(100vw - 16px);
    margin-left: 0px;
    /* ← 왼쪽으로 10px 이동 */
  }
}

/* =========================
   모바일 하단 후보 패널
========================= */
@media (max-width: 768px) {
  .pc-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}


@media (max-width: 768px) {


  .mobile-candidate-scroll {
    display: flex;
    width: max-content;
    /* 🔥 내용만큼 가로 확장 */
  }

  .mobile-team-box {
    flex: 0 0 auto;
    /* 🔥 줄어들지 않게 */
    min-width: 160px;
  }

  .mobile-team-box h3 {
    font-size: 14px;
    margin: 4px 0;
    text-align: center;
  }


}

@media (max-width: 768px) {

  .center {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    gap: 0px;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 0;
    justify-content: flex-start;
  }

  /* 구장 1개 wrapper: 화면 한 장(100%) */
  #field-wrapper-1,
  #field-wrapper-2 {
    width: 100%;
    min-width: 100%;
    max-width: 100vw;
    /* 92vw → 100vw */
    box-sizing: border-box;

    padding: 0;
    margin: 0 !important;
    /* 좌우 여백 제거 */

    margin-left: 0;
    /* 14px → 0 */
    scroll-snap-align: start;

    /* 필드 + 서브슬롯 공간까지 */
    height: auto;
    min-height: calc(74vh + 50px);

  }

  /* (있다면) field-container 높이: 하단 후보 패널 공간 확보 */
  .field-container {
    height: calc(100vh - 120px);
  }

  /* .field는 “틀” 역할: 폭/비율만 관리 */
  .field {
    width: 100%;
    min-width: 100%;
  }

  /* ✅ JS %좌표 기준이 되는 실제 경기장 */
  #field-1,
  #field-2 {
    width: 100vw;
    height: 74vh;
    margin: 0 auto;
    position: relative;
  }



  /* PC 후보는 모바일에서 숨김 */
  .candidate-column {
    display: none !important;
  }


}



/* =========================
   모바일: 경기장 2개 크기 조절
   ========================= */
@media (max-width: 768px) {

  .field-image {
    position: absolute;

    /* 팀명 아래부터 시작 */
    top: 70px;
    /* field-label 높이만큼 */
    bottom: 30px;
    /* 하단 여백 */

    left: 20px;
    /* 좌측 여백 */
    right: 20px;
    /* 우측 여백 */

    display: flex;
    align-items: center;
    /* 세로 중앙 */
    justify-content: center;
    /* 가로 중앙 */
    z-index: 1;
    border-radius: 18px;
    /* ⭐ 이거 */
    overflow: hidden;
    /* ⭐ 이거 */
  }


  .field-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
  }

  /* 라인 전체가 들어갈 경기장 영역(사각형)만 정의 */
  .field-lines {
    position: absolute;
    top: 48px;
    /* 팀명 아래부터 */
    bottom: 146px;
    /* 하단 여백 */
    left: 30px;
    right: 30px;
    z-index: 1;
    pointer-events: none;
    border-radius: 18px;
    overflow: hidden;
  }

  /* 자식들은 field-lines 기준으로 absolute */
  .field-lines * {
    position: absolute;
    box-sizing: border-box;
    border-color: rgba(255, 255, 255, 0.85);
    z-index: 1;
  }



  /* 잔디 영역 */
  .grass-layer {
    position: absolute;
    inset: 0;
    /* ⭐ 핵심: 상하좌우 0 */
    background-size: cover;
    background-position: center;
    z-index: 0;
    border-radius: 18px;
  }

  /* 모바일 기준 */
  .field .grass-layer {
    top: 00px;
    /* 위로 올리기 */
left: 20px; right: 20px;
    bottom: 0px;
    /* 아래 길이 늘리기 */
    border-radius: 12px;
    /* 필요 시 조정 */
  }

  /* 외곽선은 field-lines 영역을 꽉 채움 */
  .outline {
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
  }


  .center-line {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
  }

  .center-circle {
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .penalty {
    width: 40%;
    height: 18%;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.85);
  }

  .penalty.top {
    top: 0;
    border-top: none;
    /* ← 위쪽 개방 */
  }

  .penalty.bottom {
    bottom: 0;
    border-bottom: none;
    /* ← 아래쪽 개방 */
  }

  .goal {
    width: 20%;
    height: 6%;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: transparent;
  }

  .goal.top {
    top: 0;
    /* ← 외곽선 안 */
  }

  .goal.bottom {
    bottom: 0;
    /* ← 외곽선 안 */
  }
}

/* 모바일 전용 슬롯 크기 */
@media (max-width: 768px) {
  .player-slot {
    width: 40px !important;
    height: 56px !important;
    min-width: 40px;
    /* 혹시 flex나 grid 영향을 막기 위해 */
    /*min-height: 56px;*/
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .player-box {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  #candidate-mobile {
    display: flex !important;

    width: 100%;
    max-width: 100vw;
    /* 🔑 영역 가로 고정 */
    box-sizing: border-box;

    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;

    gap: 12px;
    /* 팀박스 간격도 명확 */
  }
}

/* 모바일에서만 표시 */
@media (max-width: 768px) {
  #candidate-mobile {
    display: flex !important;
    height: auto !important;
    padding: 8px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }


  #candidate-mobile .mobile-team-box {
    width: 47.8%;
    background-color: #ffffff;
    border: 2px solid #d2d0d0;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #candidate-mobile .mobile-team-title {
    width: 100%;
    height: 28px;
    /* ← 원하는 높이 */
    display: flex;
    /* 핵심 */
    align-items: center;
    /* 세로 중앙 */
    justify-content: center;
    /* 가로 중앙 */

    background-color: #272626;
    color: #fff;
    font-weight: bold;

    font-size: clamp(12px, 3vw, 18px);
    /* 높이에 맞게 자동 조절 */
    line-height: 1;
    /* 폰트 자체 높이만 사용 */

    border-radius: 4px;
    box-sizing: border-box;
    padding: 0 6px;
    /* 위아래 패딩 제거 */
  }


  /* ✅ 여기만 스크롤 + 가로 나열/줄바꿈 */
  #candidate-mobile .mobile-team-players {
    width: 100%;
    height: 220px;
    background: #fff;
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* ✅ 홀수 남아도 왼쪽 */
    align-content: flex-start;
    gap: 1px;

    overflow-y: auto;
    overflow-x: hidden;
  }

  .player-slot .player-name {
    height: 16px;
    font-size: 8px;
  }

  .field-label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
    /* ✅ 라벨은 최상단 */
  }
}


/* 서브 슬롯 라벨 (확실하게 덮어쓰기) */
.player-slot.sub .slot-label {
  color: rgba(200, 200, 200, 0.85);
  font-weight: 500;
}

.player-slot.sub .player-box {
  color: rgba(200, 200, 200, 0.8);
  text-align: center;
}





/* 기본적으로 숨김 (PC 포함) */
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}

@media (max-width: 900px) {

  /* 1) 모바일에서 PC 컨트롤바 숨김 */
  #controlBar {
    display: none;
  }
}

.field-wrapper {
  position: relative;
}

/* 기준점 */

.formation-label {
  position: absolute;
  top: 36px;
  /* 팀명(field-label)과 같은 높이로 맞추기 */
  left: 49px;
  /* 왼쪽 여백 */
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}

/* 모바일에서 더 작게/위치 조정 */
@media (max-width: 768px) {
  .formation-label {
    top: 28px;
    left: 40px;
    font-size: 12px;
  }
}

/* =========================
   League Team Select Modal
========================= */

#modePopup {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
}

#modePopup:not(.hidden) {
  display: flex;
}

#modePopup::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

#modePopup .setting-section {
  position: relative;
  background: #111;
  color: #fff;
  width: min(92vw, 420px);
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#modePopup h3 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

#modePopup #closePopup {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: #333;
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

#teamChecklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 4px;
}

.team-check-row {
  background: #1e1e1e;
  padding: 8px 10px;
  border-radius: 8px;
}

#applyLeagueTeamsBtn {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #4da3ff;
  color: #000;
  font-weight: 800;
  cursor: pointer;
}

/* 모바일 */
@media (max-width: 520px) {
  #modePopup .setting-section {
    width: 94vw;
    max-height: 85vh;
  }
}

.row-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

#mobileLeagueSelector {
  flex: 1;
  min-width: 0;
}

#mobileTeamSelectBtn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 18px;
}

#mobileFieldPresetSelect {

  margin-top: 6px;
}

/* 모바일 리그 + 팀아이콘 + 잔디 선택 한줄 정렬 */
.triple-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

#mobileLeagueSelector {
  flex: 1.2;
  min-width: 0;
}


#mobileFieldPresetSelect {
  flex: 1;
  min-width: 90px;
}

/* =========================================================
   Candidate slots (Team box / Candidate column / Mobile panel)
   - consolidated from style.css (bottom-wins)
   ========================================================= */

/* 1) 후보 슬롯(팀박스/후보컬럼/모바일 후보영역) 공통 박스 */
.team-box .player-slot,
.candidate-column .player-slot,
#candidate-mobile .mobile-team-players .player-slot {
  width: 64px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;

  /* 팀박스는 flex-wrap로 깔리므로 absolute 금지 */
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.092);
}

/* 2) 내부 컨테이너: 이미지 위 + 이름 아래(세로 구조 고정) */
.team-box .player-box,
.candidate-column .player-box,
#candidate-mobile .mobile-team-players .player-box {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;

  /* (원본에서 pointer-events:none이 있었는데,
     후보 슬롯 클릭 방해 가능하면 아래 줄은 제거/유지 선택)
     pointer-events: none;
  */
  overflow: hidden;
}

/* 3) 이미지: 슬롯을 꽉 채우는 크롭(팀박스/모바일후보 공통) */
.team-box .player-img,
.candidate-column .player-img,
#candidate-mobile .mobile-team-players .player-img,
.team-box .player-slot img,
.candidate-column .player-slot img,
#candidate-mobile .mobile-team-players .player-slot img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  border-radius: 8px;
  /* 슬롯 라운드와 일치 */
}

.team-box .player-slot {
  background: #ffffff;
}

/* 4) 이름: 비어있으면 숨김 */
.team-box .player-name:empty,
.candidate-column .player-name:empty,
#candidate-mobile .mobile-team-players .player-name:empty {
  display: none;
}

/* 5) 이름: 있으면 하단 오버레이 (최종 정의 기준) */
.team-box .player-name:not(:empty),
.candidate-column .player-name:not(:empty),
#candidate-mobile .mobile-team-players .player-name:not(:empty) {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 18px;
  line-height: 18px;
  font-size: 11px;

  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(37, 36, 36, 0.846);
  color: #fff;

  /* 슬롯 하단 라운드에 맞춤 */
  border-radius: 0 0 6px 6px;
  pointer-events: none;
}

/* 6) z-index(이름이 이미지 위로) */
.team-box .player-img,
.candidate-column .player-img,
#candidate-mobile .mobile-team-players .player-img {
  z-index: 0;
}

.team-box .player-name,
.candidate-column .player-name,
#candidate-mobile .mobile-team-players .player-name {
  z-index: 2;
}

/* =========================================================
   Mobile (<=768px): 후보 슬롯도 40x56으로 축소 + 라운드/폰트 보정
   ========================================================= */
@media (max-width: 768px) {

  .team-box .player-slot,
  .candidate-column .player-slot,
  #candidate-mobile .mobile-team-players .player-slot {
    width: 40px !important;
    height: 56px !important;
    min-width: 40px;
    border-radius: 6px;
  }

  .team-box .player-img,
  .candidate-column .player-img,
  #candidate-mobile .mobile-team-players .player-img,
  .team-box .player-slot img,
  .candidate-column .player-slot img,
  #candidate-mobile .mobile-team-players .player-slot img {
    border-radius: 6px;
  }

  .team-box .player-name:not(:empty),
  .candidate-column .player-name:not(:empty),
  #candidate-mobile .mobile-team-players .player-name:not(:empty) {
    height: 14px;
    line-height: 14px;
    font-size: 8px;
    border-radius: 0 0 6px 6px;
  }
}

/* =========================================================
   FORCE: field/sub slots use contain + full fill
   AND: background white only when image exists
   (paste at very bottom of style.css)
   ========================================================= */


/* 2) 이미지가 "있을 때만" 배경을 흰색으로 (Chrome/Edge OK: :has 지원) */
.player-slot.field-slot:has(img.player-img),
.player-slot.field-slot:has(img),
.player-slot.sub:has(img.player-img),
.player-slot.sub:has(img),
.player-slot.sub-slot:has(img.player-img),
.player-slot.sub-slot:has(img) {
  background: rgba(30, 32, 31, 0.55);
  border-radius: 8px;
  border: none !important;
}



/* 3) 주전/서브 이미지: 후보 슬롯과 동일하게 강제 적용 */
.player-slot.field-slot .player-img,
.player-slot.sub .player-img,
.player-slot.sub-slot .player-img,
.player-slot.field-slot img,
.player-slot.sub img,
.player-slot.sub-slot img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 8px;
  /* 슬롯 라운드와 맞춤 */

}

/* 4) (모바일에서 슬롯 라운드가 6px로 줄어들면 이미지도 맞춰줌) */
@media (max-width: 768px) {

  .player-slot.field-slot .player-img,
  .player-slot.sub .player-img,
  .player-slot.sub-slot .player-img,
  .player-slot.field-slot img,
  .player-slot.sub img,
  .player-slot.sub-slot img {
    border-radius: 6px;
  }
}

/* =========================
   MOBILE OPTIONS (CLEAN)
   - IDs used:
     #mobileOptionsBtn
     #mobileOptionsPopup
     #mobileControlContent
     #closeMobileOptions
     #mobileOpenSettingsBtn
   - JS toggles .hidden on #mobileOptionsPopup
   ========================= */

/* PC에서는 모바일 옵션/패널/햄버거 숨김 */
@media (min-width: 901px) {

  #mobileOptionsBtn,
  #mobileOptionsPopup,
  #mobileControlContent {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #mobileOptionsBtn.hidden {
    display: none !important;
  }
}

/* MOBILE (<=900px) */
@media (max-width: 900px) {

  /* =========================
     1) HAMBURGER (floating)
     ========================= */
  #mobileOptionsBtn {
    display: grid !important;
    position: fixed;
    left: 0px;
    top: 28px;
    width: 46px;
    height: 46px;
    place-items: center;

    border-radius: 12px;
    background: rgba(14, 14, 16, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);

    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    z-index: 20000;
  }

  #mobileOptionsBtn:active {
    transform: translateY(1px);
  }

  /* JS 토글용 (wireMobilePopups에서 .hidden 붙임) */
  #mobileOptionsBtn.hidden {
    display: none !important;
  }

  /* =========================
     2) OVERLAY
     ========================= */
  #mobileOptionsPopup {
    position: fixed;
    inset: 0;
    z-index: 10000;

    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility .18s ease;
  }

  #mobileOptionsPopup.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* =========================
     3) DRAWER PANEL (3-zone layout)
     - header (top, sticky)
     - body (scrollable, centered spacing)
     - actions/footer (bottom sticky)
     ========================= */
  #mobileControlContent {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;

    width: min(88vw, 380px);
    background: linear-gradient(180deg, rgba(18, 18, 20, 0.96), rgba(12, 12, 14, 0.94));
    color: #fff;

    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 22px 0 60px rgba(0, 0, 0, 0.55);

    padding: 12px;
    transform: translateX(0);
    transition: transform .22s ease;

    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;

    /* ✅ “위에 몰림” 방지: body를 스크롤 영역으로 */
    overflow: hidden;
  }

  /* 닫힐 때 패널도 같이 왼쪽으로 */
  #mobileOptionsPopup.hidden #mobileControlContent {
    transform: translateX(-102%);
  }

  /* =========================
     4) HEADER (top)
     ========================= */
  #mobileControlContent .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
  }

  #closeMobileOptions {
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 0 12px;
  }

  #closeMobileOptions:active {
    transform: translateY(1px);
  }

  /* =========================
     5) BODY (middle, scroll)
     - body 안에서 “섹션 카드” 느낌으로 배분
     ========================= */
  #mobileControlContent .drawer-body {
    overflow: auto;
    padding: 2px 2px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* 스크롤바 얇게(선택) */
    scrollbar-width: thin;
  }

  #mobileControlContent .drawer-body::-webkit-scrollbar {
    width: 8px;
  }

  #mobileControlContent .drawer-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
  }

  /* 각 블록을 카드처럼 */
  #mobileControlContent .mobile-setting-block {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
  }

  /* drawer-actions도 카드처럼 (버튼 묶음) */
  #mobileControlContent .drawer-actions {
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* triple-row(리그/잔디 2개) */
  #mobileControlContent .triple-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
  }

  /* =========================
     6) FORM CONTROLS
     ========================= */
  #mobileControlContent select,
  #mobileControlContent input[type="text"],
  #mobileControlContent input[type="number"] {
    height: 40px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
  }

  #mobileControlContent input[type="file"] {
    width: 100%;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
  }

  #mobileControlContent label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.80);
    letter-spacing: .2px;
  }

  /* =========================
     7) BUTTONS
     ========================= */
  #mobileControlContent button {
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    padding: 0 12px;
    margin: 0;
    box-shadow: none;
    min-width: 0;
  }

  #mobileControlContent button:active {
    transform: translateY(1px);
  }

  /* 강조 버튼(있으면) */
  #mobileOpenSettingsBtn {
    background: rgba(37, 99, 235, 0.90) !important;
    border-color: rgba(37, 99, 235, 0.55) !important;
  }

  /* 공유 버튼(있으면) */
  #mobileShareBtn {
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(16, 185, 129, 0.32);
  }

  /* 초기화 버튼(있으면) */
  #mobileResetBtn {
    background: linear-gradient(180deg,
        rgba(255, 90, 90, 0.28),
        rgba(180, 40, 40, 0.32)) !important;

    border: 1px solid rgba(255, 120, 120, 0.45) !important;
    color: #fff !important;

    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.12),
      0 4px 14px rgba(0, 0, 0, 0.35);

    border-color: rgba(239, 68, 68, 0.30);
    position: absolute;
    top: 22px;
    right: 24px;

    height: 36px;
    padding: 0 14px;

    border-radius: 12px;
    font-weight: 900;
    font-size: 12px;

    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.35);
  }

  #mobileResetBtn:active {
    transform: translateY(1px) scale(0.98);
  }

  /* =========================
     8) OPTIONAL: backdrop click area
     ========================= */
  #mobileOptionsPopup .drawer-backdrop {
    position: absolute;
    inset: 0;
  }

  /* 팀 이름 변경 입력창 고급 그레이 스타일 */
  #mobileTeamSelector {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.14),
        rgba(255, 255, 255, 0.06)) !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;

    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.08),
      0 2px 8px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(2px);
  }

  /* 플레이스홀더 색도 살짝 고급스럽게 */
  #mobileTeamSelector::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
  }

  /* 팀 이름 변경 입력창: 무테 + 고급 그레이 */
  #mobileTeamSelector {
    border: 0 !important;
    /* ✅ 흰 테두리 제거 */
    outline: none !important;

    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.05)) !important;

    color: #fff !important;

    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.06),
      0 2px 8px rgba(0, 0, 0, 0.28);
    /* 외곽 그림자만 남김 */

    backdrop-filter: blur(2px);
  }

}

/* =========================
   ADD: Tablet + Landscape tuning (MOBILE OPTIONS)
   - 기존 스타일은 그대로 두고 "추가"만 하세요
   ========================= */

/* 1) 태블릿(가로/세로 공통)에서 패널 폭/햄버거 위치 조정 */
@media (min-width: 901px) and (max-width: 1200px) {

  /* PC 규칙(901px+)에서 전부 숨겨버리니, 태블릿도 쓰려면 이 구간에서 다시 살려야 함 */
  #mobileOptionsBtn,
  #mobileOptionsPopup,
  #mobileControlContent {
    display: unset !important;
  }

  #mobileOptionsBtn {
    display: grid !important;
  }

  #mobileOptionsBtn {
    top: 18px;
    left: 10px;
  }

  #mobileControlContent {
    width: min(56vw, 420px);
  }
}

/* ✅ 모바일 가로(landscape) 전용: 정렬 안정화 버전 (기존 블록 통째로 교체) */
@media (max-width: 900px) and (orientation: landscape) {

  /* 0) 패널: 높이 부족하면 스크롤로 해결(겹침 방지) */
  #mobileControlContent {
    width: min(78vw, 560px);
    padding: 10px;
    gap: 8px;
    overflow: auto;
  }

  /* 1) 헤더 */
  #mobileControlContent .drawer-header {
    padding: 8px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  #closeMobileOptions {
    min-height: 32px;
    height: auto;
    border-radius: 11px;
    font-size: 12px;
    padding: 6px 10px;
    flex: 0 0 auto;
  }

  /* 2) 바디/블록 기본 간격 */
  #mobileControlContent .drawer-body {
    gap: 8px;
    padding-bottom: 8px;
  }

  #mobileControlContent .mobile-setting-block {
    padding: 6px 8px;
    border-radius: 12px;
  }

  /* 3) ✅ 핵심: 가로모드에서 “줄바꿈 허용” + 정렬 안정화 */
  #mobileControlContent .mobile-setting-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    /* ✅ nowrap 금지: 폭 부족하면 2줄로 */
  }

  /* 4) 라벨: 폭 고정(1줄), 줄바꿈되면 위 줄에 남아도 OK */
  #mobileControlContent .mobile-setting-block label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1;
    flex: 0 0 72px;
    /* ✅ 56->72: 좁아서 겹치면 80~90 */
    white-space: nowrap;
  }

  /* 5) 컨트롤: 고정 height 제거, min-height로만 보장 */
  #mobileControlContent select,
  #mobileControlContent input[type="text"],
  #mobileControlContent input[type="number"] {
    height: auto !important;
    /* ✅ 고정 높이 제거 */
    min-height: 36px !important;
    /* ✅ 최소 높이만 보장 */
    padding: 6px 12px !important;
    border-radius: 12px;
    font-size: 13px;

    flex: 1 1 220px;
    /* ✅ 폭 부족하면 다음 줄로 내려감 */
    min-width: 180px;
    max-width: 100%;
  }

  /* 6) 버튼: 고정 height 제거 */
  #mobileControlContent button {
    height: auto !important;
    min-height: 34px !important;
    border-radius: 12px;
    font-size: 12px;
    padding: 6px 10px;
    flex: 0 0 auto;
    min-width: 0;
  }

  /* 7) 액션 영역 */
  #mobileControlContent .drawer-actions {
    padding: 8px;
    border-radius: 12px;
    gap: 8px;
  }

  /* 8) 리셋 버튼(절대위치 유지 시) */
  #mobileResetBtn {
    top: 10px !important;
    right: 12px !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }

  /* 9) 파일 불러오기: 기존 디자인 유지(높이 고정) */
  #mobileControlContent .mobile-file-btn {
    height: 30px !important;
    padding: 2px 4px 0 !important;
    flex: 0 0 auto;
  }
}


#mobileControlContent .mobile-setting-block {
  gap: 2px;
  padding: 0 !important;
  justify-content: center !important;
}



@media (max-width: 768px) {
  #mobileScreenshotBtn {
    order: 2;
  }

  #mobileSaveBtn {
    order: 0;
  }

  #mobileLoadFile {
    order: 1;
  }


  #mobileSaveBtn {
    order: 0;
  }

  #mobileLoadFile {
    order: 1;
    height: 12px
  }
}



/* 모바일 옵션 내부 label 기본 여백 제거 */
#mobileControlContent .mobile-setting-block label {
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* "불러오기" 파일 버튼(label) */
#mobileControlContent .mobile-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 90%;
  margin-left: auto;
  /* ✅ 오른쪽으로 이동 */
  margin-right: 0;

  height: 30px;
  padding: 2px 4px 0;

  border-radius: 8px;
  background: #2a2a2a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
}


#mobileControlContent .mobile-file-btn:active {
  transform: translateY(1px);
}

/* ✅ 팀명 입력(#mobileTeamSelector)만 높이/세로패딩 확대 (파일불러오기 영향 없음) */
#mobileTeamSelector {
  height: 36px !important;
  /* 다른 버튼 높이와 동일 */
  padding: 4px 12px !important;
  /* 좌우는 유지 */
  line-height: 40px !important;
  /* 세로 가운데 정렬 */
  font-size: 14px !important;
}

/* 팀명 변경이 들어있는 블록만(가능하면 id나 클래스로 한정) */
#mobileControlContent .mobile-setting-block.teamname-block {
  padding: 10px 10px !important;
}

/* 그 안에서 입력은 꽉 채우되 패딩 덕분에 여유가 생김 */
#mobileControlContent .mobile-setting-block.teamname-block #mobileTeamSelector {
  width: 100%;
  margin: 0;
}


/* ✅ 파일 불러오기 영역은 기존 높이 유지(혹시 영향받으면 이걸로 고정) */
#mobileControlContent .mobile-file-btn {
  height: 30px !important;
  padding: 2px 4px 0 !important;
}

#mobileControlContent input[type="file"] {
  height: auto !important;
}


/* 선수 배치된 슬롯: 배경 제거 (PNG 투명 배경 살리기) */
.player-slot:has(.player-img[src]) {
  background: transparent !important;
}

/* 내부 박스도 검정 제거 */
.player-slot:has(.player-img[src]) .player-box {
  background: transparent !important;
}

.event-toast-title,
.event-toast-sub {
  color: #ffffff !important;
}

.tactic-fade {
  animation: tacticFade 260ms ease-in-out;
}

@keyframes tacticFade {
  from {
    filter: brightness(1.25) saturate(1.2);
  }

  to {
    filter: brightness(1.0) saturate(1.0);
  }
}

/* ✅ 상단 검은 박스: 진행 문자열 라인 제거(버튼+프로그레스만) */
#eventReplayOverlay .er-line {
  display: none !important;
}

/* ✅ er-body를 얇게(프로그레스 공간만) */
#eventReplayOverlay .er-body {
  padding: 6px 8px 12px !important;
  min-height: 18px !important;
}

#scoreBadgeCenter {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.er-toast-title {
  color: #f8fafc;
}

.er-toast-sub {
  color: #fdba74;
}

.er-toast-title,
.er-toast-sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.field-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}


/* 팀명 텍스트 */
#fieldLabelA,
#fieldLabelB{
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.field-team-logo{
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translate(-140%, -50%);
  pointer-events: none;
}

/* iOS/모바일 롱프레스/드래그 방지 (스크롤 유지) */
.player-slot,
.player-slot * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.player-slot img {
  -webkit-user-drag: none; /* ✅ 이것만 사용 */
}


/* ==================================================
   Screenshot (CONSOLIDATED)
   - moved to bottom to maximize precedence
   ================================================== */

/* === Screenshot Popup === */
#screenshotPopup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

#screenshotPopup.show {
  display: block;
}

#screenshotPopup .shot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

#screenshotPopup .shot-panel {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(90%, 420px);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

#screenshotPopup h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

#screenshotPopup button {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

#screenshotPopup button:not(.close) {
  background: #2563eb;
  color: #fff;
}

#screenshotPopup .close {
  background: #222;
  color: #fff;
}

/* =========================
   PC 화면 (중앙 팝업)
========================= */
@media (min-width: 901px) {
  #screenshotPopup.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 핵심: 하단 고정 속성 전부 제거 */
  #screenshotPopup .shot-panel {
    position: relative !important;
    /* 또는 static */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}


/* =========================
   모바일 화면 (하단 시트)
========================= */
@media (max-width: 900px) {
  #screenshotPopup {
    display: none;
    position: fixed;
    inset: 0;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
  }

  #screenshotPopup.show {
    display: flex;
  }

  #screenshotPopup .shot-panel {
    margin-bottom: 16px;
  }
}

/* =========================
   Overlay Text Modal Styles
   (for #shotTextPopup markup)
   ========================= */

#shotTextPopup {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  /* 기본 숨김 */
}

/* 기존 로직: classList.add('show')로 열림 */
#shotTextPopup.show {
  display: block;
}

/* 반투명 배경 */
#shotTextPopup .shot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* 중앙 패널 */
#shotTextPopup .shottext-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 460px);
  background: #30353a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* 타이틀 */
#shotTextPopup .shottext-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* 토글 라벨 */
#shotTextPopup .shottext-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  font-size: 14px;
  opacity: 0.95;
}

#shotTextPopup .shottext-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4b8cff;
}

/* 텍스트 입력 */
#shotTextPopup .shottext-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
}

#shotTextPopup .shottext-textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* 버튼 영역 */
#shotTextPopup .shottext-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* 버튼 공통 */
#shotTextPopup .shottext-actions button {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

#shotTextPopup .shottext-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 저장 버튼 강조 */
#shotTextPopup .shottext-save {
  background: #4b8cff;
  border-color: rgba(75, 140, 255, 0.55);
}

#shotTextPopup .shottext-save:hover {
  background: #3b7cff;
}

/* 닫기 버튼 */
#shotTextPopup .shottext-close {
  background: rgba(255, 255, 255, 0.06);
}

/* 모바일에서 너무 위로 뜨는 경우 방지 */
@media (max-width: 420px) {
  #shotTextPopup .shottext-panel {
    width: 92vw;
    padding: 16px 16px 14px;
    border-radius: 14px;
  }

  #shotTextPopup .shottext-title {
    font-size: 17px;
  }
}


@keyframes tapFeedback {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.94);
  }

  70% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

.player-slot.tap {
  animation: tapFeedback 160ms cubic-bezier(.2, .8, .3, 1);
}

.player-box {
  position: relative;
}

.player-number {
  position: absolute;
  top: 4px;
  right: 6px;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;

  font-family:
    "DIN Condensed",
    "DIN Alternate",
    "Inter",
    "Roboto Condensed",
    system-ui,
    sans-serif;

  /* 잔디 대비 최고 */
  color: #ffffff;
  /* 거의 흰색에 가까운 민트 */

  background: transparent;
  /* 외곽을 더 얇게 느끼게 하는 트릭 */
  /* 🔥 두꺼운 외곽선 (검정) */
text-shadow:
  /* 1차 외곽 (유지하되 살짝 얇게) */
  -0.8px 0 0 rgba(0, 0, 0, 0.95),
   0.8px 0 0 rgba(0, 0, 0, 0.95),
   0 -0.8px 0 rgba(0, 0, 0, 0.95),
   0  0.8px 0 rgba(0, 0, 0, 0.95),

  /* 2차 외곽 (강도만 낮춤) */
  -1.4px 0 0 rgba(0, 0, 0, 0.65),
   1.4px 0 0 rgba(0, 0, 0, 0.65),
   0 -1.4px 0 rgba(0, 0, 0, 0.65),
   0  1.4px 0 rgba(0, 0, 0, 0.65),

  /* 대각선 보정 (톤 다운) */
  -1px -1px 0 rgba(0, 0, 0, 0.65),
   1px -1px 0 rgba(0, 0, 0, 0.65),
  -1px  1px 0 rgba(0, 0, 0, 0.65),
   1px  1px 0 rgba(0, 0, 0, 0.65);


  letter-spacing: -0.02em;
  pointer-events: none;
}




/* 
.player-captain{
  position:absolute; top:4px; left:2px;
  z-index: 5;
  width:14px; height:14px; border-radius:9px;
  display:none; align-items:center; justify-content:center;
  font-size:12px; font-weight:900;
  color:#fff; background:rgba(0, 0, 0, 0.904);
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
}
  */
/* 캡틴 마크 - 삼각형 리본 */
.player-captain {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;

  /* 삼각형 크기 */
  border-top: 28px solid rgba(0, 0, 0, 0.75);
  border-right: 28px solid transparent;

  z-index: 6;
  pointer-events: none;

  /* 기존 텍스트 숨김 */
  color: transparent;
  font-size: 0;
}

/* 삼각형 안의 C 글자 */
.player-captain::after {
  content: "C";
  position: absolute;
  top: -28px;
  left: 4px;

  font-size: 12px;
  font-weight: 900;
  color: #fff;

  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* 선수 정보 툴팁(풍선) */
.player-tooltip {
  position: fixed;
  z-index: 99999;
  min-width: 220px;
  max-width: 320px;
  background: rgba(15, 15, 18, 0.95);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  padding: 10px 12px;
  font-size: 12px;
  top: 12px;
  left: 50%;
}

.player-tooltip .tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}


.player-tooltip .tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.player-tooltip .tt-name {
  font-weight: 800;
  font-size: 13px;
}

.player-tooltip .tt-sub {
  opacity: .85;
  font-size: 11px;
}

.player-tooltip .tt-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 0;
}

.player-tooltip .tt-label {
  width: 54px;
  opacity: .7;
  flex: 0 0 auto;
}

.player-tooltip .tt-value {
  flex: 1 1 auto;
  word-break: break-word;
}

.player-tooltip .tt-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.player-tooltip .tt-ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  opacity: .9;
}

.player-tooltip .tt-ig:hover {
  opacity: 1;
}

.player-tooltip .ig-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.player-tooltip .tt-ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  /* 기본 텍스트 */
  text-decoration: none;
  opacity: .92;
}

.player-tooltip .tt-ig .ig-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  color: #fff;
  /* SVG currentColor */
}

/* (선택) 인스타 느낌 강조하고 싶으면 */
.player-tooltip .tt-ig:hover .ig-icon {
  color: #ff4fd8;
}



/* 툴팁 편집 버튼 */
.player-tooltip .tt-edit {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .95;
}

.player-tooltip .tt-edit:hover {
  background: rgba(255, 255, 255, .14);
}

.player-tooltip .tt-edit svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

/* 기록 편집 모달 */
.stats-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.stats-modal .panel {
  width: 100%;
  max-width: 360px;
  background: rgba(15, 15, 18, .98);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  padding: 14px;
}

.stats-modal .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stats-modal .title {
  font-weight: 900;
}

.stats-modal .close {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.stats-modal .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-modal label {
  font-size: 11px;
  opacity: .75;
  display: block;
  margin-bottom: 6px;
}

.stats-modal input {
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  outline: none;
}

.stats-modal .actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.stats-modal .btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}

.stats-modal .btn.primary {
  background: rgba(255, 255, 255, .14);
  font-weight: 800;
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
}

.rank-table th,
.rank-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.rank-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
}

.rank-table tbody tr:hover {
  background: rgba(0, 0, 0, .03);
}



/* 팀명/제목 텍스트 선택 방지 */
.team-box h3,
.mobile-team-title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  /* iOS 길게눌러 메뉴 방지 */
}

.mobile-team-title {
  touch-action: manipulation;
  /* 더블탭 확대 억제 성격 */
}


@media (max-width: 768px) {
  .player-name:not(:empty) {
    bottom: 0;
    /* 유지 */
    height: 14px;
    /* 모바일 슬롯에 맞춤 */
    line-height: 14px;
    font-size: 9px;
  }
}

@media (max-width: 768px) {
  .player-slot {
    position: relative;
  }

  .player-box {
    position: relative;
  }
}

.player-name:not(:empty) {
  border-radius: 0 0 6px 6px;
  /* 슬롯(8px)과 맞춤: 하단만 둥글게 */
  overflow: hidden;
  /* 라운드 밖으로 배경/텍스트 삐져나옴 방지 */
}

@media (max-width: 768px) {
  .player-name:not(:empty) {
    border-radius: 0 0 6px 6px;
  }
}

/* 주전/서브 슬롯: 흰 여백/반점 방지 */
.player-slot.field-slot .player-img,
.player-slot.sub .player-img,
.player-slot.sub-slot .player-img {
  width: 100% !important;
  height: auto;
  /*max-height: 100%;      /* 이거넣으면 반점생김 */
  object-fit: cover;
}

.player-img {
  z-index: 0;
}

.player-name {
  z-index: 2;
}

@media (max-width: 768px) {
  .player-number {
    font-size: 8px;
    /* ← 핵심 */
    padding: 1px 3px;
    border-radius: 4px;

    top: 2px;
    /* 위치도 살짝 보정 */
    right: 1px;
  }
}

@media (max-width: 768px) {
  .player-captain {
    border-top-width: 18px;
    /* ↓ 기존 18px → 10px */
    border-right-width: 18px;
  }
}

@media (max-width: 768px) {
  .player-captain::after {
    top: -15px;
    left: 3px;
    font-size: 6px;
  }
}


#modePopup .popup-content,
#modePopup .modal-content,
#modePopup .popup-inner {
  background: rgba(18, 18, 20, 0.92);
  color: #fff;
}

/* 모달 뒷패널(오버레이) */
#modePopup:not(.hidden) {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  /* 어두운 배경 */
  backdrop-filter: blur(4px);
  /* 살짝 블러 */
  z-index: 9999;
}

/* 모달 앞패널(내용 패널) */
#leagueSection {
  background: rgba(18, 18, 20, 0.94);
  /* 거의 불투명 */
  color: #ffffff;
  /* 텍스트 흰색 */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* 팀 체크리스트 행 */
.team-check-row {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* 구분선/보더 대비 개선 */
#leagueSection hr,
#leagueSection .divider {
  border-color: rgba(252, 249, 252, 0.702);
}


/* 체크리스트 행도 값 표기 정상화 + 대비 확보 */
.team-check-row {
  background: rgba(255, 255, 255, 0.06);
  /* 05 → 0.06 */
  color: #fff;
}

/* ============================
   Mobile sliding drawer (hamburger/bookmark-tab)
   - overrides without touching existing style.css
   ============================ */


/* 기본: PC/태블릿 포함 전부 숨김 */
.mobile-only {
  display: none !important;
}

/* PC/마우스 환경에서는 폭이 좁더라도 숨김(예: 터치 노트북 등) */
@media (hover: hover) and (pointer: fine) {

  #mobileOptionsBtn,
  #mobileOptionsPopup,
  #mobileControlContent {
    display: none !important;
  }
}



/* =========================
   Screenshot Popup (Responsive)
========================= */

#screenshotPopup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

#screenshotPopup.show,
#screenshotPopup:not(.hidden) {
  display: flex;
}

#screenshotPopup .shot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

#screenshotPopup .shot-panel {
  position: relative;
  background: #111;
  color: #fff;
  width: min(92vw, 420px);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#screenshotPopup h3 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

#screenshotPopup .shot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#screenshotPopup .shot-actions button {
  padding: 12px 10px;
  border-radius: 10px;
  border: none;
  background: #2a2a2a;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

#screenshotPopup .shot-actions button:hover {
  background: #3a3a3a;
}

#screenshotPopup #closeShot {
  margin-top: 6px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #444;
  color: #fff;
  font-weight: 700;
}

/* 태블릿 */
@media (max-width: 900px) {
  #screenshotPopup .shot-panel {
    width: min(94vw, 380px);
  }
}

/* 모바일 */
@media (max-width: 520px) {
  #screenshotPopup .shot-panel {
    width: 92vw;
    padding: 16px 14px;
  }

  #screenshotPopup .shot-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== 스크린샷 모드: 빈 슬롯 테두리 자국(다이아) 방지 ===== */


/* 빈 SUB 라벨도 같이 안정화(겹침/흔들림 방지) */
body.screenshot-mode .player-slot.sub .sub-label {
  transform: translateZ(0);
}

/* 경기장 컨테이너 기준 */
#field-1,
#field-2,
.pitch,
.field,
.pitch-wrap {
  position: relative;
}

/* 골 전용 3회 번쩍 */
.player-slot.goal-flash {
  outline: 2px solid #ff3b3b;
  outline-offset: 2px;
  border-radius: 14px;
  animation: goalFlashRed .35s ease-in-out 3 alternate;
}

@keyframes goalFlashRed {
  from {
    box-shadow: 0 0 2px rgba(255, 59, 59, 0.35), 0 0 8px rgba(255, 59, 59, 0.2);
  }

  to {
    box-shadow: 0 0 10px rgba(255, 59, 59, 1), 0 0 22px rgba(255, 59, 59, 0.85), 0 0 36px rgba(255, 59, 59, 0.65);
  }
}


/* 모바일 vh/vw/landscape 규칙 무력화 */
.screenshot-mode * {
  transition: none !important;
}


/* ✅ 실루엣 네온: 선수가 들어간 슬롯에만 */
.field .player-slot.has-player .player-img,
.field .player-slot.has-player svg {
  filter:
    drop-shadow(0 0 1px rgba(120, 200, 255, 0.95))
    drop-shadow(0 0 4px rgba(120, 200, 255, 0.6))
    drop-shadow(0 0 8px rgba(120, 200, 255, 0.35));
}

/* ✅ screenshot 캡처에서도 동일하게 강제 */
body.screenshot-mode .field .player-slot.has-player .player-img,
body.screenshot-mode .field .player-slot.has-player svg {
  -webkit-filter:
    drop-shadow(0 0 1px rgba(120, 200, 255, 0.95))
    drop-shadow(0 0 4px rgba(120, 200, 255, 0.6))
    drop-shadow(0 0 8px rgba(120, 200, 255, 0.35)) !important;
  filter:
    drop-shadow(0 0 1px rgba(120, 200, 255, 0.95))
    drop-shadow(0 0 4px rgba(120, 200, 255, 0.6))
    drop-shadow(0 0 8px rgba(120, 200, 255, 0.35)) !important;
}

/* 골 넣은 선수 강조 */
.er-goal-scorer {
    font-size: 1.25em;
    font-weight: 900;
    color: #ffcc33;
    text-shadow: 0 0 6px rgba(255,200,80,0.7);
}

/* 도움은 약하게 */
.er-goal-assist {
    font-weight: 600;
    color: #ffe7a0;
}