/* =====================================================
   기본 설정
===================================================== */

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f5f6f8;
}

/* =====================================================
   공통 폰트 (헤더/메뉴/로그인)
===================================================== */

.navbar,
.navbar .main-menu > li > a,
.navbar .submenu li a,
.auth-area a,
.user-menu .nickname {
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* =========================
   헤더 / 유저 메뉴 공통 폰트
========================= */

.auth-area a,
.user-menu .nickname,
.auth-area span {  /* 로그인 전 / 사이 구분 '/' */
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 17px;       /* 동일하게 */
    line-height: 1;        /* 높이 통일 */
}

/* =====================================================
   메인 인트로
===================================================== */

.intro-box {
    max-width: 1200px;
    margin: 50px auto 80px auto;
    padding: 70px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.intro-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
}

.intro-text {
    flex: 1;
    font-size: 18px;
    line-height: 1.9;
    color: #222;
}

.intro-text h2 {
    font-size: 38px;
    margin-top: 0;
    margin-bottom: 20px;
}

.intro-text p {
    margin-bottom: 30px;
}

.intro-text a {
    text-decoration: none;
    font-weight: bold;
    color: #4CAF50;
}

.intro-text a:hover {
    text-decoration: underline;
}

.intro-image {
    flex: 1;
    text-align: right;
}

.intro-image img {
    max-width: 100%;
    height: auto;
}
/* =====================================================
   폼 (로그인 / 회원가입) - 입력창과 버튼 높이/비율 통일
===================================================== */

.form-area {
    max-width: 420px;
    width: 90%;
    margin: 60px auto;
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.form-area h3 {
    text-align: center;
    margin-bottom: 30px;
}

/* 입력창 */
.form-area input {
    width: 100%;
    padding: 14px 14px;        /* 세로+가로 패딩 동일 */
    margin: 12px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 16px;            /* 버튼과 동일 */
    box-sizing: border-box;      /* padding 포함 폭 계산 */
}

/* 버튼 */
.form-area button {
    width: 100%;
    padding: 14px;              /* 입력창과 동일 */
    margin: 12px 0 0 0;         /* 위쪽 마진만 */
    border: none;
    background: #7DBA45;
    color: white;
    font-size: 16px;            /* 입력창과 동일 */
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
}

/* 버튼 hover */
.form-area button:hover {
    background: #6aa63b;
}

/* =====================================================
   게시판 카드 (공지 / 이벤트 공통)
===================================================== */

.board-card {
    max-width: 900px;
    margin: 30px auto;
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

/* 카드 내부 이미지 자동 조절 */

.board-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
}

/* =====================================================
   도감
===================================================== */

.codex-grid {
    max-width: 1100px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.codex-card {
    background: white;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transition: 0.2s;
}

.codex-card:hover {
    transform: translateY(-5px);
}

.undiscovered {
    opacity: 0.6;
    background: #f1f1f1;
}

/* =====================================================
   캘린더
===================================================== */

.fc-daygrid-day-frame {
    position: relative;
}

.stamp-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    pointer-events: none;
    opacity: 0.9;
}

/* =====================================================
   관리자 페이지
===================================================== */

.editor-card {
    background:white;
    padding:30px;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    margin-bottom:40px;
}

.editor-card h2 {
    margin-top:0;
}

.editor-input {
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ccc;
    border-radius:10px;
    font-size:15px;
    box-sizing:border-box;
}

.editor-btn {
    padding:12px 24px;
    background:#4CAF50;
    color:white;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    margin-top:10px;
}

.editor-btn:hover {
    background:#43a047;
}

.event-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.end-btn {
    background:#e74c3c;
    color:white;
    border:none;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
}

.end-btn:hover {
    background:#c0392b;
}

.event-info {
    flex:1;
}

#calendar {
    margin-top:30px;
    min-height:650px;
}

/* ================= 관리자 ================= */

.admin-title{
text-align:center;
margin:40px 0;
}

.admin-container{
max-width:1000px;
margin:auto;
background:white;
padding:40px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

/* ================= 관리자 ================= */

.admin-grid{
max-width:1000px;
margin:40px auto;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
}

.admin-card{
display:block;
background:white;
padding:30px;
border-radius:14px;
text-align:center;
font-weight:600;
text-decoration:none;
color:#333;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:0.2s;
}

.admin-card:hover{
transform:translateY(-4px);
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.post-content img{
max-width:100%;
height:auto;
border-radius:8px;
margin:10px 0;
}

.board-search{
max-width:900px;
margin:30px auto;
display:flex;
gap:10px;
}

.board-search input{
flex:1;
padding:10px;
border:1px solid #ccc;
border-radius:8px;
}

.board-search button{
padding:10px 20px;
background:#7DBA45;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

.pagination{
text-align:center;
margin:30px;
}

.pagination button{
margin:5px;
padding:8px 14px;
border:none;
border-radius:6px;
background:#eee;
cursor:pointer;
}

.pagination button.active{
background:#7DBA45;
color:white;
}

.layout{
display:flex;
max-width:1400px;
margin:40px auto;
gap:40px;
}

.main-content{
flex:1;
}

/* =====================================================
    사이드바
===================================================== */

.notice-sidebar {
  width: 260px;
  background: white;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  height: fit-content;
}

.notice-sidebar h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.notice-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.notice-sidebar li {
  margin-bottom: 8px;
}

.notice-sidebar a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.notice-sidebar a:hover {
  color: #4CAF50;
}

/* 사이드바 검색 입력 */
.sidebar-search input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* 최근 글 목록 */
#recentPosts {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

#recentPosts li {
  margin: 6px 0;
}

#recentPosts a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

#recentPosts a:hover {
  color: #4CAF50;
}

/* 더보기 링크 */
.more-notice {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
  color: #4CAF50;
}

/* =====================================================
   공지 / 카드 컨텐츠
===================================================== */

.content-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.card {
  width: 100%;
  max-width: 900px;
  background: #fff;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

#noticeTable {
  width: 100%;
  table-layout: fixed; /* 셀 너비 균일 */
}

#noticeTable td,
#noticeTable th {
  word-wrap: break-word; /* 내용 넘치면 줄바꿈 */
}

/* 공지 에디터 */
#editor,
#editEditor {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ================= 출석 버튼 ================= */

.attendance-buttons{
margin-top:25px;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.attendance-buttons button{

padding:10px 18px;
border-radius:8px;
border:1px solid #ddd;
background:#f8f9fb;

font-size:14px;
font-weight:500;

cursor:pointer;
transition:0.15s;

}

.attendance-buttons button:hover{
background:#eeeeee;
}

/* 출석 버튼만 강조 */

.attendance-check{

background:#7DBA45;
color:white;
border:none;

}

.attendance-check:hover{
background:#6aa63b;
}

/* =====================================================
   헤더 영역
===================================================== */

@keyframes spaceMove {
  0% { background-position: 0 0; }
  100% { background-position: 500px 0; }
}

/* 배경에 적용 */
.header-section {
  background-image: url('/images/space-tile.png');
  background-repeat: repeat;
  background-size: 500px auto;
  image-rendering: pixelated;

  animation: spaceMove 30s linear infinite; /* ← keyframes 적용 */
}

.header-section{
background-image:url('/images/space-tile.png');
background-repeat:repeat;
background-size:500px auto;
image-rendering:pixelated;

text-align:center;
padding:25px 0;
position:relative;
}

.header-section::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,20,0.15);
z-index:1;
}

