/*
  카테고리 가운데 정렬 (썸네일 아래)
  - 포스트 목록에서 썸네일 아래에 위치한 카테고리를 가운데로 정렬합니다.
*/
.loop-entry.type-post .entry-taxonomies {
  text-align: center;
}

/*
  모바일 화면에서 본문 전체 너비 사용
  - 모바일(최대 767px)에서 본문 내용의 좌우 여백을 제거하여 화면 전체 폭을 사용하도록 설정합니다.
*/
@media (max-width: 767px) {
  .entry-content-wrap {
    padding: 1rem;
  }
}

/*
  페이지 목차 가운데 정렬
  - 페이지 목차 및 목차 링크의 정렬을 가운데로 설정합니다.
*/
.nav-links {
  text-align: center;
}

/*
  그리드 레이아웃의 간격
  - 그리드 형태로 표시되는 요소들의 가로(column) 및 세로(row) 간격을 조정합니다.
*/
.grid-cols {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

/*
  페이지네이션 숫자 간격
  - 목록 아래에 있는 페이지 번호들 간의 간격을 좁게 만듭니다.
*/
.pagination .page-numbers {
  margin-right: -0.1em;
}

/*
  모바일 메뉴 배경색
  - 모바일에서 햄버거 메뉴를 클릭했을 때 나타나는 메뉴의 배경색을 지정합니다.
*/
.popup-drawer .drawer-inner {
  background: #F8F9FA;
}

/*
  '선물상자' 관련 글 제목 가운데 정렬
  - 관련 포스트 섹션의 제목을 가운데로 정렬합니다.
*/
h2.entry-related-title {
  text-align: center;
}

/*
  모바일 메뉴 닫기(X) 버튼 색상
  - 모바일 메뉴의 닫기 버튼 색상을 핑크색으로 변경합니다.
*/
.popup-drawer .drawer-header .drawer-toggle {
  color: #F2618E;
}

/*
  모바일 메뉴/검색 텍스트 위치
  - 모바일/태블릿에서 메뉴와 검색 아이콘 옆의 텍스트를 로고와 높이를 맞춥니다.
*/
.menu-toggle-open .menu-toggle-label {
  margin-top: 4px;
}
.search-toggle-open .search-toggle-label {
  margin-top: 4px;
}

/*
  악보 모음 카테고리 배지 스타일
  - 악보 모음에서 사용되는 특별한 카테고리 배지의 스타일을 정의합니다.
*/
.upl-code-badge {
  display: inline-block;
  background-color: #ffe6ee;
  color: #d6336c;
  box-shadow: inset 0 0 0 1px #f9c6d6;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.6em;
  margin-left: 0.5em;
  font-weight: 500;
}

/*
  버튼 가운데 정렬
  - 모든 버튼 유형(일반 버튼, 워드프레스 블록 버튼 등)을 자동으로 가운데 정렬합니다.
*/
button,
.button,
.wp-block-button__link,
.wp-element-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  display: inline-flex;        /* 텍스트 길이에 맞춤 + flex */
  justify-content: center;     /* 텍스트를 가운데 정렬 */
  align-items: center;         /* 수직 가운데 정렬 */
  margin: 0.4em auto;          /* 위아래 간격 + 가운데 배치 */
  padding: 0.6em 1.2em;        /* 버튼 안쪽 여백 (줄간격 느낌) */
  text-align: center;
}

/*
  썸네일 모서리 둥글게
  - 포스트 썸네일 이미지를 둥근 모양으로 만듭니다.
*/
.entry .entry-thumb img,
.entry .post-thumbnail img {
  border-radius: 20px;
}

/*
  포스트 아래 태그 가운데 정렬
  - 개별 포스트 하단에 있는 태그들을 가운데로 정렬합니다.
*/
.entry-tags .tags-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/*
  포스트 아래 태그 색상 변경
  - 포스트 아래 태그의 기본 색상과 마우스를 올렸을 때(hover)의 색상을 변경합니다.
*/
.entry-tags a.tag-link {
  margin-right: 0.5em;
  padding: 0;
  margin-top: 0;
  font-size: 150%;
  font-weight: bold;
  border: 0;
  border-radius: 0;
  color: #f2618e;
  text-decoration: none;
  transition: color 0.2s;
}
.entry-tags a.tag-link:hover {
  color: #4DAFA3;
  background-color: transparent !important;
}

