/*
  [파일 역할]
  - 화면 폭(Desktop/Tablet/Mobile)에 따라 레이아웃과 컴포넌트 크기를 조정하는 반응형 스타일 파일.

  [왜 필요한가]
  - 같은 기능이라도 기기별 사용 방식이 다르므로, 읽기/클릭/입력이 편한 UI를 유지하기 위해 필요.

  [핵심 기능]
  - Desktop(769~1280): 컨테이너 폭/패딩 완화
  - Tablet(481~768): 폰트/테이블/미니게임 오브젝트 축소
  - Mobile(~480): 배너 숨김, 버튼/테이블/모달 모바일 최적화
*/
/* ========================================================= */
/* [Desktop: 769px - 1280px] */
/* ========================================================= */
@media screen and (min-width: 769px) and (max-width: 1280px) {
  .container {
    width: 95%; /* 기존 960px 고정 해제 */
    max-width: 960px;
    padding: 40px 0;
  }

  header {
    padding: 0 30px;
  }

  footer {
    padding: 0 60px;
  }
}

/* ========================================================= */
/* [Tablet: 481px - 768px] */
/* ========================================================= */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* 1. 컨테이너 및 패딩 조정 */
  .container {
    width: 90%;
    padding: 30px 0;
  }

  body {
    overflow-y: auto;
  }

  header {
    padding: 0 20px;
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    /* 필요하다면 로고와 버튼을 줄바꿈할 수도 있지만, 
           태블릿 너비에선 한 줄도 충분할 수 있음 */
  }

  footer {
    height: 160px;
    padding: 0 30px;
    justify-content: center;
    text-align: center;
  }

  /* 2. 폰트 사이즈 조정 */
  section > h2 {
    font-size: 24px; /* 32px -> 24px */
  }

  .team-info > h2 {
    font-size: 30px; /* 40px -> 30px */
  }

  /* 3. 테이블 조정 (글자가 짤리지 않게) */
  .table-cells {
    font-size: 13px;
  }
  .tc-checkbox {
    width: 30px;
  }
  .tc-number {
    width: 40px;
  }
  .tc-etc {
    width: calc((100% - 30px - 40px) / 4);
  }

  /* 4. 미니게임 조정 (보트 크기 줄임) */
  .boat-container {
    width: 360px; /* 480px -> 360px */
    height: 240px; /* 320px -> 240px */
    transform: translate(-50%, -80%);
  }

  .boat {
    height: 105px; /* 140px에서 75% 축소 */
  }

  .fisherman {
    width: 210px; /* 280px에서 75% 축소 */
    bottom: 100px;
    transform: translate(calc(-50% + 135px), 30px);
  }

  .fishing-line {
    height: 110px; /* 줄 길이 조정 */
  }

  /* 팝업 크기 조정 */
  #active-fish-popup {
    width: 250px;
    height: 250px;
  }
}

/* ========================================================= */
/* [Mobile: ~ 480px] */
/* ========================================================= */
@media screen and (max-width: 480px) {
  /* 1. 레이아웃 전반 */
  body {
    font-size: 13px;
    overflow-y: auto;
  }

  .container {
    width: 100%;
    padding: 20px 10px; /* 좌우 여백 확보 */
  }

  header {
    flex-direction: column;
    height: auto;
    padding: 10px 0;
    gap: 10px;
  }

  /* 로고 중앙 정렬 */
  .logo {
    height: 40px;
  }

  /* 배너 숨김 처리 (모바일 공간 확보) */
  .add-banner-left,
  .add-banner-right {
    display: none;
  }

  /* 2. 섹션 및 폰트 */
  section {
    padding: 15px;
    margin-bottom: 20px;
  }

  section > h2 {
    font-size: 20px;
    padding-bottom: 20px;
    text-align: center;
  }

  .members h2,
  .members .manage-buttons {
    text-align: center;
    justify-content: center;
  }

  /* 버튼들 모바일 최적화 */
  .manage-buttons,
  .flex.align-center {
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-btn {
    height: 35px;
    font-size: 12px;
    padding: 0 10px;
  }

  /* 3. 테이블 - 스크롤 처리 (가로폭 좁음) */
  .table {
    min-width: 320px; /* 최소 너비 보장 */
    overflow-x: auto;
  }

  .table-cells {
    font-size: 12px;
    padding: 0 2px;
  }

  /* 4. 팀 배정 옵션들 세로 배치 */
  .flex.align-center.flex-gap-10 {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .flex.align-center.flex-gap-10 > ul {
    justify-content: space-between;
    width: 100%;
  }

  /* 5. 미니게임 - 대폭 축소 (Scale 활용) */
  .boat-container {
    /* 원본 크기 유지하되 scale로 축소 */
    top: 50%;
    transform: translate(-50%, -70%) scale(0.6);
  }

  .team-info {
    left: 20px;
    top: 20px;
  }
  .team-info > h2 {
    font-size: 24px;
  }

  .record-box {
    min-width: 180px;
    min-height: 100px;
    font-size: 1.2rem;
    padding: 10px;
  }

  /* 스킵 버튼 위치 조정 */
  #skip-btn {
    top: 10px;
    right: 10px;
    padding: 5px 15px;
    font-size: 0.8rem;
  }

  /* 팝업 모바일 최적화 */
  #active-fish-popup {
    width: 200px;
    height: 200px;
  }
  #active-fish-popup img {
    width: 80px;
    height: 80px;
  }
  #active-fish-popup div {
    font-size: 1rem;
  }

  /* 결과 모달 */
  .modal-content {
    width: 95%;
    padding: 15px;
  }
}