.title-image{
width:350px;
height:auto;
display:block;
margin:5px auto;
position:relative;
z-index:2;
}


/* =====================================================
   네비게이션 바
===================================================== */

.navbar{
background:#7DBA45;
width:100%;
}

.nav-container{
max-width:1400px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;
}


/* =====================================================
   메인 메뉴
===================================================== */

.main-menu{
list-style:none;
display:flex;
margin:0;
padding:0;
}

.main-menu li{
position:relative;
}

.main-menu > li > a{

display:block;
padding:18px 22px;

color:white;
text-decoration:none;

font-size:17px;
}

.main-menu > li > a:hover{
background:#6aa63b;
}


/* =====================================================
   드롭다운 메뉴
===================================================== */

.submenu{

display:none;

position:absolute;
top:100%;
left:0;

background:white;

list-style:none;
padding:10px 0;
margin:0;

min-width:170px;

border-radius:10px;

box-shadow:0 10px 25px rgba(0,0,0,0.12);

z-index:200;
}

.submenu li{
display:block;
}

.submenu li a{

display:block;

padding:10px 20px;

text-decoration:none;
color:#333;

font-size:15px;

white-space:nowrap;
}

.submenu li a:hover{
background:#f2f2f2;
}


/* 드롭다운 표시 */

.dropdown:hover .submenu{
display:block;
}


/* =====================================================
   유저 메뉴
===================================================== */

.auth-area{

list-style:none;

display:flex;
align-items:center;

margin:0;
padding:0;
}

.auth-area li{
position:relative;
}

.auth-area a{
color:white;
text-decoration:none;
padding:18px 18px;
display:block;
}

.auth-area a:hover{
opacity:0.85;
}


/* 유저 드롭다운 위치 */

.auth-area .submenu{

left:auto;
right:0;
}


/* =====================================================
   서버 상태 바
===================================================== */

.server-bar{

height:36px;

background:#f5f5f5;

font-size:14px;

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

position:relative;
}

#serverLog{

position:absolute;
left:50%;

transform:translateX(-50%);

color:#444;
white-space:nowrap;
}

#serverClock{

position:absolute;
right:20px;

color:#666;
white-space:nowrap;
}

.submenu .divider{
height:1px;
background:#e5e5e5;
margin:6px 0;
}