/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =============================================
   CSS 변수 (메탈릭 톤)
   ============================================= */
:root {
 --metallic-bg: #f8fafc; /* 앱처럼 깔끔한 옅은 연회색 바탕 */
 --metallic-card: #ffffff; /* 아티클 흰색 박스 */
 --metallic-sidebar: #f3f4f6;
 --metallic-accent: #2563eb; /* 상호작용 피드백을 위한 블루 톤 */
 --metallic-rule: #e2e8f0;
 --metallic-text: #1f2937;
 --metallic-text-soft: #64748b;

 /* Blocksy 팔레트 오버라이드 */
 --theme-palette-color-1: #1f2937;
 --theme-palette-color-2: #111827;
 --theme-palette-color-5: #ffffff;
 --theme-palette-color-6: #f8fafc;
 --theme-palette-color-7: #e2e8f0;
 --theme-palette-color-8: #ffffff;
 --color-background: #f8fafc; /* 바탕색 동기화 */
 --color-text: #1f2937;
}

/* =============================================
     전체 배경
     ============================================= */
body,
html {
 background-color: var(--metallic-bg) !important;
}

/* =============================================
     헤더 (Glassmorphism 투명 헤더)
     ============================================= */
.site-header,
#site-header,
.ct-header,
[data-id="header"] {
 width: 100% !important;
 max-width: 100% !important;
 /* 배경을 살짝 더 하얗게 올려 바디(연회색)와 대비감을 줍니다 */
 background: rgba(255, 255, 255, 0.92) !important;
 backdrop-filter: blur(12px) saturate(180%) !important;
 -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
 /* 하단 경계선과 함께 부드러운 그림자를 추가해 공중에 뜬 듯한 입체감을 줍니다 */
 border-bottom: 1px solid var(--metallic-rule) !important;
 box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
 position: sticky !important;
 top: 0 !important;
 z-index: 999 !important;
 transition: all 0.3s ease !important;
}

/* 헤더 내부 컨테이너 설정 (빈 행에 불필요한 공백이 생기는 현상 수정) */
.ct-header-inner,
.site-header .ct-container,
.ct-header .ct-container,
[data-id="header"] .ct-container {
 max-width: 100% !important; /* 헤더가 좁은 박스형으로 갇히는 현상 제거 */
 width: 100% !important;
 height: 100% !important;
 min-height: 0 !important; /* 모든 빈 영역 강제 높이 해제 */
 padding-left: 24px !important; /* 좌우 대칭 여백 */
 padding-right: 24px !important;
 box-sizing: border-box !important;
}

/* 로고/메뉴가 실제 들어있는 메인 행(Row)만 슬림하게 64px로 적용 */
.site-header [data-row*="middle"],
.ct-header [data-row*="middle"],
#site-header [data-row*="middle"] {
 /* 모바일 메뉴 오작동을 유발하는 글로벌 셀렉터 삭제됨 */
 height: 100% !important;
 min-height: 64px !important;
 /* 모바일 토글을 부수던 flex 속성 제거됨 */
}

/* 빈 상/하단 행 숨김 처리 (불필요한 흰색 공백 제거) */
.site-header [data-row*="top"]:empty,
.site-header [data-row*="bottom"]:empty,
.ct-header-bottom:empty,
.ct-topbar:empty {
 display: none !important;
}

/* =============================================
     로고 및 타이틀 영역 — 노션 스타일 (원형 아바타 + 클린 텍스트)
     ============================================= */
.ct-site-title-container,
.site-branding,
[data-id="logo"] {
 display: flex !important;
 align-items: center !important;
 height: 64px !important;
 padding: 0 !important;
 gap: 0 !important;
 flex-shrink: 0 !important;
}

/* 로고 이미지: 원형 아바타 (노션 워크스페이스 아이콘 느낌) */
.ct-site-title-container::before,
.site-branding::before,
[data-id="logo"]::before {
 content: "" !important;
 display: block !important;
 width: 60px !important;
 height: 60px !important;
 background-image: url("https://hseteam.kr/wp/wp-content/uploads/2026/02/Gemini_Generated_Image_7xa0eq7xa0eq7xa0-scaled.png") !important;
 background-size: cover !important;
 background-repeat: no-repeat !important;
 background-position: center !important;
 flex-shrink: 0 !important;
 margin-right: 10px !important;
 border-radius: 8px !important; /* 노션의 워크스페이스 아이콘: 살짝 둥근 사각형 */
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; /* 미세한 테두리 느낌 그림자 */
}

/* 사이트 타이틀: 노션의 깔끔한 산세리프 볼드 */
.site-title,
.ct-site-title,
[data-id="logo"] .ct-site-title {
 font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
  sans-serif !important;
 font-size: 17px !important;
 font-weight: 700 !important;
 color: #0f172a !important; /* 거의 검정에 가까운 진한 색 */
 white-space: nowrap !important;
 line-height: 1.3 !important;
 letter-spacing: -0.02em !important; /* 노션의 타이트한 글자 간격 */
}

/* 타이틀 링크: 밑줄 제거 + 호버 시 부드러운 색상 변화 */
.site-title a,
.ct-site-title a,
[data-id="logo"] .ct-site-title a {
 color: inherit !important;
 text-decoration: none !important;
 transition: color 0.15s ease !important;
}

.site-title a:hover,
.ct-site-title a:hover,
[data-id="logo"] .ct-site-title a:hover {
 color: #2563eb !important; /* 호버 시 블루 포인트 */
}

/* =============================================
     메뉴 인터랙션 (Hover 효과)
     ============================================= */
.ct-menu > li > a,
.ct-header .ct-menu a,
#site-header .menu-item a {
 color: #475569 !important;
 font-weight: 500 !important;
 padding: 8px 12px !important; /* 마우스 오버 시 박스를 위한 내부 여백 */
 border-radius: 8px !important;
 transition: all 0.2s ease !important;
}

.ct-menu > li > a:hover,
.ct-header .ct-menu a:hover {
 background-color: #f1f5f9 !important; /* 노션처럼 알약형 회색 배경 등장 */
 color: var(--metallic-accent) !important;
}

/* =============================================
     모바일 최적화
     ============================================= */
@media (max-width: 768px) {
 .ct-site-title-container,
 .site-branding,
 [data-id="logo"] {
  min-width: 0 !important;
 }
 .ct-site-title-container::before,
 .site-branding::before,
 [data-id="logo"]::before {
  width: 44px !important;
  height: 28px !important;
  margin-right: 8px !important;
 }
 .ct-site-title-container,
 .site-branding,
 [data-id="logo"] {
  max-width: calc(100vw - 110px) !important;
  overflow: hidden !important;
  flex: 1 !important;
 }

 .site-title,
 .ct-site-title,
 [data-id="logo"] .ct-site-title {
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
 }
}

/* =============================================
     메인 콘텐츠
     ============================================= */
#main,
.site-main,
main {
 background-color: var(--metallic-bg) !important;
}

article,
.ct-post,
.hentry,
.type-page,
.type-post {
 background-color: var(--metallic-card) !important;
 border: 1px solid var(--metallic-rule) !important;
 border-radius: 8px !important;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* =============================================
     사이드바 & 위젯
     ============================================= */

/* 사이드바 전체 배경 (외곽 회색 음영 및 보더라인 적용) */
.ct-sidebar,
#secondary,
.widget-area {
 background-color: #f8fafc !important;
 border: 1px solid #e2e8f0 !important; /* 왼쪽뿐만 아니라 사방을 감싸는 보더라인 */
 border-radius: 12px !important; /* 부드러운 박스 형태 */
 padding: 24px 16px !important; /* 내부 여백을 줘서 독립된 박스 느낌 강조 */
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important; /* 외곽을 감싸는 은은한 회색 음영 그림자 */
 box-sizing: border-box !important;
}

/* 위젯 카드 — 기본적으로 카드 스타일 제거 */
.ct-sidebar .ct-widget {
 background: transparent !important;
 border: none !important;
 border-radius: 0 !important;
 padding: 0 !important;
 margin-bottom: 0 !important;
 box-shadow: none !important;
}

/* 카테고리 위젯 묶음 */
.ct-sidebar #block-9,
.ct-sidebar #block-8 {
 background-color: #ffffff !important;
 border: 1px solid #cbd5e1 !important; /* 더 뚜렷한 회색 보더라인 */
 box-sizing: border-box !important;
}

