/* 로컬 Pretendard 폰트 불러오기 (파일 종류별로 정의) */
@font-face {
    font-family: 'Pretendard-Thin';
    src: url('fonts/Pretendard-Thin.woff2') format('woff2'),
         url('fonts/Pretendard-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-ExtraLight';
    src: url('fonts/Pretendard-ExtraLight.woff2') format('woff2'),
         url('fonts/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-Light';
    src: url('fonts/Pretendard-Light.woff2') format('woff2'),
         url('fonts/Pretendard-Light.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('fonts/Pretendard-Regular.woff2') format('woff2'),
         url('fonts/Pretendard-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-Medium';
    src: url('fonts/Pretendard-Medium.woff2') format('woff2'),
         url('fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-SemiBold';
    src: url('fonts/Pretendard-SemiBold.woff2') format('woff2'),
         url('fonts/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-Bold';
    src: url('fonts/Pretendard-Bold.woff2') format('woff2'),
         url('fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-ExtraBold';
    src: url('fonts/Pretendard-ExtraBold.woff2') format('woff2'),
         url('fonts/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard-Black';
    src: url('fonts/Pretendard-Black.woff2') format('woff2'),
         url('fonts/Pretendard-Black.woff') format('woff');
}

/* 기본 설정 */
html {
    overflow-y: scroll; /* 모든 페이지에 스크롤바를 항상 띄워서, 스크롤바 유무에 따른 페이지 가로 폭 변화(로고 이동 현상) 방지 */
}

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

body {
    font-family: 'Pretendard-Regular', sans-serif;
    color: #333;
    line-height: 1.6;
    text-align: center;
    
    /* 👇 여기부터 복사 방지 코드 추가 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

/* 1. 모든 이미지의 마우스 인식을 아예 꺼버림 (우클릭 절대 불가) */
img {
    max-width: 100%;
    display: block;
    -webkit-user-drag: none; 
    pointer-events: none; /* ⭐️ 마우스가 이미지를 유령처럼 통과하게 만드는 핵심 코드 */
}

/* 2. [주의] 단, 클릭해서 이동해야 하는 로고나 버튼 이미지는 예외로 다시 켜줌 */
a img {
    pointer-events: auto; /* 링크 안의 이미지는 클릭되도록 허용 */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    display: block;
}

/* 헤더 영역 */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 10;
    /* 스크롤 시 위치가 틀어지지 않도록 강제 설정 */
    box-sizing: border-box;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 추가: width 설정 명확화 */
    width: 100%;
    margin: 0 auto;
}

/* 로고 이미지 크기 조정 */
.logo a {
    display: block;
    text-decoration: none;
}

.logo img {
    height: 40px; /* 로고가 너무 크거나 작으면 이 숫자를 수정하세요 */
    width: auto;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav a {
    font-family: 'Pretendard-Thin', sans-serif; /* Thin 폰트를 직접 지정 */
    color: #fff;
    text-decoration: none;
    font-size: 15px; /* 16px, 18px 등 원하시는 크기로 숫자를 바꿔주세요 */
}

/* 섹션 공통 여백 */
section {
    padding: 80px 0;
}

/* 메인 배너 (수정됨: 높이 고정 및 크롭) */
#hero, #about-hero {
    padding: 0;
}

#hero img, #about-hero img {
    width: 100%;
    height: 500px; /* 원하는 세로 길이로 강제 지정 */
    object-fit: cover; /* 비율이 깨지지 않게 꽉 채워서 잘라내기 */
    display: block;
}

/* 회사 소개 */
#about h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* 프로젝트 */
.project-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.project-item {
    flex: 1;
    padding: 20px;
}

/* 1. 프로젝트 로고 공통 설정 (투명 상자 고정) */
.project-item img {
    height: 160px; /* 세로 길이를 고정하면 object-fit: contain에 의해 상하 중앙 정렬이 됩니다 */
    width: 350px;
    max-width: 100%;
    object-fit: contain; 
    margin: 0 auto 20px auto; 
}


.project-item p {
    font-size: 16px; /* 기존 14px에서 16px로 수정 */
    color: #666;
    word-break: keep-all; /* 단어 단위로 줄바꿈되도록 추가 (가독성 향상) */
}

/* 팀 문화 (에이스프로젝트의 일상) (수정됨: 높이 고정 및 크롭) */
#team {
    padding: 80px 0; /* 위아래로 자연스러운 흰색 여백 추가 */
}

.bg-wrap {
    position: relative;
    /* 이미지 위에 어두운 오버레이(반투명 검정 필터)를 깔기 위한 가상 요소 설정 */
}

.bg-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 검은색 배경에 40% 투명도 (숫자 조절 가능) */
    z-index: 1; /* 이미지 위에, 텍스트 아래에 위치하도록 레이어 순서 지정 */
}

.bg-wrap img {
    width: 100%;
    height: 500px; /* 원하는 세로 길이로 강제 지정 */
    object-fit: cover; /* 비율이 깨지지 않게 꽉 채워서 잘라내기 */
    display: block;
}

.bg-wrap .content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    width: 100%;
    z-index: 2; /* 어두운 필터(z-index: 1)보다 텍스트가 위에 올라오도록 설정 */
}

.bg-wrap .content.animate-on-scroll.fade-up {
    transform: translate(-50%, -10%); /* 애니메이션 시작 전: X축 중앙 유지, Y축 약간 아래 */
}

.bg-wrap .content.animate-on-scroll.fade-up.is-visible {
    transform: translate(-50%, -50%); /* 애니메이션 완료 시: 완벽한 정중앙으로 이동 */
}

.bg-wrap h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

/* 블로그 바로가기 버튼 이미지 */
.blog-btn {
    display: inline-block;
    margin-top: 30px; /* 위 텍스트와의 거리 */
    transition: transform 0.3s ease; /* 호버 시 부드러운 움직임 효과 */
}

.blog-btn:hover {
    transform: translateY(-5px); /* 마우스를 올렸을 때 살짝 위로 올라가는 효과 */
}

.blog-btn img {
    height: 58px; /* 로고 이미지 크기 조절 (원하는 대로 수정하세요) */
    width: auto;
    object-fit: contain;
}

/* 채용 */
#recruit {
    background-image: url('images/baseball.jpg');
    background-size: cover; /* 비율이 깨지지 않게 꽉 채워서 잘라내기 */
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 500px; /* 원하는 세로 길이로 강제 지정 */
    margin: 80px 0; /* 위아래로 자연스러운 흰색 여백 추가 */
    padding: 0; /* 기본 섹션 여백을 제거 */
    display: flex;
    align-items: center; /* 내부 텍스트를 수직 중앙으로 정렬 */
}

#recruit .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.recruit-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.recruit-text {
    max-width: 800px;
}

.recruit-text h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.recruit-text p {
    margin-bottom: 30px;
    font-size: 16px;
}

.btn-recruit {
    display: inline-block;
    background-color: #002b5e;
    color: #fff;
    padding: 10px 30px;
    text-decoration: none;
    font-weight: bold;
}

/* 연락처 */
.map-icon img {
    width: 50px;
    margin: 0 auto 20px auto;
}

.contact-info p {
    margin-bottom: 20px;
    font-size: 14px;
}

/* =========================================================================
   연혁 (History) 섹션
========================================================================= */
.history-title {
    font-size: 32px;
    margin-bottom: 50px;
    text-align: center;
}

.history-list {
    max-width: 600px; /* 전체 너비를 1000px에서 600px로 확 줄여서 텍스트들이 오밀조밀하게 모이게 함 */
    margin: 0 auto;
}

.history-item {
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 80px; /* 각 연혁 항목의 높이를 80px로 완전히 고정 (제각각인 높낮이 통일) */
    margin-bottom: 20px; /* 항목 간의 간격도 약간 좁힘 */
}

/* 왼쪽: 연도와 월 (전체의 50% 차지 & 내부 중앙 정렬) */
.history-date {
    flex: 1; /* 왼쪽 공간을 50%로 확장 */
    display: flex;
    justify-content: center; /* 가로 기준 완벽한 중앙 정렬 */
    align-items: baseline;
    gap: 5px;
}

.history-date .year {
    font-family: 'Pretendard-Bold', sans-serif;
    font-size: 22px;
    color: #333;
}

.history-date .month {
    font-family: 'Pretendard-Medium', sans-serif;
    font-size: 16px;
    color: #888;
}

/* 오른쪽: 내용 (전체의 50% 차지 & 내부 텍스트 중앙 정렬) */
.history-desc {
    flex: 1; /* 오른쪽 공간을 50%로 확장 */
    text-align: center; /* 텍스트들을 중앙으로 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px; /* 텍스트가 양옆으로 너무 붙지 않게 여백 추가 */
}

.history-desc p {
    font-family: 'Pretendard-Medium', sans-serif;
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
}

.history-desc p.sub-desc {
    font-family: 'Pretendard-Light', sans-serif;
    font-size: 13px;
    color: #999;
}

/* =========================================================================
   애니메이션 효과 (최신 트렌드: Scroll Reveal)
========================================================================= */
/* 애니메이션 공통 초기 상태 */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 자연스럽고 부드러운 가속도 곡선 */
    will-change: opacity, transform; /* 브라우저 성능 최적화 */
}

/* 1. 아래에서 위로 부드럽게 나타나기 (가장 대중적인 효과) */
.animate-on-scroll.fade-up {
    transform: translateY(30px);
}
.animate-on-scroll.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. 크기가 살짝 커지며 나타나기 (메인 배너용) */
.animate-on-scroll.zoom-in {
    transform: scale(0.95);
}
.animate-on-scroll.zoom-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* 3. 딜레이 (여러 개가 순차적으로 등장할 때 사용) */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* =========================================================================
   ABOUT (회사 소개 / 연혁) 페이지 디자인 추가
========================================================================= */

/* 어바웃 헤더 배경 */
#about-hero {
    position: relative;
    padding: 0;
    /* team 섹션과 동일하게 bg-wrap 클래스를 사용하여 ::after 어두운 필터가 자동 적용됩니다 */
}

