/* ================= reset.css ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ================= base.css ================= */
body { font-family: 'Segoe UI', sans-serif; background-color: #0d1b2a; color: white; display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
main { flex: 1; }

/* ================= layout.css ================= */
#main-header { position: fixed; top: -100px; left: 0; width: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3), rgba(53, 179, 210, 0.7), rgba(228, 117, 54, 0.7)); padding: 0 40px; height: 60px; display: flex; align-items: center; justify-content: space-between; transition: top 1s ease; z-index: 1000; }
#main-header.active {top: 0;}
nav ul { display: flex; list-style: none; gap: 20px; margin-top: 10px; }

/* ================= components.css ================= */
.logo { width: 120px; height: auto; display: block; }
.logo img { width: 50%; height: auto; display: block; }
#check {display: none;}
.language { cursor: pointer; padding: 0; border-radius: 0; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; width: auto; height: auto; background: none; }
.language i { font-size: 22px; transition: color 0.3s; cursor: pointer; color: #121212; font-weight: bold; line-height: 1; }
.language i:hover {color: #ffffff;}
nav ul li a { color: #121212; font-weight: bold; text-decoration: none; transition: color 0.3s; }
nav ul li a:hover {color: #ffffff;}

#language-popup { position: absolute; background-color: rgba(26, 26, 26, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px); transition: all 0.2s ease; z-index: 1001; }
#language-popup.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#language-popup a { color: white; text-decoration: none; font-size: 0.9rem; padding: 5px 10px; border-radius: 4px; transition: background 0.2s; }
#language-popup a:hover, #language-popup a.active { background: rgba(53, 179, 210, 0.5); }

/* ================= pages.css ================= */
.section > section { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.fade-in-on-load { animation: pageFadeIn 1.5s ease-out forwards; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 게임 섹션 스타일 변경 (배경 레이어 도입) */
.games {
  padding: 80px 20px 40px; min-height: 100vh; position: relative;
  overflow: hidden;
}
.games-bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center;
  filter: blur(10px); transform: scale(1.05);
  opacity: 0; visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  z-index: 0;
}
.games-bg-layer.active { opacity: 1; visibility: visible; z-index: 0; }
.games::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; }

.games h1 { position: relative; z-index: 2; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); font-size: 3rem; font-weight: bold; text-align: center; margin-bottom: 40px; }
.game-showcase { max-width: 1200px; margin: 0 auto; padding: 40px 0; position: relative; z-index: 2; width: 100%; }

.game-banner { position: relative; width: 100%; height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; }
.game-banner:hover { transform: translateY(-10px); }

.slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; z-index: 0; }
.slide.active { opacity: 1; visibility: visible; z-index: 1; }

.main-game-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; transform: scale(1); }
.game-banner:hover .main-game-image { transform: scale(1.05); }

.game-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.6) 100%); display: flex; align-items: flex-end; padding: 40px; }
.game-info { color: white; max-width: 500px; }
.game-description { font-size: 3rem; font-weight: bold; margin: 0 0 30px 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); color: #ffffff; }

.play-button { position: relative; background-color: #2a2a2a; color: #ffffff; border: 2px solid #E47536; padding: 15px 40px; font-size: 1.1rem; font-weight: bold; border-radius: 50px; cursor: pointer; transition: background-size 0.6s ease, box-shadow 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 1px; z-index: 10; background-image: linear-gradient(90deg, rgba(53, 179, 210, 1), rgba(53, 179, 210, 1)); background-repeat: no-repeat; background-size: 0% 100%; background-position: left top; }
.play-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); background-size: 100% 100%; }
.play-button:active { transform: translateY(0); }

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6); color: white; border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; z-index: 10; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
.slider-btn:hover { background: rgba(53, 179, 210, 0.9); transform: translateY(-50%) scale(1.1); }
.prev-btn { left: 20px; } .next-btn { right: 20px; }

/* 추가된 슬라이더 Dot 영역 */
.slider-dots { position: absolute; bottom: 20px; left: 0; width: 100%; display: flex; justify-content: center; gap: 8px; z-index: 10; }
.slider-dot { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.slider-dot.active { background: #ffffff; transform: scale(1.3); }
.slider-dot:hover { background: rgba(255, 255, 255, 0.8); }

.progress-bar-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: rgba(255, 255, 255, 0.2); z-index: 10; }
.progress-bar { height: 100%; background: linear-gradient(90deg, rgba(53, 179, 210, 1), rgba(228, 117, 54, 1)); width: 0%; }
.progress-bar.animate { animation: slideProgress 10s linear forwards; }
@keyframes slideProgress { 0% { width: 0%; } 100% { width: 100%; } }

@media (max-width: 768px) { .game-banner { height: 300px; } .game-overlay { padding: 20px; } .game-description { font-size: 2rem; } .play-button { padding: 12px 30px; font-size: 1rem; } .slider-btn { width: 40px; height: 40px; } }
.about { padding: 80px 20px 40px; min-height: 100vh; position: relative; } .about::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: -1; }
.media { padding: 80px 20px 40px; min-height: 100vh; position: relative; } .media::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: -1; }
.community { padding: 80px 20px 40px; min-height: 100vh; position: relative; } .community::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: -1; }

.social-banner { max-width: 1200px; margin: 60px auto 0; padding: 60px 40px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; position: relative; z-index: 1; }
.social-content h2 { font-size: 2.5rem; font-weight: bold; margin: 0 0 20px 0; color: #ffffff; }
.social-content p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 40px 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
.social-icons { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.social-link { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; text-decoration: none; color: white; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); min-width: 120px; }
.social-link:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }
.social-link i { font-size: 2.5rem; transition: all 0.3s ease; }
.social-link span { font-size: 0.9rem; font-weight: 500; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
.social-link:hover i { background: linear-gradient(45deg, rgba(53, 179, 210, 1), rgba(228, 117, 54, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }

@media (max-width: 768px) { .social-banner { padding: 40px 20px; margin: 40px auto 0; } .social-content h2 { font-size: 2rem; } .social-content p { font-size: 1rem; } .social-icons { gap: 20px; } .social-link { padding: 15px; min-width: 100px; } .social-link i { font-size: 2rem; } .social-link span { font-size: 0.8rem; } }
.section h1 { font-size: 3rem; color: white; }

#main-footer { background-color: rgba(0, 0, 0, 0.6); padding: 40px 20px; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 10; margin-bottom: 0; }
.footer-content p { color: rgba(255, 255, 255, 0.7); margin: 5px 0; font-size: 0.95rem; }
.footer-content .copyright { margin-top: 20px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.4); }