/* 제목 위젯 — 리스트와의 뚜렷한 경계선 추가 및 텍스트 가운데 정렬 */
.ct-sidebar #block-9 {
 border-radius: 10px 10px 0 0 !important;
 border-bottom: 1px solid #e2e8f0 !important; /* 제목과 리스트 사이 선 */
 padding: 16px 20px !important;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important; /* 회색 음영 추가 */
}

/* 리스트 위젯 — 위쪽 테두리 제거 (제목 위젯의 테두리로 대체) */
.ct-sidebar #block-8 {
 border-radius: 0 0 10px 10px !important;
 border-top: none !important;
 padding: 10px 10px 16px !important; /* 내부 cat-item의 패딩과 합쳐져 좌우 동일한 여백 형성 */
 margin-bottom: 20px !important;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important; /* 회색 음영 추가 */
}

/* 위젯 제목 h3 */
.ct-sidebar .wp-block-heading,
.ct-sidebar h2,
.ct-sidebar h3 {
 font-size: 0.75rem !important;
 font-weight: 700 !important;
 color: #64748b !important;
 text-transform: uppercase !important;
 letter-spacing: 0.12em !important;
 text-align: center !important; /* 🌟 제목 완벽한 가운데 정렬 */
 border-bottom: none !important;
 padding: 0 !important;
 margin: 0 !important;
 width: 100% !important;
}

/* 카테고리 리스트 */
.ct-sidebar .wp-block-categories-list,
.ct-sidebar .wp-block-categories {
 list-style: none !important;
 padding: 0 !important;
 margin: 0 !important;
}

/* 카테고리 항목 (개별 항목) */
.ct-sidebar .cat-item {
 display: flex !important;
 justify-content: space-between !important;
 align-items: center !important;
 padding: 12px 14px !important; /* 좌우 여백을 동일하게 */
 margin: 0 !important;
 border-radius: 6px !important;
 color: #94a3b8 !important;
 font-size: 0.82rem !important;
 transition: all 0.2s ease !important;
}

/* 개별 카테고리 경계선 뚜렷하게 렌더링 */
.ct-sidebar .cat-item:not(:last-child) {
 border-bottom: 1px solid #f1f5f9 !important; /* 경계선을 뚜렷하게 설정 */
 border-radius: 0 !important; /* 선이 그어질 때는 둥근 모서리 해제 */
}

/* 카테고리 링크 */
.ct-sidebar .cat-item a {
 text-decoration: none !important;
 color: #334155 !important;
 font-size: 0.875rem !important;
 font-weight: 500 !important;
 flex: 1 !important;
}

/* 카테고리 개수 (포스트 카운트) 모양 정렬 */
.ct-sidebar .cat-item .count {
 background: #f1f5f9 !important;
 padding: 2px 8px !important;
 border-radius: 12px !important;
 font-size: 0.75rem !important;
 color: #64748b !important;
 font-weight: 600 !important;
}

/* hover 효과 */
.ct-sidebar .cat-item:hover {
 background: #f8fafc !important;
}

.ct-sidebar .cat-item:hover a {
 color: #2563eb !important;
}

/* 현재 선택된 카테고리 */
.ct-sidebar .current-cat {
 background: #eff6ff !important;
 border-radius: 6px !important;
 border-bottom: none !important; /* 선택된 항목은 하단선 제거 */
}

.ct-sidebar .current-cat a {
 color: #2563eb !important;
 font-weight: 700 !important;
}

/* =============================================
     본문 (Entry Content)
     ============================================= */
.entry-content {
 max-width: 760px !important;
 margin: 0 auto !important;
 font-size: 1.05rem !important;
 line-height: 1.75 !important;
 color: var(--metallic-text) !important;
 word-break: keep-all !important;
}

.entry-content p {
 margin-bottom: 1.5em !important;
}

/* 본문 링크 강조 */
.entry-content a {
 color: #2563eb !important;
 text-decoration: none !important;
 border-bottom: 1px solid #bfdbfe !important;
 padding-bottom: 1px !important;
 font-weight: 500 !important;
 transition: color 0.15s ease, border-color 0.15s ease !important;
}

.entry-content a:hover {
 color: #1d4ed8 !important;
 border-bottom-color: #2563eb !important;
}

/* 외부 링크 (target="_blank") — ↗ 아이콘 */
.entry-content a[target="_blank"]::after {
 content: " ↗" !important;
 font-size: 0.75em !important;
 opacity: 0.6 !important;
 vertical-align: super !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
 color: var(--metallic-accent) !important;
 font-weight: 700 !important;
 margin-top: 2em !important;
 margin-bottom: 0.75em !important;
 line-height: 1.3 !important;
}

.entry-content h2 {
 padding-bottom: 0.3em !important;
 border-bottom: 1px solid var(--metallic-rule) !important;
}

.entry-content code {
 background-color: #e5e7eb !important;
 color: #ef4444 !important;
 padding: 0.2em 0.4em !important;
 border-radius: 4px !important;
 font-family: "Consolas", "Monaco", monospace !important;
 font-size: 0.9em !important;
}

.entry-content pre {
 background-color: #f9fafb !important;
 border: 1px solid var(--metallic-rule) !important;
 border-radius: 8px !important;
 padding: 16px !important;
 overflow-x: auto !important;
}

.entry-content blockquote {
 background-color: #dbeafe !important;
 border-left: 4px solid #2563eb !important;
 border-radius: 0 8px 8px 0 !important;
 padding: 16px 20px !important;
 margin: 1.5em 0 !important;
 font-style: normal !important;
 color: #1e3a8a !important;
}

.entry-content blockquote p:last-child {
 margin-bottom: 0 !important;
}

.entry-content table {
 width: 100% !important;
 border-collapse: collapse !important;
 margin-bottom: 1.5em !important;
 font-size: 0.95em !important;
}

.entry-content th,
.entry-content td {
 border: 1px solid var(--metallic-rule) !important;
 padding: 12px 16px !important;
 text-align: left !important;
}

.entry-content th {
 background-color: #f9fafb !important;
 font-weight: 600 !important;
 color: var(--metallic-text) !important;
}

/* =============================================
     관련 게시물 (Related Posts)
     ============================================= */

/* 섹션 래퍼 — Trending과 동일한 구조 */
.ct-related-posts-container {
 background: #f1f5f9 !important;
 background-color: #f1f5f9 !important;
 box-shadow: none !important;
 border: none !important;
 border-top: 1px solid #cbd5e1 !important;
 border-bottom: 1px solid #cbd5e1 !important;
 margin-top: 50px !important;
 padding: 20px 0 !important;
}

/* 컨테이너 — 세로 레이아웃으로 전환 */
.ct-related-posts-container > .ct-container {
 display: block !important;
 background: transparent !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 padding-left: 24px !important;
 padding-right: 24px !important;
}

/* 래퍼 — 세로 flex */
.ct-related-posts {
 display: flex !important;
 flex-direction: column !important;
 gap: 12px !important;
 width: 100% !important;
}

/* 섹션 제목 — 카드 위 왼쪽 */
.ct-related-posts .ct-module-title {
 display: block !important;
 font-size: 0.72rem !important;
 font-weight: 700 !important;
 color: #64748b !important;
 text-transform: uppercase !important;
 letter-spacing: 0.1em !important;
 margin: 0 !important;
 padding: 0 !important;
 border: none !important;
 white-space: nowrap !important;
}