#about-hero img {
    width: 100%;
    height: 400px; /* 연혁 페이지 상단 배너 높이 */
    object-fit: cover;
    display: block;
}

/* 연혁 섹션 전체 */
#history {
    padding: 100px 0;
}

.history-title {
    font-family: 'Pretendard-Bold', sans-serif;
    font-size: 32px;
    margin-bottom: 60px;
    color: #000;
}

/* 연혁 리스트 박스 (위아래 굵은 선) */
.history-list {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 0;
}

/* 개별 연혁 항목 (높이 통일 및 수직 중앙 정렬) */
.history-item {
    display: flex;
    align-items: center; /* 텍스트가 위로 붙지 않고 위아래 수직 기준 정중앙에 오도록 수정 */
    min-height: 120px; /* 모든 연혁 항목의 최소 높이를 120px로 넉넉하고 동일하게 고정 */
    padding: 20px 0; /* 좌우 여백 없이 위아래로만 기본 여백 추가 */
    border-bottom: 1px dotted #ddd; /* 항목 간 점선 구분 유지 */
}

.history-item:last-child {
    border-bottom: none; /* 마지막 항목은 점선 제거 */
}

/* 왼쪽: 연도와 월 */
.history-date {
    flex: 1; /* 왼쪽 공간을 50%로 확장 */
    display: flex;
    justify-content: center; /* 내부에서 중앙 정렬 */
    align-items: baseline;
    gap: 5px;
    padding-left: 0; /* 기존에 있던 왼쪽 여백 제거 */
}

