body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
}

div {
  margin: 0px;
  padding: 0px;
}

table {
  border-spacing: 0;
  margin: 0;
}

table td {
  padding: 0;
  margin: 0;
}

input[type="text"], input[type="button"], select {
  font-size: 14px;
  margin: 0;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
}

a {
  text-decoration: none;           /* 밑줄 제거 */
  color: #0366d6;                  /* 기본 색 */
  transition: color 0.2s ease;     /* 부드러운 전환 */
}

a:hover,
a:focus-visible {
  color: #ff5722;                  /* 마우스 올렸을 때 색상 */
  outline: none;                   /* 기본 포커스 테두리 제거 */
}

.subtitle {
  font-weight: bold;
}

.titlenumber1 {
  font-weight: bold;
  color: red;
}

.titlenumber2 {
  font-weight: bold;
  color: green;
}

/* 버튼 그룹 전체 */
.btns {
  width: 1091px;
  margin: 10px auto 0px auto;
  display: flex;
  justify-content: space-between; /* 좌/우 정렬 */
  align-items: center;
  font-size: 14px;
}

/* 왼쪽 / 오른쪽 그룹 */
.btns .leftBtns,
.btns .rightBtns {
  display: flex;
  gap: 10px;
}

/* 공통 버튼 스타일 */
.btns a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #d0d7de;
  background-color: #f9fafb;
  color: #0366d6;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* 호버 효과 */
.btns a:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

.settings {
  width: 1091px;
  border: 0px solid black;
  padding: 0px;
  margin: 50px 0px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings label {
  font-size: 14px;
  color: #374151;
}

.settings button {
  height: 34px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: #457cf1;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.settings button:hover {
  background: #2563eb;
}

.settings button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#headerBlock {
  width: 1091px;
}

/* 메뉴 컨테이너 */
#headerBlock > div.mainMenu {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 12px; /* 메뉴 간격 */
}

/* 메뉴 링크 공통 스타일 */
#headerBlock > div.mainMenu a {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #d0e3ff;
  background-color: #f0f4ff; /* 기본 배경 */
  color: #0366d6;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 호버 효과 */
#headerBlock > div.mainMenu a.insite:hover,
#headerBlock > div.mainMenu a.insite:focus-visible {
  background-color: #0366d6;
  color: #fff;
}

#headerBlock > div.mainMenu a.outsite:hover,
#headerBlock > div.mainMenu a.outsite:focus-visible {
  background-color: #00A862;
  color: #fff;
}

/* 현재 메뉴(active) 강조 */
#headerBlock > div.mainMenu a.active {
  background-color: #0366d6; /* 호버와 동일 배경 */
  color: #fff;               /* 호버와 동일 글자색 */
  cursor: default;           /* 호버와 달리 클릭 강조 X */
}

/* 로그인 사용자 강조 */
#headerBlock > div.mainMenu a.user {
  font-weight: bold;
  background-color: #ffe9e0;
  color: #ff5722;
}

#headerBlock > div.mainMenu a.user:hover {
  background-color: #ff5722;
  color: #fff;
}

/* 로그아웃 버튼 */
#headerBlock > div.mainMenu a.logout {
  background-color: #f5f5f5;
  color: #555;
}

#headerBlock > div.mainMenu a.logout:hover {
  background-color: #ff5722;
  color: #fff;
}

#footerBlock {
  padding: 50px 20px 30px;
  text-align: center;
  color: #4b5563;                      /* 차분한 회색 */
}

#footerBlock .footerNotice {
  margin: 0 auto;
  opacity: 0.9;
}

#footerBlock .footerNotice b {
  color: #1f2937;                        /* 강조 글씨 */
}

#counterBox {
  background-color: transparent;        /* 흰 글씨 유지 */
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.3px;
}

.footerBrand {
  text-align: center;
  margin: 0 0 50px 0;
  font-weight: 600;
  color: #1f2937;                        /* 진한 회색으로 브랜드 강조 */
}

.footerBrand a {
  color: #2563eb;                        /* 링크 포인트 블루 */
  text-decoration: none;
  transition: color 0.2s ease;
}

.footerBrand a:hover {
  color: #3b82f6;
}

/* 상단 메뉴 전체 */
.topMenu {
  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: space-between;
  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  color: #444;
  /* border-bottom: 1px solid #eee; */
  padding: 10px 0;
}

/* 로고 텍스트 */
.logoText .logoLink {
  font-weight: 700;
  font-size: 18px;
  color: #222;
  text-decoration: none;
  letter-spacing: -0.3px;
}

.logoText .logoLink:hover {
  color: #007bff;
}

/* 메뉴 링크 */
.menuLinks a {
  color: #444;
  text-decoration: none;
  margin: 0 6px;
}

.menuLinks a:hover {
  color: #007bff;
}

/* 구분선 */
.menuLinks .divider {
  color: #ccc;
  margin: 0 4px;
  vertical-align: middle;
}
.menuLinks .divider {
  display: inline-flex;
  align-items: center;   /* 세로 중앙 정렬 */
  justify-content: center;
  height: 1em;           /* 글자 높이에 맞춤 */
  color: #ccc;
  margin: 0 4px;
  font-size: 15px;       /* 메뉴 글씨 크기와 동일하게 */
  vertical-align: middle;
}

/* 메인 메뉴 */
.mainMenu {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
  /* border-bottom: 1px solid #f0f0f0; */
  padding-bottom: 10px;
}

.mainMenu a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 6px 10px;
}

.mainMenu a.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

/* 세로 구분선 */
.mainMenu .divider {
  width: 1px;
  height: 20px;              /* 메뉴 높이에 맞게 조정 */
  background-color: #ccc;
  margin: 10px 6px 0px 6px;             /* 좌우 여백 */
  display: inline-block;
}

/* 외부 링크 - 네이버 카페 스타일 */
.mainMenu a.external-link {
  color: #00A862; /* 네이버 그린 */
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 14px;
  background-color: #e9f9ee; /* 기본 밝은 연두 */
  border: 1px solid #b9eac8;
  transition: all 0.25s ease;
}