/* 카드 목록 — 1행, 전체 너비 점유 */
.ct-related-posts-items {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 gap: 10px !important;
 align-items: stretch !important;
 width: 100% !important;
 overflow-x: auto !important;
 scrollbar-width: none !important;
 background: transparent !important;
 border: none !important;
 border-radius: 0 !important;
 counter-reset: related-counter !important;
}

.ct-related-posts-items::-webkit-scrollbar {
 display: none !important;
}

/* 카드 */
.ct-related-posts article {
 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 gap: 10px !important;
 background-color: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 8px !important;
 padding: 10px 12px !important;
 flex: 1 1 0 !important; /* 카드가 균등하게 전체 너비 분할 */
 min-width: 200px !important;
 max-width: none !important;
 min-height: 72px !important;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
 overflow: visible !important;
 transition: box-shadow 0.2s ease, transform 0.2s ease !important;
 position: relative !important;
 counter-increment: related-counter !important;
}

/* 번호 배지 */
.ct-related-posts article::before {
 content: counter(related-counter) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-width: 20px !important;
 height: 20px !important;
 border-radius: 50% !important;
 background: #f1f5f9 !important;
 color: #94a3b8 !important;
 font-size: 0.68rem !important;
 font-weight: 700 !important;
 flex-shrink: 0 !important;
 transition: all 0.15s ease !important;
}

/* 이미지 영역 */
.ct-related-posts article .ct-media-container {
 flex-shrink: 0 !important;
 width: 52px !important;
 height: 52px !important;
 border-radius: 6px !important;
 overflow: hidden !important;
 display: block !important;
 margin: 0 !important;
}

.ct-related-posts article .ct-media-container img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 display: block !important;
 border-radius: 6px !important;
}

/* 텍스트 영역 */
.ct-related-posts article > div {
 flex: 1 !important;
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 padding: 0 !important;
 min-width: 0 !important;
}

/* 카드 제목 */
.ct-related-posts .related-entry-title {
 font-size: 0.8rem !important;
 font-weight: 600 !important;
 color: #1e293b !important;
 line-height: 1.45 !important;
 margin-bottom: 0 !important;
 margin-top: 0 !important;
 word-break: keep-all !important;
 display: -webkit-box !important;
 -webkit-line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;
 line-clamp: 2 !important;
 overflow: hidden !important;
}

.ct-related-posts .related-entry-title a {
 color: #1e293b !important;
 text-decoration: none !important;
 transition: color 0.15s ease !important;
}

.ct-related-posts .related-entry-title a:hover {
 color: #2563eb !important;
}

/* 날짜 */
.ct-related-posts .entry-meta {
 list-style: none !important;
 padding: 0 !important;
 margin: 4px 0 0 !important;
 font-size: 0.72rem !important;
 color: #94a3b8 !important;
}

/* 카드 hover */
.ct-related-posts article:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
 transform: translateY(-2px) !important;
}

.ct-related-posts article:hover::before {
 background: #2563eb !important;
 color: #ffffff !important;
}

/* =============================================
     이전글 / 다음글 (Post Navigation)
     ============================================= */

/* 이전/다음 nav — 구버전 규칙 제거 (아래 통합 스타일로 대체) */

/* =============================================
     푸터
     ============================================= */
.site-footer,
#colophon,
.ct-footer,
[data-id="footer"] {
 background: linear-gradient(
  180deg,
  #f9fafb 0%,
  var(--metallic-sidebar) 100%
 ) !important;
 border-top: 1px solid var(--metallic-rule) !important;
 box-shadow: none !important;
 width: 100% !important;
}

.site-footer .ct-container,
.ct-footer .ct-container,
[data-id="footer"] .ct-container {
 max-width: 100% !important;
 width: 100% !important;
 padding: 20px 40px !important;
 box-sizing: border-box !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
}

.site-footer .widget,
.ct-footer .widget,
[data-id="footer"] .widget,
.ct-footer-widgets .widget {
 background: none !important;
 border: none !important;
 box-shadow: none !important;
 padding: 0 !important;
 margin: 0 !important;
 width: auto !important;
 display: inline !important;
}

.site-footer ul,
.ct-footer ul,
[data-id="footer"] ul {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 0 !important;
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

.site-footer ul li,
.ct-footer ul li,
[data-id="footer"] ul li {
 display: inline-flex !important;
 align-items: center !important;
 white-space: nowrap !important;
}

.site-footer ul li::after,
.ct-footer ul li::after,
[data-id="footer"] ul li::after {
 content: "·" !important;
 margin: 0 12px !important;
 color: #ccc !important;
 font-size: 13px !important;
}

.site-footer ul li:last-child::after,
.ct-footer ul li:last-child::after,
[data-id="footer"] ul li:last-child::after {
 content: none !important;
}

.site-footer a,
.ct-footer a,
[data-id="footer"] a {
 font-size: 13px !important;
 color: var(--metallic-text-soft) !important;
 text-decoration: none !important;
 letter-spacing: 0.02em !important;
}

.site-footer a:hover,
.ct-footer a:hover {
 color: var(--metallic-accent) !important;
 text-decoration: underline !important;
}

.site-footer .widget-title,
.ct-footer .widget-title {
 display: none !important;
}

/* =============================================
     GTranslate 번역 드롭다운
     ============================================= */

/* 현재 언어 표시 버튼 */
.gt-current-lang a,
.gttranslate > a,
.gtranslate_wrapper a.gt-current-lang {
 display: inline-flex !important;
 align-items: center !important;
 gap: 6px !important;
 padding: 5px 12px !important;
 background: #f1f5f9 !important;
 border: 1px solid #cbd5e1 !important;
 border-radius: 6px !important;
 font-size: 0.82rem !important;
 font-weight: 600 !important;
 color: #334155 !important;
 text-decoration: none !important;
 letter-spacing: 0.03em !important;
 transition: background 0.15s ease !important;
}

.gt-current-lang a:hover,
.gttranslate > a:hover,
.gtranslate_wrapper a.gt-current-lang:hover {
 background: #e2e8f0 !important;
 border-color: #94a3b8 !important;
}

/* 드롭다운 패널 */
.gttranslate .dropdown-menu,
.gtranslate_wrapper .dropdown-menu,
.gt_float_switcher .gt-lang-code {
 background: #ffffff !important;
 border: 1px solid #cbd5e1 !important;
 border-radius: 8px !important;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
 padding: 6px !important;
 min-width: 160px !important;
 margin-top: 6px !important;
}

/* 드롭다운 각 언어 항목 */
.gttranslate .dropdown-menu a,
.gtranslate_wrapper .dropdown-menu a,
.gt_float_switcher a {
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 8px 12px !important;
 border-radius: 6px !important;
 font-size: 0.85rem !important;
 color: #334155 !important;
 text-decoration: none !important;
 transition: background 0.12s ease !important;
}

.gttranslate .dropdown-menu a:hover,
.gtranslate_wrapper .dropdown-menu a:hover,
.gt_float_switcher a:hover {
 background: #f1f5f9 !important;
 color: #1e293b !important;
}

/* 국기 이미지 크기 통일 */
.gttranslate .dropdown-menu img,
.gtranslate_wrapper .dropdown-menu img,
.gt_float_switcher img {
 width: 20px !important;
 height: auto !important;
 border-radius: 2px !important;
}

/* =============================================
     GTranslate 번역 드롭다운
     ============================================= */

/* GTranslate 자체 select (.gt_selector) */
select.gt_selector {
 appearance: none !important;
 -webkit-appearance: none !important;
 background-color: #f1f5f9 !important;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
 background-repeat: no-repeat !important;
 background-position: right 10px center !important;
 border: 1px solid #cbd5e1 !important;
 border-radius: 6px !important;
 padding: 5px 32px 5px 10px !important;
 font-size: 0.82rem !important;
 font-weight: 600 !important;
 color: #334155 !important;
 cursor: pointer !important;
 transition: border-color 0.15s ease, background-color 0.15s ease !important;
 min-width: 120px !important;
 line-height: 1.4 !important;
}

select.gt_selector:hover {
 background-color: #e2e8f0 !important;
 border-color: #94a3b8 !important;
}

select.gt_selector:focus {
 outline: none !important;
 border-color: #2563eb !important;
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

html body {
 margin-top: 0 !important;
}

/* =============================================
     블로그 게시물 목록 (Entries - Notion / Clean Document Style Row)
     ============================================= */
.entries[data-layout="simple"] {
 display: flex !important;
 flex-direction: column !important;
 gap: 16px !important;
 margin-top: 0 !important;
}

.entries[data-layout="simple"] .entry-card {
 background-color: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 10px !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
 position: relative !important;
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
 display: flex !important;
 flex-direction: row !important;
 align-items: stretch !important;
 overflow: hidden !important;
 margin-bottom: 0 !important;
}

.entries[data-layout="simple"] .entry-card:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04) !important;
 border-color: #cbd5e1 !important;
}