/* 연도 고정 (글자가 없어도 항상 같은 자리를 차지하도록 너비 고정) */
.history-date .year {
    font-family: 'Pretendard-Bold', sans-serif;
    font-size: 22px;
    color: #333;
    width: 60px; /* ⭐️ 추가됨: 연도가 비어있어도 60px의 공간을 무조건 차지함 */
    display: inline-block; /* ⭐️ 추가됨: width를 적용하기 위한 필수 설정 */
    text-align: right; /* 숫자 끝선을 일정하게 맞춤 */
}

/* ⭐️ 새로 추가: 같은 연도일 경우 점선을 없애고 위아래 간격을 좁혀 한 그룹처럼 보이게 하는 마법의 클래스 */
.history-item.same-year {
    border-bottom: none;
    min-height: 80px; /* 기본 120px보다 높이를 줄여서 아래 항목과 가깝게 붙임 */
}

.history-date .month {
    font-family: 'Pretendard-Medium', sans-serif;
    font-size: 16px;
    color: #888;
}

/* 오른쪽: 내용 */
.history-desc {
    flex: 1; /* 오른쪽 공간을 50%로 확장 */
    text-align: center; /* 텍스트들을 중앙 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0; /* 기존에 있던 왼쪽 여백 제거 */
    padding: 0 20px; /* 텍스트가 너무 끝에 붙지 않도록 약간의 여백 추가 */
}