/*
  위젯 영역 태그/링크 색상 변경
  - 위젯 영역에 있는 태그나 링크의 색상을 변경하고, 호버 시 효과를 추가합니다.
*/
.widget-area a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)) {
  color: #f2618e;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}
.widget-area a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)):hover {
  color: #4DAFA3;
  text-decoration: none;
  background-color: transparent !important;
}

/*
  게시물 하단 슬라이더 '점' 색상 변경
  - 슬라이드 갤러리 아래에 있는 페이지네이션 '점'의 색상을 변경합니다.
  - 활성화된 점은 #ff709c, 비활성화된 점은 #f2618e로 설정됩니다.
*/
.splide .splide__pagination__page.is-active {
  background: #ff709c;
  opacity: 0.75;
}
.splide .splide__pagination__page {
  background: #f2618e;
}

/*
  포스트 상단 카테고리 버튼 스타일
  - 카테고리 버튼의 기본 색상, 폰트 스타일, 밑줄 제거, 호버 시 부드러운 전환 효과를 정의합니다.
*/
.post-categories a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)) {
  color: #f2618e;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}

/*
  포스트 상단 카테고리 버튼 레이아웃
  - 버튼들을 가운데 정렬하고, 버튼 간의 간격을 설정합니다.
*/
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 0;
}

/*
  카테고리 버튼 스타일
  - 버튼의 배경색, 글자색, 테두리, 둥근 정도, 크기 등을 정의합니다.
*/
.post-category-button {
  display: inline-block;
  padding: 5px 10px;
  background-color: #ff92af;
  color: #ffffff !important;
  font-size: 0.85em;
  border: none;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
}

/*
  카테고리 버튼 호버 효과
  - 마우스를 올렸을 때 배경색을 민트색으로 변경하고, 살짝 위로 올라가는 효과를 추가합니다.
*/
.post-category-button:hover {
  background-color: #4DAFA3;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/*
  모바일에서 카테고리 버튼 여백
  - 모바일 화면에서 카테고리 버튼 위아래 여백을 조정합니다.
*/
@media (max-width: 767px) {
  .post-categories {
    margin-top: 12px;
    margin-bottom: 5px;
  }
}

/*
  특정 카테고리(ID 150) 버튼 색상 변경
  - 카테고리 ID가 150인 경우에만 버튼의 기본 색상과 호버 색상을 다르게 적용합니다.
*/
body.category-150-present .post-category-button {
  background-color: #70c9be;
}
body.category-150-present .post-category-button:hover {
  background-color: #f2618e;
}



/*
  버튼 모서리 둥글게
  - 워드프레스 블록 버튼의 모서리를 둥글게 만듭니다.
*/
.wp-block-button__link {
  border-radius: 50px;
		font-weight: bold;
}

/* 카테고리 150 페이지에서 모든 버튼 색상 변경 */
body.category-150-present .button,
body.category-150-present .wp-block-button__link,

body.category-150-present input[type="button"],
body.category-150-present input[type="submit"],
body.category-150-present .btn {
  background-color: #4DAFA3;
  border-color: #4DAFA3;
  color: #fff;
	font-weight: bold;
}

body.category-150-present .button:hover,
body.category-150-present .wp-block-button__link:hover,

body.category-150-present input[type="button"]:hover,
body.category-150-present input[type="submit"]:hover,
body.category-150-present .btn:hover {
  background-color: #f2618e;
  border-color: #f2618e;
  color: #fff;
	font-weight: bold;
}

/* 카테고리 150에서 태그 글자색 민트색 */
body.category-150-present .tags-links a,
body.category-150-present .post-tags a,
body.category-150-present .tag-cloud-link {
  color: #4DAFA3 !important;
  transition: color 0.3s ease; /* 부드럽게 색상 전환 */
}

/* 호버 시 핑크색 */
body.category-150-present .tags-links a:hover,
body.category-150-present .post-tags a:hover,
body.category-150-present .tag-cloud-link:hover {
  color: #f2618e !important;
}

/* 모바일에서 버튼 텍스트 크기 줄이기 */
@media (max-width: 767px) {
  button,
  .button,
  .wp-block-button__link,
  .wp-element-button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    font-size: 0.85em; /* 필요에 따라 0.8em ~ 0.9em 조정 */
  }
}