/* 썸네일 영역 (.ct-media-container) */
.entries[data-layout="simple"] .entry-card .ct-media-container {
 display: flex !important;
 align-items: center !important; /* 이미지를 행 높이 안에서 수직 중앙 정렬 */
 justify-content: center !important;
 width: 320px !important;
 flex-shrink: 0 !important;
 overflow: hidden !important;
 border-right: 1px solid #f1f5f9 !important;
 border-bottom: none !important;
 border-radius: 10px 0 0 10px !important;
 background-color: #f8fafc !important; /* 레터박싱(여백) 영역이 생길 때 배경색 */
}

.entries[data-layout="simple"] .entry-card .ct-media-container img {
 width: 100% !important;
 height: auto !important; /* 높이 100% 강제를 해제하여 이미지 본연의 비율 유지 */
 max-height: 100% !important; /* 행 높이를 넘지 않도록 제한 */
 object-fit: contain !important; /* 전체 이미지가 보이도록 contain으로 변경 */
 transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.entries[data-layout="simple"] .entry-card:hover .ct-media-container img {
 transform: scale(1.04) !important;
}

/* 카드 텍스트 패딩 */
.entries[data-layout="simple"] .entry-card .card-content {
 padding: 16px 20px !important;
 display: flex !important;
 flex-direction: column !important;
 justify-content: center !important;
 flex: 1 !important;
 min-width: 0 !important;
}

/* 첫 번째 메타 (카테고리) */
.entries[data-layout="simple"] .entry-card .entry-meta[data-id="meta_1"] {
 list-style: none !important;
 margin: 0 0 6px 0 !important;
 padding: 0 !important;
 display: flex !important;
 align-items: center !important;
}

.entries[data-layout="simple"] .entry-card .meta-categories a {
 background-color: #f1f5f9 !important;
 color: #64748b !important;
 font-size: 0.7rem !important;
 font-weight: 600 !important;
 padding: 4px 10px !important;
 border-radius: 6px !important;
 text-decoration: none !important;
 text-transform: uppercase !important;
 letter-spacing: 0.03em !important;
 transition: all 0.2s ease !important;
}

.entries[data-layout="simple"] .entry-card .meta-categories a:hover {
 background-color: #e2e8f0 !important;
 color: #334155 !important;
}

/* 글 제목 */
.entries[data-layout="simple"] .entry-card .entry-title {
 font-size: 1.1rem !important;
 font-weight: 700 !important;
 line-height: 1.4 !important;
 margin: 0 0 6px 0 !important;
 color: #1e293b !important;
 display: -webkit-box !important;
 -webkit-line-clamp: 1 !important;
 line-clamp: 1 !important;
 -webkit-box-orient: vertical !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

.entries[data-layout="simple"] .entry-card .entry-title a {
 color: inherit !important;
 text-decoration: none !important;
 border-bottom: none !important;
 background-image: none !important;
 transition: color 0.2s ease !important;
}

.entries[data-layout="simple"] .entry-card .entry-title a:hover {
 color: #2563eb !important;
}

/* 글 요약 (Excerpt) */
.entries[data-layout="simple"] .entry-card .entry-excerpt {
 margin-bottom: 12px !important;
 flex: 1 !important;
}

.entries[data-layout="simple"] .entry-card .entry-excerpt p {
 font-size: 0.875rem !important;
 line-height: 1.5 !important;
 color: #64748b !important;
 margin: 0 !important;
 display: -webkit-box !important;
 -webkit-line-clamp: 2 !important;
 line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

/* 두 번째 메타 (작성자, 작성일) */
.entries[data-layout="simple"] .entry-card .entry-meta[data-id="meta_2"] {
 list-style: none !important;
 padding: 10px 0 0 0 !important;
 margin: auto 0 0 0 !important;
 display: flex !important;
 align-items: center !important;
 gap: 12px !important;
 border-top: 1px solid #f1f5f9 !important;
 font-size: 0.75rem !important;
 color: #94a3b8 !important;
}

.entries[data-layout="simple"] .entry-card .entry-meta[data-id="meta_2"] li {
 display: flex !important;
 align-items: center !important;
}

.entries[data-layout="simple"]
 .entry-card
 .entry-meta[data-id="meta_2"]
 li:not(:last-child)::after {
 content: "·" !important;
 margin-left: 12px !important;
 color: #cbd5e1 !important;
}

.entries[data-layout="simple"] .entry-card .meta-author a {
 color: #475569 !important;
 font-weight: 600 !important;
 text-decoration: none !important;
}

.entries[data-layout="simple"] .entry-card .meta-author a:hover {
 color: #2563eb !important;
}

.entries[data-layout="simple"] .entry-card .meta-date time {
 color: #94a3b8 !important;
}

/* 모바일 뷰 최적화 (Entries) */
@media (max-width: 768px) {
 .entries[data-layout="simple"] .entry-card {
  flex-direction: column !important;
 }

 .entries[data-layout="simple"] .entry-card .ct-media-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 16 / 9 !important;
  border-right: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: 10px 10px 0 0 !important;
 }

 .entries[data-layout="simple"] .entry-card .card-content {
  padding: 16px !important;
 }

 .entries[data-layout="simple"] .entry-card .entry-title {
  font-size: 1.05rem !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
 }
}

/* =============================================
     본문 상단 헤더 (Hero Section - Notion Style)
     ============================================= */
.hero-section {
 max-width: 760px !important;
 margin: 0 auto !important;
 padding: 40px 20px 0 !important;
}

.hero-section .page-title {
 font-family: "Pretendard", "Noto Sans KR", sans-serif !important;
 font-size: 2.2rem !important;
 font-weight: 800 !important;
 line-height: 1.35 !important;
 color: #0f172a !important;
 letter-spacing: -0.02em !important;
 margin: 0 0 24px 0 !important;
 word-break: keep-all !important;
}

/* 2. 작성자 및 메타 정보 (Entry Meta - Notion Properties Style) */
.hero-section .entry-meta {
 list-style: none !important;
 padding: 0 !important;
 margin: 0 0 32px 0 !important;
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;
 gap: 16px !important;
 font-size: 0.9rem !important;
 color: #64748b !important;
 border-bottom: 1px solid #e2e8f0 !important;
 padding-bottom: 24px !important;
}

.hero-section .entry-meta li {
 display: flex !important;
 align-items: center !important;
 margin: 0 !important;
}

/* 기본 구분선 제거 */
.hero-section .entry-meta li:not(:last-child)::after {
 content: none !important;
}

/* 작성자 아바타 이미지 */
.hero-section .entry-meta .meta-author img {
 border-radius: 50% !important;
 margin-right: 8px !important;
 border: 1px solid #e2e8f0 !important;
 width: 28px !important;
 height: 28px !important;
}

.hero-section .entry-meta .meta-author a {
 display: flex !important;
 align-items: center !important;
 color: #334155 !important;
 font-weight: 600 !important;
 text-decoration: none !important;
}

/* 날짜 폰트 */
.hero-section .entry-meta .meta-date time {
 color: #94a3b8 !important;
 font-weight: 500 !important;
}

/* 카테고리 알약(Pill) 뱃지 */
.hero-section .entry-meta .meta-categories a {
 background-color: #f1f5f9 !important;
 color: #475569 !important;
 padding: 4px 12px !important;
 border-radius: 20px !important;
 font-size: 0.8rem !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 transition: all 0.2s ease !important;
 border: 1px solid #e2e8f0 !important;
}

.hero-section .entry-meta .meta-categories a:hover {
 background-color: #e2e8f0 !important;
 color: #1e293b !important;
}

/* =============================================
     목차 플러그인 (EZ-TOC - Clean Document Theme)
     ============================================= */
#ez-toc-container {
 background: #f8fafc !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 12px !important;
 padding: 24px 32px !important;
 margin: 16px 0 40px !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
 width: 100% !important;
 max-width: 100% !important;
}

/* 목차 제목 */
#ez-toc-container .ez-toc-title {
 font-family: inherit !important;
 font-size: 1.1rem !important;
 font-weight: 700 !important;
 color: #1e293b !important;
 margin-bottom: 20px !important;
}