.history-desc p {
    font-family: 'Pretendard-Medium', sans-serif;
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
}

.history-desc p.sub-desc {
    font-family: 'Pretendard-Light', sans-serif;
    font-size: 13px;
    color: #999;
}

/* =========================================================================
   NEWS (보도자료) 페이지 디자인
========================================================================= */
#news-hero {
    position: relative;
    padding: 0;
}

#news-hero img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

#news-board {
    padding: 100px 0;
    max-width: 900px; /* 게시판 전체 폭을 깔끔하게 제한 */
    margin: 0 auto;
}

.news-title {
    font-family: 'Pretendard-Bold', sans-serif;
    font-size: 32px;
    margin-bottom: 60px;
    text-align: center;
    color: #000;
}

/* 게시판 목록 */
#news-list {
    list-style: none;
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
}

#news-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

#news-list li:last-child {
    border-bottom: none;
}

#news-list li:hover {
    background-color: #f9f9f9; /* 마우스를 올렸을 때 살짝 강조되는 효과 */
}

/* 왼쪽 제목 섹션 */
.news-item-title {
    flex: 1;
    text-align: left;
    font-size: 16px;
    color: #333;
    cursor: pointer; /* 클릭 가능한 손가락 모양 */
}

.news-item-title:hover {
    text-decoration: underline;
}

/* 오른쪽 날짜 섹션 */
.news-item-date {
    width: 120px;
    text-align: right;
    font-size: 14px;
    color: #888;
}

/* 페이지네이션 (숫자 번호 버튼) */
#pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

#pagination button {
    border: 1px solid #ddd;
    background: #fff;
    padding: 5px 12px;
    cursor: pointer;
    font-family: 'Pretendard-Medium', sans-serif;
}

#pagination button:hover {
    background: #eee;
}

#pagination button.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* =========================================================================
   NEWS 팝업 (모달) 창 디자인
========================================================================= */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 반투명 검정 배경 */
    z-index: 9999; /* 화면 최상단으로 끌어올림 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh; /* 화면 높이의 90%까지만 커지도록 제한 */
    overflow-y: auto; /* 내용이 길면 안에 스크롤 생성 */
    padding: 40px;
    position: relative;
    text-align: left;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #555;
    color: #fff;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
}

.modal-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 30px;
    padding-right: 90px; /* ⭐️ 새로 추가: 닫기 버튼이 들어갈 90px만큼의 안전 공간 확보 */
}

.modal-header h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #000;
}

.modal-header p {
    font-size: 14px;
    color: #888;
    text-align: right;
}

.modal-body img {
    width: 100%;
    margin-bottom: 30px;
}

.modal-body #modal-text {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    white-space: pre-wrap; /* ⭐️ 새로 추가: 작성자가 친 엔터(줄바꿈)를 화면에 그대로 보여주는 마법의 코드 */
}

/* =========================================================================
   PROJECT (프로젝트) 페이지 디자인
========================================================================= */

/* 헤더 띠(메인 배너) 디자인 */
.project-banner {
    padding: 0;
    width: 100%;
    /* team, news 배너와 달리 어두운 필터를 깔지 않고 원본 그대로 둡니다 */
}

