/* ver 2.4 2024_0409 수정본 */

/* 폰트 선언 */
@font-face {
  font-family: 'TTHakgyoansimMonggeulmonggeulR';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimMonggeulmonggeulR.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'WagleWagle';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2301-wagle@1.0/WagleWagle.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Ownglyph_meetme-Rg';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_1@1.0/Ownglyph_meetme-Rg.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* 모든 태그에 적용 */
* {
  font-family: TTHakgyoansimMonggeulmonggeulR, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 레이아웃 깨짐 방지 */
  color: rgb(0, 0, 0);
}

body {
  font-size: 16px;
  background-color: #fff;
  /* 하단 바 높이만큼 바닥 여백 확보 */
  padding-bottom: 70px; 
}

/* ================= 상단 고정 메뉴 (Top & Main Navigation) ================= */

.container_top {
  width: 98%;
  margin: 0 auto;
}

/* 1단 상단바 */
.top_navigation {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 중앙 정렬 */
  width: 98%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.95); /* 살짝 투명하게 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-shadow: 0 4px 3px rgb(128, 255, 255, 0.3), 0 6px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  z-index: 10000 !important; /* 최상위 우선순위 */
}

/* 2단 메인바 */
.main_navigation {
  position: fixed;
  top: 60px; /* 1단바 바로 아래 */
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
  box-shadow: 0 2px 6px rgb(128, 255, 255, 0.2);
  border: 1px solid #eee;
  z-index: 9999 !important; /* 1단보다는 낮지만 본문보다는 높음 */
}

/* 상단바 링크 스타일 */
.top_navigation a, .main_navigation a {
  text-align: center;
  text-decoration: none;
  color: #555;
  transition: color 0.2s;
}

.top_navigation a span, .main_navigation a span {
  display: block;
  font-size: 14px;
}

.top_navigation a:hover, .main_navigation a:hover {
  color: rgb(128, 255, 255);
}

/* ================= 본문 컨테이너 (Content Area) ================= */

.container_main {
  width: 98%;
  margin: 0 auto;
  /* 중요: 상단바 2단 높이(120px)만큼 내려서 시작 */
  padding-top: 130px; 
}

.content {
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1; /* 상단바보다 낮은 수치 */
}

/* ================= 하단 고정 메뉴 (Bottom Navigation) ================= */

.navigation {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 98%;
  height: 65px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px 0;
  box-shadow: 0px -2px 10px rgb(128, 255, 255, 0.3);
  border: 1px solid #eee;
  z-index: 10000 !important;
}

.navigation a {
  text-decoration: none;
  text-align: center;
}

.navigation a span {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* ================= 아이콘 및 기타 요소 ================= */

.top_icon { width: 35px; }
.main_icon { width: 30px; }
.bottom_icon { width: 28px; }
.search_emoticon { width: 35px; }

.search_nav {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* 등록 버튼 스타일 */
.registration-button {
  background-color: #fff;
  border: 1px solid #ffb6c1;
  padding: 5px 12px;
  font-size: 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.registration-button:hover {
  background-color: #fff0f2;
  border-color: #ff8e99;
}

/* ================= 유틸리티 클래스 ================= */

.title_line {
  text-align: left;
  border-bottom: solid 2px #ff8e99;
  width: 100%;
  margin: 20px 0;
  padding-bottom: 10px;
  font-size: 22px;
  color: #333;
}

.aside_right {
  float: right;
  display: flex;
  gap: 10px;
}

/* 링크 기본 상태 정리 */
a:link, a:visited { text-decoration: none; color: #555; }
a:hover { color: #ff8e99; text-decoration: none; }