/* 목차 컨테이너 내 불필요 테두리 제거 */
#ez-toc-container ul.ez-toc-list {
 padding-left: 0 !important;
 margin: 0 !important;
 list-style: none !important;
}

#ez-toc-container ul.ez-toc-list li {
 margin-bottom: 10px !important;
 line-height: 1.5 !important;
}

#ez-toc-container ul.ez-toc-list a {
 color: #475569 !important;
 text-decoration: none !important;
 font-size: 0.95rem !important;
 transition: all 0.2s ease !important;
 display: inline-block !important;
 border-bottom: none !important;
 padding: 4px 8px !important;
 margin-left: -8px !important;
 border-radius: 6px !important;
}

/* 마우스 오버 시 연한 파란색 배경 (노션 스타일) */
#ez-toc-container ul.ez-toc-list a:hover {
 color: #2563eb !important;
 background-color: #eff6ff !important;
}

/* 2단계 목차 들여쓰기 조정 */
#ez-toc-container ul.ez-toc-list ul {
 padding-left: 20px !important;
 margin-top: 10px !important;
}

/* =============================================
     WP Forms 커스텀 스타일 (Notion 클린 폼 스타일)
     ============================================= */
#wpforms-545 .wpforms-field-label,
#wpforms-form-545 .wpforms-field-label {
 font-family: inherit !important;
 font-size: 14px !important;
 font-weight: 600 !important;
 color: #334155 !important;
 margin-bottom: 8px !important;
}

#wpforms-545 input[type="text"],
#wpforms-545 input[type="email"],
#wpforms-545 input[type="tel"],
#wpforms-545 input[type="number"],
#wpforms-545 textarea,
#wpforms-545 select,
#wpforms-form-545 input[type="text"],
#wpforms-form-545 input[type="email"],
#wpforms-form-545 input[type="tel"],
#wpforms-form-545 textarea,
#wpforms-form-545 select {
 font-family: inherit !important;
 font-size: 15px !important;
 border: 1px solid #cbd5e1 !important;
 border-radius: 8px !important;
 background-color: #ffffff !important;
 padding: 12px 16px !important;
 color: #0f172a !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
 transition: all 0.2s ease !important;
 width: 100% !important;
 box-sizing: border-box !important;
}

#wpforms-545 input:focus,
#wpforms-545 textarea:focus,
#wpforms-form-545 input:focus,
#wpforms-form-545 textarea:focus {
 border-color: #2563eb !important;
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
 outline: none !important;
}

/* Submit 버튼 (Notion Dark Button) */
#wpforms-545 .wpforms-submit,
#wpforms-form-545 .wpforms-submit,
#wpforms-545 button[type="submit"],
#wpforms-form-545 button[type="submit"] {
 background-color: #0f172a !important;
 color: #ffffff !important;
 border: none !important;
 border-radius: 8px !important;
 font-family: inherit !important;
 font-size: 15px !important;
 font-weight: 600 !important;
 padding: 14px 32px !important;
 cursor: pointer !important;
 transition: all 0.2s ease !important;
 margin-top: 16px !important;
 width: 100% !important;
}

#wpforms-545 .wpforms-submit:hover,
#wpforms-form-545 .wpforms-submit:hover,
#wpforms-545 button[type="submit"]:hover,
#wpforms-form-545 button[type="submit"]:hover {
 background-color: #1e293b !important;
 transform: translateY(-1px) !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* =============================================
     카테고리/보관함 헤더 (Archive Hero Section - Notion Style)
     ============================================= */
/* 카테고리 뱃지 (Pill 모양) */
.hero-section .page-title .ct-title-label {
 display: inline-flex !important;
 align-items: center !important;
 font-size: 0.85rem !important;
 font-weight: 600 !important;
 color: #2563eb !important;
 background-color: #eff6ff !important;
 padding: 4px 12px !important;
 border-radius: 20px !important;
 margin-right: 12px !important;
 vertical-align: middle !important;
 border: 1px solid #bfdbfe !important;
 transform: translateY(
  -4px
 ) !important; /* 큰 제목 폰트와 시각적 중앙을 맞추기 위함 */
 letter-spacing: 0 !important;
}

/* 카테고리 설명글 (노션 인용구/콜아웃 스타일) */
.hero-section .page-description {
 font-family: var(
  --wp--preset--font-family--system-font,
  "Pretendard",
  sans-serif
 ) !important;
 font-size: 1.05rem !important;
 color: #475569 !important;
 line-height: 1.7 !important;
 margin-top: 16px !important;
 padding: 16px 20px !important;
 background-color: #f8fafc !important;
 border-left: 3px solid #cbd5e1 !important;
 border-radius: 0 8px 8px 0 !important;
 word-break: keep-all !important;
}

.hero-section .page-description p {
 margin: 0 !important;
}

/* =============================================
     아카이브(카테고리/태그) 헤더 너비 및 여백 수정
     ============================================= */
/* 단일 포스트용 760px 중앙 정렬을 풀어서, 아카이브 페이지에서는 게시글 카드의 왼쪽 시작선과 완벽히 일치시킴 */
body.archive .hero-section,
body.category .hero-section {
 max-width: 100% !important; /* 760px 강제 축소 제한 해제 */
 margin: 0 0 56px 0 !important; /* 중앙 정렬용 자동 마진 제거 및 넉넉한 하단 마진 추가 */
 padding: 40px 0 0 !important; /* 내부 패딩을 0으로 만들어 게시글 리스트의 수직 기준선에 딱 맞춤 */
 text-align: left !important;
}

/* =============================================
     그리드 레이아웃(Grid View) 통일 및 보정
     ============================================= */
/* 레이아웃 토튼 버튼 클릭 시 기본 그리드가 깨져보이지 않도록 클린 테마 디자인 전이 적용 */
.entries[data-layout="grid"] .entry-card {
 background-color: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 10px !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
 overflow: hidden !important;
}

.entries[data-layout="grid"] .entry-card:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04) !important;
 border-color: #cbd5e1 !important;
}

.entries[data-layout="grid"] .entry-card .ct-media-container {
 aspect-ratio: 16 / 9 !important;
 border-radius: 10px 10px 0 0 !important;
}

