/* ★ 귀여운 Jua 폰트 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 폰트 적용 및 조금 더 짙어진 파스텔 연두색 배경 */
body { 
  font-family: 'Jua', 'Malgun Gothic', sans-serif; 
  background-color: #e5f6e5; /* 기존보다 더 연두빛이 감돌게 변경 */
  color: #4a5d4e; 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
  /* ★ 배경 패턴 적용 */
  background-image: url('../img/bg-pattern.png'); /* 이미지 파일명 확인 필수 */
  background-repeat: repeat;
  /* background-size: 150px; */ /* 패턴 크기 조절 필요시 사용 */
}

/* ★ 팝업 오픈 시 메인페이지 스크롤 방지 */
body.modal-open { overflow: hidden; }

/* =========================================
   헤더 (Header)
========================================= */
header { 
  display: flex; justify-content: space-between; align-items: center; 
  background-color: #f0fcf0; /* 순백색에서 은은한 메론색으로 변경 */
  padding: 15px 40px; 
  border-bottom: 3px dashed #b8e994; 
  border-radius: 0 0 20px 20px; 
  box-shadow: 0 5px 15px rgba(184, 233, 148, 0.4); 
  margin-bottom: 20px; 
}
.logo { font-size: 28px; color: #2ed573; cursor: pointer; display: flex; align-items: center; gap: 10px; text-shadow: 1px 1px 0px rgba(0,0,0,0.05); }
.auth-box { display: flex; align-items: center; gap: 15px; }
.user-status { font-size: 16px; color: #1dd1a1; }

/* =========================================
   입체적이고 통통 튀는 버튼들
========================================= */
button { 
  font-family: 'Jua', sans-serif; 
  padding: 10px 20px; 
  border: none; 
  border-radius: 30px; 
  font-size: 16px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  box-shadow: 0 4px 0px rgba(0,0,0,0.1); 
}
button:active { 
  transform: translateY(4px); 
  box-shadow: 0 0px 0px rgba(0,0,0,0.1); 
}
/* 로그인 버튼: 산뜻한 민트그린 */
#login-btn { background-color: #2ed573; color: white; box-shadow: 0 4px 0px #27ae60; }
#login-btn:hover { background-color: #7bed9f; }
/* 로그아웃 버튼: 연두색과 어울리는 코랄 핑크 */
#logout-btn { background-color: #ff7f50; color: white; box-shadow: 0 4px 0px #e15f41; }
#logout-btn:hover { background-color: #ff9f43; }

/* =========================================
   포털 레이아웃
========================================= */
.portal-container { display: flex; justify-content: center; align-items: flex-start; max-width: 1280px; margin: 0 auto; gap: 30px; padding: 20px; flex: 1; }
main { flex: 1; max-width: 860px; }

/* 광고 배너 영역 */
.ad-sidebar { width: 160px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 40px; }
.ad-slot { 
  width: 100%; 
  background-color: #f0fcf0; /* 흰색 대신 연두빛 틴트 */
  border-radius: 0px; overflow: hidden; 
  border: 0px solid #b8e994; 
  display: flex; justify-content: center; align-items: center; 
  box-shadow: 0 8px 15px rgba(184, 233, 148, 0.5); 
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.ad-slot:hover { transform: translateY(-5px) scale(1.03); } 
.ad-slot img { width: 100%; height: auto; display: block; }

/* =========================================
   검색 및 필터 (둥글둥글)
========================================= */
.controls-section { 
  display: flex; justify-content: space-between; align-items: center; 
  margin-bottom: 30px; flex-wrap: wrap; gap: 15px; 
  background: #f0fcf0; /* 흰색 대신 연두빛 틴트 */
  padding: 20px; 
  border-radius: 25px; 
  box-shadow: 0 8px 20px rgba(184, 233, 148, 0.3); 
  border: 2px solid #dcf2dc; 
}
.filter-tags { display: flex; gap: 10px; }
.tag { background-color: #e5f6e5; color: #747d8c; padding: 10px 20px; border-radius: 25px; font-size: 16px; cursor: pointer; transition: 0.2s; border: 2px solid transparent; }
.tag:hover { background-color: #dcf2dc; }
.tag.active { background-color: #eafaf1; color: #2ed573; border: 2px solid #2ed573; }

.search-bar { 
  font-family: 'Jua', sans-serif; 
  padding: 12px 20px; border-radius: 25px; 
  border: 2px solid #b8e994; 
  background-color: #e5f6e5; /* 검색창도 옅은 연두색으로 */
  color: #4a5d4e; width: 250px; font-size: 16px; transition: 0.3s; 
}
.search-bar:focus { outline: none; border-color: #2ed573; background-color: #f0fcf0; box-shadow: 0 0 10px rgba(46, 213, 115, 0.3); }

/* =========================================
   게임 목록 카드 (장난감 상자 느낌)
========================================= */
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.game-card { 
  background-color: #f0fcf0; /* 카드 내부도 메론색으로 변경 */
  border-radius: 25px; overflow: hidden; 
  border: 3px solid #dcf2dc; cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  box-shadow: 0 10px 20px rgba(184, 233, 148, 0.3); 
}
.game-card:hover { 
  transform: translateY(-10px); 
  border-color: #2ed573; 
  box-shadow: 0 15px 30px rgba(46, 213, 115, 0.4); 
}

.thumbnail-img { width: 100%; height: 200px; object-fit: cover; background-color: #eafaf1; display: block; }
.thumbnail { width: 100%; height: 200px; background-color: #eafaf1; display: flex; align-items: center; justify-content: center; font-size: 50px; }

.game-info { padding: 20px; text-align: center; }
.game-title { font-size: 22px; color: #2f3542; margin-bottom: 8px; }
.game-desc { font-size: 15px; color: #747d8c; }

/* =========================================
   푸터 (Footer)
========================================= */
footer { 
  text-align: center; padding: 30px 20px; 
  background-color: #f0fcf0; color: #a4b0be; font-size: 15px; 
  border-top: 3px dashed #b8e994; border-radius: 20px 20px 0 0; 
  margin-top: 40px; box-shadow: 0 -5px 15px rgba(184, 233, 148, 0.1); 
}
.ad-inquiry { margin-top: 10px; }
footer a { color: #2ed573; text-decoration: none; transition: color 0.2s; margin: 0 5px; }
footer a:hover { color: #1dd1a1; text-decoration: underline; }

/* =========================================
   팝업 창 (모달) & 외부 상시 광고 설정
========================================= */
.modal-overlay { 
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background-color: rgba(229, 246, 229, 0.9); /* 배경 전체를 더 짙은 연두빛 반투명으로 */
  backdrop-filter: blur(5px); 
  z-index: 1000; justify-content: center;
  
  /* ★ 스크롤 문제 해결을 위한 수정 */
  align-items: flex-start; /* 화면 위에서부터 시작하도록 변경 */
  overflow-y: auto;        /* 화면보다 모달이 길어지면 자체 스크롤 생성! */
  padding: 40px 0;         /* 위아래 여백 추가 */
}

.modal-layout-wrapper { 
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center; 
  gap: 20px; width: 100%; max-width: 1300px; padding: 20px; 
  
  /* ★ 스크롤 문제 해결을 위한 추가 */
  margin: auto; /* 화면이 클 때 완벽하게 중앙 정렬되도록 잡아주는 마법의 속성 */
}

/* 팝업 광고 */
.modal-side-ad { width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 15px; flex-shrink: 0; border: none; }

/* 게임 창 본체 */
.modal-content { 
  position: relative; width: 860px; max-width: 95vw; height: 700px; max-height: 95vh; 
  background-color: #f0fcf0; /* 팝업 내부도 연두색 틴트 */
  border: 4px solid #2ed573; 
  border-radius: 30px; 
  overflow: hidden; display: flex; flex-direction: column; 
  box-shadow: 0 20px 50px rgba(46, 213, 115, 0.4);
  
  /* ★ 창 찌그러짐 방지 */
  flex-shrink: 0;
}

/* 닫기 버튼 */
.close-modal { 
  position: absolute; top: 15px; right: 20px; font-size: 35px; color: #2ed573; 
  cursor: pointer; z-index: 1010; transition: all 0.3s ease; text-shadow: none; 
}
.close-modal:hover { color: #27ae60; transform: scale(1.2) rotate(90deg); }

/* 동영상 대기 레이어 */
.ad-screen { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  background-color: #f0fcf0; /* 대기화면도 연두색 배경 */
  display: flex; flex-direction: column; 
  justify-content: center; align-items: center; z-index: 1005; 
}
#ad-title { color: #2ed573; font-size: 30px; margin-bottom: 10px; }
#ad-desc { color: #747d8c; }
.ad-timer { font-size: 50px; color: #1dd1a1; margin-top: 20px; font-weight: normal; }

#game-frame { width: 100%; height: 100%; border: none; display: none; background-color: #000; }

/* =========================================
   반응형 (Media Queries)
========================================= */
@media (max-width: 1200px) { .right-ads { display: none; } .modal-side-ad.right { display: none; } }
@media (max-width: 1000px) { .left-ads { display: none; } .modal-side-ad.left { display: none; } .portal-container { gap: 0; } }
@media (max-width: 768px) { .game-grid { grid-template-columns: 1fr; } .controls-section { flex-direction: column; align-items: stretch; } }