.project-banner img {
    width: 100%;
    height: 700px; /* ⭐️ 다른 서브 페이지 헤더와 동일한 세로 길이로 강제 고정 */
    object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채워서 예쁘게 잘라내기 */
    display: block;
}

/* 각 게임의 내용이 들어가는 하얀 여백 구역 */
.project-section {
    /* 1. 배너 이미지와 그 아래 텍스트/스크린샷 사이의 간격 */
    padding-top: 120px; 
    
    /* 2. 게임 설명이 다 끝나고, 다음 게임 배너가 나오기 전까지의 간격 (게임과 게임 사이) */
    padding-bottom: 300px; 
}

.project-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 90px; /* 텍스트와 이미지 사이의 간격 */
}

/* ⭐️ 마법의 클래스: 이 클래스가 붙으면 내용물이 좌우 반전됩니다 */
.project-container.reverse {
    flex-direction: row-reverse;
}

/* 텍스트 섹션 */
.project-text {
    flex: 1; /* 화면의 50%를 차지하게 설정 */
    text-align: left;
}

.project-text h3 {
    font-size: 26px;
    font-family: 'Pretendard-Bold', sans-serif;
    margin-bottom: 20px;
    color: #000;
}

.project-text p {
    font-size: 14px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 15px;
    word-break: keep-all; /* 단어가 중간에 잘리지 않도록 보호 */
}

/* =========================================================================
   자동 스크롤 이미지 슬라이더 & 가장자리 디졸브(페더) 효과
========================================================================= */
.project-slider {
    flex: 1.2; 
    overflow: hidden; 
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.slider-track {
    display: flex;
    width: max-content; /* ⭐️ 수정됨: 기존 200% 대신, 이미지가 몇 장이든 그 전체 길이에 맞춰 레일이 무한히 늘어나게 합니다 */
    animation: auto-scroll 25s linear infinite;
}

.slider-group {
    display: flex;
    /* ⭐️ 수정됨: 기존에 있던 width: 50%; 코드를 삭제하여 억지로 크기를 반으로 나누지 않게 합니다 */
    gap: 20px; 
    padding-right: 20px; 
}

.slider-group img {
    width: 550px; 
    height: auto;
    object-fit: cover;
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    flex-shrink: 0; /* ⭐️ 핵심 추가 코드: 화면이나 레일이 좁아도 절대 이미지를 찌그러뜨리거나 겹치게 하지 말라는 강제 방어막 */
}

/* 멈춤 없는 무한 스크롤 애니메이션 키프레임 */
@keyframes auto-scroll {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(-50%); 
    }
}

/* 멈춤 없는 무한 스크롤 애니메이션 키프레임 */
@keyframes auto-scroll {
    0% {
        transform: translateX(0); /* 시작 위치 */
    }
    100% {
        transform: translateX(-50%); /* 정확히 복사본이 시작되는 위치로 이동 후 다시 0으로 순간이동 */
    }
}

/* 마우스를 올리면 스크롤이 잠깐 멈추는 편의 기능 (선택사항) */
.project-slider:hover .slider-track {
    animation-play-state: paused;
}

/* 1번(cpm), 3번(9up) 게임 배너만 아래쪽을 기준으로 크롭하기 */
img[src*="cpm-bg.jpg"], 
img[src*="9up-bg.png"] {
    object-position: top;
}

/* 게임 다운로드/바로가기 버튼 구역 */
.game-links {
    display: flex;
    flex-direction: row; /* ⭐️ 무조건 가로(1줄)로 나란히 배치되도록 강제 설정 */
    align-items: center; /* 아이콘들의 높낮이 중앙 정렬 */
    gap: 12px; /* 아이콘 사이 간격 */
    margin-top: 30px; 
}

.game-links a {
    display: block; /* a 태그의 기본 여백 간섭 차단 */
    transition: transform 0.2s ease;
}

.game-links a:hover {
    transform: translateY(-3px);
}

.game-links img {
    height: 45px; /* ⭐️ 기존 40px에서 28px로 아담하게 축소 (숫자를 조절해보세요!) */
    width: auto;
    object-fit: contain;
}