.entries[data-layout="grid"] .entry-card .ct-media-container img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
}

.entries[data-layout="grid"] .entry-card .card-content {
 padding: 16px 20px !important;
}

.entries[data-layout="grid"] .entry-card .entry-title {
 font-size: 1.05rem !important;
 font-weight: 700 !important;
 margin: 12px 0 8px 0 !important;
 line-height: 1.4 !important;
 color: #1e293b !important;
}

/* =============================================
     모바일 오프캔버스 메뉴 (근본 원인 해결)
     --------------------------------------------------
     .ct-drawer-canvas 높이가 CSS 변수 계산 오류로 0.8px이 됨.
     반드시 패널이 '열린 상태(.active)'일 때만 높이를 부여해야
     데스크톱에서 회색 화면이 덮이는 현상을 방지합니다.
     ============================================= */

/* 오프캔버스가 열렸을 때만 드로어 컨테이너에 화면 높이를 부여 */
.ct-drawer-canvas:has(.active) {
 position: fixed !important; /* static이 아닌 fixed로 잡아야 스크롤 위치와 무관하게 화면에 보입니다 */
 top: 0 !important;
 left: 0 !important;
 width: 100% !important;
 height: 100vh !important;
 min-height: 100vh !important;
 z-index: 9999 !important; /* 모든 콘텐츠 위에 표시 */
}
/* =============================================
     오프캔버스 패널 (Clean Document Theme - Notion Style)
     ============================================= */

/* 패널 본체: 밝고 깨끗한 흰색 바탕 */
#offcanvas.active,
.ct-panel.active {
 background-color: #ffffff !important;
 height: 100vh !important;
 min-height: 100vh !important;
 overflow-y: auto !important;
 border-left: 1px solid #e2e8f0 !important;
 box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06) !important;
}

/* 패널 상단 액션 영역 (닫기 버튼이 들어있는 바) */
.ct-panel .ct-panel-actions {
 display: flex !important;
 justify-content: flex-end !important;
 padding: 16px 20px !important;
 border-bottom: 1px solid #e2e8f0 !important;
}

/* 닫기 버튼 (X) - 부드러운 원형 버튼 */
.ct-panel .ct-toggle-close {
 background-color: #f1f5f9 !important;
 border: none !important;
 border-radius: 50% !important;
 width: 36px !important;
 height: 36px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 cursor: pointer !important;
 transition: background-color 0.15s ease !important;
}

.ct-panel .ct-toggle-close:hover {
 background-color: #e2e8f0 !important;
}

.ct-panel .ct-toggle-close svg {
 width: 16px !important;
 height: 16px !important;
 color: #64748b !important;
}

/* 패널 내부 컨텐츠 영역 */
.ct-panel.active .ct-panel-content,
.ct-panel-content[data-device="mobile"] {
 height: auto !important;
 min-height: 100% !important;
 padding: 0 !important;
}

.ct-panel .ct-panel-content-inner {
 padding: 8px 0 !important;
}

/* 네비게이션 메뉴 컨테이너 */
.ct-panel nav.mobile-menu,
#offcanvas nav,
.ct-panel nav {
 display: block !important;
 opacity: 1 !important;
 visibility: visible !important;
 padding: 0 !important;
}

/* 메뉴 리스트(ul) 초기화 */
.ct-panel nav ul,
#offcanvas ul,
.ct-panel ul {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: block !important;
 opacity: 1 !important;
 visibility: visible !important;
}

/* ---- 개별 메뉴 항목 (Notion 사이드바 스타일) ---- */
.ct-panel nav ul li {
 margin: 2px 12px !important;
}

#offcanvas .ct-menu-link,
.ct-panel .ct-menu-link,
#offcanvas .ct-menu li a,
.ct-panel .ct-menu li a,
.ct-panel nav ul li a {
 display: flex !important;
 align-items: center !important;
 color: #334155 !important;
 font-size: 0.95rem !important;
 font-weight: 500 !important;
 padding: 10px 14px !important;
 border-radius: 8px !important;
 border-bottom: none !important;
 text-decoration: none !important;
 opacity: 1 !important;
 visibility: visible !important;
 transition: all 0.15s ease !important;
 line-height: 1.4 !important;
}

/* 호버/터치 시 노션 특유의 연한 회색 배경 등장 */
#offcanvas .ct-menu-link:hover,
.ct-panel .ct-menu-link:hover,
.ct-panel nav ul li a:hover,
#offcanvas .ct-menu li a:hover,
.ct-panel .ct-menu li a:hover {
 background-color: #f1f5f9 !important;
 color: #0f172a !important;
}

/* 활성화된(현재 페이지) 메뉴 항목 */
.ct-panel nav ul li.current-menu-item > a,
.ct-panel nav ul li.current_page_item > a {
 background-color: #eff6ff !important;
 color: #2563eb !important;
 font-weight: 600 !important;
}

/* 메뉴 아이콘(화살표 등) */
.ct-panel nav ul li .ct-menu-link span {
 color: inherit !important;
}

/* =============================================
     이전/다음 글 네비게이션
     ============================================= */

.post-navigation {
 display: grid !important;
 grid-template-columns: 1fr 1fr !important;
 gap: 12px !important;
 margin-top: 40px !important;
 padding: 0 !important;
 border: none !important;
 background: transparent !important;
}

/* 카드 공통 */
.post-navigation .nav-item-prev,
.post-navigation .nav-item-next {
 display: flex !important;
 align-items: center !important;
 gap: 14px !important;
 padding: 14px 18px !important;
 background: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 10px !important;
 text-decoration: none !important;
 color: #1e293b !important;
 transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
 overflow: hidden !important;
 min-width: 0 !important;
}

.post-navigation .nav-item-prev:hover,
.post-navigation .nav-item-next:hover {
 border-color: #94a3b8 !important;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* 썸네일 — 데스크탑만 표시 */
.post-navigation .ct-media-container {
 flex-shrink: 0 !important;
 width: 56px !important;
 height: 56px !important;
 border-radius: 6px !important;
 overflow: hidden !important;
 background: #f1f5f9 !important;
}

.post-navigation .ct-media-container img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 display: block !important;
}

/* 썸네일 안의 화살표 svg 숨김 */
.post-navigation .ct-media-container svg {
 display: none !important;
}

/* 텍스트 영역 */
.post-navigation .item-content {
 display: flex !important;
 flex-direction: column !important;
 justify-content: center !important;
 min-width: 0 !important;
 flex: 1 !important;
}

/* 이전/다음 라벨 */
.post-navigation .item-label {
 display: block !important;
 font-size: 0.68rem !important;
 font-weight: 700 !important;
 text-transform: uppercase !important;
 letter-spacing: 0.08em !important;
 color: #94a3b8 !important;
 margin-bottom: 3px !important;
 white-space: nowrap !important;
}

.post-navigation .item-label span {
 display: none !important;
}

.post-navigation .nav-item-prev .item-label::before {
 content: "← " !important;
}

.post-navigation .nav-item-next .item-label::after {
 content: " →" !important;
}

/* 글 제목 — 1줄 말줄임 */
.post-navigation .item-title {
 display: block !important;
 font-size: 0.875rem !important;
 font-weight: 600 !important;
 color: #1e293b !important;
 line-height: 1.4 !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

.post-navigation a:hover .item-title {
 color: #2563eb !important;
}

/* 다음 글: 오른쪽 정렬 */
.post-navigation .nav-item-next {
 justify-content: flex-end !important;
}

.post-navigation .nav-item-next .item-content {
 text-align: right !important;
}

/* =============================================
     모바일: 썸네일 숨기고 1줄 말줄임 유지
     ============================================= */
@media (max-width: 768px) {
 .post-navigation {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 28px !important;
 }

 .post-navigation .nav-item-prev,
 .post-navigation .nav-item-next {
  padding: 12px 14px !important;
  gap: 0 !important;
 }

 /* 모바일: 썸네일 숨김 */
 .post-navigation .ct-media-container {
  display: none !important;
 }

 /* 모바일: 제목 1줄 말줄임 유지 */
 .post-navigation .item-title {
  font-size: 0.8rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
 }

 /* 다음 글도 모바일에서 왼쪽 정렬 */
 .post-navigation .nav-item-next {
  justify-content: flex-start !important;
 }

 .post-navigation .nav-item-next .item-content {
  text-align: left !important;
 }
}

/* =============================================
     게시글 대표 이미지(Featured Image) 비율 16:9 강제 적용
     ============================================= */
/* 워드프레스가 인라인(style 속성)으로 aspect-ratio: 4/3을 넣는 것을 CSS로 오버라이드 */

/* 모든 문맥의 wp-post-image (목록, 상세, 그리드 등) */
.wp-post-image,
img.wp-post-image,
article .wp-post-image,
.single .wp-post-image,
.entry-card .wp-post-image,
.entries .wp-post-image,
.ct-media-container .wp-post-image,
.ct-media-container img {
 aspect-ratio: 16 / 9 !important;
 width: 100% !important;
 height: auto !important;
 object-fit: cover !important;
}

/* 미디어 컨테이너 자체에도 비율 강제 (컨테이너가 이미지의 잘린 부분을 가리는 역할) */
.entries .ct-media-container,
.entry-card .ct-media-container {
 aspect-ratio: 16 / 9 !important;
 overflow: hidden !important;
}

/* =============================================
     페이지네이션 (이전/다음 + 페이지 번호) 통일
     ============================================= */
.ct-pagination {
 position: relative !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 6px !important;
 margin-top: 40px !important;
 padding: 16px 0 !important;
}

.ct-pagination .page-numbers {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-width: 36px !important;
 height: 36px !important;
 padding: 0 10px !important;
 border-radius: 8px !important;
 font-size: 0.875rem !important;
 font-weight: 500 !important;
 color: #475569 !important;
 text-decoration: none !important;
 transition: all 0.15s ease !important;
}

.ct-pagination a.page-numbers:hover {
 background-color: #f1f5f9 !important;
 color: #0f172a !important;
}

.ct-pagination .page-numbers.current {
 background-color: #0f172a !important;
 color: #ffffff !important;
 font-weight: 600 !important;
}

/* 이전/다음 버튼: 검은 배경 + 흰 글씨, 좌우 끝 배치 */
.ct-pagination a.prev.page-numbers,
.ct-pagination a.next.page-numbers {
 position: absolute !important;
 background-color: #0f172a !important;
 color: #ffffff !important;
 font-weight: 600 !important;
 gap: 4px !important;
}

.ct-pagination a.prev.page-numbers {
 left: 0 !important;
}

.ct-pagination a.next.page-numbers {
 right: 0 !important;
}

.ct-pagination a.prev.page-numbers svg,
.ct-pagination a.next.page-numbers svg {
 fill: #ffffff !important;
 color: #ffffff !important;
}

.ct-pagination a.prev.page-numbers:hover,
.ct-pagination a.next.page-numbers:hover {
 background-color: #1e293b !important;
}

.ct-pagination .page-numbers.dots {
 color: #94a3b8 !important;
}

/* =============================================
     태그 클라우드 위젯 (Notion Pill Badge Style)
     ============================================= */

/* 태그 컨테이너: flex wrap으로 뱃지들이 자연스럽게 줄바꿈 */
.wp-block-tag-cloud,
.widget_tag_cloud .tagcloud {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
 padding: 0 !important;
 margin: 0 !important;
 line-height: 1 !important;
}

/* 개별 태그 링크: 워드프레스 인라인 font-size 무력화 + pill 뱃지 */
.wp-block-tag-cloud a,
.widget_tag_cloud .tagcloud a,
a.tag-cloud-link {
 display: inline-flex !important;
 align-items: center !important;
 font-size: 0.78rem !important; /* WP 인라인 스타일 오버라이드 */
 font-weight: 500 !important;
 color: #475569 !important;
 background-color: #f1f5f9 !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 20px !important;
 padding: 4px 12px !important;
 text-decoration: none !important;
 letter-spacing: 0.01em !important;
 transition: background-color 0.15s ease, color 0.15s ease,
  border-color 0.15s ease !important;
 white-space: nowrap !important;
}

.wp-block-tag-cloud a:hover,
.widget_tag_cloud .tagcloud a:hover,
a.tag-cloud-link:hover {
 background-color: #eff6ff !important;
 color: #2563eb !important;
 border-color: #bfdbfe !important;
 text-decoration: none !important;
}

/* =============================================
     달력 위젯 (Notion Clean Calendar Style)
     ============================================= */

/* 달력 래퍼 */
.wp-block-calendar {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
}

/* 월/연도 캡션 */
.wp-calendar-table caption {
 font-size: 0.75rem !important;
 font-weight: 700 !important;
 color: #64748b !important;
 text-transform: uppercase !important;
 letter-spacing: 0.12em !important;
 text-align: center !important;
 padding-bottom: 12px !important;
 caption-side: top !important;
}

/* 테이블 전체 */
#wp-calendar,
.wp-calendar-table {
 width: 100% !important;
 border-collapse: collapse !important;
 table-layout: fixed !important;
 border: none !important;
}

/* 요일 헤더 */
.wp-calendar-table thead th {
 font-size: 0.7rem !important;
 font-weight: 600 !important;
 color: #94a3b8 !important;
 text-align: center !important;
 padding: 4px 0 8px !important;
 border: none !important;
 background: transparent !important;
}

/* 날짜 셀 공통 */
.wp-calendar-table tbody td {
 text-align: center !important;
 padding: 3px !important;
 border: none !important;
 background: transparent !important;
 font-size: 0.8rem !important;
 color: #cbd5e1 !important; /* 글 없는 날: 흐린 색 */
 line-height: 1 !important;
}

/* 글이 있는 날짜 링크 */
.wp-calendar-table tbody td a {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 28px !important;
 height: 28px !important;
 border-radius: 6px !important;
 font-size: 0.8rem !important;
 font-weight: 500 !important;
 color: #334155 !important;
 text-decoration: none !important;
 transition: all 0.15s ease !important;
 border-bottom: none !important;
}

.wp-calendar-table tbody td a:hover {
 background-color: #eff6ff !important;
 color: #2563eb !important;
}

/* 오늘 날짜 강조 */
#today {
 font-weight: 700 !important;
}

#today a {
 background-color: #0f172a !important;
 color: #ffffff !important;
 font-weight: 700 !important;
 border-radius: 6px !important;
}

#today a:hover {
 background-color: #1e293b !important;
 color: #ffffff !important;
}

/* 이전/다음 달 네비게이션 */
.wp-calendar-nav {
 display: flex !important;
 justify-content: space-between !important;
 align-items: center !important;
 margin-top: 10px !important;
 padding-top: 10px !important;
 border-top: 1px solid #f1f5f9 !important;
}

.wp-calendar-nav a {
 font-size: 0.75rem !important;
 font-weight: 600 !important;
 color: #64748b !important;
 text-decoration: none !important;
 padding: 4px 8px !important;
 border-radius: 6px !important;
 border-bottom: none !important;
 transition: all 0.15s ease !important;
}

.wp-calendar-nav a:hover {
 background-color: #f1f5f9 !important;
 color: #334155 !important;
}

/* =============================================
     태그 클라우드 & 달력: 카테고리와 동일한 카드 스타일
     ============================================= */
.ct-sidebar #block-14,
.ct-sidebar #block-15 {
 background-color: #ffffff !important;
 border: 1px solid #cbd5e1 !important;
 border-radius: 10px !important;
 padding: 16px 20px !important;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
 box-sizing: border-box !important;
 margin-bottom: 20px !important;
}

/* =============================================
     최근 게시물 위젯 (Recent Posts - Notion Card Style)
     ============================================= */

/* 카드 래퍼 */
.ct-sidebar #block-17 {
 background-color: #ffffff !important;
 border: 1px solid #cbd5e1 !important;
 border-radius: 10px !important;
 padding: 0 !important;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
 box-sizing: border-box !important;
 margin-bottom: 20px !important;
 overflow: hidden !important;
}

/* "최근글" 제목 — CSS 가상 요소로 삽입 */
.ct-sidebar #block-17::before {
 content: "최근글" !important;
 display: block !important;
 font-size: 0.75rem !important;
 font-weight: 700 !important;
 color: #64748b !important;
 letter-spacing: 0.12em !important;
 text-align: center !important;
 padding: 16px 20px !important;
 border-bottom: 1px solid #e2e8f0 !important;
}

/* 리스트 초기화 */
.ct-sidebar #block-17 .wp-block-latest-posts {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
}

/* 개별 항목 구분선 */
.ct-sidebar #block-17 .wp-block-latest-posts li:not(:last-child) {
 border-bottom: 1px solid #f1f5f9 !important;
}

/* 링크 */
.ct-sidebar #block-17 .wp-block-latest-posts__post-title {
 display: block !important;
 padding: 12px 14px !important;
 font-size: 0.875rem !important;
 font-weight: 500 !important;
 color: #334155 !important;
 text-decoration: none !important;
 border-bottom: none !important;
 line-height: 1.5 !important;
 transition: all 0.2s ease !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

.ct-sidebar #block-17 .wp-block-latest-posts__post-title:hover {
 color: #2563eb !important;
 background-color: #f8fafc !important;
}

/* =============================================
     트렌딩 블록 (Trending Block)
     ============================================= */

/* 섹션 래퍼 — 광고를 우측에 붙이기 위해 flex row */
.ct-trending-block {
 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 background: #f1f5f9 !important;
 border-top: 1px solid #cbd5e1 !important;
 border-bottom: 1px solid #cbd5e1 !important;
 padding: 20px 0 !important;
 margin-bottom: 0 !important;
}

/* 컨테이너 — 카드 영역만, 광고는 section에 직접 */
.ct-trending-block .ct-container {
 flex: 1 !important; /* section flex에서 남은 공간 모두 차지 */
 display: flex !important;
 flex-wrap: nowrap !important;
 align-items: center !important;
 gap: 0 !important;
 padding-left: 24px !important;
 padding-right: 16px !important;
 overflow-x: auto !important;
 overflow-y: visible !important;
 scrollbar-width: none !important;
 min-width: 0 !important;
}

.ct-trending-block .ct-container::-webkit-scrollbar {
 display: none !important;
}

/* 섹션 제목 (h3) */
.ct-trending-block .ct-module-title {
 display: flex !important;
 align-items: center !important;
 gap: 6px !important;
 flex: 0 0 210px !important; /* Related Posts 제목과 동일한 너비 고정 */
 overflow: hidden !important;
 font-size: 0.72rem !important;
 font-weight: 700 !important;
 color: #64748b !important;
 text-transform: uppercase !important;
 letter-spacing: 0.1em !important;
 margin: 0 0 0 0 !important;
 padding: 0 20px 0 0 !important;
 border-right: 1px solid #cbd5e1 !important;
 white-space: nowrap !important;
 align-self: center !important;
 min-height: 48px !important;
 box-sizing: border-box !important;
}

/* Trending 아이콘 (트렌드 화살표 svg) */
.ct-trending-block .ct-module-title > svg {
 color: #2563eb !important;
 flex-shrink: 0 !important;
}

/* 슬라이더 화살표 그룹 */
.ct-trending-block .ct-slider-arrows {
 display: inline-flex !important;
 align-items: center !important;
 gap: 4px !important;
 margin-left: 6px !important;
}

/* 화살표 버튼 공통 */
.ct-trending-block .ct-arrow-prev,
.ct-trending-block .ct-arrow-next {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 22px !important;
 height: 22px !important;
 border-radius: 50% !important;
 background: #e2e8f0 !important;
 color: #475569 !important;
 cursor: pointer !important;
 transition: all 0.2s ease !important;
 flex-shrink: 0 !important;
}

.ct-trending-block .ct-arrow-prev:hover,
.ct-trending-block .ct-arrow-next:hover {
 background: #2563eb !important;
 color: #ffffff !important;
}

/* 개별 아이템 */
.ct-trending-block-item {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 background: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 8px !important;
 padding: 10px 12px !important;
 min-width: 220px !important;
 max-width: 220px !important;
 min-height: 100px !important; /* 카카오 광고 100px 높이에 맞춤 */
 flex-shrink: 0 !important;
 margin-right: 10px !important;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
 transition: all 0.2s ease !important;
}

.ct-trending-block-item:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
 transform: translateY(-2px) !important;
}

/* 썸네일 이미지 */
.ct-trending-block-item .ct-media-container {
 flex-shrink: 0 !important;
 width: 52px !important;
 height: 52px !important;
 border-radius: 6px !important;
 overflow: hidden !important;
 display: block !important;
}

.ct-trending-block-item .ct-media-container img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 display: block !important;
 border-radius: 6px !important;
}

/* 텍스트 영역 */
.ct-trending-block-item-content {
 flex: 1 !important;
 min-width: 0 !important;
}

/* 포스트 제목 링크 */
.ct-trending-block-item .ct-post-title {
 display: -webkit-box !important;
 -webkit-line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;
 line-clamp: 2 !important;
 overflow: hidden !important;
 font-size: 0.8rem !important;
 font-weight: 600 !important;
 color: #1e293b !important;
 line-height: 1.45 !important;
 text-decoration: none !important;
 word-break: keep-all !important;
 transition: color 0.15s ease !important;
}

.ct-trending-block-item .ct-post-title:hover {
 color: #2563eb !important;
}

/* =============================================
     광고 영역 (Trending / Related Posts 우측 여백)
     ============================================= */

/* Trending 광고 슬롯 공통 */
.ct-trending-ad-slot {
 flex-shrink: 0 !important;
 width: 320px !important;
 height: 100px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 overflow: hidden !important;
 border-radius: 8px !important;
 border: 1px solid #e2e8f0 !important;
 background: #ffffff !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* 왼쪽 슬롯 */
.ct-trending-ad-slot--left {
 margin-right: 0 !important;
 margin-left: 24px !important;
}

/* 오른쪽 슬롯 */
.ct-trending-ad-slot--right {
 margin-left: 0 !important;
 margin-right: 24px !important;
}

/* display는 카카오 스크립트가 직접 제어 — 간섭하지 않음 */
.ct-trending-ad-slot .kakao_ad_area {
 width: 320px !important;
 height: 100px !important;
}

/* =============================================
   사이드바 160×600 광고 wrapper
   ============================================= */
.kakao-sidebar-ad-wrap {
 display: flex !important;
 gap: 12px !important;
 justify-content: center !important;
}

.kakao-sidebar-ad-wrap .kakao_ad_area {
 border-radius: 6px !important;
 overflow: hidden !important;
}

/* =============================================
   Ad Inserter 본문 광고 박스 (code-block-6/7/8)
   ============================================= */
.code-block.code-block-6,
.code-block.code-block-7,
.code-block.code-block-8 {
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 width: 100% !important;
 padding: 12px !important;
 margin: 0 !important;
 background: #ffffff !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 8px !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
 box-sizing: border-box !important;
 overflow: hidden !important;
}

/* 광고가 없을 때 빈 슬롯은 공간 차지 안 함 */
.ct-trending-block .ct-trending-ad-slot:empty,
.ct-related-posts-container .ct-related-ad-slot:empty {
 display: none !important;
}